.gesture-demo{width:230px;max-width:100%;margin:10px auto 0;position:relative;pointer-events:none;--demo-time:5.4s}.gesture-demo-tag{display:block;color:#aeb4c8;font-size:7px;letter-spacing:.14em;font-weight:650}.gesture-demo svg{width:100%;height:100px;display:block;overflow:visible}.demo-hand-move{transform:translate(76px,7px) scale(.84)}.demo-pose-second{opacity:0;animation:demo-open var(--demo-time) infinite}.demo-pose-first{animation:demo-closed var(--demo-time) infinite}.demo-travel,.demo-drop,.demo-click-ring{display:none}.gesture-demo-labels{display:flex;justify-content:center;gap:12px;font-size:9px;line-height:1.4;color:#cabada}.gesture-demo-labels span{animation:demo-label var(--demo-time) infinite}.demo-label-1{animation-delay:-3.6s!important}.demo-label-2{animation-delay:-1.8s!important}.gesture-demo-brake .demo-hand-side{transform:translate(112px,0) scale(-1,1)}.gesture-demo-paint .demo-hand-move{animation:demo-carry var(--demo-time) infinite}.gesture-demo-paint .demo-travel{display:block;opacity:.45}.gesture-demo-paint .demo-drop{display:block;animation:demo-droplet var(--demo-time) infinite}.gesture-demo-point .demo-click-ring{display:block;animation:demo-click var(--demo-time) infinite}.gesture-demo-point .demo-hand-move{transform:translate(98px,19px) scale(.73)}
@keyframes demo-open{0%,20%,88%,100%{opacity:0}29%,77%{opacity:1}}@keyframes demo-closed{0%,20%,88%,100%{opacity:1}29%,77%{opacity:0}}@keyframes demo-label{0%,30%{color:#fff;opacity:1}35%,94%{color:#b2a0c3;opacity:.65}100%{opacity:1}}@keyframes demo-carry{0%,25%{transform:translate(4px,7px) scale(.84)}65%,83%{transform:translate(126px,7px) scale(.84)}96%,100%{transform:translate(4px,7px) scale(.84)}}@keyframes demo-droplet{0%,25%{transform:translate(0,0);opacity:.82}65%,77%{transform:translate(122px,0);opacity:.82}86%,92%{transform:translate(122px,29px) scale(.96);opacity:0}100%{transform:translate(0,0);opacity:.82}}@keyframes demo-click{0%,21%,82%,100%{opacity:0;transform:scale(1);transform-origin:128px 27px}29%{opacity:.95;transform:scale(.6)}48%,70%{opacity:0;transform:scale(1.8)}}
.gesture-demo-point .demo-pose-first{animation-name:demo-point-extended}.gesture-demo-point .demo-pose-second{animation-name:demo-point-flex}.gesture-demo-labels{text-shadow:0 1px 4px #000,0 0 8px #08080f}.gesture-demo-point .demo-click-ring{animation-name:demo-point-target}
@keyframes demo-point-extended{0%,61%,94%,100%{opacity:1}68%,83%{opacity:0}}@keyframes demo-point-flex{0%,61%,94%,100%{opacity:0}68%,83%{opacity:1}}@keyframes demo-point-target{0%,29%,86%,100%{opacity:0;transform:scale(1);transform-origin:128px 27px}36%,61%{opacity:.85;transform:scale(1)}70%{opacity:1;transform:scale(.6)}83%{opacity:0;transform:scale(1.8)}}
@media(max-width:700px){.gesture-demo{width:195px;margin-top:5px}.gesture-demo svg{height:79px}.gesture-demo-labels{font-size:8px;gap:10px}.gesture-demo-tag{font-size:6px}}
@media(prefers-reduced-motion:reduce){.gesture-demo *{animation:none!important}.demo-pose-second{display:none}.demo-label-0{color:white}.gesture-demo-paint .demo-hand-move{transform:translate(76px,7px) scale(.84)}.gesture-demo-paint .demo-drop{transform:translate(72px,0)}.demo-travel{display:none!important}.demo-click-ring{opacity:0}}
.gesture-demo-shift-up .demo-hand-move,.gesture-demo-shift .demo-hand-move{animation:demo-shift-downward var(--demo-time) infinite}.gesture-demo-shift-down .demo-hand-move{animation:demo-shift-upward var(--demo-time) infinite}.gesture-demo-wheel .demo-pose-first{animation:none}.gesture-demo-wheel .demo-pose-second{display:none}.gesture-demo-wheel .demo-hand-move{animation:demo-wheel var(--demo-time) infinite;transform-origin:128px 110px}
.gesture-demo-shift-up:after,.gesture-demo-shift:after,.gesture-demo-shift-down:after{position:absolute;right:10%;top:33%;font-size:30px;color:#b3efd5;font-weight:400}.gesture-demo-shift-up:after,.gesture-demo-shift:after{content:'↓'}.gesture-demo-shift-down:after{content:'↑'}
@keyframes demo-shift-downward{0%,25%,100%{transform:translate(76px,-14px) scale(.75)}65%,83%{transform:translate(76px,35px) scale(.75)}}@keyframes demo-shift-upward{0%,25%,100%{transform:translate(76px,35px) scale(.75)}65%,83%{transform:translate(76px,-14px) scale(.75)}}@keyframes demo-wheel{0%,22%,82%,100%{transform:translate(76px,7px) scale(.84) rotate(0deg)}48%,60%{transform:translate(76px,7px) scale(.84) rotate(22deg)}}
.gesture-demo-wheel-one .demo-pose-first{animation:none}.gesture-demo-wheel-one .demo-pose-second{display:none}.gesture-demo-wheel-one .demo-hand-move{animation:demo-wheel var(--demo-time) infinite;transform-origin:128px 110px}
/* A gear change is a stationary right-palm opening, without travel or arrows. */
.gesture-demo-open-right .demo-hand-move{animation:none;transform:translate(76px,7px) scale(.84)}
.gesture-demo-open-right .demo-hand-side{transform:none}
.gesture-demo-open-right .demo-travel,.gesture-demo-open-right .demo-drop,.gesture-demo-open-right .demo-click-ring{display:none}
/* Keep the demonstrated action visible when opening animations are disabled. */
@media(prefers-reduced-motion:reduce){
  .gesture-demo-open-right .demo-pose-first,.drive-practice .gesture-demo-brake .demo-pose-first,.drive-coach .gesture-demo-brake .demo-pose-first{display:none}
  .gesture-demo-open-right .demo-pose-second,.drive-practice .gesture-demo-brake .demo-pose-second,.drive-coach .gesture-demo-brake .demo-pose-second{display:inline;opacity:1}
}
/* The open palm visibly crosses both directions; it never closes into a pinch. */
.gesture-demo-swipe{--demo-time:3.8s}
.gesture-demo-swipe .demo-pose-first{animation:none;opacity:1}
.gesture-demo-swipe .demo-pose-second{display:none}
.gesture-demo-swipe .demo-hand-move{animation:demo-sweep-horizontal var(--demo-time) cubic-bezier(.2,.75,.25,1) infinite;filter:drop-shadow(0 0 7px #e4edff55)}
.gesture-demo-swipe .demo-swipe-trail{stroke-dasharray:5 7}
.gesture-demo-swipe .gesture-demo-labels{gap:12px;font-size:10px}
.gesture-demo-swipe .gesture-demo-labels span{animation:none;color:#f4f2f8}
@keyframes demo-sweep-horizontal{0%,14%,91%,100%{transform:translate(8px,4px) scale(.93)}35%,55%{transform:translate(152px,4px) scale(.93)}76%{transform:translate(8px,4px) scale(.93)}}
@media(prefers-reduced-motion:reduce){.gesture-demo-swipe .demo-hand-move{animation:none;transform:translate(78px,4px) scale(.93)}.gesture-demo-swipe .demo-swipe-trail{stroke-dasharray:none}}