/* Macdials. The page is a monitor test card, and the hero is a desk with three
   screens on it, each screen carrying its OWN dials on a control plate directly
   under it. See Site/DESIGN.md.

   ⚠ ROUND 4, THE PALETTE RULE: the page is ink, paper and grey, and the ONLY
   color anywhere is inside a screen, in the SMPTE test card. Nothing on the
   plastic and nothing on a control is colored. A state is carried by weight, by
   a dashed line, or by a word: never by a hue. */

:root{
  /* the plastic */
  --bezel:#d7d7d3;
  --bezel-hi:#e4e4e0;
  --bezel-lo:#c6c6c2;
  --ink:#15161a;
  --ink-2:#55575e;
  --ink-3:#585a61;
  --hair:rgba(21,22,26,.17);
  --hair-soft:rgba(21,22,26,.09);
  /* the outline of a control (a ghost button, a field): 3:1 against the
     plastic, which a hairline is not */
  --edge:#6f7176;
  --press:rgba(21,22,26,.06);     /* a ghost control under the pointer */
  --grid:rgba(21,22,26,.035);     /* the pixel grid on the page ground */
  --mark-track:#b9b9b4;           /* the mark's unlit rings, on the plastic */

  /* the screen */
  --screen:#0a0c0b;
  --screen-hair:rgba(255,255,255,.09);
  --signal:#f1f2ef;
  --signal-2:#9aa09a;

  /* what is live, on a screen or on a plate. Light, never green. */
  --live:#eef1ec;
  --live-dim:#8e948e;
  --live-ghost:rgba(238,241,236,.20);
  --live-glow:rgba(238,241,236,.30);

  /* a panel that will not answer: dimmer and dashed, never amber */
  --dead:#767c76;
  --dead-2:#5d635d;

  /* the monitor casings */
  --case-hi:#33363c;
  --case:#22242a;
  --case-lo:#1b1d21;

  /* The 75% SMPTE bars, recorded here because they are the page's only color.
     The cards themselves draw them inline in index.html; nothing in this file
     references them, which is the point. */
  /* The six colors (1A4, Derick's pick on 2026-09-29): halfway between the 1977
     logo's six and macOS's system colors, so Apple without matching either. Hard
     stops, never a gradient. The mark's bands, the wordmark's hairline, the test
     bars, and one per slider. Everything else stays ink. */
  --six-green:#44C443; --six-yellow:#FEC213; --six-orange:#FA8B10;
  --six-red:#EF3A37; --six-purple:#A247BA; --six-blue:#008BEE;
  --six-bar:linear-gradient(90deg,
    var(--six-green) 0 16.667%, var(--six-yellow) 16.667% 33.333%,
    var(--six-orange) 33.333% 50%, var(--six-red) 50% 66.667%,
    var(--six-purple) 66.667% 83.333%, var(--six-blue) 83.333% 100%);

  /* ⚠ The five accent hooks. In the shipped page every one of them resolves to
     ink or grey, which is what makes the page monochrome. Site/artifacts/
     accents.html overrides exactly these five to show option 4B, where each
     borrows one bar of the test card. Nothing else in this file names a hue. */
  --accent:var(--ink);            /* filled actions */
  --accent-ink:var(--bezel-hi);   /* text on a filled action */
  --accent-kick:var(--ink-2);     /* kickers and mono labels */
  --accent-num:var(--ink-3);      /* section numerals */
  --accent-wash:rgba(21,22,26,.07); /* the key row of the sheet */
  --accent-hover:#000;            /* a filled action under the pointer */
  --accent-dot:var(--live);       /* the running dot: a power LED */

  --display:'Barlow Condensed',ui-sans-serif,system-ui,sans-serif;
  --body:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:64ch;

  --ease-settle:cubic-bezier(.22,1,.36,1);
  --ease-detent:cubic-bezier(.7,0,.2,1);

  --gutter:clamp(18px,4vw,40px);
  --shell:1180px;

  /* a knob is small now, because it lives beside the screen it drives */
  color-scheme:light dark;
}

/* The dark room (Derick, 2026-10-12: every studio site has a light and a dark
   look and follows the Mac). The plastic darkens like a monitor in a dark room,
   the ink inverts, and the screens do not change: nothing from --screen down is
   redefined here. The numbers are the app's own dark palette (Deck.swift):
   bezel, sheet, well, ink, muted, hairline at .18 and card border at .42. */
@media (prefers-color-scheme:dark){
  :root{
    --bezel:#232427;
    --bezel-hi:#2c2e31;
    --bezel-lo:#1b1c1f;
    --ink:#e9e9e5;
    --ink-2:#a2a4a1;
    --ink-3:#a2a4a1;
    --hair:rgba(233,233,229,.18);
    --hair-soft:rgba(233,233,229,.09);
    --edge:#838482;
    --press:rgba(233,233,229,.08);
    --grid:rgba(233,233,229,.025);
    --mark-track:#4a4d52;
    --accent-wash:rgba(233,233,229,.07);
    --accent-hover:#fff;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bezel);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15px,.32vw + 14px,16.5px);
  line-height:1.6;
  overflow-x:hidden;
  font-synthesis-weight:none;
}

/* The pixel grid. A display is a grid, so the page ground is one. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 4px);
}
body > *{position:relative;z-index:1}

::selection{background:var(--ink);color:var(--bezel)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bezel-lo)}
::-webkit-scrollbar-thumb{background:var(--ink-2);border:3px solid var(--bezel-lo)}
::-webkit-scrollbar-thumb:hover{background:var(--ink)}

/* Reading progress, drawn as the page's own step wedge filling in left to right.
   A progress bar made of the motif rather than bolted on. */
.progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,
    #000 0%,#1a1a1a 9%,#333 18%,#4d4d4d 27%,#666 36%,#808080 45%,
    #999 55%,#b3b3b3 64%,#ccc 73%,#e6e6e6 82%,#fff 91%,#fff 100%);
  clip-path:inset(0 calc(100% - var(--p,0%)) 0 0);
}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.bench :focus-visible{outline-color:var(--live)}

a{color:inherit}

.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gutter)}

/* ---------- mono labels, the page's connective tissue ---------- */
.lbl{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(10px,.2vw + 9.4px,11.5px);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-2);
}
.num{font-variant-numeric:tabular-nums}

/* ---------- masthead ---------- */
.masthead{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bezel) 88%,transparent);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid var(--hair);
}
.masthead .shell{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:58px;
}
/* ⚠ 2A1. One weight, one color, one face across the whole name. That is
   Apple's condition for using "Mac" in a product name, not a style choice.
   Never style the Mac half differently. */
.brand{
  font-family:ui-rounded,'Archivo',system-ui,sans-serif;
  font-weight:700;font-size:1.18rem;letter-spacing:-.015em;
  color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem;
}
.brand svg{width:25px;height:19px;display:block;flex:none}
/* The mark's unlit rings are drawn for the light plastic; in the dark room they dim
   with it, so the lit bands still read as the reading. The six colors never change. */
