/* History page (/history). Layered on base.css + zd.css; port alongside
   them when the page goes to site/. Prefix zh- = zenosdata history. */

/* ---------- placeholder: a fact Tim must confirm before porting ---------- */
.zh-ph {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85em;
  color: #6b5400;
  background: rgba(255, 222, 81, 0.35);
  padding: 0 0.3em;
}
.zd-section--dark .zh-ph { color: var(--yellow); background: rgba(255, 222, 81, 0.12); }

/* ---------- hero record panel ---------- */
.zh-record { align-self: center; }
.zh-record .zd-statepanel__r span:last-child { max-width: 60%; }

/* ---------- timeline: one rail, six stops ---------- */
.zh-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 var(--space-md);
  position: relative;
}
.zh-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 3.25rem;
  height: 1px;
  background: rgba(14, 11, 22, 0.16);
}
.zh-tl { position: relative; padding-top: 4.5rem; }
.zh-tl::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(3.25rem - 5px);
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  background: var(--white-pure);
  border: 2px solid var(--purple);
}
.zh-tl__y {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-heading);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 1.625rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--black);
}
.zh-tl h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0 0 0.4rem;
}
.zh-tl p { font-size: 0.875rem; line-height: 1.6; color: var(--grey-dark); margin: 0; }
.zh-tl--now::before { background: var(--purple); }
.zh-tl--now .zh-tl__y { color: #5a4ee0; }

@media (max-width: 991px) {
  .zh-timeline { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .zh-timeline::before { left: 5px; right: auto; top: 0.5rem; bottom: 0.5rem; width: 1px; height: auto; }
  .zh-tl { padding: 0 0 0 2rem; }
  .zh-tl::before { top: 0.45rem; }
  .zh-tl__y { position: static; display: block; font-size: 1.25rem; margin-bottom: 0.35rem; }
}

/* ---------- text beside proof, two columns ---------- */
.zh-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-xl);
  align-items: start;
}
.zh-split .section-header { margin-bottom: 0; }
.zh-split .zd-layers { margin-top: 0; max-width: none; }
.zh-split--center { align-items: center; }
@media (max-width: 991px) {
  .zh-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}

/* ---------- where it ran: production stills on the dark stage ---------- */
.zh-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-md);
}
@media (max-width: 991px) { .zh-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zh-shot { margin: 0; }
.zh-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border: 1px solid rgba(123, 112, 251, 0.25);
}
.zh-shot figcaption { margin-top: 0.85rem; }
.zh-shot__meta {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.35rem;
}
.zh-shot__d { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: rgba(245, 244, 244, 0.78); max-width: 52ch; }
@media (max-width: 600px) { .zh-shots { grid-template-columns: minmax(0, 1fr); } }

/* dated events list under the stills */
.zh-events { margin-top: var(--space-xl); }
.zh-events__h {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-tint);
  margin: 0 0 0.5rem;
}
.zh-events__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(123, 112, 251, 0.3); }
.zh-events__list li {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) auto;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(245, 244, 244, 0.08);
}
.zh-events__d { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.8125rem; color: var(--cyan); }
.zh-events__e { color: var(--white); font-size: 1rem; }
.zh-events__p {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 244, 244, 0.65);
  text-align: right;
}
@media (max-width: 767px) {
  .zh-events__list li { grid-template-columns: minmax(0, 1fr); }
  .zh-events__p { text-align: left; }
}

