:root{--bg:#1b1e23;--bg2:#23272e;--bg3:#2b3038;--bg4:#353b45;--line:#121418;--txt:#d7dce3;--dim:#8a929e;--acc:#4aa3ff;--rec:#ff4a3d;--play:#2ec46b;--solo:#e8c33a;--mute:#5aa7ff;--warn:#e6a53b}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:12px/1.35 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit}
#app{display:grid;grid-template-rows:34px auto 1fr auto;height:100vh;height:100dvh}
#menubar{display:flex;align-items:center;gap:10px;background:#15171b;border-bottom:1px solid var(--line);padding:0 8px}
.logo{font-weight:700;font-size:14px;letter-spacing:.3px;color:#fff;white-space:nowrap}.logo-mark{color:var(--acc)}
#menus{display:flex;gap:2px}
.menu-btn{background:none;border:0;padding:6px 10px;border-radius:4px;cursor:pointer;font-size:13px}.menu-btn:hover{background:var(--bg3)}
.proj{margin-inline-start:auto;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#proj-name{color:#fff;font-weight:600}#saved{margin-inline-start:6px;color:#5fd38a;font-size:11px}#saved.bad{color:var(--rec)}
.help-btn{background:var(--bg3);border:1px solid var(--bg4);border-radius:5px;padding:4px 10px;cursor:pointer}.help-btn:hover{background:var(--bg4)}
#toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 6px;background:var(--bg2);border-bottom:1px solid var(--line)}
.tgroup{display:flex;align-items:center;gap:2px;background:#1d2126;border:1px solid #14171b;border-radius:6px;padding:2px}
.tb{min-width:28px;height:28px;padding:0 6px;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.tb:hover{background:var(--bg3)}.tb.on{background:#33465c;border-color:#4a6c92;color:#fff}
.tb.big{min-width:36px;height:32px;font-size:16px}.tb.play.on{background:#1f5c37;border-color:var(--play);color:#7dffb0}.tb.rec{color:var(--rec)}.tb.rec.on{background:#7a1c17;border-color:var(--rec);color:#fff;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.6}}
.tb.xs{min-width:22px;height:18px;font-size:9px;padding:0 3px}
.clock{font:600 15px/1.1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;background:#0e1013;border-radius:4px;padding:3px 10px;min-width:150px;text-align:center;cursor:pointer;color:#9fe3ff}#clk-time{font-size:11px;color:var(--dim)}
.num-field{display:flex;flex-direction:column;align-items:center;background:#0e1013;border-radius:4px;padding:2px 8px;cursor:ns-resize;min-width:54px}.num-field small{font-size:8px;color:var(--dim);letter-spacing:1px}.num-field b{font:600 14px ui-monospace,Menlo,monospace;color:#ffd25e}
.in-meter{width:70px;height:8px;background:#0e1013;border-radius:3px;overflow:hidden;margin:0 4px}#in-fill{height:100%;width:0;background:#2ec46b}
.sel{background:#14171b;color:var(--txt);border:1px solid var(--bg4);border-radius:4px;padding:3px 4px;font:inherit;max-width:100%}
#main{display:grid;grid-template-columns:230px 1fr 210px;min-height:0}
#app.no-insp #main{grid-template-columns:0 1fr 210px}#app.no-right #main{grid-template-columns:230px 1fr 0}#app.no-insp.no-right #main{grid-template-columns:0 1fr 0}
#app.no-insp #inspector,#app.no-right #rightzone{display:none}#app.no-lower #lower{display:none}
#inspector,#rightzone{background:var(--bg2);border-inline-end:1px solid var(--line);overflow:auto;min-height:0}#rightzone{border-inline-start:1px solid var(--line)}
.in-head{display:flex;gap:6px;padding:8px;border-top:4px solid}.in-head input[type=color]{width:28px;height:28px;border:0;background:none;padding:0}
.inp{background:#14171b;border:1px solid var(--bg4);color:var(--txt);border-radius:4px;padding:5px 7px;font:inherit;width:100%}
.in-sec{border-top:1px solid var(--line);padding:6px 8px}.in-sec-t{font-size:10.5px;letter-spacing:.5px;color:var(--dim);margin-bottom:4px;padding:4px 8px 0;font-weight:600}.in-sec .in-sec-t{padding:0}
.in-row{display:flex;align-items:center;gap:6px;margin:4px 0}.in-row input[type=range]{flex:1;min-width:0}
.in-slot{background:#16191d;border:1px solid #2a3038;border-radius:3px;padding:4px 6px;margin:2px 0;cursor:pointer;color:var(--dim);direction:ltr;text-align:left}.in-slot.full{color:#bfe0ff;border-color:#2e4a66}.in-slot:hover{background:var(--bg3)}
.muted{color:var(--dim)}.pad{padding:10px}
#project{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
#tl-head{display:flex;height:40px;flex:none}#tl-corner{width:var(--tlw,272px);flex:none;background:var(--bg2);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 10px;color:var(--dim);font-size:11px}
#ruler{flex:1;display:block;cursor:pointer;touch-action:none}
#tl-body{flex:1;display:flex;min-height:0;position:relative}
#tracklist{width:var(--tlw,272px);flex:none;overflow:hidden;background:var(--bg2);border-right:1px solid var(--line);position:relative}
.th{display:flex;border-bottom:1px solid var(--line);background:#262a31;position:relative;cursor:default;overflow:hidden}.th.sel{background:#323946}
.th-color{width:6px;flex:none}.th-main{flex:1;min-width:0;padding:4px 6px;display:flex;flex-direction:column;gap:3px}
.th-top{display:flex;align-items:center;gap:5px;min-width:0}.th-num{color:var(--dim);font-size:10px;min-width:12px}.th-icon{font-size:12px}
.th-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:12.5px}.th-name-inp{flex:1;min-width:0;background:#0f1114;border:1px solid var(--acc);color:#fff;font:inherit;padding:1px 4px}
.th-btns{display:flex;gap:2px;flex-wrap:wrap}.th-btns .tb{min-width:22px;height:20px;font-size:11px;font-weight:700;padding:0 4px;background:#1b1e23;border-color:#30353d}
.tb.mute.on{background:#1d4e86;border-color:var(--mute);color:#fff}.tb.solo.on{background:#7a6514;border-color:var(--solo);color:#fff}.tb.arm{color:#e67068}.tb.arm.on{background:#8a1f19;border-color:var(--rec);color:#fff}.tb.mon.on{background:#7a5414;border-color:var(--warn)}.tb.rd.on{background:#1f5c37;border-color:#2ec46b;color:#c8ffd9}.tb.wr.on{background:#8a1f19;border-color:var(--rec);color:#fff}
.th-meter{width:6px;flex:none;background:#0c0e11;position:relative}.th-mfill{position:absolute;bottom:0;left:0;right:0;height:0;background:#2ec46b}
.th-resize{position:absolute;left:0;right:0;bottom:-3px;height:7px;cursor:ns-resize}
.th-sub{border-bottom:1px solid var(--line);background:#20242a;color:var(--dim);font-size:10.5px;padding:4px 12px;display:flex;align-items:center}
.th-add{padding:10px;color:var(--dim);cursor:pointer;text-align:center;border-bottom:1px dashed #333}.th-add:hover{color:#fff;background:var(--bg3)}
#arr-wrap{flex:1;position:relative;min-width:0}
#arr-scroll{position:absolute;inset:0;overflow:auto}#arr-spacer{height:100px}
#arr,#arr-ov{position:absolute;left:0;top:0;touch-action:none}#arr-ov{pointer-events:none}
#arr-scroll::-webkit-scrollbar{width:12px;height:12px}#arr-scroll::-webkit-scrollbar-thumb{background:#3a414b;border-radius:6px;border:2px solid var(--bg)}#arr-scroll::-webkit-scrollbar-track{background:#15171b}
#lower{position:relative;background:var(--bg2);border-top:1px solid #000;display:flex;flex-direction:column;height:300px;min-height:140px}
#lz-resize{position:absolute;top:-4px;left:0;right:0;height:8px;cursor:ns-resize;z-index:5}
#lz-tabs{display:flex;align-items:center;gap:2px;padding:3px 6px;background:#1d2126;border-bottom:1px solid var(--line);flex:none}.grow{flex:1}
.lz-tab{background:none;border:1px solid transparent;border-radius:4px 4px 0 0;padding:4px 12px;cursor:pointer;color:var(--dim);font-size:12.5px}.lz-tab.on{background:var(--bg3);color:#fff;border-color:#3a414b}
.lz-pane{display:none;flex:1;min-height:0;flex-direction:column}.lz-pane.on{display:flex}
.pr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px 6px;background:var(--bg3);border-bottom:1px solid var(--line);direction:rtl}.pr-bar label{display:flex;align-items:center;gap:3px;color:var(--dim)}.pr-title{font-weight:700;margin-inline-end:8px;color:#fff}.sep{width:1px;height:20px;background:#444;margin:0 4px}
.pr-wrap{flex:1;position:relative;min-height:0}.pr-canvas{position:absolute;inset:0;touch-action:none;outline:none}
.num{width:58px;background:#14171b;border:1px solid var(--bg4);color:var(--txt);border-radius:3px;padding:2px 4px;font:inherit}
.btn{background:#353b45;border:1px solid #444c57;border-radius:5px;padding:6px 12px;cursor:pointer;white-space:nowrap}.btn:hover{background:#3f4652}.btn.primary{background:#2d6fb5;border-color:#4a8fd8;color:#fff}.btn.sm{padding:3px 8px;font-size:11.5px}.btn.big{padding:12px 18px;font-size:14px}.btn.accent{background:#6b3fa0;border-color:#9a6ad6;color:#fff}
.se-info{color:var(--dim);margin-inline-start:auto}
/* mixer */
#lz-mix{overflow:hidden}.mix-scroll{display:flex;gap:3px;overflow-x:auto;overflow-y:auto;padding:4px;height:100%;align-items:flex-start;direction:ltr}.mix-gap{width:8px;flex:none}
.strip{width:92px;flex:none;background:#262a31;border:1px solid #15181c;border-radius:4px;display:flex;flex-direction:column;align-items:stretch;padding:0 0 4px;position:relative}.strip.sel{background:#2f3540;border-color:#4a6c92}.strip.master{background:#2e2626;width:100px}.strip.bus{background:#28282f}
.st-color{height:5px;border-radius:3px 3px 0 0}.st-inst{margin:3px;font-size:10.5px;background:#1a1d22;border:1px solid #333a44;border-radius:3px;padding:3px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.st-inst.in,.st-inst.none{cursor:default;color:var(--dim)}
.st-lbl{font-size:8.5px;letter-spacing:1px;color:#6f7884;text-transform:uppercase;padding:2px 4px 0}
.st-ins{display:flex;flex-direction:column;gap:2px;padding:2px 3px}.slot{height:17px;background:#15181c;border:1px solid #2a3038;border-radius:2px;font-size:9.5px;display:flex;align-items:center;gap:3px;padding:0 3px;cursor:pointer;color:#59616c;white-space:nowrap;overflow:hidden}.slot.full{color:#bfe0ff;background:#1b2836;border-color:#2e4a66}.slot.byp{opacity:.5}.slot-pw{border:0;background:none;padding:0;font-size:10px;color:#666;cursor:pointer}.slot-pw.on{color:#4aff9a}
.st-sends{display:flex;justify-content:space-around;padding:2px}.st-send{display:flex;flex-direction:column;align-items:center}
.st-pan{display:flex;justify-content:center;padding:2px}
.st-btns{display:flex;justify-content:center;gap:2px;padding:2px}.st-btns .tb{min-width:20px;height:20px;font-size:10.5px;font-weight:700;background:#1b1e23;border-color:#30353d;padding:0 3px}
.st-fader{display:flex;justify-content:center;gap:4px;padding:4px 2px}
.st-vals{display:flex;justify-content:space-between;padding:0 6px;font:10px ui-monospace,Menlo,monospace}.st-db{color:#ffd25e}.st-peak{color:#9aa;cursor:pointer}.st-peak.clip{color:var(--rec)}
.st-name{margin:4px 3px 0;background:#15181c;border-radius:3px;padding:3px;text-align:center;font-weight:600;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.st-num{color:var(--dim);margin-right:4px}
.fader{position:relative;width:34px;display:flex}.fd-track{width:6px;margin-left:20px;background:#0c0e11;border-radius:3px;border:1px solid #000;cursor:pointer;touch-action:none}.fd-cap{position:absolute;left:12px;width:22px;height:14px;background:linear-gradient(#cfd5dc,#7d858f 45%,#555c66 55%,#a9b0b8);border-radius:2px;box-shadow:0 1px 3px #000;cursor:ns-resize;touch-action:none}.fd-cap:after{content:'';position:absolute;left:2px;right:2px;top:6px;height:2px;background:#111}
.fd-scale{position:absolute;left:0;top:0;width:18px;height:100%;font:8px ui-monospace,monospace;color:#6f7884}.fd-scale span{position:absolute;right:0;transform:translateY(-50%)}
.meter{border-radius:2px;display:block}
/* knob */
.knob{display:flex;flex-direction:column;align-items:center;gap:1px;touch-action:none;cursor:ns-resize}.knob svg{touch-action:none;display:block}.kb-bg{fill:none;stroke:#0e1013;stroke-width:4;stroke-linecap:round}.kb-fg{fill:none;stroke-width:4;stroke-linecap:round}.kb-cap{fill:#3a414b;stroke:#14171b}.kb-ind{stroke:#fff;stroke-width:2;stroke-linecap:round}.kb-lbl{font-size:9.5px;color:var(--dim);white-space:nowrap}.kb-val{font:9.5px ui-monospace,Menlo,monospace;color:#cfd6de;white-space:nowrap}.knob.active .kb-val{color:#ffd25e}
/* menus */
.menu{position:fixed;z-index:1000;background:#2a2f37;border:1px solid #111;border-radius:6px;box-shadow:0 8px 28px rgba(0,0,0,.55);padding:4px;min-width:200px;direction:rtl}.menu.sub{position:absolute;right:100%;top:-4px;display:none}.mi.has-sub:hover>.menu.sub{display:block}
.mi{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:4px;cursor:pointer;position:relative;white-space:nowrap}.mi:hover{background:#3b6ea8;color:#fff}.mi.dis{opacity:.4;pointer-events:none}.mi-chk{width:12px;color:#5fd38a}.mi-l{flex:1}.mi-k{color:var(--dim);font-size:11px;direction:ltr}.mi-sep{height:1px;background:#444;margin:3px 4px}
/* dialogs */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:900;display:flex;align-items:center;justify-content:center}
.dialog{background:#262a31;border:1px solid #111;border-radius:10px;min-width:340px;max-width:min(92vw,560px);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6)}.dialog.wide{max-width:min(94vw,760px)}
.dlg-title{display:flex;align-items:center;font-size:15px;font-weight:700;padding:12px 14px;border-bottom:1px solid #15181c}.dlg-x{margin-inline-start:auto;background:none;border:0;color:var(--dim);font-size:15px;cursor:pointer;padding:4px 8px;border-radius:4px}.dlg-x:hover{background:#3a414b;color:#fff}
.dlg-body{padding:14px;overflow:auto;font-size:13px}.dlg-btns{display:flex;gap:8px;justify-content:flex-start;padding:10px 14px;border-top:1px solid #15181c}
.form{display:flex;flex-direction:column;gap:10px}.form label{display:flex;align-items:center;gap:8px}
.proj-list{display:flex;flex-direction:column;gap:4px}.proj-row{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#1e2227;border-radius:5px}.proj-row.cur{outline:1px solid var(--acc)}.proj-row b{flex:1}.proj-row span{color:var(--dim);font-size:11px}
.progress{height:10px;background:#111;border-radius:5px;overflow:hidden;min-width:280px}.progress .bar{height:100%;width:5%;background:var(--acc);transition:width .2s}
.qs p{margin-top:0;font-size:14px}.qs-steps{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;font-size:14px}.qs-steps b{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;align-items:center;justify-content:center;margin-inline-end:6px}.qs-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kbd{display:inline-block;background:#14171b;border:1px solid #444;border-radius:4px;padding:1px 6px;font:12px ui-monospace,Menlo,monospace;direction:ltr}.kbd.red{color:var(--rec)}
table.keys{border-collapse:collapse;width:100%}table.keys td{padding:4px 6px;border-bottom:1px solid #30353d}
/* floating plugin windows */
.float{position:fixed;background:#2b3038;border:1px solid #0d0f12;border-radius:8px;box-shadow:0 14px 40px rgba(0,0,0,.6);min-width:260px;max-width:96vw}
.float-head{display:flex;align-items:center;gap:8px;padding:6px 8px;background:linear-gradient(#3a414b,#2f353e);border-radius:8px 8px 0 0;cursor:move;touch-action:none;direction:ltr}.float-title{font-weight:700;font-size:12px;white-space:nowrap}.fx-head{display:flex;gap:4px;align-items:center;margin-inline-start:auto}
.float-body{padding:10px;max-height:78vh;overflow:auto}
.fx-panel{display:flex;flex-direction:column;gap:10px;background:linear-gradient(#22262c,#1b1e22);border-radius:6px;padding:10px}.fx-graph{width:520px;max-width:100%;height:140px;border-radius:4px;border:1px solid #0b0d10}
.fx-knobs{display:flex;flex-wrap:wrap;gap:12px 14px;justify-content:center;max-width:560px}
.synth-panel{display:flex;flex-wrap:wrap;gap:8px;max-width:720px}.syn-sec{background:#1d2126;border:1px solid #121418;border-radius:6px;padding:6px 8px;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;position:relative;padding-top:18px}.syn-sec-t{position:absolute;top:3px;left:8px;font-size:9px;letter-spacing:1px;color:#5fd38a;font-weight:700}
/* virtual keyboard */
#vkbd{position:fixed;left:0;right:0;bottom:0;height:150px;background:#15171b;border-top:1px solid #000;z-index:400;display:none;flex-direction:column}#vkbd.on{display:flex}
.vk-bar{display:flex;align-items:center;padding:3px 8px;color:var(--dim);font-size:11px;direction:rtl}.vk-keys{flex:1;display:flex;position:relative;padding:0 4px 4px;touch-action:none}
.vk.wht{flex:1;background:linear-gradient(#f4f5f7,#d9dde2);border:1px solid #333;border-radius:0 0 5px 5px;position:relative;display:flex;align-items:flex-end;justify-content:center;color:#555;font-size:10px;padding-bottom:4px}.vk.wht.on{background:linear-gradient(#bfe0ff,#4aa3ff)}
.vk.blk{width:0;position:relative;z-index:2}.vk.blk:after{content:'';position:absolute;left:-11px;width:22px;height:62%;background:linear-gradient(#333,#111);border-radius:0 0 4px 4px;border:1px solid #000}.vk.blk.on:after{background:#2d6fb5}
.vk.blk{pointer-events:auto}.vk.blk:after{pointer-events:none}
/* history */
#hist,#markers{padding:0 6px 8px;max-height:45vh;overflow:auto}.hrow{padding:4px 6px;border-radius:3px;cursor:pointer;display:flex;gap:4px;align-items:center}.hrow:hover{background:var(--bg3)}.hrow.cur{background:#2d4a6b;color:#fff}.hrow.redo{color:#666;font-style:italic}.xs-del{margin-inline-start:auto;background:none;border:0;color:#777;cursor:pointer}
/* toasts */
#toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}.toast{background:#2d6fb5;color:#fff;padding:8px 16px;border-radius:20px;box-shadow:0 6px 18px rgba(0,0,0,.5);font-size:13px;direction:rtl;transition:opacity .4s}.toast.out{opacity:0}
/* touch: bigger targets */
@media (pointer:coarse){.tb{min-width:36px;height:36px}.th-btns .tb{min-width:28px;height:26px}.menu-btn{padding:9px 12px}.mi{padding:10px 10px}.slot{height:22px}.lz-tab{padding:8px 14px}#tl-corner,#tracklist{--tlw:270px}}
@media (max-width:1100px){#main{grid-template-columns:200px 1fr 0}#app.no-insp #main{grid-template-columns:0 1fr 0}#rightzone{display:none}.logo{display:none}}