.pinyin-heading{max-width:72ch;margin-block:2rem}.pinyin-heading h1{margin-block-end:1rem}.pinyin-heading .lw-button{margin-block-start:1.5rem}.pinyin-chart{max-width:70rem}.pinyin-player{max-width:48rem;padding:1.5rem;border-radius:var(--lw-ds-radius-web-feature);background:var(--lw-ds-gradient-forest);color:var(--lw-ds-gradient-forest-ink)}.pinyin-selected{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}.pinyin-selected>span{font:400 clamp(2rem,min(4rem,calc(70vw / var(--pinyin-letter-count,2))),4rem)/1.2 var(--lw-ds-font-editorial);white-space:nowrap;max-width:100%}.pinyin-selected svg{width:7rem;height:5rem;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.pinyin-tones{border:0;padding:0;margin:1rem 0;display:flex;flex-wrap:wrap;gap:.5rem;min-width:0}.pinyin-tones legend{margin-block-end:.75rem;font-size:.9375rem}.pinyin-tone{display:flex;align-items:center;gap:.5rem;padding:.75rem;min-height:44px;border:1px solid currentColor;border-radius:var(--lw-ds-radius-web-control);font-size:.9375rem;cursor:pointer;flex:1 1 8em}.pinyin-tone input{accent-color:var(--lw-ds-gradient-forest-action-ink);flex:none}.pinyin-tone:has(input:checked){color:var(--lw-ds-gradient-forest-action-ink);background:var(--lw-ds-gradient-forest-action-fill)}.pinyin-player audio{width:100%;display:block;margin-block:1rem}.pinyin-player [role=status]{font-size:.875rem;min-height:1.5em}
.pinyin-filters{display:flex;flex-wrap:wrap;align-items:end;gap:1rem;margin-block:2rem 1rem}.pinyin-filters label{display:grid;gap:.5rem;flex:1 1 14rem;max-width:24rem}.pinyin-filters input{min-height:44px;padding:.75rem 1rem;border:1px solid var(--lw-ds-muted);border-radius:var(--lw-ds-radius-web-control);background:var(--lw-ds-field);color:var(--lw-ds-ink);font:inherit}.pinyin-filters select{width:100%;min-height:44px}.pinyin-group-list{margin-block:1rem 3rem}.pinyin-syllables{border:0;padding:0;margin:1rem 0;min-width:0}.pinyin-syllables legend{font:400 1.5rem var(--lw-ds-font-editorial);padding:0;margin-block-end:1rem}.pinyin-syllables>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,5.5rem),1fr));gap:.5rem}.pinyin-syllables button{min-height:48px;padding:.75rem .5rem;border:1px solid var(--lw-ds-muted);border-radius:var(--lw-ds-radius-web-control);background:var(--lw-ds-field);color:var(--lw-ds-ink);font:400 1.25rem/1.4 var(--lw-ds-font-editorial);cursor:pointer;overflow-wrap:normal}.pinyin-syllables button[aria-pressed=true]{background:var(--lw-ds-sage);box-shadow:inset 0 0 0 1px var(--lw-ds-accent-text);font-weight:600}.pinyin-syllables button:disabled{cursor:wait;color:var(--lw-ds-muted)}.pinyin-syllables button:hover:not(:disabled){background:var(--lw-ds-surface)}
.pinyin-notes{max-width:72ch;margin-block:3rem}.pinyin-notes h2{margin-block-end:1rem}.pinyin-notes dl{margin:0}.pinyin-notes dl>div{padding-block:1rem;border-block-end:1px solid var(--lw-ds-line)}.pinyin-notes dt{font-weight:600;margin-block-end:.5rem}.pinyin-notes dd{margin:0;line-height:1.7}.pinyin-notes dd audio{display:block;max-width:24rem;width:100%;margin-block:.75rem}.pinyin-notes .exam-related{display:flex;gap:1rem 1.5rem;flex-wrap:wrap;margin-block:1.5rem}.hsk-exams [hidden]{display:none!important}
@media(max-width:650px){.pinyin-tones{grid-template-columns:repeat(2,minmax(0,1fr))}.pinyin-player{padding:1.25rem}.pinyin-filters label{max-width:none}.pinyin-heading h1{font-size:2.25rem}.pinyin-selected{gap:1rem}}

.pinyin-player .lw-button{color:var(--lw-ds-gradient-forest-action-ink);background:var(--lw-ds-gradient-forest-action-fill)}
/* Paired recovery and focus states remain readable on the forest surface. */
.hsk-exams .pinyin-player .lw-button:hover:not(:disabled){background:var(--lw-ds-gradient-forest-action-fill);color:var(--lw-ds-gradient-forest-action-ink);text-decoration:underline;text-underline-offset:.2em}
.hsk-exams .pinyin-player :is(a,button,input,select,textarea,audio):focus-visible{outline:3px solid var(--lw-ds-gradient-forest-ink);outline-offset:4px;box-shadow:0 0 0 2px var(--lw-ds-gradient-forest-action-ink)}
.pinyin-tone:has(input:focus-visible){outline:3px solid var(--lw-ds-gradient-forest-ink);outline-offset:4px}