:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#14151a;--panel:#1d1f27;--text:#e6e7ea;--muted:#9aa0ab;--ok:#18c964;--ng:#f43f5e;--calib:#f5c518;--idle:#5a6072;--mono:ui-monospace, Consolas, "Cascadia Mono", monospace;font-family:system-ui,Segoe UI,Yu Gothic UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0}main{flex-direction:column;align-items:center;gap:16px;max-width:960px;margin:0 auto;padding:24px 16px 48px;display:flex}h1{margin:4px 0 0;font-size:24px;font-weight:600}h1 small{color:var(--muted);margin-left:8px;font-size:14px;font-weight:400}.error{color:var(--ng);border:1px solid var(--ng);background:#f43f5e1f;border-radius:8px;padding:10px 14px}.stage{aspect-ratio:16/9;border:6px solid var(--idle);background:#000;border-radius:14px;width:100%;transition:border-color .2s;position:relative;overflow:hidden}.stage.ok{border-color:var(--ok)}.stage.ng{border-color:var(--ng)}.stage.calib{border-color:var(--calib)}.stage canvas{object-fit:cover;width:100%;height:100%;display:block}.hud{pointer-events:none;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;display:flex;position:absolute;inset:0}.hud .status{background:#00000073;border-radius:8px;padding:6px 12px;font-size:22px;font-weight:700}.hud .metrics{background:#0006;border-radius:6px;padding:4px 10px;font-size:14px}.hud .debug{font-family:var(--mono);color:#ffe680;background:#0000008c;border-radius:6px;padding:6px 10px;font-size:12px;line-height:1.5}.stage.ok .hud .status{color:var(--ok)}.stage.ng .hud .status{color:var(--ng)}.stage.calib .hud .status{color:var(--calib)}.controls{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.controls button{border:1px solid var(--idle);background:var(--panel);color:var(--text);cursor:pointer;border-radius:8px;padding:8px 14px;font-size:14px}.controls button:hover{border-color:var(--muted)}.target{background:var(--calib);pointer-events:none;border-radius:50%;width:26px;height:26px;margin:-13px 0 0 -13px;animation:1s ease-in-out infinite target-pulse;position:absolute;box-shadow:0 0 0 4px #f5c5184d}@keyframes target-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.65)}}.target.stable{background:var(--ok);animation:none;transform:scale(.8);box-shadow:0 0 0 6px #18c96459}.gaze-dot{pointer-events:none;background:#00c8ff59;border:2px solid #00c8ff99;border-radius:50%;width:16px;height:16px;margin:-8px 0 0 -8px;transition:left 50ms linear,top 50ms linear;position:absolute}.gaze-dot.bright{background:#00c8ffb3;border-color:#00e0ff}.gaze-dot.viewport{z-index:40;position:fixed}.stage.calibrating{background:#fff}.stage.calibrating canvas{display:none}.cal-overlay{color:#1a1a1a;position:absolute;inset:0}.cal-fullscreen{color:#1a1a1a;z-index:50;background:#fff;position:fixed;inset:0}.cal-lens{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;display:flex;position:absolute;inset:0}.cal-lens .arrow{color:#2b6cff;font-size:64px;line-height:1;animation:1.2s ease-in-out infinite arrow-bob}.cal-lens .big{letter-spacing:.02em;font-size:clamp(28px,5vw,52px);font-weight:800}.cal-lens .sub2{color:#555;font-size:clamp(15px,2.2vw,20px)}.cal-progress{background:#e2e2ea;border-radius:6px;height:10px;position:absolute;bottom:6%;left:8%;right:8%;overflow:hidden}.cal-progress .bar{background:var(--ok);height:100%;transition:width .12s linear}@keyframes arrow-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.cal-instruction{text-align:center;font-size:22px;font-weight:700;position:absolute;top:7%;left:0;right:0}.cal-instruction .sub{color:#666;margin-top:6px;font-size:15px;font-weight:400;display:block}.cal-debug{font-family:var(--mono);color:#555;font-size:12px;position:absolute;bottom:12px;left:12px}@property --pct{syntax:"<percentage>";inherits:true;initial-value:0%}.cal-target{--ring:#2b6cff;--glow:#2b6cff80;width:64px;height:64px;margin:-32px 0 0 -32px;transition:--pct .12s linear;position:absolute}.cal-target.validate{--ring:#9b5cff;--glow:#9b5cff80}.cal-target .ring{background:conic-gradient(var(--ring) var(--pct,0%), #e2e2ea 0);border-radius:50%;width:100%;height:100%;-webkit-mask:radial-gradient(#0000 52%,#000 54%);mask:radial-gradient(#0000 52%,#000 54%)}.cal-target .dot{background:var(--ring);border-radius:50%;width:20px;height:20px;margin:-10px 0 0 -10px;transition:transform .15s,box-shadow .15s,background .15s;position:absolute;top:50%;left:50%}.cal-target.good .dot{box-shadow:0 0 0 5px var(--glow), 0 0 16px var(--glow);transform:scale(1.15)}.cal-target.confirm{--ring:var(--ok);--glow:#18c9648c;animation:.45s cubic-bezier(.34,1.56,.64,1) captured-pop}.cal-target.confirm .dot{background:var(--ok);transform:scale(1.2)}@keyframes captured-pop{0%{transform:scale(1)}45%{transform:scale(1.3)}to{transform:scale(1.08)}}.accuracy{color:var(--muted);margin:0;font-size:14px}