.fraction-page{background:var(--cream);color:var(--ink)}
.fraction-hero{display:grid;gap:44px;padding:48px 0 76px}.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:25px;color:var(--muted);font-size:13px}.breadcrumb a{color:var(--purple);text-decoration:none}.fraction-hero h1{font:700 clamp(43px,9vw,72px)/1.04 'Fredoka';letter-spacing:-.035em;margin:10px 0 22px}.fraction-hero h1 em{color:var(--coral);font-style:normal}.fraction-hero-copy>p:not(.eyebrow){max-width:650px;color:var(--muted);font-size:17px}.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:26px}.text-link{font-weight:700;color:var(--purple)}
.hero-fraction{display:grid;place-items:center;align-content:center;min-height:380px;padding:35px;border-radius:34px;background:#fff0d6;box-shadow:0 22px 50px rgba(93,64,22,.11);overflow:hidden}.hero-pieces{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:205px;height:205px;transform:rotate(5deg)}.hero-pieces span{background:var(--coral);border:4px solid #fff;border-radius:28px 8px 8px 8px;box-shadow:0 8px 18px rgba(241,112,91,.2)}.hero-pieces span:nth-child(2){border-radius:8px 28px 8px 8px}.hero-pieces span:nth-child(3){border-radius:8px 8px 8px 28px}.hero-pieces span:nth-child(4){border-radius:8px 8px 28px 8px}.hero-pieces .empty{background:#fff;border-color:#f0dcb9}.big-fraction{position:absolute;display:flex;flex-direction:column;align-items:center;padding:11px 17px;border-radius:17px;background:#fff;box-shadow:0 13px 30px rgba(79,53,15,.18);transform:translate(110px,-90px) rotate(7deg)}.big-fraction strong{font:700 26px/1 'Fredoka';color:var(--purple)}.big-fraction i{width:28px;height:3px;margin:4px 0;background:var(--purple)}.hero-fraction p{max-width:290px;margin:25px 0 0;text-align:center;color:#70572e}
.concept-strip{background:#fff;border-block:1px solid var(--line)}.concept-grid{display:grid;grid-template-columns:1fr 1fr}.concept-grid>div{display:grid;grid-template-columns:auto 1fr;column-gap:11px;align-items:center;padding:18px 8px;border-bottom:1px solid var(--line)}.concept-grid>div:nth-child(odd){border-right:1px solid var(--line)}.concept-grid span{grid-row:1/3;font-size:25px}.concept-grid strong{font:700 17px 'Fredoka'}.concept-grid small{color:var(--muted)}
.fraction-section{padding:78px 0}.section-intro{max-width:760px;margin-bottom:34px}.section-intro h2{font:700 clamp(32px,7vw,48px)/1.1 'Fredoka';letter-spacing:-.02em;margin:7px 0 13px}.section-intro>p:last-child{color:var(--muted);font-size:16px}.light-intro{color:#fff}.light-intro .eyebrow{color:#d8d3ff}.light-intro>p:last-child{color:#e4e0ff}
.anatomy-grid{display:grid;gap:25px}.anatomy-card{position:relative;display:grid;place-items:center;min-height:350px;border-radius:28px;background:#ece9ff;overflow:hidden}.anatomy-fraction{display:flex;flex-direction:column;align-items:center}.anatomy-fraction span{font:700 78px/1 'Fredoka';color:var(--purple)}.anatomy-fraction i{width:105px;height:7px;margin:9px 0;background:var(--purple);border-radius:10px}.anatomy-label{position:absolute;display:grid;padding:12px 15px;border-radius:14px;background:#fff;box-shadow:0 10px 22px rgba(50,40,120,.12);font-size:13px}.anatomy-label b{color:var(--purple);font-size:15px}.anatomy-label span{color:var(--muted)}.anatomy-label.top{top:42px;right:28px}.anatomy-label.bottom{bottom:40px;left:25px}.meaning-cards{display:grid;gap:14px}.meaning-cards article{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start;padding:21px;border:1px solid var(--line);border-radius:20px;background:#fff}.meaning-cards article>span{display:grid;place-items:center;width:39px;height:39px;border-radius:13px;background:var(--yellow);font:700 20px 'Fredoka'}.meaning-cards h3{font:700 21px 'Fredoka';margin:1px 0 5px}.meaning-cards p{color:var(--muted);margin:0}.why-box,.warning-box{display:grid;grid-template-columns:auto 1fr;gap:16px;margin-top:25px;padding:21px;border-radius:20px;background:#fff7d8;border:1px solid #efdda0}.why-box>span,.warning-box>span{font-size:26px}.why-box b,.warning-box b{font:700 18px 'Fredoka'}.why-box p,.warning-box p{margin:4px 0 0;color:#6f6030}
.lab-section{padding:78px 0;background:var(--purple)}.lab-layout{display:grid;gap:22px}.lab-controls,.fraction-model-card{padding:25px;border-radius:25px;background:#fff}.lab-controls{display:grid;gap:25px}.lab-controls label>span{display:flex;justify-content:space-between;gap:15px;margin-bottom:12px}.lab-controls output{font-weight:700;color:var(--purple)}.lab-controls input[type=range]{width:100%;accent-color:var(--coral)}.lab-readout{display:flex;align-items:center;gap:25px;padding:19px;border-radius:19px;background:#f4f2ff}.small-fraction,.display-fraction,.result-fraction{display:flex;flex-direction:column;align-items:center}.small-fraction strong{font:700 32px/1 'Fredoka';color:var(--purple)}.small-fraction i{width:43px;height:3px;margin:5px 0;background:var(--purple)}.lab-readout>div:last-child{display:grid;grid-template-columns:auto auto;gap:5px 14px;align-items:center;color:var(--muted)}.lab-readout>div:last-child b{color:var(--ink);font-size:18px}.fraction-model-card{display:grid;place-items:center;align-content:center;min-height:340px}.fraction-model{display:grid;grid-template-columns:repeat(var(--fraction-cols,4),1fr);gap:6px;width:min(100%,520px)}.fraction-model span{aspect-ratio:1/1;min-height:42px;border-radius:11px;background:#f0edf8;border:2px solid #ded9ed;transition:background .2s,transform .2s}.fraction-model span.filled{background:var(--coral);border-color:#e35f4a;transform:translateY(-2px)}.fraction-model-card p{margin:24px 0 0;text-align:center;color:var(--muted)}
.equivalent-visuals{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;padding:29px;border-radius:25px;background:#fff;border:1px solid var(--line)}.equivalent-visuals article{display:grid;gap:13px;justify-items:center}.equivalent-visuals>strong{font:700 31px 'Fredoka';color:var(--muted)}.bar{display:grid;gap:4px;width:150px;height:64px}.bar.two{grid-template-columns:repeat(2,1fr)}.bar.four{grid-template-columns:repeat(4,1fr)}.bar.six{grid-template-columns:repeat(6,1fr)}.bar span,.bar i{border:2px solid #d9d4ed}.bar span{background:var(--purple)}.bar i{background:#fff}.display-fraction b{font:700 20px/1 'Fredoka'}.display-fraction i{width:26px;height:2px;margin:3px;background:var(--ink)}.rule-grid{display:grid;gap:18px;margin-top:22px}.rule-grid article{padding:24px;border-radius:22px;background:#fff;box-shadow:0 13px 30px rgba(43,35,104,.07)}.rule-grid article>span{display:grid;place-items:center;width:45px;height:45px;border-radius:14px;background:#e8f7eb;color:#277046;font:700 27px 'Fredoka'}.rule-grid h3{font:700 23px 'Fredoka';margin:14px 0 7px}.rule-grid p{color:var(--muted)}.example-box{display:grid;gap:17px;margin-top:22px;padding:24px;border-radius:22px;background:#e9f8ed;border:1px solid #cbe7d2}.example-number{justify-self:start;padding:5px 10px;border-radius:20px;background:#2f7b4d;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.example-box h3{font:700 24px 'Fredoka';margin:0 0 6px}.example-box p{margin:4px 0}.equation{font:700 19px 'Fredoka';color:var(--purple)}
.compare-section,.multiply-section,.calculator-section{padding:78px 0;background:#2d2568}.method-grid,.multiply-grid{display:grid;gap:18px}.method-grid article,.multiply-grid article{padding:25px;border-radius:23px;background:#fff}.method-no{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--yellow);font:700 19px 'Fredoka'}.method-grid h3,.multiply-grid h3{font:700 24px 'Fredoka';margin:14px 0 7px}.method-grid p:not(.equation),.multiply-grid p:not(.big-equation){color:var(--muted)}.method-grid .equation{font-size:22px}.method-grid small{color:var(--muted)}
.operation-grid{display:grid;gap:18px}.operation-card{padding:25px;border-radius:23px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 35px rgba(43,35,104,.06)}.operation-card.easy{background:#effaf2;border-color:#cfe8d5}.operation-label{display:inline-block;padding:5px 10px;border-radius:20px;background:#ece9ff;color:var(--purple);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.operation-card h3{font:700 29px 'Fredoka';margin:15px 0 10px}.operation-card ol{padding-left:22px;color:var(--muted)}.operation-card li{margin:6px 0}.operation-card .answer{padding-top:12px;border-top:1px solid var(--line);font:700 18px 'Fredoka';color:var(--purple)}.warning-box{background:#ffebe6;border-color:#f5c4ba}.warning-box p{color:#78443b}
.multiply-section{background:#174f3b}.operation-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:#e3f6e9;color:#1f6a48;font:700 30px 'Fredoka'}.big-equation{font:700 20px/1.5 'Fredoka';color:#1f6a48}.multiply-grid small{color:var(--muted)}
.conversion-flow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;padding:29px;border-radius:26px;background:#fff}.conversion-flow div{display:grid;justify-items:center;min-width:135px;padding:18px;border-radius:18px;background:#f1efff}.conversion-flow span{font-size:12px;color:var(--muted)}.conversion-flow strong{font:700 32px 'Fredoka';color:var(--purple)}.conversion-flow>i{font-style:normal;font-weight:700;color:var(--coral)}.conversion-grid{display:grid;gap:17px;margin-top:20px}.conversion-grid article{padding:22px;border-radius:20px;background:#fff;border:1px solid var(--line)}.conversion-grid h3{font:700 22px 'Fredoka';margin:0 0 7px}.conversion-grid p{color:var(--muted)}.conversion-grid .equation{color:var(--purple)}
.calculator-section{background:var(--purple)}.calculator-card{display:grid;gap:22px}.calculator-card form,.calculator-result{padding:25px;border-radius:25px;background:#fff}.calculator-card form{display:grid;gap:19px}.calculator-card fieldset{display:grid;grid-template-columns:1fr;gap:7px;margin:0;padding:18px;border:1px solid var(--line);border-radius:18px}.calculator-card legend{padding:0 8px;font:700 18px 'Fredoka'}.calculator-card fieldset label{display:grid;grid-template-columns:1fr 100px;align-items:center;gap:10px;color:var(--muted)}.calculator-card input,.calculator-card select{width:100%;padding:11px 12px;border:1px solid #cbc5e2;border-radius:11px;background:#fff;color:var(--ink);font:700 17px 'Fredoka'}.calculator-card input:focus,.calculator-card select:focus{outline:3px solid rgba(91,75,219,.2);border-color:var(--purple)}.calc-line{display:block;width:100px;height:3px;margin-left:auto;background:var(--ink)}.operator-label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:15px}.operator-label span{font-weight:700}.calculator-result{display:grid;place-items:center;align-content:center;min-height:390px;text-align:center}.calculator-result>span{color:var(--muted);font-weight:700}.result-fraction{margin:17px 0}.result-fraction strong{font:700 52px/1 'Fredoka';color:var(--purple)}.result-fraction i{width:72px;height:5px;margin:7px 0;background:var(--purple)}.calculator-result p{margin:3px}.result-steps{margin-top:17px;padding:17px;border-radius:16px;background:#f2f0ff;color:#514b70}.calculator-result.error .result-fraction,.calculator-result.error>span,.calculator-result.error>p{display:none}.calculator-result.error .result-steps{background:#ffebe6;color:#7c3d33}
.story-section{padding:78px 0}.story-card{display:grid;gap:25px;padding:25px;border-radius:26px;background:#fff;border:1px solid var(--line)}.story-visual{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;min-height:190px;border-radius:20px;background:#fff1d8}.story-visual span{font-size:60px}.story-visual b{font:700 28px 'Fredoka';color:var(--purple)}.story-visual i{font:700 25px 'Fredoka';font-style:normal}.story-card h3{font:700 28px 'Fredoka';margin:0 0 8px}.story-card p,.story-card ol{color:var(--muted)}.story-card li{margin:7px 0}.story-answer{padding:13px 16px;border-radius:14px;background:#e9f8ed;color:#245f3d!important}
.quiz-section{padding:78px 0;background:#fff0d5}.quiz-layout{display:grid;gap:28px}.quiz-layout h2{font:700 clamp(32px,7vw,47px)/1.1 'Fredoka';margin:7px 0 13px}.quiz-layout>div:first-child>p:last-child{color:var(--muted)}.quiz-card{padding:25px;border-radius:25px;background:#fff;box-shadow:0 17px 40px rgba(78,55,15,.1)}.quiz-progress{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:13px}.quiz-card h3{font:700 24px/1.25 'Fredoka';margin:22px 0 17px}.quiz-options{display:grid;gap:10px}.quiz-option{width:100%;padding:13px 15px;border:1px solid #d9d4e8;border-radius:13px;background:#fff;text-align:left;color:var(--ink);font-weight:700;cursor:pointer}.quiz-option:hover{border-color:var(--purple);background:#f4f2ff}.quiz-option.correct{border-color:#2d8252;background:#e6f7eb;color:#1e6640}.quiz-option.wrong{border-color:#d85b47;background:#ffebe7;color:#923c2e}.quiz-option:disabled{cursor:default}.quiz-feedback{min-height:48px;color:var(--muted)}
.remember-section{display:grid;gap:22px;padding:78px 0}.remember-card,.next-card{padding:27px;border-radius:26px}.remember-card{background:#e9e6ff}.remember-card h2,.next-card h2{font:700 30px/1.12 'Fredoka';margin:8px 0 15px}.remember-card ol{padding-left:22px}.remember-card li{margin:9px 0}.next-card{background:#fff;border:1px solid var(--line)}.next-card>span{font-size:42px}.next-card p:not(.eyebrow){color:var(--muted)}.fraction-share{padding:65px 0;background:var(--coral)}.share-panel{display:grid;gap:18px;align-items:center;color:#fff}.share-panel .eyebrow{color:#ffe2dc}.share-panel h2{font:700 32px 'Fredoka';margin:5px 0}.share-panel p{margin:0}.share-panel .button{justify-self:start;background:#fff;color:#a83e2e}.share-panel #shareFeedback{grid-column:1/-1;min-height:18px}
@media(min-width:700px){.concept-grid{grid-template-columns:repeat(4,1fr)}.concept-grid>div{border-bottom:0;border-right:1px solid var(--line)!important}.concept-grid>div:last-child{border-right:0!important}.anatomy-grid,.lab-layout,.calculator-card,.quiz-layout,.remember-section,.story-card{grid-template-columns:1fr 1fr}.rule-grid,.multiply-grid{grid-template-columns:1fr 1fr}.method-grid,.operation-grid,.conversion-grid{grid-template-columns:repeat(3,1fr)}.example-box{grid-template-columns:auto 1fr}.calculator-card form,.calculator-result{padding:32px}.share-panel{grid-template-columns:1fr auto}.fraction-model span{min-height:55px}}
@media(min-width:900px){.fraction-hero{grid-template-columns:1.08fr .92fr;align-items:center;gap:70px;padding:75px 0 105px}.hero-fraction{min-height:430px}.anatomy-grid{grid-template-columns:.9fr 1.1fr}.lab-layout{grid-template-columns:.85fr 1.15fr}.story-card{grid-template-columns:.75fr 1.25fr}.quiz-layout{grid-template-columns:.8fr 1.2fr}.share-panel h2{font-size:39px}}
@media(max-width:560px){.fraction-hero{padding-top:32px}.hero-fraction{min-height:330px}.hero-pieces{width:170px;height:170px}.big-fraction{transform:translate(85px,-78px) rotate(7deg)}.concept-grid>div{padding:15px 6px}.concept-grid small{font-size:10px}.fraction-section,.lab-section,.compare-section,.multiply-section,.calculator-section,.story-section,.quiz-section{padding:62px 0}.anatomy-label.top{top:26px;right:16px}.anatomy-label.bottom{bottom:25px;left:15px}.equivalent-visuals{gap:9px;padding:20px 12px}.bar{width:88px;height:53px}.equivalent-visuals>strong{font-size:22px}.fraction-model{gap:4px}.fraction-model span{min-height:34px;border-radius:8px}.calculator-card fieldset label{grid-template-columns:1fr 82px}.calc-line{width:82px}.operator-label{grid-template-columns:1fr}.conversion-flow{flex-direction:column}.conversion-flow>i{transform:rotate(90deg)}.share-panel h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.fraction-model span{transition:none}}