/* ============================================================
   DRUMMY DM-16 — dark hardware UI
   Design system: one light source (above), one spacing ladder,
   one type scale, one control material, one accent semantic.
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
    U+2190-21BB, U+2212, U+2215, U+2669-266F;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: block;
  src: url("../fonts/jetbrains-mono-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2190-21BB, U+2212;
}

:root {
  /* ---- neutral ramp: even ~3.4 L* steps, cool cast ---- */
  --bg: #0b0d10;
  --panel: #141619;
  --panel-2: #1a1c1f;
  --line-soft: #212326;
  --pad-face: #282a2d;
  --line: #303235;
  --pad-face-hi: #37393c;
  --pad-edge: #08090b;
  --well: #0c0e11;

  /* ---- ink: every value clears 3.7:1 on its own ground ---- */
  --ink: #e8e6e1;
  --ink-dim: #a2a6ac;
  --ink-off: #83878f;
  --ink-faint: #7b7f85;   /* 4.50:1 on --panel */

  /* ---- accent + status ---- */
  --accent: #ff5a00;
  --accent-soft: #ff5a0033;
  --amber: #ffb454;
  --green: #7dd069;
  --red: #ff3b30;

  /* ---- LCD phosphor: one hue, descending lightness ---- */
  --lcd-hi: #a8e08c;
  --lcd-mid: #7fb26a;
  --lcd-lo: #5e8a4f;
  --lcd-dim: #3f6a35;

  /* ---- pad legends: engraved, never pure white ---- */
  --legend: #b3b0a8;
  --legend-dim: #8d9197;  /* 4.54:1 on --pad-face */
  --engrave: 0 -1px 1px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.07);
  --engrave-soft: 0 -1px 1px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ---- spacing ladder (4px base) ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;

  /* ---- type scale ---- */
  --fs-1: 9px;    /* Inter micro legend */
  --fs-2: 10px;   /* shared workhorse; mono-crisp (6.0px cell) */
  --fs-3: 11px;
  --fs-4: 12px;   /* pad names, help body */
  --fs-5: 15px;   /* LCD display; mono-crisp (9.0px cell) */

  /* ---- tracking: inverse to size ---- */
  --tr-title: 0.2em;
  --tr-09: 0.16em;
  --tr-10: 0.14em;
  --tr-11: 0.11em;
  --tr-12: 0.06em;
  --tr-15: 0.02em;
  --tr-num: 0;

  /* ---- radii: concentric (chassis 28 − 20 pad = 8… stepped) ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pad: 10px;
  --r-chassis: 28px;
  --radius: var(--r-pad);

  /* ---- control geometry ---- */
  --ctl-h-s: 20px;
  --ctl-h-m: 28px;
  --ctl-h-l: 40px;

  /* ---- motion ---- */
  --e-std: cubic-bezier(0.4, 0, 0.2, 1);
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --d-tint: 90ms;
  --d-press: 30ms;
  --d-release: 170ms;

  /* ---- control material: lit from above ---- */
  --ctl-bg: linear-gradient(180deg, #24262a 0%, #1c1e22 52%, #17191c 100%);
  --ctl-bg-hover: linear-gradient(180deg, #2b2e33 0%, #212429 52%, #1b1d21 100%);
  --ctl-bg-press: linear-gradient(180deg, #141619 0%, #1a1c20 100%);
  --ctl-edge: #08090b;
  --ctl-shadow:
    inset 0 1px 0 #ffffff16,
    inset 0 -1px 0 #ffffff06,
    inset 0 -4px 6px -4px #00000055,
    0 1px 2px #00000077,
    0 2px 5px -1px #00000055;
  --ctl-shadow-press:
    inset 0 2px 5px #000000aa,
    inset 0 -1px 0 #ffffff07;

  --font-ui: "Inter", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* fractal grain for moulded/anodised surfaces */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg);
  background-image:
    radial-gradient(1500px 760px at 50% -22%, #101318 0%, #0d0f12 44%, transparent 66%),
    radial-gradient(circle at 1px 1px, #ffffff0f 0.6px, transparent 1.6px);
  background-size: auto, 26px 26px;
  color: var(--ink);
  font-family: var(--font-ui);
  /* only features this subset actually carries */
  font-feature-settings: "calt" 1;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s4);
  -webkit-user-select: none;
  user-select: none;
}

/* numerals never jitter */
.lcd, .mono-val, #bpm, .pad-num, .step-label-num, .panel-num, .pad-edit-name,
.lcd-pos, .sample-bpm, .slice-ghost, #slice-count, .pad-name {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* silkscreen has no leading: flush micro-type to its em box */
.panel-title, .panel-num, .help-grid h3, .lcd-status, .lcd-pos, #lcd-kit, #lcd-msg,
.pad-num, .pad-key, .pad-name, .opt label, .t-lab, .tog, .mini-btn, .mic-btn,
.seg button, .step-btn, #bpm, .mono-val, .step-label, .step-rename, .steps-hint,
.song-label, .song-chip, .song-add button, .choke-group label, .pe-layer-name,
.sample-bpm, .slice-ghost, .drop-main, .drop-sub, .chip-btn, .ms-btn, .pad-edit-name {
  line-height: 1;
}

/* ============ CHASSIS ============ */

#machine {
  width: min(1180px, 100%);
  container-type: inline-size;
  container-name: machine;
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #26282c 0%, #1e2024 6%, #1a1c20 52%, #131518 100%);
  border: 1px solid #07080a;
  border-radius: var(--r-chassis);
  box-shadow:
    inset 0 1px 0 #ffffff1c,
    inset 0 0 0 1px #ffffff05,
    inset 0 -2px 0 #00000099,
    0 1px 0 #ffffff0c,
    0 40px 90px -18px #000000d0,
    0 10px 26px -10px #000000aa;
  padding: var(--s5);
}

/* anodised grain over the whole enclosure */
#machine::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: var(--noise);
  background-size: 160px 160px;
}

/* ============ TOP BAR ============ */

#topbar {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: var(--s5);
  align-items: stretch;
  margin-bottom: var(--s5);
}

/* ---- LCD: a real backlit panel behind glass ---- */
.lcd {
  position: relative;
  z-index: 4;
  background: linear-gradient(180deg, #101c0e 0%, #0d170c 55%, #0a120a 100%);
  border: 1px solid #04060a;
  border-radius: var(--r-md);
  box-shadow:
    inset 0 0 0 1px #ffffff07,
    inset 0 2px 14px #000000cc,
    inset 0 0 44px #4f8f3f1c,
    0 1px 0 #ffffff0c,
    0 0 28px -8px #7dd06926;
  padding: var(--s3) var(--s4) 14px;
  font-family: var(--font-mono);
  color: var(--lcd-hi);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  overflow: hidden;
}
/* subpixel matrix */
.lcd::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    repeating-linear-gradient(90deg, #00000040 0 1px, #0000 1px 3px),
    repeating-linear-gradient(0deg, #00000026 0 1px, #0000 1px 3px);
}
/* glass sheen */
.lcd::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(104deg, #ffffff0d 0%, #ffffff04 20%, #0000 44%);
}
.lcd > * { position: relative; z-index: 1; }

.lcd-row1, .lcd-row2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
}
#lcd-kit {
  font-size: var(--fs-5);
  font-weight: 700;
  letter-spacing: var(--tr-15);
  color: var(--lcd-hi);
  text-shadow: 0 0 10px #a8e08c55, 0 0 2px #a8e08c99;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.lcd-status {
  font-size: var(--fs-2);
  letter-spacing: var(--tr-10);
  margin-right: calc(-1 * var(--tr-10)); /* cancel trailing tracking on the right rail */
  color: var(--lcd-lo);
  text-shadow: 0 0 6px #5e8a4f44;
  white-space: nowrap;
}
.lcd-status.rec { color: #ff6a5e; animation: blink 1s steps(2) infinite; }
#lcd-msg {
  font-size: var(--fs-3);
  color: var(--lcd-mid);
  text-shadow: 0 0 6px #7fb26a44;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lcd-pos {
  font-size: var(--fs-3);
  color: var(--lcd-lo);
  letter-spacing: var(--tr-num);
  text-shadow: 0 0 6px #5e8a4f44;
  white-space: nowrap;
}
.lcd-meter {
  position: relative;
  height: 4px;
  background: #0f1c0c;
  border-radius: 2px;
  margin-top: var(--s2);
  overflow: hidden;
  box-shadow: inset 0 1px 2px #000000aa;
}
/* The ramp spans the whole TRACK and the fill reveals it by clipping, so a
   level walks green -> amber -> red. (Sizing the gradient to the fill would
   mean a quiet signal painted the entire ramp into a few pixels.) */
