/* arxAIv — VISxAI blog post styles
   Light-first editorial layout with a dark-mode fallback. No framework. */

:root {
  --bg: #ffffff;
  --bg-raised: #ffffff;
  --bg-sunken: #f4f6f8;
  --ink: #14171c;
  --ink-soft: #454c58;
  --ink-faint: #767e8c;
  --rule: #e4e8ed;
  --rule-strong: #c8cfd8;

  /* Data encoding. These two mean exactly one thing each, everywhere on the page. */
  --ai: #1d6fe0;          /* AI-generated */
  --ai-soft: #e3edfc;
  --real: #e2690b;        /* real, human-made */
  --real-soft: #fdeada;

  /* UI accent, deliberately NOT one of the data colors, so a colored word in the
     prose always means the thing it means in the charts. */
  --accent: #0f766e;
  --accent-soft: #e0f2f0;

  --warn: #c0392b;
  --ok: #17795e;

  --serif: "Castoro", "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Google Sans", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  --prose: 42rem;
  --wide: 62rem;
  --full: 78rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216;
    --bg-raised: #171b21;
    --bg-sunken: #1d222a;
    --ink: #f0f2f5;
    --ink-soft: #b4bcc8;
    --ink-faint: #838c9a;
    --rule: #262c35;
    --rule-strong: #3a424e;
    --ai: #62a8ff;
    --ai-soft: #16283f;
    --real: #ff9d45;
    --real-soft: #3a2412;
    --accent: #2dd4bf;
    --accent-soft: #12312e;
    --warn: #f4776a;
    --ok: #4ecb9a;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- layout */

.wrap { width: 100%; }

.prose,
.fig,
.fig-wide,
.fig-full {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.prose { max-width: calc(var(--prose) + 2.5rem); }
.fig { max-width: calc(var(--prose) + 2.5rem); }
.fig-wide { max-width: calc(var(--wide) + 2.5rem); }
.fig-full { max-width: calc(var(--full) + 2.5rem); }

/* Figures, panels and interactives get room to breathe on both sides. A bare
   <figure> inside one of these already carries its own margin, so zero it out
   to avoid stacking the two. */
.fig,
.fig-wide,
.fig-full {
  margin-top: 3.4rem;
  margin-bottom: 3.4rem;
}

.fig > figure:only-child,
.fig-wide > figure:only-child,
.fig-full > figure:only-child { margin-top: 0; margin-bottom: 0; }

.prose > * + * { margin-top: 1.1em; }

/* flow-root gives .prose its own block formatting context, so nothing inside
   it can spill past its bottom edge onto the next figure. */
.prose {
  position: relative;
  display: flow-root;
}

/* ------------------------------------------------------------- side notes
   These stay IN the column rather than floating into the right gutter. The
   figures on this page run out to 78rem, so at ordinary window widths there
   is no gutter genuinely free to float into and the note lands on top of the
   next chart. An inline note can never collide. */
.sidenote {
  font-family: var(--sans);
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--ink-faint);
  background: var(--bg-sunken);
  border-left: 2px solid var(--accent);
  border-radius: 0 7px 7px 0;
  padding: 0.7rem 0.95rem;
  margin: 1.4rem 0;
}
.sidenote b,
.sidenote strong { color: var(--ink-soft); font-weight: 600; }
.sidenote code { font-size: 0.85em; }

/* ------------------------------------------------------- reading progress */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--ai), var(--accent), var(--real));
  z-index: 90;
  transition: width 0.08s linear;
}

/* ---------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}

h2 {
  font-size: 2.05rem;
  margin-top: 3.6rem;
  margin-bottom: 0.2rem;
  scroll-margin-top: 4.5rem;
  letter-spacing: -0.028em;
}

/* Numbered chip in the left gutter on wide screens, inline above the heading
   when there isn't room. Distill-ish sectioning without a heavy rule. */
h2 .sec-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0.8rem;
}

@media (min-width: 1100px) {
  h2 { position: relative; }
  h2 .sec-num {
    position: absolute;
    left: -3.1rem;
    top: 0.15rem;
    margin-bottom: 0;
  }
}

h3 {
  font-size: 1.22rem;
  margin-top: 2.2rem;
  margin-bottom: 0.1rem;
}

