*{box-sizing:border-box;padding:0;margin:0}html,body{max-width:100vw;overflow-x:hidden;scroll-behavior:smooth}a{color:inherit;text-decoration:none}.pie{--c: red;--p: 33;--b: 10px;--w: 150px;width:calc(var(--w) * 1px);aspect-ratio:1;place-content:center}.pie:before{content:"";position:absolute;border-radius:50%;top:0;right:0;bottom:0;left:0;background:radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,conic-gradient(var(--c) calc(var(--p) * 1%),#0000 0);-webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)))}.pie:after{content:"";position:absolute;border-radius:50%;inset:calc(50% - var(--b) / 2);background:var(--c);transform:rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) * 1px / 2))}