html,body,#root{width:100%;height:auto;margin:0;padding:0}@font-face{font-family:ZCOOL KuaiLe;font-style:normal;font-weight:400;font-display:swap;src:url(/hanzi/assets/ZCOOLKuaiLe-Regular-CvIfguNK.ttf)format("truetype")}@font-face{font-family:Ma Shan Zheng;font-style:normal;font-weight:400;font-display:swap;src:url(/hanzi/assets/MaShanZheng-Regular-wERnqapb.ttf)format("truetype")}@font-face{font-family:Long Cang;font-style:normal;font-weight:400;font-display:swap;src:url(/hanzi/assets/LongCang-Regular-BAg7qzZg.ttf)format("truetype")}:root{--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in-out:cubic-bezier(.77, 0, .175, 1);--ease-drawer:cubic-bezier(.32, .72, 0, 1);--dur-press:.14s;--dur-fast:.18s;--dur-pop:.22s;--dur-modal:.26s;--dur-sheet:.32s;--c-ink:#433d52;--c-ink-soft:#6b5f7e;--c-paper:#fffdf6;--c-sky:#6ec6e6;--c-sky-deep:#4aa3dd;--c-sun:#ffd76e;--c-mint:#7fc9a8;--c-mint-deep:#3f9d7a;--c-coral:#f28f6b;--c-pink:#f7b7cd;--c-grape:#b39ddb;--c-grape-deep:#8a4fb0;--shadow-sticker:0 5px 0 var(--c-ink), 0 16px 30px #433d5229;--shadow-sticker-sm:0 3px 0 var(--c-ink), 0 10px 18px #433d521f;--shadow-soft:0 12px 26px #433d521f}@keyframes view-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes rise-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.view{min-width:0;animation:view-in var(--dur-pop) var(--ease-out) both}*{box-sizing:border-box}html,body{margin:0;padding:0}body{color:#3a3350;background:radial-gradient(1100px 460px at 50% -8%,#7ec8f04d,#0000 62%),radial-gradient(760px 320px at 88% 4%,#ffd76e38,#0000 60%),repeating-linear-gradient(0deg,#8ca0c80b 0 1px,#0000 1px 26px),linear-gradient(#eaf6ff 0%,#fbeef2 46%,#fff6ea 100%);min-height:100vh;font-family:PingFang SC,ZCOOL KuaiLe,Microsoft YaHei,system-ui,sans-serif}a{color:inherit;text-decoration:none}.page{max-width:1100px;padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));margin:0 auto}.page.lock{overscroll-behavior:none;flex-direction:column;height:100dvh;display:flex;overflow:hidden}.page.lock .view{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden auto}.ink{border-color:#433d52}.topbar{flex-wrap:wrap;align-items:center;gap:18px;padding-bottom:16px;display:flex}.brand{align-items:center;gap:10px;display:flex;transform:rotate(-1deg)}.brand-logo{color:#433d52;background:linear-gradient(135deg,#6ec6e6,#9ad5ec);border:3px solid #433d52;border-radius:50% 42% 50% 46%;place-items:center;width:46px;height:46px;font-family:Ma Shan Zheng,cursive;font-size:24px;display:grid;box-shadow:3px 4px #35314e24}.brand-name{letter-spacing:-1px;color:#433d52;text-shadow:2px 2px #ffd76e;margin:0;font-family:ZCOOL KuaiLe,cursive;font-size:22px}.brand-slogan{color:#8b7a92;font-size:12px}.topnav{gap:8px;margin:0 auto;display:flex}.topnav .nav-item{color:#6b5f7e;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#fff;border:2.5px solid #433d52;border-radius:12px;padding:7px 16px;font-family:ZCOOL KuaiLe,cursive;font-size:14px;box-shadow:0 3px #433d52}.topnav .nav-item:hover{transform:translateY(-2px)}.topnav .nav-item.active{background:#ffd76e}.progress-chip{color:#433d52;background:#fff;border:2.5px solid #433d52;border-radius:14px;padding:7px 14px;font-family:ZCOOL KuaiLe,cursive;font-size:13px;transform:rotate(1deg);box-shadow:3px 4px #35314e24}.progress-chip b{color:#e8855b;font-size:15px}.lic-top{color:#433d52;cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#fff;border:2.5px solid #433d52;border-radius:14px;padding:7px 12px;font-family:ZCOOL KuaiLe,cursive;font-size:13px;box-shadow:3px 4px #35314e24}@media (hover:hover){.lic-top:hover{background:#ffd76e}}.sketched-hero{border:3px solid var(--c-ink);box-shadow:var(--shadow-sticker-sm);background:linear-gradient(135deg,#aee4f7 0%,#fde1ed 55%,#fff3cc 100%);border-radius:28px 20px 30px 22px;justify-content:flex-start;align-items:center;gap:14px;margin:20px 0;padding:14px 22px;display:flex;position:relative;overflow:hidden}.sketched-hero:after{content:"";pointer-events:none;border:2px dashed #7a66a859;border-radius:22px 16px 24px 18px;position:absolute;inset:5px}.sketch-text{z-index:1;text-align:left;position:relative}.hero-line{color:#4a3d66;margin:0;font-family:ZCOOL KuaiLe,cursive;font-size:16px}.hero-line b{color:#e8855b;font-size:26px}.hero-sub{color:#7a6b8f;margin:6px 0 0;font-size:13px}.grid{grid-template-columns:minmax(360px,1fr) 320px;align-items:start;gap:22px;display:grid}.panel{background:var(--c-paper);border:3px solid var(--c-ink);box-shadow:var(--shadow-sticker-sm);border-radius:24px 18px 26px 20px;padding:20px}.mode-switch{gap:8px;margin-bottom:14px;display:flex}.mode-switch button{color:#6b5f7e;cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#fff;border:3px solid #433d52;border-radius:14px;flex:1;padding:9px 0;font-family:ZCOOL KuaiLe,cursive;font-size:15px;box-shadow:0 4px #433d52}.mode-switch button.on{background:#ffd76e}.mode-switch button:active{transform:translateY(3px);box-shadow:0 1px #433d52}.card-foot{align-items:center;gap:8px;margin-top:14px;display:flex}.card-foot button{cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out);border:3px solid #433d52;border-radius:14px;padding:10px 12px;font-family:ZCOOL KuaiLe,cursive;font-size:15px;box-shadow:0 4px #433d52}.card-foot button:active{transform:translateY(3px);box-shadow:0 1px #433d52}.card-foot .ghost{color:#6b5f7e;background:#f4e9fa}.card-foot .learn-btn{color:#433d52;background:#ffc53d;flex:1}.card-foot .learn-btn.known{color:#fff;background:#7fc9a8}@media (hover:hover){.card-foot button:hover{transform:translateY(-2px)}}.lib-head{justify-content:space-between;align-items:baseline;margin-bottom:12px;display:flex}.lib-head h2{letter-spacing:1px;color:#433d52;margin:0;font-family:ZCOOL KuaiLe,cursive;font-size:18px}.lib-tip{color:#9a8ba3;font-size:12px}.char-grid{grid-template-columns:repeat(5,1fr);gap:9px;display:grid}.char-cell{aspect-ratio:1;cursor:pointer;transition:transform var(--dur-pop) var(--ease-out), background var(--dur-pop) ease, box-shadow var(--dur-pop) ease;background:#fff;border:2.5px solid #433d52;border-radius:14px 11px 15px 12px;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-family:inherit;display:flex;position:relative;box-shadow:0 3px #433d52}.char-cell:nth-child(3n){transform:rotate(1deg)}.char-cell:nth-child(3n+1){transform:rotate(-1deg)}.char-cell:hover{transform:translateY(-3px)rotate(0)}.char-cell.current{background:#aee4f7;transform:rotate(-2deg)scale(1.04)}.char-cell.learned .char-main:after{content:"";background:#7fc9a8;border:2px solid #433d52;border-radius:50%;width:8px;height:8px;position:absolute;top:7px;right:7px}.char-main{color:#433d52;font-family:Ma Shan Zheng,cursive;font-size:24px;line-height:1}.char-sub{color:#9a8ba3;font-size:10px;font-weight:600}.char-cell.learned .char-sub{color:#3f8f6f}.lib-note{color:#9a8ba3;margin:14px 0 0;font-size:12px;line-height:1.6}.charbook-wrap{flex-direction:column;gap:12px;display:flex}.charbook{background:#ffffffdb;border:3px solid #433d52;border-radius:18px;padding:16px;box-shadow:0 4px #35314e1f}.back-to-home{color:#433d52;cursor:pointer;background:#fff;border:3px solid #433d52;border-radius:999px;align-self:center;padding:10px 18px;font-weight:700;box-shadow:0 3px #35314e26}.back-to-home:active{transform:translateY(2px);box-shadow:0 1px #35314e26}.stroke-card{flex-direction:column;align-items:center;gap:12px;display:flex}.stroke-head{flex-direction:column;gap:6px;width:100%;display:flex}.stroke-title-row{flex-wrap:wrap;align-items:baseline;gap:10px;display:flex}.stroke-char-title{letter-spacing:-1.5px;color:#433d52;font-family:Ma Shan Zheng,cursive;font-size:24px}.stroke-pinyin{color:#e8855b;font-family:ZCOOL KuaiLe,cursive;font-size:17px;font-weight:600}.stroke-tag{color:#7a6b8f;background:#f4e9fa;border:2px solid #b9a4e8;border-radius:10px;padding:1px 8px;font-size:11px}.stroke-meaning{color:#8b7a92;margin:0;font-size:12px;line-height:1.5}.stroke-meaning-missing{color:#f59e0b;margin:0;font-size:12px}.stroke-source-row{flex-wrap:wrap;align-items:center;gap:8px;width:100%;display:flex}.stroke-source-label{color:#8b7a92;font-size:12px}.stroke-source-opts{flex-wrap:wrap;gap:6px;display:flex}.stroke-source-opt{color:#655d74;cursor:pointer;transition:transform var(--dur-press) var(--ease-out), border-color var(--dur-press) ease, background var(--dur-press) ease;background:#fff;border:2px solid #d3c9d6;border-radius:999px;padding:3px 12px;font-size:12px}@media (hover:hover){.stroke-source-opt:hover{border-color:#b6a3bf}}.stroke-source-opt.active{color:#2b3a5c;background:#9dbfff;border-color:#6b8fd6}.stroke-words{flex-wrap:nowrap;align-items:center;gap:6px;width:100%;display:flex;overflow:hidden}.stroke-words .word-chip{flex-shrink:0}.word-chip{color:#433d52;cursor:pointer;transition:background var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);background:#fff3cc;border:2px solid #433d52;border-radius:10px 8px 11px 9px;padding:2px 9px;font-family:inherit;font-size:12px;box-shadow:0 2px #433d52}@media (hover:hover){.word-chip:hover{background:#ffd76e}}.word-chip:active{transform:scale(.94)}.word-chips{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.stroke-actions{gap:8px;display:flex}.stroke-actions button{cursor:pointer;color:#433d52;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#e7eefb;border:3px solid #433d52;border-radius:12px;padding:7px 13px;font-family:ZCOOL KuaiLe,cursive;font-size:13px;box-shadow:0 3px #433d52}.stroke-actions button:active{transform:translateY(3px);box-shadow:0 0 #433d52}.stroke-actions button.speak-btn{background:#ffc53d}.rate-control{color:#8b7a92;align-items:center;gap:8px;width:100%;padding:0 2px;font-size:12px;display:flex}.rate-control input[type=range]{accent-color:#e8855b;flex:1}.rate-value{text-align:right;color:#433d52;min-width:34px;font-family:ZCOOL KuaiLe,cursive;font-weight:700}.stroke-feedback{color:#6b5f7e;background:#fffaf0;border:2px dashed #d8c9a8;border-radius:10px;width:100%;max-height:120px;margin:0;padding:8px 12px;font-size:12px;list-style:none;overflow:auto}.stroke-feedback li{border-bottom:1px dashed #eae2cd;padding:2px 0}.stroke-feedback li:last-child{border-bottom:none}.note{color:#9a8ba3;margin-top:32px;font-size:12px;line-height:1.8}.note code{background:#fff;border:2px solid #e5d6c2;border-radius:6px;padding:1px 5px}.licenses-link{color:#7a6b90;cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#fff;border:2px solid #433d52;border-radius:10px;margin:10px auto 0;padding:6px 14px;font-family:inherit;font-size:12px;display:block;box-shadow:0 2px #35314e24}@media (hover:hover){.licenses-link:hover{color:#433d52;background:#ffd76e}}.lic-mask{z-index:90;opacity:0;transition:opacity var(--dur-modal) var(--ease-out);background:#281e3c80;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.lic-mask.open{opacity:1}.lic-mask.closing{opacity:0;pointer-events:none}.lic-panel{opacity:0;width:min(720px,100%);max-height:min(86vh,820px);transition:transform var(--dur-modal) var(--ease-out), opacity var(--dur-modal) var(--ease-out);background:#fffdf6;border:3px solid #433d52;border-radius:24px 18px 26px 20px;flex-direction:column;display:flex;overflow:hidden;transform:scale(.95)translateY(8px);box-shadow:8px 10px #35314e29}.lic-panel.open{opacity:1;transform:none}.lic-panel.closing{opacity:0;transform:scale(.96)translateY(6px)}.lic-head{border-bottom:2px dashed #7a66a859;flex-shrink:0;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 18px 12px;display:flex}.lic-title{color:#433d52;margin:0;font-family:ZCOOL KuaiLe,cursive;font-size:19px}.lic-sub{color:#8b7a92;margin:4px 0 0;font-size:12px}.lic-close{color:#a04a2a;cursor:pointer;background:#fff;border:2.5px solid #433d52;border-radius:50%;flex-shrink:0;width:30px;height:30px;font-size:15px}.lic-body{-webkit-overflow-scrolling:touch;flex:1;min-height:0;padding:14px 18px 18px;overflow-y:auto}.lic-sec{margin-bottom:16px}.lic-sec-title{color:#6b5f7e;margin:0 0 8px;font-size:13px}.lic-items{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.lic-item{background:#fff;border:2px solid #e5d6c2;border-radius:12px;padding:10px 12px}.lic-item-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.lic-item-head strong{color:#433d52;font-size:14px}.lic-badge{color:#e8855b;background:#fde6dd;border-radius:8px;padding:2px 8px;font-size:11px}.lic-copy{color:#7a6b90;margin:6px 0 0;font-size:12px}.lic-note{color:#6b5f7e;margin:4px 0 0;font-size:12px}.lic-item a{color:#4a7bb3;word-break:break-all;margin-top:6px;font-size:11px;display:inline-block}.lic-details{margin-top:16px}.lic-details summary{cursor:pointer;color:#4a7bb3;padding:6px 0;font-size:13px}.lic-pre{color:#5a4a66;white-space:pre-wrap;word-break:break-word;background:#fff;border:2px solid #e5d6c2;border-radius:10px;max-height:300px;margin:8px 0 0;padding:12px;font-size:11px;line-height:1.5;overflow:auto}.lic-foot{color:#9a8ba3;border-top:1px dashed #7a66a859;margin:16px 0 0;padding-top:12px;font-size:12px;line-height:1.7}.learn-stats{align-self:stretch}.ls-title{color:#433d52;margin:0 0 12px;font-size:16px}.ls-streak{color:#e08a2e;background:#fff8ec;border:2px dashed #e5b467;border-radius:12px;margin-bottom:12px;padding:8px 12px;font-size:14px}.ls-streak b{font-size:18px}.ls-big{align-items:baseline;gap:4px;margin-bottom:12px;font-family:ZCOOL KuaiLe,cursive;display:flex}.ls-big-num{letter-spacing:-3px;color:#433d52;font-size:42px}.ls-big-unit{color:#8a6a9e;font-size:16px}.ls-row{align-items:center;gap:8px;margin-bottom:10px;display:flex}.ls-label{color:#6b5f7e;flex:none;width:64px;font-size:12px;font-weight:600}.ls-row .home-progress-bar{flex:1;min-width:0;height:9px}.ls-num{text-align:right;color:#8a6a9e;flex:none;min-width:46px;font-size:12px;font-weight:600}.ls-milestone{color:#433d52;background:linear-gradient(135deg,#fff7e0,#eaf9ff);border:3px solid #433d52;border-radius:14px;margin-top:12px;padding:10px 12px;font-size:13px;line-height:1.5}.ls-milestone b{color:#e08a2e}.ls-course{background:linear-gradient(135deg,#fef4d9,#eef7ff);border:3px solid #433d52;border-radius:14px;margin-bottom:14px;padding:12px}.ls-course-head{justify-content:space-between;align-items:center;margin-bottom:2px;display:flex}.ls-course-label{color:#6b5f7e;font-size:12px;font-weight:700}.ls-course-pct{color:#e08a2e;font-size:12px;font-weight:700}.ls-course-title{color:#433d52;margin-bottom:8px;font-size:14px;font-weight:700;line-height:1.4}.ls-course .home-progress-bar{height:9px;margin-bottom:10px}.ls-course-chars{flex-wrap:wrap;gap:6px;max-height:150px;display:flex;overflow-y:auto}.ls-char{color:#433d52;cursor:pointer;background:#fff;border:2px solid #433d52;border-radius:10px;flex:none;justify-content:center;align-items:center;width:38px;height:38px;padding:0;font-family:Ma Shan Zheng,cursive;font-size:18px;display:flex;position:relative}.ls-char:active{transform:translateY(1px)}@media (hover:hover){.ls-char:hover{transform:translateY(-2px)}}.ls-char.current{background:#aee4f7;transform:rotate(-2deg)scale(1.05)}.ls-char.learned{background:#e3f6ea}.ls-char-check{color:#3f8f6f;font-family:inherit;font-size:10px;font-style:normal;position:absolute;top:1px;right:3px}@media (width<=900px){.grid{grid-template-columns:1fr}.learn-stats{display:none}.sketched-hero{text-align:center;flex-direction:column-reverse}.sketch-text{text-align:center}}.radic.room{margin-top:20px}.radic-head{flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:4px;display:flex}.radic-head h2{color:#433d52;letter-spacing:1px;margin:0;font-family:ZCOOL KuaiLe,cursive;font-size:20px}.radic-tip{color:#9a8ba3;font-size:12px}.radic-grid{grid-template-columns:repeat(4,1fr);gap:9px;display:grid}.radic-cell{cursor:pointer;transition:transform var(--dur-pop) var(--ease-out), background var(--dur-pop) ease, box-shadow var(--dur-pop) ease;background:#fff;border:2.5px solid #433d52;border-radius:14px 11px 15px 12px;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;font-family:inherit;display:flex;box-shadow:0 3px #433d52}.radic-cell:nth-child(3n){transform:rotate(1deg)}.radic-cell:nth-child(3n+1){transform:rotate(-1deg)}@media (hover:hover){.radic-cell:hover{transform:translateY(-3px)rotate(0)}}.radic-cell.current{background:#ffc53d;transform:rotate(-2deg)scale(1.05)}.radic-glyph{color:#e8855b;font-family:Ma Shan Zheng,cursive;font-size:26px;line-height:1}.radic-name{color:#6b5f7e;font-size:11px}.radic-cell.current .radic-glyph{color:#433d52}.radic-hero{align-items:center;gap:16px;margin-bottom:16px;display:flex}.radic-big{letter-spacing:-5px;color:#fff;background:linear-gradient(135deg,#ffc53d,#e8855b);border:3px solid #433d52;border-radius:20px 14px 20px 16px;flex-shrink:0;padding:12px 18px;font-family:Ma Shan Zheng,cursive;font-size:68px;line-height:1;box-shadow:4px 4px #49426429}.radic-name-lg{color:#433d52;font-family:ZCOOL KuaiLe,cursive;font-size:20px}.radic-meaning{color:#8b7a92;margin:6px 0 0;font-size:14px}.radic-examples{margin-top:6px}.radic-ex-label{color:#433d52;font-family:ZCOOL KuaiLe,cursive;font-size:13px}.radic-char-list{flex-wrap:wrap;gap:12px;margin-top:10px;display:flex}.radic-char{flex-direction:column;align-items:center;gap:6px;display:flex}.radic-char-word{color:#433d52;cursor:pointer;width:54px;height:54px;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#fff;border:3px solid #433d52;border-radius:14px 11px 15px 12px;font-family:Ma Shan Zheng,cursive;font-size:30px;box-shadow:0 4px #433d52}@media (hover:hover){.radic-char-word:hover{background:#aee4f7;transform:translateY(-2px)}}.radic-char-word:active{transform:translateY(3px);box-shadow:0 1px #433d52}.radic-go{color:#6b5f7e;cursor:pointer;transition:background var(--dur-fast) ease;background:#f4e9fa;border:2px solid #433d52;border-radius:9px;padding:2px 8px;font-family:ZCOOL KuaiLe,cursive;font-size:11px}@media (hover:hover){.radic-go:hover{background:#e2cdf5}}.radic-note{color:#9a8ba3;border-top:2px dashed #e5d6c2;margin:16px 0 0;padding-top:12px;font-size:12px;line-height:1.6}.radic-note b{color:#e8855b}.radic-practice-btn{color:#433d52;cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#ffc53d;border:2.5px solid #433d52;border-radius:12px;margin-top:12px;padding:6px 12px;font-family:ZCOOL KuaiLe,cursive;font-size:13px;box-shadow:0 3px #433d52}@media (hover:hover){.radic-practice-btn:hover{transform:translateY(-2px)}}.radic-practice-btn:active{transform:translateY(3px);box-shadow:0 0 #433d52}.radic-practice{border-top:2px dashed #e5d6c2;margin-top:18px;padding-top:14px}.radic-practice-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.radic-practice-title{color:#433d52;font-family:ZCOOL KuaiLe,cursive;font-size:15px}.practice-toggle{gap:8px;display:flex}.practice-toggle button{color:#6b5f7e;cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#fff;border:2.5px solid #433d52;border-radius:10px;padding:4px 9px;font-family:ZCOOL KuaiLe,cursive;font-size:12px;box-shadow:0 2px #433d52}.practice-toggle button.on{background:#aee4f7}.practice-toggle button:active{transform:translateY(2px);box-shadow:0 0 #433d52}.lib-tabs{flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex}.lib-tab{color:#6b5f7e;cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#fff;border:2.5px solid #433d52;border-radius:10px;padding:4px 9px;font-family:ZCOOL KuaiLe,cursive;font-size:11px;box-shadow:0 2px #433d52}@media (hover:hover){.lib-tab:hover{transform:translateY(-2px)}}.lib-tab.on{background:#ffd76e}.lib-tab:active{transform:translateY(2px);box-shadow:0 0 #433d52}.lib-units{flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex}.lib-unit{color:#554a75;cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#f4f3fb;border:2px solid #7d7fb0;border-radius:9px;padding:3px 8px;font-family:ZCOOL KuaiLe,cursive;font-size:11px;box-shadow:0 2px #7d7fb0}@media (hover:hover){.lib-unit:hover{transform:translateY(-1px)}}.lib-unit.on{background:#b6b9ee;border-color:#433d52}.lib-unit:active{transform:translateY(1px);box-shadow:0 0 #7d7fb0}.lib-lessons{flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex}.lib-lesson{color:#8a7a5c;cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#fffdf6;border:1.5px solid #c0b8a8;border-radius:8px;padding:2px 7px;font-family:ZCOOL KuaiLe,cursive;font-size:10.5px}.lib-lesson.on{background:#f4d9a8;border-color:#433d52}.lib-lesson:active{transform:translateY(1px)}.stroke-tag.cat{color:#3f8f6f;background:#e3f5e9;border-color:#7fc9a8}.stroke-tag.level{color:#4a6fa5;background:#e7eefb;border-color:#9ccbe0}.streak-pill{color:#e8855b;background:#fff;border:2.5px solid #433d52;border-radius:12px;margin-left:8px;padding:3px 10px;font-family:ZCOOL KuaiLe,cursive;display:inline-block;transform:rotate(-1deg);box-shadow:2px 3px #49426426}html{-webkit-text-size-adjust:100%}.stroke-canvas{touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;width:100%;display:flex;position:relative}.canvas-frame{aspect-ratio:1;width:min(280px,100%);position:relative}.canvas-frame svg{width:100%;height:100%;position:absolute;inset:0}.lib-toggle,.lib-mask{display:none}@media (width<=820px){html,body,#root{height:100%}body{background-attachment:fixed}.page{min-height:100dvh;padding:8px 6px max(20px, env(safe-area-inset-bottom));flex-direction:column;display:flex}.page.lock{padding:8px 6px max(20px, env(safe-area-inset-bottom))}.view{flex-direction:column;flex:1;min-height:0;display:flex}.topbar{flex-wrap:wrap;flex-shrink:0;gap:8px;padding-bottom:8px}.brand-logo{width:36px;height:36px;font-size:19px}.brand-name{font-size:17px}.brand-slogan{display:none}.topnav .nav-item{padding:9px 12px;font-size:15px}.progress-chip{padding:6px 10px;font-size:12px}.lib-toggle{color:#433d52;cursor:pointer;background:#ffc53d;border:2.5px solid #433d52;border-radius:12px;align-items:center;gap:4px;margin-left:auto;padding:8px 12px;font-family:ZCOOL KuaiLe,cursive;font-size:13px;display:inline-flex;box-shadow:0 3px #433d52}.sketched-hero{display:none}.main-card{box-shadow:0 2px 0 var(--c-ink), 0 10px 20px #433d521f;border-radius:20px 15px 22px 16px;flex-direction:column;padding:12px;display:flex}.mode-switch{flex-shrink:0;margin-bottom:6px}.stroke-card{gap:8px}.stroke-head{flex-shrink:0}.stroke-title-row{flex-wrap:wrap}.stroke-words{flex-shrink:0}.stroke-canvas{align-items:center}.stroke-actions{flex-shrink:0;gap:8px}.rate-control{flex-shrink:0}.stroke-feedback{flex-shrink:0;max-height:52px}.card-foot{flex-shrink:0;margin-top:8px}.note{display:none}.mode-switch button{padding:13px 0;font-size:16px}.card-foot button{min-height:46px;padding:13px 10px;font-size:15px}.stroke-actions button{min-height:42px;padding:11px 14px;font-size:14px}.word-chip{padding:7px 12px;font-size:14px}.lib-drawer{width:min(86vw,360px);transition:transform var(--dur-sheet) var(--ease-drawer);z-index:70;border-bottom-width:3px;border-left-width:3px;border-radius:20px 0 0 20px;flex-direction:column;margin:0;display:flex;position:fixed;top:0;bottom:0;right:0;overflow:hidden;transform:translate(105%);box-shadow:-6px 0 20px #0000002e}.lib-drawer.open{transform:none}.lib-drawer .lib-head{flex-shrink:0;padding-top:6px;padding-right:6px}.lib-drawer .lib-tabs{flex-shrink:0}.lib-drawer .char-grid{-webkit-overflow-scrolling:touch;flex:1;min-height:0;padding-right:4px;overflow-y:auto}.lib-drawer .lib-note{flex-shrink:0}.lib-mask{z-index:65;opacity:0;pointer-events:none;transition:opacity var(--dur-sheet) var(--ease-out);background:#281e3c6b;display:block;position:fixed;inset:0}.lib-mask.open{opacity:1;pointer-events:auto}.lib-tabs{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;padding-bottom:4px;overflow-x:auto}.lib-tabs::-webkit-scrollbar{display:none}.lib-tab{flex-shrink:0;padding:8px 12px;font-size:13px}.char-grid{grid-template-columns:repeat(4,1fr);gap:8px}.char-main{font-size:27px}.char-sub{font-size:11px}.rate-control input[type=range]{height:34px}.radic.room{-webkit-overflow-scrolling:touch;flex:1;min-height:0;margin-top:0;overflow-y:auto}.radic-grid{grid-template-columns:repeat(3,1fr)}.radic-hero{flex-direction:column;align-items:flex-start;gap:8px}.radic-big{padding:10px 16px;font-size:52px}.radic-practice-head{align-items:flex-start}}.poem-tracing{flex-direction:column;gap:16px;margin-top:8px;display:flex}.poem-head{background:#fff;border:3px solid #433d52;border-radius:20px 14px 22px 16px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 18px;display:flex;box-shadow:4px 5px #3b35521f}.poem-title{color:#433d52;margin:0;font-family:ZCOOL KuaiLe,cursive;font-size:22px}.poem-sub{color:#8b7a92;margin:4px 0 0;font-size:13px}.poem-controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.poem-choice{color:#54496b;background:#fff;border:2.5px solid #433d52;border-radius:12px;align-items:center;gap:6px;padding:5px 10px;font-size:13px;display:inline-flex;box-shadow:0 3px #433d52}.poem-choice .trace-c{color:#e8855b;font-family:Ma Shan Zheng,cursive;font-size:16px}.poem-choice select{font:inherit;color:inherit;background:0 0;border:none;outline:none}.poem-fonts{gap:6px;display:inline-flex}.poem-font-opt{color:#6b5f7e;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#fff;border:2.5px solid #433d52;border-radius:12px;padding:4px 12px;font-size:17px;box-shadow:0 3px #433d52}.poem-font-opt.on{color:#433d52;background:#ffd76e}.poem-pinyin-toggle,.poem-reset{color:#54496b;background:#fff;border:2.5px solid #433d52;border-radius:12px;padding:5px 12px;font-size:13px;box-shadow:0 3px #433d52}.poem-pinyin-toggle.on{background:#dff0fb}.poem-reset{color:#a04a2a;background:#fde6dd}.poem-tools{background:#fff;border:3px solid #433d52;border-radius:20px 14px 22px 16px;flex-direction:column;gap:10px;padding:12px 16px;display:flex;box-shadow:4px 5px #3b35521f}.poem-tools-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.poem-tools-label{color:#8b7a92;font-size:12px}.tool-btns{flex-wrap:wrap;gap:8px;display:flex}.tool-btn{color:#54496b;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#fff;border:2.5px solid #433d52;border-radius:12px;align-items:center;gap:5px;padding:6px 12px;font-family:ZCOOL KuaiLe,cursive;font-size:14px;display:inline-flex;box-shadow:0 2.5px #433d52}@media (hover:hover){.tool-btn:hover{transform:translateY(-1px)}}.tool-btn.on{color:#433d52;background:#ffd76e}.poem-tools-settings{border-top:1.5px dashed #7a66a859;padding-top:4px}.tool-slider{align-items:center;gap:8px;display:flex}.tool-slider-label{color:#6b5f7e;font-size:12px}.tool-slider input[type=range]{accent-color:#e8855b;cursor:pointer;width:92px}.tool-slider-value{color:#e8855b;text-align:right;min-width:34px;font-size:12px;font-weight:700}.tool-colors{gap:8px;padding:0 2px;display:inline-flex}.color-dot{cursor:pointer;width:22px;height:22px;transition:transform var(--dur-press) var(--ease-out);border:2.5px solid #433d52;border-radius:50%}@media (hover:hover){.color-dot:hover{transform:scale(1.12)}}.color-dot.on{outline-offset:2px;outline:3px solid #ffd76e}.tool-pressure{color:#54496b;background:#fff;border:2.5px solid #433d52;border-radius:12px;padding:4px 10px;font-size:12px;box-shadow:0 2px #35314e33}.tool-pressure.on{background:#dff0fb}.trace-undo{color:#54496b;cursor:pointer;z-index:5;background:#fff;border:2px solid #433d52;border-radius:50%;width:22px;height:22px;font-size:13px;line-height:1;position:absolute;top:-8px;left:-8px;box-shadow:0 2px #35314e33}@media (hover:hover){.trace-undo:hover{background:#dff0fb}}.poem-board{background:repeating-linear-gradient(0deg,#8ca0c80d 0 1px,#0000 1px 28px),#fffdf6;border:3px solid #433d52;border-radius:22px 16px 24px 18px;flex-direction:column;align-items:center;gap:14px;min-height:320px;padding:22px 20px;display:flex;box-shadow:5px 6px #3b35521a}.poem-line{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.poem-meta{gap:6px;margin-top:-4px}.poem-meta-note{color:#b09a86;font-family:Ma Shan Zheng,cursive;font-size:13px;font-style:italic}.trace-cell{flex-direction:column;align-items:center;width:min(16vw,78px);display:flex}.trace-pinyin{color:#a79cc0;height:15px;margin-bottom:3px;font-size:11px;line-height:15px}.trace-pad{aspect-ratio:1;width:100%;position:relative}.trace-grid{background:#fffdf6;border-radius:10px 7px 11px 9px;width:100%;height:100%;position:absolute;inset:0}.trace-ref{pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.trace-canvas{touch-action:none;cursor:crosshair;border-radius:10px 7px 11px 9px;width:100%;height:100%;position:absolute;inset:0}.trace-eraser{color:#a04a2a;cursor:pointer;z-index:5;background:#fff;border:2px solid #433d52;border-radius:50%;width:22px;height:22px;font-size:12px;line-height:1;position:absolute;top:-8px;right:-8px;box-shadow:0 2px #35314e33}.trace-eraser:hover{background:#fde6dd}.poem-hint{color:#a79cc0;text-align:center;margin:0;font-size:12px}@media (width<=640px){.poem-head{flex-direction:column;align-items:stretch}.poem-controls{justify-content:flex-start}.poem-board{gap:10px;padding:16px 8px}.poem-line{gap:6px}.trace-cell{width:min(14.2vw,64px)}.poem-tools{padding:10px 12px}.tool-btn{padding:5px 9px;font-size:13px}.tool-btns .tool-name{display:none}.tool-slider input[type=range]{width:64px}.poem-tools-settings{gap:8px}}.dict-head{flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:12px;display:flex}.dict-head h2{letter-spacing:1px;color:#433d52;margin:0;font-family:ZCOOL KuaiLe,cursive;font-size:20px}.dict-tip{color:#9a8ba3;font-size:12px}.dict-scopes{flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}.dict-scope{color:#6b5f7e;cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#fff;border:3px solid #433d52;border-radius:999px;padding:7px 14px;font-family:ZCOOL KuaiLe,cursive;font-size:13px;box-shadow:0 3px #433d52}.dict-scope.on{color:#433d52;background:#ffd76e}.dict-scope:active{transform:translateY(2px);box-shadow:0 1px #433d52}.dict-empty{text-align:center;color:#9a8ba3;padding:30px 20px;font-size:14px}.dict-progress{color:#6b5f7e;letter-spacing:.3px;margin-bottom:10px;font-size:13px}.dict-progress b{color:#433d52}.dict-listen,.dict-write,.dict-result,.dict-answer,.dict-result-ok,.dict-result-no{animation:rise-in var(--dur-pop) var(--ease-out) both}.dict-listen{text-align:center;padding:26px 20px}.dict-question{color:#6b5f7e;margin:0 0 16px;font-size:15px}.dict-voice{color:#433d52;cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#f7e8fa;border:3px solid #433d52;border-radius:999px;padding:12px 22px;font-family:ZCOOL KuaiLe,cursive;font-size:16px;box-shadow:0 4px #433d52}.dict-voice:active{transform:translateY(3px);box-shadow:0 1px #433d52}.dict-answer{flex-direction:column;align-items:center;gap:4px;margin-top:14px;display:flex}.dict-answer-pinyin{color:#b06ab3;font-size:13px;font-weight:700}.dict-write{padding:14px}.dict-canvas{aspect-ratio:1;touch-action:none;cursor:crosshair;background:#fffdf6;border:3px solid #433d52;border-radius:14px;width:100%;max-width:340px;margin:0 auto;display:block}.dict-result{text-align:center;padding:24px 20px}.dict-result svg{margin-top:6px}.dict-ok-title{color:#3a9d6d;margin:0 0 8px;font-family:ZCOOL KuaiLe,cursive;font-size:20px}.dict-ok-extra{color:#9a8ba3;margin:0;font-size:13px}.dict-no-title{color:#c0533d;margin:0 0 6px;font-size:18px}.dict-no-title b{font-family:Ma Shan Zheng,cursive;font-size:26px}.dict-reason{color:#9a8ba3;margin:10px 0 0;font-size:13px}.dict-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px;display:flex}.dict-actions .ghost{color:#6b5f7e;cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#fff;border:3px solid #433d52;border-radius:999px;padding:10px 18px;font-family:ZCOOL KuaiLe,cursive;font-size:14px}.dict-actions .learn-btn{color:#433d52;cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#ffc53d;border:3px solid #433d52;border-radius:999px;padding:10px 18px;font-family:ZCOOL KuaiLe,cursive;font-size:14px;box-shadow:0 3px #433d52}.dict-actions .ghost:active,.dict-actions .learn-btn:active{transform:translateY(2px);box-shadow:0 1px #433d52}.dict-summary{text-align:center;padding:28px 20px}.dict-summary h3{color:#433d52;margin:0 0 10px;font-family:ZCOOL KuaiLe,cursive;font-size:22px}.dict-score{color:#6b5f7e;margin:0 0 18px;font-size:15px}.dict-score b{color:#433d52;font-size:18px}.dict-cta{color:#fff;cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#7fc9a8;border:3px solid #433d52;border-radius:999px;padding:12px 26px;font-family:ZCOOL KuaiLe,cursive;font-size:15px;box-shadow:0 4px #433d52}.dict-cta:active{transform:translateY(3px);box-shadow:0 1px #433d52}@media (width<=520px){.dict-canvas{max-width:76vw}}.card-info{border-top:2px dashed #433d5233;margin-top:12px;padding-top:10px}.info-meaning{color:#433d52;margin:0 0 10px;font-size:15px;line-height:1.5}.info-tags{flex-wrap:wrap;gap:8px;margin-bottom:10px;display:flex}.info-tag{color:#655a78;background:#f0e6f6;border:1px solid #433d5233;border-radius:999px;padding:3px 10px;font-size:13px}.info-block{margin-bottom:10px}.info-label{color:#6b5f7e;margin-bottom:6px;font-size:13px;display:inline-block}.word-chip.culture{background:#e8f5e9}.word-chip.culture.on{background:#c8e6c9;box-shadow:inset 0 0 0 2px #43a047}.idiom-detail{color:#44503a;background:#f5fbf2;border:2px dashed #43503466;border-radius:12px;margin-top:8px;padding:9px 11px;font-size:13px;line-height:1.5}.idiom-detail-head{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.idiom-word{color:#433d52;font-size:16px}.idiom-listen{cursor:pointer;background:0 0;border:none;padding:0;font-size:15px}.idiom-pinyin{color:#8a9480;font-size:12px}.idiom-expl{margin:5px 0}.idiom-meta{color:#6d7763;margin:3px 0 0;font-size:12px}.idiom-meta b{color:#4d7c3f}.plan-tag{color:#6b5f7e;white-space:nowrap;background:#f0e7f8;border:2px dashed #b7a3d6;border-radius:999px;padding:3px 10px;font-size:13px}.home{flex-direction:column;gap:22px;display:flex}.home-hero{border:3px solid var(--c-ink);min-height:250px;box-shadow:var(--shadow-sticker);background:linear-gradient(#bfe6fb 0%,#e8f5fe 55%,#fff6e6 100%);border-radius:28px 20px 30px 22px;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;padding:24px;display:flex;position:relative;overflow:hidden}.home-hero-text{z-index:1;padding:6px 0;position:relative}.home-hero-text h2{letter-spacing:-1px;text-shadow:0 2px #ffffffd9;margin:0 0 4px;font-size:30px}.home-hero-text p{color:var(--c-ink-soft);margin:0;font-size:14px}.home-progress{z-index:1;border:2.5px solid var(--c-ink);min-width:200px;box-shadow:var(--shadow-sticker-sm);background:#fffdf6f2;border-radius:16px;flex:0 240px;padding:12px 14px;position:relative}.home-progress-num b{letter-spacing:-2px;color:#433d52;font-size:30px}.home-progress-num span{color:#8a6a9e}.home-progress-label{color:#6b5f7e;margin-bottom:4px;font-size:13px}.home-progress-bar,.plan-bar{background:#fff;border:2px solid #433d52;border-radius:999px;height:10px;overflow:hidden}.home-progress-fill,.plan-bar-fill{transform-origin:0;height:100%;transition:transform var(--dur-pop) var(--ease-out);background:linear-gradient(90deg,#6ec6e6,#8fd0a6);transform:scaleX(0)}.home-streak{color:#e08a2e;margin-top:6px;font-size:13px}.term-progress{background:#fff;border:3px solid #433d52;border-radius:16px;flex-direction:column;gap:12px;padding:14px;display:flex;box-shadow:3px 4px #35314e1f}.term-progress-row{align-items:center;gap:10px;display:flex}.term-progress-label{color:#433d52;white-space:nowrap;flex:none;width:92px;font-size:13px;font-weight:700}.term-progress-row .home-progress-bar{flex:1;min-width:0;height:9px}.term-progress-num{text-align:right;color:#8a6a9e;flex:none;min-width:46px;font-size:12px;font-weight:600}.home-section{flex-direction:column;gap:12px;display:flex}.home-sec-head{justify-content:space-between;align-items:center;display:flex}.home-sec-head h3{color:var(--c-ink);border:2.5px solid var(--c-ink);box-shadow:0 2.5px 0 var(--c-ink);background:#fff;border-radius:999px;align-items:center;gap:6px;margin:0;padding:5px 14px;font-size:16px;display:inline-flex}.home-new{border:2.5px solid var(--c-ink);background:var(--c-sun);color:var(--c-ink);box-shadow:0 2.5px 0 var(--c-ink);cursor:pointer;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700}.plan-grid{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:12px;display:grid}.plan-card{text-align:left;border:2.5px solid var(--c-ink);box-shadow:var(--shadow-sticker-sm);transform:rotate(var(--tilt,0deg));cursor:pointer;color:var(--c-ink);background:#fff;border-radius:18px;flex-direction:column;gap:7px;padding:14px;font-size:14px;display:flex;position:relative}.plan-card:before{content:"";background:linear-gradient(90deg, var(--c-sky), var(--c-mint));border-radius:999px;height:5px;position:absolute;top:8px;left:14px;right:14px}.plan-card:nth-child(4n+1){--tilt:-.8deg}.plan-card:nth-child(4n+1):before{background:linear-gradient(90deg, var(--c-sky), var(--c-mint))}.plan-card:nth-child(4n+2){--tilt:.7deg}.plan-card:nth-child(4n+2):before{background:linear-gradient(90deg, var(--c-sun), var(--c-coral))}.plan-card:nth-child(4n+3){--tilt:-.5deg}.plan-card:nth-child(4n+3):before{background:linear-gradient(90deg, var(--c-grape), var(--c-pink))}.plan-card:active{transform:translate(2px, 2px) rotate(var(--tilt,0deg));box-shadow:0 1px 0 var(--c-ink), 0 6px 14px #433d521f}.plan-card-top{justify-content:space-between;align-items:center;gap:6px;display:flex}.plan-name{font-size:15px;font-weight:700}.plan-del{color:#c0392b;border-radius:6px;padding:2px 4px;font-size:14px}@media (hover:hover){.plan-del:hover{background:#fde8e6}}.plan-meta{color:#8a6a9e;font-size:12px}.plan-go{color:#43a047;margin-top:2px;font-size:12px;font-weight:600}.plan-add-card{color:#8a4fb0;background:#fbf3ff;border-style:dashed;justify-content:center;align-items:center;min-height:130px}.plan-add-plus{font-size:34px;line-height:1}.tool-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;display:grid}.tool-card{border:2.5px solid var(--c-ink);box-shadow:var(--shadow-sticker-sm);transform:rotate(var(--tilt,0deg));cursor:pointer;color:var(--c-ink);text-align:left;background:#fff;border-radius:18px;flex-direction:column;align-items:flex-start;gap:7px;padding:14px;display:flex}.tool-card:nth-child(4n+1){--tilt:.6deg}.tool-card:nth-child(4n+2){--tilt:-.7deg}.tool-card:nth-child(4n+3){--tilt:.5deg}.tool-card:active{transform:translate(2px, 2px) rotate(var(--tilt,0deg));box-shadow:0 1px 0 var(--c-ink), 0 6px 14px #433d521f}.tool-name{font-size:15px;font-weight:700}.tool-desc{color:#8a6a9e;font-size:12px;line-height:1.4}.modal-mask{z-index:50;opacity:0;transition:opacity var(--dur-modal) var(--ease-out);background:#281e3c73;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-mask.open{opacity:1}.modal-mask.closing{opacity:0;pointer-events:none}.modal{opacity:0;width:100%;max-width:620px;max-height:88vh;transition:transform var(--dur-modal) var(--ease-out), opacity var(--dur-modal) var(--ease-out);background:#fff9f2;border:3px solid #433d52;border-radius:18px;padding:18px;overflow:auto;transform:scale(.95)translateY(8px);box-shadow:6px 8px #35314e33}.modal.open{opacity:1;transform:none}.modal.closing{opacity:0;transform:scale(.96)translateY(6px)}.modal-head{justify-content:space-between;align-items:center;display:flex}.modal-head h2{color:#433d52;margin:0;font-size:18px}.modal-close{cursor:pointer;color:#6b5f7e;background:0 0;border:none;padding:4px;font-size:18px}.np-tip{color:#8a6a9e;margin:8px 0 12px;font-size:13px}.np-name{color:#433d52;background:#fff;border:3px solid #433d52;border-radius:12px;width:100%;margin-bottom:14px;padding:10px 12px;font-size:15px}.np-tree{flex-direction:column;gap:10px;max-height:46vh;padding:4px;display:flex;overflow:auto}.np-term{border-left:3px solid #b7a3d6;padding-left:10px}.np-term-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.np-term-check{font-size:15px;font-weight:700}@keyframes np-error-pop{0%{opacity:0;transform:translateY(-8px)scale(.9)}55%{opacity:1;transform:translateY(2px)scale(1.03)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes np-shake{0%,to{transform:translate(0)}20%{transform:translate(-7px)}40%{transform:translate(7px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.np-error{color:#d14343;margin:-6px 0 12px;font-size:12px;font-weight:600;animation:.32s cubic-bezier(.34,1.56,.64,1) both np-error-pop}.np-name.has-error{animation:np-shake .42s var(--ease-out);border-color:#d14343;box-shadow:0 0 0 3px #d143431f}.np-unit{margin:6px 0 6px 10px}.np-unit-check{color:#6b5f7e;font-size:14px;font-weight:600}.np-lessons{flex-direction:column;gap:4px;margin-left:10px;display:flex}.np-lesson{flex-direction:column;display:flex}.np-check{color:#443d56;cursor:pointer;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;display:flex}.np-check input{accent-color:#6ec6e6;width:17px;height:17px}.np-count{color:#9a8ab0;font-size:11px}.np-expand{cursor:pointer;color:#8a6a9e;background:0 0;border:none;padding:0 2px;font-size:11px}.np-chars{color:#8a6a9e;letter-spacing:2px;animation:rise-in var(--dur-pop) var(--ease-out) both;background:#f3edfb;border-radius:8px;margin:3px 0 3px 24px;padding:4px 8px;font-size:12px;line-height:1.6}.np-extra{border-top:2px dashed #e0d5f0;margin-top:4px;padding-top:8px}.np-foot{justify-content:space-between;align-items:center;gap:10px;margin-top:14px;display:flex}.np-selected{color:#6b5f7e;font-size:13px}.np-selected b{color:#43a047;font-size:16px}.np-create{color:#433d52;cursor:pointer;background:#6ec6e6;border:3px solid #433d52;border-radius:12px;padding:9px 18px;font-size:14px;font-weight:700}.np-create:disabled{opacity:.45;cursor:not-allowed}.topnav .nav-item:active,.lic-top:active,.poem-pinyin-toggle:active,.poem-reset:active,.poem-font-opt:active,.licenses-link:active{transform:translateY(2px);box-shadow:0 1px #35314e59}.stroke-source-opt:active,.color-dot:active,.trace-undo:active,.trace-eraser:active,.modal-close:active,.lic-close:active,.np-expand:active,.idiom-listen:active,.plan-del:active,.np-create:not(:disabled):active,.home-new:active{transform:scale(.92)}.char-cell:active,.radic-cell:active{transform:translateY(2px)scale(.97)rotate(0)}.tool-btn:active{transform:translateY(2px);box-shadow:0 1px #433d52}.lic-close,.modal-close,.np-expand,.idiom-listen,.plan-del,.trace-undo,.trace-eraser,.home-new{transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (prefers-reduced-transparency:reduce){.lic-mask,.modal-mask{background:#281e3cd9}}@media (width<=640px){@keyframes view-fade-in{0%{opacity:0}to{opacity:1}}.view{animation:view-fade-in var(--dur-pop) var(--ease-out) both}}.profile{animation:rise-in var(--dur-pop) var(--ease-out) both;flex-direction:column;gap:22px;display:flex}.pf-hero{border:3px solid var(--c-ink);box-shadow:var(--shadow-sticker-sm);background:linear-gradient(135deg,#aee4f7 0%,#fde1ed 55%,#fff3cc 100%);border-radius:28px 20px 30px 22px;flex-direction:column;gap:16px;padding:18px 20px;display:flex}.pf-hero-text h2{color:#4a3d66;margin:0;font-family:ZCOOL KuaiLe,cursive;font-size:22px}.pf-hero-text p{color:#7a6b8f;margin:4px 0 0;font-size:13px}.pf-stats{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.pf-stat{border:2.5px solid var(--c-ink);box-shadow:0 2.5px 0 var(--c-ink);background:#fffdf6d1;border-radius:16px;flex-direction:column;gap:2px;padding:12px 14px;display:flex}.pf-stat b{color:var(--c-ink);font-family:ZCOOL KuaiLe,cursive;font-size:24px;line-height:1.1}.pf-stat b.pf-today{color:#e8855b}.pf-stat span{color:#6b5f7e;font-size:12px}.pf-stat em{color:#9a8fb0;font-size:11px;font-style:normal}.pf-legend{color:#6b5f7e;justify-content:center;align-items:center;gap:6px;padding:2px 0;font-size:12px;display:inline-flex}.pf-range{gap:6px;display:inline-flex}.pf-range button{border:2.5px solid var(--c-ink);color:#6b5f7e;box-shadow:0 2px 0 var(--c-ink);cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;background:#fff;border-radius:999px;padding:4px 11px;font-family:ZCOOL KuaiLe,cursive;font-size:12px}.pf-range button:hover{background:#fff6e0}.pf-range button.on{background:var(--c-sun);color:var(--c-ink)}.pf-range button:active{box-shadow:0 0 0 var(--c-ink);transform:translateY(2px)}@media (width<=520px){.home-section>.home-sec-head{flex-wrap:wrap;gap:8px}}.pf-legend i{border-radius:999px;width:16px;height:4px;display:inline-block}.pf-legend .pf-lg-line{background:var(--c-grape-deep);height:3px}.pf-legend .pf-lg-bar{background:#7fc9a8d9;height:10px}.pf-chart{padding:8px 10px 10px;overflow:hidden}.pf-curve{width:100%;height:auto;display:block}.pf-grid{stroke:#433d521f;stroke-width:1px}.pf-lbl{fill:#9a8fb0;font-family:PingFang SC,system-ui,sans-serif;font-size:11px}.pf-bar{fill:#7fc9a866}.pf-bar.today{fill:#f28f6bbf}.pf-line{fill:none;stroke:var(--c-grape-deep);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.pf-dot{fill:var(--c-grape-deep)}.pf-empty{text-align:center;color:#9a8fb0;padding:34px 16px;font-size:13px}.pf-milestone{text-align:center;color:#6b5f7e;font-size:13px}.pf-milestone b{color:#e8855b;font-size:15px}.plan-empty{text-align:center;background:var(--c-paper);border:3px dashed #433d5273;border-radius:20px;flex-direction:column;align-items:center;gap:8px;padding:28px 20px;display:flex}.plan-empty-title{color:var(--c-ink);font-family:ZCOOL KuaiLe,cursive;font-size:16px;font-weight:700}.plan-empty-sub{color:#6b5f7e;max-width:300px;font-size:13px}.plan-empty-cta{border:3px solid var(--c-ink);background:var(--c-sun);color:var(--c-ink);box-shadow:0 4px 0 var(--c-ink);cursor:pointer;transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) ease;border-radius:14px;margin-top:4px;padding:10px 20px;font-family:ZCOOL KuaiLe,cursive;font-size:15px;font-weight:700}.plan-empty-cta:active{box-shadow:0 1px 0 var(--c-ink);transform:translateY(3px)}.pf-terms{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.pf-term{border:2.5px solid var(--c-ink);box-shadow:var(--shadow-sticker-sm);background:#fff;border-radius:18px;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;display:flex}.pf-ring-wrap{width:84px;height:84px;position:relative}.pf-ring{width:100%;height:100%;transform:rotate(-90deg)}.pf-ring-bg{fill:none;stroke:#433d521f;stroke-width:9px}.pf-ring-fg{fill:none;stroke-width:9px;stroke-linecap:round;transition:stroke-dasharray .6s var(--ease-out)}.pf-ring-num{color:var(--c-ink);justify-content:center;align-items:center;font-family:ZCOOL KuaiLe,cursive;font-size:15px;font-weight:700;display:flex;position:absolute;inset:0}.pf-term-label{color:var(--c-ink);font-size:13px;font-weight:700}.pf-term-sub{color:#9a8fb0;font-size:12px}.pf-acc{color:#6b5f7e;font-size:13px}.pf-acc b{color:var(--c-grape-deep);font-size:16px}.pf-dict{padding:16px}.pf-dict-list{flex-direction:column;gap:10px;display:flex}.pf-dict-row{align-items:center;gap:10px;display:flex}.pf-dict-time{color:#9a8fb0;flex:0 0 74px;font-size:12px}.pf-dict-bar{background:#433d521f;border-radius:999px;flex:1;height:10px;overflow:hidden}.pf-dict-fill{background:linear-gradient(90deg, var(--c-sky), var(--c-grape));height:100%;transition:width .6s var(--ease-out);border-radius:999px}.pf-dict-ok{text-align:right;color:var(--c-ink);flex:0 0 44px;font-family:ZCOOL KuaiLe,cursive;font-size:13px;font-weight:700}@media (width<=520px){.pf-terms,.pf-stats{grid-template-columns:repeat(2,1fr)}}