/* How it works (#how-it-works): "An AI teammate for chip verification." and the verification loop as four steps, one
   at a time, on a painted sky (after hue.run's "How it works", Kavin 2026-10-31 and 2026-11-01). The steps are a plain
   ordered list in index.html, stacked; on wide screens with motion steps.js adds .steps--tabs, pins the section, runs
   the stage on a timer and lets the scroll take it over. A line under the names runs from Iteration back to Testing:
   the loop. Under it, the current step's sentence, in the middle. Each step has one small animated card (.sc). The
   cards' own rules follow the shared base below; scripts/steps.mjs copies them in from steps/. The sky is a detail of
   Perugino's Crucifixion (National Gallery of Art, open access; assets/art/CREDITS.md). */

/* ---------- shared card base ---------- */
.sc {
  position: relative;
  box-sizing: border-box;
  background: var(--card);
  color: var(--ink);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(75, 54, 34, .14),
    0 26px 52px -22px rgba(28, 26, 22, .5),
    0 10px 20px -12px rgba(28, 26, 22, .28);
  font: 400 13px/1.45 var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.sc *, .sc *::before, .sc *::after { box-sizing: border-box; }
/* A "working" status line: a gold sheen runs through the text while the card plays. */
.sc.is-on .sc-shimmer {
  background: linear-gradient(90deg, var(--ink-3) 0 38%, var(--gold) 50%, var(--ink-3) 62% 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sc-shimmer 1.8s linear infinite;
}
@keyframes sc-shimmer { from { background-position: 100% 0; } to { background-position: -160% 0; } }
/* Held on its first frame, just before it plays (steps.js): .is-on starts the card's animations and this pauses them. */
.sc.sc--hold, .sc.sc--hold::before, .sc.sc--hold::after,
.sc.sc--hold *, .sc.sc--hold *::before, .sc.sc--hold *::after { animation-play-state: paused !important; }

/* ---------- the section (its heading is .sh--line, styles.css) ---------- */
/* The stage grows with the width (360 to 450 px) but gives way on short laptop screens (1440 x 780, 1280 x 720), so the
   heading, the stage, the names and the step's sentence fit on one screen under the nav, with some air, while the
   section is pinned. A window taller than 1000 px gives it a quarter of the extra height, up to 80 px more (Kavin,
   2026-11-01: on a tall screen it looked small, with "lots of whitespace below it"); steps.js scales the card with it. */
.steps {
  position: relative;
  --stage-h: calc(clamp(320px, min(max(360px, 30.5vw), 100vh - 380px), 450px) + clamp(0px, (100vh - 1000px) * .25, 80px));
  --stage-r: 8px;
}
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 56px); }
.steps__sky { display: none; }
.steps-track { display: none; }
/* Each step: its picture (a card on the sky), its name and its description. Stacked like this on phones, with reduced
   motion, without JS and in print. */
.steps__pic {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: #96a9b3 url(/assets/art/sky-perugino-900.webp) var(--sky-x, 50%) 50% / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(28, 26, 22, .08);
}
/* steps.js sets --s to fit each card to its picture; --s0 is the fallback without JS (a wide card, 600 x 340, drawn
   small enough to fit). */
/* The card is centred on its picture even when it is wider than it (it is scaled down to fit). */
.steps__fit {
  --s0: .5;
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  transform: translate(-50%, -50%) scale(var(--s, var(--s0)));
  transform-origin: center;
}
.steps__name { margin: 18px 0 0; font: 500 1.0625rem/1.3 var(--sans); color: var(--ink); position: relative; }
.steps__btn {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  display: inline-flex; align-items: baseline; gap: .55em; text-align: left; cursor: pointer;
}
.steps__num { font: 500 1.125rem/1 var(--serif); color: var(--walnut); min-width: 1.6em; }
.steps__bar { display: none; }
.steps__desc { margin: 6px 0 0; color: var(--ink-2); font-size: 1rem; line-height: 1.55; max-width: 46ch; }
.steps__say { display: none; } /* the central copy of the sentences: wide screens only (below) */
/* the sky shows a different part of the painting behind each step */
.steps__item:nth-child(1) { --sky-x: 10%; }
.steps__item:nth-child(2) { --sky-x: 38%; }
.steps__item:nth-child(3) { --sky-x: 66%; }
.steps__item:nth-child(4) { --sky-x: 92%; }
/* The loop, stacked (phones, reduced motion, no JS, print): one line after the last step. */
.steps__loop { display: flex; align-items: center; gap: 10px; margin: -12px 0 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.4; }
.steps__loop-line, .steps__loop-label { display: none; }
.steps__loop-text { display: inline-flex; align-items: center; gap: 10px; }
.steps__loop-text svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--walnut); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 599.98px) {
  .steps__pic { aspect-ratio: 5 / 4; }
}
/* Phones and small tablets (the stacked steps; Kavin, 2026-11-02): no "Back to Testing" line (wide screens keep the
   loop) and a little more room between the steps. They scroll freely with the page (Kavin, 2026-11-02 23:43Z: "it
   should just be a free-flowing scroll now"; the one-step-per-swipe paging is gone). */
