/* ==========================================================================
   EditAgent — project page
   Colors from the paper's figures: cool slate neutrals + teal accent
   (the "+ EditAgent (Ours)" color).
   Type: Charter-stack serif for display, system sans for text, 4-step scale.
   Tables: booktabs (rule top/mid/bottom, no vertical lines), ours rows tinted.
   ========================================================================== */

:root {
  /* color */
  --paper: #F9FAFA;
  --ink: #1F2933;
  --muted: #52606D;
  --faint: #66727F;
  --line: #DFE4E8;
  --card: #F0F3F4;
  --accent: #008B94;
  --accent-ink: #006B73;
  --accent-soft: #E2F0F0;
  --accent-line: #B9DBDB;
  --ours-bg: #E7F2F2;
  --bad: #C0392B;
  /* type */
  --serif: "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-00: 0.75rem;   /* labels: kickers, badges, chips */
  --fs-0: 0.85rem;    /* small: captions, notes, tables */
  --fs-1: 1rem;       /* body */
  --fs-3: 1.7rem;     /* section heads, stat values */
  /* shape */
  --r: 8px;
  --r-s: 4px;
  --measure: 76ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-1);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
}
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; }
a { color: var(--accent-ink); }

main, .hero { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
p { margin: 0 0 1em; }
/* prose keeps a readable line length; figures, tables and galleries use the full column */
section > p, .secnote { max-width: 760px; }
.lead { max-width: 760px; }

/* --------------------------------------------------------------- hero ---- */
.hero { text-align: center; padding-top: 72px; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.08;
  font-size: 3.1rem;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.hero .acr { color: var(--accent); }
.subtitle { font-size: 1.12rem; color: var(--muted); margin: 0 auto 4px; max-width: 60ch; }
.authors { margin: 26px auto 2px; max-width: 760px; line-height: 1.9; }
.authors a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--accent); text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.authors a:hover { color: var(--accent-ink); }
.authors .au { white-space: nowrap; margin: 0 0.55em; }
.authors sup { color: var(--muted); font-size: 0.7em; margin-left: 1px; }
.affil { color: var(--muted); font-size: var(--fs-0); margin: 6px 0 4px; }
.affil .note { display: block; color: var(--faint); font-size: var(--fs-00); margin-top: 2px; }
.links { margin: 22px 0 40px; }
.btn {
  display: inline-block; margin: 0 4px; padding: 8px 24px;
  border-radius: 16px; background: var(--ink); color: var(--paper);
  text-decoration: none; font-size: var(--fs-0); font-weight: 600;
  letter-spacing: 0.02em;
}
a.btn[href]:hover { background: var(--accent-ink); color: #fff; }
/* links that are not public yet: same shape, visibly inactive */
.btn.soon { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.btn.soon small { font-weight: 500; font-size: 0.68rem; letter-spacing: 0.04em; margin-left: 6px; text-transform: uppercase; }
/* teaser: the lead visual of the header */
.hero-fig { max-width: 1032px; margin: 0 auto; }
.hero-fig img {
  display: block; width: 100%; height: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px;
  box-shadow: 0 6px 28px rgba(31, 41, 51, 0.10);
}
.hero-fig figcaption {
  margin: 14px auto 0; max-width: 820px;
  font-size: var(--fs-0); color: var(--muted); line-height: 1.6;
}
.hero-fig figcaption b { color: var(--ink); }
.hero-note {
  color: var(--muted); font-size: var(--fs-0); line-height: 1.6;
  max-width: 640px; margin: 18px auto 0;
}
.hero { margin-bottom: 24px; }

/* ----------------------------------------------------------- sections ---- */
section { margin: 72px 0; }
main > section + section { border-top: 1px solid var(--line); padding-top: 56px; margin-top: 56px; }
h2 {
  font: 700 var(--fs-3)/1.25 var(--serif);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.kick {
  display: block;
  font: 700 var(--fs-00)/1 var(--sans);
  letter-spacing: 0.16em;
  color: var(--accent-ink);
  margin-bottom: 12px;
}
.kick::after {
  content: ""; display: inline-block; width: 40px; height: 2px;
  background: var(--accent); margin-left: 12px; vertical-align: 0.22em;
}
.secnote { color: var(--muted); margin: 0 0 28px; }

/* ------------------------------------------------- subsection headings ---- */
h3.subh {
  font: 700 1.18rem/1.3 var(--serif);
  letter-spacing: -0.005em;
  margin: 46px 0 12px;
}
h3.subh .slbl, h4.subh4 .slbl {
  display: inline-block;
  font: 700 var(--fs-00)/1 var(--sans);
  letter-spacing: 0.14em;
  color: var(--accent-ink);
  margin-right: 10px;
  transform: translateY(-2px);
}
h2 + h3.subh, .secnote + h3.subh { margin-top: 24px; }
h4.subh4 {
  font: 700 1.02rem/1.35 var(--serif);
  letter-spacing: -0.003em;
  margin: 34px 0 10px;
}
/* -------------------------------------------- reading progress + toc ---- */
#progressbar {
  position: fixed; top: 0; left: 0; z-index: 99;
  height: 3px; width: 0; background: var(--accent);
}
section, h3.subh, h4.subh4 { scroll-margin-top: 22px; }

#tocbtn {
  position: fixed; z-index: 60; left: 16px; bottom: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 12px rgba(31, 41, 51, 0.14);
}
#tocbtn:hover { background: var(--accent-ink); color: #fff; border-color: var(--accent-ink); }

#toc {
  display: none; position: fixed; z-index: 55;
  top: 50%; transform: translateY(-50%);
  left: max(12px, calc((100vw - 1080px) / 2 - 186px));
  width: 168px; max-height: 82vh; overflow-y: auto;
  font-family: var(--sans); scrollbar-width: none;
}
#toc::-webkit-scrollbar { display: none; }
#toc .toc-title {
  font: 700 var(--fs-00)/1 var(--sans); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint);
  margin: 0 0 10px; padding-left: 14px;
}
#toc ol { list-style: none; margin: 0; padding: 0; }
#toc a {
  display: block; padding: 4px 4px 4px 14px;
  border-left: 2px solid var(--line);
  color: var(--muted); text-decoration: none;
  font-size: 0.74rem; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#toc a:hover { color: var(--ink); }
#toc a.on { color: var(--accent-ink); border-left-color: var(--accent); font-weight: 600; }
#toc .toc-num {
  font-weight: 700; font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--faint); margin-right: 7px;
}
#toc a.on .toc-num { color: var(--accent-ink); }
#toc .toc-sub { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
#toc li.open > .toc-sub { max-height: 320px; }
#toc .toc-sub a { padding-left: 26px; font-size: 0.7rem; color: var(--faint); }
#toc .toc-sub a:hover { color: var(--ink); }
#toc .toc-sub a.on { color: var(--accent-ink); border-left-color: var(--accent); }

/* wide screens: persistent side rail, no button */
@media (min-width: 1440px) {
  #toc { display: block; }
  #tocbtn { display: none; }
}
/* narrow screens: floating panel toggled by the button */
@media (max-width: 1439.98px) {
  body.toc-open #toc {
    display: block; top: auto; bottom: 72px; transform: none; left: 16px;
    width: 236px; max-height: 62vh;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: 0 12px 32px rgba(31, 41, 51, 0.2);
    padding: 14px 10px;
  }
  body.toc-open #tocbtn { background: var(--accent-ink); color: #fff; border-color: var(--accent-ink); }
}

/* ------------------------------------------------------------ figures ---- */
.pfig { margin: 32px 0; }
.pfig img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; padding: 10px;
}
.pfig figcaption {
  font-size: var(--fs-0); color: var(--muted);
  line-height: 1.6; margin-top: 10px;
}
.pfig figcaption b { color: var(--ink); }
.fig-xl { max-width: none; }
.fig-med { max-width: 660px; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------ overview ---- */
#overview { text-align: center; margin-top: 8px; }
.tldr {
  font: 700 clamp(1.55rem, 3.4vw, 2.2rem)/1.25 var(--serif);
  letter-spacing: -0.012em; text-wrap: balance;
  max-width: 900px; margin: 0 auto 14px;
}
.tldr-sub {
  color: var(--muted); font-size: 1.08rem; line-height: 1.6; text-wrap: pretty;
  max-width: 760px; margin: 0 auto 20px;
}
.tldr-sub b { color: var(--ink); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; margin: 0 0 8px; padding: 0; }
.pills li {
  font: 600 var(--fs-00)/1 var(--sans); letter-spacing: 0.05em;
  padding: 7px 13px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
}

/* ---------------------------------------------------------- stat tiles --- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; margin: 36px 0 0; text-align: left; }
.stat { border-top: 2px solid var(--ink); padding-top: 14px; }
.stat b {
  display: block;
  font: 700 var(--fs-3)/1.15 var(--serif);
  letter-spacing: -0.01em;
}
.stat b i { font-style: normal; color: var(--accent); font-weight: 400; margin: 0 0.12em; }
.stat span { display: block; font-size: var(--fs-0); color: var(--muted); line-height: 1.5; margin-top: 6px; }
.stat.win { border-top-color: var(--accent); }
.stat.win b { color: var(--accent-ink); }
.stat.dim b { color: var(--faint); }
.stats-cap { font-size: var(--fs-00); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--faint); margin: 10px 0 0; }

/* ------------------------------------- collapsible "more" blocks (<details>) */
details.more { margin: 28px 0 0; border: 1px solid var(--line); border-radius: var(--r); text-align: left; }
details.more > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; cursor: pointer; list-style: none;
  font-size: var(--fs-0); font-weight: 600; color: var(--accent-ink);
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before {
  content: "+"; flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--accent); line-height: 20px; text-align: center; font-weight: 700;
}
details.more[open] > summary::before { content: "\2013"; }
details.more > summary:hover { background: var(--card); }
details.more > summary small { font-weight: 400; color: var(--muted); font-size: var(--fs-0); }
.more-body { padding: 4px 24px 26px; border-top: 1px solid var(--line); }
.more-body > h4:first-child { margin-top: 24px; }
.more-body > .tabwrap:first-child { margin-top: 24px; }
.more-body p { max-width: 760px; }
details.more.abs { max-width: 820px; margin-left: auto; margin-right: auto; }
.abs p { margin: 18px 0 0; line-height: 1.7; }

/* --------------------------------------------- prior vs. ours (the idea) - */
.cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 28px 0 0; }
.cmp-card { border: 1px solid var(--line); border-radius: var(--r); padding: 22px 26px 18px; }
.cmp-card.ours { background: var(--accent-soft); border-color: var(--accent-line); }
.cmp-tag {
  font: 700 var(--fs-00)/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 12px;
}
.cmp-card.ours .cmp-tag { color: var(--accent-ink); }
.cmp-card h3 { font: 700 1.2rem/1.3 var(--serif); margin: 0 0 14px; letter-spacing: -0.005em; }
.cmp-card ul { margin: 0; padding: 0; list-style: none; }
.cmp-card li { margin: 0 0 12px; padding-left: 0; line-height: 1.55; font-size: 0.96rem; color: var(--ink); }
.cmp-card li b { color: var(--ink); }
.cmp-card:not(.ours) li { color: var(--muted); }
.cmp-card:not(.ours) li b { color: var(--ink); }

