/* ==========================================================================
   BENEATH THE SURFACE — Chinese Metaphysics orientation
   Design system: "Refined & Mystical"
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* surfaces */
  --bg:            #08090a;
  --bg-raise:      #0c0e10;
  --panel:         rgba(236, 232, 225, 0.028);
  --panel-strong:  rgba(236, 232, 225, 0.055);

  /* type colour */
  --text:          #ece8e1;
  --text-dim:      #b6b1a9;
  --muted:         #857f77;
  --muted-deep:    #57534e;

  /* accents */
  --gold:          #c9a961;
  --gold-soft:     #e0c88c;
  --gold-deep:     #8a7440;
  --jade:          #74a08c;   /* BaZi     — person   */
  --azure:         #6f8fb9;   /* Qi Men   — situation*/
  --plum:          #9483b6;   /* ZeRi     — timing   */

  /* hairlines */
  --line:          rgba(236, 232, 225, 0.11);
  --line-soft:     rgba(236, 232, 225, 0.055);
  --line-accent:   color-mix(in srgb, var(--accent) 34%, transparent);

  /* glow */
  --glow:          0 0 60px -12px color-mix(in srgb, var(--accent) 45%, transparent);
  --glow-soft:     0 0 120px -30px color-mix(in srgb, var(--accent) 55%, transparent);

  /* type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --cjk:   "Noto Serif TC", "Songti TC", "Songti SC", "PingFang TC", serif;

  /* rhythm */
  --gutter:  clamp(1.25rem, 4vw, 4.5rem);
  --stack-1: clamp(0.5rem, 0.8vw, 0.75rem);
  --stack-2: clamp(0.9rem, 1.4vw, 1.4rem);
  --stack-3: clamp(1.5rem, 2.6vw, 2.6rem);
  --stack-4: clamp(2.25rem, 4.5vw, 4.25rem);
  --radius:  2px;

  /* the current scene's accent — overridden per scene / per element */
  --accent: var(--gold);
}

[data-accent="gold"]  { --accent: var(--gold); }
[data-accent="bazi"]  { --accent: var(--jade); }
[data-accent="qimen"] { --accent: var(--azure); }
[data-accent="zeri"]  { --accent: var(--plum); }

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  overscroll-behavior: none;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; overflow: visible; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. ATMOSPHERE — grain, vignette, horizon
   -------------------------------------------------------------------------- */
.atmos {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* slow warm wash that shifts with the active accent */
.atmos__wash {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(58% 46% at 50% 34%, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 68%),
    radial-gradient(90% 70% at 50% 120%, rgba(201, 169, 97, 0.05) 0%, transparent 60%);
  opacity: 0.85;
  transition: background 1200ms ease;
}

.atmos__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0, 0, 0, 0.72) 100%);
}

.atmos__horizon {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: min(38vh, 340px);
  opacity: 0.5;
}

.atmos__horizon path { fill: none; stroke: rgba(236, 232, 225, 0.09); stroke-width: 1; }
.atmos__horizon .ridge--far  { stroke: rgba(236, 232, 225, 0.055); }
.atmos__horizon .ridge--near { stroke: rgba(236, 232, 225, 0.10); }

.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. DECK SHELL / SLIDE SHELL
   -------------------------------------------------------------------------- */
.deck {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  z-index: 1;
}

.scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.25rem, 7vh, 5.5rem) var(--gutter) clamp(4rem, 8vh, 5.5rem);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.scene::-webkit-scrollbar { display: none; }

.scene.is-active { visibility: visible; }

.scene__inner {
  /* margin:auto keeps tall content scrollable instead of clipped at the top */
  margin: auto;
  width: 100%;
  max-width: 1180px;
}

.scene--wide .scene__inner { max-width: 1340px; }

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY COMPONENTS
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: clamp(0.58rem, 0.72vw, 0.7rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow--accent { color: color-mix(in srgb, var(--accent) 78%, var(--text)); }

.section-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: 0.005em;
  color: var(--text);
}

.section-title--sm { font-size: clamp(1.7rem, 3.2vw, 2.7rem); }

.section-title .line { display: block; }

.section-title em {
  font-style: normal;
  color: var(--gold-soft);
}

.section-sub {
  margin-top: var(--stack-1);
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 72%, var(--text-dim));
}

.lede {
  font-size: clamp(0.9rem, 1.1vw, 1.02rem);
  line-height: 1.72;
  color: var(--text-dim);
  font-weight: 300;
}

.copy {
  font-size: clamp(0.84rem, 0.98vw, 0.95rem);
  line-height: 1.75;
  color: var(--muted);
  font-weight: 300;
}

.title-rule {
  width: 100%;
  height: 1px;
  margin-top: var(--stack-2);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 55%, transparent) 0%,
    var(--line-soft) 32%,
    transparent 100%);
  transform-origin: left center;
}

.cjk {
  font-family: var(--cjk);
  font-weight: 300;
  color: color-mix(in srgb, var(--accent) 55%, transparent);
  letter-spacing: 0.18em;
  line-height: 1;
  user-select: none;
}

.scene-head { margin-bottom: var(--stack-4); }
.scene--wide .scene-head { margin-bottom: var(--stack-2); }

/* --------------------------------------------------------------------------
   6. COMPONENTS
   -------------------------------------------------------------------------- */

/* --- lens label ---------------------------------------------------------- */
.lens-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: clamp(0.62rem, 0.74vw, 0.72rem);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 85%, var(--text));
}

.lens-label::before {
  content: "";
  width: 1.6em;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 60%, transparent);
}

.lens-label--bare::before { display: none; }

/* --- index numeral ------------------------------------------------------- */
.numeral {
  font-family: var(--serif);
  font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--accent) 70%, transparent);
}

/* --- panels -------------------------------------------------------------- */
.panel {
  position: relative;
  padding: clamp(1.1rem, 2vw, 1.75rem) clamp(1.1rem, 2vw, 1.9rem);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  backdrop-filter: blur(2px);
}

.panel__title {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: clamp(0.6rem, 0.72vw, 0.7rem);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--stack-2);
}

.panel__title--state {
  gap: 0.65rem;
  font-size: clamp(0.72rem, 0.9vw, 0.86rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 24%, transparent);
}

.panel__title--state::before {
  content: "";
  width: 1.15rem;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 42%, transparent);
}

.panel--surface {
  border-color: var(--line-soft);
  background: rgba(236, 232, 225, 0.022);
}
.panel--surface .panel__title { color: var(--muted); }

.panel--deep {
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 7%, transparent) 0%,
      rgba(236, 232, 225, 0.018) 60%);
  box-shadow: var(--glow-soft);
}
.panel--deep .panel__title { color: color-mix(in srgb, var(--accent) 85%, var(--text)); }

/* corner ticks — restrained seal-frame reference */
.panel--deep::before,
.panel--deep::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  pointer-events: none;
}
.panel--deep::before { top: -1px;    left: -1px;  border-right: 0; border-bottom: 0; }
.panel--deep::after  { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }

/* --- fact list ----------------------------------------------------------- */
.facts { display: grid; gap: 0.62rem; }

.facts li {
  display: grid;
  grid-template-columns: 0.65rem 1fr;
  align-items: baseline;
  gap: 0.7rem;
  font-size: clamp(0.8rem, 0.95vw, 0.9rem);
  line-height: 1.55;
  color: var(--text-dim);
  font-weight: 300;
}

.facts li::before {
  content: "";
  width: 0.4rem; height: 1px;
  background: color-mix(in srgb, var(--accent) 65%, transparent);
  transform: translateY(-0.32em);
}

.facts--muted li { color: var(--muted); }
.facts--muted li::before { background: var(--muted-deep); }

/* --- key/value readout --------------------------------------------------- */
.readout { display: grid; gap: 0.75rem; }

.readout__row { display: grid; gap: 0.18rem; }

.readout__key {
  font-size: clamp(0.53rem, 0.66vw, 0.63rem);
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 62%, var(--muted));
}

.readout__val {
  font-size: clamp(0.8rem, 0.95vw, 0.9rem);
  line-height: 1.5;
  color: var(--text-dim);
  font-weight: 300;
}

/* --- reveal button ------------------------------------------------------- */
.reveal-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.92rem 1.7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: color-mix(in srgb, var(--accent) 88%, var(--text));
  font-size: clamp(0.62rem, 0.75vw, 0.72rem);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 400ms ease, border-color 400ms ease, color 400ms ease;
}

.reveal-btn__glyph {
  position: relative;
  width: 15px; height: 15px;
  flex: 0 0 auto;
}
.reveal-btn__glyph::before,
.reveal-btn__glyph::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.85;
}
.reveal-btn__glyph::after {
  inset: 4px;
  opacity: 0.45;
}

.reveal-btn__labels,
.reveal-hint--toggle {
  display: grid;
}
.reveal-actions--toggle [data-toggle-forward],
.reveal-actions--toggle [data-toggle-back] {
  grid-area: 1 / 1;
}
.reveal-actions--toggle [data-toggle-back] { opacity: 0; }

.reveal-btn--eye-toggle {
  width: 96px;
  min-width: 96px;
  height: 96px;
  min-height: 96px;
  flex-direction: column;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.78rem;
  border-width: 1.4px;
  border-radius: 50%;
  letter-spacing: 0.24em;
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 169, 97, 0.1), transparent 58%),
    rgba(8, 10, 10, 0.72);
  box-shadow:
    0 0 0 5px rgba(201, 169, 97, 0.045),
    0 0 32px rgba(201, 169, 97, 0.14),
    inset 0 0 24px rgba(201, 169, 97, 0.07);
}
.reveal-btn__eye {
  width: 46px;
  height: 29px;
  color: color-mix(in srgb, var(--accent) 90%, var(--text));
}
.reveal-btn__eye svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.reveal-btn__eye path,
.reveal-btn__eye circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reveal-btn__eye .reveal-btn__pupil {
  fill: currentColor;
  stroke: none;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 70%, transparent));
}
.reveal-btn__eye .reveal-btn__iris {
  stroke-width: 1.35;
  filter: drop-shadow(0 0 3px currentColor);
}
.reveal-btn__eye .reveal-btn__orbit {
  opacity: 0.22;
  stroke-width: 0.72;
  stroke-dasharray: 1.3 2.1;
  filter: drop-shadow(0 0 2px currentColor);
}
.reveal-btn--eye-toggle .reveal-btn__labels {
  padding-left: 0.24em;
  font-size: clamp(0.5rem, 0.58vw, 0.56rem);
  line-height: 1;
}

