*{box-sizing:border-box;margin:0;padding:0}:root{--color-bg-primary: #1a1a2e;--color-bg-secondary: #16213e;--color-text: #e0e0e0;--color-text-muted: #888;--color-accent-orange: #ff6b35;--color-accent-green: #00ff88;--color-accent-808: #ff8800;--color-panel-light: #3a3a5a;--color-panel-dark: #2a2a4a;--color-input-bg: #1a1a2e;--color-border: #333}body{font-family:Segoe UI,Arial,sans-serif;background:linear-gradient(135deg,var(--color-bg-primary) 0%,var(--color-bg-secondary) 100%);color:var(--color-text);min-height:100vh;padding:20px}h1{text-align:center;color:var(--color-accent-orange);margin-bottom:10px;text-shadow:0 0 10px rgba(255,107,53,.5)}.subtitle{text-align:center;color:var(--color-text-muted);margin-bottom:30px;font-size:14px}.transport{display:flex;justify-content:center;gap:15px;margin-bottom:30px;align-items:center}.shortcut-hint{font-size:11px;color:var(--color-text-muted);background:#0000004d;padding:4px 10px;border-radius:4px}.floating-transport{position:fixed;top:0;left:0;right:0;display:flex;justify-content:center;gap:15px;padding:10px 20px;background:linear-gradient(180deg,#1a1a2efa,#16213ef2);border-bottom:1px solid var(--color-border);box-shadow:0 2px 10px #00000080;align-items:center;z-index:1000;opacity:0;transform:translateY(-100%);transition:opacity .3s,transform .3s;pointer-events:none}.floating-transport.visible{opacity:1;transform:translateY(0);pointer-events:auto}.floating-transport button{padding:8px 20px;font-size:14px}.floating-transport .tempo-control{padding:6px 15px}.floating-transport .tempo-control input{width:60px}#floatingStartBtn{background:#4caf50;color:#fff}#floatingStartBtn.playing{background:#f44336}.tempo-control{display:flex;align-items:center;gap:10px;background:var(--color-panel-dark);padding:10px 20px;border-radius:5px}.tempo-control input{width:80px}.swing-control{display:flex;align-items:center;gap:8px;background:var(--color-panel-dark);padding:8px 15px;border-radius:5px;font-size:12px}.swing-control span:first-child{color:#f80;font-weight:700;letter-spacing:1px}.swing-control input{width:60px;accent-color:#ff8800}.swing-control span:last-child{min-width:35px;color:#f80;font-family:monospace}.floating-transport .swing-control{padding:5px 10px}.floating-transport .swing-control input{width:50px}.transport-status{display:flex;align-items:center;gap:8px;background:#0006;padding:6px 12px;border-radius:4px;font-size:11px;font-family:monospace;border:1px solid rgba(255,255,255,.1)}.status-mode{font-weight:700;padding:2px 8px;border-radius:3px;text-transform:uppercase;letter-spacing:1px}.status-mode.clickable{cursor:pointer;transition:all .15s ease}.status-mode.clickable:hover{transform:scale(1.05);filter:brightness(1.2);box-shadow:0 0 8px currentColor}.status-mode.pattern-mode{background:#0f83;color:#0f8}.status-mode.scene-mode{background:#0af3;color:#0af}.status-mode.song-mode{background:#f803;color:#f80}.status-separator{color:#ffffff4d}.status-detail{color:#aaa}button{padding:12px 30px;font-size:16px;cursor:pointer;border:none;border-radius:5px;transition:all .2s}button:hover{transform:scale(1.05)}#startBtn{background:#4caf50;color:#fff}#startBtn.playing{background:#f44336}input[type=range]{-webkit-appearance:none;background:var(--color-input-bg);height:8px;border-radius:4px;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:linear-gradient(135deg,#666,#444);border-radius:50%;box-shadow:0 2px 5px #00000080}.led{width:10px;height:10px;border-radius:50%;background:#333;box-shadow:inset 0 1px 3px #00000080}.led.on{background:red;box-shadow:0 0 10px red}.rec-led{background:#500}.rec-led.recording{background:red;box-shadow:0 0 10px red;animation:rec-blink 1s ease-in-out infinite}@keyframes rec-blink{0%,to{opacity:1}50%{opacity:.5}}.rec-btn{padding:10px 20px;border-radius:5px;border:none;cursor:pointer;font-size:14px;font-weight:700;background:#500;color:#f66;transition:all .2s}.rec-btn:hover{background:#700;color:#f88}.rec-btn.recording{background:red;color:#fff;animation:rec-pulse 1s ease-in-out infinite}@keyframes rec-pulse{0%,to{box-shadow:0 0 5px red}50%{box-shadow:0 0 15px red,0 0 30px red}}.file-controls{display:flex;justify-content:center;align-items:center;gap:20px;margin-bottom:25px;flex-wrap:wrap}.preset-control{display:flex;align-items:center;gap:10px}.preset-control label{color:var(--color-text-muted);font-size:14px}.preset-control select{padding:8px 12px;background:var(--color-panel-dark);border:1px solid var(--color-border);color:var(--color-text);border-radius:5px;font-size:14px;cursor:pointer}.preset-control select:hover{border-color:var(--color-accent-green)}.theme-selector,.latency-selector{display:flex;align-items:center;gap:10px}.theme-selector label,.latency-selector label{color:var(--color-text-muted);font-size:14px}.theme-selector select,.latency-selector select{padding:8px 12px;background:var(--color-panel-dark);border:1px solid var(--color-border);color:var(--color-text);border-radius:5px;font-size:14px;cursor:pointer}.theme-selector select:hover,.latency-selector select:hover{border-color:var(--color-accent-green)}.file-buttons{display:flex;gap:10px}.file-btn{padding:8px 15px;font-size:13px;background:var(--color-panel-dark);border:1px solid var(--color-border);color:var(--color-text);border-radius:5px;cursor:pointer;transition:all .2s}.file-btn:hover{background:var(--color-panel-light);border-color:var(--color-accent-green)}.file-btn.danger:hover{border-color:#f44;color:#f44}.file-btn.midi-btn{background:linear-gradient(180deg,#2a3a4a,#1a2a3a);border-color:#4a9eff;color:#4a9eff}.file-btn.midi-btn:hover{background:linear-gradient(180deg,#3a4a5a,#2a3a4a);border-color:#6ab0ff;color:#6ab0ff;box-shadow:0 0 8px #4a9eff4d}.save-indicator{color:var(--color-accent-green);font-size:13px;opacity:0;transition:opacity .3s}.save-indicator.visible{opacity:1}.piano-popup{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(180deg,#1a1a2efa,#16213efa);border-top:2px solid var(--color-accent-orange);box-shadow:0 -5px 20px #00000080;padding:15px 20px 20px;z-index:1001;transform:translateY(100%);transition:transform .3s ease-out}.piano-popup.visible{transform:translateY(0)}.piano-popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.piano-popup-title{font-size:14px;color:var(--color-text)}.piano-popup-title .target-info{color:var(--color-accent-orange);font-weight:700}.piano-popup-close{background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted);padding:5px 12px;font-size:12px;cursor:pointer;border-radius:3px}.piano-popup-close:hover{background:var(--color-panel-dark);color:var(--color-text);transform:none}.piano-keyboard{position:relative;height:120px;background:#222;border-radius:5px;overflow:hidden;-webkit-user-select:none;user-select:none}.piano-key{position:absolute;bottom:0;cursor:pointer;transition:background .1s}.piano-key.white{height:100%;background:linear-gradient(180deg,#f8f8f8,#e8e8e8 85%,#d0d0d0);border:1px solid #999;border-radius:0 0 4px 4px;z-index:1}.piano-key.white:hover{background:linear-gradient(180deg,#fff,#f0f0f0 85%,#e0e0e0)}.piano-key.white:active,.piano-key.white.selected{background:linear-gradient(180deg,var(--color-accent-orange) 0%,#cc5522 100%)}.piano-key.black{height:60%;background:linear-gradient(180deg,#333,#1a1a1a);border:1px solid #000;border-radius:0 0 3px 3px;z-index:2}.piano-key.black:hover{background:linear-gradient(180deg,#444,#222)}.piano-key.black:active,.piano-key.black.selected{background:linear-gradient(180deg,#f84,#c52)}.key-label{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:10px;color:#666;font-weight:700}.piano-key.white.selected .key-label{color:#fff}footer{text-align:center;margin-top:30px;color:#555;font-size:12px}.visualizer-panel{background:linear-gradient(180deg,#0a0a18,#12082a,#0a1520);border:1px solid #2a1a4a;border-radius:10px;margin:20px 0;overflow:hidden;box-shadow:0 0 20px #00ffff1a,0 0 40px #ff00ff0d,inset 0 1px #ffffff0d}.visualizer-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#0000004d;border-bottom:1px solid rgba(255,255,255,.05)}.visualizer-title{font-size:14px;font-weight:700;background:linear-gradient(90deg,#0ff,#f0f,#0ff);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3s linear infinite}@keyframes shimmer{0%{background-position:0% center}to{background-position:200% center}}.visualizer-controls{display:flex;gap:8px}.viz-mode-btn{padding:5px 12px;font-size:11px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#888;border-radius:4px;cursor:pointer;transition:all .2s}.viz-mode-btn:hover{background:#ffffff1a;color:#fff;transform:none}.viz-mode-btn.active{background:linear-gradient(180deg,#0ff3,#f0f3);border-color:#0ff;color:#0ff;box-shadow:0 0 10px #00ffff4d}.visualizer-canvas-container{position:relative;height:280px;background:#0a0a15}.visualizer-canvas{width:100%;height:100%;display:block}.visualizer-reflection{position:absolute;bottom:0;left:0;right:0;height:30%;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 100%);pointer-events:none}.viz-btn{padding:8px 15px;font-size:13px;background:linear-gradient(180deg,#1a1a3a,#0a0a2a);border:1px solid #4a2a8a;color:#a8f;border-radius:5px;cursor:pointer;transition:all .2s}.viz-btn:hover{background:linear-gradient(180deg,#2a2a4a,#1a1a3a);border-color:#6a4aaa;color:#caf;box-shadow:0 0 10px #aa88ff4d}.viz-btn.active{background:linear-gradient(180deg,#3a2a6a,#2a1a5a);border-color:#0ff;color:#0ff;box-shadow:0 0 15px #0ff6}.minimod{--minimod-accent: #ff00ff;--minimod-accent-rgb: 255, 0, 255}.minimod .machine-title{display:flex;align-items:center;gap:10px}.minimod-preset-select{margin-left:auto;margin-right:10px;background:#2a2a4a;color:#fff;border:1px solid #4a4a6a;border-radius:4px;padding:4px 8px;font-size:11px;cursor:pointer}.minimod-preset-select:hover{border-color:#f0f}.minimod-container{position:relative;padding:10px}.minimod-cables{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.minimod-cables .patch-cable{pointer-events:stroke;cursor:pointer;transition:stroke-width .2s}.minimod-cables .patch-cable:hover{stroke-width:6}.minimod-cables .temp-cable{display:none;opacity:.7}.minimod-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;position:relative;z-index:5}.mod-module{background:linear-gradient(180deg,#3a3a5a,#2a2a4a);border:1px solid #4a4a6a;border-radius:6px;padding:8px;min-width:85px;display:flex;flex-direction:column;gap:5px;flex:0 0 auto}.mod-module.wide{min-width:160px}.mod-module.extra-wide{min-width:280px;flex:1}.mod-module .mod-title{font-size:10px;font-weight:700;text-align:center;color:#fff;text-transform:uppercase;letter-spacing:1px;padding-bottom:4px;border-bottom:1px solid #4a4a6a}.mod-vco1 .mod-title,.mod-vco2 .mod-title,.mod-vco3 .mod-title{color:#0f8}.mod-lfo1 .mod-title,.mod-lfo2 .mod-title{color:#0cf}.mod-noise .mod-title{color:#888}.mod-env1 .mod-title,.mod-env2 .mod-title{color:#fc0}.mod-vcf .mod-title{color:#f60}.mod-vca1 .mod-title,.mod-vca2 .mod-title{color:#f0f}.mod-mix .mod-title{color:#6f6}.mod-mult .mod-title{color:#aaa}.mod-ring .mod-title{color:#f6c}.mod-sh .mod-title{color:#6cf}.mod-slew .mod-title{color:#c9f}.mod-clock .mod-title{color:#f66}.mod-seq .mod-title{color:#fa0}.mod-output .mod-title{color:#f36}.mod-controls{display:flex;flex-wrap:wrap;gap:2px;justify-content:center}.mod-controls .knob-container{transform:scale(.7);margin:-8px}.mod-jacks{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:auto;padding-top:5px}.mod-jack{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:transform .15s}.mod-jack:hover{transform:scale(1.1)}.mod-jack .jack-label{font-size:7px;color:#888;text-transform:uppercase}.mod-jack .jack-hole{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#1a1a2e,#000);border:2px solid #666;box-shadow:inset 0 2px 4px #000c,0 1px 2px #ffffff1a}.mod-jack.output .jack-hole{border-color:#0f8;box-shadow:inset 0 2px 4px #000c,0 0 6px #0f86}.mod-jack.output.mod .jack-hole{border-color:#0cf;box-shadow:inset 0 2px 4px #000c,0 0 6px #0cf6}.mod-jack.output.gate .jack-hole{border-color:#f0f;box-shadow:inset 0 2px 4px #000c,0 0 6px #f0f6}.mod-jack.input .jack-hole{border-color:#f60;box-shadow:inset 0 2px 4px #000c,0 0 6px #f606}.mod-jack.main-out .jack-hole{border-color:#f36;width:20px;height:20px;box-shadow:inset 0 2px 4px #000c,0 0 10px #ff336680}.mod-jack.valid-target .jack-hole{border-color:#0f0;box-shadow:0 0 15px #0f0c;animation:pulse-valid .5s infinite}.mod-jack.invalid-target .jack-hole{border-color:red;box-shadow:0 0 10px #ff000080}@keyframes pulse-valid{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.mod-trigger-btn{background:linear-gradient(180deg,#4a4a6a,#3a3a5a);border:1px solid #5a5a7a;border-radius:4px;color:#fff;font-size:9px;padding:4px 8px;cursor:pointer;transition:all .15s}.mod-trigger-btn.small{padding:3px 6px;font-size:8px}.mod-trigger-btn:hover{background:linear-gradient(180deg,#5a5a7a,#4a4a6a)}.mod-trigger-btn:active,.mod-trigger-btn.active{background:linear-gradient(180deg,#fc0,#f90);color:#000;box-shadow:0 0 15px #fc09}.mod-start-btn{background:linear-gradient(180deg,#3a5a3a,#2a4a2a);border:1px solid #4a6a4a;border-radius:4px;color:#0f8;font-size:9px;padding:5px 10px;cursor:pointer;transition:all .15s}.mod-start-btn:hover{background:linear-gradient(180deg,#4a6a4a,#3a5a3a)}.mod-start-btn.running{background:linear-gradient(180deg,#5a3a3a,#4a2a2a);border-color:#6a4a4a;color:#f66}.seq-display{padding:5px}.seq-steps{display:flex;gap:4px;justify-content:center}.seq-step{display:flex;flex-direction:column;align-items:center;gap:3px;padding:3px;border-radius:3px;background:#0003;transition:background .15s}.seq-step.current{background:#ffaa004d;box-shadow:0 0 8px #ffaa0080}.seq-knob-container{transform:scale(.6);margin:-10px}.seq-gate-btn{background:#333;border:1px solid #555;border-radius:2px;color:#666;font-size:8px;width:16px;height:14px;padding:0;cursor:pointer;transition:all .15s}.seq-gate-btn.active{background:#0f8;border-color:#0c6;color:#000;box-shadow:0 0 6px #00ff8880}.seq-gate-btn:hover{border-color:#888}.minimod-actions{margin-top:10px;display:flex;gap:8px;justify-content:center}.mod-btn{background:linear-gradient(180deg,#3a3a5a,#2a2a4a);border:1px solid #4a4a6a;border-radius:4px;color:#aaa;font-size:10px;padding:5px 10px;cursor:pointer;transition:all .15s}.mod-btn:hover{background:linear-gradient(180deg,#4a4a6a,#3a3a5a);color:#fff;border-color:#6a6a8a}:root{--tb303-accent: #00ff88;--tb303-accent-rgb: 0, 255, 136;--tb303-bg-light: #909098;--tb303-bg-dark: #606068;--tr808-accent: #ff6600;--tr808-accent-rgb: 255, 102, 0;--tr808-bg-light: #2a2a2a;--tr808-bg-dark: #0a0a0a;--tr909-accent: #ff0064;--tr909-accent-rgb: 255, 0, 100;--tr909-bg-light: #c8c8c8;--tr909-bg-dark: #787878;--minimoog-accent: #d4a574;--minimoog-accent-rgb: 212, 165, 116;--minimoog-bg-light: #2a2520;--minimoog-bg-dark: #100e0d;--ms20-accent: #a8b8c8;--ms20-accent-rgb: 168, 184, 200;--ms20-secondary: #e8d8c0;--ms20-bg-light: #2a3040;--ms20-bg-dark: #1a2030;--jupiter8-accent: #e85d04;--jupiter8-accent-rgb: 232, 93, 4;--jupiter8-bg-light: #1a1a1a;--jupiter8-bg-dark: #0d0d0d;--arp2600-accent: #33aaff;--arp2600-accent-rgb: 51, 170, 255;--arp2600-bg-light: #3a5a7a;--arp2600-bg-dark: #1a3a5a;--juno106-accent: #00bcd4;--juno106-accent-rgb: 0, 188, 212;--juno106-bg-light: #2a3a4a;--juno106-bg-dark: #0a1a2a;--sh101-accent: #8bc34a;--sh101-accent-rgb: 139, 195, 74;--sh101-bg-light: #3a4a3a;--sh101-bg-dark: #1a2a1a;--theremin-accent: #9b59b6;--theremin-accent-rgb: 155, 89, 182;--theremin-bg-light: #2c1a4d;--theremin-bg-dark: #1a0f2e}.machine{--machine-accent: var(--color-accent-green);--machine-accent-rgb: 0, 255, 136;background:linear-gradient(180deg,#3a3a42,#2a2a32 40%,#222228);border-radius:12px;padding:25px;margin-bottom:25px;box-shadow:0 10px 30px #0009,0 2px #ffffff0d,inset 0 1px #ffffff14,inset 0 -1px #0000004d;position:relative}.machine:before,.machine:after{content:"";position:absolute;width:8px;height:8px;background:radial-gradient(circle at 30% 30%,#666,#333,#222);border-radius:50%;box-shadow:inset 0 1px 2px #000c,0 1px #ffffff1a}.machine:before{top:12px;left:12px}.machine:after{top:12px;right:12px}.machine-title{font-size:24px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:15px;color:var(--machine-accent);text-shadow:0 0 10px rgba(var(--machine-accent-rgb),.4)}.machine-title .power-btn{margin-left:auto}.machine-title .brand{color:var(--color-text-muted);font-size:14px}.machine-title .model{font-size:1.2em}.power-btn{width:32px;height:32px;border-radius:50%;border:2px solid #444;background:linear-gradient(180deg,#222,#111);color:#666;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 2px 5px #00000080,inset 0 1px #ffffff1a;margin-left:auto}.power-btn:hover{border-color:#666;transform:scale(1.05)}.power-btn.on{background:linear-gradient(180deg,#2a4a2a,#1a3a1a);border-color:#4a4;color:#4f4;box-shadow:0 0 10px #00ff004d,inset 0 1px #ffffff1a}.machine.powered-off{opacity:.5;filter:grayscale(50%)}.collapse-btn{width:24px;height:24px;border-radius:4px;border:1px solid #555;background:linear-gradient(180deg,#333,#222);color:#aaa;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0;margin-left:10px;margin-right:10px}.collapse-btn:hover{background:linear-gradient(180deg,#444,#333);border-color:#777;color:#fff;transform:scale(1.05)}.machine-content{transition:max-height .3s ease-out,opacity .2s ease-out;overflow:hidden}.machine-content.hidden{display:none}.machine.collapsed{padding-bottom:15px}.machine.collapsed .machine-title{margin-bottom:0}.machine.powered-off .controls,.machine.powered-off .sequencer{pointer-events:none}.sequencer-section{--machine-accent: #aa66ff;--machine-accent-rgb: 170, 102, 255}.sequencer-section .machine-title{border-bottom:2px solid var(--machine-accent)}.sequencer-section .machine-content>div>.machine{background:linear-gradient(180deg,#323237cc,#232328cc);padding:15px;margin-bottom:10px;box-shadow:0 4px 12px #0000004d,inset 0 1px #ffffff0d;border-radius:8px}.sequencer-section .machine-content>div>.machine:before,.sequencer-section .machine-content>div>.machine:after{display:none}.sequencer-section .machine-content>div>.machine .machine-title{padding:8px 10px;font-size:11px}.sequencer-section .machine-content>div>.machine .machine-content{padding:10px 0 0}.machine-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:15px;padding:12px;background:#0006;border-radius:8px;border:1px solid rgba(var(--machine-accent-rgb),.2)}.machine-section{background:linear-gradient(180deg,#3c3c3ce6,#282828f2);border:1px solid rgba(var(--machine-accent-rgb),.4);border-radius:6px;padding:10px;min-width:80px;box-shadow:inset 0 1px #ffffff1a,0 2px 4px #0000004d}.machine-section .section-title{color:var(--machine-accent);font-size:.7em;font-weight:700;text-align:center;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid rgba(var(--machine-accent-rgb),.3);text-transform:uppercase;letter-spacing:1px}.machine-section .controls{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.controls{display:flex;flex-wrap:wrap;gap:25px;margin-bottom:25px}.machine-sequencer{background:#141419e6;border-radius:8px;padding:15px;border:1px solid rgba(var(--machine-accent-rgb),.3);box-shadow:inset 0 2px 6px #00000080;margin-top:15px}.machine-sequencer .seq-label{color:var(--machine-accent);background:rgba(var(--machine-accent-rgb),.15);padding:4px 8px;border-radius:3px;font-size:11px;font-weight:700;min-width:55px;text-align:center;border:1px solid rgba(var(--machine-accent-rgb),.25)}.machine-sequencer .step-marker{color:#666}.machine-sequencer .step-marker:nth-child(4n+1){color:var(--machine-accent);background:rgba(var(--machine-accent-rgb),.15)}.tb303{--machine-accent: var(--tb303-accent);--machine-accent-rgb: var(--tb303-accent-rgb);background:linear-gradient(180deg,#b8b8c0,#a0a0a8 5%,#909098 15%,#808088,#707078 85%,#606068);border:2px solid #888;box-shadow:0 10px 30px #00000080,0 2px #fff3,inset 0 1px #fff6,inset 0 -1px #0003}.tb303:before,.tb303:after{background:radial-gradient(circle at 30% 30%,#999,#666,#444)}.tb303 .machine-title .brand{color:#aaa}.tb303-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:15px;padding:12px;background:#505058b3;border-radius:8px;border:1px solid rgba(0,0,0,.3);box-shadow:inset 0 2px 4px #0003}.tb303-section{background:linear-gradient(180deg,#64646cf2,#46464ef2);border:1px solid rgba(0,0,0,.4);border-radius:6px;padding:10px;min-width:80px;box-shadow:inset 0 1px #fff3,0 2px 4px #0000004d}.tb303-section .section-title{color:var(--tb303-accent);font-size:.7em;font-weight:700;text-align:center;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid rgba(0,255,136,.3);text-transform:uppercase;letter-spacing:1px}.tb303-section .controls{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.tb303-section.vcf-section{flex-grow:1}.tr808{--machine-accent: var(--tr808-accent);--machine-accent-rgb: var(--tr808-accent-rgb);background:linear-gradient(180deg,#2a2a2a,#1f1f1f 20%,#181818,#121212 80%,#0a0a0a);border:3px solid var(--tr808-accent);box-shadow:0 10px 30px #000000b3,0 0 20px #ff660026,inset 0 1px #ffffff0d,inset 0 -1px #00000080}.tr808:before,.tr808:after{background:radial-gradient(circle at 30% 30%,#555,#333,#111);box-shadow:inset 0 1px 2px #000000e6,0 0 3px #ff66004d}.tr808-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:15px;padding:12px;background:#00000080;border-radius:8px;border:1px solid rgba(255,102,0,.2)}.tr808-section{background:linear-gradient(180deg,#1e140ae6,#140f05f2);border:1px solid rgba(255,136,0,.4);border-radius:6px;padding:10px;min-width:80px;box-shadow:inset 0 1px #ff88001a,0 2px 4px #0000004d}.tr808-section .section-title{color:var(--tr808-accent);font-size:.7em;font-weight:700;text-align:center;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid rgba(255,136,0,.2);text-transform:uppercase;letter-spacing:1px}.tr808-section .controls{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.tr808-section.toms-section{flex-grow:1}.tr909{--machine-accent: var(--tr909-accent);--machine-accent-rgb: var(--tr909-accent-rgb);background:linear-gradient(180deg,#c8c8c8,#b0b0b0 15%,#989898,#888 85%,#787878);border:3px solid #cc0044;box-shadow:0 10px 30px #00000080,0 0 15px #cc00441a,inset 0 1px #ffffff80,inset 0 -1px #00000026}.tr909:before,.tr909:after{background:radial-gradient(circle at 30% 30%,#aaa,#777,#555)}.tr909 .machine-title .brand{color:#666}.tr909-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:15px;padding:12px;background:#3c3c3c99;border-radius:8px;border:1px solid rgba(204,0,68,.2)}.tr909-section{background:linear-gradient(180deg,#464646e6,#323232f2);border:1px solid rgba(204,0,68,.4);border-radius:6px;padding:10px;min-width:80px;box-shadow:inset 0 1px #ffffff1a,0 2px 4px #0003}.tr909-section .section-title{color:var(--tr909-accent);font-size:.7em;font-weight:700;text-align:center;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid rgba(255,0,100,.2);text-transform:uppercase;letter-spacing:1px}.tr909-section .controls{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.tr909-section.cymbals-section{flex-grow:1}.minimoog{--machine-accent: var(--minimoog-accent);--machine-accent-rgb: var(--minimoog-accent-rgb);background:linear-gradient(180deg,#2a2520,#1f1a18 30%,#181515 70%,#100e0d);border:2px solid #8b5a2b;box-shadow:0 10px 30px #0009,0 0 15px #8b5a2b1a,inset 0 1px #ffffff0d;border-radius:10px}.minimoog:before,.minimoog:after{background:radial-gradient(circle at 30% 30%,#6a4a2a,#4a3020,#2a1a10)}.minimoog-sections{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:20px}.minimoog-section{background:#0000004d;border-radius:8px;padding:12px;border:1px solid rgba(212,165,116,.2)}.minimoog-section .section-title{font-size:10px;color:var(--minimoog-accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;text-align:center;font-weight:700}.oscillators-section{flex:1 1 auto;min-width:350px;max-width:100%;overflow:hidden}.osc-row{display:flex;gap:10px;flex-wrap:wrap}.osc-group{flex:1;background:#0003;border-radius:6px;padding:8px;min-width:0}.osc-group .osc-label{font-size:9px;color:#a08060;text-align:center;margin-bottom:8px;font-weight:700}.osc-controls{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.minimoog .noise-group{flex:0 0 auto;max-width:80px;min-width:60px}.filter-section{min-width:200px}.filter-controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.envelopes-section{display:flex;gap:15px;min-width:300px}.env-group{flex:1;background:#0003;border-radius:6px;padding:10px}.env-group .section-title{font-size:9px;margin-bottom:8px}.env-controls{display:flex;gap:6px;justify-content:center}.master-section{min-width:120px}.master-controls{display:flex;gap:10px;justify-content:center}.ms20{--machine-accent: var(--ms20-accent);--machine-accent-rgb: var(--ms20-accent-rgb);border:2px solid rgba(100,120,140,.4);background:linear-gradient(180deg,#2a3040,#1a2030)}.ms20 .machine-title .brand{color:var(--ms20-secondary);font-weight:700}.ms20-sections{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}.ms20-section{background:#00000059;border-radius:6px;padding:10px;border:1px solid rgba(168,184,200,.15)}.ms20-section .section-title{font-size:9px;color:var(--ms20-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;text-align:center;font-weight:700;background:#e8d8c01a;padding:3px 6px;border-radius:3px}.vco-section{flex:1;min-width:380px}.vco-row{display:flex;gap:10px}.vco-group{flex:1;background:#00000040;border-radius:5px;padding:8px;border:1px solid rgba(168,184,200,.1)}.vco-group .vco-label{font-size:8px;color:var(--ms20-accent);text-align:center;margin-bottom:6px;font-weight:700}.vco-controls{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}.ring-group,.ms20 .noise-group{max-width:65px}.hpf-section,.lpf-section{min-width:180px}.mg-section{min-width:130px}.mg-controls,.ms20 .filter-controls{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.ms20 .envelopes-section{display:flex;gap:12px;min-width:280px}.ms20 .env-group{flex:1;background:#00000040;border-radius:5px;padding:8px;border:1px solid rgba(168,184,200,.1)}.ms20 .env-group .section-title{font-size:8px;margin-bottom:6px}.ms20 .env-controls{display:flex;gap:5px;justify-content:center}.ms20 .master-section{min-width:100px}.ms20 .master-controls{display:flex;gap:8px;justify-content:center}.jupiter8{--machine-accent: var(--jupiter8-accent);--machine-accent-rgb: var(--jupiter8-accent-rgb);background:linear-gradient(180deg,#1a1a1a,#0d0d0d);border:2px solid var(--jupiter8-accent)}.jupiter8-title{background:linear-gradient(90deg,#e85d04,#ff7b00,#e85d04);color:#000;font-weight:700}.jupiter8-title .model{font-size:1.3em;margin-left:8px}.jupiter8-title .brand{color:#333}.jupiter8-controls{display:flex;flex-wrap:wrap;gap:10px;padding:15px;justify-content:center}.jp8-section{background:#282828cc;border:1px solid #444;border-radius:6px;padding:10px;min-width:100px}.jp8-section .section-title{color:var(--jupiter8-accent);font-size:.75em;font-weight:700;text-align:center;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid rgba(232,93,4,.3)}.jp8-section .controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.jupiter8 .preset-row{display:flex;align-items:center;gap:10px;padding:10px 15px;justify-content:center}.jupiter8 .preset-label{color:var(--jupiter8-accent);font-size:.8em;font-weight:700}.jupiter8 .preset-select{background:#222;color:var(--jupiter8-accent);border:1px solid var(--jupiter8-accent);padding:4px 8px;border-radius:3px}.arp2600{--machine-accent: var(--arp2600-accent);--machine-accent-rgb: var(--arp2600-accent-rgb);background:linear-gradient(180deg,#3a5a7a,#2a4a6a,#1a3a5a);border:2px solid #4a6a8a}.arp2600 .machine-title .brand{color:#7a9aba}.arp2600-controls{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:20px}.arp2600 .control-section{background:#0003;border-radius:8px;padding:10px;min-width:150px}.arp2600 .section-label{color:var(--arp2600-accent);font-size:10px;font-weight:700;letter-spacing:1px;margin-bottom:10px;text-align:center;border-bottom:1px solid rgba(50,170,255,.3);padding-bottom:5px}.arp2600 .control-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.arp2600 .wave-btn.active{background:linear-gradient(180deg,#3af,#28d);border-color:#5cf}.arp2600.powered-off{filter:brightness(.5)}.juno106{--machine-accent: var(--juno106-accent);--machine-accent-rgb: var(--juno106-accent-rgb);background:linear-gradient(180deg,#2a3a4a,#1a2a3a,#0a1a2a);border:2px solid var(--juno106-accent)}.juno106 .machine-title .brand{color:#5acad4}.juno106 .machine-title .model{color:#4dd0e1}.juno106-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.juno-section{background:#003c5099;border:1px solid #00838f;border-radius:6px;padding:10px;min-width:100px}.juno-section .section-title{color:var(--juno106-accent);font-size:.75em;font-weight:700;text-align:center;margin-bottom:8px;letter-spacing:1px;border-bottom:1px solid rgba(0,188,212,.3);padding-bottom:4px}.juno-section .controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.juno-section .toggle-row{display:flex;gap:6px;justify-content:center;margin-bottom:5px}.juno106 .wave-toggle{background:linear-gradient(180deg,#1a2a3a,#0a1a2a);border:2px solid #444;border-radius:6px;padding:8px 12px;color:#888;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:60px}.juno106 .wave-toggle:hover{border-color:var(--juno106-accent)}.juno106 .wave-toggle.active{background:linear-gradient(180deg,#00bcd4,#0097a7);border-color:#4dd0e1;color:#fff;box-shadow:0 0 15px #00bcd466}.juno106 .wave-toggle .wave-icon{font-size:18px}.juno106 .wave-toggle .wave-label{font-size:9px;font-weight:700;letter-spacing:1px}.juno106 .chorus-buttons{display:flex;gap:5px}.juno106 .chorus-btn{background:linear-gradient(180deg,#222,#111);border:2px solid #444;border-radius:4px;padding:6px 10px;color:#666;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s}.juno106 .chorus-btn:hover{border-color:var(--juno106-accent)}.juno106 .chorus-btn.active{background:linear-gradient(180deg,#00bcd4,#0097a7);border-color:#4dd0e1;color:#fff;box-shadow:0 0 10px #00bcd466}.juno106 .sequencer{margin-top:15px}.juno106.powered-off{filter:brightness(.5)}.sh101{--machine-accent: var(--sh101-accent);--machine-accent-rgb: var(--sh101-accent-rgb);background:linear-gradient(180deg,#3a4a3a,#2a3a2a,#1a2a1a);border:2px solid var(--sh101-accent)}.sh101 .machine-title .brand{color:#a5c474}.sh101 .machine-title .model{color:#9ccc65}.sh101-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.sh-section{background:#283c2899;border:1px solid #689f38;border-radius:6px;padding:10px;min-width:100px}.sh-section .section-title{color:var(--sh101-accent);font-size:.75em;font-weight:700;text-align:center;margin-bottom:8px;letter-spacing:1px;border-bottom:1px solid rgba(139,195,74,.3);padding-bottom:4px}.sh-section .controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.sh-section .toggle-row{display:flex;gap:6px;justify-content:center;margin-bottom:5px}.sh101 .wave-toggle{background:linear-gradient(180deg,#2a3a2a,#1a2a1a);border:2px solid #444;border-radius:6px;padding:8px 12px;color:#888;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:60px}.sh101 .wave-toggle:hover{border-color:var(--sh101-accent)}.sh101 .wave-toggle.active{background:linear-gradient(180deg,#8bc34a,#689f38);border-color:#9ccc65;color:#fff;box-shadow:0 0 15px #8bc34a66}.sh101 .wave-toggle .wave-icon{font-size:18px}.sh101 .wave-toggle .wave-label{font-size:9px;font-weight:700;letter-spacing:1px}.sh101 .sequencer{margin-top:15px}.sh101.powered-off{filter:brightness(.5)}.theremin{--machine-accent: var(--theremin-accent);--machine-accent-rgb: var(--theremin-accent-rgb);background:linear-gradient(180deg,#2c1a4d,#1a0f2e);border:2px solid var(--theremin-accent)}.theremin-title{background:linear-gradient(90deg,#8e44ad,#9b59b6,#8e44ad);color:#fff;font-weight:700}.theremin-title .brand{color:#ffffffb3;font-style:italic}.theremin-content{display:flex;flex-wrap:wrap;gap:15px;padding:15px;justify-content:center;align-items:flex-start}.theremin-play-area{position:relative;width:350px;height:200px;background:linear-gradient(135deg,#1a0a2e,#2d1b4e,#1a0a2e);border:2px solid var(--theremin-accent);border-radius:10px;cursor:crosshair;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}.theremin-play-area.playing{border-color:#e74c3c;box-shadow:0 0 20px #e74c3c80}.theremin-antenna{position:absolute;background:linear-gradient(90deg,#bdc3c7,#ecf0f1,#bdc3c7);border-radius:2px}.antenna-pitch{right:10px;top:0;width:6px;height:100%}.antenna-volume{left:0;bottom:10px;width:100%;height:6px}.theremin-crosshair{position:absolute;width:20px;height:20px;border:2px solid #e74c3c;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .1s;box-shadow:0 0 10px #e74c3ccc}.theremin-crosshair:before,.theremin-crosshair:after{content:"";position:absolute;background:#e74c3c}.theremin-crosshair:before{left:50%;top:-10px;width:2px;height:40px;transform:translate(-50%)}.theremin-crosshair:after{top:50%;left:-10px;width:40px;height:2px;transform:translateY(-50%)}.theremin-instructions{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#9b59b699;font-size:.75em;pointer-events:none}.theremin-display{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:2px}.theremin-note{font-size:1.5em;font-weight:700;color:#e74c3c;text-shadow:0 0 10px rgba(231,76,60,.5)}.theremin-freq{font-size:.8em;color:var(--theremin-accent)}.theremin-controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.theremin .control-section{background:#28143ccc;border:1px solid var(--theremin-accent);border-radius:6px;padding:10px;min-width:80px}.theremin .control-section .section-title{color:var(--theremin-accent);font-size:.7em;font-weight:700;text-align:center;margin-bottom:8px}.wave-selector{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}.wave-group{min-width:80px}.wave-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 8px;min-width:36px;background:var(--color-input-bg);border:2px solid var(--color-border);color:var(--color-text-muted);border-radius:5px;cursor:pointer;font-size:10px;transition:all .15s ease}.wave-btn:hover{border-color:var(--color-text-muted)}.wave-btn.active{border-color:var(--color-accent-green);color:var(--color-accent-green);background:#44aa441a}.wave-icon{font-size:16px;line-height:1;margin-bottom:2px}.wave-label{font-size:8px;text-transform:uppercase;letter-spacing:.5px}.effects{border:2px solid rgba(136,136,255,.25)}.effects .machine-title{color:#88f}.effects-row{display:flex;gap:15px}.effects-row+.effects-row{margin-top:15px}.effects-section{flex:1;min-width:0;padding:10px;background:#0003;border-radius:8px}.effect-title{font-size:12px;color:#88f;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(136,136,255,.2);text-align:center}.effect-title.chorus-title{color:#8da;border-bottom-color:#8da3}.effect-title.phaser-title{color:#a8d;border-bottom-color:#a8d3}.effect-title.flanger-title{color:#8ad;border-bottom-color:#8ad3}.effect-title.crusher-title{color:#d88;border-bottom-color:#d883}.effect-title.tremolo-title{color:#dd8;border-bottom-color:#dd83}.effect-title.distortion-title{color:#d66;border-bottom-color:#d663}.effect-title.eq-title{color:#da8;border-bottom-color:#da83}.effect-title.compressor-title{color:#d8a;border-bottom-color:#d8a3}.effect-title.reverb-title{color:#4af!important;border-bottom-color:#4af3!important}.fx-indicator{display:inline-block;width:6px;height:6px;border-radius:50%;background:#333;border:1px solid #222;margin-left:6px;vertical-align:middle;transition:all .15s ease;box-shadow:inset 0 1px 2px #00000080}.fx-indicator.active{background:#4f4;box-shadow:0 0 6px #4f4,0 0 10px #4f4,inset 0 1px 2px #ffffff4d}.effect-title .fx-indicator[data-effect=delay].active{background:#88f;box-shadow:0 0 6px #88f,0 0 10px #88f}.effect-title .fx-indicator[data-effect=reverb].active{background:#4af;box-shadow:0 0 6px #4af,0 0 10px #4af}.effect-title .fx-indicator[data-effect=chorus].active{background:#8da;box-shadow:0 0 6px #8da,0 0 10px #8da}.effect-title .fx-indicator[data-effect=phaser].active{background:#a8d;box-shadow:0 0 6px #a8d,0 0 10px #a8d}.effect-title .fx-indicator[data-effect=flanger].active{background:#8ad;box-shadow:0 0 6px #8ad,0 0 10px #8ad}.effect-title .fx-indicator[data-effect=crusher].active{background:#d88;box-shadow:0 0 6px #d88,0 0 10px #d88}.effect-title .fx-indicator[data-effect=tremolo].active{background:#dd8;box-shadow:0 0 6px #dd8,0 0 10px #dd8}.effect-title .fx-indicator[data-effect=distortion].active{background:#d66;box-shadow:0 0 6px #d66,0 0 10px #d66}.effects-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.effects-grid .effects-section{flex:1 1 auto;min-width:80px;max-width:150px}.controls.vertical{flex-direction:column;align-items:center;gap:8px}.controls.vertical .knob-group{width:100%;display:flex;flex-direction:column;align-items:center}.time-select{padding:8px 12px;background:var(--color-input-bg);border:1px solid var(--color-border);color:var(--color-text);border-radius:5px;font-size:14px;cursor:pointer}.time-select:hover{border-color:#88f}.effect-hint{color:var(--color-text-muted);font-size:12px;margin-top:10px;font-style:italic}.send-knob input[type=range]{accent-color:#8888ff}.send-knob .knob-label{color:#88f}.dist-knob input[type=range]{accent-color:#ff6644}.dist-knob .knob-label{color:#f64}.reverb-knob input[type=range]{accent-color:#44aaff}.reverb-knob .knob-label{color:#4af}.reduction-meter{width:60px;height:80px;background:#1a1a2e;border:1px solid #333;border-radius:3px;position:relative;display:flex;flex-direction:column;align-items:center;padding:5px}.reduction-meter:before{content:"";position:absolute;top:5px;left:50%;transform:translate(-50%);width:24px;height:50px;background:#0a0a15;border-radius:2px}.reduction-bar{position:absolute;bottom:25px;left:50%;transform:translate(-50%);width:20px;height:0%;max-height:46px;background:linear-gradient(to top,#4f8,#fa4,#f44);border-radius:2px;transition:height .05s ease-out;z-index:1}.reduction-value{position:absolute;bottom:5px;font-size:10px;color:#f4a;font-weight:700}.mixer-panel{background:linear-gradient(180deg,#1a1a2e,#12121f);border:2px solid rgba(100,100,150,.3)}.mixer-panel .machine-title{color:#88c;border-bottom:1px solid rgba(100,100,150,.2);padding-bottom:10px;margin-bottom:10px}.mixer-channels{display:flex;gap:4px;justify-content:center;padding:10px 8px;align-items:stretch;flex-wrap:wrap}.mixer-channel{display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#1e1e32e6,#141423f2);border:1px solid rgba(80,80,120,.3);border-radius:4px;padding:8px 5px 6px;min-width:75px;gap:6px}.mixer-channel:hover{border-color:#64649680}.mixer-channel.master-channel{background:linear-gradient(180deg,#32283ce6,#23192df2);border:1px solid rgba(150,100,180,.4);min-width:85px}.channel-label{font-size:8px;font-weight:700;text-transform:uppercase;text-align:center;white-space:nowrap;letter-spacing:.5px;padding:2px 4px;background:#0000004d;border-radius:2px;width:100%}.fader-container{display:flex;flex-direction:column;align-items:center;height:130px;width:40px;position:relative;justify-content:center}.vertical-fader{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100px;height:24px;background:transparent;outline:none;transform:rotate(-90deg);transform-origin:center center}.vertical-fader::-webkit-slider-runnable-track{width:100%;height:4px;background:linear-gradient(to right,#222,#444);border-radius:2px}.vertical-fader::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:20px;background:linear-gradient(to bottom,#999,#666);border:1px solid #aaa;border-radius:3px;cursor:pointer;box-shadow:0 1px 3px #00000080;margin-top:-6px}.vertical-fader::-moz-range-track{width:100%;height:4px;background:linear-gradient(to right,#222,#444);border-radius:2px}.vertical-fader::-moz-range-thumb{width:12px;height:20px;background:linear-gradient(to bottom,#999,#666);border:1px solid #aaa;border-radius:3px;cursor:pointer;box-shadow:0 1px 3px #00000080}.fader-value{font-size:9px;color:#aaa;margin-top:8px;text-align:center;position:absolute;bottom:0}.channel-buttons{display:flex;gap:4px;margin-top:auto;padding-top:4px}.mixer-btn{width:24px;height:18px;border:none;border-radius:2px;font-size:9px;font-weight:700;cursor:pointer;transition:all .1s;display:flex;align-items:center;justify-content:center;line-height:1;padding:0}.mute-btn{background:#444;color:#888}.mute-btn:hover{background:#555}.mute-btn.active{background:#f44;color:#fff;box-shadow:0 0 8px #ff444480}.solo-btn{background:#444;color:#888}.solo-btn:hover{background:#555}.solo-btn.active{background:#fc0;color:#000;box-shadow:0 0 8px #ffcc0080}.sends-container{display:flex;gap:8px;margin-bottom:10px;height:70px}.send-knob{display:flex;flex-direction:column;align-items:center;width:28px;height:70px;position:relative}.send-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:16px;background:transparent;outline:none;transform:rotate(-90deg);transform-origin:center center;position:absolute;top:23px}.send-slider::-webkit-slider-runnable-track{width:100%;height:3px;background:linear-gradient(to right,#333,#555);border-radius:2px}.send-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:14px;background:linear-gradient(to bottom,#8cf,#48c);border:1px solid #aaddff;border-radius:2px;cursor:pointer;box-shadow:0 0 6px #88ccff80;margin-top:-7px}.send-slider::-moz-range-track{width:100%;height:3px;background:linear-gradient(to right,#333,#555);border-radius:2px}.send-slider::-moz-range-thumb{width:10px;height:14px;background:linear-gradient(to bottom,#8cf,#48c);border:1px solid #aaddff;border-radius:2px;cursor:pointer;box-shadow:0 0 6px #88ccff80}.send-label{font-size:8px;color:#8cf;text-transform:uppercase;position:absolute;bottom:0}.sends-row{display:flex;gap:8px;margin-bottom:8px;padding:6px;background:#00000040;border-radius:3px}.sends-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:4px;background:#0000004d;border-radius:3px;width:100%}.send-container{display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 0}.send-title{font-size:6px;color:#69b;text-transform:uppercase;font-weight:700;letter-spacing:.3px}.meter-fader-row{display:flex;gap:3px;align-items:flex-start;padding:4px;background:#00000040;border-radius:3px}.meter-container{width:10px;height:120px;background:linear-gradient(180deg,#050508,#0a0a10);border:1px solid #222;border-radius:2px;position:relative;overflow:hidden;box-shadow:inset 0 2px 6px #000000e6}.meter-bar{position:absolute;bottom:0;left:1px;right:1px;height:0%;background:linear-gradient(to top,#2a2,#4f4);transition:height .03s linear;border-radius:0 0 1px 1px}.meter-peak{position:absolute;bottom:0;left:1px;right:1px;height:2px;background:#fff;box-shadow:0 0 6px #fff,0 0 2px #fff;transition:bottom .02s linear}.meter-container:before{content:"";position:absolute;top:8%;left:0;right:0;height:1px;background:#ff323280;z-index:1}.meter-container:after{content:"";position:absolute;top:25%;left:0;right:0;height:1px;background:#ffc83266;z-index:1}.fader-slot,.master-fader-container{display:flex;justify-content:center;align-items:flex-start}.vslider{display:flex;flex-direction:column;align-items:center;gap:4px}.vslider-track{position:relative;width:8px;background:linear-gradient(to bottom,#111,#1a1a1a,#222);border:1px solid #333;border-radius:4px;box-shadow:inset 0 2px 4px #0009;cursor:pointer}.vslider-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,#446,#335);border-radius:0 0 3px 3px;pointer-events:none}.vslider-thumb{position:absolute;left:50%;transform:translate(-50%);width:20px;height:14px;background:linear-gradient(to bottom,#ddd,#bbb 15%,#999 40%,#888,#777 60%,#666 85%,#555);border:1px solid #999;border-radius:3px;cursor:grab;box-shadow:0 2px 4px #00000080,inset 0 1px #fff6,inset 0 -1px #0003}.vslider-thumb:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:2px;background:linear-gradient(to bottom,#444,#555);border-radius:1px}.vslider-thumb:hover{background:linear-gradient(to bottom,#eee,#ccc 15%,#aaa 40%,#999,#888 60%,#777 85%,#666)}.vslider-thumb.active{cursor:grabbing;background:linear-gradient(to bottom,#fff,#ddd 15%,#bbb 40%,#aaa,#999 60%,#888 85%,#777);box-shadow:0 2px 6px #0009,inset 0 1px #ffffff80}.vslider-label{font-size:9px;color:#888;text-transform:uppercase;letter-spacing:.5px}.vslider-value{font-size:9px;font-family:Consolas,Monaco,monospace;color:#8f8;background:#111;padding:1px 4px;border-radius:2px;border:1px solid #333;text-shadow:0 0 4px rgba(136,255,136,.5);min-width:42px;text-align:center}.vslider-send .vslider-track{width:5px}.vslider-send .vslider-fill{background:linear-gradient(to top,#246,#369)}.vslider-send .vslider-thumb{width:12px;height:8px;background:linear-gradient(to bottom,#6ae,#48c,#36a);border:1px solid #7cf;box-shadow:0 0 4px #6ae6}.vslider-send .vslider-thumb:after{width:5px;height:1px;background:#fff6}.vslider-send .vslider-thumb:hover,.vslider-send .vslider-thumb.active{box-shadow:0 0 8px #6ae9}.vslider-send .vslider-label,.vslider-send .vslider-value{display:none}.led{--led-color: #ff3333;width:8px;height:8px;border-radius:50%;background:#333;border:1px solid #222;box-shadow:inset 0 1px 2px #00000080;transition:all .1s ease}.led.on{background:var(--led-color);box-shadow:inset 0 1px 2px #ffffff4d,0 0 8px var(--led-color),0 0 15px var(--led-color)}.led-small{width:6px;height:6px}.led-medium{width:10px;height:10px}.led-large{width:14px;height:14px}.nexus-knob-group{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:60px}.nexus-dial-container{display:flex;justify-content:center}.nexus-knob-label{font-size:10px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}.nexus-knob-value{font-size:9px;color:var(--color-accent-green);font-family:monospace}.nexus-slider-vertical,.nexus-slider-horizontal{display:flex;flex-direction:column;align-items:center;gap:4px}.nexus-slider-label{font-size:9px;color:var(--color-text-muted);text-transform:uppercase}.nexus-step-wrapper{display:inline-block}.nexus-step-wrapper.current .nexus-toggle-container{border-radius:4px}.nexus-toggle-container{transition:box-shadow .1s ease}.nexus-select-group{display:flex;flex-direction:column;align-items:center;gap:4px}.nexus-select-label{font-size:9px;color:var(--color-text-muted);text-transform:uppercase}.nexus-select-inline{width:50px;font-size:10px;padding:2px;background:#1a1a2e;color:#0f8;border:1px solid #333;border-radius:3px}.nexus-led{--nexus-led-color: #00ff88;width:10px;height:10px;border-radius:50%;background:#222;border:1px solid #333;transition:all .15s ease}.nexus-led.on{background:var(--nexus-led-color);box-shadow:0 0 8px var(--nexus-led-color),0 0 15px var(--nexus-led-color)}.nexus-led-small{width:6px;height:6px}.nexus-led-medium{width:10px;height:10px}.nexus-led-large{width:14px;height:14px}.theme-selector{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#0000004d;border-radius:6px;margin-left:auto}.theme-selector label{font-size:11px;color:var(--color-text-muted);text-transform:uppercase}.theme-selector select{background:#1a1a2e;color:#fff;border:1px solid #444;border-radius:4px;padding:4px 8px;font-size:12px;cursor:pointer}.theme-selector select:hover{border-color:var(--color-accent-green)}.skeuo-knob-group{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:55px}.skeuo-knob-outer{width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,#3a3a4a,#1a1a2a);box-shadow:0 4px 8px #00000080,inset 0 2px 4px #ffffff1a,inset 0 -2px 4px #0000004d;padding:4px;cursor:pointer;transition:box-shadow .15s ease}.skeuo-knob-outer:hover{box-shadow:0 4px 12px #0f83,inset 0 2px 4px #ffffff26,inset 0 -2px 4px #0000004d}.skeuo-knob-outer.active{box-shadow:0 2px 4px #00000080,inset 0 2px 4px #ffffff1a,inset 0 -2px 4px #0000004d,0 0 15px #00ff884d}.skeuo-knob-inner{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#555,#333,#222);box-shadow:inset 0 1px 2px #fff3,inset 0 -1px 2px #0006;position:relative;transition:transform .05s ease-out}.skeuo-knob-indicator{position:absolute;top:3px;left:50%;transform:translate(-50%);width:3px;height:10px;background:linear-gradient(to bottom,#0f8,#0c6);border-radius:2px;box-shadow:0 0 6px #0f89}.skeuo-knob-label{font-size:9px;color:#888;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}.skeuo-knob-value{font-size:9px;color:#0f8;font-family:Courier New,monospace;font-weight:700}:root{--keyboard-accent: #00ff88}.visual-keyboard{background:linear-gradient(180deg,#1a1a2e,#0f0f1a);border:2px solid rgba(100,100,150,.4);border-radius:15px;padding:15px 20px;margin-bottom:25px}.keyboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid rgba(100,100,150,.2)}.keyboard-title{font-size:18px;font-weight:700;color:var(--keyboard-accent)}.keyboard-controls{display:flex;gap:20px;align-items:center}.octave-control{display:flex;align-items:center;gap:8px;background:#0000004d;padding:5px 10px;border-radius:6px}.octave-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid #555;border-radius:4px;background:linear-gradient(180deg,#3a3a4a,#2a2a3a);color:#fff;font-size:18px;font-weight:700;line-height:1;cursor:pointer;transition:all .15s}.octave-btn:hover{border-color:var(--keyboard-accent);background:linear-gradient(180deg,#4a4a5a,#3a3a4a)}.octave-btn:active{transform:scale(.95)}.octave-display{font-family:Courier New,monospace;font-size:14px;font-weight:700;color:var(--keyboard-accent);min-width:30px;text-align:center}.instrument-select{display:flex;align-items:center;gap:8px}.instrument-select label{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px}.instrument-select select{background:#1a1a2e;color:var(--keyboard-accent);border:1px solid #444;border-radius:4px;padding:6px 10px;font-size:12px;cursor:pointer}.instrument-select select:hover{border-color:var(--keyboard-accent)}.piano-container{display:flex;justify-content:center;padding:10px;background:#0000004d;border-radius:8px}.piano-keys{position:relative;display:flex;height:140px}.white-key{width:40px;min-width:40px;flex-shrink:0;height:140px;background:linear-gradient(180deg,#fafafa,#e8e8e8 85%,#d0d0d0);border:1px solid #999;border-radius:0 0 5px 5px;margin-right:2px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px;transition:all .05s;box-shadow:0 4px 8px #0000004d}.white-key:hover{background:linear-gradient(180deg,#fff,#f0f0f0 85%,#e0e0e0)}.white-key.active{background:linear-gradient(180deg,#d0d0d0,silver 85%,#b0b0b0);box-shadow:0 2px 4px #0000004d;transform:translateY(2px)}.white-key .key-label{font-size:11px;color:#666;font-weight:700}.white-key .key-binding{font-size:9px;color:#999;margin-top:4px;background:#0000001a;padding:2px 5px;border-radius:3px}.black-keys-container{position:absolute;top:0;left:0;height:90px;pointer-events:none}.black-key{position:absolute;width:28px;height:90px;background:linear-gradient(180deg,#3a3a3a,#1a1a1a 85%,#0a0a0a);border:1px solid #000;border-radius:0 0 4px 4px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:6px;pointer-events:auto;z-index:10;transition:all .05s;box-shadow:0 4px 6px #00000080}.black-key:hover{background:linear-gradient(180deg,#4a4a4a,#2a2a2a 85%,#1a1a1a)}.black-key.active{background:linear-gradient(180deg,#2a2a2a,#1a1a1a 85%,#0a0a0a);box-shadow:0 2px 3px #00000080;transform:translateY(2px)}.black-key .key-binding{font-size:8px;color:#888;background:#ffffff1a;padding:1px 4px;border-radius:2px}.keyboard-hint{margin-top:10px;text-align:center;font-size:11px;color:#666}.keyboard-hint kbd{display:inline-block;background:#333;color:#aaa;padding:2px 6px;border-radius:3px;font-family:Courier New,monospace;font-size:10px;margin:0 2px;border:1px solid #444}.preset-selector{display:flex;align-items:center;gap:2px;position:relative;margin-left:auto;margin-right:15px}.preset-nav{width:22px;height:22px;border:1px solid rgba(var(--machine-accent-rgb),.4);background:linear-gradient(180deg,#3c3c46e6,#282832f2);color:var(--machine-accent);border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;transition:all .15s ease;padding:0}.preset-nav:hover{background:linear-gradient(180deg,#50505ae6,#3c3c46f2);border-color:var(--machine-accent);box-shadow:0 0 6px rgba(var(--machine-accent-rgb),.3)}.preset-nav:active{transform:scale(.95)}.preset-name{min-width:100px;max-width:150px;height:22px;padding:0 10px;background:linear-gradient(180deg,#1a1a25,#0f0f18);border:1px solid rgba(var(--machine-accent-rgb),.3);border-radius:3px;color:var(--machine-accent);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 8px rgba(var(--machine-accent-rgb),.4)}.preset-name:hover{border-color:var(--machine-accent);background:linear-gradient(180deg,#252535,#1a1a28)}.preset-name.open{border-color:var(--machine-accent);box-shadow:0 0 8px rgba(var(--machine-accent-rgb),.4)}.preset-name:after{content:"▼";font-size:7px;margin-left:6px;opacity:.6}.preset-dropdown{position:absolute;top:100%;left:22px;right:22px;margin-top:4px;background:linear-gradient(180deg,#2a2a3a,#1a1a28);border:1px solid rgba(var(--machine-accent-rgb),.4);border-radius:4px;box-shadow:0 6px 20px #0009;z-index:1000;max-height:200px;overflow-y:auto;display:none}.preset-dropdown.open{display:block}.preset-dropdown-item{padding:8px 12px;color:#aaa;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:all .1s ease;border-bottom:1px solid rgba(255,255,255,.05)}.preset-dropdown-item:last-child{border-bottom:none}.preset-dropdown-item:hover{background:rgba(var(--machine-accent-rgb),.15);color:var(--machine-accent)}.preset-dropdown-item.active{background:rgba(var(--machine-accent-rgb),.25);color:var(--machine-accent);text-shadow:0 0 6px rgba(var(--machine-accent-rgb),.5)}.preset-dropdown::-webkit-scrollbar{width:6px}.preset-dropdown::-webkit-scrollbar-track{background:#0000004d;border-radius:3px}.preset-dropdown::-webkit-scrollbar-thumb{background:rgba(var(--machine-accent-rgb),.4);border-radius:3px}.preset-dropdown::-webkit-scrollbar-thumb:hover{background:rgba(var(--machine-accent-rgb),.6)}.knob-group{display:flex;flex-direction:column;align-items:center;gap:8px}.knob{width:60px;height:60px;background:linear-gradient(135deg,#555,#333);border-radius:50%;position:relative;cursor:pointer;box-shadow:0 4px 10px #00000080,inset 0 2px 3px #fff3}.knob:after{content:"";position:absolute;width:4px;height:20px;background:#fff;top:8px;left:50%;transform:translate(-50%);border-radius:2px}.knob-label{font-size:11px;color:#aaa;text-transform:uppercase;letter-spacing:1px}.knob-value{font-size:12px;color:var(--color-accent-green);font-family:monospace}.sequencer{display:flex;flex-direction:column;gap:10px}.seq-row{display:flex;align-items:center;gap:10px}.seq-label{width:60px;font-size:12px;color:var(--color-text-muted)}.steps{display:flex;gap:4px}.step{width:35px;height:35px;background:var(--color-input-bg);border:2px solid var(--color-border);border-radius:5px;cursor:pointer;transition:all .1s;display:flex;align-items:center;justify-content:center;font-size:10px;color:#666}.step:hover{border-color:#555}.step.active{background:var(--color-accent-green);border-color:var(--color-accent-green);color:#000;box-shadow:0 0 10px #00ff8880}.step.current{box-shadow:0 0 15px #fffc;transform:scale(1.1)}.tr808 .step.active{background:var(--color-accent-808);border-color:var(--color-accent-808);box-shadow:0 0 10px #ff880080}.tb303 .step.accent{height:25px}.tb303 .step.accent.active{background:#f44;border-color:#f44;box-shadow:0 0 10px #ff444480}.tb303 .step.slide{height:25px}.tb303 .step.slide.active{background:#4af;border-color:#4af;box-shadow:0 0 10px #44aaff80}.note-row{display:flex;gap:4px;margin-top:5px}.note-select{width:35px;height:25px;background:var(--color-input-bg);border:1px solid var(--color-border);color:var(--color-accent-green);font-size:10px;text-align:center;border-radius:3px}.step-markers{display:flex;gap:4px;margin-left:70px;margin-bottom:5px}.step-marker{width:35px;text-align:center;font-size:10px;color:#555;padding:2px 0;border-radius:10px}.step-marker:nth-child(4n+1){color:#fff;background:#ffffff26;font-weight:700}.seq-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.seq-speed-control{display:flex;align-items:center;gap:6px;padding:3px 8px;background:#0000004d;border-radius:4px;margin-right:5px}.speed-label{font-size:9px;color:#888;font-weight:700;letter-spacing:.5px}.speed-select{background:linear-gradient(180deg,#3a3a3a,#2a2a2a);border:1px solid #555;border-radius:3px;color:#fff;font-size:11px;font-weight:700;padding:3px 6px;cursor:pointer;min-width:50px;text-align:center}.speed-select:hover{border-color:#888;background:linear-gradient(180deg,#4a4a4a,#3a3a3a)}.speed-select:focus{outline:none;border-color:var(--machine-accent, #00ff88);box-shadow:0 0 5px var(--machine-accent, rgba(0, 255, 136, .3))}.speed-select option{background:#2a2a2a;color:#fff}.pattern-selector{display:flex;align-items:center;gap:20px;padding:10px 15px;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);border-radius:8px;border:1px solid #444;box-shadow:inset 0 1px #ffffff0d}.pattern-banks{display:flex;align-items:center;gap:10px}.pattern-label{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:2px;font-weight:700}.bank-buttons{display:flex;gap:4px}.bank-btn{width:36px;height:32px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#3a3a3a,#252525);border:2px solid #555;border-radius:4px;color:#888;font-size:14px;font-weight:700;font-family:Courier New,monospace;cursor:pointer;transition:all .15s ease;line-height:1}.bank-btn:hover{background:linear-gradient(180deg,#4a4a4a,#353535);border-color:#666;color:#bbb}.bank-btn.active{background:linear-gradient(180deg,#0f8,#0c6);border-color:#0f8;color:#000;box-shadow:0 0 12px #0f86}.pattern-actions{display:flex;gap:8px;margin-left:auto}.action-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;background:linear-gradient(180deg,#3a3a3a,#252525);border:2px solid #555;border-radius:4px;cursor:pointer;transition:all .15s ease}.action-btn:hover{background:linear-gradient(180deg,#4a4a4a,#353535);border-color:#666}.action-btn:active{transform:scale(.95)}.action-icon{font-size:16px;line-height:1}.action-label{font-size:9px;color:#888;text-transform:uppercase;letter-spacing:1px;font-weight:700}.action-btn:hover .action-label{color:#bbb}.copy-btn:hover{border-color:#4a9eff}.copy-btn:hover .action-icon{filter:drop-shadow(0 0 4px rgba(74,158,255,.5))}.paste-btn:hover:not(.disabled){border-color:#0f8}.paste-btn:hover:not(.disabled) .action-icon{filter:drop-shadow(0 0 4px rgba(0,255,136,.5))}.paste-btn.disabled{opacity:.4;cursor:not-allowed}.paste-btn.disabled:hover{background:linear-gradient(180deg,#3a3a3a,#252525);border-color:#555}.clear-btn:hover{border-color:#f44}.clear-btn:hover .action-icon{filter:drop-shadow(0 0 4px rgba(255,68,68,.5))}.action-btn.feedback-active{background:linear-gradient(180deg,#0f8,#0c6);border-color:#0f8}.action-btn .feedback{font-size:10px;color:#000;font-weight:700;white-space:nowrap}.song-panel{display:flex;flex-direction:column;gap:10px;padding:12px 15px;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);border-radius:8px;border:1px solid #444;box-shadow:inset 0 1px #ffffff0d;margin-top:10px}.song-panel.song-active{border-color:#f80;box-shadow:0 0 10px #f803,inset 0 1px #ffffff0d}.song-header{display:flex;align-items:center;justify-content:space-between}.song-title{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:2px;font-weight:700}.song-panel.song-active .song-title{color:#f80}.mode-toggle{display:flex;gap:4px}.mode-btn{padding:6px 14px;background:linear-gradient(180deg,#3a3a3a,#252525);border:2px solid #555;border-radius:4px;color:#888;font-size:11px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:all .15s ease}.mode-btn:hover{background:linear-gradient(180deg,#4a4a4a,#353535);border-color:#666;color:#bbb}.mode-btn.active[data-mode=pattern]{background:linear-gradient(180deg,#0f8,#0c6);border-color:#0f8;color:#000;box-shadow:0 0 8px #00ff884d}.mode-btn.active[data-mode=scene]{background:linear-gradient(180deg,#0af,#07c);border-color:#0af;color:#000;box-shadow:0 0 8px #00aaff4d}.mode-btn.active[data-mode=song]{background:linear-gradient(180deg,#f80,#c60);border-color:#f80;color:#000;box-shadow:0 0 8px #ff88004d}.song-steps{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto}.song-steps.disabled{opacity:.5;pointer-events:none}.song-step{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#0000004d;border-radius:4px;border:1px solid transparent}.song-step.current{background:#f803;border-color:#f80}.step-num{width:24px;font-size:12px;color:#666;font-family:Courier New,monospace}.song-step.current .step-num{color:#f80;font-weight:700}.scene-select,.bars-select{padding:4px 8px;background:var(--color-input-bg);border:1px solid var(--color-border);color:var(--color-accent-green);font-size:12px;border-radius:3px;cursor:pointer}.scene-select{min-width:100px;max-width:150px;font-weight:700}.bars-select{width:50px}.bars-label,.bars-unit{font-size:11px;color:#666}.progress-indicator{font-size:10px;color:#f80;font-family:Courier New,monospace;margin-left:4px}.step-actions{display:flex;gap:4px;margin-left:auto}.step-btn{width:24px;height:24px;padding:0;background:linear-gradient(180deg,#3a3a3a,#252525);border:1px solid #555;border-radius:3px;color:#888;font-size:10px;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.step-btn:hover:not(:disabled){background:linear-gradient(180deg,#4a4a4a,#353535);border-color:#666;color:#bbb}.step-btn:disabled{opacity:.3;cursor:not-allowed}.step-btn.delete-step:hover:not(:disabled){border-color:#f44;color:#f44}.song-footer{display:flex;justify-content:center;padding-top:5px}.add-step-btn{padding:6px 16px;background:linear-gradient(180deg,#3a3a3a,#252525);border:2px solid #555;border-radius:4px;color:#888;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s ease}.add-step-btn:hover{background:linear-gradient(180deg,#4a4a4a,#353535);border-color:#0f8;color:#0f8}.scene-panel{display:flex;flex-direction:column;gap:10px;padding:12px;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);border:2px solid #444;border-radius:8px;box-shadow:inset 0 1px #ffffff0d,0 4px 12px #0006}.scene-panel.scene-active{border-color:#0af;box-shadow:0 0 10px #0af3,inset 0 1px #ffffff0d}.scene-panel.song-active{border-color:#f80;box-shadow:0 0 10px #f803,inset 0 1px #ffffff0d}.scene-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid #333}.scene-title{font-size:13px;font-weight:700;color:#888;letter-spacing:1px}.scene-panel.scene-active .scene-title{color:#0af}.scene-panel.song-active .scene-title{color:#f80}.scene-content{display:flex;gap:12px}.scene-content.disabled{opacity:.4;pointer-events:none}.scene-list{width:260px;flex-shrink:0;display:flex;flex-direction:column;background:#0003;border-radius:4px;padding:8px}.scene-list-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid #333}.scene-list-header span{font-size:11px;color:#666;letter-spacing:1px}.scene-add-btn{width:22px;height:22px;background:linear-gradient(180deg,#3a3a3a,#252525);border:1px solid #555;border-radius:4px;color:#888;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.scene-add-btn:hover{background:linear-gradient(180deg,#4a4a4a,#353535);border-color:#0f8;color:#0f8}.scene-items{display:flex;flex-direction:column;gap:4px}.scene-item{display:flex;flex-direction:column;gap:4px;padding:6px 8px;background:linear-gradient(180deg,#32323280,#1e1e1e80);border:1px solid #3a3a3a;border-radius:4px;cursor:pointer;transition:all .15s ease}.scene-item:hover{background:linear-gradient(180deg,#3c3c3c99,#28282899);border-color:#555}.scene-item.editing{background:linear-gradient(180deg,#0064b433,#003c7833);border-color:#0af;box-shadow:inset 0 0 10px #00aaff1a}.scene-item.current{border-left:3px solid #00ff88;background:linear-gradient(180deg,#00643226,#003c1e26)}.scene-item.current.editing{border-left:3px solid #00aaff;background:linear-gradient(180deg,#0064b433,#003c7833)}.scene-name{font-size:12px;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scene-item.current .scene-name{color:#0f8;font-weight:700}.scene-item.editing .scene-name{color:#0af}.scene-item-buttons{display:flex;align-items:center;gap:4px}.scene-launch-btn{width:22px;height:22px;background:linear-gradient(180deg,#444,#333);border:1px solid #555;border-radius:3px;color:#888;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.scene-launch-btn:hover{background:linear-gradient(180deg,#0af,#07c);border-color:#0cf;color:#fff;box-shadow:0 0 6px #0af6}.scene-launch-btn.active{background:linear-gradient(180deg,#0d7,#0a5);border-color:#0f8;color:#fff;box-shadow:0 0 8px #00ff8880;animation:pulse-glow 1.5s ease-in-out infinite}@keyframes pulse-glow{0%,to{box-shadow:0 0 6px #0f86}50%{box-shadow:0 0 12px #00ff88b3}}.scene-item-actions{display:flex;gap:3px}.scene-action-btn{width:20px;height:20px;background:linear-gradient(180deg,#3a3a3a,#252525);border:1px solid #444;border-radius:3px;color:#888;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.scene-action-btn:hover:not(:disabled){background:linear-gradient(180deg,#4a4a4a,#353535);border-color:#0af;color:#fff}.scene-action-btn.delete:hover:not(:disabled){border-color:#f44;color:#f44}.scene-action-btn:disabled{opacity:.3;cursor:not-allowed}.scene-editor{flex:1;display:flex;flex-direction:column;background:#0003;border-radius:4px;padding:8px;min-width:0}.scene-editor-header{padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid #333}.scene-name-input{width:100%;padding:6px 10px;background:#0000004d;border:1px solid #444;border-radius:4px;color:#fff;font-size:14px;font-weight:700}.scene-name-input:focus{outline:none;border-color:#0af;box-shadow:0 0 6px #00aaff4d}.scene-instruments{display:flex;flex-direction:column;gap:1px}.scene-instruments-header{display:flex;align-items:center;padding:4px 8px;background:#0003;border-radius:3px;margin-bottom:4px}.scene-instruments-header span{font-size:10px;color:#666;letter-spacing:1px}.col-instrument{flex:1}.col-pattern{width:60px;text-align:center}.col-mute{width:40px;text-align:center}.scene-instrument-row{display:flex;align-items:center;padding:3px 6px;background:#ffffff05;border-radius:2px;transition:background .1s ease}.scene-instrument-row:hover{background:#ffffff0d}.instrument-label{flex:1;font-size:10px;color:#999}.scene-instrument-row .pattern-select{width:50px;padding:3px 6px;background:linear-gradient(180deg,#333,#252525);border:1px solid #444;border-radius:3px;color:#ddd;font-size:11px;font-weight:700;text-align:center;cursor:pointer}.scene-instrument-row .pattern-select:hover{border-color:#0af}.scene-instrument-row .pattern-select:focus{outline:none;border-color:#0af}.mute-checkbox{width:40px;display:flex;justify-content:center;cursor:pointer}.mute-checkbox input{display:none}.mute-indicator{width:16px;height:16px;background:linear-gradient(180deg,#333,#252525);border:1px solid #444;border-radius:3px;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.mute-indicator:after{content:"M";font-size:9px;font-weight:700;color:#555}.mute-checkbox input:checked+.mute-indicator{background:linear-gradient(180deg,#f44,#c00);border-color:#f44;box-shadow:0 0 6px #f446}.mute-checkbox input:checked+.mute-indicator:after{color:#fff}.no-scene{display:flex;align-items:center;justify-content:center;height:100%;color:#555;font-style:italic}