/* -------------------------------------------- method: two mechanism cards */
.mech { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.mcard { border: 1px solid var(--line); border-radius: var(--r); padding: 24px 26px 12px; scroll-margin-top: 22px; }
.mcard .mk { font: 700 var(--fs-00)/1 var(--sans); letter-spacing: 0.08em; color: var(--accent-ink); margin: 0 0 12px; }
.mcard h3 { font: 700 1.3rem/1.25 var(--serif); margin: 0 0 10px; letter-spacing: -0.005em; }
.mcard p { font-size: 0.96rem; line-height: 1.6; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; }
.chips li {
  font-size: var(--fs-00); line-height: 1.3; padding: 5px 10px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
}
.chips li.base { background: transparent; color: var(--muted); }

/* ------------------------------------ method: figure + the record steps ---- */
.mrow {
  display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 56px; align-items: center; margin: 44px 0 0;
}
.mrow .pfig { margin: 0; }
/* ------------------------------------------------------- results helpers --- */
.rtab.cmp-tab { width: 100%; }
.cmp-tab td { white-space: nowrap; }
.from { color: var(--faint); }
.arr { color: var(--faint); margin: 0 4px; }
.delta {
  display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 3px;
  font-size: 0.72rem; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft);
}
.delta.neg { color: var(--muted); background: var(--card); }
.rtab td.best { font-weight: 700; }
.rtab td.second { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tabnote { font-size: var(--fs-0); color: var(--muted); line-height: 1.6; margin: -14px 0 0; max-width: none; }

.bars { max-width: 760px; margin: 22px 0 6px; }
.bar-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) 58px; align-items: center; gap: 14px; margin: 0 0 12px; }
.bl { font-size: var(--fs-0); font-weight: 600; line-height: 1.35; }
.bl small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-00); }
.bt { position: relative; height: 14px; border-radius: 7px; background: var(--card); border: 1px solid var(--line); }
.bt i { position: absolute; left: -1px; top: -1px; bottom: -1px; border-radius: 7px; background: var(--accent); }
.bt i.plain { background: #9AA5B1; }
.bv { font-weight: 700; font-variant-numeric: tabular-nums; }
.bar-cap { font-size: var(--fs-0); color: var(--muted); line-height: 1.6; margin: 10px 0 0; max-width: 760px; }
/* zoomed-in axis: tracks start just below the smallest value, marked by a break at the left end */
.trunc .bt::before {
  content: ""; position: absolute; z-index: 1; left: 9px; top: -4px; bottom: -4px; width: 4px;
  background: var(--gap-bg, var(--paper)); transform: skewX(-24deg);
}
.pcard { --gap-bg: #fff; }
/* staircase: the earlier total in gray, this step's gain on top of it */
.bt i.ghost { background: #D3DAE0; border-radius: 0; }
.bt i.ghost + i { border-radius: 0 4px 4px 0; }
.bv .delta { margin-left: 8px; font-size: 0.7rem; vertical-align: 1px; }
.bar-row:not(.ours) .bv .delta { color: var(--muted); background: var(--card); }

/* --------------------------------------------------------- data tables --- */
.tabwrap { overflow-x: auto; margin: 28px 0; -webkit-overflow-scrolling: touch; }
.tabwrap::-webkit-scrollbar { height: 10px; }
.tabwrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; border: 2px solid var(--paper); }
.tabwrap::-webkit-scrollbar-track { background: transparent; }

.rtab {
  margin-left: auto; margin-right: auto;
  border-collapse: separate; border-spacing: 0;
  font-size: 0.8rem; line-height: 1.4;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.rtab caption {
  caption-side: top; text-align: left; white-space: normal;
  font-size: var(--fs-0); line-height: 1.6; color: var(--muted);
  padding: 0 0 12px; max-width: none;
  position: sticky; left: 0;   /* stays readable while the table scrolls */
}
.rtab caption b { color: var(--ink); }
.rtab th, .rtab td { padding: 6px 8px; }
.rtab thead th, .rtab thead td { background: var(--paper); font-weight: 600; text-align: center; }
.rtab thead tr:last-child th, .rtab thead tr:last-child td { border-bottom: 1px solid var(--ink); }
.rtab thead tr:first-child th[colspan] { border-bottom: 1px solid var(--line); }
.rtab thead th:first-child { text-align: left; }
.rtab tbody th[scope="row"], .rtab tbody th[scope="rowgroup"] {
  text-align: left; font-weight: 600;
  padding-left: 0; padding-right: 16px;
  position: sticky; left: 0; z-index: 2; background: var(--paper);
}
.rtab tbody th[scope="rowgroup"] { vertical-align: top; }
.rtab:has(tbody th[scope="row"], tbody th[scope="rowgroup"]) thead tr:last-child th:first-child {
  position: sticky; left: 0; z-index: 2; padding-left: 0;
}
.rtab tbody td { text-align: center; font-variant-numeric: tabular-nums; }
.rtab tbody td, .rtab tbody th[scope="row"], .rtab tbody th[scope="rowgroup"] { border-bottom: 1px solid var(--line); }
.rtab tbody tr:last-child td, .rtab tbody tr:last-child th[scope="row"],
.rtab tbody tr:last-child th[scope="rowgroup"] { border-bottom: none; }
.rtab u { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rtab tr.ours td, .rtab tr.ours th[scope="row"] { background: var(--ours-bg); }
.rtab tr.ours th[scope="row"] { color: var(--accent-ink); padding-left: 8px; }
.rtab tr.ours th[scope="row"] b { color: inherit; }
/* ------------------------------------------- the two spaces (overview) --- */
.spaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 880px; margin: 30px auto 0; text-align: left; }
.space-card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 18px; align-content: start;
  padding: 22px 24px 20px; border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  color: var(--ink); text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.space-card:hover { border-color: var(--accent); box-shadow: 0 6px 22px rgba(31, 41, 51, 0.08); transform: translateY(-2px); }
.space-card > :not(svg) { grid-column: 2; }
.space-icon {
  grid-row: 1 / span 5; width: 56px; height: 56px;
  fill: none; stroke: var(--accent-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.space-icon .fill { fill: var(--accent-ink); stroke: none; }
.sc-k { font: 700 var(--fs-00)/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin-top: 4px; }
.space-card b { font: 700 1.35rem/1.25 var(--serif); letter-spacing: -0.005em; margin-top: 8px; }
.sc-q { color: var(--muted); font-size: 0.96rem; margin-bottom: 12px; }
.sc-ab { font-size: var(--fs-0); color: var(--muted); line-height: 1.6; }
.sc-ab i {
  display: inline-block; width: 64px; font: normal 700 var(--fs-00)/1 var(--sans);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
}
.sc-ab.ours { color: var(--ink); }
.sc-ab.ours i { color: var(--accent-ink); }
.howwe { color: var(--muted); font-size: var(--fs-0); max-width: 640px; margin: 22px auto 0; }
.howwe b { color: var(--ink); font-weight: 600; }

/* ----------------------------- story spine: six beats per space ------------ */
/* beats 1-3 (how others do it) sit on a gray line, beats 4-6 (ours) on teal */
.spine { list-style: none; margin: 36px 0 0; padding: 0; }
.node { position: relative; padding: 0 0 48px 58px; }
.node::before { content: ""; position: absolute; left: 15px; top: 38px; bottom: 6px; width: 2px; background: var(--line); }
.node.ours::before { background: var(--accent-line); }
.node:last-child { padding-bottom: 0; }
.node:last-child::before { display: none; }
.nlab {
  display: flex; align-items: center; gap: 14px; margin: 0 0 12px -58px;
  font: 700 var(--fs-00)/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
}
.nnum {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font: 700 0.85rem/1 var(--sans); letter-spacing: 0;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
}
.ours .nlab { color: var(--accent-ink); }
.ours .nnum { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.nh { font: 700 1.3rem/1.3 var(--serif); letter-spacing: -0.005em; margin: 0 0 10px; }
.nb > p, .nt > p { max-width: 640px; }
.nb.has-visual { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 40px; align-items: start; }
.nv { margin: 0; min-width: 0; }
.nv.pfig img { padding: 8px; }
/* figures redrawn from the paper (vector): no frame padding, a little wider than half */
.nb.has-visual.vwide { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
.found { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.found .pfig, .nv.paperfig { margin: 0; }
.paperfig img, .nv.paperfig img { padding: 14px 12px 10px; }
.pcard-fig { display: block; width: 100%; height: auto; }
.proof.fig-right { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.nv .tabwrap { margin: 0; }
/* the turn from their way to ours */
.pivot { padding: 0 0 40px; }
.pivot span {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px;
  background: var(--accent-ink); color: #fff;
  font: 700 var(--fs-00)/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
}
.pivot span::before { content: "\2193"; font-size: 0.9rem; letter-spacing: 0; }

/* beat contents */
.why { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 760px; }
.why li { position: relative; padding-left: 28px; color: var(--muted); font-size: 0.96rem; line-height: 1.55; }
.why li::before { content: "\2713"; position: absolute; left: 2px; top: 0; color: var(--accent-ink); font-weight: 700; }
.why b { color: var(--ink); }
.aside { font-size: var(--fs-0); color: var(--muted); border-left: 3px solid var(--line); padding: 2px 0 2px 14px; }

/* the hero and the architecture are multi-panel animations */
.hero-anim { max-width: 1032px; margin: 0 auto; text-align: left; }
.arch-cap { font-size: var(--fs-0); color: var(--muted); line-height: 1.6; margin: 12px 0 0; max-width: none; }
.arch-cap b { color: var(--ink); }

/* two evidence examples side by side */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.duo-item { min-width: 0; }
.duo-cap { font-size: var(--fs-0); color: var(--muted); line-height: 1.55; margin: 10px 0 0; }
.duo-cap b { color: var(--ink); }
/* our fix: the text and three animated examples, two by two */
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; align-items: start; }
.quad-item { min-width: 0; }
.quad .duo-cap { text-align: center; }
/* short checklist under the chips */
.why-s { gap: 6px; }
.why-s li { font-size: var(--fs-0); }

/* proof cards */
.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.pcard { border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px 16px; background: #fff; min-width: 0; }
.pk { font: 700 var(--fs-00)/1.35 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin: 0 0 16px; }
.pnote { font-size: var(--fs-0); color: var(--muted); line-height: 1.55; margin: 12px 0 0; }
.pnote b { color: var(--accent-ink); font-size: 1rem; }
.pcard .pref { margin: 0; }
.rank.mini { margin: 0; }
.rank.mini .bar-row { grid-template-columns: 138px minmax(0, 1fr) 44px; }
/* a reference value drawn across every bar track */
.refline .bt::after { content: ""; position: absolute; left: var(--ref); top: -5px; bottom: -5px; border-left: 2px dashed var(--ink); }
.refkey { display: inline-block; height: 12px; border-left: 2px dashed var(--ink); margin-right: 8px; vertical-align: -1px; }


/* ablation: which space each step belongs to */
.tag {
  font: normal 700 0.62rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-soft); padding: 3px 6px; border-radius: 3px;
  margin-left: 6px; vertical-align: 1px; white-space: nowrap;
}
.rank.steps2 .bar-row { grid-template-columns: 270px minmax(0, 1fr) 116px; }

/* ------------------------------------------- inline SVG animations ------- */
/* default styles are the finished frame; reduced motion shows only that */
.anim { margin: 0; }
.anim svg { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.anim figcaption { font-size: var(--fs-0); color: var(--muted); margin-top: 8px; line-height: 1.5; }
/* the CSS animations are switched on by main.js, which plays each figure once when it comes into view;
   without it every figure simply shows its finished frame (the default styles) */
html:not(.anim-js) .anim * { animation: none !important; }
/* playback controls (added by main.js): step dots, previous step, pause / play, next step */
.anim-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px; }
html:not(.anim-js) .anim-ctl { display: none; }   /* reduced motion: finished frames, no controls */
.anim-ctl button {
  flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
}
.anim-ctl button:hover { color: var(--accent-ink); border-color: var(--accent); }
.anim .anim-ctl svg { width: 12px; height: 12px; background: none; border: 0; border-radius: 0; fill: currentColor; pointer-events: none; }
.ac-dots { display: flex; gap: 5px; margin-right: auto; }
.ac-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background 0.2s; }
.ac-dots i.on { background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .anim *, .anim *::before, .anim *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------- story animations (generated SVG) --- */
/* action pair */
/* Action-space pair: #anim-retry (others: one editor, retried on its own output) and
   #anim-race (EditAgent: many methods in parallel from the same source, one judge call).
   Default styles are the complete final frame; reduced motion shows exactly that. */

/* ---------------- retry ---------------- */
#anim-retry text { font-size: 18px; }
#anim-retry .bubble { fill: var(--card); }
#anim-retry .req { font-size: 20px; font-style: italic; fill: var(--ink); }
#anim-retry .frame { fill: none; stroke: var(--line); stroke-width: 1.5; }
#anim-retry .wave { fill: none; stroke-width: 2.5; stroke-linecap: round; }
#anim-retry .lab { fill: var(--muted); text-anchor: middle; }
#anim-retry .arr { fill: none; stroke: var(--faint); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100 120; }
#anim-retry .head { fill: none; stroke: var(--faint); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#anim-retry .hint { font-style: italic; fill: var(--muted); text-anchor: middle; }
#anim-retry .lead { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; }
#anim-retry .ghost { fill: none; stroke: var(--bad); stroke-width: 2; stroke-dasharray: 3 3; }
#anim-retry .pill { fill: #fff; stroke: var(--bad); stroke-width: 1.5; }
#anim-retry .bad-t { font-weight: 700; fill: var(--bad); }
#anim-retry .brk { fill: none; stroke: var(--bad); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 120; }
#anim-retry .pile { font-size: 20px; font-weight: 700; fill: var(--bad); text-anchor: middle; }
#anim-retry .arm { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
#anim-retry .chip { fill: var(--card); stroke: var(--faint); stroke-width: 1.5; }
#anim-retry .chip-t { font-weight: 600; fill: var(--ink); text-anchor: middle; }
#anim-retry .bot, #anim-retry .pile, #anim-retry .tool,
#anim-retry .c1, #anim-retry .c2, #anim-retry .c3,
#anim-retry .b1, #anim-retry .b2, #anim-retry .b3 { transform-box: fill-box; transform-origin: center; }

/* ---------------- race ---------------- */
#anim-race text { font-size: 18px; }
#anim-race .bubble { fill: var(--card); }
#anim-race .req { font-size: 20px; font-style: italic; fill: var(--ink); }
#anim-race .frame { fill: none; stroke: var(--line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#anim-race .wave { fill: none; stroke-width: 2.5; stroke-linecap: round; }
#anim-race .lab { fill: var(--muted); text-anchor: middle; }
#anim-race .dot { fill: var(--faint); }
#anim-race .lane { fill: none; stroke: var(--faint); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100 120; }
#anim-race .head { fill: none; stroke: var(--faint); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#anim-race .lane-win { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#anim-race .ll { fill: var(--muted); text-anchor: end; }
#anim-race .ll-win { fill: var(--accent-ink); }
#anim-race .foot { font-style: italic; fill: var(--muted); }
#anim-race .ghost { fill: none; stroke: var(--bad); stroke-width: 2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
#anim-race .win-frame { fill: none; stroke: var(--accent); stroke-width: 3; }
#anim-race .brk { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 120; }
#anim-race .lens { fill: #fff; fill-opacity: .55; stroke: var(--ink); stroke-width: 2.5; }
#anim-race .handle { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
#anim-race .call { font-size: 20px; font-weight: 700; fill: var(--accent-ink); text-anchor: end; }
#anim-race .pill { fill: #fff; stroke: var(--bad); stroke-width: 1.5; }
#anim-race .pill-ok { fill: #fff; stroke: var(--accent); stroke-width: 1.5; }
#anim-race .bad-t { font-weight: 700; fill: var(--bad); }
#anim-race .ok-t { font-weight: 700; fill: var(--accent-ink); }
#anim-race .cand, #anim-race .judge, #anim-race .badge { transform-box: fill-box; transform-origin: center; }

/* ---- timing (11 s loop, generated) ---- */
#anim-retry .in0 { animation: retry-in0 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .bot { animation: retry-bot 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .tool { animation: retry-tool 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .a1 { animation: retry-a1 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .h1 { animation: retry-h1 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .c1 { animation: retry-c1 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .b1 { animation: retry-b1 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .a2 { animation: retry-a2 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .h2 { animation: retry-h2 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .c2 { animation: retry-c2 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .b2 { animation: retry-b2 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .a3 { animation: retry-a3 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .h3 { animation: retry-h3 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .c3 { animation: retry-c3 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .b3 { animation: retry-b3 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .g2 { animation: retry-g2 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .note { animation: retry-note 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .note3 { animation: retry-note3 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .brk { animation: retry-brk 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-retry .pile { animation: retry-pile 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-race .in0 { animation: race-in0 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-race .lane { animation: race-lane 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-race .head { animation: race-head 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-race .lanelab { animation: race-lab 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-race .foot { animation: race-foot 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-race .cand { animation: race-cand 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-race .judge { animation: race-judge 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-race .brk { animation: race-brk 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-race .call { animation: race-call 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-race .badge { animation: race-badge 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-race .verdict { animation: race-verdict 11s cubic-bezier(.2,.7,.2,1) infinite both; }
#anim-race .win { animation: race-win 11s cubic-bezier(.2,.7,.2,1) infinite both; }
@keyframes retry-in0 { 0%, 0.00% { opacity:0; } 7.27%, 95.45% { opacity:1; } 100% { opacity:0; } }
@keyframes retry-bot { 0%, 7.27% { opacity:0;transform:translateY(10px); } 11.82%, 95.45% { opacity:1;transform:none; } 100% { opacity:0;transform:none; } }
@keyframes retry-tool { 0% { transform:none; } 13.18% { transform:none; } 15.45% { transform:scale(1.07); } 17.73% { transform:none; } 27.73% { transform:none; } 30.00% { transform:scale(1.07); } 32.27% { transform:none; } 42.27% { transform:none; } 44.55% { transform:scale(1.07); } 46.82% { transform:none; } 100% { transform:none; } }
@keyframes retry-a1 { 0%, 13.64% { stroke-dashoffset:100; opacity:0; } 14.00% { opacity:1; } 17.27%, 95.45% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes retry-h1 { 0%, 16.73% { opacity:0; } 17.45%, 95.45% { opacity:1; } 100% { opacity:0; } }
@keyframes retry-c1 { 0%, 17.27% { opacity:0;transform:translateX(-12px); } 21.36%, 95.45% { opacity:1;transform:none; } 100% { opacity:0;transform:none; } }
@keyframes retry-b1 { 0%, 22.73% { opacity:0;transform:scale(.6); } 25.45%, 95.45% { opacity:1;transform:none; } 100% { opacity:0;transform:none; } }
@keyframes retry-a2 { 0%, 28.18% { stroke-dashoffset:100; opacity:0; } 28.55% { opacity:1; } 31.82%, 95.45% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes retry-h2 { 0%, 31.27% { opacity:0; } 32.00%, 95.45% { opacity:1; } 100% { opacity:0; } }
@keyframes retry-c2 { 0%, 31.82% { opacity:0;transform:translateX(-12px); } 35.91%, 95.45% { opacity:1;transform:none; } 100% { opacity:0;transform:none; } }
@keyframes retry-b2 { 0%, 37.27% { opacity:0;transform:scale(.6); } 40.00%, 95.45% { opacity:1;transform:none; } 100% { opacity:0;transform:none; } }
@keyframes retry-a3 { 0%, 42.73% { stroke-dashoffset:100; opacity:0; } 43.09% { opacity:1; } 46.36%, 95.45% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes retry-h3 { 0%, 45.82% { opacity:0; } 46.55%, 95.45% { opacity:1; } 100% { opacity:0; } }
@keyframes retry-c3 { 0%, 46.36% { opacity:0;transform:translateX(-12px); } 50.45%, 95.45% { opacity:1;transform:none; } 100% { opacity:0;transform:none; } }
@keyframes retry-b3 { 0%, 51.82% { opacity:0;transform:scale(.6); } 54.55%, 95.45% { opacity:1;transform:none; } 100% { opacity:0;transform:none; } }
@keyframes retry-g2 { 0%, 37.27% { opacity:0; } 40.00%, 95.45% { opacity:1; } 100% { opacity:0; } }
@keyframes retry-note { 0%, 29.09% { opacity:0; } 32.73%, 95.45% { opacity:1; } 100% { opacity:0; } }
@keyframes retry-note3 { 0%, 43.64% { opacity:0; } 47.27%, 95.45% { opacity:1; } 100% { opacity:0; } }
@keyframes retry-brk { 0%, 58.18% { stroke-dashoffset:100; opacity:0; } 58.55% { opacity:1; } 62.73%, 95.45% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes retry-pile { 0%, 60.00% { opacity:0;transform:translateY(6px); } 63.64%, 95.45% { opacity:1;transform:none; } 100% { opacity:0;transform:none; } }
@keyframes race-in0 { 0%, 0.00% { opacity:0; } 7.27%, 95.45% { opacity:1; } 100% { opacity:0; } }
@keyframes race-lane { 0%, 9.09% { stroke-dashoffset:100; opacity:0; } 9.45% { opacity:1; } 18.18%, 95.45% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes race-head { 0%, 17.27% { opacity:0; } 18.18%, 95.45% { opacity:1; } 100% { opacity:0; } }
@keyframes race-lab { 0%, 10.91% { opacity:0; } 15.45%, 95.45% { opacity:1; } 100% { opacity:0; } }
@keyframes race-foot { 0%, 14.55% { opacity:0; } 20.00%, 95.45% { opacity:1; } 100% { opacity:0; } }
@keyframes race-cand { 0%, 18.18% { opacity:0;transform:translateX(-12px); } 27.27%, 95.45% { opacity:1;transform:none; } 100% { opacity:0;transform:none; } }
@keyframes race-judge { 0%, 30.91% { opacity:0;transform:translateY(10px); } 36.36%, 95.45% { opacity:1;transform:none; } 100% { opacity:0;transform:none; } }
@keyframes race-brk { 0%, 31.82% { stroke-dashoffset:100; opacity:0; } 32.18% { opacity:1; } 38.18%, 95.45% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes race-call { 0%, 33.64% { opacity:0; } 38.18%, 95.45% { opacity:1; } 100% { opacity:0; } }
@keyframes race-badge { 0%, 41.82% { opacity:0;transform:scale(.6); } 45.45%, 95.45% { opacity:1;transform:none; } 100% { opacity:0;transform:none; } }
@keyframes race-verdict { 0%, 41.82% { opacity:0; } 45.45%, 95.45% { opacity:1; } 100% { opacity:0; } }
@keyframes race-win { 0%, 50.91% { opacity:0; } 54.55%, 95.45% { opacity:1; } 100% { opacity:0; } }
/* observe pair */
/* ===== pair "observe": #anim-eye (one output, by eye) and #anim-evidence (all candidates, with records) ===== */

/* ---- shared vocabulary ---- */
#anim-eye .k-req-bg, #anim-evidence .k-req-bg { fill: var(--card); }
#anim-eye .k-req, #anim-evidence .k-req { fill: var(--ink); font-style: italic; font-size: 20px; }
#anim-eye .k-lbl, #anim-evidence .k-lbl { fill: var(--muted); font-size: 18px; }
#anim-eye .k-frame, #anim-evidence .k-frame { fill: none; stroke: var(--line); stroke-width: 1.5; }
#anim-eye .k-bad, #anim-evidence .k-bad { fill: var(--bad); }
#anim-eye .k-ok, #anim-evidence .k-ok { fill: var(--accent); }
#anim-eye .k-x, #anim-evidence .k-x,
#anim-eye .k-v, #anim-evidence .k-v { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#anim-eye .k-pill-bad, #anim-evidence .k-pill-bad { fill: #fff; stroke: var(--bad); stroke-width: 1.5; }
#anim-eye .k-pill-bad-t, #anim-evidence .k-pill-bad-t { fill: var(--bad); font-size: 18px; font-weight: 700; }
#anim-evidence .k-pill-ok { fill: #fff; stroke: var(--accent); stroke-width: 1.5; }
#anim-evidence .k-pill-ok-t { fill: var(--accent-ink); font-size: 18px; font-weight: 700; }

/* ---- eye: drawing ---- */
#anim-eye .k-queue { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
#anim-eye .eye-q2 { opacity: .55; }
#anim-eye .eye-sight { stroke: var(--faint); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 7; }
#anim-eye .k-say { fill: #fff; stroke: var(--faint); stroke-width: 1.5; stroke-linejoin: round; }
#anim-eye .k-say-t { fill: var(--ink); font-size: 20px; }
#anim-eye .k-stamp { fill: #fff; stroke: var(--accent); stroke-width: 3; }
#anim-eye .k-stamp-t { fill: var(--accent-ink); font-size: 24px; font-weight: 700; letter-spacing: 3px; }
#anim-eye .eye-stamp { opacity: .5; }
#anim-eye .eye-strike { stroke: var(--bad); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 130; stroke-dashoffset: 0; }
#anim-eye .eye-scan { opacity: 0; }
#anim-eye .k-rim { fill: none; stroke: var(--ink); stroke-width: 4; }
#anim-eye .k-handle { stroke: var(--ink); stroke-width: 10; stroke-linecap: round; }
#anim-eye .k-tag { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
#anim-eye .k-tag-t { fill: var(--ink); font-size: 18px; font-weight: 700; }
#anim-eye .k-lead { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 5; }

/* ---- eye: motion (one 11 s loop; stagger by keyframe %) ---- */
#anim-eye .eye-bubble, #anim-eye .eye-q1, #anim-eye .eye-q2, #anim-eye .eye-card, #anim-eye .eye-sight,
#anim-eye .eye-bot, #anim-eye .eye-scan, #anim-eye .eye-say, #anim-eye .eye-stamp, #anim-eye .eye-strike,
#anim-eye .eye-lens, #anim-eye .eye-up, #anim-eye .eye-fail {
  animation-duration: 11s; animation-iteration-count: infinite; animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
  transform-box: fill-box; transform-origin: center;
}
#anim-eye .eye-bubble { animation-name: eye-bubble; }
#anim-eye .eye-q2 { animation-name: eye-q2; }
#anim-eye .eye-q1 { animation-name: eye-q1; }
#anim-eye .eye-card { animation-name: eye-card; }
#anim-eye .eye-bot { animation-name: eye-bot; }
#anim-eye .eye-sight { animation-name: eye-sight; }
#anim-eye .eye-scan { animation-name: eye-scan; animation-timing-function: ease-in-out; }
#anim-eye .eye-say { animation-name: eye-say; transform-origin: 0% 100%; }
#anim-eye .eye-stamp { animation-name: eye-stamp; }
#anim-eye .eye-lens { animation-name: eye-lens; }
#anim-eye .eye-up { animation-name: eye-up; }
#anim-eye .eye-strike { animation-name: eye-strike; animation-timing-function: ease-in-out; }
#anim-eye .eye-fail { animation-name: eye-fail; }

@keyframes eye-bubble { 0% { opacity: 0; transform: translateY(-8px); } 7.27% { opacity: 1; transform: none; } 95.45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes eye-q2 { 0%, 7.27% { opacity: 0; transform: translate(10px, 10px); } 10.9% { opacity: .55; transform: none; } 95.45% { opacity: .55; } 100% { opacity: 0; } }
@keyframes eye-q1 { 0%, 8.6% { opacity: 0; transform: translate(10px, 10px); } 12.3% { opacity: 1; transform: none; } 95.45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes eye-card { 0%, 10% { opacity: 0; transform: translate(10px, 10px); } 14.55% { opacity: 1; transform: none; } 95.45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes eye-bot { 0%, 16.36% { opacity: 0; transform: translateX(18px); } 20.9% { opacity: 1; transform: none; } 95.45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes eye-sight { 0%, 19.1% { opacity: 0; } 22.7% { opacity: 1; } 95.45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes eye-scan { 0%, 21.8% { opacity: 0; transform: translateX(0); } 23.2% { opacity: 1; } 31.4% { opacity: 1; } 32.73%, 100% { opacity: 0; transform: translateX(250px); } }
@keyframes eye-say { 0%, 34.55% { opacity: 0; transform: scale(.85); } 38.18% { opacity: 1; transform: none; } 95.45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes eye-stamp { 0%, 36.36% { opacity: 0; transform: scale(1.5); } 40% { opacity: 1; transform: none; } 60% { opacity: 1; } 63.6% { opacity: .5; } 95.45% { opacity: .5; } 100% { opacity: 0; } }
@keyframes eye-lens { 0%, 45.45% { opacity: 0; transform: translate(72px, -6px); } 49.5% { opacity: 1; } 56.36% { transform: none; } 95.45% { opacity: 1; } 100% { opacity: 0; transform: none; } }
@keyframes eye-up { 0%, 54.5% { opacity: 0; transform: translateX(10px); } 58.2% { opacity: 1; transform: none; } 95.45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes eye-strike { 0%, 60% { stroke-dashoffset: 130; opacity: 1; } 62.73% { stroke-dashoffset: 0; } 95.45% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes eye-fail { 0%, 61.8% { opacity: 0; transform: scale(.85); } 65.45% { opacity: 1; transform: none; } 95.45% { opacity: 1; } 100% { opacity: 0; } }

/* ---- evidence: drawing ---- */
#anim-evidence .k-win { fill: none; stroke: var(--accent); stroke-width: 3; }
#anim-evidence .k-panel { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
#anim-evidence .k-map { fill: var(--ink); }
#anim-evidence .k-div { fill: #fff; }
#anim-evidence .k-tile { fill: none; stroke: var(--line); stroke-width: 1.5; }
#anim-evidence .k-ring { fill: none; stroke: var(--bad); stroke-width: 2.5; }
#anim-evidence .k-chip { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: 1.5; }
#anim-evidence .k-chip-v { fill: none; stroke: var(--accent-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#anim-evidence .k-chip-t { fill: var(--accent-ink); font-size: 18px; font-weight: 700; letter-spacing: .5px; }
#anim-evidence .k-brace { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 620; stroke-dashoffset: 0; }
#anim-evidence .k-call { fill: var(--ink); font-size: 19px; }
#anim-evidence .k-call-b { fill: var(--accent-ink); font-weight: 700; }
#anim-evidence .ev-sweep { opacity: 0; }

/* ---- evidence: motion. #anim-evidence, #anim-bright and #anim-frame sit together and share one 12 s beat
   timeline: request 0 s, candidates 1.0 s, records 2.4 s, measuring 3.0-4.6 s, findings 4.8 s, judge 6.0 s,
   sweep 6.3 s, rejected 7.4 s, accepted 7.7 s, hold, fade from 11.4 s. main.js plays and pauses them together. ---- */
#anim-evidence .ev-bubble, #anim-evidence .ev-c1, #anim-evidence .ev-c2, #anim-evidence .ev-c3,
#anim-evidence .ev-r1, #anim-evidence .ev-r2, #anim-evidence .ev-r3, #anim-evidence .ev-judge, #anim-evidence .ev-brace,
#anim-evidence .ev-sweep, #anim-evidence .ev-bad, #anim-evidence .ev-ok, #anim-evidence .ev-win,
#anim-evidence .ev-ring, #anim-evidence .ev-ping {
  animation-duration: 12s; animation-iteration-count: infinite; animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
  transform-box: fill-box; transform-origin: center;
}
#anim-evidence .ev-bubble { animation-name: evidence-bubble; }
#anim-evidence .ev-c1 { animation-name: evidence-c1; }
#anim-evidence .ev-c2 { animation-name: evidence-c2; }
#anim-evidence .ev-c3 { animation-name: evidence-c3; }
#anim-evidence .ev-r1 { animation-name: evidence-r1; }
#anim-evidence .ev-r2 { animation-name: evidence-r2; }
#anim-evidence .ev-r3 { animation-name: evidence-r3; }
#anim-evidence .ev-judge { animation-name: evidence-judge; }
#anim-evidence .ev-brace { animation-name: evidence-brace; animation-timing-function: ease-in-out; }
#anim-evidence .ev-sweep { animation-name: evidence-sweep; animation-timing-function: ease-in-out; }
#anim-evidence .ev-bad { animation-name: evidence-bad; }
#anim-evidence .ev-ring { animation-name: evidence-ring; }
#anim-evidence .ev-ping { animation-name: evidence-ping; animation-timing-function: ease-in-out; }
#anim-evidence .ev-ok { animation-name: evidence-ok; }
#anim-evidence .ev-win { animation-name: evidence-win; }

@keyframes evidence-bubble { 0% { opacity: 0; transform: translateY(-8px); } 6.67% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes evidence-c1 { 0%, 8.33% { opacity: 0; transform: translateY(10px); } 13.33% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes evidence-c2 { 0%, 8.33% { opacity: 0; transform: translateY(10px); } 13.33% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes evidence-c3 { 0%, 8.33% { opacity: 0; transform: translateY(10px); } 13.33% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes evidence-r1 { 0%, 20% { opacity: 0; transform: translateY(-14px); } 24.17% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes evidence-r2 { 0%, 20% { opacity: 0; transform: translateY(-14px); } 24.17% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes evidence-r3 { 0%, 20% { opacity: 0; transform: translateY(-14px); } 24.17% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes evidence-judge { 0%, 50% { opacity: 0; } 52.5% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes evidence-brace { 0%, 50% { stroke-dashoffset: 620; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes evidence-sweep { 0%, 52.5% { opacity: 0; transform: translateX(80px); } 53.33% { opacity: 1; } 58.33% { opacity: 1; } 59.17%, 100% { opacity: 0; transform: translateX(640px); } }
@keyframes evidence-bad { 0%, 61.67% { opacity: 0; transform: scale(.8); } 65% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes evidence-ring { 0%, 40% { opacity: 0; } 41.67% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes evidence-ping { 0%, 40% { opacity: 0; transform: none; } 41.67% { opacity: 1; transform: scale(1.14); } 44.17% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; transform: none; } }
@keyframes evidence-ok { 0%, 64.17% { opacity: 0; transform: scale(.8); } 67.5% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes evidence-win { 0%, 64.17% { opacity: 0; } 67.5% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }

/* records pair (bright, frame) */
/* ===== pair "records": #anim-bright (measured tone) and #anim-frame (measured framing) =====
   Siblings of #anim-evidence: same request bubble, record panels, VERIFIED chip, judge and verdict pills.
   Default styles are the complete final frame; reduced motion shows exactly that. */

/* ---- shared vocabulary ---- */
#anim-bright .k-req-bg, #anim-frame .k-req-bg { fill: var(--card); }
#anim-bright .k-req, #anim-frame .k-req { fill: var(--ink); font-style: italic; font-size: 20px; }
#anim-bright .k-lbl, #anim-frame .k-lbl { fill: var(--muted); font-size: 18px; }
#anim-bright .k-frame, #anim-frame .k-frame { fill: none; stroke: var(--line); stroke-width: 1.5; }
#anim-bright .k-win, #anim-frame .k-win { fill: none; stroke: var(--accent); stroke-width: 3; }
#anim-bright .k-panel, #anim-frame .k-panel { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
#anim-bright .k-key, #anim-frame .k-key { fill: var(--muted); font-size: 18px; }
#anim-bright .k-val, #anim-frame .k-val { fill: var(--ink); font-size: 18px; font-weight: 700; }
#anim-bright .k-val-bad { fill: var(--bad); }
#anim-bright .k-track, #anim-frame .k-track { fill: var(--line); }
#anim-bright .k-fill { fill: var(--faint); }
#anim-bright .k-tick { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
#anim-bright .k-shift-bad, #anim-frame .k-shift-bad { fill: var(--bad); font-size: 18px; font-weight: 700; }
#anim-bright .k-shift-ok, #anim-frame .k-shift-ok { fill: var(--accent-ink); font-size: 18px; font-weight: 700; }
#anim-bright .k-chip, #anim-frame .k-chip { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: 1.5; }
#anim-bright .k-chip-v, #anim-frame .k-chip-v { fill: none; stroke: var(--accent-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#anim-bright .k-chip-t, #anim-frame .k-chip-t { fill: var(--accent-ink); font-size: 18px; font-weight: 700; letter-spacing: .5px; }
#anim-bright .k-call-b, #anim-frame .k-call-b { fill: var(--accent-ink); font-size: 20px; font-weight: 700; }
#anim-bright .k-bad, #anim-frame .k-bad { fill: var(--bad); }
#anim-bright .k-ok, #anim-frame .k-ok { fill: var(--accent); }
#anim-bright .k-x, #anim-frame .k-x,
#anim-bright .k-v, #anim-frame .k-v { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#anim-bright .k-pill-bad, #anim-frame .k-pill-bad { fill: #fff; stroke: var(--bad); stroke-width: 1.5; }
#anim-bright .k-pill-bad-t, #anim-frame .k-pill-bad-t { fill: var(--bad); font-size: 18px; font-weight: 700; }
#anim-bright .k-pill-ok, #anim-frame .k-pill-ok { fill: #fff; stroke: var(--accent); stroke-width: 1.5; }
#anim-bright .k-pill-ok-t, #anim-frame .k-pill-ok-t { fill: var(--accent-ink); font-size: 18px; font-weight: 700; }

/* ---- bright: drawing ---- */
#anim-bright .br-hatch { opacity: .35; }
#anim-bright .br-sweep { opacity: 0; }

/* ---- bright: motion (the shared 12 s beats, see evidence) ---- */
#anim-bright .br-bubble, #anim-bright .br-in, #anim-bright .br-c1, #anim-bright .br-c2, #anim-bright .br-rec,
#anim-bright .br-fill1, #anim-bright .br-fill2, #anim-bright .br-val, #anim-bright .br-m1, #anim-bright .br-m2,
#anim-bright .br-hatch, #anim-bright .br-chip, #anim-bright .br-judge, #anim-bright .br-bad, #anim-bright .br-ok,
#anim-bright .br-win, #anim-bright .br-sweep {
  animation-duration: 12s; animation-iteration-count: infinite; animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
  transform-box: fill-box; transform-origin: center;
}
#anim-bright .br-fill1, #anim-bright .br-fill2 { transform-origin: 0 50%; animation-timing-function: ease-in-out; }
#anim-bright .br-bubble { animation-name: bright-bubble; }
#anim-bright .br-in { animation-name: bright-in; }
#anim-bright .br-c1, #anim-bright .br-c2 { animation-name: bright-cand; }
#anim-bright .br-rec { animation-name: bright-rec; }
#anim-bright .br-fill1 { animation-name: bright-fill1; }
#anim-bright .br-fill2 { animation-name: bright-fill2; }
#anim-bright .br-val { animation-name: bright-val; }
#anim-bright .br-m1 { animation-name: bright-m1; }
#anim-bright .br-m2 { animation-name: bright-m2; }
#anim-bright .br-hatch { animation-name: bright-hatch; animation-timing-function: ease-in-out; }
#anim-bright .br-chip { animation-name: bright-chip; }
#anim-bright .br-judge { animation-name: bright-judge; }
#anim-bright .br-sweep { animation-name: bright-sweep; animation-timing-function: ease-in-out; }
#anim-bright .br-bad { animation-name: bright-bad; }
#anim-bright .br-ok { animation-name: bright-ok; }
#anim-bright .br-win { animation-name: bright-win; }

@keyframes bright-bubble { 0% { opacity: 0; transform: translateY(-8px); } 6.67% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bright-in { 0%, 8.33% { opacity: 0; transform: translateY(10px); } 13.33% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bright-cand { 0%, 8.33% { opacity: 0; transform: translateY(10px); } 13.33% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bright-rec { 0%, 20% { opacity: 0; transform: translateY(-10px); } 24.17% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bright-fill1 { 0%, 25% { transform: scaleX(.2875); } 36.67% { transform: none; } 100% { transform: none; } }
@keyframes bright-fill2 { 0%, 25% { transform: scaleX(.5111); } 36.67% { transform: none; } 100% { transform: none; } }
@keyframes bright-val { 0%, 34.17% { opacity: 0; } 36.67% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bright-m1 { 0%, 40% { opacity: 0; transform: translateY(6px); } 43.33% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bright-m2 { 0%, 40% { opacity: 0; transform: translateY(6px); } 43.33% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bright-hatch { 0%, 40% { opacity: 0; } 41.67% { opacity: .95; } 43.33% { opacity: .95; } 46.67% { opacity: .35; } 95% { opacity: .35; } 100% { opacity: 0; } }
@keyframes bright-chip { 0%, 41.67% { opacity: 0; transform: scale(.85); } 45% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bright-judge { 0%, 50% { opacity: 0; transform: translateX(-10px); } 53.33% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bright-sweep { 0%, 52.5% { opacity: 0; transform: translateX(80px); } 53.33% { opacity: 1; } 58.33% { opacity: 1; } 59.17%, 100% { opacity: 0; transform: translateX(612px); } }
@keyframes bright-bad { 0%, 61.67% { opacity: 0; transform: scale(.8); } 65% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bright-ok { 0%, 64.17% { opacity: 0; transform: scale(.8); } 67.5% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bright-win { 0%, 64.17% { opacity: 0; } 67.5% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }

/* ---- frame: drawing ---- */
#anim-frame .k-mfill { fill: var(--faint); }
#anim-frame .k-src { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 4; }
#anim-frame .k-halo { fill: none; stroke: #fff; stroke-width: 6; stroke-opacity: .9; }
#anim-frame .k-seek { fill: none; stroke: var(--faint); stroke-width: 2.5; stroke-dasharray: 6 4; }
#anim-frame .k-found { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 4; }
#anim-frame .fr-seek, #anim-frame .fr-sweep { opacity: 0; }

/* ---- frame: motion (the shared 12 s beats, see evidence) ---- */
#anim-frame .fr-bubble, #anim-frame .fr-in, #anim-frame .fr-c1, #anim-frame .fr-c2, #anim-frame .fr-src, #anim-frame .fr-rec,
#anim-frame .fr-seek, #anim-frame .fr-seek-c, #anim-frame .fr-found, #anim-frame .fr-found-c, #anim-frame .fr-fill1, #anim-frame .fr-fill2,
#anim-frame .fr-say, #anim-frame .fr-chip, #anim-frame .fr-sweep, #anim-frame .fr-judge, #anim-frame .fr-bad, #anim-frame .fr-ok, #anim-frame .fr-win {
  animation-duration: 12s; animation-iteration-count: infinite; animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
  transform-box: fill-box; transform-origin: center;
}
#anim-frame .fr-fill1, #anim-frame .fr-fill2 { transform-origin: 0 50%; animation-timing-function: ease-in-out; }
#anim-frame .fr-seek, #anim-frame .fr-found, #anim-frame .fr-sweep { animation-timing-function: ease-in-out; }
#anim-frame .fr-bubble { animation-name: frame-bubble; }
#anim-frame .fr-in { animation-name: frame-in; }
#anim-frame .fr-c1, #anim-frame .fr-c2 { animation-name: frame-cand; }
#anim-frame .fr-rec { animation-name: frame-rec; }
#anim-frame .fr-src { animation-name: frame-src; }
#anim-frame .fr-seek { animation-name: frame-seek; }
#anim-frame .fr-seek-c { animation-name: frame-seek-c; }
#anim-frame .fr-found { animation-name: frame-found; }
#anim-frame .fr-found-c { animation-name: frame-found-c; }
#anim-frame .fr-fill1 { animation-name: frame-fill1; }
#anim-frame .fr-fill2 { animation-name: frame-fill2; }
#anim-frame .fr-say { animation-name: frame-say; }
#anim-frame .fr-chip { animation-name: frame-chip; }
#anim-frame .fr-sweep { animation-name: frame-sweep; }
#anim-frame .fr-judge { animation-name: frame-judge; }
#anim-frame .fr-bad { animation-name: frame-bad; }
#anim-frame .fr-ok { animation-name: frame-ok; }
#anim-frame .fr-win { animation-name: frame-win; }

@keyframes frame-bubble { 0% { opacity: 0; transform: translateY(-8px); } 6.67% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes frame-in { 0%, 8.33% { opacity: 0; transform: translateY(10px); } 13.33% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes frame-cand { 0%, 8.33% { opacity: 0; transform: translateY(10px); } 13.33% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes frame-rec { 0%, 20% { opacity: 0; transform: translateY(-10px); } 24.17% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes frame-src { 0%, 20% { opacity: 0; } 24.17% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }
/* search box on the general editor's result: scans every place, ends where the source should be, turns red, fades (3.0-4.55 s) */
@keyframes frame-seek {
  0%, 25% { opacity: 0; transform: none; }
  26.25% { opacity: 1; transform: none; }
  29.17% { transform: translate(66px, 0); }
  32.08% { transform: translate(66px, 31px); }
  35% { transform: translate(0, 31px); }
  36.67% { opacity: 1; transform: translate(33px, 15.5px); }
  37.92%, 100% { opacity: 0; transform: translate(33px, 15.5px); }
}
@keyframes frame-seek-c { 0%, 35.42% { stroke: var(--faint); } 36.67%, 100% { stroke: var(--bad); } }
/* search box on the canvas extension's result: scans, then snaps around the source (3.0-4.5 s) */
@keyframes frame-found {
  0%, 25% { opacity: 0; transform: translate(-33px, -15.5px); }
  26.25% { opacity: 1; transform: translate(-33px, -15.5px); }
  29.58% { transform: translate(33px, -15.5px); }
  32.5% { transform: translate(-14px, 9px); }
  34.17% { transform: none; }
  35.42% { transform: scale(1.12); }
  37.5% { transform: none; }
  95% { opacity: 1; }
  100% { opacity: 0; transform: none; }
}
@keyframes frame-found-c { 0%, 34.17% { stroke: var(--faint); } 35.42%, 100% { stroke: var(--accent); } }
@keyframes frame-fill1 { 0%, 31.67% { transform: scaleX(0); } 36.67% { transform: none; } 100% { transform: none; } }
@keyframes frame-fill2 { 0%, 31.67% { transform: scaleX(0); } 36.67% { transform: none; } 100% { transform: none; } }
@keyframes frame-say { 0%, 40% { opacity: 0; transform: translateY(6px); } 43.33% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes frame-chip { 0%, 41.67% { opacity: 0; transform: scale(.85); } 45% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes frame-sweep { 0%, 52.5% { opacity: 0; transform: translateX(80px); } 53.33% { opacity: 1; } 58.33% { opacity: 1; } 59.17%, 100% { opacity: 0; transform: translateX(612px); } }
@keyframes frame-judge { 0%, 50% { opacity: 0; transform: translateX(-10px); } 53.33% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes frame-bad { 0%, 61.67% { opacity: 0; transform: scale(.8); } 65% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes frame-ok { 0%, 64.17% { opacity: 0; transform: scale(.8); } 67.5% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes frame-win { 0%, 64.17% { opacity: 0; } 67.5% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }

/* teaser (hero) */
/* Hero figure #anim-teaser: an animated redraw of the paper's Figure 1.
   Three SVG panels (Action space, Observation space, Result), each split into a
   "Typical agentic editing" half and an "EditAgent" half; side by side on desktop,
   stacked at <= 860px. One 15 s loop shared by every animated element; default
   styles are the complete final frame (reduced motion shows exactly that). */

#anim-teaser .teaser-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#anim-teaser .teaser-panel { min-width: 0; }
@media (max-width: 860px) {
  #anim-teaser .teaser-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 480px; margin: 0 auto; }
}

#anim-teaser text { font-size: 18px; fill: var(--ink); }
#anim-teaser .ttl { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
#anim-teaser .num-c { fill: var(--ink); }
#anim-teaser .num { fill: #fff; font-weight: 700; }
#anim-teaser .half-top { fill: var(--card); fill-opacity: .7; }
#anim-teaser .half-bot { fill: var(--accent-soft); fill-opacity: .6; }
#anim-teaser .tag-top { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
#anim-teaser .tag-top-t { fill: var(--muted); font-weight: 600; }
#anim-teaser .tag-bot { fill: var(--accent); }
#anim-teaser .tag-bot-t { fill: #fff; font-weight: 700; }

#anim-teaser .say { fill: #fff; stroke: var(--faint); stroke-width: 1.5; stroke-linejoin: round; }
#anim-teaser .say-t { font-size: 19px; font-style: italic; }
#anim-teaser .hint { fill: var(--muted); font-style: italic; }
#anim-teaser .lab { fill: var(--muted); text-anchor: middle; }
#anim-teaser .lab-end { fill: var(--muted); text-anchor: end; }
#anim-teaser .fr { fill: none; stroke: var(--line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#anim-teaser .fr-win { fill: none; stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; }
#anim-teaser .bad { fill: var(--bad); }
#anim-teaser .ok { fill: var(--accent); }
#anim-teaser .xm { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#anim-teaser .pill-bad { fill: #fff; stroke: var(--bad); stroke-width: 1.5; }
#anim-teaser .pill-ok { fill: #fff; stroke: var(--accent); stroke-width: 1.5; }
#anim-teaser .bad-t { fill: var(--bad); font-weight: 700; }
#anim-teaser .ok-t { fill: var(--accent-ink); font-weight: 700; }
#anim-teaser .arw, #anim-teaser .arw-bad, #anim-teaser .arw-acc { fill: none; stroke: var(--faint); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#anim-teaser .arw-bad { stroke: var(--bad); stroke-dasharray: 4 5; }
#anim-teaser .arw-acc { stroke: var(--accent); }
#anim-teaser .wr { fill: var(--faint); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
#anim-teaser .sight { fill: none; stroke: var(--faint); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 6; }
#anim-teaser .or-c { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
#anim-teaser .or-t { fill: var(--muted); font-style: italic; }
#anim-teaser .gbox { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
#anim-teaser .g-track { fill: none; stroke: var(--line); stroke-width: 6; stroke-linecap: round; }
#anim-teaser .g-hi { fill: none; stroke: var(--faint); stroke-width: 6; stroke-linecap: round; }
#anim-teaser .g-tick { fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; }
#anim-teaser .g-needle { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
#anim-teaser .g-hub { fill: var(--ink); }
#anim-teaser .q { font-size: 22px; font-weight: 700; fill: var(--faint); }

#anim-teaser .chip { fill: #fff; stroke: var(--accent-line); stroke-width: 1.5; }
#anim-teaser .chip-t { fill: var(--accent-ink); font-weight: 700; }
#anim-teaser .fan { fill: none; stroke: var(--accent); stroke-opacity: .55; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100 120; }
#anim-teaser .meth { fill: #fff; stroke: var(--accent); stroke-width: 1.5; }
#anim-teaser .meth-t { fill: var(--accent-ink); font-weight: 700; }
#anim-teaser .evcard { fill: #fff; stroke: var(--accent-line); stroke-width: 1.5; }
#anim-teaser .doc { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
#anim-teaser .doc-l { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; }
#anim-teaser .ev-h { font-size: 20px; font-weight: 700; fill: var(--accent-ink); }
#anim-teaser .evrule { fill: none; stroke: var(--line); stroke-width: 1.5; }
#anim-teaser .ev-t { fill: var(--ink); }
#anim-teaser .ic-map { fill: var(--ink); }
#anim-teaser .ic-ln { fill: #fff; stroke: var(--ink); stroke-width: 2.2; }
#anim-teaser .ic-hd { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
#anim-teaser .ic-b1 { fill: #7FB8D9; }
#anim-teaser .ic-b2 { fill: var(--accent); }
#anim-teaser .ic-b3 { fill: #F6C445; }
#anim-teaser .ic-st { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#anim-teaser .ic-eye { fill: #fff; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
#anim-teaser .ic-pu { fill: var(--ink); }
#anim-teaser .lens { fill: #fff; fill-opacity: .6; stroke: var(--ink); stroke-width: 3; }
#anim-teaser .lens-h { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
#anim-teaser .cmp-t { font-weight: 600; }
#anim-teaser .tile { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
#anim-teaser .tile-win { fill: none; stroke: var(--accent); stroke-width: 3; }
#anim-teaser .tile-t { font-weight: 700; fill: var(--muted); }

#anim-teaser .tro { fill: #F6C445; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
#anim-teaser .tro-h { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
#anim-teaser .acc-t { font-size: 20px; font-weight: 700; fill: var(--accent-ink); }
#anim-teaser .spk-y { fill: #F6C445; }
#anim-teaser .spk-a { fill: var(--accent); }
#anim-teaser .cmpcard { fill: #fff; stroke: var(--accent-line); stroke-width: 1.5; }
#anim-teaser .vs-good { fill: var(--accent); }
#anim-teaser .vs-good-t { fill: #fff; font-weight: 700; }
#anim-teaser .vs-mid { fill: var(--ink); font-weight: 600; }
#anim-teaser .vs-low { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
#anim-teaser .vs-low-t { fill: var(--muted); font-weight: 700; }
#anim-teaser .de-t { font-weight: 700; fill: var(--accent-ink); }
#anim-teaser .mbox { fill: #fff; stroke: var(--accent); stroke-width: 2; }
#anim-teaser .mbox-t { font-weight: 600; fill: var(--ink); }
#anim-teaser .fly { opacity: 0; }

/* ---- motion: one 36 s loop, panel by panel (typical, then EditAgent); frames and titles are static;
   every beat holds 1.5-2 s before the next; full frame from 30.2 s (accepted edits fly into the model
   until 32.5 s), fade from 35.2 s ---- */
#anim-teaser .a { animation-duration: 36s; animation-iteration-count: infinite; animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2,.7,.2,1); transform-box: fill-box; transform-origin: center; }
#anim-teaser .o-l { transform-origin: 0% 50%; }
#anim-teaser .o-r { transform-origin: 100% 50%; }
#anim-teaser .o-bl { transform-origin: 12% 100%; }
#anim-teaser .o-bc { transform-origin: 50% 100%; }
#anim-teaser .needle { transform-box: view-box; transform-origin: 298px 207px; }
#anim-teaser .k-p1bot { animation-name: teaser-p1bot; }
#anim-teaser .k-p1say { animation-name: teaser-p1say; }
#anim-teaser .k-p1tool { animation-name: teaser-p1tool; }
#anim-teaser .k-p1a0 { animation-name: teaser-p1a0; }
#anim-teaser .k-p1c1 { animation-name: teaser-p1c1; }
#anim-teaser .k-p1x1 { animation-name: teaser-p1x1; }
#anim-teaser .k-p1a1 { animation-name: teaser-p1a1; }
#anim-teaser .k-p1hint { animation-name: teaser-p1hint; }
#anim-teaser .k-p1c2 { animation-name: teaser-p1c2; }
#anim-teaser .k-p1x2 { animation-name: teaser-p1x2; }
#anim-teaser .k-p1a2 { animation-name: teaser-p1a2; }
#anim-teaser .k-p1c3 { animation-name: teaser-p1c3; }
#anim-teaser .k-p1x3 { animation-name: teaser-p1x3; }
#anim-teaser .k-p1pill { animation-name: teaser-p1pill; }
#anim-teaser .k-p2card { animation-name: teaser-p2card; }
#anim-teaser .k-p2bot { animation-name: teaser-p2bot; }
#anim-teaser .k-p2sight { animation-name: teaser-p2sight; }
#anim-teaser .k-p2say { animation-name: teaser-p2say; }
#anim-teaser .k-p2or { animation-name: teaser-p2or; }
#anim-teaser .k-p2gauge { animation-name: teaser-p2gauge; }
#anim-teaser .k-p2needle { animation-name: teaser-p2needle; }
#anim-teaser .k-p2say2 { animation-name: teaser-p2say2; }
#anim-teaser .k-p2pill { animation-name: teaser-p2pill; }
#anim-teaser .k-p3bot { animation-name: teaser-p3bot; }
#anim-teaser .k-p3q { animation-name: teaser-p3q; }
#anim-teaser .k-p3say { animation-name: teaser-p3say; }
#anim-teaser .k-p3lead { animation-name: teaser-p3lead; }
#anim-teaser .k-p3p1 { animation-name: teaser-p3p1; }
#anim-teaser .k-p3p2 { animation-name: teaser-p3p2; }
#anim-teaser .k-p3p3 { animation-name: teaser-p3p3; }
#anim-teaser .k-p4plan { animation-name: teaser-p4plan; }
#anim-teaser .k-p4ar1 { animation-name: teaser-p4ar1; }
#anim-teaser .k-p4loc { animation-name: teaser-p4loc; }
#anim-teaser .k-p4ar2 { animation-name: teaser-p4ar2; }
#anim-teaser .k-p4pick { animation-name: teaser-p4pick; }
#anim-teaser .k-p4src { animation-name: teaser-p4src; }
#anim-teaser .k-p4fan { animation-name: teaser-p4fan; }
#anim-teaser .k-p4meth { animation-name: teaser-p4meth; }
#anim-teaser .k-p4down { animation-name: teaser-p4down; }
#anim-teaser .k-p4cand { animation-name: teaser-p4cand; }
#anim-teaser .k-p4pill { animation-name: teaser-p4pill; }
#anim-teaser .k-p5card { animation-name: teaser-p5card; }
#anim-teaser .k-p5bot { animation-name: teaser-p5bot; }
#anim-teaser .k-p5i1 { animation-name: teaser-p5i1; }
#anim-teaser .k-p5i2 { animation-name: teaser-p5i2; }
#anim-teaser .k-p5i3 { animation-name: teaser-p5i3; }
#anim-teaser .k-p5i4 { animation-name: teaser-p5i4; }
#anim-teaser .k-p5i5 { animation-name: teaser-p5i5; }
#anim-teaser .k-p5i6 { animation-name: teaser-p5i6; }
#anim-teaser .k-p5arrow { animation-name: teaser-p5arrow; }
#anim-teaser .k-p5say { animation-name: teaser-p5say; }
#anim-teaser .k-p5cmp { animation-name: teaser-p5cmp; }
#anim-teaser .k-p5tiles { animation-name: teaser-p5tiles; }
#anim-teaser .k-p5xs { animation-name: teaser-p5xs; }
#anim-teaser .k-p5ok { animation-name: teaser-p5ok; }
#anim-teaser .k-p5pill { animation-name: teaser-p5pill; }
#anim-teaser .k-p6acc { animation-name: teaser-p6acc; }
#anim-teaser .k-p6okb { animation-name: teaser-p6okb; }
#anim-teaser .k-p6acct { animation-name: teaser-p6acct; }
#anim-teaser .k-p6cmp1 { animation-name: teaser-p6cmp1; }
#anim-teaser .k-p6cmp2 { animation-name: teaser-p6cmp2; }
#anim-teaser .k-p6cmp3 { animation-name: teaser-p6cmp3; }
#anim-teaser .k-p6de { animation-name: teaser-p6de; }
#anim-teaser .k-p6stack { animation-name: teaser-p6stack; }
#anim-teaser .k-p6arrow { animation-name: teaser-p6arrow; }
#anim-teaser .k-p6box { animation-name: teaser-p6box; }
#anim-teaser .k-p6fly1 { animation-name: teaser-p6fly1; }
#anim-teaser .k-p6fly2 { animation-name: teaser-p6fly2; }
#anim-teaser .k-p6fly3 { animation-name: teaser-p6fly3; }
@keyframes teaser-p1bot { 0%, 0.83% { opacity: 0; transform: translateY(8px); } 2.5%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p1say { 0%, 1.39% { opacity: 0; transform: scale(.8); } 3.06%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p1a0 { 0%, 2.78% { opacity: 0; transform: scaleX(0); } 3.89%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p1c1 { 0%, 3.33% { opacity: 0; transform: translateX(-10px); } 4.72%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p1x1 { 0%, 5% { opacity: 0; transform: scale(.6); } 5.83%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p1a1 { 0%, 6.67% { opacity: 0; transform: scaleX(0); } 7.78%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p1hint { 0%, 6.67% { opacity: 0; } 8.33%, 97.78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes teaser-p1c2 { 0%, 7.22% { opacity: 0; transform: translateX(-10px); } 8.61%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p1x2 { 0%, 8.89% { opacity: 0; transform: scale(.6); } 9.72%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p1a2 { 0%, 10.56% { opacity: 0; transform: scaleX(0); } 11.67%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p1c3 { 0%, 11.11% { opacity: 0; transform: translateX(-10px); } 12.5%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p1x3 { 0%, 12.78% { opacity: 0; transform: scale(.6); } 13.61%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p1pill { 0%, 14.72% { opacity: 0; transform: translateX(-10px); } 16.11%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p4plan { 0%, 20% { opacity: 0; transform: scale(.6); } 21.67%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p4ar1 { 0%, 20% { opacity: 0; } 21.67%, 97.78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes teaser-p4loc { 0%, 20% { opacity: 0; transform: scale(.6); } 21.67%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p4ar2 { 0%, 20% { opacity: 0; } 21.67%, 97.78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes teaser-p4pick { 0%, 20% { opacity: 0; transform: scale(.6); } 21.67%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p4src { 0%, 20% { opacity: 0; transform: translateY(8px); } 21.67%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p4meth { 0%, 24.72% { opacity: 0; transform: scale(.6); } 26.11%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p4down { 0%, 25.56% { opacity: 0; } 26.67%, 97.78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes teaser-p4cand { 0%, 26.11% { opacity: 0; transform: translateY(8px); } 27.78%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p4pill { 0%, 29.44% { opacity: 0; transform: translateX(-10px); } 30.83%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p2card { 0%, 35% { opacity: 0; transform: translateX(-10px); } 36.67%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p2bot { 0%, 35% { opacity: 0; transform: translateY(8px); } 36.67%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p2sight { 0%, 35.56% { opacity: 0; transform: scaleX(0); } 36.94%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p2say { 0%, 35.83% { opacity: 0; transform: scale(.8); } 37.5%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p2or { 0%, 38.33% { opacity: 0; } 39.72%, 97.78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes teaser-p2gauge { 0%, 38.33% { opacity: 0; transform: translateY(8px); } 40%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p2say2 { 0%, 39.44% { opacity: 0; transform: scale(.8); } 41.11%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p2pill { 0%, 43.33% { opacity: 0; transform: translateX(-10px); } 44.72%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p5bot { 0%, 48.89% { opacity: 0; transform: translateY(8px); } 50.56%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p5say { 0%, 49.44% { opacity: 0; transform: scale(.8); } 51.11%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p5card { 0%, 48.89% { opacity: 0; transform: translateY(8px); } 50.56%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p5arrow { 0%, 49.72% { opacity: 0; transform: scaleX(0); } 50.83%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p5i1 { 0%, 49.44% { opacity: 0; transform: translateX(-10px); } 51.11%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p5i2 { 0%, 49.44% { opacity: 0; transform: translateX(-10px); } 51.11%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p5i3 { 0%, 49.44% { opacity: 0; transform: translateX(-10px); } 51.11%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p5i4 { 0%, 49.44% { opacity: 0; transform: translateX(-10px); } 51.11%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p5i5 { 0%, 49.44% { opacity: 0; transform: translateX(-10px); } 51.11%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p5i6 { 0%, 49.44% { opacity: 0; transform: translateX(-10px); } 51.11%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p5cmp { 0%, 53.89% { opacity: 0; } 55.28%, 97.78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes teaser-p5tiles { 0%, 53.89% { opacity: 0; transform: scale(.6); } 55.28%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p5xs { 0%, 56.67% { opacity: 0; transform: scale(.6); } 57.5%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p5ok { 0%, 58.06% { opacity: 0; transform: scale(.6); } 59.17%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p5pill { 0%, 60.56% { opacity: 0; transform: translateX(-10px); } 61.94%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p3bot { 0%, 66.11% { opacity: 0; transform: translateY(8px); } 67.78%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p3q { 0%, 66.67% { opacity: 0; transform: scale(.6); } 68.06%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p3say { 0%, 66.67% { opacity: 0; transform: scale(.8); } 68.33%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p3lead { 0%, 67.78% { opacity: 0; } 69.17%, 97.78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes teaser-p3p1 { 0%, 68.33% { opacity: 0; transform: translateX(-10px); } 69.72%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p3p2 { 0%, 68.33% { opacity: 0; transform: translateX(-10px); } 69.72%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p3p3 { 0%, 68.33% { opacity: 0; transform: translateX(-10px); } 69.72%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p6acc { 0%, 74.44% { opacity: 0; transform: translateY(8px); } 76.11%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p6okb { 0%, 75.56% { opacity: 0; transform: scale(.6); } 76.39%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p6acct { 0%, 75.56% { opacity: 0; } 76.94%, 97.78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes teaser-p6cmp1 { 0%, 78.33% { opacity: 0; transform: translateY(8px); } 80%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p6cmp2 { 0%, 78.33% { opacity: 0; } 80%, 97.78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes teaser-p6cmp3 { 0%, 78.33% { opacity: 0; transform: translateY(8px); } 80%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p6de { 0%, 81.67% { opacity: 0; } 83.06%, 97.78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes teaser-p6stack { 0%, 81.67% { opacity: 0; transform: translateY(8px); } 83.33%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p6arrow { 0%, 82.22% { opacity: 0; transform: scaleX(0); } 83.33%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p6box { 0%, 82.22% { opacity: 0; transform: scale(.6); } 83.89%, 97.78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes teaser-p1tool { 0% { transform: none; } 3.28% { transform: none; } 3.72% { transform: scale(1.3); } 4.22% { transform: none; } 7.17% { transform: none; } 7.61% { transform: scale(1.3); } 8.11% { transform: none; } 11.06% { transform: none; } 11.5% { transform: scale(1.3); } 12% { transform: none; } 100% { transform: none; } }
@keyframes teaser-p2needle { 0%, 39.72% { transform: rotate(-105deg); } 41.67% { transform: rotate(8deg); } 42.5%, 100% { transform: none; } }
@keyframes teaser-p4fan { 0%, 23.33% { opacity: 0; stroke-dashoffset: 100; } 23.47% { opacity: 1; } 25.28%, 97.78% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes teaser-p6fly1 { 0%, 84.44% { opacity: 0; transform: none; } 84.86% { opacity: 1; } 86.94% { opacity: 1; } 87.5%, 100% { opacity: 0; transform: translateX(86px); } }
@keyframes teaser-p6fly2 { 0%, 85.83% { opacity: 0; transform: none; } 86.25% { opacity: 1; } 88.33% { opacity: 1; } 88.89%, 100% { opacity: 0; transform: translateX(86px); } }
@keyframes teaser-p6fly3 { 0%, 87.22% { opacity: 0; transform: none; } 87.64% { opacity: 1; } 89.72% { opacity: 1; } 90.28%, 100% { opacity: 0; transform: translateX(86px); } }

/* architecture */
/* #anim-arch: EditAgent architecture, a cleaner animated redraw of the paper's overview figure.
   Panels A | B | C side by side, the step chain underneath; everything stacks under 860px (the chain switches to a narrow variant).
   Default styles are the complete final frame; reduced motion shows exactly that. One 16 s loop for every element. */
#anim-arch .arch-grid { display: grid; grid-template-columns: minmax(0, 380fr) minmax(0, 520fr) minmax(0, 380fr); gap: 12px; align-items: start; }
#anim-arch .arch-chain { grid-column: 1 / -1; }
#anim-arch .arch-narrow { display: none; }
@media (max-width: 860px) {
  #anim-arch .arch-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  #anim-arch .arch-a, #anim-arch .arch-c { max-width: 440px; }
  #anim-arch .arch-b { max-width: 600px; }
  #anim-arch .arch-wide { display: none; }
  #anim-arch .arch-narrow { display: block; max-width: 506px; }
}

#anim-arch text { font-size: 18px; fill: var(--ink); }
#anim-arch .ar-ttl { font-family: var(--serif); font-size: 21px; font-weight: 700; }
#anim-arch .ar-lb { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: 1.5; }
#anim-arch .ar-lt { font-weight: 700; fill: var(--accent-ink); text-anchor: middle; }
#anim-arch .ar-b { font-weight: 700; }
#anim-arch .ar-sb { font-weight: 600; }
#anim-arch .ar-big { font-size: 20px; }
#anim-arch .ar-big2 { font-size: 22px; }
#anim-arch .ar-mut { fill: var(--muted); }
#anim-arch .ar-acc { fill: var(--accent-ink); }
#anim-arch .ar-lab { fill: var(--muted); text-anchor: middle; }
#anim-arch .ar-note { fill: var(--muted); font-style: italic; }
#anim-arch .ar-bubble { fill: var(--card); }
#anim-arch .ar-req { font-size: 19px; font-style: italic; text-anchor: middle; }
#anim-arch .ar-card { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
#anim-arch .ar-card-acc { fill: var(--paper); stroke: var(--accent-line); stroke-width: 1.5; }
#anim-arch .ar-card-win { fill: #fff; stroke: var(--accent); stroke-width: 3; }
#anim-arch .ar-dash { fill: #fff; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 5 4; }
#anim-arch .ar-row { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
#anim-arch .ar-row-on { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
#anim-arch .ar-num { font-weight: 700; fill: var(--faint); text-anchor: middle; }
#anim-arch .ar-ico { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#anim-arch .ar-ico-a { stroke: var(--accent); stroke-width: 2.5; }
#anim-arch .ar-dot { fill: var(--ink); }
#anim-arch .ar-chip { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
#anim-arch .ar-chip-t { fill: var(--muted); text-anchor: middle; }
#anim-arch .ar-chip-on { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
#anim-arch .ar-chip-on-t { fill: var(--accent-ink); font-weight: 700; text-anchor: middle; }
#anim-arch .ar-pf { fill: none; stroke: var(--line); stroke-width: 1.5; }
#anim-arch .ar-now-box { fill: none; stroke: var(--accent-line); stroke-width: 2; }
#anim-arch .ar-slot { fill: #fff; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 5 4; }
#anim-arch .ar-win { fill: none; stroke: var(--accent); stroke-width: 3; }
#anim-arch .ar-tag { fill: #fff; stroke: var(--line); stroke-width: 1; }
#anim-arch .ar-tag-t { font-weight: 700; text-anchor: middle; }
#anim-arch .ar-val { fill: #fff; }
#anim-arch .ar-val-t { font-weight: 700; text-anchor: middle; }
#anim-arch .ar-tree, #anim-arch .ar-head, #anim-arch .ar-arr, #anim-arch .ar-arr-h, #anim-arch .ar-arr-ok, #anim-arch .ar-arr-ok-h {
  fill: none; stroke: var(--faint); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#anim-arch .ar-arr-ok, #anim-arch .ar-arr-ok-h { stroke: var(--accent); stroke-width: 3; }
#anim-arch .ar-tree, #anim-arch .ar-draw { stroke-dasharray: 100 120; }
#anim-arch .ar-band { fill: var(--accent-soft); }
#anim-arch .ar-sweep { opacity: 0; }
#anim-arch .ar-step { font-size: 19px; font-weight: 700; text-anchor: middle; }
#anim-arch .ar-start { text-anchor: start; }
#anim-arch .ar-bad-t { fill: var(--bad); font-weight: 600; }
#anim-arch .ar-ok-t { fill: var(--accent-ink); font-weight: 700; }

/* ---- motion: one 31 s loop in beats (A plan, B generate, C judge, then the step chain); each beat
   reveals as a group and holds 1.5-2 s; full frame held from 26 s, fade from 30.2 s ---- */
#anim-arch .ar-a1, #anim-arch .ar-a2, #anim-arch .ar-a3, #anim-arch .ar-a4, #anim-arch .ar-a5, #anim-arch .ar-a6, #anim-arch .ar-a7, #anim-arch .ar-a8, #anim-arch .ar-a9, #anim-arch .ar-a10, #anim-arch .ar-a11, #anim-arch .ar-b1, #anim-arch .ar-b2, #anim-arch .ar-b3, #anim-arch .ar-b4, #anim-arch .ar-b5, #anim-arch .ar-b6, #anim-arch .ar-b7, #anim-arch .ar-b8, #anim-arch .ar-b9, #anim-arch .ar-b10, #anim-arch .ar-b11, #anim-arch .ar-c1, #anim-arch .ar-c2, #anim-arch .ar-c3, #anim-arch .ar-c4, #anim-arch .ar-c5, #anim-arch .ar-c6, #anim-arch .ar-c7, #anim-arch .ar-c8, #anim-arch .ar-k2, #anim-arch .ar-k3, #anim-arch .ar-k4, #anim-arch .ar-k5, #anim-arch .ar-k6, #anim-arch .ar-k7, #anim-arch .ar-k8, #anim-arch .ar-k9, #anim-arch .ar-k10, #anim-arch .ar-k11, #anim-arch .ar-k12, #anim-arch .ar-k13, #anim-arch .ar-k14, #anim-arch .ar-k15, #anim-arch .ar-k16 {
  animation-duration: 31s; animation-iteration-count: infinite; animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2,.7,.2,1); transform-box: fill-box; transform-origin: center; }
#anim-arch .ar-a1 { animation-name: arch-a1; }
#anim-arch .ar-a2 { animation-name: arch-a2; }
#anim-arch .ar-a3 { animation-name: arch-a3; }
#anim-arch .ar-a4 { animation-name: arch-a4; }
#anim-arch .ar-a5 { animation-name: arch-a5; }
#anim-arch .ar-a6 { animation-name: arch-a6; }
#anim-arch .ar-a7 { animation-name: arch-a7; }
#anim-arch .ar-a8 { animation-name: arch-a8; }
#anim-arch .ar-a9 { animation-name: arch-a9; }
#anim-arch .ar-a10 { animation-name: arch-a10; }
#anim-arch .ar-a11 { animation-name: arch-a11; }
#anim-arch .ar-b1 { animation-name: arch-b1; }
#anim-arch .ar-b2 { animation-name: arch-b2; }
#anim-arch .ar-b3 { animation-name: arch-b3; }
#anim-arch .ar-b4 { animation-name: arch-b4; animation-timing-function: ease-in-out; }
#anim-arch .ar-b5 { animation-name: arch-b5; animation-timing-function: ease-in-out; }
#anim-arch .ar-b6 { animation-name: arch-b6; }
#anim-arch .ar-b7 { animation-name: arch-b7; }
#anim-arch .ar-b8 { animation-name: arch-b8; }
#anim-arch .ar-b9 { animation-name: arch-b9; }
#anim-arch .ar-b10 { animation-name: arch-b10; animation-timing-function: ease-in-out; }
#anim-arch .ar-b11 { animation-name: arch-b11; }
#anim-arch .ar-c1 { animation-name: arch-c1; }
#anim-arch .ar-c2 { animation-name: arch-c2; }
#anim-arch .ar-c3 { animation-name: arch-c3; }
#anim-arch .ar-c4 { animation-name: arch-c4; }
#anim-arch .ar-c5 { animation-name: arch-c5; }
#anim-arch .ar-c6 { animation-name: arch-c6; }
#anim-arch .ar-c7 { animation-name: arch-c7; }
#anim-arch .ar-c8 { animation-name: arch-c8; }
#anim-arch .ar-k2 { animation-name: arch-k2; animation-timing-function: ease-in-out; }
#anim-arch .ar-k3 { animation-name: arch-k3; }
#anim-arch .ar-k4 { animation-name: arch-k4; }
#anim-arch .ar-k5 { animation-name: arch-k5; }
#anim-arch .ar-k6 { animation-name: arch-k6; }
#anim-arch .ar-k7 { animation-name: arch-k7; animation-timing-function: ease-in-out; }
#anim-arch .ar-k8 { animation-name: arch-k8; }
#anim-arch .ar-k9 { animation-name: arch-k9; }
#anim-arch .ar-k10 { animation-name: arch-k10; }
#anim-arch .ar-k11 { animation-name: arch-k11; }
#anim-arch .ar-k12 { animation-name: arch-k12; animation-timing-function: ease-in-out; }
#anim-arch .ar-k13 { animation-name: arch-k13; }
#anim-arch .ar-k14 { animation-name: arch-k14; }
#anim-arch .ar-k15 { animation-name: arch-k15; }
#anim-arch .ar-k16 { animation-name: arch-k16; }

@keyframes arch-a1 { 0%, 0.97% { opacity: 0; transform: translateY(8px); } 2.9% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-a2 { 0%, 0.97% { opacity: 0; transform: translateY(8px); } 2.9% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-a3 { 0%, 5.16% { opacity: 0; transform: translateY(8px); } 7.1% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-a4 { 0%, 5.16% { opacity: 0; transform: translateY(8px); } 7.1% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-a5 { 0%, 5.16% { opacity: 0; transform: translateY(8px); } 7.1% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-a6 { 0%, 5.16% { opacity: 0; transform: translateY(8px); } 7.1% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-a7 { 0%, 10.97% { opacity: 0; } 12.58% { opacity: 1; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-a8 { 0%, 12.26% { opacity: 0; transform: translateY(8px); } 14.19% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-a9 { 0%, 12.26% { opacity: 0; transform: translateY(8px); } 14.19% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-a10 { 0%, 12.26% { opacity: 0; transform: translateX(-10px); } 14.19% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-a11 { 0%, 12.26% { opacity: 0; transform: translateX(-10px); } 14.19% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-b1 { 0%, 19.35% { opacity: 0; transform: translateY(8px); } 21.29% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-b2 { 0%, 22.58% { opacity: 0; } 24.19% { opacity: 1; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-b3 { 0%, 25.81% { opacity: 0; transform: translateY(8px); } 27.42% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-b4 { 0%, 27.42% { stroke-dashoffset: 100; } 28.06% { stroke-dashoffset: 0; } 97.42% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes arch-b5 { 0%, 28.06% { stroke-dashoffset: 100; } 29.35% { stroke-dashoffset: 0; } 97.42% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes arch-b6 { 0%, 29.03% { opacity: 0; } 29.68% { opacity: 1; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-b7 { 0%, 29.35% { opacity: 0; transform: translateY(8px); } 31.61% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-b8 { 0%, 34.19% { opacity: 0; transform: translateY(8px); } 36.13% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-b9 { 0%, 35.48% { opacity: 0; transform: scale(.4); } 36.77% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-b10 { 0%, 43.23% { opacity: 0; transform: translateX(0); } 43.55% { opacity: 1; } 46.13% { opacity: 1; } 46.45%, 100% { opacity: 0; transform: translateX(600px); } }
@keyframes arch-b11 { 0%, 51.61% { opacity: 0; } 53.23% { opacity: 1; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-c1 { 0%, 41.29% { opacity: 0; transform: translateY(8px); } 43.23% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-c2 { 0%, 41.29% { opacity: 0; transform: translateY(8px); } 43.23% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-c3 { 0%, 47.74% { opacity: 0; transform: scale(.4); } 49.03% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-c4 { 0%, 47.74% { opacity: 0; transform: scale(.4); } 49.03% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-c5 { 0%, 47.74% { opacity: 0; transform: scale(.4); } 49.03% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-c6 { 0%, 51.61% { opacity: 0; } 53.23% { opacity: 1; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-c7 { 0%, 51.61% { opacity: 0; transform: translateY(8px); } 53.55% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-c8 { 0%, 41.29% { opacity: 0; transform: translateY(8px); } 43.23% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-k2 { 0%, 59.03% { stroke-dashoffset: 100; } 60.32% { stroke-dashoffset: 0; } 97.42% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes arch-k3 { 0%, 60.32% { opacity: 0; } 60.65% { opacity: 1; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-k4 { 0%, 60% { opacity: 0; transform: translateY(8px); } 61.61% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-k5 { 0%, 61.29% { opacity: 0; transform: scale(.4); } 62.26% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-k6 { 0%, 61.29% { opacity: 0; } 62.9% { opacity: 1; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-k7 { 0%, 67.1% { stroke-dashoffset: 100; } 68.39% { stroke-dashoffset: 0; } 97.42% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes arch-k8 { 0%, 68.39% { opacity: 0; } 68.71% { opacity: 1; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-k9 { 0%, 68.39% { opacity: 0; transform: translateY(8px); } 70% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-k10 { 0%, 72.26% { opacity: 0; transform: scale(.4); } 73.23% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-k11 { 0%, 72.26% { opacity: 0; } 73.87% { opacity: 1; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-k12 { 0%, 78.06% { stroke-dashoffset: 100; } 79.35% { stroke-dashoffset: 0; } 97.42% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes arch-k13 { 0%, 79.35% { opacity: 0; } 79.68% { opacity: 1; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-k14 { 0%, 79.35% { opacity: 0; transform: translateY(8px); } 80.97% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-k15 { 0%, 82.58% { opacity: 0; transform: scale(.4); } 83.55% { opacity: 1; transform: none; } 97.42% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arch-k16 { 0%, 82.58% { opacity: 0; } 84.19% { opacity: 1; } 97.42% { opacity: 1; } 100% { opacity: 0; } }

/* ---------------------- ranked bars: the row that matters in the accent ---- */
.rank { margin-top: 18px; }
.rank-title {
  font: 700 var(--fs-00)/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 14px;
}
.rank .bar-row { grid-template-columns: 170px minmax(0, 1fr) 52px; margin: 0 0 8px; }
.rank .bl { font-weight: 500; color: var(--muted); }
.rank .bt { background: none; border: 0; border-left: 1px solid var(--muted); border-radius: 0; }
.rank .bt i { left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; }   /* square at the baseline */
.rank .bv { font-weight: 500; color: var(--muted); }
.rank .bar-row.ours .bl, .rank .bar-row.ours .bv { font-weight: 700; color: var(--ink); }
.rank .bar-row:hover .bl, .rank .bar-row:hover .bv { color: var(--ink); }

/* stacked preference bar: parallel | tie | sequential */
.pref { max-width: 760px; margin: 22px 0 6px; }
.pref-bar { display: flex; gap: 2px; height: 34px; border-radius: var(--r-s); overflow: hidden; }
.pref-bar span {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  font: 700 var(--fs-0)/1 var(--sans); color: #fff; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pref-bar .p { background: var(--accent); }
.pref-bar .t { background: #C5CED6; color: var(--ink); }
.pref-bar .s { background: #7B8794; }
.pref-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: var(--fs-00); color: var(--muted); }
.pref-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* ------------------------------------------------------- gallery tabs ---- */
.gtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.gtabs [role="tab"] {
  display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font: 600 var(--fs-0)/1.2 var(--sans);
}
.gtabs [role="tab"] span { font-weight: 400; font-size: var(--fs-00); color: var(--faint); }
.gtabs [role="tab"]:hover { border-color: var(--accent); color: var(--accent-ink); }
.gtabs [role="tab"][aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.gtabs [role="tab"][aria-selected="true"] span { color: #C5CED6; }

/* --------------------------------------------------- showcase carousel --- */
.showcase { display: block; }
.stagewrap { position: relative; min-width: 0; }
.stage { position: relative; }
.slide { display: none; }
.slide.on { display: block; }
.nav {
  position: absolute; top: 46%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(249, 250, 250, 0.96); border: 1px solid var(--line);
  color: var(--ink); font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center; z-index: 3;
  box-shadow: 0 2px 10px rgba(31, 41, 51, 0.14);
}
.nav:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.nav.prev { left: -14px; }
.nav.next { right: -14px; }
.enlarge {
  flex: none; align-self: stretch; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: transparent; color: var(--muted);
  font: 600 var(--fs-00)/1 var(--sans); letter-spacing: 0.03em; white-space: nowrap;
}
.enlarge:hover { color: var(--accent-ink); border-color: var(--accent); }
/* horizontal filmstrip below the stage */
.rail { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.railnav {
  flex: none; align-self: stretch; width: 28px; padding: 0;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: var(--r-s); cursor: pointer; font-size: 16px; line-height: 1;
}
.railnav:hover:not(:disabled) { color: var(--ink); border-color: var(--muted); }
.railnav:disabled { opacity: 0.25; cursor: default; }
.thumbview { overflow: hidden; overflow: clip; flex: 1; min-width: 0; }   /* clip: focus cannot scroll it */
.thumbs { display: flex; gap: 6px; transition: transform 0.22s ease; }
.thumb {
  flex: 0 0 var(--tw, 128px);
  position: relative; padding: 0; border: 2px solid transparent; border-radius: 6px;
  overflow: hidden; cursor: pointer; background: #1A2026; line-height: 0;
  aspect-ratio: 4 / 3;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.55; }
.thumb.on { border-color: var(--accent); }
.thumb.on img, .thumb:hover img { opacity: 1; }
/* jump to the first example of each backbone */
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.jump .jl { font: 700 var(--fs-00)/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-right: 6px; }
.jump button {
  font: 600 var(--fs-00)/1 var(--sans); letter-spacing: 0.02em; cursor: pointer;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--muted);
}
.jump button span { font-weight: 400; color: var(--faint); margin-left: 4px; }
.jump button:hover { border-color: var(--accent); color: var(--accent-ink); }
.jump button.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
/* mobile poster grid: hidden on desktop */
.mgrid { display: none; }

/* ------------------------------------------------ gallery: shared cells -- */
.gbox { margin: 0; padding: 18px 18px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.gcell { margin: 0; min-width: 0; position: relative; }
.gcell img {
  display: block; width: 100%; height: auto; border-radius: var(--r-s);
  background: #1A2026; cursor: zoom-in;
}
.gcell.ours img { box-shadow: 0 0 0 2px var(--accent); }
.ghead { font-size: var(--fs-0); line-height: 1.45; min-width: 0; }
.ghead b { display: block; font: 700 var(--fs-00)/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.ghead q { display: block; color: var(--ink); font-style: italic; quotes: "\201C" "\201D"; }
.gtag { font: 600 var(--fs-00)/1.3 var(--sans); letter-spacing: 0.03em; color: var(--muted); }
.gtag.ours { color: var(--accent-ink); }

/* multi-turn session: input | turn 1 | turn 2 | turn 3, backbone row over EditAgent row */
.mt {
  display: grid; grid-template-columns: 18px repeat(4, minmax(0, 1fr));
  gap: 10px 10px; align-items: end;
}
.mt .hin { grid-row: 1; grid-column: 2; }
.mt .h1 { grid-row: 1; grid-column: 3; }
.mt .h2 { grid-row: 1; grid-column: 4; }
.mt .h3 { grid-row: 1; grid-column: 5; }
.mt .src { grid-row: 2 / span 2; grid-column: 2; }
.mt .lb, .mt .lo {
  grid-column: 1; align-self: stretch; justify-self: center;
  display: flex; align-items: center; justify-content: center;
  contain: size;   /* a long backbone name must not grow its image row */
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
}
.mt .lb { grid-row: 2; }
.mt .lo { grid-row: 3; }
.mt .b1 { grid-row: 2; grid-column: 3; } .mt .o1 { grid-row: 3; grid-column: 3; }
.mt .b2 { grid-row: 2; grid-column: 4; } .mt .o2 { grid-row: 3; grid-column: 4; }
.mt .b3 { grid-row: 2; grid-column: 5; } .mt .o3 { grid-row: 3; grid-column: 5; }
.mt .gcell { align-self: start; }

/* single-turn example: input | backbone | EditAgent */
.sx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; align-items: start; }
.sx .ghead { grid-column: 1 / -1; margin-bottom: 4px; }
.sx .ghead q { font-size: 0.95rem; }
.sx .gtag { grid-row: 2; }
.sx .gcell { grid-row: 3; align-self: center; }
.sx .glab { grid-row: 4; font-size: var(--fs-0); font-weight: 600; line-height: 1.4; }
.sx .ti, .sx .in { grid-column: 1; }
.sx .tb, .sx .ba, .sx .glab.bad { grid-column: 2; }
.sx .to, .sx .ours, .sx .glab.good { grid-column: 3; }
.glab.bad { color: var(--bad); }
.glab.good { color: var(--accent-ink); }
.glab.bad::before { content: "\2715"; margin-right: 6px; font-weight: 700; }
.glab.good::before { content: "\2713"; margin-right: 6px; font-weight: 700; }

/* ----------------------------------------------------- bibtex + footer --- */
.bibtex {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 24px; margin: 0;
  font: 0.8rem/1.7 var(--mono); overflow-x: auto;
}
footer {
  border-top: 1px solid var(--line); margin-top: 88px;
  text-align: center; color: var(--faint); font-size: var(--fs-0);
  padding: 28px 20px 48px;
}

@media (max-width: 1040px) {
  .mt .lb, .mt .lo { font-size: 0.66rem; }
}

/* ---------------------------------------------------------- <= 860 px ---- */
@media (max-width: 860px) {
  .hero { padding-top: 44px; }
  .hero h1 { font-size: 2.5rem; }
  .hero-fig img { padding: 8px; }
  section { margin: 56px 0; }
  main > section + section { padding-top: 44px; margin-top: 44px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .cmp, .mech, .spaces, .proof, .proof.fig-right, .duo, .quad { grid-template-columns: minmax(0, 1fr); }
  /* the hero and the architecture stack into tall columns: their controls float at the bottom of the screen */
  #anim-teaser .anim-ctl, #anim-arch .anim-ctl {
    position: sticky; bottom: 12px; z-index: 5; width: max-content; margin-left: auto;
    padding: 5px 6px 5px 12px; gap: 6px; border-radius: 999px;
    background: rgba(249, 250, 250, 0.94); border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(31, 41, 51, 0.12);
  }
  #anim-teaser .ac-dots, #anim-arch .ac-dots { margin-right: 6px; }
  .nb.has-visual, .nb.has-visual.vwide, .found { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rank.steps2 .bar-row { grid-template-columns: 200px minmax(0, 1fr) 108px; }
  .mrow { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mrow .pfig { max-width: 460px; margin: 0 auto; }
  .bar-row { grid-template-columns: 150px minmax(0, 1fr) 58px; }
  .tabwrap::before {
    content: "Swipe sideways for all columns \2192";
    display: block; position: sticky; left: 0;
    font-size: var(--fs-00); color: var(--faint); padding-bottom: 6px;
  }
  .tabwrap.fits::before { content: none; }
  .rtab caption { max-width: calc(100vw - 48px); }
  /* phones: no big stage — a compact poster grid; tap one to open fullscreen */
  .stagewrap, .rail { display: none; }
  .mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mthumb {
    position: relative; padding: 0; border: 0; border-radius: var(--r-s);
    overflow: hidden; background: #1A2026; line-height: 0; cursor: pointer;
    aspect-ratio: 4 / 3;
  }
  .mthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* galleries restack: input on top, then each turn as backbone | EditAgent */
  .mt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
  .mt .hin { grid-row: 1; grid-column: 1 / -1; }
  .mt .src { grid-row: 2; grid-column: 1 / -1; width: 72%; justify-self: center; }
  .mt .lb, .mt .lo { writing-mode: horizontal-tb; transform: none; grid-row: 3; justify-self: start; contain: none; display: block; align-self: end; font-size: var(--fs-00); }
  .mt .lb { grid-column: 1; }
  .mt .lo { grid-column: 2; }
  .mt .h1 { grid-row: 4; grid-column: 1 / -1; margin-top: 8px; }
  .mt .b1 { grid-row: 5; grid-column: 1; } .mt .o1 { grid-row: 5; grid-column: 2; }
  .mt .h2 { grid-row: 6; grid-column: 1 / -1; margin-top: 8px; }
  .mt .b2 { grid-row: 7; grid-column: 1; } .mt .o2 { grid-row: 7; grid-column: 2; }
  .mt .h3 { grid-row: 8; grid-column: 1 / -1; margin-top: 8px; }
  .mt .b3 { grid-row: 9; grid-column: 1; } .mt .o3 { grid-row: 9; grid-column: 2; }
  .sx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx .gtag.ti, .sx .gcell.in { grid-column: 1 / -1; justify-self: center; width: 72%; }
  .sx .gtag.ti { grid-row: 2; }
  .sx .gcell.in { grid-row: 3; }
  .sx .gtag.tb, .sx .gtag.to { grid-row: 4; }
  .sx .gcell.ba, .sx .gcell.ours { grid-row: 5; }
  .sx .glab { grid-row: 6; }
  .sx .tb, .sx .ba, .sx .glab.bad { grid-column: 1; }
  .sx .to, .sx .ours, .sx .glab.good { grid-column: 2; }
}

/* ---------------------------------------------------------- <= 560 px ---- */
@media (max-width: 560px) {
  main, .hero { padding-left: 16px; padding-right: 16px; }
  .hero h1 { font-size: 2.1rem; }
  .authors .au { margin: 0 0.4em; }
  .btn { padding: 7px 18px; margin: 0 3px 8px; }
  .gbox { padding: 12px; }
  .pfig img { padding: 6px; }
  .stat b { font-size: 1.45rem; }
  .more-body { padding-left: 16px; padding-right: 16px; }
  .mcard, .cmp-card { padding-left: 20px; padding-right: 20px; }
  .bar-row { grid-template-columns: 112px minmax(0, 1fr) 50px; gap: 10px; }
  .rank .bar-row { grid-template-columns: 118px minmax(0, 1fr) 46px; }
  .rank.mini .bar-row { grid-template-columns: 112px minmax(0, 1fr) 40px; }
  .rank.steps2 .bar-row { grid-template-columns: 112px minmax(0, 1fr) 92px; }
  .bv .delta { margin-left: 4px; }
  .node { padding-left: 44px; }
  .node::before { left: 13px; }
  .nlab { margin-left: -44px; gap: 12px; }
  .nnum { width: 28px; height: 28px; }
  .space-card { grid-template-columns: 44px minmax(0, 1fr); padding: 18px 18px 16px; }
  .space-icon { width: 44px; height: 44px; }
  .rtab caption { max-width: calc(100vw - 32px); }
}

/* ---------------------------------------------------------- <= 440 px ---- */
@media (max-width: 440px) {
  .btn { padding: 7px 12px; margin: 0 2px 8px; }
}
@media (max-width: 380px) {
  .btn { padding: 7px 9px; font-size: 0.8rem; }
}

/* ------------------------------------------- fullscreen lightbox (dark) -- */
#lightbox {
  display: none; position: fixed; inset: 0; z-index: 100;   /* above the reading-progress bar */
  background: rgba(14, 19, 24, 0.985); color: #E6EBEE;
}
#lightbox.on { display: flex; flex-direction: column; }
.lb-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; flex: none;
}
.lb-close { background: none; border: 0; color: #fff; font-size: 22px; padding: 4px 10px; cursor: pointer; }
.lb-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 12px; }
.lb-body > .slide { max-width: 1560px; margin: 0 auto; }
.lb-foot {
  flex: none; display: flex; justify-content: space-between; padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.lb-foot button {
  background: #1C252D; border: 1px solid #36434F; color: #E6EBEE;
  border-radius: 22px; padding: 9px 24px; font-size: var(--fs-0); cursor: pointer;
}
.lb-foot button:hover { border-color: #7B8794; }
#lightbox .slide { display: block; }
#lightbox .gbox { background: transparent; border: none; padding: 0; }
#lightbox .gcell img { cursor: default; }
#lightbox .ghead b, #lightbox .gtag { color: #A3B0BB; }
#lightbox .ghead q { color: #E6EBEE; }
#lightbox .gtag.ours, #lightbox .glab.good { color: #5CC8CE; }
#lightbox .glab.bad { color: #F08A7E; }

/* full EdiVal table: group labels, indented ours rows, heavier block rules */
.rtab tr.grp td { text-align: left; font-style: italic; color: var(--muted); padding-top: 12px; }
.rtab tr.grp td > span { position: sticky; left: 0; }
.rtab th.sub { font-weight: 400; padding-left: 18px; }
.rtab tr.ours th.sub { padding-left: 18px; }
.rtab tbody.blk tr:first-child td, .rtab tbody.blk tr:first-child th { border-top: 1px solid var(--ink); }