.pinyin-entry,.pinyin-hub-intro,.pinyin-use,.pinyin-summary{background:var(--accent-soft,#edf6ef);border:1px solid var(--line,#dce7df);padding:20px;border-radius:14px;margin:22px 0}
.pinyin-entry h2{margin-top:0}.pinyin-entry a,.pinyin-local-nav a,.pinyin-references a{color:var(--accent,#16735d);font-weight:700;text-underline-offset:3px}
.pinyin-nav-block{margin-bottom:12px}.level-heading.pinyin-stage{position:relative;display:block;text-align:left;width:100%;border:0;border-left:2px solid #9cc6b4;background:transparent;box-shadow:none;border-radius:0;padding:0 25px 0 12px;margin:4px 0 12px;min-height:62px}.pinyin-stage .level-kicker{display:block;font-size:11px;font-weight:600;letter-spacing:.055em;line-height:1.4;color:var(--muted)}.pinyin-stage strong{display:block;font-size:16px;font-weight:650;line-height:1.4;margin-top:4px;color:var(--ink)}.pinyin-stage small{display:block;font-size:12px;font-weight:400;margin-top:2px;color:var(--muted)}.pinyin-stage.active strong,.pinyin-stage:hover strong{color:var(--accent)}.pinyin-stage::after{content:"";position:absolute;right:12px;top:26px;width:6px;height:6px;border-right:1.5px solid #758c84;border-bottom:1.5px solid #758c84;transform:rotate(-45deg)}.pinyin-stage[aria-expanded="true"]::after{transform:rotate(45deg)}.pinyin-nav-block .lesson-nav{line-height:1.5;font-size:14px}.pinyin-nav-block .lesson-nav[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:700}.pinyin-stage:focus-visible{outline:3px solid #16735d;outline-offset:3px}
.pinyin-example .pinyin-practice-label{font-size:12px;font-weight:600;color:var(--muted);margin:0 0 8px}.pinyin-item-status:empty{display:none}.pinyin-practice-intro{font-size:14px;color:var(--muted)}
.pinyin-hub h1,.pinyin-lesson h1{font-size:clamp(28px,4vw,40px);line-height:1.2;margin:14px 0}.pinyin-hub p,.pinyin-lesson p{line-height:1.7}.pinyin-hub-intro h2,.pinyin-use h2,.pinyin-summary h2{margin-top:0}
.pinyin-local-nav{display:flex;gap:12px 22px;flex-wrap:wrap;margin:16px 0}.pinyin-local-nav a{display:inline-flex;align-items:center;min-height:44px}
.pinyin-course-grid,.pinyin-example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:22px 0}.pinyin-course-card,.pinyin-example,.pinyin-question{padding:20px;border:1px solid var(--line,#dce7df);border-radius:14px;background:#fff;min-width:0}
.pinyin-course-card h2{font-size:21px;line-height:1.4;margin:12px 0}.pinyin-course-card h2 a{color:var(--ink,#294336);text-underline-offset:4px}.pinyin-course-card h2 a:hover{color:var(--accent,#16735d)}
.pinyin-progress{padding:14px 18px;background:#edf6ef;border-left:4px solid var(--accent,#16735d);border-radius:8px;font-weight:700;margin:20px 0;line-height:1.6}.pinyin-flow{font-size:14px;color:var(--muted,#536d5e);line-height:1.7;margin:20px 0}
.pinyin-notes article{margin:20px 0}.pinyin-notes h3{font-size:20px;margin-bottom:8px}.pinyin-audio-note{font-size:14px;color:var(--muted,#536d5e)}
.pinyin-example>span{display:block;text-align:center;margin:6px 0}.pinyin-sound{font-size:29px;font-weight:700;color:var(--accent,#16735d)}.pinyin-example [lang="zh-CN"]{font-size:24px}.pinyin-example p{font-size:14px}.pinyin-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.pinyin-controls button{min-width:0;min-height:46px;padding:10px 6px;overflow-wrap:anywhere}.pinyin-controls button:disabled{opacity:.5;cursor:default}
.pinyin-question{margin:16px 0}.pinyin-question h3{font-size:18px;line-height:1.5;margin:0 0 14px}.pinyin-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.pinyin-choices .choice{font-size:18px;min-height:48px;padding:12px;text-align:left;overflow-wrap:anywhere}.pinyin-choices .choice.correct{background:#e5f4e9;border-color:#397b4e;color:#184c2d}.pinyin-choices .choice.wrong{background:#fff0ef;border-color:#b4463d;color:#7e261f}
.pinyin-feedback{min-height:1.5em;margin-bottom:0}.pinyin-item-status[data-error="true"]{color:#92291f;font-weight:700}.pinyin-references{margin-top:24px;padding:14px;border:1px solid var(--line,#dce7df);border-radius:10px}.pinyin-references summary{cursor:pointer;font-weight:700;min-height:32px}.pinyin-lesson button:focus-visible,.pinyin-hub a:focus-visible,.pinyin-local-nav a:focus-visible{outline:3px solid #16735d;outline-offset:3px}
.pinyin-learner-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0;font-size:14px}.pinyin-learner-controls select{font:inherit;min-height:44px;padding:8px;max-width:100%;border-radius:8px;border:1px solid #95b7a6;background:#fff}.pinyin-learner-controls a{color:var(--accent,#16735d);text-underline-offset:3px}
.pinyin-tone-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}.pinyin-tone-grid figure{margin:0;padding:12px;background:#edf6ef;border-radius:10px;text-align:center}.pinyin-tone-grid svg{display:block;width:100%;height:60px}.pinyin-tone-grid path{fill:none;stroke:#16735d;stroke-width:4;stroke-linecap:round}.pinyin-tone-grid figcaption{font-size:13px;line-height:1.5}.pinyin-tone-grid figure:hover path{stroke-dasharray:120;animation:pinyin-trace .9s ease both}@keyframes pinyin-trace{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
@media(max-width:650px){.pinyin-course-grid,.pinyin-example-grid{grid-template-columns:1fr}.pinyin-entry,.pinyin-hub-intro,.pinyin-use,.pinyin-summary,.pinyin-question,.pinyin-example,.pinyin-course-card{padding:16px}}
@media(prefers-reduced-motion:reduce){.pinyin-lesson *, .pinyin-hub *{scroll-behavior:auto;animation:none!important}}

.pinyin-question{scroll-margin-top:24px}.pinyin-question:focus{outline:3px solid #16735d;outline-offset:3px}.pinyin-references summary{min-height:44px;line-height:1.5;overflow-wrap:anywhere}
@media(max-width:650px){.pinyin-tone-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.pinyin-choices{grid-template-columns:1fr}}

.pinyin-supplement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pinyin-supplement{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;border:1px solid var(--line);border-radius:10px;background:white;min-width:0;text-align:center;overflow-wrap:anywhere}.pinyin-supplement>span{display:block}.pinyin-supplement button,.pinyin-tone-grid button{min-height:44px;margin-top:auto}.pinyin-sound-reference h3{margin-top:24px}.pinyin-supplement .pinyin-sound{font-size:23px}
@media(max-width:650px){.pinyin-supplement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.pinyin-supplement-grid{grid-template-columns:1fr}}
.pinyin-controls .pinyin-replay{background:transparent;border:0;color:#176b53;font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;padding:8px}.pinyin-replay[hidden]{display:none!important}
.pinyin-hint{display:block;padding:10px 0;font-size:15px;line-height:1.6}#pinyin-review-return:not(:empty){padding:12px 0;margin:12px 0 20px;border-bottom:1px solid #dce6dc}