/* Erbgut pitch deck. Plain CSS, no build step.
   Stage is 1920 x 1080 logical pixels, scaled to fit the window by deck.js. */

@font-face {
  font-family: "SA Sans";
  src: url("fonts/InstrumentSans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "SA Mono";
  src: url("fonts/JetBrainsMono-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

:root {
  /* Light is the only theme. The four brand accents keep their meaning (Audit cyan, Cost
     magenta, Gain green, To be measured yellow); these are BRAND.md's darker text steps of
     them, which is what clears AA on paper. --sa-tbd-fill stays the bright yellow, because a
     fill behind dark text does not need the contrast the text does. */
  --sa-paper: #EAF3ED;
  --sa-surface: #FFFFFF;
  --sa-surface-2: #DCEDE1;
  --sa-ink: #08130B;
  --sa-muted: #3E6B52;
  --sa-rule: #C3D9C9;
  --sa-audit: #10A6C4;
  --sa-cost: #C41477;
  --sa-gain: #0E9C55;
  --sa-tbd: #8A7A00;
  --sa-tbd-fill: #FFE13D;
  --sa-tbd-bg: #EAF5DA;
  --sa-tbd-line: #A9B81C;
  --on-accent: #FFFFFF;
  --tint-audit: rgba(16, 166, 196, 0.12);
  --tint-cost: rgba(196, 20, 119, 0.10);
  --tint-gain: rgba(14, 156, 85, 0.12);
  --tint-ink: rgba(8, 19, 11, 0.05);
  --shadow: 0 24px 50px rgba(19, 27, 32, 0.12);
  /* logo mark (marketing/logo/erbgut-mark-small.svg) */
  --mark-helix: #32C7DB;
  --mark-a: #FEC746;
  --mark-c: #FC68D6;
  --mark-g: #5BD67C;
  color-scheme: light;
}

:root {
  /* the four bases carry the four brand accents: Audit, Cost, Gain, To be measured */
  --nt-A: var(--sa-audit);
  --nt-C: var(--sa-cost);
  --nt-G: var(--sa-gain);
  --nt-T: var(--sa-tbd);
  --sans: "SA Sans", "Instrument Sans", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --mono: "SA Mono", "JetBrains Mono", "SF Mono", Menlo, Consolas, ui-monospace, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-med: 0.6s;
}

/* ---------------------------------------------------------------- page and stage */

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--sa-paper);
  color: var(--sa-ink);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--sa-paper);
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  background: var(--sa-paper);
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  padding: 88px 120px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(48px);
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out), visibility 0s linear 0.5s;
  background: var(--sa-paper);
}
.slide.past { transform: translateX(-48px); }
.slide.present {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out), visibility 0s;
  z-index: 2;
}

/* all transitions off for one frame when jumping (reload, hash, overview, presenter sync) */
html.instant *, html.instant *::before, html.instant *::after {
  transition: none !important;
}

/* ---------------------------------------------------------------- typography */

.kicker {
  display: none;
}
.kicker .tag {
  font-size: 22px;
  font-weight: 600;
  color: var(--sa-muted);
  border: 2px solid var(--sa-rule);
  border-radius: 999px;
  padding: 2px 14px;
}
h1, h2 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
h2.title { font-size: 72px; max-width: 1600px; }
h2.title.sm { font-size: 60px; }
.lede {
  font-size: 32px;
  line-height: 1.4;
  color: var(--sa-muted);
  margin: 22px 0 0;
  max-width: 1500px;
}
.muted { color: var(--sa-muted); }
.mono { font-family: var(--mono); }
.audit { color: var(--sa-audit); }
.gain { color: var(--sa-gain); }
.cost { color: var(--sa-cost); }
b, strong { font-weight: 600; }

/* speaker notes live in the slide markup and are shown only in the presenter view */
.slide aside.notes { display: none; }

/* ---------------------------------------------------------------- slide chrome */

.foot {
  position: absolute;
  left: 120px;
  right: 120px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 22px;
  color: var(--sa-muted);
  pointer-events: none;
}
.foot .mark { width: 34px; height: 34px; }
.foot .num { margin-left: auto; font-family: var(--mono); font-size: 20px; }
.slide.no-foot .foot { display: none; }

.progress {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  transform-origin: 0 0;
  transform: scaleX(0);
  background: var(--sa-audit);
  opacity: 0.55;
  transition: transform 0.5s var(--ease-out);
  z-index: 20;
}

.sample-badge {
  position: absolute;
  top: 30px;
  right: 36px;
  z-index: 30;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: #08130B;
  background: var(--sa-tbd-fill);
  border-radius: 10px;
  padding: 8px 16px;
  box-shadow: 0 0 0 4px var(--sa-paper), 0 0 0 7px var(--sa-tbd-line);
  display: none;
}
html.sample .sample-badge { display: block; }

.load-error {
  position: absolute;
  left: 36px;
  top: 30px;
  z-index: 30;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  background: #C41477;
  border-radius: 10px;
  padding: 8px 16px;
  display: none;
}
html.results-broken .load-error { display: block; }

/* ---------------------------------------------------------------- building blocks */

.mark .strand { stroke: var(--mark-helix); }
.mark .b1 { fill: var(--mark-a); }
.mark .b2 { fill: var(--mark-c); }
.mark .b3 { fill: var(--mark-g); }

/* nucleotides */
.seq {
  font-family: var(--mono);
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: flex-end;
  letter-spacing: 0;
}
.nt { display: inline-block; text-align: center; width: 0.72em; }
.nt-A { color: var(--nt-A); }
.nt-C { color: var(--nt-C); }
.nt-G { color: var(--nt-G); }
.nt-T { color: var(--nt-T); }
.strandline {
  position: relative;
  padding-bottom: 12px;
}
.strandline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--sa-ink);
  opacity: 0.85;
}

.card {
  background: var(--sa-surface);
  border: 2px solid var(--sa-rule);
  border-radius: 24px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 24px;
  font-weight: 600;
  border: 2px solid var(--sa-rule);
  color: var(--sa-muted);
  background: var(--sa-surface);
}

/* step badges (1, 2, 3 ...) */
.stepno {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sa-audit);
  color: var(--on-accent);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 22px;
  flex: none;
}

/* verdict badges: always a word plus an icon, never color alone */
.verdict {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 30px;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 22px 8px 12px;
  border: 2px solid currentColor;
  white-space: nowrap;
}
.verdict svg { width: 34px; height: 34px; flex: none; }
.verdict.v-pays { color: var(--sa-gain); background: var(--tint-gain); }
.verdict.v-none { color: var(--sa-muted); background: var(--tint-ink); }
.verdict.v-harm { color: var(--sa-cost); background: var(--tint-cost); }
.verdict.v-tuned { color: var(--sa-audit); background: var(--tint-audit); }
.verdict.v-fine { color: var(--sa-gain); background: var(--tint-gain); }
.verdict.v-pending { color: var(--sa-tbd); background: var(--sa-tbd-bg); border-style: dashed; }

/* result placeholders: amber, dashed, never styled like a number */
.ph {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8em;
  line-height: 1.3;
  color: var(--sa-tbd);
  background: var(--sa-tbd-bg);
  border: 2px dashed var(--sa-tbd-line);
  border-radius: 10px;
  padding: 2px 12px;
  white-space: normal;
  letter-spacing: 0;
  vertical-align: baseline;
}
.ph.block { display: block; padding: 14px 20px; font-size: 26px; text-align: center; }
.val { font-family: var(--mono); font-weight: 600; }

.pending-box {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--sa-tbd);
  background: color-mix(in srgb, var(--sa-tbd-bg) 88%, transparent);
  border: 3px dashed var(--sa-tbd-line);
  border-radius: 18px;
  font-size: 28px;
  font-weight: 600;
  padding: 18px 26px;
  line-height: 1.3;
}
.pending-box small { display: block; font-size: 22px; font-weight: 500; opacity: 0.85; margin-top: 6px; }

/* fragments: generic fade up */
.frag {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s var(--ease-out), transform 0.7s var(--ease-out);
}
.frag.on { opacity: 1; transform: none; }
.frag.fade { transform: none; }
.frag.pop { transform: scale(0.85); transition-timing-function: var(--ease-out), var(--ease-back); }
.frag.pop.on { transform: none; }

/* entrance animation when a slide becomes present */
@keyframes enterUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.slide.present .enter { animation: enterUp 0.8s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 1s); }

/* ---------------------------------------------------------------- slide 1: title */

#s-title { padding: 0; }
#s-title .hero {
  position: absolute;
  left: 150px;
  top: 400px;
  right: 150px;
}
#s-title .brandrow { display: flex; align-items: center; gap: 44px; }
#s-title .brandrow .lockup { width: auto; height: 340px; flex: none; }
/* the wordmark is inside the artwork, so the heading is there for screen readers only */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#s-title .brandrow .mark { width: 196px; height: 196px; flex: none; }
/* the lettered lens is wider than it is tall, so it keeps its own ratio */
#s-title .brandrow .mark--full { width: 250px; height: 196px; }
#s-title .wordmark { font-size: 176px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
#s-title .tagline {
  margin: 58px 0 0;
  font-size: 94px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
#s-title .tagline span { color: var(--sa-audit); }
#s-title .oneliner {
  margin: 34px 0 0;
  font-size: 38px;
  line-height: 1.38;
  color: var(--sa-muted);
  max-width: 1380px;
}
#s-title .event {
  margin-top: 40px;
  font-size: 28px;
  color: var(--sa-muted);
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}
#s-title .event b { color: var(--sa-ink); }

#s-title .hero-visual {
  position: absolute;
  right: 150px;
  top: 372px;
  width: 620px;
}
#s-title .hv-row { display: flex; align-items: center; }
#s-title .hv-node {
  width: 150px;
  height: 150px;
  flex: none;
  border-radius: 24px;
  background: var(--sa-surface);
  border: 2px solid var(--sa-rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#s-title .hv-ico { width: 44px; height: 44px; color: var(--sa-audit); }
#s-title .hv-bits-txt { font-family: var(--mono); font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--sa-tbd); text-align: center; }
#s-title .hv-dna .seq { font-size: 26px; }
#s-title .hv-dna .seq .nt { width: 19px; }
#s-title .hv-lbl { font-size: 17px; color: var(--sa-muted); letter-spacing: 0.02em; }

#s-title .hv-link { width: 85px; flex: none; position: relative; height: 24px; color: var(--sa-rule); }
#s-title .hv-arrow { width: 100%; height: 100%; display: block; }
#s-title .hv-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--sa-gain);
  box-shadow: 0 0 6px rgba(57, 255, 110, 0.55);
}
#s-title .hv-dot1 { animation: hvDot1 10s ease-in-out infinite; }
#s-title .hv-dot2 { animation: hvDot2 10s ease-in-out infinite; opacity: 0; }

#s-title .hv-tag {
  position: absolute;
  left: 50%;
  top: -34px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 17px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  opacity: 0;
}
#s-title .hv-tag-fwd { background: var(--tint-gain); color: var(--sa-gain); animation: hvTagFwd 10s ease-in-out infinite; }
#s-title .hv-tag-rev { background: var(--tint-audit); color: var(--sa-audit); animation: hvTagRev 10s ease-in-out infinite; }

#s-title .hv-caption { margin: 30px 0 0; font-size: 20px; color: var(--sa-muted); text-align: center; }

