/* TONO website — the landing page: a product film you scroll (on top of base.css).
   Pinned scenes (hero, 3D & Space, Brightness) are driven by scroll progress; the other devices
   play with the section's pass through the viewport. Reduced motion: no pins; what the scroll would show
   one after the other stands as blocks one under the other (the end of this file). */

/* ── The first paint lays out the hero only ───────────────────────────────
   Every section but the pinned scenes starts out skipped by the browser (style, layout, paint) while it is far
   from the screen, so the first paint lays out the hero and not 26 screens. After load, home.js renders the
   sections one per idle moment and keeps them rendered (.is-rendered): by the time you scroll, the whole page is
   laid out and painted as before, so no section costs a frame when it comes near. The pinned scenes are never
   skipped (sticky stages). */
main > section:not(.scene), body > .foot { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
main > section.is-rendered, body > .foot.is-rendered { content-visibility: visible; }

/* ── Scenes: a tall section with a pinned stage ───────────────────────────── */
.scene { height: 220vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
html:not(.js) .scene { height: auto; }
html:not(.js) .stage { position: relative; height: auto; min-height: 100svh; }
@media (prefers-reduced-motion: reduce) {
  .scene { height: auto !important; }
  .stage { position: relative; height: 100vh; height: 100svh; }
  .callout-lines, .dial-labels, .scroll-cue { display: none !important; }
}
.split { position: relative; z-index: 1; height: 100%; width: min(1320px, 100% - 2 * var(--gutter)); margin: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; padding: calc(var(--nav-h) + 24px) 0 40px; }
.split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--rev .split__copy { order: 2; }
.split__copy { max-width: 560px; }
.split .h2 { font-size: clamp(40px, 4.6vw, 76px); }
[data-fit] { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; transform: translate(-50%, -50%) scale(var(--fit, .5)); flex: none; }
.slot-box { position: relative; min-height: 0; min-width: 0; height: 100%; }
/* a section that plays as it passes (no pin) */
.pass { padding: 120px 0; }
.pass .split { height: auto; min-height: 0; padding: 0; }
.pass .slot-box { height: var(--box-h, 520px); }
/* The two phases of a scene's copy share one cell, so the swap never changes the copy's height. The one not on
   screen is only faded out: a screen reader reads both, in order, wherever the scroll stands. */
[data-swap] { display: grid; }
[data-swap] > [data-phase] { grid-area: 1 / 1; transition: opacity .25s var(--ease), transform .35s var(--ease-out); }
[data-swap] > .is-off { opacity: 0; transform: translateY(10px); pointer-events: none; }
.phase__kicker { display: none; }
html:not(.js) [data-swap] { display: block; }
html:not(.js) [data-swap] > .is-off { opacity: 1; transform: none; }
html:not(.js) .phase + .phase { margin-top: 48px; }
html:not(.js) .phase__kicker { display: flex; }
.fig--scene { margin-top: 26px; }

/* ── 01 Hero ────────────────────────────────────────────────────────────── */
.hero { height: 400vh; }
.hero .stage { display: flex; flex-direction: column; background: url("../img/grain.png") 0 0 / 128px, radial-gradient(120% 90% at 50% 12%, var(--bg-hi), var(--bg) 55%, var(--bg-lo)); }
/* The copy sits at the top; the deck under it is the room that is left. The knob is sized and placed in
   that room with container units (--kr radius of the scale, --kx/--ky center), so it never prints over the
   words, whatever the window. home.js reads the result from .hero__probe for the WebGL camera and writes
   it back to the stage in px (--kx/--ky/--kr/--ks) for the lights and the canvas poster.
   The knob's footprint, in --kr: the scale's top dots 0.75 above the center, the knurl 0.8 below, ±0.97 wide. */
.hero__deck { position: relative; z-index: 4; flex: 1 1 0; min-height: 0; container-type: size; pointer-events: none; }
.hero__deck > * { pointer-events: auto; }
.hero__deck > .hero__knob { pointer-events: none; }
.hero__knob { container-type: size; }
.hero__probe { position: absolute; left: 0; top: 0; width: var(--kr); height: var(--ky); visibility: hidden; pointer-events: none; }
.hero__dim { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: #000; opacity: 0; }   /* home.js sets its opacity */
/* What the scroll moves in the pinned hero moves on its own compositor layer: a frame of the film is then a
   compositor update (opacity, transform), not a repaint of the stage behind it. Only these, and only with motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__copy, .js .dial-panel, .js .callouts li, .js .dial-label { will-change: transform, opacity; }
  .js .hero__metas, .js .readout, .js .scroll-cue, .js .hero__dim, .js .macro, .js .callout-lines { will-change: opacity; }
  /* on a phone these only fade (the panel's 30 px rise is short): a layer promised a transform is rastered on its
     own pixel grid, and their text then sat a pixel off */
  @media (max-width: 960px) { .js .dial-panel, .js .callouts li { will-change: opacity; } }
}
/* "lights down": while the demo plays the room dims and the knob stays lit */
.hero__lights { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease);
  background: radial-gradient(calc(var(--kr) * 2.1) calc(var(--kr) * 1.7) at var(--kx) var(--ky), transparent 40%, rgb(20 19 17 / .34) 100%), rgb(20 19 17 / .12); }
.is-playing .hero__lights { opacity: 1; }
.knob-stage { position: absolute; inset: 0; z-index: 1; overflow: clip; }   /* the knob's window may overhang it (with reduced motion the stage doesn't clip, and a phone would zoom out) */
/* knob.js sizes and moves the canvas: a window into the stage as large as the knob needs (it may overhang) */
.knob-canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; transition: opacity .5s var(--ease); touch-action: pan-y; }
.knob-canvas.is-live { opacity: 1; }
.knob-poster { position: absolute; left: calc(var(--kx) - var(--ks) / 2); top: calc(var(--ky) - var(--ks) / 2); width: var(--ks); height: var(--ks); max-width: none; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
html:not(.js) .knob-poster, .knob-poster.is-shown { opacity: 1; }
html:not(.js) canvas.knob-poster, html:not(.js) .readout__drag, html:not(.js) .readout input { display: none; }
.hero__copy { position: relative; z-index: 4; flex: none; padding: calc(var(--nav-h) + 3.2svh) var(--gutter) 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__copy .kicker { margin-bottom: 18px; }
.hero__copy .kicker::before { content: ""; flex: 0 0 32px; height: 1px; background: var(--rule); }
.hero__copy .kicker::after { flex-basis: 32px; }
.hero__h1 {
  --w: 790; --x: 112;
  font-size: clamp(48px, 7.6vw, 128px); line-height: .92; letter-spacing: -.04em;
  font-weight: var(--w); font-stretch: calc(var(--x) * 1%);
  font-variation-settings: "wght" var(--w), "wdth" var(--x);
  white-space: nowrap;
}
.js .hero__h1 { --w: 260; --x: 96; }
/* safety net: if the script never arrives, the headline still turns up */
.js .hero__h1:not(.is-driven) { animation: turnup .9s 2.4s both cubic-bezier(.34, 1.36, .5, 1); }
@keyframes turnup { to { font-variation-settings: "wght" 790, "wdth" 112; } }
@media (prefers-reduced-motion: reduce) { .js .hero__h1:not(.is-driven) { --w: 790; --x: 112; animation: none; } }
.hero__sub { margin-top: 22px; max-width: 38em; font-size: clamp(16px, 1.3vw, 19.5px); color: var(--ink2); line-height: 1.5; text-wrap: balance; }
.hero__ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; justify-content: center; }
.hero__meta { margin-top: 18px; font-size: 10px; letter-spacing: .12em; color: var(--ink3); text-transform: uppercase; justify-content: center; }
.hero__meta[data-when="playing"] { color: var(--ink2); }
/* the two meta lines share one cell, so pressing play never moves the knob */
.hero__metas { display: grid; justify-items: center; }
.hero__metas > .hero__meta { grid-area: 1 / 1; margin: 0; }
.hero__metas > .hero__meta[hidden] { display: flex !important; visibility: hidden; }
/* touch screens have no O key: the hero points at the desk's HEAR ORIGINAL instead */
.for-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .for-keys { display: none; } .for-touch { display: inline; } }
.playkey .glyph--stop, .is-playing .playkey .glyph--play { display: none; }
.is-playing .playkey .glyph--stop { display: block; }
.playkey.is-busy { cursor: progress; }
/* the level readout: a small glass display beside the knob */
.readout { position: relative; }
.readout .lcd__glass { padding: 12px 14px 13px; display: grid; gap: 6px; }
.readout__top { display: flex; align-items: center; gap: 7px; font-size: 9px; letter-spacing: .14em; color: var(--lcd-dim); text-transform: uppercase; }
.readout__top .led { width: 5px; height: 5px; }
.readout__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.readout__pct { font-size: 40px; }
.readout__word { font-size: 22px; color: var(--lcd); }
.readout__word.is-hot { color: var(--signal); }
.readout__hint { font-size: 12px; line-height: 1.35; color: var(--lcd-dim); min-height: 1.35em; }
.readout input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: ew-resize; }
/* The knob's keyboard control is the range input laid over the readout: with keyboard focus the readout gets
   the ring, the hint says which keys turn it, and a ring is drawn round the knob itself. */
.readout:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 10px; border-radius: 20px; }
.readout input:focus-visible { outline: none; }
.readout__drag { display: block; margin-top: 10px; font-size: 12.5px; color: var(--ink3); text-align: left; }
.readout__drag .for-kbd, .readout:has(:focus-visible) .for-drag { display: none; }
.readout:has(:focus-visible) .for-kbd { display: inline; color: var(--ink); }
.knob-focus { position: absolute; left: calc(var(--kx) - var(--kr) * 1.06); top: calc(var(--ky) - var(--kr) * .84); width: calc(var(--kr) * 2.12); height: calc(var(--kr) * 1.7); border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); opacity: 0; transition: opacity .15s var(--ease); pointer-events: none; }
.hero .stage:has(.readout :focus-visible) .knob-focus { opacity: 1; }
.knob-canvas.is-live ~ .knob-focus { display: none; }   /* the live knob prints its own ring (knob.js) */
/* Landscape and wide: the facts become a printed legend left of the knob, the readout sits right of it.
   The knob takes the room under the copy, capped so that the legend and the readout always fit beside it. */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .hero__deck > *, .hero__knob > *, .hero__knob .knob-poster {
    --pt: max(30px, 4.2svh); --pb: max(18px, 3.6svh);
    --kr: max(56px, min(31vw, 30svh, (100cqh - var(--pt) - var(--pb)) / 1.56, (50cqw - 196px - var(--gutter) - 28px) / 1.3));
    --kx: 50cqw; --ky: calc(var(--pt) + (100cqh - var(--pt) - var(--pb)) / 2); --ks: calc(var(--kr) * 2.75);
  }
  .hero__knob { position: absolute; inset: 0; }
  .hero__metas { position: absolute; right: calc(var(--kx) + var(--kr) * 1.3); top: var(--ky); transform: translateY(-50%); justify-items: end; }
  .hero__metas > .hero__meta, .hero__metas > .hero__meta[hidden] { display: flex !important; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; font-size: 10px; line-height: 2.05; letter-spacing: .13em; padding-right: 16px; border-right: 1px solid var(--rule); }
  .hero__metas .hero__meta > span::before { display: none; }   /* each fact its own line: no dots */
  .readout { position: absolute; left: calc(var(--kx) + var(--kr) * 1.3); top: calc(var(--ky) - 58px); width: 196px; }
}
/* A laptop-height window (MacBook Air, Safari): the copy closes up so the knob keeps its size. */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) and (max-height: 820px) {
  .hero__copy { padding-top: calc(var(--nav-h) + 1.2svh); }
  .hero__copy .kicker { margin-bottom: 12px; }
  .hero__sub { margin-top: 16px; }
  .hero__ctas { margin-top: 22px; }
}
/* Phones and portrait tablets: the facts under the keys, the readout centered under them, the knob below.
   On a short phone the knob keeps a minimum size and peeks up from the bottom edge. */
