Stars Field

<!-- Stars Field -->
<div class="nuda-stars" role="img" aria-label="Stars field">
  <span class="nuda-stars__pt" style="left:5%;  top:8%;  --d:0s;   --s:2px"></span>
  <span class="nuda-stars__pt" style="left:18%; top:24%; --d:.3s;  --s:1px"></span>
  <span class="nuda-stars__pt" style="left:32%; top:62%; --d:.6s;  --s:3px"></span>
  <span class="nuda-stars__pt" style="left:46%; top:18%; --d:.9s;  --s:2px"></span>
  <span class="nuda-stars__pt" style="left:60%; top:80%; --d:1.2s; --s:1px"></span>
  <span class="nuda-stars__pt" style="left:74%; top:36%; --d:1.5s; --s:2px"></span>
  <span class="nuda-stars__pt" style="left:88%; top:72%; --d:1.8s; --s:3px"></span>
  <span class="nuda-stars__pt" style="left:12%; top:48%; --d:.4s;  --s:1px"></span>
  <span class="nuda-stars__pt" style="left:54%; top:54%; --d:.7s;  --s:2px"></span>
  <span class="nuda-stars__pt" style="left:82%; top:14%; --d:1s;   --s:1px"></span>
  <!-- ...add 8–20 more for density -->
</div>

/* Stars Field
   Dotted star field with gentle twinkle. Every 3rd star tinted accent.
   Customize: --star-accent, container size. */

.nuda-stars {
  --star-accent: #e4ff54;
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  background: radial-gradient(
    ellipse at center,
    rgba(228, 255, 84, 0.08),
    transparent 70%
  );
  overflow: hidden;
  border-radius: 8px;
}

.nuda-stars__pt {
  position: absolute;
  width: var(--s, 2px);
  height: var(--s, 2px);
  border-radius: 50%;
  background: #fff;
  animation: nuda-stars-twinkle 3s ease-in-out var(--d, 0s) infinite;
}

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

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

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