:root {
  /* Design typography terms: IBM Plex Mono sparingly for variable names. Interactions should feel like manipulating a simulation. Space Grotesk** with generous tracking and slightly compressed line-height. */
  --void: #070A12;
  --clay: #FF9F7A;
  --violet: #8C6CFF;
  --fog: #D9F3FF;
  --ember: #FF4D5E;
  --acid: #D6FF5C;
  --teal: #2FE6C8;
  --progress: 0;
  --wind-x: 0px;
  --wind-y: 0px;
  --fork: 0;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 600vh;
  color: var(--fog);
  font-family: "Space Grotesk", Inter, sans-serif;
  background:
    radial-gradient(circle at 74% 18%, rgba(140, 108, 255, .2), transparent 31vw),
    radial-gradient(circle at 18% 84%, rgba(255, 159, 122, .16), transparent 34vw),
    linear-gradient(180deg, #070A12 0%, #0a1020 48%, #070A12 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    radial-gradient(circle, rgba(217, 243, 255, .55) 0 1px, transparent 1.7px),
    linear-gradient(115deg, transparent 0 47%, rgba(47, 230, 200, .08) 49%, transparent 51%);
  background-size: 72px 72px, 100% 100%;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
}

.void-field, .weather-veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.void-field {
  background:
    radial-gradient(circle at calc(50% + var(--wind-x)) calc(44% + var(--wind-y)), rgba(47, 230, 200, .12), transparent 25vw),
    radial-gradient(circle at 52% 64%, rgba(255, 159, 122, .12), transparent 19vw);
  filter: blur(1px);
}

.weather-veil {
  opacity: calc(.18 + var(--progress) * .35);
  background:
    repeating-linear-gradient(105deg, transparent 0 28px, rgba(47, 230, 200, .1) 29px 31px, transparent 32px 72px),
    radial-gradient(ellipse at 62% 38%, rgba(140, 108, 255, .22), transparent 42%);
  transform: translate3d(calc(var(--wind-x) * .08), calc(var(--wind-y) * .08), 0);
}

.brand-lockup {
  position: fixed;
  top: 24px;
  left: 28px;
  z-index: 8;
  display: grid;
  gap: 4px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.domain { font-weight: 700; color: var(--fog); font-size: 15px; }
.seed-id { font-family: "IBM Plex Mono", monospace; color: rgba(217, 243, 255, .55); font-size: 10px; letter-spacing: .06em; }

.chapter-flags {
  position: fixed;
  right: 22px;
  top: 50%;
  z-index: 9;
  transform: translateY(-50%);
  display: grid;
  gap: 13px;
}

.chapter-flags a {
  color: var(--fog);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  opacity: .52;
  writing-mode: vertical-rl;
  padding: 7px 4px;
  border-left: 1px solid rgba(217, 243, 255, .22);
  transition: color .35s, opacity .35s, border-color .35s, transform .35s;
}

.chapter-flags a.active, .chapter-flags a:hover {
  color: var(--acid);
  opacity: 1;
  border-color: var(--acid);
  transform: translateX(-5px);
}

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

.terrarium-stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  perspective: 1200px;
  pointer-events: none;
}

.scenario-terrarium {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(72vw, 940px);
  height: min(58vw, 650px);
  transform-style: preserve-3d;
  transform:
    translate(-50%, -50%)
    translate3d(calc((var(--progress) - .45) * -18vw), calc(sin(var(--progress)) * 1px), 0)
    rotateX(calc(58deg - var(--progress) * 17deg))
    rotateZ(calc(-35deg + var(--progress) * 72deg));
  transition: filter .7s;
  filter: saturate(calc(1 + var(--progress) * .35));
}

.world-shadow {
  position: absolute;
  inset: 18% 10% 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(47, 230, 200, .18), rgba(7, 10, 18, .0) 63%);
  transform: translateZ(-160px) scale(1.08);
  filter: blur(22px);
}

.island {
  position: absolute;
  inset: 12% 7% 15%;
  transform-style: preserve-3d;
  animation: islandBreath 7s ease-in-out infinite;
}

.terrain-face {
  position: absolute;
  inset: 0;
  border-radius: 48% 52% 44% 56% / 45% 42% 58% 55%;
}

