:root{font-family:system-ui,sans-serif;color:#172535;background:#f6f8fa}*{box-sizing:border-box}body{margin:0}main{max-width:850px;margin:auto;padding:1rem 1.25rem 3rem}h1,h2,h3{line-height:1.2}section{background:#fff;border:1px solid #bdc9d4;border-radius:10px;padding:1rem;margin:1rem 0}button,input,select,textarea{font:inherit}button{background:#173d68;color:#fff;border:2px solid #173d68;border-radius:6px;padding:.5rem .8rem;margin:.25rem;cursor:pointer}button:hover{background:#0c2a49}button:disabled{opacity:.55;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #d35d1e;outline-offset:2px}label{display:block;margin:.6rem 0}label select{display:block;max-width:100%;margin-top:.25rem}.glyph{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;vertical-align:middle}.glyph svg{width:2rem;height:2rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}.key-grid{display:flex;flex-wrap:wrap;gap:.5rem}.key-cell{border:1px solid #687d91;border-radius:6px;padding:.3rem .6rem;min-width:6rem}.numeral{display:inline-block;white-space:nowrap;border-bottom:2px solid #173d68;padding:.15rem}.diagram{display:flex;flex-wrap:wrap;gap:.55rem;margin:.7rem 0}.group{border:2px solid #43647e;border-radius:6px;padding:.4rem;min-width:8rem;background:#eef4fa}.group small{display:block}.bundle-sample,.larger-sample{display:flex;flex-wrap:wrap;gap:2px;border:2px solid #173d68;border-radius:4px;padding:3px;margin:.4rem 0;width:max-content;max-width:100%;background:#fff}.bundle-sample{width:5.3rem}.loose-sample{display:flex;flex-wrap:wrap;gap:4px;max-width:8rem;margin:.4rem 0}.mini-bundle{display:grid;grid-template-columns:repeat(3,3px);gap:1px;border:1px solid #43647e;padding:2px}.dot{display:inline-block;width:5px;height:5px;background:#173d68;border-radius:50%}.loose-sample .dot{width:8px;height:8px}.mini-bundle .dot{width:3px;height:3px}.response{margin:1rem 0;padding:.8rem;background:#f3f6fa;border-radius:6px}.keypad button{min-width:2.7rem;background:#fff;color:#173d68}.keypad{display:flex;flex-wrap:wrap}.choice{display:block;padding:.45rem;border:1px solid #b0bcc7;margin:.4rem 0;border-radius:5px}.choice input{margin-right:.7rem}.vis{margin:.5rem 0;padding:.4rem;border-left:3px solid #667f9c}textarea{width:100%;min-height:5rem}input[type=number]{width:5rem}pre,table{max-width:100%;overflow-x:auto}pre{white-space:pre-wrap;overflow-wrap:anywhere}.muted{color:#425568}.warning{border-left:4px solid #a34d00;padding:.6rem}#error{color:#a01020;font-weight:600;min-height:1.5rem}@media(max-width:500px){main{padding:.6rem}.key-cell{min-width:5.5rem}.group{min-width:6rem}button{padding:.5rem}}
.counter-set{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.3rem;min-height:2.8rem;min-width:4rem;padding:.35rem;border:1px solid #8097aa;border-radius:6px;background:#fff;vertical-align:middle}.counter{display:inline-block;width:1rem;height:1rem;border-radius:50%;background:#173d68}.empty-collection{font-size:.8rem;color:#425568}.key-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}.key-cell{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}.key-cell .counter-set{min-width:5.5rem}.teaching-picture{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.7rem;background:#eef4fa;border-radius:6px}.samples{display:flex;flex-wrap:wrap;gap:.3rem;max-width:100%;margin:.35rem 0}.teaching-feedback{border-left:4px solid #173d68;background:#eef4fa;padding:.65rem}
.symbol-choices{border:0;margin:.7rem 0;padding:0}.symbol-choices .choice{display:inline-flex;align-items:center;margin:.25rem}.symbol-choices .numeral{margin-left:.25rem}
.quantity-preview{border-top:1px solid #bdc9d4;margin-top:1rem;padding-top:.6rem}.quantity-preview h3{font-size:1rem;margin:.2rem 0}.quantity-preview .counter-set{display:flex;width:100%;max-width:100%;border:0;background:transparent;padding:.2rem 0;gap:.25rem}.quantity-preview .counter{width:.65rem;height:.65rem;flex:none}
.bundle-stack{flex-direction:column;flex-wrap:nowrap;align-items:flex-start}.bundle-stack .bundle-sample{margin:.15rem 0}
.bundle-sample{display:flex;flex-wrap:nowrap;align-items:center;gap:1px;width:5.3rem;height:1.5rem;border:3px solid #075955;background:#087970;padding:.18rem}.bundle-sample .dot{flex:1 1 0;width:auto;height:.7rem;border-radius:2px;background:#f5ffff}
.bundle-workspace{display:grid;grid-template-columns:minmax(7rem,1fr) minmax(0,2fr);gap:.7rem;margin:.8rem 0}.bundle-dropzone,.bundle-source{border:2px solid #43647e;border-radius:8px;padding:.65rem;min-height:9rem;background:#eef4fa}.bundle-dropzone{border-style:dashed;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.bundle-dropzone.active{background:#d8f5e9;border-color:#087970}.bundle-dropzone p{margin:.4rem 0;font-size:.9rem}.bundle-source{background:#fff}.bundle-counter-mat,.bundle-selected-dots{display:flex;flex-wrap:wrap;gap:.3rem;margin:.55rem 0;position:relative;touch-action:none}.bundle-counter{width:2.2rem;height:2.2rem;min-width:2.2rem;padding:0;margin:0;border:0;border-radius:50%;background:#173d68}.bundle-counter:hover{background:#28619b}.bundle-candidate{display:inline-block;position:relative;border:3px solid #087970;border-radius:1.4rem;padding:.35rem .6rem;background:#e8f7f4;touch-action:none;z-index:1}.bundle-drag-handle{cursor:grab;font-size:.85rem;font-weight:700;color:#075955;touch-action:none}.bundle-drag-handle:focus-visible{outline:3px solid #d35d1e;outline-offset:2px}.bundle-selected-dots{margin:.3rem 0}.selected-counter{background:#173d68}.bundle-lasso{position:absolute;display:none;pointer-events:none;border:2px dashed #087970;border-radius:1rem;background:rgba(8,121,112,.13);z-index:2}.bundle-status{border-left:3px solid #087970;background:#e8f7f4;padding:.55rem}@media(max-width:500px){.bundle-workspace{grid-template-columns:1fr}.bundle-source{order:1}.bundle-dropzone{order:2;min-height:6rem}}
.teaching-feedback.correct{border-color:#167a3c;background:#e8f6ed;color:#13552c;font-weight:700}.teaching-feedback.incorrect{border-color:#ad6514;background:#fff4e5;color:#703c06;font-weight:700}
.practice-feedback{border-left:4px solid #667f9c;padding:.7rem;font-weight:700}.practice-feedback.correct{color:#13552c;border-color:#167a3c;background:#e8f6ed}.practice-feedback.incorrect{color:#703c06;border-color:#ad6514;background:#fff4e5}.practice-feedback.skipped{color:#34465a;background:#f1f4f7}
.demo-chart .diagram{flex-wrap:nowrap}.demo-chart .group{flex:1 1 0;min-width:0;overflow:hidden}.demo-chart .larger-sample{display:grid;grid-template-columns:repeat(4,max-content);width:max-content}.demo-chart .loose-sample{flex-wrap:wrap}.demo-status{padding:.6rem;background:#eef4fa;border-left:3px solid #43647e}.demo-new-dot{animation:counter-appear .22s ease-out}@keyframes counter-appear{from{transform:scale(.1);opacity:.2}to{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.demo-new-dot{animation:none}}
#key{position:sticky;top:0;z-index:10;margin:.4rem 0;padding:.35rem .4rem;box-shadow:0 2px 8px rgba(23,61,104,.12)}#key h2{font-size:.9rem;line-height:1;margin:0 0 .2rem}#key .key-description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#key .key-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.18rem}#key .key-cell{min-width:0;padding:.1rem;display:flex;flex-direction:column;justify-content:center;gap:.08rem;overflow:hidden}#key .counter-set{display:grid;grid-template-columns:repeat(3,.48rem);grid-auto-rows:.48rem;justify-content:center;align-content:center;width:100%;height:1.5rem;min-height:1.5rem;min-width:0;padding:0;border:0;gap:.07rem;background:transparent}#key .counter{width:.48rem;height:.48rem}#key .empty-key-mark{grid-column:1/4;justify-self:center;width:1.2rem;height:.9rem;border:1px dashed #8097aa;border-radius:.2rem}#key .numeral{padding:0;border-bottom:1px solid #173d68;line-height:1}#key .glyph{width:1.65rem;height:1.65rem}#key .glyph svg{width:1.5rem;height:1.5rem;stroke-width:2.3}
.exchange-choices{align-items:flex-start;gap:.35rem}.exchange-choices .bundle-option{background:#fff;color:#173d68;padding:.35rem;min-width:6.1rem}.exchange-choice-stack{display:flex;flex-direction:column;gap:.2rem}.exchange-choice-stack .bundle-sample{margin:0}.exchange-explorer{border:1px solid #7b9aaa;border-radius:8px;background:#f3faf9;padding:.7rem;margin:.8rem 0}.exchange-explorer h4{margin:.15rem 0}.exchange-explorer p{margin:.35rem 0}.exchange-units{display:flex;flex-wrap:wrap;gap:.35rem;margin:.7rem 0}.exchange-unit{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#173d68;margin:0;padding:.25rem;border:3px solid #43647e;min-width:2.5rem;min-height:2.5rem}.exchange-unit.bundle{min-width:6rem}.exchange-unit .bundle-sample{margin:0}.exchange-unit.loose .dot{width:1rem;height:1rem}.exchange-unit.selected{border-color:#b65012;background:#fff0df;box-shadow:0 0 0 2px #b65012}.exchange-status{border-left:3px solid #087970;padding:.4rem;background:#e8f7f4}.exchange-result .diagram{margin:.55rem 0}
.lesson-review-list{border:1px solid #bdc9d4;border-radius:8px;background:#f3f6fa;padding:.45rem .65rem;margin:.5rem 0 1rem}.lesson-review-list summary{cursor:pointer;font-weight:600}.lesson-review-list button{background:#fff;color:#173d68}.review-card{border:1px solid #bdc9d4;border-radius:8px;padding:.8rem;margin:1rem 0;background:#fff}
.v19-chart{display:grid;grid-template-columns:repeat(var(--places),minmax(0,1fr));gap:.45rem;width:100%;max-width:40rem;margin:.55rem 0}.v19-place{display:flex;flex-direction:column;align-items:center;min-width:0;min-height:7rem;padding:.45rem .3rem;border:1px solid #7890a4;border-radius:7px;background:#f0f6fa;text-align:center}.v19-place strong{font-size:.92rem}.v19-contents{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;flex:1;width:100%;margin:.3rem 0}.v19-empty{font-size:.9rem;color:#43556a}.v19-mark{display:flex;align-items:center;justify-content:center;min-height:2.6rem;width:100%;border-top:2px solid #173d68}.v19-mark .glyph{width:2.1rem;height:2.1rem}.v19-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem;max-width:8rem}.v19-dot{display:inline-block;flex:none;width:.68rem;height:.68rem;border-radius:50%;background:#173d68}.v19-bundle{display:inline-flex;align-items:center;justify-content:center;width:5.6rem;min-height:1.55rem;padding:.18rem;border:3px solid #087970;border-radius:6px;background:#e8f7f4}.v19-bundle .v19-dots{gap:.12rem;flex-wrap:nowrap}.v19-bundle .v19-dot{width:.43rem;height:.43rem}.v19-larger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.13rem;max-width:8.3rem;padding:.25rem;border:3px double #6b4d1f;border-radius:7px;background:#fff7e8}.v19-larger .v19-bundle{width:3.7rem;min-height:1.25rem;padding:.1rem;border-width:2px}.v19-larger .v19-bundle .v19-dots{gap:1px}.v19-larger .v19-bundle .v19-dot{width:.25rem;height:.25rem}.v19-transition{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem .75rem;margin:.8rem 0}.v19-transition>.v19-chart{margin:0;grid-row:2}.v19-caption{font-weight:700}.v19-parts{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.v19-parts .v19-chart{flex:1 1 17rem;max-width:19rem}.v19-operator{font-size:1.4rem;font-weight:700}.v19-rationale{padding:.7rem;border-left:4px solid #087970;background:#e8f7f4}.v19-saved{color:#13552c;font-weight:700}.v19-workspace{padding:.8rem;border:1px solid #7b9aaa;border-radius:8px;background:#f3faf9;margin:.8rem 0}.v19-workspace h3{margin-top:0}.v19-workspace-controls{display:flex;flex-wrap:wrap;gap:.7rem}.v19-select-region{flex:1 1 12rem}.v19-select-row{display:flex;flex-wrap:wrap;gap:.2rem;margin:.35rem 0}.v19-select-item{display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;min-height:2.4rem;padding:.2rem;margin:0;background:#fff;color:#173d68}.v19-select-item .v19-bundle{margin:0}.v19-select-item.chosen{outline:3px solid #b65012;background:#fff0df}.v19-workspace-feedback{padding:.5rem;border-left:3px solid #087970;background:#e8f7f4}.v19-demo{border:1px solid #7890a4;border-radius:8px;padding:.65rem}.v19-demo-picture{min-height:8rem}.v19-demo-status{margin:.4rem 0}.v19-static{margin:.6rem 0}.v19-static summary{cursor:pointer}.v19-static-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.v19-static-pair .v19-chart{grid-row:2}.v19-controls{display:flex;flex-wrap:wrap}.v19-controls button:first-child{font-weight:700}#screen h2,#screen h3,#screen textarea,#screen button{scroll-margin-top:7rem}@media(max-width:650px){.v19-transition{grid-template-columns:1fr}.v19-transition>.v19-chart{grid-row:auto}.v19-chart{gap:.2rem}.v19-place{padding:.3rem .15rem}.v19-place strong{font-size:.82rem}.v19-parts .v19-chart{flex-basis:100%}.v19-static-pair{grid-template-columns:1fr}.v19-static-pair .v19-chart{grid-row:auto}}@media(prefers-reduced-motion:reduce){.v19-demo *{animation:none!important;transition:none!important}}
#screen h2[tabindex="-1"]:focus{outline:none}
.v19-larger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;width:max-content;max-width:100%;padding:.55rem .18rem .2rem;border:3px solid #6b4d1f;background:#fff2ce;clip-path:polygon(50% 0,100% 29%,100% 100%,0 100%,0 29%)}
.v19-larger-row{display:flex;justify-content:center;gap:.08rem;width:100%}
.v19-larger .v19-bundle{width:1.95rem;min-height:1rem;padding:.03rem;border-width:1.5px}
.v19-larger .v19-bundle .v19-dots{gap:1px}
.v19-larger .v19-bundle .v19-dot{width:.16rem;height:.16rem}
.v21-exchange{border:1px solid #7890a4;border-radius:8px;padding:.65rem;margin:.6rem 0}
.v21-exchange-stage{display:grid;min-height:8rem}
.v21-exchange-stage>.v19-chart{grid-area:1/1;margin:0}
.v21-combine-parts{grid-area:1/1;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.v21-combine-parts .v19-chart{flex:1 1 14rem;max-width:20rem;margin:0}
.v21-exchange-stage>[hidden]{display:none}
.v21-exchange-status{margin:.5rem 0}
.assessment-mat{padding:.8rem;border:1px solid #7890a4;border-radius:8px;background:#f3faf9;margin:.75rem 0}
.assessment-mat h3{margin-top:0}
.v19-mat-object{display:inline-flex;align-items:center;justify-content:center;min-height:1.5rem;max-width:100%}
.assessment-mat-source{border-bottom:1px solid #9ab0bf;padding:.6rem 0}.assessment-mat-source .v19-chart{margin:.25rem 0}.assessment-mat-add{display:inline-flex;align-items:center;gap:.45rem;margin:.2rem .4rem .2rem 0;background:#fff;color:#173d68}.assessment-mat-add .v19-bundle{margin:0}
.assessment-progress{font-weight:700;margin:.2rem 0 .6rem}.assessment-mat-controls{display:flex;flex-wrap:wrap;gap:.35rem}.assessment-mat .v19-place .v19-select-item{max-width:100%;margin:.1rem 0}.assessment-mat .v19-place .v19-select-item .v19-bundle{max-width:100%}
@media(prefers-reduced-motion:reduce){.v21-exchange *{animation:none!important;transition:none!important}}
.lesson-mode{display:inline-block;margin:.35rem 0 .2rem;padding:.45rem .7rem;border-left:5px solid #087970;border-radius:4px;background:#e8f7f4;color:#123e3a;font-size:1rem;font-weight:800;letter-spacing:.02em}
.v19-workspace>.v19-chart,.assessment-mat>.v19-chart{align-items:start}
.assessment-mat>.free-mat-rows{grid-template-columns:1fr;max-width:none;overflow:visible}
.free-mat-rows>.v19-place{display:grid;grid-template-columns:7rem minmax(0,1fr);align-items:center;gap:.5rem;min-height:3.4rem;padding:.4rem .5rem;text-align:left}
.free-mat-rows .v19-contents{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-content:center;gap:.3rem;margin:0;min-width:0}
.free-mat-rows .v19-contents>.v19-select-item{flex:none;margin:0;min-width:2.4rem;min-height:2.4rem}
@media(max-width:650px){.free-mat-rows>.v19-place{grid-template-columns:1fr;gap:.25rem}.free-mat-rows>.v19-place>strong{text-align:left}.free-mat-rows .v19-contents{justify-content:flex-start}}
.v19-workspace-controls,.assessment-mat-controls{position:relative;background:#f3faf9}
.test-result{padding:.8rem;border:1px solid #7890a4;border-radius:7px;background:#f0f6fa;margin:.8rem 0}
.v27-tray{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.15rem;padding:.3rem;border:3px solid #087970;border-radius:8px;background:#e8f7f4;max-width:13rem;width:100%}.v27-slot{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px dashed #087970;border-radius:4px;background:#fff}.v27-slot .v19-dot{visibility:hidden;width:.75rem;height:.75rem}.v27-slot.filled .v19-dot{visibility:visible;animation:counter-appear .2s ease-out}.v27-compact{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.2rem .35rem;border-top:1px solid #bdc9d4;font-size:.9rem}.v27-states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin:.6rem 0}.v27-state{min-width:0;border:1px solid #bdc9d4;border-radius:6px;padding:.35rem}.v27-state>.v19-chart{margin:.25rem 0}.v27-state .v19-place{min-height:5rem;padding:.2rem .1rem}.v27-state .v19-place strong{font-size:.72rem}.v27-state .v19-bundle{width:3.3rem}.v27-state .v19-larger{transform:scale(.75);transform-origin:center}.v27-saved-answer{padding:.5rem;border:1px solid #bdc9d4;border-radius:5px;background:#f3f6fa}.empty-answer{display:inline-block;min-width:12rem;padding:.45rem;border:1px dashed #7890a4;border-radius:4px;color:#425568;background:#fff}.v19-demo-picture .v19-chart{max-width:25rem}#screen h2,#screen h3,#screen button,#screen textarea{scroll-margin-top:8rem}@media(max-width:700px){.v27-states{grid-template-columns:1fr}.v27-state>.v19-chart{max-width:100%}.v27-state .v19-place strong{font-size:.82rem}}@media(prefers-reduced-motion:reduce){.v27-slot.filled .v19-dot{animation:none}}
.v27-state .v19-contents > .v19-bundle{box-sizing:border-box;width:min(100%,3.3rem);padding:.08rem;border-width:2px}.v27-state .v19-contents > .v19-bundle .v19-dots{max-width:100%;flex-wrap:nowrap;gap:.05rem}.v27-state .v19-contents > .v19-bundle .v19-dot{width:.3rem;height:.3rem}
.v27-state .v19-larger .v19-bundle{box-sizing:border-box;width:1.95rem;max-width:100%;padding:.03rem;border-width:1.5px}.v27-state .v19-larger .v19-bundle .v19-dots{gap:1px}.v27-state .v19-larger .v19-bundle .v19-dot{width:.16rem;height:.16rem}
.assessment-step-track,.result-marks{display:flex;align-items:center;gap:.35rem;margin-top:.35rem}.assessment-step-track span{flex:1;max-width:2.5rem;height:.5rem;border-radius:1rem;background:#d5dfe8}.assessment-step-track .done{background:#087970}.assessment-step-track .current{background:#173d68;outline:2px solid #173d68;outline-offset:2px}.result-marks{flex-wrap:wrap}.result-marks span{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2rem;height:2rem;border-radius:50%;font-weight:800}.result-marks .correct{background:#e5f5eb;color:#126b2e}.result-marks .other{background:#edf1f5;color:#465769}