*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

#starfield {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.star {
    position: absolute;
    border-radius: 50%;
    background-color: var(--color, #ffffff);
    animation: twinkleStar var(--duration, 3s) ease-in-out var(--delay, 0s) infinite;
}

.universe-viewport {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: scale(5) translate3d(-360px, 0, 0);
    transition: transform 5s cubic-bezier(0.35, 0, 0.15, 1);
    z-index: 2;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

body.is-orbiting .universe-viewport {
    transform: scale(0.325) translate3d(0, 0, 0);
}

body.is-galactic .universe-viewport {
    transform: scale(0.001) translate3d(0, 0, 0);
    transition: transform 2.5s cubic-bezier(0.4, 0, 1, 1);
}

.reveal-on-zoom {
    opacity: 0;
    transition: opacity 3s ease-in;
    pointer-events: none;
}

body.is-orbiting .reveal-on-zoom {
    opacity: 1;
}

.sun {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at center, #ffffff 0%, #fff7b0 20%, #ffc100 80%, #ff8c00 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px 3px rgba(255, 140, 0, 0.7), inset 0 0 8px rgba(255,255,255,0.7);
    z-index: 10;
}

.sun::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260px;
    height: 260px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,200,50,0.15) 0%, rgba(255,160,0,0.08) 40%, transparent 70%);
    animation: coronaPulse 4s ease-in-out infinite;
    pointer-events: none;
}

.sun::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 340px;
    height: 340px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,180,50,0.06) 0%, rgba(255,120,0,0.03) 50%, transparent 70%);
    animation: coronaPulse 6s ease-in-out infinite reverse;
    pointer-events: none;
}

@keyframes coronaPulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

.orbits-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.orbits-svg ellipse {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1px;
    filter: drop-shadow(0 0 2px rgba(150, 180, 255, 0.15));
}

.orbit-runner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    transition: opacity 1s ease-out;
}

.planet-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.planet-anti-spin {
    position: absolute;
    top: 0;
    left: 0;
}

.planet {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset -3px -3px 5px rgba(0,0,0,0.6);
}