h4 {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

p { margin: 0; }

.lede {
  font-size: 1.24rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.dek {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-faint);
  margin-top: 0.35rem !important;
}

a {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.15s ease;
}
a:hover { background-size: 100% 2px; }

/* ------------------------------------------------ inline data-coded terms
   The words "generated" and "real" are printed in the same two colors the
   charts use, so the prose and the marks are one vocabulary. */
.gen, .rl {
  font-weight: 600;
  font-family: var(--sans);
  font-size: 0.94em;
  padding: 0.02em 0.2em;
  border-radius: 3px;
}
.gen { color: var(--ai); background: var(--ai-soft); }
.rl { color: var(--real); background: var(--real-soft); }

code, .mono { font-family: var(--mono); font-size: 0.82em; }

.prose code {
  background: var(--bg-sunken);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.08em 0.34em;
}

strong { font-weight: 700; }

em.term {
  font-style: normal;
  font-weight: 600;
  border-bottom: 2px solid var(--rule-strong);
}

ul.tight { padding-left: 1.15rem; }
ul.tight li + li { margin-top: 0.4rem; }

/* ---------------------------------------------------------------- header */

.masthead {
  position: relative;
  border-bottom: 1px solid var(--rule);
  padding: 5rem 0 3rem;
  overflow: hidden;
}

/* A faint plot grid behind the title — the page is about charts, so the
   masthead is one. Sits under the text at very low contrast. */
.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 75%);
  opacity: 0.65;
  pointer-events: none;
}
.masthead > * { position: relative; }

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

.masthead h1 {
  font-size: clamp(2.4rem, 6vw, 3.9rem);
  margin: 1.05rem 0 0;
  letter-spacing: -0.038em;
  line-height: 1.05;
}

.masthead .sub {
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  color: var(--ink-soft);
  margin-top: 0.7rem;
  line-height: 1.4;
}

.byline {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-faint);
  margin-top: 1.5rem;
}
.byline strong { color: var(--ink); font-weight: 600; }

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.pill {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.34rem 0.85rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--ink-soft);
  background-image: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pill:hover { border-color: var(--accent); color: var(--accent); background-size: 0 0; }

/* ---------------------------------------------------------------- toc */

.toc {
  font-family: var(--sans);
  font-size: 0.88rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-raised);
  padding: 1.1rem 1.3rem;
  margin-top: 2.5rem;
}
.toc h4 {
  color: var(--ink-faint);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.toc ol { margin: 0; padding-left: 1.3rem; color: var(--ink-soft); }
.toc li { margin: 0.28rem 0; }
.toc a { background-image: none; }
.toc a:hover { color: var(--accent); }

/* ---------------------------------------------------------------- figures */

figure { margin: 2.6rem auto; }

figcaption {
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-faint);
  margin-top: 0.8rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--rule-strong);
  max-width: 40rem;
}
figcaption b { color: var(--ink); font-weight: 600; }

.panel {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--bg-raised);
  padding: 1.15rem;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.panel-title {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.panel-title.metric-r { text-transform: none; letter-spacing: 0.02em; }

/* controls */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.84rem;
}

.btn {
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 500;
  padding: 0.34rem 0.8rem;
  border: 1px solid var(--rule-strong);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.13s ease;
}
.btn:hover { border-color: var(--ink-faint); color: var(--ink); }
.btn[aria-pressed="true"], .btn.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.btn.ai[aria-pressed="true"] { background: var(--ai); border-color: var(--ai); color: #fff; }
.btn.real[aria-pressed="true"] { background: var(--real); border-color: var(--real); color: #fff; }

.swatch {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  border-radius: 2px;
  margin-right: 0.4em;
  vertical-align: 0.02em;
}
.swatch.perm-lda { background: var(--accent); }
.swatch.perm-width { background: var(--ink-faint); }
.swatch.ai { background: var(--ai); }
.swatch.real { background: var(--real); }

.legend {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 0.83rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- stat strip */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  margin: 3.4rem auto;
}

.stat {
  background: var(--bg-raised);
  padding: 1.05rem 1rem;
  border-top: 3px solid var(--rule-strong);
}
.stat.ai { border-top-color: var(--ai); }
.stat.real { border-top-color: var(--real); }
.stat .n {
  font-family: var(--sans);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
}
.stat .l {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-faint);
  line-height: 1.35;
  display: block;
  margin-top: 0.42rem;
}
.stat.ai .n { color: var(--ai); }
.stat.real .n { color: var(--real); }

/* ---------------------------------------------------------------- quiz */

.quiz-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.quiz-card {
  position: relative;
  border: 2px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-sunken);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.14s ease, transform 0.14s ease;
  aspect-ratio: 4 / 3;
  display: block;
  width: 100%;
}
.quiz-card:hover:not(.locked) { border-color: var(--ink-faint); transform: translateY(-2px); }
.quiz-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
  transition: filter 0.35s ease;
}

