.starfield { pointer-events: none; opacity: .9; }
.twinkle-star {
  position: absolute;
  left: var(--star-x);
  top: var(--star-y);
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  color: #d9f5ff;
  background: currentColor;
  box-shadow: 0 0 5px #b4eaff66;
  opacity: .5;
}
.star-glint::before, .star-glint::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, #dbf7ffb3, transparent);
  width: 9px;
  height: 1px;
}
.star-glint::after { transform: translate(-50%, -50%) rotate(90deg); }
@keyframes star-twinkle {
  0%, 100% { opacity: .16; transform: scale(.65); }
  35% { opacity: .38; transform: scale(.9); }
  52% { opacity: 1; transform: scale(1.18); }
  68% { opacity: .3; transform: scale(.8); }
}
@media (prefers-reduced-motion: no-preference) {
  .twinkle-star {
    animation: star-twinkle var(--star-duration) ease-in-out var(--star-delay) infinite;
  }
}
.paused .twinkle-star { animation-play-state: paused; }
@media (max-width: 600px) {
  .twinkle-star:nth-child(n+29) { display: none; }
  .star-glint::before, .star-glint::after { width: 7px; }
}