/* Agima project page
   A paper-style frame: white page, ink type, figures set straight on the page with numbered captions.
   One accent, imagination blue, and only where it means "imagined" or "Agima". Act green, dead-end red and
   Format-2 amber appear only inside figures. Dashed outlines = imagined; solid ink = real; solid green = solved. */

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

  /* core palette */
  --paper: #FFFFFF;          /* page and figure ground */
  --ink: #16181D;            /* type, solid buttons, real frames (17.8:1 on paper) */
  --graphite: #555B67;       /* captions, affiliations, notes, legends, unpressed controls (6.8:1 on paper) */
  --rule: #DADDE3;           /* hairlines that carry information */
  --rule-strong: #B4B9C2;    /* slider tracks and disabled outlines only */
  --mist: #F3F4F6;           /* the one surface tint: code block, canvas placeholders, baseline row */

  --blue: #2660E0;           /* imagination, Agima, the selected K, focus, reading progress */
  --green: #12926C;          /* act / success (figures only) */
  --red: #D44C38;            /* dead end (figures only) */
  --amber: #C47012;          /* Format 2 (figures only) */
  /* darker twins for small text */
  --blue-ink: #1F52C4;
  --green-ink: #0B7354;
  --red-ink: #B53A27;
  --amber-ink: #995408;
  /* tints */
  --blue-50: #EAF0FC;
  --green-50: #E3F3EC;
  --red-50: #FBEAE6;
  --amber-50: #FAF0E2;

  /* baseline greys inside figures */
  --base-strong: #868C97;
  --base-light: #C3C7CF;
  --grid: #ECEEF1;

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sans: "Source Sans 3", "Source Sans Pro", "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* one column for everything: title, prose, figures */
  --max: 960px;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 39rem;          /* prose: section leads and sub-section text, about 72 characters */
  /* captions and table notes have no measure of their own: they run the width of their figure */
  --radius: 6px;             /* controls only */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ============================== base ============================== */
*, *::before, *::after { box-sizing: border-box; }
/* anchor jumps land below the sticky top bar: --bar-h is its height, kept exact by main.js */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h, 60px) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  /* clip, not hidden: hidden makes the body a scroll container while the lightbox locks html's overflow, and
     the sticky top bar would then scroll away under it */
  overflow-x: hidden; overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.125rem;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
[hidden] { display: none !important; }
code, pre { font-family: var(--mono); }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
i, em { font-style: italic; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius);
  color: #fff; background: var(--ink); font-family: var(--sans); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* prose links: ink with a hairline underline */
p a:not([class]), .site-footer a {
  color: var(--ink);
  text-decoration: underline 1px var(--rule);
  text-underline-offset: .2em;
}
p a:not([class]):hover, .site-footer a:hover { text-decoration-color: var(--ink); }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }

/* ============================== reading progress ============================== */
/* a 2 px imagination-blue line across the very top, filled by main.js as the page scrolls */
.progress { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 2px; pointer-events: none; }
.progress span {
  display: block; height: 100%;
  background: var(--blue);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ============================== top bar (sticky) ============================== */
/* it stays at the top of the window, under the progress line and the lightbox; once the page has scrolled, a
   hairline sets it off from the content (.is-stuck, set by main.js). Its height never changes, so nothing jumps */
.masthead {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  background: var(--paper);
}
.masthead.is-stuck { border-bottom-color: var(--rule); }
.masthead-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px;
  padding-block: 14px;
}
/* the mark: a solid ink square (real) behind a dashed blue one (imagined), as in the favicon */
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 1.3125rem; font-weight: 600; line-height: 1.2; letter-spacing: -.005em;
  text-decoration: none;
}
.brand-mark { display: block; width: 24px; height: 24px; flex: none; overflow: visible; }
.brand-mark .bm-real { fill: var(--ink); }
.brand-mark .bm-imag { fill: rgba(255, 255, 255, .9); stroke: var(--blue); stroke-width: 2.6; stroke-dasharray: 4 2.4; }
.nav-links {
  display: flex; flex-wrap: wrap; gap: 0 24px;
  margin: 0; padding: 0; list-style: none;
  font-family: var(--sans); font-size: .9375rem; line-height: 1.4;
}
.nav-links a { display: inline-block; padding-block: 4px; color: var(--graphite); text-decoration: none; }
/* the section in view (aria-current, set by main.js) looks like a hovered link. Hover only with a real pointer:
   a touch screen keeps :hover on the last link tapped, and two links would look current */
.nav-links a[aria-current] { color: var(--ink); text-decoration: underline 1px; text-underline-offset: .25em; }
@media (hover: hover) {
  .nav-links a:hover { color: var(--ink); text-decoration: underline 1px; text-underline-offset: .25em; }
}
/* touch tablets get the same 32 px tall links as phones */
@media (pointer: coarse) { .nav-links a { padding-block: 6px; } }

