:root{
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.16);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
}
html,body{height:100%; margin:0; background:#000; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial;}
a{color:inherit}

/* Fade overlay */
#fadeOverlay{
  position:fixed; inset:0; background:#000; opacity:1;
  pointer-events:none; transition: opacity .55s ease; z-index:9999;
}
body.loaded #fadeOverlay{ opacity:0; }
body.fading #fadeOverlay{ opacity:1; pointer-events:auto; }

.vignette{
  position:fixed; inset:0; pointer-events:none;
  background: radial-gradient(circle at center, rgba(0,0,0,0) 38%, rgba(0,0,0,.88) 100%);
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.40);
  backdrop-filter: blur(10px);
  color:var(--text); text-decoration:none;
  font-size:13px; letter-spacing:1.6px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.pill:hover{ transform:translateY(-1px); background:rgba(0,0,0,.55); border-color:rgba(255,255,255,.24); }
.pill.primary{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.24); }

/* subtle grain */
.grain{
  position:fixed; inset:-40%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity:.20; pointer-events:none;
  animation: grainMove 10s steps(6) infinite;
}
@keyframes grainMove{ 0%{transform:translate(0,0)} 100%{transform:translate(-6%, 4%)} }