.side-orbit{z-index:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.side-orbit span{border-radius:var(--radius-pill);display:block;position:absolute}.side-orbit__stars{width:100%;height:100%;fill:var(--color-on-inverse);position:absolute;inset:0}.side-orbit .side-orbit__shooting{width:var(--sky-shooting-length);background:linear-gradient(to left, transparent, var(--color-on-inverse));transform-origin:100%;opacity:0;height:1px;top:16%;right:8%;transform:rotate(-28deg)translate(0)}.side-orbit__system{top:var(--sky-system-top);width:var(--sky-system-width);aspect-ratio:1;position:absolute;left:50%;transform:translate(-50%,-50%)}.side-orbit .side-orbit__glow{background:radial-gradient(circle, var(--color-sky-glow) 0, transparent 62%);inset:18%}.side-orbit .side-orbit__ring{border:1px solid var(--color-sky-ring);transform:scaleY(var(--sky-tilt));inset:0}.side-orbit .side-orbit__ring--inner{border-color:var(--color-sky-ring-near);inset:20%}.side-orbit .side-orbit__ring--cross{transform:rotate(-22deg) scaleY(calc(var(--sky-tilt) * 1.4));inset:8%}.side-orbit .side-orbit__core,.side-orbit .side-orbit__body{background:radial-gradient(circle at 36% 30%, var(--color-on-inverse) 0, color-mix(in srgb, var(--color-on-inverse) 78%, transparent) 55%, color-mix(in srgb, var(--color-on-inverse) 26%, transparent) 100%)}.side-orbit .side-orbit__core{z-index:2;box-shadow:0 0 var(--space-10) var(--space-1) var(--color-sky-glow);inset:41%}.side-orbit .side-orbit__orbit{z-index:3;transform:scaleY(var(--sky-tilt));border-radius:0;inset:0}.side-orbit .side-orbit__orbit--inner{inset:20%}.side-orbit .side-orbit__spin{transform:rotate(calc(var(--phase) * 360deg));inset:0}.side-orbit .side-orbit__body{left:calc(50% - var(--sky-planet-size) / 2);top:calc(var(--sky-planet-size) / -2);width:var(--sky-planet-size);height:var(--sky-planet-size);transform:rotate(calc(var(--phase) * -360deg)) scaleY(calc(1 / var(--sky-tilt)))}.side-orbit .side-orbit__body--moon{left:calc(50% - var(--sky-moon-size) / 2);top:calc(var(--sky-moon-size) / -2);width:var(--sky-moon-size);height:var(--sky-moon-size)}@media screen and (min-width:960px) and (prefers-reduced-motion:no-preference){.side-orbit{--orbit-duration:var(--motion-orbit-revolution)}.side-orbit--settled{--orbit-duration:var(--motion-orbit-precession)}.side-orbit__orbit,.side-orbit__spin,.side-orbit__body{animation-duration:var(--orbit-duration);animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:paused;animation-delay:calc(var(--phase) * var(--orbit-duration) * -1)}.side-orbit__orbit--inner,.side-orbit__orbit--inner .side-orbit__spin,.side-orbit__orbit--inner .side-orbit__body{--orbit-duration:var(--motion-orbit-moon)}.side-orbit--settled .side-orbit__orbit--inner,.side-orbit--settled .side-orbit__orbit--inner .side-orbit__spin,.side-orbit--settled .side-orbit__orbit--inner .side-orbit__body{--orbit-duration:var(--motion-orbit-revolution)}.side-orbit__orbit{animation-name:side-orbit-depth;animation-timing-function:step-end}.side-orbit__spin{animation-name:side-orbit-spin}.side-orbit__body{animation-name:side-orbit-upright}.side-orbit__orbit[data-reverse=true],.side-orbit__orbit[data-reverse=true] .side-orbit__spin,.side-orbit__orbit[data-reverse=true] .side-orbit__body{animation-direction:reverse}.side-orbit__blink{animation:side-orbit-blink var(--motion-star-blink) ease-in-out infinite paused}.side-orbit__shooting{animation:side-orbit-shooting var(--motion-shooting-star) ease-out infinite paused;animation-delay:2s}.side-orbit[data-playing=true] :is(.side-orbit__orbit,.side-orbit__spin,.side-orbit__body,.side-orbit__blink,.side-orbit__shooting){animation-play-state:running}}@keyframes side-orbit-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes side-orbit-upright{0%{transform:rotate(0deg) scaleY(calc(1 / var(--sky-tilt)))}to{transform:rotate(-360deg) scaleY(calc(1 / var(--sky-tilt)))}}@keyframes side-orbit-depth{0%{z-index:1}25%{z-index:3}75%{z-index:1}to{z-index:1}}@keyframes side-orbit-blink{50%{opacity:.1}}@keyframes side-orbit-shooting{0%{opacity:0;transform:rotate(-28deg)translate(0)}2%{opacity:.9}9%{opacity:0;transform:rotate(-28deg)translate(-180%)}to{opacity:0;transform:rotate(-28deg)translate(-180%)}}
