/* The page's style. Dark by default, in the slate of the mark, on a fine
   grid; the light scheme follows the reader's setting. Amber is the one
   accent: the eyebrow that opens a section, seedstone's bar in a chart,
   the seed, and the copy button. */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(inter-400.woff2) format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(inter-700.woff2) format("woff2");
}

:root {
  color-scheme: dark light;
  --rim: #1f2831;
  --face: #3a4756;
  --amber: #f0a030;
  --highlight: #ffc45c;

  --bg: #10161c;
  --bg-raised: #1b232c;
  --card: rgba(16, 22, 28, 0.82);
  --text: #e6edf3;
  --text-2: #b4bec9;
  --muted: #8f9cab;
  --rule: #2b3540;
  --grid: rgba(255, 255, 255, 0.04);
  --glow: rgba(240, 160, 48, 0.13);
  --accent: var(--highlight);   /* amber as text and as a bar, on this background */
  --bar: var(--face);
  --focus: var(--amber);
  --pass: #3fb950;              /* the check mark and an OK; semantic, not brand */
  --fail: #ff6369;              /* 4.5:1 and above as 12 px text on the raised surface */
  --string: #9ad0ff;            /* a JSON string in an excerpt */

  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --measure: 40em;
  --radius: 8px;
  --radius-card: 12px;
  --column: 70rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --bg-raised: #f6f8fa;
    --card: rgba(255, 255, 255, 0.82);
    --text: #1f2328;
    --text-2: #3d4753;
    --muted: #59636e;
    --rule: #d0d7de;
    --grid: rgba(0, 0, 0, 0.05);
    --glow: rgba(240, 160, 48, 0.08);
    --accent: #9a5a05;           /* the amber, deepened until 12 px text holds on white */
    --bar: #8f9cab;
    --focus: var(--text);
    --pass: #1a7f37;
    --fail: #cf222e;
    --string: #0a5fa8;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* The canvas: the colour and the grid, 28 px, one-pixel lines. It is on
   html so the glows, which sit at z-index -1, paint above it. */
html {
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--text);
  font: 400 1rem/1.55 var(--sans);
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  padding: 0 16px;
  background: none;
}

body > * {
  max-width: var(--column);
  margin-left: auto;
  margin-right: auto;
}

/* The glows: three soft amber discs. The hero's sits in a backdrop clipped
   at the page's edges, so it may bleed past the column; the two behind the
   sections are each section's own `::before`, no wider than the section,
   so they follow it wherever the page's height moves it. */
.backdrop {
  position: absolute;
  inset: 0;
  max-width: none;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.glow, .glow-left::before, .glow-right::before {
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent);
  pointer-events: none;
}
.g1 { top: -200px; right: calc(50% - 40rem); }
.glow-left, .glow-right { position: relative; }
.glow-left::before, .glow-right::before {
  content: "";
  z-index: -1;
  width: min(640px, 100%);
  height: auto;
  aspect-ratio: 1;
}
.glow-left::before { top: 4rem; left: 0; }
.glow-right::before { top: 6rem; right: 0; }

h1, h2 { font-weight: 700; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.25rem); line-height: 1.02; letter-spacing: -0.03em; }
h1 span { display: block; text-wrap: balance; }
.claim { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.375rem); line-height: 1.12; max-width: 24em; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--muted); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

code, pre, kbd { font-family: var(--mono); font-size: 0.9em; }
pre { margin: 0; overflow-x: auto; line-height: 1.5; }
pre code { font-size: 0.875rem; }
img, svg, picture { max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }

/* The lockup: the mark's box at 48 px, the name at 48 / 1.6 / 0.727 — the
   cap height of Inter — lifted 0.09 em so the mark's centre meets the middle
   of the x-height; the footer repeats it at 32 px. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  font-size: 2.58rem;        /* 41.3 px beside a 48 px mark */
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  text-decoration: none;
}
.brand .mark { flex: none; width: 1.1622em; height: 1.1622em; }   /* 48 / 41.3 */
.brand .mark svg { display: block; width: 100%; height: 100%; }
.brand .name { position: relative; top: -0.09em; }
.brand.small { font-size: 1.72rem; }                                /* 27.5 px beside a 32 px mark */

