.hfix-scroll-gesture{position:fixed;z-index:60;width:var(--gesture-width);height:var(--gesture-height);--gesture-width:52px;--gesture-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:1px;color:var(--ds-text-secondary,#26384d);background:transparent;pointer-events:none!important;user-select:none;--gesture-x:0px;--gesture-y:-20px}
.hfix-scroll-gesture svg{width:28px;height:34px;flex-shrink:0;overflow:visible;color:inherit}
.hfix-gesture-label{font:500 10px/1 var(--font-body,system-ui);text-align:center;text-shadow:0 1px 2px var(--ds-surface-solid,#fff)}
.hfix-scroll-gesture .hfix-scroll-hand,.hfix-scroll-gesture .hfix-scroll-mouse{display:none}
.hfix-scroll-gesture[data-input=touch] .hfix-scroll-hand,.hfix-scroll-gesture[data-input=mouse] .hfix-scroll-mouse{display:block}
.hfix-scroll-gesture[data-direction=up]{--gesture-y:20px}
.hfix-scroll-gesture[data-direction=right]{--gesture-x:-20px;--gesture-y:0px}
.hfix-scroll-gesture[data-direction=left]{--gesture-x:20px;--gesture-y:0px}
.hfix-gesture-fill{fill:var(--ds-surface-solid,#fff)}
.hfix-hand-contact,.hfix-mouse-contact{stroke:currentColor;opacity:0}
.hfix-hand-contact circle+circle{opacity:.35}
.hfix-gesture-trail,.hfix-mouse-direction{stroke:currentColor;opacity:.75}
[data-direction=up] .hfix-gesture-trail,[data-direction=up] .hfix-mouse-direction{transform:translateY(128px) scaleY(-1)}
[data-axis=x] .hfix-gesture-trail{transform:rotate(-90deg);transform-origin:31px 58px}
[data-direction=left] .hfix-gesture-trail{transform:rotate(90deg)}
[data-axis=x] .hfix-mouse-direction{transform:rotate(-90deg);transform-origin:113px 71px}
[data-direction=left] .hfix-mouse-direction{transform:rotate(90deg)}
[data-motion=full] .hfix-scroll-hand{animation:hfix-scroll-swipe 2.1s ease-in-out infinite}
[data-motion=full] .hfix-hand-contact{animation:hfix-scroll-contact 2.1s ease-in-out infinite}
.hfix-mouse-wheel{stroke:currentColor;stroke-width:4}
[data-motion=full] .hfix-mouse-wheel{animation:hfix-scroll-wheel 2.1s ease-in-out infinite}
[data-motion=full] .hfix-mouse-contact{animation:hfix-scroll-contact 2.1s ease-in-out infinite}
@keyframes hfix-scroll-swipe{0%,15%,100%{transform:translate(0,0);opacity:.65}25%{opacity:1}65%,78%{transform:translate(var(--gesture-x),var(--gesture-y));opacity:1}}
@keyframes hfix-scroll-contact{0%,15%,78%,100%{opacity:0}25%,65%{opacity:.6}}
@keyframes hfix-scroll-wheel{0%,15%,100%{transform:translate(0,0)}65%,78%{transform:translate(calc(var(--gesture-x) * -.3),calc(var(--gesture-y) * -.3))}}
@media(prefers-reduced-motion:reduce){.hfix-scroll-gesture *{animation:none!important}.hfix-hand-wrist,.hfix-hand-contact,.hfix-mouse-wheel,.hfix-mouse-contact,.hfix-scroll-mouse>.hfix-gesture-fill,.hfix-scroll-mouse>path:not(.hfix-mouse-direction),.hfix-scroll-mouse>rect{display:none}}