html {
  color-scheme: dark;
  background: #0c0d0f !important;
}

body {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(205, 209, 216, .12), transparent 50%),
    radial-gradient(ellipse at 82% 24%, rgba(143, 147, 156, .09), transparent 44%),
    linear-gradient(160deg, #1a1b1f 0%, #111214 58%, #0c0d10 100%) !important;
  background-attachment: fixed !important;
}

body::after {
  content: "";
  position: fixed;
  inset: -100vh 0 0;
  z-index: -1;
  height: 200vh;
  pointer-events: none;
  opacity: .48;
  background:
    repeating-linear-gradient(105deg, transparent 0 115px, rgba(229, 231, 236, .09) 116px, transparent 118px 204px),
    repeating-linear-gradient(105deg, transparent 0 28px, rgba(229, 231, 236, .04) 29px, transparent 31px 66px);
  background-size: 300px 440px, 185px 260px;
  animation: monochrome-rain 2.8s linear infinite;
}

html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  backdrop-filter: grayscale(1);
  -webkit-backdrop-filter: grayscale(1);
}

@keyframes monochrome-rain {
  to {
    transform: translateY(50vh);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
    transform: none;
  }
}