*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#07040b;color:#f3e6d8;font-family:Georgia,"Times New Roman",serif;overflow:hidden}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;z-index:50;background:#000;padding:.5em}
.skip:focus{left:.5em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* cover-scaled stage, fixed 3:2 aspect */
.viewport{position:fixed;inset:0;overflow:hidden}
.stage{position:absolute;left:50%;top:50%;width:max(calc(100vw + 28px),calc(150vh + 42px));height:max(calc(66.6667vw + 18.667px),calc(100vh + 28px));transform:translate(-50%,-50%);translate:var(--px,0px) var(--py,0px);transition:translate .9s cubic-bezier(.2,.7,.3,1)}
.backdrop{position:absolute;inset:0;width:100%;height:100%;display:block}
.body{position:absolute;transition:filter .6s,opacity .6s}
.body img,.spin{position:absolute;inset:0;width:100%;height:100%}
.spin{animation:sway 45s ease-in-out infinite alternate;will-change:transform}
.s1{animation-duration:20s}.s2{animation-duration:38s;animation-direction:alternate-reverse}.s3{animation-duration:30s}.s4{animation-duration:55s}
@keyframes sway{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
.orbit{animation:bob 9s ease-in-out infinite}
.o2{animation-duration:12s;animation-direction:reverse}
@keyframes bob{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(6%,-8%) rotate(6deg)}50%{transform:translate(0,-13%) rotate(0)}75%{transform:translate(-6%,-7%) rotate(-6deg)}100%{transform:translate(0,0) rotate(0)}}
.sun-glow{position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,#fff6b0aa 0,#ffb34055 25%,#ff6a0000 60%);mix-blend-mode:screen;animation:pulse 4.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.86)}50%{opacity:1;transform:scale(1.14)}}
.cracks{mix-blend-mode:screen;animation:crack 5s ease-in-out infinite;filter:brightness(1.3) saturate(1.2)}
@keyframes crack{0%,100%{opacity:.1}50%{opacity:1}}
.clouds{position:absolute;inset:0;border-radius:50%;overflow:hidden;mix-blend-mode:screen;opacity:.5}
.clouds img{animation:drift 22s ease-in-out infinite alternate;transform:scale(1.25)}
@keyframes drift{from{transform:scale(1.25) translateX(-16%) rotate(-4deg)}to{transform:scale(1.25) translateX(16%) rotate(4deg)}}
.stars{position:absolute;inset:0;pointer-events:none}
.star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 4px #fff;animation:tw 5s ease-in-out infinite;opacity:0}
@keyframes tw{0%,100%{opacity:0}50%{opacity:.8}}
.hit{position:absolute;inset:2%;border-radius:50%;cursor:pointer;outline:none}
.focal{filter:drop-shadow(0 0 0 #ff5a1f00)}
body.lit .focal{filter:drop-shadow(0 0 2.2vw #ff5a1fcc) brightness(1.12)}
body.lit .body:not(.focal){filter:brightness(.45) saturate(.7)}
body.lit .backdrop{filter:brightness(.7);transition:filter .6s}
.backdrop{transition:filter .6s}
.hit:focus-visible{box-shadow:0 0 0 3px #ffd58a}
.panel{position:fixed;left:50%;bottom:6vh;transform:translate(-50%,1rem);width:min(92vw,30rem);padding:1.2rem 1.4rem;background:#140806d9;border:1px solid #ff7a3a66;border-radius:.5rem;box-shadow:0 0 30px #ff4a1040;opacity:0;visibility:hidden;transition:opacity .4s,transform .4s,visibility .4s;z-index:15;backdrop-filter:blur(4px)}
body.lit .panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.panel h2{letter-spacing:.35em;font-weight:normal;color:#ffb27a;margin-bottom:.5rem}
.panel p{line-height:1.5;font-size:.95rem}
.enter{display:inline-block;margin-top:.8rem;color:#ffd58a;letter-spacing:.08em}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.star{opacity:.5}}
.b-sun{left:14.844%;top:5.762%;width:11.328%;height:16.992%}
.b-erathis{left:13.281%;top:26.953%;width:33.724%;height:50.586%}
.b-moon-bronze{left:9.245%;top:24.219%;width:10.156%;height:15.234%}
.b-terrae{left:44.661%;top:46.094%;width:28.906%;height:43.359%}
.b-lyrren{left:58.724%;top:19.434%;width:15.625%;height:23.438%}
.b-moon-silver{left:57.357%;top:13.184%;width:7.031%;height:10.547%}
.b-aeroth{left:75.326%;top:7.812%;width:18.359%;height:27.539%}
.b-nythra{left:78.646%;top:54.297%;width:14.974%;height:22.461%}
/* portrait / tall-phone layout: vertical arrangement of the cut layers.
   All bodies keep desktop relative sizes: size = desktop%-of-stage-width x 2.3 (in vw). */
@media (max-aspect-ratio:3/4){
html,body{height:auto;overflow-x:hidden;overflow-y:auto}
.viewport{position:relative;inset:auto;overflow:hidden;min-height:100vh}
.stage{position:relative;left:0;top:0;transform:none;translate:none;width:100vw;height:255vw;
 background:radial-gradient(ellipse 70% 45% at 30% 22%,#7a1a1255,transparent 70%),radial-gradient(ellipse 70% 40% at 75% 62%,#1a3a7a44,transparent 70%),radial-gradient(ellipse 60% 30% at 20% 88%,#4a183a33,transparent 70%),#07040b}
.backdrop{display:none}
.b-sun{left:2vw;top:27vw;width:26.05vw;height:26.05vw}
.b-erathis{left:11vw;top:44vw;width:77.57vw;height:77.57vw}
.b-moon-bronze{left:74vw;top:34vw;width:23.36vw;height:23.36vw}
.b-lyrren{left:5vw;top:132vw;width:35.94vw;height:35.94vw}
.b-moon-silver{left:41vw;top:144vw;width:16.17vw;height:16.17vw}
.b-aeroth{left:56vw;top:126vw;width:42.23vw;height:42.23vw}
.b-terrae{left:3vw;top:176vw;width:66.48vw;height:66.48vw}
.b-nythra{left:63vw;top:196vw;width:34.44vw;height:34.44vw}
body.lit .focal{filter:drop-shadow(0 0 5vw #ff5a1fcc) brightness(1.12)}
}