:root{
  
  --e-snap:cubic-bezier(.34,1.42,.62,1);
  --m-press:calc(120ms*var(--m-k));--m-hover:calc(200ms*var(--m-k));
  --m-micro:calc(300ms*var(--m-k));--m-glyph:calc(360ms*var(--m-k));
  --m-line:calc(760ms*var(--m-k));--m-hero:calc(1000ms*var(--m-k));
  --m-draw:calc(1200ms*var(--m-k));--m-wave:calc(1700ms*var(--m-k));--m-rm:150ms;
  --m-st2:calc(70ms*var(--m-k));--m-st3:calc(120ms*var(--m-k));
  --m-y-row:14px;--m-y-block:24px;--m-y-hero:20%;--m-y-mask:105%;--m-x-arrow:4px;--m-x-nudge:2px;
  --m-s-press:.97;--m-s-brand:.9;--m-wave-y:-14px;
  --m-step:30vh;--m-step-p:20svh;--m-scrub:44vh;--m-scrub-p:26svh;
  --m-lw:1.75px;--m-inset:max(8px,calc(var(--g) - 16px));
  
  --m-dash:2 6;--m-dot:.01 5;
}
.m-slow{--m-k:4}
@media (max-width:767px){:root{--m-y-block:16px}}
@media (prefers-contrast:more){:root{--m-lw:2.5px}}


[data-m=rise] .c-line>span{transition:transform var(--m-hero) var(--e-out)}
[data-m=rise] .c-line+.c-line>span{transition-delay:var(--m-st2)}
.c-pre:not(.m-lite) [data-m=rise] .c-line>span{transform:translateY(var(--m-y-hero))}


.m-dash{stroke-dasharray:var(--m-dash)}
[data-m=draw][data-m-on=intro] [pathLength]{stroke-dasharray:1 2;transition:stroke-dashoffset var(--m-line) var(--e-out) calc(200ms + var(--i,0)*var(--m-st3))}
.c-pre:not(.m-lite) [data-m=draw][data-m-on=intro] [pathLength]{stroke-dashoffset:1.02}


[data-m=reveal][data-m-on=intro]{transition:clip-path var(--m-hero) var(--e-out)}
.c-pre:not(.m-lite) [data-m=reveal][data-m-on=intro]{clip-path:inset(0 var(--m-inset) round var(--r-panel))}
[data-m=press]{transition:transform var(--m-press) var(--e-out),background-color var(--m-hover),color var(--m-hover),border-color var(--m-hover)}
[data-m=press]:active{transform:scale(var(--m-s-press))}


.m-rail{display:block;height:2px;border-radius:2px;background:var(--line-c);overflow:hidden}
.m-rail>i{display:block;height:100%;background:currentColor;transform:scaleX(0);transform-origin:0 50%}
.m-rail--y{width:2px;height:100%}
.m-rail--y>i{transform:scaleY(0);transform-origin:50% 0}
[data-m=guide] a{position:relative}
[data-m=guide] a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:0 50%}


