:has(>.mesh){position:relative}.mesh{--gridBlock:clamp(60px, 8vw, 120px);--circleSize:clamp(160px, 30vw, 360px);--pointerX:50%;--pointerY:50%;opacity:.7;will-change:auto;min-width:320px;max-width:100vw;min-height:320px;position:absolute;overflow:hidden}.mesh.pointer-track:hover:after{background:radial-gradient(circle var(--circleSize) at 50% 50%, transparent 20%, #061d26cc 50%, #061d26)}.mesh-background{background:conic-gradient(from 90deg at 1px 1px, #061d26 90deg, #d7f3f6 0) 0 0/var(--gridBlock) var(--gridBlock);pointer-events:none;position:absolute;inset:-4px;box-shadow:inset 0 0 80px 80px #061d26}.mesh-out:after{transition:transform .6s}.mesh:after{background:radial-gradient(circle var(--circleSize) at 50% 50%, #061d26cc 40%, #061d26);content:"";width:200%;height:200%;transform:translate(calc(var(--pointerX) / 2 - 75%), calc(var(--pointerY) / 2 - 75%));pointer-events:none;display:block;position:absolute;top:50%;left:50%}.mesh.small-circle{--circleSize:clamp(120px, 24vw, 320px)}.mesh.big-circle{--circleSize:clamp(200px, 40vw, 420px)}@media only screen and (width>=768px){.mesh{min-width:480px;min-height:480px}}@media only screen and (width>=1024px){.mesh{min-width:640px;min-height:640px}}@media (pointer:coarse){.mesh:after{transition:transform .6s}}