/* ============================================================================
   Hub Moon — hubmoon.miyukivigil.tech
   ----------------------------------------------------------------------------
   The tool is a command-line controller for audio hardware, so the page keeps a
   manual's bones: numbered sections, mono labels, figure plates with caption
   bars, spec blocks, and every machine-readable value — product IDs, dB, Hz,
   flags, paths — set in mono.

   But it is read by people, not parsed by a machine, so the surfaces are soft:
   generous corners, one warm shadow that deepens when you point at something,
   and a motion layer that brings each block in as you reach it. Nothing moves
   for its own sake — the entrance is what makes a long technical page feel
   paced rather than dumped.

   Type is IBM Plex. Light is the default (paper); dark is re-picked rather than
   inverted, the same way the app itself picks its two palettes.

   Everything below honours prefers-reduced-motion: with it set, every reveal
   resolves instantly and nothing animates.
   ========================================================================= */

@font-face{font-family:"IBM Plex Sans"; src:url(fonts/ibm-plex-sans-var.woff2) format('woff2');
  font-weight:400 600; font-style:normal; font-display:swap}
@font-face{font-family:"IBM Plex Mono"; src:url(fonts/ibm-plex-mono-400.woff2) format('woff2');
  font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"IBM Plex Mono"; src:url(fonts/ibm-plex-mono-600.woff2) format('woff2');
  font-weight:600; font-style:normal; font-display:swap}

/* ---------------------------------------------------------------- tokens --*/
:root{
  --paper:#F6F4F3; --card:#FFFFFF; --sunken:#F0EBEA; --well:#E6DFDF;
  --ink:#1A1518; --ink-2:#615860; --ink-3:#8F858B;
  --rule:#E6DFE1; --rule-hard:#CDC2C6;
  --accent:#8E4B62; --accent-2:#B9647F; --accent-ink:#FFFFFF; --accent-wash:#F7EAEF;
  --ok:#1F6B4A; --ok-wash:#E4F1EB;
  --warn:#8A6212; --warn-wash:#F8EFDD;
  --crit:#A3282B; --crit-wash:#FAE7E7;

  /* geometry — soft, but never a capsule where a rectangle is the honest shape */
  --r:12px; --r-sm:8px; --r-lg:18px; --r-pill:999px;

  /* one warm shadow, and a lifted version of it for whatever is under the pointer */
  --shadow:0 1px 2px rgba(30,20,26,.04), 0 10px 26px -16px rgba(30,20,26,.20);
  --shadow-lift:0 2px 6px rgba(30,20,26,.06), 0 26px 50px -24px rgba(30,20,26,.30);
  --glow:transparent;

  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E0B0D; --card:#171317; --sunken:#1E191E; --well:#282128;
    --ink:#F3ECEF; --ink-2:#AFA3A9; --ink-3:#82767D;
    --rule:#282228; --rule-hard:#3F373E;
    --accent:#E792AC; --accent-2:#F0AEC2; --accent-ink:#25121B; --accent-wash:#2E1D25;
    --ok:#5EBE8C; --ok-wash:#152B21;
    --warn:#D9A64E; --warn-wash:#2E2413;
    --crit:#EC757D; --crit-wash:#30171A;
    /* on near-black a drop shadow is invisible; what reads is the panel's own
       light spilling onto the page */
    --shadow:0 1px 0 rgba(255,255,255,.045) inset, 0 18px 40px -24px rgba(0,0,0,.85);
    --shadow-lift:0 1px 0 rgba(255,255,255,.06) inset,
                  0 30px 70px -30px color-mix(in srgb, var(--accent) 30%, transparent);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E0B0D; --card:#171317; --sunken:#1E191E; --well:#282128;
  --ink:#F3ECEF; --ink-2:#AFA3A9; --ink-3:#82767D;
  --rule:#282228; --rule-hard:#3F373E;
  --accent:#E792AC; --accent-2:#F0AEC2; --accent-ink:#25121B; --accent-wash:#2E1D25;
  --ok:#5EBE8C; --ok-wash:#152B21;
  --warn:#D9A64E; --warn-wash:#2E2413;
  --crit:#EC757D; --crit-wash:#30171A;
  --shadow:0 1px 0 rgba(255,255,255,.045) inset, 0 18px 40px -24px rgba(0,0,0,.85);
  --shadow-lift:0 1px 0 rgba(255,255,255,.06) inset,
                0 30px 70px -30px color-mix(in srgb, var(--accent) 30%, transparent);
  color-scheme:dark;
}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:78px}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.66; font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none; transition:color .18s var(--ease)}
a:hover{color:var(--accent-2)}
code,kbd,samp,pre{font-family:var(--mono); font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm)}
::selection{background:var(--accent); color:var(--accent-ink)}

.sheet{max-width:1140px; margin:0 auto; padding:0 26px}
@media(max-width:640px){ .sheet{padding:0 18px} }

/* ------------------------------------------------------------------ type --*/
.label{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3)}
.label.acc{color:var(--accent)}
h1{font-size:clamp(31px,4.4vw,46px); line-height:1.1; letter-spacing:-.022em; font-weight:600}
h2{font-size:clamp(22px,2.5vw,28px); line-height:1.22; letter-spacing:-.014em; font-weight:600}
h3{font-size:17.5px; line-height:1.35; font-weight:600; letter-spacing:-.005em}
h4{font-size:15px; font-weight:600}
p{max-width:74ch}
p + p{margin-top:13px}
.lede{font-size:clamp(17px,1.75vw,19px); line-height:1.6; color:var(--ink-2); max-width:66ch}
.lede b, p b{color:var(--ink); font-weight:600}
.muted{color:var(--ink-2)}
.tiny{font-size:13.5px; color:var(--ink-2); line-height:1.55}
ul.list{list-style:none; max-width:74ch}
ul.list li{position:relative; padding-left:22px; margin-top:11px; color:var(--ink-2)}
ul.list li::before{content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px;
  border-radius:var(--r-pill); background:color-mix(in srgb, var(--accent) 45%, transparent)}
