.hero-dots{--mx:50%;--my:50%;--dot-size:1px;--dot-gap:12px;--dot-base:color-mix(in oklab, var(--foreground) 8%, transparent);--dot-spot:color-mix(in oklab, var(--foreground) 45%, transparent);position:relative}.hero-dots:before,.hero-dots:after{content:"";pointer-events:none;background-size:var(--dot-gap) var(--dot-gap);z-index:4;position:absolute;inset:0}.hero-dots:before{background-image:radial-gradient(circle, var(--dot-base) var(--dot-size), transparent var(--dot-size));-webkit-mask-image:linear-gradient(#000 58%,#0000 75%);mask-image:linear-gradient(#000 58%,#0000 75%)}.hero-dots:after{background-image:radial-gradient(circle, var(--dot-spot) var(--dot-size), transparent var(--dot-size));-webkit-mask-image:radial-gradient(280px 280px at var(--mx) var(--my), #000 0, #0008 48%, transparent 68%), linear-gradient(to bottom, #000 60%, transparent 78%);mask-image:radial-gradient(280px 280px at var(--mx) var(--my), #000 0, #0008 48%, transparent 68%), linear-gradient(to bottom, #000 60%, transparent 78%);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-image:radial-gradient(280px 280px at var(--mx) var(--my), #000 0, #0008 48%, transparent 68%), linear-gradient(to bottom, #000 60%, transparent 78%);-webkit-mask-composite:source-in}