:root{--bg-main: #0b1218;--bg-panel: #111c24;--text-main: #d7e4ee;--text-muted: #9fb2c2;--accent: #26a7a7;--accent-strong: #1f8d8d;--border: #2f4a60;--shadow: 0 12px 26px rgba(0, 0, 0, .42);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-width:320px;color:var(--text-main);background:radial-gradient(circle at 14% -10%,#1d2c38 0%,transparent 46%),radial-gradient(circle at 85% -8%,#1a2834 0%,transparent 44%),var(--bg-main)}#app{min-height:100vh;padding:.65rem}.app-shell{position:relative;max-width:68rem;margin:0 auto;display:grid;gap:.75rem}.brand-watermark{position:absolute;top:.35rem;right:.45rem;width:1.15rem;height:1.15rem;opacity:.14;filter:grayscale(100%);pointer-events:none;-webkit-user-select:none;user-select:none;z-index:2}.panel{position:relative;background:var(--bg-panel);border:1px solid var(--border);border-radius:.55rem;box-shadow:var(--shadow);padding:.82rem;overflow:hidden}.panel:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#ffffff08,#fff0)}.preview-panel{display:grid;gap:.5rem;padding:.58rem}.panel h2{margin:0 0 .52rem;font-size:1.04rem;letter-spacing:.02em;color:#b5d7eb}.toggle-row{margin-top:.72rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;color:var(--text-muted)}.toggle-row input{inline-size:1.1rem;block-size:1.1rem}.settings-toggle{margin-top:0;width:100%;grid-column:1 / -1;justify-self:stretch}.settings-toggle.is-open{background:var(--accent);color:#fff}.settings-toggle.is-open:hover{background:var(--accent-strong)}.tracking-settings-popup{position:static;width:100%;max-width:22rem;border:1px solid var(--border);border-radius:.5rem;background:#0f1a22;box-shadow:0 18px 34px #03070c8c;padding:.62rem}.settings-toggle-row{margin-top:.45rem;font-size:.74rem}#dev-settings-group{margin-top:.2rem}.settings-popup-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem}.settings-popup-header h3{margin:0;font-size:.88rem}.settings-close{border:1px solid var(--border);border-radius:.4rem;background:#1b2c39;color:var(--text-main);font-size:.72rem;font-weight:600;cursor:pointer;padding:.2rem .38rem}.settings-presets{margin-top:.45rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}.settings-restore{margin-top:.45rem;width:100%;border:1px solid var(--border);border-radius:.4rem;background:#1b2c39;color:var(--text-main);cursor:pointer;font-size:.72rem;font-weight:600;padding:.3rem .44rem}.preset-btn{border:1px solid var(--border);border-radius:.4rem;background:#1b2c39;color:var(--text-main);cursor:pointer;font-size:.72rem;font-weight:600;padding:.28rem .32rem}.preset-btn.is-active{background:#26a7a73b;border-color:#57bcbc}.settings-grid{margin-top:.5rem;display:grid;gap:.34rem;border-top:1px solid rgba(88,112,129,.45);padding-top:.44rem}.settings-subheading{margin:0;font-size:.67rem;letter-spacing:.08em;text-transform:uppercase;color:#90a8ba}.settings-subheading-row{display:flex;align-items:center;justify-content:space-between;gap:.55rem}.layer-group-actions{display:inline-flex;gap:.28rem}.layer-group-btn{border:1px solid var(--border);border-radius:.35rem;background:#1b2c39;color:var(--text-main);font-size:.66rem;font-weight:600;line-height:1;padding:.22rem .34rem;cursor:pointer}.debug-layer-toggle{margin-top:0;font-size:.7rem}.debug-layer-toggle input{inline-size:.98rem;block-size:.98rem}.slider-row{display:flex;justify-content:space-between;align-items:baseline;gap:.52rem;color:var(--text-muted);font-size:.72rem}.settings-select-row{color:var(--text-muted);font-size:.72rem}.settings-select{width:100%;border:1px solid var(--border);border-radius:.4rem;background:#1b2c39;color:var(--text-main);font-size:.74rem;padding:.36rem .44rem}.dev-setting-row[hidden]{display:none}.slider-row strong{color:var(--text-main);font-size:.68rem}.settings-grid input[type=range]{width:100%;margin:0;height:.75rem}.btn{width:100%;border:1px solid var(--border);border-radius:.45rem;padding:.72rem .9rem;font-size:.95rem;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:background .12s ease,box-shadow .12s ease,border-color .12s ease}.btn-primary{background:var(--accent);border-color:#52c6c6;color:#07161b;box-shadow:0 0 0 1px #82dddd33 inset}.btn-primary:hover{background:var(--accent-strong);border-color:#4fb2b2}.btn-secondary{background:#223443;color:var(--text-main);border-color:#3a566d}.btn-secondary:hover{background:#2a4152;border-color:#486983}.btn:disabled{cursor:default;opacity:1}.btn-primary:disabled{background:#223443;color:var(--text-main);border-color:#3a566d}.btn-secondary:disabled{background:#2a4152;color:var(--text-main);border-color:#486983}.camera-window{position:relative;width:min(100%,22rem);max-height:58vh;aspect-ratio:5 / 6;margin:0 auto;border-radius:.55rem;border:1px solid var(--border);overflow:hidden;background:linear-gradient(145deg,#0d1720,#1a2a38);box-shadow:0 0 0 1px #82adcd1f inset,0 10px 24px #00000080}.camera-window:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(180deg,#1b2f3d2e,#0000)}.camera-feed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;background:#000}.tracking-overlay{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}.debug-overlay-layer{position:fixed;inset:0;pointer-events:none;z-index:2147483646;display:none}.debug-overlay-layer:not([hidden]){display:block}.debug-overlay-face-center{position:fixed;top:0;left:0;width:22px;height:22px;border-radius:999px;border:1px solid rgba(121,250,225,.72);box-shadow:inset 0 0 0 1px #79fae133,0 0 12px #3feccd73;transform:translate(-50%,-50%);filter:drop-shadow(0 0 8px rgba(0,0,0,.45));background:radial-gradient(circle,#7bffe329,#7bffe300 62%);animation:debug-crosshair-pulse 1.8s ease-in-out infinite;will-change:transform}.debug-overlay-face-center:before,.debug-overlay-face-center:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#70f3cdf2}.debug-overlay-face-center:before{width:2px;height:140%}.debug-overlay-face-center:after{width:140%;height:2px}.debug-overlay-gaze-dot{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:999px;transform:translate(-50%,-50%);background:radial-gradient(circle,#ffaa7af5,#ff4e65f2);border:1px solid rgba(255,255,255,.82);box-shadow:0 0 0 3px #ff7e7c33,0 0 16px #ff6d6f6b;animation:debug-gaze-dot-pulse 1.15s ease-in-out infinite;will-change:transform}.debug-overlay-head-hud{position:fixed;bottom:max(.35rem,env(safe-area-inset-bottom));left:max(.35rem,env(safe-area-inset-left));margin:0;padding:.22rem .36rem;border-radius:.35rem;font-family:Consolas,Lucida Console,Courier New,monospace;font-size:10px;line-height:1.25;color:#d2e8f6;background:#080f18cc;border:1px solid rgba(121,155,182,.52);box-shadow:0 10px 24px #00000057,inset 0 0 0 1px #96bedc26;white-space:pre}.debug-overlay-head-indicator{position:fixed;bottom:calc(max(.35rem,env(safe-area-inset-bottom)) + 5.7rem);left:max(.35rem,env(safe-area-inset-left));padding:.2rem .35rem;border-radius:.35rem;font-family:Consolas,Lucida Console,Courier New,monospace;font-size:10px;line-height:1.2;border:1px solid rgba(105,177,136,.78);color:#ddffea;background:#091d12d1;box-shadow:0 8px 18px #0000005c,inset 0 0 0 1px #85d7a833}.debug-overlay-head-indicator.is-out{border-color:#c5636ac7;color:#ffe7e4;background:#270a10d6;box-shadow:0 8px 18px #0000005c,inset 0 0 0 1px #dc787e3d}.gaze-overlay-layer{position:fixed;inset:0;pointer-events:none;z-index:2147483647;display:none}.gaze-overlay-layer:not([hidden]){display:block}.gaze-overlay-dot{position:fixed;top:0;left:0;width:14px;height:14px;border-radius:999px;background:#ff4e4eeb;border:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 3px #ff4e4e38,0 0 12px #ff4e4e59;transform:translate(-50%,-50%);will-change:transform}.gaze-overlay-hud{position:fixed;top:max(.35rem,env(safe-area-inset-top));right:max(.35rem,env(safe-area-inset-right));padding:.2rem .35rem;border-radius:.35rem;font-family:Consolas,Lucida Console,Courier New,monospace;font-size:10px;line-height:1.2;color:#d7e4ee;background:#0a1017b8;border:1px solid rgba(138,167,189,.42);white-space:nowrap}.hold-indicator{position:absolute;left:.6rem;top:.6rem;padding:.3rem .55rem;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.02em;color:#0d1218;z-index:4;border:1px solid rgba(0,0,0,.18);box-shadow:0 4px 10px #0000003d}.tracking-missing-indicator{position:absolute;right:.6rem;top:.6rem;padding:.3rem .55rem;border-radius:999px;font-size:.74rem;font-weight:600;letter-spacing:.01em;color:#cfe0ed;background:#091118b8;border:1px solid rgba(93,119,137,.65);z-index:4}.hold-green{background:#5be592}.hold-yellow{background:#f5d45f}.hold-red{background:#ff6f6b}.camera-window.is-active .camera-feed,.camera-window.is-active .tracking-overlay{display:block}.camera-placeholder{position:absolute;inset:0;margin:0;display:grid;place-items:center;color:var(--text-muted);font-size:.94rem;text-align:center;padding:1rem}.camera-window.is-active .camera-placeholder{display:none}.preview-controls{width:min(100%,22rem);margin:0 auto;display:grid;gap:.4rem}.preview-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}.btn-compact{padding:.42rem .38rem;font-size:.74rem;border-radius:.4rem;line-height:1.1;font-family:Consolas,Lucida Console,Courier New,monospace}.calibration-overlay{position:fixed;inset:0;z-index:40;background:transparent;pointer-events:auto}.validation-overlay{position:fixed;inset:0;z-index:45;background:transparent;pointer-events:auto}.validation-chrome{position:absolute;left:50%;top:1rem;transform:translate(-50%);width:min(28rem,calc(100vw - 1.5rem));border:1px solid rgba(83,109,126,.9);border-radius:.75rem;background:#0e161feb;padding:.7rem;display:grid;gap:.35rem;pointer-events:auto}.validation-instructions,.validation-progress,.validation-status{margin:0}.validation-instructions{font-size:.82rem;color:#d7e5ef}.validation-progress{font-size:.8rem;font-weight:700}.validation-status{font-size:.74rem;color:#c1d2df}.validation-target{position:absolute;left:50%;top:50%;width:3.25rem;height:3.25rem;transform:translate(-50%,-50%);pointer-events:none}.validation-target:before,.validation-target:after{content:"";position:absolute;left:50%;top:50%;background:#d9ecfabf;transform:translate(-50%,-50%)}.validation-target:before{width:2px;height:100%}.validation-target:after{width:100%;height:2px}.validation-target-dot{position:absolute;left:50%;top:50%;width:.8rem;height:.8rem;border-radius:50%;transform:translate(-50%,-50%);background:#f1f6fb;box-shadow:0 0 0 3px #ffffff47}.validation-target.is-animating{animation:validation-target-move-in .38s ease-out both}.validation-results{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(28rem,calc(100vw - 1.5rem));border:1px solid rgba(83,109,126,.9);border-radius:.75rem;background:#0e161ff5;padding:.75rem;display:grid;gap:.5rem}.validation-results h3{margin:0;font-size:.92rem;color:#e0ecf5}.validation-results pre{margin:0;white-space:pre-wrap;font-family:Consolas,Lucida Console,Courier New,monospace;font-size:.76rem;line-height:1.4;color:#ccdde9}.validation-bottom-controls{position:absolute;left:50%;bottom:max(.75rem,env(safe-area-inset-bottom));transform:translate(-50%);width:min(28rem,calc(100vw - 1.5rem));display:grid;gap:.45rem;pointer-events:auto}.validation-lock-button{min-height:3.35rem;width:100%;border-radius:.7rem;touch-action:manipulation}.calibration-chrome{position:absolute;left:50%;top:1rem;transform:translate(-50%);width:min(28rem,calc(100vw - 1.5rem));border:1px solid rgba(83,109,126,.9);border-radius:.75rem;background:#0e161feb;padding:.7rem;display:grid;gap:.45rem;pointer-events:auto}.calibration-instructions{margin:0;font-size:.82rem;color:#d7e5ef}.calibration-progress-row{display:flex;align-items:center;gap:.45rem}.calibration-progress-text{margin:0;font-size:.8rem;font-weight:700}.calibration-spinner{width:.88rem;height:.88rem;border-radius:50%;border:2px solid rgba(124,184,201,.35);border-top-color:#9be9f4;animation:calibration-spin .7s linear infinite}.calibration-collecting-text{margin:0;font-size:.74rem;color:#c1d2df}.calibration-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}.calibration-dot{position:absolute;left:50%;top:50%;width:3.25rem;height:3.25rem;margin:0;padding:0;border-radius:999px;transform:translate(-50%,-50%);background:#6eccdf3d;display:grid;place-items:center;pointer-events:none}.calibration-dot.is-animating{animation:calibration-dot-move-in .42s ease-out both}.calibration-dot-inner{width:.85rem;height:.85rem;border-radius:50%;background:#f1f6fb;box-shadow:0 0 0 3px #ffffff47}.calibration-dot-attention{position:absolute;left:50%;top:50%;width:.95rem;height:.95rem;border-radius:50%;border:2px solid rgba(224,243,255,.95);transform:translate(-50%,-50%) scale(.78);opacity:0;pointer-events:none;z-index:8}.calibration-dot-attention.is-flashing{animation:calibration-dot-attention-flash .46s ease-out both}.calibration-bottom-controls{position:absolute;left:50%;bottom:max(.75rem,env(safe-area-inset-bottom));transform:translate(-50%);width:min(28rem,calc(100vw - 1.5rem));display:grid;gap:.45rem;pointer-events:auto}.calibration-coach{margin:0;text-align:center;font-size:.75rem;color:#d3e2ec;text-shadow:0 1px 2px rgba(0,0,0,.35)}.calibration-lock-button{min-height:3.35rem;width:100%;border-radius:.7rem;touch-action:manipulation}.calibration-onboarding{position:fixed;inset:0;z-index:50;background:#03090eb8;display:grid;place-items:center;padding:.75rem}.calibration-onboarding-card{width:min(24rem,calc(100vw - 1.5rem));border:1px solid rgba(83,109,126,.9);border-radius:.75rem;background:#0e161ff5;padding:.8rem;display:grid;gap:.52rem}.calibration-onboarding-step{margin:0;font-size:.74rem;color:#abc0d0}.calibration-onboarding-card h3{margin:0;font-size:1rem;color:#e0ecf5}.calibration-onboarding-body{margin:0;font-size:.82rem;color:#ccdde9}.calibration-onboarding-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.42rem}.calibration-onboarding-skip{justify-self:end;border:0;background:transparent;color:#9eb8c8;font-size:.74rem;cursor:pointer;text-decoration:underline}@keyframes calibration-dot-move-in{0%{transform:translate(-50%,calc(-50% + 22px)) scale(1.3);opacity:.3}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes calibration-dot-attention-flash{0%{opacity:.9;transform:translate(-50%,-50%) scale(.78)}to{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}@keyframes calibration-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes validation-target-move-in{0%{transform:translate(-50%,calc(-50% + 22px)) scale(1.3);opacity:.3}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes debug-crosshair-pulse{0%,to{opacity:.82;filter:drop-shadow(0 0 8px rgba(0,0,0,.45))}50%{opacity:1;filter:drop-shadow(0 0 12px rgba(63,236,205,.38))}}@keyframes debug-gaze-dot-pulse{0%,to{box-shadow:0 0 0 3px #ff7e7c33,0 0 14px #ff6d6f57}50%{box-shadow:0 0 0 5px #ff927233,0 0 22px #ff776d80}}.app-shell.is-calibrating{max-width:none;margin:0;gap:0}.app-shell.is-calibrating .hero,.app-shell.is-calibrating .brand-watermark,.app-shell.is-calibrating .preview-controls,.app-shell.is-validating .brand-watermark,.app-shell.is-validating .hero,.app-shell.is-validating .preview-controls{display:none}.app-shell.is-calibrating .preview-panel{position:fixed;inset:0;z-index:30;border:0;border-radius:0;box-shadow:none;padding:0;background:#000}.app-shell.is-calibrating .camera-window{width:100vw;height:100vh;max-height:none;aspect-ratio:auto;border:0;border-radius:0}.app-shell.is-validating .preview-panel{position:fixed;inset:0;z-index:35;border:0;border-radius:0;box-shadow:none;padding:0;background:#000}.app-shell.is-validating .camera-window{width:100vw;height:100vh;max-height:none;aspect-ratio:auto;border:0;border-radius:0}@media(min-width:42rem){#app{padding:.95rem}.tracking-settings-popup{max-width:20rem}}@media(min-width:60rem){#app{padding:1.2rem}.app-shell{gap:.95rem}.panel{padding:.98rem}}