ul.list li b{color:var(--ink); font-weight:600}
/* a bullet may carry more than one paragraph; the first is bare text, so a
   `p + p` rule alone would leave no gap before the second. */
ul.list li p{margin-top:12px}
ul.list li code{color:var(--ink)}
/* A verbatim block inside a bullet: a protocol trace, a linker error. It keeps its own
   line breaks — the whole point of quoting it — so it has to be able to scroll rather
   than wrap, since a wrapped trace is a trace whose columns no longer line up. */
ul.list li pre.term{margin-top:12px; padding:13px 15px; background:var(--sunken);
  border:1px solid var(--rule); border-radius:var(--r-sm); overflow-x:auto;
  font-size:12.2px; line-height:1.7; color:var(--ink-2); white-space:pre; tab-size:4}
@media(max-width:560px){ ul.list li pre.term{font-size:11px; padding:11px 12px} }
p code, li code, td code, dd code{font-size:.88em; background:var(--sunken); border:1px solid var(--rule);
  border-radius:var(--r-sm); padding:1.5px 6px; color:var(--ink)}

/* ------------------------------------------------------------------- bar --*/
.bar{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.5) blur(14px); -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease),
             background-color .3s var(--ease)}
.bar.stuck{border-bottom-color:var(--rule); box-shadow:0 10px 30px -26px rgba(30,20,26,.5)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bar{background:var(--paper)}
}
.bar .sheet{display:flex; align-items:center; gap:14px; height:58px}
.bar .mark{width:22px; height:22px; flex:none; border-radius:7px;
  transition:transform .4s var(--ease-out)}
.bar .wordmark:hover .mark,.bar .mark:hover{transform:rotate(-8deg) scale(1.08)}
.bar .wordmark{font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.04em;
  color:var(--ink); display:flex; align-items:center; gap:10px}
.bar .wordmark:hover{color:var(--ink)}
.bar .rev{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.06em;
  border:1px solid var(--rule); border-radius:var(--r-pill); padding:2px 9px;
  transition:border-color .2s var(--ease), color .2s var(--ease)}
.bar .rev:hover{border-color:var(--accent); color:var(--accent)}
.bar nav{margin-left:auto; display:flex; align-items:center; gap:2px}
.bar nav a{position:relative; font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); padding:8px 12px;
  border-radius:var(--r-pill); transition:color .18s var(--ease), background .18s var(--ease)}
.bar nav a::after{content:""; position:absolute; left:12px; right:12px; bottom:3px; height:1.5px;
  border-radius:2px; background:var(--accent); transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .28s var(--ease-out)}
.bar nav a:hover{color:var(--ink); background:var(--sunken)}
.bar nav a:hover::after{transform:scaleX(1)}
.bar nav a[aria-current="page"]{color:var(--accent)}
.bar nav a[aria-current="page"]::after{transform:scaleX(1)}
.seg{display:flex; margin-left:12px; border:1px solid var(--rule-hard); border-radius:var(--r-pill);
  overflow:hidden; flex:none; background:var(--card)}
.seg button{border:0; background:transparent; color:var(--ink-3); cursor:pointer;
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:6px 12px;
  transition:background .25s var(--ease), color .25s var(--ease)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}
@media(max-width:860px){ .bar nav a.opt{display:none} }
/* Below this the page links plus the switch cannot share one line without
   something leaving the screen, so the bar becomes two rows. */
@media(max-width:620px){
  .bar .sheet{height:auto; flex-wrap:wrap; gap:10px; padding-top:10px; padding-bottom:0}
  .bar .rev{display:none}
  .seg{margin-left:auto}
  .bar nav{order:3; width:100%; margin-left:0; justify-content:space-between; gap:0;
    border-top:1px solid var(--rule); padding:3px 0}
  .bar nav a{padding:8px 5px; font-size:10px; letter-spacing:.07em}
  .bar nav a::after{left:5px; right:5px}
}

/* reading progress — injected by site.js, so a blocked script costs nothing */
.prog{position:fixed; top:0; left:0; height:2px; width:100%; z-index:70; transform-origin:0 50%;
  transform:scaleX(0); background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* ------------------------------------------------------------- page head --*/
.head{padding:60px 0 52px; position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:52px; align-items:start}
.head::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,var(--rule-hard),var(--rule) 60%,transparent)}
@media(max-width:940px){ .head{grid-template-columns:1fr; gap:34px; padding:40px 0 36px} }
.head .label{margin-bottom:16px}
.head h1{margin-bottom:18px}
.head .lede{margin-bottom:28px}
.crumb{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:16px}
.crumb b{color:var(--accent); font-weight:600}

/* the specification block — facts, in a rounded panel with drawing-style ticks */
.spec{border:1px solid var(--rule); border-radius:var(--r-lg); background:var(--card);
  position:relative; box-shadow:var(--shadow); overflow:hidden;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease)}