.mercury { width: 12px; height: 12px; background: radial-gradient(#d3d3d3, #7a7a7a); }
.venus { width: 28px; height: 28px; background: radial-gradient(#f4e3c5, #c89d5f); }
.mars { width: 18px; height: 18px; background: radial-gradient(#e57b49, #9e3108); }
.jupiter {
    width: 130px; height: 130px;
    background: linear-gradient(180deg, #c88b3a 10%, #e3d1be 30%, #c88b3a 50%, #e3d1be 70%, #8c5519 90%);
}
.uranus { width: 52px; height: 52px; background: radial-gradient(#d1f1f9, #72b2c1); }
.neptune { width: 50px; height: 50px; background: radial-gradient(#5b84e8, #1d357f); }

.saturn-group {
    position: absolute;
    top: 0; left: 0;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.saturn {
    width: 110px; height: 110px;
    background: radial-gradient(#eedca1, #b59247);
    border-radius: 50%;
    box-shadow: inset -6px -6px 10px rgba(0,0,0,0.65);
    z-index: 4;
}
.saturn-ring-outer {
    position: absolute;
    width: 240px; height: 240px;
    border: 4px solid rgba(200, 170, 100, 0.35);
    border-radius: 50%;
    -webkit-transform: rotateX(75deg);
    transform: rotateX(75deg);
    box-shadow: 0 0 6px rgba(200, 170, 100, 0.15);
    z-index: 1;
}
.saturn-ring-mid {
    position: absolute;
    width: 210px; height: 210px;
    border: 7px solid rgba(215, 185, 115, 0.5);
    border-radius: 50%;
    -webkit-transform: rotateX(75deg);
    transform: rotateX(75deg);
    box-shadow: 0 0 8px rgba(215, 185, 115, 0.2);
    z-index: 2;
}
.saturn-ring-inner {
    position: absolute;
    width: 185px; height: 185px;
    border: 3px solid rgba(226, 191, 125, 0.3);
    border-radius: 50%;
    -webkit-transform: rotateX(75deg);
    transform: rotateX(75deg);
    z-index: 3;
}

.cosmic-system {
    position: absolute;
    top: 0; left: 0;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.earth-sphere {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #0b1d3a;
    position: relative;
    overflow: hidden;
    transform: rotate(11deg);
    z-index: 3;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

.layer {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 210px;
    background-repeat: repeat-x;
    background-size: 70px 70px;
}

.land {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350' height='350' viewBox='0 0 350 350'%3E%3Cdefs%3E%3CradialGradient id='g' cx='40%25' cy='40%25'%3E%3Cstop offset='0%25' stop-color='%232a7a35'/%3E%3Cstop offset='100%25' stop-color='%231a4a20'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Cpath d='M22,58 C28,42 45,30 65,26 C80,24 95,28 108,38 C118,46 122,58 118,72 C114,82 105,90 95,98 C85,106 72,115 62,128 C52,140 44,155 38,168 C34,178 28,172 22,158 C16,142 12,120 12,100 C12,82 15,68 22,58 Z'/%3E%3Cpath d='M62,128 C68,135 74,148 72,162 C70,172 62,178 54,174 C48,170 44,158 48,145 C50,138 56,132 62,128 Z'/%3E%3Cpath d='M54,174 C60,178 68,188 74,200 C78,208 76,218 70,222 C64,224 56,218 52,208 C48,198 50,186 54,174 Z'/%3E%3Cpath d='M70,222 C82,218 98,220 112,230 C122,238 128,252 130,268 C132,282 128,298 118,312 C108,322 95,330 82,328 C72,326 64,314 60,298 C56,280 54,262 56,245 C58,232 64,226 70,222 Z'/%3E%3Cpath d='M158,38 C168,30 182,28 194,32 C204,36 208,46 204,56 C200,64 190,68 178,66 C168,64 160,56 158,48 C156,44 156,40 158,38 Z'/%3E%3Cpath d='M148,58 C154,52 162,54 166,62 C170,70 168,80 160,84 C152,86 144,80 142,72 C140,66 142,60 148,58 Z'/%3E%3Cpath d='M158,88 C170,82 188,82 204,90 C216,96 226,108 232,124 C236,138 236,155 232,172 C228,188 220,202 210,214 C200,224 188,232 176,234 C166,236 158,228 152,216 C146,202 142,186 140,168 C138,150 140,132 144,116 C146,104 150,94 158,88 Z'/%3E%3Cpath d='M214,32 C232,26 254,26 276,32 C294,38 310,50 322,64 C330,74 334,88 330,102 C326,114 316,124 302,130 C288,136 272,138 256,134 C242,130 230,120 222,108 C214,96 210,82 210,68 C210,52 210,40 214,32 Z'/%3E%3Cpath d='M256,134 C268,132 280,138 288,148 C294,158 292,172 284,180 C276,186 264,184 256,176 C250,170 246,158 248,148 C250,140 252,136 256,134 Z'/%3E%3Cpath d='M250,140 C258,138 268,144 274,156 C280,168 278,184 270,196 C264,204 254,206 246,198 C240,192 236,180 238,168 C240,156 244,146 250,140 Z'/%3E%3Cpath d='M246,198 C254,200 264,210 270,222 C274,232 272,244 264,250 C258,254 248,250 242,240 C238,232 236,218 240,208 C242,202 244,200 246,198 Z'/%3E%3C/g%3E%3C/svg%3E");
    animation: spinSurface 65s linear infinite;
}

.clouds {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350' height='350' viewBox='0 0 350 350'%3E%3Cg fill='rgba(255,255,255,0.4)'%3E%3Cpolygon points='40,85 90,80 120,90 70,100'/%3E%3Cpolygon points='160,140 240,135 270,155 190,160'/%3E%3Cpolygon points='220,85 290,80 310,95 250,100'/%3E%3Cpolygon points='80,240 150,235 180,255 110,260'/%3E%3C/g%3E%3C/svg%3E");
    animation: spinSurface 48s linear infinite;
    opacity: 0.75;
}

.atmosphere {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    box-shadow:
        inset -12px -12px 18px 2px rgba(0, 0, 0, 0.95),
        inset 4px 4px 6px rgba(255, 255, 255, 0.25),
        0 0 5px 1px rgba(66, 165, 245, 0.3);
    pointer-events: none;
}

.moon {
    position: absolute;
    width: 5.6px;
    height: 5.6px;
    border-radius: 50%;
    background-color: #9aa0a6;
    box-shadow: inset -1.2px -1.2px 2px rgba(0,0,0,0.85);
    animation: moon-diagonal-orbit 32s ease-in-out infinite;
}

.headline {
    position: fixed;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    letter-spacing: 1.5px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    scale: 0.9;
    transition: opacity 0.6s ease, scale 0.6s ease;
    z-index: 10;
}

.headline.visible {
    opacity: 1;
    scale: 1;
}

.earth-headline { font-size: 55px; bottom: 7%; }
.solar-headline { font-size: 65px; bottom: 5%; }
.galactic-headline { font-size: 60px; }

body.is-galactic .sun,
body.is-galactic .orbits-svg {
    opacity: 0;
    transition: opacity 1s ease-out;
}

body.is-galactic .orbit-runner {
    opacity: 0;
}

body.is-galactic .orbit-runner:has(.earth-sphere) {
    opacity: 1;
}

#intro-overlay {
    position: fixed;
    inset: 0;
    background: #000000;
    z-index: 100;
    transition: opacity 2s ease-out;
    pointer-events: none;
}

#intro-overlay.fade {
    opacity: 0;
}

@keyframes spinSurface { from { transform: translate3d(21px, 0, 0); } to { transform: translate3d(-49px, 0, 0); } }

@keyframes moon-diagonal-orbit {
    0% { transform: translate3d(-54px, 14px, 0) scale(0.65); z-index: 1; }
    25% { transform: translate3d(0px, -5px, 0) scale(0.45); z-index: 1; }
    49% { z-index: 1; }
    50% { transform: translate3d(54px, -14px, 0) scale(0.65); z-index: 5; }
    75% { transform: translate3d(0px, 7px, 0) scale(1.15); z-index: 5; }
    100% { transform: translate3d(-54px, 14px, 0) scale(0.65); z-index: 5; }
}

@keyframes twinkleStar { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

#speed-lines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    overflow: hidden;
}

#speed-lines.active {
    opacity: 1;
    animation: fadeOutLines 1s ease-in 2.5s forwards;
}

.speed-line {
    position: absolute;
    top: calc(50% - 1px);
    left: 50%;
    width: 0;
    height: 2px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(200,220,255,0.8) 15%, rgba(150,180,255,0.4) 40%, rgba(100,140,255,0.1) 70%, transparent 100%);
    transform-origin: 0% 50%;
    opacity: 0;
}

#speed-lines.active .speed-line {
    animation: shootLine 1.2s ease-out forwards;
}

@keyframes shootLine {
    0% { width: 0; opacity: 0; }
    10% { opacity: 1; }
    70% { opacity: 0.8; }
    100% { width: 120vw; opacity: 0; }
}

@keyframes fadeOutLines {
    to { opacity: 0; }
}

#galaxies {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 1s ease-in;
}

body.is-galactic #galaxies {
    opacity: 1;
}

.galaxy {
    position: absolute;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1.5s ease-in, transform 1.5s ease-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.galaxy.visible {
    opacity: 1;
    transform: scale(1);
}

.galaxy-milkyway {
    top: 35%; left: 55%;
    width: 220px; height: 80px;
    background:
        radial-gradient(ellipse at center, rgba(255,245,210,1) 0%, rgba(255,230,180,0.8) 8%, rgba(200,180,140,0.5) 22%, rgba(150,130,100,0.25) 40%, transparent 65%);
    border-radius: 50%;
    box-shadow: 0 0 30px 8px rgba(255,230,180,0.2), 0 0 60px 15px rgba(255,220,160,0.08);
    animation: slowRotate 80s linear infinite;
}

.galaxy-milkyway::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 160px; height: 6px;
    background: linear-gradient(90deg, transparent 5%, rgba(80,50,20,0.4) 25%, rgba(60,35,10,0.6) 50%, rgba(80,50,20,0.4) 75%, transparent 95%);
    transform: translate(-50%, -50%) rotate(-3deg);
    border-radius: 50%;
}

.galaxy-milkyway::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 180px; height: 50px;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.3) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 45%, rgba(255,255,255,0.2) 0%, transparent 35%),
        radial-gradient(ellipse at 50% 55%, rgba(255,240,200,0.15) 0%, transparent 50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.galaxy-andromeda {
    top: 25%; left: 20%;
    width: 280px; height: 100px;
    background:
        radial-gradient(ellipse at center, rgba(240,235,255,1) 0%, rgba(220,210,255,0.8) 6%, rgba(180,170,220,0.45) 20%, rgba(140,130,180,0.2) 40%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 35px 10px rgba(200,190,240,0.15), 0 0 70px 20px rgba(180,170,220,0.06);
    animation: slowRotate 100s linear infinite reverse;
}

.galaxy-andromeda::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 220px; height: 5px;
    background: linear-gradient(90deg, transparent 5%, rgba(50,30,60,0.35) 20%, rgba(40,20,50,0.5) 50%, rgba(50,30,60,0.35) 80%, transparent 95%);
    transform: translate(-50%, -50%) rotate(2deg);
    border-radius: 50%;
}

.galaxy-andromeda::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 240px; height: 70px;
    background:
        radial-gradient(ellipse at 35% 50%, rgba(255,255,255,0.25) 0%, transparent 35%),
        radial-gradient(ellipse at 65% 50%, rgba(255,255,255,0.2) 0%, transparent 30%),
        radial-gradient(ellipse at 50% 48%, rgba(230,220,255,0.15) 0%, transparent 45%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.galaxy-lmc {
    top: 60%; left: 75%;
    width: 110px; height: 65px;
    background:
        radial-gradient(ellipse at 42% 42%, rgba(255,230,180,1) 0%, rgba(255,200,140,0.75) 12%, rgba(220,170,110,0.4) 30%, rgba(170,120,70,0.18) 55%, transparent 78%);
    border-radius: 50%;
    box-shadow: 0 0 22px 7px rgba(255,185,125,0.18), 0 0 50px 14px rgba(255,160,100,0.06);
}

.galaxy-lmc::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 80px; height: 40px;
    background:
        conic-gradient(
            from 15deg,
            transparent 0deg,
            rgba(255,210,150,0.12) 25deg,
            transparent 50deg,
            transparent 100deg,
            rgba(255,210,150,0.1) 125deg,
            transparent 150deg,
            transparent 200deg,
            rgba(255,210,150,0.08) 225deg,
            transparent 250deg,
            transparent 310deg,
            rgba(255,210,150,0.1) 335deg,
            transparent 360deg
        );
    transform: translate(-50%, -50%);
    border-radius: 50%;
    filter: blur(2px);
}

.galaxy-lmc::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 28px; height: 28px;
    background: radial-gradient(circle at center, rgba(255,245,215,0.5) 0%, rgba(255,220,170,0.2) 40%, transparent 70%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.galaxy-smc {
    top: 70%; left: 65%;
    width: 70px; height: 50px;
    background:
        radial-gradient(ellipse at 45% 45%, rgba(255,230,185,0.9) 0%, rgba(255,200,150,0.6) 15%, rgba(210,170,120,0.3) 38%, rgba(160,120,80,0.12) 60%, transparent 82%);
    border-radius: 50%;
    box-shadow: 0 0 16px 5px rgba(255,195,135,0.14), 0 0 35px 10px rgba(255,175,115,0.05);
}

.galaxy-smc::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 48px; height: 30px;
    background:
        conic-gradient(
            from 30deg,
            transparent 0deg,
            rgba(255,215,160,0.1) 30deg,
            transparent 60deg,
            transparent 130deg,
            rgba(255,215,160,0.08) 160deg,
            transparent 190deg,
            transparent 260deg,
            rgba(255,215,160,0.09) 290deg,
            transparent 320deg,
            transparent 360deg
        );
    transform: translate(-50%, -50%);
    border-radius: 50%;
    filter: blur(2px);
}

.galaxy-smc::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    background: radial-gradient(circle at center, rgba(255,245,215,0.45) 0%, rgba(255,225,180,0.15) 45%, transparent 72%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.galaxy-triangulum {
    top: 55%; left: 30%;
    width: 120px; height: 120px;
    background:
        radial-gradient(circle at center, rgba(220,225,255,0.95) 0%, rgba(180,190,240,0.6) 12%, rgba(150,160,220,0.3) 28%, rgba(120,130,190,0.15) 45%, rgba(80,90,150,0.06) 65%, transparent 85%);
    border-radius: 50%;
    box-shadow: 0 0 22px 8px rgba(170,180,230,0.12), 0 0 50px 15px rgba(150,160,210,0.05);
    animation: slowRotate 90s linear infinite;
}

.galaxy-triangulum::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 80px; height: 80px;
    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(200,210,255,0.12) 30deg,
            transparent 60deg,
            transparent 90deg,
            rgba(200,210,255,0.1) 120deg,
            transparent 150deg,
            transparent 180deg,
            rgba(200,210,255,0.08) 210deg,
            transparent 240deg,
            transparent 270deg,
            rgba(200,210,255,0.1) 300deg,
            transparent 330deg,
            transparent 360deg
        );
    transform: translate(-50%, -50%);
    border-radius: 50%;
    filter: blur(3px);
}

.galaxy-triangulum::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, rgba(200,210,255,0.15) 40%, transparent 70%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.galaxy-sombrero {
    top: 15%; left: 70%;
    width: 160px; height: 50px;
    background:
        radial-gradient(ellipse at center, rgba(255,245,210,0.95) 0%, rgba(255,235,190,0.8) 10%, rgba(240,220,160,0.5) 25%, rgba(200,180,130,0.25) 45%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 20px 6px rgba(255,230,180,0.15), 0 0 45px 12px rgba(255,220,160,0.06);
}

.galaxy-sombrero::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 145px; height: 7px;
    background: linear-gradient(90deg, transparent 3%, rgba(30,15,5,0.45) 20%, rgba(20,10,3,0.6) 50%, rgba(30,15,5,0.45) 80%, transparent 97%);
    transform: translate(-50%, -50%) rotate(1deg);
    border-radius: 50%;
}

.galaxy-sombrero::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 120px; height: 35px;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255,250,230,0.3) 0%, transparent 50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.galaxy-whirlpool {
    top: 75%; left: 15%;
    width: 140px; height: 140px;
    animation: slowRotate 70s linear infinite;
}

.galaxy-whirlpool-a {
    position: absolute;
    top: 20%; left: 15%;
    width: 80px; height: 80px;
    background:
        radial-gradient(circle at center, rgba(210,195,255,0.95) 0%, rgba(170,155,220,0.55) 15%, rgba(140,125,190,0.3) 35%, rgba(100,85,150,0.12) 55%, transparent 75%);
    border-radius: 50%;
    box-shadow: 0 0 18px 6px rgba(170,150,220,0.15), 0 0 40px 12px rgba(150,130,200,0.06);
}

.galaxy-whirlpool-a::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 55px; height: 55px;
    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(200,185,240,0.15) 25deg,
            transparent 50deg,
            transparent 90deg,
            rgba(200,185,240,0.12) 115deg,
            transparent 140deg,
            transparent 180deg,
            rgba(200,185,240,0.1) 205deg,
            transparent 230deg,
            transparent 270deg,
            rgba(200,185,240,0.12) 295deg,
            transparent 320deg,
            transparent 360deg
        );
    transform: translate(-50%, -50%);
    border-radius: 50%;
    filter: blur(2px);
}

.galaxy-whirlpool-a::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    background: radial-gradient(circle at center, rgba(255,255,255,0.35) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.galaxy-whirlpool-b {
    position: absolute;
    top: 35%; left: 45%;
    width: 50px; height: 50px;
    background:
        radial-gradient(circle at center, rgba(255,210,160,0.85) 0%, rgba(220,170,120,0.5) 18%, rgba(180,130,80,0.25) 40%, rgba(140,95,50,0.1) 65%, transparent 85%);
    border-radius: 50%;
    box-shadow: 0 0 14px 5px rgba(220,170,120,0.12), 0 0 30px 8px rgba(200,150,100,0.04);
}

.galaxy-whirlpool-b::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 35px; height: 35px;
    background:
        conic-gradient(
            from 45deg,
            transparent 0deg,
            rgba(255,200,150,0.1) 30deg,
            transparent 60deg,
            transparent 120deg,
            rgba(255,200,150,0.08) 150deg,
            transparent 180deg,
            transparent 240deg,
            rgba(255,200,150,0.1) 270deg,
            transparent 300deg,
            transparent 360deg
        );
    transform: translate(-50%, -50%);
    border-radius: 50%;
    filter: blur(2px);
}

.galaxy-whirlpool-b::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 12px;
    background: radial-gradient(circle at center, rgba(255,240,210,0.4) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

@keyframes slowRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#multiverse {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity 1.5s ease-in;
}

body.is-multiversal #multiverse {
    opacity: 1;
}

body.is-multiversal #galaxies {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.bubble-universe {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 1.2s ease-in, transform 1.2s ease-out;
}

.bubble-universe.visible {
    opacity: 1;
    transform: scale(1);
}

.bubble-universe::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.bubble-universe::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.bubble-1 {
    top: 20%; left: 15%;
    width: 180px; height: 180px;
    background:
        radial-gradient(circle at 40% 40%, rgba(120,160,255,0.4) 0%, rgba(80,120,220,0.18) 25%, rgba(60,80,180,0.08) 50%, transparent 75%);
    box-shadow: 0 0 40px 10px rgba(100,140,255,0.1), inset 0 0 40px rgba(120,160,255,0.12);
}

.bubble-1::before {
    width: 70%; height: 70%;
    background:
        conic-gradient(from 30deg, transparent 0deg, rgba(140,180,255,0.15) 30deg, transparent 60deg, transparent 120deg, rgba(140,180,255,0.1) 150deg, transparent 180deg, transparent 240deg, rgba(140,180,255,0.12) 270deg, transparent 300deg, transparent 360deg);
    filter: blur(4px);
}

.bubble-1::after {
    background:
        radial-gradient(circle at 38% 38%, rgba(200,220,255,0.6) 0%, transparent 15%),
        radial-gradient(circle at 60% 55%, rgba(180,200,255,0.25) 0%, transparent 12%),
        radial-gradient(circle at 45% 65%, rgba(160,190,255,0.15) 0%, transparent 10%);
}

.bubble-2 {
    top: 55%; left: 65%;
    width: 220px; height: 220px;
    background:
        radial-gradient(circle at 45% 45%, rgba(200,120,255,0.35) 0%, rgba(160,80,220,0.15) 30%, rgba(120,50,180,0.06) 60%, transparent 82%);
    box-shadow: 0 0 50px 12px rgba(180,100,240,0.09), inset 0 0 50px rgba(200,120,255,0.1);
}

.bubble-2::before {
    width: 65%; height: 65%;
    background:
        conic-gradient(from 60deg, transparent 0deg, rgba(210,140,255,0.12) 25deg, transparent 50deg, transparent 100deg, rgba(210,140,255,0.1) 125deg, transparent 150deg, transparent 200deg, rgba(210,140,255,0.08) 225deg, transparent 250deg, transparent 310deg, rgba(210,140,255,0.1) 335deg, transparent 360deg);
    filter: blur(5px);
}

.bubble-2::after {
    background:
        radial-gradient(circle at 43% 43%, rgba(230,180,255,0.55) 0%, transparent 14%),
        radial-gradient(circle at 58% 52%, rgba(210,150,255,0.2) 0%, transparent 11%),
        radial-gradient(circle at 40% 60%, rgba(190,130,240,0.15) 0%, transparent 10%),
        radial-gradient(circle at 62% 62%, rgba(180,120,230,0.1) 0%, transparent 8%);
}

.bubble-3 {
    top: 10%; left: 70%;
    width: 140px; height: 140px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,150,180,0.35) 0%, rgba(220,100,140,0.15) 30%, rgba(180,60,100,0.05) 60%, transparent 82%);
    box-shadow: 0 0 35px 8px rgba(240,120,160,0.08), inset 0 0 35px rgba(255,150,180,0.1);
}

