:root{--bg-primary:#0a0014;--bg-secondary:#120024;--bg-tertiary:#1a0038;--bg-surface:#200045;--text-primary:#e0d0ff;--text-secondary:#9080c0;--text-muted:#604090;--neon-pink:#ff2de2;--neon-cyan:#00fff7;--neon-yellow:#ffe600;--neon-orange:#ff6b00;--neon-green:#39ff14;--neon-purple:#bf00ff;--danger:#ff1744;--warning:#ffe600;--success:#39ff14;--border:#3a1a6e;--step-bg:#150030;--step-bg-beat:#1c003e;--step-hover:#2a0055;--step-current:#00fff740;--glow-pink:0 0 8px #ff2de2, 0 0 20px #ff2de24d;--glow-cyan:0 0 8px #00fff7, 0 0 20px #00fff74d;--pixel-font:"Press Start 2P", monospace;--ui-font:"Press Start 2P", "Courier New", monospace;--radius:0px;--radius-sm:0px}:root[data-theme=terminal]{--bg-primary:#0a0a0a;--bg-secondary:#111;--bg-tertiary:#1a1a1a;--bg-surface:#222;--text-primary:#3f3;--text-secondary:#2a2;--text-muted:#171;--neon-pink:#3f3;--neon-cyan:#3f3;--neon-yellow:#af3;--neon-orange:#7f3;--neon-green:#3f3;--neon-purple:#3f3;--danger:#f33;--warning:#af3;--success:#3f3;--border:#252;--step-bg:#0d0d0d;--step-bg-beat:#141414;--step-hover:#1f3f1f;--step-current:#33ff3340;--glow-pink:0 0 8px #3f3, 0 0 20px #33ff334d;--glow-cyan:0 0 8px #3f3, 0 0 20px #33ff334d}:root[data-theme=sunset]{--bg-primary:#1a0a0a;--bg-secondary:#241010;--bg-tertiary:#381818;--bg-surface:#452020;--text-primary:#ffd0b0;--text-secondary:#c09070;--text-muted:#906050;--neon-pink:#f46;--neon-cyan:#fa3;--neon-yellow:#ffe600;--neon-orange:#ff6b00;--neon-green:#f93;--neon-purple:#f46;--danger:#ff1744;--warning:#ffe600;--success:#f93;--border:#6e3a1a;--step-bg:#301008;--step-bg-beat:#3e1c0c;--step-hover:#552a10;--step-current:#ffaa3340;--glow-pink:0 0 8px #f46, 0 0 20px #ff44664d;--glow-cyan:0 0 8px #fa3, 0 0 20px #ffaa334d}*{box-sizing:border-box;image-rendering:pixelated;margin:0;padding:0}body{font-family:var(--ui-font);background:var(--bg-primary);color:var(--text-primary);background-image:linear-gradient(#0a0014 0%,#100028 40%,#1a004a 70%,#0a0014 100%);background-attachment:fixed;min-height:100vh}body:after{content:"";pointer-events:none;z-index:9999;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#00000014 2px 4px);position:fixed;inset:0}#root{min-height:100vh}.app{max-width:1800px;margin:0 auto;padding:12px}.app-main{align-items:flex-start;gap:12px;display:flex}.app-tracks{flex:1;min-width:0}.app-preview{flex-direction:column;flex-shrink:0;gap:8px;width:340px;min-width:280px;max-height:calc(100vh - 74px);display:flex;position:sticky;top:80px}.visualizer{background:var(--bg-secondary);border:2px solid var(--border);height:120px;padding:6px;position:relative;overflow:hidden;box-shadow:0 0 12px #ff2de214}.visualizer-modes{z-index:2;gap:2px;display:flex;position:absolute;top:4px;right:4px}.viz-mode-btn{background:var(--bg-primary);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;opacity:.6;padding:2px 6px;font-size:.7rem}.viz-mode-btn.active{color:var(--accent);border-color:var(--accent);opacity:1;box-shadow:0 0 6px var(--accent)}.visualizer-canvas{width:100%;height:100%;display:block}@media (width<=1100px){.app-main{flex-direction:column}.app-preview{width:100%;max-height:none;position:static}.visualizer{height:80px}}.toolbar{background:var(--bg-secondary);border:2px solid var(--neon-pink);box-shadow:var(--glow-pink), inset 0 0 30px #ff2de20d;z-index:50;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:12px;padding:10px 14px;display:flex;position:sticky;top:0}.toolbar-group{align-items:center;gap:8px;display:flex}.toolbar-actions{margin-left:auto}.toolbar-label{color:var(--neon-cyan);text-transform:uppercase;letter-spacing:1px;text-shadow:var(--glow-cyan);align-items:center;gap:6px;font-size:.5rem;font-weight:400;display:flex}.toolbar-input{background:var(--bg-primary);border:2px solid var(--border);color:var(--neon-yellow);font-size:.5rem;font-family:var(--pixel-font);text-align:center;width:56px;text-shadow:0 0 6px var(--neon-yellow);padding:4px 6px}.toolbar-input:focus{border-color:var(--neon-cyan);box-shadow:var(--glow-cyan);outline:none}.toolbar-select{background:var(--bg-primary);border:2px solid var(--neon-purple);color:var(--text-primary);font-size:.5rem;font-family:var(--pixel-font);cursor:pointer;appearance:none;text-shadow:0 0 6px #bf00ff66;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0h8L4 6z' fill='%23bf00ff'/%3E%3C/svg%3E");background-position:right 6px center;background-repeat:no-repeat;background-size:8px 6px;padding:4px 22px 4px 8px;transition:all .15s;box-shadow:0 0 4px #bf00ff26,inset 0 0 8px #bf00ff0d}.toolbar-select:hover{border-color:var(--neon-pink);color:var(--neon-pink);text-shadow:0 0 8px #ff2de280;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0h8L4 6z' fill='%23ff2de2'/%3E%3C/svg%3E");box-shadow:0 0 10px #ff2de24d,inset 0 0 10px #ff2de20f}.toolbar-select:focus{border-color:var(--neon-cyan);box-shadow:var(--glow-cyan), inset 0 0 10px #00fff70f;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0h8L4 6z' fill='%2300fff7'/%3E%3C/svg%3E");outline:none}.toolbar-select option{background:var(--bg-secondary);color:var(--text-primary);font-family:var(--pixel-font);padding:6px 8px}.toolbar-slider{width:80px;accent-color:var(--neon-pink)}.toolbar-btn{border:2px solid var(--border);cursor:pointer;font-size:.5rem;font-family:var(--pixel-font);background:var(--bg-tertiary);color:var(--text-primary);padding:6px 12px;font-weight:400;transition:all .1s}.toolbar-btn:hover{border-color:var(--neon-cyan);color:var(--neon-cyan);text-shadow:var(--glow-cyan)}.toolbar-btn:active{transform:scale(.95)}.transport-btn{background:var(--bg-primary);color:var(--neon-green);border:3px solid var(--neon-green);width:44px;height:44px;text-shadow:0 0 10px var(--neon-green);justify-content:center;align-items:center;padding:6px;font-size:1.2rem;display:flex;box-shadow:0 0 10px #39ff1466,inset 0 0 10px #39ff141a}.transport-btn:hover{background:#39ff141a;box-shadow:0 0 20px #39ff1499,inset 0 0 15px #39ff1426}.transport-btn.playing{color:var(--danger);border-color:var(--danger);text-shadow:0 0 10px var(--danger);box-shadow:0 0 10px #ff174466,inset 0 0 10px #ff17441a}.transport-btn.playing:hover{box-shadow:0 0 20px #ff174499,inset 0 0 15px #ff174426}.record-btn{color:var(--text-muted);border-color:var(--text-muted);box-shadow:none;text-shadow:none;font-size:.9rem}.record-btn:hover{color:#ff1744;text-shadow:0 0 10px #ff1744;border-color:#ff1744;box-shadow:0 0 10px #ff174466}.record-btn.recording{color:#ff1744;text-shadow:0 0 10px #ff1744;border-color:#ff1744;animation:1s ease-in-out infinite record-pulse;box-shadow:0 0 10px #ff174466,inset 0 0 10px #ff17441a}@keyframes record-pulse{0%,to{box-shadow:0 0 10px #ff174466,inset 0 0 10px #ff17441a}50%{box-shadow:0 0 20px #ff1744cc,inset 0 0 20px #ff174433}}.action-btn{background:var(--bg-primary);color:var(--neon-pink);border:2px solid var(--neon-pink);text-shadow:0 0 6px #ff2de280}.action-btn:hover{box-shadow:var(--glow-pink);color:var(--neon-pink);border-color:var(--neon-pink);text-shadow:0 0 10px var(--neon-pink);background:#ff2de21a}.track-list{flex-direction:column;gap:10px;display:flex}.chain-group{background:var(--bg-secondary);border:2px solid var(--border);border-left:none;flex-direction:row;display:flex;position:relative;overflow:visible;box-shadow:0 0 8px #ff2de21a}.chain-headers{border-right:2px solid var(--border);flex-direction:column;width:180px;min-width:180px;display:flex}.chain-header-item{border-left:5px solid var(--track-color,var(--neon-pink));flex:1;position:relative}.chain-header-item+.chain-header-item{border-top:1px dashed var(--border)}.chain-header-item .track-header{border-right:none;width:100%;min-width:0}.chain-header-item{cursor:grab}.chain-header-item.chain-dragging{opacity:.4;cursor:grabbing}.chain-header-item.chain-drag-over{border-top:3px solid var(--neon-cyan);box-shadow:0 -2px 8px #00fff766}.chain-grids{flex-direction:row;flex:1;min-width:0;display:flex;overflow-x:auto}.chain-grid-item{border-left:2px dashed var(--border);flex:none;position:relative}.chain-grid-item:first-child{border-left:none}.chain-header-item+.chain-header-item:before{content:"⛓";color:var(--neon-purple);text-shadow:0 0 6px #bf00ff80;z-index:2;font-size:.5rem;line-height:1;position:absolute;top:-8px;left:50%;transform:translate(-50%)}.empty-state{text-align:center;color:var(--text-muted);padding:60px 20px;font-size:.6rem;line-height:2}.add-track-buttons{justify-content:center;gap:12px;padding:16px 0;display:flex}.add-track-btn{background:var(--bg-primary);border:2px dashed var(--neon-purple);color:var(--neon-purple);font-size:.5rem;font-family:var(--pixel-font);cursor:pointer;text-shadow:0 0 6px #bf00ff66;appearance:none;padding:10px 20px;transition:all .15s}.add-track-btn:hover{color:#d940ff;background:#bf00ff14;border-style:solid;box-shadow:0 0 15px #bf00ff4d}select.add-track-btn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0h8L4 6z' fill='%23bf00ff'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;background-size:8px 6px;padding-right:28px}select.add-track-btn:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0h8L4 6z' fill='%23d940ff'/%3E%3C/svg%3E")}select.add-track-btn option{background:var(--bg-secondary);color:var(--text-primary);font-family:var(--pixel-font);padding:6px 8px;font-size:.5rem}.track{background:var(--bg-secondary);border:2px solid var(--border);border-left:4px solid var(--track-color,var(--neon-pink));display:flex;position:relative;overflow:visible;box-shadow:0 0 8px #ff2de21a}.track-muted{opacity:.4;filter:saturate(.3)}.track-header{border-right:2px solid var(--border);flex-direction:column;gap:5px;width:180px;min-width:180px;padding:8px 10px;display:flex}.track-header-top{justify-content:space-between;align-items:center;display:flex}.track-name-input{color:var(--neon-cyan);font-size:.5rem;font-family:var(--pixel-font);width:120px;text-shadow:var(--glow-cyan);background:0 0;border:none;padding:2px 4px;font-weight:400}.track-name-input:focus{background:var(--bg-primary);outline:2px solid var(--neon-cyan);box-shadow:var(--glow-cyan)}.track-remove-btn{color:var(--text-muted);cursor:pointer;font-size:.7rem;font-family:var(--pixel-font);background:0 0;border:none;padding:2px 6px}.track-remove-btn:hover{color:var(--danger);text-shadow:0 0 8px var(--danger)}.track-controls{flex-direction:column;gap:4px;display:flex}.track-select{background:var(--bg-primary);border:2px solid var(--border);color:var(--text-primary);font-size:.45rem;font-family:var(--pixel-font);cursor:pointer;appearance:none;text-shadow:0 0 4px #bf00ff40;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0h8L4 6z' fill='%23bf00ff'/%3E%3C/svg%3E");background-position:right 4px center;background-repeat:no-repeat;background-size:7px 5px;width:100%;padding:3px 20px 3px 6px;transition:all .15s;box-shadow:0 0 3px #bf00ff1a,inset 0 0 6px #bf00ff0a}.track-select:hover{border-color:var(--neon-purple);color:var(--neon-purple);text-shadow:0 0 6px #bf00ff66;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0h8L4 6z' fill='%23d940ff'/%3E%3C/svg%3E");box-shadow:0 0 8px #bf00ff4d,inset 0 0 8px #bf00ff0f}.track-select:focus{border-color:var(--neon-cyan);box-shadow:var(--glow-cyan), inset 0 0 8px #00fff70d;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0h8L4 6z' fill='%2300fff7'/%3E%3C/svg%3E");outline:none}.track-select option{background:var(--bg-secondary);color:var(--text-primary);font-family:var(--pixel-font);padding:6px 8px}.add-row-select{color:var(--neon-purple);border:2px dashed var(--neon-purple);text-shadow:0 0 6px #bf00ff66;background:0 0}.add-row-select:hover{background:#bf00ff0f;border-style:solid;box-shadow:0 0 10px #bf00ff40}.track-toggles{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.loop-select{width:auto;min-width:0;color:var(--neon-cyan);border-color:var(--border);padding:2px 18px 2px 4px;font-size:.38rem}.loop-select:hover{color:var(--neon-cyan);border-color:var(--neon-cyan);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0h8L4 6z' fill='%2300fff7'/%3E%3C/svg%3E");box-shadow:0 0 6px #00fff74d}.insert-after-bar{z-index:10;opacity:0;transition:opacity .15s;position:absolute;bottom:-9px;left:50%;transform:translate(-50%)}.track:hover .insert-after-bar,.track-drag-wrapper:hover .insert-after-bar{opacity:1}.insert-after-select{background:var(--bg-secondary);border:1px solid var(--neon-purple);color:var(--neon-purple);font-family:var(--pixel-font);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4'%3E%3Cpath d='M0 0h6L3 4z' fill='%23bf00ff'/%3E%3C/svg%3E");background-position:right 3px center;background-repeat:no-repeat;background-size:6px 4px;padding:1px 14px 1px 4px;font-size:.4rem;transition:all .15s;box-shadow:0 0 4px #bf00ff4d}.insert-after-select:hover{border-color:var(--neon-pink);color:var(--neon-pink);box-shadow:0 0 8px #ff2de266}.insert-after-select option{background:var(--bg-secondary);color:var(--text-primary);font-family:var(--pixel-font)}.toggle-btn{border:2px solid var(--border);background:var(--bg-primary);width:22px;height:22px;color:var(--text-muted);font-size:.4rem;font-family:var(--pixel-font);cursor:pointer;font-weight:400;transition:all .1s}.toggle-btn:hover{border-color:var(--text-secondary)}.mute-btn.active{background:var(--danger);color:#fff;border-color:var(--danger);text-shadow:0 0 4px #ffffff80;box-shadow:0 0 8px #ff174480}.solo-btn.active{background:var(--neon-yellow);color:var(--bg-primary);border-color:var(--neon-yellow);box-shadow:0 0 8px #ffe60080}.volume-slider{height:4px;accent-color:var(--neon-pink);flex:1}.step-grid-container{flex:1;padding:6px 6px 4px;overflow-x:auto}.step-grid{flex-direction:column;gap:2px;display:flex}.step-row{align-items:center;gap:0;display:flex}.row-label{width:48px;min-width:48px;color:var(--text-secondary);text-align:right;justify-content:space-between;align-items:center;gap:2px;padding-right:6px;font-size:.4rem;display:flex}.row-label-text{font-family:var(--pixel-font);text-transform:uppercase;font-size:.4rem}.row-preview-btn{color:var(--text-muted);cursor:pointer;opacity:0;background:0 0;border:none;padding:0 2px;font-size:.4rem;line-height:1;transition:opacity .15s,color .1s}.step-row:hover .row-preview-btn{opacity:1}.row-preview-btn:hover{color:var(--neon-green);text-shadow:0 0 6px var(--neon-green)}.row-remove-btn{color:var(--text-muted);cursor:pointer;font-size:.5rem;font-family:var(--pixel-font);opacity:0;background:0 0;border:none;padding:0 2px;transition:opacity .15s}.step-row:hover .row-remove-btn{opacity:1}.piano-grid{gap:1px}.piano-white-key,.piano-black-key{gap:0}.piano-white-key .row-label{background:linear-gradient(90deg,#e8e0d8 0%,#f5f0eb 60%,#ddd6cc 100%);border-top:1px solid #f8f5f0;border-bottom:1px solid #bbb;border-right:2px solid #888;width:48px;min-width:48px;box-shadow:inset 0 -1px 2px #00000014}.piano-white-key .row-label-text{color:#333;font-weight:700}.piano-white-key .row-preview-btn{color:#999}.piano-white-key:hover .row-preview-btn{color:#555}.piano-black-key .row-label{background:linear-gradient(90deg,#1a1a1a 0%,#2a2a2a 50%,#222 100%);border-top:1px solid #3a3a3a;border-bottom:1px solid #111;border-right:2px solid #000;width:36px;min-width:36px;height:20px;box-shadow:inset 0 -1px 3px #0006,0 1px 3px #00000080}.piano-black-key .row-label-text{color:#aaa;font-size:.32rem}.piano-black-key .row-preview-btn{color:#555;font-size:.35rem}.piano-black-key:hover .row-preview-btn{color:#999}.piano-black-key .step-cells{margin-left:12px}.piano-black-key .step-cell{height:20px}.piano-c-note{border-top:2px solid #ffffff26!important}.piano-white-key:hover .row-label{background:linear-gradient(90deg,#f0ebe5 0%,#fff 60%,#e8e2d9 100%)}.piano-black-key:hover .row-label{background:linear-gradient(90deg,#252525 0%,#353535 50%,#2e2e2e 100%)}.piano-keyboard{padding:8px 6px 4px 54px;overflow-x:auto}.piano-keyboard-keys{align-items:flex-start;height:56px;display:flex;position:relative}.piano-key{cursor:pointer;border:none;justify-content:center;align-items:flex-end;padding:0;transition:filter 80ms,box-shadow 80ms;display:flex;position:relative}.piano-key-white{z-index:1;background:linear-gradient(#f5f0eb 0%,#e8e0d8 85%,#d8d0c6 100%);border:1px solid #aaa;border-radius:0 0 3px 3px;width:24px;height:56px;margin-right:1px;box-shadow:0 2px 3px #0003,inset 0 -2px 4px #0000000d}.piano-key-white:hover{background:linear-gradient(#fff 0%,#f0ebe5 85%,#e0d8ce 100%);box-shadow:0 2px 6px #0000004d,inset 0 -2px 4px #0000000d}.piano-key-white:active{background:linear-gradient(#e0d8d0 0%,#d5cdc5 100%);height:54px;box-shadow:0 1px 2px #0003}.piano-key-black{z-index:2;background:linear-gradient(#2a2a2a 0%,#1a1a1a 60%,#111 100%);border:1px solid #000;border-radius:0 0 2px 2px;width:16px;height:36px;margin-left:-8px;margin-right:-8px;box-shadow:0 3px 5px #00000080,inset 0 -1px 2px #ffffff0d}.piano-key-black:hover{background:linear-gradient(#3a3a3a 0%,#252525 60%,#1a1a1a 100%);box-shadow:0 3px 8px #0009,inset 0 -1px 2px #ffffff14}.piano-key-black:active{background:linear-gradient(#222 0%,#151515 100%);height:34px;box-shadow:0 1px 3px #0006}.piano-key-active.piano-key-white{background:linear-gradient(180deg, color-mix(in srgb, var(--key-active-color,#ff2de2) 25%, #f5f0eb) 0%, color-mix(in srgb, var(--key-active-color,#ff2de2) 15%, #e8e0d8) 85%, color-mix(in srgb, var(--key-active-color,#ff2de2) 10%, #d8d0c6) 100%);box-shadow:0 2px 4px #0003, 0 0 8px color-mix(in srgb, var(--key-active-color,#ff2de2) 40%, transparent)}.piano-key-active.piano-key-black{background:linear-gradient(180deg, color-mix(in srgb, var(--key-active-color,#ff2de2) 40%, #2a2a2a) 0%, color-mix(in srgb, var(--key-active-color,#ff2de2) 25%, #1a1a1a) 60%, color-mix(in srgb, var(--key-active-color,#ff2de2) 15%, #111) 100%);box-shadow:0 3px 5px #00000080, 0 0 8px color-mix(in srgb, var(--key-active-color,#ff2de2) 50%, transparent)}.piano-key-label{font-family:var(--pixel-font);color:#888;pointer-events:none;padding-bottom:3px;font-size:.3rem}.piano-key-c{border-left:2px solid #888}.row-remove-btn:hover{color:var(--danger);text-shadow:0 0 6px var(--danger)}.step-cells{flex:1;gap:2px;display:flex}.step-cell{background:var(--step-bg);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;border:2px solid #0000;width:32px;min-width:32px;height:24px;transition:all 80ms}.step-cell.step-beat{background:var(--step-bg-beat);border-color:#3a1a6e66}.step-cell:hover{background:var(--step-hover);border-color:var(--neon-purple)}.step-cell.step-active{border-color:#ffffff26;box-shadow:0 0 6px}.step-cell.step-active:hover{filter:brightness(1.3);box-shadow:0 0 12px}.step-cell.step-current{border:2px solid var(--neon-cyan);box-shadow:0 0 8px #00fff766}.step-cell.step-outside-loop{opacity:.2;pointer-events:none}.step-cell:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;z-index:2}.step-numbers{align-items:center;margin-top:2px;display:flex}.step-number{text-align:center;width:32px;min-width:32px;color:var(--text-muted);font-size:.35rem;font-family:var(--pixel-font);margin-right:2px}.step-beat-num{color:var(--neon-purple);text-shadow:0 0 4px #bf00ff4d}.step-bar-num{color:var(--neon-cyan);text-shadow:0 0 6px #00fff766;font-weight:700}.modal-overlay{z-index:100;background:#000000bf;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bg-secondary);border:3px solid var(--neon-pink);box-shadow:var(--glow-pink), 0 0 40px #ff2de226;flex-direction:column;width:90%;max-width:700px;max-height:80vh;display:flex}.modal-header{border-bottom:2px solid var(--border);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.modal-header h2{font-size:.6rem;font-family:var(--pixel-font);color:var(--neon-cyan);text-shadow:var(--glow-cyan);font-weight:400}.modal-close{color:var(--text-muted);font-size:.8rem;font-family:var(--pixel-font);cursor:pointer;background:0 0;border:none;padding:4px 8px}.modal-close:hover{color:var(--danger);text-shadow:0 0 8px var(--danger)}.modal-tabs{border-bottom:2px solid var(--border);display:flex}.modal-tab{color:var(--text-muted);font-size:.45rem;font-family:var(--pixel-font);cursor:pointer;background:0 0;border:none;border-bottom:3px solid #0000;flex:1;padding:8px 12px;transition:all .15s}.modal-tab:hover{color:var(--text-primary)}.modal-tab.active{color:var(--neon-pink);border-bottom-color:var(--neon-pink);text-shadow:0 0 6px #ff2de280}.modal-body{flex:1;padding:14px 16px;overflow-y:auto}.code-block{background:var(--bg-primary);border:2px solid var(--border);font-family:var(--pixel-font);white-space:pre-wrap;color:var(--neon-green);text-shadow:0 0 4px #39ff144d;padding:14px;font-size:.45rem;line-height:2;overflow-x:auto}.modal-footer{border-top:2px solid var(--border);gap:8px;padding:10px 16px;display:flex}.modal-footer a{text-decoration:none}.import-hint{color:var(--text-secondary);margin-bottom:12px;font-size:.45rem;line-height:1.8}.import-textarea{background:var(--bg-primary);border:2px solid var(--border);width:100%;color:var(--neon-green);font-family:var(--pixel-font);resize:vertical;text-shadow:0 0 4px #39ff144d;padding:10px;font-size:.45rem;line-height:2}.import-textarea:focus{border-color:var(--neon-cyan);box-shadow:var(--glow-cyan);outline:none}.import-textarea::placeholder{color:var(--text-muted);text-shadow:none}.import-error{border:2px solid var(--danger);color:var(--danger);font-size:.45rem;font-family:var(--pixel-font);text-shadow:0 0 4px #ff17444d;background:#ff17441a;margin-top:12px;padding:8px 12px;line-height:1.8}.import-warnings{border:2px solid var(--neon-yellow);color:var(--neon-yellow);font-size:.45rem;font-family:var(--pixel-font);text-shadow:0 0 4px #ffe6004d;background:#ffe6000d;margin-top:12px;padding:8px 12px;line-height:1.8}.import-warnings ul{margin-top:4px;padding-left:16px}.code-preview{background:var(--bg-secondary);border:2px solid var(--neon-cyan);box-shadow:var(--glow-cyan), inset 0 0 20px #00fff708;flex-direction:column;height:100%;max-height:calc(100vh - 24px);display:flex}.code-preview-header{border-bottom:2px solid var(--border);align-items:center;gap:8px;padding:8px 12px;display:flex}.code-preview-title{font-size:.45rem;font-family:var(--pixel-font);color:var(--neon-cyan);text-transform:uppercase;letter-spacing:1px;text-shadow:var(--glow-cyan);margin-right:auto;font-weight:400}.code-preview-tabs{background:var(--bg-primary);border:1px solid var(--border);gap:2px;padding:2px;display:flex}.code-preview-tab{color:var(--text-muted);font-size:.4rem;font-family:var(--pixel-font);cursor:pointer;background:0 0;border:none;padding:3px 8px;font-weight:400;transition:all .15s}.code-preview-tab:hover{color:var(--text-primary)}.code-preview-tab.active{background:var(--bg-tertiary);color:var(--neon-pink);text-shadow:0 0 6px #ff2de280}.code-preview-copy{cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:.7rem;transition:all .15s}.code-preview-copy:hover{text-shadow:0 0 8px var(--neon-cyan)}.code-preview-code{color:var(--text-primary);white-space:pre-wrap;word-break:break-word;background:var(--bg-primary);flex:1;margin:0;padding:12px;font-family:Courier New,Courier,monospace;font-size:.75rem;line-height:1.7;overflow:auto}.code-preview-textarea{resize:none;box-sizing:border-box;border:none;border-top:2px solid var(--neon-cyan);outline:none;width:100%;height:100%}.code-preview-error{color:var(--danger);white-space:nowrap;margin-left:auto;font-family:Courier New,Courier,monospace;font-size:.65rem}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--neon-purple);box-shadow:0 0 4px #bf00ff4d}::-webkit-scrollbar-thumb:hover{background:var(--neon-pink);box-shadow:0 0 6px #ff2de266}@media (width<=768px){.app{padding:6px}.toolbar{gap:8px;padding:8px 10px}.toolbar-slider{width:60px}.toolbar-actions{gap:6px;width:100%;margin-left:0;display:flex}.toolbar-actions .toolbar-btn{flex:1}.app-tracks{-webkit-overflow-scrolling:touch;max-height:70vh;overflow-y:auto}.track{border-left:4px solid var(--track-color,var(--neon-pink));flex-direction:column}.track-header{border-right:none;border-bottom:2px solid var(--border);flex-flow:wrap;align-items:center;gap:6px;width:100%;min-width:0;padding:6px 8px}.track-header-top{flex:1;width:auto;min-width:0}.track-name-input{width:80px;font-size:.45rem}.track-controls{flex-flow:wrap;flex:1;align-items:center;gap:6px;min-width:0}.track-select{flex:1;width:auto;min-width:60px}.track-toggles{justify-content:flex-start;gap:3px;width:100%}.toggle-btn{width:26px;height:26px;font-size:.35rem}.volume-slider{flex:0;width:50px}.loop-select{padding:2px 14px 2px 3px;font-size:.32rem}.step-grid-container{-webkit-overflow-scrolling:touch;overflow-x:auto}.step-cell{width:26px;min-width:26px;height:22px}.step-number{width:26px;min-width:26px;font-size:.3rem}.row-label{width:36px;min-width:36px;font-size:.35rem}.row-label-text{font-size:.35rem}.step-grid-container{padding:4px}.effects-panel,.modifiers-panel{gap:6px;padding:6px 0}.effect-knob{min-width:44px}.effect-slider{width:40px}.pattern-tools{gap:3px;padding:6px 0}.pattern-tool-btn{padding:4px 6px;font-size:.28rem}.add-track-buttons{flex-direction:column;gap:8px;padding:12px 8px}.add-track-btn{width:100%}.modal{width:96%;max-height:90vh}.modal-header h2{font-size:.5rem}.code-preview{max-height:300px}.visualizer-modes{top:2px;right:2px}.viz-mode-btn{padding:2px 5px;font-size:.6rem}}@media (width<=480px){.app{padding:4px}.app-tracks{max-height:65vh}.toolbar{gap:6px;padding:6px 8px}.transport-btn{width:38px;height:38px;font-size:1rem}.toolbar-label{font-size:.4rem}.toolbar-input{width:44px;padding:3px 4px;font-size:.4rem}.toolbar-slider{width:50px}.toolbar-btn{padding:5px 8px;font-size:.4rem}.track-header{gap:4px;padding:4px 6px}.track-name-input{width:60px;font-size:.4rem}.track-controls{gap:4px}.track-select{min-width:50px;padding:2px 16px 2px 4px;font-size:.38rem}.track-toggles{gap:2px}.toggle-btn{width:24px;height:24px;font-size:.32rem}.volume-slider{width:40px}.step-cell{width:22px;min-width:22px;height:20px}.step-number{width:22px;min-width:22px;font-size:.25rem}.row-label{width:30px;min-width:30px;padding-right:4px;font-size:.3rem}.row-label-text{font-size:.3rem}.step-cells,.step-grid{gap:1px}.effects-panel,.modifiers-panel{gap:4px;padding:4px 0}.effect-knob{min-width:38px}.effect-slider{width:34px}.effect-label{font-size:.28rem}.effect-value{font-size:.25rem}.pattern-tools{gap:2px;padding:4px 0}.pattern-tool-btn{padding:3px 5px;font-size:.26rem}.mod-toggle,.mod-select{padding:2px 6px;font-size:.28rem}.empty-state{padding:30px 12px;font-size:.5rem}}@media (pointer:coarse) and (width>=769px){.step-cell{width:36px;min-width:36px;height:30px}.step-number{width:36px;min-width:36px}.toggle-btn{min-width:32px;min-height:32px}.row-preview-btn{width:24px;height:24px;font-size:.5rem}.row-remove-btn{width:24px;height:24px}.toolbar-btn{min-height:36px;padding:6px 12px}}@media (pointer:coarse) and (width<=768px){.step-cell{height:28px}.toggle-btn{min-width:28px;min-height:28px}.row-preview-btn,.row-remove-btn{opacity:1;width:20px;height:20px}.toolbar-btn{min-height:32px}.insert-after-bar{opacity:1}}.save-load-modal .modal-body{flex-direction:column;gap:16px;display:flex}.save-load-modal h3{font-family:var(--pixel-font);color:var(--neon-pink);text-shadow:0 0 6px #ff2de266;margin:0 0 8px;font-size:.5rem;font-weight:400}.save-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.save-name-input{background:var(--bg-primary);border:2px solid var(--border);min-width:140px;color:var(--text-primary);font-family:var(--pixel-font);flex:1;padding:6px 10px;font-size:.45rem}.save-name-input:focus{border-color:var(--neon-cyan);box-shadow:var(--glow-cyan);outline:none}.modal-error{border:2px solid var(--danger);color:var(--danger);font-family:var(--pixel-font);background:#ff323226;padding:8px 12px;font-size:.4rem}.no-projects{color:var(--text-muted);font-family:var(--pixel-font);font-size:.4rem;font-style:italic}.project-list{flex-direction:column;gap:6px;max-height:200px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.project-entry{background:var(--bg-primary);border:2px solid var(--border);justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;display:flex}.project-entry:hover{border-color:var(--neon-purple)}.project-info{flex-direction:column;gap:2px;min-width:0;display:flex}.project-name{font-family:var(--pixel-font);color:var(--neon-cyan);text-shadow:0 0 4px #00fff74d;white-space:nowrap;text-overflow:ellipsis;font-size:.45rem;overflow:hidden}.project-date{font-family:var(--pixel-font);color:var(--text-muted);font-size:.35rem}.project-actions{flex-shrink:0;gap:6px;display:flex}.danger-btn{border-color:var(--danger)!important;color:var(--danger)!important}.danger-btn:hover{background:#ff323233!important;box-shadow:0 0 8px #ff323266!important}.toolbar-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.toolbar-btn:disabled:hover{background:var(--bg-tertiary);border-color:var(--border);box-shadow:none;color:var(--text-muted)}.track-drag-wrapper{transition:transform .15s,opacity .15s}.track-drag-wrapper.dragging{opacity:.4}.track-drag-wrapper.drag-over{border-top:3px solid var(--neon-cyan);box-shadow:0 -2px 10px #00fff766}.track-header-actions{gap:4px;display:flex}.track-dup-btn{border:2px solid var(--border);color:var(--text-muted);cursor:pointer;font-size:.55rem;font-family:var(--pixel-font);background:0 0;padding:2px 6px;transition:all .15s}.track-dup-btn:hover{color:var(--neon-cyan);border-color:var(--neon-cyan);text-shadow:var(--glow-cyan)}.effects-panel{border-top:2px solid var(--border);flex-wrap:wrap;gap:8px;margin-top:6px;padding:8px 0;display:flex}.effect-knob{flex-direction:column;align-items:center;gap:2px;min-width:52px;display:flex}.effect-label{font-family:var(--pixel-font);color:var(--neon-pink);text-shadow:0 0 4px #ff2de24d;font-size:.35rem}.effect-slider{appearance:none;background:var(--border);cursor:pointer;outline:none;width:50px;height:4px}.effect-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--neon-cyan);cursor:pointer;border:none;width:10px;height:10px}.effect-value{font-family:var(--pixel-font);color:var(--text-muted);font-size:.3rem}.fx-btn.active{color:var(--neon-pink);border-color:var(--neon-pink);text-shadow:0 0 6px #ff2de280;background:#ff2de233}.modifiers-panel{border-top:2px solid var(--border);flex-wrap:wrap;gap:8px;margin-top:6px;padding:8px 0;display:flex}.mod-btn.active{color:var(--neon-cyan);border-color:var(--neon-cyan);text-shadow:0 0 6px #00fff780;background:#00fff733}.mod-toggle{font-family:var(--pixel-font);background:var(--bg-secondary);color:var(--text-muted);border:1px solid var(--border);cursor:pointer;padding:3px 8px;font-size:.35rem}.mod-toggle.active{color:var(--neon-cyan);border-color:var(--neon-cyan);text-shadow:0 0 6px #00fff780;background:#00fff733}.mod-select{font-family:var(--pixel-font);background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);cursor:pointer;padding:2px 4px;font-size:.35rem}.tools-btn.active{color:var(--neon-yellow);border-color:var(--neon-yellow);text-shadow:0 0 6px #ffe60080;background:#ffe60033}.pattern-tools{border-top:2px solid var(--border);flex-wrap:wrap;gap:4px;margin-top:6px;padding:8px 0;display:flex}.pattern-tool-btn{font-family:var(--pixel-font);background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);cursor:pointer;padding:3px 8px;font-size:.32rem;transition:background .15s,border-color .15s}.pattern-tool-btn:hover{border-color:var(--neon-yellow);color:var(--neon-yellow);background:#ffe60026}.swing-value{font-family:var(--pixel-font);color:var(--neon-cyan);margin-left:6px;font-size:.35rem}.loading-indicator{background:var(--bg-surface);border-bottom:1px solid var(--border);z-index:200;font-family:var(--pixel-font);color:var(--text-muted);justify-content:center;align-items:center;gap:8px;padding:6px 0;font-size:.45rem;display:flex;position:fixed;top:0;left:0;right:0}.loading-indicator .loading-spinner{border:2px solid var(--border);border-top-color:var(--neon-cyan);width:14px;height:14px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.track-vu{background:var(--track-color,var(--neon-cyan));height:3px;box-shadow:0 0 8px var(--track-color,var(--neon-cyan));pointer-events:none;min-width:0;transition:width 80ms,opacity .15s;position:absolute;top:0;left:0}.help-btn{text-align:center;width:28px;height:28px;padding:0;font-size:.5rem;line-height:28px}.snackbar{background:var(--bg-surface,#200045);color:var(--accent-primary,#ff2de2);border:1px solid var(--accent-primary,#ff2de2);z-index:10000;opacity:0;border-radius:8px;align-items:center;gap:12px;max-width:90vw;padding:12px 20px;font-size:.85rem;transition:opacity .3s,transform .3s;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(20px);box-shadow:0 4px 20px #ff2de24d}.snackbar-visible{opacity:1;transform:translate(-50%)translateY(0)}.snackbar-message{flex:1}.snackbar-close{color:var(--text-secondary,#9080c0);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:1rem;line-height:1}.snackbar-close:hover{color:var(--text-primary,#e0d0ff)}.help-modal{max-width:640px;max-height:85vh}.help-body{color:var(--text-secondary);padding:20px 24px;font-size:.92rem;line-height:1.6;overflow-y:auto}.help-section{margin-bottom:20px}.help-section:last-child{margin-bottom:0}.help-section h3{color:var(--neon-cyan);text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px;font-size:1rem}.help-section p{margin:0 0 8px}.help-section a{color:var(--neon-pink);text-decoration:none}.help-section a:hover{text-decoration:underline}.help-section ol,.help-section ul{margin:0;padding-left:20px}.help-section li{margin-bottom:4px}.help-section kbd{background:var(--bg-tertiary,#1a1a2e);border:1px solid var(--border);color:var(--neon-yellow,#ffe600);border-radius:3px;padding:1px 5px;font-family:inherit;font-size:.85em}.help-section code{background:var(--bg-tertiary,#1a1a2e);color:var(--neon-cyan);border-radius:3px;padding:1px 5px;font-size:.88em}.help-shortcuts{border-collapse:collapse;width:100%}.help-shortcuts td{border-bottom:1px solid var(--border);padding:4px 8px}.help-shortcuts td:first-child{white-space:nowrap;width:1%;padding-right:16px}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);background:var(--bg-surface);color:var(--text-primary);white-space:nowrap;border:1px solid var(--neon-cyan);pointer-events:none;opacity:0;z-index:1000;border-radius:2px;padding:5px 10px;font-family:Courier New,Courier,monospace;font-size:.7rem;line-height:1.4;transition:opacity .15s ease-in-out;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);box-shadow:0 0 6px #00fff733}[data-tooltip]:hover:after{opacity:1}[data-tooltip].tooltip-below:after{top:calc(100% + 6px);bottom:auto}.step-cell.step-probability{background-image:repeating-linear-gradient(-45deg,#0000,#0000 3px,#0000004d 3px 5px)}.step-cell.step-poly-marker{border-left:2px dashed var(--neon-yellow)}.sh-keyword{color:var(--neon-pink);font-weight:700}.sh-function{color:var(--neon-cyan)}.sh-string{color:var(--neon-green)}.sh-number{color:var(--neon-orange)}.sh-comment{color:var(--text-muted);font-style:italic}.sh-operator{color:var(--text-secondary)}.sh-text{color:var(--text-primary)}.tap-tempo-btn{cursor:pointer;min-width:60px;padding:4px 10px;font-weight:700}.tap-tempo-btn:active{transform:scale(.94)}:root[data-theme=light]{--bg-primary:#f5f5f5;--bg-secondary:#e8e8e8;--bg-tertiary:#ddd;--bg-surface:#fff;--text-primary:#1a1a1a;--text-secondary:#555;--text-muted:#999;--neon-pink:#d6006c;--neon-cyan:#07a;--neon-yellow:#b8860b;--neon-orange:#c50;--neon-green:#1a8a1a;--neon-purple:#70a;--danger:#c13;--warning:#c90;--success:#1a8a1a;--border:#ccc;--step-bg:#e0e0e0;--step-bg-beat:#d4d4d4;--step-hover:#c8c8c8;--step-current:#07a3;--glow-pink:0 0 4px #d6006c4d;--glow-cyan:0 0 4px #0077aa4d}:root[data-theme=light] body{background-image:none;background-color:var(--bg-primary)}:root[data-theme=dark]{--bg-primary:#141414;--bg-secondary:#1c1c1c;--bg-tertiary:#262626;--bg-surface:#2e2e2e;--text-primary:#e0e0e0;--text-secondary:#999;--text-muted:#666;--neon-pink:#e06090;--neon-cyan:#60b0d0;--neon-yellow:#d0b060;--neon-orange:#d08050;--neon-green:#70c070;--neon-purple:#a070c0;--danger:#e04040;--warning:#d0b060;--success:#70c070;--border:#3a3a3a;--step-bg:#1a1a1a;--step-bg-beat:#222;--step-hover:#333;--step-current:#60b0d033;--glow-pink:0 0 4px #e060904d;--glow-cyan:0 0 4px #60b0d04d}:root[data-theme=dark] body{background-image:none;background-color:var(--bg-primary)}