/* ==========================================================================
   Bass Daddy Devices — bass-daddy.css
   Generated from the design system (tokens.json + components/bundle.css).
   Dark is the default theme. Light: <html data-theme="light">.
   Load bass-daddy.js after this for the controls, RNBO wiring and tempo sync.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* ---------- Tokens: colour (dark = default) ---------- */
:root,
[data-theme="dark"] {
  --surface: #000000;
  --surface-raised: #111111;
  --line: #2a2a2a;
  --line-strong: #666666;
  --ink: #ffffff;
  --ink-muted: #a3a3a3;
  --pink: #ff46a2;
  --on-pink: #000000;
  --pink-ink: #ff46a2;
  --pink-soft: #2e0a1c;
  --cyan: #3de8ff;
  --on-cyan: #000000;
  --cyan-ink: #3de8ff;
  --cyan-soft: #06262b;
  --focus: var(--cyan-ink);
  --selection-bg: #ff46a2;
  --selection-ink: #000000;
  --shadow-hit: 4px 4px 0 #ff46a2;
  --shadow-hit-cyan: 4px 4px 0 #3de8ff;
  --shadow-none: 0 0 0 #000000;
  color-scheme: dark;
}
[data-theme="light"] {
  --surface: #ffffff;
  --surface-raised: #f4f4f4;
  --line: #dcdcdc;
  --line-strong: #8a8a8a;
  --ink: #000000;
  --ink-muted: #5e5e5e;
  --pink-ink: #c8005f;
  --pink-soft: #ffe3f1;
  --cyan-ink: #007a8a;
  --cyan-soft: #dcfaff;
  --selection-bg: #000000;
  --selection-ink: #ff46a2;
  color-scheme: light;
}

/* ---------- Tokens: type, space, radius, motion ---------- */
:root {
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-sans: Ubuntu, system-ui, -apple-system, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-round: 9999px;
  --dur-16th: 107ms;
  --dur-8th: 214ms;
  --dur-beat: 429ms;
  --dur-bar: 1714ms;
  --ease-thump: cubic-bezier(0.2, 1.8, 0.4, 1);
  --ease-release: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Type styles ---------- */
.display {
  font-family: var(--font-mono);
  font-size: 72px;
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.h1 {
  font-family: var(--font-mono);
  font-size: 48px;
  line-height: 52px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--font-mono);
  font-size: 32px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.h3 {
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}
.label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.spec {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}


/* ============================================================
   Bass Daddy Devices — base.
   Static styles stay boring on purpose. Motion does the talking.
   ============================================================ */

/* Your original vars, now pointing at the tokens (keep using them) */
:root {
  --primary-color: var(--pink);
  --main-padding: var(--space-4);
  --font-stack: var(--font-sans);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

::selection { background-color: var(--selection-bg); color: var(--selection-ink); }
::-moz-selection { background-color: var(--selection-bg); color: var(--selection-ink); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

a { color: var(--pink-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: var(--pink); }

.jetbrains {
  font-family: var(--font-mono);
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.label { text-transform: uppercase; }
.muted { color: var(--ink-muted); }

/* ---------- Containers (yours) ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  width: 100%;            /* was min-width:100vw — that adds a horizontal scrollbar when scrollbars are visible */
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--space-24) var(--space-4);
  box-sizing: border-box;
  text-align: center;
}

.logo-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Logo: white mark on dark, black mark on light */
.bdd-logo { display: block; width: 100%; height: auto; }
.bdd-logo--on-light { display: none; }
[data-theme="light"] .bdd-logo--on-dark { display: none; }
[data-theme="light"] .bdd-logo--on-light { display: block; }

/* ---------- Button ---------- */
.bdd-btn {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--dur-16th) var(--ease-thump),
    box-shadow var(--dur-16th) var(--ease-thump),
    border-color var(--dur-16th) var(--ease-out),
    color var(--dur-16th) var(--ease-out);
}
.bdd-btn:hover { border-color: var(--ink); color: var(--ink); }
.bdd-btn--primary {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--on-pink);
  box-shadow: var(--shadow-hit);
}
.bdd-btn--primary:hover {
  border-color: var(--pink);
  color: var(--on-pink);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--cyan);
}
.bdd-btn:active,
.bdd-btn--primary:active {
  transform: translate(4px, 4px);
  box-shadow: var(--shadow-none);
  transition-duration: 40ms;
}

/* ---------- Tag ---------- */
.bdd-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-none);
  color: var(--ink-muted);
}
.bdd-tag--pink { background: var(--pink-soft); border-color: transparent; color: var(--pink-ink); }
.bdd-tag--cyan { background: var(--cyan-soft); border-color: transparent; color: var(--cyan-ink); }
.bdd-tag--solid { background: var(--pink); border-color: var(--pink); color: var(--on-pink); }