#lcd-meter-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(90deg, #4f8f3f 0%, #8fd07a 62%, #a8e08c 82%, #ffd24a 92%, #ff6a5e 100%);
  clip-path: inset(0 calc(100% - var(--lvl, 0%)) 0 0);
  transition: clip-path 260ms var(--e-std);
}
#lcd-meter-fill.rising { transition-duration: 0ms; }
.lcd-meter::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), #0a0f0a99 calc(12.5% - 1px) 12.5%);
}
@keyframes blink { 50% { opacity: 0.35; } }

.top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s3);
  padding-right: 17px; /* LED right edge = panel-num right edge */
}

.power-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 33%, #f0ffe9 0%, #abec95 28%, #7dd069 62%, #3d7830 100%);
  box-shadow: 0 0 5px #7dd069cc, 0 0 13px #7dd06955, inset 0 0 2px #ffffffa0, 0 0 0 1px #00000088;
}

/* ============ LAYOUT ============ */

#deck {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: var(--s5);
  /* the pad module sizes to its own content; stretching it meant the right
     column's height (which changes when the sampler opens) punched a hole
     between the pads and the perform bar */
  align-items: start;
}

#control-zone {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-width: 0;
}

/* ============ PANELS ============ */

.panel, #pad-zone {
  background: linear-gradient(180deg, #15171a 0%, #111316 100%);
  border: 1px solid #0b0c0f;
  border-radius: var(--r-lg);
  /* a pocket milled into the chassis: light from above falls INTO it, so the
     top inner edge is shadowed and the bottom inner edge catches the bounce.
     A top highlight here would read as a raised slab instead. */
  box-shadow:
    inset 0 2px 5px -2px #000000cc,
    inset 0 10px 22px -16px #000000e0,
    inset 0 -1px 0 #ffffff0c,
    0 1px 0 #ffffff0a,
    0 2px 6px -2px #00000066;
  padding: var(--s4);
}

#pad-zone {
  display: flex;
  flex-direction: column;
  /* 12px matches .panel-head's margin in every other panel, so the pad grid
     and the transport start at the same y instead of 16px apart */
  gap: var(--s3);
  justify-content: flex-start;
}
#pad-zone > .panel-head { margin-bottom: 0; }

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s3);
}
.panel-title {
  font-size: var(--fs-2);
  font-weight: 700;
  letter-spacing: var(--tr-title);
  color: var(--ink-off);
  line-height: 12px;
}
.panel-num {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-09);
  color: var(--ink-faint);
  border: none;
  padding: 0;
  position: relative;
  top: 1px;
}
.pad-edit-name {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: 500;
  letter-spacing: var(--tr-num);
  color: var(--accent);
  margin-left: var(--s2);
}
#pattern-letter { color: var(--amber); }
#bank-letter { color: var(--accent); }

/* ============ PADS ============ */

#pad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--s3);
  /* rigid module: the bezel breathes, the pad block does not */
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.pad {
  position: relative;
  border-radius: var(--r-pad);
  border: 1px solid var(--pad-edge);
  /* domed silicone: point-lit from above, bounce along the bottom lip */
  background:
    radial-gradient(125% 95% at 50% 4%, var(--pad-face-hi) 0%, #2e3137 38%, #0000 70%),
    linear-gradient(180deg, #2e3137 0%, var(--pad-face) 55%, #1d1f23 100%);
  box-shadow:
    inset 0 1px 0 #ffffff1e,
    inset 0 -1px 0 #ffffff0a,
    inset 0 6px 12px -10px #000000c0,
    inset 0 -7px 11px -6px #00000066,
    0 1px 1px #000000a0,
    0 5px 11px -2px #00000077,
    0 14px 26px -10px #00000055;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--s3);
  transition:
    transform var(--d-release) var(--e-out),
    box-shadow var(--d-release) var(--e-out),
    border-color var(--d-tint) var(--e-std);
  touch-action: none;
  overflow: hidden;
}

/* moulded-rubber micro-texture */
.pad::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--noise);
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.pad:active, .pad.hit {
  transform: translateY(2px) scale(0.985);
  transition-duration: var(--d-press);
}

/* selected for editing — persistent, distinct from the strike */
.pad.sel {
  border-color: #ff5a0066;
  box-shadow:
    inset 0 1px 0 #ffffff1e,
    inset 0 -1px 0 #ffffff0a,
    inset 0 6px 12px -10px #000000c0,
    inset 0 0 0 1px #ff5a0033,
    0 0 14px -6px #ff5a0066,
    0 5px 11px -2px #00000077;
}
.pad.sel .pad-num { color: var(--accent); text-shadow: none; }

/* an empty pad is the same moulded object, just unlit — keep the dome and
   only take away the finish, never the physics */
/* Struck: the light is edge-lit. The rim itself is the emitter and the
   glow falls inward from it, so the pad reads as a ring lighting up
   rather than a lamp switched on behind the middle of the face. */
.pad.hit {
  outline: none;
  border-color: color-mix(in oklab, var(--accent) calc(45% + var(--hv, 1) * 55%), var(--pad-edge));
  /* the face keeps its own dome and grain — a struck pad is the same
     object, lit from its rim, not a different surface */
  box-shadow:
    /* the ring, at full strength */
    inset 0 0 0 1px color-mix(in oklab, var(--accent) calc(55% + var(--hv, 1) * 45%), transparent),
    /* its light bleeding inward off the rim, never reaching the centre */
    inset 0 0 calc(6px + var(--hv, 1) * 10px) calc(-2px) color-mix(in oklab, var(--accent) calc(30% + var(--hv, 1) * 45%), transparent),
    inset 0 1px 0 #ffffff1e,
    /* and spilling outward onto the bezel */
    0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent),
    0 0 calc(14px + var(--hv, 1) * 16px) calc(-6px) color-mix(in oklab, var(--accent) calc(40% + var(--hv, 1) * 45%), transparent),
    0 1px 4px #000000aa;
}

