/* Visa Grep — E12's world, E13's pages. One hand-written stylesheet, no
   build step; the only script is site.js, the light/dark switch and the copy buttons. A light-first product surface, the accent spent
   where it means something; dark mode composed on its own ladder. Nothing
   conveys meaning by colour alone, and every page still reads with this file
   deleted. Tokens, ratios, motion and the icon rule: DESIGN.md. */

/* ------------------------------------------------------------- 0. the face
   Geist, SIL OFL 1.1, one variable file served from this origin: the CSP
   loads no face from anywhere else. Provenance: site_assets/fonts/SOURCE.txt.
   The fallbacks carry Geist's x-height (.530), ascent and descent, so `swap`
   exchanges the glyphs without moving a line. */

@font-face {
  font-family: "Geist";
  src: url(/fonts/geist-variable.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Helvetica Neue"), local("Helvetica");
  size-adjust: 102.5%; ascent-override: 98.0%; descent-override: 28.8%; line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Segoe UI");
  size-adjust: 106.0%; ascent-override: 94.8%; descent-override: 27.8%; line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Roboto");
  size-adjust: 100.3%; ascent-override: 100.2%; descent-override: 29.4%; line-gap-override: 0%;
}

/* ---------------------------------------------------------- 1. primitives */

:root {
  /* Palette — light, the primary. Every ratio is in DESIGN.md's table:
     reading text clears 7:1 everywhere, the hero mesh included; the button's
     label and the accent as a mark clear AA, on purpose. */
  --bg: #f4f6fc;            /* page ground, a cool near-white */
  --surface: #ffffff;       /* cards, tables, chips, the header */
  --raise: #eceff7;         /* thead, value pills, row hover, section bands */
  /* A tint, not a colour, so the scrolled-table edge cue reads through it.
     Composites to #f8f8f9 over --surface. */
  --band: rgb(18 22 31 / .028);
  --fg: #12161f;            /* 16.75:1 on bg */
  --ink-2: #2f3646;         /* 11.19:1 on bg, 7.11:1 on the hero mesh at its darkest */
  --dim: #454d5c;           /*  7.87:1 on bg — secondary text AND chart ink */
  --link: #3a31b8;          /*  8.41:1 on bg — link text, and only text */
  --accent: #4b3fe4;        /* fills: the meter, the bars, the button, the mark */
  --accent-deep: #3226b4;   /* the far stop of the bar gradient */
  --accent-lift: #6f64ef;   /* a bar under the pointer */
  --accent-weak: #e5e4fb;   /* the meter track, chip fills, <mark> */
  --lv4: var(--accent-deep); /* the wage-level ramp's far end: darkest on light */
  --on-accent: #ffffff;     /*  6.71:1 on accent — the button's own label */
  --danger: #b42318;        /*  6.5:1 on surface — the delete button's word, and only that */
  --rule: #dce2ec;          /* hairlines only; never the sole carrier of meaning */
  --grid: rgb(18 22 31 / .07);   /* the hero's ruled ground */

  /* The hero mesh. Three washes, anchored apart so their peaks never stack
     under the reading column, and no image anywhere: the CSP forbids a
     `data:` URI as firmly as it forbids a remote one. */
  --mesh-1: rgb(75 63 228 / .20);
  --mesh-2: rgb(56 189 248 / .12);
  --mesh-3: rgb(139 92 246 / .10);

  /* The footer is the one dark region of a light page: a deep indigo-black
     band that ends every page, with its own ink. */
  --foot: #111124;
  --foot-fg: #eef0fa;       /* 16.36:1 on foot */
  --foot-dim: #b9bedd;      /* 10.16:1 on foot */
  --foot-link: #a9aaff;     /*  8.75:1 on foot */
  --foot-surface: #1b1b35;  /* the disclaimer's own plate inside the band */
  --foot-rule: #2a2a48;

  /* /api/'s code panels: one dark surface in both themes, the docs
     convention, on the footer's ladder. Ratios on --code-bg. */
  --code-bg: #111124;
  --code-bar: #1b1b35;      /* a panel's title bar and tab strip */
  --code-rule: #2a2a48;
  --code-fg: #eef0fa;       /* 16.36:1 - text, numbers, true/false/null */
  --code-dim: #9ca3c9;      /*  7.52:1 - punctuation, a bar's words */
  --code-key: #b3afff;      /*  9.29:1 - keys: the accent's light tint */
  --code-str: #7dd3fc;      /* 11.15:1 - strings: the mesh's sky, lightened */

  /* Elevation. Every shadow carries an offset and a soft blur: a zero-offset
     halo is decoration, and these say "this sits above the page". */
  --sh-1: 0 1px 2px rgb(18 22 31 / 6%), 0 1px 3px rgb(18 22 31 / 7%);
  --sh-2: 0 2px 4px rgb(18 22 31 / 5%), 0 12px 28px -8px rgb(18 22 31 / 16%);
  --sh-3: 0 4px 10px rgb(18 22 31 / 6%), 0 24px 48px -14px rgb(18 22 31 / 24%);
  --edge: rgb(18 22 31 / 18%);   /* the shadow a scrolled table casts on itself */

  /* Spacing — 4px base (impeccable/layout.md: a 4-unit base gives the middle
     steps an 8-only scale misses). */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem;  --s10: 2.5rem;
  --s12: 3rem;   --s16: 4rem; --s20: 5rem;  --s24: 6rem;

  /* Type. Two fluid roles — the landing headline and a record page's name,
     both of which are the page — and a fixed ramp for everything else,
     because product UI wants a heading that is the same size wherever it
     appears (impeccable/operate.md). */
  --t-display: clamp(2.25rem, 1.2rem + 4.5vw, 4.25rem);
  --t-title: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  --t-score: clamp(3.25rem, 2.2rem + 3vw, 4.5rem);
  --t-xs: .75rem; --t-sm: .875rem; --t-legal: .9375rem; --t-base: 1rem;
  --t-md: 1.0625rem; --t-lg: 1.25rem; --t-xl: 1.5rem; --t-2xl: 2rem;

  --sans: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  /* Monospace is a row address, never a costume: the citation line, the
     SHA-256 on /policy/ and a chart's `n/p`. A system stack, so it is free. */
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  --r-mark: 4px;            /* the marks smaller than a corner: segments, bars, <mark> */
  --r-sm: 10px;             /* controls */
  --r-md: 14px;             /* cards, chips, table shells */
  --r-lg: 18px;             /* raised surfaces */
  --r-xl: 22px;             /* the hero box */
  --r-pill: 999px;
  --fast: 140ms;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --wrap: 68rem;            /* the measured column; prose inside it is narrower still */
  --head: 0rem;             /* the sticky header's height, once it is sticky */

  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Composed, not inverted: `bg -> surface -> raise` steps UP in lightness so
   the surface ladder carries the elevation shadows cannot, and the footer
   stops being the darkest thing on the page and becomes a raised one. */
/* The system is dark and the reader has not chosen light with the switch. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0e14;
    --surface: #141922;
    --raise: #1c222e;
    --band: rgb(233 237 244 / .035);   /* #1b2029 over --surface */
    --fg: #e9edf4;          /* 16.45:1 */
    --ink-2: #c9d2e0;       /* 12.67:1 on bg, 7.58:1 on the hero mesh at its darkest */
    --dim: #a2aec0;         /*  8.60:1 */
    --link: #a9aaff;        /*  9.09:1 */
    --accent: #8c87fa;
    --accent-deep: #5b56d6;
    --accent-lift: #b3afff;
    --accent-weak: #26263f;
    --lv4: var(--accent-lift);  /* ... and lightest on dark */
    --on-accent: #0b0e14;   /*  6.40:1 on accent */
    --danger: #f97066;
    --rule: #28303d;
    --grid: rgb(233 237 244 / .06);
    --mesh-1: rgb(140 135 250 / .20);
    --mesh-2: rgb(56 189 248 / .08);
    --mesh-3: rgb(167 139 250 / .06);
    --foot: #141922;
    --foot-fg: #e9edf4;     /* 15.01:1 */
    --foot-dim: #a2aec0;    /*  7.85:1 */
    --foot-link: #a9aaff;   /*  8.29:1 */
    --foot-surface: #1c222e;
    --foot-rule: #28303d;
    --sh-1: 0 1px 2px rgb(0 0 0 / 40%);
    --sh-2: 0 2px 4px rgb(0 0 0 / 40%), 0 12px 28px -10px rgb(0 0 0 / 60%);
    --sh-3: 0 4px 10px rgb(0 0 0 / 44%), 0 24px 48px -16px rgb(0 0 0 / 70%);
    --edge: rgb(0 0 0 / 60%);
  }
  /* typeset.md: compensate light-on-dark on all three axes. */
  :root:not([data-theme="light"]) body { letter-spacing: .005em; }
  :root:not([data-theme="light"]) :is(h1, h2, h3, .brand, .fbrand, .score-num, .disclaimer p:first-of-type) {
    font-weight: 660;
  }
}
/* The reader chose dark with the switch: the same palette, the same
   compensation, whatever the system says. `tests/test_site.py` holds the two
   blocks to identical declarations. */
