.rs-topbar {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: var(--rs-topbar-h, 32px);
    border-bottom: 1px solid rgba(226,232,240,.9);
    background: var(--rs-topbar-bg, linear-gradient(90deg, rgba(2,132,199,.10), rgba(99,102,241,.10)));
    color: var(--rs-topbar-text, rgba(15,23,42,.86));
}

.rs-topbar__media {
    position: absolute;
    inset: 0;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}

.rs-topbar__overlay {
    position: absolute;
    inset: 0;
    background: var(--rs-topbar-bg, rgba(255,255,255,.55));
    opacity: .55;
    z-index: 1;
}

.rs-topbar:not(.has-media) .rs-topbar__media {
    display: none;
}

.rs-topbar:not(.has-media) .rs-topbar__overlay {
    display: none;
}

.rs-topbar.has-media:not(.has-text) .rs-topbar__overlay {
    display: none;
}

.rs-topbar__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 16px;
}

.rs-topbar__link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.rs-topbar__surface {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rs-topbar__content {
    width: 100%;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: var(--rs-topbar-justify, center);
    gap: 10px;
}

.rs-topbar__text {
    font-size: var(--rs-topbar-fs, 14px);
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--rs-topbar-text, rgba(15,23,42,.86));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(980px, 92vw);
}

.rs-topbar.has-media.has-text .rs-topbar__text {
    text-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.rs-topbar.is-marquee .rs-topbar__content {
    justify-content: flex-start;
}

.rs-topbar.is-marquee .rs-topbar__text {
    display: inline-block;
    padding-left: 100%;
    animation: rsTopbarMarquee var(--rs-topbar-marquee-dur, 14000ms) linear infinite;
}

@keyframes rsTopbarMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.rs-topbar.is-fade .rs-topbar__content {
    animation: rsTopbarFade var(--rs-topbar-cycle, 17500ms) ease-in-out infinite;
}

@keyframes rsTopbarFade {
    0% {
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.rs-topbar.is-slide .rs-topbar__content {
    animation: rsTopbarSlide var(--rs-topbar-cycle, 17500ms) ease-in-out infinite;
}

@keyframes rsTopbarSlide {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }

    12% {
        opacity: 1;
        transform: translateY(0);
    }

    88% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(8px);
    }
}

.rs-topbar.is-zoom .rs-topbar__content {
    animation: rsTopbarZoom var(--rs-topbar-cycle, 17500ms) ease-in-out infinite;
}

@keyframes rsTopbarZoom {
    0% {
        opacity: 0;
        transform: scale(.98);
    }

    12% {
        opacity: 1;
        transform: scale(1);
    }

    88% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.02);
    }
}

.rs-topbar.is-pulse .rs-topbar__content {
    animation: rsTopbarPulse var(--rs-topbar-cycle, 17500ms) ease-in-out infinite;
}

@keyframes rsTopbarPulse {
    0% {
        opacity: 0;
        transform: scale(.99);
    }

    12% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.01);
    }

    88% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(.99);
    }
}

.rs-topbar.is-flip .rs-topbar__content {
    transform-origin: center;
    animation: rsTopbarFlip var(--rs-topbar-cycle, 17500ms) ease-in-out infinite;
}

@keyframes rsTopbarFlip {
    0% {
        opacity: 0;
        transform: rotateX(55deg);
    }

    12% {
        opacity: 1;
        transform: rotateX(0deg);
    }

    88% {
        opacity: 1;
        transform: rotateX(0deg);
    }

    100% {
        opacity: 0;
        transform: rotateX(-55deg);
    }
}

.rs-topbar.is-blur .rs-topbar__content {
    animation: rsTopbarBlur var(--rs-topbar-cycle, 17500ms) ease-in-out infinite;
}

@keyframes rsTopbarBlur {
    0% {
        opacity: 0;
        filter: blur(10px);
    }

    12% {
        opacity: 1;
        filter: blur(0);
    }

    88% {
        opacity: 1;
        filter: blur(0);
    }

    100% {
        opacity: 0;
        filter: blur(10px);
    }
}

.rs-topbar.is-glow .rs-topbar__text {
    animation: rsTopbarGlow var(--rs-topbar-cycle, 17500ms) ease-in-out infinite;
}

@keyframes rsTopbarGlow {
    0% {
        opacity: 0;
        text-shadow: 0 0 0 rgba(255,255,255,0);
    }

    12% {
        opacity: 1;
        text-shadow: 0 0 18px rgba(255,255,255,.35);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 26px rgba(255,255,255,.55);
    }

    88% {
        opacity: 1;
        text-shadow: 0 0 18px rgba(255,255,255,.35);
    }

    100% {
        opacity: 0;
        text-shadow: 0 0 0 rgba(255,255,255,0);
    }
}

.rs-topbar.is-wave .rs-topbar__text {
    animation: rsTopbarWave var(--rs-topbar-cycle, 17500ms) ease-in-out infinite;
}

@keyframes rsTopbarWave {
    0% {
        opacity: 0;
        transform: translateY(-6px);
    }

    12% {
        opacity: 1;
        transform: translateY(0);
    }

    35% {
        opacity: 1;
        transform: translateY(-2px);
    }

    55% {
        opacity: 1;
        transform: translateY(2px);
    }

    75% {
        opacity: 1;
        transform: translateY(-1px);
    }

    88% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(6px);
    }
}