.spec:hover{box-shadow:var(--shadow-lift); transform:translateY(-2px)}
.spec .cap{padding:11px 16px; border-bottom:1px solid var(--rule); background:var(--sunken);
  display:flex; justify-content:space-between; gap:10px}
.spec dl{display:grid; grid-template-columns:auto 1fr}
.spec dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding:9px 16px; border-bottom:1px solid var(--rule); white-space:nowrap}
.spec dd{font-family:var(--mono); font-size:12.5px; color:var(--ink); padding:9px 16px;
  border-bottom:1px solid var(--rule); text-align:right}
.spec dt:last-of-type,.spec dd:last-of-type{border-bottom:0}

/* --------------------------------------------------------------- section --*/
.band{padding:64px 0; position:relative}
.band::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--rule) 12%,var(--rule) 88%,transparent)}
.band:last-of-type::after{display:none}
.bhead{display:flex; align-items:center; gap:16px; margin-bottom:24px}
.bhead .idx{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em;
  color:var(--accent); background:var(--accent-wash); border-radius:var(--r-pill);
  padding:5px 12px; flex:none}
.bhead h2{flex:none}
.bhead .rule{flex:1; height:1px; background:linear-gradient(90deg,var(--rule),transparent)}
.band > .lede{margin-bottom:28px}
.sub{margin-top:40px}
.sub h3{margin-bottom:10px}
.sub p, .sub ul{color:var(--ink-2)}

.cols2{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:28px}
.cols3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:30px}
@media(max-width:860px){ .cols2,.cols3{grid-template-columns:1fr; gap:22px} }
.cols2 h3,.cols3 h3{margin-bottom:9px}
.cols2 p,.cols3 p{color:var(--ink-2); font-size:15px}
.cols3 > div:not(.box) h3,.cols2 > div:not(.box) h3{position:relative; padding-left:16px}
.cols3 > div:not(.box) h3::before,.cols2 > div:not(.box) h3::before{
  content:""; position:absolute; left:0; top:.42em; width:6px; height:6px;
  border-radius:var(--r-pill); background:var(--accent)}
.cols3 > div:not(.box) p,.cols2 > div:not(.box) p{padding-left:16px}

/* ------------------------------------------------------------------ card --*/
.box{border:1px solid var(--rule); border-radius:var(--r); background:var(--card); padding:22px;
  box-shadow:var(--shadow);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
.box:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift);
  border-color:color-mix(in srgb, var(--accent) 26%, var(--rule))}
.box.tint{background:var(--sunken)}
.box h3{margin-bottom:9px}
.box p{color:var(--ink-2); font-size:15px}

/* ----------------------------------------------------------------- plate --
   A screenshot is a figure in a manual: caption bar on top, and a rounded frame
   that lifts a little when you point at it. */
.plate{margin:30px 0 0; border:1px solid var(--rule); border-radius:var(--r-lg);
  background:var(--card); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease),
             border-color .45s var(--ease)}
.plate:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift);
  border-color:color-mix(in srgb, var(--accent) 30%, var(--rule))}
.plate .pbar{display:flex; align-items:center; gap:10px; padding:10px 15px;
  border-bottom:1px solid var(--rule); background:var(--sunken)}
.plate .pbar .n{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.1em;
  color:var(--accent); background:var(--accent-wash); border-radius:var(--r-pill); padding:2px 9px}
.plate .pbar .t{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3)}
.plate .pbar .t b{color:var(--ink-2); font-weight:600}
.plate img{width:100%; transition:transform .7s var(--ease-out)}
.plate:hover img{transform:scale(1.012)}
.plate.half{margin-top:0}
.plates2{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:30px}
@media(max-width:860px){ .plates2{grid-template-columns:1fr} }

/* ------------------------------------------------------------------ code --*/
.code{border:1px solid var(--rule); border-radius:var(--r); background:var(--card);
  margin-top:24px; overflow:hidden; box-shadow:var(--shadow);
  transition:box-shadow .35s var(--ease), border-color .35s var(--ease)}
.code:hover{box-shadow:var(--shadow-lift);
  border-color:color-mix(in srgb, var(--accent) 22%, var(--rule))}
.code .cbar{display:flex; align-items:center; gap:10px; padding:9px 14px;
  border-bottom:1px solid var(--rule); background:var(--sunken)}
.code .cbar span{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3)}
.code .cbar button{margin-left:auto; border:1px solid var(--rule-hard); background:var(--card);
  color:var(--ink-2); border-radius:var(--r-pill); font-family:var(--mono); font-size:10px;
  font-weight:600; letter-spacing:.09em; text-transform:uppercase; padding:4px 11px; cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease),
             transform .2s var(--ease)}
.code .cbar button:hover{color:var(--accent-ink); background:var(--accent); border-color:var(--accent);
  transform:translateY(-1px)}
.code pre{padding:16px 18px; overflow-x:auto; font-size:12.8px; line-height:1.75; color:var(--ink-2)}
.code .p{color:var(--accent); user-select:none}
.code .cm{color:var(--ink-3)}
.code .ok{color:var(--ok); font-weight:600}
.code .wn{color:var(--warn); font-weight:600}
.code .er{color:var(--crit); font-weight:600}
.code .st{color:var(--ink)}
@media(max-width:560px){ .code pre{font-size:11.5px} }

/* ----------------------------------------------------------------- table --*/
.tablewrap{margin-top:26px; overflow-x:auto; border:1px solid var(--rule);
  border-radius:var(--r); background:var(--card); box-shadow:var(--shadow)}
