:root{--bg: #0b1220;--fg: #e6eef8;--muted: #9fb0c8;--accent: #5eead4;--panel: rgba(255,255,255,.04)}html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{padding:18px;max-width:none;margin:0;height:97vh;display:flex;flex-direction:column;justify-content:space-evenly}main.index-page{justify-content:center}.demo-grid{display:flex;gap:20px;width:100%;align-items:flex-start}.video-wrap{flex:0 0 54%;width:100%;height:50vh;position:relative}.video-wrap video,.video-wrap canvas{width:100%;height:100%;display:block;object-fit:cover}.video-wrap canvas{position:absolute;left:0;top:0;pointer-events:none}#metrics{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;gap:10px}#metrics .demo-title{font-size:1.04rem;font-weight:800;color:var(--accent);text-align:center;margin:0 0 6px;width:100%}#metrics>div{background:#ffffff05;padding:10px 12px;border-radius:8px;border:1px solid var(--panel);display:flex;justify-content:space-between;align-items:center;width:100%}#metrics strong{font-weight:600;margin-right:8px}.cheatsheet{margin-top:12px;background:#ffffff05;padding:10px 12px;border-radius:8px;border:1px solid var(--panel);color:var(--muted);font-size:.95rem;width:100%}@media(max-width:900px){.demo-grid{flex-direction:column}.video-wrap{height:48vh}#metrics{align-items:stretch}}.notice{margin-top:14px;color:var(--muted);font-size:.92rem}.menu{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:40px}.lead{color:var(--muted);max-width:72ch;text-align:center}.options{display:flex;flex-direction:column;gap:12px;width:100%;max-width:640px}.option{display:block;padding:18px;border-radius:8px;background:var(--panel);color:var(--fg);text-decoration:none;border:1px solid rgba(255,255,255,.04)}.option:hover{background:#5eead40f;border-color:#5eead41f}.option .desc{display:block;color:var(--muted);font-size:.9rem;margin-top:6px}.loader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#060a1099;color:var(--fg);font-size:1rem;z-index:1200}.loader.hidden{display:none}.loader .box{background:#0b1220f2;padding:18px 22px;border-radius:10px;border:1px solid rgba(255,255,255,.04)}