/* Both appearances use the same geometry and original logo outlines. */
:root {
  --cta-width: 248px;
  --cta-height: 56px;
  --hero-ink: #f7f7f6;
  --hero-secondary: #edf2f6;
  --hero-surface: #11283a;
}
.brand { position: relative; }
.brand img { position: absolute; inset: 0; }
.brand .brand-on-light { display: none; }
html[data-theme="light"] .brand .brand-on-dark { display: none; }
html[data-theme="light"] .brand .brand-on-light { display: block; }
.site-header, .masthead { color: var(--hero-ink); }
.masthead { background-color: var(--hero-surface); }
.hero-intro { color: var(--hero-secondary); }
.menu-button { color: inherit; }
.header-inner { padding-block-start: 12px; }
.header-actions { gap: 28px; }
.compact-preferences { display: none; }
.language-switch { inline-size: 80px; justify-content: center; }
.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hero-ink);
  isolation: isolate;
}
.theme-toggle::before {
  content: '';
  position: absolute;
  inset: -8px;
  background: radial-gradient(ellipse, #e8cdaa24, transparent 68%);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
  z-index: -1;
}
.theme-toggle:hover::before, .theme-toggle:focus-visible::before { opacity: 1; }
.theme-symbol { width: 24px; height: 24px; position: relative; pointer-events: none; }
.theme-symbol .icon { position: absolute; inset: 0; width: 24px; height: 24px; stroke-width: 1.35; transition: transform 360ms ease, opacity 220ms ease; }
.theme-symbol .icon-sun { opacity: 0; transform: rotate(-75deg) scale(.5); }
.theme-symbol .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="light"] .theme-symbol .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="light"] .theme-symbol .icon-moon { opacity: 0; transform: rotate(75deg) scale(.5); }