table.grid{width:100%; border-collapse:collapse; font-size:14.5px; min-width:580px}
table.grid th{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); text-align:left; padding:12px 16px;
  border-bottom:1px solid var(--rule); background:var(--sunken); white-space:nowrap}
table.grid td{padding:12px 16px; border-bottom:1px solid var(--rule); color:var(--ink-2);
  vertical-align:top; transition:background .2s var(--ease)}
table.grid tr:last-child td{border-bottom:0}
table.grid tbody tr:hover td{background:var(--sunken)}
table.grid td.m,table.grid th.m{font-family:var(--mono); font-size:12.5px; color:var(--ink);
  white-space:nowrap}
table.grid td.name{color:var(--ink); font-weight:500}
table.grid td.num{text-align:right; font-family:var(--mono); font-size:12.5px; color:var(--ink)}

/* chips state facts; they never decorate */
.chip{display:inline-block; font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; padding:3px 10px; border-radius:var(--r-pill);
  border:1px solid var(--rule-hard); color:var(--ink-3); background:var(--card); white-space:nowrap}
.chip.ok{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 34%,transparent); background:var(--ok-wash)}
.chip.warn{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 34%,transparent); background:var(--warn-wash)}
.chip.crit{color:var(--crit); border-color:color-mix(in srgb,var(--crit) 34%,transparent); background:var(--crit-wash)}
.chip.acc{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 34%,transparent); background:var(--accent-wash)}

/* --------------------------------------------------------- flag listing --*/
.flags{margin-top:26px}
.flagrow{display:grid; grid-template-columns:250px minmax(0,1fr); gap:26px; padding:16px 18px;
  border-radius:var(--r); align-items:start; transition:background .25s var(--ease)}
.flagrow:hover{background:var(--sunken)}
.flagrow + .flagrow{box-shadow:0 -1px 0 var(--rule)}
.flagrow > div:first-child{font-family:var(--mono); font-size:13px; color:var(--ink);
  font-weight:600; word-break:break-word}
.flagrow .args{display:block; font-weight:400; font-size:11.5px; color:var(--ink-3);
  letter-spacing:.04em; margin-top:4px}
.flagrow p{color:var(--ink-2); font-size:15px; margin:0}
.flagrow p + p{margin-top:8px}
@media(max-width:700px){ .flagrow{grid-template-columns:1fr; gap:8px} }

/* ------------------------------------------------------------------ note --*/
.note{margin-top:24px; border:1px solid var(--rule); border-left:3px solid var(--rule-hard);
  border-radius:var(--r); background:var(--sunken); padding:16px 20px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.note:hover{transform:translateX(2px); box-shadow:var(--shadow)}
.note .label{display:block; margin-bottom:7px}
.note p{font-size:15px; color:var(--ink-2)}
.note.acc{border-left-color:var(--accent); background:var(--accent-wash)} .note.acc .label{color:var(--accent)}
.note.ok{border-left-color:var(--ok); background:var(--ok-wash)} .note.ok .label{color:var(--ok)}
.note.warn{border-left-color:var(--warn); background:var(--warn-wash)} .note.warn .label{color:var(--warn)}
.note.crit{border-left-color:var(--crit); background:var(--crit-wash)} .note.crit .label{color:var(--crit)}

/* --------------------------------------------------------------- buttons --*/
.acts{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.btn{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 22px;
  border-radius:var(--r-pill); font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; border:1px solid transparent; cursor:pointer;
  transition:background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease),
             transform .22s var(--ease-out), box-shadow .22s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--accent); color:var(--accent-ink);
  box-shadow:0 6px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent)}
.btn.primary:hover{background:var(--accent-2);
  box-shadow:0 12px 26px -12px color-mix(in srgb, var(--accent) 85%, transparent)}
.btn.ghost{border-color:var(--rule-hard); color:var(--ink); background:var(--card)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent); box-shadow:var(--shadow)}

/* -------------------------------------------------------- key/value rows --*/
.kv{margin-top:24px}
.kvrow{display:grid; grid-template-columns:210px minmax(0,1fr); gap:24px; padding:15px 18px;
  border-radius:var(--r); transition:background .25s var(--ease)}
.kvrow:hover{background:var(--sunken)}
.kvrow + .kvrow{box-shadow:0 -1px 0 var(--rule)}
.kvrow dt{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); padding-top:2px}
.kvrow dd{color:var(--ink-2); font-size:15px}
.kvrow dd b{color:var(--ink); font-weight:600}
@media(max-width:700px){ .kvrow{grid-template-columns:1fr; gap:6px} }
.specs{margin-top:24px}
.specrow{display:grid; grid-template-columns:230px 1fr; gap:24px; padding:15px 18px;
  border-radius:var(--r); font-size:15px; transition:background .25s var(--ease)}
.specrow:hover{background:var(--sunken)}
.specrow + .specrow{box-shadow:0 -1px 0 var(--rule)}
.specrow dt{color:var(--ink-2)}
.specrow dd{color:var(--ink); font-weight:500}
@media(max-width:640px){ .specrow{grid-template-columns:1fr; gap:6px} }

kbd{font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--ink-2);
  background:var(--card); border:1px solid var(--rule-hard); border-radius:var(--r-sm);
  padding:2px 8px; white-space:nowrap}

/* --------------------------------------------------------------- release --*/
.rel{display:grid; grid-template-columns:200px minmax(0,1fr); gap:38px; padding:52px 0;
  position:relative}
