.ts-flow-shell {
    --ts-flow-bg: var(--ts-flow-topbar-bg, var(--site-topbar-bg, var(--panel-strong, #f5fbff)));
    --ts-flow-brand: #175a96;
    --ts-flow-topbar-bg: var(--site-topbar-bg, var(--panel-strong, #f5fbff));
    --ts-flow-card-bg: var(--site-carousel-card-bg, var(--panel, #fffdf8));
    --ts-flow-topbar-z: 80;
    --ts-flow-dock-z: 80;
    --ts-flow-content-z: 10;
    --ts-flow-micro-exit-ms: 205ms;
    --ts-flow-micro-enter-ms: 320ms;
    --ts-flow-page-exit-ms: 620ms;
    --ts-flow-page-hold-ms: 130ms;
    --ts-flow-page-enter-ms: 820ms;
    --ts-flow-card-shadow: 0 8px 18px rgba(15, 64, 105, 0.06), 0 1px 2px rgba(15, 64, 105, 0.05);
    --ts-flow-card-radius: 22px;
    --ts-flow-card-gap: 14px;
}

@media (max-width: 720px) {
    .ts-flow-topbar {
        position: relative;
        z-index: var(--ts-flow-topbar-z);
        background: var(--ts-flow-bg);
        isolation: isolate;
    }

    .ts-flow-dock {
        position: sticky;
        bottom: 0;
        z-index: var(--ts-flow-dock-z);
        background: var(--ts-flow-bg);
        isolation: isolate;
    }

    .ts-flow-heading,
    .ts-flow-stage {
        position: relative;
        z-index: var(--ts-flow-content-z);
    }

    .ts-flow-transitioning {
        pointer-events: none;
    }

    .ts-flow-heading-exit,
    .ts-flow-stage-exit,
    .ts-flow-heading-enter,
    .ts-flow-stage-enter {
        will-change: transform, opacity;
    }

    .ts-flow-heading-exit {
        animation: tsFlowHeadingExitMicro var(--ts-flow-micro-exit-ms) cubic-bezier(.4, 0, .7, .2) both;
    }

    .ts-flow-stage-exit {
        animation: tsFlowStageExitMicro var(--ts-flow-micro-exit-ms) cubic-bezier(.4, 0, .7, .2) both;
    }

    .ts-flow-heading-enter {
        animation: tsFlowHeadingEnterMicro var(--ts-flow-micro-enter-ms) cubic-bezier(.18, 1.08, .28, 1) both;
    }

    .ts-flow-stage-enter {
        animation: tsFlowStageEnterMicro var(--ts-flow-micro-enter-ms) cubic-bezier(.18, 1.08, .28, 1) both;
    }

    .ts-flow-transition--page .ts-flow-heading-exit {
        animation: tsFlowHeadingExitPage var(--ts-flow-page-exit-ms) cubic-bezier(.55, 0, .75, .25) both;
    }

    .ts-flow-transition--page .ts-flow-stage-exit {
        animation: tsFlowStageExitPage var(--ts-flow-page-exit-ms) cubic-bezier(.55, 0, .75, .25) both;
    }

    .ts-flow-transition--page .ts-flow-heading-enter {
        animation: tsFlowHeadingEnterPage var(--ts-flow-page-enter-ms) cubic-bezier(.16, .84, .28, 1) both;
    }

    .ts-flow-transition--page .ts-flow-stage-enter {
        animation: tsFlowStageEnterPage var(--ts-flow-page-enter-ms) cubic-bezier(.16, .84, .28, 1) both;
    }

    .ts-flow-pending-enter {
        opacity: 0;
    }

    html.ts-flow-leaving-page .ts-flow-heading,
    html.ts-flow-leaving-page .ts-flow-stage {
        opacity: 0;
        pointer-events: none;
    }

    html.ts-flow-pre-enter .ts-flow-heading {
        opacity: 0;
        transform: translate3d(0, -120vh, 0);
        transform: translate3d(0, -110dvh, 0);
    }

    html.ts-flow-pre-enter .ts-flow-stage {
        opacity: 0;
        transform: translate3d(0, 120vh, 0);
        transform: translate3d(0, 110dvh, 0);
    }

    html.ts-flow-pre-enter .ts-flow-topbar,
    html.ts-flow-pre-enter .ts-flow-dock {
        opacity: 1;
        transform: none;
    }
}

@keyframes tsFlowHeadingExitMicro {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(0, -14px, 0); }
}

@keyframes tsFlowStageExitMicro {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(0, 18px, 0); }
}

@keyframes tsFlowHeadingEnterMicro {
    from { opacity: 0; transform: translate3d(0, -14px, 0); }
    72% { opacity: 1; transform: translate3d(0, 2px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tsFlowStageEnterMicro {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    72% { opacity: 1; transform: translate3d(0, -2px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tsFlowHeadingExitPage {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to {
        opacity: 0;
        transform: translate3d(0, -120vh, 0);
        transform: translate3d(0, -110dvh, 0);
    }
}

@keyframes tsFlowStageExitPage {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to {
        opacity: 0;
        transform: translate3d(0, 120vh, 0);
        transform: translate3d(0, 110dvh, 0);
    }
}

@keyframes tsFlowHeadingEnterPage {
    from {
        opacity: 0;
        transform: translate3d(0, -120vh, 0);
        transform: translate3d(0, -110dvh, 0);
    }
    86% { opacity: 1; transform: translate3d(0, 4px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tsFlowStageEnterPage {
    from {
        opacity: 0;
        transform: translate3d(0, 120vh, 0);
        transform: translate3d(0, 110dvh, 0);
    }
    86% { opacity: 1; transform: translate3d(0, -4px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ts-flow-heading-exit,
    .ts-flow-stage-exit,
    .ts-flow-heading-enter,
    .ts-flow-stage-enter {
        animation: none !important;
        transition: none !important;
    }
}