@keyframes hvDot1 {
  0%, 4%    { left: 0%; opacity: 1; }
  15%, 74%  { left: 100%; opacity: 1; }
  85%, 100% { left: 0%; opacity: 1; }
}
@keyframes hvDot2 {
  0%, 19%   { left: 0%; opacity: 0; }
  24%       { left: 0%; opacity: 1; }
  40%, 48%  { left: 100%; opacity: 1; }
  68%       { left: 0%; opacity: 1; }
  73%, 100% { left: 0%; opacity: 0; }
}
@keyframes hvTagFwd {
  0%, 19%   { opacity: 0; }
  25%, 36%  { opacity: 1; }
  42%, 100% { opacity: 0; }
}
@keyframes hvTagRev {
  0%, 47%   { opacity: 0; }
  53%, 64%  { opacity: 1; }
  70%, 100% { opacity: 0; }
}

#s-title .ribbon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 70px;
  height: 120px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
#s-title .ribbon-track {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  animation: drift 90s linear infinite;
}
#s-title .ribbon .seq { font-size: 46px; opacity: 0.9; }
#s-title .ribbon .seq .nt { width: 44px; }
#s-title .ribbon .chunk { position: relative; padding-bottom: 14px; }
#s-title .ribbon .chunk::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px;
  background: var(--sa-ink); opacity: 0.35;
}
#s-title .dimline {
  position: absolute;
  top: -30px;
  height: 22px;
  border-top: 4px solid var(--sa-audit);
}
#s-title .dimline::before, #s-title .dimline::after {
  content: ""; position: absolute; top: -13px; width: 4px; height: 22px; background: var(--sa-audit); border-radius: 2px;
}
#s-title .dimline::before { left: -2px; }
#s-title .dimline::after { right: -2px; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

#s-title .mark .dim { stroke-dasharray: 60; stroke-dashoffset: 60; }
#s-title.present .mark .dim { animation: drawDim 1.1s var(--ease-out) 0.5s forwards; }
@keyframes drawDim { to { stroke-dashoffset: 0; } }
#s-title .mark rect.bar { transform-box: fill-box; transform-origin: 50% 100%; }
#s-title.present .mark rect.bar { animation: barUp 0.7s var(--ease-back) both; }
#s-title.present .mark rect.bar:nth-of-type(3) { animation-delay: 0.08s; }
#s-title.present .mark rect.bar:nth-of-type(4) { animation-delay: 0.16s; }
#s-title.present .mark rect.bar:nth-of-type(5) { animation-delay: 0.24s; }
@keyframes barUp { from { transform: scaleY(0.1); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- slide 2: problem */

#s-problem .cols {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 300px;
  display: grid;
  grid-template-columns: 700px 1fr;
  gap: 64px;
}
#s-problem .rulebook { padding: 36px 40px 30px; position: relative; }
#s-problem .rulebook h3 { margin: 0 0 22px; font-size: 30px; font-weight: 600; color: var(--sa-muted); }
#s-problem .rule {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-top: 2px solid var(--sa-rule);
}
#s-problem .rule .ex { font-family: var(--mono); font-weight: 600; font-size: 30px; text-align: center; }
#s-problem .rule .txt { font-size: 36px; line-height: 1.2; font-weight: 500; }
#s-problem .rule .ex .x { color: var(--sa-cost); font-size: 26px; margin-left: 6px; }
#s-problem .gcbar { display: block; height: 16px; border-radius: 8px; background: color-mix(in srgb, var(--sa-muted) 40%, transparent); position: relative; margin: 0 8px; }
#s-problem .gcbar i { position: absolute; left: 40%; width: 20%; top: 0; bottom: 0; border-radius: 8px; background: var(--sa-ink); opacity: 0.8; }
#s-problem .gcbar-lab { display: block; font-size: 20px; color: var(--sa-muted); margin-top: 6px; font-family: var(--mono); }

#s-problem .channels { display: grid; grid-template-rows: 1fr 1fr; gap: 28px; }
#s-problem .chan { position: relative; padding: 30px 36px; overflow: visible; }
#s-problem .chan h4 { margin: 0; font-size: 44px; font-weight: 600; letter-spacing: -0.01em; }
#s-problem .chan p { margin: 8px 0 18px; font-size: 28px; color: var(--sa-muted); max-width: 470px; }
#s-problem .chan .seq { font-size: 40px; }
#s-problem .chan .seq .nt { width: 30px; }
#s-problem .err-del { display: inline-block; width: 30px; height: 40px; border-bottom: 4px dashed var(--sa-cost); margin: 0 2px; }
#s-problem .err-ins { background: var(--sa-audit); color: var(--on-accent) !important; border-radius: 6px; }
#s-problem .err-sub { background: var(--sa-cost); color: var(--on-accent) !important; border-radius: 6px; }

#s-problem .stamp {
  position: absolute;
  right: 34px;
  top: 50%;
  margin-top: -50px;
  border: 5px solid var(--sa-audit);
  color: var(--sa-audit);
  border-radius: 16px;
  padding: 10px 22px 12px;
  font-weight: 700;
  text-align: center;
  background: color-mix(in srgb, var(--sa-surface) 85%, transparent);
  opacity: 0;
  transform: translate(-80px, -60px) scale(1.7) rotate(-16deg);
  transition: transform 0.5s var(--ease-back), opacity 0.2s linear;
}
#s-problem .stamp .big { display: block; font-size: 30px; letter-spacing: -0.01em; }
#s-problem .stamp .small { display: block; font-size: 19px; font-weight: 600; opacity: 0.9; font-family: var(--mono); margin-top: 2px; }
#s-problem .stamp.on { opacity: 1; transform: rotate(-7deg); }
#s-problem.s2 #chan-nano, #s-problem.s3 #chan-illu { animation: thud 0.5s ease-out 0.3s both; }
@keyframes thud { 0% { transform: none; } 30% { transform: scale(0.985) translateY(4px); } 100% { transform: none; } }

#s-problem .bottom {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 870px;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
#s-problem .bottom .muted { font-weight: 500; }

/* ---------------------------------------------------------------- slide: what erbgut does */

#s-system .tiers {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 300px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
#s-system .tier { padding: 40px 44px; }
#s-system .tno {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--tint-audit);
  color: var(--sa-audit);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 28px;
  margin-bottom: 22px;
}
#s-system .tier h3 { margin: 0 0 14px; font-size: 34px; font-weight: 600; }
#s-system .tier p { margin: 0; font-size: 25px; line-height: 1.42; color: var(--sa-muted); }
#s-system .target {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 660px;
  padding: 30px 40px;
  border: 3px solid var(--sa-audit);
  background: var(--tint-audit);
}
#s-system .target h4 { margin: 0 0 10px; font-size: 27px; font-weight: 600; color: var(--sa-audit); }
#s-system .target p { margin: 0; font-size: 26px; line-height: 1.4; }

/* ---------------------------------------------------------------- slide: what's new */

#s-whatsnew .wn-table {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 336px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 32px;
}
#s-whatsnew .wn-h {
  font-size: 22px;
  font-weight: 600;
  color: var(--sa-muted);
  padding: 0 30px 14px;
  border-bottom: 2px solid var(--sa-rule);
}
#s-whatsnew .wn-c {
  padding: 20px 30px;
  font-size: 25px;
  line-height: 1.35;
  border-bottom: 2px solid var(--sa-rule);
}
#s-whatsnew .wn-c.old { color: var(--sa-muted); }
#s-whatsnew .wn-c.new { color: var(--sa-ink); font-weight: 500; }
#s-whatsnew .bottom-note {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 862px;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.35;
}
#s-whatsnew .bottom-note .muted { font-weight: 500; }

/* ---------------------------------------------------------------- slide 3: pipeline */

#s-pipeline .canvas {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 284px;
  height: 720px;
  display: grid;
  grid-template-columns: 500px 560px 1fr;
  column-gap: 60px;
}
#s-pipeline .col { position: relative; }
#s-pipeline .colhead {
  font-size: 26px;
  font-weight: 600;
  color: var(--sa-muted);
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--sa-rule);
}
#s-pipeline .step { margin-bottom: 36px; }
#s-pipeline .cap { display: flex; align-items: center; gap: 14px; font-size: 27px; font-weight: 500; line-height: 1.2; margin-bottom: 14px; }
#s-pipeline .bits { font-family: var(--mono); font-size: 27px; color: var(--sa-ink); letter-spacing: 0.02em; }
#s-pipeline .bits .b2 { display: inline-block; transition: color 0.3s; }
#s-pipeline .bits small { font-family: var(--sans); color: var(--sa-muted); font-size: 22px; margin-left: 10px; }
#s-pipeline .arrow-d { display: block; width: 28px; height: 30px; margin: 6px 0 6px 12px; color: var(--sa-muted); }
#s-pipeline .strand-big .seq { font-size: 44px; }
#s-pipeline .strand-big .nt { width: 34px; }
#s-pipeline .strand-big .nt,
#s-pipeline .consensus .nt {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.3s ease-out, transform 0.4s var(--ease-back);
  transition-delay: calc(var(--i) * 45ms + 0.15s);
}
#s-pipeline.s1 .strand-big .nt,
#s-pipeline.s4 .consensus .nt { opacity: 1; transform: none; }
#s-pipeline .map { margin-top: 10px; font-size: 22px; color: var(--sa-muted); }
#s-pipeline .map .seq { font-size: 22px; }
#s-pipeline .map .nt { width: 16px; }

#s-pipeline .tube { position: relative; height: 150px; }
#s-pipeline .tube .copy {
  position: absolute;
  left: 0;
  font-size: 30px;
  transition: transform 0.7s var(--ease-out), opacity 0.5s;
  opacity: 0;
}
#s-pipeline .tube .copy .nt { width: 23px; }
#s-pipeline.s2 .tube .copy { opacity: 1; }
#s-pipeline .tube .copy:nth-child(1) { top: 0; transform: translate(0, 40px); }
#s-pipeline .tube .copy:nth-child(2) { top: 40px; transform: translate(0, 0); transition-delay: 0.08s; }
#s-pipeline .tube .copy:nth-child(3) { top: 80px; transform: translate(0, -40px); transition-delay: 0.16s; }
#s-pipeline.s2 .tube .copy:nth-child(1) { transform: translate(40px, 0); }
#s-pipeline.s2 .tube .copy:nth-child(2) { transform: translate(20px, 0); }
#s-pipeline.s2 .tube .copy:nth-child(3) { transform: translate(0, 0); }
#s-pipeline .tube .times { position: absolute; right: 0; top: 34px; font-family: var(--mono); font-weight: 600; font-size: 40px; color: var(--sa-muted); }

#s-pipeline .reads { display: grid; gap: 14px; position: relative; }
#s-pipeline .read { display: flex; align-items: center; gap: 16px; }
#s-pipeline .read .rl { font-size: 20px; color: var(--sa-muted); width: 78px; white-space: nowrap; font-family: var(--mono); }
#s-pipeline .read .seq { font-size: 38px; }
#s-pipeline .read .nt { width: 29px; height: 50px; line-height: 50px; position: relative; border-radius: 7px; }

/* error animations: substitutions flip, insertions grow in, deletions collapse */
#s-pipeline .read .sub b { position: absolute; inset: 0; font-weight: 600; backface-visibility: hidden; transition: transform 0.5s var(--ease-out), opacity 0.3s; }
#s-pipeline .read .sub b.n { transform: rotateX(-90deg); opacity: 0; }
#s-pipeline .read .sub { transition: background-color 0.3s; }
#s-pipeline .read .ins { width: 0; opacity: 0; transform: scale(0.3); transition: width 0.45s var(--ease-out), opacity 0.3s, transform 0.45s var(--ease-back), background-color 0.3s; }
#s-pipeline .read .del { transition: width 0.45s var(--ease-out), opacity 0.4s, color 0.3s; }
#s-pipeline .read .del::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 6px; border-bottom: 4px dashed var(--sa-muted); opacity: 0; transition: opacity 0.3s; }

