.sum-source{display:inline-grid;place-items:center;line-height:1.12;border:2px solid;border-radius:12px;padding:3px 7px;background:#fffdf5}
.sum-source-a{color:#245f44;border-color:#397450;box-shadow:inset 0 0 0 2px #e3eedb}
.sum-source-b{color:#965217;border-color:#af681f;box-shadow:inset 0 0 0 2px #ffecd2}
/* Query the actual dialog, independently of the WebView's media orientation. */
.addition-help-dialog{--ah-a:#326e4e;--ah-b:#b16b25;container:addition-help / size;box-sizing:border-box;width:min(650px,calc(100% - 12px));height:min(700px,calc(var(--app-height,100dvh) - 12px));max-height:calc(var(--app-height,100dvh) - 12px);min-width:0;min-height:0;max-width:none;margin:auto;padding:0;border:2px solid #a9b48c;border-radius:20px;background:#faf7ec;color:#243f36;overflow:hidden;box-shadow:0 16px 70px #17372f55}
.addition-help-dialog::backdrop{background:#263f3670;backdrop-filter:blur(3px)}
.ah-shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:50px minmax(0,1fr) 42px;width:100%;height:100%;min-height:0;min-width:0;overflow:hidden}
.ah-header{display:flex;align-items:center;gap:10px;width:100%;max-width:none;margin:0;padding:5px 12px;border-bottom:1px solid #d3d6b6;background:#f1efd8;position:static}
.ah-header img{width:36px;height:39px;object-fit:contain}.ah-header h2{font-size:18px;line-height:1.1;flex:1;margin:0}.ah-close{width:40px;height:40px;flex:none;border-radius:50%;background:#fffdf5;border:1px solid #bfc8a9;font-size:25px;color:#365940}
.ah-content{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:40px minmax(36px,auto) 42px 140px 30px minmax(140px,1fr) auto;grid-template-areas:"original" "question" "entry" "keypad" "feedback" "model" "trail";min-width:0;min-height:0;padding:8px 16px;gap:6px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#82966d #edeedb}
.ah-original{grid-area:original;display:flex;align-items:center;justify-content:center;gap:9px;font:500 29px Fredoka,'Trebuchet MS',sans-serif}.ah-original .sum-source{padding:2px 8px}
.ah-question{grid-area:question;display:flex;align-items:center;justify-content:center;text-align:center;font:500 20px/1.2 Fredoka,'Trebuchet MS',sans-serif;margin:0}
.ah-model{grid-area:model;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;min-height:0;position:relative;isolation:isolate;overflow:hidden}
.ah-context{width:100%;text-align:center;font-size:13px;line-height:1.2}.ah-context .sum-source{font-size:15px;padding:1px 5px;border-radius:7px}
.ah-field{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 12px repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,30px);row-gap:10px;width:100%;max-width:380px;min-width:0;margin-inline:auto;align-self:center;isolation:isolate}
.ah-slot,.ah-counter{width:calc(100% - 4px);max-width:30px;aspect-ratio:1;justify-self:center;align-self:center;border-radius:50%;border:1px solid #ced3b6}
.ah-counter{z-index:1;border:2px solid #fff8e8;outline:1px solid transparent}.ah-counter.source-a{background:var(--ah-a)}.ah-counter.source-b{background:var(--ah-b);border-radius:7px}
.ah-slot.gap-slot{outline:2px dashed #b48241;outline-offset:1px;background:#fff8de}
.ah-legend{display:flex;justify-content:center;gap:8px 14px;width:100%;font-size:12px;line-height:1.2;flex-wrap:wrap}.ah-legend span{display:flex;gap:5px;align-items:center}.ah-legend i{display:inline-block;width:10px;height:10px;background:var(--ah-a);border-radius:50%}.ah-legend i.source-b{background:var(--ah-b);border-radius:3px}
.ah-trail{grid-area:trail;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:30px;padding:5px 10px;border-radius:11px;background:#eaf0d9;text-align:center;font-size:15px;line-height:1.25}
.addition-help-dialog[data-help-kind="field"] .ah-trail{min-height:52px}.ah-step{display:block}
.ah-entry{grid-area:entry;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}.ah-entry form{display:flex;align-items:center;justify-content:center;gap:10px;margin:0}.ah-entry input{width:76px;height:42px;border:2px dashed #638650;border-radius:12px;background:#fffdf5;color:#243f36;text-align:center;font:500 28px Fredoka,'Trebuchet MS',sans-serif}
.ah-button{padding:7px 13px;border-radius:12px;border:1px solid #a7b28f;background:#fffdf5;color:#2a4c3a;font-size:14px;font-weight:800;min-height:38px}.ah-main{background:#245f44;color:#fffdf4;border-color:#245f44}
.ah-keypad{grid-area:keypad;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:5px;width:100%;max-width:300px;height:140px;max-height:100%;min-height:0;min-width:0;justify-self:center;align-self:center;padding:2px;background:#faf7ec;isolation:isolate;contain:paint}
.ah-key{display:grid;place-items:center;height:100%;max-height:40px;min-height:0;min-width:0;padding:0;border:1px solid #adbd98;border-radius:10px;background:#fffdf5;color:#243f36;font:500 24px Fredoka,'Trebuchet MS',sans-serif;overflow:hidden;position:relative}.ah-key:last-child{background:#dceabf}.ah-key:disabled{opacity:.25}
.ah-feedback{grid-area:feedback;min-width:0;min-height:0;margin:0;text-align:center;font-size:12px;line-height:1.25;align-self:center;font-weight:700}
.ah-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:2px 12px;margin:0;background:#f1efd8;border-top:1px solid #d3d6b6;font-size:11px;line-height:1.15;color:#52614a}.ah-show{font:800 12px Nunito,'Segoe UI',sans-serif;min-height:36px;padding:3px 5px;background:transparent;text-decoration:underline;color:#365940}.ah-paused{white-space:nowrap}
.ah-origins,.ah-combined{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;align-items:start;justify-content:center;min-width:0}.ah-origin-group{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0}.ah-origin-group>span{font-size:12px}.ah-rod-line{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;min-width:0}.ah-origin-group .ah-rod-line{min-height:70px}.ah-rod{display:grid;grid-template-rows:repeat(10,1fr);gap:1px;width:12px;height:70px;border:1px solid #5b704c;background:#eee9ce;overflow:hidden;border-radius:3px}.ah-rod i{display:block;background:var(--ah-a)}.ah-rod.source-b i{background:var(--ah-b)}.ah-rod.ah-new-rod{outline:2px solid #c6a24f;outline-offset:2px}.ah-new-rod i.source-b{background:var(--ah-b)}
.ah-small-ones,.ah-combined-ones{display:grid;grid-template-columns:repeat(5,19px);gap:4px;position:relative;justify-content:center}.ah-small-ones{min-height:42px;align-content:start}.ah-one{width:19px;height:19px;border-radius:4px;background:var(--ah-a)}.ah-one.source-b{background:var(--ah-b)}.ah-combined>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0}.ah-combined p{font-size:13px;margin:0}.ah-combined-ones.to-bundle:before{content:'';position:absolute;top:-4px;left:-4px;right:-4px;height:46px;border:2px dashed #ac752b;border-radius:8px;pointer-events:none}
@container addition-help (max-width:600px){.ah-field{max-width:320px}.ah-trail{width:100%;max-width:330px;justify-self:center}.ah-content{padding-inline:16px}}
@container addition-help (max-width:420px){
 .ah-content{padding:8px 14px;gap:5px}.ah-field{grid-template-rows:repeat(2,25px);row-gap:9px;grid-template-columns:repeat(5,minmax(0,1fr)) 10px repeat(5,minmax(0,1fr))}.ah-slot,.ah-counter{max-width:25px}.ah-original{font-size:27px;gap:7px}.ah-question{font-size:18px}.ah-header h2{font-size:17px}.ah-rod{width:9px;height:60px}.ah-origin-group .ah-rod-line{min-height:60px}.ah-rod-line{gap:3px}.ah-origins,.ah-combined{gap:10px}.ah-small-ones,.ah-combined-ones{grid-template-columns:repeat(5,16px);gap:4px}.ah-small-ones{min-height:36px}.ah-one{width:16px;height:16px}.ah-combined-ones.to-bundle:before{height:40px}.ah-origin-group .sum-source{font-size:19px}.ah-origin-group>span{font-size:11px}.ah-trail{font-size:14px}.ah-feedback{font-size:11px}
}
@container addition-help (max-height:640px){
 .ah-shell{grid-template-rows:44px minmax(0,1fr) 36px}.ah-content{grid-template-rows:34px minmax(34px,auto) 36px 128px 28px minmax(110px,1fr) auto;gap:5px;padding-block:6px}.ah-header img{height:32px;width:30px}.ah-close{width:35px;height:35px}.ah-original{font-size:25px}.ah-question{font-size:17px}.ah-entry input{height:35px;font-size:25px;width:65px}.ah-button{min-height:34px;font-size:13px;padding:5px 12px}.ah-keypad{height:128px;gap:3px}.ah-key{font-size:21px}.ah-feedback{font-size:11px}.ah-rod{height:48px}.ah-origin-group .ah-rod-line{min-height:48px}.ah-origins{gap:8px}.ah-origin-group{gap:4px}.ah-origin-group>div>.sum-source{font-size:16px;padding:0 5px}.ah-show{min-height:32px;font-size:11px}.ah-field{grid-template-rows:repeat(2,24px);row-gap:8px}.ah-slot,.ah-counter{max-width:24px}.ah-model{gap:5px}.ah-context{font-size:11px}
}
@container addition-help (max-height:580px){.ah-content{gap:3px;padding-block:5px}}
/* Keep question, entry and keypad together even in a short landscape dialog.
   Only this dialog's content scrolls when the physical height cannot fit both. */
@container addition-help (max-height:480px){
 .ah-content{grid-template-columns:minmax(0,1fr);grid-template-rows:32px minmax(30px,auto) 36px 128px 28px 145px auto;padding-inline:22px}
 .ah-original{font-size:25px}.ah-question{font-size:17px}.ah-field{max-width:340px}.ah-trail{max-width:440px}.ah-model{min-height:145px}
}
.ah-content::-webkit-scrollbar{width:7px}.ah-content::-webkit-scrollbar-track{background:#edeedb;border-radius:8px}.ah-content::-webkit-scrollbar-thumb{background:#82966d;border:1px solid #edeedb;border-radius:8px}
/* Equal groups, taking away, and jumps use the same quiet materials as the ten-frame. */
.oh-svg{display:block;flex:1 1 auto;min-height:0;width:100%;height:100%;max-height:220px;overflow:visible}
.oh-slot{fill:#fffdf5;stroke:#cad2b4;stroke-width:1}.oh-dot{fill:var(--ah-a)}
.oh-removed .oh-dot{fill:#e1e7d5;stroke:#a9b795;stroke-width:1}.oh-cross{fill:none;stroke:var(--ah-b);stroke-width:2;stroke-linecap:round;animation:oh-mark .5s ease-out}
.oh-group{fill:#f1f4e6;stroke:#7e9768;stroke-width:1}.oh-waiting{opacity:.22}
.oh-caption{flex:0 0 auto;margin:0;text-align:center;font-size:13px;line-height:1.2}.oh-caption .sum-source{font-size:15px;padding:1px 5px;border-radius:7px}
.oh-svg text{font:14px Nunito,'Segoe UI',sans-serif;text-anchor:middle;fill:#294b35}.oh-baseline,.oh-tick{fill:none;stroke:#9aa983;stroke-width:1.5}
.oh-jump{fill:none;stroke:#6a8656;stroke-width:2.5}.oh-jump.oh-current{stroke:var(--ah-b);stroke-dasharray:5 3}.oh-arrow{fill:none;stroke:var(--ah-b);stroke-width:2}.oh-stop{fill:#fffdf5;stroke:var(--ah-b);stroke-width:2}.oh-svg .oh-start{font-weight:900}.oh-svg .oh-jump-label{fill:#965217;font-size:15px;font-weight:900}
.oh-modes{display:flex;justify-content:center;gap:6px;flex:0 0 auto;padding:5px;max-width:100%;box-sizing:border-box}.oh-modes button{min-height:30px;padding:4px 10px;border:1px solid #afbd99;border-radius:9px;background:#fffdf5;font-size:12px;font-weight:800}.oh-modes [aria-pressed="true"]{background:#e2eccf;box-shadow:inset 0 0 0 1px #6c8757}
@keyframes oh-mark{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.addition-help-dialog *{animation:none;transition:none}}

.oh-previous .oh-cross{opacity:.45;animation:none}

/* Colors encode the operands, never which partial calculation a dot belongs to. */
.oh-array[data-frame-source="a"] .oh-group{stroke:var(--ah-a)}
.oh-array[data-frame-source="b"] .oh-group{stroke:var(--ah-b);fill:#fbf1e2}
.oh-array[data-dot-source="a"] .oh-dot{fill:var(--ah-a)}
.oh-array[data-dot-source="b"] .oh-dot{fill:var(--ah-b)}
.oh-array .oh-removed .oh-dot{fill:#ede1ce;stroke:#ad8d68}
.addition-help-dialog[data-stable-trail] .ah-trail{height:calc(var(--ah-trail-lines) * 1.25em + (var(--ah-trail-lines) - 1) * 5px + 10px);flex-shrink:0}

.oh-modes button:focus-visible{outline:2px solid #647f50;outline-offset:2px}