/* Pinyin worksheet, using the site's existing reading-journal tokens. */
.pinyin-hero{padding-bottom:48px}
.pinyin-hero h1{max-width:17ch}
.pinyin-hero .pinyin-preview{border-left:1px solid var(--line);padding:30px 0 30px 35px}
.pinyin-preview p:not(.eyebrow){font-family:var(--serif);font-size:clamp(27px,3vw,42px);line-height:1.4}
.pinyin-preview .pinyin-after{color:var(--accent)}
.pinyin-preview p:last-child{margin-bottom:0}
.pinyin-converter{margin-bottom:70px;border-top:1px solid var(--ink)}
.pinyin-workspace{display:grid;grid-template-columns:1fr 1fr;gap:35px;padding-top:25px}
.pinyin-panel{min-width:0}
.pinyin-panel label{display:block;margin:0 0 10px;font-size:12px;letter-spacing:.07em;text-transform:uppercase}
.pinyin-panel textarea{display:block;width:100%;min-height:190px;padding:20px;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font:400 24px/1.7 var(--serif);resize:vertical}
.pinyin-panel textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.pinyin-panel textarea[aria-invalid=true]{border-color:var(--accent)}
.pinyin-panel textarea::placeholder{color:var(--muted);opacity:1}
.pinyin-panel textarea[readonly]{background:var(--mint)}
.pinyin-panel .editorial-note{margin:10px 0 0}
.pinyin-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.pinyin-actions button{min-height:46px}
.pinyin-actions button:disabled{opacity:.5}
.pinyin-status{min-height:52px;margin:18px 0 0;padding:12px 0;font-size:14px;line-height:1.7}
.pinyin-status[data-error]{color:var(--accent)}
.pinyin-examples{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:18px 0;border-block:1px solid var(--line)}
.pinyin-examples span{margin-right:6px;color:var(--muted);font-size:12px}
.pinyin-examples button{min-height:44px;padding:8px 13px;border:1px solid var(--line);border-radius:0;background:transparent;font:400 17px/1.5 var(--serif)}
.pinyin-examples button:hover{border-color:var(--ink);background:var(--mint)}
.pinyin-guide{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:75px}
.pinyin-guide h2{font-size:clamp(29px,3vw,40px);line-height:1.2;margin-bottom:22px}
.pinyin-guide p,.pinyin-guide li{font-size:16px;line-height:1.85}
.pinyin-guide ul{padding-left:22px}
.pinyin-guide li{margin-bottom:13px}
.pinyin-guide code{font:400 1.1em/1.5 var(--serif)}
.pinyin-rules{width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.pinyin-rules th,.pinyin-rules td{padding:12px 10px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.pinyin-rules td[lang]{font-family:var(--serif);font-size:18px;white-space:nowrap}
.pinyin-next{padding:35px 0 50px;border-top:1px solid var(--ink)}
.pinyin-next h2{font-size:clamp(29px,3vw,40px)}
.pinyin-next p{max-width:65ch;line-height:1.8}
.pinyin-next .pinyin-actions{margin-top:25px}
@media(max-width:760px){.pinyin-hero{padding-bottom:32px}.pinyin-hero .pinyin-preview{padding:22px 0 0;border-left:0;border-top:1px solid var(--line)}.pinyin-preview p:not(.eyebrow){font-size:28px}.pinyin-workspace,.pinyin-guide{grid-template-columns:1fr;gap:27px}.pinyin-panel textarea{min-height:155px;font-size:22px}.pinyin-converter{margin-bottom:45px}.pinyin-guide{margin-bottom:45px}.pinyin-guide h2{font-size:31px}.pinyin-examples{align-items:flex-start}.pinyin-examples>span{width:100%}.pinyin-status{min-height:70px}}