/* Source-backed lesson demonstrations. No scripting, fixed heights or external assets. */
.ch-demo-visual{--demo-ink:var(--ink,#28473b);--demo-muted:var(--muted,#65745e);--demo-leaf:var(--leaf,#69823f);--demo-line:var(--line,#dfe7d6);--demo-wash:#f4f7ed;--demo-warm:#faf7f0;box-sizing:border-box;display:block;min-width:0;width:100%;margin:0;padding:clamp(20px,3vw,36px);border:1px solid var(--demo-line);border-radius:22px;background:#fff;color:var(--demo-ink);font-family:inherit;font-size:15px;line-height:1.65;text-align:start}
.ch-demo-visual *{box-sizing:border-box;min-width:0}.ch-demo-visual p,.ch-demo-visual dl,.ch-demo-visual dd,.ch-demo-visual ol,.ch-demo-visual ul{margin:0}.ch-demo-visual p{line-height:1.65}.ch-demo-visual h3{font-family:inherit;font-size:clamp(22px,2.3vw,28px);font-weight:600;line-height:1.3;letter-spacing:-.025em;margin:8px 0 26px;text-wrap:balance}.ch-demo-visual h4{font-family:inherit;font-size:16px;font-weight:600;line-height:1.45;letter-spacing:0;margin:0 0 10px;text-wrap:balance}.ch-demo-visual .ch-demo-caption,.ch-demo-visual .ch-demo-source{font-size:12px;line-height:1.6;color:var(--demo-muted)}.ch-demo-visual .ch-demo-caption{font-weight:500;letter-spacing:.025em}.ch-demo-visual .ch-demo-source{margin-top:14px}.ch-demo-visual .ch-demo-chinese{font-family:inherit;font-size:clamp(19px,2vw,23px);line-height:1.8;letter-spacing:.015em}.ch-demo-visual [lang=zh-Hans]{text-align:start;word-break:normal;overflow-wrap:anywhere;hyphens:none;unicode-bidi:isolate}.ch-demo-visual mark{background:linear-gradient(transparent 62%,#dce9b8 62%);padding:0;color:inherit;box-decoration-break:clone;-webkit-box-decoration-break:clone}.ch-demo-visual sup{color:var(--demo-leaf);font-size:11px;padding-inline-start:3px;vertical-align:super}.ch-demo-visual .ch-demo-gloss{font-size:14px;line-height:1.65;color:var(--demo-muted);margin-top:12px}.ch-demo-visual .ch-demo-takeaway{font-size:15px;line-height:1.65;border-top:1px solid var(--demo-line);padding-top:18px;margin-top:24px}.ch-demo-visual .ch-demo-answer{font-size:17px;font-weight:600;line-height:1.5;margin-top:22px;padding-inline-start:15px;border-inline-start:3px solid var(--brand,#b5cf5b);text-wrap:pretty}.ch-demo-visual svg{display:block;max-width:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ch-demo-visual small{font-size:13px;line-height:1.5;color:var(--demo-muted)}
/* Reading: manuscript and marginal evidence, not benefit cards. */
.ch-demo-reading-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start}.ch-demo-manuscript{border-inline-start:3px solid var(--demo-line);padding-inline-start:22px}.ch-demo-reading-divider{height:1px;background:var(--demo-line);margin:22px 0}.ch-demo-annotations{display:grid;gap:23px}.ch-demo-annotations>div{padding-bottom:18px;border-bottom:1px solid var(--demo-line)}.ch-demo-annotations dt{font-weight:600;line-height:1.5;margin:0 0 7px}.ch-demo-annotations dd{font-size:14px;line-height:1.6;color:var(--demo-muted)}.ch-demo-ref{display:inline-grid;place-items:center;width:23px;height:23px;margin-inline-end:8px;background:var(--demo-wash);border-radius:50%;font-size:12px;color:var(--demo-leaf)}.ch-demo-annotations .ch-demo-open-question{border-bottom:0;padding-bottom:0}
/* Writing: one working document, with three successive editing decisions. */
.ch-demo-writing-brief{padding:16px 20px;background:var(--demo-warm);border-radius:10px;margin-bottom:24px;font-size:14px}.ch-demo-writing-brief p+p{margin-top:5px}.ch-demo-editing-sheet{border-top:1px solid var(--demo-line)}.ch-demo-editing-row{display:grid;grid-template-columns:35px 1fr;gap:16px;padding-block:22px;border-bottom:1px solid var(--demo-line)}.ch-demo-stage{font-size:13px;font-weight:600;color:var(--demo-leaf);line-height:1.8}.ch-demo-guide-outline{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0}.ch-demo-guide-outline li{flex:1 1 120px;padding-inline-start:12px;border-inline-start:2px solid var(--demo-line)}.ch-demo-guide-outline li>span{display:block;font-size:19px}.ch-demo-guide-outline small{display:block;margin-top:4px}.ch-demo-revision{display:grid;gap:10px}.ch-demo-visual .ch-demo-vague{color:var(--demo-muted)}.ch-demo-revision-arrow{color:var(--demo-leaf);font-size:22px;line-height:1}.ch-demo-revision .ch-demo-gloss{margin-top:4px}
/* Idioms: a branching source map makes repetition visible. */
.ch-demo-idiom-origin{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--demo-line)}.ch-demo-idiom-seal{font-size:26px;line-height:1.5;letter-spacing:.12em;padding:12px 10px;border:1px solid var(--demo-line);border-radius:8px;writing-mode:vertical-rl;color:var(--demo-leaf)}.ch-demo-meaning{font-weight:600;margin-top:9px!important}.ch-demo-transfer-heading{margin-top:26px!important}.ch-demo-source-map{max-width:540px;margin:24px auto 0;text-align:center}.ch-demo-message{display:grid;justify-items:center;gap:9px;font-size:14px}.ch-demo-message svg{width:50px;height:40px;color:var(--demo-leaf)}.ch-demo-branches{width:100%;height:42px;color:#aebda7;margin-top:10px}.ch-demo-repeats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ch-demo-repeats span{display:block;border:1px solid var(--demo-line);padding:11px 7px;border-radius:8px;font-size:18px;text-align:center}.ch-demo-visual .ch-demo-map-caption{font-size:13px;line-height:1.5;margin-top:10px;color:var(--demo-muted)}
/* Stratagems: connected lesson sequence, from a routine to history to judgment. */
.ch-demo-strategy-sequence{list-style:none;padding:0;counter-reset:demo-strategy}.ch-demo-strategy-sequence li{position:relative;display:grid;grid-template-columns:105px 1fr;gap:25px;align-items:center;padding-block:24px;border-top:1px solid var(--demo-line);counter-increment:demo-strategy}.ch-demo-strategy-sequence li:last-child{border-bottom:1px solid var(--demo-line)}.ch-demo-strategy-drawing{color:var(--demo-leaf);position:relative}.ch-demo-strategy-drawing:before{content:counter(demo-strategy,decimal-leading-zero);display:block;font-size:12px;font-weight:600;color:var(--demo-muted);margin-bottom:7px}.ch-demo-strategy-drawing svg{width:105px;height:88px}.ch-demo-strategy-drawing .ch-demo-surface{fill:var(--demo-warm);stroke:#8c9980}.ch-demo-strategy-drawing .ch-demo-card-stroke{stroke:var(--demo-leaf);fill:#fff}.ch-demo-strategy-sequence h4{margin-bottom:5px}.ch-demo-strategy-sequence .ch-demo-chinese{font-size:19px}.ch-demo-strategy-sequence .ch-demo-gloss{margin-top:7px}
/* Pinyin: pitch paths and a blending track are always left-to-right teaching notation. */
.ch-demo-tones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.ch-demo-tones>div{border-bottom:1px solid var(--demo-line);padding:10px 4px 15px;text-align:center}.ch-demo-tones>div>span{font-size:38px;line-height:1.2;display:block;text-align:center!important}.ch-demo-tones svg{width:100%;max-width:130px;height:65px;margin:10px auto;color:var(--demo-leaf);stroke-width:3}.ch-demo-tones .ch-demo-tone-guide{stroke:#dfe6d7;stroke-width:1}.ch-demo-tones p{font-size:13px;line-height:1.45;color:var(--demo-muted)}.ch-demo-tone-four{background:var(--demo-wash);border-radius:10px 10px 0 0}.ch-demo-blending{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}.ch-demo-blending>div{padding:18px;background:var(--demo-wash);border-radius:10px}.ch-demo-blending h4{font-size:14px}.ch-demo-syllable{display:flex;gap:10px;justify-content:center;align-items:center;font-size:30px;line-height:1.5!important;white-space:nowrap}.ch-demo-syllable>span{font-weight:400}.ch-demo-syllable>i{font-style:normal;font-size:20px;color:var(--demo-muted)}.ch-demo-syllable strong{font-weight:600;color:var(--demo-leaf)}.ch-demo-pinyin-progress{margin-top:28px}.ch-demo-progress-track{display:flex;gap:3px;margin-block:14px 18px}.ch-demo-progress-track span{display:block;text-align:center;padding-block:5px;background:#edf2e2;font-size:13px;color:var(--demo-ink)}.ch-demo-progress-track span:first-child{background:#dce8bf;border-radius:5px 0 0 5px}.ch-demo-progress-track span:last-child{background:#f1eee5;border-radius:0 5px 5px 0}.ch-demo-pinyin-progress ul{list-style:none;padding:0;display:grid;gap:7px;font-size:14px;color:var(--demo-muted)}
/* Homepage: the unnecessary addition changes a completed drawing. */
.ch-demo-snake-sequence{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.ch-demo-snake-sequence li{position:relative;text-align:center}.ch-demo-snake-sequence li+li:before{content:'→';position:absolute;inset-inline-start:-22px;top:35px;color:var(--demo-muted);font-size:20px}.ch-demo-snake-sequence svg{width:100%;height:auto;color:var(--demo-leaf);stroke-width:2.5}.ch-demo-snake-sequence p{text-align:center!important;font-size:18px;margin-top:12px}.ch-demo-snake-sequence small{display:block;margin-top:6px}.ch-demo-extra{stroke:#996e55}.ch-demo-faded-stroke{opacity:.4}.ch-demo-application{display:grid;gap:12px;margin-top:20px}.ch-demo-application p{display:flex;gap:12px;align-items:start;font-size:14px}.ch-demo-application-mark{font-size:18px;color:var(--demo-leaf);line-height:1.4}
@media(max-width:760px){.ch-demo-visual{padding:22px 18px;border-radius:18px}.ch-demo-visual h3{font-size:23px;margin-bottom:22px}.ch-demo-reading-grid{grid-template-columns:1fr;gap:26px}.ch-demo-manuscript{padding-inline-start:16px}.ch-demo-annotations{gap:16px}.ch-demo-annotations>div{padding-bottom:14px}.ch-demo-visual .ch-demo-chinese{font-size:20px}.ch-demo-editing-row{grid-template-columns:25px 1fr;gap:10px}.ch-demo-writing-brief{padding:14px}.ch-demo-guide-outline{gap:15px}.ch-demo-guide-outline li{flex-basis:100%}.ch-demo-idiom-origin{gap:16px}.ch-demo-idiom-seal{font-size:23px;padding:10px 7px}.ch-demo-repeats{gap:7px}.ch-demo-repeats span{font-size:17px;padding-inline:4px}.ch-demo-strategy-sequence li{grid-template-columns:66px 1fr;gap:16px;align-items:start;padding-block:20px}.ch-demo-strategy-drawing svg{width:66px;height:62px}.ch-demo-strategy-sequence .ch-demo-chinese{font-size:18px}.ch-demo-tones{gap:7px}.ch-demo-tones>div{padding-inline:2px}.ch-demo-tones>div>span{font-size:32px}.ch-demo-tones svg{height:48px;margin-block:10px}.ch-demo-tones p{font-size:12px;overflow-wrap:anywhere}.ch-demo-blending{grid-template-columns:1fr;gap:12px}.ch-demo-blending>div{padding:15px}.ch-demo-syllable{font-size:29px;gap:14px}.ch-demo-snake-sequence{gap:15px}.ch-demo-snake-sequence li+li:before{inset-inline-start:-15px;top:19px;font-size:16px}.ch-demo-snake-sequence p{font-size:16px;margin-top:10px}.ch-demo-snake-sequence small{font-size:12px}.ch-demo-visual .ch-demo-answer{font-size:16px}.ch-demo-visual .ch-demo-takeaway{font-size:14px}}
@media(prefers-reduced-motion:reduce){.ch-demo-visual *{scroll-behavior:auto}}
/* International pinyin: meaning, character and sound stay connected. */
.ch-demo-character-head,.ch-demo-character-row{display:grid;grid-template-columns:1fr .8fr 1fr;gap:24px;align-items:center;text-align:center}.ch-demo-character-head{font-size:12px;color:var(--demo-muted);padding-bottom:14px}.ch-demo-character-row{border-top:1px solid var(--demo-line);padding-block:20px}.ch-demo-character-rows .ch-demo-character-row:last-child{border-bottom:1px solid var(--demo-line)}.ch-demo-character-picture svg{height:80px;width:110px;margin:0 auto 7px;color:var(--demo-leaf)}.ch-demo-character-picture p{font-size:14px;line-height:1.5}.ch-demo-landscape{fill:var(--demo-wash)}.ch-demo-sun-fill{fill:#f3e9c4;stroke:#a08347}.ch-demo-characters .ch-demo-hanzi{display:block;font-size:54px;line-height:1.4;font-weight:500;text-align:center}.ch-demo-characters .ch-demo-reading-sound{display:block;font-size:31px;line-height:1.4;font-weight:500;text-align:center;color:var(--demo-leaf)}.ch-demo-word-scene{display:grid;grid-template-columns:180px 1fr;gap:32px;align-items:center;margin-top:28px;padding:22px;background:var(--demo-warm);border-radius:12px}.ch-demo-word-scene>div:first-child{text-align:center}.ch-demo-word-scene svg{width:180px;height:110px;color:var(--demo-leaf);margin:auto}.ch-demo-word-scene>div:first-child>p{font-size:14px;margin-top:5px}.ch-demo-word-scene h4{margin-bottom:4px}.ch-demo-characters .ch-demo-word-hanzi{font-size:38px;line-height:1.5;font-weight:500;letter-spacing:.12em}.ch-demo-characters .ch-demo-word-pinyin{font-size:22px;line-height:1.5;color:var(--demo-leaf)}.ch-demo-character-tones{margin-top:28px}.ch-demo-character-tone-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}.ch-demo-character-tone-pair>div{display:grid;grid-template-columns:auto 100px;align-items:center;justify-content:space-between;column-gap:16px;padding:16px;border-block:1px solid var(--demo-line)}.ch-demo-character-tone-pair span{font-size:27px;line-height:1.5}.ch-demo-character-tone-pair svg{height:50px;width:100px;color:var(--demo-leaf);stroke-width:3}.ch-demo-character-tone-pair p{font-size:13px;color:var(--demo-muted);grid-column:1/-1}
@media(max-width:760px){.ch-demo-character-head,.ch-demo-character-row{gap:10px;grid-template-columns:1fr .8fr 1fr}.ch-demo-character-head{font-size:12px;overflow-wrap:anywhere}.ch-demo-character-row{padding-block:15px}.ch-demo-character-picture svg{height:56px;width:78px}.ch-demo-character-picture p{font-size:13px;overflow-wrap:anywhere}.ch-demo-characters .ch-demo-hanzi{font-size:43px}.ch-demo-characters .ch-demo-reading-sound{font-size:24px}.ch-demo-word-scene{grid-template-columns:1fr;gap:18px;padding:18px}.ch-demo-word-scene svg{width:135px;height:85px}.ch-demo-word-scene h4{font-size:15px}.ch-demo-characters .ch-demo-word-hanzi{font-size:36px}.ch-demo-character-tone-pair{gap:12px}.ch-demo-character-tone-pair>div{grid-template-columns:1fr;justify-items:center;text-align:center;padding:12px 8px;gap:5px}.ch-demo-character-tone-pair span{font-size:24px}.ch-demo-character-tone-pair svg{height:44px;width:85px}}

html[dir=rtl] .ch-demo-snake-sequence li+li:before{content:"←"}
/* Compact first reading: teaching evidence remains visible; the full example is a native disclosure. */
.ch-demo-visual[data-readability="compact"]{padding:clamp(22px,3vw,32px)}
.ch-demo-visual[data-readability="compact"] h3{margin-bottom:22px;font-size:clamp(23px,2.1vw,27px)}
.ch-demo-more{margin-top:22px;border-top:1px solid var(--demo-line)}
.ch-demo-more>summary{display:flex;justify-content:space-between;gap:20px;padding-top:15px;font-size:14px;line-height:1.5;color:var(--demo-leaf);cursor:pointer;list-style:none}
.ch-demo-more>summary::-webkit-details-marker{display:none}
.ch-demo-more[open]>summary>span{transform:rotate(45deg)}
.ch-demo-more-content{padding-top:22px}
.ch-demo-more-content .ch-demo-reading-grid{grid-template-columns:1.2fr .8fr}
.ch-demo-reading-core{max-width:760px;margin:auto}
.ch-demo-reading-core .ch-demo-chinese{font-size:21px;line-height:1.85}
.ch-demo-reading-core .ch-demo-gloss{margin-top:18px;font-size:15px;line-height:1.65}
.ch-demo-reader{font-size:15px;line-height:1.6;margin-bottom:20px}
.ch-demo-writing[data-readability="compact"]>.ch-demo-revision{grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:24px;background:var(--demo-warm);border-radius:12px}
.ch-demo-writing[data-readability="compact"]>.ch-demo-revision .ch-demo-revision-arrow{font-size:0}
.ch-demo-writing[data-readability="compact"]>.ch-demo-revision .ch-demo-revision-arrow:after{content:'→';font-size:25px}
.ch-demo-editing-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none;padding:0;margin:22px 0 0!important}
.ch-demo-editing-actions li{font-size:15px;line-height:1.55;min-width:0}
.ch-demo-editing-actions span{display:block;color:var(--demo-leaf);font-size:12px;margin-bottom:5px}
.ch-demo-idioms[data-readability="compact"] .ch-demo-idiom-origin{padding-bottom:20px}
.ch-demo-idioms[data-readability="compact"] .ch-demo-source-map{margin-top:20px}
.ch-demo-idioms[data-readability="compact"]>.ch-demo-answer{font-size:18px;margin-top:20px}
.ch-demo-strategy-sequence.ch-demo-scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.ch-demo-strategy-sequence.ch-demo-scenes li{display:block;padding:0;border:0}
.ch-demo-strategy-sequence.ch-demo-scenes li:last-child{border:0}
.ch-demo-scenes .ch-demo-strategy-drawing svg{width:105px;height:88px;margin-bottom:16px}
.ch-demo-scene-copy{font-size:15px;line-height:1.7}
.ch-demo-course-span{margin-top:24px!important;font-size:15px;font-weight:500;color:var(--demo-leaf)}
.ch-demo-pinyin[data-readability="compact"] .ch-demo-blending{gap:16px;margin-top:22px}
.ch-demo-pinyin[data-readability="compact"] .ch-demo-syllable{font-size:27px;gap:8px}
.ch-demo-characters[data-readability="compact"] .ch-demo-character-row{padding-block:17px}
.ch-demo-characters[data-readability="compact"] .ch-demo-word-scene{margin-top:22px}
@media(max-width:760px){
 .ch-demo-visual[data-readability="compact"]{padding:22px 18px}
 .ch-demo-reading-core .ch-demo-chinese{font-size:20px;line-height:1.8}
 .ch-demo-more-content .ch-demo-reading-grid{grid-template-columns:1fr}
 .ch-demo-writing[data-readability="compact"]>.ch-demo-revision{grid-template-columns:1fr;padding:19px;gap:10px}
 .ch-demo-writing[data-readability="compact"]>.ch-demo-revision .ch-demo-revision-arrow:after{content:'↓'}
 .ch-demo-editing-actions{gap:14px}
 .ch-demo-editing-actions li{font-size:14px;line-height:1.55}
 .ch-demo-strategy-sequence.ch-demo-scenes{grid-template-columns:1fr;gap:22px}
 .ch-demo-strategy-sequence.ch-demo-scenes li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:17px;align-items:center}
 .ch-demo-scenes .ch-demo-strategy-drawing svg{width:72px;height:65px;margin:0}
 .ch-demo-scene-copy{font-size:15px;line-height:1.65}
 .ch-demo-pinyin[data-readability="compact"] .ch-demo-blending{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .ch-demo-pinyin[data-readability="compact"] .ch-demo-blending>div{padding:15px 10px}
 .ch-demo-pinyin[data-readability="compact"] .ch-demo-syllable{font-size:24px;gap:4px}
 .ch-demo-pinyin[data-readability="compact"] .ch-demo-syllable>i{font-size:17px}
}

/* Before/after reading direction follows the parent language. */
html[dir=rtl] .ch-demo-writing[data-readability="compact"]>.ch-demo-revision .ch-demo-revision-arrow:after{content:'←'}
@media(max-width:760px){html[dir=rtl] .ch-demo-writing[data-readability="compact"]>.ch-demo-revision .ch-demo-revision-arrow:after{content:'↓'}}