/* Enoida — one stylesheet for every page.
   Four pages (two languages × landing/note) share this file so they cannot drift apart.
   Order: tokens, base, type, chrome, landing components, document components. */

/* ==================================================================== tokens */
:root {
  color-scheme: light dark;

  --ground:   #ffffff;
  --surface:  #fafafa;
  --ink:      #0a0a0a;
  --ink-soft: #404040;
  --muted:    #737373;
  --rule:     #e5e5e5;
  --rule-firm:#d4d4d4;
  --invert-bg:#0a0a0a;
  --invert-fg:#ffffff;
  --shadow:   0 1px 2px rgb(0 0 0 / 0.04), 0 24px 48px -24px rgb(0 0 0 / 0.12);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --shell:   68rem;
  --measure: 40rem;
}

/* The dark palette is defined once and referenced three times: by the system preference, and
   by each explicit choice. Components only ever read the tokens, never the media query, so
   an explicit choice wins in both directions without any component knowing about themes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:   #0a0a0a;
    --surface:  #141414;
    --ink:      #fafafa;
    --ink-soft: #d4d4d4;
    --muted:    #a3a3a3;
    --rule:     #262626;
    --rule-firm:#333333;
    --invert-bg:#fafafa;
    --invert-fg:#0a0a0a;
    --shadow:   0 1px 2px rgb(0 0 0 / 0.5), 0 24px 48px -24px rgb(0 0 0 / 0.8);
  }
}
:root[data-theme="dark"] {
  --ground:   #0a0a0a;
  --surface:  #141414;
  --ink:      #fafafa;
  --ink-soft: #d4d4d4;
  --muted:    #a3a3a3;
  --rule:     #262626;
  --rule-firm:#333333;
  --invert-bg:#fafafa;
  --invert-fg:#0a0a0a;
  --shadow:   0 1px 2px rgb(0 0 0 / 0.5), 0 24px 48px -24px rgb(0 0 0 / 0.8);
}
:root[data-theme="light"] {
  --ground:   #ffffff;
  --surface:  #fafafa;
  --ink:      #0a0a0a;
  --ink-soft: #404040;
  --muted:    #737373;
  --rule:     #e5e5e5;
  --rule-firm:#d4d4d4;
  --invert-bg:#0a0a0a;
  --invert-fg:#ffffff;
  --shadow:   0 1px 2px rgb(0 0 0 / 0.04), 0 24px 48px -24px rgb(0 0 0 / 0.12);
}

/* ====================================================================== base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* `env(safe-area-inset-*)` because the pages declare `viewport-fit=cover`: without it, content
   would sit under the rounded corners and the home indicator on a notched phone.
   The `0px` fallback is required, not defensive — `env()` with no fallback is invalid at
   computed-value time wherever the variable is unsupported, which drops the whole declaration
   and leaves the page with NO horizontal padding. Observed, not theorised. */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: max(1.25rem, env(safe-area-inset-left, 0px)) max(1.25rem, env(safe-area-inset-right, 0px));
}
@media (min-width: 30rem) {
  .shell { padding-inline: max(1.5rem, env(safe-area-inset-left, 0px)) max(1.5rem, env(safe-area-inset-right, 0px)); }
}
@media (min-width: 48rem) { .shell { padding-inline: 2.5rem; } }

.col { max-width: var(--measure); }

/* Long unbroken strings — a French compound, a URL in a source list, an identifier in the
   wallet figure — must wrap rather than push the page sideways. The body must never scroll
   horizontally; individual wide blocks scroll inside themselves instead. */
h1, h2, h3, p, li, td, th, blockquote { overflow-wrap: break-word; }
body { overflow-x: hidden; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

/* Visible only to assistive technology. Used for the control-group labels, which are obvious
   sighted but nameless to a screen reader. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================ typography */
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }

/* The lower bound of each clamp is set for a 320px phone, not for a desktop window shrunk to
   the same width — the headlines here are long sentences, and at 2.25rem the English hero ran
   to five lines on a small screen. */
