/* ==========================================================================
   SOFA SAUCE: one object, photographed straight on.
   Everything is sized in rem. The root font size is the single scaling knob
   (set in index.html), so the whole instrument scales proportionally and
   never reflows. Nothing here has a rounded corner.
   ========================================================================== */

@font-face {
  font-family: "Archivo VF";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: block;
}

:root {
  --shell:  #E9E3D6;
  --panel:  #1C1A18;
  --back:   #2A2724;
  --ink:    #EFE6D2;
  --ink-soft: #A79C86;
  --vfd:    #FF8A1F;
  --vfd-dim:#3A2310;
  --rubber: #8C857A;
  --rubber-ink: #3A3630;
  --ac1:    #9C4A2F;
  --ac2:    #C08A2E;
  --ac3:    #5F7355;
  --ac4:    #43536B;
  --led:    #FF8A1F;

  /* silkscreen type: optically small, slightly heavy, letter spaced */
  --legend: clamp(6.5px, 0.56rem, 11px);
  --legend-track: 0.11em;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--back);
  color: var(--ink);
  font-family: "Archivo VF", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  font-stretch: 78%;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* the photographic seamless: deep warm grey with a slow falloff to the corners */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(118% 96% at 46% 36%,
      rgba(255, 246, 228, 0.075) 0%,
      rgba(255, 246, 228, 0.028) 34%,
      rgba(0, 0, 0, 0.00) 58%,
      rgba(0, 0, 0, 0.30) 100%);
}

.stage {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  padding: 0.4rem;
}

/* ---------------------------------------------------------------- machine */

.machine {
  width: 40rem;
  flex: 0 0 auto;
  position: relative;
}

.shell {
  position: relative;
  background: var(--shell);
  padding: 0.55rem;
  /* tight and physical: a 2px dark seam under the shell, no chrome, no glow */
  box-shadow:
    0 0.06rem 0.1rem rgba(0, 0, 0, 0.55),
    0 0.22rem 0.36rem rgba(0, 0, 0, 0.42);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(180deg, rgba(0,0,0,0) 78%, rgba(0,0,0,0.13) 100%);
}

.panel {
  height: 34.9rem;
  background: var(--panel);
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  /* a barely-there brushed direction on a matte charcoal */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.014) 0 1px,
      rgba(0,0,0,0.014) 1px 2px),
    radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,0.05), rgba(0,0,0,0) 62%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55), inset 0 0.08rem 0.16rem rgba(0,0,0,0.7);
}

/* ------------------------------------------------------- silkscreen type */

.tag, .sh, .knobleg, .knobval, .padkey, .padnum, .makers, .display-note,
.bt-leg, .step-num, .stat i, .sread i {
  font-family: "Archivo VF", "Arial Narrow", system-ui, sans-serif;
  font-stretch: 72%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--legend-track);
  color: var(--ink);
  white-space: nowrap;
}

.panel-top {
  height: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.panel-top .tag { font-size: var(--legend); color: var(--ink-soft); }
.tag-gap { flex: 1 1 auto; }

/* ---------------------------------------------------------------- display */

.panel-display {
  height: 6.6rem;
  display: flex;
  gap: 0.3rem;
}

.display-window {
  width: 19rem;
  flex: 0 0 auto;
  background: var(--panel);
  padding: 0.28rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), inset 0 0 0 2px rgba(0,0,0,0.6);
  display: flex;
}

.display-glass {
  position: relative;
  flex: 1 1 auto;
  background: #0B0907;
  padding: 0.32rem 0.4rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0.1rem 0.2rem rgba(0,0,0,0.9), inset 0 0 0 0.05rem rgba(0,0,0,0.8);
}
/* the glass itself: a faint tint so the unlit cells read as a real VFD */
.display-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 42%);
}

.vfd { display: block; width: 100%; height: auto; max-height: 5.5rem; }
/* the filament sits behind the glass and lights the whole cell faintly */
.display-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(76% 68% at 50% 50%,
    rgba(255, 138, 31, 0.055) 0%, rgba(255, 138, 31, 0.018) 58%, rgba(0, 0, 0, 0) 100%);
}
.vfd rect { fill: var(--vfd-dim); }
.vfd .vfd-on { fill: var(--vfd); }
.vfd .vfd-off { fill: var(--vfd-dim); }
.vfd .vfd-lead { fill: var(--vfd-dim); opacity: 0.34; }

.display-note {
  position: absolute;
  left: 0.4rem;
  bottom: 0.16rem;
  font-size: clamp(4.5px, 0.3rem, 6px);
  color: rgba(239, 230, 210, 0.30);
  letter-spacing: 0.16em;
}

