@font-face{font-family:'Paper Hand';src:url('./assets/fonts/PatrickHand-Regular.ttf') format('truetype');font-display:swap}
:root{--ink:#292e38;--gold:#edc65c;--paper:#fff;--line:#c9c3ac;--teal:#376e72;--muted:#616471;background:#eee7d2;font-family:'Trebuchet MS',Arial,sans-serif}body{background:#eee7d2}button{border:2px solid #59616a;box-shadow:1px 2px 0 #59616a;border-radius:10px;font-weight:400;background:#fffdf4}button:hover{background:#fff0b6}.primary{border:2px solid #313233;box-shadow:2px 3px 0 #313233;background:var(--gold);font-weight:700}.quiet{box-shadow:none;border:0}.topbar{height:60px;background:#2c404a;border-bottom:4px solid #ddba61;padding:6px 22px}.brand{letter-spacing:0;font-size:17px}.brand-mark{border-radius:8px;transform:rotate(-7deg);font-family:'Paper Hand',cursive;background:#efd178;font-size:34px;box-shadow:2px 2px 0 #88744c}.brand-small{letter-spacing:.2px;font-size:15px;margin-top:2px}.brand-button{box-shadow:none}.top-control{background:#fff9df;color:#263d47;border:1px solid #dbbe69;box-shadow:1px 2px #897845;min-height:36px}.top-control:hover{background:#ffefb3}.grade{font-size:12px}.lesson-screen{max-width:1600px;padding:6px 20px 12px;height:calc(100dvh - 60px);display:flex;flex-direction:column;gap:8px}.lesson-nav{min-height:37px;margin:0;gap:10px}.lesson-nav>div:not(.stars){display:flex;align-items:baseline;gap:10px}.lesson-nav h1{font-size:20px;margin:0}.lesson-kicker{font-size:11px;letter-spacing:.2px}.lesson-nav .quiet{min-height:32px}.stars{font-size:25px}.question-strip{margin:0;padding:9px 15px;border:1px solid #c6b478;border-left:5px solid #bb9640;border-radius:8px;background:#fff9e2;flex:none}.question-strip p{font-size:16px;margin:0 0 3px}.question-strip h2{font-size:18px}.question-strip .quiet{min-height:30px}.lesson-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(230px,.66fr) minmax(600px,1.66fr);gap:15px;align-items:stretch}.model-panel,.work-panel{padding:0;background:#fff;border:2px solid #393936;border-radius:17px;box-shadow:2px 4px 0 #393936;overflow:hidden;min-height:0;position:relative}.panel-heading{border-top:4px solid #cfb367;border-bottom:1px solid #e5e3de;padding:6px 12px;margin:0;min-height:36px;font-size:16px;font-weight:bold;background:#fffdf4;flex:none}.panel-heading>span:not(.eyebrow){font-size:16px;color:var(--ink)}.panel-heading>span+span{font-size:12px!important;font-weight:400}.panel-heading .quiet{min-height:25px;padding:1px 5px;font-size:12px}.model-panel{display:flex;flex-direction:column;overflow:auto}.model-panel>.visual-stage{padding:20px 15px 8px;margin:auto 0}.model-panel>.visual-caption{padding:5px 14px;margin:8px 0 16px;font-size:14px;line-height:1.35}.model-panel .coach-cue{margin:0 14px 15px;background:#e9edf7;border:1px solid #858d9b;font-size:13px}.ratio,.ratio-head{gap:5px;grid-template-columns:1fr .78fr 1fr}.ratio>div:not(.arrow){border-radius:5px;background:#f4f1e8;padding:10px 2px}.ratio b,.ratio .arrow,.fraction-part,.one-unit b,.normalize-arrow,.target-price>div,.currency-change{font-family:'Paper Hand',cursive;font-weight:400}.ratio b{font-size:30px}.ratio span{font-size:12px}.ratio .arrow{font-size:24px}.ratio .target{background:#edf4f3!important}.group-strip{gap:3px}.group{font-size:12px}.groups-model{font-size:12px}.fraction-part{height:54px}.compare-visual{gap:7px}.package-rate{padding:10px 5px;background:#f7f5ee;border:1px solid #d4d4c9;border-radius:10px}.package-given b{font-size:25px}.package-given span{font-size:12px}.one-unit{padding:8px 4px}.one-unit b{font-size:28px}.normalize-arrow{font-size:23px;padding:10px 0}.target-price>div{font-size:25px}.work-panel{display:flex;flex-direction:column}.paper-and-keys{display:grid;grid-template-columns:minmax(0,1fr) 220px;flex:1;min-height:0}.paper-writing{padding:18px 20px;min-height:0;overflow:auto;display:flex;flex-direction:column;justify-content:center;position:relative}.keypad-rail{background:#fcf0ba;border-left:2px solid #777568;padding:13px 12px;display:flex;flex-direction:column;gap:15px;min-width:0;overflow:auto}.rail-label{font-size:13px;margin:0;text-align:center;color:#595641}.keypad{display:flex;flex-direction:column;gap:15px}.operation-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;border-bottom:1px solid #ada687;padding-bottom:12px}.operation-keys .fraction-key{grid-column:span 2;width:65px}.digit-keys{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.keypad button{font-family:'Paper Hand',cursive;font-size:25px;min-width:0;min-height:42px;padding:0;background:#fffef8;border-width:2px;line-height:1.1}.edit-keys{display:flex;gap:7px;align-items:stretch}.edit-keys button{flex:1}.edit-keys button:not(:first-child){font-family:'Trebuchet MS',sans-serif;font-size:13px}.check-button{width:100%;margin:0;min-height:43px;font-size:17px}.rail-note{font-size:12px;line-height:1.4;text-align:center;color:#656049}.rail-help{margin-top:auto;display:flex;flex-direction:column;gap:8px}.rail-help button{font-size:12px;min-height:35px;padding:4px}.choices{display:flex;flex-direction:column;gap:12px;margin:0}.choices button{min-height:50px;padding:8px;font-size:16px;line-height:1.3}.work-history{font-family:'Paper Hand',cursive;font-size:30px;max-height:135px;flex:none;line-height:1.4;overflow:auto}.work-row{border:0;padding:2px 0;margin:0;gap:8px;line-height:1.35}.step-tick{font-family:'Paper Hand';font-size:21px;color:#378478}.work-row small{font-size:12px}.current-work{animation:none}.current-work h2{font-size:18px;line-height:1.35;margin:12px 0;background:#e9edf7;border:1.5px solid #7d8797;border-radius:10px;padding:10px 12px;font-weight:700}.answer-wrap{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:18px 0;position:relative}.answer-field,.equation-prefix,.writing-arrow{font-family:'Paper Hand',cursive;font-size:31px;font-weight:400}.answer-field{min-height:48px;min-width:68px;max-width:100%;border:2px solid #a78eb9;background:#faf6fd;border-radius:8px;padding:4px 9px;box-shadow:none;flex:0 1 auto;word-break:break-word}.answer-field:focus{outline:none;box-shadow:0 0 0 2px #e9e0f0}.answer-unit{font-size:13px;color:#46545b;max-width:115px}.writing-arrow{color:#498889;align-self:center;font-size:28px}.placeholder{font-size:30px;color:#b298c0}.insert-fraction{font-size:12px;padding:6px;min-height:34px}.editable-fraction button{font-family:'Paper Hand',cursive;box-shadow:none;min-height:25px;font-size:25px}.ink-coach{display:flex;align-items:start;gap:9px;margin:14px 0 0;padding:10px 12px;background:#eef4f1;border:1px solid #a3bcb1;border-radius:9px;font-size:14px;line-height:1.35}.ink-coach p{margin:4px 0 0}.ink-coach strong{font-size:15px}.coach-mark{font-family:'Paper Hand',cursive;font-size:30px;line-height:1;color:#386c68}.ink-coach.success{background:#e7f4e9;border-color:#72a987;color:#245c3b}.ink-coach.error{background:#fff0ed;border-color:#c88885;color:#853446}.ink-coach.error .coach-mark{color:#ad4653}.ink-coach.notice{background:#fff7db;border-color:#c8b567}.tap-instruction{display:block;margin-top:7px;background:#fff0ae;padding:4px 8px;border-radius:4px;font-weight:bold;color:#534318}.answer-field.needs-fix{border-color:#c96777;background:#fff3f3}.step-help{margin-top:10px;font-size:12px}.work-row:last-child{animation:ink-write .4s ease both}@keyframes ink-write{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}.demo-tap{background:#ffe18a!important;box-shadow:0 0 0 4px #d69e26!important;position:relative;z-index:1}.demo-finger{position:absolute;z-index:4;pointer-events:none;font-size:37px;line-height:1;transform:rotate(-20deg);filter:drop-shadow(1px 1px 1px #967d40)}.walkthrough-bar{display:flex;align-items:center;gap:7px;padding:7px 10px;border:2px solid #625d4b;border-radius:10px;background:#fff7d6;flex:none}.walkthrough-bar>div{flex:1}.walkthrough-bar b{font-size:13px}.walkthrough-bar small{display:block;font-size:12px;color:#636451;margin-top:3px}.walkthrough-bar button{font-size:13px;min-height:34px;padding:5px 9px}.walkthrough-bar .speed-control{margin:0;gap:5px;font-size:12px}.walkthrough-bar select{font-size:12px;min-height:30px;padding:2px}.demo-progress{width:100%;height:5px;accent-color:#aa8540;flex:none}.problem-done{padding:5px 0;text-align:center}.problem-done h2{font-size:24px;margin:8px 0}.problem-done p{font-size:15px;line-height:1.45}.done-check{display:inline-block;font-family:'Paper Hand';color:#237766;font-size:48px;border:3px solid #408674;border-radius:50%;width:62px;height:62px;line-height:1.1;animation:celebrate .55s ease}.big-stars{font-size:35px;margin:12px 0}.finished-rail{justify-content:center;align-items:center;text-align:center;color:#4c604b;font-family:'Paper Hand';font-size:23px}.finished-rail img{width:100%;max-height:210px;object-fit:contain}.inline-example{padding:12px 15px;overflow:auto}.example-work{font-family:'Paper Hand',cursive!important;font-size:29px!important}.home{background:transparent;padding-top:35px}.welcome h1{font-family:'Trebuchet MS',sans-serif}.preview-model,.lesson-card{background:#fff9e3;border:2px solid #6a685d;box-shadow:2px 3px 0 #8e886e}.lesson-number{background:#eadaad;color:#4f5149}.preview-model{border-radius:15px}.path-preview{font-family:'Paper Hand';font-size:23px}.lesson-title{font-weight:bold}.top-actions{gap:10px}@keyframes celebrate{0%{transform:scale(.6) rotate(-12deg);opacity:0}65%{transform:scale(1.12) rotate(3deg)}100%{transform:none;opacity:1}}
@media(max-width:1150px) and (min-width:761px){.lesson-screen{padding:6px 12px 12px;gap:7px}.lesson-layout{grid-template-columns:minmax(215px,.6fr) minmax(560px,1.7fr);gap:12px}.paper-and-keys{grid-template-columns:minmax(0,1fr) 195px}.paper-writing{padding:12px 14px}.keypad-rail{padding:11px 9px;gap:12px}.keypad button{min-height:42px}.digit-keys{gap:5px}.operation-keys{gap:6px}.model-panel>.visual-stage{padding:16px 9px 5px}.ratio b{font-size:26px}.ratio .arrow{font-size:22px}.ratio span{font-size:11px}.lesson-kicker{display:none}.walkthrough-bar small{display:none}.current-work h2{font-size:17px}.answer-field,.equation-prefix{font-size:28px}.ink-coach{font-size:13px;padding:8px}.ink-coach strong{font-size:14px}.work-history{font-size:27px;max-height:115px}.package-given b{font-size:21px}.one-unit b{font-size:26px}.package-given span{font-size:11px}.normalize-arrow{font-size:21px}.compare-visual{gap:5px}}
@media(min-width:761px) and (max-height:740px){.lesson-screen{gap:6px}.question-strip{padding:6px 12px}.question-strip p{font-size:15px}.question-strip h2{font-size:17px}.panel-heading{min-height:32px;padding:4px 10px}.paper-writing{padding:10px 15px}.keypad-rail{gap:10px;padding-top:10px}.work-history{max-height:85px;font-size:27px}.current-work h2{font-size:16px;margin:7px 0;padding:8px 10px}.answer-wrap{margin:12px 0}.ink-coach{margin-top:9px;font-size:13px;padding:8px 10px}.ink-coach strong{font-size:14px}.tap-instruction{margin-top:5px}.keypad{gap:11px}.keypad button{min-height:39px}.rail-help button{min-height:31px}.model-panel .visual-caption{font-size:12px;margin:5px 0 10px}.walkthrough-bar{padding:5px 8px}.model-panel>.visual-stage{padding-top:12px}.lesson-nav{min-height:32px}.walkthrough-bar small{display:none}.rail-note{font-size:11px}.step-help{margin-top:5px;min-height:29px}}
@media(max-width:900px) and (min-width:761px){.lesson-layout{grid-template-columns:210px minmax(0,1fr)}.paper-and-keys{grid-template-columns:minmax(0,1fr) 175px}.paper-writing{padding:10px}.lesson-nav h1{font-size:18px}.walkthrough-bar>div{display:none}.ratio b{font-size:23px}.ratio .arrow{font-size:20px}.answer-field,.equation-prefix{font-size:25px}.keypad button{font-size:23px}}
@media(max-width:760px){.topbar{height:65px;padding:6px 12px}.brand{font-size:13px}.brand-small{font-size:11px}.top-actions{gap:6px}.top-control{font-size:11px;padding:5px}.lesson-screen{height:auto;min-height:calc(100dvh - 65px);padding:8px 12px;gap:10px}.lesson-nav>div:not(.stars){display:block}.lesson-kicker{display:none}.lesson-nav h1{font-size:18px}.lesson-layout{display:flex;flex-direction:column;gap:12px}.model-panel>.visual-stage{padding:12px;max-width:450px;margin:auto;width:100%}.model-panel>.visual-caption{margin:0;padding:5px 12px 10px}.model-panel .coach-cue{display:none}.paper-and-keys{grid-template-columns:minmax(0,1fr) 155px}.paper-writing{padding:12px 10px}.keypad-rail{padding:10px 8px;gap:12px}.keypad button{min-height:38px;font-size:22px}.digit-keys{gap:5px}.operation-keys{gap:5px}.edit-keys{flex-wrap:wrap;gap:6px}.edit-keys button:not(:first-child){font-size:12px;flex-basis:40%}.edit-keys button:first-child{flex-basis:100%}.rail-help button{font-size:11px;padding:4px}.current-work h2{font-size:15px;padding:8px}.answer-field,.equation-prefix{font-size:24px}.answer-unit{font-size:12px}.writing-arrow{display:none}.ink-coach{font-size:12px;padding:8px;gap:5px}.ink-coach strong{font-size:13px}.coach-mark{font-size:23px}.work-history{font-size:25px;max-height:150px}.walkthrough-bar{flex-wrap:wrap;gap:6px}.walkthrough-bar>div{flex-basis:100%}.walkthrough-bar small{display:none}.walkthrough-bar button{font-size:12px}.walkthrough-bar .speed-control{margin-left:auto}.demo-progress{height:6px}.work-panel{min-height:430px}.finished-rail img{max-height:150px}.finished-rail{font-size:20px}.question-strip p{font-size:14px}.question-strip h2{font-size:17px}.topbar .grade{display:none}.sunny{width:110px}.home{padding-top:20px}.demo-finger{font-size:30px}}
.home .welcome{grid-column:1/-1;min-height:330px;display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;max-width:960px;width:100%;margin:0 auto}.welcome>div{grid-column:2;grid-row:1}.welcome .home-coaches{grid-column:1;grid-row:1;width:auto;height:330px;max-height:none;max-width:100%;justify-self:center;margin:0;border-radius:14px}.welcome h1{font-size:clamp(34px,4vw,51px)}.home .preview-model{grid-column:1/-1;padding:17px 25px;display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.preview-model .section-heading{grid-column:1}.preview-model h2{margin:8px 0}.preview-model .path-preview{grid-column:2;grid-row:1/4;margin:0}.preview-model .progress-track{grid-column:1}.preview-model .model-caption{grid-column:1;text-align:left;margin:10px 0 0;font-size:13px}.home .lessons-section{margin-top:0}@media(max-width:760px){.home .welcome{grid-template-columns:100px 1fr;gap:14px;min-height:230px}.welcome .home-coaches{height:210px;border-radius:8px}.welcome h1{font-size:32px}.welcome p{font-size:14px}.welcome .eyebrow{font-size:10px!important;letter-spacing:.6px}.home .preview-model{display:block;padding:17px}.preview-model .path-preview{margin:14px 0}.home .welcome .home-actions button{font-size:13px}.home .welcome .save-note{font-size:11px!important}}
.model-panel .coach-cue{display:none}
@media(min-width:761px) and (max-height:680px){.model-panel>.visual-stage{padding:10px 12px 4px}.fraction-model{margin-bottom:10px}.fraction-part{height:34px}.fraction-part .fraction{font-size:18px}.bar-label{font-size:12px;margin-bottom:6px}.ratio b{font-size:25px}.ratio>div:not(.arrow){padding:6px 2px}.ratio .fraction{font-size:23px}.ratio-head{margin-bottom:6px}.groups-model{margin-bottom:10px}.group{min-height:23px}.model-panel>.visual-caption{font-size:12px;padding:4px 10px;margin:5px 0}.normalize-arrow{padding:6px 0}.package-given{margin-top:8px}.one-unit{padding:7px 4px}.best-label{font-size:11px;margin-top:7px}.journey{margin-bottom:12px}.speed-tracks{margin-bottom:10px}.rail-note{display:none}.rail-help{gap:6px}.keypad-rail{gap:9px}.walkthrough-bar button{min-height:30px}}
.example-step-title{font-size:15px;font-weight:bold;border-top:1px solid #d6d5cf;padding-top:13px;margin-top:14px}.example-ink{font-family:'Paper Hand',cursive;font-size:29px;max-height:185px;overflow:auto;margin:15px 0}.example-ink .work-row{animation:ink-write .4s ease}.example-hint{background:#edf3f1;padding:9px;border-radius:7px;font-size:13px!important}.example-buttons{display:flex;gap:8px;flex-wrap:wrap}.example-buttons button{font-size:13px;min-height:36px;padding:6px 9px}.inline-example .small-note{font-size:11px!important}@media(min-width:761px) and (max-height:740px){.inline-example{padding:10px 12px}.inline-example>p{font-size:13px;margin:8px 0}.inline-example>strong{font-size:14px}.example-step-title{font-size:13px;padding-top:8px;margin-top:8px}.example-ink{font-size:25px;max-height:110px;margin:10px 0}.example-ink .work-row{font-size:25px}.example-hint{padding:7px}.example-buttons button{min-height:31px}}
.voice-status{font-size:12px;max-width:185px;line-height:1.25;color:#fff2be}.voice-status[data-status="error"]{color:#ffdfd4}.voice-description{font-size:14px;color:#376e72}.voice-status[hidden]{display:none}@media(max-width:760px){.voice-status{position:absolute;top:65px;right:8px;max-width:230px;background:#2c404a;border-radius:5px;padding:6px 9px;z-index:10}}
/* Paired quantities advance DOWN the page, matching the supplied whiteboard. */
.vertical-rate{font-family:'Paper Hand',cursive;display:flex;flex-direction:column;gap:0;max-width:460px;width:100%;margin:8px auto;color:#243d56}.rate-line{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);align-items:center;gap:8px;min-height:47px}.rate-line>div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.rate-line b{font-size:30px;font-weight:400;line-height:1.1}.rate-line small{font:12px 'Trebuchet MS',sans-serif;color:#52616c;text-align:center;line-height:1.25}.for-word{font-size:20px;text-align:center}.unit-line{background:#edf5f2;border-radius:8px;padding:5px 0}.new-line{background:#fff4cd;border-radius:8px;padding:5px 0}.rate-move{display:grid;grid-template-columns:1fr 30px 1fr;gap:8px;color:#377c74;min-height:45px}.rate-move>span{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:21px;line-height:1}.rate-move i{font-size:24px;line-height:.9;font-style:normal}.rate-move .fraction{font-size:17px;display:inline-flex}.rate-move>span:first-child:has(.fraction),.rate-move>span:last-child:has(.fraction){flex-direction:row;gap:4px;flex-wrap:wrap}.rate-chain{border-bottom:1px solid #d9dfdb;padding-bottom:6px;margin-bottom:6px}.rate-chain:last-child{border-bottom:0;margin-bottom:0}.rate-chain h3{font:700 13px 'Trebuchet MS',sans-serif;margin:0 0 5px;color:#52616c}.rate-conclusion{font:700 14px 'Trebuchet MS',sans-serif;text-align:center;color:#2d7058;margin-top:7px}.previous-rate{font:14px 'Trebuchet MS',sans-serif;margin:0 0 9px;padding-bottom:7px;border-bottom:1px solid #d9dfdb}.round-note{font:12px 'Trebuchet MS',sans-serif;text-align:right;margin:5px 0}.rate-entry{max-width:100%}.rate-entry .answer-wrap{margin:0;justify-content:center;gap:4px}.rate-entry .answer-field{min-height:39px;min-width:62px;font-size:29px;padding:0 6px}.rate-entry .insert-fraction{font-size:11px}.rate-entry .editable-fraction button{font-size:23px}.paper-writing{justify-content:flex-start;gap:0;padding-top:8px}.current-work h2{margin-top:0}.current-work>.answer-wrap{justify-content:center;margin:8px 0}.current-work>.answer-wrap .answer-field{font-size:27px;min-height:40px}.current-work .ink-coach{margin-top:8px}.model-panel>.visual-stage{margin:4px 0 auto}.model-panel .vertical-rate{max-width:330px}.model-panel>.visual-caption{margin-top:auto}.example-ink{max-height:none;overflow:visible}.example-ink .vertical-rate{font-size:inherit}.example-ink .rate-line b{font-size:27px}.model-panel .fraction-part{height:34px}.model-panel .fraction-model{margin-bottom:8px}.model-panel .fraction-part .fraction{font-size:18px}.problem-done .done-check{width:45px;height:45px;font-size:34px}.problem-done h2{font-size:21px}.problem-done p{margin:7px 0}.problem-done .big-stars{margin:7px 0;font-size:29px}@media(min-width:761px) and (max-height:740px){.rate-line{min-height:39px;gap:5px}.rate-line b{font-size:27px}.rate-move{min-height:35px}.rate-move>span{font-size:20px}.rate-move i{font-size:20px}.vertical-rate{margin:5px auto}.rate-line small{font-size:11px}.model-panel>.visual-stage{padding-top:8px}.ink-coach p{margin-top:2px}.current-work h2{font-size:15px}.current-work>.answer-wrap{margin:5px 0}.paper-writing{padding:8px 12px}.rate-entry .answer-field{font-size:26px;min-height:35px}.rate-chain{padding-bottom:4px;margin-bottom:4px}.rate-chain h3{font-size:12px;margin-bottom:3px}.previous-rate{font-size:12px;margin-bottom:5px;padding-bottom:5px}.round-note{font-size:11px}.example-ink{max-height:none}}
@media(max-width:760px){.rate-line{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:3px}.rate-line b{font-size:24px}.rate-line small{font-size:11px}.for-word{font-size:17px}.rate-move{grid-template-columns:1fr 20px 1fr;gap:3px}.rate-entry .answer-field{font-size:24px;min-width:42px}.current-work>.answer-wrap .answer-field{font-size:23px}.current-work h2{font-size:14px}.paper-writing{padding:10px 7px}}
.rate-line small{font-size:14px;line-height:1.2}.rate-line>div{gap:2px}.rate-chain h3{font-size:14px}.round-note{font-size:13px}.rate-move{min-height:38px}.rate-line{min-height:47px}@media(min-width:761px) and (max-height:740px){.rate-line{min-height:44px}.rate-line b{font-size:25px}.rate-line small{font-size:13px}.rate-move{min-height:33px}.rate-chain h3{font-size:13px}.current-work .ink-coach{font-size:13px}.round-note{font-size:12px}}
/* Same paper feedback structure; linked colors carry meaning through the story. */
:root{--quantity-ink:#175f63;--amount-ink:#673b76}
.story-quantity,.story-amount{background:transparent;font-weight:700;border-radius:3px;padding:0 2px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.story-quantity,.quantity-cell,.rate-move>span:first-child{color:var(--quantity-ink)}
.story-amount,.amount-cell,.rate-move>span:last-child{color:var(--amount-ink)}
.quantity-cell small{color:var(--quantity-ink)}.amount-cell small{color:var(--amount-ink)}
.part-line{background:#edf3fa;border:1px dashed #9ab2c3;border-radius:8px;padding:4px 0}
.part-caption{font-size:14px;margin:6px 0;color:var(--amount-ink)}
.reason-transition{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px;background:#fffdf0;border-radius:10px;color:var(--quantity-ink)}
.reason-transition span{display:flex;align-items:center;gap:6px}.reason-transition b{font:25px 'Paper Hand',cursive;font-weight:400}.reason-transition small{font-size:14px}.reason-transition i{font-size:20px;font-style:normal;line-height:1}
.quantity-guidance .given-line,.quantity-guidance .unit-line,.quantity-guidance .part-line{outline:1px solid #a5bbb5;outline-offset:1px}
.quantity-guidance .quantity-cell b,.quantity-guidance .amount-cell b{background:#f4f6de;border-radius:5px;padding:0 6px}
.stars{position:relative;white-space:nowrap;padding-bottom:12px}.stars small{position:absolute;bottom:0;left:0;right:0;text-align:center;font:11px 'Trebuchet MS',sans-serif;color:#46545b}
.rail-help button,.panel-heading .quiet{font-size:14px}.rail-note{font-size:13px}.step-help{display:none}.reason-transition~.choices button{font:27px 'Paper Hand',cursive;min-height:48px}
@media(min-width:761px) and (max-height:740px){.rate-line{min-height:40px}.rate-move{min-height:29px}.rate-line b{font-size:24px}.reason-transition{padding:5px}.reason-transition b{font-size:23px}.reason-transition~.choices{gap:8px}.rail-help button{font-size:13px;min-height:34px}.current-work .ink-coach{font-size:13px}.current-work h2{padding:7px 10px}.rate-entry .answer-field{min-height:33px}}
@media(max-width:760px){.rail-help button{font-size:12px}.reason-transition span{flex-wrap:wrap;justify-content:center}.question-strip mark{padding:0}.reason-transition small{font-size:13px}}
/* Keep every operation on the existing vertical chain, even on short displays. */
.rate-entry .answer-field{white-space:nowrap;font-size:26px}
@media(min-width:761px) and (max-height:680px){
 .work-panel .rate-line>div{flex-direction:row;gap:5px;flex-wrap:wrap}
 .work-panel .rate-line b{font-size:24px}.work-panel .rate-line .fraction{font-size:18px;line-height:1}
 .work-panel .rate-line .fraction>span{padding:.03em .12em}
 .work-panel .rate-line{min-height:36px}.work-panel .rate-move{min-height:26px}
 .work-panel .rate-chain h3{margin-bottom:2px}.work-panel .rate-entry .answer-field{font-size:24px;min-height:32px}
 .work-panel .vertical-rate{margin:3px auto}.work-panel .ink-coach{padding:6px 8px;margin-top:5px}
 .model-panel .rate-line .fraction{font-size:18px}.model-panel .rate-line .fraction>span{padding:.02em .1em}
 .model-panel .rate-line{min-height:36px}.model-panel .rate-move{min-height:25px}
 .current-work h2{margin-bottom:6px}.paper-writing{padding-top:5px}
}
/* Focused entry: one current lesson, then optional readiness or earlier-skill review. */
.entry-home{max-width:1100px;margin:auto;padding:35px 28px;min-height:calc(100dvh - 60px);display:flex;flex-direction:column;justify-content:center;gap:24px}
.entry-welcome{display:grid;grid-template-columns:310px 1fr;gap:48px;align-items:center}.entry-welcome>img{width:100%;max-height:410px;object-fit:contain;border-radius:16px}
.entry-welcome h1{font-size:clamp(32px,4vw,49px);line-height:1.1;margin:10px 0 12px}.entry-welcome>div>p:not(.eyebrow){font-size:18px;line-height:1.45;margin:0 0 20px}
.entry-options{display:flex;flex-direction:column;gap:14px}.entry-card{display:flex;align-items:center;gap:18px;text-align:left;padding:18px 20px;border:2px solid #3c4141;box-shadow:3px 4px 0 #3c4141;border-radius:15px;background:#fffdf4;min-height:105px}.primary-entry{background:#ffe5a0}.entry-card:hover{transform:translateY(-1px);background:#fff0ba}.entry-card>span:last-child{display:flex;flex-direction:column;gap:5px}.entry-card strong{font-size:22px}.entry-card small{font-size:14px;font-weight:400;line-height:1.35}.entry-skill{font-size:17px;font-weight:400}.entry-icon{font:36px 'Paper Hand',cursive;display:grid;place-items:center;width:52px;height:52px;border:2px solid #817d68;border-radius:11px;background:#fffaf0;flex:none}
.entry-welcome .save-note{font-size:13px!important;margin:17px 0 0!important;color:#576468}.entry-progress{padding:18px 22px;border-top:1px solid #bdb598;max-width:900px;width:100%;margin:0 auto}.entry-progress>div:first-child{display:flex;justify-content:space-between;gap:12px;font-size:15px}.entry-progress .progress-track{height:9px;margin-top:10px}.entry-links{display:flex;gap:18px;justify-content:center;margin-top:7px}.entry-links button{font-size:14px}.review-browser{display:flex;align-items:center;justify-content:center;gap:20px;border-top:1px solid #bdb598;padding-top:15px;margin-top:8px}.review-browser>div{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:230px}.review-browser small{font-size:13px}.review-browser strong{font-size:18px}.review-browser>button{min-width:42px}.review-browser>div>button{font-size:14px;min-height:36px}
@media(min-width:761px) and (max-height:740px){.entry-home{padding:22px 28px;gap:16px}.entry-welcome>img{max-height:340px}.entry-welcome h1{font-size:38px}.entry-card{min-height:92px;padding:14px 18px}.entry-progress{padding-top:13px;padding-bottom:5px}.entry-welcome>div>p:not(.eyebrow){margin-bottom:14px}.entry-options{gap:12px}}
@media(max-width:760px){.entry-home{padding:25px 18px;gap:18px;justify-content:flex-start}.entry-welcome{grid-template-columns:1fr;gap:15px}.entry-welcome>img{max-height:180px}.entry-welcome h1{font-size:34px}.entry-welcome>div>p{font-size:16px!important}.entry-card{padding:14px;gap:12px;min-height:90px}.entry-card strong{font-size:20px}.entry-icon{width:42px;height:42px;font-size:30px}.entry-progress{padding:14px 0}.entry-progress>div:first-child{flex-direction:column;gap:5px}.review-browser{gap:8px}.review-browser>div{min-width:0;flex:1;text-align:center}.entry-links{gap:7px;flex-wrap:wrap}}
@media(min-width:761px) and (max-height:740px){.entry-home:has(.review-browser){padding-top:15px;padding-bottom:15px;gap:10px}.entry-home:has(.review-browser) .entry-welcome>img{max-height:260px}.entry-home:has(.review-browser) .entry-welcome h1{font-size:32px;margin:7px 0}.entry-home:has(.review-browser) .entry-welcome>div>p:not(.eyebrow){margin-bottom:10px;font-size:16px}.entry-home:has(.review-browser) .entry-card{min-height:77px;padding:10px 16px}.entry-home:has(.review-browser) .entry-card strong{font-size:20px}.entry-home:has(.review-browser) .entry-welcome .save-note{margin-top:10px!important}.entry-home:has(.review-browser) .review-browser{padding-top:9px;margin-top:3px}.entry-home:has(.review-browser) .review-browser>div{gap:5px}}
/* All animation settings use the same slower teaching pace. */
.fraction-part{transition-duration:calc(.8s * var(--motion-factor,2))}
.distance-fill{transition-duration:calc(1.6s * var(--motion-factor,2))}
.work-row:last-child,.example-ink .work-row{animation-duration:calc(.4s * var(--motion-factor,2))}
.done-check{animation-duration:calc(.55s * var(--motion-factor,2))}
/* Rounded links connect the outside edges of each pair of quantities. */
.rounded-move{min-height:46px;position:relative;z-index:1}
.rounded-move>.curve-side{display:flex;position:relative;min-height:46px;align-items:center;justify-content:center;flex-direction:column!important;overflow:visible}
.rounded-arrow{position:absolute;top:-18px;left:calc(50% - 73px);width:70px;height:calc(100% + 36px);overflow:visible;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.curve-side.right .rounded-arrow{left:auto;right:calc(50% - 73px);transform:scaleX(-1)}
.curve-label{font:22px 'Paper Hand',cursive;padding:2px 4px;position:relative;margin-left:22px;white-space:nowrap}
.curve-side.right .curve-label{margin-left:0;margin-right:22px}
.curve-side[data-revealed="false"] .rounded-arrow{opacity:.16;stroke-dasharray:3 5}.curve-side[data-revealed="false"] .curve-label{color:#85938f}
.rounded-move>.same-quantity{font:13px 'Trebuchet MS',sans-serif;align-self:center;text-align:center}
.transition-curve{position:relative;display:block!important;width:60px;height:27px;align-self:center}.transition-curve .rounded-arrow{top:-8px;left:0;width:35px;height:44px}
.reason-transition{gap:3px}.pause-rail{justify-content:center;align-items:center;text-align:center;gap:13px}.pause-rail p{font-size:15px;margin:0}.pause-rail strong{font-size:19px}.pause-check{font:44px 'Paper Hand';color:#2c6b51}.pause-rail button{width:100%;font-size:16px;min-height:48px}
@media(min-width:761px) and (max-height:740px){.rounded-move,.rounded-move>.curve-side{min-height:35px}.curve-label{font-size:20px}.rounded-arrow{top:-14px;height:calc(100% + 28px);width:58px;left:calc(50% - 62px)}.curve-side.right .rounded-arrow{right:calc(50% - 62px)}.pause-rail strong{font-size:17px}.pause-rail button{font-size:14px}}
@media(max-width:760px){.rounded-arrow{width:38px;left:calc(50% - 42px)}.curve-side.right .rounded-arrow{right:calc(50% - 42px)}.curve-label{font-size:18px;margin-left:18px}.curve-side.right .curve-label{margin-right:18px}.pause-rail button{font-size:13px}.pause-rail strong{font-size:16px}}
/* Equation Skill Builder layout: example | student paper | keypad. */
.lesson-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);gap:16px}
.paper-and-keys{grid-template-columns:minmax(0,1fr) 210px}
.question-strip{padding:10px 16px;border-width:2px;border-left-width:7px;background:#fff9dc}
.question-strip p{font-size:20px;line-height:1.3;margin:0 0 4px}
.question-strip h2{font-size:27px;line-height:1.2;margin:0;color:#202b35;font-weight:800}
.question-strip .quiet{font-size:16px;min-width:50px}
.paper-writing,.example-paper{padding:14px 12px;overflow:auto;min-height:0}
.example-panel{overflow:hidden}.example-paper{flex:1}
.example-story{font-size:16px;line-height:1.3;margin:0 0 5px}.example-question{font-size:18px;line-height:1.25;margin:0 0 12px}
.example-prompt,.current-work h2,.demo-waiting h2{font:700 21px/1.3 'Trebuchet MS',sans-serif;background:#e9edf7;border:2px solid #7d8797;border-radius:11px;padding:10px;margin:12px 0 0;text-align:center;color:#202d39}
.example-feedback{font:24px/1.2 'Paper Hand',cursive;color:#376e72;text-align:center;margin:12px 0}
.example-paper .visual-stage{padding:0;margin:0}.example-paper .vertical-rate{max-width:none}
.rail-help{margin:0;flex-direction:row;gap:7px}.rail-help button{flex:1;font-size:14px;min-height:36px}
.keypad-rail{gap:12px;padding:12px 10px}.keypad-rail .rail-label{font-size:14px}
.demo-controls{display:flex;flex-direction:column;gap:8px}.demo-controls button{font-size:14px;min-height:35px}.demo-controls .speed-control{margin:0;font-size:14px;justify-content:center}
.demo-waiting p{text-align:center;font-size:17px;line-height:1.3}.demo-waiting .vertical-rate{opacity:.55}
.demo-progress{margin:0;border:0;height:6px}.finished-rail button{width:100%;font:700 17px 'Trebuchet MS',sans-serif;min-height:50px}
/* Curves occupy their own row and gutter, never a value or answer box. */
.vertical-rate{max-width:none;margin:8px auto}.rate-line{min-height:48px;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:4px;padding:5px 0}
.rate-line>div{flex-direction:column!important;gap:2px}.rate-line b{font-size:30px}.rate-line small{font-size:14px;line-height:1.15}
.rounded-move{height:58px;min-height:58px;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:4px;z-index:auto}
.rounded-move>.curve-side{display:grid!important;grid-template-columns:30px minmax(0,1fr) 30px;min-height:0;height:100%;align-items:center;justify-items:center;gap:0;overflow:hidden}
.curve-side>.rounded-arrow{grid-column:1;grid-row:1;position:static;top:auto;left:auto;right:auto;width:26px;height:50px;overflow:hidden;transform:none;stroke-width:3}
.curve-side.right>.rounded-arrow{grid-column:3;grid-row:1;position:static;left:auto;right:auto;transform:scaleX(-1)}
.curve-side>.curve-label,.curve-side.right>.curve-label,.curve-side>.operation-entry,.curve-side>.future-operation{grid-column:2;grid-row:1;margin:0;padding:0;max-width:100%;font:26px 'Paper Hand',cursive;white-space:nowrap}
.curve-side>.future-operation{color:#a1a9a6;font-size:22px}
.operation-entry .answer-wrap{margin:0;justify-content:center;gap:0}.operation-entry .answer-field{font-size:26px;min-width:50px;min-height:38px;padding:1px 4px;width:max-content;max-width:100%;white-space:nowrap}
.rate-entry .answer-field{font-size:28px;min-height:38px;min-width:62px}.rate-entry .answer-wrap{margin:0}
.model-panel .rate-line,.work-panel .rate-line{min-height:48px}.model-panel .rate-line b,.work-panel .rate-line b{font-size:30px}.model-panel .rate-line .fraction,.work-panel .rate-line .fraction{font-size:23px;line-height:1}
.model-panel .rate-line .fraction>span,.work-panel .rate-line .fraction>span{padding:.03em .12em}
.ink-coach{font-size:14px;margin-top:10px;padding:8px 10px}.ink-coach strong{font-size:15px}.tap-instruction{font-size:14px}
.panel-heading>span:not(.eyebrow){font-size:18px}.panel-heading>span+span{font-size:12px!important}
@media(min-width:761px) and (max-height:740px){
 .lesson-screen{gap:6px;padding-top:4px}.question-strip{padding:7px 12px}.question-strip p{font-size:18px}.question-strip h2{font-size:24px}
 .paper-writing,.example-paper{padding:8px 10px}.example-prompt,.current-work h2,.demo-waiting h2{font-size:19px;padding:7px 8px;margin-top:8px}
 .model-panel .rate-line,.work-panel .rate-line,.rate-line{min-height:40px;padding:3px 0}.model-panel .rate-line b,.work-panel .rate-line b{font-size:27px}.rate-line small{font-size:13px}
 .rounded-move{height:46px;min-height:46px}.curve-side>.rounded-arrow{height:40px;width:25px}.curve-side>.curve-label{font-size:24px}
 .operation-entry .answer-field{font-size:24px;min-height:34px}.rate-entry .answer-field{font-size:26px;min-height:34px}
 .keypad-rail{gap:8px;padding:9px}.keypad{gap:9px}.keypad button{min-height:37px}.operation-keys{padding-bottom:8px}.demo-controls{gap:5px}.demo-controls button{min-height:30px}
 .example-story{font-size:15px}.example-question{font-size:17px;margin-bottom:8px}.example-feedback{font-size:22px;margin:7px 0}.ink-coach{margin-top:7px;padding:6px 8px}
 .example-paper .fraction-model{display:none}.rail-help button{font-size:13px;padding:3px;min-height:32px}
}
@media(min-width:761px) and (max-width:1100px){
 .lesson-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:12px}.paper-and-keys{grid-template-columns:minmax(0,1fr) 174px}
 .paper-writing,.example-paper{padding-left:8px;padding-right:8px}.curve-side>.rounded-arrow{width:22px}.rounded-move>.curve-side{grid-template-columns:25px minmax(0,1fr) 25px}
 .curve-side>.curve-label,.operation-entry .answer-field{font-size:22px}.keypad-rail{padding:8px}.digit-keys{gap:5px}.keypad button{font-size:23px}.edit-keys button:not(:first-child){font-size:12px}
 .rail-help{flex-direction:column;gap:5px}.question-strip p{font-size:18px}.question-strip h2{font-size:24px}
}
@media(max-width:760px){
 .lesson-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}.example-panel{max-height:420px}.paper-and-keys{grid-template-columns:minmax(0,1fr) 155px}
 .question-strip p{font-size:18px}.question-strip h2{font-size:24px}.question-strip{padding:9px}.question-strip .quiet{min-width:35px;font-size:14px}
 .paper-writing,.example-paper{padding:10px 8px}.example-prompt,.current-work h2,.demo-waiting h2{font-size:18px}.rounded-move>.curve-side{grid-template-columns:20px minmax(0,1fr) 20px}.curve-side>.rounded-arrow{width:18px}
 .curve-side>.curve-label,.operation-entry .answer-field{font-size:21px}.operation-entry .answer-field{min-width:42px}.rail-help{flex-direction:column}.model-panel .rate-line b,.work-panel .rate-line b{font-size:26px}
}
.rounded-arrow path{vector-effect:non-scaling-stroke;stroke-width:2.5px}
.question-strip h2{font-size:28px}
@media(max-width:760px){.question-strip h2{font-size:24px}}
/* Center the complete prompt, keeping Read outside the centered text column. */
.question-strip{position:relative;display:block;text-align:center;padding-left:70px;padding-right:70px}
.question-strip>div{width:100%;text-align:center}.question-strip p,.question-strip h2{text-align:center}
.question-strip>button{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
/* Arrows are anchored to the content edge by arrow-layout.mjs, not the panel edge. */
.rounded-move>.curve-side{position:relative;display:flex!important;align-items:center;justify-content:center;overflow:hidden}
.curve-side>.rounded-arrow,.curve-side.right>.rounded-arrow{position:absolute;left:calc(50% - 85px);right:auto;top:3px;width:30px;height:calc(100% - 6px);grid-column:auto;grid-row:auto}
.curve-side.right>.rounded-arrow{transform:scaleX(-1)}
.curve-side>.operation-entry{min-width:0;max-width:calc(100% - 76px)}
.curve-side>.curve-label,.curve-side>.future-operation{margin:0;padding:0}
.operation-entry .answer-field{overflow-x:auto;max-width:100%}
/* Match the reference's visible, independently saved audio switches. */
.topbar{display:grid;grid-template-columns:1fr auto 1fr;gap:12px}.topbar .brand{justify-self:center}.topbar .top-actions{justify-self:end}
.audio-controls{display:flex;align-items:center;gap:5px;position:relative}
.audio-controls button{display:flex;align-items:center;gap:4px;background:#fff8e6;color:#29384d;border:2px solid #536781;border-radius:8px;padding:5px 8px;font-size:14px;white-space:nowrap;min-height:34px;box-shadow:none}
.audio-controls button[aria-pressed='true']{background:#245e62;color:white;border-color:#9bd9d2}
.audio-controls .audio-label{font-size:12px}.audio-controls .audio-state{font-size:11px;opacity:.85}.audio-controls [aria-hidden]{font-size:21px}
.audio-status:not([hidden]){position:absolute;top:100%;left:0;z-index:80;font-size:13px;background:#fff8e6;color:#704025;max-width:250px;padding:5px}
.audio-mixer{border:1px solid #bbb3cb;border-radius:10px;padding:12px;margin:14px 0}.audio-mixer legend{font-weight:bold}.audio-mixer label{display:grid;grid-template-columns:1fr auto;gap:7px;margin:9px 0}.audio-mixer input{grid-column:1/-1;width:100%}.audio-mixer select{min-width:160px}
/* One full-screen demonstration, then a guided walkthrough in the same workspace. */
.teaching-active .topbar{display:none}
.teaching-screen{position:fixed;inset:0;z-index:20;height:100dvh;max-width:none;width:100%;padding:10px 18px;gap:9px;background:#e7e2f2;overflow:auto}
.teaching-screen.guided{background:#e3eef0}
.teaching-screen>*{width:100%;max-width:1120px;margin-left:auto;margin-right:auto}
.teaching-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:7px 10px;background:#f7f2ff;border:2px solid #726384;border-radius:12px;min-height:52px}
.teaching-header>button{font-size:15px;min-height:34px;padding:5px 12px}.teaching-header>strong{font-size:17px;color:#514262}
.teaching-screen .question-strip{border-color:#aa99c1;background:#faf6ff;flex:none}.teaching-screen .question-strip h2{font-size:30px}.teaching-screen .question-strip p{font-size:20px}
.teaching-screen>.work-panel{flex:1;min-height:0;border-color:#605270;box-shadow:2px 3px 0 #605270}
.teaching-screen .panel-heading{background:#f3eef9;border-top-color:#9984af}.teaching-screen .keypad-rail{background:#efe5fc;border-left-color:#a092b3}
.teaching-screen.guided .panel-heading{background:#f0f9f8;border-top-color:#5a9d95}.teaching-screen.guided .keypad-rail{background:#e2f2ef;border-left-color:#80aaa4}
.teaching-screen .paper-and-keys{grid-template-columns:minmax(0,1fr) 250px}
.teaching-screen .paper-writing{padding:14px 28px;justify-content:center}
.teaching-screen .vertical-rate{max-width:570px;margin:12px auto}
.teaching-screen .rate-line b{font-size:36px}.teaching-screen .rate-line small{font-size:17px}.teaching-screen .rate-line{min-height:60px}
.teaching-screen .rounded-move{height:62px;min-height:62px}.teaching-screen .curve-label{font-size:30px}
.teaching-screen .rate-entry .answer-field,.teaching-screen .operation-entry .answer-field{font-size:32px;min-height:43px}
.teaching-screen .current-work h2{max-width:670px;margin:12px auto 0;font-size:24px}.teaching-screen .ink-coach{max-width:670px;margin:12px auto 0;font-size:16px}.teaching-screen .ink-coach strong{font-size:17px}
.teaching-screen .demo-progress{accent-color:#77539f;flex:none;height:6px}
.teaching-screen .keypad{gap:14px}.teaching-screen .keypad button{min-height:44px;font-size:28px}.teaching-screen .edit-keys button:not(:first-child){font-size:14px}.teaching-screen .check-button{min-height:46px;font-size:19px}
@media(min-width:761px) and (max-height:740px){
 .teaching-screen{padding:7px 14px;gap:6px}.teaching-header{min-height:44px;padding:4px 8px}.teaching-screen .question-strip{padding-top:6px;padding-bottom:6px}
 .teaching-screen .question-strip h2{font-size:27px}.teaching-screen .question-strip p{font-size:18px}.teaching-screen .paper-writing{padding:8px 20px}
 .teaching-screen .rate-line{min-height:43px}.teaching-screen .rate-line b{font-size:29px}.teaching-screen .rate-line small{font-size:14px}.teaching-screen .rounded-move{height:48px;min-height:48px}.teaching-screen .curve-label{font-size:26px}
 .teaching-screen .rate-entry .answer-field,.teaching-screen .operation-entry .answer-field{font-size:28px;min-height:35px}.teaching-screen .vertical-rate{margin:5px auto}
 .teaching-screen .current-work h2{font-size:21px;margin-top:8px}.teaching-screen .ink-coach{font-size:14px;margin-top:8px}.teaching-screen .ink-coach strong{font-size:15px}
 .teaching-screen .keypad{gap:8px}.teaching-screen .keypad button{min-height:39px}.teaching-screen .keypad-rail{gap:8px}.teaching-screen .check-button{min-height:41px}
}
@media(max-width:1000px){.topbar .brand{font-size:13px}.topbar .brand-small{font-size:12px}.audio-controls button{padding:4px 6px}.audio-controls .audio-label{font-size:11px}.audio-controls .audio-state{font-size:10px}.teaching-header>strong{font-size:14px}.teaching-screen .paper-and-keys{grid-template-columns:minmax(0,1fr) 210px}}
@media(max-width:760px){
 .topbar{grid-template-columns:1fr auto;height:auto;min-height:65px;gap:5px}.topbar>.audio-controls{grid-column:1/-1;justify-content:center}.topbar .brand{grid-row:2;justify-self:start}.topbar .top-actions{grid-row:2;grid-column:2}
 .question-strip{padding-left:12px;padding-right:12px;padding-bottom:35px}.question-strip>button{top:auto;bottom:0;right:8px;transform:none}.question-strip h2{font-size:24px}
 .teaching-screen{padding:6px;gap:7px}.teaching-header{flex-wrap:wrap;gap:7px}.teaching-header .audio-controls{order:3;justify-content:center;flex-basis:100%}.teaching-header>strong{order:4;flex-basis:100%;text-align:center}
 .teaching-screen .question-strip h2{font-size:24px}.teaching-screen .question-strip p{font-size:17px}.teaching-screen .paper-and-keys{grid-template-columns:minmax(0,1fr) 145px}.teaching-screen .paper-writing{padding:9px 6px;justify-content:flex-start}
 .teaching-screen .rate-line b{font-size:27px}.teaching-screen .rate-line small{font-size:13px}.teaching-screen .rate-line{min-height:43px}.teaching-screen .rounded-move{height:47px;min-height:47px}.teaching-screen .curve-label{font-size:22px}.curve-side>.rounded-arrow,.curve-side.right>.rounded-arrow{width:20px}
 .curve-side>.operation-entry{max-width:calc(100% - 52px)}.teaching-screen .operation-entry .answer-field{font-size:22px;min-width:35px}.teaching-screen .rate-entry .answer-field{font-size:24px;min-width:40px}
 .teaching-screen .current-work h2{font-size:17px}.teaching-screen .ink-coach{font-size:13px}.teaching-screen .keypad button{font-size:23px;min-height:37px}.teaching-screen .edit-keys button:not(:first-child){font-size:12px}
}
.question-strip{border-left-width:2px}
.teaching-header .voice-status{color:#514262;font-size:13px}
.teaching-screen .demo-controls{margin-top:0}

/* Settings must stay above the full-screen lesson. */
.modal-backdrop{z-index:100}
/* Match the reference's n/d key and two editable boxes in the work. */
.nd-key{display:inline-flex;flex-direction:column;align-items:center;font:18px 'Trebuchet MS',sans-serif;line-height:1.05;vertical-align:middle}
.nd-key>span{padding:0 5px}.nd-key>span:first-child{border-bottom:2px solid currentColor;padding-bottom:2px}.nd-key>span:last-child{padding-top:2px}
.answer-field.building-fraction{background:transparent;border:0;box-shadow:none;overflow:visible;display:flex;align-items:center;gap:5px;padding:0 3px}
.editable-fraction{display:inline-flex;flex-direction:column;min-width:68px;gap:5px;position:relative;padding:2px 8px}
.editable-fraction:after{content:'';height:2px;background:currentColor;position:absolute;left:0;right:0;top:50%;pointer-events:none}
.editable-fraction button{border:2px solid #ac96c0!important;border-radius:7px;background:#faf6ff;box-shadow:none;min-height:29px;padding:0 5px;font:25px/1 'Paper Hand',cursive;min-width:48px}
.editable-fraction button.focused{border-color:#725294!important;background:#fff9df}
.rounded-move:has(.building-fraction){height:82px;min-height:82px}
.rate-line:has(.building-fraction){min-height:88px}
.demo-finger>span{display:block;animation:finger-tap 1.15s ease-in-out infinite}
@keyframes finger-tap{0%,100%{transform:translate(5px,9px) scale(1)}50%{transform:translate(0,0) scale(.91)}}
.reduce-motion .demo-finger>span{animation:none}
@media(prefers-reduced-motion:reduce){.demo-finger>span{animation:none}}
@media(max-height:740px){.editable-fraction button{font-size:23px!important;min-height:26px}.rounded-move:has(.building-fraction){height:72px;min-height:72px}}
/* The problem belongs to its white paper, with its work directly below. */
.paper-writing>.question-strip,.teaching-screen .paper-writing>.question-strip{background:transparent;border:0;border-radius:0;box-shadow:none;width:100%;padding:8px 30px 12px;margin:0;position:relative;text-align:center;flex:none}
.paper-writing>.question-strip>div{width:100%}
.paper-writing>.question-strip p{font-size:18px;line-height:1.4}
.paper-writing>.question-strip h2,.teaching-screen .paper-writing>.question-strip h2{font-size:27px;line-height:1.25;margin:5px 0 0}
.paper-writing>.question-strip .quiet{position:static;display:block;margin:3px auto 0;padding:1px 6px;min-height:22px;font-size:12px}
.paper-writing>.question-strip{display:block}
.paper-writing,.teaching-screen .paper-writing{justify-content:flex-start;gap:12px}
.current-work{width:100%;margin:auto 0}
.example-story,.example-question{text-align:center}
.example-story{font-size:18px;line-height:1.35}
.example-question{font-size:23px;line-height:1.25}
.entry-welcome>img{border-radius:18px}
@media(max-height:740px){.paper-writing,.teaching-screen .paper-writing{gap:6px}.paper-writing>.question-strip,.teaching-screen .paper-writing>.question-strip{padding:3px 8px 7px}.paper-writing>.question-strip p{font-size:16px}.paper-writing>.question-strip h2,.teaching-screen .paper-writing>.question-strip h2{font-size:23px}.example-story{font-size:16px}.example-question{font-size:21px}}
@media(max-width:760px){.paper-writing>.question-strip h2,.teaching-screen .paper-writing>.question-strip h2{font-size:21px}.paper-writing>.question-strip p{font-size:16px}}
.paper-writing>.current-work{margin:8px 0 0}
.paper-writing>.question-strip h2,.teaching-screen .paper-writing>.question-strip h2{font-size:30px}
@media(max-height:740px){.paper-writing>.question-strip h2,.teaching-screen .paper-writing>.question-strip h2{font-size:27px}}
@media(max-width:760px){.paper-writing>.question-strip h2,.teaching-screen .paper-writing>.question-strip h2{font-size:21px}}
@media(min-width:761px) and (max-height:740px){
 .lesson-screen:not(.teaching-screen) .paper-writing:has(.previous-rate){gap:2px;padding:7px 10px}
 .lesson-screen:not(.teaching-screen) .paper-writing:has(.previous-rate) .vertical-rate{margin:0 auto}
 .lesson-screen:not(.teaching-screen) .paper-writing:has(.previous-rate) .rate-line{min-height:36px}
 .lesson-screen:not(.teaching-screen) .paper-writing:has(.previous-rate) .rate-line b{font-size:25px}
 .lesson-screen:not(.teaching-screen) .paper-writing:has(.previous-rate) .rate-line .fraction{font-size:18px}
 .lesson-screen:not(.teaching-screen) .paper-writing:has(.previous-rate) .rounded-move{height:36px;min-height:36px}
 .lesson-screen:not(.teaching-screen) .paper-writing:has(.previous-rate) .question-strip{padding-bottom:2px}
 .lesson-screen:not(.teaching-screen) .paper-writing:has(.previous-rate) .ink-coach{padding:5px 8px;font-size:12px}
 .lesson-screen:not(.teaching-screen) .paper-writing:has(.previous-rate) .current-work h2{font-size:17px;padding:5px;margin:4px 0}
 .lesson-screen:not(.teaching-screen) .paper-writing:has(.previous-rate) .previous-rate{margin:0 0 3px;padding-bottom:3px}
}
/* White paper tones multiply into the exact page color; ink stays visible. */
.entry-welcome>img{filter:url(#coach-paper);mix-blend-mode:multiply;mask-image:none;-webkit-mask-image:none}

/* Narrow phones need the full paper width before the keypad. */
@media(max-width:600px){
 .paper-and-keys,.teaching-screen .paper-and-keys{grid-template-columns:minmax(0,1fr);overflow:visible}
 .paper-writing,.teaching-screen .paper-writing{overflow:visible;min-height:0;padding:10px 12px}
 .keypad-rail{border-left:0;border-top:2px solid #a49a7e;overflow:visible}
 .example-panel,.model-panel{max-height:none;height:auto}
 .example-paper{overflow:visible}
 .teaching-screen{position:relative;height:auto;min-height:100dvh;overflow:visible}
 .teaching-screen .work-panel{flex:none;overflow:visible}
 .teaching-header{position:relative;flex-wrap:wrap}
 .paper-writing>.question-strip,.teaching-screen .paper-writing>.question-strip{padding:6px 0}
 .curve-side>.curve-label{margin-left:0;margin-right:0}
}
/* Launch layout: one short prompt; the colored mathematics carries the lesson. */
.coach-avatar{display:inline-block;flex:none;width:38px;height:38px;border-radius:50%;border:2px solid #d7c49b;background-color:#fff8e8;background-image:url('assets/coaches-seamless.png?v=12');background-repeat:no-repeat;background-size:240% auto;vertical-align:middle;box-shadow:0 2px 0 #0001}
.coach-avatar.davis{background-position:94% 1.5%}.coach-avatar.sunny{background-position:4% 1.5%}
.panel-heading>span:first-child{display:flex;align-items:center;gap:9px;font-size:16px}
.panel-heading{padding:4px 12px;min-height:43px}.panel-heading .coach-avatar{width:30px;height:30px}
.finished-rail .coach-avatar{width:118px;height:118px;animation:coach-cheer .7s ease-out}
.paper-writing>.question-strip,.teaching-screen .paper-writing>.question-strip{padding:8px 26px 12px}
.paper-writing>.question-strip p{font-size:20px;line-height:1.35}
.paper-writing>.question-strip h2,.teaching-screen .paper-writing>.question-strip h2{font-size:clamp(27px,2.4vw,38px);line-height:1.22}
.paper-writing>.question-strip .quiet{position:absolute;right:-4px;top:4px;bottom:auto;min-width:28px;min-height:28px;font-size:21px;padding:0;transform:none;margin:0}
.current-work h2,.teaching-screen .current-work h2{border:0;background:#eef0fa;border-radius:12px;font-size:22px;padding:10px 14px;margin:12px auto 0;max-width:670px}
.current-work{position:relative}.step-confirmed{position:absolute;right:8px;bottom:8px;color:#24795b;font-size:22px;pointer-events:none;animation:step-check 1.3s both}
.ink-coach,.teaching-screen .ink-coach{align-items:center;gap:10px;padding:8px 12px;max-width:670px;font-size:16px}
.ink-coach p{margin:0!important}.ink-coach .coach-avatar{width:42px;height:42px}
.quantity-guidance .given-line,.quantity-guidance .unit-line,.quantity-guidance .part-line{outline:0}
.quantity-guidance .quantity-cell b,.quantity-guidance .amount-cell b{background:transparent}
.rate-line b,.work-panel .rate-line b{font-size:36px}.rate-line small{font-size:16px}
.teaching-screen .rate-line b{font-size:43px}.teaching-screen .rate-line small{font-size:19px}
.quantity-cell,.amount-cell{border-radius:10px;transition:background .25s ease}
.quantity-cell.instruction-focus{background:#dff3ef}.amount-cell.instruction-focus{background:#f0e3f8}
.curve-side.instruction-focus{background:#f8f4dc;border-radius:12px}
.answer-field{background:#fff2b9;border:3px solid #b98722;border-radius:10px;color:#293442}
.answer-field:focus{box-shadow:0 0 0 3px #f7d97666}
.answer-field.needs-fix{border-color:#c46865;background:#fff1ec}
.work-panel .rate-entry .answer-field,.work-panel .operation-entry .answer-field{font-size:34px;min-height:44px}
.teaching-screen .rate-entry .answer-field,.teaching-screen .operation-entry .answer-field{font-size:39px;min-height:48px}
.rate-line small{font-weight:600}.story-quantity{background:#e3f3ef}.story-amount{background:#f0e5f7}
.teaching-screen .vertical-rate{max-width:670px}.teaching-screen .rounded-move{height:68px;min-height:68px}
.teaching-screen .curve-label{font-size:35px}.curve-side>.future-operation{opacity:.45}
.choices button{font-size:22px;min-height:58px}.keypad button{transition:background .14s,transform .14s}
.keypad button:active,.choices button:active{transform:translateY(2px);box-shadow:none}
.rail-help{order:3;margin-top:auto}.demo-controls{margin-bottom:8px}.finished-rail{gap:24px}
.problem-done h2{font-size:24px;color:#23745d}.problem-done .big-stars{margin:4px 0}
.example-paper .visual-stage{background:none}.example-question{font-size:24px}
@keyframes step-check{0%{opacity:0;transform:scale(.5)}20%,70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes coach-cheer{0%{transform:translateY(16px) rotate(-8deg);opacity:0}60%{transform:translateY(-6px) rotate(4deg)}100%{transform:none;opacity:1}}
@media(min-width:761px) and (max-height:740px){
 .panel-heading{min-height:36px;padding:2px 10px}.panel-heading .coach-avatar{width:27px;height:27px}
 .paper-writing>.question-strip,.teaching-screen .paper-writing>.question-strip{padding:4px 20px 6px}
 .paper-writing>.question-strip p{font-size:17px}.paper-writing>.question-strip h2,.teaching-screen .paper-writing>.question-strip h2{font-size:27px}
 .work-panel .rate-line b{font-size:32px}.work-panel .rate-line small{font-size:15px}
 .teaching-screen .rate-line b{font-size:35px}.teaching-screen .rate-line small{font-size:16px}
 .teaching-screen .rounded-move{height:48px;min-height:48px}.teaching-screen .curve-label{font-size:29px}
 .work-panel .rate-entry .answer-field,.work-panel .operation-entry .answer-field{font-size:29px;min-height:36px}
 .current-work h2,.teaching-screen .current-work h2{font-size:20px;padding:7px 12px;margin-top:8px}
 .ink-coach,.teaching-screen .ink-coach{font-size:14px;margin-top:7px;padding:6px 8px}.ink-coach .coach-avatar{width:34px;height:34px}
 .finished-rail .coach-avatar{width:95px;height:95px}.example-question{font-size:21px}
}
@media(min-width:761px) and (max-width:1100px){
 .lesson-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.8fr)}
 .lesson-screen:not(.teaching-screen) .rate-line b{font-size:29px}.lesson-screen:not(.teaching-screen) .rate-line small{font-size:14px}
 .lesson-screen:not(.teaching-screen) .operation-entry .answer-field{font-size:25px}
}
@media(max-width:760px){
 .paper-writing>.question-strip h2,.teaching-screen .paper-writing>.question-strip h2{font-size:25px}
 .paper-writing>.question-strip p{font-size:17px}.work-panel .rate-line b{font-size:32px}.work-panel .rate-line small{font-size:15px}
 .work-panel .operation-entry .answer-field,.work-panel .rate-entry .answer-field{font-size:28px}
 .current-work h2,.teaching-screen .current-work h2{font-size:19px}.teaching-screen .rounded-move{height:54px;min-height:54px}
}
.reduce-motion .step-confirmed,.reduce-motion .coach-avatar{animation:none}
@media(prefers-reduced-motion:reduce){.step-confirmed,.coach-avatar{animation:none}}
.coach-avatar{background-size:350% auto}.coach-avatar.davis{background-position:66% 2.4%}.coach-avatar.sunny{background-position:32.5% 1.5%}
@media(min-width:761px){.teaching-screen .rate-line b{font-size:44px}.teaching-screen .rate-line small{font-size:18px}.teaching-screen .rate-line{min-height:55px}}
/* Three-row chains keep earlier work visible without shrinking all lessons. */
@media(min-width:761px){
 .work-panel .paper-writing:has(.part-line) .rate-line,.work-panel .paper-writing:has(.new-line) .rate-line{min-height:38px;padding:2px 0}
 .work-panel .paper-writing:has(.part-line) .rate-line b,.work-panel .paper-writing:has(.new-line) .rate-line b{font-size:29px}
 .work-panel .paper-writing:has(.part-line) .rate-line small,.work-panel .paper-writing:has(.new-line) .rate-line small{font-size:14px}
 .work-panel .paper-writing:has(.part-line) .rounded-move,.work-panel .paper-writing:has(.new-line) .rounded-move{height:40px;min-height:40px}
 .work-panel .paper-writing:has(.part-line) .curve-label,.work-panel .paper-writing:has(.new-line) .curve-label{font-size:27px}
 .work-panel .paper-writing:has(.part-line) .answer-field,.work-panel .paper-writing:has(.new-line) .answer-field{font-size:29px;min-height:35px}
 .work-panel .paper-writing:has(.part-line) .vertical-rate,.work-panel .paper-writing:has(.new-line) .vertical-rate{margin:2px auto}
 .work-panel .paper-writing:has(.part-line) .rate-line .fraction{font-size:22px}
 .work-panel .paper-writing:has(.part-line) .current-work{margin-top:0}
 .work-panel .paper-writing:has(.part-line) .previous-rate{margin:0 0 3px;padding-bottom:3px}
 .example-paper:has(.part-line) .rate-line{min-height:36px;padding:2px 0}.example-paper:has(.part-line) .rounded-move{height:36px;min-height:36px}
}
/* Feedback lives beside the keypad, leaving all of the calculation visible. */
.keypad-rail .ink-coach{display:block;margin:0;padding:8px;font-size:14px;line-height:1.3;border-radius:10px}
.keypad-rail .ink-coach .coach-avatar{width:29px;height:29px;float:left;margin:0 6px 3px 0}
.keypad-rail .ink-coach:after{content:'';display:block;clear:both}
@media(min-width:761px) and (max-height:740px){.keypad-rail .ink-coach{font-size:13px;padding:6px}.keypad-rail:has(.ink-coach){gap:6px}.keypad-rail:has(.ink-coach) .keypad{gap:7px}}
/* Keep the placeholder, typed number, and fraction centered in their blank. */
.answer-field{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15}
.answer-field.building-fraction{justify-content:center}
.answer-field .placeholder{display:block;text-align:center;line-height:1.15}
.skip-demo{font-weight:700;background:#f7f0ff}

.panel-heading .lesson-heading-text{min-width:0;line-height:1.2}
.panel-heading>span:first-child{min-width:0}
.panel-heading>span+span{flex-shrink:0}
.panel-heading .coach-avatar{flex-shrink:0}
/* Fraction entry gets its own vertical space instead of spilling into unit rows. */
.work-panel .rounded-move:has(.fraction),.example-panel .rounded-move:has(.fraction){height:auto;min-height:100px;padding:8px 0}
.work-panel .paper-writing:has(.new-line) .rounded-move:has(.fraction){height:auto;min-height:100px}
.work-panel .rounded-move:has(.building-fraction){min-height:126px}
.curve-side:has(.fraction){min-height:84px}
.answer-field.building-fraction{height:auto;min-height:90px!important;padding:6px 12px;gap:8px;overflow:visible}
.editable-fraction button{min-height:32px;line-height:1.05;padding:1px 8px}
.teaching-screen .vertical-rate,.teaching-screen .current-work h2{max-width:960px;width:100%}
.teaching-screen .paper-writing{padding-left:clamp(20px,3vw,60px);padding-right:clamp(20px,3vw,60px)}
@media(min-height:850px) and (min-width:761px){
 .teaching-screen .rate-line{min-height:96px}
 .teaching-screen .rounded-move{min-height:100px;height:100px}
 .teaching-screen .rounded-move:has(.fraction){min-height:126px}
 .teaching-screen .rate-line b{font-size:52px}
 .teaching-screen .rate-line small{font-size:23px}
}
.choices{gap:9px}.choices button{min-height:49px;line-height:1.15;padding:9px 12px}
.keypad-rail:has(.choices) .demo-controls{margin-bottom:0}
.all-lessons-button{margin-left:auto;font-size:14px;min-height:30px;padding:3px 12px;white-space:nowrap}
.panel-heading{gap:12px}.panel-heading>span:last-child{font-size:12px;white-space:nowrap}
.all-lessons-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.all-lessons-grid button{display:flex;align-items:center;gap:12px;text-align:left;font-size:17px;padding:10px}
.all-lessons-grid b{color:#17636a;font-size:23px;min-width:25px}
.all-lessons-grid [aria-current]{border-color:#15736e;background:#dff3ef}
.conversion-emphasis{color:#964c0c!important;background:#ffebc4!important;border-bottom:3px solid #dc9219;padding:0 .13em}
.conversion-line .amount-cell{background:#fff0cb;color:#965008}
.conversion-line .amount-cell.instruction-focus{background:#ffe7ad}
.currency-symbol{color:#965008;padding-right:.08em}
@media(max-width:760px){.all-lessons-grid{grid-template-columns:1fr}.panel-heading{flex-wrap:wrap}.all-lessons-button{font-size:13px}}
@media(min-width:761px) and (max-height:740px){.choices button{font-size:18px;min-height:44px;padding:7px 10px}.keypad-rail:has(.choices){gap:7px}.work-panel .rounded-move:has(.fraction){min-height:84px}.work-panel .rounded-move:has(.building-fraction){min-height:106px}}

/* The selected typing destination stays visible while students use the keypad. */
.work-panel:not(.demonstration-panel) .answer-field:not(.building-fraction) .placeholder{display:none}
.work-panel:not(.demonstration-panel) .answer-field:not(.building-fraction)::after,
.work-panel:not(.demonstration-panel) .editable-fraction button.focused::after{
 content:'';display:inline-block;flex:none;width:3px;height:.85em;
 margin-left:2px;background:#293442;border-radius:1px;vertical-align:-.08em;
 animation:answer-caret 1.1s step-end infinite;pointer-events:none;
}
.editable-fraction button{display:flex;align-items:center;justify-content:center}
@keyframes answer-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.reduce-motion .answer-field::after,.reduce-motion .editable-fraction button.focused::after{animation:none!important}
#app:has(.modal-backdrop) .answer-field::after,#app:has(.modal-backdrop) .editable-fraction button.focused::after{visibility:hidden}
@media(prefers-reduced-motion:reduce){.answer-field::after,.editable-fraction button.focused::after{animation:none!important}}