@import "https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Space+Mono:wght@400;700&display=swap";:root{--acid:#cf0;--magenta:#f09;--orange:#ff4d00;--bg:#111;--bg2:#1a1a1a;--bg3:#222;--border:#333;--text:#eee;--text-dim:#888}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg);width:100%;height:100%;color:var(--text);font-family:Space Mono,monospace;overflow:hidden}h1,h2,h3,h4{letter-spacing:-.03em;font-family:Syne,sans-serif;font-weight:800}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border)}::-webkit-scrollbar-thumb:hover{background:var(--acid)}.knob-container{cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:6px;display:flex}.knob{border:2px solid var(--border);cursor:grab;background:radial-gradient(circle at 35% 35%,#3a3a3a,#1a1a1a);border-radius:50%;width:52px;height:52px;transition:border-color .2s;position:relative}.knob:hover{border-color:var(--acid)}.knob.active{border-color:var(--magenta);box-shadow:0 0 12px var(--magenta)}.knob-indicator{background:var(--acid);transform-origin:bottom;border-radius:2px;width:3px;height:12px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.knob-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;text-align:center;font-size:9px}.knob-value{color:var(--acid);font-family:Space Mono,monospace;font-size:10px}.fader-wrap{flex-direction:column;align-items:center;gap:8px;display:flex}.fader-track{background:var(--bg3);border:1px solid var(--border);cursor:pointer;border-radius:3px;width:6px;height:80px;position:relative}.fader-fill{background:var(--acid);border-radius:3px;transition:height .1s;position:absolute;bottom:0;left:0;right:0}.fader-thumb{border:1px solid var(--acid);cursor:grab;background:#444;border-radius:2px;width:18px;height:8px;position:absolute;left:50%;transform:translate(-50%)}.beat-pad{aspect-ratio:1;border:2px solid var(--border);background:var(--bg3);cursor:pointer;transition:all 50ms;position:relative;overflow:hidden}.beat-pad:hover{border-color:var(--acid);background:#1f2200}.beat-pad.active{background:var(--acid);border-color:var(--acid);box-shadow:0 0 16px var(--acid)}.beat-pad.playing{background:var(--magenta)!important;border-color:var(--magenta)!important;box-shadow:0 0 20px var(--magenta)!important}.module{background:var(--bg2);border:1px solid var(--border);padding:16px;position:relative}.module.pulsing{animation:.5s ease-in-out infinite alternate pulse-border}@keyframes pulse-border{0%{border-color:var(--border);box-shadow:none}to{border-color:var(--acid);box-shadow:0 0 12px #ccff004d}}.waveform-canvas{background:var(--bg3);border:1px solid var(--border);width:100%;height:80px;display:block}.genre-pill{border:2px solid var(--border);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;color:var(--text-dim);background:0 0;padding:6px 14px;font-family:Syne,sans-serif;font-size:12px;font-weight:700;transition:all .15s}.genre-pill:hover{border-color:var(--acid);color:var(--acid)}.genre-pill.selected{background:var(--acid);border-color:var(--acid);color:var(--bg)}.drop-zone{border:2px dashed var(--border);cursor:pointer;transition:all .2s}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--acid);background:#ccff000a}.play-btn{border:2px solid var(--acid);width:52px;height:52px;color:var(--acid);cursor:pointer;background:0 0;justify-content:center;align-items:center;font-size:20px;transition:all .15s;display:flex}.play-btn:hover{background:var(--acid);color:var(--bg);box-shadow:0 0 20px #ccff0080}.play-btn.playing{background:var(--magenta);border-color:var(--magenta);color:#fff;box-shadow:0 0 20px #ff009980}.cta-btn{text-transform:uppercase;letter-spacing:.05em;cursor:pointer;background:0 0;border:2px solid;padding:10px 20px;font-family:Syne,sans-serif;font-size:13px;font-weight:800;transition:all .15s}.cta-btn.primary{border-color:var(--acid);color:var(--acid)}.cta-btn.primary:hover{background:var(--acid);color:var(--bg);box-shadow:0 0 20px #cf06}.cta-btn.danger{border-color:var(--orange);color:var(--orange)}.cta-btn.danger:hover{background:var(--orange);color:#fff;box-shadow:0 0 20px #ff4d0066}.bpm-display{color:var(--acid);font-family:Space Mono,monospace;font-size:36px;font-weight:700;line-height:1}.nav-item{cursor:pointer;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;border-left:3px solid #0000;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;font-size:9px;transition:all .15s;display:flex}.nav-item:hover{color:var(--acid);background:#ccff000d}.nav-item.active{color:var(--acid);border-left-color:var(--acid);background:#ccff0014}@keyframes glitch{0%,to{text-shadow:2px 0 var(--magenta), -2px 0 var(--acid)}25%{text-shadow:-2px 0 var(--magenta), 2px 0 var(--acid)}50%{text-shadow:2px 2px var(--magenta), -2px -2px var(--acid)}75%{text-shadow:-2px 2px var(--magenta), 2px -2px var(--acid)}}.glitch{animation:3s infinite glitch}.vu-bar{border-radius:1px 1px 0 0;width:8px;transition:height 50ms}.progress-bar{background:var(--bg3);border:1px solid var(--border);cursor:pointer;height:4px;position:relative}.progress-fill{background:var(--acid);height:100%;transition:width .1s linear}.progress-thumb{background:var(--acid);border:2px solid var(--bg);border-radius:50%;width:12px;height:12px;position:absolute;top:50%;transform:translate(-50%,-50%)}.tag{text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--border);color:var(--text-dim);padding:2px 8px;font-size:9px;display:inline-block}.scroll-area{overflow:hidden auto}input[type=range]{-webkit-appearance:none;background:var(--bg3);border:1px solid var(--border);outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--acid);cursor:pointer;border:2px solid var(--bg);width:14px;height:14px}