.lang-switch {
  position: fixed; top: 14px; right: 14px; z-index: 20;
  display: flex; gap: 3px; padding: 4px;
  border: 1px solid rgba(78, 205, 196, .22); border-radius: 999px;
  background: rgba(13, 13, 13, .92);
  font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace; font-style: normal;
}
.lang-btn {
  all: unset; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 9px; border-radius: 999px;
  color: #7db5b0; cursor: pointer; letter-spacing: .06em;
  font: inherit; font-style: normal;
  transition: color .15s, background .15s, box-shadow .15s;
}
.lang-btn:hover { color: #4ecdc4; }
.lang-btn.is-active { color: #4ecdc4; background: rgba(78, 205, 196, .12); box-shadow: inset 0 0 0 1px rgba(78, 205, 196, .55); }
.lang-btn:focus-visible { outline: 2px solid #4ecdc4; outline-offset: 2px; }
.lang-flag { font-size: 13px; line-height: 1; }
.lang-switch--inline { position: static; margin-left: auto; }
@media (max-width: 480px) {
  .lang-switch:not(.lang-switch--inline) { position: relative; top: 0; right: 0; width: max-content; margin: 0 auto 18px; }
}