/* Blur is applied to BOTH cards equally, to take the cheapest tell — unreadable
   glyphs — off the table and force a judgment about structure instead. It lifts
   as soon as the round is answered so the giveaway is still visible afterwards. */
.quiz-stage.blurred .quiz-card:not(.revealed) img { filter: blur(2.6px); }
.quiz-card.locked { cursor: default; }
.quiz-card.correct { border-color: var(--ok); }
.quiz-card.wrong { border-color: var(--warn); }

.quiz-tag {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 5px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.quiz-card.revealed .quiz-tag { opacity: 1; }
.quiz-tag.ai { background: var(--ai); }
.quiz-tag.real { background: var(--real); }

.quiz-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.quiz-score { font-variant-numeric: tabular-nums; }
.quiz-score b { font-size: 1.15rem; color: var(--ink); }

.quiz-dots { display: flex; gap: 4px; }
.quiz-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rule-strong);
}
.quiz-dot.hit { background: var(--ok); }
.quiz-dot.miss { background: var(--warn); }

/* ---------------------------------------------------------------- charts */

.chart-holder { position: relative; }

canvas.chart { display: block; width: 100%; touch-action: none; }

svg.chart { display: block; width: 100%; overflow: visible; }
svg.chart text {
  font-family: var(--sans);
  fill: var(--ink-faint);
  font-size: 11px;
}
svg.chart .axis-line { stroke: var(--rule-strong); stroke-width: 1; }
svg.chart .grid { stroke: var(--rule); stroke-width: 1; }
svg.chart .lbl-strong { fill: var(--ink-soft); font-weight: 600; }

.tip {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  background: var(--bg-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 9px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
  padding: 0.5rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 0.1s ease;
  max-width: 15rem;
}
.tip.show { opacity: 1; }
.tip img {
  display: block;
  width: 13rem;
  max-height: 10rem;
  object-fit: contain;
  background: #fff;
  border-radius: 5px;
  margin-bottom: 0.4rem;
}
.tip .tip-k { color: var(--ink); font-weight: 600; }
.tip dl { display: grid; grid-template-columns: auto auto; gap: 0.1rem 0.6rem; margin: 0.35rem 0 0; }
.tip dt { color: var(--ink-faint); }
.tip dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

/* horizontal bar list */

.bars { font-family: var(--sans); font-size: 0.87rem; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(7rem, 15rem) 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.28rem 0;
}
.bar-row + .bar-row { border-top: 1px solid var(--rule); }
.bar-lab { color: var(--ink-soft); line-height: 1.3; }
.bar-track { background: var(--bg-sunken); border-radius: 3px; height: 0.72rem; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; background: var(--ink-faint); }
.bar-fill.fake { background: var(--warn); }
.bar-fill.mutated { background: var(--real); }
.bar-fill.real { background: var(--ai); }
.bar-fill.none { background: var(--rule-strong); }
.bar-val { font-variant-numeric: tabular-nums; color: var(--ink-faint); min-width: 3.4rem; text-align: right; }

/* ---------------------------------------------------------------- r meter (s7) */

/* Where this correlation falls against the coefficients the corpus produces by chance.
   The shaded bands are the whole point: r = 0.2 reads as "a relationship" until you can
   see how wide the noise is at this sample size. */
.rmeter { font-family: var(--sans); margin-top: 0.9rem; }
.rmeter-track {
  position: relative;
  height: 0.85rem;
  background: var(--bg-sunken);
  border-radius: 3px;
  overflow: hidden;
}
.rmeter-track .rm-band { position: absolute; top: 0; bottom: 0; display: block; }
.rm-family { background: var(--rule-strong); opacity: 0.55; }
.rm-single { background: var(--rule-strong); opacity: 0.75; }
.rm-zero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-faint); opacity: 0.5; }
.rm-mark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  border-radius: 1px;
}
.rm-mark.is-noise { background: var(--ink-faint); }
.rmeter-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
}
.rmeter-key { font-size: 0.72rem; color: var(--ink-faint); margin-top: 0.35rem; line-height: 1.5; }
.rm-sw {
  display: inline-block;
  width: 0.7rem;
  height: 0.6rem;
  border-radius: 2px;
  vertical-align: -0.05rem;
  margin-right: 0.15rem;
}
.rm-sw.rm-mark { position: static; width: 2px; margin: 0 0.3rem 0 0.15rem; top: auto; bottom: auto; }