.reveal-btn:hover,
.reveal-btn:focus-visible {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
  color: var(--text);
}

.reveal-btn[aria-disabled="true"] {
  pointer-events: none;
}

/* soft pulse ring that invites the click, without shouting */
.reveal-btn__halo {
  position: absolute;
  inset: -1px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}

/* --- icon ring ----------------------------------------------------------- */
.icon-ring {
  position: relative;
  width: clamp(74px, 8.4vw, 108px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.icon-ring__frame {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 50%;
}

.icon-ring svg { width: 62%; height: 62%; }

/* NOTE: no `vector-effect: non-scaling-stroke` anywhere on animated
   strokes — it moves dash lengths into screen space, which breaks the
   dash-offset draw-on. Stroke widths are tuned per component instead,
   in user units, against each SVG's typical render scale. */
.icon-ring [data-stroke] {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 88%, transparent);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.icon-ring [data-stroke="soft"] { stroke: color-mix(in srgb, var(--accent) 46%, transparent); }
.icon-ring [data-fill]   { fill: color-mix(in srgb, var(--accent) 80%, transparent); stroke: none; }

/* --- diagram labels ------------------------------------------------------ */
.diagram-label {
  font-size: clamp(0.5rem, 0.64vw, 0.6rem);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.diagram-caption {
  font-size: clamp(0.62rem, 0.74vw, 0.7rem);
  letter-spacing: 0.08em;
  color: var(--muted-deep);
  font-style: italic;
  font-family: var(--serif);
}

/* --- generic svg diagram strokes ----------------------------------------- */
.dgm [data-line]          { fill: none; stroke: var(--line); stroke-width: 0.45; stroke-linecap: round; }
.dgm [data-line="accent"] { stroke: color-mix(in srgb, var(--accent) 72%, transparent); }
.dgm [data-line="ghost"]  { stroke: color-mix(in srgb, var(--accent) 30%, transparent); }
.dgm [data-node]          { fill: color-mix(in srgb, var(--accent) 85%, transparent); }
.dgm text                 { font-family: var(--sans); font-size: 5px; letter-spacing: 0.22em; fill: var(--muted); text-transform: uppercase; }
.dgm text.el              { font-family: var(--cjk); font-size: 5.5px; letter-spacing: 0; fill: color-mix(in srgb, var(--accent) 76%, transparent); }

/* per-surface stroke weight, so every diagram lands near a 1px hairline */
.stage-visual .dgm [data-line] { stroke-width: 0.4; }
.qimen__field .dgm [data-line] { stroke-width: 0.42; }
.zeri__dial   .dgm [data-line] { stroke-width: 0.5; }

/* --- chips --------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.34rem 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: clamp(0.55rem, 0.68vw, 0.64rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.chip--accent {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
}

/* --- seal ---------------------------------------------------------------- */
.seal {
  width: clamp(38px, 4vw, 52px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: color-mix(in srgb, var(--accent) 95%, transparent);
  font-family: var(--cjk);
  font-size: clamp(0.9rem, 1.2vw, 1.15rem);
  line-height: 1;
}

/* --- footnote ------------------------------------------------------------ */
.footnote {
  font-size: clamp(0.62rem, 0.76vw, 0.72rem);
  line-height: 1.6;
  color: var(--muted-deep);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   7. SCENE LAYOUTS
   ========================================================================== */

/* --- Scene 1 — worldview ------------------------------------------------- */
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.4vw, 3.4rem);
  align-items: start;
}

.principle { display: grid; gap: var(--stack-2); }

.principle__head { display: grid; gap: 0.9rem; }

.principle__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.85vw, 1.6rem);
  line-height: 1.14;
  color: var(--text);
  letter-spacing: 0.01em;
  margin: 0;
}

.synthesis {
  margin-top: var(--stack-4);
  padding-top: var(--stack-3);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.4rem;
  align-items: baseline;
  justify-content: center;
  text-align: center;
}

.synthesis span {
  font-family: var(--serif);
  font-size: clamp(0.98rem, 1.5vw, 1.3rem);
  font-weight: 300;
  color: var(--text-dim);
}
.synthesis span em { font-style: italic; color: var(--gold-soft); }

/* --- Scene 2 — three lenses ---------------------------------------------- */
.lenses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2.6rem);
}

.lens {
  position: relative;
  display: grid;
  gap: var(--stack-2);
  padding: clamp(1.3rem, 2.2vw, 2rem) clamp(1.1rem, 1.8vw, 1.6rem) clamp(1.6rem, 2.6vw, 2.2rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 5%, transparent) 0%,
    transparent 55%);
  overflow: hidden;
}

.lens__edge {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 70%, transparent), transparent);
  transform-origin: center;
}

.lens__origin {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: clamp(0.55rem, 0.68vw, 0.64rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-deep);
}

.lens__origin i {
  font-style: normal;
  color: color-mix(in srgb, var(--accent) 60%, transparent);
}

.lens__name {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.05;
  color: var(--text);
}

.lens__cjk { font-size: clamp(1.1rem, 1.5vw, 1.35rem); }

.lens__role {
  font-size: clamp(0.66rem, 0.8vw, 0.76rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
}

.lens__q {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  font-weight: 300;
  font-style: normal;
  line-height: 1.4;
  color: var(--text-dim);
}

.lens__ring { margin-top: auto; }

.scene-foot {
  margin-top: var(--stack-4);
  display: flex;
  justify-content: center;
}

/* --- Scenes 3–5 — surface / below the surface ---------------------------- */
/* DOM order is the mobile order: surface → visual → button → deeper layer.
   Desktop pulls the deeper panel up beside the visual with explicit areas. */
.bazi-split {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 1fr;
  min-height: clamp(390px, 58vh, 560px);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  perspective: 1500px;
  transform-style: preserve-3d;
  isolation: isolate;
}

.bazi-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(130px, 0.56fr) minmax(240px, 1.1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(0.9rem, 1.8vh, 1.35rem) clamp(0.75rem, 1.5vw, 1.3rem);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: opacity;
}

/* Depth Peel moves the individual columns, mirroring the supplied prototype.
   Explicit compositor hints keep the large portraits and text groups from
   being re-rasterised as one full-width panel on every frame. */
.bazi-band__intro,
.bazi-band__visual,
.bazi-band__detail,
.qimen-band__readout,
.qimen-band__core,
[data-surface-content] {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

.depth-dust,
.depth-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.depth-dust {
  z-index: 4;
  transform-style: preserve-3d;
}

.depth-mote {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(216, 162, 74, 0.55);
  opacity: 0;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.depth-vignette {
  z-index: 6;
  opacity: 0;
  background: radial-gradient(58% 54% at 50% 48%, transparent 28%, rgba(0, 0, 0, 0.74) 100%);
  will-change: opacity;
}

.bazi-split {
  position: relative;
  display: block;
  height: clamp(390px, 58vh, 560px);
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.bazi-split > .bazi-band {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bazi-split > .bazi-band--deep { z-index: 3; }
.bazi-split > .bazi-band--surface { z-index: 5; }

.bazi-concentric-reveal {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}

.bazi-concentric-reveal span {
  position: absolute;
  width: clamp(112px, 15vw, 184px);
  aspect-ratio: 1;
  border: 1.4px solid rgba(121, 201, 178, 0.72);
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    0 0 12px rgba(121, 201, 178, 0.3),
    inset 0 0 10px rgba(121, 201, 178, 0.12);
  will-change: transform, opacity;
}

.bazi-concentric-reveal span:nth-child(even) {
  border-color: rgba(216, 174, 88, 0.66);
  box-shadow:
    0 0 13px rgba(216, 174, 88, 0.26),
    inset 0 0 10px rgba(216, 174, 88, 0.1);
}

/* The bright rings announce the transition; these darker annular bands stay
   behind in the revealed state so the lower layer reads as a deep aperture. */
.bazi-depth-rings {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.bazi-depth-rings span {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.bazi-depth-rings span:nth-child(1) {
  width: clamp(260px, 38%, 430px);
  border: clamp(10px, 1.1vw, 16px) solid rgba(0, 0, 0, 0.26);
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.42), inset 0 0 28px rgba(0, 0, 0, 0.32);
}

.bazi-depth-rings span:nth-child(2) {
  width: clamp(430px, 67%, 760px);
  border: clamp(18px, 1.8vw, 28px) solid rgba(0, 0, 0, 0.32);
  box-shadow: 0 0 46px rgba(0, 0, 0, 0.5), inset 0 0 44px rgba(0, 0, 0, 0.36);
}

.bazi-depth-rings span:nth-child(3) {
  width: clamp(650px, 98%, 1120px);
  border: clamp(30px, 3vw, 48px) solid rgba(0, 0, 0, 0.42);
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.62), inset 0 0 62px rgba(0, 0, 0, 0.44);
}

.bazi-split > .reveal-actions {
  position: absolute;
  left: 50%;
  bottom: 0.8rem;
  z-index: 12;
  width: max-content;
  margin: 0;
  overflow: visible;
  transform: translateX(-50%);
}

.bazi-state-marker {
  position: absolute;
  top: clamp(0.9rem, 1.8vh, 1.25rem);
  left: clamp(0.85rem, 1.5vw, 1.3rem);
  z-index: 13;
  display: grid;
  pointer-events: none;
}

.bazi-state-marker__label {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  width: max-content;
  font-size: clamp(0.7rem, 0.84vw, 0.82rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.31em;
  text-transform: uppercase;
  text-shadow: 0 0 18px currentColor;
}

.bazi-state-marker__label::before {
  content: "";
  width: clamp(1.25rem, 2vw, 2rem);
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}

.bazi-state-marker__label--surface {
  color: color-mix(in srgb, var(--gold) 88%, var(--text));
}

.bazi-state-marker__label--deep {
  color: #79c9b2;
  opacity: 0;
}

@media (max-width: 900px) {
  .bazi-split { height: clamp(620px, 72vh, 720px); }
  .bazi-split > .reveal-actions { bottom: 0.7rem; }
}

.bazi-band--surface {
  grid-template-columns: minmax(160px, 0.7fr) minmax(145px, 0.58fr) minmax(410px, 1.72fr);
  background: linear-gradient(180deg, rgba(236, 232, 225, 0.018), transparent 82%);
}

.bazi-band--deep {
  opacity: 0;
  clip-path: circle(0% at 50% 50%);
  -webkit-clip-path: circle(0% at 50% 50%);
  grid-template-columns: minmax(160px, 0.7fr) minmax(145px, 0.58fr) minmax(410px, 1.72fr);
  border-top: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 7%, transparent),
    color-mix(in srgb, var(--accent) 2%, transparent) 72%,
    transparent);
}

.bazi-band--deep::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 58%, transparent), transparent);
}

/* BaZi foreground-reveal prototype: after interaction the lower layer has
   enough visual weight to become the slide, while the surface remains as a
   quiet point of comparison above it. */
.bazi-split--focus .bazi-band--deep {
  background:
    radial-gradient(42% 110% at 50% 48%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 9%, transparent),
      color-mix(in srgb, var(--accent) 3%, transparent) 78%,
      transparent);
  box-shadow: inset 0 18px 50px -42px color-mix(in srgb, var(--accent) 70%, transparent);
}
.bazi-split--focus .bazi-band--surface {
  min-height: 0;
  overflow: visible;
}
.bazi-split--focus .bazi-band--deep .bazi-reference-person { opacity: 0.88; }
.bazi-split--focus .bazi-band--deep .panel__title {
  color: color-mix(in srgb, var(--accent) 88%, var(--text));
}

