:root { --pf-bg: var(--cream); --pf-ink: var(--ink); --pf-head: var(--green-deep); --pf-muted: var(--ink-muted); --pf-rule: rgba(22, 33, 31, .14); --pf-card: var(--paper);
  --pf-hero-bg: var(--deck); --pf-hero-ink: #EEF3F4; --pf-hero-muted: #A9B6BA; --pf-hero-accent: var(--lit); --pf-hero-rule: rgba(108, 242, 166, .35);
  --pf-pass: var(--green); --pf-flag: var(--amber); --pf-flag-ink: #6B4A00; --pf-err: var(--red); --pf-na: var(--rule); --pf-track: #E2DCCD; --pf-bar: var(--blue);
  --pf-code-bg: var(--glass); --pf-code-ink: var(--lit); --pf-code-rule: rgba(108, 242, 166, .3); --pf-focus: var(--gold);
  --pf-display: var(--display); --pf-mono: var(--mono); --pf-radius: 10px; --pf-unit-radius: 5px; --pf-shadow: 0 1px 0 rgba(22, 33, 31, .06), 0 12px 24px -16px rgba(22, 33, 31, .5); --pf-ease: var(--ease-out); }
/* ------------------------------------------------------------------ proof
   The proof page. The project's own sheet sets the type, the masthead and
   the footer; this sheet only lays out the record. Tokens at the top are the
   project's, mapped onto the proof's few needs. Motion only under .motion. */

.proof { background: var(--pf-bg); color: var(--pf-ink); }
.proof-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .proof-wrap { padding-inline: 32px; } }

.proof-sec { padding-block: 56px; border-top: 1px solid var(--pf-rule); }
.proof-sec:first-child { border-top: 0; }
.proof-kicker { font-family: var(--pf-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pf-muted); margin: 0 0 10px; }
.proof-h2 { font-family: var(--pf-display); font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.1; margin: 0 0 12px; color: var(--pf-head); }
.proof-lede { max-width: 66ch; margin: 0 0 28px; color: var(--pf-muted); font-size: 1.05rem; line-height: 1.55; }

/* --- the hero: the one sentence */
.proof-hero { padding-block: 64px 48px; background: var(--pf-hero-bg); color: var(--pf-hero-ink); position: relative; overflow: hidden; }
.proof-hero .proof-kicker { color: var(--pf-hero-muted); }
.proof-hero__line { color: var(--pf-hero-ink); font-family: var(--pf-display); font-size: clamp(1.9rem, 5.2vw, 3.6rem); line-height: 1.06; margin: 0 0 22px; max-width: 22ch; letter-spacing: -.01em; }
.proof-hero__line .n { color: var(--pf-hero-accent); font-variant-numeric: tabular-nums; }
.proof-hero__sub code, .proof-hero__line code { color: inherit; background: rgba(255,255,255,.12); padding: 0 .25em; border-radius: 2px; }
.proof-hero__sub { font-size: 1.1rem; line-height: 1.55; max-width: 62ch; margin: 0 0 26px; color: var(--pf-hero-ink); opacity: .92; }
.proof-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.proof-meta li { font-family: var(--pf-mono); font-size: .82rem; padding: 6px 10px; border: 1px solid var(--pf-hero-rule); border-radius: var(--pf-radius); color: var(--pf-hero-ink); }
.proof-meta b { font-weight: 600; color: var(--pf-hero-accent); }

/* --- tally tiles */
.proof-tally { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 32px; padding: 0; list-style: none; }
@media (min-width: 760px) { .proof-tally { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.proof-tile { background: var(--pf-card); border: 1px solid var(--pf-rule); border-radius: var(--pf-radius); padding: 18px 18px 16px; box-shadow: var(--pf-shadow); }
.proof-tile__n { display: block; font-family: var(--pf-display); font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--pf-head); }
.proof-tile__k { display: block; margin-top: 8px; font-weight: 700; }
.proof-tile__d { display: block; margin-top: 4px; font-size: .9rem; color: var(--pf-muted); line-height: 1.4; }
.proof-tile--pass .proof-tile__n { color: var(--pf-pass); }
.proof-tile--flag .proof-tile__n { color: var(--pf-flag-ink); }
.proof-tile--err .proof-tile__n { color: var(--pf-err); }

/* --- the units: one square per unit, anonymous, in id order */
.units { display: grid; grid-template-columns: repeat(auto-fill, minmax(22px, 1fr)); gap: 5px; margin: 0 0 14px; padding: 0; list-style: none; max-width: 760px; }
.units__u { aspect-ratio: 1; border-radius: var(--pf-unit-radius); background: var(--pf-na); border: 1px solid rgba(0, 0, 0, .08); }
.units__u--pass { background: var(--pf-pass); }
.units__u--flag { background: var(--pf-flag); }
.units__u--err { background: var(--pf-err); }
.units__u--na { background: var(--pf-na); }
.motion .units .units__u { opacity: 0; transform: scale(.4); transition: opacity .35s var(--pf-ease), transform .45s var(--pf-ease); }
.motion .units.is-on .units__u { opacity: 1; transform: none; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; padding: 0; list-style: none; font-size: .92rem; color: var(--pf-muted); }
.legend li::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px; border-radius: var(--pf-unit-radius); background: var(--pf-na); }
.legend .l-pass::before { background: var(--pf-pass); }
.legend .l-flag::before { background: var(--pf-flag); }
.legend .l-err::before { background: var(--pf-err); }

