.river{position:relative}.river-svg{pointer-events:none;position:absolute;inset:0;overflow:visible}.river-auto .river-stops,.river-column .river-stops{padding-left:2.5rem}@media (min-width:48rem){.river-auto .river-stops{padding-top:3.5rem;padding-left:0}.river-column .river-stops{padding-left:3rem}}.river-water{fill:none;stroke:color-mix(in srgb, var(--accent) 14%, transparent);stroke-width:14px;stroke-linecap:round;stroke-linejoin:round}.river-body{fill:color-mix(in srgb, var(--accent) 14%, transparent)}.river-current{fill:none;stroke:color-mix(in srgb, var(--accent) 45%, transparent);stroke-width:1.3px;stroke-linecap:round;stroke-linejoin:round}.river-braid{stroke:color-mix(in srgb, var(--accent) 9%, transparent);stroke-width:8px}.river-stop{fill:var(--background);stroke:var(--accent);stroke-width:1.4px;transition:r .4s var(--ease-precise), fill .4s var(--ease-precise)}.river-stop[data-on]{fill:var(--accent)}.river-boat{offset-anchor:50% 50%;pointer-events:none;width:40px;height:18px;transition:offset-distance 1.7s cubic-bezier(.45,0,.25,1);position:absolute;top:0;left:0}.river-boat[data-reset]{transition:none}.river-boat-art{fill:var(--accent);stroke:var(--accent);stroke-linecap:round;stroke-linejoin:round;transform-origin:50%;animation:2.6s ease-in-out infinite river-bob;display:block;overflow:visible}.river-boat-art .river-boat-hull,.river-boat-art circle{stroke:none}.river-boat-art .river-boat-shaft{stroke-width:1.4px}.river-boat-art .river-boat-blade{stroke-width:3.2px}.river-boat-art .river-boat-cockpit{fill:var(--background);stroke:none}.river[data-still] .river-boat-art{animation-play-state:paused}.river[data-rest] .river-boat-art{animation:none}@keyframes river-bob{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}.river[data-mode=scroll]{view-timeline-name:--river}@supports (animation-timeline:view()){.river[data-mode=scroll] .river-boat{transition:none;animation:linear both river-drift;animation-timeline:--river;animation-range:contain}}@keyframes river-drift{0%{offset-distance:0%}to{offset-distance:96%}}.river[data-offscreen] .river-boat-art{animation-play-state:paused}.river[data-hovering] .river-boat{transition-duration:.8s}.river:not([data-across])[data-mode=tour] .river-boat{transition-duration:.9s}
.up-label{color:var(--foreground-2);transition:color .4s var(--ease-precise)}.up-stage{transition:opacity .5s var(--ease-precise)}.up-stage:not([data-on]):not(:hover){opacity:.8}.up-stage[data-on] .up-label,.up-stage:hover .up-label{color:var(--foreground)}.up-word{white-space:pre;animation:up-word .7s var(--ease-precise) both;animation-delay:calc(var(--w) * 60ms);display:inline-block}.up-example{--w:2;animation:up-word .7s var(--ease-precise) .32s both}@keyframes up-word{0%{opacity:0;transform:translate(.6em, calc(sin(var(--w,0) * 51.5662deg) * .45em + .15em))}55%{opacity:1}}@keyframes up-fade{0%{opacity:0}}