/* 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.2ffebe993e.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); color: var(--fg); }   /* site.css's ink would vanish on the tint in dark */
.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 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 (docs/review/site-404.md): the art, the words and one way home. The art ("4", the open box as the "0", "4"; the
   lid hovers and a lime "?" rises out of the box) is decorative, the h1 says it. Its black is #010101, so it is drawn
   through `lighten` on an ink card, the header tile's rule (the dark stays dark): in dark mode the card is the page's
   own ink and the art sits on the void with no edge; in light mode it is a rounded ink card. It doesn't float: the
   site's one repeating motion is /how's stills, under their Pause switch (DESIGN.md, WCAG 2.2.2). Its foot fades into
   the card, as the home's stills do. Selecting the page (the first egg's way in) leaves the art and the button out,
   so Ctrl+A paints the words alone. The second line of the h1 is grey, as on the home. */
.not-found { min-height: 56svh; align-content: center; justify-items: center; text-align: center; gap: var(--s-4); }
.not-found .nf-art {
  display: block; width: min(100%, 480px); margin-bottom: var(--s-4); border-radius: var(--r-panel); overflow: hidden;
  background: #0A0A0A; isolation: isolate; -webkit-user-select: none; user-select: none;
}
.not-found .nf-art img {
  display: block; width: 100%; height: auto; mix-blend-mode: lighten;
  -webkit-mask: linear-gradient(to bottom, #000 82%, transparent); mask: linear-gradient(to bottom, #000 82%, transparent);
}
.not-found h1 { font: var(--t-hero); letter-spacing: -.025em; }
.not-found .h1-2 { display: block; color: var(--fg-2); }
.not-found .lede { max-width: 44ch; text-wrap: balance; }
.not-found .ways {
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-2);
  -webkit-user-select: none; user-select: none;
}
/* The first easter egg: a line in the page's own colour, so it shows only when someone selects the text (Ctrl+A, a
   drag), in the page's text colour on the reading pages' selection tint (13:1 and over in both themes). It is
   invisible on purpose, not a contrast bug, and aria-hidden, so no screen reader takes it for the page's message.
   In forced colours it takes the system's page colour, so it stays hidden there too. */
.not-found .nf-egg { margin-top: var(--s-2); font: var(--t-small); color: var(--bg); }
.not-found .nf-egg::selection { color: var(--fg); background: color-mix(in srgb, var(--fg) 14%, transparent); }
/* the words around it, selected, keep the text colour too (site.css's selection colour is ink, lost on the tint in dark) */
.not-found ::selection { color: var(--fg); }
@media (forced-colors: active) { .not-found .nf-egg { forced-color-adjust: none; color: Canvas; } }