:root[data-theme="dark"] {
  --bg: #0b0e14;
  --surface: #141922;
  --raise: #1c222e;
  --band: rgb(233 237 244 / .035);
  --fg: #e9edf4;
  --ink-2: #c9d2e0;
  --dim: #a2aec0;
  --link: #a9aaff;
  --accent: #8c87fa;
  --accent-deep: #5b56d6;
  --accent-lift: #b3afff;
  --accent-weak: #26263f;
  --lv4: var(--accent-lift);
  --on-accent: #0b0e14;
  --danger: #f97066;
  --rule: #28303d;
  --grid: rgb(233 237 244 / .06);
  --mesh-1: rgb(140 135 250 / .20);
  --mesh-2: rgb(56 189 248 / .08);
  --mesh-3: rgb(167 139 250 / .06);
  --foot: #141922;
  --foot-fg: #e9edf4;
  --foot-dim: #a2aec0;
  --foot-link: #a9aaff;
  --foot-surface: #1c222e;
  --foot-rule: #28303d;
  --sh-1: 0 1px 2px rgb(0 0 0 / 40%);
  --sh-2: 0 2px 4px rgb(0 0 0 / 40%), 0 12px 28px -10px rgb(0 0 0 / 60%);
  --sh-3: 0 4px 10px rgb(0 0 0 / 44%), 0 24px 48px -16px rgb(0 0 0 / 70%);
  --edge: rgb(0 0 0 / 60%);
}
:root[data-theme="dark"] body { letter-spacing: .005em; }
:root[data-theme="dark"] :is(h1, h2, h3, .brand, .fbrand, .score-num, .disclaimer p:first-of-type) {
  font-weight: 660;
}

/* ------------------------------------------------------- 2. browser surfaces
   The parts nobody draws still carry the design (impeccable/craft-floor.md). */

::selection { background: var(--accent-weak); color: var(--fg); }
:root { scrollbar-color: var(--rule) transparent; accent-color: var(--accent); }
input { caret-color: var(--accent); }

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--fg);
  font: var(--t-base)/1.6 var(--sans);
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
/* No radius here: the outline already follows the element's own corners, and
   naming one would square off every focused button and card. */
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--sh-3);
  display: inline-block; left: var(--s2); padding: var(--s2) var(--s3);
  position: absolute; top: var(--s2); z-index: 20;
}
.vh {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/* An anchor lands under a sticky header otherwise. */
h2[id], h3[id] { scroll-margin-top: calc(var(--head) + 3.5rem); }

/* --------------------------------------------------------------- 3. the shell
   Three regions and one measured column. `.band` is full-bleed so a page can
   paint a ground behind its opening without a second wrapper; `.wrap` inside
   it keeps the words on the same column as everything below. */

.wrap { margin: 0 auto; max-width: var(--wrap); padding: 0 var(--s5); }

header.site {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 10;
}
/* The one earned use of glass on this site: a header that stays put over
   scrolling content, with a solid ground underneath it for every engine that
   does not composite one. */
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
  header.site {
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
  }
}
header.site .wrap {
  align-items: center; display: flex; flex-wrap: wrap;
  gap: var(--s3) var(--s5); min-height: 3.75rem;
  padding-bottom: var(--s2); padding-top: var(--s2);
}
.brand, .fbrand {
  align-items: center; color: var(--fg); display: inline-flex; font-size: var(--t-md);
  font-weight: 640; gap: var(--s2); letter-spacing: -.02em; text-decoration: none;
}
.brand:hover { text-decoration: underline; text-underline-offset: 4px; }
/* One drawn mark, one stroke weight, inheriting the accent — and a plain
   outline when this file is gone, which a filled tile would not be. */
.mark { color: var(--accent); flex: none; }
.tag { color: var(--dim); font-size: var(--t-sm); margin: 0; }

nav.top { display: flex; gap: var(--s2); margin-left: auto; }
nav.top a, a.acct {
  border-radius: var(--r-sm); color: var(--dim); font-size: var(--t-sm); font-weight: 520;
  padding: var(--s2) var(--s3); text-decoration: none;
  transition: background-color var(--fast) ease, color var(--fast) ease;
}
nav.top a:hover, a.acct:hover { background: var(--raise); color: var(--fg); }
/* The way to the account page stands a little apart from the sections. */
a.acct { border: 1px solid var(--rule); flex: none; }

/* The light/dark switch: an icon button the size of a nav link, the moon on
   a light page and the sun on a dark one, its name in `.vh` text. `hidden`
   until site.js shows it, and a class that sets `display` would otherwise
   beat the browser's own `[hidden]` rule. */
.theme {
  align-items: center; background: none; border: 0; border-radius: var(--r-sm);
  color: var(--dim); cursor: pointer; display: inline-flex; flex: none;
  height: 2.25rem; justify-content: center; padding: 0; width: 2.25rem;
  transition: background-color var(--fast) ease, color var(--fast) ease;
}
.theme:hover { background: var(--raise); color: var(--fg); }
.theme[hidden], .theme .sun, :root[data-theme="dark"] .theme .moon { display: none; }
:root[data-theme="dark"] .theme .sun { display: block; }

main { display: block; }
.band {
  background: var(--raise);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s10);
  padding-top: var(--s10);
  position: relative;
}
main > .wrap { padding-bottom: var(--s16); padding-top: var(--s10); }
/* The hero band already ends in five rem of quiet; a second helping under it
   is the hole that made the first pass read as an unfinished page. */
main.home > .wrap { padding-top: 0; }

/* ---------------------------------------------------------- 4. the hero
   The landing page's band is the one composed image on the site, and it is
   made of gradients: a three-wash mesh anchored away from the reading column,
   and a ruled ground masked out before it reaches the text. */

main.home > .band {
  background: none;
  border-bottom: 0;
  overflow: hidden;
  padding-bottom: var(--s12);
  padding-top: var(--s12);
  text-align: center;
}
main.home > .band::before, main.home > .band::after {
  content: ""; inset: 0; pointer-events: none; position: absolute; z-index: -1;
}
/* The three washes fade out together before the reading column reaches the
   box, so the composition sits behind the headline and the ground under the
   hint and the strip is the page's own. Measured at full strength all the
   same: DESIGN.md's table gives the ratios on the darkest pixel this can
   make, and every one of them clears 7:1. */
