:root {
  /* Design typography excerpt tokens: Space Grotesk* Grotesk** for explanatory copy */
  --stage-black: #070910;
  --observatory-blue: #101C3A;
  --violet: #8A5CFF;
  --aurora: #47F6B4;
  --amber: #F0B35A;
  --vellum: #F4E8CC;
  --coral: #FF6B5F;
  --glass: #9FE9FF;
  --scroll: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--vellum);
  background: radial-gradient(circle at 70% 10%, rgba(138, 92, 255, .18), transparent 28%), linear-gradient(180deg, var(--stage-black), #090d18 35%, var(--observatory-blue) 78%, var(--stage-black));
  font-family: "Space Grotesk", sans-serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .18;
  background-image: radial-gradient(circle, rgba(244,232,204,.55) 0 1px, transparent 1px), radial-gradient(circle, rgba(159,233,255,.3) 0 1px, transparent 1px);
  background-size: 31px 29px, 47px 53px;
  mix-blend-mode: screen;
}

.cursor-light {
  position: fixed;
  width: 34vw;
  height: 34vw;
  left: -20vw;
  top: -20vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(159,233,255,.11), transparent 62%);
  pointer-events: none;
  z-index: 1;
  transform: translate3d(var(--mx, 50vw), var(--my, 50vh), 0);
}

.stage-nav {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 15px;
  z-index: 20;
  font-family: "Spline Sans Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.stage-nav a { color: rgba(244,232,204,.54); text-decoration: none; display: flex; gap: 10px; align-items: center; }
.stage-nav span { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle, var(--amber), #6d4216); box-shadow: 0 0 14px rgba(240,179,90,.4); opacity: .45; }
.stage-nav a.active { color: var(--vellum); }
.stage-nav a.active span { opacity: 1; box-shadow: 0 0 22px var(--amber); }

.room {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(38px, 6vw, 82px);
  border-bottom: 1px solid rgba(159,233,255,.11);
  isolation: isolate;
}
.room::before {
  content: "";
  position: absolute;
  inset: 7vh 6vw;
  border: 1px solid rgba(159,233,255,.13);
  background: linear-gradient(135deg, rgba(159,233,255,.04), transparent 45%, rgba(240,179,90,.035));
  transform: rotate(calc((var(--scroll) - .5) * 2deg));
  z-index: -1;
}
.room-mark, .mono, .coordinate, .annotation { font-family: "Spline Sans Mono", monospace; }
.room-mark { color: var(--amber); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
h1, h2 { font-family: "Instrument Serif", serif; font-weight: 400; margin: 0; line-height: .86; }
h1 { font-size: clamp(82px, 17vw, 245px); letter-spacing: -.055em; text-shadow: 0 0 44px rgba(159,233,255,.12); }
h2 { font-size: clamp(60px, 12vw, 160px); max-width: 790px; color: var(--vellum); }
p { line-height: 1.45; }

.seed-title { position: absolute; left: 9vw; top: 13vh; z-index: 3; }
.pretitle { margin: 0 0 8px; color: var(--glass); font-size: 15px; letter-spacing: .2em; text-transform: uppercase; }
.stage-floor { position: absolute; width: min(72vw, 760px); height: min(72vw, 760px); right: 8vw; bottom: 3vh; border-radius: 50%; background: radial-gradient(circle, rgba(16,28,58,.1), rgba(7,9,16,.9) 70%); }
.chalk-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(244,232,204,.42); inset: 13%; transform: rotate(16deg); }
.ring-two { inset: 25%; border-color: rgba(159,233,255,.27); transform: rotate(-24deg); }
.coordinate { position: absolute; font-size: 11px; color: rgba(244,232,204,.58); }
.north { left: 13%; top: 25%; transform: rotate(-12deg); }
.east { right: 8%; bottom: 35%; transform: rotate(18deg); color: var(--coral); }
.glass-cube { position: absolute; width: 230px; height: 230px; left: 50%; top: 46%; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(58deg) rotateZ(45deg); animation: hoverCube 7s ease-in-out infinite; }
.cube-face { position: absolute; inset: 0; border: 1px solid rgba(159,233,255,.52); background: linear-gradient(135deg, rgba(159,233,255,.14), rgba(159,233,255,.02)); box-shadow: inset 0 0 28px rgba(159,233,255,.12); }
.cube-top { transform: translateZ(80px); }
.cube-left { transform: rotateY(90deg) translateZ(115px); }
.cube-right { transform: rotateX(90deg) translateZ(115px); }
.seed-core { position: absolute; width: 34px; height: 34px; left: 98px; top: 98px; border-radius: 50%; background: var(--aurora); box-shadow: 0 0 28px var(--aurora), 0 0 70px var(--violet); transform: translateZ(104px); }
.waiting-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--glass); box-shadow: 0 0 13px var(--glass); transform: translateZ(105px); opacity: .65; }
.d1 { left: 42px; top: 80px; } .d2 { right: 50px; top: 62px; } .d3 { left: 118px; bottom: 45px; } .d4 { right: 80px; bottom: 92px; }
body.awake .waiting-dot { animation: agentWake 3.8s ease-in-out infinite; }
.diegetic-button { position: absolute; left: 12vw; bottom: 14vh; border: 1px solid rgba(240,179,90,.7); color: var(--stage-black); background: var(--amber); padding: 14px 22px; border-radius: 999px; font: 600 13px "Space Grotesk"; text-transform: uppercase; letter-spacing: .12em; cursor: pointer; }
.orbit-note { position: absolute; width: 260px; color: rgba(244,232,204,.78); border-left: 1px solid var(--amber); padding-left: 18px; }
.note-a { right: 12vw; top: 18vh; transform: rotate(7deg); }
.note-b { left: 15vw; top: 57vh; color: var(--glass); font-size: 12px; transform: rotate(-8deg); }

