.transport-module{display:flex;gap:12px;align-items:center}.transport-btn{width:56px;height:56px;border-radius:50%;border:2px solid var(--bg-lighter);background:linear-gradient(180deg,var(--bg-light),var(--bg-dark));cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 4px 12px #0006,inset 0 1px #ffffff0d}.transport-btn:hover{transform:scale(1.05);border-color:var(--text-dim)}.transport-btn:active{transform:scale(.98)}.transport-icon{width:24px;height:24px;fill:var(--text-medium);transition:all .2s ease}.play-btn:hover .transport-icon{fill:var(--accent-teal)}.play-btn.active{border-color:var(--accent-teal);box-shadow:0 0 20px #00d4aa66,inset 0 1px #ffffff0d}.play-btn.active .transport-icon{fill:var(--accent-teal)}.stop-btn:hover .transport-icon{fill:var(--accent-red)}.module{position:relative;background:linear-gradient(180deg,var(--bg-medium) 0%,var(--bg-dark) 100%);border:1px solid var(--bg-lighter);border-radius:8px;padding:16px;box-shadow:0 4px 20px #0006,inset 0 1px #ffffff08;overflow:hidden;display:flex;flex-direction:column;min-height:0;height:100%}.module:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--module-color),transparent);opacity:.6}.module-header{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--bg-lighter)}.module-indicator{width:8px;height:8px;background:var(--module-color);border-radius:50%;box-shadow:0 0 10px var(--module-color);animation:glow-pulse 2s ease-in-out infinite}.module-title{font-family:Orbitron,sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text-bright);margin:0}.module-content{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;min-height:0}.module-screws{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.screw{position:absolute;width:8px;height:8px;background:linear-gradient(145deg,var(--bg-lighter),var(--bg-dark));border-radius:50%;border:1px solid var(--bg-light)}.screw:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:1px;background:var(--bg-dark)}.screw:nth-child(1){top:8px;left:8px}.screw:nth-child(2){top:8px;right:8px}.screw:nth-child(3){bottom:8px;left:8px}.screw:nth-child(4){bottom:8px;right:8px}.module.wide{grid-column:span 2}.module.full-width{grid-column:1 / -1}.knob-container{display:flex;flex-direction:column;align-items:center;gap:6px;-webkit-user-select:none;user-select:none}.knob-label{font-family:Orbitron,sans-serif;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--text-medium)}.knob{position:relative;cursor:grab;transition:transform .1s ease}.knob:hover{transform:scale(1.05)}.knob.active{cursor:grabbing;transform:scale(1.08)}.knob-track{position:absolute;top:0;right:0;bottom:0;left:0}.knob-svg{width:100%;height:100%;transform:rotate(0)}.knob-value-arc{transition:stroke-dasharray .1s ease;filter:drop-shadow(0 0 4px var(--knob-color))}.knob-body{position:absolute;top:15%;right:15%;bottom:15%;left:15%;background:linear-gradient(145deg,var(--bg-light),var(--bg-dark));border-radius:50%;box-shadow:0 2px 8px #0006,inset 0 1px #ffffff0d,inset 0 -1px #0003;transition:transform .05s ease}.knob.active .knob-body{box-shadow:0 2px 12px #00000080,inset 0 1px #ffffff14,inset 0 -1px #0000004d,0 0 15px color-mix(in srgb,var(--knob-color) 30%,transparent)}.knob-indicator{position:absolute;top:8%;left:50%;transform:translate(-50%);width:4px;height:20%;background:var(--knob-color);border-radius:2px;box-shadow:0 0 8px var(--knob-color)}.knob-value{font-family:JetBrains Mono,monospace;font-size:11px;font-weight:400;color:var(--text-dim);min-width:40px;text-align:center}.vco-content{display:flex;flex-direction:column;gap:16px}.waveform-selector{display:flex;gap:6px;justify-content:center}.waveform-btn{width:40px;height:36px;background:var(--bg-dark);border:1px solid var(--bg-lighter);border-radius:6px;padding:6px;cursor:pointer;transition:all .15s ease;color:var(--text-dim)}.waveform-btn:hover{border-color:var(--accent-orange);color:var(--accent-orange);background:var(--bg-light)}.waveform-btn.active{background:linear-gradient(180deg,var(--bg-light),var(--bg-dark));border-color:var(--accent-orange);color:var(--accent-orange);box-shadow:0 0 10px #ff6b354d,inset 0 1px #ffffff0d}.waveform-icon{width:100%;height:100%;transition:filter .15s ease}.waveform-icon.active{filter:drop-shadow(0 0 4px var(--accent-orange))}.vco-knobs{display:flex;justify-content:center;gap:20px}.vcf-content{display:flex;flex-direction:column;gap:16px}.filter-type-selector{display:flex;gap:4px;justify-content:center}.filter-type-btn{flex:1;max-width:50px;height:28px;background:var(--bg-dark);border:1px solid var(--bg-lighter);border-radius:4px;font-family:Orbitron,sans-serif;font-size:10px;font-weight:500;color:var(--text-dim);cursor:pointer;transition:all .15s ease}.filter-type-btn:hover{border-color:var(--accent-teal);color:var(--accent-teal)}.filter-type-btn.active{background:linear-gradient(180deg,var(--bg-light),var(--bg-dark));border-color:var(--accent-teal);color:var(--accent-teal);box-shadow:0 0 8px #00d4aa4d}.vcf-knobs{display:flex;justify-content:center;gap:16px}.env-content{display:flex;flex-direction:column;gap:12px}.envelope-display{background:var(--bg-dark);border:1px solid var(--bg-lighter);border-radius:6px;padding:8px}.envelope-svg{width:100%;height:40px;filter:drop-shadow(0 0 4px var(--accent-purple))}.env-knobs{display:flex;justify-content:space-between;gap:8px}.oscilloscope{position:relative;background:var(--bg-darkest);border:1px solid var(--bg-lighter);border-radius:6px;overflow:hidden}.oscilloscope-canvas{display:block}.oscilloscope-grid{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(90deg,rgba(77,171,247,.05) 1px,transparent 1px),linear-gradient(rgba(77,171,247,.05) 1px,transparent 1px);background-size:20px 15px}.master-content{display:flex;flex-direction:column;gap:16px;align-items:center}.master-controls{display:flex;justify-content:center}.midi-content{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow-y:auto}.midi-unsupported{text-align:center;padding:12px;color:var(--text-dim)}.midi-warning-icon{font-size:24px;margin-bottom:8px}.midi-unsupported p{margin:4px 0;font-size:12px}.midi-hint{color:var(--text-dim);font-size:10px!important}.midi-input-section{display:flex;flex-direction:column;gap:6px}.midi-input-header{display:flex;justify-content:space-between;align-items:center}.midi-input-header label{font-family:Orbitron,sans-serif;font-size:10px;text-transform:uppercase;color:var(--text-dim)}.midi-refresh-btn{width:24px;height:24px;background:var(--bg-dark);border:1px solid var(--bg-lighter);border-radius:4px;cursor:pointer;font-size:12px;transition:all .15s ease}.midi-refresh-btn:hover{background:var(--bg-light);border-color:var(--accent-red);transform:rotate(180deg)}.midi-input-select{width:100%;padding:8px 10px;background:var(--bg-dark);border:1px solid var(--bg-lighter);border-radius:4px;font-family:JetBrains Mono,monospace;font-size:11px;color:var(--text-bright);cursor:pointer}.midi-input-select:hover{border-color:var(--accent-red)}.midi-input-select:focus{outline:none;border-color:var(--accent-red);box-shadow:0 0 8px #ff47574d}.midi-sync-section{display:flex;flex-direction:column;gap:8px;padding-top:4px}.midi-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.midi-toggle input{display:none}.toggle-slider{position:relative;width:36px;height:20px;background:var(--bg-dark);border:1px solid var(--bg-lighter);border-radius:10px;transition:all .2s ease}.toggle-slider:before{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--text-dim);border-radius:50%;transition:all .2s ease}.midi-toggle input:checked+.toggle-slider{background:var(--accent-red);border-color:var(--accent-red)}.midi-toggle input:checked+.toggle-slider:before{transform:translate(16px);background:var(--text-bright)}.midi-toggle input:disabled+.toggle-slider{opacity:.5;cursor:not-allowed}.toggle-label{font-family:JetBrains Mono,monospace;font-size:11px;color:var(--text-medium)}.midi-tempo-display{display:flex;align-items:center;gap:8px;padding:10px;background:var(--bg-dark);border:1px solid var(--bg-lighter);border-radius:6px;transition:all .2s ease}.midi-tempo-display.synced{border-color:var(--accent-teal);box-shadow:0 0 10px #00d4aa33}.midi-tempo-label{font-size:10px;color:var(--text-dim);text-transform:uppercase}.midi-tempo-value{font-family:Orbitron,sans-serif;font-size:20px;font-weight:700;color:var(--accent-red);flex:1;text-align:center}.midi-sync-indicator{display:flex;align-items:center;gap:4px;font-size:9px;font-weight:600;text-transform:uppercase;color:var(--text-dim)}.midi-sync-indicator.active{color:var(--accent-teal)}.sync-dot{width:6px;height:6px;background:var(--accent-teal);border-radius:50%;animation:pulse .5s ease-in-out infinite}.midi-status{display:flex;align-items:center;gap:6px}.midi-connected,.midi-disconnected{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-medium)}.status-dot{width:8px;height:8px;background:var(--text-dim);border-radius:50%}.status-dot.connected{background:var(--accent-teal);box-shadow:0 0 8px var(--accent-teal)}.midi-help{text-align:center;padding-top:4px}.midi-help p{font-size:10px;color:var(--text-dim);margin:0;font-style:italic}.midi-debug-toggle{padding-top:8px;border-top:1px solid var(--bg-lighter)}.midi-toggle.small .toggle-slider{width:28px;height:16px}.midi-toggle.small .toggle-slider:before{width:10px;height:10px;top:2px;left:2px}.midi-toggle.small input:checked+.toggle-slider:before{transform:translate(12px)}.midi-toggle.small .toggle-label{font-size:10px}.midi-debug-panel{background:var(--bg-darkest);border:1px solid var(--bg-lighter);border-radius:6px;overflow:hidden}.midi-debug-header{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:var(--bg-dark);border-bottom:1px solid var(--bg-lighter);font-size:10px;color:var(--text-dim);text-transform:uppercase}.midi-debug-clear{padding:2px 6px;background:transparent;border:1px solid var(--bg-lighter);border-radius:3px;color:var(--text-dim);font-size:9px;cursor:pointer}.midi-debug-clear:hover{border-color:var(--accent-red);color:var(--accent-red)}.midi-debug-messages{max-height:120px;overflow-y:auto;font-family:JetBrains Mono,monospace;font-size:9px}.midi-debug-empty{padding:12px;text-align:center;color:var(--text-dim);font-style:italic}.midi-debug-msg{display:flex;gap:8px;padding:3px 8px;border-bottom:1px solid var(--bg-light)}.midi-debug-msg:hover{background:var(--bg-light)}.midi-debug-msg .msg-time{color:var(--text-dim);min-width:55px}.midi-debug-msg .msg-type{color:var(--accent-teal);min-width:50px;font-weight:500}.midi-debug-msg .msg-data{color:var(--text-medium)}.midi-debug-msg.noteon .msg-type{color:var(--accent-orange)}.midi-debug-msg.noteoff .msg-type{color:var(--accent-purple)}.midi-debug-msg.cc .msg-type{color:var(--accent-blue)}.midi-debug-msg.start .msg-type,.midi-debug-msg.stop .msg-type,.midi-debug-msg.continue .msg-type{color:var(--accent-yellow)}.midi-presets{margin-top:auto;padding-top:12px;border-top:1px solid var(--bg-lighter)}.midi-presets-label{font-family:Orbitron,sans-serif;font-size:10px;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}.midi-presets-buttons{display:flex;gap:6px}.midi-preset-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:var(--bg-dark);border:1px solid var(--bg-lighter);border-radius:6px;cursor:pointer;transition:all .15s ease}.midi-preset-btn:hover{background:var(--bg-light);border-color:var(--accent-orange)}.midi-preset-btn .preset-icon{font-size:16px}.midi-preset-btn .preset-name{font-family:JetBrains Mono,monospace;font-size:9px;color:var(--text-dim)}.midi-preset-btn:hover .preset-name{color:var(--text-bright)}.chord-module{min-width:280px}.chord-content{display:flex;flex-direction:column;gap:12px}.chord-presets{display:flex;flex-direction:column;gap:6px}.chord-presets label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}.preset-buttons{display:flex;flex-wrap:wrap;gap:4px}.preset-btn{background:var(--bg-light);border:1px solid var(--bg-lighter);border-radius:4px;padding:4px 8px;font-size:9px;color:var(--text-medium);cursor:pointer;transition:all .15s ease}.preset-btn:hover{background:var(--accent-pink);color:var(--bg-darkest);border-color:var(--accent-pink)}.chord-slots{display:flex;gap:6px;flex-wrap:wrap;padding:8px;background:var(--bg-darkest);border-radius:6px;border:1px solid var(--bg-lighter)}.chord-slot{position:relative;display:flex;align-items:center;gap:4px;background:var(--bg-medium);border:2px solid var(--bg-lighter);border-radius:6px;padding:6px 10px;cursor:pointer;transition:all .15s ease;min-width:60px}.chord-slot:hover{border-color:var(--accent-pink)}.chord-slot.selected{border-color:var(--accent-pink);background:#ec48991a;box-shadow:0 0 10px #ec48994d}.chord-label{font-family:JetBrains Mono,monospace;font-size:12px;font-weight:600;color:var(--text-bright)}.preview-btn{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:8px;padding:2px 4px;opacity:.6;transition:all .15s ease}.preview-btn:hover{opacity:1;color:var(--accent-pink)}.remove-btn{position:absolute;top:-6px;right:-6px;width:16px;height:16px;background:var(--bg-dark);border:1px solid var(--bg-lighter);border-radius:50%;color:var(--text-dim);font-size:12px;line-height:1;cursor:pointer;opacity:0;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.chord-slot:hover .remove-btn{opacity:1}.remove-btn:hover{background:var(--error);color:#fff;border-color:var(--error)}.add-chord-btn{background:var(--bg-light);border:2px dashed var(--bg-lighter);border-radius:6px;padding:6px 14px;color:var(--text-dim);font-size:16px;cursor:pointer;transition:all .15s ease}.add-chord-btn:hover{border-color:var(--accent-pink);color:var(--accent-pink)}.chord-editor{display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--bg-darkest);border-radius:6px;border:1px solid var(--bg-lighter)}.editor-row{display:flex;flex-direction:column;gap:4px}.editor-row label{font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}.note-buttons,.type-buttons{display:flex;gap:3px;flex-wrap:wrap}.note-btn,.type-btn{background:var(--bg-medium);border:1px solid var(--bg-lighter);border-radius:4px;padding:4px 8px;font-size:10px;font-family:JetBrains Mono,monospace;color:var(--text-medium);cursor:pointer;transition:all .15s ease;min-width:28px;text-align:center}.note-btn:hover,.type-btn:hover{border-color:var(--accent-pink);color:var(--text-bright)}.note-btn.active,.type-btn.active{background:var(--accent-pink);border-color:var(--accent-pink);color:var(--bg-darkest)}.apply-buttons{display:flex;gap:6px}.apply-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;background:var(--bg-light);border:1px solid var(--bg-lighter);border-radius:6px;padding:8px 10px;font-size:11px;font-weight:500;color:var(--text-medium);cursor:pointer;transition:all .15s ease}.apply-btn span{font-size:12px}.apply-btn:hover{border-color:var(--accent-pink);color:var(--text-bright)}.apply-btn.arp:hover{background:#6366f133;border-color:var(--accent-purple)}.apply-btn.bass:hover{background:#ec489933;border-color:var(--accent-pink)}.apply-btn.chords:hover{background:#10b98133;border-color:var(--accent-green)}.drone-module{min-width:260px}.drone-content{display:flex;flex-direction:column;gap:12px}.drone-voices{display:flex;flex-direction:column;gap:8px}.drone-voice{background:var(--bg-darkest);border:1px solid var(--bg-lighter);border-radius:6px;padding:8px 10px;transition:all .3s ease}.drone-voice.active{border-color:var(--accent-purple);box-shadow:0 0 15px #9d4edd33;background:#9d4edd0d}.voice-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.voice-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim)}.drone-voice.active .voice-label{color:var(--accent-purple)}.voice-toggle{width:28px;height:28px;border-radius:50%;background:var(--bg-medium);border:2px solid var(--bg-lighter);color:var(--text-dim);font-size:10px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.voice-toggle:hover:not(:disabled){border-color:var(--accent-purple);color:var(--accent-purple)}.voice-toggle.on{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff;box-shadow:0 0 10px #9d4edd80}.voice-toggle:disabled{opacity:.5;cursor:not-allowed}.voice-controls{display:flex;flex-direction:column;gap:6px}.note-control{display:flex;align-items:center;gap:6px;justify-content:center}.note-btn{width:24px;height:24px;border-radius:4px;background:var(--bg-medium);border:1px solid var(--bg-lighter);color:var(--text-medium);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s ease}.note-btn:hover{border-color:var(--accent-purple);color:var(--accent-purple)}.note-display{font-family:JetBrains Mono,monospace;font-size:14px;font-weight:600;color:var(--text-bright);min-width:40px;text-align:center}.waveform-select{display:flex;gap:3px}.wf-btn{flex:1;padding:4px 6px;border-radius:3px;background:var(--bg-medium);border:1px solid var(--bg-lighter);color:var(--text-dim);font-size:9px;font-family:JetBrains Mono,monospace;cursor:pointer;transition:all .15s ease}.wf-btn:hover{border-color:var(--accent-purple);color:var(--text-medium)}.wf-btn.active{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff}.volume-slider{padding:2px 0}.volume-slider input[type=range]{width:100%;height:4px;border-radius:2px;background:var(--bg-medium);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.volume-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent-purple);cursor:pointer;transition:all .15s ease}.volume-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 8px #9d4edd80}.drone-global{display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--bg-darkest);border-radius:6px;border:1px solid var(--bg-lighter)}.global-knobs{display:flex;justify-content:space-around;gap:4px}.stop-all-btn{width:100%;padding:10px;border-radius:6px;background:linear-gradient(180deg,var(--bg-light),var(--bg-medium));border:1px solid var(--bg-lighter);color:var(--text-medium);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s ease}.stop-all-btn:hover{background:var(--error);border-color:var(--error);color:#fff}@keyframes drone-pulse{0%,to{box-shadow:0 0 10px #9d4edd33}50%{box-shadow:0 0 20px #9d4edd66}}.drone-voice.active{animation:drone-pulse 3s ease-in-out infinite}.seq-content{display:flex;flex-direction:column;gap:12px;flex:1;height:100%;min-height:0;overflow:hidden}.seq-controls{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:8px;border-bottom:1px solid var(--bg-lighter);flex-shrink:0}.seq-transport-knobs{display:flex;gap:16px}.seq-scale-controls{display:flex;gap:12px}.scale-select{display:flex;flex-direction:column;gap:4px}.scale-select label{font-family:Orbitron,sans-serif;font-size:10px;text-transform:uppercase;color:var(--text-dim)}.scale-select select{background:var(--bg-dark);border:1px solid var(--bg-lighter);border-radius:4px;padding:6px 10px;font-family:JetBrains Mono,monospace;font-size:12px;color:var(--text-bright);cursor:pointer;min-width:100px}.scale-select select:hover{border-color:var(--accent-yellow)}.scale-select select:focus{outline:none;border-color:var(--accent-yellow);box-shadow:0 0 8px #f7c9484d}.seq-buttons{display:flex;gap:8px}.seq-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--bg-dark);border:1px solid var(--bg-lighter);border-radius:6px;font-family:JetBrains Mono,monospace;font-size:12px;color:var(--text-medium);cursor:pointer;transition:all .15s ease}.seq-btn:hover{background:var(--bg-light);border-color:var(--accent-yellow);color:var(--text-bright)}.btn-icon{font-size:14px}.piano-roll-container{display:flex;background:var(--bg-darkest);border:1px solid var(--bg-lighter);border-radius:8px;overflow:hidden;flex:1 1 auto;min-height:0;overflow-y:auto}.piano-keys{display:flex;flex-direction:column;background:var(--bg-dark);border-right:1px solid var(--bg-lighter);flex-shrink:0}.piano-key{flex:1;min-height:18px;max-height:28px;padding:0 10px;display:flex;align-items:center;justify-content:flex-end;font-family:JetBrains Mono,monospace;font-size:10px;color:var(--text-dim);border-bottom:1px solid var(--bg-lighter);min-width:50px}.piano-key.octave{color:var(--text-medium);background:var(--bg-light)}.piano-roll-grid{display:flex;flex-direction:column;flex:1}.piano-roll-row{display:grid;grid-template-columns:repeat(16,1fr);border-bottom:1px solid var(--bg-light);flex:1;min-height:18px;max-height:28px}.piano-roll-cell{min-height:18px;border-right:1px solid var(--bg-light);cursor:pointer;transition:all .1s ease}.piano-roll-cell:nth-child(4n+1){border-left:1px solid var(--bg-lighter)}.piano-roll-cell:hover{background:#f7c9481a}.piano-roll-cell.active{background:var(--accent-yellow);box-shadow:inset 0 1px #fff3,0 0 8px #f7c94880}.piano-roll-cell.active.accent{background:var(--accent-orange);box-shadow:inset 0 1px #fff3,0 0 12px #ff6b3599}.piano-roll-cell.current{background:#4dabf74d}.piano-roll-cell.active.current{background:var(--accent-blue);animation:step-active .15s ease}.step-indicators{display:flex;gap:0;flex-shrink:0}.indicator-spacer{width:50px;flex-shrink:0}.indicators-grid{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;flex:1}.step-indicator{height:32px;background:var(--bg-dark);border:1px solid var(--bg-lighter);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}.step-indicator:nth-child(4n+1){border-color:var(--bg-light)}.step-indicator:hover{border-color:var(--accent-yellow)}.step-indicator.active{background:linear-gradient(180deg,var(--bg-light),var(--bg-dark));border-color:var(--accent-yellow)}.step-indicator.accent{border-color:var(--accent-orange);box-shadow:0 0 6px #ff6b3566}.step-indicator.current{background:var(--accent-blue);border-color:var(--accent-blue);box-shadow:0 0 15px #4dabf780}.step-indicator.current.active{animation:step-active .15s ease}.step-number{font-family:Orbitron,sans-serif;font-size:10px;font-weight:500;color:var(--text-dim)}.step-indicator.active .step-number,.step-indicator.current .step-number{color:var(--text-bright)}.seq-hint{text-align:center;font-size:10px;color:var(--text-dim);font-style:italic;flex-shrink:0;padding-top:4px}.app{display:flex;flex-direction:column;min-height:100vh;background:var(--bg-darkest);position:relative;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:linear-gradient(180deg,var(--bg-medium),var(--bg-dark));border-bottom:1px solid var(--bg-lighter);position:relative;z-index:100}.header-left,.header-right{flex:1}.header-center{display:flex;justify-content:center}.header-right{display:flex;justify-content:flex-end;align-items:center;gap:16px}.logo{display:flex;align-items:center;gap:12px}.logo-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;gap:3px;background:linear-gradient(145deg,var(--bg-light),var(--bg-dark));border-radius:8px;border:1px solid var(--bg-lighter)}.logo-wave{width:4px;height:16px;background:var(--accent-orange);border-radius:2px;animation:wave-dance 1s ease-in-out infinite}.logo-wave:nth-child(1){animation-delay:0s;height:12px}.logo-wave:nth-child(2){animation-delay:.15s;height:20px;background:var(--accent-teal)}.logo-wave:nth-child(3){animation-delay:.3s;height:8px;background:var(--accent-purple)}@keyframes wave-dance{0%,to{transform:scaleY(1)}50%{transform:scaleY(.6)}}.logo-text{font-family:Orbitron,sans-serif;font-size:20px;font-weight:900;letter-spacing:4px;background:linear-gradient(90deg,var(--accent-orange),var(--accent-teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.version{font-family:JetBrains Mono,monospace;font-size:10px;color:var(--text-dim);padding:2px 6px;background:var(--bg-dark);border-radius:3px}.keyboard-hint{font-size:12px;color:var(--text-dim)}.keyboard-hint kbd{display:inline-block;padding:3px 8px;background:var(--bg-dark);border:1px solid var(--bg-lighter);border-radius:4px;font-family:JetBrains Mono,monospace;font-size:11px;color:var(--text-medium);margin:0 4px}.github-link{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg-dark);border:1px solid var(--bg-lighter);border-radius:6px;color:var(--text-medium);text-decoration:none;transition:all .2s ease}.github-link:hover{background:var(--bg-light);border-color:var(--accent-teal);color:var(--text-bright)}.github-icon{width:18px;height:18px;flex-shrink:0}.github-stars{height:20px;opacity:.9;transition:opacity .2s ease}.github-link:hover .github-stars{opacity:1}.app-main{flex:1;padding:24px;position:relative;overflow-y:auto}.init-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0a0a0ff2;display:flex;align-items:center;justify-content:center;z-index:1000;cursor:pointer;animation:fade-in .3s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.init-content{text-align:center;animation:bounce-in .5s ease}@keyframes bounce-in{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.init-icon{width:100px;height:100px;margin:0 auto 24px;color:var(--accent-teal);animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{filter:drop-shadow(0 0 20px var(--accent-teal));transform:scale(1)}50%{filter:drop-shadow(0 0 40px var(--accent-teal));transform:scale(1.05)}}.init-content h2{font-family:Orbitron,sans-serif;font-size:28px;font-weight:700;color:var(--text-bright);margin-bottom:8px}.init-content p{font-size:14px;color:var(--text-dim)}.module-rack{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 300px;grid-template-rows:auto 1fr;gap:12px;height:calc(100vh - 130px);position:relative;z-index:1}.synth-modules{display:contents}.synth-modules>:nth-child(1){grid-column:1;grid-row:1}.synth-modules>:nth-child(2){grid-column:2;grid-row:1}.synth-modules>:nth-child(3){grid-column:3;grid-row:1}.synth-modules>:nth-child(4){grid-column:4;grid-row:1}.synth-modules>:nth-child(5){grid-column:5;grid-row:1 / 3}.sequencer-row{grid-column:1 / 5;grid-row:2;display:flex;gap:12px;min-height:0;height:100%}.sequencer-row>:first-child{flex:1;min-height:0;height:100%}.sequencer-row>:nth-child(2),.sequencer-row>:nth-child(3){flex:0 0 280px;min-height:0;height:100%;max-height:100%;overflow-y:auto}.bg-pattern{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at 20% 20%,rgba(255,107,53,.03) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(0,212,170,.03) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(157,78,221,.02) 0%,transparent 70%);z-index:0}.app-footer{padding:12px 24px;text-align:center;border-top:1px solid var(--bg-lighter);background:var(--bg-dark)}.footer-text{font-size:11px;color:var(--text-dim);letter-spacing:1px}.footer-credit{font-size:12px;color:var(--text-medium);margin-top:6px}.footer-credit a{color:var(--accent-teal);text-decoration:none;font-weight:500;transition:color .2s ease}.footer-credit a:hover{color:var(--accent-orange);text-decoration:underline}@media (max-width: 1400px){.module-rack{grid-template-columns:1fr 1fr 1fr 280px;grid-template-rows:auto auto 1fr}.synth-modules>:nth-child(1){grid-column:1;grid-row:1}.synth-modules>:nth-child(2){grid-column:2;grid-row:1}.synth-modules>:nth-child(3){grid-column:3;grid-row:1}.synth-modules>:nth-child(4){grid-column:1;grid-row:2}.synth-modules>:nth-child(5){grid-column:4;grid-row:1 / 4}.sequencer-row{grid-column:1 / 4;grid-row:3}}@media (max-width: 1100px){.module-rack{grid-template-columns:1fr 1fr 260px;grid-template-rows:auto auto 1fr;height:auto;min-height:calc(100vh - 130px)}.synth-modules>:nth-child(1){grid-column:1;grid-row:1}.synth-modules>:nth-child(2){grid-column:2;grid-row:1}.synth-modules>:nth-child(3){grid-column:1;grid-row:2}.synth-modules>:nth-child(4){grid-column:2;grid-row:2}.synth-modules>:nth-child(5){grid-column:3;grid-row:1 / 4}.sequencer-row{grid-column:1 / 3;grid-row:3}.app-header{flex-direction:column;gap:12px;padding:12px 16px}.header-left,.header-right{width:100%;justify-content:center}}@media (max-width: 768px){.module-rack{grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto) 1fr}.synth-modules>:nth-child(1){grid-column:1;grid-row:1}.synth-modules>:nth-child(2){grid-column:2;grid-row:1}.synth-modules>:nth-child(3){grid-column:1;grid-row:2}.synth-modules>:nth-child(4){grid-column:2;grid-row:2}.synth-modules>:nth-child(5){grid-column:1 / 3;grid-row:3}.sequencer-row{grid-column:1 / 3;grid-row:4}.keyboard-hint{display:none}}:root{--bg-darkest: #0a0a0f;--bg-dark: #12121a;--bg-medium: #1a1a26;--bg-light: #242433;--bg-lighter: #2d2d40;--accent-orange: #ff6b35;--accent-orange-dim: #cc5528;--accent-teal: #00d4aa;--accent-teal-dim: #00a885;--accent-purple: #9d4edd;--accent-purple-dim: #7b3eb0;--accent-yellow: #f7c948;--accent-red: #ff4757;--accent-blue: #4dabf7;--text-bright: #f0f0f5;--text-medium: #a0a0b0;--text-dim: #606075;--module-vco: var(--accent-orange);--module-vcf: var(--accent-teal);--module-vca: var(--accent-purple);--module-seq: var(--accent-yellow);--module-fx: var(--accent-blue);--glow-orange: 0 0 20px rgba(255, 107, 53, .4);--glow-teal: 0 0 20px rgba(0, 212, 170, .4);--glow-purple: 0 0 20px rgba(157, 78, 221, .4);--glow-yellow: 0 0 20px rgba(247, 201, 72, .4)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{font-family:JetBrains Mono,monospace;background:var(--bg-darkest);color:var(--text-bright);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--bg-lighter);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}.glow-orange{box-shadow:var(--glow-orange)}.glow-teal{box-shadow:var(--glow-teal)}.glow-purple{box-shadow:var(--glow-purple)}.glow-yellow{box-shadow:var(--glow-yellow)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes glow-pulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}@keyframes slide-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes step-active{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.animate-in{animation:slide-in .4s ease-out}