.pad.empty {
  background:
    radial-gradient(125% 95% at 50% 4%, #2b2e33 0%, #232529 38%, #0000 70%),
    linear-gradient(180deg, #232529 0%, #1c1e22 55%, #17191c 100%);
  border-color: #0a0b0e;
  box-shadow:
    inset 0 1px 0 #ffffff10,
    inset 0 -1px 0 #ffffff06,
    inset 0 6px 12px -10px #000000c0,
    0 1px 1px #00000088,
    0 3px 7px -2px #00000055;
}
.pad.empty .pad-name { color: #7a7e85; text-shadow: var(--engrave-soft); }

.pad-top { display: flex; justify-content: space-between; align-items: center; height: 14px; flex: 0 0 auto; }
.pad-num {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: var(--tr-num);
  color: var(--legend-dim);
  text-shadow: var(--engrave-soft);
}
.pad-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* a dead LED behind a lens is DARKER than the surface around it; only the
     top of the lens catches any light */
  background: radial-gradient(circle at 50% 30%, #303339 0%, #212429 55%, #131518 100%);
  box-shadow: inset 0 1px 1px #ffffff14, inset 0 -1px 1px #00000099, 0 0 0 1px #00000066;
  /* snap on, decay out */
  transition: background 220ms var(--e-out), box-shadow 220ms var(--e-out);
}
.pad.hit .pad-led {
  background: radial-gradient(circle at 50% 33%, #fff4ec 0%, #ffa864 30%, #ff5a00 66%, #b83800 100%);
  box-shadow:
    0 0 calc(3px + var(--hv, 1) * 8px) #ff5a00d0,
    0 0 calc(8px + var(--hv, 1) * 12px) #ff5a0066,
    inset 0 0 2px #ffffffb0;
  transition-duration: 0ms;
}

.pad-name {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: var(--tr-12);
  padding-left: var(--tr-12); /* cancel trailing tracking on a centred line */
  /* engraved into the rubber, lit from above */
  color: var(--legend);
  text-shadow: var(--engrave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pad.hit .pad-name {
  color: #efece5;
  text-shadow: 0 0 10px #ff5a0055, 0 1px 0 rgba(0, 0, 0, 0.5);
}

.pad-key {
  align-self: flex-start;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 15px;
  margin-left: -5px; /* glyph aligns with .pad-num's left rail */
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: var(--tr-num);
  color: var(--legend-dim);
  text-shadow: var(--engrave-soft);
  border: 1px solid #ffffff0a;
  border-radius: var(--r-sm);
  padding: 0 5px;
  background: #00000038;
  box-shadow: inset 0 1px 2px #00000066, 0 1px 0 #ffffff08;
  transition: color var(--d-tint) var(--e-std), border-color var(--d-tint) var(--e-std);
}
.pad:hover .pad-key { color: var(--ink-dim); border-color: #ffffff1a; }

.pad.drop-target {
  outline: 1px dashed var(--accent);
  outline-offset: -2px;
  border-color: #ff5a0066;
  box-shadow: inset 0 0 22px -6px #ff5a0055, 0 0 18px -6px #ff5a0055;
}

/* ============ PERFORM BAR ============ */

.perform-bar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.perform-bar > .perf-repeat { margin-left: var(--s2); }
.perform-bar > #btn-full { margin-left: auto; }
.perf-label {
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: var(--tr-09);
  color: var(--ink-faint);
}
.perf-repeat { display: flex; gap: var(--s2); align-items: center; }
#repeat-seg button, #grid-seg button { width: auto; padding: 0 7px; font-size: var(--fs-2); }
#repeat-seg.dim { opacity: 0.45; }

.bank-seg button { width: 26px; position: relative; }
.bank-seg button.filled::after,
.pattern-seg button.has-events::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.bank-seg button.on.filled::after { background: var(--accent); }
.pattern-seg button.on.has-events::after { background: var(--amber); }

/* ============ UNIFIED CONTROL MATERIAL ============ */

.t-btn, .tog, .mini-btn, .seg button, .chip-btn, .song-chip, .song-add button,
.ms-btn, .step-btn, .mic-btn, .stepper {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink-off);
  background: var(--ctl-bg);
  border: 1px solid var(--ctl-edge);
  border-radius: var(--r-md);
  box-shadow: var(--ctl-shadow);
  cursor: pointer;
  transition:
    color var(--d-tint) var(--e-std),
    background var(--d-tint) var(--e-std),
    border-color var(--d-tint) var(--e-std),
    box-shadow var(--d-release) var(--e-out),
    transform var(--d-release) var(--e-out);
}

.t-btn:hover:not(:disabled), .tog:hover:not(:disabled), .mini-btn:hover:not(:disabled),
.seg button:hover:not(:disabled), .chip-btn:hover:not(:disabled), .song-chip:hover,
.song-add button:hover, .ms-btn:hover, .step-btn:hover, .mic-btn:hover:not(:disabled) {
  color: var(--ink);
  background: var(--ctl-bg-hover);
}

.t-btn:active:not(:disabled), .tog:active:not(:disabled), .mini-btn:active:not(:disabled),
.seg button:active:not(:disabled), .chip-btn:active:not(:disabled), .song-chip:active,
.song-add button:active, .ms-btn:active, .step-btn:active, .mic-btn:active:not(:disabled) {
  transform: translateY(1px);
  background: var(--ctl-bg-press);
  box-shadow: var(--ctl-shadow-press);
  transition-duration: var(--d-press);
}

/* segments and steppers are one machined block, not stacked buttons */
.seg, .stepper {
  display: inline-flex;   /* hug the buttons: no empty tail inside the capsule */
  align-items: stretch;
  width: fit-content;
  height: var(--ctl-h-m);
  /* never overflow:hidden here — it would clip the children's focus rings */
  background: var(--ctl-bg);
  border: 1px solid var(--ctl-edge);
  border-radius: var(--r-md);
  box-shadow: var(--ctl-shadow);
  overflow: visible;
}
.seg button, .stepper .step-btn {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.stepper #bpm {
  background: none;
  border: none;
  border-radius: 0;
  /* seams, to match the inset dividers .seg draws between its chips */
  box-shadow: inset 1px 0 0 var(--line-soft), inset -1px 0 0 var(--line-soft);
}
.seg button:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.seg button:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.stepper > :first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.stepper > :last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.seg button:hover:not(.on), .stepper .step-btn:hover { background: #ffffff08; }
/* the capsule is one machined block: its chips darken on press, they never
   translate, or a lit chip would slide inside a frame that cannot move */

.seg button {
  position: relative;
  width: 30px;
  /* the block owns the height; the buttons fill it, so .seg matches .stepper
     and .tog exactly instead of standing 2px proud of them */
  height: calc(var(--ctl-h-m) - 2px);
  color: var(--ink-off);
  font-size: var(--fs-2);
}
/* inset dividers that vanish around a lit chip */
.seg button:not(:last-child)::before {
  content: "";
  position: absolute;
  right: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line-soft);
  transition: opacity var(--d-tint) var(--e-std);
}
.seg button.on::before, .seg button:has(+ .on)::before { opacity: 0; }

/* ---- ONE on-recipe: colour is the only variable ---- */
.tog.on, .mini-btn.on { --st: var(--amber); }
.seg button.on, .chip-btn.on, .mini-btn.accent { --st: var(--accent); }
/* PATTERN and BANK are both A-B-C-D in an identical shell, so they must not
   share a lit colour: banks stay accent, patterns are amber like the
   PATTERN letter in the step-editor head. */
.pattern-seg button.on { --st: var(--amber); }
/* a queued switch is armed, not active: outline it and pulse, don't fill it */
.pattern-seg button.queued {
  color: var(--amber);
  box-shadow: inset 0 0 0 1px #ffb45499;
  animation: blink 0.7s steps(2) infinite;
}
.tog.erase.on, .t-btn.rec.armed, .t-btn.rec.recording, .mini-btn.confirm, .mic-btn.recording { --st: var(--red); }
.t-btn.playing { --st: var(--green); }

.tog.on, .mini-btn.on, .seg button.on, .chip-btn.on, .mini-btn.accent,
.t-btn.rec.armed, .t-btn.rec.recording, .t-btn.playing, .mini-btn.confirm, .mic-btn.recording {
  color: color-mix(in oklab, var(--st) 62%, #fff);
  border-color: color-mix(in oklab, var(--st) 58%, transparent);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--st) 26%, #1d1f23) 0%,
    color-mix(in oklab, var(--st) 14%, #16181b) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--st) 30%, transparent),
    inset 0 0 13px color-mix(in oklab, var(--st) 18%, transparent),
    0 0 13px -3px color-mix(in oklab, var(--st) 55%, transparent);
  text-shadow: 0 0 7px color-mix(in oklab, var(--st) 60%, transparent);
}
/* Segments sit inside a machined block, so their lit state is a recessed
   backlight rather than a raised cap — same recipe, one extra inset. */
.seg button.on {
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--st) 30%, transparent),
    inset 0 0 13px color-mix(in oklab, var(--st) 22%, transparent),
    inset 0 0 0 1px color-mix(in oklab, var(--st) 22%, transparent);
}
/* Lit controls need the same feedback as unlit ones: brighten on hover,
   sink on press. Without this every "on" control feels dead to the touch. */
.tog.on:hover, .mini-btn.on:hover, .seg button.on:hover, .chip-btn.on:hover,
.mini-btn.accent:hover, .t-btn.playing:hover, .t-btn.rec.recording:hover,
.t-btn.rec.armed:hover, .mic-btn.recording:hover {
  color: color-mix(in oklab, var(--st) 35%, #fff);
  border-color: color-mix(in oklab, var(--st) 80%, transparent);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--st) 34%, #1d1f23) 0%,
    color-mix(in oklab, var(--st) 20%, #16181b) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--st) 38%, transparent),
    inset 0 0 15px color-mix(in oklab, var(--st) 24%, transparent),
    0 0 17px -3px color-mix(in oklab, var(--st) 68%, transparent);
}
.tog.on:active, .mini-btn.on:active, .seg button.on:active, .chip-btn.on:active,
.mini-btn.accent:active, .t-btn.playing:active, .t-btn.rec:active, .mic-btn.recording:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 6px #000000aa,
    inset 0 0 12px color-mix(in oklab, var(--st) 18%, transparent);
  transition-duration: var(--d-press);
}

/* chips darken in place: the capsule around them cannot move, so a chip
   that translates would slide past its own frame */
.seg button:active:not(:disabled),
.seg button.on:active:not(:disabled),
.stepper .step-btn:active:not(:disabled) {
  transform: none;
  background: #00000055;
  box-shadow: inset 0 2px 5px #000000aa;
}

.mini-btn.confirm { animation: blink 0.7s steps(2) infinite; }

/* drawn icons (undo / redo) — the glyphs are not in the shipped subset */
.icon-btn { display: inline-grid; place-items: center; padding: 0; width: 30px; }
.icon-btn svg { width: 15px; height: 15px; display: block; }
.icon-btn svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.head-right { display: flex; align-items: center; gap: var(--s2); }

/* mirrors the LCD line when the top bar is hidden */
.status-compact {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: var(--tr-10);
  line-height: 1.35;
  color: var(--lcd-mid);
  padding: var(--s2) 10px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #101c0e 0%, #0a120a 100%);
  border: 1px solid #04060a;
  box-shadow: inset 0 1px 6px #000000aa, inset 0 0 22px #4f8f3f14;
  text-shadow: 0 0 6px #7fb26a44;
}
/* these only exist when the top bar is gone */
#btn-help-compact { display: none; width: 24px; height: 24px; font-size: var(--fs-2); }
.kit-name-compact {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: var(--tr-10);
  color: var(--lcd-mid);
}
.t-btn.rec.recording .ico-rec { box-shadow: 0 0 10px var(--red); animation: blink 1s steps(2) infinite; }

/* ============ TRANSPORT ============ */

.transport {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.t-btn {
  padding: 8px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--ctl-h-l);
}
.t-btn .t-lab {
  font-size: var(--fs-1);
  letter-spacing: var(--tr-09);
  padding-left: var(--tr-09); /* re-centre against trailing tracking */
  flex: 0 0 auto;
}
/* every icon occupies the same 13px box and none of them may be squashed by
   the flex column, so all three labels sit on one baseline */
.t-ico { width: 13px; height: 13px; display: block; flex: 0 0 13px; }
.ico-rec {
  width: 10px; height: 10px;
  margin: 1.5px auto;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* PLAY is the primary action — it should not look like its neighbours */
/* class-scoped so the shared lit recipe still wins when PLAY is playing */
.t-btn#btn-play:not(.playing) { color: var(--ink-dim); }
#btn-play .ico-play { transform: translateX(1.83px) scale(1.08); transform-origin: center; }
.t-btn#btn-play:not(.playing):hover { color: var(--green); border-color: #7dd06955; }
#btn-rec:not(.recording):not(.armed):hover { color: var(--red); border-color: #ff3b3055; }
.ico-play {
  width: 0; height: 0;
  margin: 0 auto;
  border-left: 11px solid currentColor;
  border-top: 6.5px solid transparent;
  border-bottom: 6.5px solid transparent;
  background: none;
  transform: translateX(1.83px); /* optical centre = centroid, not bounding box */
}
.ico-clear { position: relative; }
.ico-clear::before, .ico-clear::after {
  content: "";
  position: absolute;
  left: 5.75px;
  top: 0.5px;
  width: 1.5px;
  height: 12px;
  background: currentColor;
  border-radius: 1px;
}
.ico-clear::before { transform: rotate(45deg); }
.ico-clear::after { transform: rotate(-45deg); }

/* ============ CONTROL ROWS ============ */

.loop-opts {
  display: grid;
  /* capsules hug their content now, so let the tracks follow them: the
     three labelled groups then sit on one even gutter */
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: var(--s4) var(--s4);
  align-items: end;
}
/* row 2 needs its own tracks: QUANTIZE is wide, so it takes a full line
   and the strength slider shares the next line with the toggles */
.loop-opts.row2 {
  margin-top: var(--s4);
  grid-template-columns: minmax(0, 1fr) auto;
}
.loop-opts.row2 > .opt:first-child { grid-column: 1 / -1; }

.opt { display: flex; flex-direction: column; gap: 7px; min-width: 0; align-items: flex-start; }
/* capsules hug their buttons instead of stretching to the track width */
.opt > .seg, .opt > .stepper { align-self: flex-start; }
.opt label, .opt > label {
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: var(--tr-09);
  color: var(--ink-faint);
}

.stepper { height: var(--ctl-h-m); }
.step-btn {
  width: 26px;
  height: calc(var(--ctl-h-m) - 2px);
  color: var(--ink-off);
  font-size: 0;
  position: relative;
}
.step-btn::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
#bpm-up::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1.5px; height: 9px;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.step-btn:hover { color: var(--accent); }
#bpm {
  width: 44px;
  height: calc(var(--ctl-h-m) - 2px);
  /* seams live in the .stepper #bpm rule below: at (1,0,0) this selector
     loses to the shared reset, so setting them here would be dead code */
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  letter-spacing: var(--tr-num);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
#bpm::-webkit-inner-spin-button { display: none; }
#bpm:focus { outline: none; }

.quant-row { display: flex; gap: var(--s2); align-items: center; min-width: 0; }

/* SONG rides in the label row, sized down so it doesn't stretch the row */
.opt-label-row { display: flex; align-items: center; gap: var(--s2); }
#btn-song {
  height: 16px;
  margin-block: -3px;
  padding: 0 5px;
  font-size: var(--fs-1);
  border-radius: var(--r-sm);
}
.toggles { flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; }
.tog {
  height: var(--ctl-h-m);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-09);
  padding: 0 10px 0 calc(10px + var(--tr-09));
}
#btn-undo, #btn-redo { font-size: var(--fs-3); padding: 0 8px; letter-spacing: 0; }
.strength-opt { flex-direction: row; align-items: center; gap: var(--s2); }
.strength-opt label { min-width: auto; }

/* loop progress: a recessed well */
.loop-bar {
  position: relative;
  height: 8px;
  border-radius: var(--r-sm);
  background: var(--well);
  border: 1px solid #05070a;
  box-shadow: inset 0 1px 3px #000000aa, inset 0 -1px 0 #ffffff0a, 0 1px 0 #ffffff09;
  margin-top: var(--s4);
  overflow: hidden;
}
#loop-progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #ff5a0088, var(--accent));
  box-shadow: 0 0 10px -2px #ff5a0088;
}
#loop-ticks { position: absolute; inset: 0; display: flex; }
#loop-ticks span { flex: 1; border-right: 1px solid #ffffff14; }
#loop-ticks span:last-child { border-right: none; }

/* ---- song chain ---- */
.song-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
  padding: var(--s2);
  border: 1px solid var(--line-soft);
  background: #00000022;
  border-radius: var(--r-md);
}
.song-label {
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: var(--tr-09);
  color: var(--ink-faint);
}
.song-chain { display: flex; gap: var(--s1); flex-wrap: wrap; flex: 1; min-height: var(--ctl-h-s); }
.song-chip {
  height: var(--ctl-h-s);
  min-width: 22px;
  font-size: var(--fs-2);
  border-radius: var(--r-sm);
  color: var(--amber);
  border-color: #ffb45455;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  touch-action: none; /* pointer-drag reorders; don't let touch scroll steal it */
  user-select: none;
}
.song-chip.drag { opacity: 0.55; cursor: grabbing; }
/* stack mode: chips are targets, the chosen one glows unmistakably */
.song-row.stacking .song-chip { border-style: dashed; }
.song-chip.sel {
  border-style: solid;
  background: #ffb45426;
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), 0 0 8px #ffb45466;
}
.song-chip.now { background: var(--amber); color: #16130f; border-color: var(--amber); }
.song-add { display: flex; gap: 3px; }
.song-add button {
  height: var(--ctl-h-s);
  font-size: var(--fs-1);
  border-radius: var(--r-sm);
  padding: 0 5px;
}
#btn-stack {
  height: var(--ctl-h-s);
  font-size: var(--fs-1);
  border-radius: var(--r-sm);
  padding: 0 6px;
}

/* ============ SLIDERS ============ */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: none;
  cursor: pointer;
  --thumb: 13px;
  /* thumb centre travels (100% - thumb); match the fill to it exactly */
  --pos: calc(var(--thumb) / 2 + var(--fill, 0) * (100% - var(--thumb)));
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  /* neutral by default — orange is reserved for "engaged right now" */
  background: linear-gradient(90deg, #71767e 0 var(--pos), var(--well) var(--pos) 100%);
  box-shadow: inset 0 1px 2px #000000aa, inset 0 -1px 0 #ffffff0a;
}
input[type="range"]:hover::-webkit-slider-runnable-track,
input[type="range"]:active::-webkit-slider-runnable-track,
input[type="range"]:focus-visible::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--accent) 0 var(--pos), var(--well) var(--pos) 100%);
}
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px; background: var(--well);
  box-shadow: inset 0 1px 2px #000000aa;
}
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: #71767e; }
input[type="range"]:hover::-moz-range-progress,
input[type="range"]:active::-moz-range-progress { background: var(--accent); }

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((4px - var(--thumb)) / 2);
  border-radius: 50%;
  /* moulded cap: specular at 26%, terminator, bounce */
  background: radial-gradient(circle at 50% 26%, #ffffff 0%, #e4e1db 30%, #b6b3ad 62%, #7c7a75 88%, #5d5b57 100%);
  border: 1px solid #06070a;
  box-shadow: 0 1px 2px #000000cc, 0 3px 7px -1px #00000088, inset 0 -1px 1px #00000055;
  transition: transform 120ms var(--e-out), box-shadow 120ms var(--e-out);
}
input[type="range"]::-moz-range-thumb {
  width: calc(var(--thumb) - 2px);
  height: calc(var(--thumb) - 2px);
  border-radius: 50%;
  border: 1px solid #06070a;
  background: radial-gradient(circle at 50% 26%, #ffffff 0%, #e4e1db 30%, #b6b3ad 62%, #7c7a75 88%, #5d5b57 100%);
  box-shadow: 0 1px 2px #000000cc, 0 3px 7px -1px #00000088;
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.02);
  box-shadow: 0 1px 2px #000000aa, 0 0 0 4px var(--accent-soft);
}
input[type="range"]:focus { outline: none; }

