body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@property --p{syntax: "<number>"; inherits: true; initial-value: 1;}.pie{--p: 20;--b: 22px;--c: #b4a1fc;--w: 150px;--t: 20px;width:var(--w);aspect-ratio:1;position:relative;display:inline-grid;margin:5px;place-content:center;font-size:var(--t);color:"white";letter-spacing:-.75px;font-family:sans-serif}.pie:before,.pie:after{content:"";position:absolute;border-radius:50%}.pie:before{inset: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{inset:calc(50% - var(--b) / 2);background:var(--c);transform:rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2))}.animate{animation:p .15s .15s both}.no-round:before{background-size:0 0,auto}.no-round:after{content:none}@keyframes p{0%{--p: 0}}@keyframes pulseAnimation{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@keyframes strobeAnimation{0%,to{opacity:0}49%{opacity:.95}50%{opacity:1}51%{opacity:.95}}