:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f7f8fa;--card:#fff;--ink:#1a1a1a;--muted:#60656f;--line:#d8dde5;--accent:#eaf2ff}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}.container{max-width:900px;margin:0 auto;padding:16px}.topBar h1{margin:0;font-size:1.8rem}.topBar p{color:var(--muted);margin:8px 0 16px}.sectionNav{flex-wrap:wrap;gap:10px;margin-bottom:16px;display:flex}.sectionNav a{border:1px solid var(--line);color:inherit;background:var(--card);border-radius:8px;padding:8px 10px;text-decoration:none}.groups{gap:10px;display:grid}details{border:1px solid var(--line);background:var(--card);border-radius:10px;overflow:hidden}summary{cursor:pointer;padding:12px;font-weight:600}.groupBody{gap:10px;padding:0 10px 10px;display:grid}.card{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:10px}.phraseCard .lao{margin:0;font-size:1.8rem;line-height:1.3}.english{color:var(--muted);margin:6px 0 0;font-size:.95rem}.say{color:var(--muted);margin:6px 0 0}.toneLabel{color:var(--ink);text-transform:capitalize;margin:6px 0 0;font-size:.86rem;font-weight:600}.play{border:1px solid var(--line);background:var(--accent);border-radius:8px;margin-top:10px;padding:8px 12px}.learnLinks{gap:10px;display:grid}.learnLinkCard{border:1px solid var(--line);color:inherit;background:var(--card);border-radius:10px;padding:14px;text-decoration:none;display:block}.learnLinkCard h2{margin:0;font-size:1.1rem}.learnLinkCard p{color:var(--muted);margin:8px 0 0}.alphabetGrid,.vowelGrid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;display:grid}.alphaCard summary{grid-template-columns:56px 1fr;align-items:center;gap:10px;display:grid}.alphaChar{text-align:center;font-size:2.2rem;line-height:1}.alphaMeta{color:var(--muted);gap:2px;font-size:.92rem;display:grid}.alphaMeta strong{color:var(--ink)}.alphaDetails{border-top:1px solid var(--line);padding:10px 12px}.alphaDetails p,.vowelCard p{margin:4px 0}.vowelSymbol{margin:0 0 8px;font-size:2rem;line-height:1}@media (max-width:520px){.container{padding:14px}.phraseCard .lao{font-size:1.6rem}}.classSection+.classSection{margin-top:18px}.classHeading{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px;font-size:1rem}