/* ============================================================
   SkillWeaver — Autonomous Robot Data Generation through
   Search over Learned Interaction Skills.

   Concept: a search tree is pruned down to one verified branch,
   whose skills are then WOVEN into a demonstration — teal /
   indigo / amber strands braiding over and under each other.
   Dark "search space" hero, light "paper" body. Scripts are
   js/nav.js only (side-nav, trajectory tabs, copy-BibTeX).
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Dark hero — the search space */
  --space: #0A0D13;
  --on-space: #F3F6FA;
  --on-space-mute: #98A2B3;
  --hairline-dark: rgba(255, 255, 255, 0.12);

  /* Light body — the paper */
  --paper: #FFFFFF;
  --paper-2: #F5F6F8;
  --ink: #0D1119;
  --mute: #69707E;
  --line: #E5E8EC;
  --head: #333B4A;

  /* Skill spectrum — the three woven strands */
  --teal: #2DD4BF;
  --indigo: #7C83F7;
  --amber: #FFB020;
  --rose: #F4566E;
  --spectrum: linear-gradient(90deg, var(--teal), var(--indigo), var(--amber));

  --gain: #067647;
  --drop: #B42318;

  --radius: 14px;
  --container: 1200px;

  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "Space Mono", ui-monospace, monospace;
}

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

html {
  scroll-behavior: smooth;
  /* Dark behind the page so overscroll at the top never flashes white. */
  background: var(--space);
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: #5B62E8;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

::selection {
  background: rgba(124, 131, 247, 0.22);
}

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Spectrum hairline framing the very top of the page. */
body::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--spectrum);
}

/* ============================================================
   Title sequence — full-bleed video, then it gets out of the way
   ============================================================ */
.intro {
  display: none;
}

.has-intro .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--space);
  transition: opacity 0.9s ease;
}

.has-intro .intro.is-out {
  opacity: 0;
  pointer-events: none;
}

/* contain: the source is 16:9 now, so on the screens most people are on this
   fills edge to edge with nothing cropped and nothing bordered. Keeping contain
   rather than cover means the odd shapes — a 16:10 laptop, an ultrawide — lose
   a band of background instead of a band of the frame. The bars are the hero's
   own ground rather than black, so they read as deliberate. */
.intro__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--space);
  display: block;
}

/* 25 seconds is a long time to hold someone at the door. */
.intro__skip {
  position: absolute;
  right: 28px;
  bottom: 28px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-space);
  background: rgba(10, 13, 19, 0.55);
  border: 1px solid var(--hairline-dark);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.intro__skip:hover {
  background: rgba(10, 13, 19, 0.8);
  border-color: rgba(255, 255, 255, 0.32);
}

/* Nothing scrolls behind the overlay; dropping the flag gives it straight back. */
.has-intro {
  overflow: hidden;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 52px 0;
}

/* Alternating tint separates sections; no border needed between them. */
.section--alt {
  background: var(--paper-2);
}

/* Sections arrive with some weight: they rise the last stretch and settle,
   rather than being simply present the moment their top edge clears. The
   easing is heavily decelerating, which is what reads as viscosity — most of
   the distance is covered early, then it eases into place.

   Scoped to .has-reveal (set in <head> only when IntersectionObserver exists),
   so the starting opacity: 0 can never strand the content. */
.has-reveal .section > .container {
  opacity: 0;
  transform: translateY(64px) scale(0.965);
  /* Two different curves on purpose. Opacity resolves fast and on a plain ease,
     so the section is legible almost at once; the transform keeps running on an
     overshooting curve — past the resting position by a few pixels, then back —
     which is what reads as a pop rather than a slide. A single decelerating
     curve on both, which is what this was, just glides into place. */
  transition: opacity 0.4s cubic-bezier(0.22, 0.8, 0.36, 1),
    transform 0.82s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.has-reveal .section.is-in > .container {
  opacity: 1;
  transform: none;
}

.prose p {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.72;
  color: #2A3140;
  margin: 0;
  /* Full container width, so the intro lines up edge to edge with the table
     or figure it introduces. */
  text-wrap: pretty;
}

.prose p + p {
  margin-top: 18px;
}

.prose b,
.prose strong {
  color: var(--ink);
  font-weight: 600;
}


/* ---------- Section headings ---------- */
/* .kicker is currently UNUSED — sections open straight on their title.
   Kept so the eyebrow can come back without rebuilding it. */
.kicker {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--spectrum);
}

.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.15rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  /* Reads as grey rather than as black — at 9.8:1 the previous value was too
     close to --ink to tell apart. 5.9:1 on white, 5.5:1 on the tinted
     sections; AA large-text wants 3.0, so there is room to go lighter still. */
  color: #5C6474;
  margin: 0 0 24px;
}

/* A qualifier on its own line under a section title, a step smaller. */
.section-title__sub {
  display: block;
  margin-top: 10px;
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  /* The blue of the stat numbers' spectrum. */
  color: var(--indigo);
}

/* A heading for a block inside a section — one step below .section-title. */
.sub-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
}

/* ============================================================
   Hero — the search space
   ============================================================ */
.hero {
  background:
    radial-gradient(900px 520px at 76% 14%, rgba(124, 131, 247, 0.22), transparent 60%),
    radial-gradient(720px 480px at 96% 88%, rgba(255, 176, 32, 0.13), transparent 60%),
    radial-gradient(700px 520px at 3% 22%, rgba(45, 212, 191, 0.15), transparent 60%),
    var(--space);
  color: var(--on-space);
  overflow: hidden;
  /* Fill the first screen so the landing view is entirely dark. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.hero > .container {
  width: 100%;
}

.hero__inner {
  display: grid;
  /* The figure reads input -> search -> policy, so it needs a wider column. */
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  align-items: center;
  padding: 56px 0;
}

/* Scaled from its right edge, so the figure grows toward the title rather than
   out past the content edge — its right edge stays flush with every section
   below it. */
.hero__figure {
  transform: scale(1.14);
  transform-origin: right center;
}

.hero__eyebrow {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-space);
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--hairline-dark);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.hero__eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber);
}

.hero__eyebrow-hl {
  background: linear-gradient(90deg, var(--indigo), var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

.hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.1vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
}

/* Each authored line is its own row — at this size, letting the browser pick
   the break points leaves orphans and moves them around with the viewport.
   Phrases *within* a line stay inline. */
.hero__title .hero__name,
.hero__title .hero__plain,
.hero__title .hero__line {
  display: block;
}

/* The project name anchors the hero as a wordmark. */
.hero__title .hero__name {
  font-size: 1.5em;
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin-bottom: 0.18em;
}

/* The descriptive phrases read as a subordinate subtitle. Sized so the longest
   of them sets on one line at every width the two-column hero is used at. */
.hero__title .hero__plain,
.hero__title .hero__line {
  font-size: 0.7em;
  line-height: 1.12;
}

/* A background-clip:text box that breaks across lines restarts its gradient in
   every line box, so the highlighted phrase must not wrap. */
.hero__title .word {
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

/* Editorial deck. Currently UNUSED — the hero goes straight from the
   title to the author list. Kept for a tagline coming back. */
.hero__lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.42rem);
  line-height: 1.45;
  color: var(--on-space);
  max-width: 34rem;
  margin: 0 0 28px;
  text-wrap: pretty;
}

.hero__authors {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--on-space);
  margin: 0 0 8px;
}

/* Affiliation markers ride high and small without stretching the line box. */
.hero__authors sup,
.hero__affil sup {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
}

.hero__authors a {
  color: var(--on-space);
  border-bottom: 1px solid var(--hairline-dark);
  text-decoration: none;
  transition: border-color 0.18s ease;
}

.hero__authors a:hover {
  border-color: var(--amber);
}

.hero__affil {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--on-space-mute);
  line-height: 1.7;
  margin: 0 0 4px;
}

/* Each affiliation wraps as one unit rather than breaking mid-name. */
.hero__aff {
  display: inline-block;
  white-space: nowrap;
  margin-right: 22px;
}

/* Per-author footnote — a step quieter than the affiliations above it. */
.hero__note {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--on-space-mute);
  line-height: 1.6;
  opacity: 0.8;
  margin: 0 0 28px;
}

.nowrap {
  white-space: nowrap;
}

/* ============================================================
   Side navigation — the section rail
   ============================================================ */
.sidenav {
  position: fixed;
  top: 50%;
  /* Right edge sits this far to the left of the content column. */
  left: calc((100vw - var(--container)) / 2 - 88px);
  transform: translate(-100%, -50%);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.sidenav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.sidenav ul {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* The track linking the section nodes. */
.sidenav ul::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 17px;
  bottom: 17px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
}

/* Spectrum progress fill, grown to the section in view (height set in nav.js). */
.sidenav ul::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 17px;
  width: 2px;
  height: var(--nav-progress, 0px);
  background: linear-gradient(180deg, var(--teal), var(--indigo), var(--amber));
  border-radius: 2px;
  transition: height 0.3s ease;
}

.sidenav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 4px 0;
  text-decoration: none;
}

.sidenav a:hover {
  text-decoration: none;
}

.sidenav__mark {
  position: relative;
  z-index: 1;
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line);
  box-shadow: 0 0 0 5px var(--paper);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.sidenav__label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
  transition: color 0.22s ease;
}

.sidenav a:hover .sidenav__label,
.sidenav a:focus-visible .sidenav__label {
  color: var(--ink);
}

.sidenav a:hover .sidenav__mark,
.sidenav a:focus-visible .sidenav__mark {
  border-color: var(--indigo);
}

.sidenav a.is-active .sidenav__label {
  color: var(--ink);
}

.sidenav a.is-active .sidenav__mark {
  border-color: transparent;
  background: linear-gradient(135deg, var(--teal), var(--amber));
  box-shadow: 0 0 0 5px var(--paper), 0 0 12px rgba(124, 131, 247, 0.45);
  transform: scale(1.18);
}

/* Not enough gutter for the labelled rail. The threshold follows --container:
   the full rail needs (100vw - 1200)/2 to clear its 88px offset plus its own
   width, ~144px at the longest label ("COLLECTED DATA"). Below that, keep just
   the track and its nodes, tucked against the content column, and name a
   section only while its node is hovered or focused. */
@media (max-width: 1680px) {
  .sidenav {
    left: calc((100vw - var(--container)) / 2 - 4px);
  }

  .sidenav__label {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(13, 17, 25, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, color 0.22s ease;
  }

  .sidenav a:hover .sidenav__label,
  .sidenav a:focus-visible .sidenav__label {
    opacity: 1;
  }
}

/* Even the bare track needs ~40px of gutter. */
@media (max-width: 1279px) {
  .sidenav {
    display: none;
  }
}

/* ---------- Links / buttons ---------- */
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--hairline-dark);
  color: var(--on-space);
  background: rgba(255, 255, 255, 0.04);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
}

.btn--primary {
  border-color: rgba(124, 131, 247, 0.62);
  background: linear-gradient(105deg, rgba(45, 212, 191, 0.14), rgba(255, 176, 32, 0.14));
  box-shadow: 0 0 18px rgba(124, 131, 247, 0.16);
}

.btn--primary:hover {
  border-color: rgba(255, 176, 32, 0.72);
  background: linear-gradient(105deg, rgba(45, 212, 191, 0.22), rgba(255, 176, 32, 0.22));
}

.btn i {
  font-size: 1.05em;
}

/* >>> HERO FIGURE — generated by tools/make_hero.py, do not edit by hand >>> */
/* One MCTS iteration loop. Every animated element shares --sw-cycle and carries
   its own phase window in its keyframe percentages, so the whole figure stays in
   step without a scheduler. */
.field {
  width: 100%;
  height: auto;
  overflow: visible;
  --sw-cycle: 16.5s;
  --sw-off: #6B7688;
  --sw-line: #39424F;
}

