/*
 * Brasswater Gauge — a steampunk skin for Video.js v10 (HTML)
 * © 2026 Sans Fin. Apache License 2.0.
 *
 * Public properties (same as the packaged Video.js skins):
 *   --media-accent-color        liquid colour in the tube and lamps (default: Brasswater teal)
 *   --media-border-radius       outer corner radius
 *   --media-font-family         interface text font
 *   --media-object-fit / --media-object-position
 *   --media-scale-unit          base size for spacing, icons and text
 * Theme: dark (oiled iron) by default; light (parchment & polished brass)
 * with data-bw-theme="light" on the skin or any ancestor.
 */

/* ------------------------------------------------------------ tokens */
.bw-gauge {
  --_u: var(--media-scale-unit, 16px);
  --_water: var(--media-accent-color, #4fd9cc);
  --_water-deep: color-mix(in srgb, var(--_water) 45%, #06302c);
  --_water-light: color-mix(in srgb, var(--_water) 40%, white);
  --_ink: #1a120a;
  --_cream: #f2e6d0;
  --_paper: #e9dcc0;
  --_red: #b5371e;
  --_brass-hi: #fff0b8;
  --_brass: #d9ad55;
  --_brass-mid: #b8862f;
  --_brass-lo: #7a5420;
  --_brass-dk: #4a3110;
  --_plate: #2a211b;
  --_plate-2: #1c1612;
  --_text: #f2e6d0;
  --_muted: #c9b48a;
  --_serif: "Vollkorn", Georgia, serif;
  --_label: "Arsenal SC", "Vollkorn", Georgia, serif;
  --_digits: "Courier Prime", ui-monospace, monospace;
  --_font: var(--media-font-family, var(--_label));
  --_key: calc(var(--_u) * 2.75);
  --_metal: linear-gradient(180deg, var(--_brass-hi) 0%, var(--_brass) 16%, var(--_brass-mid) 45%, var(--_brass-lo) 58%, var(--_brass) 80%, var(--_brass-mid) 100%);
  --_metal-x: linear-gradient(90deg, var(--_brass-lo) 0%, var(--_brass) 18%, var(--_brass-hi) 34%, var(--_brass-mid) 55%, var(--_brass-lo) 75%, var(--_brass) 100%);
  --_rivet: radial-gradient(circle at 35% 32%, #fff6d6 0 12%, var(--_brass) 35%, var(--_brass-lo) 62%, transparent 70%);

  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  color: var(--_text);
  font-family: var(--_font);
  border-radius: var(--media-border-radius, calc(var(--_u) * 0.9));
  background:
    radial-gradient(ellipse at 30% 0%, rgb(255 255 255 / 0.06), transparent 60%),
    linear-gradient(180deg, var(--_plate), var(--_plate-2));
  box-shadow:
    inset 0 0 0 3px var(--_brass-lo),
    inset 0 0 0 5px var(--_brass),
    inset 0 0 0 7px var(--_brass-dk),
    0 calc(var(--_u) * 0.8) calc(var(--_u) * 1.6) rgb(0 0 0 / 0.55);
  padding: calc(var(--_u) * 1.1);
  container: bw / inline-size;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.bw-gauge:fullscreen { padding: calc(var(--_u) * 1.4); align-content: center; border-radius: 0; }

/* corner rivets on the housing */
.bw-gauge::before {
  content: "";
  position: absolute;
  inset: calc(var(--_u) * 0.35);
  pointer-events: none;
  background:
    var(--_rivet) left top / calc(var(--_u) * 0.9) calc(var(--_u) * 0.9) no-repeat,
    var(--_rivet) right top / calc(var(--_u) * 0.9) calc(var(--_u) * 0.9) no-repeat,
    var(--_rivet) left bottom / calc(var(--_u) * 0.9) calc(var(--_u) * 0.9) no-repeat,
    var(--_rivet) right bottom / calc(var(--_u) * 0.9) calc(var(--_u) * 0.9) no-repeat;
}

/* ------------------------------------------------------------ screen */
.bw-gauge > video,
.bw-gauge > media-poster,
.bw-screen-frame,
.bw-glass,
.bw-gauge > .bw-overlay {
  grid-area: 1 / 1;
}
.bw-gauge > video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: var(--media-object-fit, cover);
  object-position: var(--media-object-position, center);
  background: #0c0907;
  border-radius: calc(var(--_u) * 0.5);
}
.bw-gauge:fullscreen > video { max-height: calc(100vh - 12rem); }
.bw-gauge > media-poster { z-index: 1; transition: opacity 0.4s; border-radius: calc(var(--_u) * 0.5); overflow: hidden; }
.bw-gauge > media-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bw-gauge > media-poster:not([data-visible]) { opacity: 0; pointer-events: none; }

/* thick brass bezel with rivets, drawn over the edge of the picture */
.bw-screen-frame {
  z-index: 3;
  margin: calc(var(--_u) * -0.55);
  border-radius: calc(var(--_u) * 0.8);
  padding: calc(var(--_u) * 0.75);
  background:
    radial-gradient(circle, #fff3c8 0 0.9px, var(--_brass-lo) 1.6px, transparent 2.6px) 0 0 / calc(var(--_u) * 1.5) calc(var(--_u) * 1.5),
    var(--_metal);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  box-shadow: inset 0 0 0 1px var(--_brass-dk);
  pointer-events: none;
}
/* inner shadow + curved glass sheen */
.bw-glass {
  z-index: 2;
  pointer-events: none;
  border-radius: calc(var(--_u) * 0.5);
  box-shadow: inset 0 0 calc(var(--_u) * 1.2) rgb(0 0 0 / 0.6), inset 0 0 0 2px rgb(0 0 0 / 0.6);
  background:
    linear-gradient(115deg, rgb(255 255 255 / 0.07) 0 12%, transparent 24% 76%, rgb(255 255 255 / 0.03) 88%),
    radial-gradient(ellipse at 50% 120%, rgb(255 210 140 / 0.10), transparent 60%);
}

/* overlay layer holds the big valve, gauges and plates on the picture */
.bw-overlay { position: relative; z-index: 4; pointer-events: none; }
.bw-overlay > * { pointer-events: auto; }

/* nameplate OSD, top-left of the picture */
.bw-osd {
  position: absolute;
  top: calc(var(--_u) * 0.9);
  left: calc(var(--_u) * 1);
  padding: calc(var(--_u) * 0.25) calc(var(--_u) * 0.7);
  font: 600 calc(var(--_u) * 0.8) / 1.2 var(--_serif);
  letter-spacing: 0.12em;
  color: var(--_brass-dk);
  text-shadow: 0 1px 0 rgb(255 240 190 / 0.6);
  background: var(--_metal);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.6), inset 0 0 0 1px var(--_brass-lo);
  pointer-events: none;
  transition: opacity 0.3s;
}
.bw-gauge:has(.bw-play:not([data-paused])) .bw-osd { opacity: 0; }

/* big hand-wheel valve: "open the valve" to start */
.bw-valve {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--_u) * 0.8);
  border: 0;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / 0.35), transparent 65%);
  color: inherit;
  cursor: pointer;
}
.bw-valve svg {
  width: calc(var(--_u) * 7);
  height: calc(var(--_u) * 7);
  filter: drop-shadow(0 6px 6px rgb(0 0 0 / 0.6));
  transition: rotate 0.6s cubic-bezier(.3, 1.4, .5, 1);
}
.bw-valve:hover svg { rotate: 35deg; }
.bw-valve:active svg { rotate: 90deg; }
.bw-valve__label {
  padding: calc(var(--_u) * 0.3) calc(var(--_u) * 0.9);
  font: 700 calc(var(--_u) * 0.8) / 1.2 var(--_label);
  letter-spacing: 0.14em;
  color: var(--_brass-dk);
  background: var(--_metal);
  border-radius: 3px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 0.6), inset 0 0 0 1px var(--_brass-lo);
}
.bw-valve[data-ended] .bw-valve__label::after { content: " AGAIN"; }
.bw-valve:focus-visible { outline: none; }
.bw-valve:focus-visible svg { outline: 3px solid var(--_water); outline-offset: 6px; border-radius: 50%; }
.bw-valve:not([data-paused]) { display: none; }

/* buffering: a gear turns while pressure builds */
.bw-pressure {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--_u) * 0.7);
  font: 700 calc(var(--_u) * 0.75) / 1 var(--_label);
  letter-spacing: 0.16em;
  color: var(--_cream);
  text-shadow: 0 2px 4px #000;
  background: rgb(10 7 4 / 0.45);
  pointer-events: none;
}
.bw-pressure img { width: calc(var(--_u) * 4); animation: bw-spin 2.4s linear infinite; }
.bw-pressure:not([data-visible]) { display: none; }

/* hotkey feedback: a brass tag in the top-right corner */
.bw-tag {
  position: absolute;
  top: calc(var(--_u) * 0.9);
  right: calc(var(--_u) * 1);
  padding: calc(var(--_u) * 0.3) calc(var(--_u) * 0.7);
  font: 700 calc(var(--_u) * 0.75) / 1 var(--_label);
  letter-spacing: 0.12em;
  color: var(--_brass-dk);
  background: var(--_metal);
  border-radius: 3px;
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.6);
  transition: opacity 0.2s;
  pointer-events: none;
}
.bw-tag:not([data-open]), .bw-tag[data-starting-style], .bw-tag[data-ending-style] { opacity: 0; }
media-volume-indicator.bw-tag::before { content: "PRESSURE "; }
media-volume-indicator.bw-tag[data-level="off"]::before { content: "VALVE SHUT"; }
media-volume-indicator.bw-tag[data-level="off"] media-volume-indicator-fill { display: none; }
.bw-tag media-volume-indicator-fill { display: inline; }
.bw-tag[data-direction="backward"]::before { content: "◂◂ "; }
.bw-tag[data-direction="forward"]::after { content: " ▸▸"; }

/* error: "pipe burst" plate */
.bw-burst {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--_u) * 0.7);
  padding: calc(var(--_u) * 1.5);
  text-align: center;
  background: radial-gradient(ellipse, rgb(40 20 10 / 0.85), rgb(10 6 3 / 0.95));
}
.bw-burst:not([data-open]) { display: none; }
.bw-burst media-dialog-title { font: 700 calc(var(--_u) * 1.3) / 1.2 var(--_serif); color: var(--_brass); letter-spacing: 0.06em; }
.bw-burst media-dialog-title::before { content: "PIPE BURST · "; }
.bw-burst media-dialog-description { max-width: 40ch; font: 400 calc(var(--_u) * 0.95) / 1.45 var(--_serif); color: var(--_cream); }
.bw-burst media-dialog-close {
  font: 700 calc(var(--_u) * 0.75) / 1 var(--_label);
  letter-spacing: 0.12em;
  padding: calc(var(--_u) * 0.5) calc(var(--_u) * 1);
  color: var(--_brass-dk);
  background: var(--_metal);
  border-radius: 3px;
  cursor: pointer;
}
.bw-burst media-dialog-close:focus-visible { outline: 3px solid var(--_water); outline-offset: 3px; }