main.home > .band::before {
  background:
    radial-gradient(52rem 30rem at 50% -4rem, var(--mesh-1), transparent 70%),
    radial-gradient(34rem 24rem at 6% 0, var(--mesh-2), transparent 68%),
    radial-gradient(32rem 22rem at 94% 4rem, var(--mesh-3), transparent 66%);
  mask-image: linear-gradient(to bottom, #000 26%, transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, #000 26%, transparent 88%);
}
main.home > .band::after {
  background:
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 4.5rem),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 4.5rem);
  mask-image: radial-gradient(56% 70% at 50% 8%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(56% 70% at 50% 8%, #000, transparent 72%);
}
main.home h1 {
  font-size: var(--t-display); font-weight: 700; letter-spacing: -.032em;
  line-height: 1.03; margin: 0 auto var(--s6); max-width: 18ch;
}
main.home .lead {
  color: var(--ink-2); font-size: var(--t-lg); line-height: 1.5;
  margin: 0 auto var(--s8); max-width: 56ch;
}

/* The hero object. One raised field on a white surface: the drawn magnifier
   inside it on the left, the button inside it on the right, and the hint
   under it. Everything else on this page is quieter than this. */
.hero { margin: 0 auto; max-width: 40rem; }
.hero form.search { text-align: left; }
.hero form.search label {
  color: var(--dim); display: block; font-size: var(--t-xs); font-weight: 560;
  letter-spacing: .06em; margin-bottom: var(--s3); text-align: center;
}
.hero form.search .row {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  flex-wrap: nowrap;
  gap: 0;
  padding: var(--s2);
  transition: border-color var(--fast) ease, box-shadow var(--fast) ease;
}
.hero form.search .row:focus-within {
  border-color: var(--accent);
  box-shadow: var(--sh-3), 0 0 0 3px var(--accent-weak);
}
.hero form.search .ico { color: var(--dim); flex: none; margin: 0 var(--s1) 0 var(--s3); }
.hero form.search input {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  font-size: var(--t-md); min-height: 3rem; padding: 0 var(--s3);
}
.hero form.search input:focus { box-shadow: none; }
.hero form.search button {
  border-radius: calc(var(--r-xl) - var(--s2)); font-size: var(--t-md);
  min-height: 3rem; padding: 0 var(--s6);
}
.hero .hint { margin: var(--s4) var(--s2) 0; text-align: center; }

/* Names to try, as small pills under the box: examples, never a ranking. */
.try {
  align-items: center; display: flex; flex-wrap: wrap; gap: var(--s2);
  justify-content: center; margin: var(--s5) 0 0;
}
.try p { color: var(--dim); font-size: var(--t-sm); margin: 0; }
.try ul {
  display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; list-style: none;
  margin: 0; padding: 0;
}
.try a {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-pill);
  color: var(--fg); display: inline-block; font-size: var(--t-sm); font-weight: 520;
  max-width: 100%; overflow: hidden; padding: var(--s1) var(--s3); text-decoration: none;
  text-overflow: ellipsis; transition: border-color var(--fast) ease; white-space: nowrap;
}
.try li { max-width: 100%; }
.try a:hover { border-color: var(--accent); }

/* The proof strip: the store's own counts and the two rules it keeps. */
.proof {
  display: grid; gap: var(--s4) var(--s5); grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  list-style: none; margin: var(--s10) auto 0; padding: 0; text-align: left;
}
.proof li {
  align-items: flex-start; color: var(--ink-2); display: flex; font-size: var(--t-sm);
  gap: var(--s3); line-height: 1.45;
}
.proof .ico { color: var(--accent); flex: none; margin-top: .0625rem; }

/* --------------------------------------------------------------- 5. search
   The primary control. A plain GET form: it works with JavaScript disabled,
   because there is none. */

form.search { margin: 0; }
form.search .row, form.act .row {
  align-items: center; display: flex; flex-wrap: wrap; gap: var(--s2);
}
form.search label, form.act label {
  display: block; font-size: var(--t-sm); font-weight: 540; margin-bottom: var(--s2);
}
form.search input, form.act input {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--fg);
  flex: 1 1 10rem;
  font: var(--t-base)/1.4 var(--sans);
  min-height: 2.75rem;
  min-width: 0;
  padding: var(--s2) var(--s3);
  transition: border-color var(--fast) ease, box-shadow var(--fast) ease;
}
form.search input::placeholder, form.act input::placeholder { color: var(--dim); opacity: 1; }
form.search input:hover, form.act input:hover { border-color: var(--dim); }
form.search input:focus, form.act input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak);
}
form.search button, form.act button, .btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--on-accent);
  cursor: pointer;
  flex: 0 0 auto;
  font: 560 var(--t-base)/1.4 var(--sans);
  min-height: 2.75rem;
  padding: var(--s2) var(--s5);
  transition: background-color var(--fast) ease, border-color var(--fast) ease;
}
form.search button:hover, form.act button:hover, .btn:hover {
  background: color-mix(in srgb, var(--accent) 86%, var(--fg));
  border-color: color-mix(in srgb, var(--accent) 86%, var(--fg));
}
form.search button:active, form.act button:active, .btn:active {
  background: color-mix(in srgb, var(--accent) 74%, var(--fg));
}
form.search .hint { color: var(--dim); font-size: var(--t-sm); margin: var(--s3) 0 0; }

/* The compact one beside the brand on every page but the landing: the same
   field, drawn as one pill so the header stays a single line. */
header.site form.search { flex: 1 1 14rem; max-width: 30rem; }
header.site form.search .row {
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-pill);
  flex-wrap: nowrap; gap: 0; padding: 3px;
  transition: border-color var(--fast) ease, box-shadow var(--fast) ease;
}
header.site form.search .row:focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak);
}
header.site form.search .ico { color: var(--dim); flex: none; margin-left: var(--s3); }
header.site form.search input {
  background: none; border: 0; font-size: var(--t-sm); min-height: 2rem; padding: 0 var(--s2);
}
header.site form.search input:focus { box-shadow: none; }
header.site form.search button {
  border-radius: var(--r-pill); font-size: var(--t-sm); min-height: 2rem; padding: 0 var(--s4);
}

/* ------------------------------------------------------------ 6. typography */

h1 {
  font-size: var(--t-title); font-weight: 700; letter-spacing: -.026em; line-height: 1.1;
  margin: 0; text-wrap: balance;
}
h2 {
  font-size: var(--t-xl); font-weight: 640; letter-spacing: -.018em; line-height: 1.2;
  margin: var(--s16) 0 var(--s4); text-wrap: balance;
}
section:first-child > h2, section:first-child > .plate > h2 { margin-top: 0; }
h3 { font-size: var(--t-md); font-weight: 640; margin: var(--s8) 0 var(--s3); }
p { margin: 0 0 var(--s3); max-width: 72ch; }
section { margin-bottom: var(--s10); }
b, strong { font-weight: 640; }

.sub, .note, .gen, .vintage, .dim { color: var(--dim); font-size: var(--t-sm); }
.sub { margin-bottom: var(--s5); max-width: 70ch; }
.strong { color: var(--fg); font-weight: 560; }

/* A list of statements in prose rather than a menu: a bullet, reading size. */
ul.plain, ol.plain, ul.sources, ul.have {
  margin: 0 0 var(--s4); max-width: 72ch; padding-left: 1.25rem;
}
ul.plain li, ol.plain li, ul.sources li, ul.have li { margin-bottom: var(--s2); }
ul.plain li::marker, ol.plain li::marker, ul.sources li::marker, ul.have li::marker {
  color: var(--dim);
}

/* A closed disclosure: the store's own caveat, a file's details, the row
   addresses. The summary is a control, so it gets a control's target. */
details.more, details.refs { margin: var(--s2) 0 0; }
details.more > summary, details.refs > summary, details.full > summary {
  align-items: center; color: var(--link); cursor: pointer; display: inline-flex;
  font-size: var(--t-sm); font-weight: 560; gap: var(--s1); list-style: none;
  min-height: 2.75rem;
}
details > summary::-webkit-details-marker { display: none; }
details > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.chev { flex: none; transition: transform var(--fast) var(--ease); }
details[open] > summary .chev { transform: rotate(180deg); }
details.more .body, details.refs .body, details.full .body {
  color: var(--dim); font-size: var(--t-sm); margin: 0 0 var(--s3); max-width: 72ch;
}

/* Monospace is earned here: a row address, not a costume. */
ul.cite {
  color: var(--dim); columns: 2 18rem; column-gap: var(--s8); font-family: var(--mono);
  font-size: var(--t-xs); list-style: none; margin: 0; overflow-wrap: anywhere; padding: 0;
}
ul.cite li { break-inside: avoid; padding: 2px 0; }

/* --------------------------------------------- 7. a record page's own header
   The name, what the page is, and who this filer is as tokens under it. */

main.rec h1 { margin-bottom: var(--s2); }
main.rec > .band .sub { color: var(--ink-2); font-size: var(--t-md); margin: 0 0 var(--s5); }
main.rec > .band .alias { color: var(--dim); font-size: var(--t-sm); margin: var(--s3) 0 0; }
.ident { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; max-width: none; }
.tok {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-pill);
  color: var(--fg); font-size: var(--t-sm); font-weight: 520; padding: var(--s1) var(--s3);
}

/* The answer and the score, side by side once there is room for both. */
.summary { align-items: start; display: grid; gap: var(--s5); margin-bottom: var(--s10); }
.summary > section { margin: 0; }