/* ============================== hero ============================== */
.hero { padding-top: 72px; }
.title {
  max-width: 15em; margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4.6vw + .5rem, 4.25rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.015em;
}
.authors { margin-top: 24px; }
.author-list { display: flex; flex-wrap: wrap; gap: 2px 20px; margin: 0; font-size: 1.125rem; line-height: 1.6; }
.author { white-space: nowrap; }
.author-mark { margin-left: 1px; color: var(--graphite); font-size: .66em; }
.affiliations { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 8px 0 0; color: var(--graphite); font-size: 1rem; }
.affil { white-space: nowrap; }
.affil sup { margin-right: 2px; font-size: .7em; }
.author-note { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 4px 0 0; color: var(--graphite); font-size: .875rem; }

/* Paper / arXiv / Code: solid ink buttons; a link that is not live yet is aria-disabled (title "Coming soon") */
.publication-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px 0 14px;
  border-radius: var(--radius);
  color: #fff; background: var(--ink);
  font-family: var(--sans); font-size: .9375rem; font-weight: 600; line-height: 1; text-decoration: none;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { background: #2A2E37; }
.btn[aria-disabled="true"] { cursor: default; }
.btn[aria-disabled="true"]:hover { background: var(--ink); }
.btn-plain { padding: 0 16px; }

/* secondary button (BibTeX copy, Fig. 5 replay) */
.copy-btn, .f5-btn.f5-btn-text {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink); background: var(--paper);
  font-family: var(--sans); font-size: .875rem; font-weight: 600; cursor: pointer;
}
.copy-btn:hover { border-color: var(--ink); }

/* teaser video */
.teaser { margin-top: 48px; }
/* the clean teaser is drawn on white, like the page, so a hairline frames it */
.teaser-frame { position: relative; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: #fff; }
.teaser-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #fff; cursor: pointer; }
.sound-toggle {
  position: absolute; top: clamp(10px, 2vw, 16px); right: clamp(10px, 2vw, 16px); z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px 0 10px;
  border: 0; border-radius: var(--radius);
  color: #fff; background: rgba(22, 24, 29, .78);
  font-family: var(--sans); font-size: .875rem; font-weight: 600; cursor: pointer;
}
.sound-toggle[hidden] { display: none; }
.sound-toggle:hover { background: rgba(22, 24, 29, .9); }
.sound-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--blue); }
.sound-toggle .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .ico path:first-child { fill: currentColor; }
.sound-toggle .ico-sound, .sound-toggle.is-on .ico-muted { display: none; }
.sound-toggle.is-on .ico-sound { display: block; }
.sound-state { font-weight: 400; }

/* the one-sentence summary, the page's first paragraph */
.summary { padding-top: 40px; }
/* the measure is in em, so it stays near 75 characters at every size of the type */
.standfirst {
  max-width: 34em; margin: 0;
  font-size: clamp(1.25rem, 1.2vw + .9rem, 1.5rem);
  line-height: 1.45;
}

/* ============================== sections ============================== */
/* a jump to a section (a link in the top bar, or #traps in the address) lands with its heading 32 px under the
   bar: html's scroll-padding-top clears the bar, and the scroll margin takes back the section's top padding */
.chapter { --chapter-pad: clamp(64px, 9vw, 128px); padding-top: var(--chapter-pad); scroll-margin-top: calc(16px - var(--chapter-pad)); }
main { padding-bottom: clamp(64px, 7vw, 96px); }
/* headings, one scale in Source Serif 4 (its optical sizes tighten the larger ones):
   h1 68 px, h2 40 px (sections), h3 26 px (sub-sections, with a short ink rule above), body 18 px;
   labels inside figures (format names, environments, chart titles) are Source Sans 3 at 16 px */
.chapter-head { margin-bottom: 36px; }
.chapter-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.8vw + 1.2rem, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.016em;
}
.chapter-lead { max-width: var(--measure); margin: 14px 0 0; }
h3 { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; line-height: 1.25; }
.trap-copy h3, .analysis-copy h3 {
  margin: 0 0 10px;
  font-size: clamp(1.375rem, .6vw + 1.1rem, 1.625rem);
  line-height: 1.2;
  letter-spacing: -.012em;
}
.trap-copy h3::before, .analysis-copy h3::before {
  content: ""; display: block;
  width: 28px; height: 2px; margin-bottom: 14px;
  background: var(--ink);
}
/* the RL chart titles are figure labels, not sub-section headings */
.chart .rlc-title { font-family: var(--sans); font-size: 1rem; line-height: 1.3; }

/* captions: "Figure N." in ink, the rest in graphite; table captions sit above their table.
   A caption runs the full width of its figure, as in the paper. */
.fig-cap, .f1-cap {
  max-width: none; margin: 12px 0 0;
  color: var(--graphite);
  font-family: var(--serif); font-size: .9375rem; line-height: 1.5;
}
.fig-cap b, .f1-cap b { color: var(--ink); font-weight: 600; }
/* a caption with the figure's own control at the right end of the line */
.cap-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-top: 12px; }
.cap-row > .fig-cap, .cap-row > .f1-cap { flex: 1 1 24rem; margin: 0; }
.cap-row > :not(p) { flex: none; margin-left: auto; }

