:root{--cream:#eee9bc;--muted:#aaa99c;--accent:#9288ff;--texture:url("../assets/Moons/Earth/Moon.webp");--prev:url("../assets/Moons/Mars/Phoebos.webp");--next:url("../assets/Moons/Eris/Dysnomia.webp")}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#000}body{margin:0;background:radial-gradient(ellipse at 50% 42%,#242424 0,#111 42%,#050505 72%,#000 100%);color:#fff;font-family:Montserrat,Arial,sans-serif;overflow:hidden}.space{height:100svh;min-height:620px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 65%,#232959 0,#111632 40%,#080b1c 72%,#04050e 100%)}
.nebula{position:absolute;inset:-30%;background:radial-gradient(ellipse at 48% 72%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 30%),radial-gradient(ellipse at 75% 36%,#183c5242,transparent 32%);filter:blur(24px);transition:background 1s}.stars,.stars:before,.stars:after{position:absolute;inset:0;content:"";background-image:radial-gradient(#fff 0.7px,transparent .8px);background-size:67px 71px;opacity:.45}.stars-a{transform:rotate(8deg) scale(1.2)}.stars-b{background-size:113px 97px;transform:translate(40px,20px);opacity:.2}
.nav{position:relative;z-index:20;height:88px;display:grid;grid-template-columns:repeat(3,1fr) 1.7fr repeat(3,1fr);align-items:center;padding:0 clamp(24px,8vw,150px);gap:16px;font-size:10px}.nav a,.nav-button{color:#f2f0df;text-decoration:none;text-align:center;background:none;border:0;font:inherit;cursor:pointer;opacity:.85}.brand{font-size:15px!important;letter-spacing:.3em;color:var(--cream)!important;font-weight:600}.nav-link:hover{opacity:1;color:var(--cream)}
.info{position:relative;z-index:10;text-align:center}.eyebrow{margin:4px 0 10px;color:#9294ae;font-size:8px;letter-spacing:.25em;text-transform:uppercase}.info h1{margin:0;color:var(--cream);font-size:clamp(22px,2.4vw,38px);font-weight:500;letter-spacing:.3em;padding-left:.3em;text-shadow:0 0 25px #fff4}.facts{display:flex;justify-content:center;gap:clamp(22px,4vw,62px);margin-top:22px}.facts div{text-align:left;min-width:74px}.facts span{display:block;color:#a5a5a2;font-size:8px;font-weight:600;letter-spacing:.08em}.facts strong{display:block;margin-top:5px;color:#e7e3ba;font-size:10px;font-weight:600;white-space:nowrap}
.system{position:absolute;z-index:5;left:50%;top:58%;width:min(1040px,98vw);height:min(710px,76vw);transform:translate(-50%,-38%)}.orbit{position:absolute;left:50%;top:48%;border:1px solid #d4d6ff2e;border-radius:50%;transform:translate(-50%,-50%)}.orbit-1{width:390px;height:390px}.orbit-2{width:500px;height:500px}.orbit-3{width:620px;height:620px}.orbit-4{width:760px;height:760px}.orbit-5{width:920px;height:920px}
.planet{position:absolute;left:50%;top:48%;width:clamp(250px,33vw,470px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:0;padding:0;cursor:pointer;background:#222;box-shadow:inset -45px -20px 70px #02040dd9,inset 25px 15px 42px #fff2,0 0 28px color-mix(in srgb,var(--accent) 80%,transparent),0 0 110px color-mix(in srgb,var(--accent) 42%,transparent);transition:transform .7s cubic-bezier(.2,.9,.2,1),box-shadow 1s;overflow:hidden}.planet:hover{transform:translate(-50%,-50%) scale(1.025)}.planet-texture{position:absolute;inset:-3%;border-radius:50%;background-image:var(--texture);background-size:cover;background-position:center;filter:saturate(1.18) contrast(1.08);animation:drift 22s ease-in-out infinite alternate;transition:opacity .35s,background-image .35s}.planet-light{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff5 0,transparent 28%),linear-gradient(120deg,transparent 48%,#01020aaa 87%);mix-blend-mode:screen}@keyframes drift{to{transform:scale(1.08) translateX(-2%) rotate(3deg)}}
.side-moon{position:absolute;top:48%;display:flex;align-items:center;gap:20px;border:0;background:none;color:#e9e4bc;letter-spacing:.1em;font:500 14px Montserrat;cursor:pointer}.side-moon b{font-weight:500}.previous{left:-35px;transform:translateY(-50%)}.next{right:-35px;transform:translateY(-50%)}.side-orb{display:block;width:100px;aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center;box-shadow:inset -20px -5px 27px #000c,0 0 25px #826fff38;transition:transform .3s}.previous .side-orb{background-image:var(--prev)}.next .side-orb{background-image:var(--next)}.side-moon:hover .side-orb{transform:scale(1.08)}
.satellite{position:absolute;border-radius:50%;box-shadow:0 0 10px currentColor}.satellite-a{width:18px;height:18px;background:#9acb31;color:#9acb31;left:30%;top:63%}.satellite-b{width:12px;height:12px;background:#875bf0;color:#875bf0;left:51%;top:10%}.satellite-c{width:15px;height:15px;background:#ff9d00;color:#ff9d00;right:27%;top:39%}.satellite-d{width:9px;height:9px;background:#2fa4f4;color:#2fa4f4;right:18%;top:68%}
.controls{position:absolute;z-index:20;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:18px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#b9b8ac}.controls button{width:32px;height:32px;border:1px solid #ffffff35;border-radius:50%;background:#ffffff08;color:#eee9bc;cursor:pointer}.controls button:hover{background:#ffffff18}.hint{position:absolute;right:28px;bottom:20px;font-size:7px;letter-spacing:.18em;color:#7d7f92}.about{position:absolute;z-index:30;inset:auto 24px 80px auto;width:250px;padding:20px;background:#090c1cda;border:1px solid #fff2;backdrop-filter:blur(12px);opacity:0;transform:translateY(12px);pointer-events:none;transition:.3s}.about:target{opacity:1;transform:none;pointer-events:auto}.about span{font-size:8px;letter-spacing:.25em;color:var(--cream)}.about p{font-size:12px;line-height:1.7;color:#c6c6c9}
.space.changing .planet{transform:translate(-50%,-50%) scale(.72);opacity:.2}.space.changing .info{opacity:.25}.info{transition:opacity .3s}
@media(max-width:760px){.nav{height:70px;grid-template-columns:1fr auto 1fr;padding:0 18px}.nav-link:nth-child(-n+3),.nav-button{display:none}.brand{grid-column:2}.facts{gap:16px;overflow-x:auto;justify-content:flex-start;padding:0 22px}.facts div{min-width:100px}.system{top:60%;width:100vw;height:100vw;min-height:430px}.side-moon b{display:none}.side-orb{width:62px}.previous{left:-22px}.next{right:-22px}.orbit-1{width:300px;height:300px}.orbit-2{width:390px;height:390px}.orbit-3{width:480px;height:480px}.orbit-4,.orbit-5{display:none}.planet{width:min(64vw,330px)}.hint{display:none}.info h1{font-size:23px}.facts div:nth-child(n+4){display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Reference-video motion */
.info{padding-top:clamp(38px,7vh,78px)}
.planet-texture{inset:-8%;animation:planet-spin 32s linear infinite}
@keyframes planet-spin{to{transform:rotate(360deg)}}
.moon-track{position:absolute;left:50%;top:48%;border-radius:50%;pointer-events:none;animation:moon-orbit linear infinite}
.moon-track .satellite{position:absolute;left:50%;top:0;right:auto;display:block;border-radius:50%;box-shadow:0 0 12px currentColor;animation:moon-counterspin linear infinite}
.track-a{width:390px;height:390px;margin:-195px;animation-duration:18s}
.track-b{width:500px;height:500px;margin:-250px;animation-duration:27s;animation-direction:reverse}
.track-c{width:620px;height:620px;margin:-310px;animation-duration:36s}
.track-d{width:760px;height:760px;margin:-380px;animation-duration:46s;animation-direction:reverse}
.track-e{width:920px;height:920px;margin:-460px;animation-duration:58s;animation-delay:-21s}
.satellite-a{width:18px;height:18px;background:#9acb31;color:#9acb31}
.satellite-b{width:12px;height:12px;background:#875bf0;color:#875bf0}
.satellite-c{width:15px;height:15px;background:#ff9d00;color:#ff9d00}
.satellite-d{width:9px;height:9px;background:#2fa4f4;color:#2fa4f4}
.satellite-e{width:11px;height:11px;background:#68d66b;color:#68d66b}
@keyframes moon-orbit{to{transform:rotate(360deg)}}
@keyframes moon-counterspin{to{transform:rotate(-360deg)}}
@media(max-width:760px){.info{padding-top:28px}.track-a{width:300px;height:300px;margin:-150px}.track-b{width:390px;height:390px;margin:-195px}.track-c{width:480px;height:480px;margin:-240px}.track-d,.track-e{display:none}}

/* Adaptive layout and depth */
.orbit{z-index:1}
.moon-track{z-index:2}
.side-moon{z-index:4}
.planet{z-index:10;isolation:isolate}
.info{width:min(100% - 32px,920px);margin-inline:auto}
.facts{display:grid;grid-template-columns:repeat(5,minmax(90px,1fr));width:min(100%,760px);margin:22px auto 0;padding:0 12px;gap:clamp(12px,3vw,44px)}
.facts div{min-width:0;text-align:center}
.facts strong{white-space:normal;line-height:1.3}
.system{width:min(1040px,100vw);height:min(710px,72vw)}

@media(max-width:900px){
  .info{padding-top:clamp(24px,5vh,48px)}
  .facts{gap:14px}
  .system{top:59%;height:min(650px,88vw)}
  .planet{width:clamp(230px,44vw,390px)}
  .side-orb{width:78px}
  .previous{left:-18px}.next{right:-18px}
}

@media(max-width:600px){
  .space{min-height:620px}
  .info{width:calc(100% - 20px);padding-top:18px}
  .eyebrow{font-size:7px;margin-bottom:7px}
  .info h1{font-size:clamp(19px,7vw,26px)}
  .facts{grid-template-columns:repeat(3,1fr);width:100%;margin-top:14px;padding:0;gap:10px 8px}
  .facts div:nth-child(n){display:block}
  .facts div:nth-child(4){grid-column:1 / 2;margin-left:50%}
  .facts div:nth-child(5){grid-column:2 / 4;margin-right:25%}
  .facts span{font-size:6px}
  .facts strong{font-size:8px;margin-top:3px}
  .system{top:64%;height:100vw;min-height:390px}
  .planet{width:clamp(210px,61vw,300px)}
  .side-orb{width:54px}
  .side-moon{gap:8px}
  .controls{bottom:14px}
}

@media(max-width:380px){
  .info{padding-top:12px}
  .facts{gap:8px 4px}
  .system{top:65%}
  .planet{width:205px}
  .controls span{display:none}
}

@media(max-height:700px) and (min-width:601px){
  .info{padding-top:18px}
  .facts{margin-top:12px}
  .system{top:61%;transform:translate(-50%,-40%) scale(.78)}
  .controls{bottom:10px}
}

@media(orientation:landscape) and (max-height:520px){
  .info{width:46%;margin-left:3%;padding-top:18px;text-align:left}
  .info h1{font-size:22px;text-align:center}
  .eyebrow{text-align:center}
  .facts{grid-template-columns:repeat(2,1fr);gap:9px;width:100%;margin-top:12px}
  .facts div{text-align:left}
  .facts div:nth-child(n){display:block;grid-column:auto;margin:0}
  .system{left:73%;top:57%;width:62vw;height:62vw;transform:translate(-50%,-50%) scale(.74)}
  .planet{width:min(40vw,300px)}
  .controls{left:73%;bottom:8px}
}

/* Natural cosmos star field */
.stars,.stars:before,.stars:after{
  content:"";position:absolute;inset:-10%;background-repeat:repeat;
}
.stars-a{
  opacity:.82;transform:none;
  background-image:
    radial-gradient(circle at 8% 14%,#fff 0 1px,transparent 1.8px),
    radial-gradient(circle at 23% 61%,#b8d8ff 0 .7px,transparent 1.4px),
    radial-gradient(circle at 37% 28%,#fff6cf 0 1.1px,transparent 2px),
    radial-gradient(circle at 54% 78%,#fff 0 .8px,transparent 1.5px),
    radial-gradient(circle at 69% 19%,#cad8ff 0 .7px,transparent 1.4px),
    radial-gradient(circle at 82% 52%,#fff 0 1px,transparent 1.8px),
    radial-gradient(circle at 94% 87%,#ffe8bd 0 .8px,transparent 1.5px);
  background-size:263px 229px,311px 277px,397px 331px,281px 367px,353px 241px,419px 293px,337px 389px;
  animation:star-drift 90s linear infinite;
}
.stars-a:before{
  opacity:.55;filter:blur(.2px);
  background-image:
    radial-gradient(circle at 18% 33%,#fff 0 .55px,transparent 1px),
    radial-gradient(circle at 66% 72%,#d9e4ff 0 .65px,transparent 1.2px),
    radial-gradient(circle at 88% 15%,#fff 0 .5px,transparent 1px);
  background-size:91px 127px,143px 109px,167px 181px;
  animation:twinkle 4.8s ease-in-out infinite alternate;
}
.stars-b{
  opacity:.38;transform:none;filter:blur(.45px);
  background-image:
    radial-gradient(circle at 12% 76%,#fff 0 1.4px,transparent 2.4px),
    radial-gradient(circle at 43% 11%,#b9c9ff 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 71% 46%,#fff4cf 0 1.5px,transparent 2.6px),
    radial-gradient(circle at 91% 69%,#fff 0 1.1px,transparent 2px);
  background-size:541px 443px,617px 509px,683px 557px,739px 601px;
  animation:twinkle 6.5s 1.2s ease-in-out infinite alternate;
}
.stars-b:after{
  inset:15% 8%;opacity:.28;filter:blur(35px);
  background:radial-gradient(ellipse at 50% 50%,#6775c8 0,#43366f55 28%,transparent 68%);
  transform:rotate(-16deg);
}
@keyframes twinkle{0%{opacity:.25}55%{opacity:.8}100%{opacity:.48}}
@keyframes star-drift{to{background-position:263px -229px,311px -277px,397px -331px,281px -367px,353px -241px,419px -293px,337px -389px}}

/* Center moon turns only during selection */
.planet-texture{animation:none}
.space.changing .planet{transform:translate(-50%,-50%) scale(.98);opacity:1}
.space.changing .planet-texture{animation:moon-change-spin .92s cubic-bezier(.45,.02,.2,1)}
@keyframes moon-change-spin{
  0%{transform:rotate(0) scale(1);opacity:1;filter:saturate(1.18) contrast(1.08) blur(0)}
  46%{transform:rotate(165deg) scale(.91);opacity:.12;filter:saturate(1.18) contrast(1.08) blur(2px)}
  54%{transform:rotate(195deg) scale(.91);opacity:.12;filter:saturate(1.18) contrast(1.08) blur(2px)}
  100%{transform:rotate(360deg) scale(1);opacity:1;filter:saturate(1.18) contrast(1.08) blur(0)}
}

/* Deep navy cosmos */
.space{background:radial-gradient(ellipse at 50% 64%,#0b1735 0,#071027 34%,#030817 68%,#01030b 100%)}
.nebula{background:radial-gradient(ellipse at 48% 72%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 31%),radial-gradient(ellipse at 75% 36%,#10284240,transparent 34%)}
.stars-b:after{opacity:.18;background:radial-gradient(ellipse at 50% 50%,#314b8c 0,#17234d55 30%,transparent 70%)}

/* Black cosmos */
.space{background:radial-gradient(ellipse at 50% 62%,#090b12 0,#05060b 38%,#020308 70%,#000 100%)}
.nebula{background:radial-gradient(ellipse at 48% 72%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 30%),radial-gradient(ellipse at 75% 36%,#1117252e,transparent 35%)}
.stars-b:after{opacity:.1;background:radial-gradient(ellipse at 50% 50%,#24293e 0,#11152244 32%,transparent 72%)}

/* Larger information typography */
.eyebrow{font-size:10px}
.info h1{font-size:clamp(26px,2.8vw,43px)}
.facts span{font-size:9px}
.facts strong{font-size:12px}
@media(max-width:600px){
  .eyebrow{font-size:8px}
  .info h1{font-size:clamp(22px,7.5vw,30px)}
  .facts span{font-size:7px}
  .facts strong{font-size:9px}
}

/* Keep information header on one responsive line */
.facts{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(4px,2vw,28px);width:min(100%,900px)}
.facts div:nth-child(n){display:block;grid-column:auto;margin:0;min-width:0}
.facts span,.facts strong{white-space:nowrap}
@media(max-width:600px){
  .info{width:calc(100% - 8px)}
  .facts{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin-top:12px;padding:0}
  .facts div:nth-child(n){grid-column:auto;margin:0}
  .facts span{font-size:clamp(5px,1.65vw,7px);letter-spacing:0}
  .facts strong{font-size:clamp(5.5px,1.85vw,9px);letter-spacing:-.02em}
}

/* Center moon: 5% smaller */
.planet{scale:.95}

/* Shared responsive coordinate center */
.orbit,.planet,.moon-track{left:50%;top:50%}
.side-moon{top:50%}
.system{aspect-ratio:1;height:auto;max-height:min(710px,72vh)}
@media(max-width:900px){.system{height:auto;aspect-ratio:1;max-height:min(650px,70vh)}}
@media(max-width:600px){.system{height:auto;min-height:0;aspect-ratio:1;max-height:none}}

/* Minor crossing meteors */
.meteor-field{position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none}
.meteor{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:0;filter:drop-shadow(0 0 3px #bcd7ff);transform:rotate(-28deg)}
.meteor:after{content:"";position:absolute;right:1px;top:0;width:clamp(45px,7vw,105px);height:1px;background:linear-gradient(90deg,transparent,#b9d6ff80,#fff);transform-origin:right center}
.meteor-a{top:18%;left:-10%;animation:meteor-cross 11s 1.4s linear infinite}
.meteor-b{top:47%;left:-15%;animation:meteor-cross 16s 7s linear infinite;scale:.7}
.meteor-c{top:72%;left:-12%;animation:meteor-cross 21s 13s linear infinite;scale:.45}
@keyframes meteor-cross{
  0%,74%{translate:0 0;opacity:0}
  75%{opacity:0}
  77%{opacity:.75}
  88%{opacity:.75}
  90%,100%{translate:125vw -38vw;opacity:0}
}
@media(max-width:600px){
  .meteor-a{animation-duration:14s}.meteor-b{animation-duration:19s}.meteor-c{display:none}
  .meteor:after{width:48px}
}

/* Exact viewport-center solar system */
.system{left:50%;top:50%;transform:translate(-50%,-50%);width:min(1040px,100vw);height:auto;aspect-ratio:1;max-height:100vw}
@media(max-width:900px){.system{left:50%;top:50%;transform:translate(-50%,-50%);width:100vw;height:auto;aspect-ratio:1;max-height:none}}
@media(orientation:landscape) and (max-height:520px){.system{left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vh,760px);height:auto;aspect-ratio:1}}

/* Five varied comet paths */
.meteor-a{top:12%;left:-12%;animation:meteor-ne 9s 1s linear infinite}
.meteor-b{top:42%;left:-15%;animation:meteor-ne 14s 6s linear infinite;scale:.72}
.meteor-c{top:76%;left:-12%;animation:meteor-ne 19s 11s linear infinite;scale:.48}
.meteor-d{top:24%;left:auto;right:-12%;transform:rotate(152deg);animation:meteor-sw 12s 3s linear infinite;scale:.62}
.meteor-e{top:auto;bottom:-10%;left:28%;transform:rotate(-72deg);animation:meteor-north 17s 9s linear infinite;scale:.5}
@keyframes meteor-ne{
  0%,61%{translate:0 0;opacity:0}63%{opacity:.75}82%{opacity:.75}85%,100%{translate:125vw -38vw;opacity:0}
}
@keyframes meteor-sw{
  0%,66%{translate:0 0;opacity:0}68%{opacity:.7}84%{opacity:.7}87%,100%{translate:-125vw 36vw;opacity:0}
}
@keyframes meteor-north{
  0%,70%{translate:0 0;opacity:0}72%{opacity:.65}86%{opacity:.65}89%,100%{translate:38vw -125vh;opacity:0}
}
@media(max-width:600px){
  .meteor-a{animation-duration:11s}.meteor-b{animation-duration:15s}.meteor-c{display:block;animation-duration:20s}
  .meteor-d{animation-duration:14s}.meteor-e{animation-duration:18s}
}

/* Realistic comet rendering */
.meteor{
  --comet:#eaf6ff;--comet-rgb:196,225,255;--tail:110px;
  width:3px;height:3px;background:var(--comet);border-radius:50%;
  box-shadow:0 0 4px 1px #fff,0 0 11px 3px rgba(var(--comet-rgb),.72),0 0 24px 5px rgba(var(--comet-rgb),.2);
  filter:none;will-change:translate,opacity;
}
.meteor:before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 9%,rgba(var(--comet-rgb),.75) 18%,rgba(var(--comet-rgb),.18) 46%,transparent 72%);
  animation:comet-pulse .42s ease-in-out infinite alternate;
}
.meteor:after{
  content:"";position:absolute;right:1px;top:50%;width:var(--tail);height:3px;
  transform:translateY(-50%);transform-origin:right center;border-radius:100% 0 0 100%;
  background:linear-gradient(90deg,transparent 0,rgba(var(--comet-rgb),.03) 18%,rgba(var(--comet-rgb),.16) 52%,rgba(var(--comet-rgb),.58) 88%,#fff 100%);
  clip-path:polygon(0 45%,100% 0,100% 100%,0 55%);
  filter:blur(.35px);opacity:.9;
}
.meteor-a{--tail:145px;--comet:#f4fbff;--comet-rgb:205,231,255}
.meteor-b{--tail:92px;--comet:#d9edff;--comet-rgb:153,201,255}
.meteor-c{--tail:62px;--comet:#fff2cd;--comet-rgb:255,218,151}
.meteor-d{--tail:118px;--comet:#e7f2ff;--comet-rgb:180,213,255}
.meteor-e{--tail:78px;--comet:#d8f5e9;--comet-rgb:157,230,201}
@keyframes comet-pulse{from{scale:.82;opacity:.72}to{scale:1.18;opacity:1}}
@media(max-width:600px){.meteor{--tail:68px}.meteor-a{--tail:88px}.meteor-c{--tail:44px}}

/* Pixel-locked shared center for moon and coordinate rings */
.system{--system-center-x:50%;--system-center-y:50%}
.orbit,.planet{
  left:var(--system-center-x)!important;
  top:var(--system-center-y)!important;
  right:auto!important;bottom:auto!important;
  margin:0!important;
  translate:-50% -50%;
  transform:none;
  transform-origin:50% 50%;
}
.planet:hover{transform:scale(1.025)}
.space.changing .planet{transform:scale(.98);opacity:1}
@media(max-width:900px){.orbit,.planet{left:50%!important;top:50%!important}}
@media(max-width:600px){.orbit,.planet{left:50%!important;top:50%!important}}

/* Distant wandering alien craft */
.alien-path{position:absolute;z-index:3;left:-12%;top:64%;width:74px;height:34px;pointer-events:none;opacity:0;animation:alien-wander 58s 4s linear infinite;will-change:translate,rotate,opacity}
.alien-ship{position:absolute;inset:0;display:block;filter:drop-shadow(0 0 7px #83ffd18c);animation:alien-hover 2.8s ease-in-out infinite alternate}
.alien-dome{position:absolute;left:25px;top:2px;width:25px;height:15px;border-radius:50% 50% 35% 35%;background:radial-gradient(circle at 38% 28%,#dfffff,#73c6be 27%,#1d3e4c 68%,#071017);border:1px solid #b5fff088;box-shadow:inset 0 -4px 6px #07131b,0 0 5px #8affdd55}
.alien-body{position:absolute;left:7px;top:13px;width:61px;height:14px;border-radius:50%;background:linear-gradient(#b6c3c4,#3d5156 42%,#111b20 68%,#6c7f7c);border-top:1px solid #e4ffff99;box-shadow:0 4px 8px #000b}
.alien-body:after{content:"";position:absolute;left:13px;bottom:-3px;width:35px;height:5px;border-radius:50%;background:#10191b;box-shadow:0 2px 8px #62ffd766}
.alien-lights{position:absolute;left:16px;top:21px;width:4px;height:4px;border-radius:50%;background:#8effda;box-shadow:11px 2px 0 #d9ff74,22px 2px 0 #8effda,33px 0 0 #ff9c78,0 0 6px #8effda,11px 2px 6px #d9ff74,22px 2px 6px #8effda,33px 0 6px #ff9c78}
@keyframes alien-hover{to{translate:0 -4px;transform:rotate(2deg)}}
@keyframes alien-wander{
  0%,4%{translate:0 0;rotate:-8deg;opacity:0}
  8%{opacity:.52}
  24%{translate:30vw -22vh;rotate:9deg;opacity:.58}
  43%{translate:61vw -8vh;rotate:-4deg;opacity:.48}
  62%{translate:86vw -42vh;rotate:13deg;opacity:.55}
  79%{translate:116vw -25vh;rotate:-10deg;opacity:.4}
  86%,100%{translate:130vw -56vh;rotate:6deg;opacity:0}
}
@media(max-width:600px){.alien-path{scale:.68;animation-duration:46s}}

/* Serious angular spacecraft */
.alien-path{border:0;background:none;padding:0;cursor:crosshair;pointer-events:auto}
.alien-ship{filter:drop-shadow(0 4px 6px #000) drop-shadow(0 0 5px #8fb7cf55)}
.alien-body{left:2px;top:9px;width:70px;height:22px;border:1px solid #7d8b91;background:linear-gradient(165deg,#9ca8ab 0,#38444a 28%,#10171c 62%,#58666a 100%);border-radius:0;clip-path:polygon(0 50%,22% 22%,42% 5%,88% 33%,100% 50%,88% 67%,42% 95%,22% 78%);box-shadow:inset 0 1px #d4dde055,0 5px 9px #000b}
.alien-body:before{content:"";position:absolute;left:16px;top:9px;width:42px;height:2px;background:linear-gradient(90deg,transparent,#aebdc3,#39474d,transparent);opacity:.75}
.alien-body:after{left:8px;bottom:4px;width:12px;height:9px;border-radius:50%;background:#8edfff;box-shadow:0 0 5px #fff,0 0 13px #67caff,44px 0 0 #8edfff,44px 0 5px #fff,44px 0 13px #67caff;filter:blur(.3px)}
.alien-dome{z-index:2;left:27px;top:5px;width:21px;height:11px;border-radius:70% 70% 25% 25%;background:linear-gradient(150deg,#66808d,#14232c 48%,#05090c);border:1px solid #8fa7af88;box-shadow:inset 0 1px #d3edfa66}
.alien-lights{z-index:3;left:32px;top:25px;width:9px;height:2px;border-radius:0;background:#a8c8d3;box-shadow:0 0 4px #8edfff}
.alien-path:hover .alien-ship{filter:drop-shadow(0 4px 7px #000) drop-shadow(0 0 8px #9edfff88)}
.alien-path:focus-visible{outline:1px solid #b7ddeb;outline-offset:8px}
.system{pointer-events:none}.planet,.side-moon{pointer-events:auto}

/* Provided alien ship artwork */
.alien-path{width:94px;height:48px}
.alien-ship{inset:0;overflow:hidden;filter:drop-shadow(0 5px 7px #000) drop-shadow(0 0 6px #9fc7d766)}
.alien-ship img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%;display:block;transform:scale(1.05)}
.alien-path:hover .alien-ship{filter:drop-shadow(0 5px 8px #000) drop-shadow(0 0 9px #b9e7ff99)}

/* Crop new ship artwork to flight silhouette */
.alien-path{width:104px;height:40px}
.alien-ship img{inset:auto;left:0;top:-28px;width:104px;height:104px;max-width:none;object-fit:fill;transform:none}

/* Moon information drawer */
.view-more{position:absolute;z-index:14;left:50%;top:calc(50% + clamp(115px,17vw,220px));translate:-50% -50%;border:1px solid #eee9bc66;border-radius:999px;background:#060810b8;color:#eee9bc;padding:10px 16px;font:600 8px Montserrat;letter-spacing:.18em;cursor:pointer;backdrop-filter:blur(8px);box-shadow:0 5px 25px #0008;pointer-events:auto;transition:.25s}
.view-more span{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:8px;border:1px solid #eee9bc55;border-radius:50%;font-size:12px;line-height:1}
.view-more:hover{background:#eee9bc;color:#060710;transform:translateY(-2px)}
.drawer-shade{position:fixed;z-index:40;inset:0;background:#0008;backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.drawer-shade.open{opacity:1;visibility:visible}
.moon-drawer{position:fixed;z-index:41;top:0;right:0;width:min(440px,100vw);height:100svh;background:linear-gradient(155deg,#111522 0,#070912 55%,#020307 100%);border-left:1px solid #fff2;box-shadow:-28px 0 70px #000b;translate:102% 0;transition:translate .65s cubic-bezier(.77,0,.18,1);overflow:hidden}
.moon-drawer.open{translate:0 0}
.drawer-close{position:absolute;z-index:2;right:22px;top:20px;width:42px;height:42px;border:1px solid #fff3;border-radius:50%;background:#ffffff08;color:#f1eec8;font:300 28px/1 Arial;cursor:pointer;transition:.25s}
.drawer-close:hover{rotate:90deg;background:#ffffff15}
.drawer-scroll{height:100%;overflow-y:auto;padding:clamp(70px,10vh,110px) clamp(28px,6vw,58px) 60px}
.drawer-kicker{margin:0 0 15px;color:#81889f;font-size:8px;font-weight:600;letter-spacing:.28em}
.moon-drawer h2{margin:0;color:#f1edbd;font-size:clamp(35px,5vw,58px);font-weight:400;letter-spacing:.16em;line-height:1.05;overflow-wrap:anywhere}
.drawer-parent{margin:16px 0 38px;color:#858b9d;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.drawer-parent strong{color:#d8d5ba}
.drawer-copy{color:#bdc0c9;font-size:13px;line-height:1.9}
.drawer-rule{height:1px;margin:38px 0;background:linear-gradient(90deg,#eee9bc77,transparent)}
.moon-drawer h3{margin:0 0 22px;color:#eee9bc;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.drawer-specs{display:grid;grid-template-columns:1fr 1fr;gap:25px 18px;margin:0}.drawer-specs div{border-top:1px solid #fff1;padding-top:12px}.drawer-specs dt{color:#72798d;font-size:7px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}.drawer-specs dd{margin:7px 0 0;color:#e5e1bf;font-size:11px;line-height:1.4}
.drawer-note{margin:38px 0 0;padding:18px;border:1px solid #fff1;color:#777e91;font-size:9px;line-height:1.7;letter-spacing:.06em}
.purchase-button{display:flex;align-items:center;justify-content:space-between;margin:38px 0 0;padding:17px 18px;border:1px solid #eee9bc66;color:#eee9bc;background:linear-gradient(90deg,#eee9bc0a,transparent);font-size:9px;font-weight:600;letter-spacing:.22em;text-decoration:none;transition:background .3s,color .3s,border-color .3s,transform .3s}
.purchase-button span{display:grid;place-items:center;width:26px;height:26px;border:1px solid currentColor;border-radius:50%;font-size:13px;letter-spacing:0;transition:transform .3s}
.purchase-button:hover{background:#eee9bc;color:#070912;border-color:#eee9bc;transform:translateY(-2px)}
.purchase-button:hover span{transform:rotate(45deg)}

/* Runtime and animation performance */
html,body{background:#000}
.space{touch-action:pan-y;overscroll-behavior:none;isolation:isolate}
.system{contain:layout style}
.planet,.planet-texture,.side-orb,.lollipop-moon{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.space.changing .planet,.space.changing .planet-texture{will-change:transform,opacity,filter}
.moon-drawer{will-change:translate;contain:layout paint style}
.drawer-shade{will-change:opacity;transform:translateZ(0)}
.moon-drawer img,.alien-ship img{-webkit-user-drag:none;user-select:none}
.page-hidden .stars,.page-hidden .moon-track,.page-hidden .alien-ship,.page-hidden .meteor{animation-play-state:paused!important}
@media(hover:none){.planet:hover{transform:none}.side-moon:hover .side-orb{transform:none}.view-more:hover,.purchase-button:hover{transform:none}}
@media(update:slow){.drawer-shade{backdrop-filter:none}.moon-drawer{box-shadow:-14px 0 36px #000b}.nebula{filter:blur(14px)}}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .meteor-field,.alien-path{display:none!important}
}

/* Exact desktop center for bottom navigation text */
@media(min-width:761px){
  .controls{width:270px;display:grid;grid-template-columns:32px 1fr 32px;gap:0;justify-items:center}
  .controls span{width:100%;text-align:center;white-space:nowrap;align-self:center}
}

/* Exact responsive center for mobile bottom navigation */
@media(max-width:760px){
  .controls{left:50%;bottom:max(14px,env(safe-area-inset-bottom));width:min(360px,calc(100vw - 32px));display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:0;justify-items:center;transform:translateX(-50%)}
  .controls span{display:block;width:100%;text-align:center;white-space:nowrap;align-self:center;line-height:1.3}
}

/* SCF logo — top-left home link */
.corner-logo{position:absolute;z-index:45;left:max(18px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));width:clamp(58px,6vw,90px);aspect-ratio:15/8;height:auto;display:block;transition:opacity .25s,transform .25s}
.corner-logo img{display:block;width:100%;height:auto;aspect-ratio:15/8;object-fit:contain}
.corner-logo:hover{opacity:.82;transform:translateY(-2px)}
.corner-logo:focus-visible{outline:1px solid #eee9bc;outline-offset:5px}
@media(max-width:760px){.corner-logo{left:max(10px,env(safe-area-inset-left));top:max(9px,env(safe-area-inset-top));width:clamp(46px,12vw,58px);height:auto}}
@media(max-width:380px){.corner-logo{width:clamp(42px,12vw,46px)}}
.corner-language{position:absolute;z-index:30;right:24px;top:23px;display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#eee9bc;padding:5px;font:600 8px Montserrat;letter-spacing:.14em;cursor:pointer;opacity:.9;transition:opacity .25s,transform .25s}
.corner-language span{display:grid;place-items:center;width:24px;height:24px;border:1px solid #fff4;border-radius:50%;font-size:14px;line-height:1;background:#070912aa}
.corner-language b{font:inherit}
.corner-language:hover{opacity:1;transform:translateY(-2px)}
.corner-language:focus-visible{outline:1px solid #eee9bc;outline-offset:4px}
@media(max-width:760px){.corner-language{right:9px;top:8px;padding:3px}.corner-language span{width:22px;height:22px;font-size:12px}.corner-language b{display:none}}

/* Folding language menu */
.corner-language-menu{position:absolute;z-index:45;right:24px;top:18px}
body:has(.moon-drawer.open) .corner-language-menu{right:76px}
.corner-language{position:relative;right:auto;top:auto;padding:5px;z-index:2}
.corner-language i{font:400 13px Arial;transition:transform .25s}
.corner-language-menu.open .corner-language i{transform:rotate(180deg)}
.corner-language-list{position:absolute;right:0;top:calc(100% + 8px);width:150px;padding:7px;border:1px solid #fff2;border-radius:8px;background:#090c17e8;box-shadow:0 14px 35px #000a;backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top right;transition:opacity .25s,visibility .25s,transform .25s}
.corner-language-menu.open .corner-language-list{opacity:1;visibility:visible;transform:none}
.corner-language-list button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:5px;background:transparent;color:#d9d8cb;font:500 9px Montserrat;text-align:left;cursor:pointer;transition:background .2s,color .2s}
.corner-language-list button:hover,.corner-language-list button.active{background:#eee9bc14;color:#eee9bc}
.corner-language-list button span{font-size:15px}
.view-more em,.purchase-button em{font:inherit;font-style:normal}
@media(max-width:760px){.corner-language-menu{right:9px;top:8px}.corner-language{right:auto;top:auto}.corner-language i{display:none}.corner-language-list{width:138px}}

/* Match Solar System Explorer header-control sizing and placement. */
.corner-logo{
  left:clamp(16px,2.2vw,30px);
  top:0;
  display:flex;
  align-items:center;
  width:94px;
  height:56px;
  aspect-ratio:auto;
  overflow:hidden;
  border-radius:8px;
}
.corner-logo img{width:100%;max-width:94px;max-height:40px;aspect-ratio:auto;object-fit:contain}
.corner-language-menu{right:clamp(16px,2.2vw,30px);top:9px}
.corner-language{min-height:38px;padding:5px 9px 5px 7px;gap:8px;border:1px solid transparent;border-radius:999px}
.corner-language span{width:23px;height:23px}
.corner-language b,.corner-language i{display:block}
@media(max-width:640px){
  .corner-logo{left:12px;top:0;width:72px;height:52px}
  .corner-logo img{max-width:72px;max-height:34px}
  .corner-language-menu{right:12px;top:9px}
  .corner-language{min-width:34px;min-height:34px;justify-content:center;padding:5px}
  .corner-language span{width:22px;height:22px}
  .corner-language b{display:none}
}
[lang="ru"] .facts span,[lang="hy"] .facts span{white-space:normal;line-height:1.15}
[lang="hy"] .drawer-kicker,[lang="hy"] .moon-drawer h3{letter-spacing:.08em}
@media(max-width:600px){.view-more{top:calc(50% + 112px);padding:8px 12px;font-size:7px}.moon-drawer{width:100vw}.drawer-scroll{padding:76px 24px 40px}.moon-drawer h2{font-size:36px}.drawer-copy{font-size:12px}}
.drawer-logo{position:relative;display:block;width:68px;height:96px;margin:-20px auto 20px;overflow:hidden}
.drawer-logo img{position:absolute;left:-10px;top:-6px;width:227px;height:119px;display:block;max-width:none}
@media(max-width:600px){.drawer-logo{width:56px;height:80px;margin:-20px auto 18px}.drawer-logo img{left:-9px;top:-5px;width:189px;height:100px}}

/* Procedural alien appearances replace fixed route */
.alien-path{animation:none;opacity:0}

/* Fully responsive information drawer */
.moon-drawer{width:clamp(390px,32vw,500px);max-width:100vw;height:100dvh}
.drawer-scroll{padding-top:clamp(64px,9vh,96px);padding-right:clamp(30px,4vw,58px);padding-bottom:max(48px,env(safe-area-inset-bottom));padding-left:clamp(30px,4vw,58px);overscroll-behavior:contain}
.drawer-close{top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right))}
.drawer-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1600px){
  .moon-drawer{width:500px}
  .drawer-copy{font-size:14px;line-height:2}
  .drawer-specs dd{font-size:12px}
}
@media(max-width:1100px){
  .moon-drawer{width:min(44vw,460px)}
  .drawer-scroll{padding-right:34px;padding-left:34px}
}
@media(max-width:760px){
  .moon-drawer{width:min(88vw,430px)}
  .drawer-scroll{padding-top:max(70px,calc(env(safe-area-inset-top) + 54px));padding-right:26px;padding-left:26px}
  .moon-drawer h2{font-size:clamp(32px,8vw,44px)}
  .drawer-parent{margin-bottom:28px}
  .drawer-copy{font-size:12px;line-height:1.8}
}
@media(max-width:520px){
  .moon-drawer{width:100vw;border-left:0}
  .drawer-shade{backdrop-filter:none}
  .drawer-scroll{padding-right:20px;padding-left:20px}
  .drawer-close{width:38px;height:38px;font-size:25px}
  .drawer-specs{gap:20px 12px}
  .drawer-specs dd{font-size:10px}
  .drawer-note{margin-top:28px}
}
@media(max-width:360px){
  .drawer-specs{grid-template-columns:1fr}
  .drawer-logo{margin-top:-10px}
  .moon-drawer h2{font-size:30px}
}
@media(orientation:landscape) and (max-height:560px){
  .moon-drawer{width:min(52vw,460px)}
  .drawer-scroll{padding-top:32px;padding-bottom:30px}
  .drawer-logo{width:46px;height:65px;margin:0 auto 12px}
  .drawer-logo img{left:-6px;top:-4px;width:154px;height:81px}
  .drawer-parent{margin:10px 0 18px}
  .drawer-rule{margin:22px 0}
}

/* Correct drawer-logo scale and placement */
@media(min-width:761px){
  .drawer-scroll{padding-top:34px}
  .drawer-logo{width:90px;height:130px;margin:0 auto 24px}
  .drawer-logo img{left:-15px;top:-9px;width:307px;height:162px}
}
@media(max-width:760px){
  .drawer-logo{width:72px;height:104px;margin:0 auto 20px}
  .drawer-logo img{left:-12px;top:-7px;width:246px;height:130px}
}
@media(orientation:landscape) and (max-height:560px){
  .drawer-scroll{padding-top:24px}
  .drawer-logo{width:60px;height:87px;margin:0 auto 14px}
  .drawer-logo img{left:-10px;top:-6px;width:205px;height:108px}
}

/* Final logo fit: full mark, 15px smaller, centered */
@media(min-width:761px){
  .drawer-logo{width:75px;height:119px;margin:0 auto 22px;overflow:hidden}
  .drawer-logo img{left:-15px;top:-6px;width:272px;height:143px}
}
@media(max-width:760px){
  .drawer-logo{width:57px;height:93px;margin:0 auto 18px;overflow:hidden}
  .drawer-logo img{left:-12px;top:-5px;width:210px;height:111px}
}
@media(orientation:landscape) and (max-height:560px){
  .drawer-logo{width:50px;height:80px;margin:0 auto 12px}
  .drawer-logo img{left:-10px;top:-4px;width:184px;height:97px}
}

/* Full horizontal SCF logo and reference spacing */
@media(min-width:761px){
  .drawer-scroll{padding-top:40px}
  .drawer-logo{width:180px;height:95px;margin:0 auto 48px;overflow:visible}
  .drawer-logo img{position:static;width:180px;height:95px;object-fit:contain;display:block}
}
@media(max-width:760px){
  .drawer-logo{width:145px;height:76px;margin:0 auto 34px;overflow:visible}
  .drawer-logo img{position:static;width:145px;height:76px;object-fit:contain;display:block}
}
@media(orientation:landscape) and (max-height:560px){
  .drawer-logo{width:120px;height:63px;margin:0 auto 18px}
  .drawer-logo img{position:static;width:120px;height:63px;object-fit:contain}
}

/* Current moon inside lollipop */
.lollipop-display{margin:38px auto 28px;text-align:center}
.lollipop-shell{position:relative;width:220px;aspect-ratio:474/917;margin:0 auto}
.lollipop-shell>img{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.lollipop-moon{position:absolute;z-index:2;left:15.4%;top:3.9%;width:68.8%;aspect-ratio:1;border-radius:50%;background-image:var(--texture);background-size:cover;background-position:center;mix-blend-mode:multiply;filter:saturate(.82) contrast(1.03);opacity:.88;box-shadow:inset -18px -12px 30px #07101c73}
.lollipop-glass{position:absolute;z-index:3;left:15.4%;top:3.9%;width:68.8%;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 33% 25%,#fff9 0 2%,#fff2 12%,transparent 31%),linear-gradient(115deg,#d9ffff30,transparent 34%,#bce9f22b 75%,#fff6);box-shadow:inset 0 0 10px #fff,inset 7px 0 13px #c5f2f5aa,inset -8px -4px 16px #9ab9bd88,0 0 12px #d6ffff66}
.lollipop-display figcaption{margin-top:10px;color:#777f93;font-size:7px;font-weight:600;letter-spacing:.2em}
@media(max-width:760px){.lollipop-shell{width:190px}.lollipop-display{margin:30px auto 24px}}
@media(max-width:420px){.lollipop-shell{width:165px}}
@media(orientation:landscape) and (max-height:560px){.lollipop-shell{width:145px}.lollipop-display{margin:22px auto 18px}}

/* Moon texture 10% smaller than lollipop sphere */
.lollipop-moon{left:49.8%;top:21.68%;width:55.5%;translate:-50% -50%}

/* Floating moon navigation */
.moon-jump{position:fixed;z-index:29;left:max(22px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));touch-action:auto}
.moon-jump-toggle{position:relative;width:58px;height:58px;padding:6px;border:1px solid #b9c8ed7a;border-radius:50%;background:radial-gradient(circle at 35% 25%,#222b45,#060914 72%);box-shadow:0 0 0 1px #fff1 inset,0 10px 28px #000a,0 0 25px color-mix(in srgb,var(--accent) 34%,transparent);cursor:pointer;touch-action:none;transition:transform .35s,border-color .35s,box-shadow .35s}
.moon-jump-toggle:hover{transform:translateY(-3px);border-color:#eee9bc;box-shadow:0 0 0 1px #fff1 inset,0 14px 32px #000c,0 0 32px color-mix(in srgb,var(--accent) 55%,transparent)}
.moon-jump-toggle:focus-visible{outline:1px solid #eee9bc;outline-offset:5px}
.moon-jump-orb{display:block;width:100%;height:100%;border-radius:50%;background-image:var(--texture);background-size:cover;background-position:center;box-shadow:inset -9px -5px 14px #000d,inset 4px 3px 8px #fff4;transition:transform .5s,background-image .4s}
.moon-jump-toggle:after{content:"";position:absolute;right:-1px;bottom:5px;width:10px;height:10px;border:2px solid #070914;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.moon-jump.open .moon-jump-toggle{border-color:#eee9bc;transform:rotate(18deg)}
.moon-jump.dragging .moon-jump-toggle{cursor:grabbing;transform:scale(1.06);box-shadow:0 18px 38px #000d,0 0 38px color-mix(in srgb,var(--accent) 70%,transparent)}
.moon-jump-panel{position:absolute;left:var(--jump-panel-x,0);bottom:calc(100% + 14px);width:min(420px,calc(100vw - 44px));max-height:min(60vh,520px,var(--jump-room,520px));padding:16px 10px 10px;border:1px solid #dbe1ff28;border-radius:12px;background:linear-gradient(145deg,#0c1124f2,#03050df2);box-shadow:0 24px 70px #000d,0 0 40px color-mix(in srgb,var(--accent) 10%,transparent);backdrop-filter:blur(18px);opacity:0;visibility:hidden;touch-action:pan-y;transform:translateY(12px) scale(.96);transform-origin:bottom left;transition:opacity .3s,visibility .3s,transform .3s}
.moon-jump.open .moon-jump-panel{opacity:1;visibility:visible;transform:none}
.moon-jump-heading{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:9px;padding:0 3px 11px 9px;border-bottom:1px solid #fff1;color:#eee9bc;font-size:8px;font-weight:600;letter-spacing:.2em}
.moon-jump-heading b{display:grid;place-items:center;min-width:25px;height:20px;border:1px solid #eee9bc55;border-radius:12px;font-size:8px;font-weight:500;letter-spacing:0}
.moon-jump-close{display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid #fff3;border-radius:50%;background:#ffffff08;color:#eee9bc;font:300 19px/1 Arial;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.moon-jump-close:hover{border-color:#eee9bcaa;background:#eee9bc16;transform:rotate(90deg)}
.moon-jump-close:focus-visible{outline:1px solid #eee9bc;outline-offset:3px}
.moon-jump-home{display:grid;grid-template-columns:34px 1fr 20px;align-items:center;gap:10px;margin:9px 0 6px;padding:8px 9px;border:1px solid #eee9bc28;border-radius:7px;background:linear-gradient(90deg,#eee9bc12,transparent);color:#eee9bc;text-decoration:none;transition:background .2s,border-color .2s}
.moon-jump-home:hover{border-color:#eee9bc66;background:#eee9bc1c}
.moon-jump-home-mark{position:relative;display:block;width:30px;height:30px;overflow:hidden;border:1px solid #eee9bc66;border-radius:50%;background:radial-gradient(circle at 42% 35%,#26314d,#080b15 68%);box-shadow:inset 0 0 0 1px #fff1,0 0 9px color-mix(in srgb,var(--accent) 30%,transparent)}
.moon-jump-home-mark:before{content:"";position:absolute;z-index:3;left:50%;top:50%;width:13px;height:13px;translate:-50% -50%;border-radius:50%;background-image:var(--texture);background-size:cover;background-position:center;box-shadow:inset -3px -2px 5px #000b,0 0 5px color-mix(in srgb,var(--accent) 60%,transparent)}
.moon-jump-home-mark:after,.moon-jump-home-mark i{position:absolute;z-index:2;left:50%;top:50%;width:24px;height:9px;translate:-50% -50%;border:1px solid #d9e6ff91;border-radius:50%;content:"";transform:rotate(-24deg)}
.moon-jump-home-mark i{display:block;width:23px;height:8px;border-color:color-mix(in srgb,var(--accent) 82%,#eee9bc);transform:rotate(25deg)}
.moon-jump-home-mark i:after{content:"";position:absolute;right:1px;top:-1px;width:3px;height:3px;border-radius:50%;background:#eee9bc;box-shadow:0 0 4px #eee9bc}
.moon-jump-home em{font:600 8px Montserrat;font-style:normal;letter-spacing:.15em}.moon-jump-home b{font:400 13px Montserrat;text-align:center}
.moon-jump-list{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-height:calc(min(60vh,520px,var(--jump-room,520px)) - 112px);margin-top:4px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#eee9bc55 transparent}
.moon-jump-list button{display:grid;grid-template-columns:30px minmax(0,1fr) 18px;align-items:center;gap:8px;min-width:0;padding:7px;border:1px solid transparent;border-radius:7px;background:transparent;color:#aeb2c1;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.moon-jump-list button>span{width:30px;aspect-ratio:1;border-radius:50%;background-image:var(--thumb);background-size:cover;background-position:center;box-shadow:inset -6px -3px 9px #000c,0 0 8px #829cff24}
.moon-jump-list em{overflow:hidden;font:500 12px Montserrat;font-style:normal;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap}
.moon-jump-list small{color:#646a80;font:500 7px Montserrat;text-align:right}
.moon-jump-list button:hover,.moon-jump-list button.active{border-color:#eee9bc30;background:#eee9bc0c;color:#eee9bc}
.moon-jump-list button.active>span{box-shadow:inset -6px -3px 9px #000c,0 0 12px var(--accent)}
.moon-jump.open-down .moon-jump-panel{top:calc(100% + 14px);bottom:auto;transform-origin:top left}
.moon-jump.align-right .moon-jump-panel{right:auto;transform-origin:bottom right}.moon-jump.align-right.open-down .moon-jump-panel{transform-origin:top right}
@media(max-width:760px){.moon-jump{left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom))}.moon-jump-toggle{width:48px;height:48px;padding:5px}.moon-jump-panel{width:min(420px,calc(100vw - 16px));max-height:min(54vh,430px,var(--jump-room,430px))}.moon-jump-list{max-height:calc(min(54vh,430px,var(--jump-room,430px)) - 112px)}}
@media(max-width:420px){.moon-jump-panel{left:var(--jump-panel-x,0);right:auto}.moon-jump-list{grid-template-columns:1fr}.moon-jump-list button{padding:6px 8px}.moon-jump-heading{padding-bottom:10px}}

/* Laptop performance profile */
.nebula{filter:none;inset:0;transition:background .45s}
.stars-a,.stars-a:before,.stars-b{animation:none!important}
.stars-b:after{filter:none;opacity:.1}
.meteor:before{animation:none}
.meteor:after{filter:none}
.planet{box-shadow:inset -35px -16px 52px #02040dd9,inset 18px 10px 28px #fff2,0 0 24px color-mix(in srgb,var(--accent) 58%,transparent),0 0 58px color-mix(in srgb,var(--accent) 24%,transparent);transition:box-shadow .45s}
.moon-track,.moon-track .satellite{will-change:transform}
.track-d,.track-e{animation-duration:72s}
.corner-language-list,.moon-jump-panel,.view-more,.drawer-shade{backdrop-filter:none}

/* Language selector shared visual language with HOME and SSE. */
.corner-language-menu{right:clamp(16px,2.2vw,30px);top:14px}
.corner-language{min-height:38px;padding:5px 10px 5px 7px;gap:8px;border:1px solid #ffffff24;border-radius:999px;background:#090b0db8;color:#eee;opacity:1;backdrop-filter:blur(12px);transition:background .25s,border-color .25s,box-shadow .25s,transform .25s}
.corner-language:hover,.corner-language:focus-visible,.corner-language-menu.open .corner-language{border-color:#ffffff45;background:#11151acc;box-shadow:0 5px 15px #0006;transform:translateY(-1px)}
.corner-language #language-flag{display:block;width:23px;height:23px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px #ffffff38}
.corner-language b{font:600 9px Montserrat;letter-spacing:.12em}
.corner-language i{width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #aaa;font-size:0}
.corner-language-menu.open .corner-language i{transform:rotate(180deg)}
.corner-language-list{top:calc(100% + 8px);width:140px;padding:7px;border:1px solid #ffffff24;border-radius:12px;background:#080a0ced;box-shadow:0 18px 40px #0009;backdrop-filter:blur(14px)}
.corner-language-list button{gap:9px;padding:8px;border-radius:8px;color:#ddd;font:500 10px Montserrat}
.corner-language-list button img{width:22px;height:22px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px #ffffff24}
.corner-language-list button:hover,.corner-language-list button.active{background:#ffffff12;color:#fff}
@media(max-width:760px){.corner-language-menu{right:10px;top:9px}.corner-language{min-width:40px;min-height:38px;padding:5px 7px}.corner-language b,.corner-language i{display:none}.corner-language-list{right:0;width:140px}}
@media(max-width:760px){.corner-language{min-width:64px}.corner-language b{display:block}.corner-language i{display:none}}
.moon-drawer{visibility:hidden;transition:translate .42s cubic-bezier(.4,0,.2,1),visibility 0s .42s;box-shadow:-18px 0 42px #000a}
.moon-drawer.open{visibility:visible;transition:translate .42s cubic-bezier(.4,0,.2,1),visibility 0s}
.drawer-shade{transition:opacity .3s,visibility .3s}
.space.changing .planet-texture{animation-duration:.65s}
@keyframes moon-change-spin{0%{transform:rotate(0) scale(1);opacity:1}48%{transform:rotate(155deg) scale(.94);opacity:.18}52%{transform:rotate(205deg) scale(.94);opacity:.18}100%{transform:rotate(360deg) scale(1);opacity:1}}
@media(max-width:1100px){.meteor-d,.meteor-e{display:none}.track-d,.track-e{animation:none}.satellite{box-shadow:0 0 7px currentColor}}
@media(max-width:600px){.meteor-c{display:none}.planet{box-shadow:inset -28px -12px 42px #02040dd9,inset 12px 8px 20px #fff2,0 0 20px color-mix(in srgb,var(--accent) 48%,transparent),0 0 38px color-mix(in srgb,var(--accent) 18%,transparent)}}

/* Smooth, low-cost moon changes */
.planet-texture{transform-origin:50% 50%;backface-visibility:hidden;transition:opacity .28s ease}
.space.changing .planet-texture{animation:none}
.space.center-changing .planet-texture{animation:moon-change-smooth 2.4s cubic-bezier(.37,0,.18,1)}
@keyframes moon-change-smooth{0%{transform:rotate(0) scale(1);opacity:1}22%{transform:rotate(75deg) scale(.997);opacity:.82}34%{transform:rotate(138deg) scale(.99);opacity:.22}42%{transform:rotate(218deg) scale(.99);opacity:.22}68%{transform:rotate(318deg) scale(.997);opacity:.86}100%{transform:rotate(360deg) scale(1);opacity:1}}
.side-orb{will-change:transform,opacity;transition:opacity .55s ease-in-out,transform .9s cubic-bezier(.22,.75,.22,1)}
.side-moon b{transition:opacity .5s ease-in-out,transform .75s cubic-bezier(.22,.75,.22,1)}
.space.changing .side-orb{opacity:.26;transform:scale(.94)}
.space.changing .previous .side-orb{transform:scale(.94) translateX(-5px) rotate(-2deg)}
.space.changing .next .side-orb{transform:scale(.94) translateX(5px) rotate(2deg)}
.space.changing .side-moon b{opacity:.3}
.space.changing .previous b{transform:translateX(-3px)}
.space.changing .next b{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.side-orb,.side-moon b,.planet-texture{transition:none!important}}

/* Low-cost deep-space shimmer */
.stars-a{will-change:opacity;animation:cosmic-shine-a 9s ease-in-out infinite alternate!important}
.stars-a:before{will-change:opacity;animation:cosmic-shine-b 6.8s 1.4s ease-in-out infinite alternate!important}
.stars-b{will-change:opacity;animation:cosmic-shine-c 12s 3s ease-in-out infinite alternate!important}
@keyframes cosmic-shine-a{0%{opacity:.54}38%{opacity:.78}72%{opacity:.64}100%{opacity:.9}}
@keyframes cosmic-shine-b{0%{opacity:.24}46%{opacity:.7}70%{opacity:.4}100%{opacity:.82}}
@keyframes cosmic-shine-c{0%{opacity:.16}34%{opacity:.38}67%{opacity:.22}100%{opacity:.46}}
.page-hidden .stars,.page-hidden .stars:before{animation-play-state:paused!important}
@media(max-width:600px){.stars-a{animation-duration:13s!important}.stars-a:before{animation-duration:10s!important}.stars-b{animation-duration:16s!important}}
@media(prefers-reduced-motion:reduce){.stars-a,.stars-a:before,.stars-b{animation:none!important}}

/* Independent randomized star light */
.stars-a,.stars-a:before,.stars-b{animation:none!important}
.stars-a{opacity:.7}.stars-a:before{opacity:.48}.stars-b{opacity:.27}
.twinkle-field{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none;contain:strict}
.twinkle-star{position:absolute;width:var(--star-size);height:var(--star-size);border-radius:50%;background:#f8fbff;opacity:.12;box-shadow:0 0 4px #d9e8ffb8;will-change:opacity,transform;animation:star-pulse-a var(--star-duration) var(--star-delay) ease-in-out infinite}
.twinkle-1{background:#dceaff;animation-name:star-pulse-b}.twinkle-2{background:#fff1c8;animation-name:star-pulse-c}
@keyframes star-pulse-a{0%,100%{opacity:.1;transform:scale(.7)}19%{opacity:var(--star-peak);transform:scale(1.35)}37%{opacity:.22;transform:scale(.86)}71%{opacity:.58;transform:scale(1.05)}}
@keyframes star-pulse-b{0%,100%{opacity:.18;transform:scale(.82)}28%{opacity:.35;transform:scale(.94)}52%{opacity:var(--star-peak);transform:scale(1.42)}79%{opacity:.16;transform:scale(.76)}}
@keyframes star-pulse-c{0%,100%{opacity:.08;transform:scale(.68)}14%{opacity:.3;transform:scale(.9)}44%{opacity:.14;transform:scale(.72)}83%{opacity:var(--star-peak);transform:scale(1.3)}}
.page-hidden .twinkle-star{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.twinkle-field{display:none}}

/* Fixed moon size; glow-only hover */
.planet:hover{transform:none!important}
@media(hover:hover) and (pointer:fine){.planet:hover{box-shadow:inset -35px -16px 52px #02040dd9,inset 18px 10px 28px #fff2,0 0 38px color-mix(in srgb,var(--accent) 76%,transparent),0 0 82px color-mix(in srgb,var(--accent) 34%,transparent)}}

/* Eclipse transition and foreground moon depth */
.planet{z-index:20!important}
.side-moon{z-index:19!important}
.view-more{z-index:21}
.orbit{z-index:1}.moon-track{z-index:2}
.space.center-changing .planet-texture{animation:moon-eclipse-texture 2.4s cubic-bezier(.37,0,.18,1)}
.space.center-changing .planet-light{animation:moon-eclipse-light 2.4s cubic-bezier(.37,0,.18,1)}
@keyframes moon-eclipse-texture{0%{transform:translateX(0);opacity:1}28%{transform:translateX(-1.2%);opacity:.72}34%{transform:translateX(-1.8%);opacity:.2}42%{transform:translateX(1.8%);opacity:.2}68%{transform:translateX(.5%);opacity:.88}100%{transform:translateX(0);opacity:1}}
@keyframes moon-eclipse-light{0%{transform:translateX(-7%);opacity:.72}36%{transform:translateX(-2%);opacity:.95}50%{transform:translateX(7%);opacity:.7}72%{transform:translateX(2%);opacity:.9}100%{transform:translateX(0);opacity:1}}

/* Side moons remain fully visible */
.side-orb,.side-moon b{opacity:1!important;transition-property:transform!important}
.space.changing .side-orb,.space.changing .side-moon b{opacity:1!important}

/* High-refresh moon transitions: compositor-only motion, no side-moon fade */
.planet,.planet-texture,.planet-light,.side-orb{transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.space.center-changing .planet-texture{will-change:transform,opacity;animation:moon-eclipse-fluid 2.4s linear both}
.space.center-changing .planet-light{will-change:transform,opacity;animation:moon-light-fluid 2.4s linear both}
@keyframes moon-eclipse-fluid{
  0%{transform:translate3d(0,0,0);opacity:1}
  12%{transform:translate3d(-.28%,0,0);opacity:.96}
  24%{transform:translate3d(-.82%,0,0);opacity:.82}
  32%{transform:translate3d(-1.45%,0,0);opacity:.46}
  35%{transform:translate3d(-1.8%,0,0);opacity:.18}
  39%{transform:translate3d(1.8%,0,0);opacity:.18}
  48%{transform:translate3d(1.42%,0,0);opacity:.38}
  60%{transform:translate3d(.9%,0,0);opacity:.72}
  74%{transform:translate3d(.42%,0,0);opacity:.91}
  88%{transform:translate3d(.12%,0,0);opacity:.98}
  100%{transform:translate3d(0,0,0);opacity:1}
}
@keyframes moon-light-fluid{
  0%{transform:translate3d(-7%,0,0);opacity:.72}
  16%{transform:translate3d(-5.4%,0,0);opacity:.8}
  32%{transform:translate3d(-2%,0,0);opacity:.95}
  42%{transform:translate3d(2.2%,0,0);opacity:.88}
  52%{transform:translate3d(7%,0,0);opacity:.7}
  66%{transform:translate3d(4.3%,0,0);opacity:.78}
  82%{transform:translate3d(1.4%,0,0);opacity:.92}
  100%{transform:translate3d(0,0,0);opacity:1}
}
@media(prefers-reduced-motion:reduce){.space.center-changing .planet-texture,.space.center-changing .planet-light{animation:none!important}}

/* Responsive single-line drawer moon name */
.moon-drawer h2{width:100%;max-width:100%;font-size:clamp(30px,4vw,54px);line-height:1.08;letter-spacing:clamp(.06em,.7vw,.16em);white-space:nowrap;overflow:visible;overflow-wrap:normal;word-break:normal}
@media(max-width:760px){.moon-drawer h2{font-size:clamp(27px,8vw,40px);letter-spacing:clamp(.04em,1vw,.12em)}}
@media(max-width:360px){.moon-drawer h2{font-size:27px}}

/* Black information drawer at 90% opacity */
.moon-drawer{background:linear-gradient(155deg,rgba(7,7,8,.9) 0,rgba(2,2,3,.9) 52%,rgba(0,0,0,.9) 100%)}

/* Random James Webb telescope flyby */
.webb-flight{position:absolute;z-index:3;left:0;top:0;width:126px;height:104px;opacity:0;pointer-events:none;will-change:transform,opacity;transform-origin:center}
.webb-telescope{position:absolute;inset:0;filter:drop-shadow(0 5px 7px #000b) drop-shadow(0 0 5px #d7b45440)}
.webb-mirror{position:absolute;z-index:3;left:28px;top:0;width:78px;height:70px;transform:rotate(-4deg)}
.webb-mirror i{position:absolute;width:19px;height:22px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:linear-gradient(135deg,#fff1a3 0,#d9a321 38%,#79500d 72%,#f6cd50 100%);box-shadow:inset 0 0 0 1px #ffe99388}
.webb-sunshield{position:absolute;z-index:1;left:4px;top:60px;width:118px;height:36px;clip-path:polygon(4% 37%,50% 0,96% 37%,78% 76%,50% 100%,22% 76%);background:linear-gradient(165deg,#f8fbff 0,#8594a6 28%,#e8edf2 48%,#58687a 72%,#cbd3dc 100%);box-shadow:inset 0 -4px 7px #27334099}
.webb-sunshield:after{content:"";position:absolute;left:10%;right:10%;top:49%;height:1px;background:#fff8;box-shadow:0 5px #273747aa,0 -5px #ffffff55}
.webb-strut{position:absolute;z-index:2;top:52px;width:54px;height:2px;background:#9eaab1;transform-origin:right center}.webb-strut-left{left:10px;rotate:-23deg}.webb-strut-right{right:7px;rotate:203deg}
.webb-boom{position:absolute;z-index:2;left:66px;top:54px;width:3px;height:24px;background:linear-gradient(90deg,#3e474d,#c6d0d4,#343d43)}
.webb-antenna{position:absolute;z-index:4;right:10px;top:48px;width:22px;height:13px;border:2px solid #bdc8cb;border-radius:50%;transform:rotate(-22deg);background:radial-gradient(ellipse,#272f34 0 28%,#879398 31% 40%,transparent 43%)}
@media(max-width:600px){.webb-flight{width:104px;height:86px}}
@media(prefers-reduced-motion:reduce){.webb-flight{display:none}}

/* Photorealistic, lightweight Webb flyby */
.webb-flight{width:88px;height:59px}
.webb-photo{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px #000c) drop-shadow(0 0 3px #d8b64d45)}
@media(max-width:600px){.webb-flight{width:72px;height:48px}}

/* James Webb hover label */
.webb-flight{pointer-events:auto;cursor:help}
.webb-flight:after{content:attr(data-telescope-name);position:absolute;left:50%;bottom:calc(100% + 8px);translate:-50% 4px;width:max-content;max-width:240px;padding:7px 11px;border:1px solid #eee9bc4d;border-radius:4px;background:#020307e8;color:#eee9bc;box-shadow:0 6px 18px #000b;font:600 10px/1.25 Montserrat,Arial,sans-serif;letter-spacing:.13em;text-align:center;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .24s ease,translate .24s ease,visibility .24s;pointer-events:none}
.webb-flight:hover:after{opacity:1;visibility:visible;translate:-50% 0}
@media(hover:none){.webb-flight{pointer-events:none}}

/* Center moon reduced by 15px at every responsive size */
.planet{width:clamp(235px,calc(33vw - 15px),455px)}
@media(max-width:900px){.planet{width:clamp(215px,calc(44vw - 15px),375px)}}
@media(max-width:600px){.planet{width:clamp(195px,calc(61vw - 15px),285px)}}
@media(max-width:380px){.planet{width:190px}}
@media(orientation:landscape) and (max-height:520px){.planet{width:min(calc(40vw - 15px),285px)}}

/* Safari-safe middle moon transition: separate decoded paint layer */
.safari-planet-texture{display:none;position:absolute;z-index:1;inset:-8%;border-radius:50%;background-size:cover;background-position:center;filter:saturate(1.18) contrast(1.08);opacity:0;pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.safari .safari-planet-texture{display:block}
.safari .planet-light{z-index:2}
.safari .safari-center-changing .planet{transform:none!important;opacity:1!important}
.safari .safari-center-changing .planet-texture{animation:none!important;opacity:1!important}
.safari .safari-center-changing .safari-planet-texture{-webkit-animation:safari-moon-swap 1.6s cubic-bezier(.45,0,.2,1) both;animation:safari-moon-swap 1.6s cubic-bezier(.45,0,.2,1) both;will-change:transform,opacity}
@-webkit-keyframes safari-moon-swap{0%{-webkit-transform:translate3d(2.4%,0,0);opacity:0}28%{opacity:.18}62%{opacity:.82}100%{-webkit-transform:translate3d(0,0,0);opacity:1}}
@keyframes safari-moon-swap{0%{transform:translate3d(2.4%,0,0);opacity:0}28%{opacity:.18}62%{opacity:.82}100%{transform:translate3d(0,0,0);opacity:1}}
@media(prefers-reduced-motion:reduce){.safari .safari-center-changing .safari-planet-texture{animation:none!important;-webkit-animation:none!important}}

/* Exact circular moon clipping in Safari; outer glow stays uncut */
.planet{overflow:visible}
.planet-viewport{position:absolute;inset:0;display:block;border-radius:50%;overflow:hidden;isolation:isolate;-webkit-clip-path:circle(50% at 50% 50%);clip-path:circle(50% at 50% 50%);-webkit-mask-image:-webkit-radial-gradient(#fff,#000);transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.planet-viewport .planet-light{z-index:2}
.safari .planet-viewport{-webkit-clip-path:circle(49.95% at 50% 50%);clip-path:circle(49.95% at 50% 50%)}

/* Safari-safe native depth-glide carousel exchange */
.carousel-changing .planet,.carousel-changing .side-orb{will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.carousel-changing .planet{z-index:22!important}
.carousel-changing .side-moon{z-index:23!important;pointer-events:none}
.carousel-changing .side-moon b{opacity:0!important;visibility:hidden}
.carousel-changing .view-more{opacity:.42;pointer-events:none}
.carousel-changing .planet-viewport{-webkit-clip-path:circle(49.95% at 50% 50%);clip-path:circle(49.95% at 50% 50%)}
@media(prefers-reduced-motion:reduce){.carousel-changing .planet,.carousel-changing .side-orb{animation:none!important;transition:none!important}}

/* Lightweight orbital loading screen */
.site-loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#030405;transition:opacity .6s ease,visibility .6s ease}
.site-loader.leaving{opacity:0;visibility:hidden;pointer-events:none}
.site-loader-mark{position:relative;display:flex;align-items:center;justify-content:center;width:84px;height:84px}
.site-loader-mark img{position:relative;z-index:1;width:32px;filter:grayscale(1) brightness(3);opacity:.92;animation:site-loader-pulse 1.8s ease-in-out infinite}
.site-loader-ring{position:absolute;inset:0;border-radius:50%;border:1px solid #ffffff24;border-top-color:#f4f1eb;animation:site-loader-spin 1.1s linear infinite}
.site-loader-ring:before{content:"";position:absolute;inset:-16px;border-radius:50%;border:1px solid #ffffff14;border-top-color:#ffffff55;animation:site-loader-spin 2.6s linear infinite reverse}
.site-loader-label{position:absolute;bottom:calc(50% - 90px);left:50%;transform:translateX(-50%);font-size:8px;text-transform:uppercase;letter-spacing:.32em;color:#777;white-space:nowrap}
@keyframes site-loader-spin{to{transform:rotate(360deg)}}
@keyframes site-loader-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.site-loader-mark img,.site-loader-ring,.site-loader-ring:before{animation:none}.site-loader{transition-duration:.15s}}

/* Same three-ring SCF loader used by Solar System Explorer. */
@font-face{font-family:SSELoaderArista;src:url("../../SSE/css/theme/Arista 2.0_Alternate Regular.ttf") format("truetype");font-display:swap}


/* Exact shared corner geometry: HOME / SSE / MRL. */
.corner-logo{position:absolute;left:clamp(16px,2.2vw,30px);top:0;width:94px;height:56px;aspect-ratio:auto;display:flex;align-items:center;justify-content:flex-start}
.corner-logo img{width:94px;max-width:94px;height:auto;max-height:40px;aspect-ratio:auto;object-fit:contain}
.corner-language-menu{right:clamp(16px,2.2vw,30px);top:9px}
.corner-language{height:38px;min-height:38px;padding:5px 9px 5px 7px}
.corner-language #language-flag{width:23px;height:23px}
@media(max-width:760px){.corner-logo{left:12px;top:0;width:72px;height:52px}.corner-logo img{width:72px;max-width:72px;max-height:34px}.corner-language-menu{right:12px;top:9px}.corner-language{height:34px;min-height:34px;padding:5px 7px}.corner-language #language-flag{width:22px;height:22px}}

/* Moon drawer and its shade sit above the corner logo and language menu (z 45). */
.drawer-shade{z-index:50}
.moon-drawer{z-index:51}

/* Keep moons sharp while they glide: with will-change:transform the browser freezes the
   side moon at its small size and stretches it ~4x to the center. Without it, the
   browser draws the moving layer at the largest size it reaches. */
.side-orb,.carousel-changing .side-orb{will-change:auto!important}

/* Heartbeat waves on floating moon menu (rings follow drag) */
.moon-jump-toggle .hb-rings{position:absolute;inset:-1px;border-radius:50%;pointer-events:none}
.moon-jump-toggle .hb-rings i{position:absolute;inset:0;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 65%,#eee9bc);opacity:0;animation:hb-ripple 3s cubic-bezier(.2,.65,.35,1) infinite}
.moon-jump-toggle .hb-rings i:nth-child(2){animation-delay:1s}
.moon-jump-toggle .hb-rings i:nth-child(3){animation-delay:2s}
.moon-jump-orb{animation:hb-beat 2.4s ease-in-out infinite}
.moon-jump.open .hb-rings,.moon-jump.dragging .hb-rings{display:none}
.moon-jump.open .moon-jump-orb{animation:none}
@keyframes hb-ripple{0%{scale:1;opacity:.9}65%{opacity:.35}100%{scale:2.1;opacity:0}}
@keyframes hb-beat{0%,100%{scale:1}25%{scale:1.14}50%{scale:1}75%{scale:.88}}
@media(prefers-reduced-motion:reduce){.moon-jump-toggle .hb-rings{display:none}.moon-jump-orb{animation:none}}

/* Phone swipe: scene owns the gesture (no pull-to-refresh / page bounce), same as SSE planets */
@media(max-width:760px){html,body{overscroll-behavior:none}}