/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-xjun2jpaxv] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-xjun2jpaxv] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-vr22jfusss],
.components-reconnect-repeated-attempt-visible[b-vr22jfusss],
.components-reconnect-failed-visible[b-vr22jfusss],
.components-pause-visible[b-vr22jfusss],
.components-resume-failed-visible[b-vr22jfusss],
.components-rejoining-animation[b-vr22jfusss] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-retrying[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-failed[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-vr22jfusss] {
    display: block;
}


#components-reconnect-modal[b-vr22jfusss] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-vr22jfusss 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-vr22jfusss 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-vr22jfusss 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-vr22jfusss]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-vr22jfusss 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-vr22jfusss {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-vr22jfusss {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-vr22jfusss {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-vr22jfusss] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-vr22jfusss] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-vr22jfusss] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-vr22jfusss] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-vr22jfusss] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-vr22jfusss] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-vr22jfusss] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-vr22jfusss 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-vr22jfusss] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-vr22jfusss {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/ThumbnailEditor.razor.rz.scp.css */
.te-stage[b-ot9451ifxy] {
    background-color: #0b0f17;
    background-image:
        linear-gradient(45deg, #161d2b 25%, transparent 25%),
        linear-gradient(-45deg, #161d2b 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #161d2b 75%),
        linear-gradient(-45deg, transparent 75%, #161d2b 75%);
    background-size: 22px 22px;
    background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}

.te-canvas[b-ot9451ifxy] {
    max-width: 100%;
    max-height: 68vh;
    touch-action: none;
    border-radius: 4px;
    box-shadow: 0 12px 48px -12px rgba(0, 0, 0, .7);
}
/* /Components/Shared/Tools/PaintPicker.razor.rz.scp.css */
.te-checker[b-z4pcb9f2ee] {
    background-color: #0b0f17;
    background-image:
        linear-gradient(45deg, #2d3a54 25%, transparent 25%),
        linear-gradient(-45deg, #2d3a54 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #2d3a54 75%),
        linear-gradient(-45deg, transparent 75%, #2d3a54 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
/* /Components/UI/HeroAnimation.razor.rz.scp.css */
@keyframes hero-pulse-b-gqqeqbojty {
    0%, 100% { opacity: 0.6; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

.animate-hero-pulse-slow[b-gqqeqbojty] {
    animation: hero-pulse-b-gqqeqbojty 8s ease-in-out infinite;
}

.animate-hero-pulse-slower[b-gqqeqbojty] {
    animation: hero-pulse-b-gqqeqbojty 12s ease-in-out infinite;
}

@keyframes hero-float-slow-b-gqqeqbojty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes hero-float-medium-b-gqqeqbojty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@keyframes hero-float-fast-b-gqqeqbojty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.animate-hero-float-slow[b-gqqeqbojty] { animation: hero-float-slow-b-gqqeqbojty 6s ease-in-out infinite; }
.animate-hero-float-medium[b-gqqeqbojty] { animation: hero-float-medium-b-gqqeqbojty 5s ease-in-out infinite; }
.animate-hero-float-fast[b-gqqeqbojty] { animation: hero-float-fast-b-gqqeqbojty 4.5s ease-in-out infinite; }

/* Halo glow that follows the mouse. JS keeps --mouse-x / --mouse-y in sync; CSS
   uses them to position a radial gradient. Defaults center the glow so the very
   first paint (before mousemove fires) still looks intentional. The magnet snap
   (button hover) is interpolated by JS via rAF, not CSS transitions — this avoids
   the @property/Razor-tag-parsing tarpit and gives us full easing control. */
.hero-halo[b-gqqeqbojty] {
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
                                rgba(19, 91, 236, 0.22),
                                transparent 55%);
}

/* [data-hero-halo] is on the parent <section> in Home.razor. Blazor's CSS isolation
   only scopes the SUBJECT (rightmost) selector, so .hero-halo gets the scope marker
   and the parent attribute matches unscoped — exactly what we want. */
[data-hero-halo]:hover .hero-halo[b-gqqeqbojty] {
    opacity: 1;
}