/* One compact pencil arrow across homepage, quizzes and reports. */
.sketch-arrow,.button .sketch-arrow,.card-cta .sketch-arrow,.back-top .sketch-arrow,.ui-arrow{display:inline-block;flex:none;width:22px;height:22px;background:transparent url('/home-art/arrow-medium-v5.webp') center / contain no-repeat;border:0;border-radius:0;box-shadow:none;vertical-align:middle;filter:none;transition:transform .3s cubic-bezier(.22,1,.36,1),filter .2s}
.ui-arrow-back{rotate:180deg}.ui-arrow-down{rotate:90deg}.sketch-up{rotate:-90deg}
button:is(:hover,:focus-visible) .ui-arrow,a:is(:hover,:focus-visible) .sketch-arrow{filter:url(#arrow-warm)}
button:is(:hover,:focus-visible) .ui-arrow-next{transform:translateX(3px)}
button:is(:hover,:focus-visible) .ui-arrow-back{transform:translateX(3px)}
button:is(:hover,:focus-visible) .ui-arrow-down{transform:translateX(3px)}
.text-button .ui-arrow{width:17px;height:17px;margin:0 4px}
/* Keep the icon with the label; old sprite margins left the CTA off balance. */
.welcome .button,.card-cta,.primary:has(>.ui-arrow),.secondary:has(>.ui-arrow),.primary-button:has(>.ui-arrow),.outline-button:has(>.ui-arrow),.text-button:has(>.ui-arrow){display:inline-flex;align-items:center;justify-content:center;gap:6px}
.card-cta{gap:4px}
.button .sketch-arrow,.card-cta .sketch-arrow,button>.ui-arrow{display:block;align-self:center;margin:0;line-height:1}
/* v5 artwork bounds have uneven transparent padding; center the visible pencil shape. */
.sketch-arrow,.button .sketch-arrow,.card-cta .sketch-arrow,.back-top .sketch-arrow,.ui-arrow{background-position:calc(50% - 2.1px) calc(50% + 1.5px)}
.text-button .ui-arrow{background-position:calc(50% - 1.6px) calc(50% + 1.1px)}
.all-tests-link{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:12px 3px;margin-left:auto;transition:transform .3s cubic-bezier(.22,1,.36,1),color .2s}
.all-tests-link:after{content:"";position:absolute;left:0;right:0;bottom:3px;height:5px;background:#ffda68;border-radius:8px;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.all-tests-link:is(:hover,:focus-visible){transform:translateY(-2px);color:#292e2b}
.all-tests-link:is(:hover,:focus-visible):after{transform:scaleX(1)}
.all-tests-link:active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){.sketch-arrow,.ui-arrow,.all-tests-link,.all-tests-link:after{transition:none!important}.all-tests-link:is(:hover,:focus-visible),button:is(:hover,:focus-visible) .ui-arrow{transform:none}}