:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #02030a; }

.cosmos {
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  display: grid;
  align-items: center;
  padding: clamp(2rem, 8vw, 9rem);
  background:
    radial-gradient(ellipse at 76% 18%, rgba(96, 74, 242, .20), transparent 30rem),
    radial-gradient(ellipse at 22% 70%, rgba(0, 201, 255, .12), transparent 28rem),
    linear-gradient(145deg, #02030a 10%, #071326 55%, #100826 100%);
}

.stars, .stars::before, .stars::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
}

.stars-near {
  z-index: -1;
  opacity: .72;
  background-image: radial-gradient(#fff 1.1px, transparent 1.8px);
  background-size: 97px 109px;
  animation: drift 35s linear infinite;
}

.stars-far {
  z-index: -2;
  opacity: .38;
  background-image: radial-gradient(#b5dfff 1px, transparent 1.6px);
  background-size: 173px 151px;
  animation: drift 80s linear infinite reverse;
}

.nebula {
  z-index: -1;
  position: absolute;
  width: 56vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(48px);
  mix-blend-mode: screen;
  opacity: .35;
}

.nebula-one { right: -20vmax; top: -20vmax; background: #4a1be2; }
.nebula-two { left: -28vmax; bottom: -32vmax; background: #0079c8; }

.signal { max-width: 48rem; text-shadow: 0 2px 24px rgba(0, 0, 0, .55); }

.eyebrow, .coordinates {
  letter-spacing: .22em;
  font-size: clamp(.65rem, 1.2vw, .85rem);
  font-weight: 700;
  color: #9fceff;
}

.eyebrow { margin: 0 0 1.5rem; }

h1 {
  margin: 0;
  font-size: clamp(3.5rem, 11vw, 9rem);
  line-height: .82;
  letter-spacing: -.08em;
  font-weight: 850;
  color: #f2f7ff;
  background: linear-gradient(115deg, #fff 12%, #9ed8ff 48%, #b79cff 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.message { margin: 2rem 0; color: #b9c8df; font-size: clamp(1.05rem, 2vw, 1.35rem); letter-spacing: .025em; }

.coordinates { display: flex; align-items: center; gap: .75rem; color: #d9e9ff; }

.beacon {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: #7dffce;
  box-shadow: 0 0 0 .2rem rgba(125, 255, 206, .14), 0 0 1.2rem #7dffce;
  animation: pulse 2.2s ease-in-out infinite;
}

.horizon {
  z-index: -1;
  position: absolute;
  width: 145vw;
  height: 58vw;
  left: -23vw;
  bottom: -49vw;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 0%, #263c7c 0%, #0a1029 42%, #03040a 72%);
  box-shadow: 0 -1px 40px rgba(116, 156, 255, .42);
}

.orbital-system {
  position: absolute;
  z-index: -1;
  right: clamp(-14rem, -8vw, -5rem);
  top: 50%;
  width: min(57vw, 48rem);
  aspect-ratio: 1;
  transform: translateY(-50%);
}

.orbit {
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(164, 215, 255, .22);
  border-radius: 50%;
  transform: rotate(-31deg);
  box-shadow: inset 0 0 3rem rgba(73, 125, 255, .08), 0 0 1rem rgba(86, 156, 255, .08);
}

.orbit-two { inset: 25%; transform: rotate(49deg); border-color: rgba(203, 157, 255, .34); }

.planet {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 26%, #c9edff 0%, #6a88c8 13%, #293c82 42%, #0a0d2c 74%);
  box-shadow: -1.7rem 1.2rem 4rem rgba(27, 78, 235, .42), inset -2.5rem -1.5rem 3rem rgba(0, 0, 12, .72);
}

.satellite {
  position: absolute;
  width: .7rem;
  aspect-ratio: 1;
  left: 11%;
  top: 45%;
  border-radius: 50%;
  background: #e1fbff;
  box-shadow: 0 0 0 .35rem rgba(125, 243, 255, .12), 0 0 1.7rem #78edff;
  animation: orbit 15s linear infinite;
}

@keyframes drift { to { transform: translate3d(-97px, 109px, 0); } }
@keyframes pulse { 50% { transform: scale(.7); opacity: .45; } }
@keyframes orbit { 50% { transform: translate(11rem, -12rem) scale(.55); opacity: .45; } }

@media (max-width: 560px) {
  .cosmos { align-items: start; padding-top: 24vh; }
  h1 { letter-spacing: -.07em; }
  .coordinates { letter-spacing: .14em; }
  .orbital-system { opacity: .55; top: 73%; right: -6rem; width: 25rem; }
}