Starfield

<!-- Starfield (every 4th star tinted accent) -->
<div class="nuda-weather-stars" role="img" aria-label="Twinkling starfield">
  <span class="nuda-weather-stars__pt" style="left:5%;  top:8%;  --wst-d:0s;   --wst-dur:2.6s; --wst-s:2px"></span>
  <span class="nuda-weather-stars__pt" style="left:18%; top:24%; --wst-d:.45s; --wst-dur:3s;   --wst-s:1px"></span>
  <span class="nuda-weather-stars__pt" style="left:32%; top:62%; --wst-d:.9s;  --wst-dur:3.6s; --wst-s:3px"></span>
  <span class="nuda-weather-stars__pt" style="left:46%; top:18%; --wst-d:1.35s;--wst-dur:2.4s; --wst-s:2px"></span>
  <span class="nuda-weather-stars__pt" style="left:60%; top:80%; --wst-d:1.8s; --wst-dur:3s;   --wst-s:1px"></span>
  <span class="nuda-weather-stars__pt" style="left:74%; top:36%; --wst-d:2.25s;--wst-dur:3.6s; --wst-s:2px"></span>
  <span class="nuda-weather-stars__pt" style="left:88%; top:72%; --wst-d:2.7s; --wst-dur:2.4s; --wst-s:3px"></span>
  <span class="nuda-weather-stars__pt" style="left:12%; top:48%; --wst-d:.6s;  --wst-dur:3s;   --wst-s:1px"></span>
  <span class="nuda-weather-stars__pt" style="left:54%; top:54%; --wst-d:1.1s; --wst-dur:3.6s; --wst-s:2px"></span>
  <span class="nuda-weather-stars__pt" style="left:82%; top:14%; --wst-d:1.5s; --wst-dur:2.4s; --wst-s:1px"></span>
  <!-- ...add 10–20 more for density -->
</div>

/* Starfield
   Twinkling dotted star field. Every 4th star is tinted accent + glows.
   Customize: --star-accent, container size, individual --wst-d/--wst-dur/--wst-s. */

.nuda-weather-stars {
  --star-accent: #e4ff54;
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 5 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #15151f, #09090b 75%);
}

.nuda-weather-stars__pt {
  position: absolute;
  width: var(--wst-s, 2px);
  height: var(--wst-s, 2px);
  border-radius: 50%;
  background: #fafafa;
  will-change: transform, opacity;
  animation: nuda-weather-star-twinkle var(--wst-dur, 3s) ease-in-out var(--wst-d, 0s) infinite;
}

.nuda-weather-stars__pt:nth-child(4n) {
  background: var(--star-accent);
  box-shadow: 0 0 4px rgba(228, 255, 84, 0.7);
}

@keyframes nuda-weather-star-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.6); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-weather-stars__pt { animation: none; opacity: 0.7; }
}