/* Add breathing room while keeping both language layouts identical. */
:root { --header-height: 108px; --masthead-height: calc(clamp(580px, 41.667vw, 680px) + 28px); }
.hero-copy { padding-block-start: 46px; row-gap: clamp(28px, 2.4vw, 40px); }
.hero-intro { display: flex; align-items: center; flex: none; height: 40px; min-height: 40px; margin-top: 0; }
@media (min-width: 1600px) { .hero-copy { padding-block-start: 57px; } }
.tone { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.tone > * { pointer-events: none; }

/* A constant hit area and background avoid the gradient-to-solid hover flash. */
.primary-button,
.primary-button:hover,
.primary-button:focus-visible,
.primary-button:active {
  position: relative;
  isolation: isolate;
  width: var(--cta-width);
  height: var(--cta-height);
  min-height: var(--cta-height);
  background: linear-gradient(110deg, #e67714, #ef8624);
  color: #fff;
  transform: none;
  transition: none;
  box-shadow: 0 1px 0 #ffffff20 inset, 0 5px 18px #162c3c12;
}
.primary-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #ffffff24;
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
  z-index: -1;
}
.primary-button:hover::before,
.primary-button:focus-visible::before { opacity: 1; }
.primary-button:active::before { opacity: .45; }
.primary-button > * { pointer-events: none; }
.hello,
html[dir="ltr"] .hello {
  width: var(--cta-width);
  align-self: flex-start;
  justify-content: center;
  margin-top: 0;
  gap: 20px;
  min-height: 80px;
}
.hello-divider { background: currentColor; opacity: .42; }
.hello-chinese { display: grid; grid-template-columns: max-content max-content; gap: 8px 0; justify-items: center; }
.hello-hanzi { grid-area: 1 / 1; }
.hello-punctuation { grid-area: 1 / 2; }
.hello-chinese .hello-pinyin { grid-area: 2 / 1; }
.hello-arabic { font-size: 34px; }
.tone-accent { left: 15%; width: 77%; height: .38em; }
.hello-pinyin {
  --pinyin-caron-width: .55em;
  --pinyin-caron-top: .15em;
  display: flex;
  gap: .32em;
  font: 400 22px/1.25 Century, 'Century Gothic', sans-serif;
}
.hello-syllable { display: inline-flex; }
/* See docs/CENTURY-GOTHIC-PINYIN.md before changing these proportions. */
.hello-pinyin .tone-accent {
  top: var(--pinyin-caron-top);
  left: calc(50% - .015em);
  width: var(--pinyin-caron-width);
  height: auto;
  transform: translateX(-50%);
}

/* Preserve the photograph's own lighting; only the foliage and mountains move. */
.tree {
  animation: tree-sway 7s ease-in-out infinite alternate;
  transform-origin: 43% 94%;
  will-change: transform;
}
.ambient, .tree-wrap, .stage-image { pointer-events: none; }
.motion-paused .tree,
.motion-paused .mountains::before { animation-play-state: paused; }
@keyframes tree-sway {
  from { transform: rotate(-1.8deg) skewX(-.7deg) translateX(-3px); }
  to { transform: rotate(2.2deg) skewX(.9deg) translateX(4px); }
}

/* A standalone circle sits beside the wordmark, raised for optical alignment. */
.site-footer {
  --footer-edge: max(48px, (100vw - 1440px) / 2);
  --footer-top: 43px;
  --footer-logo-height: 70px;
  --footer-brand-inset: 90px;
  --emblem-height: 46px;
}
.footer-emblem {
  top: calc(var(--footer-top) - 10px + (var(--footer-logo-height) - var(--emblem-height)) / 2);
  inset-inline-start: calc(var(--footer-edge) + var(--footer-brand-inset) - var(--emblem-height) - 16px);
  height: var(--emblem-height);
  inline-size: var(--emblem-height);
  border-radius: 50%;
  padding: 0;
  justify-content: center;
}
.footer-emblem img { width: 32px; height: 32px; }
.footer-motto span { width: fit-content; max-width: 100%; }
.footer-motto span:nth-child(2) { margin-inline-start: 44px; }

/* Light appearance reverses the hero/tools/mountain/footer surfaces. */
html[data-theme="light"] {
  --hero-ink: #233446;
  --hero-secondary: #44596b;
  --hero-surface: #f6f4ef;
}
html[data-theme="light"] .ambient {
  background: radial-gradient(ellipse at 24% 22%, #e7d7bd44, transparent 47%),
    radial-gradient(ellipse at 72% 55%, #ffffff 10%, transparent 68%),
    linear-gradient(125deg, #f0ece4, #fafaf7 70%, #e5eced);
}
html[data-theme="light"] .ambient::after {
  background: repeating-linear-gradient(178deg, #7a8b9200 0px, #657f8910 4px, #ffffff00 12px);
}
html[data-theme="light"] .tree { filter: blur(1.7px) brightness(.94); opacity: .88; }
html[data-theme="light"] .beta-link { border-color: #23344640; }
html[data-theme="light"] .tools-section { background: #1b3447; color: #f7f7f5; }
html[data-theme="light"] .tools-heading p,
html[data-theme="light"] .tool-card p { color: #d6e0e8; }
html[data-theme="light"] .tool-card { border-color: #c4d4e129; }
html[data-theme="light"] .tool-link { color: #ffaf6c; }
html[data-theme="light"] .tool-card:not(.tool-card-upcoming):hover { color: #ffd5b0; }
.mountains { position: relative; height: clamp(120px, 11vw, 180px); background: #faf9f7; mask-image: none; overflow: hidden; }
.mountains::before {
  content: '';
  position: absolute;
  inset: auto -3% 0;
  height: clamp(150px, 17vw, 280px);
  background: url('./mountains.webp') center 50% / cover no-repeat;
  mask-image: linear-gradient(to bottom, transparent, #000 12%);
  animation: mountain-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes mountain-drift {
  from { transform: translateX(-1.2%); }
  to { transform: translateX(1.2%); }
}
html[data-theme="light"] .mountains { background: #1b3447; }
html[data-theme="light"] .mountains::before {
  filter: grayscale(1) invert(1) contrast(1.2) brightness(1.5);
  mix-blend-mode: screen;
  opacity: .65;
}
html[data-theme="light"] .site-footer {
  background: radial-gradient(ellipse at 60% 0%, #c7d4de22, transparent 65%), #f4f6f7;
  color: #233446;
}
html[data-theme="light"] .footer-motto,
html[data-theme="light"] .footer-meta { color: #42596b; }
html[data-theme="light"] .site-footer h2 { color: #b95e18; }
html[data-theme="light"] .footer-emblem { background: #dfe8ee; }
html[data-theme="light"] .footer-meta { border-color: #23344629; }
html[data-theme="light"] .footer-beta { border-color: #23344640; }


/* Copyright returns to the leading side: right in Arabic, mirrored in Chinese. */
.footer-meta { display: flex; justify-content: space-between; gap: 24px; min-height: 80px; }
.footer-meta small { text-align: start; line-height: 24px; }
.footer-language-brand { width: 104px; height: 42px; }
.footer-language-brand:hover { opacity: .8; }

@media (max-width: 1200px) {
  :root { --cta-width: 226px; --cta-height: 52px; }
  .hero-copy { padding-block-start: 54px; }
  .site-footer { --footer-logo-height: 64px; --footer-brand-inset: 85px; }
}
@media (max-width: 980px) {
  :root { --header-height: 96px; --masthead-height: 628px; }
  .hero-copy { padding-block-start: 60px; row-gap: 28px; }
  .hero-intro { height: 64px; min-height: 64px; line-height: 1.65; }
  .site-footer { --footer-edge: 28px; --footer-logo-height: 62px; --footer-brand-inset: 57px; --emblem-height: 42px; }
  .footer-emblem img { width: 30px; height: 30px; }
  .header-actions { gap: 16px; align-items: center; }
  .menu-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; }
  .menu-button .icon, .language-switch .icon, .theme-symbol, .theme-symbol .icon { width: 22px; height: 22px; }
  .language-switch { height: 44px; line-height: 1; }
  .header-nav {
    display: none;
    position: absolute;
    top: calc(var(--header-height) - 6px);
    inset-inline: 20px;
    flex-direction: column;
    align-items: stretch;
    padding: 18px 22px;
    background: #20384bfa;
    border: 1px solid #ffffff21;
    border-radius: 12px;
    box-shadow: 0 10px 24px #00152233;
    gap: 0;
    font-size: 14px;
  }
  .header-nav.is-open { display: flex; }
  .header-nav a { min-height: 44px; }
  .beta-link { border-inline: 0; border-top: 1px solid #ffffff21; padding: 8px 0 0; margin-top: 8px; }
  html[data-theme="light"] .header-nav { background: #fafaf8fc; border-color: #23344629; }
}
@media (max-width: 760px) {
  :root { --cta-width: 220px; --cta-height: 48px; --header-height: 92px; --masthead-height: calc(490px + 56.25vw); }
  .hero-copy { padding-block-start: 31px; row-gap: 24px; }
  .hero-intro { line-height: 1.55; }
  .hello, html[dir="ltr"] .hello { margin-top: 0; }
  .hello { min-height: 76px; }
  .hello-pinyin { font-size: 20px; }
  .hello-arabic { font-size: 30px; }
  .header-actions { gap: 10px; }
  .language-switch { inline-size: 74px; margin-inline-end: 0; order: 2; }
  .theme-toggle { order: 3; }
  .menu-button { order: 1; }
  .site-footer { --footer-edge: 20px; --footer-top: 32px; --footer-brand-inset: 69px; --emblem-height: 40px; }
  .footer-emblem img { width: 28px; height: 28px; }
  .footer-meta { padding-block: 10px 14px; gap: 16px; }
  .footer-meta small { max-width: calc(100% - 110px); }
  .footer-language-brand { width: 94px; height: 38px; }
  html[data-theme="light"] .tree { filter: blur(1px) brightness(.94); }
}
@media (max-width: 380px) {
  :root { --masthead-height: calc(470px + 56.25vw); }
  .hero-copy { row-gap: 22px; }
  .hero-intro { height: 60px; min-height: 60px; }
  .header-inner { gap: 8px; }
  .header-actions { gap: 8px; }
  .site-footer { --footer-edge: 16px; }
}
@media (max-width: 420px) {
  .header-brand { width: 134px; }
  .header-actions > .language-switch, .header-actions > .theme-toggle { display: none; }
  .compact-preferences { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid #ffffff21; margin-top: 12px; padding-top: 12px; }
  .compact-preferences .language-switch, .compact-preferences .theme-toggle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 44px;
    margin: 0;
    order: initial;
    padding: 0;
    font-size: 14px;
  }
  html[lang="zh-Hans"] .menu-theme-toggle, .compact-preferences .language-switch[lang="zh-Hans"] { font-size: 18px; }
  .compact-preferences .icon { flex: none; width: 22px; height: 22px; }
  .menu-theme-toggle::before { inset: 0; background: #ffffff0b; border-radius: 6px; }
  html[data-theme="light"] .compact-preferences { border-color: #23344629; }
  html[data-theme="light"] .menu-theme-toggle::before { background: #23344608; }
}
@media (prefers-reduced-motion: reduce) {
  .tree, .mountains::before { animation: none !important; }
  .theme-toggle::before, .theme-symbol .icon, .primary-button::before { transition: none; }
}

/* Keep the added arcade navigation comfortably inside the shared header. */
@media(min-width:981px) and (max-width:1320px){.header-inner{gap:22px}.header-brand{width:144px}.header-nav{gap:18px;font-size:12px}.header-actions{gap:14px}.beta-link{padding-inline-start:18px}html[lang=zh-Hans] .header-nav{font-size:17px}}