@keyframes p{0%{--p:0}}@property --p{inherits:true;initial-value:0;syntax:"<number>"}.pie{--b:35px;--w:220px;border:10px solid #0089d0;position:relative;--p:20;aspect-ratio:1;margin:5px;border-radius:50%;width:var(--w);--c:#002559;place-content:center;display:inline-grid}.pie p{font-size:40px;font-weight:700;margin-bottom:0;color:#656565}.pie:after,.pie:before{content:"";position:absolute;border-radius:50%}.pie:before{inset:-10px;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{transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));inset:calc(50% - var(--b)/2);background:var(--c)}.animate{animation:p 1s .5s both}.no-round:before{background-size:0 0,auto}.no-round:after{content:none}body{background:#f2f2f2}