@font-face{font-family:Andika;src:url(fonts/Andika-Regular.ttf)}@font-face{font-family:Andika;font-weight:700;src:url(fonts/Andika-Bold.ttf)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
:root{--navy:#0d3b4f;--teal:#138a8a;--orange:#f2762e;--yellow:#ffd23f;--ink:#16323f;--green:#2f9e44;--red:#e03a3e;--blue:#1f5fbf;--purple:#8b5cf6;--soft:#e6f4f3;--line:#c4dedb}
body{margin:0;font-family:Andika,"Segoe UI",Arial,sans-serif;background:#eef7f6;background-image:linear-gradient(#d9ecea 1px,transparent 1px),linear-gradient(90deg,#d9ecea 1px,transparent 1px);background-size:28px 28px;color:var(--ink);font-size:18px;line-height:1.35;overflow-x:hidden}
button{font-family:inherit;cursor:pointer;color:inherit;font-size:inherit}a{color:inherit}input{font-family:inherit}
#download-book{position:fixed;top:11px;right:12px;z-index:200;background:var(--yellow);color:#222;font-weight:bold;padding:10px 14px;border-radius:22px;text-decoration:none;box-shadow:0 2px 6px #0003;min-height:44px;display:flex;align-items:center;font-size:15px;white-space:nowrap}
#download-book:hover{background:#ffc400}#download-book .short{display:none}
.top{background:linear-gradient(90deg,var(--navy),#16707a);color:#fff;display:flex;align-items:center;gap:12px;padding:8px 290px 8px 16px;min-height:66px;border-bottom:5px solid var(--orange)}
.brand{color:#fff;text-decoration:none;display:flex;flex-direction:column;line-height:1.05;min-width:0}
.logo{font-weight:700;font-size:27px;white-space:nowrap}.p{color:#9fe6dc}.y{color:var(--yellow)}
.brand small{color:#cfeeea;font-size:14px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stk{margin-left:auto;background:#ffffff1f;border:2px solid #ffffff55;border-radius:22px;padding:8px 14px;text-decoration:none;color:#fff;font-size:16px;min-height:44px;display:flex;align-items:center;gap:4px;white-space:nowrap;flex:none}
main{max-width:1100px;margin:0 auto;padding:14px 12px 40px}
footer{text-align:center;color:#466;font-size:14px;padding:6px 12px 40px}footer div{font-weight:700;font-size:16px;color:var(--ink)}footer p{margin:4px}
h1,h2,h3{line-height:1.15}
.panel{background:#fff;border-radius:20px;padding:16px 18px;box-shadow:0 2px 0 var(--line);margin:12px 0}
.btn{background:var(--teal);color:#fff;border:0;border-radius:16px;padding:12px 20px;font-weight:700;min-height:48px;box-shadow:0 4px 0 #0b5a5a;font-size:18px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #0b5a5a}.btn[disabled]{opacity:.45;cursor:default}
.btn.y{background:var(--yellow);color:#222;box-shadow:0 4px 0 #c99a00}.btn.o{background:var(--orange);box-shadow:0 4px 0 #a9480f}.btn.g{background:var(--green);box-shadow:0 4px 0 #1d6b2c}.btn.w{background:#fff;color:var(--ink);border:2px solid var(--line);box-shadow:0 3px 0 var(--line)}
.btn.sm{padding:8px 12px;min-height:44px;font-size:16px;border-radius:12px}
.snd{background:var(--soft);border:2px solid #a9d7d1;border-radius:14px;min-width:44px;min-height:44px;padding:6px 10px;font-size:18px;font-weight:700;color:var(--navy);flex:none}
.back{display:inline-flex;align-items:center;gap:4px;text-decoration:none;font-weight:700;color:var(--teal);min-height:44px;padding:4px 0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.muted{color:#4d6870}
/* fractions in text */
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1;margin:0 .12em;font-weight:700}
.fr>span{display:block;padding:0 .18em;text-align:center;min-width:.8em}.fr>span:first-child{border-bottom:.09em solid currentColor;padding-bottom:.08em}.fr>span:last-child{padding-top:.08em}
.mx{white-space:nowrap;font-weight:700}
.blankfrac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1;font-weight:700;margin:0 .12em}
.blankfrac i{font-style:normal;display:block;padding:0 .25em}.blankfrac i:first-child{border-bottom:.09em solid currentColor;padding-bottom:.08em}
.blankfrac .bl{background:#fff3b0;border:2px dashed #c99a00;border-radius:6px;min-width:1.4em;text-align:center}
/* home */
.hero{background:linear-gradient(150deg,#0d3b4f 0%,#16707a 60%,#f2762e 140%);color:#fff;border-radius:24px;padding:22px 24px;display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:center;position:relative;overflow:hidden}
.hero:before{content:"½ ⅓ ¼ ⅛ ⅔ ¾";position:absolute;right:-6px;bottom:-4px;font-size:52px;color:#ffffff14;white-space:nowrap;letter-spacing:10px}
.hero .tag{display:inline-block;background:var(--yellow);color:#222;border-radius:14px;padding:3px 12px;font-weight:700;font-size:16px}
.hero h1{font-size:40px;margin:10px 0 6px}.hero h1 span{color:var(--yellow)}.hero p{margin:0 0 14px;color:#e3f6f3}
.hero .mascot{width:270px;max-width:100%;justify-self:center;position:relative}
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.how div{background:#f0f8f7;border-radius:14px;padding:10px;text-align:center;font-size:15px}.how b{display:block;font-size:26px}
.gradepick{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.gp{border:3px solid var(--line);background:#fff;border-radius:14px;padding:8px 16px;font-weight:700;min-height:48px;font-size:17px}
.gp.on{background:var(--teal);border-color:var(--teal);color:#fff}
.sec{font-size:22px;margin:18px 4px 8px;color:var(--navy)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.act{background:#fff;border-radius:18px;padding:12px;text-decoration:none;display:flex;gap:10px;align-items:flex-start;border:3px solid var(--c,#138a8a);min-height:124px;box-shadow:0 3px 0 var(--line);position:relative}
.act:hover{transform:translateY(-2px)}
.act .ic{font-size:32px;width:52px;height:52px;flex:none;border-radius:14px;background:var(--cl,#e6f4f3);display:flex;align-items:center;justify-content:center}
.act h3{margin:2px 0 4px;color:var(--c,#138a8a);font-size:19px}.act p{margin:0;font-size:15px;color:#4d6870}
.act .n{display:inline-block;background:var(--c);color:#fff;border-radius:50%;width:22px;height:22px;text-align:center;font-size:13px;line-height:22px;font-weight:700}
.act .gr{display:block;font-size:13px;color:#4d6870;margin-top:4px}.act .st{position:absolute;right:10px;bottom:6px;font-size:14px;letter-spacing:1px}
.act.off{opacity:.55}
/* game */
.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{background:#fff;border:2px solid var(--line);border-radius:14px;padding:6px 12px;font-weight:700;font-size:16px}
.ghead{display:flex;align-items:center;gap:12px}.ghead h1{margin:0;font-size:28px;color:var(--navy)}
.ghead .ic{font-size:34px}
.prompt{font-size:24px;font-weight:700;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:4px 0 10px;line-height:1.5}
.prompt .tx{flex:1;min-width:200px}
.vis{margin:10px 0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.vis svg{max-width:100%;height:auto}
.answer{margin-top:10px}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.opt{background:#fff;border:3px solid var(--line);border-radius:16px;padding:12px;font-size:26px;font-weight:700;min-height:64px;box-shadow:0 3px 0 var(--line)}
.opt:hover{border-color:var(--teal)}.opt.ok{background:#d3f5dc;border-color:var(--green)}.opt.bad{background:#ffe0e0;border-color:var(--red);opacity:.7}
.cmpbox{display:flex;align-items:center;justify-content:center;gap:14px;font-size:40px;font-weight:700;flex-wrap:wrap}
.cmpbox .slot{width:72px;height:72px;border:3px dashed #c99a00;background:#fff8d6;border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--navy)}
.cmpbtns{display:flex;justify-content:center;gap:14px;margin-top:12px}
.cmpbtns button{width:84px;height:72px;font-size:40px;font-weight:700;border-radius:18px;border:3px solid var(--line);background:#fff;box-shadow:0 4px 0 var(--line)}
.cmpbtns button.ok{background:#d3f5dc;border-color:var(--green)}.cmpbtns button.bad{background:#ffe0e0;border-color:var(--red);opacity:.7}
.fin{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.fin .stack{display:inline-flex;flex-direction:column;align-items:center;gap:6px}
.fin .stack hr{width:100%;border:0;border-top:4px solid var(--ink);margin:0}
.fin input,.single{width:84px;height:60px;font-size:30px;font-weight:700;text-align:center;border:3px solid var(--line);border-radius:14px;background:#fff;color:var(--ink)}
.fin input.whole{height:84px;width:84px}
.fin input:focus,.single:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px #138a8a33}
.single.dec{width:150px}
.fin .lbl{font-size:13px;color:#4d6870;text-align:center}
.fb{min-height:30px;margin-top:12px;font-size:20px;font-weight:700;border-radius:14px;padding:0}
.fb.on{padding:10px 14px}.fb.good{background:#e1f7e6;color:#1d6b2c}.fb.bad{background:#ffe8e8;color:#a3191c}.fb.nudge{background:#fff6d1;color:#7a5a00}
.fb .ex{display:block;font-weight:400;color:var(--ink);font-size:18px;margin-top:4px}
.hintbox{background:#fff8d6;border:2px solid #f0d36b;border-radius:14px;padding:10px 14px;margin-top:10px;font-size:18px;display:none}.hintbox.on{display:block}
.ctl{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.result{text-align:center}.result .big{font-size:56px;font-weight:700;color:var(--navy)}
.stars{font-size:44px;letter-spacing:6px}.stars .off{filter:grayscale(1);opacity:.3}
/* shading */
svg .slice{cursor:pointer}svg .slice:hover{filter:brightness(.97)}
.tapcount{text-align:center;font-weight:700;margin-top:4px;color:var(--navy)}
/* number line */
.nl{touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none}
.nl .tally{cursor:grab}
/* match */
.match{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.match .col{display:flex;flex-direction:column;gap:10px}
.mi{background:#fff;border:3px solid var(--line);border-radius:16px;padding:8px;font-size:26px;font-weight:700;min-height:70px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 3px 0 var(--line)}
.mi.sel{border-color:var(--orange);background:#fff1e6}.mi.done{background:#d3f5dc;border-color:var(--green);cursor:default}.mi.wrong{animation:shake .4s}
.mi svg{width:120px;height:auto}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* wall */
.wall{width:100%;height:auto;touch-action:none;user-select:none}
.wall .pc{cursor:pointer}
.eqread{font-size:22px;font-weight:700;min-height:40px;text-align:center}
/* lessons */
.lesson h2{margin:4px 0 8px;color:var(--navy)}.lesson .gtag{display:inline-block;background:var(--soft);color:var(--navy);border-radius:10px;padding:2px 10px;font-size:14px;font-weight:700}
.lesson p{font-size:20px}.lesson .ex{background:#f0f8f7;border-radius:14px;padding:10px 14px;font-size:20px}
.ldots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px}.ldots a{width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px;font-weight:700}.ldots a.on{background:var(--teal);color:#fff;border-color:var(--teal)}
/* progress */
table.prog{border-collapse:collapse;width:100%;font-size:16px}table.prog td,table.prog th{border-bottom:1px solid var(--line);padding:8px;text-align:left}table.prog th{color:var(--navy)}
.tro{font-size:42px}
/* teacher */
.tt table{border-collapse:collapse;width:100%;font-size:15px}.tt td,.tt th{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}.tt th{background:var(--navy);color:#fff}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(120px);background:var(--navy);color:#fff;padding:12px 18px;border-radius:16px;font-weight:700;z-index:300;transition:transform .3s;max-width:92vw;text-align:center}
#toast.on{transform:translateX(-50%) translateY(0)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:250;overflow:hidden}.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall 2.8s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
/* certificate */
.cert{border:10px double var(--teal);border-radius:20px;padding:24px;text-align:center;background:#fff}
.cert h2{font-size:34px;color:var(--navy);margin:6px 0}.cert .who{font-size:32px;font-weight:700;border-bottom:3px solid var(--ink);display:inline-block;min-width:60%;padding:4px 10px;margin:10px 0}
@media print{body{background:#fff}body *{visibility:hidden}.cert,.cert *{visibility:visible}.cert{position:absolute;left:0;top:0;width:100%}#download-book{display:none}}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.how{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.top{padding-right:110px}#download-book .long{display:none}#download-book .short{display:inline}.stk .lbl{display:none}
 .hero{grid-template-columns:1fr;padding:18px}.hero h1{font-size:30px}.hero .mascot{width:200px;grid-row:1}
 .logo{font-size:22px}.prompt{font-size:21px}.opt{font-size:22px}.ghead h1{font-size:23px}}
@media (max-width:480px){.grid{grid-template-columns:1fr}.act{min-height:0}.opts{grid-template-columns:1fr 1fr}.match{gap:8px}.mi{font-size:22px;padding:6px}.mi svg{width:84px}
 .cmpbox{font-size:32px;gap:8px}.cmpbtns button{width:72px}.fin input{width:66px;height:54px;font-size:26px}.fin input.whole{width:66px;height:74px}.brand small{display:none}.top{min-height:58px}}
.vis svg.nl{width:100%;max-width:860px}
.mi svg{width:170px}
@media (max-width:480px){.mi svg{width:110px}}