:root{--paper:#fbf6ee;--card:#fff;--ink:#1f2a44;--muted:#6b6f7d;--line:#eadfd2;--red:#c8402f;--red-soft:#f6dcd6;--grid:#e4a59a;--ok:#2f8f5b;--ok-soft:#dcf0e3;--warn:#d4881f;--warn-soft:#fbecd3;--bad:#c8402f;--blue:#2c6e8f;--radius:16px;--shadow:0 1px 2px #1f2a440f, 0 6px 20px #1f2a440f;--kai:"Kaiti SC", "STKaiti", "KaiTi", "BiauKai", "Noto Serif SC", serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{margin:0}body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:-apple-system,PingFang SC,Hiragino Sans GB,Noto Sans SC,Microsoft YaHei,sans-serif}button{touch-action:manipulation}input,textarea{-webkit-user-select:text;user-select:text;font:inherit}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}h1,h2{margin:0}h2{letter-spacing:.04em;color:var(--muted);margin-bottom:12px;font-size:15px;font-weight:600}.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}main{max-width:640px;margin:0 auto;padding:16px 16px 32px}.btn{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:10px 16px;font-size:15px;transition:transform 80ms,background .15s;box-shadow:0 1px #1f2a440a}.btn:active{transform:scale(.97)}.btn.primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}.btn.big{padding:14px 22px;font-size:17px}.btn.ghost{box-shadow:none;color:var(--muted);background:0 0;border-color:#0000}.btn.sound{background:var(--ink);color:#fff;border-color:var(--ink)}.btn.sound.soft{background:var(--card);color:var(--ink);border-color:var(--line)}.brand{align-items:center;gap:14px;margin:12px 0 20px;display:flex}.brand-mark{background:var(--red);color:#fff;width:56px;height:56px;font-family:var(--kai);border-radius:14px;place-items:center;font-size:36px;display:grid}.brand h1{font-size:26px;font-family:var(--kai)}.brand p{margin:2px 0 0;font-size:14px}.panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;padding:18px}.level-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.level-row{grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;display:grid}.level{border:1px solid var(--line);background:var(--paper);text-align:left;border-radius:14px;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;transition:transform 80ms,border-color .15s;display:flex}.level:hover:not(:disabled){border-color:var(--red)}.level:active:not(:disabled){transform:scale(.97)}.level-name{font-size:22px;font-weight:700}.level-sub{color:var(--muted);font-size:12px}.level-count{color:var(--red);margin-top:4px;font-size:12px}.level.mix{background:var(--ink);color:#fff;border-color:var(--ink)}.level.mix .level-sub{color:#c9cede}.level.review{background:var(--warn-soft);border-color:#f0d7aa}.seg{grid-template-columns:1fr 1fr;gap:10px;display:grid}.seg button{border:2px solid var(--line);background:var(--paper);text-align:left;border-radius:14px;flex-direction:column;gap:2px;padding:12px;display:flex}.seg button span{color:var(--muted);font-size:12px}.seg button.on{border-color:var(--red);background:var(--red-soft)}.toggles{flex-direction:column;gap:12px;margin-top:16px;display:flex}.toggle{cursor:pointer;align-items:center;gap:10px;font-size:15px;display:flex}.toggle input{opacity:0;pointer-events:none;position:absolute}.switch{background:#d9d4cc;border-radius:12px;flex:none;width:40px;height:24px;transition:background .2s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #0003}.toggle input:checked+.switch{background:var(--ok)}.toggle input:checked+.switch:after{transform:translate(16px)}.toggle input:focus-visible+.switch{outline:2px solid var(--blue);outline-offset:2px}.about{padding:4px 4px 0}.about h2{margin-bottom:8px}.wordlist-links{flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none;display:flex}.wordlist-links a{background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:13px;text-decoration:none;display:inline-block}.wordlist-links a:hover{border-color:var(--red)}.about p{margin:0 0 8px;line-height:1.6}.brand{position:relative}.brand-account{align-self:flex-start;margin-left:auto}.chip{white-space:nowrap;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;align-items:center;gap:6px;padding:7px 14px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.chip.ghost{color:var(--muted)}.chip-avatar{font-size:18px;line-height:1}.chip-avatar.big{font-size:30px}.notice{background:var(--ok-soft);border-radius:12px;align-items:center;gap:8px;margin-bottom:14px;padding:8px 8px 8px 14px;font-size:14px;display:flex}.notice span{flex:1}.notice .btn.ghost{padding:4px 8px}.level.mine{border-color:var(--red);box-shadow:0 0 0 2px var(--red-soft)}.modal-card.sheet{text-align:left;align-items:stretch;gap:12px;max-width:400px;max-height:calc(100dvh - 32px);overflow:auto}.sheet-head{align-items:center;display:flex}.sheet-head .modal-title{flex:1}.sheet-head .close{padding:4px 8px}.stack{flex-direction:column;gap:10px;display:flex}.sheet input:not([type=checkbox]){border:1px solid var(--line);width:100%;color:var(--ink);background:#fff;border-radius:12px;padding:12px 14px;font-size:16px}.sheet input:focus{outline:2px solid var(--blue);outline-offset:0;border-color:#0000}.code-input{text-align:center;letter-spacing:10px;font-variant-numeric:tabular-nums;font-size:28px!important}.btn.google{color:var(--ink);justify-content:center;align-items:center;gap:10px;padding:12px 16px;font-weight:600;text-decoration:none;display:flex}.or{color:var(--muted);align-items:center;gap:10px;font-size:12px;display:flex}.or:before,.or:after{content:"";background:var(--line);flex:1;height:1px}.form-error{color:var(--red);margin:0;font-size:14px}.dev{background:var(--warn-soft);border-radius:8px;padding:6px 10px}.tiny{margin:0;font-size:11px}.field{color:var(--muted);flex-direction:column;gap:6px;font-size:13px;display:flex}.grade-pick,.avatar-pick{flex-wrap:wrap;gap:6px;display:flex}.grade-pick button,.avatar-pick button{border:2px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;padding:6px 12px;font-size:15px}.avatar-pick button{padding:4px 8px;font-size:22px}.grade-pick button.on,.avatar-pick button.on{border-color:var(--red);background:var(--red-soft)}.profile-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.profile-list li{border:1px solid var(--line);border-radius:14px;align-items:center;gap:6px;padding:4px 6px 4px 4px;display:flex}.profile-list li.on{border-color:var(--ok);background:var(--ok-soft)}.profile-pick{text-align:left;background:0 0;border:none;flex:1;align-items:center;gap:10px;padding:6px;display:flex}.profile-pick b{display:block}.small-btn{padding:6px 10px;font-size:13px}.sheet-foot{border-top:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:8px;padding-top:12px;display:flex}.sheet-foot p{margin:0}.btn.danger{background:var(--red);border-color:var(--red);color:#fff}.danger-link{color:var(--red)!important;margin:0!important}.danger-confirm{background:var(--red-soft);border-radius:12px;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;display:flex}.danger-confirm p{width:100%;margin:0}.nudge-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);align-items:center;gap:12px;margin-bottom:16px;padding:14px 16px;display:flex}.nudge-card p{flex:1;margin:0;line-height:1.5}.seg.tabs button{align-items:center;padding:10px}.tip{background:var(--warn-soft);border-radius:10px;margin:0;padding:8px 10px;line-height:1.5}.child-card{background:var(--ok-soft);border-radius:14px;align-items:center;gap:12px;padding:10px 14px;display:flex}.section-sep{border-top:1px solid var(--line);gap:14px;padding-top:12px}.pin-row{gap:8px;display:flex}.pin-row input{letter-spacing:3px;flex:1;min-width:0}.ok-text{color:var(--ok)}.device-list{color:var(--ink);margin:0;padding:0;font-size:13px;line-height:1.7;list-style:none}.practice{flex-direction:column;min-height:100dvh;padding-top:8px;display:flex}.topbar{align-items:center;gap:10px;display:flex}.topbar .btn.ghost{padding:6px 10px;font-size:18px}.progress{background:var(--line);border-radius:4px;flex:1;height:8px;overflow:hidden}.progress-fill{background:var(--ok);height:100%;transition:width .3s}.count{font-variant-numeric:tabular-nums;color:var(--muted);text-align:right;min-width:40px;font-size:14px}.prompt{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;padding:16px}.prompt-tools{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;display:flex}.example{font-size:18px;line-height:1.6;font-family:var(--kai);margin:12px 0 0}.english{color:var(--muted);margin:6px 0 0;font-size:13px}.stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"prompt""write""tools";gap:12px;margin-top:12px;display:grid}.prompt{grid-area:prompt}.write{flex-direction:column;grid-area:write;align-items:center;width:100%;min-width:0;display:flex}.tools{flex-direction:column;grid-area:tools;align-items:center;display:flex}.pad{box-shadow:var(--shadow);touch-action:none;background:#fff;position:relative}.tian{stroke:var(--grid)}.tian.abs{position:absolute;inset:0}.tian line{stroke-width:.6px}.tian .diag{opacity:.6}.pad-writer{position:absolute;inset:0}.pad-writer svg{display:block}.pad-tools{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.pad-tools .btn{padding:9px 14px;font-size:14px}.feedback{background:var(--card);border-radius:var(--radius);width:100%;box-shadow:var(--shadow);text-align:center;padding:22px}.feedback.good{background:var(--ok-soft)}.feedback.needs{background:var(--warn-soft)}.feedback-word{font-family:var(--kai);font-size:64px;line-height:1.1}.feedback-msg{color:var(--ok);margin:8px 0 16px;font-size:20px;font-weight:700}.feedback-list{margin:10px 0 18px;padding:0;font-size:16px;line-height:1.8;list-style:none}.feedback-list b{font-family:var(--kai);margin-right:4px;font-size:22px}.mode-switch{justify-content:center;gap:4px;margin-top:18px;display:flex}.mode-switch button{color:var(--muted);background:0 0;border:none;border-radius:999px;padding:6px 14px;font-size:13px}.mode-switch button.on{background:var(--line);color:var(--ink)}.pinyin-line{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.py{color:var(--blue);letter-spacing:.02em;font-size:30px;font-weight:600}.answer-word{font-family:var(--kai);margin-top:2px;font-size:44px;line-height:1.2}.kai{font-family:var(--kai)}.freepad{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;filter:drop-shadow(0 2px 8px #1f2a4414);cursor:crosshair;display:block}.submit{min-width:200px;margin-top:12px}.nudge{color:var(--red);font-weight:600}.feedback-msg.warn{color:var(--warn)}.feedback-chars{flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:8px;display:flex}.fchar{background:var(--card);text-align:left;border-radius:12px;max-width:260px;padding:10px}.fchar-head{align-items:center;gap:8px;margin-bottom:6px;display:flex}.fchar-head b{font-size:26px;font-weight:400}.tag{border-radius:999px;padding:2px 8px;font-size:12px;font-weight:600}.tag.ok{background:var(--ok-soft);color:var(--ok)}.tag.order{background:var(--warn-soft);color:var(--warn)}.tag.wrong,.tag.blank{background:var(--red-soft);color:var(--red)}.tag.unavailable{background:var(--line);color:var(--muted)}.compare{gap:8px;display:flex}.compare figure{text-align:center;margin:0}.compare figcaption{color:var(--muted);margin-top:2px;font-size:11px}.mini{border-radius:4px;display:block}.mini-btn{background:0 0;border:none;border-radius:4px;padding:0}.mini-btn:hover{outline:2px solid var(--blue)}.notes{color:var(--ink);margin:6px 0 0;padding-left:18px;font-size:13px;line-height:1.6}.link-btn{color:var(--muted);background:0 0;border:none;margin:0 auto 12px;font-size:12px;text-decoration:underline;display:block}.legend{color:var(--muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 6px;margin:8px 0 14px;font-size:12px;display:flex}.dot{border-radius:50%;width:10px;height:10px;margin-left:6px;display:inline-block}.dot.ok{background:#2f8f5b}.dot.order{background:#d4881f}.dot.backwards{background:#8a5cc2}.dot.extra{background:#c8402f}.result-detail{flex-wrap:wrap;gap:10px 18px;margin-top:8px;display:flex}.result-char{align-items:flex-start;gap:8px;display:flex}.result-char .notes{max-width:170px;margin-top:0}.score-card{text-align:center;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin:12px 0 16px;padding:24px 16px}.stars{letter-spacing:6px;font-size:34px}.star{color:var(--line)}.star.on{color:#f0b429}.score{font-variant-numeric:tabular-nums;margin-top:4px;font-size:64px;font-weight:800;line-height:1}.score small{color:var(--muted);margin-left:4px;font-size:20px;font-weight:600}.verdict{margin:8px 0 4px;font-size:20px;font-weight:700}.result-list{margin:0;padding:0;list-style:none}.result-list li{border-top:1px solid var(--line);padding:10px 0}.result-list li:first-child{border-top:none}.result-main{align-items:center;gap:12px;display:flex}.result-word{gap:2px;display:flex}.glyph{font-family:var(--kai);background:0 0;border:none;border-radius:6px;padding:0 2px;font-size:30px}.glyph:hover{background:var(--paper)}.glyph.ok{color:var(--ok)}.glyph.warn{color:var(--warn)}.glyph.bad{color:var(--bad)}.result-py{color:var(--blue);flex:1;font-size:14px}.result-score{font-variant-numeric:tabular-nums;text-align:right;min-width:36px;font-weight:700}.result-list li.ok .result-score{color:var(--ok)}.result-list li.warn .result-score{color:var(--warn)}.result-notes{color:var(--muted);flex-wrap:wrap;gap:4px 14px;margin-top:4px;font-size:13px;display:flex}.result-notes b{font-family:var(--kai);color:var(--ink);font-size:16px}.actions{flex-direction:column;align-items:stretch;gap:10px;display:flex}.modal{z-index:10;background:#1f2a4473;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal-card{background:var(--card);border-radius:var(--radius);flex-direction:column;align-items:center;gap:12px;width:100%;max-width:320px;padding:20px;display:flex}.modal-title{font-size:18px;font-weight:700}@media (width<=600px){.practice{padding:6px 12px 8px}.stage{gap:10px;margin-top:8px}.prompt{padding:10px 12px}.py{font-size:26px}.prompt-tools{margin-top:8px}.prompt-tools .btn{padding:7px 14px;font-size:14px}.example{margin-top:6px;font-size:16px;line-height:1.45}.english{margin-top:2px}.pad-tools{flex-wrap:nowrap;gap:6px}.pad-tools .btn{white-space:nowrap;padding:8px 10px;font-size:13px}.submit{width:100%;max-width:360px;margin-top:8px;padding:12px 22px}.write-hint:not(.nudge){display:none}.write-hint.nudge{margin:6px 0 0}.mode-switch{display:none}}@media (orientation:landscape) and (width>=640px){main.practice{max-width:1240px;padding:8px 16px}.stage{grid-template:"prompt write""tools write"1fr/minmax(220px,300px) minmax(0,1fr);align-items:start;column-gap:20px}.stage.is-feedback{grid-template-rows:auto;grid-template-areas:"prompt write"}.write{align-items:center}.pad-tools{flex-wrap:wrap}.submit{width:100%}.mode-switch{margin-top:8px}}@media (orientation:landscape) and (height<=520px){.stage{grid-template-columns:minmax(190px,230px) minmax(0,1fr);column-gap:14px}.topbar{min-height:28px}.stage{row-gap:8px;margin-top:6px}.prompt{padding:8px 10px}.py{font-size:22px}.answer-word{font-size:30px}.prompt-tools{margin-top:6px}.prompt-tools .btn,.pad-tools .btn{padding:6px 10px;font-size:13px}.example{margin-top:4px;font-size:14px}.submit{margin-top:6px;padding:10px 16px;font-size:15px}.write-hint:not(.nudge),.mode-switch{display:none}.feedback{padding:12px}.feedback-msg{margin:0 0 8px;font-size:17px}.fchar{padding:8px}}@media (width<=380px){.level-grid{grid-template-columns:repeat(2,1fr)}.py{font-size:24px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}