*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0b0b12;
  --surface:   #13131e;
  --surface2:  #1a1a28;
  --border:    #2a2a40;
  --primary:   #06b6d4;
  --primary-h: #0891b2;
  --red:       #f43f5e;
  --green:     #22c55e;
  --yellow:    #f59e0b;
  --text:      #e2e8f0;
  --muted:     #64748b;
  --radius:    6px;
}

/* html holds the fallback bg so it shows if the star canvas is unavailable */
html { background: var(--bg); }

body {
  background: transparent;
  color: var(--text);
  font-family: ui-monospace, "Cascadia Code", monospace;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Global parallax star background ─────────────────────────────────
   z-index: -1 places this below all in-flow content.
   Positioned elements (modals, blackout) with z-index ≥ 0 are above it. */
#star-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ── View-transition blackout ─────────────────────────────────────── */
#blackout {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#blackout.active {
  opacity: 1;
  pointer-events: all;
}