/* ─────────────────────────────────────────────────────────────
   STELLIUM COSMOS — REQUIRED CSS

   Pair with cosmos.js. The cosmos host needs to be a sibling of
   your content, not its parent — see cosmos.js header for the
   recommended structure.
   ───────────────────────────────────────────────────────────── */

/* Page wrapper — establishes a positioning context for the cosmos */
.stellium-page {
  position: relative;
  min-height: 100vh;
  background: oklch(0.13 0.035 270); /* deepest navy as the page ground */
  color: oklch(0.96 0.015 82);       /* cream */
}

/* The cosmos itself — full-bleed, behind your content */
.stellium-cosmos {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* cosmos.js will fill this with canvases */
}

/* Your content sits on top, positioned and pointer-events:auto */
.stellium-page > main,
.stellium-page > .stellium-content {
  position: relative;
  z-index: 1;
}

/* Hex fallback for browsers without oklch */
@supports not (color: oklch(0.13 0.035 270)) {
  .stellium-page { background: #15172b; color: #f4ecd2; }
}

/* Honour reduced-motion users (cosmos.js also does, but belt-and-braces) */
@media (prefers-reduced-motion: reduce) {
  .stellium-cosmos { opacity: 0.8; }
}