.material-grid,
.material-scan,
.material-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.material-grid::before,
.material-scan::before,
.material-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.material-grid::before {
  opacity: .28;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--border) 45%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--border) 36%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}

.material-scan::before {
  opacity: .2;
  background: repeating-linear-gradient(0deg, transparent 0 3px, var(--foreground) 4px);
  mix-blend-mode: multiply;
}

.material-dark::before {
  opacity: .18;
  background-image: radial-gradient(circle at 1px 1px, var(--accent) 1px, transparent 0);
  background-size: 9px 9px;
}