.answer {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: var(--s6);
}
.answer h2 {
  align-items: flex-start; display: flex; font-size: var(--t-xl); gap: var(--s3);
  margin: 0 0 var(--s3);
}
.answer h2 .ico {
  background: var(--accent-weak); border-radius: var(--r-pill); color: var(--link);
  flex: none; height: 2.25rem; padding: .375rem; width: 2.25rem;
}
.answer .detail { color: var(--ink-2); font-size: var(--t-md); margin: 0 0 var(--s6); }
.answer h3 {
  border-top: 1px solid var(--rule); font-size: var(--t-base); margin: 0; padding-top: var(--s5);
}
.answer .note { margin: var(--s5) 0 0; }

/* At a glance: label and value pairs, compact - a list to read, not tiles. */
.glance {
  display: grid; gap: var(--s4) var(--s6); grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--s4) 0 0;
}
.glance > div { min-width: 0; }
.glance dt { color: var(--dim); font-size: var(--t-sm); line-height: 1.4; }
.glance dd { margin: var(--s1) 0 0; }
.glance dd b {
  display: block; font-size: var(--t-lg); font-variant-numeric: tabular-nums;
  letter-spacing: -.012em; line-height: 1.3;
}
.glance dd span { color: var(--dim); display: block; font-size: var(--t-sm); }

/* The region links, stuck under the header once the reader is past the top. */
.onthis {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: 0 0 var(--s4);
  padding: var(--s3) 0;
  position: sticky; top: var(--head); z-index: 5;
}
.onthis a, .toc a {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-pill);
  color: var(--dim); font-size: var(--t-sm); font-weight: 520; padding: var(--s1) var(--s3);
  text-decoration: none; transition: border-color var(--fast) ease, color var(--fast) ease;
}
.onthis a:hover, .toc a:hover { border-color: var(--accent); color: var(--fg); }

/* A record page is long and dense, so its sections are divided by a rule
   and a measured interval rather than by the landing page's open spacing. */
main.rec .summary ~ section { border-top: 1px solid var(--rule); margin: 0; padding: var(--s8) 0; }
main.rec .summary ~ section > h2 { margin-top: 0; }
main.rec > .wrap > section:first-of-type { border-top: 0; padding-top: var(--s4); }

/* --------------------------------------------------------------- 8. tables
   Every table sits in a rounded shell it cannot escape, so a wide table
   scrolls inside its own box rather than pushing the page sideways. */

.scroll {
  background:
    linear-gradient(to right, var(--surface), transparent) 0 0 / 24px 100% no-repeat,
    linear-gradient(to left, var(--surface), transparent) 100% 0 / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, var(--edge), transparent) 0 0 / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, var(--edge), transparent) 100% 0 / 12px 100%
      no-repeat,
    var(--surface);
  /* The covers travel with the content, the shadows stay with the box: an
     edge shows a shadow only where something is hidden past it. */
  background-attachment: local, local, scroll, scroll;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  /* A `.vh` label in a cell is absolutely placed: without a containing
     block in here it escapes the clip and pushes the page sideways. */
  position: relative;
}
table {
  border-collapse: collapse; font-variant-numeric: tabular-nums;
  text-align: left; width: 100%;
}
caption { text-align: left; }
th, td { padding: var(--s3) var(--s4); text-align: left; vertical-align: top; }
thead th, thead td { background: var(--surface); }
thead th {
  color: var(--dim); font-size: var(--t-xs); font-weight: 560; letter-spacing: .04em;
  text-transform: uppercase; vertical-align: bottom;
}
/* A two-row head: only the last row closes the band, and the group names
   read as names rather than as column labels. */
thead tr:last-child th, thead tr:last-child td { border-bottom: 1px solid var(--rule); }
thead th[scope="colgroup"] {
  border-bottom: 1px solid var(--rule); color: var(--fg); font-weight: 640; letter-spacing: .02em;
  text-align: center;
}
tbody th, tbody td { border-top: 1px solid var(--rule); font-size: var(--t-sm); }
tbody tr:first-child th, tbody tr:first-child td { border-top: 0; }
/* A tint, so the edge shadow under the table reads through it as one fade. */
tbody tr:nth-child(even) { background: var(--band); }
tbody tr:hover { background: var(--raise); }
tbody th[scope="row"] { font-weight: 560; }
th.n, td.n { text-align: right; white-space: nowrap; }
td.dim { font-style: normal; }
td .of, th .gloss, th .code { color: var(--dim); font-weight: 400; }
td .of { font-size: var(--t-xs); }
th .gloss { display: block; font-size: var(--t-xs); margin-top: 2px; }
th .code { font-size: var(--t-xs); white-space: nowrap; }

/* The year tables pin the fiscal year: scrolled sideways, a row of numbers
   with no year is not a row of anything. A sticky cell must be opaque. */
.dol tbody th, .uscis tbody th, .salaries tbody th, .perm tbody th { white-space: nowrap; }
:is(.dol, .uscis, .salaries, .perm) thead tr:last-child th:first-child,
:is(.dol, .uscis, .salaries, .perm) tbody th[scope="row"] {
  background: var(--surface); box-shadow: 1px 0 0 var(--rule);
  left: 0; position: sticky; z-index: 1;
}
:is(.dol, .uscis, .salaries, .perm) tbody tr:nth-child(even) th[scope="row"] {
  background: linear-gradient(var(--band), var(--band)), var(--surface);
}
:is(.dol, .uscis, .salaries, .perm) tbody tr:hover th[scope="row"] { background: var(--raise); }
/* The one vertical rule on the site: between USCIS's two kinds of petition. */
.uscis thead tr:first-child th:last-child,
.uscis tbody td:nth-child(5), .uscis thead tr:last-child th:nth-child(5) {
  border-left: 1px solid var(--rule);
}
/* Tables whose first column is words: a floor, so `.scroll` scrolls them on
   a phone instead of squeezing a job title to a word a line. */
.titles, .everify { min-width: 34rem; }
.rubric { min-width: 30rem; }
.rubric td:last-child { color: var(--dim); min-width: 18rem; }

.scroll + p { margin-top: var(--s4); }

/* A table and the words beside it, two to a row once there is room. */
.pair { display: grid; gap: 0 var(--s8); }
.pair > div { min-width: 0; }

/* --------------------------------------------------- 9. the score, segmented
   Integers only (README), so one segment per point: a continuous bar would
   draw 6.0/10 as a length. aria-hidden beside the number it repeats. */

.plate {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); padding: var(--s6);
}
.plate h2 { font-size: var(--t-md); letter-spacing: 0; margin: 0 0 var(--s4); }
.plate .sub { margin-bottom: 0; }
.plate .note { margin: var(--s4) 0 0; }
.more-link { font-size: var(--t-sm); font-weight: 560; margin: var(--s4) 0 0; }
.score-line {
  align-items: center; display: flex; flex-wrap: wrap;
  gap: var(--s3) var(--s6); margin-bottom: var(--s2);
}
.score-num {
  font-size: var(--t-score); font-variant-numeric: tabular-nums; font-weight: 680;
  letter-spacing: -.04em; line-height: .9;
}
.score-num .of { color: var(--dim); font-size: var(--t-2xl); font-weight: 500; }

.segs { display: inline-flex; gap: 3px; }
.segs i {
  background: var(--accent-weak); border-radius: var(--r-mark); display: block;
  height: .5rem; width: .4375rem;
}
.segs i.on { background: var(--accent); }
.segs.big { display: flex; flex: 1 1 12rem; gap: 4px; max-width: 24rem; }
.segs.big i {
  background: var(--accent-weak); border-radius: 5px; flex: 1 1 0; height: 1.5rem; width: auto;
}
.segs.big i.on { background: linear-gradient(var(--accent-lift), var(--accent-deep)); }

/* The four parts: the name, the points with their own segments, and the
   sentence that says what the points were read off. */
