.ghost-fibers-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ghost-fibers-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.ghost-fibers-backdrop,
.ghost-demo-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: #05070d;
}

.ghost-fibers-backdrop::after,
.ghost-demo-background::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, transparent 18%, rgba(5, 7, 13, 0.18) 58%, rgba(5, 7, 13, 0.72) 100%),
    linear-gradient(180deg, rgba(5, 7, 13, 0.34), transparent 36%, rgba(5, 7, 13, 0.36));
}

.ghost-fibers-backdrop.is-fallback,
.ghost-demo-background.is-fallback {
  background:
    radial-gradient(circle at 52% 28%, rgba(61, 73, 255, 0.26), transparent 34%),
    linear-gradient(145deg, #05070d, #111334 56%, #070b16);
}