/* booth.css: the booth dialog (v2-spec F4). Two Technics-style decks, a two-channel mixer and a
   crossfader, full screen. Uses the tokens from site.css only; deck accents are --uv (Deck A, the
   blacklight) and --lamp (Deck B, the 1210 strobe lamp). Nothing here flashes: lit states on small
   controls ease over 150 ms or more, and the platter only turns (motion, never brightness). */

@property --dot { syntax: '<color>'; inherits: false; initial-value: transparent; }

dialog#booth.booth {
  --bt-a: var(--uv-soft);
  --bt-b: var(--lamp);
  --bt-panel: linear-gradient(180deg, color-mix(in srgb, var(--booth-2) 70%, var(--booth)) 0%, var(--booth) 100%);
  --bt-well: var(--mt-tt-record);
  --bt-edge: color-mix(in srgb, var(--ink) 9%, transparent);
  --bt-key: color-mix(in srgb, var(--booth-2) 80%, #000);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  font-family: var(--f-body);
  /* Opaque: the page behind stays out of the way; the room glow and beams (.bt-glow, .bt-lights) are the light. */
  background: var(--void);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--booth-2) transparent;
}
dialog#booth.booth::backdrop { background: rgb(var(--void-rgb) / .6); }

/* While the booth is open it covers the page, so the page's full-screen laser canvas cannot be seen
   and is not composited (measured here: 19 fps with it, 35 without). main.js tells lights.js the
   rig is covered (setCovered), so it stops drawing into it until the booth closes; the booth's own
   room glow and light rig (.bt-glow, .bt-beams), driven by the decks, are the light in here. */
html:has(dialog#booth[open]) #rig { visibility: hidden; }

/* The lead's boot placeholder, shown until booth.js has built the room. */
.booth-boot {
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.booth-boot .booth-title { margin: 0; font: var(--display-weight-head) clamp(1.75rem, 4vw, 2.75rem)/1 var(--f-display); letter-spacing: -.01em; }
.booth-boot-text { margin: 0; color: var(--smoke); font: 700 18px/1 var(--f-lcd); }

/* ---- frame --------------------------------------------------------------------------------- */

.bt {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 14px var(--edge) 28px;
  -webkit-user-select: none;
  user-select: none;
}
.bt *, .bt *::before, .bt *::after { box-sizing: border-box; }
/* The room glow behind the hardware: a real first child whose own opacity booth.js eases with the
   mix's energy. Writing the opacity on this one element restyles only it; the custom property the
   glow used to read on .bt was inherited, so every write restyled the whole booth each frame. */
.bt-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(75% 55% at 50% -8%, rgb(var(--uv-rgb) / .42), transparent 70%),
    radial-gradient(45% 40% at 18% 108%, rgb(var(--uv-rgb) / .16), transparent 70%),
    radial-gradient(45% 40% at 82% 108%, rgb(var(--lamp-rgb) / .16), transparent 70%);
  opacity: .28;
  will-change: opacity;
}

/* The booth's light rig: a truss across the top with six fixtures (static), and their beams. Deck
   A's three (UV, left) and Deck B's three (lamp, right) are one layer each, whose opacity booth.js
   eases with that deck's level after the crossfader (300 ms time constant: never a flash). Each
   layer covers only its three fixtures' span and the top 55% of the screen, where the beams fade
   out, and the truss is a 20 px strip: this machine's software compositor pays for every
   composited pixel each frame, and with full-screen layers the booth fell from about 55 fps to 45.
   Like this it holds what it did with the glow alone. The beams never move: only their brightness
   follows the mix, and under reduced motion they sit dim and steady. */
.bt-lights {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* The truss and the fixture housings: a 20 px strip, not a full-screen background (which this
   machine's compositor paid for on every frame). */
.bt-lights::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background:
    radial-gradient(5px 4px at 9% 12px, color-mix(in srgb, var(--ink) 30%, transparent) 60%, transparent),
    radial-gradient(5px 4px at 23% 12px, color-mix(in srgb, var(--ink) 30%, transparent) 60%, transparent),
    radial-gradient(5px 4px at 37% 12px, color-mix(in srgb, var(--ink) 30%, transparent) 60%, transparent),
    radial-gradient(5px 4px at 63% 12px, color-mix(in srgb, var(--ink) 30%, transparent) 60%, transparent),
    radial-gradient(5px 4px at 77% 12px, color-mix(in srgb, var(--ink) 30%, transparent) 60%, transparent),
    radial-gradient(5px 4px at 91% 12px, color-mix(in srgb, var(--ink) 30%, transparent) 60%, transparent),
    linear-gradient(180deg, transparent 7px, color-mix(in srgb, var(--smoke) 45%, transparent) 7px 9px, transparent 9px);
}
.bt-beams {
  position: absolute;
  top: 0;
  width: 36%;
  height: 55%;
  opacity: 0;
  will-change: opacity;
  /* Beams fade with their throw, so the hardware below stays readable. */
  -webkit-mask: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .5) 50%, transparent);
          mask: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .5) 50%, transparent);
}
/* Each layer spans 36% of the screen: A from 5% to 41%, B from 59% to 95%. Its fixtures (9%, 23%,
   37% and 63%, 77%, 91% of the screen) sit at 11.1%, 50% and 88.9% of the layer. */
