:root{--board: #1f5b3f;--board-dark: #17492f;--board-light: #2a6b4b;--wood: #d9a86c;--wood-dark: #b98a52;--chalk: #f4f1e4;--chalk-dim: rgba(244, 241, 228, .72);--chalk-faint: rgba(244, 241, 228, .28);--correct: #8ede9e;--wrong: #ff9c8a;--radius: 18px;--tap: 56px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--wood);color:var(--chalk);font-family:Chalkboard SE,Comic Sans MS,PingFang TC,Microsoft JhengHei,Noto Sans TC,system-ui,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}.app-frame{height:100dvh;display:flex;padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 8px) calc(env(safe-area-inset-bottom) + 8px) calc(env(safe-area-inset-left) + 8px);background:linear-gradient(160deg,var(--wood) 0%,var(--wood-dark) 100%)}.board{flex:1;min-height:0;border-radius:12px;background:radial-gradient(circle at 30% 20%,var(--board-light) 0%,transparent 55%),radial-gradient(circle at 75% 80%,var(--board-light) 0%,transparent 50%),var(--board);box-shadow:inset 0 0 60px #00000059,0 4px 14px #0000004d;position:relative;overflow:hidden;display:flex;flex-direction:column}.chalk{text-shadow:0 0 1px rgba(244,241,228,.6);letter-spacing:.04em}.scroll-area{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}.chalk-btn{min-height:var(--tap);padding:.6em 1.4em;border:3px solid var(--chalk-dim);border-radius:var(--radius);background:transparent;color:var(--chalk);font:inherit;font-size:clamp(1.05rem,3.6vw,1.5rem);cursor:pointer;position:relative;transition:transform .08s ease,background .15s ease}.chalk-btn:after{content:"";position:absolute;left:8%;right:8%;bottom:-3px;height:8px;border-radius:0 0 var(--radius) var(--radius);background:repeating-linear-gradient(115deg,var(--chalk-faint) 0 3px,transparent 3px 6px)}.chalk-btn:active:not(:disabled){transform:translateY(2px)}.chalk-btn:disabled{opacity:.45;cursor:default}.chalk-btn.selected{background:var(--chalk);color:var(--board);border-color:var(--chalk)}.chalk-btn.correct{border-color:var(--correct);color:var(--correct)}.chalk-btn.wrong{border-color:var(--wrong);color:var(--wrong)}.chalk-btn:focus-visible{outline:3px solid #ffe08a;outline-offset:3px}.home{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1rem,4vh,2.2rem);padding:1rem}.home h1{margin:0;font-size:clamp(2.6rem,13vw,5.5rem);font-weight:700;letter-spacing:.08em;-webkit-text-stroke:2px var(--chalk);color:transparent}.home-actions{display:flex;flex-wrap:wrap;gap:clamp(.6rem,3vw,1rem);justify-content:center;width:min(100%,30rem)}.home-actions .chalk-btn{flex:1 1 8rem;min-width:0}.home-summary{margin:0;color:var(--chalk-dim);font-size:clamp(.8rem,3.2vw,1.05rem);text-align:center}.page-title{text-align:center;font-size:clamp(1.3rem,5.5vw,1.9rem);padding:.75rem 4rem .25rem;flex-shrink:0}.doodle{position:absolute;color:var(--chalk-faint);font-size:clamp(1.4rem,5vw,2.4rem);pointer-events:none}.portal{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.5rem,2vh,1rem);padding:clamp(1rem,4vh,2rem) clamp(.9rem,4vw,2rem)}.portal-title{margin:0;font-size:clamp(2rem,9vw,4rem);font-weight:700;letter-spacing:.06em;-webkit-text-stroke:2px var(--chalk);color:transparent;text-align:center}.portal-sub{margin:0 0 clamp(.5rem,2vh,1.2rem);color:var(--chalk-dim);font-size:clamp(.9rem,3.6vw,1.2rem)}.subject-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.6rem,3vw,1.2rem);width:min(100%,40rem)}.subject-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:clamp(1rem,4.5vw,2rem) .5rem;min-height:clamp(8rem,28vw,11rem);text-align:center}.subject-icon{font-size:clamp(1.3rem,6vw,2.2rem);line-height:1.1}.subject-title{font-size:clamp(1.2rem,5.2vw,1.8rem);font-weight:700}.subject-desc{font-size:clamp(.72rem,3vw,.95rem);color:var(--chalk-dim)}@media (min-width: 700px){.subject-grid{grid-template-columns:repeat(4,1fr)}}.setup{padding:.25rem clamp(.9rem,4vw,2rem) .75rem;display:flex;flex-direction:column;gap:clamp(.5rem,1.6vh,1.1rem)}.setup-row{display:flex;flex-direction:column;gap:.25rem}.setup-label{font-size:clamp(.85rem,3.4vw,1.1rem);color:var(--chalk-dim);white-space:nowrap}.setup-controls{display:flex;align-items:center;gap:clamp(.4rem,2vw,.8rem);flex-wrap:wrap}.setup-controls .icon-btn{flex:1 1 0;min-width:44px}.setup-controls.stepper-controls{justify-content:flex-start}.setup-controls.stepper-controls .icon-btn{flex:0 0 auto}.stepper-value{min-width:4rem;text-align:center;font-size:clamp(1.6rem,7vw,2.2rem)}.icon-btn{min-height:clamp(44px,9.5vw,var(--tap));padding:0 .2em;font-size:clamp(1rem,4.2vw,1.5rem);display:grid;place-items:center}@media (min-width: 640px){.setup-row{display:grid;grid-template-columns:minmax(6rem,auto) 1fr;align-items:center;gap:1.2rem}.setup-label{font-size:1.35rem;color:var(--chalk)}.setup-controls .icon-btn{flex:0 0 auto;min-width:var(--tap)}}.top-bar{display:flex;justify-content:center;gap:.5rem;padding:.75rem .5rem .25rem 4rem}.tab{padding:.45em 1.5em;border-radius:14px 14px 0 0;border:none;background:transparent;color:var(--chalk-dim);font:inherit;font-size:clamp(1rem,4vw,1.35rem);cursor:pointer}.tab.active{background:var(--chalk);color:var(--board);font-weight:700}.back-btn{position:absolute;top:calc(.5rem + env(safe-area-inset-top));left:.6rem;z-index:2;width:3rem;min-height:3rem;border-radius:50%;padding:0;font-size:1.3rem}.start-btn{align-self:center;min-width:12rem;margin-top:.25rem;font-size:clamp(1.15rem,4.6vw,1.7rem);margin-bottom:calc(env(safe-area-inset-bottom) + .5rem);flex-shrink:0}.hint{color:var(--wrong);font-size:.95rem;text-align:center;min-height:1.2em}.practice{height:100%;display:flex;flex-direction:column;padding:.5rem clamp(.6rem,3vw,1.5rem) 1rem}.hud{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;font-size:clamp(.78rem,3vw,1rem);line-height:1.5;color:var(--chalk-dim)}.hud-actions{display:flex;gap:.4rem}.hud-actions .icon-btn{width:2.8rem;min-height:2.8rem;font-size:1.1rem}.question{flex:1;display:grid;place-items:center;font-size:clamp(2.4rem,12vw,5rem);padding:.5rem;text-align:center;word-break:break-word}.choices{display:grid;gap:clamp(.5rem,2.5vw,1rem);grid-template-columns:repeat(2,1fr)}.choices .chalk-btn{min-height:clamp(3.6rem,11vh,5.5rem);font-size:clamp(1.6rem,7vw,2.6rem)}@media (orientation: landscape) and (max-height: 500px){.choices{grid-template-columns:repeat(4,1fr)}.question{font-size:clamp(2rem,8vh,3.5rem)}}@media (min-width: 700px){.choices{grid-template-columns:repeat(4,1fr)}}@media (min-width: 700px) and (orientation: portrait){.practice{max-width:46rem;margin:0 auto;width:100%;gap:clamp(1rem,3vh,2rem)}.hud{flex:0 0 auto}.question{flex:1 1 auto;align-content:center;padding:clamp(1rem,6vh,4rem) .5rem clamp(.5rem,2vh,1rem)}.choices{grid-template-columns:repeat(2,1fr)}.choices .chalk-btn{min-height:clamp(4.5rem,9vh,6.5rem)}}@media (min-width: 900px) and (orientation: landscape){.practice{max-width:64rem;margin:0 auto;width:100%}}.feedback{text-align:center;font-size:clamp(1rem,4vw,1.4rem);min-height:4.5rem;display:grid;place-items:center;gap:.4rem}.feedback .mark{font-size:clamp(2rem,9vw,3rem)}.feedback .mark.ok{color:var(--correct)}.feedback .mark.no{color:var(--wrong)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0a281aeb;display:grid;place-items:center;z-index:5;padding:1rem}.overlay-panel{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center}.overlay-panel h2{font-size:clamp(1.6rem,7vw,2.4rem);margin:0}.result{padding:clamp(1rem,4vh,2rem) clamp(.8rem,4vw,2rem);display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center}.result h2{font-size:clamp(1.8rem,8vw,2.8rem);margin:0}.score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.6rem;width:min(100%,34rem)}.score-cell{border:2px solid var(--chalk-faint);border-radius:14px;padding:.6rem .4rem}.score-cell .label{font-size:.85rem;color:var(--chalk-dim)}.score-cell .value{font-size:clamp(1.2rem,5.5vw,1.8rem)}.mistakes{width:min(100%,34rem);text-align:left;display:flex;flex-direction:column;gap:.5rem}.mistake-item{border:2px solid var(--chalk-faint);border-radius:12px;padding:.55rem .8rem;font-size:clamp(.9rem,3.6vw,1.1rem)}.mistake-item .yours{color:var(--wrong)}.mistake-item .right{color:var(--correct)}.result-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}.history{padding:1rem clamp(.8rem,4vw,2rem) 2rem;display:flex;flex-direction:column;gap:1rem;align-items:center}.history h2{margin:0;font-size:clamp(1.5rem,7vw,2.2rem)}.history-empty{color:var(--chalk-dim)}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}.worksheet{height:100%;display:flex;flex-direction:column;padding:.4rem clamp(.5rem,2.5vw,1rem) .5rem;gap:.4rem}.ws-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-shrink:0}.ws-header .icon-btn{width:2.8rem;min-height:2.8rem;font-size:1.1rem}.ws-progress{font-size:clamp(.85rem,3.4vw,1.1rem);color:var(--chalk-dim)}.ws-submit{min-height:2.8rem;padding:.3em 1.2em;font-size:clamp(1rem,4vw,1.3rem)}.ws-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:.5rem}.ws-paper{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fdfdf7;border-radius:10px;padding:.3rem;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(var(--ws-rows, 10),auto);grid-auto-flow:column;gap:.25rem;align-content:start}.ws-cell{display:grid;grid-template-columns:1.6rem 1fr auto;align-items:center;gap:.3rem;min-height:clamp(2.6rem,7.5vw,3.2rem);padding:.3rem .4rem;border:none;border-bottom:1px solid #dfe6df;border-radius:8px;background:transparent;font:inherit;font-size:clamp(.95rem,4vw,1.25rem);color:#2f6b4f;cursor:pointer;text-align:left}.ws-cell.active{background:#fff6c4;box-shadow:inset 0 0 0 2px #e8c34a}.ws-cell.filled .ws-answer{color:#1d5c3c;font-weight:700}.ws-no{font-size:.72em;color:#9bb3a4;text-align:right}.ws-expr{white-space:nowrap}.ws-answer{min-width:2.2em;text-align:center;font-weight:700}.ws-blank{display:inline-block;width:1.8em;border-bottom:2px solid #b9c9be}.ws-pad{flex-shrink:0}.numpad{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.25rem,1.5vw,.5rem);max-width:22rem;margin:0 auto;width:100%}.pad-key{grid-column:span 2}.pad-zero{grid-column:span 4}.pad-prev,.pad-next{grid-column:span 3}.pad-key{min-height:clamp(2.6rem,8vh,3.6rem);font-size:clamp(1.2rem,5vw,1.7rem);padding:0}@media (min-width: 700px),(orientation: landscape) and (min-width: 560px){.ws-body{flex-direction:row}.ws-paper{flex:1}.ws-pad{width:clamp(13rem,30vw,20rem);display:flex;align-items:center}.numpad{max-width:none}.pad-key{min-height:clamp(3rem,11vh,4.5rem)}.ws-body:has(.abacus){flex-direction:column}.ws-body:has(.abacus) .ws-pad{width:100%;flex-direction:column;flex:0 0 auto;max-height:52%;overflow:visible}.ws-body:has(.abacus) .ws-paper{flex:1 1 auto;min-height:6rem}}@media (min-width: 1000px){.ws-paper{grid-template-columns:repeat(3,1fr)}}.ws-cell.right,.ws-cell.wrong{grid-template-columns:1.6rem 1fr auto auto;cursor:default;opacity:1}.ws-paper:has(.ws-cell.right,.ws-cell.wrong){grid-template-columns:1fr}@media (min-width: 560px){.ws-paper:has(.ws-cell.right,.ws-cell.wrong){grid-template-columns:repeat(2,1fr)}}@media (min-width: 1000px){.ws-paper:has(.ws-cell.right,.ws-cell.wrong){grid-template-columns:repeat(3,1fr)}}.ws-cell.right{background:#eaf7ee}.ws-cell.wrong{background:#fdeeea}.ws-mark{display:inline-flex;align-items:baseline;gap:.25rem;margin-left:.3rem;font-weight:700;font-size:1.05em}.ws-mark .ok{color:#2e9e57}.ws-mark .no{color:#d4523c}.ws-correct{color:#2e9e57;font-size:.9em}.ws-cell.wrong .ws-answer{color:#d4523c;text-decoration:line-through}.ws-cell.right .ws-answer{color:#2e9e57}.ws-cell:disabled{opacity:1}.ws-progress .ok{color:var(--correct)}.ws-progress .no{color:var(--wrong)}.worksheet .ws-body:has(.ws-paper:only-child) .ws-paper{flex:1}.setup-note{font-size:.8em;color:var(--chalk-faint);margin-left:.4em;text-shadow:none;letter-spacing:0}.mode-btn{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.7em 1em}.mode-name{font-size:1em}.mode-desc{font-size:.62em;color:var(--chalk-dim);text-shadow:none;letter-spacing:0;font-weight:400}.mode-config{font-size:.55em;color:var(--chalk-faint);text-shadow:none;letter-spacing:0;font-weight:400;margin-top:.15rem}.ws-paper.not-started .ws-expr{visibility:hidden}.ws-paper.not-started .ws-cell{cursor:default}.home-credit{margin:clamp(.5rem,2vh,1.2rem) 0 0;display:flex;flex-direction:column;align-items:center;gap:.1rem;font-size:clamp(.85rem,3.2vw,1rem);color:var(--chalk-dim)}.credit-note{font-size:.8em;color:var(--chalk-faint);text-shadow:none;letter-spacing:0}.abacus{display:flex;justify-content:center;width:100%}.abacus-frame{--bead-h: clamp(11px, 2.4vw, 20px);--bead-w: 100%;--col-w: minmax(0, 1fr);display:grid;grid-template-columns:repeat(var(--ab-cols, 13),minmax(0,1fr));gap:0;width:100%;max-width:min(100%,34rem);padding:clamp(.4rem,1.6vw,.8rem) clamp(.3rem,1.2vw,.6rem);background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 5px),linear-gradient(170deg,#a9743c,#7d5228);border:clamp(5px,1.4vw,9px) solid #5e3f22;border-radius:6px;box-shadow:inset 0 3px 10px #0006,0 4px 10px #00000059;position:relative}.abacus-col{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;flex:0 0 auto}.abacus-col:before{content:"";position:absolute;top:0;bottom:1.8rem;left:50%;width:3px;transform:translate(-50%);background:linear-gradient(90deg,#3d2812,#7a5730 45%,#3d2812);border-radius:2px}.abacus-upper{position:relative;z-index:1;height:calc(var(--bead-h) * 2.2);width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;overflow:hidden}.abacus-lower{position:relative;z-index:1;height:calc(var(--bead-h) * 5.2);width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow:hidden}.abacus-bar{position:relative;z-index:2;width:calc(100% + 12px);height:clamp(6px,1.5vw,9px);background:linear-gradient(180deg,#7a5730,#4a3218 55%,#2f200e);box-shadow:0 1px 3px #0006;margin:2px -6px;flex-shrink:0}.bead{width:92%;height:var(--bead-h);padding:0;border:none;background:linear-gradient(180deg,#00000059,#ffffff59 42%,#ffffff26 52%,#0006),linear-gradient(90deg,#6b3410,#a5561d 22%,#d98a3c,#a5561d 78%,#6b3410);background-blend-mode:overlay,normal;clip-path:polygon(34% 0%,66% 0%,88% 26%,100% 50%,88% 74%,66% 100%,34% 100%,12% 74%,0% 50%,12% 26%);cursor:pointer;transition:transform .13s cubic-bezier(.3,1.4,.6,1);display:block;flex-shrink:0}.bead:disabled{cursor:default}.bead.upper{transform:translateY(calc(var(--bead-h) * -1.2))}.bead.upper.active{transform:translateY(0)}.bead.lower{transform:translateY(calc(var(--bead-h) * 1.2))}.bead.lower.active{transform:translateY(0)}.bead.active{background:linear-gradient(180deg,#00000040,#ffffff80 42%,#fff3 52%,#0000004d),linear-gradient(90deg,#a86828,#dda04a 22%,#ffd99a,#dda04a 78%,#a86828);background-blend-mode:overlay,normal;filter:drop-shadow(0 0 4px rgba(255,216,155,.55))}.bead:focus-visible{outline:2px solid #ffe08a;outline-offset:1px}.abacus-digit{margin-top:.3rem;font-size:clamp(.6rem,1.9vw,.9rem);font-weight:700;color:var(--board-dark);background:var(--chalk);border-radius:3px;width:90%;text-align:center;position:relative;z-index:5}.abacus-total{text-align:center;font-size:clamp(.95rem,3.6vw,1.2rem);color:var(--chalk-dim);margin:.4rem 0 .3rem}.abacus-total strong{color:var(--chalk);font-size:1.4em}.input-switch{display:flex;justify-content:center;gap:.4rem;margin-bottom:.4rem}.input-switch .chalk-btn{min-height:2.4rem;padding:.2em 1em;font-size:clamp(.85rem,3.2vw,1rem)}@media (max-height: 450px){.abacus-frame{--bead-h: clamp(7px, 1.6vh, 11px);padding:.25rem;border-width:3px}.abacus-digit{font-size:clamp(.5rem,1.4vh,.7rem);margin-top:.15rem}.abacus-total{margin:.15rem 0;font-size:.85rem}.input-switch .chalk-btn{min-height:2rem;font-size:.8rem;padding:.1em .7em}.ws-body:has(.abacus) .ws-pad{max-height:48%}}.ws-pad:has(.abacus){display:flex;flex-direction:column;align-items:center;gap:.2rem;min-height:0}.ws-pad:has(.abacus) .abacus{min-height:0;flex:0 1 auto}.ws-pad:has(.abacus) .abacus-frame{max-height:100%}.ws-pad:has(.abacus) .input-switch{flex:0 0 auto;margin-bottom:0}.ws-time{margin-left:.6em;font-variant-numeric:tabular-nums;color:var(--chalk);display:inline-block;min-width:3.4em;text-align:right}.stars{display:flex;gap:.3rem;font-size:clamp(1.8rem,8vw,2.8rem);line-height:1}.star{color:var(--chalk-faint)}.star.on{color:#ffd75e;text-shadow:0 0 10px rgba(255,215,94,.5)}.praise{margin:0;font-size:clamp(.95rem,3.8vw,1.2rem);color:var(--chalk-dim);text-align:center;max-width:24rem}.ws-progress{flex:1 1 auto;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}.ws-header .icon-btn,.ws-header .ws-submit{flex:0 0 auto}.card-hint{text-align:center;color:var(--chalk-dim);font-size:clamp(.9rem,3.6vw,1.15rem);padding:.5rem .5rem 0}.card-prompt{font-size:clamp(3rem,18vw,7rem);line-height:1.1}.scratch-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column;background:var(--board);padding:.4rem;gap:.4rem}.scratch-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-shrink:0}.scratch-title{font-size:clamp(1rem,4vw,1.3rem)}.scratch-actions{display:flex;gap:.4rem}.scratch-actions .chalk-btn{min-height:2.6rem;padding:.2em 1em;font-size:clamp(.9rem,3.6vw,1.1rem)}.scratch-canvas{flex:1;min-height:0;width:100%;border-radius:8px;background-color:#fdfdf7;background-image:linear-gradient(rgba(120,160,130,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,130,.18) 1px,transparent 1px);background-size:28px 28px;touch-action:none;cursor:crosshair;display:block}