:root {
  --void: #050713;
  --glass-blue: #101B35;
  --cyan: #4DF6FF;
  --violet: #8B7CFF;
  --parchment: #EAE7D8;
  --green: #A8FF8F;
  --ember: #FF9F5A;
  --glass-white: #F7FBFF;
  --scene: 0;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

/* IBM Plex Mono is used very sparingly for simulation timestamps and coordinates. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--parchment);
  font-family: "Geist", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(77, 246, 255, .16), transparent 18rem),
    radial-gradient(circle at 18% 12%, rgba(139, 124, 255, .19), transparent 34rem),
    radial-gradient(circle at 84% 78%, rgba(255, 159, 90, .1), transparent 28rem),
    linear-gradient(115deg, #050713 0%, #101B35 50%, #050713 100%);
  z-index: -3;
}

.observatory-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .36;
  z-index: 6;
  background-image:
    linear-gradient(rgba(247, 251, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 251, 255, .025) 1px, transparent 1px),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(247, 251, 255, .035) 35px 36px);
  background-size: 72px 72px, 72px 72px, 520px 520px;
  mix-blend-mode: screen;
}

.cursor-lens {
  position: fixed;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(247, 251, 255, .16);
  transform: translate(-50%, -50%);
  left: var(--mouse-x);
  top: var(--mouse-y);
  pointer-events: none;
  z-index: 7;
  background: radial-gradient(circle at 35% 30%, rgba(247,251,255,.12), rgba(77,246,255,.05) 38%, transparent 70%);
  box-shadow: inset -20px -20px 50px rgba(139, 124, 255, .1), 0 0 36px rgba(77, 246, 255, .1);
}

.run-rail {
  position: fixed;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.run-rail::before {
  content: "";
  position: absolute;
  top: -30px;
  bottom: -30px;
  left: 18px;
  width: 1px;
  background: linear-gradient(transparent, rgba(77, 246, 255, .45), transparent);
}

.rail-mark {
  color: rgba(234, 231, 216, .52);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  display: grid;
  grid-template-columns: 37px auto;
  align-items: center;
  transition: color .35s ease, transform .35s ease;
}

.rail-mark span {
  font-family: "IBM Plex Mono", monospace;
  width: 37px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(247, 251, 255, .14);
  border-radius: 999px;
  background: rgba(16, 27, 53, .72);
}

.rail-mark.active {
  color: var(--cyan);
  transform: translateX(8px);
}

.rail-mark.active span {
  border-color: rgba(77, 246, 255, .9);
  box-shadow: 0 0 18px rgba(77, 246, 255, .35);
}

.simulation-run { position: relative; }

.chamber {
  position: relative;
  min-height: 100vh;
  padding: 9vh 8vw 9vh 12vw;
  overflow: hidden;
  isolation: isolate;
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 6vh 5vw;
  border-radius: 50%;
  border: 1px solid rgba(247, 251, 255, .09);
  transform: rotate(-12deg) scaleX(1.25);
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(77, 246, 255, .035);
}

.wordmark {
  position: absolute;
  left: 10vw;
  top: 8vh;
  font-family: "Instrument Serif", serif;
  font-size: clamp(78px, 15vw, 230px);
  color: rgba(234, 231, 216, .09);
  letter-spacing: -.055em;
  z-index: -1;
  filter: blur(.2px);
}

.section-title {
  font-family: "Instrument Serif", serif;
  font-size: clamp(58px, 10vw, 150px);
  line-height: .86;
  letter-spacing: -.045em;
  color: rgba(234, 231, 216, .92);
  max-width: 760px;
  position: relative;
  z-index: 2;
}

.section-title em { color: var(--cyan); font-style: italic; }
.chamber-stress .section-title em { color: var(--ember); }
.chamber-fork .section-title em { color: var(--violet); }
.chamber-replay .section-title em { color: var(--green); }

.chamber-label, .lab-note, .calibration-copy, .cascade-text, .fork-note, .archive-copy, .glass-caption {
  border: 1px solid rgba(247, 251, 255, .14);
  background: linear-gradient(135deg, rgba(16, 27, 53, .58), rgba(5, 7, 19, .32));
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(247, 251, 255, .12), 0 24px 70px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
}

.chamber-label {
  position: absolute;
  max-width: 330px;
  padding: 22px;
  z-index: 4;
}

.top-left { left: 12vw; top: 29vh; }
.bottom-right { right: 8vw; bottom: 15vh; }
.right-note { right: 10vw; top: 27vh; position: absolute; padding: 18px 24px; color: rgba(234,231,216,.7); }

.mono {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.chamber-label strong {
  font-family: "Instrument Serif", serif;
  font-size: 30px;
  font-weight: 400;
}

p { color: rgba(234, 231, 216, .72); line-height: 1.55; font-weight: 300; }

.specimen-stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(62vw, 720px);
  height: min(62vw, 720px);
  transform: translate(calc(-50% + var(--stage-x, 0px)), calc(-50% + var(--stage-y, 0px))) scale(var(--stage-scale, 1));
  z-index: 1;
  pointer-events: none;
  transition: filter .6s ease;
}

.projection-wall {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 246, 255, .1), rgba(139, 124, 255, .07) 45%, transparent 72%);
  filter: blur(20px);
}

.orb-shell {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  border: 1px solid rgba(247, 251, 255, .34);
  background:
    radial-gradient(circle at 35% 28%, rgba(247, 251, 255, .42), transparent 18%),
    radial-gradient(circle at 48% 54%, rgba(77, 246, 255, .22), rgba(139, 124, 255, .13) 43%, rgba(16, 27, 53, .2) 70%, transparent 72%);
  box-shadow: inset 20px 26px 80px rgba(247, 251, 255, .1), inset -30px -30px 90px rgba(77, 246, 255, .12), 0 0 70px rgba(77, 246, 255, .2);
  overflow: hidden;
}

.orb-highlight, .orb-core {
  position: absolute;
  border-radius: 50%;
}
.orb-highlight { inset: 9% 18% 50% 18%; background: radial-gradient(ellipse, rgba(247,251,255,.32), transparent 68%); transform: rotate(-18deg); }
.orb-core { width: 28%; height: 28%; left: 36%; top: 36%; background: radial-gradient(circle, rgba(168,255,143,.5), rgba(77,246,255,.18), transparent 70%); animation: pulseCore 5s ease-in-out infinite; }

.orbit {
  position: absolute;
  border: 1px solid rgba(77, 246, 255, .24);
  border-radius: 50%;
  inset: 13%;
  animation: rotateOrbit 18s linear infinite;
}
.orbit::after { content: ""; position: absolute; top: 8%; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); }
.orbit-two { inset: 6%; transform: rotate(62deg) scaleX(1.22); border-color: rgba(139, 124, 255, .24); animation-duration: 27s; animation-direction: reverse; }
.orbit-three { inset: 24%; transform: rotate(-28deg) scaleX(1.45); border-color: rgba(247, 251, 255, .16); animation-duration: 34s; }

.agent {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 16px var(--green);
  opacity: .9;
  animation: agentSleep 6s ease-in-out infinite;
}
.p1 { left: 43%; top: 38%; animation-delay: -.4s; }
.p2 { left: 52%; top: 47%; animation-delay: -1.2s; }
.p3 { left: 38%; top: 58%; animation-delay: -2s; }
.p4 { left: 61%; top: 37%; animation-delay: -2.8s; }
.p5 { left: 49%; top: 62%; animation-delay: -3.4s; }
.p6 { left: 58%; top: 55%; animation-delay: -4s; }

.terrain-lines, .world-roads, .archive-trails {
  position: absolute;
  inset: 18%;
  opacity: var(--terrain-opacity, .08);
  background:
    linear-gradient(30deg, transparent 45%, rgba(77,246,255,.55) 46% 47%, transparent 48%),
    linear-gradient(122deg, transparent 50%, rgba(168,255,143,.42) 51% 52%, transparent 53%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(247,251,255,.11) 28px 29px);
  clip-path: ellipse(48% 34% at 50% 54%);
}
.world-roads { opacity: var(--road-opacity, 0); transform: rotate(-18deg); background: repeating-radial-gradient(ellipse at center, transparent 0 22px, rgba(77,246,255,.42) 23px 24px); }
.archive-trails { opacity: var(--archive-opacity, 0); background: repeating-conic-gradient(from 20deg, rgba(168,255,143,.28) 0 6deg, transparent 7deg 22deg); animation: rotateOrbit 40s linear infinite; }

.anomaly-wave {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  border: 18px solid rgba(255, 159, 90, var(--stress-opacity, 0));
  filter: blur(10px);
  animation: anomaly 3.6s ease-in-out infinite;
}
.w2 { animation-delay: -1.8s; }

.future {
  position: absolute;
  width: 68%;
  height: 68%;
  border-radius: 50%;
  border: 1px solid rgba(139, 124, 255, .42);
  left: 16%;
  top: 16%;
  opacity: var(--future-opacity, 0);
  box-shadow: inset 0 0 50px rgba(139, 124, 255, .11), 0 0 28px rgba(139, 124, 255, .15);
}
.future-a { transform: translate(calc(var(--fork-spread, 0) * -1px), calc(var(--fork-spread, 0) * -.45px)) scale(.92); }
.future-b { transform: translate(calc(var(--fork-spread, 0) * .9px), calc(var(--fork-spread, 0) * -.25px)) scale(.82); }
.future-c { transform: translate(calc(var(--fork-spread, 0) * .2px), calc(var(--fork-spread, 0) * .65px)) scale(.74); }

.poetic-trigger {
  position: absolute;
  left: 50%;
  bottom: 12vh;
  transform: translateX(-50%);
  border: 1px solid rgba(77, 246, 255, .42);
  color: var(--cyan);
  background: rgba(16, 27, 53, .38);
  border-radius: 999px;
  padding: 14px 28px;
  font-family: "Geist", sans-serif;
  letter-spacing: .08em;
  text-transform: lowercase;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(77, 246, 255, .12);
}

.parameter-field {
  position: absolute;
  right: 8vw;
  top: 22vh;
  width: min(42vw, 520px);
  height: 52vh;
}
.param-tag {
  position: absolute;
  border: 1px solid rgba(247, 251, 255, .18);
  background: rgba(16, 27, 53, .52);
  color: var(--parchment);
  border-radius: 999px;
  padding: 12px 18px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.param-tag:hover, .param-tag.perturbed { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 32px rgba(77, 246, 255, .24); }
.param-tag:nth-child(1) { left: 3%; top: 12%; }
.param-tag:nth-child(2) { right: 5%; top: 25%; }
.param-tag:nth-child(3) { left: 19%; bottom: 28%; }
.param-tag:nth-child(4) { right: 14%; bottom: 10%; }

.diagonal-note { position: absolute; left: 15vw; bottom: 17vh; max-width: 360px; padding: 24px; transform: rotate(-7deg); }
.calibration-copy { position: absolute; left: 44vw; bottom: 10vh; max-width: 390px; padding: 24px; }

.terrain-map {
  position: absolute;
  left: 15vw;
  bottom: 12vh;
  width: 36vw;
  height: 28vh;
  border-radius: 50%;
  border: 1px solid rgba(77, 246, 255, .23);
  transform: rotate(-10deg);
  background: radial-gradient(ellipse, rgba(16,27,53,.6), transparent 70%);
}
.terrain-map span { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: drawLine 4s ease-in-out infinite; }
.terrain-map span:nth-child(1) { left: 12%; top: 30%; width: 68%; transform: rotate(16deg); }
.terrain-map span:nth-child(2) { left: 20%; top: 56%; width: 58%; transform: rotate(-24deg); animation-delay: -1s; }
.terrain-map span:nth-child(3) { left: 35%; top: 22%; width: 42%; transform: rotate(74deg); animation-delay: -2s; }
.terrain-map span:nth-child(4) { left: 8%; top: 70%; width: 76%; transform: rotate(4deg); animation-delay: -3s; }

.floating-annotation {
  position: absolute;
  color: rgba(234, 231, 216, .72);
  border-bottom: 1px solid rgba(77, 246, 255, .45);
  padding-bottom: 8px;
  font-size: 14px;
}
.a1 { right: 21vw; top: 30vh; }
.a2 { right: 10vw; top: 48vh; }
.a3 { left: 24vw; top: 38vh; }

.warning-bloom {
  position: absolute;
  display: grid;
  place-items: center;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  color: var(--ember);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  background: radial-gradient(circle, rgba(255,159,90,.3), rgba(255,159,90,.07) 48%, transparent 70%);
  animation: bloom 4s ease-in-out infinite;
}
.bloom-one { right: 18vw; top: 25vh; }
.bloom-two { left: 21vw; bottom: 18vh; animation-delay: -1.5s; }
.bloom-three { right: 35vw; bottom: 22vh; animation-delay: -2.6s; }
.cascade-text { position: absolute; right: 9vw; bottom: 13vh; max-width: 450px; padding: 26px; }

.branch-field { position: absolute; inset: 20vh 8vw 12vh 28vw; }
.branch {
  position: absolute;
  left: 8%;
  top: 42%;
  width: 62%;
  height: 1px;
  background: linear-gradient(90deg, rgba(139,124,255,.9), transparent);
  transform-origin: left center;
  box-shadow: 0 0 20px rgba(139, 124, 255, .55);
}
.branch::after { content: ""; position: absolute; right: 0; top: -7px; width: 15px; height: 15px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 22px var(--violet); }
.branch span { position: absolute; right: 3%; top: -32px; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: rgba(234,231,216,.75); }
.b1 { transform: rotate(-27deg); }
.b2 { transform: rotate(-7deg); width: 72%; }
.b3 { transform: rotate(18deg); width: 66%; }
.b4 { transform: rotate(38deg); width: 54%; }
.fork-note { position: absolute; left: 15vw; bottom: 14vh; max-width: 430px; padding: 25px; }

.archive-table {
  position: absolute;
  inset: 18vh 10vw 10vh 16vw;
  border-radius: 50%;
  border: 1px solid rgba(168, 255, 143, .26);
  background: radial-gradient(ellipse at center, rgba(168,255,143,.08), rgba(16,27,53,.12), transparent 70%);
}
.archive-ring {
  position: absolute;
  left: 14%;
  top: 18%;
  width: 32vw;
  height: 32vw;
  max-width: 430px;
  max-height: 430px;
  border-radius: 50%;
  border: 1px solid rgba(168, 255, 143, .5);
  background: repeating-conic-gradient(from 40deg, rgba(168,255,143,.22) 0 4deg, transparent 5deg 20deg), radial-gradient(circle, rgba(247,251,255,.14), transparent 68%);
  animation: rotateOrbit 36s linear infinite;
}
.archive-copy { position: absolute; right: 6%; top: 28%; width: min(42vw, 520px); padding: 32px; }
.archive-copy h2 { font-family: "Instrument Serif", serif; font-size: clamp(38px, 5vw, 72px); line-height: .92; font-weight: 400; margin: 0; color: var(--parchment); }
.quiet-link { display: inline-block; color: var(--green); text-decoration: none; border-bottom: 1px solid rgba(168,255,143,.5); padding-bottom: 5px; margin-top: 10px; }

body.scene-1 { --stage-x: 160px; --stage-y: -10px; --stage-scale: .78; --terrain-opacity: .32; }
body.scene-2 { --stage-x: -190px; --stage-y: 95px; --stage-scale: .88; --terrain-opacity: .7; --road-opacity: .62; }
body.scene-3 { --stage-x: 130px; --stage-y: 40px; --stage-scale: .95; --terrain-opacity: .55; --road-opacity: .45; --stress-opacity: .44; }
body.scene-4 { --stage-x: -70px; --stage-y: -20px; --stage-scale: .74; --future-opacity: .72; --fork-spread: 170; --terrain-opacity: .35; }
body.scene-5 { --stage-x: -270px; --stage-y: 80px; --stage-scale: .55; --archive-opacity: .65; --future-opacity: .18; --fork-spread: 0; --terrain-opacity: .22; }

body.scene-2 .agent { animation-name: agentRun; }
body.scene-3 .agent { background: var(--ember); box-shadow: 0 0 18px var(--ember); animation-name: agentScatter; }
body.scene-4 .orb-shell { box-shadow: inset 20px 26px 80px rgba(247, 251, 255, .1), 0 0 80px rgba(139, 124, 255, .35); }
body.scene-5 .orb-shell { box-shadow: inset 20px 26px 80px rgba(247, 251, 255, .12), 0 0 70px rgba(168, 255, 143, .28); }
body.perturbing .orb-shell { animation: perturb .8s ease; }

@keyframes rotateOrbit { to { rotate: 360deg; } }
@keyframes pulseCore { 50% { transform: scale(1.28); opacity: .65; } }
@keyframes agentSleep { 50% { transform: translate(10px, -8px); } }
@keyframes agentRun { 50% { transform: translate(62px, -30px) scale(.75); } }
@keyframes agentScatter { 50% { transform: translate(-54px, 42px) scale(1.2); } }
@keyframes anomaly { 0% { transform: scale(.35); opacity: 0; } 45% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes drawLine { 0%, 100% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 0 0 0); } }
@keyframes bloom { 50% { transform: scale(1.18); filter: blur(.6px); } }
@keyframes perturb { 30% { transform: scale(1.04) skewX(2deg); } 70% { transform: scale(.98) skewY(-2deg); } }

@media (max-width: 760px) {
  .run-rail { left: 10px; gap: 10px; }
  .rail-mark { font-size: 0; grid-template-columns: 28px; }
  .rail-mark span { width: 28px; height: 20px; font-size: 10px; }
  .chamber { padding-left: 54px; padding-right: 22px; }
  .specimen-stage { width: 118vw; height: 118vw; }
  .chamber-label, .calibration-copy, .cascade-text, .fork-note, .archive-copy, .diagonal-note { position: relative; left: auto; right: auto; top: auto; bottom: auto; max-width: none; margin-top: 28px; transform: none; }
  .parameter-field, .branch-field, .archive-table { position: relative; inset: auto; width: 100%; height: 45vh; margin-top: 24px; }
  .archive-ring { width: 62vw; height: 62vw; left: 6%; }
  .floating-annotation, .warning-bloom, .right-note { display: none; }
  body.scene-1, body.scene-2, body.scene-3, body.scene-4, body.scene-5 { --stage-x: 80px; --stage-y: 180px; --stage-scale: .55; }
}