:root{--plastic: #d6d3cc;--plastic-hi: #e3e1db;--plastic-lo: #c6c3bb;--inset: #bebbb2;--ink: #23221d;--ink-soft: #55534b;--deck-a: #e8501f;--deck-b: #2a55d8;--vinyl: #17150f;--ready: #2f9e4f;--loading: #d99b23;--amber: #f5b53f;--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;--sans: system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{background:#8f8c84;font-family:var(--sans);color:var(--ink);overflow:hidden;display:grid;place-items:center}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button:focus-visible{outline:3px solid var(--deck-b);outline-offset:2px}#stage{width:1180px;height:820px;transform-origin:center center;background:var(--plastic);border-radius:34px;box-shadow:inset 0 2px 0 var(--plastic-hi),inset 0 -3px #aaa79e,0 24px 60px #14120c73;display:grid;grid-template-rows:64px 1fr 148px;padding:18px 26px 22px;gap:10px;position:relative;user-select:none;touch-action:none}.rail{display:flex;align-items:center;gap:18px;border-bottom:2px solid var(--inset);padding-bottom:10px}.brand{display:flex;align-items:baseline;gap:10px}.brand .name{font:800 26px/1 var(--sans);letter-spacing:-.03em}.brand .model{font:500 11px var(--mono);letter-spacing:.18em;color:var(--ink-soft);text-transform:uppercase}.rail .readout{font:500 12px var(--mono);letter-spacing:.08em;background:var(--vinyl);color:#e8e4d8;border-radius:6px;padding:6px 12px;font-variant-numeric:tabular-nums}.rail .readout b{color:var(--amber);font-weight:600}.rail .spacer{flex:1}.main{display:grid;grid-template-columns:1fr 158px 1fr;gap:14px;min-height:0}.deck{background:var(--plastic-lo);border-radius:22px;box-shadow:inset 0 2px 6px #23221d2e,inset 0 -1px 0 var(--plastic-hi);display:grid;grid-template-rows:58px 1fr auto;padding:12px 16px 14px;gap:6px;position:relative}.deck.armed-target{outline:4px dashed var(--ink-soft);outline-offset:-4px;cursor:pointer}.deck-head{display:flex;align-items:center;gap:12px}.deck-letter{font:800 34px/1 var(--sans);letter-spacing:-.02em;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff}.deck[data-deck=a] .deck-letter{background:var(--deck-a)}.deck[data-deck=b] .deck-letter{background:var(--deck-b)}.deck-track{min-width:0}.deck-track .t{font:700 16px/1.2 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.deck-track .a{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}.deck-time{margin-left:auto;text-align:right;font:600 13px var(--mono);font-variant-numeric:tabular-nums}.deck-time small{display:block;font:500 9px var(--mono);letter-spacing:.14em;color:var(--ink-soft)}.deck-bed{display:grid;grid-template-columns:1fr 64px;gap:8px;min-height:0;align-items:center}.deck[data-deck=b] .deck-bed{grid-template-columns:64px 1fr}.deck[data-deck=b] .platter-wrap{order:2}.deck[data-deck=b] .fader-col{order:1}.platter-wrap{display:grid;place-items:center;min-height:0}.platter{width:380px;height:380px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#201d16 0px 2px,#14120c 2px 4px);box-shadow:0 4px 14px #14120c80,inset 0 0 0 6px #0e0c08;position:relative;cursor:grab;touch-action:none}.platter:active{cursor:grabbing}.platter .face{position:absolute;inset:0;border-radius:50%;will-change:transform}.platter .label{position:absolute;inset:50%;width:148px;height:148px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;text-align:center;color:#fff;padding:20px}.deck[data-deck=a] .label{background:var(--deck-a)}.deck[data-deck=b] .label{background:var(--deck-b)}.platter .label .lt{font:700 14px/1.15 var(--sans);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.platter .label .rpm{font:500 8.5px var(--mono);letter-spacing:.2em;margin-top:6px;opacity:.75}.platter .spindle{position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);background:#d9d6cd;border-radius:50%;box-shadow:0 1px 2px #0009;z-index:2}.platter .marker{position:absolute;left:50%;top:7px;width:4px;height:26px;transform:translate(-50%);background:#f5f2e8;border-radius:2px}.fader-col{display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:8px;height:88%}.fader-col .flabel{font:600 9px var(--mono);letter-spacing:.16em;color:var(--ink-soft)}.fader-col .fval{font:600 12px var(--mono);font-variant-numeric:tabular-nums;background:var(--vinyl);color:#7fe08f;padding:4px 7px;border-radius:5px}.fslot{width:14px;border-radius:7px;position:relative;height:100%;background:var(--inset);box-shadow:inset 0 2px 5px #23221d66;touch-action:none;cursor:grab}.fslot:after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:2px;background:var(--ink-soft);opacity:.6}.fcap{position:absolute;left:50%;transform:translate(-50%,-50%);width:44px;height:26px;border-radius:6px;background:linear-gradient(180deg,#3d3b34 0 45%,#23221d 45% 55%,#3d3b34 55% 100%);box-shadow:0 3px 6px #14120c80;top:50%}.deck-controls{display:flex;gap:8px;align-items:center}.ctl{flex:1;height:48px;border-radius:12px;display:grid;place-items:center;gap:2px;background:var(--plastic-hi);box-shadow:inset 0 -3px #a7a49b,inset 0 2px #f2f0ea,0 2px 4px #14120c38;font:700 10.5px var(--mono);letter-spacing:.1em;touch-action:manipulation}.ctl:active,.ctl[aria-pressed=true]{box-shadow:inset 0 3px 5px #14120c59}.ctl .led{width:24px;height:6px;border-radius:3px;background:#8b887e}.ctl.cue.set .led,.ctl.flash .led{background:var(--amber);box-shadow:0 0 8px var(--amber)}.ctl.kill[aria-pressed=true] .led{background:#d24a3a;box-shadow:0 0 8px #d24a3a}.ctl-div{flex:0 0 2px;height:34px;background:var(--inset);border-radius:1px}.spine{display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;justify-items:center;align-content:start;padding-top:6px}.playbtn{width:128px;height:84px;border-radius:16px;display:grid;place-items:center;gap:2px;background:var(--plastic-hi);box-shadow:inset 0 -4px #a7a49b,inset 0 2px #f2f0ea,0 2px 5px #14120c40;font:700 13px var(--mono);letter-spacing:.12em}.playbtn:active,.playbtn[aria-pressed=true]{box-shadow:inset 0 3px 6px #14120c59}.playbtn .led{width:34px;height:8px;border-radius:4px;background:#8b887e}.playbtn[aria-pressed=true][data-for=a] .led{background:var(--deck-a);box-shadow:0 0 10px var(--deck-a)}.playbtn[aria-pressed=true][data-for=b] .led{background:var(--deck-b);box-shadow:0 0 10px var(--deck-b)}.dotgrid{align-self:stretch;justify-self:stretch;margin:8px 20px;background-image:radial-gradient(circle,#b3b0a7 1.6px,transparent 1.6px);background-size:14px 14px;background-position:center}.xfade{justify-self:stretch;align-self:end;display:grid;gap:15px;padding:0 4px}.xfade .xlabels{display:flex;justify-content:space-between;align-items:center;font:700 12px var(--mono)}.xfade .xlabels .xa{color:var(--deck-a)}.xfade .xlabels .xb{color:var(--deck-b)}.xfade .xlabels .xmid{font:500 9px var(--mono);letter-spacing:.18em;color:var(--ink-soft)}.xslot{height:16px;border-radius:8px;position:relative;background:var(--inset);box-shadow:inset 0 2px 5px #23221d66;touch-action:none;cursor:grab}.xslot:after{content:"";position:absolute;top:-6px;bottom:-6px;left:50%;width:2px;background:var(--ink-soft);opacity:.6}.xcap{position:absolute;top:50%;transform:translate(-50%,-50%);width:30px;height:40px;border-radius:7px;background:linear-gradient(90deg,#3d3b34 0 42%,#d9d6cd 42% 58%,#3d3b34 58% 100%);box-shadow:0 3px 6px #14120c80;left:50%;z-index:1}.xmeters{display:flex;justify-content:space-between;font:500 9px var(--mono);color:var(--ink-soft);letter-spacing:.1em}.xmeters .bar{display:inline-block;width:52px;height:6px;border-radius:3px;background:var(--inset);position:relative;overflow:hidden;vertical-align:middle}.xmeters .bar i{position:absolute;inset:0;transform-origin:left}.xmeters .bar.a i{background:var(--deck-a)}.xmeters .bar.b i{background:var(--deck-b);transform-origin:right}.crate{background:var(--vinyl);border-radius:18px;padding:12px 16px;display:grid;grid-template-rows:auto 1fr;gap:8px;color:#d9d5c8}.crate-head{display:flex;align-items:center;gap:12px}.crate-head .cl,.sheet-head .cl{font:600 11px var(--mono);letter-spacing:.2em;color:#8b8779}.crate-head .hint{font:500 11px var(--mono);color:var(--amber);letter-spacing:.06em}.crate-head .browse,.sheet-head .browse{margin-left:auto;font:600 11px var(--mono);letter-spacing:.12em;color:var(--vinyl);background:#d9d5c8;padding:7px 14px;border-radius:8px}.chips{display:flex;gap:10px;overflow-x:auto;align-items:stretch;padding-bottom:2px}.chip{flex:0 0 auto;width:210px;display:grid;grid-template-columns:40px 1fr;gap:4px 10px;align-items:center;background:#26231b;border-radius:12px;padding:9px 12px;text-align:left;border:2px solid transparent}.chip:hover{background:#2e2a21}.chip[aria-pressed=true]{border-color:var(--amber);background:#322d22}.chip .art{grid-row:span 2;width:40px;height:40px;border-radius:8px;display:grid;place-items:center;font:700 15px var(--sans);color:#fff;background-size:cover;background-position:center}.chip .ct{font:650 12.5px/1.2 var(--sans);color:#ece8db;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip .cm{font:500 9.5px var(--mono);letter-spacing:.06em;color:#8b8779;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}.chip .st{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:#6a675c}.chip .st.ready{background:var(--ready);box-shadow:0 0 6px var(--ready)}.chip .st.loading{background:var(--loading)}.chip .st.error{background:#d24a3a}.sheet-backdrop{position:fixed;inset:0;z-index:50;background:#14120c8c;display:grid;place-items:center}.sheet-backdrop[hidden]{display:none}.sheet{width:min(720px,92vw);max-height:80vh;background:var(--vinyl);color:#d9d5c8;border-radius:18px;padding:16px;display:grid;grid-template-rows:auto 1fr;gap:10px;box-shadow:0 20px 50px #14120c99}.sheet-head{display:flex;align-items:center;gap:12px}.sheet-list{overflow-y:auto;display:grid;gap:6px}.sheet-item{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;background:#26231b;border-radius:10px;padding:8px 12px;text-align:left}.sheet-item:hover{background:#2e2a21}.sheet-item .art{width:36px;height:36px;border-radius:7px;display:grid;place-items:center;font:700 14px var(--sans);color:#fff;background-size:cover;background-position:center}.sheet-item .si-t{font:650 13px/1.2 var(--sans);color:#ece8db}.sheet-item .si-a{font:500 10px var(--mono);letter-spacing:.08em;color:#8b8779;margin-top:2px}.sheet-item .si-m{font:500 10px var(--mono);color:#8b8779}@media(prefers-reduced-motion:reduce){.platter .face{transition:none}}