/* A routed stroke and offset trace connect action cues to the site's linework. */
svg.action-arrow{display:inline-block;flex:0 0 auto;width:20px;height:20px;overflow:visible;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.action-arrow-motion{transition:transform .28s cubic-bezier(.2,.65,.25,1)}
.action-arrow-echo{opacity:.34;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:.35;transition:opacity .28s,stroke-dashoffset .35s}
:is(a,button):is(:hover,:focus-visible) .action-arrow-motion{transform:translate(var(--arrow-x),var(--arrow-y))}
:is(a,button):is(:hover,:focus-visible) .action-arrow-echo{opacity:.75;stroke-dashoffset:0}
:is(a,button):active .action-arrow-motion{transform:translate(calc(var(--arrow-x) * .4),calc(var(--arrow-y) * .4))}
.round-arrow .action-arrow{width:25px;height:25px}
.project-open .action-arrow{width:22px;height:22px}
.filter-arrow .action-arrow{width:18px;height:18px}
.resource-arrow .action-arrow{width:23px;height:23px}
.method-steps b .action-arrow{width:19px;height:19px}
.hero-project:hover .round-arrow,.collection-filter:hover .filter-arrow,.collection-filter[aria-pressed=true] .filter-arrow{transform:none}
@media(prefers-reduced-motion:reduce){.action-arrow-motion,.action-arrow-echo{transition:none}:is(a,button):is(:hover,:focus-visible,:active) .action-arrow-motion{transform:none}}
@media(forced-colors:active){.action-arrow-echo{opacity:.6}}