.bazi-band__intro { display: grid; gap: 0.55rem; }
.bazi-band__intro .panel__title { margin: 0; }

.bazi-band__visual {
  position: relative;
  width: clamp(112px, 12vw, 158px);
  aspect-ratio: 1;
  margin-inline: auto;
}

.bazi-band__visual svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bazi-reference-person {
  position: absolute;
  inset: -7% -2%;
  z-index: 0;
  width: 104%;
  height: 114%;
  object-fit: contain;
  transform: scale(1.34) translateY(3%);
  transform-origin: center;
  pointer-events: none;
}
.bazi-band__visual svg { z-index: 1; }
.bazi-band--surface [data-fig],
.bazi-band--deep [data-fig] { display: none; }
.bazi-band--surface .bazi-reference-person {
  opacity: 0.56;
  filter: saturate(0.7) contrast(1.22) brightness(1.08) drop-shadow(0 0 5px rgba(208, 170, 101, 0.34));
}
.bazi-band--deep .bazi-reference-person {
  opacity: 0.3;
  filter: saturate(0.62) contrast(1.28) brightness(1.04) drop-shadow(0 0 6px rgba(121, 201, 178, 0.32));
}
.bazi-band--deep .bazi-reference-person--outline {
  opacity: 0.88;
  filter:
    saturate(0.88)
    contrast(1.08)
    brightness(0.92)
    drop-shadow(0 0 5px rgba(121, 201, 178, 0.28))
    drop-shadow(0 0 4px rgba(216, 174, 88, 0.2));
}

.bazi-band--surface [data-blueprint],
.bazi-band--surface [data-blueprint-nodes] { display: none; }

.bazi-silhouette__aura { fill: url(#bazi-person-aura); }
.bazi-silhouette__fill {
  fill: color-mix(in srgb, var(--accent) 8%, transparent);
}
.bazi-silhouette__hair {
  fill: color-mix(in srgb, var(--accent) 13%, #090c0d);
  stroke: color-mix(in srgb, var(--accent) 48%, transparent);
  stroke-width: 0.45;
}
.bazi-silhouette .bazi-silhouette__halo {
  stroke: #77bca8;
  stroke-width: 4.2;
  opacity: 0.2;
  filter: url(#bazi-person-glow);
}
.bazi-silhouette .bazi-silhouette__line {
  stroke: url(#bazi-person-line);
  stroke-width: 1.15;
  filter: url(#bazi-person-glow);
}
.bazi-silhouette .bazi-silhouette__detail {
  stroke: color-mix(in srgb, var(--accent) 64%, var(--gold-soft));
  stroke-width: 0.58;
  opacity: 0.72;
}
.bazi-band--deep .bazi-silhouette__aura { opacity: 0.55; }
.bazi-band--deep [data-blueprint],
.bazi-band--deep [data-blueprint-nodes] { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 32%, transparent)); }

.bazi-band--surface .bazi-silhouette__fill { opacity: 0.025; }
.bazi-band--deep .bazi-silhouette__fill { opacity: 0.015; }
.bazi-band--surface .bazi-silhouette__hair { fill-opacity: 0.08; }
.bazi-band--deep .bazi-silhouette__hair { fill-opacity: 0.04; }
.bazi-band--deep [data-blueprint],
.bazi-band--deep [data-blueprint-nodes] { opacity: 0.82; }

.bazi-band__detail .facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: 0.42rem;
}

.bazi-band__detail .facts li {
  font-size: clamp(0.7rem, 0.84vw, 0.8rem);
  line-height: 1.4;
}

.bazi-band__detail .facts--surface {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
}

.bazi-insight-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.5vw, 1.45rem);
}

.bazi-insight-group {
  min-width: 0;
}

.bazi-insight-group__label {
  margin: 0 0 0.62rem;
  padding-bottom: 0.48rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: clamp(0.56rem, 0.66vw, 0.64rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
}

.bazi-insight-group .facts {
  grid-template-columns: 1fr;
  gap: 0.42rem;
}

.bazi-insight-group .facts li {
  font-size: clamp(0.69rem, 0.8vw, 0.78rem);
  line-height: 1.42;
}

.bazi-insight-group:not(:has(.bazi-insight-group__label)) {
  padding-top: 1.75rem;
}

.bazi-band__closing {
  margin-top: clamp(0.65rem, 1.2vh, 0.9rem);
  padding-top: clamp(0.55rem, 1vh, 0.75rem);
  border-top: 1px solid var(--line-soft);
  font-family: var(--serif);
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  line-height: 1.35;
  color: color-mix(in srgb, var(--accent) 65%, var(--text-dim));
}

.bazi-band--surface > .reveal-actions {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 5;
  width: max-content;
  margin: 0;
  overflow: visible;
  transform: translate(-50%, 50%);
}

.bazi-band--surface > .reveal-actions .reveal-hint {
  position: absolute;
  top: calc(100% + 0.5rem);
  width: 100%;
}

.reveal-stage {
  display: grid;
  grid-template-columns: 1fr minmax(230px, 0.85fr) 1fr;
  column-gap: clamp(1.25rem, 2.8vw, 3rem);
  row-gap: clamp(1.2rem, 2.4vw, 2rem);
  align-items: center;
}

.reveal-stage > .panel--surface { grid-column: 1; grid-row: 1; }
.reveal-stage > .stage-visual   { grid-column: 2; grid-row: 1; }
.reveal-stage > .reveal-actions { grid-column: 2; grid-row: 2; }
.reveal-stage > .panel--deep    { grid-column: 3; grid-row: 1; }

.stage-visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

.stage-visual > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.reveal-actions {
  margin-top: var(--stack-2);
  /* No overflow clipping: the toggle button's glow is circular and would
     otherwise be cut to this block's rectangle, drawing square edges around
     it. (The clip existed for the old one-way button that collapsed its own
     height on reveal; nothing collapses now.) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
}

.reveal-hint {
  font-size: clamp(0.56rem, 0.68vw, 0.64rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-deep);
}

.deep-note {
  margin-top: var(--stack-2);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.98rem, 1.4vw, 1.2rem);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--accent) 60%, var(--text-dim));
}

/* --- Scene 4 — Qi Men ---------------------------------------------------- */
.qimen-split .qimen-band--surface { min-height: 0; overflow: hidden; }

.qimen-band--surface {
  grid-template-columns: 1fr;
}

.qimen-person-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(230px, 0.95fr) minmax(390px, 1.45fr) minmax(230px, 0.95fr);
  gap: clamp(1rem, 2vw, 2rem);
  width: 100%;
  height: 100%;
}

.qimen-person-card {
  display: grid;
  grid-template-rows: clamp(150px, 19vh, 205px) 1fr;
  align-items: start;
  justify-items: stretch;
  gap: clamp(0.45rem, 0.8vh, 0.7rem);
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: clamp(2.15rem, 4.6vh, 3.2rem) clamp(0.45rem, 0.8vw, 0.8rem) clamp(4.7rem, 8vh, 5.5rem);
}

.qimen-person-grid .qimen-person-card {
  width: 100%;
  max-width: none;
  margin: 0;
}

.qimen-person-card--a { grid-column: 1; }
.qimen-person-card--b { grid-column: 3; }

.qimen-person-card__portrait {
  width: clamp(110px, 10.5vw, 148px);
  height: 100%;
  object-fit: contain;
  align-self: end;
  justify-self: center;
  pointer-events: none;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 24%, transparent));
}

.qimen-person-card__content {
  display: grid;
  align-content: start;
  gap: 0.48rem;
  width: 100%;
  max-width: 290px;
  margin-inline: auto;
}

.qimen-person-grid--surface .speaker__id {
  justify-content: center;
}