@media not all and (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .hero__deck { display: flex; flex-direction: column; align-items: center; }
  .hero__metas { flex: none; margin-top: 18px; padding-inline: var(--gutter); max-width: 44em; text-align: center; }
  .hero__knob { position: relative; flex: 1 1 0; min-height: 0; align-self: stretch; }
  .hero__knob > *, .hero__knob .knob-poster {
    --pt: 18px; --pb: max(14px, 3svh);
    --kr: min(36vw, 30svh, max(min(26vw, 22svh), (100cqh - var(--pt) - var(--pb)) / 1.58));
    --kx: 50cqw; --ky: calc(var(--pt) + max(var(--kr) * .76, (100cqh - var(--pt) - var(--pb)) / 2)); --ks: calc(var(--kr) * 2.75);
  }
  .readout { flex: none; margin-top: 16px; width: min(340px, calc(100% - 2 * var(--gutter))); }
  .readout .lcd__glass { grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; padding: 9px 12px; gap: 2px 14px; }
  .readout__top { grid-column: 1 / -1; }
  .readout__row { display: contents; }
  .readout__pct { font-size: 30px; grid-row: 2 / span 2; }
  .readout__word { font-size: 17px; }
  .readout__hint { font-size: 11px; }
  .readout__drag { display: none; }
}
.scroll-cue { position: absolute; z-index: 4; left: var(--gutter); bottom: 28px; font-size: 9.5px; letter-spacing: .18em; color: var(--ink3); display: flex; align-items: center; gap: 12px; text-transform: uppercase; }
.scroll-cue i { width: 1px; height: 36px; background: linear-gradient(var(--rule), var(--ink3)); }

/* the close-up: callouts on real 3D points */
.macro { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; visibility: hidden; }
.macro.is-in { visibility: visible; }
.macro__copy { position: absolute; left: max(var(--gutter), calc(50% - 640px)); top: calc(var(--nav-h) + 9svh); width: min(440px, 33vw); }
.macro__h { font-size: clamp(34px, 3.6vw, 60px); font-weight: 780; font-stretch: 108%; line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.macro__lede { margin-top: 20px; font-size: 16.5px; line-height: 1.5; color: var(--ink2); }
.callouts li { position: absolute; left: 0; top: 0; width: var(--cw, 236px); font-size: 14px; line-height: 1.42; color: var(--ink2); opacity: var(--co, 0); transform: translate(var(--x, 0), var(--y, 0)); }
.callouts li span { display: block; font-size: 9.5px; letter-spacing: .14em; color: var(--ink); margin-bottom: 6px; }
.callout-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; visibility: hidden; }
.callout-lines polyline { stroke: var(--ink); stroke-width: 1; fill: none; opacity: .55; }
.callout-lines circle { fill: var(--bg); stroke: var(--ink); stroke-width: 1.2; }
.callout-lines text { font: 600 9px var(--f-mono); fill: var(--ink); }

/* Without JavaScript the film doesn't run: the close-up and the dial stand as plain blocks under the hero's first
   screen, as with reduced motion (the end of this file), so their words are read, indexed and seen. */
html:not(.js) .hero .stage { --screen: max(100svh, var(--copy-h, 440px) + 380px); }
html:not(.js) .hero__deck { flex: none; height: calc(var(--screen) - var(--copy-h, 440px)); }
html:not(.js) .hero .knob-stage, html:not(.js) .hero__lights, html:not(.js) .hero__dim { bottom: auto; height: var(--screen); }
html:not(.js) .scroll-cue { display: none; }
html:not(.js) .macro, html:not(.js) .dial-panel { position: relative; inset: auto; width: var(--wrap); margin-inline: auto; opacity: 1; visibility: visible; transform: none; pointer-events: auto; z-index: 4; }
html:not(.js) .macro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 72px; padding: 88px 0 0; border-top: 1px solid var(--rule); }
html:not(.js) .macro__copy { position: static; width: auto; }
html:not(.js) .callouts { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; align-content: start; padding-top: 6px; }
html:not(.js) .callouts li { position: static; width: auto; opacity: 1; transform: none; font-size: 15px; }
html:not(.js) .dial-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 72px; align-items: center; padding: 96px 0 104px; }
html:not(.js) .dial-panel .kicker { grid-column: 1 / -1; margin-bottom: 0; }
html:not(.js) .dial-lcd { margin-top: 0; }
@media (max-width: 960px) {
  html:not(.js) .macro, html:not(.js) .dial-panel { grid-template-columns: minmax(0, 1fr); }
  html:not(.js) .macro { padding-top: 64px; }
  html:not(.js) .dial-panel { padding: 64px 0 80px; }
  html:not(.js) .macro__lede { max-width: 60ch; }
}
@media (max-width: 560px) {
  html:not(.js) .callouts { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  html:not(.js) .callouts li { font-size: 14px; }
}

/* the dial: module names printed round the scale + the chapter display */
.dial-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dial-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font: 650 10.5px/1 var(--f-sans); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; opacity: var(--lo, 0); transition: color .25s var(--ease); pointer-events: auto; text-decoration: none; padding: 6px; }
.dial-label.is-on { color: var(--ink); }
.dial-labels.is-off .dial-label { pointer-events: none; }   /* rendered ahead at opacity 0 (home.js): not clickable yet */
.dial-label::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--led-off); transition: background .2s, box-shadow .2s; }
.dial-label.is-on::before { background: var(--signal); box-shadow: 0 0 6px rgb(255 79 0 / .7); }
.dial-panel { position: absolute; z-index: 4; left: max(var(--gutter), calc(50% - 640px)); top: 50%; width: min(500px, 40vw); transform: translateY(-50%); opacity: 0; visibility: hidden; }
.dial-panel.is-in { visibility: visible; }
.dial-panel.is-off { pointer-events: none; }
.dial-panel__h { font-size: clamp(30px, 3.1vw, 50px); font-weight: 760; font-stretch: 106%; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.dial-panel__h span { color: var(--ink3); }
.dial-lcd { margin-top: 30px; }
.dial-lcd .lcd__glass { padding: 18px 20px 20px; min-height: 176px; }
.dial-lcd__top { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .12em; color: var(--lcd-dim); }
.dial-lcd__word { font-size: clamp(44px, 4.4vw, 66px); margin-top: 16px; color: var(--lcd); }
.dial-lcd__line { font-size: 15px; line-height: 1.4; color: var(--lcd-dim); margin-top: 10px; max-width: 26em; min-height: 2.8em; }
.dial-lcd__dots { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 5px; }
.dial-lcd__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgb(242 237 226 / .16); }
.dial-lcd__dots i.is-on { background: var(--lcd); }
.dial-lcd__dots i.is-tip { background: var(--signal); box-shadow: 0 0 6px rgb(255 79 0 / .8); }

/* ── 02 Contents: the modules, one faceplate ──────────────────────────────── */
.contents { padding: 56px 0 88px; }
.contents__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 24px; margin-bottom: 18px; }
/* The kicker takes what the link leaves; the link drops under it only when even the narrowest kicker and the
   link don't fit on one line (German on a 360-px phone), so it never sticks out of the page. */
.contents__head .kicker { margin: 0; flex: 1 1 0; }
.contents__head .printed { white-space: nowrap; }
.modlist { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); counter-reset: mod; }
.modlist li { border-bottom: 1px solid var(--rule); }
.modlist li:not(:nth-child(3n)) { border-right: 1px solid var(--rule); }
.modlist a { display: grid; grid-template-columns: auto 1fr auto; column-gap: 14px; row-gap: 6px; align-items: baseline; padding: 20px 22px 22px; text-decoration: none; height: 100%; transition: background .2s; counter-increment: mod; }
.modlist a:hover { background: rgb(128 120 108 / .07); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.modlist a::before { content: counter(mod, decimal-leading-zero); font: 500 10px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .1em; color: var(--ink3); }
.modlist b { font-size: 19px; font-weight: 700; font-stretch: 108%; letter-spacing: -.01em; }
.modlist .tag { font-size: 9px; color: var(--ink2); justify-self: end; }
.modlist span { grid-column: 2 / -1; font-size: 14.5px; color: var(--ink2); line-height: 1.45; }

/* ── 03 The app ───────────────────────────────────────────────────────────── */
.reveal { padding: 104px 0 132px; overflow: clip; }
.reveal__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.reveal__head .kicker::before { content: ""; flex: 0 0 48px; height: 1px; background: var(--rule); }
.reveal__head .lede { text-align: center; }
.reveal__fig { width: min(1240px, 100% - 2 * var(--gutter)); margin: 64px auto 0; perspective: 1800px; }
.reveal__fig picture { display: block; border-radius: 14px; overflow: hidden; transform-origin: 50% 0; transform: rotateX(calc(var(--tilt, 0) * 1deg)) scale(calc(1 - var(--tilt, 0) * .004)); box-shadow: 0 0 0 .5px rgb(40 36 28 / .28), 0 2px 4px rgb(40 36 28 / .08), 0 50px 100px -30px rgb(40 36 28 / .45); }
.reveal__fig img { width: 100%; height: auto; }
/* (the tilt stays in scenes.js: as a scroll-driven animation it put Safari's scrolling into a mode where the
   later scenes dropped 20–50 % of their frames, in over half the runs; see PERF.md) */
.reveal__fig figcaption { margin-top: 22px; text-align: center; }

/* ── The instrument parts (desk + scenes) ─────────────────────────────────── */
.presetrow { display: flex; gap: 7px; align-items: center; }
.presetrow__keys { flex: 1 1 auto; min-width: 0; display: flex; gap: 7px; }
.presetrow .key { --h: 32px; padding: 0 12px; font-size: 9.5px; gap: 8px; flex: 1 1 auto; }
.presetrow .key--step { flex: 0 0 32px; width: 32px; padding: 0; }
.presetrow .key--step svg { width: 7px; height: 8px; fill: currentColor; }
.eqlcd { height: 212px; }
.eqlcd canvas { position: absolute; left: 0; top: 52px; width: 100%; height: calc(100% - 60px); }
.eqlcd__head { position: absolute; left: 18px; right: 18px; top: 14px; display: flex; align-items: baseline; gap: 12px; z-index: 1; }
.eqlcd__word { font-size: 34px; white-space: nowrap; }
.eqlcd__tag { font-size: 9px; color: var(--lcd-dim); }
.eqlcd__meta { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 9px; letter-spacing: .1em; color: var(--lcd-dim); text-transform: uppercase; white-space: nowrap; }
.eqlcd__meta .led { width: 5px; height: 5px; margin-right: 6px; vertical-align: 1px; }
.eqlcd__lvl { font-size: 22px; color: var(--lcd); }
.eqlcd__lvl.is-hot { color: var(--signal); }
.bankwrap { display: grid; grid-template-columns: 26px minmax(0, 1fr); margin-top: 2px; }
.gutter { position: relative; font: 500 8.5px/1 var(--f-mono); font-stretch: 87.5%; color: var(--ink3); }
.gutter span { position: absolute; right: 6px; transform: translateY(-50%); top: calc(26px + 4px + (12 - var(--db)) / 24 * var(--travel)); }
.bank { --travel: 220px; display: grid; grid-template-columns: repeat(10, 1fr); position: relative; }
.bankwrap { --travel: 220px; }
.bank::before { content: ""; position: absolute; left: 2%; right: 2%; top: calc(26px + var(--travel) / 2 + 4px); border-top: 1px dotted var(--ink3); opacity: .5; }
.fader { display: grid; justify-items: center; gap: 8px; position: relative; }
.fader__val { font: 560 10.5px/1 var(--f-mono); font-stretch: 87.5%; color: var(--ink); height: 18px; display: grid; align-items: end; font-variant-numeric: tabular-nums; }
.fader__val.is-zero { color: var(--ink3); }
.fader__track { position: relative; width: 36px; height: calc(var(--travel) + 8px); }
.fader__track::before { content: ""; position: absolute; left: 1px; right: 1px; top: 4px; bottom: 4px; opacity: .5;
  background: linear-gradient(var(--ink3), var(--ink3)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(to bottom, var(--ink3) 0 1px, transparent 1px calc(var(--travel) / 8)) 0 0 / 5px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--ink3) 0 1px, transparent 1px calc(var(--travel) / 8)) 100% 0 / 5px 100% no-repeat; }
