@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Manrope:wght@400;500;600;700&display=swap');

:root { --navy:#15212b; --navy-2:#1d2d37; --paper:#f5f1e8; --paper-2:#ebe5d9; --ink:#1e292e; --muted:#76817e; --amber:#e7a342; --amber-dark:#b97520; --mint:#a9c6b4; --line:rgba(31,43,48,.14); --white:#fffdf8; }
* { box-sizing:border-box; }
html { min-width:320px; scroll-behavior:smooth; }
body { margin:0; background:var(--navy); color:var(--paper); font-family:Manrope, "Noto Sans SC", sans-serif; font-size:16px; line-height:1.5; }
button, label { font:inherit; }
button, label { -webkit-tap-highlight-color:transparent; }
button:focus-visible, label:focus-visible, a:focus-visible { outline:3px solid var(--amber); outline-offset:4px; }
.app-shell { max-width:1440px; margin:0 auto; min-height:100vh; padding:0 5.5vw; display:flex; flex-direction:column; }
.topbar { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(245,241,232,.16); }
.brand { display:flex; gap:11px; align-items:center; color:var(--paper); text-decoration:none; font-weight:700; letter-spacing:.02em; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; border:1px solid var(--amber); color:var(--amber); font-family:Fraunces, serif; font-size:18px; border-radius:50%; }
.topbar-note { color:#b1bdb7; font-size:13px; display:flex; align-items:center; gap:8px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(169,198,180,.13); }
.workspace { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(420px,1.15fr); gap:clamp(40px,8vw,128px); align-items:center; flex:1; padding:7.5vh 0 8vh; }
.intro-column { max-width:530px; }
.eyebrow, .section-kicker { margin:0; font:500 11px/1.2 "DM Mono", monospace; color:var(--amber); letter-spacing:.16em; }
h1,h2,h3,p { margin-top:0; }
h1 { margin:18px 0 24px; font:500 clamp(54px,6.5vw,96px)/.94 Fraunces, Georgia, serif; letter-spacing:-.055em; }
h1 em { color:var(--amber); font-style:normal; }
.intro-copy { color:#b8c2bd; max-width:410px; font-size:16px; line-height:1.85; }
.micro-note { display:flex; align-items:center; gap:12px; color:#86938e; font-size:13px; margin-top:35px; }
.micro-note .line { width:34px; height:1px; background:var(--amber); }
.measure-strip { display:flex; gap:0; margin-top:58px; color:#718079; font:400 11px "DM Mono", monospace; letter-spacing:.1em; text-transform:uppercase; }
.measure-strip span { padding-right:22px; margin-right:22px; border-right:1px solid rgba(245,241,232,.22); }
.measure-strip span:last-child { border:0; }
.check-card { color:var(--ink); background:var(--paper); border-radius:18px; padding:clamp(24px,4vw,45px); box-shadow:0 24px 70px rgba(0,0,0,.18); }
.card-heading, .result-header, .preview-meta, .modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.card-heading h2, .result-header h2 { margin:8px 0 0; font:600 29px/1.05 Fraunces, Georgia, serif; letter-spacing:-.03em; }
.step-chip, .result-badge { color:var(--muted); border:1px solid var(--line); padding:7px 9px; font:500 10px "DM Mono", monospace; letter-spacing:.12em; }
.input-zone { min-height:365px; margin-top:28px; border:1px dashed rgba(31,43,48,.27); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:25px; background:rgba(255,253,248,.38); }
.tongue-glyph { width:70px; height:70px; border-radius:50% 50% 45% 45%; background:var(--amber); display:grid; place-items:center; margin-bottom:21px; transform:rotate(180deg); position:relative; box-shadow:0 10px 20px rgba(185,117,32,.2); }
.tongue-glyph:before { content:""; width:1px; height:42px; background:rgba(118,74,25,.4); }
.tongue-glyph span { position:absolute; width:11px; height:11px; border-radius:50%; background:rgba(255,244,214,.7); top:18px; left:19px; box-shadow:24px 18px rgba(255,244,214,.6), 8px 30px rgba(255,244,214,.5); }
.zone-title { font:600 20px Fraunces, Georgia, serif; margin-bottom:6px; }
.zone-help, .file-hint { color:var(--muted); font-size:13px; margin-bottom:22px; }
.file-hint { margin:17px 0 0; font:400 11px "DM Mono", monospace; }
.input-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.button { cursor:pointer; border:0; border-radius:7px; min-height:46px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:14px; transition:transform .18s ease, background .18s ease, box-shadow .18s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--amber); color:#2d2518; box-shadow:0 7px 16px rgba(185,117,32,.18); }
.button-primary:hover { background:#efb156; box-shadow:0 10px 20px rgba(185,117,32,.24); }
.button-secondary { background:transparent; color:var(--ink); border:1px solid var(--line); }
.button-secondary:hover { background:var(--paper-2); }
.button-icon { font-size:19px; font-weight:400; }
.full-button { width:100%; margin-top:18px; }
.card-footer { display:flex; gap:8px; align-items:center; border-top:1px solid var(--line); margin-top:25px; padding-top:17px; color:#8c918d; font-size:12px; }
.card-footer span { color:var(--amber-dark); font-size:18px; }
.preview-state, .result-state { margin-top:28px; animation:rise .35s ease both; }
.preview-frame { border-radius:11px; background:var(--paper-2); aspect-ratio:1.35 / 1; overflow:hidden; display:grid; place-items:center; }
.preview-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.preview-meta { color:var(--muted); margin-top:11px; font:400 12px "DM Mono", monospace; align-items:center; }
.text-button { border:0; background:none; padding:4px 0; cursor:pointer; color:var(--amber-dark); font-size:12px; }
.arrow { font-size:20px; line-height:0; }
.error-state { margin-top:18px; padding:12px 14px; color:#844c31; background:#f3dfd3; border:1px solid #dfbba6; border-radius:8px; display:flex; gap:9px; align-items:center; font-size:13px; }
.error-icon { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#a86b4b; color:#fff; font-weight:700; }
.analysis-loading { display:flex; align-items:center; gap:14px; margin-top:18px; padding:15px 16px; border:1px solid rgba(83,116,88,.18); border-radius:10px; background:#e3ecdf; color:#304837; animation:rise .35s ease both; }
.loading-orbit { position:relative; width:42px; height:42px; border:1px solid #9db69f; border-radius:50%; flex:none; animation:breathe 2.2s ease-in-out infinite; }
.loading-orbit:before, .loading-orbit:after { content:""; position:absolute; inset:7px; border:1px solid #739276; border-radius:50%; }
.loading-orbit:after { inset:14px; background:var(--amber); border:0; opacity:.9; }
.loading-orbit span, .loading-orbit i { position:absolute; width:5px; height:5px; border-radius:50%; background:#56755b; }
.loading-orbit span { top:1px; left:18px; }
.loading-orbit i { right:2px; bottom:10px; }
.loading-copy { min-width:0; }
.loading-copy .section-kicker { color:#56755b; }
.loading-copy strong { display:block; margin:5px 0 3px; font:600 18px Fraunces, Georgia, serif; color:#304837; }
.loading-copy p:last-child { margin:0; color:#52665a; font-size:12px; line-height:1.55; }
.connection-status { margin-top:7px !important; color:#2f6240 !important; font-size:11px !important; word-break:break-word; }
.diagnostic-status { margin-top:4px !important; color:#6e786f !important; font:400 10px/1.45 "DM Mono", monospace !important; word-break:break-word; }
.result-header { align-items:center; }
.result-summary { margin:20px 0 18px; padding:15px 17px; background:var(--paper-2); border-left:3px solid var(--amber); font-size:14px; line-height:1.7; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.metric { min-height:120px; background:var(--white); border:1px solid var(--line); border-radius:9px; padding:14px; display:flex; flex-direction:column; }
.metric-label { color:var(--muted); font-size:12px; }
.metric strong { font:600 22px Fraunces, Georgia, serif; margin:12px 0 5px; }
.metric-note { color:#7c8580; font-size:11px; line-height:1.45; }
.tea-recommendation { display:flex; gap:15px; align-items:flex-start; background:var(--navy); color:var(--paper); border-radius:10px; margin-top:13px; padding:17px; }
.tea-image { width:118px; height:118px; flex:none; border-radius:8px; object-fit:cover; background:#d5c3a6; }
.tea-icon { width:42px; height:42px; border:1px solid var(--amber); color:var(--amber); border-radius:50%; display:grid; place-items:center; font:500 18px Fraunces, serif; flex:none; }
.tea-recommendation h3 { margin:5px 0 4px; font:600 23px Fraunces, Georgia, serif; color:var(--paper); }
.tea-recommendation p:last-child { margin:0; color:#acb7b1; font-size:12px; line-height:1.6; }
.tea-reason { margin:7px 0 11px; color:#d6ddd8; font-size:12px; line-height:1.6; }
.tea-benefits { margin:0 0 11px; }
.tea-benefits .section-kicker { margin-bottom:5px; color:var(--amber); }
.tea-benefits ul { margin:0; padding-left:16px; color:#d6ddd8; font-size:12px; line-height:1.55; }
.tea-benefits li + li { margin-top:3px; }
.tea-copy { min-width:0; flex:1; }
.tea-ingredients { display:grid; gap:7px; margin:12px 0 11px; padding:0; list-style:none; }
.tea-ingredients li { display:grid; grid-template-columns:auto auto 1fr; align-items:baseline; gap:8px; font-size:12px; line-height:1.45; }
.tea-ingredients strong { color:var(--paper); font-weight:600; }
.tea-ingredients span { color:var(--amber); white-space:nowrap; }
.tea-ingredients em { color:#acb7b1; font-style:normal; }
.condition-panel { display:flex; gap:15px; align-items:flex-start; background:#e3ecdf; border:1px solid rgba(83,116,88,.18); border-radius:10px; padding:17px; margin-top:13px; }
.condition-mark { width:34px; height:34px; border:1px solid #739276; color:#56755b; border-radius:50%; display:grid; place-items:center; font-size:18px; flex:none; }
.condition-panel h3 { margin:5px 0 5px; font:600 21px Fraunces, Georgia, serif; color:#304837; }
.condition-panel p:last-child { margin:0; color:#52665a; font-size:12px; line-height:1.65; }
.reading-details { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:13px; }
.reading-details > div { background:var(--white); border:1px solid var(--line); border-radius:9px; padding:15px; }
.reading-details ul { margin:11px 0 0; padding:0 0 0 16px; color:#67726d; font-size:12px; line-height:1.7; }
.reading-details li + li { margin-top:4px; }
.care-advice { margin:11px 0 0; color:#67726d; font-size:12px; line-height:1.7; }
.camera-modal { border:0; border-radius:16px; padding:28px; width:min(92vw,500px); background:var(--paper); color:var(--ink); box-shadow:0 25px 80px rgba(0,0,0,.35); }
.camera-modal::backdrop { background:rgba(7,15,20,.78); backdrop-filter:blur(4px); }
.modal-head h2 { margin:7px 0 20px; font:600 27px Fraunces, Georgia, serif; }
.close-button { border:0; background:transparent; color:var(--muted); font-size:29px; line-height:1; cursor:pointer; }
.camera-view { position:relative; aspect-ratio:4/3; border-radius:9px; overflow:hidden; background:#0b1115; }
.camera-view video { width:100%; height:100%; object-fit:cover; display:block; }
.camera-guide { position:absolute; inset:17% 23%; border:1px solid rgba(231,163,66,.85); border-radius:48% 48% 42% 42%; box-shadow:0 0 0 999px rgba(11,17,21,.2); }
.camera-error { color:#844c31; font-size:13px; }
.site-footer { padding:21px 0 28px; display:flex; justify-content:space-between; color:#64736d; font:400 11px "DM Mono", monospace; letter-spacing:.06em; }
[hidden] { display:none !important; }
@keyframes rise { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@keyframes breathe { 0%,100% { transform:scale(.94); box-shadow:0 0 0 0 rgba(115,146,118,.12); } 50% { transform:scale(1.04); box-shadow:0 0 0 8px rgba(115,146,118,.08); } }
@media (max-width:820px) { .app-shell { padding:0 22px; } .topbar { height:72px; } .workspace { grid-template-columns:1fr; gap:36px; padding:52px 0 44px; } .intro-column { max-width:none; } h1 { font-size:64px; } .intro-copy { max-width:500px; } .measure-strip { margin-top:33px; } .check-card { padding:24px; } }
@media (max-width:520px) { .topbar-note { font-size:11px; } .topbar-note .status-dot { display:none; } h1 { font-size:52px; } .intro-copy { font-size:15px; } .input-zone { min-height:320px; } .input-actions { flex-direction:column; width:100%; } .input-actions .button { width:100%; } .metric-grid { grid-template-columns:repeat(2,1fr); gap:6px; } .metric { padding:11px 9px; min-height:125px; } .metric strong { font-size:19px; } .reading-details { grid-template-columns:1fr; } .site-footer { gap:12px; flex-direction:column; } .camera-modal { padding:22px; } }
@media (max-width:520px) {
  .app-shell { padding:0 16px; }
  .topbar { height:60px; }
  .brand { gap:8px; font-size:14px; }
  .brand-mark { width:27px; height:27px; font-size:16px; }
  .workspace { gap:20px; padding:24px 0 18px; }
  h1 { margin:10px 0 12px; font-size:46px; line-height:.96; }
  .intro-copy { max-width:none; font-size:13px; line-height:1.6; }
  .micro-note { margin-top:14px; font-size:11px; gap:8px; }
  .micro-note .line { width:22px; }
  .measure-strip { margin-top:18px; font-size:10px; }
  .measure-strip span { padding-right:12px; margin-right:12px; }
  .check-card { padding:16px; border-radius:14px; }
  .card-heading h2, .result-header h2 { font-size:24px; }
  .step-chip, .result-badge { padding:5px 7px; font-size:9px; }
  .input-zone { min-height:248px; margin-top:18px; padding:16px; }
  .tongue-glyph { width:54px; height:54px; margin-bottom:13px; }
  .tongue-glyph:before { height:31px; }
  .tongue-glyph span { transform:scale(.78); top:10px; left:12px; }
  .zone-title { font-size:17px; }
  .zone-help { font-size:11px; margin-bottom:14px; }
  .input-actions { flex-direction:row; width:100%; gap:7px; }
  .input-actions .button { width:auto; min-width:0; flex:1; padding:0 8px; font-size:12px; }
  .button { min-height:42px; }
  .file-hint { margin-top:12px; font-size:10px; }
  .card-footer { margin-top:17px; padding-top:12px; font-size:10px; }
  .preview-state, .result-state { margin-top:18px; }
  .result-summary { margin:14px 0 12px; padding:11px 12px; font-size:12px; line-height:1.55; }
  .metric-grid { gap:5px; }
  .metric { min-height:96px; padding:9px 8px; }
  .metric-label { font-size:10px; }
  .metric strong { margin:7px 0 3px; font-size:17px; }
  .metric-note { font-size:10px; line-height:1.35; }
  .condition-panel, .reading-details > div, .tea-recommendation { padding:12px; }
  .condition-panel, .tea-recommendation { gap:10px; }
  .condition-mark, .tea-icon { width:30px; height:30px; font-size:15px; }
  .tea-image { width:82px; height:82px; }
  .condition-panel h3, .tea-recommendation h3 { font-size:19px; }
  .condition-panel p:last-child, .tea-recommendation p:last-child { font-size:11px; line-height:1.5; }
  .reading-details { grid-template-columns:1fr 1fr; gap:6px; }
  .reading-details ul { margin-top:7px; padding-left:13px; font-size:10px; line-height:1.5; }
  .care-advice { margin-top:7px; font-size:10px; line-height:1.5; }
  .tea-ingredients { gap:5px; margin:9px 0 8px; }
  .tea-ingredients li { gap:5px; font-size:10px; }
  .full-button { margin-top:12px; }
  .site-footer { padding:13px 0 16px; gap:4px; font-size:9px; }
  .camera-modal { padding:16px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }
@media (max-width:520px) { .analysis-loading { gap:10px; padding:11px 12px; } .loading-orbit { width:34px; height:34px; } .loading-orbit:before { inset:6px; } .loading-orbit:after { inset:11px; } .loading-copy strong { font-size:16px; } .loading-copy p:last-child { font-size:10px; } }