/* Soroban: rods side by side; each bead is a 56 px button with the bead drawn inside. */
.sb { --bw: min(4rem, calc((100vw - 4rem) / var(--rods))); display: inline-flex; gap: 0; padding: .375rem .5rem; background: #F6EBD9; border: .1875rem solid #5B3A1E; border-radius: .625rem; touch-action: manipulation; }
.sb-col { position: relative; width: max(3.5rem, var(--bw)); display: grid; grid-template-rows: auto .625rem auto; }
.sb-col::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: .1875rem; transform: translateX(-50%); background: #8B6B47; }
.sb-heaven { display: grid; grid-template-rows: 3.5rem 3.5rem; }
.sb-heaven .sb-b { grid-row: 1; }
.sb-heaven.down .sb-b { grid-row: 2; }
.sb-beam { background: #5B3A1E; margin: 0 -.5rem; position: relative; z-index: 1; }
.sb-col.unit .sb-beam::after { content: ""; position: absolute; left: 50%; top: 50%; width: .3125rem; height: .3125rem; border-radius: 50%; background: #F6EBD9; transform: translate(-50%, -50%); }
.sb-earth { display: grid; grid-template-rows: repeat(5, 3.5rem); }
.sb-gap { display: block; }
.sb-b { position: relative; z-index: 1; width: 100%; height: 3.5rem; border: 0; background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; }
.sb-b::before { content: ""; width: 88%; height: 2.125rem; background: #8A5A2B; clip-path: polygon(0 50%, 22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%); transition: transform .12s; }
.sb-b.on::before { background: #4A2E14; }
.sb-b:focus-visible { outline: .1875rem solid var(--sky); outline-offset: -.1875rem; }
@media (prefers-reduced-motion: reduce) { .sb-b::before { transition: none; } }
.sb-demo { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; }
.sb-side { display: grid; gap: .625rem; justify-items: start; }
.sb-read { font: 700 2.5rem/1 var(--f-m); min-width: 3ch; }
.sb-play { display: grid; gap: .625rem; justify-items: center; }
.sb-prompt { text-align: center; font-size: clamp(1.5rem, 6vw, 2.5rem); }
.sb-prompt .sb-ask { display: block; font: 600 1.125rem/1.3 var(--f-b), var(--cjk); color: var(--ink2); }
.sb-prompt span.done { color: var(--ink2); }
.sb-prompt span.now { background: #FFF6D8; border-bottom: .1875rem solid var(--ink); padding: 0 .2em; position: relative; }
.sb-stage { display: grid; justify-items: center; }
.sb-stage .sb-svg { width: min(90vw, 22.5rem); height: auto; }
.sb-actions { display: flex; gap: .75rem; justify-content: center; padding: .375rem; }
.sb-check { min-width: 9em; }
/* pictures and paper */
.sb-svg .sb-frame { fill: #fff; stroke: #1D2433; stroke-width: 2; }
.sb-svg .sb-rod { stroke: #8B6B47; stroke-width: 1.6; }
.sb-svg .sb-beam { fill: #1D2433; }
.sb-svg .sb-dot { fill: #fff; }
.sb-svg .sb-bead { fill: #8A5A2B; stroke: #1D2433; stroke-width: .8; }
.sb-svg .sb-bead.open { fill: #fff; }
.sb-sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6mm 4mm; }
.sb-sheet.add { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 15pt; }
.sb-item { display: grid; gap: 2mm; justify-items: center; break-inside: avoid; }
.sb-item .ws-no { justify-self: start; }
.sb-item .sb-svg { width: 100%; max-width: 40mm; height: auto; }
.sb-line { font: 600 14pt/1.4 var(--f-m); }
.keyview .sb-sheet { grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); }