#gestureGuide { width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); padding: 20px; border: 1px solid #c4dacc; border-radius: 8px; background: #f4faf5; color: #264e41; box-sizing: border-box; overflow: auto; }
#gestureGuide::backdrop { background: #15392d80; }
#gestureGuide header, #gestureGuide footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#gestureGuide h2 { margin: 0; font-size: 20px; }
#gestureGuide button { min-height: 44px; border: 1px solid #bbd3c7; border-radius: 6px; color: #264e41; background: #fff; padding: 8px 16px; }
#gestureGuide #guideClose { width: 44px; padding: 10px; }
#gestureGuide #guideNext { background: #2b7055; color: #fff; }
#gestureGuide p { font-size: 15px; line-height: 1.7; min-height: 76px; margin: 12px 0; }
.guide-demo { display: grid; place-items: center; height: 174px; }
.guide-disc { width: 132px; height: 132px; position: relative; border-radius: 50%; background: #e2efe5; border: 5px solid #c3d8c8; box-shadow: inset 0 2px 5px #6b8f7040, 0 4px 0 #aac7b4; }
.guide-symbol { position: absolute; inset: 42px; color: #658e78; }
.guide-symbol svg { width: 100%; height: 100%; }
.guide-finger { position: absolute; width: 22px; height: 22px; top: 55px; left: 55px; border-radius: 50%; background: #e6b954; border: 3px solid #fff; box-sizing: border-box; z-index: 1; animation: guide-cast 2.4s infinite; }
[data-gesture="hook"] .guide-finger { animation-name: guide-hook; }
[data-gesture="reel"] .guide-finger { animation: guide-reel 2.4s linear infinite; }
@keyframes guide-cast { 0%,100% { transform: translateY(-30px); } 50% { transform: translateY(34px); } 75% { transform: translateY(-40px); } }
@keyframes guide-hook { 0%,45%,100% { transform: translateY(34px); } 62%,85% { transform: translateY(-40px); } }
@keyframes guide-reel { from { transform: rotate(0deg) translateX(45px); } to { transform: rotate(360deg) translateX(45px); } }
@media (orientation: landscape) and (max-height: 500px) { #gestureGuide { width: min(540px, calc(100vw - 32px)); display: none; } #gestureGuide[open] { display: grid; grid-template-columns: 156px minmax(0, 1fr); gap: 8px 16px; } #gestureGuide header, #gestureGuide footer { grid-column: 1 / -1; } .guide-demo { height: 150px; } #gestureGuide p { align-self: center; min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .guide-finger { animation: none !important; } }