html[data-dm-bg-theme] {
  background: #020703;
  --dm-bg-static-top-soft: rgba(0, 92, 37, .32);
  --dm-bg-static-accent-soft: rgba(0, 255, 102, .12);
  --dm-bg-static-vignette-opacity: .72;
  --dm-bg-static-grid-opacity: .35;
  --dm-bg-liquid-top-soft: rgba(0, 120, 48, .22);
  --dm-bg-silk-top-soft: rgba(5, 48, 22, .50);
}

body.dm-portal-bg-ready {
  background: #020703 !important;
}

.dm-portal-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -10%, var(--dm-bg-static-top-soft), transparent 34rem),
    radial-gradient(circle at 18% 16%, var(--dm-bg-static-accent-soft), transparent 26rem),
    linear-gradient(180deg, #031008 0%, #020703 48%, #000 100%);
}

.dm-portal-bg::before,
.dm-portal-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dm-portal-bg::before {
  z-index: 2;
  background:
    radial-gradient(ellipse at center, transparent 0 58%, rgba(0, 0, 0, .70) 100%),
    linear-gradient(rgba(255, 255, 255, .018) 50%, rgba(0, 0, 0, .06) 50%);
  background-size: auto, 100% 4px;
  mix-blend-mode: screen;
  opacity: .72;
  opacity: var(--dm-bg-static-vignette-opacity, .72);
}

.dm-portal-bg::after {
  z-index: 1;
  background:
    linear-gradient(rgba(114, 255, 156, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 255, 156, .08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 82%);
  opacity: var(--dm-bg-static-grid-opacity, .35);
}

.dm-portal-bg canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
}

html[data-dm-bg-theme="static"] .dm-portal-bg canvas {
  display: none;
}

html[data-dm-bg-theme="liquid"] .dm-portal-bg {
  background:
    radial-gradient(circle at 50% -10%, var(--dm-bg-liquid-top-soft), transparent 34rem),
    linear-gradient(180deg, #020b05 0%, #000 100%);
}

html[data-dm-bg-theme="silk"] .dm-portal-bg {
  background:
    radial-gradient(circle at 50% 0%, var(--dm-bg-silk-top-soft), transparent 36rem),
    linear-gradient(180deg, #020904 0%, #000 100%);
}

@media (prefers-reduced-motion: reduce) {
  .dm-portal-bg canvas {
    display: none;
  }
}