.bubble-3::before {
    width: 60%; height: 60%;
    background:
        conic-gradient(from 15deg, transparent 0deg, rgba(255,170,190,0.14) 30deg, transparent 60deg, transparent 130deg, rgba(255,170,190,0.1) 160deg, transparent 190deg, transparent 260deg, rgba(255,170,190,0.11) 290deg, transparent 320deg, transparent 360deg);
    filter: blur(3px);
}

.bubble-3::after {
    background:
        radial-gradient(circle at 48% 48%, rgba(255,200,215,0.5) 0%, transparent 14%),
        radial-gradient(circle at 56% 58%, rgba(255,170,190,0.2) 0%, transparent 10%);
}

.bubble-4 {
    top: 65%; left: 10%;
    width: 160px; height: 160px;
    background:
        radial-gradient(circle at 42% 38%, rgba(100,220,200,0.35) 0%, rgba(60,180,160,0.15) 30%, rgba(40,140,120,0.05) 60%, transparent 82%);
    box-shadow: 0 0 40px 10px rgba(80,200,180,0.08), inset 0 0 38px rgba(100,220,200,0.1);
}

.bubble-4::before {
    width: 62%; height: 62%;
    background:
        conic-gradient(from 45deg, transparent 0deg, rgba(120,230,210,0.13) 28deg, transparent 56deg, transparent 110deg, rgba(120,230,210,0.1) 138deg, transparent 166deg, transparent 220deg, rgba(120,230,210,0.11) 248deg, transparent 276deg, transparent 330deg, rgba(120,230,210,0.09) 358deg, transparent 360deg);
    filter: blur(4px);
}

