/* SPDX-License-Identifier: MIT — the reading pages (16-drive-design §2, §10, §11; DESIGN.md "Read"): how it
   works, how it was made, for judges, the fine print, and 404. Geist (the drive's one family, pinned by
   tools/build.py) sets these pages; the home keeps the system faces until a drive action (A-06). A 44rem
   column, reading type at 1rem/1.75, shadcn cards and accordions, violet only on what is Tari. */
@font-face {
  font-family: "Geist";
  src: url("/shared/fonts/geist/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --t-hero: 600 clamp(2.25rem, 1.6rem + 2.2vw, 3rem)/1.1 var(--font);
  --t-h2: 600 1.5rem/1.333 var(--font);
  --t-h3: 600 1.125rem/1.4 var(--font);
  --t-say: 400 1.125rem/1.6 var(--font);
  --t-body: 400 1rem/1.75 var(--font);
  --t-ui: 500 .875rem/1.25 var(--font);
  --t-small: 400 .875rem/1.6 var(--font);
  --read: 44rem;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);
}
.reading { font: var(--t-body); font-feature-settings: "ss01" off; }
.reading ::selection { background: color-mix(in srgb, var(--fg) 14%, transparent); }
.reading :is(h1, h2, h3) { text-wrap: balance; }
.reading :is(p, li, dd) { text-wrap: pretty; }
.reading a:not(.btn, .quiet, .btn-brand, .btn-outline, .btn-ghost) { text-underline-offset: .22em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.reading a:not(.btn, .quiet, .btn-brand, .btn-outline, .btn-ghost):hover { text-decoration-color: currentColor; }
.reading :focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 50%, transparent); outline-offset: 2px; border-radius: .375rem; }
.reading :is(td, .tnum) { font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .reading { --tap: 44px; } }

.page { padding-block: var(--s-7) var(--s-8); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
.page-head { display: grid; gap: var(--s-3); max-width: var(--read); }
.page-head h1 { font: var(--t-hero); letter-spacing: -.025em; }
.page-head .lede { font: var(--t-say); color: var(--fg-2); max-width: 40rem; }

/* the fine print's jump list: its links on computers */
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc { display: none; margin-top: var(--s-3); max-width: 36rem; }
.toc ul { columns: 2; column-gap: var(--s-6); }
.toc li { break-inside: avoid; }
.toc a { display: inline-flex; align-items: center; min-height: 32px; font: var(--t-ui); font-size: .9375rem; color: var(--fg); }
@media (min-width: 720px) { .toc { display: block; } }

/* ---------- Under the hood as docs (the owner, 2026-10-17): the page on the second surface, each part a card
   on it; from 1024px a sticky contents on the left (four groups that fold), the part being read on the lime tint
   like a picked row; on phones the same contents in a closed "On this page". A breadcrumb sticks under the header
   and names the part being read (made.js); long detail waits in the accordions. ---------- */
.docs-page { background: var(--bg-alt); }
.docs { gap: var(--s-6); padding-top: var(--s-5); }
.docs-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-content: start; min-width: 0; }
.docs-side { display: none; }
@media (min-width: 1024px) {
  .docs { grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--s-7); align-items: start; }
  .docs-side {
    display: block; position: sticky; top: calc(60px + var(--s-5)); max-height: calc(100svh - 60px - 2 * var(--s-5));
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 6px; margin: -6px;
  }
}
.side-toc { display: grid; gap: var(--s-2); }
.side-toc ul, .page-jump ul { list-style: none; margin: 0; padding: 0; }
.side-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 36px; padding: 6px 10px;
  border-radius: var(--r-input); font: 600 .875rem/1.3 var(--font); color: var(--fg); cursor: pointer; list-style: none;
}
.side-group > summary::-webkit-details-marker, .page-jump > summary::-webkit-details-marker { display: none; }
.side-group > summary::after, .page-jump > summary::after, .crumbs li + li::before, .truths-list summary::after {
  content: ""; inline-size: 7px; block-size: 7px; flex: none; border: solid var(--fg-2); border-width: 0 1.5px 1.5px 0;
  rotate: -45deg; transition: rotate var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
}
.side-group[open] > summary::after { rotate: 45deg; translate: 0 -2px; }
.side-group > summary:hover, .side-toc a:hover { background: var(--bg-sunken); color: var(--fg); }
.side-group:has([aria-current="location"]) > summary { color: var(--brand-text); }
.side-toc ul { display: grid; gap: 2px; padding: 2px 0 var(--s-2) var(--s-3); }
.side-toc a {
  display: flex; align-items: center; min-height: 32px; padding: 5px 10px; border-radius: var(--r-input);
  font: 500 .875rem/1.35 var(--font); color: var(--fg-2); text-decoration: none;
}
.side-toc a[aria-current="location"] { background: var(--brand-subtle); color: var(--brand-text); box-shadow: inset 0 0 0 1px var(--brand-border); font-weight: 600; }