.slider-opt { flex-direction: row; align-items: center; gap: var(--s2); }
.slider-opt label { min-width: 42px; }
.slider-opt.grow { flex: 1; }
.mono-val {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: var(--tr-num);
  /* a value at rest is just a number; it only earns colour once it has been
     moved away from its default (JS adds .changed) */
  color: var(--ink-off);
  min-width: 18px;
  text-align: right;
  transition: color var(--d-tint) var(--e-std);
}
.mono-val.changed { color: var(--amber); }

/* ============ SAMPLER ============ */

.sampler-idle { display: flex; gap: var(--s2); align-items: stretch; }
.sampler-idle .drop-zone { flex: 1; }

.drop-zone {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  /* a milled well, not a flat wash — it is the largest surface in the
     right column when no sample is loaded */
  background: linear-gradient(180deg, #0e1013 0%, #121417 100%);
  box-shadow: inset 0 3px 8px -3px #000000cc, inset 0 1px 0 #00000080, inset 0 -1px 0 #ffffff0c;
  transition: background var(--d-tint) var(--e-std), box-shadow var(--d-tint) var(--e-std), border-color var(--d-tint) var(--e-std);
  cursor: pointer;
}
.drop-zone:hover {
  border-color: var(--line);
  box-shadow: inset 0 3px 8px -3px #000000cc, inset 0 1px 0 #00000080, inset 0 -1px 0 #ffffff0c, inset 0 0 0 1px #ffffff12;
}
.drop-zone.over {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 24px #ff5a0033;
}
.drop-zone.over .drop-ico { color: var(--accent); transform: translateY(2px); }
#file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: var(--s5) var(--s3);
  pointer-events: none;
}
.drop-ico { width: 20px; height: 20px; color: var(--ink-faint); transition: color 150ms, transform 150ms; }
/* the sampler speaks the same silkscreen language as every other label */
.drop-main {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: var(--tr-10);
  padding-left: var(--tr-10);
  color: var(--ink);
}
.drop-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-09);
  padding-left: var(--tr-09);
  color: var(--ink-faint);
}