/* The header: the lockup and the three places a reader goes. */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.25rem 0;
}
.top nav { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: 0.9375rem; color: var(--text-2); }
.top nav a { text-decoration-color: transparent; }
.top nav a:hover { color: var(--text); text-decoration-color: currentColor; }

/* The hero: the claim and the line on the left; the animation, frameless
   and top-aligned, with its proof in a card under it on the right. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text" "anim" "proof";
  gap: 2.5rem;
  align-items: start;
  padding: 2.5rem 0 4.5rem;
}
.hero-text { grid-area: text; min-width: 0; }
.hero .anim-figure { grid-area: anim; margin: 0; min-width: 0; }
.hero .proof { grid-area: proof; }
.lede { font-size: 1.25rem; line-height: 1.5; color: var(--text-2); margin: 1.5rem 0 0; max-width: 28em; text-wrap: pretty; }

.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; }
.pills li, .pill {
  font-size: 0.8125rem;
  line-height: 1;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--text-2);
  background: var(--card);
}

/* The copy box: the line never wraps or elides; where the box is narrower
   than the line, the line scrolls inside it and the button stays put. */
.copy {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 34rem;
  margin: 1.75rem 0 0.75rem;
  padding: 0.6rem 0.6rem 0.6rem 1rem;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.copy pre { flex: 1 1 auto; min-width: 0; white-space: pre; }
.copy pre code { font-size: 0.875rem; }
.copy-button {
  flex: none;
  font: 700 0.875rem/1 var(--sans);
  color: var(--rim);
  background: var(--amber);
  border: 0;
  border-radius: 6px;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
}
.copy-button:hover { background: var(--highlight); }
.fine { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; max-width: 34rem; }
/* A line longer than its box scrolls inside it, and the fade at the box's
   edge says so; a line that fits ends before the fade. */
.copy pre { padding-right: 1.5rem; mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); }

/* The animation's caption, and the proof card under it. */
.anim-figure figcaption { text-align: right; }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.25rem;
  min-width: 0;
}
.proof { padding-bottom: 1rem; }
.label { font-size: 0.75rem; color: var(--muted); margin: 0 0 0.75rem; }
.proof-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem 1.25rem; align-items: center; }
.factor-line { margin: 0; }
.factor { display: block; font-size: 2.375rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.factor-what { display: block; font-size: 0.8125rem; color: var(--text-2); line-height: 1.35; margin-top: 0.4rem; }
@media (min-width: 30rem) {
  .proof-body { grid-template-columns: 9.5rem minmax(0, 1fr); }
}

/* Bars: the name, the bar on its track, the figure; seedstone's row in
   amber. `--w` is the figure's share of the largest, which the checker
   holds to the table. */
.bars { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.bar {
  display: grid;
  grid-template-columns: 5.2em minmax(0, 1fr) 3.4em;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--text-2);
  --w: 0%;
}
.bar::before {
  content: "";
  display: block;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bar), var(--bar)) no-repeat 0 0 / var(--w) 100%, var(--bg-raised);
  order: 1;
}
.bar .arm { order: 0; white-space: nowrap; }
.bar .figure { order: 2; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar.me { color: var(--accent); font-weight: 700; }
.bar.me::before { background: linear-gradient(90deg, var(--amber), var(--highlight)) no-repeat 0 0 / var(--w) 100%, var(--bg-raised); }
.src { font-size: 0.75rem; color: var(--muted); margin: 1rem 0 0; }
.src a { text-decoration-color: var(--rule); }

@media (min-width: 64rem) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: "text anim" "text proof";
    gap: 1.5rem 3rem;
    padding: 2.5rem 0 2rem;
  }
}

/* The sections: the same skeleton each — an eyebrow, a claim, one line, a
   visual, a source line — set apart by space, not by rules. */
