/* Keep the icon's weight and proportions identical across the current UI. */
.ui-arrow{--arrow-size:10px;--arrow-travel:135%;position:relative;display:inline-block;flex:0 0 var(--arrow-size);width:var(--arrow-size);height:var(--arrow-size);line-height:0;vertical-align:-.04em;overflow:hidden;pointer-events:none}
/* One measured diagonal pass, with a small gap before the next arrow arrives. */
.ui-arrow-track{position:relative;display:block;width:100%;height:100%;transition:transform .62s cubic-bezier(.4,0,.2,1)}
.ui-arrow svg{position:absolute;display:block;inset:0;width:100%;height:100%;fill:currentColor;stroke:none}
.ui-arrow svg+svg{transform:translate(calc(-1 * var(--arrow-travel)),var(--arrow-travel))}
.ui-arrow-right{transform:rotate(45deg)}.ui-arrow-left{transform:rotate(-135deg)}.ui-arrow-se{transform:rotate(90deg)}.ui-arrow-down{transform:rotate(135deg)}.ui-arrow-up{transform:rotate(-45deg)}
:is(a,button):focus-visible .ui-arrow-track{transform:translate(var(--arrow-travel),calc(-1 * var(--arrow-travel)))}
@media(hover:hover){:is(a,button):hover .ui-arrow-track{transform:translate(var(--arrow-travel),calc(-1 * var(--arrow-travel)))}}
.card-arrow .ui-arrow{--arrow-size:11px}
.choice-symbol .ui-arrow{--arrow-size:10px}
.color-item[aria-pressed=true] .choice-symbol .ui-arrow{display:none}
.guide-v5 .passport-action .ui-arrow{--arrow-size:11px}
.guide-v5 .source-note>a,.guide-v5 .case-footer a{align-items:center}
.guide-v5 .herofoot .ui-arrow{--arrow-size:8px;margin:0 4px}
.navlinks .ui-arrow,.foot .ui-arrow,.previous-study .ui-arrow{margin-left:3px}
.reference h2 .ui-arrow{margin-left:5px}
@media(prefers-reduced-motion:reduce){.ui-arrow-track{transition:none}:is(a,button):is(:hover,:focus-visible) .ui-arrow-track{transform:none}}