/* ---------- the DJ booth: a slide to the left of the TV ---------- */
#dj-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1300px;
  height: 900px;
  margin: -450px 0 0 -650px;
  transform-origin: center center;
  translate: var(--room-dj, -105vw) 0;
  transition: translate .9s cubic-bezier(.65, 0, .25, 1), content-visibility .9s allow-discrete;
  z-index: 1;
  font-family: 'Archivo Narrow', sans-serif;
  color: #ddd;
  --dark: 0;
  --night: 4 6 12; /* the booth keeps its cool club dark */
  /* the booth's one key light: high up behind the middle of the booth, so the gear's shadows fall
     straight toward you */
  --kx: 0;
  --ky: 1;
  user-select: none;
}
#dj-stage button { font-family: inherit; }
body:not([data-view="dj"]) #dj-stage { content-visibility: hidden; }
/* the booth stays in its own room: rooms sit 105vw apart, and the counter runs on past the booth's
   box (-400 to 1700), so in a narrow window its end would show in the TV room */
#dj-stage { clip-path: inset(calc(-60vh / var(--s, 1)) calc(650px - 52.5vw / var(--s, 1))); }

/* The room going dark (rooms.js): everything that gives off light sits above this layer. */
#dj-stage > .room-dark { z-index: 30; }
#dj-stage .glow { z-index: 60; }
#dj-stage .glow:not(.on), #dj-stage .glow.blink:not(.on) { filter: brightness(calc(1 - var(--dark) * .95)); }
#dj-stage .screen { position: relative; z-index: 60; }

/* ---------- behind the unit: the monitors on their shelf ---------- */
/* The shelf runs the length of the booth behind the counter: its top (y 322-332) with the monitors
   standing on it, and its front face (332-338) down to the counter. Dark-stained teak like the
   counter, the grain along it: a lit front arris, the monitors' feet's shade where they stand, and
   the shade toward the wall. */