.parts { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.parts li { border-top: 1px solid var(--rule); padding: var(--s3) 0; }
.parts .ph { align-items: center; display: flex; gap: var(--s3); justify-content: space-between; }
.parts .pn { font-weight: 600; }
.parts .pts {
  align-items: center; display: inline-flex; font-variant-numeric: tabular-nums;
  font-weight: 600; gap: var(--s2); white-space: nowrap;
}
.parts .pts.unrated { color: var(--dim); font-size: var(--t-sm); font-weight: 520; }
.parts p { color: var(--dim); font-size: var(--t-sm); margin: var(--s1) 0 0; }
.plate p.have { font-weight: 600; margin: var(--s4) 0 var(--s2); }
.plate ul.have { color: var(--ink-2); font-size: var(--t-sm); }

/* ------------------------------------------------------------ 10. the charts
   One per agency, each scaled to its OWN maximum and saying so. The table
   above carries every number; this carries the shape. */

.viz { display: grid; gap: var(--s5); margin: var(--s5) 0 0; }
.viz .notes > p:last-child { margin-bottom: 0; }
.defs { display: block; height: 0; width: 0; }
#barfill .s0 { stop-color: var(--accent-lift); }
#barfill .s1 { stop-color: var(--accent-deep); }
.viz figure {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: var(--sh-1); margin: 0; padding: var(--s5);
}
.viz svg { color: var(--dim); display: block; height: auto; max-height: 11rem; width: 100%; }
.viz + .note { margin-top: var(--s4); }
.viz .bar { fill: url(#barfill) var(--accent); rx: var(--r-mark); }
.viz .bar:hover { fill: var(--accent-lift); }
/* One label size, in viewBox units rather than screen pixels: the SVG is
   `width: 100%`, so what these render at is the column's own scale. */
.viz .lbl { fill: currentColor; font-family: var(--sans); font-size: 11px; }
.viz figcaption {
  color: var(--dim); font-size: var(--t-sm); line-height: 1.5; margin-top: var(--s4);
}
.viz figcaption b { color: var(--fg); font-weight: 640; }

/* The wage-level mix: an ordinal ramp in the one accent, every share printed
   beside its swatch, so the bar is the shape and never the value. */
.lvmix h3 { margin-top: var(--s8); }
.lvbar {
  border-radius: var(--r-pill); display: block; height: .875rem; margin: 0 0 var(--s4);
  overflow: hidden; width: 100%;
}
.lvbar rect { stroke: var(--bg); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.l1 { background: color-mix(in srgb, var(--accent) 34%, var(--surface)); }
.l2 { background: color-mix(in srgb, var(--accent) 62%, var(--surface)); }
.l3 { background: var(--accent); }
.l4 { background: var(--lv4); }
rect.l1 { fill: color-mix(in srgb, var(--accent) 34%, var(--surface)); }
rect.l2 { fill: color-mix(in srgb, var(--accent) 62%, var(--surface)); }
rect.l3 { fill: var(--accent); }
rect.l4 { fill: var(--lv4); }
.levels {
  display: grid; gap: var(--s2) var(--s6); list-style: none; margin: 0 0 var(--s3); padding: 0;
}
.levels li {
  align-items: baseline; display: grid; font-size: var(--t-sm); gap: var(--s2);
  grid-template-columns: auto 1fr auto 3rem;
}
.levels .sw { border-radius: var(--r-mark); display: inline-block; height: .75rem; width: .75rem; }
.levels .lv { font-weight: 560; }
.levels .ct, .levels .pc { font-variant-numeric: tabular-nums; text-align: right; }
.levels .pc { color: var(--dim); }

/* ------------------------------------------ 11. facts, company, E-Verify */

/* Label beside value once there is room, one above the other before that. */
dl.facts, dl.company, dl.flags, dl.doc { margin: 0; }
dl.facts > div, dl.flags > div {
  border-top: 1px solid var(--rule); display: grid; gap: var(--s1) var(--s8);
  padding: var(--s5) 0;
}
dl.facts > div:first-child, dl.flags > div:first-child { border-top: 0; padding-top: 0; }
dl.facts dt, dl.flags dt { font-weight: 600; }
dl.facts dd, dl.flags dd { margin: 0; }
dl.facts dd > b { display: block; font-size: var(--t-md); margin-bottom: var(--s1); }
dl.facts dd > p, dl.flags dd > p { color: var(--ink-2); margin-bottom: 0; }

dl.company, dl.doc {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: var(--sh-1); overflow: hidden;
}
dl.company > div, dl.doc > div {
  border-top: 1px solid var(--rule); display: grid; gap: 2px var(--s6);
  padding: var(--s3) var(--s4);
}
dl.company > div:first-child, dl.doc > div:first-child { border-top: 0; }
dl.company dt, dl.doc dt { color: var(--dim); font-size: var(--t-sm); }
dl.company dd, dl.doc dd { margin: 0; overflow-wrap: anywhere; }
dl.company dd span { color: var(--dim); display: block; font-size: var(--t-sm); }
dl.doc dd.url, .hash { font-family: var(--mono); font-size: var(--t-xs); }
dl.doc { margin-bottom: var(--s2); }

.status { align-items: center; display: flex; font-size: var(--t-md); gap: var(--s2); }
.status .ico {
  background: var(--accent-weak); border-radius: var(--r-pill); color: var(--link);
  flex: none; height: 1.75rem; padding: .25rem; width: 1.75rem;
}

/* ------------------------------------------------ 12. link-cards and lists */

/* One card shape for every list of employers that share an Employer ID. The
   name leads, the arrow follows, and the whole card lifts under the pointer. */
.cards {
  display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.cards > li { display: flex; margin: 0; }
.cards + .note { margin-top: var(--s4); }
.cards a, .cards > li > .nm {
  align-items: center; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-md); box-shadow: var(--sh-1); color: var(--fg); display: flex;
  flex: 1; font-size: var(--t-md); font-weight: 600; gap: var(--s4);
  justify-content: space-between; min-height: 4rem; padding: var(--s4) var(--s5);
  text-decoration: none;
  transition: border-color var(--fast) ease, box-shadow 160ms var(--ease),
    transform 160ms var(--ease);
}
.cards > li > .nm { color: var(--dim); font-weight: 560; }
.cards a:hover { border-color: var(--accent); box-shadow: var(--sh-2); transform: translateY(-2px); }
.cards a .nm { letter-spacing: -.012em; }
.cards .go { color: var(--accent); flex: none; transition: transform 160ms var(--ease); }
.cards a:hover .go { transform: translateX(3px); }

/* The candidate list: one card per filer, its name and where it files. */
.results {
  display: grid; gap: var(--s3); list-style: none; margin: 0 0 var(--s5); max-width: 46rem;
  padding: 0;
}
.results > li {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: var(--sh-1); padding: var(--s4) var(--s5);
  transition: border-color var(--fast) ease, box-shadow 160ms var(--ease),
    transform 160ms var(--ease);
}
.results > li:hover {
  border-color: var(--accent); box-shadow: var(--sh-2); transform: translateY(-2px);
}
.results .nm { font-size: var(--t-md); font-weight: 620; text-decoration: none; }
.results > li:hover .nm, .results .nm:focus-visible { text-decoration: underline; }
.results .meta { color: var(--dim); font-size: var(--t-sm); margin: var(--s1) 0 0; }

/* The A-Z rail: one pill per letter, the count beside it, greyed when empty. */
ul.letters {
  display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0 0 var(--s10);
  padding: 0;
}
ul.letters li {
  align-items: baseline; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-pill); display: flex; gap: var(--s2); min-height: 2.5rem;
  padding: var(--s1) var(--s4);
  transition: border-color var(--fast) ease, box-shadow var(--fast) ease;
}
ul.letters li:hover { border-color: var(--accent); box-shadow: var(--sh-1); }
ul.letters a { font-size: var(--t-md); font-weight: 620; text-decoration: none; }
ul.letters a:hover { text-decoration: underline; }
ul.letters .dim { font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

/* `.lead` and `.hint` are scoped to the hero where the landing page has
   them; the result pages, /policy/ and the static landing page emit both
   outside those scopes, so the declarations are repeated unscoped. */
.lead { font-size: var(--t-lg); margin: 0 0 var(--s5); max-width: 60ch; }
main:not(.home) > .band .lead { color: var(--ink-2); margin: var(--s4) 0 0; }
.hint { color: var(--dim); font-size: var(--t-sm); margin: var(--s3) 0 0; }
.alias { color: var(--dim); font-size: var(--t-sm); margin: 0 0 var(--s2); }

.hit {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: var(--sh-1); margin-bottom: var(--s4); padding: var(--s5) var(--s6);
}
.hit h3 { font-size: var(--t-base); margin-top: 0; }
.hit .where { color: var(--dim); font-size: var(--t-sm); margin: 0 0 var(--s3); }
.hit blockquote {
  background: var(--band); border: 1px solid var(--rule); border-radius: var(--r-sm);
  margin: 0; padding: var(--s3) var(--s4);
}
.hit blockquote p { margin: 0; }
.hit mark {
  background: var(--accent-weak); border-radius: var(--r-mark); color: var(--fg);
  font-weight: 640; padding: 0 2px;
}
section > form.search { margin-bottom: var(--s8); max-width: 40rem; }

/* ----------------------------------------------------- 13. the landing page
   Below the hero: what a page shows in three groups, the three steps on a
   raised panel, why trust it beside its heading, and the questions. */

main.home section[aria-labelledby="profile"] { margin-top: var(--s4); }
.features { display: grid; gap: var(--s6) var(--s10); }
.features .group { border-top: 1px solid var(--rule); padding-top: var(--s5); }
.features h3 { margin: 0 0 var(--s4); }
.features dl { margin: 0; }
.features dt { font-weight: 600; }
.features dd { color: var(--dim); font-size: var(--t-sm); margin: 0 0 var(--s4); }

main.home section[aria-labelledby="how"] {
  background: var(--raise); border: 1px solid var(--rule); border-radius: var(--r-xl);
  padding: var(--s10) var(--s8) var(--s8);
}
main.home section[aria-labelledby="how"] > h2 { margin-top: 0; }
.steps {
  display: grid; gap: var(--s8) var(--s10); list-style: none; margin: 0; padding: 0;
}
.steps li { margin: 0; }
.steps .ico { color: var(--accent); display: block; margin-bottom: var(--s3); }
.steps h3 { margin: 0 0 var(--s1); }
.steps p { color: var(--dim); margin: 0; max-width: 46ch; }

.checks { display: grid; gap: var(--s5); list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; gap: var(--s3); }
.checks .ico {
  background: var(--accent-weak); border-radius: var(--r-pill); color: var(--link);
  flex: none; height: 2rem; padding: .3125rem; width: 2rem;
}
.checks h3 { margin: .25rem 0 var(--s1); }
.checks p { color: var(--dim); margin: 0; }

/* The questions: one hairline between each, the whole row the target. */
.faq { border-top: 1px solid var(--rule); max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  align-items: center; cursor: pointer; display: flex; font-size: var(--t-md); font-weight: 600;
  gap: var(--s4); justify-content: space-between; list-style: none; min-height: 3.5rem;
  padding: var(--s3) 0;
}
.faq summary:hover { color: var(--link); text-decoration: none; }
.faq .chev { color: var(--dim); }
.faq .body { color: var(--ink-2); margin: 0 0 var(--s5); max-width: 65ch; }

/* ----------------------------------------------------------- 13b. /api/
   A command, a response or a setting is text to copy, not to read: the one
   other place monospace is earned. */

pre {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: var(--sh-1); font: var(--t-xs)/1.6 var(--mono); margin: 0 0 var(--s4);
  overflow-x: auto; padding: var(--s4) var(--s5);
}
code { font-family: var(--mono); font-size: .875em; overflow-wrap: anywhere; }
pre code { font-size: inherit; }

/* The opening: the offer, the ways in and the facts; a real request and
   its response beside them at 62rem. */
main.api > .band > .wrap { display: grid; gap: var(--s5); }
main.api > .band > .wrap > * { margin: 0; min-width: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.btn.alt { background: var(--surface); border-color: var(--rule); color: var(--fg); }
.btn.alt:hover { background: var(--raise); border-color: var(--dim); }
dl.spec { font-size: var(--t-sm); }
dl.spec > div {
  border-top: 1px solid var(--rule); display: grid; gap: 0 var(--s4);
  grid-template-columns: 5.5rem minmax(0, 1fr); padding: var(--s2) 0;
}
dl.spec dt { color: var(--dim); }
dl.spec dd { margin: 0; min-width: 0; }
.demo {
  background: var(--code-bg); border: 1px solid var(--code-rule); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); overflow: hidden;
}
.demo > .code { border: 0; border-radius: 0; margin: 0; }
.demo > .code + .code { border-top: 1px solid var(--code-rule); }

/* The contents: a scrolling row of pills, like a record page's region
   links, then a sticky column at 62rem. */
.toc {
  background:
    linear-gradient(to right, var(--bg), transparent) 0 0 / 20px 100% no-repeat,
    linear-gradient(to left, var(--bg), transparent) 100% 0 / 20px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, var(--edge), transparent) 0 0 / 10px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, var(--edge), transparent) 100% 0 / 10px 100%
      no-repeat,
    var(--bg);
  background-attachment: local, local, scroll, scroll;
  border-bottom: 1px solid var(--rule); margin: 0 0 var(--s8); overflow-x: auto;
  padding: var(--s3) 0; position: sticky; scrollbar-width: none; top: var(--head); z-index: 5;
}
.toc ul, .toc li { display: flex; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.toc a { white-space: nowrap; }

.doc { min-width: 0; }
.doc > section { border-top: 1px solid var(--rule); margin: 0; padding: var(--s12) 0; }
.doc > section:first-child { border-top: 0; padding-top: 0; }
.doc > section:last-child { padding-bottom: 0; }
.doc > section > :last-child { margin-bottom: 0; }
.doc h2 { margin: 0 0 var(--s5); }
.doc h4 { font-size: var(--t-base); font-weight: 640; margin: var(--s8) 0 var(--s3); }
.doc p:not(.route) code, .doc .plain code {
  background: var(--raise); border-radius: var(--r-mark); padding: .125em .375em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.endpoint { border-top: 1px solid var(--rule); margin-top: var(--s12); padding-top: var(--s10); }
.endpoint > h3 { font-size: var(--t-lg); margin: 0 0 var(--s3); }
.route {
  align-items: center; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-sm); display: inline-flex; flex-wrap: wrap; gap: var(--s2);
  margin: 0 0 var(--s4); max-width: 100%; padding: var(--s1) var(--s3) var(--s1) var(--s1);
}
.route code { font-size: var(--t-sm); }
/* The method: a word on a neutral pill, never a traffic light. */
.verb {
  background: var(--accent-weak); border-radius: var(--r-mark); color: var(--link);
  font-size: var(--t-xs);
  font-weight: 700; letter-spacing: .04em; padding: 1px var(--s2);
}
ol.quick { counter-reset: step; list-style: none; margin: 0; padding: 0; }
ol.quick > li { counter-increment: step; padding-left: 2.75rem; position: relative; }
ol.quick > li + li { margin-top: var(--s8); }
ol.quick > li::before {
  align-items: center; background: var(--accent-weak); border-radius: var(--r-pill);
  color: var(--link); content: counter(step); display: flex; font-size: var(--t-sm);
  font-weight: 640; height: 1.75rem; justify-content: center; left: 0; position: absolute;
  top: 0; width: 1.75rem;
}
ol.quick h3 { margin: .125rem 0 var(--s2); }
ol.quick .code { margin: var(--s3) 0 0; }
dl.fields { margin: 0; }
dl.fields > div {
  border-top: 1px solid var(--rule); display: grid; gap: var(--s1) var(--s8);
  padding: var(--s3) 0;
}
dl.fields > div:first-child { border-top: 0; }
dl.fields :is(dt, dd) { font-size: var(--t-sm); }
dl.fields dd { color: var(--ink-2); margin: 0; }
details.full { margin: 0 0 var(--s4); }
details.full pre { max-height: 30rem; overflow: auto; }

/* A code panel: one dark surface in both themes, a title bar with the copy
   button, text that scrolls inside it. JSON is marked up on the server;
   its punctuation takes the dim ink. */
.code {
  background: var(--code-bg); border: 1px solid var(--code-rule); border-radius: var(--r-md);
  margin: 0 0 var(--s4); overflow: hidden;
}
.code .bar {
  align-items: center; background: var(--code-bar); border-bottom: 1px solid var(--code-rule);
  color: var(--code-dim); display: flex; font-size: var(--t-xs); font-weight: 560;
  gap: var(--s3); justify-content: space-between; min-height: 2.5rem;
  padding: var(--s1) var(--s2) var(--s1) var(--s4);
}
.code pre {
  background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--code-fg);
  font: .8125rem/1.7 var(--mono); margin: 0; padding: var(--s4) var(--s5);
}
.json { color: var(--code-dim); }
.json .k { color: var(--code-key); }
.json .s { color: var(--code-str); }
.json .n, .json .l { color: var(--code-fg); }
/* The page's own ring is too dark to see on this ground. */
.code :focus-visible { outline-color: var(--code-key); }
.copy {
  background: none; border: 1px solid var(--code-rule); border-radius: var(--r-sm);
  color: var(--code-dim); cursor: pointer; flex: none; font: 560 var(--t-xs)/1 var(--sans);
  min-height: 1.75rem; padding: 0 var(--s3);
  transition: border-color var(--fast) ease, color var(--fast) ease;
}
.copy:hover { border-color: var(--code-dim); color: var(--code-fg); }

/* Tabs with no script: a radio group, each pane after its label. `order`
   moves the panes under the row of labels and `:checked` shows one; the
   hidden radios keep the arrow keys. */
.tabs { display: flex; flex-wrap: wrap; margin: 0 0 var(--s4); position: relative; }
.tabs > label {
  align-items: center; border-bottom: 2px solid transparent; color: var(--dim); cursor: pointer;
  display: flex; font-size: var(--t-sm); font-weight: 560; margin-bottom: -1px; min-height: 2.5rem;
  padding: 0 var(--s3); transition: color var(--fast) ease; z-index: 1;
}
.tabs > label:hover { color: var(--fg); }
.tabs > input:checked + label { border-bottom-color: var(--accent); color: var(--fg); }
.tabs > input:focus-visible + label { outline: 3px solid var(--link); outline-offset: -3px; }
.tabs > div { display: none; flex: 0 0 100%; min-width: 0; order: 1; }
.tabs > input:checked + label + div { display: block; }
.tabs > .pane { border-top: 1px solid var(--rule); padding-top: var(--s5); }
/* The language tabs are their panel's own title bar. */
.lang {
  background: var(--code-bar); border: 1px solid var(--code-rule); border-radius: var(--r-md);
  overflow: hidden;
}
.lang > label { color: var(--code-dim); font-size: var(--t-xs); padding: 0 var(--s4); }
.lang > label:hover, .lang > input:checked + label { color: var(--code-fg); }
.lang > input:checked + label { border-bottom-color: var(--code-key); }
.lang > .code { border: 0; border-radius: 0; border-top: 1px solid var(--code-rule); margin: 0; }
.lang .copy { position: absolute; right: var(--s2); top: .375rem; }
.lang > input:focus-visible + label { outline-color: var(--code-key); }

/* ------------------------------------------------------- 13c. /account/
   The one page whose forms change something: each a POST carrying the
   session's CSRF token, each button saying what it does. Signed out it is
   one centred card; signed in, a dashboard: who, three stat cards, the keys,
   the usage chart and, last, the one destructive action - the only place
   the danger ink appears, on a word that says what it does. */

.btn { align-items: center; display: inline-flex; justify-content: center; text-decoration: none; }
.btn.wide { width: 100%; }
form.act { margin: 0; }
:is(form.act.quiet, td form.act) button {
  background: var(--surface); border-color: var(--rule); color: var(--fg);
}
:is(form.act.quiet, td form.act) button:hover {
  background: var(--raise); border-color: var(--dim);
}
td form.act button { font-size: var(--t-sm); min-height: 2.25rem; padding: var(--s1) var(--s3); }
td.end { text-align: right; }
.keys { min-width: 40rem; }
.keys :is(th, td) { vertical-align: middle; white-space: nowrap; }
.flash {
  background: var(--accent-weak); border-radius: var(--r-sm); color: var(--fg);
  margin: var(--s4) 0 0; padding: var(--s3) var(--s4);
}
.empty {
  background: var(--surface); border: 1px dashed var(--rule); border-radius: var(--r-md);
  color: var(--dim); margin: 0; max-width: none; padding: var(--s8) var(--s5); text-align: center;
}

/* Signed out: the card is the band's own column. */
main.signin > .band { border-bottom: 0; padding: var(--s16) 0 var(--s20); }
main.signin > .band > .wrap {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); max-width: 28rem; padding: var(--s10) var(--s8); text-align: center;
  width: calc(100% - 2 * var(--s4));
}
main.signin h1 { font-size: var(--t-2xl); letter-spacing: -.02em; margin-bottom: var(--s3); }
main.signin > .band .lead { font-size: var(--t-base); margin: 0 auto var(--s6); }
main.signin p { margin-left: auto; margin-right: auto; }
main.signin .agree { color: var(--dim); font-size: var(--t-sm); margin: var(--s5) auto 0; }
main.signin details { text-align: left; }
main.signin > .band + .wrap { display: none; }

/* Signed in: who, beside an initial drawn in CSS, and the two actions. */
main.dash > .band > .wrap {
  align-items: center; display: grid; gap: var(--s1) var(--s4);
  grid-template-columns: auto minmax(0, 1fr);
}
main.dash h1 {
  font-size: var(--t-2xl); grid-column: 2; grid-row: 1; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.avatar {
  align-items: center; background: var(--accent); border-radius: var(--r-pill);
  color: var(--on-accent); display: flex; font-size: var(--t-xl); font-weight: 640;
  grid-column: 1; grid-row: 1 / span 2; height: 3.5rem; justify-content: center; width: 3.5rem;
}
.who { color: var(--dim); grid-column: 2; grid-row: 2; margin: 0; overflow-wrap: anywhere; }
main.dash .actions { grid-column: 1 / -1; margin-top: var(--s4); }
main.dash .flash { grid-column: 1 / -1; }
.actions form.act button { min-height: 2.75rem; }

.board > section { margin: 0 0 var(--s12); }
.board h2 { font-size: var(--t-lg); margin: 0 0 var(--s4); }

.stats { display: grid; gap: var(--s4); list-style: none; margin: 0; padding: 0; }
.stats li {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: var(--sh-1); padding: var(--s5);
}
.stats h3 { color: var(--dim); font-size: var(--t-sm); font-weight: 560; margin: 0 0 var(--s2); }
.stats p { color: var(--dim); margin: 0; }
.stats b {
  color: var(--fg); font-size: var(--t-2xl); font-variant-numeric: tabular-nums; font-weight: 680;
  letter-spacing: -.03em; line-height: 1.1;
}
.stats .note { margin-top: var(--s3); }
.meter { display: block; height: .375rem; margin-top: var(--s3); width: 100%; }
.meter .track { fill: var(--accent-weak); }
.meter .fill { fill: var(--accent); }

/* The new key: the one raised thing on the page until it is copied. */
.reveal {
  background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); padding: var(--s6);
}
.reveal h2 { margin-bottom: var(--s3); }
.warn { align-items: flex-start; display: flex; font-weight: 560; gap: var(--s2); }
.warn .ico { color: var(--accent); flex: none; margin-top: .125rem; }
.reveal .code { margin: var(--s4) 0; }
.reveal .code pre { font-size: var(--t-sm); overflow-wrap: anywhere; white-space: pre-wrap; }
.reveal .note { margin: 0; }

.sechead {
  align-items: end; display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8);
  justify-content: space-between; margin-bottom: var(--s4);
}
.sechead h2 { margin: 0; }
.sechead > :last-child { margin: 0; }
form.make { flex: 1 1 20rem; max-width: 28rem; }
form.make label { color: var(--dim); }