#s-pipeline.s3 .read .sub b, #s-pipeline.s3 .read .ins, #s-pipeline.s3 .read .del, #s-pipeline.s3 .read .del::after { transition-delay: calc(0.7s + var(--r) * 0.18s); }
#s-pipeline.s3 .read .sub { background: var(--sa-cost); transition-delay: calc(0.7s + var(--r) * 0.18s); }
#s-pipeline.s3 .read .sub b.o { transform: rotateX(90deg); opacity: 0; }
#s-pipeline.s3 .read .sub b.n { transform: none; opacity: 1; color: var(--on-accent); }
#s-pipeline.s3 .read .ins { width: 29px; opacity: 1; transform: none; background: var(--sa-audit); color: var(--on-accent); }
#s-pipeline.s3 .read .del { width: 22px; color: transparent; }
#s-pipeline.s3 .read .del::after { opacity: 1; }

#s-pipeline .legend { display: flex; gap: 24px; margin-top: 22px; font-size: 22px; color: var(--sa-muted); flex-wrap: wrap; }
#s-pipeline .legend span { display: inline-flex; align-items: center; gap: 10px; }
#s-pipeline .legend i { display: inline-block; width: 26px; height: 26px; border-radius: 6px; }
#s-pipeline .legend .l-sub { background: var(--sa-cost); }
#s-pipeline .legend .l-ins { background: var(--sa-audit); }
#s-pipeline .legend .l-del { border-bottom: 4px dashed var(--sa-muted); border-radius: 0; height: 18px; }

#s-pipeline .scan {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 94px;
  width: 34px;
  border-radius: 8px;
  background: var(--tint-audit);
  border: 2px solid var(--sa-audit);
  opacity: 0;
  pointer-events: none;
}
#s-pipeline.s4:not(.s5) .scan { animation: scan 1.8s var(--ease-out) 0.1s both; }
@keyframes scan {
  0% { opacity: 0; transform: translateX(0); }
  10% { opacity: 1; }
  85% { opacity: 1; transform: translateX(400px); }
  100% { opacity: 0; transform: translateX(420px); }
}

#s-pipeline .consensus { display: flex; align-items: center; gap: 18px; }
#s-pipeline .consensus .seq { font-size: 40px; }
#s-pipeline .consensus .nt { width: 30px; }
#s-pipeline .consensus .ok { color: var(--sa-gain); font-weight: 600; font-size: 24px; display: inline-flex; gap: 8px; align-items: center; opacity: 0; transition: opacity 0.4s 1s; }
#s-pipeline.s4 .consensus .ok { opacity: 1; }
#s-pipeline .consensus .ok svg { width: 30px; height: 30px; }
#s-pipeline .how { font-size: 21px; color: var(--sa-muted); margin-top: 8px; }

#s-pipeline .pool { display: flex; gap: 12px; align-items: center; }
#s-pipeline .tile {
  width: 86px; height: 60px; border-radius: 10px; border: 3px solid var(--sa-gain); background: var(--tint-gain);
  display: grid; place-items: center; color: var(--sa-gain); position: relative;
  transition: border-color 0.4s, background-color 0.4s, color 0.4s;
}
#s-pipeline .tile svg { width: 30px; height: 30px; }
#s-pipeline .tile.bad { border-color: var(--sa-cost); background: var(--tint-cost); color: var(--sa-cost); }
#s-pipeline .tile.bad .miss { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; font-size: 16px; font-weight: 600; color: var(--sa-muted); }
#s-pipeline .tile.bad .cross { transition: opacity 0.3s; }
#s-pipeline.s5 .tile.bad { animation: toMissing 0.01s linear 1.2s both; }
#s-pipeline.s5 .tile.bad .cross { opacity: 0; transition-delay: 1.2s; }
#s-pipeline.s5 .tile.bad .miss { opacity: 1; transition: opacity 0.3s 1.2s; }
@keyframes toMissing { to { border-style: dashed; border-color: var(--sa-muted); background: transparent; } }
#s-pipeline .crc { font-size: 22px; color: var(--sa-cost); font-weight: 600; margin-left: 6px; }

#s-pipeline .file { display: flex; align-items: center; gap: 22px; }
#s-pipeline .file .doc {
  width: 92px; height: 112px; border-radius: 12px; border: 3px solid var(--sa-gain); position: relative;
  display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 30px; color: var(--sa-ink);
  background: var(--tint-gain);
}
#s-pipeline .file .doc::before { content: ""; position: absolute; right: -3px; top: -3px; width: 26px; height: 26px; background: var(--sa-paper); border-left: 3px solid var(--sa-gain); border-bottom: 3px solid var(--sa-gain); border-bottom-left-radius: 8px; }
#s-pipeline .file .say { font-size: 26px; line-height: 1.3; }
#s-pipeline .file .say b { color: var(--sa-gain); }

#s-pipeline .flow-arrow { position: absolute; top: 330px; width: 44px; height: 44px; color: var(--sa-muted); opacity: 0; transition: opacity 0.4s; }
#s-pipeline.s3 .fa1, #s-pipeline.s4 .fa2 { opacity: 0.8; }

/* ---------------------------------------------------------------- slide 7: rules vs model
   One real slot, judged twice: the hand rules on the left, our model on the right, the same
   six rows at the same height on both sides. The motion is the original candidate reveal:
   rows slide in staggered, the strike sweeps across a rejected strand while a box marks the
   run that broke the rule, then the scores arrive one at a time. */
.rvm {
  position: absolute; left: 120px; right: 120px; top: 268px;
  display: grid; grid-template-columns: 890px 1fr; gap: 50px; align-items: start;
}
.rvm .pan h3 {
  margin: 0 0 16px; font-size: 30px; font-weight: 600; letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 14px;
}
.rvm .pan h3 em { font-style: normal; font-size: 22px; color: var(--sa-muted); font-weight: 400; }
.rvm .pan.mod h3 { color: var(--sa-audit); }
/* the model panel waits its turn: the rules get to give their verdict first */
#s-rules .pan.mod { opacity: 0; transition: opacity 0.5s var(--ease-out); }
#s-rules.s3 .pan.mod { opacity: 1; }
.rvm .rows { display: grid; gap: 8px; position: relative; }
.rvm .pfoot { margin: 34px 0 0; font-size: 21px; color: var(--sa-muted); }
.rvm .pan.mod .pfoot { margin-top: 64px; }
.rvm .pfoot em { font-style: normal; font-size: 18px; opacity: 0.8; margin-left: 14px; }
.rvm .no { font-family: var(--mono); font-size: 22px; color: var(--sa-muted); }
#s-rules .pill2 b { font-weight: 700; }

/* the rules, left */
#s-rules .cand {
  display: grid; grid-template-columns: 34px 610px 1fr; align-items: center; gap: 16px;
  height: 56px; padding: 0 14px; border-radius: 14px; border: 2px solid transparent;
  opacity: 0; transform: translateX(-30px);
  transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out), background-color 0.4s, border-color 0.4s;
  transition-delay: calc(var(--i) * 70ms);
  position: relative;
}
#s-rules.s1 .cand { opacity: 1; transform: none; }
#s-rules .cand .seq { font-size: 21px; position: relative; }
#s-rules .cand .seq .nt { width: 15px; }
#s-rules .cand .seqwrap { position: relative; display: inline-block; }
#s-rules .cand .why { font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 14px; opacity: 0; transition: opacity 0.4s; }
#s-rules .cand .why-txt { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#s-rules .cand .why-txt svg { width: 26px; height: 26px; flex: none; }
#s-rules .cand .why.bad .why-txt { color: var(--sa-cost); }
#s-rules .cand .strike {
  position: absolute; left: -6px; right: -6px; top: 50%; height: 4px; border-radius: 2px; background: var(--sa-cost);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease-out);
}
#s-rules .cand .runmark {
  position: absolute; top: -3px; bottom: -3px; border: 3px solid var(--sa-cost); border-radius: 9px; background: var(--tint-cost);
  opacity: 0; transition: opacity 0.3s;
}
#s-rules.s2 .cand .why { opacity: 1; transition-delay: calc(0.2s + var(--i) * 90ms); }
#s-rules.s2 .cand.fail .strike { transform: scaleX(1); transition-delay: calc(0.25s + var(--i) * 90ms); }
#s-rules.s2 .cand.fail .runmark { opacity: 1; transition-delay: calc(0.1s + var(--i) * 90ms); }
#s-rules.s2 .cand.fail .seq { opacity: 0.4; transition: opacity 0.5s calc(0.3s + var(--i) * 90ms); }
#s-rules .cand .keep {
  font-size: 20px; font-weight: 600; color: var(--sa-muted); border: 2px solid var(--sa-rule);
  border-radius: 999px; padding: 2px 14px; position: absolute; right: 14px;
  opacity: 0; transition: opacity 0.4s; transition-delay: 1.1s;
}
#s-rules.s2 .cand.picked .keep { opacity: 1; }
#s-rules.s3 .cand.fail { opacity: 0.72; }

/* the model, right: same rows, same stagger, a number on every one of them */
#s-rules .mrow {
  display: grid; grid-template-columns: 34px 1fr 62px 230px; align-items: center; gap: 16px;
  height: 56px; padding: 0 14px; border-radius: 14px; border: 2px solid transparent;
  transition: background-color 0.4s, border-color 0.4s, opacity 0.4s;
}
#s-rules .mrow .track {
  position: relative; height: 24px; border-radius: 999px; background: var(--sa-surface);
  border: 2px solid var(--sa-rule); overflow: hidden;
}
#s-rules .mrow .track i {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--sa-audit);
  transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease-out);
}
#s-rules .mrow .risk {
  font-family: var(--mono); font-weight: 600; font-size: 23px; color: var(--sa-ink); text-align: right;
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.4s, transform 0.4s var(--ease-out), color 0.5s;
}
#s-rules .mrow .mflag {
  font-size: 19px; color: var(--sa-muted); line-height: 1.2;
  opacity: 0; transform: translateX(8px);
  transition: opacity 0.4s, transform 0.4s var(--ease-back);
}
#s-rules .mrow.fail .track i { background: var(--sa-rule); }
#s-rules.s3 .mrow .track i { transform: none; transition-delay: calc(0.1s + var(--i) * 110ms); }
#s-rules.s3 .mrow .risk { opacity: 1; transform: none; transition-delay: calc(0.35s + var(--i) * 110ms); }
#s-rules.s3 .mrow.fail { opacity: 0.55; }
#s-rules.s3 .mrow.pass:not(.kept) { opacity: 0.7; }
/* the one the rules handed over, flagged the way the old slide flagged a risky survivor */
#s-rules.s3 .mrow.airisk {
  border-color: var(--sa-cost); border-style: dashed; background: var(--tint-cost);
  transition-delay: 1.3s, 1.3s;
}
#s-rules.s3 .mrow.airisk .track i { background: var(--sa-cost); }
#s-rules.s3 .mrow.airisk .risk { color: var(--sa-cost); transition-delay: calc(0.35s + var(--i) * 110ms), calc(0.35s + var(--i) * 110ms), 1.3s; }
/* and the one we keep */
#s-rules.s3 .mrow.kept { border-color: var(--sa-gain); background: var(--tint-gain); transition-delay: 1.9s, 1.9s; }
#s-rules.s3 .mrow.kept .track i { background: var(--sa-gain); }
#s-rules.s3 .mrow.kept .risk { color: var(--sa-gain); }
#s-rules.s3 .mrow .mflag { transition-delay: calc(0.6s + var(--i) * 110ms); }
#s-rules.s3 .mrow.airisk .mflag { opacity: 1; transform: none; color: var(--sa-cost); font-weight: 600; transition-delay: 1.5s; }
#s-rules.s3 .mrow.kept .mflag { opacity: 1; transform: none; color: var(--sa-gain); font-weight: 600; transition-delay: 2.1s; }
#s-rules.s3 .mrow.fail .mflag { opacity: 1; transform: none; color: var(--sa-ink); font-weight: 600; }
#s-rules .meanline {
  position: absolute; inset: -6px 0 -40px 0; pointer-events: none;
  display: grid; grid-template-columns: 34px 1fr 62px 230px; gap: 16px; padding: 0 14px;
}
#s-rules .meanline .col { grid-column: 2; position: relative; }
#s-rules .meanline i { position: absolute; left: var(--x); top: 0; bottom: 30px; border-left: 2px dashed var(--sa-muted); }
#s-rules .meanline em {
  position: absolute; left: var(--x); bottom: 0; transform: translateX(-50%);
  font-style: normal; font-size: 18px; color: var(--sa-muted); white-space: nowrap;
  opacity: 0; transition: opacity 0.4s;
}
#s-rules.s3 .meanline em { opacity: 1; transition-delay: 0.9s; }