.qimen-person-grid--surface .bubble {
  width: 100%;
  max-width: none;
  text-align: center;
}

/* The proposal sits in the middle column of the surface grid, between the
   two speakers, on the same row rhythm as their portraits. On the reveal it
   stays put and recedes, ending up behind the structural dynamics that take
   the same column in the deep band. */
.qimen-proposal {
  grid-column: 2;
  display: grid;
  grid-template-rows: clamp(150px, 19vh, 205px) 1fr;
  align-items: start;
  justify-items: center;
  gap: clamp(0.45rem, 0.8vh, 0.7rem);
  transform-style: preserve-3d;
}

.qimen-proposal__sheet {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  width: 100%;
  min-height: 0;
}

.qimen-proposal__sheet svg {
  height: clamp(138px, 17.5vh, 190px);
  max-height: 100%;
  width: auto;
  flex: 0 0 auto;
  /* the portraits either side are luminous, so the sheet carries the same
     glow rather than sitting on the slide as flat linework */
  filter:
    drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 42%, transparent))
    drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 22%, transparent));
}

.qimen-proposal__content {
  display: grid;
  justify-items: center;
  text-align: center;
}

.qimen-proposal .diagram-label {
  color: color-mix(in srgb, var(--accent) 68%, var(--muted));
}

/* a touch heavier than the diagram default, so a document at this size
   still reads as a document rather than a smudge */
.qimen-proposal__sheet .dgm [data-line] {
  stroke-width: 1.15;
  stroke: color-mix(in srgb, var(--accent) 62%, transparent);
}
.qimen-proposal__sheet .dgm [data-line="accent"] {
  stroke-width: 1.35;
  stroke: color-mix(in srgb, var(--accent) 92%, transparent);
}
.qimen-proposal__sheet .dgm [data-line="ghost"] {
  stroke: color-mix(in srgb, var(--accent) 34%, transparent);
}



.qimen-band--deep {
  clip-path: circle(0% at 50% 50%);
  -webkit-clip-path: circle(0% at 50% 50%);
  grid-template-columns: minmax(230px, 0.95fr) minmax(390px, 1.45fr) minmax(230px, 0.95fr);
  gap: clamp(1rem, 2vw, 2rem);
  align-items: stretch;
}

.qimen-band__readout {
  min-width: 0;
}

.qimen-band__readout--a,
.qimen-band__readout--b { border: 0; }
.qimen-band__readout .panel__title { margin-bottom: 0.55rem; }
.qimen-band__readout .readout { gap: 0.42rem; }
.qimen-band__readout .readout__row { gap: 0.08rem; }
.qimen-band__readout .readout__key { font-size: clamp(0.44rem, 0.54vw, 0.52rem); }
.qimen-band__readout .readout__val {
  font-size: clamp(0.62rem, 0.72vw, 0.7rem);
  line-height: 1.28;
}

.qimen-band__core {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  align-items: center;
  align-self: center;
  min-width: 0;
}

.qimen-band__field {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(270px, 92%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  color: color-mix(in srgb, var(--accent) 70%, transparent);
  pointer-events: none;
}
.qimen-band__structure,
.qimen-band__caveat { position: relative; z-index: 1; }
.qimen-grid {
  position: absolute;
  inset: 0;
}
.qimen-grid svg { width: 100%; height: 100%; }
.qimen-band__field .qimen-grid {
  inset: 7%;
  z-index: 1;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--gold) 24%, transparent));
}
.qimen-band__spark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold-soft);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--gold-soft), 0 0 24px rgba(216, 174, 88, 0.68);
}
.qimen-person [data-person-line] {
  fill: none;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#qm-people-glow);
}
.qimen-person--a [data-person-line] { stroke: url(#qm-person-a); }
.qimen-person--b [data-person-line] { stroke: url(#qm-person-b); }
.qimen-person [data-person-line="soft"] { opacity: 0.5; stroke-width: 0.72; }
.qimen-person__fill { opacity: 0.14; }
.qimen-person--a .qimen-person__fill { fill: url(#qm-person-a); }
.qimen-person--b .qimen-person__fill { fill: url(#qm-person-b); }
.qimen-person__hair {
  fill: color-mix(in srgb, #62b7d4 18%, #080b0d);
  stroke: color-mix(in srgb, #62b7d4 65%, transparent);
  stroke-width: 0.65;
  filter: url(#qm-people-glow);
}
.qimen-person__hair--long {
  fill: color-mix(in srgb, #b485d4 17%, #09090d);
  stroke: color-mix(in srgb, #b485d4 68%, transparent);
}
.qimen-people__centre { fill: url(#qm-centre-glow); opacity: 0; }
.qimen-people__spark { fill: var(--gold-soft); opacity: 0; filter: url(#qm-people-glow); }

.qimen-band__structure .panel__title { margin-bottom: 0.5rem; }
.qimen-band__structure .structure-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.75rem;
}
.qimen-band__structure .structure-cell__key { font-size: clamp(0.42rem, 0.5vw, 0.48rem); }
.qimen-band__structure .structure-cell__val {
  font-size: clamp(0.58rem, 0.66vw, 0.64rem);
  line-height: 1.25;
}

.qimen-band__caveat {
  grid-column: 1 / -1;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: clamp(0.5rem, 0.6vw, 0.58rem);
  line-height: 1.35;
}

.qimen {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 1.1fr) 1fr;
  column-gap: clamp(1rem, 2vw, 2.2rem);
  row-gap: clamp(0.9rem, 1.7vw, 1.45rem);
  align-items: start;
}

.qimen > * { position: relative; z-index: 1; }

.qimen__center    { grid-column: 2;    grid-row: 1; }
.qimen__center > *:not(.qimen__field) { position: relative; z-index: 1; }
.qimen__a         { grid-column: 1;    grid-row: 1; }
.qimen__b         { grid-column: 3;    grid-row: 1; }
.qimen__structure { grid-column: 1/-1; grid-row: 2; }
.qimen__caveat    { grid-column: 1/-1; grid-row: 3; text-align: center; max-width: 68ch; margin-inline: auto; }

/* the nine palaces sit behind the conversation, never in front of copy */
.qimen__field {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(440px, 122%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  color: color-mix(in srgb, var(--accent) 70%, transparent);
}
.qimen__field svg { width: 100%; height: 100%; }

/* hairline that ties a readout panel back to the conversation */
.tether {
  position: absolute;
  top: 1.85rem;
  height: 1px;
  width: clamp(0.7rem, 2.2vw, 2.2rem);
  pointer-events: none;
}
.tether--right {
  right: calc(-1 * clamp(0.7rem, 2.2vw, 2.2rem));
  transform-origin: left center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), transparent);
}
.tether--left {
  left: calc(-1 * clamp(0.7rem, 2.2vw, 2.2rem));
  transform-origin: right center;
  background: linear-gradient(270deg, color-mix(in srgb, var(--accent) 60%, transparent), transparent);
}

.conversation {
  display: grid;
  gap: clamp(0.7rem, 1.3vw, 1.1rem);
}

/* A speaks from the left, B answers from the right */
.speaker {
  display: grid;
  justify-items: start;
  gap: 0.4rem;
  width: 100%;
  max-width: 92%;
}

.speaker__id {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.speaker--b .speaker__id { flex-direction: row-reverse; }

.speaker--b {
  justify-items: end;
  margin-left: auto;
}
.speaker--b .bubble { text-align: right; }
.speaker--a .bubble { text-align: left; }

.speaker__mark {
  width: clamp(30px, 3.4vw, 42px);
  aspect-ratio: 1;
}

.speaker__mark [data-stroke] {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 68%, transparent);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 58%, transparent));
}
.speaker__aura {
  fill: color-mix(in srgb, var(--accent) 9%, transparent);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 28%, transparent));
}
.speaker--b .speaker__mark { transform: scaleX(-1); }

.bubble {
  position: relative;
  max-width: 34ch;
  padding: 0.62rem 1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  /* opaque enough that the nine palaces read as *behind* the words */
  background: rgba(12, 14, 16, 0.86);
  backdrop-filter: blur(3px);
  font-family: var(--serif);
  font-size: clamp(0.92rem, 1.12vw, 1.04rem);
  font-weight: 300;
  line-height: 1.38;
  color: var(--text);
}

.speaker__name {
  font-size: clamp(0.53rem, 0.66vw, 0.62rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-deep);
}

.qimen__surface-note {
  text-align: center;
  margin-top: 0.6rem;
}

.qimen__structure { padding: clamp(0.9rem, 1.5vw, 1.35rem) clamp(1rem, 1.8vw, 1.6rem); }

.structure-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem 1.3rem;
}

.structure-cell { display: grid; gap: 0.15rem; }

.structure-cell__key {
  font-size: clamp(0.5rem, 0.62vw, 0.58rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 60%, var(--muted));
}

.structure-cell__val {
  font-size: clamp(0.74rem, 0.88vw, 0.83rem);
  line-height: 1.45;
  color: var(--text-dim);
}

/* --- Scene 5 — ZeRi ------------------------------------------------------ */
.zeri-band--surface .bazi-band__intro { grid-column: 1; }

.zeri-band__moment {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto auto;
  justify-items: start;
  align-items: baseline;
  gap: 0.3rem clamp(0.8rem, 2vw, 2rem);
  text-align: left;
}

.zeri-band__moment .moment__day,
.zeri-band__moment .moment__zone { text-indent: 0; }
.zeri-band__moment .moment__day { grid-column: 1; }
.zeri-band__moment .moment__date {
  grid-column: 2;
  font-size: clamp(1.35rem, 2.4vw, 2.25rem);
}
.zeri-band__moment .moment__time {
  grid-column: 3;
  font-size: clamp(2rem, 4.3vw, 3.8rem);
  white-space: nowrap;
}
.zeri-band__moment .moment__zone { grid-column: 4; margin-top: 0; }

.zeri-band--deep {
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 0.58fr) minmax(240px, 1fr);
  gap: clamp(1rem, 2.3vw, 2.4rem);
}

.zeri-band__qualities {
  min-width: 0;
  padding-inline: clamp(0.55rem, 1vw, 0.9rem);
}
.zeri-band__qualities--left { grid-column: 1; grid-row: 1; border-right: 1px solid var(--line-soft); }
.zeri-band__qualities--right { grid-column: 3; grid-row: 1; border-left: 1px solid var(--line-soft); }
.zeri-band__qualities .panel__title { margin-bottom: 0.55rem; }
.zeri-band__qualities .readout { gap: 0.46rem; }
.zeri-band__qualities .readout__row { gap: 0.08rem; }
.zeri-band__qualities .readout__key { font-size: clamp(0.44rem, 0.55vw, 0.52rem); }
.zeri-band__qualities .readout__val {
  font-size: clamp(0.63rem, 0.74vw, 0.72rem);
  line-height: 1.3;
}

.zeri-band__core {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.65rem;
  min-width: 0;
}

.zeri-band__dial {
  width: clamp(112px, 11vw, 145px);
  aspect-ratio: 1;
  opacity: 0;
  color: color-mix(in srgb, var(--accent) 74%, transparent);
}
.zeri-band__dial svg { width: 100%; height: 100%; }

.zeri-band__teaser {
  max-width: 28ch;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(0.66rem, 0.82vw, 0.78rem);
  line-height: 1.35;
  color: color-mix(in srgb, var(--accent) 62%, var(--text-dim));
}

.moment {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  text-align: center;
}

.moment__day {
  font-size: clamp(0.62rem, 0.8vw, 0.74rem);
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--muted);
  text-indent: 0.46em;
}

.moment__date {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.1vw, 2.7rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--text);
}

.moment__time {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--gold-soft);
}

.moment__zone {
  margin-top: 0.35rem;
  font-size: clamp(0.56rem, 0.7vw, 0.66rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--muted);
  text-indent: 0.4em;
}

.zeri {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(290px, 1.05fr) 1fr;
  column-gap: clamp(1.25rem, 2.6vw, 2.8rem);
  row-gap: clamp(1.4rem, 2.6vw, 2.2rem);
  align-items: center;
}

.zeri--focus .panel--deep {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background:
    radial-gradient(82% 100% at 50% 20%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%),
    rgba(12, 13, 16, 0.82);
  box-shadow: 0 22px 70px -56px color-mix(in srgb, var(--accent) 75%, transparent);
}
.zeri--focus .panel--deep .panel__title {
  color: color-mix(in srgb, var(--accent) 88%, var(--text));
}
.zeri--focus .readout__val { color: color-mix(in srgb, var(--text-dim) 88%, var(--text)); }

/* The centre floats over the middle of the grid rather than sitting in a
   track, so it contributes no height and the row is sized by the two
   readouts alone — which is what lets them fit their content and still
   match each other. The grid is symmetric (1fr / 1.05fr / 1fr), so
   centring on the container lands exactly on the middle column. */
.zeri__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 33%);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.3rem;
  padding: 0;
}
.zeri__center > *:not(.zeri__dial) { position: relative; z-index: 1; }
.zeri__center .copy { text-align: center; max-width: 32ch; margin-top: 0.9rem; }

.zeri__dial {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 132%);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}
.zeri__dial svg { width: 100%; height: 100%; }

.zeri__left  { grid-column: 1; grid-row: 1; }
.zeri__right { grid-column: 3; grid-row: 1; }

/* Both readouts fill the row, so the two panels are the same height at any
   width. Left to themselves they only matched by coincidence — the columns
   happen to wrap to the same number of lines at wide sizes, and stop doing
   so once the columns narrow. Content stays top-aligned inside. */
.zeri__left,
.zeri__right { align-self: stretch; }
.zeri__left .panel,
.zeri__right .panel { height: 100%; }

.quality-grid {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
}

/* --- Scene 6 — AI layer -------------------------------------------------- */
.ai-lede {
  max-width: 60ch;
  margin-bottom: clamp(1rem, 2.2vh, 1.6rem);
}

.ai-layout {
  display: grid;
  grid-template-columns: minmax(480px, 1.08fr) minmax(390px, 0.92fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

.venn {
  --venn-size: clamp(250px, min(27vw, 41vh), 370px);
  --venn-overlap: clamp(39px, 3.4vw, 51px);
  --venn-text-offset: clamp(20px, 2.35vw, 30px);
  --venn-span: calc(var(--venn-size) + var(--venn-size) - var(--venn-overlap) - var(--venn-overlap));
  position: relative;
  width: min(100%, var(--venn-span));
  height: var(--venn-size);
  margin-inline: auto;
  isolation: isolate;
}

.venn__circle {
  position: absolute;
  top: 0;
  width: var(--venn-size);
  height: var(--venn-size);
  flex: none;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  border-radius: 50%;
  display: grid;
  align-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(201, 169, 97, 0.075), rgba(201, 169, 97, 0.018) 56%, transparent 72%);
  box-shadow: inset 0 0 80px rgba(201, 169, 97, 0.025), 0 0 100px -65px rgba(201, 169, 97, 0.65);
}

.venn__circle--metaphysics {
  left: 0;
  justify-items: center;
}

.venn__circle--intelligence {
  right: 0;
  justify-items: center;
}

.venn__content {
  width: 54%;
  display: grid;
  gap: clamp(0.32rem, 0.55vw, 0.48rem);
  justify-items: center;
}

.venn__content--left {
  margin: 0;
  text-align: center;
  transform: translateX(calc(-1 * var(--venn-text-offset)));
}

.venn__content--right {
  margin: 0;
  text-align: center;
  transform: translateX(var(--venn-text-offset));
}

.venn__sigil {
  width: clamp(24px, 2.6vw, 34px);
  height: clamp(24px, 2.6vw, 34px);
  display: grid;
  place-items: center;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--accent) 58%, transparent);
}

.venn__sigil--cjk {
  font-size: clamp(1.15rem, 1.65vw, 1.5rem);
  letter-spacing: 0;
}

.venn__sigil--ai svg { width: 100%; height: 100%; }
.venn__sigil--ai [data-stroke] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.venn__sigil--ai [data-fill] { fill: color-mix(in srgb, var(--accent) 72%, transparent); }

.venn__label {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--text);
}

