/* Generated by work/build-local-assets.cjs. Edit the listed component sources. */

/* Component: base.css */
/* Base components and print layout, extracted without reordering. */
:root{--ink:#202d2a;--muted:#71807a;--line:#e4e9e5;--paper:#fff;--bg:#f5f7f4;--green:#215c4b;--mint:#e8f2ec;--orange:#d77849;--gold:#f0b64e}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px 'DM Sans',sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}.han{font-family:'Noto Sans SC',sans-serif}.wrap{max-width:1180px;margin:auto;padding:0 28px}.top{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center}.nav{display:flex;align-items:center;width:100%;gap:34px}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.5px}.logo{width:35px;height:35px;border-radius:11px;background:var(--green);color:white;display:grid;place-items:center;font:20px 'Noto Sans SC'}.navlinks{display:flex;align-items:center;gap:19px;color:#6d7974;font-size:13px}.nav-tab{border:0;background:transparent;padding:9px 0;color:#6d7974;font-size:13px;white-space:nowrap}.nav-tab:hover,.nav-tab.active{color:var(--green)}.nav-tab.active{font-weight:700;border-bottom:2px solid var(--green)}.nav-sentence{border-left:1px solid var(--line);padding-left:17px}.layout.view-practice,.layout.view-vocabulary,.layout.view-worksheet{grid-template-columns:minmax(0,1fr)}#vocabulario,.layout.view-practice #vocabulario,.layout.view-practice .rightcol,.layout.view-vocabulary #practicar,.layout.view-vocabulary .rightcol,.layout.view-worksheet .leftcol{display:none}.layout.view-worksheet .rightcol{display:flex;grid-column:1/-1;width:min(100%,900px);margin:0 auto}.layout.view-worksheet .rightcol>:not(#worksheetPanel){display:none}.layout.view-worksheet #worksheetPanel{width:100%}.vocab-search-wrap{position:relative;margin-bottom:12px}.vocab-search-wrap .dicthead{margin-bottom:0}.vocab-suggestions{position:relative;z-index:5;margin-top:7px;max-height:310px;overflow:auto}.dictsearch:focus{outline:none;border-color:#81a493;box-shadow:0 0 0 3px #215c4b12}.vocab-search-help{font-size:11px;color:#87938d;margin-top:7px}.navlinks .nav-tab:focus-visible{outline:2px solid #81a493;outline-offset:3px;border-radius:3px}.navlinks a{color:inherit;text-decoration:none}.navright{margin-left:auto;display:flex;align-items:center;gap:11px}.lang{border:1px solid var(--line);background:white;padding:9px 12px;border-radius:9px;color:#56635e}.pill{border:0;background:var(--green);color:white;padding:10px 15px;border-radius:9px;font-weight:600}.hero{padding:38px 0 22px;display:flex;justify-content:space-between;align-items:flex-end}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--green);font-weight:700}.hero h1{font-size:36px;letter-spacing:-1.6px;margin:9px 0 8px}.hero p{margin:0;color:var(--muted);font-size:15px}.levelbadge{border:1px solid #dce6de;background:#fff;padding:9px 13px;border-radius:20px;color:#557064;font-size:12px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 335px;gap:20px;padding-bottom:42px}.leftcol,.rightcol{display:flex;flex-direction:column;gap:18px}.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 3px 12px #29372d06}.cardhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.cardhead h2{font-size:16px;margin:0;letter-spacing:-.25px}.tiny{color:var(--muted);font-size:12px}.tabs{display:flex;border-bottom:1px solid var(--line);gap:22px;margin:-2px 0 17px}.practice-mode[hidden]{display:none!important}.sentence-mode .pane-title{margin-bottom:13px}.sentence-mode #frases{max-width:840px;margin-inline:auto}.add-sentence-btn{padding:10px 15px;min-height:42px}.sentence-result{background:#f8faf8;border:1px solid #e4e9e5;border-radius:10px;padding:14px;margin:12px 0}.sentence-result[hidden]{display:none!important}.sentence-source-meaning{margin:10px 0 0;padding:9px 10px;border-radius:8px;background:#eef4ef;color:#35463e;font-size:13px;line-height:1.5}.sentence-source-meaning[hidden]{display:none}.sentence-translation-source{margin:5px 0 10px;color:#687a70;font-size:11px;line-height:1.5}.sentence-translation-source[hidden]{display:none}.sentence-translation-source a{color:#215c4b}.sentence-stroke-section{margin-top:16px;padding-top:15px;border-top:1px solid #e4e9e5;text-align:center}.sentence-stroke-section h3{font-size:13px;margin:0 0 4px}.sentence-stroke-section>p{font-size:11px;color:#718078;margin:0 0 11px}.sentence-stroke-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,104px));justify-content:center;gap:10px}.sentence-stroke-char{position:relative;display:grid;justify-items:center;align-content:start;width:100%;min-height:123px;padding:5px 5px 8px;border:1px solid #e4e9e5;border-radius:10px;background:#fff;box-shadow:0 2px 6px #29372d05}.sentence-stroke-glyph{width:82px;height:82px;display:grid;place-items:center}.sentence-stroke-label{font-size:11px;color:#718078;line-height:1.25}.sentence-stroke-pinyin{font-size:13px;font-weight:700;color:#215c4b;line-height:1.4;margin-top:2px}.sentence-stroke-replay{position:absolute;top:5px;right:5px;border:1px solid #e4e9e5;background:#fff;border-radius:6px;color:#215c4b;width:24px;height:24px}.sentence-segment{grid-template-columns:minmax(52px,max-content) 1fr;align-items:start;gap:11px}.segment-hanzi{border:0;background:#eef4ef;border-radius:6px;padding:4px 8px;line-height:1.35;white-space:nowrap;min-width:52px}.segment-reading{padding-top:4px}.news-context>.tiny,.news-context>.fieldlabel,.news-context>.news-context-row{display:none}.news-context>h3{margin-bottom:7px}.news-context-status{margin:0 0 12px;font-size:12px}.example-loading{display:inline-flex;align-items:center;gap:8px;min-height:34px;color:#53685d;font-weight:600}.example-loading-icon{display:inline-block;font-size:22px;animation:exampleWrite 1.1s ease-in-out infinite}@keyframes exampleWrite{0%,100%{transform:rotate(-12deg) translateY(1px)}50%{transform:rotate(10deg) translateY(-3px)}}.example-retry{border:1px solid #dce7df;background:#fff;color:#215c4b;border-radius:6px;padding:4px 8px;margin-right:5px}@media(prefers-reduced-motion:reduce){.example-loading-icon{animation:none}}.example-actions{min-width:145px}.example-strokes-btn{min-height:32px}.example-actions{display:flex;flex-direction:column;align-items:stretch;gap:6px;flex:none}.example-strokes-btn{border:1px solid #dce7df;background:#f8fbf9;color:#215c4b;border-radius:7px;padding:6px 8px;font-size:11px}.example-strokes-btn:hover,.sentence-stroke-replay:hover{background:#e8f2ec}.sentence-result-top,.example-sentence-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.sentence-result-hanzi{font-size:23px;line-height:1.5}.sentence-audio,.example-sentence-row .audio-btn{flex:none;padding:6px 9px}.example-sentence-row .han{margin:0;font-size:19px;line-height:1.5}.sentence-breakdown{margin-top:8px}.sentence-segment{display:grid;grid-template-columns:40px 1fr;gap:8px;padding:5px 0;border-bottom:1px solid #e4e9e5}.sentence-segment:last-child{border-bottom:0}.segment-hanzi{font-size:17px;color:#215c4b}.segment-reading{font-size:15px;line-height:1.5;color:#35463e}.segment-reading strong{font-weight:700;color:#53685d}.quickchips-label{font-size:11px;font-weight:600;color:#718078;margin:14px 0 7px}.sentence-result .dictionary-link{font-size:13px}.tab{border:0;background:none;padding:0 0 11px;color:#89938f;font-size:13px}.tab.active{color:var(--green);font-weight:700;border-bottom:2px solid var(--green)}.fieldlabel{font-size:12px;color:#62716a;font-weight:600;display:block;margin-bottom:8px}.inputrow{display:flex;gap:9px}.textinput{width:100%;padding:12px 14px;border:1px solid #dce3de;border-radius:10px;outline:none;font-size:17px}.textinput:focus,textarea:focus{border-color:#81a493;box-shadow:0 0 0 3px #215c4b12}.primary{background:var(--green);color:white;border:0;border-radius:10px;padding:0 19px;font-weight:600;white-space:nowrap}.hint{font-size:11px;color:#89938f;margin-top:8px}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.pane{background:#f8faf8;border:1px solid #edf0ed;border-radius:13px;padding:16px}.pane-title{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#87938d;font-weight:700}.wordinfo{display:flex;align-items:center;gap:14px;margin-top:13px}.bigchar{font:68px 'Noto Sans SC';color:var(--green);line-height:1}.wordname{font-size:18px;font-weight:700}.pinyin{font-size:17px;font-weight:600;line-height:1.45;color:#53685d;margin-top:6px}.meaning{font-size:13px;color:#3e4e47;margin-top:6px}.leveltag{display:inline-block;background:#e9f3ed;color:#3e715b;border-radius:5px;font-size:10px;padding:3px 7px;margin-top:8px}.animatebox{min-height:130px;height:auto;margin:9px auto 6px;display:flex;align-items:flex-start;justify-content:center;gap:10px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 8px}#writerTarget svg{max-width:100%;max-height:100%}.stroke-character{flex:0 0 94px;display:flex;flex-direction:column;align-items:center;gap:4px}.stroke-glyph{width:94px;height:94px}.stroke-label{font-size:12px;color:var(--muted)}.controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.iconbtn{border:1px solid var(--line);background:white;border-radius:7px;padding:7px 10px;color:#53645c;font-size:12px}.speed{border:1px solid var(--line);background:white;border-radius:7px;padding:7px;color:#53645c;font-size:11px}.dicthead{display:flex;gap:10px;align-items:center;margin-bottom:13px}.dictsearch{flex:1;padding:9px 11px;border-radius:8px;border:1px solid var(--line);font-size:13px}.filter{border:1px solid var(--line);background:white;padding:8px;border-radius:8px;color:#55635d;font-size:12px}.wordlist{max-height:380px;overflow:auto}.load-more-wrap{text-align:center;padding-top:12px}.load-more-wrap button[hidden]{display:none}.dictionary-link{display:inline-block;margin-top:8px;color:#215c4b;font-size:12px;text-decoration:none}.dictionary-link:hover{text-decoration:underline}.audio-btn{border:1px solid #dce7df;background:#fff;border-radius:7px;padding:3px 6px;font-size:12px;vertical-align:middle}.word-pos{font-size:11px;color:#718078;margin-top:5px}.word-example{font-size:12px;color:#4f6158;background:#eef4ef;border-radius:7px;padding:7px 9px;margin-top:7px;line-height:1.5}.previewrow{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin:3px 0 9px}.preview-meta{display:block;flex-basis:100%;font:10px "DM Sans",sans-serif;color:#7d8982;margin:0 0 2px 3px}.previewcell[data-grid="Mizi"]{background-image:linear-gradient(to right,transparent 49.5%,#d5ddd7 49.5%,#d5ddd7 50.5%,transparent 50.5%),linear-gradient(to bottom,transparent 49.5%,#d5ddd7 49.5%,#d5ddd7 50.5%,transparent 50.5%),linear-gradient(45deg,transparent 49.5%,#d5ddd7 49.5%,#d5ddd7 50.5%,transparent 50.5%),linear-gradient(-45deg,transparent 49.5%,#d5ddd7 49.5%,#d5ddd7 50.5%,transparent 50.5%)}.previewcell[data-grid="huizige"]{background-image:linear-gradient(to right,transparent 49.5%,#d5ddd7 49.5%,#d5ddd7 50.5%,transparent 50.5%),linear-gradient(to bottom,transparent 49.5%,#d5ddd7 49.5%,#d5ddd7 50.5%,transparent 50.5%);box-shadow:inset 0 0 0 5px #fbfcfb,inset 0 0 0 6px #d5ddd7}.previewcell[data-grid="Jiugongge"]{background-image:linear-gradient(to right,transparent 32%,#d5ddd7 32%,#d5ddd7 34%,transparent 34%,transparent 66%,#d5ddd7 66%,#d5ddd7 68%,transparent 68%),linear-gradient(to bottom,transparent 32%,#d5ddd7 32%,#d5ddd7 34%,transparent 34%,transparent 66%,#d5ddd7 66%,#d5ddd7 68%,transparent 68%)}.previewcell[data-grid="none"]{background:none;border-color:transparent}#featuredLevel{display:none}.worditem{display:flex;gap:11px;align-items:center;border-bottom:1px solid #f0f2f0;padding:10px 3px;cursor:pointer}.worditem:hover{background:#fbfcfb}.wordthumb{font:28px 'Noto Sans SC';width:39px;text-align:center;color:var(--green)}.worddesc{flex:1}.worddesc strong{font-size:13px}.worddesc small{display:block;color:#84918b;margin-top:2px;font-size:11px}.addword{border:1px solid #dce7df;border-radius:7px;background:#f7fbf8;color:var(--green);font-size:12px;padding:6px 9px}.sentrow{display:flex;gap:10px;margin-bottom:12px}.sentrow input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:9px}.sentence-preview{background:#f8faf8;border:1px dashed #cbd8ce;border-radius:10px;min-height:62px;padding:14px;font:22px 'Noto Sans SC';line-height:1.6}.sentence-preview small{display:block;font:12px 'DM Sans';color:#84918b;margin-top:4px}.quickchips{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.chip{border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 11px;color:#5c6a64;font-size:11px;text-align:left;line-height:1.4;white-space:normal}.chip-pinyin{display:block;font-size:12px;color:#718078;line-height:1.4}.chip-meaning{display:block;font-size:11px;color:#53645c;line-height:1.4}.optionrow{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f2f0;font-size:13px;color:#54625c}.optionrow:last-child{border:0}.optionrow select{border:1px solid var(--line);border-radius:7px;padding:7px;color:#475950;background:white;font-size:12px}.toggle{accent-color:var(--green)}.adslot{height:102px;border:1px dashed #d9dfda;border-radius:12px;background:#fbfcfb;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#a0aaa4;gap:7px}.adslot b{font-size:9px;letter-spacing:1.2px;font-weight:500}.adslot span{font-size:12px}.printbtn{width:100%;padding:13px;border-radius:10px;border:0;background:var(--orange);color:white;font-weight:700}.savebtn{width:100%;padding:11px;border-radius:10px;border:1px solid #dce5de;background:white;color:#486055;font-weight:600;margin-top:9px}.tip{font-size:12px;color:#79867f;line-height:1.55}.worksheet-preview{margin-top:14px;padding:13px;background:#fbfcfb;border:1px solid var(--line);border-radius:10px;min-height:75px}.previewtitle{display:flex;justify-content:space-between;font-size:11px;color:#607168;font-weight:700;margin-bottom:9px}.previewtitle span{font-weight:400;color:#8a958e}.previewphrase{font-size:17px;padding:6px 0 10px;border-bottom:1px solid var(--line);margin-bottom:8px}.previewcell{display:inline-grid;place-items:center;border:1px solid #d4ddd6;background-image:linear-gradient(to right,transparent 49.5%,var(--grid-color) 49.5%,var(--grid-color) 50.5%,transparent 50.5%),linear-gradient(to bottom,transparent 49.5%,var(--grid-color) 49.5%,var(--grid-color) 50.5%,transparent 50.5%);width:34px;height:34px;margin:2px;color:#96a29b;font-size:20px}.foot{padding:20px 0 32px;border-top:1px solid var(--line);color:#8a948f;font-size:11px;text-align:center}.print-only{display:none}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#233d33;color:white;padding:11px 18px;border-radius:9px;font-size:13px;opacity:0;transition:.2s;pointer-events:none}.toast.show{opacity:1}
@media(max-width:850px){.layout{grid-template-columns:1fr}.rightcol{display:grid;grid-template-columns:1fr 1fr}.adslot{grid-column:1/-1}.navlinks{display:flex;gap:14px;overflow-x:auto;max-width:100%;scrollbar-width:thin}.hero h1{font-size:30px}}@media(max-width:570px){.wrap{padding:0 15px}.top{height:auto;min-height:76px}.nav{flex-wrap:wrap}.navlinks{order:3;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px;max-width:100%;padding:0 0 4px;overflow:visible}.nav-tab{font-size:12px;padding:8px 0;text-align:left}.nav-sentence{padding-left:0;border-left:0}.hero{align-items:flex-start;gap:15px;flex-direction:column}.hero h1{font-size:28px}.workspace{grid-template-columns:1fr}.rightcol{display:flex}.nav{gap:12px}.navright .lang{display:none}.card{padding:17px}.inputrow{flex-direction:column}.primary{padding:11px}}
@media print{body{background:white}.top,.hero,.leftcol,.rightcol,.foot,.no-print{display:none!important}.wrap{max-width:none;padding:0}.layout{display:block;padding:0}.print-only{display:block!important}.sheet{padding:0;color:#222}.print-sheet-header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #777;padding-bottom:1mm;margin-bottom:2mm}.sheet h1{font:700 14pt Arial;margin:0}.print-sheet-header a{font:9pt Arial;color:#333;text-decoration:none}.sheet .meta{font:10pt Arial;color:#555;margin-bottom:6mm}.print-word-block{margin:0 0 4mm;break-inside:auto}.printchar-block{display:block;margin:0 0 1mm;break-inside:avoid}.worksheet-page:not(:last-child){break-after:page}.worksheet-page>.print-sheet-header{margin-top:0}.print-character{font:14pt 'Noto Sans SC';text-align:center;padding-top:1mm}.print-character-grids{min-width:0}.practice-grid-row{display:grid;grid-template-columns:repeat(var(--worksheet-columns),var(--cell-size));column-gap:1mm;margin:0 0 .25mm}.practice-grid-row .gridcell{box-sizing:border-box}.printline{display:flex;gap:2mm;margin-bottom:5mm;align-items:center}.printline .word{width:26mm;font:15pt 'Noto Sans SC';text-align:center}.gridcell{width:21mm;height:21mm;border:1px solid #b7b7b7;position:relative;background-image:linear-gradient(to right,transparent 49.6%,var(--grid-color) 49.6%,var(--grid-color) 50.4%,transparent 50.4%),linear-gradient(to bottom,transparent 49.6%,var(--grid-color) 49.6%,var(--grid-color) 50.4%,transparent 50.4%)}.gridcell::after{content:attr(data-char);position:absolute;inset:0;display:grid;place-items:center;font:17pt 'Noto Sans SC';color:#c8c8c8}.gridcell[data-grid="Mizi"]{background-image:linear-gradient(to right,transparent 49.6%,var(--grid-color) 49.6%,var(--grid-color) 50.4%,transparent 50.4%),linear-gradient(to bottom,transparent 49.6%,var(--grid-color) 49.6%,var(--grid-color) 50.4%,transparent 50.4%),linear-gradient(45deg,transparent 49.7%,var(--grid-color) 49.7%,var(--grid-color) 50.3%,transparent 50.3%),linear-gradient(-45deg,transparent 49.7%,var(--grid-color) 49.7%,var(--grid-color) 50.3%,transparent 50.3%)}.gridcell[data-grid="simple"]{background-image:none}.print-block{break-inside:avoid}.print-meta{font:9pt Arial;color:#777;margin:1mm 0}.previewcell[data-grid="Mizi"]{background-image:linear-gradient(to right,transparent 49%,#ddd 49%,#ddd 51%,transparent 51%),linear-gradient(to bottom,transparent 49%,#ddd 49%,#ddd 51%,transparent 51%),linear-gradient(45deg,transparent 49.5%,#ddd 49.5%,#ddd 50.5%,transparent 50.5%),linear-gradient(-45deg,transparent 49.5%,#ddd 49.5%,#ddd 50.5%,transparent 50.5%)}.previewcell[data-grid="simple"]{background-image:none}.gridcell:first-of-type::after{color:#888}#printSentence{font:15pt 'Noto Sans SC';border-bottom:1px solid #aaa;padding:3mm 0;margin-bottom:4mm}#printSentence:empty{display:none}.sheet{break-after:avoid}}
.previewcell[data-grid="Mizi"]{background-image:linear-gradient(to right,transparent 49.5%,var(--grid-color) 49.5%,var(--grid-color) 50.5%,transparent 50.5%),linear-gradient(to bottom,transparent 49.5%,var(--grid-color) 49.5%,var(--grid-color) 50.5%,transparent 50.5%),linear-gradient(45deg,transparent 49.5%,var(--grid-color) 49.5%,var(--grid-color) 50.5%,transparent 50.5%),linear-gradient(-45deg,transparent 49.5%,var(--grid-color) 49.5%,var(--grid-color) 50.5%,transparent 50.5%)}.previewcell[data-grid="huizige"]{background-image:linear-gradient(to right,transparent 49.5%,var(--grid-color) 49.5%,var(--grid-color) 50.5%,transparent 50.5%),linear-gradient(to bottom,transparent 49.5%,var(--grid-color) 49.5%,var(--grid-color) 50.5%,transparent 50.5%);box-shadow:inset 0 0 0 5px #fbfcfb,inset 0 0 0 6px var(--grid-color)}.previewcell[data-grid="Jiugongge"]{background-image:linear-gradient(to right,transparent 32%,var(--grid-color) 32%,var(--grid-color) 34%,transparent 34%,transparent 66%,var(--grid-color) 66%,var(--grid-color) 68%,transparent 68%),linear-gradient(to bottom,transparent 32%,var(--grid-color) 32%,var(--grid-color) 34%,transparent 34%,transparent 66%,var(--grid-color) 66%,var(--grid-color) 68%,transparent 68%)}.previewcell[data-grid="simple"]{background-image:none}@media print{.toast{display:none!important}}.hanzi-suggestions{display:grid;gap:4px;margin-top:7px;max-height:250px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:6px;background:#fff;box-shadow:0 6px 18px #24362d12}.hanzi-suggestions[hidden]{display:none!important}.hanzi-suggestion{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:0;border-radius:7px;padding:8px 10px;text-align:left;background:white;color:var(--ink)}.hanzi-suggestion:hover,.hanzi-suggestion:focus{background:#f2f7f3;outline:none}.hanzi-suggestion-main{font-size:16px}.hanzi-suggestion-meaning{font-size:13px;color:#53685d}.hanzi-suggestion small{font-size:11px;color:#89938f;white-space:nowrap}.handwriting-panel{margin:10px 0 14px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#f8faf8}.handwriting-panel[hidden]{display:none}.handwriting-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.handwriting-canvas{display:block;width:min(100%,280px);height:auto;aspect-ratio:1;margin:10px auto;border:1px solid #b9c9c0;border-radius:8px;background-color:white;background-image:linear-gradient(to right,transparent 49.6%,#dce6df 49.6%,#dce6df 50.4%,transparent 50.4%),linear-gradient(to bottom,transparent 49.6%,#dce6df 49.6%,#dce6df 50.4%,transparent 50.4%);touch-action:none}.handwriting-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.handwriting-results{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.handwriting-candidate{min-width:42px;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:22px;color:var(--ink)}.autocomplete{display:grid;gap:4px;margin-top:6px;padding:5px;border:1px solid var(--line);border-radius:10px;background:white;box-shadow:0 6px 18px #24362d12}.autocomplete[hidden]{display:none}.autocomplete button{padding:8px;border:0;border-radius:7px;background:white;text-align:left;color:var(--ink)}.autocomplete button:hover,.autocomplete button:focus{background:#f2f7f3}.autocomplete small{display:block;color:#64766d;font-size:12px}.news-context{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff}.news-context h3{margin:0 0 5px}.news-context-row{display:flex;gap:8px;align-items:stretch}.news-context-row input{flex:1;min-width:0}.news-context-results{display:grid;gap:10px;margin-top:12px}.news-context-item{padding:11px;border:1px solid var(--line);border-radius:9px;background:#f9fbf9}.news-context-item p{margin:0 0 7px;font-size:16px;line-height:1.6}.example-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:8px 0}.example-details small{display:block;color:#687a70;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.example-pinyin,.example-spanish{font-size:14px;line-height:1.5;color:#24362d}.news-context-item small{color:#62736b}.news-context-item a{font-size:13px;color:#17634d}.news-context-status{margin-top:8px;color:#64766d;font-size:13px}.segment-hint{font-size:12px;color:#60766a;margin:8px 0 4px}.segment-hanzi{cursor:pointer;transition:background .15s,box-shadow .15s}.segment-hanzi:hover,.segment-hanzi:focus-visible{background:#dcece2;box-shadow:0 0 0 2px #80a791;outline:none}.segment-click-icon{font:11px "DM Sans",sans-serif;margin-left:5px;color:#718078}.sentence-stroke-grid{grid-template-columns:repeat(auto-fit,minmax(calc(var(--sentence-glyph-size,94px) + 14px),max-content))}.sentence-stroke-char{min-width:calc(var(--sentence-glyph-size,94px) + 14px)}.sentence-stroke-glyph{width:var(--sentence-glyph-size,94px);height:var(--sentence-glyph-size,94px)}.controls{flex-wrap:wrap}.controls #strokeSize{max-width:145px}.sentence-stroke-controls{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 12px;color:#60766a;font-size:12px}.worksheet-character-search{padding:4px 0 16px;border-bottom:1px solid var(--line)}.worksheet-search-row{display:flex;gap:9px;align-items:stretch}.worksheet-search-row .textinput{min-width:0}.worksheet-search-row .primary{min-height:44px}.worksheet-character-details{margin-top:12px;padding:13px;border:1px solid var(--line);border-radius:11px;background:#f8faf8}.worksheet-character-details[hidden]{display:none}.worksheet-detail-reading{display:grid;gap:4px}.worksheet-detail-reading strong{font-size:25px;color:var(--green)}#worksheetSelectedPinyin{font-size:16px;font-weight:700;color:#53685d}.worksheet-detail-reading .meaning{font-size:13px;line-height:1.5;margin:0}.worksheet-writer-target{min-height:112px;justify-content:flex-start;margin:12px 0 5px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.worksheet-writer-target .stroke-character{flex-basis:78px!important}.worksheet-writer-target .stroke-glyph{width:78px!important;height:78px!important}.worksheet-add-button{width:100%;min-height:44px}.advanced-options{margin-top:17px;border:1px solid var(--line);border-radius:10px;background:#fff}.advanced-options>summary{padding:12px 14px;color:var(--green);font-size:13px;font-weight:700;cursor:pointer}.advanced-options-content{padding:0 14px 12px}.worksheet-empty{margin:9px 0 0;padding:12px;border-radius:8px;background:#fff;color:#718078;font-size:12px;line-height:1.5}.preview-group{position:relative;padding:3px 25px 6px 0}.remove-worksheet-item{position:absolute;top:0;right:0;border:1px solid var(--line);border-radius:7px;background:#fff;color:#53685d;font-size:12px;padding:4px 8px;cursor:pointer}.remove-worksheet-item:hover{color:#9a4935;border-color:#d99a7d}.printbtn:disabled,.savebtn:disabled{opacity:.5;cursor:not-allowed}@media(max-width:600px){.controls #strokeSize{max-width:125px}}.worksheet-character-details{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start;margin-top:8px;padding:10px}.worksheet-character-details[hidden]{display:none}.worksheet-writer-target{grid-column:2;grid-row:1;min-height:80px;margin:0;border:0;gap:6px}.worksheet-writer-target .stroke-glyph{width:70px!important;height:70px!important}.worksheet-add-button{grid-column:1/-1;min-height:40px}.worksheet-preview{margin-top:10px;padding:10px;min-height:0}.preview-character-group{display:inline-block;vertical-align:top;margin:4px 14px 0 0}.previewrow{margin:3px 0 5px}.remove-worksheet-item{border-color:#efb5b5;background:#fff5f5;color:#b4232c}.remove-worksheet-item:hover{background:#ffe5e5}.worksheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.worksheet-actions .savebtn{margin:0}.worksheet-actions .printbtn,.worksheet-actions .savebtn{min-height:42px;padding:9px}@media(max-width:640px){.worksheet-character-details{grid-template-columns:1fr}.worksheet-writer-target{grid-column:1;grid-row:auto}.worksheet-actions{grid-template-columns:1fr}}.preview-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;padding:6px 0}.preview-group>strong,.preview-group>small{grid-column:1/-1}.preview-character-group{display:block;min-width:0;margin:0;padding:7px 8px;border:1px solid var(--line);border-radius:8px}.preview-character-group>small{display:block;color:#65746c}@media(max-width:680px){.preview-group{grid-template-columns:1fr}}.layout.view-dictation{grid-template-columns:minmax(0,1fr)}.layout.view-dictation .leftcol,.layout.view-dictation .rightcol{display:none}.layout.view-dictation #dictationPanel{display:block;grid-column:1/-1;width:min(100%,900px);margin:0 auto}#dictationPanel[hidden]{display:none!important}.dictation-intro{font-size:14px;color:#596b62;margin:3px 0 18px;line-height:1.5}.dictation-add-row{display:flex;gap:9px}.dictation-add-row input{flex:1;min-width:0}.dictation-add-row button{min-width:92px}.dictation-import{border:0;background:none;padding:8px 0;color:#23604e;text-decoration:underline;cursor:pointer;font-size:12px}.dictation-choices{display:flex;gap:7px;flex-wrap:wrap;min-height:36px;margin:8px 0 12px}.dictation-choice{border:1px solid var(--line);border-radius:8px;background:#f8faf8;padding:5px 8px;color:#204f42;cursor:pointer;font-size:19px}.dictation-choice span{font:12px Arial;color:#8b3c3c;margin-left:5px}.dictation-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:13px;border-top:1px solid var(--line)}.dictation-controls>span{margin-right:auto;color:#607168;font-size:13px}.dictation-controls label{font-size:13px;color:#607168}.dictation-controls select{margin-left:5px;border:1px solid var(--line);border-radius:7px;background:white;padding:6px}.dictation-message{font-size:13px;color:#607168;min-height:20px;margin:10px 0 0}.dictation-round{border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px;background:#fbfcfb}.dictation-round[hidden],.dictation-summary[hidden]{display:none!important}.dictation-round-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:17px}.dictation-round-head strong{color:#205646}.dictation-round-head span{font-size:13px;color:#607168}.dictation-round .textinput{width:100%;margin-top:5px}.dictation-round-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.dictation-round-actions button{min-height:38px}.dictation-result{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:10px 12px;border-radius:9px;background:#edf6f1}.dictation-result[hidden]{display:none!important}.dictation-result .han{font-size:34px;color:#205646}.dictation-result span{font-size:14px}.dictation-stop{border:0;background:none;padding:12px 0 0;color:#7b5050;cursor:pointer;text-decoration:underline;font-size:12px}.dictation-summary{border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px;background:#f7faf8}.dictation-summary strong{display:block;font-size:18px;margin-bottom:7px}@media(max-width:640px){.dictation-controls>span{flex-basis:100%}.dictation-round-head{align-items:flex-start;flex-direction:column}}.dictation-controls .primary:disabled,.dictation-add-row .primary:disabled{background:#dfe8e2;color:#718078;cursor:not-allowed;opacity:1}


/* Component: dictado.css */
#dictationSetup[hidden],#dictationRound[hidden],#dictationSummary[hidden],#dictationAnswers[hidden],#dictationSuggestions[hidden]{display:none!important}
.dictation-suggestions{max-height:250px;overflow:auto}
.dictation-suggestion-count{margin:5px 0 0;color:#607168;font-size:11px}
.dictation-suggestion-count[hidden]{display:none}
.dictation-direct-reference{display:grid;gap:5px;margin:8px 0 4px;padding:10px 12px;border:1px solid #d6e5da;border-radius:9px;background:#f6faf7;color:#35483d;font-size:13px}
.dictation-direct-reference[hidden]{display:none}
.dictation-direct-reference strong{color:#215c4b}
.dictation-fallback-preview{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:8px 0 2px;font-size:12px;color:#607168}
.dictation-fallback-preview[hidden]{display:none}
.dictation-fallback-preview button{padding:6px 10px;border:1px solid #cbded1;border-radius:7px;background:#fff;color:#215c4b;font-weight:700}
.dictation-fallback-preview button:hover,.dictation-fallback-preview button:focus-visible{background:#eaf3ed;border-color:#215c4b}
.dictation-suggestions button{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}
.dictation-suggestion-label{min-width:0}
.dictation-recommendation{flex:none;margin-left:auto;border-radius:999px;padding:3px 8px;background:#e7f3eb;color:#215c4b;font-size:11px;font-weight:700;white-space:nowrap}
.dictation-more{display:block;margin:7px 0 3px;padding:3px 0;border:0;background:transparent;color:#b4232c;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.dictation-more[hidden]{display:none}
.dictation-more:hover,.dictation-more:focus-visible{color:#8f1820}
.dictation-manual-link{display:block;margin:5px 0 8px;padding:3px 0;border:0;background:transparent;color:#b4232c;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-align:left}
.dictation-manual-link[hidden]{display:none}
.dictation-phrase-builder{margin:8px 0 12px;padding:12px;border:1px solid #cbded1;border-radius:10px;background:#f8fbf9}
.dictation-phrase-builder[hidden]{display:none}
.dictation-phrase-builder>strong{display:block;margin-bottom:9px;color:#215c4b;font-size:14px}
.dictation-phrase-builder p{margin:8px 0;color:#607168;font-size:13px}
.dictation-step-chosen{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.dictation-step-chosen button{padding:6px 9px;border:1px solid #cbded1;border-radius:7px;background:#fff;color:#215c4b;font-size:12px}
.dictation-step-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:6px;max-height:225px;overflow:auto}
.dictation-step-list button{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px;border:1px solid #dce8df;border-radius:8px;background:#fff;color:#202d2a;text-align:left}
.dictation-step-list button:hover,.dictation-step-list button:focus-visible,.dictation-step-chosen button:hover,.dictation-step-chosen button:focus-visible{border-color:#215c4b;background:#eaf3ed}
.dictation-step-list .han{font-size:21px;color:#215c4b}
.dictation-step-list button span:last-child{font-size:12px}
.dictation-step-expand,.dictation-step-draw{display:block;margin-top:8px;padding:6px 0;border:0;background:transparent;color:#215c4b;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.dictation-step-draw{color:#b4232c}
.dictation-phrase-builder>strong{color:#b4232c}
.dictation-step-row{padding:10px 0;border-top:1px solid #dce8df}
.dictation-step-row>strong{display:block;margin-bottom:7px;color:#215c4b;font-size:13px}
.dictation-step-list button.selected{border-color:#215c4b;background:#e8f2ec;box-shadow:inset 0 0 0 1px #215c4b}
.dictation-step-list .dictation-step-meaning{font-size:11px;color:#52675b}
.dictation-choice-strokes{grid-column:2;grid-row:1 / span 6;display:flex;flex-wrap:wrap;justify-content:flex-end;align-self:center;gap:10px;max-width:min(62vw,620px);margin:0 28px 0 18px}
.dictation-choice-stroke-wrap{position:relative;flex:none;padding:10px;border:1px solid #dce8df;border-radius:9px;background:#fff}
.dictation-choice-stroke{display:block;width:48px;height:48px;background:#fff;font-size:33px;line-height:0;color:#215c4b}
.dictation-choice-stroke svg{display:block;width:100%;height:100%}
.dictation-choice-stroke-replay{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:23px;height:23px;padding:0;border:1px solid #dce8df;border-radius:6px;background:#fff;color:#215c4b;font:15px/1 sans-serif}
.dictation-choice-stroke-replay:disabled{opacity:.5;cursor:default}
.dictation-choice-stroke-replay:hover,.dictation-choice-stroke-replay:focus-visible{border-color:#215c4b;background:#f4faf6}
.dictation-mode-tabs{display:flex;align-items:center;gap:18px;margin:4px 0 17px;border-bottom:1px solid #dce8df;color:#718078;font-size:13px}
.dictation-mode-tabs>span{display:inline-flex;align-items:center;gap:7px;padding:0 0 10px}
.dictation-mode-tabs>.active{border-bottom:2px solid #215c4b;color:#215c4b;font-weight:700}
.dictation-mode-tabs small{font-size:10px;color:#8a9790}
.layout.view-dictation #dictationPanel{width:min(100%,860px);padding:20px}
#dictationPanel .cardhead{margin-bottom:8px}
#dictationPanel .dictation-intro{margin:0 0 13px;font-size:13px}
#dictationPanel .dictation-import{padding:7px 0;margin-bottom:2px}
.dictation-input-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:7px 0 8px}
.dictation-input-tools .dictation-import{margin:0}
.dictation-draw-prompt{display:block;margin:4px 0 12px;padding:4px 0;border:0;background:none;color:#b4232c;font-size:13px;font-weight:700;text-align:left;text-decoration:underline;text-underline-offset:3px}
.dictation-draw-prompt[hidden]{display:none}
.worksheet-handwriting-button{margin:8px 0 0}
.dictation-selection-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:4px 0 8px;font-size:13px}
.dictation-selection-head strong{color:var(--ink)}
.dictation-selection-head span{color:#607168}
.dictation-choices{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0 0 12px;min-height:0}
.dictation-choices:empty{display:none}
.dictation-choice{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;min-width:0;max-width:none;padding:9px 11px;overflow-wrap:anywhere;text-align:left;cursor:default;background:#f9fbf9}
.dictation-choice strong{font-size:19px;line-height:1.25}
.dictation-choice .dictation-choice-reading,.dictation-choice .dictation-choice-meaning{grid-column:1;margin:0;font:13px/1.4 'DM Sans',sans-serif;color:#52675b}
.dictation-choice .dictation-choice-meaning{color:#35463e}
.dictation-choice .dictation-choice-meaning.dictation-meaning-warning,.dictation-answer-card .dictation-meaning-warning{border-left:3px solid #ba4a3a;border-radius:4px;padding:7px 9px;background:#fff5f2;color:#943b31}
.dictation-choice .dictation-choice-literal,.dictation-choice .dictation-choice-source{grid-column:1;font-size:11px;line-height:1.4;color:#64756c}
.dictation-choice .dictation-choice-source,.dictation-answer-source{color:#215c4b;text-underline-offset:2px}
.dictation-choice .dictation-remove{position:absolute;top:8px;right:8px;border:0;background:transparent;color:#a44848;border-radius:5px;padding:0 5px;font-size:19px;line-height:1.1}
@media(max-width:560px){.dictation-choice-strokes{grid-column:1/-1;grid-row:auto;justify-content:flex-start;max-width:100%;margin:8px 0 0}}
.dictation-choice .dictation-remove:hover,.dictation-choice .dictation-remove:focus-visible{background:#fff0f0;outline:1px solid #e4b4b4}
.dictation-controls{justify-content:flex-start;gap:10px;padding-top:11px}
.dictation-controls label{display:inline-flex;align-items:center;gap:4px}
.dictation-controls .primary{min-height:40px}
#dictationStart{margin-left:auto}
#dictationPanel .dictation-message{min-height:0;margin:7px 0 0}
#dictationPanel .dictation-message:empty{display:none}
.dictation-paper-hint{margin:0 0 16px;color:#53685d;line-height:1.5}
.dictation-round-actions{display:flex;flex-wrap:wrap;gap:9px}
.dictation-round-actions .iconbtn,.dictation-round-actions .primary{min-height:42px;padding:9px 13px}
.dictation-round-actions .dictation-repeat{flex:0 0 43px;width:43px;min-width:43px;padding:4px;border:1px solid #215c4b;background:#e8f2ec;color:#215c4b;font-size:25px;line-height:1}
.dictation-round-actions .dictation-repeat:hover,.dictation-round-actions .dictation-repeat:focus-visible{background:#d7eadf}
.dictation-round-actions .dictation-exit{border-color:#e9b4b4;background:#fff5f5;color:#b4232c;font-weight:700}
.dictation-round-actions .dictation-exit:hover,.dictation-round-actions .dictation-exit:focus-visible{background:#ffe8e8}
.dictation-summary h3{margin:0 0 14px;font-size:18px}
#dictationAnswers{border:0;background:transparent;padding:0;margin-top:15px}
#dictationAnswers h3{margin:0 0 10px;font-size:16px}
#dictationAnswerList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.dictation-answer-card{position:relative;min-width:0;margin:0;padding:14px;border:1px solid var(--line);border-radius:10px;background:#fff}
.dictation-answer-card h4{margin:0 0 8px;font-size:23px;color:var(--green)}
.dictation-answer-card p{margin:4px 0;line-height:1.45;overflow-wrap:anywhere;font-size:13px}
.dictation-answer-source{display:block;margin-top:6px;font-size:11px;line-height:1.4}
#dictationAnswers .dictation-answer-card p strong{display:inline;margin:0;font-size:inherit}
.dictation-answer-card>.iconbtn{margin:7px 0 0}
.dictation-skipped{display:inline-block;margin-bottom:6px;border-radius:6px;padding:3px 7px;background:#fff0e9;color:#8a4e31;font-size:12px}
.dictation-strokes{display:flex;flex-wrap:wrap;gap:10px;margin-top:13px;border-top:1px solid var(--line);padding-top:10px}
.dictation-strokes>p{flex-basis:100%;font-weight:600}
.dictation-stroke-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px;border:1px solid var(--line);border-radius:8px}
.dictation-stroke-glyph{width:88px;height:88px;display:grid;place-items:center}
.dictation-stroke-unavailable{font-size:11px;color:#718078;text-align:center}
.dictation-stroke-item span{font-size:13px}
.dictation-stroke-item .iconbtn{padding:4px 10px}
.shared-handwriting-backdrop{position:fixed;inset:0;z-index:1000;background:#172a2299}
.shared-handwriting-backdrop[hidden]{display:none}
body>#handwritingPanel{position:fixed;z-index:1001;top:50%;left:50%;transform:translate(-50%,-50%);width:min(94vw,430px);height:min(90vh,650px);overflow:hidden;display:flex;flex-direction:column;margin:0;padding:16px;background:#fff;border:1px solid #cbd9cf;border-radius:14px;box-shadow:0 18px 56px #15231d45}
body>#handwritingPanel .handwriting-head,body>#handwritingPanel .handwriting-canvas,body>#handwritingPanel .handwriting-actions,body>#handwritingPanel #handwritingStatus{flex:none}
body>#handwritingPanel .handwriting-canvas{width:min(280px,38vh,100%);max-height:none}
body>#handwritingPanel #handwritingResults{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;align-content:start;scrollbar-gutter:stable}
body>#handwritingPanel[hidden]{display:none}
@media(max-width:640px){.dictation-choices,#dictationAnswerList{grid-template-columns:1fr}.dictation-controls{align-items:stretch}.dictation-controls label{justify-content:space-between;width:100%}.dictation-controls .primary{width:100%;margin-left:0}.dictation-round-actions button{flex:1 1 42%}.dictation-add-row button{min-width:72px}}
@media(prefers-reduced-motion:reduce){.dictation-answer-card,.dictation-stroke-item{scroll-behavior:auto;animation:none!important;transition:none!important}}

/* Práctica de dictado: jerarquía y espaciado uniforme. */
#dictationRound{padding:clamp(24px,5vw,44px);text-align:center;background:#f7faf8;border-radius:18px}
#dictationRound .dictation-round-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0 0 24px}
#dictationProgress{line-height:1.2;letter-spacing:-.025em}
#dictationAudioStatus{line-height:1.5;color:#526b61}
#dictationRound .dictation-paper-hint{max-width:520px;margin:0 auto 24px;line-height:1.7;text-indent:0}
#dictationRound .dictation-round-actions{justify-content:center;margin:0;gap:12px}
#dictationNext{background:#215c4b;color:#fff;border-color:#215c4b;padding:14px 26px;min-height:50px;font-weight:600}
#dictationReplay[hidden]{display:none!important}


/* Component: design.css */
@media screen {
  :root {
    --ink: #1c2a24;
    --muted: #64756c;
    --line: #dfe8e1;
    --paper: #ffffff;
    --bg: #f5f7f5;
    --green: #205c48;
    --mint: #e9f2eb;
  }

  body {
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { max-width: 1120px; padding-inline: 28px; }
  .top { height: 72px; border-color: var(--line); box-shadow: 0 1px 0 #1c2a2405; }
  .nav { gap: 42px; }
  .brand { flex: none; gap: 11px; font-size: 19px; letter-spacing: -.04em; }
  .logo { width: 37px; height: 37px; border-radius: 10px; font-size: 21px; }
  .navlinks { gap: 27px; }
  .nav-tab {
    min-height: 72px;
    padding: 0 1px;
    border-bottom: 2px solid transparent;
    color: #5d6b63;
    font-size: 14px;
    font-weight: 500;
  }
  .nav-tab.active { border-color: var(--green); }
  .navright { gap: 10px; }
  .lang, .pill { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; }
  .lang { padding-inline: 12px; color: #576b5f; }
  .pill { padding-inline: 15px; }

  .hero { padding: 48px 0 32px; align-items: flex-start; }
  .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .17em; }
  .hero h1 {
    margin: 11px 0 10px;
    font-size: clamp(32px, 3.3vw, 43px);
    line-height: 1.13;
    letter-spacing: -.055em;
  }
  .hero p { max-width: 660px; color: var(--muted); font-size: 15px; line-height: 1.55; }
  .layout { padding-bottom: 60px; }
  .layout.view-practice .leftcol { width: 100%; max-width: 1064px; margin-inline: auto; }
  .card {
    padding: 26px;
    border-color: var(--line);
    border-radius: 18px;
    box-shadow: 0 12px 32px #20362a08;
  }
  .cardhead { margin-bottom: 20px; }
  .cardhead h2 { font-size: 18px; letter-spacing: -.035em; }
  .tabs { gap: 28px; margin-bottom: 23px; }
  .tab { padding-bottom: 12px; font-size: 14px; font-weight: 500; }
  .fieldlabel { margin-bottom: 8px; color: #52675c; font-size: 12px; font-weight: 700; }
  .hint { margin-top: 8px; color: #74847a; font-size: 12px; line-height: 1.5; }
  .textinput, .sentrow input, .dictsearch {
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid #d8e2da;
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-size: 16px;
  }
  .textinput::placeholder, .sentrow input::placeholder, .dictsearch::placeholder { color: #9aa9a0; }
  .primary, .pill, .printbtn {
    min-height: 44px;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-weight: 700;
  }
  .primary:hover, .pill:hover, .printbtn:hover { background: #174936; }
  .iconbtn, .audio-btn, .speed {
    border-color: #dce6de;
    border-radius: 8px;
    background: #fff;
    color: #38584a;
  }
  .iconbtn:hover, .audio-btn:hover { background: #f0f6f1; border-color: #b9d0bf; }
  button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
    outline: 2px solid #4b9872;
    outline-offset: 2px;
  }

  .workspace { gap: 16px; margin-top: 23px; }
  .pane {
    min-height: 228px;
    padding: 21px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fafcfb;
  }
  #practicar .pane { border: 0; background: #f3f7f4; }
  .pane-title { color: #617569; font-size: 11px; letter-spacing: .105em; }
  .workspace .pane:first-child { display: flex; flex-direction: column; }
  .wordinfo { flex: 1; gap: 20px; margin-top: 17px; align-items: center; flex-wrap: wrap; }
  .wordinfo > div:last-child { min-width: 0; }
  .bigchar { flex: none; max-width: 100%; white-space: nowrap; font-size: clamp(58px, 6vw, 77px); }
  .wordname { display: none; }
  .pinyin { margin-top: 0; color: #244f3d; font-size: 19px; font-weight: 700; }
  .meaning { margin-top: 7px; color: #40544a; font-size: 14px; line-height: 1.5; }
  .dictionary-link { margin-top: 10px; font-size: 12px; }
  .animatebox { min-height: 115px; margin: 10px auto 8px; align-items: center; }
  .controls { gap: 7px; }
  .controls .iconbtn, .controls .speed { min-height: 34px; }
  #strokeStatus { color: #788a7e; font-size: 11px; line-height: 1.4; }

  .news-context {
    margin-top: 18px;
    padding: 20px;
    border-color: var(--line);
    border-radius: 14px;
    background: #fff;
  }
  #practicar .news-context {
    margin-top: 21px;
    padding: 22px 0 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }
  .news-context h3 { margin-bottom: 6px; font-size: 16px; letter-spacing: -.02em; }
  .news-context-status { color: #61756a; font-size: 13px; }
  .news-context > small {
    display: block;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid #edf1ed;
    color: #7b8c80;
    font-size: 10px;
    line-height: 1.5;
  }
  .news-context-item, .sentence-result, .sentence-stroke-char {
    border-color: var(--line);
    border-radius: 10px;
    background: #fcfdfc;
    box-shadow: none;
  }

  .layout.view-worksheet .rightcol { width: min(100%, 940px); }
  #worksheetPanel .cardhead { margin-bottom: 17px; }
  .worksheet-character-search { padding-bottom: 14px; }
  .worksheet-character-details { border-color: var(--line); background: #fafcfb; }
  .worksheet-preview { border-color: var(--line); background: #fff; }
  .worksheet-actions { gap: 10px; }
  .savebtn { min-height: 44px; border-color: #cdded1; border-radius: 10px; color: var(--green); font-weight: 700; }

  .layout.view-dictation #dictationPanel { width: min(100%, 940px); padding: 26px; }
  #dictationPanel .cardhead { margin-bottom: 10px; }
  .dictation-choice, .dictation-answer-card {
    border-color: var(--line);
    border-radius: 10px;
    background: #fcfdfc;
  }
  .dictation-choice { padding: 12px 14px; }
  .dictation-choice .dictation-choice-reading { color: #315942; font-weight: 700; }
  .dictation-selection-head { margin-top: 10px; }
  .dictation-controls { padding-top: 14px; }
  .dictation-controls select { min-height: 36px; }
  .dictation-round, .dictation-summary { border-color: var(--line); background: #fafcfb; }
  #dictationAnswers { background: transparent; }
  #dictationAnswers .dictation-answer-card { background: #fff; }

  .foot {
    padding: 24px 0 34px;
    border-top: 1px solid var(--line);
    color: #75867a;
    font-size: 11px;
    line-height: 1.8;
    text-align: center;
  }
  .foot a { color: #446e56; text-underline-offset: 2px; }

  /* Illustrated accents stay decorative; all controls and content remain real HTML. */
  .hero { position: relative; isolation: isolate; min-height: 250px; align-items: center; padding-block: 35px; }
  .hero::before {
    content: ''; position: absolute; z-index: -1; left: 50%; top: 0;
    width: 100vw; height: 100%; transform: translateX(-50%);
    background: url('assets/hero-landscape.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d') center 54% / cover no-repeat;
  }
  .hero h1 { max-width: 650px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(34px, 4.1vw, 56px); line-height: 1.09; letter-spacing: -.035em; }
  .hero h1 span { display: block; color: #17604c; }
  .hero p { max-width: 620px; color: #516b61; }
  .eyebrow { color: #145c49; }
  .nav-tab.active, .tab.active { color: #155b48; }
  .fieldlabel, .pane-title { color: #3d6254; }
  .cardhead h2, .news-context h3 { color: #203c31; }
  #showBtn, #worksheetAddCharacter { display: none !important; }
  #characterMode .inputrow, #sentenceMode .sentrow { position: relative; }
  #sentenceMode .sentrow input{min-width:0}
  #sentenceMode .clear-input-btn{right:120px}
  #hanziInput, #sentenceInput { padding-right: 48px; }
  .clear-input-btn {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 30px; height: 30px;
    padding: 0; border: 0; border-radius: 7px;
    background: #fff0ee; color: #b8322c; font: 700 23px/1 Arial, sans-serif;
  }
  .clear-input-btn:hover { background: #fbded9; color: #8f211d; }
  .clear-input-btn:focus-visible { outline: 2px solid #b8322c; outline-offset: 2px; }
  .clear-input-btn[hidden] { display: none !important; }
  .dictation-input-wrap { position: relative; flex: 1; min-width: 0; }
  .dictation-input-wrap #dictationInput { width: 100%; padding-right: 54px !important; }
  .dictation-input-wrap #clearDictationInput { right: 10px; top: 50%; min-width: 0; z-index: 2; }
  #practicar.character-is-empty #characterMode .workspace,
  #practicar.character-is-empty #newsContextPanel { display: none !important; }
  #practicar .workspace .pane:first-child {
    background: linear-gradient(90deg, #ffffff94, #ffffffd9 52%, #ffffffd6), url('assets/bamboo-wash.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d') left bottom / cover no-repeat;
    border-color: #dce9dd;
  }
  #practicar .workspace .pane:nth-child(2) { background: linear-gradient(145deg, #fffdf9, #faf6f0); border-color: #eee5db; }
  #practicar .news-context:has(#newsContextResults:empty) {
    position: relative; min-height: 160px; padding-left: 31%; overflow: hidden;
  }
  #practicar .news-context:has(#newsContextResults:empty)::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 28%;
    background: url('assets/practice-desk.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d') center / cover no-repeat;
  }
  #practicar .news-context:has(#newsContextResults:empty) > * { position: relative; }
  #practicar .news-context small a { color: #155d49; }

  @media (max-width: 800px) {
    .wrap { padding-inline: 20px; }
    .nav { gap: 24px; }
    .navlinks { gap: 18px; }
    .hero { padding: 38px 0 26px; }
    .card { padding: 21px; }
  }
  @media (max-width: 640px) {
    .wrap { padding-inline: 16px; }
    .top { height: auto; }
    .nav { min-height: 64px; padding-block: 10px; flex-wrap: wrap; gap: 4px 12px; }
    .brand { font-size: 18px; }
    .logo { width: 34px; height: 34px; }
    .navright { margin-left: auto; }
    .lang { display: none; }
    .pill { min-height: 34px; padding-inline: 11px; font-size: 12px; }
    .navlinks { order: 3; display: flex; flex-wrap: nowrap; grid-template-columns: none; width: 100%; gap: 22px; overflow-x: auto; white-space: nowrap; }
    .nav-tab { flex: none; min-height: 40px; font-size: 13px; }
    .hero { min-height: 220px; padding: 29px 0 22px; }
    .hero::before { background-image: linear-gradient(90deg, #ffffffdc, #ffffff8c 70%, #ffffff30), url('assets/hero-landscape.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d'); background-position: 56% center; }
    .hero h1 { font-size: 33px; max-width: 370px; }
    .hero p { font-size: 13px; }
    #practicar .news-context:has(#newsContextResults:empty) { padding: 118px 17px 18px; }
    #practicar .news-context:has(#newsContextResults:empty)::before { width: 100%; height: 100px; bottom: auto; }
    .card, .layout.view-dictation #dictationPanel { padding: 17px; border-radius: 14px; }
    .cardhead h2 { font-size: 17px; }
    .workspace { grid-template-columns: 1fr; gap: 11px; }
    .pane { min-height: 0; padding: 17px; }
    .wordinfo { margin-top: 14px; gap: 12px; }
    .bigchar { font-size: 52px; }
    .layout { padding-bottom: 36px; }
    .foot { padding-bottom: 24px; }
  }
}

@media screen {
  /* One type family, with size and weight providing the hierarchy. */
  :root {
    --type-page-title: clamp(36px, 4vw, 52px);
    --type-section-title: 21px;
    --type-subtitle: 18px;
    --type-label: 12px;
  }
  body, button, input, select, textarea { font-family: 'DM Sans', Arial, sans-serif; }
  .han, .bigchar, .stroke-label { font-family: 'Noto Sans SC', sans-serif; }
  .hero h1, .cardhead h2, .news-context h3, .sentence-stroke-section h3 {
    font-family: 'DM Sans', Arial, sans-serif;
  }

  .top { background: #fff; border-bottom: 1px solid #c9dece; box-shadow: 0 3px 14px #164a3210; }
  .nav { gap: 0; }
  .brand { margin-right: 22px; padding-right: 28px; border-right: 1px solid #d8e9dc; color: #173e2c; }
  a.brand { text-decoration: none; }
  a.brand:hover { color: #1d6b4e; }
  a.brand:focus-visible { outline: 2px solid #1d6b4e; outline-offset: 5px; border-radius: 6px; }
  .navlinks { gap: 8px; }
  .nav-tab {
    min-height: 39px; padding: 0 15px; border: 1px solid #d7e8db;
    border-radius: 8px; background: #f4faf5; color: #1b5b40;
    font-size: 14px; font-weight: 700;
  }
  .nav-tab:hover { border-color: #a8cbb3; background: #e7f3e9; color: #164831; }
  .nav-tab.active, .nav-tab.active:hover {
    border: 1px solid #1e6046; background: #1e6046; color: #fff;
  }
  .nav-tab.active { box-shadow: 0 2px 6px #164a321c; }
  .lang { color: #1b5b40; border-color: #d3e4d7; }

  .hero { min-height: 245px; border-bottom: 1px solid #d6e7d9; }
  .hero::before {
    background-image: linear-gradient(90deg, #fffffff2 0%, #ffffffbd 25%, #ffffff20 58%, #ffffff14), url('assets/hero-centered.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d');
    background-position: center center;
    left: 0; width: 100%; transform: none;
  }
  .hero[data-view="worksheet"]::before {
    background-image: linear-gradient(90deg, #fffffff7 0%, #ffffffe6 36%, #ffffff25 74%), url('assets/practice-desk-jade.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d');
    background-position: center 48%;
  }
  .hero[data-view="dictation"]::before {
    background-image: linear-gradient(90deg, #fffffff2 0%, #ffffffcc 34%, #ffffff05 76%), url('assets/hero-dictado.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d');
    background-position: center center;
  }
  .hero::after {
    content: ''; position: absolute; bottom: -1px; left: 0;
    width: min(530px, 64%); height: 2px;
    background: linear-gradient(90deg, #1e6046, #8fbea0, transparent);
  }
  .hero h1 { max-width: 650px; font-size: var(--type-page-title); font-weight: 700; line-height: 1.1; letter-spacing: -.05em; }
  .hero h1 span { color: #1d6b4e; }
  .hero p { max-width: 630px; font-size: 15px; }
  .eyebrow { color: #1e6046; }

  .cardhead { padding-bottom: 16px; border-bottom: 1px solid #dce9df; }
  .cardhead h2 { font-size: var(--type-section-title); font-weight: 700; letter-spacing: -.035em; }
  .tabs { margin-top: -5px; }
  .tab.active { color: #1e6046; border-bottom-width: 3px; }
  #practicar .workspace { padding-top: 19px; border-top: 1px solid #dce9df; }
  #sentenceMode #frases { max-width: none; margin-inline: 0; }
  .pane-title { padding-left: 10px; border-left: 3px solid #74ac85; color: #2d6448; font-size: var(--type-label); }
  #practicar .news-context { border-top: 2px solid #cbded0; }
  #practicar .news-context:has(#newsContextResults:empty)::before {
    background-image: url('assets/practice-desk-jade.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d');
  }
  .news-context h3, .sentence-stroke-section h3,
  .dictation-summary h3, #dictationAnswers h3 { color: #234d35; font-size: var(--type-subtitle); font-weight: 700; }
  .worksheet-preview { border-top: 2px solid #cbded0; }
  #worksheetPanel .cardhead { margin-bottom: 12px; }
  #worksheetPanel .worksheet-character-search { padding-bottom: 8px; }
  #worksheetPanel .worksheet-search-row { position: relative; }
  #worksheetPanel #clearWorksheetInput{right:110px}
  #worksheetCharacterInput { padding-right: 48px; }
  #worksheetPanel .worksheet-character-details {
    display: flex; align-items: center; gap: 16px; min-height: 0;
    margin-top: 8px; padding: 9px 12px;
  }
  #worksheetPanel .worksheet-character-details[hidden] { display: none; }
  #worksheetPanel .worksheet-detail-reading { flex: 0 1 235px; min-width: 110px; gap: 2px; }
  #worksheetPanel .worksheet-detail-reading strong { font-size: 22px; }
  #worksheetPanel .worksheet-writer-target {
    flex: 1 1 auto; width: auto; height: 92px; min-height: 0;
    margin: 0; padding: 0; justify-content: flex-start; overflow-x: auto;
  }
  #worksheetPanel .worksheet-preview { margin-top: 7px; }
  .worksheet-added-notice {
    margin: 7px 0 0; padding: 7px 10px; border-left: 3px solid #2b8055;
    border-radius: 5px; background: #edf7ef; color: #21563a;
    font-size: 13px; font-weight: 700;
  }
  .worksheet-added-notice[hidden] { display: none; }
  .dictation-selection-head { padding-top: 14px; border-top: 1px solid #dce9df; }
  .foot { border-top: 2px solid #d7e7db; }

  @media (max-width: 640px) {
    :root { --type-page-title: 34px; --type-section-title: 19px; --type-subtitle: 17px; }
    .brand { margin-right: 0; padding-right: 0; border-right: 0; }
    .navlinks { gap: 7px; }
    .nav-tab { min-height: 36px; padding-inline: 11px; font-size: 12px; }
    .hero { min-height: 220px; }
    .hero::before { background-image: linear-gradient(90deg, #fffefef0, #ffffffbd 68%, #ffffff64), url('assets/hero-centered.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d'); background-position: center center; }
    .hero[data-view="worksheet"]::before { background-image: linear-gradient(90deg, #fffffff9 0%, #fffffff0 55%, #ffffffb0), url('assets/practice-desk-jade.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d'); background-position: 55% center; }
    .hero[data-view="dictation"]::before { background-image: linear-gradient(90deg, #fffffff9 0%, #fffffff0 55%, #ffffffa0), url('assets/hero-dictado.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d'); background-position: 64% center; }
    .hero h1 { font-size: var(--type-page-title); }
    .cardhead h2 { font-size: var(--type-section-title); }
    #worksheetPanel .worksheet-character-details { align-items: flex-start; gap: 8px; }
    #worksheetPanel .worksheet-detail-reading { flex-basis: 42%; min-width: 0; }
  }
}
.featured-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.featured-actions button{border:1px solid #cbded1;border-radius:8px;background:#fff;color:#215c4b;padding:7px 10px;font-size:12px;font-weight:700}
.featured-actions #featuredClear{border-color:#e5c3c3;color:#a44848;font-size:19px;line-height:1;padding:4px 10px}
.featured-actions button:hover,.featured-actions button:focus-visible{background:#e8f2ec}
.worksheet-draw-prompt{display:block;margin:8px 0 0;padding:5px 0;border:0;background:none;color:#b4232c;font-size:13px;font-weight:700;text-decoration:underline;text-align:left;text-underline-offset:3px}
#hanziSuggestions .hanzi-suggestion-main{display:grid!important;grid-template-columns:max-content max-content minmax(0,1fr);align-items:baseline;column-gap:20px;width:100%;text-align:left}
#hanziSuggestions .hanzi-suggestion-pinyin{font-size:14px;color:#215c4b;font-weight:600}
#hanziSuggestions .hanzi-suggestion-meaning{font-size:13px;color:#53685d}
@media(max-width:520px){#hanziSuggestions .hanzi-suggestion-main{grid-template-columns:max-content minmax(0,1fr);gap:3px 12px}#hanziSuggestions .hanzi-suggestion-meaning{grid-column:1/-1}}
#sentenceAutocomplete{max-height:250px;overflow-y:auto}
#sentenceAutocomplete button{display:flex;align-items:center;gap:12px;width:100%}
#sentenceAutocomplete .sentence-suggestion-main{display:grid;grid-template-columns:max-content max-content minmax(0,1fr);align-items:baseline;column-gap:18px;flex:1;min-width:0;text-align:left}
#sentenceAutocomplete .sentence-suggestion-pinyin{font-size:14px;font-weight:600;color:#215c4b}
#sentenceAutocomplete .sentence-suggestion-meaning{font-size:13px;color:#53685d}
#sentenceBuilder .dictation-step-list{max-height:240px;overflow-y:auto}
.sentence-step-more{display:block;margin:7px 0 0;padding:2px 0;border:0;background:transparent;color:#215c4b;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:2px}
#sentenceBuilder .dictation-step-list .han{font-size:25px}
@media(max-width:600px){#sentenceAutocomplete .sentence-suggestion-main{grid-template-columns:max-content minmax(0,1fr);gap:3px 12px}#sentenceAutocomplete .sentence-suggestion-meaning{grid-column:1/-1}}
.stroke-display-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin:10px 0;color:#52675b;font-size:12px}
.stroke-display-controls[hidden]{display:none}
.stroke-display-controls label{display:inline-flex;align-items:center;gap:6px}
.stroke-display-controls select{border:1px solid #cbded1;border-radius:7px;background:#fff;color:#215c4b;padding:5px 7px}
.stroke-display-controls input[type=checkbox]{accent-color:#215c4b}
#worksheetPreview .preview-character-group>small:nth-of-type(2),#worksheetPreview .preview-character-group>.previewrow:not(:first-of-type),#worksheetPreview .preview-order-note{display:none}
#worksheetPreview .preview-character-group>.previewrow:first-of-type .previewcell{display:grid;place-items:center;cursor:pointer;border-radius:7px;background:#fff;color:#215c4b;opacity:1}
#worksheetPreview .preview-character-group>.previewrow:first-of-type{margin:7px 0 0}
#worksheetPanel #worksheetWriterTarget .stroke-glyph{width:var(--worksheet-detail-size,78px)!important;height:var(--worksheet-detail-size,78px)!important}
#worksheetPanel #worksheetWriterTarget{height:auto!important;min-height:200px!important;padding:18px 14px 20px!important;gap:18px!important;align-items:flex-start!important}
#worksheetPanel #worksheetWriterTarget .stroke-character{flex:0 0 calc(var(--worksheet-detail-size,78px) + 28px)!important;min-height:calc(var(--worksheet-detail-size,78px) + 46px)!important}
#worksheetPreview .preview-character-group>.previewrow:first-of-type{position:relative}
.worksheet-preview-replay,.worksheet-detail-replay{position:absolute;top:3px;display:grid;place-items:center;width:23px;height:23px;padding:0;border:1px solid #dce8df;border-radius:6px;background:#fff;color:#215c4b;font-size:15px;line-height:1}
.worksheet-preview-replay:disabled{opacity:.5;cursor:default}
#worksheetWriterTarget .stroke-character{position:relative}
.worksheet-detail-replay{right:3px}
#featuredAddToWorksheet{display:none!important}
.stroke-pinyin{font-size:12px;font-weight:700;color:#215c4b;line-height:1.25}
@media screen{#worksheetPreview .preview-character-group{display:none!important}}
#worksheetWriterTarget .stroke-glyph{box-sizing:border-box;flex:none;min-width:var(--worksheet-detail-size,78px);min-height:var(--worksheet-detail-size,78px)}
#worksheetWriterTarget .stroke-glyph svg{display:block;width:100%;height:100%;max-width:none;max-height:none}
@media screen{#worksheetPreview .preview-group>small{display:none!important}}


/* Component: accessibility.css */
/* Contrast, keyboard focus and motion preferences shared by the pages. */
:root{--muted:#52655c}
body{font-family:'DM Sans',system-ui,'Segoe UI',Arial,sans-serif}
.han{font-family:'Noto Sans SC','Microsoft YaHei','SimSun',sans-serif}
.hint,.tiny,.pane-title,#strokeStatus,.news-context-status,.news-context>small,.stroke-label,.foot,.foot a,.dictation-message,.dictation-suggestion-count,.worksheet-preview-summary{color:#52655c!important}
input::placeholder,textarea::placeholder{color:#52655c!important;opacity:1}
.previewtitle>span,.dictation-mode-tabs>span,.dictation-mode-tabs small{color:#52655c!important}
.nav-tab,.tab,.fieldlabel,.sentence-stroke-controls,.stroke-display-controls,.dictation-controls{color:#40594d}
input,textarea,select{border-color:#72867a!important}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #155c42!important;outline-offset:3px!important}
button,a,input,select,textarea{scroll-margin-block:24px}
.skip-link{position:absolute;top:-100px;left:16px;z-index:10000;background:#fff;color:#215c4b;padding:12px;border:2px solid #215c4b;border-radius:6px}
.skip-link:focus{top:12px}
.privacy-examples{margin-bottom:16px;padding:14px;border:1px solid #72867a;border-radius:8px;background:#f4f8f5;color:#202d2a}
.privacy-examples label{display:flex;gap:8px;align-items:center;font-weight:700;cursor:pointer}
.privacy-examples input{width:20px;height:20px;flex:none}
.privacy-examples p{margin:8px 0 0;font-size:14px;line-height:1.5;color:#40594d}
.foot nav{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 20px}
.foot nav a{padding:6px 0;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media print{.skip-link,.privacy-examples{display:none!important}}



/* Component: professional.css */
/* Visual identity. Screen styles only; printed practice sheets keep their layout. */
@media screen {
  :root{--ink:#172d25;--green:#205c48;--muted:#52655c;--line:#dce5df;--bg:#f4f6f3;--type-page-title:50px;--type-section-title:25px;--type-subtitle:20px}
  body{background:var(--bg);font-family:system-ui,'Segoe UI',Arial,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1160px;padding-inline:32px}
  .top{height:auto;min-height:82px;background:#fff;border-bottom:1px solid var(--line);box-shadow:none}
  .nav{min-height:82px;gap:28px}
  .brand{margin-right:0;padding-right:28px;border-right:1px solid var(--line);gap:12px;font-size:22px;letter-spacing:-.04em;color:#173e2c}
  .logo{width:40px;height:40px;border-radius:12px;background:#205c48;box-shadow:inset 0 0 0 1px #ffffff1c;font-size:23px}
  .navlinks{gap:6px}
  .nav-tab,.navlinks>a{min-height:42px;padding:0 18px;border:1px solid transparent;border-radius:10px;background:transparent;font-size:14px;font-weight:600;color:#40594d;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
  .nav-tab:hover,.navlinks>a:hover{background:#edf3ef;border-color:transparent;color:#205c48}
  .nav-tab.active,.nav-tab.active:hover{background:#205c48;border-color:#205c48;color:#fff;box-shadow:none}
  .lang{min-height:34px;padding:0 10px;border:1px solid #dce5df;border-radius:8px;font-size:12px;font-weight:600;letter-spacing:.04em;background:#fafcfb;color:#40594d}
  .hero{margin:32px 0 28px;padding:44px 48px;min-height:320px;border:1px solid #dce5df;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 8px 28px #213d2f05;align-items:center}
  .hero::before{inset:0;width:100%;height:100%;transform:none;background-image:linear-gradient(90deg,#fffffffa 0%,#ffffffed 34%,#ffffff9c 57%,#ffffff08 82%),url('assets/hero-centered.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d');background-position:center;background-size:cover}
  .hero[data-view="worksheet"]::before{background-image:linear-gradient(90deg,#fffffffa 0%,#fffffff0 35%,#ffffff99 57%,#ffffff10 84%),url('assets/practice-desk-jade.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d');background-position:center 48%}
  .hero[data-view="dictation"]::before{background-image:linear-gradient(90deg,#fffffffa 0%,#fffffff0 35%,#ffffff99 57%,#ffffff10 84%),url('assets/hero-dictado.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d');background-position:center}
  .hero::after{display:none}
  .hero>div{width:100%;max-width:580px}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;line-height:1.4;font-weight:700;letter-spacing:.16em;color:#205c48}
  .eyebrow::before{content:'';width:18px;height:2px;background:#205c48;flex:none}
  .hero h1{font-family:system-ui,'Segoe UI',sans-serif;font-size:clamp(36px,4.2vw,50px);line-height:1.12;letter-spacing:-.045em;font-weight:700;margin:18px 0 18px;max-width:620px;color:#172d25;text-wrap:balance}
  .hero h1 span{color:#205c48}
  .hero p,.hero .lead{max-width:490px;margin:0;font-size:16px;line-height:1.7;text-align:left;text-align-last:auto;color:#40594d}
  .layout{padding-bottom:64px}
  .card,.layout.view-dictation #dictationPanel{padding:32px;border:1px solid #dce5df;border-radius:20px;background:#fff;box-shadow:0 8px 30px #243c2e05}
  .layout.view-practice .leftcol,.layout.view-worksheet .rightcol,.layout.view-dictation #dictationPanel{max-width:none;width:100%}
  .cardhead{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid #e3eae5}
  .cardhead h2{font-family:system-ui,'Segoe UI',sans-serif;font-size:25px;line-height:1.25;letter-spacing:-.025em;font-weight:650;color:#172d25}
  .tabs{gap:28px;margin-top:0;margin-bottom:28px}
  .tab{padding:0 0 14px;font-size:14px;font-weight:600;letter-spacing:0}
  .tab.active{color:#205c48;border-bottom:2px solid #205c48}
  .fieldlabel{display:block;font-size:13px;font-weight:650;color:#304f40;margin-bottom:10px;letter-spacing:0}
  .textinput,.dictsearch,.sentrow input{min-height:54px;border-radius:11px;background:#fff;font-size:17px;padding:13px 16px;color:#172d25;box-shadow:0 1px 2px #1b3a2904}
  .textinput:hover,.dictsearch:hover,.sentrow input:hover{background:#fcfdfc}
  .textinput:focus,.dictsearch:focus,.sentrow input:focus{background:#fff;box-shadow:0 0 0 4px #205c4810}
  .inputrow,.worksheet-search-row,.dictation-add-row{gap:12px}
  .primary,.printbtn,.savebtn{min-height:48px;padding:12px 22px;border-radius:11px;font-size:14px;font-weight:650;letter-spacing:0;box-shadow:none}
  .primary,.printbtn{background:#205c48}
  .primary:hover,.printbtn:hover{background:#174735}
  .hint{margin-top:10px;font-size:13px;line-height:1.65}
  .card .hint{font-size:13px;line-height:1.65}
  .iconbtn,.audio-btn{border-radius:8px;font-size:13px;min-height:36px}
  .workspace{gap:20px;margin-top:28px}
  .pane,#practicar .pane{border:1px solid #e0e8e2;border-radius:16px;background:#f8faf8;padding:24px}
  .pane-title{font-size:11px;letter-spacing:.09em;border-left-color:#205c48}
  .meaning{font-size:15px;line-height:1.65}
  .pinyin{font-size:20px}
  .worksheet-draw-prompt,.dictation-draw-prompt{color:#205c48;font-size:13px;font-weight:600;text-underline-offset:4px;padding-block:7px}
  #worksheetPanel .worksheet-character-search{padding-bottom:20px}
  #worksheetPanel .worksheet-character-details{padding:20px;border:1px solid #dce5df;border-radius:14px;margin-top:16px;background:#f8faf8}
  .stroke-display-controls{margin-block:18px;gap:12px 24px}
  .stroke-display-controls select,.dictation-controls select{min-height:36px;border-radius:8px;font-size:13px;padding:6px 10px}
  #worksheetPanel .worksheet-preview{margin-top:18px;border:1px solid #dce5df;border-radius:14px;padding:18px;background:#fcfdfc}
  .previewtitle{margin-bottom:14px}
  .worksheet-actions{gap:12px;margin-top:18px}
  .dictation-mode-tabs{gap:24px;margin-bottom:24px}
  .dictation-mode-tabs span{padding-bottom:13px;font-weight:600}
  .dictation-mode-tabs small{margin-left:6px;padding:3px 7px;border-radius:5px;background:#eef2ef;font-size:10px;font-weight:500;white-space:nowrap}
  .dictation-intro{margin-bottom:22px;font-size:15px;line-height:1.65;text-align:left}
  #dictationPanel .dictation-intro{font-size:15px;line-height:1.65;margin-bottom:22px}
  .dictation-selection-head{margin-top:24px;padding-top:20px;font-size:14px}
  .dictation-choice{padding:16px 18px;border-radius:13px;background:#f8faf8;border-color:#dce5df}
  .dictation-choice strong{font-size:23px}
  .dictation-choice .dictation-choice-reading,.dictation-choice .dictation-choice-meaning{font-family:inherit;font-size:14px;line-height:1.6}
  .dictation-controls{margin-top:20px;padding-top:20px}
  .dictation-answer-card,.sentence-result{padding:22px;border-radius:14px;background:#fff;border-color:#dce5df}
  .autocomplete{border-radius:12px;box-shadow:0 12px 30px #173a2410;border-color:#dce5df;margin-top:8px}
  .autocomplete button{padding:12px 14px;border-bottom-color:#edf1ee}
  .privacy-examples{background:#f4f7f4;border-color:#c8d5cc;border-radius:12px;padding:16px;font-size:14px}
  .privacy-examples p{font-size:13px}
  .foot{max-width:none;border-top:1px solid #dce5df;padding:28px 24px 36px;background:#edf2ed;font-size:12px;line-height:1.7;text-align:center}
  .foot>p{margin:0 0 14px;font-weight:500}
  .foot nav{gap:4px 24px}
  .foot nav a{text-decoration-color:#99afa2;text-underline-offset:4px}
  .foot nav a:hover{text-decoration-color:#205c48}
  .content{padding:32px;border-radius:20px;border-color:#dce5df;box-shadow:0 8px 30px #243c2e05}
  .section>p,.feature p{text-align:left;text-align-last:auto;line-height:1.7}
  .feature{padding:20px;border-radius:12px;background:#f8faf8;border-color:#dce5df}
  .legal-page{background:#f4f6f3;font-size:16px}
  .legal-page header,.legal-page footer,.legal-page main{max-width:960px}
  .legal-page header{padding-block:30px 12px}
  .legal-page header>a{font-size:14px;font-weight:600}
  .legal-page nav{gap:6px 22px;font-size:13px}
  .legal-page main{padding:40px 44px;border-color:#dce5df;border-radius:20px;box-shadow:0 8px 30px #243c2e05;margin-block:22px}
  .legal-page h1{font-size:38px;letter-spacing:-.035em;margin:12px 0 26px;line-height:1.2}
  .legal-page h2{font-size:22px;font-weight:650;letter-spacing:-.015em;margin-top:32px}
  .legal-page .legal-notice{border:1px solid #dbcda9;border-radius:12px;background:#faf6eb;font-size:14px;line-height:1.7;padding:18px 20px}
  .legal-page .updated{font-size:12px;text-transform:uppercase;letter-spacing:.08em}
  @media(max-width:850px){
    .wrap{padding-inline:24px}.nav{gap:18px}.brand{padding-right:20px;font-size:21px}.nav-tab,.navlinks>a{padding-inline:13px;font-size:13px}
    .hero{padding:36px;min-height:300px}.hero h1{font-size:42px}.hero p{max-width:460px;font-size:15px}
    .card,.layout.view-dictation #dictationPanel{padding:26px}
  }
  @media(max-width:640px){
    .wrap{padding-inline:16px}.top{min-height:0}.nav{min-height:0;gap:12px;padding-block:16px}.brand{border:0;padding:0;font-size:21px}.logo{width:36px;height:36px;font-size:21px}
    .navlinks{width:100%;display:flex;gap:6px;padding:0;overflow:visible}.nav-tab,.navlinks>a{flex:1;min-height:40px;padding-inline:8px;font-size:12px;text-align:center;white-space:nowrap}.navright{display:none}
    .hero{margin:20px 0;padding:28px 24px;min-height:275px;border-radius:18px}.hero h1{font-size:34px;margin:15px 0;line-height:1.14}.hero p{font-size:14px;line-height:1.7}.eyebrow{font-size:9px;letter-spacing:.12em}
    .hero::before{background-image:linear-gradient(90deg,#fffffff5,#ffffffd6 65%,#ffffffb3),url('assets/hero-centered.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d')}
    .hero[data-view="worksheet"]::before{background-image:linear-gradient(90deg,#fffffff5,#ffffffde 65%,#ffffffb3),url('assets/practice-desk-jade.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d')}
    .hero[data-view="dictation"]::before{background-image:linear-gradient(90deg,#fffffff5,#ffffffde 65%,#ffffffb3),url('assets/hero-dictado.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d')}
    .card,.layout.view-dictation #dictationPanel{padding:22px 18px;border-radius:16px}.cardhead{padding-bottom:17px;margin-bottom:20px}.cardhead h2{font-size:22px}.tabs{margin-bottom:24px}
    .pane,#practicar .pane{padding:18px}.textinput,.dictsearch,.sentrow input{font-size:16px;min-height:50px}.primary{padding-inline:16px}
    #worksheetPanel .worksheet-character-details{padding:16px}.dictation-add-row{gap:8px}.dictation-add-row button{min-width:84px}.dictation-choice{padding:16px}.foot{padding-inline:20px}.foot nav{gap:2px 18px}
    .content{padding:22px 18px}.legal-page header,.legal-page footer{padding-inline:22px}.legal-page main{margin:16px 12px;padding:26px 22px;border-radius:16px}.legal-page h1{font-size:30px}.legal-page h2{font-size:20px}
  }
}

@media screen and (max-width:760px){.hero[data-view="dictation"]::before{background-image:linear-gradient(90deg,#fffffff5,#ffffffde 65%,#ffffffb3),url("assets/hero-dictado-mobile.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d");}}


/* Component: editorial-refinements.css */
@media screen{
 .hero{position:relative;isolation:isolate}
 .hero::before{content:'';position:absolute;z-index:-1;animation:hero-drift 4.8s ease-out both;transform-origin:75% 50%}
 .hero[data-view="worksheet"]::before{animation-name:worksheet-drift}
 .hero[data-view="dictation"]::before{animation-name:dictation-drift}
 .hero h1 span{font-family:Georgia,'Palatino Linotype','Times New Roman',serif;font-style:italic;font-weight:500;letter-spacing:-.035em}
 .hero-motion{position:absolute;right:0;bottom:0;width:53%;height:100%;pointer-events:none;z-index:-1;opacity:.7}
 .hero-motion path{fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-dasharray:650;stroke-dashoffset:650;animation:hero-line 4.8s ease-out forwards}
 .hero-motion .motion-grid{stroke:#205c4860;stroke-width:1.5}
 .hero-motion circle{fill:#ffffffa0;animation:hero-light 4.8s ease-out both}
 .hero-motion .worksheet-art{display:none}
 .hero[data-view="worksheet"] .hero-motion .landscape-art{display:none}
 .hero[data-view="worksheet"] .hero-motion .worksheet-art{display:block}
 .about-page .content{padding:36px 40px;margin-bottom:64px}
 .about-page .section{padding:30px 0}
 .about-page .section:first-child{padding-top:0}
 .about-page .section:last-child{padding-bottom:0}
 .about-page .section h2{font-size:24px;line-height:1.35;margin:0 0 18px;padding-left:14px;border-left:3px solid #205c48;letter-spacing:-.025em}
 .about-page .grid{margin-top:22px;gap:16px}
 .about-page .feature{display:block;padding:24px;text-decoration:none;color:inherit;position:relative}
 .about-page a.feature h3{padding-right:20px}
 .about-page a.feature::after{content:'↗';position:absolute;right:20px;top:24px;color:#205c48;font-size:18px}
 .about-page a.feature:hover{background:#edf4ee;border-color:#9bb7a6}
 .about-page .feature h3{font-size:19px;line-height:1.4;margin:0 0 12px;letter-spacing:-.02em}
 .about-page .feature p{font-size:14px;line-height:1.7}
 .about-page .section:last-child>p{text-align:justify;text-align-last:left;hyphens:auto}
 #sentenceMode #frases>.pane-title{border:0;padding:0;margin-bottom:10px;text-transform:none;letter-spacing:0;font:650 13px/1.55 system-ui,'Segoe UI',sans-serif;color:#304f40!important}
 #sentenceInput{font-family:'Noto Sans SC','Microsoft YaHei','SimSun',sans-serif;border-radius:11px;min-height:54px;font-size:17px;padding:13px 16px;box-shadow:0 1px 2px #1b3a2904}
 #sentenceInput:focus{box-shadow:0 0 0 4px #205c4810}
 #sentenceMode .sentence-help{font-size:13px;line-height:1.65;color:#52655c;margin-top:10px}
 .worksheet-preview-controls[hidden],#worksheetPreview[hidden]{display:none!important}
 .stroke-error-message{display:block;color:#52655c;font:12px/1.45 system-ui,sans-serif;text-align:center;max-width:170px;margin:6px auto 0;overflow-wrap:anywhere}
 .stroke-unavailable{display:grid!important;place-items:center;font-size:42px!important;color:#52655c;background:#f1f5f2;border-radius:10px}
 .stroke-character:has(.stroke-unavailable) .worksheet-detail-replay,.sentence-stroke-char:has(.stroke-unavailable) .sentence-stroke-replay{display:none}
 @keyframes hero-drift{from{transform:scale(1.04) translateX(6px)}to{transform:scale(1) translateX(0)}}
 @keyframes worksheet-drift{from{transform:scale(1.04) translateY(6px)}to{transform:scale(1) translateY(0)}}
 @keyframes dictation-drift{from{transform:scale(1.04) translateX(6px)}to{transform:scale(1) translateX(0)}}
 @keyframes hero-line{to{stroke-dashoffset:0}}
 @keyframes hero-light{from{opacity:0;transform:translateY(16px)}to{opacity:.8;transform:translateY(0)}}
 @media(max-width:640px){.about-page .content{padding:26px 22px}.about-page .section h2{font-size:22px}.about-page .feature{padding:20px}.hero-motion{width:65%;opacity:.4}#sentenceInput{min-height:50px;font-size:16px}}
 @media(prefers-reduced-motion:reduce){.hero::before,.hero-motion path,.hero-motion circle{animation:none!important;transform:none}.hero-motion path{stroke-dashoffset:0}}
}
@media print{.hero-motion{display:none!important}}

@media screen {
 .dictation-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
 .dictation-choice{grid-template-columns:minmax(0,1fr);gap:12px;align-items:start;padding-right:16px}
 .dictation-choice-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
 .dictation-word-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
 .dictation-choice .dictation-word-heading strong{font-size:29px;line-height:1.3}
 .dictation-word-audio{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;flex:none;font-size:17px}
 .dictation-choice-copy .dictation-choice-meaning{white-space:normal;overflow-wrap:anywhere;max-width:100%}
 .dictation-choice-strokes{grid-column:1;grid-row:auto;justify-content:center;align-self:start;margin:0;max-width:100%}
 .dictation-choice .dictation-remove{top:4px;right:4px;display:grid;place-items:center;width:23px;height:23px;padding:0;border:1px solid #e4b4b4;background:#fff;font-size:19px;z-index:1}
 .dictation-choice-stroke-wrap:first-child .dictation-choice-stroke-replay{right:32px}
 .dictation-answer-card .dictation-word-heading{margin-bottom:12px}
 .dictation-answer-card .dictation-word-heading h4{margin:0}
 .hero[data-view="dictation"] .eyebrow::before{display:none}
 .hero[data-view="dictation"] .hero-motion{display:none}
 .hero[data-view="dictation"]::before{animation:dictation-image-reveal 1.8s ease-out both}
 @keyframes dictation-image-reveal{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}
 @media(max-width:600px){.dictation-choices{grid-template-columns:minmax(0,1fr)}.dictation-choice-strokes{margin-top:8px}.dictation-choice .dictation-word-heading strong{font-size:27px}}
 @media(prefers-reduced-motion:reduce){.hero[data-view="dictation"]::before{animation:none;opacity:1}}
}
@media screen {
 .hero::before,.hero[data-view="worksheet"]::before,.hero[data-view="dictation"]::before{animation:hero-image-reveal 1.8s ease-out both}
 @keyframes hero-image-reveal{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}
 .hero-motion{display:none}
 #worksheetPreview{display:none!important}
 #worksheetPanel .worksheet-character-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:24px;align-items:center}
 #worksheetPanel .worksheet-detail-reading{width:auto;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
 #worksheetPanel .worksheet-detail-reading strong{font-size:29px;line-height:1.4}
 .worksheet-stroke-pane{min-width:0;display:flex;flex-direction:column;align-items:center;gap:14px}
 .worksheet-stroke-heading{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:600;color:#52655c}
 #worksheetPanel .worksheet-detail-remove{position:static;flex:none;font:500 13px/1.4 system-ui,sans-serif}
 #worksheetPanel #worksheetWriterTarget{min-height:0!important;height:auto!important;width:100%;padding:0!important;margin:0;display:flex;justify-content:center;align-items:center!important;gap:16px!important;flex-wrap:wrap;overflow:visible}
 #worksheetPanel #worksheetWriterTarget .stroke-character{flex:0 0 auto!important;min-height:0!important;padding:12px;border:1px solid #dce5df;border-radius:11px;background:white}
 #worksheetPanel #worksheetWriterTarget .stroke-label{display:none}
 .worksheet-word-list{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
 .worksheet-word-list[hidden]{display:none}
 .worksheet-word-chip{display:inline-flex;align-items:center;border:1px solid #dce5df;border-radius:10px;overflow:hidden;background:#f8faf8}
 .worksheet-word-chip button{border:0;background:transparent;color:#205c48;padding:9px 12px;font-size:18px;cursor:pointer}
 .worksheet-word-chip button:last-child{color:#a44848;font-size:20px}
 #hanziInput,#sentenceInput,#dictationInput,#worksheetCharacterInput,#search{font-family:system-ui,'Segoe UI','Microsoft YaHei','PingFang SC',sans-serif!important;font-size:17px!important;font-weight:400!important;line-height:1.5!important;letter-spacing:0!important;min-height:54px;padding:13px 48px 13px 16px!important;border-radius:11px}
 #hanziInput::placeholder,#sentenceInput::placeholder,#dictationInput::placeholder,#worksheetCharacterInput::placeholder{font-family:inherit;font-size:inherit;font-weight:400;color:#65776e;opacity:1}
 #characterMode>.fieldlabel,#worksheetPanel .worksheet-character-search>.fieldlabel,#dictationSetup>.fieldlabel,label[for="dictationInput"],#sentenceMode #frases>.pane-title{font:650 13px/1.55 system-ui,'Segoe UI',sans-serif!important;color:#304f40!important;letter-spacing:0;text-transform:none}
 .handwriting-canvas{touch-action:none;user-select:none;background-image:linear-gradient(90deg,transparent 49.7%,#dce5df 49.7%,#dce5df 50.3%,transparent 50.3%),linear-gradient(0deg,transparent 49.7%,#dce5df 49.7%,#dce5df 50.3%,transparent 50.3%)}
 .handwriting-results{display:flex;flex-wrap:wrap;gap:8px}
 @media(max-width:520px){#worksheetPanel .worksheet-character-details{grid-template-columns:1fr;gap:20px;padding:20px}.worksheet-stroke-pane{border-top:1px solid #dce5df;padding-top:16px}}
 @media(prefers-reduced-motion:reduce){.hero::before,.hero[data-view="worksheet"]::before,.hero[data-view="dictation"]::before{animation:none;opacity:1;transform:none}}
}
@media screen {
 #handwritingPanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,240px);grid-template-rows:auto 280px auto 64px;gap:12px 20px;align-items:start;overflow-anchor:none}
 #handwritingPanel[hidden]{display:none}
 #handwritingPanel .handwriting-head{grid-column:1/-1;grid-row:1;min-height:42px}
 #handwritingPanel .handwriting-canvas{grid-column:1;grid-row:2;width:280px;height:280px;max-width:100%;margin:0 auto;flex:none;align-self:start}
 #handwritingPanel .handwriting-actions{grid-column:1;grid-row:3;margin:0}
 #handwritingPanel #handwritingStatus{grid-column:1;grid-row:4;height:64px;margin:0;overflow:auto;font-size:13px;line-height:1.5}
 #handwritingPanel #handwritingResults{grid-column:2;grid-row:2/5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:48px;align-content:start;height:400px;min-height:400px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;gap:8px;margin:0;padding:4px}
 #handwritingPanel .handwriting-candidate{min-width:0;height:48px;padding:6px;font-size:25px}
 body>#handwritingPanel{width:min(94vw,760px);height:480px;max-height:94vh;top:3vh;transform:translateX(-50%);display:grid;overflow-y:auto}
 @media(max-width:600px){
  #handwritingPanel{display:flex;flex-direction:column;height:650px;gap:10px;overflow:hidden}
  #handwritingPanel .handwriting-head{flex:none;width:100%}
  #handwritingPanel .handwriting-canvas{width:250px;height:250px;flex:none;max-width:100%;margin:0 auto}
  #handwritingPanel .handwriting-actions{flex:none;width:100%}
  #handwritingPanel #handwritingStatus{flex:none;height:60px;width:100%}
  #handwritingPanel #handwritingResults{flex:1;width:100%;height:auto;min-height:0;grid-template-columns:repeat(5,minmax(0,1fr))}
  body>#handwritingPanel{display:flex;height:94vh;width:94vw;max-height:none}
  body>#handwritingPanel .handwriting-canvas{width:min(250px,31vh);height:min(250px,31vh)}
 }
}

@media screen{.hero .eyebrow::before{content:none!important;display:none!important}.hero.hero-image-reset::before{animation:none!important}}


/* Component: typography.css */
/* Shared screen typography for every HanziLab page. */
@media screen {
 :root{--font-ui:system-ui,'Segoe UI',Arial,sans-serif;--font-han:system-ui,'Segoe UI','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;--font-accent:Georgia,'Palatino Linotype','Times New Roman',serif;--text-body:var(--bi-type-body);--text-field:17px;--text-label:14px;--text-help:14px;--text-button:14px;--text-section:25px;--text-subsection:20px}
 body{font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--bi-line-body)}
 button,input,select,textarea{font-family:var(--font-ui)!important;letter-spacing:normal}
 .han,.handwriting-candidate{font-family:var(--font-han)!important}
 h1,h2,h3,h4{font-family:var(--font-ui);line-height:1.3;font-weight:650}
 .hero h1{font-family:var(--font-ui);font-weight:700;line-height:1.12}
 .hero h1 span{font-family:var(--font-accent);font-style:italic;font-weight:500}
 .cardhead h2,.about-page .section h2{font-family:var(--font-ui);font-size:var(--text-section);line-height:1.3;font-weight:650}
 .about-page .feature h3,.sentence-stroke-section h3,.dictation-answers h3{font-family:var(--font-ui);font-size:var(--text-subsection);line-height:1.4;font-weight:650}
 .hero p,.hero .lead{font-family:var(--font-ui);font-size:16px;line-height:1.7}
 .hero .eyebrow{font-family:var(--font-ui);font-size:10px;font-weight:700;line-height:1.4}
 .fieldlabel,label[for="dictationInput"],#sentenceMode #frases>.pane-title,#worksheetPanel .worksheet-character-search>.fieldlabel{font-family:var(--font-ui)!important;font-size:var(--text-label)!important;font-weight:650!important;line-height:1.55!important}
 #hanziInput,#sentenceInput,#dictationInput,#worksheetCharacterInput,#search{font-family:var(--font-han)!important;font-size:var(--text-field)!important;font-weight:400!important;line-height:1.5!important}
 input::placeholder,textarea::placeholder{font-family:inherit;font-size:inherit;font-weight:400}
 .primary,.printbtn,.savebtn,.nav-tab,.tab,.navlinks>a{font-family:var(--font-ui)!important;font-size:var(--text-button);font-weight:650;line-height:1.5}
 .hint,.tiny,.tip,.sentence-help,.vocab-search-help,.dictation-help,.worksheet-search-help,#handwritingStatus{font-family:var(--font-ui);font-size:var(--text-help);line-height:1.65}
 .pinyin,.dictation-choice-reading,.sentence-stroke-pinyin,.worksheet-detail-reading>span{font-family:var(--font-ui);line-height:1.5}
 .hanzi-suggestion small,.autocomplete small,.dictation-choice-meaning,.meaning{font-family:var(--font-ui);line-height:1.6}
 .foot{font-family:var(--font-ui);font-size:12px;line-height:1.65}
 @media(max-width:640px){.cardhead h2,.about-page .section h2{font-size:23px}.about-page .feature h3{font-size:19px}}
}
@media screen{
 #characterMode>.fieldlabel,label[for="dictationInput"],#worksheetPanel .worksheet-character-search>.fieldlabel,#sentenceMode #frases>.pane-title{font-family:var(--font-ui)!important;font-size:var(--text-label)!important;font-weight:650!important;line-height:1.55!important}
 .dictation-intro{font-family:var(--font-ui);font-size:var(--text-help);line-height:1.65}
}

/* Shared screen design tokens. Learning glyphs and A4 print remain independent. */
@media screen {
 :root {
  --bi-type-editorial:2.75rem;--bi-line-editorial:3.1875rem;
  --bi-type-legal:2.25rem;--bi-line-legal:2.6875rem;
  --bi-type-panel:1.5625rem;--bi-line-panel:2.0625rem;
  --bi-type-section:1.375rem;--bi-line-section:1.8125rem;
  --bi-type-card:1.25rem;--bi-line-card:1.75rem;
  --bi-type-card-small:1.125rem;--bi-line-card-small:1.625rem;
  --bi-type-body:1rem;--bi-line-body:1.625rem;
  --bi-type-ui:.875rem;--bi-line-ui:1.375rem;
  --bi-type-meta:.8125rem;--bi-line-meta:1.25rem;
  --bi-type-micro:.75rem;--bi-line-micro:1.1875rem;
  --bi-type-field:1.0625rem;
  --bi-space-1:4px;--bi-space-2:8px;--bi-space-3:12px;--bi-space-4:16px;
  --bi-space-6:24px;--bi-space-8:32px;--bi-space-12:48px;
  --bi-radius-control:8px;--bi-radius-small:12px;--bi-radius-card:14px;--bi-radius-panel:18px;
  --bi-width-tools:1180px;--bi-width-reading:900px;
 }
}


/* Component: mobile.css */
/* Screen layout only: search, recognition, exercise flow and print remain in their modules. */
@media screen and (max-width: 760px) {
  :root { --text-body:16px; --text-label:14px; --text-help:14px; --text-button:14px; }
  html { -webkit-text-size-adjust:100%; scroll-padding-top:16px; }
  .wrap { width:100%; padding-inline:16px; }
  .top { height:auto; min-height:0; }
  .nav { flex-wrap:wrap; gap:12px; padding-block:14px; }
  .brand { margin-right:0; padding-right:0; border-right:0; }
  .navlinks { width:100%; min-width:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .navlinks .nav-tab,.navlinks>a { min-width:0; min-height:48px; padding:8px 4px; white-space:normal; font-size:13px; line-height:1.35; text-align:center; }
  .navright { display:none; }
  .hero { min-height:0; margin:18px 0; padding:26px 20px; border-radius:16px; }
  .hero>div { min-width:0; max-width:100%; }
  .hero h1 { font-size:clamp(28px,7.5vw,38px); line-height:1.15; overflow-wrap:break-word; }
  .hero p,.hero .lead { font-size:16px; line-height:1.65; }
  .layout { grid-template-columns:minmax(0,1fr); gap:16px; padding-bottom:28px; }
  .leftcol,.rightcol,.card,.pane,.content { min-width:0; max-width:100%; }
  .card,.layout.view-dictation #dictationPanel { padding:20px 16px; }
  #practicar .workspace { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; }
  .pane,#practicar .pane { padding:16px; }
  .cardhead { flex-wrap:wrap; gap:8px; }
  .tabs { gap:20px; flex-wrap:wrap; }
  .inputrow,.sentrow,.worksheet-search-row,.dictation-add-row { display:flex; flex-direction:column; align-items:stretch; gap:10px; }
  .dictation-input-wrap { width: 100%; }
  .inputrow>*,.sentrow>*,.worksheet-search-row>*,.dictation-add-row>* { min-width:0; max-width:100%; }
  .inputrow>.primary,.sentrow>.primary,.worksheet-search-row>.primary,.dictation-add-row>.primary { width:100%; min-height:48px; }
  input,textarea,select { font-size:16px; }
  .iconbtn,.audio-btn,.dictation-word-audio { min-width:44px; min-height:44px; }
  .controls,.stroke-display-controls { flex-wrap:wrap; gap:12px; }
  .stroke-display-controls label { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .stroke-display-controls select,.dictation-controls select { min-height:44px; font-size:16px; max-width:100%; }
  .autocomplete,.hanzi-suggestions,.vocab-suggestions { max-width:100%; max-height:320px; max-height:min(320px,45svh); overflow-y:auto; overscroll-behavior:contain; }
  .autocomplete button,.hanzi-suggestion { min-height:48px; white-space:normal; overflow-wrap:anywhere; }
  .wordinfo { flex-wrap:wrap; min-width:0; }
  .meaning,.pinyin,.sentence-result-hanzi,.example-sentence-row .han { overflow-wrap:anywhere; }
  .sentence-result-top,.example-sentence-row { flex-wrap:wrap; align-items:flex-start; }
  .example-actions { width:100%; min-width:0; flex-direction:row; flex-wrap:wrap; }
  .example-actions button { min-height:44px; flex:1 1 120px; }
  .sentence-result,.dictation-answer-card { padding:16px; }
  .sentence-segment { grid-template-columns:minmax(52px,max-content) minmax(0,1fr); }
  .sentence-stroke-grid { max-width:100%; }
  .privacy-examples { padding:14px; overflow-wrap:anywhere; }
  #worksheetPanel .worksheet-character-details { grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px; gap:16px; }
  .worksheet-stroke-pane { border-top:1px solid #dce5df; padding-top:14px; }
  .worksheet-stroke-heading { flex-wrap:wrap; }
  #worksheetPanel .worksheet-detail-remove { min-height:44px; padding:8px 14px; }
  .worksheet-word-chip button { min-height:44px; }
  .worksheet-actions { grid-template-columns:minmax(0,1fr); }
  .worksheet-actions button { width:100%; min-height:48px; white-space:normal; }
  .dictation-choice { grid-template-columns:minmax(0,1fr); padding:16px; }
  .dictation-choice-strokes { grid-column:1; grid-row:auto; justify-content:center; max-width:100%; flex-wrap:wrap; }
  .dictation-choice .dictation-remove { top:4px; right:4px; width:44px; height:44px; }
  .dictation-choice-stroke-wrap:first-child .dictation-choice-stroke-replay { right:52px; }
  .dictation-selection-head { flex-wrap:wrap; gap:6px; }
  #dictationAnswerList { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dictation-controls label { width:100%; justify-content:space-between; flex-wrap:wrap; gap:8px; }
  #dictationStart { width:100%; margin-left:0; min-height:48px; }
  .dictation-round-actions button { min-height:48px; white-space:normal; }
  .about-page .content { padding:22px 18px; margin-bottom:28px; }
  .about-page .grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .about-page .feature { padding:20px; }
  .about-page .section>p,.about-page .feature p { text-align:left; }
  .foot { padding:24px 16px; }
  .foot nav { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px; }
  .foot nav a { display:inline-flex; align-items:center; min-height:44px; }
  .legal-page main { margin:16px 12px; padding:24px 18px; overflow-wrap:anywhere; }
  .legal-page nav { display:flex; flex-wrap:wrap; }
  .legal-page nav a { min-height:44px; display:inline-flex; align-items:center; }
  .legal-page table { display:block; max-width:100%; overflow-x:auto; }
}
@media screen and (max-width:600px) {
  #practicar .workspace,#worksheetPanel .worksheet-character-details,#dictationAnswerList { grid-template-columns:minmax(0,1fr); }
}
@media screen and (max-width:600px) {
  body>#handwritingPanel {
    top:8px; left:50%; transform:translateX(-50%); width:calc(100% - 16px);
    height:calc(100dvh - 16px); max-height:calc(100dvh - 16px);
    padding:12px; gap:8px; border-radius:14px; overflow-y:auto;
    padding-bottom:max(12px,env(safe-area-inset-bottom));
  }
  body>#handwritingPanel .handwriting-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  body>#handwritingPanel .handwriting-head strong { font-size:14px; line-height:1.4; }
  body>#handwritingPanel .handwriting-head button { min-width:64px; min-height:44px; flex:none; }
  body>#handwritingPanel .handwriting-canvas { width:min(250px,34dvh,100%); height:min(250px,34dvh); aspect-ratio:1; margin:0 auto; }
  body>#handwritingPanel .handwriting-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  body>#handwritingPanel .handwriting-actions button { min-width:0; min-height:44px; padding:8px; white-space:normal; font-size:13px; }
  body>#handwritingPanel #handwritingStatus { height:48px; min-height:48px; font-size:13px; }
  body>#handwritingPanel #handwritingResults { flex:1 0 96px; min-height:96px; height:96px; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-rows:44px; overflow-y:auto; }
  body>#handwritingPanel .handwriting-candidate { height:44px; min-width:0; font-size:24px; }
}
@media screen and (max-width:360px) {
  .wrap { padding-inline:10px; }
  .hero { padding:22px 16px; }
  .card,.layout.view-dictation #dictationPanel { padding:18px 12px; }
  .navlinks .nav-tab,.navlinks>a { font-size:12px; }
}
/* Anchor clear controls to the input's first row, not to the stacked action. */
@media screen and (max-width:760px) {
  .inputrow,.sentrow,.worksheet-search-row { position:relative; }
  #characterMode #clearCharacterInput,
  #sentenceMode #clearSentenceInput,
  #worksheetPanel #clearWorksheetInput {
    position:absolute; right:5px; left:auto; top:27px; bottom:auto;
    transform:translateY(-50%); width:44px; height:44px; min-height:44px;
    padding:0; display:grid; place-items:center; margin:0; z-index:2;
  }
  #hanziInput,#sentenceInput,#worksheetCharacterInput { padding-right:54px!important; }
  .tabs .tab { min-height:44px; }
  .sentence-stroke-replay,.worksheet-detail-replay,
  .dictation-choice-stroke-replay { min-width:44px; min-height:44px; }
  .sentence-stroke-char { padding-top:52px; }
  #worksheetPanel #worksheetWriterTarget .stroke-character { padding-top:52px; }
  .dictation-choice-stroke-wrap { padding-top:52px; }
  code,pre { overflow-wrap:anywhere; word-break:break-word; white-space:pre-wrap; }
}
/* The canvas always keeps its drawing coordinate system square. */
body>#handwritingPanel .handwriting-canvas {
  width:min(280px,38vh,100%); height:auto; aspect-ratio:1;
}
@media screen and (max-width:600px) {
  body>#handwritingPanel .handwriting-canvas {
    width:min(250px,34dvh,100%); height:auto; aspect-ratio:1;
  }
}
@media screen and (min-width:601px) and (max-height:500px) {
  body>#handwritingPanel {
    top:8px; height:calc(100dvh - 16px); max-height:calc(100dvh - 16px);
    padding:12px; gap:8px 16px; overflow:hidden;
    grid-template-columns:minmax(0,1fr) minmax(180px,240px);
    grid-template-rows:44px minmax(0,1fr) auto 44px;
  }
  body>#handwritingPanel .handwriting-canvas {
    width:min(200px,calc(100dvh - 210px),100%); height:auto;
  }
  body>#handwritingPanel .handwriting-actions {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px;
  }
  body>#handwritingPanel .handwriting-actions button {
    min-width:0; min-height:44px; padding:4px; font-size:12px; white-space:normal;
  }
  body>#handwritingPanel #handwritingStatus { height:44px; min-height:0; }
  body>#handwritingPanel #handwritingResults { height:100%; min-height:0; }
}


/* Component: performance.css */
.vocabulary-load-status { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:10px 0; color:#365f55; font-size:14px; line-height:1.5; }
.vocabulary-load-status[hidden] { display:none!important; }
.vocabulary-load-status button { min-height:44px; padding:6px 12px; border:1px solid #b9cec5; border-radius:8px; background:#fff; color:#215c4b; font:inherit; cursor:pointer; }
.vocabulary-load-status button[hidden] { display:none!important; }


/* Component: experience.css */
/* Lightweight feedback, readable empty states and compact mobile heroes. */
@media screen {
  /* Keep removal in the outer corner of each word card at every width. */
  #characterMode .workspace > .pane:first-child,
  #worksheetPanel .worksheet-character-details,
  .dictation-choice { position:relative; }
  #characterMode .workspace > .pane:first-child > .pane-title,
  .dictation-choice .dictation-word-heading { padding-right:48px; }
  #characterMode .featured-actions { margin-top:0; }
  #characterMode #featuredClear,
  #worksheetPanel .worksheet-detail-remove,
  .dictation-choice .dictation-remove {
    position:absolute; top:10px; right:10px; z-index:2;
    display:grid; place-items:center; width:44px; height:44px;
    min-width:44px; min-height:44px; padding:0;
    border:1px solid #e4b4b4; border-radius:8px;
    background:#fff; color:#a44848; font:400 24px/1 system-ui,sans-serif;
  }
  #characterMode #featuredClear:hover,
  #worksheetPanel .worksheet-detail-remove:hover,
  .dictation-choice .dictation-remove:hover { background:#fff0f0; }
  #worksheetPanel .worksheet-detail-remove[hidden] { display:none; }
  #worksheetPanel .worksheet-stroke-heading { padding-right:48px; }
  .dictation-choice-stroke-wrap:first-child .dictation-choice-stroke-replay { right:4px; }
  @media (max-width:520px) {
    #worksheetPanel .worksheet-detail-reading { padding-right:48px; }
  }
  #worksheetPanel #saveBtn { background:#c62828; border-color:#c62828; color:#fff; }
  #worksheetPanel #saveBtn:hover:not(:disabled) { background:#a91f1f; border-color:#a91f1f; }
  #worksheetPanel #saveBtn:focus-visible { outline:3px solid #c6282850; outline-offset:3px; }
  .about-page .hero::before { background-image:linear-gradient(90deg,#ffffffed 0%,#ffffffd4 34%,#ffffff72 57%,#ffffff00 82%),url('assets/about-cultural-jade.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d'); background-position:center; }
  .tool-empty-state svg.dictation-empty-art { fill:none; stroke:#386653; stroke-width:1.6; }
  .action-symbol { display:inline-block; font-size:1em; line-height:1; vertical-align:baseline; }
  .tool-empty-state { display:flex; align-items:center; gap:14px; padding:18px; margin:16px 0; border:1px dashed #cbdcd3; border-radius:14px; background:#f7faf8; color:#426356; }
  .tool-empty-state[hidden] { display:none; }
  .tool-empty-state svg { width:56px; height:56px; flex:none; fill:#e6f0ea; stroke:#54816e; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
  .tool-empty-state strong { font-size:14px; font-weight:650; }
  .tool-empty-state p { font-size:13px; line-height:1.5; margin:4px 0 0; }
  .field-help { font-size:13px; color:#526b60; margin:8px 0 12px; }
  .field-help summary { width:fit-content; cursor:pointer; padding:5px 0; text-decoration:underline; text-underline-offset:3px; }
  .field-help p { margin:5px 0; max-width:52ch; }
  .toast.is-success::before { content:'✅ '; }
  .audio-is-playing { background:#e6f3ec!important; border-color:#57967d!important; box-shadow:0 0 0 3px #205c4814; }
  .audio-status-active { color:#205c48; font-weight:650; }
  .audio-status-active::before { content:'🔊 '; }
  .result-enter { animation:result-enter .25s ease-out both; }
  .dictation-choice { animation:result-enter .25s ease-out both; }
  @keyframes result-enter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
  @media (max-width:600px) {
    .about-page .hero::before { background-image:linear-gradient(90deg,#fffffff2,#ffffffd4 65%,#ffffff9c),url('assets/about-cultural-jade-mobile.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d'); }
    .hero,.about-page .hero { padding:22px 18px; min-height:0; margin-block:16px 22px; }
    .hero h1,.about-page .hero h1 { font-size:clamp(27px,7.2vw,36px); line-height:1.12; margin:12px 0 14px; }
    .hero p,.about-page .hero .lead { font-size:14px; line-height:1.55; margin:0; max-width:45ch; }
    .hero .eyebrow { font-size:9px; letter-spacing:.13em; }
    .hero::before { background-position:center; }
    .tabs { gap:12px; }
    .tabs .tab { font-size:13px; white-space:normal; text-align:left; }
    .tool-empty-state { padding:14px 12px; gap:10px; }
    .tool-empty-state svg { width:44px; height:44px; }
    .field-help summary { min-height:44px; display:flex; align-items:center; }
    .worksheet-actions .printbtn,.worksheet-actions .savebtn { white-space:normal; }
  }
  @media (prefers-reduced-motion:reduce) {
    .result-enter,.dictation-choice { animation:none; }
    .audio-is-playing { transition:none; }
    .hero::before,.hero[data-view="worksheet"]::before,.hero[data-view="dictation"]::before { animation:none!important; transform:none; }
  }
}
[data-stroke-loading]{position:relative}
[data-stroke-loading]::after{
  content:attr(data-stroke-character);position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;background:#fff;color:#215c4b;
  font:500 clamp(30px,5vw,60px)/1.1 system-ui,'Segoe UI','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;
  pointer-events:none;
}
[data-stroke-unavailable]{display:grid;place-items:center;color:#215c4b;font-size:clamp(40px,6vw,72px);line-height:1.1}
@media print { .tool-empty-state,.field-help { display:none!important; } }

/* Fase 4: selected lexical units and a print-faithful A4 preview. */
.phase4-worksheet-selected,.phase4-worksheet-options{margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:13px;background:#f8faf8}
.phase4-worksheet-selected h3,.phase4-worksheet-options h3{margin:0 0 12px;color:#174c3d}
.phase4-selected-entry{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #dbe6df}
.phase4-selected-entry>div:first-child{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-width:0}
.phase4-selected-entry strong{font-size:27px;color:#174c3d}.phase4-selected-entry small{color:#5b6c63}
.phase4-selected-entry label{white-space:nowrap;font-size:13px}.phase4-selected-entry input{width:54px;padding:6px;border:1px solid #b9cec1;border-radius:7px}
.phase4-entry-actions{display:flex;gap:4px}.phase4-entry-actions button{min-width:38px;min-height:38px;border:1px solid #c9d9cd;border-radius:7px;background:white;color:#174c3d}
.phase4-entry-actions button[data-remove]{color:#b4232c;border-color:#efb5b5}.phase4-entry-actions button:disabled{opacity:.35}
.phase4-worksheet-options{display:flex;flex-wrap:wrap;gap:12px 22px}.phase4-worksheet-options h3{flex-basis:100%}.phase4-worksheet-options label{display:flex;align-items:center;gap:6px;font-size:14px}
#phase4PreviewButton{margin:0 0 10px}#phase4SheetPreview{margin:0 0 18px}#phase4SheetPreview[hidden]{display:none!important}
.phase4-preview-pages{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:18px;max-height:750px;overflow:auto;padding:12px;background:#e8eee9;border-radius:10px}
.phase4-preview-sheet{position:relative;width:min(210mm,100%);aspect-ratio:210/297;overflow:hidden;background:#fff;box-shadow:0 3px 14px #123a2930}
.phase4-preview-pages .phase4-page{position:absolute;top:0;left:0;width:210mm;min-height:297mm;transform:scale(var(--phase4-preview-scale,1));transform-origin:top left;background:#fff}
.phase4-page{box-sizing:border-box;width:210mm;min-height:297mm;padding:10mm;color:#222;background:#fff;font-family:Arial,sans-serif}
.phase4-page-header{display:flex;justify-content:space-between;align-items:center;height:7mm;border-bottom:.2mm solid #777;font-size:9pt}
.phase4-page-intro{display:flex;align-items:baseline;gap:2.5mm;height:7mm;white-space:nowrap;overflow:hidden;font-size:8pt}
.phase4-page-intro strong{font-size:13pt}.phase4-page-intro small{font-size:7pt;color:#555}
.phase4-page-blocks{display:flex;flex-direction:column;gap:2mm}
.phase4-character-block{break-inside:avoid;min-width:0}
.phase4-character-block>header{display:flex;align-items:baseline;gap:3mm;height:4mm;font-size:8pt;color:#444}
.phase4-character-block>header strong{font-size:11pt;color:#111}
.phase4-character-rows{display:flex;flex-direction:column}
.phase4-rice-row{position:relative;display:grid;grid-template-columns:repeat(12,15.8mm);height:15.8mm;break-inside:avoid}
.phase4-rice-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.phase4-rice-lines path{fill:none;stroke:#c4c4c4;stroke-width:1}
.phase4-grid-cell{position:relative;z-index:1;display:inline-grid;place-items:center;box-sizing:border-box;width:15.8mm;height:15.8mm;border:.15mm solid #aaa;font-size:27pt;line-height:1;color:#161616}
.phase4-grid-cell::after{content:attr(data-char);position:relative;z-index:1}
.phase4-faint::after{opacity:.2}.phase4-blank::after,.phase4-stroke-progress::after{content:""}
.phase4-stroke-progress svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
@media(max-width:720px){.phase4-selected-entry{grid-template-columns:minmax(0,1fr) auto}.phase4-selected-entry label{grid-column:1}.phase4-entry-actions{grid-column:2;grid-row:1 / span 2}.phase4-preview-pages{justify-content:stretch}}
@media print{
  @page{size:A4 portrait;margin:0}
  .print-only.sheet>.print-sheet-header{display:none!important}
  .phase4-page{width:210mm;height:297mm;min-height:0;padding:10mm;break-after:page;box-shadow:none;overflow:hidden;color:#111}
  .phase4-page:last-child{break-after:auto}
  #printRows{display:block!important}
  .phase4-grid-cell{color:#111!important}
  .phase4-preview-pages{display:none!important}
}
/* Dictado presents selection first, then only audio controls until review. */
.dictation-selection-actions{display:flex;align-items:flex-start;gap:5px;grid-column:2;grid-row:1}
.dictation-choice .dictation-selection-actions .dictation-remove{position:static;min-width:38px;min-height:38px;font-size:22px}
.dictation-selection-actions .dictation-move{min-width:38px;min-height:38px;border:1px solid #c9d9cd;border-radius:8px;background:white;color:#174c3d;font-size:20px}
.dictation-selection-actions .dictation-move:disabled{opacity:.35}
#dictationRound{text-align:center;padding:24px}#dictationRound .dictation-round-head{display:grid;justify-items:center;gap:14px}
#dictationProgress{font-size:clamp(24px,5vw,40px)!important}#dictationAudioStatus{font-size:18px!important}
#dictationReplay{min-height:64px!important;padding:14px 24px!important;font-size:20px}
#dictationReplay:disabled{opacity:.55}#dictationRound .dictation-round-actions{justify-content:center}
#dictationRound #dictationNext{min-height:54px;padding:12px 22px}
#dictationPause[hidden],#dictationStop[hidden],#dictationRepeats:has(option)[hidden]{display:none!important}
#dictationSetup label[hidden]{display:none!important}
.sentence-stroke-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:14px;color:#36584e;font-size:.9rem}
.sentence-stroke-pager[hidden]{display:none}
.sentence-stroke-pager button{min-height:40px;padding:8px 12px;border:1px solid #cfddd4;border-radius:10px;background:#fff;color:#215c4b;cursor:pointer}
.sentence-stroke-pager button:disabled{opacity:.5;cursor:default}
.pdf-save-hint{margin:9px 2px 0;color:#52675b;font-size:12px;line-height:1.5;text-align:center}
@media print{.pdf-save-hint{display:none!important}}

@media screen {
  #sentenceMode .sentence-input-wrap { position:relative; flex:1 1 0; min-width:0; width:100%; }
  #sentenceMode .sentence-input-wrap #sentenceInput { display:block; width:100%; min-width:0; padding-right:62px!important; }
  #sentenceMode .sentence-input-wrap #clearSentenceInput {
    position:absolute; right:10px; left:auto; top:50%; bottom:auto;
    transform:translateY(-50%); z-index:2; margin:0;
    display:grid; place-items:center; width:40px; height:40px; min-width:40px; min-height:40px;
  }
  #sentenceMode .sentence-input-wrap #clearSentenceInput[hidden] { display:none!important; }
  #sentenceMode .sentence-result-top { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:10px; }
  #sentenceMode .sentence-result-hanzi { min-width:0; overflow-wrap:anywhere; }
  #sentenceMode .sentence-result-actions { display:inline-flex; align-items:center; gap:6px; justify-self:end; flex:none; }
  #sentenceMode #sentenceAudioBtn,
  #sentenceMode #clearSentenceResult { display:grid; place-items:center; width:44px; height:44px; min-width:44px; min-height:44px; padding:0; margin:0; border-radius:8px; font-size:19px; line-height:1; }
  #sentenceMode #clearSentenceResult { border:1px solid #e4b4b4; background:#fff; color:#a82424; font-size:26px; }
  #sentenceMode #clearSentenceResult:hover { background:#fff0f0; }
  #sentenceMode #clearSentenceResult:focus-visible { outline:2px solid #b8322c; outline-offset:2px; }
  @media (max-width:760px) {
    #sentenceMode .sentrow { display:flex; flex-direction:column; }
    #sentenceMode .sentence-input-wrap { flex:none; width:100%; }
    #sentenceMode .sentence-input-wrap #clearSentenceInput { width:44px; height:44px; min-width:44px; min-height:44px; }
  }
}

/* Component: vocabulary.css */
/* Small additions within the existing vocabulary surface. */
:is(#practicar,#worksheetPanel,#dictationPanel) .vocabulary-composition-note { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; color:var(--green); font-size:14px; line-height:1.5; }
:is(#practicar,#worksheetPanel,#dictationPanel) .vocabulary-composition-note[hidden],:is(#practicar,#worksheetPanel,#dictationPanel) .vocabulary-individual-details[hidden],:is(#practicar,#worksheetPanel,#dictationPanel) .vocabulary-definition-evidence[hidden] { display:none; }
:is(#practicar,#worksheetPanel,#dictationPanel) .vocabulary-composition-note button { min-height:44px; white-space:normal; text-align:left; }
:is(#practicar,#worksheetPanel,#dictationPanel) .hanzi-suggestion-main { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; min-width:0; }
:is(#practicar,#worksheetPanel,#dictationPanel) .hanzi-suggestion-meaning { overflow-wrap:anywhere; font-size:14px; }
.vocabulary-traditional-label { display:inline-block; color:#7a3d12; background:#fff0da; border:1px solid #d6aa73; padding:2px 7px; border-radius:5px; font:600 12px/1.5 var(--font-ui,Arial,sans-serif); }
:is(#practicar,#worksheetPanel,#dictationPanel) .vocabulary-definition-evidence { font-size:14px; line-height:1.5; color:#52675f; margin:6px 0; }
:is(#practicar,#worksheetPanel,#dictationPanel) .vocabulary-individual-details { margin-top:12px; }
:is(#practicar,#worksheetPanel,#dictationPanel) .vocabulary-character-detail { display:flex; align-items:baseline; gap:12px; margin-top:8px; }
:is(#practicar,#worksheetPanel,#dictationPanel) .vocabulary-character-detail>.han { font-size:26px; flex-shrink:0; }
:is(#practicar,#worksheetPanel,#dictationPanel) .vocabulary-character-detail p { margin:2px 0; font-size:14px; overflow-wrap:anywhere; }

/* Plana: explicit, touch-sized stroke zoom controls. */
#worksheetPanel .worksheet-preview-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#worksheetPanel .worksheet-stroke-resize{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid #cddfd3;border-radius:8px;background:#fff;color:#215c4b;font-size:24px;line-height:1}
#worksheetPanel .worksheet-stroke-resize:hover,#worksheetPanel .worksheet-stroke-resize:focus-visible{border-color:#215c4b;outline-color:#215c4b}
#worksheetPanel #worksheetWriterTarget .stroke-character{max-width:100%}
#worksheetPanel #worksheetWriterTarget .stroke-label{display:block;font:600 14px/1.4 var(--font-ui,system-ui,sans-serif);color:#315f4d;text-align:center;margin-top:6px}
#worksheetPanel #worksheetWriterTarget .stroke-label[hidden]{display:none!important}
#sentenceStrokeGrid .sentence-stroke-label{display:none}
.dictation-stroke-pinyin{display:block;margin-top:5px;color:#315f4d;font:600 14px/1.4 var(--font-ui,system-ui,sans-serif);text-align:center}
.dictation-stroke-pinyin[hidden]{display:none!important}

/* Plana: compact preparation and one balanced rice-grid sheet for up to five characters. */
#worksheetPanel .worksheet-character-details{grid-template-columns:minmax(140px,.7fr) minmax(0,1.3fr);align-items:start;gap:12px;padding:12px;margin-top:10px}
#worksheetPanel .worksheet-detail-reading{gap:3px}
#worksheetPanel .worksheet-detail-reading strong{font-size:25px}
#worksheetPanel .worksheet-stroke-pane{min-width:0;gap:5px;align-items:stretch}
#worksheetPanel .worksheet-stroke-heading{min-height:30px}
#worksheetPanel .worksheet-detail-remove{top:3px}
#worksheetPanel #worksheetWriterTarget{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px!important;justify-content:stretch!important;align-items:start!important}
#worksheetPanel #worksheetWriterTarget .stroke-character{min-width:0;width:100%;max-width:none;padding:7px!important;box-sizing:border-box}
#worksheetPanel #worksheetWriterTarget .stroke-glyph{width:min(var(--worksheet-detail-size,78px),100%)!important;height:auto!important;aspect-ratio:1;margin:auto;min-width:0;min-height:0}
#worksheetPanel .worksheet-word-list{margin:8px 0 2px;min-height:0}
#worksheetPanel .worksheet-word-chip>span{padding:8px 10px;font-size:19px;color:#205c48}
#worksheetPanel .worksheet-word-chip button{min-width:36px;min-height:36px;padding:4px 8px}
#worksheetPanel .worksheet-character-search .tool-empty-state[hidden]{display:none!important}
#worksheetAddedNotice:not([hidden]){position:fixed;right:18px;bottom:18px;z-index:50;max-width:min(330px,calc(100vw - 36px));padding:10px 14px;margin:0;border:1px solid #bdd8c6;border-radius:9px;background:#edf7f0;box-shadow:0 8px 28px #173c2c25;animation:worksheet-notice-in .2s ease-out}
@keyframes worksheet-notice-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){#worksheetPanel .worksheet-character-details{grid-template-columns:minmax(0,1fr);padding:10px}#worksheetPanel #worksheetWriterTarget{grid-template-columns:repeat(auto-fit,minmax(94px,1fr))}}
@media(prefers-reduced-motion:reduce){#worksheetAddedNotice:not([hidden]){animation:none}}

/* Plana print reference: compact groups, filled pale steps and separated rice cells. */
.phase4-page-header{height:8mm;margin-bottom:2mm;font-size:9pt}
.phase4-page-header strong{font-size:14pt}
.phase4-page-blocks{gap:1mm}
.phase4-character-block>header{display:none}
.phase4-word-reference{font:8.5pt/1.35 Arial,sans-serif;max-height:8mm;overflow:hidden;color:#222}
.phase4-character-rows,.phase4-free-rows{display:flex;flex-direction:column;gap:.5mm}
.phase4-rice-row{grid-template-columns:repeat(12,14.9mm);column-gap:1mm;height:14.9mm;width:189.8mm}
.phase4-grid-cell{width:14.9mm;height:14.9mm;border:.15mm solid #aaa}
.phase4-model svg,.phase4-faint svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.phase4-model::after,.phase4-faint::after{content:""}
.phase4-worksheet-options input[type="number"]{width:72px;min-height:44px;padding:8px;border:1px solid #b9cec1;border-radius:7px;background:#fff;color:#202d2a}
.phase4-row-help{flex-basis:100%;margin:0;font-size:13px;line-height:1.5;color:#52655c}

/* Dictado: bloque simétrico y tipografía uniforme. */
#dictationPanel .dictation-mode-tabs{display:none!important}
#dictationPanel #dictationRound{display:flex;flex-direction:column;align-items:center;gap:24px;padding:32px 24px;text-align:center}
#dictationPanel #dictationRound[hidden]{display:none!important}
#dictationPanel #dictationRound .dictation-round-head{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;margin:0}
#dictationPanel #dictationRound #dictationProgress,
#dictationPanel #dictationRound #dictationAudioStatus,
#dictationPanel #dictationRound .dictation-paper-hint,
#dictationPanel #dictationRound button{font-family:inherit!important;font-size:18px!important;font-weight:400!important;line-height:1.6!important;letter-spacing:normal!important;color:var(--ink)!important;text-align:center}
#dictationPanel #dictationRound #dictationProgress,
#dictationPanel #dictationRound #dictationAudioStatus,
#dictationPanel #dictationRound .dictation-paper-hint{display:block;width:100%;max-width:540px;margin:0;padding:0;text-indent:0}
#dictationPanel #dictationRound .dictation-round-actions{display:flex;justify-content:center;gap:12px;width:100%;margin:0}
#dictationPanel #dictationRound #dictationNext{border:2px solid #215c4b!important;background:#fff!important;border-radius:10px;padding:12px 24px!important;min-height:52px}
#dictationPanel #dictationRound #dictationNext:hover{background:#eaf3ee!important}
#dictationPanel #dictationRound #dictationNext:focus-visible{outline:3px solid #91baab;outline-offset:3px}

#dictationPanel #dictationSummary{padding:32px 24px;text-align:center}
#dictationPanel #dictationSummary>strong{font-size:22px;color:var(--ink);margin:0 0 20px}
#dictationPanel #dictationSummary>p{max-width:540px;margin:0 auto 24px;line-height:1.6}
#dictationPanel #dictationSummary .dictation-round-actions{justify-content:center;gap:12px;margin:0}
#dictationPanel #dictationSummary .dictation-round-actions button{border:2px solid #215c4b;border-radius:10px;padding:12px 20px;min-height:50px}

/* Controles finales de Dictado según la referencia. */
#dictationPanel #dictationSummary .dictation-round-actions{gap:10px;align-items:center}
#dictationPanel #dictationSummary .dictation-round-actions button{min-height:48px;border-width:1px;border-radius:10px;font-size:14px;padding:10px 15px}
#dictationPanel #dictationSummary #dictationShowAnswers{background:#215c4b;color:#fff;border-color:#215c4b;font-weight:700}
#dictationPanel #dictationSummary #dictationRestart{flex:0 0 49px;width:49px;min-width:49px;padding:4px;background:#eef5f1;color:#215c4b;border-color:#215c4b;font-size:27px;font-weight:400}
#dictationPanel #dictationSummary #dictationChange{flex:0 0 auto;background:#fff5f5;color:#c52430;border-color:#efb4ba;font-weight:700}

#dictationPanel .dictation-progress-bar{display:flex;width:100%;max-width:540px;gap:3px;border-radius:9px;overflow:hidden;background:#e4eee8}
#dictationPanel .dictation-progress-step{flex:1;min-width:0;padding:7px 0;background:#e4eee8;color:#526b61;font-size:14px;line-height:1.4;text-align:center;transition:background-color .25s}
#dictationPanel .dictation-progress-step.is-reached{background:#215c4b;color:#fff}
#dictationPanel .dictation-progress-step.is-current{font-weight:700;background:#2f8065}
@media(prefers-reduced-motion:reduce){#dictationPanel .dictation-progress-step{transition:none}}

#dictationPanel #dictationRound #dictationNext{display:none!important}
#dictationPanel #dictationRound #dictationRoundRestart{flex:0 0 49px;width:49px;min-width:49px;min-height:48px;padding:4px;border:1px solid #215c4b;border-radius:10px;background:#eef5f1;color:#215c4b!important;font-size:27px!important}
#dictationPanel #dictationRound #dictationRoundExit{flex:0 0 auto;min-height:48px;padding:10px 15px;border:1px solid #efb4ba;border-radius:10px;background:#fff5f5;color:#c52430!important;font-size:14px!important;font-weight:700!important}
#dictationPanel .dictation-progress-bar{position:relative;gap:0;isolation:isolate}
#dictationPanel .dictation-progress-bar::before{content:'';position:absolute;inset:0 auto 0 0;width:var(--dictation-progress,0%);background:#215c4b;transition:width .7s ease;z-index:-1}
#dictationPanel .dictation-progress-step,#dictationPanel .dictation-progress-step.is-reached,#dictationPanel .dictation-progress-step.is-current{background:transparent}
#dictationPanel .dictation-progress-step.is-current{animation:dictation-progress-glow 1.8s ease-in-out infinite}
@keyframes dictation-progress-glow{0%,100%{box-shadow:inset 0 0 0 30px transparent}50%{box-shadow:inset 0 0 0 30px #ffffff20}}
@media(prefers-reduced-motion:reduce){#dictationPanel .dictation-progress-bar::before{transition:none}#dictationPanel .dictation-progress-step.is-current{animation:none}}

#dictationPanel #dictationRound .dictation-paper-hint{font-size:14px!important;line-height:1.6!important;color:var(--text-secondary,var(--muted))!important}

#dictationPanel .dictation-controls label[hidden]{display:none!important}
#dictationMessage[hidden]{display:none!important}
#dictationMessage.dictation-added-toast:not([hidden]){position:fixed;right:18px;bottom:18px;z-index:50;max-width:min(330px,calc(100vw - 36px));padding:10px 14px;margin:0;border:1px solid #bdd8c6;border-radius:9px;background:#edf7f0eb;color:#215c4b;box-shadow:0 8px 28px #173c2c25;animation:worksheet-notice-in .2s ease-out}
@media(prefers-reduced-motion:reduce){#dictationMessage.dictation-added-toast:not([hidden]){animation:none}}

/* Official monochrome mark on the A4 sheet; total header spacing stays 10 mm. */
body .phase4-page-header{height:10mm;margin-bottom:0}
body .phase4-print-logo{display:block;width:25mm;height:auto;max-height:9mm;object-fit:contain;filter:none}