/* ---------- engines: five engines wired into one format ---------- */
.zh-conv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px minmax(0, 0.85fr);
  align-items: stretch;
}
.zh-conv__engines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--white-pure);
  border: 1px solid rgba(14, 11, 22, 0.12);
}
.zh-eng {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid rgba(14, 11, 22, 0.08);
}
.zh-eng:last-child { border-bottom: 0; }
.zh-eng b { font-weight: 700; font-size: 1rem; color: var(--black); }
.zh-eng span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  text-align: right;
}
.zh-conv__wire { display: block; width: 100%; height: 100%; }
.zh-conv__wire path {
  fill: none;
  stroke: var(--purple);
  stroke-opacity: 0.5;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.zh-fmt {
  align-self: center;
  background: var(--white-pure);
  border: 2px solid var(--purple);
  padding: 1.5rem 1.5rem 1.25rem;
}
.zh-fmt__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--black);
}
.zh-fmt__k {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a4ee0;
  margin: 0.5rem 0 1rem;
}
.zh-fmt dl { margin: 0; }
.zh-fmt dt { font-weight: 700; font-size: 0.875rem; color: var(--black); margin-top: 0.65rem; }
.zh-fmt dd { margin: 0.15rem 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--grey-dark); }
.zh-titles { margin-top: var(--space-md); font-size: 0.9375rem; line-height: 1.7; color: var(--grey-dark); }
.zh-titles strong { color: var(--black); }
@media (max-width: 767px) {
  .zh-conv { grid-template-columns: minmax(0, 1fr); }
  .zh-conv__wire { display: none; }
  .zh-fmt { margin-top: var(--space-sm); }
}

/* ---------- what carries over: keyword, paragraph, link ---------- */
.zh-carry .zd-principles { max-width: none; }
.zh-carry .zd-principle { grid-template-columns: 12rem minmax(0, 1fr) 12rem; align-items: baseline; }
.zh-carry .zd-principle p { max-width: 66ch; }
.zh-carry .zd-principle a { justify-self: end; font-weight: 600; white-space: nowrap; }
@media (max-width: 767px) {
  .zh-carry .zd-principle { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .zh-carry .zd-principle a { justify-self: start; }
}

/* old-site figures, typeset on the dark stage */
.zh-figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--space-md);
  margin-bottom: var(--space-xl);
  border-top: 1px solid rgba(123, 112, 251, 0.3);
}
.zh-fig { padding-top: var(--space-md); }
.zh-fig__n {
  display: block;
  font-family: var(--font-heading);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  line-height: 1;
  color: var(--white);
}
.zh-fig:nth-child(2) .zh-fig__n { color: var(--cyan); }
.zh-fig__k { display: block; margin-top: 0.5rem; max-width: 26ch; font-size: 0.9375rem; line-height: 1.5; color: rgba(245, 244, 244, 0.75); }
.zh-figs__note {
  grid-column: 1 / -1;
  margin: var(--space-md) 0 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(245, 244, 244, 0.6);
}
.zh-figs__note a { color: var(--purple-tint); }
@media (max-width: 600px) { .zh-fig__k { font-size: 0.8125rem; } }

