:root{--bg:#08110f;--panel:#071511b8;--panel-strong:#081a14eb;--panel-border:#92bcaa2e;--text:#dcece5;--muted:#96ab9f;--accent:#6cff93;--accent-soft:#6cff931f;--accent-strong:#6cff9347;--danger:#ff8b8b;--shadow:0 24px 80px #0000006b;--display:"Sora", "Avenir Next", "Segoe UI", sans-serif;--body:"IBM Plex Sans", "Segoe UI", sans-serif;--mono:"IBM Plex Mono", "SFMono-Regular", monospace;color:var(--text);font:16px/1.5 var(--body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at 0 0,#62ffad29,#0000 28%),radial-gradient(circle at right 18%,#5385ff29,#0000 22%),linear-gradient(135deg,#06100e 0%,#0d1816 55%,#08110f 100%)}*{box-sizing:border-box}html{min-height:100%}body{min-height:100svh;margin:0}body:before{content:"";pointer-events:none;opacity:.4;background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);background-size:44px 44px;position:fixed;inset:0;-webkit-mask-image:radial-gradient(circle,#000 48%,#0000 88%);mask-image:radial-gradient(circle,#000 48%,#0000 88%)}button,video,canvas{font:inherit}#app{min-height:100svh}.shell{grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:24px;width:min(1280px,100% - 32px);min-height:100svh;margin:0 auto;padding:24px 0 28px;display:grid}.hero-panel,.viewer-panel{border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow);border-radius:28px;position:relative}.hero-panel{background:linear-gradient(180deg, #6cff9314, transparent 22%), var(--panel);flex-direction:column;justify-content:space-between;padding:28px;display:flex;overflow:hidden}.hero-panel:after{content:"";filter:blur(16px);background:radial-gradient(circle,#6cff932e,#0000 68%);height:180px;position:absolute;inset:auto -10% -18% 28%}.eyebrow{letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font:600 .75rem/1 var(--mono);margin:0 0 16px}h1{font:700 clamp(2.4rem, 5vw, 4.25rem) / .98 var(--display);letter-spacing:-.05em;text-wrap:balance;margin:0}.lede,.tips p,.status-banner,.metrics dt,.metrics dd,.empty-state span{color:var(--muted)}.lede{max-width:24rem;margin:18px 0 0;font-size:1rem}.control-row{flex-wrap:wrap;gap:12px;margin-top:28px;display:flex}.action{color:var(--text);background:#ffffff0a;border:1px solid #dcece52e;border-radius:999px;min-width:10rem;padding:.9rem 1.25rem;transition:transform .18s,border-color .18s,background .18s}.action:hover:not(:disabled),.action:focus-visible:not(:disabled){background:#6cff9314;border-color:#6cff9373;transform:translateY(-1px)}.action:disabled{opacity:.5;cursor:not-allowed}.action-primary{color:#072112;background:linear-gradient(135deg, #9dffb7, var(--accent));border-color:#0000;font-weight:700}.select-control{background:#ffffff0a;border:1px solid #dcece52e;border-radius:22px;gap:.45rem;min-width:min(100%,14rem);padding:.5rem .5rem .5rem .9rem;display:grid}.select-control span{color:var(--muted);font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}.select-control select{appearance:none;color:var(--text);font:500 .98rem/1.2 var(--body);background:0 0;border:0;outline:0;padding-right:1rem}.select-control select:disabled{color:var(--muted)}.metrics{z-index:1;gap:12px;margin:32px 0 0;display:grid;position:relative}.metrics div{background:#ffffff0a;border:1px solid #ffffff12;border-radius:18px;padding:14px 16px}.metrics dt{font:500 .78rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.18em;margin-bottom:4px}.metrics dd{color:var(--text);margin:0;font-size:1rem}.viewer-panel{background:var(--panel-strong);padding:18px}.status-banner{font:500 .9rem/1.4 var(--body);background:#ffffff08;border:1px solid #ffffff14;border-radius:18px;margin-bottom:16px;padding:12px 16px}.status-banner[data-state=streaming]{color:#cbffd7;border-color:var(--accent-strong);background:var(--accent-soft)}.status-banner[data-state=error]{color:#ffe2e2;background:#ff8b8b1a;border-color:#ff8b8b59}.camera-stage{--stage-ratio:16 / 9;aspect-ratio:var(--stage-ratio);background:radial-gradient(circle at top,#6cff931a,#0000 35%),linear-gradient(#0a1311,#050807);border:1px solid #dcece514;border-radius:24px;min-height:min(60vh,680px);position:relative;overflow:hidden}#camera-feed,#overlay,.empty-state{width:100%;height:100%;position:absolute;inset:0}#camera-feed{object-fit:fill;background:#030505}#overlay{pointer-events:none}.empty-state{text-align:center;background:linear-gradient(#060d0b33,#060d0bbd),radial-gradient(circle,#6cff9314,#0000 55%);place-items:center;gap:10px;padding:24px;display:grid}.empty-state[hidden]{display:none}.empty-state p{color:var(--text);font:700 clamp(1.2rem, 3vw, 2rem) / 1 var(--display);letter-spacing:-.04em;margin:0}.empty-state span{max-width:28rem}.tips{justify-content:space-between;gap:12px;margin-top:14px;font-size:.9rem;display:flex}.tips p{flex:1 1 0;margin:0}@media (width<=980px){.shell{grid-template-columns:1fr;gap:14px;width:min(100%,100% - 20px);padding-block:10px 20px}.hero-panel,.viewer-panel{border-radius:22px;padding-inline:18px}.hero-panel{padding-block:22px}.viewer-panel{padding-block:14px}.camera-stage{min-height:auto}.tips{flex-direction:column}}@media (width<=640px){.shell{width:min(100%,100% - 12px)}.hero-panel,.viewer-panel{border-radius:18px}.control-row{flex-direction:column}.action,.select-control{width:100%}.metrics{margin-top:22px}.status-banner{font-size:.84rem}}#spacer{border-top:1px solid var(--border);height:88px}@media (width<=1024px){#spacer{height:48px}}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}