.language-nav {
  position: fixed;
  z-index: 30;
  top: calc(1rem + env(safe-area-inset-top));
  right: calc(1rem + env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: .75rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  color: #f4f8f5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: top 220ms ease, left 220ms ease, right 220ms ease, width 220ms ease, padding 220ms ease, opacity 300ms ease, transform 300ms ease, visibility 300ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

html.booting .language-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-.5rem);
  visibility: hidden;
}

.language-nav.is-scrolled {
  padding: .35rem;
}

.language-brand {
  display: none;
  color: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.045em;
  text-decoration: none;
}

.language-picker { position: relative; }

.language-trigger {
  display: grid;
  width: 2.9rem;
  height: 2.9rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.language-trigger:hover,
.language-trigger[aria-expanded="true"] {
  transform: scale(1.1);
  color: #bbf7d0;
}

.language-trigger:focus-visible,
.language-option:focus-visible,
.language-brand:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 3px;
}

.language-globe { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.language-menu {
  position: absolute;
  top: calc(100% + .65rem);
  right: 0;
  display: grid;
  width: max-content;
  min-width: 13rem;
  gap: .25rem;
  padding: .45rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: .9rem;
  background: rgb(7 9 8 / 96%);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 55%);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(-5px) scale(.98);
  transform-origin: top right;
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  visibility: hidden;
}

.language-menu.is-open { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }

.language-option {
  display: flex;
  min-height: 2.8rem;
  align-items: center;
  gap: .7rem;
  padding: .55rem .7rem;
  border-radius: .55rem;
  color: #f4f8f5;
  font-size: .85rem;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}

.language-option:hover,
.language-option[aria-current="page"] { background: rgb(255 255 255 / 8%); color: #bbf7d0; }
.language-flag { display: block; width: 1.35rem; height: .9rem; flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 0 1px rgb(255 255 255 / 20%); }

@media (max-width: 760px) {
  .language-nav {
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
    justify-content: space-between;
    padding: calc(.55rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) .55rem calc(1rem + env(safe-area-inset-left));
    background: linear-gradient(to bottom, rgb(0 0 0 / 92%), rgb(0 0 0 / 0%));
  }

  .language-nav.is-scrolled {
    padding: calc(.45rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) .45rem calc(1rem + env(safe-area-inset-left));
    border-radius: 0;
    background: rgb(0 0 0 / 82%);
  }

  .language-brand { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.25rem; }
  .language-trigger { width: 2.75rem; height: 2.75rem; background: rgb(0 0 0 / 42%); }
  .language-menu { right: 0; left: auto; transform-origin: top right; }
  .language-menu.is-open { transform: translateY(0) scale(1); }

  body[data-page="blog/index.html"] .page-shell > .topbar,
  body[data-page="blog/posts/new-website.html"] .page-shell > .topbar { top: 4rem; }
  body[data-page="blog/index.html"] .page-shell,
  body[data-page="blog/posts/new-website.html"] .page-shell { padding-top: 8.5rem; }
  body[data-page="resume.html"] .shell { padding-top: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .language-nav, .language-trigger, .language-menu, .language-option { transition: none; }
}