@media screen and (max-width: 899.98px) {
  .steps:not(.steps--tabs) .steps__list { gap: clamp(64px, 10vw, 80px); }
  .steps:not(.steps--tabs) .steps__loop { display: none; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .steps__pic { aspect-ratio: 16 / 10; }
  .steps__fit { --s0: .85; }
}
/* wide screens before (or without) steps.js, and with reduced motion: the same stack, kept to a readable width */
@media (min-width: 900px) {
  .steps:not(.steps--tabs) .steps__item { max-width: 760px; }
  .steps:not(.steps--tabs) .steps__pic { aspect-ratio: 16 / 10; }
  .steps__fit { --s0: 1.05; }
}
@media (min-width: 1440px) { .steps__pic { background-image: url(/assets/art/sky-perugino-1600.webp); } }
@media (min-resolution: 2dppx) { .steps__pic { background-image: url(/assets/art/sky-perugino-1600.webp); } }

/* ---------- wide screens with motion, once steps.js runs: a timer runs one stage, the scroll can take it over -------
   The section pins (.steps-section--pin): its .wrap, the heading, the stage, the names and the sentence, stays on
   screen at --pin-top, centred under the nav, while the page scrolls through .steps-track under it, --track long
   (steps.js: 60% of the window's height per step, at most 600 px, and half a step more after IV for the loop). The
   stage (.steps--tabs) shows the current step, with the names in a row under it; the gold bar under each name fills as
   the page scrolls through that step (--p), whether the timer scrolls it or the visitor does, and after IV the
   "Next round" line fills in gold from IV back to II (--q). Under that, the current step's sentence (.steps__say).
   Screen only: print is the stack. */
@media screen and (min-width: 900px) {
  .steps-section--pin > .wrap { position: sticky; top: var(--pin-top, calc(var(--nav-h) + 8px)); }
  .steps-section--pin > .steps-track { display: block; height: var(--track, 270vh); }

  .steps--tabs .steps__sky {
    display: block;
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--stage-h);
    border-radius: var(--stage-r);
    overflow: hidden;
    background: #96a9b3 url(/assets/art/sky-perugino-1600.webp) 50% 50% / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(28, 26, 22, .08);
  }
  .steps--tabs .steps__list {
    --gap: clamp(16px, 1.8vw, 28px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: var(--stage-h) auto auto;  /* stage, names, the loop line */
    column-gap: var(--gap);
    row-gap: 0;
  }
  .steps--tabs .steps__item { display: contents; }
  .steps--tabs .steps__pic {
    grid-row: 1;
    grid-column: 1 / -1;
    z-index: 1;
    aspect-ratio: auto;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(.985);
    filter: blur(6px);
    transition: opacity .45s var(--ease-out), transform .6s var(--ease-out), filter .45s var(--ease-out), visibility 0s linear .45s;
  }
  .steps--tabs .steps__item.is-current .steps__pic {
    opacity: 1; visibility: visible; transform: none; filter: none;
    transition-delay: .1s, .1s, .1s, 0s;
  }
  .steps--tabs .steps__name {
    grid-row: 2;
    grid-column: var(--n);
    margin: 0;
    padding-top: 22px;
    font-size: .9375rem;
    color: var(--ink-3);
    transition: color var(--dur-short);
  }
  .steps--tabs .steps__name::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-strong); }
  /* the scroll through this step: full for the steps behind, empty for those ahead (steps.js sets --p) */
  .steps--tabs .steps__bar {
    display: block; position: absolute; left: 0; right: 0; top: -.5px; height: 2px;
    background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  }
  /* The line and its gold run along the stage's flat bottom edge, so the outer two stop where its corners start to
     curve (Kavin, 2026-11-01: the fill stuck out under the rounded corner). */
  .steps--tabs .steps__item:first-child .steps__name::before,
  .steps--tabs .steps__item:first-child .steps__bar { left: var(--stage-r); }
  .steps--tabs .steps__item:nth-last-child(2) .steps__name::before,
  .steps--tabs .steps__item:nth-last-child(2) .steps__bar { right: var(--stage-r); }
  .steps--tabs .steps__btn { width: 100%; padding: 2px 0; }
  .steps--tabs .steps__num { font-size: 1rem; min-width: 1.7em; color: var(--ink-3); transition: color var(--dur-short); }
  .steps--tabs .steps__name:hover, .steps--tabs .steps__item.is-current .steps__name { color: var(--ink); }
  .steps--tabs .steps__item.is-current .steps__num { color: var(--walnut); }
  /* Each step's own sentence stays in the list for screen readers (visually hidden); what shows is the central copy. */
  .steps--tabs .steps__desc {
    position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  /* The current step's sentence, in the middle under the names and the loop (Kavin, 2026-11-01: "a central section
     that the text cycles in and out of"). steps.js puts a copy of each sentence in one cell, so the longest sets the
     height and nothing moves when they change. The old one fades out to the side it is leaving by, and the new one
     comes in from the side the step came from: from the right going forward (and round the loop), from the left
     going back. */
  .steps--tabs .steps__say {
    display: grid; width: 100%; max-width: 60ch; margin: 18px auto 0;
    text-align: center; color: var(--ink-2); font-size: var(--fs-body); line-height: 1.55;
  }
  /* the old one is all but gone (.16 s) before the new one shows (from .14 s), so the two never read over each other */
  .steps__say-line {
    grid-area: 1 / 1; margin: 0; text-wrap: balance;  /* centred lines of even length, no word left alone */
    opacity: 0; visibility: hidden; transform: translateX(var(--say-x, 0px));
    transition: opacity .16s ease-in, transform .3s var(--ease-out), visibility 0s linear .3s;
  }
  .steps__say-line.is-on {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .42s var(--ease-out) .14s, transform .6s var(--ease-out) .1s, visibility 0s;
  }
  .steps__say-line.is-set { transition: none; }
  /* The loop: under the names, a line from IV (Iteration) back to II (Testing), with an arrowhead at II and "Next round"
     on it. At the end of the track, after IV, the scroll fills it in gold from IV back to II (--q, steps.js), and the
     label darkens once the gold has passed it (.steps--looped). The ends sit under the numerals: --lx from the start
     of a column. */
  .steps--tabs .steps__loop {
    --lx: 9px;
    --span: calc((100% - 2 * var(--gap)) * 2 / 3 + 2 * var(--gap));  /* from column II to column IV */
    display: block; position: relative; grid-row: 3; grid-column: 2 / -1;
    height: 30px; margin: 6px 0 0; pointer-events: none;
  }
  .steps--tabs .steps__loop-text { display: none; }
  .steps--tabs .steps__loop-line, .steps--tabs .steps__loop-run {
    display: block; position: absolute; top: 0; left: var(--lx); width: var(--span); height: 15px;
    border: 1.5px solid var(--line-strong); border-top: 0; border-radius: 0 0 7px 7px;
  }
  /* the gold copy of the line, cut from the left: none of it at --q 0, all of it (with the arrowhead) at --q 1 */
  .steps--tabs .steps__loop-run {
    left: -1.5px; top: 0; width: calc(100% + 3px); height: calc(100% + 1.5px); border-color: var(--gold);
    clip-path: inset(-8px -8px -8px calc((1 - var(--q, 0)) * (100% + 16px) - 8px));
  }
  .steps--tabs .steps__loop-line::before, .steps--tabs .steps__loop-run::before {
    content: ""; position: absolute; left: -5.75px; top: -3px; width: 8px; height: 8px;
    border: solid var(--line-strong); border-width: 1.5px 0 0 1.5px; transform: rotate(45deg);
  }
  .steps--tabs .steps__loop-run::before { left: -4.25px; top: -3px; border-color: var(--gold); }
  .steps--tabs .steps__loop-label {
    display: block; position: absolute; top: 15px; left: calc(var(--lx) + var(--span) / 2); transform: translate(-50%, -50%);
    padding: 0 10px; background: var(--paper);
    font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
    transition: color .3s var(--ease-out);
  }
  .steps--looped .steps__loop-label { color: var(--walnut); }
  /* The timer going round (.steps--lap, steps.js): once the bracket has drawn, the stage goes back to II for the next
     round, and the gold runs on rather than winding back. The bracket's gold runs out of its far end into II's
     numeral, and the bars of the steps after II hand their gold on to the right. II's own bar starts again, under the
     arrowhead. */
  .steps--lap .steps__loop-run { animation: steps-lap .7s var(--ease-out) both; }
  .steps--lap .steps__item.is-current ~ .steps__item .steps__bar { transform-origin: 100% 50%; transition: transform .7s var(--ease-out); }
  @keyframes steps-lap {
    from { clip-path: inset(-8px -8px -8px -8px); }
    to { clip-path: inset(-8px calc(100% + 8px) -8px -8px); }
  }
}
@media screen and (min-width: 900px) and (min-resolution: 2dppx) {
  .steps--tabs .steps__sky { background-image: url(/assets/art/sky-perugino-2400.webp); }
}
@media (prefers-reduced-motion: reduce) {
  .steps__pic, .steps__desc, .steps__name, .steps__num, .steps__loop-label, .steps__bar, .steps__say-line { transition: none !important; }
  .steps__loop-run { animation: none !important; }
}

/* ---------- the cards (one block per card; scripts/steps.mjs copies them in from steps/) ---------- */
/* cards:start */
/* ---------- I. spec (steps/spec.css) ---------- */
/* Step I, Specification: Akrida reads the spec and pulls out each requirement it can check. On the left, section 4 of
   spec.md: each requirement is its real id and a grey bar for its sentence (the bar's length follows the sentence's
   length). Three beats: a reading band passes down the page, marking each id and counting it; the marked ids lift out
   into the list on the right; REQ-X-1, which the spec only implies, joins them: 19 requirements. Without .is-on the
   card shows that finished picture.
   Data (axil_ram run 20261025-012315): the 19 ids and their order from plan.json requirements[].id (REQ-X-1's text
   starts "(Implied)"); the 18 numbered ones, their groups and sentence lengths from examples/axil_ram/spec.md,
   section 4, which the run's planning prompt (llm/00_plan.json) holds verbatim; the file name from design.json.
   Timeline (ms), worked out from the rows' positions (the flight offsets --xw/--yw, --xn/--yn were measured from the
   finished layout):
   520 to 3437  the band reads row 1 to row 18 (160 ms a 13 px row); each id is marked and counted as it is reached
   3697 to 5305  the ids lift out (24 ms apart, 1200 ms each) and settle into the list
   5425  REQ-X-1 joins; 5665  the count reaches 19; 5685  "implied"; 6150  the story ends (data-dur) */
@property --sc-spec-n { syntax: "<integer>"; inherits: false; initial-value: 19; }

.sc--spec {
  --sc-spec-hl: color-mix(in srgb, var(--gold-soft) 70%, var(--card));
  --sc-spec-mh: 6px;    /* the marker's height under an id */
  --sc-spec-lift: 5px;  /* an id rises off its line before it slides out */
  --sc-spec-b0: -1px;   /* the band over the first row, and over the last */
  --sc-spec-b1: 236px;
  --sc-spec-fly: 1200ms; --sc-spec-band: 3737ms;
  --sc-spec-x: 5425ms; --sc-spec-xd: 520ms; --sc-spec-n19: 5665ms; --sc-spec-impl: 5685ms;
  width: 596px;
  height: 336px;
  padding: 12px;
  display: grid;
  grid-template-columns: 288px 1fr;
  column-gap: 26px;
}

