.space-orbit { --orbit-play: paused; position: relative; justify-self: center; width: min(100%, 400px); aspect-ratio: 1; isolation: isolate; outline-offset: 7px; }
.space-orbit.is-running { --orbit-play: running; }
.space-orbit:hover, .space-orbit:focus-within { --orbit-play: paused; }
.orbit-system { position: absolute; inset: 0; }
.space-stars { position: absolute; inset: -10%; opacity: .65; background: radial-gradient(circle at 14% 20%, #c1d1ff 0 1px, transparent 2px), radial-gradient(circle at 82% 17%, #c1d1ff 0 1px, transparent 2px), radial-gradient(circle at 90% 56%, #a8baff 0 1px, transparent 2px), radial-gradient(circle at 68% 85%, #b7a5ff 0 1px, transparent 2px), radial-gradient(circle at 17% 77%, #b7a5ff 0 1px, transparent 2px), radial-gradient(circle at 35% 6%, #d6d2ff 0 1px, transparent 2px), radial-gradient(ellipse at center, #5d47af40, transparent 65%); }
.planet-orbit { position: absolute; border: 1px solid #afa9e335; border-radius: 50%; }
.planet-outer { --duration: 46s; --phase: -35deg; inset: 8%; }
.planet-middle { --duration: 35s; --phase: 90deg; inset: 20%; border-color: #9dbcf735; }
.planet-inner { --duration: 27s; --phase: 215deg; inset: 32%; border-color: #d6b5ff33; }
.orbit-spinner { position: absolute; inset: 0; transform: rotate(var(--phase)); animation: orbital-travel var(--duration) linear infinite; animation-play-state: var(--orbit-play); }
.orbit-node { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.node-0 { left: 100%; }.node-1 { left: 0; }
.orbit-counter { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 58px; transform: rotate(calc(-1 * var(--phase))); animation: orbital-upright var(--duration) linear infinite; animation-play-state: var(--orbit-play); }
.orbit-counter > img, .orbit-vk { width: 27px; height: 27px; border-radius: 9px; filter: drop-shadow(0 4px 10px #090c2855); }
.orbit-counter > span:last-child { padding: 3px 7px; color: #e3e7ff; background: #221c3dd9; border: 1px solid #a292cc3b; border-radius: 6px; font-size: 9px; line-height: 1.4; white-space: nowrap; }
.orbit-vk { display: grid; place-items: center; background: #317afb; color: white; font-size: 11px; font-weight: 800; letter-spacing: -1px; }
.connect-core { position: absolute; inset: 38%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #665e9255, #28213d); border: 1px solid #bdabe855; box-shadow: 0 0 50px #947df24a, inset 0 0 25px #947df21f; color: #eee9ff; font-size: 9px; }
.connect-core img { width: 39px; height: 39px; border-radius: 12px; }
.orbit-caption { position: absolute; left: 0; right: 0; bottom: -13px; text-align: center; color: #b0abd0; font-size: 9px; }
@keyframes orbital-travel { from { transform: rotate(var(--phase)); } to { transform: rotate(calc(var(--phase) + 360deg)); } }
@keyframes orbital-upright { from { transform: rotate(calc(-1 * var(--phase))); } to { transform: rotate(calc(-1 * var(--phase) - 360deg)); } }
@media (max-width: 1050px) { .space-orbit { width: min(100%, 340px); } }
@media (max-width: 800px) { .space-orbit { width: min(100%, 370px); margin-top: 38px; margin-bottom: 18px; } }
@media (max-width: 500px) {
  .space-orbit { width: min(100%, 300px); margin-top: 32px; }
  .orbit-counter { min-width: 46px; gap: 3px; }.orbit-counter > img, .orbit-vk { width: 23px; height: 23px; }
  .orbit-counter > span:last-child { font-size: 8px; padding: 2px 5px; }
  .connect-core { gap: 5px; font-size: 7px; }.connect-core img { width: 28px; height: 28px; border-radius: 8px; }
  .orbit-caption { font-size: 8px; bottom: -15px; }
}
@media (prefers-reduced-motion: reduce) { .orbit-spinner, .orbit-counter { animation: none !important; } }