:root {
  --bg: oklch(1 0 0);
  --surface: oklch(0.958 0.009 242);
  --surface-2: oklch(0.91 0.022 242);
  --ink: oklch(0.18 0.018 242);
  --muted: oklch(0.43 0.018 242);
  --line: oklch(0.82 0.012 242);
  --blue: oklch(0.578 0.13 241.7);
  --blue-dark: oklch(0.31 0.105 242);
  --cyan: oklch(0.72 0.12 195);
  --red: oklch(0.64 0.19 31);
  --red-soft: oklch(0.93 0.045 31);
  --header-h: 72px;
  --edge: 82px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --px: 0;
  --py: 0;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: oklch(0.11 0.012 242);
  color: var(--ink);
}

body {
  font-family: "Microsoft YaHei UI", "Noto Sans SC", sans-serif;
  text-rendering: geometricPrecision;
  transition: background .38s ease;
}

.deck {
  position: absolute;
  left: var(--viewport-center-x, 50%);
  top: var(--viewport-center-y, 50%);
  width: 1920px;
  height: 1080px;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  transform-origin: center;
}

.orientation-gate,
.mobile-controls {
  display: none;
}

.ambient-grid {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(100% - 1px), var(--line) calc(100% - 1px)) 0 0 / 44px 44px,
    linear-gradient(to bottom, transparent calc(100% - 1px), var(--line) calc(100% - 1px)) 0 0 / 44px 44px;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  transform: translate(calc(var(--px) * -4px), calc(var(--py) * -3px));
  transition: opacity .45s ease, transform .16s ease-out;
}

body.grid-on .ambient-grid { opacity: .09; }
body.dark-mode .ambient-grid { opacity: 0; }

.progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 70;
  width: 100%;
  height: 6px;
  background: transparent;
}

.progress i {
  display: block;
  width: 4%;
  height: 100%;
  background: var(--red);
  transform-origin: left;
  transition: width .68s var(--ease), background .35s ease;
}

.deck-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 0 var(--edge);
  border-bottom: 1px solid var(--line);
  background: oklch(1 0 0 / .96);
  color: var(--ink);
  transition: background .38s ease, color .38s ease, border-color .38s ease;
}

body.dark-mode .deck-header {
  border-color: oklch(1 0 0 / .16);
  background: oklch(0.18 0.018 242 / .97);
  color: white;
}

.deck-brand {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 23px;
  font-weight: 750;
  white-space: nowrap;
}

.brand-mark {
  width: 28px;
  height: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.brand-mark i { background: var(--blue); }
.brand-mark i:nth-child(2),
.brand-mark i:nth-child(6) { background: var(--red); }
.brand-mark i:nth-child(4),
.brand-mark i:nth-child(8) { opacity: .25; }

.header-tag {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  font-family: "Bahnschrift", "Microsoft YaHei UI", sans-serif;
  font-size: 20px;
  letter-spacing: .015em;
  white-space: nowrap;
}

.header-tag b { color: var(--ink); font-size: 22px; }
body.dark-mode .header-tag { color: oklch(0.78 0.01 242); }
body.dark-mode .header-tag b { color: white; }

.scenes {
  position: absolute;
  inset: var(--header-h) 0 0;
  z-index: 2;
}

.scene {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  transform: translateX(22px);
  transition: opacity .3s ease, transform .68s var(--ease), visibility 0s linear .68s;
}

.scene.active {
  z-index: 3;
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0s;
}

.scene.leaving {
  visibility: visible;
  opacity: 0;
  transform: translateX(-18px);
}

.dark-scene { background: var(--ink); color: white; }
.cobalt-scene { background: var(--blue-dark); color: white; }

.particle-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .16;
  transition: opacity .42s ease;
}

.dark-scene .particle-field,
.cobalt-scene .particle-field { opacity: .26; }

.transition-flash {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  background: var(--red);
}

.transition-flash.fire { animation: attack-flash 140ms ease-out both; }

.scene-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 48px var(--edge) 46px;
}

.standard-layout {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 28px;
}

.split-layout {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  gap: 72px;
}

.scene-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}

h1,
h2 {
  margin: 0;
  font-weight: 820;
  letter-spacing: -.029em;
  text-wrap: balance;
}

h1 { font-size: 94px; line-height: 1.11; }
h2 { max-width: 1540px; font-size: 66px; line-height: 1.16; }

.title-line {
  display: block;
  white-space: nowrap;
}

h1 em,
h2 em {
  color: var(--red);
  font-style: normal;
}

.dark-scene h1 em,
.dark-scene h2 em,
.cobalt-scene h1 em,
.cobalt-scene h2 em { color: oklch(0.72 0.17 31); }

.scene.active h1,
.scene.active h2 { animation: title-decode .82s .06s var(--ease) both; }

.depth-back {
  transform: translate(calc(var(--px) * -4px), calc(var(--py) * -3px));
  transition: transform .18s ease-out;
}

.depth-mid {
  transform: translate(calc(var(--px) * 10px), calc(var(--py) * 7px));
  transition: transform .15s ease-out;
}

.depth-front {
  transform: translate(calc(var(--px) * 16px), calc(var(--py) * 11px));
  transition: transform .13s ease-out;
}

.evidence-band {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 28px;
  border-top: 1px solid var(--line);
  font-size: 23px;
}

.evidence-band strong { color: var(--blue); font-size: 25px; }
.evidence-band span { color: var(--muted); }

/* 01 — cover */
.hero-cinema-curtain {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(100% - 4px), var(--cyan) calc(100% - 4px)),
    var(--ink);
  transform-origin: right;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  align-items: center;
  gap: 52px;
}

.hero-copy { position: relative; z-index: 4; }
.hero-copy p {
  max-width: 780px;
  margin: 32px 0 0;
  color: oklch(0.78 0.01 242);
  font-size: 26px;
  line-height: 1.55;
}

.protocols { display: flex; gap: 36px; margin-top: 40px; }
.protocols span {
  min-width: 96px;
  padding: 12px 0;
  border-bottom: 2px solid oklch(1 0 0 / .25);
  color: var(--cyan);
  font-family: "Bahnschrift", sans-serif;
  font-size: 24px;
}

.hero-signal { position: relative; height: 720px; }
.hero-signal svg { position: absolute; inset: 7% -6% auto -12%; width: 118%; height: 82%; }
.hero-wave { fill: none; stroke-linecap: square; }
.hero-wave.ghost { stroke: var(--cyan); stroke-width: 14; opacity: .13; }
.hero-wave.main { stroke: var(--cyan); stroke-width: 4; stroke-dasharray: 1600; }
.scene-01.active .hero-wave.main { animation: draw-path 2.1s .3s var(--ease) both; }
.hero-wave.stream {
  stroke-width: 7;
  stroke-dasharray: 44 1556;
  stroke-dashoffset: 0;
  opacity: 0;
}
.hero-wave.stream-cyan { stroke: white; filter: drop-shadow(0 0 7px oklch(0.78 0.13 195 / .8)); }
.hero-wave.stream-red { stroke: var(--red); stroke-width: 5; filter: drop-shadow(0 0 8px oklch(0.64 0.19 31 / .7)); }
.scene-01.active .hero-wave.stream-cyan { animation: hero-stream-cyan 4.4s 2.1s linear infinite; }
.scene-01.active .hero-wave.stream-red { animation: hero-stream-red 5.6s 2.65s linear infinite; }

.cipher-mask {
  position: absolute;
  right: 4%;
  top: 20%;
  width: 70%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 28px;
  color: oklch(0.74 0.02 242);
  font-family: "Bahnschrift", monospace;
  font-size: 23px;
}

.cipher-mask::after {
  content: "";
  position: absolute;
  inset: -36px -28px;
  background: linear-gradient(90deg, var(--ink) 0 18%, transparent 46% 100%);
  transform-origin: right;
  animation: mask-open 1.5s .32s var(--ease) both;
}

.scene-01.active .cipher-mask span { animation: cipher-resolve .72s var(--ease) both; }
.scene-01.active .cipher-mask span:nth-child(2n) { animation-delay: .14s; }

.moving-packet {
  position: absolute;
  left: 4%;
  top: 53.5%;
  width: 20px;
  height: 20px;
  background: var(--red);
  box-shadow: 0 0 28px oklch(0.64 0.19 31 / .55);
  animation: hero-packet 5.2s 1.25s linear infinite;
}

.hero-focus-line {
  position: absolute;
  inset: 13% auto 12% 22%;
  width: 3px;
  opacity: 0;
  background: white;
  box-shadow: 0 0 0 22px oklch(0.72 0.12 195 / .045), 0 0 42px oklch(0.72 0.12 195 / .42);
}

.scene-01.active .hero-cinema-curtain { animation: hero-curtain-release 1.02s .12s var(--ease) both; }
.scene-01.active .hero-copy h1 { animation: hero-title-cinema .92s .82s var(--ease) both; }
.scene-01.active .hero-copy p { animation: hero-copy-cinema .62s 1.42s var(--ease) both; }
.scene-01.active .protocols span { animation: hero-protocol-cinema .52s var(--ease) both; }
.scene-01.active .protocols span:nth-child(1) { animation-delay: 1.62s; }
.scene-01.active .protocols span:nth-child(2) { animation-delay: 1.72s; }
.scene-01.active .protocols span:nth-child(3) { animation-delay: 1.82s; }
.scene-01.active .hero-signal { animation: hero-signal-cinema 1.08s .5s var(--ease) both; }
.scene-01.active .hero-focus-line { animation: hero-focus-sweep 1.35s .48s var(--ease) both; }

/* 02 — visible behavior */
.binary-label {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 8px;
  font-family: "Bahnschrift", sans-serif;
  font-size: 21px;
}

.binary-label span { color: var(--muted); }
.binary-label b { color: var(--blue); }

.visibility-stage {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  min-height: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.hidden-content {
  position: relative;
  display: grid;
  align-content: center;
  gap: 0;
  padding: 86px 44px 34px;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
  font-family: "Bahnschrift", monospace;
  font-size: 25px;
}

.hidden-content strong {
  position: absolute;
  left: 44px;
  top: 30px;
  z-index: 3;
  color: white;
  font-family: "Microsoft YaHei UI", sans-serif;
  font-size: 26px;
}

.hidden-content > span {
  position: relative;
  z-index: 1;
  min-height: 88px;
  display: grid;
  grid-template-columns: 178px 1fr;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--line);
}

.hidden-content > span:first-of-type { border-top: 0; }
.hidden-content b {
  color: var(--blue);
  font: 21px/1 "Bahnschrift", sans-serif;
}
.hidden-content code {
  color: var(--ink);
  font: 24px/1.2 "Bahnschrift", monospace;
  letter-spacing: .035em;
}

.value-swap {
  position: relative;
  display: block;
  min-width: 0;
  height: 30px;
  overflow: hidden;
}

.value-swap code {
  position: absolute;
  inset: 0;
  white-space: nowrap;
}

.cipher-value { clip-path: inset(0 100% 0 0); }
.scene-02.active .plain-value { animation: plain-value-hide 1.55s 1.5s linear both; }
.scene-02.active .cipher-value { animation: cipher-value-show 1.55s 1.5s linear both; }

.veil {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: oklch(0.34 0.095 245 / .68);
  clip-path: inset(0 100% 0 0);
  backdrop-filter: saturate(.76) blur(.45px);
}

.scene-02.active .hidden-content { animation: panel-enter-left .78s .14s var(--ease) both; }
.scene-02.active .veil { animation: veil-cover 3s .28s linear both; }

.visible-behavior {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  padding-left: 32px;
}

.visible-behavior > div {
  display: grid;
  grid-template-columns: 120px repeat(8, 1fr);
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
}

.visible-behavior > div:first-child { border-top: 0; }
.visible-behavior span { color: var(--muted); font-size: 24px; }
.behavior-axis i { width: 15px; height: 15px; background: var(--blue); }
.behavior-axis i:nth-child(3n) { background: var(--red); }
.direction-axis b { color: var(--blue); font-size: 42px; font-weight: 500; }
.direction-axis b:nth-child(even) { color: oklch(0.55 0.12 195); }
.length-axis { align-items: end !important; padding: 28px 0; }
.length-axis i { align-self: end; width: 34px; height: var(--h); background: var(--blue); transform-origin: bottom; }
.length-axis i:nth-child(4) { background: var(--red); }

.scene-02.active .visible-behavior { animation: panel-enter-right .82s .2s var(--ease) both; }
.scene-02.active .visible-behavior > div { animation: row-reveal .66s var(--ease) both; }
.scene-02.active .visible-behavior > div:nth-child(2) { animation-delay: .22s; }
.scene-02.active .visible-behavior > div:nth-child(3) { animation-delay: .36s; }
.scene-02.active .length-axis i { animation: bar-rise .72s var(--ease) both; }

/* 03 — signatures */
.signature-stage {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.signature {
  display: grid;
  grid-template-columns: 230px 190px 1fr;
  align-items: center;
  border-top: 1px solid var(--line);
}

.signature:first-child { border-top: 0; }
.signature > strong { font-size: 28px; }
.signature > span { color: var(--muted); font-size: 23px; }

.sig-line {
  position: relative;
  height: 82px;
  display: flex;
  align-items: center;
  gap: 92px;
  padding: 0 28px;
}

.sig-line::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 50%;
  height: 2px;
  background: var(--line);
}

.sig-line i {
  position: relative;
  z-index: 1;
  width: 19px;
  height: 19px;
  background: var(--red);
}

.sig-heart .sig-line { gap: 168px; }
.sig-heart .sig-line i { background: var(--cyan); }
.sig-pair { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 24px; height: 96px; }
.sig-pair i { height: 24px; background: var(--blue); }
.sig-pair i:nth-child(2) { width: 24%; background: var(--red); }
.sig-pair i:nth-child(4) { width: 39%; background: var(--red); }
.sig-phase-line { display: grid; grid-template-columns: .62fr 1.2fr .8fr; gap: 10px; align-items: center; height: 100%; }
.sig-phase-line i { height: 18px; background: var(--blue); }
.sig-phase-line i:nth-child(2) { height: 66px; background: var(--red); }

.scene-03.active .signature { animation: signature-build .72s var(--ease) both; }
.scene-03.active .signature:nth-child(2) { animation-delay: .12s; }
.scene-03.active .signature:nth-child(3) { animation-delay: .24s; }
.scene-03.active .signature:nth-child(4) { animation-delay: .36s; }

/* 04 — result rail */
.results-tease h2 { max-width: 1640px; }
.result-rail { position: relative; min-height: 0; }
.rail-line {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 52%;
  height: 4px;
  background: oklch(1 0 0 / .28);
  transform-origin: center;
}

.rail-point {
  position: absolute;
  top: 34%;
  width: 270px;
  transform: translateX(-50%);
}

.rail-point::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 142px;
  width: 18px;
  height: 18px;
  background: var(--cyan);
  transform: translate(-50%, -50%);
}

.rail-point span { display: block; color: oklch(0.76 0.01 242); font-size: 22px; }
.rail-point strong { display: block; margin-top: 8px; font-family: "Bahnschrift", sans-serif; font-size: 51px; letter-spacing: -.025em; }
.rail-point.p1 { left: 8%; }
.rail-point.p2 { left: 38%; }
.rail-point.p3 { left: 66%; }
.rail-point.p4 { left: 92%; }
.rail-point.p1::after { background: var(--red); }
.rail-point.p2 strong,
.rail-point.p4 strong { color: var(--cyan); }