.bt-beams-a {
  left: 5%;
  --beam: color-mix(in srgb, var(--uv) 38%, transparent);
  background:
    conic-gradient(from 160deg at 11.1% 12px, transparent 0deg, var(--beam) 3deg 13deg, transparent 16deg),
    conic-gradient(from 171deg at 50% 12px, transparent 0deg, var(--beam) 3deg 13deg, transparent 16deg),
    conic-gradient(from 184deg at 88.9% 12px, transparent 0deg, var(--beam) 3deg 13deg, transparent 16deg);
}
.bt-beams-b {
  right: 5%;
  --beam: color-mix(in srgb, var(--lamp) 32%, transparent);
  background:
    conic-gradient(from 160deg at 11.1% 12px, transparent 0deg, var(--beam) 3deg 13deg, transparent 16deg),
    conic-gradient(from 173deg at 50% 12px, transparent 0deg, var(--beam) 3deg 13deg, transparent 16deg),
    conic-gradient(from 184deg at 88.9% 12px, transparent 0deg, var(--beam) 3deg 13deg, transparent 16deg);
}

.bt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.bt-head-text { min-width: 0; }
.bt-title {
  margin: 0;
  font: var(--display-weight-hero) clamp(1.5rem, 3.2vw, 2.4rem)/1 var(--f-display);
  letter-spacing: -.015em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--ink) 0 55%, color-mix(in srgb, var(--uv) 60%, var(--ink)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bt-help { margin: 6px 0 0; max-width: 110ch; color: var(--smoke); font-size: .9375rem; line-height: 1.45; }
.bt-ios { margin: 6px 0 0; color: var(--lamp); font-size: .9375rem; font-weight: 600; }
.bt-close { flex: none; }

/* ---- the scope: two scrolling waveforms and the beat-phase strip ------------------------------ */

.bt-scope {
  position: relative;
  margin-bottom: 12px;
  padding: 6px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 10px);
  background:
    linear-gradient(180deg, rgb(var(--uv-rgb) / .06), transparent 40%, transparent 60%, rgb(var(--lamp-rgb) / .05)),
    var(--bt-well);
  box-shadow: inset 0 1px 0 var(--bt-edge), inset 0 0 24px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.bt-scope-canvas { display: block; width: 100%; height: 124px; }
.bt-scope-tag {
  position: absolute;
  left: 10px;
  z-index: 1;
  font: var(--display-weight-hero) .75rem/1 var(--f-display);
  letter-spacing: .04em;
}
.bt-scope-tag.bt-tag-a { top: 10px; }
.bt-scope-tag.bt-tag-b { bottom: 10px; }
.bt-tag-a { color: var(--bt-a); }
.bt-tag-b { color: var(--bt-b); }

/* ---- the room: deck A, deck B, mixer, crossfader ---------------------------------------------- */

.bt-rig {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "a b" "mix mix" "xf xf";
}
@media (min-width: 1100px) {
  .bt-rig {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px) minmax(0, 1fr);
    grid-template-areas: "a mix b" "a xf b";
    grid-template-rows: 1fr auto;
  }
}
.bt-deck[data-deck="a"] { grid-area: a; --acc: var(--bt-a); }
.bt-deck[data-deck="b"] { grid-area: b; --acc: var(--bt-b); }
.bt-mixer { grid-area: mix; }
.bt-xf { grid-area: xf; }

.bt-deck, .bt-mixer, .bt-xf {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius, 14px);
  background: var(--bt-panel);
  box-shadow: inset 0 1px 0 var(--bt-edge), 0 18px 40px -18px rgba(0, 0, 0, .8);
}

/* ---- deck ------------------------------------------------------------------------------------ */

