.soroban-value { text-align: center; color: #526c7a; }.soroban-value strong { display: block; margin-top: 2px; color: #123047; font: 900 2.4rem Arial, sans-serif; }.soroban-frame { width: min(100%, 620px); height: 440px; margin: 14px auto; position: relative; overflow: hidden; border: 14px solid #0d0d0d; border-radius: 3px; background: #fff; box-shadow: 0 8px 18px #172d3730; }.place-labels { position: absolute; z-index: 6; inset: 0 0 auto; height: 58px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; background: #0d0d0d; color: #fff; font: 900 clamp(1.2rem, 3vw, 1.8rem) Arial, sans-serif; text-align: center; }.soroban-columns { position: absolute; inset: 58px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); }.soroban-column { position: relative; min-width: 0; }.rod { position: absolute; top: 0; bottom: 0; left: 50%; width: 10px; transform: translateX(-50%); background: #080808; }.beam { position: absolute; z-index: 5; top: 185px; left: 0; right: 0; height: 24px; background: #080808; border-block: 7px solid #080808; box-shadow: inset 0 0 0 5px white; display: flex; justify-content: space-around; align-items: center; }.beam i { width: 8px; height: 8px; border-radius: 50%; background: #080808; }.upper-bead, .lower-bead { position: absolute; z-index: 4; left: 50%; width: 88%; max-width: 125px; height: 52px; transform: translateX(-50%); border: 0; padding: 0; clip-path: polygon(34% 0, 66% 0, 100% 50%, 66% 100%, 34% 100%, 0 50%); background: #080808; filter: drop-shadow(5px 7px 5px #0004); cursor: pointer; transition: top .18s ease; }.upper-bead::after, .lower-bead::after { content: ""; position: absolute; inset: 5px; clip-path: inherit; background: linear-gradient(#f9dc72, #f1c64d); }.upper-bead { top: 6px; }.upper-bead.active { top: 70px; }.lower-zone { position: absolute; top: 151px; left: 0; right: 0; height: 260px; }.lower-bead { height: 51px; transition: top .18s ease; }.soroban-help { margin: 0; color: #657c88; text-align: center; font-size: .9rem; }
.soroban-reset-button { display: block; width: 46px; height: 44px; margin: 0 0 0 12.5%; padding: 0; transform: translateX(-50%); border: 4px solid #0d0d0d; border-bottom: 0; border-radius: 10px 10px 0 0; background: linear-gradient(90deg, #979da2, #e4e7e9 50%, #8d9499); cursor: pointer; position: relative; z-index: 1; box-shadow: inset 0 0 0 2px #ffffff66; }.soroban-reset-button:hover { background: linear-gradient(90deg, #aeb4b8, #f1f3f4 50%, #a0a7ac); }.soroban-reset-button:active { transform: translate(-50%, 3px); }.soroban-card > .soroban-reset-button + .soroban-frame { position: relative; z-index: 2; margin-top: 0; }
.soroban-frame { height: 480px; }
.soroban-column .rod { z-index: 3; width: 15px; }
.soroban-column .lower-bead { height: 52px; }
.soroban-column .upper-bead { top: 0; }
.soroban-column .upper-bead.active { top: 56px; }
.soroban-frame .beam { top: 166px; }
.soroban-column .lower-zone { top: 132px; }
.soroban-frame .beam i { position: absolute; }
.soroban-frame .beam i:first-child { left: 12.5%; transform: translateX(-50%); }
.soroban-frame .beam i:last-child { left: 87.5%; transform: translateX(-50%); }
.upper-bead,.lower-bead,.soroban-reset-button{cursor:default;pointer-events:none}.soroban-reset-button{margin-top:8px}.soroban-frame{margin-top:0}.soroban-image{max-width:510px;margin:auto;width:100%} .soroban-frame{width:100%;box-sizing:border-box}.soroban-column .lower-zone{top:132px;}