:root{
  --bg:#060912;
  --twinkle1: rgba(255,255,255,.95);
  --twinkle2: rgba(255,255,255,.35);
  --twinkle3: rgba(125,190,255,.55);
  --float: 22s;         /* planet bob */
}

*{box-sizing:border-box}
html,body{height:100%}
html{background:var(--bg)}
body{
  margin:0; min-height:100dvh; overflow:hidden; color-scheme:dark;
  font:16px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.scene{position:relative; width:100%; height:100dvh}


/* --- planet (centered, soft edge) --- */
.planet-wrap{
  position:absolute; inset:0; display:grid; place-items:center;
  will-change:transform;
}
.planet{
  width:min(86vmin,1200px); height:auto; user-select:none; -webkit-user-drag:none;
  /* sharper, tighter circular mask to hide square edges */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 72%);
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 72%);
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.55));
}
@media (prefers-reduced-motion:no-preference){
  .planet-wrap{ animation: float var(--float) ease-in-out infinite }
}
@keyframes float{
  0%,100%{ transform:translate3d(0,0,0) }
  50%    { transform:translate3d(0,-1.2%,0) }
}

/* mood */
.vignette{
  position:absolute; inset:-10vmax; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 60%, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 55%, rgba(0,0,0,.25) 100%),
    radial-gradient(80% 60% at 50% 100%, rgba(0,0,0,.15), transparent 55%);
  mix-blend-mode:multiply;
}
.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.8'/></svg>");
  background-size:220px 220px; mix-blend-mode:overlay;
}

/* accessibility */
@media (prefers-reduced-motion:reduce){
  .planet-wrap, .stars--near::after { animation:none !important; }
}