.moon-orbit{--moon-orbit-circle-color:currentColor;--moon-orbit-orbiting-color:color-mix(in srgb, currentColor 68%, transparent);--moon-orbit-circle-size:96px;--moon-orbit-orbiting-size:32px;--moon-orbit-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);--translateZ:72px;color:#111;perspective:320px;width:var(--moon-orbit-circle-size);height:var(--moon-orbit-circle-size);transform-style:preserve-3d;position:relative}.moon-orbit__circle{background:var(--moon-orbit-circle-color);width:var(--moon-orbit-circle-size);height:var(--moon-orbit-circle-size);border-radius:50%}.moon-orbit__orbitingCircle{background:var(--moon-orbit-orbiting-color);width:var(--moon-orbit-orbiting-size);height:var(--moon-orbit-orbiting-size);box-shadow:var(--moon-orbit-shadow);border-radius:50%;animation:6s linear infinite moon-orbit__orbit;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.moon-orbit[data-running=false] .moon-orbit__orbitingCircle{animation-play-state:paused}.moon-orbit__orbitNoCounteract{animation:6s linear infinite moon-orbit__orbitNoCounteract}@keyframes moon-orbit__orbit{0%{transform:translate(-50%,-50%)rotateY(0)translateZ(72px)rotateY(360deg)}to{transform:translate(-50%,-50%)rotateY(360deg)translateZ(72px)rotateY(0)}}@keyframes moon-orbit__orbitNoCounteract{0%{transform:translate(-50%,-50%)rotateY(0deg)translateZ(var(--translateZ))}to{transform:translate(-50%,-50%)rotateY(360deg)translateZ(var(--translateZ))}}