.bt-deck {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}
.bt-deck-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bt-deck-label {
  flex: none;
  margin: 0;
  padding: 5px 9px 4px;
  border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent);
  border-radius: 6px;
  color: var(--acc);
  font: var(--display-weight-hero) .8125rem/1 var(--f-display);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bt-load { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.bt-load-k { flex: none; color: var(--smoke); font-size: .8125rem; font-weight: 600; }
.bt-select {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: 40px;
  padding: 0 32px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: 600 .875rem/1.2 var(--f-body);
  background:
    linear-gradient(45deg, transparent 50%, var(--smoke) 50%) calc(100% - 17px) 50% / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--smoke) 50%) calc(100% - 11px) 50% / 6px 6px no-repeat,
    var(--bt-well);
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
  cursor: pointer;
}
.bt-select:focus-visible { outline-offset: 1px; border-color: var(--uv); }
/* The loaded track's full title under the select, two lines at most (booth.js). Wide screens show
   the whole title in the select itself. */
.bt-now {
  display: none;
  margin: 0;
  color: var(--ink);
  font: 600 .8125rem/1.3 var(--f-body);
  overflow-wrap: anywhere;
}
@media (max-width: 959.98px) {
  .bt-deck-top { flex-direction: column; align-items: stretch; gap: 6px; }
  .bt-deck-label { align-self: flex-start; }
  .bt-load { flex-direction: column; align-items: stretch; gap: 4px; }
  .bt-now {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.6em;  /* two lines on both decks, so their readouts and platters stay level */
  }
}
.bt-select option { background: var(--booth); color: var(--ink); }

/* LCD */
.bt-lcd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--lcd-dots, none), var(--mt-bt-lcd);
  box-shadow: inset 0 0 0 1px rgb(var(--lamp-rgb) / .16), inset 0 2px 10px rgba(0, 0, 0, .7);
}
.bt-read { display: flex; align-items: baseline; gap: 7px; margin: 0; }
.bt-read-k { color: var(--smoke); font: 700 .6875rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.bt-read-v {
  color: var(--lamp);
  font: 900 22px/1 var(--f-lcd);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgb(var(--lamp-rgb) / .35);
}
.bt-read-time { margin-left: auto; }
.bt-remain { color: color-mix(in srgb, var(--lamp) 70%, var(--smoke)); }

/* The 1210: plinth, platter, tonearm, strobe lamp, pitch fader. Coordinates are the real deck's
   (453 x 353 mm), so the tonearm SVG and the platter line up at every size. */
.bt-tt {
  position: relative;
  width: 100%;
  max-width: min(100%, 560px);
  margin-inline: auto;
  aspect-ratio: 453 / 353;
  border-radius: 12px;
  background:
    repeating-linear-gradient(90deg, rgb(var(--ink-rgb) / .012) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 20% 0%, rgb(var(--ink-rgb) / .07), transparent 60%),
    linear-gradient(165deg, var(--mt-tt-platter-2), var(--mt-bt-tt) 60%, var(--mt-bt-tt-2));
  box-shadow:
    inset 0 1px 0 rgb(var(--ink-rgb) / .10),
    inset 0 -2px 0 rgba(0, 0, 0, .5),
    0 1px 0 rgba(0, 0, 0, .6),
    0 22px 40px -14px rgba(0, 0, 0, .85);
}

.bt-platter {
  position: absolute;
  left: 4.415%;
  top: 2.975%;
  width: 73.29%;
  aspect-ratio: 1;
  border-radius: 50%;
  touch-action: none;
  cursor: grab;
  -webkit-touch-callout: none;
  background:
    radial-gradient(circle closest-side, transparent 0 94%, rgba(0, 0, 0, .55) 97%, transparent 100%),
    conic-gradient(from 20deg, var(--mt-bt-platter), var(--mt-bt-platter-2) 12%, var(--mt-bt-platter-3) 30%, var(--mt-bt-platter-4) 47%, var(--mt-bt-platter-5) 62%, var(--mt-bt-platter-6) 80%, var(--mt-bt-platter));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 10px 24px rgba(0, 0, 0, .7);
}
.bt-platter.is-held { cursor: grabbing; }

.bt-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  will-change: transform;
}
/* Strobe dots on the platter rim (four rows on the real deck; two here). Lit by the lamp while the
   motor runs. */
