:root{--color-bg: #0a0a0f;--color-surface: #12121a;--color-surface-light: #1a1a28;--color-border: #2a2a3a;--color-text: #c0c0d0;--color-text-dim: #606080;--color-kick: #ff3366;--color-snare: #ff6633;--color-hihat: #ffcc00;--color-clap: #33ff66;--color-bass: #00ccff;--color-lead: #6633ff;--color-pad: #ff33cc;--color-perc: #33ccff;--cell-size: clamp(24px, 3.2vw, 40px);--cell-gap: 3px;--cell-radius: 4px;--cell-inactive: var(--color-surface-light);--cell-hover: #22223a;--glow-spread: 12px;--knob-size: 48px;--knob-bg: #1e1e2e;--knob-indicator: #ffffff;--knob-track: #333344;--font-mono: "JetBrains Mono", "Fira Code", monospace;--font-size-sm: .7rem;--font-size-base: .875rem;--transition-fast: 80ms ease-out;--transition-med: .2s ease-out}.grid-container{position:relative;max-width:100%;overflow-x:auto}.grid{display:flex;flex-direction:column;gap:var(--cell-gap);-webkit-user-select:none;user-select:none}.grid-row{display:flex;align-items:center;gap:var(--cell-gap);transition:opacity var(--transition-fast),filter var(--transition-fast)}.grid-row-label{width:56px;font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text-dim);text-transform:uppercase;text-align:right;padding-right:8px;flex-shrink:0;-webkit-user-select:none;user-select:none;cursor:pointer;transition:all var(--transition-fast)}.grid-cell{width:var(--cell-size);height:var(--cell-size);border:1px solid var(--color-border);border-radius:var(--cell-radius);background:var(--cell-inactive);cursor:pointer;transition:background var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);position:relative;overflow:hidden;appearance:none;outline:none;padding:0}.grid-cell:hover{background:var(--cell-hover)}.grid-cell--beat-start{margin-left:4px}.grid-row[data-instrument="0"] .grid-cell--active{background:var(--color-kick);box-shadow:0 0 6px var(--color-kick)}.grid-row[data-instrument="1"] .grid-cell--active{background:var(--color-snare);box-shadow:0 0 6px var(--color-snare)}.grid-row[data-instrument="2"] .grid-cell--active{background:var(--color-hihat);box-shadow:0 0 6px var(--color-hihat)}.grid-row[data-instrument="3"] .grid-cell--active{background:var(--color-clap);box-shadow:0 0 6px var(--color-clap)}.grid-row[data-instrument="4"] .grid-cell--active{background:var(--color-bass);box-shadow:0 0 6px var(--color-bass)}.grid-row[data-instrument="5"] .grid-cell--active{background:var(--color-lead);box-shadow:0 0 6px var(--color-lead)}.grid-row[data-instrument="6"] .grid-cell--active{background:var(--color-pad);box-shadow:0 0 6px var(--color-pad)}.grid-row[data-instrument="7"] .grid-cell--active{background:var(--color-perc);box-shadow:0 0 6px var(--color-perc)}.grid-cell--active[data-velocity="1"]{opacity:.4}.grid-cell--active[data-velocity="2"]{opacity:.7}.grid-cell--active[data-velocity="3"]{opacity:1}.grid-cell--playing{border-color:#ffffff40}.grid-cell--triggered{animation:cell-trigger .2s ease-out}.grid-row--muted{opacity:.3;filter:saturate(.2)}.grid-row--muted .grid-row-label{text-decoration:line-through}.grid-row--solo .grid-row-label{font-weight:700;text-shadow:0 0 6px currentColor}.grid-cell[data-prob="75"]:after,.grid-cell[data-prob="50"]:after,.grid-cell[data-prob="25"]:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--cell-radius)}.grid-cell[data-prob="75"]:after{background:repeating-linear-gradient(-45deg,transparent,transparent 3px,rgba(0,0,0,.25) 3px,rgba(0,0,0,.25) 4px)}.grid-cell[data-prob="50"]:after{background:repeating-linear-gradient(-45deg,transparent,transparent 2px,rgba(0,0,0,.35) 2px,rgba(0,0,0,.35) 4px)}.grid-cell[data-prob="25"]:after{background:repeating-linear-gradient(-45deg,transparent,transparent 1px,rgba(0,0,0,.45) 1px,rgba(0,0,0,.45) 4px)}.grid-pitch-ctrl{display:flex;align-items:center;gap:1px;margin-right:4px;flex-shrink:0}.pitch-btn{width:16px;height:16px;border:1px solid var(--color-border);border-radius:2px;background:var(--color-surface);color:var(--color-text-dim);font-family:var(--font-mono);font-size:10px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;outline:none}.pitch-btn:hover{border-color:var(--color-text);color:var(--color-text)}.pitch-display{width:24px;text-align:center;font-family:var(--font-mono);font-size:9px;color:var(--color-text-dim);-webkit-user-select:none;user-select:none;cursor:ns-resize}.pitch-display--shifted{color:var(--color-lead)}.grid-mixer-ctrl{display:flex;align-items:center;gap:2px;margin-right:4px;flex-shrink:0}.grid-mixer-ctrl .knob-wrapper{gap:1px}.grid-mixer-ctrl .knob{width:24px;height:24px}.grid-mixer-ctrl .knob-body{border-width:1.5px}.grid-mixer-ctrl .knob-indicator{top:3px;width:2px;height:35%;margin-left:-1px;transform-origin:center calc(100% + 3px)}.grid-mixer-ctrl .knob-label{font-size:7px}.grid-cell--active[data-note]:before{content:attr(data-note);position:absolute;top:1px;right:1px;font-family:var(--font-mono);font-size:7px;line-height:1;color:#000000b3;pointer-events:none;z-index:1}.grid-cell-filter{position:absolute;bottom:0;left:0;right:0;background:#ffffff40;pointer-events:none;border-radius:0 0 var(--cell-radius) var(--cell-radius);transition:height var(--transition-fast)}.grid-cell-ratchet{position:absolute;top:1px;left:1px;font-family:var(--font-mono);font-size:7px;line-height:1;color:#fffc;background:#00000059;border-radius:2px;padding:0 2px;pointer-events:none;z-index:2}.grid-cell-condition{position:absolute;bottom:1px;right:2px;font-family:var(--font-mono);font-size:7px;line-height:1;color:#fff9;pointer-events:none;z-index:2}.grid-cell-gate{position:absolute;bottom:0;left:0;height:3px;background:#ffffff80;pointer-events:none;z-index:1}.grid-cell-gate[data-gate=S]{background:#ffc80099}.grid-cell-gate[data-gate=L]{background:#00c8ff99}.grid-cell-gate[data-gate=H]{background:#64ff6499}.grid-cell-slide{position:absolute;top:0;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:10px;line-height:1;color:#ffffffb3;pointer-events:none;z-index:2;font-weight:700}.grid-step-header{display:flex;align-items:center;gap:var(--cell-gap);margin-bottom:2px;position:relative}.grid-step-header-spacer--label{width:56px;flex-shrink:0}.grid-step-header-spacer--pitch{width:66px;flex-shrink:0}.grid-step-header-spacer--mixer{width:134px;flex-shrink:0}.grid-step-header-spacer--euc,.grid-step-header-spacer--piano{width:22px;flex-shrink:0}.grid-step-label{width:var(--cell-size);height:16px;font-family:var(--font-mono);font-size:7px;color:var(--color-text-dim);background:transparent;border:1px solid transparent;border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;outline:none;transition:all 80ms ease-out}.grid-step-label:hover{color:var(--color-text);border-color:var(--color-border);background:var(--color-surface)}.grid-step-label--beat-start{margin-left:4px}.grid-step-label--playing{color:var(--color-text);background:var(--color-surface-light);border-color:var(--color-border)}.grid-playhead-bar{position:absolute;bottom:0;height:2px;background:var(--color-text);border-radius:1px;opacity:0;transition:left 60ms linear,opacity var(--transition-fast);pointer-events:none;z-index:5;box-shadow:0 0 4px #ffffff4d}.grid-playhead-bar--active{opacity:.8}@keyframes cell-copy-flash{0%{filter:brightness(1)}50%{filter:brightness(2)}to{filter:brightness(1)}}.grid-cell--flash{animation:cell-copy-flash .3s ease-out}.delay-division-select{padding:4px 6px;border-radius:3px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-family:var(--font-mono);font-size:.65rem;cursor:pointer;outline:none}.delay-division-select:hover{border-color:var(--color-text)}.grid-euc-btn{width:18px;height:18px;border:1px solid var(--color-border);border-radius:3px;background:var(--color-surface);color:var(--color-text-dim);font-family:var(--font-mono);font-size:9px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;outline:none;margin-right:4px;flex-shrink:0}.cell-tooltip{position:fixed;z-index:1500;background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;padding:4px 6px;font-family:var(--font-mono);font-size:.6rem;color:var(--color-text);pointer-events:none;opacity:0;transform:translate(-50%) translateY(-100%);transition:opacity .1s ease-out;box-shadow:0 4px 12px #0006}.cell-tooltip--visible{opacity:1}.cell-tooltip__badges{display:flex;gap:2px}.cell-tooltip__badge{display:inline-flex;align-items:center;gap:1px;padding:1px 3px;border-radius:2px;background:#ffffff0d;opacity:.45;white-space:nowrap}.cell-tooltip__badge--custom{opacity:1;background:#ffffff1f}.cell-tooltip__badge-label{color:var(--color-text-dim);font-size:.5rem}.cell-tooltip__badge-value{color:var(--color-text)}@media(pointer:coarse){.cell-tooltip{display:none}}.grid-cell--beyond-length{opacity:.15;pointer-events:none;background:repeating-linear-gradient(45deg,var(--cell-inactive),var(--cell-inactive) 3px,transparent 3px,transparent 6px)!important;box-shadow:none!important}.grid-row-length{display:none;font-family:var(--font-mono);font-size:7px;color:var(--color-text-dim);opacity:.7;margin-left:2px;pointer-events:none;white-space:nowrap}.grid-row-length--visible{display:inline}@media(pointer:coarse){.grid-cell{touch-action:none}.grid-cell:hover{background:var(--cell-inactive)}.grid-step-label:hover{color:var(--color-text-dim);border-color:transparent;background:transparent}}@media(max-width:768px){.grid-row-label{width:40px;font-size:.6rem;padding-right:4px}.grid-pitch-ctrl,.grid-mixer-ctrl,.grid-euc-btn,.grid-piano-btn,.grid-step-header-spacer--pitch,.grid-step-header-spacer--mixer,.grid-step-header-spacer--euc,.grid-step-header-spacer--piano{display:none}.grid-step-header-spacer--label{width:40px}}@media(max-width:480px){.grid-row-label{width:32px;font-size:.55rem}.grid-step-header-spacer--label{width:32px}.grid-step-label{font-size:6px}}.transport{display:flex;align-items:center;gap:1.5rem}.transport-play-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color var(--transition-med),background var(--transition-med);outline:none;position:relative}.transport-play-btn:hover{border-color:var(--color-text)}.transport-play-btn--playing{border-color:var(--color-kick);background:#ff33661a}.play-icon{width:0;height:0;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent var(--color-text);margin-left:3px}.stop-icon{width:14px;height:14px;background:var(--color-text);border-radius:2px}.transport-tempo{display:flex;flex-direction:column;align-items:center;gap:2px}.transport-tempo-display{font-size:1.25rem;font-weight:700;color:var(--color-text);font-variant-numeric:tabular-nums;min-width:3.5em;text-align:center}.tap-btn{padding:6px 14px;border-radius:4px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-dim);font-family:var(--font-mono);font-size:var(--font-size-sm);text-transform:uppercase;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast);outline:none}.tap-btn:hover{border-color:var(--color-text);color:var(--color-text)}.tap-btn:active{background:var(--color-surface-light)}.knob-wrapper{display:flex;flex-direction:column;align-items:center;gap:4px}.knob{width:var(--knob-size);height:var(--knob-size);position:relative;cursor:ns-resize;outline:none}.knob-body{width:100%;height:100%;border-radius:50%;background:var(--knob-bg);border:2px solid var(--knob-track);position:relative}.knob-indicator{position:absolute;top:6px;left:50%;width:3px;height:35%;margin-left:-1.5px;background:var(--knob-indicator);border-radius:2px;transform-origin:center calc(100% + 6px)}.knob-label{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text-dim);text-transform:uppercase;-webkit-user-select:none;user-select:none}.knob-value{font-family:var(--font-mono);font-size:.65rem;color:var(--color-text-dim);-webkit-user-select:none;user-select:none;min-width:3em;text-align:center;opacity:.5;transition:opacity .15s ease-out}.knob-wrapper:hover .knob-value{opacity:1;color:var(--color-text)}.knob:focus-visible .knob-body{border-color:var(--color-lead)}.knob:active{cursor:ns-resize}.knob-tooltip{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%);background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;padding:2px 6px;font-family:var(--font-mono);font-size:.6rem;color:var(--color-text);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease-out;z-index:100;box-shadow:0 2px 8px #0000004d}.knob-tooltip--visible{opacity:1}.effects-panel{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center}.effect-group{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px}.effect-group-title{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);text-transform:uppercase;letter-spacing:.1em}.effect-knobs{display:flex;gap:1rem}.filter-type-btn{padding:4px 10px;border-radius:3px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-dim);font-family:var(--font-mono);font-size:.65rem;text-transform:uppercase;cursor:pointer;transition:all var(--transition-fast);outline:none}.filter-type-btn--active{background:var(--color-surface-light);border-color:var(--color-text);color:var(--color-text)}.sidechain-toggle{padding:4px 12px;border-radius:3px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-dim);font-family:var(--font-mono);font-size:.65rem;font-weight:700;text-transform:uppercase;cursor:pointer;transition:all var(--transition-fast);outline:none}.sidechain-toggle--active{background:#ff336626;border-color:var(--color-kick);color:var(--color-kick)}.perf-fx-panel{display:flex;flex-direction:column;align-items:center;gap:.5rem}.perf-fx-row{display:flex;gap:8px}.perf-fx-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius:4px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-dim);font-family:var(--font-mono);font-size:var(--font-size-sm);text-transform:uppercase;cursor:default;transition:all var(--transition-fast);outline:none}.perf-fx-key{font-size:9px;padding:1px 4px;border-radius:2px;background:var(--color-surface-light);border:1px solid var(--color-border);color:var(--color-text-dim);margin-right:2px}.perf-fx-led{width:6px;height:6px;border-radius:50%;background:var(--color-text-dim);opacity:.3;flex-shrink:0;transition:all var(--transition-fast)}.perf-fx-btn--active[data-fx=tapestop]{--perf-fx-color: #ff3366}.perf-fx-btn--active[data-fx=stutter]{--perf-fx-color: #ff8833}.perf-fx-btn--active[data-fx=bitcrush]{--perf-fx-color: #00ccff}.perf-fx-btn--active[data-fx=reverbwash]{--perf-fx-color: #aa44ff}.perf-fx-btn--active{border-color:var(--perf-fx-color, var(--color-kick));color:var(--perf-fx-color, var(--color-kick));box-shadow:0 0 12px color-mix(in srgb,var(--perf-fx-color, var(--color-kick)) 40%,transparent);background:color-mix(in srgb,var(--perf-fx-color, var(--color-kick)) 10%,transparent)}.perf-fx-btn--active .perf-fx-key{border-color:var(--perf-fx-color, var(--color-kick));color:var(--perf-fx-color, var(--color-kick))}.perf-fx-btn--active .perf-fx-led{background:var(--perf-fx-color, var(--color-kick));opacity:1;box-shadow:0 0 6px var(--perf-fx-color, var(--color-kick));animation:perf-fx-pulse .8s ease-in-out infinite}@keyframes perf-fx-pulse{0%,to{opacity:1}50%{opacity:.4}}.pattern-bank{display:flex;gap:6px;align-items:center}.pattern-bank-label{font-size:var(--font-size-sm);color:var(--color-text-dim);text-transform:uppercase;margin-right:4px}.bank-btn{width:36px;height:36px;border-radius:4px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-dim);font-family:var(--font-mono);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-fast);outline:none}.bank-btn:hover{border-color:var(--color-text);color:var(--color-text)}.bank-btn--active{background:var(--color-lead);border-color:var(--color-lead);color:#fff;box-shadow:0 0 8px #63f6}.clear-btn{padding:6px 12px;border-radius:4px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-dim);font-family:var(--font-mono);font-size:var(--font-size-sm);text-transform:uppercase;cursor:pointer;transition:all var(--transition-fast);outline:none;margin-left:8px}.clear-btn:hover{border-color:var(--color-kick);color:var(--color-kick)}@keyframes bank-flash{0%{filter:brightness(1) scale(1)}50%{filter:brightness(1.8) scale(1.15)}to{filter:brightness(1) scale(1)}}.bank-btn--flash{animation:bank-flash .3s ease-out}@keyframes bank-queued-blink{0%,to{border-color:var(--color-lead);box-shadow:0 0 6px #63f6}50%{border-color:transparent;box-shadow:none}}.bank-btn--queued{animation:bank-queued-blink .6s ease-in-out infinite}.theme-switcher{display:flex;flex-direction:column;align-items:center;gap:4px}.theme-cards{display:flex;gap:6px}.theme-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 6px;border-radius:6px;border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;transition:all var(--transition-fast);outline:none}.theme-card:hover{border-color:var(--color-text-dim)}.theme-card--active{border-color:var(--color-text);box-shadow:0 0 8px #c0c0d033}.theme-card-swatches{display:flex;gap:2px}.theme-card-swatch{width:8px;height:8px;border-radius:2px;border:1px solid rgba(255,255,255,.1)}.theme-card-name{font-family:var(--font-mono);font-size:6px;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}@keyframes cell-trigger{0%{filter:brightness(1.8);transform:scale(1.12)}to{filter:brightness(1);transform:scale(1)}}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}@keyframes knob-glow{0%{box-shadow:0 0 8px var(--color-lead)}to{box-shadow:0 0 0 transparent}}@keyframes app-fade-in{0%{opacity:0}to{opacity:1}}@keyframes bank-switch-flash{0%{filter:brightness(1.3)}to{filter:brightness(1)}}@keyframes modal-slide-in{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.particle-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.preset-selector{display:flex;align-items:center;gap:8px}.preset-selector-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-dim)}.preset-select{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:4px;padding:4px 8px;font-family:inherit;font-size:.75rem;cursor:pointer;outline:none}.preset-select:hover{border-color:var(--color-text-dim)}.preset-select:focus{border-color:var(--color-accent, #00ccff)}.share-btn,.export-btn{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:4px;padding:4px 12px;font-family:inherit;font-size:.75rem;cursor:pointer;transition:border-color .15s,background .15s}.share-btn:hover,.export-btn:hover{border-color:var(--color-text-dim);background:var(--color-border)}.export-btn:disabled{opacity:.5;cursor:not-allowed}.visualizer-container{width:100%;max-width:900px;margin:8px auto 0;padding:0 12px;box-sizing:border-box}.visualizer-canvas{width:100%;height:64px;border-radius:4px;background:var(--color-surface)}.rand-btn{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:4px;padding:4px 10px;font-family:inherit;font-size:.75rem;cursor:pointer;transition:border-color .15s,background .15s}.rand-btn:hover{border-color:#63f;background:var(--color-border)}.pattern-chain{display:flex;flex-direction:column;gap:6px;padding:8px 12px;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface);max-width:900px;width:100%}.chain-top-row{display:flex;align-items:center;gap:8px}.chain-mode-btn{padding:4px 12px;border-radius:4px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-dim);font-family:var(--font-mono);font-size:var(--font-size-sm);cursor:pointer;text-transform:uppercase;transition:all var(--transition-fast)}.chain-mode-btn--song{background:var(--color-lead);border-color:var(--color-lead);color:#fff}.chain-input{display:flex;gap:4px}.chain-add-btn{width:28px;height:28px;border-radius:4px;border:1px solid var(--color-border);background:var(--color-surface-light);color:var(--color-text);font-family:var(--font-mono);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:border-color var(--transition-fast)}.chain-add-btn:hover{border-color:var(--color-text-dim)}.chain-clear-btn{padding:4px 8px;border-radius:4px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-kick);font-family:var(--font-mono);font-size:var(--font-size-sm);cursor:pointer;margin-left:4px}.chain-display{display:flex;gap:3px;flex-wrap:wrap;min-height:28px;align-items:center}.chain-empty{font-size:var(--font-size-sm);color:var(--color-text-dim);font-style:italic}.chain-item{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:3px;border:1px solid var(--color-border);background:var(--color-surface-light);color:var(--color-text);font-family:var(--font-mono);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.chain-item:hover{border-color:var(--color-kick)}.chain-item--active{background:var(--color-lead);border-color:var(--color-lead);color:#fff;box-shadow:0 0 6px #6633ff80}.chain-item[draggable=true]{cursor:grab}.chain-item--dragging{opacity:.4;cursor:grabbing}.chain-item--drag-over{border-color:var(--color-lead);box-shadow:0 0 6px #63f6}@media(max-width:480px){.pattern-chain{display:none}}.help-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity var(--transition-med)}.help-overlay--visible{opacity:1;pointer-events:auto}.help-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:1.5rem 2rem;max-width:520px;width:90vw;max-height:80vh;overflow-y:auto}.help-overlay--visible .help-panel{animation:modal-slide-in .3s ease-out}.help-title{font-family:var(--font-mono);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text);margin-bottom:.75rem;text-align:center}.help-tour-btn{display:block;margin:0 auto .75rem;font-family:var(--font-mono);font-size:.65rem;padding:5px 16px;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface-light);color:var(--color-text);cursor:pointer;transition:background var(--transition-fast)}.help-tour-btn:hover{background:var(--color-border)}.help-search-wrap{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:4px;margin-bottom:1rem;background:var(--color-surface);padding-bottom:.5rem}.help-search{flex:1;background:var(--color-bg);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text);font-family:var(--font-mono);font-size:.75rem;padding:6px 10px;outline:none;transition:border-color var(--transition-fast)}.help-search:focus{border-color:var(--color-text-dim)}.help-search::placeholder{color:var(--color-text-dim);opacity:.6}.help-search-clear{width:24px;height:24px;border:none;background:transparent;color:var(--color-text-dim);font-size:1rem;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast);padding:0}.help-search-clear:hover{color:var(--color-text)}.help-no-results{display:none;text-align:center;color:var(--color-text-dim);font-family:var(--font-mono);font-size:.75rem;padding:2rem 0}.help-no-results--visible{display:block}.help-row--hidden,.help-section--hidden{display:none}.help-section{margin-bottom:1rem}.help-section:last-child{margin-bottom:0}.help-section-title{font-family:var(--font-mono);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-dim);margin-bottom:.4rem;padding-bottom:.25rem;border-bottom:1px solid var(--color-border)}.help-row{display:flex;align-items:baseline;gap:.75rem;padding:.2rem 0}.help-key{display:inline-block;min-width:130px;flex-shrink:0;font-family:var(--font-mono);font-size:.65rem;color:var(--color-text);background:var(--color-surface-light);border:1px solid var(--color-border);border-radius:3px;padding:2px 6px;text-align:center;white-space:nowrap}.help-desc{font-family:var(--font-mono);font-size:.7rem;color:var(--color-text-dim)}.help-btn{position:absolute;top:1.5rem;right:1.5rem;width:28px;height:28px;border-radius:50%;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-dim);font-family:var(--font-mono);font-size:.8rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);z-index:10}.help-btn:hover{border-color:var(--color-text);color:var(--color-text);box-shadow:0 0 8px #c0c0d033}mark{background:var(--color-kick);color:var(--color-bg);border-radius:2px;padding:0 2px}.help-section--touch{display:none}@media(pointer:coarse){.help-section--touch{display:block}}.scale-selector{display:flex;flex-direction:column;align-items:center;gap:4px}.scale-selector-row{display:flex;gap:4px}.scale-select{font-family:var(--font-mono);font-size:var(--font-size-sm);background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:4px;padding:4px 18px 4px 6px;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23606080'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center}.scale-select:hover{border-color:var(--color-text-dim)}.scale-select:focus{border-color:var(--color-lead)}.scale-select option{background:var(--color-surface);color:var(--color-text)}.grid-euc-btn{width:20px;height:20px;border:1px solid var(--color-border);border-radius:3px;background:var(--color-surface);color:var(--color-text-dim);font-family:var(--font-mono);font-size:9px;font-weight:700;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;outline:none;margin-right:2px;transition:all var(--transition-fast)}.grid-euc-btn:hover{border-color:var(--color-text);color:var(--color-text)}.euclidean-popover{position:fixed;z-index:900;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:12px;min-width:220px;box-shadow:0 8px 24px #00000080;opacity:0;pointer-events:none;transition:opacity var(--transition-fast)}.euclidean-popover--visible{opacity:1;pointer-events:auto}.euclidean-title{font-family:var(--font-mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text);margin-bottom:8px;text-align:center}.euclidean-slider-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.euclidean-slider-label{font-family:var(--font-mono);font-size:.6rem;color:var(--color-text-dim);text-transform:uppercase;width:24px;flex-shrink:0}.euclidean-slider{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:var(--color-border);border-radius:2px;outline:none}.euclidean-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--color-text);cursor:pointer}.euclidean-slider-value{font-family:var(--font-mono);font-size:.65rem;color:var(--color-text);width:18px;text-align:right}.euclidean-preview{display:flex;gap:2px;margin:8px 0;justify-content:center}.euclidean-preview-cell{width:10px;height:10px;border-radius:2px;background:var(--color-surface-light);border:1px solid var(--color-border);transition:background var(--transition-fast)}.euclidean-preview-cell--active{background:var(--color-lead);border-color:var(--color-lead)}.euclidean-separator{height:1px;background:var(--color-border);margin:10px 0}.euclidean-apply{display:block;width:100%;padding:4px 8px;background:var(--color-surface-light);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text);font-family:var(--font-mono);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all var(--transition-fast)}.euclidean-apply:hover{border-color:var(--color-lead);color:var(--color-lead)}.sound-shaper{position:fixed;z-index:100;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:8px 12px;display:none;flex-direction:column;align-items:center;gap:6px;box-shadow:0 4px 16px #0006}.sound-shaper--visible{display:flex}.sound-shaper-title{font-family:var(--font-mono);font-size:var(--font-size-sm);font-weight:600;text-transform:uppercase;letter-spacing:.1em}.sound-shaper-knobs{display:flex;gap:8px}.grid-piano-btn{width:18px;height:18px;border:1px solid var(--color-border);border-radius:3px;background:var(--color-surface);color:var(--color-text-dim);font-size:10px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;outline:none;margin-right:2px;flex-shrink:0;transition:border-color var(--transition-fast),color var(--transition-fast)}.grid-piano-btn:hover{border-color:var(--color-text);color:var(--color-text)}.grid-piano-btn--spacer{visibility:hidden;pointer-events:none}.piano-roll-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity var(--transition-med)}.piano-roll-overlay--visible{opacity:1;pointer-events:auto}.piano-roll{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:1rem 1.25rem;max-width:820px;width:95vw;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #0009}.piano-roll-overlay--visible .piano-roll{animation:modal-slide-in .3s ease-out}.piano-roll__header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--color-border)}.piano-roll__title{font-family:var(--font-mono);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.piano-roll__scale-info{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text-dim);margin-left:auto}.piano-roll__close{width:24px;height:24px;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface);color:var(--color-text-dim);font-family:var(--font-mono);font-size:.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color var(--transition-fast),color var(--transition-fast);flex-shrink:0}.piano-roll__close:hover{border-color:var(--color-text);color:var(--color-text)}.piano-roll__body{display:flex;overflow-y:auto;flex:1;min-height:0}.piano-roll__labels{display:flex;flex-direction:column;gap:1px;position:sticky;left:0;z-index:1;padding-top:21px}.piano-roll__label{height:20px;min-width:36px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-family:var(--font-mono);font-size:9px;color:var(--color-text-dim);flex-shrink:0;-webkit-user-select:none;user-select:none}.piano-roll__label--root{color:var(--color-text);font-weight:700}.piano-roll__label--octave{border-top:1px solid var(--color-border)}.piano-roll__grid-wrap{flex:1;min-width:0;overflow-x:auto}.piano-roll__grid{display:grid;grid-template-columns:repeat(16,1fr);gap:1px;min-width:400px}.piano-roll__step-num{font-family:var(--font-mono);font-size:8px;color:var(--color-text-dim);text-align:center;height:20px;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.piano-roll__cell{height:20px;border:none;border-radius:2px;background:var(--color-surface-light, rgba(255, 255, 255, .04));cursor:pointer;outline:none;padding:0;transition:background .08s ease;appearance:none}.piano-roll__cell:hover{background:#ffffff1a}.piano-roll__cell--beat-start{border-left:1px solid var(--color-border)}.piano-roll__cell--root-row{background:#ffffff0f}.piano-roll--bass .piano-roll__cell--active{background:var(--color-bass);box-shadow:0 0 6px color-mix(in srgb,var(--color-bass) 50%,transparent)}.piano-roll--lead .piano-roll__cell--active{background:var(--color-lead);box-shadow:0 0 6px color-mix(in srgb,var(--color-lead) 50%,transparent)}.piano-roll--pad .piano-roll__cell--active{background:var(--color-pad);box-shadow:0 0 6px color-mix(in srgb,var(--color-pad) 50%,transparent)}.piano-roll__cell--active[data-velocity="1"]{opacity:.4}.piano-roll__cell--active[data-velocity="2"]{opacity:.7}.piano-roll__cell--active[data-velocity="3"]{opacity:1}.piano-roll__cell--playing{box-shadow:inset 0 0 0 1px #ffffff40}.piano-roll__step-num--playing{color:var(--color-text);font-weight:700}@media(pointer:coarse){.piano-roll__cell{touch-action:none;min-height:28px}}.midi-btn{position:relative;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);padding:.35rem .7rem;border-radius:4px;font-family:var(--font-mono);font-size:var(--font-size-sm);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast);text-transform:uppercase;letter-spacing:.1em}.midi-btn:hover{background:var(--color-surface-light);border-color:var(--color-text-dim)}.midi-activity-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--color-border);margin-left:6px;vertical-align:middle;transition:background 60ms}.midi-activity-dot--active{background:#3f6;box-shadow:0 0 6px #33ff6680}.midi-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:0;min-width:300px;max-width:420px;z-index:500;opacity:0;pointer-events:none;transition:opacity var(--transition-med),transform var(--transition-med);box-shadow:0 8px 32px #00000080}.midi-panel--visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.midi-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-border)}.midi-panel-title{font-size:var(--font-size-base);font-weight:600;letter-spacing:.1em;text-transform:uppercase}.midi-panel-close{background:none;border:none;color:var(--color-text-dim);font-size:1.2rem;cursor:pointer;padding:0 .25rem;line-height:1}.midi-panel-close:hover{color:var(--color-text)}.midi-section{padding:.75rem 1rem;border-bottom:1px solid var(--color-border)}.midi-section:last-child{border-bottom:none}.midi-section-title{font-size:var(--font-size-sm);color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}.midi-device{padding:.3rem 0;font-size:var(--font-size-sm);color:var(--color-text)}.midi-device:before{content:"●";color:#3f6;margin-right:.5rem;font-size:.6rem;vertical-align:middle}.midi-empty{font-size:var(--font-size-sm);color:var(--color-text-dim);font-style:italic;padding:.25rem 0}.midi-learn-row{display:flex;align-items:center;gap:.75rem}.midi-learn-btn{background:var(--color-surface-light);border:1px solid var(--color-border);color:var(--color-text);padding:.3rem .6rem;border-radius:4px;font-family:var(--font-mono);font-size:var(--font-size-sm);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}.midi-learn-btn:hover{background:var(--color-surface);border-color:var(--color-text-dim)}.midi-learn-btn--active{background:#ff336620;border-color:var(--color-kick);color:var(--color-kick);animation:midi-pulse 1.5s ease-in-out infinite}@keyframes midi-pulse{0%,to{opacity:1}50%{opacity:.6}}.midi-learn-status{font-size:var(--font-size-sm);color:var(--color-text-dim)}.midi-assign-row{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.midi-target-select{flex:1;background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text);padding:.3rem .4rem;border-radius:4px;font-family:var(--font-mono);font-size:var(--font-size-sm)}.midi-assign-btn{background:var(--color-bass);border:none;color:var(--color-bg);padding:.3rem .6rem;border-radius:4px;font-family:var(--font-mono);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:opacity var(--transition-fast)}.midi-assign-btn:hover{opacity:.85}.midi-mapping-row{display:flex;align-items:center;justify-content:space-between;padding:.25rem 0;font-size:var(--font-size-sm)}.midi-mapping-info{color:var(--color-text)}.midi-mapping-delete{background:none;border:none;color:var(--color-text-dim);font-size:1rem;cursor:pointer;padding:0 .25rem;line-height:1}.midi-mapping-delete:hover{color:var(--color-kick)}.midi-output-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem;flex-wrap:wrap}.midi-output-enable-label{display:flex;align-items:center;gap:.3rem;font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.midi-output-port-label{font-size:var(--font-size-sm);color:var(--color-text-dim);margin-left:auto}.midi-output-port-select{background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text);padding:.2rem .3rem;border-radius:4px;font-family:var(--font-mono);font-size:var(--font-size-sm);max-width:140px}.midi-output-clock-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem;font-size:var(--font-size-sm);color:var(--color-text-dim)}.midi-output-clock-label{display:flex;align-items:center;gap:.2rem;font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.midi-output-table{display:flex;flex-direction:column;gap:1px}.midi-output-row{display:grid;grid-template-columns:4fr 2fr 3fr 1.5fr 1.5fr;align-items:center;gap:.3rem;padding:.2rem 0;font-size:var(--font-size-sm)}.midi-output-row--header{color:var(--color-text-dim);border-bottom:1px solid var(--color-border);padding-bottom:.3rem;margin-bottom:.15rem}.midi-output-cell{display:flex;align-items:center;min-width:0}.midi-output-cell--name{font-weight:600;font-size:var(--font-size-sm)}.midi-output-ch-select{background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text);padding:.15rem .2rem;border-radius:3px;font-family:var(--font-mono);font-size:var(--font-size-xs, .65rem);width:100%}.midi-output-note-btn{background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text);padding:.15rem .3rem;border-radius:3px;font-family:var(--font-mono);font-size:var(--font-size-xs, .65rem);cursor:ns-resize;min-width:36px;text-align:center}.midi-output-note-btn:hover{border-color:var(--color-text-dim)}.midi-output-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-border);transition:background 60ms}.midi-output-dot--active{background:#3f6;box-shadow:0 0 6px #33ff6680}.toast-container{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column-reverse;gap:8px;z-index:2000;pointer-events:none}.toast{pointer-events:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:8px 16px;opacity:0;transform:translateY(20px);transition:opacity .3s ease-out,transform .3s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 16px #0006}.toast--info{border-left:3px solid var(--color-text-dim)}.toast--success{border-left:3px solid var(--color-lead)}.toast--warning{border-left:3px solid var(--color-snare)}.toast--visible{opacity:1;transform:translateY(0)}.toast--dismissing{opacity:0;transform:translateY(20px)}.toast__text{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text);white-space:nowrap}.cell-ctx{position:fixed;z-index:950;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:10px;min-width:200px;box-shadow:0 8px 24px #00000080;opacity:0;pointer-events:none;transition:opacity .15s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.cell-ctx--visible{opacity:1;pointer-events:auto}.cell-ctx__section{margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--color-border)}.cell-ctx__section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.cell-ctx__label{font-family:var(--font-mono);font-size:.55rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-dim);margin-bottom:4px}.cell-ctx__btn-group{display:flex;gap:3px;flex-wrap:wrap}.cell-ctx__btn{background:var(--color-bg);border:1px solid var(--color-border);border-radius:3px;padding:2px 7px;font-family:var(--font-mono);font-size:.6rem;color:var(--color-text-dim);cursor:pointer;transition:all var(--transition-fast)}.cell-ctx__btn:hover{border-color:var(--color-text);color:var(--color-text)}.cell-ctx__btn--active{background:var(--color-lead);color:var(--color-bg);border-color:var(--color-lead)}.cell-ctx__toggle{background:var(--color-bg);border:1px solid var(--color-border);border-radius:3px;padding:2px 12px;font-family:var(--font-mono);font-size:.6rem;color:var(--color-text-dim);cursor:pointer;transition:all var(--transition-fast)}.cell-ctx__toggle:hover{border-color:var(--color-text);color:var(--color-text)}.cell-ctx__toggle--active{background:var(--color-lead);color:var(--color-bg);border-color:var(--color-lead)}.cell-ctx__slider-row{display:flex;align-items:center;gap:6px}.cell-ctx__slider{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:var(--color-border);border-radius:2px;outline:none;cursor:pointer}.cell-ctx__slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--color-lead);border:none;cursor:pointer}.cell-ctx__slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--color-lead);border:none;cursor:pointer}.cell-ctx__slider-value{font-family:var(--font-mono);font-size:.6rem;color:var(--color-text-dim);width:32px;text-align:right}.grid-row-label--sample{position:relative;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}.grid-row-label--drop-target{outline:2px dashed var(--color-text);outline-offset:-2px;background:#ffffff0d}.waveform-preview{width:200px;height:60px;border:1px solid var(--color-border);border-radius:4px;cursor:crosshair;background:var(--color-surface-light, rgba(255, 255, 255, .03))}.sound-shaper-sample-section{display:flex;flex-direction:column;align-items:center;gap:6px}.sound-shaper-sample-controls{display:flex;gap:6px;align-items:center}.sample-load-btn,.sample-remove-btn{padding:2px 8px;border:1px solid var(--color-border);border-radius:3px;background:var(--color-surface);color:var(--color-text-dim);font-family:var(--font-mono);font-size:.6rem;cursor:pointer;outline:none}.sample-load-btn:hover,.sample-remove-btn:hover{border-color:var(--color-text);color:var(--color-text)}.sample-loop-toggle{padding:2px 6px;border:1px solid var(--color-border);border-radius:3px;background:var(--color-surface);color:var(--color-text-dim);font-family:var(--font-mono);font-size:.6rem;cursor:pointer;outline:none}.sample-loop-toggle--active{border-color:var(--color-lead);color:var(--color-lead)}.sound-shaper-title-row{display:flex;align-items:center;gap:8px;width:100%}.sound-shaper-mode-btn{padding:2px 8px;border:1px solid var(--color-border);border-radius:3px;background:var(--color-surface);color:var(--color-text-dim);font-family:var(--font-mono);font-size:.55rem;cursor:pointer;margin-left:auto;outline:none}.sound-shaper-mode-btn:hover{border-color:var(--color-text);color:var(--color-text)}.sound-shaper-mode-btn--sample{color:var(--color-lead);border-color:var(--color-lead)}.sound-shaper-filename{font-size:.55rem;color:var(--color-text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;text-align:center}.metronome{display:flex;align-items:center;gap:.5rem}.metronome-toggle{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-dim);font-family:var(--font-mono);font-size:var(--font-size-sm);padding:.25rem .5rem;border-radius:4px;cursor:pointer;transition:all 80ms ease-out;-webkit-user-select:none;user-select:none}.metronome-toggle:hover{border-color:var(--color-text-dim)}.metronome-toggle--active{background:var(--color-accent, var(--color-hihat));color:var(--color-bg);border-color:var(--color-accent, var(--color-hihat))}.metronome-toggle:active{transform:scale(.95);transition:transform 50ms ease-out}.metronome-dots{display:flex;gap:4px;align-items:center}.metronome-dot{width:8px;height:8px;border-radius:50%;background:var(--color-surface);border:1px solid var(--color-border);transition:background 80ms ease-out,box-shadow 80ms ease-out}.metronome-dot--active{background:var(--color-accent, var(--color-hihat));box-shadow:0 0 6px var(--color-accent, var(--color-hihat))}.mute-scenes{display:flex;align-items:center;gap:4px;margin-top:.5rem}.mute-scenes-label{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text-dim);text-transform:uppercase;margin-right:4px}.mute-scene-btn{width:28px;height:28px;border-radius:4px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-dim);font-family:var(--font-mono);font-size:var(--font-size-sm);cursor:pointer;transition:all 80ms ease-out;outline:none;padding:0}.mute-scene-btn:hover{border-color:var(--color-text);color:var(--color-text)}.mute-scene-btn--filled{border-color:var(--color-hihat);color:var(--color-text)}.mute-scene-btn--active{background:var(--color-hihat);color:var(--color-bg);border-color:var(--color-hihat);box-shadow:0 0 6px var(--color-hihat)}.mute-scene-btn:active{transform:scale(.95);transition:transform 50ms ease-out}.mute-scene-tooltip{position:fixed;z-index:1500;background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;padding:4px 8px;font-family:var(--font-mono);font-size:.65rem;color:var(--color-text);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease-out;box-shadow:0 2px 8px #0000004d}.mute-scene-tooltip--visible{opacity:1}.mute-scene-tooltip-dim{color:var(--color-text-dim)}@media(max-width:480px){.mute-scenes{display:none}}.pattern-library-overlay{position:fixed;inset:0;z-index:1000;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease-out}.pattern-library-overlay--visible{opacity:1;pointer-events:auto}.pattern-library-modal{background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;padding:1.5rem;width:90%;max-width:500px;max-height:80vh;display:flex;flex-direction:column;gap:1rem;animation:modal-slide-in .3s ease-out}.pattern-library-title-bar{display:flex;align-items:center;justify-content:space-between}.pattern-library-title{font-family:var(--font-mono);font-size:1rem;font-weight:700;color:var(--color-text);text-transform:uppercase;letter-spacing:.1em}.pattern-library-close{background:none;border:none;color:var(--color-text-dim);font-size:1.5rem;cursor:pointer;padding:0 4px;line-height:1}.pattern-library-close:hover{color:var(--color-text)}.pattern-library-save-row{display:flex;gap:.5rem}.pattern-library-name-input{flex:1;background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text);font-family:var(--font-mono);font-size:var(--font-size-sm);padding:.4rem .6rem;outline:none}.pattern-library-name-input:focus{border-color:var(--color-lead)}.pattern-library-save-btn,.pattern-library-import-btn{background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text);font-family:var(--font-mono);font-size:var(--font-size-sm);padding:.4rem .8rem;cursor:pointer;transition:all 80ms ease-out}.pattern-library-save-btn:hover{background:var(--color-lead);border-color:var(--color-lead);color:#fff}.pattern-library-import-btn:hover{border-color:var(--color-text)}.pattern-library-list{overflow-y:auto;max-height:50vh;display:flex;flex-direction:column;gap:.4rem}.pattern-library-empty{text-align:center;color:var(--color-text-dim);font-family:var(--font-mono);font-size:var(--font-size-sm);padding:2rem}.pattern-library-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .6rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px}.pattern-library-item--factory{border-color:var(--color-text-dim)}.pattern-library-item-info{display:flex;flex-direction:column;gap:2px}.pattern-library-item-name{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text)}.pattern-library-item-date{font-family:var(--font-mono);font-size:.6rem;color:var(--color-text-dim)}.pattern-library-item-actions{display:flex;gap:4px}.pattern-library-action-btn{background:var(--color-bg);border:1px solid var(--color-border);border-radius:3px;color:var(--color-text-dim);font-family:var(--font-mono);font-size:.65rem;padding:3px 8px;cursor:pointer;transition:all 80ms ease-out}.pattern-library-action-btn:hover{border-color:var(--color-text);color:var(--color-text)}.pattern-library-action-btn--danger:hover{border-color:var(--color-kick);color:var(--color-kick)}.auto-lane{display:none;align-items:stretch;gap:var(--cell-gap);height:0;overflow:hidden;opacity:0;transition:height var(--transition-med),opacity var(--transition-med)}.auto-lane--visible{display:flex;height:32px;opacity:1}.auto-lane__header{display:flex;align-items:center;justify-content:flex-end;gap:2px;flex-shrink:0;padding-right:2px}.auto-lane__spacer--label{width:56px;flex-shrink:0}.auto-lane__spacer--pitch{width:66px;flex-shrink:0}.auto-lane__spacer--mixer{width:134px;flex-shrink:0}.auto-lane__spacer--euc,.auto-lane__spacer--piano{width:22px;flex-shrink:0}.auto-lane__param-btn{font-family:var(--font-mono);font-size:7px;padding:2px 3px;border:1px solid var(--color-border);border-radius:2px;background:var(--color-surface);color:var(--color-text-dim);cursor:pointer;outline:none;line-height:1;text-transform:uppercase;flex-shrink:0}.auto-lane__param-btn:hover{border-color:var(--color-text);color:var(--color-text)}.auto-lane__param-btn--active{border-color:var(--auto-color);color:var(--auto-color);background:var(--color-surface-light, rgba(255, 255, 255, .05))}.auto-lane__grid{display:flex;gap:var(--cell-gap);align-items:flex-end;flex:0 0 auto}.auto-lane__step{width:var(--cell-size);height:100%;position:relative;cursor:crosshair;background:var(--color-surface);border:1px solid var(--color-border);border-radius:2px;display:flex;align-items:flex-end;flex-shrink:0}.auto-lane__step--beat-start{margin-left:4px}.auto-lane__step--playing{border-color:#ffffff40}.auto-lane__bar{width:100%;background:var(--auto-color, var(--color-text));border-radius:1px;pointer-events:none;opacity:.7;min-height:0}.auto-lane__step--pan{align-items:center}.auto-lane__step--pan .auto-lane__bar{position:absolute;left:0;width:100%}.auto-lane__step--beyond-length{opacity:.15;pointer-events:none}@media(pointer:coarse){.auto-lane__step{touch-action:none}}@media(max-width:768px){.auto-lane__spacer--pitch,.auto-lane__spacer--mixer,.auto-lane__spacer--euc,.auto-lane__spacer--piano{display:none}.auto-lane__spacer--label{width:40px}}@media(max-width:480px){.auto-lane__spacer--label{width:32px}}.touch-fab{display:none;position:fixed;bottom:5rem;right:1rem;width:48px;height:48px;border-radius:50%;border:2px solid var(--color-border);background:var(--color-surface);color:var(--color-text-dim);font-size:1.2rem;cursor:pointer;z-index:900;box-shadow:0 4px 12px #00000080;transition:all var(--transition-med)}@media(pointer:coarse){.touch-fab{display:flex;align-items:center;justify-content:center}}.touch-fab--active{border-color:var(--color-lead);color:var(--color-lead);background:var(--color-surface-light);box-shadow:0 0 12px #63f6}.touch-toolbar{position:fixed;z-index:960;display:none;flex-wrap:wrap;gap:4px;padding:6px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;box-shadow:0 4px 16px #0009;max-width:220px}.touch-toolbar--visible{display:flex}.touch-toolbar__btn{padding:8px 10px;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface-light);color:var(--color-text);font-family:var(--font-mono);font-size:.65rem;cursor:pointer;outline:none;min-width:36px;text-align:center;transition:background var(--transition-fast),border-color var(--transition-fast)}.touch-toolbar__btn:active{background:var(--color-border);border-color:var(--color-text)}.touch-toolbar__btn--active{border-color:var(--color-lead);color:var(--color-lead)}.tour-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:2100;pointer-events:none;opacity:0;transition:opacity .3s ease-out}.tour-overlay--visible{opacity:1;pointer-events:auto}.tour-spotlight{position:fixed;border-radius:6px;box-shadow:0 0 0 9999px #000000bf;pointer-events:none;transition:left .25s ease-out,top .25s ease-out,width .25s ease-out,height .25s ease-out}.tour-card{position:fixed;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:14px 16px;box-shadow:0 8px 24px #00000080;pointer-events:auto;transition:left .25s ease-out,top .25s ease-out,bottom .25s ease-out}.tour-card__text{font-family:var(--font-mono);font-size:.75rem;color:var(--color-text);line-height:1.5;margin-bottom:12px}.tour-card__nav{display:flex;align-items:center;gap:8px}.tour-card__step{font-family:var(--font-mono);font-size:.6rem;color:var(--color-text-dim)}.tour-card__skip,.tour-card__next{font-family:var(--font-mono);font-size:.65rem;border:1px solid var(--color-border);border-radius:4px;padding:4px 12px;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.tour-card__skip{background:transparent;color:var(--color-text-dim)}.tour-card__skip:hover{background:var(--color-surface-light);color:var(--color-text)}.tour-card__next{background:var(--color-kick);color:#fff;border-color:var(--color-kick)}.tour-card__next:hover{filter:brightness(1.15)}@media(max-width:480px){.tour-card{left:8px!important;right:8px;width:auto!important}}.shortcut-hint{position:fixed;z-index:1400;background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;padding:4px 10px;font-family:var(--font-mono);font-size:.55rem;color:var(--color-text-dim);white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%);transition:opacity .15s ease-out;box-shadow:0 2px 8px #0000004d}.shortcut-hint--visible{opacity:1}@media(pointer:coarse){.shortcut-hint{display:none}}button:focus-visible,select:focus-visible,input:focus-visible,[role=slider]:focus-visible{outline:2px solid var(--color-text);outline-offset:2px}.grid-cell:focus-visible{outline:2px solid var(--color-text)!important;outline-offset:-2px;z-index:1}.grid-cell--focused{outline:2px solid var(--color-text)!important;outline-offset:-2px;z-index:2}.bank-btn:focus-visible{outline:2px solid var(--color-text);outline-offset:2px}.theme-card:focus-visible{outline:2px solid var(--color-text);outline-offset:2px}.transport-play-btn:focus-visible,.tap-btn:focus-visible{outline:2px solid var(--color-text);outline-offset:2px}.pitch-btn:focus-visible{outline:2px solid var(--color-text)!important;outline-offset:1px}.grid-euc-btn:focus-visible,.grid-piano-btn:focus-visible{outline:2px solid var(--color-text)!important;outline-offset:1px}.grid-step-label:focus-visible{outline:2px solid var(--color-text)!important;outline-offset:-1px}.help-search:focus-visible{outline:2px solid var(--color-text)!important;outline-offset:1px}.mute-scene-btn:focus-visible{outline:2px solid var(--color-text);outline-offset:1px}.scale-select:focus-visible{outline:2px solid var(--color-text);outline-offset:1px}@media(prefers-reduced-motion:reduce){.grid-cell--triggered,.grid--switching .grid-cell--active,.grid-cell--flash,.help-overlay--visible .help-panel,.piano-roll-overlay--visible .piano-roll-panel,#app{animation:none!important}.toast,.grid-playhead-bar,.tour-spotlight,.tour-card{transition:none!important}.bank-btn--queued{animation:none!important}.midi-activity-dot{animation:none!important;transition:none!important}.perf-fx-led--active{animation:none!important}.shortcut-hint{transition:none!important}.knob-btn{animation:none!important}.transport-play-btn:active,.tap-btn:active,.grid-euc-btn:active,.grid-piano-btn:active,.pitch-btn:active{transition:none!important}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:var(--color-bg);color:var(--color-text);font-family:var(--font-mono);font-size:var(--font-size-base);-webkit-font-smoothing:antialiased;overflow-x:hidden}#app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem;gap:1.5rem;animation:app-fade-in .4s ease-out}.app-header{text-align:center;-webkit-user-select:none;user-select:none}.app-title{font-size:1.5rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;background:linear-gradient(135deg,var(--color-kick),var(--color-lead),var(--color-bass));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-subtitle{font-size:var(--font-size-sm);color:var(--color-text-dim);margin-top:.25rem}.controls-row{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;justify-content:center}.section-label{font-size:var(--font-size-sm);color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}.transport-play-btn:active,.tap-btn:active,.grid-euc-btn:active,.grid-piano-btn:active,.pitch-btn:active,.share-btn:active,.export-btn:active,.help-btn:active,.midi-btn:active{transform:scale(.95);transition:transform 50ms ease-out}.grid--switching .grid-cell--active{animation:bank-switch-flash .2s ease-out}.reactive-bg-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}@media(max-width:768px){#app{padding:1rem .5rem;gap:1rem}.controls-row{gap:1rem}.app-title{font-size:1.2rem}}@media(max-width:480px){#app{padding:.5rem;gap:.75rem}.app-header{display:none}.controls-row{gap:.5rem;font-size:.65rem}}