.venn__copy {
  max-width: 24ch;
  font-size: clamp(0.72rem, 0.92vw, 0.88rem);
  line-height: 1.6;
  color: var(--muted);
}

.venn__overlap {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.venn__overlap::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--venn-overlap) + var(--venn-overlap));
  height: 83%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(201, 169, 97, 0.105), rgba(201, 169, 97, 0.035) 58%, transparent 76%);
  filter: blur(2px);
  z-index: -1;
}

.sweet-spot {
  align-self: stretch;
  display: grid;
  align-content: center;
}

.sweet-spot__head {
  display: grid;
  gap: 0.35rem;
  padding-bottom: clamp(0.7rem, 1.2vh, 1rem);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
}

.sweet-spot__eyebrow {
  font-size: clamp(0.54rem, 0.65vw, 0.62rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.sweet-spot__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text);
}

.advantage-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.advantage {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: clamp(0.7rem, 1vw, 1rem);
  padding: clamp(0.55rem, 1vh, 0.8rem) 0;
  border-bottom: 1px solid var(--line-soft);
}

.advantage__index {
  padding-top: 0.1rem;
  font-family: var(--serif);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--gold) 52%, transparent);
}

.advantage__body { display: grid; gap: 0.2rem; }

.advantage__title {
  margin: 0;
  font-size: clamp(0.62rem, 0.74vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.advantage__copy {
  max-width: 58ch;
  font-size: clamp(0.64rem, 0.75vw, 0.72rem);
  line-height: 1.45;
  color: var(--muted);
}

.cta {
  margin-top: clamp(1rem, 2.4vh, 1.8rem);
  padding-top: clamp(0.9rem, 2vh, 1.5rem);
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.8rem);
  text-align: center;
}

.cta__line {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--text);
}
.cta__line em { font-style: italic; color: var(--gold-soft); }

/* --- Scene 1 — Title (v2) ------------------------------------------------
   The SHEN wordmark over the deck's name. The global atmosphere layers sit
   behind every scene already, so this adds nothing of its own. */
.title-slide {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(0.7rem, 1.8vh, 1.15rem);
  text-align: center;
  min-height: min(62vh, 520px);
}

/* letterspaced roman beside the mark, set on one baseline */
.title-slide__logo {
  display: flex;
  align-items: baseline;
  gap: clamp(0.55rem, 1.4vw, 1.05rem);
  margin-bottom: clamp(0.5rem, 1.6vh, 1rem);
}

/* the bio scene shares this lockup rather than copying it, so the two
   can never drift apart */
.title-slide__word,
.journey-mark__word {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(0.92rem, 1.5vw, 1.32rem);
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  text-transform: uppercase;
  color: var(--text);
}

.title-slide__mark,
.journey-mark__glyph {
  font-family: var(--cjk);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  letter-spacing: 0;
  line-height: 1;
  color: var(--gold-soft);
}

.title-slide__heading {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: 0.015em;
  color: var(--text);
  text-wrap: balance;
}

.title-slide__sub {
  font-size: clamp(0.6rem, 0.86vw, 0.76rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  text-indent: 0.4em;
  color: color-mix(in srgb, var(--accent) 68%, var(--text-dim));
}

.title-slide__rule {
  width: clamp(120px, 22vw, 260px);
  height: 1px;
  transform-origin: center;
  margin-top: clamp(0.3rem, 1.2vh, 0.8rem);
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent) 62%, transparent),
    transparent);
}

.title-slide__when {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.35rem 1rem;
  font-size: clamp(0.54rem, 0.78vw, 0.68rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted-deep);
  text-indent: 0.32em;
}
.title-slide__when i {
  font-style: normal;
  color: color-mix(in srgb, var(--accent) 45%, transparent);
}

