.unit-page{background:var(--cream);color:var(--ink)}
.unit-hero{display:grid;gap:42px;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}.unit-hero h1{font:700 clamp(42px,8.5vw,70px)/1.04 'Fredoka';letter-spacing:-.035em;margin:10px 0 22px}.unit-hero h1 em{color:#16816e;font-style:normal}.unit-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)}
.measure-scene{display:grid;place-items:center;align-content:center;min-height:370px;padding:35px;border-radius:34px;background:#dff5ef;box-shadow:0 22px 50px rgba(21,104,88,.12);overflow:hidden}.ruler{position:relative;display:flex;align-items:flex-end;justify-content:space-between;width:min(100%,430px);height:92px;padding:0 12px 14px;border-radius:8px 8px 18px 18px;background:var(--yellow);box-shadow:0 14px 28px rgba(104,77,0,.15);font:700 15px 'Fredoka';color:#665000}.ruler:before{content:'';position:absolute;inset:0 12px auto;height:35px;background:repeating-linear-gradient(90deg,#7c6300 0 2px,transparent 2px 20px)}.ruler i{width:2px;height:28px;background:#8e7100}.measure-equals{display:flex;align-items:center;gap:14px;margin-top:28px}.measure-equals strong{padding:10px 14px;border-radius:13px;background:#fff;color:#176a5a;font:700 clamp(22px,6vw,31px) 'Fredoka';box-shadow:0 9px 20px rgba(23,106,90,.1)}.measure-equals b{font:700 28px 'Fredoka';color:#176a5a}.measure-scene p{margin:18px 0 0;color:#3f6f65;text-align:center}
.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:9px;align-items:center;padding:17px 7px;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:23px}.concept-grid strong{font:700 16px 'Fredoka'}.concept-grid small{color:var(--muted)}
.unit-section{padding:78px 0}.section-intro{max-width:780px;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:#c7efe5}.light-intro>p:last-child{color:#d7eee9}
.unit-basics,.choice-grid,.example-grid,.temperature-grid,.estimate-grid{display:grid;gap:17px}.unit-basics article,.choice-grid article,.example-grid article,.temperature-grid article,.estimate-grid article{padding:23px;border-radius:21px;background:#fff;border:1px solid var(--line)}.unit-basics article>span{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#dff5ef;color:#166a59;font:700 20px 'Fredoka'}.unit-basics h3,.example-grid h3,.estimate-grid h3{font:700 22px 'Fredoka';margin:13px 0 6px}.unit-basics p,.choice-grid p,.example-grid p,.temperature-grid p:not(.equation),.estimate-grid p{color:var(--muted)}.why-box,.knowledge-note,.warning-box{display:grid;grid-template-columns:auto 1fr;gap:16px;margin-top:24px;padding:21px;border-radius:20px;background:#fff6d3;border:1px solid #ead994}.why-box>span,.knowledge-note>span,.warning-box>span{font-size:27px}.why-box b,.knowledge-note b,.warning-box b{font:700 18px 'Fredoka'}.why-box p,.knowledge-note p,.warning-box p{margin:4px 0 0;color:#6b5a23}
.metric-section,.mass-capacity-section,.dimension-section,.converter-section{padding:78px 0;background:#155c4e}.metric-stairs{display:grid;grid-template-columns:repeat(7,minmax(72px,1fr));gap:5px;align-items:end;padding:20px 0 12px;overflow-x:auto}.metric-stairs>div{display:grid;align-content:center;min-width:72px;height:calc(72px + var(--step,0)*12px);padding:9px;border-radius:13px 13px 4px 4px;background:#fff;text-align:center}.metric-stairs>div:nth-child(1){--step:6}.metric-stairs>div:nth-child(2){--step:5}.metric-stairs>div:nth-child(3){--step:4}.metric-stairs>div:nth-child(4){--step:3}.metric-stairs>div:nth-child(5){--step:2}.metric-stairs>div:nth-child(6){--step:1}.metric-stairs>div:nth-child(7){--step:0}.metric-stairs .base{background:var(--yellow)}.metric-stairs b{font:700 24px 'Fredoka';color:#155c4e}.metric-stairs small{font-size:10px;color:var(--muted)}.direction-grid,.two-topic-grid,.dimension-grid{display:grid;gap:18px;margin-top:20px}.direction-grid article,.two-topic-grid article,.dimension-grid article{padding:25px;border-radius:23px;background:#fff}.direction-grid article>span{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#dff5ef;color:#176b5b;font:700 27px 'Fredoka'}.direction-grid h3,.two-topic-grid h3,.dimension-grid h3{font:700 24px 'Fredoka';margin:14px 0 7px}.direction-grid p:not(.equation),.two-topic-grid p:not(.equation),.dimension-grid p{color:var(--muted)}.equation{font:700 19px/1.5 'Fredoka';color:var(--purple)}.memory-note{display:grid;gap:5px;margin-top:19px;padding:17px 20px;border-radius:17px;background:#0c493e;color:#fff;text-align:center}.memory-note strong{font:700 18px 'Fredoka';letter-spacing:.05em}.memory-note span{color:#bce8dd;font-size:13px}
.choice-grid article{text-align:center}.choice-grid article>span{font-size:35px}.choice-grid b{display:block;margin:7px 0 3px;font:700 19px 'Fredoka'}.example-grid{margin-top:20px}.example-chip{display:inline-block;padding:5px 9px;border-radius:20px;background:#e7e3ff;color:var(--purple);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.mass-capacity-section{background:#403588}.topic-icon{font-size:39px}.fact-list{display:grid;gap:7px;margin:15px 0}.fact-list span{padding:8px 11px;border-radius:10px;background:#f2f0ff;color:#4c4379;font-weight:700}.knowledge-note{background:#fff;border-color:#ddd8f0}.knowledge-note p{color:var(--muted)}
.time-wheel{display:grid;grid-template-columns:1fr 1fr;gap:11px}.time-wheel div{display:grid;place-items:center;min-height:105px;padding:15px;border-radius:50%;background:#fff;border:2px solid #dcd6ef;text-align:center}.time-wheel strong{font:700 18px 'Fredoka';color:var(--purple)}.time-wheel span{font-size:13px;color:var(--muted)}.warning-box{background:#ffebe6;border-color:#f4c2b8}.warning-box p{color:#794139}
.dimension-section{background:#26316f}.dimension-grid article{text-align:center}.dimension-shape{margin:0 auto 20px}.line-shape{width:120px;height:7px;border-radius:10px;background:var(--coral)}.square-shape{width:76px;height:76px;border:5px solid var(--purple);background:#ece9ff}.cube-shape{position:relative;width:70px;height:70px;border:5px solid #16816e;background:#dff5ef}.cube-shape:before{content:'';position:absolute;left:12px;top:-19px;width:66px;height:66px;border:4px solid #16816e;transform:skewY(-25deg);z-index:-1}.dimension-grid article>strong{display:block;font:700 30px 'Fredoka';color:var(--purple)}.dimension-grid small{display:block;color:var(--muted)}.area-volume-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.area-volume-facts div{display:grid;padding:15px;border-radius:15px;background:#1c255b;color:#fff}.area-volume-facts b{font:700 18px 'Fredoka'}.area-volume-facts span{color:#c9cfee;font-size:13px}
.temperature-grid article>span{display:inline-block;padding:5px 9px;border-radius:20px;background:#ffebe5;color:#a94534;font-weight:700}.temperature-grid .equation{color:#a94534}.temperature-grid small{color:var(--muted)}
.converter-section{background:var(--purple)}.converter-card{display:grid;gap:22px}.converter-card form,.converter-result{padding:25px;border-radius:25px;background:#fff}.converter-card form{display:grid;gap:20px}.converter-card label{display:grid;gap:7px}.converter-card label>span{font-weight:700;color:#514b6e}.converter-card input,.converter-card select{width:100%;min-width:0;padding:12px 13px;border:1px solid #cfc9e3;border-radius:12px;background:#fff;color:var(--ink);font:700 16px 'Fredoka'}.converter-card input:focus,.converter-card select:focus{outline:3px solid rgba(91,75,219,.18);border-color:var(--purple)}.conversion-inputs{display:grid;gap:14px}.swap-button{align-self:end;justify-self:center;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:15px;background:#eae7ff;color:var(--purple);font:700 25px 'Fredoka';cursor:pointer}.swap-button:hover{background:#ddd8ff}.converter-result{display:grid;place-items:center;align-content:center;min-height:360px;text-align:center}.converter-result>span{color:var(--muted);font-weight:700}.converter-result>strong{max-width:100%;margin:17px 0 8px;color:var(--purple);font:700 clamp(32px,8vw,50px)/1.05 'Fredoka';overflow-wrap:anywhere}.converter-result>p{font:700 20px 'Fredoka';margin:4px}.converter-result>div{margin-top:17px;padding:17px;border-radius:16px;background:#f1efff;color:#514b70}.converter-result.error>strong,.converter-result.error>p{display:none}.converter-result.error>div{background:#ffebe6;color:#7b3d32}
.estimate-section{padding:78px 0}.estimate-grid article{text-align:center}.estimate-grid article>span{font-size:38px}.checklist{margin-top:21px;padding:24px;border-radius:21px;background:#e1f5ef}.checklist b{font:700 21px 'Fredoka';color:#135f50}.checklist ol{padding-left:22px}.checklist li{margin:8px 0}
.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:#dff5ef}.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)}.unit-share{padding:65px 0;background:#16816e}.share-panel{display:grid;gap:18px;align-items:center;color:#fff}.share-panel .eyebrow{color:#c8f1e8}.share-panel h2{font:700 32px 'Fredoka';margin:5px 0}.share-panel p{margin:0}.share-panel .button{justify-self:start;background:#fff;color:#126352}.share-panel #shareFeedback{grid-column:1/-1;min-height:18px}
@media(min-width:650px){.concept-grid{grid-template-columns:repeat(5,1fr)}.concept-grid>div{border-bottom:0;border-right:1px solid var(--line)!important}.concept-grid>div:last-child{border-right:0!important}.unit-basics,.choice-grid,.temperature-grid{grid-template-columns:repeat(2,1fr)}.example-grid,.two-topic-grid,.direction-grid,.converter-card,.quiz-layout,.remember-section{grid-template-columns:1fr 1fr}.dimension-grid,.estimate-grid{grid-template-columns:repeat(3,1fr)}.time-wheel{grid-template-columns:repeat(5,1fr)}.converter-card form,.converter-result{padding:32px}.conversion-inputs{grid-template-columns:1.05fr 1fr auto 1fr;align-items:end}.share-panel{grid-template-columns:1fr auto}}
@media(min-width:900px){.unit-hero{grid-template-columns:1.08fr .92fr;align-items:center;gap:70px;padding:75px 0 105px}.measure-scene{min-height:430px}.unit-basics{grid-template-columns:repeat(3,1fr)}.choice-grid,.temperature-grid{grid-template-columns:repeat(4,1fr)}.quiz-layout{grid-template-columns:.8fr 1.2fr}.share-panel h2{font-size:39px}}
@media(max-width:560px){.unit-hero{padding-top:32px}.measure-scene{min-height:320px}.ruler i:nth-of-type(n+3){display:none}.concept-grid>div{padding:15px 6px}.concept-grid>div:last-child{grid-column:1/-1}.concept-grid small{font-size:10px}.unit-section,.metric-section,.mass-capacity-section,.dimension-section,.converter-section,.estimate-section,.quiz-section{padding:62px 0}.metric-stairs{padding-bottom:18px}.time-wheel div{border-radius:22px}.area-volume-facts{grid-template-columns:1fr}.converter-result{min-height:310px}.share-panel h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}