.bubble-4::after {
    background:
        radial-gradient(circle at 40% 36%, rgba(160,245,230,0.5) 0%, transparent 14%),
        radial-gradient(circle at 55% 50%, rgba(130,220,200,0.2) 0%, transparent 11%),
        radial-gradient(circle at 48% 62%, rgba(110,200,185,0.12) 0%, transparent 9%);
}

.bubble-5 {
    top: 40%; left: 40%;
    width: 120px; height: 120px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,220,100,0.35) 0%, rgba(220,180,60,0.15) 30%, rgba(180,140,30,0.05) 60%, transparent 82%);
    box-shadow: 0 0 30px 8px rgba(240,200,80,0.08), inset 0 0 28px rgba(255,220,100,0.1);
}

.bubble-5::before {
    width: 58%; height: 58%;
    background:
        conic-gradient(from 0deg, transparent 0deg, rgba(255,230,130,0.14) 30deg, transparent 60deg, transparent 140deg, rgba(255,230,130,0.1) 170deg, transparent 200deg, transparent 280deg, rgba(255,230,130,0.12) 310deg, transparent 340deg, transparent 360deg);
    filter: blur(3px);
}

.bubble-5::after {
    background:
        radial-gradient(circle at 48% 48%, rgba(255,240,170,0.5) 0%, transparent 15%),
        radial-gradient(circle at 58% 56%, rgba(255,220,140,0.2) 0%, transparent 10%);
}

