:root {
  --page: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink-2: #52514e; --muted: #6f6d67; --line: #e6e5e1;
  --accent: #2a78d6; --accent-track: #cde2fb; --accent-ink: #1c5cab;
  --good: #21812a; --warning: #fab219; --serious: #ac4f29; --critical: #d03b3b;
  --art-faint: #8e9fb4; --art-ink: #17283e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781; --line: #33332f;
    --accent: #3987e5; --accent-track: #104281; --accent-ink: #86b6ef;
    --art-faint: #78899f; --art-ink: #afc0d5; --good: #78ca75; --critical: #f08b8b; --serious: #ee9e7f;
  }
}
:root[data-theme="dark"] {
  --page: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781; --line: #33332f;
  --accent: #3987e5; --accent-track: #104281; --accent-ink: #86b6ef; --art-faint: #78899f; --art-ink: #afc0d5; --good: #78ca75; --critical: #f08b8b; --serious: #ee9e7f;
}
* { box-sizing: border-box; }
html { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.skip-link { position: absolute; top: 8px; left: 16px; z-index: 10; transform: translateY(-200%); background: var(--surface); padding: 8px 12px; border: 1px solid var(--line); border-radius: 5px; }
.skip-link:focus { transform: none; }
.launch-notice { margin: 0; padding: 6px 16px; text-align: center; font-size: 13px; color: var(--ink-2); background: color-mix(in srgb, var(--warning) 12%, var(--page)); border-bottom: 1px solid color-mix(in srgb, var(--warning) 30%, var(--line)); }
code, pre { font: 0.92em ui-monospace, SFMono-Regular, Menlo, monospace; }
code { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.prose code { overflow-wrap: anywhere; }
pre { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 12px; overflow-x: auto; }
pre code { border: 0; padding: 0; background: none; }
.top, main, footer { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
main { position: relative; }
.top { display: flex; align-items: baseline; gap: 24px; padding-top: 18px; padding-bottom: 8px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: -0.01em; }
.brand span { color: var(--accent-ink); }
nav { display: flex; gap: 18px; flex-wrap: wrap; }
nav a { color: var(--ink-2); }
main { padding-bottom: 48px; }
footer { color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding-top: 16px; padding-bottom: 32px; }
h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; margin: 24px 0 8px; }
h2 { font-size: 19px; margin: 32px 0 10px; }
h2 .muted, h1 .muted { font-weight: 400; font-size: 0.75em; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* boards */
.boards { margin: 48px 0 32px; }
.board-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px 24px; }
.board-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.board-title-row h2 { margin: 0; font-size: 18px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; padding: 2px; background: var(--page); }
.seg-btn, .chart-btn, .upper-btn, .lower-btn { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 5px; cursor: pointer; }
.seg-btn:hover, .chart-btn:hover, .upper-btn:hover, .lower-btn:hover { color: var(--ink); }
.seg-btn[aria-pressed="true"], .chart-btn[aria-pressed="true"], .upper-btn[aria-pressed="true"], .lower-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.board-current { text-align: right; }
.board-current .board-big { margin: 0; font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.board-current .board-big .lb-unit { font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.board-scroll { margin-top: 16px; max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.lb-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 14px; border: 0; }
.lb-table thead th { position: sticky; top: 0; z-index: 1; background: var(--page); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.lb-table th.r, .lb-table td.r { text-align: right; }
.sort-btn { border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.sort-btn:hover, .sort-btn[aria-pressed="true"] { color: var(--ink); }
.sort-btn .arr { opacity: .6; font-size: 11px; letter-spacing: 0; }
.lb-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.lb-table tr:last-child td { border-bottom: 0; }
.lb-row:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.lb-row.current td { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.lb-row.pending td { color: var(--muted); }
.lb-row.pending a { color: inherit; }
.lb-solver { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-rank { display: inline-block; width: 22px; flex: none; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.lb-avatar { display: inline-block; width: 20px; height: 20px; flex: none; }
.lb-avatar img, .lb-avatar-blank { width: 20px; height: 20px; border-radius: 50%; display: block; background: var(--line); }
.lb-login { font-weight: 600; }
.lb-model { display: inline-block; margin-left: 4px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 5px; font-size: 11px; color: var(--ink-2); background: var(--page); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.lb-score { font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-score a { color: inherit; }
.lb-unit { font-size: 12px; font-weight: 400; color: var(--muted); }
.lb-gain { font-size: 13px; font-variant-numeric: tabular-nums; }
.lb-gain .good { color: var(--good); font-weight: 600; }
.lb-date { font-size: 13px; }
.lb-empty { padding: 18px; text-align: center; }
@media (max-width: 720px) { .board-current { text-align: left; } .board-current .board-big { font-size: 30px; } .board-panel { padding: 16px; } }
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--line); font-size: 14px; vertical-align: top; }
thead th { border-top: 0; color: var(--ink-2); font-weight: 500; font-size: 13px; white-space: nowrap; }
.nowrap { white-space: nowrap; }
td.num, th.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.tag { display: inline-block; font-size: 11px; padding: 0 6px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); margin-left: 4px; vertical-align: middle; }
.status { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.status::before { content: "● "; }
.s-verified { color: var(--good); border-color: var(--good); }
.s-verifying, .s-pending { color: var(--accent-ink); border-color: var(--accent); }
.s-rejected, .s-policy_rejected { color: var(--critical); border-color: var(--critical); }
.s-timeout, .s-failed { color: var(--serious); border-color: var(--serious); }
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 16px 0; }
dl.facts dt { color: var(--ink-2); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
pre.why { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.prose { max-width: 78ch; }
.prose h3 { font-size: 16px; margin: 26px 0 6px; }
.hall { max-width: 900px; }
.hall-heading { margin: 34px 0 38px; }
.hall-heading h1 { font-size: 34px; margin: 0 0 10px; }
.hall-heading p { color: var(--ink-2); margin: 0; }
.hall-era + .hall-era { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line); }
.hall-change { margin-bottom: 24px; }
.hall-change .hall-date { color: var(--muted); font-size: 12px; margin: 0 0 6px; }
.hall-change h2 { margin: 0 0 6px; font-size: 19px; }
.hall-change p { margin: 0; color: var(--ink-2); font-size: 14px; }
.hall-change .hall-rule-links { margin-top: 8px; font-size: 13px; }
.hall-track { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin: 0 0 18px; overflow: hidden; }
.hall-track-heading { padding: 14px 20px; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; border-bottom: 1px solid var(--line); }
.hall-track-heading h3 { margin: 0; font-size: 15px; font-weight: 600; }
.hall-generality { font-size: 12px; color: var(--muted); }
.hall-entries { list-style: none; margin: 0; padding: 0; }
.hall-entry { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px 20px; scroll-margin-top: 24px; }
.hall-entry + .hall-entry { border-top: 1px solid var(--line); }
.hall-entry:target { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.hall-score { display: flex; flex-direction: column; gap: 3px; }
.hall-score strong { font-size: 34px; line-height: 1; letter-spacing: -.03em; font-weight: 600; font-variant-numeric: tabular-nums; }
.hall-score > span { font-size: 12px; color: var(--muted); }
.hall-author { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.hall-author > span { min-width: 0; }
.hall-avatar { width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover; background: var(--line); }
.hall-verified { font-size: 12px; color: var(--muted); margin: 5px 0 0; display: flex; flex-wrap: wrap; gap: 0 4px; }
.hall-record { margin-left: 5px; color: var(--accent-ink); }
.hall-assistance { margin: 4px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.hall-links { display: flex; gap: 16px; font-size: 13px; white-space: nowrap; }
nav a[aria-current="page"] { color: var(--ink); }
@media (max-width: 600px) {
  .hall-heading { margin: 28px 0; }
  .hall-heading h1 { font-size: 30px; }
  .hall-track-heading { padding: 14px 16px; }
  .hall-entry { grid-template-columns: 72px minmax(0, 1fr); gap: 12px 14px; padding: 20px 16px; }
  .hall-score strong { font-size: 30px; }
  .hall-score > span { font-size: 10px; }
  .hall-links { grid-column: 2; }
  .hall-record { width: 100%; margin: 2px 0 0; }
}
.prose table { width: auto; }
.avatar { width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; margin-right: 8px; }

/* Shared lower/upper colors for the DAG figures; framework chart colors are defined below. */
:root { --series-1: #2a78d6; --series-2: #246dc2; --art-recomputed: #3f4fc4; --art-revealed: #e3a21a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --series-1: #3987e5; --series-2: #79b0f2; --art-recomputed: #7d8cf0; --art-revealed: #f2bd4b; } }
:root[data-theme="dark"] { --series-1: #3987e5; --series-2: #79b0f2; --art-recomputed: #7d8cf0; --art-revealed: #f2bd4b; }
.chart { margin: 8px 0 0; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 12px 8px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart figcaption { font-size: 13px; margin-top: 6px; }
.record-chart .grid { stroke: var(--line); stroke-width: 1; }
.record-chart .axis { stroke: var(--line); stroke-width: 1; }
.record-chart .tick { fill: var(--muted); font-size: 12px; font-family: inherit; }
.record-chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.record-chart .mark { stroke: var(--surface); stroke-width: 2; }
.record-chart .hit-area { fill: transparent; stroke: none; }
.record-chart .label { font-size: 13px; font-weight: 600; fill: var(--ink); stroke: none; font-family: inherit; }
.record-chart .crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.tooltip { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 13px; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 2; }

/* the scheme, drawn beside the hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; margin: 16px 0 20px; }
.art-wrap { pointer-events: none; width: 100%; }
.scheme-art { width: 100%; height: auto; display: block; margin: 0 auto;
  --art-lid: var(--art-ink); --art-shade: #1b2433; --art-bead: #f3f6fa; --art-current: #5a68ff; --art-current-glow: #8b96ff; --art-spark: #ffffff;
  --art-sclera-0: #ffffff; --art-sclera-1: #f5f4f2; --art-sclera-2: #e4e0dc; --art-sclera-3: #c2bab4;
  --art-iris-0: #9eb1ca; --art-iris-1: #c6d3e4; --art-iris-2: #e2e9f2; --art-iris-3: #e8eef5; --art-iris-4: #c9d6e6;
  --art-iris-5: #a9b9ce; --art-iris-6: #4d5d78; --art-iris-7: #27324a;
  --art-fibre-dark: #6f86a8; --art-fibre-light: #ffffff; --art-pupil: #070a10; --art-pupil-edge: #1d2638;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scheme-art {
  --art-shade: #000000; --art-bead: #1a2130; --art-current: #9aa6ff; --art-current-glow: #6f7dff; --art-spark: #ffffff;
  --art-sclera-0: #b4bac4; --art-sclera-1: #969ea9; --art-sclera-2: #636a75; --art-sclera-3: #2e323a;
  --art-iris-0: #121826; --art-iris-1: #1b2335; --art-iris-2: #232d43; --art-iris-3: #27324a; --art-iris-4: #212a3f;
  --art-iris-5: #182033; --art-iris-6: #0c111b; --art-iris-7: #04060a;
  --art-fibre-dark: #05080f; --art-fibre-light: #7084ab; --art-pupil: #000000; --art-pupil-edge: #070a10;
} }
:root[data-theme="dark"] .scheme-art {
  --art-shade: #000000; --art-bead: #1a2130; --art-current: #9aa6ff; --art-current-glow: #6f7dff; --art-spark: #ffffff;
  --art-sclera-0: #b4bac4; --art-sclera-1: #969ea9; --art-sclera-2: #636a75; --art-sclera-3: #2e323a;
  --art-iris-0: #121826; --art-iris-1: #1b2335; --art-iris-2: #232d43; --art-iris-3: #27324a; --art-iris-4: #212a3f;
  --art-iris-5: #182033; --art-iris-6: #0c111b; --art-iris-7: #04060a;
  --art-fibre-dark: #05080f; --art-fibre-light: #7084ab; --art-pupil: #000000; --art-pupil-edge: #070a10;
}
/* eyeball, iris and light: gradient stops take their colours from the tokens above */
.scheme-art .sclera-0 { stop-color: var(--art-sclera-0); } .scheme-art .sclera-1 { stop-color: var(--art-sclera-1); }
.scheme-art .sclera-2 { stop-color: var(--art-sclera-2); } .scheme-art .sclera-3 { stop-color: var(--art-sclera-3); }
.scheme-art .limbus-0 { stop-color: var(--art-shade); stop-opacity: 0; } .scheme-art .limbus-1 { stop-color: var(--art-shade); stop-opacity: .2; }
.scheme-art .limbus-2 { stop-color: var(--art-shade); stop-opacity: 0; }
.scheme-art .iris-0 { stop-color: var(--art-iris-0); } .scheme-art .iris-1 { stop-color: var(--art-iris-1); }
.scheme-art .iris-2 { stop-color: var(--art-iris-2); } .scheme-art .iris-3 { stop-color: var(--art-iris-3); }
.scheme-art .iris-4 { stop-color: var(--art-iris-4); } .scheme-art .iris-5 { stop-color: var(--art-iris-5); }
.scheme-art .iris-6 { stop-color: var(--art-iris-6); } .scheme-art .iris-7 { stop-color: var(--art-iris-7); }
.scheme-art .caustic-0 { stop-color: #fff; stop-opacity: .34; } .scheme-art .caustic-1 { stop-color: #fff; stop-opacity: 0; }
.scheme-art .pupil-0, .scheme-art .pupil-1 { stop-color: var(--art-pupil); } .scheme-art .pupil-2 { stop-color: var(--art-pupil-edge); stop-opacity: .9; }
.scheme-art .pupil-3 { stop-color: var(--art-pupil-edge); stop-opacity: 0; }
.scheme-art .rim-0 { stop-color: var(--art-current-glow); stop-opacity: 0; } .scheme-art .rim-1 { stop-color: var(--art-current-glow); stop-opacity: .55; }
.scheme-art .rim-2 { stop-color: var(--art-current); stop-opacity: .9; } .scheme-art .rim-3 { stop-color: var(--art-current-glow); stop-opacity: .45; }
.scheme-art .rim-4 { stop-color: var(--art-current-glow); stop-opacity: 0; }
.scheme-art .gloss-0 { stop-color: #fff; stop-opacity: .22; } .scheme-art .gloss-1 { stop-color: #fff; stop-opacity: 0; }
.scheme-art .spark-0 { stop-color: var(--art-spark); } .scheme-art .spark-1 { stop-color: var(--art-spark); stop-opacity: .95; }
.scheme-art .spark-2 { stop-color: var(--art-current); stop-opacity: .5; } .scheme-art .spark-3 { stop-color: var(--art-current-glow); stop-opacity: 0; }
.scheme-art .catch-0, .scheme-art .catch-1 { stop-color: #fff; } .scheme-art .catch-2 { stop-color: #fff; stop-opacity: .75; }
.scheme-art .iris-boundary { stroke: var(--art-iris-7); stroke-width: 1; stroke-opacity: .5; }
.scheme-art .iris-fibre { fill: none; stroke-linecap: round; }
.scheme-art .iris-fibre.dark { stroke: var(--art-fibre-dark); stroke-width: .7; stroke-opacity: .22; }
.scheme-art .iris-fibre.light { stroke: var(--art-fibre-light); stroke-width: .9; stroke-opacity: .38; }
.scheme-art .collarette { fill: none; stroke: var(--art-fibre-dark); stroke-width: 1.2; stroke-opacity: .2; }
/* the scheme */
.scheme-art .e { stroke: var(--art-faint); stroke-width: 1.02; stroke-opacity: .75; }
.scheme-art .e.recomputed { stroke: var(--art-recomputed); stroke-width: 1.42; stroke-opacity: .92; }
.scheme-art .n { fill: var(--art-bead); fill-opacity: .8; stroke: var(--art-faint); stroke-width: 1.12; }
.scheme-art .n.recomputed, .scheme-art .n.revealed { fill-opacity: 1; }
.scheme-art .n.recomputed { fill: var(--art-recomputed); stroke: var(--art-recomputed); }
.scheme-art .n.revealed { fill: var(--art-revealed); stroke: var(--art-revealed); }
/* before the verifier's current reaches them, recomputed values wait, faint and hollow */
.scheme-art .e.recomputed.wait { stroke-opacity: .2; }
.scheme-art .n.recomputed.wait { fill: var(--art-bead); fill-opacity: .8; stroke-opacity: .6; }
/* a hash whose first inputs have arrived holds a faint steady glow until the last one does */
.scheme-art .n.recomputed.wait.fed { stroke: var(--art-current); stroke-opacity: .95; stroke-width: 1.6; }
.scheme-art .pupil-boundary { fill: none; stroke: var(--art-pupil); stroke-width: 1.4; stroke-opacity: .55; }
/* the verifier's current, drawn without filters: a wide faint glow, a thin bright core, a spark */
.scheme-art .current line { fill: none; stroke-linecap: round; }
.scheme-art .current .trace { stroke: var(--art-recomputed); stroke-width: 1.42; stroke-opacity: .92; }
.scheme-art .current .glow { stroke: var(--art-current-glow); stroke-width: 5; stroke-opacity: .3; }
.scheme-art .current .core { stroke: var(--art-current); stroke-width: 1.6; }
.scheme-art .current .pulse { fill: none; stroke: var(--art-current); }
.scheme-art .current .pulse.gold { stroke: var(--art-revealed); }
/* lids, their shade on the eyeball and the reflections of the cornea */
.scheme-art .lid-shade { fill: none; stroke: var(--art-shade); stroke-opacity: .02; }
.scheme-art .waterline { fill: none; stroke: #fff; stroke-width: 3; stroke-opacity: .35; }
.scheme-art .catchlight-2 { fill: #fff; opacity: .45; }
.scheme-art .lid { fill: var(--art-lid); stroke: var(--art-lid); stroke-width: 1; stroke-linejoin: round; }
.scheme-art .lid-crease { fill: var(--art-lid); fill-opacity: .2; }
.hero h1 { font-size: 34px; }
@media (max-width: 720px) { .hero { grid-template-columns: 1fr; } .art-wrap { max-width: 420px; margin: 0 auto; } }

/* leaderboard, after better.codes */
.board-stats { margin: 0 0 8px; font-size: 14px; }

table.params { max-width: 78ch; }
table.params th { color: var(--ink-2); font-weight: 500; }
table.params th:first-child { width: 44%; }

/* Small explanatory diagrams use the page palette and remain readable on narrow screens. */
.rules-diagram { margin: 22px 0 28px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.rules-diagram-scroll { overflow-x: auto; }
.rules-diagram-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rules-diagram svg { display: block; width: 100%; min-width: 640px; }
.rules-diagram figcaption { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin-top: 12px; }
.rules-diagram marker path { fill: var(--ink-2); }
.diagram-edges { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.diagram-node { fill: var(--page); stroke: var(--ink-2); stroke-width: 1.5; }
.diagram-reveal { fill: var(--accent-track); stroke: var(--accent); stroke-width: 2; }
.diagram-heading, .diagram-note { fill: var(--ink-2); font: 13px system-ui, sans-serif; }
.diagram-heading { font-weight: 600; }
.diagram-text { fill: var(--ink); font: 15px system-ui, sans-serif; }
.diagram-emphasis { fill: var(--accent-ink); font: 600 15px system-ui, sans-serif; }
.diagram-small { font-size: 12px; }
.diagram-sub { font-size: 10px; }
.wots-diagram { max-width: 440px; margin: 18px auto 24px; padding: 0; border: 0; background: none; }
.wots-diagram svg { min-width: 0; }
.wots-diagram .diagram-edges { stroke: var(--line); }
.wots-diagram marker path { fill: var(--line); }
.wots-diagram .diagram-node { fill: var(--surface); stroke: var(--muted); }
.wots-diagram .diagram-node + .diagram-text { fill: var(--muted); }
.wots-diagram .diagram-reveal { fill: var(--ink); stroke: var(--ink); stroke-width: 1.5; }
.wots-diagram .diagram-reveal + .diagram-emphasis { fill: var(--surface); }
.wots-diagram .wots-verify { stroke: var(--ink); stroke-width: 2; }
.wots-diagram .wots-verify-arrow path { fill: var(--ink); }

/* rules page: each rule is a line that unfolds into its explanation */
.rules-list { max-width: 86ch; margin: 6px 0 8px; border-top: 1px solid var(--line); }
.rules-list details { border-bottom: 1px solid var(--line); }
.rules-list summary { list-style: none; cursor: pointer; padding: 13px 8px 13px 30px; position: relative; color: var(--ink-2); line-height: 1.5; border-radius: 6px; }
.rules-list summary::-webkit-details-marker { display: none; }
.rules-list summary::before { content: ""; position: absolute; left: 10px; top: 21px; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .18s ease; }
.rules-list details[open] > summary::before { transform: rotate(45deg); top: 19px; }
.rules-list summary:hover { background: var(--surface); color: var(--ink); }
.rules-list summary:hover::before { border-color: var(--accent); }
.rules-list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rules-list summary h2 { display: inline; margin: 0; font-size: 16px; line-height: inherit; color: var(--ink); font-weight: 600; }
.rules-list .more { padding: 2px 8px 22px 30px; max-width: none; }
.rules-list .more > p:first-child { margin-top: 4px; }
.rules-list details[open] > summary { color: var(--ink); }
@media (max-width: 720px) { .rules-list summary { padding-left: 26px; } .rules-list .more { padding-left: 10px; } .rules-list summary::before { left: 6px; } }
.framework-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.framework-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 5px; color: var(--muted); text-decoration: none; }
.framework-tabs a:hover { color: var(--accent-ink); }
.framework-tabs a[aria-current="page"] { color: var(--accent-ink); background: var(--accent-track); }
.framework-status { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }

/* Each lower class has its own color; orange identifies the upper bound. */
:root { --oracle-algorithm: #d0402b; --generality-1: #d99a0f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --oracle-algorithm: #f0664f; --generality-1: #f2c14e; }
}
:root[data-theme="dark"] { --oracle-algorithm: #f0664f; --generality-1: #f2c14e; }
.f-oracle-algorithm { --framework-color: var(--oracle-algorithm); }
.f-generality-1 { --framework-color: var(--generality-1); }
.section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.section-heading h2 { margin: 0; font-size: 20px; }
.section-heading > a, .section-heading > span { font-size: 13px; }
.chart-heading { justify-content: flex-start; gap: 8px 18px; }
.section-intro { max-width: 76ch; margin: 10px 0 20px; color: var(--ink-2); }
.framework-overview { margin: 20px 0 36px; }
.framework-cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
.framework-card { display: flex; flex-direction: column; min-width: 0; padding: 10px 14px; border: 2px solid var(--framework-color); border-radius: 8px; background: var(--surface); }
.framework-card h3 { margin: 0 0 4px; font-size: 19px; }
.framework-card h3 a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; color: var(--ink); }
.framework-generality { color: var(--ink); font-size: inherit; font-weight: 700; white-space: nowrap; }
.bound-group { margin: 16px 0; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--line) 30%, var(--page)); }
.bound-row-title { margin: 0 0 12px; font-size: 24px; font-weight: 650; color: var(--ink); }
.bound-row-hint { margin-left: 10px; font-size: 14px; font-weight: 500; color: var(--muted); }
.framework-card > p { margin: 0 0 8px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.framework-bounds { margin: auto 0 4px; padding-top: 4px; }
.framework-bounds dt { color: var(--ink-2); font-size: 12px; line-height: 1.3; }
.framework-bounds dd { margin: 0; font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.framework-unit { color: var(--ink-2); font-size: 12px; font-weight: 400; }
.framework-card > .framework-record { margin: 0; font-size: 12px; border-top: 1px solid var(--line); padding-top: 6px; }
.demo-note { color: var(--ink-2); font-size: 13px; margin: 10px 0; }
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 16px 0 12px; font-size: 12px; }
.series-swatch { display: inline-block; width: 24px; border-top: 2px solid var(--framework-color); margin-right: 7px; vertical-align: middle; }
.pending .series-swatch { border-top-style: dotted; opacity: .65; }
.chart figcaption { color: var(--ink-2); padding: 6px 4px; }
.chart-plot { overflow-x: auto; }
.chart-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.record-chart .chart-series .line, .record-chart .chart-series .connector { stroke: var(--framework-color); }
.record-chart .chart-series .connector { fill: none; stroke-width: 1; opacity: .6; }
.record-chart .chart-series.upper .line { stroke-dasharray: none; }
.record-chart .chart-series .mark { fill: var(--framework-color); }
.record-chart .chart-series .label { font-size: 12px; font-weight: 500; }
.record-chart .chart-series .label-name { fill: var(--framework-color); }
.record-chart .chart-series .label-dot { fill: var(--muted); }
.record-chart .chart-series .label-value { fill: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.record-chart .chart-series.pending .line { stroke-dasharray: 2 6; opacity: .6; }
.record-chart .chart-reference .line { stroke: var(--muted); stroke-dasharray: 1 6; stroke-linecap: round; }
.record-chart .chart-reference .connector { fill: none; stroke: var(--muted); stroke-width: 1; opacity: .6; }
.record-chart .chart-reference .label { fill: var(--muted); font-size: 12px; font-weight: 500; }
.record-chart .chart-reference a:hover .label, .record-chart .chart-reference a:focus .label { fill: var(--ink); text-decoration: underline; }
.record-chart .chart-record:focus { outline: none; }
.record-chart .chart-record:focus .mark { stroke: var(--ink); stroke-width: 3; }
.tooltip { max-width: min(340px, calc(100% - 16px)); }
.board-filters { margin-top: 18px; padding-bottom: 12px; gap: 4px; }
.upper-switch, .lower-switch { margin: 18px 0 4px; }
.progress { margin-top: 40px; }
.progress-panel { margin-top: 8px; padding: 4px 16px 16px; }
.lb-track a { color: var(--ink); text-decoration: none; }
.lb-track a:hover { text-decoration: underline; }
.board-filters a { font-size: 13px; padding: 6px 10px; }
.board-explanation { font-size: 13px; color: var(--ink-2); margin: 12px 0 0; }
.framework-board { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.framework-board:first-child { border-top: 0; padding-top: 0; }
.framework-board-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.framework-board-head h3 { margin: 0 0 4px; font-size: 17px; }
.framework-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--framework-color); }
.framework-board .board-big { font-size: 28px; }
.framework-board .board-stats { font-size: 12px; color: var(--ink-2); margin: 0; }
.submission-scope { max-width: 85ch; color: var(--ink-2); }
.error-page { margin: 64px 0; }
.error-page h1 { margin-top: 8px; }
[hidden] { display: none !important; }
@media (max-width: 720px) {
  .framework-cards { grid-template-columns: 1fr; }
  .framework-card .framework-bounds { max-width: 280px; }
  .framework-board-head { flex-wrap: wrap; }
  .chart { padding: 8px 4px; }
  .chart-plot .record-chart { min-width: 760px; }
  .chart-legend { gap: 6px 12px; }
  .lb-table { min-width: 620px; }
}
.upper-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; margin: 0; container-type: inline-size; }
.upper-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 12px 16px; margin: 0; border: 2px solid var(--series-2); border-radius: 8px; background: var(--surface); }
.upper-card h3 { margin: 7px 0; font-size: 19px; }
.upper-card p { margin: 0; color: var(--ink-2); font-size: 14px; }
.upper-card h3 a { color: var(--ink); }
.upper-score { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: baseline; column-gap: 8px; font-size: 12px; white-space: nowrap; }
.upper-score .muted { grid-column: 1 / -1; text-align: right; }
.upper-score > span:last-child { color: var(--ink-2); }
.upper-score strong { font-size: 34px; font-weight: 600; line-height: 1.2; }
.no-record { color: var(--muted); font-size: 15px; font-weight: 400; }
.upper-score > .no-record { grid-column: 1 / -1; text-align: right; color: var(--muted); font-size: 15px; }
.card-program-size { grid-column: 1 / -1; justify-self: end; display: grid; gap: 2px; text-align: right; margin-top: 4px; font-size: 12px; }
.upper-card-note { grid-column: 1 / -1; margin: 8px 0 0; font-size: 13px; line-height: 1.45; }
/* Three tracks need full-width headings instead of competing with their scores. */
.upper-cards:has(> :nth-child(3)) .upper-card { grid-template-columns: 1fr; gap: 12px; align-content: start; }
.upper-cards:has(> :nth-child(3)) .upper-score { justify-content: start; }
.upper-cards:has(> :nth-child(3)) .upper-score .muted,
.upper-cards:has(> :nth-child(3)) .upper-score > .no-record { text-align: left; }
.upper-cards:has(> :nth-child(3)) .card-program-size { justify-self: start; text-align: left; }
@container (min-width: 614px) and (max-width: 927.98px) {
  .upper-card:last-child:nth-child(3) { grid-column: 1 / -1; }
}
.card-program-size a { color: var(--ink-2); }
.card-program-size span { color: var(--muted); }
.lb-program-size, .lb-embedded-data { font-variant-numeric: tabular-nums; }
.upper-board { padding-top: 24px; }
.upper-board h3 { margin: 0; }
.signature-scheme { margin: 32px 0; padding-top: 24px; border-top: 1px solid var(--line); }
.signature-scheme h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.signature-scheme-frame { max-width: 760px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #fcfcfb; }
.signature-scheme-image { display: block; width: 100%; min-width: 640px; height: auto; }
.cycle-breakdown { margin: 32px 0; padding-top: 24px; border-top: 1px solid var(--line); }
.cycle-table-title { font-size: 15px; font-weight: 600; margin: 24px 0 12px; }
.cycle-table-wrap { max-width: 760px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.cycle-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cycle-table { width: 100%; table-layout: fixed; margin: 0; border: 0; min-width: 620px; }
.cycle-table caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.cycle-table th, .cycle-table td { padding: 8px 14px; }
.cycle-table th[scope="row"] { font-weight: 500; }
.cycle-table thead th:nth-child(2) { width: 100px; }
.cycle-table thead th:last-child { width: 180px; text-align: right; }
.cycle-table .num { text-align: right; white-space: nowrap; }
.cycle-table thead th { color: var(--ink-2); font-size: 12px; }
.cycle-syscall, .cycle-input { margin-left: 8px; font-size: 11px; color: var(--muted); font-weight: 400; }
.cycle-share { text-align: right; white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums; }
.cycle-share > span { display: inline-block; width: 5ch; text-align: right; }
.cycle-share meter { width: 75px; height: 9px; margin-right: 10px; vertical-align: middle; background: var(--line); border-radius: 3px; }
.cycle-share meter::-webkit-meter-bar { border: 0; background: var(--line); }
.cycle-share meter::-webkit-meter-optimum-value { background: var(--series-2); }
.cycle-share meter::-moz-meter-bar { background: var(--series-2); }
.cycle-table tfoot { border-top: 2px solid var(--line); font-weight: 650; }
.cycle-table tfoot th[scope="row"] { font-weight: 650; }
.f-oracle-algorithm.upper { --framework-color: var(--series-2); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media (max-width: 720px) {
  .bound-group { padding: 12px 12px 14px; border-radius: 14px; }
  .upper-card { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; }
  .upper-score { justify-content: start; }
  .card-program-size { justify-self: start; text-align: left; }
  .upper-score .muted, .upper-score > .no-record { text-align: left; }
}

/* The single whole-word lower bound uses the full row. */
.framework-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; }
.framework-card h3, .framework-card > p { grid-column: 1; }
.framework-card .framework-bounds { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; padding: 0; text-align: right; }
.framework-card > .framework-record { border-top: 0; padding-top: 0; }
@media (max-width: 520px) {
  .framework-card { grid-template-columns: 1fr; }
  .framework-card .framework-bounds { grid-column: 1; grid-row: auto; text-align: left; margin: 4px 0 8px; }
}