/*! © 2026 Nuvira Technologies, LLC. All rights reserved. WonderWise, its tutors, artwork, voices, lessons and software may not be copied, scraped or reused. See /terms. */
/* Local object art only: fixed styles, no provider URLs, markup or colors. */
.count-dot.count-object{position:relative;background:none;border:0;box-shadow:none;border-radius:0;flex:none}
.lesson-object-shape{position:absolute;display:block}
.count-object-apple .lesson-object-shape{inset:19% 8% 4%;border-radius:40% 43% 42% 43%;background:radial-gradient(ellipse at 30% 25%,#ffb8a1 0%,#df4635 24%,#b52424 78%);box-shadow:inset -3px -3px 0 #8e2621}
.count-object-apple .lesson-object-shape:before{content:'';position:absolute;width:9%;height:27%;left:48%;top:-22%;background:#604329;transform:rotate(12deg);border-radius:3px}
.count-object-apple .lesson-object-shape:after{content:'';position:absolute;width:30%;height:20%;left:56%;top:-18%;background:#487844;border-radius:90% 5% 90% 5%;transform:rotate(-12deg)}
.count-object-pencil .lesson-object-shape{width:25%;height:70%;left:38%;top:9%;transform:rotate(32deg);background:linear-gradient(90deg,#b47b18 0 20%,#ffd168 20% 70%,#e6a82f 70%);border-radius:2px 2px 0 0}
.count-object-pencil .lesson-object-shape:before{content:'';position:absolute;left:0;top:-12%;width:100%;height:17%;background:#d68190;border-bottom:2px solid #c2c7c4;border-radius:3px 3px 0 0}
.count-object-pencil .lesson-object-shape:after{content:'';position:absolute;left:0;bottom:-24%;width:100%;height:25%;background:linear-gradient(#d7b68e 0 62%,#393a39 62%);clip-path:polygon(0 0,100% 0,50% 100%)}
.count-object-star .lesson-object-shape{inset:5%;background:linear-gradient(125deg,#ffe493,#dea02e);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%)}
.count-object-block .lesson-object-shape{inset:10%;border-radius:5px;background:linear-gradient(135deg,#91c9bd,#478d85);border:3px solid #4c8f86;box-shadow:inset 3px 3px 0 #b1dfd4,inset -3px -3px 0 #37756e}
.chocolate-bar{display:grid;grid-template-columns:repeat(var(--chocolate-columns),minmax(0,1fr));grid-template-rows:repeat(var(--chocolate-rows),minmax(0,1fr));width:min(100%,360px);flex:none;gap:4px;padding:7px;border:3px solid #46251b;border-radius:9px;background:#502c20;box-shadow:0 5px 0 #321a14,0 8px 12px #46251b24}
.chocolate-piece{display:block;aspect-ratio:1;min-width:0;min-height:0;border:3px solid;border-color:#bb8158 #633c2b #48291e #95603e;border-radius:5px;background:linear-gradient(135deg,#a96e47,#75432e 68%);box-shadow:inset 1px 1px 2px #d29a6b55}
.chocolate-piece.selected{outline:3px solid #ffdb83;outline-offset:-5px;background:linear-gradient(135deg,#bd8455,#865137 68%)}
body[data-lesson-motion=full] .playing-lesson .chocolate-piece{animation:chocolate-emphasis .7s ease-out;animation-delay:calc(var(--cue-start,0ms) + var(--move-index,0) * 320ms)}
@keyframes chocolate-emphasis{0%,100%{filter:brightness(1)}45%{filter:brightness(1.3)}}
@media(prefers-reduced-motion:reduce){.playing-lesson .chocolate-piece{animation:none!important}}
/* One fixed-capacity glass. Water and tick lines share the same content box. */
.illustration-liquid .illustration-drawing{padding:20px 88px 20px 12px;justify-content:center}
.liquid-glass{position:relative;box-sizing:content-box;width:min(160px,100%);height:240px;flex:none;border:3px solid #648b9a;border-top:0;border-radius:0 0 16px 16px;background:linear-gradient(90deg,#e5f3f645,#f7fcfd44 50%,#c9e4ed66);box-shadow:inset 5px 0 8px #d8eaf255,4px 5px 0 #647f8820}
.liquid-glass:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:0 0 13px 13px;background:linear-gradient(90deg,transparent 9%,#ffffff66 11%,#ffffff66 14%,transparent 16%)}
.liquid-water{position:absolute;inset:0;transform-origin:center bottom;transform:scaleY(var(--liquid-fill));border-radius:0 0 13px 13px;background:linear-gradient(90deg,#63bedb,#93d9e9 46%,#4caccb);box-shadow:inset 0 3px 0 #d4f4fa}
.liquid-tick{position:absolute;left:0;width:100%;height:0;border-top:1px dashed #466675}
.liquid-tick-label{position:absolute;left:100%;top:0;transform:translateY(-50%);padding-left:12px;white-space:nowrap;font-size:16px;line-height:1;font-weight:600;color:#365761}
body[data-lesson-motion=full] .playing-lesson .liquid-water:not(.empty){animation:liquid-rise var(--liquid-duration) steps(var(--liquid-steps),end) backwards;animation-delay:var(--cue-start,0ms)}
@keyframes liquid-rise{from{transform:scaleY(0)}to{transform:scaleY(var(--liquid-fill))}}
@media(prefers-reduced-motion:reduce){.playing-lesson .liquid-water{animation:none!important}}

/* Bounded whole-number operands; each digit owns one place-value cell. */
.column-math{width:max-content;max-width:100%;font-family:var(--font);font-size:clamp(28px,3cqw,42px);font-variant-numeric:tabular-nums;line-height:1.35;color:var(--ink)}
.column-math-row{display:grid;grid-template-columns:.8em repeat(var(--column-digits),.72em);text-align:center}
.column-math-last{border-bottom:2px solid currentColor;padding-bottom:3px}
.column-math-answer{min-height:1em}
/* The current place stays marked; one gentle cue helps locate it, never a loop. */
.column-math-digit{position:relative;border-radius:5px}
.column-math-focused{background:#fff0a8;outline:2px solid #b57c16;outline-offset:-1px;color:#382b10}
.column-focus-label{width:fit-content;margin:0 auto 10px;padding:4px 12px;border:1px solid #c5993f;border-radius:8px;background:#fff6d3;font-size:16px;font-weight:650;color:#533d0b}
body[data-lesson-motion=full] .playing-lesson .column-math-focused{animation:column-focus-cue .65s ease-out 1;animation-delay:var(--cue-start,0ms)}
@keyframes column-focus-cue{0%,100%{box-shadow:0 0 0 0 #b57c1600}45%{box-shadow:0 0 0 4px #b57c1633}}
.column-answer-illustration{margin:0 auto;background:transparent;border:0;padding:0}
.column-answer-illustration .illustration-drawing{justify-content:center}
.column-answer-illustration .column-math{width:min(100%,360px)}
.column-answer-illustration .column-math-row{justify-content:end}
.column-answer-illustration .column-math-answer{padding-top:8px}
.lesson-answer-form.column-answer-form{width:100%;font-size:20px}
.column-answer-form .answer-entry{gap:6px}.column-answer-form input{text-align:right}
@media(prefers-reduced-motion:reduce){.playing-lesson .column-math-focused{animation:none!important}}
@media(forced-colors:active){.column-math-focused{outline-color:Highlight;background:Canvas;color:CanvasText}.column-focus-label{border-color:Highlight}}

/* These replays belong to the learner's button. Keep all exact source pieces
   visible at rest; the old automatic emphasis must not compete with them. */
body[data-lesson-motion=full] .playing-lesson .has-visual-exploration .illustration-drawing *{animation:none}
.visual-exploration-note{font-size:18px;line-height:1.45;color:#425e50;margin:12px 0 10px;max-width:46ch}
.visual-exploration-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.visual-exploration-button{appearance:none;font:inherit;font-size:18px;line-height:1.3;font-weight:600;color:#294c3a;background:#EEF7F5;border:2px solid #87a692;border-radius:12px;padding:10px 16px;min-height:46px;max-width:100%;cursor:pointer;text-align:left}
.visual-exploration-button:hover{background:#e7f1e9}
.visual-exploration-button:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.visual-exploration-button:disabled{cursor:default;opacity:.7}
.visual-exploration-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.visual-exploring .teaching-fraction{outline:2px dashed #6f9f88;outline-offset:6px}
.visual-exploring .count-dot{position:relative;z-index:1}
body[data-age-group=early] .visual-exploration-note,body[data-age-group=early] .visual-exploration-button{font-size:20px}
@media(max-width:460px){.visual-exploration-controls{width:100%}.visual-exploration-button{width:100%;text-align:center}}
@media(forced-colors:active){.visual-exploration-button{color:ButtonText;background:ButtonFace;border-color:ButtonText}.visual-exploration-button:focus-visible{outline-color:Highlight}.visual-exploring .teaching-fraction{outline-color:Highlight}}

/* Parallel labelled examples: selection changes attention, never the content,
   its order, or an answer. No arrows imply a sequence or cause. */
.concept-cards{display:flex;flex-wrap:wrap;gap:12px;width:100%;align-items:stretch}
.concept-card{appearance:none;display:block;flex:1 1 180px;min-width:0;max-width:100%;min-height:72px;padding:16px 18px;font:inherit;font-size:22px;line-height:1.35;font-weight:550;text-align:left;overflow-wrap:anywhere;border:2px solid #9db8a6;border-radius:12px;background:#f7faf7;color:#304c3c;cursor:pointer}
.concept-card:hover{background:#eef5ef}
.concept-card[aria-pressed=true]{outline:3px solid #256F66;outline-offset:2px;background:#e8f2e9;border-color:#256F66}
.concept-card:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
body[data-age-group=early] .concept-card{font-size:25px}
@media(forced-colors:active){.concept-card{color:ButtonText;background:ButtonFace;border-color:ButtonText}.concept-card[aria-pressed=true],.concept-card:focus-visible{outline-color:Highlight}}

/* ---- Direct-manipulation pictures: short directions, draggable pieces ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.has-visual-exploration{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.has-visual-exploration>.illustration-drawing{flex:1 0 100%}
.has-visual-exploration>.visual-exploration-note{flex:1 1 12ch;margin:0;font-size:18px;line-height:1.3;max-width:none;font-weight:600}
.has-visual-exploration>[class$="-controls"]{flex:0 0 auto}
.fraction-join-reset,.sharing-reset,.group-size-reset,.bundle-tens-reset,.unit-grid-reset,.boundary-reset,.hundreds-reset{appearance:none;min-height:40px;padding:4px 12px;border:2px solid #7FA9A3;border-radius:20px;background:#EEF7F5;color:#17324D;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.fraction-join-reset:focus-visible,.sharing-reset:focus-visible,.group-size-reset:focus-visible,.bundle-tens-reset:focus-visible,.unit-grid-reset:focus-visible,.boundary-reset:focus-visible,.hundreds-reset:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.fraction-join-reset[aria-disabled=true],.sharing-reset[aria-disabled=true],.group-size-reset[aria-disabled=true],.bundle-tens-reset[aria-disabled=true]{opacity:.55;cursor:default}
.drag-piece{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.drag-piece:focus-visible{outline:3px solid var(--focus);outline-offset:2px;z-index:3}
.drag-piece.is-dragging{cursor:grabbing;z-index:5;box-shadow:0 6px 14px rgba(32,60,43,.35);opacity:.95;transition:none}
.drop-ready{outline:3px dashed var(--focus);outline-offset:-3px;background-color:#eaf3ff}
/* Pieces keep a 44px touch area even when drawn smaller. */
.sharing-dot,.group-size-object,.bundle-tens-unit{position:relative}
.sharing-dot::after,.group-size-object::after,.bundle-tens-unit::after{content:"";position:absolute;inset:-8px;border-radius:50%}
.sharing-dot[aria-pressed=true]{outline:3px solid var(--focus);outline-offset:2px;background:#f2dcad}
/* fraction_join */
.fraction-join-wholes{gap:6px;width:min(100%,460px)}
.fraction-join-heading{margin:0 0 3px;font-size:18px;line-height:1.2}
.fraction-join-whole{height:clamp(44px,8vh,56px)}
.fraction-join-slot{height:clamp(44px,8vh,56px)}
.fraction-join-piece{font-size:16px}
.fraction-join-slot:empty{background:repeating-linear-gradient(45deg,#fff,#fff 6px,#E3F3F0 6px,#E3F3F0 12px)}
/* equal_sharing */
.sharing-supply{padding:6px 10px;margin-bottom:8px}
.sharing-supply-heading{margin-bottom:4px;gap:2px 12px;font-size:16px}
.sharing-supply-dots,.sharing-group-dots{gap:8px;min-height:36px}
.sharing-dot{width:30px;height:30px}
.sharing-groups{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.sharing-group{grid-template-columns:minmax(0,1fr);gap:2px;padding:4px 8px;min-height:60px;cursor:pointer}
.sharing-group-heading{flex-direction:row;align-items:baseline;gap:8px;min-height:24px}
.sharing-group-heading:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
/* group_size and bundle_tens */
.group-size-model,.bundle-tens-model{gap:8px}
.group-size-givens{font-size:18px;gap:2px 16px}
.group-size-tray,.bundle-tens-tray{padding:6px 10px;min-height:56px}
.group-size-tray-label,.bundle-tens-tray-label{display:inline-block;margin:0 10px 4px 0;font-size:16px}
.group-size-loose,.bundle-tens-loose{gap:8px;min-height:30px}
.group-size-object{min-width:28px;max-width:28px;width:28px;min-height:28px;max-height:28px;height:28px}
.group-size-groups{gap:8px}
.group-size-group{width:auto;min-width:96px;padding:4px 8px;gap:4px}
.group-size-group-label{font-size:14px}
.group-size-group-objects{gap:6px}
.group-size-loose-empty,.group-size-groups-empty,.bundle-tens-loose-empty,.bundle-tens-rods-empty{font-size:16px;color:#3C5670}
.bundle-tens-source{font-size:18px}
.bundle-tens-unit{min-width:24px;max-width:24px;width:24px;min-height:24px;max-height:24px;height:24px;border-radius:4px}
.bundle-tens-rods{gap:6px 12px}
.bundle-tens-rod{flex-direction:row;width:auto;gap:6px}
.bundle-tens-rod-label{font-size:16px;font-weight:700}
.bundle-tens-rod-cells{grid-template-columns:repeat(10,minmax(0,24px));grid-template-rows:24px;width:auto;height:24px;gap:0}
.bundle-tens-rod-cells .bundle-tens-unit{border-radius:0}
@media(max-width:420px){.bundle-tens-rod-cells{grid-template-columns:repeat(10,minmax(0,20px))}.bundle-tens-unit{min-width:20px;max-width:20px;width:20px;min-height:20px;max-height:20px;height:20px}}
@media(forced-colors:active){.drop-ready{outline-color:Highlight}.drag-piece:focus-visible{outline-color:Highlight}}
.has-visual-exploration{justify-content:center}
.fraction-join-wholes{margin:0 auto}
.fraction-join-row{display:grid;grid-template-columns:5em minmax(0,1fr);align-items:center;column-gap:8px}
.fraction-join-heading{margin:0;font-size:17px;text-align:right}
.fraction-join-wholes{width:min(100%,560px)}
@media(max-width:760px){.has-visual-exploration>.visual-exploration-note{font-size:16px}}
/* ---- Fit-to-screen scaling: pieces shrink with the viewport height ---- */
.boundary-model{--seg:clamp(36px,6.2vh,44px);grid-template-columns:20px var(--seg) minmax(0,1fr) var(--seg) 20px;grid-template-rows:auto var(--seg) auto var(--seg) auto;width:min(100%,calc(var(--boundary-width) * var(--seg) + 2 * var(--seg) + 40px))}
.boundary-caption{font-size:16px}.boundary-caption-top,.boundary-caption-bottom{padding:2px 0}
.unit-grid-model{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:4px 12px}
.unit-grid-width{grid-area:1/1;font-size:18px}.unit-grid-height{grid-area:2/2;font-size:18px;max-width:9ch}
.unit-grid{grid-area:2/1;--tile:clamp(36px,6.4vh,48px);width:calc(var(--unit-grid-width) * var(--tile))}
.unit-grid-unit-label{grid-area:3/1/4/3;font-size:16px;text-align:center}
.unit-grid-tile{font-size:22px}
.group-size-tray,.bundle-tens-tray{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.group-size-tray>.group-size-loose,.group-size-tray>.group-size-groups,.bundle-tens-tray>.bundle-tens-loose,.bundle-tens-tray>.bundle-tens-rods{flex:1 1 140px;min-width:0}
.group-size-tray-label,.bundle-tens-tray-label{margin:0;flex:0 0 auto}
.group-size-loose-empty,.group-size-groups-empty,.bundle-tens-loose-empty,.bundle-tens-rods-empty{flex:1 1 100%;margin:0}
.group-size-loose-empty:empty,.group-size-groups-empty:empty,.bundle-tens-loose-empty:empty,.bundle-tens-rods-empty:empty{display:none}
@media(max-height:760px){
  .sharing-dot{width:26px;height:26px}.sharing-group{min-height:48px}.sharing-supply-dots,.sharing-group-dots{min-height:30px;gap:6px}
  .fraction-join-whole,.fraction-join-slot{height:44px}
}
@media(max-width:760px){
  .workspace-panel .lesson-answer-section{gap:2px 8px}
  .answer-prompt{font-size:18px;margin:0}
  .lesson-answer-section .lesson-answer-form{flex:1 1 100%}
  .answer-entry{padding:2px}
  .lesson-answer-section .answer-actions{flex:1 1 100%;justify-content:space-between;gap:6px}
  .answer-actions #check-answer,.workspace-panel .lesson-hint{padding:4px 12px;font-size:16px;flex:1 1 0}
}
@media(max-height:700px){
  .sharing-dot{width:22px;height:22px}.sharing-supply-dots,.sharing-group-dots{gap:4px;min-height:26px}
  .sharing-group{min-height:44px;padding:2px 8px}.sharing-supply{padding:4px 8px;margin-bottom:6px}
  .group-size-object{min-width:24px;max-width:24px;width:24px;min-height:24px;max-height:24px;height:24px}
  .bundle-tens-unit{min-width:18px;max-width:18px;width:18px;min-height:18px;max-height:18px;height:18px}.bundle-tens-loose{gap:4px}
  .bundle-tens-rod-cells{grid-template-columns:repeat(10,minmax(0,18px));grid-template-rows:18px;height:18px}
  .group-size-tray,.bundle-tens-tray{padding:4px 8px;min-height:44px}
  .boundary-model{--seg:clamp(32px,5vh,44px)}
  .boundary-caption{font-size:14px}
  .unit-grid{--tile:clamp(34px,6vh,48px)}
}
.boundary-model{margin:0 auto}
@media(max-height:700px){
  .sharing-dot{width:20px;height:20px}
  .boundary-model{--seg:clamp(32px,4.6vh,44px)}
  .has-visual-exploration>.visual-exploration-note{font-size:15px}
  .fraction-join-reset,.sharing-reset,.group-size-reset,.bundle-tens-reset,.unit-grid-reset,.boundary-reset,.hundreds-reset{min-height:36px;padding:2px 10px;font-size:15px}
}
@media(max-height:700px){.workspace-panel #board-content .board-illustration{margin:2px auto 4px}}
/* ---- base_ten and hundreds models: side-by-side trays, cells scale with height ---- */
.base-ten-trays{--bt:clamp(11px,2.3vh,18px);grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:8px;align-items:start}
.base-ten-tray{padding:6px 8px}
.base-ten-quantity{margin-bottom:6px;font-size:18px}
.base-ten-rods{gap:8px}
.base-ten-rod{gap:4px;padding:4px;width:64px}
.base-ten-rod-stage{width:calc(var(--bt) * 2 + 8px);height:calc(var(--bt) * 10)}
.base-ten-rod-cells{grid-template-columns:var(--bt);grid-auto-rows:var(--bt)}
.base-ten-unit{width:var(--bt);height:var(--bt)}
.base-ten-rod[aria-pressed=true] .base-ten-rod-cells{grid-template-columns:repeat(2,var(--bt));gap:4px}
.base-ten-rod-name,.base-ten-rod-action{font-size:14px;line-height:1.2}
.hundreds-trays{--hc:clamp(6px,1.4vh,10px);grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:8px;align-items:start}
.hundreds-hundreds{grid-row:1 / span 2}
.hundreds-tray{padding:6px 8px}
.hundreds-quantity{margin-bottom:6px;font-size:18px}
.hundreds-flats,.hundreds-rods,.hundreds-loose{gap:8px}
.hundreds-flat{width:calc(var(--hc) * 10 + 12px);gap:4px;padding:4px 2px}
.hundreds-flat-name,.hundreds-flat-action{font-size:13px;line-height:1.2}
.hundreds-flat-rows{grid-template-columns:calc(var(--hc) * 10);grid-auto-rows:var(--hc);width:calc(var(--hc) * 10)}
.hundreds-flat-row{grid-template-columns:repeat(10,var(--hc));grid-template-rows:var(--hc);width:calc(var(--hc) * 10);height:var(--hc)}
.hundreds-unit{min-width:var(--hc);max-width:var(--hc);width:var(--hc);min-height:var(--hc);max-height:var(--hc);height:var(--hc)}
.hundreds-rod{grid-template-columns:var(--hc);grid-template-rows:repeat(10,var(--hc));width:var(--hc);height:calc(var(--hc) * 10)}
@media(max-width:520px){.hundreds-trays{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hundreds-hundreds{grid-column:1 / -1;grid-row:auto}.base-ten-trays{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:520px){.base-ten-trays{grid-template-columns:minmax(0,2.5fr) minmax(0,1fr)}.base-ten-rod{width:56px}.base-ten-rods{gap:6px}}
@media(max-height:700px){.base-ten-trays{--bt:clamp(10px,2vh,18px)}.hundreds-trays{--hc:clamp(5px,1vh,10px)}.base-ten-rod-name,.base-ten-rod-action,.hundreds-flat-name,.hundreds-flat-action{font-size:12px}}
@media(max-width:520px){.hundreds-trays{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:6px}.hundreds-hundreds{grid-column:auto}.hundreds-tray{flex:0 1 auto}.hundreds-quantity{font-size:15px;margin-bottom:4px}.hundreds-flat-action{display:none}}
@media(max-width:760px){.concept-cards{gap:6px}.concept-card{flex:1 1 140px;min-height:44px;padding:6px 10px;font-size:17px;line-height:1.2}body[data-age-group=early] .concept-card{font-size:18px}}

/* ---- Compact whole-lesson text: sizes follow the viewport height ---- */
.workspace-panel #board-content .lesson-category{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.workspace-panel #board-content header{padding:0;min-height:0}
.workspace-panel #board-content h2{font-size:clamp(20px,4vh,32px);line-height:1.1;margin:0 0 2px}
.workspace-panel #board-content :is(.board-paragraph,.board-steps li){font-size:clamp(16px,3.3vh,24px);line-height:1.3;margin-top:4px;margin-bottom:4px}
.workspace-panel .board-equation,.workspace-panel .board-answer-equation{font-size:clamp(22px,5vh,40px);line-height:1.15}
.workspace-panel .board-illustration figcaption{font-size:clamp(15px,2.6vh,20px);line-height:1.25;margin:4px 0 0}
.workspace-panel .sequence-step{font-size:clamp(16px,3vh,22px);padding:6px 12px}
.workspace-panel .illustration-drawing{gap:10px;min-height:0}
@media(max-height:800px){.workspace-panel .count-dot{transform-origin:center}.workspace-panel .liquid-glass,.workspace-panel .teaching-fraction{max-height:20vh}}
@media(max-width:760px){
  #expand-board{display:none}
  .workspace-actions{position:static;justify-content:flex-end}
  .workspace-actions:not(:has(button:not([hidden]):not(#expand-board))){display:none}
  .workspace-panel #board-content header{padding:0}
  .workspace-panel #board-content h2{font-size:clamp(17px,3.1vh,26px);margin-bottom:0}
  .workspace-panel #board-content :is(.board-paragraph,.board-steps li){font-size:clamp(15px,2.8vh,20px);margin-top:2px;margin-bottom:2px}
  .workspace-panel .board-equation,.workspace-panel .board-answer-equation{font-size:clamp(20px,3.8vh,30px)}
  .workspace-panel .sequence-step{font-size:clamp(14px,2.5vh,18px);padding:4px 10px}
  .workspace-panel .board-illustration{margin:2px auto}
  .workspace-panel .count-dot{transform:scale(.8)}
}

/* ======================================================================
   Bright, streamlined lesson look. Visible: title, picture, one large
   question, answer box, hint and check. Everything else is read aloud only.
   ====================================================================== */
:root{--ww-teal:#256F66;--ww-mint:#e3f4ea;--ww-leaf:#7cc9a9;--ww-leaf-ink:#2f8f6f;--ww-coral:#f28f6b;--ww-coral-soft:#fde5db;--ww-amber:#f6c667;--ww-amber-soft:#fff2cf;--ww-sky:#8cc4ef;--ww-sky-soft:#e1f0fc;--ww-ink:#17324D}
.whiteboard,.workspace-panel{background:#fff}
/* repeated summaries and group names are for assistive technology only */
.equal-groups-quantities,.group-size-givens,.bundle-tens-source,.take-away-quantities,.equal-group-label,.sharing-group-count,.sharing-supply-count,.sharing-supply-label,.group-size-group-label,.base-ten-quantity .base-ten-count{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* large, clear question and answer */
.workspace-panel .answer-prompt{font-size:clamp(22px,4vh,32px);line-height:1.25;font-weight:700;color:var(--ww-ink);margin:0 0 6px}
.workspace-panel .lesson-answer-section{border:0;background:#f1faf5;border-radius:22px;box-shadow:0 2px 0 #cfe9da}
.answer-entry{border:2px solid #9bcfb5;border-radius:14px;background:#fff}
.answer-entry:focus-within{border-color:var(--ww-teal);box-shadow:0 0 0 3px #cdeadb}
.answer-entry input,.inline-answer-form .answer-entry input{font-size:22px;font-weight:600}
.inline-answer-form .answer-entry input::placeholder,.answer-entry input::placeholder{font-size:20px}
.answer-actions #check-answer{font-size:18px;font-weight:700;border-radius:var(--action-radius);box-shadow:none}
.workspace-panel .lesson-hint{font-size:18px;font-weight:700;border-radius:var(--action-radius);background:var(--action-secondary-bg);border:2px solid var(--action-border);color:var(--ink)}
.workspace-panel .lesson-hint:hover:not(:disabled){background:var(--action-selected);border-color:var(--action-primary-hover)}
.workspace-panel .lesson-hint:active:not(:disabled){background:var(--sage)}
.workspace-panel #board-content h2{color:var(--ww-ink);font-weight:800}
/* pictures: colour, rounded shapes, fewer outlines */
.equal-groups{width:min(100%,460px)}
.equal-group{border:0;border-radius:18px;background:var(--ww-mint);padding:10px 16px}
.equal-group:nth-child(4n+2){background:var(--ww-amber-soft)}.equal-group:nth-child(4n+3){background:var(--ww-sky-soft)}.equal-group:nth-child(4n){background:var(--ww-coral-soft)}
.equal-group-dot{border:0;background:var(--ww-leaf);box-shadow:inset -2px -3px 0 rgba(0,0,0,.12)}
.equal-group:nth-child(4n+2) .equal-group-dot{background:var(--ww-amber)}.equal-group:nth-child(4n+3) .equal-group-dot{background:var(--ww-sky)}.equal-group:nth-child(4n) .equal-group-dot{background:var(--ww-coral)}
.equal-group:hover{filter:brightness(.97);background-color:inherit}
.equal-group[aria-pressed=true]{outline:4px solid var(--ww-teal);outline-offset:2px;border-color:transparent}
.concept-cards{gap:12px}
.concept-card{border:0;border-radius:18px;background:var(--ww-mint);font-weight:650;color:var(--ww-ink);box-shadow:0 3px 0 #c5e4d1}
.concept-card:nth-child(3n+2){background:var(--ww-amber-soft);box-shadow:0 3px 0 #f1dca0}.concept-card:nth-child(3n){background:var(--ww-sky-soft);box-shadow:0 3px 0 #bcd8ef}
.concept-card:hover{filter:brightness(.97);background-color:inherit}
.concept-card[aria-pressed=true]{outline:4px solid var(--ww-teal);outline-offset:2px}
.fraction-join-slot{border:2px solid #dbe9e0;border-radius:10px;background:#EEF7F5;margin:0 1px;height:clamp(44px,8vh,56px)}
.fraction-join-slot:empty{background:#EEF7F5}
.fraction-join-whole{gap:2px}
.fraction-join-piece{border:0;border-radius:9px;background:var(--ww-leaf);color:#0f3f33;box-shadow:inset 0 -4px 0 rgba(0,0,0,.14);font-size:20px}
.fraction-join-piece-B{border-style:none;background:var(--ww-amber);color:#5a3a00}
.fraction-join-heading{color:var(--ww-ink);font-size:20px}
.sharing-supply{border:0;background:var(--ww-sky-soft);border-radius:18px}
.sharing-group{border:0;border-radius:16px;background:var(--ww-mint)}
.sharing-group:nth-child(4n+2){background:var(--ww-amber-soft)}.sharing-group:nth-child(4n+3){background:#e7f2fd}.sharing-group:nth-child(4n){background:var(--ww-coral-soft)}
.sharing-dot{border:0;background:var(--ww-leaf);box-shadow:inset -2px -3px 0 rgba(0,0,0,.12)}
.sharing-supply .sharing-dot{background:var(--ww-sky)}
.group-size-tray,.bundle-tens-tray{border:0;background:var(--ww-sky-soft);border-radius:18px}
.group-size-group-tray,.bundle-tens-rod-tray{background:var(--ww-mint)}
.group-size-group{border:0;background:#fff;border-radius:14px;box-shadow:0 2px 0 #C9DEDC}
.group-size-object{border:0;background:var(--ww-coral);box-shadow:inset -2px -3px 0 rgba(0,0,0,.12)}
.bundle-tens-unit{border:0;background:var(--ww-amber);border-radius:5px}
.bundle-tens-rod-cells{outline:0}.bundle-tens-rod-cells .bundle-tens-unit{border-radius:3px;margin:0 1px;background:var(--ww-leaf)}
.unit-grid-tile{border:2px solid #fff;background:var(--ww-sky);border-radius:6px}
.unit-grid-tile[aria-pressed=true]{background:var(--ww-leaf)}
.unit-grid-width,.unit-grid-height{color:var(--ww-ink)}
.boundary-interior{border:0;background:var(--ww-sky-soft);border-radius:10px}
.boundary-segment{border:2px solid #fff;background:var(--ww-amber-soft);border-radius:6px}
.boundary-segment[aria-pressed=true]{background:var(--ww-coral)}
.base-ten-tray,.hundreds-tray{border:0;background:var(--ww-mint);border-radius:18px}
.base-ten-ones,.hundreds-ones{background:var(--ww-amber-soft)}
.base-ten-rod,.hundreds-flat{border:0;background:#fff;border-radius:12px;box-shadow:0 2px 0 #C9DEDC}
.base-ten-unit{border:0;background:var(--ww-leaf)}.hundreds-unit{border:0;background:var(--ww-leaf)}
.take-away-tray{border:0;background:var(--ww-mint);border-radius:18px}
.visual-exploration-note{color:#2c5c50;font-weight:700}
.fraction-join-reset,.sharing-reset,.group-size-reset,.bundle-tens-reset,.unit-grid-reset,.boundary-reset,.hundreds-reset,.visual-exploration-button{border:0;background:#fff;box-shadow:0 2px 0 #C9DEDC,0 0 0 2px #C9DEDC inset;color:var(--ww-teal);border-radius:20px}
@media(max-width:760px){.workspace-panel .answer-prompt{font-size:clamp(22px,3.4vh,26px)}.answer-entry input,.inline-answer-form .answer-entry input{font-size:22px}}
.equal-groups{width:min(100%,520px)}
.equal-group-dots{grid-template-columns:repeat(var(--equal-group-size),clamp(26px,6vh,44px));width:auto;max-width:none;gap:8px}
.unit-grid{--tile:clamp(36px,8vh,60px)}
@media(max-height:700px){.unit-grid{--tile:clamp(34px,6vh,48px)}.equal-group-dots{grid-template-columns:repeat(var(--equal-group-size),clamp(24px,4.6vh,32px))}}
@media(max-width:760px){
  .workspace-panel .answer-problem .lesson-answer-form.inline-answer-form{display:flex;width:100%}
  .inline-answer-form .answer-entry{width:100%}
  .inline-answer-form .answer-entry input{width:auto;max-width:none;flex:1 1 0}
  .equal-groups{gap:6px}.equal-group{padding:4px 12px;gap:6px}
  .unit-grid-width,.unit-grid-height{font-size:16px}.unit-grid-unit-label{font-size:14px}
  .workspace-panel .lesson-answer-section{padding:4px 8px}
  .workspace-panel .answer-prompt{margin:0 0 2px}
  .answer-actions #check-answer,.workspace-panel .lesson-hint{min-height:44px}
}
@media(max-width:760px){.has-visual-exploration{row-gap:2px}.unit-grid-model{gap:2px 10px}.unit-grid-unit-label{margin:0}.workspace-panel #board-content h2{line-height:1.05}}
@media(max-width:760px){.workspace-panel #board-content header{margin-bottom:0}.unit-grid{--tile:clamp(30px,5.2vh,40px)}.fraction-join-reset,.sharing-reset,.group-size-reset,.bundle-tens-reset,.unit-grid-reset,.boundary-reset,.hundreds-reset{min-height:34px}}
@media(max-width:760px){.workspace-panel .lesson-answer-section{margin:0 auto 2px}.workspace-panel #board-content{padding-bottom:0}}
.inline-answer-form .answer-entry input{width:auto;max-width:300px;flex:1 1 220px}
.workspace-panel .lesson-answer-form.inline-answer-form{max-width:100%}
@media(max-width:760px){
  .workspace-panel .count-caption,.workspace-panel .count-zero{font-size:20px}
  .workspace-panel .illustration-operator{font-size:24px}
  .workspace-panel .take-away-trays{grid-template-columns:1fr 1fr;gap:8px}
  .workspace-panel .take-away-tray{padding:6px 8px}
  .workspace-panel .take-away-tray-label{font-size:16px;margin:0 0 4px;background:transparent}
  .workspace-panel .take-away-grid{grid-template-columns:repeat(5,minmax(0,30px));gap:4px;min-height:0}
  .lesson-answer-section{position:relative}
}
@media(max-width:760px){
  .workspace-panel .count-dots{gap:2px 4px;max-width:none}
  .workspace-panel .count-group{gap:2px}
  .workspace-panel .visual-exploration-button{min-height:44px;padding:4px 14px;font-size:16px}
}
@media(max-width:760px){.equal-group{padding:2px 12px}.equal-group-dots{grid-template-columns:repeat(var(--equal-group-size),clamp(22px,4.2vh,30px));gap:6px}.workspace-panel #board-content .board-paragraph{margin:0}}

/* ---- Final polish: tablet header, tall screens, unit-grid labels, stacked fraction blank ---- */
@media(min-width:761px) and (max-width:1099px){
  .app-shell>.topbar{gap:6px}
  .topbar>.brand{font-size:22px}
  #conversation-toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .conversation-toggle{padding:7px;min-width:44px;min-height:44px}
  .topbar #new-lesson>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .topbar #new-lesson{padding:6px;min-width:44px;justify-content:center}
  .topbar .main-nav a{padding:6px 8px;font-size:15px}
  .topbar>.header-actions{gap:4px}
  .primary-lesson-tools>button{font-size:14px;line-height:1.1;padding:2px 6px}
}
/* unit grid: short labels hugging the shape */
.unit-grid-model{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:2px 8px}
.unit-grid-width{grid-area:1/1;justify-self:center;font-size:20px;line-height:1.1}
.unit-grid-height{grid-area:2/2;justify-self:start;align-self:center;font-size:20px;line-height:1.1;max-width:none;white-space:nowrap}
.unit-grid{grid-area:2/1}
.unit-grid-unit-label{grid-area:3/1/4/3;justify-self:center;text-align:center}
@media(max-width:760px){
  .workspace-panel #board-content h2{font-size:min(clamp(17px,3.1vh,26px),calc((100vw - 24px) / 17));white-space:normal}
  .unit-grid-width,.unit-grid-height{font-size:17px}
}
/* a numerator blank over a fixed denominator reads as a stacked fraction */
.answer-fraction{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;gap:2px;margin:0 .15em}
.answer-fraction .inline-answer-form{display:flex;width:auto}
.answer-fraction .answer-entry input,.answer-fraction .inline-answer-form .answer-entry input{width:130px;max-width:160px;flex:1 1 auto;text-align:center}
.answer-fraction-bar{display:block;width:100%;height:4px;border-radius:2px;background:var(--ww-ink)}
.answer-fraction-denominator{display:block;line-height:1}
/* tall screens (tablet portrait): pictures, question and spacing grow to use the height */
@media(min-height:900px) and (min-width:761px){
  .workspace-panel #board-content h2{font-size:clamp(28px,4vh,44px)}
  .workspace-panel #board-content{padding-top:4vh}
  .workspace-panel .board-equation,.workspace-panel .board-answer-equation{font-size:clamp(34px,4.6vh,56px)}
  .workspace-panel .answer-prompt{font-size:clamp(30px,3.8vh,46px)}
  .workspace-panel #board-content :is(.board-paragraph,.board-steps li){font-size:clamp(24px,3vh,34px)}
  .workspace-panel .lesson-answer-section{padding:22px 24px;margin-top:3vh}
  .answer-entry input,.inline-answer-form .answer-entry input{font-size:28px;min-height:60px}
  .answer-actions #check-answer,.workspace-panel .lesson-hint{font-size:22px;min-height:60px;padding:8px 26px}
  .fraction-join-whole,.fraction-join-slot{height:clamp(56px,8.5vh,96px)}
  .fraction-join-wholes{width:min(100%,640px);gap:14px}
  .fraction-join-heading{font-size:26px}
  .fraction-join-piece{font-size:26px}
  .teaching-fraction{height:clamp(110px,14vh,170px)}
  .equal-groups{width:min(100%,640px);gap:16px}
  .equal-group{padding:14px 22px}
  .equal-group-dots{grid-template-columns:repeat(var(--equal-group-size),clamp(40px,5.4vh,64px));gap:12px}
  .concept-card{font-size:30px;min-height:110px;padding:22px 26px}
  .unit-grid{--tile:clamp(44px,5.4vh,72px)}
  .unit-grid-width,.unit-grid-height{font-size:28px}
  .unit-grid-unit-label{font-size:22px}
  .count-dot.count-object{width:56px;height:56px}
  .sharing-dot{width:42px;height:42px}.group-size-object{width:40px;min-width:40px;max-width:40px;height:40px;min-height:40px;max-height:40px}
  .sharing-group{min-height:100px}
  .visual-exploration-note{font-size:24px}
  .fraction-join-reset,.sharing-reset,.group-size-reset,.bundle-tens-reset,.unit-grid-reset,.boundary-reset,.hundreds-reset,.visual-exploration-button{font-size:20px;min-height:52px}
}
.unit-grid-unit-label{width:max-content;margin-inline:-60px;white-space:nowrap}
.answer-fraction .answer-entry input,.answer-fraction .inline-answer-form .answer-entry input{width:170px;max-width:200px;font-size:22px}
@media(max-width:760px){.workspace-panel #board-content h2{font-size:min(clamp(17px,3.1vh,26px),calc((100vw - 24px) / 19))}.answer-fraction .answer-entry input,.answer-fraction .inline-answer-form .answer-entry input{width:150px}}
@media(min-height:900px) and (min-width:761px){
  .workspace-panel #board-content h2{font-size:clamp(24px,3.4vh,38px)}
  .workspace-panel #lesson-workspace{min-height:100%}
  .workspace-panel .teaching-pane{display:flex;flex-direction:column;justify-content:center;min-height:100%}
}

/* The "correct" toast floats over the title row; it never pushes the lesson down or covers the answer. */
body .learning-celebration{position:fixed;top:calc(var(--lesson-header-height) + 52px);left:50%;right:auto;bottom:auto;transform:translateX(-50%);margin:0;padding:6px 14px;max-width:calc(100vw - 24px);z-index:20;pointer-events:none;box-shadow:0 4px 14px rgba(32,59,59,.18)}
@media(max-width:760px){body .learning-celebration{top:150px;font-size:16px}.unit-grid{--tile:clamp(28px,4.4vh,40px)}.workspace-panel .lesson-answer-section{padding:2px 8px}}
@media(max-width:1099px){.workspace-panel #board-content header{padding-right:0}}
.answer-fraction .answer-entry input::placeholder{font-size:17px}
.answer-fraction .answer-entry input,.answer-fraction .inline-answer-form .answer-entry input{width:200px;max-width:220px}
@media(max-width:760px){
  .answer-fraction .answer-entry input,.answer-fraction .inline-answer-form .answer-entry input{width:180px}
}
@media(min-height:900px) and (min-width:761px) and (max-width:900px){
  .answer-actions #check-answer,.workspace-panel .lesson-hint{font-size:19px;padding:6px 14px;min-height:56px}
  .lesson-answer-section .answer-actions{gap:8px}
}

/* A worked example ("Shown: 3 equal groups") is a quiet caption, not a second headline. */
.board-block.board-worked{font-size:clamp(15px,1.6vw,18px);font-weight:600;color:var(--muted,#5b6b66);margin:2px 0}

/* Long lessons trim spacing before scrolling. Text and controls keep readable minimum sizes. */
#whiteboard.board-fit-1 #board-content :is(.board-paragraph,.board-steps li){font-size:18px;line-height:1.4;margin-top:1px;margin-bottom:1px}
#whiteboard.board-fit-1 .concept-card{min-height:44px;padding:4px 10px;font-size:16px}
#whiteboard.board-fit-1 .answer-prompt{font-size:clamp(18px,3vh,24px)}
#whiteboard.board-fit-2 #board-content :is(.board-paragraph,.board-steps li){font-size:18px;line-height:1.4;margin:0}
#whiteboard.board-fit-2 .concept-card{min-height:44px;padding:3px 8px;font-size:16px}
#whiteboard.board-fit-2 .answer-prompt{font-size:clamp(18px,2.7vh,20px)}
#whiteboard.board-fit-2 #board-content h2{font-size:clamp(18px,2.8vh,22px)}
#whiteboard.board-fit-1 .board-choices{gap:8px;margin-top:10px}
#whiteboard.board-fit-1 .board-choice{min-height:44px;padding:7px 14px;font-size:17px}
#whiteboard.board-fit-2 .board-choices{gap:6px;margin-top:8px}
#whiteboard.board-fit-2 .board-choice{min-height:44px;padding:5px 12px;font-size:16px}
/* Test-style questions may scroll: a passage and its choices must remain legible. */
#whiteboard.board-fit-3 #board-content{padding-top:6px;padding-bottom:6px}
#whiteboard.board-fit-3 #board-content h2{font-size:clamp(18px,2.4vh,20px);margin:2px 0 6px}
#whiteboard.board-fit-3 #board-content :is(.board-paragraph,.board-steps li){font-size:18px;line-height:1.4;margin:0}
#whiteboard.board-fit-3 .board-choices{gap:4px;margin-top:6px}
#whiteboard.board-fit-3 .board-choice{min-height:44px;padding:3px 10px;font-size:16px;line-height:1.4}
#whiteboard.board-fit-3 .answer-prompt{font-size:18px}
/* Keep the title and prompt visible at the tightest fit level. */
#whiteboard.board-fit-4 #board-content{padding-top:2px;padding-bottom:4px}
#whiteboard.board-fit-4 #board-content h2{font-size:18px;margin:0 0 6px}
#whiteboard.board-fit-4 #board-content :is(.board-paragraph,.board-steps li){font-size:18px;line-height:1.4;margin:0}
#whiteboard.board-fit-4 .board-choices{gap:3px;margin-top:4px}
#whiteboard.board-fit-4 .board-choice{min-height:44px;padding:2px 10px;font-size:16px;line-height:1.4}
#whiteboard.board-fit-4 .answer-prompt{font-size:18px}
/* Keep the learner's latest contribution and the tutor's response with the work. */
.lesson-turn{margin:20px 0 0;padding:14px 18px;border-left:4px solid var(--lagoon);background:var(--pool);border-radius:0 12px 12px 0;overflow-wrap:anywhere}
.lesson-turn p{margin:0;font-size:18px;line-height:1.5}
.lesson-turn p+p{margin-top:8px}
.lesson-turn-learner{font-weight:700}