.pinch-hint{position:absolute;top:76%;left:50%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none;mix-blend-mode:screen;animation:pinch-enter .2s ease-out both}
.pinch-reference{position:relative;width:92px;height:83px;overflow:visible;background:transparent;opacity:.2}
/* Transparent vector asset: white silhouette, with opacity on the wrapper only. */
.pinch-reference img{display:block;width:92px;height:83px;max-width:none}
.pinch-reference svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pinch-arrow-up{animation:pinch-spread-up 2s ease-in-out 2}
.pinch-arrow-down{animation:pinch-spread-down 2s ease-in-out 2}
.pinch-hint-label{font-size:11px;font-weight:500;line-height:1.4;color:#fff;padding:3px 10px;white-space:nowrap}
.pinch-hint-out{animation:pinch-exit .25s ease-in forwards}
@keyframes pinch-spread-up{50%{transform:translateY(-10px)}}
@keyframes pinch-spread-down{50%{transform:translateY(10px)}}
@keyframes pinch-enter{from{opacity:0}to{opacity:1}}
@keyframes pinch-exit{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.pinch-hint,.pinch-arrow-up,.pinch-arrow-down{animation:none}.pinch-hint-out{opacity:0}}