:root{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#273a36;background:#f4f5f0;font-size:16px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{border:1px solid #d8e0da;background:white;border-radius:9px;padding:11px 15px;color:#294e44;cursor:pointer;font-weight:600}button:hover{background:#eaf2ed}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #d08a3c;outline-offset:3px}header{height:86px;background:#fff;border-bottom:1px solid #e1e5de;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.brand{text-decoration:none;color:#264a40;display:flex;align-items:center;gap:12px;font-size:22px;font-weight:750}.brand-mark{display:grid;place-items:center;background:#285646;color:#fff;width:40px;height:40px;border-radius:12px}.tag,.version{font-size:14px;font-weight:400;color:#718079}.tag{border-left:1px solid #d9ded8;padding-left:12px}main{max-width:1450px;padding:36px 5vw;margin:auto}.heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:27px}.eyebrow{color:#628373;font-size:14px;letter-spacing:2px;margin:0 0 9px}h1{font-size:32px;letter-spacing:1px;margin:0}.heading>p{color:#7b8278;font-size:15px}.workspace{display:grid;grid-template-columns:276px minmax(0,1fr);gap:25px}aside{background:white;border:1px solid #e0e5dc;border-radius:16px;height:fit-content;overflow:hidden}section{padding:24px;border-bottom:1px solid #eef0e9}section:last-child{border:0}.section-title{display:flex;align-items:center;gap:10px;margin-bottom:18px}.section-title>span{font-size:12px;color:#829689;border:1px solid #e0e8df;border-radius:50%;padding:4px}h2{font-size:17px;margin:0}label{display:block;font-size:14px;margin-bottom:10px}input[type=text],input:not([type]),select{width:100%;padding:12px;border:1px solid #dce2d9;border-radius:8px;background:#fafbf8;color:#273a36}.input-row{display:flex;gap:8px}.input-row input{min-width:0;font-size:23px}.input-row button{white-space:nowrap}.muted{font-size:13px;color:#7f877d;line-height:1.8}.characters{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.characters button{font-size:21px;padding:10px 0;font-family:"KaiTi","Microsoft YaHei",sans-serif}.characters button.active{background:#285646;color:#fff;border-color:#285646}.check{margin-top:19px;display:flex;align-items:center;gap:7px}.check input{accent-color:#285646;width:17px;height:17px}.source{background:#faf9f1}.source strong{font-size:14px;color:#87703f}.source p{font-size:13px;line-height:1.9;color:#91856c;margin-bottom:0}.editor{min-width:0;background:white;border:1px solid #dfe4dc;border-radius:16px;overflow:hidden}.preview-bar{display:flex;justify-content:space-between;padding:18px 24px;font-size:13px;color:#879186}.preview-bar span:first-child{font-weight:600;color:#475d50}.preview-bar i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#609775;margin-right:8px}canvas{display:block;width:100%;height:auto;background:#faf7ee}.transport{display:flex;align-items:center;gap:9px;padding:20px 24px 13px;flex-wrap:wrap}.primary{background:#285646;color:#fff;border-color:#285646}.primary:hover{background:#1f4537}#time{font-size:13px;color:#7b857c;margin-right:auto}#export{color:#856731;background:#fbf6e9;border-color:#e9dfc6}progress{display:block;width:calc(100% - 48px);height:5px;border:0;border-radius:8px;margin:0 24px;accent-color:#426e52}progress::-webkit-progress-bar{background:#eef1e8}progress::-webkit-progress-value{background:#426e52}#status{font-size:13px;color:#7b847b;line-height:1.7;margin:13px 24px 20px;min-height:22px}.lesson{border-top:1px solid #ecede7;padding:23px 24px}.facts{display:grid;grid-template-columns:repeat(3,1fr);background:#f7f9f4;border-radius:10px;padding:18px}.facts>div{padding-left:18px;border-right:1px solid #e1e6dc}.facts>div:first-child{padding-left:0}.facts>div:last-child{border:0}.facts small{display:block;color:#899185;font-size:13px;margin-bottom:8px}.facts strong{font-size:21px;font-weight:500}.stroke-area{margin-top:22px}#strokes{display:flex;gap:7px;flex-wrap:wrap}#strokes button{font-size:14px;padding:8px 12px}.language{margin-top:21px}.language p{display:flex;gap:22px;font-size:14px;line-height:1.8;margin:10px 0}.language span{color:#8b9286;white-space:nowrap}.language b{font-weight:400}footer{font-size:12px;color:#8f968b;line-height:1.8;padding:22px 0}footer a{color:#69856d;margin-left:15px}@media(max-width:950px){main{padding:24px}.workspace{grid-template-columns:230px 1fr;gap:15px}section{padding:18px}.transport{padding:15px}#time{display:none}.heading>p{display:none}}@media(max-width:700px){header{padding:0 20px;height:72px}.version{display:none}.workspace{display:flex;flex-direction:column}aside{display:grid;grid-template-columns:1fr 1fr}.source{grid-column:1/-1}.heading{margin-bottom:20px}main{padding:23px 14px}.tag{font-size:12px}.transport button{padding:10px;font-size:13px}.preview-bar{padding:15px}.facts strong{font-size:18px}.facts>div{padding-left:10px}.lesson{padding:20px}.source p{margin-top:5px}.source{padding:14px 18px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.facts{grid-template-columns:repeat(4,1fr)}.speaker{padding:5px 8px;border:0;background:#e6eee2;font-size:18px;vertical-align:middle}@media(max-width:760px){.facts{grid-template-columns:repeat(2,1fr);gap:18px}.facts>div:nth-child(3){padding-left:0}.facts>div:nth-child(2){border:0}}

@font-face{font-family:LessonKaiti;src:url("kaiti/lesson-kaiti.woff2") format("woff2");font-display:swap}.characters button,.language b,.facts strong,#strokes button{font-family:LessonKaiti,"KaiTi","Microsoft YaHei",sans-serif}.characters button{font-size:26px}.language b{font-size:20px}.facts strong{font-size:23px}#strokes button{font-size:18px}

.library-filters{margin-top:18px}.library-filters label{margin-top:13px}.characters{max-height:340px;overflow-y:auto;padding:3px}.characters button{position:relative}.characters button.can-write:after{content:"";position:absolute;width:4px;height:4px;background:#ce9b55;border-radius:50%;bottom:4px;left:calc(50% - 2px)}.pinyin-sample{display:inline-block;width:125px;max-width:100%;vertical-align:middle}#pronunciation-row{margin-bottom:18px}#curriculum-position{margin-top:0}.facts>div:first-child{min-width:0}@media(max-width:700px){aside{display:block}.characters{grid-template-columns:repeat(6,1fr);max-height:220px}}

/* 儿童练习模式：先看图标和汉字，再由大人打开高级设置 */
body{background:#fff9ed;color:#24453b}header{background:#fffdf7}.brand-mark{background:#ef8b5b;border-radius:14px;transform:rotate(-4deg)}.brand{font-size:25px}.heading{margin-bottom:20px}.heading h1{color:#285646;font-size:36px}.eyebrow{color:#e2764b;font-weight:700;letter-spacing:1px}.heading>p{color:#6d8772;font-size:17px}.workspace{gap:20px}aside,.editor{border-color:#eadfca;box-shadow:0 8px 24px rgba(151,112,55,.08)}section{padding:22px}.section-title{margin-bottom:12px}.section-title>span{font-size:22px;border:0;padding:0}h2{font-size:20px}.child-hint{margin:0 0 13px;color:#e2764b;font-size:16px;font-weight:700}.characters{grid-template-columns:repeat(4,1fr);gap:10px;max-height:390px;padding:3px}.characters button{min-height:62px;border:2px solid #f1dfbd;border-radius:16px;background:#fffdf8;color:#285646;font-size:30px;box-shadow:0 3px 0 #f0e5d2;transition:transform .15s,box-shadow .15s,background .15s}.characters button:nth-child(3n){border-color:#cce7df}.characters button:nth-child(3n+1){border-color:#f4d5c6}.characters button:hover{transform:translateY(-2px);box-shadow:0 5px 0 #ead6b6}.characters button.active{background:#2b806c;color:#fff;border-color:#2b806c;box-shadow:0 4px 0 #1f604f}.characters button.can-write:after{width:7px;height:7px;bottom:6px}.adult-settings{margin-top:15px;border-top:1px dashed #eadfca;padding-top:12px}.adult-settings summary{cursor:pointer;color:#718779;font-size:14px;font-weight:700;list-style:none}.adult-settings summary::-webkit-details-marker{display:none}.adult-settings summary:before{content:'＋';display:inline-grid;place-items:center;width:22px;height:22px;margin-right:6px;border-radius:50%;background:#edf3e8;color:#4f7960}.adult-settings[open] summary:before{content:'−'}.adult-settings section{padding:17px 0 0;border:0}.transport{padding:20px 24px 14px;gap:12px}.transport button{min-height:52px;border-radius:15px;font-size:17px;padding:12px 20px}.transport .primary{background:#ef8058;border-color:#ef8058;box-shadow:0 4px 0 #d86543}.transport .primary:hover{background:#e97048}.transport #stop{background:#fff3e7;border-color:#f1d3b5}.transport #export{margin-left:auto;background:#e9f5ed;border-color:#cce5d2;color:#3b6c4d}.speaker{min-width:48px;min-height:42px;border-radius:13px;background:#ffd36e;font-size:24px;box-shadow:0 3px 0 #e6b84e}.speaker:hover{background:#ffca54}.facts{background:#fff8e9;border:1px solid #f1e4c9}.preview-bar{background:#fffdf7}.preview-bar span:first-child{color:#e2764b}.preview-bar i{background:#ef8058;width:9px;height:9px}.stroke-area label{color:#718779;font-weight:700}.language span{color:#d27952;font-weight:700}.status{background:#fff8e9}@media(max-width:700px){.heading h1{font-size:30px}.characters{grid-template-columns:repeat(5,1fr);gap:8px}.characters button{min-height:54px;font-size:27px}.transport{padding:16px}.transport button{flex:1;padding:11px 8px;font-size:15px}.transport #export{flex-basis:100%;margin-left:0}}
/* 响应式宽度：让汉字选择区在桌面端更宽，在小屏幕上使用可用全宽 */
.workspace{grid-template-columns:minmax(320px,26vw) minmax(0,1fr)}
aside{min-width:0}
.characters{grid-template-columns:repeat(4,minmax(0,1fr))}
.characters button.reference-character img{display:block;width:38px;height:34px;object-fit:contain;margin:auto}.characters button.reference-character.active img{filter:brightness(0) invert(1)}
@media(max-width:950px){.workspace{grid-template-columns:minmax(285px,34vw) minmax(0,1fr)}}
@media(max-width:700px){main{padding-left:8px;padding-right:8px}.workspace{width:100%}aside{width:100%}.characters{grid-template-columns:repeat(5,minmax(0,1fr))}}
.site-nav{display:flex;align-items:center;gap:22px}.site-nav a{color:#285646;text-decoration:none;font-weight:700}.public-info{margin:32px 0 0;padding:28px 32px;background:#fffdf7;border:1px solid #eadfca;border-radius:18px;box-shadow:0 8px 24px rgba(151,112,55,.06)}.public-info h2{font-size:25px;color:#285646;margin:0 0 14px}.public-info>p:not(.eyebrow){max-width:880px;font-size:16px;line-height:1.9;color:#536b61}.public-info ul{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0;margin:20px 0;list-style:none}.public-info li{padding:15px 18px;background:#fff8e9;border:1px solid #f1e4c9;border-radius:12px;line-height:1.7;color:#425e53}.membership-link{display:inline-block;padding:12px 20px;border-radius:13px;background:#285646;color:#fff;text-decoration:none;font-weight:700}@media(max-width:700px){.site-nav .version{display:none}.public-info{padding:22px 18px}.public-info h2{font-size:22px}.public-info ul{grid-template-columns:1fr}}
.book-picker-button{padding:9px 14px;border:2px solid #f0c38f;border-radius:13px;background:#fff8e9;color:#8c5b2c;box-shadow:0 3px 0 #f0dfc6}.book-picker-button:hover{background:#fff0d7}.book-picker{width:min(760px,calc(100vw - 28px));max-height:min(780px,calc(100vh - 28px));padding:28px;border:1px solid #ead6b9;border-radius:24px;background:#fffdf8;color:#24453b;box-shadow:0 22px 70px rgba(72,48,20,.22)}.book-picker::backdrop{background:rgba(36,57,49,.42);backdrop-filter:blur(3px)}.book-picker-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.book-picker-heading .eyebrow{margin-bottom:5px}.book-picker-heading h2{font-size:30px;color:#285646}.dialog-close{width:44px;height:44px;padding:0;border-radius:50%;font-size:28px;line-height:1;background:#fff3e7;color:#9b6a3e}.book-picker-intro{margin:16px 0 22px;color:#65796f;line-height:1.8}.book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.book-option{display:flex;align-items:center;gap:13px;min-height:118px;padding:13px;text-align:left;border:2px solid #eadfca;border-radius:17px;background:#fff}.book-option.current{border-color:#2b806c;background:#eff8f3;box-shadow:0 4px 0 #cfe5db}.book-option.current:hover{background:#e6f4ed}.book-option:disabled{opacity:.68;cursor:not-allowed}.book-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;width:62px;height:88px;flex:none;border-radius:7px 12px 12px 7px;background:linear-gradient(145deg,#f58860,#e46b48);color:white;box-shadow:3px 4px 0 #f1cfb9;font-style:normal}.book-cover small{font-size:12px}.book-cover strong{font-size:28px;line-height:1.15}.book-cover em{font-size:11px;font-style:normal}.book-option.upcoming .book-cover{background:linear-gradient(145deg,#9abaae,#6f9a8a);box-shadow:3px 4px 0 #d7e5df}.book-option-copy{display:flex;min-width:0;flex-direction:column;gap:8px}.book-option-copy strong{font-size:17px}.book-option-copy small{color:#7d8d85;font-weight:500}.book-option.current .book-option-copy small{color:#2b806c;font-weight:700}.book-picker-message{margin:20px 0 0;padding:12px 15px;border-radius:12px;background:#fff8e9;color:#775f39;line-height:1.7}@media(max-width:760px){header{gap:10px}.brand{font-size:21px}.brand-mark{width:36px;height:36px}.site-nav{gap:8px}.site-nav>a{display:none}.book-picker-button{padding:9px 11px;font-size:14px}.book-picker{padding:20px}.book-picker-heading h2{font-size:25px}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.book-option{min-height:101px;padding:10px;gap:10px}.book-cover{width:50px;height:74px}.book-cover strong{font-size:23px}.book-option-copy strong{font-size:15px}}@media(max-width:420px){.book-picker{padding:16px}.book-grid{grid-template-columns:1fr 1fr}.book-option{align-items:stretch;flex-direction:column;min-height:145px}.book-cover{width:48px;height:68px}.book-option-copy{gap:3px}}
/* 大人设置展开后的内容与边框保持呼吸空间 */
.adult-settings>summary{padding:0 24px}
.adult-settings>section{padding:18px 24px 24px}
@media(max-width:700px){.adult-settings>summary{padding:0 18px}.adult-settings>section{padding:18px 18px 22px}}
/* 收起状态保留足够底部留白，避免设置栏被压扁 */
.adult-settings:not([open]){padding-bottom:18px}
.adult-settings>summary{min-height:32px;display:flex;align-items:center}
@media(max-width:700px){.adult-settings:not([open]){padding-bottom:20px}}
.theme-art{display:flex;align-items:center;gap:16px;padding:14px 24px;background:#fffaf0;border-top:1px solid #f1e5cf;border-bottom:1px solid #f1e5cf}.theme-art img{display:block;width:180px;height:96px;object-fit:cover;border-radius:14px;border:2px solid #f2d5b6}.theme-art div{display:flex;flex-direction:column;gap:6px}.theme-art strong{font-size:15px;color:#e2764b}.theme-art span{font-size:18px;color:#416c59;font-weight:700}@media(max-width:700px){.theme-art{padding:12px 16px;gap:12px}.theme-art img{width:128px;height:78px}.theme-art span{font-size:16px}}/* Focus mode: let children concentrate on the selected character lesson. */
.back-to-library{display:none;margin-left:auto;background:#fff3e7;border-color:#f1d3b5;color:#9b6a3e;padding:9px 14px;border-radius:12px;font-size:14px}
body.focus-mode .workspace{grid-template-columns:minmax(0,1fr)}
body.focus-mode aside{display:none}
body.focus-mode .back-to-library{display:inline-flex;align-items:center;gap:4px}
.theme-art{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:20px 24px 22px;background:#fffaf0;border-top:1px solid #f1e5cf;border-bottom:1px solid #f1e5cf}
.theme-art img{display:block;width:100%;height:260px;object-fit:cover;border-radius:18px;border:2px solid #f2d5b6;box-shadow:0 5px 14px rgba(151,112,55,.12)}
.theme-art div{display:flex;align-items:baseline;gap:10px;padding:0 4px}
.theme-art strong{font-size:16px;color:#e2764b;white-space:nowrap}
.theme-art span{font-size:21px;color:#416c59;font-weight:700}
@media(max-width:700px){.preview-meta{display:none}.back-to-library{font-size:13px;padding:8px 10px}.theme-art{padding:14px 16px 17px}.theme-art img{height:190px;border-radius:14px}.theme-art div{gap:8px}.theme-art span{font-size:17px}}
/* Preserve the full 3:2 illustration instead of cropping the scene into a banner. */
.theme-art img{width:min(100%,1100px);height:auto;aspect-ratio:3 / 2;object-fit:contain;align-self:center}
@media(max-width:700px){.theme-art img{width:100%;height:auto;aspect-ratio:3 / 2}}
/* Give the teaching panel priority on desktop. */
.lesson-source{display:flex;align-items:flex-start;gap:12px;padding:18px 24px;background:#f0f6e9;border-top:1px solid #e0e9d6;border-bottom:1px solid #e0e9d6}
.lesson-source-icon{font-size:28px;line-height:1.4;flex:none}
.lesson-source-copy{min-width:0;flex:1}
.lesson-source-copy strong{display:block;color:#285646;font-size:18px;line-height:1.5}
.lesson-source-copy p{margin:5px 0 0;color:#41614f;font-size:17px;line-height:1.8;overflow-wrap:anywhere}
.learning-requirement{flex:none;border-radius:20px;padding:5px 10px;background:#fff7e5;color:#815f28;font-size:13px;line-height:1.5}
@media(max-width:700px){.lesson-source{padding:15px 16px;gap:9px;flex-wrap:wrap}.lesson-source-icon{font-size:24px}.lesson-source-copy{flex-basis:calc(100% - 42px)}.lesson-source-copy strong{font-size:17px}.lesson-source-copy p{font-size:16px}.learning-requirement{margin-left:33px}}
.workspace{grid-template-columns:300px minmax(0,1fr)}
@media(min-width:1200px){.workspace{grid-template-columns:320px minmax(0,1fr)}}
@media(max-width:950px) and (min-width:701px){.workspace{grid-template-columns:260px minmax(0,1fr)}}
.catalog-panel{display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:center;min-height:520px;padding:48px;background:linear-gradient(145deg,#fffdf7,#fff4df)}.catalog-panel[hidden]{display:none}.catalog-character{display:grid;place-items:center;aspect-ratio:1;border:3px solid #e8cda8;border-radius:24px;background:#fff;color:#285646;font:120px/1 LessonKaiti,"KaiTi",serif;box-shadow:0 8px 0 #f0dfc5}.catalog-panel h2{font-size:30px;color:#285646;margin-bottom:18px}.catalog-panel p{font-size:18px;line-height:1.9;color:#536b61}.catalog-note{padding:16px 18px;border-radius:14px;background:#f0f6e9}.book-option.current[aria-current="true"]{outline:4px solid #efb56f;outline-offset:2px}@media(max-width:700px){.catalog-panel{grid-template-columns:1fr;min-height:0;padding:26px 20px}.catalog-character{width:150px;font-size:96px;margin:auto}.catalog-panel h2{font-size:24px}.catalog-panel p{font-size:16px}}

[hidden]{display:none!important}