:root{--bg:#0d0f1a;--panel:#141626bd;--panel-border:#ffffff17;--text:#f5f1ec;--muted:#a9a7b8;--accent:#ff7a59;--accent-2:#ff4f81;--teal:#3fe0cf;--bad:#ff6b6b;--radius:18px;--safe-top:max(16px, env(safe-area-inset-top));--safe-right:max(16px, env(safe-area-inset-right));--safe-bottom:max(16px, env(safe-area-inset-bottom));--safe-left:max(16px, env(safe-area-inset-left));--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(120% 80% at 70% 20%, #2a2350 0%, transparent 60%), radial-gradient(90% 70% at 10% 100%, #3a1d33 0%, transparent 60%), var(--bg);color:var(--text);touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}h1,h2,h3{margin:0;line-height:1.15}#stage{position:fixed;inset:0}#stage canvas{touch-action:none;width:100%;height:100%;display:block}#app{pointer-events:none;position:fixed;inset:0}.screen{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);display:flex;position:absolute;inset:0}.panel{pointer-events:auto;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(16px);padding:24px;box-shadow:0 20px 60px #00000059}.hint{color:var(--muted);margin:8px 0 0;font-size:13px}.hint.ok{color:var(--teal)}.btn{min-height:48px;font:inherit;color:var(--text);cursor:pointer;border:0;border-radius:14px;justify-content:center;align-items:center;gap:8px;padding:0 22px;font-weight:650;text-decoration:none;transition:transform .12s,filter .12s;display:inline-flex}.btn:active{transform:scale(.97)}.btn:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--teal);outline-offset:2px}.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));width:100%;box-shadow:0 8px 24px #ff5a6e59}.btn-secondary{background:#ffffff1a;width:100%}.btn-ghost{background:#ffffff14;min-height:44px;padding:0 14px}.btn-small{background:#ffffff24;min-height:36px;padding:0 14px}@media (hover:hover){.btn:hover{filter:brightness(1.1)}}.home{align-items:center}.home-panel{width:min(400px,42vw);max-height:100%;overflow-y:auto}.logo{letter-spacing:-.04em;background:linear-gradient(135deg, #ffd3b5, var(--accent) 45%, var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:clamp(44px,7vw,68px);font-weight:850}.tagline{margin:4px 0 12px;font-weight:650}.lead{color:var(--muted);margin:0 0 20px;font-size:15px}.install{margin-top:16px}.install:empty{display:none}.device-check{margin-top:18px;font-size:14px}.device-check summary{cursor:pointer;color:var(--muted);border-radius:6px}.checks{margin:10px 0 0;padding:0;list-style:none}.checks li{border-top:1px solid var(--panel-border);justify-content:space-between;gap:12px;padding:6px 0;display:flex}.checks li:before{content:"✓";color:var(--teal);flex:none;width:1em}.checks li.bad:before{content:"•";color:var(--bad)}.checks li>span:first-of-type{flex:1}.checks .detail{color:var(--muted);text-align:right}.stage-hint{right:var(--safe-right);bottom:var(--safe-bottom);color:var(--muted);opacity:.8;margin:0;font-size:13px;position:absolute}.stage-hint.bad{color:var(--bad)}@media (orientation:portrait){.home{justify-content:center;align-items:flex-end}.home-panel{width:100%;max-width:520px;max-height:58%;padding:20px}.logo{font-size:40px}.lead{margin-bottom:16px;font-size:14px}.stage-hint{top:var(--safe-top);text-align:center;bottom:auto;left:0;right:0}}@media (max-height:760px) and (orientation:portrait),(max-height:500px){.lead{display:none}.tagline{margin-bottom:16px}}@media (max-height:500px) and (orientation:landscape){.home-panel{padding:16px 20px}.logo{font-size:34px}.device-check{margin-top:10px}}.scan{pointer-events:auto;background:var(--bg);flex-direction:column;gap:12px}.topbar{align-items:center;gap:12px;display:flex}.topbar h2{font-size:18px}.scan-body{flex:1;grid-template-columns:minmax(0,1fr) 320px;gap:16px;min-height:0;display:grid}.cam{border-radius:var(--radius);background:#000;flex-direction:column;justify-content:flex-end;align-items:center;min-height:0;padding:16px;display:flex;position:relative;overflow:hidden}.cam-mirror{position:absolute;inset:0;transform:scaleX(-1)}.cam-feed,.cam-overlay{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.cam-status{text-align:center;background:#0009;border-radius:999px;max-width:100%;margin:0 0 8px;padding:8px 16px;position:relative}.cam-status[data-kind=error]{color:#ffd1d1;background:#78141ebf;border-radius:14px}.cam .btn{width:auto;position:relative}.hud{padding:18px;font-size:14px;overflow-y:auto}.stat{border-bottom:1px solid var(--panel-border);flex-direction:column;padding:8px 0;display:flex}.stat-label{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:12px}.stat-value{font-variant-numeric:tabular-nums}.stat-value[data-ok=true]{color:var(--teal)}.stat-value[data-ok=false]{color:#ffc46b}.hud h3{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:14px;font-size:12px}.shapes{min-height:130px;margin:8px 0 12px;padding:0;list-style:none}.shapes li{grid-template-columns:1fr 90px;align-items:center;gap:8px;height:26px;display:grid}.shape-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bar{background:#ffffff1a;border-radius:3px;height:6px;overflow:hidden}.bar span{background:linear-gradient(90deg, var(--teal), var(--accent));height:100%;display:block}.toggle{cursor:pointer;align-items:center;gap:8px;min-height:44px;display:flex}.toggle input{width:20px;height:20px;accent-color:var(--accent)}@media (orientation:portrait){.scan-body{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:1fr}.cam-feed,.cam-overlay{object-fit:cover}.hud{grid-template-columns:1fr 1fr;align-content:start;column-gap:16px;max-height:36vh;padding:12px 16px;display:grid}.hud h3,.shapes,.toggle{grid-column:1/-1}.hud .hint{display:none}}.guide{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.guide[data-mode=none]{display:none}.guide-oval{fill:none;stroke:#fff9;stroke-width:.6px;stroke-dasharray:2 1.5}.guide-seg{fill:none;stroke:#fff3;stroke-width:3px;stroke-linecap:round;transition:stroke .25s}.guide-seg.done{stroke:var(--teal)}.guide-dot{fill:var(--accent)}.guide[data-mode=front] .guide-seg,.guide[data-mode=front] .guide-dot{display:none}.create-panel{padding:20px;overflow-y:auto}.step-label{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 4px;font-size:12px}.step-title{font-size:22px}.step-text{color:var(--muted);margin:8px 0 0;font-size:15px}.meter{background:#ffffff1a;border-radius:5px;height:10px;margin:16px 0 4px;overflow:hidden}.meter span{background:linear-gradient(90deg, var(--teal), var(--accent));width:0;height:100%;transition:width .1s linear;display:block}.step-actions{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.step-actions:empty{display:none}.step-actions .btn{flex:1;width:auto}.chips{flex-wrap:wrap;gap:8px;margin:0 0 16px;display:flex}.chip{border:1px solid var(--panel-border);min-height:40px;color:var(--text);font:inherit;cursor:pointer;background:#ffffff14;border-radius:999px;padding:0 14px;font-size:14px}.chip:active{transform:scale(.96)}.btn-danger{color:#ffb3b3;background:0 0;width:100%;margin-top:8px}.link{color:var(--teal);text-decoration:none;display:block}@media (orientation:portrait){.create-panel{max-height:42vh;padding:14px 16px}.step-title{font-size:19px}.step-text{font-size:14px}}@media (orientation:landscape) and (max-height:500px){.scan{gap:8px}.topbar .btn-ghost{min-height:36px}.topbar h2{font-size:16px}.scan-body{grid-template-columns:minmax(0,1fr) 260px;gap:10px}.create-panel,.hud{padding:12px 14px}.step-title{font-size:17px}.step-text{font-size:13px}.hud .hint{display:none}}#toasts{left:50%;top:var(--safe-top);z-index:10;flex-direction:column;gap:8px;width:min(440px,100% - 32px);display:flex;position:fixed;transform:translate(-50%)}.toast{border:1px solid var(--panel-border);background:#1e2034f2;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;font-size:14px;display:flex;box-shadow:0 10px 30px #0006}
