.fx-proc{--loop:12s;display:flex;flex-direction:column;gap:52px}.fx-proc.is-boxed{border-radius:28px;background:var(--surface);border:1px solid var(--line);padding:64px}.fx-proc__aside{font-size:16px;color:var(--muted)}.fx-proc__body{position:relative}.fx-proc__track{position:absolute;left:22px;top:21px;width:calc(100% - 100% / var(--n) - 0px);height:2px;background:var(--line);border-radius:2px;overflow:hidden}.fx-proc__fill{display:block;height:100%;background:linear-gradient(90deg,#5B2BD9,#EE5A3A);transform-origin:left center;animation:prFill var(--loop) linear infinite}.fx-proc__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}.fx-proc__step{position:relative;display:flex;flex-direction:column;gap:12px;padding-right:32px}.fx-proc__node{position:relative;z-index:1;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:500;font-size:15px;color:var(--ink);animation-duration:var(--loop);animation-timing-function:linear;animation-iteration-count:infinite}.fx-proc__title{margin:10px 0 0;font-weight:700;font-size:24px;letter-spacing:-.01em;line-height:1.2}.fx-proc__text{font-size:16px;line-height:1.6;color:var(--muted)}@keyframes fxpn3-0{0%,92%{background-color:#5B2BD9;color:#FFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}.fx-proc[style*="--n:3;"] .fx-proc__step:nth-child(1) .fx-proc__node{animation-name:fxpn3-0}@keyframes fxpn3-1{0%,35%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}37%,92%{background-color:#5B2BD9;color:#FFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}.fx-proc[style*="--n:3;"] .fx-proc__step:nth-child(2) .fx-proc__node{animation-name:fxpn3-1}@keyframes fxpn3-2{0%,71%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}73%,92%{background-color:#EE5A3A;color:#FFF;border-color:#EE5A3A;box-shadow:0 0 0 6px #FFE8E2}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}}.fx-proc[style*="--n:3;"] .fx-proc__step:nth-child(3) .fx-proc__node{animation-name:fxpn3-2}@keyframes fxpn4-0{0%,92%{background-color:#5B2BD9;color:#FFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}.fx-proc[style*="--n:4;"] .fx-proc__step:nth-child(1) .fx-proc__node{animation-name:fxpn4-0}@keyframes fxpn4-1{0%,22%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}24%,92%{background-color:#5B2BD9;color:#FFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}.fx-proc[style*="--n:4;"] .fx-proc__step:nth-child(2) .fx-proc__node{animation-name:fxpn4-1}@keyframes fxpn4-2{0%,47%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}49%,92%{background-color:#5B2BD9;color:#FFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}.fx-proc[style*="--n:4;"] .fx-proc__step:nth-child(3) .fx-proc__node{animation-name:fxpn4-2}@keyframes fxpn4-3{0%,71%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}73%,92%{background-color:#EE5A3A;color:#FFF;border-color:#EE5A3A;box-shadow:0 0 0 6px #FFE8E2}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}}.fx-proc[style*="--n:4;"] .fx-proc__step:nth-child(4) .fx-proc__node{animation-name:fxpn4-3}@keyframes fxpn5-0{0%,92%{background-color:#5B2BD9;color:#FFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}.fx-proc[style*="--n:5;"] .fx-proc__step:nth-child(1) .fx-proc__node{animation-name:fxpn5-0}@keyframes fxpn5-1{0%,16%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}18%,92%{background-color:#5B2BD9;color:#FFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}.fx-proc[style*="--n:5;"] .fx-proc__step:nth-child(2) .fx-proc__node{animation-name:fxpn5-1}@keyframes fxpn5-2{0%,35%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}37%,92%{background-color:#5B2BD9;color:#FFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}.fx-proc[style*="--n:5;"] .fx-proc__step:nth-child(3) .fx-proc__node{animation-name:fxpn5-2}@keyframes fxpn5-3{0%,53%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}55%,92%{background-color:#5B2BD9;color:#FFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}.fx-proc[style*="--n:5;"] .fx-proc__step:nth-child(4) .fx-proc__node{animation-name:fxpn5-3}@keyframes fxpn5-4{0%,71%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}73%,92%{background-color:#EE5A3A;color:#FFF;border-color:#EE5A3A;box-shadow:0 0 0 6px #FFE8E2}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}}.fx-proc[style*="--n:5;"] .fx-proc__step:nth-child(5) .fx-proc__node{animation-name:fxpn5-4}@keyframes fxpn6-0{0%,92%{background-color:#5B2BD9;color:#FFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}.fx-proc[style*="--n:6;"] .fx-proc__step:nth-child(1) .fx-proc__node{animation-name:fxpn6-0}@keyframes fxpn6-1{0%,13%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}15%,92%{background-color:#5B2BD9;color:#FFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}.fx-proc[style*="--n:6;"] .fx-proc__step:nth-child(2) .fx-proc__node{animation-name:fxpn6-1}@keyframes fxpn6-2{0%,27%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}29%,92%{background-color:#5B2BD9;color:#FFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}.fx-proc[style*="--n:6;"] .fx-proc__step:nth-child(3) .fx-proc__node{animation-name:fxpn6-2}@keyframes fxpn6-3{0%,42%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}44%,92%{background-color:#5B2BD9;color:#FFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}.fx-proc[style*="--n:6;"] .fx-proc__step:nth-child(4) .fx-proc__node{animation-name:fxpn6-3}@keyframes fxpn6-4{0%,56%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}58%,92%{background-color:#5B2BD9;color:#FFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}.fx-proc[style*="--n:6;"] .fx-proc__step:nth-child(5) .fx-proc__node{animation-name:fxpn6-4}@keyframes fxpn6-5{0%,71%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}73%,92%{background-color:#EE5A3A;color:#FFF;border-color:#EE5A3A;box-shadow:0 0 0 6px #FFE8E2}100%{background-color:#FFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}}.fx-proc[style*="--n:6;"] .fx-proc__step:nth-child(6) .fx-proc__node{animation-name:fxpn6-5}@keyframes prFill{0%{transform:scaleX(0);opacity:1}72%{transform:scaleX(1);opacity:1}92%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}@keyframes prFillV{0%{transform:scaleY(0);opacity:1}72%{transform:scaleY(1);opacity:1}92%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}@media (max-width:960px){.fx-proc.is-boxed{padding:40px 32px}.fx-proc__list{grid-template-columns:minmax(0,1fr);gap:28px}.fx-proc__step{padding:0 0 0 64px;min-height:44px;gap:6px}.fx-proc__node{position:absolute;left:0;top:0}.fx-proc__title{margin:8px 0 0;font-size:21px}.fx-proc__track{left:21px;top:22px;bottom:22px;width:2px;height:auto}.fx-proc__fill{width:100%;height:100%;transform-origin:top center;animation-name:prFillV}}@media (max-width:600px){.fx-proc{gap:32px}.fx-proc.is-boxed{padding:0;background:none;border:0;border-radius:0}.fx-proc__step{padding-left:60px}.fx-proc__text{font-size:15px}}@media (prefers-reduced-motion:reduce){.fx-proc__node{background-color:#5B2BD9!important;color:#fff!important;border-color:#5B2BD9!important}.fx-proc__node.is-last{background-color:#EE5A3A!important;border-color:#EE5A3A!important}.fx-proc__fill{transform:none!important}}