.bt-dots {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  --dot: rgb(var(--ink-rgb) / .38);
  background:
    repeating-conic-gradient(var(--dot) 0 1.3deg, transparent 1.3deg 3.6deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 94.2%, #000 94.6% 96.2%, transparent 96.6% 97.4%, #000 97.8% 99.2%, transparent 99.6%);
  mask: radial-gradient(circle closest-side, transparent 0 94.2%, #000 94.6% 96.2%, transparent 96.6% 97.4%, #000 97.8% 99.2%, transparent 99.6%);
  transition: --dot .3s ease;
}
.bt-deck[data-playing="true"] .bt-dots { --dot: var(--lamp); }

.bt-vinyl {
  position: absolute;
  inset: 5.5%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, transparent 0 37%, rgb(var(--ink-rgb) / .06) 37.5% 38.2%, transparent 38.8% 58%, rgb(var(--ink-rgb) / .05) 58.3% 58.9%, transparent 59.4% 78%, rgb(var(--ink-rgb) / .05) 78.3% 78.9%, transparent 79.4% 96.5%, rgb(var(--ink-rgb) / .09) 97% 100%),
    repeating-radial-gradient(circle, var(--mt-bt-vinyl) 0 1.1px, var(--mt-bt-vinyl-2) 1.1px 2.3px);
  box-shadow: 0 0 0 1px #000, 0 2px 8px rgba(0, 0, 0, .7);
}
.bt-labelwrap {
  position: relative;
  width: 36%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--acc), color-mix(in srgb, var(--acc) 25%, var(--booth)) 75%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .55);
}
.bt-label {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.bt-label-letter { color: var(--void); font: var(--display-weight-hero) 1.4rem/1 var(--f-display); }
.bt-label:not([hidden]) + .bt-label-letter { visibility: hidden; }
/* The spindle */
.bt-labelwrap::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--mt-bt-labelwrap-after) 60%, var(--mt-bt-labelwrap-after-2));
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .6);
}
/* A reflection that stays put while the record turns under it. */
.bt-sheen {
  position: absolute;
  inset: 5.5%;
  border-radius: 50%;
  pointer-events: none;
  background:
    conic-gradient(from 212deg, transparent 0deg, rgb(var(--ink-rgb) / .12) 20deg, transparent 46deg 180deg, rgb(var(--ink-rgb) / .08) 202deg, transparent 228deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 36%, #000 39%);
  mask: radial-gradient(circle closest-side, transparent 0 36%, #000 39%);
}
/* Loading ring */
.bt-ring {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  border: 3px solid rgb(var(--ink-rgb) / .12);
  border-top-color: var(--acc);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.bt-deck[data-state="loading"] .bt-ring { opacity: 1; animation: bt-spin .9s linear infinite; }
.bt-deck[data-state="loading"] .bt-platter,
.bt-deck[data-state="error"] .bt-platter,
.bt-deck[data-state="empty"] .bt-platter { cursor: default; }
@keyframes bt-spin { to { transform: rotate(360deg); } }

/* Tonearm */
.bt-armsvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(-6px 10px 6px rgba(0, 0, 0, .55));
}
.bt-arm-base { fill: var(--mt-bt-tt-2); stroke: rgb(var(--ink-rgb) / .14); stroke-width: 1.5; }
.bt-arm-ring { fill: none; stroke: rgb(var(--ink-rgb) / .22); stroke-width: 3; }
.bt-arm-weight { fill: var(--mt-bt-arm-weight); stroke: rgb(var(--ink-rgb) / .28); stroke-width: 1.5; }
.bt-arm-tube { fill: none; stroke: var(--mt-bt-arm-tube); stroke-width: 6; stroke-linecap: round; }
.bt-arm-shell { fill: var(--smoke); stroke: rgba(0, 0, 0, .6); stroke-width: 1; }
.bt-arm-lift { fill: var(--mt-bt-arm-tube); }
.bt-arm-pivot { fill: var(--mt-bt-labelwrap-after-2); stroke: var(--mt-bt-arm-tube); stroke-width: 2; }

/* The pop-up strobe lamp, front left */
.bt-lamp {
  position: absolute;
  left: 2.4%;
  bottom: 4%;
  width: 4.2%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--mt-bt-platter), var(--mt-bt-lamp));
  box-shadow: 0 0 0 2px var(--mt-bt-tt-2), inset 0 0 0 1px rgb(var(--ink-rgb) / .15);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.bt-deck[data-playing="true"] .bt-lamp {
  background: radial-gradient(circle at 35% 30%, var(--mt-bt-lamp-2), var(--lamp) 60%);
  box-shadow: 0 0 0 2px var(--mt-bt-tt-2), 0 0 14px 3px rgb(var(--lamp-rgb) / .55);
}

/* Pitch fader, lower right as on the real deck (+ toward you) */
.bt-pitchwrap {
  position: absolute;
  right: 2.6%;
  top: 38%;
  bottom: 5%;
  width: 11%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bt-pitch-label, .bt-pitch-range {
  color: var(--smoke);
  font: 700 .6875rem/1 var(--f-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bt-pitch-range { text-transform: none; letter-spacing: .02em; }
.bt-pitch { flex: 1; min-height: 0; }

/* Keys */
.bt-keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.bt-key {
  position: relative;
  min-height: 44px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--booth-2) 85%, var(--ink) 6%), var(--bt-key));
  box-shadow: inset 0 1px 0 var(--bt-edge), 0 2px 0 rgba(0, 0, 0, .55);
  font: 700 .8125rem/1.1 var(--f-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .2s ease, transform .08s ease;
}
@media (hover: hover) {
  .bt-key:hover { border-color: color-mix(in srgb, var(--uv) 60%, transparent); }
}
.bt-key:active { transform: translateY(1px); box-shadow: inset 0 1px 0 var(--bt-edge), 0 1px 0 rgba(0, 0, 0, .55); }
.bt-key[aria-disabled="true"] { opacity: .45; cursor: default; }
.bt-key[aria-pressed="true"] {
  border-color: var(--lamp);
  color: var(--lamp);
  background: linear-gradient(180deg, rgb(var(--lamp-rgb) / .20), rgb(var(--lamp-rgb) / .08));
  box-shadow: inset 0 1px 0 rgb(var(--lamp-rgb) / .3), 0 0 14px -2px rgb(var(--lamp-rgb) / .5);
}
.bt-play {
  border-color: transparent;
  color: var(--void);
  background: linear-gradient(180deg, color-mix(in oklab, var(--lamp) 88%, var(--ink)), var(--lamp));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 var(--mt-bt-play), 0 0 0 0 rgb(var(--lamp-rgb) / 0);
}
.bt-deck[data-playing="true"] .bt-play {
  color: var(--lamp);
  background: linear-gradient(180deg, rgb(var(--lamp-rgb) / .22), rgb(var(--lamp-rgb) / .1));
  border-color: var(--lamp);
  box-shadow: inset 0 1px 0 rgb(var(--lamp-rgb) / .3), 0 0 16px -2px rgb(var(--lamp-rgb) / .55);
}
.bt-nudge-back::before, .bt-nudge-fwd::after {
  content: '';
  display: inline-block;
  width: .55em;
  height: .7em;
  background: currentColor;
  vertical-align: -.05em;
}
.bt-nudge-back::before { margin-right: .45em; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.bt-nudge-fwd::after { margin-left: .45em; clip-path: polygon(0 0, 100% 50%, 0 100%); }

.bt-loops { display: flex; align-items: center; gap: 6px; }
.bt-loops-k { flex: none; margin-right: 4px; color: var(--smoke); font: 700 .6875rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.bt-loop { flex: 1; min-height: 40px; font-family: var(--f-lcd); font-weight: 900; font-size: 18px; letter-spacing: 0; }
.bt-loop-off { font-family: var(--f-body); font-size: .75rem; font-weight: 700; letter-spacing: .07em; }

.bt-status { margin: 0; min-height: 1.3em; color: var(--smoke); font-size: .875rem; }
.bt-status.is-error { color: var(--lamp); font-weight: 600; }
.bt-status:empty { min-height: 0; margin-top: -10px; }

/* ---- mixer ----------------------------------------------------------------------------------- */

.bt-mixer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  align-content: start;
}
.bt-ch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 10px;
  background: rgb(var(--void-rgb) / .45);
  box-shadow: inset 0 0 0 1px var(--bt-edge);
}
.bt-ch[data-deck="a"] { --acc: var(--bt-a); }
.bt-ch[data-deck="b"] { --acc: var(--bt-b); }
.bt-ch-name {
  margin: 0;
  color: var(--acc);
  font: var(--display-weight-hero) 1rem/1 var(--f-display);
  text-align: center;
}
.bt-kills { display: grid; gap: 6px; }
.bt-kill {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--booth-2) 85%, var(--ink) 6%), var(--bt-key));
  box-shadow: inset 0 1px 0 var(--bt-edge);
  font: 700 .75rem/1 var(--f-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .2s ease;
}
.bt-kill[aria-pressed="true"] {
  border-color: var(--lamp);
  color: var(--lamp);
  background: linear-gradient(180deg, rgb(var(--lamp-rgb) / .22), rgb(var(--lamp-rgb) / .08));
  box-shadow: 0 0 12px -2px rgb(var(--lamp-rgb) / .5);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.bt-ctl-k {
  display: block;
  color: var(--smoke);
  font: 700 .6875rem/1 var(--f-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}
.bt-filterwrap { display: grid; gap: 6px; }
.bt-filter-ends { display: flex; justify-content: space-between; color: var(--smoke); font: 700 .625rem/1 var(--f-body); letter-spacing: .08em; }
.bt-fadercol {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr auto;
  justify-content: center;
  column-gap: 10px;
  row-gap: 6px;
}
.bt-meter {
  --lv: 0;
  position: relative;
  width: 8px;
  height: 150px;
  border-radius: 2px;
  background: repeating-linear-gradient(to top, rgb(var(--ink-rgb) / .10) 0 11px, transparent 11px 15px);
}
.bt-meter::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--uv) 0 58%, var(--ink) 58% 78%, var(--lamp) 78%);
  -webkit-mask: repeating-linear-gradient(to top, #000 0 11px, transparent 11px 15px);
  mask: repeating-linear-gradient(to top, #000 0 11px, transparent 11px 15px);
  clip-path: inset(calc((10 - var(--lv)) * 10%) 0 0 0);
}
.bt-vol-k { grid-column: 1 / -1; }

/* ---- crossfader ------------------------------------------------------------------------------ */

.bt-xf {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 14px;
}
.bt-xf-row { display: flex; align-items: center; gap: 10px; }
.bt-xf-end { flex: none; font: var(--display-weight-hero) 1rem/1 var(--f-display); }
.bt-xfader { flex: 1; min-width: 0; }
.bt-curve {
  align-self: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--bt-well);
  font: 700 .8125rem/1 var(--f-body);
  letter-spacing: .04em;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .15s ease, color .15s ease;
}
.bt-curve[data-curve="scratch"] { border-color: var(--lamp); color: var(--lamp); }

