:root{
  --thai-modern-font:"Noto Sans Thai","Leelawadee UI",sans-serif;
  --thai-academic-font:"Noto Sans Thai Looped","Tahoma","Noto Sans Thai",sans-serif;
  --malayalam-font:"Noto Sans Malayalam","Nirmala UI","Kartika",sans-serif;
}
.thai-modern-font{font-family:var(--thai-modern-font)!important}
.thai-academic-font{font-family:var(--thai-academic-font)!important}
.malayalam-font{font-family:var(--malayalam-font)!important}
.alphabet-intro-card,.alphabet-map-card,.tone-system-card,.malayalam-speaker-tips{overflow:hidden}
.alphabet-intro-card{background:linear-gradient(135deg,rgba(255,247,229,.98),rgba(255,238,245,.96))}
.alphabet-key-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}
.alphabet-key-grid article{display:grid;gap:8px;min-height:160px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface-primary,#fff)}
.alphabet-key-grid strong{font-size:.9rem;color:var(--wine)}
.alphabet-key-grid span{font-size:clamp(2rem,5vw,3rem);line-height:1.25;overflow-wrap:anywhere}
.alphabet-key-grid small{color:var(--text-support,var(--muted));line-height:1.55}
.alphabet-caution{padding:14px 16px;border:1px solid rgba(206,145,62,.45);border-radius:15px;background:rgba(255,239,199,.72);line-height:1.65}
.alphabet-map-list{display:grid;gap:12px;margin-top:18px}
.alphabet-map-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;padding:16px;border:1px solid var(--line);border-radius:19px;background:linear-gradient(180deg,var(--surface-primary,#fff),rgba(255,248,249,.9))}
.malayalam-anchor{display:grid;place-items:center;align-content:center;gap:4px;min-height:112px;border-radius:16px;background:rgba(111,24,53,.07);text-align:center}
.malayalam-anchor span{font-size:clamp(2.4rem,6vw,4rem);line-height:1.1;color:var(--wine)}
.malayalam-anchor strong{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-support,var(--muted))}
.alphabet-match-content{min-width:0}
.alphabet-match-content>p{margin:10px 0 0;color:var(--text-support,var(--muted));line-height:1.6}
.no-direct-match{border-style:dashed}
.no-match-note{display:inline-flex;margin:0!important;padding:8px 11px;border-radius:999px;background:rgba(111,24,53,.08);font-weight:850;color:var(--wine)!important}
.thai-letter-chip-grid,.thai-vowel-chip-grid,.special-vowel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.thai-letter-chip,.thai-vowel-chip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface-primary,#fff)}
.thai-font-pair{display:grid;grid-template-columns:1fr 1fr;gap:4px;align-items:center}
.thai-font-pair>span{display:grid;place-items:center;min-width:48px;min-height:52px;padding:5px;border-radius:11px;background:rgba(111,24,53,.06);font-size:2.2rem;line-height:1.1;color:var(--text-primary,var(--ink))}
.thai-font-pair>span+span{background:rgba(72,116,72,.09)}
.thai-letter-copy{display:grid;gap:2px;min-width:0}
.thai-letter-copy strong{font-size:1rem;overflow-wrap:anywhere}
.thai-letter-copy span{font-weight:800;color:var(--wine)}
.thai-letter-copy small{color:var(--text-support,var(--muted));line-height:1.4}
.letter-class-badge,.alphabet-status-badge{display:inline-flex;width:max-content;margin-top:4px;padding:3px 8px;border-radius:999px;font-size:.68rem;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.class-mid{background:#fff0b8!important;color:#6d5200!important}
.class-high{background:#dff2ff!important;color:#165678!important}
.class-low{background:#e5f4dc!important;color:#355e2e!important}
.alphabet-status-badge{background:#f0e8ef;color:#6b4b5b}
.consonant-class-legend{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 18px}
.consonant-class-legend span{padding:7px 12px;border-radius:999px;font-size:.78rem;font-weight:900}
.alphabet-extra-section{margin-top:28px;padding-top:24px;border-top:1px dashed var(--line)}
.alphabet-extra-section h3{margin:0 0 6px;font-size:1.35rem}
.special-vowel-grid{margin-top:14px}
.special-vowel-card,.extra-consonant-card{padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(255,253,249,.72)}
.special-vowel-card>.thai-vowel-chip,.extra-consonant-card>.thai-letter-chip{border:0;padding:5px;background:transparent}
.special-vowel-card p,.extra-consonant-card p{margin:8px 5px 2px;font-size:.82rem}
.special-vowel-card>small,.extra-consonant-card>small{display:block;margin:0 5px 6px;color:var(--text-support,var(--muted));line-height:1.5}
.tone-system-card{background:linear-gradient(150deg,rgba(255,250,237,.98),rgba(248,242,255,.96))}
.tone-demo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:20px 0 28px}
.tone-demo-card{display:grid;place-items:center;align-content:start;gap:7px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--surface-primary,#fff);text-align:center}
.tone-demo-card .thai-font-pair>span{font-size:2.4rem}
.tone-demo-card strong{font-size:.92rem}
.tone-demo-card>span{font-size:.8rem;color:var(--text-support,var(--muted))}
.tone-mark-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 26px}
.tone-mark-grid article{display:grid;place-items:center;gap:5px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface-primary,#fff);text-align:center}
.tone-mark-symbol{font-size:3rem;line-height:1.1}
.tone-mark-grid small{color:var(--text-support,var(--muted))}
.tone-decision-flow{padding:18px;border:1px solid rgba(111,24,53,.18);border-radius:18px;background:rgba(255,255,255,.66)}
.tone-decision-flow h3{margin:0 0 10px}
.tone-decision-flow ol{display:grid;gap:9px;margin:0;padding-left:22px}
.tone-table-wrap{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:18px;background:var(--surface-primary,#fff)}
.tone-rule-table{width:100%;min-width:900px;border-collapse:collapse}
.tone-rule-table th,.tone-rule-table td{padding:12px 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:.82rem}
.tone-rule-table thead th{position:sticky;top:0;background:rgba(111,24,53,.08);color:var(--wine)}
.tone-rule-table tbody th{background:rgba(111,24,53,.045)}
.live-dead-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.live-dead-grid article{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface-primary,#fff)}
.live-dead-grid h3{margin:0 0 6px}
.example-audio-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:10px;border-radius:14px;background:rgba(111,24,53,.05)}
.example-audio-row>span{font-size:1.35rem}
.tone-advanced-note{margin-top:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface-primary,#fff)}
.tone-advanced-note summary{padding:14px 16px;cursor:pointer;font-weight:900;color:var(--wine)}
.tone-advanced-note>div{padding:0 16px 16px}
.malayalam-speaker-tips ol{display:grid;gap:10px;padding-left:22px}
html[data-theme-resolved="dark"] .alphabet-intro-card,
html[data-theme-resolved="dark"] .tone-system-card{background:linear-gradient(145deg,rgba(48,39,34,.98),rgba(49,35,45,.98))}
html[data-theme-resolved="dark"] .alphabet-key-grid article,
html[data-theme-resolved="dark"] .thai-letter-chip,
html[data-theme-resolved="dark"] .thai-vowel-chip,
html[data-theme-resolved="dark"] .tone-demo-card,
html[data-theme-resolved="dark"] .tone-mark-grid article,
html[data-theme-resolved="dark"] .live-dead-grid article,
html[data-theme-resolved="dark"] .tone-advanced-note{background:rgba(42,34,38,.94)}
@media(max-width:900px){
  .alphabet-key-grid{grid-template-columns:1fr}
  .tone-demo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tone-mark-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .alphabet-map-row{grid-template-columns:1fr;padding:12px}
  .malayalam-anchor{min-height:88px}
  .thai-letter-chip-grid,.thai-vowel-chip-grid,.special-vowel-grid{grid-template-columns:1fr}
  .thai-letter-chip,.thai-vowel-chip{grid-template-columns:auto minmax(0,1fr)}
  .thai-letter-chip>.speak-button,.thai-vowel-chip>.speak-button{grid-column:1/-1;width:100%;height:42px}
  .tone-demo-grid{grid-template-columns:1fr 1fr}
  .tone-mark-grid,.live-dead-grid{grid-template-columns:1fr}
  .example-audio-row{align-items:flex-start;flex-direction:column}
}