.rel::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--rule) 12%,var(--rule) 88%,transparent)}
.rel:last-child::after{display:none}
@media(max-width:860px){ .rel{grid-template-columns:1fr; gap:18px; padding:38px 0} }
.rel .meta{position:sticky; top:82px; align-self:start}
@media(max-width:860px){ .rel .meta{position:static} }
.rel .ver{font-family:var(--mono); font-size:24px; font-weight:600; letter-spacing:-.01em;
  color:var(--ink); display:block}
.rel .date{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-3);
  display:block; margin-top:6px}

/* Which channel a release is on. The changelog is where somebody works out whether
   what they just read is something they can actually have yet, so the answer sits
   next to the version rather than being inferred from the letter in it. */
.rel .chan{display:inline-block; margin-top:8px; font-family:var(--mono); font-size:9.5px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px;
  border-radius:2px; border:1px solid transparent}
.rel .chan.stable{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 34%,transparent);
  background:var(--ok-wash)}
.rel .chan.beta{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 34%,transparent);
  background:var(--warn-wash)}
/* A pre-release reads as provisional at a glance: the whole entry is set back a
   little rather than shouting, because it is still a real release somebody may be
   running. */
.rel.beta .ver{color:var(--ink-2)}
.rel .tags{margin-top:12px; display:flex; gap:7px; flex-wrap:wrap}
.rel .group{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); margin:30px 0 14px; display:inline-block;
  background:var(--accent-wash); border-radius:var(--r-pill); padding:5px 13px}
.rel .group:first-child{margin-top:0}
.rel ul.list li{margin-top:14px}
.rel ul.list ul.list{margin-top:8px; margin-left:2px}
.rel ul.list ul.list li{margin-top:8px; font-size:15px}

/* ------------------------------------------------------------------ rail --*/
.withrail{display:grid; grid-template-columns:minmax(0,1fr) 214px; gap:56px; align-items:start}
@media(max-width:1080px){ .withrail{grid-template-columns:1fr; gap:0} .rail{display:none} }
.rail{position:sticky; top:84px; padding-top:64px}
.rail .label{display:block; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--rule)}
.rail a{position:relative; display:block; font-size:13.5px; color:var(--ink-2); padding:6px 0 6px 14px;
  line-height:1.4; border-radius:var(--r-sm);
  transition:color .2s var(--ease), padding-left .2s var(--ease)}
.rail a::before{content:""; position:absolute; left:0; top:50%; width:5px; height:5px; margin-top:-2.5px;
  border-radius:var(--r-pill); background:var(--accent); opacity:0; transform:scale(.4);
  transition:opacity .2s var(--ease), transform .25s var(--ease-out)}
.rail a:hover,.rail a.here{color:var(--accent); padding-left:18px}
.rail a:hover::before,.rail a.here::before{opacity:1; transform:scale(1)}
.rail a .n{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-right:9px}

/* ---------------------------------------------------------------- footer --*/
footer{border-top:1px solid var(--rule); margin-top:26px; padding:34px 0 60px;
  background:var(--card)}
.foot{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:start}
@media(max-width:700px){ .foot{grid-template-columns:1fr} }
.foot .who{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); letter-spacing:.04em}
.foot .who b{color:var(--ink)}
.foot nav{display:flex; flex-wrap:wrap; gap:8px 20px}
.foot nav a{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-2)}
.foot nav a:hover{color:var(--accent)}
.foot .disc{grid-column:1/-1; margin-top:8px; padding-top:20px; border-top:1px solid var(--rule);
  font-size:12.5px; color:var(--ink-3); line-height:1.6; max-width:96ch}

/* ======================================================== front page ======
   Presented rather than documented: a statement that owns the first screen, the
   product at full width underneath it, a band of figures, and sections that open
   with a headline instead of a row of data.
   ========================================================================= */
.hero{text-align:center; position:relative}
/* The whole statement is sized against the viewport and every gap inside it is
   clamped against svh as well, so the mark, the headline, the sentence, the
   buttons and the cue all land on the first screen of a 900px-tall window
   instead of pushing the cue off the bottom. */
.stmt{min-height:calc(100svh - 58px); display:flex; flex-direction:column; justify-content:center;
  padding:clamp(24px,4svh,56px) 0 clamp(52px,8svh,86px); position:relative; overflow:hidden}
/* One soft wash of the accent behind the statement — the page is otherwise all
   neutrals, and this is the only place colour is allowed to be atmosphere. */
.stmt::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 52% at 50% 40%,
    color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 74%);
  animation:breathe 9s var(--ease) infinite}
@keyframes breathe{0%,100%{opacity:.85; transform:scale(1)} 50%{opacity:1; transform:scale(1.05)}}

/* ---- the drifting response curves ----
   Three of the shape this product exists to draw, at different speeds and
   opacities, masked so they fade out well before the column edge. Transform only:
   nothing here touches layout, so the whole thing is one composited layer. */
