.controller{display:grid;grid-template-columns:minmax(300px,1fr) 280px minmax(300px,1fr);border:1px solid #383840;background:#0b0b0d;box-shadow:0 30px 80px #000}.controller .deck{padding:20px;background:linear-gradient(135deg,#151519,#0a0a0c);min-width:0}.controller .deck-A{grid-column:1;border-right:1px solid #383840}.controller .channel-mixer{grid-column:2}.controller .deck-B{grid-column:3;border-left:1px solid #383840}.controller .deck>header{margin-bottom:12px}.deck-display{background:#070708;border:1px solid #292930;padding:10px 12px;color:var(--acid);font:600 10px monospace}.deck-display>div{display:flex;justify-content:space-between;margin-top:6px;color:#7d7d85}.deck-display .track-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;color:var(--acid);font-size:12px}.deck-display time{float:right}.controller .waveform{height:82px;margin:10px 0}.drop-zone.drag-over{outline:2px solid var(--acid);box-shadow:0 0 25px #d8ff3544}.deck-body{display:grid;grid-template-columns:minmax(150px,1fr) 18px 42px;gap:15px;align-items:center;margin:12px 0}.jog-wrap{text-align:center}.jog-wrap small{font-size:7px;letter-spacing:.15em;color:#777}.jog{width:min(17vw,240px);aspect-ratio:1;margin:auto;border-radius:50%;padding:9px;background:repeating-conic-gradient(#4b4b51 0 2deg,#16161a 2deg 6deg);box-shadow:0 0 0 2px #060607,0 0 0 4px #3b3b43,0 14px 22px #000;cursor:grab;touch-action:none;user-select:none}.jog.scratching{cursor:grabbing;box-shadow:0 0 0 2px var(--acid),0 0 30px #d8ff3533}.jog-platter{height:100%;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,#17171b 0 28%,#09090b 29% 34%,#27272d 35% 37%,#101013 38% 69%,#28282e 70%);border:1px solid #555}.jog-platter span{font:800 12px/1 var(--display);text-align:center;color:#d9d9df}.jog-platter i{position:absolute;top:8%;width:5px;height:5px;border-radius:50%;background:var(--acid);box-shadow:0 0 8px var(--acid)}.deck.playing .jog-platter{animation:platter 1.8s linear infinite}.deck.scratching .jog-platter{animation:none}@keyframes platter{to{transform:rotate(360deg)}}.deck-meter,.master-meter{display:flex;flex-direction:column-reverse;gap:3px}.deck-meter i,.master-meter i{height:5px;background:#202026}.deck-meter i.on,.master-meter i.on{background:var(--acid);box-shadow:0 0 5px #d8ff35}.deck-meter i:nth-last-child(-n+3).on,.master-meter i:nth-last-child(-n+4).on{background:#ff5b60}.pitch{font-size:7px;letter-spacing:.1em;color:#85858d;text-align:center}.pitch input{appearance:slider-vertical;width:32px;height:150px;display:block;margin:5px auto;accent-color:var(--acid)}.pitch span{display:block}.controller .transport{grid-template-columns:1fr 74px 1fr}.controller .beatjump{margin-top:15px}.channel-mixer{padding:16px 14px;background:linear-gradient(#1b1b20,#0d0d10);display:flex;flex-direction:column}.channel-mixer>header{display:flex;justify-content:space-between;font:700 10px var(--display);color:var(--acid);border-bottom:1px solid #34343b;padding-bottom:12px}.master-meter{height:65px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(2,1fr);gap:3px;margin:14px 0}.master-meter i{height:auto}.channels{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1}.channel{text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px}.channel>b{font:700 9px var(--display)}.channel label{font-size:7px;color:#81818a;letter-spacing:.1em}.channel .knob{appearance:none;width:45px;height:45px;border-radius:50%;background:conic-gradient(var(--acid) calc(var(--v,.5)*270deg),#26262c 0);border:5px solid #111;display:block;margin:3px auto 0}.channel .knob::-webkit-slider-thumb{appearance:none;width:3px;height:18px;background:#fff}.channel-fader{margin-top:5px}.channel-fader input{appearance:slider-vertical;width:35px;height:105px;display:block}.cross-label{font-size:8px;letter-spacing:.12em;color:#888;text-align:center;margin-top:12px}.cross-label span{display:flex;justify-content:space-between;color:#fff}.cross-label input{display:block}.channel-mixer #stop-all{margin-top:10px;padding:8px}.track-library{margin-top:22px;border:1px solid #34343b;background:#0d0d10}.track-library>header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #34343b;font:700 11px var(--display)}.track-library header small{font:500 8px var(--font);color:#777;margin-left:15px}.track-library input{background:#17171b;border:1px solid #34343b;color:#fff;padding:9px 12px;font-size:9px}.track-list{max-height:280px;overflow:auto}.library-track{display:grid;grid-template-columns:40px 1fr 70px 70px 70px;align-items:center;gap:10px;padding:11px 20px;border-bottom:1px solid #242429;cursor:grab}.library-track:hover{background:#17171c}.library-track.dragging{opacity:.4}.library-track span,.library-track em{font-size:9px;color:#777}.library-track b{font-size:11px}.library-track button{border:1px solid #3a3a42;background:#17171b;color:#aaa;font-size:8px;padding:7px;cursor:pointer}.library-track button:hover{color:var(--acid);border-color:var(--acid)}
@media(max-width:1100px){.controller{grid-template-columns:minmax(260px,1fr) 220px minmax(260px,1fr)}.controller .deck{padding:14px}.jog{width:min(19vw,210px)}}
@media(max-width:800px){.controller{grid-template-columns:1fr 1fr}.controller .deck-A{grid-column:1;grid-row:1}.controller .deck-B{grid-column:2;grid-row:1}.controller .channel-mixer{grid-column:1/-1;grid-row:2}.channels{min-height:340px}.jog{width:35vw}.master-meter{height:45px}.track-library>header{align-items:flex-start;gap:12px;flex-direction:column}.library-track{grid-template-columns:30px 1fr 50px 60px 60px;padding-inline:10px}}
@media(max-width:560px){.controller{grid-template-columns:1fr}.controller .deck-A{grid-column:1;grid-row:1}.controller .channel-mixer{grid-column:1;grid-row:2}.controller .deck-B{grid-column:1;grid-row:3}.jog{width:62vw}.library-track{grid-template-columns:25px 1fr 50px}.library-track em{display:none}.library-track button{font-size:7px}.track-library header small{display:block;margin:7px 0 0}}
.waveform.seeking{cursor:ew-resize;outline:1px solid var(--acid)}.pitch-value{display:block;color:var(--acid);font:600 8px monospace;margin-top:4px}
.wave-row{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:5px;align-items:stretch}.wave-row .waveform{margin-right:0}.pitch-bend{display:grid;grid-template-rows:1fr 1fr;gap:4px;margin:5px 0 10px}.pitch-bend button{border:1px solid #383840;background:#17171b;color:var(--acid);font-weight:800;cursor:pointer;padding:0;touch-action:none}.pitch-bend button.active{background:var(--acid);color:#09090b}
body.file-dragging .drop-zone{outline:2px dashed var(--acid);outline-offset:-4px}body.file-dragging .drop-zone:after{content:'DROP MP3';position:absolute;inset:0;display:grid;place-items:center;background:#09090bdd;color:var(--acid);font:700 10px var(--display);letter-spacing:.12em;z-index:4}.jog.drop-zone:after{border-radius:50%}
.deck-display .deck-stats{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;align-items:center}.time-current{color:#fff;text-align:left}.time-total{text-align:center}.time-left{color:#fff;text-align:right}.wave-overview{height:32px;background:#08080a;border:1px solid #24242a;margin:-5px 33px 11px 0;position:relative;overflow:hidden}.wave-overview canvas{width:100%;height:100%;display:block}.library-track{grid-template-columns:40px 1fr 55px 60px 70px 70px}.track-duration{font:600 9px monospace;color:#aaa!important;text-align:right}
.wave-overview{cursor:pointer}.wave-overview:hover{border-color:#65656e}.wave-overview:active{border-color:var(--acid)}
@media(max-width:800px){.library-track{grid-template-columns:30px 1fr 45px 55px 60px 60px}}
@media(max-width:560px){.deck-display .deck-stats{grid-template-columns:1fr 1fr}.time-total,.time-left{text-align:left}.library-track{grid-template-columns:25px 1fr 48px 52px}.library-track em,.library-track .track-duration{display:block}.library-track button{display:none}}
.wave-tools{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:7px;letter-spacing:.12em;color:#777}.wave-tools div{display:flex;align-items:center;gap:4px}.wave-tools button{width:23px;height:20px;border:1px solid #35353c;background:#151519;color:var(--acid);cursor:pointer;padding:0}.wave-tools output{min-width:27px;text-align:center;color:#aaa}.controller .waveform{height:92px;margin:5px 0 10px;cursor:crosshair;touch-action:none}.controller .waveform canvas{display:block}.controller .waveform>i{pointer-events:none}.wave-loading{display:none;position:absolute;inset:0;place-items:center;background:#08080add;color:var(--acid);font:700 8px var(--display);letter-spacing:.12em}.waveform.loading .wave-loading{display:grid}