.dj{--dj-h: clamp(440px, 60vh, 580px);position:fixed;left:0;right:0;bottom:var(--deck-h);z-index:8;height:var(--dj-h);display:grid;grid-template-rows:auto minmax(0,1fr);background:linear-gradient(180deg,#0f0f15f2,#08080cfa);backdrop-filter:blur(18px) saturate(1.2);border-top:1px solid var(--etch-strong);box-shadow:0 -18px 50px #0000008c;transition:opacity .3s var(--ease);color:var(--silk)}.dj:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;background:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}body.is-hidden .dj{opacity:0;pointer-events:none}body.is-dj-open .rack{display:none}body.is-dj .deck .seek,body.is-dj .deck .time,body.is-dj #btn-prev,body.is-dj #btn-next,body.is-dj #btn-loop{visibility:hidden}body.is-dj #btn-dj{color:var(--beam)}.dj-mini{font:600 9.5px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--silk);padding:6px 7px;border-radius:3px;background:#ffffff0d;border:1px solid rgba(255,255,255,.07);white-space:nowrap;transition:background .12s,color .12s,box-shadow .12s}.dj-mini:hover{background:#ffffff1c;color:#fff}.dj-toggle.is-active{color:#050507;background:var(--deck, var(--beam));border-color:transparent;box-shadow:0 0 10px var(--deck, rgba(var(--beam-rgb), .8))}.dj-exit:hover{background:#ff5c5c40;color:#fff}.dj-waves{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:8px 12px 6px;border-bottom:1px solid var(--etch)}.dj-wave-stack{display:grid;grid-template-rows:48px 10px 48px;gap:3px;min-width:0}.dj-wave{width:100%;height:100%;display:block;border-radius:3px}.dj-wave.is-a{box-shadow:inset 3px 0 #45c8ff}.dj-wave.is-b{box-shadow:inset 3px 0 #ffad45}.dj-phase{position:relative;height:10px;border-radius:5px;background:#ffffff0a}.dj-phase-mid{position:absolute;left:50%;top:1px;bottom:1px;width:2px;margin-left:-1px;background:#ffffff4d}.dj-phase-dot{position:absolute;top:1px;width:16px;height:8px;margin-left:-8px;border-radius:4px;background:#ffad45;box-shadow:0 0 8px #ffad45cc;transition:background .2s,box-shadow .2s}.dj-phase-dot.is-locked{background:#50ff8c;box-shadow:0 0 10px #50ff8ce6}.dj-wave-tools{display:flex;flex-direction:column;gap:4px;justify-content:center}.dj-wave-tools .dj-mini{min-width:46px;text-align:center}.dj-tools-gap{height:4px}.dj-body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,370px) minmax(0,1fr);min-height:0}.dj-deck{position:relative;display:grid;grid-template-rows:auto 28px minmax(0,1fr);gap:7px;padding:9px 12px 10px;min-width:0;min-height:0}.dj-deck:after{content:"";position:absolute;left:12px;right:12px;top:0;height:2px;background:var(--deck);opacity:0;transition:opacity .3s;box-shadow:0 0 12px var(--deck)}.dj-deck.is-on-air:after{opacity:.9}.dj-deck.is-empty .dj-main{opacity:.55}.dj-head{display:flex;align-items:center;gap:10px;min-width:0}.dj-letter{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:4px;font:400 15px/1 var(--font-display);color:var(--deck);border:1px solid color-mix(in srgb,var(--deck) 45%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--deck) 25%,transparent)}.dj-names{flex:1;min-width:0}.dj-title{font:600 14px/1.2 var(--font-body);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dj-artist{font:400 12px/1.2 var(--font-body);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dj-lamps{display:flex;gap:4px}.dj-lamp{width:8px;height:8px;border-radius:50%;background:#ffffff1a}.dj-lamp.is-lit{background:var(--deck);box-shadow:0 0 8px var(--deck)}.dj-lamp:first-child.is-lit{background:#fff;box-shadow:0 0 8px #fff}.dj-readout{text-align:right;min-width:66px}.dj-bpm{font:600 19px/1 var(--font-mono);color:#fff;letter-spacing:-.02em}.dj-tempo-text{font:400 10px/1.4 var(--font-mono);color:var(--dim)}.dj-bpm.is-unsure{color:var(--dim)}.dj-bpm.is-unsure:after{content:"?";margin-left:2px;color:#ffa233;font-size:14px}.dj-time{font:500 14px/1 var(--font-mono);color:var(--silk);min-width:76px;text-align:right;padding:4px 2px;border-radius:3px}.dj-time:hover{background:#ffffff0d}.dj-time.is-warn{color:#ff5c5c;animation:dj-blink .7s steps(2) infinite}@keyframes dj-blink{50%{opacity:.35}}.dj-overview{width:100%;height:100%;display:block;border-radius:3px;cursor:pointer;touch-action:none}.dj-main{display:flex;gap:14px;align-items:stretch;justify-content:center;min-height:0}.dj-tempo-col{flex:none;width:46px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:0}.dj-tempo-col .dj-mini{width:46px;text-align:center;padding:5px 0}.tf{flex:1;width:40px;min-height:60px;display:flex;justify-content:center;cursor:ns-resize;touch-action:none;padding:7px 0;border-radius:4px}.tf-slot{position:relative;width:6px;height:100%;background:#050507;border-radius:3px;box-shadow:inset 0 0 0 1px var(--etch-strong)}.tf-zero{position:absolute;left:-11px;right:-11px;top:50%;height:1px;background:#fff6}.tf-fill{position:absolute;left:0;right:0;border-radius:3px;background:var(--deck);opacity:.6;box-shadow:0 0 6px var(--deck)}.tf-cap{position:absolute;left:50%;width:32px;height:14px;margin:-7px 0 0 -16px;border-radius:3px;background:linear-gradient(180deg,#62636e,#24252b);border:1px solid #000;box-shadow:0 2px 6px #000000b3,inset 0 1px #ffffff2e}.tf-cap:after{content:"";position:absolute;left:3px;right:3px;top:6px;height:1px;background:#fff;opacity:.7}.tf.is-on .tf-cap{border-color:var(--deck)}.dj-jog-col{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;min-height:0}.jog{--jog: clamp(140px, calc(var(--dj-h) - 290px), 230px);position:relative;width:var(--jog);height:var(--jog);border-radius:50%;touch-action:none;cursor:grab;flex:none}.jog:active{cursor:grabbing}.jog-rim{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,#44454d,#17181c 25%,#44454d,#17181c 75%,#44454d);box-shadow:0 8px 22px #000000a6,inset 0 0 0 1px #ffffff1a}.jog-rim:after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.07) 0 1.5deg,transparent 1.5deg 5deg);-webkit-mask:radial-gradient(circle,transparent 0 79%,#000 80%);mask:radial-gradient(circle,transparent 0 79%,#000 80%)}.jog-platter{position:absolute;inset:11%;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),radial-gradient(circle,#1d1e24 0 30%,#0c0c10 31% 100%);box-shadow:0 0 0 2px color-mix(in srgb,var(--deck) 65%,transparent),0 0 18px color-mix(in srgb,var(--deck) 30%,transparent),inset 0 0 20px #000;transition:box-shadow .12s}.jog.is-touched .jog-platter{box-shadow:0 0 0 3px var(--deck),0 0 30px color-mix(in srgb,var(--deck) 60%,transparent),inset 0 0 20px #000}.jog-mark{position:absolute;left:50%;top:5%;width:4px;height:16%;margin-left:-2px;border-radius:2px;background:var(--deck);box-shadow:0 0 8px var(--deck)}.jog-center{position:absolute;inset:35%;border-radius:50%;display:grid;place-items:center;align-content:center;gap:3px;background:radial-gradient(circle at 50% 40%,#17171c,#060608);box-shadow:inset 0 0 0 1px var(--etch-strong);pointer-events:none}.jog-letter{font:400 15px/1 var(--font-display);color:var(--deck)}.jog-bpm{font:500 10px/1 var(--font-mono);color:var(--dim)}.dj-transport{display:flex;align-items:center;gap:10px}.dj-big{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;touch-action:none;font:700 11px/1 var(--font-mono);letter-spacing:.08em;color:var(--dim);background:radial-gradient(circle at 50% 35%,#2e2f37,#121317);border:2px solid #000;box-shadow:0 3px 8px #000000a6,inset 0 0 0 1px #ffffff12;transition:color .1s,box-shadow .1s,transform .05s}.dj-big.is-cue{color:#ffa233}.dj-big.is-cue.is-ready{box-shadow:0 3px 8px #000000a6,0 0 0 2px #ffa2338c,0 0 14px #ffa23359}.dj-big.is-play{color:#50ff8c}.dj-big.is-play.is-active{box-shadow:0 3px 8px #000000a6,0 0 0 2px #50ff8cbf,0 0 18px #50ff8c73}.dj-big.is-play.is-blink{box-shadow:0 3px 8px #000000a6,0 0 0 2px #50ff8c66}.dj-big.is-down{transform:translateY(1px);filter:brightness(1.35)}.dj-transport-small{display:flex;flex-direction:column;gap:4px}.dj-transport-small .dj-mini{width:50px;text-align:center}.dj-pad-col{flex:1;min-width:0;max-width:440px;display:flex;flex-direction:column;gap:6px;min-height:0}.dj-modes{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}.dj-mode{font:400 8.5px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:7px 2px;border-radius:3px;background:#ffffff08;white-space:nowrap;overflow:hidden}.dj-mode:hover{color:var(--silk)}.dj-mode.is-active{color:#fff;background:#ffffff17;box-shadow:inset 0 -2px 0 var(--deck)}.dj-pads{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;min-height:0}.dj-pad{--pad: #888;position:relative;min-height:34px;border-radius:6px;display:grid;place-items:center;touch-action:none;font:600 12px/1 var(--font-mono);color:var(--dim);background:linear-gradient(180deg,#27282f,#1a1b20);border:1px solid #000;box-shadow:inset 0 1px #ffffff12,inset 0 0 0 2px color-mix(in srgb,var(--pad) 22%,transparent),0 2px 4px #00000080;transition:background .08s,box-shadow .08s,color .08s,transform .05s}.dj-pad:hover{color:var(--silk)}.dj-pad.is-lit{color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--pad) 62%,#111),color-mix(in srgb,var(--pad) 34%,#0a0a0c));box-shadow:0 0 16px color-mix(in srgb,var(--pad) 55%,transparent),inset 0 1px #ffffff47}.dj-pad.is-down{transform:translateY(1px);filter:brightness(1.4)}.dj-pad-key{position:absolute;right:6px;bottom:4px;font:400 8px/1 var(--font-mono);opacity:.45}.dj-loop-row{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}.dj-loop-row .dj-mini{padding:6px 0;text-align:center}.dj-deck.is-b .dj-head{flex-direction:row-reverse}.dj-deck.is-b .dj-readout,.dj-deck.is-b .dj-time{text-align:left}.dj-deck.is-b .dj-names{text-align:right}.dj-mixer{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px;padding:8px 10px 10px;min-height:0;background:#00000047;border-left:1px solid var(--etch);border-right:1px solid var(--etch)}.dj-fx{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}.dj-fx .legend{font-size:8px;margin-right:2px}.dj-fx-step{display:flex;align-items:center;gap:3px}.dj-fx-step .dj-mini{padding:6px 5px}.dj-fx-beats{font:600 11px/1 var(--font-mono);min-width:30px;text-align:center;color:#fff}.dj .knob{width:50px;padding:0;gap:0}.dj .knob svg{width:34px;height:34px}.dj-ch .knob svg{width:29px;height:29px}.dj-ch .knob-value{margin-top:1px}.dj .knob-label{font-size:7.5px}.dj .knob-value{font-size:8.5px}.dj-fx .knob{width:44px}.dj-fx .knob svg{width:26px;height:26px}.dj-ch .knob-arc{stroke:var(--deck);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--deck) 80%,transparent))}.dj-chs{display:grid;grid-template-columns:1fr auto 1fr;gap:4px;min-height:0}.dj-ch{display:flex;align-items:stretch;justify-content:center;gap:2px;min-height:0}.dj-ch.is-b{flex-direction:row-reverse}.dj-ch-knobs{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:0}.dj-ch .fader{min-height:120px;width:40px;padding:6px 0 2px}.dj-ch .fader-slot{height:auto;flex:1;width:6px}.dj-ch .fader-fill{background:var(--deck);box-shadow:0 0 6px var(--deck)}.dj-ch .fader-cap{width:30px;height:12px;margin:0 0 -6px -15px}.dj-center{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:0;padding-top:4px}.dj-meters{flex:1;display:flex;gap:4px;min-height:0}.dj-meter{width:9px;height:100%;display:block}.dj-meter.is-master{width:6px;opacity:.85}.dj-xf-row{display:flex;align-items:center;gap:8px}.dj-xf-label{font:400 10px/1 var(--font-display);color:var(--dim)}.xf{flex:1;height:30px;display:flex;align-items:center;cursor:ew-resize;touch-action:none;padding:0 9px}.xf-slot{position:relative;width:100%;height:6px;border-radius:3px;background:#050507;box-shadow:inset 0 0 0 1px var(--etch-strong)}.xf-mid{position:absolute;left:50%;top:-7px;bottom:-7px;width:1px;background:#ffffff59}.xf-cap{position:absolute;top:50%;width:16px;height:26px;margin:-13px 0 0 -8px;border-radius:3px;background:linear-gradient(90deg,#62636e,#24252b);border:1px solid #000;box-shadow:0 2px 6px #000000b3,inset 1px 0 #ffffff2e}.xf-cap:after{content:"";position:absolute;top:3px;bottom:3px;left:7px;width:1px;background:#fff;opacity:.7}.row-decks{display:flex;gap:3px;flex:none}.row-deck{width:24px;height:24px;border-radius:3px;font:600 11px/1 var(--font-mono);color:var(--silk);background:#ffffff0f}.row-deck:first-child:hover{background:#45c8ff;color:#000}.row-deck:last-child:hover{background:#ffad45;color:#000}.help-card{max-height:90vh;overflow:auto}.help-sub{margin:18px 0 10px}@media(max-width:1150px){.dj{height:min(78vh,760px);overflow-y:auto;grid-template-rows:auto auto}.dj-body{grid-template-columns:1fr}.dj-mixer{border:0;border-top:1px solid var(--etch);border-bottom:1px solid var(--etch)}.dj-deck{min-height:330px}}