:root{color-scheme:light;--ink:#173f32;--muted:#607068;--line:#dce3d7;--paper:#fffef9;--accent:#a6402d;--soft:#fff0e8;--reply:#ffe2d0;font-family:Inter,"Segoe UI","Microsoft YaHei","Malgun Gothic",sans-serif;color:var(--ink);background:#f7f6f0}
*{box-sizing:border-box}body{margin:0}a{color:inherit}button,input,select{font:inherit}button,select{cursor:pointer}button{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:11px 15px;color:var(--ink)}button:hover{background:#e9eedf}button:disabled{opacity:.35;cursor:default}input,select{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ac8c2d;outline-offset:4px}[hidden]{display:none!important}.skip{position:absolute;top:-100px;z-index:9;background:white;padding:15px}.skip:focus{top:0}
.site-header{max-width:1320px;margin:auto;padding:20px 42px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.site-header img{width:180px;height:auto;display:block}.site-header nav{display:flex;align-items:center;gap:25px;font-size:14px}.site-header a{text-decoration:none}
main{max-width:1320px;margin:auto;padding:38px 42px}.intro{display:flex;justify-content:space-between;gap:28px;align-items:center;margin-bottom:34px}.eyebrow{font-size:12px;font-weight:750;letter-spacing:.12em;color:var(--accent)}h1{font-size:clamp(30px,4vw,46px);letter-spacing:-.035em;margin:12px 0;line-height:1.2}.intro p:last-child{color:var(--muted);line-height:1.7;max-width:680px}.level-choice{display:grid;gap:10px;font-size:13px;min-width:170px}
.topic-group{margin:36px 0}.topic-group h2{font-size:20px;margin:0 0 16px;display:flex;align-items:center;gap:14px}.group-no{font-size:12px;color:var(--muted);font-weight:500}.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.topic{display:flex;gap:17px;align-items:center;text-decoration:none;padding:23px;background:var(--paper);border:1px solid var(--line);border-radius:18px;transition:transform .15s,border-color .15s}.topic:hover{transform:translateY(-2px);border-color:var(--accent)}.topic-glyph{display:grid;place-items:center;flex:0 0 52px;height:60px;border-radius:13px;background:var(--soft);color:var(--accent);font-size:28px;font-family:"Noto Serif SC","SimSun",serif}.topic strong{font-size:17px;font-weight:650;line-height:1.4}.topic small{display:block;font-size:12px;color:var(--muted);margin-top:8px}
.route{display:flex;align-items:center;gap:20px;margin-bottom:24px}.route button{background:transparent}.route span{font-weight:650}.workspace{display:grid;grid-template-columns:252px minmax(0,1fr);gap:28px;align-items:start}.library{position:sticky;top:20px;border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:18px}.library label{display:block;font-size:12px;line-height:1.5;margin-bottom:10px;color:var(--muted)}.library input{width:100%;background:#f7f8f1}.library #count{color:var(--muted);font-size:12px}.entry-link{display:block;padding:12px 10px;border-bottom:1px solid #edf0e5;text-decoration:none;font-size:16px;overflow-wrap:anywhere}.entry-link[aria-current=true]{background:var(--soft);color:var(--accent);border-radius:9px;font-weight:650}.entry-link small{display:block;font-size:12px;color:var(--muted);margin-top:5px}.list-nav{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:12px}.list-nav button{padding:7px 12px}#browse{display:none}.lesson{min-width:0}.lesson-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;font-size:12px;color:var(--muted)}.lesson-bar div{display:flex;gap:8px}
article{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:36px;min-height:320px;overflow-wrap:anywhere}.head{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:26px}.pinyin{font-size:21px;line-height:1.7;color:var(--accent);font-weight:500;letter-spacing:.02em;word-break:normal;overflow-wrap:anywhere}.hanzi{font-size:25px;line-height:1.7;font-family:"Microsoft YaHei","PingFang SC",sans-serif}.traditional{font-size:20px;color:#606d62;line-height:1.7}.head .hanzi{font-size:clamp(29px,4vw,42px);font-weight:650;line-height:1.5}.head .pinyin{font-size:24px}.translation{font-size:16px;line-height:1.75;color:#4c6257;margin-top:8px}.language-tag{font-size:10px;padding:3px 6px;border-radius:4px;background:#edf1e5;margin-right:8px;color:#596a58}.label{display:block;font-size:12px;font-weight:700;letter-spacing:.035em;color:var(--accent);margin-bottom:10px}.card{margin-top:18px;border-radius:16px;background:#f4f6ed;padding:22px}.card.before{background:#fff1e9;border-left:3px solid #bd614b}.card.after{background:#edf5e9;border-left:3px solid #548657}mark{background:#f6dda3;color:inherit;border-radius:4px;padding:0 2px}.meta{font-size:12px;color:var(--muted);line-height:1.8}.source-links a{margin-right:14px;display:inline-block}.reference{display:block;color:var(--accent);font-size:12px;margin-top:18px;line-height:1.7}.note{font-size:13px;line-height:1.9;color:var(--muted);background:#f2f3e9;border-radius:12px;padding:15px;margin-top:22px}
.dialogue-row{display:grid;grid-template-columns:80px minmax(0,1fr);gap:15px;margin:23px 0;align-items:start}.dialogue-row.reply{grid-template-columns:minmax(0,1fr) 80px}.dialogue-row.reply .speaker{order:2}.speaker{text-align:center;font-size:11px;color:var(--accent)}.speaker img{width:80px;height:80px;object-fit:contain;filter:drop-shadow(0 4px 7px #29472918)}.speaker span{display:block}.speech{background:var(--soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:5px 20px 20px;padding:20px}.reply .speech{background:var(--reply);border-radius:20px 5px 20px 20px}
.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}.related-card{padding:17px;border:1px solid var(--line);border-radius:13px;background:var(--paper);text-decoration:none;display:block}.related-card[href]:hover{border-color:var(--accent);background:var(--soft)}.related-card .hanzi{font-size:25px}.related-card .pinyin{font-size:18px}.related-card .translation{font-size:14px}.related-card .traditional{font-size:17px}.word-tree{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:16px;align-items:center;margin-top:28px}.tree-root{border:2px solid var(--accent);background:var(--soft);border-radius:50%;height:64px;display:grid;place-items:center;font-size:32px;color:var(--accent)}.tree-branch{display:grid;gap:12px}.tree-heading{font-size:12px;color:var(--muted);text-align:center}.tree-branch .related-card{position:relative;padding:15px}.tree-branch:first-child .related-card:after{content:"";position:absolute;width:16px;height:1px;background:var(--accent);right:-17px;top:50%}.tree-branch:last-child .related-card:before{content:"";position:absolute;width:16px;height:1px;background:var(--accent);left:-17px;top:50%}
.picture-frame{border-radius:20px;overflow:hidden;background:#eaf2df;margin-bottom:20px}.picture-frame svg{display:block;width:100%;height:auto}.guess{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.guess input{min-width:0;flex:1}.guess button{background:var(--ink);color:white}#picture-result{line-height:1.8;font-size:15px}#picture-result.correct{color:#287148}#picture-result.try{color:#965522}.picture-actions{display:flex;gap:12px;flex-wrap:wrap;margin:15px 0}.learning-tools{border-top:1px solid var(--line);margin-top:25px;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:20px}.learning-tools #help{display:flex;align-items:center;gap:12px;padding:0 16px 0 0;border:0;background:transparent;text-align:left}.learning-tools img{width:96px;height:96px;object-fit:contain}.learning-tools strong{font-size:19px}.learning-tools small{display:block;margin-top:6px;max-width:230px;line-height:1.5;color:var(--muted)}.learning-tools>div{max-width:230px;font-size:12px;line-height:1.8;text-align:right}.learning-tools #reset{font-size:12px;padding:6px 10px}footer{border-top:1px solid var(--line);margin-top:44px;padding:24px 0;color:var(--muted);font-size:12px;line-height:1.9}footer p{max-width:900px;margin:7px 0}
@media(max-width:1000px){.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace{grid-template-columns:220px minmax(0,1fr);gap:18px}article{padding:25px}.word-tree{grid-template-columns:minmax(0,1fr);gap:12px}.tree-root{justify-self:center;width:64px}.tree-branch .related-card:after,.tree-branch .related-card:before{display:none}}
@media(max-width:760px){.site-header{padding:17px 18px;flex-wrap:wrap}.site-header img{width:155px}.site-header nav{gap:14px;flex-wrap:wrap;font-size:13px}.site-header select{padding:9px}.intro{display:block;margin-bottom:25px}.level-choice{display:flex;align-items:center;justify-content:space-between}.level-choice select{max-width:65%}main{padding:24px 18px}.workspace{display:block}.library{position:static;margin-bottom:20px;padding:14px}.library #entry-list,.library .list-nav{display:none}.library.open #entry-list,.library.open .list-nav{display:block}.library.open .list-nav{display:flex}.library #browse{display:block;width:100%;background:#eef2e6}.library #count{margin:9px 0}.topic{padding:18px;gap:12px}.topic-glyph{flex-basis:44px;height:52px;font-size:25px}.topic strong{font-size:16px}.topic-group{margin:27px 0}.topic-grid{gap:10px}.dialogue-row{grid-template-columns:58px minmax(0,1fr);gap:10px}.dialogue-row.reply{grid-template-columns:minmax(0,1fr) 58px}.speaker img{width:58px;height:58px}.speech{padding:16px}.hanzi{font-size:22px}.pinyin{font-size:20px}.traditional{font-size:19px}.translation{font-size:15px}article{padding:24px 20px}.card{padding:18px}.head .pinyin{font-size:22px}.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.related-card{padding:12px}.learning-tools{gap:8px;align-items:flex-start;flex-wrap:wrap}.learning-tools>div{text-align:left;max-width:100%;padding-left:12px}.learning-tools img{width:90px;height:90px}.learning-tools small{max-width:150px}.route{gap:10px;font-size:14px}.route button{padding:9px 11px}}
@media(max-width:420px){.topic-grid{grid-template-columns:1fr}.topic{padding:18px}.site-header nav{width:100%;justify-content:space-between}.dialogue-row,.dialogue-row.reply{grid-template-columns:1fr}.dialogue-row .speaker,.dialogue-row.reply .speaker{order:0;display:flex;align-items:center;gap:9px;text-align:left}.speaker img{width:66px;height:66px}.speaker span{font-size:13px}.reply .speaker{justify-content:flex-end}.related-grid{grid-template-columns:1fr}.speech{padding:15px}.learning-tools #help{width:100%}.learning-tools small{max-width:none}.head .hanzi{font-size:30px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.learning-view #subtitle{display:none}.learning-view h1{font-size:30px}.learning-view .intro{margin-bottom:18px}.learning-view .route{margin-bottom:18px}.learning-view #topic-title{display:none}
@media(max-width:420px){.speaker img{width:84px;height:84px}.learning-view .intro .eyebrow{display:none}.learning-view .intro h1{font-size:28px;margin:0 0 20px}}

/* Components and a contained word-tree canvas. Browser page zoom stays enabled. */
#component-filter{width:100%;margin-bottom:18px;max-width:100%}
.component-symbol{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:88px;line-height:1.4;color:var(--accent);padding:22px;text-align:center;background:var(--soft);border-radius:20px;margin-bottom:24px}
.structure-diagram{width:150px;height:150px;display:block;margin:22px auto}
.tree-study{margin-top:28px;min-width:0}
#saying-index-tools{border-bottom:1px solid var(--line);margin-bottom:18px;padding-bottom:18px}
#saying-index-summary{margin:0 0 15px;line-height:1.8;color:var(--accent);font-weight:650}
#saying-group{width:100%;max-width:100%;font-size:14px}
#tree-index-tools{border-bottom:1px solid var(--line);margin-bottom:20px;padding-bottom:18px}
#tree-index-summary{margin:0 0 16px;line-height:1.8;color:var(--accent);font-weight:650}
#tree-index-tools select{width:100%;min-width:0;max-width:100%;margin-bottom:14px;font-size:13px}
#tree-recommended{display:flex;flex-wrap:wrap;gap:7px}
#tree-recommended a{display:grid;place-items:center;min-width:42px;min-height:42px;padding:5px 8px;text-decoration:none;background:var(--soft);border:1px solid var(--line);border-radius:11px;font-size:18px;color:var(--accent)}
#tree-recommended a:hover{border-color:var(--accent)}
.entry-link .tree-word-count{float:right;margin:1px 0 0 8px;font-size:11px;font-weight:500;color:var(--muted)}
.tree-word-level-label{margin-top:16px}
#tree-word-level{width:100%;max-width:100%;font-size:14px}
.tree-loading{min-height:240px;display:grid;align-content:center;gap:15px;text-align:center;color:var(--muted);line-height:1.8}
.tree-loading button{justify-self:center}
@media(min-width:761px){body.learning-view .library:has(#tree-index-tools:not([hidden])){position:static}}
@media(max-width:760px){#tree-index-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;margin-bottom:15px;padding-bottom:15px}#tree-index-summary,#tree-recommended-label,#tree-recommended{grid-column:1/-1}#tree-stage-label{grid-column:1;grid-row:2}#tree-initial-label{grid-column:2;grid-row:2}#tree-stage-filter{grid-column:1;grid-row:3}#tree-initial-filter{grid-column:2;grid-row:3}#tree-index-tools select{margin-bottom:0}#tree-recommended a{min-width:36px;min-height:40px;font-size:17px}}
.tree-summary{font-size:15px;line-height:1.7;color:var(--accent);font-weight:650}
#tree-search{width:100%;max-width:100%;background:#f7f8f2}
.tree-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.tree-toolbar button{min-width:44px;min-height:44px}
#tree-plus,#tree-minus{font-size:24px;padding:3px 13px}
#tree-scale{min-width:54px;text-align:center;font-variant-numeric:tabular-nums;font-size:14px}
#tree-reset{margin-left:auto}
#tree-guide{font-size:12px;line-height:1.8;margin:12px 0}
#tree-viewport{height:min(72vh,680px);min-height:350px;overflow:auto;overscroll-behavior:contain;touch-action:none;border:1px solid var(--line);border-radius:18px;background-color:#f5f7ef;background-image:radial-gradient(#ccd6c4 .8px,transparent .8px);background-size:18px 18px;cursor:grab;scrollbar-gutter:stable}
#tree-viewport:active{cursor:grabbing}
#tree-stage{position:relative;min-width:100%;min-height:100%}
#tree-canvas{position:absolute;left:0;top:0;transform-origin:0 0;padding:26px 16px 30px;box-sizing:border-box;user-select:none}
#tree-canvas .tree-root{width:76px;height:76px;margin:0 auto 30px;font-size:30px;position:relative}
#tree-canvas .tree-root:after{content:"";position:absolute;top:100%;height:30px;width:2px;background:var(--accent)}
.tree-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;border-top:2px solid var(--accent)}
#tree-canvas .tree-branch{position:relative;padding-top:22px;min-width:0}
#tree-canvas .tree-branch:before{content:"";position:absolute;top:0;left:50%;height:18px;width:2px;background:var(--accent)}
#tree-canvas .tree-heading{color:var(--accent);font-size:15px;font-weight:700;line-height:1.5;margin:0}
#tree-canvas .related-card{padding:14px 12px;box-shadow:0 3px 10px #203b2310}
#tree-canvas .related-card:before,#tree-canvas .related-card:after{display:none}
#tree-canvas .related-card .hanzi{font-size:24px}
#tree-canvas .related-card .pinyin{font-size:19px}
.branch-nav{display:flex;justify-content:space-between;align-items:center;gap:6px}
.branch-nav span{font-size:11px;line-height:1.5;text-align:center;color:var(--muted)}
.branch-nav button{padding:5px;min-width:32px;min-height:36px;background:var(--paper)}
.tree-text{margin-top:20px;border:1px solid var(--line);border-radius:14px;padding:16px}
.tree-text summary{cursor:pointer;font-size:14px;font-weight:650;color:var(--accent);min-height:28px}
#tree-text-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
@media(max-width:1100px){.tree-branches{grid-template-columns:1fr;border-top:0}.tree-branch{border-top:2px solid var(--accent)}#tree-canvas .tree-root{margin-bottom:28px}.branch-nav{justify-content:center;gap:16px}.tree-branch+.tree-branch{margin-top:22px}}
@media(max-width:600px){#tree-canvas{padding:24px 12px}#tree-viewport{height:65vh;min-height:340px}#tree-text-list{grid-template-columns:1fr}.tree-toolbar{gap:7px}#tree-reset{padding:9px 12px}.component-symbol{font-size:76px}}

/* Stroke outlines keep components accurate, including frames and overlapping parts. */
.component-study{margin:30px 0;min-width:0}
.component-study h3{font-size:22px;letter-spacing:-.02em;margin:0 0 10px}
.ct-legend{font-size:14px;line-height:1.8;color:var(--muted);padding-left:18px;border-left:4px solid var(--accent)}
.ct-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.ct-controls button{min-height:44px;min-width:44px}
.ct-controls [data-ct="minus"],.ct-controls [data-ct="plus"]{font-size:25px;padding:4px 13px}
.ct-controls [data-ct="reset"]{margin-left:auto}
.ct-scale{min-width:52px;text-align:center;font-variant-numeric:tabular-nums}
.ct-guide{font-size:13px;line-height:1.8}
.ct-viewport{height:440px;overflow:auto;border:1px solid var(--line);border-radius:20px;touch-action:none;overscroll-behavior:contain;cursor:grab;background:#f5f7f0 radial-gradient(#cfd9c8 .9px,transparent .9px) 0 0/20px 20px}
.ct-viewport:active{cursor:grabbing}
.ct-stage{position:relative;min-height:100%;min-width:100%}
.ct-canvas{position:absolute;left:0;top:0;transform-origin:0 0;padding:28px 20px 32px;user-select:none}
.ct-root{min-width:86px;width:max-content;max-width:100%;min-height:86px;padding:12px 20px;margin:0 auto 30px;border:2px solid var(--accent);background:var(--paper);border-radius:22px;color:var(--accent);font-size:40px;text-align:center;position:relative}
.ct-root:after{content:"";position:absolute;top:100%;left:50%;height:30px;width:2px;background:var(--accent)}
.ct-branches{display:flex;gap:22px;justify-content:center;border-top:2px solid var(--accent)}
.ct-branch{flex:1;min-width:0;position:relative;padding-top:22px}
.ct-branch:before{content:"";position:absolute;top:0;left:50%;height:22px;width:2px;background:var(--accent)}
.ct-branch h4{font-size:14px;margin:0 0 14px;text-align:center;color:var(--accent);line-height:1.6}
.ct-leaves{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:12px}
.ct-leaf{display:flex;flex-direction:column;align-items:center;gap:5px;border-radius:16px;padding:10px 9px;background:var(--paper);box-shadow:0 3px 8px #21352b09;min-width:0}
.ct-leaf[aria-pressed="true"]{border:2px solid var(--accent);background:var(--soft);padding:9px 8px;box-shadow:0 4px 14px #21352b16}
.ct-leaf .pinyin{font-size:21px;line-height:1.3;word-break:normal}
.ct-glyph{width:100%;max-width:126px;aspect-ratio:1;display:block}
.ct-highlight{fill:var(--accent);stroke:var(--accent);stroke-width:2}
.ct-rest{fill:#233d32}
.ct-traditional{font-size:19px;color:var(--muted)}
.ct-meaning{font-size:12px;line-height:1.5;overflow-wrap:anywhere;text-align:center;color:var(--muted)}
.ct-detail{margin-top:24px;border:1px solid var(--line);border-radius:20px;background:var(--paper);padding:24px;scroll-margin-top:20px}
.ct-detail-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}
.ct-detail-heading .label{margin:0}
.ct-badge{font-size:13px;padding:6px 12px;border-radius:100px;background:var(--soft);color:var(--accent)}
.ct-detail-body{display:grid;grid-template-columns:180px minmax(0,1fr);gap:25px;align-items:start}
.ct-focus{text-align:center}.ct-focus .pinyin{font-size:24px}
.ct-focus .ct-glyph{max-width:180px;background:#f8f8f2;border:1px solid var(--line);border-radius:16px;margin:12px auto 18px}
.ct-focus button{font-size:13px;width:100%}
.ct-position{font-size:14px;line-height:1.7}
.ct-equation{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:10px 0 20px}
.ct-parts{display:inline-flex;gap:6px;align-items:center;padding:7px;border:1px solid var(--line);border-radius:8px;background:#f6f8ef}
.ct-parts.vertical{flex-direction:column}.ct-parts.enclose{border-width:3px;border-color:var(--accent);border-style:dashed}
.ct-part{font-size:28px;line-height:1.2;min-width:32px;text-align:center}
.ct-result{font-size:38px;color:var(--accent)}
.ct-equation{gap:8px}.ct-piece{display:flex;flex-direction:column;align-items:center;gap:4px}.ct-piece .ct-glyph{width:62px;height:62px;border:1px solid var(--line);border-radius:9px;background:#f8f9f3}.ct-piece small{font-size:11px;color:var(--muted)}.ct-piece:nth-of-type(3) .ct-highlight{fill:#233d32;stroke:#233d32}
.ct-attribution{font-size:11px;line-height:1.7;color:var(--muted);margin-top:25px}
.ct-attribution summary{cursor:pointer}
@media(max-width:1000px){.ct-detail-body{grid-template-columns:1fr}.ct-focus{max-width:200px;margin:0 auto}.ct-detail{padding:20px}.ct-branches{gap:14px}.ct-branch .ct-leaves{grid-template-columns:1fr}.ct-branch:only-child .ct-leaves{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.ct-viewport{height:390px}.ct-detail{padding:17px}.ct-detail-heading{flex-wrap:wrap}.ct-controls{gap:6px}.ct-controls [data-ct="reset"]{padding:10px}.ct-explanation .translation{font-size:15px}}
#topic-index-tools{display:grid;gap:10px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line,#dce3d7)}
#topic-index-tools[hidden]{display:none}
#topic-index-tools label{font-size:13px;color:#60746b}
#topic-index-tools select{width:100%;min-width:0;max-width:100%;font-size:14px}
.topic-scope{margin:0 0 18px;padding:14px 18px;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:var(--soft);color:#536e62;font-size:14px;line-height:1.8}
.picture-frame img{display:block;width:100%;height:auto;border-radius:18px}
.linked-sources{margin-top:18px;border-top:1px solid #dce3d7;padding-top:16px}
.linked-sources summary{cursor:pointer;color:var(--accent);font-weight:650}
.linked-sources .reference{display:block;margin:12px 0;overflow-wrap:anywhere}
.answer .card{padding:18px 0;border:0}
.answer .dialogue-row{margin-top:24px}
.learning-footnote{margin:14px 0 0;padding:0;background:none;border:0;border-radius:0;color:var(--muted);font-size:12px;font-weight:400;line-height:1.65;overflow-wrap:anywhere}
.learning-footnote>span{font-size:inherit;font-weight:500}
/* A friendly illustrated doorway into each topic. The whole card is a link. */
.topic-grid{gap:16px}
.topic{--icon-bg:#edf3e9;min-height:126px;padding:20px;gap:18px;border-radius:22px;transition:border-color .2s,box-shadow .2s,transform .2s}
.topic>span:last-child{min-width:0}
.topic strong{display:block;font-size:17px;line-height:1.5;overflow-wrap:anywhere}
.topic small{margin-top:6px;line-height:1.5}
.topic-glyph{flex:0 0 82px;height:82px;background:var(--icon-bg);border-radius:25px 29px 23px 28px}
.topic-glyph .topic-icon{display:block;width:68px;height:68px;flex-shrink:0;transform-origin:50% 65%}
.topic[data-topic=idioms],.topic[data-topic=two-part],.topic[data-topic=similar],.topic[data-topic=poetry]{--icon-bg:#fbf1db}
.topic[data-topic=sayings],.topic[data-topic=spoken],.topic[data-topic=festivals],.topic[data-topic=zodiac]{--icon-bg:#fcece5}
.topic[data-topic=errors],.topic[data-topic=picture],.topic[data-topic=solar]{--icon-bg:#edf3f7}
.topic:focus-visible{outline:3px solid #2b7158;outline-offset:4px;border-color:#2b7158}
.topic:hover{transform:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .topic:hover{transform:translateY(-3px);box-shadow:0 8px 22px #214b3b0b;border-color:#9cbca9}
  .topic-glyph .topic-icon{transition:transform .25s ease}
  .topic:hover .topic-icon,.topic:focus-visible .topic-icon{transform:rotate(-5deg) scale(1.07)}
  .topic:hover .icon-spark,.topic:focus-visible .icon-spark{animation:topic-spark .55s ease both;transform-box:fill-box;transform-origin:center}
}
@keyframes topic-spark{0%,100%{transform:scale(1)}50%{transform:scale(1.35) rotate(20deg)}}
@media(max-width:1100px){.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .topic-grid{gap:12px}
  .topic{padding:18px;gap:14px;min-height:114px}
  .topic-glyph{flex-basis:74px;height:74px;border-radius:22px 25px 21px 25px}
  .topic-glyph .topic-icon{width:64px;height:64px}
  .topic strong{font-size:16px}
}
@media(max-width:600px){.topic-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .topic,.topic-glyph .topic-icon{transition:none}
  .topic:hover,.topic:focus-visible .topic-icon,.topic:hover .topic-icon{transform:none}
  .topic .icon-spark{animation:none}
}

/* Reading is normal page flow; the movable tree is an optional overview. */
.tree-study-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.tree-study-header .tree-summary{margin:0;font-size:13px;font-weight:500;color:var(--muted)}
.tree-view-switch{display:flex;padding:4px;gap:4px;border:1px solid var(--line);border-radius:14px;background:#f2f4ec}
.tree-view-switch button{border:0;background:transparent;min-height:44px;padding:10px 16px;font-size:14px}
.tree-view-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:0 2px 5px #173f3214}
.tree-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;align-items:end}
.tree-filters>div{min-width:0}.tree-filters .label{font-size:12px;color:var(--muted);letter-spacing:0;font-weight:500;line-height:1.5}
.tree-filters input,.tree-filters select{min-height:46px;font-size:14px}
#tree-found{margin:12px 0 16px}
#tree-groups{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}
#tree-groups button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 13px;font-size:14px}
#tree-groups button span{font-size:12px;font-variant-numeric:tabular-nums;opacity:.8}
#tree-groups button[aria-pressed=true]{border-color:var(--accent);background:var(--soft);color:var(--accent);font-weight:650}
.word-position-section{margin-top:24px}
.word-position-section>h3{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:650;margin:0 0 14px;color:var(--accent)}
.word-position-section>h3>span{font-size:12px;color:var(--muted);font-weight:400}
.word-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;align-items:stretch}
.tree-word-item{min-width:0;scroll-margin:24px}
.tree-word-item .related-card{height:100%;padding:20px;background:#fffefb}
.tree-word-item .pinyin{font-size:21px;line-height:1.65}
.tree-word-item .hanzi{font-size:28px}
.tree-word-item .traditional{font-size:18px}
.tree-word-item .translation{font-size:15px;line-height:1.7}
.tree-word-item .meta{display:block;margin-top:14px;padding-top:10px;border-top:1px solid #edf0e5;font-size:12px}
.tree-word-item:focus{outline:none}
.tree-word-item:focus .related-card,.tree-word-item.is-target .related-card{border-color:var(--accent);box-shadow:0 0 0 2px var(--soft)}
.tree-list-footer{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:22px}
.tree-list-footer button{min-height:46px;min-width:180px;background:var(--soft);border-color:var(--accent);color:var(--accent);font-size:14px}
#tree-no-words{padding:26px 16px;text-align:center;font-size:15px;line-height:1.8;color:var(--muted)}
.tree-map-hint{font-size:13px;line-height:1.8;color:var(--muted);margin:0}
.tree-word-node{display:grid;text-align:left;width:100%;min-height:58px;padding:12px 14px;gap:2px;background:var(--paper);border-radius:12px}
.tree-word-node .pinyin{font-size:17px;line-height:1.5}.tree-word-node .hanzi{font-size:23px}
.tree-word-node:hover,.tree-word-node:focus-visible{border-color:var(--accent);background:var(--soft)}
.tree-group-open{font-size:12px;line-height:1.6;min-height:44px;background:var(--soft);color:var(--accent)}
@media(max-width:600px){.tree-study-header{gap:12px}.tree-view-switch{width:100%}.tree-view-switch button{flex:1;padding:10px 8px}.tree-word-item .related-card{padding:18px}#tree-groups{gap:7px}#tree-groups button{padding:9px 11px}.tree-list-footer button{width:100%}}