h1 {
  font-size: clamp(1.9rem, 1.15rem + 3.9vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(1.45rem, 1.1rem + 1.75vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
}
h3 { font-size: 1.0625rem; line-height: 1.45; letter-spacing: -0.008em; }

p { margin: 0; }

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

.tag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.fine { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }

/* =================================================================== spacing */
.stack-xs { display: flex; flex-direction: column; gap: 0.5rem; }
.stack-sm { display: flex; flex-direction: column; gap: 0.85rem; }
.stack    { display: flex; flex-direction: column; gap: 1.5rem; }
.stack-lg { display: flex; flex-direction: column; gap: 2.5rem; }

/* ==================================================================== header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.topbar[data-scrolled="true"] { border-bottom-color: var(--rule); }

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.mark { width: 1.375rem; height: 1.375rem; flex: none; overflow: visible; }
.mark .bit { transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.wordmark:hover .mark .bit { transform: translateX(2.2px); }
@media (prefers-reduced-motion: reduce) {
  .mark .bit { transition: none; }
  .wordmark:hover .mark .bit { transform: none; }
}

/* The right-hand cluster: language, theme, contact. */
.chrome { display: flex; align-items: center; gap: 0.5rem; }

/* ============================================== segmented controls (shared) */
/* One track shape for both the language and theme pickers, so they read as a pair rather
   than as two unrelated widgets. Native <select> is deliberately not used: it cannot be
   styled consistently across platforms, and both of these have few enough options that a
   visible segmented control is faster than a menu. */
.seg {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--rule-firm);
  border-radius: 999px;
  background: var(--surface);
}

.seg > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  min-width: 1.75rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease;
}
.seg > *:hover { color: var(--ink); }

/* The current option. `aria-current` for the language links, `aria-checked` for the theme
   radios — the selector covers both so the two controls share one visual rule. */
.seg > [aria-current="true"],
.seg > [aria-checked="true"] {
  background: var(--invert-bg);
  color: var(--invert-fg);
}
.seg > [aria-current="true"]:hover,
.seg > [aria-checked="true"]:hover { color: var(--invert-fg); }

.seg svg { width: 0.9375rem; height: 0.9375rem; display: block; }

/* On a phone the contact pill is the first thing to go: it is repeated at the bottom of every
   page, and the two pickers are not. The wordmark keeps the mark and drops the letters. */
@media (max-width: 34rem) {
  .chrome .pill { display: none; }
  .wordmark span { display: none; }
  .chrome { gap: 0.375rem; }
}

/* Touch targets. 1.75rem is a comfortable size for a cursor and too small for a thumb, so on a
   touch device the whole control grows rather than the hit area being faked with padding. */
@media (pointer: coarse) {
  .seg > * { height: 2.125rem; min-width: 2.125rem; }
  .seg svg { width: 1.0625rem; height: 1.0625rem; }
}

/* =================================================================== buttons */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  background: var(--invert-bg);
  color: var(--invert-fg);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--invert-bg);
  transition: transform 0.16s ease, opacity 0.16s ease;
}
.pill:hover { opacity: 0.86; transform: translateY(-1px); }
.pill:active { transform: translateY(0); }

.pill-ghost { background: transparent; color: var(--ink); border-color: var(--rule-firm); }
.pill-ghost:hover { background: var(--surface); opacity: 1; }

.pill .arrow { transition: transform 0.16s ease; }
.pill:hover .arrow { transform: translateX(2px); }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ====================================================================== hero */
.hero {
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
  /* `padding-block`, NOT the `padding` shorthand: these elements also carry `.shell`, whose
     horizontal padding the shorthand would silently reset to zero. That is what pushed the
     hero text under the left edge of the screen on every phone. */
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 4.5rem);
}

/* ================================================================ disclosure */
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.panel-body { padding: 1.5rem 1.25rem; }
@media (min-width: 40rem) { .panel-body { padding: 1.75rem 1.75rem; } }

.fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-family: var(--mono);
  /* Scales down on a narrow screen so `resident_address` and its value both stay legible
     instead of the value being ellipsed away to nothing. */
  font-size: clamp(0.75rem, 0.62rem + 0.55vw, 0.875rem);
  line-height: 1.9;
}

.field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--muted);
  height: 1.9em;
  overflow: hidden;
  opacity: 1;
}
@media (min-width: 30rem) { .field { gap: 1.5rem; } }

/* The key must never be the thing that gets truncated: it is what makes the figure legible. */
.field .k { flex: none; }
.field .v { flex: 1 1 auto; min-width: 0; }

