:root{--bg:#0d0e10;--rack:#1b1d21;--ink:#e9e6df;--muted:#8b8d93;--led:#ff3b1f;--led-dim:#4a1810;--green:#4cff7a;--amber:#ffb52e;--panel-303:linear-gradient(180deg, #d9dadc 0%, #bfc1c4 100%);--panel-808:linear-gradient(180deg, #2b2a28 0%, #1f1e1c 100%);--panel-909:linear-gradient(180deg, #b9b7b1 0%, #9f9d97 100%);--panel-606:linear-gradient(180deg, #e4e6e9 0%, #c3c6cb 55%, #aeb1b6 100%);--panel-707:linear-gradient(180deg, #45474b 0%, #333539 100%);--panel-mix:linear-gradient(180deg, #23262d 0%, #1a1c21 100%);--font:"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;--mono:"DSEG7 Classic", "Courier New", ui-monospace, monospace}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);font-family:var(--font);margin:0}body{-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button{cursor:pointer;font-family:inherit}.rack{background:repeating-linear-gradient(90deg, #111 0 18px, #151617 18px 20px) left/18px 100% no-repeat, repeating-linear-gradient(90deg, #111 0 18px, #151617 18px 20px) right/18px 100% no-repeat, var(--rack);border-left:3px solid #050505;border-right:3px solid #050505;max-width:1280px;margin:0 auto;padding:8px 10px 30px}.rack-row{flex-wrap:wrap;gap:8px;display:flex}.rack-row>.panel{flex:420px}.panel{border-radius:4px;margin:8px 12px;overflow:hidden;box-shadow:0 2px #000,inset 0 1px #ffffff40}.rack-row .panel{margin:8px 0}.rack-row{margin:0 12px}.panel-head{align-items:center;gap:10px;padding:5px 10px;display:flex}.panel-head h2{letter-spacing:.18em;flex:1;margin:0;font-size:12px;font-weight:800}.screw{background:radial-gradient(circle at 35% 35%,#ddd,#555 70%);border-radius:50%;flex:none;width:9px;height:9px;box-shadow:0 0 0 1px #0006}.screw.right{order:99}.panel-body{padding:6px 10px 10px}.tb303{background:var(--panel-303);color:#1c1c1c}.tb303 .panel-head{color:#f2f0ea;background:linear-gradient(#2d2f33,#1b1c1f)}.tr808{background:var(--panel-808);color:#e8e3d7}.tr808 .panel-head{color:#111;background:linear-gradient(90deg,#d33a1d,#f07a1d 33%,#f2c21b 66%,#ece6d5)}.tr909{background:var(--panel-909);color:#1d1d1d}.tr909 .panel-head{color:#ff8c2b;background:linear-gradient(#3b3d40,#26272a)}.mixer,.fx,.song{background:var(--panel-mix)}.mixer .panel-head,.fx .panel-head,.song .panel-head{color:#9fd0ff;background:#0f1013}.transport{z-index:10;background:linear-gradient(#2a2c31,#17181b);border-radius:0 0 6px 6px;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 12px;padding:8px 12px;display:flex;position:sticky;top:0;box-shadow:0 4px 10px #000a}.logo{flex-direction:column;margin-right:6px;line-height:1;display:flex}.logo-main{letter-spacing:.08em;color:#ff6a2b;text-shadow:0 0 10px #ff4d1a55;font-size:22px;font-weight:900}.logo-sub{letter-spacing:.3em;color:var(--muted);margin-top:3px;font-size:8.5px}.tgroup{align-items:center;gap:6px;display:flex}.tgroup.knobs{gap:10px}.lcd{font-family:var(--mono);color:var(--green);letter-spacing:.06em;text-align:center;-webkit-user-select:none;user-select:none;text-shadow:0 0 6px #4cff7a88;background:#0b1a0e;border:1px solid #000;border-radius:3px;min-width:92px;padding:5px 9px;font-size:15px;box-shadow:inset 0 1px 6px #000}.lcd.bpm{cursor:ns-resize;touch-action:none;min-width:112px}.lcd.small{min-width:64px;padding:4px 6px;font-size:12px}.lcd.tinylcd{min-width:26px;padding:2px 4px;font-size:11px}.song-title{color:var(--ink);background:#111;border:1px solid #333;border-radius:3px;flex:160px;min-width:120px;padding:6px 8px;font-size:13px}.demo-sel{color:var(--ink);background:#111;border:1px solid #444;border-radius:3px;max-width:150px;padding:5px;font-size:12px}.abtn,.tbtn{color:#eee;letter-spacing:.06em;-webkit-user-select:none;user-select:none;touch-action:manipulation;background:linear-gradient(#4a4d54,#2e3035);border:1px solid #000;border-radius:3px;padding:6px 10px;font-size:11px;font-weight:700;box-shadow:inset 0 1px #fff2,0 1px #000}.abtn:active,.tbtn:active{transform:translateY(1px)}.abtn.on{color:#111;background:linear-gradient(#ff7b3a,#d94f13)}.abtn.small,.tbtn.small{padding:4px 7px;font-size:10px}.abtn.tiny{padding:2px 7px;font-size:12px}.abtn.big{padding:6px 16px;font-size:18px}.abtn.play.on{color:#042;background:linear-gradient(#5cff8a,#20a948)}.abtn.red{color:#ff8b7a}.abtn.ledbtn:before{content:"";background:var(--led-dim);vertical-align:0;border-radius:50%;width:7px;height:7px;margin-right:5px;display:inline-block}.abtn.ledbtn.on{color:#fff;background:linear-gradient(#4a4d54,#2e3035)}.abtn.ledbtn.on:before{background:var(--led);box-shadow:0 0 6px var(--led)}.seg{align-items:center;gap:0;display:inline-flex}.seg .abtn{border-radius:0}.seg .abtn:first-of-type{border-radius:3px 0 0 3px}.seg .abtn:last-of-type{border-radius:0 3px 3px 0}.tbtn{align-items:center;gap:5px;display:inline-flex}.tbtn .led{background:var(--led-dim);border-radius:50%;width:8px;height:8px;box-shadow:inset 0 1px 1px #0008}.tbtn.on .led{background:var(--led);box-shadow:0 0 7px var(--led)}.tbtn.yellow.on .led{background:var(--amber);box-shadow:0 0 7px var(--amber)}.tbtn.power.on .led{background:var(--green);box-shadow:0 0 7px var(--green)}.mini-label{letter-spacing:.12em;opacity:.75;font-size:9px;font-weight:700}.knob-wrap{-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:2px;width:54px;display:flex;position:relative}.knob-wrap.s{width:46px}.knob-wrap.xs{width:40px}.knob-wrap.l{width:64px}.knob{--sz:40px;--cap:#2a2b2e;width:var(--sz);height:var(--sz);touch-action:none;cursor:ns-resize;background:radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cap), white 30%) 0%, var(--cap) 55%, #000 100%);border-radius:50%;outline:none;position:relative;box-shadow:0 2px 3px #0009,0 0 0 2px #0005,inset 0 -2px 3px #0006}.knob:focus-visible{box-shadow:0 0 0 2px #6cf}.knob-wrap.s .knob{--sz:32px}.knob-wrap.xs .knob{--sz:26px}.knob-wrap.l .knob{--sz:52px}.knob .ptr{position:absolute;top:0;bottom:0;left:0;right:0}.knob .ptr:after{content:"";background:#f4f1ea;border-radius:2px;width:3px;height:34%;margin-left:-1.5px;position:absolute;top:9%;left:50%}.knob.active{filter:brightness(1.25)}.klabel{letter-spacing:.08em;text-align:center;white-space:nowrap;font-size:8.5px;font-weight:800}.kval{font-size:9px;font-family:var(--mono);opacity:.65;min-height:11px}.tb303 .knob{--cap:#2b2c2f}.tr808 .knob{--cap:#d9d4c7}.tr808 .knob .ptr:after{background:#111}.tr909 .knob{--cap:#e8e6e0}.tr909 .knob .ptr:after{background:#e8641d}.mixer .knob,.fx .knob,.transport .knob{--cap:#3a4252}.mixer .panel-body{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;display:grid}.strip{background:#ffffff08;border-radius:3px;flex-direction:column;align-items:center;gap:4px;padding:5px;display:flex}.strip-name{letter-spacing:.12em;color:#9fd0ff;font-size:10px;font-weight:800}.strip-row{align-items:stretch;gap:4px;display:flex}.strip-knobs{flex-direction:column;align-items:center;display:flex}.strip-btns{flex-wrap:wrap;justify-content:center;gap:3px;display:flex}.meter.vertical{background:linear-gradient(#ff453a 0%,#ffd60a 18%,#30d158 38% 100%);border:1px solid #000;border-radius:2px;width:8px;min-height:60px;position:relative;overflow:hidden}.meter .fill{background:#050505;height:100%;transition:height 50ms linear;position:absolute;top:0;left:0;right:0}.meter.clip{box-shadow:0 0 6px red}.master-meter{height:44px;min-height:44px!important}.fx .panel-body{flex-wrap:wrap;gap:8px;display:flex}.fx-unit{background:#ffffff08;border-radius:3px;flex:auto;padding:5px 6px}.fx-head{letter-spacing:.14em;color:#9fd0ff;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;font-size:10px;font-weight:800;display:flex}.fx-knobs{flex-wrap:wrap;align-items:flex-start;gap:2px 4px;display:flex}.fx-knobs .tbtn{align-self:center}.bass-top{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px 18px;display:flex}.knob-row{flex-wrap:wrap;align-items:flex-start;gap:4px 6px;display:flex}.wave-switch{flex-direction:column;align-items:stretch;gap:3px;margin-left:4px;display:flex}.tb303 .abtn{color:#222;background:linear-gradient(#f3f3f1,#c9cacc);border-color:#777}.tb303 .abtn.on{color:#111;background:linear-gradient(#ff7b3a,#d94f13)}.tr909 .abtn{color:#222;background:linear-gradient(#f1efe9,#c9c6bf);border-color:#777}.tr909 .abtn.on{color:#111;background:linear-gradient(#ff9a3a,#e2621c)}.pat-row{flex-wrap:wrap;align-items:center;gap:8px 14px;margin:6px 0;display:flex}.patsel{align-items:center;gap:6px;display:flex}.banks,.nums{gap:2px;display:flex}.pbtn{min-width:24px;padding:4px 5px!important}.pbtn.has:not(.on){box-shadow:inset 0 -2px #ff6a2b}.pbtn.queued{animation:.25s steps(2,end) infinite blink}@keyframes blink{50%{filter:brightness(1.8);background:#ffb52e}}.ptools{flex-wrap:wrap;align-items:center;gap:3px;display:flex}.lenbox{align-items:center;gap:3px;margin-right:6px;display:flex}.grid-scroll{-webkit-overflow-scrolling:touch;padding-bottom:2px;overflow-x:auto}.bass-grid{grid-template-columns:46px repeat(16,minmax(36px,1fr));gap:3px;min-width:660px;display:grid}.bcol{border-radius:3px;grid-template-rows:16px 30px 20px 20px 20px 20px 22px;gap:2px;padding:2px;display:grid}.bcol.labels .lab{letter-spacing:.06em;justify-content:flex-end;align-items:center;padding-right:3px;font-size:8.5px;font-weight:800;display:flex}.bcol.g0,.bcol.g2{background:#00000012}.bcol.sel{outline:2px solid #ff6a2b}.bcol.off{opacity:.35}.bcell{border:1px solid #0006;border-radius:3px;justify-content:center;align-items:center;padding:0;font-size:11px;font-weight:700;display:flex}.bcell.num{color:#444;border:none;font-size:9px;position:relative}.bcell.num:after{content:"";background:var(--led-dim);border-radius:50%;width:7px;height:7px;position:absolute;top:4px;right:2px}.now .bcell.num:after,.bcell.num.now:after{background:var(--led);box-shadow:0 0 6px var(--led)}.bcell.note{color:#ffcf7a;font-size:13px;font-family:var(--mono);background:#1c1d20}.bcell.note.rest{color:#666}.bcell.tg{background:linear-gradient(#fafafa,#d0d0d0)}.bcell.tg.on{background:linear-gradient(#ff5a2a,#c3300c);box-shadow:0 0 6px #ff4a1a99}.bcell.tg.acc.on{background:linear-gradient(#ffd23a,#d29f0a)}.bcell.tg.sl.on{background:linear-gradient(#59c2ff,#1478c4)}.bcell.gate{color:#888;background:#2a2b2e}.bcell.gate.on{color:#4cff7a}.keyboard{flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:8px;display:flex}.kb-info{font-family:var(--mono);min-width:150px;font-size:12px}.keys{height:64px;display:flex;position:relative}.key{border:1px solid #222;border-radius:0 0 4px 4px;width:28px;padding:0}.key.white{background:linear-gradient(#fff,#e3e3e3);height:64px}.key.black{z-index:2;background:linear-gradient(#333,#050505);width:20px;height:40px;position:absolute;top:0}.key.on.white{background:linear-gradient(#ffb08a,#ff6a2b)}.key.on.black{background:linear-gradient(#ff6a2b,#a33a0e)}.kb-tools{flex-wrap:wrap;gap:3px;display:flex}.drum-knobs{gap:4px;min-width:max-content;padding:2px 0 6px;display:flex}.dk-col{background:#00000018;border-radius:3px;flex-direction:column;align-items:center;gap:2px;min-width:48px;padding:4px 3px;display:flex}.tr909 .dk-col{background:#ffffff30}.dk-name{letter-spacing:.06em;white-space:nowrap;margin-bottom:2px;font-size:8.5px;font-weight:800}.altsw{margin-top:2px}.altsw.on{color:#111!important;background:linear-gradient(#ffd23a,#d29f0a)!important}.drum-grid{flex-direction:column;gap:2px;min-width:720px;display:flex}.drow{grid-template-columns:96px repeat(16,minmax(32px,1fr));gap:3px;display:grid}.dlabel{letter-spacing:.05em;text-align:left;height:22px;color:inherit;background:#0000002a;border:1px solid #0006;border-radius:3px;padding:0 6px;font-size:9px;font-weight:800}.tr909 .dlabel{background:#fff5}.hdr .dlabel{background:0 0;border:none}.dcell{border:1px solid #0007;border-radius:3px;height:22px;padding:0;position:relative}.dcell.num{text-align:center;height:14px;color:inherit;opacity:.7;background:0 0;border:none;font-size:8.5px}.dcell.num.now{opacity:1;color:#ff3b1f;font-weight:900}.tr808 .dcell.g0{background:#5b1f15}.tr808 .dcell.g1{background:#5e3415}.tr808 .dcell.g2{background:#5c4c14}.tr808 .dcell.g3{background:#4d4a42}.tr808 .dcell.g0.on{background:#ff3b1f}.tr808 .dcell.g1.on{background:#ff8a1f}.tr808 .dcell.g2.on{background:#ffd21f}.tr808 .dcell.g3.on{background:#f6f0de}.tr808 .dcell.num{background:0 0}.tr909 .dcell{background:#d8d5ce}.tr909 .dcell.g1,.tr909 .dcell.g3{background:#c6c3bb}.tr909 .dcell.on{background:#ff7a1f;box-shadow:0 0 5px #ff7a1f99}.tr909 .dcell.accent{background:#ff2d1f}.tr909 .dcell.flam:after{content:"F";color:#fff;justify-content:center;align-items:center;font-size:10px;font-weight:900;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.tr909 .dcell.num{box-shadow:none;background:0 0}.tr606{background:var(--panel-606);color:#151515}.tr606 .panel-head{color:#ff3a2a;background:linear-gradient(#161616,#050505);border-bottom:3px solid #d8251b}.tr606 .knob{--cap:#1a1a1a}.tr606 .knob .ptr:after{background:#ff3a2a}.tr606 .dk-col{background:#00000014;border-top:2px solid #111}.tr606 .dk-name{color:#111}.tr606 .dlabel{color:#f2f2f2;background:#141414;border-color:#000}.tr606 .acrow .dlabel{color:#ff5a4a}.tr606 .dcell{background:#202124;border-color:#000}.tr606 .dcell.g1,.tr606 .dcell.g3{background:#2d2e31}.tr606 .dcell:before{content:"";background:#4a1410;border-radius:50%;width:7px;height:7px;margin:-3.5px;position:absolute;top:50%;left:50%}.tr606 .dcell.on:before{background:#ff2a1a;box-shadow:0 0 6px #ff2a1a}.tr606 .dcell.accent:before{background:#ffd0c0;box-shadow:0 0 7px #ff6a4a}.tr606 .dcell.num:before{display:none}.tr606 .dcell.num{color:#111;background:0 0}.tr606 .dcell.flam:after,.tr707 .dcell.flam:after{content:"F";color:#fff;font-size:9px;font-weight:900;position:absolute;top:0;right:2px}.tr606 .abtn{color:#eee;background:linear-gradient(#2a2a2a,#0c0c0c);border-color:#000}.tr606 .abtn.on{color:#fff;background:linear-gradient(#ff4a3a,#c4180e)}.tr606 .lcd{border-color:#000}.tr707{background:var(--panel-707);color:#e6e2d8}.tr707 .panel-head{color:#ff8a1f;background:linear-gradient(#232427,#18191b);border-bottom:2px solid #ff8a1f}.tr707 .knob{--cap:#2a2b2e}.tr707 .knob .ptr:after{background:#ff8a1f}.tr707 .dk-col{background:#ffffff0d}.tr707 .dk-name{color:#ffb066}.tr707 .dlabel{color:#f1e9d8;background:#1f2023}.tr707 .dcell.g0{background:#5a3311}.tr707 .dcell.g1{background:#5a4b14}.tr707 .dcell.g2{background:#1f4157}.tr707 .dcell.g3{background:#4a4a4a}.tr707 .dcell.g0.on{background:#ff8a1f}.tr707 .dcell.g1.on{background:#f2c94c}.tr707 .dcell.g2.on{background:#57b6e8}.tr707 .dcell.g3.on{background:#ececec}.tr707 .dcell.on{box-shadow:0 0 5px #ffb06699}.tr707 .dcell.accent{box-shadow:inset 0 0 0 3px #ff2d1f}.tr707 .dcell.num{color:#ffb066;background:0 0}.tr707 .abtn.on{color:#111;background:linear-gradient(#ffa040,#e0661a)}.panel.collapsed>.panel-body{display:none}.panel.collapsed{opacity:.85}.hidebtn{min-width:62px}.acrow .dcell.on{background:#ff2d55!important}.dcell.off{opacity:.25}.dcell.now:not(.num){outline-offset:-2px;outline:2px solid #fff}.tapmode .abtn{border-radius:0}.song-tools{flex-wrap:wrap;align-items:center;gap:4px 6px;margin-bottom:6px;display:flex}.song-tools .hint{color:var(--muted);margin-left:6px;font-size:10px}.song-grid{gap:2px;min-width:max-content;display:grid}.sg-lab{letter-spacing:.08em;color:#9fd0ff;z-index:1;background:#1b1d22;align-items:center;padding-left:2px;font-size:9.5px;font-weight:800;display:flex;position:sticky;left:0}.sg-bar{color:#888;background:#111;border:1px solid #000;border-radius:2px;height:18px;padding:0;font-size:9px}.sg-bar.loop{color:#9fd0ff;border-bottom:2px solid #3a8ee6}.sg-bar.now,.sg-cell.now{outline-offset:-2px;outline:2px solid #4cff7a}.sg-cell{height:24px;font-size:10px;font-family:var(--mono);color:#777;background:#2a2d33;border:1px solid #000;border-radius:2px;padding:0}.sg-cell.explicit{color:#fff;background:#3d4d66}.sg-cell.muted{color:#555;background:#1a1b1e}.sg-cell.muted.explicit{color:#ff6a5a}.sg-cell:not(.loop){opacity:.55}.sg-empty{color:var(--muted);grid-column:2/span 20;padding:4px;font-size:11px}.foot{color:#666;text-align:center;margin:14px 20px 0;font-size:10.5px;line-height:1.5}.toast{color:#fff;z-index:100;background:#222c;border:1px solid #555;border-radius:6px;max-width:90vw;padding:9px 16px;font-size:13px;transition:opacity .5s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast.err{color:#ffb4ac;border-color:#ff453a}.toast.gone{opacity:0}.overlay{z-index:50;background:#000b;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.help{background:#1e2026;border:1px solid #444;border-radius:6px;max-width:640px;max-height:90vh;padding:18px 22px;font-size:13.5px;line-height:1.5;overflow:auto}.help h2{color:#ff6a2b;margin-top:0;font-size:16px}.help kbd,.help code{background:#000;border-radius:3px;padding:1px 4px}.muted{color:var(--muted)}@media (max-width:760px){.rack{background:var(--rack);border:none;padding:0 0 24px}.panel{margin:6px 4px}.rack-row{margin:0 4px}.transport{border-radius:0;gap:6px 8px;margin:0;padding:6px 8px;position:static}.logo-main{font-size:17px}.lcd{min-width:76px;font-size:13px}.lcd.bpm{min-width:96px}.mixer .panel-body{grid-template-columns:repeat(3,1fr)}.panel-head h2{letter-spacing:.1em;font-size:10.5px}.knob-wrap{width:46px}.knob{--sz:34px}.panel-body{padding:4px 6px 8px}}.dialog{min-width:min(560px,94vw)}.dialog h3{letter-spacing:.12em;color:#9fd0ff;margin:14px 0 4px;font-size:12px}.dlg-body p{margin:4px 0 10px}.dlg-foot{justify-content:flex-end;gap:8px;margin-top:14px;display:flex}.dlg-table{border-collapse:collapse;width:100%;margin-bottom:10px;font-size:12.5px}.dlg-table th,.dlg-table td{text-align:left;border-bottom:1px solid #333;padding:4px 6px}.dlg-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 14px;margin:6px 0;display:grid}.dlg-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin:3px 0;font-size:12.5px;display:flex}.dlg-select,.dlg-num{color:var(--ink);background:#111;border:1px solid #444;border-radius:3px;padding:4px;font-size:12px}.dlg-num{width:64px}.dlg-check{cursor:pointer;margin:5px 0;font-size:12.5px;display:block}.dlg-status{background:#0003;border-left:3px solid #ff6a2b;padding:6px 8px}