/* ------------------------------------------------------------ console */
.bw-gauge > media-controls { grid-area: 2 / 1; display: block; margin-top: calc(var(--_u) * 1.3); }
.bw-console {
  position: relative;
  display: grid;
  gap: calc(var(--_u) * 0.9);
  padding: calc(var(--_u) * 0.9) calc(var(--_u) * 1.1) calc(var(--_u) * 1);
  border-radius: calc(var(--_u) * 0.6);
  background:
    radial-gradient(circle, rgb(255 255 255 / 0.04) 1px, transparent 1.5px) 0 0 / 5px 5px,
    linear-gradient(180deg, #3a2a1c, #22180f);
  box-shadow:
    inset 0 0 0 2px var(--_brass-lo),
    inset 0 0 0 4px var(--_brass),
    inset 0 0 0 6px var(--_brass-dk),
    inset 0 calc(var(--_u) * 0.6) calc(var(--_u) * 1) rgb(0 0 0 / 0.45);
}
.bw-row { display: flex; align-items: center; gap: calc(var(--_u) * 0.7); min-width: 0; }
.bw-spacer { flex: 1; }

/* glass-tube timeline with water */
.bw-tube {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(var(--_u) * 2.2);
  margin-inline: calc(var(--_u) * 0.9);
  cursor: pointer;
  touch-action: none;
}
.bw-tube::before,
.bw-tube::after {   /* brass couplings at both ends */
  content: "";
  position: absolute;
  z-index: 2;
  width: calc(var(--_u) * 1.1);
  height: calc(var(--_u) * 2.2);
  background: var(--_metal-x);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--_brass-dk), 0 2px 3px rgb(0 0 0 / 0.6);
  pointer-events: none;
}
.bw-tube::before { left: calc(var(--_u) * -1); }
.bw-tube::after { right: calc(var(--_u) * -1); }
.bw-tube-track {
  position: absolute;
  inset-inline: 0;
  height: calc(var(--_u) * 1.25);
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.28) 0 16%, transparent 30% 72%, rgb(255 255 255 / 0.10) 86%),
    rgb(18 28 28 / 0.75);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.12);
}
.bw-tube-buffer,
.bw-tube-fill { position: absolute; inset-block: 0; left: 0; }
.bw-tube-buffer { width: var(--media-slider-buffer); background: rgb(79 217 204 / 0.14); }
.bw-tube-fill {
  width: var(--media-slider-fill);
  background:
    radial-gradient(circle, rgb(255 255 255 / 0.55) 0 1.5px, transparent 2.2px) 0 0 / 22px 13px,
    radial-gradient(circle, rgb(255 255 255 / 0.35) 0 1px, transparent 1.6px) 9px 6px / 31px 11px,
    linear-gradient(180deg, var(--_water-light) 0%, var(--_water) 38%, var(--_water-deep) 100%);
  box-shadow: 0 0 calc(var(--_u) * 0.8) color-mix(in srgb, var(--_water) 60%, transparent);
}
.bw-gauge:has(.bw-play:not([data-paused])) .bw-tube-fill { animation: bw-bubbles 1.8s linear infinite; }
@keyframes bw-bubbles { to { background-position: 44px 0, 40px 6px, 0 0; } }
.bw-tube-thumb {   /* sliding brass collar */
  position: absolute;
  left: var(--media-slider-fill);
  z-index: 3;
  width: calc(var(--_u) * 0.75);
  height: calc(var(--_u) * 2);
  translate: -50% 0;
  background: var(--_metal-x);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--_brass-dk), 0 2px 4px rgb(0 0 0 / 0.7);
}
.bw-tube-thumb:focus-visible { outline: 3px solid var(--_water); outline-offset: 3px; }
.bw-tube-preview {
  position: absolute;
  bottom: calc(100% + var(--_u) * 0.3);
  left: var(--media-slider-pointer, 0%);
  translate: -50% 0;
  padding: calc(var(--_u) * 0.25) calc(var(--_u) * 0.5);
  font: 700 calc(var(--_u) * 0.8) / 1 var(--_digits);
  color: var(--_ink);
  background: var(--_cream);
  border-radius: 3px;
  box-shadow: 0 0 0 2px var(--_brass), 0 3px 6px rgb(0 0 0 / 0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.bw-tube[data-pointing] .bw-tube-preview { opacity: 1; }

/* brass keys with dark glass faces */
.bw-key {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--_key);
  height: var(--_key);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--_cream);
  font: 700 calc(var(--_u) * 0.75) / 1 var(--_label);
  cursor: pointer;
  background:
    radial-gradient(circle at 40% 30%, rgb(255 255 255 / 0.18), transparent 45%),
    radial-gradient(circle, #2b2119 0 60%, #120d09 100%);
  box-shadow:
    0 0 0 3px var(--_brass),
    0 0 0 4px var(--_brass-dk),
    0 0 0 5px var(--_brass-hi),
    0 3px 6px 4px rgb(0 0 0 / 0.55);
  transition: translate 0.06s, color 0.15s, box-shadow 0.15s;
}
.bw-key svg { width: 46%; height: 46%; filter: drop-shadow(0 1px 0 #000); }
.bw-key:hover { color: var(--_water); }
.bw-key:active { translate: 0 2px; }
.bw-key:focus-visible { outline: 3px solid var(--_water); outline-offset: 7px; }
.bw-key[data-hidden], .bw-key[data-availability="unsupported"] { display: none; }
.bw-key[data-disabled] { opacity: 0.45; cursor: default; }

/* the play key is a polished brass valve cap */
.bw-key--play {
  width: calc(var(--_key) * 1.3);
  height: calc(var(--_key) * 1.3);
  color: var(--_ink);
  background:
    radial-gradient(circle at 38% 30%, var(--_brass-hi) 0 12%, transparent 40%),
    conic-gradient(from 20deg, var(--_brass-mid), var(--_brass-hi), var(--_brass), var(--_brass-lo), var(--_brass), var(--_brass-hi), var(--_brass-mid));
  box-shadow: 0 0 0 2px var(--_brass-dk), 0 0 0 5px #120d09, 0 0 0 6px var(--_brass-lo), 0 4px 8px 4px rgb(0 0 0 / 0.6);
}
.bw-key--play svg { filter: drop-shadow(0 1px 0 rgb(255 240 190 / 0.7)); }
.bw-key--play:hover { color: var(--_brass-dk); }

.bw-key--play:not([data-paused]) .when-paused,
.bw-key--play[data-paused] .when-playing,
.bw-key--play:not([data-ended]) .when-ended,
.bw-key--play[data-ended] .when-paused,
.bw-key--mute:not([data-muted]) .when-muted,
.bw-key--mute[data-muted] .when-unmuted,
.bw-key--fs:not([data-fullscreen]) .when-fs,
.bw-key--fs[data-fullscreen] .when-not-fs { display: none; }
.bw-key--cc[data-active] { color: var(--_water); box-shadow: 0 0 0 3px var(--_brass), 0 0 0 4px var(--_brass-dk), 0 0 12px 5px color-mix(in srgb, var(--_water) 50%, transparent); }
.bw-key--seek span { position: absolute; bottom: 18%; font: 700 calc(var(--_u) * 0.55) / 1 var(--_digits); }
.bw-key--seek svg { translate: 0 -14%; width: 38%; }
.bw-key--rate::after { content: attr(data-rate) "×"; font: 700 calc(var(--_u) * 0.7) / 1 var(--_digits); }

/* mechanical counter: digits on dark drums */
.bw-counter {
  display: flex;
  align-items: center;
  gap: calc(var(--_u) * 0.45);
  padding: calc(var(--_u) * 0.3);
  border-radius: 4px;
  background: var(--_metal);
  box-shadow: inset 0 0 0 1px var(--_brass-dk), 0 2px 5px rgb(0 0 0 / 0.6);
}
.bw-counter media-time {
  display: block;
  padding: calc(var(--_u) * 0.3) 0 calc(var(--_u) * 0.3) 0.22ch;
  font: 700 calc(var(--_u) * 1.05) / 1 var(--_digits);
  letter-spacing: 0.5ch;
  margin-right: -0.28ch;
  font-variant-numeric: tabular-nums;
  color: #f6efe0;
  text-shadow: 0 1px 0 #000;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.7), transparent 30% 70%, rgb(0 0 0 / 0.7)),
    repeating-linear-gradient(90deg, #22201d 0 1.38ch, transparent 1.38ch 1.5ch);
  white-space: nowrap;
}
.bw-counter media-time[data-type="duration"] { color: var(--_water-light); }
.bw-counter media-time-separator { color: var(--_brass-dk); font: 700 calc(var(--_u) * 0.9) / 1 var(--_serif); }

/* volume: a pressure gauge you drag sideways, plus a lever track */
.bw-pressure-gauge {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(var(--_u) * 3.4);
  height: calc(var(--_u) * 3.4);
  cursor: ew-resize;
  touch-action: none;
}
.bw-dial {
  position: relative;
  flex: none;
  width: calc(var(--_u) * 3.4);
  height: calc(var(--_u) * 3.4);
  border-radius: 50%;
  background:
    /* needle: a thin wedge that follows the volume, 240° sweep */
    conic-gradient(from 240deg, transparent 0 calc(var(--bw-vol, 100%) * 0.6667 - 0.8%), var(--_red) 0 calc(var(--bw-vol, 100%) * 0.6667 + 0.8%), transparent 0),
    /* tick marks */
    repeating-conic-gradient(from 240deg, var(--_ink) 0 0.6deg, transparent 0.6deg 15deg),
    radial-gradient(circle, var(--_cream) 0 62%, transparent 62%) ,
    radial-gradient(circle, transparent 0 66%, var(--_paper) 66% 70%, transparent 70%);
  -webkit-mask: radial-gradient(circle, #000 0 70%, transparent 70.5%);
          mask: radial-gradient(circle, #000 0 70%, transparent 70.5%);
}
.bw-dial-wrap {
  position: relative;
  flex: none;
  width: calc(var(--_u) * 3.4);
  height: calc(var(--_u) * 3.4);
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--_brass-mid), var(--_brass-hi), var(--_brass), var(--_brass-lo), var(--_brass), var(--_brass-hi), var(--_brass-mid));
  box-shadow: 0 0 0 1px var(--_brass-dk), 0 3px 6px rgb(0 0 0 / 0.6);
}
.bw-dial-wrap::before {  /* glass and the red sector at the top end */
  content: "";
  position: absolute;
  inset: 15%;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--_ink) 0 7%, transparent 8%),
    linear-gradient(135deg, rgb(255 255 255 / 0.35), transparent 40%);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.6);
  pointer-events: none;
}
.bw-dial-wrap::after {
  content: "PSI";
  position: absolute;
  inset: auto 0 24%;
  z-index: 2;
  text-align: center;
  font: 700 calc(var(--_u) * 0.45) / 1 var(--_label);
  letter-spacing: 0.1em;
  color: var(--_brass-dk);
  pointer-events: none;
}
.bw-dial-wrap .bw-dial { position: absolute; inset: 0; width: auto; height: auto; }
.bw-lever-track { position: absolute; inset: 0; opacity: 0; }
.bw-lever-fill { position: absolute; inset-block: 0; left: 0; width: var(--media-slider-fill); }
.bw-lever-thumb { position: absolute; left: var(--media-slider-fill); top: 50%; width: 2px; height: 2px; opacity: 0; }
.bw-pressure-gauge:has(.bw-lever-thumb:focus-visible) .bw-dial-wrap { outline: 3px solid var(--_water); outline-offset: 4px; }
.bw-lever-thumb:focus-visible { outline: none; }
.bw-pressure-gauge__label { font: 700 calc(var(--_u) * 0.6) / 1.2 var(--_label); letter-spacing: 0.14em; color: var(--_muted); max-width: 6ch; }

/* status announcer stays for screen readers only */
.bw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@keyframes bw-spin { to { rotate: 360deg; } }

/* ------------------------------------------------------------ light theme: polished brass on parchment */
[data-bw-theme="light"] .bw-gauge,
.bw-gauge[data-bw-theme="light"] {
  --_plate: #c9a46a;
  --_plate-2: #a9824a;
  --_text: #2a1d10;
  --_muted: #5a3e18;
}
[data-bw-theme="light"] .bw-console {
  background:
    radial-gradient(circle, rgb(90 62 24 / 0.08) 1px, transparent 1.5px) 0 0 / 5px 5px,
    linear-gradient(180deg, #ecdcb8, #d6bf90);
}
[data-bw-theme="light"] .bw-key:not(.bw-key--play) {
  color: var(--_ink);
  background:
    radial-gradient(circle at 40% 30%, rgb(255 255 255 / 0.7), transparent 45%),
    radial-gradient(circle, #f6eedc 0 60%, #cdbb96 100%);
}
[data-bw-theme="light"] .bw-key:not(.bw-key--play):hover { color: #0e6f67; }
[data-bw-theme="light"] .bw-tube-track { background: linear-gradient(180deg, rgb(255 255 255 / 0.7) 0 16%, transparent 30% 72%, rgb(255 255 255 / 0.3) 86%), rgb(120 140 135 / 0.35); }

/* ------------------------------------------------------------ small players */
@container bw (max-width: 620px) {
  .bw-gauge { --_u: 13px; padding: 10px; }
  .bw-key--seek, .bw-key--rate, .bw-dial-wrap { display: none; }
  .bw-regulator { width: calc(var(--_u) * 6); }
  .bw-valve svg { width: calc(var(--_u) * 5); height: calc(var(--_u) * 5); }
}
@container bw (max-width: 420px) {
  .bw-key--pip, .bw-counter media-time-separator, .bw-counter media-time[data-type="duration"] { display: none; }
  .bw-regulator, .bw-dial-wrap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bw-gauge *, .bw-machine * { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .bw-key, .bw-console, .bw-tube-track { border: 1px solid ButtonText; }
  .bw-tube-fill, .bw-lever-fill { background: Highlight; }
}

/* =========================================================
   THE MACHINE — optional decoration around the player:
   turning gears, a steam valve, a water reservoir that
   fills as the video plays, and an engraved nameplate.
   Stays outside <media-container>, so fullscreen shows
   only the player.
   ========================================================= */
.bw-machine {
  --u: 16px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 15%) minmax(0, 1fr) minmax(0, 9%);
  grid-template-rows: auto 1fr;
  gap: 0 calc(var(--u) * 1.2);
  padding-top: calc(var(--u) * 1);
  --bw-progress: 0;
}
.bw-plate {
  grid-column: 2;
  justify-self: center;
  position: relative;
  z-index: 2;
  margin-bottom: calc(var(--u) * -0.4);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 2.2) calc(var(--u) * 0.45);
  text-align: center;
  background: linear-gradient(180deg, #fff0b8 0%, #d9ad55 16%, #b8862f 45%, #7a5420 58%, #d9ad55 80%, #b8862f 100%);
  clip-path: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%);
  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 0.5));
}
.bw-plate b {
  display: block;
  font: 600 calc(var(--u) * 1.6) / 1 "Vollkorn", Georgia, serif;
  letter-spacing: 0.16em;
  color: #3a2508;
  text-shadow: 0 1px 0 rgb(255 240 190 / 0.7), 0 -1px 0 rgb(0 0 0 / 0.35);
}
.bw-plate span {
  display: block;
  margin-top: 4px;
  font: 700 calc(var(--u) * 0.6) / 1 "Arsenal SC", Georgia, serif;
  letter-spacing: 0.22em;
  color: #4a3110;
}
.bw-machine > .bw-left, .bw-machine > .bw-right { grid-row: 2; position: relative; }
.bw-machine > .bw-left { grid-column: 1; }
.bw-machine > .bw-player { grid-column: 2; grid-row: 2; position: relative; z-index: 1; min-width: 0; }
.bw-machine > .bw-right { grid-column: 3; }

/* gears */
.bw-gear { position: absolute; aspect-ratio: 1; pointer-events: none; }
.bw-gear img { width: 100%; height: 100%; display: block; }
.bw-gear--a { width: 112%; left: -14%; top: 22%; }
.bw-gear--b { width: 70%; left: 50%; top: 6%; }
.bw-gear--c { width: 58%; left: 44%; top: 49%; }
.bw-machine[data-playing] .bw-gear--a img { animation: bw-spin 14s linear infinite; }
.bw-machine[data-playing] .bw-gear--b img { animation: bw-spin 9.33s linear infinite reverse; }
.bw-machine[data-playing] .bw-gear--c img { animation: bw-spin 7.8s linear infinite reverse; }

/* copper pipe from the gears into the housing, with a valve that lets off steam */
.bw-pipe {
  position: absolute;
  right: calc(var(--u) * -1.4);
  top: 9%;
  width: 70%;
  height: calc(var(--u) * 1.1);
  border-radius: 4px;
  background: linear-gradient(180deg, #ffd2b0 0%, #d07f4a 25%, #8e4a23 70%, #47200c 100%);
  box-shadow: 0 3px 4px rgb(0 0 0 / 0.5);
}
.bw-pipe::before {  /* vertical riser */
  content: "";
  position: absolute;
  left: 10%;
  bottom: 100%;
  width: calc(var(--u) * 1.1);
  height: calc(var(--u) * 3);
  background: linear-gradient(90deg, #47200c, #8e4a23 25%, #ffd2b0 45%, #d07f4a 65%, #47200c);
  border-radius: 4px 4px 0 0;
}
.bw-pipe::after {   /* brass coupling */
  content: "";
  position: absolute;
  left: 46%;
  top: -4px;
  width: calc(var(--u) * 1.2);
  height: calc(100% + 8px);
  border-radius: 3px;
  background: linear-gradient(90deg, #7a5420, #d9ad55 30%, #fff0b8 45%, #b8862f 65%, #7a5420);
}
.bw-steam {
  position: absolute;
  left: calc(10% + var(--u) * 0.1);
  bottom: calc(100% + var(--u) * 3.1);
  width: calc(var(--u) * 0.9);
  height: calc(var(--u) * 0.9);
}
.bw-steam i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--u) * 2.2);
  height: calc(var(--u) * 2.2);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 65%);
  opacity: 0;
  pointer-events: none;
}
.bw-machine[data-playing] .bw-steam i { animation: bw-puff 2.4s ease-out infinite; }
.bw-machine[data-playing] .bw-steam i:nth-child(2) { animation-delay: 0.8s; }
.bw-machine[data-playing] .bw-steam i:nth-child(3) { animation-delay: 1.6s; }
@keyframes bw-puff {
  0% { opacity: 0; translate: -30% 0; scale: 0.4; }
  20% { opacity: 0.9; }
  100% { opacity: 0; translate: 10% calc(var(--u) * -5); scale: 2.4; }
}