.agents-room h2 { position: absolute; left: 7vw; top: 16vh; z-index: 4; }
.agent-observatory { position: absolute; width: min(78vw, 860px); height: min(78vw, 860px); right: 6vw; bottom: -8vh; border-radius: 50%; background: radial-gradient(circle, rgba(71,246,180,.09), transparent 58%); }
#agentCanvas { width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(159,233,255,.6)); }
.probability-cloud { position: absolute; border-radius: 50%; filter: blur(24px); opacity: .45; animation: breathe 9s ease-in-out infinite; }
.cloud-one { inset: 18% 30% 36% 10%; background: var(--violet); }
.cloud-two { inset: 43% 6% 18% 36%; background: var(--aurora); animation-delay: -4s; }
.vellum-ribbon { position: absolute; width: 300px; padding: 18px 22px; color: var(--observatory-blue); background: rgba(244,232,204,.82); border: 1px solid rgba(240,179,90,.55); border-radius: 50% 34% 47% 38%; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.ribbon-one { left: 2%; top: 30%; transform: rotate(-13deg); }
.ribbon-two { right: 4%; bottom: 27%; transform: rotate(10deg); font-size: 11px; }
.edge-copy { position: absolute; left: 8vw; bottom: 11vh; width: 340px; color: rgba(244,232,204,.72); font-size: 18px; }

.city-room h2 { margin-left: 8vw; margin-top: 9vh; }
.city-maquette { position: absolute; width: min(75vw, 880px); height: 500px; left: 50%; top: 54%; transform: translate(-50%, -50%) rotateX(57deg) rotateZ(-31deg); transform-style: preserve-3d; }
.future-frame { position: absolute; inset: 6%; border: 1px solid rgba(159,233,255,.38); background: rgba(159,233,255,.04); box-shadow: inset 0 0 45px rgba(159,233,255,.08); }
.frame-back { transform: translate3d(-55px,-35px,-65px); border-color: rgba(138,92,255,.45); }
.frame-mid { transform: translate3d(0,0,0); }
.frame-front { transform: translate3d(58px,45px,70px); border-color: rgba(71,246,180,.45); }
.block { position: absolute; width: 72px; height: 88px; background: linear-gradient(140deg, rgba(244,232,204,.92), rgba(240,179,90,.44)); border: 1px solid rgba(244,232,204,.55); transform: translateZ(34px); box-shadow: 18px 18px 0 rgba(16,28,58,.32); }
.b1{left:16%;top:19%}.b2{left:31%;top:15%;height:120px}.b3{left:50%;top:20%;width:95px}.b4{left:67%;top:16%;height:105px}.b5{left:22%;top:55%;width:105px}.b6{left:44%;top:58%;height:74px}.b7{left:61%;top:50%;width:120px}.b8{left:76%;top:60%;height:84px}
.road { position: absolute; height: 16px; width: 74%; left: 13%; top: 47%; background: rgba(7,9,16,.75); border-top: 1px solid rgba(244,232,204,.25); border-bottom: 1px solid rgba(244,232,204,.2); transform: translateZ(38px); }
.road-two { transform: translateZ(39px) rotate(90deg); width: 52%; left: 24%; }
.bridge { position: absolute; width: 260px; height: 34px; left: 38%; top: 40%; border: 1px solid var(--glass); background: rgba(159,233,255,.18); transform: translateZ(75px) rotate(24deg); }
.train { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 17px var(--coral); transform: translateZ(90px); animation: trainMove 6s linear infinite; }
.train-two { animation-delay: -3s; background: var(--aurora); box-shadow: 0 0 17px var(--aurora); }
.pin-string { position: absolute; height: 1px; background: rgba(240,179,90,.55); transform-origin: left; }
.pin-string span { position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }
.string-a { width: 31vw; left: 9vw; top: 32vh; transform: rotate(14deg); }
.string-b { width: 38vw; right: 10vw; bottom: 24vh; transform: rotate(-19deg); }
.fork-copy { position: absolute; right: 10vw; top: 19vh; width: 330px; color: rgba(244,232,204,.75); }
.city-anno { position: absolute; left: 10vw; bottom: 12vh; color: var(--glass); font-size: 12px; }

.theater-room h2 { position: absolute; right: 7vw; top: 11vh; text-align: right; }
.curtain-system { position: absolute; width: min(82vw, 970px); height: 56vh; left: 8vw; bottom: 10vh; border: 1px solid rgba(240,179,90,.2); overflow: hidden; background: radial-gradient(ellipse at 50% 80%, rgba(240,179,90,.17), transparent 45%); }
.curtain { position: absolute; top: 0; bottom: 0; width: 50%; background: repeating-linear-gradient(90deg, rgba(255,107,95,.78), rgba(255,107,95,.55) 20px, rgba(16,28,58,.7) 43px); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); z-index: 3; }
.curtain-left { left: 0; } .curtain-right { right: 0; }
.theater-room.revealed .curtain-left { transform: translateX(-86%) skewY(-4deg); }
.theater-room.revealed .curtain-right { transform: translateX(86%) skewY(4deg); }
.spotlight { position: absolute; width: 55%; height: 100%; left: 22%; top: 0; background: radial-gradient(ellipse at 50% 78%, rgba(240,179,90,.42), transparent 42%), linear-gradient(100deg, transparent 15%, rgba(244,232,204,.12), transparent 76%); clip-path: polygon(38% 0, 62% 0, 88% 100%, 8% 100%); }
.pulley { position: absolute; top: 32px; width: 46px; height: 46px; border: 3px solid var(--amber); border-radius: 50%; box-shadow: 0 0 20px rgba(240,179,90,.25); }
.p1{left:16%}.p2{left:45%}.p3{right:17%}.rope{position:absolute;top:76px;width:1px;height:54%;background:rgba(244,232,204,.52)}.r1{left:calc(16% + 23px)}.r2{left:calc(45% + 23px)}.r3{right:calc(17% + 23px)}
.cue-card { position: absolute; padding: 13px 18px; background: rgba(244,232,204,.9); color: var(--observatory-blue); border: 1px solid var(--amber); font-family: "Spline Sans Mono", monospace; font-size: 12px; text-transform: uppercase; }
.cue-one{left:10%;bottom:18%}.cue-two{left:39%;top:42%}.cue-three{right:10%;bottom:25%}
.cause-lines { position: absolute; inset: 0; }
.cause-lines path { fill: none; stroke: var(--aurora); stroke-width: 2; stroke-dasharray: 9 12; opacity: .78; animation: dash 8s linear infinite; }
.theater-copy { position: absolute; left: 10vw; top: 16vh; width: 320px; color: rgba(244,232,204,.72); }

