/* Independent phone presentation layer. No desktop navigation selectors are changed. */
.mobile-gesture-icon{display:none}
html.mobile-journey .mobile-gesture-hint{display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:10px;line-height:1.4}
html.mobile-journey .mobile-gesture-icon{display:block;flex:none;width:32px;height:16px;overflow:visible;color:var(--ink)}
html.mobile-journey .mobile-gesture-icon path{fill:none;stroke:currentColor;stroke-width:.8;opacity:.45}
html.mobile-journey .gesture-dot{fill:currentColor;opacity:.65}
html.mobile-journey .gesture-copy{font-size:10px;text-align:left;white-space:nowrap}
html.mobile-journey .gesture-copy small{display:block;font-size:9px;opacity:.8;letter-spacing:.015em}
html.mobile-journey .gesture-hint-visible [data-gesture-direction="across"] .gesture-dot{animation:gesture-across 2.6s ease-in-out 2 .5s both}
html.mobile-journey.swipe-understood [data-gesture-direction="across"] .gesture-dot{animation:none}
html.mobile-journey [data-gesture-direction="down"] .mobile-gesture-icon{width:20px;transform:rotate(90deg)}
html.mobile-journey .gesture-hint-visible [data-gesture-direction="down"] .gesture-dot{animation:gesture-down 2.2s ease-in-out 2 .3s both}
html.mobile-journey .story-next>.arrow{display:none}
html.mobile-journey .mobile-journey-controls{gap:8px}
@keyframes gesture-across{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}65%{transform:translateX(8px)}}
@keyframes gesture-down{0%,100%{transform:translateX(0)}55%{transform:translateX(8px)}}
@media(prefers-reduced-motion:reduce){html.mobile-journey .gesture-dot{animation:none!important}}

html.mobile-journey .mobile-journey-controls button{padding-inline:12px}
html.mobile-journey.story-motion .story-next>span.mobile-gesture-hint{display:inline-flex;align-items:center;gap:6px}