.brand svg path[stroke="#b9b9b4"]{stroke:var(--mark-track)}
/* 1C3: the letters stay ink, and one six-color hairline sits under them. Every letter
   gets the same treatment, which is Apple's condition for "Mac" in a product name. */
.brand .word{display:inline-flex;flex-direction:column;line-height:1.05}
.brand .word::after{content:"";display:block;height:3px;margin-top:3px;background:var(--six-bar)}
.mast-right{display:flex;align-items:center;gap:clamp(14px,2vw,30px);min-width:0}
.mast-read{
  display:flex;gap:10px;margin:0;font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.1em;color:var(--ink-3);white-space:nowrap;
  background:none;border:0;padding:4px 6px;cursor:pointer;border-radius:3px;
  transition:background .2s var(--ease-settle);
}
.mast-read:hover{background:var(--press)}
.mast-read b{font-weight:500;color:var(--ink)}
.mast-read .who{color:var(--ink);letter-spacing:.06em}
@media (max-width:1100px){.mast-read .who{display:none}}
.masthead nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)}
.masthead nav a{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;position:relative;padding-block:4px;
  white-space:nowrap;
}
.masthead nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-settle);
}
.masthead nav a:hover{color:var(--ink)}
.masthead nav a:hover::after{transform:scaleX(1);transform-origin:left}
/* the one filled thing in the masthead: the list is the action right now */
.masthead nav a.mast-act{
  background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);
  padding:7px 12px 6px;letter-spacing:.11em;
  transition:background .22s var(--ease-settle);
}
.masthead nav a.mast-act::after{display:none}
.masthead nav a.mast-act:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
@media (max-width:999px){.masthead nav a[data-secondary]{display:none}}
@media (max-width:860px){.mast-read{display:none}}
@media (max-width:620px){.masthead nav a[data-tertiary]{display:none}}
@media (max-width:420px){
  .masthead nav{gap:12px}
  .masthead nav a{font-size:10.5px;letter-spacing:.08em}
  .masthead nav a.mast-act{padding:6px 9px 5px}
}

/* ---------- the hero: words above, desk full width ---------- */
.hero{padding-block:clamp(14px,2vw,24px) clamp(34px,4.6vw,60px)}
.hero-head{margin-bottom:clamp(14px,1.9vw,26px)}
/* The words sit above the desk, and above 1000px they sit in two columns, so the
   instrument itself starts within the first screen instead of a page down: the headline
   alone on the left, with room to breathe, and the lede with the two buttons under it on
   the right (Derick, 2026-10-01). */
.hero-head .lede{margin-top:clamp(14px,1.7vw,22px)}
.hero-head .acts{margin-top:clamp(16px,2vw,24px)}
@media (min-width:1000px){
  .hero-head{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(28px,3.6vw,58px);align-items:start;
  }
  .hero-head > *{min-width:0}
  .hero-head h1{grid-column:1;grid-row:1 / 3}
  .hero-head .lede{grid-column:2;grid-row:1;margin-top:.35em}
  .hero-head .acts{grid-column:2;grid-row:2}
}
/* Narrow two-column widths: the two buttons stay on one line instead of stacking. */
@media (min-width:1000px) and (max-width:1180px){
  .hero-head .acts{gap:8px}
  .hero-head .act{letter-spacing:.08em;padding-inline:10px}
}

.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:6px .7em;margin:0 0 clamp(12px,1.4vw,18px)}
.kicker .rule{display:inline-block;width:38px;height:1.5px;background:var(--accent-kick);flex:none}
.kicker .lbl{color:var(--accent-kick)}
.kicker .lbl + .lbl{padding-left:.7em;border-left:1px solid var(--hair)}

h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(33px,4.4vw,60px);
  line-height:.93;letter-spacing:-.018em;
  margin:0;text-wrap:balance;
}
h1 .s2{display:block}
h1 em{font-style:normal;position:relative;white-space:nowrap}
h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.1em;height:.085em;
  background:var(--ink);opacity:.22;
}
.lede{
  font-size:clamp(15.5px,.44vw + 14.6px,18px);line-height:1.54;
  color:var(--ink-2);margin:0;max-width:62ch;text-wrap:pretty;
}
.lede b{color:var(--ink);font-weight:600}

/* Chosen line breaks (wrapcheck): .nw keeps a phrase whole, .blk puts a sentence on a line of its own. */
.nw{white-space:nowrap}
.blk{display:block}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin:0}
/* On a phone the two actions stack, so they share one width (layout-alignment: controls in
   one column share one width); side by side they keep their own. */
@media (max-width:520px){.hero-head .acts{flex-direction:column;align-items:stretch}.hero-head .acts .act{width:100%;text-align:center;box-sizing:border-box}}
.act{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;
  background:var(--accent);color:var(--accent-ink);
  padding:12px 18px 11px;border:1px solid var(--accent);cursor:pointer;
  transition:background .22s var(--ease-settle),color .22s var(--ease-settle);
}
.act:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.act.ghost{background:none;color:var(--ink);border-color:var(--edge)}
.act.ghost:hover{background:var(--press);border-color:var(--ink)}

/* ---------- the instrument chassis ---------- */
.bench{
  position:relative;
  /* A solid ground under every gradient, so the chassis is dark even if the
     gradient never paints, and so a contrast probe reads the real ground. */
  background:#0e100e linear-gradient(168deg,#191c19 0%,#0e100e 46%,#0a0c0b 100%);
  border-radius:clamp(10px,1.1vw,16px);
  padding:clamp(11px,1.5vw,22px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -2px 10px rgba(0,0,0,.55) inset,
    0 26px 64px rgba(0,0,0,.30),
    0 3px 10px rgba(0,0,0,.18);
}
/* registration marks cut into the plastic around the chassis */
.bench::before,.bench::after{
  content:"";position:absolute;pointer-events:none;
  width:13px;height:13px;border:1.5px solid var(--hair);
}
.bench::before{top:-9px;left:-9px;border-right:0;border-bottom:0}
.bench::after{bottom:-9px;right:-9px;border-left:0;border-top:0}

/* The light each monitor throws spills past its own box on purpose. Clip the
   stage sideways so that spill can never become a horizontal page scroll on a
   phone, while leaving the vertical spill, which is the whole effect. */
.stage{position:relative;overflow-x:clip}

/* The drawn desk: room light from above, a floor falling away below, and a
   grain layer, so the space either side of the monitors reads as a surface
   rather than as a hole. */
.scene{position:relative;z-index:2}
.scene::before{
  content:"";position:absolute;inset:-14px -26px -6px;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -14%,rgba(228,236,232,.055),transparent 62%),
    radial-gradient(86% 62% at 50% 114%,rgba(0,0,0,.42),transparent 74%);
}
.scene::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.045;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- the desk: three displays, each above its own controls ----------
   Round 4. The monitors take row 1 and bottom-align onto one desk line; each
   display's control plate takes row 2, directly beneath the screen it drives.
   `display:contents` on the unit is what lets a monitor and its own plate sit
   in the same column without nesting them. */