/* ---------------------------------------------------------------- paper explorer */

.paper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
  gap: 5px;
}
.paper-cell {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  padding: 0;
  transition: outline-color 0.12s ease, transform 0.12s ease;
  outline: 2px solid transparent;
}
.paper-cell img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.paper-cell:hover { transform: scale(1.06); outline-color: var(--ink-faint); z-index: 2; position: relative; }
.paper-cell.sel { outline-color: var(--accent); z-index: 2; position: relative; }
.paper-cell.dim { opacity: 0.22; }

.paper-detail {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.4rem;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.paper-detail img.page {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  display: block;
}
.paper-meta { font-family: var(--sans); font-size: 0.87rem; min-width: 0; }
.paper-meta h4 { font-size: 1.02rem; margin-bottom: 0.15rem; line-height: 1.3; }
.paper-meta h4 + .excerpt { margin-top: 0.35rem; }
.paper-meta .excerpt + h4 { margin-top: 1.1rem; font-size: 0.8rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.paper-meta .kv { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.2rem 0.8rem; margin: 0.8rem 0; }
.paper-meta .kv dt { color: var(--ink-faint); font-size: 0.8rem; }
.paper-meta .kv dd { margin: 0; color: var(--ink-soft); white-space: pre-line; }
.paper-meta .excerpt {
  font-family: var(--serif);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--bg-sunken);
  border-left: 2px solid var(--rule-strong);
  padding: 0.6rem 0.85rem;
  border-radius: 0 6px 6px 0;
  max-height: 11rem;
  overflow: auto;
  white-space: pre-line;
  margin-top: 0.35rem;
}

/* corrected / raw-OCR switch on the paper detail panel */
.excerpt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.excerpt-head h4 { font-size: 0.8rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.excerpt-head .controls { gap: 0.25rem; }
.excerpt-head .btn { font-size: 0.7rem; padding: 0.1rem 0.42rem; }
.paper-meta .excerpt-head + .excerpt { margin-top: 0.35rem; }

/* raw OCR is meant to look like what it is */
.excerpt.is-raw {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-faint);
  border-left-color: var(--warn);
  max-height: 14rem;
}

.tagset { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.55rem; }
.tag {
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.16rem 0.5rem;
  border-radius: 4px;
  background: var(--bg-sunken);
  color: var(--ink-faint);
  border: 1px solid var(--rule);
}
.tag.bad { color: var(--warn); border-color: var(--warn); background: transparent; }
.tag.ok { color: var(--ok); border-color: var(--ok); background: transparent; }

/* ---------------------------------------------------------------- encoder pipeline (s3) */

svg.pipeline {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--sans);
}

/* the numbered walk-through under it */
ol.steps {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--ink-soft);
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 1.6rem 0;
}
ol.steps li {
  position: relative;
  padding-left: 2.1rem;
  counter-increment: step;
}
ol.steps li + li { margin-top: 0.75rem; }
ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.08rem;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
ol.steps b { color: var(--ink); }

/* the discriminant written out as arithmetic (s5) */
.formula {
  font-family: var(--mono);
  font-size: 0.92rem;
  background: var(--bg-sunken);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  margin: 0.9rem 0;
  text-align: center;
  color: var(--ink);
  overflow-x: auto;
}
.formula span { color: var(--ink-faint); }

/* ---------------------------------------------------------------- occlusion maps (s6) */

