#unit-mul-pair{min-height:48px;font:inherit;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--warm);color:var(--ink);margin:10px 0 18px;max-width:100%}#unit-mul-draft{display:block;font:inherit;border:1px solid var(--copper);background:var(--warm);border-radius:8px;padding:12px;max-width:100%;width:200px;margin:10px 0}.new-math-view h3{font-size:23px;line-height:1.7}.new-math-view>svg{max-height:260px;max-width:100%;height:auto}.new-math-view>p{margin:15px 0}.hero-art>svg{max-width:100%;height:auto;max-height:210px}.worked-example .solution>svg{max-width:100%;height:auto;max-height:240px;margin:20px auto}.p3-method-grid>article p{margin-top:12px}
.hero-art figure{margin:0;min-width:0;width:100%}.hero-art figure svg{display:block;width:100%;height:auto;max-height:240px}.hero-art figcaption{font-size:13px;line-height:1.8}.worked-example figure{margin:18px 0;max-width:100%}.worked-example figure svg{width:100%;height:auto;max-height:260px}.worked-example>svg{max-width:100%;height:auto;max-height:190px;margin:15px auto}.new-math-view svg{max-width:100%;height:auto}#unit-mul-array svg{max-height:230px}
@media(max-width:800px){.hero-art figure{grid-column:1/-1}.hero-art figure svg{max-height:180px}.hero-art figcaption{font-size:13px}.worked-example figure svg{min-height:90px}}

.exchange-figure{margin:18px 0}.exchange-figure svg{width:100%;max-width:400px;height:auto;max-height:none}.exchange-figure figcaption{font-size:14px;line-height:1.8;margin-top:12px}

.array-grid-viewport{max-width:100%;max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--warm)}.array-grid-viewport>svg{display:block;max-width:none!important;max-height:none!important;width:auto;height:auto}.array-grid-viewport:focus-visible{outline:3px solid var(--copper);outline-offset:3px}
.factor-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}.factor-box{border:2px solid var(--copper);border-radius:12px;background:var(--warm);padding:14px;min-width:0}.factor-box h4{font-size:19px;margin:0 0 6px}.factor-box>p{font-size:16px}.factor-bags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.factor-bag{border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px;min-width:0}.factor-bag>span{font-size:15px}.factor-bag svg{width:100%;height:auto;max-height:70px;display:block}.group-methods{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}#group-case{font:inherit;padding:12px;min-height:48px;max-width:100%;background:var(--warm);color:var(--ink);border:1px solid var(--line);border-radius:8px;margin:12px 0}#group-draft{display:block;font:inherit;width:200px;max-width:100%;padding:12px;border:1px solid var(--copper);border-radius:8px;background:var(--warm);margin:12px 0}.hero-art .factor-boxes{width:100%;margin:0}.hero-art .factor-box{padding:8px}.hero-art .factor-bags{gap:5px}.hero-art .factor-bag{padding:4px}
@media(max-width:600px){.factor-boxes{grid-template-columns:1fr}.hero-art .factor-boxes{grid-column:1/-1}.factor-bag svg{max-height:60px}}

.known-place-groups{display:grid;gap:18px;margin:20px 0}.known-place-group{padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--warm)}.known-place-group h4{font-size:20px;margin-bottom:12px}.known-place-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.known-place-columns p{font-size:16px;line-height:1.8}.known-place-columns svg{width:100%;height:auto;max-height:160px}

.equal-groups{margin:18px 0}.equal-groups figcaption{font-size:16px;line-height:1.8;margin-bottom:14px}.equal-group-boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.equal-group-box{padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--warm);text-align:center}.equal-group-box svg{width:100%;height:auto;max-height:65px}.equal-group-box p{font-size:16px}.equal-group-box strong{font-size:17px;line-height:1.8}.hero-art .equal-groups{width:100%;margin:0}.hero-art .equal-group-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}#application-case{font:inherit;padding:12px;min-height:48px;max-width:100%;background:var(--warm);border:1px solid var(--line);color:var(--ink);border-radius:8px;margin:12px 0}#application-exact,#application-estimate{display:block;font:inherit;width:210px;max-width:100%;padding:12px;border:1px solid var(--copper);border-radius:8px;background:var(--warm);margin:12px 0}#application-estimate-work{padding:16px;border:1px solid var(--line);border-radius:10px;margin:20px 0;background:var(--warm)}#application-estimate-work[hidden]{display:none}
@media(max-width:600px){.equal-group-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-art .equal-groups{grid-column:1/-1}.equal-group-box{padding:8px}.equal-group-box strong{font-size:16px}}
/* Division uses the existing P4 shell. These rules only arrange editable counting cards. */
.division-figure { margin: 1rem 0; }
.division-pool { padding: .8rem; border: 1px solid var(--line, #E6DDD4); border-radius: 10px; background: #FFF9F2; }
.division-group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: .7rem; margin: .8rem 0; }
.division-group { min-width: 0; padding: .65rem; border: 1px solid #B7603E; border-radius: 10px; background: #FFFDFA; }
.division-group strong { display: block; font-size: .9rem; }
.division-cards { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.division-card-kind { display: flex; flex-direction: column; gap: .35rem; max-width: 100%; }
.division-token-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; max-width: 100%; }
.division-token-wrap svg { flex-shrink: 0; }
.division-vertical { margin: 1rem 0; }
.division-vertical > svg { display: block; max-width: 100%; height: auto; }
#division-lab select, #division-lab textarea, #division-lab input { max-width: 100%; }
#division-lab textarea { display: block; width: 100%; box-sizing: border-box; margin: .5rem 0; }
#division-lab label { display: block; margin: .6rem 0 .3rem; }

/* Keep each counting token at its declared size inside all P4 figure containers. */
.division-figure .division-token-wrap > svg { width: 14px; height: 14px; min-height: 0; max-height: none; max-width: none; flex: 0 0 auto; }
.division-figure .division-token-wrap > svg[width="32"] { width: 32px; height: 32px; }
.hero-art .division-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.hero-art .division-group { padding: .4rem; }
.hero-art .division-group p { font-size: 12px; line-height: 1.5; }