/* ===========================================================================
   Hedborg Design Company — Direction B, "The Panel"

   A cold anodised-aluminium panel, silkscreen black, and brass. Nothing else.

   LINT RULES ENFORCED IN THIS FILE
   1. --brass on --panel is 1.85:1. Brass is NEVER used for text on the panel.
      It appears as a mark only: the meter fill and ring on the ribbon, fills
      inside generated artwork (drawn in JS), and readout type inside the dark
      display window. Grep: `color: var(--brass)` must only occur under `.win`.
   2. DM Mono exists only inside .win. Mono anywhere on the panel itself is the
      terminal trap and breaks the direction.
   3. Bodoni Moda never renders below 20px. Every rule that sets it is marked.
   4. There is not one CSS transition or keyframe animation in this file. The
      single orchestrated moment — the ~900ms power-on — is driven in panel.js
      so it can be one curve with the generator, and so `prefers-reduced-motion`
      can switch it off at the source.
   =========================================================================== */

/* --- Fonts, self-hosted. No third-party CDN dependency in 2032. ----------- */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/bodoni-moda-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/bodoni-moda-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dm-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dm-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Colour — four values and one tint. */
  --panel: #B7B9B3;       /* the page ground: cold aluminium grey-green      */
  --panel-edge: #C9CBC5;  /* tint of panel: light edges, raised surfaces     */
  --ink: #15171A;         /* silkscreen: all type, all rules, window ground  */
  --ink-2: #4A4D4F;       /* the only secondary ink. 4.6:1 on panel          */
  --brass: #B4862A;       /* fittings only. Never text on the panel.         */

  /* Ribbon-driven. panel.js writes every one of these. Values here are the
     midpoint, so the page is correct before JS runs and under noscript. */
  --blend: 0.5;
  --blend-pct: 50%;
  --axis: 0.5;
  --ratio: 1.307;
  --track-display: -0.005em;
  --rule: 1.5px;
  --rule-thin: 0.5px;
  --rule-gap: 1.5px;

  /* Grid: even and symmetric at --axis 0, organised on phi at --axis 1. */
  --split: calc(50% + 11.8% * var(--axis));

  --gutter: clamp(20px, 4vw, 56px);
  --bar-h: 56px;
  --chip-w: 96px;
  --chip-h: 56px;
  --measure: 62ch;

  --sans: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --didone: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  color-scheme: light;
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body,
h1, h2, h3, p, figure, dl, dd, ul, table { margin: 0; padding: 0; }
ul { list-style: none; }
img, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

body {
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- Shared utilities ----------------------------------------------------- */

.wrap {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Silkscreen legend. There are no large section headings on this site. */
.legend {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

/* Panel division: a uniform 1px rule at the Stockholm end, a thick/thin pair
   at the Paris end. Didone contrast expressed as panel divisions. */
.rule {
  position: relative;
  height: calc(var(--rule) + var(--rule-gap) + var(--rule-thin));
}
.rule::before,
.rule::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  background: var(--ink);
}
.rule::before { top: 0; height: var(--rule); }
.rule::after  { top: calc(var(--rule) + var(--rule-gap)); height: var(--rule-thin); }

/* The 1px light edge that gives a panel dimension. */
.edge-top { box-shadow: inset 0 1px 0 var(--panel-edge); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* Inside the dark window the ink outline would vanish. */
.win :focus-visible { outline-color: var(--panel-edge); }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -60px;
  z-index: 20;
  background: var(--ink);
  color: var(--panel);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
}
.skip:focus { top: 8px; }

.arrow { width: 22px; height: 8px; overflow: visible; }
.arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

/* --- Header --------------------------------------------------------------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--panel);
  border-bottom: 1px solid var(--ink);
}
.bar-in {
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* Bodoni floor: 22px. */
.wordmark {
  font-family: var(--didone);
  font-optical-sizing: auto;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.nav {
  display: flex;
  gap: clamp(14px, 2.2vw, 30px);
}
.nav a {
  text-decoration: none;
  color: var(--ink-2);
}
.nav a:hover { color: var(--ink); }

/* --- Hero panel ----------------------------------------------------------- */

.hero {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 5vh, 64px);
  padding-block: calc(2.25rem + 1.25rem * var(--axis)) calc(2rem - 0.35rem * var(--axis));
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--split)) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* Bodoni floor: min of the clamp is 2.25rem = 36px. */
.thesis {
  font-family: var(--didone);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2.25rem, calc(3.4vw * var(--ratio)), 4.25rem);
  line-height: 1.04;
  letter-spacing: var(--track-display);
  max-width: 16ch;
  text-wrap: balance;
}
.proof {
  margin-top: clamp(18px, 2.4vh, 28px);
  font-size: 17px;
  line-height: 1.5;
  max-width: 38ch;
}

