/* An isolated margin annotation. All graphics are decorative and click-through. */
.color-gesture{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden;contain:strict;color:var(--gesture-color);visibility:hidden}
.color-gesture.is-playing{visibility:visible}
.gesture-fall{position:absolute;left:var(--gesture-x);top:var(--gesture-top);width:20px;height:30px;margin-left:-10px;opacity:0;will-change:transform,opacity}
/* Surface tension: a rounded bead, rather than a pointed teardrop pictogram.
   Small reflections and an asymmetric rim suggest dyed water in soft daylight. */
.gesture-fall::before{content:'';position:absolute;left:11px;top:15px;width:11px;height:15px;border-radius:50%;background:#24333221;filter:blur(3.2px);transform:rotate(-12deg)}
.gesture-bead{position:absolute;left:3px;top:7px;width:14px;height:19px;border-radius:48% 48% 47% 49% / 43% 46% 55% 57%;background:currentColor;
 background:
 radial-gradient(ellipse at 28% 20%,#ffffffed 0%,#ffffff96 5%,#ffffff00 22%),
 radial-gradient(ellipse at 72% 78%,#ffffff8c 0%,#ffffff00 32%),
 radial-gradient(ellipse at 48% 43%,color-mix(in srgb,currentColor 79%,white) 0%,currentColor 53%,color-mix(in srgb,currentColor 76%,#173635) 89%,currentColor 100%);
 box-shadow:inset .5px .4px 1px #ffffff80,inset -.8px -1px 1.6px #16333a3d,0 .3px .5px #162d341f;
 opacity:.96}
.is-playing .gesture-bead{animation:gesture-tension 4.15s ease-in-out both}
@keyframes gesture-tension{0%,25%{border-radius:48% 48% 47% 49% / 43% 46% 55% 57%}55%{border-radius:48% 46% 48% 49% / 37% 39% 60% 61%}85%{border-radius:46% 48% 49% 47% / 40% 42% 57% 60%}100%{border-radius:50%}}
.gesture-impact{position:absolute;left:var(--gesture-x);top:var(--gesture-bottom);width:0;height:0}
.gesture-impact i{position:absolute;width:46px;height:13px;left:-23px;top:-6px;border:1px solid currentColor;border-radius:50%;opacity:0;filter:blur(.65px)}
.gesture-word{position:absolute;left:var(--gesture-word-x);top:var(--gesture-bottom);width:var(--gesture-word-width);height:44px;opacity:0;transform:translate(-6px,-24px);transform-origin:6px 24px;filter:drop-shadow(.7px 1px 1.1px #263b3514)}
.gesture-word svg{display:block;width:100%;height:44px;overflow:visible;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.gesture-ink{stroke-dasharray:1;stroke-dashoffset:1}
.is-playing .gesture-ink{animation:gesture-pen var(--pen-duration) linear var(--pen-delay) both}
@keyframes gesture-pen{to{stroke-dashoffset:0}}
.color-gesture[data-vertical=true] .gesture-word{transform:translate(-6px,-24px) rotate(90deg) scale(var(--gesture-hand-scale))}
.color-gesture[data-vertical=true][data-side=left] .gesture-word{transform:translate(-6px,-24px) rotate(-90deg) scale(var(--gesture-hand-scale))}
.is-playing .gesture-fall{animation:gesture-fall 4.15s cubic-bezier(.48,.04,.62,.52) both}
.is-playing .gesture-impact i{animation:gesture-impact 2.7s ease-out 3.96s both}
.is-playing .gesture-impact i:nth-child(2){animation-delay:4.15s;animation-duration:2.9s}
.is-playing .gesture-word{animation:gesture-word 11.5s ease 3.98s both}
@keyframes gesture-fall{0%{opacity:0;transform:translateY(0) scale(.5,.56)}12%{opacity:.95;transform:translateY(4px) scale(.78,.9)}30%{opacity:1;transform:translateY(26px) scale(.92,1.03)}87%{opacity:1;transform:translateY(calc(var(--gesture-distance) - 25px)) scale(.91,1.1)}96%{opacity:.88;transform:translateY(var(--gesture-distance)) scale(1.25,.48)}100%{opacity:0;transform:translateY(var(--gesture-distance)) scale(1.8,.16)}}
@keyframes gesture-impact{0%{opacity:0;transform:scale(.15,.45)}12%{opacity:.34}65%{opacity:.1}100%{opacity:0;transform:scale(1.75,1.1)}}
/* Pen paths draw for ~3s, rest as ink for ~7s, then gently fade. */
@keyframes gesture-word{0%{opacity:0}1%,86%{opacity:1}100%{opacity:0}}
.gesture-controls{position:fixed;right:22px;bottom:17px;z-index:25;display:flex;align-items:center;gap:12px;padding:5px 11px;border:1px solid #eceeea;border-radius:22px;background:#ffffffed;color:#757b75;font:400 10px/1.5 Manrope,Arial,sans-serif;box-shadow:0 3px 14px #333b3304}
.gesture-controls button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;font:inherit;color:inherit;padding:6px 0;min-height:30px;cursor:pointer}
.gesture-controls button:hover{color:#292927}.gesture-controls button:focus-visible{outline-offset:3px}
.gesture-control-dot{width:5px;height:5px;border-radius:50%;background:var(--gesture-control-color,#178f98);opacity:.8;box-shadow:0 0 5px color-mix(in srgb,var(--gesture-control-color,#178f98) 30%,transparent)}
.gesture-controls [aria-pressed=false] .gesture-control-dot{background:#a9ada8;box-shadow:none}
.gesture-controls button:disabled{opacity:.45;cursor:default}
@media(max-width:760px){.gesture-word{font-size:18px}.gesture-controls{right:12px;bottom:10px;padding:3px 10px}.gesture-controls button{min-height:36px}.gesture-fall{width:16px;height:24px;margin-left:-8px}.gesture-impact i{width:24px;left:-12px;height:9px;top:-4px}}
@media(prefers-reduced-motion:reduce){.color-gesture{display:none!important}.gesture-controls{position:static;width:max-content;margin:0 24px 18px auto}.gesture-control-dot{box-shadow:none}}