/* ---- ranges: fader caps on dark slots -------------------------------------------------------- */

.bt input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
.bt input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--mt-bt-range-track);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 3px rgba(0, 0, 0, .9);
}
.bt input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--mt-bt-range-track);
  box-shadow: inset 0 0 0 1px var(--line);
}
.bt input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 30px;
  margin-top: -12px;
  border: 0;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 7px, var(--acc, var(--lamp)) 7px 11px, transparent 11px),
    linear-gradient(180deg, var(--mt-tt-arm-bar-2), var(--mt-bt-range-thumb));
  box-shadow: 0 2px 5px rgba(0, 0, 0, .7), inset 0 1px 0 #fff;
}
.bt input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 30px;
  border: 0;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 7px, var(--acc, var(--lamp)) 7px 11px, transparent 11px),
    linear-gradient(180deg, var(--mt-tt-arm-bar-2), var(--mt-bt-range-thumb));
  box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
}
.bt input[type="range"]:focus-visible { outline: 2px solid var(--uv); outline-offset: 4px; border-radius: 4px; }
.bt-xfader { height: 40px; --acc: var(--ink); }
.bt-filter { height: 34px; }
/* Horizontal ranges let a vertical swipe scroll the booth (booth.js holds the value back until the
   gesture proves horizontal, and puts it back if the browser takes it as a scroll). The vertical
   channel faders, the desktop pitch fader and the platters keep touch-action: none (F4). */
