.language-switcher {
  min-height: 2.5rem;
  max-width: 8.5rem;
  padding: 0.45rem 2rem 0.45rem 0.65rem;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
}

.site-header {
  gap: 1rem;
}

.site-header nav {
  margin-inline-start: auto;
}

.tool-header .language-switcher {
  color: #eef2ef;
  border-color: #34505b;
  background: #0b171d;
}

.language-switcher:focus-visible {
  outline: 3px solid #ff6433;
  outline-offset: 3px;
}

html[dir="rtl"] body {
  text-align: right;
}

html[dir="rtl"] .brand,
html[dir="rtl"] nav,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .tags,
html[dir="rtl"] .legend {
  flex-direction: row-reverse;
}

html[dir="rtl"] .project-data div {
  grid-template-columns: 1fr 6rem;
}

html[dir="rtl"] .project-data dt {
  grid-column: 2;
}

html[dir="rtl"] .project-data dd {
  grid-column: 1;
  grid-row: 1;
}

html[dir="rtl"] .media-index {
  right: 1rem;
  left: auto;
}

html[dir="rtl"] canvas,
html[dir="rtl"] video,
html[dir="rtl"] .hero-structure svg,
html[dir="rtl"] .concept-media,
html[dir="rtl"] .bridge-diagram,
html[dir="rtl"] .poster-clean {
  direction: ltr;
}

html[dir="rtl"] .tool-header > a {
  direction: rtl;
}

@media (max-width: 650px) {
  .site-header {
    gap: 0.55rem;
  }

  .language-switcher {
    max-width: 6.4rem;
    min-height: 2.25rem;
    padding-inline: 0.45rem 1.5rem;
    font-size: 0.75rem;
  }

  html[dir="rtl"] .project-data div {
    grid-template-columns: 1fr;
  }

  html[dir="rtl"] .project-data dt,
  html[dir="rtl"] .project-data dd {
    grid-column: 1;
  }

  html[dir="rtl"] .project-data dd {
    grid-row: auto;
  }
}