:root {
    --appnav-duration: 280ms;
    --appnav-background: #ffffff;
    --appnav-text: #1b1b1f;
    --appnav-loading: #65656f;
}

.appnav {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    background: var(--appnav-background);
    color: var(--appnav-text);
    overscroll-behavior: contain;
}

.appnav-page {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--appnav-background);
    backface-visibility: hidden;
    transform: translateZ(0);
}

.appnav-page[hidden] {
    display: none !important;
}

.appnav-page.is-active {
    display: block;
}

.appnav.appnav-animating,
.appnav.appnav-animating .appnav-page {
    pointer-events: none;
}

.appnav-enter-forward {
    animation: appnav-enter-forward var(--appnav-duration) cubic-bezier(.22, .61, .36, 1) both;
}

.appnav-exit-forward {
    animation: appnav-exit-forward var(--appnav-duration) cubic-bezier(.22, .61, .36, 1) both;
}

.appnav-enter-back {
    animation: appnav-enter-back var(--appnav-duration) cubic-bezier(.22, .61, .36, 1) both;
}

.appnav-exit-back {
    animation: appnav-exit-back var(--appnav-duration) cubic-bezier(.22, .61, .36, 1) both;
}

.appnav-enter-tab,
.appnav-enter-replace {
    animation: appnav-enter-fade var(--appnav-duration) ease both;
}

.appnav-exit-tab,
.appnav-exit-replace {
    animation: appnav-exit-fade var(--appnav-duration) ease both;
}

.appnav-loading,
.appnav-error {
    display: grid;
    min-height: 100%;
    place-items: center;
    padding: 24px;
    color: var(--appnav-loading);
    text-align: center;
}

@keyframes appnav-enter-forward {
    from { transform: translate3d(100%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes appnav-exit-forward {
    from { transform: translate3d(0, 0, 0); opacity: 1; }
    to { transform: translate3d(-24%, 0, 0); opacity: .72; }
}

@keyframes appnav-enter-back {
    from { transform: translate3d(-24%, 0, 0); opacity: .72; }
    to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes appnav-exit-back {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(100%, 0, 0); }
}

@keyframes appnav-enter-fade {
    from { opacity: 0; transform: scale(.985); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes appnav-exit-fade {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
    .appnav-page {
        animation-duration: 1ms !important;
    }
}