/* 波波乐园 · 数学题型 */
.mt-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;align-items:center}
.mt-wrap.nopic{grid-template-columns:1fr}
.mt-pic{position:relative;margin:0;border:4px solid var(--ink);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 6px 0 var(--ink);aspect-ratio:var(--ar);max-height:min(58dvh,560px);justify-self:center;width:100%;max-width:min(100%,calc(min(58dvh,560px) * var(--ar)));cursor:zoom-in;animation:bkPicIn .5s cubic-bezier(.3,1.5,.5,1)}
.mt-pic img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
#stage.with-sheet .mt-pic{max-height:min(48dvh,420px);max-width:min(100%,calc(min(48dvh,420px) * var(--ar)))}
.mt-card{background:#fff;border:4px solid var(--ink);border-radius:22px;box-shadow:0 6px 0 var(--ink);padding:clamp(12px,1.8vw,20px);display:grid;gap:10px}
.mt-card.wide{width:100%}
.mt-prompt{margin:0;font:700 clamp(17px,2vw,21px)/1.5 var(--f-body)}
.mt-line{margin:0;font:800 clamp(24px,2.9vw,34px)/1.7 var(--f-num);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.mt-tip{margin:0;font:700 15px var(--f-body);color:#8a6a3a}
.mt-box{display:inline-grid;place-items:center;min-width:64px;height:58px;padding:0 8px;border:4px dashed #c9b48a;border-radius:14px;background:#fffdf3;font:800 clamp(26px,3vw,36px) var(--f-num);color:var(--ink);cursor:pointer;vertical-align:middle;transition:transform .15s,border-color .2s,background .2s}
.mt-box.on{border-style:solid;border-color:var(--coral);background:#fff3ea;box-shadow:0 0 0 4px rgba(255,123,84,.25);animation:mtBlink 1.2s ease-in-out infinite}
.mt-box.on .mt-v:empty::after{content:'';display:inline-block;width:3px;height:30px;background:var(--coral);animation:mtCaret .9s steps(1) infinite}
.mt-box.yes{border:4px solid #1f8f55;background:#dcf8e8;color:#1d8a52;animation:bkPop .45s cubic-bezier(.3,1.8,.5,1)}
.mt-box.nope{animation:nope .45s;background:#ffe1e1!important;border-color:var(--bad)!important}
.mt-box.nudge{animation:nope .4s}
.mt-box.chipbox{min-width:80px}
@keyframes mtBlink{50%{box-shadow:0 0 0 7px rgba(255,123,84,.12)}}
@keyframes mtCaret{50%{opacity:0}}
/* keypad */
.mt-pad{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:12px;max-width:620px;margin-inline:auto;width:100%}
.mt-pad button{height:56px;border:4px solid var(--ink);border-radius:16px;background:linear-gradient(180deg,#fff,#f3ead8);box-shadow:0 5px 0 var(--ink);font:800 28px var(--f-num);cursor:pointer;touch-action:manipulation}
.mt-pad button:active,.mt-pad button.hit{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.mt-pad .ok{background:linear-gradient(180deg,#7ee0a0,#2fbf71);color:#fff}
.mt-pad .bs{background:linear-gradient(180deg,#ffe0d0,#ffb38f)}
@media (max-width:520px){.mt-pad{grid-template-columns:repeat(4,minmax(0,1fr))}.mt-pad button{height:50px;font-size:24px}}
/* option chips */
.mt-opts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px}
.mt-opt{border:4px solid var(--ink);border-radius:16px;background:#fff;box-shadow:0 5px 0 var(--ink);padding:6px 18px;font:800 22px var(--f-body);cursor:pointer;transition:transform .15s}
.mt-opt:hover{transform:translateY(-3px)}
.mt-opt.big{font-size:30px;min-width:76px;font-family:var(--f-num)}
.mt-opt.nope{animation:nope .45s;background:#ffe1e1}
.mt-opt.pick{background:#dcf8e8;border-color:#1f8f55}
/* thinking guide */
.mt-guide{margin-top:12px;display:grid;gap:8px}
.mt-think{justify-self:start;border:4px solid #7650d0;border-radius:999px;background:linear-gradient(180deg,#efe7ff,#d9c8ff);color:#3b2a6b;font:800 17px var(--f-body);padding:6px 16px;cursor:pointer;box-shadow:0 4px 0 #5b3bb5}
.mt-think:disabled{opacity:.6;cursor:default}
.mt-steps{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.mt-steps li{display:flex;gap:10px;align-items:baseline;background:#f6f0ff;border:3px solid #b79cf0;border-radius:14px;padding:6px 12px;font:700 17px/1.5 var(--f-body);animation:fadeup .35s ease-out}
.mt-steps li b{flex:none;background:#7650d0;color:#fff;border-radius:999px;padding:0 10px;font-size:14px}
/* pick */
.mt-picks{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:12px}
.mt-pickopt{position:relative;border:4px solid var(--ink);border-radius:18px;background:#fff;box-shadow:0 5px 0 var(--ink);padding:8px 18px;font:800 clamp(20px,2.4vw,28px) var(--f-num);cursor:pointer;display:grid;justify-items:center;gap:4px;min-width:80px}
.mt-picks.imgs .mt-pickopt img{max-height:clamp(70px,14vh,130px);max-width:200px;object-fit:contain}
.mt-pickopt .mt-ring{position:absolute;inset:-8px;border:5px solid transparent;border-radius:24px;pointer-events:none}
.mt-pickopt.yes .mt-ring{border-color:var(--coral);animation:mtRing .5s cubic-bezier(.3,1.6,.5,1)}
.mt-pickopt.yes{background:#fff7dc}
.mt-pickopt.nope{animation:nope .45s;background:#ffe1e1}
@keyframes mtRing{from{transform:scale(1.4) rotate(-10deg);opacity:0}}
/* sequence train */
.mt-train{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;justify-content:center}
.mt-car{display:inline-grid;place-items:center;min-width:64px;height:58px;padding:0 8px;border:4px solid var(--ink);border-radius:14px;background:linear-gradient(180deg,#fff7dc,#ffe08a);font:800 clamp(24px,2.8vw,32px) var(--f-num);box-shadow:0 4px 0 var(--ink)}
.mt-car.new{background:linear-gradient(180deg,#dcf8e8,#9be8b8)}
.mt-train.sm .mt-car{min-width:44px;height:42px;font-size:20px}
.mt-hop{position:relative;width:26px;height:58px;display:inline-block}
.mt-hop::before{content:'';position:absolute;left:2px;right:2px;top:26px;height:4px;background:var(--ink);border-radius:2px}
.mt-hop::after{content:attr(data-d);position:absolute;left:50%;top:2px;transform:translateX(-50%);font:800 12px var(--f-num);color:#7650d0;white-space:nowrap}
.mt-train.sm .mt-hop{height:42px}.mt-train.sm .mt-hop::before{top:19px}
/* column sums */
.mt-colwrap{display:grid;justify-items:center;gap:6px}
.mt-col{display:grid;gap:4px;background:#fff;border:4px solid var(--ink);border-radius:22px;box-shadow:0 6px 0 var(--ink);padding:14px 22px 18px;background-image:linear-gradient(90deg,transparent 0 calc(33.3% - 1px),#e8f0ff calc(33.3% - 1px) 66.6%,#fff6e0 66.6%)}
.mt-crow{display:grid;grid-template-columns:repeat(3,72px);gap:6px;align-items:center;justify-items:center}
.mt-crow.line{height:6px;background:var(--ink);border-radius:3px;grid-template-columns:none}
.mt-crow.carry{height:26px}
.mt-dg{font:800 44px/1 var(--f-num);min-height:58px;display:grid;place-items:center}
.mt-dg .mt-box{min-width:60px}
.mt-dg.op{color:#7650d0}
.mt-carry{font:800 20px var(--f-num);color:var(--coral)}
.mt-carry.show::after{content:attr(data-c)}
.mt-colhead{display:grid;grid-template-columns:72px 72px 72px;gap:6px;font:700 14px var(--f-body);color:#8a6a3a;text-align:center}
.mt-colhead span:first-child{grid-column:2}
@media (max-width:520px){.mt-crow,.mt-colhead{grid-template-columns:repeat(3,58px)}.mt-dg{font-size:36px}}
/* number bond */
.mt-bond{position:relative;width:min(100%,340px);height:200px;margin:0 auto}
.mt-bline{position:absolute;inset:30px 0 0;width:100%;height:150px}
.mt-bline path{fill:none;stroke:var(--ink);stroke-width:4}
.mt-bnode{position:absolute;display:grid;place-items:center;width:90px;height:90px;border:4px solid var(--ink);border-radius:50%;background:#fff;box-shadow:0 5px 0 var(--ink);font:800 36px var(--f-num)}
.mt-bnode .mt-box{border:0;background:transparent;min-width:60px}
.mt-bnode.whole{left:50%;top:0;transform:translateX(-50%);background:#ffe08a}
.mt-bnode.p0{left:4%;bottom:0;background:#bfe3ff}.mt-bnode.p1{right:4%;bottom:0;background:#ffd0dc}
.mt-dots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.mt-dots i{width:20px;height:20px;border-radius:50%;border:3px solid var(--ink)}.mt-dots i.a{background:#4d9dff}.mt-dots i.b{background:#ff7b9c}
/* base-ten blocks */
.mt-blocks{display:flex;align-items:flex-end;gap:5px;flex-wrap:wrap;justify-content:center;padding:10px;background:#f4fbff;border:3px dashed #9cc8f0;border-radius:16px;min-height:100px}
.mt-blocks .rod{display:grid;grid-template-rows:repeat(10,1fr);width:16px;height:120px;border:3px solid var(--ink);border-radius:4px;background:#4d9dff;overflow:hidden}
.mt-blocks .rod b{border-bottom:1px solid rgba(255,255,255,.6)}
.mt-blocks .ones{display:grid;grid-template-columns:repeat(3,16px);gap:3px;margin-left:8px}
.mt-blocks .cube{width:16px;height:16px;border:3px solid var(--ink);border-radius:3px;background:#ffb020}
/* number line */
.mt-nl{position:relative;height:110px;margin:10px 18px 0}
.mt-nlbar{position:absolute;left:-12px;right:-12px;top:44px;height:5px;background:var(--ink);border-radius:3px}
.mt-tick{position:absolute;top:34px;transform:translateX(-50%);display:grid;justify-items:center;gap:4px}
.mt-tick i{width:4px;height:24px;background:var(--ink);border-radius:2px}
.mt-tick span{font:800 18px var(--f-num)}
.mt-tick .mt-box{min-width:46px;height:44px;font-size:22px}
.mt-arcs{position:absolute;left:0;right:0;top:4px;width:100%;height:40px;overflow:visible}
.mt-arcs path{fill:none;stroke:#7650d0;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:3 2}
.mt-frog{position:absolute;top:-2px;transform:translateX(-50%);font-size:30px;transition:left .22s cubic-bezier(.3,1.6,.5,1)}
/* compare */
.mt-cmp{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.mt-cn{border:4px solid var(--ink);border-radius:20px;background:#fff;box-shadow:0 5px 0 var(--ink);padding:8px;display:grid;justify-items:center;gap:6px;cursor:pointer}
.mt-cn b{font:800 40px var(--f-num)}
.mt-cn .mt-blocks{min-height:80px;transform:scale(.8)}
.mt-cn.yes{outline:5px solid var(--coral);outline-offset:4px}
.mt-cn.nope{animation:nope .45s}
.mt-sign{font:800 60px var(--f-num);color:var(--coral);min-width:60px;text-align:center}
.mt-vs{font:400 26px var(--f-display)}
/* word problems */
.mt-story{margin:0;font:700 clamp(18px,2.2vw,23px)/1.8 var(--f-body)}
.mt-sn{border:3px solid var(--ink);border-radius:10px;background:#fff7dc;font:800 1em var(--f-num);padding:0 6px;cursor:pointer;margin:0 2px}
.mt-sn.yes{background:#ffd34a;transform:scale(1.1)}
.mt-sn.nope{animation:nope .45s;background:#ffe1e1}
.mt-wsteps{display:grid;gap:8px;margin-top:12px}
.mt-ws{border:3px solid #d9cdb8;border-radius:16px;padding:8px 12px;background:#fffaf0;opacity:.55;display:grid;gap:6px}
.mt-ws>b{font:800 17px var(--f-body)}.mt-ws>span{font:700 14px var(--f-body);color:#7a6a58}
.mt-ws.on{opacity:1;border-color:var(--coral);background:#fff;box-shadow:0 4px 0 #e0b8a0}
.mt-ws.done{opacity:1;border-color:#1f8f55;background:#effaf3}
.mt-ws .mt-opts{justify-content:flex-start;margin:0}
.mt-final{display:inline-grid;place-items:center;min-width:56px;border-bottom:4px solid var(--ink);font:800 1.1em var(--f-num)}
.mt-final.yes{color:#1d8a52}
/* explanation sheet */
.mt-dm{display:grid;gap:10px;justify-items:center}
.mt-big{margin:0;font:800 34px var(--f-num)}
.mt-dsteps{margin:0;padding-left:22px;display:grid;gap:4px;font:700 15px/1.5 var(--f-body);text-align:left;justify-self:stretch}
.mt-ans{color:#1d8a52;border-bottom:3px solid #1d8a52;padding:0 4px}
/* ===== 数学互动玩法 mp-* ===== */
.mp-ok{justify-self:center;border:4px solid var(--ink);border-radius:18px;background:linear-gradient(180deg,#7ee0a0,#2fbf71);color:#fff;box-shadow:0 5px 0 var(--ink);padding:8px 28px;font:800 22px var(--f-body);cursor:pointer;min-height:48px;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.mp-ok:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.mp-target{display:inline-block;background:#fff3c4;border:3px solid var(--ink);border-radius:12px;padding:0 12px;font:800 1em var(--f-num);color:#c2410c;animation:bkPop .5s}
.mp-now{margin:0;text-align:center;font:700 19px var(--f-body);color:#5a4a3a}
.mp-now b{font:800 26px var(--f-num);color:#7650d0;margin:0 4px}
.mp-abwrap.nope,.mp-tensbox.nope,.mp-purse.nope,.mp-clockwrap.nope,.mp-partwrap.nope,.mp-group.nope,.mp-pan.nope,.mp-bar.nope,.mp-cell.nope{animation:nope .45s}
.mp-pan.yes{outline:5px solid #2fbf71;outline-offset:3px}
/* abacus */
.mp-abwrap{display:grid;place-items:center;padding:6px}
.mp-abacus{width:auto;height:min(30vh,230px);max-width:100%;overflow:visible}
.mt-wrap .mp-abacus{height:min(40vh,280px)}
.mp-rodbtns{display:flex;justify-content:center;gap:clamp(18px,6vw,60px);flex-direction:row-reverse}
.mp-rodbtns.two{flex-direction:row}
.mp-rodbtns.ab{gap:12px;flex-direction:row}.mp-rodbtns.ab button{width:48px;height:48px}
.mp-rodbtns>div{display:flex;gap:6px;align-items:center}
.mp-rodbtns span{font:800 16px var(--f-body)}
.mp-rodbtns button{width:52px;height:52px;border:4px solid var(--ink);border-radius:14px;background:linear-gradient(180deg,#fff,#f3ead8);box-shadow:0 4px 0 var(--ink);font:800 26px var(--f-num);cursor:pointer;touch-action:manipulation}
.mp-rodbtns button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.mp-tensbox{display:grid;place-items:center;min-height:150px}
.mp-tensbox .pop{animation:none}
/* money */
.mp-purse{min-height:110px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:12px;border:4px dashed #c99a5a;border-radius:22px;background:linear-gradient(180deg,#fff6e3,#ffe9c2);position:relative}
.mp-purse.show{border-style:solid}
.mp-ph{font:700 17px var(--f-body);color:#b08a5a}
.mp-note{width:clamp(120px,16vw,160px);height:auto;filter:drop-shadow(0 4px 0 rgba(43,29,20,.35));animation:popIn .35s cubic-bezier(.3,1.7,.5,1) both}
.mp-note.sm{width:96px}
.mp-coin{width:calc(var(--d) * 2);height:auto;filter:drop-shadow(0 3px 0 rgba(43,29,20,.35));animation:popIn .35s cubic-bezier(.3,1.7,.5,1) both}
.mp-coin.sm{width:calc(var(--d) * 1.6)}
.mp-bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;padding:10px;background:#f4fbff;border-radius:18px;border:3px solid #9cc8f0}
.mp-money,.mp-in{border:0;background:none;padding:2px;cursor:pointer;border-radius:12px;transition:transform .15s;touch-action:manipulation;min-height:44px}
.mp-money:hover{transform:translateY(-4px) rotate(-3deg)}
.mp-purse:not(.show) .mp-in svg{animation:none}.mp-purse:not(.show) .mp-in:last-child svg{animation:popIn .35s cubic-bezier(.3,1.7,.5,1) both}
.mp-in:hover{transform:scale(.94);opacity:.8}
/* clock */
.mp-clockwrap{display:grid;place-items:center}
.mp-clock{width:min(100%,260px);height:auto;touch-action:none;filter:drop-shadow(0 6px 0 rgba(43,29,20,.3))}
.mp-clockwrap.sm .mp-clock{width:170px}
.mp-clock .hh,.mp-clock .mh{transform-origin:110px 110px;transform-box:view-box;transition:transform .12s;cursor:grab}
.mp-clock .grab-h,.mp-clock .grab-m{cursor:grab}
/* fraction */
.mp-partwrap{display:grid;place-items:center}
.mp-parts{width:min(100%,240px);height:auto}
.mp-partwrap.sm .mp-parts{width:160px}
.mp-parts .part{fill:#fff;stroke:var(--ink);stroke-width:4;stroke-linejoin:round;transition:fill .2s}
.mp-parts .part.on{fill:#ff9b6a}
.mp-parts.live .part{cursor:pointer}
.mp-parts.live .part:hover{fill:#ffe3c8}.mp-parts.live .part.on:hover{fill:#ff8a50}
/* scale */
.mp-scale{position:relative;isolation:isolate;height:230px;width:min(100%,460px);margin:10px auto 0}
.mp-beam{position:absolute;left:5%;right:5%;top:70px;height:12px;background:#c98a4b;border:4px solid var(--ink);border-radius:8px;transition:transform .9s cubic-bezier(.3,1.5,.5,1);transform-origin:50% 50%}
.mp-scale.go .mp-beam{transform:rotate(var(--tilt))}
.mp-pan{position:absolute;top:26px;transform-origin:50% -26px;width:130px;min-height:96px;transform:translateX(-50%);border:4px solid var(--ink);border-radius:0 0 60px 60px;background:linear-gradient(180deg,#fff,#ffe9c2);box-shadow:0 5px 0 var(--ink);display:grid;justify-items:center;align-content:end;padding:6px;cursor:pointer;font:800 17px var(--f-body)}
.mp-scale.go .mp-pan{transform:translateX(-50%) rotate(calc(var(--tilt) * -1))}
.mp-scale::before{content:'';position:absolute;left:50%;top:62px;width:26px;height:26px;transform:translateX(-50%);background:#ffb020;border:4px solid var(--ink);border-radius:50%;z-index:2}
.mp-pan.l{left:12%}.mp-pan.r{left:88%}
.mp-pan::before{content:'';position:absolute;left:50%;bottom:100%;width:4px;height:26px;margin-left:-2px;background:var(--ink)}
.mp-pan .mp-ic svg,.mp-pan img{width:56px;height:56px;object-fit:contain}
.mp-ic{display:inline-grid;place-items:center;font-size:40px;line-height:1}
.mp-ic svg{width:48px;height:48px}
.mp-stand{position:absolute;left:50%;top:76px;bottom:18px;width:16px;transform:translateX(-50%);background:#8a5428;border:4px solid var(--ink);border-radius:6px;z-index:-1}
.mp-stand::after{content:'';position:absolute;left:50%;bottom:-4px;width:120px;height:18px;transform:translateX(-50%);background:#c98a4b;border:4px solid var(--ink);border-radius:10px}
/* length */
.mp-bars{display:grid;gap:12px;padding:8px 0}
.mp-bar{position:relative;border:0;background:none;padding:0;height:48px;cursor:pointer;text-align:left;--lab:78px}
.mp-bar i{position:absolute;top:8px;height:30px;left:calc(var(--lab) + var(--off));width:calc((100% - var(--lab) - 22%) * var(--len) / var(--max));background:var(--c);border:4px solid var(--ink);border-radius:10px;box-shadow:0 4px 0 var(--ink);transition:left .7s cubic-bezier(.3,1.4,.5,1)}
.mp-bar b{position:absolute;left:0;top:12px;width:calc(var(--lab) - 8px);text-align:right;font:800 17px var(--f-body)}
.mp-bars.aligned .mp-bar i{left:var(--lab)}
.mp-bars{position:relative}
.mp-bars.aligned::before{content:'';position:absolute;left:76px;top:0;bottom:0;width:4px;border-radius:2px;background:#e2483f}
.mp-bar.yes{outline:none}.mp-bar.yes i{background:#2fbf71}
.mp-ruler{display:grid;gap:4px;padding:10px;overflow-x:auto}
.mp-obj{width:calc(var(--n) * 44px);height:40px;background:linear-gradient(180deg,#ffd34a,#ffb020);border:4px solid var(--ink);border-radius:10px;display:grid;place-items:center;font:800 16px var(--f-body)}
.mp-units{display:flex;min-height:44px}
.mp-units i{flex:none;width:44px;height:40px;border:3px solid var(--ink);background:#bfe3ff;display:grid;place-items:center;font:800 15px var(--f-num);font-style:normal;border-radius:6px}
/* sortset */
.mp-pool{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:60px}
.mp-item{border:4px solid var(--ink);border-radius:16px;background:#fff;box-shadow:0 4px 0 var(--ink);padding:4px 10px;cursor:pointer;display:grid;justify-items:center;font:800 15px var(--f-body);min-width:56px;min-height:56px;transition:transform .15s}
.mp-item.sel{transform:translateY(-6px) scale(1.08);border-color:var(--coral);box-shadow:0 8px 0 var(--coral)}
.mp-item.in{cursor:default;transform:scale(.85);box-shadow:none;animation:popIn .35s both}
.mp-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.mp-group{position:relative;border:4px dashed #9cc8f0;border-radius:20px;background:#f4fbff;padding:8px;min-height:120px;cursor:pointer}
.mp-group:nth-child(2){border-color:#f0b0c8;background:#fff4f8}.mp-group:nth-child(3){border-color:#a8e0b8;background:#f2fff6}.mp-group:nth-child(4){border-color:#f0d08a;background:#fffaee}
.mp-group h4{margin:0 0 6px;font:800 17px var(--f-body);text-align:center}
.mp-gin{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.mp-tally{position:absolute;right:8px;top:6px;font:800 22px var(--f-num);color:#7650d0}
.mp-group.done{border-style:solid}
.mp-table{border-collapse:collapse;font:800 18px var(--f-body)}
.mp-table th,.mp-table td{border:3px solid var(--ink);padding:4px 12px}
.mp-table td:nth-child(2){font-family:var(--f-num);letter-spacing:2px}
/* geometry */
.mp-geomwrap{display:grid;place-items:center;perspective:600px}
.mp-geom{width:min(100%,280px);height:auto;overflow:visible}
.mp-geomwrap.sm .mp-geom{width:180px}
.mp-geomwrap.spin .mp-geom{animation:mpSpin 3.5s ease-in-out infinite}
@keyframes mpSpin{0%,100%{transform:rotateY(-18deg)}50%{transform:rotateY(18deg)}}
.mp-geom .vx{fill:rgba(255,255,255,.01);stroke:#7650d0;stroke-width:3;stroke-dasharray:4 4;cursor:pointer}
.mp-geom .vx.on{fill:#ffd34a;stroke:var(--ink);stroke-dasharray:none;animation:bkPop .35s;transform-box:fill-box;transform-origin:center}
/* compose */
.mp-board{display:grid;place-items:center;background:#f4fbff;border:3px solid #9cc8f0;border-radius:18px}
.mp-board svg{width:min(100%,300px);height:auto}
.mp-board.sm svg{width:200px}
.mp-board .ghost{stroke-dasharray:8 6;opacity:.9}
.mp-board .ghost *{stroke:#7a8aa0;stroke-dasharray:8 6;fill:rgba(255,255,255,.6)}
.mp-board .slot{cursor:pointer}
.mp-board .slot:hover .ghost *{fill:#fff3c4}
.mp-pieces{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.mp-piece{border:4px solid var(--ink);border-radius:16px;background:#fff;box-shadow:0 4px 0 var(--ink);padding:6px 8px;cursor:pointer;display:grid;justify-items:center;gap:2px;min-width:64px;transition:transform .15s}
.mp-piece small{font:700 13px var(--f-body)}
.mp-piece.sel{transform:translateY(-6px) scale(1.08);border-color:var(--coral);box-shadow:0 8px 0 var(--coral)}
.mp-piece.used{opacity:.25;cursor:default;transform:scale(.9)}
/* cycle */
.mp-cycle{position:relative;width:min(100%,330px);aspect-ratio:1;margin:6px auto;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,#fff6e0 31% 100%);border:4px solid var(--ink)}
.mp-cell{position:absolute;transform:translate(-50%,-50%);border:3px solid var(--ink);border-radius:999px;background:#fff;box-shadow:0 3px 0 var(--ink);padding:4px 8px;font:800 14px var(--f-body);cursor:pointer;white-space:nowrap;min-height:40px;transition:transform .15s,background .15s}
.mp-cell.from{background:#ffd34a}
.mp-cell.hop{background:#c9f0d9;transform:translate(-50%,-50%) scale(1.25)}
.mp-cell.yes{background:#2fbf71;color:#fff;outline:none}
.mp-cell.nope{background:#ffe1e1}
.mp-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 15px var(--f-body);color:#7650d0;text-align:center;width:90px}
@media (max-width:520px){.mp-cycle{width:300px}.mp-cell{font-size:12px;padding:3px 6px}.mp-pan{width:110px}}
.mp-item img,.mp-pan img{max-height:64px;max-width:90px;object-fit:contain}
.mt-wrap>.mp-purse .mp-note{width:clamp(170px,22vw,250px)}.mt-wrap>.mp-purse .mp-coin{width:calc(var(--d) * 2.4)}
.mp-note.pic{height:auto;aspect-ratio:171/92;object-fit:contain;border-radius:6px;box-shadow:0 0 0 2px var(--ink),0 4px 0 rgba(43,29,20,.35);filter:none;background:#fff}
.mp-coin.pic{border-radius:50%;filter:drop-shadow(0 3px 0 rgba(43,29,20,.35))}
/* 3D solids */
.mp-3d{width:min(100%,300px);aspect-ratio:260/240;margin:0 auto;touch-action:none;cursor:grab}
.mp-3d:active{cursor:grabbing}
.mp-geomwrap.sm .mp-3d{width:200px}
.s3d{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 8px 0 rgba(43,29,20,.18))}
.s3d .face{stroke:#2b1d14;stroke-width:0;stroke-linejoin:round}
.s3d .vis{stroke:#2b1d14;stroke-width:3.5;stroke-linecap:round}
.s3d .hid{stroke:#2b1d14;stroke-width:2;stroke-dasharray:6 6;opacity:.45}
.s3d .hidrim{fill:none;stroke:#2b1d14;stroke-width:2;stroke-dasharray:6 6;opacity:.4}
.s3d .rim,.s3d polygon.face[class*="rim"]{stroke-width:3.5}
.s3d polygon.face{stroke-width:0}
.s3d .outl{fill:none;stroke:#2b1d14;stroke-width:4.5;stroke-linejoin:round}
.s3d .hl.vis,.s3d .hl.hid{stroke:#ff5a4a;opacity:1}
.s3d .fl{stroke:#ffb020!important;stroke-width:7!important;opacity:1!important;stroke-dasharray:none!important}
.s3d .vx{fill:rgba(255,255,255,.85);stroke:#7650d0;stroke-width:3;stroke-dasharray:4 3}
.s3d .vx.back{opacity:.55}
.s3d .vx.on{fill:#ffd34a;stroke:#2b1d14;stroke-dasharray:none}
.s3d .vn{font:800 12px "Baloo 2",sans-serif;text-anchor:middle;fill:#2b1d14;pointer-events:none}
.mp-3dbtns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mp-3dbtns button{border:3px solid var(--ink);border-radius:999px;background:#fff;box-shadow:0 4px 0 var(--ink);padding:6px 14px;font:800 17px var(--f-body);cursor:pointer;min-height:44px}
.mp-3dbtns button.done{background:#dcf8e8;border-color:#1f8f55}
.mp-3dcount{margin:0;text-align:center;font:800 20px var(--f-body);min-height:30px;color:#7650d0}
.mp-3dhint{margin:0;text-align:center;font:700 13px var(--f-body);color:#8a6a3a}
.s3d polygon.face.cap{stroke:#2b1d14;stroke-width:3.5}
.s3d polygon.face.rim{stroke:#ff5a4a;stroke-width:5}
.s3d polygon.face.hl{stroke:#2b1d14;stroke-width:2}
.mp-3d.mini{width:110px;cursor:inherit;pointer-events:none}.bk-node .mp-3d.mini{width:96px}.mt-pickopt .mp-3d.mini{width:110px}
/* 学一学 pictures */
.mp-vis{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:flex-end;background:#fff;border:4px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 var(--ink);padding:12px}
.mp-visc{margin:0;display:grid;justify-items:center;gap:4px}
.mp-visc.wide{flex-basis:100%}
.mp-visc figcaption{font:800 15px var(--f-body);background:#fff3c4;border:2px solid var(--ink);border-radius:999px;padding:0 10px}
.mp-visc .mp-abacus{height:150px;width:auto}
.mp-visc .mt-blocks{min-height:80px}
.mp-vbond{display:grid;grid-template-columns:54px 54px;grid-template-rows:54px 22px 54px;gap:0 18px;justify-items:center}
.mp-vbond b{display:grid;place-items:center;width:54px;height:54px;border:4px solid var(--ink);border-radius:50%;background:#bfe3ff;font:800 24px var(--f-num)}
.mp-vbond b.w{grid-column:1/3;background:#ffe08a}.mp-vbond i{grid-column:1/3}
.mp-vline{display:flex;gap:2px;border-top:4px solid var(--ink);padding-top:4px;flex-wrap:wrap;justify-content:center}
.mp-vline span{min-width:26px;text-align:center;font:800 15px var(--f-num);border-left:2px solid var(--ink)}
.mp-vline span.on{background:#ffd34a;border-radius:8px}
.mp-vcmp{display:flex;gap:10px;align-items:center;font:800 36px var(--f-num)}.mp-vcmp i{font-style:normal;color:var(--coral)}
.mp-vbig{font:800 46px var(--f-num);color:#7650d0;letter-spacing:2px}
.mp-solrow{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center;background:#fff;border:4px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 var(--ink);padding:8px}
.mp-solrow .mp-3d.mini{width:clamp(64px,8.5vw,96px)}
.mp-qbox{display:grid;place-items:center;width:clamp(56px,7vw,80px);aspect-ratio:1;border:4px dashed #c9b48a;border-radius:14px;font:800 34px var(--f-num);color:#b08a5a;background:#fffdf3}
.mt-wrap.rowpic{grid-template-columns:1fr}
.s3d .pulse{stroke:#ff5a4a;stroke-width:8;stroke-linecap:round;animation:s3dPulse 1s ease-in-out infinite}
.s3d .pulsev{fill:#ff5a4a;stroke:#fff;stroke-width:3;animation:s3dPulse 1s ease-in-out infinite}
@keyframes s3dPulse{50%{opacity:.35}}
.s3d polygon[data-hot]{animation:s3dHot 1s ease-in-out infinite}
@keyframes s3dHot{50%{fill:#fff8c8}}
.mp-purse.show .mp-note.pic{width:clamp(150px,20vw,220px)}
/* real money: notes keep their real size ratio */
.mp-note.pic{width:calc(clamp(130px,17vw,175px) * var(--nw,1));aspect-ratio:auto;object-fit:contain}
.mp-note.pic.sm{width:calc(100px * var(--nw,1))}
.mp-purse.show .mp-note.pic{width:calc(clamp(160px,21vw,230px) * var(--nw,1))}
.mt-wrap>.mp-purse .mp-note{width:calc(clamp(170px,22vw,250px) * var(--nw,1))}
.mp-side{margin:0;display:grid;justify-items:center;gap:2px}
.mp-side figcaption{font:800 13px var(--f-body);color:#7a6a58}
.mp-bank .mp-coin.pic.sm{width:calc(var(--d) * 2.1)}
.mp-visc .mp-purse{max-width:min(100%,560px)}
.mp-vis{max-width:100%}
/* labels on the picture that match the blanks / options */
.mt-mark{position:absolute;transform:translate(-50%,-50%);min-width:30px;height:30px;padding:0 6px;display:grid;place-items:center;border:3px solid var(--ink);border-radius:999px;background:#ffd34a;font:800 16px var(--f-num);color:var(--ink);box-shadow:0 3px 0 var(--ink);pointer-events:none;z-index:2;transition:transform .2s,background .2s;white-space:nowrap}
.mt-mark.on{background:#ff7b54;color:#fff;transform:translate(-50%,-50%) scale(1.3);animation:markPulse 1.1s ease-in-out infinite}
@keyframes markPulse{50%{box-shadow:0 3px 0 var(--ink),0 0 0 8px rgba(255,123,84,.3)}}
.mt-blab{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 5px;border:3px solid var(--ink);border-radius:999px;background:#ffd34a;font:800 15px var(--f-num);font-style:normal;color:var(--ink);vertical-align:middle;margin-right:2px}
.mt-blab.on{background:#ff7b54;color:#fff}
.mt-pickopt .mt-blab{position:absolute;top:-12px;left:-10px}
.mt-wrap:has(>.mt-pic.wide){grid-template-columns:1fr}
.mt-pic.wide{max-width:min(100%,900px);max-height:none}
/* Each option group explicitly names the blank it fills. */
.mt-box.numbered{gap:6px;display:inline-flex;align-items:center;padding:3px 9px;cursor:pointer;min-height:48px}
.mt-blank-number{display:inline-grid;place-items:center;border:2px solid var(--ink);border-radius:50%;width:26px;height:26px;flex:none;background:#ffe08b;color:var(--ink);font:800 16px var(--f-num)}
.mt-answer-groups{margin:14px 0;max-width:100%}.mt-choice-status{margin:0 0 10px;font-size:16px;font-weight:700}
.mt-answer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.mt-answer-group{border:3px solid #cbbd9f;border-radius:18px;padding:10px 12px;background:#fffaf0;transition:border-color .15s,background .15s}
.mt-answer-group h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:700 17px var(--f-body)}
.mt-answer-group .mt-opts{margin:0;justify-content:flex-start}.mt-answer-group .mt-opt{min-height:44px;font-size:clamp(18px,2vw,24px)}
.mt-answer-group.active{border-color:#e98a37;background:#fff0c8;box-shadow:0 0 0 2px #ffdc7f}
.mt-answer-group.complete{border-color:#79b99b;background:#f0faf1}.mt-answer-group .chosen{background:#d3f3d9;border-color:#218858;opacity:1}.mt-answer-group button:disabled:not(.chosen){opacity:.45}

/* Keep the picture, sentence and matching choice groups close together. */
.mt-wrap.has-choices .mt-line{display:block;font-size:clamp(22px,2.2vw,28px);line-height:2.15}
.mt-wrap.has-choices .mt-box{height:48px;min-width:66px;margin:2px 3px;font-size:24px;white-space:nowrap}
.mt-wrap.has-choices .mt-pic.wide{max-height:min(23vh,210px);max-width:calc(min(23vh,210px) * var(--ar))}
.mt-wrap.has-choices .mt-card{padding:10px 14px}
.money-operation{min-width:0;padding:14px;border:3px solid #c79751;border-radius:22px;background:#fff7e3;color:var(--ink)}
.money-caption{margin:0 0 10px;font:700 17px/1.5 var(--f-body);text-align:center}
.money-caption:last-child{margin:10px 0 0;font-size:14px}
.money-groups{display:flex;align-items:stretch;gap:8px;justify-content:center}
.money-groups>section{flex:1;min-width:0;border:2px solid #8cbba4;border-radius:15px;background:#f1fff5;padding:10px 6px;text-align:center}
.money-groups>section>b{display:block;font:700 15px/1.5 var(--f-body);margin-bottom:8px}
.money-groups>section>div,.money-exchange>span{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.money-groups .money-taken{border:2px dashed #b87952;background:#fff1e8}
.money-piece{display:inline-flex;position:relative;flex-direction:column;align-items:center;gap:3px;max-width:100%}
.money-piece>small{font:700 13px/1.4 var(--f-num);color:#49321c}
.money-piece .mp-note.pic{width:100px;max-width:100%;height:auto;object-fit:contain}.money-piece .mp-coin.pic{width:48px;height:48px;object-fit:contain}
.money-taken .money-piece:after{content:'';position:absolute;inset:23px -2px auto;border-top:3px solid #ae552b;transform:rotate(-25deg)}
.money-symbol{align-self:center;font:800 26px var(--f-num)}
.money-exchange{border-bottom:2px dashed #d4ba85;margin:0 0 12px;padding:6px 0 12px;text-align:center}.money-exchange>b{display:block;font:700 14px/1.5 var(--f-body);margin-top:6px}
.money-reveal .money-taken .money-piece{animation:moneyTaken 1.4s ease both}.money-reveal .money-groups>section:first-child{animation:moneyKept 1.4s ease both}
@keyframes moneyTaken{to{opacity:.4;transform:translateY(8px)}}
@keyframes moneyKept{50%{background:#b5efc9}}
@media(prefers-reduced-motion:reduce){.money-reveal *{animation:none!important}}

/* SMART 888: part-whole bar only when the story is addition / take-away (not comparison). */
.mt-wordbar{margin:10px 0 4px;padding:8px 10px 6px;border:3px solid var(--ink);border-radius:14px;background:#fffdf6;box-shadow:0 3px 0 var(--ink)}
.mt-wb-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font:800 14px/1.2 var(--f-body);color:#5c4326}
.mt-wb-top small{font:700 12px var(--f-body);color:#8b6a45}
.mt-wb-bar{display:flex;height:34px;margin-top:5px;border:3px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff}
.mt-wb-part{display:flex;align-items:center;justify-content:center;min-width:28px;font:800 18px/1 "Baloo 2",sans-serif;color:#2b1d14;animation:wbIn .5s cubic-bezier(.2,1.3,.4,1) both}
.mt-wb-part.wb-a{background:#bfe3ff;border-right:2px solid var(--ink)}
.mt-wb-part.wb-b{background:#b9efc8}
.mt-wb-foot{display:flex;justify-content:space-between;font:700 11px var(--f-body);color:#7a6a58;margin-top:3px}
@keyframes wbIn{from{transform:scaleX(.2);opacity:.3}to{transform:scaleX(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.mt-wb-part{animation:none}}
@media(max-width:760px){.mt-wordbar{padding:6px 8px 4px}.mt-wb-bar{height:28px}.mt-wb-part{font-size:15px}}

/* SMART 888: text → options → picture, so the answer tray is visible on long questions. */
.mt-choice-col{display:flex;flex-direction:column;gap:12px}
.mt-choice-col>.mt-card{width:100%}
.mt-choice-col>.mt-answer-groups{margin:0}
.mt-choice-col>.mt-choice-pic{max-width:min(100%,560px);margin:0 auto}
@media(max-width:760px){.mt-choice-col{gap:9px}.mt-choice-col>.mt-choice-pic{max-width:100%}}