.return-room { min-height: 105vh; }
.return-room h2 { position: absolute; left: 8vw; top: 13vh; }
.observation-desk { position: absolute; width: min(76vw, 930px); height: 54vh; left: 50%; top: 55%; transform: translate(-50%, -50%); border-radius: 32px; background: linear-gradient(145deg, rgba(244,232,204,.13), rgba(16,28,58,.72)); border: 1px solid rgba(244,232,204,.26); box-shadow: 0 45px 120px rgba(0,0,0,.45); }
.desk-paper { position: absolute; width: 260px; min-height: 92px; padding: 18px; background: rgba(244,232,204,.86); color: var(--observatory-blue); box-shadow: 0 22px 48px rgba(0,0,0,.24); transform: rotate(var(--r)); }
.paper-one { --r: -8deg; left: 8%; top: 18%; }
.paper-two { --r: 6deg; right: 10%; top: 16%; }
.paper-three { --r: -2deg; left: 34%; bottom: 12%; font-size: 12px; }
.aperture { position: absolute; left: 50%; top: 46%; width: 210px; height: 210px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--glass); background: radial-gradient(circle, var(--glass), rgba(138,92,255,.44) 38%, transparent 68%); box-shadow: 0 0 54px rgba(159,233,255,.42), inset 0 0 35px rgba(7,9,16,.7); animation: aperturePulse 5s ease-in-out infinite; }
.aperture span { position: absolute; inset: 35%; border-radius: 50%; background: var(--stage-black); box-shadow: inset 0 0 25px var(--observatory-blue); }
.return-statement { position: absolute; left: 9vw; bottom: 16vh; width: 420px; font-family: "Instrument Serif", serif; font-size: clamp(30px, 4vw, 58px); line-height: 1; }
.final-invitation { position: absolute; right: 12vw; bottom: 17vh; color: var(--stage-black); background: var(--aurora); text-decoration: none; padding: 15px 23px; border-radius: 999px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; font-size: 12px; box-shadow: 0 0 28px rgba(71,246,180,.28); }

