:root {
  --void: #08080f;
  --deep-void: #0d0d12;
  --charcoal: #16161f;
  --neon-cyan: #00f0ff;
  --neon-magenta: #ff2ded;
  --phosphor: #39ff7e;
  --sage: #4a6b5a;
  --bone: #e8e0d4;
  --amber: #ffb800;
  --grid-gap: 6px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Typography compliance note: IBM Plex Mono against Commissioner's variable boldness creates a whisper-versus-shout dynamic that distinguishes "simulation data" from "human narrative." IBM Plex Mono" (Google Fonts Interaction Patterns:** IntersectionObserver` toggling CSS classes that animate `grid-column` IntersectionObserver` with `threshold: [0 */

* { box-sizing: border-box; }

html { background: var(--void); scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--bone);
  font-family: "Commissioner", Inter, system-ui, sans-serif;
  font-weight: 350;
  line-height: 1.75;
  letter-spacing: 0.005em;
  background:
    radial-gradient(circle at 50% 12%, rgba(0, 240, 255, 0.12), transparent 26rem),
    linear-gradient(180deg, var(--void), var(--deep-void) 42%, var(--void));
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(0,240,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,45,237,0.06) 1px, transparent 1px);
  background-size: 7.5vw 80px;
  mask-image: linear-gradient(180deg, black, transparent 88%);
  z-index: 0;
}

.simulation { position: relative; z-index: 1; }

.chapter {
  position: relative;
  min-height: 100vh;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  background: var(--void);
}

.genesis { display: grid; place-items: center; min-height: 100vh; overflow: hidden; }
.emergence { min-height: 150vh; }
.roots { min-height: 120vh; }
.breach { min-height: 80vh; padding-inline: 0; display: grid; place-items: center; }
.convergence { min-height: 120vh; padding-bottom: 24vh; }

.void-glow {
  position: absolute;
  width: 68vmax;
  height: 68vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,240,255,0.16), rgba(255,45,237,0.06) 42%, transparent 70%);
  filter: blur(18px);
  animation: slowOrbit 18s linear infinite;
}

.grid-field {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(80px, auto);
  gap: var(--grid-gap);
  min-height: calc(100vh - 3rem);
  background: var(--deep-void);
  position: sticky;
  top: 2vh;
}

.sim-block {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 2rem);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.035), transparent 44%),
    var(--charcoal);
  border: 1px solid rgba(0, 240, 255, 0.15);
  min-height: 80px;
  box-shadow: inset 0 0 0 1px rgba(255, 45, 237, 0.035);
  transition:
    grid-column 0.8s var(--ease-out),
    grid-row 0.8s var(--ease-out),
    transform 0.24s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    opacity 0.7s ease;
  animation: borderGlow 4s ease-in-out infinite;
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
}

.sim-block::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background:
    repeating-linear-gradient(33deg, transparent 0 11px, rgba(57,255,126,0.18) 12px, transparent 13px),
    repeating-linear-gradient(111deg, transparent 0 17px, rgba(255,45,237,0.14) 18px, transparent 20px);
  mix-blend-mode: screen;
}

.sim-block > * { position: relative; z-index: 1; }
.sim-block:hover { border-color: rgba(0, 240, 255, 0.72); box-shadow: 0 0 60px rgba(0, 240, 255, 0.08); }
.texture::before { opacity: 0.36; }