.terrain-under {
  transform: translateZ(-56px) translate(18px, 26px);
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 77, 94, .24), transparent 20%),
    linear-gradient(135deg, #9f4f4d, #432937 55%, #171425);
  box-shadow: 0 35px 70px rgba(0, 0, 0, .45), inset 0 -25px 55px rgba(255, 159, 122, .2);
}

.terrain-top {
  overflow: hidden;
  transform: translateZ(18px);
  background:
    radial-gradient(circle at 73% 31%, rgba(47, 230, 200, .42), transparent 15%),
    radial-gradient(circle at 30% 70%, rgba(255, 77, 94, .32), transparent 13%),
    radial-gradient(circle at 50% 48%, rgba(214, 255, 92, .15), transparent 10%),
    linear-gradient(135deg, rgba(255, 159, 122, .96), rgba(122, 78, 112, .95) 54%, rgba(45, 29, 60, .98));
  border: 1px solid rgba(217, 243, 255, .22);
  box-shadow: inset 0 0 0 2px rgba(7, 10, 18, .14), inset -18px -22px 50px rgba(7, 10, 18, .35), 0 0 42px rgba(47, 230, 200, .15);
}

.contours, .agent-trails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.contours path {
  fill: none;
  stroke: rgba(217, 243, 255, .52);
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.contours .reservoir {
  fill: rgba(47, 230, 200, .22);
  stroke: var(--teal);
  filter: drop-shadow(0 0 9px rgba(47, 230, 200, .65));
}

.contours .scar { stroke: var(--ember); fill: rgba(255, 77, 94, .17); }

.agent-trails path {
  fill: none;
  stroke: var(--teal);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 18;
  filter: drop-shadow(0 0 8px rgba(47, 230, 200, .95));
  animation: trailWalk 3.8s linear infinite;
}

.agent-trails path:nth-child(2) { stroke: var(--acid); animation-duration: 5.2s; opacity: .82; }
.agent-trails path:nth-child(3) { stroke: var(--violet); animation-duration: 6.6s; opacity: .76; }

.probability-pool {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(217, 243, 255, .85), rgba(47, 230, 200, .36) 28%, rgba(140, 108, 255, .18) 62%, transparent 70%);
  filter: blur(.2px) drop-shadow(0 0 15px rgba(47, 230, 200, .5));
  animation: poolPulse 5s ease-in-out infinite;
}

.pool-one { width: 22%; height: 16%; left: 57%; top: 23%; }
.pool-two { width: 14%; height: 10%; left: 29%; top: 50%; animation-delay: -2s; }

.agent {
  position: absolute;
  width: 13px;
  height: 22px;
  border-radius: 65% 35% 70% 35%;
  background: var(--acid);
  box-shadow: 0 0 14px var(--acid);
  transform: rotate(-28deg);
  animation: agentBob 1.8s ease-in-out infinite;
}
.a1 { left: 22%; top: 65%; } .a2 { left: 43%; top: 49%; animation-delay: -.4s; }
.a3 { left: 62%; top: 39%; animation-delay: -.8s; } .a4 { left: 73%; top: 55%; animation-delay: -1.2s; }
.a5 { left: 34%; top: 30%; animation-delay: -.2s; } .a6 { left: 53%; top: 68%; animation-delay: -1.5s; }

.mini-flag, .failure-fossil {
  position: absolute;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--void);
  background: var(--acid);
  padding: 6px 8px;
  border-radius: 2px 9px 9px 2px;
  box-shadow: -9px 9px 0 rgba(7, 10, 18, .16);
}
.flag-one { left: 18%; top: 28%; } .flag-two { right: 18%; top: 48%; background: var(--violet); color: var(--fog); }
.failure-fossil { opacity: calc(.2 + var(--progress)); background: var(--ember); color: var(--fog); border-radius: 14px 4px 14px 4px; }
.fossil-one { left: 20%; bottom: 22%; transform: rotate(15deg); }
.fossil-two { right: 31%; bottom: 26%; font-size: 18px; padding: 5px 10px; }

.mini-elevator {
  position: absolute;
  left: 48%;
  top: 24%;
  width: 24px;
  height: 88px;
  border: 1px solid rgba(217, 243, 255, .4);
  border-radius: 12px;
}
.mini-elevator i { position: absolute; left: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--teal); animation: elevator 3s ease-in-out infinite; }

