@theme{--dither-cell-xs: 8px; --dither-cell-sm: 12px; --dither-cell-md: 16px; --dither-cell-lg: 20px; --dither-cell-xl: 28px; --dither-cell-2xl: 40px; --dither-image-url: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAu0lEQVQ4T6WSMQqFMBBEE2wDXiVgG8gtglilCuIpcoogVqlEPIVgK3gVIa2Qzw9YbIpttlqGgbcMM5wxlr33LMbI/nccx3I/PQwD0LXPj+OgAaSUBWCtLZ+2bSv308uyAF37/HkeGkAIASL0fQ8yT9MEdO3z67poAKUUiDDPM8i87zvQtc/f96UBmqZBazTG4Ds4z5MG6LoOrTGEgO8gpUQDtG2L1uicw3dw3zcNoLVGa1zXFd9BzpkE+AFp94/4eKx9+AAAAABJRU5ErkJggg==);}@utility dither{--dither-gray: 1; --dither-contrast: 120; --dither-bright: 1; --dither-blur: 0px; --dither-cell: var(--dither-cell-lg); --dither-opacity: 1; --dither-image: var(--dither-image-url); position: relative; isolation: isolate; overflow: hidden; z-index: 0; background: #000; filter: grayscale(var(--dither-gray))brightness(var(--dither-bright))blur(var(--dither-blur))contrast(var(--dither-contrast));&::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: var(--dither-image); background-repeat: repeat; background-size: var(--dither-cell)var(--dither-cell); background-position: 0 0; image-rendering: pixelated; opacity: var(--dither-opacity); mix-blend-mode: screen; }}@utility dither-*{--dither-gray: 1; --dither-contrast: 120; --dither-bright: 1; --dither-blur: 0px; --dither-cell: --value(--dither-cell-*,number); --dither-opacity: 1; --dither-image: var(--dither-image-url); position: relative; isolation: isolate; overflow: hidden; z-index: 0; background: #000; filter: grayscale(var(--dither-gray))brightness(var(--dither-bright))blur(var(--dither-blur))contrast(var(--dither-contrast));&::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: var(--dither-image); background-repeat: repeat; background-size: var(--dither-cell)var(--dither-cell); background-position: 0 0; image-rendering: pixelated; opacity: var(--dither-opacity); mix-blend-mode: screen; }}@utility dither-none{filter: none!important; background: none!important;&::after { content: none!important; background: none!important; }}