.jny{--g:24px;--n:50px;--t:2.8s;position:relative}.jny__steps{gap:0 var(--g);grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.jny__st{grid-row:span 4;grid-template-rows:subgrid;align-content:start;justify-items:start;min-width:0;display:grid}.jny__node{z-index:1;background-color:#fff;transition:border-color .35s,color .35s;position:relative}.jny__title{text-wrap:wrap;margin-top:20px}.jny__sub{text-wrap:wrap;margin-top:8px}.jny__art{border-radius:var(--radius-xl);opacity:0;width:100%;max-width:240px;transition:opacity .45s var(--ease-done),transform .45s var(--ease-done);background-color:#fff;margin-top:20px;padding:16px;display:block;transform:translateY(10px)}.jny__rail{left:calc(var(--n)/2);top:calc(var(--n)/2);width:calc(75% + .75*var(--g));background:var(--color-border-subtle);height:1px;position:absolute}.jny__rail i{background:var(--color-ink);transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}@keyframes jny-fill{0%,6%{transform:scaleX(0)}25%,36%{transform:scaleX(.3333)}61%,72%{transform:scaleX(.6667)}97%,to{transform:scaleX(1)}}.jny.is-in .jny__rail i{animation:jny-fill var(--t)cubic-bezier(.45,0,.35,1).2s both}.jny.is-in .jny__node{border-color:var(--color-ink);color:var(--color-ink)}.jny.is-in .jny__art{opacity:1;transform:none}.jny.is-in .jny__st:first-child :is(.jny__node,.jny__art){transition-delay:.35s}.jny.is-in .jny__st:nth-child(2) :is(.jny__node,.jny__art){transition-delay:.9s}.jny.is-in .jny__st:nth-child(3) :is(.jny__node,.jny__art){transition-delay:1.9s}.jny.is-in .jny__st:nth-child(4) :is(.jny__node,.jny__art){transition-delay:2.92s}@media (max-width:1023px){.jny{--g:16px}.jny__art{padding:12px}}@media (max-width:760px){.jny__rail{display:none}.jny__steps{grid-template-columns:minmax(0,1fr);gap:32px}.jny__st{grid-row:auto;grid-template-rows:none;grid-template-columns:var(--n)minmax(0,1fr);align-items:start;column-gap:16px;position:relative}.jny__node{grid-row:1/span 3}.jny__title,.jny__sub,.jny__art{grid-column:2}.jny__title{margin-top:0;padding-top:14px}.jny__sub{margin-top:4px}.jny__art{max-width:none;margin-top:16px}.jny__st:not(:last-child):after{content:"";left:calc(var(--n)/2);top:calc(var(--n) + 8px);background:var(--color-border-subtle);width:1px;transition:background-color .35s;position:absolute;bottom:-24px}.jny.is-in .jny__st:not(:last-child):after{background:var(--color-ink)}.jny.is-in .jny__st:first-child:after{transition-delay:.6s}.jny.is-in .jny__st:nth-child(2):after{transition-delay:1.15s}.jny.is-in .jny__st:nth-child(3):after{transition-delay:1.7s}.jny.is-in .jny__st:nth-child(2) :is(.jny__node,.jny__art){transition-delay:.8s}.jny.is-in .jny__st:nth-child(3) :is(.jny__node,.jny__art){transition-delay:1.35s}.jny.is-in .jny__st:nth-child(4) :is(.jny__node,.jny__art){transition-delay:1.9s}}@media (prefers-reduced-motion:reduce){.jny__rail i{transform:none}.jny .jny__node{border-color:var(--color-ink);color:var(--color-ink);transition:none}.jny .jny__art{opacity:1;transition:none;transform:none}.jny .jny__st:after{background:var(--color-ink)}}