.hero-bg{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  -webkit-mask-image:radial-gradient(62% 58% at 50% 46%, #000 0%, transparent 78%);
          mask-image:radial-gradient(62% 58% at 50% 46%, #000 0%, transparent 78%)}
.hero-bg svg{position:absolute; left:-8%; top:50%; width:116%; height:min(58svh,460px);
  transform:translateY(-50%)}
.hero-bg .w{fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke;
  stroke-linecap:round}
.hero-bg .w1{opacity:.38; animation:drift1 26s linear infinite}
.hero-bg .w2{opacity:.24; animation:drift2 34s linear infinite; stroke-dasharray:14 12}
.hero-bg .w3{opacity:.16; animation:drift3 44s linear infinite}
@keyframes drift1{from{transform:translate3d(0,0,0)} to{transform:translate3d(-6%,0,0)}}
@keyframes drift2{from{transform:translate3d(-5%,0,0)} to{transform:translate3d(1%,0,0)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scaleY(1)}
                  50%{transform:translate3d(-3%,0,0) scaleY(1.12)}
                  to{transform:translate3d(-6%,0,0) scaleY(1)}}
@media(max-width:700px){ .hero-bg .w2,.hero-bg .w3{display:none} }

/* ---- the mark ----
   Drawn inline rather than linked, so the reading inside the crescent can move
   the way it does on the app's own welcome screen. */
.moonmark{width:clamp(72px,min(11vw,13svh),112px); height:auto; margin:0 auto clamp(14px,2.2svh,22px);
  display:block; filter:drop-shadow(0 10px 24px color-mix(in srgb, var(--accent) 22%, transparent));
  animation:markin .9s var(--ease-out) both .05s}
@keyframes markin{from{opacity:0; transform:translateY(14px) scale(.9)} to{opacity:1; transform:none}}
.moonmark .bars rect{transform-box:fill-box; transform-origin:50% 100%}
@media(prefers-reduced-motion:no-preference){
  .moonmark .bars rect{animation:eqbar 1.9s var(--ease) infinite}
  .moonmark .b1{animation-duration:1.5s}
  .moonmark .b2{animation-duration:2.1s; animation-delay:-.5s}
  .moonmark .b3{animation-duration:1.7s; animation-delay:-.9s}
  .moonmark .b4{animation-duration:2.4s; animation-delay:-.3s}
  @keyframes eqbar{0%,100%{transform:scaleY(.5)} 50%{transform:scaleY(1)}}
}

.display{font-size:clamp(32px,min(5.6vw,8.4svh),64px); line-height:1.07; letter-spacing:-.03em;
  font-weight:600; max-width:none}
.stmt .lede{margin:clamp(14px,2.2svh,22px) auto 0; max-width:58ch;
  font-size:clamp(16px,min(1.8vw,2.4svh),19px)}
.stmt .lede code{background:transparent; border:0; padding:0; color:var(--ink); font-size:.94em}
.stmt .acts{justify-content:center; margin-top:clamp(20px,3svh,30px)}
.eyebrow{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent)}

.pill{align-self:center; display:inline-flex; align-items:center; gap:10px;
  margin-bottom:clamp(16px,2.6svh,26px);
  padding:6px 8px 6px 8px; border:1px solid var(--rule-hard); border-radius:var(--r-pill);
  background:var(--card); color:var(--ink-2); font-size:13.5px; max-width:100%;
  box-shadow:var(--shadow);
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease-out),
             box-shadow .25s var(--ease)}
.pill:hover{border-color:var(--accent); color:var(--ink); transform:translateY(-2px);
  box-shadow:var(--shadow-lift)}
.pill b{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent-ink);
  background:var(--accent); border-radius:var(--r-pill); padding:3px 10px; letter-spacing:.04em}
.pill span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:4px}
.pill i{font-style:normal; color:var(--ink-3); padding-right:6px}
@media(max-width:620px){ .pill span{display:none} }

.cue{position:absolute; left:50%; bottom:clamp(14px,2.6svh,30px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--ink-3);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  transition:color .2s var(--ease)}
.cue:hover{color:var(--accent)}
.cue i{display:block; width:8px; height:8px; transform:rotate(45deg);
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor}

.stats{display:grid; grid-template-columns:repeat(4,1fr); margin-top:64px;
  border:1px solid var(--rule); border-radius:var(--r-lg); background:var(--card);
  overflow:hidden; box-shadow:var(--shadow)}
.stats > div{padding:28px 18px; text-align:center; border-left:1px solid var(--rule);
  transition:background .25s var(--ease)}
.stats > div:hover{background:var(--sunken)}
.stats > div:first-child{border-left:0}
.stats dt{font-family:var(--mono); font-size:clamp(25px,3.3vw,36px); font-weight:600;
  letter-spacing:-.03em; color:var(--ink); line-height:1}
.stats dd{margin-top:9px; font-size:12.5px; color:var(--ink-3); line-height:1.4;
  font-family:var(--mono); letter-spacing:.04em}
@media(max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats > div:nth-child(3){border-left:0}
  .stats > div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}

/* sections on the front page breathe, and open centred. The section number sits
   above the headline as its eyebrow — as a flex sibling it would sit off to one
   side of a centred line, which reads as a stray number. */
.band.show{padding:100px 0}
.band.show .bhead{flex-direction:column; align-items:center; gap:14px; margin-bottom:20px}
.band.show .bhead .rule{display:none}
.band.show h2{font-size:clamp(26px,3.7vw,42px); line-height:1.14; letter-spacing:-.024em;
  text-align:center; max-width:22ch; margin:0 auto}
.band.show > .lede{margin-left:auto; margin-right:auto; text-align:center; max-width:64ch}
.band.show .plate,.band.show .plates2,.band.show .code,.band.show .tablewrap{text-align:left}
/* the small captions under a plate are centred text in a measure-limited box, so
   the box has to be centred too or they sit left of the figure above them. */