.dj-riser {
  position: absolute;
  left: -400px;
  top: 322px;
  width: 2100px;
  height: 16px;
  background:
    linear-gradient(transparent 10px, rgb(255 228 200 / .1) 10px 11px, rgb(0 0 0 / .45) 11px),
    radial-gradient(ellipse 58px 4px at 582px 8px, rgb(0 0 0 / .7), transparent),
    radial-gradient(ellipse 58px 4px at 1518px 8px, rgb(0 0 0 / .7), transparent),
    linear-gradient(rgb(0 0 0 / .5), transparent 6px),
    repeating-linear-gradient(.4deg, transparent 0, rgb(255 220 180 / .04) 1.5px, transparent 3px 11px),
    repeating-linear-gradient(-.3deg, transparent 0, rgb(0 0 0 / .12) 2px, transparent 4px 23px),
    linear-gradient(#33281e, #2a2119);
}
.dj-monitor {
  position: absolute;
  top: 72px;
  width: 316px;
  height: 248px;
  padding: 10px;
  border-radius: 10px;
  /* moulded plastic, and the room's light caught across the top-left of the bezel */
  background: linear-gradient(160deg, rgba(255,255,255,.07), transparent 35%), linear-gradient(160deg, #3a3a3e, #19191c 60%, #232327);
  box-shadow: 0 10px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px #000;
}
/* either side of the unit's screen, the same distance out from the middle (650) */
.mon-A { left: 24px; }
.mon-B { left: 960px; }
.mon-screen { width: 296px; height: 212px; border-radius: 4px; overflow: hidden; background: #07090d; box-shadow: inset 0 0 0 2px #000, 0 0 calc(var(--dark) * 3px) rgb(120 150 200 / calc(var(--dark) * .06)); }
.mon-art { position: absolute; inset: -10px; background: center / cover; filter: blur(6px) brightness(.45) saturate(1.3); }
.mon-vis { position: absolute; inset: 0; width: 100%; height: 100%; }
.mon-yt { position: absolute; inset: 0; display: none; background: #000; }
.mon-yt.on { display: block; }
.mon-yt iframe { width: 296px; height: 212px; border: 0; display: block; } /* as loadYouTube's player */
.mon-lbl { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 7px; font: 15px 'VT323', monospace; letter-spacing: 1px; color: #e9f4ff; text-shadow: 0 0 6px rgba(120,190,255,.8); background: linear-gradient(transparent, rgba(0,0,0,.75)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.mon-yt.on ~ .mon-lbl, .idle .mon-lbl { display: none; }
/* NO SIGNAL: the monitor's own on-screen box, drawn by its electronics on the panel's black, so
   crisp (no bloom). dj.js steps it round four spots near the middle every few seconds (data-p). */
.mon-osd { display: none; position: absolute; left: 88px; top: 89px; width: 120px; height: 34px; border: 1px solid rgb(120 150 220 / .4); border-radius: 4px; background: rgb(20 30 55 / .85); font: 20px/32px 'VT323', monospace; letter-spacing: 2px; text-align: center; color: #cfe0ff; text-shadow: 0 0 2px rgb(150 185 255 / .6); white-space: nowrap; pointer-events: none; }
.idle .mon-osd { display: block; }
.mon-osd[data-p="1"] { left: 136px; top: 52px; }
.mon-osd[data-p="2"] { left: 124px; top: 128px; }
.mon-osd[data-p="3"] { left: 40px; top: 118px; }
.mon-badge { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 700 9px 'Archivo Narrow', sans-serif; letter-spacing: 2px; color: #777; }
/* the power LED, bottom right of the bezel: amber in standby (no signal), soft white with a
   picture. It gives off its own light, so it sits above the room's dark and never dims. */
.mon-led { position: absolute; right: 22px; bottom: 7px; width: 4px; height: 4px; border-radius: 50%; background: #ffd9a0; box-shadow: inset 0 0 0 .75px #ffb040, 0 0 3px rgb(255 176 64 / .85); }
.dj-monitor:not(.idle) .mon-led { background: #fff; box-shadow: inset 0 0 0 .75px #dfe6ff, 0 0 3px rgb(225 232 255 / .6); }
/* the foot stands on the shelf (z 1 lifts it over the shelf's top, still under the room's dark),
   with its contact shadow on the wood */
.mon-foot { position: absolute; left: 50%; bottom: -10px; width: 80px; height: 10px; margin-left: -40px; z-index: 1; background: linear-gradient(90deg, rgb(255 255 255 / .05), transparent 30% 70%, rgb(255 255 255 / .04)), linear-gradient(#2a2a2e, #0e0e10); border-radius: 0 0 4px 4px; box-shadow: 0 2px 3px rgba(0,0,0,.8), 0 1px 0 rgba(0,0,0,.9); }

/* ---------- the unit's screen: both decks' waveforms and the library ---------- */
.lap-screen { height: 100%; border-radius: 3px; overflow: hidden; background: #0a0c11; color: #cfd6e0; font: 11px/1.2 'Archivo Narrow', sans-serif; display: flex; flex-direction: column; }
.lap-top { flex: none; height: 17px; padding: 2px 8px; font: 13px 'VT323', monospace; letter-spacing: 1px; color: #8aa4c0; background: #12161e; border-bottom: 1px solid #1d2430; white-space: nowrap; overflow: hidden; }
.lane { flex: none; padding: 2px 6px 3px; border-bottom: 1px solid #161b24; }
.lane-head { height: 15px; font: 13px 'VT323', monospace; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-A .lane-head { color: #ffb15a; }
.lane-B .lane-head { color: #6cc0ff; }
.lane-wave { display: block; width: 100%; height: 44px; border-radius: 2px; }
.lane-over { display: block; width: 100%; height: 10px; margin-top: 2px; border-radius: 2px; cursor: pointer; }
.lap-lib { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 3px 6px 4px; }
.lib-tabs { display: flex; gap: 3px; }
.lib-tab { padding: 2px 9px; border: 0; border-radius: 3px 3px 0 0; background: #151a23; color: #7d8ba0; font: 700 10px 'Archivo Narrow', sans-serif; letter-spacing: 1px; cursor: pointer; }
.lib-tab.on { background: #222b3a; color: #fff; }
.lib-bar { display: flex; gap: 4px; padding: 3px; background: #222b3a; }
.lib-q { flex: 1; min-width: 0; padding: 2px 6px; border: 1px solid #36435a; border-radius: 2px; background: #0b0e14; color: #e6edf6; font: 12px 'Archivo Narrow', sans-serif; outline: none; }
.lib-q:focus { border-color: #ff9a3a; }
.lib-go { padding: 2px 8px; border: 0; border-radius: 2px; background: #3a4a64; color: #fff; font: 700 10px 'Archivo Narrow', sans-serif; letter-spacing: 1px; cursor: pointer; white-space: nowrap; }
.lib-go:hover { background: #4d6286; }
.lib-list { flex: 1; min-height: 0; overflow: auto; background: #0e1219; }
.lib-list::-webkit-scrollbar { width: 6px; }
.lib-list::-webkit-scrollbar-thumb { background: #2c3546; }
.lib-row { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-bottom: 1px solid #151b25; white-space: nowrap; }
.lib-row:hover { background: #18202c; }
.lr-t { flex: 1.4; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #e6edf6; }
.lr-s { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #6f7d92; }
.lr-d { width: 34px; text-align: right; color: #6f7d92; font: 12px 'VT323', monospace; }
.lr-load { width: 18px; height: 15px; padding: 0; border: 0; border-radius: 2px; font: 700 10px 'Archivo Narrow', sans-serif; cursor: pointer; color: #111; }
.lr-load.a { background: #ff9a3a; }
.lr-load.b { background: #4fb0ff; }
.lib-note { padding: 8px; color: #8796ab; white-space: normal; line-height: 1.35; }
/* cover glass over the monitors and the unit's screen: a faint reflection of the room's light,
   brightest toward the top, and the bezel's shadow on its edge. It's the room's light the glass
   gives back, so it fades as the lights go down and leaves only the picture. */
.mon-screen::after, .lap-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(255,255,255,.055) 0, rgba(255,255,255,.015) 28%, transparent 42%), linear-gradient(to bottom, rgba(255,255,255,.03), transparent 18%);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.75), inset 0 0 0 1px #000;
  opacity: calc(1 - var(--dark));
}

/* ---------- the counter, and the unit on it: one plane, seen from above ----------
   .dj-table holds the counter, the unit's chassis (drawn in dj.js) and every control on it, and
   the dark layer over them (.tbl-dark). None of its children may become a stacking context (no
   z-index, transform, filter, opacity, will-change, mask, clip-path or blend on them): the lit
   parts inside (z 58-61) have to stack against that dark layer (z 50) in this one context. */
.dj-table { position: absolute; left: 0; top: 0; width: 1300px; height: 900px; z-index: 31; pointer-events: none; }
.dj-table > :is(.dj-pod, .dk-head, .drum, .dk, .mixer) { pointer-events: auto; }
/* The counter: dark-stained teak, the grain along the booth, drawn (no photo) as two fine sets of
   lines a hair off level, so they cross slowly and never repeat in sight. The unit's shadow lies
   along the back, under the shelf; its front face (y 890-900) under an eased, lit edge. */
.tbl-top {
  position: absolute;
  left: -400px;
  top: 338px;
  width: 2100px;
  height: 562px;
  background:
    linear-gradient(transparent 552px, rgb(255 226 198 / .07) 552px 553px, #1a140f 553px),
    linear-gradient(rgb(0 0 0 / .55), rgb(0 0 0 / .18) 8px, transparent 24px),
    repeating-linear-gradient(.4deg, transparent 0, rgb(255 220 180 / .04) 1.5px, transparent 3px 11px),
    repeating-linear-gradient(-.3deg, transparent 0, rgb(0 0 0 / .12) 2px, transparent 4px 23px),
    linear-gradient(#33281e, #2a2119);
}
/* the room's light caught softly across the oiled top (gone with the lights) */
.tbl-top::before { content: ''; position: absolute; inset: 0 0 10px; pointer-events: none; background: linear-gradient(rgb(255 236 215 / calc(.05 * (1 - var(--dark)))), transparent 50%); }
.tbl-mat { /* an aluminium channel set in the counter's front edge, an LED strip behind its diffuser */
  position: absolute;
  left: -392px;
  top: 891px;
  width: 2084px;
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(#3a3c41, #1a1b1d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 -1px 2px rgba(0,0,0,.6);
}
/* only the diffuser gives off light, so only it sits above the table's dark; what it lights is
   cut out of that dark (the last layer of --deck-light below) */
.tbl-mat::after {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 1.5px;
  height: 3px;
  border-radius: 2px;
  z-index: 60;
  background: linear-gradient(rgb(240 236 255 / 0), rgb(240 236 255 / .85) 50%, rgb(240 236 255 / 0)), linear-gradient(90deg, #6a7cff, #a86aff 50%, #6a7cff);
  box-shadow: 0 0 3px rgb(150 120 255 / .55);
  opacity: calc(.55 + var(--dark) * .45);
}
/* the chassis (dj.js UNIT_SVG). .u-lit: the room's light on it; .u-ink: the printed legends */
.unit-body { position: absolute; left: 0; top: 0; width: 1300px; height: 900px; pointer-events: none; }
.unit-body svg { display: block; overflow: visible; }
.u-lit { opacity: calc(1 - var(--dark)); }
.u-ink { font: 700 7px 'Archivo Narrow', sans-serif; letter-spacing: 1.5px; fill: #8d9198; }
.u-ink .u-script { font-family: 'Pacifico', cursive; font-weight: 400; letter-spacing: 0; }
/* the chassis's edges by night (dj.js GLINT_SVG): above the table's dark, and gone with the lights
   (by day .u-lit draws them). The back arris either side brightens with its monitor's picture. */
.unit-glint { position: absolute; left: 0; top: 0; width: 1300px; height: 900px; z-index: 55; pointer-events: none; opacity: var(--dark); }
.unit-glint svg { display: block; overflow: visible; }
.unit-glint .g-mon-a { stroke-opacity: calc(.08 + var(--mona, 0) * .1); }
.unit-glint .g-mon-b { stroke-opacity: calc(.08 + var(--monb, 0) * .1); }
.unit-glint .g-side { stroke-opacity: .055; }
.unit-glint .g-front { stroke-opacity: .085; }
.unit-glint .g-foot { stroke-opacity: .16; }
.unit-glint .g-chin { stroke-opacity: .2; }
.unit-glint .g-lip { stroke-opacity: .1; }
.unit-glint .g-tside { stroke-opacity: .07; }
/* the screen's housing is drawn with the chassis; this box holds the screen in its glass */
.dj-pod { position: absolute; left: 366px; top: 12px; width: 568px; height: 338px; padding: 16px 14px 26px; }

/* ---------- knobs and faders ---------- */
.kn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; --kc: 235 238 245; }
.kn-face { position: relative; }
/* The LED ring: 15 LEDs behind a lens, one every 20deg from -140 to 140 (one at 12 o'clock for the
   centre detent), each 13deg wide: the second mask layer cuts the ring into them. knob() lights
   whole LEDs only (--from / --len land on their edges), so no part-lit LED shows. The unlit ones
   are only a faint tint under the lens. Each lit LED has its own small, tight bloom. */
.kn-ring { position: absolute; inset: -5px; z-index: 60; pointer-events: none; filter: drop-shadow(0 0 calc(.5px + var(--dark) * 1.5px) rgb(var(--kc) / calc(.3 + var(--dark) * .6))); }
.kn-arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from calc(var(--from, -146.5) * 1deg), color-mix(in srgb, rgb(var(--kc) / calc(.6 + var(--dark) * .4)) calc(100% - var(--dark) * 26%), rgb(255 255 255 / calc(.6 + var(--dark) * .4))) 0 calc(var(--len, 0) * 1deg), transparent 0), conic-gradient(from -146.5deg, rgb(var(--kc) / calc(.12 - var(--dark) * .105)) 0 293deg, transparent 0);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 3px), #000 calc(100% - 2.5px)), repeating-conic-gradient(from -6.5deg, #000 0 13deg, transparent 13deg 20deg);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 3px), #000 calc(100% - 2.5px)), repeating-conic-gradient(from -6.5deg, #000 0 13deg, transparent 13deg 20deg);
  mask-composite: intersect;
}
/* the pointer line is paint, not light: in the dark it only just catches the glow of the ring round
   it (the cap's own line is under the table's dark) */
.kn-tick { position: absolute; inset: 0; z-index: 60; pointer-events: none; opacity: calc(var(--dark) * .18); }
.kn-tick i { position: absolute; left: 50%; top: 2px; width: 2px; height: 9px; margin-left: -1px; border-radius: 1px; background: #c9ccd2; }
.kn-d .kn-tick i { background: #ff9a4a; }
/* The legends are backlit, like the rings: printed grey in the light; in the dark the light behind
   them shows through in the knob's colour, soft and close (no wash round them). */
#dj-stage .kn-lbl { position: relative; z-index: 60; color: color-mix(in srgb, color-mix(in srgb, rgb(var(--kc)) 62%, #05060a) calc(var(--dark) * 100%), #a9adb4); text-shadow: 0 0 calc(var(--dark) * 2px) rgb(var(--kc) / calc(var(--dark) * .35)); }
.mx-ch-A .kn { --kc: 255 165 70; }
.mx-ch-B .kn { --kc: 80 175 255; }
.mx-ch-C .kn { --kc: 255 105 85; }
.mx-ch .kn-filter { --kc: 60 225 235; }
.kn-fx { --kc: 255 85 70; }
.kn-master { --kc: 240 244 255; }
.drum .kn { --kc: 255 145 60; }
.drum .kn-sel { --kc: 255 190 90; }
/* A knob: a rubber cap on a skirt. Only the cap and its pointer turn (knob() rotates .kn-cap), so
   the cap carries nothing that depends on where the light is: a matte rubber disc, the same all
   round. The light on it and its shadow are still layers on .kn-face: the skirt (::before, the
   cap's circle 3px nearer you, so its side shows below the top) with its shadow toward you, and the
   gloss of the key light on the dome (::after). All under the table's dark; only the LED ring, the
   pointer's glow and the legend (z 60) stay lit. */
.kn-face::before { content: ''; position: absolute; left: 0; right: 0; top: 3px; bottom: -3px; border-radius: 50%; pointer-events: none; background: linear-gradient(90deg, #0d0e10, #1e1f22 30% 70%, #0d0e10); box-shadow: 0 1px 1px rgba(0,0,0,.9), calc(var(--kx) * 3px) calc(var(--ky) * 4px) 5px rgba(0,0,0,.5); }
.kn-face::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 46% 22%, rgb(255 255 255 / .13), transparent 60%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 1px rgb(0 0 0 / .6); }
.kn-cap { position: relative; width: 26px; height: 26px; border-radius: 50%; cursor: ns-resize; touch-action: none; background: radial-gradient(circle closest-side, #252629, #202124 80%, #1a1b1d); box-shadow: inset 0 0 0 1px #000; }
.kn-cap i { position: absolute; left: 50%; top: 2px; width: 2px; height: 9px; margin-left: -1px; border-radius: 1px; background: #eee; }
.kn-lbl { font: 700 8px/8px 'Archivo Narrow', sans-serif; letter-spacing: 1px; color: #a9adb4; white-space: nowrap; }
.kn-filter .kn-cap, .kn-fx .kn-cap, .kn-master .kn-cap { width: 30px; height: 30px; }
/* the filter knob's teal collar, round the top of its skirt */
.kn-filter .kn-face::after { box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 1px rgb(0 0 0 / .6), 0 0 0 2px #1b5f6a; }
/* the big knobs (filter, effect depth, master) have a spun-metal insert in the middle of the cap.
   Its rings give back the light as a still cross of highlights, so it doesn't turn either (it's
   .kn::after, over the cap); the pointer is shorter, on the rubber outside it. */
:is(.kn-filter, .kn-fx, .kn-master)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 9px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 15deg, #6c6f75, #d6d9de 10%, #6c6f75 25%, #9a9da3 40%, #6c6f75 50%, #d6d9de 60%, #6c6f75 75%, #9a9da3 90%, #6c6f75);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .35);
}
:is(.kn-filter, .kn-fx, .kn-master) :is(.kn-cap, .kn-tick) i { top: 2px; height: 6px; }

.fd { position: relative; touch-action: none; }
.fd-v { width: 22px; height: 110px; cursor: ns-resize; }
.fd-h { width: 150px; height: 24px; cursor: ew-resize; }
.fd-slot { position: absolute; border-radius: 2px; } /* lit and shaded under "backlit faders" below */
.fd-v .fd-slot { left: 50%; top: 2px; bottom: 2px; width: 4px; margin-left: -2px; }
.fd-h .fd-slot { top: 50%; left: 2px; right: 2px; height: 4px; margin-top: -2px; }
.fd-cap { position: absolute; border-radius: 3px; }
.fd-cap::after { content: ''; position: absolute; }
.fd-v .fd-cap { left: -3px; right: -3px; height: 15px; margin-top: -7px; }
.fd-v .fd-cap::after { left: 2px; right: 2px; top: 7px; height: 1px; }
.fd-h .fd-cap { top: -3px; bottom: -3px; width: 15px; margin-left: -7px; }
.fd-h .fd-cap::after { top: 2px; bottom: 2px; left: 7px; width: 1px; }

/* ---------- the deck heads, in the back tier either side of the screen ---------- */
.dk-head { position: absolute; top: 344px; width: 276px; height: 136px; }
.dk-head-A { left: 24px; }
.dk-head-B { left: 1000px; }
.dk-lcdbay { position: absolute; left: 14px; top: 22px; width: 248px; height: 46px; border-radius: 4px; box-shadow: 0 0 0 2px #050506, 0 1px 0 2px rgb(255 255 255 / calc(.06 * (1 - var(--dark)))); }
.strip-lcd { width: 100%; height: 100%; padding: 3px 6px; border-radius: 3px; background: #071219; box-shadow: inset 0 0 0 1px #000, inset 0 2px 6px rgba(0,0,0,.8), 0 0 calc(var(--dark) * 4px) rgb(110 220 255 / calc(var(--dark) * .22)); font: 18px/20px 'VT323', monospace; letter-spacing: 1px; color: #9fe8ff; text-shadow: 0 0 2px rgb(110 220 255 / .9), 0 0 6px rgb(110 220 255 / .35); }
.strip-lcd .lcd-1, .strip-lcd .lcd-2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-lcd .lcd-2 { color: #d8f6ff; letter-spacing: .25px; }
.strip-lcd .lcd-2.warn { color: #ff6a5a; text-shadow: 0 0 2px rgb(255 74 58 / .9), 0 0 6px rgb(255 74 58 / .35); animation: lcd-blink .5s steps(2) infinite; }
/* The fluorescent displays (the decks' and the CR-8's): behind smoked glass, which gives back a
   little of the room's light along its top (::before, gone with the lights), with two fine filament
   wires strung across in front of the glyphs (they only take light away, so they stay). Glass and
   wires are one ::before: positioned, it paints over the lines of text, yet it comes before the
   blinking warning line in tree order, so nothing is painted over that animated line (no extra
   layer) and no pseudo-element rides along in its restyles. */
:is(.strip-lcd, .dr-lcd)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(rgb(255 255 255 / calc(.06 * (1 - var(--dark)))), transparent 40%), linear-gradient(transparent 30%, rgb(0 0 0 / .18) 30% calc(30% + 1px), transparent 0 78%, rgb(0 0 0 / .18) 78% calc(78% + 1px), transparent 0);
}
@keyframes lcd-blink { 50% { opacity: .35; } }
.dk-hrow { position: absolute; left: 14px; top: 78px; width: 248px; height: 26px; display: flex; justify-content: space-between; align-items: center; }
.dk-st { display: flex; gap: 6px; }
.dk-st .sb { flex: none; height: 26px; }
.dk-st .sb-sync { width: 64px; }
.dk-st .sb-tap { width: 56px; }
.dk-spds { display: flex; gap: 4px; }

/* ---------- the deck sections of the top plate ---------- */
.dk { position: absolute; top: 480px; width: 406px; height: 388px; }
/* the room's light is up over the middle of the booth: --sheen-a points at it from each platter */
.dk-A { left: 24px; --sheen-a: 157deg; }
.dk-B { left: 870px; --sheen-a: 203deg; }
/* and each deck lamp (on: --tl) shines in from its own side, --la round from the top */
.dk-A { --la: 224deg; --tl: var(--tla, 0); }
.dk-B { --la: 136deg; --tl: var(--tlb, 0); }
/* the platter set into the plate, the outer deck's mirror image of the other */
.dk-jog { position: absolute; top: 14px; width: 316px; height: 316px; }
.dk-A .dk-jog { left: 76px; }
.dk-B .dk-jog { left: 14px; }
/* the steel trim ring round the well: the room's light on it as two highlights, toward the light
   and toward you (they fade with the lights; under a lamp it's the lamp's pool that shows it) */
.dk-bezel {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 322px;
  height: 322px;
  border-radius: 50%;
  --hi: color-mix(in srgb, #c9cdd2 calc((1 - var(--dark)) * 100%), #4a4d52);
  --mid: color-mix(in srgb, #9a9ea4 calc((1 - var(--dark)) * 100%), #3a3c40);
  background: conic-gradient(from var(--sheen-a), var(--mid), #3a3c40 25%, var(--hi) 50%, #3a3c40 75%, var(--mid));
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 3px), #000 0);
  mask: radial-gradient(circle closest-side, transparent calc(100% - 3px), #000 0);
}
.dk-well { position: absolute; left: 0; top: 0; width: 316px; height: 316px; border-radius: 50%; background: #0a0a0b; box-shadow: inset 0 3px 8px #000; }
/* Under the platter, and still: its polished side wall and its shadow. ::before is the platter's
   footprint 4px lower: what shows of it below the platter, toward you, is the side, bright at the
   lip and darker down to the base, with a streak of the room's light where the wall faces it;
   ::after throws the contact shadow from the base. */
.dk-well::before, .dk-well::after { content: ''; position: absolute; left: 8px; top: 12px; width: 300px; height: 300px; border-radius: 50%; }
.dk-well::before {
  background:
    conic-gradient(from var(--sheen-a), rgb(255 255 255 / calc(.4 * (1 - var(--dark)))) 0, transparent 14deg 346deg, rgb(255 255 255 / calc(.4 * (1 - var(--dark)))) 360deg),
    conic-gradient(from var(--sheen-a), transparent 0 50deg, rgb(0 0 0 / .35) 90deg 270deg, transparent 310deg),
    radial-gradient(circle closest-side, #c9cdd2 0 140.5px, #a9adb3 143px, #868a90 145.5px, #5f6268 148px, #26282b 149.5px, #000 150px);
}
.dk-well::after { box-shadow: 0 1px 2px rgba(0,0,0,.9), 0 4px 8px rgba(0,0,0,.45); }
/* The platter doesn't turn (see buildDeck): its outer rim is plain bands of polished metal, the
   light on them a still layer above (.dk-rim). */
.dk-platter { position: absolute; left: 8px; top: 8px; width: 300px; height: 300px; border-radius: 50%; cursor: grab; touch-action: none; background: radial-gradient(circle, transparent 0 141.5px, #1d1e21 142px, #9a9ea4 143px, #e2e5e8 144px, #b9bdc2 146px, #8c9096 148px, #55585d 149.4px, #2a2b2e 150px); }
.dk-platter:active { cursor: grabbing; }
/* the slipmat: charcoal felt, a little darker toward its edge */
.dk-mat { position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(circle closest-side, #26272a 0, #222326 70%, #1c1d20 96%, #151618); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04), inset 0 0 6px rgb(0 0 0 / .6); }
/* the record, seen from above: lead-in and raised lip at the edge, the grooves (r 137 to 75) with
   their track gaps, then the glossy run-out with its locked groove up to the label (which turns,
   in .dk-spin) */
.dk-vinyl { position: absolute; inset: 8px; border-radius: 50%; display: none; background: radial-gradient(circle, transparent 0 51px, #0e0e0f 51px 57.6px, #1a1a1c 57.6px 58.4px, #0e0e0f 58.4px 74px, #0f0f11 75px 98.4px, #19191b 98.4px 99.6px, #0f0f11 99.6px 111.4px, #19191b 111.4px 112.6px, #0f0f11 112.6px 124.4px, #19191b 124.4px 125.6px, #0f0f11 125.6px 137px, #151517 137.5px 140px, #1c1c1f 140px 141.5px, #0b0b0c 141.5px 142px, transparent 142px); }
.dk.loaded .dk-vinyl { display: block; }
/* what turns: the slipmat's printed logo, or the record's label. A small layer of its own
   (frameDeck() rotates it), redrawn sharp after a resize (fit() drops the hint for a moment). */
.dk-spin { position: absolute; inset: 8px; border-radius: 50%; pointer-events: none; will-change: transform; }
#dj-stage.rr :is(.dk-spin, .dk-dots) { will-change: auto; }
.dk-logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 34px 'Pacifico', cursive; color: rgba(236,236,240,.2); }
.dk.loaded .dk-logo { display: none; }
.dk-label { position: absolute; left: 50%; top: 50%; width: 102px; height: 102px; margin: -51px 0 0 -51px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff2 0 6%, transparent 7%), var(--lbl, #c8402f); background-size: cover; background-position: center; box-shadow: 0 0 0 3px #161616; display: none; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.dk.loaded .dk-label { display: flex; }
/* paper, with a printed ring round its rim (it turns with it, as print does) */
.dk-label::before { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, transparent 0 45.2px, rgb(0 0 0 / .28) 45.6px 46.4px, transparent 46.8px); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25); }
.dk-label span { position: relative; max-width: 74px; font: 700 10px/1.1 'Archivo Narrow', sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); margin-top: 24px; }
/* over the platter's centre, still (pointer-events: none, so you still grab the record) */
.dk-spindle { position: absolute; left: 153.5px; top: 153.5px; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 38% 34%, #fff 0 12%, #b9bcc1 35%, #6d7076 70%, #3a3c40); box-shadow: 0 1px 1px rgba(0,0,0,.8), 0 0 0 1.5px rgba(0,0,0,.35); }
/* The light on the record. The grooves give the room's light back as a streak through the centre,
   lined up with the light (over the booth's middle) and you; it is the room's light, so it fades
   with it. With the lights down and the deck lamp on, the lamp's own streak shows on the grooves
   toward it and, weaker, across the centre. The run-out is smooth vinyl: only a soft gloss. */
.dk-sheen {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 284px;
  height: 284px;
  border-radius: 50%;
  pointer-events: none;
  display: none;
  --rl: calc(1 - var(--dark) * .9);
  --ll: calc(var(--tl) * var(--dark) * .2);
  background:
    conic-gradient(from calc(var(--la) - 10deg), transparent 0, rgb(255 246 228 / var(--ll)) 10deg, transparent 20deg 180deg, rgb(255 246 228 / calc(var(--ll) * .45)) 190deg, transparent 200deg),
    conic-gradient(from calc(var(--sheen-a) - 20deg), transparent 0, rgb(255 255 255 / calc(.05 * var(--rl))) 10deg, rgb(255 255 255 / calc(.12 * var(--rl))) 20deg, rgb(255 255 255 / calc(.05 * var(--rl))) 30deg, transparent 40deg 180deg, rgb(255 255 255 / calc(.055 * var(--rl))) 190deg, rgb(255 255 255 / calc(.14 * var(--rl))) 200deg, rgb(255 255 255 / calc(.055 * var(--rl))) 210deg, transparent 220deg),
    conic-gradient(from calc(var(--sheen-a) - 20deg), transparent 0, rgb(120 170 255 / calc(.035 * var(--rl))) 7deg, transparent 13deg 205deg, rgb(255 170 110 / calc(.035 * var(--rl))) 213deg, transparent 221deg);
  -webkit-mask: radial-gradient(circle, transparent 0 54px, rgb(0 0 0 / .35) 56px 72px, #000 76px 134px, rgb(0 0 0 / .6) 137px, transparent 141px);
  mask: radial-gradient(circle, transparent 0 54px, rgb(0 0 0 / .35) 56px 72px, #000 76px 134px, rgb(0 0 0 / .6) 137px, transparent 141px);
}
.dk.loaded .dk-sheen { display: block; }
/* the platter's rim in the room's light: polished metal gives it back as two highlights either
   side of the centre, toward the light and toward you, darker across the sides */
.dk-rim {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  pointer-events: none;
  --rl: calc(1 - var(--dark));
  background:
    conic-gradient(from var(--sheen-a), rgb(255 255 255 / calc(.5 * var(--rl))), rgb(255 255 255 / 0) 34deg, rgb(0 0 0 / .32) 90deg, rgb(0 0 0 / 0) 146deg, rgb(255 255 255 / calc(.38 * var(--rl))) 180deg, rgb(255 255 255 / 0) 214deg, rgb(0 0 0 / .32) 270deg, rgb(0 0 0 / 0) 326deg, rgb(255 255 255 / calc(.5 * var(--rl))));
  -webkit-mask: radial-gradient(circle, transparent 0 142px, #000 142.5px 149.5px, transparent 150px);
  mask: radial-gradient(circle, transparent 0 142px, #000 142.5px 149.5px, transparent 150px);
}
/* the label's paper takes a soft gloss, from the same light (still: it doesn't turn with the label) */
.dk-lblgloss { position: absolute; left: 107px; top: 107px; width: 102px; height: 102px; border-radius: 50%; pointer-events: none; display: none; background: radial-gradient(ellipse 70% 50% at 45% 30%, rgb(255 255 255 / calc(.08 * (1 - var(--dark)))), transparent 70%); }
.dk.loaded .dk-lblgloss { display: block; }
/* The strobe dots run round the platter's side, on its rim. The strobe lamp under the plate lights
   a wide arc of them toward the deck lamp, fading off either side (the mask), and leaks a tight red
   glow out over the trim ring along that arc (.dk-strobe-spill). Deck B's arc is A's mirrored. */
.dk-strobe { position: absolute; left: 4px; top: 4px; width: 308px; height: 308px; border-radius: 50%; pointer-events: none; -webkit-mask: var(--arc); mask: var(--arc); }
.dk-A { --arc: conic-gradient(transparent 0 112deg, rgb(0 0 0 / .35) 142deg, #000 190deg 238deg, rgb(0 0 0 / .35) 251deg, transparent 262deg); }
.dk-B { --arc: conic-gradient(transparent 0 98deg, rgb(0 0 0 / .35) 109deg, #000 122deg 170deg, rgb(0 0 0 / .35) 218deg, transparent 248deg); }
.dk-strobe::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 0 140px, rgba(255, 85, 50, .12) 147px, rgba(255, 75, 45, .2) 151px, rgba(255, 75, 45, .06) 157px, transparent 164px); }
.dk-dots { position: absolute; inset: 0; will-change: transform; }
.dk-dots i { position: absolute; left: 50%; top: 2px; width: 3px; height: 5px; margin-left: -1.5px; border-radius: 1px; background: #ff7a4a; box-shadow: 0 0 3px rgba(255, 74, 42, .6); transform-origin: 1.5px 152px; }
.dk-strobe-spill { position: absolute; top: -8px; width: 360px; height: 360px; z-index: 58; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, transparent 0 152px, rgb(255 90 55 / .3) 154px, rgb(255 80 45 / .1) 160px, rgb(255 80 45 / .03) 168px, transparent 176px); -webkit-mask: var(--arc); mask: var(--arc); opacity: calc(.04 + var(--dark) * .6); }
.dk-A .dk-strobe-spill { left: 54px; }
.dk-B .dk-strobe-spill { left: -8px; }
/* The deck lamp, at the platter's outer front corner (the same reach to the platter's centre as
   the old turntables' target light): its light fans out across the record, warm, fading as it goes
   (the record itself shows through the pool cut in the dark, .tbl-dark). It sits in a socket drawn
   with the chassis. */
.dk-target { position: absolute; top: 310px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 40% 35%, #777, #222); box-shadow: 0 2px 3px #000; }
.dk-A .dk-target { left: 84px; }
.dk-B .dk-target { left: 304px; }
.dk-target.on { background: radial-gradient(circle at 47% 44%, #fff 0 26%, #fff4d8 48%, #f2d79e 74%, #b0905a); box-shadow: 0 0 2px rgb(255 250 235 / .95), 0 0 calc(4px + var(--dark) * 3px) rgb(255 236 200 / .6), 0 0 calc(8px + var(--dark) * 5px) rgb(255 214 160 / calc(.1 + var(--dark) * .16)); }
.dk-beam { position: absolute; top: 319px; width: 330px; height: 190px; margin-top: -95px; pointer-events: none; z-index: 58; transform-origin: 0 50%; background: radial-gradient(ellipse 100% 88% at 0 50%, rgba(255, 244, 222, .34), rgba(255, 238, 212, .12) 40%, rgba(255, 236, 206, .03) 72%, transparent 92%); opacity: 0; transition: opacity .3s; }
.dk-A .dk-beam { left: 93px; transform: rotate(-40deg); }
.dk-B .dk-beam { left: 313px; transform: rotate(-140deg); }
.dk-beam.on { opacity: calc(.03 * (1 - var(--dark))); }
/* the TEMPO fader along the deck's outer edge: 240px for ±8%, so 15px a percent */
.dk-pitch { position: absolute !important; top: 110px; height: 240px; }
.dk-A .dk-pitch { left: 20px; }
.dk-B .dk-pitch { left: 364px; }
.dk-pitch .fd-cap { left: -5px; right: -5px; height: 18px; margin-top: -9px; }
.dk-pitch .fd-cap::after { top: 8px; height: 2px; }
/* printed 1% ticks beside the slot, on the side toward the platter, longer every 4%, lined up with
   the cap's travel */
.dk-pitch::before { content: ''; position: absolute; top: 0; width: 5px; height: 241px; pointer-events: none; }
.dk-A .dk-pitch::before { left: 26px; background: repeating-linear-gradient(#8c9097 0 1px, transparent 1px 60px) 0 0 / 5px 100% no-repeat, repeating-linear-gradient(#8c9097 0 1px, transparent 1px 15px) 2px 0 / 3px 100% no-repeat; }
.dk-B .dk-pitch::before { left: -9px; background: repeating-linear-gradient(#8c9097 0 1px, transparent 1px 60px) 0 0 / 5px 100% no-repeat, repeating-linear-gradient(#8c9097 0 1px, transparent 1px 15px) 0 0 / 3px 100% no-repeat; }
/* the green LED at 0% */
.dk-pled { position: absolute; top: 227.5px; width: 5px; height: 5px; border-radius: 50%; background: #0f2a12; }
.dk-A .dk-pled { left: 12px; }
.dk-B .dk-pled { left: 389px; }
.dk-pled.on { background: radial-gradient(circle at 50% 45%, #eaffee 0 22%, #4dff6a 60%, #1fc23a); box-shadow: 0 0 2px #4dff6a, 0 0 5px rgb(77 255 106 / .45); }
/* the labels sit level with the ticks: slower at the top, faster toward you */
.dk-scale { position: absolute; top: 105px; width: 14px; height: 250px; display: flex; flex-direction: column; justify-content: space-between; font: 700 8px/10px 'Archivo Narrow', sans-serif; color: #888; }
.dk-A .dk-scale { left: 53px; }
.dk-B .dk-scale { left: 339px; text-align: right; }
/* the four hot-cue pads along the front, and round CUE and PLAY at the deck's inner front corner */
.dk-pads { position: absolute; top: 344px; display: flex; gap: 6px; }
.dk-A .dk-pads { left: 129px; }
.dk-B .dk-pads { left: 67px; }
.dk-pads .pad { flex: none; width: 48px; }
.dk-transport { position: absolute; top: 290px; display: flex; flex-direction: column; gap: 8px; }
.dk-A .dk-transport { left: 360px; }
.dk-B .dk-transport { left: 8px; }
.dk-transport .sb { flex: none; width: 38px; height: 38px; border-radius: 50%; font-size: 9px; letter-spacing: .5px; }

/* matte silicone, the rubber of real transport buttons and pads: a soft sheen from above, a
   rounded top edge, and when lit, light coming through the whole pad (its colour is its --bl) */
.sb, .pad { flex: 1; height: 26px; padding: 0; border: 0; border-radius: 5px; cursor: pointer; font: 700 10px 'Archivo Narrow', sans-serif; letter-spacing: 1px; color: #9a9ea6; background: radial-gradient(ellipse 120% 80% at 50% 0, rgba(255,255,255,.07), transparent 60%), #2a2b2f; --key: #2a2b2f; --face: inset 0 1px 1px rgba(255,255,255,.08), inset 0 -2px 2px rgba(0,0,0,.35); }
/* CUE and PLAY have a coloured ring of light round their rubber, like the real ones */
.dk-transport .sb { --face: inset 0 0 0 1.5px rgb(var(--bl) / .35), inset 0 1px 1px rgba(255,255,255,.08), inset 0 -2px 2px rgba(0,0,0,.35); }
.sb.on, .pad.on, .sb-play.blink:not(.on) { --lit: radial-gradient(ellipse 72% 68% at 50% 50%, color-mix(in srgb, rgb(var(--bl)) 70%, #fff) 0, rgb(var(--bl)) 62%, rgb(var(--bl) / .84) 100%), #1a1b1e; }
.sb.on, .pad.on { background: var(--lit); }
.sb-cue.on { color: #1a0d00; }
.sb-play.on { color: #062a0c; }
/* a loaded deck's PLAY blinks, lit through to its sides (its backlight blinks with it, below) */
.sb-play.blink:not(.on) { animation: play-blink 1s steps(2) infinite; }
@keyframes play-blink { 50% { color: #062a0c; background: var(--lit); box-shadow: 0 0 3px rgb(var(--bl) / .45), 0 0 0 1px rgb(var(--bl) / .4), 0 3px 0 rgb(var(--bl) / .75), 0 0 0 1px #050506, 0 3px 0 1px #050506, 0 4px 3px 1px rgba(0,0,0,.5); filter: none; } }
.sb-sync.on { color: #00122a; }
.sb-tap.on { color: #111; }
.pad { height: 28px; font-size: 12px; }
.pad.on { color: #111; }
/* the selected speed key keeps a lit legend; the speed keys are hard plastic like the drum keys */
.dk-spd { flex: none; width: 30px; height: 22px; padding: 0; border: 0; border-radius: 2px; cursor: pointer; font: 700 10px 'Archivo Narrow', sans-serif; color: #888; --key: #35373b; --gloss: .14; --wh: 2px; }
.dk-spd.on { color: #ffcf7a; text-shadow: 0 0 3px #ffb040; --face: inset 0 0 6px rgba(255,170,60,.35); }

/* ---------- the mixer, between the decks ---------- */
.mixer { position: absolute; left: 430px; top: 480px; width: 440px; height: 388px; }
/* MASTER and its meter in a column of their own on the left, the three channels in the middle (on
   the unit's centre line, as is the crossfader), BEAT FX on the right */
.mx-mast { position: absolute; left: 8px; top: 8px; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* The LED meters: a black window with the unlit lenses in it (its background image, drawn once by
   dj.js: under the table's dark, so dead LEDs go with the lights) and the lit LEDs on a clear canvas
   over them (.screen, above the dark). The master's dB scale is printed beside it (ink, under the
   dark too). */
.mx-mmeter-w, .mx-meter-w { position: relative; flex: none; background: #050506 no-repeat 0 0 / 100% 100%; box-shadow: inset 0 0 0 1px #000; }
.mx-mmeter-w { width: 15px; height: 270px; }
#dj-stage :is(.mx-meter, .mx-mmeter) { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.mx-scale { position: absolute; right: calc(100% + 3px); top: 0; height: 100%; pointer-events: none; }
.mx-scale span { position: absolute; right: 0; font: 700 6px/6px 'Archivo Narrow', sans-serif; letter-spacing: .3px; color: #8c9097; white-space: nowrap; }
.mx-chans { position: absolute; left: 96px; top: 8px; width: 248px; height: 332px; display: flex; gap: 1px; }
.mx-ch { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; }
/* the knobs stack close: each legend tucks under its cap, in the open bottom of its ring, and the
   next knob down sits far enough below that its ring clears that legend */
.mx-ch .kn { gap: 1px; margin-top: 4px; }
.mx-name { font: 700 8px/9px 'Archivo Narrow', sans-serif; letter-spacing: 1.5px; --ink: #c3c7cd; --kc: 235 238 245; }
.mx-ch-A .mx-name { --ink: #ffb15a; --kc: 255 165 70; }
.mx-ch-B .mx-name { --ink: #6cc0ff; --kc: 80 175 255; }
.mx-ch-C .mx-name { --ink: #ff7a6a; --kc: 255 105 85; }
#dj-stage .mx-name { position: relative; z-index: 60; color: color-mix(in srgb, color-mix(in srgb, rgb(var(--kc)) 62%, #05060a) calc(var(--dark) * 100%), var(--ink)); text-shadow: 0 0 calc(var(--dark) * 2px) rgb(var(--kc) / calc(var(--dark) * .35)); }
.mx-fadebay { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.mx-fadebay .fd-v { height: 92px; }
.mx-meter-w { width: 8px; height: 92px; border-radius: 1px; }
.mx-assign { display: flex; gap: 2px; }
.xa { padding: 1px 4px; border: 0; border-radius: 2px; cursor: pointer; font: 700 7px 'Archivo Narrow', sans-serif; letter-spacing: .5px; color: #777; background: #222326; }
.xa.on { color: #ffe0a8; background: #4a3a20; box-shadow: 0 0 3px rgb(var(--bl) / .5), 0 0 0 1px rgb(var(--bl) / .5); }
.mx-xfbay { position: absolute; left: 96px; top: 344px; width: 248px; height: 24px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 9px 'Archivo Narrow', sans-serif; color: #999; }
.mx-xf { width: 190px; }
.mx-xf .fd-cap { width: 20px; margin-left: -10px; }
.mx-xf .fd-cap::after { left: 9px; width: 2px; }
/* printed scales: 11 ticks over the crossfader's travel, and 10 / 5 / 0 up each channel fader,
   on the side away from its meter. Ink, so they stay under the table's dark. */
.mx-xf::before { content: ''; position: absolute; left: 0; top: 2px; width: 191px; height: 5px; pointer-events: none; background: repeating-linear-gradient(90deg, #8c9097 0 1px, transparent 1px 95px) 0 0 / 100% 5px no-repeat, repeating-linear-gradient(90deg, #8c9097 0 1px, transparent 1px 19px) 0 2px / 100% 3px no-repeat; }
.mx-fadebay .fd-v::before { content: ''; position: absolute; left: 27px; top: 0; width: 5px; height: 93px; pointer-events: none; background: repeating-linear-gradient(#8c9097 0 1px, transparent 1px 46px) 0 0 / 5px 100% no-repeat, repeating-linear-gradient(#8c9097 0 1px, transparent 1px 9.2px) 0 0 / 3px 100% no-repeat; }
.mx-fadebay .fd-v::after { content: '10\A 5\A 0'; position: absolute; left: 34px; top: -23px; white-space: pre; pointer-events: none; font: 700 6px/46px 'Archivo Narrow', sans-serif; letter-spacing: .5px; color: #8c9097; }
.mx-fx { position: absolute; left: 351px; top: 22px; width: 84px; height: 346px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mx-oled { width: 84px; height: 46px; padding: 3px 5px; border-radius: 3px; background: #02060a; box-shadow: inset 0 0 0 1px #000, inset 0 2px 6px #000, 0 0 calc(var(--dark) * 4px) rgb(90 230 255 / calc(var(--dark) * .2)); font: 13px/13px 'VT323', monospace; letter-spacing: .5px; color: #6cf2ff; text-shadow: 0 0 1.5px rgb(90 230 255 / .55); white-space: nowrap; overflow: hidden; }
.mx-oled .o3 { color: #ffd27a; text-shadow: 0 0 1.5px rgb(255 200 100 / .55); }
.mx-fx .kn-fx { margin-top: auto; }
.fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 84px; }
.fxb, .fxt { height: 17px; padding: 0; border: 0; border-radius: 2px; cursor: pointer; font: 700 8px 'Archivo Narrow', sans-serif; letter-spacing: .5px; color: #8c9097; --key: #2b2d31; --gloss: .12; --wh: 2px; }
/* selected, the key glows through in its own colour (its --bl), like the drum machine's */
.fxb.on { color: #fff; --key: rgb(var(--bl)); --gloss: .3; }
.fxt.on { color: #111; --key: rgb(var(--bl)); --gloss: .3; }
.fx-beat { display: flex; align-items: center; gap: 6px; font: 700 8px 'Archivo Narrow', sans-serif; letter-spacing: 1px; color: #999; }
.fxbeat { width: 26px; height: 16px; padding: 0; border: 0; border-radius: 2px; cursor: pointer; font-size: 8px; color: #cfd2d6; --key: #35373b; --gloss: .14; --wh: 2px; }
/* red silicone, like the transport buttons: a soft sheen from above; armed, lit dimly from behind;
   on, lit right through */
.fx-on { width: 70px; height: 24px; border: 0; border-radius: 12px; cursor: pointer; font: 700 9px 'Archivo Narrow', sans-serif; letter-spacing: 1px; color: #8a6a6a; --key: #3a1f1f; --face: inset 0 1px 1px rgba(255,255,255,.08), inset 0 -2px 2px rgba(0,0,0,.35); background: radial-gradient(ellipse 120% 80% at 50% 0, rgba(255,255,255,.07), transparent 60%), var(--key); }
.fx-on.armed { color: #ffd8d8; --key: #88231e; }
.fx-on.on { color: #fff; background: radial-gradient(ellipse at 50% 55%, rgb(var(--bl)) 0, rgb(var(--bl) / .8) 70%), #1a1b1e; }

/* ---------- the drum machine: a graphite insert in the back tier, under the screen ---------- */
.drum {
  position: absolute;
  left: 302px;
  top: 352px;
  width: 696px;
  height: 126px;
  padding: 4px 6px 6px;
  display: grid;
  grid-template-columns: 1fr 84px;
  grid-template-rows: 26px 22px 40px 10px;
  gap: 6px 8px;
  border-radius: 3px;
  /* the screen housing's contact shadow along its top, on a lighter graphite plate sunk flush */
  background: radial-gradient(ellipse 300px 18px at 50% 0, rgb(0 0 0 / .55), transparent), linear-gradient(#2c2c2f, #232326 50%, #1d1d20);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), inset 0 0 0 1px #050506, inset 0 -1px 0 rgb(0 0 0 / .5);
}
.dr-head { display: flex; align-items: center; gap: 8px; --spill: .16; }
.dr-lcd { flex: none; width: 160px; height: 26px; padding: 2px 6px; border-radius: 3px; background: #160403; box-shadow: inset 0 0 0 1px #000, inset 0 2px 6px #000, 0 0 calc(var(--dark) * 4px) rgb(255 80 50 / calc(var(--dark) * .22)); font: 12px/11px 'VT323', monospace; letter-spacing: 1px; color: #ff5a3a; text-shadow: 0 0 2px rgb(255 80 50 / .9), 0 0 6px rgb(255 80 50 / .35); white-space: nowrap; overflow: hidden; }
.dr-lcd .d2 { color: #ffb05a; text-shadow: 0 0 2px rgb(255 170 80 / .9), 0 0 6px rgb(255 170 80 / .35); }
.dr-ctl { flex: 1; display: flex; gap: 4px; align-items: center; }
.dr-knobs { grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); grid-auto-flow: column; gap: 4px; justify-items: center; align-items: end; }
.drum .kn { gap: 1px; }
.kn-d .kn-cap { width: 24px; height: 24px; background: radial-gradient(circle closest-side, #3a3a3d, #313134 80%, #29292b); }
.kn-d .kn-cap i { background: #ff9a4a; }
/* the drum machine's caps are a lighter grey plastic, so they take the light a little more */
.kn-d .kn-face::before { background: linear-gradient(90deg, #141415, #2a2a2c 30% 70%, #141415); }
.kn-d .kn-face::after { background: radial-gradient(ellipse 80% 60% at 46% 22%, rgb(255 255 255 / .17), transparent 60%); }
.dr-insts { display: flex; gap: 4px; --spill: .08; }
.inst { flex: none; width: 70.5px; height: 22px; padding: 0 2px; border: 0; border-radius: 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 700 8px/8px 'Archivo Narrow', sans-serif; letter-spacing: .5px; color: #d6d0c4; --key: #3c3c3f; --gloss: .14; }
.dr-steps { display: flex; gap: 4px; }
.step { flex: none; width: 32.5px; height: 40px; padding: 4px 0 0; border: 0; border-radius: 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 9px 'Archivo Narrow', sans-serif; color: rgba(0,0,0,.55); }
.dr-steps .step:nth-child(4n) { margin-right: 4px; }
.dr-steps .step:last-child { margin-right: 0; }
.step-g0 { --key: #d64a31; }
.step-g1 { --key: #e8892a; }
.step-g2 { --key: #ebc733; }
.step-g3 { --key: #ebe4d5; }
/* printed under the steps, lined up with their groups: a band in each group's colour, and the
   machine's name under the first */
.dr-legend { display: grid; grid-template-columns: repeat(4, 142px); column-gap: 8px; }
.dr-legend i { display: flex; align-items: baseline; gap: 4px; padding-top: 1px; border-top: 2px solid; font: 700 8px/7px 'Archivo Narrow', sans-serif; white-space: nowrap; }
.dr-legend .g0 { border-color: #d64a31; }
.dr-legend .g1 { border-color: #e8892a; }
.dr-legend .g2 { border-color: #ebc733; }
.dr-legend .g3 { border-color: #ebe4d5; }
.dr-legend b { color: #ff8a3a; letter-spacing: 1px; }
.dr-legend span { font-size: 7px; letter-spacing: 1.5px; color: #a99c88; }
/* the drum machine's keys are hard plastic, moulded flat in one colour (their --key): a glossy
   chamfer along the top edge, a faint dish in the middle, a little shade toward the front. So are
   the mixer's effect keys and the decks' speed keys. */
:is(.step, .inst, .dbtn, .bank, .fxb, .fxt, .fxbeat, .dk-spd) { background: linear-gradient(rgb(255 255 255 / var(--gloss, .32)), transparent 2.5px), radial-gradient(ellipse at 50% 70%, rgba(0,0,0,.08), transparent 70%), linear-gradient(transparent 70%, rgba(0,0,0,.12)), var(--key); }
/* keys aren't lit, only their LEDs; keep the key under the dark and lift the LED above it */
#dj-stage .step.glow, #dj-stage .inst.glow { z-index: auto; filter: none; }
#dj-stage .step:not(.on):not(.head), #dj-stage .inst:not(.on):not(.hit) { filter: none; }
.led { position: relative; z-index: 60; display: block; width: 7px; height: 7px; border-radius: 50%; background: #3a0d08; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.step:not(.on):not(.head) .led, .inst:not(.on):not(.hit):not(.muted) .led { filter: brightness(calc(1 - var(--dark) * .8)); }
.step.on .led { background: radial-gradient(circle at 50% 45%, #ffe4d8 0 16%, #ff5a40 50%, #e0261a); box-shadow: 0 0 2px #ff3a2a, 0 0 6px rgb(255 60 40 / .45); }
.step.acc .led { background: radial-gradient(circle at 50% 45%, #fff 0 22%, #ffc8b4 55%, #ff7a5a); box-shadow: 0 0 2px #ff6a4a, 0 0 7px rgb(255 58 42 / .65); }
.step.head .led { background: radial-gradient(circle at 50% 45%, #fff 0 40%, #e8eeff); box-shadow: 0 0 2px #fff, 0 0 7px rgb(255 255 255 / .55); }
.step.on.head .led { background: radial-gradient(circle at 50% 45%, #fff 0 30%, #fff4b0); }
.inst .led { width: 6px; height: 6px; }
.inst.on .led { background: radial-gradient(circle at 50% 45%, #fff 0 40%, #e6ecff); box-shadow: 0 0 2px #fff, 0 0 6px rgb(255 255 255 / .4); }
.inst.muted .led { background: radial-gradient(circle at 50% 45%, #ffd6d0 0 16%, #ff3a30 52%, #d81a1a); box-shadow: 0 0 2px #ff2a2a, 0 0 6px rgb(255 42 42 / .4); animation: lcd-blink .6s steps(2) infinite; }
.inst.hit .led { background: radial-gradient(circle at 50% 45%, #fffbe8 0 20%, #ffd23a 58%, #e8a818); box-shadow: 0 0 2px #ffd23a, 0 0 6px rgb(255 210 58 / .5); }
.inst.on { color: #fff; }
.dbtn { flex: none; height: 26px; padding: 0; border: 0; border-radius: 3px; cursor: pointer; font: 700 9px 'Archivo Narrow', sans-serif; letter-spacing: 1px; color: #bfb7aa; --key: #3a3a3d; --gloss: .14; }
.d-start { width: 72px; }
.d-rec, .d-tap { width: 38px; }
.d-sync, .d-clear { width: 44px; }
/* lit, the key glows through in its own colour (its --bl) */
.dbtn.on, .bank.on { --key: rgb(var(--bl)); --gloss: .3; }
.d-start.on { color: #052a0a; }
.d-rec.on { color: #fff; }
.d-sync.on { color: #00122a; }
.banks { display: flex; align-items: center; gap: 3px; margin-left: auto; font: 700 8px 'Archivo Narrow', sans-serif; letter-spacing: 1px; color: #999; }
.banks span { margin-right: 3px; }
.bank { flex: none; width: 24px; height: 26px; padding: 0; border: 0; border-radius: 3px; cursor: pointer; font: 700 10px 'Archivo Narrow', sans-serif; color: #999; --key: #3a3a3d; --gloss: .14; }
.bank.on { color: #1a0d00; }

/* In the booth the monitors fill the wall, so the switches sit up in the top left corner. */
body[data-view="dj"] #viewSwitch { right: auto; left: 18px; top: 10px; }
body[data-view="dj"] #room-dimmer { right: auto; left: 112px; top: 10px; }
body[data-view="dj"] #room-dimmer .dim-slot { height: 48px; }

/* ---------- backlit buttons ----------
   With the room lights down, the controls you play (pads, transport, steps, REC, the effect's
   ON) keep a soft glow in their own colour (their --bl), the way rubber pads and keys on real gear
   are lit from behind; the utility buttons (--bla: 0) light only their legends, and switched-on
   buttons blaze. Each sits above the dark, so its ::after darkens it with the room. */
#dj-stage :is(.sb, .pad, .xa, .fxb, .fxt, .fxbeat, .fx-on, .dbtn, .bank, .dk-spd, .inst, .step) { position: relative; }
#dj-stage :is(.sb, .pad, .xa, .fxb, .fxt, .fxbeat, .fx-on, .dbtn, .bank, .dk-spd, .inst, .step) { z-index: 60 !important; filter: none !important; }
/* the instrument keys show they're on by their LEDs alone, so they always dim. A key that isn't
   lit from behind (--bla: 0) goes as dark as the plate round it: no grey box in the dark. */
#dj-stage :is(.sb, .pad, .xa, .fxb, .fxt, .fxbeat, .fx-on, .dbtn, .bank, .dk-spd, .step):not(.on)::after,
#dj-stage .inst::after {
  content: '';
  position: absolute;
  inset: -.5px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(rgb(160 182 255 / calc(var(--dark) * var(--spill, 0) * .3)), transparent 65%),
    radial-gradient(ellipse at 50% 55%, rgb(var(--bl) / calc(var(--dark) * .42 * var(--bla, 1))), rgb(var(--bl) / calc(var(--dark) * .1 * var(--bla, 1))) 75%),
    rgb(5 6 10 / calc(var(--dark) * (.82 + (1 - var(--bla, 1)) * .14) * (1 - var(--spill, 0))));
  box-shadow: inset 0 0 0 1px rgb(var(--bl) / calc(var(--dark) * .06 * var(--bla, 1)));
}
/* the legends: printed (--fg) in the light; in the dark, the light behind them in the key's own
   colour, a little dimmer on the utility keys, with a close bloom */
#dj-stage :is(.sb, .pad, .xa, .fxb, .fxt, .fxbeat, .fx-on, .dbtn, .bank, .dk-spd, .inst):not(.on) {
  --legend: color-mix(in srgb, rgb(var(--bl)) calc(72% + var(--bla, 1) * 28%), #05060a);
  color: color-mix(in srgb, var(--legend) calc(var(--dark) * 100%), var(--fg));
  text-shadow: 0 0 calc(var(--dark) * 2px) rgb(var(--bl) / calc(var(--dark) * .5));
}
.sb-tap, .xa, .fxbeat, .dk-spd, .d-tap, .d-clear, .inst, .bank, .fxb, .fxt { --bla: 0; }
/* the toggles idle dimmer, so lit (engaged) can't be mistaken */
.sb-sync, .d-sync, .d-rec { --bla: .4; }
/* the selected speed key keeps its lit legend, but its grey cap goes dark with the room like the rest */
#dj-stage .dk-spd.on::after { content: ''; position: absolute; inset: -.5px; z-index: -1; border-radius: inherit; pointer-events: none; background: rgb(5 6 10 / calc(var(--dark) * .96)); }
#dj-stage :is(.sb, .pad, .dbtn, .inst) { --fg: #9a9ea6; --bl: 225 230 240; }
.sb-cue { --bl: 255 170 40 !important; }
.sb-play { --bl: 70 255 110 !important; }
.sb-sync { --bl: 70 165 255 !important; }
.pad-0 { --bl: 255 70 70 !important; }
.pad-1 { --bl: 70 255 130 !important; }
.pad-2 { --bl: 70 165 255 !important; }
.pad-3 { --bl: 255 215 70 !important; }
.d-start { --bl: 70 255 110 !important; }
.d-rec { --bl: 255 70 55 !important; }
.d-sync { --bl: 70 165 255 !important; }
.xa { --fg: #777; --bl: 255 190 90; }
.fxb { --fg: #8c9097; --bl: 100 120 255; }
.fxt { --fg: #8c9097; --bl: 255 190 80; }
.fxbeat { --fg: #cfd2d6; --bl: 210 220 240; }
.fx-on { --fg: #8a6a6a; --bl: 255 70 50; }
.bank { --fg: #999; --bl: 255 150 40; }
.dk-spd { --fg: #888; --bl: 255 170 60; }
.inst { --fg: #d6d0c4 !important; --bl: 255 236 210 !important; }
.step-g0 { --bl: 240 90 60; }
.step-g1 { --bl: 250 160 50; }
.step-g2 { --bl: 250 215 70; }
.step-g3 { --bl: 245 238 225; }
/* the drum keys are translucent: a set key glows through in its own colour; an unset one is dark,
   with only a faint tint of its colour where the light behind leaks through (no lit rim) */
#dj-stage .step:not(.on):not(.head)::after { background: radial-gradient(ellipse at 50% 60%, rgb(var(--bl) / calc(var(--dark) * .065)), rgb(var(--bl) / calc(var(--dark) * .015)) 80%), rgb(5 6 10 / calc(var(--dark) * 1.02)); box-shadow: none; }
/* blinking PLAY: the backlight blinks with it */
#dj-stage .sb-play.blink:not(.on)::after { animation: bl-blink 1s steps(2) infinite; }
@keyframes bl-blink { 50% { opacity: 0; } }
/* The keys' sides: each key stands --wh tall on a side in a darker shade of its own colour (its
   --key), sunk in a dark bezel, and sinks to 1px when pressed. The sides are outside the key's
   ::after, so they darken with the room by themselves; a lit key's sides are lit too. */
:is(.sb, .pad, .fxb, .fxt, .fxbeat, .fx-on, .dbtn, .bank, .dk-spd, .inst, .step) {
  --wall: color-mix(in srgb, #05060a calc(var(--dark) * 93%), color-mix(in srgb, var(--key) 55%, #000));
  --lift: calc(var(--wh, 3px) - var(--press, 0px));
  box-shadow: var(--halo, 0 0 transparent), 0 var(--lift) 0 var(--wall), 0 0 0 1px #050506, 0 var(--lift) 0 1px #050506, 0 calc(var(--lift) + 1px) 3px 1px rgba(0,0,0,.5), var(--face, 0 0 transparent);
}
:is(.sb, .pad, .fxb, .fxt, .fxbeat, .fx-on, .dbtn, .bank, .dk-spd, .inst, .step):active { --press: calc(var(--wh, 3px) - 1px); transform: translateY(var(--press)); }
:is(.sb, .pad, .fxb, .fxt, .fx-on, .dbtn, .bank).on { --wall: rgb(var(--bl) / .85); --halo: 0 0 0 1px rgb(var(--bl) / .5), 0 0 3px 1px rgb(var(--bl) / calc(.3 + var(--dark) * .15)), 0 0 9px 1px rgb(var(--bl) / calc(var(--dark) * .13)); }
/* a step that's on isn't dimmed by the room (it has no ::after), so neither are its sides */
.step.on { --wall: color-mix(in srgb, var(--key) 55%, #000); --halo: 0 0 0 1px rgb(var(--bl) / calc(var(--dark) * .3)), 0 0 3px 1px rgb(var(--bl) / calc(var(--dark) * .28)), 0 0 8px 1px rgb(var(--bl) / calc(var(--dark) * .1)); }

/* ---------- backlit faders: a glowing track (lit up to the cap on the channel faders) and a
   glowing line across each cap; the caps themselves dim with the room ---------- */
.fd { --fc: 235 240 255; }
.mx-ch-A .fd { --fc: 255 165 70; }
.mx-ch-B .fd { --fc: 80 175 255; }
.mx-ch-C .fd { --fc: 255 105 85; }
.dk-pitch { --fc: 255 130 50; }
.mx-xf { --fc: 200 205 255; }
/* each slot is a trench with a lip catching the light; its dark interior (--trench) shows under the glow */
#dj-stage .fd-slot { z-index: 60; --trench: linear-gradient(90deg, #000, color-mix(in srgb, #000 calc(var(--dark) * 90%), #141518) 45%, #000); background: linear-gradient(rgb(var(--fc) / calc(var(--dark) * .16)), rgb(var(--fc) / calc(var(--dark) * .16))), var(--trench); box-shadow: inset 0 1px 2px #000, 0 1px 0 rgb(255 255 255 / calc(.08 * (1 - var(--dark)))), 0 0 calc(var(--dark) * 3px) rgb(var(--fc) / calc(var(--dark) * .3)); }
#dj-stage .mx-fadebay .fd-slot { background: linear-gradient(90deg, transparent 1.25px, rgb(255 250 240 / calc(var(--dark) * .55)) 1.75px 2.25px, transparent 2.75px) 0 100% / 100% calc(var(--v, 0) * 100%) no-repeat, linear-gradient(to top, rgb(var(--fc) / calc(var(--dark) * .9)) 0 calc(var(--v, 0) * 100%), rgb(var(--fc) / calc(var(--dark) * .12)) 0), var(--trench); }
#dj-stage .dk-pitch .fd-slot { background: linear-gradient(transparent calc(50% - 1.5px), rgb(var(--fc) / calc(.35 + var(--dark) * .65)) 0 calc(50% + 1.5px), transparent 0), linear-gradient(rgb(var(--fc) / calc(var(--dark) * .12)), rgb(var(--fc) / calc(var(--dark) * .12))), var(--trench); }
#dj-stage .mx-xf .fd-slot { --trench: linear-gradient(#000, color-mix(in srgb, #000 calc(var(--dark) * 90%), #141518) 45%, #000); background: linear-gradient(90deg, transparent calc(50% - 1px), rgb(var(--fc) / calc(.3 + var(--dark) * .5)) 0 calc(50% + 1px), transparent 0), var(--trench); box-shadow: inset 0 1px 2px #000, 0 1px 0 rgb(255 255 255 / calc(.08 * (1 - var(--dark)))); }
/* black rubber caps on the channel faders and the crossfader: a ribbed top either side of the
   lit line, and a front face. They sit above the dark, so every layer dims itself with the room. */
#dj-stage .fd-cap {
  z-index: 61;
  --top: linear-gradient(color-mix(in srgb, #06070a calc(var(--dark) * 82%), #3b3c40), color-mix(in srgb, #06070a calc(var(--dark) * 82%), #1d1e21));
  --rib: rgb(255 255 255 / calc(.08 * (1 - var(--dark))));
  background: var(--top);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(.18 * (1 - var(--dark)))), inset 0 -2px 2px rgba(0,0,0,.5), 0 4px 0 color-mix(in srgb, #000 calc(var(--dark) * 80%), #121316), 0 5px 0 #000, 0 7px 4px rgba(0,0,0,.7);
}
#dj-stage .mx-fadebay .fd-cap { background: linear-gradient(var(--rib) 0 1px, transparent 1px 3px, var(--rib) 3px 4px, transparent 4px 9px, var(--rib) 9px 10px, transparent 10px 12px, var(--rib) 12px 13px) 3px 1px / calc(100% - 6px) 13px no-repeat, var(--top); }
#dj-stage .mx-xf .fd-cap { background: linear-gradient(90deg, var(--rib) 0 1px, transparent 1px 3px, var(--rib) 3px 4px) 2px 3px / 4px calc(100% - 6px) no-repeat, linear-gradient(90deg, var(--rib) 0 1px, transparent 1px 3px, var(--rib) 3px 4px) 14px 3px / 4px calc(100% - 6px) no-repeat, var(--top); }
/* the tempo cap stays silver, with two machined grooves either side of its line */
#dj-stage .dk-pitch .fd-cap {
  --groove: rgba(0,0,0,.3) 0 1px, rgb(255 255 255 / calc(.5 * (1 - var(--dark)))) 1px 2px, transparent 2px;
  background: linear-gradient(var(--groove)) 0 4px / 100% 2px no-repeat, linear-gradient(var(--groove)) 0 12px / 100% 2px no-repeat, linear-gradient(color-mix(in srgb, #0a0c12 calc(var(--dark) * (97% - var(--tl) * 22%)), #d8dadd), color-mix(in srgb, #0a0c12 calc(var(--dark) * (97% - var(--tl) * 22%)), #7d8086));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(.6 * (1 - var(--dark)))), inset 0 -2px 2px rgba(0,0,0,.3), 0 4px 0 color-mix(in srgb, #000 calc(var(--dark) * (97% - var(--tl) * 22%)), #55585e), 0 5px 0 #000, 0 7px 4px rgba(0,0,0,.7);
}
#dj-stage .fd-cap::after { background: color-mix(in srgb, rgb(var(--fc)) calc(var(--dark) * 100%), #e8e8e8); box-shadow: 0 0 calc(var(--dark) * 2px) rgb(var(--fc) / var(--dark)); }
#dj-stage .dk-pitch .fd-cap::after { background: rgb(var(--fc)); }

/* ---------- the booth in the dark ---------- */
/* The wall plane: the screen's light on the wall round its housing, and a monitor with a picture on
   it (dj.js sets --mona / --monb on this layer, 0 to 1) lights the shelf it stands on, just in
   front of it: no halo on the wall. */
#dj-stage > .room-dark {
  --room-light: radial-gradient(ellipse 520px 330px at 50% calc(50% - 274px), rgb(0 0 0 / .6) 0, rgb(0 0 0 / .84) 50%, #000 100%),
    radial-gradient(ellipse 175px 9px at calc(50% - 468px) calc(50% - 125px), rgb(0 0 0 / calc(1 - var(--mona, 0) * .55)) 0, rgb(0 0 0 / calc(1 - var(--mona, 0) * .25)) 55%, #000 100%),
    radial-gradient(ellipse 175px 9px at calc(50% + 468px) calc(50% - 125px), rgb(0 0 0 / calc(1 - var(--monb, 0) * .55)) 0, rgb(0 0 0 / calc(1 - var(--monb, 0) * .25)) 55%, #000 100%);
  -webkit-mask: var(--room-light);
  -webkit-mask-composite: source-in;
  mask: var(--room-light);
  mask-composite: intersect;
}
/* The unit and the counter: one dark layer over the whole plane (the counter, and the screen's
   housing above it: the clip), cut away (each mask layer is how much dark remains; intersected,
   they multiply) wherever light falls: the screen's light on its housing and the plate in front of
   it (the chin and the drum machine right under it), the monitors' on the deck heads below them,
   each deck lamp's pool on its platter (a platter with its lamp off goes dark: only the strobe's
   own red glow, above the dark, lights its arc), and the LED channel's along the front. Mask px =
   stage px + 400 across.
   --tla / --tlb: the deck lamps on (dj.js). */
.tbl-dark {
  position: absolute;
  left: -400px;
  top: 0;
  width: 2100px;
  height: 900px;
  z-index: 50;
  pointer-events: none;
  background: rgb(4 6 12 / var(--dark));
  transition: background .4s;
  clip-path: polygon(0 338px, 766px 338px, 766px 12px, 1334px 12px, 1334px 338px, 100% 338px, 100% 100%, 0 100%);
  --deck-light: radial-gradient(ellipse 560px 320px at 1050px 176px, rgb(0 0 0 / .62) 0, rgb(0 0 0 / .86) 50%, #000 100%),
    radial-gradient(ellipse 340px 120px at 1050px 346px, rgb(0 0 0 / .45) 0, rgb(0 0 0 / .75) 50%, #000 100%),
    radial-gradient(ellipse 300px 140px at 582px 338px, rgb(0 0 0 / calc(1 - var(--mona, 0) * .32)) 0, rgb(0 0 0 / calc(1 - var(--mona, 0) * .13)) 45%, #000 100%),
    radial-gradient(ellipse 300px 140px at 1518px 338px, rgb(0 0 0 / calc(1 - var(--monb, 0) * .32)) 0, rgb(0 0 0 / calc(1 - var(--monb, 0) * .13)) 45%, #000 100%),
    radial-gradient(circle 205px at 615px 702px, rgb(0 0 0 / calc(1 - var(--tla, 1) * .62)) 0, rgb(0 0 0 / calc(1 - var(--tla, 1) * .31)) 40%, rgb(0 0 0 / calc(1 - var(--tla, 1) * .1)) 72%, #000 100%),
    radial-gradient(circle 205px at 1485px 702px, rgb(0 0 0 / calc(1 - var(--tlb, 1) * .62)) 0, rgb(0 0 0 / calc(1 - var(--tlb, 1) * .31)) 40%, rgb(0 0 0 / calc(1 - var(--tlb, 1) * .1)) 72%, #000 100%),
    radial-gradient(circle 70px at 517px 799px, rgb(0 0 0 / calc(1 - var(--tla, 1) * .35)) 0, #000 100%),
    radial-gradient(circle 70px at 1583px 799px, rgb(0 0 0 / calc(1 - var(--tlb, 1) * .35)) 0, #000 100%),
    linear-gradient(to top, rgb(0 0 0 / .7) 0 9px, rgb(0 0 0 / .9) 13px, rgb(0 0 0 / .97) 19px, #000 26px);
  -webkit-mask: var(--deck-light);
  mask: var(--deck-light);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Light caught above the dark. The screen's backlight leaks round its glass: a close halo on the
   housing. The LED channel lights the unit's front face and the counter in front of it, violet.
   Each deck lamp catches the steel trim ring on the side toward it: a warm glint. They only show
   over the dark (plain alpha over near-black is the same as a screen blend, and much cheaper to
   composite), and all go with the room's dark. */
#dj-stage .lap-screen { box-shadow: 0 0 calc(var(--dark) * 7px) rgb(150 180 255 / calc(var(--dark) * .16)); }
.tbl-mat::before { content: ''; position: absolute; left: 0; right: 0; top: -7px; height: 7px; z-index: 58; pointer-events: none; background: linear-gradient(transparent, rgb(150 120 255 / .06) 3px, rgb(160 130 255 / .22)); opacity: var(--dark); }
.dk-jog::after {
  content: '';
  position: absolute;
  left: -3px;
  top: -3px;
  width: 322px;
  height: 322px;
  border-radius: 50%;
  z-index: 55;
  pointer-events: none;
  background: conic-gradient(from calc(var(--la) - 55deg), transparent 0, rgb(255 238 205 / .55) 55deg, transparent 110deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 3px), #000 0);
  mask: radial-gradient(circle closest-side, transparent calc(100% - 3px), #000 0);
  opacity: calc(var(--dark) * var(--tl));
}
/* The lamp on the record: grooves give a point light back as a still streak through the centre,
   toward the lamp and, weaker, away from it. Above the dark (the --ll streak in .dk-sheen is under
   it), and only on a loaded deck with its lamp on. Still: a highlight stays where the light is. */
.dk-jog::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 16px;
  width: 284px;
  height: 284px;
  border-radius: 50%;
  z-index: 55;
  pointer-events: none;
  display: none;
  background: conic-gradient(from calc(var(--la) - 6deg), transparent 0, rgb(255 232 196 / .03) 2deg, rgb(255 232 196 / .1) 4deg, rgb(255 236 206 / .36) 5.5deg 6.5deg, rgb(255 232 196 / .1) 8deg, rgb(255 232 196 / .03) 10deg, transparent 12deg 182deg, rgb(255 232 196 / .04) 184deg, rgb(255 236 206 / .13) 185.6deg 186.4deg, rgb(255 232 196 / .04) 188deg, transparent 190deg);
  -webkit-mask: radial-gradient(circle, transparent 0 76px, rgb(0 0 0 / .5) 84px, #000 100px 122px, rgb(0 0 0 / .55) 131px, transparent 137px);
  mask: radial-gradient(circle, transparent 0 76px, rgb(0 0 0 / .5) 84px, #000 100px 122px, rgb(0 0 0 / .55) 131px, transparent 137px);
  opacity: calc(var(--dark) * var(--tl));
}
.dk.loaded .dk-jog::before { display: block; }
/* The deck lamp's light is warm: a faint warm cast over the pool it lights (the pool itself is cut
   in the table's dark), strongest toward the lamp. Under every lit part (z 52). */
.dk::before { content: ''; position: absolute; inset: 0; z-index: 52; pointer-events: none; background: radial-gradient(circle 290px at var(--wx) 268px, rgb(255 196 132 / .1) 0, rgb(255 196 132 / .058) 28%, rgb(255 196 132 / .02) 62%, transparent 100%); opacity: calc(var(--dark) * var(--tl)); }
.dk-A { --wx: 142px; }
.dk-B { --wx: 264px; }
/* The screen's light falling on what's right under it: its own chin, and the top of the CR-8 insert,
   a cool cast that fades within a few px. And each monitor's light on the deck head in front of it,
   in the colour of its picture (dj.js sets --mon, how bright, and --monc on the head). None of these
   parents is a stacking context, so the layers stack over the table's dark, under the lit parts. */
.dj-pod::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 58; pointer-events: none; background: radial-gradient(ellipse 52% 100% at 50% 0, rgb(150 175 255 / calc(var(--dark) * .1)), transparent); }
.drum::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 64px; z-index: 58; pointer-events: none; border-radius: 3px 3px 0 0; background: radial-gradient(ellipse 58% 100% at 50% 0, rgb(150 175 255 / calc(var(--dark) * .13)), rgb(150 175 255 / calc(var(--dark) * .04)) 55%, transparent); }
.dk-head::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 80px; z-index: 58; pointer-events: none; background: radial-gradient(ellipse 70% 100% at var(--monx, 57%) 0, rgb(var(--monc, 200 215 255) / calc(var(--mon, 0) * var(--dark) * .12)), transparent); }
.dk-head-B { --monx: 43%; }