.orbit-system{--tilt:-9deg;--flat:.26;--ring-bold:clamp(2px, .5vw, 6px);--ms:1;aspect-ratio:1;width:100%;position:relative}.orbit-small{--ms:.62;--ring-bold:3px}.orbit-planet{z-index:1;width:100%;height:100%;display:block;position:relative}.orbit-spot{z-index:1;width:29%;height:6.4%;position:absolute;top:55.4%;left:51.9%}.orbit-ring,.orbit-track{width:var(--rw);height:calc(var(--rw) * var(--flat));transform:translate(-50%, -50%) rotate(var(--tilt));position:absolute;top:50%;left:50%}.orbit-ring{z-index:0;border:var(--rb) solid rgb(248 184 56/var(--ra));box-shadow:0 0 10px rgb(248 184 56/calc(var(--ra) * .45));pointer-events:none;border-radius:50%}.orbit-front{z-index:2;clip-path:inset(50% 0 0)}.orbit-fade .orbit-ring{-webkit-mask-image:linear-gradient(90deg,#0000 2%,#000 34%);mask-image:linear-gradient(90deg,#0000 2%,#000 34%)}.orbit-track{z-index:var(--z0,3);pointer-events:none}.orbit-x,.orbit-y{position:absolute;inset:0}.orbit-x{transform:translateX(var(--sx))}.orbit-y{transform:translateY(var(--sy))}.orbit-moon{transform:translate(-50%, calc(-1 * var(--size) * var(--ms) / 2)) rotate(calc(-1 * var(--tilt)));pointer-events:auto;flex-direction:column;align-items:center;gap:3px;display:flex;position:absolute;top:50%;left:50%}.orbit-moon img{width:calc(var(--size) * var(--ms));height:calc(var(--size) * var(--ms));transition:transform var(--dur-short) var(--ease-thrust);border-radius:50%;box-shadow:0 0 0 1.5px #f8b8388c,0 3px 8px #0000008c}.orbit-moon:hover img{transform:scale(1.15)}.orbit-label{color:var(--color-ink);font:600 10px/1.2 var(--font-mono);letter-spacing:.02em;white-space:nowrap;background:#0a0606b8;border-radius:4px;padding:2px 5px}html[data-motion=full] .orbit-track{animation:orbit-z var(--dur) linear var(--delay) infinite}html[data-motion=full] .orbit-x{animation:orbit-x calc(var(--dur) / 2) ease-in-out var(--delay) infinite alternate}html[data-motion=full] .orbit-y{animation:orbit-y calc(var(--dur) / 2) ease-in-out calc(var(--delay) - var(--dur) / 4) infinite alternate}.orbit-system:hover .orbit-track,.orbit-system:hover .orbit-x,.orbit-system:hover .orbit-y{animation-play-state:paused}@keyframes orbit-x{0%{transform:translate(-50%)}to{transform:translate(50%)}}@keyframes orbit-y{0%{transform:translateY(-50%)}to{transform:translateY(50%)}}@keyframes orbit-z{0%,49.9%{z-index:3}50%,to{z-index:0}}html[data-motion=full] .spot-eyes{transform-box:fill-box;transform-origin:50%;animation:7s ease-in-out infinite spot-blink}@keyframes spot-blink{0%,94%,to{transform:scaleY(1)}97%{transform:scaleY(.1)}}