main > section:not(.hero) { padding: clamp(2.5rem, 5vw, 3rem) 0; }
main > section:not(.hero) > * { min-width: 0; }
.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
}
.claim { margin: 0 0 0.9rem; }
.line { font-size: 1.0625rem; color: var(--text-2); max-width: var(--measure); text-wrap: pretty; }
.line { margin-bottom: 2rem; }
.two, .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 64rem) {
  .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.5rem 2.5rem; }
  .two.install { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .two.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .two.speaks { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
@media (min-width: 48rem) {
  .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
#start .two { align-items: center; }
#start .card .copy { margin: 0 0 0.75rem; max-width: none; }
.card h3 { font-size: 0.9375rem; font-weight: 700; margin: 0 0 0.6rem; line-height: 1.3; }
:where(.card) > p { font-size: 0.875rem; color: var(--text-2); }   /* a card's plain paragraph; any class on it wins */
.card code { font-size: 0.85em; }

/* The install card: six panels, one per channel. Without the script every
   panel shows under its own heading; with it (`.js`, from site.js) the
   headings become tabs and one panel shows at a time. */
.tabs { padding-bottom: 1.25rem; }
.tablist { display: none; }
.tabs .panel h3 { margin: 0 0 0.6rem; }
.tabs .panel + .panel { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.tabs .copy { max-width: none; margin: 0; padding: 0.45rem 0.45rem 0.45rem 0.9rem; }
.tabs .copy-button { font-size: 0.8125rem; padding: 0.5rem 0.7rem; }
.tabs .note { font-size: 0.8125rem; color: var(--muted); margin: 0.75rem 0 0; line-height: 1.5; }
.tabs.js { align-self: stretch; display: flex; flex-direction: column; }   /* with the tabs the card is the shorter one: its edge meets the terminal's, and the open panel sits centred in the room under the tab row */
.tabs.js .tablist { display: flex; flex-wrap: wrap; gap: 0.1rem; margin: -0.35rem 0 1.1rem; border-bottom: 1px solid var(--rule); }
.tabs.js .tablist button {
  font: 700 0.8125rem/1 var(--sans);
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.65rem 0.75rem;
  cursor: pointer;
}
.tabs.js .tablist button:hover { color: var(--text); }
.tabs.js .tablist button[aria-selected="true"] { color: var(--text); border-color: var(--amber); }
.tabs.js .panel { display: none; margin: 0; padding: 0; border: 0; }
.tabs.js .panel.on { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; }
.tabs.js .panel h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }

/* The terminal: a well, darker than the page in both schemes, a title bar
   of three blank dots and the session in it; each line is a `.ln` so the
   script can type them one at a time. */
.term {
  --pass: #3fb950;    /* the well is dark in both schemes, so its colours are the dark scheme's */
  --fail: #e5484d;
  margin: 0;
  min-width: 0;
  background: #0c1116;
  color: #c3ccd6;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.term-bar { display: flex; gap: 6px; padding: 0.7rem 0.9rem; border-bottom: 1px solid #1f2831; }
.term-bar i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #2b3540; }
.term pre { padding: 1rem 1.1rem 1.1rem; line-height: 1.75; }
.term pre code { font-size: 0.8125rem; }
.term .ln { display: block; white-space: pre; }
@media (max-width: 40rem) {
  .term .ln { white-space: pre-wrap; overflow-wrap: anywhere; }
}
.term .p { color: #8b97a5; }
.term .ok, .ok { color: var(--pass); }
.term .er, .er { color: var(--fail); }
.term .cur { display: inline-block; width: 0.55em; height: 1em; background: var(--highlight); vertical-align: -0.15em; }

/* The pipeline strip: the seed, three stages, the trace. */
.pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font: 400 0.75rem/1 var(--mono);
  color: var(--text-2);
}
.pipeline li { padding: 0.45rem 0.75rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); }
.pipeline li.seed { color: var(--accent); border-color: var(--amber); }
.pipeline li.arrow { padding: 0; border: 0; background: none; color: var(--muted); }

/* The two run panels: four strips of cells each, the failing tick red,
   the trace beside it, the verdict under a rule. */
.runs { display: flex; flex-direction: column; }
.runs h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.runs .tag { font-weight: 400; font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.runs .tag.seed { font-family: var(--mono); color: var(--accent); }
.runs.seeded { border-color: color-mix(in srgb, var(--pass) 35%, var(--rule)); }
.runlist { margin: 0 0 0.9rem; padding: 0; list-style: none; }
.runs .run { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 7.6rem; gap: 0.6rem; align-items: center; font-size: 0.75rem; color: var(--muted); margin: 0.55rem 0; }
.cells { display: flex; gap: 2px; }
.cells i { flex: 1; height: 11px; border-radius: 2px; background: var(--bg-raised); border: 1px solid var(--rule); }
.cells i.on { background: var(--face); border-color: var(--face); }
.cells i.hit.on { background: var(--fail); border-color: var(--fail); }
.tr { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr.fail { color: var(--fail); }
.tr.dim { color: var(--muted); }
.run-note { font-size: 0.6875rem; color: var(--muted); margin: -1.1rem 0 0.9rem 3.2rem; }
.runs .verdict { margin: auto 0 0; padding-top: 0.8rem; border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--text-2); }
.runs .verdict.pass { color: var(--pass); }
@media (max-width: 30rem) {
  .runs .run { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .runs .run .tr { grid-column: 2; margin-top: -0.2rem; }
}

/* The three figures under the panels: unboxed, a number and its sentence. */
.stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 2rem; margin: 2rem 0 0; }
.stats strong { display: block; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.stats strong span { color: var(--accent); font-size: 1.125rem; }
.stats p { font-size: 0.8125rem; color: var(--text-2); line-height: 1.45; max-width: 22em; }
@media (min-width: 40rem) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The four comparison cards: the cell and what it is, the grey line for
   the engines level with seedstone, then the factor beside the bars. */
.compare .label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem; color: var(--text); font-weight: 700; margin-bottom: 0.25rem; }
.compare .label .what { font-weight: 400; color: var(--muted); }
.compare .tie { font-size: 0.75rem; color: var(--muted); margin: 0 0 1rem; }
.compare .factor { font-size: 2rem; }
.compare .proof-body { gap: 0.9rem 1.25rem; }
@media (min-width: 30rem) {
  .compare .proof-body { grid-template-columns: 8.5rem minmax(0, 1fr); }
}
.compare .bar { grid-template-columns: 5.6em minmax(0, 1fr) 3.4em; }   /* room for "Valkey ×4" */

/* The four operations cards: a title, one line, the excerpt. The two
   cards of a row share a height, and the excerpt's block is what grows to
   fill it, so nothing opens up between the text and the code. */
.ops { align-items: stretch; }
.op { display: flex; flex-direction: column; }
.op > p { margin-bottom: 1rem; }
.op > pre:last-child { flex: 1 1 auto; }
.op pre { padding: 0.7rem 0.85rem; background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--radius); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.op pre code { font-size: 0.75rem; }
.op .key { color: var(--accent); }
.op .str { color: var(--string); }
.op .cm { color: var(--muted); }
.op .p { color: var(--muted); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin: 0 0 0.6rem; padding: 0; list-style: none; font-size: 0.75rem; line-height: 1.35; color: var(--text-2); }
.steps li { padding: 0.5rem 0.6rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-raised); text-wrap: balance; }
.steps .step-n { display: block; font-size: 0.6875rem; font-weight: 700; color: var(--accent); margin-bottom: 0.15rem; }

/* The compatibility chips: the four groups of the named list, then the
   dashed row of what is not here yet. */
.groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 1.5rem; }
@media (min-width: 30rem) {
  .groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .groups .not-yet { grid-column: 1 / -1; }
}
.group h3 { font-size: 0.75rem; font-weight: 700; color: var(--muted); margin: 0 0 0.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chips .chip {
  font: 400 0.75rem/1 var(--mono);
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg-raised);
  color: var(--text);
}
.chips .chip.no { background: none; border-style: dashed; color: var(--muted); }

/* The footer: the lockup, the seven pages, the licence. */
footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem 3rem;
  padding: 2.5rem 0 3.5rem;
  margin-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.8125rem;
}
footer > div { flex: 1 1 28rem; min-width: 0; }
footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 0.9rem; color: var(--text-2); }
footer nav a { text-decoration-color: transparent; }
footer nav a:hover { text-decoration-color: currentColor; }
footer p { max-width: 60em; }