.bubble-6 {
    top: 75%; left: 80%;
    width: 100px; height: 100px;
    background:
        radial-gradient(circle at 48% 52%, rgba(180,140,255,0.35) 0%, rgba(140,100,220,0.12) 35%, rgba(100,60,180,0.04) 65%, transparent 85%);
    box-shadow: 0 0 25px 6px rgba(160,120,240,0.07), inset 0 0 22px rgba(180,140,255,0.09);
}

.bubble-6::before {
    width: 55%; height: 55%;
    background:
        conic-gradient(from 20deg, transparent 0deg, rgba(190,160,255,0.12) 25deg, transparent 50deg, transparent 120deg, rgba(190,160,255,0.09) 145deg, transparent 170deg, transparent 240deg, rgba(190,160,255,0.1) 265deg, transparent 290deg, transparent 360deg);
    filter: blur(3px);
}

.bubble-6::after {
    background:
        radial-gradient(circle at 46% 50%, rgba(210,185,255,0.45) 0%, transparent 15%),
        radial-gradient(circle at 56% 54%, rgba(190,160,255,0.18) 0%, transparent 10%);
}

.bubble-7 {
    top: 30%; left: 85%;
    width: 90px; height: 90px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,180,120,0.32) 0%, rgba(220,140,80,0.12) 35%, rgba(180,100,50,0.04) 65%, transparent 85%);
    box-shadow: 0 0 20px 5px rgba(240,160,100,0.07), inset 0 0 18px rgba(255,180,120,0.08);
}