/* water reservoir: fills as the video plays */
.bw-reservoir {
  position: absolute;
  inset: 6% 18% 8%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.bw-reservoir__cap {
  height: calc(var(--u) * 1.6);
  margin-inline: -18%;
  border-radius: 4px;
  background: linear-gradient(90deg, #7a5420, #d9ad55 20%, #fff0b8 38%, #b8862f 60%, #7a5420 85%, #b8862f);
  box-shadow: 0 3px 4px rgb(0 0 0 / 0.55), inset 0 -3px 0 rgb(0 0 0 / 0.25);
}
.bw-reservoir__glass {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 12%, rgb(255 255 255 / 0.35) 18%, rgb(255 255 255 / 0.04) 30% 72%, rgb(255 255 255 / 0.18) 84%, rgb(255 255 255 / 0.03)),
    rgb(14 24 24 / 0.75);
  box-shadow: inset 0 0 8px rgb(0 0 0 / 0.8);
}
.bw-reservoir__water {
  position: absolute;
  inset: auto 0 0;
  height: calc(4% + var(--bw-progress) * 96%);
  background:
    radial-gradient(circle, rgb(255 255 255 / 0.6) 0 1.4px, transparent 2px) 0 0 / 14px 26px,
    linear-gradient(90deg, color-mix(in srgb, var(--accent-water, #4fd9cc) 50%, #06302c), var(--accent-water, #4fd9cc) 40%, #b9fbf4 55%, var(--accent-water, #4fd9cc) 70%, color-mix(in srgb, var(--accent-water, #4fd9cc) 50%, #06302c));
  box-shadow: 0 0 18px rgb(79 217 204 / 0.6);
  transition: height 0.4s linear;
}
.bw-reservoir__water::before {  /* meniscus */
  content: "";
  position: absolute;
  inset: -3px 0 auto;
  height: 6px;
  border-radius: 50%;
  background: #c9fff9;
  opacity: 0.8;
}
.bw-machine[data-playing] .bw-reservoir__water { animation: bw-rise 3s linear infinite; }
@keyframes bw-rise { to { background-position: 0 -52px, 0 0; } }
.bw-reservoir__marks {
  position: absolute;
  inset: 4% 0 4% auto;
  width: 30%;
  background: repeating-linear-gradient(180deg, rgb(242 230 208 / 0.7) 0 2px, transparent 2px 10%);
  pointer-events: none;
}
.bw-lamp {
  justify-self: center;
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
  margin-top: calc(var(--u) * 1.2);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffb3a0, #b5371e 55%, #4a1006);
  box-shadow: 0 0 0 3px #b8862f, 0 0 0 4px #4a3110;
  transition: background 0.3s, box-shadow 0.3s;
}
.bw-machine[data-playing] .bw-lamp {
  background: radial-gradient(circle at 40% 35%, #e9fffc, #4fd9cc 55%, #0d4f49);
  box-shadow: 0 0 0 3px #b8862f, 0 0 0 4px #4a3110, 0 0 18px 4px rgb(79 217 204 / 0.6);
}

@media (max-width: 760px) {
  .bw-machine { grid-template-columns: 1fr; }
  .bw-machine > .bw-left, .bw-machine > .bw-right { display: none; }
  .bw-plate, .bw-machine > .bw-player { grid-column: 1; }
  .bw-plate b { font-size: calc(var(--u) * 1.15); }
}


/* =========================================================
   v2 — DEPTH: heavier housing, chamfers, screws, brackets,
   bezelled keys and a slide regulator for volume
   ========================================================= */
.bw-gauge {
  --_screw: radial-gradient(circle at 36% 30%, #fff6d6 0 10%, var(--_brass) 30%, var(--_brass-lo) 62%, #2a1a08 72%, transparent 76%);
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.018) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 30% 0%, rgb(255 255 255 / 0.08), transparent 60%),
    linear-gradient(180deg, var(--_plate), var(--_plate-2));
  box-shadow:
    inset 0 2px 0 rgb(255 240 190 / 0.35),
    inset 0 -3px 0 rgb(0 0 0 / 0.55),
    inset 0 0 0 3px var(--_brass-lo),
    inset 0 0 0 5px var(--_brass),
    inset 0 0 0 6px var(--_brass-hi),
    inset 0 0 0 8px var(--_brass-dk),
    inset 0 0 calc(var(--_u) * 2) rgb(0 0 0 / 0.55),
    0 2px 0 var(--_brass-dk),
    0 calc(var(--_u) * 0.5) 0 #120d09,
    0 calc(var(--_u) * 1.4) calc(var(--_u) * 2.2) rgb(0 0 0 / 0.65);
}
/* slotted screw heads in the corners */
.bw-gauge::before {
  inset: calc(var(--_u) * 0.3);
  background:
    linear-gradient(45deg, transparent 46%, rgb(30 18 6 / 0.85) 46% 54%, transparent 54%) left top / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat,
    linear-gradient(-45deg, transparent 46%, rgb(30 18 6 / 0.85) 46% 54%, transparent 54%) right top / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat,
    linear-gradient(-45deg, transparent 46%, rgb(30 18 6 / 0.85) 46% 54%, transparent 54%) left bottom / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat,
    linear-gradient(45deg, transparent 46%, rgb(30 18 6 / 0.85) 46% 54%, transparent 54%) right bottom / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat,
    var(--_screw) left top / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat,
    var(--_screw) right top / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat,
    var(--_screw) left bottom / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat,
    var(--_screw) right bottom / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat;
  -webkit-mask: radial-gradient(circle, #000 0 70%, transparent 72%) left top / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat,
                radial-gradient(circle, #000 0 70%, transparent 72%) right top / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat,
                radial-gradient(circle, #000 0 70%, transparent 72%) left bottom / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat,
                radial-gradient(circle, #000 0 70%, transparent 72%) right bottom / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat;
          mask: radial-gradient(circle, #000 0 70%, transparent 72%) left top / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat,
                radial-gradient(circle, #000 0 70%, transparent 72%) right top / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat,
                radial-gradient(circle, #000 0 70%, transparent 72%) left bottom / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat,
                radial-gradient(circle, #000 0 70%, transparent 72%) right bottom / calc(var(--_u) * 1) calc(var(--_u) * 1) no-repeat;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.7));
}

/* screen bezel: polished outer ring, dark groove, inner chamfer */
.bw-screen-frame {
  margin: calc(var(--_u) * -0.8);
  padding: calc(var(--_u) * 1);
  border-radius: calc(var(--_u) * 0.9);
  background:
    radial-gradient(circle, #fff3c8 0 1px, var(--_brass-lo) 1.8px, rgb(0 0 0 / 0.5) 2.4px, transparent 3px) calc(var(--_u) * 0.5) calc(var(--_u) * 0.5) / calc(var(--_u) * 1.6) calc(var(--_u) * 1.6) repeat-x,
    radial-gradient(circle, #fff3c8 0 1px, var(--_brass-lo) 1.8px, rgb(0 0 0 / 0.5) 2.4px, transparent 3px) calc(var(--_u) * 0.5) calc(100% - var(--_u) * 0.5 + var(--_u) * 1.6) / calc(var(--_u) * 1.6) calc(var(--_u) * 1.6) repeat-x,
    linear-gradient(135deg, rgb(255 255 255 / 0.35), transparent 30% 70%, rgb(0 0 0 / 0.35)),
    var(--_metal);
  box-shadow:
    inset 0 0 0 1px var(--_brass-dk),
    inset 2px 2px 0 rgb(255 245 210 / 0.7),
    inset -2px -2px 0 rgb(0 0 0 / 0.45),
    inset 0 0 0 calc(var(--_u) * 0.55) rgb(0 0 0 / 0),
    inset 0 0 0 calc(var(--_u) * 0.62) rgb(60 38 10 / 0.9);
  filter: drop-shadow(0 4px 5px rgb(0 0 0 / 0.55));
}
.bw-glass {
  box-shadow:
    inset 0 0 0 3px #120d09,
    inset 4px 4px 10px rgb(0 0 0 / 0.85),
    inset 0 0 calc(var(--_u) * 1.4) rgb(0 0 0 / 0.55);
}
/* L-shaped corner brackets with screws, sitting on the bezel */
.bw-brackets { grid-area: 1 / 1; position: relative; z-index: 5; margin: calc(var(--_u) * -1.05); pointer-events: none; }
.bw-brackets i {
  position: absolute;
  width: calc(var(--_u) * 3.2);
  height: calc(var(--_u) * 3.2);
  background:
    radial-gradient(circle at 36% 30%, #fff6d6 0 8%, var(--_brass) 26%, var(--_brass-lo) 56%, #2a1a08 66%, transparent 70%) calc(var(--_u) * 0.35) calc(var(--_u) * 0.35) / calc(var(--_u) * 0.9) calc(var(--_u) * 0.9) no-repeat,
    linear-gradient(135deg, var(--_brass-hi), var(--_brass) 30%, var(--_brass-lo) 70%, var(--_brass-dk));
  clip-path: polygon(0 0, 100% 0, 100% 34%, 34% 34%, 34% 100%, 0 100%);
  filter: drop-shadow(1px 2px 1px rgb(0 0 0 / 0.6));
}
.bw-brackets i:nth-child(1) { left: 0; top: 0; }
.bw-brackets i:nth-child(2) { right: 0; top: 0; rotate: 90deg; }
.bw-brackets i:nth-child(3) { right: 0; bottom: 0; rotate: 180deg; }
.bw-brackets i:nth-child(4) { left: 0; bottom: 0; rotate: 270deg; }

/* console: a recessed leather panel inside a chamfered brass trim */
.bw-gauge > media-controls { margin-top: calc(var(--_u) * 1.7); }
.bw-console {
  padding: calc(var(--_u) * 1.1) calc(var(--_u) * 1.3) calc(var(--_u) * 1.2);
  background:
    radial-gradient(circle, rgb(0 0 0 / 0.25) 1px, transparent 1.6px) 0 0 / 4px 4px,
    radial-gradient(circle, rgb(255 255 255 / 0.04) 1px, transparent 1.6px) 2px 2px / 4px 4px,
    linear-gradient(180deg, #3c2b1d, #1f160e);
  box-shadow:
    inset 0 0 0 2px var(--_brass-dk),
    inset 0 0 0 4px var(--_brass),
    inset 0 0 0 5px var(--_brass-hi),
    inset 0 0 0 7px var(--_brass-lo),
    inset 0 0 0 8px #120d09,
    inset 0 calc(var(--_u) * 0.8) calc(var(--_u) * 1.2) rgb(0 0 0 / 0.6),
    0 2px 0 rgb(255 240 190 / 0.25);
}

/* keys: brass bezel ring with a domed glass face */
.bw-key {
  isolation: isolate;
  background: conic-gradient(from 30deg, var(--_brass-mid), var(--_brass-hi), var(--_brass), var(--_brass-lo), var(--_brass-dk), var(--_brass-lo), var(--_brass), var(--_brass-hi), var(--_brass-mid));
  box-shadow: 0 0 0 1px var(--_brass-dk), 0 4px 0 #120d09, 0 6px 10px rgb(0 0 0 / 0.6);
}
.bw-key::before {
  content: "";
  position: absolute;
  inset: 14%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 42% 24%, rgb(255 255 255 / 0.32) 0 18%, transparent 42%),
    radial-gradient(circle at 50% 60%, #34281d 0 40%, #0f0b08 100%);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(0 0 0 / 0.6);
}
.bw-key svg, .bw-key span { position: relative; z-index: 1; }
.bw-key:active { translate: 0 3px; box-shadow: 0 0 0 1px var(--_brass-dk), 0 1px 0 #120d09, 0 2px 4px rgb(0 0 0 / 0.6); }
.bw-key--play {
  background: conic-gradient(from 30deg, var(--_brass-mid), var(--_brass-hi), var(--_brass), var(--_brass-lo), var(--_brass-dk), var(--_brass-lo), var(--_brass), var(--_brass-hi), var(--_brass-mid));
  box-shadow: 0 0 0 1px var(--_brass-dk), 0 5px 0 #120d09, 0 8px 12px rgb(0 0 0 / 0.6);
}
.bw-key--play::before {
  inset: 12%;
  background:
    radial-gradient(ellipse at 40% 25%, rgb(255 255 255 / 0.75) 0 14%, transparent 40%),
    radial-gradient(circle at 50% 55%, var(--_brass-hi) 0 25%, var(--_brass) 55%, var(--_brass-lo) 100%);
  box-shadow: inset 0 -3px 5px rgb(0 0 0 / 0.45), inset 0 2px 2px rgb(255 255 255 / 0.5), 0 0 0 2px var(--_brass-dk);
}
[data-bw-theme="light"] .bw-key:not(.bw-key--play) { background: conic-gradient(from 30deg, var(--_brass-mid), var(--_brass-hi), var(--_brass), var(--_brass-lo), var(--_brass-dk), var(--_brass-lo), var(--_brass), var(--_brass-hi), var(--_brass-mid)); color: var(--_ink); }
[data-bw-theme="light"] .bw-key:not(.bw-key--play)::before {
  background:
    radial-gradient(ellipse at 42% 24%, rgb(255 255 255 / 0.9) 0 18%, transparent 45%),
    radial-gradient(circle at 50% 60%, #f6eedc 0 45%, #c9b48a 100%);
}

/* the pressure gauge now only reads the level; deeper bezel */
.bw-dial-wrap {
  box-shadow: 0 0 0 1px var(--_brass-dk), 0 4px 0 #120d09, 0 6px 10px rgb(0 0 0 / 0.6);
}

/* slide regulator: a brass knob in an engraved slot */
.bw-regulator {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(var(--_u) * 9);
  height: var(--_key);
  margin-inline: calc(var(--_u) * 0.5) calc(var(--_u) * 0.9);
  cursor: pointer;
  touch-action: none;
}
.bw-regulator-track {
  position: absolute;
  inset-inline: calc(var(--_u) * 0.4);
  height: calc(var(--_u) * 0.75);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgb(242 230 208 / 0.35) calc(10% - 1px) 10%),
    linear-gradient(180deg, #050403, #2a2018);
  box-shadow: inset 0 2px 3px #000, 0 1px 0 rgb(255 240 190 / 0.25), 0 0 0 1px var(--_brass-lo), 0 0 0 3px var(--_brass), 0 0 0 4px var(--_brass-dk);
  overflow: hidden;
}
.bw-regulator-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--media-slider-fill);
  background: linear-gradient(180deg, var(--_water-light), var(--_water) 45%, var(--_water-deep));
  box-shadow: 0 0 8px color-mix(in srgb, var(--_water) 70%, transparent);
}
.bw-regulator-knob {
  position: absolute;
  left: calc(var(--_u) * 0.4 + (100% - var(--_u) * 0.8) * 0);
  left: var(--media-slider-fill);
  width: calc(var(--_u) * 1.6);
  height: calc(var(--_u) * 1.6);
  translate: -50% 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgb(0 0 0 / 0.22) 0 6deg, transparent 6deg 18deg),
    radial-gradient(circle at 38% 30%, #fff6d6 0 10%, var(--_brass) 40%, var(--_brass-lo) 80%, var(--_brass-dk));
  box-shadow: 0 0 0 1px var(--_brass-dk), 0 3px 0 #120d09, 0 5px 8px rgb(0 0 0 / 0.65);
  cursor: grab;
  transition: scale 0.12s;
}
.bw-regulator-knob::after {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--_brass-hi), var(--_brass-mid));
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.5);
}
.bw-regulator[data-dragging] .bw-regulator-knob { cursor: grabbing; scale: 1.08; }
.bw-regulator:hover .bw-regulator-knob { scale: 1.06; }
.bw-regulator-knob:focus-visible { outline: 3px solid var(--_water); outline-offset: 4px; }

/* --- the machine around the player --- */
.bw-machine { gap: 0 calc(var(--u) * 1.6); }
.bw-plate { padding-inline: calc(var(--u) * 3); }
.bw-screw {
  position: absolute;
  top: 50%;
  width: calc(var(--u) * 0.9);
  height: calc(var(--u) * 0.9);
  translate: 0 -50%;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 44%, rgb(30 18 6 / 0.85) 44% 56%, transparent 56%),
    radial-gradient(circle at 36% 30%, #fff6d6 0 12%, #d9ad55 34%, #7a5420 70%, #2a1a08);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.6);
}
.bw-screw:first-child { left: calc(var(--u) * 1.1); }
.bw-screw:nth-child(2) { right: calc(var(--u) * 1.1); }
/* riveted iron mounting plate behind the gears */
.bw-mount {
  position: absolute;
  inset: 4% -14% 10% 6%;
  border-radius: 10px;
  background:
    radial-gradient(circle, #fff3c8 0 1px, #7a5420 1.8px, rgb(0 0 0 / 0.6) 2.6px, transparent 3.2px) 6px 12px / 12px 26px repeat-y,
    radial-gradient(circle, #fff3c8 0 1px, #7a5420 1.8px, rgb(0 0 0 / 0.6) 2.6px, transparent 3.2px) calc(100% - 6px) 12px / 12px 26px repeat-y,
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.02) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #3d322b, #1c1612);
  box-shadow: inset 0 0 0 2px #7a5420, inset 0 0 0 4px #2a1f17, inset 0 0 24px rgb(0 0 0 / 0.7), 0 10px 20px rgb(0 0 0 / 0.55);
}
[data-bw-theme="light"] .bw-mount { background:
    radial-gradient(circle, #fff3c8 0 1px, #7a5420 1.8px, rgb(0 0 0 / 0.4) 2.6px, transparent 3.2px) 6px 12px / 12px 26px repeat-y,
    radial-gradient(circle, #fff3c8 0 1px, #7a5420 1.8px, rgb(0 0 0 / 0.4) 2.6px, transparent 3.2px) calc(100% - 6px) 12px / 12px 26px repeat-y,
    linear-gradient(160deg, #b89766, #8a6a3e); }
.bw-gear { filter: drop-shadow(4px 8px 6px rgb(0 0 0 / 0.55)); }
/* feed pipe from the housing into the reservoir */
.bw-feed {
  position: absolute;
  left: calc(var(--u) * -2.2);
  top: 46%;
  width: calc(50% + var(--u) * 2.2);
  height: calc(var(--u) * 1.1);
  border-radius: 3px;
  background: linear-gradient(180deg, #ffd2b0 0%, #d07f4a 25%, #8e4a23 70%, #47200c 100%);
  box-shadow: 0 3px 4px rgb(0 0 0 / 0.5);
}
.bw-feed::after {
  content: "";
  position: absolute;
  left: 30%;
  top: -5px;
  width: calc(var(--u) * 1.3);
  height: calc(100% + 10px);
  border-radius: 3px;
  background: linear-gradient(90deg, #7a5420, #d9ad55 30%, #fff0b8 45%, #b8862f 65%, #7a5420);
}
.bw-reservoir { z-index: 1; }
.bw-reservoir__cage {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 8%, #b8862f 8% 11%, transparent 11% 89%, #b8862f 89% 92%, transparent 92%),
              linear-gradient(90deg, transparent 47%, rgb(184 134 47 / 0.9) 47% 53%, transparent 53%);
  filter: drop-shadow(1px 0 1px rgb(0 0 0 / 0.6));
  pointer-events: none;
}
.bw-reservoir__cap { height: calc(var(--u) * 2); margin-inline: -24%; border-radius: 6px;
  box-shadow: 0 4px 6px rgb(0 0 0 / 0.6), inset 0 -4px 0 rgb(0 0 0 / 0.3), inset 0 2px 0 rgb(255 245 210 / 0.6); }

/* =========================================================
   v3 — TEXTURES and sliding machinery
   ========================================================= */
.bw-gauge {
  --_tex-iron: url("assets/tex-iron.webp");
  --_tex-leather: url("assets/tex-leather.webp");
  --_tex-brass: url("assets/tex-brass.webp");
  background:
    linear-gradient(180deg, rgb(24 17 12 / 0.35), rgb(12 8 5 / 0.6)),
    radial-gradient(ellipse at 30% 0%, rgb(255 230 180 / 0.10), transparent 60%),
    var(--_tex-iron) center / calc(var(--_u) * 26) auto;
}
/* brass parts get a brushed-metal grain under the polish */
.bw-screen-frame,
.bw-osd, .bw-valve__label, .bw-tag, .bw-counter, .bw-burst media-dialog-close {
  background-blend-mode: normal, normal, overlay, normal;
}
.bw-screen-frame {
  background:
    radial-gradient(circle, #fff3c8 0 1px, var(--_brass-lo) 1.8px, rgb(0 0 0 / 0.5) 2.4px, transparent 3px) calc(var(--_u) * 0.5) calc(var(--_u) * 0.5) / calc(var(--_u) * 1.6) calc(var(--_u) * 1.6) repeat-x,
    radial-gradient(circle, #fff3c8 0 1px, var(--_brass-lo) 1.8px, rgb(0 0 0 / 0.5) 2.4px, transparent 3px) calc(var(--_u) * 0.5) calc(100% - var(--_u) * 0.5 + var(--_u) * 1.6) / calc(var(--_u) * 1.6) calc(var(--_u) * 1.6) repeat-x,
    var(--_tex-brass) 0 0 / calc(var(--_u) * 16) auto,
    var(--_metal);
  background-blend-mode: normal, normal, overlay, normal;
}
.bw-osd, .bw-valve__label, .bw-tag, .bw-counter, .bw-burst media-dialog-close {
  background: var(--_tex-brass) 0 0 / calc(var(--_u) * 12) auto, var(--_metal);
  background-blend-mode: overlay, normal;
}
.bw-brackets i {
  background:
    radial-gradient(circle at 36% 30%, #fff6d6 0 8%, var(--_brass) 26%, var(--_brass-lo) 56%, #2a1a08 66%, transparent 70%) calc(var(--_u) * 0.35) calc(var(--_u) * 0.35) / calc(var(--_u) * 0.9) calc(var(--_u) * 0.9) no-repeat,
    var(--_tex-brass) 0 0 / calc(var(--_u) * 8) auto,
    linear-gradient(135deg, var(--_brass-hi), var(--_brass) 30%, var(--_brass-lo) 70%, var(--_brass-dk));
  background-blend-mode: normal, overlay, normal;
}
/* tooled-leather console */
.bw-console {
  background:
    linear-gradient(180deg, rgb(30 20 12 / 0.25), rgb(10 6 3 / 0.55)),
    var(--_tex-leather) center / calc(var(--_u) * 22) auto;
}
[data-bw-theme="light"] .bw-console {
  background:
    linear-gradient(180deg, rgb(120 70 30 / 0.05), rgb(40 20 8 / 0.25)),
    var(--_tex-leather) center / calc(var(--_u) * 22) auto;
}
[data-bw-theme="light"] .bw-gauge {
  background:
    linear-gradient(180deg, rgb(255 230 180 / 0.12), rgb(40 25 10 / 0.25)),
    var(--_tex-brass) 0 0 / calc(var(--_u) * 18) auto,
    linear-gradient(180deg, #c9a46a, #8a6a3e);
  background-blend-mode: normal, overlay, normal;
}
.bw-key { background-blend-mode: normal; }

/* machine textures */
.bw-plate {
  background: url("assets/tex-brass.webp") 0 0 / 220px auto, linear-gradient(180deg, #fff0b8 0%, #d9ad55 16%, #b8862f 45%, #7a5420 58%, #d9ad55 80%, #b8862f 100%);
  background-blend-mode: overlay, normal;
}
.bw-mount {
  background:
    linear-gradient(160deg, rgb(40 30 22 / 0.2), rgb(8 5 3 / 0.55)),
    url("assets/tex-iron.webp") center / 360px auto;
}
[data-bw-theme="light"] .bw-mount {
  background:
    linear-gradient(160deg, rgb(255 240 200 / 0.15), rgb(40 25 10 / 0.35)),
    url("assets/tex-iron.webp") center / 360px auto;
}
.bw-reservoir__cap {
  background: url("assets/tex-brass.webp") 0 0 / 180px auto, linear-gradient(90deg, #7a5420, #d9ad55 20%, #fff0b8 38%, #b8862f 60%, #7a5420 85%, #b8862f);
  background-blend-mode: overlay, normal;
}

/* sliding machinery: the gear bank and the reservoir sit tucked behind
   the housing until the valve is opened, then slide out and stay out */
.bw-machine > .bw-left,
.bw-machine > .bw-right {
  transition: translate 1.1s cubic-bezier(.2, .9, .25, 1.15), opacity 0.6s;
}
.bw-machine:not([data-started]) > .bw-left { translate: 55% 0; opacity: 0.65; }
.bw-machine:not([data-started]) > .bw-right { translate: -70% 0; opacity: 0.65; }
.bw-machine:not([data-started]):hover > .bw-left { translate: 40% 0; }
.bw-machine:not([data-started]):hover > .bw-right { translate: -52% 0; }
.bw-machine > .bw-right { transition-delay: 0.15s; }
/* the nameplate drops a little when the machine starts */
.bw-plate { transition: translate 0.7s cubic-bezier(.3, 1.5, .5, 1); }
.bw-machine:not([data-started]) .bw-plate { translate: 0 -18%; }
/* the reservoir lamp flickers while pressure builds */
.bw-machine:has(.bw-pressure[data-visible]) .bw-lamp { animation: bw-flick 0.4s steps(2) infinite; }
@keyframes bw-flick { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  .bw-machine > .bw-left, .bw-machine > .bw-right, .bw-plate { transition: none; }
}
@media (max-width: 760px) {
  .bw-machine:not([data-started]) .bw-plate { translate: none; }
}

/* =========================================================
   v4 — living water, gear niche, ornate bezel, plumbed reservoir
   ========================================================= */
/* ---- water: stochastic bubbles + moving caustics */
.bw-tube-fill { background: linear-gradient(180deg, var(--_water-light) 0%, var(--_water) 38%, var(--_water-deep) 100%) !important; animation: none !important; }
.bw-bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.bw-tube-fill { overflow: hidden; }
.bw-bubbles--flow { right: auto; width: 1600px; }
.bw-bubbles::before {   /* caustic shimmer */
  content: "";
  position: absolute;
  inset: -40%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .08' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 1 0 0 0 0 .98 0 0 0 1.6 -.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 120px;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  animation: bw-caustic 7s linear infinite;
}
.bw-bubbles--rise::before { animation-name: bw-caustic-up; }
@keyframes bw-caustic { to { background-position: 180px 30px; } }
@keyframes bw-caustic-up { to { background-position: 20px -120px; } }
.bw-bubbles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.95) 0 22%, rgb(220 255 252 / 0.35) 45%, rgb(255 255 255 / 0.12) 70%, transparent 72%);
  box-shadow: inset 0 0 0 0.6px rgb(255 255 255 / 0.45);
  opacity: 0;
  animation: bw-drift var(--d) ease-in-out var(--delay) infinite;
}
.bw-bubbles--rise i { top: auto; bottom: calc(var(--y) * 0.15); animation-name: bw-rise-b; }
@keyframes bw-drift {
  0% { opacity: 0; translate: 0 0; }
  15% { opacity: var(--o); }
  50% { translate: calc(var(--dx) * 0.5) var(--dy); }
  85% { opacity: var(--o); }
  100% { opacity: 0; translate: var(--dx) calc(var(--dy) * -0.6); }
}
@keyframes bw-rise-b {
  0% { opacity: 0; translate: 0 0; scale: 0.6; }
  12% { opacity: var(--o); }
  35% { translate: var(--dx) calc(var(--dy) * 0.35); }
  65% { translate: calc(var(--dx) * -0.7) calc(var(--dy) * 0.7); }
  100% { opacity: 0; translate: calc(var(--dx) * 0.3) var(--dy); scale: 1.15; }
}
/* calm water when paused: everything slows to a stop */
.bw-gauge:has(.bw-play[data-paused]) .bw-bubbles--flow i,
.bw-gauge:has(.bw-play[data-paused]) .bw-bubbles--flow::before,
.bw-machine:not([data-playing]) .bw-bubbles--rise i,
.bw-machine:not([data-playing]) .bw-bubbles--rise::before { animation-play-state: paused; }
.bw-reservoir__water { animation: none !important; background:
  linear-gradient(90deg, color-mix(in srgb, #4fd9cc 50%, #06302c), #4fd9cc 40%, #b9fbf4 55%, #4fd9cc 70%, color-mix(in srgb, #4fd9cc 50%, #06302c)) !important; overflow: hidden; }

/* ---- ornate bezel */
.bw-screen-frame {
  background:
    radial-gradient(circle, #fff3c8 0 1px, var(--_brass-lo) 1.8px, rgb(0 0 0 / 0.5) 2.4px, transparent 3px) calc(var(--_u) * 0.5) calc(var(--_u) * 0.5) / calc(var(--_u) * 1.6) calc(var(--_u) * 1.6) repeat-x,
    radial-gradient(circle, #fff3c8 0 1px, var(--_brass-lo) 1.8px, rgb(0 0 0 / 0.5) 2.4px, transparent 3px) calc(var(--_u) * 0.5) calc(100% - var(--_u) * 0.5 + var(--_u) * 1.6) / calc(var(--_u) * 1.6) calc(var(--_u) * 1.6) repeat-x,
    radial-gradient(circle, #fff3c8 0 1px, var(--_brass-lo) 1.8px, rgb(0 0 0 / 0.5) 2.4px, transparent 3px) calc(var(--_u) * 0.5) calc(var(--_u) * 2.6) / calc(var(--_u) * 1.6) calc(var(--_u) * 1.6) repeat-y,
    radial-gradient(circle, #fff3c8 0 1px, var(--_brass-lo) 1.8px, rgb(0 0 0 / 0.5) 2.4px, transparent 3px) calc(100% - var(--_u) * 0.5 + var(--_u) * 1.6) calc(var(--_u) * 2.6) / calc(var(--_u) * 1.6) calc(var(--_u) * 1.6) repeat-y,
    repeating-linear-gradient(45deg, rgb(60 35 8 / 0.18) 0 1px, transparent 1px 5px),
    var(--_tex-brass) 0 0 / calc(var(--_u) * 16) auto,
    var(--_metal);
  background-blend-mode: normal, normal, normal, normal, multiply, overlay, normal;
  box-shadow:
    inset 0 0 0 1px var(--_brass-dk),
    inset 2px 2px 0 rgb(255 245 210 / 0.7),
    inset -2px -2px 0 rgb(0 0 0 / 0.45),
    inset 0 0 0 calc(var(--_u) * 0.3) rgb(0 0 0 / 0),
    inset 0 0 0 calc(var(--_u) * 0.36) rgb(60 38 10 / 0.85),
    inset 0 0 0 calc(var(--_u) * 0.42) rgb(255 230 160 / 0.5),
    inset 0 0 0 calc(var(--_u) * 0.75) rgb(0 0 0 / 0),
    inset 0 0 0 calc(var(--_u) * 0.82) rgb(40 24 6 / 0.9);
}
.bw-brackets i {
  width: calc(var(--_u) * 4.6);
  height: calc(var(--_u) * 4.6);
  background: url("assets/corner.svg") 0 0 / 100% 100% no-repeat;
  clip-path: none;
  filter: none;
  margin: calc(var(--_u) * -0.4);
}
.bw-trim { grid-area: 1 / 1; position: relative; z-index: 5; margin: calc(var(--_u) * -0.8); pointer-events: none; }
.bw-hinge {
  position: absolute;
  left: calc(var(--_u) * -0.55);
  width: calc(var(--_u) * 0.9);
  height: calc(var(--_u) * 3.6);
  border-radius: 4px;
  background:
    linear-gradient(180deg, transparent 32%, rgb(30 18 6 / 0.7) 32% 34%, transparent 34% 66%, rgb(30 18 6 / 0.7) 66% 68%, transparent 68%),
    linear-gradient(90deg, var(--_brass-lo), var(--_brass) 25%, var(--_brass-hi) 45%, var(--_brass-mid) 70%, var(--_brass-dk));
  box-shadow: 0 3px 4px rgb(0 0 0 / 0.6), inset 0 0 0 1px var(--_brass-dk);
}
.bw-hinge--r { left: auto; right: calc(var(--_u) * -0.55); }
.bw-bulb-cup {
  position: absolute;
  top: calc(var(--_u) * -0.75);
  width: calc(var(--_u) * 1.4);
  height: calc(var(--_u) * 1.4);
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 40% 35%, #fff2cf 0 12%, #ffb347 40%, #8a3c0a 80%);
  box-shadow: 0 0 0 2px var(--_brass), 0 0 0 3px var(--_brass-dk), 0 3px 4px rgb(0 0 0 / 0.6);
  opacity: 0.55;
  transition: opacity 0.4s, box-shadow 0.4s;
}
.bw-gauge:has(.bw-play:not([data-paused])) .bw-bulb-cup {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--_brass), 0 0 0 3px var(--_brass-dk), 0 0 14px 4px rgb(255 179 71 / 0.55);
  animation: bw-flick2 3s steps(5) infinite;
}
@keyframes bw-flick2 { 40% { opacity: 0.85; } 60% { opacity: 1; } }
.bw-serial {
  position: absolute;
  left: 50%;
  bottom: calc(var(--_u) * -0.05);
  translate: -50% 0;
  padding: calc(var(--_u) * 0.12) calc(var(--_u) * 0.8);
  font: 700 calc(var(--_u) * 0.5) / 1.3 var(--_label);
  letter-spacing: 0.2em;
  color: #3a2508;
  background: var(--_tex-brass) 0 0 / 120px auto, var(--_metal);
  background-blend-mode: overlay, normal;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--_brass-dk), 0 2px 3px rgb(0 0 0 / 0.5);
  white-space: nowrap;
}

/* ---- gear niche: a recessed iron cabinet with meshing gears and plumbing */
.bw-mount, .bw-pipe { display: none; }
.bw-niche {
  position: absolute;
  inset: 2% 0 2% 4%;
  border-radius: 10px;
  padding: 9px;
  background: url("assets/tex-brass.webp") 0 0 / 160px auto, linear-gradient(160deg, #fff0b8, #d9ad55 18%, #8a5f22 55%, #d9ad55 80%, #5b3a12);
  background-blend-mode: overlay, normal;
  box-shadow: 0 0 0 1px #3a2508, 0 10px 20px rgb(0 0 0 / 0.6);
}
.bw-niche__inner {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
  container-type: inline-size;
  background:
    radial-gradient(ellipse at 50% 30%, rgb(255 190 110 / 0.10), transparent 60%),
    linear-gradient(180deg, rgb(10 6 3 / 0.55), rgb(6 4 2 / 0.75)),
    url("assets/tex-iron.webp") center / 300px auto;
  box-shadow: inset 0 0 0 2px #1a110a, inset 6px 8px 18px rgb(0 0 0 / 0.95), inset -4px -4px 10px rgb(0 0 0 / 0.7);
}
[data-bw-theme="light"] .bw-niche__inner {
  background:
    linear-gradient(180deg, rgb(40 25 10 / 0.35), rgb(20 12 5 / 0.55)),
    url("assets/tex-iron.webp") center / 300px auto;
}
.bw-niche .bw-gear { position: absolute; width: auto; filter: drop-shadow(3px 6px 4px rgb(0 0 0 / 0.75)); }
.bw-niche .bw-gear--a { left: 15cqw; top: 115cqw; width: 70cqw; z-index: 3; }
.bw-niche .bw-gear--b { left: -1cqw; top: 86cqw; width: 46cqw; z-index: 2; }
.bw-niche .bw-gear--c { left: 60cqw; top: 166cqw; width: 40cqw; z-index: 2; }
.bw-np {
  position: absolute;
  z-index: 1;
  background: linear-gradient(90deg, #47200c, #8e4a23 22%, #ffd2b0 42%, #d07f4a 62%, #47200c);
  box-shadow: 2px 3px 4px rgb(0 0 0 / 0.6);
}
.bw-np--v1 { left: 72cqw; top: -2cqw; width: 9cqw; height: 144cqw; }
.bw-np--h1 { left: 0; top: 232cqw; width: 106cqw; height: 9cqw; background: linear-gradient(180deg, #ffd2b0, #d07f4a 25%, #8e4a23 70%, #47200c); }
.bw-np--v2 { left: 16cqw; top: 236cqw; width: 9cqw; height: 200cqw; }
.bw-np--j1, .bw-np--j2 {  /* brass flanges */
  width: 15cqw; height: 6cqw;
  background: linear-gradient(90deg, #7a5420, #d9ad55 30%, #fff0b8 45%, #b8862f 65%, #7a5420);
  border-radius: 2px;
}
.bw-np--j1 { left: 69cqw; top: 40cqw; }
.bw-np--j2 { left: 13cqw; top: 290cqw; }
.bw-handwheel {
  position: absolute;
  z-index: 4;
  left: 5cqw;
  top: 221cqw;
  width: 31cqw;
  filter: none;
  transition: rotate 1.2s cubic-bezier(.3, 1.3, .5, 1);
}
.bw-machine[data-started] .bw-handwheel { rotate: -200deg; }
.bw-minigauge {
  position: absolute;
  z-index: 4;
  left: 52cqw;
  top: 262cqw;
  width: 38cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #1a120a 0 6%, transparent 7%),
    repeating-conic-gradient(from 240deg, #3a2508 0 1deg, transparent 1deg 20deg),
    radial-gradient(circle, #f2e6d0 0 60%, transparent 61%),
    conic-gradient(from 0deg, #b8862f, #fff0b8, #d9ad55, #7a5420, #d9ad55, #fff0b8, #b8862f);
  box-shadow: 0 0 0 1px #3a2508, 3px 5px 6px rgb(0 0 0 / 0.7);
}
.bw-minigauge::before {  /* stem into the pipe */
  content: "";
  position: absolute;
  left: 42%;
  top: -26cqw;
  width: 16%;
  height: 28cqw;
  z-index: -1;
  background: linear-gradient(90deg, #7a5420, #d9ad55 30%, #fff0b8 45%, #b8862f 65%, #7a5420);
}
.bw-minigauge i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3%;
  height: 40%;
  translate: -50% -100%;
  transform-origin: 50% 100%;
  rotate: -110deg;
  background: #b5371e;
  border-radius: 2px;
  transition: rotate 1.6s cubic-bezier(.3, 1.5, .5, 1);
}
.bw-machine[data-playing] .bw-minigauge i { rotate: 45deg; animation: bw-needle 2.2s ease-in-out 1.6s infinite; }
@keyframes bw-needle { 50% { rotate: 38deg; } }
.bw-bulb {
  position: absolute;
  z-index: 4;
  left: 58cqw;
  top: 330cqw;
  width: 26cqw;
  aspect-ratio: 0.8;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 45% 40%, rgb(255 240 200 / 0.9) 0 8%, rgb(255 179 71 / 0.25) 30%, rgb(255 255 255 / 0.06) 60%), rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25), 0 0 0 0 rgb(255 179 71 / 0);
  transition: box-shadow 0.4s, background 0.4s;
}
.bw-bulb::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -14%; height: 22%; border-radius: 2px; background: linear-gradient(90deg, #7a5420, #d9ad55 40%, #fff0b8 50%, #7a5420); }
.bw-machine[data-playing] .bw-bulb {
  background: radial-gradient(circle at 45% 40%, #fff6dc 0 10%, rgb(255 190 90 / 0.85) 30%, rgb(255 140 40 / 0.25) 65%), rgb(255 200 120 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3), 0 0 22px 8px rgb(255 170 60 / 0.45);
}
.bw-niche .bw-steam { position: absolute; left: 74%; bottom: auto; top: -4px; width: 20px; height: 20px; }
.bw-machine[data-playing] .bw-gear--a img { animation: bw-spin 14s linear infinite; }
.bw-machine[data-playing] .bw-gear--b img { animation: bw-spin 9.33s linear infinite reverse; }
.bw-machine[data-playing] .bw-gear--c img { animation: bw-spin 7.78s linear infinite reverse; }

/* ---- plumbed reservoir */
.bw-feed { display: none; }
.bw-rp {
  position: absolute;
  z-index: 0;
  background: linear-gradient(90deg, #47200c, #8e4a23 22%, #ffd2b0 42%, #d07f4a 62%, #47200c);
  box-shadow: 2px 3px 4px rgb(0 0 0 / 0.55);
}
.bw-rp--top-v { left: calc(50% - 7px); top: -2%; height: 9%; width: 14px; }
.bw-rp--top-h { left: calc(var(--u) * -2.4); top: -2%; width: calc(50% + var(--u) * 2.4 + 7px); height: 14px; background: linear-gradient(180deg, #ffd2b0, #d07f4a 25%, #8e4a23 70%, #47200c); }
.bw-rp--bot-v { left: calc(50% - 7px); bottom: 0; height: 9%; width: 14px; }
.bw-rp--bot-h { left: calc(var(--u) * -2.4); bottom: 0; width: calc(50% + var(--u) * 2.4 + 7px); height: 14px; background: linear-gradient(180deg, #ffd2b0, #d07f4a 25%, #8e4a23 70%, #47200c); }
.bw-rp--top-j, .bw-rp--bot-j {  /* elbow joints */
  left: calc(50% - 11px);
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: radial-gradient(circle at 35% 30%, #fff0b8, #d9ad55 40%, #7a5420 85%);
}
.bw-rp--top-j { top: calc(-2% - 4px); }
.bw-rp--bot-j { bottom: -4px; }
.bw-rvalve { position: absolute; z-index: 1; left: calc(var(--u) * -1.6); bottom: -18px; width: 50px; transition: rotate 1.2s cubic-bezier(.3, 1.3, .5, 1); }
.bw-machine[data-started] .bw-rvalve { rotate: 220deg; }
.bw-arm {   /* iron brackets holding the tube to the housing */
  position: absolute;
  z-index: 0;
  left: calc(var(--u) * -2.4);
  width: calc(var(--u) * 2.4 + 22%);
  height: 12px;
  background: linear-gradient(180deg, #6d6158, #3b3430 40%, #1c1612);
  box-shadow: 0 3px 4px rgb(0 0 0 / 0.6);
  border-radius: 2px;
}
.bw-arm--1 { top: 30%; }
.bw-arm--2 { top: 70%; }
.bw-collar {
  position: absolute;
  z-index: 3;
  left: -6%;
  right: -6%;
  height: 16px;
  border-radius: 4px;
  background: url("assets/tex-brass.webp") 0 0 / 120px auto, linear-gradient(180deg, #fff0b8, #d9ad55 30%, #7a5420 80%);
  background-blend-mode: overlay, normal;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.6), inset 0 0 0 1px #4a3110;
}
.bw-collar::before, .bw-collar::after { content: ""; position: absolute; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d6, #7a5420 70%); }
.bw-collar::before { left: 8px; } .bw-collar::after { right: 8px; }
.bw-collar--1 { top: calc(30% - 8px + 6px); }
.bw-collar--2 { top: calc(70% - 8px + 6px); }
.bw-reservoir { inset: 8% 22% 12%; }
@media (prefers-reduced-motion: reduce) {
  .bw-bubbles i, .bw-bubbles::before { animation: none !important; opacity: 0.4; }
}

/* =========================================================
   v5 — slide-out on load, solid nameplate, clock, reserve
   ========================================================= */
/* panels come out shortly after the page loads (no more hover peeking) */
.bw-machine:not([data-started]):hover > .bw-left,
.bw-machine:not([data-started]):hover > .bw-right { translate: none; }
.bw-machine:not([data-ready]) > .bw-left { translate: 60% 0; opacity: 0.6; }
.bw-machine:not([data-ready]) > .bw-right { translate: -80% 0; opacity: 0.6; }
.bw-machine[data-ready] > .bw-left,
.bw-machine[data-ready] > .bw-right { translate: none; opacity: 1; }
.bw-machine:not([data-started]) .bw-plate { translate: none; }
.bw-machine:not([data-ready]) .bw-plate { translate: 0 -40%; opacity: 0; }
.bw-plate { transition: translate 0.8s cubic-bezier(.3, 1.5, .5, 1) 0.3s, opacity 0.4s 0.3s; }

/* nameplate: a thick cast-brass plate clamped to the housing */
.bw-plate {
  clip-path: none;
  background: none;
  filter: drop-shadow(0 6px 6px rgb(0 0 0 / 0.6));
  padding: 0;
  margin-bottom: calc(var(--u) * -0.9);
}
.bw-plate::before {   /* the plate's thickness: a darker edge below the face */
  content: "";
  position: absolute;
  inset: 7px 0 -7px;
  background: linear-gradient(180deg, #7a5420, #4a3110 60%, #2a1a08);
  clip-path: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%);
}
.bw-plate__face {
  position: relative;
  padding: calc(var(--u) * 0.6) calc(var(--u) * 3.2) calc(var(--u) * 0.55);
  text-align: center;
  background: url("assets/tex-brass.webp") 0 0 / 220px auto, linear-gradient(180deg, #fff0b8 0%, #e6bc62 14%, #c08e34 46%, #8a5f22 60%, #d9ad55 84%, #a87526 100%);
  background-blend-mode: overlay, normal;
  clip-path: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%);
}
.bw-plate__face::before {   /* engraved inner border: a recessed panel */
  content: "";
  position: absolute;
  inset: 5px 14px;
  z-index: 0;
  background:
    linear-gradient(180deg, rgb(60 35 8 / 0.55), rgb(255 240 190 / 0.45)) border-box;
  clip-path: polygon(3.2% 0, 96.8% 0, 100% 50%, 96.8% 100%, 3.2% 100%, 0 50%);
}
.bw-plate__face::after {
  content: "";
  position: absolute;
  inset: 7px 16px;
  z-index: 0;
  background: url("assets/tex-brass.webp") 40px 0 / 220px auto, linear-gradient(180deg, #d9ad55, #b8862f 50%, #c99a44);
  background-blend-mode: overlay, normal;
  clip-path: polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0 50%);
}
.bw-plate__face > * { position: relative; z-index: 1; }
.bw-plate__face .bw-screw { position: absolute; z-index: 2; }
.bw-plate b { text-shadow: 0 1px 0 rgb(255 240 190 / 0.8), 0 -1px 0 rgb(0 0 0 / 0.5), 0 2px 2px rgb(0 0 0 / 0.25); }
.bw-plate__clamp {    /* brass clamps that hold the plate to the top of the housing */
  position: absolute;
  top: 62%;
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 2.4);
  z-index: -1;
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 72%, #fff6d6 0 8%, #b8862f 22%, #4a3110 34%, transparent 38%),
    linear-gradient(90deg, #7a5420, #d9ad55 30%, #fff0b8 45%, #b8862f 65%, #5b3a12);
  box-shadow: 0 3px 4px rgb(0 0 0 / 0.6);
}
.bw-plate__clamp--l { left: 14%; }
.bw-plate__clamp--r { right: 14%; }

/* left cabinet: a real clock instead of the small gauge */
.bw-minigauge { display: none; }
.bw-niche .bw-bulb { left: 9cqw; top: 8cqw; width: 22cqw; }
.bw-clock {
  position: absolute;
  z-index: 4;
  left: 6cqw;
  top: 258cqw;
  width: 88cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 62%, rgb(0 0 0 / 0.25) 66%, transparent 67%),
    radial-gradient(circle at 45% 40%, #fbf3e2, #efe2c6 60%, #d9c7a0),
    #efe2c6;
  box-shadow:
    0 0 0 3cqw #7a5420,
    0 0 0 5cqw #d9ad55,
    0 0 0 6cqw #fff0b8,
    0 0 0 8cqw #8a5f22,
    0 0 0 8.6cqw #2a1a08,
    4px 8px 10px 8cqw rgb(0 0 0 / 0.55),
    inset 0 3px 8px rgb(0 0 0 / 0.45);
}
.bw-clock svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bw-clock__num { font: 700 7.6px/1 "Vollkorn", Georgia, serif; fill: #3a2508; text-anchor: middle; }
.bw-clock__brand { font: 700 4.2px/1 "Arsenal SC", Georgia, serif; letter-spacing: .18em; fill: #7a5420; text-anchor: middle; }
.bw-clock i, .bw-clock b {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 100%;
  translate: -50% -100%;
  border-radius: 2px;
}
.bw-clock__h { width: 4.4cqw; height: 22cqw; rotate: var(--h, 0deg); background: linear-gradient(90deg, #1a120a, #3a2a1c, #1a120a); clip-path: polygon(50% 0, 100% 30%, 70% 100%, 30% 100%, 0 30%); }
.bw-clock__m { width: 3.2cqw; height: 32cqw; rotate: var(--m, 0deg); background: linear-gradient(90deg, #1a120a, #3a2a1c, #1a120a); clip-path: polygon(50% 0, 100% 18%, 65% 100%, 35% 100%, 0 18%); }
.bw-clock__s { width: 1cqw; height: 36cqw; rotate: var(--s, 0deg); background: #b5371e; transition: rotate 0.25s cubic-bezier(.4, 2.2, .6, 1); }
.bw-clock__pin { width: 7cqw; height: 7cqw; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d6, #b8862f 50%, #4a3110); }

/* right panel: plumbing anchored inside the column, reserve plate */
.bw-rp--top-v { top: 3%; height: 7%; }
.bw-rp--top-h { top: 3%; }
.bw-rp--top-j { top: calc(3% - 4px); }
.bw-rp--bot-v { bottom: 3%; height: 7%; }
.bw-rp--bot-h { bottom: 3%; }
.bw-rp--bot-j { bottom: calc(3% - 4px); }
.bw-rvalve { bottom: calc(3% - 18px); }
.bw-reservoir { inset: 9% 22% 22%; }
.bw-reservoir__water { transition: height 0.8s ease-out; }
.bw-remaining {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-top: calc(var(--u) * 0.7);
  padding: 6px 8px 5px;
  min-width: 140%;
  border-radius: 3px;
  background: url("assets/tex-brass.webp") 0 0 / 140px auto, linear-gradient(180deg, #fff0b8, #d9ad55 18%, #b8862f 50%, #7a5420 62%, #d9ad55 85%, #b8862f);
  background-blend-mode: overlay, normal;
  box-shadow: inset 0 0 0 1px #4a3110, 0 3px 5px rgb(0 0 0 / 0.6);
}
.bw-remaining small { font: 700 9px/1 "Arsenal SC", Georgia, serif; letter-spacing: .2em; color: #3a2508; }
.bw-remaining b {
  padding: 4px 6px;
  font: 700 15px/1 "Courier Prime", monospace;
  letter-spacing: .12em;
  color: #c9fff9;
  background: linear-gradient(180deg, #000, #22201d 30% 70%, #000);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
}
.bw-reservoir { grid-template-rows: auto 1fr auto auto auto; }
.bw-rp--bot-v { height: 20%; }
.bw-remaining { position: relative; z-index: 2; }

/* =========================================================
   v6 — plumbed clock cabinet, glass tube volume, reserve links
   ========================================================= */
/* ---- left cabinet: more pipework, clock sits on the riser */
.bw-np--v3 { left: 46cqw; top: 232cqw; width: 9cqw; height: 160cqw; }
.bw-np--v4 { left: 85cqw; top: 150cqw; width: 8cqw; height: 245cqw; }
.bw-np--h2 { left: 0; top: 388cqw; width: 100cqw; height: 9cqw; background: linear-gradient(180deg, #ffd2b0, #d07f4a 25%, #8e4a23 70%, #47200c); }
.bw-np--h3 { left: 55cqw; top: 150cqw; width: 34cqw; height: 7cqw; background: linear-gradient(180deg, #ffd2b0, #d07f4a 25%, #8e4a23 70%, #47200c); }
.bw-np--j3, .bw-np--j4, .bw-np--j5 {
  width: 17cqw; height: 6cqw; border-radius: 2px;
  background: linear-gradient(90deg, #7a5420, #d9ad55 30%, #fff0b8 45%, #b8862f 65%, #7a5420);
  z-index: 5;
}
.bw-np--j3 { left: 42cqw; top: 252cqw; }   /* collar above the clock */
.bw-np--j4 { left: 42cqw; top: 336cqw; }   /* collar below the clock */
.bw-np--j5 { left: 81cqw; top: 300cqw; width: 16cqw; }
.bw-knot {
  position: absolute;
  z-index: 2;
  width: 13cqw;
  height: 13cqw;
  border-radius: 3px;
  background: radial-gradient(circle at 35% 30%, #ffe0c4, #c8703c 45%, #5a2410 90%);
  box-shadow: 1px 2px 3px rgb(0 0 0 / 0.6), inset 0 0 0 1px rgb(40 15 5 / 0.6);
}
.bw-niche .bw-clock {
  left: 21cqw;
  top: 266cqw;
  width: 60cqw;
  z-index: 6;
  box-shadow:
    0 0 0 2cqw #7a5420,
    0 0 0 3.5cqw #d9ad55,
    0 0 0 4.3cqw #fff0b8,
    0 0 0 5.8cqw #8a5f22,
    0 0 0 6.3cqw #2a1a08,
    3px 6px 8px 6cqw rgb(0 0 0 / 0.55),
    inset 0 2px 6px rgb(0 0 0 / 0.45);
}
.bw-niche .bw-clock__num { font-size: 8.4px; }
.bw-niche .bw-clock__h { width: 3.2cqw; height: 15cqw; }
.bw-niche .bw-clock__m { width: 2.4cqw; height: 22cqw; }
.bw-niche .bw-clock__s { width: 0.8cqw; height: 25cqw; }
.bw-niche .bw-clock__pin { width: 5cqw; height: 5cqw; }
.bw-niche .bw-bulb { left: 60cqw; top: 352cqw; width: 20cqw; z-index: 6; }
.bw-niche .bw-bulb::before { /* bulb socket hangs from the bottom pipe */
  content: ""; position: absolute; left: 38%; width: 24%; top: -14cqw; height: 14cqw;
  background: linear-gradient(90deg, #7a5420, #d9ad55 40%, #fff0b8 50%, #7a5420);
}
.bw-niche .bw-bulb { transform: rotate(180deg); }

/* ---- right: a rounder glass tube, slimmer bands, a domed lid */
.bw-reservoir__glass {
  border-radius: 10px / 6px;
  background:
    linear-gradient(90deg,
      rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.15) 8%,
      rgb(255 255 255 / 0.10) 14%, rgb(255 255 255 / 0.65) 19%, rgb(255 255 255 / 0.12) 25%,
      transparent 40% 66%,
      rgb(255 255 255 / 0.22) 78%, rgb(255 255 255 / 0.04) 84%,
      rgb(0 0 0 / 0.25) 92%, rgb(0 0 0 / 0.6) 100%),
    rgb(20 34 34 / 0.55);
  box-shadow: inset 0 6px 8px rgb(0 0 0 / 0.55), inset 0 -6px 8px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.18);
}
.bw-reservoir__glass::after {  /* front reflection over the water */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 15%, rgb(255 255 255 / 0.45) 19%, transparent 24%, transparent 76%, rgb(255 255 255 / 0.18) 80%, transparent 84%);
}
.bw-reservoir__water {
  background:
    linear-gradient(90deg, rgb(0 30 28 / 0.55), transparent 22% 70%, rgb(0 30 28 / 0.6)),
    linear-gradient(180deg, #b9fbf4, #4fd9cc 14%, #2aa69b 100%) !important;
}
.bw-collar { height: 8px; left: -3%; right: -3%; }
.bw-collar::before, .bw-collar::after { top: 1px; width: 6px; height: 6px; }
.bw-reservoir__cage { background: linear-gradient(90deg, transparent 47.5%, rgb(184 134 47 / 0.85) 47.5% 52.5%, transparent 52.5%); }
.bw-reservoir__cap:first-child {    /* domed lid with a knob */
  position: relative;
  height: calc(var(--u) * 2.4);
  margin-inline: -16%;
  border-radius: 50% 50% 5px 5px / 80% 80% 5px 5px;
  background: url("assets/tex-brass.webp") 0 0 / 160px auto, radial-gradient(ellipse at 38% 30%, #fff6d6 0 10%, #e6bc62 30%, #a87526 70%, #5b3a12);
  background-blend-mode: overlay, normal;
}
.bw-reservoir__cap:first-child::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--u) * -0.7);
  width: calc(var(--u) * 0.9);
  height: calc(var(--u) * 0.9);
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d6, #d9ad55 45%, #5b3a12);
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.5);
}
.bw-reservoir__cap:first-child::after {  /* rim under the lid */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -3px; height: 5px; border-radius: 2px;
  background: linear-gradient(180deg, #fff0b8, #7a5420);
}
.bw-reservoir__cap:nth-child(3) { height: calc(var(--u) * 1.3); margin-inline: -12%; }
.bw-rp--top-v { top: 1%; height: 6%; }
.bw-rp--top-h { top: 1%; }
.bw-rp--top-j { top: calc(1% - 4px); }

/* lamp → reserve plate → housing, joined with brass pipe */
.bw-lamp { position: relative; z-index: 2; margin-top: calc(var(--u) * 1.3); }
.bw-lamp::before {   /* pipe from the bottom cap down to the lamp */
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 8px; height: calc(var(--u) * 1.3 + 4px); translate: -50% 0; z-index: -1;
  background: linear-gradient(90deg, #5b3a12, #d9ad55 35%, #fff0b8 50%, #a87526 70%, #5b3a12);
}
.bw-remaining { margin-top: calc(var(--u) * 1); }
.bw-remaining::before {   /* lamp → plate */
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 8px; height: calc(var(--u) * 1 + 4px); translate: -50% 0; z-index: -1;
  background: linear-gradient(90deg, #5b3a12, #d9ad55 35%, #fff0b8 50%, #a87526 70%, #5b3a12);
}
.bw-remaining::after {    /* plate → player housing */
  content: ""; position: absolute; right: 100%; top: 50%; height: 9px; width: calc(13.8% + var(--u) * 1.6 + 6px); translate: 0 -50%; z-index: -1;
  background: linear-gradient(180deg, #fff0b8, #d9ad55 30%, #a87526 70%, #5b3a12);
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.5);
}

/* =========================================================
   v7 — tidy plumbing, mounted bulbs, visible slide-out
   ========================================================= */
/* slide-out from under the player, slow enough to see */
.bw-machine > .bw-left, .bw-machine > .bw-right { transition: translate 1.5s cubic-bezier(.2, .9, .25, 1.1), opacity 0.8s; }
.bw-machine > .bw-right { transition-delay: 0.35s; }
.bw-machine:not([data-ready]) > .bw-left { translate: 100% 0; opacity: 1; }
.bw-machine:not([data-ready]) > .bw-right { translate: -100% 0; opacity: 1; }

/* amber bulbs on the frame: glass domes seated in brass sockets */
.bw-bulb-cup {
  top: calc(var(--_u) * -0.55);
  width: calc(var(--_u) * 1.1);
  height: calc(var(--_u) * 0.95);
  border-radius: 50% 50% 0 0 / 90% 90% 0 0;
  background: radial-gradient(ellipse at 45% 70%, #fff2cf 0 10%, #ffb347 38%, #8a3c0a 85%);
  box-shadow: inset 0 -2px 3px rgb(0 0 0 / 0.4), inset 2px 2px 3px rgb(255 255 255 / 0.4);
}
.bw-bulb-cup::after {   /* socket */
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  top: 100%;
  height: calc(var(--_u) * 0.45);
  border-radius: 2px 2px 4px 4px;
  background: linear-gradient(180deg, #fff0b8, #d9ad55 35%, #7a5420);
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.55);
}
.bw-gauge:has(.bw-play:not([data-paused])) .bw-bulb-cup {
  box-shadow: inset 0 -2px 3px rgb(0 0 0 / 0.3), inset 2px 2px 3px rgb(255 255 255 / 0.5), 0 -4px 14px 3px rgb(255 179 71 / 0.55);
}

/* bigger play icon on the console */
.bw-key--play svg { width: 62%; height: 62%; }

/* left cabinet: a fuller pipe bed behind the gears */
.bw-np--v5 { left: 2cqw; top: -2cqw; width: 9cqw; height: 404cqw; }
.bw-np--v6 { left: 30cqw; top: -2cqw; width: 6cqw; height: 72cqw; opacity: 0.9; }
.bw-np--h4 { left: 2cqw; top: 69cqw; width: 75cqw; height: 7cqw; background: linear-gradient(180deg, #ffd2b0, #d07f4a 25%, #8e4a23 70%, #47200c); }
.bw-np--h5 { left: 2cqw; top: 204cqw; width: 90cqw; height: 7cqw; background: linear-gradient(180deg, #ffd2b0, #d07f4a 25%, #8e4a23 70%, #47200c); }
.bw-niche .bw-gear { z-index: 4; }
.bw-niche .bw-gear--a { z-index: 5; }
/* bulb hangs from a bent pipe that comes off the right riser */
.bw-niche .bw-bulb { transform: none; left: 50cqw; top: 352cqw; width: 18cqw; }
.bw-niche .bw-bulb::before { display: none; }
.bw-niche .bw-bulb::after { top: -16%; bottom: auto; }
.bw-np--bv { left: 56.5cqw; top: 327cqw; width: 5cqw; height: 24cqw; z-index: 5;
  background: linear-gradient(90deg, #5b3a12, #d9ad55 35%, #fff0b8 50%, #a87526 70%, #5b3a12); }
.bw-np--bh { left: 56.5cqw; top: 324cqw; width: 31cqw; height: 5cqw; z-index: 5;
  background: linear-gradient(180deg, #fff0b8, #d9ad55 35%, #a87526 70%, #5b3a12); }

/* right column: clean joints */
.bw-arm { display: none; }
.bw-rp--top-v { top: 1%; height: 7.2%; }
.bw-reservoir__cap:first-child::before {   /* inlet flange instead of a loose knob */
  top: calc(var(--u) * -0.35);
  width: calc(var(--u) * 1.5);
  height: calc(var(--u) * 0.6);
  border-radius: 3px;
  background: linear-gradient(90deg, #7a5420, #d9ad55 30%, #fff0b8 45%, #b8862f 65%, #7a5420);
}
.bw-reservoir__cap:first-child::after {   /* a proper rim where the lid meets the glass */
  left: 2%; right: 2%; bottom: -5px; height: 9px; border-radius: 3px;
  background: url("assets/tex-brass.webp") 0 0 / 120px auto, linear-gradient(180deg, #fff0b8, #d9ad55 40%, #7a5420);
  background-blend-mode: overlay, normal;
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.5), inset 0 0 0 1px #4a3110;
}
/* lamp in a brass ring with collars where the pipe enters */
.bw-lamp { box-shadow: 0 0 0 3px #b8862f, 0 0 0 5px #fff0b8, 0 0 0 6px #4a3110, 0 3px 6px 6px rgb(0 0 0 / 0.4); }
.bw-machine[data-playing] .bw-lamp { box-shadow: 0 0 0 3px #b8862f, 0 0 0 5px #fff0b8, 0 0 0 6px #4a3110, 0 0 18px 6px rgb(79 217 204 / 0.6); }
.bw-lamp::after, .bw-remaining > small::before { content: none; }
/* plate → housing: pipe at the plate's middle with a wall flange */
.bw-remaining::after {
  width: calc(13.8% + var(--u) * 1.6 + 10px);
  height: 10px;
  background:
    linear-gradient(90deg, #7a5420 0 8px, transparent 8px),
    linear-gradient(180deg, #fff0b8, #d9ad55 30%, #a87526 70%, #5b3a12);
}
/* bottom valve sits on the vertical pipe */
.bw-rvalve { left: calc(50% - 25px); bottom: 9%; width: 50px; z-index: 1; }
.bw-rp--bot-h { display: none; }
.bw-rp--bot-v { bottom: 2%; height: 21%; }
.bw-rp--bot-j { left: calc(50% - 13px); width: 26px; height: 10px; bottom: 2%; border-radius: 3px;
  background: linear-gradient(90deg, #7a5420, #d9ad55 30%, #fff0b8 45%, #b8862f 65%, #7a5420); }

/* =========================================================
   v8 — one connected pipe network, instrument cluster,
   banded sight glass, fitted joints on the right
   ========================================================= */
.bw-plumbing { position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 1; overflow: visible; }
.bw-niche .bw-np, .bw-niche .bw-knot { display: none; }
/* gauge needles idle low, rise and tremble while playing */
.bw-cg-needle { transform-box: view-box; rotate: -100deg; transition: rotate 1.6s cubic-bezier(.3, 1.4, .5, 1); }
.bw-machine[data-playing] .bw-cg-needle.n1 { animation: bw-tr1 1.7s ease-in-out infinite; }
.bw-machine[data-playing] .bw-cg-needle.n2 { animation: bw-tr2 2.3s ease-in-out infinite; }
.bw-machine[data-playing] .bw-cg-needle.n3 { animation: bw-tr3 1.3s ease-in-out infinite; }
.bw-machine[data-playing] .bw-cg-needle.n4 { animation: bw-rpm 0.9s linear infinite; }
@keyframes bw-rpm { from { rotate: -100deg; } 50% { rotate: 90deg; } to { rotate: -100deg; } }
.bw-machine[data-playing] .bw-cg-needle.n1 {} @keyframes bw-tr1 { 0%,100% { rotate: 40deg; } 50% { rotate: 31deg; } }
.bw-machine[data-playing] .bw-cg-needle.n2 {} @keyframes bw-tr2 { 0%,100% { rotate: 10deg; } 50% { rotate: 18deg; } }
.bw-machine[data-playing] .bw-cg-needle.n3 {} @keyframes bw-tr3 { 0%,100% { rotate: 70deg; } 50% { rotate: 62deg; } }
.bw-cg-water { transform-box: view-box; transform-origin: 77px 83px; scale: 1 0.25; transition: scale 2s ease; }
.bw-machine[data-playing] .bw-cg-water { scale: 1 1; }

/* gears seated on the manifolds */
.bw-niche .bw-gear--b { left: 2cqw; top: 92cqw; width: 40cqw; z-index: 4; }
.bw-niche .bw-gear--c { left: 58cqw; top: 95cqw; width: 33cqw; z-index: 4; }
.bw-niche .bw-gear--a { left: 15cqw; top: 124cqw; width: 66cqw; z-index: 5; }
.bw-niche .bw-gear--d { left: 3cqw; top: 186cqw; width: 30cqw; z-index: 4; }
.bw-niche .bw-gear--e { left: 61cqw; top: 184cqw; width: 33cqw; z-index: 4; }
.bw-machine[data-playing] .bw-gear--d img { animation: bw-spin 9.33s linear infinite reverse; }
.bw-machine[data-playing] .bw-gear--e img { animation: bw-spin 7.78s linear infinite reverse; }
.bw-gear { position: absolute; }
.bw-niche .bw-handwheel { left: 13cqw; top: 225cqw; width: 30cqw; z-index: 6; }
.bw-niche .bw-clock { left: 21cqw; top: 266cqw; }
.bw-np--j3, .bw-np--j4, .bw-np--j5 { display: none; }
/* two bulbs on stems under the bottom line */
.bw-niche .bw-bulb { left: 15cqw; top: 368cqw; width: 14cqw; }
.bw-niche .bw-bulb--2 { left: 31cqw; }
.bw-niche .bw-bulb::after { top: -10%; height: 16%; }
.bw-machine[data-playing] .bw-bulb--2 { animation: bw-flick2 2.6s steps(4) infinite; }

/* right column: banded sight glass */
.bw-collar { display: none; }
.bw-bands {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  z-index: 3;
  margin-inline: -5%;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(16.66% - 6px), #fff0b8 calc(16.66% - 6px), #d9ad55 calc(16.66% - 4px), #8a5f22 calc(16.66% - 1px), #4a3110 16.66%);
  -webkit-mask: linear-gradient(#000 0 0);
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.6));
}
.bw-reservoir__glass { grid-row: 2; grid-column: 1; }
.bw-reservoir { grid-template-columns: 1fr; }
/* lamp: brass sleeves where the pipe enters above and below */
.bw-lamp::after {
  content: "" !important;
  position: absolute;
  left: 50%;
  top: -9px;
  width: 16px;
  height: calc(100% + 18px);
  translate: -50% 0;
  z-index: -1;
  border-radius: 2px;
  background: linear-gradient(90deg, #5b3a12, #d9ad55 35%, #fff0b8 50%, #a87526 70%, #5b3a12) top / 100% 6px no-repeat,
              linear-gradient(90deg, #5b3a12, #d9ad55 35%, #fff0b8 50%, #a87526 70%, #5b3a12) bottom / 100% 6px no-repeat;
}
/* plate → housing: pipe with a bolted wall flange at the housing */
.bw-remaining::after {
  height: 20px;
  width: calc(13.8% + var(--u) * 1.6 + 14px);
  background:
    radial-gradient(circle, #3a2508 0 1px, transparent 1.6px) 3px 3px / 6px 14px no-repeat,
    radial-gradient(circle, #3a2508 0 1px, transparent 1.6px) 3px 13px / 6px 6px no-repeat,
    linear-gradient(90deg, #8a5f22, #fff0b8 40%, #b8862f 70%, #4a3110) 0 0 / 9px 100% no-repeat,
    linear-gradient(180deg, transparent 5px, #fff0b8 5px, #d9ad55 8px, #a87526 12px, #5b3a12 15px, transparent 15px) 0 0 / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.55));
}
/* ended: show the poster again instead of a black frame */
.bw-gauge:has(.bw-play[data-ended]) > media-poster { opacity: 1; }

/* small players (kept last so they win over the earlier layers) */
@container bw (max-width: 620px) {
  .bw-gauge { padding: 16px; }
  .bw-regulator { width: calc(var(--_u) * 5.5); margin-inline: 4px; }
  .bw-dial-wrap { display: none; }
}
@container bw (max-width: 440px) {
  .bw-regulator, .bw-key--pip, .bw-key--rate { display: none; }
  .bw-row { gap: 8px; }
  .bw-console { padding: 10px 12px 12px; }
  .bw-brackets i { width: calc(var(--_u) * 3.4); height: calc(var(--_u) * 3.4); }
  .bw-osd { display: none; }
}

/* Mux media element sits in the screen cell like a <video> */
.bw-gauge > mux-video,
.bw-gauge > video {
  grid-area: 1 / 1;
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0c0907;
  border-radius: calc(var(--_u) * 0.5);
  overflow: hidden;
  object-fit: var(--media-object-fit, cover);
}
.bw-gauge > mux-video video { width: 100%; height: 100%; object-fit: var(--media-object-fit, cover); }
.bw-gauge:fullscreen > mux-video { max-height: calc(100vh - 12rem); }

/* v9 — fixes */
.bw-clock .bw-clock__pin { translate: -50% -50%; }
.bw-clock .bw-clock__h, .bw-clock .bw-clock__m, .bw-clock .bw-clock__s { transform-origin: 50% 100%; }
.bw-key--seek svg { translate: none; width: 48%; height: 48%; }
.bw-gauge { --_key: calc(var(--_u) * 3.05); }
.bw-counter media-time { font-size: calc(var(--_u) * 1.15); }
.bw-lamp { z-index: auto; }
.bw-lamp::after { content: none !important; }
.bw-remaining { z-index: auto; }
.bw-gauge { --_key: calc(var(--_u) * 2.9); }
.bw-regulator { flex: none; width: calc(var(--_u) * 7.5); }
.bw-row { gap: calc(var(--_u) * 0.55); }
@container bw (max-width: 980px) { .bw-key--pip { display: none; } }
@container bw (max-width: 620px) { .bw-regulator { width: calc(var(--_u) * 5.5); } }

/* v10 — polish */
/* 1x label bigger */
.bw-key--rate::after { font-size: calc(var(--_u) * 0.95); }
/* sight glass: dark etched marks, fewer bands */
.bw-reservoir__marks {
  inset: 3% 6% 3% auto;
  width: 24%;
  background: repeating-linear-gradient(180deg, transparent 0 calc(10% - 2px), rgb(6 30 28 / 0.65) calc(10% - 2px) 10%);
  mix-blend-mode: multiply;
}
.bw-bands {
  background: repeating-linear-gradient(180deg, transparent 0 calc(20% - 6px), #fff0b8 calc(20% - 6px), #d9ad55 calc(20% - 4px), #8a5f22 calc(20% - 1px), #4a3110 20%);
}
/* serial plate: larger, rounded, sits on the bottom bezel */
.bw-serial {
  bottom: calc(var(--_u) * -0.35);
  padding: calc(var(--_u) * 0.28) calc(var(--_u) * 1.3);
  font-size: calc(var(--_u) * 0.68);
  letter-spacing: 0.22em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--_brass-dk), inset 0 1px 0 rgb(255 245 210 / 0.7), 0 3px 5px rgb(0 0 0 / 0.6);
}
.bw-serial::before, .bw-serial::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--_u) * 0.45);
  height: calc(var(--_u) * 0.45);
  translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d6, #b8862f 50%, #3a2508);
}
.bw-serial::before { left: calc(var(--_u) * 0.45); }
.bw-serial::after { right: calc(var(--_u) * 0.45); }
/* amber lamps: mounted on top of the frame, standing up */
.bw-bulb-cup { top: calc(var(--_u) * -1.55); }
.bw-bulb-cup::after { top: 100%; height: calc(var(--_u) * 0.5); }
.bw-plate__face .bw-screw { width: calc(var(--u) * 1.05); height: calc(var(--u) * 1.05); }
.bw-plate__face .bw-screw:first-child { left: calc(var(--u) * 1.6); background:
  linear-gradient(20deg, transparent 44%, rgb(30 18 6 / 0.85) 44% 56%, transparent 56%),
  radial-gradient(circle at 36% 30%, #fff6d6 0 12%, #d9ad55 34%, #7a5420 70%, #2a1a08); }
.bw-plate__face .bw-screw:nth-child(2) { right: calc(var(--u) * 1.6); background:
  linear-gradient(115deg, transparent 44%, rgb(30 18 6 / 0.85) 44% 56%, transparent 56%),
  radial-gradient(circle at 36% 30%, #fff6d6 0 12%, #d9ad55 34%, #7a5420 70%, #2a1a08); }

.bw-reservoir__marks { background: repeating-linear-gradient(180deg, transparent 0 calc(10% - 2px), rgb(4 22 20 / 0.85) calc(10% - 2px) 10%); mix-blend-mode: normal; opacity: 0.8; }

/* v11 */
.bw-plate__face .bw-screw { width: calc(var(--u) * 0.9); height: calc(var(--u) * 0.9); }
.bw-machine:not([data-ready]) .bw-plate { translate: none !important; opacity: 1 !important; }
.bw-plate { transition: none; }
.bw-osd { display: none; }
/* rate key grows into an oval for 0.75× / 1.25× etc. */
.bw-key--rate { width: auto; min-width: var(--_key); padding-inline: calc(var(--_u) * 0.75); border-radius: 999px; }
.bw-key--rate::before { inset: 14% 10%; border-radius: 999px; }
.bw-key--rate::after { position: relative; z-index: 1; white-space: nowrap; }

/* =========================================================
   v12 — tighter console, settings menu (speed + quality)
   ========================================================= */
/* compact odometer: one plate, two drums, tighter digits */
.bw-counter { gap: calc(var(--_u) * 0.25); padding: calc(var(--_u) * 0.22); }
.bw-counter media-time { font-size: calc(var(--_u) * 0.95); letter-spacing: 0.3ch; padding: calc(var(--_u) * 0.28) 0.1ch calc(var(--_u) * 0.28) 0.2ch;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.7), transparent 30% 70%, rgb(0 0 0 / 0.7)), repeating-linear-gradient(90deg, #22201d 0 1.13ch, transparent 1.13ch 1.3ch); }
.bw-counter media-time-separator { font-size: calc(var(--_u) * 0.75); }
.bw-key--rate { display: none; }
.bw-regulator { width: calc(var(--_u) * 6.5); }
/* settings key */
.bw-key--settings svg { width: 52%; height: 52%; transition: rotate 0.5s; }
.bw-key--settings[aria-expanded="true"] svg, .bw-key--settings:hover svg { rotate: 60deg; }
/* brass menu */
.bw-menu {
  --media-menu-side-offset: 12px;
  position: relative;
  box-sizing: border-box;
  width: var(--media-menu-width);
  min-width: 200px;
  max-width: var(--media-menu-available-width, none);
  height: var(--media-menu-height);
  max-height: var(--media-menu-available-height, none);
  overflow: hidden;
  color: var(--_cream);
  font: 700 calc(var(--_u) * 0.8) / 1 var(--_label);
  letter-spacing: 0.1em;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(30 20 12 / 0.35), rgb(10 6 3 / 0.7)),
    var(--_tex-leather, none) center / 260px auto,
    #22180f;
  box-shadow: inset 0 0 0 2px var(--_brass-dk), inset 0 0 0 4px var(--_brass), inset 0 0 0 5px var(--_brass-hi), inset 0 0 0 7px var(--_brass-lo), 0 10px 24px rgb(0 0 0 / 0.7);
  opacity: 0;
  transition: opacity 0.18s, width 0.22s, height 0.22s;
}
.bw-menu[data-open] { opacity: 1; }
.bw-menu__pane {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 12px;
  overflow: auto;
  outline: none;
  transition: translate 0.22s ease-in-out, opacity 0.22s;
}
.bw-menu__pane[data-child-open] { translate: -100% 0; opacity: 0; }
.bw-menu__sub[data-submenu] { z-index: 1; }
.bw-menu__sub[data-starting-style], .bw-menu__sub[data-ending-style] { translate: 100% 0; opacity: 0; pointer-events: none; }
.bw-menu__group { display: grid; gap: 2px; }
.bw-menu__item, .bw-menu__back {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 5px;
  cursor: pointer;
  color: inherit;
}
.bw-menu__back { justify-content: flex-start; color: var(--_brass); border-bottom: 1px solid rgb(232 192 106 / 0.25); border-radius: 5px 5px 0 0; margin-bottom: 4px; }
.bw-menu__item[data-highlighted], .bw-menu__back[data-highlighted] { background: rgb(232 192 106 / 0.16); }
.bw-menu__item[data-highlighted=""] { outline: 2px solid var(--_water); outline-offset: -2px; }
.bw-menu__item[data-availability="unavailable"], .bw-menu__item[hidden] { display: none; }
.bw-menu__hint { display: inline-flex; gap: 8px; align-items: center; color: var(--_water); font-family: var(--_digits); letter-spacing: 0; }
.bw-menu__badge { margin-left: auto; color: var(--_brass); font-size: 0.8em; }
.bw-menu__tick { color: var(--_water); opacity: 0; }
media-menu-radio-item[aria-checked="true"] .bw-menu__tick { opacity: 1; }
media-menu-radio-item[aria-checked="true"] { color: var(--_water); }
.bw-menu sup { font-size: 0.65em; margin-left: 2px; }
@media (prefers-reduced-motion: reduce) { .bw-menu, .bw-menu__pane { transition: none; } }
@container bw (max-width: 440px) { .bw-key--settings { display: inline-grid; } }
.bw-menu__pane[hidden] { display: none; }
@container bw (max-width: 440px) {
  .bw-console { --_key: 40px; }
  .bw-key--play { width: 48px; height: 48px; }
  .bw-row { gap: 6px; }
  .bw-counter media-time { font-size: 14px; }
}

/* v13 — quality key, bigger counter, steam from the reserve valve */
.bw-key--quality .bw-hd { font: 700 calc(var(--_u) * 0.78) / 1 var(--_label); letter-spacing: 0.06em; position: relative; z-index: 1; }
.bw-key--quality[data-hidden], .bw-key--quality[hidden] { display: none; }
.bw-menu__title { padding: 6px 12px 10px; color: var(--_brass); border-bottom: 1px solid rgb(232 192 106 / 0.25); margin-bottom: 4px; }
.bw-counter media-time { font-size: calc(var(--_u) * 1.2); letter-spacing: 0.34ch; background: linear-gradient(180deg, rgb(0 0 0 / 0.7), transparent 30% 70%, rgb(0 0 0 / 0.7)), repeating-linear-gradient(90deg, #22201d 0 1.17ch, transparent 1.17ch 1.34ch); }
.bw-counter media-time-separator { font-size: calc(var(--_u) * 0.95); }
@container bw (max-width: 440px) { .bw-counter media-time { font-size: 15px; } }
/* steam: hissing from the reserve valve while the film plays */
.bw-niche .bw-steam { display: none; }
.bw-steam--valve { position: absolute; z-index: 2; left: calc(50% + 14px); bottom: calc(9% + 34px); width: 20px; height: 20px; }
.bw-steam--valve i { width: 30px; height: 30px; }
.bw-machine[data-playing] .bw-steam--valve i { animation: bw-hiss 1.9s ease-out infinite; }
.bw-machine[data-playing] .bw-steam--valve i:nth-child(2) { animation-delay: 0.45s; }
.bw-machine[data-playing] .bw-steam--valve i:nth-child(3) { animation-delay: 0.95s; }
.bw-machine[data-playing] .bw-steam--valve i:nth-child(4) { animation-delay: 1.4s; }
@keyframes bw-hiss {
  0% { opacity: 0; translate: 0 0; scale: 0.3; }
  15% { opacity: 0.85; }
  100% { opacity: 0; translate: 46px -54px; scale: 2.6; }
}
.bw-machine[data-playing] .bw-rvalve { animation: bw-valve-turn 6s ease-in-out infinite; }
@keyframes bw-valve-turn { 0%, 100% { rotate: 220deg; } 50% { rotate: 260deg; } }
@container bw (max-width: 620px) { .bw-key--quality { width: var(--_key); } }
@media (prefers-reduced-motion: reduce) { .bw-steam--valve i, .bw-rvalve { animation: none !important; } }
.bw-steam--valve i { background: radial-gradient(circle, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0) 65%); }
/* HD key stays visible; dimmed when the stream has only one quality */
.bw-key--quality, .bw-key--quality[hidden], .bw-key--quality[data-hidden] { display: inline-grid !important; }
.bw-key--quality[data-availability="unavailable"], .bw-key--quality[hidden], .bw-key--quality[data-hidden] { opacity: 0.5; cursor: help; filter: grayscale(0.4); }

/* v14 — console row never overflows: drop extras step by step as the gauge narrows */
.bw-row > * { flex-shrink: 0; }
.bw-row > .bw-spacer { flex: 1 1 0; min-width: 0; }
@container bw (max-width: 960px) { .bw-regulator { width: calc(var(--_u) * 4.5); } }
@container bw (max-width: 815px) { .bw-key--seek { display: none; } }
@container bw (max-width: 700px) { .bw-dial-wrap { display: none; } }
@container bw (max-width: 640px) {
  .bw-row { gap: 6px; }
  .bw-counter media-time { font-size: calc(var(--_u) * 1); }
  .bw-regulator { width: calc(var(--_u) * 4.5); }
}
@container bw (max-width: 540px) {
  .bw-counter media-time-separator, .bw-counter media-time[data-type="duration"] { display: none; }
}
@container bw (max-width: 440px) { .bw-regulator { display: none; } }
@container bw (max-width: 400px) {
  .bw-console { --_key: 36px; }
  .bw-key--play { width: 44px; height: 44px; }
  .bw-row { gap: 4px; }
  .bw-counter media-time { font-size: 13px; letter-spacing: 0.2ch; }
}
@container bw (max-width: 300px) { .bw-key--cc { display: none; } }
@container bw (max-width: 500px) and (min-width: 401px) {
  .bw-console { --_key: 40px; }
  .bw-key--play { width: 48px; height: 48px; }
  .bw-row { gap: 6px; }
}
@container bw (max-width: 280px) { .bw-key--quality, .bw-key--quality[hidden], .bw-key--quality[data-hidden] { display: none !important; } }

/* v15 — review fixes: readable small labels, calmer left column */
.bw-plate span { font-size: calc(var(--u) * 0.72); color: #2a1704; text-shadow: 0 1px 0 rgb(255 240 190 / 0.75); }
.bw-serial { font-size: calc(var(--_u) * 0.8); color: #241302; text-shadow: 0 1px 0 rgb(255 240 195 / 0.8); }
.bw-remaining small { font-size: 10px; color: #241302; }
.bw-machine > .bw-left .bw-niche { filter: brightness(0.82) saturate(0.85); }
/* keep the poster on screen until the film is actually started (Mux streams may hide it early) */
.bw-machine:not([data-started]) .bw-gauge > media-poster { opacity: 1; }

/* v16 — the left column works: film clock, live gauges, captions tap, rewind valve */
.bw-machine > .bw-left, .bw-machine > .bw-right { pointer-events: auto; }
.bw-machine .bw-cg-needle { transition: rotate 0.6s cubic-bezier(.3, 1.4, .5, 1); }
.bw-machine[data-playing] .bw-cg-needle.n1, .bw-machine[data-playing] .bw-cg-needle.n2, .bw-machine[data-playing] .bw-cg-needle.n3 { animation: none; }
.bw-clock__m, .bw-clock__h { transition: rotate 0.4s linear; }
.bw-handwheel, .bw-rvalve { cursor: pointer; pointer-events: auto; }
.bw-niche .bw-handwheel { transition: filter 0.3s, rotate 1.2s cubic-bezier(.3, 1.3, .5, 1); }
.bw-handwheel:hover, .bw-rvalve:hover { filter: brightness(1.25) drop-shadow(0 0 6px rgb(255 214 140 / 0.6)); }
.bw-handwheel[data-on] { filter: drop-shadow(0 0 8px rgb(79 217 204 / 0.95)) brightness(1.15); }

/* v17 — swap: the water tank slides out on the left on demand, a reel cabinet (playlist) on the right */
html, body { overflow-x: clip; }
.bw-machine { grid-template-columns: minmax(0, 9%) minmax(0, 1fr) minmax(0, 19%); }
.bw-machine > .bw-right { grid-column: 1; scale: -1 1; }
.bw-machine > .bw-left { grid-column: 3; }
.bw-remaining small, .bw-remaining b { scale: -1 1; }

/* reel cabinet: slides out to the right once the machine is on screen */
.bw-machine > .bw-left { transition: translate 1.4s cubic-bezier(.2, .9, .25, 1.1), opacity 0.8s !important; }
.bw-machine:not([data-ready]) > .bw-left { translate: -100% 0 !important; opacity: 1 !important; }
.bw-machine[data-ready] > .bw-left { translate: none !important; opacity: 1 !important; }
.bw-machine > .bw-left .bw-niche { filter: none; inset: 2% 4% 2% 0; }

/* water tank: hidden behind the housing until the TANK lever is pulled */
.bw-machine > .bw-right { transition: translate 1.1s cubic-bezier(.3, 1.2, .4, 1) !important; opacity: 1 !important; }
.bw-machine:not([data-tank]) > .bw-right { translate: calc(100% + 3rem) 0 !important; }
.bw-machine[data-tank] > .bw-right { translate: none !important; }

.bw-tank-toggle {
  grid-column: 2; grid-row: 2; justify-self: start; align-self: center;
  position: relative; z-index: 3;
  translate: -100% 0;
  width: 26px; height: 120px; padding: 0;
  border: 0; border-radius: 6px 0 0 6px; cursor: pointer;
  background: url("assets/tex-brass.webp") 0 0 / 120px auto, linear-gradient(90deg, #5b3a12, #d9ad55 30%, #fff0b8 50%, #b8862f 75%, #5b3a12);
  background-blend-mode: overlay, normal;
  box-shadow: inset 0 0 0 1px #3a2508, -3px 4px 8px rgb(0 0 0 / 0.55);
  color: #241302; font: 700 11px/1 "Arsenal SC", Georgia, serif; letter-spacing: 0.22em;
  transition: filter 0.2s;
}
.bw-tank-toggle span { display: block; writing-mode: vertical-rl; rotate: 180deg; margin: auto; }
.bw-tank-toggle::before { content: ""; position: absolute; left: 50%; top: 8px; width: 8px; height: 8px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b5371e 55%, #4a0d05); box-shadow: 0 0 0 1px #3a2508; }
.bw-machine[data-tank] .bw-tank-toggle::before { background: radial-gradient(circle at 35% 30%, #e9fffc, #4fd9cc 55%, #0d4f49); box-shadow: 0 0 0 1px #3a2508, 0 0 8px 2px rgb(79 217 204 / 0.7); }
.bw-tank-toggle:hover { filter: brightness(1.15); }
.bw-tank-toggle:focus-visible { outline: 3px solid #4fd9cc; outline-offset: 2px; }

/* reel list */
.bw-reels { display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; }
.bw-reels__head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px 8px; border-bottom: 1px solid rgb(232 192 106 / 0.3); }
.bw-reels__head b { font: 700 13px/1 "Arsenal SC", Georgia, serif; letter-spacing: 0.24em; color: #e8c06a; }
.bw-reels__head small { font: 700 11px/1 "Courier Prime", monospace; color: #8fd8cf; }
.bw-reels__list { list-style: none; margin: 0; padding: 0 2px 0 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; flex: 1; scrollbar-width: thin; scrollbar-color: #8a5f22 transparent; }
.bw-reel {
  display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  width: 100%; padding: 5px; text-align: left; cursor: pointer;
  border: 1px solid rgb(232 192 106 / 0.22); border-radius: 4px;
  background: linear-gradient(180deg, rgb(255 230 180 / 0.06), rgb(0 0 0 / 0.35));
  color: #e8dcc0;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.bw-reel img { grid-row: 1 / 3; width: 58px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px #8a5f22, 0 2px 4px rgb(0 0 0 / 0.6); filter: sepia(0.25); }
.bw-reel__n { display: none; }
.bw-reel__t { font: 600 12.5px/1.15 "Vollkorn", Georgia, serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-reel time { font: 700 11px/1 "Courier Prime", monospace; color: #b9a777; }
.bw-reel:hover { border-color: rgb(232 192 106 / 0.6); background: linear-gradient(180deg, rgb(255 230 180 / 0.12), rgb(0 0 0 / 0.3)); }
.bw-reel:focus-visible { outline: 2px solid #4fd9cc; outline-offset: 1px; }
.bw-reel[aria-current="true"] { border-color: #4fd9cc; background: linear-gradient(180deg, rgb(79 217 204 / 0.18), rgb(0 0 0 / 0.3)); box-shadow: 0 0 10px rgb(79 217 204 / 0.25); }
.bw-reel[aria-current="true"] time { color: #c9fff9; }
.bw-reel[aria-current="true"] img { filter: none; }

/* a warm horizon line behind the machine */
.bw-horizon { position: absolute; z-index: 0; left: -25%; right: -25%; top: 58%; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 180 90 / 0.5) 25%, rgb(255 225 160 / 0.9) 50%, rgb(255 180 90 / 0.5) 75%, transparent);
  box-shadow: 0 0 18px 4px rgb(255 170 80 / 0.25); }
.bw-machine > .bw-plate, .bw-machine > .bw-player, .bw-machine > .bw-left, .bw-machine > .bw-right { z-index: 1; }
.bw-machine > .bw-player { z-index: 2; }

@media (max-width: 760px) { .bw-tank-toggle, .bw-horizon { display: none; } }

/* v18 — smaller tank that hides fully; cabinet with REELS / SETUP that slides in and out */
.bw-machine > .bw-right { align-self: center; height: 80%; }
.bw-machine:not([data-tank]) > .bw-right { translate: calc(100% + 4rem) 0 !important; }
.bw-machine[data-ready]:not([data-reels]) > .bw-left { translate: -110% 0 !important; }
.bw-reels-toggle {
  grid-column: 2; grid-row: 2; justify-self: end; align-self: center;
  position: relative; z-index: 3; translate: 100% 0;
  width: 26px; height: 120px; padding: 0; border: 0; border-radius: 0 6px 6px 0; cursor: pointer;
  background: url("assets/tex-brass.webp") 0 0 / 120px auto, linear-gradient(90deg, #5b3a12, #b8862f 25%, #fff0b8 50%, #d9ad55 70%, #5b3a12);
  background-blend-mode: overlay, normal;
  box-shadow: inset 0 0 0 1px #3a2508, 3px 4px 8px rgb(0 0 0 / 0.55);
  color: #241302; font: 700 11px/1 "Arsenal SC", Georgia, serif; letter-spacing: 0.22em; transition: filter 0.2s;
}
.bw-reels-toggle span { display: block; writing-mode: vertical-rl; margin: auto; }
.bw-reels-toggle::before { content: ""; position: absolute; left: 50%; top: 8px; width: 8px; height: 8px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b5371e 55%, #4a0d05); box-shadow: 0 0 0 1px #3a2508; }
.bw-machine[data-reels] .bw-reels-toggle::before { background: radial-gradient(circle at 35% 30%, #e9fffc, #4fd9cc 55%, #0d4f49); box-shadow: 0 0 0 1px #3a2508, 0 0 8px 2px rgb(79 217 204 / 0.7); }
.bw-reels-toggle:hover { filter: brightness(1.15); }
.bw-reels-toggle:focus-visible { outline: 3px solid #4fd9cc; outline-offset: 2px; }

.bw-reels__head { gap: 4px; padding: 0 0 8px; }
.bw-tab { flex: 1; padding: 6px 4px; border: 1px solid rgb(232 192 106 / 0.25); border-radius: 3px; background: rgb(0 0 0 / 0.3); cursor: pointer;
  font: 700 11px/1 "Arsenal SC", Georgia, serif; letter-spacing: 0.2em; color: #b9a777; }
.bw-tab[aria-selected="true"] { color: #241302; border-color: #3a2508; background: linear-gradient(180deg, #fff0b8, #d9ad55 40%, #b8862f); }
.bw-tab:focus-visible { outline: 2px solid #4fd9cc; outline-offset: 1px; }

.bw-setup { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; color: #e8dcc0; }
.bw-setup[hidden], .bw-reels__list[hidden] { display: none; }
.bw-setup__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 13px/1.2 "Vollkorn", Georgia, serif; }
.bw-seg { display: flex; border: 1px solid #8a5f22; border-radius: 3px; overflow: hidden; }
.bw-seg button { padding: 5px 6px; border: 0; border-left: 1px solid #5b3a12; background: rgb(0 0 0 / 0.35); color: #e8dcc0; font: 700 11px/1 "Courier Prime", monospace; cursor: pointer; }
.bw-seg button:first-child { border-left: 0; }
.bw-seg button[aria-pressed="true"] { background: #4fd9cc; color: #062d29; }
.bw-switch { position: relative; width: 40px; height: 20px; padding: 0; border: 1px solid #8a5f22; border-radius: 999px; background: rgb(0 0 0 / 0.45); cursor: pointer; }
.bw-switch i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d6, #b8862f 55%, #4a3110); transition: left 0.25s; }
.bw-switch[aria-pressed="true"] { background: rgb(79 217 204 / 0.35); border-color: #4fd9cc; }
.bw-switch[aria-pressed="true"] i { left: 22px; }
.bw-seg button:focus-visible, .bw-switch:focus-visible { outline: 2px solid #4fd9cc; outline-offset: 1px; }
.bw-setup__note { margin: 4px 0 0; font: 400 11px/1.4 "Courier Prime", monospace; color: #9c8d68; }
@media (max-width: 760px) { .bw-reels-toggle { display: none; } }

/* v19 — softer machine: rounded plate and corners, no top lamps, levers up top,
   dark start screen, maker's mark moved into the cabinet, a proper phone layout */
.bw-plate::before, .bw-plate__face, .bw-plate__face::before, .bw-plate__face::after { clip-path: none; }
.bw-plate::before { border-radius: 14px; }
.bw-plate__face { border-radius: 12px; }
.bw-plate__face::before { border-radius: 8px; }
.bw-plate__face::after { border-radius: 7px; }
.bw-plate__clamp { display: none; }
.bw-machine:not([data-ready]) .bw-plate, .bw-machine .bw-plate { translate: none !important; opacity: 1 !important; }

.bw-brackets { display: none; }
.bw-gauge { border-radius: calc(var(--_u) * 1.4); }
.bw-screen-frame { border-radius: calc(var(--_u) * 1.1); }
.bw-bulb-cup, .bw-serial { display: none !important; }

.bw-tank-toggle, .bw-reels-toggle { align-self: start; margin-top: 7%; }

/* dark start screen: only the valve and its label shine until the film starts */
.bw-gauge > media-poster img { transition: filter 0.6s; }
.bw-machine:not([data-started]) .bw-gauge > media-poster img { filter: brightness(0.32) saturate(0.7); }
.bw-machine:not([data-started]) .bw-valve { background: radial-gradient(ellipse at center, rgb(255 190 100 / 0.12), transparent 55%); }

.bw-reels__maker { margin-top: auto; padding: 8px 4px 2px; border-top: 1px solid rgb(232 192 106 / 0.25); text-align: center;
  font: 700 9.5px/1.2 "Arsenal SC", Georgia, serif; letter-spacing: 0.2em; color: #a78a52; }

/* narrower desktops: reels without thumbnails so titles stay readable */
@media (max-width: 1180px) {
  .bw-reel { grid-template-columns: 1fr; }
  .bw-reel img { display: none; }
}

/* phones and narrow panes: just the plate, the screen and the console */
@media (max-width: 760px) {
  .bw-machine { grid-template-columns: minmax(0, 1fr) !important; }
  .bw-machine > .bw-plate, .bw-machine > .bw-player { grid-column: 1 !important; }
  .bw-machine > .bw-left, .bw-machine > .bw-right, .bw-tank-toggle, .bw-reels-toggle, .bw-horizon { display: none !important; }
}
.bw-machine > .bw-plate { z-index: 3; }
.bw-reels__maker { font-size: 8.5px; letter-spacing: 0.14em; white-space: nowrap; overflow: hidden; text-overflow: clip; }

/* v20 — tank steam rises upward (not clipped), plate gets the player's brass frame, leather cabinet */
.bw-machine > .bw-right .bw-steam--valve { bottom: calc(9% + 40px); }
@keyframes bw-hiss-up {
  0% { opacity: 0; translate: 0 0; scale: 0.3; }
  15% { opacity: 0.85; }
  100% { opacity: 0; translate: -8px -90px; scale: 2.4; }
}
.bw-machine[data-playing] > .bw-right .bw-steam--valve i { animation-name: bw-hiss-up; }

/* the name plate sits in a brass frame like the screen, bolted onto the top of the housing */
.bw-machine > .bw-plate {
  padding: 7px;
  margin-bottom: calc(var(--u) * -1.1);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.35), transparent 30% 70%, rgb(0 0 0 / 0.35)),
    url("assets/tex-brass.webp") 0 0 / 160px auto,
    linear-gradient(180deg, #fff0b8, #d9ad55 18%, #a87526 55%, #d9ad55 82%, #7a5420);
  background-blend-mode: normal, overlay, normal;
  box-shadow:
    inset 0 0 0 1px #4a3110,
    inset 2px 2px 0 rgb(255 245 210 / 0.7),
    inset -2px -2px 0 rgb(0 0 0 / 0.45),
    inset 0 0 0 5px rgb(60 38 10 / 0.0),
    0 0 0 1px #3a2508,
    0 6px 10px rgb(0 0 0 / 0.55);
  filter: none;
}
.bw-machine > .bw-plate::before { inset: 5px; border-radius: 14px; background: #1a110a; box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.8); }

/* reel cabinet: tooled leather like the console instead of riveted iron */
.bw-machine > .bw-left .bw-niche__inner {
  background:
    linear-gradient(180deg, rgb(30 20 12 / 0.25), rgb(10 6 3 / 0.6)),
    url("assets/tex-leather.webp") center / 320px auto,
    #22180f;
  box-shadow: inset 0 0 0 2px #1a110a, inset 4px 6px 14px rgb(0 0 0 / 0.75), inset -3px -3px 8px rgb(0 0 0 / 0.5);
}
.bw-machine > .bw-left .bw-niche { border-radius: 14px; }
.bw-machine > .bw-left .bw-niche__inner { border-radius: 9px; }
.bw-reel { background: linear-gradient(180deg, rgb(255 230 180 / 0.07), rgb(0 0 0 / 0.45)); }

/* v21 — brass foot plate under the console, bevelled cabinet frame, stop lamp */
.bw-gauge { grid-template-rows: auto auto auto; }
.bw-footplate {
  grid-area: 3 / 1; position: relative; z-index: 1;
  height: calc(var(--_u) * 1.5);
  margin: calc(var(--_u) * 0.55) calc(var(--_u) * 0.9) calc(var(--_u) * -0.35);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.3), transparent 40% 60%, rgb(0 0 0 / 0.35)),
    url("assets/tex-brass.webp") 0 0 / 160px auto,
    var(--_metal);
  background-blend-mode: normal, overlay, normal;
  box-shadow: inset 0 0 0 1px var(--_brass-dk), inset 0 1px 0 rgb(255 245 210 / 0.75), 0 2px 3px rgb(0 0 0 / 0.5);
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--_u) * 0.5);
}
.bw-footplate i { width: calc(var(--_u) * 0.6); height: calc(var(--_u) * 0.6); border-radius: 50%;
  background: linear-gradient(45deg, transparent 44%, rgb(30 18 6 / 0.85) 44% 56%, transparent 56%), radial-gradient(circle at 35% 30%, #fff6d6, #b8862f 55%, #3a2508);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.6); }
.bw-footplate i:nth-child(2) { width: calc(var(--_u) * 4); height: 3px; border-radius: 2px; background: linear-gradient(180deg, rgb(0 0 0 / 0.5), rgb(255 240 200 / 0.4)); box-shadow: none; }
.bw-gauge:fullscreen .bw-footplate { display: none; }

/* cabinet frame: bevelled brass with rivet rows, same metal as the screen frame */
.bw-machine > .bw-left .bw-niche {
  background:
    radial-gradient(circle, #fff3c8 0 1px, var(--_brass-lo, #7a5420) 1.8px, rgb(0 0 0 / 0.5) 2.4px, transparent 3px) 14px 4px / 24px 10px repeat-x,
    radial-gradient(circle, #fff3c8 0 1px, #7a5420 1.8px, rgb(0 0 0 / 0.5) 2.4px, transparent 3px) 14px calc(100% - 4px) / 24px 10px repeat-x,
    linear-gradient(135deg, rgb(255 255 255 / 0.35), transparent 30% 70%, rgb(0 0 0 / 0.35)),
    url("assets/tex-brass.webp") 0 0 / 160px auto,
    linear-gradient(180deg, #fff0b8 0%, #d9ad55 16%, #b8862f 45%, #7a5420 58%, #d9ad55 80%, #b8862f 100%);
  background-blend-mode: normal, normal, normal, overlay, normal;
  padding: 12px;
  box-shadow:
    inset 0 0 0 1px #4a3110,
    inset 2px 2px 0 rgb(255 245 210 / 0.7),
    inset -2px -2px 0 rgb(0 0 0 / 0.45),
    0 0 0 1px #2a1a08,
    0 10px 20px rgb(0 0 0 / 0.6);
}

/* the red lamp above the buffer plate is a stop button */
.bw-machine > .bw-right .bw-lamp { cursor: pointer; pointer-events: auto; transition: filter 0.2s; }
.bw-machine > .bw-right .bw-lamp:hover { filter: brightness(1.3) drop-shadow(0 0 6px rgb(255 120 90 / 0.8)); }

/* v22 — no foot plate, no horizon lines; housing around the console is plain tooled leather;
   lamp hover without filter (so the pipe behind it stays hidden); rivet rows centred in the frame */
.bw-gauge { grid-template-rows: auto auto; }
.bw-gauge {
  background:
    linear-gradient(180deg, rgb(30 20 12 / 0.35), rgb(10 6 3 / 0.6)),
    url("assets/tex-leather.webp") center / calc(var(--_u) * 22) auto,
    #22180f !important;
}

.bw-machine > .bw-right .bw-lamp:hover { filter: none; box-shadow: 0 0 0 2px #fff0b8, 0 0 14px 4px rgb(255 110 80 / 0.75); border-radius: 50%; }
.bw-machine > .bw-left .bw-niche {
  background:
    radial-gradient(circle, #fff3c8 0 1px, #7a5420 1.8px, rgb(0 0 0 / 0.5) 2.4px, transparent 3px) 0 1px / 22px 10px space no-repeat,
    radial-gradient(circle, #fff3c8 0 1px, #7a5420 1.8px, rgb(0 0 0 / 0.5) 2.4px, transparent 3px) 0 calc(100% - 1px) / 22px 10px space no-repeat,
    linear-gradient(135deg, rgb(255 255 255 / 0.35), transparent 30% 70%, rgb(0 0 0 / 0.35)),
    url("assets/tex-brass.webp") 0 0 / 160px auto,
    linear-gradient(180deg, #fff0b8 0%, #d9ad55 16%, #b8862f 45%, #7a5420 58%, #d9ad55 80%, #b8862f 100%);
  background-blend-mode: normal, normal, normal, overlay, normal;
  background-origin: padding-box, padding-box, border-box, border-box, border-box;
}

/* v23 — counter keeps its right edge and breathes; seek keys stay until phone size; tank labels */
.bw-counter { gap: calc(var(--_u) * 0.4); padding: calc(var(--_u) * 0.28) calc(var(--_u) * 0.35); }
.bw-counter media-time { margin-right: 0; padding-right: 0.12ch; }
.bw-row { gap: calc(var(--_u) * 0.7); }
.bw-key--play + .bw-key--seek, .bw-key--play { margin-right: calc(var(--_u) * 0.15); }
.bw-counter { margin-left: calc(var(--_u) * 0.3); }
@container bw (max-width: 815px) { .bw-key--seek { display: inline-grid; } }
@container bw (max-width: 900px) { .bw-dial-wrap { display: none; } }
@container bw (max-width: 760px) { .bw-row { gap: calc(var(--_u) * 0.45); } .bw-regulator { width: calc(var(--_u) * 3.6); } }
@container bw (max-width: 620px) { .bw-key--seek { display: none; } }

/* tank labels: small engraved brass tags so the lamp and the tap explain themselves */
.bw-tag-stop, .bw-tag-rew {
  position: absolute; z-index: 3; scale: -1 1; pointer-events: none;
  padding: 2px 5px; border-radius: 3px;
  font: 700 9px/1 "Arsenal SC", Georgia, serif; letter-spacing: 0.16em; color: #241302;
  background: linear-gradient(180deg, #fff0b8, #d9ad55 40%, #b8862f);
  box-shadow: inset 0 0 0 1px #4a3110, 0 1px 2px rgb(0 0 0 / 0.6);
  white-space: nowrap;
}
.bw-row { gap: calc(var(--_u) * 0.6); }
@container bw (max-width: 820px) { .bw-row { gap: calc(var(--_u) * 0.4); } .bw-regulator { width: calc(var(--_u) * 3.2); } .bw-counter { margin-left: 0; } }
@container bw (max-width: 700px) { .bw-key--seek { display: none; } }
@container bw (max-width: 700px) { .bw-key--seek { display: inline-grid; } }
@container bw (max-width: 760px) and (min-width: 541px) { .bw-console { --_key: 38px; } .bw-key--play { width: 50px; height: 50px; } .bw-counter media-time { font-size: calc(var(--_u) * 1); } }
@container bw (max-width: 600px) { .bw-key--seek { display: none; } }
.bw-tag-stop { left: -4px; top: 61.5%; }
.bw-tag-rew { left: -14px; top: 85.5%; }
@media (max-width: 760px) { .bw-tag-stop, .bw-tag-rew { display: none; } }

/* v24 — narrow players: the console grows downward into two rows instead of dropping keys
   row 1: play · seek −10 · seek +10 · time      row 2: sound · volume · HD · settings · captions · fullscreen */
@container bw (max-width: 600px) {
  .bw-row { flex-wrap: wrap; justify-content: space-between; row-gap: calc(var(--_u) * 0.7); column-gap: 6px; }
  .bw-row > .bw-spacer { flex: 0 0 100%; height: 0; order: 0; }
  .bw-key--seek { display: inline-grid !important; }
  .bw-dial-wrap { display: none !important; }
  .bw-regulator { display: block !important; flex: 1 1 auto; width: auto !important; min-width: 60px; max-width: 140px; }
  .bw-counter media-time-separator, .bw-counter media-time[data-type="duration"] { display: block !important; }
  .bw-counter media-time { font-size: 15px !important; letter-spacing: 0.24ch; }
  .bw-counter { margin-left: 0; }
  .bw-console { --_key: 40px; }
  .bw-key--play { width: 48px; height: 48px; }
  .bw-key--cc, .bw-key--quality, .bw-key--quality[hidden], .bw-key--quality[data-hidden] { display: inline-grid !important; }
}
@container bw (max-width: 360px) {
  .bw-console { --_key: 36px; }
  .bw-key--play { width: 44px; height: 44px; }
  .bw-counter media-time { font-size: 13px !important; letter-spacing: 0.16ch; }
  .bw-regulator { min-width: 40px; }
}
@container bw (max-width: 600px) { .bw-regulator { margin-right: 14px; } }
@container bw (max-width: 300px) {
  .bw-console { --_key: 32px; }
  .bw-key--play { width: 40px; height: 40px; }
  .bw-row { column-gap: 4px; }
  .bw-counter media-time-separator, .bw-counter media-time[data-type="duration"] { display: none !important; }
  .bw-key--quality, .bw-key--quality[hidden], .bw-key--quality[data-hidden] { display: none !important; }
  .bw-regulator { min-width: 36px; margin-right: 10px; }
}
@container bw (max-width: 440px) { .bw-valve__label { display: none; } }
/* narrow console: keep the regulator a flex box so track and knob stay centred on one line */
@container bw (max-width: 600px) { .bw-regulator { display: flex !important; align-items: center; } }
@container bw (max-width: 440px) { .bw-regulator { display: flex !important; } }

/* v25 — phones keep every feature: the cabinet (REELS / SETUP) sits under the player,
   reels scroll sideways; the tank's jobs live in the console (buffer in the tube, seek keys, pause) */
.bw-rotate { display: none; }
@media (max-width: 760px) {
  .bw-machine > .bw-left {
    display: block !important; grid-column: 1 !important; grid-row: 3 !important;
    translate: none !important; opacity: 1 !important; margin-top: 14px; height: auto;
  }
  .bw-machine > .bw-left .bw-niche { position: relative; inset: auto; }
  .bw-reels { padding: 10px; }
  .bw-reels__list { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 8px; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .bw-reels__list li { flex: 0 0 auto; scroll-snap-align: start; }
  .bw-reel { width: 132px; grid-template-columns: 1fr; row-gap: 4px; }
  .bw-reel img { display: block !important; grid-row: auto; width: 100%; }
  .bw-reels__maker { display: none; }
  .bw-setup__row--tank, .bw-setup__note { display: none; }
  .bw-rotate {
    position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 10px;
    background: rgb(10 7 4 / 0.82); color: #f2e6d0; font: 700 15px/1.2 "Arsenal SC", Georgia, serif; letter-spacing: 0.12em;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
  }
  .bw-rotate span { font-size: 40px; color: #e8c06a; animation: bw-turn 1.4s ease-in-out infinite; }
  .bw-rotate.is-on { opacity: 1; }
}
@keyframes bw-turn { 0%, 30% { rotate: 0deg; } 70%, 100% { rotate: 90deg; } }

/* v26 — levers: centre the vertical label the same way in every browser (Firefox placed it off-centre) */
.bw-tank-toggle, .bw-reels-toggle { display: grid; place-items: center; padding: 14px 0 6px; overflow: hidden; }
.bw-tank-toggle span, .bw-reels-toggle span { margin: 0; line-height: 1; writing-mode: vertical-rl; }
.bw-tank-toggle span { rotate: 180deg; }
.bw-reels-toggle span { rotate: none; }