/* ---------- Product card ---------- */
.bdd-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-none);
  transition:
    transform var(--dur-8th) var(--ease-thump),
    box-shadow var(--dur-8th) var(--ease-thump),
    border-color var(--dur-16th) var(--ease-out);
}
.bdd-card:hover {
  transform: translate(-4px, -4px);
  border-color: var(--ink);
  box-shadow: var(--shadow-hit);
}
.bdd-card--featured { border-color: var(--pink); box-shadow: var(--shadow-hit); }
.bdd-card--featured:hover { box-shadow: var(--shadow-hit-cyan); }
.bdd-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bdd-card__title { margin: 0; }
.bdd-card__body { margin: 0; color: var(--ink-muted); }
.bdd-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.bdd-price { font-family: var(--font-mono); font-weight: 600; color: var(--pink-ink); }

/* ---------- Meter (decorative level bars) ---------- */
.bdd-meter { display: inline-flex; align-items: flex-end; gap: 3px; height: 32px; }
.bdd-meter > i {
  display: block;
  width: 6px;
  height: 100%;
  background: var(--pink);
  border-radius: var(--radius-sm);
  transform-origin: bottom;
  transform: scaleY(0.2);
}
.bdd-meter > i:nth-child(3n) { background: var(--cyan); }

/* ============================================================
   MOTION — every duration is a note value at 140 BPM.
   Change tempo with BassDaddy.tempo(174) and everything follows.
   ============================================================ */

@keyframes bdd-kick {          /* speaker cone on a kick */
  0%   { transform: scale(1); }
  6%   { transform: scale(1.06); }
  22%  { transform: scale(0.985); }
  40%  { transform: scale(1.01); }
  100% { transform: scale(1); }
}
@keyframes bdd-ring {          /* pressure wave leaving the cone */
  0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}
