#overlay {
    --spinner-accent: var(--accent);
    --spinner-mask-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36.629 36'%3E%3Cpath d='M0 0V36H36.629V0H0ZM20.3969 33.3999H16.2359V20.4887C16.2359 19.3595 17.1694 18.4457 18.3145 18.4457C19.4597 18.4457 20.3931 19.3632 20.3931 20.4887V33.3999H20.3969ZM27.1997 33.3999H23.0424V20.4887C23.0424 17.9257 20.9222 15.8456 18.3183 15.8456C15.7144 15.8456 13.5942 17.9294 13.5942 20.4887V33.3999H9.43693V20.4961C9.43693 15.6822 13.4241 11.7635 18.3221 11.7635C23.2201 11.7635 27.2072 15.6822 27.2072 20.4961V33.3999H27.1997ZM33.9835 33.3999H29.8452V20.4961C29.8452 14.2485 24.6713 9.16343 18.3145 9.16343C11.9577 9.16343 6.78386 14.2485 6.78386 20.4961V33.3999H2.64551V2.60008H33.9835V33.3999Z'/%3E%3C/svg%3E");
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--spinner-accent);
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.spinner {
    position: relative;
    width: 72px;
    height: 72px;
    z-index: 12001;
}

.spinner-container {
    width: min(210px, calc(100vw - 2.5rem));
    aspect-ratio: 1 / 1;
    min-height: 210px;
    padding: 1.1rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 4%, var(--color-light) 96%);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--color-light) 70%);
    box-shadow:
        8px 8px 18px color-mix(in srgb, var(--accent) 14%, transparent),
        -8px -8px 18px color-mix(in srgb, var(--color-light) 96%, transparent),
        inset 2px 2px 4px color-mix(in srgb, var(--color-light) 94%, transparent),
        inset -2px -2px 5px color-mix(in srgb, var(--accent) 10%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
}

.spinner::before,
.spinner::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-image: var(--spinner-mask-url);
    mask-image: var(--spinner-mask-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.spinner::before {
    background: var(--spinner-accent);
    opacity: 0.28;
}

.spinner::after {
    background-image: linear-gradient(var(--spinner-accent), var(--spinner-accent));
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 0%;
    opacity: 0.95;
    -webkit-animation: spinner-fill 1.45s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            animation: spinner-fill 1.45s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: background-size, opacity;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.spinner-label {
    color: var(--spinner-accent);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-align: center;
    margin-top: 0.15rem;
    text-shadow: 0 1px 1px color-mix(in srgb, var(--color-light) 50%, transparent);
}

@-webkit-keyframes spinner-fill {
    0% {
        background-size: 100% 0%;
        opacity: 0.9;
    }
    60% {
        background-size: 100% 100%;
        opacity: 1;
    }
    80% {
        background-size: 100% 100%;
        opacity: 1;
    }
    100% {
        background-size: 100% 0%;
        opacity: 0.9;
    }
}

@keyframes spinner-fill {
    0% {
        background-size: 100% 0%;
        opacity: 0.9;
    }
    60% {
        background-size: 100% 100%;
        opacity: 1;
    }
    80% {
        background-size: 100% 100%;
        opacity: 1;
    }
    100% {
        background-size: 100% 0%;
        opacity: 0.9;
    }
}