.bt input.bt-xfader[type="range"], .bt input.bt-filter[type="range"] { touch-action: pan-y; }

/* Vertical faders: pitch (1210: minus at the top, plus toward you) and channel volume (up is loud) */
.bt-pitch, .bt-fader {
  writing-mode: vertical-lr;
  width: 34px;
}
.bt-fader { direction: rtl; height: 150px; }
.bt-pitch::-webkit-slider-runnable-track, .bt-fader::-webkit-slider-runnable-track { width: 6px; height: auto; }
.bt-pitch::-moz-range-track, .bt-fader::-moz-range-track { width: 6px; height: auto; }
.bt-pitch::-webkit-slider-thumb, .bt-fader::-webkit-slider-thumb {
  width: 30px;
  height: 18px;
  margin-top: 0;
  margin-left: -12px;
  background:
    linear-gradient(180deg, transparent 0 7px, var(--acc, var(--lamp)) 7px 11px, transparent 11px),
    linear-gradient(90deg, var(--mt-tt-arm-bar-2), var(--mt-bt-range-thumb));
}
.bt-pitch::-moz-range-thumb, .bt-fader::-moz-range-thumb {
  width: 30px;
  height: 18px;
  background:
    linear-gradient(180deg, transparent 0 7px, var(--acc, var(--lamp)) 7px 11px, transparent 11px),
    linear-gradient(90deg, var(--mt-tt-arm-bar-2), var(--mt-bt-range-thumb));
}