@keyframes bdd-wobble {        /* LFO on a filter, as a shape */
  0%, 100% { transform: scale(1, 1); }
  25%      { transform: scale(1.04, 0.96); }
  75%      { transform: scale(0.96, 1.04); }
}
@keyframes bdd-duck {          /* sidechain: duck hard, release slow */
  0%   { transform: scale(1); opacity: 1; }
  12%  { transform: scale(0.94); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes bdd-rise {          /* entrance: drop in on the beat */
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes bdd-level {
  0%, 100% { transform: scaleY(0.2); }
  10%      { transform: scaleY(1); }
  50%      { transform: scaleY(0.45); }
}

/* Logo kick: put on .logo-wrap (or any element) */
.bdd-kick { animation: bdd-kick var(--dur-beat) linear infinite; transform-origin: center; }
.bdd-pulse-ring::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--pink);
  border-radius: var(--radius-round);
  pointer-events: none;
  animation: bdd-ring var(--dur-beat) var(--ease-out) infinite;
}

/* Continuous wobble, rate = 1/8 note x2 */
.bdd-wobble { animation: bdd-wobble calc(var(--dur-8th) * 2) ease-in-out infinite; }
.bdd-wobble-hover:hover { animation: bdd-wobble calc(var(--dur-8th) * 2) ease-in-out infinite; }

/* Sidechain duck on hover (one shot) */
.bdd-duck-hover:hover { animation: bdd-duck var(--dur-beat) var(--ease-release) 1; }

/* Staggered entrance: set style="--i:0", "--i:1" … on siblings */
.bdd-rise {
  animation: bdd-rise var(--dur-beat) var(--ease-thump) both;
  animation-delay: calc(var(--i, 0) * var(--dur-16th));
}

/* Meter bars bounce; each bar offset by a 16th */
.bdd-meter > i {
  animation: bdd-level var(--dur-beat) var(--ease-release) infinite;
  animation-delay: calc(var(--i, 0) * var(--dur-16th) * -1);
}

/* Respect the people who turned it off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .bdd-pulse-ring::after { display: none; }
}

/* ============================================================
   CONTROLS — dials, faders, toggles, segmented, XY.
   Built by BassDaddy.ui.* (or data-bdd="…" + BassDaddy.ui.auto()).
   ============================================================ */

@keyframes bdd-grab {           /* one-shot thump when you grab a control */
  0%   { transform: scale(1); }
  30%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes bdd-led {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.6); }
  100% { transform: scale(1); }
}

/* ---------- Dial ---------- */
.bdd-dial {
  --dial-size: 72px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
.bdd-dial--sm { --dial-size: 56px; }
.bdd-dial--lg { --dial-size: 112px; }
.bdd-dial__face {
  position: relative;
  width: var(--dial-size);
  height: var(--dial-size);
  cursor: ns-resize;
  touch-action: none;
}
.bdd-dial__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bdd-dial__track { fill: none; stroke: var(--line-strong); stroke-width: 4; stroke-linecap: butt; transition: stroke var(--dur-16th) var(--ease-out); }
.bdd-dial__arc   { fill: none; stroke: var(--pink); stroke-width: 4; stroke-linecap: butt; }
.bdd-dial__tick  { stroke: var(--ink); stroke-width: 3; stroke-linecap: butt; transition: stroke var(--dur-16th) var(--ease-out); }
.bdd-dial__centre { stroke: var(--ink-muted); stroke-width: 2; }
.bdd-dial__value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(var(--dial-size) * 0.14);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink-muted);
  pointer-events: none;
  white-space: nowrap;
  transition: color var(--dur-16th) var(--ease-out);
}
.bdd-dial__label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  max-width: calc(var(--dial-size) + 24px);
  text-align: center;
}
.bdd-dial:hover .bdd-dial__track { stroke: var(--ink-muted); }
.bdd-dial.is-active .bdd-dial__tick,
.bdd-dial:focus-visible .bdd-dial__tick { stroke: var(--cyan-ink); }
.bdd-dial.is-active .bdd-dial__value { color: var(--pink-ink); }
.bdd-dial.is-hit .bdd-dial__svg { animation: bdd-grab var(--dur-8th) var(--ease-thump); }
.bdd-dial:focus-visible { outline: none; }
.bdd-dial:focus-visible .bdd-dial__face { outline: 2px solid var(--focus); outline-offset: 4px; }