/* ---------------------------------------------------------------- slide 5: rule audit */

#s-audit .lede { font-size: 29px; max-width: 1640px; }
#s-audit .table {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 368px;
  display: grid;
  grid-template-columns: 520px 1fr 1fr;
  column-gap: 0;
}
#s-audit .th { font-size: 30px; font-weight: 600; padding: 0 28px 16px; border-bottom: 3px solid var(--sa-rule); display: flex; align-items: baseline; gap: 14px; }
#s-audit .th small { font-size: 22px; font-weight: 500; color: var(--sa-muted); }
#s-audit .row { display: contents; }
#s-audit .cell { padding: 16px 28px; border-bottom: 2px solid var(--sa-rule); min-height: 124px; display: flex; flex-direction: column; justify-content: center; gap: 8px; position: relative; }
#s-audit .rulecell { flex-direction: row; align-items: center; justify-content: flex-start; gap: 22px; }
#s-audit .rulecell .rt { font-size: 32px; font-weight: 600; line-height: 1.15; }
#s-audit .rulecell .rs { font-size: 21px; color: var(--sa-muted); font-weight: 500; font-family: var(--mono); margin-top: 4px; }
#s-audit .toggle {
  flex: none; width: 76px; height: 42px; border-radius: 21px; background: var(--sa-audit); position: relative;
  transition: background-color 0.25s;
}
#s-audit .toggle::after { content: ""; position: absolute; top: 5px; left: 39px; width: 32px; height: 32px; border-radius: 50%; background: var(--sa-paper); transition: left 0.25s var(--ease-out); }
#s-audit.s1:not(.s2) .toggle { animation: toggleBg 1.6s ease-in-out both; animation-delay: calc(var(--i) * 0.35s + 0.2s); }
#s-audit.s1:not(.s2) .toggle::after { animation: toggleKnob 1.6s ease-in-out both; animation-delay: calc(var(--i) * 0.35s + 0.2s); }
@keyframes toggleBg { 0%, 100% { background: var(--sa-audit); } 25%, 70% { background: var(--sa-muted); } }
@keyframes toggleKnob { 0%, 100% { left: 39px; } 25%, 70% { left: 5px; } }
#s-audit .measuring {
  position: absolute; left: 28px; right: 28px; top: 50%; height: 12px; margin-top: -6px; border-radius: 6px;
  background: linear-gradient(90deg, transparent, var(--tint-audit), var(--sa-audit), var(--tint-audit), transparent);
  background-size: 50% 100%; background-repeat: no-repeat; opacity: 0;
}
#s-audit.s1:not(.s2) .c-nanopore .measuring, #s-audit.s1:not(.s3) .c-illumina .measuring { animation: shimmer 1.4s linear infinite; opacity: 0.8; }
@keyframes shimmer { from { background-position: -60% 0; } to { background-position: 160% 0; } }
#s-audit .c-nanopore .v, #s-audit .c-illumina .v { opacity: 0; transform: scale(0.7); transition: opacity 0.35s, transform 0.55s var(--ease-back); transition-delay: calc(var(--i) * 0.22s); }
#s-audit.s2 .c-nanopore .v, #s-audit.s3 .c-illumina .v { opacity: 1; transform: none; }
#s-audit .reads { font-size: 23px; color: var(--sa-muted); }
#s-audit .reads .val { color: var(--sa-ink); font-size: 25px; }
#s-audit .rowhl {
  position: absolute; left: -16px; right: -16px; border: 4px solid var(--sa-audit); border-radius: 20px;
  opacity: 0; transform: scale(1.02); transition: opacity 0.4s, transform 0.5s var(--ease-out); pointer-events: none;
}
#s-audit.s4 .rowhl { opacity: 1; transform: none; }
#s-audit .callout { position: absolute; left: 120px; right: 120px; top: 872px; }
#s-audit .callout .big { display: block; font-size: 40px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
#s-audit .callout .muted { display: block; margin-top: 6px; }
#s-audit .legend { position: absolute; left: 120px; right: 120px; top: 884px; display: flex; gap: 18px; flex-wrap: wrap; transition: opacity 0.4s; }
#s-audit .legend .verdict { font-size: 22px; padding: 5px 16px 5px 8px; }
#s-audit .legend .verdict svg { width: 26px; height: 26px; }
#s-audit.s4 .legend { opacity: 0; }

/* ---------------------------------------------------------------- slide 6: tier 2 */


  position: absolute; top: -8px; bottom: 4px; border-radius: 12px;
  background: var(--tint-cost); border: 3px solid var(--sa-cost); opacity: 0; transform: scale(0.8);
  transition: opacity 0.35s, transform 0.5s var(--ease-back); transition-delay: calc(var(--k) * 0.25s);
}
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 var(--tint-cost); } 50% { box-shadow: 0 0 0 12px var(--tint-cost), 0 0 34px 6px var(--tint-cost); } }
  position: absolute; font-size: 24px; font-weight: 600; color: var(--sa-cost); white-space: nowrap;
  opacity: 0; transition: opacity 0.35s; transition-delay: calc(var(--k) * 0.25s + 0.2s);
}
  position: absolute; left: 0; top: 16px; font-size: 26px; font-weight: 600; color: var(--sa-gain);
  display: flex; align-items: center; gap: 12px; opacity: 0; transition: opacity 0.4s 0.7s;
}

/* ---------------------------------------------------------------- slide 7: loop and Pareto */

@keyframes spin { to { transform: rotate(360deg); } }
  position: absolute; width: 248px; transform: translate(-50%, -50%) scale(0.85); opacity: 0;
  padding: 10px 14px 12px; text-align: center; font-size: 24px; font-weight: 600; line-height: 1.2;
  background: var(--sa-surface); border: 2px solid var(--sa-rule); border-radius: 18px;
  transition: opacity 0.4s, transform 0.55s var(--ease-back), border-color 0.4s; transition-delay: calc(var(--i) * 0.28s);
}

.chart text { font-family: var(--sans); fill: var(--sa-muted); }
.chart .axis { stroke: var(--sa-muted); stroke-width: 2.5; fill: none; }
.chart .grid { stroke: var(--sa-rule); stroke-width: 1.5; }
.chart .tick { font-family: var(--mono); font-size: 21px; }
.chart .alabel { font-size: 24px; font-weight: 600; fill: var(--sa-ink); }
.chart .note { font-size: 22px; }

/* ---------------------------------------------------------------- crossover matrix (slide 11) */

  height: 104px; border-radius: 16px; background: var(--sa-surface); border: 2px solid var(--sa-rule);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: relative;
  opacity: 0; transform: scale(0.9); transition: opacity 0.35s, transform 0.5s var(--ease-back); transition-delay: calc(var(--i) * 0.1s + 0.2s);
}

  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 12px 20px;
  border-radius: 18px; background: var(--sa-surface); border: 2px solid var(--sa-rule);
  opacity: 0; transform: translateX(24px); transition: opacity 0.4s, transform 0.55s var(--ease-out); transition-delay: calc(var(--i) * 0.22s);
}
  position: absolute; left: 700px; top: 118px; font-size: 27px; font-weight: 600; color: var(--sa-ink);
  background: var(--sa-surface); border: 2px solid var(--sa-audit); border-radius: 14px; padding: 10px 18px;
}

/* ---------------------------------------------------------------- results cards and close (slide 16) */

#s-results .grid { position: absolute; left: 120px; right: 120px; top: 282px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; transition: transform 0.7s var(--ease-out), opacity 0.5s; }
#s-results .rc { padding: 22px 30px; min-height: 176px; opacity: 0; transform: translateY(20px); transition: opacity 0.45s, transform 0.6s var(--ease-out); transition-delay: calc(var(--i) * 0.12s); }
#s-results.s1 .rc { opacity: 1; transform: none; }
#s-results .rc h4 { margin: 0 0 12px; font-size: 26px; font-weight: 600; color: var(--sa-muted); }
#s-results .rc .main { font-size: 31px; font-weight: 600; line-height: 1.28; }
#s-results .rc .main .val { font-size: 44px; }
#s-results .rc .main .arrow { color: var(--sa-muted); margin: 0 10px; }
#s-results .rc .sm { font-size: 23px; color: var(--sa-muted); margin-top: 8px; }
#s-results .rc .ph { font-size: 25px; }
#s-results .close {
  position: absolute; left: 120px; right: 120px; top: 736px;
  display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center;
  padding-top: 30px; border-top: 3px solid var(--sa-rule);
  opacity: 0; transform: translateY(24px); transition: opacity 0.5s, transform 0.7s var(--ease-out);
}
#s-results.s2 .close { opacity: 1; transform: none; }
#s-results .close .mark { width: 150px; height: 150px; }
#s-results .close .tl { font-size: 64px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
#s-results .close .tl span { color: var(--sa-audit); }
#s-results .close .honest { font-size: 27px; color: var(--sa-muted); margin-top: 10px; }
#s-results .close .who { display: flex; gap: 28px; align-items: baseline; flex-wrap: wrap; font-size: 25px; color: var(--sa-muted); margin-top: 12px; }
#s-results .close .who .repo { font-family: var(--mono); font-weight: 600; font-size: 25px; color: var(--sa-audit); }
#s-results .close .who .team { color: var(--sa-ink); font-weight: 600; }

/* ---------------------------------------------------------------- appendix */

.appx .layout { position: absolute; left: 120px; right: 120px; top: 272px; }
.appx .two { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.appx .box { padding: 28px 32px; }
.appx .box h3 { margin: 0 0 14px; font-size: 32px; font-weight: 600; }
.appx .box p, .appx .box li { font-size: 24px; line-height: 1.4; color: var(--sa-muted); }
.appx .box p { margin: 0 0 12px; }
.appx .box ul { margin: 0; padding-left: 26px; }
.appx .box b { color: var(--sa-ink); }
.appx table.mini { border-collapse: collapse; margin: 4px 0 10px; font-size: 22px; }
.appx table.mini th { font-weight: 600; color: var(--sa-muted); text-align: right; padding: 4px 22px 6px 0; font-size: 20px; }
.appx table.mini th:first-child, .appx table.mini td:first-child { text-align: left; width: 120px; }
.appx table.mini td { font-family: var(--mono); font-weight: 600; text-align: right; padding: 4px 22px 4px 0; color: var(--sa-ink); border-top: 1.5px solid var(--sa-rule); }
.appx table.mini td.audit { color: var(--sa-audit); }
.appx .src { font-size: 21px; color: var(--sa-muted); line-height: 1.35; }
.appx .io { display: grid; grid-template-columns: 150px 1fr; gap: 8px 18px; font-size: 25px; line-height: 1.35; margin-bottom: 14px; }
.appx .io dt { font-weight: 600; color: var(--sa-audit); }
.appx .io dd { margin: 0; color: var(--sa-ink); }
.appx .formula {
  font-family: var(--mono); font-size: 23px; line-height: 1.55; padding: 20px 26px; border-radius: 18px;
  background: var(--sa-surface); border: 2px solid var(--sa-rule); white-space: pre; color: var(--sa-ink);
}
.appx .formula .c { color: var(--sa-muted); }
.appx table.ft { border-collapse: collapse; width: 100%; font-size: 23px; }
.appx table.ft td { padding: 9px 12px; border-bottom: 2px solid var(--sa-rule); vertical-align: top; line-height: 1.3; }
.appx table.ft td:first-child { font-weight: 600; white-space: nowrap; color: var(--sa-ink); }
.appx table.ft td:last-child { color: var(--sa-muted); }
.appx .chain { display: grid; gap: 12px; }
.appx .chain .cs { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; font-size: 25px; line-height: 1.35; }
.appx .chain .cs > div span { color: var(--sa-muted); }

#a-cctt .hotlist {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 40px;
  margin: 260px auto 0; max-width: 1680px;
}
#a-cctt .hitem {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 48px 64px; border-radius: 26px; background: var(--sa-surface); border: 2px solid var(--sa-rule);
}
#a-cctt .hitem .seq { font-size: 68px; }
#a-cctt .hitem .nt { width: 46px; }
#a-cctt .hitem .htag { font-size: 22px; font-weight: 600; color: var(--sa-cost); text-transform: uppercase; letter-spacing: 0.04em; }

