/* Hifi dither — drop-in styles. */

.dither {
  --dither-bg-color: #050508;
  --dither-cursor-color: #ffffff33;
  --dither-blur: 6px;
  --dither-bg-opacity: 0.55;
  --dither-bleed: 60px;

  position: relative;
  background: var(--dither-bg-color);
  /* overflow visible by default → dots can displace past the image edge.
     Add overflow: hidden yourself if you want strict clipping. */
}

.dither::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--dither-bg);
  background-size: cover;
  background-position: center;
  filter: blur(var(--dither-blur));
  opacity: var(--dither-bg-opacity);
  pointer-events: none;
  z-index: 0;
}

.dither canvas {
  position: absolute;
  top: calc(-1 * var(--dither-bleed));
  left: calc(-1 * var(--dither-bleed));
  width: calc(100% + 2 * var(--dither-bleed));
  height: calc(100% + 2 * var(--dither-bleed));
  display: block;
  pointer-events: none;
  z-index: 1;
}

.dither-cursor {
  display: none;
}

/* Light theme. Add the class to .dither to opt in. */
.dither.dither-light {
  --dither-bg-color: #f0ebe4;
  --dither-cursor-color: #00000033;
}

/* build f761a4ef1013e5323ff5997b7158dba75eb4292e-26452948491 */