/* wide paper figures link to the full-size file (pinch-zoomable on phones) */
.zoom { position: relative; display: block; cursor: zoom-in; }
.team-diagram .zoom:focus-visible { outline-offset: -3px; }
.zoom-hint {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px; border-radius: 4px;
  color: #fff; background: rgba(22, 24, 29, .8);
  font-family: var(--sans); font-size: .8125rem; font-weight: 600; line-height: 1.5;
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease;
}
.zoom-hint svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.zoom:hover .zoom-hint, .zoom:focus-visible .zoom-hint { opacity: 1; }
/* touch screens and phones: always show a small icon badge in the corner */
@media (hover: none), (max-width: 640px) {
  .zoom-hint { top: 6px; right: 6px; bottom: auto; padding: 5px; opacity: 1; }
  .zoom-hint > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* "Auto-play on / off" for figures that move by themselves (built by main.js): a plain text button */
.auto-toggle {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 32px; padding: 0 2px;
  border: 0; border-radius: 4px; background: none;
  color: var(--graphite);
  font-family: var(--sans); font-size: .875rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
}
.auto-toggle:hover { color: var(--ink); }
.auto-toggle svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auto-state { font-weight: 400; }

/* ============================== videos ============================== */
/* clips rendered with the teaser engine: white like the teaser, in the same hairline frame */
.clip { position: relative; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: #fff; }
.clip-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #fff; cursor: pointer; }
/* under each video (built by main.js): play / pause, a scrubber, and the time; like the traps' controls */
.media-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.media-play {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; color: #fff; background: var(--ink); cursor: pointer;
}
.media-play:hover { background: #2A2E37; }
.media-play .ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.media-play .ico-play { fill: currentColor; stroke-width: 1.6; }
.media-play .ico-play, .media-play.is-paused .ico-pause { display: none; }
.media-play.is-paused .ico-play { display: block; }
.media-range {
  --p: 0%;
  flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.media-range:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.media-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ink) var(--p), var(--rule-strong) var(--p));
}
.media-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--rule-strong); }
.media-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ink); }
.media-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px;
  border: 2px solid #fff; border-radius: 50%; background: var(--ink);
}
.media-range::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--ink); }
.media-time { flex: none; min-width: 5.6em; color: var(--graphite); font-family: var(--sans); font-size: .8125rem; font-variant-numeric: tabular-nums; text-align: right; }