@keyframes hoverCube { 0%,100%{ margin-top: 0; } 50%{ margin-top: -28px; } }
@keyframes agentWake { 0%,100%{ opacity:.55; transform: translateZ(105px) scale(1); } 50%{ opacity:1; transform: translateZ(105px) scale(1.9); } }
@keyframes breathe { 0%,100%{ transform: scale(.9) rotate(0); } 50%{ transform: scale(1.15) rotate(8deg); } }
@keyframes trainMove { 0%{ left: 17%; top: 48%; } 50%{ left: 77%; top: 48%; } 51%{ left: 49%; top: 24%; } 100%{ left: 49%; top: 78%; } }
@keyframes dash { to { stroke-dashoffset: -168; } }
@keyframes aperturePulse { 0%,100%{ transform: translate(-50%, -50%) scale(.94); } 50%{ transform: translate(-50%, -50%) scale(1.05); } }

@media (max-width: 760px) {
  .stage-nav { right: 10px; font-size: 0; }
  .room { padding: 28px; }
  .stage-floor, .agent-observatory { width: 92vw; height: 92vw; right: -20vw; bottom: 6vh; }
  .seed-title, .agents-room h2, .city-room h2, .theater-room h2, .return-room h2 { left: 28px; right: auto; top: 12vh; text-align: left; margin: 0; }
  .orbit-note, .edge-copy, .fork-copy, .theater-copy { width: 72vw; left: 28px; right: auto; top: auto; bottom: 8vh; }
  .city-maquette { width: 110vw; left: 48%; }
  .vellum-ribbon { width: 230px; }
  .observation-desk { width: 88vw; }
  .desk-paper { width: 210px; }
  .return-statement { left: 28px; width: 78vw; }
  .final-invitation { right: 28px; }
}