/* ---- phones and small tablets ----------------------------------------------------------------- */

@media (min-width: 1100px) {
  /* Fit the whole booth in one desktop screen: the plinth gives way to the viewport's height. */
  .bt-tt {
    max-width: min(100%, max(320px, (100vh - 480px) * 1.2833));
    max-width: min(100%, max(320px, (100dvh - 480px) * 1.2833));
  }
  .bt-head { align-items: center; }
  .bt-head-text { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 22px; row-gap: 4px; }
  .bt-help { margin: 0; }
  /* A tall mixer: the channel faders take the column's height, like the real thing. */
  .bt-mixer { align-content: stretch; }
  .bt-fadercol { flex: 1; min-height: 160px; }
  .bt-meter, .bt-fader { height: 100%; min-height: 150px; }
}

/* A laptop's real browser viewport (1440 x 789, 1536 x 730, 1366 x 768) is shorter than the room
   above allows for: tighten the furniture so the decks, the mixer and the crossfader all fit on one
   screen. booth.js draws an 86 px scope here to match. */
@media (min-width: 1100px) and (max-height: 880px) {
  .bt { padding-bottom: 12px; }
  .bt-head, .bt-scope { margin-bottom: 8px; }
  .bt-rig { gap: 10px; }
  .bt-deck { gap: 8px; }
  .bt-kill { min-height: 32px; }
  .bt-fadercol { min-height: 100px; }
  .bt-meter, .bt-fader { min-height: 96px; }
  .bt-xf { padding: 8px 14px; gap: 6px; }
  .bt-curve { min-height: 34px; }
  .bt-tt {
    max-width: min(100%, max(240px, (100vh - 520px) * 1.2833));
    max-width: min(100%, max(240px, (100dvh - 520px) * 1.2833));
  }
}

@media (max-width: 1099px) {
  .bt-mixer { grid-template-columns: 1fr 1fr; }
  .bt-ch { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; }
  .bt-ch-name { grid-row: 1 / 3; }
  .bt-kills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bt-filterwrap { grid-column: 2; }
  .bt-fadercol { grid-column: 3; grid-row: 1 / 3; }
  .bt-meter { height: 110px; }
  .bt-fader { height: 110px; }
}