.bubble-7::before {
    width: 52%; height: 52%;
    background:
        conic-gradient(from 10deg, transparent 0deg, rgba(255,195,145,0.12) 25deg, transparent 50deg, transparent 130deg, rgba(255,195,145,0.09) 155deg, transparent 180deg, transparent 260deg, rgba(255,195,145,0.1) 285deg, transparent 310deg, transparent 360deg);
    filter: blur(2px);
}

.bubble-7::after {
    background:
        radial-gradient(circle at 48% 48%, rgba(255,210,165,0.45) 0%, transparent 16%),
        radial-gradient(circle at 58% 56%, rgba(255,185,130,0.18) 0%, transparent 10%);
}

.bubble-8 {
    top: 80%; left: 40%;
    width: 130px; height: 130px;
    background:
        radial-gradient(circle at 45% 45%, rgba(140,200,255,0.32) 0%, rgba(100,160,220,0.12) 35%, rgba(60,120,180,0.04) 65%, transparent 85%);
    box-shadow: 0 0 30px 7px rgba(120,180,240,0.07), inset 0 0 25px rgba(140,200,255,0.09);
}

.bubble-8::before {
    width: 56%; height: 56%;
    background:
        conic-gradient(from 35deg, transparent 0deg, rgba(160,210,255,0.12) 28deg, transparent 56deg, transparent 115deg, rgba(160,210,255,0.09) 143deg, transparent 171deg, transparent 230deg, rgba(160,210,255,0.1) 258deg, transparent 286deg, transparent 340deg, rgba(160,210,255,0.08) 368deg, transparent 360deg);
    filter: blur(3px);
}

