:root{--bg:#05060b;--ink:#eef2ffeb;--ink-dim:#eef2ff73;--glass:#0a0c168c;--line:#eef2ff24;--cyan:#39e6ff;--magenta:#ff4fd8}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%;color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}.tabular{font-variant-numeric:tabular-nums;font-family:ui-monospace,Cascadia Mono,SF Mono,Consolas,monospace}.stage{width:100vw;height:100vh;display:block;position:fixed;inset:0}.brand{-webkit-user-select:none;user-select:none;pointer-events:none;position:fixed;top:22px;left:26px}.brand h1{letter-spacing:.55em;text-shadow:0 0 18px #39e6ff59;font-size:15px;font-weight:800}.brand .track{letter-spacing:.18em;color:var(--ink-dim);text-transform:uppercase;margin-top:5px;font-size:11px}.controls{--glow:0;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:14px;align-items:center;gap:14px;width:min(920px,100vw - 40px);padding:12px 18px;display:flex;position:fixed;bottom:22px;left:50%;transform:translate(-50%)}.play-btn{border:1px solid var(--line);width:40px;height:40px;color:var(--ink);cursor:pointer;background:#eef2ff0f;border-radius:50%;flex-shrink:0;place-items:center;transition:background .15s,box-shadow .15s;display:grid}.play-btn:hover{background:#eef2ff24;box-shadow:0 0 16px #39e6ff40}.time{text-align:center;min-width:52px;font-size:12px}.dim{color:var(--ink-dim)}.timeline{cursor:pointer;border-radius:6px;flex:1;height:44px;overflow:hidden}.timeline canvas{width:100%;height:100%;display:block}.volume{appearance:none;cursor:pointer;width:76px;height:3px;accent-color:var(--ink);background:#eef2ff2e;border-radius:2px}.volume::-webkit-slider-thumb{appearance:none;background:var(--ink);border-radius:50%;width:9px;height:9px}.scene-chips{flex-shrink:0;gap:4px;display:flex}.variant-bar{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:10px;gap:6px;padding:5px 8px;display:flex;position:fixed;bottom:102px;left:50%;transform:translate(-50%)}.variant-bar .chip{letter-spacing:.08em;text-transform:uppercase;padding:6px 12px}.chip{border:1px solid var(--line);min-width:26px;color:var(--ink-dim);letter-spacing:.05em;cursor:pointer;background:0 0;border-radius:8px;padding:6px 7px;font-family:ui-monospace,Cascadia Mono,monospace;font-size:10px;transition:color .15s,border-color .15s,box-shadow .15s}.chip:hover{color:var(--ink)}.chip.active{color:var(--cyan);border-color:#39e6ff8c;box-shadow:0 0 10px #39e6ff40}.chip.auto.active{color:var(--magenta);border-color:#ff4fd88c;box-shadow:0 0 10px #ff4fd840}.bpm-chip{border:1px solid var(--line);border-radius:9px;flex-shrink:0;align-items:center;gap:7px;padding:5px 11px;font-size:12px;display:flex}.beat-dot{background:var(--magenta);width:8px;height:8px;box-shadow:0 0 10px var(--magenta);opacity:.35;border-radius:50%}.bpm-label{letter-spacing:.14em;color:var(--ink-dim);font-size:9px}.ghost-btn{border:1px solid var(--line);color:var(--ink-dim);letter-spacing:.08em;cursor:pointer;background:0 0;border-radius:9px;padding:7px 11px;font-size:11px;transition:color .15s,border-color .15s}.ghost-btn:hover{color:var(--ink);border-color:#eef2ff59}:where(button,input):focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.debug-panel{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:12px;padding:10px;position:fixed;top:20px;right:20px}@media (prefers-reduced-motion:reduce){.play-btn,.ghost-btn{transition:none}}@media (width<=760px){.volume,.bpm-chip{display:none}}@media (width<=560px){.scene-chips{display:none}}