.site-nav--desktop ul,
.site-nav--desktop li,
.nav-app-list-item {
    display: flex;
    align-items: center;
}

.site-nav--desktop ul {
    justify-content: flex-end;
}

.site-nav--desktop a:not(.nav-app-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 2px;
    line-height: 1;
}

@media (min-width: 769px) {
    .site-nav--desktop {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
    }
}

body .nav-app-button,
body.poster-theme > header nav a.nav-app-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 55px;
    height: 28px;
    padding: 0 10px;
    margin-left: 9px;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(37, 79, 80, .30);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(95, 119, 117, .16) 0%, rgba(55, 83, 82, .11) 48%, rgba(37, 65, 64, .14) 100%);
    color: rgba(255, 253, 248, .98) !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: normal;
    vertical-align: middle;
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .58),
        inset 0 -1px 2px rgba(27, 54, 54, .14),
        0 1px 0 rgba(255, 255, 255, .32),
        0 3px 7px rgba(37, 58, 57, .07);
    text-decoration: none;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}

body .nav-app-button > span,
body.poster-theme > header nav a.nav-app-button > span {
    position: relative;
    z-index: 2;
    color: rgba(255, 253, 248, .98);
    font-size: .92em;
    font-weight: 500;
    line-height: 1;
    text-shadow:
        0 1px 1px rgba(19, 39, 38, .32),
        0 0 1px rgba(19, 39, 38, .16);
}

body .nav-app-button::before,
body.poster-theme > header nav a.nav-app-button::before {
    position: absolute;
    z-index: -1;
    inset: 2px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: inherit;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .36),
        inset 0 -1px 0 rgba(25, 54, 53, .12);
    content: '';
    pointer-events: none;
}

body .nav-app-button::after,
body.poster-theme > header nav a.nav-app-button::after {
    position: absolute;
    top: 3px;
    right: 10px;
    left: 10px;
    height: 38%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .54) 0%, rgba(255, 255, 255, .15) 62%, transparent 100%);
    content: '';
    opacity: .45;
    filter: blur(.2px);
    pointer-events: none;
}

body .nav-app-button:hover,
body.poster-theme > header nav a.nav-app-button:hover {
    border-color: rgba(230, 111, 75, .44);
    background: linear-gradient(180deg, rgba(111, 135, 132, .20) 0%, rgba(66, 94, 92, .15) 48%, rgba(43, 72, 70, .18) 100%);
    color: var(--color-paper-light, #fffdf8) !important;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .64),
        inset 0 -1px 2px rgba(27, 54, 54, .18),
        0 1px 0 rgba(255, 255, 255, .38),
        0 4px 8px rgba(37, 58, 57, .09);
}

body .nav-app-button:hover > span,
body.poster-theme > header nav a.nav-app-button:hover > span {
    color: rgba(255, 253, 248, .99);
}

body .nav-app-button:focus-visible,
body.poster-theme > header nav a.nav-app-button:focus-visible {
    outline: 2px solid var(--color-coral, #e66f4b);
    outline-offset: 3px;
}

body > header {
    overflow: visible;
}

.mobile-menu-toggle {
    position: relative;
    z-index: 1101;
    display: none;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37, 79, 80, .24);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, .18));
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .72),
        0 4px 10px rgba(37, 58, 57, .08);
}

.mobile-menu-toggle span {
    position: absolute;
    left: 50%;
    width: 17px;
    height: 2px;
    border-radius: 999px;
    background-color: var(--color-teal-dark, #254f50);
    transform-origin: center;
    transition: transform 180ms ease, opacity 180ms ease;
}

.mobile-menu-toggle span:first-child {
    transform: translate(-50%, -4px);
}

.mobile-menu-toggle span:last-child {
    transform: translate(-50%, 4px);
}

.mobile-menu-toggle[aria-expanded='true'] span:first-child {
    transform: translate(-50%, 0) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded='true'] span:last-child {
    transform: translate(-50%, 0) rotate(-45deg);
}

.mobile-menu-toggle:focus-visible {
    outline: 2px solid var(--color-coral, #e66f4b);
    outline-offset: 3px;
}

.mobile-navigation {
    position: absolute;
    z-index: 1100;
    top: calc(100% + 8px);
    right: 16px;
    left: 16px;
    padding: 10px;
    border: 1px solid rgba(221, 210, 197, .82);
    border-radius: 16px;
    background: rgba(255, 253, 248, .96);
    box-shadow: 0 14px 32px rgba(37, 58, 57, .12);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
}

.mobile-navigation[hidden] {
    display: none !important;
}

.mobile-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.mobile-navigation li {
    display: block;
}

body > header .mobile-navigation__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    color: var(--color-text, #454d4a) !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
}

body > header .mobile-navigation__link:hover,
body > header .mobile-navigation__link.font-semibold {
    background: rgba(237, 227, 214, .56);
    color: var(--color-teal-dark, #254f50) !important;
}

body > header .mobile-navigation__app {
    margin-top: 4px;
    border: 1px solid rgba(37, 79, 80, .22);
    background: linear-gradient(180deg, rgba(95, 119, 117, .13), rgba(37, 65, 64, .10));
    color: var(--color-teal-dark, #254f50) !important;
    font-weight: 500;
}

body > header .mobile-navigation__app::after {
    content: '↗';
}

@media (max-width: 768px) {
    .site-nav--desktop {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: inline-flex !important;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-navigation:not([hidden]) {
        display: block;
    }
}

@media (min-width: 769px) {
    .mobile-menu-toggle,
    .mobile-navigation {
        display: none !important;
    }
}