.field [style*="animation-name"],
.field .sw-chip {
  animation-duration: var(--sw-cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

/* ---- search tree ---- */
.field .sw-edge {
  fill: none;
  stroke: var(--sw-line);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field .sw-edge--new {
  stroke: var(--amber);
  stroke-width: 2.2;
  opacity: 0;
}

.field .sw-edge--win {
  stroke: var(--amber);
}

.field .sw-accept-glow {
  fill: none;
  stroke: url(#swWin);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(255, 176, 32, 0.4));
}

.field .sw-node {
  fill: #161C27;
  stroke: #8892A6;
  stroke-width: 1.6;
}

.field .sw-node--dead {
  fill: none;
  stroke: var(--rose);
  opacity: 0;
}

.field .sw-node--win {
  fill: var(--amber);
  stroke: none;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(255, 176, 32, 0.55));
}

/* The travelling token: a short dash swept along the path by dashoffset, which
   is better supported than offset-path and needs no extra element. */
.field .sw-token {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
}

.field .sw-token--down { stroke: var(--indigo); }
.field .sw-token--up { stroke: var(--teal); }

.field .sw-token--arrow {
  stroke: currentColor;
  stroke-width: 2.6;
  color: var(--teal);
}

/* What a distilled trajectory contributes depends on its verdict. */
.field .sw-token--fail { color: var(--rose); }
.field .sw-token--in { color: #E6EAF2; }
.field .sw-token--ok { color: var(--teal); }

/* ---- verifier verdicts ---- */
.field .sw-badge { opacity: 0; }

.field .sw-badge__box {
  fill: none;
  stroke-width: 1.2;
}

.field .sw-badge__t {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

.field .sw-badge--bad .sw-badge__box { stroke: var(--rose); }
.field .sw-badge--bad .sw-badge__t { fill: var(--rose); }
.field .sw-badge--good .sw-badge__box { stroke: var(--teal); }
.field .sw-badge--good .sw-badge__t { fill: var(--teal); }

.field .sw-cross {
  fill: none;
  stroke: var(--rose);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.field .sw-check {
  fill: none;
  stroke: #0A0D13;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- actor chips ---- */
.field .sw-chip {
  color: var(--sw-off);
}

.field .sw-chip__glow {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  opacity: 0.13;
}

.field .sw-chip__box {
  fill: currentColor;
  fill-opacity: 0.09;
  stroke: currentColor;
  stroke-opacity: 0.6;
  stroke-width: 1.5;
}

.field .sw-glyph-f {
  fill: currentColor;
}

.field .sw-glyph-s {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field .sw-chip__t {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  fill: currentColor;
}

/* ---- arrows ---- */
.field .sw-arrow {
  fill: none;
  stroke: var(--sw-line);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.field .sw-arrow--dash {
  stroke-dasharray: 3 4.5;
}

.field .sw-head {
  fill: var(--sw-line);
}

.field .sw-propose {
  color: var(--sw-line);
  opacity: 0.42;
}

.field .sw-propose .sw-arrow { stroke: currentColor; }
.field .sw-propose .sw-head { fill: currentColor; }

/* ---- dataset ---- */
.field .sw-card {
  fill: #0F1420;
  stroke: #8892A6;
  stroke-width: 1.4;
}

.field .sw-card--back { opacity: 0.28; }
.field .sw-card--mid { opacity: 0.55; }

.field .sw-card--new {
  stroke: var(--teal);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.4));
}

.field .sw-card__line {
  stroke: #8892A6;
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: 0.5;
}

/* ---- labels ---- */
.field .sw-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: #8892A6;
}

.field .sw-label--sub {
  font-size: 10px;
  letter-spacing: 0.08em;
}

.field .sw-label--fail { fill: var(--rose); }
.field .sw-label--ok { fill: var(--teal); }

/* Only one outcome word is on screen at a time. */
.field .sw-outcome { opacity: 0; }

.field .sw-cap {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--amber);
  opacity: 0;
}

.field .sw-cap--static { opacity: 0; }

@keyframes sw-acc-glow {
  0% { opacity: 0; }
  82.1% { opacity: 0; }
  83.3% { opacity: 1; }
  96% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sw-edge1 {
  0% { stroke-dashoffset: 65.4; opacity: 0; }
  22.3% { stroke-dashoffset: 65.4; opacity: 0; }
  22.6% { stroke-dashoffset: 65.4; opacity: 1; }
  30.4% { stroke-dashoffset: 0; opacity: 1; }
  96% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes sw-edge2 {
  0% { stroke-dashoffset: 60.3; opacity: 0; }
  63.4% { stroke-dashoffset: 60.3; opacity: 0; }
  63.7% { stroke-dashoffset: 60.3; opacity: 1; }
  71.5% { stroke-dashoffset: 0; opacity: 1; }
  96% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes sw-sel1 {
  0% { stroke-dashoffset: 16; opacity: 0; }
  5.8% { stroke-dashoffset: 16; opacity: 0; }
  6% { stroke-dashoffset: 16; opacity: 1; }
  11.9% { stroke-dashoffset: -150.8; opacity: 1; }
  12.1% { stroke-dashoffset: 16; opacity: 0; }
  100% { stroke-dashoffset: 16; opacity: 0; }
}

@keyframes sw-sel2 {
  0% { stroke-dashoffset: 16; opacity: 0; }
  46.9% { stroke-dashoffset: 16; opacity: 0; }
  47.1% { stroke-dashoffset: 16; opacity: 1; }
  53% { stroke-dashoffset: -149.8; opacity: 1; }
  53.2% { stroke-dashoffset: 16; opacity: 0; }
  100% { stroke-dashoffset: 16; opacity: 0; }
}

@keyframes sw-bk1 {
  0% { stroke-dashoffset: 16; opacity: 0; }
  36.1% { stroke-dashoffset: 16; opacity: 0; }
  36.3% { stroke-dashoffset: 16; opacity: 1; }
  41.2% { stroke-dashoffset: -216.1; opacity: 1; }
  41.4% { stroke-dashoffset: 16; opacity: 0; }
  100% { stroke-dashoffset: 16; opacity: 0; }
}

@keyframes sw-bk2 {
  0% { stroke-dashoffset: 16; opacity: 0; }
  77.2% { stroke-dashoffset: 16; opacity: 0; }
  77.4% { stroke-dashoffset: 16; opacity: 1; }
  82.3% { stroke-dashoffset: -210.1; opacity: 1; }
  82.5% { stroke-dashoffset: 16; opacity: 0; }
  100% { stroke-dashoffset: 16; opacity: 0; }
}

@keyframes sw-node1 {
  0% { opacity: 0; }
  27.2% { opacity: 0; }
  28.4% { opacity: 1; }
  96% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sw-node2 {
  0% { opacity: 0; }
  68.3% { opacity: 0; }
  69.5% { opacity: 1; }
  96% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sw-badge1 {
  0% { opacity: 0; }
  30.7% { opacity: 0; }
  31.9% { opacity: 1; }
  96% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sw-badge2 {
  0% { opacity: 0; }
  71.8% { opacity: 0; }
  73% { opacity: 1; }
  96% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sw-cap-select {
  0% { opacity: 0; }
  5.6% { opacity: 0; }
  6% { opacity: 1; }
  11.9% { opacity: 1; }
  12.3% { opacity: 0; }
  46.7% { opacity: 0; }
  47.1% { opacity: 1; }
  53% { opacity: 1; }
  53.4% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sw-cap-retrieve {
  0% { opacity: 0; }
  11.5% { opacity: 0; }
  11.9% { opacity: 1; }
  16.8% { opacity: 1; }
  17.2% { opacity: 0; }
  52.6% { opacity: 0; }
  53% { opacity: 1; }
  57.8% { opacity: 1; }
  58.2% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sw-cap-expand {
  0% { opacity: 0; }
  16.4% { opacity: 0; }
  16.8% { opacity: 1; }
  22.6% { opacity: 1; }
  23% { opacity: 0; }
  57.4% { opacity: 0; }
  57.8% { opacity: 1; }
  63.7% { opacity: 1; }
  64.1% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sw-cap-execute {
  0% { opacity: 0; }
  22.2% { opacity: 0; }
  22.6% { opacity: 1; }
  30.4% { opacity: 1; }
  30.8% { opacity: 0; }
  63.3% { opacity: 0; }
  63.7% { opacity: 1; }
  71.5% { opacity: 1; }
  71.9% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sw-cap-verify {
  0% { opacity: 0; }
  30% { opacity: 0; }
  30.4% { opacity: 1; }
  36.3% { opacity: 1; }
  36.7% { opacity: 0; }
  71.1% { opacity: 0; }
  71.5% { opacity: 1; }
  77.4% { opacity: 1; }
  77.8% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sw-cap-backprop {
  0% { opacity: 0; }
  35.9% { opacity: 0; }
  36.3% { opacity: 1; }
  41.2% { opacity: 1; }
  41.6% { opacity: 0; }
  77% { opacity: 0; }
  77.4% { opacity: 1; }
  82.3% { opacity: 1; }
  82.7% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sw-cap-accept {
  0% { opacity: 0; }
  81.9% { opacity: 0; }
  82.3% { opacity: 1; }
  87.1% { opacity: 1; }
  87.5% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sw-cap-distill {
  0% { opacity: 0; }
  40.8% { opacity: 0; }
  41.2% { opacity: 1; }
  47.1% { opacity: 1; }
  47.5% { opacity: 0; }
  86.7% { opacity: 0; }
  87.1% { opacity: 1; }
  94% { opacity: 1; }
  94.4% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sw-chip-memory {
  0% { color: var(--sw-off); }
  10.5% { color: var(--sw-off); }
  11.9% { color: var(--teal); }
  16.8% { color: var(--teal); }
  18.4% { color: var(--sw-off); }
  39.8% { color: var(--sw-off); }
  41.2% { color: var(--teal); }
  47.1% { color: var(--teal); }
  48.7% { color: var(--sw-off); }
  51.6% { color: var(--sw-off); }
  53% { color: var(--teal); }
  57.8% { color: var(--teal); }
  59.4% { color: var(--sw-off); }
  85.7% { color: var(--sw-off); }
  87.1% { color: var(--teal); }
  94% { color: var(--teal); }
  95.6% { color: var(--sw-off); }
  100% { color: var(--sw-off); }
}

@keyframes sw-chip-planner {
  0% { color: var(--sw-off); }
  15.4% { color: var(--sw-off); }
  16.8% { color: var(--indigo); }
  22.6% { color: var(--indigo); }
  24.2% { color: var(--sw-off); }
  56.4% { color: var(--sw-off); }
  57.8% { color: var(--indigo); }
  63.7% { color: var(--indigo); }
  65.3% { color: var(--sw-off); }
  100% { color: var(--sw-off); }
}

@keyframes sw-chip-robot {
  0% { color: var(--sw-off); }
  21.2% { color: var(--sw-off); }
  22.6% { color: var(--amber); }
  30.4% { color: var(--amber); }
  32% { color: var(--sw-off); }
  62.3% { color: var(--sw-off); }
  63.7% { color: var(--amber); }
  71.5% { color: var(--amber); }
  73.1% { color: var(--sw-off); }
  100% { color: var(--sw-off); }
}

@keyframes sw-chip-verifier {
  0% { color: var(--sw-off); }
  29% { color: var(--sw-off); }
  30.4% { color: var(--indigo); }
  36.3% { color: var(--indigo); }
  37.9% { color: var(--sw-off); }
  70.1% { color: var(--sw-off); }
  71.5% { color: var(--indigo); }
  77.4% { color: var(--indigo); }
  79% { color: var(--sw-off); }
  80.9% { color: var(--sw-off); }
  82.3% { color: var(--indigo); }
  87.1% { color: var(--indigo); }
  88.7% { color: var(--sw-off); }
  100% { color: var(--sw-off); }
}

@keyframes sw-chip-scene {
  0% { color: var(--sw-off); }
  0.1% { color: var(--sw-off); }
  1.5% { color: #E6EAF2; }
  6% { color: #E6EAF2; }
  7.6% { color: var(--sw-off); }
  100% { color: var(--sw-off); }
}

@keyframes sw-chip-instr {
  0% { color: var(--sw-off); }
  0.1% { color: var(--sw-off); }
  1.5% { color: #E6EAF2; }
  6% { color: #E6EAF2; }
  7.6% { color: var(--sw-off); }
  100% { color: var(--sw-off); }
}

@keyframes sw-in-scene {
  0% { stroke-dashoffset: 12; opacity: 0; }
  1.8% { stroke-dashoffset: 12; opacity: 0; }
  2% { stroke-dashoffset: 12; opacity: 1; }
  4.5% { stroke-dashoffset: -58.4; opacity: 1; }
  4.7% { stroke-dashoffset: 12; opacity: 0; }
  100% { stroke-dashoffset: 12; opacity: 0; }
}

@keyframes sw-in-instr {
  0% { stroke-dashoffset: 12; opacity: 0; }
  1.8% { stroke-dashoffset: 12; opacity: 0; }
  2% { stroke-dashoffset: 12; opacity: 1; }
  4.5% { stroke-dashoffset: -58.4; opacity: 1; }
  4.7% { stroke-dashoffset: 12; opacity: 0; }
  100% { stroke-dashoffset: 12; opacity: 0; }
}

@keyframes sw-in-root {
  0% { stroke-dashoffset: 10; opacity: 0; }
  4.3% { stroke-dashoffset: 10; opacity: 0; }
  4.5% { stroke-dashoffset: 10; opacity: 1; }
  6% { stroke-dashoffset: -19.0; opacity: 1; }
  6.2% { stroke-dashoffset: 10; opacity: 0; }
  100% { stroke-dashoffset: 10; opacity: 0; }
}

@keyframes sw-retrieve {
  0% { stroke-dashoffset: 12; opacity: 0; }
  11.7% { stroke-dashoffset: 12; opacity: 0; }
  11.9% { stroke-dashoffset: 12; opacity: 1; }
  16.8% { stroke-dashoffset: -37.0; opacity: 1; }
  17% { stroke-dashoffset: 12; opacity: 0; }
  52.8% { stroke-dashoffset: 12; opacity: 0; }
  53% { stroke-dashoffset: 12; opacity: 1; }
  57.8% { stroke-dashoffset: -37.0; opacity: 1; }
  58% { stroke-dashoffset: 12; opacity: 0; }
  100% { stroke-dashoffset: 12; opacity: 0; }
}

@keyframes sw-planrobot {
  0% { stroke-dashoffset: 12; opacity: 0; }
  22.4% { stroke-dashoffset: 12; opacity: 0; }
  22.6% { stroke-dashoffset: 12; opacity: 1; }
  26.6% { stroke-dashoffset: -37.0; opacity: 1; }
  26.8% { stroke-dashoffset: 12; opacity: 0; }
  63.5% { stroke-dashoffset: 12; opacity: 0; }
  63.7% { stroke-dashoffset: 12; opacity: 1; }
  67.7% { stroke-dashoffset: -37.0; opacity: 1; }
  67.9% { stroke-dashoffset: 12; opacity: 0; }
  100% { stroke-dashoffset: 12; opacity: 0; }
}

@keyframes sw-robotver {
  0% { stroke-dashoffset: 12; opacity: 0; }
  30.2% { stroke-dashoffset: 12; opacity: 0; }
  30.4% { stroke-dashoffset: 12; opacity: 1; }
  34.4% { stroke-dashoffset: -37.0; opacity: 1; }
  34.6% { stroke-dashoffset: 12; opacity: 0; }
  71.3% { stroke-dashoffset: 12; opacity: 0; }
  71.5% { stroke-dashoffset: 12; opacity: 1; }
  75.5% { stroke-dashoffset: -37.0; opacity: 1; }
  75.7% { stroke-dashoffset: 12; opacity: 0; }
  100% { stroke-dashoffset: 12; opacity: 0; }
}

@keyframes sw-accept {
  0% { stroke-dashoffset: 12; opacity: 0; }
  82.1% { stroke-dashoffset: 12; opacity: 0; }
  82.3% { stroke-dashoffset: 12; opacity: 1; }
  87.1% { stroke-dashoffset: -31.0; opacity: 1; }
  87.3% { stroke-dashoffset: 12; opacity: 0; }
  100% { stroke-dashoffset: 12; opacity: 0; }
}

@keyframes sw-prop1 {
  0% { stroke-dashoffset: 14; opacity: 0; }
  16.6% { stroke-dashoffset: 14; opacity: 0; }
  16.8% { stroke-dashoffset: 14; opacity: 1; }
  22.6% { stroke-dashoffset: -89.4; opacity: 1; }
  22.8% { stroke-dashoffset: 14; opacity: 0; }
  100% { stroke-dashoffset: 14; opacity: 0; }
}

@keyframes sw-prop1-dim {
  0% { color: var(--sw-line); opacity: 0.42; }
  15.8% { color: var(--sw-line); opacity: 0.42; }
  16.8% { color: var(--indigo); opacity: 1; }
  22.6% { color: var(--indigo); opacity: 1; }
  23.8% { color: var(--sw-line); opacity: 0.42; }
  100% { color: var(--sw-line); opacity: 0.42; }
}

@keyframes sw-prop2 {
  0% { stroke-dashoffset: 14; opacity: 0; }
  57.6% { stroke-dashoffset: 14; opacity: 0; }
  57.8% { stroke-dashoffset: 14; opacity: 1; }
  63.7% { stroke-dashoffset: -99.0; opacity: 1; }
  63.9% { stroke-dashoffset: 14; opacity: 0; }
  100% { stroke-dashoffset: 14; opacity: 0; }
}

@keyframes sw-prop2-dim {
  0% { color: var(--sw-line); opacity: 0.42; }
  56.8% { color: var(--sw-line); opacity: 0.42; }
  57.8% { color: var(--indigo); opacity: 1; }
  63.7% { color: var(--indigo); opacity: 1; }
  64.9% { color: var(--sw-line); opacity: 0.42; }
  100% { color: var(--sw-line); opacity: 0.42; }
}

@keyframes sw-distill-fail {
  0% { stroke-dashoffset: 18; opacity: 0; }
  41% { stroke-dashoffset: 18; opacity: 0; }
  41.2% { stroke-dashoffset: 18; opacity: 1; }
  47.1% { stroke-dashoffset: -327.0; opacity: 1; }
  47.3% { stroke-dashoffset: 18; opacity: 0; }
  100% { stroke-dashoffset: 18; opacity: 0; }
}

@keyframes sw-distill-ok {
  0% { stroke-dashoffset: 18; opacity: 0; }
  86.9% { stroke-dashoffset: 18; opacity: 0; }
  87.1% { stroke-dashoffset: 18; opacity: 1; }
  94% { stroke-dashoffset: -327.0; opacity: 1; }
  94.2% { stroke-dashoffset: 18; opacity: 0; }
  100% { stroke-dashoffset: 18; opacity: 0; }
}

@keyframes sw-out-fail {
  0% { opacity: 0; }
  40.6% { opacity: 0; }
  41.2% { opacity: 1; }
  47.1% { opacity: 1; }
  47.7% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sw-out-ok {
  0% { opacity: 0; }
  86.5% { opacity: 0; }
  87.1% { opacity: 1; }
  94% { opacity: 1; }
  94.6% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sw-deck {
  0% { opacity: 0; }
  83.1% { opacity: 0; }
  84.3% { opacity: 1; }
  91.1% { opacity: 1; }
  92.3% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sw-chip-policy {
  0% { color: var(--sw-off); }
  87.1% { color: var(--sw-off); }
  88.5% { color: var(--teal); }
  95% { color: var(--teal); }
  96.6% { color: var(--sw-off); }
  100% { color: var(--sw-off); }
}

@keyframes sw-train {
  0% { stroke-dashoffset: 12; opacity: 0; }
  88.3% { stroke-dashoffset: 12; opacity: 0; }
  88.5% { stroke-dashoffset: 12; opacity: 1; }
  91.5% { stroke-dashoffset: -46.0; opacity: 1; }
  91.7% { stroke-dashoffset: 12; opacity: 0; }
  100% { stroke-dashoffset: 12; opacity: 0; }
}

/* Reduced motion: hold the finished state — both children expanded, both
   verdicts in, the accepted route lit — and stop every loop. */
@media (prefers-reduced-motion: reduce) {
  .field [style*="animation-name"],
  .field .sw-chip {
    animation: none !important;
  }

  .field .sw-edge--new,
  .field .sw-node--dead,
  .field .sw-node--win,
  .field .sw-badge,
  .field .sw-accept-glow,
  .field .sw-card--new {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .field .sw-token {
    display: none;
  }

  .field .sw-cap { opacity: 0; }
  .field .sw-cap--static { opacity: 1; }
}
/* <<< HERO FIGURE <<< */


/* ============================================================
   Stat strip — the scale of the generated dataset
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 26px;
}

.stat {
  background: var(--paper);
  padding: 20px 18px;
}

.section--alt .stat {
  background: var(--paper-2);
}

.stat__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}

.stat__label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 6px;
}

/* ============================================================
   Component cards — the four parts of the engine
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.section--alt .card {
  background: var(--paper);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(13, 17, 25, 0.09);
}

.card__idx {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.card__idx::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--spectrum);
  opacity: 0.5;
}

.card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #3B4353;
}

/* ============================================================
   Media (figures)
   ============================================================ */
.media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(13, 17, 25, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.section--alt .media {
  background: var(--paper);
}

.media:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(13, 17, 25, 0.12);
}

/* A caption belongs to the figure above it, so it sits nearer to that figure
   than to the next one: 14px up against the 40px down. The scale — 14 within a
   figure, 40 between figures, 52 between sections — keeps each boundary louder
   than the one inside it. */
.media + .media,
.caption + .media {
  margin-top: 40px;
}

/* That spacing is for figures stacked in normal flow. A grid lays its own
   gaps, and there every item after the first still matches `.media + .media`
   — the margin then pushes each one down inside its own cell, which is a row
   that does not line up rather than space between figures. */
.clip-grid > .media,
.ood2-row > .media {
  margin-top: 0;
}

/* Prose introducing or following a figure, and each table after the note
   belonging to the table above it. Sibling rules rather than inline styles, so
   the rhythm stays in one place. */
.caption + .prose {
  margin-top: 32px;
}

/* Prose that follows a figure or a tab panel rather than another paragraph, so
   it gets the spacing a figure gets instead of sitting flush against it. */
.prose--gap {
  margin-top: 40px;
}

.prose + .cards {
  margin-top: 28px;
}

.prose + .table-wrap,
.prose + .chart-wrap,
.table-note + .table-wrap {
  margin-top: 26px;
}

.prose + .figure {
  margin-top: 26px;
}

/* A note introducing a clip grid, inside a tab panel. */
.prose + .clip-grid {
  margin-top: 24px;
}

.caption + .table-wrap {
  margin-top: 34px;
}

.panel + .table-wrap,
.panel + .chart-wrap {
  margin-top: 40px;
}

.chart-wrap + .table-wrap {
  margin-top: 30px;
}

.chart-wrap + .caption {
  margin-top: 18px;
}

.sub-title + .chart-row {
  margin-top: 22px;
}

.caption + .figure {
  margin-top: 40px;
}

.table-note + .figure {
  margin-top: 40px;
}
.media img {
  width: 100%;
  display: block;
}

/* Figures on a white ground read better with a little air inside the frame. */
.media--pad {
  padding: 12px;
  background: var(--paper);
}

/* A 16:9 well for a video, self-hosted or embedded. */
.media--embed {
  aspect-ratio: 16 / 9;
}

.media--embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.media video {
  width: 100%;
  display: block;
}

/* Marks a slot whose real content is not in hand yet. Sized by whatever it
   contains rather than a fixed ratio, since a figure's shape is not known
   until there is a figure. */
.media--placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  min-height: 260px;
  border-style: dashed;
  border-color: #CDD3DC;
  background: var(--paper-2);
}

.section--alt .media--placeholder {
  background: var(--paper);
}

.media--placeholder:hover {
  transform: none;
  box-shadow: 0 1px 2px rgba(13, 17, 25, 0.04);
}

.placeholder__mark {
  width: 58px;
  height: 58px;
}

.placeholder__mark .ph-node {
  fill: none;
  stroke: #C2C8D2;
  stroke-width: 2.4;
}

/* A grid of clip slots under the task buttons. Two up on a wide screen so a
   pair reads side by side; the ratio is 4:3 because the real clips run 1:1,
   4:3 and 3:2 — drop it once they are in and let each video's own shape set
   the box. */
.clip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  /* Tiles top-align, so a row that mixes captioned clips with bare placeholders
     still lines its videos up along one edge. */
  align-items: start;
}

/* Column count and clip shape are separate modifiers: the same four-across row
   holds 4:3 simulator rollouts in one place and square real-world ones in
   another, and only the shape differs. */
.clip-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Three across, capped rather than filling the container: the source frames are
   224px, and three tracks of a full 1200px would blow each one up 2.6x. At this
   width it is 1.4x and still reads. Four across needs no cap — the tracks are
   narrower than that on their own. */
.clip-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 660px;
  margin-inline: auto;
}

.clip-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1000px;
  margin-inline: auto;
}

/* The shape applies to every tile in the grid, not just the ones that already
   hold a clip: a 4:3 placeholder beside a 1:1 video would leave the row ragged
   while a panel is half filled. Two classes beats the (0,1,0) of .media--clip
   and .media--placeholder, so this wins wherever it is set. */
.clip-grid--43 .media {
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.clip-grid--sq .media {
  aspect-ratio: 1 / 1;
  min-height: 0;
}

.clip-grid--4 > .media {
  min-height: 190px;
}

@media (max-width: 900px) {
  .clip-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.media--clip {
  aspect-ratio: 4 / 3;
  min-height: 0;
  gap: 10px;
}

.media--clip .placeholder__mark {
  width: 44px;
  height: 44px;
}

.media--clip .placeholder__text {
  font-size: 0.7rem;
}

.placeholder__mark .ph-play {
  fill: #C2C8D2;
}

.placeholder__mark .ph-edge {
  fill: none;
  stroke: #C2C8D2;
  stroke-width: 2;
  stroke-linecap: round;
}

.placeholder__text {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0;
}

/* ---------- OOD comparison grid ----------
   Six clips abreast will not read at 154px each, which is all the 1200px
   container leaves once the task column and gutters are taken out. This block
   alone steps outside it — capped so it does not sprawl on an ultrawide, and
   clamped to the viewport so it never introduces a horizontal scrollbar. The
   negative inline margin resolves against the container's own width, so on
   anything narrower than the cap it comes out to zero and nothing moves. */

/* Task label, then three pairs. Pairs rather than six equal columns because
   the task-perturbation pair carries its own caption underneath. */


/* The header row states the group names while it is on screen; each group also
   carries its own, for the stacked layout where the header cannot line up. */

/* Per-task clips under the pairwise chart: one row per task, the instruction
   on the left and the two policies beside it. Only two cells wide, so this one
   stays inside the container rather than breaking out of it.
   The video tracks are capped rather than free: at 1200px an unbounded 1fr
   would hand each clip 400px+ and make one panel four screens tall. */
.pair-row,
.pair-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 380px) minmax(0, 380px);
  gap: 18px;
}

.pair-row + .pair-row {
  margin-top: 18px;
}

.pair-head {
  margin-bottom: 10px;
  align-items: end;
}

.pair-head__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.92rem;
  color: #3C4453;
}

/* An instruction is a sentence, not a label: it gets sentence type rather than
   the tracked-out mono the column heads use. */
.pair-row__task {
  align-self: center;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: #3B4353;
  margin: 0;
}

.pair-row > .media {
  margin-top: 0;
}

@media (max-width: 860px) {
  .pair-row,
  .pair-head {
    grid-template-columns: 1fr;
  }

  .pair-head {
    display: none;
  }
}

/* Second-level buttons, inside a panel of the first level. Deliberately
   quieter than the row above them -- no gradient edge, no border at rest -- so
   the two levels read as an order rather than as two equal rows of pills. */
.tabs--sub {
  margin: 0 0 18px;
  gap: 6px;
}

.tabs--sub .tab {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 6px 13px;
  background: transparent;
  border-color: transparent;
}

.tabs--sub .tab:hover {
  color: var(--ink);
}

.tabs--sub .tab[aria-selected="true"] {
  color: var(--ink);
  border: 1px solid transparent;
  background: rgba(124, 131, 247, 0.11);
  box-shadow: none;
}

/* One row per task: what the task is, then its clips. The clip tracks are
   capped rather than free -- at container width an unbounded 1fr would give
   two clips 470px each and make one panel three screens tall. */
.ood2-row,
.ood2-head {
  display: grid;
  gap: 18px;
  align-items: center;
}

.ood2--2 .ood2-row,
.ood2--2 .ood2-head {
  grid-template-columns: minmax(170px, 1fr) repeat(2, minmax(0, 380px));
}

.ood2--3 .ood2-row,
.ood2--3 .ood2-head {
  grid-template-columns: minmax(170px, 1fr) repeat(3, minmax(0, 300px));
}

.ood2-row + .ood2-row {
  margin-top: 18px;
}

.ood2-head {
  margin-bottom: 10px;
  align-items: end;
}

.ood2-head__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.92rem;
  color: #3C4453;
}

.ood2-row__name,
.ood2-row__note {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--mute);
  margin: 0;
}

/* The task a perturbed rollout was renamed to, under the task it came from. */
.pair-row__note,
.ood2-row__note {
  margin-top: 4px;
  color: #8A91A0;
}

/* Where a row's first line is the prompt the VLA was given: a small caps label
   over it, the prompt set darker, the task the scene came from underneath. */
.pair-row__label,
.ood2-row__label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A91A0;
  margin: 0 0 3px;
}

.pair-row__prompt,
.ood2-row__name--prompt {
  color: #3C4453;
  font-weight: 700;
}

@media (max-width: 900px) {
  .ood2-row,
  .ood2-head {
    grid-template-columns: 1fr;
  }

  .ood2-head {
    display: none;
  }

  .ood2-row + .ood2-row {
    margin-top: 30px;
  }

  .ood2-row__name {
    font-size: 0.78rem;
    color: var(--ink);
  }
}

.media--cell {
  aspect-ratio: 4 / 3;
  min-height: 0;
  gap: 6px;
}

/* LIBERO rollouts are square; a grid of them squares every cell in it, the
   placeholders included, so a row stays one height. */
.ood2--sq .media--cell {
  aspect-ratio: 1 / 1;
}

/* Those rollouts are 224px; a square 380px track blows them up 1.7x and four
   rows run ~1600px tall. Held near native size instead, the spare width goes to
   the instruction column. Desktop only -- the narrow layout stacks. */
@media (min-width: 901px) {
  .ood2--sq.ood2--2 .ood2-row,
  .ood2--sq.ood2--2 .ood2-head {
    grid-template-columns: minmax(170px, 1fr) repeat(2, 240px);
  }

  /* Three clips per row (the LIBERO demo, then the two policies): the clips keep
     their size and the instruction column gives up the width. */
  .ood2--sq.ood2--3 .ood2-row,
  .ood2--sq.ood2--3 .ood2-head {
    grid-template-columns: minmax(120px, 1fr) repeat(3, 240px);
  }

  /* Four clips and no room for a task column: each clip carries its own
     instruction underneath, and a rule separates the demonstration from the
     generated scenes. The 1px track is that rule. */
  .ood2--sq.ood2--sw .ood2-row,
  .ood2--sq.ood2--sw .ood2-head {
    grid-template-columns: 240px 1px repeat(3, 240px);
    justify-content: space-between;
  }
}

.ood2--sw .ood2-head__name--wide {
  grid-column: span 3;
}

.ood2--sw .ood2-row {
  align-items: start;
}

.ood2--sw .clip {
  min-width: 0;
}

/* The pairwise rollouts are square LIBERO frames too, and their rows carry the
   same three-line text block as the OOD rows. */
.pair--sq .media--cell {
  aspect-ratio: 1 / 1;
}

.pair--sq .pair-row__task {
  align-self: start;
}

@media (min-width: 901px) {
  .pair--sq .pair-row,
  .pair--sq .pair-head {
    grid-template-columns: minmax(130px, 1fr) repeat(3, 240px);
  }
}

.ood2-sep {
  align-self: stretch;
  border-left: 1px dashed #C2C8D2;
}

@media (max-width: 900px) {
  .ood2-sep {
    display: none;
  }
}

/* As in .clip-grid: the cell sets the shape and the clip fills it. */
.media--cell.media--video video {
  height: 100%;
  object-fit: cover;
  background: #0D1119;
}

.media--cell .placeholder__mark {
  width: 30px;
  height: 30px;
}

.media--cell .placeholder__text {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

/* A video is a control surface — it should not slide out from under the
   pointer on the way to the play button. */
/* Clips inside a grid fill their cell; the cell, not the clip, sets the shape.
   Without this a 4:3 rollout and a 16:9 one would sit at different heights in
   the same row. */
.clip-grid .media--video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0D1119;
}

/* A clip with the instruction it was given underneath it. The caption is the
   point of the figure, so it goes outside the aspect-ratio box rather than
   over the video. */
.clip {
  margin: 0;
}

.clip > .media {
  margin-top: 0;
}

.clip__cap {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: var(--mute);
  margin: 9px 0 0;
  text-wrap: pretty;
}

/* The geometry/pose profile the grasp had to handle, under the instruction it
   was given. Its own line and a step quieter: it annotates the clip rather
   than being part of what the robot was told. */
.clip__tag {
  display: block;
  margin-top: 3px;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: #8A91A0;
}

.media--video:hover {
  transform: none;
  box-shadow: 0 1px 2px rgba(13, 17, 25, 0.04);
}

.caption {
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--mute);
  margin: 14px 0 0;
}

.caption b {
  color: var(--ink);
  font-weight: 700;
}

/* One number carrying a paragraph's point. Coloured rather than merely bolded:
   these sentences already run to four bold spans and a fifth would not stand
   out among them.

   Two classes, not one: the bare `.mark` this used to be is (0,1,0) and loses
   to the `.caption b` / `.prose b` rules above, which match the same <b> at
   (0,1,1). The mark simply never showed. */
.prose .mark,
.caption .mark,
.table-note .mark {
  color: var(--indigo);
  font-weight: 700;
}

.figure {
  margin: 0 0 22px;
}

/* A plot that was 0.45\textwidth in the paper: giving it the full 1200px
   would blow the type inside it up past the page's own headings. The cap sits
   on the chart alone, so the caption below still runs the container's width
   and lines up with the caption of the chart above it. */
/* Two half-width figures on one line. They collapse before either chart hits
   its own 380px scroll floor, so neither ever scrolls inside a column. */
.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}

.chart-row > .figure {
  margin: 0;
}

@media (max-width: 900px) {
  .chart-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.chart-wrap--sm {
  max-width: 620px;
  margin-inline: auto;
}

/* ============================================================
   Trajectory tabs — four families of generated demonstrations
   ============================================================ */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

/* Two per row, each column as wide as its longest label so the pills line up
   as a block. Below 760px two long labels no longer fit side by side, so the
   strip goes back to wrapping. */
.tabs--2col {
  display: grid;
  grid-template-columns: repeat(2, max-content);
}

@media (max-width: 760px) {
  .tabs--2col {
    display: flex;
  }
}

/* Views of one figure stepped through with the arrows, or with left/right while
   focus is inside ([data-carousel] in js/nav.js). One slide shows at a time;
   with JS off they all show, stacked. */
.carousel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}

.carousel__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--head);
}

.carousel__count {
  font-weight: 400;
  color: var(--mute);
}

.carousel__arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #3C4453;
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.carousel__arrow:hover {
  background: #232933;
}

.carousel__arrow:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

/* ---------- Build-up figure ----------
   One figure revealed a block at a time. Every frame is the same canvas, so
   they are stacked and cross-faded: the box never changes height and nothing
   below it moves while the figure plays. */
.buildup__stage {
  position: relative;
  aspect-ratio: 2002 / 1125;
}

/* The frames are opaque, so the incoming one fades in ON TOP of the outgoing
   one, which holds until that fade is over. Fading both at once would let the
   page show through and wash the figure out mid-step. */
.buildup__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.buildup__frame.is-on {
  opacity: 1;
  z-index: 1;
}

/* The step just left, held under the incoming frame for the length of the
   fade (the script takes this class off again). */
.buildup__frame.is-out {
  opacity: 1;
  transition: none;
}

/* The step's caption. It sits where a figure's caption sits, and reserves
   three lines so the page below does not shift as the steps change. */
.carousel__desc {
  min-height: 4.6em;
}

/* Jumping straight to a step. The dots carry the step names for screen
   readers; sighted viewers get the name from the bar above the figure. */
.buildup__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.buildup__dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.buildup__dot:hover {
  border-color: var(--indigo);
}

.buildup__dot.is-on {
  border-color: transparent;
  background: linear-gradient(135deg, var(--teal), var(--amber));
  transform: scale(1.2);
}

.buildup__dot:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}

/* Button rows that follow a heading get their space from the heading. The ones
   that follow a figure would otherwise sit flush against it — 40px is what this
   stylesheet already puts between figures. */
.clip-grid + .tabs,
.caption + .tabs,
.chart-row + .tabs,
.media + .tabs {
  margin-top: 40px;
}

/* More again after a bare chart: a caption ends well above its own box, but a
   chart's axis labels run to the bottom edge of the SVG, so 40px here reads as
   much less than 40px anywhere else. */
.chart-wrap + .tabs {
  margin-top: 56px;
}

.tab {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.tab:hover {
  color: var(--ink);
  border-color: #C8CDD6;
}

.tab[aria-selected="true"] {
  color: var(--ink);
  border: 1px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box,
    var(--spectrum) border-box;
  box-shadow: 0 0 0 1px rgba(124, 131, 247, 0.18);
}

.panel[hidden] {
  display: none;
}

/* ============================================================
   Result chart
   ============================================================ */
/* Same scroll-on-narrow contract as a wide table: the viewBox would otherwise
   shrink the labels along with the bars until neither can be read. */
.chart-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.chart {
  display: block;
  width: 100%;
  min-width: 960px;
  height: auto;
}

.chart .rule {
  stroke: var(--line);
  stroke-width: 1;
}

.chart .axis {
  stroke: #CFD4DC;
  stroke-width: 1;
}

.chart .g-a { stop-color: var(--teal); }
.chart .g-b { stop-color: var(--indigo); }
.chart .g-c { stop-color: var(--amber); }

.bar--gt { fill: #C4CAD4; }
/* A second baseline, for the comparison that has two of them (the verifier
   ablation): one step darker, so the pair separates without reading as a
   third method. */
.bar--gt2 { fill: #9AA2B1; }
.chart .val--gt2 { fill: var(--mute); }
/* Each chart's bars take that chart's own gradient. This has to be keyed on
   the chart rather than left to a fill="url(#...)" on the rect: a presentation
   attribute loses to any CSS rule, so a single .bar--ours fill here would
   silently paint every chart on the page with the first chart's ramp. Where
   one chart needs more than one gradient (the four suite panels) the rect
   carries it in an inline style, which does win. */
.chart--pairs .bar--ours { fill: url(#pairsBar); }
.chart--suites .bar--ours { fill: url(#suitesBar0); }
.chart--fewshot .bar--ours { fill: url(#fewshotBar); }
.chart--simpler .bar--ours { fill: url(#simplerBar); }
.chart--rw .bar--ours { fill: url(#rwBar); }
.chart--pick .bar--ours { fill: url(#pickBar); }
.chart--verSearch .bar--ours { fill: url(#verSearchBar); }
.chart--verTime .bar--ours { fill: url(#verTimeBar); }
.chart--verDetect .bar--ours { fill: url(#verDetectBar); }
.chart--memAbl .bar--ours { fill: url(#memAblBar); }

.chart text {
  font-family: var(--mono);
}

/* Tick and axis labels sit behind the data. */
.chart .tick {
  font-size: 12px;
  fill: var(--mute);
  text-anchor: end;
}

/* Axis titles name what is being measured, so they carry the same weight as
   the column heads in the tables rather than sitting back with the ticks. */
.chart .ylab,
.chart .atitle {
  font-size: 12px;
  font-weight: 700;
  fill: var(--head);
  text-anchor: middle;
  letter-spacing: 0.04em;
}

/* Small enough to live inside .chart-wrap--sm, so it must not inherit the
   wide charts' scroll floor. */
.chart--sm {
  min-width: 380px;
}

.chart .curve {
  fill: none;
  stroke: url(#scalingLine);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart .dot {
  fill: url(#scalingLine);
  stroke: var(--paper);
  stroke-width: 2.5;
}

/* The baseline the curve is measured against, drawn like the GT bars: present,
   clearly secondary. */
.chart .gtline {
  stroke: var(--mute);
  stroke-width: 1.6;
  stroke-dasharray: 6 5;
}

.chart .key--end { text-anchor: end; }
.chart .tick--mid { text-anchor: middle; }
.chart .val--under { dominant-baseline: hanging; }

/* ---- The build-up ----------------------------------------------------
   The line is revealed by a travelling dash and each marker pops as the line
   reaches it; --d is measured along the path by the generator, so the two stay
   in step through the steep middle segments.

   Gated on .has-reveal, set in <head> only when IntersectionObserver exists, so
   the starting opacity: 0 can never strand the chart. Runs once: replaying a
   build-up every time it scrolls back into view reads as a glitch. */
.has-reveal .chart--play .draw {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}

.has-reveal .chart--play .pop {
  opacity: 0;
}

/* Bars climb out of their own baseline, so the zero line stays put and the
   height is the only thing that moves. */
.chart .rise {
  transform-box: fill-box;
  transform-origin: bottom;
}

.has-reveal .chart--play .rise {
  transform: scaleY(0);
}

.has-reveal .chart--play.is-in .draw {
  animation: chart-draw 3.4s linear forwards;
}

.has-reveal .chart--play.is-in .rise {
  animation: chart-rise 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0s);
}

.has-reveal .chart--play.is-in .pop {
  animation: chart-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--d, 0s);
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes chart-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes chart-pop {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: none; }
}

@keyframes chart-rise {
  from { transform: scaleY(0); }
  to { transform: none; }
}

.chart .plab {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  fill: var(--ink);
}

.chart .xlab {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-anchor: middle;
  fill: var(--head);
}

/* The value on top of each bar, so a zero reads as a measurement and not as
   a bar that failed to draw. */
.chart .val {
  font-size: 13px;
  text-anchor: middle;
}

.chart .val--gt { fill: var(--mute); }

.chart .val--ours {
  font-weight: 700;
  fill: var(--head);
}

.chart .key {
  font-size: 12.5px;
  fill: var(--head);
}

/* ============================================================
   Result tables
   ============================================================ */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 0.9rem;
}

table.table--wide {
  min-width: 780px;
}

/* A table too wide for one row of columns, split into stacked column blocks
   the way the paper prints it. Each block repeats the row labels, so the
   second block carries its own header row inside its own tbody. */
.table--pairs tbody + tbody tr:first-child th,
.table--pairs tbody + tbody tr:first-child td {
  border-top: 1px solid #CFD4DC;
}

.table--pairs tr.subhead th {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--head);
  font-weight: 700;
  text-align: right;
  padding: 22px 12px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table--pairs tr.subhead th:first-child {
  text-align: left;
}

/* The subhead already draws the line under itself. */
.table--pairs tr.subhead + tr th,
.table--pairs tr.subhead + tr td {
  border-top: 0;
}

thead th {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--head);
  font-weight: 700;
  text-align: right;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

thead th:first-child,
tbody th {
  text-align: left;
}

tbody th {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink);
  padding: 12px;
  white-space: nowrap;
}

/* A row-group label spanning several task rows. */
tbody th.group {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 400;
  vertical-align: middle;
  border-right: 1px solid var(--line);
}

td {
  text-align: right;
  padding: 12px;
  font-variant-numeric: tabular-nums;
  color: #3B4353;
  white-space: nowrap;
}

tbody tr + tr th,
tbody tr + tr td {
  border-top: 1px solid var(--line);
}

/* A row-group boundary is louder than the rows inside it. */
tbody tr.rule th,
tbody tr.rule td {
  border-top: 1px solid #CFD4DC;
}

/* Our own row, marked once so it does not need bolding cell by cell. */
tr.ours th,
tr.ours td {
  background: rgba(124, 131, 247, 0.055);
}

tr.ours th {
  font-weight: 700;
}

tr.total th,
tr.total td {
  border-top: 1px solid #CFD4DC;
  font-weight: 600;
  color: var(--ink);
}

td b {
  color: var(--ink);
  font-weight: 700;
}

.gain,
.drop {
  font-family: var(--mono);
  font-size: 0.72rem;
  margin-left: 4px;
}

.gain { color: var(--gain); }
.drop { color: var(--drop); }

.table-note {
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--mute);
  margin: 12px 0 0;
}

.table-note b {
  color: var(--ink);
  font-weight: 700;
}

/* ============================================================
   Citation
   ============================================================ */
.cite-block {
  position: relative;
}

.cite {
  margin: 0;
  background: var(--space);
  color: var(--on-space);
  border-radius: var(--radius);
  padding: 26px 28px;
  overflow-x: auto;
  border: 1px solid var(--hairline-dark);
}

.cite code {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.7;
  white-space: pre;
  color: var(--on-space);
}

.copy {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-space-mute);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline-dark);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.copy:hover {
  color: var(--on-space);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

.copy.is-done {
  color: var(--teal);
  border-color: rgba(45, 212, 191, 0.5);
}

/* ---------- Footer ---------- */
.footer {
  padding: 36px 0 56px;
  border-top: 1px solid var(--line);
}

.footer p {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--mute);
  margin: 0;
}

.footer a {
  color: var(--ink);
  text-underline-offset: 3px;
}

/* Sits under the page's own line and a step quieter: it credits the design,
   it is not part of what the page is about. */
.footer__credit {
  margin-top: 8px;
  opacity: 0.75;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 940px) {
  .cards,
  .clip-grid {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 72px 0 64px;
  }

  .hero__figure {
    order: 2;
    max-width: 720px;
    transform: none;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 16px;
  }

  .links {
    gap: 9px;
  }

  .btn {
    padding: 10px 16px;
    font-size: 0.9rem;
  }

  .stat__num {
    font-size: 1.5rem;
  }
}

/* ============================================================
   Reduced motion — keep the static composition, drop the
   travelling keypoints.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .field .kp {
    display: none;
  }

  .field .node--win {
    animation: none !important;
  }

  .has-reveal .section > .container {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .has-reveal .chart--play .draw,
  .has-reveal .chart--play .pop,
  .has-reveal .chart--play .rise {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .media,
  .card,
  .btn,
  .tab,
  .copy,
  .sidenav__mark,
  .sidenav__label {
    transition: none;
  }

  .sidenav ul::after {
    transition: none;
  }
}


/* ============================================================
   What SkillWeaver does — three pillars
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* Three stacked shadows read as depth rather than a smudge: a tight contact
   shadow, a mid key shadow, and a wide soft one pulled in by a negative spread.
   Each layer's x/y offset grows with its blur, so the light reads as coming
   from the top left and the shadow trails off to the bottom right. */
.pillar {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 100%);
  border: 1px solid rgba(13, 17, 25, 0.06);
  border-radius: 16px;
  box-shadow:
    1px 2px 3px rgba(13, 17, 25, 0.08),
    6px 10px 20px -4px rgba(13, 17, 25, 0.14),
    18px 28px 48px -12px rgba(13, 17, 25, 0.26);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pillar:hover {
  transform: translateY(-5px);
  box-shadow:
    2px 3px 5px rgba(13, 17, 25, 0.08),
    10px 18px 30px -6px rgba(13, 17, 25, 0.18),
    28px 44px 72px -16px rgba(13, 17, 25, 0.34);
}

/* The figure sits inset on the card like a mounted print, with its own
   hairline and radius, instead of bleeding to the card edge. */
.pillar__media {
  margin: 12px 12px 0;
  aspect-ratio: 3 / 2;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(13, 17, 25, 0.04);
}

.pillar__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}

.pillar:hover .pillar__media img {
  transform: scale(1.03);
}

.pillar__media--ph {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: var(--paper-2);
  border-style: dashed;
  border-color: #CDD3DC;
  box-shadow: none;
}

.pillar__body {
  padding: 18px 22px 24px;
}

.pillar__title {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 12px;
}

.pillar__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.6rem;
  letter-spacing: -0.02em;
  line-height: 1;
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}

.pillar__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 6px;
  line-height: 1.45;
  min-height: 2.9em;
}

.pillar__text {
  margin: 14px 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--head);
}

@media (max-width: 1100px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .pillars {
    grid-template-columns: 1fr;
  }

  .pillar__label {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pillar,
  .pillar__media img {
    transition: none;
  }

  .pillar:hover,
  .pillar:hover .pillar__media img {
    transform: none;
  }
}

/* >>> SEARCH ABLATION — generated by tools/make_search_ablation.py, do not edit by hand >>> */
.abl-split {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 36px;
  align-items: center;
}

.abl-anims {
  display: grid;
  gap: 14px;
}

/* The hero's space panel, glows scaled down to a card. */
.abl-anim {
  margin: 0;
  background:
    radial-gradient(420px 200px at 88% 0%, rgba(124, 131, 247, 0.2), transparent 62%),
    radial-gradient(360px 200px at 100% 100%, rgba(255, 176, 32, 0.1), transparent 62%),
    radial-gradient(340px 220px at 0% 35%, rgba(45, 212, 191, 0.12), transparent 62%),
    var(--space);
  border-radius: var(--radius);
  padding: 14px 18px 12px;
}

.abl-anim__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--on-space-mute);
  margin: 0 0 4px;
}

.abl-anim__cap b {
  color: var(--on-space);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.search-anim {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.abl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--mute);
  padding: 0 2px;
}

.abl-legend i {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: -1px;
  background: #161C27;
}

.abl-legend .k-pass { box-shadow: inset 0 0 0 1.8px var(--teal); }
.abl-legend .k-fail { box-shadow: inset 0 0 0 1.8px var(--rose); }
.abl-legend .k-win { background: var(--amber); box-shadow: 0 0 6px rgba(255, 176, 32, 0.55); }

/* Transposed to three columns, so the global 560px floor would only force a
   scrollbar in a half-width column. */
.abl-table table {
  min-width: 0;
}

.abl-table .ours {
  background: rgba(124, 131, 247, 0.055);
}

.abl-side .table-note {
  margin-top: 14px;
}

@media (max-width: 900px) {
  .abl-split {
    grid-template-columns: 1fr;
  }
}

/* One shared cycle; each element's timing is baked into its own keyframes. */
.search-anim .sa {
  animation-duration: 18s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.search-anim .sa-glow {
  filter: drop-shadow(0 0 7px rgba(255, 176, 32, 0.4));
}

.search-anim .sa-goal {
  filter: drop-shadow(0 0 8px rgba(255, 176, 32, 0.55));
}

#sa-m-e-A { animation-name: sa-m-e-A; stroke-dasharray: 111 111; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-m-e-A {
  0% { opacity: 0; stroke-dashoffset: 111; stroke: #FFB020; }
  2.778% { opacity: 0; stroke-dashoffset: 111; }
  3.056% { opacity: 1; }
  5.278% { stroke-dashoffset: 0; }
  7.222% { stroke: #FFB020; }
  9.444% { stroke: #39424F; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-m-e-A2 { animation-name: sa-m-e-A2; stroke-dasharray: 130.812 130.812; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-m-e-A2 {
  0% { opacity: 0; stroke-dashoffset: 130.812; stroke: #FFB020; }
  2.778% { opacity: 0; stroke-dashoffset: 130.812; }
  3.056% { opacity: 1; }
  5.278% { stroke-dashoffset: 0; }
  12.5% { stroke: #FFB020; }
  14.722% { stroke: #39424F; }
  52.5% { opacity: 1; }
  55.278% { opacity: 0.35; }
  92.222% { opacity: 0.35; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-m-e-B { animation-name: sa-m-e-B; stroke-dasharray: 111 111; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-m-e-B {
  0% { opacity: 0; stroke-dashoffset: 111; stroke: #FFB020; }
  15% { opacity: 0; stroke-dashoffset: 111; }
  15.278% { opacity: 1; }
  17.5% { stroke-dashoffset: 0; }
  19.444% { stroke: #FFB020; }
  21.667% { stroke: #39424F; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-m-e-B2 { animation-name: sa-m-e-B2; stroke-dasharray: 130.812 130.812; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-m-e-B2 {
  0% { opacity: 0; stroke-dashoffset: 130.812; stroke: #FFB020; }
  15% { opacity: 0; stroke-dashoffset: 130.812; }
  15.278% { opacity: 1; }
  17.5% { stroke-dashoffset: 0; }
  24.722% { stroke: #FFB020; }
  26.944% { stroke: #39424F; }
  52.5% { opacity: 1; }
  55.278% { opacity: 0.35; }
  92.222% { opacity: 0.35; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-m-e-C { animation-name: sa-m-e-C; stroke-dasharray: 130.812 130.812; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-m-e-C {
  0% { opacity: 0; stroke-dashoffset: 130.812; stroke: #FFB020; }
  27.778% { opacity: 0; stroke-dashoffset: 130.812; }
  28.056% { opacity: 1; }
  30.278% { stroke-dashoffset: 0; }
  32.222% { stroke: #FFB020; }
  34.444% { stroke: #39424F; }
  52.5% { opacity: 1; }
  55.278% { opacity: 0.35; }
  92.222% { opacity: 0.35; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-m-e-C2 { animation-name: sa-m-e-C2; stroke-dasharray: 111 111; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-m-e-C2 {
  0% { opacity: 0; stroke-dashoffset: 111; stroke: #FFB020; }
  27.778% { opacity: 0; stroke-dashoffset: 111; }
  28.056% { opacity: 1; }
  30.278% { stroke-dashoffset: 0; }
  37.5% { stroke: #FFB020; }
  39.722% { stroke: #39424F; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-m-e-D { animation-name: sa-m-e-D; stroke-dasharray: 111 111; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-m-e-D {
  0% { opacity: 0; stroke-dashoffset: 111; stroke: #FFB020; }
  41.944% { opacity: 0; stroke-dashoffset: 111; }
  42.222% { opacity: 1; }
  44.444% { stroke-dashoffset: 0; }
  46.389% { stroke: #FFB020; }
  48.611% { stroke: #39424F; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-m-e-D2 { animation-name: sa-m-e-D2; stroke-dasharray: 130.812 130.812; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-m-e-D2 {
  0% { opacity: 0; stroke-dashoffset: 130.812; stroke: #FFB020; }
  41.944% { opacity: 0; stroke-dashoffset: 130.812; }
  42.222% { opacity: 1; }
  44.444% { stroke-dashoffset: 0; }
  51.667% { stroke: #FFB020; }
  52.5% { opacity: 1; }
  53.889% { stroke: #39424F; }
  55.278% { opacity: 0.35; }
  92.222% { opacity: 0.35; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-m-glow { animation-name: sa-m-glow; stroke-dasharray: 486 486; opacity: 1; stroke-dashoffset: 0; }
@keyframes sa-m-glow {
  0% { opacity: 0; stroke-dashoffset: 486; }
  52.5% { opacity: 0; stroke-dashoffset: 486; }
  52.778% { opacity: 1; }
  58.056% { stroke-dashoffset: 0; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
#sa-m-sel-A { animation-name: sa-m-sel-A; stroke-dasharray: 16 143; opacity: 0; stroke-dashoffset: -95; }
@keyframes sa-m-sel-A {
  0% { opacity: 0; stroke-dashoffset: 16; }
  13.333% { opacity: 0; stroke-dashoffset: 16; }
  13.5% { opacity: 1; }
  14.722% { opacity: 1; stroke-dashoffset: -95; }
  15.056% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -95; }
}
#sa-m-sel-B { animation-name: sa-m-sel-B; stroke-dasharray: 16 268; opacity: 0; stroke-dashoffset: -220; }
@keyframes sa-m-sel-B {
  0% { opacity: 0; stroke-dashoffset: 16; }
  25.627% { opacity: 0; stroke-dashoffset: 16; }
  25.794% { opacity: 1; }
  27.5% { opacity: 1; stroke-dashoffset: -220; }
  27.833% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -220; }
}
#sa-m-sel-C2 { animation-name: sa-m-sel-C2; stroke-dasharray: 16 393; opacity: 0; stroke-dashoffset: -345; }
@keyframes sa-m-sel-C2 {
  0% { opacity: 0; stroke-dashoffset: 16; }
  38.802% { opacity: 0; stroke-dashoffset: 16; }
  38.968% { opacity: 1; }
  41.667% { opacity: 1; stroke-dashoffset: -345; }
  42% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -345; }
}
#sa-m-resel-B { animation-name: sa-m-resel-B; stroke-dasharray: 16 268; opacity: 0; stroke-dashoffset: -220; }
@keyframes sa-m-resel-B {
  0% { opacity: 0; stroke-dashoffset: 16; }
  33.349% { opacity: 0; stroke-dashoffset: 16; }
  33.516% { opacity: 1; }
  35.222% { opacity: 1; stroke-dashoffset: -220; }
  35.556% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -220; }
}
#sa-m-A { animation-name: sa-m-A; opacity: 1; }
@keyframes sa-m-A {
  0% { opacity: 0; }
  5.278% { opacity: 0; }
  6.278% { opacity: 1; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-m-A-v { animation-name: sa-m-A-v; transform-box: view-box; transform-origin: 165px 95px; opacity: 1; transform: scale(1); }
@keyframes sa-m-A-v {
  0% { opacity: 0; transform: scale(0.6); }
  7.222% { opacity: 0; transform: scale(0.6); }
  7.889% { transform: scale(1.15); }
  8.222% { opacity: 1; }
  8.667% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-m-A2 { animation-name: sa-m-A2; opacity: 0.35; }
@keyframes sa-m-A2 {
  0% { opacity: 0; }
  5.278% { opacity: 0; }
  6.278% { opacity: 1; }
  52.5% { opacity: 1; }
  55.278% { opacity: 0.35; }
  92.222% { opacity: 0.35; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-m-A2-v { animation-name: sa-m-A2-v; transform-box: view-box; transform-origin: 165px 155px; opacity: 1; transform: scale(1); }
@keyframes sa-m-A2-v {
  0% { opacity: 0; transform: scale(0.6); }
  12.5% { opacity: 0; transform: scale(0.6); }
  13.167% { transform: scale(1.15); }
  13.5% { opacity: 1; }
  13.944% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-m-B { animation-name: sa-m-B; opacity: 1; }
@keyframes sa-m-B {
  0% { opacity: 0; }
  17.5% { opacity: 0; }
  18.5% { opacity: 1; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-m-B-v { animation-name: sa-m-B-v; transform-box: view-box; transform-origin: 290px 95px; opacity: 1; transform: scale(1); }
@keyframes sa-m-B-v {
  0% { opacity: 0; transform: scale(0.6); }
  19.444% { opacity: 0; transform: scale(0.6); }
  20.111% { transform: scale(1.15); }
  20.444% { opacity: 1; }
  20.889% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-m-B2 { animation-name: sa-m-B2; opacity: 0.35; }
@keyframes sa-m-B2 {
  0% { opacity: 0; }
  17.5% { opacity: 0; }
  18.5% { opacity: 1; }
  52.5% { opacity: 1; }
  55.278% { opacity: 0.35; }
  92.222% { opacity: 0.35; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-m-B2-v { animation-name: sa-m-B2-v; transform-box: view-box; transform-origin: 290px 35px; opacity: 1; transform: scale(1); }
@keyframes sa-m-B2-v {
  0% { opacity: 0; transform: scale(0.6); }
  24.722% { opacity: 0; transform: scale(0.6); }
  25.389% { transform: scale(1.15); }
  25.722% { opacity: 1; }
  26.167% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-m-C { animation-name: sa-m-C; opacity: 0.35; }
@keyframes sa-m-C {
  0% { opacity: 0; }
  30.278% { opacity: 0; }
  31.278% { opacity: 1; }
  52.5% { opacity: 1; }
  55.278% { opacity: 0.35; }
  92.222% { opacity: 0.35; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-m-C-v { animation-name: sa-m-C-v; transform-box: view-box; transform-origin: 415px 155px; opacity: 1; transform: scale(1); }
@keyframes sa-m-C-v {
  0% { opacity: 0; transform: scale(0.6); }
  32.222% { opacity: 0; transform: scale(0.6); }
  32.889% { transform: scale(1.15); }
  33.222% { opacity: 1; }
  33.667% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-m-C2 { animation-name: sa-m-C2; opacity: 1; }
@keyframes sa-m-C2 {
  0% { opacity: 0; }
  30.278% { opacity: 0; }
  31.278% { opacity: 1; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-m-C2-v { animation-name: sa-m-C2-v; transform-box: view-box; transform-origin: 415px 95px; opacity: 1; transform: scale(1); }
@keyframes sa-m-C2-v {
  0% { opacity: 0; transform: scale(0.6); }
  37.5% { opacity: 0; transform: scale(0.6); }
  38.167% { transform: scale(1.15); }
  38.5% { opacity: 1; }
  38.944% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-m-D { animation-name: sa-m-D; opacity: 1; }
@keyframes sa-m-D {
  0% { opacity: 0; }
  44.444% { opacity: 0; }
  45.444% { opacity: 1; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-m-D-v { animation-name: sa-m-D-v; transform-box: view-box; transform-origin: 540px 95px; opacity: 1; transform: scale(1); }
@keyframes sa-m-D-v {
  0% { opacity: 0; transform: scale(0.6); }
  46.389% { opacity: 0; transform: scale(0.6); }
  47.056% { transform: scale(1.15); }
  47.389% { opacity: 1; }
  47.833% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-m-D2 { animation-name: sa-m-D2; opacity: 0.35; }
@keyframes sa-m-D2 {
  0% { opacity: 0; }
  44.444% { opacity: 0; }
  45.444% { opacity: 1; }
  52.5% { opacity: 1; }
  55.278% { opacity: 0.35; }
  92.222% { opacity: 0.35; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-m-D2-v { animation-name: sa-m-D2-v; transform-box: view-box; transform-origin: 540px 35px; opacity: 1; transform: scale(1); }
@keyframes sa-m-D2-v {
  0% { opacity: 0; transform: scale(0.6); }
  51.667% { opacity: 0; transform: scale(0.6); }
  52.333% { transform: scale(1.15); }
  52.667% { opacity: 1; }
  53.111% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-m-goal { animation-name: sa-m-goal; transform-box: view-box; transform-origin: 540px 95px; opacity: 1; transform: scale(1); }
@keyframes sa-m-goal {
  0% { opacity: 0; transform: scale(0.6); }
  58.056% { opacity: 0; transform: scale(0.6); }
  58.722% { transform: scale(1.15); }
  59.056% { opacity: 1; }
  59.5% { transform: scale(1); }
  96.111% { opacity: 1; }
  97.778% { opacity: 0; }
  100% { opacity: 0; transform: scale(1); }
}
#sa-m-count { animation-name: sa-m-count; opacity: 1; }
@keyframes sa-m-count {
  0% { opacity: 0; }
  59.722% { opacity: 0; }
  61.389% { opacity: 1; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-l-e-r1-0 { animation-name: sa-l-e-r1-0; stroke-dasharray: 72 72; opacity: 0.28; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-l-e-r1-0 {
  0% { opacity: 0; stroke-dashoffset: 72; stroke: #FFB020; }
  2.778% { opacity: 0; stroke-dashoffset: 72; }
  3.056% { opacity: 1; }
  5.278% { stroke-dashoffset: 0; }
  7.222% { stroke: #FFB020; }
  9.444% { stroke: #39424F; }
  37.222% { opacity: 1; }
  40% { opacity: 0.28; }
  92.222% { opacity: 0.28; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-l-e-r1-1 { animation-name: sa-l-e-r1-1; stroke-dasharray: 72 72; opacity: 0.28; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-l-e-r1-1 {
  0% { opacity: 0; stroke-dashoffset: 72; stroke: #FFB020; }
  8.056% { opacity: 0; stroke-dashoffset: 72; }
  8.333% { opacity: 1; }
  10.556% { stroke-dashoffset: 0; }
  12.5% { stroke: #FFB020; }
  14.722% { stroke: #39424F; }
  37.222% { opacity: 1; }
  40% { opacity: 0.28; }
  92.222% { opacity: 0.28; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-l-e-r1-2 { animation-name: sa-l-e-r1-2; stroke-dasharray: 72 72; opacity: 0.28; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-l-e-r1-2 {
  0% { opacity: 0; stroke-dashoffset: 72; stroke: #FFB020; }
  13.333% { opacity: 0; stroke-dashoffset: 72; }
  13.611% { opacity: 1; }
  15.833% { stroke-dashoffset: 0; }
  17.778% { stroke: #FFB020; }
  20% { stroke: #39424F; }
  37.222% { opacity: 1; }
  40% { opacity: 0.28; }
  92.222% { opacity: 0.28; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-l-e-r1-3 { animation-name: sa-l-e-r1-3; stroke-dasharray: 72 72; opacity: 0.28; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-l-e-r1-3 {
  0% { opacity: 0; stroke-dashoffset: 72; stroke: #FFB020; }
  18.611% { opacity: 0; stroke-dashoffset: 72; }
  18.889% { opacity: 1; }
  21.111% { stroke-dashoffset: 0; }
  23.056% { stroke: #FFB020; }
  25.278% { stroke: #39424F; }
  37.222% { opacity: 1; }
  40% { opacity: 0.28; }
  92.222% { opacity: 0.28; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-l-e-r1-4 { animation-name: sa-l-e-r1-4; stroke-dasharray: 72 72; opacity: 0.28; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-l-e-r1-4 {
  0% { opacity: 0; stroke-dashoffset: 72; stroke: #FFB020; }
  23.889% { opacity: 0; stroke-dashoffset: 72; }
  24.167% { opacity: 1; }
  26.389% { stroke-dashoffset: 0; }
  28.333% { stroke: #FFB020; }
  30.556% { stroke: #39424F; }
  37.222% { opacity: 1; }
  40% { opacity: 0.28; }
  92.222% { opacity: 0.28; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-l-e-r1-5 { animation-name: sa-l-e-r1-5; stroke-dasharray: 72 72; opacity: 0.28; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-l-e-r1-5 {
  0% { opacity: 0; stroke-dashoffset: 72; stroke: #FFB020; }
  29.167% { opacity: 0; stroke-dashoffset: 72; }
  29.444% { opacity: 1; }
  31.667% { stroke-dashoffset: 0; }
  33.611% { stroke: #FFB020; }
  35.833% { stroke: #39424F; }
  37.222% { opacity: 1; }
  40% { opacity: 0.28; }
  92.222% { opacity: 0.28; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-l-e-r2-0 { animation-name: sa-l-e-r2-0; stroke-dasharray: 72 72; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-l-e-r2-0 {
  0% { opacity: 0; stroke-dashoffset: 72; stroke: #FFB020; }
  45% { opacity: 0; stroke-dashoffset: 72; }
  45.278% { opacity: 1; }
  47.5% { stroke-dashoffset: 0; }
  49.444% { stroke: #FFB020; }
  51.667% { stroke: #39424F; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-l-e-r2-1 { animation-name: sa-l-e-r2-1; stroke-dasharray: 72 72; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-l-e-r2-1 {
  0% { opacity: 0; stroke-dashoffset: 72; stroke: #FFB020; }
  50.278% { opacity: 0; stroke-dashoffset: 72; }
  50.556% { opacity: 1; }
  52.778% { stroke-dashoffset: 0; }
  54.722% { stroke: #FFB020; }
  56.944% { stroke: #39424F; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-l-e-r2-2 { animation-name: sa-l-e-r2-2; stroke-dasharray: 72 72; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-l-e-r2-2 {
  0% { opacity: 0; stroke-dashoffset: 72; stroke: #FFB020; }
  55.556% { opacity: 0; stroke-dashoffset: 72; }
  55.833% { opacity: 1; }
  58.056% { stroke-dashoffset: 0; }
  60% { stroke: #FFB020; }
  62.222% { stroke: #39424F; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-l-e-r2-3 { animation-name: sa-l-e-r2-3; stroke-dasharray: 72 72; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-l-e-r2-3 {
  0% { opacity: 0; stroke-dashoffset: 72; stroke: #FFB020; }
  60.833% { opacity: 0; stroke-dashoffset: 72; }
  61.111% { opacity: 1; }
  63.333% { stroke-dashoffset: 0; }
  65.278% { stroke: #FFB020; }
  67.5% { stroke: #39424F; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-l-e-r2-4 { animation-name: sa-l-e-r2-4; stroke-dasharray: 72 72; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes sa-l-e-r2-4 {
  0% { opacity: 0; stroke-dashoffset: 72; stroke: #FFB020; }
  66.111% { opacity: 0; stroke-dashoffset: 72; }
  66.389% { opacity: 1; }
  68.611% { stroke-dashoffset: 0; }
  70.556% { stroke: #FFB020; }
  72.778% { stroke: #39424F; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#sa-l-glow { animation-name: sa-l-glow; stroke-dasharray: 416 416; opacity: 1; stroke-dashoffset: 0; }
@keyframes sa-l-glow {
  0% { opacity: 0; stroke-dashoffset: 416; }
  71.389% { opacity: 0; stroke-dashoffset: 416; }
  71.667% { opacity: 1; }
  76.944% { stroke-dashoffset: 0; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
#sa-l-root2 { animation-name: sa-l-root2; opacity: 1; }
@keyframes sa-l-root2 {
  0% { opacity: 0; }
  38.889% { opacity: 0; }
  40.556% { opacity: 1; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-l-wall-hit { animation-name: sa-l-wall-hit; opacity: 0; }
@keyframes sa-l-wall-hit {
  0% { opacity: 0; }
  34.722% { opacity: 0; }
  35.556% { opacity: 1; }
  39.722% { opacity: 1; }
  41.944% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-l-r1-0 { animation-name: sa-l-r1-0; opacity: 0.28; }
@keyframes sa-l-r1-0 {
  0% { opacity: 0; }
  5.278% { opacity: 0; }
  6.278% { opacity: 1; }
  37.222% { opacity: 1; }
  40% { opacity: 0.28; }
  92.222% { opacity: 0.28; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-l-r1-0-v { animation-name: sa-l-r1-0-v; transform-box: view-box; transform-origin: 122px 44px; opacity: 1; transform: scale(1); }
@keyframes sa-l-r1-0-v {
  0% { opacity: 0; transform: scale(0.6); }
  7.222% { opacity: 0; transform: scale(0.6); }
  7.889% { transform: scale(1.15); }
  8.222% { opacity: 1; }
  8.667% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-l-r1-1 { animation-name: sa-l-r1-1; opacity: 0.28; }
@keyframes sa-l-r1-1 {
  0% { opacity: 0; }
  10.556% { opacity: 0; }
  11.556% { opacity: 1; }
  37.222% { opacity: 1; }
  40% { opacity: 0.28; }
  92.222% { opacity: 0.28; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-l-r1-1-v { animation-name: sa-l-r1-1-v; transform-box: view-box; transform-origin: 208px 44px; opacity: 1; transform: scale(1); }
@keyframes sa-l-r1-1-v {
  0% { opacity: 0; transform: scale(0.6); }
  12.5% { opacity: 0; transform: scale(0.6); }
  13.167% { transform: scale(1.15); }
  13.5% { opacity: 1; }
  13.944% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-l-r1-2 { animation-name: sa-l-r1-2; opacity: 0.28; }
@keyframes sa-l-r1-2 {
  0% { opacity: 0; }
  15.833% { opacity: 0; }
  16.833% { opacity: 1; }
  37.222% { opacity: 1; }
  40% { opacity: 0.28; }
  92.222% { opacity: 0.28; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-l-r1-2-v { animation-name: sa-l-r1-2-v; transform-box: view-box; transform-origin: 294px 44px; opacity: 1; transform: scale(1); }
@keyframes sa-l-r1-2-v {
  0% { opacity: 0; transform: scale(0.6); }
  17.778% { opacity: 0; transform: scale(0.6); }
  18.444% { transform: scale(1.15); }
  18.778% { opacity: 1; }
  19.222% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-l-r1-3 { animation-name: sa-l-r1-3; opacity: 0.28; }
@keyframes sa-l-r1-3 {
  0% { opacity: 0; }
  21.111% { opacity: 0; }
  22.111% { opacity: 1; }
  37.222% { opacity: 1; }
  40% { opacity: 0.28; }
  92.222% { opacity: 0.28; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-l-r1-3-v { animation-name: sa-l-r1-3-v; transform-box: view-box; transform-origin: 380px 44px; opacity: 1; transform: scale(1); }
@keyframes sa-l-r1-3-v {
  0% { opacity: 0; transform: scale(0.6); }
  23.056% { opacity: 0; transform: scale(0.6); }
  23.722% { transform: scale(1.15); }
  24.056% { opacity: 1; }
  24.5% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-l-r1-4 { animation-name: sa-l-r1-4; opacity: 0.28; }
@keyframes sa-l-r1-4 {
  0% { opacity: 0; }
  26.389% { opacity: 0; }
  27.389% { opacity: 1; }
  37.222% { opacity: 1; }
  40% { opacity: 0.28; }
  92.222% { opacity: 0.28; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-l-r1-4-v { animation-name: sa-l-r1-4-v; transform-box: view-box; transform-origin: 466px 44px; opacity: 1; transform: scale(1); }
@keyframes sa-l-r1-4-v {
  0% { opacity: 0; transform: scale(0.6); }
  28.333% { opacity: 0; transform: scale(0.6); }
  29% { transform: scale(1.15); }
  29.333% { opacity: 1; }
  29.778% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-l-r1-5 { animation-name: sa-l-r1-5; opacity: 0.28; }
@keyframes sa-l-r1-5 {
  0% { opacity: 0; }
  31.667% { opacity: 0; }
  32.667% { opacity: 1; }
  37.222% { opacity: 1; }
  40% { opacity: 0.28; }
  92.222% { opacity: 0.28; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-l-r1-5-v { animation-name: sa-l-r1-5-v; transform-box: view-box; transform-origin: 552px 44px; opacity: 1; transform: scale(1); }
@keyframes sa-l-r1-5-v {
  0% { opacity: 0; transform: scale(0.6); }
  33.611% { opacity: 0; transform: scale(0.6); }
  34.278% { transform: scale(1.15); }
  34.611% { opacity: 1; }
  35.056% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-l-r2-0 { animation-name: sa-l-r2-0; opacity: 1; }
@keyframes sa-l-r2-0 {
  0% { opacity: 0; }
  47.5% { opacity: 0; }
  48.5% { opacity: 1; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-l-r2-0-v { animation-name: sa-l-r2-0-v; transform-box: view-box; transform-origin: 122px 108px; opacity: 1; transform: scale(1); }
@keyframes sa-l-r2-0-v {
  0% { opacity: 0; transform: scale(0.6); }
  49.444% { opacity: 0; transform: scale(0.6); }
  50.111% { transform: scale(1.15); }
  50.444% { opacity: 1; }
  50.889% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-l-r2-1 { animation-name: sa-l-r2-1; opacity: 1; }
@keyframes sa-l-r2-1 {
  0% { opacity: 0; }
  52.778% { opacity: 0; }
  53.778% { opacity: 1; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-l-r2-1-v { animation-name: sa-l-r2-1-v; transform-box: view-box; transform-origin: 208px 108px; opacity: 1; transform: scale(1); }
@keyframes sa-l-r2-1-v {
  0% { opacity: 0; transform: scale(0.6); }
  54.722% { opacity: 0; transform: scale(0.6); }
  55.389% { transform: scale(1.15); }
  55.722% { opacity: 1; }
  56.167% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-l-r2-2 { animation-name: sa-l-r2-2; opacity: 1; }
@keyframes sa-l-r2-2 {
  0% { opacity: 0; }
  58.056% { opacity: 0; }
  59.056% { opacity: 1; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-l-r2-2-v { animation-name: sa-l-r2-2-v; transform-box: view-box; transform-origin: 294px 108px; opacity: 1; transform: scale(1); }
@keyframes sa-l-r2-2-v {
  0% { opacity: 0; transform: scale(0.6); }
  60% { opacity: 0; transform: scale(0.6); }
  60.667% { transform: scale(1.15); }
  61% { opacity: 1; }
  61.444% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-l-r2-3 { animation-name: sa-l-r2-3; opacity: 1; }
@keyframes sa-l-r2-3 {
  0% { opacity: 0; }
  63.333% { opacity: 0; }
  64.333% { opacity: 1; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-l-r2-3-v { animation-name: sa-l-r2-3-v; transform-box: view-box; transform-origin: 380px 108px; opacity: 1; transform: scale(1); }
@keyframes sa-l-r2-3-v {
  0% { opacity: 0; transform: scale(0.6); }
  65.278% { opacity: 0; transform: scale(0.6); }
  65.944% { transform: scale(1.15); }
  66.278% { opacity: 1; }
  66.722% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-l-r2-4 { animation-name: sa-l-r2-4; opacity: 1; }
@keyframes sa-l-r2-4 {
  0% { opacity: 0; }
  68.611% { opacity: 0; }
  69.611% { opacity: 1; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}
#sa-l-r2-4-v { animation-name: sa-l-r2-4-v; transform-box: view-box; transform-origin: 466px 108px; opacity: 1; transform: scale(1); }
@keyframes sa-l-r2-4-v {
  0% { opacity: 0; transform: scale(0.6); }
  70.556% { opacity: 0; transform: scale(0.6); }
  71.222% { transform: scale(1.15); }
  71.556% { opacity: 1; }
  72% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#sa-l-goal { animation-name: sa-l-goal; transform-box: view-box; transform-origin: 466px 108px; opacity: 1; transform: scale(1); }
@keyframes sa-l-goal {
  0% { opacity: 0; transform: scale(0.6); }
  76.944% { opacity: 0; transform: scale(0.6); }
  77.611% { transform: scale(1.15); }
  77.944% { opacity: 1; }
  78.389% { transform: scale(1); }
  96.111% { opacity: 1; }
  97.778% { opacity: 0; }
  100% { opacity: 0; transform: scale(1); }
}
#sa-l-count { animation-name: sa-l-count; opacity: 1; }
@keyframes sa-l-count {
  0% { opacity: 0; }
  78.611% { opacity: 0; }
  80.278% { opacity: 1; }
  92.222% { opacity: 1; }
  96.111% { opacity: 0; }
  100% { opacity: 0; }
}

/* The per-element #id rules set animation-name at (1,0,0), which a plain
   `animation: none` here would lose to -- hence !important. Without motion each
   element rests at its HOLD state: both searches finished, trajectory lit. */
@media (prefers-reduced-motion: reduce) {
  .search-anim .sa {
    animation: none !important;
  }
}
/* <<< SEARCH ABLATION <<< */

/* >>> VERIFIER ABLATION — generated by tools/make_verifier_ablation.py, do not edit by hand >>> */
.ver-anims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  .ver-anims {
    grid-template-columns: 1fr;
  }
}

.ver-anim .abl-anim__cap {
  min-height: 2.9em;
  align-content: flex-start;
}

.abl-legend .k-roll {
  background: transparent;
  box-shadow: none;
  border: 1.5px dashed #8892A6;
}

.ver-table {
  margin-top: 26px;
}

/* The K columns sit on a second header row, where "K <= 4" is that row's first
   cell and would pick up the global left alignment meant for row labels. */
.ver-table thead tr + tr th:first-child {
  text-align: right;
}

.ver-rules__title {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--head);
  margin: 26px 0 8px;
}

.ver-rules {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink);
}

.ver-rules li + li {
  margin-top: 6px;
}

/* Each animation loops on its own clock; timing is baked into each element's keyframes. */
.ver-anim .va {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.ver-anim--v .va { animation-duration: 14.45s; }
.ver-anim--u .va { animation-duration: 19.25s; }
.ver-anim--r .va { animation-duration: 21.35s; }

.ver-anim .va-glow {
  filter: drop-shadow(0 0 7px rgba(255, 176, 32, 0.4));
}

.ver-anim .va-goal {
  filter: drop-shadow(0 0 8px rgba(255, 176, 32, 0.55));
}

#va-v-e-A { animation-name: va-v-e-A; stroke-dasharray: 77.39 77.39; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-v-e-A {
  0% { opacity: 0; stroke-dashoffset: 77.39; stroke: #FFB020; }
  3.46% { opacity: 0; stroke-dashoffset: 77.39; }
  3.806% { opacity: 1; }
  6.574% { stroke-dashoffset: 0; }
  7.612% { stroke: #FFB020; }
  10.381% { stroke: #39424F; }
  90.311% { opacity: 1; }
  95.156% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-v-e-A2 { animation-name: va-v-e-A2; stroke-dasharray: 77.39 77.39; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-v-e-A2 {
  0% { opacity: 0; stroke-dashoffset: 77.39; stroke: #FFB020; }
  8.997% { opacity: 0; stroke-dashoffset: 77.39; }
  9.343% { opacity: 1; }
  12.111% { stroke-dashoffset: 0; }
  13.149% { stroke: #FFB020; }
  15.917% { stroke: #39424F; }
  70.242% { opacity: 1; }
  73.702% { opacity: 0.35; }
  90.311% { opacity: 0.35; }
  95.156% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-v-e-B { animation-name: va-v-e-B; stroke-dasharray: 66 66; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-v-e-B {
  0% { opacity: 0; stroke-dashoffset: 66; stroke: #FFB020; }
  22.145% { opacity: 0; stroke-dashoffset: 66; }
  22.491% { opacity: 1; }
  25.26% { stroke-dashoffset: 0; }
  26.298% { stroke: #FFB020; }
  29.066% { stroke: #39424F; }
  90.311% { opacity: 1; }
  95.156% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-v-e-B2 { animation-name: va-v-e-B2; stroke-dasharray: 90.477 90.477; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-v-e-B2 {
  0% { opacity: 0; stroke-dashoffset: 90.477; stroke: #FFB020; }
  27.682% { opacity: 0; stroke-dashoffset: 90.477; }
  28.028% { opacity: 1; }
  30.796% { stroke-dashoffset: 0; }
  31.834% { stroke: #FFB020; }
  34.602% { stroke: #39424F; }
  70.242% { opacity: 1; }
  73.702% { opacity: 0.35; }
  90.311% { opacity: 0.35; }
  95.156% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-v-e-C2 { animation-name: va-v-e-C2; stroke-dasharray: 80.377 80.377; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-v-e-C2 {
  0% { opacity: 0; stroke-dashoffset: 80.377; stroke: #FFB020; }
  40.83% { opacity: 0; stroke-dashoffset: 80.377; }
  41.176% { opacity: 1; }
  43.945% { stroke-dashoffset: 0; }
  44.983% { stroke: #FFB020; }
  47.751% { stroke: #39424F; }
  70.242% { opacity: 1; }
  73.702% { opacity: 0.35; }
  90.311% { opacity: 0.35; }
  95.156% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-v-e-C { animation-name: va-v-e-C; stroke-dasharray: 66 66; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-v-e-C {
  0% { opacity: 0; stroke-dashoffset: 66; stroke: #FFB020; }
  46.367% { opacity: 0; stroke-dashoffset: 66; }
  46.713% { opacity: 1; }
  49.481% { stroke-dashoffset: 0; }
  50.519% { stroke: #FFB020; }
  53.287% { stroke: #39424F; }
  90.311% { opacity: 1; }
  95.156% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-v-e-D { animation-name: va-v-e-D; stroke-dasharray: 66 66; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-v-e-D {
  0% { opacity: 0; stroke-dashoffset: 66; stroke: #FFB020; }
  59.516% { opacity: 0; stroke-dashoffset: 66; }
  59.862% { opacity: 1; }
  62.63% { stroke-dashoffset: 0; }
  63.668% { stroke: #FFB020; }
  66.436% { stroke: #39424F; }
  90.311% { opacity: 1; }
  95.156% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-v-e-D2 { animation-name: va-v-e-D2; stroke-dasharray: 90.477 90.477; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-v-e-D2 {
  0% { opacity: 0; stroke-dashoffset: 90.477; stroke: #FFB020; }
  65.052% { opacity: 0; stroke-dashoffset: 90.477; }
  65.398% { opacity: 1; }
  68.166% { stroke-dashoffset: 0; }
  69.204% { stroke: #FFB020; }
  70.242% { opacity: 1; }
  71.972% { stroke: #39424F; }
  73.702% { opacity: 0.35; }
  90.311% { opacity: 0.35; }
  95.156% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-v-up-A { animation-name: va-v-up-A; stroke-dasharray: 16 109.39; opacity: 0; stroke-dashoffset: 16; }
@keyframes va-v-up-A {
  0% { opacity: 0; stroke-dashoffset: -61.39; }
  14.533% { opacity: 0; stroke-dashoffset: -61.39; }
  14.74% { opacity: 1; }
  17.993% { opacity: 1; stroke-dashoffset: 16; }
  18.408% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 16; }
}
#va-v-sel-A { animation-name: va-v-sel-A; stroke-dasharray: 16 109.39; opacity: 0; stroke-dashoffset: -61.39; }
@keyframes va-v-sel-A {
  0% { opacity: 0; stroke-dashoffset: 16; }
  20.069% { opacity: 0; stroke-dashoffset: 16; }
  20.277% { opacity: 1; }
  21.799% { opacity: 1; stroke-dashoffset: -61.39; }
  22.215% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -61.39; }
}
#va-v-up-B { animation-name: va-v-up-B; stroke-dasharray: 16 189.39; opacity: 0; stroke-dashoffset: 16; }
@keyframes va-v-up-B {
  0% { opacity: 0; stroke-dashoffset: -141.39; }
  33.218% { opacity: 0; stroke-dashoffset: -141.39; }
  33.426% { opacity: 1; }
  36.678% { opacity: 1; stroke-dashoffset: 16; }
  37.093% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 16; }
}
#va-v-sel-B { animation-name: va-v-sel-B; stroke-dasharray: 16 189.39; opacity: 0; stroke-dashoffset: -141.39; }
@keyframes va-v-sel-B {
  0% { opacity: 0; stroke-dashoffset: 16; }
  38.669% { opacity: 0; stroke-dashoffset: 16; }
  38.877% { opacity: 1; }
  40.484% { opacity: 1; stroke-dashoffset: -141.39; }
  40.9% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -141.39; }
}
#va-v-up-C { animation-name: va-v-up-C; stroke-dasharray: 16 269.39; opacity: 0; stroke-dashoffset: 16; }
@keyframes va-v-up-C {
  0% { opacity: 0; stroke-dashoffset: -221.39; }
  51.903% { opacity: 0; stroke-dashoffset: -221.39; }
  52.111% { opacity: 1; }
  55.363% { opacity: 1; stroke-dashoffset: 16; }
  55.779% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 16; }
}
#va-v-sel-C { animation-name: va-v-sel-C; stroke-dasharray: 16 269.39; opacity: 0; stroke-dashoffset: -221.39; }
@keyframes va-v-sel-C {
  0% { opacity: 0; stroke-dashoffset: 16; }
  56.431% { opacity: 0; stroke-dashoffset: 16; }
  56.639% { opacity: 1; }
  59.17% { opacity: 1; stroke-dashoffset: -221.39; }
  59.585% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -221.39; }
}
#va-v-A { animation-name: va-v-A; opacity: 1; }
@keyframes va-v-A {
  0% { opacity: 0; }
  5.536% { opacity: 0; }
  6.782% { opacity: 1; }
  90.311% { opacity: 1; }
  95.156% { opacity: 0; }
  100% { opacity: 0; }
}
#va-v-A-v { animation-name: va-v-A-v; transform-box: view-box; transform-origin: 110px 70px; opacity: 1; transform: scale(1); }
@keyframes va-v-A-v {
  0% { opacity: 0; transform: scale(0.6); }
  7.612% { opacity: 0; transform: scale(0.6); }
  8.443% { transform: scale(1.15); }
  8.858% { opacity: 1; }
  9.412% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-v-A2 { animation-name: va-v-A2; opacity: 0.35; }
@keyframes va-v-A2 {
  0% { opacity: 0; }
  11.073% { opacity: 0; }
  12.318% { opacity: 1; }
  70.242% { opacity: 1; }
  73.702% { opacity: 0.35; }
  90.311% { opacity: 0.35; }
  95.156% { opacity: 0; }
  100% { opacity: 0; }
}
#va-v-A2-v { animation-name: va-v-A2-v; transform-box: view-box; transform-origin: 110px 140px; opacity: 1; transform: scale(1); }
@keyframes va-v-A2-v {
  0% { opacity: 0; transform: scale(0.6); }
  13.149% { opacity: 0; transform: scale(0.6); }
  13.979% { transform: scale(1.15); }
  14.394% { opacity: 1; }
  14.948% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-v-B { animation-name: va-v-B; opacity: 1; }
@keyframes va-v-B {
  0% { opacity: 0; }
  24.221% { opacity: 0; }
  25.467% { opacity: 1; }
  90.311% { opacity: 1; }
  95.156% { opacity: 0; }
  100% { opacity: 0; }
}
#va-v-B-v { animation-name: va-v-B-v; transform-box: view-box; transform-origin: 190px 70px; opacity: 1; transform: scale(1); }
@keyframes va-v-B-v {
  0% { opacity: 0; transform: scale(0.6); }
  26.298% { opacity: 0; transform: scale(0.6); }
  27.128% { transform: scale(1.15); }
  27.543% { opacity: 1; }
  28.097% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-v-B2 { animation-name: va-v-B2; opacity: 0.35; }
@keyframes va-v-B2 {
  0% { opacity: 0; }
  29.758% { opacity: 0; }
  31.003% { opacity: 1; }
  70.242% { opacity: 1; }
  73.702% { opacity: 0.35; }
  90.311% { opacity: 0.35; }
  95.156% { opacity: 0; }
  100% { opacity: 0; }
}
#va-v-B2-v { animation-name: va-v-B2-v; transform-box: view-box; transform-origin: 190px 125px; opacity: 1; transform: scale(1); }
@keyframes va-v-B2-v {
  0% { opacity: 0; transform: scale(0.6); }
  31.834% { opacity: 0; transform: scale(0.6); }
  32.664% { transform: scale(1.15); }
  33.08% { opacity: 1; }
  33.633% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-v-C2 { animation-name: va-v-C2; opacity: 0.35; }
@keyframes va-v-C2 {
  0% { opacity: 0; }
  42.907% { opacity: 0; }
  44.152% { opacity: 1; }
  70.242% { opacity: 1; }
  73.702% { opacity: 0.35; }
  90.311% { opacity: 0.35; }
  95.156% { opacity: 0; }
  100% { opacity: 0; }
}
#va-v-C2-v { animation-name: va-v-C2-v; transform-box: view-box; transform-origin: 270px 30px; opacity: 1; transform: scale(1); }
@keyframes va-v-C2-v {
  0% { opacity: 0; transform: scale(0.6); }
  44.983% { opacity: 0; transform: scale(0.6); }
  45.813% { transform: scale(1.15); }
  46.228% { opacity: 1; }
  46.782% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-v-C { animation-name: va-v-C; opacity: 1; }
@keyframes va-v-C {
  0% { opacity: 0; }
  48.443% { opacity: 0; }
  49.689% { opacity: 1; }
  90.311% { opacity: 1; }
  95.156% { opacity: 0; }
  100% { opacity: 0; }
}
#va-v-C-v { animation-name: va-v-C-v; transform-box: view-box; transform-origin: 270px 70px; opacity: 1; transform: scale(1); }
@keyframes va-v-C-v {
  0% { opacity: 0; transform: scale(0.6); }
  50.519% { opacity: 0; transform: scale(0.6); }
  51.349% { transform: scale(1.15); }
  51.765% { opacity: 1; }
  52.318% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-v-D { animation-name: va-v-D; opacity: 1; }
@keyframes va-v-D {
  0% { opacity: 0; }
  61.592% { opacity: 0; }
  62.837% { opacity: 1; }
  90.311% { opacity: 1; }
  95.156% { opacity: 0; }
  100% { opacity: 0; }
}
#va-v-D-v { animation-name: va-v-D-v; transform-box: view-box; transform-origin: 350px 70px; opacity: 1; transform: scale(1); }
@keyframes va-v-D-v {
  0% { opacity: 0; transform: scale(0.6); }
  63.668% { opacity: 0; transform: scale(0.6); }
  64.498% { transform: scale(1.15); }
  64.913% { opacity: 1; }
  65.467% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-v-D2 { animation-name: va-v-D2; opacity: 0.35; }
@keyframes va-v-D2 {
  0% { opacity: 0; }
  67.128% { opacity: 0; }
  68.374% { opacity: 1; }
  70.242% { opacity: 1; }
  73.702% { opacity: 0.35; }
  90.311% { opacity: 0.35; }
  95.156% { opacity: 0; }
  100% { opacity: 0; }
}
#va-v-D2-v { animation-name: va-v-D2-v; transform-box: view-box; transform-origin: 350px 125px; opacity: 1; transform: scale(1); }
@keyframes va-v-D2-v {
  0% { opacity: 0; transform: scale(0.6); }
  69.204% { opacity: 0; transform: scale(0.6); }
  70.035% { transform: scale(1.15); }
  70.45% { opacity: 1; }
  71.003% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-v-glow { animation-name: va-v-glow; stroke-dasharray: 317.39 317.39; opacity: 1; stroke-dashoffset: 0; }
@keyframes va-v-glow {
  0% { opacity: 0; stroke-dashoffset: 317.39; }
  70.242% { opacity: 0; stroke-dashoffset: 317.39; }
  70.588% { opacity: 1; }
  77.163% { stroke-dashoffset: 0; }
  90.311% { opacity: 1; }
  95.156% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
#va-v-goal { animation-name: va-v-goal; transform-box: view-box; transform-origin: 350px 70px; opacity: 1; transform: scale(1); }
@keyframes va-v-goal {
  0% { opacity: 0; transform: scale(0.6); }
  77.163% { opacity: 0; transform: scale(0.6); }
  77.993% { transform: scale(1.15); }
  78.408% { opacity: 1; }
  78.962% { transform: scale(1); }
  95.156% { opacity: 1; }
  97.232% { opacity: 0; }
  100% { opacity: 0; transform: scale(1); }
}
#va-v-time { animation-name: va-v-time; opacity: 1; }
@keyframes va-v-time {
  0% { opacity: 0; }
  79.239% { opacity: 0; }
  81.315% { opacity: 1; }
  90.311% { opacity: 1; }
  95.156% { opacity: 0; }
  100% { opacity: 0; }
}
#va-u-e-A { animation-name: va-u-e-A; stroke-dasharray: 80.377 80.377; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-u-e-A {
  0% { opacity: 0; stroke-dashoffset: 80.377; stroke: #FFB020; }
  2.597% { opacity: 0; stroke-dashoffset: 80.377; }
  2.857% { opacity: 1; }
  4.935% { stroke-dashoffset: 0; }
  5.714% { stroke: #FFB020; }
  7.792% { stroke: #39424F; }
  92.727% { opacity: 1; }
  96.364% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-u-e-A2 { animation-name: va-u-e-A2; stroke-dasharray: 83.573 83.573; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-u-e-A2 {
  0% { opacity: 0; stroke-dashoffset: 83.573; stroke: #FFB020; }
  6.753% { opacity: 0; stroke-dashoffset: 83.573; }
  7.013% { opacity: 1; }
  9.091% { stroke-dashoffset: 0; }
  9.87% { stroke: #FFB020; }
  11.948% { stroke: #39424F; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-u-e-E { animation-name: va-u-e-E; stroke-dasharray: 68.348 68.348; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-u-e-E {
  0% { opacity: 0; stroke-dashoffset: 68.348; stroke: #FFB020; }
  13.766% { opacity: 0; stroke-dashoffset: 68.348; }
  14.026% { opacity: 1; }
  16.104% { stroke-dashoffset: 0; }
  16.883% { stroke: #FFB020; }
  18.961% { stroke: #39424F; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-u-e-E2 { animation-name: va-u-e-E2; stroke-dasharray: 74.648 74.648; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-u-e-E2 {
  0% { opacity: 0; stroke-dashoffset: 74.648; stroke: #FFB020; }
  17.922% { opacity: 0; stroke-dashoffset: 74.648; }
  18.182% { opacity: 1; }
  20.26% { stroke-dashoffset: 0; }
  21.039% { stroke: #FFB020; }
  23.117% { stroke: #39424F; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-u-e-B { animation-name: va-u-e-B; stroke-dasharray: 72.194 72.194; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-u-e-B {
  0% { opacity: 0; stroke-dashoffset: 72.194; stroke: #FFB020; }
  24.935% { opacity: 0; stroke-dashoffset: 72.194; }
  25.195% { opacity: 1; }
  27.273% { stroke-dashoffset: 0; }
  28.052% { stroke: #FFB020; }
  30.13% { stroke: #39424F; }
  92.727% { opacity: 1; }
  96.364% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-u-e-B2 { animation-name: va-u-e-B2; stroke-dasharray: 72.194 72.194; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-u-e-B2 {
  0% { opacity: 0; stroke-dashoffset: 72.194; stroke: #FFB020; }
  29.091% { opacity: 0; stroke-dashoffset: 72.194; }
  29.351% { opacity: 1; }
  31.429% { stroke-dashoffset: 0; }
  32.208% { stroke: #FFB020; }
  34.286% { stroke: #39424F; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-u-e-F { animation-name: va-u-e-F; stroke-dasharray: 66 66; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-u-e-F {
  0% { opacity: 0; stroke-dashoffset: 66; stroke: #FFB020; }
  36.104% { opacity: 0; stroke-dashoffset: 66; }
  36.364% { opacity: 1; }
  38.442% { stroke-dashoffset: 0; }
  39.221% { stroke: #FFB020; }
  41.299% { stroke: #39424F; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-u-e-F2 { animation-name: va-u-e-F2; stroke-dasharray: 82.272 82.272; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-u-e-F2 {
  0% { opacity: 0; stroke-dashoffset: 82.272; stroke: #FFB020; }
  40.26% { opacity: 0; stroke-dashoffset: 82.272; }
  40.519% { opacity: 1; }
  42.597% { stroke-dashoffset: 0; }
  43.377% { stroke: #FFB020; }
  45.455% { stroke: #39424F; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-u-e-G { animation-name: va-u-e-G; stroke-dasharray: 66 66; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-u-e-G {
  0% { opacity: 0; stroke-dashoffset: 66; stroke: #FFB020; }
  47.273% { opacity: 0; stroke-dashoffset: 66; }
  47.532% { opacity: 1; }
  49.61% { stroke-dashoffset: 0; }
  50.39% { stroke: #FFB020; }
  52.468% { stroke: #39424F; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-u-e-G2 { animation-name: va-u-e-G2; stroke-dasharray: 82.272 82.272; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-u-e-G2 {
  0% { opacity: 0; stroke-dashoffset: 82.272; stroke: #FFB020; }
  51.429% { opacity: 0; stroke-dashoffset: 82.272; }
  51.688% { opacity: 1; }
  53.766% { stroke-dashoffset: 0; }
  54.545% { stroke: #FFB020; }
  56.623% { stroke: #39424F; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-u-e-C { animation-name: va-u-e-C; stroke-dasharray: 66.269 66.269; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-u-e-C {
  0% { opacity: 0; stroke-dashoffset: 66.269; stroke: #FFB020; }
  58.442% { opacity: 0; stroke-dashoffset: 66.269; }
  58.701% { opacity: 1; }
  60.779% { stroke-dashoffset: 0; }
  61.558% { stroke: #FFB020; }
  63.636% { stroke: #39424F; }
  92.727% { opacity: 1; }
  96.364% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-u-e-C2 { animation-name: va-u-e-C2; stroke-dasharray: 86.949 86.949; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-u-e-C2 {
  0% { opacity: 0; stroke-dashoffset: 86.949; stroke: #FFB020; }
  62.597% { opacity: 0; stroke-dashoffset: 86.949; }
  62.857% { opacity: 1; }
  64.935% { stroke-dashoffset: 0; }
  65.714% { stroke: #FFB020; }
  67.792% { stroke: #39424F; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-u-e-D { animation-name: va-u-e-D; stroke-dasharray: 66 66; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-u-e-D {
  0% { opacity: 0; stroke-dashoffset: 66; stroke: #FFB020; }
  69.61% { opacity: 0; stroke-dashoffset: 66; }
  69.87% { opacity: 1; }
  71.948% { stroke-dashoffset: 0; }
  72.727% { stroke: #FFB020; }
  74.805% { stroke: #39424F; }
  92.727% { opacity: 1; }
  96.364% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-u-e-D2 { animation-name: va-u-e-D2; stroke-dasharray: 83.573 83.573; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-u-e-D2 {
  0% { opacity: 0; stroke-dashoffset: 83.573; stroke: #FFB020; }
  73.766% { opacity: 0; stroke-dashoffset: 83.573; }
  74.026% { opacity: 1; }
  76.104% { stroke-dashoffset: 0; }
  76.883% { stroke: #FFB020; }
  77.662% { opacity: 1; }
  78.961% { stroke: #39424F; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-u-sel-A2 { animation-name: va-u-sel-A2; stroke-dasharray: 16 115.573; opacity: 0; stroke-dashoffset: -67.573; }
@keyframes va-u-sel-A2 {
  0% { opacity: 0; stroke-dashoffset: 16; }
  12.208% { opacity: 0; stroke-dashoffset: 16; }
  12.364% { opacity: 1; }
  13.506% { opacity: 1; stroke-dashoffset: -67.573; }
  13.818% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -67.573; }
}
#va-u-sel-A { animation-name: va-u-sel-A; stroke-dasharray: 16 112.377; opacity: 0; stroke-dashoffset: -64.377; }
@keyframes va-u-sel-A {
  0% { opacity: 0; stroke-dashoffset: 16; }
  23.377% { opacity: 0; stroke-dashoffset: 16; }
  23.532% { opacity: 1; }
  24.675% { opacity: 1; stroke-dashoffset: -64.377; }
  24.987% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -64.377; }
}
#va-u-sel-E { animation-name: va-u-sel-E; stroke-dasharray: 16 197.921; opacity: 0; stroke-dashoffset: -149.921; }
@keyframes va-u-sel-E {
  0% { opacity: 0; stroke-dashoffset: 16; }
  34.408% { opacity: 0; stroke-dashoffset: 16; }
  34.563% { opacity: 1; }
  35.844% { opacity: 1; stroke-dashoffset: -149.921; }
  36.156% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -149.921; }
}
#va-u-sel-F { animation-name: va-u-sel-F; stroke-dasharray: 16 277.921; opacity: 0; stroke-dashoffset: -229.921; }
@keyframes va-u-sel-F {
  0% { opacity: 0; stroke-dashoffset: 16; }
  44.884% { opacity: 0; stroke-dashoffset: 16; }
  45.04% { opacity: 1; }
  47.013% { opacity: 1; stroke-dashoffset: -229.921; }
  47.325% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -229.921; }
}
#va-u-sel-B { animation-name: va-u-sel-B; stroke-dasharray: 16 198.571; opacity: 0; stroke-dashoffset: -150.571; }
@keyframes va-u-sel-B {
  0% { opacity: 0; stroke-dashoffset: 16; }
  56.74% { opacity: 0; stroke-dashoffset: 16; }
  56.895% { opacity: 1; }
  58.182% { opacity: 1; stroke-dashoffset: -150.571; }
  58.494% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -150.571; }
}
#va-u-sel-C { animation-name: va-u-sel-C; stroke-dasharray: 16 278.84; opacity: 0; stroke-dashoffset: -230.84; }
@keyframes va-u-sel-C {
  0% { opacity: 0; stroke-dashoffset: 16; }
  67.214% { opacity: 0; stroke-dashoffset: 16; }
  67.369% { opacity: 1; }
  69.351% { opacity: 1; stroke-dashoffset: -230.84; }
  69.662% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -230.84; }
}
#va-u-A { animation-name: va-u-A; opacity: 1; }
@keyframes va-u-A {
  0% { opacity: 0; }
  4.156% { opacity: 0; }
  5.091% { opacity: 1; }
  92.727% { opacity: 1; }
  96.364% { opacity: 0; }
  100% { opacity: 0; }
}
#va-u-A-v { animation-name: va-u-A-v; transform-box: view-box; transform-origin: 110px 65px; opacity: 1; transform: scale(1); }
@keyframes va-u-A-v {
  0% { opacity: 0; transform: scale(0.6); }
  5.714% { opacity: 0; transform: scale(0.6); }
  6.338% { transform: scale(1.15); }
  6.649% { opacity: 1; }
  7.065% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-u-A2 { animation-name: va-u-A2; opacity: 0.35; }
@keyframes va-u-A2 {
  0% { opacity: 0; }
  8.312% { opacity: 0; }
  9.247% { opacity: 1; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; }
}
#va-u-A2-v { animation-name: va-u-A2-v; transform-box: view-box; transform-origin: 110px 150px; opacity: 1; transform: scale(1); }
@keyframes va-u-A2-v {
  0% { opacity: 0; transform: scale(0.6); }
  9.87% { opacity: 0; transform: scale(0.6); }
  10.494% { transform: scale(1.15); }
  10.805% { opacity: 1; }
  11.221% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-u-E { animation-name: va-u-E; opacity: 0.35; }
@keyframes va-u-E {
  0% { opacity: 0; }
  15.325% { opacity: 0; }
  16.26% { opacity: 1; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; }
}
#va-u-E-v { animation-name: va-u-E-v; transform-box: view-box; transform-origin: 190px 135px; opacity: 1; transform: scale(1); }
@keyframes va-u-E-v {
  0% { opacity: 0; transform: scale(0.6); }
  16.883% { opacity: 0; transform: scale(0.6); }
  17.506% { transform: scale(1.15); }
  17.818% { opacity: 1; }
  18.234% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-u-E2 { animation-name: va-u-E2; opacity: 0.35; }
@keyframes va-u-E2 {
  0% { opacity: 0; }
  19.481% { opacity: 0; }
  20.416% { opacity: 1; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; }
}
#va-u-E2-v { animation-name: va-u-E2-v; transform-box: view-box; transform-origin: 190px 180px; opacity: 1; transform: scale(1); }
@keyframes va-u-E2-v {
  0% { opacity: 0; transform: scale(0.6); }
  21.039% { opacity: 0; transform: scale(0.6); }
  21.662% { transform: scale(1.15); }
  21.974% { opacity: 1; }
  22.39% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-u-B { animation-name: va-u-B; opacity: 1; }
@keyframes va-u-B {
  0% { opacity: 0; }
  26.494% { opacity: 0; }
  27.429% { opacity: 1; }
  92.727% { opacity: 1; }
  96.364% { opacity: 0; }
  100% { opacity: 0; }
}
#va-u-B-v { animation-name: va-u-B-v; transform-box: view-box; transform-origin: 190px 90px; opacity: 1; transform: scale(1); }
@keyframes va-u-B-v {
  0% { opacity: 0; transform: scale(0.6); }
  28.052% { opacity: 0; transform: scale(0.6); }
  28.675% { transform: scale(1.15); }
  28.987% { opacity: 1; }
  29.403% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-u-B2 { animation-name: va-u-B2; opacity: 0.35; }
@keyframes va-u-B2 {
  0% { opacity: 0; }
  30.649% { opacity: 0; }
  31.584% { opacity: 1; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; }
}
#va-u-B2-v { animation-name: va-u-B2-v; transform-box: view-box; transform-origin: 190px 40px; opacity: 1; transform: scale(1); }
@keyframes va-u-B2-v {
  0% { opacity: 0; transform: scale(0.6); }
  32.208% { opacity: 0; transform: scale(0.6); }
  32.831% { transform: scale(1.15); }
  33.143% { opacity: 1; }
  33.558% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-u-F { animation-name: va-u-F; opacity: 0.35; }
@keyframes va-u-F {
  0% { opacity: 0; }
  37.662% { opacity: 0; }
  38.597% { opacity: 1; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; }
}
#va-u-F-v { animation-name: va-u-F-v; transform-box: view-box; transform-origin: 270px 135px; opacity: 1; transform: scale(1); }
@keyframes va-u-F-v {
  0% { opacity: 0; transform: scale(0.6); }
  39.221% { opacity: 0; transform: scale(0.6); }
  39.844% { transform: scale(1.15); }
  40.156% { opacity: 1; }
  40.571% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-u-F2 { animation-name: va-u-F2; opacity: 0.35; }
@keyframes va-u-F2 {
  0% { opacity: 0; }
  41.818% { opacity: 0; }
  42.753% { opacity: 1; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; }
}
#va-u-F2-v { animation-name: va-u-F2-v; transform-box: view-box; transform-origin: 270px 178px; opacity: 1; transform: scale(1); }
@keyframes va-u-F2-v {
  0% { opacity: 0; transform: scale(0.6); }
  43.377% { opacity: 0; transform: scale(0.6); }
  44% { transform: scale(1.15); }
  44.312% { opacity: 1; }
  44.727% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-u-G { animation-name: va-u-G; opacity: 0.35; }
@keyframes va-u-G {
  0% { opacity: 0; }
  48.831% { opacity: 0; }
  49.766% { opacity: 1; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; }
}
#va-u-G-v { animation-name: va-u-G-v; transform-box: view-box; transform-origin: 350px 135px; opacity: 1; transform: scale(1); }
@keyframes va-u-G-v {
  0% { opacity: 0; transform: scale(0.6); }
  50.39% { opacity: 0; transform: scale(0.6); }
  51.013% { transform: scale(1.15); }
  51.325% { opacity: 1; }
  51.74% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-u-G2 { animation-name: va-u-G2; opacity: 0.35; }
@keyframes va-u-G2 {
  0% { opacity: 0; }
  52.987% { opacity: 0; }
  53.922% { opacity: 1; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; }
}
#va-u-G2-v { animation-name: va-u-G2-v; transform-box: view-box; transform-origin: 350px 178px; opacity: 1; transform: scale(1); }
@keyframes va-u-G2-v {
  0% { opacity: 0; transform: scale(0.6); }
  54.545% { opacity: 0; transform: scale(0.6); }
  55.169% { transform: scale(1.15); }
  55.481% { opacity: 1; }
  55.896% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-u-C { animation-name: va-u-C; opacity: 1; }
@keyframes va-u-C {
  0% { opacity: 0; }
  60% { opacity: 0; }
  60.935% { opacity: 1; }
  92.727% { opacity: 1; }
  96.364% { opacity: 0; }
  100% { opacity: 0; }
}
#va-u-C-v { animation-name: va-u-C-v; transform-box: view-box; transform-origin: 270px 85px; opacity: 1; transform: scale(1); }
@keyframes va-u-C-v {
  0% { opacity: 0; transform: scale(0.6); }
  61.558% { opacity: 0; transform: scale(0.6); }
  62.182% { transform: scale(1.15); }
  62.494% { opacity: 1; }
  62.909% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-u-C2 { animation-name: va-u-C2; opacity: 0.35; }
@keyframes va-u-C2 {
  0% { opacity: 0; }
  64.156% { opacity: 0; }
  65.091% { opacity: 1; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; }
}
#va-u-C2-v { animation-name: va-u-C2-v; transform-box: view-box; transform-origin: 270px 40px; opacity: 1; transform: scale(1); }
@keyframes va-u-C2-v {
  0% { opacity: 0; transform: scale(0.6); }
  65.714% { opacity: 0; transform: scale(0.6); }
  66.338% { transform: scale(1.15); }
  66.649% { opacity: 1; }
  67.065% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-u-D { animation-name: va-u-D; opacity: 1; }
@keyframes va-u-D {
  0% { opacity: 0; }
  71.169% { opacity: 0; }
  72.104% { opacity: 1; }
  92.727% { opacity: 1; }
  96.364% { opacity: 0; }
  100% { opacity: 0; }
}
#va-u-D-v { animation-name: va-u-D-v; transform-box: view-box; transform-origin: 350px 85px; opacity: 1; transform: scale(1); }
@keyframes va-u-D-v {
  0% { opacity: 0; transform: scale(0.6); }
  72.727% { opacity: 0; transform: scale(0.6); }
  73.351% { transform: scale(1.15); }
  73.662% { opacity: 1; }
  74.078% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-u-D2 { animation-name: va-u-D2; opacity: 0.35; }
@keyframes va-u-D2 {
  0% { opacity: 0; }
  75.325% { opacity: 0; }
  76.26% { opacity: 1; }
  77.662% { opacity: 1; }
  80.26% { opacity: 0.35; }
  92.727% { opacity: 0.35; }
  96.364% { opacity: 0; }
  100% { opacity: 0; }
}
#va-u-D2-v { animation-name: va-u-D2-v; transform-box: view-box; transform-origin: 350px 40px; opacity: 1; transform: scale(1); }
@keyframes va-u-D2-v {
  0% { opacity: 0; transform: scale(0.6); }
  76.883% { opacity: 0; transform: scale(0.6); }
  77.506% { transform: scale(1.15); }
  77.818% { opacity: 1; }
  78.234% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-u-glow { animation-name: va-u-glow; stroke-dasharray: 326.84 326.84; opacity: 1; stroke-dashoffset: 0; }
@keyframes va-u-glow {
  0% { opacity: 0; stroke-dashoffset: 326.84; }
  77.662% { opacity: 0; stroke-dashoffset: 326.84; }
  77.922% { opacity: 1; }
  82.857% { stroke-dashoffset: 0; }
  92.727% { opacity: 1; }
  96.364% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
#va-u-goal { animation-name: va-u-goal; transform-box: view-box; transform-origin: 350px 85px; opacity: 1; transform: scale(1); }
@keyframes va-u-goal {
  0% { opacity: 0; transform: scale(0.6); }
  82.857% { opacity: 0; transform: scale(0.6); }
  83.481% { transform: scale(1.15); }
  83.792% { opacity: 1; }
  84.208% { transform: scale(1); }
  96.364% { opacity: 1; }
  97.922% { opacity: 0; }
  100% { opacity: 0; transform: scale(1); }
}
#va-u-time { animation-name: va-u-time; opacity: 1; }
@keyframes va-u-time {
  0% { opacity: 0; }
  84.416% { opacity: 0; }
  85.974% { opacity: 1; }
  92.727% { opacity: 1; }
  96.364% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-e-A { animation-name: va-r-e-A; stroke-dasharray: 80.377 80.377; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-r-e-A {
  0% { opacity: 0; stroke-dashoffset: 80.377; stroke: #FFB020; }
  2.342% { opacity: 0; stroke-dashoffset: 80.377; }
  2.576% { opacity: 1; }
  4.45% { stroke-dashoffset: 0; }
  5.152% { stroke: #FFB020; }
  7.026% { stroke: #39424F; }
  79.859% { opacity: 1; }
  82.201% { opacity: 0.35; }
  93.443% { opacity: 0.35; }
  96.721% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-r-e-A2 { animation-name: va-r-e-A2; stroke-dasharray: 83.573 83.573; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-r-e-A2 {
  0% { opacity: 0; stroke-dashoffset: 83.573; stroke: #FFB020; }
  19.672% { opacity: 0; stroke-dashoffset: 83.573; }
  19.906% { opacity: 1; }
  21.78% { stroke-dashoffset: 0; }
  22.482% { stroke: #FFB020; }
  24.356% { stroke: #39424F; }
  93.443% { opacity: 1; }
  96.721% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-r-e-B2 { animation-name: va-r-e-B2; stroke-dasharray: 77.39 77.39; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-r-e-B2 {
  0% { opacity: 0; stroke-dashoffset: 77.39; stroke: #FFB020; }
  39.11% { opacity: 0; stroke-dashoffset: 77.39; }
  39.344% { opacity: 1; }
  41.218% { stroke-dashoffset: 0; }
  41.92% { stroke: #FFB020; }
  43.794% { stroke: #39424F; }
  79.859% { opacity: 1; }
  82.201% { opacity: 0.35; }
  93.443% { opacity: 0.35; }
  96.721% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-r-e-B { animation-name: va-r-e-B; stroke-dasharray: 77.39 77.39; opacity: 0.35; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-r-e-B {
  0% { opacity: 0; stroke-dashoffset: 77.39; stroke: #FFB020; }
  52.693% { opacity: 0; stroke-dashoffset: 77.39; }
  52.927% { opacity: 1; }
  54.801% { stroke-dashoffset: 0; }
  55.504% { stroke: #FFB020; }
  57.377% { stroke: #39424F; }
  79.859% { opacity: 1; }
  82.201% { opacity: 0.35; }
  93.443% { opacity: 0.35; }
  96.721% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-r-e-E { animation-name: va-r-e-E; stroke-dasharray: 66 66; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes va-r-e-E {
  0% { opacity: 0; stroke-dashoffset: 66; stroke: #FFB020; }
  68.384% { opacity: 0; stroke-dashoffset: 66; }
  68.618% { opacity: 1; }
  70.492% { stroke-dashoffset: 0; }
  71.194% { stroke: #FFB020; }
  73.068% { stroke: #39424F; }
  93.443% { opacity: 1; }
  96.721% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#va-r-roll-A-0 { animation-name: va-r-roll-A-0; opacity: 0; }
@keyframes va-r-roll-A-0 {
  0% { opacity: 0; }
  6.089% { opacity: 0; }
  6.932% { opacity: 1; }
  19.204% { opacity: 1; }
  20.609% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-roll-A-1 { animation-name: va-r-roll-A-1; opacity: 0; }
@keyframes va-r-roll-A-1 {
  0% { opacity: 0; }
  9.836% { opacity: 0; }
  10.679% { opacity: 1; }
  19.204% { opacity: 1; }
  20.609% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-roll-A-2 { animation-name: va-r-roll-A-2; opacity: 0; }
@keyframes va-r-roll-A-2 {
  0% { opacity: 0; }
  13.583% { opacity: 0; }
  14.426% { opacity: 1; }
  19.204% { opacity: 1; }
  20.609% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-roll-A2-0 { animation-name: va-r-roll-A2-0; opacity: 0; }
@keyframes va-r-roll-A2-0 {
  0% { opacity: 0; }
  23.419% { opacity: 0; }
  24.262% { opacity: 1; }
  36.534% { opacity: 1; }
  37.939% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-roll-A2-1 { animation-name: va-r-roll-A2-1; opacity: 0; }
@keyframes va-r-roll-A2-1 {
  0% { opacity: 0; }
  27.166% { opacity: 0; }
  28.009% { opacity: 1; }
  36.534% { opacity: 1; }
  37.939% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-roll-A2-2 { animation-name: va-r-roll-A2-2; opacity: 0; }
@keyframes va-r-roll-A2-2 {
  0% { opacity: 0; }
  30.913% { opacity: 0; }
  31.756% { opacity: 1; }
  36.534% { opacity: 1; }
  37.939% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-roll-B2-0 { animation-name: va-r-roll-B2-0; opacity: 0; }
@keyframes va-r-roll-B2-0 {
  0% { opacity: 0; }
  42.857% { opacity: 0; }
  43.7% { opacity: 1; }
  52.225% { opacity: 1; }
  53.63% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-roll-B2-1 { animation-name: va-r-roll-B2-1; opacity: 0; }
@keyframes va-r-roll-B2-1 {
  0% { opacity: 0; }
  46.604% { opacity: 0; }
  47.447% { opacity: 1; }
  52.225% { opacity: 1; }
  53.63% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-roll-B-0 { animation-name: va-r-roll-B-0; opacity: 0; }
@keyframes va-r-roll-B-0 {
  0% { opacity: 0; }
  56.44% { opacity: 0; }
  57.283% { opacity: 1; }
  65.808% { opacity: 1; }
  67.213% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-roll-B-1 { animation-name: va-r-roll-B-1; opacity: 0; }
@keyframes va-r-roll-B-1 {
  0% { opacity: 0; }
  60.187% { opacity: 0; }
  61.03% { opacity: 1; }
  65.808% { opacity: 1; }
  67.213% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-roll-E-0 { animation-name: va-r-roll-E-0; opacity: 1; }
@keyframes va-r-roll-E-0 {
  0% { opacity: 0; }
  72.131% { opacity: 0; }
  73.302% { opacity: 1; }
  93.443% { opacity: 1; }
  96.721% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-roll-E-1 { animation-name: va-r-roll-E-1; opacity: 1; }
@keyframes va-r-roll-E-1 {
  0% { opacity: 0; }
  75.878% { opacity: 0; }
  77.049% { opacity: 1; }
  93.443% { opacity: 1; }
  96.721% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-up-A { animation-name: va-r-up-A; stroke-dasharray: 16 112.377; opacity: 0; stroke-dashoffset: 16; }
@keyframes va-r-up-A {
  0% { opacity: 0; stroke-dashoffset: -64.377; }
  16.862% { opacity: 0; stroke-dashoffset: -64.377; }
  17.002% { opacity: 1; }
  19.204% { opacity: 1; stroke-dashoffset: 16; }
  19.485% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 16; }
}
#va-r-up-A2 { animation-name: va-r-up-A2; stroke-dasharray: 16 115.573; opacity: 0; stroke-dashoffset: 16; }
@keyframes va-r-up-A2 {
  0% { opacity: 0; stroke-dashoffset: -67.573; }
  34.192% { opacity: 0; stroke-dashoffset: -67.573; }
  34.333% { opacity: 1; }
  36.534% { opacity: 1; stroke-dashoffset: 16; }
  36.815% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 16; }
}
#va-r-sel-A { animation-name: va-r-sel-A; stroke-dasharray: 16 112.377; opacity: 0; stroke-dashoffset: -64.377; }
@keyframes va-r-sel-A {
  0% { opacity: 0; stroke-dashoffset: 16; }
  37.705% { opacity: 0; stroke-dashoffset: 16; }
  37.845% { opacity: 1; }
  38.876% { opacity: 1; stroke-dashoffset: -64.377; }
  39.157% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -64.377; }
}
#va-r-up-B2 { animation-name: va-r-up-B2; stroke-dasharray: 16 203.767; opacity: 0; stroke-dashoffset: 16; }
@keyframes va-r-up-B2 {
  0% { opacity: 0; stroke-dashoffset: -155.767; }
  49.883% { opacity: 0; stroke-dashoffset: -155.767; }
  50.023% { opacity: 1; }
  52.225% { opacity: 1; stroke-dashoffset: 16; }
  52.506% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 16; }
}
#va-r-up-B { animation-name: va-r-up-B; stroke-dasharray: 16 203.767; opacity: 0; stroke-dashoffset: 16; }
@keyframes va-r-up-B {
  0% { opacity: 0; stroke-dashoffset: -155.767; }
  63.466% { opacity: 0; stroke-dashoffset: -155.767; }
  63.607% { opacity: 1; }
  65.808% { opacity: 1; stroke-dashoffset: 16; }
  66.089% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 16; }
}
#va-r-sel-A2 { animation-name: va-r-sel-A2; stroke-dasharray: 16 115.573; opacity: 0; stroke-dashoffset: -67.573; }
@keyframes va-r-sel-A2 {
  0% { opacity: 0; stroke-dashoffset: 16; }
  66.979% { opacity: 0; stroke-dashoffset: 16; }
  67.119% { opacity: 1; }
  68.15% { opacity: 1; stroke-dashoffset: -67.573; }
  68.431% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -67.573; }
}
#va-r-A { animation-name: va-r-A; opacity: 0.35; }
@keyframes va-r-A {
  0% { opacity: 0; }
  3.747% { opacity: 0; }
  4.59% { opacity: 1; }
  79.859% { opacity: 1; }
  82.201% { opacity: 0.35; }
  93.443% { opacity: 0.35; }
  96.721% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-A-v { animation-name: va-r-A-v; transform-box: view-box; transform-origin: 110px 65px; opacity: 1; transform: scale(1); }
@keyframes va-r-A-v {
  0% { opacity: 0; transform: scale(0.6); }
  5.152% { opacity: 0; transform: scale(0.6); }
  5.714% { transform: scale(1.15); }
  5.995% { opacity: 1; }
  6.37% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-r-A2 { animation-name: va-r-A2; opacity: 1; }
@keyframes va-r-A2 {
  0% { opacity: 0; }
  21.077% { opacity: 0; }
  21.92% { opacity: 1; }
  93.443% { opacity: 1; }
  96.721% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-A2-v { animation-name: va-r-A2-v; transform-box: view-box; transform-origin: 110px 150px; opacity: 1; transform: scale(1); }
@keyframes va-r-A2-v {
  0% { opacity: 0; transform: scale(0.6); }
  22.482% { opacity: 0; transform: scale(0.6); }
  23.044% { transform: scale(1.15); }
  23.326% { opacity: 1; }
  23.7% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-r-B2 { animation-name: va-r-B2; opacity: 0.35; }
@keyframes va-r-B2 {
  0% { opacity: 0; }
  40.515% { opacity: 0; }
  41.358% { opacity: 1; }
  79.859% { opacity: 1; }
  82.201% { opacity: 0.35; }
  93.443% { opacity: 0.35; }
  96.721% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-B2-v { animation-name: va-r-B2-v; transform-box: view-box; transform-origin: 190px 30px; opacity: 1; transform: scale(1); }
@keyframes va-r-B2-v {
  0% { opacity: 0; transform: scale(0.6); }
  41.92% { opacity: 0; transform: scale(0.6); }
  42.482% { transform: scale(1.15); }
  42.763% { opacity: 1; }
  43.138% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-r-B { animation-name: va-r-B; opacity: 0.35; }
@keyframes va-r-B {
  0% { opacity: 0; }
  54.098% { opacity: 0; }
  54.941% { opacity: 1; }
  79.859% { opacity: 1; }
  82.201% { opacity: 0.35; }
  93.443% { opacity: 0.35; }
  96.721% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-B-v { animation-name: va-r-B-v; transform-box: view-box; transform-origin: 190px 100px; opacity: 1; transform: scale(1); }
@keyframes va-r-B-v {
  0% { opacity: 0; transform: scale(0.6); }
  55.504% { opacity: 0; transform: scale(0.6); }
  56.066% { transform: scale(1.15); }
  56.347% { opacity: 1; }
  56.721% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-r-E { animation-name: va-r-E; opacity: 1; }
@keyframes va-r-E {
  0% { opacity: 0; }
  69.789% { opacity: 0; }
  70.632% { opacity: 1; }
  93.443% { opacity: 1; }
  96.721% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-E-v { animation-name: va-r-E-v; transform-box: view-box; transform-origin: 190px 150px; opacity: 1; transform: scale(1); }
@keyframes va-r-E-v {
  0% { opacity: 0; transform: scale(0.6); }
  71.194% { opacity: 0; transform: scale(0.6); }
  71.756% { transform: scale(1.15); }
  72.037% { opacity: 1; }
  72.412% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#va-r-val-A { animation-name: va-r-val-A; opacity: 0.35; }
@keyframes va-r-val-A {
  0% { opacity: 0; }
  19.204% { opacity: 0; }
  20.047% { opacity: 1; }
  79.859% { opacity: 1; }
  82.201% { opacity: 0.35; }
  93.443% { opacity: 0.35; }
  96.721% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-val-A2 { animation-name: va-r-val-A2; opacity: 1; }
@keyframes va-r-val-A2 {
  0% { opacity: 0; }
  36.534% { opacity: 0; }
  37.377% { opacity: 1; }
  93.443% { opacity: 1; }
  96.721% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-val-B2 { animation-name: va-r-val-B2; opacity: 0.35; }
@keyframes va-r-val-B2 {
  0% { opacity: 0; }
  52.225% { opacity: 0; }
  53.068% { opacity: 1; }
  79.859% { opacity: 1; }
  82.201% { opacity: 0.35; }
  93.443% { opacity: 0.35; }
  96.721% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-val-B { animation-name: va-r-val-B; opacity: 0.35; }
@keyframes va-r-val-B {
  0% { opacity: 0; }
  65.808% { opacity: 0; }
  66.651% { opacity: 1; }
  79.859% { opacity: 1; }
  82.201% { opacity: 0.35; }
  93.443% { opacity: 0.35; }
  96.721% { opacity: 0; }
  100% { opacity: 0; }
}
#va-r-glow { animation-name: va-r-glow; stroke-dasharray: 323.573 323.573; opacity: 1; stroke-dashoffset: 0; }
@keyframes va-r-glow {
  0% { opacity: 0; stroke-dashoffset: 323.573; }
  79.859% { opacity: 0; stroke-dashoffset: 323.573; }
  80.094% { opacity: 1; }
  84.543% { stroke-dashoffset: 0; }
  93.443% { opacity: 1; }
  96.721% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
#va-r-goal { animation-name: va-r-goal; transform-box: view-box; transform-origin: 350px 150px; opacity: 1; transform: scale(1); }
@keyframes va-r-goal {
  0% { opacity: 0; transform: scale(0.6); }
  84.543% { opacity: 0; transform: scale(0.6); }
  85.105% { transform: scale(1.15); }
  85.386% { opacity: 1; }
  85.761% { transform: scale(1); }
  96.721% { opacity: 1; }
  98.126% { opacity: 0; }
  100% { opacity: 0; transform: scale(1); }
}
#va-r-time { animation-name: va-r-time; opacity: 1; }
@keyframes va-r-time {
  0% { opacity: 0; }
  85.948% { opacity: 0; }
  87.354% { opacity: 1; }
  93.443% { opacity: 1; }
  96.721% { opacity: 0; }
  100% { opacity: 0; }
}

/* Without motion each element rests at its clock's HOLD state: search finished, trajectory lit. */
@media (prefers-reduced-motion: reduce) {
  .ver-anim .va {
    animation: none !important;
  }
}
/* <<< VERIFIER ABLATION <<< */

/* >>> MEMORY ABLATION — generated by tools/make_memory_ablation.py, do not edit by hand >>> */
.mem-anim .va {
  animation-duration: 17.4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.mem-anim .va-glow {
  filter: drop-shadow(0 0 7px rgba(255, 176, 32, 0.4));
}

.mem-anim .va-goal {
  filter: drop-shadow(0 0 8px rgba(255, 176, 32, 0.55));
}

.mem-table {
  margin-top: 22px;
}

#ma-instr-a { animation-name: ma-instr-a; opacity: 1; }
@keyframes ma-instr-a {
  0% { opacity: 0; }
  2.299% { opacity: 0; }
  3.333% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-e1 { animation-name: ma-e1; stroke-dasharray: 76 76; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes ma-e1 {
  0% { opacity: 0; stroke-dashoffset: 76; stroke: #FFB020; }
  4.023% { opacity: 0; stroke-dashoffset: 76; }
  4.31% { opacity: 1; }
  6.609% { stroke-dashoffset: 0; }
  7.471% { stroke: #FFB020; }
  9.77% { stroke: #39424F; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#ma-e2 { animation-name: ma-e2; stroke-dasharray: 76 76; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes ma-e2 {
  0% { opacity: 0; stroke-dashoffset: 76; stroke: #FFB020; }
  9.77% { opacity: 0; stroke-dashoffset: 76; }
  10.057% { opacity: 1; }
  12.356% { stroke-dashoffset: 0; }
  13.218% { stroke: #FFB020; }
  15.517% { stroke: #39424F; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#ma-n1 { animation-name: ma-n1; opacity: 1; }
@keyframes ma-n1 {
  0% { opacity: 0; }
  5.747% { opacity: 0; }
  6.782% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-n1-v { animation-name: ma-n1-v; transform-box: view-box; transform-origin: 135px 150px; opacity: 1; transform: scale(1); }
@keyframes ma-n1-v {
  0% { opacity: 0; transform: scale(0.6); }
  7.471% { opacity: 0; transform: scale(0.6); }
  8.161% { transform: scale(1.15); }
  8.506% { opacity: 1; }
  8.966% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#ma-n2 { animation-name: ma-n2; opacity: 1; }
@keyframes ma-n2 {
  0% { opacity: 0; }
  11.494% { opacity: 0; }
  12.529% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-n2-v { animation-name: ma-n2-v; transform-box: view-box; transform-origin: 225px 150px; opacity: 1; transform: scale(1); }
@keyframes ma-n2-v {
  0% { opacity: 0; transform: scale(0.6); }
  13.218% { opacity: 0; transform: scale(0.6); }
  13.908% { transform: scale(1.15); }
  14.253% { opacity: 1; }
  14.713% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#ma-lab-a { animation-name: ma-lab-a; opacity: 1; }
@keyframes ma-lab-a {
  0% { opacity: 0; }
  5.747% { opacity: 0; }
  6.782% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-trace { animation-name: ma-trace; stroke-dasharray: 16 198; opacity: 0; stroke-dashoffset: 16; }
@keyframes ma-trace {
  0% { opacity: 0; stroke-dashoffset: -150; }
  14.943% { opacity: 0; stroke-dashoffset: -150; }
  15.115% { opacity: 1; }
  18.391% { opacity: 1; stroke-dashoffset: 16; }
  18.736% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 16; }
}
#ma-cause { animation-name: ma-cause; opacity: 1; }
@keyframes ma-cause {
  0% { opacity: 0; }
  18.966% { opacity: 0; }
  20.69% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-to-distill { animation-name: ma-to-distill; stroke-dasharray: 16 80; opacity: 0; stroke-dashoffset: -32; }
@keyframes ma-to-distill {
  0% { opacity: 0; stroke-dashoffset: 16; }
  22.414% { opacity: 0; stroke-dashoffset: 16; }
  22.586% { opacity: 1; }
  24.713% { opacity: 1; stroke-dashoffset: -32; }
  25.057% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -32; }
}
#ma-distill-hi { animation-name: ma-distill-hi; opacity: 0; }
@keyframes ma-distill-hi {
  0% { opacity: 0; }
  24.713% { opacity: 0; }
  25.747% { opacity: 1; }
  32.184% { opacity: 1; }
  33.908% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-to-lib { animation-name: ma-to-lib; stroke-dasharray: 16 136.815; opacity: 0; stroke-dashoffset: -88.815; }
@keyframes ma-to-lib {
  0% { opacity: 0; stroke-dashoffset: 16; }
  27.299% { opacity: 0; stroke-dashoffset: 16; }
  27.471% { opacity: 1; }
  30.747% { opacity: 1; stroke-dashoffset: -88.815; }
  31.092% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -88.815; }
}
#ma-card { animation-name: ma-card; transform-box: view-box; transform-origin: 580px 64px; opacity: 1; transform: scale(1); }
@keyframes ma-card {
  0% { opacity: 0; transform: scale(0.85); }
  31.034% { opacity: 0; transform: scale(0.85); }
  31.724% { transform: scale(1.15); }
  32.069% { opacity: 1; }
  32.529% { transform: scale(1); }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; transform: scale(1); }
}
#ma-card-rect { animation-name: ma-card-rect; stroke: #39424F; }
@keyframes ma-card-rect {
  0% { stroke: #FFB020; }
  36.782% { stroke: #FFB020; }
  40.23% { stroke: #39424F; }
  100% { stroke: #39424F; }
}
#ma-instr-b { animation-name: ma-instr-b; opacity: 1; }
@keyframes ma-instr-b {
  0% { opacity: 0; }
  37.931% { opacity: 0; }
  38.966% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-pick-0 { animation-name: ma-pick-0; opacity: 1; }
@keyframes ma-pick-0 {
  0% { opacity: 0; }
  43.103% { opacity: 0; }
  44.138% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-to-ctx-0 { animation-name: ma-to-ctx-0; stroke-dasharray: 16 105.23; opacity: 0; stroke-dashoffset: -57.23; }
@keyframes ma-to-ctx-0 {
  0% { opacity: 0; stroke-dashoffset: 16; }
  44.828% { opacity: 0; stroke-dashoffset: 16; }
  45% { opacity: 1; }
  48.276% { opacity: 1; stroke-dashoffset: -57.23; }
  48.621% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -57.23; }
}
#ma-pick-1 { animation-name: ma-pick-1; opacity: 1; }
@keyframes ma-pick-1 {
  0% { opacity: 0; }
  43.966% { opacity: 0; }
  45% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-to-ctx-1 { animation-name: ma-to-ctx-1; stroke-dasharray: 16 105.23; opacity: 0; stroke-dashoffset: -57.23; }
@keyframes ma-to-ctx-1 {
  0% { opacity: 0; stroke-dashoffset: 16; }
  44.828% { opacity: 0; stroke-dashoffset: 16; }
  45% { opacity: 1; }
  48.276% { opacity: 1; stroke-dashoffset: -57.23; }
  48.621% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -57.23; }
}
#ma-retrieve-hi { animation-name: ma-retrieve-hi; opacity: 1; }
@keyframes ma-retrieve-hi {
  0% { opacity: 0; }
  48.276% { opacity: 0; }
  49.31% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-to-plan { animation-name: ma-to-plan; stroke-dasharray: 16 108.322; opacity: 0; stroke-dashoffset: -60.322; }
@keyframes ma-to-plan {
  0% { opacity: 0; stroke-dashoffset: 16; }
  49.713% { opacity: 0; stroke-dashoffset: 16; }
  49.885% { opacity: 1; }
  52.299% { opacity: 1; stroke-dashoffset: -60.322; }
  52.644% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -60.322; }
}
#ma-root-b { animation-name: ma-root-b; opacity: 1; }
@keyframes ma-root-b {
  0% { opacity: 0; }
  52.299% { opacity: 0; }
  53.333% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-f0 { animation-name: ma-f0; stroke-dasharray: 51 51; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes ma-f0 {
  0% { opacity: 0; stroke-dashoffset: 51; stroke: #FFB020; }
  53.736% { opacity: 0; stroke-dashoffset: 51; }
  54.023% { opacity: 1; }
  56.322% { stroke-dashoffset: 0; }
  57.184% { stroke: #FFB020; }
  59.483% { stroke: #39424F; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#ma-m0 { animation-name: ma-m0; opacity: 1; }
@keyframes ma-m0 {
  0% { opacity: 0; }
  55.46% { opacity: 0; }
  56.494% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-m0-v { animation-name: ma-m0-v; transform-box: view-box; transform-origin: 860px 215px; opacity: 1; transform: scale(1); }
@keyframes ma-m0-v {
  0% { opacity: 0; transform: scale(0.6); }
  57.184% { opacity: 0; transform: scale(0.6); }
  57.874% { transform: scale(1.15); }
  58.218% { opacity: 1; }
  58.678% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#ma-ml0 { animation-name: ma-ml0; opacity: 1; }
@keyframes ma-ml0 {
  0% { opacity: 0; }
  55.46% { opacity: 0; }
  56.494% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-f1 { animation-name: ma-f1; stroke-dasharray: 51 51; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes ma-f1 {
  0% { opacity: 0; stroke-dashoffset: 51; stroke: #FFB020; }
  58.621% { opacity: 0; stroke-dashoffset: 51; }
  58.908% { opacity: 1; }
  61.207% { stroke-dashoffset: 0; }
  62.069% { stroke: #FFB020; }
  64.368% { stroke: #39424F; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#ma-m1 { animation-name: ma-m1; opacity: 1; }
@keyframes ma-m1 {
  0% { opacity: 0; }
  60.345% { opacity: 0; }
  61.379% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-m1-v { animation-name: ma-m1-v; transform-box: view-box; transform-origin: 925px 215px; opacity: 1; transform: scale(1); }
@keyframes ma-m1-v {
  0% { opacity: 0; transform: scale(0.6); }
  62.069% { opacity: 0; transform: scale(0.6); }
  62.759% { transform: scale(1.15); }
  63.103% { opacity: 1; }
  63.563% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#ma-ml1 { animation-name: ma-ml1; opacity: 1; }
@keyframes ma-ml1 {
  0% { opacity: 0; }
  60.345% { opacity: 0; }
  61.379% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-f2 { animation-name: ma-f2; stroke-dasharray: 51 51; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes ma-f2 {
  0% { opacity: 0; stroke-dashoffset: 51; stroke: #FFB020; }
  63.506% { opacity: 0; stroke-dashoffset: 51; }
  63.793% { opacity: 1; }
  66.092% { stroke-dashoffset: 0; }
  66.954% { stroke: #FFB020; }
  69.253% { stroke: #39424F; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#ma-m2 { animation-name: ma-m2; opacity: 1; }
@keyframes ma-m2 {
  0% { opacity: 0; }
  65.23% { opacity: 0; }
  66.264% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-m2-v { animation-name: ma-m2-v; transform-box: view-box; transform-origin: 990px 215px; opacity: 1; transform: scale(1); }
@keyframes ma-m2-v {
  0% { opacity: 0; transform: scale(0.6); }
  66.954% { opacity: 0; transform: scale(0.6); }
  67.644% { transform: scale(1.15); }
  67.989% { opacity: 1; }
  68.448% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#ma-ml2 { animation-name: ma-ml2; opacity: 1; }
@keyframes ma-ml2 {
  0% { opacity: 0; }
  65.23% { opacity: 0; }
  66.264% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-f3 { animation-name: ma-f3; stroke-dasharray: 51 51; opacity: 1; stroke-dashoffset: 0; stroke: #39424F; }
@keyframes ma-f3 {
  0% { opacity: 0; stroke-dashoffset: 51; stroke: #FFB020; }
  68.391% { opacity: 0; stroke-dashoffset: 51; }
  68.678% { opacity: 1; }
  70.977% { stroke-dashoffset: 0; }
  71.839% { stroke: #FFB020; }
  74.138% { stroke: #39424F; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke: #39424F; }
}
#ma-m3 { animation-name: ma-m3; opacity: 1; }
@keyframes ma-m3 {
  0% { opacity: 0; }
  70.115% { opacity: 0; }
  71.149% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-m3-v { animation-name: ma-m3-v; transform-box: view-box; transform-origin: 1055px 215px; opacity: 1; transform: scale(1); }
@keyframes ma-m3-v {
  0% { opacity: 0; transform: scale(0.6); }
  71.839% { opacity: 0; transform: scale(0.6); }
  72.529% { transform: scale(1.15); }
  72.874% { opacity: 1; }
  73.333% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#ma-ml3 { animation-name: ma-ml3; opacity: 1; }
@keyframes ma-ml3 {
  0% { opacity: 0; }
  70.115% { opacity: 0; }
  71.149% { opacity: 1; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; }
}
#ma-glow { animation-name: ma-glow; stroke-dasharray: 246 246; opacity: 1; stroke-dashoffset: 0; }
@keyframes ma-glow {
  0% { opacity: 0; stroke-dashoffset: 246; }
  73.563% { opacity: 0; stroke-dashoffset: 246; }
  73.851% { opacity: 1; }
  79.31% { stroke-dashoffset: 0; }
  91.954% { opacity: 1; }
  95.977% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
#ma-goal { animation-name: ma-goal; transform-box: view-box; transform-origin: 1055px 215px; opacity: 1; transform: scale(1); }
@keyframes ma-goal {
  0% { opacity: 0; transform: scale(0.6); }
  79.31% { opacity: 0; transform: scale(0.6); }
  80% { transform: scale(1.15); }
  80.345% { opacity: 1; }
  80.805% { transform: scale(1); }
  95.977% { opacity: 1; }
  97.701% { opacity: 0; }
  100% { opacity: 0; transform: scale(1); }
}

/* Without motion: rests at the HOLD state, both searches finished. */
@media (prefers-reduced-motion: reduce) {
  .mem-anim .va {
    animation: none !important;
  }
}
/* <<< MEMORY ABLATION <<< */