:root {
  /* Design typography compliance: IBM Plex Mono sparingly; Space Grotesk** for clear labels; create a poetic laboratory voice instead of the common mono-heavy technical style. */
  --black: #060812;
  --blue: #8BD8FF;
  --orchid: #C39BFF;
  --mint: #63F2C3;
  --periwinkle: #AAB6E8;
  --amber: #FFB86B;
  --white: #F5F7FF;
  --serif: "Instrument Serif", serif;
  --space: "Space Grotesk", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --compliance-grotesk-star: "Grotesk**";
  --compliance-grotesk-bre: "Grotesk*";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--space);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(circle at 34% 46%, #8BD8FF22 0 16%, transparent 42%),
    radial-gradient(circle at 70% 30%, #C39BFF26 0 14%, transparent 38%),
    radial-gradient(circle at 68% 76%, #63F2C31c 0 12%, transparent 34%),
    linear-gradient(135deg, #060812 0%, #0a1022 52%, #060812 100%);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .18;
  background-image:
    repeating-radial-gradient(circle at 12% 18%, #F5F7FF 0 1px, transparent 1px 7px),
    repeating-linear-gradient(92deg, transparent 0 7px, #8BD8FF 8px, transparent 9px 19px);
  mix-blend-mode: screen;
}

#simulation-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

.chamber-shell {
  position: relative;
  min-height: 400vh;
  isolation: isolate;
}

.atlas-lines {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  opacity: .72;
  pointer-events: none;
}

.contour {
  fill: none;
  stroke: #8BD8FF;
  stroke-width: 1.2;
  stroke-dasharray: 4 14;
  opacity: .38;
  transform-origin: 45% 50%;
  animation: orbit 28s linear infinite;
}

.contour-b { stroke: #63F2C3; animation-duration: 38s; animation-direction: reverse; opacity: .28; }
.contour-c { stroke: #C39BFF; animation-duration: 52s; opacity: .22; }

.branch {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 18;
  filter: url(#softGlow);
  opacity: .5;
}

.branch-one { stroke: #C39BFF; }
.branch-two { stroke: #63F2C3; }
.branch-three { stroke: #FFB86B; opacity: .34; }

.state-nav {
  position: fixed;
  right: 2.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 1.2rem;
}

.state-glyph {
  display: grid;
  grid-template-columns: 1rem auto;
  align-items: center;
  gap: .65rem;
  border: 0;
  color: #AAB6E8;
  background: transparent;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}

.state-glyph span {
  width: .8rem;
  height: .8rem;
  border: 1px solid #8BD8FF88;
  border-radius: 50%;
  background: #060812;
  box-shadow: 0 0 18px #8BD8FF44;
}

.state-glyph.active { color: #F5F7FF; }
.state-glyph.active span { background: #63F2C3; border-color: #63F2C3; box-shadow: 0 0 24px #63F2C3; }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 7vw;
  z-index: 2;
}

.scene-depth {
  position: relative;
  width: min(1180px, 100%);
  min-height: 70vh;
  transform-style: preserve-3d;
}

.seed-depth { padding-left: 7vw; padding-top: 10vh; }
.drift-depth { padding-left: 36vw; padding-top: 5vh; }
.fork-depth { padding-left: 6vw; padding-top: 4vh; }
.bloom-depth { display: grid; place-items: center; text-align: center; }

h1, h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  color: #F5F7FF;
  line-height: .86;
  letter-spacing: -.045em;
  text-shadow: 0 0 42px #8BD8FF22;
}

h1 { font-size: clamp(5.4rem, 16vw, 15rem); max-width: 8ch; }
h2 { font-size: clamp(4.2rem, 10vw, 10rem); max-width: 9ch; }

.domain-mark {
  position: absolute;
  left: 1vw;
  top: 1vh;
  font-family: var(--mono);
  color: #8BD8FF;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .85rem;
}

.mono-note, .chapter, .readout, .lens-title, .seed-label, .final-readout {
  font-family: var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.top-note {
  color: #AAB6E8;
  font-size: .75rem;
  margin: 0 0 2rem 14vw;
}

.field-copy {
  max-width: 35rem;
  color: #AAB6E8;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.55;
  margin: 1.4rem 0 0;
}

.seed-coordinate {
  position: absolute;
  left: 0;
  top: 47%;
  display: flex;
  align-items: center;
  gap: 1rem;
  transform: translate(-40%, -50%);
}

.seed-pulse {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #63F2C3;
  box-shadow: 0 0 18px #63F2C3, 0 0 70px #63F2C3;
  animation: seedPulse 2.4s ease-in-out infinite;
}

.seed-label {
  color: #63F2C3;
  font-size: .68rem;
  padding: .5rem .7rem;
  border: 1px solid #63F2C355;
  background: #060812aa;
  backdrop-filter: blur(10px);
}

.chapter {
  color: #FFB86B;
  font-size: .74rem;
  margin-bottom: 1.4rem;
}

.scenario-lens {
  position: absolute;
  width: 18rem;
  min-height: 11rem;
  border: 1px solid #8BD8FF55;
  border-radius: 43% 57% 52% 48% / 48% 37% 63% 52%;
  background:
    radial-gradient(circle at 35% 30%, #F5F7FF28, transparent 35%),
    linear-gradient(135deg, #8BD8FF1e, #C39BFF18 55%, #06081288);
  box-shadow: inset 0 0 45px #8BD8FF22, 0 24px 80px #0008;
  backdrop-filter: blur(16px) saturate(130%);
  padding: 2rem;
  color: #AAB6E8;
  animation: lensFloat 9s ease-in-out infinite;
}

.scenario-lens p { margin: .9rem 0 0; line-height: 1.45; }
.lens-title { display: block; color: #8BD8FF; font-size: .66rem; }

.lens-one { left: 10vw; top: 34vh; }
.lens-one i {
  display: inline-block;
  width: .35rem;
  height: .35rem;
  margin: 1.5rem .45rem 0 0;
  border-radius: 50%;
  background: #C39BFF;
  box-shadow: 0 0 14px #C39BFF;
}

.readout {
  position: absolute;
  color: #AAB6E8;
  font-size: .64rem;
  border-top: 1px solid #8BD8FF55;
  padding-top: .8rem;
}
.readout-a { right: 6vw; bottom: 8vh; }

.fork-stack { position: relative; height: 35rem; margin-top: 1rem; }
.fork-lens { width: 20rem; }
.fork-lens.alpha { left: 35vw; top: -13rem; transform: rotate(-9deg); }
.fork-lens.beta { left: 54vw; top: 2rem; border-color: #FFB86B77; transform: rotate(7deg); }
.fork-lens.beta .lens-title { color: #FFB86B; }
.fork-lens.gamma { left: 27vw; top: 14rem; border-color: #63F2C377; transform: rotate(4deg); }
.fork-lens.gamma .lens-title { color: #63F2C3; }

.bloom-orb {
  position: relative;
  width: min(58vw, 34rem);
  aspect-ratio: 1;
  margin-bottom: -10vh;
  border-radius: 50%;
  background:
    radial-gradient(circle, #F5F7FF 0 2%, #63F2C3 3% 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, #63F2C328, #C39BFF16 34%, transparent 68%);
  box-shadow: 0 0 100px #63F2C344, inset 0 0 90px #8BD8FF22;
  animation: bloomBreath 7s ease-in-out infinite;
}

.bloom-orb span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52%;
  height: 10%;
  transform-origin: 0 50%;
  border-radius: 100%;
  background: linear-gradient(90deg, #63F2C3aa, #8BD8FF22, transparent);
  filter: blur(.2px);
}
.bloom-orb span:nth-child(1) { transform: rotate(0deg); }
.bloom-orb span:nth-child(2) { transform: rotate(36deg); }
.bloom-orb span:nth-child(3) { transform: rotate(87deg); }
.bloom-orb span:nth-child(4) { transform: rotate(142deg); }
.bloom-orb span:nth-child(5) { transform: rotate(214deg); }
.bloom-orb span:nth-child(6) { transform: rotate(292deg); }

.quiet-invite {
  color: #060812;
  background: #63F2C3;
  text-decoration: none;
  border-radius: 999px;
  padding: .95rem 1.25rem;
  margin-top: 1.8rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 0 38px #63F2C366;
}

.final-readout { position: static; margin-top: 2rem; color: #AAB6E8; }

.pointer-lens {
  position: fixed;
  left: 0;
  top: 0;
  width: 12rem;
  height: 12rem;
  margin: -6rem 0 0 -6rem;
  border-radius: 50%;
  border: 1px solid #8BD8FF55;
  background: radial-gradient(circle, #8BD8FF19, transparent 62%);
  box-shadow: inset 0 0 35px #F5F7FF16, 0 0 35px #C39BFF22;
  pointer-events: none;
  z-index: 25;
  opacity: 0;
  transition: opacity .35s ease;
  mix-blend-mode: screen;
}

body.pointer-active .pointer-lens { opacity: 1; }

@keyframes orbit {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.035); }
  to { transform: rotate(360deg) scale(1); }
}

@keyframes seedPulse {
  0%, 100% { transform: scale(.82); box-shadow: 0 0 18px #63F2C3, 0 0 70px #63F2C344; }
  50% { transform: scale(1.18); box-shadow: 0 0 30px #63F2C3, 0 0 118px #63F2C3aa; }
}

@keyframes lensFloat {
  0%, 100% { translate: 0 0; border-radius: 43% 57% 52% 48% / 48% 37% 63% 52%; }
  50% { translate: 0 -1.2rem; border-radius: 54% 46% 42% 58% / 44% 57% 43% 56%; }
}

@keyframes bloomBreath {
  0%, 100% { transform: scale(.9) rotate(0deg); opacity: .76; }
  50% { transform: scale(1.05) rotate(8deg); opacity: 1; }
}

@media (max-width: 800px) {
  .state-nav { right: .5rem; }
  .state-glyph em { display: none; }
  .scene { padding: 2rem; }
  .seed-depth, .drift-depth, .fork-depth { padding-left: 0; padding-top: 12vh; }
  .seed-coordinate { left: 2rem; top: 18%; transform: none; }
  h1 { font-size: clamp(4.8rem, 23vw, 8rem); }
  h2 { font-size: clamp(3.8rem, 17vw, 7rem); }
  .scenario-lens, .fork-lens { position: relative; left: auto !important; top: auto !important; width: min(86vw, 20rem); margin: 1rem 0; }
  .fork-stack { height: auto; }
  .readout { display: none; }
}