:root{--bg-primary: #0a0a0a;--bg-secondary: #141414;--bg-tertiary: #1e1e1e;--accent-primary: #d46542;--accent-secondary: #cb892b;--accent-tertiary: #50cf7a;--text-primary: #ffffff;--text-secondary: #888888;--text-muted: #555555;--step-off: #2a2a2a;--step-active: var(--accent-primary);--step-current: rgba(255, 255, 255, .15);--step-border: #3a3a3a;--step-size: 44px;--gap: 6px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--font-mono: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;--font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif}[data-theme=day]{--bg-primary: #d0d0c5;--bg-secondary: #c8c8c0;--bg-tertiary: #9a9a96;--text-primary: #0e0e0e;--text-secondary: #404040;--text-muted: #343434;--step-off: #d0d0cb;--step-border: #9c9c96}[data-theme=day] h1,[data-theme=day] .track-label,[data-theme=day] .help-btn,[data-theme=day] .shortcut-help-header h3,[data-theme=day] .shortcut-key{color:var(--text-primary)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow-y:auto}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);display:flex;justify-content:center;align-items:flex-start;padding:16px;transition:background-color .3s ease,color .3s ease}#root{width:100%;min-height:100%;overflow:visible}.container{max-width:1200px;width:100%;min-height:100%;display:flex;flex-direction:column;overflow:visible;padding-bottom:20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding:0 4px}h1{font-family:var(--font-mono);font-size:1.4rem;font-weight:600;color:var(--accent-primary);text-transform:uppercase;letter-spacing:6px;margin:0}.theme-toggle{display:flex;align-items:center;gap:8px;background:var(--bg-secondary);padding:6px 12px;border-radius:20px;cursor:pointer;border:1px solid var(--step-border);transition:all .2s ease}.theme-toggle:hover{border-color:var(--accent-primary)}.theme-toggle-track{width:36px;height:18px;background:var(--bg-tertiary);border-radius:9px;position:relative;transition:background-color .2s ease}.theme-toggle-thumb{width:14px;height:14px;background:var(--accent-primary);border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .2s ease}[data-theme=day] .theme-toggle-thumb{transform:translate(18px)}.theme-toggle-label{font-family:var(--font-mono);font-size:.65rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;width:32px;text-align:center}.pro-mode-toggle{display:flex;align-items:center;gap:8px;background:var(--bg-secondary);padding:6px 12px;border-radius:20px;cursor:pointer;border:1px solid var(--step-border);transition:all .2s ease}.pro-mode-toggle:hover{border-color:var(--accent-primary)}.pro-mode-toggle-track{width:36px;height:18px;background:var(--bg-tertiary);border-radius:9px;position:relative;transition:background-color .2s ease}.pro-mode-toggle-thumb{width:14px;height:14px;background:var(--accent-primary);border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .2s ease}:has(.pro-mode-panel) .pro-mode-toggle-thumb{transform:translate(18px)}.pro-mode-toggle-label{font-family:var(--font-mono);font-size:.65rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;width:32px;text-align:center}.controls{display:flex;justify-content:flex-start;align-items:center;gap:20px;margin-bottom:16px;padding:12px 16px;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--step-border)}.controls button{padding:10px 28px;font-family:var(--font-mono);font-size:.8rem;font-weight:600;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;text-transform:uppercase;letter-spacing:2px}.controls button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0000004d}.controls button:active{transform:translateY(0)}.control-group{display:flex;flex-direction:column;gap:4px}.control-group label{font-family:var(--font-mono);color:var(--text-secondary);font-size:.55rem;text-transform:uppercase;letter-spacing:1px;opacity:.7}.controls input[type=range]{width:150px;cursor:pointer;touch-action:none}.controls input[type=range].swing-slider{width:120px}.pro-mode-panel{margin-bottom:16px;padding:16px;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--accent-primary);box-shadow:0 0 12px #ff572233}.pro-section{margin-bottom:16px;padding:12px;background:var(--bg-tertiary);border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.05)}.pro-section:last-child{margin-bottom:0}.pro-section h3{font-family:var(--font-mono);font-size:.7rem;font-weight:600;text-transform:uppercase;color:var(--accent-primary);letter-spacing:1.5px;margin-bottom:12px}.pro-params{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.pro-param-item{display:flex;flex-direction:column;gap:4px}.pro-param-item label{font-family:var(--font-mono);font-size:.5rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-left:2px}.radio-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--font-mono);font-size:.5rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.radio-toggle input{display:none}.radio-toggle-check{width:12px;height:12px;border-radius:50%;border:1px solid var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:all .2s ease}.radio-toggle input:checked+.radio-toggle-check{border-color:var(--accent-primary);background:#ff572233}.radio-toggle input:checked+.radio-toggle-check:after{content:"";width:6px;height:6px;background:var(--accent-primary);border-radius:50%}.radio-toggle:hover .radio-toggle-check{border-color:var(--text-primary)}.pro-param-item input[type=range]{width:100%;height:6px;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent;touch-action:none}.pro-param-item input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;background:#333;border-radius:2px}[data-theme=day] .pro-param-item input[type=range]::-webkit-slider-runnable-track{background:#ddd}.pro-param-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:12px;width:12px;border-radius:50%;background:var(--accent-primary);margin-top:-4px;transition:transform .1s ease}.pro-param-item input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.1)}.pro-param-item input[type=range]:disabled,.pro-param-item select:disabled{opacity:.3;cursor:not-allowed}.radio-toggle input:disabled+.radio-toggle-check{opacity:.5;cursor:not-allowed}[data-theme=day] .pro-mode-panel{border-color:var(--accent-primary);box-shadow:0 0 8px #ff572226}[data-theme=day] .pro-section{background:#00000008;border-color:#00000014}.sequencer-grid{display:flex;flex-direction:column;gap:8px;flex:1;overflow:hidden}.track-container{background:var(--bg-secondary);border-radius:var(--radius-md);padding:10px 14px;display:flex;gap:8px;align-items:flex-start;border:1px solid var(--step-border);transition:border-color .15s ease}.track-container:hover{border-color:var(--text-muted)}.track-container.bass-container{background:linear-gradient(135deg,var(--bg-secondary) 0%,rgba(255,87,34,.05) 100%)}.track-controls{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-width:160px}.track-controls label{font-family:var(--font-mono);color:var(--text-secondary);font-size:.5rem;text-transform:uppercase;letter-spacing:.5px;opacity:.7}.track-controls input[type=range]{width:70px;cursor:pointer}.track-utils-column{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.mute-solo-row{display:flex;gap:6px}.sends-row{display:flex;gap:8px;justify-content:flex-end}.eq-row{display:flex;gap:4px;justify-content:flex-end}.control-pill-group{background:#ffffff08;padding:4px 8px;border-radius:20px;border:1px solid rgba(255,255,255,.05)}[data-theme=day] .control-pill-group{background:#0000000d;border-color:#00000014}.knob-label{font-family:var(--font-mono);font-size:.45rem;color:var(--text-secondary);text-transform:uppercase}.ms-btn{width:30px;height:30px;border:1px solid var(--step-border);background:transparent;color:var(--text-secondary);font-family:var(--font-mono);font-size:.7rem;font-weight:600;cursor:pointer;border-radius:var(--radius-sm);transition:all .1s ease}.ms-btn:hover{border-color:var(--text-primary);color:var(--text-primary)}.ms-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#000}.knob-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.knob-row label{font-family:var(--font-mono);color:var(--text-secondary);font-size:.5rem;text-transform:uppercase;letter-spacing:.5px;opacity:.7}.vol-label{min-width:60px;display:inline-block;white-space:nowrap}.track-container{display:flex;flex-direction:row;align-items:stretch;padding:6px 10px;gap:12px}.track-left-section{display:flex;flex-direction:column;flex:1;gap:4px}.track-right-section{display:flex;flex-direction:row;align-items:stretch;gap:24px;flex-shrink:0}.track-header{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:42px}.track-identity{display:flex;align-items:center;gap:12px;min-width:110px}.track-label{min-width:40px}.mute-solo-group{display:flex;gap:4px}.track-params{display:flex;align-items:center;gap:16px;flex:1;padding:0 12px;border-left:1px solid rgba(255,255,255,.05);border-right:1px solid rgba(255,255,255,.05)}.param-item{display:flex;flex-direction:column;gap:2px;align-items:flex-start}.param-item label{font-family:var(--font-mono);font-size:.5rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-left:2px}.param-item input[type=range]{width:100px;height:6px;touch-action:none}.track-sends-eq{display:flex;align-items:center;gap:8px}.sends-group{display:flex;gap:8px;margin-right:8px}.eq-group{display:flex;gap:4px}.vertical-slider-container{display:flex;flex-direction:column;align-items:center;gap:4px}.vertical-slider-container label{font-family:var(--font-mono);font-size:.5rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.vertical-slider{-webkit-appearance:slider-vertical;appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;width:24px;height:80px;background:var(--bg-tertiary);border-radius:12px;cursor:pointer;padding:0;margin:0;touch-action:none}.vertical-slider.volume-slider{height:100px}.vertical-slider.send-slider{height:70px}.vertical-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:var(--accent-primary);border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000004d}.vertical-slider::-moz-range-thumb{width:20px;height:20px;background:var(--accent-primary);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 4px #0000004d}.vertical-controls-group{display:flex;flex-direction:row;gap:12px;align-items:flex-end;padding:6px 12px;background:#ffffff05;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.03)}[data-theme=day] .vertical-controls-group{background:#00000008;border-color:#0000000d}.track-main-row{display:flex;align-items:stretch;gap:12px;width:100%;height:100%}.track-grid-row{flex:1;padding-top:2px}.track-gain-column{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:4px;padding:6px 8px 4px;background:#ffffff05;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.03);width:50px}.track-gain-column .gain-slider{flex:1;min-height:60px}.track-gain-column .gain-label{font-family:var(--font-mono);font-size:.5rem;color:var(--text-secondary);text-transform:uppercase;white-space:nowrap}[data-theme=day] .track-gain-column{background:#00000008;border-color:#0000000d}.track-eq-sends-column{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px 4px;background:#ffffff05;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.03)}[data-theme=day] .track-eq-sends-column{background:#00000008;border-color:#0000000d}.track-eq-sends-column .eq-row{display:flex;gap:4px;border:1px solid var(--step-border);padding:4px;border-radius:var(--radius-sm)}.track-eq-sends-column .sends-row{display:flex;gap:6px;justify-content:center}.steps-container{display:flex;justify-content:flex-start}.bass-steps-container,.pad-steps-container{display:flex;justify-content:flex-start;margin-left:60px}.break-row{display:none}.track{display:flex;align-items:center;gap:12px;flex:1}.track-main{display:flex;flex-direction:column;gap:6px;flex:1;justify-content:center}.track-label{font-family:var(--font-mono);font-size:.7rem;font-weight:600;text-transform:uppercase;color:var(--accent-primary);letter-spacing:1px;white-space:nowrap}.step-group{display:flex;gap:var(--gap);background:var(--bg-tertiary);padding:4px 6px;border-radius:var(--radius-sm)}.steps-container{display:flex;gap:8px;margin-left:60px}.step{width:var(--step-size);height:var(--step-size);background:var(--step-off);border:1px solid var(--step-border);border-radius:var(--radius-sm);cursor:pointer;transition:all .08s ease;touch-action:none}.step:hover{border-color:var(--accent-primary);transform:scale(1.02)}.step.active{background:var(--step-active);border-color:var(--accent-primary);box-shadow:0 0 8px #ff572266;position:relative}.step-velocity{position:absolute;bottom:2px;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:.55rem;color:#000;pointer-events:none;font-weight:600;-webkit-user-select:none;user-select:none}.step.current{border-left:3px solid rgba(255,255,255,.8);background-color:transparent}.step.active.current{background-color:var(--accent-primary);border-left:3px solid #fff}.step.adjusting{box-shadow:0 0 12px #ffffff80;transform:scale(1.05)}.bass-steps-container{display:flex;gap:8px}.step-group.bass-group{display:flex;gap:var(--gap);background:var(--bg-tertiary);padding:4px 6px;border-radius:var(--radius-sm)}.bass-step-wrapper{display:flex;flex-direction:column;align-items:center;gap:3px}.note-select{width:var(--step-size);padding:2px;font-family:var(--font-mono);font-size:.55rem;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--step-border);border-radius:var(--radius-sm);cursor:pointer;text-align:center;transition:all .1s ease;touch-action:none}.note-select:hover{border-color:var(--accent-primary)}.note-select:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 4px #ff57224d}.track-container.pad-container{background:linear-gradient(135deg,var(--bg-secondary) 0%,rgba(100,149,237,.08) 100%)}.pad-steps-container{display:flex;gap:8px}.step-group.pad-group{display:flex;gap:var(--gap);background:var(--bg-tertiary);padding:4px 6px;border-radius:var(--radius-sm)}.pad-step-wrapper{display:flex;flex-direction:column;align-items:center;gap:3px}.voicing-select{width:var(--step-size);padding:2px;font-family:var(--font-mono);font-size:.45rem;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--step-border);border-radius:var(--radius-sm);cursor:pointer;text-align:center;transition:all .1s ease}.voicing-select:hover{border-color:#6495ed99}.voicing-select:focus{outline:none;border-color:#6495edcc;box-shadow:0 0 4px #6495ed4d}.pad-note-chord-row{display:flex;align-items:center;gap:2px}.pad-note-chord-row .note-display{min-width:22px}.pad-note-chord-row .voicing-select{width:auto;min-width:28px;font-size:.4rem}.note-stepper{display:flex;align-items:center;gap:2px;touch-action:none}.note-stepper-btn{width:20px;height:20px;border:1px solid var(--step-border);background:var(--bg-tertiary);color:var(--text-primary);font-family:var(--font-mono);font-size:.9rem;font-weight:700;cursor:pointer;border-radius:var(--radius-sm);transition:all .1s ease;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.note-stepper-btn:hover{border-color:var(--accent-primary);background:var(--accent-primary);color:#000}.note-stepper-btn:active{transform:scale(.95)}.note-stepper .note-display{min-width:28px;text-align:center;font-family:var(--font-mono);font-size:.55rem;color:var(--text-primary);background:var(--bg-tertiary);padding:3px 4px;border-radius:var(--radius-sm);border:1px solid var(--step-border)}input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:var(--bg-tertiary);border-radius:2px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--accent-primary);border-radius:50%;cursor:pointer;transition:transform .1s ease;box-shadow:0 2px 4px #0000004d}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--accent-primary);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 4px #0000004d}::-webkit-scrollbar{display:none}*{-ms-overflow-style:none;scrollbar-width:none}.visualizer-container{display:flex;justify-content:center;align-items:stretch;margin-top:12px;padding:0;background:var(--bg-tertiary);border-radius:var(--radius-sm);border:1px solid var(--step-border);box-shadow:inset 0 2px 4px #0006,0 1px #ffffff0d;overflow:hidden;height:120px}.visualizer-canvas{width:100%;height:100%;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;background:transparent;display:block}@media(max-width:1024px){html{height:auto;overflow-y:auto}body{height:auto;overflow-y:auto;padding:8px}#root{height:auto;overflow:visible}.container{padding:8px;height:auto;overflow:visible;max-width:100%}.sequencer-grid{overflow:visible;flex:none}.track-container{padding:8px;gap:6px}.controls{flex-wrap:wrap;justify-content:space-between}.visualizer-container{flex:none;min-height:60px;max-height:80px}.track-header{flex-wrap:wrap;gap:8px}.track-sends-eq{gap:12px}.sends-group,.eq-group{gap:10px}.knob-container{transform:scale(1.15);transform-origin:center;margin:4px}.track-grid-row{padding-left:0}.steps-container,.bass-steps-container,.pad-steps-container{margin-left:0}}@media(max-width:768px){body{padding:8px;font-size:14px}.container{padding:0}.header{margin-bottom:8px;padding:0 8px;flex-wrap:wrap;gap:8px}h1{font-size:1rem;letter-spacing:3px}.theme-toggle,.pro-mode-toggle{padding:4px 8px;gap:4px}.theme-toggle-label,.pro-mode-toggle-label{font-size:.55rem;width:24px}.theme-toggle-track,.pro-mode-toggle-track{width:28px;height:14px}.theme-toggle-thumb,.pro-mode-toggle-thumb{width:10px;height:10px}.help-btn{width:32px;height:32px;min-width:32px}.controls{flex-wrap:wrap;gap:8px;padding:10px;margin:0 0 8px}.controls button{padding:12px 24px;font-size:.9rem;min-height:44px;flex:1;min-width:100px}.control-group{flex:1;min-width:100px}.control-group label{font-size:.55rem}.controls input[type=range],.controls input[type=range].swing-slider{width:100%;min-width:80px;height:24px}.scene-selector{padding:10px;gap:8px;margin:0 0 8px}.scene-selector-top{flex-direction:column;align-items:stretch;gap:8px}.scene-label{text-align:center;font-size:.55rem}.scene-global-actions{flex-wrap:wrap;justify-content:center;gap:6px}.scene-action-btn{padding:8px 12px;font-size:.6rem;min-height:36px}.scene-buttons{justify-content:center;flex-wrap:wrap;gap:6px}.scene-btn{width:40px;height:40px;font-size:.75rem}.scene-divider{display:none}.track-container{flex-direction:column;align-items:stretch;padding:10px;gap:8px}.track-left-section{width:100%}.track-right-section{flex-direction:row;align-items:center;justify-content:space-between;width:100%;padding:8px;background:#ffffff05;border-radius:var(--radius-sm);gap:12px;flex-wrap:wrap}[data-theme=day] .track-right-section{background:#00000008}.track-gain-column{flex-direction:row;align-items:center;gap:8px;padding:6px 10px;width:auto;flex:1;min-width:120px}.track-gain-column .vertical-slider.gain-slider{-webkit-appearance:none;appearance:none;writing-mode:horizontal-tb;direction:ltr;width:100%;height:24px;min-height:24px}.track-gain-column .gain-label{white-space:nowrap;min-width:45px}.track-eq-sends-column{flex-direction:row;align-items:center;gap:12px;padding:6px 10px;flex-wrap:wrap;justify-content:center}.track-eq-sends-column .eq-row,.track-eq-sends-column .sends-row{gap:8px}.track-header{flex-wrap:wrap;gap:8px;min-height:auto}.track-identity{min-width:auto;gap:8px}.track-label{font-size:.85rem;min-width:50px}.mute-solo-group{gap:4px}.ms-btn{width:40px;height:40px;font-size:.85rem;min-width:40px}.track-params{flex-wrap:wrap;gap:8px;padding:8px 0;border-left:none;border-right:none;border-top:1px solid rgba(255,255,255,.05);width:100%}.param-item{flex:1 0 45%;min-width:100px}.param-item label{font-size:.55rem}.param-item input[type=range]{width:100%;height:24px;min-height:24px}.track-grid-row{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}.steps-container,.bass-steps-container,.pad-steps-container{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px;margin-left:0;scroll-snap-type:x mandatory;gap:8px}.step-group{scroll-snap-align:start;flex-shrink:0}.step{width:40px;height:40px;flex-shrink:0;min-width:40px}.step-velocity{font-size:.55rem}.bass-step-wrapper .step,.pad-step-wrapper .step{width:38px;height:38px;min-width:38px}.bass-step-wrapper,.pad-step-wrapper{flex-shrink:0}.note-select,.voicing-select{width:40px;font-size:.55rem;padding:4px 2px;min-height:28px}.note-stepper{gap:2px}.note-stepper-btn{width:28px;height:28px;font-size:1.1rem;min-width:28px}.piano-roll-container{height:200px;margin-top:8px;overflow:hidden}.piano-keys{width:45px}.piano-key{height:18px;font-size:.5rem;padding-left:4px}.piano-grid-scroll{-webkit-overflow-scrolling:touch}.piano-row{height:18px}.piano-cell{width:36px;min-width:36px}.knob-container{transform:none;margin:0}.track-eq-sends-column .knob-container{min-width:36px}.visualizer-container{height:80px;min-height:80px;max-height:80px;margin-top:8px}.pro-mode-panel{padding:10px;margin:0 0 8px}.pro-section{padding:10px;margin-bottom:10px}.pro-section h3{font-size:.65rem;margin-bottom:10px}.pro-params{grid-template-columns:1fr;gap:10px}.pro-param-item input[type=range]{height:24px}.radio-toggle{font-size:.55rem}.radio-toggle-check{width:16px;height:16px}}@media(max-width:400px){h1{font-size:.85rem;letter-spacing:2px}.controls button{padding:10px 16px;font-size:.75rem}.scene-btn{width:36px;height:36px}.scene-action-btn{padding:6px 8px;font-size:.5rem}.step{width:36px;height:36px}.note-select,.voicing-select{width:36px;font-size:.5rem}.param-item{flex:1 0 100%}.track-right-section{flex-direction:column;gap:8px}.track-gain-column{width:100%}.track-eq-sends-column{width:100%;justify-content:space-evenly}}@media(max-width:1024px)and (orientation:landscape){.steps-container{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;overflow:visible}.step-group{display:flex;justify-content:center;gap:var(--gap);background:var(--bg-tertiary);padding:6px 10px;border-radius:var(--radius-sm)}.bass-steps-container,.pad-steps-container{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;overflow:visible}.step-group.bass-group,.step-group.pad-group{display:flex;justify-content:center;gap:var(--gap);padding:6px 10px}.step{width:48px;height:48px;min-width:48px}.bass-step-wrapper .step,.pad-step-wrapper .step{width:44px;height:44px;min-width:44px}}@media(max-width:600px){.track-grid-row{overflow:visible}.steps-container{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;overflow:visible;scroll-snap-type:none}.step-group{flex:0 0 100%;display:flex;justify-content:center;gap:var(--gap);background:var(--bg-tertiary);padding:8px 12px;border-radius:var(--radius-sm)}.step{width:52px;height:52px;min-width:52px}.bass-steps-container,.pad-steps-container{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;overflow:visible;scroll-snap-type:none}.step-group.bass-group,.step-group.pad-group{flex:0 0 100%;display:flex;justify-content:center;gap:var(--gap);padding:6px 10px}.bass-step-wrapper .step,.pad-step-wrapper .step{width:44px;height:44px;min-width:44px}.note-select,.voicing-select{width:44px;font-size:.55rem;min-height:30px}.note-stepper-btn{width:32px;height:32px;min-width:32px;font-size:1.2rem}.piano-roll-container{height:180px}.piano-cell{width:40px;min-width:40px}}.visualizer-toggle{display:flex;align-items:center;gap:6px;background:#0000004d;padding:4px 8px;border-radius:14px;cursor:pointer;border:1px solid transparent;transition:all .2s ease;position:absolute;bottom:8px;left:8px;z-index:10}.visualizer-toggle:hover{border-color:var(--accent-primary);background:#00000080}.visualizer-toggle-track{width:28px;height:14px;background:var(--bg-primary);border-radius:7px;position:relative;transition:background-color .2s ease}.visualizer-toggle-thumb{width:10px;height:10px;background:var(--text-secondary);border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .2s ease,background-color .2s ease}.visualizer-toggle.active .visualizer-toggle-thumb{transform:translate(14px);background:var(--accent-primary)}.visualizer-toggle-label{font-family:var(--font-mono);font-size:.55rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;min-width:20px;text-align:right}.scene-selector{display:flex;flex-direction:column;gap:12px;padding:12px 16px;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--step-border);margin-bottom:12px}.scene-selector-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}.scene-global-actions{display:flex;align-items:center;gap:6px}.scene-action-btn{padding:4px 10px;font-family:var(--font-mono);font-size:.6rem;font-weight:600;text-transform:uppercase;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--step-border);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;letter-spacing:1px}.scene-action-btn:hover{border-color:var(--accent-primary);color:var(--text-primary);background:var(--bg-primary)}.scene-divider{width:1px;height:14px;background:var(--step-border);margin:0 4px}.scene-label{font-family:var(--font-mono);font-size:.6rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:2px}.scene-buttons{display:flex;gap:6px}.scene-btn{position:relative;width:32px;height:32px;border:1px solid var(--step-border);background:var(--bg-tertiary);color:var(--text-secondary);font-family:var(--font-mono);font-size:.65rem;font-weight:600;cursor:pointer;border-radius:var(--radius-sm);transition:all .1s ease;display:flex;align-items:center;justify-content:center}.scene-btn:hover{border-color:var(--accent-primary);transform:translateY(-1px)}.scene-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#000;box-shadow:0 0 8px #ff572299}.scene-btn.has-data .scene-btn-label:after{content:"";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:3px;height:3px;background:var(--accent-primary);border-radius:50%}.scene-btn.active.has-data .scene-btn-label:after{background:#000}.scene-btn:active{transform:translateY(0)}.scene-indicator{position:absolute;bottom:2px;font-size:.8rem;line-height:0}.sequencer-grid.transitioning{opacity:.7;transition:opacity .1s ease-in-out}.shortcut-help-backdrop{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.shortcut-help-modal{background:var(--bg-primary);border:2px solid var(--accent-primary);border-radius:var(--radius-md);width:90%;max-width:500px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #0009}.shortcut-help-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--step-border)}.shortcut-help-header h3{font-family:var(--font-mono);font-size:.9rem;font-weight:600;color:var(--accent-primary);text-transform:uppercase;letter-spacing:2px;margin:0}.close-btn{width:32px;height:32px;border:1px solid var(--step-border);background:transparent;color:var(--text-primary);font-size:1.5rem;line-height:1;cursor:pointer;border-radius:var(--radius-sm);transition:all .15s ease;display:flex;align-items:center;justify-content:center}.close-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.shortcut-help-content{padding:20px;overflow-y:auto;flex:1}.shortcut-item{display:flex;align-items:center;gap:16px;padding:8px 0;border-bottom:1px solid var(--bg-tertiary)}.shortcut-item:last-child{border-bottom:none}.shortcut-key{font-family:var(--font-mono);font-size:.65rem;padding:4px 8px;background:var(--bg-tertiary);border:1px solid var(--step-border);border-radius:var(--radius-sm);color:var(--accent-primary);min-width:80px;text-align:center;font-weight:600;letter-spacing:.5px}.shortcut-desc{font-family:var(--font-mono);font-size:.7rem;color:var(--text-primary);flex:1}.shortcut-help-footer{padding:12px 20px;border-top:1px solid var(--step-border);text-align:center}.hint{font-family:var(--font-mono);font-size:.6rem;color:var(--text-secondary);opacity:.7}@keyframes pulse-step{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1.1)}}.step.active.current{background-color:var(--accent-primary);box-shadow:inset 0 0 0 2px #ffffffe6,0 0 20px #ff5722,0 0 30px #ff572299;transform:scale(1.1);animation:pulse-step .15s ease-out}button:active{transform:translateY(1px);box-shadow:inset 0 1px 2px #0000004d}.ms-btn.active{box-shadow:inset 0 0 0 1px var(--accent-primary),0 0 8px #ff572266}.param-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:var(--bg-tertiary);border:1px solid var(--accent-primary);padding:4px 8px;font-family:var(--font-mono);font-size:.6rem;pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap;margin-bottom:4px;border-radius:var(--radius-sm);color:var(--text-primary);z-index:100}.knob-container:hover .param-tooltip,input[type=range]:hover+.param-tooltip{opacity:1}.help-btn{width:28px;height:28px;border:1px solid var(--step-border);background:var(--bg-secondary);color:var(--text-secondary);font-family:var(--font-mono);font-size:.75rem;font-weight:600;cursor:pointer;border-radius:50%;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.help-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:scale(1.05)}.file-btn:active{transform:translateY(0)}.piano-roll-container{display:flex;height:260px;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--step-border);overflow:hidden;position:relative;margin-top:16px}.piano-keys{width:60px;background:var(--bg-tertiary);border-right:1px solid var(--step-border);overflow:hidden;z-index:10;flex-shrink:0}.piano-key{height:20px;display:flex;align-items:center;padding-left:8px;font-family:var(--font-mono);font-size:.6rem;color:var(--text-secondary);border-bottom:1px solid rgba(255,255,255,.05);box-sizing:border-box}.piano-key.black{background:#00000080;color:var(--text-muted)}.piano-grid-scroll{flex:1;overflow:auto;position:relative;background:var(--bg-primary)}.piano-row{display:flex;height:20px;border-bottom:1px solid rgba(255,255,255,.03);box-sizing:border-box}.piano-row.black{background:#ffffff05}.piano-group{display:flex;padding:0 6px 0 0;gap:6px;border-right:1px solid rgba(255,255,255,.1);margin-right:8px}.piano-group:first-child{padding-left:6px}.piano-group:last-child{margin-right:0}.piano-group.alternate{background:#ffffff03}.piano-cell{width:44px;height:100%;cursor:pointer;transition:background .05s ease}.piano-cell:hover{background:#ffffff1a}.piano-cell.active{background:var(--accent-primary);box-shadow:0 0 4px var(--accent-primary)}.piano-cell.current{border-left:3px solid rgba(255,255,255,.8);background:transparent}.piano-cell.active.current{background:var(--accent-primary);border-left:3px solid #fff}[data-theme=day] .piano-key{border-bottom:1px solid rgba(0,0,0,.1)}[data-theme=day] .piano-row{border-bottom:1px solid rgba(0,0,0,.06)}[data-theme=day] .piano-cell{border-right:1px solid rgba(0,0,0,.06)}[data-theme=day] .piano-group{border-right:1px solid rgba(0,0,0,.15)}[data-theme=day] .piano-group.alternate{background:#00000008}[data-theme=day] .piano-cell:hover{background:#0000000d}[data-theme=day] .piano-key.black{background:#0000001a}[data-theme=day] .piano-row.black{background:#00000008}.import-modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.import-modal{background:var(--bg-secondary);border:1px solid var(--step-border);border-radius:var(--radius-lg);padding:24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 8px 32px #0006}.import-modal h2{font-family:var(--font-mono);font-size:1.1rem;font-weight:600;color:var(--accent-primary);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px}.import-modal-info{font-family:var(--font-mono);font-size:.7rem;color:var(--text-secondary);margin-bottom:16px}.import-modal-actions-top{display:flex;gap:8px;margin-bottom:16px}.import-modal-actions-top button{padding:6px 12px;font-family:var(--font-mono);font-size:.65rem;background:var(--bg-tertiary);border:1px solid var(--step-border);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;text-transform:uppercase;letter-spacing:1px}.import-modal-actions-top button:hover{border-color:var(--accent-primary);color:var(--text-primary)}.scene-checkbox-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.scene-checkbox-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg-tertiary);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;border:1px solid transparent}.scene-checkbox-item:hover{border-color:var(--step-border)}.scene-checkbox-item input[type=checkbox]{accent-color:var(--accent-primary);width:16px;height:16px;cursor:pointer}.scene-slot{font-family:var(--font-mono);font-size:.9rem;font-weight:600;color:var(--accent-primary);min-width:20px}.scene-names{display:flex;align-items:center;gap:8px;flex:1;font-family:var(--font-mono);font-size:.75rem}.scene-from{color:var(--text-primary)}.scene-arrow{color:var(--text-muted)}.scene-to{color:var(--text-secondary)}.import-modal-actions{display:flex;justify-content:flex-end;gap:12px}.import-modal .btn-secondary{padding:10px 20px;font-family:var(--font-mono);font-size:.75rem;background:transparent;border:1px solid var(--step-border);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;text-transform:uppercase;letter-spacing:1px}.import-modal .btn-secondary:hover{border-color:var(--text-primary);color:var(--text-primary)}.import-modal .btn-primary{padding:10px 20px;font-family:var(--font-mono);font-size:.75rem;background:var(--accent-primary);border:none;color:#000;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;text-transform:uppercase;letter-spacing:1px;font-weight:600}.import-modal .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff57224d}.import-modal .btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.context-menu{position:fixed;z-index:1000;background:var(--bg-tertiary);border:1px solid var(--step-border);border-radius:var(--radius-sm);padding:4px 0;min-width:140px;box-shadow:0 4px 12px #00000080;animation:fadeIn .1s ease-out}.context-menu-item{padding:8px 16px;font-family:var(--font-mono);font-size:.75rem;color:var(--text-primary);cursor:pointer;transition:background-color .1s ease;display:flex;align-items:center;gap:8px}.context-menu-item:hover{background-color:var(--accent-primary);color:#000}.context-menu-divider{height:1px;background-color:var(--step-border);margin:4px 0}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}