.row{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.46fr) minmax(0,.80fr) minmax(0,1.04fr);
  grid-template-rows:auto auto;
  --rowgap:clamp(18px,2.9vw,42px);
  /* The laptop is NEARER, so it hangs below the two monitors' feet. It is
     drawn narrower than its own column, which leaves an equal run of desk
     either side of it for the cords: the middle column sits exactly between
     the LG and the Dell, so centering the laptop in it centers the laptop on
     the DESK. It is not centered in the frame, because the ultrawide is
     honestly wider than the 27 and its column has to say so. */
  --lapdrop:calc(var(--rowgap) * .62);
  --lapw:86%;
  column-gap:clamp(10px,1.5vw,22px);
  row-gap:var(--rowgap);
  align-items:end;
}
.unit{display:contents}
[data-unit="lg"]   .mon,[data-unit="lg"]   .rig{grid-column:1}
[data-unit="mac"]  .mon,[data-unit="mac"]  .rig{grid-column:2}
[data-unit="dell"] .mon,[data-unit="dell"] .rig{grid-column:3}
.row .mon{grid-row:1;align-self:end;z-index:2}
.row .rig{grid-row:2;align-self:stretch}

/* the laptop in the middle of the desk, in front of and lower than the two
   monitors behind it */
[data-unit="mac"] .mon{
  z-index:4;
  width:var(--lapw);
  margin-inline:calc((100% - var(--lapw)) / 2);
  transform:translateY(var(--lapdrop));
}
/* Its dimension bracket has that much less room to rise through, and it is
   drawn to the laptop's own footprint rather than the plate's, so the two
   uprights land under the machine instead of either side of it. */
[data-unit="mac"] .rig::before{
  height:calc(var(--rowgap) - var(--lapdrop));
  left:calc((100% - var(--lapw)) / 2);
  right:calc((100% - var(--lapw)) / 2);
}

/* ---------- the cords ----------
   The argument in one drawing: the Mac is the hub and the monitors hang off
   it. Thin, a shade under the bezels, behind everything so a cord tucks in
   behind the stand it arrives at. */
.cords{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  overflow:visible;width:100%;height:100%;
}
.cords path{fill:none;stroke-linecap:round}
/* the contact shadow a cable throws on the desk it is lying on, the same
   language the stand feet and the laptop's deck already use */
.cords .shad{stroke:rgba(0,0,0,.42);stroke-width:3.4;transform:translateY(2.2px)}
.cords .cord{stroke:rgba(255,255,255,.15);stroke-width:2.4;
  transition:stroke .26s var(--ease-settle)}
.cords .cord.on{stroke:rgba(255,255,255,.26)}
/* the hairline of room light along the cable's upper edge */
.cords .lit{stroke:rgba(255,255,255,.17);stroke-width:.9;transform:translateY(-.7px)}
/* a panel that is refusing: the cord goes dashed, like its plate and its arc */
.cords .cord.warn{stroke-dasharray:5 5;stroke:rgba(255,255,255,.17)}
.cords .lit.warn,.cords .shad.warn{stroke-dasharray:5 5}
/* the connector in the laptop's side port: these things plug into the Mac */
.cords .plug{fill:#2b2f34;stroke:rgba(255,255,255,.18);stroke-width:1;
  transition:fill .26s var(--ease-settle)}
.cords .plug.on{fill:#3a3f46}
/* one command travelling out to the monitor, once, when a write lands */
.cords .zip{stroke:var(--live);stroke-width:2.4;opacity:0}
.cords .zip.go{animation:cordzip .55s linear}
@keyframes cordzip{
  0%{opacity:0;stroke-dashoffset:var(--dash)}
  14%{opacity:.85}
  84%{opacity:.85}
  100%{opacity:0;stroke-dashoffset:calc(var(--len) * -1)}
}
/* the desk surface the stands rest on, run right across the scene: a hairline
   where the light catches the front edge, and the surface falling away under it */
.deskline{
  grid-row:2;grid-column:1 / -1;align-self:start;
  height:18px;margin-inline:-5%;margin-top:-1px;pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.15) 9%,
      rgba(255,255,255,.15) 91%,transparent) top/100% 1px no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 78%);
}

@media (max-width:1019px){
  /* Two bands: the ultrawide across the top, the 27 and the laptop beneath.
     There is no middle here and no one desk line, so the cords come off: a
     wire drawn across a stacked diagram would be describing a desk that is
     not on the screen. */
  .row{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    grid-template-rows:auto auto auto auto;--rowgap:clamp(14px,2vw,20px)}
  [data-unit="lg"] .mon{grid-column:1 / -1;grid-row:1}
  [data-unit="lg"] .rig{grid-column:1 / -1;grid-row:2}
  [data-unit="dell"] .mon{grid-column:1;grid-row:3}
  [data-unit="dell"] .rig{grid-column:1;grid-row:4}
  [data-unit="mac"] .mon{grid-column:2;grid-row:3}
  [data-unit="mac"] .rig{grid-column:2;grid-row:4}
  .row .mon{align-self:end}
  [data-unit="mac"] .mon{width:100%;margin-inline:0;transform:none}
  [data-unit="mac"] .rig::before{height:var(--rowgap);left:0;right:0}
  .cords{display:none}
  .deskline{display:none}
  .rig{border-top-color:rgba(255,255,255,.17)}
}
@media (max-width:659px){
  /* one column: a display, then its dials, three times */
  .row{grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    grid-auto-rows:auto;--rowgap:clamp(12px,3vw,18px)}
  [data-unit] .mon,[data-unit] .rig{grid-column:1;grid-row:auto}
}

.mon{
  position:relative;
  appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;
  display:block;width:100%;min-width:0;cursor:pointer;text-align:left;color:inherit;
  font:inherit;border-radius:4px;
}

/* the light a screen throws forward, onto its own control plate */
.glow{
  position:absolute;left:-14%;right:-14%;top:100%;z-index:3;
  height:clamp(34px,5.5vw,76px);pointer-events:none;
  opacity:var(--lit,.6);transition:opacity .16s linear;
  background:radial-gradient(58% 100% at 50% 0%,
    rgba(230,240,234,.16) 0%,rgba(230,240,234,.05) 40%,transparent 72%);
}

.case{
  display:block;
  background:var(--case) linear-gradient(176deg,var(--case-hi),var(--case) 58%,var(--case-lo));
  border-radius:clamp(4px,.55vw,8px) clamp(4px,.55vw,8px) 2px 2px;
  padding:clamp(3px,.45vw,6px) clamp(3px,.45vw,6px) 0;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 10px 22px rgba(0,0,0,.34);
  transition:box-shadow .26s var(--ease-settle);
}
.mon:hover .case{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 12px 26px rgba(0,0,0,.42)}
.mon[aria-pressed="true"] .case{
  box-shadow:0 0 0 1px var(--live-ghost),0 1px 0 rgba(255,255,255,.16) inset,
    0 14px 30px rgba(0,0,0,.46);
}

