*{box-sizing:border-box;margin:0;padding:0}body{font-family:Helvetica Neue,Arial,sans-serif;background:#1a1a1a;color:#eee;min-height:100vh}#app{display:flex;flex-direction:column;min-height:100vh}header{background:#2a2a2a;padding:1rem;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #444;position:sticky;top:0;z-index:100}header h1{font-size:1.5rem;font-weight:700;letter-spacing:2px}#transport{display:flex;gap:1rem;align-items:center}#transport button{padding:.5rem 1.5rem;font-size:1rem;cursor:pointer;background:#444;color:#fff;border:1px solid #666;border-radius:4px}#transport button:hover{background:#555}#bpm{width:60px;padding:.25rem;background:#333;color:#fff;border:1px solid #666;text-align:center}main#rack{flex:1;padding:1rem;display:flex;flex-direction:column;gap:1rem;overflow-y:auto}.module{border-radius:8px;padding:1rem;position:relative;width:fit-content}.module-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.module-header h2{font-size:1.2rem;font-weight:700;letter-spacing:2px}.module-mixer{display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:12px}.mute-btn{width:24px;height:24px;border-radius:3px;border:1px solid #555;background:#333;color:#888;font-size:10px;font-weight:700;cursor:pointer}.mute-btn:hover{background:#444;color:#aaa}.mute-btn.active{background:#c33;color:#fff;border-color:#a22}.volume-slider{width:60px!important;height:18px!important;-webkit-appearance:none;background:transparent;cursor:pointer}.volume-slider::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,#333,#555);border-radius:2px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#888;border:1px solid #666;border-radius:2px;margin-top:-4px;cursor:grab}.volume-slider::-moz-range-track{height:4px;background:linear-gradient(90deg,#333,#555);border-radius:2px}.volume-slider::-moz-range-thumb{width:12px;height:12px;background:#888;border:1px solid #666;border-radius:2px;cursor:grab}.remove-module{background:#0000004d;border:none;color:#888;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:12px}.remove-module:hover{background:#c00;color:#fff}.module-controls{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:1rem}.module-303{background:linear-gradient(180deg,#c8c8c8,#a0a0a0,#888);border:3px solid #666;box-shadow:inset 0 1px #ffffff80,inset 0 -2px #00000026,0 4px 12px #0006}.module-303 .module-header h2{color:#222;text-shadow:0 1px 0 rgba(255,255,255,.5);font-family:Arial Black,sans-serif}.module-303 .knob-group label{color:#333;font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.module-303 .knob{width:52px;height:52px;border-radius:50%;background:conic-gradient(#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070 360deg);border:2px solid #505050;box-shadow:0 3px 6px #0006,inset 0 1px #fff3;cursor:grab;display:flex;align-items:center;justify-content:center}.module-303 .knob:active{cursor:grabbing}.module-303 .knob-inner{width:36px;height:36px;border-radius:50%;background:conic-gradient(gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray 360deg);border:1px solid #606060;box-shadow:inset 0 2px 3px #ffffff4d,inset 0 -2px 3px #0003;position:relative}.module-303 .knob-indicator{position:absolute;top:2px;left:50%;transform:translate(-50%);width:4px;height:14px;background:#f0f0f0;border-radius:2px;box-shadow:0 0 2px #0000004d}.module-303 .random-btn{background:linear-gradient(180deg,#e8e8e8,silver,#a0a0a0);border:1px solid #606060;border-radius:3px;color:#333;font-size:.65rem;font-weight:700;padding:8px 12px;cursor:pointer;box-shadow:0 2px #505050,inset 0 1px #ffffff80;margin-left:1rem}.module-303 .random-btn:hover{background:linear-gradient(180deg,#f0f0f0,#d0d0d0,#b0b0b0)}.module-303 .random-btn:active{transform:translateY(1px);box-shadow:0 1px #505050,inset 0 1px #ffffff80}.module-303 .sequencer{background:#888;padding:16px 10px 10px;border-radius:4px;border:1px solid #666;gap:12px}.module-303 .step{width:20px;height:40px;background:linear-gradient(180deg,#d8d0c8,#c8c0b8 10%,#b8b0a8,#a8a098 90%,#989088);border:1px solid #807870;border-radius:3px;box-shadow:0 3px #686058,0 4px 3px #0000004d,inset 0 1px #ffffff80,inset -1px 0 #0000001a,inset 1px 0 #ffffff4d;position:relative;display:flex;align-items:center;justify-content:center;cursor:ns-resize}.module-303 .step:before{content:"";position:absolute;top:-16px;left:50%;transform:translate(-50%);width:8px;height:8px;background:radial-gradient(circle at 30% 30%,#4a2020,#2a1010);border-radius:50%;border:1px solid #1a0808;box-shadow:inset 0 1px 2px #00000080}.module-303 .step.active:before{background:radial-gradient(circle at 30% 30%,#f64,#d20 60%,#a00);border-color:#c20;box-shadow:0 0 6px #f40,0 0 10px #f60}.module-303 .step:nth-child(4):after,.module-303 .step:nth-child(8):after,.module-303 .step:nth-child(12):after{content:"";position:absolute;right:-7px;top:-17px;bottom:-11px;width:1px;background:#666}.module-303 .step:hover{background:linear-gradient(180deg,#e0d8d0,#d0c8c0 10%,#c0b8b0,#b0a8a0 90%,#a09890)}.module-303 .step:active{transform:translateY(2px);box-shadow:0 1px #686058,inset 0 1px #ffffff80,inset -1px 0 #0000001a,inset 1px 0 #ffffff4d}.module-303 .step.current{outline:2px solid #ff0;outline-offset:1px}.module-303 .step .note-label{font-size:.55rem;font-weight:700;color:#222;pointer-events:none;-webkit-user-select:none;user-select:none}.module-101{background:linear-gradient(180deg,#4a88bb,#3a78aa,#2a6899);border:3px solid #1a4a6a;box-shadow:inset 0 1px #ffffff40,inset 0 -2px 4px #0003,0 4px 8px #00000080}.module-101 .module-header h2{color:#102030;font-family:Helvetica,sans-serif;font-weight:700;letter-spacing:2px;text-shadow:0 1px 0 rgba(255,255,255,.3)}.module-101 .knob-group{flex-direction:column;align-items:center}.module-101 .knob-group label{color:#102030;font-size:.55rem;text-transform:uppercase;order:-1;text-shadow:0 1px 0 rgba(255,255,255,.3)}.module-101 .knob-group input[type=range]{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;width:24px;height:80px;background:transparent;cursor:pointer}.module-101 .knob-group input[type=range]::-webkit-slider-runnable-track{width:6px;height:100%;background:linear-gradient(90deg,#1a1a1a,#2a2a2a,#1a1a1a);border:1px solid #0a0a0a;border-radius:2px;box-shadow:inset 0 0 4px #000c}.module-101 .knob-group input[type=range]::-moz-range-track{width:6px;height:100%;background:linear-gradient(90deg,#1a1a1a,#2a2a2a,#1a1a1a);border:1px solid #0a0a0a;border-radius:2px;box-shadow:inset 0 0 4px #000c}.module-101 .knob-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:14px;background:linear-gradient(180deg,#404040,#353535 40%,#f80 45%,#f80 55%,#252525 60%,#1a1a1a);border:1px solid #0a0a0a;border-radius:2px;box-shadow:0 1px 2px #00000080,inset 0 1px #ffffff26;cursor:grab}.module-101 .knob-group input[type=range]::-moz-range-thumb{width:22px;height:14px;background:linear-gradient(180deg,#404040,#353535 40%,#f80 45%,#f80 55%,#252525 60%,#1a1a1a);border:1px solid #0a0a0a;border-radius:2px;box-shadow:0 1px 2px #00000080,inset 0 1px #ffffff26;cursor:grab}.module-101 .knob-group select{background:#1a3a4a;color:#c0d0e0;border:1px solid #0a2a3a;padding:.3rem .5rem;font-size:.7rem}.module-101 .random-btn{background:#1a3a4a;border:1px solid #0a2a3a;border-radius:2px;color:#c0d0e0;font-size:.55rem;font-weight:700;padding:4px 8px;cursor:pointer;margin-top:4px}.module-101 .random-btn:hover{background:#2a4a5a}.module-101 .sequencer{background:linear-gradient(180deg,#2a5878,#1a4868);padding:14px 10px 10px;border-radius:3px;border:1px solid #0a3848;gap:8px}.module-101 .step{width:28px;height:14px;background:linear-gradient(180deg,#e8e4dc,#d8d4cc 30%,#c8c4bc 70%,#b8b4ac);border:1px solid #888;border-radius:2px;box-shadow:0 2px #666,inset 0 1px #ffffff80,inset 0 -1px #0000001a;position:relative}.module-101 .step:before{content:"";position:absolute;top:-12px;left:50%;transform:translate(-50%);width:10px;height:4px;background:#3a1818;border:1px solid #2a0808;border-radius:1px}.module-101 .step.active:before{background:#d22;border-color:#a11;box-shadow:0 0 6px #f44}.module-101 .step:hover{background:linear-gradient(180deg,#f0ece4,#e0dcd4 30%,#d0ccc4 70%,#c0bcb4)}.module-101 .step:active{transform:translateY(1px);box-shadow:0 1px #666,inset 0 1px #ffffff80}.module-101 .step.current{outline:2px solid #ff0;outline-offset:1px}.module-101 .step .note-label{font-size:.55rem;font-weight:700;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-shadow:0 1px 0 rgba(255,255,255,.5)}.module-808{background:linear-gradient(180deg,#1f1f1f,#141414,#0a0a0a);border:3px solid #333;box-shadow:inset 0 1px #ffffff14,0 4px 12px #0009}.module-808 .module-header h2{color:#ff6b35;font-family:Arial,sans-serif;font-weight:700;font-style:italic;font-size:1.3rem}.module-808 .knob-group label{color:#888;font-size:.55rem;text-transform:uppercase}.module-808 .knob{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#333,#1a1a1a,#0a0a0a);border:2px solid #444;box-shadow:0 3px 6px #00000080,inset 0 1px #ffffff1a;cursor:grab;display:flex;align-items:center;justify-content:center}.module-808 .knob-inner{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#444,#222);border:1px solid #555;position:relative}.module-808 .knob-indicator{position:absolute;top:2px;left:50%;transform:translate(-50%);width:3px;height:10px;background:#ff6b35;border-radius:2px;box-shadow:0 0 4px #ff6b35}.module-808 .module-controls{display:none}.module-808 .drum-columns{display:flex;gap:2px;padding:6px 4px 6px 28px;background:linear-gradient(180deg,#252525,#1a1a1a);border-radius:4px 4px 0 0;overflow-x:auto}.module-808 .drum-col{display:flex;flex-direction:column;align-items:center;min-width:48px;padding:4px 6px;border-right:1px solid #ff6b35}.module-808 .drum-col:last-child{border-right:none}.module-808 .drum-col-label{font-size:.6rem;font-weight:700;color:#888;margin-top:2px}.module-808 .mini-knob-wrap{display:flex;flex-direction:column;align-items:center;margin:1px 0}.module-808 .mini-knob-label{font-size:.4rem;color:#666;text-transform:uppercase;line-height:1}.module-808 .mini-knob{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#444,#1a1a1a 70%);border:1px solid #555;box-shadow:0 2px 4px #00000080;cursor:grab;display:flex;align-items:center;justify-content:center}.module-808 .mini-knob-inner{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#3a3a3a,#1a1a1a);position:relative}.module-808 .mini-knob-indicator{position:absolute;top:1px;left:50%;transform:translate(-50%);width:2px;height:7px;background:#ff6b35;border-radius:1px}.module-808 .drum-switch{display:flex;flex-direction:column;align-items:center;background:#1a1a1a;border:1px solid #333;border-radius:2px;padding:1px 3px;cursor:pointer;font-size:.45rem;margin-top:2px}.module-808 .drum-switch .sw-pri{color:#ff6b35;font-weight:700}.module-808 .drum-switch .sw-alt{color:#444;font-weight:700}.module-808 .drum-switch.alt-active .sw-pri{color:#444}.module-808 .drum-switch.alt-active .sw-alt{color:#ff6b35}.module-808 .drum-sequencers{background:linear-gradient(180deg,#181818,#0f0f0f);padding:6px 4px;border-radius:0 0 4px 4px}.module-808 .sequencer-row{display:flex;align-items:center;gap:6px;margin-bottom:3px}.module-808 .sequencer-row:last-child{margin-bottom:0}.module-808 .drum-label{width:24px;font-size:.6rem;font-weight:700;color:#666;text-align:right}.module-808 .sequencer{gap:4px}.module-808 .step{width:30px;height:56px;border:none;border-radius:4px;position:relative}.module-808 .step:before{content:"";position:absolute;top:8px;left:50%;transform:translate(-50%);width:8px;height:8px;background:#2a1a1a;border-radius:50%;border:1px solid rgba(0,0,0,.5);box-shadow:inset 0 1px 2px #000000b3}.module-808 .step:nth-child(-n+4){background:linear-gradient(180deg,#4a9ab0,#3888a0 10%,#307090,#286080 90%,#205870);box-shadow:0 4px #103040,0 5px 4px #00000080,inset 0 1px #ffffff4d,inset -2px 0 #00000026,inset 2px 0 #ffffff1a}.module-808 .step:nth-child(n+5):nth-child(-n+8){background:linear-gradient(180deg,#d04040,#c03030 10%,#a82828,#902020 90%,#801818);box-shadow:0 4px #400808,0 5px 4px #00000080,inset 0 1px #ffffff4d,inset -2px 0 #00000026,inset 2px 0 #ffffff1a}.module-808 .step:nth-child(n+9):nth-child(-n+12){background:linear-gradient(180deg,#e88030,#d87020 10%,#c06018,#a85010 90%,#984808);box-shadow:0 4px #502800,0 5px 4px #00000080,inset 0 1px #ffffff59,inset -2px 0 #00000026,inset 2px 0 #ffffff1a}.module-808 .step:nth-child(n+13){background:linear-gradient(180deg,#e8c040,#d8b030 10%,#c09820,#a88818 90%,#987810);box-shadow:0 4px #504008,0 5px 4px #00000080,inset 0 1px #fff6,inset -2px 0 #00000026,inset 2px 0 #ffffff26}.module-808 .step:hover{filter:brightness(1.08)}.module-808 .step:active{transform:translateY(3px);box-shadow:0 1px #0a0a0a,inset 0 1px #ffffff40,inset -2px 0 #00000026,inset 2px 0 #ffffff1a}.module-808 .step.active:before{background:radial-gradient(circle at 30% 30%,#f64,#d20 60%,#a00);border-color:#f40;box-shadow:0 0 4px #f20,0 0 8px #f40,0 0 12px #f60}.module-808 .step.current{outline:2px solid #fff;outline-offset:1px}.module-909{background:linear-gradient(180deg,#484848,#383838,#282828);border:3px solid #555;box-shadow:inset 0 1px #ffffff26,0 4px 8px #00000080}.module-909 .module-header h2{color:#0cf;font-family:Arial,sans-serif;font-weight:700}.module-909 .module-controls{display:none}.module-909{background:linear-gradient(180deg,#d8d4cc,#c8c4bc,#b8b4ac);border:3px solid #888}.module-909 .module-header h2{color:#f60;text-shadow:none}.module-909 .drum-columns{display:flex;gap:2px;padding:6px 4px 6px 28px;background:linear-gradient(180deg,#e8e4dc,#d8d4cc);border-radius:4px 4px 0 0;overflow-x:auto}.module-909 .drum-col{display:flex;flex-direction:column;align-items:center;min-width:48px;padding:4px 6px;border-right:1px solid #888}.module-909 .drum-col:last-child{border-right:none}.module-909 .drum-col-label{font-size:.6rem;font-weight:700;color:#f60;margin-top:2px}.module-909 .mini-knob-wrap{display:flex;flex-direction:column;align-items:center;margin:1px 0}.module-909 .mini-knob-label{font-size:.4rem;color:#666;text-transform:uppercase;line-height:1}.module-909 .mini-knob{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#4a5a7a,#2a3a5a 60%,#1a2a4a);border:1px solid #3a4a6a;box-shadow:0 2px 4px #0006;cursor:grab;display:flex;align-items:center;justify-content:center}.module-909 .mini-knob-inner{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#3a4a6a,#2a3a5a);position:relative}.module-909 .mini-knob-indicator{position:absolute;top:1px;left:50%;transform:translate(-50%);width:2px;height:7px;background:#f83;border-radius:1px}.module-909 .drum-sequencers{background:linear-gradient(180deg,#d8d4cc,#c8c4bc);padding:12px 10px;border-radius:4px;border:1px solid #a8a498}.module-909 .sequencer-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.module-909 .sequencer-row:last-child{margin-bottom:0}.module-909 .drum-label{width:28px;font-size:.6rem;font-weight:700;color:#555;text-align:right}.module-909 .sequencer{gap:8px}.module-909 .step{width:32px;height:32px;background:linear-gradient(180deg,#d8d0c0,#e8e0d0 8%,#f0e8d8 15%,#e8e0d0,#d0c8b8 85%,#c0b8a8);border:1px solid #a09080;border-radius:3px;box-shadow:0 3px #807060,0 4px 3px #0000004d,inset 0 1px #fff9,inset 2px 0 #fff3,inset -2px 0 #0000001a,inset 0 -2px #00000026;position:relative}.module-909 .step:before{content:"";position:absolute;top:4px;left:50%;transform:translate(-50%);width:10px;height:4px;background:#252530;border:1px solid #404050;border-radius:1px;box-shadow:inset 0 1px 2px #00000080}.module-909 .step:hover{background:linear-gradient(180deg,#e0d8c8,#f0e8d8 8%,#f8f0e0 15%,#f0e8d8,#d8d0c0 85%,#c8c0b0)}.module-909 .step:active{transform:translateY(2px);box-shadow:0 1px #807060,inset 0 1px #fff9,inset 2px 0 #fff3,inset -2px 0 #0000001a}.module-909 .step.active:before{background:#f20;border-color:#f40;box-shadow:0 0 4px #f20,0 0 8px #f40,inset 0 0 2px #ffffff80}.module-909 .step.current{outline:2px solid #ff0;outline-offset:1px}.module-909 .step:nth-child(4):after,.module-909 .step:nth-child(8):after,.module-909 .step:nth-child(12):after{content:"";position:absolute;right:-5px;top:-6px;width:1px;height:calc(100% + 12px);background:#888}.module-606{background:linear-gradient(180deg,#c8c8c8,#a0a0a0,#888);border:3px solid #666;box-shadow:inset 0 1px #ffffff80,inset 0 -2px #00000026,0 4px 8px #0006}.module-606 .module-header h2{color:#222;text-shadow:0 1px 0 rgba(255,255,255,.5);font-family:Arial Black,sans-serif}.module-606 .knob-group label{color:#333;font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.module-606 .knob{width:52px;height:52px;border-radius:50%;background:conic-gradient(#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070 360deg);border:2px solid #505050;box-shadow:0 2px 4px #0006,inset 0 0 8px #0000004d;cursor:grab;display:flex;align-items:center;justify-content:center}.module-606 .knob-inner{width:36px;height:36px;border-radius:50%;background:conic-gradient(gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray 360deg);border:1px solid #606060;position:relative;box-shadow:inset 0 0 4px #0000004d}.module-606 .knob-indicator{position:absolute;top:2px;left:50%;transform:translate(-50%);width:4px;height:14px;background:#f0f0f0;border-radius:2px;box-shadow:0 0 2px #0000004d}.module-606 .drum-columns{display:flex;gap:2px;padding:6px 4px 6px 28px;background:linear-gradient(180deg,#b0b0b0,#909090);border-radius:4px 4px 0 0;overflow-x:auto}.module-606 .drum-col{display:flex;flex-direction:column;align-items:center;min-width:48px;padding:4px 6px;border-right:1px solid #777}.module-606 .drum-col:last-child{border-right:none}.module-606 .drum-col-label{font-size:.6rem;font-weight:700;color:#444;margin-top:2px}.module-606 .mini-knob-wrap{display:flex;flex-direction:column;align-items:center;margin:1px 0}.module-606 .mini-knob-label{font-size:.4rem;color:#444;text-transform:uppercase;line-height:1}.module-606 .mini-knob{width:28px;height:28px;border-radius:50%;background:conic-gradient(#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070,#909090,#707070 360deg);border:1px solid #555;box-shadow:0 2px 4px #0000004d;cursor:grab;display:flex;align-items:center;justify-content:center}.module-606 .mini-knob-inner{width:20px;height:20px;border-radius:50%;background:conic-gradient(gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray,#a0a0a0,gray 360deg);position:relative}.module-606 .mini-knob-indicator{position:absolute;top:1px;left:50%;transform:translate(-50%);width:2px;height:7px;background:#f0f0f0;border-radius:1px}.module-606 .drum-sequencers{background:#888;padding:10px;border-radius:4px}.module-606 .drum-label{width:28px;font-size:.55rem;font-weight:700;text-transform:uppercase;color:#ddd}.module-606 .sequencer-row{margin-bottom:4px}.module-606 .sequencer{gap:10px;padding:16px 10px 10px;background:#888;border:1px solid #666}.module-606 .step:nth-child(4):after,.module-606 .step:nth-child(8):after,.module-606 .step:nth-child(12):after{content:"";position:absolute;right:-6px;top:-15px;bottom:-10px;width:1px;background:#666}.module-606 .step{width:20px;height:40px;background:linear-gradient(180deg,#d8d0c8,#c8c0b8 10%,#b8b0a8,#a8a098 90%,#989088);border:1px solid #807870;border-radius:3px;box-shadow:0 3px #686058,0 4px 3px #0000004d,inset 0 1px #ffffff80,inset -1px 0 #0000001a,inset 1px 0 #ffffff4d;position:relative}.module-606 .step:before{content:"";position:absolute;top:-16px;left:50%;transform:translate(-50%);width:6px;height:6px;border-radius:50%;background:#400000;border:1px solid #300000;box-shadow:inset 0 1px 2px #00000080}.module-606 .step.active:before{background:radial-gradient(circle at 30% 30%,#f44,red,#c00);border-color:#a00;box-shadow:0 0 4px red,0 0 8px red,inset 0 -1px 2px #0000004d}.module-606 .step:hover{background:linear-gradient(180deg,#e8e0d8,#d8d0c8 10%,#c8c0b8,#b8b0a8,#a8a098,#989088 90%,#888078)}.module-606 .step:active{transform:translateY(2px);box-shadow:0 1px #505050,inset 0 1px #ffffff80,inset 1px 0 #fff3,inset -1px 0 #0000001a}.module-606 .step.current{outline:2px solid #ff0;outline-offset:1px}.sequencer{display:flex;gap:4px}.drum-sequencers{margin-top:.5rem}.sequencer-row{display:flex;align-items:center;gap:.5rem}.drum-label{font-size:.7rem;text-transform:uppercase}.step{cursor:pointer;transition:transform .05s}.knob-group{display:flex;flex-direction:column;align-items:center;gap:.25rem}.knob-group label{font-size:.65rem;text-transform:uppercase}.knob-group input[type=range]{width:50px;height:50px;-webkit-appearance:none;background:transparent}.knob-group select{background:#222;color:#fff;border:1px solid #444;padding:.25rem;font-size:.75rem}footer{background:#2a2a2a;padding:1rem;border-top:2px solid #444}#module-selector{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}#module-selector button{padding:.5rem 1rem;background:#333;color:#aaa;border:1px solid #555;border-radius:4px;cursor:pointer;font-size:.85rem;font-weight:700}#module-selector button:hover{background:#444;color:#fff}#module-selector button[data-module="303"]:hover{color:#ff6a00}#module-selector button[data-module="101"]:hover{color:#e53e3e}#module-selector button[data-module=alpha]:hover{color:#c6f}#module-selector button[data-module="808"]:hover{color:#3a9aaa}#module-selector button[data-module="909"]:hover{color:#0cf}#module-selector button[data-module="606"]:hover{color:#f33}.module-alpha{background:linear-gradient(180deg,#2a1a3a,#1a1028,#100818);border:3px solid #4a2a6a;box-shadow:inset 0 1px #ffffff1a,0 4px 8px #00000080}.module-alpha .module-header h2{color:#c6f;font-family:Arial,sans-serif;font-weight:700;letter-spacing:3px}.module-alpha .knob-group label{color:#96c;font-size:.55rem;text-transform:uppercase}.module-alpha .knob{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#3a2a4a,#2a1a3a,#1a1028);border:2px solid #5a3a7a;box-shadow:0 3px 6px #0006,inset 0 1px #ffffff1a;cursor:grab;display:flex;align-items:center;justify-content:center}.module-alpha .knob-inner{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#4a3a5a,#3a2a4a);border:1px solid #6a4a8a;position:relative}.module-alpha .knob-indicator{position:absolute;top:2px;left:50%;transform:translate(-50%);width:3px;height:12px;background:#c6f;border-radius:2px;box-shadow:0 0 4px #c6f}.module-alpha .random-btn{background:linear-gradient(180deg,#4a2a6a,#3a1a5a);border:1px solid #6a4a8a;border-radius:3px;color:#c6f;font-size:.65rem;font-weight:700;padding:8px 12px;cursor:pointer;box-shadow:0 2px #2a1a3a;margin-left:1rem}.module-alpha .random-btn:hover{background:linear-gradient(180deg,#5a3a7a,#4a2a6a)}.module-alpha .sequencer{background:#1a1028;padding:12px;border-radius:4px;border:1px solid #3a2a4a;gap:6px}.module-alpha .step{width:28px;height:40px;background:linear-gradient(180deg,#3a2a4a,#2a1a3a,#1a1028);border:1px solid #4a3a5a;border-radius:3px;box-shadow:0 2px #100818,inset 0 1px #ffffff1a;display:flex;align-items:center;justify-content:center;cursor:ns-resize;position:relative}.module-alpha .step:before{content:"";position:absolute;top:4px;left:50%;transform:translate(-50%);width:6px;height:6px;background:#1a1028;border-radius:50%;border:1px solid #2a1a3a}.module-alpha .step.active:before{background:#c6f;border-color:#a4d;box-shadow:0 0 6px #c6f,0 0 10px #a4d}.module-alpha .step .note-label{font-size:.5rem;font-weight:700;color:#c6f;margin-top:8px;position:relative;z-index:2}.module-alpha .step .length-bar{display:none;position:absolute;top:50%;left:4px;height:8px;background:linear-gradient(90deg,#c6f,#94c);border-radius:2px;transform:translateY(-50%);opacity:.7;z-index:1;pointer-events:none}.module-alpha .step.current{outline:2px solid #cc66ff;outline-offset:1px}