@media (max-width: 620px) {
  .title-slide { min-height: min(52vh, 420px); }
  .title-slide__sub { letter-spacing: 0.3em; text-indent: 0.3em; }
  .title-slide__when { letter-spacing: 0.24em; text-indent: 0.24em; }
}

/* --- Scene 7 — The hidden advantage (v2) ---------------------------------
   Four short cards in one sweep, each opening on a hairline the way the
   lens cards and question cards do. */
.hidden-advantage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 2rem);
  /* cards stretch to a common height so the row reads as one band, and
     equal auto-rows keep that true when they wrap to 2-up and 1-up */
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.hidden-advantage__item {
  position: relative;
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding: clamp(1.1rem, 1.9vw, 1.7rem) clamp(0.9rem, 1.5vw, 1.35rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 5%, transparent) 0%,
    transparent 58%);
  overflow: hidden;
}

.hidden-advantage__edge {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--accent) 65%, transparent), transparent);
}

/* a smaller ring than the principle/lens cards — these sit in a 4-up row */
.hidden-advantage .icon-ring {
  width: clamp(48px, 4.4vw, 64px);
  margin-bottom: 0.15rem;
}

.hidden-advantage__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* --- Scene 8 — "Hacking the universe" (v2) -------------------------------
   The thesis, at a size that says it is the thesis. */
/* text carries the slide; the diagram sits beside it as evidence */
.hack-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
}

.hack-visual {
  margin: 0;
  width: 100%;
  max-width: 600px;
  justify-self: center;
}
.hack-visual svg { width: 100%; height: auto; }
/* Weights carry the argument: where you started is plain, the unaligned
   spread is barely there, and the lifted band is the only thing lit. */
.hack-visual [data-axis] [data-line] { stroke: var(--line); stroke-width: 0.8; }
.hack-visual [data-axis] [data-node] { fill: var(--muted); }

.hack-visual [data-band] { stroke: none; }
/* visible enough to be compared against — it is half the argument */
.hack-visual [data-band-base] [data-band] {
  fill: rgba(236, 232, 225, 0.05);
  stroke: rgba(236, 232, 225, 0.12);
  stroke-width: 0.6;
}
.hack-visual [data-band-lift] [data-band] {
  fill: color-mix(in srgb, var(--accent) 20%, transparent);
  stroke: color-mix(in srgb, var(--accent) 38%, transparent);
  stroke-width: 0.7;
}
.hack-visual [data-band-lift] [data-line="accent"] {
  stroke: color-mix(in srgb, var(--accent) 92%, transparent);
  stroke-width: 1.9;
  fill: none;
}

/* individual runs: thin, and none of them is the band */
.hack-visual [data-thread] {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 42%, transparent);
  stroke-width: 0.7;
  stroke-linecap: round;
}
.hack-visual [data-thread]:last-child {
  stroke: color-mix(in srgb, var(--muted) 85%, transparent);
}

.hack-visual [data-band-labels] text {
  font-size: 7.5px;
  letter-spacing: 0.18em;
  fill: var(--muted-deep);
}
.hack-visual [data-band-labels] .is-lit {
  fill: color-mix(in srgb, var(--accent) 80%, var(--text));
}

.hack {
  display: grid;
  gap: clamp(0.9rem, 2vh, 1.5rem);
}

.hack__part {
  display: grid;
  grid-template-columns: clamp(1.4rem, 2.2vw, 2rem) 1fr;
  align-items: baseline;
  gap: clamp(0.7rem, 1.4vw, 1.2rem);
}

.hack__letter {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-style: italic;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 72%, transparent);
}

.hack__text {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.9vw, 1.65rem);
  line-height: 1.34;
  letter-spacing: 0.005em;
  color: var(--text-dim);
}

.hack__qualifier {
  margin-top: clamp(1.4rem, 3vh, 2.4rem);
  padding-top: clamp(0.9rem, 1.8vh, 1.4rem);
  border-top: 1px solid var(--line-soft);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.15rem, 2.1vw, 1.85rem);
  line-height: 1.3;
  color: var(--muted);
}
.hack__qualifier em {
  font-style: italic;
  color: var(--gold-soft);
}

/* --- Scene 12 — Live Qi Men reading (v2) --------------------------------
   A holding slide that sits behind a live reading, so everything here is
   tuned to be looked past rather than at: wide soft orbs, low opacity,
   drift measured in half-minutes. The field is fixed rather than bound to
   the content box so it bleeds to the full slide; the scene's own opacity
   still hides it when the slide is off screen. The deck's global grain
   sits above this at z-index 60. */
.live-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* pulls the edges back down so the orbs read as depth, not as lamps */
.live-field::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 88% at 50% 48%, transparent 30%, rgba(0, 0, 0, 0.86) 100%);
}

.live-orb {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: var(--r);
  height: var(--r);
  margin: calc(var(--r) / -2);
  border-radius: 50%;
  /* no mix-blend-mode: the scene animates its own opacity, which would
     isolate the blend and leave the field invisible */
  background: radial-gradient(circle,
    rgba(var(--c), 0.34) 0%,
    rgba(var(--c), 0.14) 40%,
    transparent 70%);
  filter: blur(46px);
  will-change: transform;
}

.live-slide {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(0.8rem, 2vh, 1.4rem);
}

.live-slide__title {
  margin: 0;
  /* the reveal leaves clip-path: inset(0), which clips to the border box;
     at line-height 1.05 that box stops above the descenders and cuts the
     tail off the "g". The padding puts the descender back inside it. */
  padding-bottom: 0.14em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.4vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--text);
}

/* the four pillars, in the order the chart software prints them */
.live-pillars {
  display: flex;
  gap: clamp(1.3rem, 4vw, 3.2rem);
  margin-top: clamp(0.4rem, 1.4vh, 1rem);
}

.live-pillar {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}

.live-pillar__label {
  font-size: clamp(0.58rem, 0.72vw, 0.68rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.live-pillar__gz {
  font-size: clamp(1.15rem, 2vw, 1.72rem);
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--gold-soft) 78%, transparent);
}

/* the element split, and the hairline that keys the field behind it */
.live-elements {
  display: grid;
  justify-items: center;
  gap: clamp(0.55rem, 1.4vh, 0.9rem);
  margin-top: clamp(0.3rem, 1.2vh, 0.8rem);
  /* full width so the labels never wrap; only the bar is proportioned */
  width: 100%;
}

.live-bar {
  display: flex;
  width: min(520px, 72%);
  height: 3px;
  gap: 4px;
}

.live-bar__seg {
  height: 100%;
  border-radius: 1.5px;
  background: rgba(var(--t), 0.78);
  transform-origin: left center;
}

.live-element-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.3rem);
}

.live-element {
  display: flex;
  align-items: baseline;
  gap: 0.42rem;
}

.live-element__glyph {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  letter-spacing: 0;
  color: rgba(var(--t), 0.92);
}

.live-element__label {
  font-size: clamp(0.6rem, 0.76vw, 0.72rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.live-element__pct {
  font-family: var(--serif);
  font-size: clamp(0.98rem, 1.38vw, 1.26rem);
  color: rgba(var(--t), 0.96);
}

@media (prefers-reduced-motion: reduce) {
  .live-orb { filter: blur(52px); }
}

/* --- Scene 8.5 — Two paths (v2) ------------------------------------------
   Two careers held side by side at a common height, then resolved to one
   mark. The tracks borrow the hidden-advantage card treatment so the slide
   sits inside the deck's existing grammar rather than inventing a new one. */
.journey-layout {
  display: grid;
  gap: clamp(0.8rem, 1.8vw, 1.5rem);
}

.journey-tracks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2.2rem);
  /* the two paths are a pair, so they share a height whatever they hold */
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.journey-track {
  position: relative;
  padding: clamp(1rem, 1.8vw, 1.5rem) clamp(0.95rem, 1.6vw, 1.4rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 5%, transparent) 0%,
    transparent 58%);
  overflow: hidden;
}

.journey-track__edge {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--accent) 65%, transparent), transparent);
}

.journey-track__label {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.45vw, 1.28rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--text);
}

.journey-track__note {
  /* both notes hold two lines of space so the two bullet lists always
     start at the same height, whatever the copy does */
  min-height: 2.4em;
  margin: 0.34rem 0 0;
  font-size: clamp(0.66rem, 0.8vw, 0.74rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.journey-track__list {
  list-style: none;
  margin: clamp(0.75rem, 1.3vw, 1.05rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(0.45rem, 0.85vw, 0.7rem);
}

.journey-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
}

.journey-step__dot {
  width: 5px;
  height: 5px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
}

.journey-step__text {
  margin: 0;
  font-size: clamp(0.8rem, 0.98vw, 0.93rem);
  line-height: 1.5;
  color: var(--text-dim);
}

/* the convergence: two lines, one mark, one line of claim */
.journey-converge {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
}

.journey-converge__lines {
  /* height follows the viewBox aspect: a fixed height letterboxes the
     curve and it stops reading as two paths meeting */
  width: min(560px, 62%);
  height: auto;
  overflow: visible;
}

.journey-converge__lines [data-stroke] {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 62%, transparent);
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* type comes from the shared .title-slide__word / __mark rules above */
.journey-mark {
  display: flex;
  align-items: baseline;
  gap: clamp(0.55rem, 1.4vw, 1.05rem);
}

.journey-claim {
  margin: 0.2rem 0 0;
  text-align: center;
  font-size: clamp(0.84rem, 1.02vw, 0.98rem);
  line-height: 1.5;
  color: var(--text-dim);
}

.journey-claim em {
  font-style: normal;
  color: var(--accent);
}

@media (max-width: 1080px) {
  .hidden-advantage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* the diagram drops below the text rather than squeezing beside it */
  .hack-layout { grid-template-columns: 1fr; gap: clamp(1.2rem, 4vw, 2rem); }
  .hack-visual { max-width: 380px; }
  .journey-tracks { grid-template-columns: 1fr; }
  .journey-converge__lines { width: min(560px, 82%); }
}

@media (max-width: 620px) {
  .hidden-advantage { grid-template-columns: 1fr; }
}

/* --- Scene 7 — Before we test it ----------------------------------------
   The comparison is the slide, so it takes the space and the contrast:
   strong questions sit in the accent at full weight, weak ones recede to
   the muted end of the scale. */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 3.4vw, 3.4rem);
  align-items: start;
}

