.hand-tutor{--tutor-skin:rgba(205,164,153,.84);--tutor-edge:#8d6b63;--tutor-active:#e95663;--tutor-key:#24272e;--tutor-line:#424752;--tutor-text:#f3f4f6;max-width:880px;margin:0 auto}
body:not(.dark) .hand-tutor{--tutor-skin:rgba(232,197,182,.86);--tutor-edge:#b08b7b;--tutor-key:#f5f5f7;--tutor-line:#c9cbd1;--tutor-text:#343844}
.tutor-caption{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;text-align:center;font-size:14px;line-height:1.6;padding:10px 16px}
.tutor-caption-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--tutor-active)}
svg.tutor-hand-svg{display:block;width:100%;height:auto;overflow:visible}
.tutor-key rect{fill:var(--tutor-key);stroke:var(--tutor-line);stroke-width:1.5}
.tutor-key text{fill:var(--tutor-text);font:600 16px system-ui,sans-serif}
.tutor-key.is-home rect{stroke:#9c505a;fill:color-mix(in srgb,var(--tutor-key) 84%,#b83142)}
.tutor-key.is-target rect{fill:#a91e31;stroke:#f47a86;stroke-width:2.5}
.tutor-key.is-target text{fill:white}
.tutor-home-marker{stroke:#cc8c91;stroke-width:2}
.tutor-key text.tutor-space-label{font-size:11px;letter-spacing:2px}
.tutor-palm{fill:var(--tutor-skin);stroke:var(--tutor-edge);stroke-width:2}
.tutor-finger{fill:none;stroke:var(--tutor-skin);stroke-width:30;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke}
.tutor-nail{fill:rgba(255,239,224,.9);stroke:var(--tutor-edge);stroke-width:1}
.tutor-digit.is-active .tutor-finger{stroke:var(--tutor-active)}
.tutor-digit.is-active .tutor-nail{fill:#ffced4;stroke:#fff0f2}
.tutor-palm-line{fill:none;stroke:var(--tutor-edge);stroke-width:1.5;opacity:.6;stroke-linecap:round}
.tutor-hand-label{fill:var(--tutor-text);font:600 11px system-ui,sans-serif;letter-spacing:3px}
.tutor-motion-path{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:5 6;opacity:.75}
.tutor-reach,.tutor-still{display:none}
.hand-tutor[data-motion="still"] .tutor-digit.is-active .tutor-loop{display:none}
.hand-tutor[data-motion="still"] .tutor-still{display:block}
.hand-tutor[data-motion="still"] .tutor-thumb-press{animation:none;opacity:0}
.hand-tutor[data-motion="reach"] .tutor-digit.is-active .tutor-loop{display:none}
.hand-tutor[data-motion="reach"] .tutor-reach{display:block}
.hand-tutor[data-motion="reach"] .tutor-thumb-press{animation:none;opacity:1}
.tutor-thumb-press{fill:none;stroke:#fff;stroke-width:2;animation:tutor-tap 2.4s ease-in-out infinite;transform-origin:400px 240px}
.tutor-key{cursor:pointer;outline:none}.tutor-key:focus-visible rect{stroke:white;stroke-width:3}
.tutor-hands,.tutor-motion-path{pointer-events:none}
.tutor-legend{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;font-size:11px;color:var(--muted,#a3a6af);padding:14px 8px 6px}
.tutor-legend span{display:flex;align-items:center;gap:7px}
.tutor-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.tutor-home-swatch{background:#8c424c}.tutor-target-swatch{background:var(--tutor-active)}
@keyframes tutor-tap{0%,100%{opacity:0;transform:scale(.7)}40%,60%{opacity:1;transform:scale(1.3)}}
@media(prefers-reduced-motion:reduce){.hand-tutor:not([data-motion="still"]) .tutor-digit.is-active .tutor-loop{display:none}.hand-tutor:not([data-motion="still"]) .tutor-reach{display:block}.hand-tutor:not([data-motion="still"]) .tutor-thumb-press{animation:none;opacity:1}}
@media(max-width:600px){.tutor-caption{font-size:12px;padding:8px;min-height:44px}.tutor-legend{font-size:10px;gap:10px}.tutor-hand-label{font-size:13px}}