/* Moonlit Sketchbook: cool paper tones, a soft moon halo, and a constellation map. */
:root {
  --ink: #dce1e5;
  --ink-soft: #cfd8df;
  --paper: #252d36;
  --muted: #586674;
  --line: rgba(49, 63, 77, 0.16);
  --coral: #ac7465;
  --coral-dim: rgba(172, 116, 101, 0.14);
}

html { background: var(--ink); }
body {
  background:
    radial-gradient(ellipse at 74% 24%, rgba(181, 199, 215, 0.34), transparent 32rem),
    radial-gradient(ellipse at 12% 72%, rgba(126, 148, 166, 0.14), transparent 34rem),
    var(--ink);
}
body::before {
  top: -17vw;
  right: -15vw;
  background: radial-gradient(circle, rgba(213, 226, 238, 0.28), rgba(160, 182, 201, 0.1) 48%, transparent 74%);
  border-color: rgba(92, 119, 143, 0.18);
  box-shadow: 0 0 0 34px rgba(92, 119, 143, 0.045), 0 0 0 76px rgba(92, 119, 143, 0.025);
}
body::after {
  background: radial-gradient(circle, rgba(173, 140, 127, 0.14), rgba(173, 140, 127, 0.05) 50%, transparent 74%);
  border-color: rgba(134, 110, 101, 0.18);
  box-shadow: 0 0 0 34px rgba(134, 110, 101, 0.04), 0 0 0 76px rgba(134, 110, 101, 0.022);
}

.hero-art::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 12%;
  left: 17%;
  width: 66%;
  aspect-ratio: 1;
  border: 1px solid rgba(245, 248, 250, 0.42);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 250, 251, 0.58), rgba(214, 226, 236, 0.3) 40%, rgba(174, 194, 211, 0.1) 65%, transparent 74%);
  box-shadow: 0 0 70px rgba(184, 202, 219, 0.22), 0 0 0 24px rgba(247, 249, 250, 0.08);
  pointer-events: none;
}
.hero-orbit-one { border-style: dashed; border-color: rgba(85, 109, 131, 0.2); }
.hero-orbit-two { border-color: rgba(85, 109, 131, 0.13); }
.hero-spark { color: #9b756b; }
.constellation-map {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.constellation-map path {
  fill: none;
  stroke: rgba(69, 93, 116, 0.25);
  stroke-width: 1;
  stroke-dasharray: 2 8;
  vector-effect: non-scaling-stroke;
}
.constellation-map circle { fill: #9b756b; opacity: 0.58; }

@media (max-width: 600px) {
  body::before { top: -15vw; right: -28vw; width: 66vw; }
  body::after { bottom: -26vw; left: -28vw; width: 78vw; }
  .hero-art::before { top: 10%; left: 12%; width: 76%; }
  .constellation-map { opacity: 0.65; }
}

@media (max-width: 360px) {
  body::before { width: 66vw; }
  body::after { width: 78vw; }
}