.ph-dither-btn,.ph-dither-btn[data-tone=light]{--btn-bg:var(--ph-black);--pixel:var(--ph-purple);--pixel-hover:var(--ph-black);--label:var(--ph-cream);--label-hover:var(--ph-cream)}.dark .ph-dither-btn:not([data-tone=light]),[data-tone=dark] .ph-dither-btn:not([data-tone=light]),.ph-dither-btn[data-tone=dark]{--btn-bg:var(--ph-cream);--pixel:var(--ph-cream);--pixel-hover:var(--ph-yellow);--label:var(--ph-black);--label-hover:var(--ph-black)}.ph-dither-btn{background:var(--btn-bg);cursor:pointer;width:fit-content;font-family:var(--ph-font-mono);letter-spacing:.025em;text-transform:uppercase;border:0;justify-content:center;align-items:center;padding:.75rem 1.5rem;font-size:1.25rem;font-weight:700;line-height:1.4;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.ph-dither-btn__pixels{grid-template-columns:repeat(var(--cols), 1fr);pointer-events:none;align-content:center;display:grid;position:absolute;inset:0}.ph-dither-btn__pixel{aspect-ratio:1;background:var(--pixel);position:relative}.ph-dither-btn__pixel:after{content:"";background:var(--pixel-hover);opacity:0;transition:opacity 0s calc(var(--i) * 18ms);position:absolute;inset:0}.ph-dither-btn__label{z-index:1;color:var(--label);transition:color .2s;position:relative}.ph-dither-btn:focus-visible .ph-dither-btn__pixel:after{opacity:1}.ph-dither-btn:focus-visible .ph-dither-btn__label{color:var(--label-hover)}@media (hover:hover){.ph-dither-btn:hover .ph-dither-btn__pixel:after{opacity:1}.ph-dither-btn:hover .ph-dither-btn__label{color:var(--label-hover)}}@media (prefers-reduced-motion:reduce){.ph-dither-btn__pixel:after,.ph-dither-btn__label{transition:none}}