.compare__col {
  display: grid;
  gap: clamp(0.7rem, 1.2vw, 1rem);
  min-width: 0;
}

/* the mark sits in its own gutter, so the heading and its note stay
   flush with each other rather than the note hanging off the icon */
.compare__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 0.6rem;
  align-items: center;
}

.compare__mark  { grid-column: 1; grid-row: 1; }
.compare__label { grid-column: 2; grid-row: 1; }
.compare__note  { grid-column: 2; grid-row: 2; }

.compare__mark svg {
  width: clamp(13px, 1.15vw, 16px);
  height: auto;
  display: block;
}
.compare__mark [data-line] {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.compare__label {
  margin: 0;
  font-size: clamp(0.62rem, 0.76vw, 0.72rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.compare__note {
  font-size: clamp(0.68rem, 0.8vw, 0.76rem);
  line-height: 1.4;
  color: var(--muted);
}

.compare__rule {
  height: 1px;
  transform-origin: left center;
}

.compare__list { display: grid; gap: clamp(0.5rem, 0.95vw, 0.8rem); }

.compare__item {
  display: grid;
  grid-template-columns: 0.85rem 1fr;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  line-height: 1.35;
}

.compare__item::before {
  content: "";
  width: 0.55rem;
  height: 1px;
  transform: translateY(-0.34em);
}

/* strong: lit, full contrast */
.compare__col--strong .compare__label { color: color-mix(in srgb, var(--accent) 85%, var(--text)); }
.compare__col--strong .compare__mark [data-line] { stroke: color-mix(in srgb, var(--accent) 88%, transparent); }
.compare__col--strong .compare__rule {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 62%, transparent) 0%,
    var(--line-soft) 45%,
    transparent 100%);
}
.compare__col--strong .compare__item { color: var(--text); }
.compare__col--strong .compare__item::before {
  background: color-mix(in srgb, var(--accent) 75%, transparent);
}

/* weak: read at the same strength as the strong column — the cross, the
   heading and the unlit rule carry the distinction, so nothing has to be
   dimmed to the point of being hard to read. */
.compare__col--weak .compare__label { color: var(--muted); }
.compare__col--weak .compare__mark [data-line] { stroke: var(--muted); }
.compare__col--weak .compare__note { color: var(--muted); }
.compare__col--weak .compare__rule {
  background: linear-gradient(90deg,
    rgba(236, 232, 225, 0.22) 0%,
    var(--line-soft) 45%,
    transparent 100%);
}
.compare__col--weak .compare__item { color: var(--text); }
.compare__col--weak .compare__item::before { background: var(--muted); }

@media (max-width: 620px) {
  .compare { grid-template-columns: 1fr; gap: clamp(1.4rem, 5vw, 2rem); }
}

/* --- Scene 8 — What could we ask? ---------------------------------------
   A menu, so the cards are even and scannable rather than hierarchical. */
.ask {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
}

.ask__card {
  position: relative;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: clamp(1rem, 1.7vw, 1.5rem) clamp(0.95rem, 1.5vw, 1.35rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 5%, transparent) 0%,
    transparent 60%);
  overflow: hidden;
}

.ask__edge {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--accent) 65%, transparent), transparent);
}

.ask__category {
  margin: 0;
  font-size: clamp(0.6rem, 0.72vw, 0.68rem);
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
}

.ask__questions { display: grid; gap: 0.5rem; }

/* same marker as the question lists on the preceding slide, so the two
   read as one idea continued rather than two unrelated layouts */
.ask__question {
  display: grid;
  grid-template-columns: 0.72rem 1fr;
  align-items: baseline;
  gap: 0.62rem;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-weight: 300;
  line-height: 1.38;
  color: var(--text-dim);
}

.ask__question::before {
  content: "";
  width: 0.5rem;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 72%, transparent);
  transform: translateY(-0.34em);
}

.ask__foot { margin-top: var(--stack-3); }
.ask__foot .chip { font-family: var(--sans); text-transform: none; letter-spacing: 0.08em; }

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

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

/* ==========================================================================
   8. NAVIGATION + PROGRESS
   ========================================================================== */
.nav-zone {
  position: fixed;
  top: 0; bottom: 0;
  width: clamp(56px, 12vw, 190px);
  z-index: 3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-zone--prev { left: 0; }
.nav-zone--next { right: 0; }

.nav-btn {
  position: fixed;
  top: 50%;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  transform: translateY(-50%);
  color: var(--muted-deep);
  opacity: 0.55;
  transition: opacity 300ms ease, color 300ms ease;
}
.nav-btn:hover { opacity: 1; color: var(--gold); }
.nav-btn--prev { left: clamp(0.5rem, 1.4vw, 1.25rem); }
.nav-btn--next { right: clamp(0.5rem, 1.4vw, 1.25rem); }
.nav-btn svg { width: 13px; height: 13px; }
.nav-btn[disabled] { opacity: 0.14; pointer-events: none; }

/* The title slide carries its own wordmark, so the persistent chrome steps
   aside there — and comes back for every other scene. */
:root[data-scene="title"] .topbar {
  opacity: 0;
  pointer-events: none;
}

.topbar {
  transition: opacity 600ms ease;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.4vh, 1.7rem) var(--gutter);
  pointer-events: none;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: clamp(0.54rem, 0.66vw, 0.62rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted-deep);
}
.wordmark i {
  font-style: normal;
  font-family: var(--cjk);
  color: color-mix(in srgb, var(--gold) 50%, transparent);
  letter-spacing: 0.1em;
}

.counter {
  font-family: var(--serif);
  font-size: clamp(0.72rem, 0.88vw, 0.85rem);
  letter-spacing: 0.22em;
  color: var(--muted-deep);
}
.counter b { font-weight: 400; color: color-mix(in srgb, var(--gold) 80%, transparent); }

.progress {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 2.4vh, 1.6rem);
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 7px;
  padding: 6px;
}

.progress__seg {
  position: relative;
  width: clamp(20px, 3.2vw, 40px);
  height: 1px;
  background: rgba(236, 232, 225, 0.14);
  cursor: pointer;
  transition: background 300ms ease;
}

/* the enlarged hit area — a 1px-tall target is not clickable on its own.
   (This needs the segment NOT to be overflow:hidden, which was clipping it
   back down to the hairline; the fill is a scaleX transform and never
   overflows, so nothing needs clipping here.) */
.progress__seg::after {
  content: "";
  position: absolute;
  inset: -9px 0;
}

.progress__seg:hover { background: rgba(236, 232, 225, 0.3); }
.progress__seg:hover,
.progress__seg:focus-visible { z-index: 2; }

/* which slide am I about to open */
.progress__seg::before {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(10, 11, 13, 0.95);
  backdrop-filter: blur(4px);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);
  font-family: var(--sans);
  font-size: clamp(0.52rem, 0.64vw, 0.6rem);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.progress__seg:hover::before,
.progress__seg:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* the current slide reads in the accent so the tooltip confirms where you are */
.progress__seg[aria-current="true"]::before { color: color-mix(in srgb, var(--gold) 82%, var(--text)); }

.progress__fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--gold);
}

.progress__seg.is-done .progress__fill { transform: scaleX(1); background: rgba(201, 169, 97, 0.4); }

.hint-bar {
  position: fixed;
  left: var(--gutter);
  bottom: clamp(0.9rem, 2.2vh, 1.5rem);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  font-size: clamp(0.56rem, 0.68vw, 0.64rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-deep);
}
.hint-bar b { font-weight: 400; color: color-mix(in srgb, var(--gold) 75%, transparent); }

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .venn { --venn-overlap: clamp(39px, 3.75vw, 48px); }
  .ai-layout {
    grid-template-columns: minmax(410px, 1fr) minmax(330px, 0.9fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}

@media (max-width: 900px) {
  .reveal-stage,
  .qimen,
  .zeri {
    grid-template-columns: 1fr;
    row-gap: clamp(1.4rem, 4vw, 2.2rem);
  }

  /* stacking follows DOM order, which is already the narrative order */
  .reveal-stage > *,
  .qimen > *,
  .zeri > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .qimen__field { width: min(340px, 96%); }

  /* ZeRi stacks here, so the centre returns to normal flow — floating it
     over a middle column only makes sense while there are three columns */
  .zeri__center {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  }
  .zeri__left .panel,
  .zeri__right .panel { height: auto; }
  .zeri__dial   { width: min(330px, 96%); }
  .tether       { display: none; }

  .principles,
  .lenses {
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 5vw, 2.4rem);
  }

  .principle {
    grid-template-columns: clamp(60px, 16vw, 88px) 1fr;
    align-items: start;
    gap: clamp(1rem, 3.5vw, 1.6rem);
  }
  .principle .icon-ring { width: 100%; }
  .principle__body { grid-column: 2; }
  .principle__head { grid-column: 2; }

  .lens { padding-bottom: clamp(1.2rem, 4vw, 1.6rem); }
  .lens__ring { display: none; }

  .stage-visual { max-width: min(66vw, 280px); }

  .bazi-split {
    grid-template-rows: auto auto;
    min-height: 0;
  }
  .bazi-band {
    grid-template-columns: 1fr minmax(120px, 0.55fr);
    gap: 1rem 1.4rem;
    padding: 1.4rem 1rem;
  }
  .bazi-band__intro { grid-column: 1; }
  .bazi-band__visual { grid-column: 2; grid-row: 1 / span 2; }
  .bazi-band__detail { grid-column: 1; }
  .bazi-band__detail .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bazi-band--deep { grid-template-columns: 1fr minmax(120px, 0.55fr); }
  .bazi-band--surface { grid-template-columns: 1fr minmax(120px, 0.55fr); }
  .bazi-insight-group .facts { grid-template-columns: 1fr; }

  .bazi-split--focus .bazi-band--surface { overflow: hidden; }
  .bazi-split--focus .reveal-actions--toggle {
    bottom: 0.7rem;
    transform: translateX(-50%);
  }

  .qimen-band--surface { grid-template-columns: 1fr; }
  .qimen-person-grid {
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* content-height rows, so the proposal sits just under the speakers
       instead of being pushed to the bottom of a stretched row */
    grid-template-rows: auto auto;
    align-content: start;
    height: auto;
  }
  .qimen-person-grid .qimen-person-card--a { grid-column: 1; grid-row: 1; }
  .qimen-person-grid .qimen-person-card--b { grid-column: 2; grid-row: 1; }

  /* the speakers stay side by side here, so the proposal sits across both
     columns beneath them — still the thing on the table between the two */
  .qimen-proposal {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-rows: auto auto;
    gap: 0.4rem;
  }
  .qimen-proposal__sheet svg { height: clamp(96px, 20vw, 132px); }
  .qimen-band--deep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qimen-band__readout--a { grid-column: 1; grid-row: 1; }
  .qimen-band__readout--b { grid-column: 2; grid-row: 1; }
  .qimen-band__core { grid-column: 1 / -1; grid-row: 2; }

  .zeri-band--surface { grid-template-columns: 1fr; }
  .zeri-band--surface .bazi-band__intro,
  .zeri-band__moment { grid-column: 1; }
  .zeri-band--deep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zeri-band__qualities--left { grid-column: 1; grid-row: 1; }
  .zeri-band__qualities--right { grid-column: 2; grid-row: 1; }
  .zeri-band__core { grid-column: 1 / -1; grid-row: 2; }

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

  .synthesis { justify-content: flex-start; text-align: left; }

  .ai-layout {
    grid-template-columns: 1fr;
    gap: clamp(1.8rem, 5vw, 2.8rem);
  }
  .sweet-spot { width: min(100%, 680px); margin-inline: auto; }

  .cta { flex-direction: column; }
}