.bubble-8::after {
    background:
        radial-gradient(circle at 43% 43%, rgba(190,225,255,0.45) 0%, transparent 15%),
        radial-gradient(circle at 55% 55%, rgba(160,200,255,0.18) 0%, transparent 10%),
        radial-gradient(circle at 48% 65%, rgba(140,185,250,0.1) 0%, transparent 8%);
}

.multiversal-headline {
    font-size: 65px;
}

.final-headline {
    font-size: 60px;
    font-style: italic;
}

body.is-multiversal .sun,
body.is-multiversal .orbits-svg,
body.is-multiversal .orbit-runner {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

body.is-multiversal .orbit-runner:has(.earth-sphere) {
    opacity: 1;
}

#fade-to-black {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s ease-in-out;
}

#fade-to-black.active {
    opacity: 1;
    pointer-events: none;
}

#book-scene {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 60;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease-in;
    contain: layout style;
}

#book-scene.visible {
    opacity: 1;
    pointer-events: all;
}

#book-3d {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    perspective: 2000px;
    padding: 20px;
    contain: layout style;
}

#book {
    position: relative;
    contain: layout style;
}

.page {
    background: #fffaf0;
    color: #2e241a;
    border-radius: 6px 20px 20px 6px;
    box-shadow: 
        8px 14px 20px rgba(0, 0, 0, 0.4),
        inset 0 0 30px rgba(0, 0, 0, 0.02),
        inset -2px 0 8px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(180, 155, 120, 0.35);
    position: relative;
    overflow: hidden;
    padding: 0;
    contain: layout style paint;
    content-visibility: auto;
}

.page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: multiply;
    content-visibility: auto;
}

.page-texture {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 28px,
            rgba(180, 160, 130, 0.06) 28px,
            rgba(180, 160, 130, 0.06) 29px
        ),
        repeating-linear-gradient(
            180deg,
            transparent,
            transparent 1.6em,
            rgba(180, 160, 130, 0.03) 1.6em,
            rgba(180, 160, 130, 0.03) calc(1.6em + 1px)
        );
    pointer-events: none;
    z-index: 1;
    content-visibility: auto;
}

.page-lomo {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.06) 40%, rgba(0,0,0,0.02) 70%, transparent 100%);
    pointer-events: none;
    z-index: 5;
}

