/* Six checked anatomical poses. The sheet is displayed without cropping edits. */
.hand-illustrated{width:270px;height:270px;aspect-ratio:1;line-height:0;position:relative;flex-shrink:0;isolation:isolate}
.hand-art{display:block;width:100%;height:100%;background-image:url('assets/hands/counting-hands-v3.png');background-size:300% 200%;background-position:var(--pose-x) var(--pose-y);background-repeat:no-repeat;filter:drop-shadow(0 8px 7px #7d523418);animation:hand-reveal .18s ease-out}
.hand-surface{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;border-radius:26px;cursor:pointer;touch-action:manipulation}
.hand-surface:hover:not(:disabled) .hand-art{filter:drop-shadow(0 9px 9px #7d523426)}
.hand-surface:focus-visible{outline:3px solid #e3b25d;outline-offset:0}
.hand-surface:disabled{cursor:default}
.hands-builder{flex-direction:column;gap:0;margin:0 auto 6px;width:100%}
.hand-stage{position:relative;display:grid;place-items:center;min-height:270px;width:100%;isolation:isolate}
.hand-stage:before,.hand-display:before{content:'';position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:242px;height:242px;background:radial-gradient(circle,#fff3e3 0,#fff7ee 58%,#fff 73%);border-radius:50%;z-index:-1}
.hand-stage .hand-illustrated{width:285px;height:285px}
.hand-display{min-height:287px;isolation:isolate;gap:8px;margin:9px auto 10px}
.hand-display.two-hands{min-height:253px}
.hand-display.two-hands:before{width:450px;height:240px;background:radial-gradient(ellipse,#fff4e6 0,#fff9f2 60%,#fff 74%)}
.hand-display.two-hands .hand-illustrated{width:236px;height:236px}
.hand-toolbar{display:flex;align-items:center;justify-content:center;gap:18px;width:100%;margin:0 auto 6px}
.hand-step{width:51px;height:51px;display:grid;place-items:center;border-radius:15px;background:#eff5fb;border:1px solid #cbddeb;border-bottom:4px solid #bed4e5;color:#427da8;touch-action:manipulation}
.hand-step>span{font:29px Arial;line-height:1}
.hand-step:hover:not(:disabled){background:#e2f0fa;transform:translateY(-1px)}
.hand-step:disabled{opacity:.4}
.hand-total{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:74px;line-height:1.4}
.hand-total strong{font-size:29px;font-weight:700;color:#355f83;line-height:1.35}
.hand-total small{font-size:9px;font-weight:400;color:#718aa2}
.hand-instruction{font-size:11px;color:#6c8198;line-height:1.9;margin-top:7px}
.hands-builder+.check-solution{margin-top:12px}
.check-solution:disabled{background:#dfe8f0;border-color:#cbd9e5;color:#7b94ab;box-shadow:none}
.activity-visual .hand-illustrated{height:108px;width:108px;transform:rotate(-6deg)}
.activity-visual .hand-art{filter:drop-shadow(0 3px 2px #7d523414)}
.activity-visual .hand-illustrated:before{content:none}
.hint-panel .hand-illustrated{height:130px;width:130px}
.hint-panel .hand-display{min-height:132px;margin:6px auto 0}
.hint-panel .hand-display:before{display:none}
.hint-panel .hand-display.two-hands{min-height:116px}
.hint-panel .hand-display.two-hands .hand-illustrated{height:115px;width:115px}
.transfer-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
.backup-upload{position:relative;cursor:pointer;overflow:hidden}
.backup-upload input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.backup-upload:focus-within{outline:3px solid #e3b25d;outline-offset:4px}
@keyframes hand-reveal{from{opacity:.82;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){.hand-display.two-hands .hand-illustrated{width:203px;height:203px}.hand-display.two-hands{min-height:218px}}
@media(max-width:570px){
 .hand-illustrated{width:237px;height:237px}.hand-stage{min-height:247px}.hand-stage .hand-illustrated{width:251px;height:251px}
 .hand-stage:before,.hand-display:before{width:217px;height:217px}
 .hand-display{min-height:253px;margin:5px auto 7px}.hand-display.two-hands{min-height:177px;gap:0}
 .hand-display.two-hands:before{width:310px;height:169px}.hand-display.two-hands .hand-illustrated{height:164px;width:164px}
 .hand-toolbar{gap:17px;margin-top:0}.hand-step{height:47px;width:47px;border-radius:13px}.hand-step>span{font-size:27px}
 .hand-total{min-width:65px}.hand-total strong{font-size:26px}.hand-total small{font-size:8px}.hand-instruction{font-size:10px;margin-top:6px}
 .activity-visual .hand-illustrated{height:102px;width:102px}
 .hint-panel .hand-illustrated{height:119px;width:119px}.hint-panel .hand-display{min-height:121px}
 .hint-panel .hand-display.two-hands .hand-illustrated{height:105px;width:105px}.hint-panel .hand-display.two-hands{min-height:109px}
 .transfer-actions{gap:10px}.transfer-actions .button{font-size:10px;min-height:44px}
}
@media(max-width:350px){.hand-stage .hand-illustrated{height:232px;width:232px}.hand-stage{min-height:233px}.hand-display.two-hands .hand-illustrated{height:142px;width:142px}.hand-display.two-hands{min-height:155px}.hand-display.two-hands:before{width:280px;height:145px}.activity-visual .hand-illustrated{height:94px;width:94px}}
@media(prefers-reduced-motion:reduce){.hand-art{animation:none}}