/* ---------- Fader ---------- */
.bdd-fader {
  --fader-length: 100%;
  --thumb: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 160px;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
.bdd-fader__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.bdd-fader__label {
  font-family: var(--font-mono); font-weight: 600; font-size: 11px; line-height: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
}
.bdd-fader__value { font-family: var(--font-mono); font-weight: 500; font-size: 13px; line-height: 16px; color: var(--ink-muted); white-space: nowrap; }
.bdd-fader__track {
  position: relative;
  height: 24px;
  cursor: ew-resize;
  touch-action: none;
}
.bdd-fader__track::before {               /* the rail */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--line-strong);
}
.bdd-fader__fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  left: calc(var(--lo) * 100%);
  width: calc((var(--hi) - var(--lo)) * 100%);
  background: var(--pink);
}
.bdd-fader__thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--n) * (100% - var(--thumb)));
  width: var(--thumb);
  height: 24px;
  transform: translateY(-50%);
  background: var(--ink);
  box-shadow: 3px 3px 0 var(--pink);
  transition: transform var(--dur-16th) var(--ease-thump), box-shadow var(--dur-16th) var(--ease-thump);
}
.bdd-fader--bipolar .bdd-fader__track::after {    /* centre detent mark */
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: var(--ink-muted);
}
.bdd-fader:hover .bdd-fader__track::before { background: var(--ink-muted); }
.bdd-fader.is-active .bdd-fader__thumb { transform: translate(-2px, calc(-50% - 2px)); box-shadow: 5px 5px 0 var(--cyan); }
.bdd-fader.is-active .bdd-fader__value { color: var(--pink-ink); }
.bdd-fader.is-jump .bdd-fader__thumb,
.bdd-fader.is-jump .bdd-fader__fill { transition: left var(--dur-16th) var(--ease-thump), width var(--dur-16th) var(--ease-thump), transform var(--dur-16th) var(--ease-thump), box-shadow var(--dur-16th) var(--ease-thump); }
.bdd-fader.is-active:not(.is-jump) .bdd-fader__thumb { transition: transform var(--dur-16th) var(--ease-thump), box-shadow var(--dur-16th) var(--ease-thump); }
.bdd-fader:focus-visible .bdd-fader__track { outline: 2px solid var(--focus); outline-offset: 4px; }

/* vertical */
.bdd-fader--v { --fader-length: 160px; min-width: 0; width: max-content; align-items: center; }
.bdd-fader--v .bdd-fader__head { flex-direction: column; align-items: center; gap: 0; order: 2; }
.bdd-fader--v .bdd-fader__track { width: 32px; height: var(--fader-length); cursor: ns-resize; }
.bdd-fader--v .bdd-fader__track::before { left: 50%; right: auto; top: 0; bottom: 0; width: 4px; height: auto; transform: translateX(-50%); }
.bdd-fader--v .bdd-fader__fill { left: 50%; top: auto; width: 4px; transform: translateX(-50%); bottom: calc(var(--lo) * 100%); height: calc((var(--hi) - var(--lo)) * 100%); }
.bdd-fader--v .bdd-fader__thumb { left: 50%; top: auto; width: 28px; height: var(--thumb); transform: translateX(-50%); bottom: calc(var(--n) * (100% - var(--thumb))); }
.bdd-fader--v.is-active .bdd-fader__thumb { transform: translate(calc(-50% - 2px), -2px); }
.bdd-fader--v.bdd-fader--bipolar .bdd-fader__track::after { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; transform: translateY(-50%); }
.bdd-fader--v.is-jump .bdd-fader__thumb,
.bdd-fader--v.is-jump .bdd-fader__fill { transition: bottom var(--dur-16th) var(--ease-thump), height var(--dur-16th) var(--ease-thump), transform var(--dur-16th) var(--ease-thump); }

/* ---------- Toggle ---------- */
.bdd-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-none);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background var(--dur-16th) var(--ease-out), border-color var(--dur-16th) var(--ease-out), color var(--dur-16th) var(--ease-out), transform var(--dur-16th) var(--ease-thump), box-shadow var(--dur-16th) var(--ease-thump);
}
.bdd-toggle__led { width: 8px; height: 8px; background: var(--line-strong); transition: background var(--dur-16th) var(--ease-out); }
.bdd-toggle:hover { border-color: var(--ink); }
.bdd-toggle.is-on { background: var(--pink); border-color: var(--pink); color: var(--on-pink); box-shadow: var(--shadow-hit-cyan); transform: translate(-2px, -2px); }
.bdd-toggle.is-on .bdd-toggle__led { background: var(--on-pink); }
.bdd-toggle.is-hit .bdd-toggle__led { animation: bdd-led var(--dur-8th) var(--ease-thump); }
.bdd-toggle--momentary.is-on { transform: translate(2px, 2px); box-shadow: var(--shadow-none); background: var(--cyan); border-color: var(--cyan); color: var(--on-cyan); }
.bdd-toggle--momentary.is-on .bdd-toggle__led { background: var(--on-cyan); }

