:root{--bg: #0a0a0a;--panel: #121212;--line: #262626;--text: #e6e6e6;--dim: #8a8a8a;--acid: #c8ff00;--red: #ff2a2a;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%}body{--dock-h: 330px;display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:1fr var(--dock-h);height:100vh;overflow:hidden;background:var(--bg);color:var(--text);font:12px/1.35 ui-monospace,Menlo,monospace}#view{grid-column:1;grid-row:1;display:grid;place-items:center;overflow:hidden;padding:12px;min-height:0}#stage{max-width:100%;max-height:calc(100vh - var(--dock-h) - 24px);background:#000;outline:1px solid var(--line)}#panel{grid-column:2;grid-row:1 / span 2;background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;overflow-x:hidden;height:100vh}canvas.level,canvas.bands,canvas.waves{min-width:0}#dock{grid-column:1;grid-row:2;min-width:0;position:relative;display:flex;flex-direction:column;min-height:0;border-top:1px solid var(--line);background:#0d0d0d}#dock-grip{position:absolute;top:-4px;left:0;right:0;height:8px;cursor:ns-resize;z-index:3}#dock-grip:hover,#dock-grip.drag{background:linear-gradient(transparent 3px,var(--acid) 3px,var(--acid) 5px,transparent 5px)}.dock-head{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--line)}.dock-head h3{margin:0 8px 0 0}.dock-head .spacer{flex:1}#dock .chain{flex:1;min-height:0;display:flex;gap:8px;padding:8px 12px;overflow-x:auto;overflow-y:hidden;align-items:stretch}#dock .fx{flex:0 0 272px;margin:0;display:flex;flex-direction:column;min-height:0}#dock .fx.collapsed{flex-basis:150px}#dock .fx .params{flex:1;overflow-y:auto;min-height:0}#dock .fx-head{position:sticky;top:0;background:#0e0e0e;border-bottom:1px solid #1c1c1c}#dock .fx-head .fx-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#dock .fx{width:272px;min-width:0}#dock .fx.collapsed{width:150px}#dock .param{grid-template-columns:1fr;row-gap:4px;padding:7px 0}#dock .param>label{grid-row:auto;padding:0;font-size:11px}#dock .fx-head{gap:5px;padding:6px}#dock .fx-head .mix{width:56px}.fx-num{color:var(--dim);font-size:10px}.sec>h3{cursor:pointer;user-select:none}.sec>h3:before{content:"▾ ";color:#555}.sec.closed>h3:before{content:"▸ "}.sec.closed>:not(h3){display:none!important}header{position:sticky;top:0;z-index:2;background:var(--panel);padding:10px 12px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:baseline;margin-bottom:8px}.brand b{letter-spacing:.3em;font-size:14px}.fps,.bpm{color:var(--dim)}.status{color:var(--dim);min-height:1.3em;margin-top:6px}.status.err{color:var(--red)}.sec{padding:10px 12px;border-bottom:1px solid var(--line)}h3{margin:0 0 8px;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--dim);font-weight:600}.row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}.row label{color:var(--dim)}button,select{background:#1b1b1b;color:var(--text);border:1px solid var(--line);border-radius:4px;padding:5px 8px;font:inherit;cursor:pointer}button:hover,select:hover{border-color:#444}button.on{background:var(--acid);color:#000;border-color:var(--acid)}button.sm{padding:2px 6px}select{max-width:100%}input[type=range]{accent-color:var(--acid)}.playlist{max-height:110px;overflow-y:auto}.clip{padding:3px 6px;color:var(--dim);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clip.on{color:#000;background:var(--acid)}.audio-el{width:100%;height:28px;margin:4px 0}.audio-el:not([src]){display:none}.meter{width:100%;height:70px;display:block;border:1px solid var(--line)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#444}.dot.connecting{background:#b88a00}.dot.live{background:var(--acid)}.chans{display:flex;flex-wrap:wrap;gap:4px}.chan{padding:2px 6px;border:1px solid var(--line);border-radius:3px;background:linear-gradient(90deg,rgba(200,255,0,.35) calc(var(--v, 0) * 100%),transparent 0)}.fx{border:1px solid var(--line);border-radius:6px;margin-bottom:8px;background:#0e0e0e}.fx.overlay{border-style:dashed}.fx-head{display:flex;gap:6px;align-items:center;padding:6px 8px}.fx-name{flex:1;cursor:pointer;font-weight:600}.fx-head .mix{width:64px}.mix-label{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.params{padding:0 10px 6px}.param{display:grid;grid-template-columns:96px 1fr;column-gap:10px;row-gap:5px;align-items:center;padding:9px 0;border-top:1px solid #1c1c1c}.param>label{color:var(--dim);align-self:start;padding-top:2px;grid-row:1 / span 3}.param>input[type=range],.param>select{width:100%;margin:0}.live{height:2px;background:#232323;border-radius:1px;overflow:hidden}.live i{display:block;height:100%;background:var(--acid);width:0}.mod-row{display:grid;grid-template-columns:1fr 72px 38px;gap:6px;align-items:center}.mod-row .mod{width:100%;min-width:0;font-size:11px;padding:2px 4px;color:var(--acid)}.mod-row .depth{width:100%;margin:0;accent-color:#8aa800}.depth-val{font-size:10px;color:var(--dim);text-align:right}.mod-row.off .mod{color:var(--dim)}.mod-row.off .depth,.mod-row.off .depth-val{opacity:.25}@media (max-width: 900px){body{grid-template-columns:1fr;grid-template-rows:auto auto auto;height:auto;overflow:auto}#view,#dock,#panel{grid-column:1;grid-row:auto}#dock{height:340px}#panel{height:auto}}.meters{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:8px 0;padding:10px;border:1px solid var(--line);border-radius:6px;background:#0c0c0c}.meter-row{display:grid;grid-template-columns:18px minmax(0,1fr) 66px 12px;gap:8px;align-items:center}.meter-label{color:var(--dim);font-size:10px}canvas.level{width:100%;height:26px;display:block}.level-val{font-variant-numeric:tabular-nums;text-align:right;color:var(--text);font-size:11px}.beat-lamp{width:10px;height:10px;border-radius:50%;background:#3a0d0d}.beat-lamp.on{background:var(--red);box-shadow:0 0 8px var(--red)}canvas.bands{width:100%;height:46px;display:block}.tempo-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;gap:4px 10px;align-items:center;border-top:1px solid var(--line);padding-top:8px}.bpm-box{grid-row:span 2;display:flex;align-items:baseline;gap:4px}.bpm-val{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;min-width:3.4em;text-align:right}.bpm-unit{color:var(--dim);font-size:10px}.bpm-val.unlocked{color:#5a5a5a}.chip.listening{background:#222;color:var(--dim)}.tempo-meta{display:flex;gap:6px;align-items:center}.chip{font-size:9px;letter-spacing:.1em;padding:2px 6px;border-radius:3px;background:#222;color:var(--dim)}.chip.auto{background:#233000;color:var(--acid)}.chip.ableton{background:#1d2440;color:#9db2ff}.chip.tap,.chip.manual{background:#332a00;color:#ffd400}.conf{color:var(--dim);font-size:10px;font-variant-numeric:tabular-nums}.bar-val{color:var(--dim);font-size:10px;text-align:right;font-variant-numeric:tabular-nums}.beats{display:flex;gap:4px;grid-column:2 / span 2}.beat{flex:1;text-align:center;font-size:10px;padding:3px 0;border-radius:3px;color:#555;background:linear-gradient(90deg,#c8ff00e6 calc(var(--p, 0) * 100%),#1a1a1a 0)}.beat:first-child{color:#777}.beat.on{color:#000;font-weight:700}canvas.waves{width:100%;height:24px;display:block}.tempo-btns{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.bpm-in{width:64px;background:#1b1b1b;color:var(--text);border:1px solid var(--line);border-radius:4px;padding:3px 5px;font:inherit}h4{margin:12px 0 4px;font-size:10px;color:var(--dim);font-weight:600;letter-spacing:.08em;text-transform:uppercase}.hint{color:var(--dim);font-size:11px;margin:4px 0;line-height:1.4}.pads{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:5px;margin-bottom:6px}.pad{text-align:left;padding:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pad.on{background:var(--acid);color:#000;border-color:var(--acid)}.pad.pending{animation:blink .25s steps(2) infinite}@keyframes blink{50%{opacity:.45}}.fo-banner{margin-top:8px;padding:6px 8px;border:1px solid var(--red);border-radius:4px;background:#2a0909;color:#ffb3b3;display:grid;gap:3px}.fo-banner button{justify-self:start}.fo-banner[hidden]{display:none}.text-in{flex:1;min-width:0;background:#1b1b1b;color:var(--text);border:1px solid var(--line);border-radius:4px;padding:5px 7px;font:inherit}.logo-ed{padding:6px 0 8px;border-bottom:1px solid #1c1c1c}body.learning [data-midi]{outline:1px dashed #4f6400;outline-offset:1px;cursor:crosshair}body.learning [data-midi].learn-target{outline:2px solid #ffd400;animation:blink .4s steps(2) infinite}[data-midi].mapped{box-shadow:inset 3px 0 #6f8cff}body.learning [data-midi].mapped{outline-color:#6f8cff}body.show-view .setup-only{display:none!important}.brand .spacer{flex:1}.brand{align-items:center}.view-btn{padding:2px 7px;font-size:10px}body.show-view .view-btn:first-of-type,body:not(.show-view) .view-btn:last-of-type{background:#2a2a2a;border-color:#555}header .row button.sm{padding:4px 7px}.pads{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}.pad{padding:7px 6px;font-size:11px}body.show-view .sec{padding:6px 12px}body.show-view header{padding:8px 12px}body.show-view .meters{gap:6px;padding:8px;margin:6px 0}.status:empty{min-height:0;margin:0}.chans:empty{display:none}.brand .fps,.brand .bpm{white-space:nowrap;font-size:10px}.brand{gap:8px;margin-bottom:6px}button.ghost{background:transparent;border-color:#2a2a2a;color:var(--dim)}button.ghost:hover{color:var(--text)}.btn-link{color:var(--dim);font-size:11px;padding:3px 6px;border:1px solid #2a2a2a;border-radius:4px;text-decoration:none}.btn-link:hover{color:var(--text);border-color:#444}.version{color:#555;font-size:10px}.row .spacer,.tour-btns .spacer{flex:1}kbd{font:inherit;font-size:10px;padding:0 4px;border:1px solid #444;border-bottom-width:2px;border-radius:3px;background:#1b1b1b}.tour-shade{position:fixed;inset:0;background:#000000b8;z-index:50}.tour-spot{position:fixed;z-index:51;border-radius:6px;pointer-events:none;box-shadow:0 0 0 2px var(--acid),0 0 0 9999px #000000b8;transition:left .25s,top .25s,width .25s,height .25s}.tour-card{position:fixed;z-index:52;width:320px;padding:14px 16px 12px;border-radius:8px;background:#151515;border:1px solid #333;box-shadow:0 12px 40px #0009;line-height:1.5}.tour-card.centre{left:50%!important;top:50%!important;transform:translate(-50%,-50%);width:380px}.tour-card h4{margin:2px 0 6px;font-size:14px;color:var(--text);text-transform:none;letter-spacing:0}.tour-card p{margin:0 0 12px;color:#c9c9c9;font-size:12px}.tour-card b{color:var(--acid);font-weight:600}.tour-count{color:var(--dim);font-size:10px;letter-spacing:.1em}.tour-btns{display:flex;gap:6px;align-items:center}.tour-next{background:var(--acid);color:#000;border-color:var(--acid);font-weight:600}.fb-modal{position:fixed;inset:0;z-index:60;background:#0009;display:grid;place-items:center}.fb-box{width:min(440px,calc(100vw - 32px));background:#151515;border:1px solid #333;border-radius:8px;padding:16px}.fb-box h4{margin:0 0 4px;font-size:14px;color:var(--text);text-transform:none;letter-spacing:0}.fb-box textarea{width:100%;box-sizing:border-box;background:#0e0e0e;color:var(--text);border:1px solid #333;border-radius:4px;padding:8px;font:inherit;resize:vertical;margin:8px 0}.support-banner{position:fixed;left:16px;right:16px;top:16px;z-index:70;display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:6px;background:#2a2200;border:1px solid #ffd400;color:#ffe680;flex-wrap:wrap}.support-banner.fatal{background:#2a0909;border-color:var(--red);color:#ffb3b3}.support-banner span{color:#ccc}.support-banner button{margin-left:auto}.auth-gate{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 30%,#1a1f00,#0a0a0a 60%);display:grid;place-content:center;justify-items:center;gap:22px}.auth-brand{text-align:center;display:grid;gap:6px}.auth-brand b{font-size:34px;letter-spacing:.45em;margin-right:-.45em}.auth-brand span{color:var(--dim);font-size:12px}.user-slot{display:flex;align-items:center}body.admin{display:block;height:auto;overflow:auto}#admin{max-width:1200px;margin:0 auto;padding:24px 16px 80px}.admin-head{display:flex;gap:14px;align-items:baseline;margin-bottom:18px}.admin-head b{letter-spacing:.3em;font-size:16px}.admin-head span{color:var(--dim);flex:1}.admin-head a{color:var(--acid)}.kpis{display:flex;gap:12px;margin-bottom:16px}.kpis div{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px;display:grid}.kpis b{font-size:28px;font-variant-numeric:tabular-nums}.kpis span{color:var(--dim)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:12px}.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;overflow:auto}.card h3{margin:0 0 8px}.card table{width:100%;border-collapse:collapse;font-size:11px}.card th{text-align:left;color:var(--dim);font-weight:500;padding:4px 6px;border-bottom:1px solid var(--line)}.card td{padding:4px 6px;border-bottom:1px solid #1a1a1a;position:relative;vertical-align:top}.card td span{position:relative}.card td .bar{position:absolute;left:0;top:3px;bottom:3px;background:#c8ff0024;border-radius:2px}