:root{--scale:1;--ink:#203a35;--green:#166b5b;--paper:#faf8f1;--line:#d6dfd8;--gold:#f3b955;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;font-size:calc(18px * var(--scale));color:var(--ink);background:var(--paper)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;width:100%;margin:0;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}body{position:fixed;inset:0}button,select,input{font:inherit;color:inherit}button,select{min-height:52px;border:1px solid var(--line);background:white;border-radius:16px;padding:10px 18px;touch-action:manipulation}button{cursor:pointer;font-weight:650}button:focus-visible,select:focus-visible{outline:3px solid #ad5700;outline-offset:3px}button:disabled{opacity:.48;cursor:default}.primary{background:var(--green);color:white;border-color:var(--green)}.quiet{background:transparent}.small{font-size:.85rem}.tag{display:inline-block;font-size:.75rem;background:#fff1d4;color:#725016;border:1px solid #e4d1a4;padding:4px 9px;border-radius:9px}.blue{color:#155eb1}.muted{color:#536a63;font-size:.9rem}.pill{background:#e4efe8;border-radius:14px;padding:8px 14px}h1{font-size:1.65rem;margin:0 0 12px}h2{font-size:1.2rem}p{line-height:1.6;margin:8px 0 16px}#shell{height:100%;height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}header{display:flex;justify-content:space-between;align-items:center;padding:10px 24px;border-bottom:1px solid var(--line);gap:10px;flex-shrink:0}.brand{border:0;background:none;font-size:1.35rem;padding:4px 0;letter-spacing:.12em}.brand span{font-size:.65rem;display:block;letter-spacing:.1em;font-weight:400}.header-actions{display:flex;align-items:center;gap:16px}#offline{font-size:.7rem;max-width:220px}#app{flex:1;min-height:0;padding:24px clamp(16px,4vw,56px) 28px}.scroll{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.topline,.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.topline{justify-content:space-between}.filters{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.filters label{display:flex;align-items:center;gap:10px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:14px;margin-top:20px}.char-card{min-height:154px;display:flex;flex-direction:column;align-items:center;gap:5px;box-shadow:0 3px 0 #dfe5de}.char-card svg{width:80px;height:80px}.char-card .character{font-size:2.6rem}.word-row{padding:14px;background:white;border-radius:18px;margin:12px 0}.word-row .row button{padding:4px 18px}.word-row svg{width:70px;height:70px}.steps{display:flex;gap:8px;justify-content:center;margin:10px 0 20px}.steps button{flex:1;max-width:130px}.steps .active{background:var(--green);color:white}.steps .done:after{content:' ✓';font-size:.75rem}.lesson{max-width:1100px;margin:auto}.study{display:grid;grid-template-columns:minmax(260px,1fr) minmax(230px,.8fr);gap:28px;align-items:center;min-height:360px}.art-column{min-width:0;display:flex;flex-direction:column;align-items:center}.board{width:min(100%,420px);aspect-ratio:1;border:2px solid #b4c7bb;border-radius:20px;position:relative;background:#fff;overflow:hidden;touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none}.board svg{display:block;width:100%;height:100%}.gridlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.writer-host{position:absolute;inset:0;touch-action:none}.writer-host svg{width:100%!important;height:100%!important}.instruction{font-size:1.1rem;line-height:1.8}.study-controls{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.study-controls button{flex-grow:1}.footer-actions{display:flex;gap:12px;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin-top:20px}.footer-actions .primary{min-width:170px}.pinyin{font-size:1.6rem;letter-spacing:.04em;margin:6px}.empty{padding:50px 20px;text-align:center}.panel{background:white;border:1px solid var(--line);border-radius:20px;padding:22px;margin:16px 0;max-width:1000px}.setting{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;border-bottom:1px solid #eef0eb}.setting:last-child{border:0}input[type=checkbox]{width:26px;height:26px;margin:12px}input[type=number]{width:100px;min-height:52px;border-radius:12px;border:1px solid var(--line);padding:8px}textarea{width:100%;min-height:240px;font:16px ui-monospace,monospace;user-select:text;-webkit-user-select:text;touch-action:auto}pre{white-space:pre-wrap;word-break:break-word;font-size:.8rem;line-height:1.6;user-select:text;-webkit-user-select:text}a{color:#145f52;min-height:48px;display:inline-flex;align-items:center}summary{min-height:52px;cursor:pointer;padding:12px 0}.component.active{border:3px solid var(--green);background:#e9f4ef}.checklist{list-style:none;padding:0}.checklist li{background:#eef4ef;border-radius:12px;margin:9px 0;padding:14px}#warning{background:#fff0c8;color:#623f10;padding:10px 20px;font-size:.85rem;flex-shrink:0}#toast{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#203a35;color:white;border-radius:16px;padding:12px 20px;max-width:90%;pointer-events:none;z-index:20}#toast:empty{display:none}#printArea{display:none}@media(max-width:700px){header{padding:8px 16px}.header-actions{gap:8px}#offline{max-width:120px}.study{grid-template-columns:1fr;gap:12px}.board{width:min(78vw,360px)}.steps{gap:5px}.steps button{padding:8px}.footer-actions{position:sticky;bottom:-28px;background:var(--paper);padding-bottom:18px}.cards{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.char-card{min-height:140px}#app{padding-top:18px}}@media(orientation:landscape) and (max-height:750px){.board{width:min(52vh,380px)}.study{min-height:0}.steps{margin-bottom:12px}#app{padding-top:12px}.footer-actions{margin-top:12px}}@media print{@page{size:A4;margin:12mm}html,body{position:static;overflow:visible;height:auto;background:white}#shell{display:none}#printArea{display:block;color:black}.print-row{display:flex;break-inside:avoid;margin:0}.print-cell{width:25mm;height:25mm;border:.2mm solid #bbb}.print-cell svg{width:100%;height:100%}}
.faint{position:absolute;inset:0;opacity:.22;pointer-events:none}#ink{position:absolute;inset:0;touch-action:none}.overlay{position:absolute;inset:0}.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.photo-pair img{max-width:100%;max-height:700px;object-fit:contain}input:not([type=checkbox]){min-height:48px;min-width:48px;max-width:60%;padding:8px;border:1px solid #a5b6ad;border-radius:10px;font:inherit}button{min-width:48px}.brand{min-height:52px}fieldset{border:1px solid #ccd5ce;margin-bottom:16px}.print-cell{position:relative}.print-grid{position:absolute;inset:0}@media(max-width:700px){.photo-pair{grid-template-columns:1fr}.steps button{font-size:.85rem;min-width:48px}}@media print{.print-cell{flex-shrink:0}#printArea h1{font-size:20pt}#printArea p{font-size:12pt}}
.print-preview{max-width:760px;margin:20px auto}.print-preview .print-page{background:white;border:1px solid var(--line);padding:clamp(10px,3vw,30px);margin-bottom:24px}.print-preview h1{font-size:1.05rem}.print-preview .print-meta{font-size:.7rem}.course-print-row{display:flex;align-items:center;gap:4mm;margin-bottom:3mm;break-inside:avoid}.print-label{width:24mm;flex-shrink:0;overflow-wrap:anywhere}.print-label b{font-size:16pt;display:block}.print-label small{display:block;font-size:9pt}.course-print-row .print-row{display:flex}.print-preview .print-label{width:12%}.print-preview .print-label b{font-size:1rem}.print-preview .print-label small{font-size:.65rem}.print-preview .course-print-row{gap:2%;margin-bottom:12px}.print-preview .print-row{flex:1;min-width:0}.print-preview .print-cell{width:calc(100% / 6);height:auto;aspect-ratio:1;border:1px solid #bbb;flex-shrink:0}.print-preview .print-cell svg{width:100%;height:100%;display:block}@media print{.print-page{break-after:page;page-break-after:always;margin:0;padding:0}.print-page:last-child{break-after:auto;page-break-after:auto}.course-print-row{height:25mm;margin-bottom:3mm}.print-page .print-meta{font-size:10pt!important;line-height:1.4;margin-bottom:6mm}.print-page h1{font-size:18pt!important;line-height:1.3}.course-print-row .print-row{flex-shrink:0}.print-label{color:black}}