.band.show .tiny{margin-left:auto; margin-right:auto; max-width:72ch}
@media(max-width:700px){ .band.show{padding:64px 0} }

/* accent gallery */
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:20px;
  margin-top:32px; text-align:left}
.gal figure{margin:0; border:1px solid var(--rule); border-radius:var(--r); overflow:hidden;
  background:var(--card); box-shadow:var(--shadow);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease)}
.gal figure:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift);
  border-color:color-mix(in srgb, var(--accent) 30%, var(--rule))}
.gal img{width:100%; transition:transform .8s var(--ease-out)}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{display:flex; align-items:center; gap:9px; padding:10px 13px;
  border-top:1px solid var(--rule); font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.gal .dot{width:10px; height:10px; border-radius:var(--r-pill); flex:none;
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.gal .hex{margin-left:auto; color:var(--ink-3); letter-spacing:.06em; text-transform:none}

/* ========================================================== download ======
   The install page opens with an invitation, not a table: one line, one button,
   and three cards that say what you will actually get. The extension is the
   graphic — no vendor logos, and nothing to mistake for an official download.
   ========================================================================= */
.dl{padding:56px 0 44px; text-align:center; position:relative}
.dl::before{content:""; position:absolute; inset:-10% -10% 10%; z-index:-1; pointer-events:none;
  background:radial-gradient(48% 44% at 50% 40%,
    color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 72%)}
.dl h1{max-width:16ch; margin:0 auto 16px}
.dl .lede{margin:0 auto 26px}
.dl .acts{justify-content:center}
.dl .meta-line{margin-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); display:flex; gap:8px; justify-content:center;
  flex-wrap:wrap}
.dl .meta-line b{color:var(--ink-2); font-weight:600}
.dl .meta-line i{font-style:normal; color:var(--rule-hard)}

/* the three platform cards, which are also the tab strip */
.picker{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px}
@media(max-width:860px){ .picker{grid-template-columns:1fr} }
.pcard{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:22px 22px 20px; border:1px solid var(--rule); border-radius:var(--r-lg);
  background:var(--card); box-shadow:var(--shadow); cursor:pointer; text-align:left;
  font-family:var(--sans); color:var(--ink); width:100%;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease),
             border-color .3s var(--ease), background .3s var(--ease)}
.pcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift);
  border-color:color-mix(in srgb, var(--accent) 34%, var(--rule))}
.pcard .ext{font-family:var(--mono); font-size:26px; font-weight:600; letter-spacing:-.02em;
  color:var(--accent); line-height:1.1}
.pcard .os{font-size:17px; font-weight:600; letter-spacing:-.01em}
.pcard .det{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3)}
.pcard .go{margin-top:12px; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  transition:color .2s var(--ease)}
.pcard:hover .go{color:var(--accent)}
.pcard[aria-selected="true"]{border-color:var(--accent); background:var(--accent-wash)}
.pcard[aria-selected="true"] .go{color:var(--accent)}
.pcard[aria-selected="true"]::after{content:""; position:absolute; left:50%; bottom:-9px;
  width:16px; height:16px; margin-left:-8px; background:var(--accent-wash);
  border-right:1px solid var(--accent); border-bottom:1px solid var(--accent);
  border-bottom-right-radius:3px; transform:rotate(45deg)}
@media(max-width:860px){ .pcard[aria-selected="true"]::after{display:none} }

/* the panel each card opens. Without JavaScript every panel is simply shown. */
.panel{margin-top:34px}
.panel[hidden]{display:none}
.panel > h3{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.panel > h3 .chip{font-size:9.5px}

/* numbered steps — a rail down the left, a disc per step */
.steps{margin-top:26px; counter-reset:step; position:relative}
.steps::before{content:""; position:absolute; left:13px; top:14px; bottom:14px; width:1px;
  background:linear-gradient(180deg,var(--rule),transparent)}
.step{position:relative; padding:0 0 26px 46px}
.step:last-child{padding-bottom:0}
.step::before{counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:0; width:27px; height:27px; display:grid; place-items:center;
  border-radius:var(--r-pill); background:var(--accent-wash); color:var(--accent);
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent)}
.step h4{margin-bottom:5px; font-size:15.5px}
.step p{color:var(--ink-2); font-size:15px}
.step .code{margin-top:14px}

/* the distribution grid on the Linux page */
.distros{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  gap:18px; margin-top:28px}
.distro{border:1px solid var(--rule); border-radius:var(--r); background:var(--card);
  padding:20px; box-shadow:var(--shadow);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease), border-color .3s var(--ease)}
.distro:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift);
  border-color:color-mix(in srgb, var(--accent) 30%, var(--rule))}
.distro .top{display:flex; align-items:baseline; gap:10px; margin-bottom:4px}
.distro h3{font-size:16.5px}
.distro .fam{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-left:auto}
.distro .who{font-size:13.5px; color:var(--ink-3); margin-bottom:14px}
.distro .code{margin-top:0}
.distro .code pre{font-size:11.5px; padding:13px 14px; line-height:1.7}

/* ============================================================ thanks ======
   People, not logos. The monogram is drawn from the initials rather than pulled
   from an avatar service, so the page stays self-contained and nobody's face is
   hotlinked from a third party.
   ========================================================================= */
.people{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:22px; margin-top:32px}
.person{display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:start;
  padding:26px; border:1px solid var(--rule); border-radius:var(--r-lg); background:var(--card);
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease), border-color .3s var(--ease)}
.person:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift);
  border-color:color-mix(in srgb, var(--accent) 34%, var(--rule))}
