:root {
    --fp-fast-ui-accent: #2f8cff;
    --fp-fast-ui-accent-2: #7cc6ff;
    --fp-fast-ui-shadow: 0 10px 24px rgba(47, 140, 255, 0.16);
}

html.fp-fast-ui-ready,
html.fp-fast-ui-ready body {
    -webkit-tap-highlight-color: transparent;
}

html.fp-fast-ui-ready a,
html.fp-fast-ui-ready button,
html.fp-fast-ui-ready [role="button"],
html.fp-fast-ui-ready .btn,
html.fp-fast-ui-ready .back-button,
html.fp-fast-ui-ready .back-btn,
html.fp-fast-ui-ready .nav-item,
html.fp-fast-ui-ready .nav-button,
html.fp-fast-ui-ready .bottom-nav-item {
    touch-action: manipulation;
}

html.fp-fast-ui-ready .fp-fast-tap {
    transform: scale(0.985);
    filter: saturate(1.03);
    transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}

.fp-fast-nav-bar {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 2147483646;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.fp-fast-nav-bar__line {
    width: 34%;
    max-width: 220px;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--fp-fast-ui-accent) 0%, var(--fp-fast-ui-accent-2) 100%);
    box-shadow: var(--fp-fast-ui-shadow);
    transform: translate3d(-120%, 0, 0);
    will-change: transform;
}

html.fp-fast-nav-pending .fp-fast-nav-bar {
    opacity: 1;
}

html.fp-fast-nav-pending .fp-fast-nav-bar__line {
    animation: fp-fast-nav-slide 1.05s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

@keyframes fp-fast-nav-slide {
    0% {
        transform: translate3d(-120%, 0, 0);
    }

    70% {
        transform: translate3d(210%, 0, 0);
    }

    100% {
        transform: translate3d(260%, 0, 0);
    }
}