/* anim */
/* The hero animation: a seed, three clients, two runs. The markup is the
   final frame — every cell, chip, trace and the verdict carry `on` — so the
   picture is complete with no script and under reduced motion; site.js
   strips the classes and puts them back, tick by tick. */
.anim-figure { margin: 2.5rem 0 0; max-width: 32rem; }
.anim {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--mono);
  font-size: 11px;
  fill: currentColor;
  --cell-on: var(--face);
  --fail: #e5484d;
  --pass: #3fb950;
}
@media (prefers-color-scheme: light) {
  .anim { --cell-on: #c9d1d9; --fail: #cf222e; --pass: #1a7f37; }
}
.anim .seed { fill: var(--amber); }
.anim .seed-bg { fill: var(--rim); }
.anim .dim { fill: var(--muted); }
.anim .cell { fill: none; stroke: var(--rule); stroke-width: 1; transition: fill 0.12s, stroke 0.12s; }
.anim .cell.on { fill: var(--cell-on); stroke: var(--cell-on); }
.anim .cell.hit.on { fill: var(--fail); stroke: var(--fail); }
.anim .chip, .anim .trace, .anim .verdict { opacity: 0; transition: opacity 0.2s; }
.anim .chip.on, .anim .trace.on, .anim .verdict.on { opacity: 1; }
.anim .chip rect { fill: var(--bg-raised); stroke: var(--rule); }
.anim .chip text, .anim .trace { font-size: 10px; }
.anim .fail { fill: var(--fail); }
.anim .pass { fill: var(--pass); }
.anim-figure figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; color: var(--muted); font-size: 0.8125rem; margin-top: 0.6rem; }
/* The one control the picture has while it moves: pause, play, and replay
   once it has rested; the script shows it, so there is none without one. */
