.account-link { display: inline-flex; }

a.account-link.account-link, summary.nav-icon-button.nav-icon-button {
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid #484848;
    border-radius: 8px;
    background: transparent;
    color: #f5f5ef;
    text-decoration: none;
    vertical-align: middle;
    transition: border-color .15s, color .15s;
    -webkit-tap-highlight-color: #fcdf0330;
    touch-action: manipulation;
}

a.account-link.account-link:hover, summary.nav-icon-button.nav-icon-button:hover {
    border-color: #686868;
    background: transparent;
    color: #fcdf03;
    opacity: 1;
    text-decoration: none;
}

a.account-link.account-link:focus-visible, summary.nav-icon-button.nav-icon-button:focus-visible {
    outline: 3px solid #fcdf03;
    outline-offset: 4px;
}

.account-link .account-icon { display: block; flex: 0 0 auto; width: 22px; height: 22px; }
a.account-link.account-link.account-link-menu { width: fit-content; gap: 10px; padding: 0 10px; font-size: .9375rem; line-height: 1.4; }

.language-switcher { position: relative; display: inline-block; flex: 0 0 auto; vertical-align: middle; text-align: left; }
summary.nav-icon-button.nav-icon-button { display: flex; width: 48px; gap: 4px; list-style: none; cursor: pointer; font-size: 1.25rem; line-height: 1; text-shadow: none; }
summary.nav-icon-button::-webkit-details-marker { display: none; }
.language-switcher-arrow { display: inline-block; color: #ccc; font-size: .75rem; }
.language-switcher[open] .language-switcher-arrow { transform: rotate(180deg); }
.language-switcher .language-switcher-menu { position: absolute; z-index: 1001; top: calc(100% + 12px); right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; box-sizing: border-box; width: 220px; max-width: calc(100vw - 40px); padding: 12px; border: 1px solid #424242; border-radius: 14px; background: #161616; color: #fff; box-shadow: 0 14px 32px #0003; }
.language-switcher .language-switcher-menu a { display: flex; align-items: center; justify-content: flex-start; gap: 12px; box-sizing: border-box; min-height: 44px; margin: 0; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: .875rem; font-weight: 550; line-height: 1.4; text-align: left; text-decoration: none; }
.language-switcher .language-switcher-menu a:hover, .language-switcher .language-switcher-menu [aria-current] { background: #303030; }
.language-switcher .language-switcher-menu a:focus-visible { outline: 3px solid #fcdf03; outline-offset: -3px; }
.language-switcher:not([open]) .language-switcher-menu { display: none; }

.language-mobile-menu { position: relative; display: none; flex: 0 0 auto; vertical-align: middle; text-align: left; }
.language-mobile-menu > summary { display: flex; box-sizing: border-box; align-items: center; justify-content: center; gap: 8px; height: 36px; min-height: 36px; padding: 0 12px; border: 1px solid #484848; border-radius: 8px; background: transparent; color: #f5f5ef; list-style: none; cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: .8125rem; line-height: 1.4; }
.language-mobile-menu > summary::-webkit-details-marker { display: none; }
.language-mobile-menu > summary:hover, .language-mobile-menu[open] > summary { background: #282828; }
.language-mobile-menu > summary:focus-visible { outline: 3px solid #fcdf03; outline-offset: 4px; }
.language-mobile-menu .language-dropdown-arrow { color: #ccc; }
.language-mobile-menu[open] .language-dropdown-arrow { transform: rotate(180deg); }
.language-mobile-menu .language-nav-popover { position: absolute; z-index: 1001; top: calc(100% + 12px); right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; box-sizing: border-box; width: 220px; max-width: calc(100vw - 40px); max-height: calc(100dvh - 100px); overflow-y: auto; padding: 12px; border: 1px solid #424242; border-radius: 14px; background: #161616; color: #fff; box-shadow: 0 14px 32px #0003; }
.language-mobile-menu .language-nav-popover a:not(.account-link), .language-mobile-menu .language-nav-popover button { display: flex; flex: 0 0 auto; box-sizing: border-box; align-items: center; justify-content: flex-start; gap: 12px; min-height: 44px; margin: 0; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: .875rem; font-weight: 550; line-height: 1.4; text-align: left; text-decoration: none; cursor: pointer; }
.language-mobile-menu .language-nav-popover a:not(.account-link):hover, .language-mobile-menu .language-nav-popover button:hover { background: #303030; }
.language-mobile-menu .language-nav-popover :is(a, button):focus-visible { outline: 3px solid #fcdf03; outline-offset: -3px; }
.language-mobile-menu .account-link { align-self: flex-start; }
.language-mobile-menu:not([open]) .language-nav-popover { display: none; }

@media (max-width: 1000px) {
    .home-page .language-mobile-menu, .story-page .language-mobile-menu { display: inline-block; }
    .home-page .home-desktop-nav { display: none; }
}

@media (max-width: 900px) {
    .language-mobile-menu { display: inline-block; }
}

@media (prefers-reduced-motion: reduce) {
    a.account-link.account-link, summary.nav-icon-button.nav-icon-button { transition: none; }
}