/* VTX links to its GitHub repo; keep the big format name in ink */
a.zh-fmt__name { text-decoration: none; }
a.zh-fmt__name:hover { color: #5a4ee0; }
.zd-layer__k .zd-link { color: inherit; }


/* ---------- what we built: the old site's animated platform flow ----------
   Ported from zenosinteractive.com home.css (.flow) and recoloured for the
   light page: same layout, chips and motion, ink colours instead of neon.
   Laid out on a fixed 1280x640 grid; --u is one grid unit, so the whole
   figure scales with its box. The app labels on the right run past the
   1280 grid (they did on the old site too), so the box is drawn at 94% of
   the column and the overhang lands inside it. Only below 900px, where the
   figure would get too small to read, does the box scroll sideways. */
.zh-flowwrap { margin-top: var(--space-md); }
.zh-flowbox { container-type: inline-size; width: 94%; }
@media (max-width: 900px) {
  .zh-flowwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
  .zh-flowbox { width: 860px; padding-right: 80px; box-sizing: content-box; }
}
.zh-flow { --u: calc(100cqw / 1280); --ink-c: #0e7f6a; --ink-p: #5a4ee0; position: relative; width: 100%; aspect-ratio: 2 / 1; color: var(--black); }
.zh-flow__wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.zh-flow__glow { position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; filter: blur(calc(24 * var(--u))); }
.zh-flow__glow--purple { left: 24.22%; top: 21.88%; width: 23.44%; height: 34.38%; background: radial-gradient(ellipse at center, rgba(123,112,251,0.16) 0%, rgba(123,112,251,0) 70%); }
.zh-flow__glow--cyan { left: 72.66%; top: 21.88%; width: 21.88%; height: 34.38%; background: radial-gradient(ellipse at center, rgba(27,191,160,0.14) 0%, rgba(27,191,160,0) 70%); }
.zh-flow__tier { position: absolute; top: 13.28%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); z-index: 2; }
.zh-flow__tier-num { font-family: var(--font-heading); font-weight: 700; font-size: calc(11 * var(--u)); letter-spacing: 0.18em; color: var(--grey); }
.zh-flow__tier-name { font-family: var(--font-heading); font-weight: 900; font-stretch: 125%; font-size: calc(13 * var(--u)); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-p); }
.zh-flow__node { position: absolute; z-index: 1; box-sizing: border-box; padding: calc(20 * var(--u)) calc(24 * var(--u)); display: flex; flex-direction: column; align-items: center; text-align: center; isolation: isolate; filter: drop-shadow(0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(14, 11, 22, 0.08)); }
.zh-flow__node::before, .zh-flow__node::after { content: ''; position: absolute; pointer-events: none; }
.zh-flow__node::before { inset: 0; z-index: -2; clip-path: polygon(calc(22 * var(--u)) 0, 100% 0, 100% calc(100% - 22 * var(--u)), calc(100% - 22 * var(--u)) 100%, 0 100%, 0 calc(22 * var(--u))); }
.zh-flow__node::after { inset: 1.5px; z-index: -1; clip-path: polygon(calc(20.5 * var(--u)) 0, 100% 0, 100% calc(100% - 20.5 * var(--u)), calc(100% - 20.5 * var(--u)) 100%, 0 100%, 0 calc(20.5 * var(--u))); }
.zh-flow__node--default::before { background: rgba(123, 112, 251, 0.35); }
.zh-flow__node--default::after { background: linear-gradient(rgba(123,112,251,0.03), rgba(123,112,251,0.03)), #ffffff; }
.zh-flow__node--extract::before { background: rgba(123, 112, 251, 0.65); }
.zh-flow__node--extract::after { background: linear-gradient(rgba(123,112,251,0.08), rgba(123,112,251,0.08)), #ffffff; }
.zh-flow__node--product::before { background: rgba(27, 191, 160, 0.6); }
.zh-flow__node--product::after { background: linear-gradient(rgba(27,191,160,0.06), rgba(27,191,160,0.06)), #ffffff; }
.zh-flow__node--game { left: 3.13%; top: 25%; width: 17.19%; height: 28.13%; padding: calc(18 * var(--u)) calc(16 * var(--u)); justify-content: center; }
.zh-flow__node--extract { left: 24.22%; top: 25%; width: 23.44%; height: 28.13%; }
.zh-flow__node--vtx { left: 51.56%; top: 25%; width: 17.19%; height: 23.44%; }
.zh-flow__node--twins { left: 72.66%; top: 25%; width: 21.88%; height: 23.44%; }
.zh-flow__tag { font-family: var(--font-heading); font-weight: 700; font-size: calc(11 * var(--u)); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-p); margin-bottom: calc(6 * var(--u)); }
.zh-flow__subtitle { display: block; margin-bottom: calc(6 * var(--u)); font-family: var(--font-heading); font-weight: 600; font-size: calc(14 * var(--u)); letter-spacing: 0.015em; color: var(--ink-c); }
.zh-flow__title { font-family: var(--font-heading); font-weight: 900; font-stretch: 125%; font-size: calc(26 * var(--u)); text-transform: uppercase; line-height: 1.02; letter-spacing: -0.01em; margin: 0; color: var(--black); }
.zh-flow__title--purple { color: var(--ink-p); }
.zh-flow__title--cyan, .zh-flow__title--cyan a { color: var(--ink-c); text-decoration: none; }
.zh-flow__sub { margin: calc(9 * var(--u)) 0 0; font-family: var(--font-body); font-size: calc(13 * var(--u)); line-height: 1.5; color: var(--grey-dark); }
/* engine chips in the Game node: two even columns plus a full-width 'Any engine',
   sized down from the old site's so all five fit the box at this scale */
.zh-flow__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(6 * var(--u)); width: 100%; margin-top: calc(14 * var(--u)); }
.zh-flow__chip { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: calc(26 * var(--u)); padding: 0 calc(6 * var(--u)); font-family: var(--font-heading); font-weight: 700; font-size: calc(10.5 * var(--u)); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--ink-p); background: rgba(123, 112, 251, 0.06); border: 1px solid rgba(123, 112, 251, 0.4); }
.zh-flow__chip--any { grid-column: 1 / -1; color: var(--white); background: var(--ink-p); border-color: var(--ink-p); }
.zh-flow__app { position: absolute; z-index: 1; transform: translateY(-50%); font-family: var(--font-heading); font-weight: 900; font-stretch: 125%; font-size: calc(18 * var(--u)); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-c); white-space: nowrap; }
.zh-flow__app--accent { color: var(--ink-p); }
.zh-flow__app-prefix { font-weight: 500; font-size: calc(13 * var(--u)); letter-spacing: 0.14em; color: rgba(14, 127, 106, 0.7); margin-right: calc(6 * var(--u)); }
.zh-flow__app--accent .zh-flow__app-prefix { color: rgba(90, 78, 224, 0.7); }
.zh-flow__note { position: absolute; z-index: 1; font-family: var(--font-heading); font-weight: 700; font-size: calc(11 * var(--u)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); white-space: nowrap; }
.zh-flow__note--apps { left: 82.03%; top: 52.81%; }
.zh-flow__note--apps strong { font-weight: 900; color: var(--ink-c); margin-right: calc(5 * var(--u)); }
.zh-flow__note--prism { left: 35.94%; top: 55.5%; transform: translateX(-50%); color: var(--ink-p); }
@media (prefers-reduced-motion: reduce) { .zh-flow__wires circle { display: none; } }