/* the breadcrumb: Home, Under the hood, and (with JavaScript) the part being read; it stays under the header */
.crumbs {
  position: sticky; top: 60px; z-index: 2; margin: calc(-1 * var(--s-3)) -6px calc(-1 * var(--s-2)); padding: var(--s-3) 6px var(--s-2);
  background: var(--bg-alt);
}
.crumbs::after { content: ""; position: absolute; inset: auto 6px 0; height: 1px; background: var(--hair); }
.crumbs ol { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; font: var(--t-small); color: var(--fg-2); }
.crumbs li { min-width: 0; flex: none; white-space: nowrap; }
.crumbs li + li::before { display: inline-block; inline-size: 6px; block-size: 6px; margin-inline: 6px 10px; vertical-align: 1px; opacity: .7; }
.crumbs a { color: inherit; text-decoration: none; border-radius: var(--r-input); }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }
.crumbs li:has(+ [hidden]) a, .crumbs [data-crumb] { color: var(--fg); font-weight: 500; }
.crumbs [data-crumb] { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.docs .page-head { gap: var(--s-2); }

/* phones and tablets: On this page, closed, the four groups under their names (two columns from 640px) */
.page-jump { border: 1px solid var(--hair); border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow-sm); }
.page-jump > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-4); font: var(--t-ui); font-size: 1rem; cursor: pointer; list-style: none; border-radius: var(--r-panel); }
.page-jump > summary::after { rotate: 45deg; translate: 0 -2px; }
.page-jump[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.page-jump nav { padding: 0 var(--s-4) var(--s-3); border-top: 1px solid var(--hair); }
.page-jump nav > ul { display: grid; gap: var(--s-2) var(--s-6); }
@media (min-width: 640px) { .page-jump nav > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jump-group { display: block; padding-top: var(--s-3); font: 500 12px/1.4 var(--font); color: var(--fg-2); }
.page-jump a { display: flex; align-items: center; min-height: 44px; font: var(--t-ui); font-size: .9375rem; color: var(--fg); text-decoration: none; }
.page-jump a[aria-current="location"] { color: var(--brand-text); font-weight: 600; }
@media (min-width: 1024px) { .page-jump { display: none; } }

/* each part a card (never nested: the cards inside become wells on the page's surface) */
.docs .doc { gap: var(--s-4); }
.docs .doc > section {
  max-width: none; padding: var(--s-5) var(--s-4); border: 1px solid var(--hair); border-radius: var(--r-panel);
  background: var(--bg-raised); box-shadow: var(--shadow-sm); scroll-margin-top: 0;
}
@media (min-width: 640px) { .docs .doc > section { padding: var(--s-6); } }
.docs .doc h2 { padding-top: 0; border-top: 0; }
/* every part lands just under the breadcrumb (112 px), whatever fills in above it later; a part's own scroll-margin
   let Chrome's scroll anchoring drift deep links (/made#record) while /config filled the page */
html:has(.docs-page) { scroll-padding-top: 112px; }
.docs-main [id]:not(section) { scroll-margin-top: var(--s-2); }
.part-head { display: flex; align-items: center; gap: var(--s-3); }
.part-head .icon-tile { width: 36px; height: 36px; }
.part-head .icon-tile .icon { width: 18px; height: 18px; }
.docs :is(.who > div, .try) { background: var(--bg-alt); box-shadow: none; }
.docs .bands { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 640px) { .docs .band dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); } }