@media (max-width: 719px) {
  .bt { padding: 10px 12px 24px; }
  .bt-head { gap: 10px; margin-bottom: 8px; }
  .bt-help { font-size: .8125rem; margin-top: 6px; }
  .bt-close { --btn-h: 40px; padding: 0 12px; font-size: .8125rem; }
  .bt-scope { margin-bottom: 8px; padding: 4px 0; }
  .bt-scope-tag { left: 6px; font-size: .6875rem; }
  .bt-scope-tag.bt-tag-a { top: 6px; }
  .bt-scope-tag.bt-tag-b { bottom: 6px; }
  .bt-rig { gap: 8px; }
  .bt-deck { padding: 8px; gap: 8px; }
  .bt-deck-top { flex-direction: column; align-items: stretch; gap: 6px; }
  .bt-deck-label { align-self: flex-start; }
  .bt-load { flex-direction: column; align-items: stretch; gap: 4px; }
  .bt-load-k { font-size: .75rem; }
  .bt-select { min-height: 40px; font-size: .8125rem; padding-left: 8px; }
  .bt-lcd { padding: 6px 8px; gap: 4px 10px; }
  /* Each reading keeps its label (BPM, Pitch, Time), stacked over the value. */
  .bt-read { flex-direction: column; align-items: flex-start; gap: 2px; }
  .bt-read-k { font-size: .625rem; letter-spacing: .08em; }
  .bt-read-v { font-size: 18px; }
  .bt-read-time { margin-left: 0; display: grid; grid-template-columns: auto auto; column-gap: 8px; row-gap: 2px; }
  .bt-read-time .bt-read-k { grid-column: 1 / -1; }
  .bt-now { font-size: .75rem; }
  /* No plinth on a phone: the platter takes the column's full width (at least 150 px). */
  .bt-tt {
    aspect-ratio: auto;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: none;
    box-shadow: none;
  }
  .bt-platter { position: relative; left: auto; top: auto; width: 100%; }
  .bt-armsvg, .bt-lamp { display: none; }
  .bt-pitchwrap { position: static; width: 100%; flex-direction: row; gap: 6px; }
  .bt-pitch { writing-mode: horizontal-tb; width: auto; height: 34px; flex: 1; min-width: 0; }
  .bt-pitch::-webkit-slider-runnable-track { width: auto; height: 6px; }
  .bt-pitch::-moz-range-track { width: auto; height: 6px; }
  .bt-pitch::-webkit-slider-thumb {
    width: 18px; height: 30px; margin-left: 0; margin-top: -12px;
    background:
      linear-gradient(90deg, transparent 0 7px, var(--acc, var(--lamp)) 7px 11px, transparent 11px),
      linear-gradient(180deg, var(--mt-tt-arm-bar-2), var(--mt-bt-range-thumb));
  }
  .bt-pitch::-moz-range-thumb {
    width: 18px; height: 30px;
    background:
      linear-gradient(90deg, transparent 0 7px, var(--acc, var(--lamp)) 7px 11px, transparent 11px),
      linear-gradient(180deg, var(--mt-tt-arm-bar-2), var(--mt-bt-range-thumb));
  }
  .bt-pitch-range { display: none; }
  .bt-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .bt-key { font-size: .6875rem; letter-spacing: .05em; padding: 0 4px; }
  .bt-play, .bt-keys > [id$="-backspin"] { grid-column: 1 / -1; }
  .bt-loops { gap: 4px; flex-wrap: wrap; }
  .bt-loops-k { width: 100%; margin: 0 0 2px; }
  .bt-loop { min-height: 40px; padding: 0; font-size: 16px; }
  .bt-loop-off { font-size: .625rem; }
  .bt-mixer { padding: 8px; gap: 8px; }
  .bt-ch { grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 8px; padding: 8px 6px; }
  .bt-ch-name { grid-row: auto; grid-column: 1 / -1; }
  .bt-kills { grid-column: 1; grid-template-columns: 1fr; gap: 5px; }
  .bt-kill { min-height: 36px; font-size: .6875rem; }
  .bt-filterwrap { grid-column: 1 / -1; grid-row: auto; }
  .bt-fadercol { grid-column: 2; grid-row: 2; }
  .bt-meter, .bt-fader { height: 124px; }
  .bt-xf { padding: 10px; }
  .bt-xfader { height: 48px; }
}

@media (max-width: 719px) {
  /* The phone pitch fader is horizontal: a vertical swipe on it scrolls the booth. */
  .bt input.bt-pitch[type="range"] { touch-action: pan-y; }
}

/* Touch: the 36 to 40 px keys reach 44 px (or as near as the gaps between them allow) through
   transparent boxes, so the one-screen layout keeps its size. An input cannot carry a pseudo
   element, so the phone pitch fader's box grows instead, with a matching negative margin. */
@media (pointer: coarse) {
  .bt-close { position: relative; }
  .bt-close::after, .bt-loop::after, .bt-kill::after { content: ""; position: absolute; }
  .bt-close::after { inset: -2px 0; }
  .bt-loop::after { inset: -2px -2px; }
  .bt-kill { position: relative; }
  .bt-kill::after { inset: -2px 0; }
}
@media (pointer: coarse) and (max-width: 719px) {
  .bt-pitch { height: 44px; margin-block: -5px; }
}

/* 360 px Androids: trim the frame so each platter stays at least 150 px wide (F4). */
@media (max-width: 379.98px) {
  .bt { padding-inline: 8px; }
  .bt-deck { padding: 6px; }
}

/* Phone landscape: the title, help and scope give way so the platters show on opening. booth.js
   draws a 52 px scope here. */
@media (max-height: 500px) {
  .bt { padding-top: 8px; }
  .bt-head { margin-bottom: 4px; }
  .bt-title { font-size: 1.25rem; }
  .bt-help { font-size: .75rem; margin-top: 2px; }
  .bt-scope { margin-bottom: 6px; padding: 2px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-deck[data-state="loading"] .bt-ring { animation: none; border-color: var(--acc); opacity: .6; }
  .bt-key, .bt-kill, .bt-curve { transition: none; }
}

@media (forced-colors: active) {
  .bt-key, .bt-kill, .bt-curve, .bt-select { border: 1px solid ButtonText; }
  .bt-key[aria-pressed="true"], .bt-kill[aria-pressed="true"] { outline: 2px solid Highlight; }
}