/* ---- stem separation ---- */

/* the sampler lights up when a stem is dragged over it */
#panel-chop.stem-target {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px #ff5a0044, 0 0 24px -6px #ff5a0055;
}

.stems-progress { display: flex; flex-direction: column; gap: var(--s2); }
.stems-stage {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-09);
  color: var(--ink-off);
}
.stems-bar {
  height: 6px;
  border-radius: 3px;
  background: #00000066;
  box-shadow: inset 0 1px 3px -1px #000000cc;
  overflow: hidden;
}
#stems-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff8a3c, var(--accent));
  box-shadow: 0 0 8px -1px #ff5a00aa;
  transition: width 200ms var(--e-std);
}
.stems-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-09);
  color: var(--ink-faint);
  min-height: 1em;
}

.stems-list { display: flex; flex-direction: column; gap: var(--s1); }
.stems-list:not(:empty) { margin-top: var(--s3); }
.stem-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #16181d 0%, #101216 100%);
  cursor: grab;
  /* the row is a drag handle, not text: no selection, no touch scrolling */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: border-color var(--d-tint) var(--e-std), background var(--d-tint) var(--e-std);
}
.stem-row:hover { border-color: var(--line); background: linear-gradient(180deg, #1b1e24 0%, #131519 100%); }
.stem-row.dragging { opacity: 0.5; cursor: grabbing; }
.stem-name {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: var(--tr-10);
  text-transform: uppercase;
  color: var(--ink);
}
.stem-size { color: var(--ink-faint); }
/* the WAV link is a control, not prose */
.stem-row .mini-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.stems-hint {
  margin-top: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-09);
  color: var(--ink-faint);
  text-align: center;
}

.mic-btn {
  width: 56px;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-09);
  padding-left: var(--tr-09);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.mic-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 50% 33%, #6a6e75 0%, #4a4d53 60%, #24262a 100%);
  transition: all var(--d-tint);
}
.mic-btn.recording .mic-dot {
  background: radial-gradient(circle at 50% 33%, #fff0ee 0%, #ff7a70 32%, #ff3b30 70%, #a02018 100%);
  box-shadow: 0 0 8px var(--red);
  animation: blink 1s steps(2) infinite;
}

.chop-editor { display: flex; flex-direction: column; gap: var(--s3); }
.hidden { display: none !important; }

/* the waveform is the second screen — same material as the LCD */
#waveform {
  width: 100%;
  height: 92px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #0e1a10 0%, #0a120a 100%);
  border: 1px solid #04060a;
  box-shadow:
    inset 0 0 0 1px #ffffff06,
    inset 0 2px 12px #000000cc,
    inset 0 0 34px #4f8f3f16,
    0 1px 0 #ffffff0c;
  cursor: grab;
  touch-action: none;
  display: block;
}
.chop-hint {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: 0;
  color: var(--ink-off);
  margin-top: -6px;
}
.chop-hint kbd {
  font-family: var(--font-mono);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 3px;
  color: var(--ink-off);
  background: #00000033;
}