/* the accordions at the end of a part, and what we can't hide as eleven rows that open */
.boxes { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--s-1); }
.more-box > summary > h3 { font: inherit; letter-spacing: inherit; margin: 0; }
.docs .truths-list { list-style: none; padding: 0; counter-reset: truth; display: grid; border-block: 1px solid var(--hair); gap: 0; }
.truths-list > li { counter-increment: truth; max-width: none; }
.truths-list > li + li { border-top: 1px solid var(--hair); }
.truths-list summary { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 8px 2px; cursor: pointer; list-style: none; border-radius: var(--r-input); }
.truths-list summary::-webkit-details-marker { display: none; }
.truths-list summary::before { content: counter(truth); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-sunken); font: 600 12px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--fg-2); }
.truths-list summary strong { font-weight: 500; margin-right: auto; }
.truths-list summary:hover strong { text-decoration: underline; text-underline-offset: .22em; }
.truths-list summary::after { rotate: 45deg; translate: 0 -2px; }
.truths-list details[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.truths-list details > div { padding: 0 2px var(--s-4) calc(24px + var(--s-3) + 2px); max-width: calc(70ch + 40px); }
@media print { .docs-side, .page-jump, .crumbs { display: none; } .docs .doc > section { box-shadow: none; } }

/* how it was made: sections with a measure; the wide ones (tables, the Tari map) without */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
.doc section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); max-width: var(--read); scroll-margin-top: var(--s-5); align-content: start; }
.doc section > *, .more-box > * { min-width: 0; }
.doc section.wide { max-width: none; }
.doc section.wide > :is(p, .prose, ul, ol) { max-width: var(--read); }
.doc h2 { font: var(--t-h2); letter-spacing: -.025em; padding-top: var(--s-6); border-top: 1px solid var(--hair); }
.doc section:first-child h2 { border-top: 0; padding-top: 0; }
.doc section > :is(ul, ol), .doc .prose :is(ul, ol) { padding-left: 1.2em; display: grid; gap: 6px; }
.doc .prose h3, .doc section > h3 { margin-top: var(--s-4); }
.doc :is(p, li, dd) { max-width: 70ch; }
.anchor-sub { scroll-margin-top: var(--s-5); }

/* cards (shadcn): who sees what, the claim tiles */
.who { display: grid; gap: var(--s-3); }
@media (min-width: 720px) { .who { grid-template-columns: 1fr 1fr; } }
.card, .who > div {
  display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border: 1px solid var(--hair);
  border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow-sm);
}
.who h3 { font: var(--t-h3); }
.who p { font: var(--t-small); color: var(--fg-2); }