/* Every screen is a size container, so the app's own HUD and the volume meter
   scale with the panel they are drawn on instead of with the viewport. */
.screen{
  position:relative;display:block;overflow:hidden;background:#000;
  container-type:size;
  aspect-ratio:16/9;
  box-shadow:inset 0 0 18px rgba(0,0,0,.85);
}
.mon.wide .screen{aspect-ratio:64/27}   /* LG 40WP95C is 5120 x 2160 */
.mon.lap .screen{aspect-ratio:16/10}
.mon[aria-pressed="true"] .screen{
  box-shadow:inset 0 0 0 1px var(--live-ghost),inset 0 0 18px rgba(0,0,0,.85);
}
.screen .card{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  transition:filter .13s linear;
}
/* scanline + bloom, so a test card reads as emitted, not printed */
.screen .glass{
  position:absolute;inset:0;pointer-events:none;z-index:6;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),
    radial-gradient(118% 100% at 50% 42%,rgba(255,255,255,.05) 0%,transparent 56%,rgba(0,0,0,.42) 100%);
}
/* the software-dimming overlay: a dark sheet over the PICTURE. The backlight
   is untouched, which is exactly the thing the app refuses to do silently. */
.screen .gamma{
  position:absolute;inset:0;pointer-events:none;z-index:5;background:#000;
  opacity:0;transition:opacity .2s linear;
}

/* ---------- what the volume dial is FOR: something to hear, drawn ----------
   A monitor's own speakers, playing the test card's 1 kHz tone. The meter
   scales with that display's volume and goes flat and muted at zero. */
.np{
  position:absolute;left:3.4%;top:7%;z-index:4;
  display:flex;align-items:center;gap:.6em;
  padding:.42em .62em;border-radius:.42em;
  background:rgba(8,11,9,.86);border:1px solid rgba(255,255,255,.13);
  font-family:var(--mono);font-size:min(2.4cqw,4.2cqh);letter-spacing:.04em;
  color:var(--signal-2);line-height:1;
}
.np .spk{width:1.7em;height:1.7em;color:var(--signal);flex:none;display:block}
.np .spk svg{width:100%;height:100%;display:block}
.np b{font-weight:500;color:var(--signal);white-space:nowrap;font-size:.98em}
.np .eq{display:flex;align-items:flex-end;gap:.18em;height:1.5em;width:3.1em;flex:none}
.np .eq i{
  flex:1;background:var(--live);border-radius:.5px;height:100%;
  transform-origin:50% 100%;
  animation:eqbar var(--t) ease-in-out infinite alternate;
}
@keyframes eqbar{
  from{transform:scaleY(calc(.055 + (var(--lo) - .055) * var(--vol,0)))}
  to{transform:scaleY(calc(.055 + (var(--hi) - .055) * var(--vol,0)))}
}
.np .eq i:nth-child(1){--lo:.22;--hi:.58;--t:.74s}
.np .eq i:nth-child(2){--lo:.40;--hi:.92;--t:.53s}
.np .eq i:nth-child(3){--lo:.30;--hi:1;   --t:.66s}
.np .eq i:nth-child(4){--lo:.52;--hi:.80; --t:.44s}
.np .eq i:nth-child(5){--lo:.24;--hi:.95; --t:.61s}
.np .eq i:nth-child(6){--lo:.44;--hi:.70; --t:.50s}
.np .eq i:nth-child(7){--lo:.20;--hi:.86; --t:.69s}
.np.muted .eq i{background:rgba(255,255,255,.22);animation:none;transform:scaleY(.055)}
.np.muted .spk{color:var(--signal-2)}
/* a small drawn panel sheds text rather than clipping it */
@container (max-height:150px){ .np b{display:none} }
@container (max-height:96px){ .np{display:none} }

/* the chin of an external monitor: a power LED and a speaker grille, no text.
   The display's name lives once, on its own control plate underneath. */
.chin{
  display:flex;align-items:center;gap:.55em;min-width:0;
  padding:clamp(4px,.55vw,7px) clamp(6px,.8vw,11px) clamp(5px,.6vw,8px);
}
.led{
  width:4px;height:4px;border-radius:50%;background:#3d4046;flex:none;
  transition:background .26s var(--ease-settle),box-shadow .26s var(--ease-settle);
}
/* the speaker grille, lit in proportion to that monitor's volume */
.grille{
  margin-left:auto;flex:none;width:clamp(26px,2.6vw,38px);height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--live-dim) 0 var(--p,0%),
    rgba(255,255,255,.15) var(--p,0%));
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 1.4px,transparent 1.4px 3.2px);
  mask-image:repeating-linear-gradient(90deg,#000 0 1.4px,transparent 1.4px 3.2px);
  transition:background .12s linear;
}
.mon[aria-pressed="true"] .grille{
  background:linear-gradient(90deg,var(--live) 0 var(--p,0%),
    rgba(255,255,255,.15) var(--p,0%));
}
.mon[aria-pressed="true"] .led{background:var(--accent-dot);box-shadow:0 0 6px var(--live-glow)}
/* a panel that is refusing: the LED goes hollow rather than changing color */
.mon.warn[aria-pressed="true"] .led{
  background:transparent;box-shadow:0 0 0 1.5px var(--dead);
}

.stand{display:block;position:relative;height:clamp(14px,2.2vw,30px)}
.stand i{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:12%;height:calc(100% - 3px);
  background:#22252a linear-gradient(180deg,#2b2e34,#1a1c20);border-radius:0 0 2px 2px;
}
.stand u{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:42%;height:3px;background:#2f3239;border-radius:2px;text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset;
}
/* the shadow a foot casts on the desk it is standing on */
.stand::after{
  content:"";position:absolute;left:20%;right:20%;bottom:-2px;height:9px;
  pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%,rgba(0,0,0,.6),transparent 72%);
}
.mon.lap .deck::after{
  content:"";position:absolute;left:4%;right:4%;bottom:-4px;height:11px;
  pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%,rgba(0,0,0,.55),transparent 74%);
}

/* ---------- the laptop, drawn as a laptop ----------
   A thin-bezel lid with a notch, tilted back a few degrees; an aluminum hinge;
   and a foreshortened deck with a real key layout, two speaker grilles and a
   trackpad, drawn in macdials.js. No Apple logo: it is Apple's. */