@media (max-width: 620px) {
  :root { --gutter: 1.35rem; }

  .scene:has(.qimen-split) { overflow-y: hidden; }

  .scene {
    align-items: flex-start;
    padding-top: clamp(4.2rem, 12vh, 5.5rem);
    padding-bottom: clamp(5rem, 14vh, 6rem);
  }

  .principle {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .principle .icon-ring { width: clamp(64px, 20vw, 84px); }
  .principle__body,
  .principle__head { grid-column: 1; }

  .structure-grid { grid-template-columns: 1fr; }
  .bazi-band {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem 0.75rem;
  }
  .bazi-band__intro,
  .bazi-band__visual,
  .bazi-band__detail {
    grid-column: 1;
    grid-row: auto;
  }
  .bazi-band__visual { width: min(42vw, 150px); }
  .bazi-band__detail .facts { grid-template-columns: 1fr 1fr; }
  .bazi-band--deep { grid-template-columns: 1fr; }
  .bazi-band--surface { grid-template-columns: 1fr; }
  .bazi-insight-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .bazi-insight-group .facts { grid-template-columns: 1fr; }
  .bazi-insight-group .facts li { font-size: 0.68rem; line-height: 1.4; }
  .bazi-insight-group__label { font-size: 0.57rem; letter-spacing: 0.17em; }
  .bazi-insight-group:not(:has(.bazi-insight-group__label)) { padding-top: 1.62rem; }
  .bazi-split--focus .bazi-band--deep .bazi-band__detail { padding-bottom: 6.2rem; }
  .reveal-btn--eye-toggle {
    width: 88px;
    min-width: 88px;
    height: 88px;
    min-height: 88px;
  }
  .bazi-depth-rings span:nth-child(1) { width: 48%; }
  .bazi-depth-rings span:nth-child(2) { width: 78%; }
  .bazi-depth-rings span:nth-child(3) { width: 112%; }
  .qimen-person-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  .qimen-band--surface { padding-block: 1rem 3.8rem; }
  .qimen-person-card {
    position: relative;
    display: block;
    height: 330px;
    padding: 0 0.2rem;
  }
  .qimen-person-card__portrait {
    position: absolute;
    top: 2.3rem;
    left: 50%;
    width: min(30vw, 116px);
    height: 118px;
    transform: translateX(-50%);
  }
  .qimen-person-card__content {
    position: absolute;
    top: calc(2.3rem + 118px + 0.4rem);
    left: 0;
    width: 100%;
  }
  .qimen-person-grid--surface .bubble { padding: 0.55rem 0.58rem; font-size: 0.76rem; }
  .qimen-band__readout--a,
  .qimen-band__readout--b,
  .qimen-band__core {
    grid-column: 1;
    grid-row: auto;
  }
  .qimen-band__readout--a,
  .qimen-band__readout--b { border: 0; padding-inline: 0; }
  .qimen-band__core {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .qimen-band__field { width: min(62vw, 220px); }
  .qimen-band__structure { width: 100%; }

  /* Keep the mobile Qi Men reading within the overlaid stage instead of
     turning its three desktop columns into one very tall stack. */
  .qimen-band--deep {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 330px 1fr;
    gap: 0.55rem;
    align-content: center;
    padding-block: 1rem 3.8rem;
  }
  .qimen-band__readout--a { grid-column: 1; grid-row: 1; }
  .qimen-band__readout--b { grid-column: 2; grid-row: 1; }
  .qimen-band__core {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: 1fr;
    width: 100%;
    justify-items: stretch;
  }
  .qimen-band__field { width: 100%; }
  .zeri-band__moment {
    grid-template-columns: 1fr auto;
    gap: 0.25rem 1rem;
  }
  .zeri-band__moment .moment__day,
  .zeri-band__moment .moment__date { grid-column: 1; }
  .zeri-band__moment .moment__time,
  .zeri-band__moment .moment__zone { grid-column: 2; }
  .zeri-band__moment .moment__day,
  .zeri-band__moment .moment__time { grid-row: 1; }
  .zeri-band__moment .moment__date,
  .zeri-band__moment .moment__zone { grid-row: 2; }
  .zeri-band--deep { grid-template-columns: 1fr; }
  .zeri-band__qualities--left,
  .zeri-band__qualities--right,
  .zeri-band__core {
    grid-column: 1;
    grid-row: auto;
  }
  .zeri-band__qualities--left,
  .zeri-band__qualities--right { border: 0; padding-inline: 0; }
  .zeri-band__core {
    grid-template-columns: min(34vw, 120px) 1fr;
    justify-items: start;
  }
  .zeri-band__teaser { text-align: left; }
  .venn {
    --venn-size: min(49vw, 190px);
    --venn-overlap: min(7.5vw, 29px);
    --venn-text-offset: 12px;
    width: min(100%, var(--venn-span));
    height: var(--venn-size);
  }
  .venn__circle--metaphysics {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    justify-items: center;
    align-items: center;
  }
  .venn__circle--intelligence {
    top: 0;
    left: auto;
    right: 0;
    bottom: auto;
    justify-items: center;
    align-items: center;
  }
  .venn__content { width: 56%; gap: 0.22rem; text-align: center; }
  .venn__content--left,
  .venn__content--right { margin: 0; }
  .venn__label { font-size: clamp(0.78rem, 3.2vw, 0.9rem); }
  .venn__copy { max-width: 18ch; font-size: clamp(0.54rem, 2.2vw, 0.64rem); line-height: 1.4; }
  .venn__sigil { width: 22px; height: 22px; margin-bottom: 0; }
  .venn__sigil--cjk { font-size: 1rem; }
  .venn__overlap::before {
    width: calc(var(--venn-overlap) + var(--venn-overlap));
    height: 83%;
  }
  .bubble { max-width: 100%; }

  /* the palaces stay a backdrop, not a pattern over the words */
  .qimen__field { width: min(300px, 74%); }
  .qimen__field [data-diag] { display: none; }

  .nav-zone { width: 22vw; }

  /* controls move out of the reading column and flank the progress rail */
  .nav-btn {
    top: auto;
    bottom: clamp(0.55rem, 1.8vh, 1rem);
    transform: none;
    width: 34px; height: 34px;
  }
  .nav-btn--prev { left: 0.5rem; }
  .nav-btn--next { right: 0.5rem; }

  .progress__seg { width: 13vw; max-width: 34px; }
}

/* Short desktop viewports (13" laptops, 720p projectors): the same
   composition, one density step down, so scenes still fit without scroll. */
@media (min-width: 901px) and (max-height: 880px) {
  :root {
    --stack-2: clamp(0.7rem, 1.1vw, 1.1rem);
    --stack-3: clamp(1rem, 1.9vw, 1.8rem);
    --stack-4: clamp(1.4rem, 2.8vw, 2.6rem);
  }
  .section-title      { font-size: clamp(1.85rem, 3.5vw, 2.9rem); }
  .section-title--sm  { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
  .scene              { padding-block: clamp(2.75rem, 6vh, 4rem); }
  .icon-ring          { width: clamp(62px, 6.4vw, 84px); }
  .moment__time       { font-size: clamp(2.2rem, 5vw, 4rem); }
  .zeri__center       { padding-block: clamp(1rem, 2vw, 1.8rem); }
}

/* touch devices: swipe + explicit controls only — edge zones would fight
   with scrolling, and nothing important is hover-dependent anywhere */
@media (hover: none) {
  .progress__seg::before { display: none; }
  .nav-btn  { opacity: 0.65; }
  .nav-zone { display: none; }
  .hint-bar { display: none; }
}

/* ==========================================================================
   10. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* print / export fallback — everything visible, stacked */
@media print {
  body { overflow: visible; background: #fff; }
  .scene { position: relative; opacity: 1 !important; visibility: visible !important; page-break-after: always; }
}