#pageLoadBlur {
    --page-load-blur-out-duration: 280ms;
    position: fixed;
    z-index: 2147483646;
    inset: 0;
    bottom: var(--page-loader-footer-height, calc(40px + .5rem + 1px));
    pointer-events: none;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
#pageLoadBlur[hidden] { display: none !important; }
#pageLoadBlur[data-visibility="entering"] {
    animation: pageLoaderFadeIn 180ms ease-out both;
    animation-delay: var(--page-loader-enter-delay, 0ms);
}
#pageLoadBlur[data-visibility="leaving"] {
    animation: pageLoaderFadeOut var(--page-load-blur-out-duration) ease-out both;
}
#pageLoader {
    --page-loader-fade-duration: 180ms;
    position: fixed;
    z-index: 2147483647;
    left: var(--page-loader-left, 0px);
    bottom: var(--page-loader-footer-height, calc(40px + .5rem + 1px));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: var(--page-loader-width, 100%);
    color: var(--text, #222);
    text-align: center;
    pointer-events: none;
}
#pageLoader[hidden] { display: none !important; }
#pageLoader[data-visibility="entering"] {
    animation: pageLoaderFadeIn var(--page-loader-fade-duration) ease-out both;
    animation-delay: var(--page-loader-enter-delay, 0ms);
}
#pageLoader[data-visibility="leaving"] {
    animation: pageLoaderFadeOut var(--page-loader-fade-duration) ease-in both;
}
@keyframes pageLoaderFadeIn {
    from { opacity: var(--page-loader-enter-opacity, 0); }
    to { opacity: 1; }
}
@keyframes pageLoaderFadeOut {
    from { opacity: var(--page-loader-exit-opacity, 1); }
    to { opacity: 0; }
}
#pageLoader .pageLoader__label {
    box-sizing: border-box;
    max-width: calc(100% - 32px);
    padding: 10px 20px;
    border: 1px solid color-mix(in srgb, var(--text, #222) 10%, transparent);
    border-radius: 999px;
    background: var(--bg, #fff);
    box-shadow: 0 4px 20px #0002;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
#pageLoader .pageLoader__track {
    width: 100%;
    height: 4px;
    overflow: hidden;
    background: var(--border, #ddd);
}
#pageLoader .pageLoader__fill {
    display: block;
    width: var(--page-loader-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: #e24040;
    transition: width 100ms linear;
}
@media (max-width: 1023px) {
    #pageLoadBlur { bottom: var(--page-loader-footer-height, 80px); }
    #pageLoader {
        left: 0;
        right: 0;
        width: auto;
        bottom: var(--page-loader-footer-height, 80px);
    }
}
@media (prefers-reduced-motion: reduce) {
    #pageLoadBlur { --page-load-blur-out-duration: 0ms; }
    #pageLoadBlur[data-visibility] { animation: none; }
    #pageLoader { --page-loader-fade-duration: 0ms; animation: none; }
    #pageLoader .pageLoader__fill { transition: none; }
}