/* Shared screen typography for every HanziLab page. */
@media screen {
 :root{--font-ui:system-ui,'Segoe UI',Arial,sans-serif;--font-han:system-ui,'Segoe UI','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;--font-accent:Georgia,'Palatino Linotype','Times New Roman',serif;--text-body:var(--bi-type-body);--text-field:17px;--text-label:14px;--text-help:14px;--text-button:14px;--text-section:25px;--text-subsection:20px}
 body{font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--bi-line-body)}
 button,input,select,textarea{font-family:var(--font-ui)!important;letter-spacing:normal}
 .han,.handwriting-candidate{font-family:var(--font-han)!important}
 h1,h2,h3,h4{font-family:var(--font-ui);line-height:1.3;font-weight:650}
 .hero h1{font-family:var(--font-ui);font-weight:700;line-height:1.12}
 .hero h1 span{font-family:var(--font-accent);font-style:italic;font-weight:500}
 .cardhead h2,.about-page .section h2{font-family:var(--font-ui);font-size:var(--text-section);line-height:1.3;font-weight:650}
 .about-page .feature h3,.sentence-stroke-section h3,.dictation-answers h3{font-family:var(--font-ui);font-size:var(--text-subsection);line-height:1.4;font-weight:650}
 .hero p,.hero .lead{font-family:var(--font-ui);font-size:16px;line-height:1.7}
 .hero .eyebrow{font-family:var(--font-ui);font-size:10px;font-weight:700;line-height:1.4}
 .fieldlabel,label[for="dictationInput"],#sentenceMode #frases>.pane-title,#worksheetPanel .worksheet-character-search>.fieldlabel{font-family:var(--font-ui)!important;font-size:var(--text-label)!important;font-weight:650!important;line-height:1.55!important}
 #hanziInput,#sentenceInput,#dictationInput,#worksheetCharacterInput,#search{font-family:var(--font-han)!important;font-size:var(--text-field)!important;font-weight:400!important;line-height:1.5!important}
 input::placeholder,textarea::placeholder{font-family:inherit;font-size:inherit;font-weight:400}
 .primary,.printbtn,.savebtn,.nav-tab,.tab,.navlinks>a{font-family:var(--font-ui)!important;font-size:var(--text-button);font-weight:650;line-height:1.5}
 .hint,.tiny,.tip,.sentence-help,.vocab-search-help,.dictation-help,.worksheet-search-help,#handwritingStatus{font-family:var(--font-ui);font-size:var(--text-help);line-height:1.65}
 .pinyin,.dictation-choice-reading,.sentence-stroke-pinyin,.worksheet-detail-reading>span{font-family:var(--font-ui);line-height:1.5}
 .hanzi-suggestion small,.autocomplete small,.dictation-choice-meaning,.meaning{font-family:var(--font-ui);line-height:1.6}
 .foot{font-family:var(--font-ui);font-size:12px;line-height:1.65}
 @media(max-width:640px){.cardhead h2,.about-page .section h2{font-size:23px}.about-page .feature h3{font-size:19px}}
}
@media screen{
 #characterMode>.fieldlabel,label[for="dictationInput"],#worksheetPanel .worksheet-character-search>.fieldlabel,#sentenceMode #frases>.pane-title{font-family:var(--font-ui)!important;font-size:var(--text-label)!important;font-weight:650!important;line-height:1.55!important}
 .dictation-intro{font-family:var(--font-ui);font-size:var(--text-help);line-height:1.65}
}

/* Shared screen design tokens. Learning glyphs and A4 print remain independent. */
@media screen {
 :root {
  --bi-type-editorial:2.75rem;--bi-line-editorial:3.1875rem;
  --bi-type-legal:2.25rem;--bi-line-legal:2.6875rem;
  --bi-type-panel:1.5625rem;--bi-line-panel:2.0625rem;
  --bi-type-section:1.375rem;--bi-line-section:1.8125rem;
  --bi-type-card:1.25rem;--bi-line-card:1.75rem;
  --bi-type-card-small:1.125rem;--bi-line-card-small:1.625rem;
  --bi-type-body:1rem;--bi-line-body:1.625rem;
  --bi-type-ui:.875rem;--bi-line-ui:1.375rem;
  --bi-type-meta:.8125rem;--bi-line-meta:1.25rem;
  --bi-type-micro:.75rem;--bi-line-micro:1.1875rem;
  --bi-type-field:1.0625rem;
  --bi-space-1:4px;--bi-space-2:8px;--bi-space-3:12px;--bi-space-4:16px;
  --bi-space-6:24px;--bi-space-8:32px;--bi-space-12:48px;
  --bi-radius-control:8px;--bi-radius-small:12px;--bi-radius-card:14px;--bi-radius-panel:18px;
  --bi-width-tools:1180px;--bi-width-reading:900px;
 }
}