/* ===== Shared twinkling starfield background layer =====
   Sits behind all content, very subtle, never blocks interaction. */
#starfield{
  position:fixed;
  inset:0;
  z-index:0;            /* behind content (content should be z-index >=1) */
  pointer-events:none;  /* never blocks clicks */
  overflow:hidden;
}
#starfield .star{
  position:absolute;
  width:3px;height:3px;
  background:#fff;
  border-radius:0;            /* square = pixel star */
  opacity:.85;
  animation:twinkle var(--dur,2s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
  box-shadow:0 0 6px rgba(255,255,255,.95),0 0 10px rgba(255,255,255,.5);
}
#starfield .star.big{width:5px;height:5px;box-shadow:0 0 9px #fff,0 0 16px rgba(255,255,255,.7)}
#starfield .star.huge{width:7px;height:7px;box-shadow:0 0 12px #fff,0 0 22px rgba(255,255,255,.8)}
/* 4-point sparkle arms */
#starfield .star.cross::before,#starfield .star.cross::after{content:'';position:absolute;background:rgba(255,255,255,.85)}
#starfield .star.cross::before{left:-4px;top:1px;width:11px;height:1px}
#starfield .star.cross::after{top:-4px;left:1px;width:1px;height:11px}
@keyframes twinkle{
  0%,100%{opacity:.1;transform:scale(.5)}
  50%{opacity:1;transform:scale(1.4)}
}
/* keep main UI above the starfield */
body > header, body > section, body > footer, body > div, body > nav{position:relative;z-index:1}