/* --- bars: a breakdown by rule or kind */
.bars { display: grid; gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; max-width: 820px; }
.bars li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 3.2rem; gap: 12px; align-items: center; }
@media (max-width: 620px) { .bars li { grid-template-columns: minmax(0, 1fr) 3rem; } .bars .bars__track { grid-column: 1 / -1; grid-row: 2; } }
.bars__k { font-family: var(--pf-mono); font-size: .86rem; overflow-wrap: anywhere; }
.bars__track { height: 12px; background: var(--pf-track); border-radius: 99px; overflow: hidden; }
.bars__fill { display: block; height: 100%; width: var(--w); background: var(--pf-bar); border-radius: 99px; }
.motion .bars .bars__fill { width: 0; transition: width .9s var(--pf-ease); }
.motion .bars.is-on .bars__fill { width: var(--w); }
.bars__n { font-family: var(--pf-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* --- tables */
.proof-tablewrap { overflow-x: auto; margin: 0 0 28px; border: 1px solid var(--pf-rule); border-radius: var(--pf-radius); background: var(--pf-card); box-shadow: var(--pf-shadow); }
.proof-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.proof-table caption { text-align: left; padding: 14px 16px 4px; font-weight: 700; color: var(--pf-head); }
.proof-table th, .proof-table td { padding: 10px 16px; text-align: left; border-top: 1px solid var(--pf-rule); vertical-align: top; }
.proof-table thead th { font-family: var(--pf-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pf-muted); border-top: 0; }
.proof-table td.num, .proof-table th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--pf-mono); }
.proof-table code { font-size: .88em; }

.proof-grid2 { display: grid; gap: 28px; }
@media (min-width: 900px) { .proof-grid2 { grid-template-columns: 1fr 1fr; } }
.proof-h3 { font-family: var(--pf-display); font-size: 1.25rem; margin: 0 0 12px; color: var(--pf-head); }

/* --- the command */
.proof-cmd { position: relative; margin: 0 0 16px; background: var(--pf-code-bg); color: var(--pf-code-ink); border-radius: var(--pf-radius); padding: 16px 92px 16px 18px; font-family: var(--pf-mono); font-size: .9rem; line-height: 1.55; overflow: hidden; }
.proof-cmd code { display: block; white-space: pre; overflow-x: auto; background: none; color: inherit; padding: 0 0 4px; }
.proof-copy { position: absolute; top: 10px; right: 10px; font: 600 .8rem/1 var(--pf-mono); padding: 8px 10px; border-radius: var(--pf-radius); border: 1px solid var(--pf-code-rule); background: transparent; color: var(--pf-code-ink); cursor: pointer; }
.proof-copy:hover { background: var(--pf-code-rule); }
.proof-copy:focus-visible { outline: 3px solid var(--pf-focus); outline-offset: 2px; }
.proof-cmd__label { margin: 0 0 8px; font-weight: 700; }

/* --- limits */
.proof-limits { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 78ch; }
.proof-limits li { padding: 14px 16px 14px 44px; position: relative; background: var(--pf-card); border: 1px solid var(--pf-rule); border-radius: var(--pf-radius); line-height: 1.5; }
.proof-limits li::before { content: "\2715"; position: absolute; left: 16px; top: 13px; font-weight: 700; color: var(--pf-err); }
.proof-note { max-width: 72ch; color: var(--pf-muted); line-height: 1.55; }
.proof-joke { font-family: var(--pf-joke-font, var(--pf-display)); font-size: 1.15rem; color: var(--pf-head); margin: 28px 0 0; }

/* --- arrival */
.motion [data-arrive] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--pf-ease), transform .7s var(--pf-ease); }
.motion [data-arrive].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .units__u, .bars__fill, [data-arrive] { transition: none !important; opacity: 1 !important; transform: none !important; }
  .bars__fill { width: var(--w) !important; }
}
.bars + .proof-h3 { margin-top: 30px; }

/* PREFLIGHT: the annunciator panel. The hero is the glare shield, each app is a lamp on the panel. */
.proof-hero { background-image: linear-gradient(180deg, var(--deck) 0, var(--deck-edge) 100%); border-bottom: 4px solid #0A0F11; }
.proof-hero__line { letter-spacing: .01em; font-size: clamp(1.7rem, 4.4vw, 3rem); line-height: 1.12; }
.proof-hero .n { color: var(--lit); text-shadow: 0 0 18px rgba(108, 242, 166, .45); }
.units { background: var(--deck-edge); padding: 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px #0A0F11; }
.units__u { box-shadow: 0 0 0 1px #0A0F11; }
.units__u--flag { background: var(--amber); box-shadow: 0 0 0 1px #0A0F11, 0 0 10px rgba(255, 201, 74, .45); }
.units__u--err { background: var(--red-lit); box-shadow: 0 0 0 1px #0A0F11, 0 0 10px rgba(255, 107, 94, .55); }
.motion .units .units__u { opacity: 1; transform: none; filter: brightness(.18) saturate(.3); transition: filter .4s var(--pf-ease); }
.motion .units.is-on .units__u { filter: none; }
.proof-tile { border-top: 5px solid var(--green); }
.proof-tile--flag { border-top-color: var(--amber); }
.proof-tile--err { border-top-color: var(--red); }
.proof-tile--na { border-top-color: var(--rule); }
.proof-note + .proof-h3 { margin-top: 26px; }
.proof-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }