body {
  position: relative;
  background:
    radial-gradient(900px 620px at 18% 8%, rgba(16, 24, 38, 0.4), rgba(0, 0, 0, 0) 68%),
    radial-gradient(760px 520px at 88% 82%, rgba(24, 34, 52, 0.34), rgba(0, 0, 0, 0) 64%),
    var(--color-black);
}

.stellar-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.stellar-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(640px 420px at 16% 12%, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 72%),
    radial-gradient(580px 340px at 84% 88%, rgba(89, 131, 188, 0.08), rgba(255, 255, 255, 0) 74%);
}

.feature-stars,
.spark-stars {
  position: absolute;
  inset: 0;
}

.feature-star {
  position: absolute;
  border-radius: 999px;
  mix-blend-mode: screen;
  opacity: 1;
  filter: blur(0.45px);
  box-shadow:
    0 0 24px var(--star-glow),
    0 0 52px var(--star-glow),
    0 0 96px var(--star-shadow),
    0 0 156px var(--star-shadow);
}

.feature-star::after {
  content: "";
  position: absolute;
  inset: -170%;
  border-radius: inherit;
  background: radial-gradient(circle,
      var(--star-glow) 0%,
      color-mix(in srgb, var(--star-glow) 56%, var(--color-transparent)) 24%,
      color-mix(in srgb, var(--star-shadow) 28%, var(--color-transparent)) 52%,
      var(--color-transparent) 74%);
  opacity: 0.2;
  transform: scale(0.84);
  transform-origin: center;
  animation: feature-pulse var(--pulse-duration, 5.8s) ease-in-out infinite;
  animation-delay: var(--pulse-delay, 0s);
}

.spark-star {
  position: absolute;
  border-radius: 999px;
  opacity: 1;
}

.spark-star::before,
.spark-star::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  inset: 0;
}

.spark-star::before {
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 10px var(--color-white-90),
    0 0 18px rgba(255, 255, 255, 0.5);
}

.spark-star::after {
  inset: -260%;
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.42) 22%,
      rgba(255, 255, 255, 0.16) 46%,
      var(--color-white-0) 72%);
  filter: blur(0.7px);
  opacity: 0.08;
  transform: scale(0.72);
  transform-origin: center;
  animation: twinkle var(--twinkle-duration, 3.4s) ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
}

@keyframes feature-pulse {

  0%,
  100% {
    opacity: 0.16;
    transform: scale(0.9);
  }

  40% {
    opacity: 0.28;
    transform: scale(1.08);
  }

  58% {
    opacity: 0.38;
    transform: scale(1.16);
  }

  76% {
    opacity: 0.22;
    transform: scale(1.02);
  }
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 0.08;
    transform: scale(0.72);
  }

  34% {
    opacity: 0.24;
    transform: scale(1);
  }

  50% {
    opacity: 0.98;
    transform: scale(1.58);
  }

  68% {
    opacity: 0.22;
    transform: scale(1.06);
  }
}