.occ-stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  position: relative;
}
.occ-card { margin: 0; }
.occ-frame {
  position: relative;
  aspect-ratio: 1 / 1;      /* short side to 224 + center crop, exactly as preprocess does it */
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
}
.occ-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.occ-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
}
.occ-grid i {
  display: block;
  transition: outline-color 0.1s ease;
  outline: 1px solid transparent;
  outline-offset: -1px;
}
.occ-grid i:hover { outline-color: var(--ink); }
.occ-card figcaption {
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-faint);
  text-align: left;
  margin-top: 0.4rem;
}
.occ-card figcaption b.gen { color: var(--ai); }
.occ-card figcaption b.rl { color: var(--real); }
.occ-miss { color: var(--warn); font-weight: 600; }

/* ---------------------------------------------------------------- callouts */

.aside {
  border-left: 3px solid var(--accent);
  background: var(--bg-raised);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.2rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 2.6rem auto;
}
.aside h4 {
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.aside p + p { margin-top: 0.7rem; }
.aside.caution { border-left-color: var(--warn); }
/* the closing "what transfers" block on sections 7-10: the method, lifted off the corpus */
.aside.transfers { border-left-color: var(--ok); background: var(--bg-sunken); }
.aside.transfers h4 { color: var(--ok); }
.aside.caution h4 { color: var(--warn); }

/* the three-row cosine-similarity readout inside the "how to read a distance" aside */
.simtable { margin: 0.9rem 0 0.2rem; }
.simrow {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.32rem 0;
  font-size: 0.86rem;
}
.simrow + .simrow { border-top: 1px solid var(--rule); }
.simbar {
  display: block;
  height: 0.55rem;
  background: var(--bg-sunken);
  border-radius: 3px;
  overflow: hidden;
}
.simbar i { display: block; height: 100%; border-radius: 3px; }
.simrow b { font-variant-numeric: tabular-nums; color: var(--ink); }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 3.2rem auto; max-width: var(--prose); }

/* video */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* embedded 3D iframes */
.embed3d {
  width: 100%;
  height: 30rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #000;
  display: block;
}

/* The hero map opens the page, so it gets height without running past the fold —
   tall enough to read as a space, short enough that the caption stays visible. */
.embed3d.is-hero { height: min(34rem, 62vh); }

.hero-block { margin-top: 2rem; }

.embed-controls { margin-bottom: 0.6rem; }

/* The hero map is nearly full-bleed, so a 40rem caption pinned to its left edge
   reads as orphaned. Let this one run the full width of the map instead. */
.hero-block figcaption {
  max-width: 100%;
  font-size: 0.88rem;
  line-height: 1.6;
}

/* image strip */
.strip { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.strip figure { margin: 0; }
.strip img {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: #fff;
  display: block;
}
.strip figcaption { font-size: 0.78rem; margin-top: 0.4rem; }

/* ---------------------------------------------------------------- footer */

.colophon {
  border-top: 1px solid var(--rule);
  margin-top: 4.5rem;
  padding: 2.6rem 0 4rem;
  background: var(--bg-sunken);
  font-family: var(--sans);
  font-size: 0.87rem;
  color: var(--ink-faint);
}
.colophon h3 { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.6rem; }
.colophon p + p { margin-top: 0.6rem; }
.colophon pre {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.5;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- modal */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.86);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 2rem;
}
.lightbox.open { display: flex; }
.lightbox-media { position: relative; max-width: 100%; max-height: 100%; display: flex; }
.lightbox-media img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; background: #fff; display: block; }
/* Patch mode (an occlusion figure): crop to the same square the encoder sees -- object-fit:
   cover on a 1:1 frame, exactly like .occ-frame -- so the 7x7 grid below lines up with the
   image pixel-for-pixel, only bigger. */
.lightbox-media.has-grid { width: min(80vw, 80vh, 640px); aspect-ratio: 1 / 1; }
.lightbox-media.has-grid img { width: 100%; height: 100%; object-fit: cover; }
.lightbox-grid {
  position: absolute;
  inset: 0;
  display: none;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  border-radius: 6px;
  overflow: hidden;
}
.lightbox-media.has-grid .lightbox-grid { display: grid; }
.lightbox-grid i {
  display: block;
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: outline-color 0.1s ease;
}
.lightbox-grid i:hover { outline-color: rgba(255, 255, 255, 0.85); }
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 720px) {
  body { font-size: 17.5px; }
  .paper-detail { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: minmax(6rem, 9rem) 1fr auto; font-size: 0.8rem; }
  .embed3d { height: 22rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}