:root{--bg: #101215;--panel: #1b1f24;--panel-2: #15181c;--edge: #2a313a;--ink: #e8e6e0;--muted: #79818c;--amber: #ffab2e;--ice: #45d6e8}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:radial-gradient(1200px 500px at 50% -10%,#1a2027 0%,transparent 60%),var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;min-height:100%;padding:20px clamp(12px,3vw,40px) 32px}.label{font-family:Chakra Petch,sans-serif;letter-spacing:.12em;text-transform:uppercase}.mono{font-family:IBM Plex Mono,monospace;font-variant-numeric:tabular-nums}header{display:flex;align-items:baseline;gap:14px;max-width:1400px;margin:0 auto 18px}.wordmark{font-family:Chakra Petch,sans-serif;font-weight:700;font-size:22px;letter-spacing:.22em}.wordmark .a{color:var(--amber)}.wordmark .b{color:var(--ice)}.wordmark .slashes{color:#3a424d}.tagline{color:var(--muted);font-size:12px;letter-spacing:.08em}.mixer{--xf: .5;display:grid;grid-template-columns:1fr minmax(220px,300px) 1fr;gap:16px;max-width:1400px;margin:0 auto;align-items:stretch}@media (max-width: 980px){.mixer{grid-template-columns:1fr}.console{order:3}}.deck{position:relative;background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--edge);border-radius:10px;padding:14px 14px 18px;display:flex;flex-direction:column;gap:12px;overflow:hidden}.deck:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--deck-color);opacity:calc(.15 + var(--out, 0) * .85);box-shadow:0 0 18px 2px var(--deck-color);transition:opacity .12s linear;pointer-events:none}.deck-a{--deck-color: var(--amber)}.deck-b{--deck-color: var(--ice)}.deck-head{display:flex;align-items:center;justify-content:space-between}.deck-name{font-size:13px;font-weight:700;color:var(--deck-color)}.deck-status{font-size:11px;color:var(--muted);letter-spacing:.06em;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.screen{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;border:1px solid var(--edge);border-radius:6px;overflow:hidden}.screen iframe,.screen>div:not(.empty){position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}.screen .empty{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--muted);font-size:12px;letter-spacing:.1em}.load-row{display:flex;gap:8px}.search-area{position:relative}.search-area .results{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;max-height:min(420px,60vh);box-shadow:0 14px 30px #0009}.panel-head{position:sticky;top:-4px;z-index:1;margin:-4px -4px 2px;padding:6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between;background:#0c0e11;border-bottom:1px solid var(--edge)}.era-chips{display:flex;gap:3px;flex-wrap:wrap}.era-chips button{padding:3px 7px;font-size:10px;letter-spacing:.06em;color:var(--muted)}.era-chips button.on{color:#101215;background:var(--deck-color);border-color:var(--deck-color)}.panel-meta{display:flex;gap:8px;align-items:center;font-size:10px;color:var(--muted)}.link-btn{background:none;border:0;padding:0;font:inherit;font-size:10px;letter-spacing:.04em;text-transform:none;color:var(--deck-color);cursor:pointer;text-decoration:underline}.link-btn:hover{background:none}.search-yt{margin-top:4px;padding:9px;font-size:11px;text-transform:none;letter-spacing:.02em;font-family:inherit;font-weight:500;color:var(--deck-color);background:#15191e;border-style:dashed}.results{display:flex;flex-direction:column;gap:2px;max-height:264px;overflow-y:auto;background:#0c0e11;border:1px solid var(--edge);border-radius:6px;padding:4px}.result{display:flex;gap:10px;align-items:center;text-align:left;background:transparent;border:0;border-radius:4px;padding:6px;font-family:inherit;text-transform:none;letter-spacing:0;font-weight:400}.result:hover{background:#1d232b}.result img{width:72px;height:40px;object-fit:cover;border-radius:3px;flex:none}.r-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.r-title{font-size:12px;color:var(--ink);font-weight:500;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.r-sub{font-size:11px;color:var(--muted)}.load-row input[type=text]{flex:1;min-width:0;background:#0c0e11;border:1px solid var(--edge);border-radius:5px;color:var(--ink);font-size:13px;padding:9px 10px}.load-row input[type=text]::placeholder{color:#565e68}.load-row input[type=text]:focus{outline:2px solid var(--deck-color);outline-offset:-1px}button{font-family:Chakra Petch,sans-serif;letter-spacing:.1em;text-transform:uppercase;background:#262c34;color:var(--ink);border:1px solid var(--edge);border-radius:5px;padding:9px 14px;font-size:12px;font-weight:600;cursor:pointer}button:hover{background:#2e353f}button:focus-visible{outline:2px solid var(--deck-color, var(--ink));outline-offset:1px}button:disabled{opacity:.4;cursor:default}button.play-btn{min-width:92px;border-color:var(--deck-color);color:var(--deck-color)}button.play-btn.playing{background:var(--deck-color);color:#101215}button.result:hover{background:#1d232b}.time-row{display:flex;align-items:center;gap:10px}.time{font-size:15px;color:var(--deck-color);min-width:5.5ch}.dur{font-size:12px;color:var(--muted)}.seek-wrap{position:relative;flex:1;display:flex}.seek{flex:1}.cue-mark{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1.5px;left:calc(7px + (100% - 14px) * var(--at));background:var(--deck-color);border-radius:2px;pointer-events:none;box-shadow:0 0 6px var(--deck-color)}.cue-group{display:flex}.cue-group .cue-btn{border-radius:0;border-left-width:0;border-right-width:0}.cue-group .nudge{padding:9px;font-size:15px;line-height:1;letter-spacing:0}.cue-group .nudge:first-child{border-radius:5px 0 0 5px}.cue-group .nudge:last-child{border-radius:0 5px 5px 0}.cue-btn .mono{font-size:11px;letter-spacing:0;opacity:.8;margin-left:4px}.transport button{transition:background .12s,color .12s}.transport button.flash{background:var(--deck-color);color:#101215;border-color:var(--deck-color)}.deck-body{display:grid;gap:14px;align-items:center;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main main" "tt faders"}.deck-main{grid-area:main;min-width:0;display:flex;flex-direction:column;gap:12px}.deck-body .turntable{grid-area:tt;justify-self:center}.deck-body .fader-bank{grid-area:faders}.turntable{position:relative;width:min(100%,270px);aspect-ratio:1;padding:6px;border-radius:12px;background:linear-gradient(145deg,#23282f,#14171b);border:1px solid var(--edge);box-shadow:inset 0 1px #2f363f}.platter{position:relative;width:88%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#0a0b0d 66%,#3c444e,#59626e 70%,#2a3038 73%,#1a1d22);box-shadow:0 6px 16px #0009;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.platter:active{cursor:grabbing}.platter.disabled{cursor:default}.platter:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(#8c95a0 0 1.5deg,transparent 1.5deg 7.5deg);-webkit-mask:radial-gradient(circle,transparent 94%,#000 95%,#000 98%,transparent 99%);mask:radial-gradient(circle,transparent 94%,#000 95%,#000 98%,transparent 99%);opacity:.55}.platter:after{content:"";position:absolute;top:5%;right:5%;bottom:5%;left:5%;border-radius:50%;pointer-events:none;background:conic-gradient(from 30deg,transparent 0 8%,rgba(255,255,255,.09) 12%,transparent 18% 50%,rgba(255,255,255,.07) 62%,transparent 68%)}.disc{position:absolute;top:5%;right:5%;bottom:5%;left:5%;border-radius:50%;background:radial-gradient(circle,transparent 30%,rgba(0,0,0,.5) 31%,transparent 33%),repeating-radial-gradient(circle,#111316 0,#111316 1px,#1a1d21 1px,#1a1d21 2.5px);will-change:transform}.record-label{position:absolute;top:33%;right:33%;bottom:33%;left:33%;border-radius:50%;background:var(--deck-color) center / 180% no-repeat;border:2px solid var(--deck-color)}.disc:after{content:"";position:absolute;top:33%;left:50%;width:3px;height:10%;margin-left:-1.5px;border-radius:2px;background:#f4f1ea;box-shadow:0 0 6px #fff9}.spindle{position:absolute;top:50%;left:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f2f2f2,#7c8590);box-shadow:0 1px 3px #000c}.tonearm{position:absolute;top:10%;right:7%;width:5px;height:58%;border-radius:3px;background:linear-gradient(90deg,#9aa3ad,#d7dce1,#8a929c);transform-origin:50% 0;transform:rotate(8deg);transition:transform .6s ease;pointer-events:none;box-shadow:2px 3px 6px #00000080}.turntable.spinning .tonearm{transform:rotate(24deg)}.tonearm:before{content:"";position:absolute;top:-9px;left:-7px;width:19px;height:19px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c9ced4,#4b535d)}.tonearm:after{content:"";position:absolute;bottom:-12px;left:-4px;width:12px;height:16px;border-radius:2px;background:#2b3139;border:1px solid #59626e}.transport{display:flex;gap:8px;flex-wrap:wrap}.fader-bank{display:flex;gap:6px;padding-top:4px}.vfader{display:flex;flex-direction:column;align-items:center;gap:6px;width:58px}.vfader .well{position:relative;width:58px;height:172px}.vfader .well input[type=range]{position:absolute;top:50%;left:50%;width:172px;height:58px;transform:translate(-50%,-50%) rotate(-90deg)}.vfader .cap{font-size:10px;color:var(--muted)}.vfader .val{font-size:11px;color:var(--ink)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:4px;background:#0b0d10;border:1px solid var(--edge);border-radius:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:30px;margin-top:-14px;background:linear-gradient(180deg,#3a424d,#22272e);border:1px solid #454e5a;border-radius:3px;box-shadow:inset 0 1px #4d5764,0 2px 6px #0009}input[type=range]::-moz-range-track{height:4px;background:#0b0d10;border:1px solid var(--edge);border-radius:2px}input[type=range]::-moz-range-thumb{width:14px;height:30px;background:linear-gradient(180deg,#3a424d,#22272e);border:1px solid #454e5a;border-radius:3px}input[type=range]:focus-visible{outline:2px solid var(--deck-color, var(--ink));outline-offset:4px}.console{background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--edge);border-radius:10px;padding:18px 16px;display:flex;flex-direction:column;align-items:center;gap:16px}.xf-block{width:100%;display:flex;flex-direction:column;gap:10px;align-items:center}.xf-title{font-size:11px;color:var(--muted)}.xf-rail{position:relative;width:100%;padding:18px 10px;background:#0c0e11;border:1px solid var(--edge);border-radius:8px}.xf-rail:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:8px;pointer-events:none;background:linear-gradient(90deg,var(--amber),var(--ice));-webkit-mask:linear-gradient(90deg,rgba(0,0,0,calc(1 - var(--xf))) 0%,rgba(0,0,0,.15) 50%,rgba(0,0,0,var(--xf)) 100%);mask:linear-gradient(90deg,rgba(0,0,0,calc(1 - var(--xf))) 0%,rgba(0,0,0,.15) 50%,rgba(0,0,0,var(--xf)) 100%);opacity:.55}.xf-rail input[type=range]{width:100%;display:block;position:relative}.xf-ends{display:flex;justify-content:space-between;width:100%;padding:0 4px}.xf-ends .end{font-size:14px;font-weight:700}.xf-ends .end.a{color:var(--amber);opacity:calc(.35 + (1 - var(--xf)) * .65)}.xf-ends .end.b{color:var(--ice);opacity:calc(.35 + var(--xf) * .65)}.xf-readout{font-size:12px;color:var(--muted)}.fx-block{width:100%;display:flex;flex-direction:column;gap:8px}.scratch-btn{padding:14px;font-size:14px;letter-spacing:.2em;background:#0c0e11;border-color:#3a424d}.scratch-btn:active{transform:scale(.97);background:#22272e}.fade-len{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.fade-len button{padding:7px 0;font-size:11px;color:var(--muted)}.fade-len button.on{color:var(--ink);border-color:var(--muted);background:#2e353f}.mix-btn{padding:12px;font-size:13px}.mix-btn.to-a{--deck-color: var(--amber)}.mix-btn.to-b{--deck-color: var(--ice)}.mix-btn{border-color:var(--deck-color);color:var(--deck-color)}.mix-btn.fading{background:var(--deck-color);color:#101215}.pads{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pads button{position:relative;padding:11px 0 9px;font-size:10px;letter-spacing:.08em}.pads button kbd{position:absolute;top:2px;right:3px;font-size:8px;padding:0 3px;opacity:.6}.pads button:active{transform:scale(.97)}.pads button.on{background:#e8e6e0;color:#101215;border-color:#e8e6e0;box-shadow:0 0 14px #e8e6e059}.kill-btn{padding:12px;font-size:13px;letter-spacing:.2em;border-color:#e5484d;color:#ff6b6f;background:#1f1416}.kill-btn:hover{background:#2a181b}.kill-btn.on{background:#e5484d;color:#fff;letter-spacing:.06em;animation:kill-pulse .9s ease-in-out infinite alternate}@keyframes kill-pulse{to{box-shadow:0 0 22px 2px #e5484d99}}.upnext{width:100%;display:flex;flex-direction:column;gap:8px}.upnext-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}.autodj{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink)}.autodj input{accent-color:var(--ice)}.upnext-empty{font-size:11px;color:#565e68;padding:10px 0;text-align:center}.upnext-list{list-style:none;display:flex;flex-direction:column;gap:2px;max-height:168px;overflow-y:auto;background:#0c0e11;border:1px solid var(--edge);border-radius:6px;padding:4px}.upnext-list li{display:flex;align-items:center;gap:8px;padding:3px;border-radius:4px}.upnext-list li:first-child{background:#1a1f26}.upnext-list img{width:40px;height:23px;object-fit:cover;border-radius:2px;flex:none}.q-title{flex:1;min-width:0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-btn{padding:2px 7px;font-size:12px;letter-spacing:0;background:transparent;border-color:transparent;color:var(--muted)}.q-btn:hover{color:var(--ink)}.q-deck{padding:2px 5px;font-size:10px;font-weight:700;border-color:var(--edge)}.q-deck.a{color:var(--amber)}.q-deck.b{color:var(--ice)}.upnext-list li[draggable]{cursor:grab}.upnext-list li[draggable]:active{cursor:grabbing}body.dragging-track .screen iframe{pointer-events:none}.deck.drop-target{outline:2px dashed var(--deck-color);outline-offset:-4px}.deck.drop-target:after{content:"Drop to load";position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;pointer-events:none;display:grid;place-items:center;font-family:Chakra Petch,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--deck-color);background:#10121599}.next-badge{margin-left:8px;padding:2px 6px;border-radius:3px;font-size:9px;letter-spacing:.1em;color:#101215;background:var(--deck-color)}.result-row{display:flex;align-items:center;gap:4px}.result-row .result{flex:1;min-width:0}.queue-add{flex:none;padding:6px 11px;font-size:16px;letter-spacing:0;color:var(--deck-color)}.hints{color:#565e68;font-size:11px;line-height:1.9;text-align:center}.hints b{color:var(--muted);font-weight:500}kbd{font-family:IBM Plex Mono,monospace;font-size:10px;border:1px solid var(--edge);border-bottom-width:2px;border-radius:3px;padding:1px 5px;color:var(--ink);background:#22272e}@media (pointer: coarse){input[type=range]::-webkit-slider-thumb{width:22px;height:44px;margin-top:-21px}input[type=range]::-moz-range-thumb{width:22px;height:44px}.seek{margin-block:20px}.autodj input{width:20px;height:20px}}@media (hover: none){.hints{display:none}}@media (max-width: 600px){body{padding:12px 10px 24px}header{margin-bottom:10px;gap:10px}.wordmark{font-size:18px}.tagline{display:none}.mixer{gap:10px}.deck{display:grid;gap:10px;padding:10px 10px 14px;grid-template-columns:min(136px,36%) minmax(0,1fr);grid-template-areas:"head head" "screen load" "results results" "body body";align-items:center}.deck-head{grid-area:head}.screen{grid-area:screen}.screen .empty{font-size:9px;text-align:center;padding:4px}.load-row{grid-area:load}.load-row input[type=text]{font-size:16px;padding:12px 10px}.results{grid-area:results}.result{padding:10px 6px}.queue-add{padding:12px 16px}.deck-body{grid-area:body;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tt tt" "main faders";gap:12px}.turntable{width:min(100%,340px)}.deck-main{align-self:stretch;justify-content:space-between}.time-row{flex-wrap:wrap;gap:4px 8px}.time-row .seek{order:3;flex-basis:100%}.transport{display:grid;grid-template-columns:1fr;gap:8px}.transport button{min-height:52px;font-size:14px}.console{padding:14px 10px;gap:14px}.scratch-btn{padding:18px;font-size:16px}.fade-len button{min-height:44px;font-size:13px}.mix-btn,.kill-btn{min-height:56px;font-size:15px}.pads button{min-height:56px;font-size:13px}.xf-rail{padding:14px 10px}.xf-ends .end{font-size:18px}.q-btn{padding:8px 12px;font-size:16px}}@media (prefers-reduced-motion: reduce){*{transition:none!important}}