:root {
  --night: #070a14;
  --ink: #e9ecf8;
  --muted: #8d95b3;
  --aether: #7fe3ff;
  --danger: #ff7a5c;
}
html, body {
  margin: 0;
  height: 100%;
  background: var(--night);
  color: var(--ink);
  overflow: hidden;
  font: 16px/1.5 "Avenir Next", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
}
#stage { position: fixed; inset: 0; }
#aether { display: block; width: 100%; height: 100%; outline: none; }
#veil {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 18px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 38%, #18223f 0%, var(--night) 62%);
  transition: opacity 0.6s ease;
}
#veil.gone { opacity: 0; pointer-events: none; }
h1 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(40px, 8vw, 84px);
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  text-shadow: 0 0 32px rgba(127, 227, 255, 0.35);
}
#status { color: var(--muted); min-height: 1.5em; }
#status.error { color: var(--danger); max-width: 34em; margin: 0 16px; }
#status a { color: var(--aether); }
#bar { width: min(320px, 70vw); height: 2px; margin: 0 auto; background: rgba(255, 255, 255, 0.08); }
#fill { width: 0; height: 100%; background: var(--aether); box-shadow: 0 0 12px var(--aether); transition: width 0.2s; }