.locked-threshold {
  min-height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  border-top: 1px solid oklch(1 0 0 / .16);
  font-size: 23px;
}

.locked-threshold i {
  padding: 12px 20px;
  background: white;
  color: var(--ink);
  font-family: "Bahnschrift", sans-serif;
  font-style: normal;
}

.scene-04.active .rail-line { animation: metric-axis 1s .2s var(--ease) both; }
.scene-04.active .rail-point { animation: metric-pop .62s var(--ease) both; }
.scene-04.active .rail-point.p1 { animation-delay: .4s; }
.scene-04.active .rail-point.p2 { animation-delay: .54s; }
.scene-04.active .rail-point.p3 { animation-delay: .68s; }
.scene-04.active .rail-point.p4 { animation-delay: .82s; }
.scene-04.active .locked-threshold i { animation: lock-hit .42s 1.05s var(--ease) both; }

/* 05 — dual task */
.output-copy h2 { font-size: 64px; }
.two-questions { display: grid; gap: 20px; margin-top: 44px; }
.two-questions span {
  width: 82%;
  padding: 18px 0;
  border-bottom: 1px solid oklch(1 0 0 / .28);
  color: oklch(0.84 0.01 242);
  font-size: 26px;
}

.output-visual { position: relative; height: 690px; }
.input-stream {
  position: absolute;
  left: 0;
  top: 47%;
  width: 33%;
  display: flex;
  gap: 16px;
}

.input-stream::before {
  content: "";
  position: absolute;
  left: 0;
  right: -60px;
  top: 8px;
  height: 3px;
  background: var(--cyan);
  opacity: .5;
}

.input-stream i { position: relative; z-index: 1; width: 19px; height: 19px; background: var(--cyan); }
.input-stream i:nth-child(3),
.input-stream i:nth-child(6) { background: var(--red); }

.shared-token {
  position: absolute;
  left: 35%;
  top: 38%;
  width: 180px;
  height: 160px;
  display: grid;
  place-content: center;
  gap: 8px;
  border: 2px solid var(--cyan);
  text-align: center;
}

.shared-token span { color: oklch(0.78 0.01 242); font-size: 21px; }
.shared-token strong { font: 42px/1 "Bahnschrift", sans-serif; }
.fork {
  position: absolute;
  left: 53%;
  top: 26%;
  width: 19%;
  height: 48%;
  border-top: 3px solid var(--cyan);
  border-bottom: 3px solid var(--cyan);
  border-left: 3px solid var(--cyan);
}

.answer {
  position: absolute;
  right: 0;
  width: 31%;
  height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
  border: 1px solid oklch(1 0 0 / .3);
}

.answer-risk { top: 14%; }
.answer-behavior { bottom: 14%; }
.answer span { color: oklch(0.8 0.01 242); font-size: 22px; }
.answer strong { margin-top: 12px; font-family: "Bahnschrift", "Microsoft YaHei UI", sans-serif; font-size: 36px; }
.answer-risk strong { color: oklch(0.76 0.15 31); }
.answer-behavior strong { color: var(--cyan); }

.scene-05.active .input-stream { animation: stream-enter .72s .18s var(--ease) both; }
.scene-05.active .shared-token { animation: model-stage .62s .48s var(--ease) both; }
.scene-05.active .fork { animation: fork-open .72s .68s var(--ease) both; }
.scene-05.active .answer { animation: answer-split .66s var(--ease) both; }
.scene-05.active .answer-risk { animation-delay: .88s; }
.scene-05.active .answer-behavior { animation-delay: 1.02s; }

/* 06 — end-to-end pipeline */
.p6-scene { display: flex; flex-direction: column; }
.p6-title-row { min-height: 126px; flex: 0 0 auto; }
.p6-title-row h2 { font-size: 60px; }
.three-specs { display: flex; align-items: center; padding-bottom: 10px; }
.three-specs span {
  padding: 0 20px;
  border-left: 1px solid var(--line);
  color: var(--blue-dark);
  font-size: 23px;
  font-weight: 730;
}
.three-specs span:first-child { border-left: 0; }

.p6-story {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.p6-grid {
  position: absolute;
  inset: 0;
  opacity: .45;
  background:
    linear-gradient(to right, transparent calc(100% - 1px), var(--line) calc(100% - 1px)) 0 0 / 58px 58px,
    linear-gradient(to bottom, transparent calc(100% - 1px), var(--line) calc(100% - 1px)) 0 0 / 58px 58px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.p6-signal { position: absolute; inset: 74px 0 104px; overflow: hidden; }
.p6-signal svg { position: absolute; inset: 0; width: 100%; height: 430px; }
.p6-ghost-line,
.p6-main-line { fill: none; vector-effect: non-scaling-stroke; }
.p6-ghost-line { stroke: var(--cyan); stroke-width: 12; opacity: .12; }
.p6-main-line { stroke: var(--blue-dark); stroke-width: 4; stroke-dasharray: 2200; stroke-dashoffset: 2200; }
.scene-06.active .p6-main-line { animation: p6-draw 2.15s .3s var(--ease) forwards; }

.p6-scanner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 57%;
  width: 4px;
  opacity: 0;
  background: var(--cyan);
  box-shadow: 0 0 0 28px oklch(0.72 0.12 195 / .05), 0 0 46px oklch(0.72 0.12 195 / .28);
}
.scene-06.active .p6-scanner { animation: p6-scan 1.5s 1.5s var(--ease) both; }

.p6-stations { position: absolute; inset: 0 0 104px; }
.p6-station {
  position: absolute;
  top: 72px;
  width: 230px;
  height: 410px;
  border-bottom: 2px solid var(--ink);
}
.p6-station div { display: grid; gap: 7px; }
.p6-station span { color: var(--muted); font-size: 21px; font-weight: 650; }
.p6-station strong { font-size: 29px; line-height: 1.1; }
.p6-station > i {
  position: absolute;
  left: 0;
  top: 208px;
  display: block;
  width: 180px;
  height: 118px;
  font-style: normal;
}
.p6-s1 { left: 2.2%; }
.p6-s2 { left: 19.2%; }
.p6-s3 { left: 36.2%; }
.p6-s4 { left: 53.2%; }
.p6-s5 { left: 70.2%; }
.scene-06.active .p6-station { animation: p6-station-in .62s var(--ease) both; }
.scene-06.active .p6-s1 { animation-delay: .45s; }
.scene-06.active .p6-s2 { animation-delay: .65s; }
.scene-06.active .p6-s3 { animation-delay: .85s; }
.scene-06.active .p6-s4 { animation-delay: 1.05s; }
.scene-06.active .p6-s5 { animation-delay: 1.25s; }

.p6-wave { display: grid !important; place-items: center; }
.p6-wave svg { width: 180px; height: 98px; }
.p6-wave path { fill: none; stroke: var(--blue); stroke-width: 8; stroke-dasharray: 420; stroke-dashoffset: 420; }
.scene-06.active .p6-wave path { animation: p6-wave-draw 1.1s .48s var(--ease) forwards; }
.p6-direction { background: linear-gradient(45deg, transparent 46%, var(--blue) 47% 54%, transparent 55%) 142px 17px / 36px 36px no-repeat, linear-gradient(225deg, transparent 46%, var(--cyan) 47% 54%, transparent 55%) 0 63px / 36px 36px no-repeat; }
.p6-matrix { display: grid !important; grid-template-columns: repeat(8, 17px); grid-auto-rows: 17px; gap: 7px; align-content: center; }
.p6-matrix b { background: var(--blue); opacity: .44; animation: pulse-cell 3.5s infinite; animation-delay: calc(var(--n) * 35ms); }
.p6-matrix b:nth-child(5n) { background: var(--cyan); }
.p6-matrix b:nth-child(11n) { background: var(--red); }
.p6-bars { display: grid !important; grid-template-columns: repeat(16, 7px); align-items: end; gap: 4px; }
.p6-bars b { height: var(--h); min-height: 14px; background: var(--blue); transform-origin: bottom; }
.scene-06.active .p6-bars b { animation: bar-rise .58s var(--ease) both; animation-delay: calc(1.15s + var(--n) * 35ms); }
.p6-bars b:nth-child(5),
.p6-bars b:nth-child(11),
.p6-bars b:nth-child(13) { background: var(--red); }
.p6-stack b { position: absolute; width: 94px; height: 62px; border: 3px solid var(--blue); background: white; }
.p6-stack b:nth-child(1) { left: 0; top: 8px; }
.p6-stack b:nth-child(2) { left: 22px; top: 23px; border-color: var(--cyan); }
.p6-stack b:nth-child(3) { left: 44px; top: 38px; border-color: var(--blue); }
.p6-stack b:nth-child(4) { left: 66px; top: 53px; border-color: var(--red); }

.p6-product {
  position: absolute;
  z-index: 5;
  right: 1.1%;
  top: 58px;
  width: 278px;
  height: 414px;
  overflow: hidden;
  border: 1px solid oklch(1 0 0 / .16);
  background: var(--ink);
  color: white;
}
.scene-06.active .p6-product { animation: p6-product-reveal .82s 2.95s var(--ease) both; }
.p6-product-top { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid oklch(1 0 0 / .18); font-family: "Bahnschrift", sans-serif; font-size: 20px; letter-spacing: .04em; }
.p6-product-top i { width: 12px; height: 12px; background: var(--cyan); }
.p6-product-body { padding: 0 22px; }
.p6-product-body > div { padding: 20px 0; border-bottom: 1px solid oklch(1 0 0 / .17); }
.p6-product-body > div:last-child { border-bottom: 0; }
.p6-product-body span { display: block; color: oklch(0.74 0.01 242); font-size: 20px; }
.p6-product-body strong { display: block; margin-top: 8px; font-family: "Bahnschrift", "Microsoft YaHei UI", sans-serif; font-size: 29px; }
.p6-verdict strong { color: oklch(0.76 0.15 31); }
.p6-output strong { font-size: 25px; }
.p6-output i { display: block; height: 8px; margin-top: 16px; background: linear-gradient(90deg, var(--red) 0 91%, oklch(1 0 0 / .1) 91%); }
.p6-action b { display: block; margin-top: 8px; color: var(--cyan); font-size: 20px; }

.p6-labels {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 104px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line);
  background: oklch(1 0 0 / .9);
}
.p6-labels div { display: grid; place-items: center start; padding: 0 28px; border-left: 1px solid var(--line); }
.p6-labels div:first-child { border-left: 0; }
.p6-labels span { color: var(--ink); font-size: 22px; font-weight: 720; }