.person .mono-badge{width:64px; height:64px; border-radius:var(--r-lg); display:grid;
  place-items:center; font-family:var(--mono); font-size:20px; font-weight:600;
  letter-spacing:.02em; color:var(--accent); background:var(--accent-wash);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); flex:none}
.person h3{font-size:19px; margin-bottom:2px}
.person .handle{font-family:var(--mono); font-size:12.5px; color:var(--ink-3);
  letter-spacing:.03em}
.person .role{margin-top:12px; display:flex; gap:7px; flex-wrap:wrap}
.person p{margin-top:14px; color:var(--ink-2); font-size:15px}

/* the smaller list of things this was built on */
.credits{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
  gap:14px; margin-top:28px}
.credit{padding:16px 18px; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--card); transition:border-color .25s var(--ease), transform .25s var(--ease-out)}
.credit:hover{border-color:color-mix(in srgb, var(--accent) 30%, var(--rule));
  transform:translateY(-2px)}
.credit .n{display:block; font-weight:600; font-size:15px; margin-bottom:3px}
.credit .w{font-size:13.5px; color:var(--ink-3); line-height:1.5}

/* ============================================================== MOTION ====
   Two layers. `.rv` is the IntersectionObserver baseline that works everywhere:
   each block fades up as it arrives, and siblings stagger a beat apart. On top of
   it, browsers with scroll-driven timelines get real scroll-LINKED motion, so a
   plate resolves in proportion to how far it has entered rather than firing a
   fixed-length transition once.

   The hero does not wait for a scroll — it plays on load, in reading order.
   ========================================================================= */
.rv{opacity:0; transform:translateY(22px);
  transition:opacity .72s var(--ease-out), transform .72s var(--ease-out);
  transition-delay:var(--d,0ms)}
.rv.in{opacity:1; transform:none}

@keyframes rise{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
@keyframes riseSoft{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes pop{from{opacity:0; transform:translateY(18px) scale(.97)} to{opacity:1; transform:none}}

/* hero entrance, in reading order */
.hero-anim .pill{animation:pop .7s var(--ease-out) both .05s}
.hero-anim .display{animation:rise .85s var(--ease-out) both .16s}
.hero-anim .stmt .lede{animation:rise .85s var(--ease-out) both .3s}
.hero-anim .stmt .acts{animation:rise .8s var(--ease-out) both .42s}
.hero-anim .cue{animation:riseSoft .8s var(--ease-out) both .8s}

@media(prefers-reduced-motion:no-preference){
  .cue i{animation:bob 2.6s var(--ease) infinite 1.4s}
  @keyframes bob{0%,100%{transform:rotate(45deg) translate(0,0)}
                 50%{transform:rotate(45deg) translate(3px,3px)}}
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* the reading hairline tracks the scrollbar itself */
    .prog{animation:grow linear; animation-timeline:scroll(root block)}
    @keyframes grow{to{transform:scaleX(1)}}

    /* imagery settles as it enters: slightly small, slightly low, slightly soft,
       and resolved exactly as it lands */
    .plate{animation:settle linear both; animation-timeline:view(); animation-range:entry 4% cover 32%}
    @keyframes settle{
      from{opacity:0; transform:translateY(38px) scale(.975)}
      to{opacity:1; transform:none}
    }
    /* a plate under the pointer must not be fighting its own scroll animation */
    .plate:hover{animation:none}

    .band.show h2,.band.show > .lede{animation:rise linear both;
      animation-timeline:view(); animation-range:entry 0% cover 26%}
  }
}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1 !important; transform:none !important; transition:none !important}
  .hero-bg .w,.stmt::before,.moonmark,.moonmark .bars rect{animation:none !important}
  .prog{display:none}
  *,*::before,*::after{animation:none !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}


/* Download links in the install tables. The filename is the link — it is the thing
   people match against what lands in their downloads folder, so making them read a
   generic "Download" and guess is a step backwards. */
.grid a.dl{font-family:var(--mono); font-size:12px; color:var(--accent);
  text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.grid a.dl:hover{border-bottom-color:var(--accent)}
.grid .sz{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-left:9px;
  font-variant-numeric:tabular-nums; white-space:nowrap}


/* The beta feature grid. Cards here rather than a table because these are genuinely
   parallel objects — eight independent things, none of which is a row of the others. */
/* Feature cards.
   These were one hairline grid: a single bordered box with 1px gaps showing through as
   rules. It read as a table someone had to get through, and it sat oddly beside the
   figure plates, which are the page's other way of showing a thing. Each is its own
   card now, with the plate's chrome — a header strip, a border, a shadow and the same
   lift on hover — so a feature and a screenshot look like the same kind of object. */
.feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:18px; margin-top:26px}
.feat{display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease),
             border-color .45s var(--ease)}
.feat:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift);
  border-color:color-mix(in srgb, var(--accent) 30%, var(--rule))}
/* the strip the chip lives in — the plates' `.pbar`, doing the same job */
.feat .fbar{display:flex; align-items:center; padding:9px 14px;
  border-bottom:1px solid var(--rule); background:var(--sunken)}
.feat h3{font-size:15px; font-weight:600; margin:0; padding:16px 18px 8px; color:var(--ink)}
.feat p{font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:0;
  padding:0 18px 20px}
.feat .chip{margin:0}
@media(prefers-reduced-motion:reduce){ .feat{transition:none} .feat:hover{transform:none} }