.genesis-block {
  width: min(96vw, 1220px);
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-image: linear-gradient(135deg, #00f0ff 0%, #ff2ded 50%, #39ff7e 100%) 1;
  background:
    radial-gradient(circle at 50% 58%, rgba(0, 240, 255, 0.13), transparent 28rem),
    linear-gradient(180deg, rgba(22,22,31,0.95), rgba(8,8,15,0.96));
}

.mono, .label {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 0.85em;
  letter-spacing: 0.06em;
  font-weight: 300;
  color: var(--sage);
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2 {
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-variation-settings: 'wght' var(--resolved-weight, 100);
  transition: font-variation-settings 600ms ease, opacity 600ms ease, transform 600ms var(--ease-out);
}
h3 { font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.1; color: var(--neon-cyan); }
p { font-size: clamp(0.95rem, 1.1vw, 1.15rem); }

.gradient-title {
  display: inline-block;
  background: linear-gradient(135deg, #00f0ff 0%, #ff2ded 50%, #39ff7e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(0,240,255,0.18));
}
.domain-name { font-family: "IBM Plex Mono", "Commissioner", monospace; margin-bottom: 1rem; }
.aphorism { max-width: 760px; font-size: clamp(1.25rem, 2.2vw, 2rem); font-weight: 300; color: var(--bone); }

.emergence-grid { margin-top: 10vh; }
.block-wide { grid-column: 1 / span 7; grid-row: 1 / span 3; }
.block-tall { grid-column: 8 / span 2; grid-row: 1 / span 5; }
.block-square { grid-column: 10 / span 3; grid-row: 1 / span 3; display: grid; place-items: center; text-align: center; }
.block-vertical { grid-column: 1 / span 3; grid-row: 4 / span 4; }
.block-small { grid-column: 4 / span 3; grid-row: 4 / span 2; }
.block-long { grid-column: 7 / span 6; grid-row: 6 / span 2; }
.block-root { grid-column: 4 / span 3; grid-row: 6 / span 2; }

.root-grid { --grid-gap: 12px; margin-top: 7vh; min-height: 94vh; }
.root-network { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.root-network path { fill: none; stroke: var(--neon-cyan); stroke-width: 2; stroke-linecap: round; opacity: 0.36; filter: drop-shadow(0 0 8px rgba(0,240,255,0.45)); stroke-dasharray: 900; stroke-dashoffset: 900; animation: rootDraw 6s ease forwards, rootPulse 3.8s ease-in-out infinite; }
.root-anchor { grid-column: 4 / span 6; grid-row: 1 / span 3; z-index: 1; }
.root-node { z-index: 1; }
.root-node.a { grid-column: 1 / span 3; grid-row: 3 / span 3; }
.root-node.b { grid-column: 10 / span 3; grid-row: 3 / span 3; }
.root-node.c { grid-column: 3 / span 4; grid-row: 6 / span 3; }
.root-node.d { grid-column: 7 / span 4; grid-row: 6 / span 3; }

.breach-panorama {
  width: 100%;
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8vw;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(100deg, rgba(0,240,255,0.28), rgba(255,45,237,0.34), rgba(57,255,126,0.24), rgba(255,184,0,0.18)),
    radial-gradient(circle at 20% 80%, var(--deep-void), transparent 32%),
    var(--charcoal);
  background-size: 260% 260%, 100% 100%, 100% 100%;
  animation: breachShift 11s ease-in-out infinite;
}
.breach-panorama h2 { font-weight: 100; color: var(--bone); max-width: 1000px; --resolved-weight: 100; }

.convergence-grid { margin-top: 8vh; animation: syncPulse 2.8s ease-in-out infinite; }
.final-statement { grid-column: 1 / span 7; grid-row: 1 / span 4; }
.final-tree { grid-column: 8 / span 3; grid-row: 1 / span 4; }
.final-tree.second { grid-column: 11 / span 2; grid-row: 1 / span 6; }
.final-cell { grid-column: span 3; grid-row: span 2; }
.final-cell.wide { grid-column: 4 / span 4; grid-row: 5 / span 2; }

.tree-bed { position: absolute; left: 0; right: auto; bottom: 0; width: min(42vw, 480px); height: 42%; pointer-events: none; }
.tree-bed.mirrored { left: auto; right: 0; transform: scaleX(-1); }
.tree-bed.compact, .tree-bed.grown { position: relative; width: 100%; height: 100%; min-height: 260px; }
.fractal-tree { width: 100%; height: 100%; overflow: visible; }
.fractal-tree path { fill: none; stroke: var(--phosphor); stroke-linecap: round; opacity: 0.82; filter: drop-shadow(0 0 8px rgba(57,255,126,0.55)); stroke-dasharray: var(--dash, 260); stroke-dashoffset: var(--dash, 260); animation: treeGrow 3.6s var(--ease-out) forwards; }

.mini-orbit { width: 160px; aspect-ratio: 1; border: 1px solid rgba(0,240,255,0.25); border-radius: 50%; position: relative; animation: slowOrbit 10s linear infinite; }
.mini-orbit span { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 20px currentColor; }
.mini-orbit span:nth-child(1) { top: 10px; left: 72px; color: var(--neon-cyan); }
.mini-orbit span:nth-child(2) { right: 18px; bottom: 32px; color: var(--neon-magenta); background: var(--neon-magenta); }
.mini-orbit span:nth-child(3) { left: 20px; bottom: 38px; color: var(--phosphor); background: var(--phosphor); }

.pollen-field, .breach-pollen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pollen-field i, .breach-pollen i {
  position: absolute;
  bottom: -12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber);
  animation: pollenRise 7s linear infinite;
}
.pollen-field i:nth-child(1), .breach-pollen i:nth-child(1) { left: 12%; animation-delay: -1s; }
.pollen-field i:nth-child(2), .breach-pollen i:nth-child(2) { left: 28%; animation-delay: -3s; }
.pollen-field i:nth-child(3), .breach-pollen i:nth-child(3) { left: 45%; animation-delay: -5s; }
.pollen-field i:nth-child(4), .breach-pollen i:nth-child(4) { left: 62%; animation-delay: -2s; }
.pollen-field i:nth-child(5), .breach-pollen i:nth-child(5) { left: 78%; animation-delay: -4s; }
.pollen-field i:nth-child(6), .breach-pollen i:nth-child(6) { left: 90%; animation-delay: -6s; }
.breach-pollen i:nth-child(n+7) { left: calc(8% * var(--n, 7)); animation-duration: 9s; }

.resolve { opacity: 0.35; }
.resolve.in-view { opacity: 1; }
.resolve.in-view h1, .resolve.in-view h2, .resolve.in-view h3 { --resolved-weight: var(--target-weight, 800); transform: translateY(0); opacity: 1; }
.resolve h1, .resolve h2, .resolve h3 { transform: translateY(18px); opacity: 0.58; }
.sim-block.in-view { border-color: rgba(57,255,126,0.28); }

.terminal-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 28vh; background: linear-gradient(transparent, var(--void)); pointer-events: none; }

@keyframes borderGlow { 0%, 100% { border-color: rgba(0,240,255,0.15); } 50% { border-color: rgba(255,45,237,0.28); } }
@keyframes slowOrbit { to { transform: rotate(360deg); } }
@keyframes treeGrow { to { stroke-dashoffset: 0; } }
@keyframes rootDraw { to { stroke-dashoffset: 0; } }
@keyframes rootPulse { 50% { opacity: 0.68; } }
@keyframes pollenRise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-70vh) translateX(28px); opacity: 0; } }
@keyframes breachShift { 0%,100% { background-position: 0% 50%, 0 0, 0 0; } 50% { background-position: 100% 50%, 0 0, 0 0; } }
@keyframes syncPulse { 50% { filter: drop-shadow(0 0 16px rgba(255,45,237,0.15)); } }

@media (max-width: 760px) {
  .chapter { padding: 0.5rem; }
  .grid-field { display: flex; flex-direction: column; position: relative; top: 0; min-height: auto; }
  .sim-block { min-height: 220px; }
  .genesis-block { min-height: 94vh; }
  .tree-bed { width: 70vw; height: 34%; }
  .root-network { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}