:root {
    /* DESIGN typography tokens: IBM Plex Mono sparingly for timestamps; Space Grotesk** for section labels. */
    --ink: #070817;
    --violet: #261B4A;
    --plum: #12051F;
    --ivory: #F4EBD2;
    --brass: #D6A84F;
    --redshift: #FF6B5F;
    --blueshift: #63E7FF;
    --lavender: #9E7BFF;
    --title: "Cormorant Garamond", serif;
    --label: "Space Grotesk", sans-serif;
    --story: "Newsreader", serif;
    --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    color: var(--ivory);
    font-family: var(--story);
    background:
        radial-gradient(circle at 70% 12%, rgba(158,123,255,0.22), transparent 32rem),
        radial-gradient(circle at 12% 78%, rgba(255,107,95,0.13), transparent 28rem),
        linear-gradient(145deg, var(--ink), var(--plum) 54%, var(--ink));
    overflow-x: hidden;
}

.cosmos-texture {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: .55;
    background-image:
        radial-gradient(circle, rgba(244,235,210,.45) 0 1px, transparent 1.4px),
        linear-gradient(90deg, rgba(244,235,210,.035) 1px, transparent 1px),
        linear-gradient(rgba(244,235,210,.025) 1px, transparent 1px);
    background-size: 97px 97px, 58px 58px, 58px 58px;
    mix-blend-mode: screen;
}

.astrolabe {
    position: fixed;
    right: 1.1rem;
    top: 1.1rem;
    z-index: 30;
    width: 12.5rem;
    height: 12.5rem;
    border: 1px solid rgba(214,168,79,.55);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(18,5,31,.78), rgba(7,8,23,.18));
    box-shadow: 0 0 0 1.1rem rgba(214,168,79,.035), inset 0 0 3rem rgba(214,168,79,.1);
    transform: rotate(-9deg);
}

.astrolabe::before, .astrolabe::after {
    content: "";
    position: absolute;
    inset: 1.45rem;
    border: 1px dashed rgba(99,231,255,.35);
    border-radius: 50%;
}

.astrolabe::after { inset: 3.65rem; border-color: rgba(255,107,95,.36); }

.astrolabe button {
    position: absolute;
    left: 50%; top: 50%;
    width: 5.8rem;
    padding: .28rem .4rem;
    border: 1px solid rgba(214,168,79,.5);
    color: var(--ivory);
    background: rgba(7,8,23,.7);
    font: 500 .62rem var(--label);
    letter-spacing: .09em;
    text-transform: uppercase;
    cursor: pointer;
}

.astrolabe button span { color: var(--brass); margin-right: .35rem; font-family: var(--mono); }
.astrolabe button:nth-child(1) { transform: translate(-50%, -50%) rotate(9deg) translateY(-5.5rem); }
.astrolabe button:nth-child(2) { transform: translate(-50%, -50%) rotate(81deg) translateY(-5.5rem) rotate(-72deg); }
.astrolabe button:nth-child(3) { transform: translate(-50%, -50%) rotate(153deg) translateY(-5.5rem) rotate(-144deg); }
.astrolabe button:nth-child(4) { transform: translate(-50%, -50%) rotate(225deg) translateY(-5.5rem) rotate(-216deg); }
.astrolabe button:nth-child(5) { transform: translate(-50%, -50%) rotate(297deg) translateY(-5.5rem) rotate(-288deg); }

