:root{--bg: #0b1020;--bg-elev: #131a2e;--bg-elev-2: #1a2240;--fg: #e8eefc;--fg-dim: #93a0c4;--accent: #5eead4;--accent-2: #818cf8;--danger: #f87171;--ok: #34d399;--border: #243054;--radius: 10px;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;padding:0;min-height:100vh}body{background:var(--bg);color:var(--fg)}a{color:var(--accent)}button{font:inherit}#app{max-width:1300px;margin:0 auto;padding:24px 20px 80px}header{display:flex;align-items:baseline;gap:18px;margin-bottom:18px}header h1{margin:0;font-size:32px;letter-spacing:-.02em;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{color:var(--fg-dim);margin:0}.stage{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}@media (max-width: 1000px){.stage{grid-template-columns:1fr}}.video-wrap{position:relative;background:#000;border-radius:var(--radius);overflow:hidden;aspect-ratio:4 / 3;border:1px solid var(--border)}#video,#overlay{position:absolute;inset:0;width:100%;height:100%}#video{object-fit:cover;transform:scaleX(-1)}#overlay{pointer-events:auto;transform:scaleX(-1)}.status{position:absolute;inset:auto 0 0;padding:10px 14px;background:linear-gradient(transparent,#000000b3);font-size:14px;color:var(--fg)}.panel{display:flex;flex-direction:column;gap:14px}.panel>div{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:14px}.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.controls button{padding:8px 14px;background:var(--accent);color:#062320;border:0;border-radius:8px;font-weight:600;cursor:pointer}.controls button[disabled]{opacity:.5;cursor:not-allowed}.controls button#stop-btn{background:var(--bg-elev-2);color:var(--fg)}.toggle{display:flex;align-items:center;gap:6px;color:var(--fg-dim);font-size:14px}.threshold{display:flex;flex-direction:column;gap:4px;width:100%;color:var(--fg-dim);font-size:13px}.threshold input[type=range]{width:100%}.threshold span{color:var(--fg)}.enrol{display:flex;flex-direction:column;gap:8px}.enrol input[type=text]{padding:8px 10px;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:8px;color:var(--fg);font:inherit}.enrol button{padding:8px 14px;background:var(--accent-2);color:#0a0f2c;border:0;border-radius:8px;font-weight:600;cursor:pointer}.enrol button[disabled]{opacity:.4;cursor:not-allowed}.enrol .hint{margin:0;font-size:12px;color:var(--fg-dim)}.gallery h2,.metrics h2{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-dim)}#gallery-list{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-direction:column;gap:4px;max-height:180px;overflow:auto}#gallery-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;background:var(--bg-elev-2);border-radius:6px;font-size:14px}#gallery-list .pill{font-size:11px;padding:2px 6px;border-radius:999px;background:var(--bg);color:var(--fg-dim)}#gallery-list button{font-size:11px;padding:2px 8px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--fg-dim);cursor:pointer}.gallery>button{padding:6px 12px;font-size:12px;background:transparent;color:var(--danger);border:1px solid var(--danger);border-radius:6px;cursor:pointer}.metrics dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:14px}.metrics dt{color:var(--fg-dim)}.metrics dd{margin:0;font-variant-numeric:tabular-nums}footer{margin-top:32px;color:var(--fg-dim);font-size:13px;line-height:1.55;max-width:900px}footer p{margin:6px 0}