/* ------------------------------------------------------------------ knobs */

.knob-row {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.16rem;
}

.knobcell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem 0 0.05rem;
}
.knobleg {
  font-size: var(--legend);
  color: var(--ink-soft);
  line-height: 1.1;
}
.knobval {
  font-size: var(--legend);
  color: var(--vfd);
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.knob {
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  cursor: ns-resize;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* A knob is a cylinder: its face is a circle, so it has no corner to round. */
.knobbody {
  position: relative;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, #565049 0%, #38342F 46%, #1A1816 100%);
  box-shadow:
    0 0.05rem 0.08rem rgba(0,0,0,0.8),
    0 0.13rem 0.16rem rgba(0,0,0,0.45),
    inset 0 0 0 0.035rem rgba(255,255,255,0.09);
  transform: rotate(0deg);
  /* a detent tick, not a glide */
  transition: transform 45ms cubic-bezier(0.32, 0.0, 0.67, 1);
}
/* the knurled edge */
.knobbody::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(255,255,255,0.30) 0deg 3.4deg,
    rgba(0,0,0,0.42) 3.4deg 6.8deg);
  -webkit-mask: radial-gradient(circle, transparent 0 0.72rem, #000 0.745rem 100%);
  mask: radial-gradient(circle, transparent 0 0.72rem, #000 0.745rem 100%);
}
/* the cream pointer line */
.knobline {
  position: absolute;
  left: 50%;
  top: 0.13rem;
  width: 0.11rem;
  height: 0.8rem;
  margin-left: -0.055rem;
  background: var(--ink);
  box-shadow: 0 0 0.03rem rgba(0,0,0,0.9);
  border-radius: 0;
}
.knob:focus-visible { outline: 0.06rem solid var(--vfd); outline-offset: 0.06rem; }

/* ------------------------------------------------------------------- pads */

.panel-mid {
  height: 19.5rem;
  display: flex;
  gap: 0.3rem;
}

.pads {
  width: 19.5rem;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0.25rem 0.28rem;
}

.padcell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

.led {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;               /* a 3mm LED is round; the plastic is not */
  margin: 0 auto 0.14rem;
  background: #14120F;
  box-shadow: inset 0 0.02rem 0.03rem rgba(0,0,0,1), inset 0 -0.02rem 0.03rem rgba(255,255,255,0.10),
              0 0 0 0.035rem rgba(0,0,0,0.75), 0 0.02rem 0.03rem rgba(255,255,255,0.05);
  position: relative;
}
.led i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--led);
  opacity: 0;
  will-change: opacity;
}

