:root {
  color-scheme: dark;
  font-family: 'Space Mono', monospace;
  background: #03050d;
  color: #f6f7fb;
  --sky-x: 0px;
  --sky-y: 0px;
  --planet-x: 0px;
  --planet-y: 0px;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; overflow-x: hidden; }
.universe { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.deep-space {
  position: absolute; inset: -28px;
  transform: translate3d(var(--sky-x), var(--sky-y), 0);
}
.milky-way {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; opacity: .88;
}
.deep-space::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3,5,13,.05), rgba(3,5,13,.12) 40%, rgba(3,5,13,.4));
}
canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#stars { z-index: 1; }
.planet-orbit {
  position: absolute; z-index: 2; width: min(76vw, 900px);
  left: 50%; top: 57%;
  transform: translate3d(calc(-50% + var(--planet-x)), var(--planet-y), 0);
}
.planet {
  display: block; width: 100%; height: auto;
  clip-path: circle(45.7% at 50% 50%);
  filter: brightness(.82) saturate(.72);
}
#meteors { z-index: 3; }
.vignette {
  position: absolute; z-index: 4; inset: 0;
  background: radial-gradient(ellipse at 50% 48%, transparent 35%, rgba(0,0,0,.25) 100%);
}
.center-text {
  position: absolute; z-index: 5; padding: 0 22px;
  width: 100%; text-align: center; top: 35vh; top: 35svh;
}
h1 {
  margin: 0; font-size: clamp(1.65rem, 4.6vw, 4rem);
  line-height: 1.4; font-weight: 400; letter-spacing: .025em;
  text-shadow: 0 2px 24px #03050d, 0 0 60px rgba(3,5,13,.65);
}
.please {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 10px; padding: 6px 8px;
  color: #c5cbd8; font-size: .875rem; line-height: 1.6; letter-spacing: .13em;
  text-decoration: none; text-underline-offset: 6px;
  text-shadow: 0 2px 12px #03050d; transition: color .2s;
}
.please:hover { color: #fff; text-decoration: underline; }
a:focus-visible { outline: 2px solid #cad9ff; outline-offset: 5px; }
@media (max-width: 600px) {
  .center-text { top: 32vh; top: 32svh; }
  .planet-orbit { width: 132vw; top: 57%; }
  .milky-way { object-position: 38% center; }
  .please { font-size: .8125rem; letter-spacing: .1em; }
}
@media (max-height: 500px) and (min-width: 601px) {
  .center-text { top: 20vh; }
  .planet-orbit { width: 65vw; top: 59%; }
}
@media (prefers-reduced-motion: reduce) { .please { transition: none; } }