/* ---------- Segmented (enum) ---------- */
.bdd-seg { display: inline-flex; flex-direction: column; gap: var(--space-2); }
.bdd-seg__label {
  font-family: var(--font-mono); font-weight: 600; font-size: 11px; line-height: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
}
.bdd-seg__row { display: inline-flex; }
.bdd-seg__opt {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  color: var(--ink-muted);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-none);
  margin-left: -2px;
  cursor: pointer;
  transition: background var(--dur-16th) var(--ease-out), color var(--dur-16th) var(--ease-out);
}
.bdd-seg__opt:first-child { margin-left: 0; }
.bdd-seg__opt:hover { color: var(--ink); }
.bdd-seg__opt[aria-checked="true"] { position: relative; z-index: 1; background: var(--pink); border-color: var(--pink); color: var(--on-pink); }
.bdd-seg__opt.is-hit { animation: bdd-grab var(--dur-8th) var(--ease-thump); }

/* ---------- XY pad ---------- */
.bdd-xy { --xy-size: 240px; display: inline-flex; flex-direction: column; gap: var(--space-2); width: var(--xy-size); user-select: none; -webkit-user-select: none; }
.bdd-xy__pad {
  position: relative;
  width: var(--xy-size);
  aspect-ratio: 1;
  background-color: var(--surface-raised);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 25% 25%;
  background-position: -1px -1px;
  border: 1px solid var(--line-strong);
  cursor: crosshair;
  touch-action: none;
  outline: none;
  overflow: hidden;
}
.bdd-xy__line { position: absolute; pointer-events: none; }
.bdd-xy__line--x { top: 0; bottom: 0; width: 2px; left: calc(var(--x) * 100%); transform: translateX(-50%); background: var(--pink); }
.bdd-xy__line--y { left: 0; right: 0; height: 2px; bottom: calc(var(--y) * 100%); transform: translateY(50%); background: var(--cyan); }
.bdd-xy__puck {
  position: absolute;
  width: 20px; height: 20px;
  left: calc(var(--x) * 100%);
  bottom: calc(var(--y) * 100%);
  transform: translate(-50%, 50%);
  background: var(--ink);
  box-shadow: 3px 3px 0 var(--pink);
  pointer-events: none;
}
.bdd-xy__puck::after {               /* ping ring on grab */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 48px; aspect-ratio: 1;
  border: 2px solid var(--pink);
  border-radius: var(--radius-round);
  opacity: 0;
  transform: translate(-50%, -50%);
}
.bdd-xy__puck.is-hit::after { animation: bdd-ring var(--dur-beat) var(--ease-out); }
.bdd-xy.is-active .bdd-xy__puck { box-shadow: 4px 4px 0 var(--cyan); }
.bdd-xy__pad:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bdd-xy__read { display: flex; justify-content: space-between; gap: var(--space-3); font-family: var(--font-mono); font-weight: 500; font-size: 13px; line-height: 16px; color: var(--ink-muted); white-space: nowrap; }

/* ---------- Rack (RNBO auto-build layout) ---------- */
.bdd-rack { display: flex; flex-direction: column; gap: var(--space-8); }
.bdd-rack__row { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.bdd-rack__row--faders > * { flex: 1 1 200px; }
.bdd-rack__power { display: flex; gap: var(--space-3); align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .bdd-xy__puck::after { display: none; }
}