.qa { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 44px; }
.qa .q { font-size: 28px; font-weight: 600; line-height: 1.25; margin: 0 0 8px; }
.qa .a { font-size: 23.5px; line-height: 1.42; color: var(--sa-muted); margin: 0; }
.qa .a .ph { font-size: 20px; }
.qa > div { padding: 22px 26px; }

/* ---------------------------------------------------------------- appendix A0: architecture */

.archlike .arch { position: absolute; left: 120px; top: 258px; width: 1680px; height: 700px; }
.archlike .abox {
  position: absolute; border-radius: 16px; border: 2px solid var(--sa-rule); background: var(--sa-surface);
  padding: 14px 18px;
}
.archlike .abox h4 { margin: 0 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.archlike .abox h4 .n { font-family: var(--mono); font-size: 20px; color: var(--sa-muted); font-weight: 600; }
.archlike .abox ul { margin: 0; padding-left: 22px; }
.archlike .abox li, .archlike .abox p { font-size: 20.5px; line-height: 1.3; color: var(--sa-muted); margin: 0 0 3px; }
.archlike .abox ul { padding-left: 20px; }
.archlike .abox .afoot { font-size: 19px; color: var(--sa-muted); margin-top: 8px; font-style: normal; opacity: 0.9; }
.archlike .abox.learned { border-color: var(--sa-audit); background: var(--tint-audit); }
.archlike .abox.learned h4 { color: var(--sa-audit); }
.archlike .abox.learned li, .archlike .abox.learned p { color: var(--sa-ink); }
.archlike .abox.firewall { border-style: dashed; border-color: var(--sa-muted); background: transparent; }
/* the dashed box is a fragment too, so it may only dim itself once it is on */
.archlike .abox.firewall.on { opacity: 0.85; }
.archlike .sub { position: relative; border-radius: 12px; border: 2px solid var(--sa-rule); padding: 8px 12px; margin-bottom: 8px; background: var(--sa-paper); }
.archlike .sub:last-child { margin-bottom: 0; }
.archlike .sub b { font-size: 22px; display: block; margin-bottom: 2px; }
.archlike .sub.learned { border-color: var(--sa-audit); background: var(--tint-audit); }
.archlike .sub.learned b { color: var(--sa-audit); }
.archlike .tagl {
  position: absolute; top: -13px; right: 12px; font-size: 16px; font-weight: 600; letter-spacing: 0.02em;
  padding: 1px 10px; border-radius: 999px; background: var(--sa-audit); color: var(--on-accent);
}
.archlike svg.wires { position: absolute; left: 0; top: 0; overflow: visible; }
.archlike svg.wires path { fill: none; stroke: var(--sa-muted); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.archlike svg.wires path.learnedwire { stroke: var(--sa-audit); }
.archlike svg.wires path.dash { stroke-dasharray: 8 7; }
.archlike svg.wires text { fill: var(--sa-muted); font-family: var(--sans); font-size: 19px; }
.archlike .legend { position: absolute; right: 0; top: -62px; display: flex; gap: 22px; font-size: 20px; color: var(--sa-muted); }
.archlike .legend span { display: inline-flex; align-items: center; gap: 9px; }
.archlike .legend i { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--sa-rule); background: var(--sa-surface); }
.archlike .legend i.learned { border-color: var(--sa-audit); background: var(--tint-audit); }
.archlike .legend i.firewall { border-style: dashed; border-color: var(--sa-muted); background: transparent; }

/* A0 itself: five boxes, so each one can breathe. The arrows carry the argument. */
#a-arch .abox { display: flex; flex-direction: column; justify-content: center; padding: 16px 22px; }
#a-arch .abox h4 { margin: 0 0 6px; font-size: 30px; }
#a-arch .abox p { font-size: 21px; line-height: 1.28; }
#a-arch .sub { margin-bottom: 16px; padding: 10px 14px; }
#a-arch .sub:last-child { margin-bottom: 0; }
#a-arch .sub b { font-size: 24px; margin-bottom: 0; }
#a-arch .sub p { font-size: 20px; margin: 2px 0 0; }
#a-arch svg.wires text.key { fill: var(--sa-audit); font-weight: 600; }

/* ---------------------------------------------------------------- overlays */

.overlay {
  position: fixed; inset: 0; z-index: 50; display: none;
  background: color-mix(in srgb, var(--sa-paper) 94%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.overlay.open { display: grid; place-items: center; }
.help-card {
  width: min(1100px, 92vw); max-height: 92vh; overflow: auto; padding: 36px 44px; font-size: 19px;
  background: var(--sa-surface); border: 2px solid var(--sa-rule); border-radius: 22px; box-shadow: var(--shadow);
}
.help-card h2 { font-size: 30px; margin-bottom: 18px; }
.help-card .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 48px; }
.help-card .k { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--sa-rule); }
.help-card kbd {
  font-family: var(--mono); font-size: 15px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  border: 1.5px solid var(--sa-rule); background: var(--sa-surface-2); color: var(--sa-ink); white-space: nowrap;
}
.help-card p { color: var(--sa-muted); margin: 16px 0 0; line-height: 1.5; }

.blackout { position: fixed; inset: 0; background: #000; z-index: 60; display: none; }
html.black:not(.layout-presenter) .blackout { display: block; }
html.black:not(.layout-presenter) { cursor: none; }

.toast {
  position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%) translateY(20px); z-index: 70;
  font-size: 17px; font-weight: 600; padding: 10px 18px; border-radius: 12px;
  background: var(--sa-ink); color: var(--sa-paper); opacity: 0; transition: opacity 0.25s, transform 0.3s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%); }

/* overview grid: the real slides, scaled and laid out in a grid */
html.overview .slide {
  transform: var(--ov-t);
  opacity: 1; visibility: visible; transition: transform 0.45s var(--ease-out), opacity 0.3s;
  transform-origin: 0 0; cursor: pointer; border-radius: 22px; outline: 4px solid var(--sa-rule); z-index: 1;
}
html.overview .slide.ov-sel { outline: 14px solid var(--sa-audit); z-index: 3; }
html.overview .slide * { pointer-events: none; }
html.overview .slide .ovnum {
  display: block; position: absolute; left: 30px; top: 22px; font: 600 64px var(--mono); color: var(--sa-muted); z-index: 5;
}
.ovnum { display: none; }
html.overview .progress { display: none; }

/* ---------------------------------------------------------------- motion off (prefers-reduced-motion or M) */

html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  transition-property: opacity, color, background-color, border-color, visibility !important;
  transition-duration: 0.25s !important;
  transition-delay: 0s !important;
  animation-duration: 0.001s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
}
html.reduce-motion .slide { transform: none !important; }
html.reduce-motion.overview .slide { transform: var(--ov-t) !important; }

/* ---------------------------------------------------------------- embed (presenter previews) */

html.embed .progress, html.embed .toast { display: none; }
html.embed, html.embed body { cursor: default; }

/* ---------------------------------------------------------------- presenter layout */

