.language-switcher {
  display: none;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.language-switcher a {
  display: grid;
  place-items: center;
  min-width: 29px;
  height: 27px;
  padding: 0 7px;
  border-radius: 999px;
  color: #dcecf2;
  font: 800 11px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}

.language-switcher a:hover,
.language-switcher a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .15);
}

.language-switcher a.active {
  color: #172d3b;
  background: linear-gradient(145deg, #ffd563, #eeae31);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .22);
}

.language-switcher a:focus-visible {
  outline: 2px solid #ffd563;
  outline-offset: 2px;
}

@media (min-width: 861px) {
  .language-switcher { display: flex; }
}

@media (hover: none) and (pointer: coarse) {
  .language-switcher { display: none !important; }
}