.anim-ctl { flex: none; font: 700 0.75rem/1 var(--sans); color: var(--text-2); background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 0.35rem 0.7rem; cursor: pointer; }
.anim-ctl:hover { color: var(--text); border-color: var(--text-2); }
/* /anim */

/* motion */
/* What moves, each time it is scrolled into view: the two terminals
   type, the two run panels run, the comparison bars grow. Everything
   above this block is the final state, so the page is complete with no
   script and under reduced motion; site.js takes each visual back to its
   start as it loads (`.play`, `--w: 0%`), lets it play when it is on
   screen, and takes it back to its start once it has left. Nothing here
   changes a box's size or removes text from the page: a line not yet
   typed is there, in transparent ink, so the terminal keeps its height
   and a screen reader has the whole transcript from the first moment. */
.motion .bar::before { transition: background-size 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--delay, 0s); }
.term.play .ln:not(.on), .term.play .ln:not(.on) *, .term.play .todo { color: transparent; }
.term.play .cur { visibility: hidden; }
/* The cursor follows the last character typed and advances nothing: its
   negative margin takes back its width, so the transparent rest of the
   line never moves and never re-wraps under it. */
.term.play .ln.typing .typed::after { content: ""; display: inline-block; width: 0.55em; margin-right: -0.55em; height: 1em; background: var(--highlight); vertical-align: -0.15em; }
.motion .cells i { transition: background-color 0.12s, border-color 0.12s; }
.runs.play .tr, .runs.play .verdict { opacity: 0; transition: opacity 0.25s; }
.runs.play .tr.on, .runs.play .verdict.on { opacity: 1; }
/* /motion */