/* ---------- Director: the old site's multi-cam illustration around the real screenshot ---------- */
.zh-dir {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0E0B16;
  border: 1px solid rgba(123, 112, 251, 0.25);
  overflow: hidden;
  font-family: var(--font-body);
}
.zh-dir__wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.zh-dir__main, .zh-dir__mini, .zh-dir__bar { position: absolute; box-sizing: border-box; }
.zh-dir__main { left: 3%; top: 5%; width: 70%; height: 66%; border: 1px solid rgba(123, 112, 251, 0.5); border-radius: 4px; overflow: hidden; background: #000; }
.zh-shot .zh-dir__main img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border: 0; opacity: 0.92; }
.zh-dir__cam { position: absolute; top: 6px; left: 6px; padding: 2px 6px; background: var(--purple); color: var(--white); font-family: var(--font-heading); font-weight: 900; font-size: 9px; letter-spacing: 0.08em; border-radius: 3px; }
.zh-dir__rec { position: absolute; top: 7px; right: 7px; display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: #FF5A5A; }
.zh-dir__rec::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #FF5A5A; animation: zh-rec 1.5s infinite; }
.zh-dir__mini { left: 76%; width: 21%; height: 20%; padding: 5px 6px; border: 1px solid rgba(123, 112, 251, 0.35); border-radius: 3px; background: rgba(123, 112, 251, 0.06); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--purple-tint); }
.zh-dir__mini--1 { top: 5%; }
.zh-dir__mini--2 { top: 28%; }
.zh-dir__mini--add { top: 51%; display: flex; align-items: center; justify-content: center; border-style: dashed; border-color: rgba(84, 255, 224, 0.6); color: var(--cyan); font-weight: 600; }
.zh-dir__bar { left: 3%; right: 3%; top: 77%; height: 18%; padding: 4px 10px 0; border: 1px solid rgba(123, 112, 251, 0.3); border-radius: 4px; background: rgba(123, 112, 251, 0.05); display: flex; justify-content: space-between; align-items: flex-start; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; color: rgba(245, 244, 244, 0.6); }
.zh-dir__bar .cur { color: var(--cyan); font-weight: 600; }
@keyframes zh-rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .zh-dir__rec::before { animation: none; } }

