/* Solar system: SVG + CSS. Orbits rotate with CSS keyframes (transform only). */
.space-page {
  background-color: #0b1238;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120, 90, 255, 0.25), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(63, 169, 245, 0.2), transparent 45%);
  background-size: auto;
  background-attachment: fixed;
}
.space-page .page-head h1,
.space-page .page-head p { color: #fff; }
.space-page .site-footer,
.space-page .site-footer a { color: #dfe6ff; }

.space {
  position: relative;
  width: min(100%, 860px, 86vh);
  margin: 0 auto;
  border-radius: 50%;
}
.solar { width: 100%; height: auto; overflow: visible; }

.star { fill: #fff; transform-box: fill-box; transform-origin: center; animation: twinkle 3.2s ease-in-out infinite; animation-play-state: var(--loops); }
.star--1 { animation-duration: 2.4s; animation-delay: -1s; }
.star--2 { animation-duration: 4.1s; animation-delay: -2.2s; fill: #fff4b8; }
.star--3 { animation-duration: 5.3s; animation-delay: -0.4s; fill: #cfe3ff; }

.orbits circle { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 2; stroke-dasharray: 6 10; }

.sun-group { cursor: pointer; outline: none; }
.sun-glow { transform-box: fill-box; transform-origin: center; animation: pulse-glow 3s ease-in-out infinite; animation-play-state: var(--loops); }
.sun-core { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-3) var(--ease-spring); }
.sun-group:hover .sun-core,
.sun-group:focus-visible .sun-core { transform: scale(1.08); }
.sun-group:focus-visible .sun-core { stroke: #fff; stroke-width: 6; }

.orbit { animation: spin 20s linear infinite; animation-play-state: var(--loops); }
.solar.is-paused .orbit { animation-play-state: paused; }
.orbit--mercury { animation-duration: 10s; animation-delay: -3s; }
.orbit--venus { animation-duration: 16s; animation-delay: -11s; }
.orbit--earth { animation-duration: 22s; animation-delay: -4s; }
.orbit--mars { animation-duration: 30s; animation-delay: -19s; }
.orbit--jupiter { animation-duration: 48s; animation-delay: -9s; }
.orbit--saturn { animation-duration: 66s; animation-delay: -41s; }
.orbit--uranus { animation-duration: 86s; animation-delay: -20s; }
.orbit--neptune { animation-duration: 110s; animation-delay: -77s; }

.planet { cursor: pointer; outline: none; }
.planet__hit { fill: rgba(255, 255, 255, 0); }
.planet__ball,
.planet__ring { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-3) var(--ease-spring); }
.planet__ring { fill: none; stroke: #f3d68a; stroke-width: 5; opacity: 0.9; }
.planet:hover .planet__ball,
.planet:focus-visible .planet__ball,
.planet.is-active .planet__ball { transform: scale(1.35); }
.planet:hover .planet__ring,
.planet.is-active .planet__ring { transform: scale(1.35); }
.planet:focus-visible .planet__ball,
.planet.is-active .planet__ball { stroke: #fff; stroke-width: 4; }

.planet-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}
.planet-dot { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: #ccc; box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.18); }
.planet-dot--mercury { background: #b9b1aa; }
.planet-dot--venus { background: #f0c46b; }
.planet-dot--earth { background: #3f8fe8; }
.planet-dot--mars { background: #e8653a; }
.planet-dot--jupiter { background: #e0a46a; }
.planet-dot--saturn { background: #e8c873; }
.planet-dot--uranus { background: #7fd9e3; }
.planet-dot--neptune { background: #5a7ce8; }