:root {
  --bg: #0d0f12;
  --surface-1: rgba(20, 23, 27, .94);
  --surface-2: rgba(27, 31, 36, .94);
  --surface-3: rgba(36, 39, 43, .72);
  --surface-glass: rgba(13, 15, 18, .88);
  --surface-hi: rgba(201, 162, 39, .08);
  --border-1: rgba(201, 162, 39, .16);
  --border-2: rgba(201, 162, 39, .32);
  --border-lit: rgba(201, 162, 39, .62);
  --ink-1: #f3efe3;
  --ink-2: #c9c4b8;
  --ink-3: #929087;
  --ink-4: #6f726e;
  --accent: #b3172d;
  --accent-hot: #d4213d;
  --accent-grad: linear-gradient(135deg, #b3172d, #d4213d);
  --accent-glow: rgba(179, 23, 45, .38);
  --warm: #c9a227;
  --warm-hot: #e2bf4c;
  --warm-grad: linear-gradient(135deg, #c9a227, #e2bf4c);
  --warm-glow: rgba(201, 162, 39, .32);
  --sans: Tahoma, Verdana, "Segoe UI", sans-serif;
  --mono: "Cascadia Mono", Consolas, monospace;
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;
}

.bg-space {
  left: var(--rail);
  background:
    linear-gradient(90deg, rgba(201,162,39,.025) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(rgba(201,162,39,.02) 1px, transparent 1px) 0 0 / 64px 64px,
    radial-gradient(circle at 72% 18%, rgba(179,23,45,.18), transparent 34%),
    #0d0f12;
}
.stars { display: none; }
.bg-nebula {
  inset: 8% auto auto 42%;
  width: 48vw;
  height: 48vw;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 38%, rgba(201,162,39,.14), transparent 36%), radial-gradient(circle, rgba(179,23,45,.16), transparent 64%);
  filter: blur(72px);
}
.voice-shell { margin-left: var(--rail); }
.voice-card {
  border-color: var(--border-2);
  border-top: 2px solid var(--accent);
  border-radius: 0;
  clip-path: var(--cut);
  background: linear-gradient(145deg, rgba(20,23,27,.96), rgba(8,10,12,.96));
}
.hero-title, .setup-title, .parts-label, .settings-head h2 { font-family: var(--display); text-transform: uppercase; }
.hero-eyebrow { color: var(--warm-hot); }
.hero-mark-dot { background: var(--accent-hot); }
.hero-mark-ring { border-color: var(--warm); }
.btn, .btn-mega, .ctrl, .setup-card, .setup-banner, .notice, .parts, .stats, .settings-dialog {
  border-radius: 0 !important;
}
.btn-mega, .btn-primary { clip-path: var(--cut); }
.voice-home { display: none; }

/* germaneiland.com rework: the old site-rail collapsed to a 66px-tall
 * BOTTOM bar on mobile (hence the bottom/padding-bottom offsets below);
 * topbar.js's chrome (assets/topbar.css) is a fixed TOP bar at every
 * breakpoint instead, so those offsets are no longer needed here. */
@media (max-width: 680px) {
  .bg-space { left: 0; }
  .voice-shell { margin-left: 0; }
}