/* The cross-model draft: comparison tables, model cards and figures on top of ../style.css. Same tokens, one accent. */

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- draft banner ---------- */
.draft {
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.draft-in {
  width: min(var(--wide), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: 9px 0;
}

.draft p {
  margin: 0;
}

.draft b {
  font-weight: 600;
  color: var(--ink);
}

.draft .stamp {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- TL;DR and section overview (top of the page) ---------- */
.post .tldr {
  margin-top: 2rem;
  padding: 16px 20px 6px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-2);
}

.post .tldr h2 {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.post .tldr ul {
  margin: 0;
}

.post .tldr ul > li {
  margin: 0 0 0.7rem;
  font-size: 1rem;
  line-height: 1.55;
}

.post .tldr ul > li::before {
  top: 0.78em;
}

.tldr .tl {
  display: block;
  margin-bottom: 1px;
}

.tldr .tl b {
  font-weight: 600;
}

.tldr .tk {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--muted);
}

.tldr .tk::before {
  content: '· ';
}

.tldr .tag {
  margin-left: 4px;
  font-family: var(--sans);
}

.run {
  font-style: italic;
  color: var(--muted);
}

.tldr-note {
  margin: 0.2rem 0 0.8rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 700px) {
  .post .tldr {
    padding: 14px 16px 4px;
  }
}

/* ---------- model cards ---------- */
.models {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 0.6rem;
}

.model {
  margin: 0 !important;
  padding: 16px 16px 6px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.cz .post .model h4 {
  margin: 0;
  font-size: 1rem;
}

.mkind {
  margin: 2px 0 10px;
  color: var(--muted);
}

.mst {
  white-space: nowrap;
}

.mst-running,
.mst-measured {
  font-style: italic;
}

.model dl {
  margin: 0;
}

.model dt {
  margin-top: 8px;
  font-weight: 600;
  color: var(--ink);
}

.model dd {
  margin: 1px 0 0;
  color: var(--ink-2);
}

.model code {
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

/* ---------- definitions ---------- */
.defs {
  margin: 0.4rem 0 0;
}

.defs dt {
  margin-top: 0.8rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
}

.defs dd {
  margin: 0.15rem 0 0;
}

/* ---------- comparison tables (models as columns) ---------- */
.tblock {
  margin: 1.1rem auto 1.6rem;
}

.ctable {
  width: 100%;
  table-layout: fixed; /* the same column widths in every table, so the models line up down the page */
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.42;
  font-variant-numeric: tabular-nums;
}

.ctable thead th {
  padding: 0 10px 7px;
  border-bottom: 1px solid var(--ink);
  text-align: left;
  vertical-align: bottom;
  font-weight: 600;
  color: var(--ink);
}

.ctable thead th:first-child {
  width: 22%;
  padding-left: 0;
}

.ctable .mn {
  display: block;
  font-size: 0.875rem;
}

.ctable .mk {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
}

.ctable tbody th {
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  font-weight: 500;
  color: var(--ink);
}

.ctable td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.ctable td .v {
  display: block;
  color: var(--ink);
}

.ctable td .d {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
}

.ctable td.st-run .v {
  color: var(--muted);
  font-style: italic;
}

.ctable td.st-na .v {
  color: var(--muted);
}

.ctable tr.sub th {
  font-weight: 400;
  color: var(--ink-2);
}

.ctable code {
  font-size: 0.92em;
}

/* edits as rows (can the side effect be prevented?): a wider row head with the build's name and what it adds */
.ptable thead th:first-child {
  width: 28%;
}

.ptable tbody th .rd {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}

.ptable td .v,
.ptable td .d {
  overflow-wrap: anywhere;
}

.ptable td .v .tag {
  display: table;
  margin: 3px 0 1px;
  white-space: normal;
}

.src,
.tnote {
  margin: 0.55rem 0 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}

.src a {
  color: var(--muted);
}

.src code {
  font-size: 0.95em;
}

.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  white-space: nowrap;
  vertical-align: 1px;
}

.finding {
  padding: 12px 16px;
  border-left: 2px solid var(--ink);
  background: var(--bg-2);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.finding a {
  white-space: nowrap;
}

/* ---------- figures ---------- */
.cfig {
  margin: 1.3rem 0 0.4rem;
}

.cfig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #ffffff;
}

.cfig figcaption a {
  color: var(--muted);
}

/* ---------- clips ---------- */
.clipgrid {
  display: grid;
  gap: 18px;
  margin: 1.1rem auto 1.4rem;
}

.clipgrid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.clipgrid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.clip {
  margin: 0;
}

.clip video,
.clip .ph {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-2);
}

.clip .ph {
  position: relative;
  overflow: hidden;
}

.clip .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.clip .ph-t {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.clip figcaption {
  font-size: 0.8125rem;
}

/* ---------- small screens: each table row becomes a block, one line per model ---------- */
@media (max-width: 720px) {
  .models,
  .clipgrid.two,
  .clipgrid.three {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .ctable,
  .ctable tbody,
  .ctable tr,
  .ctable th,
  .ctable td {
    display: block;
    width: 100%;
  }

  .ctable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .ctable tr {
    padding: 9px 0 7px;
    border-bottom: 1px solid var(--rule);
  }

  .ctable tbody th {
    padding: 0 0 5px;
    border: 0;
    font-weight: 600;
  }

  .ctable td {
    display: grid;
    grid-template-columns: 7.4em minmax(0, 1fr);
    column-gap: 10px;
    padding: 3px 0;
    border: 0;
  }

  .ctable td::before {
    content: attr(data-model);
    grid-row: span 2;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.6;
  }

  .ctable td .v,
  .ctable td .d {
    grid-column: 2;
    overflow-wrap: anywhere;
  }
}

@media (prefers-color-scheme: dark) {
  .cfig img {
    background: #201f1d;
  }
}

/* =====================================================================================================
   Research-post layout: a hero with byline and links, then a sticky contents column beside the article
   on wide screens; on narrow screens the contents fold into a list under the TL;DR.
   ===================================================================================================== */
.cz-page {
  --cz-max: 1200px;
  --cz-side: 200px;
  --cz-gap: 64px;
  --cz-wide: 860px;
}

.cz-page .draft-in,
.cz-page .bar-in,
.cz-page .foot-in,
.cz-hero,
.cz-layout {
  width: min(var(--cz-max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.cz [id] {
  scroll-margin-top: 20px;
}

/* ---------- hero ---------- */
.cz-hero {
  padding: 76px 0 52px;
}

.cz-hero h1 {
  max-width: 15em;
  font-size: clamp(2.15rem, 1.35rem + 3vw, 3.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.032em;
}

.cz-sub {
  max-width: 32em;
  margin: 20px 0 0;
  font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.375rem);
  line-height: 1.42;
  color: var(--ink-2);
}

.cz-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  margin: 24px 0 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cz-pill {
  padding: 3px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink);
}

.cz-who {
  color: var(--ink);
}

.cz-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.cz-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cz-btn:hover {
  border-color: var(--ink);
}

.cz-btn-main {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.cz-btn-main:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
}

/* ---------- article column ---------- */
.cz-layout {
  padding-bottom: 24px;
}

.cz-side {
  display: none;
}

/* the article keeps the hero's left edge at every width: text at its measure, figures, clips and tables wider */
.cz .post > * {
  width: 100%;
  margin-inline: 0;
}

.cz .post > .tldr,
.cz .post > .toc-mob,
.cz .post section > :not(.wide) {
  max-width: var(--measure);
}

.cz .post section .wide {
  width: 100%;
  max-width: var(--cz-wide);
  margin-left: 0;
  transform: none;
}

.cz .post .tldr {
  margin-top: 0;
}

.cz .post > section:not(.tldr) {
  margin-top: 4.6rem;
}

.cz .post h2 {
  font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.022em;
  margin: 0 0 1rem;
}

.cz .post .tldr h2 {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.cz .post h3 {
  font-size: 1.3125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 2.8rem 0 0.6rem;
}

.cz .post h4 {
  margin: 2.1rem 0 0.4rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

/* ---------- contents: sticky column on wide screens ---------- */
.toc-h {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}

.toc-side ol,
.toc-mob ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc-side li + li,
.toc-mob li + li,
.toc-side ol ol,
.toc-mob ol ol {
  margin-top: 0;
}

.toc-side .toc-l1 {
  border-left: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.toc-side a {
  position: relative;
  display: block;
  padding: 5px 0 5px 14px;
  color: var(--muted);
  text-decoration: none;
}

.toc-side ol ol a {
  padding-left: 26px;
}

.toc-side ol ol ol a {
  padding-left: 38px;
}

.toc-side a:hover,
.toc-side a[aria-current='true'] {
  color: var(--ink);
}

.toc-side a[aria-current='true']::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: var(--ink);
}

/* ---------- contents: a folded list under the TL;DR on narrow screens ---------- */
.cz .post .toc-mob {
  margin-top: 1.4rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--sans);
}

.toc-mob summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.toc-mob summary::-webkit-details-marker {
  display: none;
}

.toc-mob summary::after {
  content: '+';
  font-weight: 400;
  color: var(--muted);
}

.toc-mob[open] summary::after {
  content: '\2212';
}

.toc-mob nav {
  padding: 0 16px 10px;
  border-top: 1px solid var(--rule);
}

.toc-mob a {
  display: block;
  padding: 7px 0;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
}

.toc-mob ol ol a {
  padding: 5px 0 5px 16px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.toc-mob ol ol ol a {
  padding-left: 32px;
}

@media (min-width: 1100px) {
  .cz-layout {
    display: grid;
    grid-template-columns: var(--cz-side) minmax(0, 1fr);
    column-gap: var(--cz-gap);
    align-items: start;
  }

  .cz-side {
    display: block;
    align-self: stretch;
  }

  .toc-side {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding-bottom: 8px;
  }

  .cz .post .toc-mob {
    display: none;
  }
}

/* ---------- clips ---------- */
.clipgrid.one {
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

.cz .clip video {
  aspect-ratio: auto;
  height: auto;
}

.clip .ph-t {
  font-style: italic;
  color: var(--muted);
}

.clip figcaption a {
  color: var(--muted);
}

.clip figcaption code {
  font-size: 0.92em;
}

/* ---------- tables folded under their figure ---------- */
.tdetails {
  margin: 0.5rem 0 1.4rem;
  border-bottom: 1px solid var(--rule);
}

.tdetails > summary {
  padding: 9px 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}

.tdetails > summary::-webkit-details-marker {
  display: none;
}

.tdetails > summary::before {
  content: '+';
  display: inline-block;
  width: 1.2em;
  color: var(--muted);
}

.tdetails[open] > summary::before {
  content: '\2212';
}

.tdetails > summary:hover {
  color: var(--ink);
}

.tdetails .tblock {
  margin: 0.3rem 0 1.1rem;
}

/* ---------- citation ---------- */
.cite-text {
  font-size: 1.0625rem;
  color: var(--ink-2);
}

.bib {
  position: relative;
}

.bib pre {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-2);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--ink-2);
}

.bib pre code {
  font-size: inherit;
}

.bib-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-2);
  cursor: pointer;
}

.bib-copy:hover {
  border-color: var(--ink);
  color: var(--ink);
}

@media (max-width: 640px) {
  .cz-hero {
    padding: 44px 0 36px;
  }

  .cz .post > section:not(.tldr) {
    margin-top: 3.6rem;
  }
}

/* long record paths and URLs wrap instead of widening a phone screen */
.src a,
.src code,
.clip figcaption code,
.cz .post section li a {
  overflow-wrap: anywhere;
}

/* a clip of four stacked panels stays narrower so it fits a screen */
.clip.tall video {
  max-width: 620px;
}

/* a full-width placeholder stays low until its clip lands */
.clipgrid.one .clip .ph {
  aspect-ratio: 16 / 5;
}

/* ---------- diagrams: inline SVG drawn by the generator, themed by the page's tokens ---------- */
.dgfig {
  margin: 1.6rem auto 2rem;
}

.dgfig figcaption {
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Diagram 1: the schematic beside its three notes; stacked on narrow screens */
.dg1-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.dg-notes {
  margin: 0;
  padding-left: 1.1rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.dg-notes li + li {
  margin-top: 0.6rem;
}

/* Diagram 2: one panel per model, side by side on wide screens */
.dg2-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.dg2-p {
  padding: 10px 6px 6px;
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.dg3 .dg {
  max-width: 420px;
}

@media (max-width: 860px) {
  .dg2-grid {
    grid-template-columns: minmax(0, 340px);
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .dg1-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dg1-grid .dg {
    max-width: 340px;
    margin: 0 auto;
  }
}

/* the fix as three bars on the same unseen starts */
.dg .dg-bar-base { fill: var(--mark-base); }
.dg .dg-bar-acc { fill: var(--accent); }
.dg .dg-axis { stroke: var(--ink-2); stroke-width: 1; }
.dg .dg-bar-loss { fill: var(--mark-other); }
.dg .dg-bar-ref { fill: none; stroke: var(--ink-2); stroke-width: 1.25; }

.dg-sidefig .dg {
  max-width: 520px;
}

.dg-fix .dg {
  max-width: 400px;
}

/* the one collapsed section near the end: every number and record, and more clips */
.allnums-in {
  padding: 0.4rem 0 0.6rem;
}

.allnums-in > h3:first-child {
  margin-top: 0.6rem;
}

/* the small prevention table in the main flow: three result columns */
.ptable-s thead th:first-child {
  width: 40%;
}

/* what each edit scored: a dot chart */
.dg .dg-grid { stroke: var(--rule); stroke-width: 1; }
.dg .dg-track { stroke: var(--grid); stroke-width: 6; stroke-linecap: round; }
.dg .dg-base { stroke: var(--ink); stroke-width: 1.5; }
.dg .dg-o-none2 { fill: var(--mark-base); stroke: var(--mark-base); stroke-width: 1.5; }

/* Figure 5: one drawing for wide screens (labels beside the tracks), one for narrow (labels above, wrapped) */
.dg-ttl {
  margin: 0 0 0.45rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.dg2b .dg5-w {
  max-width: 680px;
}

.dg2b .dg5-n {
  display: none;
  max-width: 400px;
}

@media (max-width: 699px) {
  .dg2b .dg5-w {
    display: none;
  }

  .dg2b .dg5-n {
    display: block;
  }
}

/* the task legend: four columns */
.ltable thead th:first-child {
  width: 24%;
}

/* the two wordings of one goal, shown once */
.wordings {
  margin: 1.1rem 0 0.9rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--rule);
  background: var(--bg-2);
  border-radius: 0 6px 6px 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.45;
}

.wordings p {
  display: flex;
  gap: 0.75rem;
  margin: 0;
}

.wordings p + p {
  margin-top: 0.45rem;
}

.wordings .wl {
  flex: none;
  width: 3.6rem;
  font-weight: 600;
  color: var(--mark-other);
}

.wordings .wl-ok {
  color: var(--accent);
}

.wordings .wt {
  min-width: 0;
  color: var(--ink);
}

/* all three models at a glance */
.gtable thead th:first-child {
  width: 16%;
}

/* ---------- animated block diagrams (figure.anim) ----------
   The drawing is a complete still image on its own: without the script, in print and before the script runs, every
   part marked .sh is hidden and every moving token (.tk) is invisible. cosmos.js animates only transform and opacity
   (Web Animations API, on SVG groups), so the still drawing and the animation never fight over other properties. */
.dg .sh,
.dg .tk { opacity: 0; }
.dg .tk { pointer-events: none; }
.dg .st,
.dg .tk,
.dg .nd { transform-box: fill-box; transform-origin: 50% 50%; }
.dg .sxo { transform-origin: 0 50%; }
.dg .gb { fill: var(--muted); transform-box: fill-box; transform-origin: 50% 100%; }
.dg .gb-g { fill: var(--ink-2); }

.dg .dg-frame { fill: none; stroke: var(--rule); stroke-width: 1; }
.dg .dg-pol { fill: none; stroke: var(--rule); stroke-width: 1.25; stroke-dasharray: 5 4; }
.dg .dg-wash { fill: color-mix(in srgb, var(--accent) 9%, var(--bg)); }
.dg .dg-chip-c { fill: color-mix(in srgb, var(--accent) 14%, var(--bg)); stroke: var(--accent); stroke-width: 1; }
.dg .dg-sb-o { fill: var(--mark-base); }
.dg .dg-sb-c { fill: var(--accent); }
.dg .dg-wc { fill: var(--bg-2); stroke: var(--rule); stroke-width: 1; }
.dg .dg-wp1 { fill: var(--accent); }
.dg .dg-wp2 { fill: color-mix(in srgb, var(--accent) 50%, var(--bg)); }
.dg .dg-chunk { fill: var(--muted); }
.dg .dg-chunk-run { fill: var(--ink-2); }
.dg .dg-vf { fill: var(--bg); stroke: var(--muted); stroke-width: 1; }
.dg .dg-patch { fill: none; stroke: var(--accent); stroke-width: 2; }
.dg .dg-tag { fill: var(--accent); }
.dg .dg-tag-t { fill: var(--bg); }
.dg .dg-ghost { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }

/* tokens */
.dg .tk-word.tk-o,
.dg .tk-dot.tk-o { fill: var(--mark-base); }
.dg .tk-word.tk-c,
.dg .tk-dot.tk-c { fill: var(--accent); }
.dg .tk-state { fill: var(--ink-2); }
.dg .tk-fr { fill: none; stroke: var(--ink-2); stroke-width: 0.75; }
.dg .tk-o .tk-cb { fill: var(--mark-base); }
.dg .tk-c .tk-cb { fill: var(--accent); }
.dg .tk-vf { fill: var(--bg); stroke: var(--accent); stroke-width: 1; }
.dg .tk-dl { fill: var(--accent); }
.dg .dg .tk-dlt,
.dg text.tk-dlt { fill: var(--bg); }
.dg .tk-ring { fill: none; stroke: var(--accent); stroke-width: 2.5; }

.dg1 .dg { max-width: 460px; margin: 0 auto; }
.dg3 .dg { max-width: 440px; }

/* the controls: shown only when the script runs */
.anim-ctl { display: none; }
.anim-ready .anim-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  max-width: var(--measure);
  margin: 10px auto 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.anim-ready .anim-steps { display: none; }

.anim-play,
.anim-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.anim-play { gap: 6px; padding: 0 12px 0 10px; min-width: 82px; }
.anim-ico { width: 12px; height: 12px; fill: currentColor; }
.anim-play .i-play,
.anim-play[aria-pressed="true"] .i-pause { display: none; }
.anim-play[aria-pressed="true"] .i-play { display: inline; }
.anim-rm .anim-play { display: none; }
.anim-dots { display: inline-flex; gap: 6px; }
.anim-dot { width: 28px; padding: 0; }
.anim-dot[aria-current="step"] { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.anim-play:hover,
.anim-dot:hover { border-color: var(--ink-2); }
.anim-play:focus-visible,
.anim-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.anim-bar {
  position: relative;
  flex: 1 1 60px;
  min-width: 40px;
  height: 2px;
  overflow: hidden;
  border-radius: 1px;
  background: var(--grid);
}
.anim-bar i {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.anim-rm .anim-bar { display: none; }
/* every step's words share one grid cell, so the line count never changes the page's height */
.anim-label {
  display: grid;
  flex: 1 1 100%;
  margin: 0;
  line-height: 1.45;
  color: var(--ink-2);
}
.anim-label span {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.anim-label span.on {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease 0.1s, visibility 0s;
}
.anim-steps {
  max-width: var(--measure);
  margin: 10px auto 0;
  padding-left: 1.3rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.dg-after { margin-top: 0.9rem; }

@media print {
  .dg .tk { display: none; }
  .anim-ready .anim-ctl { display: none; }
  .anim-ready .anim-steps { display: block; }
}

/* a table row head naming an architecture type, with the model tested as its instance below it */
.ctable th .inst {
  display: block;
  font-weight: 400;
  font-size: 0.9em;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .anim-label span { transition: none; }
}

/* numbered citations and the reference list */
.cite {
  font-family: var(--sans);
  font-size: 0.8em;
  color: var(--muted);
  white-space: nowrap;
}
.cite a { color: inherit; text-decoration: none; }
.cite a:hover, .cite a:focus-visible { color: var(--accent); text-decoration: underline; }
.refs {
  margin: 0;
  padding-left: 2.1rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.refs li { margin: 0 0 0.45rem; padding-left: 0.2rem; overflow-wrap: anywhere; }
.refs li:target { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.refs .ref-t { color: var(--ink); }

/* ---------- the records page (body.rec-page): every group of tables is a section of its own ---------- */
.rec-page .cz .post > section:first-of-type {
  margin-top: 1.8rem;
}

.rec-page .cz .post .toc-mob {
  margin-top: 0;
}

@media (min-width: 1100px) {
  .rec-page .cz .post > section:first-of-type {
    margin-top: 0;
  }
}

.rec-page .cz .post .allnums-in > h3 {
  margin: 4.2rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: clamp(1.45rem, 1.3rem + 0.6vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
}

.rec-page .cz .post .allnums-in > h3:first-child {
  margin-top: 2.4rem;
}

.rec-page .cz .post .allnums-in > h4 {
  margin-top: 2.6rem;
  font-size: 1.125rem;
}

.rec-page .cz-hero {
  padding-bottom: 44px;
}

.rec-page .cz-byline .stamp {
  color: var(--muted);
}

/* the task table: long class names break instead of running into the next column */
.rec-page .ltable code {
  overflow-wrap: anywhere;
}

.rec-page .ltable td {
  padding-right: 14px;
}