@font-face{font-family:PatrickHand;src:url('assets/fonts/PatrickHand-Regular.ttf')}*{box-sizing:border-box}:root{color-scheme:dark;--gold:#ffc738;--white:#f2f1e9;--bg:#0b0d0f;--blue:#74d9f5}body{margin:0;background:var(--bg);color:var(--white);font:18px Arial,Helvetica,sans-serif}button,input,select{font:inherit}button{color:inherit;background:transparent;border:1px solid #555747;border-radius:12px;cursor:pointer;min-height:48px;padding:8px 15px}button:hover{color:var(--gold);border-color:var(--gold)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.4;cursor:default}.primary{background:var(--gold);color:#161713!important;border-color:var(--gold);font-weight:700}[hidden]{display:none!important}#game{min-height:100dvh;display:flex;flex-direction:column;padding:0 24px}header{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:90px;padding:12px 0}.level-menu{display:flex;gap:12px;align-items:center}.level{font-size:22px;color:var(--gold);font-weight:bold}.level-menu button{font-size:14px;max-width:116px;text-align:left}h1{font-size:clamp(18px,1.8vw,26px);letter-spacing:.10em;text-transform:uppercase;margin:0;text-align:center}#heading{flex:1}#heading p{font-size:14px;color:var(--gold);margin:7px 0 0;text-align:center}nav{display:flex;gap:8px;align-items:center}nav button{font-size:16px}nav button.round{border-radius:50%;font-size:23px;min-width:48px}nav button[aria-pressed=true]{background:var(--gold);color:#111}.workspace{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;align-items:center;min-height:450px}.workspace.demo{grid-template-columns:1fr}.stage{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;min-width:0}.stage.teaching{grid-template-columns:minmax(160px,23%) minmax(270px,45%) minmax(170px,32%)}.stage.guiding{grid-template-columns:minmax(0,57%) minmax(0,43%)}.visual{min-width:0}.triangle-svg{width:100%;max-height:500px;overflow:visible}.triangle-svg text{font-family:PatrickHand,Arial;fill:var(--white);paint-order:stroke;stroke:var(--bg);stroke-width:5px;stroke-linejoin:round}.measure{font-size:27px}.unit-note{font-size:18px;fill:#b9bcb9!important}.shape-word{font-size:27px}.half-label{font-size:48px;fill:var(--gold)!important}.edge,.triangle{stroke:var(--white);stroke-width:3;stroke-linejoin:round;fill:#ffc7381c}.rectangle{stroke:#7a827b;stroke-dasharray:7 5;stroke-width:2;fill:#ffffff09}.triangle{fill:#ffc7382b}.other-half{fill:#74d9f548;stroke:var(--blue);stroke-width:2}.extension{stroke:#a1a4a2;stroke-width:2;stroke-dasharray:7 6}.width-line{stroke:var(--white);stroke-width:2;stroke-dasharray:7 6}.right-mark{stroke:var(--white);stroke-width:2;fill:none}.length-highlight{stroke:var(--gold);stroke-width:5}.width-highlight{stroke:var(--blue);stroke-width:5;stroke-dasharray:7 5}.shaded{stroke:var(--white);stroke-width:3;fill:#9d9462}.cutout{fill:var(--bg)}.coach{display:flex;flex-direction:column;align-items:center;padding:12px}.bubble{background:#f6f1e3;color:#17191c;border-radius:20px;padding:16px;line-height:1.4;font-size:20px;position:relative}.bubble:after{content:'';position:absolute;bottom:-10px;left:40%;width:20px;height:20px;transform:rotate(45deg);background:#f6f1e3}.coach img{width:100%;max-width:240px;max-height:300px;object-fit:contain}.work{padding:16px;min-width:0}.work p{font:clamp(24px,2.5vw,38px)/1.45 PatrickHand;margin:15px 0;overflow-wrap:anywhere}.work .caption{font:18px/1.45 Arial;color:#c5c9c4}.work .active{color:var(--gold)}.work h2{font-size:16px;font-weight:normal;color:#c5c9c4}.work .checked{font-size:25px;color:#9ecca6}.answer-panel{display:flex;flex-direction:column;gap:12px;background:#141716;border:1px solid #343730;border-radius:20px;padding:17px}.answer-panel label{font-weight:600;line-height:1.4;font-size:17px}.answer-shell{border:2px solid #837342;border-radius:14px;display:flex;align-items:center;padding:8px 12px;min-height:62px;gap:7px;cursor:text}.answer-shell:focus-within{border-color:var(--gold)}#answer{width:100%;min-width:0;background:transparent;border:0;outline:none;color:var(--gold);font:32px PatrickHand;text-align:right;caret-color:transparent}.caret{height:30px;width:2px;background:var(--gold);animation:blink 1s steps(1) infinite}.answer-unit{font-size:17px;color:var(--gold);white-space:nowrap}.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.keys button{background:#20231f;min-height:45px;padding:5px;font:27px PatrickHand}.keys .wide{grid-column:span 3;font:16px Arial}.keys button:active{background:var(--gold);color:#111}.feedback{font-size:16px;line-height:1.4;margin:0;color:var(--gold)}.prompt-line{text-align:center;font-size:21px;margin:10px 0}.controls{display:flex;justify-content:center;gap:10px;align-items:center;flex-wrap:wrap;padding:15px}.controls span{font-size:15px;color:#b5bcb5}.controls button{font-size:17px}footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;align-items:center;padding:20px 0;min-height:110px}.speed{font-size:14px;display:grid;gap:8px;max-width:260px}.speed input{width:100%;accent-color:var(--gold)}.progress-block{text-align:center;font-size:14px}.dots{font-size:27px;letter-spacing:12px;color:var(--gold);margin:4px}.progress-block progress{width:190px;height:5px;accent-color:var(--gold)}.save-note{font-size:14px;color:#a6aca6;text-align:right}.splash{position:fixed;inset:0;z-index:10;background:radial-gradient(ellipse at 50% 40%,#2a2516,#0b0d0f 65%);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.splash p{font-size:14px;letter-spacing:.2em;color:#b8b6ad}.splash h2{font-size:clamp(46px,7vw,82px);line-height:.94;letter-spacing:.06em;margin:12px 0 28px}.splash em{font-style:normal;color:var(--gold)}.splash button{min-width:90px;font-size:28px}.splash small{margin:20px;font-size:16px;color:#c2c6bf}.overlay{position:fixed;inset:0;background:#000b;z-index:8;display:grid;place-items:center;padding:24px}.sheet{width:min(740px,100%);max-height:90dvh;overflow:auto;background:#161916;border:1px solid #65664e;border-radius:20px;padding:24px}.sheet-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.sheet h2{font-size:24px}.skill-list{display:grid;gap:9px}.skill-list button{text-align:left;font-size:18px;padding:14px}.skill-list small{display:block;color:#acb2aa;font-size:15px;margin-top:6px}.help-content{display:flex;gap:20px;align-items:center}.help-content img{width:130px}.help-content p{line-height:1.5}.praise{display:flex;align-items:center;justify-content:center;gap:30px}.praise h2{font-size:40px;color:var(--gold)}.pose{width:230px;aspect-ratio:1;background:url('assets/praise-poses-transparent.png') 0 0/500% 200%;flex-shrink:0}.results{max-width:1050px;width:100%;margin:auto}.results h2{font-size:36px;color:var(--gold)}.review-item{border-top:1px solid #454b41;padding:18px 0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px}.review-item h3{font-size:21px}.review-item p{line-height:1.5}.review-item .triangle-svg{max-height:270px}.result-actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes blink{50%{opacity:0}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}@media(max-width:1050px){header{flex-wrap:wrap}#heading{order:3;flex-basis:100%}nav{margin-left:auto}.stage.teaching{grid-template-columns:1fr 1fr}.coach{grid-column:1/-1;flex-direction:row;justify-content:center;gap:20px}.coach img{height:110px;width:110px}.bubble{max-width:70%;font-size:18px}.stage.guiding{grid-template-columns:1fr}.work{padding:6px 12px}.work p{margin:4px 0}.workspace{min-height:390px}.triangle-svg{max-height:330px}}@media(max-width:700px){#game{padding:0 12px}header{gap:10px}.level-menu button{font-size:14px}nav{gap:5px}nav button{font-size:14px;padding:8px}nav button.round{min-width:44px}#replay{max-width:125px}.workspace{grid-template-columns:1fr;gap:12px}.stage.teaching{grid-template-columns:1fr}.stage.teaching .visual{grid-row:2}.stage.teaching .work{text-align:center}.coach{padding:8px}.coach img{height:90px;width:85px}.bubble{max-width:78%;font-size:17px;padding:12px}.stage.guiding{grid-template-columns:1fr}.answer-panel{width:min(100%,350px);margin:auto}.keys{grid-template-columns:repeat(3,1fr)}.triangle-svg{max-height:340px}.work p{font-size:29px}.work{text-align:center}.prompt-line{font-size:18px}footer{grid-template-columns:1fr;gap:14px}.speed{margin:auto;width:230px}.save-note{text-align:center}.review-item{grid-template-columns:1fr;gap:0}.praise{flex-direction:column;gap:0;text-align:center}.praise h2{font-size:32px}.pose{width:170px}.controls{padding:10px 0}.help-content{flex-direction:column}.help-content img{height:110px;object-fit:contain}}
/* Compact narration, with the mathematics carried by moving shapes. */
.fraction{display:inline-flex;vertical-align:middle;flex-direction:column;align-items:stretch;text-align:center;line-height:1.15;margin:0 .15em;font-family:PatrickHand;min-width:.8em}.fraction>span{padding:.08em .18em}.fraction>span+span{border-top:2px solid currentColor}.work .active{line-height:1.6}.work .caption:empty{display:none}.svg-fraction text{font:32px PatrickHand;fill:var(--gold)}.svg-fraction line{stroke:var(--gold);stroke-width:2.5}.area-fill{fill:#ffc73866;stroke:none}.cut-guide{stroke:var(--white);stroke-width:3;stroke-dasharray:400;stroke-dashoffset:400}.lifted-triangle{fill:#74d9f588;stroke:var(--blue);stroke-width:3}.area-label{font:28px PatrickHand;fill:var(--gold)!important}.demo-visual .measure{font-size:28px}.demo-visual .rectangle{fill:#ffffff09}.demo-visual .length-highlight{stroke-dasharray:400}.stage.teaching{grid-template-columns:minmax(140px,19%) minmax(320px,51%) minmax(180px,30%)}.bubble{font-size:22px;text-align:center}.controls{min-height:80px}#audio-note{color:var(--gold);text-align:center;font-size:14px}#audio-note:empty{display:none}
@media(max-width:1050px){.stage.teaching{grid-template-columns:1fr 1fr}.stage.teaching .coach{grid-column:1/-1}.bubble{font-size:20px}}@media(max-width:700px){.stage.teaching{grid-template-columns:1fr}.stage.teaching .visual{grid-column:1}.demo-visual .measure{font-size:30px}.bubble{font-size:19px}.work .active{font-size:32px}.demo-visual{min-height:260px}}
/* The worksheet grows down the page. Completed equalities remain visible. */
.equation-legend{display:flex;flex-wrap:wrap;gap:5px 16px;font:13px/1.4 Arial;color:#b7c1b8;margin-bottom:14px}.equation-stack{display:grid;gap:8px}.equation-row{display:grid;grid-template-columns:1em .8em minmax(0,1fr);align-items:center;column-gap:5px;font:clamp(26px,2.25vw,34px)/1.1 PatrickHand;position:relative;padding:5px 0}.eq-left,.eq-equals{text-align:center}.eq-right{min-width:0;white-space:nowrap}.eq-rule{grid-column:3;font:12px/1.3 Arial;color:#a9b3ac;margin:5px 0 0}.changed{color:var(--gold)}.carry{color:#d1d8d2}.current-row{border-top:1px solid #454638;margin-top:2px}.current-row .eq-rule{color:var(--gold)}.equation-entry{display:inline-flex;align-items:center;justify-content:center;min-width:1.2em;min-height:1.12em;color:var(--gold);background:#ffc73812;border-radius:4px}.equation-entry i{height:.8em;width:2px;background:var(--gold);margin-left:3px;animation:blink 1s steps(1) infinite}.entry-placeholder{opacity:.4}.equation-work .fraction{margin:0 .08em}.equation-work h2{margin:0 0 12px}.equation-work{padding:12px 16px}.stage.guiding{align-items:start}.stage.guiding .visual{position:sticky;top:12px}.mastered-work{grid-template-columns:minmax(0,1fr) minmax(280px,430px)!important}.mastered-work .praise{gap:15px}.mastered-work .pose{width:150px}.mastered-work .praise h2{font-size:32px}.review-item .equation-work{padding-left:0}.stage.teaching{align-items:center;grid-template-columns:minmax(120px,17%) minmax(280px,49%) minmax(250px,34%)}
@media(max-width:1050px){.stage.teaching{grid-template-columns:minmax(0,1fr) minmax(280px,1fr)}.stage.guiding{grid-template-columns:1fr}.stage.guiding .visual{position:static}.mastered-work{grid-template-columns:1fr!important}.equation-work{max-width:430px;width:100%;margin:auto}.equation-row{font-size:30px}}@media(max-width:700px){.stage.teaching{grid-template-columns:1fr}.equation-work{text-align:left}.equation-row{font-size:31px}.eq-rule{font-size:13px}.equation-legend{justify-content:flex-start}.mastered-work .praise{flex-direction:column}.equation-stack{gap:5px}}
/* Keep the entire worked solution readable beside the shape on classroom screens. */
.equation-row{grid-template-columns:1em .8em minmax(0,1fr) 88px;font-size:28px;padding:4px 0;column-gap:4px}.eq-rule{grid-column:4;margin:0 0 0 6px;font-size:12px}.equation-work .fraction{line-height:1}.equation-work .fraction>span{padding:.015em .14em}.equation-stack{gap:5px}.stage.teaching .equation-row:last-child{animation:bring-down var(--work-step-duration,.8s) ease-out}.answer-panel{position:sticky;top:16px;align-self:center}@keyframes bring-down{from{opacity:.25;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.equation-row{font-size:27px;grid-template-columns:1em .8em minmax(0,1fr) 82px}.eq-rule{font-size:12px}.answer-panel{position:static}.equation-work{padding:12px 8px}}

/* Spell out the quantity being calculated on every equation line. */
.equation-row{grid-template-columns:2.25em .8em minmax(0,1fr) 88px}.eq-left{text-align:left}.area-names{display:inline-block;font:18px/1.25 PatrickHand;white-space:normal}@media(max-width:700px){.equation-row{grid-template-columns:2.25em .8em minmax(0,1fr) 72px}.area-names{font-size:17px}}

/* Match the solving-equations sheet: bring the answer down to its own line. */
.calculation-line{display:block;text-align:left;white-space:nowrap}.concept-history>p.active:first-child .calculation-line+.calculation-line,.first-equation-frame [data-work-row="demo-rectangle-result"]{animation:bring-down var(--work-step-duration,.8s) ease-out var(--work-result-delay,4s) both}
@media(prefers-reduced-motion:reduce){.calculation-line,[data-work-row="demo-rectangle-result"]{animation:none!important}}

.given-area{text-align:center;color:var(--gold);font:30px PatrickHand}.keys:has(.operation-key){grid-template-columns:repeat(4,1fr)}.keys:has(.operation-key) .wide{grid-column:span 4}.operation-key{color:var(--gold)}
.keys:has(.operation-key){grid-template-columns:repeat(12,1fr)}.keys:has(.operation-key)>button{grid-column:span 4}.keys:has(.operation-key)>.operation-key{grid-column:span 3}.keys:has(.operation-key)>.wide{grid-column:span 12}
@keyframes reveal-line{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.concept-history>p.active:first-child .calculation-line+.calculation-line,.first-equation-frame [data-work-row="demo-rectangle-result"]{animation-name:reveal-line}

/* Student-facing headings describe the mathematics, not the teaching phase. */
h1{text-transform:none;letter-spacing:0;line-height:1.25;font-size:clamp(19px,1.8vw,25px)}
/* Pair quantity labels with shapes and readable lesson text. */
.equation-row{grid-template-columns:2.25em .8em minmax(0,1fr) 124px;min-height:56px}.eq-rule{font-size:19px;line-height:1.3;color:#d5ddd5}.shape-rule{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.rule-shape{width:38px;height:30px;flex:none;fill:#ffc73833;stroke:var(--gold);stroke-width:2.5;stroke-linejoin:round}.rule-shape .icon-cutout{fill:var(--bg);stroke:var(--gold)}.equation-legend{font-size:18px;gap:8px 20px}.area-names{font-size:22px;line-height:1.25}.work .checked{font-size:28px}.shape-rule>span{font-size:20px}.equation-work{padding-left:8px;padding-right:8px}@media(max-width:700px){.equation-row{grid-template-columns:2.25em .8em minmax(0,1fr) 100px;font-size:26px}.eq-rule{font-size:18px;margin-left:3px}.shape-rule{gap:2px;flex-direction:column;align-items:flex-start}.shape-rule>span{font-size:19px}.area-names{font-size:20px}.equation-legend{font-size:18px}}
/* Preserve the visual alignment improvements without demonstration questions. */
.previous-triangle{fill:none;stroke:#e9efe94f;stroke-width:2;stroke-dasharray:6 5}.slide-guide{stroke:#74d9f5;stroke-width:2;stroke-dasharray:5 5}.width-value,.width-value .changed,.width-value .equation-entry{color:var(--blue)}.mastered-work .praise h2{font-size:30px}.mastered-work .praise{padding:20px}.stage.teaching .coach{align-self:start}

.celebration{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;margin:8px 0}.celebration img{width:140px;height:140px;object-fit:contain;border-radius:16px}.celebration p{font:26px/1.15 PatrickHand;color:var(--gold);margin:0}.mastered-work .celebration img{width:220px;height:220px}.mastered-work .celebration p{font-size:36px}.test-solution{max-width:480px;width:100%;margin:auto}.test-solution h2{font:32px PatrickHand;color:var(--gold);margin:12px 16px}.test-score{display:block;font-size:20px;margin-bottom:6px}.retry-note{font-size:16px;color:#c5c9c4;line-height:1.3;margin:0}.feedback{font-size:18px}.answer-panel label{font-size:20px}

.dimension-line{stroke:var(--white);stroke-width:2;fill:none}.equation-row[data-work-row="length-sum"],.equation-row[data-work-row="length-total"]{grid-template-columns:3em .8em minmax(0,1fr)}.equation-row[data-work-row^="length-"] .eq-rule{grid-column:3;margin-top:6px}.test-solution .equation-work{padding-top:0}

.stage.reviewing{grid-template-columns:minmax(0,1fr) minmax(300px,1fr);align-items:start}.stage.reviewing .visual{position:sticky;top:12px}@media(max-width:1050px){.stage.reviewing{grid-template-columns:1fr}.stage.reviewing .visual{position:static}}

.rectangle-build{fill:none;stroke:var(--gold);stroke-width:4;stroke-linejoin:round}.rectangle-cut{stroke:var(--white);stroke-width:3}.dimension-labels{pointer-events:none}

.coach img,.help-content img{border-radius:16px;object-fit:contain}.help-content img{flex-shrink:0}