/* --- The display window --------------------------------------------------- */
/* A backlit LCD in a milled 2px recess. Four static readouts whose values
   change. It never types, scrolls, blinks or logs. DM Mono lives only here. */

.win {
  justify-self: end;
  width: 100%;
  max-width: 340px;
  background: var(--ink);
  border-radius: 2px;
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .6), 0 1px 0 var(--panel-edge);
}
.win dl { display: grid; row-gap: 3px; }
.win .row {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.win dt,
.win .val {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.win dt { color: var(--panel); }          /* legend printed on the bezel */
.win .val { color: var(--brass); }        /* the lit value. 5.5:1 on --ink */
.win dd { margin: 0; min-width: 0; }
.win .work-link {
  color: var(--brass);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.win .work-link:hover { text-decoration: underline; }
.win .work-link .arrow { flex: none; }

/* --- The ribbon ----------------------------------------------------------- */
/* A native <input type="range">. Mouse, touch, keyboard and screen reader,
   one object. The brass fill to the ring is the meter. */

.ribbon-poles,
.ribbon-legends {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.ribbon-poles { margin-bottom: 10px; }
.ribbon-legends { margin-top: 10px; }
.ribbon-legends .right {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

#ribbon {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 30px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
#ribbon:focus { outline: none; }
#ribbon:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* The slot: ink, milled, with the brass meter filling to the ring. */
#ribbon::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 2px;
  background:
    linear-gradient(to right,
      var(--brass) 0 var(--blend-pct),
      var(--ink) var(--blend-pct) 100%);
  box-shadow: 0 1px 0 var(--panel-edge);
}
#ribbon::-moz-range-track {
  height: 10px;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 1px 0 var(--panel-edge);
}
#ribbon::-moz-range-progress {
  height: 10px;
  border-radius: 2px 0 0 2px;
  background: var(--brass);
}
/* The ring. Brass annulus riding the slot. */
#ribbon::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--panel);
  border: 4px solid var(--brass);
  box-shadow: 0 0 0 1px var(--ink);
}
#ribbon::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--panel);
  border: 4px solid var(--brass);
  box-shadow: 0 0 0 1px var(--ink);
}

.btn {
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 7px 11px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.btn:hover { background: var(--panel-edge); }
.btn-quiet {
  border: 0;
  padding: 2px 0;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-quiet:hover { background: transparent; color: var(--ink); }

/* --- Sections ------------------------------------------------------------- */

.section { padding-block: calc(2.5rem + 1.1rem * var(--axis)) calc(2.75rem - 0.4rem * var(--axis)); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* The work table has to break the fold on a 900px-tall laptop with two rows
   already readable — that is an acceptance criterion, not a preference. The
   hero keeps its specified 72vh; the section head hugs its rule instead. */
#work { padding-top: calc(0.75rem + 0.9rem * var(--axis)); }

.sysmsg {
  border: 1px solid var(--ink-2);
  border-radius: 2px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 15px;
  max-width: var(--measure);
}

/* --- Work index — a channel list, not a card grid ------------------------- */

.work { display: block; width: 100%; border-collapse: collapse; }
.work thead {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.work tbody { display: block; }
.work tr {
  position: relative;
  display: grid;
  grid-template-columns:
    var(--chip-w)
    minmax(0, calc(30% + 8% * var(--axis)))
    minmax(0, calc(24% - 4% * var(--axis)))
    minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(14px, 2vw, 30px);
  padding: 6px 34px 6px 0;
  min-height: 68px;
  border-top: 1px solid var(--ink);
}
.work tbody tr:last-child { border-bottom: 1px solid var(--ink); }
.work td { display: block; padding: 0; min-width: 0; }

.chip {
  width: var(--chip-w);
  height: var(--chip-h);
  /* Silkscreened straight onto the panel — no plate, no card. */
}

/* Bodoni floor: 20px. */
.row-link {
  font-family: var(--didone);
  font-optical-sizing: auto;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}
.row-link::before { content: ""; position: absolute; inset: 0; }
.row-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.work tr:focus-within { background: var(--panel-edge); }
.row-link .arrow {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink);
}

.filter { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.filter-btn {
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
  cursor: pointer;
  color: var(--ink-2);
}
.filter-btn[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.filter-status { margin-top: 8px; }
.filter-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 0;
  font-size: 17px;
}

/* --- Instruments ---------------------------------------------------------- */

.opener {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.4;
  max-width: 34ch;
}
.body-copy {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.55;
  max-width: var(--measure);
  color: var(--ink);
}
.instrument-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--split)) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-top: 28px;
}
.instrument-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 12px;
}
.spec { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 6px 16px; }
.spec dd { font-size: 15px; line-height: 1.45; }
.sample {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
}

