*{box-sizing:border-box;margin:0;padding:0}:root{--bg-main:#0d0d0d;--bg-panel:#161616;--bg-panel-alt:#1e1e1e;--bg-deep:#252525;--border:#444;--border-light:#555;--text-primary:#d8d8d8;--text-secondary:#a0a0a0;--text-med:silver;--text-dim:#666;--accent:#4a9eff;--accent-green:#4a7228;--accent-green2:#507030;--accent-orange:#e0a84a;--accent-red:#a01820;--accent-purple:#a6f;--active-bg:#4a9eff1f;--panel-radius:6px}html,body{background:var(--bg-main);color:var(--text-primary);-webkit-font-smoothing:antialiased;width:100%;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px}#root{height:100%}.app{background:var(--bg-main);border-left:1px solid var(--border);border-right:1px solid var(--border);flex-direction:column;width:100%;max-width:1200px;min-height:100vh;margin:0 auto;display:flex}.topbar{border-bottom:1px solid var(--border);background:linear-gradient(#1a1a1a 0%,#111 100%);flex-direction:column;flex-shrink:0;gap:3px;padding:4px 8px;display:flex}.topbar-row1{align-items:center;gap:6px;display:flex}.topbar-row2{align-items:center;gap:4px;display:flex}.topbar-logo{align-items:center;gap:6px;margin-right:4px;display:flex}.logo-bars{align-items:flex-end;gap:2px;display:flex}.bar{background:var(--accent);border-radius:1px;width:4px;display:block}.bar1{height:14px}.bar2{height:10px}.bar3{height:6px}.logo-text{letter-spacing:2px;color:#fff;font-size:14px;font-weight:700}.topbar-modes{gap:2px;display:flex}.topbar-spacer{border-bottom:1px solid var(--border);flex:1;align-self:center;min-width:8px;height:1px;margin:0 4px}.topbar-bpm{background:var(--bg-panel);border:1px solid var(--border);border-radius:3px;align-items:center;gap:3px;padding:2px 5px;display:flex}.bpm-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:0 3px;font-family:Inter,sans-serif;font-size:14px;line-height:1}.bpm-btn:hover{color:var(--accent)}.bpm-display{color:var(--accent);text-align:center;min-width:32px;font-family:JetBrains Mono,monospace;font-size:15px;font-weight:600}.bpm-unit{color:var(--text-dim);text-transform:lowercase;font-size:9px}.topbar-quantize{align-items:center;gap:4px;display:flex}.topbar-quantize .section-label{color:var(--text-dim);letter-spacing:.5px;font-size:8px}.quantize-options{gap:2px;display:flex}.topbar-transport{align-items:center;gap:3px;display:flex}.btn-play{background:var(--bg-panel-alt);border:1px solid var(--accent-green);color:var(--accent-green);cursor:pointer;letter-spacing:.5px;white-space:nowrap;border-radius:3px;justify-content:center;align-items:center;min-width:44px;height:22px;padding:0 6px;font-family:Inter,sans-serif;font-size:9px;font-weight:600;display:inline-flex}.btn-play:hover{box-shadow:0 0 0 1px var(--accent-green)}.btn-play.active{background:#4a722824}.btn-stop{background:var(--bg-panel-alt);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;letter-spacing:.5px;white-space:nowrap;border-radius:3px;justify-content:center;align-items:center;width:22px;height:22px;padding:0;font-family:Inter,sans-serif;font-size:9px;font-weight:600;display:inline-flex}.btn-stop.active{border-color:var(--accent-red);color:var(--accent-red)}.btn-stop.active:hover{background:#a018202e}.btn-stop:not(.active):hover{border-color:var(--accent-red);color:var(--accent-red)}.topbar-ab{align-items:center;gap:2px;display:flex}.topbar-bank{border-left:1px solid var(--border);align-items:center;gap:2px;margin-left:4px;padding-left:4px;display:flex}.bank-slot{flex-direction:column;align-items:center;display:flex}.topbar-perf{border-left:1px solid var(--border);align-items:center;gap:2px;margin-left:4px;padding-left:4px;display:flex}.main-layout{flex:1;grid-template:"pads pads""mixer mixer""left right"1fr/1fr 1fr;gap:6px;min-height:0;padding:6px;display:grid;overflow:auto}.area-pads{grid-area:pads}.area-mixer{grid-area:mixer}.area-left{flex-direction:column;grid-area:left;gap:4px;min-height:0;display:flex;overflow-y:auto}.area-right{flex-direction:column;grid-area:right;gap:4px;min-height:0;display:flex;overflow:visible}.pad-grid-wrap{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--panel-radius);padding:5px}.pad-grid-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px;margin-bottom:3px;display:flex}.pad-grid-header-mobile{display:none}.pad-grid-title{color:var(--text-secondary);letter-spacing:.5px;text-transform:uppercase;font-size:7px}.pad-grid-pages{gap:2px;display:flex}.pad-grid{grid-template-columns:repeat(16,1fr);gap:4px;display:grid}.pad-cell{flex-direction:column;align-items:center;gap:2px;min-width:0;display:flex}.pad-cell-empty{visibility:hidden}.pad-cell .pad{width:100%}.step-leds{justify-content:center;gap:2px;margin-bottom:2px;display:flex}.step-led{background:#111;border-radius:1px;width:4px;height:4px;transition:background 50ms}.step-led.led-hit{background:var(--accent-green);box-shadow:0 0 4px var(--accent-green)}.step-led.led-current{background:#1a2a1a}.step-led.led-active{background:var(--accent);box-shadow:0 0 2px #4a9eff66}.voice-select-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--panel-radius);flex-direction:column;gap:4px;padding:5px;display:flex}.panel-header{justify-content:space-between;align-items:center;display:flex}.section-label{text-transform:uppercase;color:var(--text-secondary);letter-spacing:1px;font-size:10px;font-weight:600}.voice-buttons{flex-wrap:wrap;gap:2px;display:flex}.voice-buttons-grid{flex-direction:column;gap:2px;display:flex}.voice-btn-row{gap:2px;display:flex}.voice-groups{justify-content:space-around;gap:8px;display:flex}.group-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;font-size:7px}.voice-faders{flex:1;justify-content:space-between;align-items:flex-end;gap:1px;display:flex}.controls-top{gap:4px;display:flex}.wave-designer-panel,.analog-filter-panel,.volume-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--panel-radius);flex:1;padding:5px}.wave-selector{justify-content:center;gap:2px;margin:2px 0;display:flex}.knob-row{justify-content:center;align-items:flex-start;gap:6px;padding-top:3px;display:flex}.lfo-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--panel-radius);justify-content:center;gap:12px;padding:5px;display:flex}.lfo-section{align-items:center;gap:6px;display:flex}.section-label-sm{text-transform:uppercase;color:var(--text-dim);letter-spacing:.5px;writing-mode:vertical-lr;text-orientation:mixed;font-size:8px;font-weight:600;transform:rotate(180deg)}.fx-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--panel-radius);padding:5px}.controls-bottom{gap:4px;display:flex}.voice-knobs-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--panel-radius);flex:1;padding:5px}.pattern-display-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--panel-radius);align-items:center;gap:8px;padding:5px;display:flex;position:relative}.pattern-lcd{background:#0a0a0a;border:1px solid #222;border-radius:3px;min-width:100px;padding:4px 8px}.lcd-row{justify-content:space-between;align-items:center;gap:8px;line-height:1.4;display:flex}.lcd-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;font-size:7px}.lcd-value{color:var(--text-secondary);font-family:JetBrains Mono,monospace;font-size:9px}.lcd-accent{color:var(--accent)}.pattern-controls{flex-direction:column;align-items:center;gap:4px;display:flex}.pattern-nav{gap:2px;display:flex}.load-dropdown{border:1px solid var(--border-light);z-index:200;background:#111;border-radius:3px;max-height:120px;margin-bottom:4px;position:absolute;bottom:100%;left:0;right:0;overflow-y:auto}.load-item{color:var(--text-secondary);cursor:pointer;border-bottom:1px solid #222;padding:4px 8px;font-family:JetBrains Mono,monospace;font-size:9px}.load-item:hover{background:var(--active-bg);color:var(--accent)}.load-item:last-child{border-bottom:none}.preset-browser{max-height:220px}.preset-category{color:#999;justify-content:space-between;align-items:center;font-weight:600;display:flex}.preset-category:hover{color:var(--accent)}.preset-count{color:#555;text-align:right;min-width:16px;font-size:8px}.preset-back{color:var(--accent);z-index:1;background:#111;border-bottom:1px solid #222;font-weight:600;position:sticky;top:0}.preset-item{justify-content:space-between;align-items:center;display:flex}.preset-tempo{color:#555;font-size:7px}.preset-tempo:after{content:" bpm"}.preset-info{color:#888;background:#0a0a0a;border:1px solid #222;border-radius:3px;width:100%;margin-top:4px;padding:4px 8px;font-family:JetBrains Mono,monospace;font-size:8px;line-height:1.4}.preset-info-cat{color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-right:6px;font-size:7px}.preset-info-desc{color:#888}.mixer-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--panel-radius);flex:1;min-height:0;padding:6px;overflow:hidden}.mixer-channels{justify-content:space-between;gap:2px;display:flex}.mixer-channel{cursor:pointer;border-radius:2px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:3px 1px;transition:background .1s;display:flex}.mixer-channel:hover{background:#ffffff08}.mixer-channel.active{background:#ffffff0a}.mixer-ch-label{color:var(--text-dim);text-transform:uppercase;white-space:nowrap;font-size:6px}.mixer-voice-btn{color:#888;text-transform:uppercase;white-space:nowrap;letter-spacing:.3px;cursor:pointer;text-align:center;text-overflow:ellipsis;background:0 0;border:1px solid #222;border-radius:2px;width:100%;margin-top:auto;padding:2px 1px;font-size:7px;font-weight:600;transition:all .1s;overflow:hidden}.mixer-voice-btn:hover{color:#999;border-color:#333}.mixer-voice-btn.active{color:var(--accent);border-color:var(--accent);background:#4a9eff14}.step-sequencer{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--panel-radius);flex:1;min-height:0;padding:5px}.step-header{justify-content:space-between;align-items:center;margin-bottom:3px;display:flex}.step-pages{gap:2px;display:flex}.step-grid-row{grid-template-columns:repeat(16,1fr);gap:2px;display:grid}.step-numbers-row{grid-template-columns:repeat(16,1fr);gap:2px;margin-bottom:2px;display:grid}.step-num-label{color:#333;text-align:center;font-family:JetBrains Mono,monospace;font-size:7px}.step-num-label.beat{color:#888}.step-row-label{margin-bottom:1px}.step-row-range{color:#555;font-family:JetBrains Mono,monospace;font-size:6px}.step-cell{cursor:pointer;background:#0a0a0a;border:1px solid #1a1a1a;border-radius:2px;min-width:0;height:28px;position:relative;overflow:hidden}.step-cell-beat{background:#111;border-left:2px solid #333}.step-cell-current{background:#1a3a1a}.step-cell:hover{filter:brightness(1.3)}.step-cell-empty{visibility:hidden}.step-vel-bar{transition:height 80ms,background 40ms;position:absolute;bottom:0;left:0;right:0}.step-prob-bar{opacity:.6;background:repeating-linear-gradient(90deg,#fa0 0 2px,#0000 2px 4px);height:2px;position:absolute;top:0;left:0;right:0}.step-ratchet-dots{gap:1px;display:flex;position:absolute;bottom:1px;right:1px}.step-ratchet-dot{background:#f64;border-radius:50%;width:2px;height:2px}.step-flam-mark{opacity:.8;border-bottom:1px solid #f4a;border-left:1px solid #f4a;width:4px;height:4px;position:absolute;top:1px;left:1px}.step-condition-label{opacity:.9;font-family:JetBrains Mono,monospace;font-size:5px;line-height:1;position:absolute;top:0;right:1px}.step-plock-dot{opacity:.9;background:#f64;border-radius:50%;width:3px;height:3px;position:absolute;bottom:1px;left:1px}.step-playhead{opacity:.5;background:#4a7228;height:2px;position:absolute;bottom:0;left:0;right:0}.step-tools{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:3px;flex-direction:column;gap:3px;margin-bottom:4px;padding:4px 6px;display:flex}.step-tools-row{align-items:center;gap:4px;display:flex}.tool-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;min-width:32px;font-size:7px;font-weight:600}.euclid-info{color:var(--accent-purple);opacity:.7;font-family:JetBrains Mono,monospace;font-size:8px}.plock-editor{background:#0a0a0a;border-color:#ff664440}.step-accent-row{grid-template-columns:repeat(16,1fr);gap:1px;margin-bottom:1px;display:grid}.step-accent-cell{cursor:pointer;border:1px solid #1a1a1a;border-radius:1px;min-width:0;height:6px}.step-legend{border-top:1px solid #222;gap:8px;margin-top:2px;padding-top:2px;display:flex}.step-legend span{color:#555;text-transform:uppercase;letter-spacing:.3px;font-family:JetBrains Mono,monospace;font-size:6px}.master-fx-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--panel-radius);padding:5px}.master-fx-row{justify-content:center;gap:12px;margin-top:3px;display:flex}.master-fx-group{align-items:center;gap:4px;display:flex}.fx-group-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;writing-mode:vertical-lr;text-orientation:mixed;font-size:7px;font-weight:600;transform:rotate(180deg)}.footer{border-top:1px solid var(--border);background:linear-gradient(#141414 0%,#0d0d0d 100%);flex-shrink:0;justify-content:space-between;align-items:center;min-height:28px;padding:3px 8px;display:flex}.footer-left,.footer-center,.footer-right{align-items:center;gap:4px;display:flex}.footer-info{color:var(--text-dim);letter-spacing:.3px;font-family:JetBrains Mono,monospace;font-size:9px}.footer-link{color:var(--accent);letter-spacing:.3px;cursor:pointer;opacity:.7;font-family:JetBrains Mono,monospace;font-size:9px;transition:opacity .15s}.footer-link:hover{opacity:1}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:2px}::selection{background:#4a9eff4d}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-panel);border:1px solid var(--border-light);border-radius:6px;flex-direction:column;width:600px;max-width:90vw;max-height:80vh;display:flex;overflow:hidden}.modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.modal-title{letter-spacing:1.5px;color:var(--accent);font-size:11px;font-weight:700}.modal-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:14px}.modal-close:hover{color:var(--text-primary)}.modal-body{flex:1;min-height:0;display:flex;overflow:hidden}.manual-nav{border-right:1px solid var(--border);flex-shrink:0;width:140px;padding:6px 0;overflow-y:auto}.manual-nav-item{color:var(--text-dim);cursor:pointer;text-transform:uppercase;letter-spacing:.5px;padding:5px 10px;font-size:9px}.manual-nav-item:hover{color:var(--text-secondary);background:#4a9eff0f}.manual-nav-item.active{color:var(--accent);background:var(--active-bg);border-left:2px solid var(--accent)}.manual-content{flex:1;padding:10px 14px;overflow-y:auto}.manual-section-title{color:var(--text-primary);margin-bottom:8px;font-size:12px;font-weight:600}.manual-block{color:var(--text-secondary);margin-bottom:6px;font-size:10px;line-height:1.5}@media (width<=768px){html,body{overflow:auto}.app{height:auto;min-height:100vh;overflow:auto}.topbar{gap:2px;padding:3px 4px}.topbar-row1{flex-wrap:wrap;gap:3px}.topbar-row2{flex-wrap:wrap;gap:2px}.topbar-logo{margin-right:2px}.logo-text{letter-spacing:1px;font-size:11px}.topbar-spacer,.topbar-quantize{display:none}.main-layout{flex-direction:column;gap:3px;padding:3px;display:flex;overflow:auto}.area-pads{order:1}.area-mixer{order:2}.area-left{order:3}.area-right{order:4}.pad-grid{grid-template-columns:repeat(8,1fr);gap:2px}.pad-grid-wrap{padding:3px}.pad-grid-header{flex-wrap:wrap;gap:2px}.pad-grid-header .section-label{width:100%;font-size:7px}.step-sequencer{padding:3px}.step-grid-row,.step-numbers-row{grid-template-columns:repeat(8,1fr);gap:1px}.step-accent-row{grid-template-columns:repeat(8,1fr)}.step-legend{display:none}.mixer-panel{padding:3px;overflow:auto visible}.mixer-channels{min-width:380px}.voice-buttons-grid,.voice-btn-row{gap:1px}.controls-top{flex-direction:column;gap:3px}.knob-row{flex-wrap:wrap;gap:4px}.lfo-panel{flex-direction:column;gap:3px}.footer{padding:2px 4px;font-size:8px}}@media (width<=400px){.topbar-modes,.topbar-transport{flex-wrap:wrap;gap:1px}.topbar-bpm{padding:1px 3px}.bpm-display{min-width:26px;font-size:12px}.logo-text{font-size:10px}.bar1{height:10px}.bar2{height:7px}.bar3{height:4px}}