:root{color-scheme:dark;--bg: #07090c;--panel: rgba(11, 15, 22, .78);--line: rgba(255, 255, 255, .11);--text: #f4f7fb;--muted: #8c99aa;--accent: #62d7ff;--good: #78f0c6;--warn: #ffcc72;--shadow: 0 18px 60px rgba(0, 0, 0, .42);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text)}button{border:0;background:transparent;color:inherit;cursor:pointer;font:inherit}button:disabled{cursor:not-allowed;opacity:.48}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.glass{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%)}.app{display:grid;grid-template-rows:58px 1fr;width:100vw;height:100vh;height:100dvh;background:radial-gradient(circle at 52% 18%,rgba(98,215,255,.11),transparent 34%),#05070a}.topbar{z-index:30;display:grid;grid-template-columns:auto minmax(320px,720px) auto;align-items:center;gap:16px;padding:8px 14px;border-bottom:1px solid var(--line);background:#090d13e0}.brand,.top-actions{display:flex;align-items:center;gap:10px}.brand-mark{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(145deg,#bdf7ff,#49c9f5);color:#061219;font-weight:900}.brand strong,.brand small{display:block}.brand strong{font-size:14px;line-height:1.05}.brand small{margin-top:2px;color:var(--muted);font-size:10px;font-weight:820;letter-spacing:.08em;text-transform:uppercase}.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.flow span{min-height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.07);border-radius:8px;color:var(--muted);font-size:11px;font-weight:850}.flow span.active{border-color:#62d7ff6b;background:#62d7ff21;color:#d9f8ff}.flow span.done{color:var(--good)}.quality-pill{min-width:112px;padding:7px 10px;border-radius:999px;background:#62d7ff1a;color:#bcefff;font-size:11px;font-weight:760;text-align:center}.icon-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;color:#c9d3de}.icon-btn:hover,.primary-btn:hover,.secondary-btn:hover,.stop-btn:hover{filter:brightness(1.08)}.stage{position:relative;min-height:0;overflow:hidden}#cameraCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}.landing-panel,.instruction-panel,.retry-panel,.results-panel{position:absolute;z-index:12;border-radius:12px}.landing-panel{left:50%;top:50%;width:min(680px,calc(100vw - 32px));padding:30px;text-align:center;transform:translate(-50%,-50%)}.eyebrow{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}h1,h2,p{margin:0}.landing-panel h1{margin-top:12px;font-size:clamp(38px,6vw,72px);line-height:.96;letter-spacing:0}.promise{margin-top:18px;color:#d8e4ee;font-size:16px;font-weight:760}.safety{margin:20px auto 24px;max-width:560px;color:#aeb9c6;font-size:13px;line-height:1.55}.landing-panel small{display:block;margin-top:14px;color:var(--good);font-size:12px;font-weight:760}.primary-btn,.secondary-btn,.stop-btn{min-height:42px;padding:0 18px;border-radius:8px;font-weight:900}.primary-btn{background:linear-gradient(145deg,#bdf7ff,#49c9f5);color:#061219}.secondary-btn{border:1px solid var(--line);background:#ffffff0f;color:var(--text)}.stop-btn{background:#ffcc7221;color:#ffd88d;border:1px solid rgba(255,204,114,.24)}.instruction-panel{left:50%;bottom:24px;width:min(720px,calc(100vw - 32px));padding:18px;transform:translate(-50%)}.instruction-panel h2{margin-top:6px;font-size:clamp(24px,4vw,42px);line-height:1.08}.instruction-panel p{margin-top:8px;color:#c7d3de;font-size:14px}.meter-wrap{height:8px;margin-top:16px;border-radius:999px;background:#ffffff14;overflow:hidden}.progress-bar{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--good));transition:width .12s linear}.timer-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}.timer-row b{min-width:84px;font-size:28px;font-variant-numeric:tabular-nums}.retry-panel{left:50%;bottom:24px;width:min(560px,calc(100vw - 32px));padding:20px;transform:translate(-50%)}.retry-panel h2{font-size:28px}.retry-panel p{margin:10px 0 18px;color:#c7d3de;line-height:1.45}.results-panel{inset:76px 18px 18px;padding:18px;overflow:auto}.results-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.results-head h2{margin-top:4px;font-size:clamp(32px,5vw,64px)}.result-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}.result-card{min-height:204px;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#ffffff0a}.result-card span{display:block}.result-card span{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.result-card b{display:block;margin:12px 0 8px;font-size:clamp(24px,3vw,36px);line-height:1.05}.metric-list{color:#aeb9c6;font-size:13px;line-height:1.45}.metric-list dl{display:grid;gap:6px;margin:0}.metric-list dl div,.bar-row{display:grid;grid-template-columns:minmax(92px,1fr) auto;gap:10px;align-items:baseline}.metric-list dt{color:#7f8c9b;font-weight:760}.metric-list dd{margin:0;color:#e0ebf2;font-weight:850;text-align:right}.result-card-wide .metric-list dl div{grid-template-columns:1fr;gap:3px}.result-card-wide .metric-list dd{text-align:left}.compare-bars{display:grid;gap:12px;margin-top:14px}.compare-bar>span{margin-bottom:6px;color:#7f8c9b;font-size:11px;letter-spacing:0;text-transform:none}.bar-row{grid-template-columns:38px 1fr 46px;gap:8px;margin-top:5px;font-size:11px;font-variant-numeric:tabular-nums}.bar-row em{color:#95a3b3;font-style:normal}.bar-row i{height:8px;align-self:center;border-radius:999px;background:#ffffff14;overflow:hidden}.bar-row b{display:block;height:100%;margin:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--good))}.bar-row strong{color:#dce8f0;font-weight:800;text-align:right}.insight{margin-top:18px;padding:18px;border-radius:10px;background:#62d7ff1a;color:#e7fbff;font-size:20px;font-weight:800;line-height:1.35}.disclaimer{margin-top:14px;color:var(--muted);font-size:12px;line-height:1.5}.debug-panel{position:absolute;right:14px;top:14px;z-index:20;width:min(380px,calc(100vw - 28px));max-height:calc(100vh - 120px);overflow:auto;padding:12px;border-radius:10px;pointer-events:none}.debug-panel pre{margin:0;color:#b7f8e1;font-size:11px;white-space:pre-wrap}.toast{position:fixed;right:16px;bottom:16px;z-index:80;max-width:min(360px,calc(100vw - 32px));padding:10px 12px;border-radius:8px;color:#fff;font-size:12px;font-weight:780}[hidden]{display:none!important}@media(max-width:980px){.topbar{grid-template-columns:1fr auto}.flow{grid-column:1 / -1;order:3}.quality-pill{display:none}.result-grid{grid-template-columns:1fr 1fr}}@media(max-width:640px){.app{grid-template-rows:auto 1fr}.topbar{padding:8px 10px;gap:8px}.flow span{min-height:34px;font-size:10px}.landing-panel{padding:22px}.landing-panel h1{font-size:38px}.instruction-panel{bottom:12px;padding:14px}.timer-row{flex-wrap:wrap}.timer-row b{width:100%}.result-grid{grid-template-columns:1fr}.results-panel{inset:112px 10px 10px}.results-head{display:grid}.result-actions{justify-content:stretch}.result-actions button{flex:1}}