/* The usage chart: the employer page's figure, thirty bars. */
figure.chart {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: var(--sh-1); margin: 0 0 var(--s4); padding: var(--s5);
}
figure.chart svg { display: block; height: auto; max-height: 12rem; width: 100%; }
figure.chart .bar { fill: var(--accent); rx: 3px; }
figure.chart .bar:hover { fill: var(--accent-lift); }
figure.chart .axis {
  color: var(--dim); display: flex; font-size: var(--t-xs); justify-content: space-between;
  margin: var(--s2) 0 0; max-width: none;
}
figure.chart figcaption {
  color: var(--dim); font-size: var(--t-sm); line-height: 1.5; margin-top: var(--s3);
}
figure.chart figcaption b { color: var(--fg); font-weight: 640; }
details.full .scroll { margin-top: var(--s2); }

/* Last, and apart: the one action that can't be undone. */
.dz {
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--rule));
  border-radius: var(--r-lg); padding: var(--s6);
}
.dz p { color: var(--ink-2); }
.dz form.act { margin: var(--s4) 0; }
form.act.danger button {
  background: var(--surface); border-color: var(--danger); color: var(--danger);
}
form.act.danger button:hover { background: var(--danger); color: var(--on-accent); }
.dz .note { margin: 0; }

/* ------------------------------------------------------------ 14. the footer
   The one dark region of a light page, and the end of every page: who this
   is, where else to go, what vintage the data is, the disclaimer in full at
   reading size, and the sentence that says nothing was recorded. */