/* the details that hold the long precise text: shadcn's accordion, one tap deeper */
.more-box { border-block: 1px solid var(--hair); }
.more-box + .more-box { border-top: 0; }
.more-box > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 52px; padding: 12px 2px;
  font: var(--t-ui); font-size: 1rem; cursor: pointer; list-style: none; border-radius: var(--r-input);
}
.more-box > summary:hover { text-decoration: underline; text-underline-offset: .22em; }
.more-box > summary::-webkit-details-marker { display: none; }
.more-box > summary::after {
  content: ""; inline-size: 7px; block-size: 7px; flex: none; border: solid var(--fg-2); border-width: 0 1.5px 1.5px 0;
  rotate: 45deg; translate: 0 -2px; transition: rotate var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
}
.more-box[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.more-box > :not(summary) { margin: 0 0 var(--s-5); }

/* the Tari map: three groups, a violet mark on each (it is all Tari), cards per use */
.bands { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) { .bands { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bands > .band { display: grid; align-content: start; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hair); }
.band h3 { font: var(--t-h3); display: flex; align-items: center; gap: 10px; }
.band h3 .icon { width: 18px; height: 18px; color: var(--pay-text); }
.band dl { display: grid; gap: var(--s-5); }
.band dt { font-weight: 600; }
.band dd { margin: 4px 0 0; font: var(--t-small); }
.band .proof-line { color: var(--fg-2); }
.band .claim-id { font: 500 12px/1.4 var(--font-code); color: var(--fg-2); }

/* claim tables (/judges "What to check", /made's map) */
.claims { width: 100%; }
.claims td:last-child { white-space: nowrap; }

/* check us: the live status line, the test file, the evidence */
.live-line { display: inline-flex; align-items: center; gap: 10px; font: var(--t-ui); padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--hair); justify-self: start; }
.live-line:not([data-status-line]) { display: block; }   /* text and numbers: one run of words that wraps */
.live-line .dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--fg-2); }
.live-line[data-overall="green"] .dot { background: var(--ok-text); }
.live-line[data-overall="amber"] .dot { background: var(--sand); }
.live-line[data-overall="red"] .dot { background: var(--exit-text); }
.try { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--hair); border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow-sm); }
.canary { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.try > *, .canary > *, .canary .actions > * { min-width: 0; max-width: 100%; }
@media (min-width: 720px) { .canary { grid-template-columns: 200px minmax(0, 1fr); align-items: start; } }
.canary figure { display: grid; gap: var(--s-2); margin: 0; }
.canary .noise { width: 100%; aspect-ratio: 1; border-radius: var(--r-input); image-rendering: pixelated; background: var(--bg-sunken); }
.canary .actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); justify-items: start; }
.canary .copy-row { justify-self: stretch; }
.canary .lede { font: var(--t-body); color: var(--fg); max-width: none; }
.footnote { font: var(--t-small); color: var(--fg-2); }
.btn-primary { background: var(--act); color: var(--on-act); }
.reveal { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--hair); }
.reveal pre { font: var(--t-code); white-space: pre-wrap; padding: var(--s-4); border-radius: var(--r-input); background: var(--bg-sunken); }
.tx-list { list-style: none; padding: 0; display: grid; gap: 4px; }
.evidence .detail dd { overflow-wrap: anywhere; }
.price { color: var(--pay-text); font-weight: 600; }
.terminal { background: #0A0A0A; color: #E5E5E5; border: 1px solid var(--hair); }
.terminal span { color: #A3A3A3; }

/* ---------- for judges (site v2, 17-site-brief §6): the head on the field's static grid (its one reuse, no
   script), two side-by-side tracks of six steps on the second surface, What to check centred ---------- */
.page-hero { position: relative; isolation: isolate; overflow: clip; padding-block: var(--s-8) var(--s-7); }
.page-hero .wrap { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: var(--s-4); }
.page-hero h1 { font: 650 clamp(36px, 5vw, 56px)/1.05 var(--font); letter-spacing: -.04em; }
.page-hero .lede { font: var(--t-say); color: var(--fg-2); max-width: 36rem; }
.grid-static { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.grid-static::before {
  content: ""; position: absolute; inset: 0; --l: color-mix(in oklab, var(--brand-field) calc(var(--field-alpha) * 60%), transparent);
  background: linear-gradient(to right, var(--l) 1px, transparent 1px), linear-gradient(to bottom, var(--l) 1px, transparent 1px);
  background-size: var(--grid) var(--grid); background-position: calc(50% + 24px) -1px;
  mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000 0 30%, transparent 85%);
}
@media (forced-colors: active) { .grid-static { display: none; } }
.pass { font: var(--t-small); color: var(--fg-2); text-align: left; }
.pass summary { cursor: pointer; font: var(--t-ui); color: var(--fg); min-height: 44px; display: flex; align-items: center; justify-content: center; text-decoration: underline; text-underline-offset: .22em; list-style: none; }
.pass summary::-webkit-details-marker { display: none; }
.pass-form { gap: var(--s-3); margin-top: var(--s-2); max-width: 30rem; }
.pass-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pass-row input { flex: 1 1 12em; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--bg); font: var(--t-code); color: var(--fg); }
.pass-row .btn { min-height: 40px; }

.tracks { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 1000px) { .tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.track { display: grid; gap: var(--s-5); padding: var(--s-5); border: 1px solid var(--hair); border-radius: var(--r-panel); background: var(--bg-raised); }
.track > [hidden] { display: none; }
.track-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.track-num { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-btn); background: var(--act); color: var(--on-act); font: 650 18px/1 var(--font); }
.track-top h2 { font: 650 20px/1.25 var(--font); letter-spacing: -.02em; }
.track-top p { font: var(--t-small); color: var(--fg-2); }
.track-top a { color: var(--fg); }
/* the stepper: numbered circles joined by a hairline; the action, then what you see in grey */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; }
.steps li { counter-increment: step; position: relative; display: grid; gap: 3px; padding: 0 0 var(--s-4) 44px; font: var(--t-small); }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid var(--hair); background: var(--bg-raised); font: 600 13px/1 var(--font); font-variant-numeric: tabular-nums;
}
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 4px; width: 1px; background: var(--hair); }
.steps li:last-child { padding-bottom: 0; }
.steps .do { font: 500 15px/1.45 var(--font); color: var(--fg); }
.steps .ui { font-weight: 500; }
.steps .see { color: var(--fg-2); }
.device { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; padding: 1px 8px; border: 1px solid var(--hair); border-radius: var(--r-pill); background: var(--bg-sunken); color: var(--fg); font: 500 12px/1.5 var(--font); vertical-align: 1px; white-space: nowrap; }
.device .icon { width: 12px; height: 12px; }
.more-try { display: grid; gap: 8px; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--hair); font: var(--t-small); }
.more-try h3 { font: 500 12px/1.4 var(--font); color: var(--fg-2); }
.more-try ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.more-try li span:not([data-when]) { color: var(--fg-2); }
.more-try .ui { font-weight: 500; }