.mon.lap .lid{
  display:block;
  background:linear-gradient(174deg,#55595f,#32363c 46%,#212429);
  border-radius:clamp(7px,.85vw,12px) clamp(7px,.85vw,12px) 2px 2px;
  padding:clamp(2px,.28vw,3.5px) clamp(2px,.28vw,3.5px) 0;
  transform:perspective(1100px) rotateX(3.4deg);transform-origin:50% 100%;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 10px 24px rgba(0,0,0,.4);
  transition:box-shadow .26s var(--ease-settle);
}
.mon.lap:hover .lid{box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 12px 28px rgba(0,0,0,.48)}
.mon.lap[aria-pressed="true"] .lid{
  box-shadow:0 0 0 1px var(--live-ghost),0 1px 0 rgba(255,255,255,.22) inset,
    0 14px 30px rgba(0,0,0,.5);
}
.mon.lap .bez{
  display:block;background:#08090a;
  border-radius:clamp(5px,.62vw,9px) clamp(5px,.62vw,9px) 0 0;
  padding:clamp(3px,.42vw,5px) clamp(3px,.42vw,5px) clamp(4px,.5vw,7px);
}
.mon.lap .notch{
  position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:7;
  width:17%;height:min(7.5%,9px);background:#08090a;border-radius:0 0 3px 3px;
}
.mon.lap .deck{display:block;position:relative;filter:drop-shadow(0 7px 12px rgba(0,0,0,.55))}
.mon.lap .deck svg{width:100%;height:auto;display:block}

/* The HUD, drawn the way HUD.swift draws it: a square, a glyph, a SIXTEEN
   segment bar, the display name and a caption, up for 1.4 seconds. It is moved
   into whichever screen is being driven.
   ⚠ Everything inside is sized against the SCREEN it sits on, in container
   units, so one HUD works on an ultrawide, a 27 and a laptop panel. */
.hud{
  position:absolute;left:50%;bottom:8%;z-index:6;
  width:min(46cqw,62cqh);aspect-ratio:1;
  font-size:min(5.3cqw,7cqh);
  transform:translate(-50%,0) scale(.94);
  opacity:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.32em;padding:.55em .45em;
  border-radius:11%;
  background:rgba(38,40,38,.82);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 30px rgba(0,0,0,.34);
  transition:opacity .2s var(--ease-settle),transform .26s var(--ease-settle);
}
.hud.up{opacity:1;transform:translate(-50%,0) scale(1)}
.hud .glyph{width:2.1em;height:2.1em;color:var(--signal);flex:none}
.hud .glyph svg{width:100%;height:100%;display:block}
.hud .segs{display:flex;gap:.09em;width:92%;height:.42em;align-items:stretch;flex:none}
.hud .segs i{flex:1;border-radius:1px;background:rgba(255,255,255,.22)}
.hud .segs i.on{background:var(--signal)}
.hud .prob{
  font-family:var(--mono);font-size:.68em;font-weight:500;letter-spacing:.06em;
  line-height:1.3;text-align:center;color:var(--signal);margin:0;text-wrap:balance;
}
.hud .who{text-align:center;display:flex;flex-direction:column;gap:.1em;min-width:0;width:100%}
.hud .who .n{
  font-family:var(--body);font-weight:600;color:var(--signal);
  font-size:.7em;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hud .who .c{
  font-family:var(--mono);font-weight:400;color:var(--signal-2);
  font-size:.6em;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* a HUD reporting a refusal is outlined rather than recolored */
.hud.fault{border-color:rgba(255,255,255,.34);border-style:dashed}
/* A real HUD is a fixed size on a big panel. These panels are small, so the
   HUD is drawn generously and drops its text rather than truncating it: a
   clipped display name reads as a bug, a glyph and a bar still read as a HUD. */
@container (max-height:165px){ .hud .who .c{display:none} }
@container (max-height:135px){ .hud .who{display:none} .hud .prob{font-size:.95em} }

/* ---------- one control plate per display, under that display ---------- */
.hint{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;
  gap:4px clamp(14px,2vw,28px);justify-content:space-between;
  margin:0 0 clamp(12px,1.5vw,18px);
  font-family:var(--mono);font-size:clamp(9px,.16vw + 8.6px,10px);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--signal-2);
}
.hint b{font-weight:400;font-size:1.25em;line-height:1;letter-spacing:0;color:var(--live)}
/* a phone has no wheel, no arrow keys and no shift, and the tail was stranding
   a separator at the end of a line */
.hint i{font-style:normal}
@media (max-width:719px){.hint i{display:none}}

.rig{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:clamp(7px,.85vw,11px);
  border:1px solid var(--screen-hair);border-top-color:rgba(255,255,255,.14);
  border-radius:clamp(4px,.45vw,7px);
  /* milled, not printed: the room light catches the top edge of the plate */
  background:#0e120e linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,transparent 1px),
    #0e120e linear-gradient(180deg,#151915,#0a0c0a);
  padding:clamp(8px,.85vw,12px) clamp(9px,1vw,14px) clamp(8px,.9vw,12px);
  box-shadow:0 6px 16px rgba(0,0,0,.34);
  transition:border-color .26s var(--ease-settle),background .26s var(--ease-settle);
}
.rig.on{border-color:var(--live-ghost);background:#101510 linear-gradient(180deg,#191f19,#0b0e0b)}
/* ⚠ The round 4 argument, drawn: a dimension bracket rises from this plate's
   two top corners to the underside of the screen it drives. Three plates, three
   brackets, and nothing crosses. It is the same move a technical drawing makes,
   and it is what says these dials belong to THAT display. */
.rig::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;
  height:var(--rowgap,20px);pointer-events:none;
  border-left:1px solid rgba(255,255,255,.10);
  border-right:1px solid rgba(255,255,255,.10);
}
.rig.on::before{border-color:rgba(255,255,255,.24)}
.rig.on.warn::before{border-color:rgba(255,255,255,.14);border-style:dashed}
.rig::after{
  content:"";position:absolute;left:5px;right:5px;bottom:5px;height:5px;pointer-events:none;
  background:
    radial-gradient(circle at 2.5px 2.5px,rgba(0,0,0,.65) 0 2.2px,transparent 2.4px) left top/6px 6px no-repeat,
    radial-gradient(circle at 3.5px 2.5px,rgba(0,0,0,.65) 0 2.2px,transparent 2.4px) right top/6px 6px no-repeat;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.12));
}
.rig.on.warn{border-style:dashed;border-color:rgba(255,255,255,.26)}

.rig-head{
  display:flex;align-items:center;gap:.55em;width:100%;min-width:0;
  background:none;border:0;margin:0;cursor:pointer;text-align:left;
  padding:0 0 clamp(6px,.7vw,9px);border-bottom:1px solid var(--screen-hair);
  font-family:var(--mono);font-weight:500;
  font-size:clamp(9.6px,.22vw + 9px,11px);
  letter-spacing:.06em;color:var(--signal-2);
  transition:color .2s var(--ease-settle);
}
.rig-head .ic{width:1.35em;height:1.35em;flex:none}
.rig-head .ic svg{width:100%;height:100%;display:block}
.rig-head .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rig-head .st{flex:none;font-size:.86em;letter-spacing:.11em}
.rig-head:hover{color:var(--signal)}
.rig.on .rig-head{color:var(--live)}
.rig.on.warn .rig-head .st{text-decoration:underline;text-underline-offset:3px}

/* Sliders, not dials (Derick, 2026-09-29: the dials "look cool, but they're a pain").
   One row per control: its name, the track, the reading. Each control owns one of
   the six colors (1D1), so a glance says which is which. */
