.gesture-tutorial{--tutorial-ink:#f3f7fd;position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(13,25,38,.69);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--tutorial-ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.4;isolation:isolate;animation:tutorial-reveal var(--fade,650ms) ease both;user-select:none;-webkit-user-select:none;touch-action:none}
.gesture-tutorial *{box-sizing:border-box}.gesture-tutorial svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.gesture-tutorial h2{font:500 clamp(23px,4vw,32px)/1.2 system-ui;margin:8px 0 22px;letter-spacing:-.7px;color:#fff}
.tutorial-eyebrow{margin:0;color:#afc5dc;font-size:10px;letter-spacing:2px}
.tutorial-dismiss{position:absolute;right:16px;top:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:11px;border:0;border-radius:50%;background:#ffffff12;color:#fff;cursor:pointer}
.tutorial-dismiss svg{width:22px;height:22px}.tutorial-dismiss:focus-visible{outline:2px solid #79bbff;outline-offset:2px}
.tutorial-viewer .tutorial-dismiss{left:16px;right:auto}
.tutorial-viewer-content{width:min(390px,calc(100% - 44px))}.tutorial-cards{display:grid;gap:12px}
.tutorial-card{display:flex;align-items:center;gap:15px;opacity:0;animation:tutorial-card-in .65s calc(var(--step)*.12s) forwards}
.tutorial-viewer .tutorial-card{padding:9px 16px;border:1px solid #fff2;border-radius:18px;background:#ffffff08}
.tutorial-card strong{display:block;font-size:17px;font-weight:550;color:#fff}.tutorial-card span{display:block;color:#c8d6e5;font-size:13px;margin-top:4px}
.tutorial-gesture{width:74px;height:65px;color:#b9dcff;overflow:visible}.tutorial-hand{fill:#203347;stroke-width:2;transform-origin:48px 43px}
.rotate .tutorial-hand,.pan .tutorial-hand{animation:tutorial-drag 1.35s ease-in-out infinite}.pan.mouse .tutorial-mouse-key{transform:translateX(16px)}
.tutorial-mouse-key{fill:#74b7ff;stroke:none}.tutorial-trail{opacity:.6;stroke-dasharray:3 5}.tutorial-tap{fill:none;stroke:#88caff;transform-origin:39px 22px;animation:tutorial-tap 1.4s infinite}.tutorial-tap.two{animation-delay:.22s}.focus .tutorial-hand{animation:tutorial-press 1.4s infinite}
.zoom .tutorial-hand{animation:tutorial-pinch 1.5s ease-in-out infinite}.tutorial-spread{stroke:#8bcaff;animation:tutorial-pinch 1.5s ease-in-out infinite;transform-origin:center}.zoom.mouse .tutorial-hand{animation:none}.zoom.mouse .tutorial-mouse-key{animation:tutorial-wheel 1.2s infinite}
.tutorial-footnote{color:#afc5dc;font-size:11px;line-height:1.6;margin:18px 0 0}.tutorial-timer{position:absolute;bottom:0;left:0;right:0;height:2px;background:#7abcff;transform-origin:left;animation:tutorial-time var(--duration) var(--fade,650ms) linear forwards}
.tutorial-editor-heading{position:absolute;top:14px;left:20px}.tutorial-editor-heading h2{font-size:21px;margin:4px 0}.tutorial-tools{position:absolute;height:98px}
.tutorial-tool{position:absolute;top:0;text-align:center;font-size:11px;color:#d5e6f7}.tutorial-toolface{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #a5d0ff77;border-radius:8px;background:#f1f6ff;color:#243d57;font-size:13px;font-weight:550}
.tutorial-toolface svg{width:20px;height:20px}.tutorial-tool-arrow{display:block;width:18px;height:20px;margin:5px auto 2px;color:#8bcaff}.tutorial-tool span{display:block;white-space:nowrap}
.tutorial-editor-content{position:absolute;left:18px;right:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto}
.tutorial-draw-demo{width:min(360px,100%);text-align:center}.tutorial-draw-demo>svg{width:100%;height:100px;overflow:visible;color:#8bbff5}.tutorial-demo-outline{stroke:#d8e8ff33;stroke-width:2}.tutorial-demo-wall{stroke-width:6;stroke-dasharray:160;stroke-dashoffset:160;animation:tutorial-wall 2s ease-in-out infinite}
.tutorial-draw-hand{fill:#203347;stroke:#cde6ff;stroke-width:2;animation:tutorial-draw 2s ease-in-out infinite}.tutorial-draw-demo strong{display:block;font-size:15px;color:#fff}.tutorial-draw-demo span{display:block;font-size:11px;color:#bdcee0;margin-top:4px}
.tutorial-editor-gestures{width:min(460px,100%);display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.tutorial-editor-gestures .tutorial-card{gap:7px;align-items:center}.tutorial-editor-gestures .tutorial-gesture{width:54px;height:52px}.tutorial-editor-gestures strong{font-size:13px}.tutorial-editor-gestures span{font-size:11px}.tutorial-editor .tutorial-footnote{text-align:center;margin-top:10px}
@keyframes tutorial-reveal{from{opacity:0}to{opacity:1}}@keyframes tutorial-card-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes tutorial-drag{0%,100%{transform:translateX(-9px)}50%{transform:translateX(9px)}}@keyframes tutorial-pinch{0%,100%{transform:scale(.86)}50%{transform:scale(1.12)}}
@keyframes tutorial-tap{0%,26%{opacity:.9;transform:scale(.35)}60%,100%{opacity:0;transform:scale(1.5)}}@keyframes tutorial-press{0%,25%,50%,100%{transform:none}12%,37%{transform:translateY(4px)}}@keyframes tutorial-wheel{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
@keyframes tutorial-time{from{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes tutorial-wall{0%,12%{stroke-dashoffset:160;opacity:.4}65%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes tutorial-draw{0%,12%{transform:translate(31px,28px);opacity:.3}20%{opacity:1}65%,80%{transform:translate(191px,28px);opacity:1}100%{transform:translate(191px,20px);opacity:0}}
@media(max-width:380px){.tutorial-viewer-content{width:calc(100% - 32px)}.tutorial-viewer .tutorial-card{padding:7px 10px;gap:10px}.tutorial-editor-content{left:10px;right:10px}.tutorial-editor-gestures{gap:4px}.tutorial-editor-gestures .tutorial-gesture{width:43px}.tutorial-tool{font-size:10px}.tutorial-toolface{gap:4px;font-size:12px}}
@media(max-height:560px){.tutorial-viewer-content h2{font-size:23px;margin-bottom:12px}.tutorial-cards{gap:6px}.tutorial-viewer .tutorial-gesture{height:45px}.tutorial-footnote{margin-top:9px}.tutorial-editor-content{justify-content:flex-start}.tutorial-draw-demo>svg{height:66px}.tutorial-editor-gestures{margin-top:5px}.tutorial-editor-heading h2{font-size:17px}}
@media(prefers-reduced-motion:reduce){.gesture-tutorial,.gesture-tutorial *{animation:none!important}.tutorial-card{opacity:1}.tutorial-demo-wall{stroke-dashoffset:0}.tutorial-draw-hand{transform:translate(105px,28px)}.tutorial-tap{opacity:.5}.tutorial-timer{display:none}}

.gesture-tutorial.is-leaving{animation:tutorial-leave var(--fade,650ms) ease both}
@keyframes tutorial-leave{from{opacity:1}to{opacity:0}}