.locale-switcher {
  position: fixed;
  inset: auto 1rem 1rem auto;
  z-index: 90;
  color: #171717;
  font: 600 .78rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  direction: ltr;
}

.locale-switcher details { position: relative; }
.locale-switcher summary {
  display: flex;
  min-width: 7rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: .7rem 1rem;
  border: 1px solid rgba(23, 23, 23, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .14);
  cursor: pointer;
  list-style: none;
}
.locale-switcher summary::-webkit-details-marker { display: none; }
.locale-switcher__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + .5rem);
  display: grid;
  width: min(18rem, calc(100vw - 2rem));
  max-height: min(28rem, calc(100vh - 6rem));
  overflow-y: auto;
  padding: .5rem;
  border: 1px solid rgba(23, 23, 23, .18);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .18);
}
.locale-switcher__menu a {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  padding: .65rem .8rem;
  border-radius: .65rem;
  color: #171717;
  text-decoration: none;
}
.locale-switcher__menu a:hover,
.locale-switcher__menu a:focus-visible,
.locale-switcher__menu a[aria-current="page"] { background: #f0ece5; }
.locale-switcher :focus-visible { outline: 3px solid #9b4a2f; outline-offset: 2px; }
.language-switch,
[data-language-switch] { display: none !important; }

[dir="rtl"] .locale-switcher { inset-inline: 1rem; inset-inline-start: auto; }
[dir="rtl"] .locale-switcher__menu { right: auto; left: 0; }
[dir="rtl"] body { text-align: start; }

:lang(zh-Hans) body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
:lang(ja) body { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; }
:lang(ko) body { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
:lang(ar) body { font-family: "Geeza Pro", "Noto Naskh Arabic", Arial, sans-serif; }
:lang(hi) body { font-family: "Kohinoor Devanagari", "Nirmala UI", Arial, sans-serif; }

html { overflow-wrap: anywhere; }
@media (max-width: 30rem) {
  .locale-switcher { inset: auto .75rem .75rem auto; }
  [dir="rtl"] .locale-switcher { inset-inline: .75rem; inset-inline-start: auto; }
}