.page-number {
    position: absolute;
    bottom: 12px;
    right: 16px;
    font-family: 'Playfair Display', serif;
    font-size: 0.85rem;
    color: #b8a080;
    opacity: 0.5;
    z-index: 3;
    letter-spacing: 0.5px;
}

.page-inner {
    position: relative;
    z-index: 2;
    padding: 2.8rem 2.4rem 2.8rem 2.6rem;
    height: 100%;
    width: 100%;
    font-family: 'Caveat', cursive;
    font-size: 1.45rem;
    line-height: 1.6;
    background: transparent;
    overflow-y: auto;
    scrollbar-width: thin;
    contain: layout style;
}

.page-inner::-webkit-scrollbar {
    width: 4px;
}

.page-inner::-webkit-scrollbar-thumb {
    background: #d4b896;
    border-radius: 4px;
}

.page-text {
    text-align: justify;
    margin-bottom: 1rem;
    text-indent: 1.5em;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.page-text:first-of-type {
    text-indent: 0;
}

.page-signature {
    text-align: right;
    text-indent: 0;
    margin-top: 2rem;
    font-style: italic;
    color: #8b6b4a;
    font-size: 1.5rem;
}

.cover {
    background: #2c1a0e !important;
    color: #f7e5b5 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    border: 2px solid #e7ba7a !important;
    box-shadow: 0 0 0 3px #3b2619 inset, 10px 12px 20px black !important;
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}

.cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.03) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.02) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(139,90,43,0.15) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.cover::after {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(231, 186, 122, 0.15);
    border-radius: inherit;
    pointer-events: none;
}

.cover-ornament {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(231, 186, 122, 0.5), transparent);
}

.cover-ornament-top {
    top: 25px;
}

.cover-ornament-bottom {
    bottom: 25px;
}

.cover-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    background-color: rgba(0,0,0,0.2);
    border-radius: inherit;
    padding: 2.2rem;
    position: relative;
    z-index: 2;
}

.cover-flourish {
    font-size: 1.3rem;
    letter-spacing: 8px;
    color: #e7ba7a;
    opacity: 0.7;
}

.cover-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.3;
    max-width: 320px;
    color: #ffefb9;
}

.cover-line {
    width: 140px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,213,181,0.6), transparent);
}

.cover-subtitle {
    font-family: 'Caveat', cursive;
    font-size: 1.7rem;
    color: #f7e5b5;
    letter-spacing: 1px;
    opacity: 0.9;
}

.back-cover {
    background: #2c1a0e !important;
    color: #f7e5b5 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    border: 2px solid #e7ba7a !important;
    box-shadow: 0 0 0 3px #3b2619 inset, 10px 12px 20px black !important;
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}

.back-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.03) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.02) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(139,90,43,0.15) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.back-cover::after {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(231, 186, 122, 0.15);
    border-radius: inherit;
    pointer-events: none;
}

.back-cover-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    background-color: rgba(0,0,0,0.2);
    border-radius: inherit;
    padding: 2.2rem;
    position: relative;
    z-index: 2;
}

.back-heart {
    font-size: 40px;
    opacity: 0.5;
}

.back-text {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: #f7e3b0;
    letter-spacing: 1px;
}

.back-year {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.3rem;
    color: #e7ba7a;
    letter-spacing: 4px;
    opacity: 0.7;
}

.multiversal-particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    animation: particleFloat linear forwards;
}

@keyframes particleFloat {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    15% { opacity: 0.7; }
    85% { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(-100vh) scale(1.2); }
}

.asteroid-belt {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 2;
    pointer-events: none;
}

.asteroid {
    position: absolute;
    border-radius: 50%;
    background: #8a7e6b;
    opacity: 0.5;
}

@keyframes orbitGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(150, 180, 255, 0.15)); }
    50% { filter: drop-shadow(0 0 4px rgba(150, 180, 255, 0.3)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 600px) {
    .solar-headline {
        font-size: 80px;
    }
    .galactic-headline {
        font-size: 30px;
        white-space: normal;
        max-width: 90vw;
        text-align: center;
    }
    .multiversal-headline {
        font-size: 30px;
        white-space: normal;
        max-width: 90vw;
        text-align: center;
    }
    .earth-headline {
        font-size: 40px;
        white-space: normal;
        max-width: 90vw;
        text-align: center;
    }
    .final-headline {
        font-size: 36px;
        white-space: normal;
        max-width: 90vw;
        text-align: center;
    }
    .cover-title {
        font-size: 2.2rem;
    }
    .cover-subtitle {
        font-size: 1.4rem;
    }
    .page-inner {
        padding: 2rem 1.6rem;
        font-size: 1.3rem;
    }
    .back-text {
        font-size: 1.8rem;
    }
}

noscript {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    color: #fff;
    font-family: sans-serif;
    font-size: 18px;
    z-index: 9999;
}