footer.site {
  background: var(--foot); color: var(--foot-dim);
  padding: var(--s16) 0 var(--s12);
}
footer.site a { color: var(--foot-link); }
footer.site .fbrand { color: var(--foot-fg); font-size: var(--t-lg); margin: 0; }
footer.site .fbrand .mark { color: var(--foot-link); }
footer.site .cols {
  border-bottom: 1px solid var(--foot-rule); display: grid; gap: var(--s8);
  grid-template-columns: 1fr; padding-bottom: var(--s8);
}
footer.site nav {
  display: flex; flex-direction: column; font-size: var(--t-sm); gap: var(--s2);
}
footer.site nav a { text-decoration: none; }
footer.site nav a:hover { text-decoration: underline; }
.vintage, .gen { color: var(--foot-dim); font-size: var(--t-sm); margin: 0; max-width: 62ch; }
.gen { margin-top: var(--s6); }
.stamp { white-space: nowrap; }

.disclaimer {
  background: var(--foot-surface); border: 1px solid var(--foot-rule);
  border-radius: var(--r-md); margin: var(--s8) 0 0; padding: var(--s5) var(--s6);
}
.disclaimer h2 {
  color: var(--foot-fg); font-size: var(--t-xs); letter-spacing: .1em; margin: 0 0 var(--s3);
  text-transform: uppercase;
}
/* Legal text at reading size and reading contrast. It is never the small
   grey print at the bottom, because that is the one thing it must not be. */