/* site v4: a table cell holds one sentence a line; balance keeps a lone word off each sentence's last line */
main td { text-wrap: balance; }
/* What to check: a compact table on its own surface; on phones each row stacks, "Where:" before the place */
.claim-table {
  width: 100%; max-width: 920px; margin-inline: auto; border-collapse: collapse; font: var(--t-small); background: var(--bg-raised);
  border-radius: var(--r-panel); overflow: hidden; border-style: hidden; box-shadow: 0 0 0 1px var(--hair);
}
.claim-table th, .claim-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-top: 1px solid var(--hair); }
.claim-table thead th { border-top: 0; font: 500 12px/1.4 var(--font); color: var(--fg-2); background: var(--bg-sunken); }
.claim-table tbody th { font: 500 14px/1.4 var(--font); white-space: nowrap; }
.claim-table tbody th .icon { display: inline; width: 15px; height: 15px; color: var(--fg-2); vertical-align: -3px; margin-right: 8px; }
.claim-table td.where { color: var(--fg-2); }
.claim-table td.where a { color: inherit; }
@media (min-width: 720px) { .claim-table td.where { white-space: nowrap; } }
@media (max-width: 719.98px) {
  .claim-table, .claim-table tbody, .claim-table tr, .claim-table th, .claim-table td { display: block; }
  .claim-table thead { display: none; }
  .claim-table tr { border-top: 1px solid var(--hair); padding: 12px 14px; }
  .claim-table tr:first-child { border-top: 0; }
  .claim-table tr[hidden] { display: none; }
  .claim-table th, .claim-table td { padding: 2px 0; border: 0; white-space: normal; }
  .claim-table td.where::before { content: "Where: "; }
}
.hood { max-width: 920px; margin: var(--s-6) auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--hair); border-radius: var(--r-panel); background: var(--bg-raised); }
.hood h3 { font: 600 17px/1.3 var(--font); }
.hood p { font: var(--t-small); color: var(--fg-2); }

/* forms on reading pages (the abuse report): shadcn inputs */
.reading .field :is(input[type="url"], input[type="text"], textarea, select) { border-width: 1px; background: transparent; color: var(--fg); font: var(--t-small); font-size: 1rem; }
@media (min-width: 768px) { .reading .field :is(input[type="url"], input[type="text"], textarea, select) { font-size: .875rem; } }
.reading .field :is(input, textarea, select):focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); outline-offset: 0; border-color: var(--fg-2); }
.reading .field [aria-invalid="true"] { border-color: var(--exit-text); }
.reading .box-note { border: 1px solid var(--hair); background: var(--bg-sunken); }

/* 404: the words and a way home */
.not-found { min-height: 56svh; align-content: center; justify-items: center; text-align: center; gap: var(--s-4); }
.not-found h1 { font: var(--t-hero); letter-spacing: -.025em; max-width: 16ch; }
.not-found .lede { max-width: 34ch; }
.not-found .ways { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }