@charset "UTF-8";
:root{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#303b36;background:#f7f5ef;font-synthesis:none;font-weight:400;--green:#365d4c;--orange:#eb8150;--muted:#7d857e;--border:#e6e6dc}
*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #e7a76d;outline-offset:4px}button{touch-action:manipulation}button[hidden]{display:none}.topbar{max-width:1240px;margin:auto;padding:30px 52px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:#354c3f;font-size:19px;letter-spacing:.06em;font-weight:800}.brand-icon{display:grid;place-items:center;background:#365d4c;color:#fff7de;border-radius:12px;width:35px;height:38px;font-size:30px;transform:rotate(-8deg)}.brand-dot{width:6px;height:6px;background:var(--orange);border-radius:50%;margin-left:-6px}.privacy{display:flex;align-items:center;gap:8px;color:#778278;font-size:12px}.privacy>span,.eyebrow>span{width:6px;height:6px;border-radius:50%;background:#78997b}main{max-width:1100px;margin:auto;padding:15px 40px 0}.intro{margin:15px 0 38px}.eyebrow{color:#7b8776;letter-spacing:.13em;font-size:12px;display:flex;align-items:center;gap:8px}.intro h1{position:relative;display:inline-block;font-size:clamp(34px,4vw,48px);letter-spacing:.025em;margin:17px 0 9px;font-weight:800;line-height:1.35}.intro h1>span{color:#d4784e}.intro h1>svg{width:45%;height:16px;position:absolute;bottom:-3px;right:0;fill:none;stroke:#edbe88;stroke-width:4;stroke-linecap:round}.intro>p{font-size:14px;color:#84897e;letter-spacing:.04em;margin:10px 0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 254px;gap:24px;align-items:start}.practice-card{background:#fffef9;border:1px solid #e5e6db;border-radius:24px;padding:26px 32px 20px;box-shadow:0 8px 30px #3b493c05;position:relative}.card-heading{display:flex;justify-content:space-between;align-items:center}.question-label{color:#798276;font-size:12px;display:flex;align-items:center;gap:8px;letter-spacing:.05em}.small-spark{color:#da9456;font-size:18px}#question-index{font-size:12px;color:#939c8f;margin-left:4px;background:#f1f3eb;border-radius:5px;padding:3px 7px}.range-label{display:flex;align-items:center;gap:6px;font-size:11px;color:#92988b}.range-label select{border:1px solid #e4e7db;border-radius:8px;padding:7px 8px;background:#f9faf4;color:#5f705d;font-size:11px}.question{display:flex;align-items:center;justify-content:center;gap:22px;padding:32px 0 30px;font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif;font-size:60px;font-weight:700;letter-spacing:.01em}.operator,.equals{font-size:44px;color:#8b9b83;font-weight:400}.question-mark{color:#dc8754;font-size:56px;transform:rotate(7deg)}.answer-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 13px;font-size:13px;font-weight:600}.answer-heading>span:last-child{font-weight:400;font-size:10px;color:#949b8d}.digit-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.digit-slot{min-width:0}.pad{position:relative;aspect-ratio: .86;background:#fbfcf8;border:1.5px dashed #c9d2bf;border-radius:14px;overflow:hidden;transition:border-color .2s,background .2s}.pad:before,.pad:after{content:"";position:absolute;pointer-events:none}.pad:before{top:50%;left:13%;right:13%;border-top:1px dashed #e0e6d8}.pad:after{left:50%;top:12%;bottom:12%;border-left:1px dashed #e0e6d8}.pad.is-writing{border-color:#69846b;background:#f4f8ef}.pad.is-uncertain{border-color:#dba869;background:#fffcf4}.pad.is-recognized{border-color:#9eb296}.pad-number{position:absolute;left:11px;top:8px;color:#bbc6b3;font-size:10px;pointer-events:none}.pad canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;z-index:1}.clear-pad{position:absolute;top:5px;right:5px;z-index:2;border:0;background:transparent;color:#9aaa93;width:32px;height:32px;border-radius:8px;font-size:22px;line-height:1}.clear-pad:hover{background:#e9eee2;color:#45614a}.recognition{display:flex;align-items:center;justify-content:center;min-height:33px;margin-top:5px;color:#91a086;font-size:10px;gap:5px}.recognition strong{color:#365d4c;font-size:17px}.recognition.uncertain{color:#bd8850}.candidates{display:flex;gap:5px;justify-content:center;min-height:0}.candidate{min-width:30px;min-height:30px;border:1px solid #e3e7d9;background:#f7f9f1;color:#63745c;border-radius:7px;font-size:13px}.candidate[aria-pressed="true"]{background:#e3eddb;color:#365d4c;border-color:#96af8b}.answer-hint{text-align:center;color:#a0a494;font-size:10px;margin:11px 0 16px;letter-spacing:.06em}.feedback{min-height:50px;display:flex;gap:10px;align-items:center;padding:12px 14px;background:#f2f6ec;border:1px solid #edf0e3;border-radius:11px;color:#7d8d70;font-size:12px;line-height:1.6}.feedback-icon{font-size:20px;line-height:1}.feedback.good{background:#edf5e7;color:#3d7241;border-color:#d9e9ce}.feedback.wrong{background:#fff5e8;color:#a66f3e;border-color:#f3dfc0}.feedback.error{background:#fff0eb;color:#a36149;border-color:#f0d3c8}.actions{display:flex;gap:12px;margin:20px 0}.primary,.secondary{border-radius:11px;min-height:48px;padding:12px 22px;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:19px}.primary{background:#365d4c;color:#fffef4;border:1px solid #365d4c;flex:1;box-shadow:0 3px 0 #284939}.primary:hover:not(:disabled){background:#2e503f}.primary span{font-size:18px}.secondary{background:#fffef9;border:1px solid #dee3d5;color:#7f8c76;min-width:125px}.secondary:hover{background:#f3f6ec}.card-bottom{display:flex;align-items:center;gap:8px;font-size:9px;color:#9da696;padding-top:13px;border-top:1px solid #eff0e7;flex-wrap:wrap}.card-bottom>#offline-status{margin-left:auto}.model-status{display:flex;gap:5px;align-items:center}.model-status i{height:5px;width:5px;border-radius:50%;background:#c4a76d}.model-status.ready i{background:#7f9e6e}.model-status.error i{background:#d98561}.text-button{background:none;border:0;color:#976348;text-decoration:underline;padding:2px}.sidebar{display:grid;gap:24px}.mode-card{padding:21px 19px;background:#eef0e7;border:1px solid #e5e7dc;border-radius:17px}.section-kicker{font-size:11px;color:#74816c;margin-bottom:13px;letter-spacing:.04em}.mode-switch{padding:4px;border:1px solid #e0e5d7;border-radius:10px;background:#e6eadf;display:flex;gap:3px}.mode-switch button{border:0;border-radius:7px;padding:10px 4px;background:transparent;font-size:10px;color:#86947a;flex:1;white-space:nowrap}.mode-switch button>span{font-size:14px;vertical-align:middle;margin-right:4px}.mode-switch button[aria-pressed="true"]{background:#fffef6;color:#4f6d4c;box-shadow:0 1px 3px #334b3820}.mode-card p{font-size:10px;line-height:1.8;color:#8a947f;margin:12px 0 0;min-height:36px}.note-card{position:relative;background:#f8edce;border:1px solid #eee1ba;border-radius:3px 3px 16px 3px;padding:28px 21px 15px;transform:rotate(1.5deg);box-shadow:2px 5px 0 #d8c99520}.tape{position:absolute;top:-10px;left:70px;width:80px;height:24px;background:#e5d8ad99;transform:rotate(-7deg);border-left:2px dotted #d9cda5;border-right:2px dotted #d9cda5}.note-star{position:absolute;right:18px;top:17px;color:#b8a15e;font-size:27px}.note-card h2{font-size:14px;font-weight:600;color:#8a774d;margin:0 0 20px;letter-spacing:.04em}.note-card ol{list-style:none;padding:0;margin:0;display:grid;gap:15px;color:#a18e64;font-size:10px}.note-card li{display:flex;gap:9px;align-items:center}.note-card li>span{display:grid;place-items:center;width:18px;height:18px;border:1px solid #cfbd8a;border-radius:50%;font-family:Georgia,serif;font-size:10px}.note-doodle{font-family:Georgia,serif;font-style:italic;font-size:38px;color:#beab79;letter-spacing:8px;margin:22px 0 0 5px;transform:rotate(-6deg)}.note-doodle span{font-size:27px;color:#829b71}.progress-card{display:flex;gap:13px;align-items:center;padding:0 14px;color:#819477}.progress-flower{font-size:39px;color:#b3c29a}.progress-card strong{font-size:24px;line-height:1;display:block;color:#65815d;font-weight:500}.progress-card div>span{display:block;font-size:10px;margin-top:5px;color:#9da68f}footer{padding:30px 0 34px;color:#adb19f;font-size:10px;letter-spacing:.08em;display:flex;justify-content:center;gap:12px}footer span{color:#d1b77f}body.pen-mode .pad{background:#fbfcfa}body.pen-mode .pad.is-writing{background:#f4f8ef}
@media(min-width:1300px){main{padding-top:32px}.intro{margin-bottom:44px}.practice-card{padding:29px 36px 22px}.question{padding-top:36px;padding-bottom:36px}}
@media(max-width:850px){main{padding:10px 25px 0}.topbar{padding:24px 30px}.workspace{grid-template-columns:minmax(0,1fr) 215px;gap:18px}.practice-card{padding:22px}.sidebar{gap:21px}.mode-card{padding:18px 12px}.question{gap:16px;font-size:50px}.digit-slots{gap:9px}.note-card{padding:27px 16px 15px}.card-bottom>#offline-status{margin-left:0}}
@media(max-width:650px){.topbar{padding:20px 20px}.brand{font-size:16px;gap:9px}.privacy{font-size:9px}.privacy>span{width:4px;height:4px}main{padding:10px 17px 0}.intro{margin:11px 3px 27px}.intro h1{font-size:35px}.intro>p{font-size:11px}.eyebrow{font-size:10px}.workspace{display:flex;flex-direction:column;gap:19px}.practice-card{width:100%;padding:20px 18px 17px;border-radius:19px}.sidebar{width:100%;grid-template-columns:1fr 1fr;gap:15px}.mode-card{padding:16px 12px;grid-row:span 1}.note-card{padding:22px 13px 12px;transform:rotate(.7deg)}.note-card h2{font-size:12px;margin-bottom:13px}.note-card ol{font-size:9px;gap:10px}.note-doodle{display:none}.note-star{font-size:22px;right:11px;top:12px}.tape{left:50px;width:60px;height:20px}.progress-card{grid-column:1/-1;justify-content:center;padding:2px}.progress-card strong{display:inline;font-size:17px;margin-right:6px}.progress-card div>span{display:inline;font-size:10px}.progress-flower{font-size:27px}.question{padding:27px 0;font-size:53px;gap:18px}.operator,.equals{font-size:35px}.question-mark{font-size:48px}.answer-heading{font-size:12px}.answer-heading>span:last-child{font-size:9px}.primary,.secondary{padding:10px 14px;min-height:46px}.secondary{min-width:104px}.actions{margin:17px 0}.recognition{font-size:9px}.card-bottom{font-size:8px;justify-content:space-between;gap:5px}.feedback{font-size:11px}.pad{border-radius:12px}footer{font-size:8px;padding:24px 0}.mode-card p{font-size:9px}.section-kicker{font-size:10px}.mode-switch button{font-size:9px}.mode-switch button>span{margin-right:2px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
[hidden]{display:none!important}.ink-tools{display:flex;gap:9px}.ink-tools button{border:0;background:transparent;color:#74866e;font-size:11px;padding:7px 4px;min-height:34px}.ink-tools button:hover:not(:disabled){color:#365d4c;text-decoration:underline}.answer-surface{height:230px;position:relative;border:1.5px dashed #c2ceb8;border-radius:15px;background:#fbfcf7;overflow:hidden}.answer-surface:after{content:"";position:absolute;left:6%;right:6%;bottom:25%;border-bottom:1px dashed #dfe6d6;pointer-events:none}.answer-surface.is-writing{border-color:#69846b;background:#f4f8ef}.answer-surface canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}.answer-surface #ink-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#b2bea8;font-size:17px;letter-spacing:.08em;pointer-events:none}.reading-status{font-size:11px;color:#7d9072;margin:0 0 12px;text-align:center;line-height:1.7;min-height:19px}.reading-review{border:1px solid #e1e8d8;border-radius:12px;background:#f6f9ef;padding:12px 15px;margin-bottom:16px}.reading-main{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.reading-main>span{color:#7f9074;font-size:12px}.reading-digits{display:flex;gap:0;flex-wrap:wrap}.read-digit{min-width:27px;min-height:38px;padding:0 2px;border:0;border-bottom:2px solid transparent;background:transparent;color:#365d4c;font-family:ui-rounded,system-ui,sans-serif;font-size:31px;line-height:1.1}.read-digit.selected{border-color:#92ac80;background:#e8f0dd;border-radius:5px 5px 0 0}.read-digit.uncertain{color:#bf8750;border-bottom-color:#dab080}.digit-candidates{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px}.digit-candidates>span{color:#8b927b;font-size:11px}.digit-candidates .candidate{min-height:34px;min-width:36px}.review-hint{font-size:10px;color:#95a087;margin:10px 0 0}.alternate-toggle{padding:5px 0;border:0;border-bottom:1px dashed #bcc8ad;background:none;color:#889775;font-size:10px;margin-top:7px;min-height:28px}.alternate-readings{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}.alternate-reading{padding:7px 12px;background:#fffef5;border:1px solid #d8e1ca;border-radius:7px;color:#638050;font-size:16px;min-width:45px}.answer-heading .ink-tools{font-weight:400}.answer-heading{margin-bottom:9px}.answer-hint{margin-top:11px;color:#8b997e}
.surface-clear{position:absolute;top:9px;right:9px;z-index:3;display:grid;place-items:center;width:38px;height:36px;padding:8px;border:1px solid #dce4d3;border-radius:9px;background:#fffef6ed;color:#778d6e;touch-action:manipulation}.surface-clear svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.surface-clear:hover:not(:disabled){color:#365d4c;background:#eaf1e1}.surface-clear:disabled{cursor:default;opacity:.35}
@media(max-width:650px){.answer-surface{height:210px}.answer-surface #ink-placeholder{font-size:15px}.ink-tools{gap:7px}.ink-tools button{font-size:10px;padding:6px 2px}.reading-main{gap:8px}.reading-review{padding:10px 12px}.read-digit{font-size:28px;min-width:23px}.answer-hint{font-size:9px}}
@media(max-width:650px){.sidebar{display:contents}.mode-card{order:-1;width:100%;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;padding:11px 13px}.mode-card .section-kicker{margin:0}.mode-card .mode-switch{justify-self:end;width:100%;max-width:215px}.mode-card p{grid-column:1/-1;min-height:0;margin:0}.note-card{width:100%;margin-top:4px;padding:20px 17px 16px}.note-card ol{display:flex;flex-wrap:wrap;gap:12px}.note-card h2{margin-bottom:12px}.note-card .tape{left:calc(50% - 30px)}.progress-card{width:100%;margin:0}.workspace{gap:15px}}