.char-learning{--char-ink:#293e36;--char-green:#356549;--char-muted:#5d6d60;--char-line:#d8dfd1;color:var(--char-ink);max-width:1120px;margin:0 auto;padding:8px 12px 36px;font-family:-apple-system,PingFang SC,Microsoft YaHei,sans-serif;font-size:17px;line-height:1.6}.char-learning *{box-sizing:border-box}.char-learning button{font:inherit;cursor:pointer;touch-action:manipulation;border:1px solid var(--char-line);min-height:48px;color:var(--char-ink);background:#fff;border-radius:8px;padding:10px 16px;font-weight:650}.char-learning button:active{filter:brightness(.94)}.char-learning button:disabled{opacity:.45;cursor:default}.char-learning .char-primary{background:var(--char-green);border-color:var(--char-green);color:#fff;min-height:56px;padding:12px 26px;font-size:19px}.char-eyebrow{color:var(--char-muted);font-size:14px;font-weight:700}.char-learning h2{margin:8px 0 12px;font-size:clamp(27px,2.6rem,39px);line-height:1.3}.char-learning h3{margin:8px 0 16px;font-size:23px;line-height:1.4}.char-intro{border-bottom:1px solid var(--char-line);justify-content:space-between;align-items:center;gap:24px;padding:20px 16px 26px;display:flex}.char-intro img{object-fit:contain;flex:none}.char-intro p{color:var(--char-muted);margin:6px 0}.char-intro .char-book{font-size:14px}.char-warning{color:#694516;background:#fff1d1;border-left:4px solid #ad692d;padding:12px 16px}.char-section-title,.char-home-bottom,.char-learning-head,.char-bottom,.char-result-action{justify-content:space-between;align-items:center;gap:16px;display:flex}.char-section-title{margin:26px 0 16px}.char-section-title h3{margin:0}.char-section-title span{color:var(--char-muted)}.char-section-title b{color:var(--char-green);font-size:24px}.char-four{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;display:grid}.char-learning .char-tile{border-color:#e3dfd0;flex-direction:column;align-items:center;min-width:0;min-height:230px;padding:22px 8px 0;display:flex;overflow:hidden}.char-tile-0{background:#fff1db!important}.char-tile-1{background:#eaf1e2!important}.char-tile-2{background:#e5eef4!important}.char-tile-3{background:#f8e8e2!important}.char-tile small{color:#405846;font-size:20px}.char-tile strong{font-family:Kaiti SC,STKaiti,Songti SC,serif;font-size:82px;font-weight:500;line-height:1.4}.char-tile span{border-top:1px solid #ffffffa8;align-self:stretch;margin-top:auto;padding:10px 2px;font-size:15px;display:block}.char-tile em{color:#59675b;padding-bottom:10px;font-size:12px;font-style:normal}.char-home-bottom{flex-wrap:wrap;margin:28px 0}.char-home-bottom span{color:var(--char-muted);font-size:15px}.char-state{color:var(--char-green);font-size:15px}.char-learning-head{flex-wrap:wrap;align-items:end}.char-learning-head h2{margin:4px 0 8px}.char-learning .char-back{color:var(--char-green);background:0 0;border:0;padding:8px 0}.char-rail{flex-wrap:wrap;gap:9px;display:flex}.char-rail button{min-width:58px;font-size:25px}.char-rail [aria-pressed=true]{color:#345531;background:#e5edce;border-color:#7c9b65}.char-steps{border-bottom:1px solid var(--char-line);gap:4px;margin:16px 0 0;display:flex}.char-steps button{min-width:0;color:var(--char-muted);background:0 0;border:0;border-radius:0;flex:1;min-height:58px;padding:8px;font-size:17px}.char-steps [aria-pressed=true]{color:#345531;box-shadow:inset 0 -4px #527546}.char-lesson{background:#fff;border:1px solid #e0e3d7;border-radius:8px;margin:20px 0;padding:20px 24px}.char-cue{border-bottom:1px dashed var(--char-line);justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;font-size:19px;font-weight:650;display:flex}.char-learning .char-cue button{white-space:nowrap;background:#eef3e9;align-items:center;gap:6px;font-size:14px;display:inline-flex}.char-learning button img{object-fit:contain;vertical-align:middle;width:22px;height:22px}.char-workspace{grid-template-columns:minmax(230px,.85fr) minmax(0,1.2fr);align-items:center;gap:36px;padding:22px 8px 8px;display:grid}.char-practice{text-align:center}.char-pinyin{color:var(--char-green);margin:0 0 8px;font-size:27px}.char-grid{aspect-ratio:1;background:#fffdf7;border:2px solid #d9dccf;border-radius:8px;place-items:center;width:min(100%,270px);margin:auto;display:grid;position:relative;overflow:hidden}.char-grid:before,.char-grid:after{content:"";pointer-events:none;z-index:0;position:absolute}.char-grid:before{border-left:1px dashed #d4d6c9;height:100%;top:0;left:50%}.char-grid:after{border-top:1px dashed #d4d6c9;width:100%;top:50%;left:0}.char-grid strong{z-index:1;font:175px/1 Kaiti SC,STKaiti,Songti SC,serif;position:relative}#char-writer{z-index:1;width:100%;height:100%;position:relative}#char-writer svg{width:100%;height:100%;display:block}.char-play-controls{justify-content:center;align-items:center;gap:10px;min-height:44px;margin-top:10px;display:flex}.char-learning .char-play{background:var(--char-green);color:#fff;border:0;border-radius:50%;flex:0 0 44px;place-items:center;width:44px;height:44px;min-height:44px;padding:0;font-size:20px;display:grid}.char-grid-caption{color:var(--char-muted);margin:0;font-size:15px}.char-practice>button{margin-top:12px}.char-step-body{min-width:0}.char-step-body h3{margin:10px 0 20px}.char-learning .char-pronounce{border:0;align-items:center;gap:8px;padding-left:0;font-size:23px;display:flex}.char-facts{color:var(--char-muted);gap:22px;margin:6px 0 18px;font-size:15px;display:flex}.char-stroke-table{grid-template-columns:50px minmax(0,1fr);align-items:center;gap:10px;display:grid}.char-stroke-table>span{color:var(--char-muted);font-size:14px}.char-stroke-row{grid-template-columns:repeat(var(--char-strokes),minmax(0,1fr));gap:8px;min-width:0;display:grid}.char-learning .char-stroke-cell{aspect-ratio:1;background:#fafbf5;border:1px solid #dce1d3;width:100%;min-width:0;min-height:46px;padding:0;position:relative}.char-stroke-cell svg{fill:none;width:100%;height:100%;display:block}.char-stroke-cell .guidelines{stroke:#dce1d4;stroke-width:2px;stroke-dasharray:9 7}.char-stroke-cell .previous{fill:#2b3730}.char-stroke-cell .current{fill:#da6b3d}.char-stroke-cell .future{fill:#dce2d5}.char-stroke-cell small{color:#4f614d;font-size:11px;position:absolute;bottom:0;right:4px}.char-learning .char-stroke-cell.selected{background:#fff7e9;outline:2px solid #c25b2d}.char-stroke-names span{text-align:center;overflow-wrap:anywhere;font-size:16px}.char-caption{color:var(--char-muted);margin:12px 0;font-size:14px}.char-resource-error{color:#674a20;background:#fff1d1;padding:12px}.char-parent-help{color:var(--char-muted);margin-top:16px;font-size:14px}.char-parent-help summary{cursor:pointer;min-height:44px}.char-parent-help p{font-size:14px}.char-write-note{color:var(--char-muted);font-size:14px}.char-tag{color:#405e3b;background:#eff3e5;padding:5px 10px;font-size:14px}.char-words{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0;display:grid}.char-learning .char-words button{background:#f4f6ea;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:140px;padding:14px 8px;display:flex}.char-words small{color:var(--char-muted);font-size:17px}.char-words strong{font-size:31px;font-weight:600}.char-words strong b,.char-sentence b{color:#a64221}.char-hint{background:#f9f3dd;padding:12px 16px;font-size:17px}.char-sentence{background:#faf5e7;margin:14px 0;padding:16px;font-size:25px;line-height:1.8}.char-sentence small{color:#586744;font-size:15px;line-height:1.7;display:block}.char-step-body>p{margin-bottom:6px}.char-feedback{color:#405f3e;min-height:25px;margin:10px 0;font-size:15px}.char-bottom{border-top:1px solid var(--char-line);flex-wrap:wrap;padding-top:16px}.char-bottom>span{color:var(--char-muted);font-size:15px}.char-summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0;display:grid}.char-summary>div{text-align:center;background:#edf2e0;padding:18px}.char-summary b{font:56px Kaiti SC,STKaiti,serif}.char-summary p{margin:10px 0 0;font-size:15px}.char-result-action{background:#f9f3dd;flex-wrap:wrap;padding:16px}@media (max-width:900px){.char-workspace{gap:20px}.char-four{gap:10px}.char-tile strong{font-size:72px}}@media (max-width:390px){.char-rail{gap:5px}.char-rail button{min-width:51px;padding:8px}.char-words strong{font-size:27px}.char-stroke-names span{font-size:14px}}@media (prefers-reduced-motion:reduce){.char-learning *{scroll-behavior:auto!important;transition:none!important}}.char-loading{color:var(--muted);padding:26px 18px;font-size:15px}.char-learning .char-empty{color:var(--muted);padding:26px 18px}.char-learning .char-tile span{min-height:40px}.char-learning .char-result-action button,.char-learning .char-bottom button{min-width:190px}@media (max-width:720px){.char-learning .char-result-action button,.char-learning .char-bottom button{width:100%;min-width:0}}@media (max-width:640px){.char-learning .char-workspace{grid-template-columns:minmax(0,1fr);gap:16px}}.char-learning.char-home{padding-bottom:16px}.char-home .char-intro{gap:16px;padding:8px 10px 14px}.char-home .char-intro>div{flex:1;min-width:0}.char-home .char-intro img{width:82px;height:100px}.char-home-kicker{flex-wrap:wrap;align-items:baseline;gap:2px 18px;display:flex}.char-home .char-book{color:var(--char-muted);margin:0;font-size:13px}.char-home h2{margin:2px 0 0;font-size:36px;line-height:1.3}.char-home .char-intro p{margin:2px 0 0;font-size:15px}.char-home .char-section-title{margin:14px 0 10px}.char-home .char-section-title h3{font-size:20px}.char-home .char-section-title b{font-size:22px}.char-home .char-tile{min-height:240px;padding:12px 8px 0}.char-home .char-tile-pinyin{font-size:18px}.char-home .char-tile strong{font-size:72px;line-height:1.2}.char-home .char-tile span{min-height:36px;padding:7px 2px;font-size:14px}.char-home .char-tile em{padding-bottom:8px}.char-home .char-home-bottom{margin:16px 0 0}.char-home .char-home-bottom span{font-size:14px}.char-home .char-primary{min-height:50px;padding:10px 20px;font-size:17px}@media (min-width:701px) and (max-width:900px) and (orientation:portrait){.char-home .char-four{grid-template-columns:repeat(2,minmax(0,1fr))}.char-home .char-tile{min-height:200px}}@media (max-width:700px){.char-home .char-intro img{width:64px;height:78px}.char-home h2{font-size:29px}.char-home .char-tile{min-height:190px}}@media (min-width:701px){:is(.workspace:has(.char-lesson-view),.content:has(.char-lesson-view)){padding-bottom:0}.char-lesson-view{padding-top:0;padding-bottom:0;line-height:1.4}.char-lesson-view .char-learning-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;display:grid}.char-lesson-view .char-lesson-meta{align-items:center;gap:14px;min-height:36px;display:flex}.char-lesson-view .char-back{white-space:nowrap;min-height:36px;padding:4px 0;font-size:14px}.char-lesson-view .char-eyebrow{white-space:nowrap;margin:0;font-size:13px}.char-lesson-view .char-learning-head h2{margin:0;font-size:29px;line-height:1.25}.char-lesson-view .char-rail{flex-wrap:nowrap;gap:7px}.char-lesson-view .char-rail button{min-width:48px;min-height:48px;padding:5px 10px;font-size:23px}.char-lesson-view .char-steps{margin-top:7px}.char-lesson-view .char-steps button{min-height:46px;padding:5px;font-size:15px}.char-lesson-view .char-lesson{margin:8px 0 0;padding:12px 16px}.char-lesson-view .char-cue{min-height:46px;padding-bottom:8px;font-size:16px}.char-lesson-view .char-cue button{min-height:38px;padding:6px 11px}.char-lesson-view .char-workspace{grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);align-items:start;gap:20px;padding:12px 0 0}.char-lesson-view .char-pinyin{margin:0 0 4px;font-size:21px;line-height:1.2}.char-lesson-view .char-grid{width:min(100%,212px)}.char-lesson-view .char-grid strong{font-size:140px}.char-lesson-view .char-play-controls{margin-top:6px}.char-lesson-view .char-grid-caption{font-size:13px}.char-lesson-view .char-practice>button{margin-top:8px}.char-lesson-view .char-pronounce{min-height:38px;margin:0 0 4px;padding:4px 0;font-size:18px}.char-lesson-view .char-facts{gap:16px;margin:0 0 7px;font-size:13px}.char-lesson-view .char-stroke-table{grid-template-columns:40px minmax(0,1fr);gap:5px}.char-lesson-view .char-stroke-table>span{font-size:12px}.char-lesson-view .char-stroke-row{grid-template-columns:repeat(var(--char-strokes),minmax(46px,52px));gap:5px;overflow-x:auto}.char-lesson-view .char-stroke-cell{min-height:46px}.char-lesson-view .char-stroke-names span{font-size:13px}.char-lesson-view .char-caption{margin:5px 0;font-size:13px}.char-lesson-view .char-parent-help{margin-top:4px;font-size:13px}.char-lesson-view .char-parent-help summary{min-height:38px}.char-lesson-view .char-write-note{margin:3px 0;font-size:13px}.char-lesson-view .char-tag{font-size:13px}.char-lesson-view .char-step-body h3{margin:5px 0 10px;font-size:21px}.char-lesson-view .char-words{gap:9px;margin:10px 0}.char-lesson-view .char-words button{min-height:88px;padding:6px}.char-lesson-view .char-hint{margin:8px 0;padding:9px 12px;font-size:15px}.char-lesson-view .char-sentence{margin:8px 0;padding:14px 12px;font-size:24px;line-height:1.8}.char-lesson-view .char-feedback{min-height:21px;margin:5px 0;font-size:13px}.char-lesson-view .char-bottom{padding-top:8px}.char-lesson-view .char-primary{min-height:48px;padding:8px 16px;font-size:16px}}.char-learning{font-family:var(--font-ui);--reading-size:28px;--reading-line-height:2.2;--reading-char-gap:2px;--pinyin-color:#58715f}.char-tile strong,.char-grid strong,.char-summary b{font-family:var(--font-learning-hanzi)}.char-tile-pinyin,.char-pinyin,.char-pronounce,.char-words small,.char-sentence small{font-family:var(--font-pinyin)}.char-tile-word{color:var(--green-deep);font-size:13px;font-weight:700;line-height:1.2}.char-pinyin,.char-pronounce{letter-spacing:.02em}.char-word-reading{min-height:54px;font-family:var(--font-learning-hanzi);font-size:31px;font-weight:600;line-height:1.55;display:block}.char-words small{color:var(--pinyin-color);letter-spacing:.01em;font-size:17px;line-height:1.2}.char-words ruby,.char-sentence ruby{font-family:var(--font-learning-hanzi);letter-spacing:var(--reading-char-gap);font-size:1em;line-height:1.55}.char-words ruby rt,.char-sentence ruby rt{font-family:var(--font-pinyin);color:var(--pinyin-color);letter-spacing:0;font-size:.46em;font-weight:400;line-height:1}.char-sentence{font-family:var(--font-learning-hanzi);font-size:var(--reading-size);line-height:var(--reading-line-height);letter-spacing:var(--reading-char-gap);padding-top:22px}.char-sentence small{letter-spacing:0;color:var(--pinyin-color);font-size:15px;line-height:1.7}.char-sentence ruby{ruby-position:over;white-space:nowrap}.char-sentence ruby+ruby{margin-left:2px}.char-standard-glyph{vertical-align:-.12em;letter-spacing:0;width:1em;height:1em;font-weight:400;line-height:1;display:inline-block;position:relative}.char-standard-glyph svg{fill:currentColor;width:100%;height:100%;display:block}.char-glyph-text{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.char-grid>.char-static{place-items:center;width:100%;height:100%;padding:24px;display:grid}.char-grid .char-static .char-standard-glyph{vertical-align:baseline;width:100%;height:100%}@media (max-width:640px){.char-learning{--reading-size:24px;--reading-line-height:2.15;--reading-char-gap:1px}.char-words ruby,.char-sentence ruby{letter-spacing:var(--reading-char-gap)}}