:root {
    /* Typography compliance: Space Grotesk* Grotesk** precise; IBM Plex Sans* Sans** interface labels; IBM Plex Mono only in tiny quantities for coordinates and timestamps. */
    --observatory-black: #061018;
    --vacuum-blue: #0B2A3D;
    --simulation-cyan: #00D7FF;
    --probability-violet: #6C5CE7;
    --acid-lichen: #D7FF5A;
    --chalk-ivory: #F6F1E8;
    --anomaly-pink: #FF5DA2;
    --space: "Space Grotesk", sans-serif;
    --news: "Newsreader", serif;
    --plex: "IBM Plex Sans", sans-serif;
    --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--observatory-black);
    color: var(--chalk-ivory);
    font-family: var(--plex);
    overflow-x: hidden;
}

.observatory-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: .18;
    background-image: radial-gradient(circle at 18% 28%, rgba(0, 215, 255, .18), transparent 26%), radial-gradient(circle at 78% 12%, rgba(108, 92, 231, .16), transparent 25%), linear-gradient(120deg, rgba(246, 241, 232, .03), transparent 35%, rgba(255, 93, 162, .03));
    mix-blend-mode: screen;
}

.simulation-field {
    position: fixed;
    left: 0;
    top: 50%;
    width: 100vw;
    height: 32vh;
    z-index: 1;
    opacity: .24;
    transform: translateY(-50%) rotate(-2deg);
    pointer-events: none;
}

