.shapes{--r:25px;--s:40px;--_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%) no-repeat;-webkit-mask:right calc(var(--s) + var(--r)) top 0 var(--_m), right calc(var(--s) + var(--r)) var(--_m), radial-gradient(var(--s) at 100% 0,#0000 99%,#000 101%) calc(-1*var(--r)) var(--r) no-repeat, conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)), #0000 25%,#000 0);mask:right calc(var(--s) + var(--r)) top 0 var(--_m), right calc(var(--s) + var(--r)) var(--_m), radial-gradient(var(--s) at 100% 0,#0000 99%,#000 101%) calc(-1*var(--r)) var(--r) no-repeat, conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)), #0000 25%,#000 0)}.inverted-radius{--r:20px;--s:30px;--x:20px;--y:10px;aspect-ratio:1;border-radius:var(--r);--_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);--_g:conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),#0000 25%,#000 0);--_d:(var(--s) + var(--r));width:250px;-webkit-mask:calc(100% - var(--_d) - var(--x)) 100% var(--_m), 100% calc(100% - var(--_d) - var(--y)) var(--_m), radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 calc(100% + 1px)) calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)), var(--_g) calc(-1*var(--_d) - var(--x)) 0, var(--_g) 0 calc(-1*var(--_d) - var(--y));mask:calc(100% - var(--_d) - var(--x)) 100% var(--_m), 100% calc(100% - var(--_d) - var(--y)) var(--_m), radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 calc(100% + 1px)) calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)), var(--_g) calc(-1*var(--_d) - var(--x)) 0, var(--_g) 0 calc(-1*var(--_d) - var(--y));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