.knobs{display:flex;flex-direction:column;gap:clamp(6px,.7vw,10px);width:100%}
.knob{
  /* The name ABOVE the track, on every plate: side by side, the laptop's narrow plate
     lost its track to the name, and three plates laid out two ways read as two
     different instruments. */
  display:grid;grid-template-columns:minmax(0,1fr) 3.3em;grid-template-areas:"nm nm" "box rd";
  align-items:center;column-gap:10px;row-gap:1px;padding:2px;border-radius:4px;
  --c:var(--live);
}
.dialbox{cursor:pointer;touch-action:none}
.knob[data-key="brightness"]{--c:var(--six-orange)}
.knob[data-key="contrast"]{--c:var(--six-purple)}
.knob[data-key="volume"]{--c:var(--six-blue)}
.knob:focus-visible{outline:1px solid var(--live);outline-offset:2px}
.dialbox{grid-area:box;position:relative;display:block;height:22px}
.knob .face{position:absolute;inset:0;display:block}
.knob .trk{position:absolute;left:0;right:0;top:9px;height:3px;background:rgba(255,255,255,.14)}
.knob .fl{position:absolute;left:0;top:8px;height:5px;width:var(--v,0%);background:var(--c);
  transition:width .09s linear}
.knob .th{position:absolute;top:2px;left:var(--v,0%);width:10px;height:17px;margin-left:-5px;
  background:var(--signal);border:1px solid #000;border-radius:1.5px;
  transition:left .09s linear,transform .15s var(--ease-settle)}
.knob .tk{position:absolute;left:0;right:0;top:17px;display:flex;justify-content:space-between}
.knob .tk i{width:1px;height:4px;background:rgba(255,255,255,.2);transition:background .28s var(--ease-settle)}
.knob.detent .tk i{background:rgba(255,255,255,.6);transition:none}
.knob.turning .th{transform:scaleY(1.12)}
.knob:hover .th{background:#fff}
.knob .rd{
  grid-area:rd;display:flex;align-items:baseline;justify-content:flex-end;
  font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:clamp(11.5px,.6vw,13.5px);line-height:1.1;color:var(--live);
}
.knob .rd s{text-decoration:none;font-size:.7em;opacity:.65;margin-left:.1em}
.knob > .nm{
  grid-area:nm;display:flex;align-items:center;white-space:nowrap;
  font-family:var(--mono);font-size:clamp(8px,.16vw + 7.6px,9.2px);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--signal-2);
}

/* a control the panel is refusing: dimmer, and the fill goes dashed, so the state
   survives a grayscale page */
.knob[data-dead="1"] .rd{color:var(--dead)}
.knob[data-dead="1"] .fl{background:repeating-linear-gradient(90deg,var(--dead-2) 0 3px,transparent 3px 7px)}
.knob[data-dead="1"] .th{background:var(--dead)}
/* a control this display does not have at all: a built-in panel has no DDC/CI, so it
   has no contrast and no volume. An inert row in its slot is more honest than hiding
   it and letting the plate jump. */
.knob[data-na="1"]{cursor:default;opacity:.38}
.knob[data-na="1"] .fl{width:0 !important}
.knob[data-na="1"] .th{display:none}
.knob[data-na="1"] .rd{color:var(--signal-2)}

.rig-foot{
  padding-top:clamp(7px,.8vw,10px);
  border-top:1px solid var(--screen-hair);
  /* Left, not centered. The Dim In Software slot beside the rocker is
     reserved whether or not it is showing, so that nothing moves under the
     pointer when the rocker is thrown; centering the pair then parks the
     rocker visibly left of the plate's middle, by a different amount on every
     plate, which reads as three misaligned controls. Aligning the row left
     puts the foot on the same edge as the head and the difference disappears. */
  display:flex;align-items:center;justify-content:flex-start;gap:10px;
  min-height:30px;
}
.rig-note{
  flex:1 1 auto;margin:0;font-family:var(--body);font-size:clamp(11px,.18vw + 10.6px,12px);
  line-height:1.4;color:var(--signal-2);text-wrap:pretty;
}
/* the rocker: the monitor's OWN DDC/CI setting, on the monitor's own plate.
   On and Off are told apart by which half is filled, not by color. */
.rocker{
  display:inline-flex;align-items:center;gap:0;flex:none;
  border:1px solid var(--screen-hair);border-radius:5px;overflow:hidden;
  background:#0a0c0a;padding:0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;
}
.rocker span{
  padding:5px 8px 4px;color:var(--signal-2);
  transition:background .18s var(--ease-detent),color .18s var(--ease-detent);
}
.rocker[aria-pressed="true"] .yes{background:var(--live);color:#0b0e0b}
.rocker[aria-pressed="false"] .no{background:var(--dead);color:#0b0e0b}
/* Software dimming, offered by name and never substituted. Its slot is always
   reserved, so nothing moves under the pointer when DDC/CI is switched off. */
.softdim{
  flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;
  background:#0a0c0a;color:var(--signal-2);border:1px solid var(--screen-hair);
  border-radius:5px;padding:5px 8px 4px;cursor:pointer;
  transition:background .18s var(--ease-detent),color .18s var(--ease-detent),
    border-color .18s var(--ease-detent);
}
.softdim:hover{color:var(--signal);border-color:rgba(255,255,255,.2)}
.softdim[aria-pressed="true"]{background:var(--dead);color:#0b0e0b;border-color:var(--dead)}
.softdim[data-off]{visibility:hidden;pointer-events:none}

[hidden]{display:none !important}

/* the app's own verdict on the display you last touched */
.verdict-row{
  margin-top:clamp(12px,1.5vw,18px);padding-top:clamp(10px,1.2vw,14px);
  border-top:1px solid var(--screen-hair);
}
.verdict{
  margin:0;max-width:96ch;
  font-size:clamp(12.5px,.26vw + 11.7px,14px);line-height:1.5;
  color:var(--signal-2);text-wrap:pretty;
}
.verdict b{color:var(--signal);font-weight:600}
/* a refusal reads louder by weight, not by hue */
.verdict.warn{color:var(--signal);font-weight:500}

/* ---------- the captions under the desk ---------- */
.caps{display:grid;gap:clamp(14px,2vw,30px);margin-top:clamp(18px,2.4vw,32px)}
@media (min-width:820px){.caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.caps > *{min-width:0}
.cap{display:flex;flex-direction:column;gap:6px;
  border-top:1px solid var(--hair);padding-top:clamp(10px,1.1vw,14px)}
.cap .lbl{color:var(--ink)}
.cap p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}

/* ---------- the step wedge, as the page's rule ---------- */
.wedge{display:flex;width:100%;height:14px;margin:0;border-block:1px solid var(--hair)}
.wedge i{flex:1;display:block}
.wedge.thin{height:4px}

/* ---------- sections ---------- */
section{position:relative;scroll-margin-top:72px}
/* The numeral holds the top-left, the rule runs off the LAST line of the
   heading. Aligning the rule to the first baseline leaves it hanging in space
   beside a heading that wraps, which reads as a stray line. */
.sec-head{display:flex;align-items:flex-end;gap:14px;margin:0 0 clamp(14px,1.6vw,22px);flex-wrap:wrap}
.sec-head .line{flex:1 1 60px;height:1px;background:var(--hair);min-width:30px;margin-bottom:.34em}
h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,4vw,50px);line-height:.98;letter-spacing:-.012em;
  margin:0;max-width:26ch;text-wrap:balance;
}
.sub{color:var(--ink-2);margin:.6rem 0 0;max-width:var(--measure);font-size:16px;text-wrap:pretty}

#nullmessage{padding-block:clamp(44px,5.5vw,72px) clamp(30px,3.4vw,44px)}
.prose{margin-top:clamp(18px,2.2vw,26px)}
.prose p{margin:0 0 1em;max-width:var(--measure);text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:600}
.prose code{font-family:var(--mono);font-size:.92em;white-space:nowrap}

.remedy{
  margin-top:clamp(20px,2.4vw,30px);
  background:var(--bezel-hi);border:1px solid var(--hair);border-radius:4px;
  padding:clamp(16px,1.8vw,22px);
}
@media (min-width:860px){
  .remedy{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
    gap:clamp(20px,3vw,44px);align-items:start}
  .remedy > *{min-width:0}
}
.remedy-head{display:flex;flex-direction:column;gap:6px}
.remedy h3{
  font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,26px);
  line-height:1.04;margin:0 0 4px;letter-spacing:-.005em;
}
.remedy p{margin:0;color:var(--ink-2);font-size:14.5px;max-width:68ch;text-wrap:pretty}
@media (min-width:860px){.remedy p{max-width:52ch}}
.remedy ol{margin:.7em 0 0;padding-left:1.15em;color:var(--ink-2);font-size:14.5px;max-width:58ch}
@media (min-width:860px){.remedy ol{margin-top:.15em}}
.remedy li{margin-bottom:.25em}
.remedy li b{color:var(--ink);font-weight:600}

