.site-utility-rail {
  position: absolute;
  z-index: 28;
  top: max(28px, env(safe-area-inset-top));
  right: max(30px, 4.3vw);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 32px;
  color: rgba(232, 222, 204, .52);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
}

.language-switch button {
  appearance: none;
  border: 0;
  padding: .38rem .12rem;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color 180ms ease, text-shadow 180ms ease, opacity 180ms ease;
}

.language-switch span {
  color: rgba(241, 200, 116, .28);
}

.language-switch button[aria-pressed="true"] {
  color: rgba(245, 234, 215, .9);
  cursor: default;
}

.language-switch button:not([aria-pressed="true"]):hover,
.language-switch button:not([aria-pressed="true"]):focus-visible {
  color: #f1c874;
  text-shadow: 0 0 14px rgba(241, 200, 116, .2);
  outline: none;
}

.language-switch button:focus-visible {
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(241, 200, 116, .55);
}

.i18n-swap-out {
  animation: i18n-text-out 150ms cubic-bezier(.55,.08,.92,.46) both;
  animation-delay: var(--i18n-delay, 0ms);
}

.i18n-swap-in {
  animation: i18n-text-in 285ms cubic-bezier(.16,.72,.18,1) both;
  animation-delay: calc(var(--i18n-delay, 0ms) * .55);
}

@keyframes i18n-text-out {
  from { clip-path: inset(0 0 0 0); opacity: 1; transform: translateX(0); }
  to { clip-path: inset(0 0 0 100%); opacity: .58; transform: translateX(5px); }
}

@keyframes i18n-text-in {
  from { clip-path: inset(0 100% 0 0); opacity: .45; transform: translateX(-7px); }
  to { clip-path: inset(0 0 0 0); opacity: 1; transform: translateX(0); }
}

@media (max-width: 680px) {
  .site-utility-rail {
    top: max(22px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    gap: .7rem;
    font-size: .62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .i18n-swap-out,
  .i18n-swap-in {
    animation: none !important;
  }

  .language-switch button {
    transition: none !important;
  }
}