.fader__slot { position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; border-radius: 3px; background: var(--slot); box-shadow: inset 0 1.5px 2px rgb(0 0 0 / .9), 0 -1px 0 var(--recess-top), 0 1px 0 var(--recess-bottom); }
.fader__lit { position: absolute; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--signal); box-shadow: 0 0 4px rgb(255 79 0 / .6); top: calc(4px + var(--travel) / 2 - max(var(--g), 0) * var(--travel) / 24); height: calc(max(var(--g), -1 * var(--g)) * var(--travel) / 24); transition: top .3s var(--ease-out) var(--d, 0s), height .3s var(--ease-out) var(--d, 0s); }
.fader__cap { position: absolute; left: 50%; top: calc(4px + var(--travel) / 2 - var(--g) * var(--travel) / 24); width: 36px; height: 24px; margin: -12px 0 0 -18px; border-radius: 4px; transition: top .3s var(--ease-out) var(--d, 0s);
  background: linear-gradient(180deg, #4a4945, #2c2c29 48%, #1a1a18 52%, #33332f); box-shadow: inset 0 0 0 .75px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .18), 0 2px 3px rgb(0 0 0 / .45), 0 6px 10px -4px rgb(0 0 0 / .35); }
.fader__cap::after { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 1.5px; margin-top: -.75px; background: #f1eee7; opacity: .9; border-radius: 1px; }
.t-night .fader__cap, :root[data-finish="graphit"] .fader__cap { background: linear-gradient(180deg, #f3f1ec, #d6d3cb 48%, #b9b5ac 52%, #cfcbc3); box-shadow: inset 0 0 0 .75px rgb(255 255 255 / .5), 0 2px 3px rgb(0 0 0 / .55), 0 8px 12px -4px rgb(0 0 0 / .5); }
.t-night .fader__cap::after, :root[data-finish="graphit"] .fader__cap::after { background: #1a1a18; }
@media (prefers-color-scheme: dark) { :root:not([data-finish="alu"]) .fader__cap { background: linear-gradient(180deg, #f3f1ec, #d6d3cb 48%, #b9b5ac 52%, #cfcbc3); } :root:not([data-finish="alu"]) .fader__cap::after { background: #1a1a18; } }
.fader.is-drag .fader__cap, .fader.is-drag .fader__lit { transition: none; }
.fader__hz { font: 700 11px/1 var(--f-sans); font-stretch: 125%; letter-spacing: .04em; display: grid; justify-items: center; gap: 3px; }
.fader__hz small { font: 500 8px/1 var(--f-mono); color: var(--ink3); letter-spacing: .1em; }
.zones { display: grid; grid-template-columns: 4fr 3fr 3fr; gap: 16px; margin: -4px 0 0 26px; padding: 0 8px; }
.zones span { display: flex; align-items: center; gap: 10px; font: 650 8.5px/1 var(--f-sans); font-stretch: 125%; letter-spacing: .18em; color: var(--ink2); text-transform: uppercase; }
.zones span::before, .zones span::after { content: ""; flex: 1; height: 6px; border-bottom: 1px solid var(--ink3); opacity: .6; }
.zones span::before { border-left: 1px solid var(--ink3); }
.zones span::after { border-right: 1px solid var(--ink3); }
/* modes (mode tiles) */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode.key { --h: 62px; border-radius: 10px; display: grid; align-content: space-between; justify-content: stretch; align-items: stretch; padding: 10px 12px; text-align: left; letter-spacing: normal; }
.mode b { font: 740 10px/1.1 var(--f-sans); font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; white-space: normal; }
.mode small { font: 500 8.5px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .1em; display: flex; align-items: center; gap: 6px; opacity: 0; text-transform: uppercase; }
.mode.key--latched small, .mode[aria-checked="true"] small { opacity: .85; }
/* the 3D stage */
.spacelcd { height: 440px; }
.spacelcd canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.spacelcd__head { position: absolute; left: 20px; top: 16px; right: 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; z-index: 1; pointer-events: none; }
.spacelcd__head > div:first-child { min-width: 0; }
.spacelcd__word { font-size: 36px; }
.spacelcd__sub { font-size: 12px; color: var(--lcd-dim); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spacelcd__deg { font-size: 42px; color: var(--signal); text-align: right; }
.spacelcd__side { font-size: 9.5px; letter-spacing: .12em; color: var(--lcd-dim); text-align: right; margin-top: 6px; }
.spacelcd__foot > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.spacelcd__foot > span:last-child { flex: none; }
.spacelcd__foot { position: absolute; left: 20px; right: 20px; bottom: 14px; display: flex; justify-content: space-between; gap: 12px; font-size: 9.5px; letter-spacing: .1em; color: var(--lcd-dim); z-index: 1; pointer-events: none; text-transform: uppercase; }
.spacelcd__ico { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; color: var(--lcd); transform: rotate(var(--yaw, 0deg)); z-index: 1; pointer-events: none; }
.spacelcd__ico svg { width: 100%; height: 100%; }
.spacelcd__lab { position: absolute; font: 500 9.5px/1 var(--f-mono); letter-spacing: .1em; color: var(--lcd-dim); z-index: 1; pointer-events: none; }
.spacelcd.is-drag canvas { cursor: grabbing; }
.spacelcd[data-drag] canvas { cursor: grab; }
.spacelcd__handle { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; touch-action: none; cursor: grab; z-index: 2; }
/* the small graphite knob (quick controls, volume, the studio knob) */
.hwknob { --s: 64px; position: relative; width: var(--s); height: var(--s); touch-action: none; cursor: ns-resize; border-radius: 50%; }
.hwknob svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hwknob svg circle { fill: var(--ink); opacity: .22; transition: opacity .12s, fill .12s; }
.hwknob svg circle.is-lit { opacity: 1; }
.hwknob svg circle.is-tip { fill: var(--signal); opacity: 1; }
.hwknob__cap { position: absolute; left: 50%; top: 50%; width: 64%; height: 64%; transform: translate(-50%, -50%) rotate(var(--rot, -135deg)); border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 56%, rgb(255 255 255 / .06) 58%, transparent 60%, rgb(255 255 255 / .05) 72%, transparent 74%), conic-gradient(from 200deg, #3a3a38, #1c1c1b 12%, #4a4946 26%, #1e1e1d 40%, #3f3e3b 55%, #1a1a19 70%, #444340 84%, #3a3a38);
  box-shadow: 0 0 0 2.5px #121211, 0 0 0 3.5px rgb(255 255 255 / .1), 0 6px 12px -3px rgb(0 0 0 / .55), 0 2px 3px rgb(0 0 0 / .4); }
.hwknob__cap::after { content: ""; position: absolute; left: 50%; top: 6%; width: 11%; height: 32%; margin-left: -5.5%; border-radius: 99px; background: var(--signal); box-shadow: inset 0 -1px 1px rgb(0 0 0 / .3); }
.hwknob.is-off .hwknob__cap::after { background: #bebab1; }
.hwknob:focus-visible { outline-offset: 4px; }
.qk { display: grid; justify-items: center; gap: 6px; text-align: center; }
.qk .silk { color: var(--ink); font-size: 8.5px; }
.qk .mono { font-size: 9px; color: var(--ink2); min-height: 1em; }
.qk small { font-size: 11.5px; color: var(--ink2); line-height: 1.3; }
/* horizontal fader */
.hfader { position: relative; container-type: inline-size; height: 5px; border-radius: 3px; background: var(--slot); box-shadow: inset 0 1.5px 2px rgb(0 0 0 / .9), 0 -1px 0 var(--recess-top), 0 1px 0 var(--recess-bottom); }
.hfader__lit { position: absolute; left: 0; top: 1.5px; height: 2px; border-radius: 1px; background: var(--signal); box-shadow: 0 0 4px rgb(255 79 0 / .6); width: calc(var(--b) * 100%); }
.hfader__cap { position: absolute; top: 50%; left: 0; transform: translateX(calc(var(--b) * 100cqw)); width: 20px; height: 28px; margin: -14px 0 0 -10px; border-radius: 4px; background: linear-gradient(90deg, #4a4945, #2c2c29 48%, #1a1a18 52%, #33332f); box-shadow: inset 0 0 0 .75px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .18), 0 2px 4px rgb(0 0 0 / .5); }
.hfader__cap::after { content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 1.5px; margin-left: -.75px; background: #f1eee7; }
.t-night .hfader__cap { background: linear-gradient(90deg, #f3f1ec, #d6d3cb 48%, #b9b5ac 52%, #cfcbc3); }
.t-night .hfader__cap::after { background: #1a1a18; }
.hrow { display: grid; grid-template-columns: 70px minmax(0, 1fr) 44px; gap: 14px; align-items: center; }
.hrow .hfader { cursor: ew-resize; touch-action: none; }
.hrow .hfader::after { content: ""; position: absolute; inset: -14px 0; }
.hrow__ends { grid-column: 2; display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink3); margin-top: -6px; }
.hrow .mono { font-size: 10px; text-align: right; color: var(--ink); }

/* ── 04 The desk: "Hear it yourself" ──────────────────────────────────────── */
.demo { padding: 128px 0 136px; background-image: radial-gradient(90% 60% at 50% 0%, #262624, var(--bg) 70%); }
.demo__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.phones { display: flex; gap: 18px; align-items: center; max-width: 470px; padding: 18px 20px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--rule); }
.phones svg { width: 52px; height: 52px; flex: none; color: var(--ink); fill: currentColor; }
.phones p { font-size: 15px; color: var(--ink2); line-height: 1.45; }
.phones b { color: var(--ink); font-weight: 680; }
/* the room the desk will take is kept while desk.js loads (no layout shift), and given back once it stands */
.desk { margin-top: 48px; min-height: 920px; }
.desk:has(.device) { min-height: 0; }
.desk__noscript { padding: 40px; text-align: center; color: var(--ink2); }
.desk .device { padding: 24px 26px 18px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px 30px; }
.desk__top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.desk__top .spacer { flex: 1; }
.desk .playkey { --h: 50px; min-width: 138px; }
.desk .holdkey { --h: 50px; }
.desk__plate { font-size: 8.5px; letter-spacing: .12em; color: var(--ink3); display: flex; align-items: center; gap: 8px; text-transform: uppercase; }
.desk__vol { display: flex; align-items: center; gap: 12px; margin-left: 12px; }
.desk__vol .hwknob { --s: 50px; }
.desk__vol div { display: grid; gap: 4px; }
.desk__vol .silk { color: var(--ink); font-size: 8.5px; }
.desk__vol .mono { font-size: 9.5px; color: var(--ink2); }
.desk__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; align-content: start; }
.desk__main > *, .desk__side > * { min-width: 0; }
.desk__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }
.desk .fader { cursor: ns-resize; }
.desk .fader__cap { touch-action: none; }
.desk .fader__cap::before { content: ""; position: absolute; inset: -12px -6px; }
@media (hover: hover) { .desk .fader { touch-action: none; } }
.desk .fader:focus-visible { outline: none; }
.desk .fader:focus-visible .fader__cap { outline: 2px solid var(--ink); outline-offset: 3px; }
.desk .spacelcd { height: 300px; }
.desk .spacelcd__head { left: 16px; right: 16px; top: 14px; }
.desk .spacelcd__word { font-size: 24px; }
.desk .spacelcd__sub { font-size: 11.5px; margin-top: 5px; }
.desk .spacelcd__deg { font-size: 26px; }
.desk .spacelcd__foot { left: 16px; right: 16px; bottom: 12px; }
.desk .spacelcd__ico { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.paths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.paths .key { --h: 30px; padding: 0 6px; font-size: 9px; letter-spacing: .1em; gap: 6px; }
.qc { display: grid; gap: 12px; margin-top: 6px; }
.qc__hint { font-size: 12.5px; color: var(--ink2); margin-top: -4px; }
.qc__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.desk__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 8.5px; letter-spacing: .12em; color: var(--ink3); text-transform: uppercase; }
.desk__keys { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.desk__foot > [data-plate] { margin-left: auto; }
@media (hover: none) and (pointer: coarse) { .desk__keys { display: none; } }   /* no keyboard, no keycaps */
.desk__keys kbd { font: 600 9px/1 var(--f-mono); font-stretch: 87.5%; padding: 4px 6px 3px; border-radius: 4px; margin-right: 6px; color: var(--ink); background: linear-gradient(180deg, var(--key-a), var(--key-b)); box-shadow: inset 0 0 0 .75px var(--rim-lo), 0 1px 0 var(--key-base); }
.demo__fine { margin-top: 26px; }
/* the preset strip scrolls between the two step keys; chips fade out under an edge only while more
   presets wait beyond it */
.desk .presetrow__keys { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 2px 6px; margin: -2px 0 -6px;
  --la: 1; --ra: 1; -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / var(--la)), #000 36px, #000 calc(100% - 36px), rgb(0 0 0 / var(--ra))); mask-image: linear-gradient(90deg, rgb(0 0 0 / var(--la)), #000 36px, #000 calc(100% - 36px), rgb(0 0 0 / var(--ra))); }
.desk .presetrow__keys.is-l { --la: 0; }
.desk .presetrow__keys.is-r { --ra: 0; }
.desk .presetrow__keys::-webkit-scrollbar { display: none; }
.desk .presetrow__keys .key { flex: 0 0 auto; }
/* the live desk's mini visual: level word hot */
.is-orig .eqlcd .lcd__glass { opacity: .55; }

/* ── 05 Hearing profile: the real result screen beside the copy, on the desk's night ── */
.hearing { padding: 8px 0 136px; }
.hearing__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-top: 112px; border-top: 1px solid var(--rule); }
.hearing__shot { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 .5px rgb(0 0 0 / .7), 0 2px 4px rgb(0 0 0 / .3), 0 50px 90px -30px rgb(0 0 0 / .8); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.hearing__shot:hover { transform: translateY(-3px); }
.hearing__shot img { width: 100%; height: auto; }
.hearing__fig figcaption { margin-top: 20px; }
.hearing .h2 { font-size: clamp(40px, 4.6vw, 76px); }
.kicker .tag { font-size: 9px; color: var(--ink2); letter-spacing: .1em; }
.hearing__note { margin-top: 22px; max-width: 32em; }

/* ── In the app: a machined slide with the real screen; a click opens it large (home.js) ── */
.inapp { display: inline-grid; grid-template-columns: auto minmax(0, auto) auto; align-items: center; gap: 14px; margin-top: 24px; padding: 7px 16px 7px 7px; border-radius: 13px; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, var(--key-a), var(--key-b)); box-shadow: inset 0 0 0 .75px var(--rim-lo), inset 0 1px 0 var(--rim-hi), 0 1.2px .6px var(--key-base), 0 3px 8px var(--cast); transition: transform 60ms linear, box-shadow .15s; }
.inapp:active { transform: translateY(.5px); box-shadow: inset 0 0 0 .75px var(--rim-lo), inset 0 1px 2px var(--cast), 0 .5px .5px var(--key-base); }
.inapp__thumb { display: block; width: 88px; aspect-ratio: 400 / 318; border-radius: 7px; overflow: hidden; background: var(--well); box-shadow: 0 0 0 .5px rgb(0 0 0 / .4); }
.inapp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.inapp__text { display: grid; gap: 5px; }
.inapp__text b { font-size: 9px; font-weight: 560; letter-spacing: .14em; color: var(--ink3); text-transform: uppercase; }
.inapp__text span { font-size: 14px; font-weight: 620; line-height: 1.25; }
.inapp__go { width: 12px; height: 12px; color: var(--ink2); transition: transform .2s var(--ease-out); }
.inapp:hover .inapp__go { transform: translate(2px, -2px); }
.demo .inapp { margin-top: 20px; }
@media (max-height: 760px) { .scene .inapp, .js .scene .more { display: none; } }   /* a pinned scene on a short window: the copy first */
/* a printed link to the module's own page, under a scene's copy */
.more { margin-top: 22px; }
.vis .inapp { margin-top: 22px; }
.tools .inapp { margin-top: 28px; }
/* the viewer */
.shot { width: min(1240px, 94vw, calc((94vh - 64px) * 1.258)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 18px; background: var(--bezel); color: var(--lcd); overflow: hidden; box-shadow: 0 0 0 1px #000, 0 60px 120px -20px rgb(0 0 0 / .7); }
.shot::backdrop { background: rgb(14 14 13 / .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.shot img { display: block; width: 100%; height: auto; background: #111; }
.shot__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 18px; }
.shot__cap { font: 500 10px/1.4 var(--f-mono); font-stretch: 87.5%; letter-spacing: .1em; color: var(--lcd-dim); text-transform: uppercase; }
.shot__cap b { color: var(--lcd); font-weight: 600; margin-right: .8em; }
.shot form { margin: 0; }
@media (prefers-reduced-motion: no-preference) { .shot[open] { animation: shot-in .28s var(--ease-out); } }
@keyframes shot-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }

/* ── 05 3D & Space scene ─────────────────────────────────────────────────── */
.space { width: 600px; padding: 20px; }
.space .modes { grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; }
.livetag { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 7px 10px 6px; border-radius: 6px; background: var(--glass); color: var(--lcd); font: 500 9px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 -1px 0 var(--recess-top), 0 1px 0 var(--recess-bottom); }
.note { display: flex; gap: 10px; align-items: center; margin-top: 22px; font-size: 14px; color: var(--ink2); }
.note .glyph { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ── 06 App Mixer ─────────────────────────────────────────────────────────── */
.mixer { width: 600px; padding: 18px 12px 16px; }
.mixer__glass { height: 34px; margin: 0 8px 16px; --r: 9px; --pad: 3px; }
.mixer__glass .lcd__glass { display: flex; align-items: center; gap: 10px; padding: 0 12px; font: 500 9.5px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; color: var(--lcd-dim); text-transform: uppercase; }
.mixer__glass b { color: var(--lcd); font-weight: 560; }
.mixer__strips { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip { display: grid; justify-items: center; gap: 12px; padding: 0 12px; position: relative; }
.strip + .strip::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-left: 1px solid var(--edge-dark); border-right: 1px solid var(--edge-light); }
.strip__app { width: 44px; height: 44px; }
.strip__app .lcd__glass { display: grid; place-items: center; }
.strip__app svg { width: 22px; height: 22px; stroke: var(--lcd); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.strip__name { font: 700 10px/1 var(--f-sans); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; }
.strip__out { height: 22px; min-width: 96px; --r: 4px; --pad: 2px; }
.strip__out .lcd__glass { display: grid; place-items: center; font: 560 9px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; padding: 0 6px; white-space: nowrap; }
.strip__body { display: flex; gap: 10px; align-items: stretch; height: 234px; }
.strip__meter { position: relative; width: 8px; display: flex; flex-direction: column-reverse; gap: 2px; padding: 3px 1.5px; border-radius: 3px; background: var(--glass); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .8), 0 -1px 0 var(--recess-top), 0 1px 0 var(--recess-bottom); }
.strip__meter i { flex: 1; border-radius: 1px; background: rgb(242 237 226 / .08); }
.strip__meter i.is-hot { background: rgb(255 79 0 / .16); }
/* the lit segments (scenes.js): the same column, opaque, over the unlit one, clipped to the level (nothing lit until
   the script sets it). rgb(207 203 194) is rgb(242 237 226 / .85) on the meter's glass: a lit segment looks as before. */
.strip__lit { position: absolute; inset: 0; display: flex; flex-direction: column-reverse; gap: 2px; padding: 3px 1.5px; pointer-events: none; clip-path: inset(100% 0 0 0); }
.strip__lit i { background: rgb(207 203 194); }
.strip__lit i:nth-child(n+19) { background: var(--signal); }
.strip .fader__track { --travel: 218px; height: 234px; }
.strip .fader__cap { top: calc(4px + (1 - var(--v)) * var(--travel)); transition: top .45s var(--ease-out); }
.strip .fader__lit { top: calc(4px + (1 - var(--v)) * var(--travel)); height: calc(var(--v) * var(--travel)); transition: top .45s var(--ease-out), height .45s var(--ease-out), background .2s; }
.strip.is-live .fader__cap, .strip.is-live .fader__lit { transition: none; }
.strip.is-live .fader__track { cursor: ns-resize; }
.strip.is-live .fader__cap { touch-action: none; }
.strip.is-live .fader__cap::before { content: ""; position: absolute; inset: -12px -8px; }
.strip.is-muted .fader__lit { background: var(--ink3); box-shadow: none; opacity: .4; }
.strip__val { font: 560 10px/1 var(--f-mono); font-stretch: 87.5%; font-variant-numeric: tabular-nums; }
.strip .key { --h: 28px; padding: 0 10px; font-size: 9.5px; width: 100%; }
.mixer__try { margin-top: 26px; }

/* ── 07 Recording ─────────────────────────────────────────────────────────── */
.rec { width: 620px; padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.reclcd { height: 240px; }
.reclcd .lcd__glass { padding: 16px 20px; }
.reclcd__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 9.5px; letter-spacing: .12em; color: var(--lcd-dim); position: relative; z-index: 1; text-transform: uppercase; }
.reclcd__top { flex-wrap: wrap; row-gap: 6px; }
.reclcd__top > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
.reclcd__rec { display: flex; align-items: center; color: var(--lcd); }
.reclcd__rec .dotled { opacity: .18; box-shadow: none; }
.is-rec .reclcd__rec .dotled { opacity: 1; box-shadow: 0 0 6px rgb(255 79 0 / .7); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.reclcd__time { font-size: 72px; margin-top: 12px; position: relative; z-index: 1; }
.reclcd__last { position: absolute; right: 20px; top: 70px; z-index: 1; font-size: 9px; letter-spacing: .1em; color: var(--lcd-dim); opacity: .8; text-transform: uppercase; white-space: nowrap; }
.reclcd canvas { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 104px; }
.rec__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rec__row .key { --h: 34px; font-size: 9px; padding: 0 12px; }
.rec__row .spacer { flex: 1; }
.rec__meta { font-size: 9.5px; letter-spacing: .1em; color: var(--ink3); justify-content: space-between; text-transform: uppercase; }
.reckey { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; background: linear-gradient(180deg, var(--key-a), var(--key-b)); box-shadow: inset 0 0 0 .75px var(--rim-lo), inset 0 1px 0 var(--rim-hi), 0 1.2px .6px var(--key-base), 0 4px 10px var(--cast); }
.reckey:active { transform: translateY(.5px); }
.reckey i { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff9a66, var(--signal) 50%, #c93a00); box-shadow: inset 0 -1px 1px rgb(0 0 0 / .3); }
.reckey[aria-pressed="true"] i { box-shadow: 0 0 12px rgb(255 79 0 / .6), inset 0 -1px 1px rgb(0 0 0 / .3); border-radius: 5px; width: 18px; height: 18px; }
.rec__save { margin-top: 22px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--ink2); }

/* ── 08 Mic Studio ────────────────────────────────────────────────────────── */
.mic { width: 620px; padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 150px; grid-template-areas: "lcd lcd" "voices knob" "nf knob" "route route"; gap: 16px 22px; }
.miclcd { grid-area: lcd; height: 208px; }
.mic__voices { grid-area: voices; } .mic__nf { grid-area: nf; }
.mic__voices .silklabel, .mic__nf .silklabel { margin-bottom: 12px; }
.miclcd canvas { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 132px; }
.miclcd__head { position: absolute; left: 20px; top: 16px; right: 20px; display: flex; justify-content: space-between; gap: 16px; z-index: 1; }
.miclcd__word { font-size: 32px; }
.miclcd__sub { font-size: 12px; color: var(--lcd-dim); margin-top: 6px; }
.miclcd__head > div:first-child { min-width: 0; }
.miclcd__meta { flex: none; white-space: nowrap; font-size: 9.5px; letter-spacing: .1em; color: var(--lcd-dim); text-align: right; line-height: 1.8; text-transform: uppercase; }
.miclcd__meta b { color: var(--lcd); font-weight: 560; }
.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; align-content: start; }
.voices .key { --h: 32px; font-size: 9.5px; padding: 0 8px; }
.mic__knob { grid-area: knob; display: grid; justify-items: center; gap: 8px; align-content: start; }
.mic__knob .hwknob { --s: 124px; }
.mic__knob .silk { color: var(--ink); }
.mic__knob .mono { font-size: 9px; color: var(--ink2); }
.mic__route { grid-area: route; display: flex; flex-wrap: wrap; row-gap: 6px; align-items: center; gap: 10px; font-size: 9.5px; letter-spacing: .1em; color: var(--ink3); text-transform: uppercase; }
.mic__route .lcd { height: 24px; --r: 5px; --pad: 2px; }
.mic__route .lcd__glass { display: grid; place-items: center; padding: 0 8px; font: 560 9px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; color: var(--lcd); }

/* ── 09 Visualizer ────────────────────────────────────────────────────────── */
.vis { height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; }
.vis-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vis__copy { position: absolute; z-index: 1; left: max(var(--gutter), calc(50% - 640px)); bottom: 9svh; max-width: 540px; }
.t-glass .kicker::after { background: rgb(242 237 226 / .15); }
.vis__looks { position: absolute; z-index: 1; right: max(var(--gutter), calc(50% - 640px)); bottom: 9svh; display: flex; gap: 6px; }
.vis__looks .key { --h: 32px; font-size: 9px; padding: 0 12px; }
.vis__readout { position: absolute; z-index: 1; right: max(var(--gutter), calc(50% - 640px)); top: calc(var(--nav-h) + 28px); font-size: 9.5px; letter-spacing: .14em; color: var(--lcd-dim); display: flex; align-items: center; gap: 8px; text-transform: uppercase; }

/* ── 10 Brightness ────────────────────────────────────────────────────────── */
#display { --bg: #efece6; --bg-hi: #f7f5f1; --bg-lo: #e3e0d9; color-scheme: light; --ink: #1a1a18; --ink2: #57534b; --ink3: #645f57; --rule: rgb(26 26 24 / .14); }
#display .stage { background: radial-gradient(110% 80% at 50% 30%, var(--bg-hi), var(--bg) 60%, var(--bg-lo)); }
.bright__dim { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 1; pointer-events: none; }   /* scenes.js sets its opacity */
/* warmth: a plain orange veil (normal blend, cheap to composite) */
.bright__warm { position: absolute; inset: 0; background: #ff8a2a; opacity: 0; z-index: 2; pointer-events: none; }
/* the page dims and warms on the compositor: two solid layers whose opacity follows the scroll, nothing repaints
   (more layers here – the fader's cap and zone, or each line – were tried and made scrolling worse: PERF.md) */
@media (prefers-reduced-motion: no-preference) { .js .bright__dim, .js .bright__warm { will-change: opacity; } }
.bright { position: relative; z-index: 3; height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; padding: var(--nav-h) var(--gutter) 40px; color: var(--ink); }
.bright .kicker::before { content: ""; flex: 0 0 48px; height: 1px; background: var(--rule); }
.bright > * { color: var(--ink); }
.bright > .lede { color: var(--ink2); }
.bright > .kicker, .bright > .bright__state { color: var(--ink3); }
.bright__num { display: flex; align-items: flex-start; gap: 6px; margin-top: 18px; font-size: clamp(120px, 20vw, 290px); line-height: .8; }
.bright__num span { min-width: 3.3ch; text-align: right; letter-spacing: -.01em; }
.bright__num small { font-size: 18px; margin-top: .6em; color: var(--ink3); }
.bright__h { font-size: clamp(36px, 4.4vw, 70px); }
.bright__fader { width: min(640px, 86vw); margin-top: 36px; position: relative; height: 54px; }
.bright__fader .hfader { position: absolute; left: 0; right: 0; top: 18px; }
.bright__lede { margin-inline: auto; text-align: center; margin-top: 22px; }
.bright__state { margin-top: 18px; font-size: 10px; letter-spacing: .14em; color: var(--ink3); text-transform: uppercase; }
.hfader__min { position: absolute; top: 4px; bottom: 6px; left: 15%; width: 1px; background: var(--ink3); }
.hfader__min span { position: absolute; top: -17px; left: 8px; font: 500 9px/1 var(--f-mono); letter-spacing: .1em; color: var(--ink3); white-space: nowrap; }
.hfader__zone { position: absolute; left: 0; width: 15%; top: -8px; height: 21px; background: repeating-linear-gradient(-45deg, var(--ink3) 0 1px, transparent 1px 5px); border-radius: 3px; opacity: var(--zone, 0); }
.hfader__ticks { position: absolute; left: 0; right: 0; top: 30px; height: 5px; background: repeating-linear-gradient(90deg, var(--ink3) 0 1px, transparent 1px 10%) 0 0 / calc(100% + 1px) 100%; opacity: .5; }

/* ── 11 Windows ───────────────────────────────────────────────────────────── */
.win { width: 620px; padding: 16px; }
.winscreen { height: 372px; --r: 14px; }
.winscreen .lcd__glass { background: radial-gradient(130% 90% at 30% 0%, #3a3631, #1d1c1a 70%); }
.winscreen__bar { position: absolute; left: 0; right: 0; top: 0; height: 20px; background: rgb(255 255 255 / .07); display: flex; align-items: center; gap: 14px; padding: 0 12px; font: 500 9px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .04em; color: var(--lcd-dim); z-index: 2; }
.wnd { position: absolute; border-radius: 7px; background: #efece6; box-shadow: 0 0 0 .5px rgb(0 0 0 / .5), 0 10px 26px -6px rgb(0 0 0 / .6); transition: left .42s var(--ease-out), top .42s var(--ease-out), width .42s var(--ease-out), height .42s var(--ease-out), box-shadow .2s; overflow: hidden; }
.wnd__bar { position: absolute; left: 0; right: 0; top: 0; height: 20px; border-bottom: 1px solid rgb(26 26 24 / .08); background: linear-gradient(#f7f5f1, #ebe8e2); display: flex; align-items: center; gap: 4px; padding-left: 8px; }
.wnd__bar i { width: 6px; height: 6px; border-radius: 50%; background: #c8c3b9; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .15); }
.wnd__bar span { margin-left: 8px; font: 600 9px/1 var(--f-sans); font-stretch: 110%; color: #57534b; letter-spacing: .02em; }
/* (the stripes are one 13 px tile repeated, not a repeating-linear-gradient: WebKit paints those slowly, and these
   repaint on every frame of a window's move) */
.wnd__body { position: absolute; left: 10px; right: 10px; top: 30px; bottom: 10px; background: linear-gradient(180deg, rgb(26 26 24 / .1) 0 5px, transparent 5px) 0 0 / 70% 13px repeat-y; }
.wnd--dark { background: #2c2c29; }
.wnd--dark .wnd__bar { background: linear-gradient(#383835, #30302d); border-color: rgb(0 0 0 / .3); }
.wnd--dark .wnd__bar i { background: #55534e; }
.wnd--dark .wnd__bar span { color: #aba79e; }
.wnd--dark .wnd__body { background-image: linear-gradient(180deg, rgb(236 233 226 / .1) 0 5px, transparent 5px); }
.wnd.is-active { box-shadow: 0 0 0 1.5px var(--lcd), 0 12px 30px -6px rgb(0 0 0 / .7); }
.zone-ghost { position: absolute; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgb(242 237 226 / .7); background: radial-gradient(circle, rgb(242 237 226 / .22) .8px, transparent 1.2px) 0 0 / 6px 6px; opacity: 0; transition: opacity .2s, left .3s, top .3s, width .3s, height .3s; z-index: 1; }
.winkeys { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.cap { min-width: 38px; height: 34px; padding: 0 9px; border-radius: 7px; display: grid; place-items: center; font: 600 13px/1 var(--f-sans); color: var(--ink); background: linear-gradient(180deg, var(--key-a), var(--key-b)); box-shadow: inset 0 0 0 .75px var(--rim-lo), inset 0 1px 0 var(--rim-hi), 0 1.2px .6px var(--key-base), 0 3px 8px var(--cast); transition: transform 60ms, box-shadow 60ms, background 90ms, color 90ms; }
.cap .kg { margin: 0; width: .66em; height: 1.02em; vertical-align: -.2em; --kw: 96; }
.cap.is-down { transform: translateY(1px); color: var(--on-control); background: linear-gradient(180deg, var(--control-hi), var(--control) 30%, var(--control-lo)); box-shadow: inset 0 1px 2px rgb(0 0 0 / .4), 0 .5px .5px var(--key-base); }
.winlabel { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; font-size: 9px; letter-spacing: .14em; color: var(--ink3); min-height: 1em; text-transform: uppercase; }

/* ── 12 Tools: one faceplate, glass set flush, grooves between ─────────────── */
.tools { padding: 140px 0 128px; }
.faceplate { position: relative; margin-top: 60px; border-radius: 26px; padding: 8px; background: linear-gradient(180deg, var(--plate-a), var(--plate-b) 45%, var(--plate-c)); box-shadow: 0 1px 0 var(--rim-hi) inset, 0 0 0 1px var(--edge-dark) inset, 0 -1px 0 var(--edge-light); }
.faceplate::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: url("../img/grain.png") 0 0 / 128px; opacity: calc(var(--grain) * .9); }
.plates { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.plate { position: relative; padding: 16px 16px 26px; }
.plate::after { content: ""; position: absolute; right: -1px; top: 16px; bottom: 16px; width: 2px; border-left: 1px solid var(--edge-dark); border-right: 1px solid var(--edge-light); }
.plate:nth-child(4n)::after { display: none; }
.plate:nth-child(-n+4)::before { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; border-top: 1px solid var(--edge-dark); border-bottom: 1px solid var(--edge-light); }
.plate .lcd { height: 100px; }
.plate .lcd__glass { display: grid; align-content: center; justify-items: start; gap: 8px; padding: 0 16px; }
.plate__word { font-size: 36px; color: var(--lcd); white-space: nowrap; }
.plate__word small { font-size: .5em; color: var(--lcd-dim); margin-left: 2px; }
.plate__word--rule { font-size: 23px; }
.plate__word i { font-style: normal; color: var(--lcd-dim); }
.plate__meta { font-size: 9px; letter-spacing: .1em; color: var(--lcd-dim); display: flex; align-items: center; text-transform: uppercase; }
.plate__meta .dotled { width: 5px; height: 5px; margin-right: 6px; }
.plate h3 { margin: 18px 4px 6px; font: 740 11.5px/1.2 var(--f-sans); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.plate h3 .tag { font-size: 9px; color: var(--ink3); }
.plate p { margin: 0 4px; font-size: 14.5px; line-height: 1.45; color: var(--ink2); }
.js .plates .plate .lcd { opacity: 0; transition: opacity .4s var(--ease); }
.js .plates .plate.is-in .lcd { opacity: 1; transition-delay: calc(var(--n, 0) * 70ms); }

/* ── 13 Creators: the lamp, the display and the patch sheet ────────────────── */
.creators { padding: 140px 0; overflow: hidden; }
.creators__head { max-width: 760px; }
.onair { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; margin-top: 64px; align-items: start; }
.onair__deck { border-radius: 24px; padding: 22px; display: grid; gap: 16px; }
.lamp { position: relative; display: block; width: 100%; height: 150px; border: 0; padding: 0; cursor: pointer; border-radius: 16px; background: linear-gradient(180deg, #2a1a12, #140c08); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .8), inset 0 2px 8px rgb(0 0 0 / .8), 0 -1px 0 var(--recess-top), 0 1px 0 var(--recess-bottom); overflow: hidden; transition: background .08s linear, box-shadow .2s; }
.lamp span { font: 800 54px/1 var(--f-sans); font-stretch: 125%; letter-spacing: .08em; color: rgb(255 120 60 / .2); transition: color .08s linear, text-shadow .08s linear; }
.lamp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(168deg, rgb(255 255 255 / .1), transparent 45%); }
.lamp[aria-pressed="true"] { background: radial-gradient(120% 120% at 50% 40%, #ff7a2e, var(--signal) 45%, #c93800); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .5), inset 0 2px 12px rgb(120 30 0 / .6), 0 -1px 0 var(--recess-top), 0 1px 0 var(--recess-bottom); }
.lamp[aria-pressed="true"] span { color: #fff6ec; }
.lamp:focus-visible { outline-offset: 4px; }
.onair__disp .lcd__glass { padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; align-items: center; }
.onair__state { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: .14em; color: var(--lcd-dim); text-transform: uppercase; }
.onair__state .led { width: 5px; height: 5px; }
.onair__time { font-size: 56px; }
.onair__list { display: grid; gap: 7px; font-size: 9px; letter-spacing: .1em; color: var(--lcd-dim); text-transform: uppercase; }
.onair__list li { display: flex; align-items: center; gap: 8px; }
.onair__list li span { margin-left: auto; opacity: .7; }
.onair__list .led { width: 5px; height: 5px; box-shadow: none; background: rgb(242 237 226 / .14); }
.onair__list li.is-on { color: var(--lcd); }
.onair__list li.is-on .led { background: radial-gradient(circle at 40% 35%, #ffd2b0, var(--signal) 45%, #d63f00); box-shadow: 0 0 6px rgb(255 79 0 / .6); }
.patch { border-radius: 24px; padding: 18px 18px 16px; }
.patch svg { width: 100%; height: auto; color: var(--ink3); }
.patch__cols text { font: 500 10px var(--f-mono); letter-spacing: .14em; fill: var(--ink3); text-transform: uppercase; }
.patch__boxes rect { fill: var(--well); stroke: var(--rule); }
.patch__boxes text { font: 560 12.5px var(--f-sans); fill: var(--ink); }
.patch__boxes .sm { font: 500 9.5px var(--f-mono); letter-spacing: .12em; fill: var(--lcd-dim); text-transform: uppercase; }
.patch__tono rect { fill: var(--glass); stroke: #000; }
.patch__tono text { fill: var(--lcd); }
.patch__cables path { stroke: var(--ink3); stroke-width: 1.3; opacity: .6; transition: stroke .3s, opacity .3s; }
.is-live .patch__cables path { stroke: var(--signal); opacity: .75; }
.patch__jack { fill: var(--glass); stroke: var(--ink3); stroke-width: 1.2; }
.patch__pulses circle { fill: var(--signal); opacity: 0; transition: opacity .3s; }
.is-live .patch__pulses circle { opacity: 1; }
/* with JS the pulses are compositor-driven dots over the sheet (scenes.js); the SMIL circles step aside */
.patch svg.has-dots .patch__pulses { display: none; }
.patch > .patch__dots { position: absolute; pointer-events: none; opacity: 0; transition: opacity .3s; }
.is-live .patch > .patch__dots { opacity: 1; }
.patch__plane { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.patch__plane i { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--signal); }
.patch figcaption, .onair__deck .fig { margin-top: 10px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; margin-top: 64px; border-top: 1px solid var(--rule); counter-reset: st; }
.steps li { display: grid; grid-template-columns: 34px 1fr; padding: 22px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.5; color: var(--ink2); }
.steps li::before { counter-increment: st; content: counter(st, decimal-leading-zero); font: 500 10px/2.2 var(--f-mono); letter-spacing: .08em; color: var(--ink3); }
.steps b { color: var(--ink); font-weight: 650; }
.steps code { font: 500 12.5px var(--f-mono); color: var(--ink); }

/* ── 14 How it works: one faceplate, recessed wells, a lit signal path ─────── */
.flow { position: relative; margin-top: 64px; border-radius: 26px; padding: 26px; display: grid; grid-template-columns: 1fr 48px 1fr 48px 1.25fr 48px 1fr; align-items: stretch; background: linear-gradient(180deg, var(--plate-a), var(--plate-b) 45%, var(--plate-c)); box-shadow: 0 1px 0 var(--rim-hi) inset, 0 0 0 1px var(--edge-dark) inset; }
.flow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: url("../img/grain.png") 0 0 / 128px; opacity: calc(var(--grain) * .9); }
.flow > * { position: relative; }
.flow__node { position: relative; border-radius: 14px; padding: 18px 18px 20px; min-height: 124px; display: grid; align-content: space-between; gap: 14px; background: var(--well); box-shadow: inset 0 1.5px 3px var(--cast), inset 0 -1px 0 var(--edge-light), 0 -1px 0 var(--edge-dark); }
.flow__node.lcd { background: var(--bezel); box-shadow: 0 -1px 0 var(--recess-top), 0 1.5px 0 var(--recess-bottom), inset 0 1px 2px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(0 0 0 / .6); }
.flow__node span { font-size: 9px; letter-spacing: .14em; color: var(--ink3); text-transform: uppercase; }
.flow__node b { font-size: 15px; font-weight: 640; line-height: 1.3; }
.flow__node small { font-size: 12.5px; color: var(--ink2); line-height: 1.4; }
/* the one glass in the path: set into its bezel with the same inset on every side, filling it */
.flow__node--tono { --r: 14px; --pad: 5px; padding: var(--pad); align-content: stretch; }
.flow__node--tono .lcd__glass { height: auto; padding: 14px 14px 16px; display: grid; align-content: space-between; gap: 14px; }
.flow__node--tono span { color: var(--lcd-dim); }
.flow__node--tono small { color: var(--lcd-dim); }
.flow__wire { position: relative; align-self: center; height: 6px; margin: 0 6px; border-radius: 3px; background: var(--slot); box-shadow: inset 0 1.5px 2px rgb(0 0 0 / .9), 0 -1px 0 var(--recess-top), 0 1px 0 var(--recess-bottom); overflow: hidden; }
.flow__wire i { position: absolute; top: 2px; left: -8px; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--signal) 0 3px, transparent 3px 8px); box-shadow: 0 0 4px rgb(255 79 0 / .5); animation: flow .9s linear infinite; animation-play-state: paused; }
.flow.is-in .flow__wire i { animation-play-state: running; }
@keyframes flow { from { transform: translateX(-8px); } to { transform: translateX(0); } }
.flow__cap { grid-column: 1 / -1; margin-top: 18px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--rule); }
.facts h3 { font: 740 12px/1.2 var(--f-sans); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.facts p { color: var(--ink2); font-size: 15.5px; line-height: 1.55; }
.trust { margin-top: 40px; display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink2); }

/* ── The last third: one rhythm. How it works, Privacy, Specs, Pricing and FAQ share one padding; the
   materials alternate (Alu, night glass, the machined plate, Alu, night) instead of hairlines between them,
   and where two of one material meet (the plate, then the prices) the gap is one padding, not two. ── */
.how, .privacy, .specs, .pricing, .faq { padding: 120px 0; }
.specs + .pricing { padding-top: 0; }

/* ── 15 Privacy: five lit rows on one glass, on night ───────────────────────── */
.privacy__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.privacy .h2 { font-size: clamp(36px, 3.9vw, 56px); }
.privacy .lede { font-size: clamp(16.5px, 1.25vw, 19px); }
.privacy__panel { --r: 22px; --pad: 7px; }
.privacy__panel .lcd__glass { padding: 20px 28px 8px; }
.privacy__head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; font-size: 9.5px; letter-spacing: .14em; color: var(--lcd-dim); text-transform: uppercase; }
/* each row starts with a row of dots, like the display's own rules */
.privacy__list li { display: grid; grid-template-columns: 22px 38px minmax(0, 1fr); align-items: start; padding: 19px 0 20px; color: var(--lcd); font-size: 17px; line-height: 1.45;
  background: radial-gradient(circle, rgb(242 237 226 / .26) .9px, transparent 1.3px) 0 0 / 5px 3px repeat-x; }
.privacy__list .led { margin-top: .55em; }
.privacy__list li > span { font-size: 10px; line-height: 1; padding-top: .62em; letter-spacing: .1em; color: var(--lcd-dim); }
.privacy__list small { display: block; color: var(--lcd-dim); font-size: 14.5px; line-height: 1.5; margin-top: 4px; }

/* ── 16 Specs: the sheet engraved on one machined model plate ───────────────── */
.specplate { --sp-a: #eeebe5; --sp-b: #d5d1c8; --sp-ink: #1a1a18; --sp-ink2: #4f4b44; --sp-groove: rgb(0 0 0 / .17); --sp-lip: rgb(255 255 255 / .6); --sp-brush: rgb(255 255 255 / .16);
  --sp-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(0 0 0 / .14), 0 0 0 1px rgb(0 0 0 / .16), 0 2px 2px rgb(74 69 60 / .14), 0 50px 90px -40px rgb(74 69 60 / .55);
  position: relative; border-radius: 16px; padding: 44px 52px 30px; color: var(--sp-ink);
  /* the brushing is one 3 px tile repeated: as a repeating-linear-gradient WebKit took 0.3 s per row of tiles */
  background: linear-gradient(90deg, var(--sp-brush) 0 1px, rgb(0 0 0 / .025) 1px 2px, transparent 2px) 0 0 / 3px 100%, linear-gradient(180deg, var(--sp-a), var(--sp-b));
  box-shadow: var(--sp-shadow); }
:root[data-finish="graphit"] .specplate { --sp-a: #3c3c38; --sp-b: #2a2a27; --sp-ink: #ece9e2; --sp-ink2: #b3afa6; --sp-groove: rgb(0 0 0 / .55); --sp-lip: rgb(255 255 255 / .07); --sp-brush: rgb(255 255 255 / .035);
  --sp-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(0 0 0 / .5), 0 0 0 1px rgb(0 0 0 / .6), 0 50px 90px -40px rgb(0 0 0 / .9); }
@media (prefers-color-scheme: dark) {
  :root:not([data-finish="alu"]) .specplate { --sp-a: #3c3c38; --sp-b: #2a2a27; --sp-ink: #ece9e2; --sp-ink2: #b3afa6; --sp-groove: rgb(0 0 0 / .55); --sp-lip: rgb(255 255 255 / .07); --sp-brush: rgb(255 255 255 / .035);
    --sp-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(0 0 0 / .5), 0 0 0 1px rgb(0 0 0 / .6), 0 50px 90px -40px rgb(0 0 0 / .9); }
}
.specplate__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 28px; padding-bottom: 30px; }
.specplate__mark { width: 68px; height: 68px; color: var(--sp-ink); }
.specplate__h { font: 820 clamp(28px, 3.3vw, 50px)/1 var(--f-sans); font-stretch: 125%; letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 1px 0 var(--sp-lip); }
.specplate__meta { display: grid; gap: 7px; justify-items: end; text-align: right; font-size: 9.5px; letter-spacing: .14em; color: var(--sp-ink2); text-transform: uppercase; white-space: nowrap; }
.screw { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b7b1a6 55%, #8a8478); box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .35), 0 1px 0 var(--sp-lip); }
.screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1px; margin-top: -.5px; background: rgb(0 0 0 / .45); transform: rotate(var(--r, 30deg)); }
.screw:nth-child(1) { left: 16px; top: 16px; } .screw:nth-child(2) { right: 16px; top: 16px; --r: 110deg; } .screw:nth-child(3) { left: 16px; bottom: 16px; --r: 70deg; } .screw:nth-child(4) { right: 16px; bottom: 16px; --r: 160deg; }
/* engraved rules: a dark cut with a light lip under it */
.sheet { border-top: 1px solid var(--sp-groove); box-shadow: inset 0 1px 0 var(--sp-lip); }
.sheet > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 16px 0 17px; border-bottom: 1px solid var(--sp-groove); box-shadow: 0 1px 0 var(--sp-lip); }
.sheet > div:last-child { border-bottom: 0; box-shadow: none; }
.sheet dt { font: 700 11px/1.5 var(--f-sans); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; padding-top: 2px; color: var(--sp-ink); }
.sheet dd { font-size: 15.5px; line-height: 1.55; color: var(--sp-ink2); }

/* ── 17 Pricing ───────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; margin-top: 60px; align-items: stretch; }
.plan { border-radius: 22px; padding: 28px 30px 30px; display: flex; flex-direction: column; }
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 38px; }
.plan__top .segment { min-width: 0; max-width: 100%; grid-auto-columns: minmax(0, 1fr); }   /* narrower than its words only on a narrow phone */
.plan__name { font: 780 26px/1 var(--f-sans); font-stretch: 112%; letter-spacing: -.01em; display: flex; align-items: center; gap: 12px; }
.plan__name .tag { font-size: 9px; color: var(--ink2); }
.plan__price { margin-top: 22px; height: 118px; }
.plan__price .lcd__glass { padding: 16px 20px 14px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "amount side" "per side"; align-content: space-between; column-gap: 18px; }
.plan__price .plan__amount { grid-area: amount; }
.plan__price .plan__per { grid-area: per; }
/* the saving: two fixed lines (the percentage, the monthly price), never wrapped */
.plan__side { grid-area: side; align-self: end; justify-self: end; text-align: right; font-size: 9px; line-height: 1.7; letter-spacing: .1em; color: var(--lcd-dim); text-transform: uppercase; }   /* wraps only where one line doesn't fit (German, phones) */
.plan__side > span { display: block; }
.plan__side > span + span { color: var(--lcd); }
.plan__amount { font-family: var(--f-sans); font-stretch: 62%; font-weight: 780; font-variant-numeric: tabular-nums; font-size: 76px; line-height: .8; color: var(--lcd); display: flex; align-items: flex-start; }
.plan__currency { font-size: .52em; margin-right: .06em; margin-top: .06em; color: var(--lcd-dim); }
.plan__per { font: 500 9px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; color: var(--lcd-dim); text-transform: uppercase; }
.plan__fine { margin-top: 14px; color: var(--ink2); font-size: 14.5px; line-height: 1.5; }
.plan__list { margin-top: 16px; display: grid; gap: 9px; align-content: start; }
.plan__list li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 15px; line-height: 1.35; }
.plan__list svg { width: 16px; height: 16px; margin-top: 1px; color: var(--ink); }
.plan__list small { display: block; color: var(--ink2); font-size: 13px; margin-top: 2px; }
.plan--pro .plan__list { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.plan__cta { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; justify-items: start; }
.plan__trial { padding: 14px 16px; font-size: 14px; line-height: 1.5; color: var(--ink2); margin-bottom: 8px; }
.plan__trial b { color: var(--ink); }
.plan--pro { color: #ece9e2; --ink: #ece9e2; --ink2: #aba79e; --ink3: #9c988f; --rule: rgb(236 233 226 / .12); --signal-ink: #ff7a3d; --well: #1f1f1d; --key-a: #3b3b37; --key-b: #30302d; --rim-hi: rgb(255 255 255 / .16); --rim-lo: rgb(0 0 0 / .5); --key-base: rgb(0 0 0 / .7); --cast: rgb(0 0 0 / .4); --control: #d6d3cb; --control-hi: #f3f1ec; --control-lo: #a9a59c; --on-control: #1a1a18; --edge-light: rgb(255 255 255 / .09); --edge-dark: rgb(0 0 0 / .55); --plate-a: #3b3b38; --plate-b: #2f2f2c; --plate-c: #282826; --grain: .7; }
.plan--pro.device { box-shadow: 0 1px 0 rgb(255 255 255 / .1) inset, 0 0 0 1px rgb(0 0 0 / .55) inset, 0 50px 90px -30px rgb(40 36 28 / .6), 0 12px 24px -12px rgb(40 36 28 / .4); }
.plan--pro :focus-visible { outline-color: #ece9e2; }
/* the Pro glass carries a lit hairline along its top edge: the one object on the page that is "on" */
.plan--pro .plan__price::before { content: ""; position: absolute; z-index: 2; left: 22px; right: 22px; top: 0; height: 1px; border-radius: 1px; background: linear-gradient(90deg, rgb(255 79 0 / 0), var(--signal) 18%, var(--signal) 82%, rgb(255 79 0 / 0)); box-shadow: 0 0 6px rgb(255 79 0 / .55); pointer-events: none; }
/* Graphit: both cards would be the same dark slab, so Pro becomes a lighter anodized panel with a bright edge */
:root[data-finish="graphit"] .plan--pro { --plate-a: #4d4c48; --plate-b: #403f3b; --plate-c: #373632; --key-a: #4f4e4a; --key-b: #43423e; --well: #2c2c29; --ink3: #b1ada4; --edge-light: rgb(255 255 255 / .12); --grain: .55; }
:root[data-finish="graphit"] .plan--pro.device { box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(255 255 255 / .06), 0 0 0 1px rgb(0 0 0 / .6), 0 50px 90px -30px rgb(0 0 0 / .85), 0 14px 28px -12px rgb(0 0 0 / .6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-finish="alu"]) .plan--pro { --plate-a: #4d4c48; --plate-b: #403f3b; --plate-c: #373632; --key-a: #4f4e4a; --key-b: #43423e; --well: #2c2c29; --ink3: #b1ada4; --edge-light: rgb(255 255 255 / .12); --grain: .55; }
  :root:not([data-finish="alu"]) .plan--pro.device { box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(255 255 255 / .06), 0 0 0 1px rgb(0 0 0 / .6), 0 50px 90px -30px rgb(0 0 0 / .85), 0 14px 28px -12px rgb(0 0 0 / .6); }
}
.pricing__fine { margin-top: 24px; }
.compare { margin-top: 36px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.compare summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 16px; padding: 20px 0; font-size: 18px; font-weight: 640; }
.compare summary::-webkit-details-marker { display: none; }
.compare summary span { font-size: 14.5px; font-weight: 440; color: var(--ink2); }
.compare summary::after { content: ""; margin-left: auto; flex: none; width: 13px; height: 13px; align-self: center; background: linear-gradient(currentColor, currentColor) 50% 50% / 13px 1.3px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 1.3px 13px no-repeat; transition: transform .2s var(--ease); opacity: .7; }
.compare[open] summary::after { transform: rotate(45deg); }
.compare table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.compare th, .compare td { text-align: left; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 15px; vertical-align: top; }
.compare thead th { font: 500 9.5px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; color: var(--ink3); text-transform: uppercase; border-top: 0; }
.compare th small { display: block; font-size: 13px; color: var(--ink2); font-weight: 440; margin-top: 2px; }
.compare tbody th { font-weight: 600; }
.compare td { width: 88px; }
.compare td svg { width: 16px; height: 16px; }
.compare td.no { color: var(--ink3); }

/* ── 18 FAQ ───────────────────────────────────────────────────────────────── */
.faq__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.faq__grid > div:first-child { position: sticky; top: calc(var(--nav-h) + 40px); }
.qa details { border-bottom: 1px solid var(--rule); counter-increment: q; }
.qa { counter-reset: q; }
.qa details:first-child { border-top: 1px solid var(--rule); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 38px 1fr 14px; gap: 12px; align-items: center; padding: 22px 0; font-size: 18px; font-weight: 600; letter-spacing: -.005em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: counter(q, decimal-leading-zero); font: 500 10px/1 var(--f-mono); letter-spacing: .08em; color: var(--ink3); }
.qa summary::after { content: ""; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) 50% 50% / 13px 1.3px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 1.3px 13px no-repeat; transition: transform .2s var(--ease); opacity: .7; }
.qa details[open] summary::after { transform: rotate(45deg); }
.answer { padding: 0 48px 24px 50px; color: var(--ink2); font-size: 16px; line-height: 1.6; display: grid; gap: 12px; }
.answer b { color: var(--ink); font-weight: 620; }
.answer ul { display: grid; gap: 6px; }
.answer li { position: relative; padding-left: 18px; }
.answer li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink3); }

/* ── 19 Final: the knob inside the maker's stamp ───────────────────────────── */
.final { padding: 150px 0 140px; text-align: center; background-image: radial-gradient(80% 70% at 50% 24%, #262624, var(--bg) 70%); overflow: hidden; }
.final__in { display: flex; flex-direction: column; align-items: center; }
.stamp { position: relative; width: min(520px, 88vw); aspect-ratio: 1; margin: -60px 0 -20px; }
.stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stamp__ring { transform-origin: 50% 50%; }   /* turns with the scroll: a scroll-driven animation, or scenes.js */
@media (prefers-reduced-motion: no-preference) {
  .js .stamp__ring { will-change: transform; }
  @supports (animation-timeline: view()) {
    .final { overflow: clip; }   /* clips like hidden, but is no scroll container: the stamp's timeline is the page's */
    .stamp { view-timeline: --stamp block; view-timeline-inset: 0; }
    .stamp__ring { animation: stamp-turn linear both; animation-timeline: --stamp; }
  }
}
@keyframes stamp-turn { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
.stamp__ring text { font: 600 13px var(--f-mono); letter-spacing: .32em; fill: var(--ink3); text-transform: uppercase; }
.stamp__rings circle { fill: none; stroke: var(--rule); }
.stamp picture { position: absolute; inset: 14%; }
.stamp img { width: 100%; height: 100%; }
.final__h { font-size: clamp(52px, 8vw, 132px); font-weight: 800; font-stretch: 112%; letter-spacing: -.045em; line-height: .92; }
.final .lede { margin-inline: auto; }
.final .hero__ctas { margin-top: 32px; }

/* ── The "now playing" badge in the nav ───────────────────────────────────── */
/* A fixed-size glass laid over the empty stretch of the nav right of the logo: it never moves a link,
   whatever the preset is called. On phones it takes the wordmark's place and shows the mode + spectrum. */
.nav__in { position: relative; }
.np { position: absolute; left: 128px; top: 50%; transform: translateY(-50%); width: 240px; display: flex; align-items: center; height: 32px; border-radius: 8px; padding: 3px; gap: 3px; background: var(--bezel); box-shadow: 0 -1px 0 var(--recess-top), 0 1px 0 var(--recess-bottom), inset 0 0 0 1px #000; color: var(--lcd); }
.np[hidden] { display: none; }
.np__go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 10px; border-radius: 5px; background: var(--glass); text-decoration: none; font: 560 9px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--lcd); }
.np__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.np__mode { display: none; }
@media (max-width: 1080px) and (min-width: 961px) { .np { width: 196px; } .np canvas { display: none; } }
@media (max-width: 960px) {
  .np { left: 34px; width: auto; }
  .np .led, .np__label { display: none; }
  .np__mode { display: inline; }
  .is-playing .lockup__word { visibility: hidden; }
}
.np__go .led { width: 5px; height: 5px; }
.np canvas { width: 34px; height: 14px; }
.np__stop { width: 26px; height: 100%; border: 0; border-radius: 5px; background: var(--glass); cursor: pointer; display: grid; place-items: center; color: var(--lcd); }
.np__stop svg { width: 8px; height: 8px; fill: currentColor; }
.np :focus-visible { outline-color: var(--lcd); outline-offset: 1px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .split { grid-template-columns: 1fr 1.25fr; }
  .split--rev { grid-template-columns: 1.25fr 1fr; }
  .plates { grid-template-columns: repeat(2, 1fr); }
  .plate:nth-child(4n)::after { display: block; }
  .plate:nth-child(2n)::after { display: none; }
  .plate:nth-child(-n+4)::before { display: none; }
  .plate:nth-child(-n+6)::before { content: ""; display: block; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; border-top: 1px solid var(--edge-dark); border-bottom: 1px solid var(--edge-light); }
  .desk { min-height: 1390px; }
  .desk .device { grid-template-columns: minmax(0, 1fr); }
  .desk__side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .desk__side > .silklabel, .desk__side > .modes { grid-column: 1 / -1; }
  .desk__side .spacelcd { grid-row: span 3; }
  .onair { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: 1fr 40px 1fr 40px 1.2fr 40px 1fr; padding: 22px; }
}
@media (max-width: 960px) {
  .split, .split--rev { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 18px; padding-top: calc(var(--nav-h) + 16px); padding-bottom: 20px; }
  .split--rev .split__copy { order: 0; }
  .split .h2 { font-size: clamp(34px, 9.4vw, 52px); }
  .split .lede { margin-top: 14px; font-size: 15.5px; }
  .scene .spec, .scene .note { display: none; }
  .split .kicker { margin-bottom: 14px; }
  .pass { padding: 88px 0; }
  .pass .split { grid-template-rows: auto auto; }
  .pass .slot-box { height: var(--box-h-m, 420px); }
  .privacy__grid, .faq__grid { grid-template-columns: 1fr; gap: 44px; }
  .flow { grid-template-columns: 1fr; padding: 18px; }
  .flow__wire { width: 6px; height: 30px; margin: 6px 0 6px 34px; }
  .flow__wire i { left: 2px; top: -8px; bottom: 0; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--signal) 0 3px, transparent 3px 8px); animation-name: flowv; }
  @keyframes flowv { from { transform: translateY(-8px); } to { transform: translateY(0); } }
  .facts { grid-template-columns: 1fr; gap: 28px; }
  .plans { grid-template-columns: minmax(0, 1fr); }   /* the cards never wider than the page, whatever the language */
  .modlist { grid-template-columns: 1fr 1fr; }
  .modlist li:not(:nth-child(3n)) { border-right: 0; }
  .modlist li:nth-child(odd) { border-right: 1px solid var(--rule); }
  .sheet > div { grid-template-columns: 1fr; gap: 4px; }
  .specplate { padding: 36px 28px 22px; }
  .specplate__head { grid-template-columns: auto minmax(0, 1fr); }
  .specplate__meta { grid-column: 1 / -1; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; gap: 18px; }
  .dial-panel { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: 3svh; transform: none; }
  .dial-panel .kicker { margin-bottom: 10px; }
  .dial-panel__h { font-size: clamp(22px, 6.4vw, 30px); margin-bottom: 14px; }
  .dial-lcd { margin-top: 0; }
  .dial-lcd .lcd__glass { min-height: 0; padding: 14px 16px 30px; }
  .dial-lcd__dots { bottom: 14px; right: 16px; }
  .dial-lcd__word { font-size: 40px; margin-top: 10px; }
  .dial-lcd__line { font-size: 14px; min-height: 2.8em; }   /* two lines reserved: the panel never jumps */
  .dial-label { font-size: 9px; letter-spacing: .12em; padding: 3px; }
  .dial-label::before { width: 4px; height: 4px; margin-right: 5px; }
  .macro__copy { width: auto; right: var(--gutter); top: calc(var(--nav-h) + 3svh); }
  .macro__h { font-size: clamp(30px, 8.6vw, 44px); }
  .macro__lede { font-size: 15px; margin-top: 12px; max-width: 60ch; }
  .callouts li { font-size: 13.5px; }
  .scroll-cue { display: none; }
  /* the visualizer as a column: the look keys, the readout on its own row, room for the ring, then the copy */
  .vis { height: auto; min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--nav-h) + 20px) var(--gutter) 64px; }
  .vis__looks, .vis__readout, .vis__copy { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
  .vis__looks { order: 1; }
  .vis__readout { order: 2; margin: 14px 0 0; max-width: 100%; }
  .vis__readout > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vis__copy { order: 3; margin-top: auto; padding-top: max(360px, 44svh); max-width: 560px; }
  .desk .fader__track { width: 28px; }
  .desk .fader__cap { width: 28px; margin-left: -14px; }
  .desk .fader__val { font-size: 9px; }
  .desk .fader__hz { font-size: 9px; }
  .desk .eqlcd { height: 176px; }
  .desk .bankwrap { --travel: 176px; }
  .desk .bank { --travel: 176px; }
  .desk__top .desk__plate { flex-basis: 100%; order: 3; }
  .desk__side { grid-template-columns: minmax(0, 1fr); }
  .desk__side .spacelcd { grid-row: auto; }
  .eqlcd__meta [data-meta] { display: none; }
  .onair__time { font-size: 44px; }
  .hearing__grid { grid-template-columns: minmax(0, 1fr); padding-top: 88px; }
  .hearing__copy { order: -1; }
  .kicker:has(.tag)::after { display: none; }
  .scene .inapp, .js .scene .more { display: none; }
}
@media (max-width: 560px) {
  .hero__h1 { font-size: clamp(40px, 12.2vw, 60px); }
  .hero__h1 span { display: block; }
  .hero__sub { font-size: 15.5px; margin-top: 16px; }
  .hero__ctas { margin-top: 20px; }
  .hero__ctas .key--lg { --h: 46px; padding: 0 18px; font-size: 10.5px; }
  .hero__metas .hero__meta { font-size: 9px; line-height: 1.8; }
  .hero__metas { margin-top: 14px; }
  .hero__copy .kicker { font-size: 9.5px; }
  .readout { margin-top: 14px; width: min(300px, calc(100% - 2 * var(--gutter))); }
  .plates { grid-template-columns: 1fr; }
  .plate::after { display: none !important; }
  .plate:not(:last-child)::before { content: ""; display: block !important; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; border-top: 1px solid var(--edge-dark); border-bottom: 1px solid var(--edge-light); }
  .modlist { grid-template-columns: 1fr; }
  .modlist li:nth-child(odd) { border-right: 0; }
  .plan { padding: 24px 20px; }
  .plan--pro .plan__list { grid-template-columns: 1fr; }
  .plan__amount { font-size: 64px; }
  .plan__side { letter-spacing: .06em; }
  .segment > * { padding: 0 11px; }
  .demo { padding: 96px 0; }
  .hearing { padding-bottom: 88px; }
  .desk .device { padding: 14px 12px; gap: 16px; }
  .desk__top .key--lg { --h: 44px; padding: 0 14px; font-size: 10px; min-width: 0; gap: 8px; }
  .desk__vol { margin-left: auto; }
  .desk .eqlcd__word { font-size: 24px; }
  .desk .bankwrap { grid-template-columns: 21px minmax(0, 1fr); }
  .desk .gutter span { right: 3px; font-size: 8px; }
  .zones { margin-left: 21px; padding: 0; gap: 6px; }
  .zones span { font-size: 8.5px; letter-spacing: .1em; gap: 5px; }
  .qc__row { gap: 2px; }
  .qc .hwknob { --s: 48px; }
  .qc small { display: none; }
  .paths { grid-template-columns: repeat(2, 1fr); }
  .paths .key { font-size: 9px; padding: 0 6px; }
  .lamp span { font-size: 40px; }
  .steps { grid-template-columns: 1fr; }
  .qa summary { font-size: 16.5px; grid-template-columns: 30px 1fr 14px; }
  .answer { padding: 0 0 22px 42px; }
  .how, .privacy, .specs, .pricing, .faq { padding: 88px 0; }
  .privacy__panel .lcd__glass { padding: 16px 18px 4px; }
  .privacy__list li { grid-template-columns: 18px 30px minmax(0, 1fr); font-size: 16px; }
  .specplate { padding: 30px 18px 16px; border-radius: 12px; }
  .specplate__head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark meta" "h h"; gap: 22px 16px; }
  .specplate__mark { grid-area: mark; width: 48px; height: 48px; }
  .specplate__h { grid-area: h; font-size: clamp(19px, 6vw, 26px); white-space: nowrap; }
  .specplate__meta { grid-area: meta; grid-column: auto; grid-auto-flow: row; gap: 5px; justify-items: end; text-align: right; }
  .screw:nth-child(1), .screw:nth-child(3) { left: 9px; } .screw:nth-child(2), .screw:nth-child(4) { right: 9px; }
  .screw:nth-child(1), .screw:nth-child(2) { top: 9px; } .screw:nth-child(3), .screw:nth-child(4) { bottom: 9px; }
  /* the dial on a phone: every module a lit dot, only the current one spelled out */
  .callouts { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 3svh; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .callouts li { position: static; width: auto; transform: none; font-size: 12.5px; }
  .callouts li span { font-size: 9px; margin-bottom: 3px; }
  .dial-label { font-size: 0; letter-spacing: 0; padding: 4px; }
  .dial-label.is-on { font-size: 9px; letter-spacing: .12em; }
  .desk { min-height: 1435px; }
  .tools, .creators { padding: 96px 0; }
  .reveal { padding: 72px 0 88px; }
  .faq__grid > div:first-child { position: static; }
  .onair__deck, .patch { padding: 14px; }
  .onair__disp .lcd__glass { grid-template-columns: 1fr; }
  .final { padding: 110px 0; }
}

/* ── Phones: the scene instruments are rebuilt at full size, not shrunk ─────────────────────────────
   Each device takes the column's full width (the fit factor stays 1), shows fewer parts and prints
   nothing smaller than 8 px (information 9 px). The boxes are as tall as the devices, so nothing moves
   when a device is built. */
@media (max-width: 560px) {
  .pass .slot-box { height: var(--box-h-p, 420px); }
  .pass [data-fit] { width: 100%; }
  /* 3D & Space: the two modes that matter, the stage fills the rest of the screen */
  [data-fit].space { width: 100%; height: calc(100% - 8px); display: flex; flex-direction: column; padding: 12px; border-radius: 20px; }
  .space .modes { grid-template-columns: repeat(2, 1fr); margin-bottom: 10px; flex: none; }
  .space .modes > :first-child, .space .modes > :last-child { display: none; }
  .space .mode.key { --h: 50px; padding: 8px 12px; }
  .space .spacelcd { flex: 1 1 auto; height: auto; min-height: 0; }
  .spacelcd__head { left: 16px; right: 16px; top: 14px; }
  .spacelcd__word { font-size: 26px; }
  .spacelcd__sub { font-size: 11.5px; }
  .spacelcd__deg { font-size: 30px; }
  .spacelcd__foot { left: 16px; right: 16px; bottom: 12px; font-size: 9px; letter-spacing: .06em; }
  .spacelcd__ico { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  /* App Mixer: four narrow strips, short output names */
  .mixer { padding: 14px 4px 14px; border-radius: 20px; }
  .mixer__glass { margin: 0 8px 14px; }
  .strip { padding: 0 5px; gap: 10px; }
  .strip__name { font-size: 10px; letter-spacing: .06em; }
  .strip__out { min-width: 0; width: 100%; }
  .strip__body { height: 196px; gap: 8px; }
  .strip .fader__track { --travel: 180px; height: 196px; width: 30px; }
  .strip .fader__cap { width: 30px; margin-left: -15px; }
  .strip .key { padding: 0 4px; }
  /* Recording: REC, the source it records, a marker; the glass with the timecode */
  .rec { padding: 16px; gap: 12px; border-radius: 20px; }
  .rec__row:first-child > .key:nth-of-type(2), .rec__row:first-child > .key:nth-of-type(3) { display: none; }
  .reclcd { height: 226px; }
  .reclcd .lcd__glass { padding: 14px 16px; }
  .reclcd__top { flex-wrap: wrap; row-gap: 6px; }
  .reclcd__time { font-size: 58px; margin-top: 10px; }
  .reclcd__last { top: auto; right: 16px; bottom: 76px; }
  .reclcd canvas { height: 96px; }
  .rec__row.rec__meta { gap: 6px 10px; letter-spacing: .04em; }
  /* Mic Studio: three voices, the noise filter beside a smaller STUDIO knob */
  .mic { padding: 16px; grid-template-columns: minmax(0, 1fr) 84px; grid-template-areas: "lcd lcd" "voices voices" "nf knob" "route route"; gap: 14px 12px; border-radius: 20px; }
  .miclcd { height: 176px; }
  .miclcd canvas { height: 100px; }
  .miclcd__head { left: 16px; right: 16px; top: 14px; gap: 10px; }
  .miclcd__word { font-size: 24px; }
  .miclcd__sub { font-size: 11.5px; }
  .mic__voices .key:nth-child(3), .mic__voices .key:nth-child(5), .mic__voices .key:nth-child(6) { display: none; }
  .mic .voices .key { padding: 0 6px; letter-spacing: .08em; }
  .mic .voices .key .led { display: none; }
  .mic__nf { align-self: center; }
  .mic__knob { gap: 6px; }
  .mic__knob .hwknob { --s: 72px !important; }
  /* Windows: a smaller screen, the same keycaps */
  .win { padding: 12px; border-radius: 20px; }
  .winscreen { height: 222px; }
  .winkeys { gap: 5px; margin-top: 12px; }
  .cap { min-width: 31px; height: 32px; padding: 0 7px; font-size: 12.5px; }
}

.eq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.eq > * { min-width: 0; }
.switches > .js-only { display: flex; align-items: center; gap: 10px; }

/* small phones: the CTAs stay side by side, the knob peeks up from the bottom edge */
@media (max-width: 560px) {
  .desk .eqlcd__meta > span:nth-child(2) { display: none; }
  .desk .eqlcd__lvl { font-size: 18px; }
}
@media (max-width: 340px) {
  .plan__top .segment > * { padding: 0 4px; letter-spacing: .06em; }   /* „Monatlich · Jährlich · Für immer“ at 320 px */
}
@media (max-width: 400px) {
  .hero__sub { font-size: 14.5px; }
  .hero__ctas { gap: 8px; flex-wrap: nowrap; }
  .hero__ctas .key--lg { padding: 0 13px; font-size: 9.5px; letter-spacing: .1em; gap: 8px; }
}
@media (max-width: 560px) and (max-height: 780px) {
  .readout__hint { display: none; }
}

/* ── Reduced motion: the film as a page ─────────────────────────────────────────────────────────────────
   The hero keeps its first screen (the copy and the knob, which still turns by hand); the close-up and the
   dial follow as plain blocks. 3D & Space shows its second phase, head tracking, as a block of its own with
   a second instrument (scenes.js). */
@media (prefers-reduced-motion: reduce) {
  .hero .stage { height: auto; overflow: visible; --screen: max(100svh, var(--copy-h, 440px) + 380px); }
  .hero__deck { flex: none; height: calc(var(--screen) - var(--copy-h, 440px)); }
  .knob-stage, .hero__lights, .hero__dim { bottom: auto; height: var(--screen); }
  .macro, .dial-panel { position: relative; inset: auto; width: var(--wrap); margin-inline: auto; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto; z-index: 4; }
  .macro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 72px; padding: 88px 0 0; border-top: 1px solid var(--rule); }
  .macro__copy { position: static; width: auto; }
  .callouts { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; align-content: start; padding-top: 6px; }
  .callouts li { position: static; width: auto; opacity: 1 !important; transform: none !important; font-size: 15px; }
  .dial-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 72px; align-items: center; padding: 96px 0 104px; }
  .dial-panel .kicker { grid-column: 1 / -1; margin-bottom: 0; }
  .dial-lcd { margin-top: 0; }
  .dial-panel.is-off { pointer-events: auto; }
  #space .stage { height: auto; }
  #space .split { height: auto; padding: 112px 0 56px; }
  #space .split--second { padding: 56px 0 112px; }
  #space .slot-box { height: 560px; }
  .phase__kicker { display: flex; }
  [data-swap] > [data-phase] { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 960px) {
  .macro, .dial-panel { grid-template-columns: minmax(0, 1fr); }
  .macro { padding-top: 64px; }
  .dial-panel { padding: 64px 0 80px; }
  .macro__lede { max-width: 60ch; }
  #space .split { padding: 88px 0 40px; }
  #space .split--second { padding: 40px 0 88px; }
  #space .slot-box { height: 520px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 560px) {
  .callouts { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .callouts li { font-size: 14px; }
  #space .slot-box { height: 460px; }
}