@property --p{syntax:"<number>";inherits:true;initial-value:0}.pie{--p:20;--b:22px;--c:darkred;--w:150px;aspect-ratio:1;display:inline-grid;font-family:sans-serif;font-size:10px;font-weight:700;line-height:0;place-content:center;position:relative;width:var(--w)}.pie:after,.pie:before{border-radius:50%;content:"";position:absolute}.pie:before{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);inset: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{background:var(--c);inset:calc(50% - var(--b)/2);transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2))}.animate{animation:p 1s .5s both}.no-round:before{background-size:0 0,auto}.no-round:after{content:none}@keyframes p{0%{--p:0}}