:root{color-scheme:light;--forest:#193b34;--ink:#34433a;--cream:#f5ecd8;--paper:#fff7e8;--edge:#b6a281;--gold:#ffd471;--mint:#c6d8b4}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#386349,var(--forest) 65%);color:var(--paper);font:16px/1.5 ui-rounded,system-ui,-apple-system,sans-serif;min-height:100vh}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button,.button{cursor:pointer;border:1px solid #b5a080;border-bottom:3px solid #a48c67;border-radius:9px 12px 8px 11px;background:#f9efd8;color:var(--ink);padding:10px 15px;font-weight:700;min-height:44px}button:hover{background:#fff7e9}button:active{transform:translateY(1px)}button:disabled{opacity:.42;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #df992b;outline-offset:3px}a{color:inherit}header{max-width:1380px;margin:auto;display:flex;gap:12px;align-items:center;padding:20px 26px;flex-wrap:wrap}.brand{text-decoration:none;flex:1;font-size:24px;font-weight:850}.brand span{font-size:14px;color:#c8dcc6;display:block;font-weight:550}.home-link{font-size:14px;text-decoration:none;white-space:nowrap}header button{font-size:14px;background:#d8e3c7}main{max-width:1280px;margin:0 auto;padding:15px 26px 60px}h1{font-size:clamp(25px,3vw,40px);line-height:1.16;margin:0 0 14px}h2{font-size:23px;line-height:1.25;margin:0 0 12px}h3{font-size:18px;margin:12px 0 6px}p{margin:8px 0 16px}.intro{max-width:760px;color:#dbe6cc}.trails{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px}.trail{display:flex;flex-direction:column;background:var(--cream);color:var(--ink);text-decoration:none;padding:21px;border:1px solid var(--edge);border-bottom:5px solid #ab936e;border-radius:14px 20px 13px 18px;min-height:195px;box-shadow:0 6px 0 #102c2460}.trail .club,.eyebrow{font-size:13px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:#5c795c}.trail h2{margin:9px 0}.trail p{font-size:14px;margin:0 0 12px}.trail .enter{margin-top:auto;font-weight:800}.trail.s8{background:#e4edd2}.lesson-heading{display:flex;justify-content:space-between;gap:24px;align-items:start}.lesson-heading p{max-width:850px;color:#d6e4cb}.progress{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 24px}.progress span{font-size:13px;padding:5px 9px;border:1px solid #9cbda04a;border-radius:20px;color:#c3d4b9}.progress .current{background:#f7d879;color:#304634}.progress .past{background:#42624b}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px}.stage{background:var(--cream);color:var(--ink);padding:25px;border:1px solid var(--edge);border-bottom:6px solid #a9916a;border-radius:18px 25px 17px 22px;min-height:510px;box-shadow:0 10px 22px #0f2a2030}.stage .instruction{font-size:20px;font-weight:750;line-height:1.4;max-width:760px}.aside{background:#dce8cb;color:var(--ink);border-radius:14px 19px 13px 17px;padding:20px;align-self:start}.aside p,.aside li{font-size:14px}.aside ul{padding-left:20px}.aside button{width:100%;margin-top:8px}.hint{border-left:4px solid #cd9e4f;padding-left:12px;margin:15px 0;font-size:15px}.stage-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid #c9b899}.primary{background:#f8d472;border-color:#b99340}.feedback{min-height:42px;background:#fff9e9;border-radius:9px;padding:10px 14px;margin-top:15px;color:#425947}.feedback:empty{background:transparent}.stats{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.stat{padding:9px 13px;background:#e3d7bb;border-radius:9px;font-weight:750}.stat small{display:block;font-size:12px;font-weight:650}.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}.controls label{display:flex;gap:6px;align-items:center;flex-wrap:wrap}input[type=number]{width:85px;min-height:44px;padding:8px;border:1px solid #b39e7b;border-radius:8px;color:var(--ink);background:#fffbef}select{max-width:100%;min-height:44px;padding:7px;background:#fff7e5;border:1px solid #b39e7b;border-radius:8px}.count-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(24px,52px));gap:4px;width:max-content;max-width:100%;margin:20px auto}.unit{aspect-ratio:1;min-height:0;padding:0;background:#eadfc8;border:1px dashed #b8a78a;border-radius:3px;position:relative;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:none}.unit.on{border:1px solid #977957;border-bottom:3px solid #b88d50;background:linear-gradient(155deg,#f4b760,#ed9c40);box-shadow:2px -2px #f7c482}.unit.part-b{background:#8bbb8b;border-bottom-color:#659465;box-shadow:2px -2px #accca0}.unit.grouped{background:#8fb7b9}.unit.selected{outline:2px solid #3f7454}.unit.old{background:#cad8a8;border:1px solid #829468}.unit.marked::after{content:attr(data-mark);background:#fff4d8;border-radius:50%;min-width:23px;padding:0 3px;color:#34433a;font-size:13px}.unit.counting-friend{background:linear-gradient(155deg,#eb7167,#d94643);border-bottom-color:#aa3b37;box-shadow:2px -2px #f3967e}.unit-face{display:block;width:100%;height:100%;overflow:visible}.unit.invalid{background:#efb4a1}.geometry{width:100%;height:auto;max-height:365px;display:block;margin:15px auto;overflow:visible}.geometry .edge-hit{cursor:pointer;stroke:transparent;stroke-width:20;fill:none}.geometry .edge{stroke:#c0ab83;stroke-width:5;stroke-linecap:round}.geometry .edge.visited{stroke:#57794b;stroke-width:7}.geometry text{fill:#34433a;font:700 14px system-ui}.geometry .edge-hit:focus{stroke:#dbae5c77;outline:none}.shape-wrap{overflow-x:auto;max-width:100%;padding:8px 5px}.groups{display:flex;justify-content:center;align-items:end;gap:16px;flex-wrap:wrap;margin:16px 0}.group{border:2px solid #c4b18c;border-radius:13px;padding:10px;background:#fff5df;min-width:85px;text-align:center}.group .count-grid{margin:9px auto;grid-template-columns:repeat(var(--cols),27px)}.group .unit{font-size:11px}.group button{padding:5px 10px;margin:2px;min-height:36px}.group-label{font-size:13px;font-weight:750}.group.spread .count-grid{gap:12px}.pool{padding:12px;background:#dce7c7;border-radius:10px;text-align:center}.tile-legend{font-size:14px;color:#5f654b}.patchboards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.patchboards>div{background:#fff7e9;padding:12px;border-radius:12px;overflow:auto}.cups{display:flex;gap:34px;align-items:end;justify-content:center;flex-wrap:wrap}.cup-wrap{text-align:center}.vessel{margin:auto;position:relative;border:4px solid #738773;border-top:2px dashed #8da58a;border-radius:3px 3px 17px 17px;background:#fff9e5;overflow:hidden;display:flex;align-items:end}.water{width:100%;background:repeating-linear-gradient(to top,#91cacc 0,#91cacc calc(var(--cupstep) - 2px),#ecf4e4 calc(var(--cupstep) - 2px),#ecf4e4 var(--cupstep));transition:height .25s;min-height:0}.vessel::after{content:'full line';position:absolute;top:0;right:3px;font-size:10px;color:#5f7565}.cup-wrap.selected{outline:3px solid #d7a646;outline-offset:8px;border-radius:5px}.clue-cards{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.clue-cards button{max-width:180px}.clue-cards .selected{background:#e4c677}.clue-cards .checked{border-color:#639164}.clock{max-width:290px;width:100%;display:block;margin:12px auto}.clock text{font:700 16px system-ui;fill:#34433a}.clue-order{padding:12px;background:#e3d7bb;min-height:50px;border-radius:8px}.equation{text-align:center;font-size:clamp(22px,3vw,35px);font-weight:850;margin:16px 0;color:#3f6349}.note{font-size:14px;color:#5c6851}.done-card{max-width:800px;padding:30px;background:var(--cream);color:var(--ink);border-radius:20px}.done-card ul{padding-left:22px}.tag-arena{height:330px;position:relative;background:#d2e0b8;border:3px solid #9aab7c;border-radius:16px;overflow:hidden;margin:16px 0}.tag-target,.tag-player{position:absolute;width:58px;height:58px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:850;transform:translate(-50%,-50%);z-index:2}.tag-target{background:#f0c78d;color:#4a4737;padding:0;border-color:#a48358}.tag-player{background:#82b77c;color:#244833;border:2px solid #53724a;pointer-events:none}.tag-controls{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.factor-trials{display:flex;gap:6px;flex-wrap:wrap}.factor-trials button{min-width:44px;padding:6px}.factor-trials .tested{background:#d6d9c0}.factor-trials .factor{background:#bdd697}.factor-trials .chosen{outline:2px solid #477651}.proof-row{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}.proof-row .shape-wrap{max-width:46%}.proof-row .geometry{min-width:130px}.proof-symbol{font-size:30px;font-weight:800}dialog{max-width:1000px;width:calc(100% - 30px);max-height:90vh;overflow:auto;background:var(--cream);color:var(--ink);border:2px solid #b5a080;border-radius:19px;padding:27px}dialog::backdrop{background:#102b25bb}.close{float:right;font-size:25px;line-height:1;min-width:44px}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:9px;border-bottom:1px solid #cbbc9f;vertical-align:top}.calc-groups{max-height:380px;overflow:auto}.chip{font-size:13px;padding:4px 7px;border-radius:20px;background:#dbe5c8;display:inline-block;margin:2px}.small{font-size:13px}.empty{padding:25px;color:#dce7c7}@media(max-width:900px){.workspace{grid-template-columns:1fr}.aside{order:2}.stage{padding:18px}.aside ul{display:flex;flex-wrap:wrap;gap:5px 22px}.brand{font-size:20px}header{padding:15px}main{padding:10px 15px 40px}.count-grid{grid-template-columns:repeat(var(--cols),minmax(17px,42px));gap:3px}}@media(max-width:500px){header button{padding:8px 10px;font-size:13px}.home-link{font-size:12px}.brand{min-width:130px}.patchboards{grid-template-columns:1fr}.stage .instruction{font-size:18px}.controls label{font-size:14px}.group{padding:6px}.group .count-grid{grid-template-columns:repeat(var(--cols),23px)}.cups{gap:20px}.tag-arena{height:285px}}@media(prefers-reduced-motion:reduce){.water{transition:none}button:active{transform:none}}

.count-grid{position:relative;--unit-gap:4px;gap:var(--unit-gap)}.patch-frame{position:absolute;pointer-events:none;left:-2px;top:-2px;width:calc((100% + var(--unit-gap))*2/var(--cols) - var(--unit-gap) + 4px);aspect-ratio:1;border:4px solid #537978;border-radius:4px;z-index:2}.patch-frame.whole{inset:-2px;width:auto;height:auto;aspect-ratio:auto}.patch-frame::after{content:"1 patch";position:absolute;left:-3px;top:-22px;font:700 12px system-ui;background:#d6e6df;color:#385957;padding:2px 5px;border-radius:4px}.count-grid:has(.patch-frame){margin-top:30px}@media(max-width:900px){.count-grid{--unit-gap:3px}}

summary{cursor:pointer;font-weight:750;padding:8px 0}details{border-top:1px solid #9cae8a66;margin-top:14px}.done-card details{margin:20px 0}

/* Quantity identity remains underneath explicit lesson roles. The connected
   patch frame and green leftover edge still identify pieces and remainders. */
.unit.on[data-quantity-color]{background:linear-gradient(155deg,color-mix(in srgb,var(--quantity-color),#fff2d9 14%),var(--quantity-color));border-color:#756e63;border-bottom-color:#6b655d;box-shadow:2px -2px color-mix(in srgb,var(--quantity-color),#fff2d9 35%);color:#fff7e8}
.unit.on[data-quantity-color="#d2d2d2"],.unit.on[data-quantity-color="#969696"]{color:#34433a}
.unit.part-b[data-quantity-color]{border-color:#659465;outline:1px solid #659465}
.unit.grouped[data-quantity-color]{border-color:#498b8d}

/* One shared calculator, comfortable both on its own page and in a lesson. */
header a.button{text-decoration:none;font-size:14px;background:#d8e3c7}
.calculator-heading{max-width:780px;margin:6px 0 25px}.calculator-heading .eyebrow{color:#c7dcb9}.calculator-heading p{color:#deead3}
.calculator-stage{min-height:0;padding:clamp(18px,3vw,34px)}
.calc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-bottom:18px}.calc-toolbar .note{margin:0;max-width:560px}.calc-toolbar button{flex:none}
.calc-inputs{display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);gap:16px;max-width:760px;margin:18px auto 24px;align-items:end}
.calc-field>label,.calc-operation{display:block;font-size:14px;font-weight:750}.calc-field>div{display:flex;gap:8px;align-items:center;margin-top:7px}
.calc-field input[type=number]{min-width:0;width:100%;font-size:clamp(23px,4vw,35px);min-height:60px;padding:9px 12px}.calc-operation select{display:block;width:100%;margin-top:7px;font-size:28px;min-height:60px;text-align:center}
.calc-sign{min-width:46px;min-height:52px;padding:7px;font-size:22px}.calc-equation{font-size:clamp(21px,3.1vw,36px);overflow-wrap:anywhere;line-height:1.35}.calc-explanation{font-size:17px;line-height:1.6;max-width:900px;margin:15px auto;overflow-wrap:anywhere}
.calc-identity{text-align:center;padding:12px;background:#e1e8cd;border-radius:10px;font-weight:750}.calc-error{border-left:4px solid #b44e3b;background:#ffeedb;padding:14px;border-radius:7px;color:#673c30}
body[data-page=calculator] .calc-groups{max-height:none;overflow:visible}#calculator .calc-groups{overscroll-behavior:contain}#calculator .note{line-height:1.55}
@media(max-width:560px){.calc-inputs{gap:8px;grid-template-columns:minmax(0,1fr) 65px minmax(0,1fr)}.calc-field>div{gap:4px}.calc-field>label,.calc-operation{font-size:12px}.calc-sign{min-width:36px;padding:4px;font-size:20px}.calc-field input[type=number]{padding:7px;min-height:54px}.calc-operation select{min-height:54px;padding:4px}.calculator-stage{padding:16px}.calc-toolbar{gap:9px}}
.signed-legend{padding:12px 15px;background:#e7e6d3;border-radius:10px;font-size:14px}.signed-legend strong{display:inline-block;min-width:30px;text-align:center;border:1px solid #96836b;border-radius:4px;background:#edc88f}.signed-legend strong+strong{background:#bfd0eb}
.signed-step{border:1px solid #c8b696;border-radius:13px;padding:15px;margin:18px 0;background:#fff8e9}.signed-result{border-color:#8fa482;background:#f5f7e7}.signed-step h3{margin:0 0 12px}.signed-zero-explainer,.signed-equation{font-size:16px;line-height:1.6}
.geometry.signed-tiles{max-height:none;width:100%;max-width:560px;height:auto;margin:12px auto;overflow:visible}.signed-lot{flex:0 1 280px;max-width:100%}.signed-lot .signed-tiles{max-width:290px}.signed-remainder{max-width:560px;margin:16px auto}.signed-empty{padding:18px;border:1px dashed #a3b097;border-radius:10px;text-align:center;color:#4f6249}.signed-groups{align-items:start}
@media(max-width:560px){.signed-step{padding:10px}.signed-lot{flex-basis:100%}.signed-legend{padding:10px}.signed-zero-explainer,.signed-equation{font-size:15px}}