:root {
  --bg: #07040d;
  --bg-glow: #170b2e;
  --fg: #e7e2f5;
  --fg-dim: #8d84ab;
  --accent: #f472b6;
  --accent-2: #818cf8;
  --accent-3: #a855f7;
  --panel-bg: rgba(13, 7, 26, 0.52);
  --panel-border: rgba(255, 255, 255, 0.09);
  --font: "JetBrains Mono", "SFMono-Regular", Consolas, Menlo, monospace;
  --font-brand: "Nasalization", "JetBrains Mono", sans-serif;
}

@font-face {
  font-family: "Nasalization";
  src: url("/assets/fonts/nasalization.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 300;
  font-size: 15px;
}

.hidden {
  display: none !important;
}

a {
  color: var(--accent-2);
  text-decoration-color: rgba(129, 140, 248, 0.4);
}

a:hover {
  color: var(--accent);
}

button {
  font-family: var(--font);
  font-weight: 300;
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  padding: 0.3em 0.7em;
  font-size: 0.85em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

::selection {
  background: rgba(244, 114, 182, 0.3);
  color: #fff;
}

/* ---------- animated cosmic backdrop ---------- */
#bg {
  position: fixed;
  inset: 0;
  /* 0, not a negative value -- z-index:-1 on a fixed element with no
     explicit stacking context on the foreground siblings gets painted
     behind the page in some browsers instead of merely behind #terminal/
     #gui, which is why the glass panels showed no backdrop at all.
     Explicit stacking on both sides (this at 0, panels at 1) is what
     actually keeps this behind them, reliably. */
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 90% 60% at 50% -10%, var(--bg-glow) 0%, var(--bg) 55%, #030106 100%);
}

#starfield {
  position: absolute;
  inset: 0;
  opacity: 0.8;
}

#brand-mark {
  position: fixed;
  top: 1.1rem;
  left: 1.5rem;
  z-index: 2;
  font-family: var(--font-brand);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  opacity: 0.75;
  pointer-events: none;
  user-select: none;
}

.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  mix-blend-mode: screen;
  will-change: transform;
}

.nebula--1 {
  width: 55vw;
  height: 55vw;
  top: -15%;
  left: -12%;
  background: radial-gradient(circle, var(--accent-3), transparent 70%);
  animation: drift1 46s ease-in-out infinite;
}

.nebula--2 {
  width: 48vw;
  height: 48vw;
  bottom: -18%;
  right: -8%;
  background: radial-gradient(circle, var(--accent-2), transparent 70%);
  animation: drift2 58s ease-in-out infinite;
}

.nebula--3 {
  width: 38vw;
  height: 38vw;
  top: 28%;
  left: 58%;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  animation: drift3 52s ease-in-out infinite;
}

/* A fourth, smaller and dimmer than the other three -- extra depth behind
   the galactic band (drawn on the canvas, see background.js) without
   competing with it for attention. Opacity set here rather than folded
   into the gradient stop so it layers correctly under mix-blend-mode:
   screen like its siblings. */
.nebula--4 {
  width: 26vw;
  height: 26vw;
  top: 55%;
  left: 20%;
  opacity: 0.32;
  background: radial-gradient(circle, var(--accent-2), transparent 70%);
  animation: drift4 64s ease-in-out infinite;
}

@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vw, 8vh) scale(1.15); }
}

@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-8vw, -6vh) scale(1.1); }
}

@keyframes drift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-5vw, 5vh) scale(0.9); }
}

@keyframes drift4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4vw, -7vh) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .nebula,
  #mic-btn.listening {
    animation: none;
  }
}