.frame {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.chapter {
    font-family: var(--title);
    font-weight: 600;
    color: var(--ivory);
    text-shadow: 0 0 2rem rgba(158,123,255,.45);
}

.coordinate, .mono-tag, .timestamp {
    font-family: var(--mono);
    color: var(--brass);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.station-frame {
    background:
        radial-gradient(circle at 19% 73%, rgba(214,168,79,.16), transparent 10rem),
        linear-gradient(160deg, var(--ink) 0%, var(--plum) 62%, #03040d 100%);
}

.rail-overlay, .orbit-paths, .light-cone { position: absolute; inset: 0; width: 100%; height: 100%; }
.rail-main, .rail-sleeper { fill: none; stroke: url(#railGlow); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 18px rgba(99,231,255,.35)); }
.rail-sleeper { stroke-width: 2; opacity: .6; }
.ruler-marks path { stroke: var(--brass); stroke-width: 3; opacity: .65; }
.path-draw { stroke-dasharray: 1800; stroke-dashoffset: 1800; animation: drawPath 2.8s ease forwards; }
.path-draw.slow { animation-duration: 4.5s; }

.station-copy {
    position: absolute;
    left: 7vw;
    top: 24vh;
    transform: rotate(-15deg) skewX(-18deg) perspective(900px) rotateY(23deg);
    transform-origin: left center;
}

.station-copy h1 {
    margin: .25rem 0;
    font: 700 clamp(4.8rem, 13vw, 13rem)/.74 var(--title);
    letter-spacing: -.075em;
    color: var(--ivory);
    text-shadow: 1rem .2rem 0 rgba(255,107,95,.18), -1rem -.15rem 0 rgba(99,231,255,.16), 0 0 2.5rem rgba(244,235,210,.15);
    white-space: nowrap;
}

.prompt {
    display: inline-block;
    margin: 0 0 0 10vw;
    padding: .6rem 1rem;
    border-top: 1px solid rgba(214,168,79,.75);
    border-bottom: 1px solid rgba(214,168,79,.35);
    font: 600 .92rem var(--label);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--blueshift);
}

.lantern {
    position: absolute;
    left: 17vw;
    bottom: 18vh;
    width: 1.1rem; height: 1.6rem;
    border: 1px solid var(--brass);
    border-radius: 40% 40% 48% 48%;
    background: rgba(214,168,79,.25);
    box-shadow: 0 0 2.6rem 1.1rem rgba(214,168,79,.55), 0 0 6rem 2rem rgba(255,107,95,.2);
}
.lantern i { position: absolute; inset: .35rem; background: var(--brass); border-radius: 50%; }

.train-window {
    position: absolute;
    width: 27vw; height: 16vh;
    border: 1px solid rgba(99,231,255,.28);
    transform: skewX(-27deg) rotate(-15deg);
    background: linear-gradient(100deg, transparent, rgba(99,231,255,.12), transparent);
}
.window-a { right: 12vw; top: 18vh; }
.window-b { right: 26vw; bottom: 17vh; opacity: .45; }
.delayed-caption { position: absolute; right: 7vw; bottom: 9vh; max-width: 21rem; color: rgba(244,235,210,.7); font-size: 1.25rem; transform: rotate(-8deg); }

.orchard-frame {
    background: radial-gradient(circle at 54% 46%, rgba(38,27,74,.3), transparent 22rem), linear-gradient(180deg, var(--plum), var(--ink));
}
.orbit-paths ellipse, .orbit-paths path { fill: none; stroke: rgba(214,168,79,.42); stroke-width: 1.5; }
.curved-title { position: absolute; left: 8vw; top: 10vh; font-size: clamp(3.5rem, 9vw, 9rem); transform: rotate(-9deg); }
.clock { position: absolute; width: 8rem; height: 8rem; border: 2px solid var(--brass); border-radius: 50%; background: radial-gradient(circle, rgba(244,235,210,.12), rgba(18,5,31,.65)); box-shadow: inset 0 0 2rem rgba(214,168,79,.15), 0 0 2rem rgba(158,123,255,.2); }
.clock::before { content: ""; position: absolute; left: 50%; top: -4.2rem; height: 4.2rem; border-left: 1px solid rgba(214,168,79,.55); }
.clock b, .clock i { position: absolute; left: 50%; top: 50%; width: 2px; height: 38%; background: var(--ivory); transform-origin: 50% 0; animation: tick 6s linear infinite; }
.clock i { height: 29%; background: var(--redshift); animation-duration: 13s; }
.clock span { position: absolute; inset: auto 0 .7rem; text-align: center; font-family: var(--mono); color: var(--blueshift); }
.clock-one { left: 58vw; top: 17vh; transform: scale(1.2); }
.clock-two { left: 23vw; top: 42vh; transform: scale(.74); }
.clock-three { left: 72vw; top: 58vh; transform: scale(.92); }
.clock-four { left: 43vw; top: 31vh; transform: scale(1.55); opacity: .8; }
.orbital-note { position: absolute; max-width: 23rem; font-size: 1.35rem; line-height: 1.35; color: rgba(244,235,210,.82); }
.note-a { left: 10vw; bottom: 14vh; transform: rotate(8deg); }
.note-b { right: 9vw; top: 35vh; transform: rotate(-11deg); }
.orchard-tag { position: absolute; left: 44vw; bottom: 8vh; color: var(--lavender); }

.library-frame { background: radial-gradient(circle at var(--mx,50%) var(--my,50%), #05050b 0 4rem, var(--plum) 12rem, var(--ink) 35rem); }
.well { position: absolute; left: 50%; top: 50%; width: 45rem; height: 45rem; transform: translate(-50%,-50%); }
.mass { position: absolute; inset: 38%; border-radius: 50%; background: #000; box-shadow: 0 0 4rem rgba(158,123,255,.55), inset 0 0 1rem var(--violet); }
.ring { position: absolute; border: 1px solid rgba(244,235,210,.2); border-radius: 50%; transform: rotateX(65deg); animation: pulseRing 5s ease-in-out infinite; }
.r1 { inset: 13%; border-color: rgba(214,168,79,.45); }.r2 { inset: 23%; animation-delay: -.8s; }.r3 { inset: 31%; border-color: rgba(99,231,255,.38); animation-delay: -1.8s; }.r4 { inset: 4%; border-color: rgba(255,107,95,.25); animation-delay: -2.3s; }
.library-title { position: absolute; left: 6vw; top: 9vh; width: 36rem; font-size: clamp(3rem, 8vw, 8.5rem); line-height: .82; transform: rotate(-5deg); }
.library-rule { position: absolute; font: 500 clamp(1rem, 2vw, 1.6rem) var(--label); color: rgba(244,235,210,.78); text-transform: uppercase; letter-spacing: .06em; }
.rule-one { right: 5vw; top: 21vh; transform: rotate(13deg); }.rule-two { right: 13vw; bottom: 20vh; transform: rotate(-19deg); }.rule-three { left: 11vw; bottom: 18vh; transform: rotate(23deg); }
.equation-cloud span { position: absolute; font-family: var(--mono); color: rgba(99,231,255,.65); filter: blur(.2px); }
.equation-cloud span:nth-child(1){ left:56%; top:19%; }.equation-cloud span:nth-child(2){ left:43%; top:68%; color:var(--brass); }.equation-cloud span:nth-child(3){ left:70%; top:51%; }.equation-cloud span:nth-child(4){ left:21%; top:37%; color:var(--redshift); }.equation-cloud span:nth-child(5){ left:34%; top:24%; }.equation-cloud span:nth-child(6){ left:61%; top:75%; color:var(--lavender); }
.gravity-caption { position: absolute; left: 58vw; top: 62vh; max-width: 25rem; font-size: 1.35rem; line-height: 1.35; }

.bridge-frame { background: linear-gradient(90deg, var(--ink), var(--violet) 48%, var(--plum)); }
.bridge-title { position: absolute; left: 8vw; top: 8vh; font-size: clamp(3rem, 7vw, 7.5rem); }
.bridge-lanes { position: absolute; inset: 29vh 8vw 18vh; display: grid; grid-template-columns: 1fr 1fr; gap: 12vw; }
.lane { position: relative; padding: 4rem 2rem 2rem; border-top: 2px solid rgba(214,168,79,.7); font-size: 1.45rem; line-height: 1.35; }
.lane-earth { transform: translateY(7vh); }.lane-star { transform: translateY(var(--starShift, -5vh)); }
.silhouette { position: absolute; left: 2rem; top: -5rem; width: 3rem; height: 5.2rem; background: linear-gradient(var(--ivory), rgba(244,235,210,.25)); clip-path: polygon(35% 0,65% 0,75% 22%,62% 38%,70% 100%,30% 100%,38% 38%,25% 22%); opacity: .75; }
.mirrored { right: 2rem; left: auto; transform: scaleX(-1); background: linear-gradient(var(--blueshift), rgba(99,231,255,.18)); }
.lane-line { height: 2px; background: linear-gradient(90deg, var(--redshift), var(--brass), var(--blueshift)); transform: scaleX(1.18); transform-origin: left; }
.timestamp { font-size: .8rem; color: var(--brass); }
.reunion { position: absolute; left: 50%; bottom: 10vh; transform: translateX(-50%) rotate(-2deg); padding: .7rem 1.2rem; border: 1px solid rgba(214,168,79,.5); font: 600 .9rem var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ivory); background: rgba(7,8,23,.5); }

.gate-frame { background: radial-gradient(circle at 50% 50%, rgba(244,235,210,.08), transparent 12rem), linear-gradient(180deg, var(--plum), var(--ink)); }
.light-cone { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.light-cone.tilted { transform: rotate(9deg) scale(1.04); }
.cone-past { fill: url(#coneRed); stroke: rgba(255,107,95,.8); stroke-width: 2; }.cone-future { fill: url(#coneBlue); stroke: rgba(99,231,255,.8); stroke-width: 2; }.axis { stroke: rgba(244,235,210,.32); stroke-width: 1.5; }.cone-edge { stroke: rgba(214,168,79,.7); stroke-width: 2; }
.gate-copy { position: absolute; left: 8vw; top: 20vh; max-width: 31rem; }
.gate-copy h2 { margin: 0; font: 700 clamp(4rem, 10vw, 10rem)/.78 var(--title); }
.gate-copy p:not(.coordinate) { font-size: 1.45rem; line-height: 1.35; color: rgba(244,235,210,.82); }
#tiltCone { border: 1px solid var(--brass); color: var(--ivory); background: rgba(18,5,31,.65); padding: .8rem 1.1rem; font: 600 .85rem var(--label); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.final-glyphs span { position: absolute; font-family: var(--mono); color: var(--brass); font-size: 1.2rem; animation: orbitGlyph 9s linear infinite; }
.final-glyphs span:nth-child(1){ left:73%; top:22%; }.final-glyphs span:nth-child(2){ left:84%; top:63%; animation-delay:-2s; color:var(--blueshift); }.final-glyphs span:nth-child(3){ left:49%; top:82%; animation-delay:-4s; color:var(--redshift); }.final-glyphs span:nth-child(4){ left:61%; top:12%; animation-delay:-6s; }

@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes tick { to { transform: rotate(360deg); } }
@keyframes pulseRing { 50% { transform: rotateX(65deg) scale(1.08); opacity: .55; } }
@keyframes orbitGlyph { to { transform: rotate(360deg) translateX(1.2rem) rotate(-360deg); } }

@media (max-width: 760px) {
    .astrolabe { width: 9rem; height: 9rem; opacity: .82; }
    .astrolabe button { width: 4.6rem; font-size: .5rem; }
    .station-copy { left: 4vw; top: 30vh; }
    .bridge-lanes { grid-template-columns: 1fr; gap: 4vh; inset: 26vh 7vw 10vh; }
    .clock-four { left: 38vw; }.note-b { right: 5vw; top: 62vh; }
    .gravity-caption, .rule-two { left: 8vw; right: auto; }
}