/* --- Studio, contact ------------------------------------------------------ */

.studio-grid,
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--split)) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.previously { margin-top: 6px; font-size: 15px; font-variant-numeric: tabular-nums; }
.contact-line { font-size: 17px; max-width: 42ch; }
.contact-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.contact-actions a.btn { text-decoration: none; }

/* --- Project detail ------------------------------------------------------- */

.ribbon-strip { padding-block: clamp(22px, 4vh, 40px); }
.back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink-2);
}
.back:hover { color: var(--ink); }
.back .arrow { transform: rotate(180deg); }
/* Bodoni floor: min of the clamp is 2rem = 32px. */
.detail-title {
  font-family: var(--didone);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2rem, calc(3rem * var(--ratio) / 1.2), 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-top: 18px;
  max-width: 14ch;
}
.detail-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; }
.lede { margin-top: 22px; font-size: 17px; line-height: 1.55; max-width: var(--measure); }

.figure { margin-top: clamp(28px, 5vh, 56px); }
.figure .legend { margin-bottom: 10px; }
.figure-slot {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--panel-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  padding: clamp(14px, 2.5vw, 32px);
}
.figure-slot canvas { width: 100%; height: 100%; }
.figure figcaption { margin-top: 10px; }

/* --- Footer --------------------------------------------------------------- */

.foot { padding-block: 40px 56px; }
.foot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.cluster ul { margin-top: 12px; display: grid; gap: 8px; }
.cluster a { text-decoration: none; font-size: 15px; }
.cluster a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-readout {
  margin-top: 40px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  /* Schibsted Grotesk with tabular numerals. NOT DM Mono — mono is confined
     to the interior of the display window. */
}
.credit {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  max-width: 68ch;
}

/* --- Tablet 720–1079 ------------------------------------------------------ */

@media (max-width: 1079px) {
  :root { --chip-w: 88px; --chip-h: 55px; }

  .hero { min-height: 60vh; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .win { justify-self: stretch; max-width: none; }
  .win dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }

  /* Four columns: domain is the first thing to go. */
  .work tr {
    grid-template-columns:
      var(--chip-w)
      minmax(0, calc(46% + 8% * var(--axis)))
      minmax(0, 1fr);
  }
  /* Specificity: `.work td` is (0,1,1) and would beat a bare `.c-dom`. */
  .work td.c-dom { display: none; }

  .instrument-grid,
  .studio-grid,
  .contact-grid { grid-template-columns: minmax(0, 1fr); }

  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Mobile <720 ---------------------------------------------------------- */

@media (max-width: 719px) {
  :root { --chip-w: 64px; --chip-h: 44px; --bar-h: 52px; }

  body { font-size: 16.5px; }

  .bar-in { flex-direction: column; align-items: flex-start; gap: 6px; padding-block: 8px; }
  .nav { gap: 14px; flex-wrap: wrap; }

  .hero { min-height: 52vh; }
  .thesis { max-width: 20ch; }
  .proof { max-width: none; }

  .win { max-width: none; }
  .win dl { grid-template-columns: minmax(0, 1fr); }
  .win .row { grid-template-columns: 5.5em minmax(0, 1fr); }

  /* 44px touch target. This is the whole reason the control is a range input. */
  #ribbon { height: 44px; }
  #ribbon::-webkit-slider-runnable-track { height: 12px; }
  #ribbon::-moz-range-track,
  #ribbon::-moz-range-progress { height: 12px; }
  #ribbon::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -9px; }
  #ribbon::-moz-range-thumb { width: 22px; height: 22px; }

  .ribbon-poles { gap: 10px; }
  .ribbon-legends { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* 72px row: chip left, title over discipline right, whole row is the link. */
  .work tr {
    grid-template-columns: var(--chip-w) minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 2px;
    column-gap: 14px;
    min-height: 72px;
    padding-right: 24px;
  }
  .c-art { grid-column: 1; grid-row: 1 / 3; }
  .c-title { grid-column: 2; grid-row: 1; }
  .c-disc { grid-column: 2; grid-row: 2; }
  .work td.c-dom { display: none; }

  .spec { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .spec dd { margin-bottom: 10px; }

  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Reduced motion ------------------------------------------------------- */
/* There are no CSS transitions or keyframes anywhere in this file, so there is
   nothing here to switch off. The power-on sweep is in panel.js and it checks
   prefers-reduced-motion before it runs: under reduce, the ring is placed at
   its final value, all artwork renders at final state, and the readouts appear
   at final values. The ribbon stays fully functional — it is a control, not an
   animation. This block exists to make that intent explicit and to catch any
   future addition. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}