/* Dither — WebGL canvas host.
   Mirrors .pixel-blast-container so both backgrounds occupy the identical
   layer and neither can grow past its parent or trigger layout scroll. */
.dither-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  pointer-events: none;   /* decorative: it listens on the page, not on itself */
}

.dither-container canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* WebGL2 missing or the program failed to compile: a static dithered texture
   built from the same palette, so the theme still reads as itself. */
.dither-container[data-dither-failed] {
  background-color: var(--dither-fallback-bg, var(--bg, #f4f1e8));
  background-image:
    radial-gradient(var(--dither-dot, rgba(17,17,17,0.16)) 1px, transparent 1px),
    radial-gradient(var(--dither-dot, rgba(17,17,17,0.10)) 1px, transparent 1px);
  background-size: 6px 6px, 6px 6px;
  background-position: 0 0, 3px 3px;
}