/* ---------- Player: the flat-to-3D clip in place of a still ---------- */
.zh-shot__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border: 1px solid rgba(123, 112, 251, 0.25);
}

/* ---------- the old hero reel, looping behind "What fans and partners saw" ---------- */
.zh-reelsec { position: relative; overflow: hidden; }
.zh-reelsec > .container { position: relative; z-index: 1; }
.zh-reel { position: absolute; left: 0; right: 0; top: 0; height: min(760px, 70%); z-index: 0; pointer-events: none; }
.zh-reel video { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.zh-reel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 11, 22, 0.55) 0%, rgba(14, 11, 22, 0.2) 35%, #0E0B16 100%); }
@media (prefers-reduced-motion: reduce) { .zh-reel video { display: none; } }

/* ---------- what we built: a blueprint grid and a soft glow behind the flow ----------
   40px purple hairlines at 11%, fading out toward the section edges, with a
   purple-to-teal glow sitting under the middle of the diagram. */
.zh-gridsec::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 34% 30% at 40% 60%, rgba(123, 112, 251, 0.10) 0%, rgba(123, 112, 251, 0) 100%),
    radial-gradient(ellipse 28% 26% at 66% 58%, rgba(27, 191, 160, 0.07) 0%, rgba(27, 191, 160, 0) 100%),
    linear-gradient(rgba(123, 112, 251, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 112, 251, 0.11) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  background-position: center, center, center top, center top;
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 57%, #000 35%, transparent 88%);
  mask-image: radial-gradient(ellipse 78% 72% at 50% 57%, #000 35%, transparent 88%);
  pointer-events: none;
}
.zh-gridsec > .container { position: relative; z-index: 1; }


/* ============================================================
   Mobile pass (phones, up to 767px)
   ============================================================ */

/* Flow: the 1280x640 diagram doesn't survive a phone, so it becomes a
   vertical pipeline. Every dashed line (box to box, and each app branch)
   marches downward, and a pulse drops down each box-to-box link. */
.zh-flow__link { display: none; }
@media (max-width: 767px) {
  .zh-flowwrap { overflow: visible; padding: 0; }
  .zh-flowbox { container-type: normal; width: auto; padding: 0; }
  .zh-flow {
    --u: 1px;
    --rail: rgba(14, 140, 116, 0.6);
    --dash-y: repeating-linear-gradient(to bottom, var(--rail) 0 4px, transparent 4px 8px);
    --dash-x: repeating-linear-gradient(to right, var(--rail) 0 4px, transparent 4px 8px);
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .zh-flow__wires, .zh-flow__tier, .zh-flow__glow { display: none; }
  .zh-flow__node {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    padding: 16px 18px 18px;
    align-items: stretch;
    text-align: left;
  }
  .zh-flow__node--game { padding: 16px 18px 18px; }
  .zh-flow__chips { width: 100%; max-width: none; margin-top: 12px; }
  .zh-flow__chip { height: 32px; font-size: 11px; }
  .zh-flow__title { font-size: 22px; }
  .zh-flow__sub { font-size: 14px; margin-top: 6px; }
  .zh-flow__tag, .zh-flow__subtitle { margin-bottom: 4px; }

  /* every connector is a marching dashed line on the same 36px axis */
  .zh-flow__link, .zh-flow__note, .zh-flow__app {
    position: relative;
    left: auto !important;   /* the desktop grid places these with left/top (inline on the apps) */
    top: auto !important;
    transform: none;
    margin-left: 36px;
    border: 0;
    background: var(--dash-y) 0 0 / 1px 8px repeat-y;
    animation: zh-march-y 0.9s linear infinite;
    white-space: normal;
  }
  .zh-flow__link { display: block; height: 26px; }
  .zh-flow__link::after {
    content: '';
    position: absolute;
    left: -3px;
    top: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #13a589;
    box-shadow: 0 0 0 3px rgba(19, 165, 137, 0.15);
    animation: zh-drop 1.6s ease-in infinite;
  }
  .zh-flow__link--2::after { animation-delay: 0.5s; }
  .zh-flow__link--3::after { animation-delay: 1s; }
  .zh-flow__note { padding: 8px 0 2px 22px; font-size: 10px; }
  .zh-flow__app { padding: 5px 0 5px 24px; font-size: 14px; line-height: 1.3; }
  .zh-flow__app-prefix { font-size: 10.5px; }
  /* branch from the line to each app */
  .zh-flow__app::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 15px;
    height: 1px;
    background: var(--dash-x) 0 0 / 8px 1px repeat-x;
    animation: zh-march-x 0.9s linear infinite;
  }
  .zh-flow__app[style*="64.06"]:first-of-type,
  .zh-flow__note--apps + .zh-flow__app { padding-top: 7px; }
  /* the very last app ends the tree: its line stops at the branch */
  .zh-flow__app--accent[style*="87.5"] { background-size: 1px 8px; background-repeat: no-repeat; background-image: none; padding-bottom: 2px; }
  .zh-flow__app--accent[style*="87.5"]::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 50%;
    background: var(--dash-y) 0 0 / 1px 8px repeat-y;
    animation: zh-march-y 0.9s linear infinite;
  }

  /* reading order: game, PRISM and its note, VTX and what it fed, Twins and what they ran */
  .zh-flow__node--game { order: 1; }
  .zh-flow__link--1 { order: 2; }
  .zh-flow__node--extract { order: 3; }
  .zh-flow__note--prism { order: 4; }
  .zh-flow__link--2 { order: 5; height: 18px; }
  .zh-flow__node--vtx { order: 6; }
  .zh-flow__app[style*="64.06"] { order: 7; }
  .zh-flow__link--3 { order: 8; }
  .zh-flow__node--twins { order: 9; }
  .zh-flow__note--apps { order: 10; }
  .zh-flow__app[style*="87.5"] { order: 11; }
}
@keyframes zh-march-y { to { background-position: 0 8px; } }
@keyframes zh-march-x { to { background-position: 8px 0; } }
@keyframes zh-drop {
  0% { top: -4px; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: calc(100% - 3px); opacity: 0; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .zh-flow__link, .zh-flow__note, .zh-flow__app,
  .zh-flow__app::before, .zh-flow__app--accent[style*="87.5"]::after { animation: none; }
  .zh-flow__link::after { display: none; }
}

/* Figures: three columns are too narrow on a phone; stack them as rows,
   number on the left, label beside it. */
@media (max-width: 600px) {
  .zh-figs { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-lg); }
  .zh-fig { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid rgba(123, 112, 251, 0.18); }
  .zh-fig__n { font-size: 2.25rem; }
  .zh-fig__k { margin-top: 0; max-width: none; font-size: 0.9375rem; }
}

/* Stills: six full-width cards ran to ~2,800px on a phone. Swipe them
   sideways instead, one card and a peek of the next. */
@media (max-width: 600px) {
  .zh-shots {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.25rem;
    scroll-padding: 0 var(--gutter);
  }
  .zh-shots::-webkit-scrollbar { display: none; }
  .zh-shot { flex: 0 0 84%; scroll-snap-align: start; }
}