.hotspot-guide{--guide-size:clamp(24px,2.2vw,38px);position:absolute;top:0;left:0;width:0;height:0;z-index:8;color:#299ccd;pointer-events:none;opacity:0;transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.hotspot-guide.is-active{opacity:1}
.hotspot-guide.is-pressing{transition:opacity .3s ease}
.guide-hand{position:absolute;width:var(--guide-size);height:auto;left:calc(var(--guide-size)*-.384615);top:calc(var(--guide-size)*-.076923);overflow:visible;filter:drop-shadow(0 3px 4px #21577530);transform-origin:38.4615% 6.6667%;transform:translate(2px,-5px) rotate(-5deg)}
.is-pressing .guide-hand{animation:guide-tap .8s ease-in-out 1 both}
.guide-ripple{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border:1.5px solid #44b9e9;border-radius:50%;opacity:0;pointer-events:none}
.is-pressing .guide-ripple{animation:guide-ripple .8s ease-out .2s 1 both}
.is-pressing .guide-ripple:nth-child(2){animation-delay:.32s}
.hotspot-guide.is-paused .guide-hand,.hotspot-guide.is-paused .guide-ripple{animation-play-state:paused}
#hotspots.intro-running .hotspot span{left:50%;right:auto;bottom:calc(100% + 4px);transform:translateX(calc(-50% + var(--intro-shift,0px)));transition:opacity .35s ease}
#hotspots.intro-running .hotspot:not(.intro-highlight):not(:focus-visible) span{opacity:0}
@keyframes guide-tap{0%,75%,100%{transform:translate(2px,-5px) rotate(-5deg)}28%,43%{transform:translate(0,0) rotate(0) scale(.94)}}
@keyframes guide-ripple{0%{opacity:0;transform:scale(.4)}18%{opacity:.85}100%{opacity:0;transform:scale(2.7)}}
@media(prefers-reduced-motion:reduce){
 .hotspot-guide{transition:none}
 .guide-hand,.is-pressing .guide-hand{animation:none;transform:none}
 .is-pressing .guide-ripple{animation:none;opacity:.5;transform:scale(1.25)}
 .is-pressing .guide-ripple:nth-child(2){display:none}
}