.field .k { white-space: nowrap; }
.field .v {
  color: var(--ink-soft);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field.is-answer, .field.is-answer .v { color: var(--ink); font-weight: 600; }

.panel-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.replay {
  font: inherit;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0.15rem 0.35rem;
  margin: -0.15rem -0.35rem -0.15rem auto;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--rule-firm);
}
.replay:hover { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .animate .field {
    transition: opacity 0.34s ease, height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.34s ease, filter 0.34s ease;
  }
  .animate .field[data-state="gone"] {
    opacity: 0; height: 0; transform: translateX(-6px); filter: blur(2px);
  }
  .animate .field[data-state="pending"] { opacity: 0; transform: translateY(4px); }
}

/* ================================================================== sections */
section { padding: clamp(3.25rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--rule); }
.head { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 2.75rem; }

/* =================================================================== process */
.steps { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

.step { display: flex; flex-direction: column; gap: 0.65rem; }
.step-n {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.step p { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.65; }

/* ===================================================================== offer */
.offer { display: grid; gap: 2.25rem 3rem; }
@media (min-width: 46rem) { .offer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.offer-item { display: flex; flex-direction: column; gap: 0.5rem; }
.offer-item h3 { padding-bottom: 0.65rem; border-bottom: 1px solid var(--rule); }
.offer-item p { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.65; }

/* =================================================================== context */
.context {
  display: grid;
  gap: 1.5rem 3rem;
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 46rem) { .context { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.context-item { display: flex; flex-direction: column; gap: 0.4rem; }
.context-item .when {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.context-item p { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.6; }

/* ===================================================================== facts */
.facts {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
}
@media (min-width: 36rem) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .facts { grid-template-columns: repeat(4, 1fr); } }

.fact { background: var(--ground); padding: 1.5rem 1.35rem; display: flex; flex-direction: column; gap: 0.3rem; }
.fact dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.fact dd {
  margin: 0;
  order: 1;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fact .qual {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

/* ====================================================================== code */
.code {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.8;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.35rem 1.4rem;
  overflow-x: auto;
  margin: 0;
  color: var(--ink-soft);
}
.code b { color: var(--ink); font-weight: 600; }
.code i { color: var(--muted); font-style: normal; }

.split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 1.15fr; gap: 3.5rem; } }

/* ====================================================================== note */
.note {
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* A quiet onward link under a section, not a call to action competing with the closer. */
.more { margin: 2rem 0 0; font-size: 0.9375rem; }
.more a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-firm);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.15s ease;
}
.more a:hover { text-decoration-color: var(--ink); }
.more a:hover .arrow { transform: translateX(2px); }
.more .arrow { display: inline-block; transition: transform 0.16s ease; }

/* ==================================================================== closer */
.closer {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-radius: 18px;
  padding: clamp(2.25rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.closer h2 { color: var(--invert-fg); }
.closer p { color: color-mix(in srgb, var(--invert-fg) 72%, transparent); }
.closer .pill { background: var(--invert-fg); color: var(--invert-bg); border-color: var(--invert-fg); }
.closer .pill-quiet {
  background: transparent;
  color: var(--invert-fg);
  border-color: color-mix(in srgb, var(--invert-fg) 32%, transparent);
}
.closer .pill-quiet:hover { opacity: 1; border-color: color-mix(in srgb, var(--invert-fg) 60%, transparent); }
.closer .aside { color: color-mix(in srgb, var(--invert-fg) 52%, transparent); }

/* ==================================================================== footer */
footer { border-top: 1px solid var(--rule); padding: 2.5rem 0 3.5rem; }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: baseline;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.foot-links a { text-decoration-color: var(--rule-firm); text-underline-offset: 0.2em; }
.foot-links a:hover { text-decoration-color: currentColor; }

/* ============================================================= scroll reveal */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); }
  .reveal.shown {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ======================================================= document (the note) */
.masthead { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3rem); border-bottom: 1px solid var(--rule); }
.masthead h1 { max-width: 22ch; }
.eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.standfirst { margin: 1.5rem 0 0; max-width: var(--measure); font-size: 1.175rem; line-height: 1.6; color: var(--ink-soft); }
.byline { margin: 2rem 0 0; font-size: 0.8125rem; color: var(--muted); }

article { padding: clamp(2.25rem, 6vw, 3.5rem) 0 0; --measure: 38rem; }
article section { padding: 0; border-top: 0; margin: 0 0 clamp(2.25rem, 6vw, 3.5rem); }
article h2 { margin: 0 0 1.25rem; font-size: clamp(1.375rem, 2.6vw, 1.75rem); max-width: 26ch; }
article h3 { margin: 2rem 0 0.625rem; }
article p  { margin: 0 0 1.125rem; max-width: var(--measure); color: var(--ink-soft); }
article p.lead { color: var(--ink); font-size: 1.0625rem; }
article strong { color: var(--ink); font-weight: 600; }
article ul { margin: 0 0 1.125rem; padding-left: 1.125rem; max-width: var(--measure); color: var(--ink-soft); }
article li { margin-bottom: 0.5rem; }

.cite {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-firm);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.15s ease;
}
.cite:hover { text-decoration-color: var(--ink); }

/* Numbered because these are a dated sequence: the order carries the information. */
.timeline { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.timeline li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0 1.75rem;
  padding: 1.125rem 0;
  border-top: 1px solid var(--rule);
}
.timeline li:last-child { border-bottom: 1px solid var(--rule); }
.timeline .when {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  padding-top: 0.15rem;
}
.timeline .what { margin: 0; color: var(--ink-soft); }
.timeline .what b { color: var(--ink); font-weight: 600; }
.timeline li[data-key="true"] { background: var(--surface); }
.timeline li[data-key="true"] .when { color: var(--ink); font-weight: 600; }
@media (max-width: 40rem) { .timeline li { grid-template-columns: 1fr; gap: 0.25rem; } }

.callout {
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  padding: 1.25rem 1.25rem;
  background: var(--surface);
  max-width: 46rem;
}
@media (min-width: 30rem) { .callout { padding: 1.5rem 1.625rem; } }
.callout p:last-child { margin-bottom: 0; }
.callout .label {
  margin: 0 0 0.75rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

blockquote {
  margin: 0 0 1.125rem;
  padding-left: 1.125rem;
  border-left: 2px solid var(--rule-firm);
  max-width: var(--measure);
  color: var(--ink);
  font-size: 1.0625rem;
}
blockquote p:last-child { margin-bottom: 0; }
blockquote cite { display: block; margin-top: 0.625rem; font-size: 0.8125rem; font-style: normal; color: var(--muted); }

/* Scrolling shadows. On a phone the comparison table is wider than the screen, and a column
   cut off at the edge with no affordance reads as a broken layout rather than as "scroll me".
   The two `local` gradients are painted in page coordinates, so they slide over and hide the
   corresponding `scroll` shadow exactly when that edge is reached. */
.table-wrap {
  overflow-x: auto;
  max-width: 46rem;
  margin: 0 0 1.125rem;
  background:
    linear-gradient(to right, var(--ground) 40%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left,  var(--ground) 40%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgb(0 0 0 / 0.16), transparent) left center / 0.85rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.16), transparent) right center / 0.85rem 100% no-repeat scroll;
  overscroll-behavior-x: contain;
}
:root[data-theme="dark"] .table-wrap,
:root:not([data-theme="light"]) .table-wrap {
  background-image:
    linear-gradient(to right, var(--ground) 40%, transparent),
    linear-gradient(to left,  var(--ground) 40%, transparent),
    radial-gradient(farthest-side at 0 50%,   rgb(255 255 255 / 0.14), transparent),
    radial-gradient(farthest-side at 100% 50%, rgb(255 255 255 / 0.14), transparent);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .table-wrap {
    background-image:
      linear-gradient(to right, var(--ground) 40%, transparent),
      linear-gradient(to left,  var(--ground) 40%, transparent),
      radial-gradient(farthest-side at 0 50%,   rgb(0 0 0 / 0.16), transparent),
      radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.16), transparent);
  }
}
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.8125rem 1rem 0.8125rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; color: var(--ink); }
thead th { border-bottom-color: var(--rule-firm); white-space: nowrap; }
td { color: var(--ink-soft); }

.mistake { border-top: 1px solid var(--rule); padding: 1.375rem 0; max-width: 46rem; }
.mistake:last-of-type { border-bottom: 1px solid var(--rule); }
.mistake h3 { margin: 0 0 0.5rem; }
.mistake p { margin: 0; }

.close { border-top: 1px solid var(--rule-firm); padding: 3rem 0 4rem; margin-top: 1rem; }
.close h2 { max-width: 20ch; }

.sources { padding: 2.5rem 0 0; border-top: 1px solid var(--rule); }
.sources h2 { font-size: 1rem; margin-bottom: 1rem; }
.sources ol { margin: 0; padding-left: 1.25rem; max-width: 46rem; }
.sources li { margin-bottom: 0.625rem; font-size: 0.875rem; color: var(--muted); }
.sources a { color: var(--ink-soft); }