.c-route{--rd:12px;--rg:clamp(20px,2.4vw,32px);container-type:inline-size;margin:0}
.c-route--lg{--m-lw:2px;--rd:14px}
.c-route__l{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:var(--rg)}
.c-route__n{position:relative;min-width:0;padding-top:calc(var(--rd) + 14px)}
.c-route__n::before{content:"";position:absolute;left:0;top:0;width:var(--rd);height:var(--rd);box-sizing:border-box;border:var(--m-lw) solid;border-radius:50%}
.c-route__c{position:absolute;left:calc(var(--rd) + 6px);top:calc(var(--rd)/2 - var(--m-lw)/2);width:calc(100% + var(--rg) - var(--rd) - 12px);height:var(--m-lw);transform-origin:0 50%}
.c-route__c svg,.c-route__t svg{display:block;width:100%;height:100%;overflow:visible}
.c-route line{stroke:currentColor;stroke-width:var(--m-lw);stroke-linecap:round}
.c-route__c line+line{display:none}
.c-route__c--wait line,.c-route--paused line,.c-route__t line{stroke-dasharray:var(--m-dash)}
.c-route--unconfirmed .c-route__c line{stroke-dasharray:var(--m-dot)}
.c-route__t{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14px;line-height:1.35;color:var(--ink-2)}
.c-route__t svg{flex:none;width:22px;height:var(--m-lw)}
.c-route__f{margin-top:20px;font:500 12px/1.4 var(--f-m);letter-spacing:.06em;color:var(--ink-2)}
@container (max-width:599.98px){
  .c-route__l{grid-auto-flow:row;row-gap:var(--rg)}
  .c-route__n{padding:0 0 0 calc(var(--rd) + 16px)}
  .c-route__c{left:calc(var(--rd)/2 - var(--m-lw)/2);top:calc(var(--rd) + 6px);width:var(--m-lw);height:calc(100% + var(--rg) - var(--rd) - 12px);transform-origin:50% 0}
  .c-route__c line{display:none}
  .c-route__c line+line{display:block}
}
@media (min-width:1024px){
  .c-route[data-m-on=intro] .c-route__c{transition:transform var(--m-line) var(--e-out) calc(var(--m-at,300ms) + var(--k,0)*var(--m-st3))}
  @container (min-width:600px){.c-pre:not(.m-lite) .c-route[data-m-on=intro]:not(.c-route--still,.c-route--paused,.c-route--unconfirmed) .c-route__c:not(.c-route__c--wait){transform:scaleX(0)}}
  @container (max-width:599.98px){.c-pre:not(.m-lite) .c-route[data-m-on=intro][data-m-fit]:not(.c-route--still,.c-route--paused,.c-route--unconfirmed) .c-route__c:not(.c-route__c--wait){transform:scaleY(0)}}
}
.c-route__n:nth-child(2){--k:1}
.c-route__n:nth-child(3){--k:2}


@supports (animation-timeline:view()){
  [data-m=draw]:not([data-m-on=intro]){view-timeline:--m-d block}
  [data-m=draw]:not([data-m-on=intro]) [pathLength]{stroke-dasharray:1 2;animation:m-draw linear both;animation-timeline:--m-d;animation-range:entry 10% cover 40%}
  [data-m=reveal]:not([data-m-on=intro]){animation:m-clip linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .c-g[data-m=stamp]{animation:g-draw linear both,g-check linear both;animation-timeline:view();animation-range:entry 30% entry 90%,entry 70% cover 40%}
  .m-rail>i{animation:m-to linear both;animation-timeline:scroll(root)}
  [data-m=guide] a::after{animation:m-to linear both;animation-timeline:var(--t);animation-range:contain 0% contain 100%}
  .c-route:not(.c-route--still,.c-route--paused,.c-route--unconfirmed){view-timeline:--m-r block}
  .c-route:not(.c-route--still,.c-route--paused,.c-route--unconfirmed) .c-route__c:not(.c-route__c--wait){animation:m-sx linear both;animation-timeline:--m-r;animation-range:cover calc(12% + var(--k,0)*9%) cover calc(21% + var(--k,0)*9%)}
  @container (max-width:599.98px){.c-route:not(.c-route--still,.c-route--paused,.c-route--unconfirmed) .c-route__c:not(.c-route__c--wait){animation-name:m-sy}}
  
  @media (min-width:1024px){
    @container (min-width:600px){.c-route[data-m-on=intro] .c-route__c.c-route__c{animation:none}}
    .c-route[data-m-on=intro][data-m-fit] .c-route__c.c-route__c{animation:none}
  }
}
@keyframes m-draw{from{stroke-dashoffset:1.02}}
@keyframes m-clip{from{clip-path:inset(0 var(--m-inset) round var(--r-panel))}to{clip-path:inset(0 0 round 0)}}
@keyframes m-sx{from{transform:scaleX(0)}}
@keyframes m-sy{from{transform:scaleY(0)}}
@keyframes m-to{to{transform:none}}




@media (prefers-reduced-motion:reduce),print{:is([data-m],[data-m] *,.c-route *){animation:none!important;transition:none!important}}
:is(.m-rm,.m-lite) :is([data-m],[data-m] *,.c-route *){animation:none!important;transition:none!important}
@media (forced-colors:active){.c-route line,[data-m=draw] path{stroke:CanvasText}.c-route__n::before{border-color:CanvasText}.m-rail>i,[data-m=guide] a::after{forced-color-adjust:none;background:CanvasText}}