.pad {
  flex: 1 1 auto;
  position: relative;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  min-height: 0;
  font: inherit;
  color: var(--rubber-ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(180deg, #918A7E 0%, #867F75 55%, #746E65 100%);
  box-shadow:
    0 0.09rem 0.1rem rgba(0,0,0,0.62),
    inset 0 0 0 0.035rem rgba(255,255,255,0.16),
    inset 0 -0.06rem 0.07rem rgba(0,0,0,0.30);
  cursor: pointer;
  touch-action: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.34rem 0.16rem 0.16rem;
  transform: translateY(0);
  /* matter: presses down, the legend travels with it, the shadow tightens */
  transition: transform 34ms cubic-bezier(0.3, 0, 0.7, 1),
              box-shadow 34ms cubic-bezier(0.3, 0, 0.7, 1);
  will-change: transform;
}
.pad.down {
  transform: translateY(0.15rem);
  box-shadow:
    0 0.015rem 0.02rem rgba(0,0,0,0.7),
    inset 0 0 0 0.035rem rgba(255,255,255,0.10),
    inset 0 0.07rem 0.1rem rgba(0,0,0,0.42);
  transition-duration: 18ms;
}
/* the painted column arc along the top edge of the pad */
.padarc {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 0.07rem;
  height: 0.36rem;
  display: block;
  overflow: visible;
}
.padarc path { stroke-width: 0.055rem; fill: none; stroke-linecap: butt; }
.pad[data-col="0"] .padarc path { stroke: var(--ac1); }
.pad[data-col="1"] .padarc path { stroke: var(--ac2); }
.pad[data-col="2"] .padarc path { stroke: var(--ac3); }
.pad[data-col="3"] .padarc path { stroke: var(--ac4); }

.padnum {
  position: absolute;
  top: 0.36rem;
  left: 0.28rem;
  font-size: clamp(5.5px, 0.42rem, 9px);
  color: rgba(58, 54, 48, 0.72);
  line-height: 1;
}
.padname {
  font-family: "Archivo VF", system-ui, sans-serif;
  font-stretch: 74%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(6px, 0.46rem, 10px);
  color: var(--rubber-ink);
  opacity: 0.82;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}
.pad.sel {
  box-shadow:
    0 0.09rem 0.1rem rgba(0,0,0,0.62),
    inset 0 0 0 0.035rem rgba(255,255,255,0.16),
    inset 0 0 0 0.16rem rgba(255, 138, 31, 0.62);
}
.pad.sel .padnum { color: rgba(35, 24, 10, 0.9); }
.pad.sel .padname { opacity: 1; }
.pad:focus-visible { outline: 0.07rem solid var(--vfd); outline-offset: 0.05rem; }

/* the key letter has its own ceiling: it must sit inside a 0.4rem box at every
   scale, or it crowds the LED of the pad below it */
.padkey {
  font-size: clamp(5px, 0.5rem, 9px);
  color: var(--ink-soft);
  text-align: center;
  line-height: 1;
  margin-top: 0.13rem;
  height: 0.4rem;
}

/* ------------------------------------------------------------------- side */

.side {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* six section headings have to fit the column at the smallest scale, so the
     sections share whatever height is left rather than sitting in a clump */
  justify-content: space-between;
  gap: 0.12rem;
  min-width: 0;
}

/* THE COLUMN TAKES THE HEIGHT IT IS GIVEN. Six sections, each a heading and a
   row of buttons, have to fit between the display and the steps at every
   scale. Their natural height is fixed in rem and the legends are floored in
   px, so at the smallest scale the column was 17px taller than its box and the
   last row was drawn over the step row. A share of the height, and a button
   that stretches into whatever that share is, cannot overflow. */
.sect { display: flex; flex-direction: column; gap: 0.1rem; flex: 0 1 auto; min-height: 0; }
.sect .sh { font-size: var(--legend); color: var(--ink-soft); line-height: 1; }
.sect .row { display: grid; gap: 0.2rem; flex: 1 1 auto; min-height: 0; }
/* a shade shorter than the transport row: six of these have to stack in the
   same column as the display and the steps at the smallest scale */
.side .bt { height: 2rem; min-height: 0; }
.row.c2 { grid-template-columns: repeat(2, 1fr); }
.row.c3 { grid-template-columns: repeat(3, 1fr); }
.row.c4 { grid-template-columns: repeat(4, 1fr); }

/* square, hard plastic, cream top */
.bt {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0 0.18rem;
  border-radius: 0;
  font: inherit;
  position: relative;
  height: 2.2rem;
  background: linear-gradient(180deg, #F3ECDD 0%, #E2D9C7 100%);
  color: #2A2620;
  box-shadow:
    0 0.075rem 0.08rem rgba(0,0,0,0.62),
    inset 0 0 0 0.03rem rgba(255,255,255,0.55),
    inset 0 -0.05rem 0.06rem rgba(0,0,0,0.22);
  cursor: pointer;
  touch-action: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  transform: translateY(0);
  transition: transform 30ms cubic-bezier(0.3, 0, 0.7, 1),
              box-shadow 30ms cubic-bezier(0.3, 0, 0.7, 1),
              background-color 60ms linear;
  overflow: hidden;
}
.bt .bt-leg {
  font-size: var(--legend);
  color: #33302A;
  letter-spacing: 0.07em;
  line-height: 1;
}
.bt .bt-sub {
  font-family: "Archivo VF", system-ui, sans-serif;
  font-stretch: 70%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(4.8px, 0.33rem, 7px);
  color: rgba(40, 36, 30, 0.55);
  line-height: 1;
}
.bt.down {
  transform: translateY(0.14rem);
  box-shadow:
    0 0.01rem 0.015rem rgba(0,0,0,0.7),
    inset 0 0 0 0.03rem rgba(255,255,255,0.30),
    inset 0 0.06rem 0.08rem rgba(0,0,0,0.30);
  transition-duration: 14ms;
}
.bt.on {
  background: linear-gradient(180deg, #FFD9A6 0%, #F0A855 100%);
  box-shadow:
    0 0.075rem 0.08rem rgba(0,0,0,0.62),
    inset 0 0 0 0.03rem rgba(255,255,255,0.6),
    inset 0 -0.05rem 0.06rem rgba(0,0,0,0.18);
}
.bt.on .bt-leg { color: #3A2210; }
.bt.amber-dot::after {
  content: "";
  position: absolute;
  top: 0.14rem;
  right: 0.14rem;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 0.13rem var(--led);
}
.bt:focus-visible { outline: 0.07rem solid var(--vfd); outline-offset: 0.05rem; }
.bt.bt-transport { height: 2.1rem; }

/* ------------------------------------------------------- the sample sheet */

/* The editor is the same panel showing a different page: same shell, same
   footprint, nothing floating over the margins. */
.sheet {
  position: absolute;
  inset: 0.55rem;
  z-index: 6;
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.55rem;
  background: var(--panel);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.014) 0 1px,
      rgba(0,0,0,0.014) 1px 2px),
    radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,0.05), rgba(0,0,0,0) 62%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55), inset 0 0.08rem 0.16rem rgba(0,0,0,0.7);
}
.sheet.on { display: flex; }

.sheet-top {
  height: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  min-width: 0;
}
.sheet-top .sh { font-size: var(--legend); color: var(--ink-soft); }
.sh-name { color: var(--vfd); overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.sheet-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.smedia {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: #0B0907;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0.1rem 0.2rem rgba(0,0,0,0.9), inset 0 0 0 0.05rem rgba(0,0,0,0.8);
}
.smedia video { display: none; max-width: 100%; max-height: 100%; }
.smedia.has-video video { display: block; }
.smedia-void {
  font-family: "Archivo VF", system-ui, sans-serif;
  font-stretch: 74%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--legend);
  color: rgba(239, 230, 210, 0.22);
}
.smedia.has-video .smedia-void { display: none; }
.sbusy {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: "Archivo VF", system-ui, sans-serif;
  font-stretch: 74%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--legend);
  color: var(--vfd);
  background: #0B0907;
}
.sheet.busy .sbusy { display: flex; }

