.pinyin-group{display:grid;grid-template-columns:56px 1fr;gap:18px;margin:0 0 28px}.pinyin-group h2{margin:2px 0;text-transform:uppercase;color:var(--brand)}.pinyin-grid,.char-link-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.pinyin-grid a,.char-link-grid a{display:flex;flex-direction:column;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff}.pinyin-grid b{font-size:19px}.pinyin-grid span,.char-link-grid span{font-size:13px;color:var(--muted)}.pinyin-hero{padding:48px 0 26px;text-align:center}.pinyin-hero h1{margin:0;font-size:clamp(34px,6vw,56px)}.pinyin-reading{margin:12px 0;font-size:38px;color:var(--brand);font-weight:800}.fact-panel{max-width:760px;margin:0 auto 34px;padding:20px;border:1px solid var(--line);border-radius:var(--radius)}.fact-panel dl{display:grid;grid-template-columns:repeat(4,1fr);margin:0}.fact-panel div{padding:10px 16px;border-right:1px solid var(--line)}.fact-panel div:last-child{border:0}.fact-panel dt{font-size:13px;color:var(--muted)}.fact-panel dd{margin:2px 0 0;font-size:18px;font-weight:700}.content-section{margin-bottom:42px}.char-link-grid{grid-template-columns:repeat(8,1fr)}.char-link-grid b{font-size:28px}.compact-grid{max-width:700px}@media(max-width:760px){.pinyin-group{grid-template-columns:1fr}.pinyin-grid{grid-template-columns:repeat(3,1fr)}.char-link-grid{grid-template-columns:repeat(4,1fr)}.fact-panel dl{grid-template-columns:repeat(2,1fr)}.fact-panel div:nth-child(2){border-right:0}}@media(max-width:420px){.pinyin-grid{grid-template-columns:repeat(2,1fr)}.char-link-grid{grid-template-columns:repeat(3,1fr)}}