:root {
  --bg: #f2f4f0;
  --mint: #dce9df;
  --mint-strong: #315f42;
  --sky: #e2e5e2;
  --peach: #efe3bd;
}
.intro-copy { color: var(--muted); line-height: 1.6; }
.mandarin-section-menu { display: grid; width: min(1000px, calc(100% - 32px)); grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; margin: 0 auto 28px; }
.mandarin-section-menu a { display: flex; min-height: 52px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); padding: 8px; font-size: .78rem; font-weight: 800; text-align: center; text-decoration: none; }
.mandarin-section-menu a:hover, .mandarin-section-menu a:focus-visible { border-color: var(--ink); }
.mandarin-section-menu a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: white; }
:root[data-theme="dark"] .mandarin-section-menu a[aria-current="page"] { border-color: var(--mint-strong); background: var(--mint-strong); color: #121713; }
.quiz-fields label:first-child { grid-column: auto; }
.question-chinese { margin: 10px 0 8px; font-family: "Noto Serif SC", "Songti SC", serif; font-size: clamp(2.7rem, 9vw, 5.5rem); font-weight: 700; line-height: 1.1; text-align: center; }
.speech-button { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 12px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-strong); cursor: pointer; font-size: 1.1rem; }
.speakable-mandarin { cursor: pointer; }
.speakable-mandarin::after { content: "🔊"; margin-left: .3em; font-family: system-ui, sans-serif; font-size: .28em; opacity: .45; vertical-align: middle; }
.speakable-mandarin:focus-visible { outline: 2px solid var(--mint-strong); outline-offset: 5px; }
.mandarin-card #question-text { margin: 0 0 22px; color: var(--muted); font-family: inherit; font-size: 1rem; font-weight: 600; text-align: center; }
.mini-mark { font-family: "Noto Serif SC", "Songti SC", serif; font-size: 1.25rem; }
@media (max-width: 760px) { .quiz-fields { grid-template-columns: 1fr; } .mandarin-section-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Universal button-border contract: every enabled button renders a visible 1px border. */
button:not(:disabled) {
  border-style: solid !important;
  border-width: 1px !important;
}