/* ---------- the page ---------- */
.sc--spec .sc-spec__desk { position: relative; overflow: hidden; padding: 12px 14px 0; background: var(--paper-2); border-radius: 7px; }
.sc--spec .sc-spec__sheet {
  height: 100%; padding: 12px 14px 0;
  background: var(--card); border-radius: 4px 4px 0 0;
  box-shadow: 0 0 0 1px rgba(75, 54, 34, .12), 0 10px 22px -16px rgba(28, 26, 22, .45);
}
.sc--spec .sc-spec__head { display: flex; align-items: baseline; justify-content: space-between; height: 18px; }
.sc--spec .sc-spec__h { font: 500 13.5px/18px var(--serif); color: var(--ink); }
.sc--spec .sc-spec__file { display: inline-flex; align-items: center; gap: 5px; font: 400 11px/18px var(--mono); color: var(--ink-3); }
.sc--spec .sc-spec__doc { flex: none; }
.sc--spec .sc-spec__lines { position: relative; margin-top: 10px; }
.sc--spec .sc-spec__ln { position: relative; z-index: 1; height: 13px; display: grid; grid-template-columns: 74px 1fr; align-items: center; }
.sc--spec .sc-spec__ln--g { margin-top: 4px; }
/* an id, marked: a marker stroke under it */
.sc--spec .sc-spec__id {
  justify-self: start; margin-left: -2px; padding: 0 2px;
  font: 400 11px/13px var(--mono); color: var(--walnut);
  background: linear-gradient(var(--sc-spec-hl), var(--sc-spec-hl)) 0 100% / 100% var(--sc-spec-mh) no-repeat;
}
.sc--spec .sc-spec__bar { display: block; width: calc(var(--w) * 100%); height: 4px; border-radius: 2px; background: var(--paper-3); }
/* the reading band: hidden in the still */
.sc--spec .sc-spec__band {
  position: absolute; z-index: 0; left: -14px; right: -14px; top: 0; height: 15px; opacity: 0;
  background: color-mix(in srgb, var(--gold-soft) 38%, transparent);
  box-shadow: inset 2px 0 0 var(--gold);
  transform: translateY(var(--sc-spec-b1));
}

/* ---------- what it found ---------- */
.sc--spec .sc-spec__out { margin-top: -3px; }
.sc--spec .sc-spec__count { display: flex; align-items: baseline; gap: 10px; height: 48px; margin: 0 0 25px; }
.sc--spec .sc-spec__n {
  --sc-spec-n: 19; counter-reset: sc-spec-n var(--sc-spec-n);
  min-width: 2ch; text-align: right;
  font: 500 60px/50px var(--serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; color: var(--ink);
}
.sc--spec .sc-spec__n::before { content: counter(sc-spec-n); }
.sc--spec .sc-spec__lbl { font: 500 15px/1 var(--sans); color: var(--ink-2); }
.sc--spec .sc-spec__chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; }
.sc--spec .sc-spec__chip {
  --x: var(--xw); --y: var(--yw); --s: var(--sw);
  height: 24px; border: 1px solid var(--line); border-radius: 5px; background-color: var(--card);
  font: 400 12px/22px var(--mono); color: var(--ink-2); text-align: center; white-space: nowrap;
}
.sc--spec .sc-spec__chip--x { border-style: dashed; border-color: var(--line-strong); color: var(--ink-3); }
.sc--spec .sc-spec__implied { padding-left: 6px; font: 400 12px/24px var(--sans); color: var(--ink-3); }

/* ---------- narrow (phones): a smaller page, its ids drawn as short marks; the same list and count ---------- */
.sc--spec.sc--narrow {
  --sc-spec-mh: 100%;
  --sc-spec-lift: 0px;
  --sc-spec-b0: .2px; --sc-spec-b1: 207.6px;
  width: 396px; height: 296px; padding: 10px; grid-template-columns: 112px 1fr; column-gap: 16px;
}
.sc--spec.sc--narrow .sc-spec__desk { padding: 10px 10px 0; }
.sc--spec.sc--narrow .sc-spec__sheet { padding: 10px 10px 0; }
.sc--spec.sc--narrow .sc-spec__h { display: none; }
.sc--spec.sc--narrow .sc-spec__file { font-size: 12px; }
.sc--spec.sc--narrow .sc-spec__ln { height: 11.375px; grid-template-columns: 24px 1fr; }
.sc--spec.sc--narrow .sc-spec__ln--g { margin-top: 3.5px; }
.sc--spec.sc--narrow .sc-spec__id {
  width: 18px; height: 4px; margin: 0; padding: 0; border-radius: 2px; font-size: 0; color: transparent;
  background: linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 100% no-repeat, var(--line-strong);
}
.sc--spec.sc--narrow .sc-spec__bar { height: 3px; }
.sc--spec.sc--narrow .sc-spec__band { left: -10px; right: -10px; height: 11px; }
.sc--spec.sc--narrow .sc-spec__count { gap: 8px; margin-bottom: 14px; }
.sc--spec.sc--narrow .sc-spec__n { font-size: 46px; line-height: 40px; }
.sc--spec.sc--narrow .sc-spec__lbl { font-size: 14px; }
.sc--spec.sc--narrow .sc-spec__chips { gap: 8px 6px; }
.sc--spec.sc--narrow .sc-spec__chip { --x: var(--xn); --y: var(--yn); --s: var(--sn); height: 22px; line-height: 20px; border-radius: 4px; }
.sc--spec.sc--narrow .sc-spec__implied { line-height: 22px; }

/* ---------- motion (only while the step is current) ---------- */
.sc--spec.is-on .sc-spec__band { animation: sc-spec-band var(--sc-spec-band) linear both; }
.sc--spec.is-on .sc-spec__id { animation: sc-spec-mark 260ms cubic-bezier(.3, .6, .3, 1) var(--t) both; }
.sc--spec.is-on .sc-spec__n { animation: sc-spec-n var(--sc-spec-n19) step-end both; }
/* the label's plural s hides while the count reads 1 (520 to 680 ms) */
.sc--spec.is-on .sc-spec__pl { animation: sc-spec-pl var(--sc-spec-n19) step-end both; }
.sc--spec.is-on .sc-spec__chip {
  animation:
    sc-spec-fx var(--sc-spec-fly) linear var(--f) both,
    sc-spec-fy var(--sc-spec-fly) linear var(--f) both,
    sc-spec-fo var(--sc-spec-fly) linear var(--f) both,
    sc-spec-fc var(--sc-spec-fly) ease var(--f) both;
}
.sc--spec.is-on .sc-spec__chip--x { animation: sc-spec-in var(--sc-spec-xd) cubic-bezier(.2, .7, .2, 1) var(--sc-spec-x) both; }
.sc--spec.is-on .sc-spec__implied { animation: sc-spec-fade 420ms ease var(--sc-spec-impl) both; }

@keyframes sc-spec-mark { from { background-size: 0 var(--sc-spec-mh); color: var(--ink-3); } }
/* An id lifts out as a copy of itself: it rises off its line, slides out of the page between the lines (so no two
   cross), then settles into its row of the list, where its card forms round it. */
@keyframes sc-spec-fx {
  0% { transform: translateX(var(--x)) scale(var(--s)); animation-timing-function: cubic-bezier(.5, 0, .25, 1); }
  62%, 100% { transform: none; }
}
@keyframes sc-spec-fo { 0%, 3% { opacity: 0; } 15%, 100% { opacity: 1; } }
@keyframes sc-spec-fy {
  0% { translate: 0 var(--y); animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  12%, 34% { translate: 0 calc(var(--y) - var(--sc-spec-lift)); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  100% { translate: 0 0; }
}
/* the card forms round the id as it lands */
@keyframes sc-spec-fc {
  0%, 64% { color: var(--walnut); background-color: transparent; border-color: transparent; }
  92% { color: var(--ink-2); }
}
@keyframes sc-spec-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes sc-spec-fade { from { opacity: 0; } }
@keyframes sc-spec-band {
  0% { transform: translateY(var(--sc-spec-b0)); opacity: 0; }
  6.957% { transform: translateY(var(--sc-spec-b0)); opacity: 0; }
  13.915% { transform: translateY(var(--sc-spec-b0)); opacity: 1; }
  91.972% { transform: translateY(var(--sc-spec-b1)); opacity: 1; }
  100% { transform: translateY(var(--sc-spec-b1)); opacity: 0; }
}
@keyframes sc-spec-pl { 0% { visibility: visible; } 9.179% { visibility: hidden; } 12.004%, 100% { visibility: visible; } }
@keyframes sc-spec-n {
  0% { --sc-spec-n: 0; }
  9.179% { --sc-spec-n: 1; }
  12.004% { --sc-spec-n: 2; }
  14.828% { --sc-spec-n: 3; }
  17.652% { --sc-spec-n: 4; }
  20.477% { --sc-spec-n: 5; }
  24.166% { --sc-spec-n: 6; }
  26.99% { --sc-spec-n: 7; }
  29.815% { --sc-spec-n: 8; }
  32.639% { --sc-spec-n: 9; }
  36.328% { --sc-spec-n: 10; }
  39.153% { --sc-spec-n: 11; }
  42.86% { --sc-spec-n: 12; }
  45.684% { --sc-spec-n: 13; }
  48.508% { --sc-spec-n: 14; }
  51.333% { --sc-spec-n: 15; }
  54.157% { --sc-spec-n: 16; }
  56.981% { --sc-spec-n: 17; }
  60.671% { --sc-spec-n: 18; }
  100% { --sc-spec-n: 19; }
}

/* ---------- II. testing (steps/testing.css) ---------- */
/* Step II, Testing (merges the old Test plan and Targeted test cards). Left, the test plan: requirement rows with one
   ring per coverage point fill in while the totals count to 19 requirements and 54 coverage points; REQ-MEM-2 opens to
   name its three points, and CP-MEM-2-CROSS is picked out. Right, tb_v0.sv: the test aimed at that point, tagged with
   it, types in (lines 752-757, the unaligned 4x4 cross; line 756 cut with "…"), and the line count runs on to the
   file's 931 lines. CSS only: typing steps the width of mono text, the counts are integer @property values.
   Without .is-on the card shows its end state. Every id, number and line is copied from axil_ram run
   20261025-012315 (plan.json, tb_v0.sv; the code's base indent of 4 spaces removed). */

@property --sc-testing-nr { syntax: "<integer>"; inherits: false; initial-value: 19; }
@property --sc-testing-nc { syntax: "<integer>"; inherits: false; initial-value: 54; }
@property --sc-testing-ln { syntax: "<integer>"; inherits: false; initial-value: 931; }

/* ---------- layout and the finished picture ---------- */
.sc--testing {
  --sc-testing-left: 212px;  /* the plan's column */
  --sc-testing-row: 28px;    /* a requirement row */
  --sc-testing-cp: 22px;     /* a coverage point under REQ-MEM-2 */
  --sc-testing-cph: 76px;    /* the open panel of coverage points */
  --sc-testing-gut: 36px;    /* the code's line-number gutter */
  --sc-testing-lh: 24px;     /* a code line */
  --sc-testing-caret: 15px;
  --sc-testing-ease: cubic-bezier(.2, .7, .2, 1);
  width: 600px;
  height: 306px;
  display: grid;
  grid-template-columns: var(--sc-testing-left) minmax(0, 1fr);
  grid-template-rows: 38px minmax(0, 1fr) 40px;
}

/* top bar: the plan's title | the file's tab */
.sc--testing .sc-testing__top {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--sc-testing-left) minmax(0, 1fr);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.sc--testing .sc-testing__title {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-right: 1px solid var(--line);
  font: 600 13px/1 var(--sans);
  color: var(--ink);
}
.sc--testing .sc-testing__file {
  position: relative;
  top: 1px;
  align-self: end;
  justify-self: start;
  display: flex;
  align-items: center;
  height: 30px;
  margin-left: 10px;
  padding: 0 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 2px 0 var(--gold);
  font: 500 12px/1 var(--mono);
  color: var(--ink);
}

/* the plan: a row per requirement, a ring per coverage point; the last row fades as the list goes on */
.sc--testing .sc-testing__plan { position: relative; min-height: 0; overflow: hidden; border-right: 1px solid var(--line); }
.sc--testing .sc-testing__list {
  height: 100%;
  padding-top: 8px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 32px), rgba(0, 0, 0, .12));
  mask-image: linear-gradient(#000 calc(100% - 32px), rgba(0, 0, 0, .12));
}
.sc--testing .sc-testing__rest { position: relative; }
.sc--testing .sc-testing__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--sc-testing-row);
  padding: 0 16px;
}
.sc--testing .sc-testing__id { font: 400 12px/1 var(--mono); color: var(--ink); }
.sc--testing .sc-testing__rings { display: flex; gap: 5px; }
.sc--testing .sc-testing__rings i,
.sc--testing .sc-testing__cp i { display: block; flex: none; width: 9px; height: 9px; border: 1.5px solid var(--gold); border-radius: 50%; }

/* REQ-MEM-2: highlighted and open, its three coverage points named, CP-MEM-2-CROSS picked out */
.sc--testing .sc-testing__row--on { background: color-mix(in srgb, var(--gold-soft) 34%, var(--card)); box-shadow: inset 2px 0 0 var(--gold); }
.sc--testing .sc-testing__row--on .sc-testing__id { color: var(--walnut); font-weight: 500; }
.sc--testing .sc-testing__cps {
  position: relative;
  height: var(--sc-testing-cph);
  padding: 4px 12px 0 20px;
  background: color-mix(in srgb, var(--gold-soft) 13%, var(--card));
  box-shadow: inset 2px 0 0 var(--gold);
}
.sc--testing .sc-testing__cp { display: flex; align-items: center; gap: 4px; height: var(--sc-testing-cp); }
.sc--testing .sc-testing__cp i { width: 8px; height: 8px; }
.sc--testing .sc-testing__cp span,
.sc--testing .sc-testing__tag {
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  font: 400 11.5px/1 var(--mono);
  color: var(--ink-2);
  white-space: nowrap;
}
.sc--testing .sc-testing__cp--x span,
.sc--testing .sc-testing__tag {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold-soft) 40%, var(--card));
  color: var(--walnut);
  font-weight: 500;
}

/* the test: its tag, then the code, a gold rule down its gutter */
.sc--testing .sc-testing__code {
  position: relative;
  min-height: 0;
  padding-top: 8px;
  overflow: hidden;
  font: 400 13px/var(--sc-testing-lh) var(--mono);
  font-variant-ligatures: none;
  color: var(--ink);
}
.sc--testing .sc-testing__lens { position: relative; display: flex; align-items: center; height: 36px; padding-left: calc(var(--sc-testing-gut) + 10px); }
.sc--testing .sc-testing__ln { position: relative; display: flex; align-items: baseline; height: var(--sc-testing-lh); white-space: pre; }
.sc--testing .sc-testing__lens::before,
.sc--testing .sc-testing__ln::before {
  content: "";
  position: absolute;
  left: calc(var(--sc-testing-gut) - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold);
}
.sc--testing .sc-testing__lens::before { top: 8px; }
.sc--testing .sc-testing__no {
  flex: 0 0 var(--sc-testing-gut);
  padding-right: 9px;
  text-align: right;
  font-size: 11px;
  color: var(--walnut);
  font-variant-numeric: tabular-nums;
}
.sc--testing .sc-testing__src { padding-left: 10px; }
.sc--testing .sc-testing__tx { display: inline-block; vertical-align: top; overflow: hidden; }
.sc--testing .sc-testing__k { color: var(--walnut); font-weight: 500; }
.sc--testing .sc-testing__l { color: var(--lapis); }
.sc--testing .sc-testing__c,
.sc--testing .sc-testing__cut { color: var(--ink-3); }
/* the caret, right after the typed text (so it can never run ahead of it); shown only while a line types */
.sc--testing .sc-testing__src::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 1.5px;
  height: var(--sc-testing-caret);
  margin: calc((var(--sc-testing-lh) - var(--sc-testing-caret)) / 2) -1.5px 0 0;
  background: var(--ink);
  opacity: 0;
}

/* foot: the plan's totals | the file's length */
.sc--testing .sc-testing__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  font: 400 12.5px/1 var(--sans);
  color: var(--ink-3);
  white-space: nowrap;
}
.sc--testing .sc-testing__tot,
.sc--testing .sc-testing__count { display: flex; align-items: center; }
.sc--testing .sc-testing__n {
  display: inline-block;
  margin-right: 5px;
  font: 500 21px/1 var(--serif);
  letter-spacing: -.01em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  text-align: right;
}
.sc--testing .sc-testing__n--r { min-width: 2ch; --sc-testing-nr: 19; counter-reset: sc-testing-nr var(--sc-testing-nr); }
.sc--testing .sc-testing__n--r::before { content: counter(sc-testing-nr); }
.sc--testing .sc-testing__n--c { min-width: 2ch; --sc-testing-nc: 54; counter-reset: sc-testing-nc var(--sc-testing-nc); }
.sc--testing .sc-testing__n--c::before { content: counter(sc-testing-nc); }
.sc--testing .sc-testing__n--l { min-width: 3ch; --sc-testing-ln: 931; counter-reset: sc-testing-ln var(--sc-testing-ln); }
.sc--testing .sc-testing__n--l::before { content: counter(sc-testing-ln); }
.sc--testing .sc-testing__sep { width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: var(--line-strong); }

/* ---------- narrow (phones): the plan above the code; REQ-MEM-1 to 3 and lines 752-756; the totals go up to the
   plan's bar, the line count into the file's bar, and the tag to the end of line 752 ---------- */