/* shared animation primitives */
@keyframes title-decode {
  0% { opacity: .12; transform: translateY(22px); clip-path: inset(0 0 100%); letter-spacing: .02em; filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); clip-path: inset(0); letter-spacing: -.029em; filter: blur(0); }
}
@keyframes cipher-resolve { from { opacity: .2; transform: translateX(34px); filter: blur(6px); } to { opacity: 1; transform: translateX(0); filter: blur(0); } }
@keyframes draw-path { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
@keyframes hero-stream-cyan {
  0% { opacity: 0; stroke-dashoffset: 0; }
  12%, 86% { opacity: .92; }
  100% { opacity: 0; stroke-dashoffset: -1600; }
}
@keyframes hero-stream-red {
  0% { opacity: 0; stroke-dashoffset: 420; }
  14%, 84% { opacity: .92; }
  100% { opacity: 0; stroke-dashoffset: -1180; }
}
@keyframes mask-open { from { opacity: .96; transform: scaleX(1); } to { opacity: .18; transform: scaleX(.72); } }
@keyframes hero-packet { from { left: 4%; } to { left: 94%; } }
@keyframes panel-enter-left { from { opacity: .2; transform: translateX(-46px); } to { opacity: 1; transform: translateX(0); } }
@keyframes panel-enter-right { from { opacity: .2; transform: translateX(46px); } to { opacity: 1; transform: translateX(0); } }
@keyframes veil-cover { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes row-reveal { from { opacity: .2; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes bar-rise { from { transform: scaleY(.05); } to { transform: scaleY(1); } }
@keyframes signature-build { from { opacity: .2; transform: scaleX(.64) translateX(-26px); transform-origin: left; } to { opacity: 1; transform: scaleX(1) translateX(0); } }
@keyframes metric-axis { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes metric-pop { from { opacity: .2; transform: translate(-50%, 22px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes lock-hit { from { opacity: .2; transform: scale(1.45); } to { opacity: 1; transform: scale(1); } }
@keyframes stream-enter { from { opacity: .2; transform: translateX(-64px); } to { opacity: 1; transform: translateX(0); } }
@keyframes model-stage { from { opacity: .2; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fork-open { from { opacity: .2; clip-path: inset(50% 100% 50% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes answer-split { from { opacity: .2; transform: translateX(-42px); } to { opacity: 1; transform: translateX(0); } }
@keyframes p6-draw { to { stroke-dashoffset: 0; } }
@keyframes p6-wave-draw { to { stroke-dashoffset: 0; } }
@keyframes p6-scan { 0% { left: 49%; opacity: 0; } 15% { opacity: 1; } 100% { left: 69%; opacity: 0; } }
@keyframes p6-station-in { from { opacity: .18; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes p6-product-reveal { from { opacity: .2; transform: translateX(58px); clip-path: inset(0 0 0 100%); } to { opacity: 1; transform: translateX(0); clip-path: inset(0); } }
@keyframes pulse-cell { 0%,100% { opacity: .28; } 50% { opacity: 1; } }
@keyframes attack-flash { 0% { opacity: 0; } 35% { opacity: .22; } 100% { opacity: 0; } }

/* 07 — source convergence */
.source-equation {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 8px;
  color: var(--blue);
  font: 600 40px/1 "Bahnschrift", sans-serif;
}
.source-equation span { color: var(--muted); font-size: 30px; }

.source-map {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr .72fr 1fr;
  align-items: stretch;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.sources,
.behaviors {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 28px 0;
}

.sources span,
.behaviors span {
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  font-family: "Bahnschrift", "Microsoft YaHei UI", sans-serif;
  font-size: 23px;
}
.sources span:last-child,
.behaviors span:last-child { border-bottom: 0; }
.sources span { justify-content: flex-end; color: var(--muted); }
.behaviors span { color: var(--blue-dark); font-weight: 700; }
.behaviors .behavior-long { font-size: 20px; white-space: nowrap; }

.unifier {
  position: relative;
  display: grid;
  place-content: center;
  gap: 12px;
  margin: 54px 30px;
  background: var(--blue-dark);
  color: white;
  text-align: center;
}
.unifier::before,
.unifier::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 31px;
  height: 3px;
  background: var(--cyan);
}
.unifier::before { right: 100%; }
.unifier::after { left: 100%; }
.unifier i {
  width: 68px;
  height: 68px;
  margin: 0 auto 12px;
  background:
    linear-gradient(90deg, var(--cyan) 0 28%, transparent 28% 36%, var(--cyan) 36% 64%, transparent 64% 72%, var(--cyan) 72%) 0 0 / 100% 18px,
    linear-gradient(90deg, var(--cyan) 0 28%, transparent 28% 36%, var(--cyan) 36% 64%, transparent 64% 72%, var(--cyan) 72%) 0 25px / 100% 18px,
    linear-gradient(90deg, var(--red) 0 28%, transparent 28% 36%, var(--cyan) 36% 64%, transparent 64% 72%, var(--cyan) 72%) 0 50px / 100% 18px;
  background-repeat: no-repeat;
}
.unifier strong { font-size: 28px; }
.unifier span { color: var(--cyan); font: 27px/1 "Bahnschrift", sans-serif; }

.scene-07.active .sources span { animation: source-left .66s var(--ease) both; }
.scene-07.active .behaviors span { animation: source-right .66s var(--ease) both; }
.scene-07.active .sources span:nth-child(2),
.scene-07.active .behaviors span:nth-child(2) { animation-delay: .08s; }
.scene-07.active .sources span:nth-child(3),
.scene-07.active .behaviors span:nth-child(3) { animation-delay: .16s; }
.scene-07.active .sources span:nth-child(4),
.scene-07.active .behaviors span:nth-child(4) { animation-delay: .24s; }
.scene-07.active .sources span:nth-child(5),
.scene-07.active .behaviors span:nth-child(5) { animation-delay: .32s; }
.scene-07.active .sources span:nth-child(6) { animation-delay: .4s; }
.scene-07.active .sources span:nth-child(7) { animation-delay: .48s; }
.scene-07.active .unifier { animation: unifier-open .82s .42s var(--ease) both; }

/* 08 — admission gate */
.admission-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.record-stream {
  position: absolute;
  left: 3%;
  top: 18%;
  bottom: 18%;
  width: 39%;
  display: grid;
  grid-template-columns: repeat(12, 14px);
  align-content: center;
  justify-content: center;
  gap: 12px 14px;
}
.record-stream i {
  width: 14px;
  height: 14px;
  background: var(--blue);
  opacity: .55;
}
.record-stream i:nth-child(17n) { background: var(--red); }

.admission-gate {
  position: absolute;
  left: 42%;
  top: 13%;
  bottom: 13%;
  width: 17%;
  display: grid;
  place-content: center;
  gap: 12px;
  border-top: 4px solid var(--blue-dark);
  border-bottom: 4px solid var(--blue-dark);
  background: var(--surface);
  text-align: center;
}
.admission-gate::before,
.admission-gate::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cyan);
}
.admission-gate::before { top: 27%; }
.admission-gate::after { bottom: 27%; }
.admission-gate span { color: var(--muted); font: 22px/1 "Bahnschrift", sans-serif; }
.admission-gate strong { font-size: 30px; }
.admission-gate i { width: 24px; height: 24px; margin: 8px auto 0; background: var(--cyan); }

.admitted-output {
  position: absolute;
  right: 4%;
  top: 19%;
  width: 32%;
  height: 39%;
  display: grid;
  align-content: center;
  padding: 28px 34px;
  border-bottom: 2px solid var(--blue);
  background: var(--blue-dark);
  color: white;
}
.admitted-output span,
.excluded-output span { font: 22px/1 "Bahnschrift", sans-serif; letter-spacing: .02em; }
.admitted-output span { color: oklch(0.8 0.01 242); }
.admitted-output strong { margin-top: 10px; font: 58px/1 "Bahnschrift", sans-serif; }
.admitted-output i { height: 7px; margin-top: 23px; background: linear-gradient(90deg, var(--cyan) 0 99.74%, oklch(1 0 0 / .16) 99.74%); }

.excluded-output {
  position: absolute;
  right: 4%;
  bottom: 16%;
  width: 22%;
  min-height: 110px;
  display: grid;
  align-content: center;
  padding: 20px 28px;
  background: var(--red-soft);
  color: var(--ink);
}
.excluded-output span { color: var(--red); }
.excluded-output strong { margin-top: 8px; font: 38px/1 "Bahnschrift", sans-serif; }

.split-rail {
  display: flex;
  min-height: 78px;
  border-top: 1px solid var(--line);
  font-family: "Bahnschrift", "Microsoft YaHei UI", sans-serif;
}
.split-rail span {
  width: var(--w);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 22px;
}
.split-rail span:first-child { border-left: 0; }
.split-rail b { color: var(--ink); font-size: 22px; }
.split-rail span:nth-child(1) { box-shadow: inset 0 8px var(--blue-dark); background: oklch(0.97 0.01 242); }
.split-rail span:nth-child(2) { box-shadow: inset 0 8px var(--blue); background: oklch(0.96 0.018 242); }
.split-rail span:nth-child(3) { box-shadow: inset 0 8px var(--cyan); background: oklch(0.97 0.014 195); }

.scene-08.active .record-stream i { animation: record-flow .76s var(--ease) both; animation-delay: calc(var(--n) * 7ms + .12s); }
.scene-08.active .record-stream i:nth-child(17n) { animation-name: record-exclude; animation-delay: calc(var(--n) * 7ms + .55s); }
.scene-08.active .admission-gate { animation: gate-scan .8s .38s var(--ease) both; }
.scene-08.active .admitted-output { animation: admitted-lock .72s .78s var(--ease) both; }
.scene-08.active .excluded-output { animation: excluded-peel .62s .96s var(--ease) both; }
.scene-08.active .split-rail span { animation: split-fill .56s 1.12s var(--ease) both; }

/* 09 — label firewall */
.firewall-stage {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 34px;
  align-content: center;
  padding: 46px 12% 46px 3%;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.lane {
  position: relative;
  display: grid;
  grid-template-columns: 250px 1fr 300px 210px;
  align-items: center;
  gap: 28px;
  min-height: 140px;
  border-bottom: 1px solid var(--line);
}
.lane > span { color: var(--muted); font-size: 24px; }
.lane > i { height: 4px; background: var(--cyan); }
.lane > strong { font-size: 27px; }
.lane > b {
  display: grid;
  place-items: center;
  min-height: 74px;
  background: var(--blue-dark);
  color: white;
  font: 23px/1 "Bahnschrift", sans-serif;
}
.label-lane > i { background: var(--red); }
.label-lane > b { background: var(--red); }

.firewall {
  position: absolute;
  right: 8%;
  top: 9%;
  bottom: 9%;
  width: 5px;
  background: var(--ink);
  transform-origin: bottom;
}
.firewall i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  border: 5px solid var(--red);
  transform: translate(-50%, -50%) rotate(45deg);
}
.firewall strong {
  position: absolute;
  right: 84px;
  top: 50%;
  width: 250px;
  color: var(--red);
  font: 22px/1 "Bahnschrift", sans-serif;
  text-align: right;
  transform: translateY(-50%);
}

.scene-09.active .raw-lane { animation: lane-pass .9s .16s var(--ease) both; }
.scene-09.active .label-lane { animation: lane-stop .76s .3s var(--ease) both; }
.scene-09.active .firewall { animation: firewall-rise .72s .46s var(--ease) both; }

/* 10 — feature contract */
.zero-hit {
  display: grid;
  justify-items: end;
  gap: 4px;
  padding-bottom: 4px;
}
.zero-hit span { color: var(--muted); font-size: 22px; }
.zero-hit strong { color: var(--blue); font: 62px/1 "Bahnschrift", sans-serif; }

.feature-band {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(29, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 7px;
  padding: 26px 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.feature-band i { background: var(--blue); opacity: .57; }
.feature-band i[data-group="2"] { background: oklch(0.64 0.1 225); }
.feature-band i[data-group="3"] { background: var(--cyan); }
.feature-band i[data-group="4"] { background: oklch(0.58 0.15 250); }
.feature-band i[data-group="5"] { background: oklch(0.72 0.09 195); }
.feature-band i[data-group="6"] { background: var(--blue-dark); }
.feature-band i[data-group="7"] { background: oklch(0.5 0.08 242); }
.feature-band i[data-group="8"] { background: var(--red); }

.feature-groups {
  display: grid;
  grid-template-columns: 13fr 14fr 5fr 8fr 8fr 38fr 23fr 7fr;
  min-height: 62px;
  border-bottom: 1px solid var(--line);
}
.feature-groups span {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 20px;
}
.feature-groups span:first-child { border-left: 0; }

.feature-examples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  min-height: 88px;
}
.feature-examples span {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 21px;
}
.feature-examples span:first-child { border-left: 0; }
.feature-examples b { color: var(--ink); font-size: 24px; }

.scene-10.active .feature-band i { animation: feature-arrive .54s var(--ease) both; animation-delay: calc(var(--n) * 7ms + .16s); }
.scene-10.active .feature-examples span { animation: example-open .58s var(--ease) both; }
.scene-10.active .feature-examples span:nth-child(1) { animation-delay: .82s; }
.scene-10.active .feature-examples span:nth-child(2) { animation-delay: .94s; }
.scene-10.active .feature-examples span:nth-child(3) { animation-delay: 1.06s; }

/* 11 — sequence context */
.context-compare {
  min-height: 0;
  display: grid;
  grid-template-columns: .36fr 1.64fr;
  gap: 0;
  border-top: 2px solid oklch(1 0 0 / .48);
  border-bottom: 1px solid oklch(1 0 0 / .22);
}
.single-context,
.full-context {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  padding: 34px;
}
.single-context { border-right: 1px solid oklch(1 0 0 / .2); }
.single-context > span,
.full-context > span { color: oklch(0.78 0.01 242); font-size: 23px; }
.single-context > strong,
.full-context > strong { font-size: 24px; }
.single-context > div {
  display: grid;
  place-items: center;
  border: 1px solid oklch(1 0 0 / .22);
}
.single-context i { width: 42px; height: 62%; background: var(--cyan); }

.context-sequence {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  align-items: end;
  gap: 10px;
  min-height: 360px;
  padding: 22px 0;
}
.context-sequence i {
  position: relative;
  height: var(--h);
  min-height: 38px;
  background: var(--cyan);
  transform-origin: bottom;
}
.context-sequence i::after {
  content: attr(data-step);
  position: absolute;
  left: 50%;
  bottom: -32px;
  color: oklch(0.73 0.01 242);
  font: 20px/1 "Bahnschrift", sans-serif;
  transform: translateX(-50%);
}
.context-sequence i.hot { background: var(--red); }
.context-verdict {
  min-height: 72px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
.context-verdict span { color: var(--cyan); font: 22px/1 "Bahnschrift", sans-serif; }
.context-verdict strong { font-size: 24px; }

.scene-11.active .single-context { animation: context-single .58s .16s var(--ease) both; }
.scene-11.active .context-sequence i { animation: context-step .58s var(--ease) both; animation-delay: calc(var(--n) * 55ms + .28s); }
.scene-11.active .full-context strong { animation: verdict-reveal .5s 1.28s var(--ease) both; }

/* 12 — sliding window */
.window-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.window-rail {
  position: absolute;
  left: 4%;
  right: 22%;
  top: 50%;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 7px;
  transform: translateY(-50%);
}
.window-rail i {
  position: relative;
  height: 160px;
  background: var(--surface-2);
}
.window-rail i::after {
  content: attr(data-step);
  position: absolute;
  left: 50%;
  bottom: -32px;
  color: var(--muted);
  font: 20px/1 "Bahnschrift", sans-serif;
  transform: translateX(-50%);
}
.window-rail i.hot { background: var(--red-soft); }

.window-frame {
  position: absolute;
  left: 4%;
  top: calc(50% - 122px);
  width: 50.5%;
  height: 244px;
  border: 4px solid var(--blue);
  pointer-events: none;
}
.window-frame span {
  position: absolute;
  left: 16px;
  top: 14px;
  color: var(--blue);
  font: 21px/1 "Bahnschrift", sans-serif;
}
.window-frame b {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 10px 14px;
  background: var(--blue);
  color: white;
  font: 20px/1 "Bahnschrift", sans-serif;
}
.window-two { border-color: var(--cyan); transform: translateX(25.25%); opacity: 0; }
.window-two span { color: oklch(0.45 0.12 195); }
.window-two b { background: oklch(0.45 0.12 195); }

.sample-output {
  position: absolute;
  right: 2%;
  top: 31%;
  width: 17%;
  height: 38%;
  display: grid;
  place-content: center;
  gap: 10px;
  background: var(--blue-dark);
  color: white;
  text-align: center;
}
.sample-output span { color: oklch(0.78 0.01 242); font-size: 22px; }
.sample-output strong { color: var(--cyan); font: 42px/1 "Bahnschrift", sans-serif; }

.window-rules {
  display: grid;
  grid-template-columns: .7fr .58fr 1.05fr 1.55fr;
  min-height: 82px;
  border-top: 1px solid var(--line);
}
.window-rules span {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font: 20px/1.2 "Bahnschrift", "Microsoft YaHei UI", sans-serif;
}
.window-rules span:first-child { border-left: 0; }
.window-rules b { color: var(--blue); font-size: 31px; }
.window-rules .wide b { font-family: "Microsoft YaHei UI", sans-serif; font-size: 25px; white-space: nowrap; }

.scene-12.active .window-rail i { animation: rail-cell .48s var(--ease) both; animation-delay: calc(var(--n) * 26ms + .12s); }
.scene-12.active .window-one { animation: window-first .78s .48s var(--ease) both; }
.scene-12.active .window-two { animation: window-second .92s 1.18s var(--ease) both; }
.scene-12.active .sample-output { animation: sample-stamp .58s 1.74s var(--ease) both; }
.scene-12.active .window-rules span { animation: evidence-up .46s var(--ease) both; }
.scene-12.active .window-rules span:nth-child(1) { animation-delay: 1.86s; }
.scene-12.active .window-rules span:nth-child(2) { animation-delay: 1.96s; }
.scene-12.active .window-rules span:nth-child(3) { animation-delay: 2.06s; }
.scene-12.active .window-rules span:nth-child(4) { animation-delay: 2.16s; }

/* 13 — dilation */
.dilation-stage {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.dilation-row {
  display: grid;
  grid-template-columns: 220px 1fr 190px;
  align-items: center;
  gap: 32px;
  border-top: 1px solid var(--line);
}
.dilation-row:first-child { border-top: 0; }
.dilation-row > strong { font: 25px/1 "Bahnschrift", sans-serif; }
.dilation-row > span { color: var(--muted); font-size: 23px; }
.dilation-row > div {
  position: relative;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 13px;
}
.dilation-row i {
  height: 42px;
  background: var(--surface-2);
}
.dilation-row i.active { background: var(--blue); }
.dilation-row.d4 i.active { background: var(--red); }
.dilation-row div::after {
  content: "";
  position: absolute;
  inset: -10px auto -10px 0;
  width: 4px;
  opacity: 0;
  background: var(--red);
  box-shadow: 15px 0 30px oklch(0.64 0.19 31 / .24);
}
.scene-13.active .dilation-row { animation: dilation-row .7s var(--ease) both; }
.scene-13.active .dilation-row:nth-child(2) { animation-delay: .18s; }
.scene-13.active .dilation-row:nth-child(3) { animation-delay: .36s; }
.scene-13.active .dilation-row div::after { animation: scan-across 1.2s .48s var(--ease) both; }

/* 14 — model architecture */
.parameter-count {
  display: grid;
  justify-items: end;
  gap: 4px;
  padding-bottom: 4px;
}
.parameter-count strong { color: var(--cyan); font: 49px/1 "Bahnschrift", sans-serif; }
.parameter-count span { color: oklch(0.78 0.01 242); font-size: 21px; }

.head-model {
  position: relative;
  min-height: 0;
  border-top: 2px solid oklch(1 0 0 / .45);
  border-bottom: 1px solid oklch(1 0 0 / .2);
}
.model-input,
.shared-core,
.pooling,
.model-head {
  position: absolute;
  display: grid;
  place-content: center;
  text-align: center;
}
.model-input {
  left: 2%;
  top: 30%;
  width: 18%;
  height: 40%;
  border: 1px solid oklch(1 0 0 / .25);
}
.model-input span,
.model-head span { color: oklch(0.76 0.01 242); font: 20px/1 "Bahnschrift", sans-serif; }
.model-input strong { margin-top: 12px; color: var(--cyan); font: 38px/1 "Bahnschrift", sans-serif; }
.model-input b { margin-top: 12px; font: 24px/1 "Bahnschrift", sans-serif; }

.shared-core {
  left: 26%;
  top: 17%;
  width: 30%;
  height: 66%;
  grid-template-columns: repeat(3, 82px);
  grid-template-rows: 1fr auto auto;
  gap: 22px;
  background: oklch(0.24 0.07 242);
}
.shared-core i {
  align-self: end;
  width: 82px;
  height: 210px;
  border: 3px solid var(--cyan);
  background: oklch(0.31 0.105 242);
}
.shared-core i:nth-child(2) { height: 250px; border-color: var(--blue); }
.shared-core i:nth-child(3) { height: 292px; border-color: var(--red); }
.shared-core strong { grid-column: 1 / -1; font-size: 27px; }
.shared-core span { grid-column: 1 / -1; color: oklch(0.78 0.01 242); font: 20px/1 "Bahnschrift", sans-serif; }

.pooling {
  left: 61%;
  top: 29%;
  width: 16%;
  height: 42%;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pooling span { display: grid; place-items: center; min-height: 82px; border: 1px solid oklch(1 0 0 / .26); color: var(--cyan); font: 21px/1 "Bahnschrift", sans-serif; }
.pooling strong { grid-column: 1 / -1; font: 24px/1 "Bahnschrift", sans-serif; }

.model-head {
  right: 2%;
  width: 17%;
  height: 30%;
  border: 1px solid oklch(1 0 0 / .28);
}
.model-head.binary { top: 15%; }
.model-head.behavior { bottom: 15%; }
.model-head strong { margin-top: 12px; font-size: 28px; }
.model-head.binary strong { color: oklch(0.76 0.15 31); }
.model-head.behavior strong { color: var(--cyan); }
.head-model::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 4%;
  top: 50%;
  height: 3px;
  background: oklch(1 0 0 / .24);
}

.scene-14.active .model-input { animation: model-stage .56s .14s var(--ease) both; }
.scene-14.active .shared-core { animation: model-stage .62s .34s var(--ease) both; }
.scene-14.active .shared-core i { animation: core-grow .68s var(--ease) both; }
.scene-14.active .shared-core i:nth-child(1) { animation-delay: .48s; }
.scene-14.active .shared-core i:nth-child(2) { animation-delay: .62s; }
.scene-14.active .shared-core i:nth-child(3) { animation-delay: .76s; }
.scene-14.active .pooling { animation: model-stage .62s .72s var(--ease) both; }
.scene-14.active .model-head.binary { animation: head-up .66s .94s var(--ease) both; }
.scene-14.active .model-head.behavior { animation: head-down .66s 1.02s var(--ease) both; }

/* 15 — training */
.training-time { display: grid; justify-items: end; gap: 4px; padding-bottom: 4px; }
.training-time strong { color: var(--blue); font: 43px/1 "Bahnschrift", sans-serif; }
.training-time span { color: var(--muted); font-size: 21px; }

.training-chart {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: 72px 1fr 92px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.training-chart-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  font-size: 23px;
}
.training-chart-label strong { color: var(--blue); }
.training-chart-label span { color: var(--muted); }

.epoch-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  gap: 26px;
  padding: 34px 28px;
}
.epoch-track::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 50%;
  height: 4px;
  background: var(--cyan);
  transform-origin: left;
}
.epoch-track span {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 118px;
  display: grid;
  place-content: center;
  gap: 8px;
  border: 2px solid var(--blue);
  background: white;
  text-align: center;
}
.epoch-track b { color: var(--blue-dark); font: 38px/1 "Bahnschrift", sans-serif; }
.epoch-track i { color: var(--muted); font: 20px/1 "Bahnschrift", sans-serif; font-style: normal; }
.epoch-track .best { min-height: 156px; border-color: var(--red); background: var(--blue-dark); }
.epoch-track .best b { color: var(--cyan); font-size: 50px; }
.epoch-track .best i { color: white; }

.validation-rule {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  border-top: 1px solid var(--line);
}
.validation-rule span { color: var(--muted); font-size: 22px; }
.validation-rule strong { font-size: 23px; }
.validation-rule b { color: var(--blue); font: 22px/1 "Bahnschrift", sans-serif; }

.training-evidence {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 88px;
  border-top: 1px solid var(--line);
}
.training-evidence span {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 0 24px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font: 20px/1.25 "Bahnschrift", "Microsoft YaHei UI", sans-serif;
}
.training-evidence span:first-child { border-left: 0; }
.training-evidence b { color: var(--ink); font-size: 23px; }

.scene-15.active .training-chart-label { animation: evidence-up .48s .1s var(--ease) both; }
.scene-15.active .epoch-track::before { animation: connector-grow 1.16s .28s var(--ease) both; }
.scene-15.active .epoch-track span { animation: epoch-pop .42s var(--ease) both; }
.scene-15.active .epoch-track span:nth-child(1) { animation-delay: .28s; }
.scene-15.active .epoch-track span:nth-child(2) { animation-delay: .4s; }
.scene-15.active .epoch-track span:nth-child(3) { animation-delay: .52s; }
.scene-15.active .epoch-track span:nth-child(4) { animation: best-lock .58s .64s var(--ease) both; }
.scene-15.active .epoch-track span:nth-child(5) { animation-delay: .76s; }
.scene-15.active .epoch-track span:nth-child(6) { animation-delay: .88s; }
.scene-15.active .epoch-track span:nth-child(7) { animation-delay: 1s; }
.scene-15.active .epoch-track span:nth-child(8) { animation-delay: 1.12s; }
.scene-15.active .validation-rule { animation: evidence-up .52s 1.18s var(--ease) both; }
.scene-15.active .training-evidence span { animation: evidence-up .52s var(--ease) both; }
.scene-15.active .training-evidence span:nth-child(1) { animation-delay: 1.14s; }
.scene-15.active .training-evidence span:nth-child(2) { animation-delay: 1.24s; }
.scene-15.active .training-evidence span:nth-child(3) { animation-delay: 1.34s; }
.scene-15.active .training-evidence span:nth-child(4) { animation-delay: 1.44s; }

@keyframes source-left { from { opacity: .15; transform: translateX(-54px); } to { opacity: 1; transform: translateX(0); } }
@keyframes source-right { from { opacity: .15; transform: translateX(54px); } to { opacity: 1; transform: translateX(0); } }
@keyframes unifier-open { from { opacity: .2; transform: scaleY(.25); } to { opacity: 1; transform: scaleY(1); } }
@keyframes record-flow { from { opacity: .1; transform: translateX(-52px) scale(.4); } to { opacity: .58; transform: translateX(0) scale(1); } }
@keyframes record-exclude { 0% { opacity: .1; transform: translateX(-52px) scale(.4); } 65% { opacity: 1; transform: translateX(0) scale(1); } 100% { opacity: .35; transform: translate(110px, 80px) scale(.72); } }
@keyframes gate-scan { from { opacity: .25; clip-path: inset(48% 0 48%); } to { opacity: 1; clip-path: inset(0); } }
@keyframes admitted-lock { from { opacity: .2; transform: translateX(52px); clip-path: inset(0 0 0 100%); } to { opacity: 1; transform: translateX(0); clip-path: inset(0); } }
@keyframes excluded-peel { from { opacity: .2; transform: translate(-40px, -30px); } to { opacity: 1; transform: translate(0); } }
@keyframes split-fill { from { opacity: .2; transform: scaleX(.25); transform-origin: left; } to { opacity: 1; transform: scaleX(1); } }
@keyframes lane-pass { from { opacity: .2; transform: translateX(-70px); } to { opacity: 1; transform: translateX(0); } }
@keyframes lane-stop { 0% { opacity: .2; transform: translateX(-70px); } 75% { opacity: 1; transform: translateX(16px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes firewall-rise { from { opacity: .2; transform: scaleY(.1); } to { opacity: 1; transform: scaleY(1); } }
@keyframes feature-arrive { from { opacity: .08; transform: translateY(38px) scale(.25); } to { opacity: .57; transform: translateY(0) scale(1); } }
@keyframes example-open { from { opacity: .2; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes context-single { from { opacity: .2; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes context-step { from { opacity: .15; transform: scaleY(.06); } to { opacity: 1; transform: scaleY(1); } }
@keyframes verdict-reveal { from { opacity: .2; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rail-cell { from { opacity: .12; transform: scaleY(.18); } to { opacity: 1; transform: scaleY(1); } }
@keyframes window-first { from { opacity: .2; transform: translateX(-70px); } to { opacity: 1; transform: translateX(0); } }
@keyframes window-second { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 100% { opacity: 1; transform: translateX(25.25%); } }
@keyframes sample-stamp { from { opacity: .2; transform: scale(1.3); clip-path: inset(50%); } to { opacity: 1; transform: scale(1); clip-path: inset(0); } }
@keyframes dilation-row { from { opacity: .2; transform: translateX(38px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scan-across { from { left: 0; opacity: 0; } 18% { opacity: 1; } to { left: 100%; opacity: 0; } }
@keyframes core-grow { from { opacity: .2; transform: scaleY(.12); transform-origin: bottom; } to { opacity: 1; transform: scaleY(1); } }
@keyframes head-up { from { opacity: .2; transform: translate(-34px, 34px); } to { opacity: 1; transform: translate(0); } }
@keyframes head-down { from { opacity: .2; transform: translate(-34px, -34px); } to { opacity: 1; transform: translate(0); } }
@keyframes training-draw { to { stroke-dashoffset: 0; } }
@keyframes epoch-pop { from { opacity: .15; transform: scale(.2); transform-box: fill-box; transform-origin: center; } to { opacity: 1; transform: scale(1); } }
@keyframes best-lock { from { opacity: .2; transform: translateX(42px); clip-path: inset(0 0 0 100%); } to { opacity: 1; transform: translateX(0); clip-path: inset(0); } }
@keyframes evidence-up { from { opacity: .2; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* 16 — leakage controls */
.gates {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.gate {
  position: relative;
  display: grid;
  align-content: center;
  gap: 15px;
  padding: 44px;
  border-left: 1px solid var(--line);
  overflow: hidden;
}
.gate:first-child { border-left: 0; }
.gate span { color: var(--muted); font: 21px/1 "Bahnschrift", sans-serif; }
.gate strong { font-size: 28px; }
.gate i {
  position: absolute;
  left: 44px;
  right: 44px;
  bottom: 80px;
  height: 8px;
  background: var(--blue);
}
.gate::after {
  content: "PASS";
  position: absolute;
  right: 32px;
  top: 34px;
  color: var(--cyan);
  font: 22px/1 "Bahnschrift", sans-serif;
}
.gate:nth-child(3) i { background: var(--red); }

.duplicate-proof {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.duplicate-proof span { color: var(--muted); font-size: 23px; }
.duplicate-proof strong { color: var(--blue); font-size: 26px; }

.scene-16.active .gate { animation: gate-drop .66s var(--ease) both; }
.scene-16.active .gate:nth-child(2) { animation-delay: .14s; }
.scene-16.active .gate:nth-child(3) { animation-delay: .28s; }
.scene-16.active .gate:nth-child(4) { animation-delay: .42s; }
.scene-16.active .gate::after { animation: pass-stamp .38s .86s var(--ease) both; }

/* 17 — threshold */
.threshold-track {
  position: relative;
  min-height: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.track-line {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 5px;
  background: var(--line);
  transform-origin: left;
}
.track-line::before,
.track-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  background: var(--blue);
  transform: translate(-50%, -50%);
}
.track-line::before { left: 28%; }
.track-line::after { left: 76%; background: var(--red); }
.workpoint {
  position: absolute;
  top: 25%;
  width: 330px;
  transform: translateX(-50%);
}
.workpoint.one { left: 31.5%; }
.workpoint.three { left: 72.5%; }
.workpoint span { display: block; color: var(--muted); font: 21px/1 "Bahnschrift", sans-serif; }
.workpoint strong { display: block; margin-top: 10px; font: 43px/1 "Bahnschrift", sans-serif; }
.workpoint b { display: block; margin-top: 12px; color: var(--muted); font-size: 23px; }
.workpoint.one strong { color: var(--blue); }
.workpoint.three strong { color: var(--red); }
.workpoint::after {
  content: "";
  position: absolute;
  left: 0;
  top: 172px;
  height: 82px;
  background: linear-gradient(90deg, currentColor 0 68%, transparent 68%) 0 0 / 22px 19px;
  opacity: .45;
  transform-origin: left;
}
.workpoint.one::after { width: 96px; color: var(--blue); }
.workpoint.three::after { width: 320px; color: var(--red); }
.threshold-lock {
  position: absolute;
  left: 31.5%;
  top: calc(50% + 50px);
  padding: 12px 20px;
  background: var(--blue-dark);
  color: white;
  font: normal 21px/1 "Bahnschrift", sans-serif;
  transform: translateX(-50%);
}
.threshold-conclusion {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  font-size: 24px;
}
.threshold-conclusion span { color: var(--muted); }
.threshold-conclusion span b { color: var(--blue); }
.threshold-conclusion i { color: var(--line); font-style: normal; }
.threshold-conclusion strong { color: var(--red); font-size: 27px; }

.scene-17.active .track-line { animation: metric-axis .9s .2s var(--ease) both; }
.scene-17.active .workpoint { animation: workpoint-in .56s var(--ease) both; }
.scene-17.active .workpoint.one { animation-delay: .48s; }
.scene-17.active .workpoint.three { animation-delay: .68s; }
.scene-17.active .threshold-lock { animation: threshold-return .78s .86s var(--ease) both; }
.scene-17.active .threshold-conclusion strong { animation: false-positive-grow .6s 1.2s var(--ease) both; }
.scene-17.active .workpoint::after { animation: fp-pile .72s 1.05s var(--ease) both; }

/* 18 — pixel result */
.pixel-proof {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 8px 18px;
  padding-bottom: 4px;
}
.pixel-proof span { color: oklch(0.74 0.01 242); font-size: 21px; }
.pixel-proof strong { color: var(--cyan); font: 33px/1 "Bahnschrift", sans-serif; }
.pixel-proof strong:first-of-type { color: oklch(0.76 0.15 31); }

.pixel-field {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(48, 1fr);
  grid-auto-rows: 1fr;
  gap: 6px;
  padding: 22px 0;
  border-top: 2px solid oklch(1 0 0 / .42);
  border-bottom: 1px solid oklch(1 0 0 / .18);
}
.pixel-field > i { min-height: 8px; background: var(--cyan); opacity: .78; }
.pixel-field > i.miss { background: transparent; outline: 2px solid var(--red); }
.pixel-field::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: oklch(0.12 0.018 242 / .78);
}
.pixel-field::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  opacity: 0;
  background: var(--red);
  box-shadow: 20px 0 48px var(--red);
}

.pixel-cinema-lock {
  position: absolute;
  z-index: 5;
  inset: 50% auto auto 50%;
  min-width: 680px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  gap: 4px 32px;
  padding: 30px 40px 28px;
  background: oklch(0.15 0.02 242 / .96);
  color: white;
  transform: translate(-50%, -50%);
}

.pixel-cinema-lock span {
  grid-column: 1 / -1;
  color: oklch(0.82 0.01 242);
  font-size: 24px;
}

.pixel-cinema-lock strong {
  color: var(--cyan);
  font: 78px/.95 "Bahnschrift", "Microsoft YaHei UI", sans-serif;
  letter-spacing: -.025em;
}

.pixel-cinema-lock b {
  padding-bottom: 8px;
  color: oklch(0.78 0.01 242);
  font: 23px/1 "Bahnschrift", sans-serif;
}

.pixel-focus-frame {
  position: absolute;
  z-index: 4;
  inset: 11% 18%;
  border-top: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  pointer-events: none;
}
.normal-fp {
  min-height: 78px;
  display: grid;
  grid-template-columns: 250px 1fr 170px;
  align-items: center;
  gap: 22px;
  font-size: 22px;
}
.normal-fp span { color: oklch(0.74 0.01 242); }
.normal-fp i { height: 10px; background: oklch(1 0 0 / .15); }
.normal-fp i b { display: block; width: .9%; min-width: 14px; height: 100%; background: var(--red); }
.normal-fp strong { color: oklch(0.76 0.15 31); }

.scene-18.active .pixel-field { animation: pixel-stage-cinema 2.15s .12s var(--ease) both; }
.scene-18.active .pixel-field > i { animation: pixel-in .3s var(--ease) both; animation-delay: calc(var(--n) * .72ms + .16s); }
.scene-18.active .pixel-field::before { animation: pixel-field-dim .58s 1.68s var(--ease) both; }
.scene-18.active .pixel-field::after { animation: pixel-scan-cinema 1.25s .68s var(--ease) both; }
.scene-18.active .pixel-cinema-lock { animation: pixel-result-cinema .72s 1.82s var(--ease) both; }
.scene-18.active .pixel-focus-frame { animation: pixel-focus-cinema .72s 1.6s var(--ease) both; }
.scene-18.active .pixel-proof { animation: result-lock .55s 2.18s var(--ease) both; }
.scene-18.active .normal-fp { animation: evidence-up .52s 2.28s var(--ease) both; }

/* 19 — behavior results */
.macro-f1 {
  display: grid;
  justify-items: end;
  gap: 5px;
  padding-bottom: 4px;
}
.macro-f1 span { color: var(--muted); font: 20px/1 "Bahnschrift", sans-serif; }
.macro-f1 strong { color: var(--blue); font: 38px/1 "Bahnschrift", sans-serif; }
.behavior-bars {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.behavior-bars > div {
  position: relative;
  display: grid;
  grid-template-columns: 390px 1fr 170px;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--line);
}
.behavior-bars > div:first-child { border-top: 0; }
.behavior-bars span { font: 21px/1 "Bahnschrift", sans-serif; white-space: nowrap; }
.behavior-bars i { height: 28px; background: var(--surface-2); }
.behavior-bars i::after {
  content: "";
  display: block;
  width: var(--v);
  height: 100%;
  background: var(--blue);
  transform-origin: left;
}
.behavior-bars strong { font: 31px/1 "Bahnschrift", sans-serif; }
.behavior-bars .hard i::after { background: var(--red); }
.behavior-bars .hard strong { color: var(--red); }
.behavior-bars .hard b {
  position: absolute;
  right: 0;
  bottom: 5px;
  color: var(--muted);
  font-size: 19px;
  font-weight: 500;
}
.scene-19.active .behavior-bars > div { animation: result-row .52s var(--ease) both; }
.scene-19.active .behavior-bars > div:nth-child(2) { animation-delay: .1s; }
.scene-19.active .behavior-bars > div:nth-child(3) { animation-delay: .2s; }
.scene-19.active .behavior-bars > div:nth-child(4) { animation-delay: .3s; }
.scene-19.active .behavior-bars > div:nth-child(5) { animation-delay: .48s; }
.scene-19.active .behavior-bars i::after { animation: result-fill .9s .32s var(--ease) both; }

/* 20 — ablation */
.ablation-tracks {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.ablation-tracks > div {
  display: grid;
  grid-template-columns: 350px 1fr 170px 285px;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--line);
}
.ablation-tracks > div:first-child { border-top: 0; }
.ablation-tracks span { font-size: 22px; }
.ablation-tracks i { height: 22px; background: var(--surface-2); }
.ablation-tracks i::after { content: ""; display: block; width: var(--v); height: 100%; background: var(--blue); transform-origin: left; }
.ablation-tracks strong { font: 27px/1 "Bahnschrift", sans-serif; }
.ablation-tracks b { color: var(--muted); font: 20px/1 "Bahnschrift", sans-serif; white-space: nowrap; }
.ablation-tracks .no-delta i::after { background: var(--cyan); }
.ablation-tracks .no-delta strong { color: var(--blue-dark); }
.ablation-tracks .final i::after { background: var(--red); }
.ablation-tracks .final strong,
.ablation-tracks .final b { color: var(--red); }
.ablation-verdict {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 23px;
}
.ablation-verdict strong { color: var(--blue); }
.ablation-verdict span { color: var(--muted); }
.ablation-basis { display: grid; justify-items: end; gap: 8px; padding-bottom: 6px; }
.ablation-basis span { color: var(--blue); font: 760 23px/1 "Bahnschrift", sans-serif; }
.ablation-basis strong { color: var(--muted); font: 21px/1 "Bahnschrift", sans-serif; white-space: nowrap; }
.scene-20.active .ablation-tracks > div { animation: ablation-state .56s var(--ease) both; }
.scene-20.active .ablation-tracks > div:nth-child(2) { animation-delay: .18s; }
.scene-20.active .ablation-tracks > div:nth-child(3) { animation-delay: .36s; }
.scene-20.active .ablation-tracks > div:nth-child(4) { animation-delay: .54s; }
.scene-20.active .ablation-tracks > div:nth-child(5) { animation-delay: .72s; }
.scene-20.active .ablation-tracks i::after { animation: result-fill .9s .38s var(--ease) both; }
.scene-20.active .ablation-basis { animation: evidence-up .48s .14s var(--ease) both; }

/* 21 — source holdout */
.boundary-stage {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  padding: 0 2%;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.boundary-axis {
  position: absolute;
  left: 49%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--blue-dark);
}
.boundary-axis span {
  position: absolute;
  left: 20px;
  top: 18px;
  width: 280px;
  color: var(--muted);
  font: 21px/1 "Bahnschrift", sans-serif;
}
.boundary-row {
  position: relative;
  display: grid;
  grid-template-columns: 280px 1fr 430px 160px;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--line);
}
.boundary-row:first-of-type { border-top: 0; }
.boundary-row strong { font-size: 25px; }
.boundary-row i { height: 4px; background: var(--cyan); }
.boundary-row span { color: var(--muted); font: 20px/1.28 "Bahnschrift", sans-serif; }
.boundary-row b { display: grid; place-items: center; min-height: 52px; background: var(--surface); color: var(--blue); font-size: 21px; }
.boundary-row.breakthrough i { background: linear-gradient(90deg, var(--cyan) 0 70%, var(--red) 70%); }
.boundary-row.breakthrough b { color: var(--red); }
.boundary-row.weak i {
  background: linear-gradient(90deg, var(--red) 0 44%, transparent 44% 48%, var(--red) 48% 55%, transparent 55% 60%, var(--red) 60%);
}
.boundary-row.weak span,
.boundary-row.weak b { color: var(--red); }
.boundary-row.recall i { background: linear-gradient(90deg, var(--blue) 0 65%, transparent 65%) 0 0 / 34px 4px repeat-x; }
.boundary-row.recall b { color: var(--blue-dark); }
.holdout-scene { grid-template-rows: auto minmax(0, 1fr); }
.scene-21.active .boundary-row { animation: boundary-pass .7s var(--ease) both; }
.scene-21.active .boundary-row:nth-child(3) { animation-delay: .14s; }
.scene-21.active .boundary-row:nth-child(4) { animation-delay: .28s; }
.scene-21.active .boundary-row:nth-child(5) { animation-delay: .42s; }
.scene-21.active .boundary-row:nth-child(6) { animation-delay: .56s; }
.scene-21.active .boundary-row.weak { animation: boundary-break .78s .44s var(--ease) both; }

/* 22 — real CPU run */
.runtime-pipeline {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 80px 1fr 80px 1fr;
  align-items: stretch;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.runtime-pipeline > b {
  display: grid;
  place-items: center;
  color: var(--line);
  font-size: 42px;
}
.runtime-node {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  align-content: center;
  padding: 38px;
  overflow: hidden;
}
.runtime-node span { color: var(--muted); font: 21px/1 "Bahnschrift", sans-serif; }
.runtime-node > strong { color: var(--blue-dark); font: 58px/1 "Bahnschrift", sans-serif; }
.runtime-node i { align-self: end; min-height: 250px; }
.packet-cloud {
  display: grid;
  grid-template-columns: repeat(10, 15px);
  align-content: center;
  justify-content: center;
  gap: 11px;
}
.packet-cloud b { width: 15px; height: 15px; background: var(--blue); opacity: .48; }
.packet-cloud b:nth-child(13n) { background: var(--red); }
.flow-stack {
  position: relative;
  display: block;
}
.flow-stack::before,
.flow-stack::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  height: 82px;
  border: 3px solid var(--blue);
}
.flow-stack::before { top: 25%; }
.flow-stack::after { top: 48%; border-color: var(--cyan); transform: translateX(26px); }
.window-stack {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 12px;
}
.window-stack b { height: calc(70px + var(--n) * 14px); background: var(--blue); }
.runtime-audit {
  display: grid;
  grid-template-columns: 150px 230px 170px 1fr;
  min-height: 82px;
  align-items: center;
  border-top: 1px solid var(--line);
}
.runtime-audit span,
.runtime-audit strong {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0 22px;
  border-left: 1px solid var(--line);
  font-size: 21px;
}
.runtime-audit span:first-child { border-left: 0; }
.runtime-audit span { color: var(--muted); }
.runtime-audit strong { justify-content: flex-end; color: var(--blue); }
.scene-22.active .packet-cloud b { animation: packet-collapse .72s var(--ease) both; animation-delay: calc(var(--n) * 7ms + .12s); }
.scene-22.active .flow-stack { animation: runtime-stage .62s .72s var(--ease) both; }
.scene-22.active .window-stack b { animation: window-grow .52s var(--ease) both; animation-delay: calc(var(--n) * 90ms + 1.08s); }
.scene-22.active .runtime-node > strong { animation: count-lock .48s 1.45s var(--ease) both; }

/* 23 — product */
.product-scene { isolation: isolate; }
.product-copy { position: relative; z-index: 3; display: grid; align-content: center; gap: 50px; }
.product-copy h2 { font-size: 58px; }
.product-capabilities {
  display: grid;
  border-top: 2px solid oklch(1 0 0 / .54);
  border-bottom: 1px solid oklch(1 0 0 / .18);
}
.product-capabilities span {
  min-height: 62px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-top: 1px solid oklch(1 0 0 / .16);
  color: oklch(.84 .015 242);
  font: 22px/1.2 "Bahnschrift", "Microsoft YaHei UI", sans-serif;
}
.product-capabilities span:first-child { border-top: 0; color: var(--cyan); }

.tool-window {
  position: relative;
  z-index: 3;
  height: 720px;
  overflow: hidden;
  border: 1px solid oklch(1 0 0 / .18);
  background: oklch(0.12 0.018 242);
  color: white;
}

.tool-window::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0 auto 0 0;
  width: 3px;
  opacity: 0;
  background: var(--cyan);
  box-shadow: 0 0 34px oklch(0.72 0.12 195 / .5);
}

.product-scanline {
  position: absolute;
  z-index: 2;
  left: 43%;
  right: 0;
  top: 50%;
  height: 3px;
  opacity: 0;
  background: var(--cyan);
  transform-origin: center;
}
.tool-top {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 30px;
  border-bottom: 1px solid oklch(1 0 0 / .18);
  font: 21px/1 "Bahnschrift", sans-serif;
}
.tool-top span { margin-right: auto; }
.tool-top b { color: var(--cyan); font: 720 19px/1 "Microsoft YaHei UI", sans-serif; }
.tool-top i { width: 14px; height: 14px; background: var(--cyan); }
.tool-body { padding: 0 34px; }
.tool-body > div {
  min-height: 132px;
  display: grid;
  align-content: center;
  border-bottom: 1px solid oklch(1 0 0 / .16);
}
.tool-body > div:last-child { border-bottom: 0; }
.tool-body span { color: oklch(0.72 0.01 242); font: 20px/1 "Bahnschrift", sans-serif; }
.tool-body strong { margin-top: 10px; font: 33px/1.1 "Bahnschrift", "Microsoft YaHei UI", sans-serif; }
.tool-file i { height: 7px; margin-top: 22px; background: oklch(1 0 0 / .12); }
.tool-file i b { display: block; width: 100%; height: 100%; background: var(--cyan); transform-origin: left; }
.tool-verdict strong { color: oklch(0.76 0.15 31); font-size: 47px; }
.tool-behavior strong { color: var(--cyan); }
.tool-score {
  grid-template-columns: 1fr auto;
  column-gap: 24px;
}
.tool-score span,
.tool-score b { grid-column: 1 / -1; }
.tool-score b { margin-top: 12px; color: oklch(0.68 0.01 242); font: 20px/1 "Bahnschrift", sans-serif; }
.scene-23.active .product-scanline { animation: product-seed-line .72s .16s var(--ease) both; }
.scene-23.active .tool-window { animation: product-window-cinema 1.02s .52s var(--ease) both; }
.scene-23.active .tool-window::after { animation: product-window-scan .86s 1.04s var(--ease) both; }
.scene-23.active .product-copy h2 { animation: product-title-cinema .78s 1.28s var(--ease) both; }
.scene-23.active .product-capabilities { animation: product-rail-cinema .62s 1.64s var(--ease) both; }
.scene-23.active .product-capabilities span { animation: result-row .46s var(--ease) both; }
.scene-23.active .product-capabilities span:nth-child(1) { animation-delay: 1.78s; }
.scene-23.active .product-capabilities span:nth-child(2) { animation-delay: 1.87s; }
.scene-23.active .product-capabilities span:nth-child(3) { animation-delay: 1.96s; }
.scene-23.active .product-capabilities span:nth-child(4) { animation-delay: 2.05s; }
.scene-23.active .product-capabilities span:nth-child(5) { animation-delay: 2.14s; }
.scene-23.active .tool-top { animation: product-content-cinema .46s 1.28s var(--ease) both; }
.scene-23.active .tool-file { animation: product-content-cinema .48s 1.42s var(--ease) both; }
.scene-23.active .tool-file i b { animation: metric-axis .78s 1.58s var(--ease) both; }
.scene-23.active .tool-verdict { animation: verdict-hit .48s 1.88s var(--ease) both; }
.scene-23.active .tool-behavior { animation: behavior-lock .48s 2.06s var(--ease) both; }
.scene-23.active .tool-score { animation: product-content-cinema .48s 2.22s var(--ease) both; }

/* 24 — delivery */
.delivery-scene { grid-template-rows: auto minmax(0, 1fr); }
.delivery-line {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 46px 1fr 46px 1fr 46px 1fr 46px 1fr;
  align-items: stretch;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.delivery-line div {
  display: grid;
  place-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.delivery-line div::before {
  content: "";
  width: 112px;
  height: 112px;
  margin: 0 auto 24px;
}
.delivery-line div:nth-of-type(1)::before {
  background:
    linear-gradient(135deg, transparent 41%, var(--blue) 42% 49%, transparent 50%) 0 0 / 34px 34px,
    linear-gradient(45deg, transparent 41%, var(--blue) 42% 49%, transparent 50%) 17px 17px / 34px 34px;
}
.delivery-line div:nth-of-type(2)::before {
  width: 82px;
  height: 64px;
  margin-bottom: 48px;
  border: 3px solid var(--blue);
  box-shadow: 18px 18px 0 -3px white, 18px 18px 0 0 var(--cyan), 36px 36px 0 -3px white, 36px 36px 0 0 var(--blue);
}
.delivery-line div:nth-of-type(3)::before {
  background: conic-gradient(var(--blue) 0 25%, transparent 0 50%, var(--cyan) 0 75%, transparent 0) 0 0 / 26px 26px;
}
.delivery-line div:nth-of-type(4)::before {
  background:
    linear-gradient(var(--blue) 0 0) 0 0 / 100% 4px,
    linear-gradient(var(--blue) 0 0) 0 54px / 100% 4px,
    linear-gradient(var(--blue) 0 0) 0 108px / 100% 4px,
    linear-gradient(90deg, var(--cyan) 0 0) 20px 0 / 4px 100%,
    linear-gradient(90deg, var(--red) 0 0) 84px 0 / 4px 100%;
  background-repeat: no-repeat;
}
.delivery-line div:nth-of-type(5)::before {
  background: conic-gradient(var(--cyan) 0 25%, transparent 0 50%, var(--cyan) 0 75%, transparent 0) 0 0 / 52px 52px;
}
.delivery-line div span { color: var(--muted); font: 21px/1 "Bahnschrift", sans-serif; }
.delivery-line div strong { font-size: 25px; }
.delivery-line > i {
  align-self: center;
  height: 4px;
  background: var(--cyan);
  transform-origin: left;
}
.delivery-line div:last-child { background: var(--blue-dark); color: white; }
.delivery-line div:last-child span { color: var(--cyan); }
.scene-24.active .delivery-line div { animation: delivery-part .52s var(--ease) both; }
.scene-24.active .delivery-line > i { animation: connector-grow .36s var(--ease) both; }
.scene-24.active .delivery-line div:nth-of-type(1) { animation-delay: .12s; }
.scene-24.active .delivery-line i:nth-of-type(1) { animation-delay: .25s; }
.scene-24.active .delivery-line div:nth-of-type(2) { animation-delay: .34s; }
.scene-24.active .delivery-line i:nth-of-type(2) { animation-delay: .47s; }
.scene-24.active .delivery-line div:nth-of-type(3) { animation-delay: .56s; }
.scene-24.active .delivery-line i:nth-of-type(3) { animation-delay: .69s; }
.scene-24.active .delivery-line div:nth-of-type(4) { animation-delay: .78s; }
.scene-24.active .delivery-line i:nth-of-type(4) { animation-delay: .91s; }
.scene-24.active .delivery-line div:nth-of-type(5) { animation-delay: 1s; }

/* 25 — closing */
.closing-scene {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 32px;
}
.closing-scene h2 { max-width: 1650px; }
.closing-line {
  position: relative;
  z-index: 3;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(5, auto 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 0 3%;
}
.closing-line span {
  display: grid;
  place-items: center;
  min-width: 136px;
  min-height: 88px;
  border: 1px solid oklch(1 0 0 / .26);
  font-size: 27px;
  font-weight: 760;
}
.closing-line i { height: 4px; background: var(--cyan); transform-origin: left; }
.closing-statement {
  position: relative;
  z-index: 3;
  min-height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  border-top: 1px solid oklch(1 0 0 / .18);
}
.closing-statement strong { color: var(--cyan); font: 64px/1 "Bahnschrift", sans-serif; }
.closing-signal {
  position: absolute;
  left: 24%;
  right: 24%;
  top: 29%;
  bottom: 18%;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 12px);
  justify-content: center;
  align-content: center;
  gap: 16px;
  opacity: .45;
}
.closing-signal i { width: 12px; height: 12px; background: var(--cyan); }
.closing-signal i:nth-child(11n) { background: var(--red); }
.scene-25.active .closing-line span,
.scene-25.active .closing-line i { animation: closing-word .48s var(--ease) both; }
.scene-25.active .closing-line span:nth-of-type(2),
.scene-25.active .closing-line i:nth-of-type(1) { animation-delay: .12s; }
.scene-25.active .closing-line span:nth-of-type(3),
.scene-25.active .closing-line i:nth-of-type(2) { animation-delay: .24s; }
.scene-25.active .closing-line span:nth-of-type(4),
.scene-25.active .closing-line i:nth-of-type(3) { animation-delay: .36s; }
.scene-25.active .closing-line span:nth-of-type(5),
.scene-25.active .closing-line i:nth-of-type(4) { animation-delay: .48s; }
.scene-25.active .closing-line span:nth-of-type(6),
.scene-25.active .closing-line i:nth-of-type(5) { animation-delay: .6s; }
.scene-25.active .closing-signal i { animation: closing-pulse 1.8s ease-in-out infinite; animation-delay: calc(.7s + var(--n) * 18ms); }

/* appendix */
.appendix-scene {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 38px;
}
.appendix-evidence-scene {
  grid-template-rows: auto auto 1fr auto;
  gap: 24px;
}
.evidence-metric-label {
  justify-self: end;
  color: var(--blue);
  font: 720 22px/1 "Bahnschrift", "Microsoft YaHei UI", sans-serif;
}
.appendix-band,
.config-line,
.confusion-placeholder,
.evidence-columns,
.audit-boundaries {
  align-self: center;
  display: grid;
  border-top: 2px solid currentColor;
  border-bottom: 1px solid var(--line);
}
.appendix-band { grid-template-columns: repeat(8, 1fr); }
.config-line { grid-template-columns: repeat(4, 1fr); }
.confusion-placeholder,
.evidence-columns { grid-template-columns: repeat(5, 1fr); }
.audit-boundaries { grid-template-columns: repeat(4, 1fr); }
.appendix-band span,
.config-line span,
.confusion-placeholder span,
.evidence-columns span,
.audit-boundaries span {
  min-height: 188px;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 22px;
  border-left: 1px solid var(--line);
  font: 23px/1.5 "Bahnschrift", "Microsoft YaHei UI", sans-serif;
  text-align: center;
}
.appendix-band span:first-child,
.config-line span:first-child,
.confusion-placeholder span:first-child,
.evidence-columns span:first-child,
.audit-boundaries span:first-child { border-left: 0; }
.appendix-band b,
.confusion-placeholder b,
.evidence-columns b { color: var(--blue); }
.config-line span { min-height: 142px; }
.confusion-placeholder .hard { color: var(--red); }
.confusion-placeholder > strong {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 92px;
  color: var(--red);
  font-size: 24px;
}
.appendix-proof,
.unverified {
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  background: var(--surface);
  color: var(--muted);
  font-size: 22px;
}
.dark-scene .config-line { border-color: oklch(1 0 0 / .55); }
.dark-scene .config-line span { border-color: oklch(1 0 0 / .18); }
.appendix.active .appendix-band span,
.appendix.active .config-line span,
.appendix.active .confusion-placeholder span,
.appendix.active .evidence-columns span,
.appendix.active .audit-boundaries span { animation: appendix-reveal .48s var(--ease) both; }

.appendix-metrics-scene,
.appendix-holdout-scene,
.appendix-audit-scene {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 30px;
}

.class-metrics,
.holdout-metrics {
  min-height: 0;
  align-self: stretch;
  display: grid;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.class-metrics { grid-template-rows: 66px repeat(5, 1fr); }
.metric-header,
.metric-row {
  display: grid;
  grid-template-columns: 470px repeat(3, 1fr) 190px;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  border-top: 1px solid var(--line);
}
.metric-header { border-top: 0; background: var(--surface); color: var(--muted); font: 700 20px/1 "Bahnschrift", sans-serif; }
.metric-header span:not(:first-child) { text-align: right; }
.metric-row strong { font: 700 22px/1 "Bahnschrift", sans-serif; white-space: nowrap; }
.metric-row span,
.metric-row b,
.metric-row i { text-align: right; font: 23px/1 "Bahnschrift", sans-serif; font-style: normal; }
.metric-row b { color: var(--blue); }
.metric-row i { color: var(--muted); }
.metric-row.hard { color: var(--red); }
.metric-row.hard b { color: var(--red); }

.holdout-metrics { grid-template-rows: 60px repeat(7, 1fr); }
.holdout-header,
.holdout-row {
  display: grid;
  grid-template-columns: 340px 410px 150px 150px 1fr;
  align-items: center;
  gap: 20px;
  padding: 0 22px;
  border-top: 1px solid var(--line);
}
.holdout-header { border-top: 0; background: var(--surface); color: var(--muted); font: 700 19px/1 "Bahnschrift", "Microsoft YaHei UI", sans-serif; }
.holdout-row strong { font: 700 21px/1 "Bahnschrift", sans-serif; }
.holdout-row span { color: var(--muted); font: 20px/1.15 "Bahnschrift", sans-serif; white-space: nowrap; }
.holdout-row b { color: var(--blue-dark); font: 23px/1 "Bahnschrift", sans-serif; }
.holdout-row i { font-size: 20px; font-style: normal; }
.holdout-row.warn i,
.holdout-row.warn b { color: var(--red); }
.holdout-row.recall-only { background: oklch(.965 .015 242); }
.holdout-row.recall-only i { color: var(--blue); font-weight: 760; }
.holdout-row.weak { color: var(--red); }
.holdout-row.weak span,
.holdout-row.weak b { color: var(--red); }

.audit-split {
  min-height: 0;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.audit-split section {
  min-width: 0;
  display: grid;
  grid-template-rows: 92px 1fr;
  padding: 0 42px 28px;
}
.audit-split section + section { border-left: 1px solid var(--line); }
.audit-split h3 {
  display: flex;
  align-items: center;
  margin: 0;
  border-bottom: 1px solid var(--line);
  color: var(--blue);
  font-size: 32px;
}
.audit-not-claimed h3 { color: var(--red); }
.audit-split section > div { display: grid; align-content: stretch; }
.audit-split section > div span {
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-top: 1px solid var(--line);
  font: 24px/1.25 "Bahnschrift", "Microsoft YaHei UI", sans-serif;
}
.audit-split section > div span:first-child { border-top: 0; }
.audit-verified span::before,
.audit-not-claimed span::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-right: 18px;
  background: var(--cyan);
}
.audit-not-claimed span::before { background: var(--red); }

.appendix.active .metric-row,
.appendix.active .holdout-row { animation: appendix-reveal .44s var(--ease) both; }
.appendix.active .metric-row:nth-child(2),
.appendix.active .holdout-row:nth-child(2) { animation-delay: .08s; }
.appendix.active .metric-row:nth-child(3),
.appendix.active .holdout-row:nth-child(3) { animation-delay: .16s; }
.appendix.active .metric-row:nth-child(4),
.appendix.active .holdout-row:nth-child(4) { animation-delay: .24s; }
.appendix.active .metric-row:nth-child(5),
.appendix.active .holdout-row:nth-child(5) { animation-delay: .32s; }
.appendix.active .metric-row:nth-child(6),
.appendix.active .holdout-row:nth-child(6) { animation-delay: .4s; }
.appendix.active .holdout-row:nth-child(7) { animation-delay: .48s; }
.appendix.active .holdout-row:nth-child(8) { animation-delay: .56s; }
.appendix.active .audit-verified { animation: gate-drop .62s .1s var(--ease) both; }
.appendix.active .audit-not-claimed { animation: gate-drop .62s .34s var(--ease) both; }

/* page index menu */
.page-menu {
  width: min(1680px, calc(100vw - 96px));
  max-width: none;
  height: min(880px, calc(100vh - 96px));
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}

.deck:focus { outline: none; }

.page-menu::backdrop {
  background: oklch(0.12 0.025 245 / .88);
  backdrop-filter: blur(7px) saturate(.72);
}

.page-menu-panel {
  height: 100%;
  display: grid;
  grid-template-rows: 118px 1fr;
  overflow: hidden;
  background: oklch(.985 .004 242);
  border-top: 8px solid var(--red);
  box-shadow: 0 8px 8px oklch(0.08 0.025 245 / .28);
}

.page-menu[open] .page-menu-panel { animation: page-menu-enter .42s var(--ease) both; }

.page-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  padding: 0 42px;
  border-bottom: 1px solid var(--line);
}

.page-menu-header > div {
  display: flex;
  align-items: baseline;
  gap: 28px;
}

.page-menu-header h2 {
  margin: 0;
  font-size: 48px;
  letter-spacing: -.025em;
}

.page-menu-header p {
  margin: 0;
  color: var(--muted);
  font-size: 22px;
}

.page-menu-close {
  min-width: 106px;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  background: var(--ink);
  color: white;
  font: 700 22px/1 "Microsoft YaHei UI", sans-serif;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.page-menu-close:hover { background: var(--red); }
.page-menu-close:active { transform: scale(.97); }

.page-menu-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(80px, 1fr);
  gap: 1px;
  padding: 1px;
  overflow: auto;
  background: var(--line);
}

.page-jump {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  border: 0;
  background: white;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.page-jump span {
  color: var(--blue);
  font: 720 22px/1 "Bahnschrift", sans-serif;
}

.page-jump b {
  min-width: 0;
  font-size: 21px;
  line-height: 1.28;
  text-wrap: balance;
}

.page-jump:hover,
.page-jump:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--cyan);
  outline-offset: -3px;
  background: oklch(.96 .025 226);
}

.page-jump:active { transform: scale(.985); }
.page-jump.current { background: var(--blue-dark); color: white; }
.page-jump.current span { color: var(--cyan); }

@media (pointer: coarse) {
  body.touch-layout:not(.portrait-mobile) .deck {
    touch-action: pan-y;
  }

  .mobile-controls {
    position: fixed;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 180;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: oklch(.14 .018 242 / .92);
    border: 1px solid oklch(.96 .01 242 / .16);
    box-shadow: 0 10px 32px oklch(.06 .02 242 / .34);
    backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 14px);
    transition: opacity .22s ease, transform .22s var(--ease);
  }

  body.touch-layout:not(.portrait-mobile) .mobile-controls.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  .mobile-controls button {
    min-width: 76px;
    min-height: 46px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: white;
    font: 700 17px/1 "Microsoft YaHei UI", sans-serif;
    white-space: nowrap;
  }

  .mobile-controls button:active { background: oklch(.66 .15 239 / .42); }
  .mobile-controls button:disabled { opacity: .34; }

  .mobile-controls .mobile-page-button {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 7px;
    min-width: 102px;
    background: var(--blue);
    font-family: "Bahnschrift", "Microsoft YaHei UI", sans-serif;
  }

  .mobile-page-button b { opacity: .5; }

  .page-menu {
    width: calc(100vw - max(28px, env(safe-area-inset-left) + env(safe-area-inset-right)));
    height: calc(100dvh - 28px);
  }

  .page-menu-panel { grid-template-rows: 76px 1fr; border-top-width: 5px; }
  .page-menu-header { gap: 16px; padding: 0 18px; }
  .page-menu-header > div { gap: 16px; }
  .page-menu-header h2 { font-size: 30px; }
  .page-menu-header p { font-size: 16px; }
  .page-menu-close { min-width: 82px; min-height: 44px; font-size: 17px; }
  .page-menu-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(72px, auto); }
  .page-jump { grid-template-columns: 42px 1fr; gap: 10px; padding: 8px 12px; }
  .page-jump span { font-size: 17px; }
  .page-jump b { font-size: 16px; line-height: 1.22; }
}

@media (pointer: coarse) and (orientation: portrait) {
  body.touch-layout .deck { visibility: hidden; }
  body.touch-layout .deck *,
  body.touch-layout .deck *::before,
  body.touch-layout .deck *::after { animation-play-state: paused !important; }
  body.touch-layout .mobile-controls { display: none; }

  body.touch-layout .orientation-gate {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
    padding:
      max(36px, env(safe-area-inset-top))
      max(28px, env(safe-area-inset-right))
      max(36px, env(safe-area-inset-bottom))
      max(28px, env(safe-area-inset-left));
    background:
      linear-gradient(135deg, oklch(.19 .075 242), oklch(.105 .02 242) 64%),
      oklch(.11 .02 242);
    color: white;
    text-align: center;
  }

  .orientation-gate::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .12;
    background:
      linear-gradient(90deg, transparent calc(100% - 1px), white calc(100% - 1px)) 0 0 / 34px 34px,
      linear-gradient(transparent calc(100% - 1px), white calc(100% - 1px)) 0 0 / 34px 34px;
    mask-image: radial-gradient(circle at center, #000, transparent 74%);
  }

  .orientation-gate strong {
    position: relative;
    font-size: clamp(34px, 10vw, 54px);
    line-height: 1.08;
    letter-spacing: -.035em;
  }

  .orientation-gate span {
    position: relative;
    max-width: 19em;
    color: oklch(.9 .02 242);
    font-size: clamp(17px, 4.7vw, 22px);
    line-height: 1.55;
  }

  .orientation-symbol {
    position: relative;
    width: 92px;
    height: 68px;
    border: 4px solid var(--cyan);
    transform: rotate(-90deg);
    animation: phone-rotate 1.8s var(--ease) infinite;
  }

  .orientation-symbol::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 20px;
    height: 3px;
    background: var(--red);
    transform: translateX(-50%);
  }
}

@keyframes phone-rotate {
  0%, 22% { transform: rotate(0); }
  68%, 100% { transform: rotate(-90deg); }
}

@keyframes page-menu-enter {
  from { opacity: .25; transform: translateY(26px) scale(.985); clip-path: inset(0 0 14%); }
  to { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0); }
}

@keyframes plain-value-hide {
  from { clip-path: inset(0); }
  to { clip-path: inset(0 0 0 100%); }
}

@keyframes cipher-value-show {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

@keyframes gate-drop { from { opacity: .15; clip-path: inset(100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes pass-stamp { from { opacity: .1; transform: scale(1.45); } to { opacity: 1; transform: scale(1); } }
@keyframes workpoint-in { from { opacity: .2; transform: translate(-50%, -24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes threshold-return { 0% { opacity: .2; left: 72.5%; transform: translateX(-50%) scale(1.2); } 100% { opacity: 1; left: 31.5%; transform: translateX(-50%) scale(1); } }
@keyframes false-positive-grow { from { opacity: .2; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes fp-pile { from { opacity: .08; transform: scaleX(.04); } to { opacity: .45; transform: scaleX(1); } }
@keyframes pixel-in { from { transform: scale(.1); opacity: .05; } to { transform: scale(1); opacity: .78; } }
@keyframes pixel-scan { from { left: 0; opacity: 0; } 14% { opacity: 1; } to { left: 100%; opacity: 0; } }
@keyframes result-lock { from { opacity: .2; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes result-row { from { opacity: .2; transform: translateX(-34px); } to { opacity: 1; transform: translateX(0); } }
@keyframes result-fill { from { transform: scaleX(.04); } to { transform: scaleX(1); } }
@keyframes ablation-state { from { opacity: .18; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes boundary-pass { from { opacity: .18; transform: translateX(-56px); } to { opacity: 1; transform: translateX(0); } }
@keyframes boundary-break { 0% { opacity: .18; transform: translateX(-56px); } 58% { opacity: 1; transform: translateX(0); } 70% { transform: translateX(-9px); filter: saturate(1.7); } 82% { transform: translateX(7px); } 100% { opacity: 1; transform: translateX(0); filter: saturate(1); } }
@keyframes packet-collapse { from { opacity: .12; transform: translate(-44px, var(--drift, 0)) scale(.3); } to { opacity: .55; transform: translate(0) scale(1); } }
@keyframes runtime-stage { from { opacity: .2; transform: scaleX(.3); } to { opacity: 1; transform: scaleX(1); } }
@keyframes window-grow { from { opacity: .15; transform: scaleY(.05); transform-origin: bottom; } to { opacity: 1; transform: scaleY(1); } }
@keyframes count-lock { from { opacity: .2; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes product-window { from { opacity: .16; transform: translateX(70px); clip-path: inset(0 0 0 100%); } to { opacity: 1; transform: translateX(0); clip-path: inset(0); } }
@keyframes verdict-hit { from { opacity: .2; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes behavior-lock { from { opacity: .2; transform: translateX(-22px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: translateX(0); clip-path: inset(0); } }
@keyframes delivery-part { from { opacity: .18; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes connector-grow { from { opacity: .15; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes closing-word { from { opacity: .18; transform: scaleX(.15); } to { opacity: 1; transform: scaleX(1); } }
@keyframes closing-pulse { 0%,100% { opacity: .2; transform: scale(.72); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes appendix-reveal { from { opacity: .2; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* motion enhancement — strong scenes 06 / 10 / 14 / 21 / 25 */
.p6-stage-beam {
  position: absolute;
  inset: 0 auto 104px -120px;
  z-index: 4;
  width: 96px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, oklch(.72 .12 195 / .16), transparent);
  border-right: 3px solid var(--cyan);
  box-shadow: 22px 0 42px oklch(.72 .12 195 / .16);
}

.p6-station::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 196px;
  width: 20px;
  height: 20px;
  border: 3px solid var(--cyan);
  opacity: 0;
  transform: scale(.25);
}

.scene-06.active .p6-story { animation: p6-stage-focus 1.05s .08s var(--ease) both; }
.scene-06.active .p6-stage-beam { animation: p6-stage-sweep 2.72s .26s var(--ease) both; }
.scene-06.active .p6-station::after { animation: p6-station-lock .44s var(--ease) both; }
.scene-06.active .p6-s1::after { animation-delay: .66s; }
.scene-06.active .p6-s2::after { animation-delay: .9s; }
.scene-06.active .p6-s3::after { animation-delay: 1.14s; }
.scene-06.active .p6-s4::after { animation-delay: 1.38s; }
.scene-06.active .p6-s5::after { animation-delay: 1.62s; }
.scene-06.active .p6-product { animation: p6-product-cinematic .94s 2.82s var(--ease) both; }
.scene-06.active .p6-product-top i { animation: p6-product-ready .54s 3.42s var(--ease) both; }

.feature-band { position: relative; overflow: hidden; isolation: isolate; }
.feature-band i { position: relative; z-index: 1; }
.feature-scan {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  opacity: 0;
  background: white;
  box-shadow: 0 0 0 24px oklch(.72 .12 195 / .06), 0 0 38px oklch(.72 .12 195 / .58);
}
.feature-lock {
  position: absolute;
  z-index: 5;
  right: 18px;
  bottom: 16px;
  min-width: 226px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px 16px;
  padding: 14px 18px;
  background: var(--ink);
  color: white;
  opacity: 0;
}
.feature-lock span { grid-column: 1 / -1; color: oklch(.8 .01 242); font: 18px/1 "Bahnschrift", sans-serif; }
.feature-lock strong { color: var(--cyan); font: 24px/1 "Bahnschrift", sans-serif; }
.feature-lock b { color: white; font-size: 18px; }
.scene-10.active .feature-band i {
  animation: feature-converge .86s var(--ease) both;
  animation-delay: calc(var(--n) * 4ms + .12s);
}
.scene-10.active .feature-scan { animation: feature-contract-scan 1.08s .78s var(--ease) both; }
.scene-10.active .feature-lock { animation: feature-contract-lock .58s 1.48s var(--ease) both; }
.scene-10.active .feature-groups span { animation: feature-group-reveal .44s var(--ease) both; }
.scene-10.active .feature-groups span:nth-child(1) { animation-delay: 1.12s; }
.scene-10.active .feature-groups span:nth-child(2) { animation-delay: 1.18s; }
.scene-10.active .feature-groups span:nth-child(3) { animation-delay: 1.24s; }
.scene-10.active .feature-groups span:nth-child(4) { animation-delay: 1.3s; }
.scene-10.active .feature-groups span:nth-child(5) { animation-delay: 1.36s; }
.scene-10.active .feature-groups span:nth-child(6) { animation-delay: 1.42s; }
.scene-10.active .feature-groups span:nth-child(7) { animation-delay: 1.48s; }
.scene-10.active .feature-groups span:nth-child(8) { animation-delay: 1.54s; }

.model-energy { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.model-energy i {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  opacity: 0;
  background: var(--cyan);
  box-shadow: 0 0 24px oklch(.72 .12 195 / .72);
  offset-rotate: 0deg;
}
.model-energy .energy-main { offset-path: path("M 300 330 L 1050 330"); }
.model-energy .energy-risk { background: var(--red); box-shadow: 0 0 26px oklch(.64 .19 31 / .68); offset-path: path("M 1050 330 L 1385 330 L 1580 150"); }
.model-energy .energy-behavior { offset-path: path("M 1050 330 L 1385 330 L 1580 510"); }
.shared-core { overflow: hidden; }
.shared-core::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -3px;
  width: 3px;
  opacity: 0;
  background: white;
  box-shadow: 0 0 0 26px oklch(.72 .12 195 / .06), 0 0 32px oklch(.72 .12 195 / .5);
}
.scene-14.active .head-model { animation: model-focus-in .72s .08s var(--ease) both; }
.scene-14.active .energy-main { animation: model-energy-run 1.05s .6s var(--ease) both; }
.scene-14.active .energy-risk { animation: model-energy-run .9s 1.36s var(--ease) both; }
.scene-14.active .energy-behavior { animation: model-energy-run .9s 1.5s var(--ease) both; }
.scene-14.active .shared-core::after { animation: model-core-scan .82s .82s var(--ease) both; }
.scene-14.active .model-head.binary { animation: model-head-lock .58s 1.86s var(--ease) both; }
.scene-14.active .model-head.behavior { animation: model-head-lock .58s 2s var(--ease) both; }

.boundary-stage { overflow: hidden; isolation: isolate; }
.boundary-stage::before {
  content: "";
  position: absolute;
  inset: 0 0 0 49%;
  z-index: 0;
  opacity: .46;
  background: linear-gradient(90deg, oklch(.96 .015 242), transparent 62%);
  transform-origin: left;
}
.boundary-sweep {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 2%;
  width: 3px;
  opacity: 0;
  background: var(--cyan);
  box-shadow: 0 0 0 24px oklch(.72 .12 195 / .045), 0 0 34px oklch(.72 .12 195 / .42);
}
.boundary-axis,
.boundary-row { z-index: 2; }
.boundary-row i { position: relative; transform-origin: left; }
.boundary-row i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--cyan);
  opacity: 0;
  transform: translateY(-50%);
}
.boundary-row.weak i::after { background: var(--red); box-shadow: 0 0 18px oklch(.64 .19 31 / .7); }
.scene-21.active .boundary-stage::before { animation: boundary-field-open .84s .24s var(--ease) both; }
.scene-21.active .boundary-sweep { animation: boundary-stage-scan 1.84s .2s var(--ease) both; }
.scene-21.active .boundary-row i { animation: boundary-line-build .72s var(--ease) both; }
.scene-21.active .boundary-row:nth-child(3) i { animation-delay: .42s; }
.scene-21.active .boundary-row:nth-child(4) i { animation-delay: .56s; }
.scene-21.active .boundary-row:nth-child(5) i { animation-delay: .7s; }
.scene-21.active .boundary-row:nth-child(6) i { animation-delay: .84s; }
.scene-21.active .boundary-row:nth-child(7) i { animation-delay: .98s; }
.scene-21.active .boundary-row:not(.weak) i::after { animation: boundary-packet-pass .9s var(--ease) both; }
.scene-21.active .boundary-row:nth-child(3) i::after { animation-delay: .74s; }
.scene-21.active .boundary-row:nth-child(4) i::after { animation-delay: .88s; }
.scene-21.active .boundary-row:nth-child(5) i::after { animation-delay: 1.02s; }
.scene-21.active .boundary-row:nth-child(7) i::after { animation-delay: 1.3s; }
.scene-21.active .boundary-row.weak i::after { animation: boundary-packet-stop .82s 1.16s var(--ease) both; }

/* motion enhancement — supporting scenes 02 / 12 / 15 / 17 / 22 / 24 */
.visible-behavior { position: relative; overflow: hidden; }
.visible-behavior::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  opacity: 0;
  background: var(--cyan);
  box-shadow: 0 0 26px oklch(.72 .12 195 / .42);
}
.scene-02.active .visible-behavior::after { animation: behavior-scan 1.32s .94s var(--ease) both; }
.scene-02.active .behavior-axis i { animation: behavior-token-live 3.2s ease-in-out infinite; animation-delay: calc(2.1s + var(--n, 0) * 90ms); }
.scene-02.active .direction-axis b { animation: direction-live 3.6s ease-in-out infinite; }
.scene-02.active .direction-axis b:nth-child(2n) { animation-delay: .34s; }
.scene-02.active .length-axis i { animation: bar-rise .72s var(--ease) both, length-live 3.8s 2s ease-in-out infinite; }

.window-stage::after {
  content: "";
  position: absolute;
  z-index: 6;
  top: 12%;
  bottom: 12%;
  left: 4%;
  width: 3px;
  opacity: 0;
  background: white;
  box-shadow: 0 0 0 22px oklch(.72 .12 195 / .05), 0 0 30px oklch(.72 .12 195 / .48);
}
.scene-12.active .window-stage::after { animation: window-measure-scan 1.55s .64s var(--ease) both; }
.scene-12.active .sample-output::after { animation: sample-output-lock .5s 2.02s var(--ease) both; }
.sample-output::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--cyan); opacity: 0; }

.epoch-track::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 4.5%;
  bottom: 22px;
  width: 10.5%;
  height: 5px;
  opacity: 0;
  background: var(--red);
  box-shadow: 0 0 18px oklch(.64 .19 31 / .34);
}
.scene-15.active .epoch-track::after { animation: epoch-focus-travel 1.12s .3s var(--ease) both; }
.scene-15.active .epoch-track span:not(.best) { animation: epoch-pop .42s var(--ease) both, epoch-deemphasize .5s 1.5s var(--ease) both; }
.scene-15.active .epoch-track .best { animation: best-lock-strong .72s .72s var(--ease) both; }

.threshold-track::after {
  content: "";
  position: absolute;
  left: 72.5%;
  top: 10%;
  bottom: 10%;
  width: 4px;
  opacity: 0;
  background: var(--red);
  box-shadow: 0 0 0 22px oklch(.64 .19 31 / .045);
  transform: translateX(-50%);
}
.scene-17.active .threshold-track::after { animation: threshold-focus-return 1.18s .44s var(--ease) both; }
.scene-17.active .threshold-conclusion { animation: threshold-conclusion-lock .5s 1.38s var(--ease) both; }

.runtime-pipeline { position: relative; overflow: hidden; isolation: isolate; }
.runtime-beam {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  opacity: 0;
  background: var(--cyan);
  box-shadow: 0 0 0 26px oklch(.72 .12 195 / .05), 0 0 38px oklch(.72 .12 195 / .5);
}
.runtime-node,
.runtime-pipeline > b { position: relative; z-index: 2; }
.scene-22.active .runtime-beam { animation: runtime-beam-pass 1.74s .3s var(--ease) both; }
.scene-22.active .runtime-pipeline > b { animation: runtime-arrow-hit .4s var(--ease) both; }
.scene-22.active .runtime-pipeline > b:nth-of-type(1) { animation-delay: .78s; }
.scene-22.active .runtime-pipeline > b:nth-of-type(2) { animation-delay: 1.28s; }
.scene-22.active .runtime-audit { animation: runtime-audit-lock .5s 1.74s var(--ease) both; }

.delivery-line { position: relative; overflow: hidden; isolation: isolate; }
.delivery-sweep {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  opacity: 0;
  background: var(--cyan);
  box-shadow: 0 0 0 22px oklch(.72 .12 195 / .04), 0 0 28px oklch(.72 .12 195 / .42);
}
.delivery-line > div,
.delivery-line > i { position: relative; z-index: 2; }
.scene-24.active .delivery-sweep { animation: delivery-stage-scan 1.64s .2s var(--ease) both; }
.scene-24.active .delivery-line div:last-child { animation: delivery-final-lock .7s 1.16s var(--ease) both; }

.closing-focus-line {
  position: absolute;
  z-index: 2;
  left: 12%;
  right: 12%;
  top: 51%;
  height: 3px;
  opacity: 0;
  background: var(--cyan);
  transform-origin: center;
  box-shadow: 0 0 32px oklch(.72 .12 195 / .46);
}
.closing-statement { justify-content: space-between; padding: 0 7%; }
.closing-statement span { color: oklch(.74 .01 242); font: 21px/1 "Bahnschrift", "Microsoft YaHei UI", sans-serif; }
.closing-statement b { color: white; font-size: 23px; }
.scene-25.active h2 { animation: closing-title-cinema .82s .52s var(--ease) both; }
.scene-25.active .closing-focus-line { animation: closing-focus-sweep 1.28s .36s var(--ease) both; }
.scene-25.active .closing-line span,
.scene-25.active .closing-line i { animation: closing-stage-lock .5s var(--ease) both; }
.scene-25.active .closing-line span:nth-of-type(1) { animation-delay: 1.1s; }
.scene-25.active .closing-line i:nth-of-type(1),
.scene-25.active .closing-line span:nth-of-type(2) { animation-delay: 1.2s; }
.scene-25.active .closing-line i:nth-of-type(2),
.scene-25.active .closing-line span:nth-of-type(3) { animation-delay: 1.3s; }
.scene-25.active .closing-line i:nth-of-type(3),
.scene-25.active .closing-line span:nth-of-type(4) { animation-delay: 1.4s; }
.scene-25.active .closing-line i:nth-of-type(4),
.scene-25.active .closing-line span:nth-of-type(5) { animation-delay: 1.5s; }
.scene-25.active .closing-line i:nth-of-type(5),
.scene-25.active .closing-line span:nth-of-type(6) { animation-delay: 1.6s; }
.scene-25.active .closing-signal i { animation: closing-converge 2.15s var(--ease) both; animation-delay: calc(.2s + var(--n) * 6ms); }
.scene-25.active .closing-statement { animation: closing-result-lock .74s 1.88s var(--ease) both; }

body[data-index="24"] .deck-header { animation: cinema-chrome-return 2.55s var(--ease) both; }
body[data-index="24"] .progress { animation: cinema-progress-return 2.65s var(--ease) both; }

@keyframes p6-stage-focus {
  from { opacity: .22; transform: scale(.985); filter: blur(4px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes p6-stage-sweep {
  0% { opacity: 0; transform: translateX(0) scaleY(.16); }
  10% { opacity: 1; transform: translateX(180px) scaleY(1); }
  86% { opacity: 1; transform: translateX(1600px) scaleY(1); }
  100% { opacity: 0; transform: translateX(1850px) scaleY(.3); }
}
@keyframes p6-station-lock {
  from { opacity: 0; transform: scale(.25); }
  55% { opacity: 1; transform: scale(1.35); }
  to { opacity: .34; transform: scale(1); }
}
@keyframes p6-product-cinematic {
  0% { opacity: .18; transform: scaleX(.16) scaleY(.012); filter: brightness(1.5); }
  42% { opacity: 1; transform: scaleX(1) scaleY(.012); filter: brightness(1.25); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes p6-product-ready { from { opacity: .2; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }

@keyframes feature-converge {
  from { opacity: 0; transform: translate(var(--feature-x), var(--feature-y)) scale(.22); filter: blur(5px); }
  to { opacity: .57; transform: translate(0) scale(1); filter: blur(0); }
}
@keyframes feature-contract-scan {
  0% { opacity: 0; transform: translateX(0) scaleY(.1); }
  12%, 86% { opacity: 1; transform: translateX(0) scaleY(1); }
  100% { left: calc(100% - 4px); opacity: 0; transform: scaleY(.35); }
}
@keyframes feature-contract-lock {
  from { opacity: 0; transform: translateX(28px); clip-path: inset(0 0 0 100%); }
  to { opacity: 1; transform: translateX(0); clip-path: inset(0); }
}
@keyframes feature-group-reveal { from { opacity: .16; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }

@keyframes model-focus-in { from { opacity: .24; transform: scale(.985); filter: blur(4px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes model-energy-run {
  0% { opacity: 0; offset-distance: 0%; transform: scale(.35); }
  14%, 82% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; offset-distance: 100%; transform: scale(.45); }
}
@keyframes model-core-scan {
  0% { opacity: 0; transform: translateX(0) scaleY(.18); }
  16%, 82% { opacity: 1; transform: translateX(0) scaleY(1); }
  100% { opacity: 0; transform: translateX(520px) scaleY(.35); }
}
@keyframes model-head-lock {
  from { opacity: .2; transform: translateX(-36px); clip-path: inset(0 100% 0 0); background: oklch(.4 .12 242); }
  to { opacity: 1; transform: translateX(0); clip-path: inset(0); background: transparent; }
}

@keyframes boundary-field-open { from { opacity: 0; transform: scaleX(.05); } to { opacity: .46; transform: scaleX(1); } }
@keyframes boundary-stage-scan {
  0% { opacity: 0; transform: translateX(0) scaleY(.18); }
  12%, 84% { opacity: 1; transform: translateX(820px) scaleY(1); }
  100% { opacity: 0; transform: translateX(1640px) scaleY(.3); }
}
@keyframes boundary-line-build { from { opacity: .12; transform: scaleX(.04); } to { opacity: 1; transform: scaleX(1); } }
@keyframes boundary-packet-pass {
  0% { left: 0; opacity: 0; transform: translateY(-50%) scale(.35); }
  14%, 82% { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { left: calc(100% - 14px); opacity: 0; transform: translateY(-50%) scale(.45); }
}
@keyframes boundary-packet-stop {
  0% { left: 0; opacity: 0; transform: translateY(-50%) scale(.35); }
  18% { opacity: 1; }
  70% { left: 54%; opacity: 1; transform: translateY(-50%) scale(1); }
  82% { left: 54%; opacity: 1; transform: translateY(-50%) scale(1.8, .45); }
  100% { left: 54%; opacity: 0; transform: translateY(-50%) scale(2.4, .2); }
}

@keyframes behavior-scan {
  0% { opacity: 0; transform: translateX(0) scaleY(.15); }
  14%, 84% { opacity: 1; transform: translateX(550px) scaleY(1); }
  100% { opacity: 0; transform: translateX(1040px) scaleY(.32); }
}
@keyframes behavior-token-live { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-7px); opacity: .58; } }
@keyframes direction-live { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(9px); } }
@keyframes length-live { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.34); } }
@keyframes window-measure-scan {
  0% { opacity: 0; transform: translateX(0) scaleY(.2); }
  14%, 82% { opacity: 1; transform: translateX(500px) scaleY(1); }
  100% { opacity: 0; transform: translateX(1120px) scaleY(.35); }
}
@keyframes sample-output-lock { from { opacity: 0; transform: scale(1.16); } to { opacity: .72; transform: scale(1); } }
@keyframes epoch-focus-travel {
  0% { opacity: 0; transform: translateX(0) scaleX(.12); }
  16% { opacity: 1; }
  72%, 100% { opacity: 1; transform: translateX(300%) scaleX(1); }
}
@keyframes epoch-deemphasize { to { opacity: .62; filter: saturate(.62); } }
@keyframes best-lock-strong {
  from { opacity: .18; transform: scale(.74); clip-path: inset(46% 0); filter: brightness(1.5); }
  to { opacity: 1; transform: scale(1); clip-path: inset(0); filter: brightness(1); }
}
@keyframes threshold-focus-return {
  0% { left: 72.5%; opacity: 0; background: var(--red); }
  14%, 46% { left: 72.5%; opacity: 1; background: var(--red); }
  100% { left: 31.5%; opacity: .86; background: var(--blue); }
}
@keyframes threshold-conclusion-lock { from { opacity: .18; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes runtime-beam-pass {
  0% { opacity: 0; transform: translateX(0) scaleY(.18); }
  12%, 86% { opacity: 1; transform: translateX(950px) scaleY(1); }
  100% { opacity: 0; transform: translateX(1760px) scaleY(.3); }
}
@keyframes runtime-arrow-hit { from { opacity: .2; transform: scaleX(.18); } to { opacity: 1; transform: scaleX(1); color: var(--blue); } }
@keyframes runtime-audit-lock { from { opacity: .2; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes delivery-stage-scan {
  0% { opacity: 0; transform: translateX(0) scaleY(.18); }
  12%, 86% { opacity: 1; transform: translateX(900px) scaleY(1); }
  100% { opacity: 0; transform: translateX(1760px) scaleY(.3); }
}
@keyframes delivery-final-lock {
  from { opacity: .22; transform: translateX(-28px); clip-path: inset(0 100% 0 0); }
  to { opacity: 1; transform: translateX(0); clip-path: inset(0); }
}

@keyframes closing-title-cinema {
  from { opacity: 0; transform: translateY(28px); clip-path: inset(0 0 100%); filter: blur(7px); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0); filter: blur(0); }
}
@keyframes closing-focus-sweep {
  0% { opacity: 0; transform: scaleX(.04); }
  54% { opacity: 1; transform: scaleX(1); }
  100% { opacity: .24; transform: scaleX(.76); }
}
@keyframes closing-stage-lock { from { opacity: 0; transform: scaleX(.12); } to { opacity: 1; transform: scaleX(1); } }
@keyframes closing-converge {
  0% { opacity: 0; transform: translate(var(--closing-x), var(--closing-y)) scale(.18); filter: blur(6px); }
  62% { opacity: .9; transform: translate(0) scale(1); filter: blur(0); }
  100% { opacity: .14; transform: translate(0) scaleY(.34); filter: blur(0); }
}
@keyframes closing-result-lock {
  from { opacity: 0; transform: translateY(24px); clip-path: inset(100% 0 0); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0); }
}

/* cinematic samples — 01 / 18 / 23 */
body[data-index="0"] .deck-header,
body[data-index="17"] .deck-header,
body[data-index="22"] .deck-header { animation: cinema-chrome-return 2.35s var(--ease) both; }

body[data-index="0"] .progress,
body[data-index="17"] .progress,
body[data-index="22"] .progress { animation: cinema-progress-return 2.5s var(--ease) both; }

@keyframes cinema-chrome-return {
  0%, 48% { opacity: 0; transform: translateY(-22px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes cinema-progress-return {
  0%, 58% { opacity: 0; transform: scaleX(.18); }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes hero-curtain-release {
  0% { opacity: 1; transform: scaleX(1); }
  82% { opacity: 1; transform: scaleX(.015); }
  100% { opacity: 0; transform: scaleX(0); }
}

@keyframes hero-title-cinema {
  from { opacity: 0; transform: translateY(38px) scale(.965); clip-path: inset(0 0 100%); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0); filter: blur(0); }
}

@keyframes hero-copy-cinema {
  from { opacity: 0; transform: translateY(22px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes hero-protocol-cinema {
  from { opacity: 0; transform: translateX(-28px); clip-path: inset(0 100% 0 0); }
  to { opacity: 1; transform: translateX(0); clip-path: inset(0); }
}

@keyframes hero-signal-cinema {
  from { opacity: .08; transform: translateX(92px) scale(1.14); filter: blur(10px); }
  to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

@keyframes hero-focus-sweep {
  0% { opacity: 0; transform: translateX(0) scaleY(.2); }
  16%, 72% { opacity: 1; transform: translateX(0) scaleY(1); }
  100% { opacity: 0; transform: translateX(610px) scaleY(.5); }
}

@keyframes pixel-stage-cinema {
  0% { opacity: .08; transform: scale(1.12); filter: brightness(1.6) saturate(1.35); }
  58% { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1); }
  78% { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1); }
  100% { opacity: 1; transform: scale(.99); filter: brightness(1) saturate(1); }
}

@keyframes pixel-field-dim {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pixel-scan-cinema {
  0% { left: 0; opacity: 0; transform: scaleY(.12); }
  12%, 82% { opacity: 1; transform: scaleY(1); }
  100% { left: calc(100% - 4px); opacity: 0; transform: scaleY(.35); }
}

@keyframes pixel-result-cinema {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.1); clip-path: inset(48% 0); filter: blur(8px); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); clip-path: inset(0); filter: blur(0); }
}

@keyframes pixel-focus-cinema {
  0% { opacity: 0; transform: scaleX(.08); }
  52% { opacity: 1; transform: scaleX(1); }
  100% { opacity: .35; transform: scaleX(1.08); }
}

@keyframes product-seed-line {
  0% { opacity: 0; transform: scaleX(.04); }
  24%, 68% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes product-window-cinema {
  0% { opacity: .25; transform: scaleX(.26) scaleY(.006); filter: brightness(1.6); }
  38% { opacity: 1; transform: scaleX(1) scaleY(.006); filter: brightness(1.35); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes product-window-scan {
  0% { opacity: 0; transform: translateX(0) scaleY(.15); }
  16%, 82% { opacity: 1; transform: translateX(0) scaleY(1); }
  100% { opacity: 0; transform: translateX(850px) scaleY(.3); }
}

@keyframes product-title-cinema {
  from { opacity: 0; transform: translateX(-46px); clip-path: inset(0 100% 0 0); filter: blur(7px); }
  to { opacity: 1; transform: translateX(0); clip-path: inset(0); filter: blur(0); }
}

@keyframes product-rail-cinema {
  from { opacity: 0; transform: scaleX(.22); transform-origin: left; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; transform: scaleX(1); clip-path: inset(0); }
}

@keyframes product-content-cinema {
  from { opacity: 0; transform: translateY(18px); clip-path: inset(100% 0 0); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .particle-field { opacity: .08; }
  .moving-packet { display: none; }
}