@font-face{font-family:Atkinson;src:url('./fonts/atkinson-hyperlegible-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Atkinson;src:url('./fonts/atkinson-hyperlegible-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Playwrite;src:url('./fonts/playwrite-it-moderna-400.woff2') format('woff2');font-weight:400;font-display:swap}
:root{color-scheme:light;--paper:#f5f2e9;--surface:#fffdf7;--ink:#203047;--muted:#637070;--line:#dedfd6;--line-strong:#aeb9b2;--accent:#a34e2a;--accent-pale:#f8e5d8;--green:#316653;--answer:#e9f0e9;--shadow:0 18px 65px #20304724;font-family:Atkinson,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overscroll-behavior:none}body{-webkit-text-size-adjust:100%;text-size-adjust:100%}button,input,select{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.35}button svg{width:21px;height:21px;flex-shrink:0}button:focus-visible,[role=button]:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:hover:not(:disabled){filter:brightness(.97)}button:active:not(:disabled){transform:translateY(1px)}h1,h2,h3,p{margin:0}button{min-height:46px}button,input,select{border-radius:12px}button{border:1px solid var(--line);background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px}button b{font-weight:700}input,select{border:1px solid var(--line-strong);background:var(--surface);padding:11px 12px;min-height:48px;min-width:0}input[type=range]{accent-color:var(--accent);padding:0;border:0;background:transparent}input[type=checkbox]{accent-color:var(--accent);width:22px;height:22px;min-height:22px}a{color:var(--accent)}[hidden]{display:none!important}.icon-button{width:46px;padding:10px;flex-shrink:0}.quiet{border-color:transparent}.primary{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:700}.accent-button{background:var(--accent);border-color:var(--accent);color:var(--surface);font-weight:700}
#app{height:100%;height:100dvh}.shell{display:flex;flex-direction:column;height:100%;padding:0 max(20px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));gap:0;overflow:hidden}.header{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:16px;flex-shrink:0;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{height:39px;width:38px;border-radius:11px;background:var(--ink);color:var(--paper);display:grid;place-items:center}.brand-mark svg{height:27px;width:27px;stroke-width:1.5}.brand h1{font-size:22px;letter-spacing:-.7px;line-height:1.05}.brand p{font-size:12px;color:var(--muted);margin-top:4px}.header-actions{display:flex;gap:8px;align-items:center}.segmented{display:inline-flex;gap:3px;padding:4px;border:1px solid var(--line);border-radius:14px;flex-shrink:0}.segmented button{border:0;border-radius:9px;padding:8px 17px;min-height:38px;font-size:15px;white-space:nowrap}.segmented button[aria-pressed=true]{background:var(--ink);color:var(--surface);box-shadow:0 2px 3px #20304710}.toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;min-height:73px;flex-shrink:0}.calculation{justify-self:start;text-align:left;border-color:transparent;padding-left:0;min-width:0;gap:10px}.calculation span{font-size:clamp(17px,2.25vw,26px);font-weight:700;letter-spacing:-.5px;line-height:1.15;overflow-wrap:anywhere}.calculation svg{color:var(--muted);height:16px;width:16px}.new-button{justify-self:end}.model-zone{flex:1;min-height:0;position:relative;display:flex;gap:12px}.model-pane{flex:1;min-width:0;min-height:0;position:relative;border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column}.model-heading{min-height:37px;padding:8px 17px 5px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;flex-shrink:0}.model-heading .exchange-badge{letter-spacing:0;text-transform:none;color:var(--accent);font-size:13px;white-space:nowrap}.written-wrap{flex:1;min-height:0;display:flex;padding:0 18px 5px;align-items:center;justify-content:center}.written-svg{display:block;width:100%;height:100%;min-width:0;overflow:visible}.written-svg text{text-anchor:middle}.place-heading{font:700 22px Atkinson,sans-serif}.big-digit{font:400 90px Playwrite,cursive;font-variant-numeric:tabular-nums}.operator{font:400 65px Atkinson,sans-serif;fill:var(--muted)}.currency{font:400 32px Atkinson,sans-serif;fill:var(--muted)}.exchange-digit{font:700 39px Atkinson,sans-serif}.note-empty{font:400 32px Atkinson,sans-serif;fill:var(--line-strong)}.note-target{fill:transparent;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:4 4}.note-target.chosen{fill:var(--accent-pale);stroke:var(--accent);stroke-width:2;stroke-dasharray:none}.written-svg [role=button]{cursor:pointer}.model-foot{padding:1px 15px 8px;text-align:center;font-size:11px;color:var(--muted);flex-shrink:0;min-height:21px}
.block-mat{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));padding:0 10px 6px;gap:5px}.place-column{min-width:0;min-height:0;display:flex;flex-direction:column;border-radius:12px;background:color-mix(in srgb,var(--place) 3%,transparent);position:relative;border:1.5px solid transparent}.place-column.active{background:color-mix(in srgb,var(--place) 7%,transparent);border-color:color-mix(in srgb,var(--place) 45%,transparent)}.place-column.donor,.place-column.destination{border-color:var(--accent)}.place-label{color:var(--place);border:0;border-radius:10px;padding:5px 1px;gap:2px;flex-direction:column;flex-shrink:0;min-height:47px}.place-label span{font-size:clamp(11px,1.45vw,17px);text-transform:capitalize;font-weight:700;letter-spacing:-.25px}.place-label b{font-size:11px;font-weight:400;opacity:.8}.quantity{display:flex;gap:6px;align-items:baseline;justify-content:center;color:var(--place);height:38px;flex-shrink:0;overflow:hidden}.quantity strong{font-size:27px;line-height:1}.quantity span{font-size:12px;white-space:nowrap}.pieces{flex:1;min-height:0;width:100%;color:var(--place);overflow:hidden}.pieces>svg{display:block;width:100%;height:100%}.empty-place-text{text-anchor:middle;font:400 38px Atkinson,sans-serif;fill:currentColor;opacity:.25}.removed-piece{opacity:.16}.arrived-piece{animation:arrive .35s ease-out both;transform-box:fill-box;transform-origin:center}.selected-piece{animation:glow .5s ease-out both}.place-bottom{display:flex;align-items:center;justify-content:center;gap:7px;border-top:1px solid var(--line);min-height:36px;flex-shrink:0;padding:3px 2px;font-size:12px;color:var(--muted);margin:0 7px}.place-bottom.done{color:var(--green);background:var(--answer);border-radius:8px;font-size:24px;border-color:transparent}.place-bottom svg{height:15px;width:15px}.together .model-zone{flex-direction:column}.together .written-pane{flex:.44;min-height:150px}.together .blocks-pane{flex:1}.together .written-pane .model-heading,.together .written-pane .model-foot{display:none}.together .written-wrap{padding:5px 12px}.together .written-svg{max-height:100%}
.explanation{min-height:87px;flex-shrink:0;display:flex;align-items:center;gap:16px;padding:13px 5px 10px}.step-orb{height:38px;min-width:38px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:14px;font-weight:700;color:var(--muted)}.step-copy{flex:1;min-width:0}.step-copy h2{font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1.15}.step-copy p{font-size:14px;color:var(--muted);line-height:1.3;margin-top:5px;max-width:1000px}.step-copy .success{color:var(--green)}.timeline{display:flex;gap:3px;height:4px;flex-shrink:0;margin-bottom:10px}.timeline span{height:4px;flex:1;border-radius:3px;background:var(--line)}.timeline span.past{background:var(--ink)}.timeline span.current{background:var(--accent)}.navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;min-height:48px}.nav-left,.nav-right{display:flex;gap:8px;align-items:center}.next-step{min-width:195px}.nav-caption{font-size:12px;color:var(--muted);margin-right:4px}.practice-strip{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:5px 3px}.practice-target{display:flex;gap:8px;align-items:center;font-size:14px}.practice-target b{color:var(--accent);text-transform:capitalize}.keypad{display:grid;grid-template-columns:repeat(10,minmax(0,1fr)) 50px;gap:6px;flex-shrink:0;margin-bottom:9px}.keypad button{background:var(--surface);font-size:23px;font-weight:700;padding:5px;min-height:48px}.keypad button:last-child{background:transparent}.practice-mode .explanation{min-height:58px;padding-top:5px;padding-bottom:6px}.practice-mode .step-copy h2{font-size:18px}.practice-mode .step-copy p{font-size:13px}.practice-mode .step-orb{display:none}.practice-mode .navigation{min-height:46px}
dialog{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:0;box-shadow:var(--shadow);width:min(650px,calc(100% - 26px));max-height:calc(100dvh - 30px);overflow:auto}dialog::backdrop{background:#20304777;backdrop-filter:blur(3px)}.dialog-head{position:sticky;top:0;z-index:3;background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;border-bottom:1px solid var(--line)}.dialog-head h2{font-size:25px;letter-spacing:-.5px}.dialog-head p{font-size:13px;color:var(--muted);margin-top:3px}.dialog-body{padding:20px 23px;display:grid;gap:21px}.dialog-body fieldset{padding:0;margin:0;border:0;min-width:0}.dialog-body legend,.field-label{display:block;font-size:15px;font-weight:700;margin-bottom:9px}.dialog-body .segmented{display:flex;width:100%}.dialog-body .segmented button{flex:1;padding-left:10px;padding-right:10px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:700}.field select{font-size:15px;font-weight:400;width:100%}.range-label{display:flex;justify-content:space-between;gap:12px}.range-label output{color:var(--accent);font-weight:700}.digit-range{width:100%}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.options-grid button{padding:11px 12px;text-align:left;align-items:flex-start;flex-direction:column;gap:3px;min-height:68px;font-size:15px}.options-grid button small{font-size:12px;line-height:1.2;color:var(--muted)}.options-grid button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-pale)}.toggle{display:flex;align-items:center;gap:10px;font-size:15px}.dialog-footer{position:sticky;bottom:0;z-index:3;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;padding:15px 22px;background:var(--surface)}.dialog-footer .primary{min-width:180px}.field-note{font-size:13px;color:var(--muted);line-height:1.45}.custom-fields{display:grid;gap:12px}.custom-fields input{font-size:26px;width:100%;font-variant-numeric:tabular-nums}.error{color:#9c342a;font-size:14px;line-height:1.4}.example-presets{display:flex;flex-wrap:wrap;gap:7px}.example-presets button{min-height:42px;font-size:14px;background:var(--paper)}.guide p{font-size:16px;line-height:1.5}.guide h3{font-size:19px;margin-top:3px}.guide .guide-row{display:grid;grid-template-columns:34px 1fr;gap:12px}.guide-row>span{color:var(--accent);font-size:21px}.zoom-dialog{width:min(740px,calc(100% - 24px))}.zoom-area{height:min(65dvh,620px);min-height:250px;padding:18px;display:flex;flex-direction:column;color:var(--place)}.zoom-area .pieces{max-width:600px;align-self:center}.zoom-title{font-size:21px;color:var(--place);text-align:center}.zoom-note{font-size:15px;padding:0 22px 18px;line-height:1.4;color:var(--muted)}#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:14px 22px;border-radius:15px;box-shadow:var(--shadow);max-width:min(560px,90%);font-size:15px;z-index:100;display:none;line-height:1.4}#toast.show{display:block}@keyframes arrive{from{opacity:.2;transform:scale(.84)}to{opacity:1;transform:scale(1)}}@keyframes glow{from{opacity:.4}to{opacity:1}}
@media(min-width:1450px) and (orientation:landscape){.together .model-zone{flex-direction:row}.together .written-pane{flex:.75}.together .blocks-pane{flex:1.35}.together .written-pane .model-heading{display:flex}.together .written-pane .model-foot{display:block}.shell{padding-inline:30px}.header{min-height:76px}.toolbar{min-height:80px}.explanation{min-height:98px}.step-copy h2{font-size:27px}.step-copy p{font-size:17px}.navigation button{min-height:52px;font-size:17px}}
@media(max-width:900px){.shell{padding-inline:14px}.toolbar{grid-template-columns:1fr auto;gap:8px;min-height:110px;padding:8px 0}.calculation{grid-column:1;min-height:36px;padding-block:0}.toolbar>.segmented{grid-column:1;grid-row:2;justify-self:start}.new-button{grid-column:2;grid-row:1/3}.header{min-height:66px}.header-actions{gap:5px}.header-actions .segmented button{padding-inline:12px}.header-actions .settings-label{display:none}.header-actions .settings-button{width:46px;padding:10px}.brand p{font-size:11px}.step-copy h2{font-size:21px}.step-copy p{font-size:14px}.place-label span{font-size:13px}.place-label b{font-size:10px}.quantity{height:34px}.quantity strong{font-size:25px}.quantity span{font-size:10px}.model-heading{padding-inline:12px;font-size:10px}.next-step{min-width:170px}.together .written-pane{flex:.45}}
@media(max-width:599px){.shell{padding-inline:9px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.header{min-height:61px;gap:7px}.brand{gap:7px}.brand-mark{width:31px;height:34px}.brand h1{font-size:19px}.brand p{display:none}.header-actions .segmented{padding:3px}.header-actions .segmented button{font-size:13px;padding-inline:8px;min-height:36px}.header-actions .icon-button,.header-actions .settings-button{width:40px;min-height:44px;padding:9px}.header-actions{gap:2px}.toolbar{min-height:102px;padding:6px 1px;gap:6px}.calculation span{font-size:21px}.toolbar>.segmented button{font-size:13px;min-height:34px;padding:7px 12px}.new-button{font-size:13px;padding-inline:10px;min-height:44px}.new-button svg{width:17px;height:17px}.model-pane{border-radius:15px}.model-heading{min-height:30px;padding:7px 10px 4px;font-size:9px;letter-spacing:.8px}.model-heading .exchange-badge{font-size:11px}.written-wrap{padding-inline:6px}.model-foot{font-size:10px;padding-bottom:6px;min-height:17px}.block-mat{gap:2px;padding:0 4px 4px}.place-label{min-height:41px;padding-block:4px}.place-label span{font-size:11px}.place-label b{font-size:9px}.quantity{height:26px;gap:4px}.quantity strong{font-size:20px}.quantity span{font-size:9px}.place-bottom{margin-inline:2px;font-size:10px;min-height:29px;gap:3px}.place-bottom.done{font-size:19px}.place-bottom svg{width:11px;height:11px}.explanation{padding:10px 2px;gap:8px;min-height:92px}.step-orb{display:none}.step-copy h2{font-size:18px;line-height:1.16}.step-copy p{font-size:12px;line-height:1.3}.nav-caption{display:none}.nav-left,.nav-right{gap:5px}.navigation{gap:6px;min-height:46px}.navigation button{font-size:13px;min-height:46px;padding:8px 10px;border-radius:10px}.navigation .icon-button{width:40px;padding:9px}.next-step{min-width:126px}.navigation .reveal-label{display:none}.navigation .reveal-button{width:44px}.timeline{margin-bottom:7px;gap:2px}.together .model-zone{gap:7px}.together .written-pane{min-height:105px;flex:.45}.together .blocks-pane .model-heading{min-height:26px}.keypad{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-bottom:7px}.keypad button{min-height:41px;font-size:21px}.keypad button:last-child{grid-column:5/7}.practice-strip{min-height:42px;padding:3px 1px;font-size:12px}.practice-target{font-size:12px;gap:5px}.practice-strip .quiet{font-size:12px;min-height:36px;padding:4px 8px}.practice-mode .explanation{min-height:54px}.practice-mode .step-copy h2{font-size:15px}.practice-mode .step-copy p{font-size:11px}.practice-mode .navigation button{padding-inline:8px}.practice-mode .navigation .primary{min-width:136px}.dialog-head{padding:15px 17px}.dialog-head h2{font-size:22px}.dialog-body{padding:18px 17px;gap:18px}.dialog-footer{padding:12px 17px}.dialog-footer .primary{min-width:150px}.dialog-body .segmented button{padding-inline:8px;font-size:14px}.pair{gap:10px}.options-grid button{font-size:14px}.block-mat.dense{min-width:550px}.dense-model{overflow-x:auto}.dense-model .block-mat{min-width:550px}.dense-model .model-heading,.dense-model .model-foot{position:sticky;left:0}.dense-model{overscroll-behavior-x:contain}}
@media(max-height:680px) and (min-width:600px){.header{min-height:58px}.toolbar{min-height:60px}.explanation{min-height:73px;padding-top:7px;padding-bottom:7px}.step-copy h2{font-size:19px}.step-copy p{font-size:13px}.model-heading{min-height:28px;padding-block:5px}.place-label{min-height:38px}.quantity{height:29px}.navigation button{min-height:44px}.together .written-pane{min-height:100px}.model-foot{font-size:10px}.practice-mode .keypad button{min-height:42px}.practice-mode .explanation{min-height:48px}}
@media(max-height:540px){.shell{height:auto;min-height:100dvh;overflow:visible}.model-zone{height:350px;flex:none}.together .model-zone{height:540px}.practice-mode .model-zone{height:320px}body{overflow:auto}.toolbar{min-height:65px}.explanation{min-height:65px}.header{min-height:55px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.header,.toolbar,.navigation,.timeline,.keypad,.practice-strip{display:none!important}html,body,#app,.shell{height:auto!important;overflow:visible!important}.shell{padding:0}.model-zone{height:170mm!important;flex:none}.explanation{min-height:0}.model-pane{break-inside:avoid}.model-heading{color:#333}}
.practice-answer{min-height:45px;font-size:25px;color:var(--ink);border:1px solid var(--line);margin-bottom:3px;background:var(--surface)}.practice-answer.chosen{background:var(--accent-pale);border-color:var(--accent)}
/* Two models use the screen's long direction; neither is a narrow letterbox. */
@media(min-width:600px) and (orientation:portrait){.together .written-pane{flex:.72}.together .blocks-pane{flex:1}}
@media(min-width:850px) and (orientation:landscape){.together .model-zone{flex-direction:row}.together .written-pane{flex:.7;min-height:0}.together .blocks-pane{flex:1.3}.together .written-pane .model-heading{display:flex}.together .written-pane .model-foot{display:block}.together .written-wrap{padding-inline:8px}.together .block-mat{padding-inline:5px;gap:3px}.together .quantity span{font-size:10px}.together .place-label span{font-size:13px}.together .model-heading{font-size:9px;padding-inline:10px;letter-spacing:.7px}.together .model-heading .exchange-badge{font-size:11px}}
@media(max-width:359px){.brand-mark{display:none}.navigation [data-act=back]{font-size:0;width:40px;padding:9px;gap:0}.navigation .next-step{min-width:120px}.nav-left,.nav-right{gap:3px}.navigation{gap:4px}.navigation .icon-button{width:38px}.header-actions .segmented button{padding-inline:7px}.header-actions .icon-button,.header-actions .settings-button{width:38px}.quantity span{display:none}.model-heading .exchange-badge{font-size:10px}}