body:has(.num-screen){background:var(--rose,#f3e2eb)}
.num-screen{display:flex;flex-direction:column;min-height:0;flex:1;width:100%;overflow:auto}.num-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;flex:1;padding:12px 0}.num-prompt{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;font-size:clamp(16px,2vw,23px)}.num-prompt .btn{padding:5px 10px}.num-expression{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;font-size:clamp(24px,3vw,36px)}.num-term{background:transparent;color:var(--ink);padding:8px 12px;border-radius:12px;font-size:inherit;opacity:1!important}.num-focus{background:#fff1b8}.num-entry{display:flex;align-items:center;gap:10px}.num-entry input{font-size:30px;text-align:center;width:230px;padding:10px;background:white}.num-arrows{display:flex;gap:25px}.num-arrows>div{display:flex;flex-direction:column;align-items:center;gap:3px}.num-arrows strong{font-size:35px}.num-arrows .num-entry{flex-direction:row-reverse}.num-arrows input{width:70px;padding:4px}.num-pad{display:grid;grid-template-columns:repeat(6,52px);gap:5px}.num-pad button{background:#fffefa;border:1px solid #ccd0c4;border-radius:10px;font-size:27px;min-height:42px;color:var(--ink)}.num-isolated{font-size:38px;background:white;border-radius:14px;padding:12px 28px}.num-equality{font-size:clamp(24px,3vw,38px);text-align:center}.num-bravo{font-size:38px}.num-material{width:min(850px,100%);display:flex;flex-direction:column;gap:10px}.num-obtained,.num-packets,.num-remainder{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}.num-packet{border:2px solid #b49a66;background:#fffdf5;border-radius:12px;padding:6px;min-width:76px;min-height:55px;color:var(--ink);opacity:1!important}.num-ten{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}.num-packet small,.num-remainder small{display:block;font-size:14px}.num-block{display:inline-block;border:1px solid #597994;background:#c6e0ef;width:12px;height:12px}.num-block-1{height:30px;width:7px;background:repeating-linear-gradient(to bottom,#c6e0ef 0 2px,#597994 2px 3px)}.num-block-2{width:28px;height:28px;background:repeating-linear-gradient(to right,transparent 0 2px,#6b809044 2px 3px),repeating-linear-gradient(to bottom,#d8e6c7 0 2px,#6b809044 2px 3px)}.num-block-3{width:30px;height:30px;background:#eed49b;box-shadow:3px -3px #c3a871}.num-block-4{width:45px;height:30px;background:#e5d1f0}.num-made{display:flex;padding:5px}.num-bank{min-height:60px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.num-chip{background:#fffefa;border:2px solid #aab6ac;border-radius:12px;padding:10px 14px;font-size:27px;color:var(--ink);touch-action:none;user-select:none}.num-chosen{outline:3px solid #9884b4}.num-table{display:flex;width:min(800px,100%);background:#fffefa;border:1px solid #87988b}.num-column{flex:1;min-width:0;text-align:center;border-right:1px solid #87988b}.num-column:last-child{border:0}.num-column strong{display:block;background:#e9dfeb;padding:8px;border-bottom:1px solid #87988b;font-size:24px}.num-column>div{min-height:85px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:5px;padding:6px;font-size:32px}.num-over{background:#e2efd7}.num-caption{font-size:25px}.num-report{margin-top:16px}
@media(max-height:750px){.num-content{gap:6px;padding:3px}.num-material{gap:4px}.num-obtained{min-height:24px}.num-prompt{font-size:17px}.num-entry input{padding:5px;font-size:26px}.num-pad button{min-height:33px;font-size:23px}.num-arrows strong{font-size:27px}.num-isolated{font-size:30px;padding:6px 20px}.num-column>div{min-height:65px}}
@media(max-width:600px){.num-pad{grid-template-columns:repeat(6,42px)}.num-chip{font-size:22px;padding:8px}.num-expression{gap:3px}.num-packet{min-width:60px}.num-material{gap:4px}}

.num-ghost{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 5px 15px #0002}.num-made{animation:num-arrive .3s ease-out}@keyframes num-arrive{from{transform:scale(.65);opacity:.3}to{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.num-made{animation:none}}

/* Local transformations: anchored expression, one material row, no permanent packets. */
.num-content.num-working{justify-content:flex-start;align-items:stretch;padding-top:24px}.num-stage{display:flex;flex-direction:column;align-items:center;gap:12px;min-height:300px;padding-top:18px}.num-working .num-expression{justify-content:flex-start;flex-wrap:nowrap;align-self:stretch;min-height:65px;gap:clamp(3px,1vw,10px);font-size:clamp(18px,2.8vw,36px)}.num-term{white-space:nowrap;border:0;flex-shrink:0;padding:7px 9px}.num-term[data-num-merge]{cursor:grab;touch-action:none;user-select:none}.num-term[data-num-merge]:active{cursor:grabbing}.num-isolated,.btn.num-isolated,.btn.num-isolated:hover{background:transparent;color:var(--ink);border:0;box-shadow:none;border-radius:0;padding:4px 12px}.num-start-arrow{font-size:28px;line-height:1}.num-material{width:100%;min-height:110px;display:flex;justify-content:center;overflow:visible}.num-material-line{font-size:var(--material-unit);display:flex;align-items:center;justify-content:flex-start;gap:3em;width:100%;padding-left:2em}.num-group,.num-rest{display:block;flex-shrink:0;height:15em;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink);font-size:inherit;opacity:1!important;min-height:44px;position:relative}.num-group svg,.num-rest svg{display:block;width:100%;height:100%;overflow:visible;fill:#bdd9e9;stroke:#476c7e;stroke-width:.12}.num-group:hover:not(:disabled),.num-group:focus-visible{outline:2px solid #987aa6;outline-offset:4px;background:transparent}.num-exchanged svg{fill:#d5e4bf}.num-cube-top{fill:#e8ce8f}.num-cube-side{fill:#c6a767}.num-group{transition:width .35s ease}.num-plus{flex-shrink:0}.num-working .num-expression{overflow:visible}.num-stage .num-expression{flex-wrap:nowrap}.num-stage .num-isolated{margin:0}.num-stage .num-bravo{margin:4px}.num-group:disabled{pointer-events:none}@media(prefers-reduced-motion:reduce){.num-group{transition:none}}

/* Fixed slots retain the number and material between exchange steps. SVG attributes work under the strict CSP. */
.num-screen{min-width:0}.num-content.num-working{padding-top:4px;gap:4px;min-width:0}.num-working .num-expression{min-height:44px;font-size:clamp(18px,2.5vw,30px)}.num-stage{width:100%;min-width:0;min-height:0;padding-top:4px;gap:6px}.num-exchange-layout{width:100%;display:grid;grid-template-rows:44px clamp(65px,13vh,105px) 46px 84px 125px;justify-items:center;align-items:center}.num-instruction,.num-material-slot{width:100%;min-width:0}.num-material-slot{height:100%}.num-material{width:100%;height:100%;min-height:0;display:block;overflow:visible}.num-material-svg{display:block;width:100%;height:100%;max-height:105px;fill:#bdd9e9;stroke:#476c7e;stroke-width:.12}.num-material-svg .num-exchanged{fill:#d5e4bf}.num-material-svg .num-group-hit{fill:transparent;stroke:transparent;pointer-events:all}.num-svg-group[data-num-action]{cursor:pointer}.num-svg-group[data-num-action]:hover>.num-group-hit,.num-svg-group[data-num-action]:focus>.num-group-hit{stroke:#987aa6;stroke-width:.3}.num-number-slot{position:relative;height:46px;display:flex;align-items:center;justify-content:center}.num-click-arrow{position:absolute;top:-25px;left:50%;transform:translateX(-50%)}.num-number-slot .num-isolated{font-size:32px;line-height:1;min-height:44px;letter-spacing:0;white-space:nowrap}.num-answer-slot{height:84px;width:240px;align-self:start}.num-diagonal-arrows{width:240px;height:32px;display:block;fill:none;stroke:var(--ink);stroke-width:1.5}.num-split-fields{display:flex;justify-content:space-between;align-items:center;width:220px;margin:auto;font-size:24px}.num-split-fields .num-entry{gap:6px}.num-split-fields input{width:62px;min-height:44px;padding:3px;font-size:26px}.num-controls-slot{align-self:start;display:flex;flex-direction:column;align-items:center;gap:5px}.num-controls-slot .num-pad{grid-template-columns:repeat(6,44px);gap:4px}.num-controls-slot .num-pad button{min-height:34px;font-size:24px;line-height:1}.num-controls-slot>.btn{min-height:40px;padding:5px 20px}.num-controls-slot .num-equality{font-size:26px}.num-instruction .num-prompt{font-size:clamp(15px,1.8vw,20px);line-height:1.2}.num-instruction .btn{min-height:36px}.num-exchange-layout .num-isolated:active{transform:none}@media(max-height:650px){.num-exchange-layout{grid-template-rows:38px 55px 40px 74px 112px}.num-number-slot .num-isolated{font-size:28px}.num-answer-slot{height:74px}.num-diagonal-arrows{height:25px}.num-controls-slot .num-pad button{min-height:30px;font-size:22px}.num-controls-slot>.btn{min-height:34px}.num-stage{padding-top:0}}

/* v60: shared rank colours, stable stages and reversible placement. */
.num-rank-0{--rank:#276baf;--block:#c6ddf4;color:var(--rank)}.num-rank-1{--rank:#b64048;--block:#f2bfc2;color:var(--rank)}.num-rank-2{--rank:#38764c;--block:#c6dfc2;color:var(--rank)}.num-rank-3{--rank:#7950a0;--block:#d8c5ed;color:var(--rank)}.num-rank-4{--rank:#7950a0;--block:#d8c5ed;color:var(--rank)}
.num-material-svg [class*=num-rank-]{fill:var(--block);stroke:var(--rank)}.num-material-svg .num-cube-top,.num-material-svg .num-cube-side{fill:var(--block)}.num-column[class*=num-rank-] strong{background:var(--block);color:var(--rank)}.num-entry input{color:inherit}.num-term[class*=num-rank-]{color:var(--rank)}
.num-screen{overflow:visible;min-height:0}.num-viewport{position:relative;flex:1;min-height:0;width:100%;overflow:hidden}.num-content{transform-origin:top center;width:100%;flex:none;min-height:0}.num-content.num-working{padding:0;gap:0}.num-working>.num-expression{height:52px;min-height:52px}.num-stage{padding:0}.num-exchange-layout{grid-template-rows:48px 110px 44px 78px 116px}.num-material-slot{padding:0 12px}.num-material-svg{max-height:100%;height:100%}.num-instruction .num-prompt,.num-centered .num-prompt{width:fit-content;max-width:100%;margin:auto;background:#fffefa;border:1px solid #ddd5d9;border-radius:18px;padding:5px 12px;font-style:italic;font-size:18px}.num-click-arrow{top:-28px}.num-number-slot .num-isolated{letter-spacing:0}.num-transition{padding-top:90px}.num-transition .num-stage{gap:22px}.num-transition .num-equality{font-size:clamp(28px,4vw,46px)}
.num-centered{position:relative;padding-top:90px!important}.num-centered>.num-expression{justify-content:center;font-size:clamp(25px,4vw,48px);height:75px;min-height:75px;gap:10px;white-space:nowrap}.num-centered .num-stage{min-height:240px;padding-top:14px;gap:12px}.num-memo{position:absolute;right:0;top:4px;font-size:18px;font-style:italic;border:1px solid #ddd5d9;border-radius:15px;background:#fffefa;padding:10px 15px}.num-source-slot{display:inline-flex;align-items:center;gap:10px}.num-source-slot .num-term{font:inherit;touch-action:none;user-select:none}.num-vacant{visibility:hidden;pointer-events:none}.num-table-source{min-width:100%;border:0}.num-table .num-chip{border:0;background:transparent;padding:4px 8px}.num-centered .num-table{width:min(640px,100%)}.num-centered .num-column>div{min-height:65px}.num-centered .num-column strong{padding:4px}.num-content:not(.num-working)>.num-stage{padding-top:12px}.num-content.num-transition>.num-stage{padding-top:0}.num-content:not(.num-working) .num-table{max-width:600px}.num-content:not(.num-working) .num-column>div{min-height:65px}
@media(max-height:700px){.num-exchange-layout{grid-template-rows:42px 82px 40px 74px 110px}.num-centered{padding-top:55px!important}.num-centered .num-stage{min-height:210px}.num-transition{padding-top:65px}}

/* v61: full-height cue and a larger, centred material row. */
.num-material-slot{display:flex;align-items:center;justify-content:center}.num-connect-arrow{display:block;width:24px;height:100%;fill:none;stroke:var(--ink);stroke-width:1.5;overflow:visible}.num-number-slot .btn.num-isolated[class*=num-rank-]{color:var(--rank)}.num-material-svg{max-height:none}.num-instruction{align-self:end}.num-instruction .num-prompt{margin-bottom:0}

.num-split-fields .num-entry{flex-direction:row-reverse}.num-svg-group,.num-svg-group:focus,.num-svg-group:focus-visible{outline:none}.num-svg-group[data-num-action]:focus:not(:focus-visible)>.num-group-hit{stroke:transparent}.num-material-piece{stroke-width:.12}

/* v64: stable group slots, explicit centring, labels after their fields. */
.num-exchange-layout{grid-template-rows:48px 160px 46px 78px 116px}
.num-material-slot{display:grid;place-items:center;padding:0 14px}
.num-material-slot .num-material{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0}
.num-material-slot .num-material-svg{flex:none;width:100%;height:100%;max-width:100%;max-height:none;margin:auto;overflow:visible}
.num-split-fields .num-entry{display:flex;flex-direction:row;align-items:center;gap:6px}
.num-svg-group{outline:none!important}.num-svg-group .num-group-hit{fill:transparent;stroke:transparent;stroke-width:.18}
.num-svg-group[data-num-action]:hover>.num-group-hit,.num-svg-group[data-num-action]:focus-visible>.num-group-hit{stroke:#987aa6;stroke-width:.18}
@media(max-height:650px){.num-exchange-layout{grid-template-rows:42px 135px 44px 74px 110px}}

.num-digits{display:inline-flex;gap:0;letter-spacing:0}.num-digit{display:inline;padding:0;margin:0}.num-svg-group:active{outline:none!important}.num-material-piece{outline:none!important}