/* A brief, non-blocking mobile gesture guide, sized to the visible viewport. */
.pinch-hint{position:fixed;z-index:10000;width:0;height:0;transform-origin:0 0;pointer-events:none}
.pinch-hint-card{width:190px;padding:17px 20px 21px;display:flex;align-items:center;flex-direction:column;gap:5px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.55);border-radius:18px;background:rgba(0,60,96,.9);color:#fff;box-shadow:0 8px 30px #003c6030;font:500 16px/1.4 Arial,Helvetica,sans-serif;text-align:center;animation:pinch-hint-life 5s ease both}
.pinch-point-first{animation:pinch-spread-first 1.6s ease-in-out 3}
.pinch-point-second{animation:pinch-spread-second 1.6s ease-in-out 3}
@keyframes pinch-spread-first{0%,100%{transform:translate(0,0)}55%,75%{transform:translate(-17px,-12px)}}
@keyframes pinch-spread-second{0%,100%{transform:translate(0,0)}55%,75%{transform:translate(17px,12px)}}
@keyframes pinch-hint-life{0%{opacity:0}5%,93%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.pinch-hint-card,.pinch-point{animation:none}.pinch-point-first{transform:translate(-12px,-8px)}.pinch-point-second{transform:translate(12px,8px)}}

.pinch-frame{transform-origin:56px 36px;animation:pinch-frame-grow 1.6s ease-in-out 3}
@keyframes pinch-frame-grow{0%,100%{transform:scale(.75)}55%,75%{transform:scale(1.25)}}
@media(prefers-reduced-motion:reduce){.pinch-frame{animation:none}}