.route{aspect-ratio:300/120;width:100%;max-width:300px;margin:0 auto;position:relative}.route__svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.route__line{fill:none;stroke:var(--line-2);stroke-width:2.5px;stroke-linecap:round;stroke-dasharray:.012 .03;transition:stroke .4s var(--ease-out), opacity .4s var(--ease-out), stroke-width .4s var(--ease-out)}.route__dot{fill:var(--ink-3)}.route__path--1 .route__dot{fill:var(--blue)}.route[data-found] .route__path:not(.route__path--1) .route__line{opacity:.25}.route[data-found] .route__path--1 .route__line{stroke:var(--blue);stroke-width:4px;stroke-dasharray:1;stroke-dashoffset:1px;animation:route-win .62s var(--ease-out) forwards}@keyframes route-win{to{stroke-dashoffset:0}}.route__node{background:var(--surface);border-radius:99px;place-items:center;width:58px;height:58px;margin:-29px 0 0 -29px;display:grid;position:absolute;top:50%}.route__node--from{background:var(--blue);left:16%}.route__node--to{box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .3s var(--ease-out) .38s;left:84%}.route[data-found] .route__node--to{box-shadow:inset 0 0 0 2.5px var(--blue);animation:node-pop .52s var(--spring-bouncy) .38s both}@keyframes node-pop{0%{transform:scale(1)}40%{transform:scale(1.14)}to{transform:scale(1)}}.journey{aspect-ratio:350/130;width:100%;position:relative}.journey__svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.journey__track{fill:none;stroke:var(--line-2);stroke-width:3px;stroke-linecap:round;stroke-dasharray:2 9}.journey__trail{fill:none;stroke:var(--blue);stroke-width:4px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke .3s var(--ease-out)}.journey__coin{transition:opacity .3s var(--ease-out)}.journey__coin-body{fill:var(--blue);transition:fill .3s var(--ease-out)}.journey__coin-sign{fill:var(--on-blue);font-size:14px;font-weight:var(--w-title);font-family:var(--font);transition:fill .3s var(--ease-out)}.journey[data-returning] .journey__trail{stroke:var(--ink)}.journey[data-returning] .journey__coin-body{fill:var(--ink)}.journey[data-returning] .journey__coin-sign{fill:var(--on-ink)}.journey[data-status=failed] .journey__coin{opacity:0;transition:opacity .26s var(--ease-out) .7s}.journey[data-arrived] .journey__coin{opacity:0;transition-duration:.18s}.journey__node{background:var(--surface);border-radius:99px;place-items:center;width:68px;height:68px;margin:-34px 0 0 -34px;display:grid;position:absolute;top:70.8%}.journey__node--from{background:var(--blue);left:17.14%}.journey__node--to{box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .3s var(--ease-out);left:82.86%}.journey[data-arrived] .journey__node--to{box-shadow:inset 0 0 0 2.5px var(--blue);animation:node-pop .6s var(--spring-bouncy) both}.journey__badge{width:26px;height:26px;color:var(--on-blue);background:var(--blue);box-shadow:0 0 0 3px var(--canvas);transition:transform .52s var(--spring-bouncy);border-radius:99px;place-items:center;display:grid;position:absolute;bottom:-4px;right:-4px;transform:scale(0)}.journey[data-arrived] .journey__node--to .journey__badge{transition-delay:80ms;transform:scale(1)}.journey[data-status=failed] .journey__node--to .journey__badge{background:var(--red);transform:scale(1)}.journey[data-status=refunded] .journey__node--from .journey__badge{background:var(--ink);color:var(--on-ink);transform:scale(1)}.journey__sources{display:flex;position:absolute;top:-14px;left:50%;translate:-50%}.journey__sources span{box-shadow:0 0 0 2px var(--canvas);background:var(--canvas);animation:pop-in .42s var(--spring-bouncy) both;border-radius:99px;margin-left:-5px}.steps{gap:2px;display:grid}.steps__item{min-height:40px;font-size:var(--t-body);font-weight:var(--w-label);transition:color .3s var(--ease-out);align-items:center;gap:12px;display:flex}.steps__mark{width:26px;height:26px;box-shadow:inset 0 0 0 2px var(--line-2);color:var(--on-blue);transition:background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);border-radius:99px;flex:none;place-items:center;display:grid}.steps__mark>*{animation:pop-in .38s var(--spring-bouncy) both}.steps__item[data-state=waiting]{color:var(--ink-2)}.steps__item[data-state=active] .steps__mark{box-shadow:inset 0 0 0 2px var(--blue);color:var(--blue)}.steps__item[data-state=active]{font-weight:var(--w-button)}.steps__item[data-state=done] .steps__mark{background:var(--blue);box-shadow:none}.steps__item[data-state=failed] .steps__mark{background:var(--red);box-shadow:none}.steps__item[data-returning][data-state=active] .steps__mark{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}.steps__item[data-returning][data-state=done] .steps__mark{background:var(--ink);color:var(--on-ink)}.result{place-items:center;width:92px;height:92px;display:inline-grid;position:relative}.result svg{width:100%;height:100%;overflow:visible}.result__ring{fill:none;stroke-width:6px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px;transform-origin:50%;animation:draw .62s var(--ease-out) forwards;transform:rotate(-90deg)}.result__glyph{fill:none;stroke-width:7px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1px;animation:draw .42s var(--ease-out) .46s forwards}.result[data-kind=success] .result__ring,.result[data-kind=success] .result__glyph{stroke:var(--blue)}.result[data-kind=refunded] .result__ring,.result[data-kind=refunded] .result__glyph{stroke:var(--ink)}.result[data-kind=failed] .result__ring,.result[data-kind=failed] .result__glyph{stroke:var(--red)}@keyframes draw{to{stroke-dashoffset:0}}.steps__note{font-size:var(--t-caption);font-weight:var(--w-label);color:var(--ink-2);display:block}.steps__note:first-letter{text-transform:uppercase}