@keyframes growProgressBar {
    0%,
    33% {
        --pgPercentage: 0;
    }

    100% {
        --pgPercentage: var(--value);
    }
}

@property --pgPercentage {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

div[role="progressbarCircle"] {
    --size: 12rem;
    --fg: #ff771f;
    --bg: #3d3d3d;
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 40%;
    display: grid;
    place-items: center;
    background: radial-gradient(
            closest-side,
            white 80%,
            transparent 0 99.9%,
            white 0
        ),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
    text-shadow: 1px 2px 3px #ddeeff, 0 0 0 black, -1px 1px 0 #ddeeff,
        1px 1px 0 white;

    color: rgba(254, 103, 2, 0.8);
    letter-spacing: 1px;
    font-size: 3em;
    font-weight: bold;
}

.letterpress {
    text-shadow: 1px 2px 3px #ddeeff, 0 0 0 black, -1px 1px 0 #ddeeff,
        1px 1px 0 white;

    color: rgba(254, 103, 2, 0.8);
    letter-spacing: -5px;
    font-size: 5em;
    font-weight: bold;
}

.subLetterpress {
    font-size: 1em;
    color: #333;
    letter-spacing: 5px;
}

div[role="progressbarCircle"]::before {
    counter-reset: percentage var(--value);
    content: counter(percentage) "%";
}