.ripple {
  position: absolute;
  width: 80px;
  height: 42px;
  border: 2px solid rgba(214, 255, 92, .5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: ripple 4s ease-out infinite;
}
.r1 { left: 47%; top: 52%; } .r2 { left: 66%; top: 35%; animation-delay: -1.4s; } .r3 { left: 28%; top: 62%; animation-delay: -2.6s; }

.acrylic-sheet {
  position: absolute;
  inset: 19% 15%;
  border: 1px solid rgba(140, 108, 255, .42);
  border-radius: 36% 64% 43% 57%;
  background: linear-gradient(135deg, rgba(140, 108, 255, .15), rgba(217, 243, 255, .04));
  transform: translateZ(115px) translateX(calc(var(--fork) * -80px)) rotate(8deg);
  opacity: calc(var(--fork) * .75);
  box-shadow: 0 0 32px rgba(140, 108, 255, .28);
}
.sheet-b { transform: translateZ(160px) translateX(calc(var(--fork) * 96px)) rotate(-12deg); border-color: rgba(47, 230, 200, .42); }

.storm-cloud {
  position: absolute;
  right: 12%;
  top: 5%;
  z-index: 4;
  transform: translateZ(210px) translate3d(calc(var(--wind-x) * .2), calc(var(--wind-y) * .2), 0);
  opacity: calc(.15 + var(--progress) * .82);
  font-family: "IBM Plex Mono", monospace;
  color: var(--fog);
  font-size: clamp(32px, 5vw, 68px);
  text-shadow: 0 0 18px var(--violet);
  animation: cloudSquirm 4s ease-in-out infinite;
}
.storm-cloud span { display: inline-block; color: var(--violet); }
.storm-cloud span:nth-child(2) { color: var(--acid); transform: translateY(-.3em); }

.loupe {
  position: fixed;
  width: 158px;
  height: 158px;
  border-radius: 50%;
  left: 62%;
  top: 48%;
  z-index: 6;
  opacity: calc(.18 + var(--progress) * .65);
  background: radial-gradient(circle at 35% 35%, rgba(217, 243, 255, .42), rgba(217, 243, 255, .08) 48%, rgba(47, 230, 200, .08) 68%, transparent 69%);
  border: 1px solid rgba(217, 243, 255, .52);
  box-shadow: 0 0 0 7px rgba(217, 243, 255, .05), 0 0 35px rgba(47, 230, 200, .25);
  display: grid;
  place-items: center;
  transform: translate(calc(var(--wind-x) * .12), calc(var(--wind-y) * .12));
  pointer-events: none;
}
.loupe span { font-family: "IBM Plex Mono", monospace; font-size: 10px; text-align: center; color: var(--void); background: rgba(217, 243, 255, .74); padding: 7px 9px; border-radius: 10px; }

.chamber {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  z-index: 5;
  padding: 9vh 8vw;
}

.scene-copy {
  width: min(520px, 43vw);
  transform: translateY(calc((1 - var(--local, 0)) * 35px));
  opacity: .96;
}
.left-copy { justify-self: start; } .right-copy { justify-self: end; text-align: right; }
.high-copy { align-self: start; margin-top: 9vh; } .low-copy { align-self: end; margin-bottom: 10vh; }
.center-copy { justify-self: center; text-align: center; width: min(680px, 74vw); margin-top: -23vh; }

.kicker {
  margin: 0 0 18px;
  color: var(--acid);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: clamp(46px, 7vw, 112px);
  line-height: .86;
  letter-spacing: -.055em;
  color: var(--fog);
  text-shadow: 0 0 30px rgba(140, 108, 255, .18);
}
h2 { font-size: clamp(38px, 5.4vw, 86px); }

.law {
  font-family: "Fraunces", serif;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.22;
  color: rgba(217, 243, 255, .78);
  margin: 25px 0 0;
}

.rule-card, .lab-control, .export-artifact, .fork-handle {
  position: absolute;
  z-index: 7;
  font-family: "IBM Plex Mono", monospace;
  color: var(--fog);
  background: rgba(7, 10, 18, .62);
  border: 1px solid rgba(217, 243, 255, .24);
  box-shadow: 0 20px 80px rgba(0, 0, 0, .25), inset 0 0 28px rgba(47, 230, 200, .06);
  backdrop-filter: blur(16px);
}
.rule-card { display: grid; gap: 9px; padding: 18px; min-width: 230px; border-radius: 22px 22px 6px 22px; }
.rule-card b { color: var(--acid); font-size: 16px; } .rule-card span { font-size: 12px; opacity: .75; }
.right-card { right: 14vw; bottom: 18vh; } .storm-card { left: 12vw; bottom: 12vh; border-color: rgba(140, 108, 255, .48); }
.ember-card { right: 12vw; top: 18vh; border-color: rgba(255, 77, 94, .55); }

.lab-control { left: 9vw; top: 17vh; padding: 17px; border-radius: 8px 24px 24px 24px; min-width: 260px; }
.lab-control span { color: var(--teal); display: block; margin-bottom: 14px; }
.lab-control code { color: rgba(217, 243, 255, .62); }
.strange-slider { height: 12px; background: linear-gradient(90deg, var(--teal), var(--violet), var(--acid)); border-radius: 20px; margin-bottom: 13px; }
.strange-slider i { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--fog); transform: translate(130px, -11px); box-shadow: 0 0 20px var(--teal); }