#presenter { display: none; }
html.layout-presenter body { overflow: hidden; }
html.layout-presenter #presenter {
  display: grid;
  position: fixed;
  inset: 0;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  background: #DFF0E6;
  color: #08130B;
  font-family: var(--sans);
  z-index: 40;
}
html.layout-presenter .progress { display: none; }
.p-top {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  font-size: 18px; padding: 4px 6px;
}
.p-top .p-slide { font-weight: 600; font-size: 22px; }
.p-top .p-slide .mono { color: #3E6B52; font-size: 18px; margin-left: 8px; }
.p-top .p-spacer { flex: 1; }
.p-timer { display: flex; align-items: center; gap: 10px; }
.p-timer .p-elapsed { font-family: var(--mono); font-weight: 600; font-size: 44px; letter-spacing: -0.02em; min-width: 140px; text-align: right; }
.p-btn {
  font: 600 16px var(--sans); color: inherit; background: rgba(127, 140, 145, 0.18); border: 1.5px solid rgba(127, 140, 145, 0.4);
  border-radius: 10px; padding: 8px 14px; cursor: pointer;
}
.p-btn:hover { background: rgba(127, 140, 145, 0.3); }
.p-btn:focus-visible { outline: 3px solid #10A6C4; outline-offset: 2px; }
.p-pace { font-weight: 600; font-size: 20px; padding: 8px 16px; border-radius: 999px; border: 2px solid currentColor; white-space: nowrap; }
.p-pace.on { color: #0E9C55; }
.p-pace.ahead { color: #10A6C4; }
.p-pace.behind { color: #C41477; }
.p-pace.idle { color: #3E6B52; }
.p-clock { font-family: var(--mono); font-size: 26px; font-weight: 600; opacity: 0.85; }
.p-flags { display: flex; gap: 8px; }
.p-flag { font-size: 15px; font-weight: 600; padding: 4px 10px; border-radius: 8px; background: rgba(127, 140, 145, 0.2); }
.p-flag.warn { background: #FFE13D; color: #08130B; }
.p-flag.black { background: #000; color: #fff; border: 1.5px solid #fff; }
.p-left { display: grid; grid-template-rows: minmax(0, 1.75fr) minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
.p-nextrow { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; min-height: 0; }
.p-side { min-height: 0; overflow: auto; display: grid; align-content: start; gap: 6px; }
.p-next-title { font-size: 20px; font-weight: 600; }
.p-cur { position: relative; min-height: 0; border-radius: 12px; overflow: hidden; outline: 3px solid #10A6C4; }
html.layout-presenter .p-cur .viewport { position: absolute; inset: 0; }
.p-plan { padding: 6px 4px 2px; }
.p-plan .p-bar { position: relative; height: 34px; border-radius: 8px; background: rgba(127, 140, 145, 0.16); overflow: hidden; }
.p-plan .p-seg { position: absolute; top: 0; bottom: 0; border-right: 2px solid rgba(8, 19, 11, 0.22); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; color: #3E6B52; }
.p-plan .p-seg.cur { background: rgba(163, 166, 255, 0.35); color: inherit; }
.p-plan .p-seg.done { background: rgba(127, 140, 145, 0.18); }
.p-plan .p-now { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; background: #8A7A00; border-radius: 2px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.p-plan .p-planlab { display: flex; justify-content: space-between; font-size: 15px; color: #3E6B52; margin-top: 6px; font-family: var(--mono); }
.p-right { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; }
.p-label { font-size: 15px; font-weight: 600; color: #3E6B52; letter-spacing: 0.02em; }
.p-next { position: relative; min-height: 0; border-radius: 10px; overflow: hidden; background: #CFE6D8; opacity: 0.92; }
.p-next iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.p-next .p-end { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; color: #3E6B52; background: #CFE6D8; }
.p-next .p-end[hidden] { display: none; }
.p-builds { font-size: 17px; color: #3E6B52; line-height: 1.45; margin-top: 6px; }
.p-builds b { color: inherit; }
.p-builds .nextb { color: #8A7A00; font-weight: 600; }
.p-notes {
  min-height: 0; overflow: auto; padding: 18px 22px; border-radius: 12px; background: rgba(127, 140, 145, 0.1);
  font-size: var(--notes-size, 27px); line-height: 1.5;
}
.p-notes .p-target { font-family: var(--mono); font-size: 0.62em; color: #3E6B52; margin-bottom: 10px; display: block; }
.p-notes p { margin: 0 0 0.7em; }
.p-notes .cue {
  display: inline-block; font-family: var(--mono); font-size: 0.62em; font-weight: 600; vertical-align: 0.12em;
  color: #FFFFFF; background: #10A6C4; border-radius: 6px; padding: 1px 8px; margin-right: 4px;
}
.p-notes .cue.done { opacity: 0.4; }
.p-notes .cue.next { background: #FFE13D; color: #08130B; }
.p-notes .ph { font-size: 0.78em; color: #8A7A00; background: #EAF5DA; border-color: #A9B81C; }
.p-notes .val { color: #0E9C55; }
.p-notes .aside { color: #3E6B52; font-size: 0.8em; }

#s-title .gloss { margin: 14px 0 0; font-size: 30px; font-weight: 500; letter-spacing: 0; color: var(--sa-muted); }

/* ---------------------------------------------------------------- slide 2: system overview */
/* Image -> bits -> (line) -> DNA letters, stacked under the bits -> many strands, in the middle.
   Click-driven: the slide gets .s1 .s2 .s3 .s4 cumulatively as the presenter advances. */

#s-overview .ov-image {
  position: absolute;
  left: 228px;
  top: 424px;
  width: 184px;
  height: 184px;
  color: var(--sa-audit);
  opacity: 1;
  transition: opacity 0.5s var(--ease-out);
}
#s-overview.s1 .ov-image { opacity: 0; }

#s-overview .bit {
  position: absolute;
  width: 40px;
  margin-left: -20px;
  margin-top: -18px;
  text-align: center;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 38px;
  color: var(--sa-ink);
  opacity: 0;
  transform: translate(0, 0);
  transition: opacity 0.5s var(--ease-out), transform 0.9s var(--ease-out);
}
#s-overview.s1 .bit { opacity: 1; }
#s-overview.s2 .bit { transform: translate(var(--dx), var(--dy)); }
#s-overview.s4 .bit { opacity: 0; }

#s-overview .ov-divider {
  position: absolute;
  left: 170px;
  top: 505px;
  width: 690px;
  height: 0;
  border-top: 2px dashed var(--sa-rule);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
#s-overview.s3 .ov-divider { opacity: 1; }
#s-overview.s4 .ov-divider { opacity: 0; }

#s-overview .ov-shift {
  position: absolute;
  left: 170px;
  top: 522px;
  transform: scale(1.34);
  transform-origin: 350px 40px;
  transition: transform 1.1s var(--ease-out);
}
#s-overview.s4 .ov-shift { transform: translate(430px, 0) scale(1.34); }

#s-overview .ov-lettertext { position: relative; top: -14px; opacity: 0; transition: opacity 0.5s var(--ease-out); }
#s-overview .ov-lettertext .seq { font-size: 44px; }
#s-overview .ov-lettertext .seq .nt { width: 31px; }
#s-overview.s3 .ov-lettertext { opacity: 1; }
#s-overview.s4 .ov-lettertext { opacity: 0; }

#s-overview .ov-structs { position: relative; }
#s-overview .struct {
  position: absolute;
  width: 46px;
  height: 64px;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-back);
}
#s-overview .struct .s1 { stroke: var(--sa-audit); }
#s-overview .struct .s2 { stroke: var(--sa-cost); }
#s-overview .struct .rg { stroke: var(--sa-gain); }
#s-overview.s4 .struct { opacity: 1; }

/* s5: a pale, frosted block settles in around the structures, portraying storage as frozen in ice */
#s-overview .ov-vault {
  position: absolute;
  left: 215px;
  top: -55px;
  width: 275px;
  height: 290px;
  border-radius: 32px;
  background: rgba(120, 195, 225, 0.2);
  border: 2px solid rgba(80, 165, 205, 0.45);
  backdrop-filter: blur(3px);
  box-shadow: inset 0 0 34px rgba(255, 255, 255, 0.55), 0 0 30px rgba(80, 165, 205, 0.16);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-back);
}
#s-overview.s5 .ov-vault { opacity: 1; transform: scale(1); }
#s-overview.s7 .ov-vault { opacity: 0; transform: scale(0.92); }

#s-overview .ov-glow {
  position: absolute;
  left: 215px;
  top: -55px;
  width: 275px;
  height: 290px;
  border-radius: 32px;
  background: radial-gradient(ellipse at 50% 40%, rgba(57, 230, 255, 0.42), rgba(57, 230, 255, 0) 68%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
#s-overview.s6 .ov-glow { opacity: 1; }
#s-overview.s7 .ov-glow { opacity: 0; }

/* s6: read out with rapid light shots from different angles, each popping a couple of bits */
#s-overview .ov-scan { position: absolute; inset: 0; opacity: 1; transition: opacity 0.5s var(--ease-out); }
#s-overview.s7 .ov-scan { opacity: 0; }

#s-overview .fbeam {
  position: absolute;
  left: 348px;
  top: -160px;
  width: 8px;
  height: 250px;
  margin-left: -4px;
  border-radius: 4px;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, rgba(255, 250, 224, 0.95), rgba(255, 250, 224, 0) 82%);
  opacity: 0;
}
#s-overview .flash-1 .fbeam { transform: rotate(-68deg); }
#s-overview .flash-2 .fbeam { transform: rotate(-32deg); }
#s-overview .flash-3 .fbeam { transform: rotate(0deg); }
#s-overview .flash-4 .fbeam { transform: rotate(32deg); }
#s-overview .flash-5 .fbeam { transform: rotate(68deg); }

#s-overview .fbit {
  position: absolute;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 24px;
  opacity: 0;
  transform: scale(0.3);
}
#s-overview .flash-1 .fbit:nth-child(2) { left: 145px; top: -15px; }
#s-overview .flash-1 .fbit:nth-child(3) { left: 128px; top: 30px; }
#s-overview .flash-2 .fbit:nth-child(2) { left: 245px; top: -95px; }
#s-overview .flash-2 .fbit:nth-child(3) { left: 210px; top: -70px; }
#s-overview .flash-3 .fbit:nth-child(2) { left: 335px; top: -108px; }
#s-overview .flash-3 .fbit:nth-child(3) { left: 372px; top: -108px; }
#s-overview .flash-4 .fbit:nth-child(2) { left: 460px; top: -95px; }
#s-overview .flash-4 .fbit:nth-child(3) { left: 495px; top: -70px; }
#s-overview .flash-5 .fbit:nth-child(2) { left: 560px; top: -15px; }
#s-overview .flash-5 .fbit:nth-child(3) { left: 578px; top: 30px; }

@keyframes beamFlash { 0%, 100% { opacity: 0; } 18% { opacity: 1; } 45% { opacity: 0; } }
@keyframes bitPop { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }

#s-overview.s6 .flash-1 .fbeam { animation: beamFlash 0.9s var(--ease-out) 0s; }
#s-overview.s6 .flash-2 .fbeam { animation: beamFlash 0.9s var(--ease-out) 0.22s; }
#s-overview.s6 .flash-3 .fbeam { animation: beamFlash 0.9s var(--ease-out) 0.44s; }
#s-overview.s6 .flash-4 .fbeam { animation: beamFlash 0.9s var(--ease-out) 0.66s; }
#s-overview.s6 .flash-5 .fbeam { animation: beamFlash 0.9s var(--ease-out) 0.88s; }
#s-overview.s6 .flash-1 .fbit { animation: bitPop 0.5s var(--ease-back) 0.1s both; }
#s-overview.s6 .flash-2 .fbit { animation: bitPop 0.5s var(--ease-back) 0.32s both; }
#s-overview.s6 .flash-3 .fbit { animation: bitPop 0.5s var(--ease-back) 0.54s both; }
#s-overview.s6 .flash-4 .fbit { animation: bitPop 0.5s var(--ease-back) 0.76s both; }
#s-overview.s6 .flash-5 .fbit { animation: bitPop 0.5s var(--ease-back) 0.98s both; }

/* s7: the strands fade, the vault fades, and everything on the left is done */
#s-overview.s7 .struct { opacity: 0; }

/* s7 to s8: on the right, abstract fragments repuzzle into bits, then resolve into the file */
#s-overview .ov-right { position: absolute; inset: 0; }
#s-overview .rbit {
  position: absolute;
  width: 40px;
  margin-left: -20px;
  margin-top: -18px;
  text-align: center;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 38px;
  color: var(--sa-ink);
  opacity: 0;
  transform: translate(var(--sx), var(--sy)) rotate(var(--srot));
  transition: opacity 0.5s var(--ease-out), transform 1s var(--ease-out);
}
#s-overview.s7 .rbit { opacity: 1; transform: translate(0, 0) rotate(0deg); }
#s-overview.s8 .rbit { opacity: 0; }

#s-overview .ov-image-r {
  position: absolute;
  left: 1460px;
  top: 456px;
  width: 130px;
  height: 130px;
  color: var(--sa-audit);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
#s-overview.s8 .ov-image-r { opacity: 1; }
#s-overview.s5 .ov-cap-3 { opacity: 0; }
#s-overview.s5 .ov-cap-5 { opacity: 1; left: 630px; }
#s-overview.s6 .ov-cap-5 { opacity: 0; }
#s-overview.s6 .ov-cap-6 { opacity: 1; left: 630px; }
#s-overview.s9 .ov-cap-6 { opacity: 0; }
#s-overview.s9 .ov-cap-7 { opacity: 1; left: 170px; }

/* ---------------------------------------------------------------- slide 3: why dna */

#s-benefits .ben-stats {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 300px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
#s-benefits .ben-stat { padding: 40px 44px; }
#s-benefits .ben-stat .n {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 64px;
  letter-spacing: -0.02em;
  color: var(--sa-ink);
  line-height: 1;
}
#s-benefits .ben-stat .n small { font-size: 28px; font-weight: 500; color: var(--sa-muted); margin-left: 12px; }
#s-benefits .ben-stat .d { margin-top: 18px; font-size: 24px; line-height: 1.42; color: var(--sa-muted); }

/* density card: a tiny helix next to a pile of drives, same data */
#s-benefits .ben-compare {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 2px solid var(--sa-rule);
  display: flex;
  align-items: center;
  gap: 22px;
}
#s-benefits .ben-cmp-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; flex: none; height: 108px; }
#s-benefits .ben-cmp-dna { width: 13px; height: 18px; color: var(--sa-gain); flex: none; }
#s-benefits .ben-cmp-item span { font-size: 16px; color: var(--sa-muted); text-align: center; max-width: 130px; line-height: 1.25; }
#s-benefits .ben-cmp-eq { font-size: 26px; color: var(--sa-rule); flex: none; align-self: center; margin-bottom: 28px; }
#s-benefits .ben-cmp-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  width: 272px;
  flex: none;
}
#s-benefits .ben-cmp-grid svg { width: 20px; height: 20px; color: var(--sa-muted); }
#s-benefits .ben-cmp-drives span { max-width: 230px; }

/* durability card: bars to scale, time until refresh or loss */
#s-benefits .ben-bars { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--sa-rule); display: grid; gap: 10px; }
#s-benefits .ben-bar-row { display: grid; grid-template-columns: 52px 1fr 76px; align-items: center; gap: 12px; }
#s-benefits .ben-bar-lbl { font-size: 17px; color: var(--sa-muted); }
#s-benefits .ben-bar { height: 12px; border-radius: 6px; background: var(--sa-rule); }
#s-benefits .ben-bar-dna { background: var(--sa-gain); }
#s-benefits .ben-bar-val { font-family: var(--mono); font-size: 16px; color: var(--sa-muted); text-align: right; white-space: nowrap; }

#s-benefits .ben-sub {
  position: absolute;
  left: 120px;
  top: 764px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--sa-muted);
}

#s-benefits .ben-cases {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 862px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
#s-benefits .ben-case { padding: 22px 24px; }
#s-benefits .ben-case .ico { width: 30px; height: 30px; color: var(--sa-gain); margin-bottom: 12px; }
#s-benefits .ben-case h4 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
#s-benefits .ben-case p { margin: 8px 0 0; font-size: 18px; line-height: 1.32; color: var(--sa-muted); }

/* ---------------------------------------------------------------- slide 4: the problem, today */
/* Starts at slide 2's stored state. One strand degrades, gets misread, and the file comes back corrupted. */

#s-errors .crp-vault {
  position: absolute;
  left: 845px;
  top: 487px;
  width: 275px;
  height: 290px;
  border-radius: 32px;
  background: rgba(210, 236, 248, 0.8);
  border: 1.5px solid rgba(235, 248, 253, 0.9);
  backdrop-filter: blur(3px);
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.5), 0 0 26px rgba(200, 232, 248, 0.15);
  opacity: 1;
  transition: opacity 0.6s var(--ease-out);
}
#s-errors .crp-glow {
  position: absolute;
  left: 845px;
  top: 487px;
  width: 275px;
  height: 290px;
  border-radius: 32px;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 250, 224, 0.35), rgba(255, 250, 224, 0) 68%);
  opacity: 1;
  transition: opacity 0.6s var(--ease-out);
}
#s-errors.s3 .crp-vault, #s-errors.s3 .crp-glow { opacity: 0; }

#s-errors .crp-struct { position: absolute; width: 46px; height: 64px; opacity: 1; transition: opacity 0.6s var(--ease-out); }
#s-errors .crp-struct .s1 { stroke: var(--sa-audit); }
#s-errors .crp-struct .s2 { stroke: var(--sa-cost); }
#s-errors .crp-struct .rg { stroke: var(--sa-gain); }
#s-errors.s3 .crp-struct { opacity: 0; }

#s-errors .crp-struct-bad .s1, #s-errors .crp-struct-bad .s2, #s-errors .crp-struct-bad .rg {
  transition: stroke 0.6s var(--ease-out);
}
#s-errors .crp-struct-bad .s2 { transition: stroke 0.6s var(--ease-out), stroke-dasharray 0.6s var(--ease-out), opacity 0.6s var(--ease-out); }
#s-errors.s1 .crp-struct-bad {
  animation: crpShake 0.5s var(--ease-out) 1;
}
#s-errors.s1 .crp-struct-bad .s1,
#s-errors.s1 .crp-struct-bad .s2,
#s-errors.s1 .crp-struct-bad .rg { stroke: var(--sa-cost); }
#s-errors.s1 .crp-struct-bad .s2 { stroke-dasharray: 6 8; opacity: 0.55; }
@keyframes crpShake {
  0%, 100% { transform: rotate(5deg) scale(1.15); }
  25% { transform: rotate(5deg) scale(1.15) translate(-4px, 2px) rotate(-4deg); }
  50% { transform: rotate(5deg) scale(1.15) translate(4px, -3px) rotate(5deg); }
  75% { transform: rotate(5deg) scale(1.15) translate(-3px, 1px) rotate(-3deg); }
}

