:root{--paper:#f5f1e7;--ink:#173e3d;--muted:#67756f;--rust:#aa4931;--line:#cfcec0;--wash:#e9e7da;--white:#fffcf5;--body:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;--display:"Songti SC","STSong","Noto Serif CJK SC",serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.8 var(--body)}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}button,input,select{font:inherit;color:inherit}button,a,input,select,summary{touch-action:manipulation}button,.button{border:1px solid var(--line);background:var(--white);padding:9px 16px;cursor:pointer;display:inline-block;text-decoration:none}button:hover,.button:hover{border-color:var(--ink);background:var(--wash)}button:disabled{cursor:default;opacity:.5}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--rust);outline-offset:4px}img{display:block;width:100%;height:auto;background:var(--wash)}.wrap{max-width:1280px;margin:auto;padding:0 36px}.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--ink);padding:23px 0}.brand{font-size:18px;letter-spacing:2px;font-weight:600;text-decoration:none}.brand span{display:block;font-size:10px;font-weight:400;letter-spacing:1px;color:var(--muted)}nav{display:flex;gap:24px;align-items:center}nav a{font-size:13px;text-decoration:none}nav button{background:none;border:0;font-size:12px;padding:4px 0}.skip{position:absolute;top:-100px;left:12px;background:var(--ink);color:white;padding:12px;z-index:100}.skip:focus{top:0}main{min-height:60vh}.hero{display:grid;grid-template-columns:1fr 1.12fr;gap:48px;padding:40px 0 30px;align-items:center}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--rust);text-transform:uppercase;margin-bottom:16px}.hero h1{font:clamp(36px,4.4vw,63px)/1.3 var(--display);letter-spacing:-1px;margin:0 0 18px}.hero h1 em{font-style:normal;color:var(--rust)}.hero p{color:var(--muted);max-width:400px}.hero figure{margin:0;position:relative}.hero img{height:320px;object-fit:cover}.caption{font-size:11px;color:var(--muted);margin-top:8px}.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.solid{background:var(--ink);color:var(--white);border-color:var(--ink)}.solid:hover{background:#26504d;color:white}.metrics{display:flex;gap:24px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.metrics strong{font:23px var(--display);margin-right:7px;color:var(--ink)}.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:34px 0 18px}.section-heading h2{font:27px/1.4 var(--display);margin:0}.section-heading p,.section-heading a{margin:0;font-size:12px;color:var(--muted)}.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.topic-tile{text-decoration:none;display:block;border-bottom:1px solid var(--line);padding-bottom:18px}.topic-tile img{height:220px;object-fit:cover;transition:filter .2s}.topic-tile:hover img{filter:contrast(1.08)}.tile-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin:11px 0}.topic-tile h3{font:25px/1.5 var(--display);margin:0 0 5px}.topic-tile p{margin:5px 0;color:var(--muted);font-size:13px}.reading{display:block;margin:4px 0 9px;font-size:11px;font-family:var(--body);letter-spacing:.3px;color:var(--rust);font-weight:400}.reading small{color:var(--muted);font-size:10px;margin-left:8px}body.hide-pinyin .reading{display:none}.listen{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;margin:40px 0 0;padding:26px;border:1px solid var(--line);background:var(--white)}.listen h2{font:27px var(--display);margin:0 0 10px}.listen h3{margin:0;font:23px var(--display)}.listen p{font-size:13px;margin:8px 0;color:var(--muted)}.listen audio{width:100%;height:36px;margin:12px 0}.subtle{font-size:11px!important;color:var(--muted)}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.pill{font-size:10px;border:1px solid var(--line);padding:2px 7px;color:var(--muted);display:inline-block}.breadcrumb{margin:23px 0 14px;font-size:12px;color:var(--muted)}.topic-header{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:start;margin-bottom:22px}.topic-header h1,.library-head h1{font:44px/1.3 var(--display);margin:0 0 8px}.topic-header img{height:290px;object-fit:cover}.topic-header figure{margin:0}.topic-header p{font-size:14px;margin:12px 0}.note{font-size:12px;line-height:1.9;background:var(--wash);padding:12px 16px}.topic-nav{display:flex;gap:24px;flex-wrap:wrap;padding:16px 0;border-block:1px solid var(--line);font-size:13px}.topic-nav a{text-decoration:none}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.card{background:var(--white);border:1px solid var(--line);min-width:0;overflow:hidden}.card-body{padding:18px 20px}.card h3{font:22px/1.5 var(--display);margin:8px 0 10px;overflow-wrap:anywhere}.card .meta{font-size:11px;color:var(--muted)}.card p{font-size:13px;line-height:1.9}.image-link{display:block;position:relative}.image-link img{height:240px;object-fit:contain;background:#e3e2d9}.image-link span{position:absolute;bottom:9px;right:9px;padding:2px 7px;background:#f8f5ebed;font-size:10px}.badge{font-size:10px;color:var(--rust)}.record-id{font:10px monospace;color:var(--muted);overflow-wrap:anywhere}.source-details{border-top:1px solid var(--line);padding-top:10px;font-size:11px;color:var(--muted)}.source-details summary{cursor:pointer;line-height:1.8}.source-details p,.source-details li{font-size:11px}.source-details a{overflow-wrap:anywhere}.source-details ul{padding-left:18px}.source-details code{overflow-wrap:anywhere}.related{display:flex;flex-wrap:wrap;gap:7px;font-size:11px;margin:12px 0}.related a{border:1px solid var(--line);padding:1px 6px;text-decoration:none}.story-grid,.idea-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.story-grid .card-body{padding:23px}.material-card{border:1px solid var(--line);padding:22px;background:var(--white)}.material-card h3{font:24px/1.5 var(--display);margin:8px 0}.material-card p{font-size:13px}.material-card .label{color:var(--rust);font-size:10px}.quote{border-left:2px solid var(--rust);padding:8px 12px;background:var(--paper);font-size:13px}.quote small{display:block;color:var(--muted);font-size:10px}.library-head{padding:28px 0 17px;display:flex;justify-content:space-between;align-items:center;gap:20px}.library-head p{font-size:13px;color:var(--muted);margin:8px 0}.tabs{display:flex;gap:22px;border-bottom:1px solid var(--ink);margin:0 0 18px}.tabs a{padding:10px 0;text-decoration:none;font-size:14px}.tabs a[aria-current=page]{font-weight:700;border-bottom:4px solid var(--rust)}.tools{display:flex;gap:10px;flex-wrap:wrap}.search{flex:1;min-width:240px;border:1px solid var(--line);background:var(--white);padding:12px 14px}.filters{display:flex;gap:8px;flex-wrap:wrap}select{max-width:210px;background:var(--white);border:1px solid var(--line);padding:10px 26px 10px 12px;font-size:12px}.result-line{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);margin:14px 0}.reset{border:0;background:none;padding:4px;color:var(--rust);font-size:11px}.more-area{text-align:center;margin:25px 0}.empty{padding:35px;grid-column:1/-1;border:1px dashed var(--line);font-size:14px}.reading-note{font-size:12px;color:var(--muted);margin:0 0 18px}.sound-btn{font-size:11px;padding:5px 9px;min-height:34px}.loading{padding:50px 0}footer{border-top:1px solid var(--line);margin-top:44px;padding:24px 0 32px;display:flex;justify-content:space-between;gap:30px;font-size:11px;color:var(--muted)}footer p{margin:0}footer div{display:flex;flex-direction:column;gap:8px}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;font-size:13px;padding:10px 18px;border-radius:2px;z-index:999;max-width:90vw;display:none}.toast.visible{display:block}dialog{max-width:min(500px,92vw);border:1px solid var(--ink);padding:24px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#173e3d88}dialog h2{font:25px var(--display)}dialog input{width:100%;margin:10px 0 18px;padding:12px;border:1px solid var(--line)}.backlink{display:inline-block;margin-top:12px;font-size:12px}.source-caption{white-space:normal;overflow-wrap:anywhere}.small-spacer{margin-top:14px}.mobile-only{display:none}@media(max-width:900px){.wrap{padding:0 24px}.hero{gap:28px}.hero img{height:280px}.cards,.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topic-header h1{font-size:36px}.topic-header img{height:250px}}@media(max-width:600px){.wrap{padding:0 16px}.masthead{padding:15px 0;gap:10px;display:block}.brand{font-size:16px;display:flex;justify-content:space-between;align-items:center}.brand span{font-size:9px;letter-spacing:0}nav{margin-top:13px;gap:0;justify-content:space-between}nav a{font-size:12px}nav button{font-size:11px}.hero{display:flex;flex-direction:column;gap:16px;padding:23px 0 18px;align-items:stretch}.eyebrow{margin-bottom:10px;font-size:10px}.hero h1{font-size:37px;line-height:1.25;margin-bottom:10px}.hero p{font-size:13px;margin:8px 0;max-width:none}.hero-cta{margin-top:12px}.hero-cta a{font-size:12px;padding:7px 11px}.hero img{height:210px}.caption{font-size:10px;margin-top:6px}.metrics{gap:8px 17px;padding:12px 0;font-size:10px}.metrics strong{font-size:19px;margin-right:5px}.section-heading{margin:26px 0 14px;gap:12px}.section-heading h2{font-size:24px}.section-heading p,.section-heading a{font-size:11px}.topic-grid,.cards,.story-grid,.idea-grid{grid-template-columns:1fr;gap:18px}.topic-tile img{height:215px}.topic-tile h3{font-size:25px}.listen{grid-template-columns:1fr;gap:15px;padding:19px;margin-top:26px}.listen h2{font-size:24px}.topic-header{display:flex;flex-direction:column;gap:18px}.topic-header figure{width:100%}.topic-header h1{font-size:34px}.topic-header img{height:240px}.topic-header p{font-size:13px}.topic-nav{gap:10px 22px;font-size:12px}.library-head{padding:23px 0 14px;align-items:flex-start}.library-head h1{font-size:31px}.library-head button{font-size:11px;padding:7px 9px;white-space:nowrap}.tabs{gap:0;justify-content:space-between}.tabs a{font-size:12px}.tools{display:block}.search{width:100%;min-width:0}.filters{margin-top:10px;gap:7px}.filters select{max-width:none;flex:1;min-width:100px;padding:9px 18px 9px 10px}.card-body{padding:17px}.image-link img{height:260px}.card h3{font-size:21px}.reading{font-size:12px}.reading small{font-size:10px}.material-card{padding:18px}.breadcrumb{font-size:11px}.result-line{font-size:10px}.mobile-only{display:inline}footer{display:block;margin-top:28px;padding-bottom:25px}footer div{margin-top:13px;gap:5px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Reading controls live beside each term, including dynamically loaded cards. */
.speech-pronunciation{margin:10px 0 13px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}.speech-pronunciation .reading{margin:0}.term-audio{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.term-read{min-height:36px;background:#f5f1e7;border-color:#b5c3ba;font-size:12px;padding:5px 11px}.audio-kind{font-size:10px;color:var(--muted)}.sound-btn.speaking,.char-read.speaking{background:var(--ink);border-color:var(--ink);color:var(--white)}.speech-pending{opacity:.72}.character-reading{border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:7px 0;margin:9px 0 13px;font-size:12px}.character-reading summary{cursor:pointer;color:var(--muted);width:fit-content;min-height:30px;display:list-item;align-content:center}.character-reading p{font-size:10px;color:var(--muted);margin:5px 0 8px}.char-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:8px 0}.char-read{display:flex;align-items:center;justify-content:center;min-width:40px;min-height:44px;font:20px var(--display);padding:6px 10px;background:var(--paper);border-color:#b5c3ba}.char-separator{font-size:12px;color:var(--muted);padding:0 2px}
@media(max-width:600px){.term-read{min-height:40px;font-size:12px;padding:6px 12px}.char-read{min-width:44px;min-height:44px}.speech-pronunciation{gap:10px}.character-reading summary{min-height:34px}}

.char-read{flex-direction:column;gap:2px}.char-pinyin{font:10px/1.25 var(--body);color:var(--rust)}.char-read.speaking .char-pinyin{color:var(--white)}body.hide-pinyin .char-pinyin{display:none}

[hidden]{display:none!important}

.term-title{font:inherit;color:inherit;line-height:inherit;border:0;border-radius:0;background:transparent;padding:0 1px;margin:0;vertical-align:baseline;min-width:0;text-decoration:underline;text-decoration-color:#a6b6a855;text-decoration-thickness:1px;text-underline-offset:6px}.term-title:hover{background:#dfe6db;border:0}.term-title:disabled{cursor:default;opacity:1;text-decoration:none}.term-title.speaking{background:var(--ink);color:var(--white)}.reading-detail{font-size:11px;color:var(--muted);line-height:1.7}.term-read:disabled{opacity:.7}.glyph-title{margin-right:1px}

/* Keep the archive's typography and palette while making reading and touch easier. */
body{font-size:16px;line-height:1.5}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
button,.button{padding:8px 12px;min-height:44px}
button:active,.button:active{transform:translateY(1px)}
.masthead nav a,.masthead nav button{min-height:44px;display:inline-flex;align-items:center;font-size:14px;line-height:20px}
.masthead nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--rust);text-decoration-thickness:2px;text-underline-offset:8px}
.card p,.material-card p,.listen p,.topic-header p{font-size:16px;line-height:24px}
.card .meta,.caption,.source-details,.source-details p,.source-details li,.reading-detail,.reading-note,.library-head p,.related,.listen .subtle{font-size:14px;line-height:20px}
.badge,.tile-meta,.pill,.audio-kind,.reading small,.quote small,.material-card .label,.record-id,footer{font-size:12px;line-height:16px}
.caption{margin-top:8px}
.source-details summary,.character-reading summary{min-height:44px;align-content:center}
.source-details li+li{margin-top:8px}
.source-details p{line-height:24px}
.reading{font-size:14px;line-height:20px}
.subtle{font-size:14px!important}
.sound-btn,.term-read{min-height:44px;font-size:14px;line-height:20px;padding:8px 12px}
.term-title{min-width:36px;min-height:44px;padding:4px}
.record-body{max-width:48rem;margin:0 auto 24px;padding:24px}
.record-body .story-text{font-size:18px;line-height:28px;white-space:pre-line}
.result-line{font-size:14px;line-height:20px}
.reset{font-size:14px;line-height:20px;min-height:44px}
.quote{font-size:16px;line-height:24px}
.not-found{padding:64px 0;max-width:48rem}
@media(max-width:600px){
 .brand span{font-size:12px;line-height:16px}
 .masthead nav{margin-top:8px}
 .hero p,.topic-header p,.search,select{font-size:16px;line-height:24px}
 .hero-cta a,.library-head button,.tabs a,.topic-nav a{font-size:14px;line-height:20px;min-height:44px}
 .tabs a,.topic-nav a{display:inline-flex;align-items:center}
 .library-head{flex-wrap:wrap;gap:12px}
 .library-head h1{font-size:30px;line-height:36px}
 .section-heading{align-items:flex-start;flex-wrap:wrap}
 .section-heading a,.topic-tile p{font-size:14px;line-height:20px}
 .section-heading a{min-height:44px;display:inline-flex;align-items:center}
 .term-title{min-width:44px}
 .card-body,.listen,.material-card{padding:16px}
 .card h3{font-size:24px;line-height:32px}
 .record-body .story-text{font-size:18px;line-height:28px}
 .empty{padding:24px;font-size:16px;line-height:24px}
 .result-line{align-items:flex-start;gap:8px}
 .metrics{font-size:12px;line-height:16px}
 .metrics strong{font-size:20px;line-height:28px;font-variant-numeric:tabular-nums}
}