:root{--bg: #141516;--chassis: #1b1d1f;--inset: #141516;--metal: #24272a;--line: #34383c;--text: #f0f1f2;--dim: #a5abb1;--orange: #b7c9ff;--amber: #e5bc76;--oled: #f0f1f2;--glow: none}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:IBM Plex Mono,ui-monospace,monospace}.desk{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px 12px 24px}.machine{width:min(1180px,100%);background:var(--chassis);border:1px solid var(--line);border-radius:0;padding:14px 14px 0;box-shadow:none;position:relative}.topbar{display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:stretch;margin-bottom:10px}.topbar .oled{display:none}.topbar .transport{grid-column:2 / -1;justify-content:center}.brand{display:flex;flex-direction:column;justify-content:center;padding:4px 8px}.logo{font-family:IBM Plex Sans,sans-serif;font-weight:800;font-size:24px;letter-spacing:-.04em;line-height:1}.badge{margin-top:6px;font-size:10px;letter-spacing:.28em;color:var(--orange)}.oled{background:var(--surface, #1b1d1f);border:1px solid var(--line);border-radius:4px;display:flex;justify-content:space-between;padding:6px 10px;min-height:64px;box-shadow:none}.oled-text{margin:0;color:var(--oled);font-size:12px;line-height:1.45;text-shadow:none}#vu{width:140px;height:56px;opacity:.9}.btn:focus-visible,.track-btn:focus-visible,.cell:focus-visible,.ptn:focus-visible,.knob:focus-visible,.key:focus-visible,.blk:focus-visible,.name-input:focus-visible,.page:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.transport .btn{min-width:48px;height:36px;font-size:10px}.btn:disabled{opacity:.4;cursor:default}.btn{background:var(--surface, #1b1d1f);color:var(--text);border:1px solid #3d424e;border-radius:4px;height:40px;min-width:60px;font-family:inherit;font-size:11px;letter-spacing:.12em;cursor:pointer;box-shadow:none}.btn:hover{border-color:#5a6170}.btn.play.active{background:#14331c;color:var(--oled);border-color:#2d6a40}.btn.play.waiting,.btn.waiting{background:#2a2410;color:var(--amber);border-color:#7a5a20}.btn.rec.active{background:#3a1210;color:#ff6b6b;border-color:#7a2a24}.btn.fill.active{background:#3a2a10;color:var(--amber);border-color:#7a5a20}.btn.slim{height:30px;min-width:0;flex:0 0 auto;letter-spacing:.06em;font-size:10px}.tracks{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-bottom:10px}.starter-checklist{margin:0 0 10px;padding:10px 12px;border:1px solid var(--accent);border-radius:6px;background:var(--surface-raised, #24272a)}.starter-checklist>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.starter-checklist ul{display:flex;flex-wrap:wrap;gap:8px 18px;margin:8px 0 0;padding-left:20px;color:var(--text-secondary, #a5abb1);font-size:11px}.starter-checklist li.complete{color:var(--text-primary, #f0f1f2);text-decoration:line-through}.starter-checklist li.complete::marker{content:"✓ ";color:var(--accent)}.selection-transfer-bar{display:flex;align-items:center;gap:6px;margin:0 0 8px;padding:6px;border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--canvas));font-size:11px}.selection-move-handle{min-width:96px;min-height:44px;cursor:ew-resize;touch-action:none}.track-btn{background:var(--metal);border:1px solid var(--line);border-radius:8px;padding:6px 5px 8px;cursor:pointer;text-align:left;color:var(--text);font-family:inherit;position:relative}.meter{display:block;width:100%;height:6px;margin-top:6px;border-radius:2px;background:#0c0e12}.track-btn .name{display:block;font-size:11px;letter-spacing:.14em}.track-btn .meta{display:block;margin-top:4px;font-size:9px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-btn.selected{border-color:var(--track, var(--orange));box-shadow:0 0 0 1px var(--track, var(--orange)),var(--glow)}.track-btn.muted{opacity:.4}.track-btn.solo .name{color:var(--amber)}.track-btn.dragover{outline:2px dashed var(--orange)}.grid-wrap{background:var(--inset);border:1px solid #0d0f14;border-radius:10px;padding:8px 8px 10px;margin-bottom:10px}.grid{position:relative}.roll-selection{position:absolute;z-index:4;pointer-events:none;border:1px solid var(--accent);background:#b7c9ff24}.step-page-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:6px}.step-pages{display:flex;gap:4px}.step-pages .btn{height:24px;min-width:58px;font-size:9px}.step-pages .btn.active{color:var(--orange);border-color:var(--orange)}.step-nums,.grid{display:grid;grid-template-columns:64px repeat(16,1fr);gap:4px}.step-nums{margin-bottom:6px}.step-nums span{text-align:center;font-size:9px;color:var(--dim)}.step-nums span.beat{color:var(--amber)}.row-label{font-size:10px;letter-spacing:.08em;color:var(--dim);display:flex;align-items:center}.row-label.selected{color:var(--text)}.cell{height:22px;border:0;border-radius:4px;background:#1c2028;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px #2a2e38}.cell.on{background:var(--track, var(--orange));box-shadow:none}.cell.on.accent{filter:brightness(1.25)}.cell.beat{margin-left:6px}.cell.playhead{outline:1px solid #fff8}.cell.recflash{outline:2px solid #7dff9a;box-shadow:0 0 10px #7dff9a88}.cell.selected-step{outline:2px solid #fff}.cell.locked:after{content:"";display:block;width:4px;height:4px;margin:2px auto 0;border-radius:0;background:#fff;box-shadow:none}.deck-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:10px}.pages{display:flex;gap:4px;flex:1;justify-content:flex-end}.page{flex:0 0 auto;min-width:48px;height:22px;font-size:8px;letter-spacing:.08em}.page[aria-selected=true]{color:var(--orange);border-color:var(--orange)}.page:disabled,.page[aria-disabled=true]{opacity:.35;color:var(--dim);cursor:not-allowed}.name-row{margin:2px 0 4px}.name-input{width:100%;height:26px;background:#0e1014;border:1px solid var(--line);border-radius:6px;color:var(--text);font-family:inherit;font-size:11px;letter-spacing:.08em;padding:0 8px}.page-toggles{display:flex;flex-wrap:wrap;gap:4px;min-height:28px}.page-toggles:empty{display:none}.chain-slot{display:inline-flex;align-items:center;margin-right:6px;margin-bottom:4px;background:#1c2028;border:1px solid var(--line);border-radius:4px;color:var(--amber);font-family:inherit;font-size:10px;cursor:pointer;padding:2px 6px}.chain-slot.selected{border-color:var(--orange);color:var(--orange)}.chain-slot.dragover{border-color:#7dff9a;color:#7dff9a}.keysheet{width:min(520px,92vw);background:#15171d;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:16px}.keysheet::backdrop{background:#0008}.keysheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.keysheet-head h2{margin:0;font-size:14px;letter-spacing:.12em}.keysheet-grid{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;font-size:12px}.keysheet-grid kbd{color:var(--orange);font-family:inherit}.cloud-dialog{width:min(680px,94vw)}.cloud-status{margin:5px 0 0;color:var(--dim);font-size:11px}.cloud-status.error{color:#ff7b72}.cloud-conflict{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}.cloud-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.cloud-fields label{display:flex;flex-direction:column;gap:4px;color:var(--dim);font-size:9px;letter-spacing:.08em}.cloud-fields label:first-child:last-child{grid-column:1 / -1}.cloud-user-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;color:var(--oled);font-size:11px}.cloud-project-fields{grid-template-columns:1fr 1fr}.cloud-member-fields{grid-template-columns:2fr 1fr}#cloud-current{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}.phone-code{margin:8px 0 0;font-family:IBM Plex Sans,sans-serif;font-size:28px;letter-spacing:.28em;color:var(--oled);text-align:center}#phone-qr{display:block;width:min(280px,70vw);height:auto;margin:12px auto 0;border-radius:12px;background:var(--text)}#phone-qr[hidden]{display:none}#phone-url{word-break:break-all}.knob.locked .dial{border-color:var(--amber)}.btn.locked{border-color:var(--amber);color:var(--amber)}.btn.lock-on,#btn-lock.active{background:#3a2a10;color:var(--amber);border-color:#7a5a20}.knob-deck{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.05fr) minmax(0,.7fr);gap:8px;margin-bottom:10px;align-items:stretch}.knob-panel{display:flex;flex-direction:column;gap:8px;background:#14161c;border:1px solid var(--line);border-radius:10px;padding:10px 8px 12px;min-width:0}.deck-label{font-size:9px;letter-spacing:.22em;color:var(--dim);line-height:1;height:10px}.knobs{display:flex;justify-content:space-evenly;align-items:flex-start;gap:2px;flex:1}.knob{display:flex;flex-direction:column;align-items:center;gap:5px;-webkit-user-select:none;user-select:none;cursor:ns-resize;flex:1 1 0;min-width:0;max-width:58px}.dial{width:36px;height:36px;border-radius:50%;background:var(--surface-raised, #24272a);border:1px solid var(--control-boundary, #70767c);position:relative;box-shadow:none;flex-shrink:0}.dial:after{content:"";position:absolute;width:8px;height:12px;background:var(--accent, var(--orange));left:calc(var(--pos, 0) * 100%);top:50%;transform:translate(-50%,-50%);border-radius:1px}.knob .lab{font-size:8px;letter-spacing:.1em;color:var(--dim)}.knob .val{font-size:10px;color:var(--text);min-height:14px}.bottom{display:grid;grid-template-columns:230px 1fr 240px;gap:10px;margin-bottom:10px}.panel{background:#15171d;border:1px solid var(--line);border-radius:10px;padding:10px}.panel.grow{min-width:0}.patterns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}.ptn{height:32px;border-radius:6px;border:1px solid var(--line);background:var(--metal);color:var(--text);font-family:inherit;cursor:pointer}.ptn.active{background:#2a1a12;border-color:var(--orange);color:var(--orange)}.ptn.in-song{box-shadow:inset 0 -2px 0 var(--amber)}.song-row{display:flex;gap:6px;margin-bottom:6px}.chain{margin:0;font-size:10px;color:var(--amber);min-height:14px;letter-spacing:.08em;display:flex;flex-wrap:wrap;gap:4px}.piano{display:flex;height:56px;position:relative;border-radius:6px;overflow:hidden;margin-bottom:8px}.key{flex:1;background:#f3efe6;border:1px solid #1a1c22;border-bottom-width:4px;cursor:pointer}.piano .black-layer{position:absolute;top:0;right:0;bottom:38%;left:0;pointer-events:none}.blk{pointer-events:auto;background:#15171c;border:1px solid #000;width:4.4%;height:100%;cursor:pointer;border-radius:0 0 3px 3px;position:absolute;top:0}.blk:active,.key:active,.blk.on,.key.on{background:var(--orange)}.kit-row{margin-bottom:0}.midi-routing{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.midi-routing label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;color:var(--dim);font-size:8px;letter-spacing:.08em}.midi-routing select{min-width:0;height:28px;border:1px solid var(--line);border-radius:6px;background:#0e1014;color:var(--text);font:10px IBM Plex Mono,ui-monospace,monospace}.pool-select{width:100%;height:30px;border:1px solid var(--line);border-radius:6px;background:#0e1014;color:var(--text);font:10px IBM Plex Mono,ui-monospace,monospace}.tool-row{display:flex;gap:6px;margin-bottom:8px}.helpbar{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:center;background:#0e1014;border-top:1px solid #2a2e38;margin:0 -14px;padding:8px 18px;border-radius:0 0 16px 16px;height:56px}.help-kicker{font-size:9px;letter-spacing:.18em;color:var(--orange);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.help-body{font-size:11px;color:#c4c0b8;line-height:1.35;height:2.7em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.tutorial-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;pointer-events:none}.tutorial-spot{position:fixed;border:2px solid var(--orange);border-radius:10px;box-shadow:0 0 0 9999px #0008;pointer-events:none}.tutorial-card{pointer-events:auto;position:fixed;z-index:42;left:50%;bottom:24px;transform:translate(-50%);width:min(520px,calc(100vw - 24px));background:#15171d;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:14px 16px 12px;max-height:min(560px,calc(100vh - 24px));overflow:hidden;display:flex;flex-direction:column}.tutorial-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:9px;letter-spacing:.18em;color:var(--orange)}.tutorial-card h2{margin:0 0 6px;font-size:14px;letter-spacing:.06em}.tutorial-card p{margin:0 0 12px;color:#c4c0b8;font-size:12px;line-height:1.45;white-space:pre-wrap}#tutorial-body{max-height:min(34vh,240px);overflow:auto;overflow-wrap:anywhere}.tutorial-actions{margin-bottom:0;flex-wrap:wrap;align-items:stretch}.tutorial-actions .btn{flex:1 1 120px;min-width:0;white-space:normal}.tutorial-secondary{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}.tutorial-secondary summary{cursor:pointer;color:var(--dim);font-size:10px}.tutorial-secondary-actions{display:flex;flex-wrap:wrap;gap:6px;max-height:128px;overflow:auto;padding-top:6px}.tutorial-secondary:not([open]) .tutorial-secondary-actions{display:none}.tutorial-secondary-actions .btn{flex:1 1 120px;min-width:0;white-space:normal}.learn-list{display:grid;gap:6px;max-height:min(60vh,520px);overflow:auto}.learn-list .deck-label{margin-top:12px}.learn-list .deck-label:first-child{margin-top:0}.learn-row{display:grid;grid-template-columns:minmax(96px,140px) 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;background:var(--inset);border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;padding:8px 10px;cursor:pointer}.learn-row:hover,.learn-row:focus-visible{border-color:var(--orange)}.learn-name{font-size:11px;letter-spacing:.08em}.learn-blurb{color:var(--dim);font-size:11px}.learn-state{font-size:9px;letter-spacing:.16em;color:var(--orange)}@media(max-width:900px){.topbar,.knob-deck,.bottom{grid-template-columns:1fr}.cell{height:18px}.learn-row{grid-template-columns:1fr auto}.learn-blurb{grid-column:1 / -1}}:root{--canvas: #141516;--surface: #1b1d1f;--surface-raised: #24272a;--separator: #34383c;--text-primary: #f0f1f2;--text-secondary: #a5abb1;--accent: #b7c9ff;--warning: #e5bc76;--text-on-color: #141516;--bg: #141516;--chassis: #1b1d1f;--inset: #141516;--metal: #24272a;--line: #34383c;--control-boundary: #70767c;--text: #f0f1f2;--dim: #a5abb1;--orange: #b7c9ff;--amber: #e5bc76;--oled: #f0f1f2;--danger: #f07878;--glow: none;--panel-radius: 4px;--control-radius: 4px}html,body{background:var(--bg);color:var(--text);font-family:IBM Plex Sans,ui-sans-serif,system-ui,sans-serif}body{font-size:14px;line-height:1.4}.desk{align-items:flex-start;padding:0}.machine{width:100%;min-height:100vh;max-width:none;padding:16px 20px 0;border:0;border-radius:0;background:var(--bg);box-shadow:none}.machine:before{display:none}.topbar{grid-template-columns:184px minmax(260px,1fr) auto;min-height:56px;align-items:center;gap:20px;padding-bottom:12px;border-bottom:1px solid var(--line)}.brand{padding:0;align-items:flex-start;gap:3px}.logo{font-family:IBM Plex Sans,sans-serif;font-size:16px;font-weight:600;letter-spacing:.01em;text-transform:lowercase}.badge{display:none}.project-title{width:160px;height:28px;padding:0;border:0;border-bottom:1px solid var(--separator);border-radius:0;background:transparent;color:var(--text-primary);font:14px/20px IBM Plex Sans,sans-serif}.project-title:focus{outline:2px solid var(--accent);outline-offset:2px}.oled{min-height:40px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.oled-text{color:var(--dim);font-family:IBM Plex Mono,ui-monospace,monospace;font-size:12px;line-height:1.35;text-shadow:none}#vu{opacity:.55}.transport{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.btn{height:36px;min-width:64px;padding:0 12px;border:1px solid var(--control-boundary);border-radius:var(--control-radius);background:var(--surface, #1b1d1f);color:var(--text);font:500 12px/1 IBM Plex Sans,sans-serif;letter-spacing:0;box-shadow:none;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.btn:hover{border-color:var(--text);background:var(--metal)}.btn:active,.btn.active{transform:none;box-shadow:none}.btn.play.active{background:var(--orange);color:#141516;border-color:var(--orange)}.btn.rec.active{background:var(--danger);color:#141516;border-color:var(--danger)}.tracks{display:grid;grid-template-columns:repeat(8,minmax(96px,1fr));gap:1px;margin:20px 0 12px;background:var(--line);border:1px solid var(--line)}.track-btn{min-height:58px;border:0;border-left:3px solid var(--track, var(--control-boundary));border-radius:0;background:var(--chassis);color:var(--text);text-align:left;padding:10px 12px;box-shadow:none}.track-btn:hover{background:var(--metal)}.track-btn.selected{outline:2px solid var(--orange);outline-offset:-2px;box-shadow:none}.track-btn .name{font-size:14px;font-weight:500;letter-spacing:0}.track-btn .meta{color:var(--dim);font-size:12px;letter-spacing:0}.track-btn.muted{opacity:.55}.grid-wrap,.knob-panel,.panel{background:var(--chassis);border:1px solid var(--line);border-radius:var(--panel-radius);box-shadow:none}.grid-wrap{padding:12px;margin-bottom:12px}.step-page-bar{justify-content:space-between;margin-bottom:10px}.editor-tools{display:flex;gap:4px;margin-right:auto;margin-left:16px}.editor-tools .btn{min-width:56px;height:30px}.editor-tools .btn.active{background:var(--accent);color:var(--text-on-color);border-color:var(--accent)}.deck-label,.row-label,.step-nums span,.knob .lab,.help-kicker{letter-spacing:.02em;color:var(--dim)}.step-nums span{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:11px}.step-nums span.beat{color:var(--text)}.grid,.step-nums{gap:3px}.cell{min-height:34px;border:1px solid transparent;border-radius:3px;background:#25282b;box-shadow:none;transition:background-color .1s ease,border-color .1s ease}.cell:hover{border-color:var(--text)}.cell.on{background:var(--track, var(--orange))}.cell.accent{border-color:var(--text)}.cell.selected-step{outline:2px solid var(--orange);outline-offset:1px}.cell.playhead{box-shadow:inset 0 0 0 2px var(--text)}.cell.beyond{opacity:.28}.cell.locked:after{width:5px;height:5px;background:var(--text);box-shadow:none}.piano-roll-grid{grid-template-columns:48px repeat(16,minmax(34px,1fr))}.roll-label{align-self:center;color:var(--dim);font:11px/1 IBM Plex Mono,ui-monospace,monospace;padding-left:4px}.roll-cell{position:relative;min-height:28px;border:0;border-bottom:1px solid #303438;border-left:1px solid #303438;border-radius:0;background:#202326}.roll-note-block{position:absolute;z-index:1;left:var(--note-left, 0%);top:3px;bottom:3px;width:var(--note-width, 100%);min-width:4px;border-radius:3px;background:var(--track, var(--accent));opacity:calc(.45 + (var(--velocity, 0) * .55));pointer-events:auto}.roll-note-block.selected-note{outline:2px solid var(--text-primary);outline-offset:1px}.roll-cell.beat{border-left-color:var(--control-boundary)}.roll-cell.on{background:var(--surface-raised, #24272a)}.roll-cell.selected-step{outline:2px solid var(--orange);outline-offset:-2px}.roll-cell.playhead{box-shadow:inset 0 0 0 2px var(--text)}.roll-note-handle{position:absolute;z-index:2;top:2px;right:0;bottom:2px;width:6px;cursor:ew-resize;border-left:2px solid color-mix(in srgb,var(--text-primary) 75%,transparent)}.roll-note-handle:hover{border-left-color:var(--text-primary)}.view-switch{flex:0 0 auto;margin-right:0}.knob-deck,.bottom{gap:12px}.knob-panel{padding:14px}.knob{border-radius:4px}.knob .dial{background:var(--metal);border:1px solid var(--control-boundary);box-shadow:none}.knob .val{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:12px;color:var(--text)}.knob .val{min-width:32px;padding:1px 3px;border-radius:2px;cursor:text}.knob .val:focus{outline:2px solid var(--accent);outline-offset:1px}.knob .val.invalid{color:var(--danger);outline:1px solid var(--danger)}.knob.locked .dial{border-color:var(--amber);box-shadow:none}.knob.disabled{cursor:not-allowed;opacity:.55}.knob.disabled .val{cursor:not-allowed;-webkit-user-select:none;user-select:none}.page{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;min-width:56px}.page[aria-selected=true]{color:var(--text);border-color:var(--orange)}.name-input,.pool-select,.midi-routing select{height:36px;border:1px solid var(--control-boundary);border-radius:var(--control-radius);background:var(--bg);color:var(--text);font:14px IBM Plex Sans,sans-serif}.helpbar{height:48px;margin:12px -20px 0;padding:8px 20px;border-top:1px solid var(--line);border-radius:0;background:var(--chassis)}.help-body{font-size:12px;color:var(--dim)}.compact-message{display:none}.tutorial-card{width:min(320px,calc(100vw - 24px));padding:16px;border:1px solid var(--control-boundary);border-radius:8px;background:var(--surface-raised, #24272a);box-shadow:none}.tutorial-card h2{font-size:20px;letter-spacing:0}.tutorial-card p{font-size:14px;color:var(--text)}@media(max-width:1100px){.machine{padding:12px 16px 0}.topbar{grid-template-columns:152px minmax(220px,1fr) auto;gap:12px}.grid-wrap{overflow-x:auto}.helpbar{margin-left:-16px;margin-right:-16px}}@media(pointer:coarse){.btn,.cell,.track-btn{min-height:44px}.track-action{width:44px;height:44px;min-width:44px;min-height:44px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media(max-width:767px){.machine{padding:12px}.topbar{display:block;min-height:auto}.brand{margin-bottom:16px}.transport{justify-content:flex-start}.compact-message{display:block;margin:24px 0;padding:16px;border:1px solid var(--control-boundary);background:var(--surface);color:var(--text-primary);line-height:1.5}.tracks,.grid-wrap,.knob-deck,.bottom,.helpbar{display:none}}:root{--canvas: #141516;--surface: #1b1d1f;--surface-raised: #24272a;--separator: #34383c;--control-boundary: #70767c;--text-primary: #f0f1f2;--text-secondary: #a5abb1;--accent: #b7c9ff;--danger: #f07878;--warning: #e5bc76;--text-on-color: #141516}html,body{background:var(--canvas)}html,body{height:100%}body{overflow:hidden}.desk{display:block;height:100dvh;min-height:0;padding:0}.machine{display:grid;grid-template-columns:184px minmax(0,1fr) 280px;grid-template-rows:56px minmax(0,1fr) auto 48px;column-gap:12px;row-gap:12px;width:100%;height:100dvh;max-height:100dvh;min-height:0;overflow:hidden;padding:0 20px;background:var(--canvas)}.topbar{grid-column:1 / -1;grid-row:1;display:grid;grid-template-columns:184px minmax(0,1fr) auto;grid-template-rows:56px;min-height:56px;max-height:56px;overflow:hidden;margin:0;padding:0;border-bottom:1px solid var(--separator)}.topbar .brand{grid-column:1;grid-row:1;min-width:0;overflow:hidden}.topbar .transport{grid-column:2;grid-row:1;justify-content:flex-start;min-width:0;overflow:hidden}.topbar .top-actions{grid-column:3;grid-row:1;min-width:0}.brand{padding:0;justify-content:center;max-height:56px;gap:2px}.logo{display:none}.save-line{display:flex;gap:8px;min-width:0}.save-line .save-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.save-status{color:var(--text-secondary);font:12px/16px IBM Plex Sans,sans-serif}.cloud-save-status{color:var(--warning)}.cloud-save-status.error{color:var(--danger)}.oled,.oled-text,#vu{display:none}.transport{display:flex;flex-wrap:nowrap;gap:4px;align-items:center;min-width:0;overflow:hidden}.transport-core,.transport-aux{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;min-width:0}.transport-core{flex:1 1 auto}.transport-aux{flex:0 1 auto}.transport-readout{display:flex;align-items:center;gap:10px;min-width:112px;padding:0 8px;color:var(--text-secondary);font:12px/16px IBM Plex Mono,ui-monospace,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}.transport-readout span+span{color:var(--text-primary)}.top-tempo{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary);font:12px/16px IBM Plex Mono,ui-monospace,monospace}.top-tempo input{width:4.5em;height:32px;padding:0 8px;border:1px solid var(--control-boundary);border-radius:4px;background:var(--canvas);color:var(--text-primary);font:13px/32px IBM Plex Mono,ui-monospace,monospace;font-variant-numeric:tabular-nums;-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.top-tempo input::-webkit-outer-spin-button,.top-tempo input::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.top-tempo input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}#btn-follow.active{color:var(--text-on-color);background:var(--accent);border-color:var(--accent)}.inspector-toggle,.inspector-close,.inspector-head,.inspector-backdrop{display:none}.velocity-lane{display:grid;grid-template-columns:48px repeat(16,minmax(28px,1fr));gap:3px;min-height:56px;margin-top:8px}.velocity-lane[hidden]{display:none}.velocity-label{align-self:center;color:var(--text-secondary);font:11px/1 IBM Plex Mono,ui-monospace,monospace}.velocity-cell{position:relative;min-height:56px;border:1px solid var(--separator);border-radius:3px;background:var(--canvas)}.velocity-bar{position:absolute;left:var(--note-left, 8%);bottom:2px;width:var(--note-width, 18%);min-width:8px;height:max(6px,calc(var(--velocity, 0) * 100%));padding:0;border:0;border-radius:2px 2px 0 0;background:var(--track, var(--accent));cursor:ns-resize}.velocity-bar.selected-note{outline:2px solid var(--text-primary);outline-offset:1px}.velocity-bar.chance-bar{left:12%;width:76%;cursor:ns-resize}.velocity-bar.step-velocity-bar{left:8%;width:84%}.velocity-bar.step-velocity-bar span{position:absolute;left:50%;bottom:3px;transform:translate(-50%);color:var(--canvas);font:8px/1 IBM Plex Mono,monospace;writing-mode:vertical-rl;pointer-events:none}.transport .btn{min-width:52px;height:32px}.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.top-actions .btn{min-width:0;height:32px}.tracks{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:1px;min-height:0;overflow:auto;margin:0;padding-top:0;background:var(--separator);border:1px solid var(--separator)}.track-row{position:relative;display:flex;flex:1 1 0;min-height:40px;background:var(--surface)}.track-btn{flex:1 1 auto;min-width:0;min-height:40px;border:0;border-left:0;border-radius:0;background:var(--surface);padding:6px 10px}.track-marker{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--track, var(--control-boundary))}.track-actions{display:flex;align-items:center;gap:2px;padding:0 6px 0 2px;background:var(--surface)}.track-action{width:32px;height:32px;min-width:32px;min-height:32px;padding:0;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--text-secondary);font:500 11px/1 IBM Plex Sans,sans-serif;cursor:pointer}.track-action:hover,.track-action:focus-visible{border-color:var(--control-boundary);color:var(--text-primary)}.track-action.active[data-track-action=mute]{background:var(--surface-raised);color:var(--text-secondary)}.track-action.active[data-track-action=solo]{background:var(--accent);color:var(--text-on-color)}.track-btn .name{font-size:14px;letter-spacing:0}.track-btn .meta{font-size:11px;letter-spacing:0}.track-btn.selected{outline:2px solid var(--accent);outline-offset:-2px}.grid-wrap{grid-column:2;grid-row:2;min-width:0;min-height:0;overflow:auto;margin:0;padding:12px;border:1px solid var(--separator);border-radius:4px;background:var(--surface)}.step-page-bar,.editor-chrome{justify-content:flex-start}.editor-chrome{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;min-width:0}.pattern-bar,.editor-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}.pattern-tabs{display:flex;align-items:center;gap:2px;min-width:0}.pattern-tab{min-width:34px;height:32px;padding:0 8px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--text-secondary);font:500 12px/30px IBM Plex Mono,ui-monospace,monospace}.pattern-tab:hover,.pattern-tab:focus-visible{color:var(--text-primary);background:var(--surface-raised)}.pattern-tab.active{color:var(--text-primary);border-bottom-color:var(--accent)}.pattern-tab.queued{border-bottom-style:dashed;border-bottom-color:var(--warning);color:var(--warning)}.editor-tools{margin-left:0}.editor-tools .btn{flex:1 1 0;min-width:56px}.edit-pattern{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:12px;margin-left:0}.edit-pattern .pool-select{width:132px;height:32px;font-size:12px}.view-switch{margin-right:0}.deck-label{font-size:12px;letter-spacing:.02em;color:var(--text-secondary)}.grid,.step-nums{grid-template-columns:48px repeat(16,minmax(28px,1fr));gap:3px}.cell{min-height:40px;border-radius:3px;background:var(--surface-raised);box-shadow:none}.cell.on{background:var(--track, var(--accent));box-shadow:none}.cell.on:after,.roll-cell.on:after{content:"";position:absolute;left:2px;bottom:2px;width:3px;height:max(3px,calc(var(--velocity, 0) * 100%));background:color-mix(in srgb,var(--text-on-color) 70%,transparent);pointer-events:none}.cell{position:relative}.cell.locked:before,.roll-cell.locked:before{content:"";position:absolute;z-index:2;top:3px;right:3px;width:6px;height:6px;background:var(--text-primary);transform:rotate(45deg);pointer-events:none}.cell.playhead{outline:2px solid var(--text-primary);outline-offset:-2px}.cell.selected-note,.roll-cell.selected-note{outline:2px solid var(--text-primary);outline-offset:-3px}.knob-deck{grid-column:3;grid-row:2 / 4;display:flex;flex-direction:column;min-height:0;max-height:100%;align-self:stretch;gap:12px;margin:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--control-boundary) var(--canvas)}.knob-panel{flex:0 0 auto;min-height:0;border:1px solid var(--separator);border-radius:4px;background:var(--surface);padding:12px}.knob-deck .knob-panel:first-child{flex:1 1 auto}.knobs{flex-wrap:wrap;justify-content:flex-start;gap:14px 10px}.knob{max-width:none;min-width:74px;gap:6px}.dial{width:100%;height:8px;border-radius:3px;border:1px solid var(--control-boundary);background:var(--surface-raised);box-shadow:none;position:relative}.dial:after{width:8px;height:14px;left:calc(var(--pos, 0) * 100%);top:50%;transform:translate(-50%,-50%);background:var(--accent);border-radius:1px;transform-origin:center}.knob .lab{font-size:11px;letter-spacing:0;color:var(--text-secondary)}.knob .readout{display:flex;align-items:baseline;justify-content:center;gap:4px;min-height:20px}.knob .val{font-size:13px;min-width:32px;text-align:center}.knob .unit{color:var(--text-secondary);font:11px/1 IBM Plex Mono,ui-monospace,monospace;-webkit-user-select:none;user-select:none;pointer-events:none}.bottom{grid-column:2;grid-row:3;grid-template-columns:minmax(170px,.8fr) minmax(280px,1.5fr) minmax(170px,.8fr);min-width:0;max-height:236px;margin:0;overflow:auto}.bottom[hidden]{display:none}.dock-tabs{grid-column:1 / -1;display:flex;align-items:center;gap:4px;min-height:36px;border-bottom:1px solid var(--separator)}.dock-tab{flex:0 0 auto;min-width:96px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent}.dock-tab.active{color:var(--text-primary);border-bottom-color:var(--accent)}.dock-close{margin-left:auto;flex:0 0 auto;min-width:56px}.mixer-panel{grid-column:1 / -1;min-height:0}.mixer-tracks{display:grid;gap:1px;margin-top:10px;background:var(--separator);border:1px solid var(--separator)}.mixer-row{display:grid;grid-template-columns:4px minmax(120px,1fr) minmax(120px,3fr) 32px 32px;align-items:center;gap:10px;min-height:42px;padding:5px 8px 5px 0;background:var(--surface)}.mixer-marker{align-self:stretch;background:var(--track, var(--control-boundary))}.mixer-name{display:grid;justify-items:start;gap:2px;min-width:0;border:0;padding:0;background:transparent;color:var(--text-primary);text-align:left;cursor:pointer}.mixer-name strong{font:500 13px/18px IBM Plex Sans,sans-serif}.mixer-name small{max-width:100%;overflow:hidden;color:var(--text-secondary);font:11px/14px IBM Plex Sans,sans-serif;text-overflow:ellipsis;white-space:nowrap}.mixer-name:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mixer-meter{height:8px;overflow:hidden;background:var(--canvas);border:1px solid var(--separator)}.mixer-meter span{display:block;height:100%;background:var(--track, var(--accent))}.panel{min-width:0;border:1px solid var(--separator);border-radius:4px;background:var(--surface);padding:12px}.helpbar{grid-column:1 / -1;grid-row:4;display:grid;grid-template-columns:110px minmax(0,1fr) auto auto;margin:0 -20px;border-radius:0;background:var(--surface)}.help-recover{min-width:108px;height:32px}.patterns{grid-template-columns:repeat(4,1fr)}.ptn{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:0 6px;min-width:0;border-radius:4px;background:var(--surface-raised);text-align:left}.ptn-id{grid-row:1 / -1;align-self:center;font:600 14px/18px IBM Plex Mono,ui-monospace,monospace}.ptn-name,.ptn-bars,.ptn-next{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ptn-name{font-size:12px}.ptn-bars,.ptn-next{color:var(--text-secondary);font-size:10px}.ptn.active{background:var(--accent);color:var(--text-on-color);border-color:var(--accent)}.ptn.active .ptn-bars,.ptn.active .ptn-next{color:color-mix(in srgb,var(--text-on-color) 70%,transparent)}.ptn.queued{border-style:dashed;border-color:var(--warning);color:var(--warning)}.chain-slot{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn{border-radius:4px;background:var(--surface);border-color:var(--control-boundary);text-transform:none}.btn.slim{height:32px;flex:0 0 auto}.page{min-width:48px;height:32px;color:var(--text-secondary);border-radius:0;box-shadow:none}.page[aria-selected=true]{color:var(--text-primary);border-color:var(--accent)}.page:disabled,.page[aria-disabled=true]{opacity:.55;color:var(--text-secondary)}.inspector-track-label{width:100%;margin-bottom:4px;color:var(--text-secondary)}.pages{justify-content:flex-start;gap:0;border-bottom:1px solid var(--separator)}.page-toggles{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;min-height:0}.page-toggles .btn{flex:none;width:100%;min-width:0;min-height:40px;height:auto;padding:6px 8px;white-space:normal;line-height:1.25;font-size:11px;letter-spacing:0}.page-toggles .sample-summary,.page-toggles .sample-waveform,.page-toggles .sample-actions,.page-toggles .toggle-group-label{grid-column:1 / -1}.bottom{grid-template-columns:minmax(0,1fr)}.bottom:has([data-dock-studio]:not([hidden])){grid-template-columns:minmax(240px,1.4fr) minmax(200px,1fr)}.deck-head{flex-wrap:wrap}.grid-wrap,.knob-deck,.learn-list,.tracks,.bottom{scrollbar-width:thin;scrollbar-color:var(--control-boundary) var(--canvas)}.grid-wrap::-webkit-scrollbar,.knob-deck::-webkit-scrollbar,.learn-list::-webkit-scrollbar,.tracks::-webkit-scrollbar,.bottom::-webkit-scrollbar{width:10px;height:10px}.grid-wrap::-webkit-scrollbar-track,.knob-deck::-webkit-scrollbar-track,.learn-list::-webkit-scrollbar-track,.tracks::-webkit-scrollbar-track,.bottom::-webkit-scrollbar-track{background:var(--canvas)}.grid-wrap::-webkit-scrollbar-thumb,.knob-deck::-webkit-scrollbar-thumb,.learn-list::-webkit-scrollbar-thumb,.tracks::-webkit-scrollbar-thumb,.bottom::-webkit-scrollbar-thumb{background:var(--control-boundary);border-radius:4px}.keysheet-head{gap:16px;align-items:flex-start}.keysheet-head .btn{flex:0 0 auto;min-width:72px;width:auto}.learn-list{scrollbar-width:thin;scrollbar-color:var(--control-boundary) var(--canvas)}.name-input,.pool-select,.midi-routing select{border-radius:4px;border-color:var(--control-boundary);background:var(--canvas)}.tutorial-card{border-radius:8px;background:var(--surface-raised)}.tutorial-card{width:min(320px,calc(100vw - 24px))}.export-dialog{width:min(520px,calc(100vw - 32px))}.export-tabs{display:flex;gap:4px;margin:12px 0 16px;border-bottom:1px solid var(--separator)}.export-tabs .active{color:var(--text-on-color);background:var(--accent);border-color:var(--accent)}.export-panel{display:grid;gap:12px}.export-panel label{display:grid;gap:6px;color:var(--text-secondary);font-size:13px}.export-panel input[type=checkbox]{accent-color:var(--accent);margin-right:8px}.local-project-label{display:block;margin:12px 0 6px;color:var(--text-secondary);font-size:12px}#local-projects{width:100%;min-width:0}.sample-summary{margin:4px 0 6px;overflow:hidden;color:var(--text-secondary);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.sample-waveform{display:block;width:100%;height:72px;margin:4px 0 10px;border:1px solid var(--separator);border-radius:4px;background:var(--canvas)}.sample-actions{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}@media(max-width:1099px)and (min-width:768px){.machine{grid-template-columns:152px minmax(0,1fr);grid-template-rows:56px minmax(0,1fr) auto 48px;padding:0 16px}.topbar{grid-column:1 / -1;grid-template-columns:minmax(120px,152px) minmax(0,1fr) auto;overflow:hidden}.transport-aux{display:none}.top-actions .btn:not(#btn-undo):not(#btn-redo):not(#btn-inspector):not(#btn-top-export):not(#btn-top-learn){display:none}.tracks{grid-column:1;grid-row:2;overflow:auto}.grid-wrap{grid-column:2;grid-row:2;min-height:0}.inspector-toggle{display:inline-flex;min-width:44px;min-height:44px}.inspector-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.inspector-close{display:inline-flex;min-width:44px;min-height:44px;flex:0 0 auto}.inspector-backdrop{display:block;position:fixed;z-index:14;top:0;right:0;bottom:0;left:0;background:color-mix(in srgb,var(--canvas) 55%,transparent)}.inspector-backdrop[hidden]{display:none}.knob-deck{position:fixed;z-index:15;top:68px;right:0;bottom:60px;width:min(320px,42vw);max-height:none;padding:12px;background:var(--surface);border-left:1px solid var(--separator);transform:translate(100%)}.knob-deck.open{transform:translate(0)}.bottom{grid-column:2;grid-row:3;max-height:240px}.helpbar{margin-left:-16px;margin-right:-16px}.cell,.btn,.track-action,.pattern-tab,.page,.key,.ptn,.pool-select,.name-input,.top-tempo input{min-height:44px}.btn{min-width:44px}.cell{min-width:40px}.roll-cell,.track-btn{min-height:44px}.track-action{width:44px;height:44px;min-width:44px;min-height:44px}}@media(max-width:767px){html,body{overflow:auto}.machine{display:block;height:auto;min-height:100dvh;max-height:none;overflow:auto;padding:12px}.topbar{display:block;border:0;max-height:none;overflow:visible}.transport-aux,.top-actions .btn:not(#btn-top-connections){display:none}.tracks,.grid-wrap,.knob-deck,.bottom,.helpbar{display:none}.tutorial-card{left:12px!important;right:12px;top:auto!important;bottom:12px!important;width:auto;transform:none!important}}:root{--canvas: #101419;--surface: #191f27;--surface-raised: #252d38;--separator: #303a47;--control-boundary: #526071;--accent: #b5c8ff;--text-secondary: #aab6c6}@media(min-width:768px){.machine{grid-template-rows:108px minmax(0,1fr) auto 48px}.topbar{grid-template-columns:184px minmax(0,1fr);grid-template-rows:56px 44px;max-height:none;min-height:108px;gap:0 12px;overflow:visible}.topbar .transport{grid-column:2;overflow:auto;gap:14px}.transport-core{flex:0 0 auto}.transport-aux{flex:0 0 auto;padding-left:14px;border-left:1px solid var(--separator)}.topbar .top-actions{grid-column:1 / -1;grid-row:2;justify-content:flex-start;gap:8px;overflow-x:auto}.top-actions .btn{flex-shrink:0}.top-actions #btn-top-export{margin-left:auto}.top-actions .btn:not(#btn-top-export){background:transparent;border-color:transparent}.top-actions .btn:hover{background:var(--surface-raised);border-color:var(--control-boundary)}.tracks{border:0;background:transparent;gap:6px}.track-row{border:1px solid var(--separator);border-radius:8px;overflow:hidden}.track-actions{flex-direction:column;justify-content:center;gap:3px}.track-action{width:38px;height:25px;min-height:25px;border-color:var(--separator);font-size:10px}.track-btn.selected{outline:none;background:color-mix(in srgb,var(--track) 13%,var(--surface))}.track-row:has(.selected){border-color:var(--track)}.grid-wrap,.knob-panel,.panel{border-radius:10px}.grid-wrap{padding:16px}.editor-chrome{gap:12px}.editor-tools{background:var(--canvas);padding:3px;border-radius:7px;gap:3px}.editor-tools .btn:not(.active){border-color:transparent;background:transparent}.pattern-tab.active{border-radius:5px;background:var(--surface-raised)}.cell:not(.on):nth-child(17n+2),.cell:not(.on):nth-child(17n+6),.cell:not(.on):nth-child(17n+10),.cell:not(.on):nth-child(17n+14){background:#303b49}.cell:hover{border-color:var(--accent);filter:brightness(1.15)}.knob-deck .knob-panel:first-child{flex:0 0 auto}.knob{cursor:ew-resize;touch-action:none}.knob .val{cursor:text;border-radius:4px;padding:2px 4px;background:var(--canvas)}.knob .val:hover,.knob .val:focus{outline:1px solid var(--accent)}.dial{background:linear-gradient(to right,var(--accent) calc(var(--pos) * 100%),var(--surface-raised) 0);height:6px;border:0;margin:5px 0}.dial:after{width:10px;height:14px;border-radius:4px;box-shadow:0 1px 4px #0008}.deck-label{font-weight:600;color:var(--text-primary)}}.editor-hint,.control-hint{color:var(--text-secondary);font:12px/1.5 IBM Plex Sans,sans-serif;margin:0 0 14px}.control-hint{font-size:11px}#btn-play{background:var(--accent);border-color:var(--accent);color:var(--canvas);font-weight:600}#btn-play:before{content:"▶";margin-right:6px;font-size:10px}#btn-play.active{background:#91ddbd;border-color:#91ddbd}#btn-rec:before{content:"●";color:var(--danger);margin-right:6px}#btn-rec.active:before{color:inherit}#btn-follow.active{background:var(--surface-raised);border-color:var(--accent);color:var(--accent)}.btn:focus-visible,.track-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(max-width:1099px)and (min-width:768px){.topbar{grid-template-columns:152px minmax(0,1fr)}.transport-aux{display:flex}.top-actions .btn:not(#btn-undo):not(#btn-redo):not(#btn-inspector):not(#btn-top-export):not(#btn-top-learn){display:inline-flex}.knob-deck{top:120px}}@media(min-width:1100px)and (max-height:800px){.cell{min-height:34px}.editor-chrome{gap:8px;margin-bottom:8px}.editor-hint{margin-bottom:8px}}.sound-visual{margin:0 0 14px;padding:10px;border:1px solid var(--separator);border-radius:8px;background:var(--canvas)}.sound-visual[hidden]{display:none}.sound-visual-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;font:11px/1.5 IBM Plex Sans,sans-serif}.sound-visual-head span{color:var(--accent)}.sound-visual svg{display:block;width:100%;height:auto;margin:6px 0;overflow:visible}.visual-grid{stroke:var(--separator);stroke-width:.6;fill:none}.visual-curve{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.visual-secondary{stroke:var(--warning);stroke-dasharray:4 3}.sound-visual-axis{display:flex;justify-content:space-between;color:var(--text-secondary);font:10px/1.4 IBM Plex Mono,monospace}.sound-visual p{margin:8px 0 0;color:var(--text-secondary);font:11px/1.5 IBM Plex Sans,sans-serif}.visual-handle{fill:var(--canvas);stroke:var(--accent);stroke-width:2;cursor:grab;touch-action:none}.visual-handle:active{cursor:grabbing}.workspace-nav{display:flex;align-items:stretch;gap:6px;min-width:0}.workspace-tab{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:8px;min-width:0;padding:0 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--text-secondary);font:600 13px/1 IBM Plex Sans,sans-serif;cursor:pointer}.workspace-tab span{color:inherit;font:11px/1 IBM Plex Sans,sans-serif;opacity:.8}.workspace-tab:hover,.workspace-tab:focus-visible{color:var(--text-primary);background:var(--surface-raised);outline:none}.workspace-tab.active{color:var(--text-primary);border-bottom-color:var(--accent)}.workspace-view{min-width:0;min-height:0;overflow:auto;padding:16px;border:1px solid var(--separator);border-radius:10px;background:var(--surface);scrollbar-width:thin;scrollbar-color:var(--control-boundary) var(--canvas)}.workspace-view[hidden]{display:none!important}.workspace-view-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.workspace-view-head{flex-wrap:wrap}.workspace-view-head>.tool-row{flex-wrap:wrap}#arrange-playback-mode{min-width:108px}.workspace-view-head h2{margin:2px 0 4px;color:var(--text-primary);font:600 22px/1.15 IBM Plex Sans,sans-serif}.workspace-view-head p,.subtle{margin:0;color:var(--text-secondary);font:12px/1.45 IBM Plex Sans,sans-serif}.eyebrow{color:var(--accent);font:600 11px/1 IBM Plex Mono,ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}.arrange-layout{display:grid;grid-template-columns:minmax(164px,.45fr) minmax(0,2fr);gap:12px;min-height:min(440px,58vh)}.arrange-library{display:flex;flex-direction:column;gap:10px}.arrange-pattern-browser{display:grid;gap:6px}.arrange-pattern{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 8px;width:100%;padding:9px;border:1px solid var(--separator);border-left:4px solid var(--pattern-color);border-radius:6px;background:var(--canvas);color:var(--text-primary);text-align:left;cursor:grab}.arrange-pattern strong{grid-row:1 / 3;align-self:center;color:var(--pattern-color);font:600 14px/1 IBM Plex Mono,monospace}.arrange-pattern span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.arrange-pattern small{color:var(--text-secondary);font-size:10px}.arrange-timeline-panel{display:flex;flex-direction:column;min-width:0}.timeline-toolbar,.arrange-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.timeline-toolbar{justify-content:space-between;margin-bottom:10px}.timeline-toolbar label,.arrange-controls label{display:flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:12px}.timeline-toolbar input{accent-color:var(--accent)}.arrange-controls input{width:54px;height:32px;border:1px solid var(--control-boundary);border-radius:4px;background:var(--canvas);color:var(--text-primary);font:12px IBM Plex Mono,monospace}.timeline-scroll{min-height:178px;overflow:auto;border:1px solid var(--separator);border-radius:6px;background:var(--canvas)}.arrange-ruler,.arrange-timeline{display:flex;width:max-content;min-width:100%}.timeline-content{width:max-content;min-width:100%;position:relative}.arrange-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);pointer-events:none;z-index:2}.arrange-ruler{min-height:28px;border-bottom:1px solid var(--separator);color:var(--text-secondary);font:10px/28px IBM Plex Mono,monospace}.arrange-ruler span{box-sizing:border-box;padding-left:8px;border-right:1px solid var(--separator)}.arrange-timeline{min-height:140px;align-items:stretch;padding:12px 8px;gap:6px}.arrange-insertion{flex:0 0 3px;width:3px;min-height:100%;background:transparent}.arrange-insertion.active{background:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}.timeline-block{display:grid;grid-template-columns:auto minmax(52px,1fr);grid-template-rows:auto auto;gap:4px 8px;flex:0 0 var(--block-width);min-width:92px;padding:10px;border:1px solid color-mix(in srgb,var(--pattern-color) 55%,var(--separator));border-top:4px solid var(--pattern-color);border-radius:5px;background:var(--surface-raised);color:var(--text-primary);text-align:left;cursor:grab}.repeat-handle{grid-column:1 / -1;justify-self:end;width:44px;min-height:44px;border:1px solid var(--pattern-color);border-radius:4px;background:var(--canvas);color:var(--text-primary);cursor:ew-resize;touch-action:none}.timeline-block strong{grid-row:1 / 3;align-self:center;color:var(--pattern-color);font:700 18px/1 IBM Plex Mono,monospace}.timeline-block span,.timeline-block small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timeline-block span{font-size:12px}.timeline-block small{color:var(--text-secondary);font-size:10px}.timeline-block.selected{outline:2px solid var(--accent);outline-offset:1px}.timeline-block.playing{background:color-mix(in srgb,var(--pattern-color) 20%,var(--surface-raised))}.timeline-block.queued{border-style:dashed}.arrange-controls{margin-top:10px}.mixer-console{display:grid;grid-template-columns:repeat(9,minmax(104px,1fr));align-items:stretch;min-width:min-content;overflow-x:auto;gap:8px;padding-bottom:6px}.mixer-strip{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:104px;padding:10px;border:1px solid var(--separator);border-top:4px solid var(--track);border-radius:6px;background:var(--canvas)}.mixer-strip.selected{outline:2px solid var(--accent);outline-offset:1px}.mixer-strip-name{display:grid;gap:2px;border:0;background:transparent;color:var(--text-primary);text-align:left;cursor:pointer}.mixer-strip-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px/1 IBM Plex Sans,sans-serif}.mixer-strip-name small,.mixer-strip>small{color:var(--text-secondary);font:10px/1.35 IBM Plex Sans,sans-serif}.strip-meter{display:flex;align-items:flex-end;height:132px;padding:3px;border:1px solid var(--separator);background:#0d1116}.strip-meter i{display:block;width:100%;min-height:2px;background:var(--track, var(--accent))}.mixer-strip label{display:grid;gap:3px;color:var(--text-secondary);font-size:10px}.mixer-strip input{width:100%;accent-color:var(--track, var(--accent))}.mixer-strip output{color:var(--text-primary);font:11px IBM Plex Mono,monospace}.mixer-strip input[type=number]{border:1px solid var(--control-boundary);border-radius:4px;padding:5px;min-width:0;background:var(--surface);color:var(--text-primary)}.strip-buttons{display:grid;grid-template-columns:1fr 1fr;gap:4px}.strip-buttons .btn:last-child{grid-column:1 / -1}.master-strip{--track: var(--warning)}.master-effects{display:grid;gap:8px}.master-effects summary{min-height:32px;cursor:pointer;font-size:11px}.advanced-controls{grid-column:1 / -1;padding:6px;border:1px solid var(--separator);border-radius:6px}.advanced-controls summary{min-height:32px;color:var(--text-secondary);cursor:pointer;font-size:11px}.advanced-controls>.knobs{margin-top:6px}.perform-layout{display:grid;grid-template-columns:minmax(240px,1fr) minmax(190px,.75fr) minmax(250px,1fr);gap:12px}.perform-panel{min-width:0}.perform-pads{display:grid;grid-template-columns:repeat(4,minmax(72px,1fr));gap:8px;margin:12px 0}.perform-pad{display:grid;min-height:88px;padding:10px;border:1px solid var(--track);border-radius:8px;background:color-mix(in srgb,var(--track) 14%,var(--canvas));color:var(--text-primary);text-align:left;touch-action:none;cursor:pointer}.perform-pad-group{display:grid;gap:4px}.perform-pad-group>div{display:grid;grid-template-columns:1fr 1fr;gap:4px}.perform-pad-group .perform-pad{width:100%}.perform-pad:active{background:var(--track);color:var(--canvas)}.perform-pad b{color:var(--track);font:700 18px/1 IBM Plex Mono,monospace}.perform-pad:active b{color:inherit}.perform-pad span{align-self:end;font-size:12px}.perform-patterns{display:grid;gap:5px;margin:12px 0}.perform-pattern{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:center;min-height:40px;padding:6px 8px;border:1px solid var(--separator);border-radius:5px;background:var(--canvas);color:var(--text-primary);text-align:left;cursor:pointer}.perform-pattern b{color:var(--accent);font:600 14px IBM Plex Mono,monospace}.perform-pattern span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.perform-pattern.playing{border-color:var(--accent);background:var(--surface-raised)}.perform-pattern.queued{border-style:dashed;border-color:var(--warning)}.perform-macros{display:grid;gap:12px;margin-top:12px}.performance-macro{padding:9px;border:1px solid var(--separator);border-radius:6px;background:var(--canvas)}.performance-macro label{display:grid;grid-template-columns:1fr auto;gap:6px;color:var(--text-primary);font-size:12px}.performance-macro input{grid-column:1 / -1;width:100%;accent-color:var(--accent)}.performance-macro output{color:var(--accent);font:11px IBM Plex Mono,monospace}.macro-assignment{display:grid;grid-template-columns:minmax(0,1fr) minmax(84px,.7fr);gap:6px;margin-top:8px}.macro-assignment select{width:100%;height:30px;min-width:0;border:1px solid var(--control-boundary);border-radius:4px;background:var(--surface);color:var(--text-primary);font:11px IBM Plex Sans,sans-serif}.sound-actions{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 10px}.sound-choice{display:grid;gap:5px;font-size:11px;color:var(--text-secondary);min-width:0}.sound-choice select{width:100%}.sound-analysis{margin:-4px 0 14px;padding:8px;border:1px solid var(--separator);border-radius:8px;background:var(--canvas)}.sound-analysis-tabs{display:flex;gap:4px;margin-bottom:6px}[hidden]{display:none!important}.perform-pads{grid-template-columns:repeat(2,minmax(0,1fr))}.strip-meter.clipping i{background:var(--danger, #ff5a2a)}.sound-analysis summary,.note-copy-tools summary{cursor:pointer;color:var(--text-secondary);font-size:12px;padding:6px 0}.sample-time-inputs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.sample-time-inputs label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;font-size:10px;color:var(--text-secondary)}.sample-time-inputs input{min-width:0;width:100%;background:var(--canvas);color:var(--text-primary);border:1px solid var(--control-boundary);padding:5px}.note-copy-tools{margin:0 0 8px}.note-copy-tools .tool-row{flex-wrap:wrap;padding-top:6px}.note-copy-tools input{width:60px;color:var(--text-primary);background:var(--canvas);border:1px solid var(--control-boundary);padding:6px}.arrange-timeline{gap:0;padding:12px 0}.timeline-block{min-width:0;border-radius:2px}.timeline-block.selected{outline-offset:-2px}.sound-analysis-tabs .btn.active{color:var(--text-on-color);background:var(--accent);border-color:var(--accent)}#sound-analysis-canvas{display:block;width:100%;height:72px;border:1px solid var(--separator);border-radius:4px;background:var(--canvas)}.sound-analysis .subtle{margin-top:5px;font-size:10px}.sample-trim-readout{grid-column:1 / -1;margin:-4px 0 5px;color:var(--text-secondary);font:10px/1.35 IBM Plex Sans,sans-serif}.new-project-dialog{width:min(780px,calc(100vw - 32px))}.new-project-tabs{display:flex;gap:4px;margin:0 0 14px;border-bottom:1px solid var(--separator)}.new-project-tabs .active{color:var(--text-on-color);background:var(--accent);border-color:var(--accent)}.starter-browser{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.starter-card{padding:12px;border:1px solid var(--separator);border-radius:7px;background:var(--canvas)}.starter-card>span{color:var(--accent);font:600 10px IBM Plex Mono,monospace;text-transform:uppercase}.starter-card h3{margin:5px 0;font-size:16px}.starter-card p{min-height:38px;margin:0 0 10px;color:var(--text-secondary);font-size:12px;line-height:1.45}.starter-card>div{display:flex;flex-wrap:wrap;gap:6px}.sound-browser-dialog{width:min(860px,calc(100vw - 32px))}.sound-browser-tools{display:grid;grid-template-columns:minmax(160px,1fr) 130px 130px auto auto;gap:8px;margin-bottom:12px}.sound-browser-list{display:grid;gap:6px;max-height:min(56vh,540px);overflow:auto}.sound-preset{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid var(--separator);border-radius:6px;background:var(--canvas)}.sound-preset>div:first-child{min-width:0}.sound-preset strong,.sound-preset small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sound-preset strong{font-size:13px}.sound-preset small{color:var(--text-secondary);font-size:10px;margin-top:2px}.sound-preset>div:last-child{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}@media(min-width:768px){.machine{grid-template-rows:108px 44px minmax(0,1fr) auto 48px}.workspace-nav{grid-column:1 / -1;grid-row:2;border-bottom:1px solid var(--separator)}.tracks,.grid-wrap{grid-row:3}.knob-deck{grid-row:3 / 5}.bottom{grid-row:4}.workspace-view{grid-column:1 / 3;grid-row:3 / 5}.helpbar{grid-row:5}}@media(max-width:1099px)and (min-width:768px){.workspace-view{grid-column:1 / -1}.arrange-layout{grid-template-columns:1fr}.perform-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.perform-layout>:nth-child(1){grid-column:1;grid-row:1}.perform-layout>:nth-child(3){grid-column:2;grid-row:1}.perform-layout>:nth-child(2){grid-column:1 / -1;grid-row:2}.arrange-library{max-height:180px;overflow:auto}.arrange-pattern-browser{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:767px){.workspace-nav,.workspace-view,.sound-analysis{display:none!important}}@media(max-width:560px){.starter-browser,.sound-browser-tools{grid-template-columns:1fr}.sound-preset{align-items:flex-start;flex-direction:column}.sound-preset>div:last-child{justify-content:flex-start}}