:root{--bg-deep:#0c1018;--bg-mid:#141c28;--panel:#141c28e0;--stroke:#78a0dc38;--text:#e8eef8;--muted:#8a9bb3;--accent:#5b9dff;--accent-soft:#5b9dff2e;--good:#4ad4a0;--warn:#f0b45a;--font:"Outfit", system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace}*,:before,:after{box-sizing:border-box}html,body{min-height:100%;font-family:var(--font);color:var(--text);background:radial-gradient(ellipse 90% 60% at 20% 10%, #1a2a44 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 85% 80%, #1e1830 0%, transparent 50%), var(--bg-deep);margin:0}#app{flex-direction:column;gap:1rem;min-height:100vh;padding:1.25rem 1.5rem 1.5rem;display:flex}.top-bar{flex-wrap:wrap;align-items:baseline;gap:.75rem 1.5rem;display:flex}.brand{align-items:center;gap:.65rem;display:flex}.brand-mark{background:linear-gradient(135deg, var(--accent), #8ad4ff);border-radius:.2rem;width:.85rem;height:.85rem;box-shadow:0 0 16px #5b9dff8c}.brand h1{letter-spacing:-.02em;margin:0;font-size:1.35rem;font-weight:700}.tagline{color:var(--muted);margin:0;font-size:.95rem}.stage-wrap{flex:1;grid-template-columns:1fr minmax(260px,300px);gap:1rem;min-height:0;display:grid}#stage{border:1px solid var(--stroke);background:linear-gradient(180deg, #1e304859, transparent 40%), var(--bg-mid);border-radius:1rem;width:100%;height:min(78vh,820px);display:block}.hud{flex-direction:column;gap:.75rem;display:flex}.hud-card{background:var(--panel);border:1px solid var(--stroke);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:.85rem;padding:.9rem 1rem}.hud-card h2{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .65rem;font-size:.72rem;font-weight:600}.webcam-frame{aspect-ratio:4/3;border:1px solid var(--stroke);background:#070a10;border-radius:.55rem;width:100%;position:relative;overflow:hidden}#webcam,#overlay{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}#overlay{pointer-events:none}.status{color:var(--muted);margin:.65rem 0 0;font-size:.82rem}.status.ready{color:var(--good)}.status.error{color:#ff7b7b}.gesture-name{letter-spacing:-.02em;color:var(--accent);min-height:1.5em;margin:0;font-size:1.45rem;font-weight:700}.gesture-hint{color:var(--muted);margin:.35rem 0 0;font-size:.85rem;line-height:1.4}.gesture-list{flex-direction:column;gap:.4rem;margin:0;padding:0;font-size:.82rem;list-style:none;display:flex}.gesture-list li{color:var(--muted);justify-content:space-between;gap:.75rem;display:flex}.gesture-list kbd{font-family:var(--mono);color:var(--text);background:var(--accent-soft);white-space:nowrap;border:1px solid #5b9dff47;border-radius:.3rem;padding:.15rem .4rem;font-size:.72rem;font-weight:500}@media (width<=900px){.stage-wrap{grid-template-columns:1fr}#stage{height:52vh}.hud{flex-flow:wrap}.hud-card{flex:240px}}