.language-control {
  position: fixed;
  z-index: 120;
  top: 76px;
  right: clamp(12px, 2vw, 30px);
  display: grid;
  justify-items: end;
  gap: 4px;
  color: #dcecff;
  font: 600 11px/1.2 ui-sans-serif, system-ui, sans-serif;
}

.language-buttons {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(151, 197, 240, .22);
  border-radius: 999px;
  background: rgba(5, 19, 40, .78);
  box-shadow: 0 10px 28px rgba(0, 9, 24, .16);
  backdrop-filter: blur(14px);
}

.language-buttons button {
  min-width: 35px;
  min-height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(220, 236, 255, .66);
  font: inherit;
  letter-spacing: .08em;
  cursor: pointer;
}

.language-buttons button:hover,
.language-buttons button:focus-visible {
  color: #fff;
  outline: none;
}

.language-buttons button[aria-pressed="true"] {
  background: rgba(167, 211, 255, .17);
  color: #fff;
}

.language-credit {
  padding-right: 5px;
  color: rgba(163, 187, 215, .62);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
}

.language-credit:hover,
.language-credit:focus-visible {
  color: #dcecff;
}

.localized-en { display: none; }
html[data-language="en"] .localized-ru { display: none; }
html[data-language="en"] .localized-en { display: block; }

@media (max-width: 720px) {
  .language-control {
    top: 64px;
    right: 10px;
  }

  .language-credit {
    display: none;
  }
}