:root{--bg-dark: #0a0a0f;--bg-panel: #14141e;--primary: #00f0ff;--secondary: #7000ff;--accent: #ff0055;--text-main: #ffffff;--text-dim: #8888aa;--glass: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--font-main: "Inter", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}body{background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-main);overflow:hidden;height:100vh;width:100vw}#root{height:100%;width:100%;display:flex;flex-direction:column}button{cursor:pointer;border:none;outline:none;font-family:inherit}input[type=range]{-webkit-appearance:none;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}.deck-container{display:flex;flex-direction:column;align-items:center;background:var(--bg-panel);padding:2rem;border-radius:1rem;box-shadow:0 10px 30px #00000080;border:1px solid var(--glass-border);width:350px;position:relative}.deck-header{width:100%;display:flex;justify-content:space-between;margin-bottom:1rem;color:var(--text-dim);font-size:.8rem;text-transform:uppercase;letter-spacing:1px}.platter-container{width:280px;height:280px;position:relative;margin-bottom:2rem}.platter{width:100%;height:100%;border-radius:50%;background:conic-gradient(from 0deg,#111,#222,#111,#222,#111);box-shadow:0 0 20px #000c,inset 0 0 0 2px #333;position:relative;display:flex;align-items:center;justify-content:center;transition:transform .1s linear}.platter.spinning{animation:spin 2s linear infinite}.platter.scratching{animation:none;cursor:grab}.platter.scratching:active{cursor:grabbing}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.record-label{width:100px;height:100px;border-radius:50%;background:var(--accent);border:4px solid #fff;position:absolute}.controls{width:100%;display:flex;flex-direction:column;gap:1rem}.main-controls{display:flex;justify-content:center;gap:1rem}.play-btn{width:60px;height:60px;border-radius:50%;background:var(--primary);color:#000;font-weight:700;font-size:1rem;box-shadow:0 0 15px var(--primary);transition:all .2s}.play-btn:active{transform:scale(.95);box-shadow:0 0 5px var(--primary)}.play-btn.playing{background:var(--accent);box-shadow:0 0 15px var(--accent)}.pitch-control-group{display:flex;flex-direction:column;gap:.5rem;background:#0000004d;padding:.5rem;border-radius:4px}.pitch-header{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-dim);font-weight:700}.bpm-display{cursor:pointer;font-family:monospace;font-size:.9rem}.pitch-slider-container{display:flex;align-items:center;gap:.5rem;color:var(--text-dim);font-size:.8rem}.pitch-slider{flex:1;height:4px;background:#333;border-radius:2px;appearance:none}.pitch-slider::-webkit-slider-thumb{appearance:none;width:12px;height:20px;background:var(--text-main);border-radius:2px;cursor:ns-resize}.file-input{display:none}.load-btn{padding:.5rem 1rem;background:#ffffff1a;border:1px solid var(--glass-border);color:var(--text-main);border-radius:4px;font-size:.8rem;text-align:center;transition:background .2s}.load-btn:hover{background:#fff3}.mixer-container{display:flex;flex-direction:column;align-items:center;background:var(--bg-panel);padding:1rem;border-radius:1rem;border:1px solid var(--glass-border);height:100%;min-width:200px;justify-content:space-between}.mixer-channels{display:flex;gap:2rem;height:100%}.channel-strip{display:flex;flex-direction:column;align-items:center;gap:1rem;height:100%}.eq-section{display:flex;flex-direction:column;gap:.5rem;align-items:center}.knob-container{display:flex;flex-direction:column;align-items:center;font-size:.7rem;color:var(--text-dim)}.knob{width:40px;height:40px;border-radius:50%;background:#222;border:2px solid #444;position:relative;margin-bottom:.2rem;cursor:ns-resize}.knob-indicator{width:2px;height:50%;background:var(--primary);position:absolute;left:50%;top:0;transform-origin:bottom center;transform:translate(-50%)}.fader-container{height:200px;display:flex;align-items:center;justify-content:center}.volume-fader{appearance:none;width:6px;height:100%;background:#111;border-radius:3px;outline:none;writing-mode:bt-lr;-webkit-appearance:slider-vertical}.crossfader-container{width:100%;padding:1rem 0;display:flex;flex-direction:column;align-items:center;border-top:1px solid var(--glass-border);margin-top:1rem}.crossfader{width:100%;appearance:none;height:6px;background:#111;border-radius:3px}.crossfader::-webkit-slider-thumb{appearance:none;width:40px;height:20px;background:var(--text-main);border-radius:2px;cursor:ew-resize;border:1px solid #000}.app-container{display:flex;flex-direction:column;height:100vh;background:radial-gradient(circle at center,#1a1a2e,#000)}.app-header{padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--glass-border);background:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.app-header h1{font-size:1.5rem;letter-spacing:2px;font-weight:900}.status-bar{font-size:.8rem;color:var(--primary);border:1px solid var(--primary);padding:.2rem .5rem;border-radius:4px}.dj-booth{flex:1;display:flex;justify-content:center;align-items:center;gap:2rem;padding:2rem;overflow:hidden}.app-footer{padding:.5rem;text-align:center;font-size:.7rem;color:var(--text-dim);border-top:1px solid var(--glass-border)}@media(max-width:1024px){.dj-booth{flex-direction:column;overflow-y:auto;gap:1rem}.mixer-container{width:100%;max-width:350px;height:auto;padding:1rem}.mixer-channels{height:300px}}