.field-branch { fill: none; stroke-width: 1.4; stroke-dasharray: 13 18; animation: fieldDrift 18s linear infinite; }
.field-branch.cyan { stroke: #00D7FF; }
.field-branch.violet { stroke: #6C5CE7; animation-duration: 21s; }
.field-branch.pink { stroke: #FF5DA2; animation-duration: 24s; }

.possible-worlds-atrium { position: relative; z-index: 2; }

.room {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    border-top: 1px solid rgba(246, 241, 232, .08);
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(0, 215, 255, .08), transparent 26%), linear-gradient(145deg, #061018 0%, #061018 50%, #0B2A3D 160%);
}

.seed-state { min-height: 100vh; background: radial-gradient(circle at 70% 45%, rgba(0, 215, 255, .11), transparent 26%), radial-gradient(circle at 25% 75%, rgba(255, 93, 162, .08), transparent 24%), #061018; }

.wordmark {
    position: absolute;
    top: 11vh;
    left: 8vw;
    font-family: var(--space);
    font-size: clamp(3rem, 9vw, 9.5rem);
    letter-spacing: -.08em;
    color: #F6F1E8;
    text-shadow: 0 0 26px rgba(0, 215, 255, .18);
}

.specimen-label, .coordinate-tag {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(246, 241, 232, .76);
    background: rgba(11, 42, 61, .56);
    border: 1px solid rgba(0, 215, 255, .28);
    padding: .7rem .9rem;
    backdrop-filter: blur(8px);
}

.label-top { position: absolute; top: 5vh; right: 7vw; }
.label-corner { position: absolute; top: 13vh; left: 7vw; transform: rotate(-3deg); }
.label-bottom { position: absolute; bottom: 9vh; left: 10vw; }
.coordinate-tag { position: absolute; right: 8vw; bottom: 10vh; color: #D7FF5A; border-color: rgba(215, 255, 90, .35); }

.orbit-note {
    position: absolute;
    left: 12vw;
    bottom: 16vh;
    max-width: 360px;
    transform: rotate(-2deg);
}

.orbit-note span { font-family: var(--plex); color: #00D7FF; text-transform: uppercase; letter-spacing: .17em; font-size: .78rem; }
.orbit-note p { margin: .7rem 0 0; font-family: var(--news); font-size: clamp(1.5rem, 3vw, 3rem); line-height: .95; color: #F6F1E8; }
.margin-field { position: absolute; top: 48vh; left: 4vw; width: 150px; font-family: var(--news); color: rgba(246, 241, 232, .62); line-height: 1.25; }

.world-cube {
    position: absolute;
    width: min(45vw, 560px);
    aspect-ratio: 1;
    right: 9vw;
    top: 25vh;
    border: 1px solid rgba(0, 215, 255, .65);
    transform: perspective(900px) rotateX(58deg) rotateZ(-28deg);
    box-shadow: 0 0 50px rgba(0, 215, 255, .14), inset 0 0 44px rgba(0, 215, 255, .1);
    background: linear-gradient(135deg, rgba(0, 215, 255, .08), rgba(108, 92, 231, .04));
}

.cube-face { position: absolute; inset: 9%; border: 1px solid rgba(246, 241, 232, .18); }
.face-back { transform: translate(-7%, -7%); border-color: rgba(108, 92, 231, .45); }
.face-front { transform: translate(7%, 7%); border-color: rgba(0, 215, 255, .5); }
.cube-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 215, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 215, 255, .12) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle, black 25%, transparent 72%); }
.seed-core { position: absolute; width: 34px; height: 34px; left: calc(50% - 17px); top: calc(50% - 17px); border-radius: 50%; background: #D7FF5A; box-shadow: 0 0 22px #D7FF5A, 0 0 80px rgba(215, 255, 90, .45); animation: seedPulse 2.6s ease-in-out infinite; }
.seed-orbit { position: absolute; inset: 35%; border: 1px dashed rgba(255, 93, 162, .6); border-radius: 50%; animation: rotateOrbit 9s linear infinite; }
.orbit-two { inset: 28%; border-color: rgba(0, 215, 255, .48); animation-duration: 13s; animation-direction: reverse; }
.particle-rain { position: absolute; inset: 12%; background-image: radial-gradient(circle, #00D7FF 0 2px, transparent 2.4px), radial-gradient(circle, #FF5DA2 0 1.5px, transparent 2px); background-size: 42px 54px, 67px 58px; animation: particleFall 6s linear infinite; opacity: .55; }
.cube-caption { position: absolute; right: -12%; bottom: -12%; width: 210px; font-family: var(--news); color: rgba(246, 241, 232, .7); transform: rotate(28deg); }

.chapter-title, .theater-rail h1 {
    font-family: var(--space);
    font-size: clamp(3.6rem, 8.5vw, 10rem);
    line-height: .82;
    letter-spacing: -.07em;
    color: #F6F1E8;
}

.branching-weather { background: linear-gradient(165deg, #061018 0%, #0B2A3D 72%, #061018 100%); }
.branching-weather .chapter-title { position: absolute; right: 5vw; top: 8vh; max-width: 620px; text-align: right; }
.observer-glass { border: 1px solid rgba(0, 215, 255, .35); background: rgba(11, 42, 61, .24); box-shadow: inset 0 0 0 1px rgba(246, 241, 232, .08), 0 0 60px rgba(0, 215, 255, .08); backdrop-filter: blur(5px); }
.weather-window { position: absolute; left: 9vw; bottom: 12vh; width: 72vw; height: 58vh; transform: rotate(-4deg); overflow: hidden; }
.branch-fossil { position: absolute; inset: 4%; width: 92%; height: 92%; }
.branch-fossil path { fill: none; stroke: #F6F1E8; stroke-width: 2; opacity: .52; stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawBranch 8s ease-in-out infinite alternate; }
.branch-fossil .trunk { stroke: #00D7FF; stroke-width: 3; opacity: .82; }
.branch-fossil circle { fill: #D7FF5A; filter: drop-shadow(0 0 12px #D7FF5A); }
.weather-system { position: absolute; border-radius: 50%; border: 1px solid rgba(0, 215, 255, .3); filter: blur(.2px); animation: weatherSpin 11s linear infinite; }
.system-one { width: 160px; height: 160px; left: 22%; top: 18%; background: conic-gradient(from 90deg, transparent, rgba(0, 215, 255, .45), transparent, rgba(255, 93, 162, .36), transparent); }
.system-two { width: 230px; height: 230px; right: 13%; bottom: 12%; animation-duration: 16s; background: conic-gradient(transparent, rgba(108, 92, 231, .5), transparent, rgba(215, 255, 90, .24)); }
.system-three { width: 95px; height: 95px; left: 63%; top: 16%; animation-duration: 8s; background: conic-gradient(transparent, rgba(255, 93, 162, .7), transparent); }
.portal { position: absolute; padding: 1rem; font-family: var(--news); color: #F6F1E8; border: 1px solid rgba(246, 241, 232, .24); background: rgba(6, 16, 24, .62); }
.inset-one { left: 7%; bottom: 9%; }
.inset-two { right: 6%; top: 8%; color: #FF5DA2; }
.weather-note { position: absolute; right: 9vw; bottom: 11vh; width: 330px; font-family: var(--news); font-size: 1.45rem; line-height: 1.1; color: rgba(246, 241, 232, .83); }

.agent-theater { min-height: 115vh; background: radial-gradient(circle at 45% 55%, rgba(108, 92, 231, .15), transparent 29%), #061018; }
.theater-rail { position: absolute; left: 7vw; top: 10vh; width: 36vw; z-index: 2; }
.theater-rail p { font-family: var(--news); font-size: 1.45rem; line-height: 1.18; color: rgba(246, 241, 232, .76); }
.city-stage { position: absolute; right: -4vw; top: 25vh; width: 66vw; height: 58vh; transform: perspective(1000px) rotateX(50deg) rotateZ(8deg); overflow: hidden; }
.terrain-contours { position: absolute; inset: -15%; background: repeating-radial-gradient(ellipse at 48% 54%, transparent 0 24px, rgba(0, 215, 255, .16) 25px 27px, transparent 28px 52px); animation: contourShift 9s ease-in-out infinite alternate; }
.mini-city span { position: absolute; width: 22px; background: linear-gradient(#D7FF5A, #00D7FF); box-shadow: 0 0 18px rgba(0, 215, 255, .34); bottom: 35%; }
.mini-city span:nth-child(1) { left: 28%; height: 88px; } .mini-city span:nth-child(2) { left: 34%; height: 134px; } .mini-city span:nth-child(3) { left: 41%; height: 62px; } .mini-city span:nth-child(4) { left: 55%; height: 116px; } .mini-city span:nth-child(5) { left: 62%; height: 72px; } .mini-city span:nth-child(6) { left: 70%; height: 156px; }
.agent-dot { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #00D7FF; box-shadow: 0 0 14px #00D7FF; offset-rotate: 0deg; animation: agentWalk 14s linear infinite; }
.agent-one { offset-path: path("M80 330 C180 210 260 400 380 240 S610 160 760 300"); }
.agent-two { background: #FF5DA2; box-shadow: 0 0 14px #FF5DA2; offset-path: path("M760 120 C590 190 555 395 390 320 S150 130 65 240"); animation-duration: 18s; }
.agent-three { background: #D7FF5A; box-shadow: 0 0 14px #D7FF5A; offset-path: path("M170 120 C290 155 320 260 470 225 S620 80 790 170"); animation-duration: 11s; }
.agent-four { background: #6C5CE7; box-shadow: 0 0 14px #6C5CE7; offset-path: path("M40 430 C220 380 280 100 485 135 S630 365 840 245"); animation-duration: 20s; }
.trail { position: absolute; height: 1px; width: 44%; border-top: 2px dotted rgba(0, 215, 255, .42); transform: rotate(-18deg); left: 14%; top: 53%; }
.trail-two { border-color: rgba(255, 93, 162, .48); transform: rotate(23deg); left: 36%; top: 39%; }
.decision-point { position: absolute; right: 10%; bottom: 14%; padding: .8rem 1rem; color: #D7FF5A; border: 1px solid rgba(215, 255, 90, .45); font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; background: rgba(6, 16, 24, .68); }

.collapse-room { background: radial-gradient(circle at 60% 50%, rgba(255, 93, 162, .14), transparent 32%), linear-gradient(90deg, #0B2A3D, #061018 58%); }
.collapse-copy { position: absolute; top: 13vh; left: 8vw; width: 38vw; }
.collapse-copy p { font-family: var(--news); font-size: clamp(1.25rem, 2vw, 2.1rem); line-height: 1.12; color: rgba(246, 241, 232, .76); }
.collapse-chamber { position: absolute; right: 10vw; top: 17vh; width: 42vw; height: 66vh; overflow: hidden; }
.probability-fog { position: absolute; inset: -20%; background: radial-gradient(circle at 50% 50%, rgba(246, 241, 232, .23), transparent 12%), radial-gradient(circle at 35% 42%, rgba(0, 215, 255, .4), transparent 20%), radial-gradient(circle at 67% 58%, rgba(255, 93, 162, .34), transparent 19%); filter: blur(18px); animation: fogBreathe 7s ease-in-out infinite; }
.storm-ring { position: absolute; border-radius: 50%; border: 1px solid; inset: 22%; animation: weatherSpin 10s linear infinite; }
.ring-a { border-color: #00D7FF; } .ring-b { inset: 30%; border-color: #6C5CE7; animation-direction: reverse; } .ring-c { inset: 38%; border-color: #D7FF5A; animation-duration: 6s; }
.shutter { position: absolute; top: 0; bottom: 0; width: 52%; background: linear-gradient(90deg, rgba(6,16,24,.9), rgba(11,42,61,.84)); animation: shutterClose 6s ease-in-out infinite; }
.shutter-left { left: -52%; } .shutter-right { right: -52%; animation-name: shutterCloseRight; }
.collapse-chamber.is-collapsing .shutter-left { left: 0; animation-play-state: paused; }
.collapse-chamber.is-collapsing .shutter-right { right: 0; animation-play-state: paused; }
.agent-theater.alternate-rules .terrain-contours { filter: hue-rotate(90deg); }
.agent-theater.alternate-rules .decision-point { color: #FF5DA2; border-color: rgba(255, 93, 162, .5); }
.outcome-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--space); color: #F6F1E8; font-size: 1.5rem; text-align: center; width: 260px; }
.collapse-coords { left: 8vw; right: auto; bottom: 12vh; }

.return-to-reality { background: linear-gradient(155deg, #061018, #0B2A3D 55%, #061018); }
.return-tree { position: absolute; left: 8vw; top: 16vh; width: 38vw; height: 66vh; transform: rotate(-6deg); }
.tree-stem, .tree-branch { position: absolute; height: 2px; background: #00D7FF; box-shadow: 0 0 18px #00D7FF; transform-origin: left center; }
.tree-stem { left: 22%; top: 54%; width: 48%; transform: rotate(-90deg); }
.tree-branch.b1 { left: 44%; top: 38%; width: 38%; transform: rotate(-28deg); background: #D7FF5A; }
.tree-branch.b2 { left: 44%; top: 38%; width: 34%; transform: rotate(18deg); background: #6C5CE7; }
.tree-branch.b3 { left: 44%; top: 52%; width: 42%; transform: rotate(36deg); background: #FF5DA2; }
.tree-node { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #F6F1E8; box-shadow: 0 0 20px #F6F1E8; }
.n1 { left: 75%; top: 22%; } .n2 { left: 72%; top: 49%; } .n3 { left: 78%; top: 79%; }
.return-copy { position: absolute; right: 8vw; top: 17vh; width: min(520px, 42vw); }
.return-copy h2 { font-family: var(--space); font-size: clamp(2.8rem, 5.6vw, 6.8rem); line-height: .85; letter-spacing: -.06em; margin: 2rem 0; }
.return-copy p { font-family: var(--news); font-size: 1.45rem; line-height: 1.18; color: rgba(246, 241, 232, .78); }
.quiet-command { margin-top: 2rem; font-family: var(--news); font-size: 1.8rem; color: #D7FF5A; }

@keyframes seedPulse { 0%,100% { transform: scale(.78); } 50% { transform: scale(1.18); } }
@keyframes rotateOrbit { to { transform: rotate(360deg); } }
@keyframes particleFall { to { background-position: 0 108px, 0 116px; } }
@keyframes fieldDrift { to { stroke-dashoffset: -620; } }
@keyframes drawBranch { to { stroke-dashoffset: 0; } }
@keyframes weatherSpin { to { transform: rotate(360deg); } }
@keyframes contourShift { to { transform: scale(1.08) rotate(3deg); } }
@keyframes agentWalk { to { offset-distance: 100%; } }
@keyframes fogBreathe { 50% { transform: scale(1.12) rotate(8deg); } }
@keyframes shutterClose { 45%, 58% { left: 0; } 100% { left: -52%; } }
@keyframes shutterCloseRight { 45%, 58% { right: 0; } 100% { right: -52%; } }

@media (max-width: 820px) {
    .wordmark { top: 8vh; left: 6vw; }
    .world-cube { width: 78vw; right: 8vw; top: 28vh; }
    .orbit-note { left: 8vw; bottom: 8vh; }
    .weather-window, .city-stage, .collapse-chamber, .return-tree { width: 86vw; left: 7vw; right: auto; }
    .chapter-title, .branching-weather .chapter-title, .theater-rail, .collapse-copy, .return-copy { position: relative; left: 7vw; right: auto; top: 8vh; width: 86vw; text-align: left; }
    .weather-window, .city-stage, .collapse-chamber, .return-tree { top: 32vh; height: 50vh; }
    .weather-note, .margin-field { display: none; }
}