*{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark: #0d0d0d;--bg-deck: #1a1a1a;--bg-mixer: #141414;--accent-a: #ff6b35;--accent-b: #4ecdc4;--accent-sync: #ffe66d;--text: #ffffff;--text-dim: #888;--border: #333;--success: #22c55e;--waveform-a: #ff6b35;--waveform-b: #4ecdc4}body{font-family:Segoe UI,system-ui,sans-serif;background:var(--bg-dark);color:var(--text);min-height:100vh;line-height:1.4}.app{max-width:1400px;margin:0 auto;padding:1rem}header{text-align:center;padding:1.5rem 0}h1{font-size:2rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:linear-gradient(90deg,var(--accent-a),var(--accent-b));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{color:var(--text-dim);margin-top:.25rem}.decks{display:grid;grid-template-columns:1fr 280px 1fr;gap:1rem;margin-bottom:1.5rem}@media (max-width: 1000px){.decks{grid-template-columns:1fr}.mixer{order:-1}}.deck{background:var(--bg-deck);border-radius:12px;padding:1rem;border:1px solid var(--border)}#deckA{border-top:3px solid var(--accent-a)}#deckB{border-top:3px solid var(--accent-b)}.deck-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.deck-label{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}#deckA .deck-label{background:var(--accent-a)}#deckB .deck-label{background:var(--accent-b)}.track-name{font-size:.85rem;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.track-name.loaded{color:var(--text)}.drop-zone{border:2px dashed var(--border);border-radius:8px;padding:1.5rem;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:.75rem}.drop-zone:hover,.drop-zone.dragover{border-color:var(--text-dim);background:#ffffff05}.drop-zone.loaded{border-style:solid;padding:.75rem}#deckA .drop-zone.loaded{border-color:var(--accent-a)}#deckB .drop-zone.loaded{border-color:var(--accent-b)}.drop-icon{font-size:2rem;color:var(--text-dim);margin-bottom:.5rem}.drop-zone p{color:var(--text-dim);font-size:.85rem}.waveform{width:100%;height:60px;background:#111;border-radius:6px;margin-bottom:.75rem}.waveform-output{height:80px}.deck-controls{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:.75rem;align-items:center;margin-bottom:.75rem}@media (max-width: 500px){.deck-controls{grid-template-columns:1fr 1fr}}.bpm-display{text-align:center;padding:.5rem .75rem;background:#111;border-radius:6px}.bpm-value{display:block;font-size:1.5rem;font-weight:700;font-family:monospace}#deckA .bpm-value{color:var(--accent-a)}#deckB .bpm-value{color:var(--accent-b)}.bpm-label{font-size:.7rem;color:var(--text-dim);text-transform:uppercase}.transport{display:flex;gap:.5rem;justify-content:center}.btn-transport{width:40px;height:40px;border:none;border-radius:50%;background:#222;color:var(--text);cursor:pointer;font-size:1rem;transition:all .2s}.btn-transport:hover:not(:disabled){background:#333}.btn-transport:disabled{opacity:.4;cursor:not-allowed}.btn-transport.playing{background:var(--success)}.pitch-control,.tempo-control{display:flex;flex-direction:column;gap:.25rem}.pitch-control label,.tempo-control label{font-size:.7rem;color:var(--text-dim);text-transform:uppercase}.pitch-control input,.tempo-control input{width:100%;accent-color:var(--text)}.pitch-control span,.tempo-control span{font-size:.75rem;text-align:center;font-family:monospace}.cue-points{display:flex;align-items:center;gap:.5rem;font-size:.8rem}.cue-points label{color:var(--text-dim)}.cue-points input{width:60px;padding:.35rem;border:1px solid var(--border);border-radius:4px;background:#111;color:var(--text);font-size:.8rem}.mixer{background:var(--bg-mixer);border-radius:12px;padding:1rem;border:1px solid var(--border);display:flex;flex-direction:column;gap:1.25rem}.crossfader-section{text-align:center}.crossfader-section label{display:block;font-size:.75rem;color:var(--text-dim);text-transform:uppercase;margin-bottom:.5rem}.crossfader{width:100%;height:8px;-webkit-appearance:none;background:linear-gradient(90deg,var(--accent-a),var(--accent-b));border-radius:4px;outline:none}.crossfader::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:30px;background:#fff;border-radius:4px;cursor:pointer;box-shadow:0 2px 6px #0000004d}.crossfader-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-dim);margin-top:.25rem}.master-controls{display:flex;flex-direction:column;gap:1rem}.sync-section{text-align:center}.btn-sync{width:100%;padding:.75rem;border:2px solid var(--accent-sync);border-radius:8px;background:transparent;color:var(--accent-sync);font-weight:700;font-size:1rem;cursor:pointer;transition:all .2s}.btn-sync:hover:not(:disabled){background:var(--accent-sync);color:#000}.btn-sync:disabled{opacity:.4;cursor:not-allowed}.btn-sync.synced{background:var(--accent-sync);color:#000}.sync-info{font-size:.75rem;color:var(--text-dim);margin-top:.5rem}.blend-duration,.master-bpm{display:flex;flex-direction:column;gap:.35rem}.blend-duration label,.master-bpm label{font-size:.75rem;color:var(--text-dim);text-transform:uppercase}.blend-duration input[type=range]{width:100%;accent-color:var(--text)}.blend-duration span{text-align:center;font-family:monospace}.master-bpm input{width:100%;padding:.5rem;border:1px solid var(--border);border-radius:6px;background:#111;color:var(--text);font-size:1rem;text-align:center;font-weight:700}.action-buttons{display:flex;flex-direction:column;gap:.5rem}.btn-primary,.btn-success{padding:.75rem;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background:linear-gradient(135deg,var(--accent-a),var(--accent-b));color:#000}.btn-primary:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.btn-success{background:var(--success);color:#000}.btn-success:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.btn-primary:disabled,.btn-success:disabled{opacity:.4;cursor:not-allowed;transform:none}.progress-section{margin-top:.5rem}.progress-bar{height:6px;background:#222;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-a),var(--accent-b));width:0%;transition:width .3s}.progress-text{font-size:.75rem;color:var(--text-dim);text-align:center;margin-top:.35rem}.output-section{background:var(--bg-deck);border-radius:12px;padding:1.5rem;border:1px solid var(--border);border-top:3px solid var(--success);text-align:center}.output-section h2{font-size:1.25rem;margin-bottom:1rem;color:var(--success)}.output-section audio{width:100%;max-width:500px;margin:1rem 0}.output-actions{margin-top:1rem}.btn-download{padding:.75rem 2rem;border:none;border-radius:8px;background:var(--success);color:#000;font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s}.btn-download:hover{opacity:.9;transform:translateY(-1px)}footer{text-align:center;padding:1.5rem;color:var(--text-dim);font-size:.8rem}footer a{color:var(--accent-b);text-decoration:none}footer a:hover{text-decoration:underline}