:root{font-family:PingFang SC,Microsoft YaHei,Helvetica Neue,Roboto,Droid Sans Fallback,WenQuanYi Micro Hei,sans-serif;color:#1d2942;background:#f3f6fb;--ink: #1d2942;--blue: #3d78e6;--orange: #f4a43b;--purple: #7561d8;--line: #dbe2ee}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}.app{min-height:100vh;padding:18px 24px 30px;background:radial-gradient(circle at 8% 0,rgba(244,164,59,.2),transparent 29%),radial-gradient(circle at 92% 4%,rgba(61,120,230,.18),transparent 31%),#f3f6fb}.page-switch,.hero,.lesson-module{width:min(1160px,100%);margin:0 auto}.hero,.lesson-module{border:1px solid rgba(29,41,66,.1);border-radius:18px;background:#fffffff0;box-shadow:0 18px 44px #293a5b17}.page-switch{margin-bottom:14px;padding:5px;display:grid;grid-template-columns:1fr 1fr;border-radius:15px;background:#e7ecf4}.page-switch button{min-height:52px;border:2px solid transparent;border-radius:11px;background:transparent;color:#8490a5;font-size:1rem;font-weight:900;cursor:pointer}.page-switch button.is-active{border-color:var(--blue);background:#fff;color:var(--ink);box-shadow:0 5px 15px #325ba01f}.hero{min-height:112px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 26px}.eyebrow{margin:0 0 6px;color:#66738c;font-size:.76rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.hero h1{margin:0;display:flex;align-items:center;gap:14px;font-size:clamp(2.5rem,5vw,3.8rem);line-height:.9}.fraction{min-width:.8em;display:inline-grid;justify-items:center;line-height:.88;vertical-align:middle}.fraction>span:first-child{width:100%;padding:0 .12em .09em;border-bottom:.075em solid currentColor;text-align:center}.fraction>span:last-child{padding-top:.09em}.inputs{display:flex;align-items:center;gap:12px}.input-operator{font-size:1.65rem;font-weight:900}.fraction-input{display:grid;justify-items:center;gap:5px;color:#68758e;font-size:.75rem;font-weight:900}.fraction-input__stack{width:78px;display:grid;gap:5px;padding:8px 10px;border-radius:11px;background:var(--ink)}.fraction-input input{width:100%;height:29px;border:0;border-radius:6px;color:var(--ink);font-weight:900;text-align:center}.fixed-dividend{display:grid;justify-items:center;gap:5px;color:#68758e;font-size:.75rem;font-weight:900}.fixed-dividend strong{width:78px;height:71px;display:grid;place-items:center;border-radius:11px;background:var(--ink);color:#fff;font-size:2rem}.lesson-module{min-height:510px;margin-top:15px;padding:18px 22px 20px;display:grid;gap:18px}.step-tabs{display:grid;grid-template-columns:repeat(var(--steps),1fr);gap:9px}.step-tabs button{min-height:52px;border:1px solid var(--line);border-radius:11px;background:#f6f8fb;color:#8792a6;font-weight:850;cursor:pointer}.step-tabs button span{width:26px;height:26px;margin-right:8px;display:inline-grid;place-items:center;border-radius:50%;background:#e2e7ef}.step-tabs button.is-active{border-color:#3d78e680;background:#edf4ff;color:var(--ink)}.step-tabs button.is-active span{background:var(--blue);color:#fff}.model-view{min-height:300px;padding:16px 28px;display:grid;align-content:center;gap:20px}.question-line,.model-conclusion{display:flex;align-items:center;gap:12px;color:#56637b;font-weight:750}.question-line>span,.model-conclusion>span{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:var(--ink);color:#fff;font-weight:900}.bar-wrap{display:grid;gap:10px}.unit-bar{height:112px;display:grid;grid-template-columns:repeat(var(--units),1fr);overflow:hidden;border:4px solid var(--ink);border-radius:13px;background:#fff}.unit-cell{position:relative;border-right:1px solid rgba(29,41,66,.34);background:#fff}.unit-cell i{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#1d2942ad;font-size:clamp(.65rem,1.5vw,.9rem);font-style:normal;font-weight:900}.unit-cell.is-filled{background:var(--orange)}.unit-cell.is-filled.is-alt{background:#ffc761}.unit-cell.is-remainder{background:repeating-linear-gradient(135deg,#8b78e5 0,#8b78e5 9px,#9d8ceb 9px,#9d8ceb 18px)}.bar-caption{display:flex;align-items:center;justify-content:center;gap:8px;color:#66738c;font-weight:800}.bar-caption .fraction{font-size:1.15rem}.group-count{min-height:48px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.group-count>span{padding:9px 13px;display:flex;align-items:center;gap:6px;border-radius:10px;background:#fff1db;color:#754b13;font-size:.85rem;font-weight:850}.group-count>span.is-alt{background:#fff7e8}.group-count>span.is-remainder{background:#eeeafd;color:#51419e}.model-conclusion{justify-content:center}.model-conclusion p{margin:0}.model-conclusion .fraction{font-size:1.08rem}.learning-stage{display:grid;gap:22px}.stage-title{display:flex;align-items:center;gap:18px}.stage-title>span{color:#b8c1d0;font-size:3rem;font-weight:950;line-height:1}.stage-title h2{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:clamp(1.25rem,2.5vw,1.8rem)}.visual-equation{width:fit-content;margin:0 auto;padding:11px 18px;display:flex;align-items:center;gap:8px;border-radius:11px;background:#eef3fa;color:#44526c;font-size:1.05rem;font-weight:900}.group-summary{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.group-summary>*{padding:9px 14px;display:flex;align-items:center;gap:7px;border-radius:10px;background:#fff0d8;color:#754b13}.group-summary span{background:#eeeafd;color:#51419e;font-weight:850}.pizza-figure{margin:0;display:grid;justify-items:center;gap:10px}.pizza{width:min(280px,72vw);overflow:visible;filter:drop-shadow(0 13px 16px rgba(92,54,20,.2))}.pizza-slice{fill:#f8e2aa;stroke:#8d521c;stroke-width:1.2;transition:fill .26s ease}.pizza-slice.is-filled{fill:#f6b744}.pizza text{fill:#704015;font-size:6px;font-weight:900}.pizza-figure figcaption{color:#68758e;font-weight:850}.pizza-groups{display:flex;justify-content:center;flex-wrap:wrap;gap:18px}.pizza-group{min-width:180px;padding:14px;display:grid;justify-items:center;gap:10px;border:2px solid #dfa044;border-radius:15px;background:#fff8e8}.pizza-group>span{color:#80511b;font-weight:900}.pizza-group>div{display:flex;justify-content:center;gap:7px}.pizza-group i{width:70px;height:70px;display:grid;place-items:center;border-radius:70px 8px 8px;background:#f6b744;color:#704015;font-size:.75rem;font-style:normal;font-weight:900;transform:rotate(45deg);box-shadow:inset 0 0 0 2px #8d521c}.pizza-group i b{transform:rotate(-45deg)}.pizza-group.is-partial{border-style:dashed;border-color:var(--purple);background:#f3f0ff}.pizza-group.is-partial i{background:#9a88e6;box-shadow:inset 0 0 0 2px #55449f}.next-button{width:fit-content;min-height:45px;margin-left:auto;padding:0 20px;border:0;border-radius:11px;background:var(--ink);color:#fff;font-weight:900;cursor:pointer}.next-button span{margin-left:10px}.inverse-model{gap:14px}.reciprocal-focus{display:grid;justify-items:center;gap:14px}.reciprocal-focus small{color:#66738c;font-size:1rem;font-weight:850}.reciprocal-focus>strong{padding:18px 28px;border-radius:15px;background:#eeeafd;color:#51419e;font-size:2.2rem}.reciprocal-focus p{margin:0;color:#758198;font-weight:800}.rectangle-stage{display:grid;gap:12px}.inverse-sections{display:grid;gap:18px}.area-problem{min-height:300px;padding:24px 30px;display:grid;grid-template-columns:minmax(230px,.72fr) minmax(360px,1.28fr);align-items:center;gap:30px;border:1px solid var(--line);border-radius:16px;background:#fafbfd}.area-problem__copy{display:grid;justify-items:start;gap:12px}.area-problem__copy p{margin:0;color:#78849a;font-size:.82rem;font-weight:900}.area-problem__copy h2{margin:0;display:flex;align-items:center;gap:8px;font-size:clamp(1.4rem,2.7vw,2rem)}.unknown-equation{display:flex;align-items:center;gap:9px;color:#44526c;font-size:1.35rem;font-weight:900}.unknown-equation strong{min-width:48px;min-height:48px;display:grid;place-items:center;border-radius:9px;background:#e9edf4;color:var(--purple)}.area-problem__copy button{min-height:42px;padding:0 20px;border:0;border-radius:10px;background:var(--ink);color:#fff;font-weight:900;cursor:pointer}.area-rectangle{width:min(620px,100%);margin:0 auto}.area-rectangle svg{width:100%;display:block;overflow:visible}.area-rectangle--orange .area-shape{fill:#f2ae3d;stroke:#8a5519;stroke-width:3}.area-rectangle--blue .area-shape{fill:#4f86e8;stroke:#234e9e;stroke-width:3}.area-rectangle text{fill:#4f5c74;font-size:13px;font-weight:900}.area-rectangle .area-one{fill:#fff;font-size:15px}.dimension-line{stroke:#65728a;stroke-width:1.5;marker-start:none}.inverse-insight{width:fit-content;margin:0 auto;padding:8px 15px;border-radius:999px;background:#e9f1ff;color:#315eaa;font-weight:900}.inverse-row{display:grid;grid-template-columns:minmax(210px,1fr) 132px minmax(210px,1fr);align-items:end;gap:18px}.inverse-row small{display:block;margin-bottom:7px;color:#6c7890;font-weight:800}.scale-bar{height:74px;position:relative;overflow:hidden;display:grid;place-items:center;border:3px solid var(--ink);border-radius:11px;background:#fff}.scale-bar__fill{height:100%;position:absolute;inset:0 auto 0 0;opacity:.9}.scale-bar--blue .scale-bar__fill{background:var(--blue)}.scale-bar--orange .scale-bar__fill{background:var(--orange)}.scale-bar--purple .scale-bar__fill{background:var(--purple)}.scale-bar strong{z-index:1;padding:5px 8px;border-radius:7px;background:#ffffffe0;font-size:1.08rem}.scale-action{padding-bottom:18px;display:flex;align-items:center;justify-content:center;gap:7px;color:#55627a;font-size:1.05rem;font-weight:900}.scale-action i{margin-left:8px;font-style:normal;font-size:1.6rem}.same-scale{width:fit-content;margin:2px auto;padding:7px 15px;border-radius:999px;background:#edf1f7;color:#606d85;font-size:.85rem;font-weight:850}.inverse-equations{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.inverse-equations>span{padding:10px 16px;display:flex;align-items:center;gap:7px;border-radius:10px;background:#f2f0fc;color:#4d4190;font-weight:900}.result{min-height:82px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px}.result p{margin:0;color:#68758e;font-weight:800}.result strong{padding:13px 18px;display:flex;align-items:center;gap:11px;border-radius:12px;background:var(--ink);color:#fff;font-size:clamp(1.2rem,2.5vw,1.65rem)}.spotlight-shell{width:min(960px,92vw);margin:0 auto;padding:34px 0}.spotlight-hero,.spotlight-grid article{padding:25px;border:1px solid rgba(29,41,66,.1);border-radius:18px;background:#fff;box-shadow:0 16px 38px #293a5b14}.spotlight-hero h1{margin:5px 0;font-size:3rem}.spotlight-hero p:last-child,.spotlight-grid p{color:#637089;line-height:1.7}.spotlight-grid{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.spotlight-grid h2{margin:9px 0 0}.spotlight-number{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font-weight:900}@media (max-width: 760px){.app{padding:12px}.hero{align-items:start;padding:16px}.lesson-module{padding:14px}.model-view{padding:10px 2px}.step-tabs{grid-template-columns:1fr}.inverse-row{grid-template-columns:1fr;gap:8px}.area-problem{grid-template-columns:1fr;padding:20px 16px;gap:8px}.scale-action{padding:0}.scale-action i{transform:rotate(90deg)}.result{align-items:stretch;flex-direction:column}.result strong{justify-content:center}}@media (max-width: 540px){.hero{display:grid}.hero h1{font-size:3rem}.inputs{justify-content:space-between}.page-switch button{font-size:.9rem}.unit-bar{height:86px}.question-line{align-items:start}.result strong{gap:7px;font-size:1.05rem}.spotlight-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important}}