.chop-controls { display: flex; flex-direction: column; gap: var(--s3); }
.chop-info-row { display: flex; gap: var(--s2); align-items: center; }
.sample-bpm {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: var(--tr-10);
  color: var(--amber);
  white-space: nowrap;
}
/* 5 modifiers on one row, the primary action full width beneath — no holes */
.chop-btns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.chop-btns .accent { grid-column: 1 / -1; height: 32px; font-size: var(--fs-2); letter-spacing: 0.18em; }
/* five across is tight — let the label breathe by trimming the side padding */
.chop-btns .mini-btn { flex: none; min-width: 0; padding: 0 4px 0 calc(4px + var(--tr-09)); }

.mini-btn {
  height: var(--ctl-h-m);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-09);
  padding: 0 8px 0 calc(8px + var(--tr-09));
  white-space: nowrap;
  flex: 1;
}

/* ============ PAD EDIT ============ */

#panel-pad.disabled .panel-title,
#panel-pad.disabled .panel-num,
#panel-pad.disabled .pad-edit-name { color: var(--ink-faint); }
#panel-pad.disabled .pad-edit-grid,
#panel-pad.disabled .pad-edit-toggles,
#panel-pad.disabled .pe-layer-row { opacity: 0.55; pointer-events: none; }
/* the children are already :disabled; without this the two fades multiply
   (0.55 x 0.3 = 0.165) and the panel becomes unreadable rather than muted */
#panel-pad.disabled button:disabled,
#panel-pad.disabled input:disabled { opacity: 1; filter: none; }

.pad-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1) var(--s4); }
.pad-edit-grid .slider-opt label { min-width: 30px; font-size: var(--fs-1); }
.pad-edit-grid .mono-val { min-width: 26px; }
.pad-edit-grid input[type="range"] { height: var(--ctl-h-s); }

.pad-edit-toggles { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s3); flex-wrap: wrap; }
.choke-group { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.choke-group label {
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: var(--tr-09);
  color: var(--ink-faint);
}
#pe-choke button { width: auto; padding: 0 7px; }

.pe-layer-row {
  display: flex;
  gap: var(--s2);
  align-items: center;
  margin-top: var(--s3);
  padding: var(--s2);
  border: 1px solid var(--line-soft);
  background: #00000022;
  border-radius: var(--r-md);
}
.pe-layer-name {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-09);
  color: var(--amber);
}
.pe-layer-row .mini-btn { flex: 0 0 auto; width: 24px; padding: 0; }

/* ============ OUTPUT ============ */

/* 6 exports in two clean rows of three; the destructive NEW sits apart on
   its own full-width row so it can never be hit by muscle memory */
.out-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.out-btns .mini-btn { flex: none; }
#btn-new { grid-column: 1 / -1; }
/* LOAD hides a file input inside itself; clip it to the button's own radius
   without clip-path, which would also clip the focus ring outside the box */
.out-btns .mini-btn { position: relative; }
#btn-load { overflow: hidden; }
#btn-load:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
#project-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* the destructive one is separated and never first to the eye */
#btn-new { order: 99; color: var(--ink-faint); }
#btn-new:hover { color: var(--red); border-color: #ff3b3055; background: #ff3b300f; }

.chip-btn {
  width: var(--ctl-h-m);
  height: var(--ctl-h-m);
  border-radius: 50%;
  color: var(--ink-off);
  font-size: var(--fs-3);
  display: grid;
  place-items: center;
}
.chip-btn.wide {
  width: auto;
  padding: 0 10px 0 calc(10px + var(--tr-09));
  border-radius: 999px;
  font-size: var(--fs-1);
  letter-spacing: var(--tr-09);
}

/* ============ STEP EDITOR ============ */

/* same 16px inset as every other panel, so its content rails line up with
   the pad grid's rails instead of missing them by 4px */
#panel-steps { margin-top: var(--s5); padding: var(--s4); }
#panel-steps .panel-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--s6);
  margin-bottom: var(--s4);
}
/* the step editor carries its own pattern switcher, so you never have to
   scroll back to LOOP mid-edit */
#panel-steps .panel-head { align-items: center; gap: var(--s3); }
#panel-steps .steps-hint { flex: 1; }
#pattern-seg-steps button { width: 24px; }

.steps-hint {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  /* running lowercase copy, not a silkscreen label: no display tracking */
  letter-spacing: 0;
  color: var(--ink-off);
}

.step-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;
}

.step-row {
  display: grid;
  grid-template-columns: 42px 96px minmax(0, 1fr);
  gap: var(--s3);
  align-items: stretch;
}
.step-row.inaudible .step-cells { opacity: 0.35; }

/* labels stay put while the lanes scroll */
.step-row > .step-ms,
.step-row > .step-label {
  position: sticky;
  z-index: 2;
  background: var(--panel);
}
.step-row > .step-ms { left: 0; }
.step-row > .step-label { left: 54px; }

