:root {
  --navy:#132a4f;
  --navy-2:#1d3c6a;
  --cream:#fffaf0;
  --paper:#ffffff;
  --yellow:#ffd25a;
  --orange:#f59e42;
  --coral:#f47b63;
  --green:#47ad78;
  --blue:#53a7dc;
  --ink:#19304f;
  --muted:#64748b;
  --line:#dbe4ef;
  --shadow:0 10px 30px rgba(19,42,79,.10);
}
.decimal-process,.integerize-model,.division-transform{width:min(100%,560px);margin:auto;border-radius:20px;background:#eef5fb;padding:20px;text-align:center}
.process-expression,.integerize-calc,.integerize-result{font-size:clamp(1.3rem,5vw,2rem);font-weight:1000}
.decimal-process ol{max-width:420px;margin:18px auto 0;text-align:left;line-height:1.7;font-weight:800}
.decimal-repeat-model,.decimal-share-model,.decimal-product-area,.decimal-division-line{width:min(100%,560px);margin:auto}
.decimal-repeat-model svg,.decimal-share-model svg,.decimal-product-area svg,.decimal-division-line svg{display:block;width:100%;height:auto;overflow:visible}
.decimal-repeat-model svg text,.decimal-share-model svg text,.decimal-product-area svg text,.decimal-division-line svg text{font-family:inherit;fill:var(--ink);font-size:15px;font-weight:900}
.integerize-row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:9px 0;font-size:1.35rem;font-weight:900}
.integerize-row b{color:#d35442;font-size:1rem}
.integerize-calc{margin:18px 0 8px}.integerize-model p{font-weight:800}.integerize-result{margin-top:14px;color:#226f9f}
.division-transform>div{display:grid;grid-template-columns:1fr;gap:12px;font-size:clamp(1.25rem,5vw,1.8rem);font-weight:1000}
.division-transform b{color:#d35442;font-size:1rem}.division-transform p{line-height:1.55;font-weight:800}
@media(max-width:560px){.decimal-process,.integerize-model,.division-transform{padding:15px}.decimal-product-area svg text{font-size:13px}.integerize-row{font-size:1.1rem;gap:7px}}
.area-model{width:min(100%,440px);margin:auto;text-align:center}
.area-model svg{display:block;width:100%;height:auto;overflow:visible}
.area-model svg text{font-family:inherit;font-size:13px;font-weight:800;fill:var(--ink)}
.area-model p{font-size:1rem;line-height:1.7;margin:4px 0 0;font-weight:800}
.comparison-slot{display:inline-flex;align-items:center;justify-content:center;min-width:1.55em;min-height:1.55em;margin:0 .12em;border:3px solid var(--navy);border-radius:.2em;background:#fff;vertical-align:middle;line-height:1}
.grouped-area strong{color:#9b3e26}
.quarter-selected{animation:select-quarter .65s .7s both}
@keyframes select-quarter{from{opacity:0}to{opacity:1}}
.reduction-model{width:min(100%,560px);text-align:center}
.reduction-model svg{display:block;width:100%;height:auto}
.reduction-model svg text{font-family:inherit;fill:var(--ink);font-size:17px;font-weight:800}
.reduction-model p{font-size:1rem;line-height:1.6;font-weight:800;margin:8px 0}
.reduction-model .area-equation{font-size:clamp(1.15rem,4.5vw,1.8rem)}
.area-model .area-cut{stroke:#73869d;stroke-width:1.5}
.area-model .area-equation{font-size:1.5rem;margin-top:12px}
.area-model .area-reference{color:#226a98}
.area-model svg text{font-size:16px}
.area-grow{animation:area-extend .6s ease-out both;animation-delay:var(--area-delay)}
@keyframes area-extend{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.area-grow{animation:none}}
*{box-sizing:border-box}
html{font-size:16px;background:var(--cream)}
body{margin:0;min-height:100vh;color:var(--ink);background:linear-gradient(180deg,#eef7ff 0,#fffaf0 34rem);font-family:"Nunito","Avenir Next",system-ui,-apple-system,sans-serif}
button{font:inherit;color:inherit;touch-action:manipulation}
button:focus-visible{outline:4px solid rgba(83,167,220,.35);outline-offset:3px}
.topbar{height:72px;position:sticky;top:0;z-index:20;display:grid;grid-template-columns:48px 124px 1fr auto;gap:14px;align-items:center;padding:8px max(16px,env(safe-area-inset-left));background:var(--navy);color:white;box-shadow:0 4px 18px rgba(10,26,50,.22)}
.logo{width:118px;height:50px;object-fit:contain;background:#fff;border-radius:12px;padding:5px}
.icon-btn,.map-btn{border:0;border-radius:12px;cursor:pointer;background:#284b7b;color:#fff;font-weight:900}
.icon-btn{width:44px;height:44px;font-size:1.5rem}
.map-btn{padding:12px 16px}
.course-name{display:flex;min-width:0;flex-direction:column;line-height:1.15}
.course-name b{font-size:.86rem;color:var(--yellow);letter-spacing:.08em}
.course-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800}
.app{max-width:1440px;margin:0 auto;padding:24px}
.map-page{max-width:1050px;margin:20px auto}
.map-head{text-align:center;margin-bottom:28px}
.map-head .eyebrow{display:inline-block;background:var(--navy);color:var(--yellow);font-weight:900;letter-spacing:.1em;border-radius:99px;padding:7px 14px}
.map-head h1{font-size:clamp(2rem,6vw,3.7rem);margin:12px 0 6px;line-height:1}
.map-head p{font-size:1.05rem;color:var(--muted);margin:0}
.stage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.stage-card{border:2px solid var(--line);background:rgba(255,255,255,.94);border-radius:24px;padding:22px;box-shadow:var(--shadow);display:grid;grid-template-columns:76px 1fr;gap:16px;position:relative;overflow:hidden}
.stage-card::after{content:"";position:absolute;right:-28px;bottom:-34px;width:120px;height:120px;border-radius:50%;background:var(--stage-soft)}
.stage-number{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;background:var(--stage-color);color:white;font-size:2rem;font-weight:1000;position:relative;z-index:1}
.stage-copy{position:relative;z-index:1;min-width:0}
.stage-copy small{font-weight:900;color:var(--stage-color);letter-spacing:.06em}
.stage-copy h2{margin:3px 0 6px;font-size:1.35rem}
.stage-copy p{margin:0 0 15px;color:var(--muted);line-height:1.5}
.stage-actions{display:flex;gap:10px;flex-wrap:wrap}
.stage-actions button{border:0;border-radius:13px;padding:11px 15px;font-weight:900;cursor:pointer}
.start-stage{background:var(--stage-color);color:white}
.challenge-stage{background:#edf2f7}
.stage-progress{display:grid;gap:6px;margin:10px 0 12px}
.stage-status{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2px 12px;padding:7px 10px;border-radius:9px;font-size:.85rem;line-height:1.4}
.stage-status b{color:var(--ink)}
.stage-status span{font-weight:800;white-space:nowrap}
.stage-status.is-complete{background:#eaf8f0;color:#23754c}
.stage-status.is-pending{background:#f1f4f8;color:#586779}
.stage-skip-status{font-size:.8rem;line-height:1.4;font-weight:800;color:#335b86}
.trial-info{max-width:680px;margin:20px auto 0;padding:14px 18px;display:flex;align-items:center;justify-content:center;gap:12px;border:2px solid #f0c24f;border-radius:16px;background:#fff8dc;color:var(--ink);text-align:left}
.trial-info b{flex:none;padding:5px 9px;border-radius:9px;background:var(--yellow);color:var(--navy);font-size:.82rem;letter-spacing:.06em}
.trial-info span{font-size:.95rem;font-weight:700}
.trial-badge{display:inline-flex;margin:0 0 8px;padding:5px 9px;border-radius:99px;background:#fff3bd;color:#8a5b00;font-size:.78rem;font-weight:1000;letter-spacing:.06em}
.stage-card.locked{background:#f5f7fa;border-color:#dce3eb;box-shadow:none}
.stage-card.locked::after{background:#e8edf2}
.stage-card.locked .stage-number{background:#8191a2;font-size:1.45rem}
.stage-card.locked .stage-copy small,.stage-card.locked .stage-copy p{color:#7d8996}
.stage-card.locked .stage-copy h2{color:#526170}
.locked-stage{background:#e2e7ed!important;color:#657383!important;cursor:not-allowed!important}
.lesson-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px}
.rail{position:sticky;top:96px;align-self:start;background:var(--navy);color:white;border-radius:22px;padding:20px;min-height:540px;box-shadow:var(--shadow)}
.rail-title{display:flex;flex-direction:column}
.rail-title span{color:var(--yellow);font-weight:1000;letter-spacing:.08em}
.rail-title b{font-size:1.18rem;margin-top:3px}
.rail-progress{height:9px;border-radius:99px;background:#38577e;margin:18px 0;overflow:hidden}
.rail-progress i{display:block;height:100%;width:0;background:var(--yellow);transition:width .35s ease}
.step-dots{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.step-dots i{height:9px;border-radius:99px;background:#456389}
.step-dots i.done{background:var(--yellow)}
.rail-character{margin-top:30px;padding:14px;background:#fff;border-radius:18px;color:var(--ink)}
.rail-character img{width:96px;height:82px;object-fit:contain;display:block;margin:-26px auto 2px}
.rail-character p{font-size:.9rem;line-height:1.45;margin:0;text-align:center;font-weight:700}
.lesson-main{min-width:0}
.lesson-scroll{min-width:0}
.question-card{position:sticky;top:88px;z-index:10;border:2px solid #d9e5f1;border-left:8px solid var(--coral);border-radius:20px;background:rgba(255,255,255,.97);padding:18px 22px;box-shadow:0 8px 22px rgba(19,42,79,.08)}
.question-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.86rem;font-weight:900;letter-spacing:.06em}
.question-meta span{color:var(--coral)}
.question-card h1{font-size:clamp(1.35rem,3vw,2rem);line-height:1.25;margin:7px 0 3px}
.question-card p{font-size:1rem;margin:0;color:var(--muted);line-height:1.45}
.learn-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
.visual-card,.guides,.answer-panel,.feedback{background:var(--paper);border:2px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.visual-card{overflow:hidden}
.visual-head{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line);color:var(--muted)}
.visual-head button{border:0;background:#edf5fb;border-radius:10px;padding:7px 10px;font-weight:800;cursor:pointer}
.visual{min-height:330px;display:grid;place-items:center;padding:22px;overflow:hidden}
.visual.compact{min-height:0;padding:18px}
.guides{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.guide{display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:center;border-radius:16px;padding:10px;background:#f3f7fc;border:1px solid #e1eaf4}
.guide img{width:72px;height:76px;object-fit:contain}
.guide b{font-size:.88rem;color:#1785bd;font-weight:1000;letter-spacing:.04em}
.guide:first-child b{color:var(--coral)}
.guide p{font-size:1rem;line-height:1.5;margin:3px 0 0;color:#294565;font-weight:850}
.guide-key{color:#df4f48;font-weight:1000}
.answer-panel{margin-top:18px;padding:18px}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.choice{min-height:58px;border:2px solid #cfdbe8;background:white;border-radius:15px;padding:12px;font-weight:900;font-size:1.05rem;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.choice:hover{transform:translateY(-2px);border-color:var(--blue)}
.choice.selected{border-color:var(--navy);background:#eaf3ff}
.choice.correct{border-color:var(--green);background:#eaf9f0}
.choice.wrong{border-color:#e15d57;background:#fff0ef;animation:shake .25s}
.feedback{position:relative;margin-top:14px;padding:16px 72px 16px 18px;border-color:#a9dec1;background:#effaf4;min-height:74px}
.feedback b{display:block;color:#24744b;font-size:1.05rem}
.feedback p{margin:4px 0 0;line-height:1.5}
.feedback.error{border-color:#efaaa5;background:#fff2f1}.feedback.error b{color:#b83f39}
.flower{position:absolute;right:12px;top:4px;font-size:3.2rem;animation:pop .4s ease both}
.controls{display:flex;justify-content:space-between;gap:12px;padding:18px 0 6px}
.controls button{border:0;border-radius:15px;min-height:52px;padding:12px 22px;font-weight:1000;cursor:pointer}
.secondary{background:#e6edf5}
.primary{background:var(--navy);color:white;margin-left:auto}
.controls .primary{display:block;visibility:visible;opacity:1}
.controls .primary.next-locked{visibility:hidden;pointer-events:none}
.whole-scene{width:min(100%,620px);display:flex;justify-content:center;align-items:center;gap:35px;flex-wrap:wrap}
.pizza-wrap{text-align:center}
.pizza{width:220px;height:220px;display:block;filter:drop-shadow(0 12px 12px rgba(92,60,28,.16))}
.pizza .crust{fill:#eeb75a;stroke:#a96625;stroke-width:5}
.pizza .cheese{fill:#fff1bd;stroke:#a96625;stroke-width:3}
.pizza .sauce{fill:#f17b54}
.pizza .slice-line{fill:none;stroke:#8f5520;stroke-width:4;opacity:0;transition:opacity .35s}
.pizza.sliced .slice-line{opacity:1}
.pizza .selected-part{fill:#ffd25a;stroke:#8f5520;stroke-width:3}
.quantity-card{min-width:190px;background:#f7f9fc;border:2px dashed #aebed0;border-radius:18px;padding:16px;text-align:center}
.quantity-card span{display:block;color:var(--muted);font-size:.86rem;font-weight:800}
.quantity-card strong{display:block;font-size:2.4rem;color:var(--navy);margin-top:3px}
.fraction{display:inline-grid;grid-template-rows:1fr 3px 1fr;vertical-align:middle;text-align:center;line-height:1;padding:0 .15em;min-width:1.2em}
.fraction i{background:currentColor;border-radius:99px}
.fraction em{font-style:normal;padding:.08em .12em}
.bar-model{width:min(92%,560px)}
.bar-title{text-align:center;font-weight:900;margin-bottom:12px}
.fraction-bar{display:grid;grid-template-columns:repeat(var(--parts),1fr);height:100px;border:4px solid var(--navy);border-radius:12px;overflow:hidden;background:white}
.fraction-bar i{border-right:3px solid var(--navy);background:#fff}
.fraction-bar i:last-child{border-right:0}
.fraction-bar i.active{background:var(--yellow)}
.fraction-bar.unequal{grid-template-columns:1fr 2fr 1fr 3fr}
.fair-grid{display:grid;grid-template-columns:repeat(2,minmax(170px,260px));gap:20px;width:100%;justify-content:center}
.model-option{border:3px solid transparent;border-radius:18px;background:#f5f8fb;padding:15px}
.model-option b{display:block;text-align:center;margin-bottom:10px}
.model-option.reveal-correct{border-color:var(--green)}
.model-option.reveal-wrong{border-color:#e15d57}
.people{display:flex;justify-content:center;gap:12px;margin-top:12px;font-size:1.8rem}
.balance-message{font-size:1.12rem;font-weight:900;text-align:center;margin-top:16px;color:var(--green)}
.unit-fraction-row{width:min(100%,620px);display:grid;gap:14px}.unit-fraction-row .bar-title{display:none}.unit-fraction-row .fraction-bar{height:62px}
.labeled-model{display:grid;gap:8px;place-items:center;width:100%}.labeled-model>strong{font-size:1.25rem}.equivalent-bars{position:relative;width:min(100%,620px);display:grid;grid-template-columns:1fr;gap:12px;align-items:center}.equivalent-bars>.labeled-model>.bar-model{width:100%}.equivalent-bars>.labeled-model .bar-title{display:none}.equivalent-bars>.labeled-model .fraction-bar{height:62px}.equivalent-bars>b{text-align:center;font-size:1.6rem}.same-size-guide{position:absolute;left:50%;top:4px;bottom:52px;border-left:3px dashed var(--coral);z-index:2;pointer-events:none}
.number-line{position:relative;width:min(88%,650px);height:116px;margin:58px auto 0;border-top:6px solid var(--navy)}.number-tick{position:absolute;top:-13px;width:4px;height:25px;background:var(--navy);transform:translateX(-2px)}.number-tick span{position:absolute;top:28px;left:50%;transform:translateX(-50%);font-style:normal;font-weight:900;white-space:nowrap}.number-tick.marked{background:var(--coral);height:31px}.number-marker{position:absolute;top:-28px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 6px #ffe7e1}.number-marker>span{position:absolute;top:-40px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:1.15rem;color:var(--coral)}.number-marker.second{background:var(--blue);box-shadow:0 0 0 6px #e1f3ff}.number-marker.second>span{color:#2585bd;top:-62px}.multi-marker{margin-top:76px}
.operation-model{width:min(100%,760px)}.operation-model>.number-line{width:82%}.move-arrow{position:absolute;top:35px;height:18px;border-top:5px solid var(--coral);color:var(--coral)}.move-arrow::after{content:"";position:absolute;right:-2px;top:-10px;border-left:12px solid var(--coral);border-top:7px solid transparent;border-bottom:7px solid transparent}.move-arrow.backward::after{right:auto;left:-2px;border-left:0;border-right:12px solid var(--coral)}.move-arrow>span{position:absolute;top:8px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:1rem;font-style:normal;font-weight:1000}
.line-result{width:min(100%,720px);display:grid;place-items:center;gap:12px}.line-result>.number-line{width:82%}.line-result>strong{font-size:clamp(1.5rem,5vw,2.4rem)}
.fraction-meaning{width:min(100%,620px);display:grid;grid-template-columns:1fr 120px;gap:20px;align-items:center}.fraction-meaning .bar-model{width:100%}.meaning-fraction{font-size:3rem;display:grid;place-items:center;gap:8px}.meaning-fraction.top .fraction em:first-child,.meaning-fraction.bottom .fraction em:last-child{color:var(--coral);font-weight:1000}.meaning-fraction>span{font-size:1rem;color:var(--coral);font-weight:1000}
.calculation-card{font-size:clamp(1.8rem,6vw,3.3rem);font-weight:1000;background:#eef5fb;border-radius:20px;padding:28px;text-align:center}
.fraction-journey{width:100%;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center}.fraction-journey>div{min-width:0;display:grid;place-items:center;gap:8px;opacity:.35;animation:journey 4.8s infinite}.fraction-journey>div:nth-of-type(2){animation-delay:1.5s}.fraction-journey>div:nth-of-type(3){animation-delay:3s}.fraction-journey>div>.pizza{width:140px;height:140px}.fraction-journey .bar-model{width:100%}.fraction-journey .fraction-bar{height:64px}.fraction-journey .bar-title{display:none}.fraction-journey .number-line{width:100%;height:76px;margin-top:28px}.fraction-journey>span{font-size:2rem;font-weight:1000;color:var(--blue)}
.fraction-name{position:relative;font-size:5rem;font-weight:1000;padding:36px 150px}.fraction-name>span{position:absolute;font-size:1rem;background:#eef5fb;border-radius:12px;padding:9px 12px;white-space:nowrap}.fraction-name .top-name{right:0;top:30px}.fraction-name .bottom-name{right:0;bottom:30px}.term-card{display:grid;gap:6px;text-align:center;background:#eef7ff;border:3px solid var(--blue);border-radius:20px;padding:24px}.term-card b{font-size:1.8rem;color:var(--blue)}
.paintable button{border:0;border-right:3px solid var(--navy);background:#fff;cursor:pointer}.paintable button:last-child{border-right:0}.paintable button.active{background:var(--yellow)}.check-answer{display:block;margin:0 auto;border:0;border-radius:14px;background:var(--navy);color:#fff;padding:13px 24px;font-weight:1000;cursor:pointer}.fraction-entry{display:grid;grid-template-rows:auto 4px auto;gap:8px;width:min(100%,250px);margin:0 auto 16px}.fraction-entry>i{background:var(--navy);border-radius:99px}.fraction-entry label{display:grid;grid-template-columns:1fr 82px;align-items:center;gap:12px;font-weight:900}.fraction-entry label span{text-align:right}.fraction-entry input{width:82px;border:3px solid #bfd0e2;border-radius:12px;padding:8px;text-align:center;font-size:1.4rem;font-weight:1000;color:var(--navy)}
.stack-lines,.compare-bars{width:min(100%,650px);display:grid;gap:8px}.stack-lines .number-line{margin-top:56px;height:90px}.compare-bars .bar-model{width:100%}.compare-bars .bar-title{display:none}.compare-bars .fraction-bar{height:72px}.fraction-operation,.rule-visual,.equation-pair{font-size:clamp(1.5rem,5vw,2.5rem);font-weight:1000;text-align:center;background:#eef5fb;border-radius:18px;padding:22px;line-height:1.7}.fraction-operation{display:flex;align-items:center;gap:22px}.fraction-operation>b{font-size:1rem;line-height:1.4;color:var(--coral)}
.visual-card[hidden]{display:none}
.factor-entry{margin:0 auto 16px;text-align:center}
.factor-entry>p{margin:0 0 12px;font-weight:800}
.factor-equation{display:grid;justify-items:center;gap:14px;font-size:clamp(1.5rem,6vw,2.2rem);font-weight:1000}
.factor-target{display:flex;align-items:center;gap:12px}
.factor-fraction .factor-row{display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.factor-entry input{width:56px;height:52px;border:3px solid #bfd0e2;border-radius:10px;padding:4px;text-align:center;font:inherit;color:var(--navy);background:#fff}
.factor-entry input:focus{border-color:#2585bd;outline:3px solid #d8efff}
.factor-entry input:disabled{opacity:1;background:#edf9f2}
.feedback.guidance{background:#eef7ff;border-color:#53a7dc;color:var(--ink)}
.line-row{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:12px}.line-row>span{text-align:center;font-weight:1000;font-size:1.2rem}.line-row .number-line{width:88%;margin-left:auto;margin-right:auto}.double-bar{width:min(100%,620px);display:grid;gap:14px}.double-bar .bar-model{width:100%}.double-bar .fraction-bar{height:72px}.double-bar .bar-title{margin-bottom:6px;color:var(--muted)}
.challenge-story{width:min(100%,650px);display:grid;gap:16px}.pizza-pair{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}.pizza-pair .pizza{width:180px;height:180px}.share-row{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.share-row span{background:#eef5fb;border:2px solid #cbdbea;border-radius:14px;padding:10px 16px;font-weight:900}
.explanation-page{max-width:820px;margin:18px auto;background:#fff;border:2px solid var(--line);border-radius:26px;padding:24px;box-shadow:var(--shadow)}.explanation-page>.eyebrow{display:inline-block;color:#fff;background:var(--coral);border-radius:99px;padding:7px 13px;font-weight:1000;letter-spacing:.06em}.explanation-page>h1{margin:10px 0 18px}.explanation-visual{display:grid;place-items:center;background:#f7f9fc;border-radius:20px;padding:18px;overflow:hidden}.explanation-copy{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:12px;margin:14px 0;background:#eef7ff;border-radius:18px;padding:12px}.explanation-copy img{width:96px;height:86px;object-fit:contain}.explanation-copy p{margin:0;font-size:1.05rem;line-height:1.55}.micro-check{border:2px solid var(--line);border-radius:18px;padding:16px}.micro-check h2{font-size:1.15rem;margin:0 0 12px}.micro-check p{font-weight:900;color:var(--green);margin:10px 0 0}.explanation-page>.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}.explanation-page>.actions button{border:0;border-radius:14px;padding:13px 18px;font-weight:1000;cursor:pointer;background:var(--navy);color:white}.explanation-page>.actions .light{background:#e8eef5;color:var(--ink)}
.less-than-one{display:flex;align-items:center;gap:16px;font-size:clamp(2rem,6vw,4rem);font-weight:1000}
.less-than-one .mini-slice{width:82px;height:82px}
.complete-banner{text-align:center;max-width:680px;margin:30px auto;background:white;border:2px solid var(--line);border-radius:28px;padding:26px;box-shadow:var(--shadow)}
.complete-banner img{width:170px;height:145px;object-fit:contain}
.complete-banner h1{margin:0;font-size:2rem}
.complete-banner p{color:var(--muted);line-height:1.5}
.complete-banner .actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.complete-banner button{border:0;border-radius:14px;padding:13px 18px;font-weight:1000;cursor:pointer;background:var(--navy);color:white}
.complete-banner button.light{background:#e8eef5;color:var(--ink)}
.quick-status{display:flex;justify-content:center;gap:16px;margin:16px 0;font-weight:900}
.practice-card{max-width:840px;margin:0 auto}
@keyframes pop{0%{transform:scale(.2) rotate(-20deg);opacity:0}75%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes journey{0%,24%{opacity:1;transform:scale(1.03)}33%,100%{opacity:.35;transform:scale(1)}}
@media(max-width:920px){
  .lesson-shell{grid-template-columns:1fr}.rail{position:static;min-height:0;padding:14px}.rail-character{display:none}.rail-title{flex-direction:row;gap:9px;align-items:baseline}.step-dots{grid-template-columns:repeat(8,1fr)}
  .visual{min-height:300px}
}
@media(max-width:640px){
  .topbar{height:64px;grid-template-columns:42px 82px 1fr;padding:7px 10px;gap:8px}.logo{width:80px;height:44px}.map-btn{display:none}.course-name b{font-size:.65rem}.course-name span{font-size:.86rem}
  .app{padding:12px}.map-page{margin:8px auto}.map-head{margin-bottom:18px}.stage-grid{grid-template-columns:1fr;gap:13px}.stage-card{grid-template-columns:58px 1fr;padding:16px;border-radius:20px}.stage-number{width:56px;height:56px;font-size:1.45rem;border-radius:16px}
  .lesson-shell{height:auto;min-height:0}.rail{display:none}.lesson-main{height:auto;min-height:0;display:block}.question-card{position:sticky;top:64px;z-index:15;padding:14px 15px;border-left-width:6px;border-radius:18px 18px 12px 12px}.question-card h1{font-size:1.22rem}.question-card p{font-size:.92rem}.lesson-scroll{min-height:0;overflow:visible;padding:0 2px max(18px,env(safe-area-inset-bottom))}
  .learn-grid{margin-top:12px;gap:12px}.visual{min-height:265px;padding:16px 12px}.visual.compact{min-height:0;padding:12px}.guides{grid-template-columns:1fr;padding:9px}.guide{grid-template-columns:62px 1fr}.guide img{width:60px;height:62px}
  .pizza{width:178px;height:178px}.whole-scene{gap:14px}.quantity-card{min-width:150px;padding:10px}.fair-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.model-option{padding:8px}.fraction-bar{height:76px}.answer-panel{padding:12px;margin-top:12px}.choice-grid{grid-template-columns:1fr 1fr;gap:8px}.choice{min-height:54px;padding:8px;font-size:.95rem}.feedback{padding:13px 62px 13px 13px}.flower{font-size:2.6rem}.controls{position:relative;bottom:auto;background:transparent;padding-top:18px}.controls button{padding:10px 14px}.pizza-pair{gap:4px}.pizza-pair .pizza{width:135px;height:135px}.explanation-page{padding:16px;margin:8px auto}.explanation-copy{grid-template-columns:76px 1fr}.explanation-copy img{width:72px;height:68px}.equivalent-bars{gap:7px}.equivalent-bars>.labeled-model .fraction-bar{height:52px}.same-size-guide{bottom:48px}.fraction-name{font-size:4rem;padding:30px 112px 30px 16px}.fraction-name>span{font-size:.82rem}.number-line{width:76%;height:100px;margin-top:62px}.multi-marker{margin-top:82px}.number-marker>span{font-size:.9rem}.less-than-one{gap:9px;font-size:1.65rem}.fraction-meaning{grid-template-columns:1fr 86px;gap:8px}.meaning-fraction{font-size:2.2rem}.calculation-card{padding:14px}.line-row{grid-template-columns:52px 1fr;gap:5px}.line-row>span{font-size:.95rem}.double-bar .fraction-bar{height:58px}
}
@media(max-width:640px){.trial-info{align-items:flex-start;flex-direction:column;gap:7px;padding:12px 14px}.trial-info span{font-size:.9rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(max-width:920px){
  .fraction-typing .topbar,.fraction-typing .question-card{position:static}
  .fraction-typing .lesson-shell,.fraction-typing .lesson-main{height:auto;min-height:0}
  .fraction-typing .lesson-scroll{overflow:visible;padding-bottom:var(--keyboard-space,120px)}
  .fraction-typing .answer-panel{scroll-margin:16px}
  .fraction-typing .fraction-entry{display:flex;align-items:center;justify-content:center;width:100%;gap:16px;margin-bottom:10px}
  .fraction-typing .fraction-entry label{display:flex;flex-direction:column;gap:4px;font-size:1rem}
  .fraction-typing .fraction-entry input{width:80px;height:44px;font-size:20px}
  .fraction-typing .fraction-entry>i{height:36px;width:3px;transform:rotate(20deg)}
}

/* Single decimal field reuses the common keyboard viewport handling. */
.decimal-entry{display:grid;gap:12px;justify-items:center;margin:0 auto 20px;max-width:100%}
.decimal-entry label{font-weight:900;font-size:1.15rem}.decimal-entry input{width:min(100%,240px);box-sizing:border-box;border:3px solid #bfd0e2;border-radius:12px;padding:12px;text-align:center;font-size:1.7rem;font-weight:900;color:var(--navy)}
.decimal-entry small{font-size:.9rem;text-align:center;color:#334a68}.decimal-square svg{width:min(100%,340px);height:auto}
.decimal-bridge{width:min(100%,390px);display:grid;justify-items:center;gap:6px;text-align:center}.decimal-bridge svg{width:min(100%,340px);height:auto}.decimal-bridge p{margin:0;font-weight:900;color:var(--navy)}.decimal-bridge .bridge-value{font-size:13px;font-weight:1000;fill:#c94e3c}
.decimal-place-model{width:min(100%,560px);display:grid;gap:12px;justify-items:center}.place-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border:3px solid var(--navy);border-radius:16px;overflow:hidden}.place-cell{display:grid;gap:7px;place-items:center;padding:14px 8px;background:#fff;border-right:2px solid var(--line)}.place-cell:last-child{border-right:0}.place-cell.highlight{background:#fff0cc;box-shadow:inset 0 0 0 4px var(--coral)}.place-cell small{font-size:.82rem;font-weight:900;color:#526985}.place-cell strong{font-size:2.2rem}.decimal-place-model>p{margin:0;font-size:2rem;font-weight:1000;color:var(--navy)}
.decimal-unit-cards{display:grid;grid-template-columns:repeat(3,minmax(90px,1fr));gap:10px;width:min(100%,600px);align-items:stretch}.decimal-unit-cards>div{display:grid;place-items:center;gap:3px;padding:13px 7px;border:2px solid var(--line);border-radius:15px;background:#f5f8fc}.decimal-unit-cards strong{font-size:2rem}.decimal-unit-cards span{font-weight:1000;color:#2e5f8d}.decimal-unit-cards small{font-weight:800;color:#5e7088}.decimal-unit-cards>p{grid-column:1/-1;margin:4px 0 0;text-align:center;font-size:2rem;font-weight:1000}
.decimal-grid-operation{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;width:100%}.decimal-grid-operation>div{display:grid;gap:7px;justify-items:center}.decimal-grid-operation svg{width:min(29vw,156px);height:auto}.decimal-grid-operation b{font-size:1.2rem}.decimal-grid-operation>strong{font-size:2rem}.decimal-grid-operation .grid-result{min-width:100px;min-height:76px;display:grid;place-items:center;border:3px solid var(--green);border-radius:14px;background:#effaf4}.decimal-grid-operation .grid-result b{font-size:1.7rem}
.decimal-column{width:min(100%,430px);display:grid;gap:6px;background:#eef5fb;border-radius:18px;padding:18px;font-variant-numeric:tabular-nums}.decimal-column-head{margin-left:44px;display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center;gap:4px;font-size:.78rem;font-weight:900;color:#526985}.decimal-column-row{display:grid;grid-template-columns:34px 1fr 12px 1fr 1fr;align-items:center;text-align:center;font-size:clamp(1.6rem,7vw,2.5rem);font-weight:1000}.decimal-column-row i{font-style:normal}.decimal-column-row b{color:var(--coral)}.decimal-column hr{width:calc(100% - 40px);margin:2px 0 2px 40px;border:0;border-top:4px solid var(--navy)}.decimal-column-row.answer{color:#24744b}
.decimal-aligned-pair{width:min(100%,430px);display:grid;gap:10px;background:#eef5fb;border-radius:18px;padding:18px;font-variant-numeric:tabular-nums}.decimal-pair-row{display:grid;grid-template-columns:34px 1fr 12px 1fr 1fr;align-items:center;text-align:center;font-size:clamp(1.6rem,7vw,2.5rem);font-weight:1000}.decimal-pair-row i{font-size:1rem;font-style:normal;color:#477ac2}.decimal-pair-row b{color:var(--coral)}
@media(max-width:560px){.decimal-unit-cards{grid-template-columns:1fr}.decimal-unit-cards>p{grid-column:auto}.place-cell{padding:10px 3px}.place-cell small{font-size:.67rem}.decimal-grid-operation{gap:8px}.decimal-grid-operation svg{width:112px}.decimal-column{padding:13px 8px}.decimal-column-head{font-size:.66rem}}
/* Place-value scaling: fixed unit headings, digits change places after answering. */
.decimal-scale-model,.decimal-thousandth-line{max-width:540px;margin:auto;text-align:center;padding:12px 4px;color:#19304f}
.decimal-scale-table{margin:12px auto;max-width:480px;border:2px solid #b8cddd;border-radius:12px;overflow:hidden;background:#fff}
.scale-table-row{display:grid;grid-template-columns:repeat(var(--place-count),minmax(0,1fr))}
.scale-table-row>*{padding:10px 2px;border-right:1px solid #b8cddd;min-width:0}
.scale-table-row>*:last-child{border-right:0}
.scale-table-row:first-child{background:#e9f2fa;font-size:1rem;font-weight:700;border-bottom:2px solid #b8cddd}
.scale-digits{font-size:1.65rem}
.scale-operation{font-size:1.6rem;font-weight:800;color:#bd432e;margin:14px 0}
.scale-caption{font-size:.9rem;line-height:1.5}
.decimal-thousandth-line svg{width:100%;height:auto;display:block;overflow:visible}
.decimal-thousandth-line svg text{font-size:16px;font-weight:700;fill:#19304f}
@media(max-width:480px){.decimal-scale-model{padding:6px 0}.scale-table-row:first-child{font-size:.875rem}.scale-digits{font-size:1.4rem}}

/* Shared place-value and equivalence diagrams: no fixed-height clipping. */
.place-heading{margin:0 0 5px;font-size:1rem;font-weight:800;text-align:center}
.decimal-place-head,.decimal-place-row{display:grid;align-items:center;text-align:center;gap:0}
.decimal-place-head{font-size:1rem;font-weight:900;color:#345c83}
.decimal-place-row{font-size:clamp(1.5rem,7vw,2.5rem);font-weight:1000;min-height:1.7em}
.decimal-place-row i{font-style:normal;font-size:.85em}.decimal-place-row b{color:#bd432e}
.decimal-place-row.answer{color:#24744b}
.equivalence-lines{width:min(100%,650px);text-align:center}
.equivalence-lines .stack-lines{width:100%}.equivalence-lines>p{margin:0;font-weight:800}
.regroup-model,.grouped-division{width:min(100%,560px);text-align:center}
.regroup-model svg{display:block;width:min(100%,320px);height:auto;margin:auto}
.regroup-model svg text{font:700 14px system-ui;fill:var(--ink)}
.regroup-model p,.grouped-division p{font-size:1rem;font-weight:800;line-height:1.5}
.regroup-units{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;font-size:1.5rem;font-weight:900}
.grouped-division .decimal-division-line{max-width:480px}
@media(max-width:560px){.decimal-place-head{font-size:.95rem}.equivalence-lines .line-row{grid-template-columns:48px minmax(0,1fr);gap:4px}.regroup-units{font-size:1.25rem}.decimal-product-area svg text{font-size:16px}}

/* Keep a whole and its number line aligned at every viewport width. */
.whole-number-model{width:min(100%,620px);padding:0 22px;box-sizing:border-box}
.whole-model-label{text-align:center;font-size:1rem;font-weight:800;margin:12px 0}
.whole-number-model .bar-model{width:100%}
.whole-number-model .bar-title:empty{display:none}
.whole-number-model .fraction-bar{height:72px;border-radius:5px}
.whole-linked-shape{position:relative}
.whole-to-line{position:absolute;left:var(--amount);top:0;bottom:64px;border-left:2px dashed var(--coral);transform:translateX(-1px);pointer-events:none}
.whole-number-model .number-line{width:100%;height:64px;margin:52px 0 0}
.whole-number-model .number-marker{top:-13px}
.whole-number-model .number-marker>span{top:-30px;font-size:1rem;background:var(--paper);padding:0 3px}
.fraction-comparison-model{width:min(100%,650px);padding:0 24px;box-sizing:border-box}
.fraction-comparison-model .number-line{width:100%;height:125px;margin:78px 0 0}
.fraction-comparison-model .number-marker{width:12px;height:12px;top:-9px;box-shadow:0 0 0 2px #ffe7e1}
.fraction-comparison-model .number-marker.second{box-shadow:0 0 0 2px #e1f3ff}
.fraction-comparison-model .number-marker>span{top:-58px;font-size:1.2rem}
.fraction-comparison-model .number-marker.second>span{top:42px}
.comparison-equivalents{display:flex;justify-content:center;gap:14px 32px;flex-wrap:wrap;font-size:1.3rem;font-weight:800}
.comparison-equivalents p{margin:0 0 12px;white-space:nowrap}
.comparison-equivalents p:first-child{color:var(--coral)}
.comparison-equivalents p:last-child{color:#2585bd}

/* Mixed-number labels stay apart while the line keeps its unit spacing. */
.mixed-operation-model,.mixed-regroup-model,.mixed-solution{width:min(100%,700px)}
.mixed-operation-model .number-line{width:84%;margin-top:142px;height:130px}
.mixed-operation-model .number-marker>span{font-size:1.1rem;top:-44px}
.mixed-operation-model .number-marker.second>span{top:-102px}
.mixed-operation-model .move-arrow>span{font-size:1rem}
.mixed-calculation-steps{display:grid;justify-items:center;gap:12px;padding:12px 0;text-align:center;font-size:clamp(1.1rem,4vw,1.55rem);font-weight:800}
.mixed-calculation-steps p{margin:0;line-height:1.65}
.mixed-regroup-model .number-line{width:84%;margin-top:90px;height:185px}
.mixed-regroup-model .number-marker>span{font-size:1.1rem;top:-50px}
.regroup-span{position:absolute;top:62px;height:18px;border-bottom:3px solid var(--navy)}
.regroup-span::before,.regroup-span::after{content:"";position:absolute;bottom:0;height:12px;border-left:3px solid currentColor}
.regroup-span::before{left:0}.regroup-span::after{right:0}
.regroup-span>strong{position:absolute;top:27px;left:50%;transform:translateX(-50%);font-size:1.25rem}
.regroup-span.exchanged{color:#2585bd;border-bottom-color:#2585bd}
/* Shared foundation models: the frame always identifies one whole. */
.foundation-diagram{text-align:center;width:100%}.foundation-diagram svg{width:min(270px,80%);display:block;margin:auto}
.candy-model{width:100%;max-width:620px;margin:auto;text-align:center}.candy-model p{font-size:1rem;margin:12px 0}
.candy-whole{display:grid;grid-template-columns:repeat(var(--groups),minmax(0,1fr));gap:10px;border:3px solid #193154;border-radius:20px;padding:14px}.candy-whole.opened{border-style:dashed}
.candy-group{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;padding:8px;border:2px solid #9dafc3;border-radius:8px}.candy-group i{display:block;width:15px;height:15px;flex:0 0 15px;border:1px solid #243b59;border-radius:50%;background:#b9d8f1}.candy-group.chosen{border-color:#805d00;background:#fff3c4}.candy-group.chosen i{background:#ffd65d}
.candy-dual{margin-top:18px}.unit-row{display:grid;grid-template-columns:repeat(var(--groups),minmax(0,1fr));border:2px solid #193154;border-radius:6px;overflow:hidden}.unit-row span{min-width:0;padding:10px 0;border-right:1px solid #193154;font-size:1.2rem}.unit-row span:last-child{border-right:0}.unit-row .chosen{background:#ffda65}
.foundation-table{width:100%;border-collapse:collapse;margin:18px auto;font-size:1rem;text-align:center}.foundation-table th,.foundation-table td{border:1px solid #c1cede;padding:10px 5px}.foundation-table th{font-size:.9rem;background:#edf4fc}
#fractionBuilder{width:100%}.fraction-builder{text-align:center;max-width:650px;width:100%;margin:auto}.fraction-builder label{display:block;margin-bottom:10px}.fraction-builder select{font:inherit;padding:10px 25px;border:2px solid #7891af;border-radius:10px;background:white;color:#193154}.builder-cells{display:grid;grid-template-columns:repeat(var(--parts),minmax(0,1fr));border:3px solid #193154;margin:18px 0;min-height:100px}.builder-cells button{min-width:0;border:0;border-right:1px solid #193154;border-radius:0;background:white;min-height:100px;padding:0;touch-action:manipulation}.builder-cells button:last-child{border-right:0}.builder-cells button.active{background:#ffda65}.builder-cells button:focus-visible{outline:3px solid #3a8dcc;outline-offset:-4px}.fraction-builder [aria-live]{min-height:60px;padding:8px;font-size:1rem}
@media(max-width:480px){.candy-whole{padding:8px;gap:5px}.candy-group{padding:5px;gap:3px}.candy-group i{width:11px;height:11px;flex-basis:11px}.foundation-table th{font-size:.85rem}}