:root{--bg-color:#030303;--text-primary:#fff;--text-secondary:#a0a0ab;--accent:#00e5a3;--accent-hover:#00ffb7;--deck-b-color:#f40;--btn-secondary-bg:#ffffff0d;--btn-secondary-hover:#ffffff1a;--glass-bg:#0a0a0cb3;--glass-border:#ffffff1a}*{box-sizing:border-box;margin:0;padding:0}body,html{background-color:var(--bg-color);width:100vw;height:100vh;color:var(--text-primary);cursor:grab;font-family:Inter,sans-serif;overflow:hidden}body:active{cursor:grabbing}#visualizer-canvas{z-index:1;pointer-events:auto;width:100%;height:100%;transition:transform 50ms ease-out,filter 50ms ease-out;position:absolute;top:0;left:0}.pointer-pass,.pointer-pass *{pointer-events:none}#vhs-effects{z-index:5;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.scanlines{z-index:6;background:linear-gradient(#fff0,#fff0 50%,#0000004d 50%,#0000004d) 0 0/100% 4px;width:100%;height:100%;position:absolute}.noise{opacity:.15;mix-blend-mode:overlay;z-index:6;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");width:100%;height:100%;animation:.2s steps(4,end) infinite grainShift;position:absolute}@keyframes grainShift{0%{transform:translate(0)}25%{transform:translate(-1%,1%)}50%{transform:translate(1%,-1%)}75%{transform:translate(-.5%,-.5%)}to{transform:translate(.5%,.5%)}}.vignette{z-index:7;background:radial-gradient(circle,#0000 40%,#000000e6 100%);width:100%;height:100%;position:absolute}.lens-curve{z-index:8;border-radius:20px;width:100%;height:100%;position:absolute;box-shadow:inset 0 0 100px #000000e6,inset 0 0 30px #000c}#vj-panel{z-index:100;transition:opacity .5s;position:absolute;bottom:2rem;left:50%;transform:translate(-50%)}#vj-panel.hidden{opacity:0;pointer-events:none}.classy-panel{-webkit-backdrop-filter:blur(30px);background:#050505b3;border:1px solid #ffffff14;border-radius:16px;align-items:flex-start;gap:1.5rem;padding:1.2rem 2rem;display:flex;box-shadow:0 20px 40px #000c,inset 0 0 10px #ffffff05}.central-mix{border-left:1px solid #ffffff0d;border-right:1px solid #ffffff0d;flex-direction:column;align-items:center;gap:1.2rem;padding:0 1.5rem;display:flex}.fx-section{flex-direction:column;gap:1rem;width:100%;display:flex}.fx-row{justify-content:space-between;gap:.5rem;display:flex}.fx-btn{color:#a0a0ab;cursor:pointer;letter-spacing:.5px;background:#ffffff0d;border:1px solid #ffffff26;border-radius:6px;padding:.5rem .6rem;font-size:.7rem;font-weight:500;transition:all .2s}.fx-btn:hover{color:#fff;background:#ffffff26}.fx-btn.active{background:var(--text-primary);color:#000;border-color:var(--text-primary);box-shadow:0 0 10px #fff3}.fx-btn.warning:hover,.fx-btn.warning.active{color:#fff;background:#ff2a2a;border-color:#ff2a2a;box-shadow:0 0 15px #ff2a2a66}.fx-select{color:#ccc;cursor:pointer;letter-spacing:.5px;background:#ffffff0d;border:1px solid #ffffff26;border-radius:8px;flex:1;padding:.4rem .6rem;font-size:.75rem;transition:all .2s}.fx-select:hover{color:#fff;background:#ffffff26}.fx-select option{background:var(--bg-color);color:#fff}.deck{flex-direction:column;align-items:center;display:flex}.deck h3{color:var(--text-secondary);letter-spacing:3px;text-transform:uppercase;margin-bottom:.6rem;font-size:.75rem;font-weight:500}.btn-group{gap:.5rem;display:flex}.btn-group button{background:var(--btn-secondary-bg);color:#fff;box-shadow:none;border:1px solid #ffffff0d;border-radius:6px;padding:.5rem .9rem;font-family:Inter,sans-serif;font-size:.85rem;font-weight:500;transition:all .2s}.btn-group button:hover{background:var(--btn-secondary-hover);transform:translateY(-2px)}.deck-a button.active{background:var(--accent);color:#000;text-shadow:none;box-shadow:0 0 15px #00e5a380}.deck-b button.active{background:var(--deck-b-color);color:#000;text-shadow:none;box-shadow:0 0 15px #f409}.control-group{align-items:center;gap:.5rem;width:100%;margin-top:.8rem;display:flex}.control-group label{color:var(--text-secondary);letter-spacing:1px;font-size:.7rem;font-weight:600}.control-group input[type=range]{appearance:none;background:#fff3;border-radius:2px;outline:none;flex:1;height:4px}.control-group input[type=range]::-webkit-slider-thumb{appearance:none;cursor:ew-resize;background:#fff;border-radius:50%;width:12px;height:12px;box-shadow:0 0 5px #fffc}.deck-a .control-group input[type=range]::-webkit-slider-thumb{background:var(--accent)}.deck-b .control-group input[type=range]::-webkit-slider-thumb{background:var(--deck-b-color)}.crossfader{color:var(--text-secondary);align-items:center;gap:1rem;font-size:.8rem;font-weight:500;display:flex}#mix-slider{appearance:none;background:linear-gradient(to right, var(--accent) 0%, var(--deck-b-color) 100%);border-radius:4px;outline:none;width:250px;height:8px}#mix-slider::-webkit-slider-thumb{appearance:none;cursor:ew-resize;background:#fff;border-radius:4px;width:24px;height:36px;box-shadow:0 0 15px #fffc}#ui-container{z-index:10;background:radial-gradient(circle,#0000 0%,#000000e6 100%);justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s ease-out;display:flex;position:absolute;top:0;left:0}#ui-container.hidden{opacity:0;pointer-events:none}#intro-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);text-align:center;border-radius:16px;max-width:600px;padding:3rem;animation:.8s cubic-bezier(.16,1,.3,1) slideUp;box-shadow:0 20px 50px #000c,inset 0 0 20px #ffffff0d}.pro-title{letter-spacing:-1px;color:#fff;text-transform:uppercase;margin-bottom:1rem;font-family:Inter,sans-serif;font-size:3rem;font-weight:800}p{color:var(--text-secondary);margin-bottom:2rem;font-size:1.1rem;line-height:1.6}.actions{flex-direction:column;gap:1rem;margin-bottom:2rem;display:flex}button{background:var(--accent);color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:1.5px;border:none;border-radius:6px;padding:1rem 2rem;font-family:Inter,sans-serif;font-size:.95rem;font-weight:600;transition:all .2s}button:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 6px 20px #f059}button.secondary{background:var(--btn-secondary-bg);box-shadow:none;border:1px solid var(--glass-border);text-shadow:none}button.secondary:hover{background:var(--btn-secondary-hover);text-shadow:2px 0 #0ff}#mode-indicator{z-index:100;color:#fff;text-transform:uppercase;letter-spacing:4px;text-shadow:2px 0 red,-2px 0 #0ff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000b3;border:1px solid #ffffff1a;border-radius:6px;padding:.5rem 1.5rem;font-size:1.5rem;font-weight:600;transition:opacity .5s ease-in-out,transform .2s;position:absolute;top:2rem;right:2rem}#mode-indicator.show{opacity:1;transform:scale(1.1)}#mode-indicator.hidden{opacity:0;pointer-events:none}.tutorial{text-align:left;border:1px solid var(--glass-border);background:#00000080;border-radius:12px;padding:1.5rem;font-size:.95rem}.tutorial strong{color:#fff;margin-bottom:.5rem;display:block}.tutorial ol{color:var(--text-secondary);padding-left:1.5rem;line-height:1.5}#top-tools{z-index:100;align-items:center;gap:1rem;display:flex;position:absolute;top:2rem;right:2rem}#top-tools.hidden{opacity:0;pointer-events:none}#midi-status{border:1px solid var(--glass-border);color:#555;background:#00000080;border-radius:20px;padding:.4rem 1rem;font-size:.9rem;font-weight:600;transition:all .3s}#midi-status.midi-on{color:#fff;border-color:var(--accent);text-shadow:0 0 5px var(--accent);box-shadow:0 0 10px #00e5a380}.record-btn{color:#fff;letter-spacing:2px;cursor:pointer;box-shadow:none;background:#f003;border:1px solid red;border-radius:8px;padding:.4rem 1.5rem;font-weight:600;transition:all .3s}.record-btn:hover{background:#f006;transform:none;box-shadow:0 0 15px #f009}.record-btn.recording{background:red;animation:1s infinite alternate pulseRec}@keyframes pulseRec{0%{opacity:.8;box-shadow:0 0 10px #ff000080}to{opacity:1;box-shadow:0 0 25px red}}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.hidden-desktop{display:none}#mobile-toggle-btn{z-index:200;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0a0a0acc;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex;position:absolute;bottom:2rem;right:2rem;box-shadow:0 10px 20px #00000080}@media (width<=800px){.hidden-desktop{display:flex}#vj-panel{width:95%;max-width:400px;transition:bottom .4s cubic-bezier(.16,1,.3,1),opacity .4s;bottom:-100%}#vj-panel.show-mobile{bottom:2rem}.classy-panel{flex-direction:column;align-items:stretch;gap:2rem;max-height:80vh;padding:1.5rem;overflow-y:auto}.central-mix{border:1px solid #ffffff0d;border-left:none;border-right:none;padding:1.5rem 0}.btn-group{flex-wrap:wrap;justify-content:center}.btn-group button{flex:calc(33% - .5rem);padding:.8rem 0;font-size:.8rem}#mix-slider{width:100%}.fx-row{flex-wrap:wrap}.fx-btn,.fx-select{flex:calc(50% - .5rem);padding:.8rem 0}.control-group input[type=range]::-webkit-slider-thumb{width:20px;height:20px}#mix-slider::-webkit-slider-thumb{width:32px;height:48px}#top-tools{top:1rem;right:1rem}}