.step-ms { display: flex; gap: var(--s1); align-items: center; }
.ms-btn {
  width: 17px;
  height: 17px;
  border-radius: var(--r-sm);
  font-size: var(--fs-1);
  font-weight: 600;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  box-shadow: none;
  background: #17181c;
  border-color: var(--line-soft);
}
.ms-btn.m.on { color: #16130f; background: var(--red); border-color: var(--red); box-shadow: 0 0 6px #ff3b3055; }
.ms-btn.s.on { color: #16130f; background: var(--amber); border-color: var(--amber); box-shadow: 0 0 6px #ffb45455; }

.step-label {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--ink-off);
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  text-align: left;
  padding: 0 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--d-tint) var(--e-std);
  align-self: center;
}
.step-label:hover { color: var(--ink); background: none; }
.step-label-num { color: var(--ink-faint); margin-right: 6px; letter-spacing: var(--tr-num); }

.step-rename {
  width: 68px;
  background: var(--well);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  padding: 1px 4px;
  outline: none;
  text-transform: uppercase;
}

.step-cells { display: flex; gap: 3px; min-width: 0; }

.step-cell {
  flex: 1;
  min-width: 10px;
  height: 20px;
  border-radius: var(--r-sm);
  /* a step is a recessed socket in the panel, lit from above like everything
     else; unlit cells must read as holes, not as painted rectangles */
  background: linear-gradient(180deg, #17191c 0%, #1c1e22 100%);
  border: 1px solid #0c0d10;
  box-shadow: inset 0 1px 2px #00000088, 0 1px 0 #ffffff08;
  cursor: pointer;
  transition:
    background 80ms var(--e-std),
    border-color 80ms var(--e-std),
    box-shadow 80ms var(--e-std);
  touch-action: none;
}
.step-cell.beat-a { background: linear-gradient(180deg, #1b1d21 0%, #202226 100%); }
.step-cell.beat-start { margin-left: 6px; }
.step-cell.bar-start { margin-left: 18px; }
/* must out-specify .step-cell.on, or only empty cells respond to hover */
.step-cell:hover, .step-cell.on:hover { border-color: var(--ink-dim); }

/* velocity is legible across the whole range (oklab keeps mids bright) */
.step-cell.on {
  background: color-mix(in oklab, var(--accent) calc(28% + var(--vel, 0.8) * 72%), #241a13);
  border-color: color-mix(in oklab, var(--accent) calc(45% + var(--vel, 0.8) * 55%), #24262b);
  box-shadow: 0 0 calc(var(--vel, 0.8) * 9px) color-mix(in oklab, var(--accent) calc(var(--vel, 0.8) * 45%), transparent);
}
.step-cell.ph {
  border-color: #ffffff40;
  box-shadow: inset 0 0 0 1px #ffffff28;
  transition-duration: 0ms;
}
.step-cell.on.ph {
  background: color-mix(in oklab, var(--amber) calc(28% + var(--vel, 0.8) * 72%), #241a13);
  border-color: var(--amber);
  box-shadow: 0 0 calc(4px + var(--vel, 0.8) * 10px) #ffb45455;
  transition-duration: 0ms;
}

/* ============ OVERLAY ============ */

.overlay {
  position: fixed;
  inset: 0;
  background: #000000bb;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s4);
  z-index: 50;
  overflow-y: auto;
}
.overlay-card {
  margin-top: min(12vh, 96px);
  width: min(680px, 92vw);
  background: linear-gradient(180deg, #16181c 0%, #131518 100%);
  border: 1px solid #0b0c0f;
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: 0 40px 90px -18px #000000e0, inset 0 1px 0 #ffffff0e;
}
#help-overlay .panel-head { align-items: baseline; }
#btn-help-close { width: var(--ctl-h-s); height: var(--ctl-h-s); font-size: var(--fs-3); font-weight: 300; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s6); }
.help-grid h3 {
  font-size: var(--fs-2);
  font-weight: 700;
  letter-spacing: var(--tr-title);
  color: var(--ink-off);
  margin-bottom: 7px;
}
.help-grid p { font-size: var(--fs-4); line-height: 20px; color: var(--ink-dim); }
.help-grid b {
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-3);
}

/* ============ GROOVE BROWSER ============ */

.overlay-card.wide { width: min(920px, 94vw); }
.chip-btn.accent-chip {
  color: var(--accent);
  border-color: #ff5a0055;
  background: linear-gradient(180deg, #2a1c14 0%, #1e1610 100%);
}
.chip-btn.accent-chip:hover { color: #ffb086; border-color: var(--accent); }

.groove-list { max-height: min(64vh, 600px); overflow-y: auto; padding-right: var(--s1); }
.groove-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: var(--s2);
}
.groove-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); width: 100%; }
.groove-fam {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-09);
  color: var(--ink-faint);
  white-space: nowrap;
}
.groove-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 118px;
  text-align: left;
  padding: var(--s3);
  background: var(--ctl-bg);
  border: 1px solid var(--ctl-edge);
  border-radius: var(--r-md);
  box-shadow: var(--ctl-shadow);
  cursor: pointer;
  transition:
    background var(--d-tint) var(--e-std),
    border-color var(--d-tint) var(--e-std),
    transform var(--d-release) var(--e-out);
}
.groove-card:hover {
  background: var(--ctl-bg-hover);
  border-color: #ff5a0055;
  transform: translateY(-1px);
}
.groove-card:active { transform: translateY(1px); box-shadow: var(--ctl-shadow-press); }
.groove-card.on { border-color: var(--accent); }
.groove-name {
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: var(--tr-11);
  color: var(--ink);
}
.groove-blurb {
  font-size: var(--fs-4);
  line-height: 1.4;
  color: var(--ink-dim);
  text-transform: none;
}
.groove-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--tr-09);
  color: var(--ink-faint);
  margin-top: auto;
  padding-top: 3px;
}
.groove-empty { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--ink-faint); }

@container machine (max-width: 620px) {
  .groove-cards { grid-template-columns: 1fr; }
}

.slice-ghost {
  position: fixed;
  z-index: 100;
  transform: translate(-50%, -130%);
  background: var(--accent);
  color: #16130f;
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: 700;
  letter-spacing: var(--tr-10);
  padding: 5px 9px 5px calc(9px + var(--tr-10));
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 8px 20px #000000aa;
}
.slice-ghost.layer { background: var(--amber); }

/* ============ FOCUS & DISABLED ============ */

:where(button, .pad, [tabindex], input, canvas#waveform):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  position: relative;
  z-index: 5;
}
.pad:focus-visible { outline-offset: 3px; }
#bpm:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; color: var(--amber); }
.step-cell:focus-visible { outline-offset: 1px; }

button:disabled, input:disabled {
  opacity: 0.3;
  filter: saturate(0.25);
  cursor: not-allowed;
  box-shadow: none;
}
button:disabled:hover {
  color: var(--ink-off);
  background: var(--ctl-bg);
}

/* ============================================================
   PAGE CONTENT (below the instrument)
   ============================================================ */

.seo {
  width: min(1180px, 100%);
  margin: var(--s6) auto 0;
  padding: 0 var(--s5) var(--s6);
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.65;
  -webkit-user-select: text;
  user-select: text;
}
.seo h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.22;
  color: var(--ink);
  margin-bottom: var(--s3);
  max-width: 22ch;
}
.seo h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.004em;
  line-height: 1.3;   /* headings must not inherit body leading */
  color: var(--ink);
  margin: var(--s6) 0 var(--s2);
}
.seo h3 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 2px;
}
.seo p { margin-bottom: var(--s3); max-width: 72ch; }
.seo .lede { font-size: 15px; color: var(--ink); max-width: 68ch; }
.seo b { color: var(--ink); font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.seo a { color: var(--ink); text-decoration-color: #ffffff33; text-underline-offset: 3px; }
.seo a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.crumbs { margin-bottom: var(--s3); }
.crumbs ul { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; }
.crumbs li { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--ink-faint); letter-spacing: var(--tr-10); }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); color: #3f4249; }
.crumbs a { color: var(--ink-faint); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

.meta-line {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: var(--tr-10);
  color: var(--ink-off);
}
.meta-line span { color: var(--ink-faint); }

.feature-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); margin-top: var(--s4); }
.feature-cols p { margin-bottom: 0; }

