/* The page stays readable without JavaScript. Motion progressively enhances it. */
.demo-scroll .demo-grid{align-items:center}
.story-board{background:#e0e6d5;border:1px solid #d1dac5;border-radius:20px;padding:24px 24px 18px;overflow:clip}
.story-board-top{display:flex;justify-content:space-between;gap:12px;color:#617152;font-size:8px;letter-spacing:1.1px;margin-bottom:23px}
.story-deck{position:relative;display:grid;perspective:1400px;margin:22px 22px 30px;isolation:isolate}
.story-page{grid-area:1/1;background:#fffef7;border:1px solid #dedccb;border-radius:4px;padding:26px;min-width:0;min-height:330px;box-shadow:0 12px 30px #36472b18;transform-origin:50% 90%;backface-visibility:hidden}
.story-page-one{z-index:3}
.story-page-two{z-index:2;transform:rotate(7deg);background:#f4f3e7}
.story-page-three{z-index:1;transform:rotate(-8deg)}
.story-page-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid #dddccc;color:#7e866f;font-size:8px;letter-spacing:1px}
.story-page h3{font-family:var(--serif);font-size:27px;line-height:1.3;font-weight:400;letter-spacing:-.4px;margin:24px 0 18px}
.story-page p{font-size:12px;color:#68705e;line-height:1.75;margin:18px 0 0}
.story-equation{font-family:Caveat,cursive;font-size:37px;color:#52678b;line-height:1.5}
.story-scribble{font-family:Caveat,cursive;font-size:24px;color:#b08150;margin:15px 0;transform:rotate(-3deg)}
.story-tutor-mark{display:grid;place-items:center;background:#305441;color:#faf9ed;width:30px;height:30px;border-radius:8px;font:25px var(--serif);margin:18px 0 -10px}
.fraction-sketch{display:flex;gap:15px;margin:20px 0}
.fraction-sketch span{height:24px;flex:1;border:1px solid #8da27d;border-radius:3px;background:repeating-linear-gradient(to right,transparent 0 calc(33.333% - 1px),#8da27d calc(33.333% - 1px) 33.333%),linear-gradient(to right,#b9c9a6 33.333%,#f7f6eb 33.333%)}
/* One third and one quarter: the pieces visibly don't match. */
.fraction-sketch span+span{background:repeating-linear-gradient(to right,transparent 0 calc(25% - 1px),#8da27d calc(25% - 1px) 25%),linear-gradient(to right,#b9c9a6 25%,#f7f6eb 25%)}
.story-check{font-family:Caveat,cursive;color:#6e8a50;font-size:55px;margin-top:8px;line-height:1}
.story-stage-nav{display:flex;gap:10px;align-items:center;justify-content:space-between}
.story-stage-nav button{font-family:var(--sans);font-size:9px;color:#7a856c;padding:7px 0;cursor:pointer;background:none;border:0;white-space:nowrap}
.story-stage-nav button span{display:block;font-size:10px;margin-top:5px}
.story-stage-nav button[aria-pressed=true]{color:#244232;font-weight:700}
.story-track{height:1px;background:#bbc6ac;flex:1;max-width:38px;overflow:hidden}
.story-track i{display:block;background:#45613f;height:100%;width:100%;transform:scaleX(0);transform-origin:left}
.story-scroll-cue{font-size:11px;color:#566b49;display:flex;align-items:center;gap:10px;margin-top:30px}
.story-scroll-cue>span{display:inline-grid;place-items:center;border:1px solid #bfcab2;border-radius:50%;width:27px;height:35px;font-size:18px}
.motion-ready .demo-scroll{height:240svh;position:relative}
.motion-ready .demo-scroll .demo-grid{position:sticky;top:0;height:100svh;padding-block:40px}
.motion-ready .story-deck{height:360px}
.motion-ready .story-page{position:absolute;inset:0;min-height:0}
.motion-ready .story-scroll-cue>span{animation:scroll-nudge 1.8s ease-in-out infinite}
@keyframes scroll-nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@media(max-width:1000px) and (min-width:721px){.story-board{padding:18px 10px}.story-deck{margin-inline:16px}.story-page{padding:20px}.story-page h3{font-size:24px}.story-equation{font-size:30px}.story-board-top{font-size:7px}}
@media(max-width:720px){.motion-ready .demo-scroll{height:230svh}.motion-ready .demo-scroll .demo-grid{padding-block:22px;gap:18px;grid-template-rows:auto 1fr;align-content:center}.story-copy h2{font-size:30px;line-height:1.1;margin:10px 0}.story-copy .eyebrow{font-size:8px}.story-copy .bodycopy{font-size:12px;line-height:1.6;margin:10px 0}.story-copy .tabs{margin-top:12px}.story-copy .micro{display:none}.story-scroll-cue{margin:10px 0 0;font-size:10px}.story-scroll-cue>span{height:22px;width:22px;font-size:14px}.story-board{padding:16px 14px 10px;max-width:480px;margin:auto}.story-board-top{font-size:7px;margin-bottom:14px}.story-deck{margin:14px 15px 20px}.motion-ready .story-deck{height:clamp(240px,36svh,340px)}.story-page{padding:19px}.story-page h3{font-size:23px;margin:17px 0 12px}.story-page p{font-size:11px;margin-top:10px}.story-equation{font-size:31px}.story-scribble{font-size:22px;margin:8px 0}.story-check{font-size:40px}.story-page-head{font-size:7px;padding-bottom:10px}.story-tutor-mark{margin-top:10px}.fraction-sketch{margin:14px 0}.story-stage-nav{gap:8px}.story-stage-nav button span{font-size:9px}.paper-story{align-self:center}}
@media(max-height:720px) and (min-width:721px){.motion-ready .story-deck{height:300px}.story-page{padding:20px}.story-page h3{font-size:24px}.story-board{padding:16px}.story-board-top{margin-bottom:14px}.motion-ready .demo-scroll .demo-grid{padding-block:20px}}
@media(max-height:700px) and (max-width:720px){.story-copy .bodycopy,.story-scroll-cue{display:none}.story-copy h2{font-size:26px}.motion-ready .story-deck{height:310px}.motion-ready .demo-scroll .demo-grid{padding-block:12px;gap:12px}.story-page h3{font-size:21px}.story-page p{font-size:10px}.story-board-top{display:none}}
@media(prefers-reduced-motion:reduce){.motion-ready .demo-scroll{height:auto}.motion-ready .demo-scroll .demo-grid{position:static;height:auto;padding-block:65px}.story-scroll-cue{display:none}.motion-ready .story-deck{height:auto}.motion-ready .story-page{position:relative;inset:auto;grid-area:auto;transform:none!important;opacity:1!important;margin-bottom:15px}.story-deck{display:block}.story-stage-nav{display:none}.story-page-two,.story-page-three{transform:none}}
.paper-stack{position:relative;isolation:isolate;perspective:1100px;margin:9px 0 4px}
.paper-stack::before,.paper-stack::after{content:"";position:absolute;inset:0;border:1px solid #d9ddcc;border-radius:3px;pointer-events:none;transform-origin:50% 85%;background:#f5f4e9;box-shadow:0 4px 12px #2b382008}
.paper-stack::before{transform:translate(7px,7px) rotate(3deg)}
.paper-stack::after{transform:translate(-5px,3px) rotate(-3deg);background:#faf9ef}
.paper-stack .sheet{position:relative;z-index:1;transform-origin:50% 80%}
.motion-ready .paper-stack::before{transform:translate(calc(3px + var(--fan,0)*8px),calc(4px + var(--fan,0)*6px)) rotate(calc(1deg + var(--fan,0)*5deg))}
.motion-ready .paper-stack::after{transform:translate(calc(-2px - var(--fan,0)*6px),calc(2px + var(--fan,0)*3px)) rotate(calc(-1deg - var(--fan,0)*4deg))}
.motion-ready .paper-stack .sheet{transform:translateY(calc(var(--fan,0)*-7px)) rotate(calc(-2deg + var(--fan,0)*3deg))}
.motion-ready .pair-diagram span{transform:translateY(calc((1 - var(--fan,0))*9px));transition:transform .25s ease-out}
.notes{min-width:0;--turn:0;--page-one-opacity:1;--page-two-opacity:0;--page-two-angle:7deg;--page-one-angle:0deg;--page-two-shift:10px}
.notes-stack{display:grid;perspective:1600px;position:relative;isolation:isolate}
.notes-stack::before{content:"";position:absolute;inset:3px 0 -7px;background:#ebece0;border:1px solid #d8ddce;border-radius:12px;transform:rotate(-3deg);z-index:-1}
.report-page{grid-area:1/1;transform:none;backface-visibility:hidden;transform-origin:0 50%;margin:0;align-self:stretch}
.report-page:first-child{z-index:2;opacity:var(--page-one-opacity);transform:rotateY(var(--page-one-angle));pointer-events:none}
.report-page:nth-child(2){z-index:1;opacity:var(--page-two-opacity);transform:translateX(var(--page-two-shift)) rotateY(var(--page-two-angle));pointer-events:none}
.report-footer{display:flex;justify-content:space-between;gap:12px;letter-spacing:1px;font-size:8px}
.notes-nav{display:flex;align-items:center;gap:12px;position:relative;margin-top:26px}
.notes-nav button{border:0;background:none;padding:8px 0;color:#7c8776;font-size:11px;cursor:pointer;white-space:nowrap}
.notes-nav button[aria-pressed="true"]{color:var(--ink);font-weight:600}
.notes-nav button:last-child{margin-left:auto}
.notes-progress{height:2px;flex:1;max-width:90px;background:#dedfd5;overflow:hidden;border-radius:2px}
.notes-progress i{display:block;width:50%;height:100%;background:#70855e;transform:translateX(calc(var(--turn)*100%))}
.motion-ready [data-reveal]{transition:opacity .75s ease,transform .85s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
.motion-ready [data-reveal]:not(.is-visible){opacity:0;transform:translateY(24px)}
.motion-ready [data-reveal].is-visible{opacity:1;transform:none}
@media(max-width:720px){.notes-nav{gap:9px}.paper-stack::before,.paper-stack::after{inset:2px}.notes-stack{perspective:1000px}.notes-stack::before{transform:rotate(-1.5deg)}}
@media(max-width:360px){.motion-ready .paper-stack::before{transform:translate(4px,6px) rotate(calc(1deg + var(--fan,0)*2deg))}.motion-ready .paper-stack::after{transform:translate(-3px,3px) rotate(calc(-1deg - var(--fan,0)*2deg))}}
@media(prefers-reduced-motion:reduce){.motion-ready [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}.paper-stack::before,.paper-stack::after,.motion-ready .paper-stack .sheet,.motion-ready .pair-diagram span{transform:none!important}.report-page{transform:none!important}.notes-stack::before{transform:none}}
.counting-sketch{display:block;height:55px;max-width:100px;background-image:linear-gradient(#97a887 1px,transparent 1px),linear-gradient(90deg,#97a887 1px,transparent 1px);background-size:33px 27px;border-right:1px solid #97a887;border-bottom:1px solid #97a887}.counting-sketch span{display:none}
html:not(.motion-ready) .story-deck{display:block}html:not(.motion-ready) .story-page{transform:none;margin-bottom:15px}html:not(.motion-ready) .story-stage-nav,html:not(.motion-ready) .story-scroll-cue{display:none}
.story-page-two h3{font-size:24px;margin:16px 0}.story-page-two .story-tutor-mark{display:none}
@media(max-width:720px){.story-page-two h3{font-size:20px;line-height:1.25;margin:14px 0}.story-page-two .fraction-sketch{margin:12px 0}.story-page-two p{font-size:10px}.story-page-one h3,.story-page-three h3{font-size:22px}.story-page-three .story-equation{font-size:29px}}
@media(max-width:360px){.story-page{padding:16px}.story-page h3{font-size:20px}.story-page-two h3{font-size:18px}.story-page .story-equation{font-size:26px}.story-page-head{font-size:6px;letter-spacing:.6px}}
.notes-stack{overflow:clip;overflow-clip-margin:14px}
/* Keep the illustration close to the copy on tall monitors. */
@media(min-width:721px){.motion-ready .demo-scroll{height:calc(650px + 70svh)}.motion-ready .demo-scroll .demo-grid{height:auto;min-height:min(650px,calc(100svh - 32px));top:24px;padding-block:54px}.story-page-two{transform:rotate(4deg)}.story-page-three{transform:rotate(-4deg)}}
@media(max-width:720px){.motion-ready .demo-scroll{height:195svh}.motion-ready .demo-scroll .demo-grid{height:min(760px,100svh);top:0}}
/* The hero plays a small learning sequence instead of waiting for a scroll. */
.pair-diagram>span{position:relative;border-color:transparent!important}
.pair-diagram svg{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);overflow:visible;pointer-events:none}
.pair-diagram path{fill:none;stroke:#8c9e78;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.motion-ready .scene .paper-stack .sheet{animation:paper-settle 12s cubic-bezier(.22,.75,.25,1) infinite}
.motion-ready .scene .paper-stack::before{animation:paper-back-one 12s cubic-bezier(.22,.75,.25,1) infinite}
.motion-ready .scene .paper-stack::after{animation:paper-back-two 12s cubic-bezier(.22,.75,.25,1) infinite}
.motion-ready .scene .pair-diagram>span{animation:pair-settle 12s cubic-bezier(.22,.75,.25,1) infinite}
.motion-ready .scene .pair-diagram>span:nth-child(2){animation-delay:.18s}
.motion-ready .scene .pair-diagram>span:nth-child(3){animation-delay:.36s}
.motion-ready .scene .pair-diagram path{stroke-dasharray:1;animation:draw-pair 12s ease-in-out infinite}
.motion-ready .scene .pair-diagram>span:nth-child(2) path{animation-delay:.3s}
.motion-ready .scene .pair-diagram>span:nth-child(3) path{animation-delay:.6s}
.motion-ready .scene .hand{animation:write-working 12s ease-in-out infinite}
.motion-ready .scene .hint{animation:hint-arrives 12s cubic-bezier(.22,.75,.25,1) infinite;transform-origin:20% 80%}
.motion-ready .scene .reply p{animation:write-answer 12s ease-in-out infinite}
.motion-ready .scene .paper-stack .sheet,.motion-ready .scene .paper-stack::before,.motion-ready .scene .paper-stack::after,.motion-ready .scene .pair-diagram>span,.motion-ready .scene .pair-diagram path,.motion-ready .scene .hand,.motion-ready .scene .hint,.motion-ready .scene .reply p{animation-play-state:paused}
.motion-ready .scene.hero-motion-running .paper-stack .sheet,.motion-ready .scene.hero-motion-running .paper-stack::before,.motion-ready .scene.hero-motion-running .paper-stack::after,.motion-ready .scene.hero-motion-running .pair-diagram>span,.motion-ready .scene.hero-motion-running .pair-diagram path,.motion-ready .scene.hero-motion-running .hand,.motion-ready .scene.hero-motion-running .hint,.motion-ready .scene.hero-motion-running .reply p{animation-play-state:running}
@keyframes paper-settle{0%{transform:translate(-7px,14px) rotate(-4deg)}12%,86%{transform:translate(0,-3px) rotate(.5deg)}94%,100%{transform:translate(-7px,14px) rotate(-4deg)}}
@keyframes paper-back-one{0%,100%{transform:translate(3px,6px) rotate(1deg)}15%,84%{transform:translate(7px,9px) rotate(4deg)}}
@keyframes paper-back-two{0%,100%{transform:translate(-2px,3px) rotate(-1deg)}18%,84%{transform:translate(-5px,4px) rotate(-4deg)}}
@keyframes pair-settle{0%,5%,100%{transform:translateY(9px) rotate(-4deg)}17%,90%{transform:translateY(0) rotate(0)}}
@keyframes draw-pair{0%,5%{stroke-dashoffset:1}21%,88%{stroke-dashoffset:0}99%,100%{stroke-dashoffset:1}}
@keyframes write-working{0%,17%,100%{clip-path:inset(0 100% 0 0)}31%,92%{clip-path:inset(0 0 0 0)}}
@keyframes hint-arrives{0%,28%,100%{opacity:.35;transform:translateY(13px) rotate(-1deg) scale(.985)}41%,89%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes write-answer{0%,44%,100%{clip-path:inset(0 100% 0 0)}62%,92%{clip-path:inset(0 0 0 0)}}
@media(max-width:360px){@keyframes paper-back-one{0%,100%{transform:translate(2px,4px) rotate(1deg)}15%,84%{transform:translate(3px,6px) rotate(2deg)}}@keyframes paper-back-two{0%,100%{transform:translate(-1px,2px) rotate(-1deg)}18%,84%{transform:translate(-2px,3px) rotate(-2deg)}}}
@media(prefers-reduced-motion:reduce){.motion-ready .demo-scroll{height:auto}.motion-ready .demo-scroll .demo-grid{height:auto;min-height:0;position:static;padding-block:60px}.motion-ready .scene *,.motion-ready .scene *::before,.motion-ready .scene *::after{animation:none!important}.motion-ready .scene .hand,.motion-ready .scene .reply p{clip-path:none}.motion-ready .scene .hint{opacity:1;transform:none}.pair-diagram path{stroke-dashoffset:0}}
/* A compact scene plays on entry; no oversized pinned scrolling area. */
/* Pin the example while the reader scrolls; the extra height is the scroll that turns the pages. */
.motion-ready .demo-scroll{height:calc(var(--story-grid-h,720px) + var(--story-travel,110svh))}
.motion-ready .demo-scroll .demo-grid{height:auto;min-height:0;position:sticky;top:var(--story-top,0px);padding-block:72px}
.story-playback{display:flex;align-items:center;gap:8px;color:#67785a;font-size:10px;margin-top:26px}
.playback-dot{width:5px;height:5px;background:#849c6a;border-radius:50%}
.story-playback button{margin-left:12px;border:0;border-bottom:1px solid #bfcab2;background:none;padding:5px 0;color:#526a43;font:inherit;cursor:pointer}
@media(max-width:720px){.motion-ready .demo-scroll .demo-grid{padding-block:42px;gap:28px}.story-playback{margin-top:16px}.motion-ready .story-deck{height:330px}}
@media(max-width:360px){.motion-ready .story-deck{height:320px}}
@media(prefers-reduced-motion:reduce){.story-playback{display:none}.motion-ready .story-deck{height:auto}}
@media(prefers-reduced-motion:reduce){.motion-ready .demo-scroll{height:auto}.motion-ready .demo-scroll .demo-grid{position:static}}