:root{color-scheme:dark;font-family:Share Tech Mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--bg: #0b0b0f;--panel: #11111a;--field: #16161f;--border: #242432;--muted: #a6a6c2;--text: #f6f6f6;--accent: #7aa7ff;--ok: #4ade80;--warn: #facc15;--error: #f87171;background:var(--bg);color:var(--text)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg)}a{color:inherit;text-decoration:none}h2,h3{margin:0}h2{font-size:18px}h3{font-size:15px}button,input,select,textarea{font:inherit;color:inherit;background:var(--field);border:1px solid var(--border);border-radius:4px;padding:6px 10px;min-width:0}button{cursor:pointer;touch-action:manipulation}button:hover:not(:disabled){border-color:var(--accent)}button:disabled,textarea:disabled{opacity:.5;cursor:default}textarea{width:100%;resize:vertical;font-size:13px;line-height:1.4}input[type=range]{padding:0;border:none;background:none;accent-color:var(--accent);width:100%;min-height:24px}input[type=color]{padding:2px;width:44px;height:32px}input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px}input[type=number]{width:5.5em}pre{margin:0;white-space:pre-wrap;word-break:break-word}.app{display:flex;flex-direction:column;min-height:100vh}.topbar{display:flex;gap:16px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:#0f0f15}.topbar a{opacity:.6}.topbar a.active{opacity:1}.brand{color:var(--accent);margin-right:8px}.page{flex:1;padding:16px}.page.live{padding:0}.grid{display:grid;gap:12px;align-content:start}.card{background:var(--panel);border:1px solid #20202d;padding:12px;border-radius:6px;min-width:0}.row{display:flex;gap:8px;align-items:center}.row.wrap{flex-wrap:wrap}.row.spread{justify-content:space-between;margin-bottom:10px}.label{font-size:12px;text-transform:uppercase;color:var(--muted)}.status{font-size:13px;color:var(--ok)}.status.error{color:var(--error)}.status-dot{display:inline-flex;align-items:center;gap:6px}.status-dot>span:first-child{width:10px;height:10px;border-radius:50%;background:var(--warn)}.status-dot[data-status=connected]>span:first-child{background:var(--ok)}.status-dot[data-status=disconnected]>span:first-child{background:var(--error)}.vj,.debug,.submit{display:grid;gap:12px}.toolbar{display:grid;gap:10px}.shader-select{max-width:100%}.bpm{flex-wrap:wrap}.beat-light{width:14px;height:14px;border-radius:50%;background:var(--accent);opacity:.15}.beat-light[data-downbeat=true]{background:var(--warn)}.presets{display:grid;gap:8px}.presets form{flex-wrap:wrap}.presets input{flex:1 1 10em}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{display:inline-flex}.chip button:first-child{border-radius:4px 0 0 4px}.chip-delete{border-left:none;border-radius:0 4px 4px 0;color:var(--muted)}.vj-main{display:grid;gap:12px;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);align-items:start}.submit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}@media (max-width: 900px){.vj-main,.submit{grid-template-columns:minmax(0,1fr)}.vj-main>:last-child{order:-1}}.controls{display:grid;gap:12px}.group{border:1px solid #20202d;border-radius:6px;padding:8px 10px}.group>summary{cursor:pointer;margin-bottom:8px;-webkit-user-select:none;user-select:none}.group:not([open])>summary{margin-bottom:0}.control{display:grid;gap:4px}.control-inline{display:flex;gap:8px;align-items:center}.control .label{-webkit-user-select:none;user-select:none}.slider{display:flex;gap:8px;align-items:center}.slider output{min-width:4.5em;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}.axis{display:grid;grid-template-columns:1.2em 1fr;align-items:center}.canvas-wrap{position:relative;width:100%;aspect-ratio:16 / 9;border:1px solid #20202d;border-radius:6px;overflow:hidden;background:#000}.renderer{position:absolute;top:0;right:0;bottom:0;left:0}.renderer canvas{display:block;width:100%;height:100%}.renderer-overlay{position:absolute;top:8px;left:8px;right:8px;max-width:max-content;max-height:calc(100% - 16px);overflow:auto;padding:6px 8px;background:#000000b3;border-radius:4px;font-size:12px;line-height:1.4}.renderer-overlay.error pre{color:var(--error)}.placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;margin:0}.debug-panel{display:grid;gap:6px;font-size:12px;line-height:1.4;white-space:pre-wrap;word-break:break-word}.live-root{position:fixed;top:0;right:0;bottom:0;left:0;background:#000}.live-root.idle{cursor:none}