/* --- controls: spacious, a fixed 9 --- */
#controls{padding-block:clamp(34px,3.8vw,50px) clamp(50px,5.8vw,78px)}
.controls{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);
  grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(22px,2.6vw,34px)}
/* An odd count in two columns leaves a stray; that last card takes the whole
   row, so the grid never ends ragged. An even count needs nothing. */
@media (max-width:860px){
  .controls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctl:last-child:nth-child(odd){grid-column:1 / -1}
}
.ctl{background:var(--bezel-hi);padding:clamp(18px,1.8vw,24px);min-width:0;
  display:flex;flex-direction:column;gap:7px}
.ctl .i{width:30px;height:30px;color:var(--ink);flex:none;opacity:.9}
.ctl .i svg{width:100%;height:100%;display:block}
.ctl h3{
  font-family:var(--display);font-weight:600;font-size:clamp(20px,1.5vw,25px);
  line-height:1.04;margin:2px 0 0;letter-spacing:-.004em;
}
.ctl p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
/* On a phone nine cards stacked spend a line each on an icon sitting alone above
   its title. Put the icon on the title's line and the section loses 300px. */
@media (max-width:560px){
  .controls{grid-template-columns:minmax(0,1fr)}
  .ctl{
    display:grid;grid-template-columns:23px minmax(0,1fr);
    column-gap:11px;row-gap:5px;align-items:center;text-align:left;
    padding:15px 17px 17px;
  }
  .ctl .i{width:23px;height:23px;grid-column:1;grid-row:1}
  .ctl h3{grid-column:2;grid-row:1;margin:0;font-size:21px}
  .ctl p{grid-column:2;grid-row:2;font-size:13.8px}
}

/* --- compared: a bench sheet --- */
#compared{padding-block:clamp(40px,4.6vw,62px) clamp(26px,2.8vw,36px)}
.sheet-wrap{
  margin-top:clamp(20px,2.4vw,30px);
  overflow-x:auto;border:1px solid var(--hair);background:var(--bezel-hi);
  -webkit-overflow-scrolling:touch;
}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:720px;font-size:14px;
  table-layout:fixed}
