:root{font-family:Hiragino Mincho ProN,Yu Mincho,serif;color:#27231d;background:#eee9dc;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 20% 0,#faf8f0 0,transparent 36%),repeating-linear-gradient(0deg,rgba(55,45,25,.025) 0 1px,transparent 1px 5px),#eee9dc}button{font:inherit}main{width:min(860px,100%);margin:auto;padding:38px 24px 30px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #9c9481;padding-bottom:18px}.eyebrow{margin:0;color:#8d2c22;font-size:12px;letter-spacing:.22em}h1{font-weight:500;font-size:clamp(38px,8vw,64px);letter-spacing:.18em;margin:5px 0 0}.seal{background:#a53228;color:#fff;width:54px;height:54px;display:grid;place-items:center;line-height:1.05;border:3px double #eee9dc;transform:rotate(2deg)}.problem-card{margin:28px 0 18px;padding:20px 26px;background:#ffffff94;border-left:5px solid #a53228}.problem-top{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.14em;color:#70695d}.equation{text-align:center;font-family:Georgia,serif;font-size:clamp(42px,9vw,76px);margin:12px 0}.equation span{color:#a89e8a}.equation b{color:#a53228}.problem-card>p{text-align:center;margin:0;color:#686154}.problem-card strong{font-family:monospace;font-size:20px;color:#27231d}.abacus-wrap{background:#342a20;padding:24px;border-radius:3px;box-shadow:0 16px 32px #473b2d2b}.abacus{position:relative;height:330px;display:grid;grid-template-columns:repeat(3,1fr);background:#d8b77a;border:12px solid #6b4325;box-shadow:inset 0 0 0 3px #3b2617}.beam{position:absolute;left:0;right:0;top:112px;height:20px;background:#6b4325;z-index:1}.rod{position:relative;display:flex;align-items:center;flex-direction:column;border-left:2px solid #7c5a38}.rod:last-child{border-right:2px solid #7c5a38}.place{position:absolute;bottom:-6px;color:#f1ddae;background:#6b4325;padding:3px 10px;z-index:4}.bead{display:block;border:0;color:#b33525;background:transparent;text-shadow:0 2px #5f160f;font-size:50px;line-height:42px;padding:0;cursor:pointer;transition:transform .18s,filter .18s}.bead:hover{filter:brightness(1.16)}.upper{margin-top:12px}.upper.active{transform:translateY(37px)}.beam-dot{position:absolute;top:116px;width:9px;height:9px;border-radius:50%;background:#eee2bd;z-index:3}.lower-beads{margin-top:77px;display:flex;flex-direction:column}.lower{height:43px}.lower.active{transform:translateY(-9px)}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.actions button{padding:11px 25px;border:1px solid #e9d9bb;cursor:pointer}.ghost{background:transparent;color:#e9d9bb}.submit{background:#b83a2e;color:#fff;border-color:#b83a2e!important;font-weight:700}.message{color:#f4e9d1;min-height:24px;margin:15px 0 0}.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;border-top:1px solid #aea795;border-bottom:1px solid #aea795}.stats div{padding:18px;text-align:center;border-right:1px solid #aea795}.stats div:last-child{border:0}.stats b,.stats span{display:block}.stats b{font-family:Georgia,serif;font-size:25px}.stats span{font-size:12px;color:#746e63;margin-top:3px}footer{font-size:13px;line-height:1.7;color:#716b60;margin-top:20px}@media(max-width:550px){main{padding:22px 14px}.abacus-wrap{padding:14px}.abacus{height:290px;border-width:8px}.beam{top:105px}.beam-dot{top:110px}.bead{font-size:43px}.lower-beads{margin-top:68px}.problem-card{padding:16px}.stats div{padding:14px 6px}}.abacus{display:block;width:100%;height:auto;background:#6b4325;border:4px solid #8a6240;box-shadow:inset 0 0 0 3px #3b2617}.abacus .abacus-bed{fill:#d8b77a;stroke:#3b2617;stroke-width:6}.abacus .beam{fill:#6b4325;position:static}.abacus .rod{display:inline;border:0}.rod-line{stroke:#7c5a38;stroke-width:4}.abacus .beam-dot{fill:#eee2bd;stroke:#594329;stroke-width:2;position:static}.svg-bead{fill:#b33525;stroke:#661d15;stroke-width:3;filter:drop-shadow(0 4px 1px #5f160f66)}.bead-shine{stroke:#e16a56;stroke-width:3;stroke-linecap:round;pointer-events:none}.bead-group{cursor:pointer;transition:filter .15s}.bead-group:hover,.bead-group:focus{filter:brightness(1.15);outline:none}.place-bg{fill:#6b4325}.place-text{fill:#f1ddae;font-size:17px;font-family:serif}@media(max-width:550px){.abacus{height:auto;border-width:4px}}