:root{--bg: #0b0b10;--panel: #15151d;--ink: #e8e6f0;--dim: #8b8898;--accent: #ff2d78;--accent2: #29d3ff;--border: #2a2a38}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--ink);font-family:SF Mono,ui-monospace,Menlo,monospace;min-height:100vh;display:flex;flex-direction:column}header{text-align:center;padding:22px 16px 8px}h1{margin:0;font-size:2.4rem;letter-spacing:.12em;color:var(--ink);text-shadow:2px 0 var(--accent),-2px 0 var(--accent2)}h1 span{color:var(--dim)}.tagline{margin:4px 0 0;color:var(--dim);font-size:.85rem}main{flex:1;display:flex;gap:16px;padding:16px;max-width:1280px;width:100%;margin:0 auto;align-items:flex-start}.stage{flex:1;min-width:0;background:#000;border:1px solid var(--border);border-radius:10px;overflow:hidden;position:relative}.dropzone{aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center;text-align:center;border:2px dashed var(--border);border-radius:10px;transition:border-color .15s,background .15s}.dropzone.dragover{border-color:var(--accent);background:#16121a}.dz-icon{font-size:3rem}.dz-buttons{display:flex;gap:8px;justify-content:center;margin:12px 0;flex-wrap:wrap}.dz-note{color:var(--dim);font-size:.75rem}canvas#gl{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;background:#000}.btn{background:var(--accent);color:#fff;border:none;padding:10px 16px;border-radius:6px;font-family:inherit;font-size:.85rem;cursor:pointer}.btn:hover{filter:brightness(1.15)}.btn-alt{background:var(--panel);border:1px solid var(--border);color:var(--ink)}.btn-sm{padding:6px 10px;font-size:.8rem}.btn-rec{background:#b3122e}.btn-rec.recording{animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:.4}}.transport{display:flex;align-items:center;gap:10px;padding:10px;background:var(--panel);border-top:1px solid var(--border)}.transport input[type=range]{flex:1;accent-color:var(--accent)}.time{color:var(--dim);font-size:.8rem;min-width:88px;text-align:right}.controls{width:300px;flex-shrink:0;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px}.controls h2{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--dim);margin:18px 0 10px}.controls h2:first-child{margin-top:0}.preset-row{display:flex;flex-wrap:wrap;gap:6px}.chip{background:var(--bg);border:1px solid var(--border);color:var(--dim);border-radius:999px;padding:6px 12px;font-family:inherit;font-size:.72rem;cursor:pointer}.chip.active{border-color:var(--accent);color:var(--ink)}.action-row{margin-top:8px}.val{color:var(--dim);font-size:.68rem;min-width:34px;text-align:right;margin-left:auto}.btn.held{background:var(--accent2);color:#000}.stage:fullscreen{display:flex;flex-direction:column;justify-content:center}.stage:fullscreen canvas#gl{max-height:calc(100vh - 60px);width:100%;object-fit:contain}.row input[type=text]{background:var(--bg);color:var(--ink);border:1px solid var(--border);border-radius:4px;font-family:inherit;font-size:.72rem;padding:4px;width:110px}.row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.78rem;margin:10px 0;color:var(--ink)}.row input[type=range]{width:130px;accent-color:var(--accent2)}.row input[type=date]{background:var(--bg);color:var(--ink);border:1px solid var(--border);border-radius:4px;font-family:inherit;font-size:.72rem;padding:4px}footer{text-align:center;color:var(--dim);font-size:.72rem;padding:14px}@media(max-width:860px){main{flex-direction:column}.stage{flex:none;width:100%}.controls{width:100%}}