/* read-out: same 5-angle beam flash as slide 2, one flash comes back wrong */
#s-errors .crp-scan { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s var(--ease-out); }
#s-errors.s2 .crp-scan { opacity: 1; }
#s-errors.s3 .crp-scan { opacity: 0; }

#s-errors .fbeam {
  position: absolute;
  left: 978px;
  top: 362px;
  width: 8px;
  height: 250px;
  margin-left: -4px;
  border-radius: 4px;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, rgba(255, 250, 224, 0.95), rgba(255, 250, 224, 0) 82%);
  opacity: 0;
}
#s-errors .flash-1 .fbeam { transform: rotate(-68deg); }
#s-errors .flash-2 .fbeam { transform: rotate(-32deg); }
#s-errors .flash-3 .fbeam { transform: rotate(0deg); }
#s-errors .flash-4 .fbeam { transform: rotate(32deg); }
#s-errors .flash-5 .fbeam { transform: rotate(68deg); }

#s-errors .fbit {
  position: absolute;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 24px;
  opacity: 0;
  transform: scale(0.3);
}
#s-errors .fbit.bad { background: var(--sa-cost); color: var(--on-accent); border-radius: 6px; padding: 2px 6px; }
#s-errors .flash-1 .fbit:nth-child(2) { left: 775px; top: 507px; }
#s-errors .flash-1 .fbit:nth-child(3) { left: 758px; top: 552px; }
#s-errors .flash-2 .fbit:nth-child(2) { left: 875px; top: 427px; }
#s-errors .flash-2 .fbit:nth-child(3) { left: 840px; top: 452px; }
#s-errors .flash-3 .fbit:nth-child(2) { left: 965px; top: 414px; }
#s-errors .flash-3 .fbit:nth-child(3) { left: 1002px; top: 414px; }
#s-errors .flash-4 .fbit:nth-child(2) { left: 1090px; top: 427px; }
#s-errors .flash-4 .fbit:nth-child(3) { left: 1125px; top: 452px; }
#s-errors .flash-5 .fbit:nth-child(2) { left: 1190px; top: 507px; }
#s-errors .flash-5 .fbit:nth-child(3) { left: 1208px; top: 552px; }

#s-errors.s2 .flash-1 .fbeam { animation: beamFlash 0.9s var(--ease-out) 0s; }
#s-errors.s2 .flash-2 .fbeam { animation: beamFlash 0.9s var(--ease-out) 0.22s; }
#s-errors.s2 .flash-3 .fbeam { animation: beamFlash 0.9s var(--ease-out) 0.44s; }
#s-errors.s2 .flash-4 .fbeam { animation: beamFlash 0.9s var(--ease-out) 0.66s; }
#s-errors.s2 .flash-5 .fbeam { animation: beamFlash 0.9s var(--ease-out) 0.88s; }
#s-errors.s2 .flash-1 .fbit { animation: bitPop 0.5s var(--ease-back) 0.1s both; }
#s-errors.s2 .flash-2 .fbit { animation: bitPop 0.5s var(--ease-back) 0.32s both; }
#s-errors.s2 .flash-3 .fbit { animation: bitPop 0.5s var(--ease-back) 0.54s both; }
#s-errors.s2 .flash-4 .fbit { animation: bitPop 0.5s var(--ease-back) 0.76s both; }
#s-errors.s2 .flash-5 .fbit { animation: bitPop 0.5s var(--ease-back) 0.98s both; }

/* repuzzle on the right: same technique as slide 2, one bit comes back flipped */
#s-errors .crp-right { position: absolute; inset: 0; }
#s-errors .rbit {
  position: absolute;
  width: 40px;
  margin-left: -20px;
  margin-top: -18px;
  text-align: center;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 38px;
  color: var(--sa-ink);
  opacity: 0;
  transform: translate(var(--sx), var(--sy)) rotate(var(--srot));
  transition: opacity 0.5s var(--ease-out), transform 1s var(--ease-out);
}
#s-errors .rbit.rbit-bad { color: var(--on-accent); background: var(--sa-cost); border-radius: 6px; }
#s-errors.s3 .rbit { opacity: 1; transform: translate(0, 0) rotate(0deg); }
#s-errors.s4 .rbit { opacity: 0; }

#s-errors .crp-image-r { position: absolute; left: 1433px; top: 429px; width: 184px; height: 184px; opacity: 0; transition: opacity 0.5s var(--ease-out); }
#s-errors.s4 .crp-image-r { opacity: 1; }
#s-errors .crp-image-r .gl { position: absolute; inset: 0; width: 100%; height: 100%; }
#s-errors .crp-image-r .gl-main { color: var(--sa-cost); }
#s-errors .crp-image-r .gl-a { color: var(--sa-audit); transform: translate(-5px, 3px); clip-path: inset(8% 0 58% 0); opacity: 0.85; }
#s-errors .crp-image-r .gl-b { color: var(--sa-gain); transform: translate(5px, -3px); clip-path: inset(52% 0 12% 0); opacity: 0.85; }

/* ---------------------------------------------------------------- neon glow pass (subtle) */

.nt-G {
  text-shadow: 0 0 2px currentColor;
}

#s-title .wordmark {
  text-shadow: 0 0 6px rgba(57, 255, 110, 0.25);
}

.card, .chan, .rulebook {
  box-shadow: var(--shadow);
}

/* ---------------------------------------------------------------- appendix: what the model learned */

#a-learned .learned { position: absolute; left: 120px; top: 252px; width: 1680px; height: 720px; }
#a-learned .panel { position: absolute; }
#a-learned h3 { margin: 0 0 4px; font-size: 27px; font-weight: 600; }
#a-learned .sub { margin: 0 0 8px; font-size: 21px; color: var(--sa-muted); line-height: 1.3; }
#a-learned .curve { fill: none; stroke: var(--sa-gain); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
#a-learned .curve.flat { stroke: var(--sa-audit); }
#a-learned .dot { fill: var(--sa-gain); }
#a-learned .dot.flat { fill: var(--sa-audit); }
#a-learned .stdline { stroke: var(--sa-cost); stroke-width: 3.5; stroke-dasharray: 9 7; }
#a-learned .stdlab { fill: var(--sa-cost); font-weight: 600; font-size: 21px; }
#a-learned .modellab { fill: var(--sa-gain); font-weight: 600; font-size: 21px; }
#a-learned .modellab.warn { fill: var(--sa-cost); font-size: 18px; }
#a-learned .band { fill: var(--tint-gain); }
#a-learned .kbar { fill: var(--sa-cost); }
#a-learned .kbar.bg { fill: var(--sa-rule); }
#a-learned .klab { font-family: var(--mono); font-size: 23px; font-weight: 600; fill: var(--sa-ink); }
#a-learned .kval { font-family: var(--mono); font-size: 22px; fill: var(--sa-muted); }
#a-learned .card {
  padding: 22px 28px; border-radius: 20px; border: 2px solid var(--sa-rule); background: var(--sa-surface);
}
#a-learned .card .row { font-size: 23px; line-height: 1.4; color: var(--sa-muted); margin-bottom: 10px; }
#a-learned .card .row .mono { font-family: var(--mono); font-weight: 600; color: var(--sa-ink); }
#a-learned .card .row .risk { font-family: var(--mono); font-weight: 600; color: var(--sa-cost); }
#a-learned .card .row .calm { font-family: var(--mono); font-weight: 600; color: var(--sa-gain); }
#a-learned .card .punch { font-size: 30px; font-weight: 600; line-height: 1.25; color: var(--sa-ink); margin: 14px 0 10px; }
#a-learned .card .punch b { color: var(--sa-gain); }
#a-learned .card .note { font-size: 20px; color: var(--sa-muted); line-height: 1.35; }

/* ---------------------------------------------------------------- appendix: the two models */