.disclaimer p {
  color: var(--foot-dim); font-size: var(--t-legal); margin-bottom: var(--s3); max-width: 72ch;
}
.disclaimer p:first-of-type { color: var(--foot-fg); font-weight: 640; }
.disclaimer p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- 15. breakpoints
   Structural, not fluid: the header becomes sticky once it is one line tall,
   the answer and the score go side by side, tables pair up, the footer goes
   to three columns. Nothing reflows between those states. */

@media (max-width: 40rem) {
  /* One row for who this is and the way out, one for the box. `order` rather
     than a second markup path: the DOM stays brand, control, nav. */
  header.site .wrap { gap: var(--s2) var(--s3); }
  .brand { font-size: var(--t-base); order: 1; }
  nav.top { gap: 2px; order: 2; }
  nav.top a, a.acct { padding: var(--s1) var(--s2); }
  /* Top right, beside the brand: the row the brand leaves empty. */
  .theme { margin-left: auto; order: 1; }
  .acct { margin-left: auto; order: 1; }
  .acct + .theme { margin-left: 0; }
  header.site form.search { flex: 1 0 100%; max-width: none; order: 3; }
  .answer, .plate { padding: var(--s5); }
  .answer h2 { font-size: var(--t-lg); }

  /* The rubric's last column is a sentence: at 390 it becomes blocks,
     `display` only, the `<thead>` kept in the DOM as the column names. */
  .rubric { min-width: 0; }
  .rubric, .rubric thead, .rubric tbody, .rubric tr, .rubric th, .rubric td { display: block; }
  .rubric thead, .stack thead {
    position: absolute; width: 1px; height: 1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  .rubric tbody tr {
    border-top: 1px solid var(--rule); display: grid; gap: var(--s1) var(--s3);
    grid-template-columns: 1fr auto; padding: var(--s4) var(--s2);
  }
  .rubric tbody tr:first-child, .stack tbody tr:first-child { border-top: 0; }
  .rubric tbody th[scope="row"], .rubric tbody td { border: 0; padding: 0; }
  .rubric tbody td.n { grid-column: 2; grid-row: 1; }
  .rubric tbody td:last-child { grid-column: 1 / -1; min-width: 0; padding-top: var(--s2); }

  .actions .btn { padding: var(--s2) var(--s4); }

  /* /api/'s parameters, errors and tools too: a block per row. */
  .stack, .stack tbody, .stack tr, .stack th, .stack td { display: block; }
  .stack tbody tr { border-top: 1px solid var(--rule); padding: var(--s3) var(--s4); }
  .stack tbody :is(th, td) { border: 0; padding: var(--s1) 0 0; }
  .params td:not(:last-child) { color: var(--dim); display: inline-block; margin-right: var(--s3); }
}

@media (max-width: 47.99rem) {
  /* The tagline restates the `<h1>` under it, and a phone header has room for
     the brand and the way out and nothing else. */
  .tag { display: none; }
  /* The region links scroll as one row on a phone, with the tables' edge
     cue; opaque, because the cue needs a ground to cover with. */
  .onthis {
    background:
      linear-gradient(to right, var(--bg), transparent) 0 0 / 20px 100% no-repeat,
      linear-gradient(to left, var(--bg), transparent) 100% 0 / 20px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, var(--edge), transparent) 0 0 / 10px 100%
        no-repeat,
      radial-gradient(farthest-side at 100% 50%, var(--edge), transparent) 100% 0 / 10px 100%
        no-repeat,
      var(--bg);
    background-attachment: local, local, scroll, scroll;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .onthis a { white-space: nowrap; }
}

@media (min-width: 48rem) {
  :root { --head: 3.75rem; }
  header.site { position: sticky; top: 0; }
  .answer, .plate { padding: var(--s8); }
  .viz { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .features, .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dl.facts > div, dl.flags > div, dl.company > div, dl.doc > div, dl.fields > div {
    grid-template-columns: 13rem minmax(0, 1fr);
  }
  footer.site .cols { grid-template-columns: auto auto 1fr; gap: var(--s10); }
  footer.site .vintage { justify-self: end; }
  main.dash > .band > .wrap { grid-template-columns: auto minmax(0, 1fr) auto; }
  main.dash .actions { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
}

@media (min-width: 62rem) {
  main.home > .band { padding-bottom: var(--s16); padding-top: var(--s16); }
  main.home h1 { margin-bottom: var(--s8); }
  .summary { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pair.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .levels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
  /* Ten candidates in one column left the right half of a 1280 window empty
     while the reader scrolled past the tenth. Two columns is the same list. */
  .results { grid-template-columns: 1fr 1fr; max-width: none; }
  /* Why trust it, and the questions: the heading holds the left column and
     the content reads down the right, so neither runs the full width. */
  main.home section:is([aria-labelledby="trust"], [aria-labelledby="faq"]) {
    align-items: start; column-gap: var(--s10); display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr;
    margin-top: var(--s16);
  }
  main.home section:is([aria-labelledby="trust"], [aria-labelledby="faq"]) > h2 {
    grid-column: 1; margin-top: 0;
  }
  main.home section[aria-labelledby="trust"] > .sub { grid-column: 1; }
  main.home section[aria-labelledby="trust"] > .checks { grid-column: 2; grid-row: 1 / span 2; }
  main.home section[aria-labelledby="faq"] > .faq { grid-column: 2; grid-row: 1; }

  /* /api/: the request beside the offer, the contents beside the docs. */
  main.api > .band { padding-bottom: var(--s16); padding-top: var(--s16); }
  main.api > .band > .wrap {
    align-items: start; column-gap: var(--s12);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr;
  }
  main.api > .band > .wrap > * { grid-column: 1; }
  main.api > .band > .wrap > .demo { grid-column: 2; grid-row: 1 / -1; }
  .docs {
    align-items: start; column-gap: var(--s12); display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr);
  }
  .toc {
    background: none; border: 0; margin: 0; overflow: visible; padding: 0;
    top: calc(var(--head) + var(--s8));
  }
  .toc ul, .toc li { display: block; }
  .toc ul ul { margin: var(--s1) 0 var(--s2) var(--s3); }
  .toc a {
    background: none; border: 0; border-radius: var(--r-sm); display: block;
    padding: var(--s1) var(--s3); white-space: normal;
  }
  .toc a:hover { background: var(--raise); }
  main:is(.api, .legal) :is(h2, h3)[id] { scroll-margin-top: calc(var(--head) + var(--s6)); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------- 16. motion
   One authored moment: the landing hero arrives. The headline, the promise
   and the box rise 60 ms apart, out of focus and into it, on an exponential
   ease-out. Nothing else on the site animates but a hover.

   `backwards` holds the first frame through the delay, and the whole block
   only exists where motion is welcome — with `prefers-reduced-motion: reduce`
   the page is simply there, which is the intentional alternative. */

@media (prefers-reduced-motion: no-preference) {
  main.home h1, main.home .lead, main.home .hero, main.home .proof {
    animation: rise 600ms var(--ease) backwards;
  }
  main.home .lead { animation-delay: 60ms; }
  main.home .hero { animation-delay: 120ms; }
  main.home .proof { animation-delay: 180ms; }
}

@keyframes rise {
  from { filter: blur(6px); opacity: 0; transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}