:root {
  --mono-top: #141414;
  --mono-bot: #0b0b0c;
  --mono-accent: #ffffff;
  --grid-size: 64px;
  --grid-color: rgba(255, 255, 255, 0.055);
  --corner-stroke: rgba(255, 255, 255, 0.28);
}

.mono-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(820px 520px at 50% -8%, rgba(255, 255, 255, 0.14), transparent 62%),
    linear-gradient(180deg, var(--mono-top) 0%, var(--mono-bot) 100%);
}

.mono-stage .mono-glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: clamp(420px, 38vw, 760px);
  height: clamp(420px, 38vw, 760px);
  border-radius: 50%;
  mix-blend-mode: screen;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.16) 36%,
      rgba(255, 255, 255, 0.08) 60%,
      transparent 72%
    );
  filter: blur(2px);
  opacity: 0.9;
}

.mono-stage .mono-glow.g1 {
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
}

.mono-stage .mono-glow.g2 {
  top: 36%;
  right: 14%;
}

.mono-stage .mono-glow.g3 {
  bottom: -180px;
  left: 16%;
}

.mono-grid {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0.9;
  background-image:
    repeating-linear-gradient(to bottom, var(--grid-color) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(to right, var(--grid-color) 0 1px, transparent 1px var(--grid-size));
  -webkit-mask: radial-gradient(1400px 900px at 50% 20%, #000 78%, transparent 100%);
  mask: radial-gradient(1400px 900px at 50% 20%, #000 78%, transparent 100%);
  z-index: 1;
}

.mono-noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.mono-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 900px at 50% 40%, transparent 70%, rgba(0, 0, 0, 0.52) 100%);
  z-index: 3;
}

.mono-corner {
  position: absolute;
  width: 96px;
  height: 96px;
  opacity: 0.55;
  border: 2px solid var(--corner-stroke);
  border-bottom: none;
  border-right: none;
  border-radius: 16px;
  z-index: 4;
}

.mono-corner.tl {
  top: 120px;
  left: clamp(16px, 6vw, 240px);
}

.mono-corner.tr {
  top: 120px;
  right: clamp(16px, 6vw, 240px);
  transform: scaleX(-1);
}

@media (max-width: 992px) {
  .mono-stage .mono-glow.g2 {
    right: 8%;
    top: 40%;
  }

  .mono-stage .mono-glow.g3 {
    left: 10%;
    bottom: -140px;
  }
}