#a-two .arch { top: 236px; height: 726px; }
#a-two .closer { padding: 13px 26px; }
#a-two .colhead {
  position: absolute; font-size: 32px; font-weight: 600; letter-spacing: -0.01em; display: flex;
  align-items: baseline; gap: 14px;
}
#a-two .colhead .where { font-size: 22px; font-weight: 500; color: var(--sa-muted); }
#a-two .colhead .lt {
  font-size: 17px; font-weight: 600; letter-spacing: 0.02em; padding: 2px 12px; border-radius: 999px;
  background: var(--sa-audit); color: var(--on-accent);
}
#a-two .abox h4 { font-size: 24px; }
#a-two .abox p { font-size: 21px; }
#a-two .closer {
  position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 22px;
  font-size: 26px; font-weight: 600; color: var(--sa-ink); border: 2px solid var(--sa-audit);
  background: var(--tint-audit); border-radius: 18px; padding: 16px 26px;
}
#a-two .closer svg { width: 46px; height: 28px; flex: none; color: var(--sa-audit); }

/* ---------------------------------------------------------------- slides 9 to 16, rebuilt
 * Light mode is the default: whitespace, hairlines, one accent per meaning.
 * BRAND.md section 9: gain = what pays off, cost = what costs or where we lose,
 * audit = the tool and the tailored codec, tbd = pending or a limit on a claim.
 * Every coloured mark keeps a word next to it.
 */

.footline { position: absolute; left: 120px; right: 120px; bottom: 92px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pill2 {
  display: inline-flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 600;
  border: 2px solid var(--sa-rule); border-radius: 999px; padding: 8px 22px; color: var(--sa-muted);
  background: var(--sa-surface);
}
.pill2 b { color: var(--sa-ink); }
.pill2.gain { border-color: var(--sa-gain); color: var(--sa-gain); background: var(--tint-gain); }
.pill2.gain b { color: var(--sa-gain); }
.pill2.cost { border-color: var(--sa-cost); color: var(--sa-cost); background: var(--tint-cost); }
.pill2.cost b { color: var(--sa-cost); }
.pill2.audit { border-color: var(--sa-audit); color: var(--sa-audit); background: var(--tint-audit); }
.pill2.tbd { border-color: var(--sa-tbd-line); color: var(--sa-tbd); background: var(--sa-tbd-bg); }
.pill2 svg { width: 26px; height: 26px; flex: none; }

/* --- 9. tier 2, isolated */

/* --- 10. the loop */

/* --- 11. tuned for a channel */
  height: 150px; border-radius: 18px; background: var(--sa-surface); border: 2px solid var(--sa-rule);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  opacity: 0; transform: scale(0.94); transition: opacity 0.35s, transform 0.5s var(--ease-back); transition-delay: calc(var(--i) * 0.08s);
}

/* --- 12. against published work */
#s-field .fieldgrid { position: absolute; left: 120px; right: 120px; top: 276px; display: grid; grid-template-columns: 1fr 520px; gap: 56px; align-items: start; }
#s-field .fline path { fill: none; stroke: var(--sa-rule); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#s-field .fline circle { fill: var(--sa-rule); }
#s-field .fline .flab { font-size: 21px; fill: var(--sa-muted); }
#s-field .fline.ours path { stroke: var(--sa-gain); stroke-width: 6; }
#s-field .fline.ours circle { fill: var(--sa-gain); }
#s-field .fline.ours .flab { fill: var(--sa-gain); font-weight: 600; font-size: 24px; }
#s-field .fline.ahead path { stroke: var(--sa-cost); stroke-width: 6; stroke-dasharray: 11 8; }
#s-field .fline.ahead circle { fill: var(--sa-cost); }
#s-field .fline.ahead .flab { fill: var(--sa-cost); font-weight: 600; font-size: 24px; }
#s-field .fline.peer path { stroke: var(--sa-audit); stroke-width: 5; }
#s-field .fline.peer circle { fill: var(--sa-audit); }
#s-field .fline.peer .flab { fill: var(--sa-audit); font-size: 22px; }
#s-field .costpanel h3 { margin: 0 0 10px; font-size: 28px; font-weight: 600; color: var(--sa-gain); }
#s-field .costrow { margin-bottom: 12px; }
#s-field .clab { font-size: 22px; font-weight: 600; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: baseline; }
#s-field .clab em { font-style: normal; font-family: var(--mono); font-size: 24px; color: var(--sa-gain); }
#s-field .cbar { position: relative; height: 26px; margin-bottom: 5px; display: flex; align-items: center; gap: 12px; }
#s-field .cbar i { height: 24px; border-radius: 6px; background: var(--sa-audit); display: block; min-width: 5px; }
#s-field .cbar i.ours { background: var(--sa-gain); }
#s-field .cbar span { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--sa-muted); white-space: nowrap; }
#s-field .cbar span.ours { color: var(--sa-gain); }

/* --- 14. the question nobody answers */
#s-question .qgrid { position: absolute; left: 120px; right: 120px; top: 292px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
#s-question .qbox { padding: 26px 30px; border-radius: 20px; border: 2px solid var(--sa-rule); background: var(--sa-surface); }
#s-question .qbox .who { font-size: 21px; color: var(--sa-muted); margin-bottom: 8px; }
#s-question .qbox .what { font-size: 30px; line-height: 1.3; font-weight: 600; color: var(--sa-ink); }
#s-question .qbox.accent { border-color: var(--sa-gain); background: var(--tint-gain); }
#s-question .qbox.accent .what { color: var(--sa-gain); }
#s-question .verdicts { position: absolute; left: 120px; right: 120px; top: 540px; display: grid; grid-template-columns: 420px 1fr 1fr; gap: 14px 24px; align-items: center; }
#s-question .vhead { font-size: 25px; font-weight: 600; color: var(--sa-muted); padding-bottom: 8px; border-bottom: 2px solid var(--sa-rule); }
#s-question .vname { font-size: 29px; font-weight: 600; }
#s-question .vcell { padding: 8px 0; }
#s-question .vcell .verdict { font-size: 27px; }
#s-question .vreads { font-size: 21px; color: var(--sa-muted); font-family: var(--mono); margin-top: 6px; }

/* --- 13. the firewall: one idea, Simulator B. A is the channel we tune on, cyan; B is the one
   we only ever check against, dashed, and green where it pays off. No yellow on this slide: the
   limits are spoken, not boxed. */
.fwgrid {
  position: absolute; left: 120px; right: 120px; top: 262px;
  display: grid; grid-template-columns: 330px 1fr 1fr; column-gap: 34px; row-gap: 0;
  align-items: center;
}
.fwgrid .fwhead { padding: 14px 20px; }
.fwgrid .fwhead.lab { padding: 0; }
.fwgrid .fwhead.a { background: var(--tint-audit); border-radius: 14px 14px 0 0; }
.fwgrid .fwhead b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.fwgrid .fwhead em { font-style: normal; font-size: 20px; color: var(--sa-muted); }
.fwgrid .fwhead.a b { color: var(--sa-audit); }
.fwgrid .fwlab { font-size: 22px; color: var(--sa-muted); padding: 13px 0; }
.fwgrid .fwa, .fwgrid .fwb { font-size: 23px; padding: 13px 20px; border-top: 2px solid var(--sa-rule); }
.fwgrid .fwa { background: var(--tint-audit); }
.fwgrid .fwb { border-left: 2px dashed var(--sa-rule); border-right: 2px dashed var(--sa-rule); }
.fwgrid .fwhead.b { border-left: 2px dashed var(--sa-rule); border-right: 2px dashed var(--sa-rule); border-top: 2px dashed var(--sa-rule); border-radius: 14px 14px 0 0; padding: 14px 20px; }
.fwgrid .fwb:last-child { border-bottom: 2px dashed var(--sa-rule); border-radius: 0 0 14px 14px; }
.fwres { position: absolute; left: 120px; right: 120px; top: 682px; }
.fwres .fwmetric { margin: 0 0 14px; font-size: 22px; color: var(--sa-muted); }
.fwres .fwmetric em { font-style: normal; display: block; font-size: 20px; opacity: 0.85; }
.fwres .fwrow { display: grid; grid-template-columns: 330px 1fr 1fr; column-gap: 34px; align-items: center; margin-bottom: 12px; }
.fwres .fwdec { font-size: 23px; color: var(--sa-muted); }
.fwres .fwcell { display: flex; align-items: baseline; gap: 18px; padding: 10px 20px; border-radius: 14px; }
.fwres .fwcell.a { background: var(--tint-audit); }
.fwres .fwcell.b { border: 2px dashed var(--sa-gain); background: var(--tint-gain); }
.fwres .fwcell .pts { font-size: 34px; font-weight: 700; letter-spacing: -0.01em; }
.fwres .fwcell.a .pts { color: var(--sa-audit); }
.fwres .fwcell.b .pts { color: var(--sa-gain); }
.fwres .fwcell .pts em { font-style: normal; font-size: 21px; font-weight: 600; }
.fwres .fwcell .pair { font-family: var(--mono); font-size: 20px; color: var(--sa-muted); }
.fwres .fwcell .pair i { font-style: normal; opacity: 0.7; }
.fwres .fwcell .ci { font-size: 18px; color: var(--sa-muted); opacity: 0.8; }

/* --- 16. close */
#s-results .grid { position: absolute; left: 120px; right: 120px; top: 276px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
#s-results .rc { padding: 22px 28px; min-height: 0; opacity: 0; transform: translateY(18px); transition: opacity 0.45s, transform 0.6s var(--ease-out); transition-delay: calc(var(--i) * 0.1s); }
#s-results.s1 .rc { opacity: 1; transform: none; }
#s-results .rc h4 { margin: 0 0 10px; font-size: 24px; font-weight: 600; color: var(--sa-muted); }
#s-results .rc .main { font-size: 30px; font-weight: 600; line-height: 1.28; }
#s-results .rc .main .val { font-size: 42px; }
#s-results .rc .main .arrow { color: var(--sa-muted); margin: 0 8px; }
#s-results .rc .sm { font-size: 21px; color: var(--sa-muted); margin-top: 8px; }
#s-results .demo {
  position: absolute; left: 120px; right: 120px; top: 528px; padding: 20px 26px; border-radius: 20px;
  border: 2px solid var(--sa-audit); background: var(--tint-audit); font-size: 23px; line-height: 1.4; color: var(--sa-ink);
  opacity: 0; transform: translateY(16px); transition: opacity 0.45s, transform 0.6s var(--ease-out);
}
#s-results.s1 .demo { opacity: 1; transform: none; }
#s-results .demo h4 { margin: 0 0 6px; font-size: 22px; font-weight: 600; color: var(--sa-audit); }
#s-results .close {
  position: absolute; left: 120px; right: 120px; top: 706px;
  display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center;
  padding-top: 30px; border-top: 3px solid var(--sa-rule);
  opacity: 0; transform: translateY(24px); transition: opacity 0.5s, transform 0.7s var(--ease-out);
}
#s-results.s2 .close { opacity: 1; transform: none; }
#s-results .close .mark { width: 150px; height: 150px; }
#s-results .close .tl { font-size: 64px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
#s-results .close .tl span { color: var(--sa-audit); }
#s-results .close .honest { font-size: 27px; color: var(--sa-muted); margin-top: 10px; }
#s-results .close .who { display: flex; gap: 28px; align-items: baseline; flex-wrap: wrap; font-size: 25px; color: var(--sa-muted); margin-top: 12px; }
#s-results .close .who .repo { font-family: var(--mono); font-weight: 600; font-size: 25px; color: var(--sa-audit); }
#s-results .close .who .team { color: var(--sa-ink); font-weight: 600; }

/* the verdict sits beside the chart, in the space the lines do not reach */
#s-field .footline {
  left: auto; right: 120px; bottom: auto; top: 300px; width: 560px;
  display: block;
}
#s-field .pill2 {
  display: block; font-size: 23px; line-height: 1.4; border-radius: 22px;
  padding: 16px 24px; text-align: left;
}