.hand-circle { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.hand-circle path { stroke-dasharray: 1 2; }
:hover > .hand-circle { stroke-width: 2.6; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hand-circle[data-motion="waiting"] path { opacity: 0; }
  .hand-circle[data-motion="playing"] path { animation: hand-circle-drawn 1.05s cubic-bezier(.45, .05, .35, 1) both; animation-timing-function: linear(0, .012, .029, .056, .105, .163, .22, .273, .313, .343, .389, .444, .502, .561, .619, .677, .731, .774, .805, .844, .897, .944, .971, .987, 1); }
}
@keyframes hand-circle-drawn { from { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } to { stroke-dashoffset: 0; } }