.cosmic-background-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #06051a;
}

.cosmic-background-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, transparent 0%, rgba(6, 5, 26, 0.08) 46%, rgba(6, 5, 26, 0.5) 100%),
    linear-gradient(180deg, rgba(6, 5, 26, 0.06), rgba(6, 5, 26, 0.26));
}

.cosmic-background-canvas,
.cosmic-background-labels {
  position: absolute;
  inset: 0;
}

.cosmic-background-canvas {
  z-index: 1;
}

.cosmic-background-labels {
  z-index: 2;
  pointer-events: none;
}

.cosmic-background-enabled > .stars-bg {
  opacity: 0.24;
  background: transparent;
}

.cosmic-background-enabled > .landing-shell,
.cosmic-background-enabled > .page,
.cosmic-background-enabled > .system-page-shell,
.cosmic-background-enabled > main,
.cosmic-background-enabled > header,
.cosmic-background-enabled > footer {
  position: relative;
  z-index: 1;
}

.cosmic-background-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 52% 40%, rgba(79, 70, 229, 0.18), transparent 48%),
    #06051a;
}

@media (prefers-reduced-motion: reduce) {
  .cosmic-background-stage::after {
    background: rgba(6, 5, 26, 0.22);
  }
}

@media (forced-colors: active) {
  .cosmic-background-stage {
    display: none;
  }
}