:root{--ink:#05070d;--mist:rgba(226,221,240,.78)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);overflow:hidden}
body{font-family:"Avenir Next","Segoe UI Variable","Segoe UI",system-ui,sans-serif;color:var(--mist)}
.sky{position:fixed;inset:0;min-height:100dvh;overflow:hidden}
.nebula{position:absolute;inset:-3%;background:url(assets/cosmic-cliffs.jpg) center 42%/cover no-repeat;filter:saturate(.92) brightness(.78);animation:breathe 90s ease-in-out infinite alternate}
@media (max-aspect-ratio:1/1){.nebula{background-position:38% 50%}}
@keyframes breathe{to{transform:scale(1.05) translate(-.8%,.6%)}}
.veil{position:absolute;inset:0;background:
 radial-gradient(ellipse 80% 70% at 50% 45%,transparent 30%,rgba(3,4,10,.55) 100%),
 linear-gradient(180deg,rgba(4,6,14,.55),rgba(4,6,14,.15) 35%,rgba(6,4,10,.35) 70%,rgba(3,3,8,.8))}
#stars{position:absolute;inset:0;width:100%;height:100%}
#worlds{position:absolute;inset:0}
.planet{position:absolute;left:0;top:0;width:var(--d);height:var(--d);transform:translate(calc(var(--x) - 50%),calc(var(--y) - 50%));border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;display:block}
.float{position:absolute;inset:0;animation:float var(--fs) ease-in-out var(--fd) infinite alternate}
@keyframes float{from{transform:translateY(calc(var(--d) * -.035))}to{transform:translateY(calc(var(--d) * .035))}}
.tilt{position:absolute;inset:0;transform:rotate(var(--tilt));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.planet:hover .tilt,.planet:focus-visible .tilt,.planet.pressed .tilt{transform:rotate(var(--tilt)) scale(1.1)}
.atmo{position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,transparent 58%,var(--glow) 66%,transparent 76%);opacity:.55;transition:opacity .7s}
.halo{position:absolute;inset:-35%;border-radius:50%;background:radial-gradient(circle,var(--glow) 0,transparent 62%);opacity:.18;transition:opacity .7s}
.planet:hover .atmo,.planet:focus-visible .atmo,.planet.pressed .atmo{opacity:1}
.planet:hover .halo,.planet:focus-visible .halo,.planet.pressed .halo{opacity:.42}
.body{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--base);box-shadow:inset 0 0 calc(var(--d)*.06) rgba(255,255,255,.08)}
.tex{position:absolute;top:0;left:0;width:200%;height:100%;background-image:var(--tex);background-size:50% 100%;background-repeat:repeat-x;mix-blend-mode:var(--blend,overlay);opacity:var(--to,.9);animation:drift var(--ds) linear infinite}
.tex.b{opacity:calc(var(--to,.9)*.5);animation-duration:calc(var(--ds)*1.7);mix-blend-mode:soft-light}
@keyframes drift{to{transform:translateX(-50%)}}
.shade{position:absolute;inset:0;border-radius:50%;background:
 radial-gradient(circle at 32% 30%,rgba(255,250,240,.28),transparent 38%),
 radial-gradient(circle at 70% 72%,rgba(2,2,8,.94) 8%,rgba(2,2,8,.55) 42%,transparent 70%),
 radial-gradient(circle at 50% 50%,transparent 62%,rgba(2,2,8,.5) 100%)}
.rim{position:absolute;inset:0;border-radius:50%;box-shadow:inset calc(var(--d)*.02) calc(var(--d)*.02) calc(var(--d)*.04) var(--rimc)}
.ring{position:absolute;left:50%;top:50%;width:calc(var(--d)*var(--rw));height:calc(var(--d)*var(--rw)*.24);transform:translate(-50%,-50%);border-radius:50%;
 background:radial-gradient(ellipse closest-side,transparent 47%,var(--r1) 50%,transparent 55%,var(--r2) 60%,var(--r1) 71%,transparent 74%,var(--r2) 79%,transparent 100%);pointer-events:none}
.ring.back{clip-path:inset(0 0 50% 0)}
.ring.front{clip-path:inset(50% 0 0 0)}
.planet:focus-visible::after{content:"";position:absolute;inset:-14%;border-radius:50%;border:1.5px solid rgba(236,226,255,.9);box-shadow:0 0 0 4px rgba(120,150,255,.25)}
.wordmark{position:absolute;left:clamp(20px,3.2vw,48px);bottom:clamp(22px,4.4vh,44px);font-weight:300;font-size:clamp(13px,1.05vw,16px);letter-spacing:.42em;text-transform:uppercase;color:rgba(238,232,246,.86)}
.wordmark span{font-weight:500;color:#f0d9b8}
.credit{position:absolute;right:clamp(14px,2vw,28px);bottom:clamp(12px,2vh,20px);font-size:10px;letter-spacing:.08em;color:rgba(220,214,232,.42)}
@media (max-aspect-ratio:1/1){.wordmark{left:50%;transform:translateX(-50%);top:max(22px,env(safe-area-inset-top));bottom:auto;white-space:nowrap;font-size:12px;letter-spacing:.36em}.credit{left:0;right:0;text-align:center;bottom:max(10px,env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.nebula,.float,.tex{animation:none}.tilt,.atmo,.halo{transition:none}}

.tag{position:absolute;left:50%;top:100%;transform:translate(-50%,14px);font-size:clamp(11px,.95vw,14px);font-weight:500;letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:#f0d9b8;text-shadow:0 0 12px rgba(0,0,0,.9),0 0 22px rgba(216,180,106,.45);white-space:nowrap;pointer-events:none;transition:color .5s}
.planet:hover .tag,.planet:focus-visible .tag{color:#fff}