.mobile-quick-nav {
    display: none;
}

@media (max-width: 768px) {
    body.mobile-quick-nav-enabled {
        --mobile-quick-nav-clearance: calc(78px + env(safe-area-inset-bottom, 0px));
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
        background-color: #fff;
    }

    .mobile-quick-nav {
        --mobile-quick-nav-edge: max(12px, min(60px, calc((100vw - 262px) / 2)));
        position: fixed;
        z-index: 9000;
        left: var(--mobile-quick-nav-edge);
        right: var(--mobile-quick-nav-edge);
        bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: auto;
        height: 54px;
        box-sizing: border-box;
        padding: 0;
        border: 1px solid rgba(61, 39, 27, 0.1);
        border-radius: 14px;
        color: #261c17;
        background: rgba(255, 255, 255, 0.9);
        box-shadow:
            0 10px 28px rgba(47, 28, 17, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(24px) saturate(150%);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
        isolation: isolate;
        transform: none;
        transition: opacity 180ms ease, visibility 180ms ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-quick-nav.is-hidden,
    .mob-nav-open .mobile-quick-nav {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .mobile-quick-nav__lens {
        position: absolute;
        z-index: 0;
        left: 4px;
        top: 4px;
        bottom: 4px;
        width: 44px;
        height: auto;
        border-radius: 10px;
        background: #ff8c42;
        box-shadow: 0 7px 18px rgba(255, 140, 66, 0.3);
        opacity: 0;
        transition:
            left 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
            opacity 160ms ease;
    }

    .mobile-quick-nav[data-active-index="0"] .mobile-quick-nav__lens {
        left: 4px;
    }

    .mobile-quick-nav[data-active-index="1"] .mobile-quick-nav__lens {
        left: calc(25% - 9px);
    }

    .mobile-quick-nav[data-active-index="2"] .mobile-quick-nav__lens {
        left: calc(50% - 22px);
    }

    .mobile-quick-nav[data-active-index="3"] .mobile-quick-nav__lens {
        left: calc(75% - 35px);
    }

    .mobile-quick-nav[data-active-index="4"] .mobile-quick-nav__lens {
        left: calc(100% - 48px);
    }

    .mobile-quick-nav.has-active-section .mobile-quick-nav__lens {
        opacity: 1;
    }

    .mobile-quick-nav__link {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
        padding: 0;
        border: 0;
        border-radius: 0;
        color: inherit;
        background: transparent;
        box-shadow: none;
        text-decoration: none;
        touch-action: manipulation;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        filter: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-quick-nav__link:active,
    .mobile-quick-nav__link:hover,
    .mobile-quick-nav__link:focus {
        color: inherit;
        background: transparent;
        box-shadow: none;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        filter: none !important;
        text-decoration: none;
    }

    .mobile-quick-nav__link:focus-visible {
        outline: 2px solid rgba(255, 140, 66, 0.9);
        outline-offset: -5px;
        border-radius: 10px;
    }

    .mobile-quick-nav__icon-box {
        position: relative;
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
    }

    .mobile-quick-nav__icon {
        grid-area: 1 / 1;
        display: block;
        width: 22px;
        height: 22px;
        fill: currentColor;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        filter: none !important;
    }

    .mobile-quick-nav__icon--fill {
        opacity: 0;
    }

    .mobile-quick-nav__link.is-active {
        color: #fff;
    }

    .mobile-quick-nav__link.is-active .mobile-quick-nav__icon--regular {
        opacity: 1;
    }

    .mobile-quick-nav__link.is-active .mobile-quick-nav__icon--fill {
        opacity: 0.38;
        transform: none !important;
    }

    .mobile-quick-nav.is-navigating {
        pointer-events: none;
    }

    .mobile-quick-nav__unread {
        position: absolute;
        z-index: 2;
        top: -2px;
        right: -4px;
        width: 5px;
        height: 5px;
        border: 0;
        border-radius: 50%;
        background: #ff3b30;
        box-shadow: none;
    }

    .mobile-quick-nav__unread[hidden] {
        display: none;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .mobile-quick-nav,
    .mobile-quick-nav__lens,
    .mobile-quick-nav__icon {
        transition: none;
    }
}