col.lab{width:29%}
col.prod{width:17.75%}
thead th{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);text-align:left;
  padding:12px 14px;border-bottom:1px solid var(--hair);
  background:var(--bezel-hi);vertical-align:bottom;
}
thead th.us{color:var(--ink);font-weight:600}
tbody td{padding:11px 14px;border-bottom:1px solid var(--hair-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
th.rowlab,td.rowlab{
  position:sticky;left:0;z-index:2;background:var(--bezel-hi);
  border-right:1px solid var(--hair);font-weight:500;color:var(--ink);
  text-align:left;
}
tbody th.rowlab{padding:11px 14px;border-bottom:1px solid var(--hair-soft);font-size:14px}
tbody tr:last-child th.rowlab{border-bottom:0}
td.v{font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:var(--ink-2);
  line-height:1.4;text-wrap:pretty}
td.v::before{content:"○ ";color:var(--ink-3)}
/* Green says yes, red says no, yellow says only partly: each of the six colors does one
   job (Derick, 2026-09-30). The dot carries the color and the words stay ink, so the
   table still reads in grayscale. */
td.v.y::before{content:"● ";color:var(--six-green)}
td.v.n::before{content:"● ";color:var(--six-red)}
td.v.p::before{content:"● ";color:var(--six-yellow)}
td.v.y{color:var(--ink)}
tbody td.price{font-family:var(--mono);font-variant-numeric:tabular-nums}
.scroll-hint{display:none;margin:.55rem 0 0}
@media (max-width:760px){.scroll-hint{display:block}}

/* --- terms: one price, so one panel, not a lone card in a grid --- */
#terms{padding-block:clamp(30px,3.2vw,44px) clamp(46px,5.4vw,70px)}
.terms{
  display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);
  grid-template-columns:minmax(0,.28fr) minmax(0,1fr);align-items:stretch;
  margin-top:clamp(20px,2.4vw,30px);
}
@media (max-width:660px){.terms{grid-template-columns:minmax(0,1fr)}}
.term{
  background:var(--bezel-hi);padding:clamp(20px,2.2vw,30px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;
}
.term .fig{
  font-family:var(--display);font-weight:700;font-size:clamp(50px,5.6vw,76px);
  line-height:.84;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.term .what{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.term-body{gap:.85em}
@media (min-width:860px){
  .term-body{display:block;columns:2;column-gap:clamp(26px,3vw,46px)}
  .term-body p{break-inside:avoid;max-width:none}
  .term-body p + p{margin-top:.85em}
}
.term p{margin:0;font-size:14.5px;line-height:1.52;color:var(--ink-2);text-wrap:pretty}
.term-body p{max-width:56ch}
.term p b{color:var(--ink);font-weight:600}

/* --- the list, where the price is --- */
.early{
  margin-top:clamp(14px,1.6vw,20px);scroll-margin-top:84px;
  border:1px solid var(--hair);background:var(--bezel-hi);
  padding:clamp(18px,2vw,26px);
  display:grid;gap:clamp(16px,2.2vw,34px);
}
@media (min-width:820px){
  .early{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start}
  .early > *{min-width:0}
}
.early-say{display:flex;flex-direction:column;gap:8px}
.early-say .lbl{color:var(--accent-kick)}
.early h3{
  font-family:var(--display);font-weight:600;font-size:clamp(22px,2.3vw,30px);
  line-height:1.02;margin:0;letter-spacing:-.006em;max-width:22ch;text-wrap:balance;
}
.early-say p{margin:0;font-size:14.5px;line-height:1.52;color:var(--ink-2);
  max-width:54ch;text-wrap:pretty}
.early-say p b{color:var(--ink);font-weight:600}
.earlyform{display:grid;gap:9px;align-content:start}
.earlyform label{color:var(--ink-2)}
.earlyform input[type=email]{
  width:100%;font-family:var(--body);font-size:16px;line-height:1.2;
  padding:12px 13px;color:var(--ink);
  background:var(--bezel);border:1px solid var(--edge);border-radius:0;
}
.earlyform input[type=email]::placeholder{color:var(--ink-3);opacity:1}
.earlyform input[type=email]:focus{outline:2px solid var(--ink);outline-offset:1px}
.earlyform .act{width:100%;min-height:46px}
.earlynote,.earlymsg{
  margin:0;font-family:var(--mono);font-size:11px;line-height:1.5;
  letter-spacing:.04em;color:var(--ink-3);overflow-wrap:anywhere;
}
.earlymsg.is-bad{color:var(--ink);font-weight:500}
.earlydone{
  display:flex;gap:.7rem;align-items:flex-start;
  font-size:15px;line-height:1.5;color:var(--ink-2);
  border:1px solid var(--hair);background:var(--bezel);padding:14px 15px;
}
.earlydone strong{color:var(--ink);font-weight:600}
.earlytick{flex:0 0 auto;width:1.3em;height:1.3em;margin-top:.12em;color:var(--ink)}

/* ---------- a standalone page (thanks) ---------- */
.page{padding-block:clamp(44px,6vw,90px) clamp(50px,7vw,100px)}
.page h1{max-width:18ch}
.page p{margin:1em 0 0;font-size:16px;color:var(--ink-2);max-width:56ch;text-wrap:pretty}
.page .act{margin-top:1.4em}

/* ---------- colophon ---------- */
.colophon{padding-block:clamp(36px,4.5vw,60px) clamp(30px,3.4vw,44px);border-top:1px solid var(--hair)}
/* Four columns since the legal links joined it (2026-09-22). Written out rather
   than auto-fit: the count is fixed, and auto-fit would leave the ragged last
   row the grid rule forbids. */
.colo-grid{display:grid;gap:22px clamp(24px,4vw,56px);align-items:start;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
@media (max-width:980px){.colo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .colo-grid .sig{grid-column:1/-1}}
@media (max-width:700px){.colo-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .colo-grid .sig{grid-column:1/-1}}
.colo-grid .sig{display:flex;flex-direction:column;gap:6px;min-width:0}
.colo-grid .sig .brand{font-size:1.05rem}
.colo-grid .sig p{margin:0;font-size:13.5px;color:var(--ink-2);max-width:40ch}
.colo-grid .sig .lbl{margin-top:4px}
.colo-links{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.colo-links a,.colo-links span{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;
}
.colo-links a{border-bottom:1px solid var(--hair);padding-bottom:1px}
.colo-links a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- reveals ---------- */
.rev{opacity:0;transform:translateY(22px);filter:blur(5px)}
.rev.in{opacity:1;transform:none;filter:none;
  transition:opacity .8s var(--ease-settle) var(--d,0ms),
             transform .8s var(--ease-settle) var(--d,0ms),
             filter .8s var(--ease-settle) var(--d,0ms)}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .rev{opacity:1;transform:none;filter:none;transition:none}
  .hud,.screen .card,.screen .gamma,.case,.mon.lap .lid,.led,
  .knob .fl,.knob .th,.grille,.knob .tk i{transition:none}
  .knob.turning .th{transform:none}
  .cords .zip.go{animation:none;opacity:0}
  .np .eq i{animation:none;transform:scaleY(calc(.055 + .82 * var(--vol,0)))}
  .masthead nav a::after{transition:none}
}

/* ---------- phone ---------- */
@media (max-width:640px){
  .bench{padding:10px;border-radius:9px}
  .rig{padding:9px 10px}
  /* a thumb needs a taller hit area than a pointer does */
  .dialbox{height:30px}
  .knob .trk{top:13px} .knob .fl{top:12px} .knob .th{top:4px;height:22px;width:12px;margin-left:-6px}
  .knob .tk{top:23px}
  .knob > .nm{letter-spacing:.08em}
  .rig-foot{flex-wrap:wrap;row-gap:7px}
}

/* ---------- legal and support pages ----------
   privacy.html, terms.html and support.html are long-form prose, which the
   marketing page has no shape for: .page styles a headline and two paragraphs.
   These are the four elements those pages actually use, in the site's own
   language (mono labels, hairline rules, hard edges, nothing rounded).
   ⚠ These pages are fetched by Paddle and by anyone vetting the seller, with
   no browser and no cookie, so they are deliberately plain: no script, no
   form, nothing that needs JavaScript to read. */
.legal{max-width:68ch}
.legal h2{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-kick);
  margin:2.4em 0 .7em;padding-top:.9em;border-top:1px solid var(--hair);
  /* ⚠ The site's h2 is a section headline capped at 26ch. These are one-line
     mono labels, and inheriting that cap wrapped "What the app stores, and
     where" onto two lines with the rule floating above half of it. */
  max-width:none;text-wrap:nowrap;
}
.legal h2:first-of-type{margin-top:1.8em}
.legal h3{font-size:16px;font-weight:600;color:var(--ink);margin:1.6em 0 .35em}
.legal p{margin:1em 0 0;font-size:16px;color:var(--ink-2);max-width:68ch;text-wrap:pretty}
.legal ul{margin:.9em 0 0;padding-left:1.15em;max-width:68ch}
.legal li{font-size:16px;color:var(--ink-2);margin:.45em 0;text-wrap:pretty}
.legal a{color:var(--ink);text-underline-offset:3px}
.legal code{font-family:var(--mono);font-size:.9em;color:var(--ink)}
.legal .stamp{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-kick);margin-top:3rem;padding-top:.9em;border-top:1px solid var(--hair);
}

/* Keys as key caps, a combination never broken across a line (developer.md, keycaps). */
.keys{white-space:nowrap}
/* A modifier is one glyph, and a monospaced face draws it at two thirds of a letter (the
   control key read as a caret), so a glyph cap takes the system text face at full size
   (checklist C42, the app's KeyCap). */
kbd.mod{font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:1.02em;padding:.08em .3em}
kbd{font-family:var(--mono);font-size:.84em;line-height:1;color:var(--ink);
  border:1px solid var(--hair);border-bottom-width:2px;border-radius:3px;
  padding:.12em .36em;margin:0 .08em;background:var(--bezel-hi)}