.tips { padding-left: 1.25em; margin-bottom: var(--s3); }
.tips li { margin-bottom: var(--s2); max-width: 72ch; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s2);
  list-style: none;
  margin: var(--s3) 0 var(--s4);
}
.card-grid a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s3);
  background: var(--ctl-bg);
  border: 1px solid var(--ctl-edge);
  border-radius: var(--r-md);
  box-shadow: var(--ctl-shadow);
  text-decoration: none;
  transition: background var(--d-tint) var(--e-std), border-color var(--d-tint) var(--e-std);
}
.card-grid a:hover { background: var(--ctl-bg-hover); border-color: #ff5a0055; color: var(--ink); }
.card-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.card-bpm { font-family: var(--font-mono); font-size: var(--fs-2); letter-spacing: var(--tr-10); color: var(--ink-faint); }

.faq h3 { margin-top: var(--s3); }
.faq p { margin-bottom: var(--s2); }

.disclaimer {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--ink-faint);
  max-width: 72ch;
}

@media (max-width: 640px) {
  .seo { padding: 0 var(--s4) var(--s5); margin-top: var(--s5); }
  .seo h1 { font-size: 22px; max-width: none; }
  .feature-cols { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ============================================================
   RESPONSIVE
   Internal layout responds to the MACHINE's own width via
   container queries; media queries handle only the page shell.
   ============================================================ */

@media (max-width: 900px) { body { padding: 10px; } }

@media (max-width: 640px) {
  body {
    padding: 0;
    background-image: radial-gradient(900px 500px at 50% -10%, #101318 0%, transparent 60%);
  }
  #machine {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 10px 14px;
    min-height: 100vh;
  }
}

@container machine (max-width: 900px) {
  /* minmax(0,…) so the column may shrink past its content's min-content
     width; plain 1fr lets a wide child push the whole deck out */
  #deck, #topbar { grid-template-columns: minmax(0, 1fr); }
  #pad-zone, #control-zone, .panel { min-width: 0; }
  .top-right { padding-right: 0; }
}

/* Tight: drop the chrome a phone does not need */
@container machine (max-width: 620px) {
  #topbar { display: none; }
  /* the top bar carried the only help trigger and the only feedback
     surface, so both reappear inside the pad module */
  #btn-help-compact { display: grid; }
  .status-compact { display: block; }
  .kit-name-compact { display: inline; }

  #deck { gap: var(--s3); }
  #pad-zone { padding: var(--s3); gap: var(--s3); }
  #pad-grid { gap: var(--s2); }
  .panel { padding: var(--s3); }

  .loop-opts { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .loop-opts.row2 { grid-template-columns: 1fr; }
  .loop-opts.row2 > .opt:first-child { grid-column: auto; }
  .transport { gap: 6px; }
  .pad-edit-grid { grid-template-columns: 1fr; gap: 2px; }
  .pad-edit-toggles { flex-wrap: wrap; }
  .choke-group { margin-left: 0; }
  .sampler-idle { flex-direction: column; }
  .mic-btn { width: 100%; flex-direction: row; gap: var(--s2); padding: 9px 0; }
  .out-btns { grid-template-columns: repeat(2, 1fr); }
  .help-grid { grid-template-columns: 1fr; gap: var(--s3); }
  .chop-info-row { flex-wrap: wrap; }
  #panel-steps { margin-top: var(--s3); padding: var(--s3); }
  .steps-hint { display: none; }
  #panel-steps .panel-head { grid-template-columns: auto auto; gap: var(--s3); }
}

/* Very tight: shrink the furniture so the pads stay playable */
@container machine (max-width: 440px) {
  #pad-grid { gap: 6px; }
  .pad { padding: 7px 8px; border-radius: var(--r-md); }
  /* centred ellipsis clips BOTH ends silently, so wrap instead of truncate */
  .pad-name {
    font-size: var(--fs-2);
    white-space: normal;
    line-height: 1.18;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }
  .pad-key { display: none; }
  .perform-bar { gap: 6px; }
  .perform-bar > #btn-full { margin-left: 0; }
  #repeat-seg, #grid-seg { display: none; }
  .panel-num { display: none; }
}

@container machine (max-width: 760px) {
  .step-row { grid-template-columns: 38px 78px minmax(0, 1fr); gap: 6px; }
  .step-row > .step-label { left: 44px; }
  .step-cell { min-width: 13px; }
}

@container machine (max-width: 560px) {
  .step-row { grid-template-columns: 38px 62px minmax(0, 1fr); gap: 5px; }
  .step-row > .step-label { left: 43px; }
  .step-label { font-size: var(--fs-1); }
  .step-cell { min-width: 11px; }
  .step-cell.bar-start { margin-left: 10px; }
}

/* ---- touch: fingers need bigger targets ---- */

@media (pointer: coarse) {
  /* grow the CAPSULE as well as its children, or the block stays 28px while
     its buttons grow and every label falls off the capsule's centreline */
  .seg, .stepper { height: 34px; }
  .seg button, #bpm, .step-btn { height: calc(34px - 2px); }
  .tog, .mini-btn, .song-add button { min-height: 34px; }
  .chip-btn { width: 34px; height: 34px; }
  /* the compact chip is the ONLY help trigger on a phone — it must be a
     real target, not a 22px dot */
  #btn-help-compact { width: 34px; height: 34px; font-size: var(--fs-3); }
  /* the grid must be pannable; .step-cell blocks touch so it can drag
     velocity, so give the scroller itself the horizontal gesture */
  .step-grid { touch-action: pan-x pan-y; }
  /* touch-action intersects with ancestors, so a cell set to `none` would
     veto the scroller above it; keep the vertical velocity drag by taking
     only the horizontal axis away from the cell */
  .step-cell { touch-action: pan-x; }
  .ms-btn { width: 26px; height: 26px; font-size: var(--fs-2); }
  .step-cell { height: 24px; }
  input[type="range"] { height: 30px; --thumb: 18px; }
  .pad-key { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============ LIVE CODE PANEL (Strudel) ============ */

#panel-code { margin-top: var(--s4); }
.code-status {
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green);
  margin-left: var(--s2);
  text-transform: none;
}
.code-status.err { color: var(--accent); }
.code-view {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  background: var(--well);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  max-height: 380px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink-off);
  user-select: text;
}
.code-view .c-com { color: #5b6068; }
.code-view .c-str { color: #9fb877; }
.code-slot {
  color: var(--ink);
  background: #ffffff0a;
  border-bottom: 1px dashed #ffb45466;
  border-radius: 3px;
  padding: 0 1px;
  outline: none;
}
.code-slot:hover { background: #ffffff12; }
.code-slot:focus { background: #ffb4541a; border-bottom-color: var(--amber); }
.code-slot.err { border-bottom: 1px solid var(--accent); background: #ff5a001a; }
.code-slot[data-empty]::after {
  content: '·fx';
  color: #ffb45466;
  font-style: italic;
}
.code-slot.master[data-empty]::after { content: '·master fx'; }
.code-slot.src { color: var(--amber); }

/* ---- song chain: stacked steps (A+B) ---- */
.song-chip { padding: 0 6px; }
.song-chip .plus { color: var(--ink-faint); margin: 0 1px; }
.stack-tog { margin-left: var(--s2); }
.stack-tog.on { color: var(--amber); border-color: #ffb45488; }