.fork-handle {
  left: calc(50% - 90px + var(--fork) * 110px);
  top: 18vh;
  width: 180px;
  padding: 13px 18px;
  border-radius: 999px;
  text-align: center;
  cursor: ew-resize;
  pointer-events: auto;
  border-color: var(--violet);
  color: var(--acid);
  user-select: none;
}

.export-artifact {
  left: 50%;
  bottom: 12vh;
  transform: translateX(-50%);
  width: min(520px, 82vw);
  padding: 24px;
  border-radius: 16px;
  display: grid;
  gap: 8px;
  text-align: center;
  background: linear-gradient(135deg, rgba(217, 243, 255, .18), rgba(47, 230, 200, .12), rgba(140, 108, 255, .18));
  border-color: rgba(217, 243, 255, .56);
  box-shadow: 0 0 55px rgba(47, 230, 200, .24), inset 0 0 35px rgba(217, 243, 255, .08);
}
.export-artifact span { color: var(--acid); letter-spacing: .18em; font-size: 12px; }
.export-artifact b { font-family: "Space Grotesk", sans-serif; font-size: clamp(24px, 4vw, 46px); }
.export-artifact code { color: rgba(217, 243, 255, .7); }

body.state-seed .scenario-terrarium { filter: saturate(1) brightness(.9); }
body.state-agents .agent { animation-duration: .95s; }
body.state-agents .agent-trails path { stroke-dasharray: 4 10; }
body.state-storm .weather-veil { opacity: .74; }
body.state-storm .storm-cloud { opacity: 1; }
body.state-fork { --fork: .75; }
body.state-failure .failure-fossil { opacity: 1; box-shadow: 0 0 24px rgba(255, 77, 94, .75); }
body.state-failure .terrain-top { background-blend-mode: screen, normal; }
body.state-export .scenario-terrarium { filter: brightness(1.28) saturate(1.2); }

@keyframes islandBreath { 0%, 100% { transform: translateZ(0) scale(1); } 50% { transform: translateZ(18px) scale(1.018); } }
@keyframes trailWalk { to { stroke-dashoffset: -104; } }
@keyframes poolPulse { 0%,100% { transform: scale(1); opacity: .68; } 50% { transform: scale(1.12); opacity: .96; } }
@keyframes agentBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes elevator { 0%,100% { top: 6px; } 50% { top: 66px; } }
@keyframes ripple { 0% { scale: .3; opacity: .85; } 100% { scale: 2.2; opacity: 0; } }
@keyframes cloudSquirm { 0%,100% { letter-spacing: -.05em; } 50% { letter-spacing: .16em; } }

@media (max-width: 860px) {
  .scenario-terrarium { width: 110vw; height: 80vw; left: 48%; top: 49%; }
  .scene-copy, .center-copy { width: 78vw; text-align: left; justify-self: start; }
  .right-copy { text-align: left; justify-self: start; }
  .rule-card, .lab-control { max-width: 250px; }
  .right-card, .storm-card, .ember-card { left: 8vw; right: auto; bottom: 8vh; top: auto; }
  .chapter-flags { display: none; }
  .brand-lockup { left: 18px; top: 18px; }
}