/* Shared language control, including compact mobile navigation. */
.language-switch {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(160, 202, 255, .3);
  border-radius: 999px;
  background: rgba(3, 14, 30, .82);
}
.language-switch button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #b4c6de;
  padding: 7px 10px;
  min-height: 34px;
  font: 650 12px/1.2 system-ui, "Microsoft YaHei", sans-serif;
  cursor: pointer;
}
.language-switch button[aria-pressed="true"] { background: #dffcff; color: #071225; }
.language-switch button:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.language-switch button[aria-pressed="true"]:hover { background: #fff; color: #071225; }
.language-switch button:focus-visible { outline: 2px solid #66e4f1; outline-offset: 3px; }
.language-switch-floating { position: fixed; right: 20px; top: 20px; z-index: 100; box-shadow: 0 8px 24px #0006; }
html[lang="en"] h1 span { white-space: normal; }
html[lang="en"] h1 { line-height: 1.12; }
/* Gradient text needs room below the baseline for letters such as g, p and y. */
html[lang="en"] .hero h1 span {
  white-space: normal;
  line-height: 1.2;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
html[lang="en"] .hero-actions .button { white-space: normal; }
html[lang="en"] .speech { max-width: 290px; }
html[lang="en"] .collectible .item-name { overflow-wrap: anywhere; }
html[lang="en"] .nav-link { text-align: center; }
/* CSS-generated labels follow the selected language as well. */
html[lang="en"] .guide::before { content: "A good fit if: "; }
.nav-links, .nav-actions { flex-wrap: wrap; }
.site-nav .nav-inner { height: auto; min-height: 72px; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 760px) {
  .site-nav .nav-inner { height: auto; min-height: 64px; flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .site-nav .brand { min-width: 0; }
  .nav-links { margin-left: auto; gap: 5px; }
  .nav-links .github-link { padding: 8px 10px; font-size: 12px; }
  .nav-actions { width: 100%; justify-content: flex-start; gap: 5px; }
  .unified-nav .nav-actions { flex-wrap: wrap; justify-content: flex-start; gap: 5px; }
  .nav-actions .language-switch { margin-left: auto; }
  .language-switch { gap: 0; padding: 2px; }
  .language-switch button { padding: 4px 6px; min-height: 26px; font-size: 11px; }
  .unified-nav .nav-actions { flex-wrap: nowrap; }
  .unified-nav .nav-link { min-width: 0; padding: 6px; font-size: 11px; }
  html[lang="en"] .hero-actions .button { overflow-wrap: anywhere; }
  html[lang="en"] .speech { max-width: min(100%, 340px); }
  .language-switch-floating { top: 12px; right: 12px; }
}
@media (max-width: 640px) {
  .site-nav:not(.unified-nav) .nav-inner { flex-wrap: nowrap; gap: 6px; }
  .site-nav:not(.unified-nav) .brand { flex: 0 1 auto; gap: 8px; }
  .site-nav:not(.unified-nav) .brand img { width: 32px; height: 32px; flex-shrink: 0; }
  .site-nav:not(.unified-nav) .nav-links,
  .site-nav:not(.unified-nav) .nav-actions { width: auto; flex-wrap: nowrap; gap: 4px; margin-left: auto; }
  .site-nav:not(.unified-nav) .nav-links { flex-shrink: 0; }
  .site-nav:not(.unified-nav) .nav-links .github-link { padding: 6px 7px; font-size: 11px; }
  .site-nav:not(.unified-nav) .nav-link.primary { min-width: 0; padding: 6px 8px; font-size: 11px; }
}

/* Long English replies get their own row above the portrait, including pop animation. */
@media (min-width: 641px) {
  html[lang="en"] .mascot-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
  }
  html[lang="en"] .mascot-stage .speech {
    position: relative;
    order: 0;
    top: auto;
    left: auto;
    width: min(100%, 340px);
    max-width: 340px;
    margin: 0;
    transform: none;
    overflow-wrap: anywhere;
  }
  html[lang="en"] .mascot-stage .speech.pop { transform: translateY(-2px) scale(1.02); }
  html[lang="en"] .mascot-stage .mascot-button { order: 1; flex: none; }
  html[lang="en"] .mascot-stage .float-tag.one { top: 52%; }
}