:root{--bg:#0e3b43;--text:#effcfb;--text-soft:#a8d4d2;--panel:#ffffff17;--panel-strong:#ffffff26;--panel-line:#ffffff29;--track:#ffffff2e;--stop:#17606b;--card-ink:#12343b;--card-soft:#4b6f75;--card-tint:#e9f7f6;--edge:#9fd3d0;--accent:#ffb627;--accent-deep:#d98e00;--accent-ink:#12343b;--reward:#ffe2a1;--reward-drop:#ffb627;--focus:#ffb627;--ship-turn:0deg;--ones:#ff6f61;--tens:#3b82f6;--hundreds:#18b8a2;--thousands:#a855f7}body{background-image:radial-gradient(60% 34% at 80% 0,#18b8a259,#0000 70%),linear-gradient(#124851,#0a2c33)}.mode-oku{--mode-tint:#fff0c7;--mode-deep:#9a5b00;--mode-edge:#f0c254}.mode-deger{--mode-tint:#dbe8ff;--mode-deep:#2456b8;--mode-edge:#b3cbf5}.mode-kur{--mode-tint:#d5f4ee;--mode-deep:#0b8473;--mode-edge:#9adfd4}.mode-art{font-size:20px}.abacus{--bead:clamp(13px, 2.3dvh, 19px);color:#12343b;background:#fff8ea;border-radius:22px;justify-content:center;gap:clamp(6px,3vw,16px);padding:14px 16px 12px;display:flex;box-shadow:0 7px #d9b98a,inset 0 0 0 3px #f1dfc2}.rod{border-radius:14px;justify-items:center;gap:6px;width:clamp(58px,19vw,78px);padding:4px 2px;display:grid}.rod.is-lit{box-shadow:0 0 0 3px var(--amber);background:#ffe9b0}.rod-beads{width:100%;height:calc(var(--bead) * 9 + 16px + 14px);border-bottom:6px solid #b98a52;border-radius:0 0 4px 4px;flex-direction:column-reverse;align-items:center;gap:2px;padding-bottom:6px;display:flex;position:relative}.rod-beads:before{content:"";background:#b98a52;border-radius:3px 3px 0 0;width:5px;margin-left:-2.5px;position:absolute;inset:0 auto 0 50%}.rod-beads i{width:76%;height:var(--bead);background:var(--rod-colour);border-radius:999px;position:relative;box-shadow:inset 0 -4px #0000002e,inset 0 3px #ffffff59}.rod-0{--rod-colour:var(--ones)}.rod-1{--rod-colour:var(--tens)}.rod-2{--rod-colour:var(--hundreds)}.rod-3{--rod-colour:var(--thousands)}.rod b{font-family:var(--font-display);color:var(--rod-colour);filter:brightness(.8);font-size:16px;line-height:1}.rod-keys{grid-template-columns:1fr 1fr;gap:4px;width:100%;display:grid}.rod-key{background:var(--rod-colour);color:#fff;min-height:44px;font-family:var(--font-display);border-radius:12px;font-size:28px;font-weight:800;line-height:1;transition:transform .1s,box-shadow .1s;box-shadow:0 4px #00000038}.rod-key:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #00000038}.rod-key:disabled{opacity:.35}.abacus-4 .rod{width:clamp(54px,18.5vw,76px)}.abacus-4{gap:clamp(2px,1.2vw,12px);padding-inline:8px}.abacus-small{--bead:9px;padding:8px 10px;box-shadow:0 0 0 1.5px #d9b98a}.abacus-small .rod{gap:4px;width:52px}.abacus-small .rod b{font-size:12px}.abacus-mini{--bead:8px;border-radius:16px;padding:8px 8px 6px;box-shadow:0 4px #d9b98a}.abacus-mini .rod{gap:2px;width:34px}.abacus-mini .rod b{display:none}.abacus-mini .rod-beads{border-bottom-width:4px;height:64px}.hero-art .abacus{width:auto;height:auto}.q-number{letter-spacing:.04em}.q-number mark{background:var(--amber);color:#12343b;border-radius:.2em;padding:0 .1em}.q-read{color:var(--text-soft);margin-top:-6px;font-size:18px;font-weight:800}.explain-number{letter-spacing:.04em}.explain .abacus{margin-inline:auto}