/* ============================== method ============================== */
.team-diagram { position: relative; overflow: hidden; background: #fff; }
.team-diagram img { width: 100%; }
.team-highlight {
  position: absolute; z-index: 2;
  border: clamp(2px, .25vw, 3px) solid var(--blue);
  border-radius: 8px;
  background: rgba(38, 96, 224, .035);
  opacity: 0; pointer-events: none;
  transition: left 620ms var(--ease), top 620ms var(--ease), width 620ms var(--ease), height 620ms var(--ease), opacity 260ms ease;
}
.team-diagram.is-active .team-highlight { opacity: 1; }
.team-diagram.is-active .team-highlight.is-hidden { opacity: 0; }

/* Figure 2, the three formats: plain columns; the one Figure 1 is showing gets a top rule in its format colour */
.formats { margin-top: 48px; }
.format-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.formats > .fig-cap { margin-top: 20px; }
.format-card {
  --c: var(--blue);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  cursor: pointer;
}
.format-card[data-format-step="forward"] { --c: var(--amber); }
.format-card.is-active { padding-top: 13px; border-top: 2px solid var(--c); }
.format-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 0; border: 0; border-radius: 4px; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.format-card h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.3;
}
.format-card p { margin: 0; color: var(--graphite); font-size: .9375rem; line-height: 1.5; }
.format-diagram { display: block; width: 100%; height: auto; margin: 14px 0 12px; overflow: visible; }
.format-diagram .frame { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.format-diagram .frame.img { fill: var(--blue-50); stroke: var(--blue); stroke-dasharray: 4 3; }
.format-diagram .frame.bad { fill: var(--red-50); stroke: var(--red); stroke-dasharray: 4 3; }
.format-diagram .frame.good { fill: var(--green-50); stroke: var(--green); stroke-width: 2; }
.format-diagram .act { fill: #fff; stroke: var(--blue); stroke-width: 1.5; }
.format-diagram .act.bad { stroke: var(--red); }
.format-diagram .act.good { stroke: var(--green); }
.format-diagram .edge { fill: none; stroke: var(--base-strong); stroke-width: 1.3; }
.format-diagram .edge.bad { stroke: var(--red); }
.format-diagram .edge.good { stroke: var(--green); }
/* math in the diagrams is set like the paper: serif italic */
.format-diagram text { font-family: var(--serif); font-size: 18px; font-style: italic; font-weight: 400; fill: var(--ink); }
.format-diagram .plan { font-size: 14px; }
.format-diagram .glyph { font-family: var(--sans); font-size: 12.5px; font-style: normal; font-weight: 600; }
.format-diagram .glyph.bad { fill: var(--red-ink); }
.format-diagram .glyph.good { fill: var(--green-ink); }
.format-diagram .arrow-head { fill: var(--base-strong); }

.lg { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
/* a key set inline in a caption sentence */
.fig-cap .lg { width: 12px; height: 12px; margin: 0 1px; vertical-align: -1px; }
.lg-real { background: #fff; border: 1.5px solid var(--ink); }
.lg-imag { background: var(--blue-50); border: 1.5px dashed var(--blue); }
.lg-good { background: var(--green-50); border: 2px solid var(--green); }
.lg-bad { background: var(--red-50); border: 1.5px dashed var(--red); }

/* ============================== environments ============================== */
.env-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.env h3 { margin: 0 0 10px; font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.env-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.env-pair img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 0; border: 1px solid var(--rule); border-radius: 2px; }
.env-pair figcaption { margin-top: 6px; color: var(--graphite); font-family: var(--sans); font-size: .8125rem; line-height: 1.4; }
.env-controls { margin-top: 20px; }

/* ============================== results ============================== */
/* table and chart chrome (rendered by main.js): the caption sits above, its control at the right */
.chart-controls { margin: 0 0 12px; }
.seg { display: inline-flex; flex-wrap: wrap; font-family: var(--sans); }
.seg-btn {
  min-height: 32px; margin: 0 0 0 -1px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: 0;
  color: var(--graphite); background: var(--paper);
  font-size: .875rem; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
}
.seg-btn:first-child { margin-left: 0; border-radius: var(--radius) 0 0 var(--radius); }
.seg-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.seg-btn:hover { color: var(--ink); }
.seg-btn[aria-pressed="true"] { position: relative; color: #fff; background: var(--ink); border-color: var(--ink); }
.seg-btn:focus-visible { position: relative; z-index: 1; }
.chart-note { margin: 0 0 18px; color: var(--graphite); font-size: .9375rem; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; color: var(--graphite); font-family: var(--sans); font-size: .8125rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }

/* booktabs tables: a heavy rule at the top and bottom, a hairline under the header, no box */
.table-wrap { overflow-x: auto; }
/* a table wider than the screen fades out at the edge it can scroll toward (class set by main.js) */
.table-wrap.is-clipped { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.table-wrap[hidden] { display: none; }
.data-table {
  width: 100%; border-collapse: collapse;
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  background: #fff;
  font-family: var(--sans); font-size: .875rem; font-variant-numeric: lining-nums tabular-nums;
}
.data-table th, .data-table td { padding: 8px 12px; text-align: right; white-space: nowrap; }
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table thead th { border-bottom: 1px solid var(--rule); font-weight: 600; }
.data-table tr.is-closed td { color: var(--graphite); }
.data-table tr.is-lin td { background: var(--mist); }
.data-table tr.is-ours td { background: var(--blue-50); }
.data-table tr.is-ours td:first-child { font-weight: 600; }
.data-table td.is-best { font-weight: 600; }
.data-table tr.group-row td {
  padding: 12px 12px 4px; background: transparent;
  color: var(--graphite); font-size: .8125rem; font-weight: 600; text-align: left;
}
.data-table tbody tr.group-row:not(:first-child) td { border-top: 1px solid var(--rule); }
.delta { margin-left: 5px; font-size: .8em; font-weight: 600; }
.delta.up { color: var(--green-ink); }
.delta.down { color: var(--red-ink); }
.delta.flat { color: var(--ink); }
.table-foot { margin: 10px 0 0; color: var(--graphite); font-family: var(--serif); font-size: .875rem; line-height: 1.5; }

/* Table 1 (main.js): environments x K, linked to the rollout viewer */
.seg-labeled { display: inline-flex; align-items: center; gap: 8px; }
.seg-label { color: var(--graphite); font-family: var(--serif); font-size: 1.125rem; font-style: italic; font-weight: 400; }
.seg-labeled .seg-btn { min-width: 2.6em; }
.kt-tabs { display: none !important; }
.kt { font-size: .8125rem; }
.data-table.kt th, .data-table.kt td { padding: 7px 6px; }
.kt td { min-width: 2.4em; }
.kt thead th, .kt thead td { border-bottom: 0; background: #fff; }
.kt thead th.kt-env { border-bottom: 1px solid var(--rule); }
.kt thead tr + tr th { border-bottom: 1px solid var(--rule); }
.kt-env { padding: 9px 4px 5px !important; text-align: center !important; }
.kt [data-k="1"], .kt th.kt-env { border-left: 1px solid var(--rule); }
.kt-env-btn, .kt-k-btn {
  appearance: none; margin: 0; border: 0; border-radius: 4px; background: none;
  font: inherit; color: inherit; cursor: pointer;
}
.kt-env-btn { padding: 2px 10px; font-family: var(--sans); font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.kt-env-btn[aria-pressed="true"] { color: var(--blue-ink); }
.data-table.kt th.kt-k { padding: 3px 2px; }
.kt-k-btn { width: 100%; min-width: 2.2em; min-height: 30px; padding: 2px 4px; color: var(--graphite); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.kt-env-btn:hover, .kt-k-btn:hover { color: var(--ink); background: rgba(22, 24, 29, .06); }
.kt-k-btn[aria-pressed="true"] { color: #fff; background: var(--blue-ink); }
.kt th.kt-method { text-align: left; font-weight: 600; }
.kt-khint { float: right; margin-left: 12px; color: var(--graphite); font-family: var(--serif); font-size: 1.0625rem; font-style: italic; font-weight: 400; line-height: 1.1; }
.kt tbody th { text-align: left; font-weight: 400; }
.kt td.is-na { color: var(--graphite); }
.kt tr.is-closed th { color: var(--graphite); }
.kt tr.is-ours th { font-weight: 600; }
.kt tr.is-ours th, .kt tr.is-ours td { background: var(--blue-50); }
/* the selected column: thin blue side rules, the one selection cue in the table body */
.kt td.is-sel { box-shadow: inset 1.5px 0 0 var(--blue), inset -1.5px 0 0 var(--blue); }
/* the method column stays put while the table scrolls sideways */
.kt .kt-corner, .kt th.kt-method, .kt tbody th { position: sticky; left: 0; z-index: 1; }
.kt .kt-corner, .kt th.kt-method, .kt tbody tr:not(.is-ours) th { background: #fff; }
.kt tr.group-row td > span { position: sticky; left: 12px; }

/* Table 1 as line charts (main.js): one small chart per environment, x = K */
.kc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.kc-panel { min-width: 0; padding-top: 8px; border-top: 1px solid var(--rule); }
.kc-panel.is-env { padding-top: 7px; border-top: 2px solid var(--blue); }
.kc-title { margin: 0 0 4px; font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.kc-plot { position: relative; }
.kc-svg { display: block; width: 100%; height: auto; overflow: visible; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; font-family: var(--sans); }
.kc-svg:focus { outline: none; }
.kc-svg:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.kc-svg text { fill: var(--graphite); font-size: 11.5px; font-variant-numeric: lining-nums tabular-nums; }
.kc-svg .kc-tick.is-sel { fill: var(--blue-ink); font-weight: 600; }
.kc-svg .kc-axis { font-family: var(--serif); font-size: 15px; font-style: italic; font-weight: 400; }
.kc-svg .kc-val { fill: var(--blue-ink); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.kc-svg .kc-gl { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.kc-svg .kc-base { stroke: var(--rule-strong); stroke-width: 1; shape-rendering: crispEdges; }
.kc-svg .kc-band { fill: var(--blue-50); }
.kc-svg .kc-cross { stroke: var(--ink); stroke-opacity: .3; stroke-width: 1; shape-rendering: crispEdges; }
.kc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kc-dot { stroke: #fff; stroke-width: 2; paint-order: stroke; }
.kc-line.kc-ours { stroke: var(--blue); stroke-width: 2.5; }
.kc-dot.kc-ours { fill: var(--blue); }
.kc-line.kc-noimg { stroke: var(--base-strong); }
.kc-dot.kc-noimg { fill: var(--base-strong); }
.kc-line.kc-sft { stroke: var(--base-light); stroke-width: 1.75; }
.kc-dot.kc-sft { fill: var(--base-light); }
.kc-line.kc-closed { stroke: var(--base-strong); stroke-width: 1.5; stroke-dasharray: 4 3; }
.kc-dot.kc-closed { fill: #fff; stroke: var(--base-strong); stroke-width: 1.5; paint-order: normal; }
.kc-key { flex: none; overflow: visible; }
.kc-band-key { display: inline-block; width: 12px; height: 14px; border-radius: 3px; background: var(--blue-50); box-shadow: inset 0 0 0 1px rgba(38, 96, 224, .25); }
.kc-tip {
  position: absolute; top: 6px; left: 0; z-index: 5; padding: 8px 10px 7px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: #fff;
  box-shadow: 0 12px 28px -16px rgba(22, 24, 29, .45);
  font-family: var(--sans); font-size: .8125rem; line-height: 1.35; white-space: nowrap; pointer-events: none;
}
.kc-tip p { margin: 0; }
.kc-tip-h { margin-bottom: 3px !important; color: var(--graphite); font-weight: 600; }
.kc-tip-r { display: flex; align-items: center; gap: 7px; padding: 1px 0; }
.kc-tip-r b { min-width: 2.6em; font-weight: 600; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.kc-tip-r span { color: var(--graphite); }
.kc-tip-r.is-ours b, .kc-tip-r.is-ours span { color: var(--ink); font-weight: 600; }
.kc-legend { margin-top: 14px; }

/* Figure 4, real board vs imagined (main.js): Agima's frame next to the real environment, on the column's left edge */
.kv { margin-top: 64px; font-family: var(--sans); }
.kv-head { margin-bottom: 20px; }
.kv-segs { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.kv-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: start; gap: clamp(14px, 4vw, 40px); }
.kv-panel { min-width: 0; }
/* "Agima (imagined)", "Environment (real)": the name, then the state in brackets */
.kv-panel figcaption { display: flex; align-items: baseline; gap: 5px; margin: 0 0 8px; font-size: .875rem; font-weight: 600; }
.kv-name { order: 0; }
.kv-tag { order: 1; font-weight: 400; transition: color 200ms ease; }
.kv-tag::before { content: "("; }
.kv-tag::after { content: ")"; }
.kv-panel.is-imag .kv-tag { color: var(--blue-ink); }
.kv-box {
  aspect-ratio: 1 / 1; padding: 5px;
  border: 2px solid var(--ink); border-radius: 12px; background: #fff;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 300ms ease;
}
.kv-panel.is-imag .kv-box { border-style: dashed; border-color: var(--blue); background: var(--blue-50); }
.kv-canvas { display: block; width: 100%; height: 100%; border-radius: 7px; background: var(--mist); }
.kv-stage.is-arrive .kv-agima .kv-box { box-shadow: 0 0 0 6px rgba(22, 24, 29, .1); }
@media (prefers-reduced-motion: no-preference) {
  .kv-stage.is-loading .kv-canvas { animation: kv-wait 900ms ease-in-out infinite alternate; }
}
@keyframes kv-wait { from { opacity: .45; } to { opacity: 1; } }
.kv-bar { display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 16px 0 0; }
.kv-play {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; color: #fff; background: var(--ink); cursor: pointer;
}
.kv-play:hover { background: #2A2E37; }
.kv-play:focus-visible { outline-offset: 2px; }
.kv-play .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kv-play .ico-play { fill: currentColor; stroke-width: 1.6; }
.kv-play .ico-play, .kv-play.is-paused .ico-pause { display: none; }
.kv-play.is-paused .ico-play { display: block; }
.kv-track { flex: 1; display: flex; align-items: center; gap: 2px; min-width: 0; height: 30px; touch-action: pan-y; cursor: pointer; }
.kv-track:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.kv-cell { flex: 1 1 0; min-width: 2px; height: 12px; border-radius: 2px; transition: height 160ms ease; }
.kv-cell.is-imag { background: var(--blue-50); box-shadow: inset 0 0 0 1.25px var(--blue); }
.kv-cell.is-real { background: var(--ink); }
.kv-cell.is-now { height: 26px; }
.kv-cell.is-imag.is-now { background: var(--blue); }
.kv-status { max-width: 640px; margin: 8px 0 0 48px; color: var(--graphite); font-size: .875rem; font-variant-numeric: lining-nums tabular-nums; }
.kv > .fig-cap { margin-top: 16px; }

/* ============================== planning traps ============================== */
/* the trap animations are styled in traps.css */
.trap-results { margin-top: 64px; }
/* Table 2, its caption and its note keep near the table's width (its seven columns need about 780 px, so there is
   room to spare whichever font is showing) */
#reasoning-results { max-width: 860px; }
#reasoning-results .data-table th, #reasoning-results .data-table td { padding-inline: 10px; }
/* on a phone Table 2 scrolls sideways; the method names stay put */
@media (max-width: 760px) {
  #reasoning-results thead th:first-child, #reasoning-results tbody tr:not(.group-row) td:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); }
  #reasoning-results tbody tr.is-lin td:first-child { background: var(--mist); }
  #reasoning-results tbody tr.is-ours td:first-child { background: var(--blue-50); }
  /* narrower columns: the set names break onto two lines, the method names wrap */
  #reasoning-results thead th { white-space: normal; vertical-align: bottom; }
  #reasoning-results thead th:not(:first-child) { min-width: 4.2em; }
  #reasoning-results tbody tr:not(.group-row) td:first-child { min-width: 8em; max-width: 9em; white-space: normal; line-height: 1.3; }
}
.trap-cap { margin-top: 16px; }

/* ============================== RL ============================== */
/* more room above each sub-section than inside it */
.analysis-row { padding-top: clamp(64px, 6vw, 88px); }
.chapter-head + .analysis-row, .chapter-head + noscript + .analysis-row { padding-top: 0; }
.analysis-copy { max-width: var(--measure); margin-bottom: 32px; }
.analysis-copy p { margin: 0; }
.analysis-row > figure + figure { margin-top: 48px; }
/* the fork illustration is a supporting clip: narrower than the column, on its left edge */
.analysis-row > .clip-figure { max-width: 720px; }
/* animated charts (drawn by rl-charts.js into .rl-chart) */
.rl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.rl-figure > .fig-cap { margin-top: 16px; }
.chart { min-width: 0; }
/* a five-item legend (three models, then the 3- and 4-box line styles) breaks between the two groups,
   instead of leaving "4 boxes" alone on a second line */
.chart .rlc-legend:has(> li:nth-child(5)) > li:nth-child(n+4) { order: 2; }
.chart .rlc-legend:has(> li:nth-child(5))::after { content: ""; flex-basis: 100%; order: 1; margin-bottom: -4px; }
.rl-chart { min-width: 0; }
.rl-chart:empty { min-height: 220px; }
/* no JavaScript: the paper's figures stand in for the charts */
.rl-static { margin: 0 0 48px; }
.rl-static img { display: block; width: 100%; height: auto; }

/* Fig. 5 (figures.js): the same puzzle before vs after RL, rebuilt from the figure's boards and text */
.fig5 > .fig-cap { margin-top: 16px; }
.fig5-static img { width: 100%; }
.f5 { font-family: var(--sans); }
.f5-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.f5-steps { display: inline-flex; align-items: center; gap: 6px; }
.f5-btn {
  display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--rule); border-radius: 50%; color: var(--ink); background: var(--paper);
  cursor: pointer;
}
.f5-btn:hover:not([aria-disabled="true"]) { border-color: var(--ink); }
.f5-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.f5-btn[aria-disabled="true"] { border-color: var(--rule-strong); opacity: .38; cursor: default; }
.f5-btn.f5-btn-text { height: 32px; margin-left: 8px; padding: 0 12px 0 10px; border-radius: var(--radius); }
.f5-btn-text svg { width: 16px; height: 16px; }
.f5-count { min-width: 6.6em; color: var(--graphite); font-size: .8125rem; text-align: center; font-variant-numeric: lining-nums tabular-nums; }
.f5-input { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
.f5-input .f5-board { width: 64px; flex: none; }
.f5-input p { margin: 0; font-family: var(--serif); font-size: 1rem; }
.f5-input-tag { font-family: var(--sans); font-weight: 600; }
.f5-stack { display: grid; gap: 28px; border-radius: 4px; }
.f5-view-title { margin: 0 0 10px; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.f5-stack:focus-visible { outline-offset: 6px; }
.f5-view { min-width: 0; }
/* the format blocks are set apart by space and a hairline; the text highlights carry the format colours */
.f5-block + .f5-block { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); }
.f5-tag { margin: 0 0 4px; color: var(--graphite); font-size: .8125rem; }
.f5-tag strong { color: var(--ink); font-weight: 600; }
.f5-intro { margin: 0 0 4px; font-family: var(--serif); font-size: 1rem; }
.f5-row { display: grid; grid-template-columns: minmax(0, 17rem) auto minmax(0, 1fr); align-items: center; gap: 10px 24px; padding: 12px 0; }
.f5-row + .f5-row { border-top: 1px dashed var(--rule); }
.f5-lead { margin: 0; font-family: var(--serif); font-size: 1rem; line-height: 1.5; }
.f5-seq { display: grid; grid-template-columns: repeat(4, 64px); gap: 8px; margin: 0; padding: 0; list-style: none; }
.f5-step { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.f5-act { color: var(--graphite); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.f5-board {
  position: relative; display: block; width: 100%; max-width: 108px; aspect-ratio: 1 / 1;
  border-radius: 5px; outline: 2px dashed var(--blue); outline-offset: 2px; background: var(--mist);
}
.f5-board img { width: 100%; height: 100%; border-radius: 4px; }
.f5-board.is-real { outline: 2px solid var(--ink); }
.f5-board.is-dead { outline-color: var(--red); }
.f5-board.is-good { outline: 2.5px solid var(--green); }
.f5-badge {
  position: absolute; top: -10px; right: -10px; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; color: #fff; box-shadow: 0 0 0 2px #fff;
}
.is-dead .f5-badge { background: var(--red); }
.is-good .f5-badge { background: var(--green); }
.f5-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* step-by-step reveal (the boards, their action words, and each plan's result with its last board) */
.f5-step .f5-act, .f5-step .f5-board img, .f5-step .f5-badge, .f5-out { opacity: 0; transition: opacity 160ms ease; }
.f5-step:not(.is-on) .f5-board { outline-color: var(--rule-strong); }
.f5-step.is-on .f5-act, .f5-step.is-on .f5-board img, .f5-step.is-on .f5-badge, .f5-row.is-done .f5-out { opacity: 1; }
.f5-step.is-now .f5-board { box-shadow: 0 0 0 6px rgba(38, 96, 224, .16); }
.f5-out p { margin: 0; font-family: var(--serif); font-size: 1rem; line-height: 1.5; }
.f5-out .f5-end { margin-top: 3px; }
.f5-row.is-ok .f5-result { color: var(--green-ink); }
.f5-row.is-bad .f5-result { color: var(--red-ink); }
.t-tk { color: var(--blue-ink); font-family: var(--mono); font-size: .84em; }
.t-b { font-weight: 600; }
.t-p1, .t-p2 { padding: 0 2px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.t-p1 { background: var(--blue-50); box-shadow: inset 0 -2px 0 rgba(38, 96, 224, .5); }
.t-p2 { background: var(--amber-50); box-shadow: inset 0 -2px 0 rgba(196, 112, 18, .55); }
.f5-legend { margin: 16px 0 0; color: var(--graphite); font-size: .8125rem; }
.f5-legend .t-p1, .f5-legend .t-p2 { color: var(--ink); font-weight: 600; }

/* ============================== citation ============================== */
.citation-box { position: relative; border-radius: 4px; background: var(--mist); }
.citation-box pre {
  margin: 0; padding: 20px 24px;
  color: var(--ink); font-size: .875rem; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.copy-btn { position: absolute; top: 12px; right: 12px; z-index: 1; }

/* ============================== footer ============================== */
.site-footer { padding-bottom: 48px; }
.site-footer .wrap::before { content: ""; display: block; margin-bottom: 28px; border-top: 1px solid var(--rule); }
/* the mark and the name, then the title in graphite; the credit line below */
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 14px; }
.footer-brand .brand-mark { width: 28px; height: 28px; }
.footer-name { font-family: var(--serif); font-size: 1.3125rem; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; }
.footer-title { color: var(--graphite); font-size: 1rem; line-height: 1.3; }
.footer-credit { max-width: var(--measure); margin: 0; color: var(--graphite); font-size: .875rem; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ============================== responsive ============================== */
/* Table 1 in the 960 px column: compact columns at every width */
.data-table.kt th, .data-table.kt td { padding-inline: 4px; }
.data-table.kt th:first-child, .data-table.kt td:first-child { padding-left: 10px; }
.kt tbody th { white-space: normal; line-height: 1.3; }
.kt td { min-width: 2.1em; }
@media (max-width: 1040px) {
  .kc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .format-grid { grid-template-columns: 1fr; max-width: 560px; gap: 28px; }
  /* Table 1: one environment at a time, picked with tabs */
  .kt-tabs { display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; max-width: 460px; margin-bottom: 12px; }
  .kt thead tr:first-child { display: none; }
  .kt [data-e]:not(.is-env) { display: none; }
  /* the table's tabs pick the environment for the rollout viewer too, so the viewer drops its own row */
  .kv-segs > .seg { display: none; }
  .kt .kt-corner, .kt th.kt-method, .kt tbody th, .kt tr.group-row td > span { position: static; }
  .kt tr.group-row td { white-space: normal; }
  .f5-row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
  .f5-out { grid-column: 2; }
}
@media (max-width: 860px) {
  .env-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .rl-grid { grid-template-columns: 1fr; gap: 40px; }
  .f5-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .f5-out { grid-column: auto; }
  .f5-seq { max-width: none; }
  .f5-board { max-width: none; }
}
@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  /* the top bar is two rows: the mark and name, then all six links on one line (down to a 320 px screen). The
     space between links is their own padding, so each is a 32 px tall target; the row's negative margin keeps
     the first word in line with the mark */
  .masthead-inner { flex-direction: column; align-items: flex-start; gap: 0; padding-block: 8px 2px; }
  .nav-links { gap: 0; margin-inline: -6px; font-size: .875rem; }
  .nav-links a { display: flex; align-items: center; min-height: 32px; padding: 0 6px; white-space: nowrap; }
  .hero { padding-top: 40px; }
  .author-list { gap: 0 14px; font-size: 1.0625rem; }
  .affiliations { gap: 0 14px; font-size: .9375rem; }
  .teaser { margin-top: 36px; }
  /* on phones the videos run edge to edge, so their text stays as large as it can */
  .teaser-frame, .clip { margin-inline: calc(-1 * var(--gutter)); border-inline: 0; border-radius: 0; }
  .sound-toggle { min-height: 32px; padding: 0 10px 0 8px; font-size: .8125rem; }
  .media-bar { gap: 8px; }
  .media-time { min-width: 0; font-size: .75rem; }
  .env-pair { gap: 10px; }
  .citation-box pre { padding: 48px 16px 16px; font-size: .8125rem; }
  .copy-btn { top: 8px; right: 8px; min-height: 30px; }
  .seg-btn { padding: 0 10px; font-size: .8125rem; }
  .f5-act { font-size: .75rem; }
  .f5-badge { top: -8px; right: -8px; width: 20px; height: 20px; }
  .kv-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kv-box { padding: 3px; border-radius: 9px; }
  .kv-canvas { border-radius: 5px; }
  .kv-panel figcaption { font-size: .8125rem; gap: 4px; }
  .kt-tabs .seg-btn, .kv-segs .seg-btn { padding: 0 4px; font-size: .8125rem; }
  .data-table.kt th, .data-table.kt td { padding: 6px 3px; }
  .data-table.kt th:first-child, .data-table.kt td:first-child { padding-left: 8px; }
  .kt { font-size: .8125rem; }
  .kt tbody th { max-width: 7em; white-space: normal; line-height: 1.3; }
  .kt td { min-width: 0; }
  .data-table.kt th.kt-k { padding: 2px 1px; }
  .kt-k-btn { min-width: 0; min-height: 36px; padding: 2px 1px; }
  .kt-khint { margin-left: 4px; }
  .kv-segs, .kv-segs .seg-labeled { width: 100%; }
  .kv-segs .seg-labeled .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .kv-status { margin-left: 0; }
  .kv-segs .seg-labeled .seg { flex: 1; }
  .kv-segs .seg-labeled .seg-btn { min-width: 0; }
  .f5-seq { gap: 11px; }
  .f5-board { outline-offset: 1px; }
}
@media (max-width: 560px) {
  .kc-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 480px) {
  /* Fig. 5: four boards per row, each about 60 px wide */
  .f5-seq { grid-template-columns: repeat(4, minmax(0, 60px)); gap: 8px; }
}
@media (max-width: 400px) {
  .f5-steps { flex-wrap: wrap; }
  .f5-count { min-width: 0; padding-inline: 2px; }
}
@media (max-width: 359px) {
  /* the top bar's six links still fit on one line */
  .nav-links { margin-inline: -4px; font-size: .8125rem; }
  .nav-links a { padding-inline: 4px; }
}

@media print {
  .masthead, .progress, .sound-toggle, .media-bar, .skip-link, .copy-btn { display: none !important; }
  .zoom-hint, .auto-toggle, .f5-head, .kv-bar, .kv-status { display: none !important; }
  .f5-step .f5-act, .f5-step .f5-board img, .f5-step .f5-badge, .f5-out { opacity: 1 !important; }
}