.sc--testing.sc--narrow {
  --sc-testing-row: 24px;
  --sc-testing-cp: 18px;
  --sc-testing-cph: 60px;
  --sc-testing-gut: 34px;
  --sc-testing-lh: 18px;
  --sc-testing-caret: 13px;
  width: 400px;
  height: 300px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 30px auto minmax(0, 1fr);
}
.sc--testing.sc--narrow .sc-testing__top,
.sc--testing.sc--narrow .sc-testing__foot { display: contents; }
.sc--testing.sc--narrow .sc-testing__title { grid-area: 1 / 1; padding: 0 14px; border-right: 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.sc--testing.sc--narrow .sc-testing__tot { grid-area: 1 / 1; z-index: 1; justify-self: end; padding-right: 14px; font-size: 12px; }
.sc--testing.sc--narrow .sc-testing__n { margin-right: 4px; font-size: 18px; }
.sc--testing.sc--narrow .sc-testing__plan { grid-area: 2 / 1; border-right: 0; }
.sc--testing.sc--narrow .sc-testing__list { height: auto; padding: 5px 0 1px; -webkit-mask-image: none; mask-image: none; }
.sc--testing.sc--narrow .sc-testing__row { padding: 0 14px; }
.sc--testing.sc--narrow .sc-testing__row--w { display: none; }
.sc--testing.sc--narrow .sc-testing__cps { padding: 3px 12px 0 18px; }
.sc--testing.sc--narrow .sc-testing__cp span { padding: 2px 6px; font-size: 12px; }
.sc--testing.sc--narrow .sc-testing__tag { padding: 2px 6px 1px; font-size: 12px; }
.sc--testing.sc--narrow .sc-testing__code {
  grid-area: 3 / 1;
  padding-top: 33px;
  border-top: 1px solid var(--line);
  background: linear-gradient(var(--paper) 0 28px, var(--line) 28px 29px, var(--card) 29px);
  font-size: 12px;
}
.sc--testing.sc--narrow .sc-testing__file { grid-area: 3 / 1; z-index: 2; align-self: start; height: 24px; margin: 5px 0 0 10px; padding: 0 14px; }
.sc--testing.sc--narrow .sc-testing__count { grid-area: 3 / 1; z-index: 2; align-self: start; justify-self: end; height: 30px; padding-right: 14px; font-size: 12px; }
/* the tag goes to the end of line 752 */
.sc--testing.sc--narrow .sc-testing__lens { position: absolute; z-index: 2; top: 33px; right: 14px; height: var(--sc-testing-lh); padding: 0; }
.sc--testing.sc--narrow .sc-testing__lens::before,
.sc--testing.sc--narrow .sc-testing__ln--last { display: none; }
.sc--testing.sc--narrow .sc-testing__no { padding-right: 8px; font-size: 12px; }
.sc--testing.sc--narrow .sc-testing__src { padding-left: 8px; }

/* ---------- motion (only while the step plays) ----------
   0.15-1.2 s the plan's rows fill in and the totals count; 1.4-2.6 s REQ-MEM-2 opens and CP-MEM-2-CROSS is picked
   out; from 2.6 s the file's tab wakes and the tag arrives, 3.1-5.4 s the test types in with the line count running
   alongside, and the count ends on 931 at 5.9 s. */
.sc--testing.is-on .sc-testing__row { animation: sc-testing-row 420ms var(--sc-testing-ease) calc(150ms + var(--r) * 100ms) both; }
.sc--testing.is-on .sc-testing__rings i { animation: sc-testing-ring 340ms var(--sc-testing-ease) calc(250ms + var(--r) * 100ms + var(--j) * 60ms) both; }
.sc--testing.is-on .sc-testing__n--r { animation: sc-testing-nr 1050ms cubic-bezier(.3, .6, .4, 1) 150ms both; }
.sc--testing.is-on .sc-testing__n--c { animation: sc-testing-nc 1050ms cubic-bezier(.3, .6, .4, 1) 150ms both; }

.sc--testing.is-on .sc-testing__row--on {
  animation: sc-testing-row 420ms var(--sc-testing-ease) calc(150ms + var(--r) * 100ms) both, sc-testing-hl 500ms ease 1400ms both;
}
.sc--testing.is-on .sc-testing__row--on .sc-testing__id { animation: sc-testing-ink 500ms ease 1400ms both; }
.sc--testing.is-on .sc-testing__cps { animation: sc-testing-open 540ms cubic-bezier(.45, 0, .2, 1) 1550ms both; }
.sc--testing.is-on .sc-testing__rest { animation: sc-testing-push 540ms cubic-bezier(.45, 0, .2, 1) 1550ms both; }
.sc--testing.is-on .sc-testing__cp { animation: sc-testing-cp 380ms var(--sc-testing-ease) calc(1690ms + var(--j) * 110ms) both; }
.sc--testing.is-on .sc-testing__cp--x span { animation: sc-testing-pick 500ms ease 2100ms both; }

.sc--testing.is-on .sc-testing__file { animation: sc-testing-tab 400ms ease 2600ms both; }
.sc--testing.is-on .sc-testing__tag { animation: sc-testing-tag 460ms var(--sc-testing-ease) 2650ms both; }
.sc--testing.is-on .sc-testing__lens::before { animation: sc-testing-fade 300ms ease 2650ms both; }
.sc--testing.is-on .sc-testing__tx { animation: sc-testing-type var(--t) steps(var(--n), end) var(--d) both; }
.sc--testing.is-on .sc-testing__no,
.sc--testing.is-on .sc-testing__ln::before { animation: sc-testing-fade 160ms ease var(--d) both; }
.sc--testing.is-on .sc-testing__src::after { animation: sc-testing-show calc(var(--t) + 80ms) linear var(--d) none; }
.sc--testing.is-on .sc-testing__ln--last .sc-testing__src::after,
.sc--testing.sc--narrow.is-on .sc-testing__ln--nlast .sc-testing__src::after { animation: sc-testing-show calc(var(--t) + 420ms) linear var(--d) none; }
.sc--testing.is-on .sc-testing__n--l { animation: sc-testing-ln var(--sc-testing-dur) linear both; }

@keyframes sc-testing-row { from { opacity: 0; transform: translateY(6px); } }
@keyframes sc-testing-ring { from { opacity: 0; transform: scale(.4); } }
@keyframes sc-testing-nr { from { --sc-testing-nr: 0; } to { --sc-testing-nr: 19; } }
@keyframes sc-testing-nc { from { --sc-testing-nc: 0; } to { --sc-testing-nc: 54; } }
@keyframes sc-testing-hl { from { background-color: var(--card); box-shadow: inset 0 0 0 var(--gold); } }
@keyframes sc-testing-ink { from { color: var(--ink); font-weight: 400; } }
@keyframes sc-testing-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sc-testing-push { from { transform: translateY(calc(-1 * var(--sc-testing-cph))); } }
@keyframes sc-testing-cp { from { opacity: 0; transform: translateY(-4px); } }
@keyframes sc-testing-pick { from { background-color: transparent; border-color: transparent; color: var(--ink-2); font-weight: 400; } }
@keyframes sc-testing-tab { from { color: var(--ink-3); box-shadow: inset 0 2px 0 transparent; } }
@keyframes sc-testing-tag { from { opacity: 0; transform: translateX(-12px); } }
@keyframes sc-testing-fade { from { opacity: 0; } }
/* the end value is reached at 98% and held: a stepped animation can stop one step short at its very end */
@keyframes sc-testing-type { 0% { width: 0; } 98%, 100% { width: calc(var(--n) * 1ch); } }
@keyframes sc-testing-show { from, to { opacity: 1; } }

/* the line count over the story: 0 until the test starts, up to 751 as the file is written that far, then each line
   as it types (752-757), then on to the file's last line, 931 (from the code lines' --d and --t) */
.sc--testing { --sc-testing-dur: 5916ms; }
@keyframes sc-testing-ln {
  0%, 44.794% { --sc-testing-ln: 0; }
  50.71% { --sc-testing-ln: 751; }
  52.4%, 58.215% { --sc-testing-ln: 752; }
  58.232%, 64.233% { --sc-testing-ln: 753; }
  64.249%, 71.366% { --sc-testing-ln: 754; }
  71.383%, 79.615% { --sc-testing-ln: 755; }
  79.632%, 86.562% { --sc-testing-ln: 756; }
  86.579%, 92.224% { --sc-testing-ln: 757; }
  99.324%, 100% { --sc-testing-ln: 931; }
}

/* ---------- III. simulation (steps/simulation.css) ---------- */
/* Step III, Simulation (.sc--simulation). Round 1 of the real run (seed/runs/axil_ram/20261025-012315) on Verilator
   5.048, and its first failure as evidence. Three beats:
   1. the run: the progress line fills to 138.8 s (iterations.json sim_seconds), the 13 requirement checks tb_v0.sv
      reports under their own ids light up, 7 of them vermilion in the order the run first failed them (sim/v0/run.log),
      and the errors count to 16,961 (run.log "UVM_ERROR :16961");
   2. the first failure opens as a waveform: the read of 0x0000 at 9815000 ps, the signals and values from the
      "Waveform around the first failure" table in the issue Akrida filed from this run; expected 0x0badf00d,
      observed 0x00000000 (run.log, the first UVM_ERROR);
   3. the verdict: a design bug, filed against REQ-MEM-2 (llm/02_triage.json, bugs.json).
   simulation.js ticks the two numbers; CSS does the rest. Without .is-on the card is its finished picture. */

.sc--simulation {
  --sm-ease: cubic-bezier(.2, .7, .2, 1);
  --sm-w: 474px;   /* the waveform's width, and where its failure marker sits */
  --sm-mx: 395px;
  --sm-ol: 324px;  /* the waveform opens from under the first failing check */
  --sm-or: 216px;
  --sm-lift: 92px; /* while the run plays, its result sits in the middle of the card */
  width: 600px;
  height: 322px;
  display: flex;
  flex-direction: column;
}
.sc--simulation p { margin: 0; }
.sc--simulation b { font-weight: inherit; }

/* ---------- head: the simulator and the wall clock; its hairline is the progress line ---------- */
.sc--simulation .sc-simulation__head {
  position: relative;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: inset 0 -1px 0 var(--line);
}
.sc--simulation .sc-simulation__on { font: 500 13px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.sc--simulation .sc-simulation__clock { font: 400 13px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.sc--simulation .sc-simulation__secs { display: inline-block; min-width: 5ch; text-align: right; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.sc--simulation .sc-simulation__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.5px;
  height: 2px;
  background: var(--gold);
  transform-origin: 0 50%;
}

/* ---------- the run's result: errors, and the 13 checks ---------- */
.sc--simulation .sc-simulation__sum {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 20px 20px 0;
}
.sc--simulation .sc-simulation__errs { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.sc--simulation .sc-simulation__n { font: 500 34px/.8 var(--sans); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sc--simulation .sc-simulation__nl { font: 400 13px/1 var(--sans); color: var(--ink-3); }
.sc--simulation .sc-simulation__checks { display: grid; justify-items: end; gap: 8px; }
.sc--simulation .sc-simulation__cells { display: flex; gap: 4px; }
.sc--simulation .sc-simulation__cells > span { position: relative; width: 14px; height: 14px; border-radius: 3px; }
.sc--simulation .sc-simulation__cells .is-fail { background: var(--vermilion); }
.sc--simulation .sc-simulation__cells .is-pass { background: var(--gold-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }
/* the first failure, the one the waveform shows: set a little apart, and ringed */
.sc--simulation .sc-simulation__cells > span:first-child { margin-right: 3px; }
.sc--simulation .sc-simulation__cells > span:first-child::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 5px;
  box-shadow: 0 0 0 1.5px var(--vermilion);
}
.sc--simulation .sc-simulation__ck { font: 400 12px/1 var(--sans); color: var(--ink-2); white-space: nowrap; }
.sc--simulation .sc-simulation__ck b { font-weight: 600; color: var(--ink); }

/* ---------- the waveform at the first failure ---------- */
.sc--simulation .sc-simulation__wave {
  position: relative;
  margin: 18px 20px 0;
  padding: 28px 10px 10px 14px;
  display: grid;
  grid-template-columns: 62px var(--sm-w);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.sc--simulation .sc-simulation__names {
  display: grid;
  grid-template-rows: 22px 22px 18px 18px 22px;
  align-items: center;
  font: 400 11px/1 var(--mono);
  color: var(--ink-3);
}
.sc--simulation .sc-simulation__view { position: relative; }
.sc--simulation .sc-simulation__svg { display: block; overflow: hidden; }
.sc--simulation .sc-simulation__svg--n { display: none; }
.sc--simulation .sc-simulation__bus { fill: var(--card); stroke: var(--ink-3); stroke-width: 1; stroke-linejoin: round; }
.sc--simulation .sc-simulation__bus.is-exp { fill: color-mix(in srgb, var(--gold-soft) 42%, var(--card)); stroke: var(--gold); }
.sc--simulation .sc-simulation__v { fill: var(--ink-2); font: 400 11px var(--mono); }
.sc--simulation .sc-simulation__v.is-exp { fill: var(--walnut); font-weight: 500; }
.sc--simulation .sc-simulation__bit { fill: none; stroke: var(--ink-2); stroke-width: 1.25; }
.sc--simulation .sc-simulation__bad rect { fill: var(--vermilion-soft); stroke: var(--vermilion); stroke-width: 1.25; }
.sc--simulation .sc-simulation__bad text { fill: var(--vermilion); font: 500 11px var(--mono); text-anchor: middle; }
/* the failure marker, and the playhead that finds it (only while playing) */
.sc--simulation .sc-simulation__mark, .sc--simulation .sc-simulation__play { position: absolute; top: -22px; bottom: -4px; left: var(--sm-mx); width: 0; }
.sc--simulation .sc-simulation__mark::before, .sc--simulation .sc-simulation__play::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 0;
  left: -.75px;
  width: 1.5px;
  background: var(--vermilion);
}
.sc--simulation .sc-simulation__play { left: 0; opacity: 0; }
.sc--simulation .sc-simulation__play::before { background: var(--gold); }
.sc--simulation .sc-simulation__tag {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  padding: 0 6px;
  border-radius: 4px;
  background: var(--vermilion);
  color: var(--card);
  font: 500 11px/16px var(--mono);
  white-space: nowrap;
}

/* ---------- foot: what the check expected and saw, and the verdict ---------- */
.sc--simulation .sc-simulation__foot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.sc--simulation .sc-simulation__eo { display: flex; gap: 18px; font: 400 12px/1 var(--sans); color: var(--ink-3); white-space: nowrap; }
.sc--simulation .sc-simulation__eo b { margin-left: 5px; font: 500 12px/1 var(--mono); color: var(--walnut); }
.sc--simulation .sc-simulation__eo .is-bad { color: var(--vermilion); }
.sc--simulation .sc-simulation__verdict { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.sc--simulation .sc-simulation__req { font: 400 12px/1 var(--mono); color: var(--ink-2); }
.sc--simulation .sc-simulation__chip {
  padding: 0 12px;
  border-radius: 999px;
  background: var(--vermilion-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vermilion) 35%, transparent);
  color: var(--vermilion);
  font: 600 13px/26px var(--sans);
}

/* ---------- narrow (phones): the same picture, smaller; 12 px text at least ---------- */
.sc--simulation.sc--narrow {
  --sm-w: 296px;
  --sm-mx: 222px;
  --sm-ol: 173px;
  --sm-or: 179px;
  --sm-lift: 86px;
  width: 400px;
  height: 298px;
}
.sc--simulation.sc--narrow .sc-simulation__head { flex-basis: 40px; padding: 0 14px; }
.sc--simulation.sc--narrow .sc-simulation__sum { padding: 16px 14px 0; }
.sc--simulation.sc--narrow .sc-simulation__n { font-size: 28px; }
.sc--simulation.sc--narrow .sc-simulation__checks { gap: 7px; }
.sc--simulation.sc--narrow .sc-simulation__cells { gap: 3px; }
.sc--simulation.sc--narrow .sc-simulation__cells > span { width: 12px; height: 12px; border-radius: 2.5px; }
.sc--simulation.sc--narrow .sc-simulation__wave { margin: 14px 14px 0; padding: 26px 9px 8px 12px; grid-template-columns: 55px var(--sm-w); }
.sc--simulation.sc--narrow .sc-simulation__names { grid-template-rows: 23px 23px 19px 19px 23px; font-size: 12px; }
.sc--simulation.sc--narrow .sc-simulation__svg--w { display: none; }
.sc--simulation.sc--narrow .sc-simulation__svg--n { display: block; }
.sc--simulation.sc--narrow .sc-simulation__v, .sc--simulation.sc--narrow .sc-simulation__bad text { font-size: 12px; }
.sc--simulation.sc--narrow .sc-simulation__tag { font-size: 12px; line-height: 17px; }
.sc--simulation.sc--narrow .sc-simulation__foot { padding: 0 14px; }
.sc--simulation.sc--narrow .sc-simulation__eo { flex-direction: column; gap: 5px; }
.sc--simulation.sc--narrow .sc-simulation__eo span { display: flex; justify-content: space-between; gap: 8px; }

/* ---------- the story (only while .is-on) ----------
   0.15-1.95 s  the run: the progress line, the checks (7 fail, then 6 pass), the error count (simulation.js)
   2.25-4.5 s   the first failure: its check is ringed, the result moves up and the waveform opens under it, drawing
                to 9815000 ps
   4.95-5.5 s   the verdict */
@keyframes sc-simulation-grow { from { transform: scaleX(0); } }
@keyframes sc-simulation-cell { from { background-color: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); } }
@keyframes sc-simulation-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes sc-simulation-fade { from { opacity: 0; } }
@keyframes sc-simulation-lift { from { transform: translateY(var(--sm-lift)); } }
@keyframes sc-simulation-stamp { from { opacity: 0; transform: scale(.9); } }
@keyframes sc-simulation-open {
  from { clip-path: inset(0 var(--sm-or) 100% var(--sm-ol) round 8px); }
  to { clip-path: inset(0 0 0 0 round 8px); }
}
@keyframes sc-simulation-draw {
  0% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(.45, .05, .3, 1); }
  80% { clip-path: inset(0 calc(var(--sm-w) - var(--sm-mx)) 0 0); animation-timing-function: ease-out; }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes sc-simulation-play {
  0% { opacity: 0; transform: translateX(0); animation-timing-function: cubic-bezier(.45, .05, .3, 1); }
  6% { opacity: 1; }
  80% { opacity: 1; transform: translateX(var(--sm-mx)); }
  100% { opacity: 0; transform: translateX(var(--sm-mx)); }
}

/* Held on its first frame (steps.js, before on() runs), the two numbers simulation.js drives show their start values. */
.sc--simulation:not(.sc--hold) .sc-simulation__z,
.sc--simulation.sc--hold .sc-simulation__secs:not(.sc-simulation__z),
.sc--simulation.sc--hold .sc-simulation__n:not(.sc-simulation__z) { display: none; }

/* 1. the run */
.sc--simulation.is-on .sc-simulation__bar { animation: sc-simulation-grow 1800ms cubic-bezier(.4, .1, .3, 1) 150ms both; }
.sc--simulation.is-on .sc-simulation__cells .is-fail { animation: sc-simulation-cell 240ms ease-out calc(600ms + var(--c) * 140ms) both; }
.sc--simulation.is-on .sc-simulation__cells .is-pass { animation: sc-simulation-cell 260ms ease-out calc(1950ms + var(--c) * 35ms) both; }
.sc--simulation.is-on .sc-simulation__ck { animation: sc-simulation-in 380ms var(--sm-ease) 2050ms both; }

/* 2. the first failure */
.sc--simulation.is-on .sc-simulation__cells > span:first-child::after { animation: sc-simulation-fade 300ms ease 2250ms both; }
.sc--simulation.is-on .sc-simulation__sum { animation: sc-simulation-lift 650ms cubic-bezier(.45, 0, .2, 1) 2350ms both; }
.sc--simulation.is-on .sc-simulation__wave { animation: sc-simulation-open 600ms cubic-bezier(.3, .7, .2, 1) 2800ms both; }
.sc--simulation.is-on .sc-simulation__names span { animation: sc-simulation-fade 320ms ease 3150ms both; }
.sc--simulation.is-on .sc-simulation__draw { animation: sc-simulation-draw 1200ms linear 3250ms both; }
.sc--simulation.is-on .sc-simulation__play { animation: sc-simulation-play 1200ms linear 3250ms both; }
.sc--simulation.is-on .sc-simulation__mark::before { animation: sc-simulation-fade 260ms ease 4190ms both; }
.sc--simulation.is-on .sc-simulation__tag { animation: sc-simulation-fade 300ms ease 4250ms both; }
.sc--simulation.is-on .sc-simulation__bad { animation: sc-simulation-fade 360ms ease 4250ms both; }
.sc--simulation.is-on .sc-simulation__eo { animation: sc-simulation-in 420ms var(--sm-ease) 4550ms both; }

/* 3. the verdict */
.sc--simulation.is-on .sc-simulation__req { animation: sc-simulation-in 420ms var(--sm-ease) 4950ms both; }
.sc--simulation.is-on .sc-simulation__chip { animation: sc-simulation-stamp 460ms var(--sm-ease) 5020ms both; }

/* ---------- IV. iteration (steps/iteration.css) ---------- */
/* Step IV, Iteration (.sc--iteration): the loop. The coverage map of the plan's 54 points (one cell per point, one
   group per requirement, in plan order). Round 1 (tb_v0.sv) fills 35 and leaves 19 open; the loop turns and rounds 2
   (tb_v1.sv) and 3 (tb_v2.sv) are aimed at the open cells; round 3 hits one more, CP-MEM-5-NEIGHBOR: 36 of 54, 18
   open, where the run stopped (its round budget was spent). Data: plan.json (the points and their requirements), the
   [AKRIDA_COV] counts in sim/v0, v1 and v2/run.log, iterations.json (testbench, coverage_points_hit).
   Without .is-on: the finished picture. */

/* the score and the open count tick while the card plays (their final values are also plain text in the card) */
@property --sc-it-n { syntax: "<integer>"; inherits: false; initial-value: 36; }
@property --sc-it-o { syntax: "<integer>"; inherits: false; initial-value: 18; }

.sc--iteration {
  --it-ease: cubic-bezier(.2, .7, .2, 1);
  --it-turn: cubic-bezier(.55, 0, .3, 1);
  --it-cell: 28px;
  --it-open: color-mix(in srgb, var(--vermilion) 70%, var(--card));
  width: 600px;
  padding: 24px 30px 22px;
  display: grid;
  gap: 20px;
}
.sc--iteration p { margin: 0; }
.sc--iteration i, .sc--iteration b { font-style: normal; }

/* ---------- head: the round (loop symbol, round, testbench) and the score ---------- */
.sc--iteration .sc-it__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sc--iteration .sc-it__round { display: flex; align-items: center; gap: 13px; padding-bottom: 2px; }
.sc--iteration .sc-it__loop { flex: none; width: 48px; height: 48px; overflow: visible; }
.sc--iteration .sc-it__loop path { fill: none; stroke: var(--walnut); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sc--iteration .sc-it__loop .sc-it__tip { fill: var(--walnut); stroke-width: 1.6; }
.sc--iteration .sc-it__turn { transform-origin: 20px 20px; transform-box: view-box; }
.sc--iteration .sc-it__rt { display: grid; gap: 3px; }
.sc--iteration .sc-it__rn { display: flex; gap: .3em; color: var(--ink); font: 600 18px/22px var(--sans); }
.sc--iteration .sc-it__tb { color: var(--ink-3); font: 400 13px/18px var(--mono); }
/* a stack: three values in one window; the last one shows */
.sc--iteration .sc-it__st { display: inline-grid; overflow: hidden; }
.sc--iteration .sc-it__st > span { grid-area: 1 / 1; }
.sc--iteration .sc-it__x1, .sc--iteration .sc-it__x2 { opacity: 0; }

.sc--iteration .sc-it__score { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 8px; text-align: right; }
.sc--iteration .sc-it__num {
  counter-reset: sc-it-n var(--sc-it-n);
  color: var(--ink);
  font: 500 60px/50px var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.01em;
}
.sc--iteration .sc-it__den { color: var(--ink-3); font: 400 27px/1 var(--serif); font-variant-numeric: lining-nums; }
.sc--iteration .sc-it__lbl { grid-column: 1 / -1; margin-top: 6px; color: var(--ink-2); font: 500 13px/16px var(--sans); }

/* ---------- the map: one cell per coverage point, one group per requirement ---------- */
.sc--iteration .sc-it__map { display: grid; grid-template-columns: repeat(5, max-content); justify-content: space-between; row-gap: 12px; }
.sc--iteration .sc-it__g { display: flex; gap: 4px; }
.sc--iteration .sc-it__c {
  position: relative;
  width: var(--it-cell);
  height: var(--it-cell);
  border-radius: 50%;  /* round, like the plan's rings in II: the same 54 points, now run */
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.sc--iteration .sc-it__c::before, .sc--iteration .sc-it__c::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; }
/* hit: gold */
.sc--iteration .sc-it__c::before { background: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--walnut) 22%, transparent); }
/* open: a quiet vermilion edge */
.sc--iteration .sc-it__c::after { background: var(--card); box-shadow: inset 0 0 0 1.25px var(--it-open); }
.sc--iteration .sc-it__c.is-hit::before, .sc--iteration .sc-it__c.is-new::before, .sc--iteration .sc-it__c.is-open::after { opacity: 1; }
/* the point round 3 reached */
.sc--iteration .sc-it__c.is-new { outline: 1.5px solid var(--ink); outline-offset: 2px; }
/* aimed at: a walnut ring (the loop's colour) on each open cell while rounds 2 and 3 run */
.sc--iteration .sc-it__c b { position: absolute; z-index: 1; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.75px var(--walnut); opacity: 0; }

/* ---------- foot: the new point, and what is still open ---------- */
.sc--iteration .sc-it__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 18px; }
.sc--iteration .sc-it__new { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font: 400 12.5px/16px var(--mono); }
.sc--iteration .sc-it__open { display: inline-flex; align-items: center; color: var(--ink-2); font: 500 13.5px/16px var(--sans); font-variant-numeric: tabular-nums; }
.sc--iteration .sc-it__open .sc-it__sw { margin-right: 9px; }
.sc--iteration .sc-it__on { counter-reset: sc-it-o var(--sc-it-o); }
.sc--iteration .sc-it__sw { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.sc--iteration .sc-it__sw--new { background: var(--gold); outline: 1.5px solid var(--ink); outline-offset: 1.5px; }
.sc--iteration .sc-it__sw--open { background: var(--card); box-shadow: inset 0 0 0 1.25px var(--it-open); }

/* ---------- narrow (phones): the same card, smaller ---------- */
.sc--iteration.sc--narrow { --it-cell: 20px; width: 400px; padding: 18px 18px 16px; gap: 16px; }
.sc--iteration.sc--narrow .sc-it__g { gap: 3px; }
.sc--iteration.sc--narrow .sc-it__map { row-gap: 10px; }
.sc--iteration.sc--narrow .sc-it__c.is-new { outline-offset: 1.5px; }
.sc--iteration.sc--narrow .sc-it__round { gap: 10px; }
.sc--iteration.sc--narrow .sc-it__loop { width: 38px; height: 38px; }
.sc--iteration.sc--narrow .sc-it__rn { font-size: 16px; line-height: 20px; }
.sc--iteration.sc--narrow .sc-it__tb { font-size: 12px; line-height: 16px; }
.sc--iteration.sc--narrow .sc-it__num { font-size: 48px; line-height: 40px; }
.sc--iteration.sc--narrow .sc-it__den { font-size: 22px; }
.sc--iteration.sc--narrow .sc-it__lbl { font-size: 12px; margin-top: 4px; }
.sc--iteration.sc--narrow .sc-it__new { font-size: 12px; gap: 8px; }
.sc--iteration.sc--narrow .sc-it__open { font-size: 12.5px; }

/* ---------- the story (only while .is-on) ----------
   0.25-2.0 s   round 1, tb_v0.sv: the loop turns once; the map fills, 35 gold and 19 open; the score counts to 35
   2.25-4.1 s   round 2, tb_v1.sv: aimed at the 19 open cells (rings, the rest dims); the loop turns; nothing new
   4.1-5.8 s    round 3, tb_v2.sv: aimed again; the loop turns; CP-MEM-5-NEIGHBOR fills: 36 of 54, 18 open
   5.7-6.1 s    the new point is named */
@keyframes sc-it-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sc-it-fill { from { opacity: 0; transform: scale(.5); } }
@keyframes sc-it-mark { from { opacity: 0; } }
@keyframes sc-it-unmark { to { opacity: 0; } }
@keyframes sc-it-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes sc-it-out { to { opacity: 0; transform: translateY(-8px); } }
/* round 2's values: in at 2300 ms, out at 4050 ms */
@keyframes sc-it-mid { 0% { opacity: 0; transform: translateY(8px); } 19.5%, 85.4% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes sc-it-aim { 0% { opacity: 0; transform: scale(1.3); } 18% { opacity: 1; transform: none; } 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sc-it-dim { 0% { opacity: 1; } 16%, 86% { opacity: .55; } 100% { opacity: 1; } }
@keyframes sc-it-aim-sw { 18%, 86% { box-shadow: inset 0 0 0 1.75px var(--walnut); } }
@keyframes sc-it-aim-tb { 18%, 86% { color: var(--walnut); } }
@keyframes sc-it-ring { from { outline-color: transparent; outline-offset: 8px; } }
@keyframes sc-it-tick { from { opacity: .2; transform: translateY(6px); } }
/* 6300 ms: the score counts each gold cell as it fills (a cell at --d fills from 350 + d * 70 ms; counted 160 ms in),
   35 at 1770 ms; 36 when round 3 reaches CP-MEM-5-NEIGHBOR (5600 ms) */
@keyframes sc-it-count {
  0%, 9.21% { --sc-it-n: 0; }
  10.32% { --sc-it-n: 1; } 11.43% { --sc-it-n: 3; } 12.54% { --sc-it-n: 4; } 14.76% { --sc-it-n: 6; } 15.87% { --sc-it-n: 9; }
  16.98% { --sc-it-n: 12; } 18.1% { --sc-it-n: 15; } 19.21% { --sc-it-n: 18; } 20.32% { --sc-it-n: 21; } 21.43% { --sc-it-n: 23; }
  22.54% { --sc-it-n: 25; } 23.65% { --sc-it-n: 28; } 24.76% { --sc-it-n: 30; } 25.87% { --sc-it-n: 33; } 26.98% { --sc-it-n: 34; }
  28.1%, 88.7% { --sc-it-n: 35; }
  89%, 100% { --sc-it-n: 36; }
}
@keyframes sc-it-open { 0%, 88.8% { --sc-it-o: 19; } 89%, 100% { --sc-it-o: 18; } }

/* the loop: one turn per round */
.sc--iteration.is-on .sc-it__turn {
  animation: sc-it-turn 1600ms var(--it-turn) 250ms both, sc-it-turn 1300ms var(--it-turn) 2550ms, sc-it-turn 1300ms var(--it-turn) 4400ms;
}
/* round and testbench: 1, then 2, then 3 */
.sc--iteration.is-on .sc-it__x1 { opacity: 1; animation: sc-it-out 300ms var(--it-ease) 2250ms both; }
.sc--iteration.is-on .sc-it__x2 { animation: sc-it-mid 2050ms var(--it-ease) 2300ms both; }
.sc--iteration.is-on .sc-it__x3 { animation: sc-it-in 400ms var(--it-ease) 4100ms both; }

/* the score counts with the map */
.sc--iteration.is-on .sc-it__num > span, .sc--iteration.is-on .sc-it__on > span { display: none; }
.sc--iteration.is-on .sc-it__num::before { content: counter(sc-it-n); }
.sc--iteration.is-on .sc-it__num { animation: sc-it-count 6300ms linear both, sc-it-tick 450ms var(--it-ease) 5600ms; }

/* round 1: the map fills in one sweep, each cell gold or left open */
.sc--iteration.is-on .sc-it__c.is-hit::before { animation: sc-it-fill 380ms var(--it-ease) calc(350ms + var(--d) * 70ms) both; }
.sc--iteration.is-on .sc-it__c.is-open::after { animation: sc-it-mark 380ms ease calc(420ms + var(--d) * 70ms) both; }
.sc--iteration.is-on .sc-it__c.is-new::after { opacity: 1; animation: sc-it-mark 380ms ease calc(420ms + var(--d) * 70ms) both, sc-it-unmark 300ms ease 5600ms forwards; }
.sc--iteration.is-on .sc-it__open { animation: sc-it-in 400ms var(--it-ease) 1950ms both; }
.sc--iteration.is-on .sc-it__on::before { content: counter(sc-it-o); }
.sc--iteration.is-on .sc-it__on { display: inline-block; animation: sc-it-open 6300ms linear both, sc-it-tick 450ms var(--it-ease) 5600ms; }

/* rounds 2 and 3: aimed at the open cells */
.sc--iteration.is-on .sc-it__c b { animation: sc-it-aim 1550ms var(--it-ease) calc(2400ms + var(--d) * 10ms), sc-it-aim 1550ms var(--it-ease) calc(4250ms + var(--d) * 10ms); }
.sc--iteration.is-on .sc-it__c.is-new b { animation: sc-it-aim 1550ms var(--it-ease) calc(2400ms + var(--d) * 10ms), sc-it-aim 1350ms var(--it-ease) calc(4250ms + var(--d) * 10ms); }
.sc--iteration.is-on .sc-it__c.is-hit { animation: sc-it-dim 1550ms ease 2400ms, sc-it-dim 1550ms ease 4250ms; }
/* the legend's open swatch and the round's testbench take the rings' colour while they aim */
.sc--iteration.is-on .sc-it__sw--open { animation: sc-it-aim-sw 1550ms ease 2400ms, sc-it-aim-sw 1550ms ease 4250ms; }
.sc--iteration.is-on .sc-it__tb { animation: sc-it-aim-tb 1550ms ease 2400ms, sc-it-aim-tb 1550ms ease 4250ms; }

/* round 3 reaches CP-MEM-5-NEIGHBOR */
.sc--iteration.is-on .sc-it__c.is-new::before { animation: sc-it-fill 420ms var(--it-ease) 5550ms both; }
.sc--iteration.is-on .sc-it__c.is-new { animation: sc-it-ring 450ms var(--it-ease) 5600ms both; }
.sc--iteration.is-on .sc-it__new { animation: sc-it-in 400ms var(--it-ease) 5700ms both; }
/* cards:end */