@property --p {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.pie {
    --p: 20;
    --b: 22px;
    --c: darkred;
    --w: 150px;

    width: var(--w);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    margin: 5px;
    place-content: center;
    font-size: 25px;
    font-weight: bold;
    font-family: sans-serif;
    z-index: 1; /* Ensure the text stays on top */
}

.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)));
    z-index: -1; /* Ensure background stays behind the text */
}

.pie:after {
    inset: calc(var(--b) / 2); /* Adjust inset to center properly */
    /* No background for the 'after' element */
    transform: rotate(calc(var(--p) * 3.6deg));
    z-index: -1; /* Ensure the after element stays behind the text */
}

.animate {
    animation: p 1s .5s both;
}

@keyframes p {
    from { --p: 0; }
}