/* the waveform is the trim surface: drag it to scrub, drag the tabs to trim */
.swave {
  flex: 0 0 5.5rem;
  position: relative;
  background: #0B0907;
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
  box-shadow: inset 0 0.1rem 0.2rem rgba(0,0,0,0.9), inset 0 0 0 0.05rem rgba(0,0,0,0.8);
}
.swave-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.swave .wave-fill { fill: rgba(239, 230, 210, 0.26); }
.swave .wave-sel { fill: var(--vfd); opacity: 0.82; }
.swave .wave-mid { stroke: rgba(239, 230, 210, 0.16); stroke-width: 0.4; }

.scursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.09rem;
  margin-left: -0.045rem;
  background: var(--vfd);
  pointer-events: none;
}
.shandle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.13rem;
  margin-left: -0.065rem;
  background: var(--ink);
  pointer-events: none;
}
.shandle::before {
  content: "";
  position: absolute;
  top: 0;
  left: -0.3rem;
  width: 0.72rem;
  height: 0.56rem;
  background: var(--ink);
}
.shandle.grab::before { background: var(--vfd); }
/* the tabs sit outside the chosen window, so neither covers the selection */
.sh-out::before { left: auto; right: -0.3rem; }

.sheet-readout {
  flex: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sread { display: flex; flex-direction: column; gap: 0.05rem; }
.sread b {
  font-family: "Archivo VF", system-ui, sans-serif;
  font-stretch: 74%;
  font-weight: 800;
  font-size: clamp(6px, 0.46rem, 10px);
  color: var(--vfd);
  line-height: 1;
  letter-spacing: 0.04em;
}
.sread i { font-style: normal; font-size: var(--legend); color: var(--ink-soft); }
.sread-r { margin-left: auto; text-align: right; }

.sheet-controls {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.2rem;
}

.filepick { display: none; }

/* ------------------------------------------------------------------ steps */

.steps {
  height: 3.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.steps-head {
  height: 0.62rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.steps-head .sh { font-size: var(--legend); color: var(--ink-soft); }
.sh-r { margin-left: auto; }
.barpages { display: flex; gap: 0.16rem; }
.bar-btn {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0 0.26rem;
  border-radius: 0;
  font-family: "Archivo VF", system-ui, sans-serif;
  font-stretch: 72%;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: clamp(5px, 0.36rem, 7.5px);
  height: 0.56rem;
  line-height: 0.56rem;
  background: #35322E;
  color: var(--ink-soft);
  cursor: pointer;
}
.bar-btn.on { background: var(--ac2); color: #241B0C; }
.bar-btn:disabled { opacity: 0.35; cursor: default; }

.step-row {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 0.16rem;
}
.step {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  position: relative;
  height: 2.3rem;
  background: linear-gradient(180deg, #E7DFCE 0%, #D8CFBB 100%);
  box-shadow:
    0 0.07rem 0.075rem rgba(0,0,0,0.6),
    inset 0 0 0 0.03rem rgba(255,255,255,0.5),
    inset 0 -0.05rem 0.06rem rgba(0,0,0,0.2);
  cursor: pointer;
  touch-action: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.16rem 0 0.12rem;
  transform: translateY(0);
  transition: transform 28ms cubic-bezier(0.3, 0, 0.7, 1), box-shadow 28ms;
}
.step .dot {
  width: 0.62rem;
  height: 0.62rem;
  background: #3E3A34;
  box-shadow: inset 0 0.03rem 0.05rem rgba(0,0,0,0.8);
}
.step .dot.hi { background: var(--ac2); }
.step.act .dot { background: var(--led); box-shadow: inset 0 0.02rem 0.04rem rgba(0,0,0,0.55), 0 0 0.1rem rgba(255,138,31,0.5); }
.step .step-num {
  font-size: clamp(5.2px, 0.33rem, 7px);
  color: #4A453D;
  line-height: 1;
}
.step.down { transform: translateY(0.12rem); box-shadow: 0 0.01rem 0.015rem rgba(0,0,0,0.7), inset 0 0.05rem 0.07rem rgba(0,0,0,0.28); }
.step.play { box-shadow: 0 0.07rem 0.075rem rgba(0,0,0,0.6), inset 0 0 0 0.09rem rgba(255,138,31,0.85); }
.step:focus-visible { outline: 0.07rem solid var(--vfd); outline-offset: 0.05rem; }

/* -------------------------------------------------------------- transport */

.panel-bottom {
  height: 2.45rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.transport {
  display: grid;
  /* four, not three: PLAY / STOP / REC and the sound switch, which is a real
     control on the panel rather than something to go looking for elsewhere.
     Sized so the row still fits the narrowest screen with room to spare. */
  grid-template-columns: repeat(4, 4rem);
  gap: 0.22rem;
  flex: 0 0 auto;
}
.status { display: flex; gap: 0.9rem; align-items: center; }
.stat { display: flex; flex-direction: column; gap: 0.06rem; }
.stat b {
  font-family: "Archivo VF", system-ui, sans-serif;
  font-stretch: 74%;
  font-weight: 800;
  font-size: clamp(6px, 0.46rem, 10px);
  color: var(--vfd);
  line-height: 1;
  letter-spacing: 0.04em;
}
.stat i { font-style: normal; font-size: var(--legend); color: var(--ink-soft); }

.modelmark {
  margin-left: auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  flex: 0 0 auto;
}
.model {
  font-family: "Archivo VF", system-ui, sans-serif;
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(8.5px, 0.92rem, 21px);
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: var(--ink);
}
/* the model mark carries the maker's two-tone: the name cream, the second word
   in the readout's amber, the way the reference machine inks its model number */
.model .amber { color: var(--vfd); }
.makers {
  font-size: clamp(4.8px, 0.33rem, 7px);
  color: var(--ink-soft);
  letter-spacing: 0.2em;
}

/* The bottom row at its narrowest. The transport is four chunky buttons and the
   status strip is three readouts, both fixed and both needed, and the model mark
   is ten letters where the model number it replaced was eight. Below about
   300px of viewport those three stop fitting on one line. The mark keeps its
   place and gives up its tracking instead, the way a real silkscreen closes up
   when the panel runs out of room, the gaps come in, and the 4px maker's line
   steps aside, which at this scale is where a machine puts it anyway. No size is
   refused and nothing is dropped that can still be read. Above 300px, which is
   every phone, none of this applies. */
@media (max-width: 300px) {
  .model { font-size: 7.8px; font-stretch: 100%; letter-spacing: 0; }
  .makers { display: none; }
  .status { gap: 0.5rem; }
  .panel-bottom { gap: 0.2rem; }
}

/* ---------------------------------------------------------------- caption */

.caption {
  margin: 0;
  max-width: 40rem;
  display: flex;
  align-items: baseline;
  gap: 0.42rem;
  flex-wrap: wrap;
  justify-content: center;
  font-family: "Archivo VF", system-ui, sans-serif;
  font-stretch: 72%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(7px, 0.42rem, 10px);
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.5;
}
.cap-model { color: var(--ink); font-weight: 800; }
.cap-sep { color: var(--ink-soft); }
.cap-line b { color: var(--vfd); font-weight: 800; }
.cap-line { color: rgba(239, 230, 210, 0.62); }

/* a person who has asked the browser for less motion gets a still machine */
@media (prefers-reduced-motion: reduce) {
  .knobbody, .pad, .bt, .step { transition-duration: 1ms; }
}