.sd{--loop: 10s;--start: 1.5s;position:relative;margin:0}.sd__card{position:relative;overflow:hidden;border-radius:1.5rem;border:1px solid hsl(0 0% 100% / .14);background:linear-gradient(165deg,#ffffff1a,#ffffff08);padding:1.25rem;box-shadow:0 40px 80px -50px #000000e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff}.sd__head{display:flex;align-items:center;gap:.6rem}.sd__head-icon{display:grid;width:2rem;height:2rem;place-items:center;border-radius:.65rem;background:linear-gradient(135deg,#1d4ed8,#06b6d4)}.sd__head-icon .brand-icon{--ic-acc: #fff}.sd__title{font-size:1rem;font-weight:800;letter-spacing:-.01em}.sd__badge{margin-left:auto;border-radius:9999px;background:#ffffff1a;padding:.15rem .6rem;font-size:.6875rem;font-weight:700;letter-spacing:.04em;color:#e1e7efcc}.sd__ticket{display:flex;align-items:center;gap:.7rem;margin-top:1rem;border-radius:1rem;background:#fff;padding:.7rem .8rem;color:hsl(var(--brand-ink));box-shadow:0 14px 28px -18px #000000e6}.sd__ticket-icon{display:grid;width:2rem;height:2rem;flex:none;place-items:center;border-radius:.6rem;background:#e7f0fe;color:#1d4ed8}.sd__ticket-text{display:grid;min-width:0;line-height:1.25}.sd__ticket-text b{font-size:.875rem;font-weight:800}.sd__ticket-text small{font-size:.6875rem;color:hsl(var(--brand-slate))}.sd__status{position:relative;display:grid;margin-left:auto}.sd__status i{grid-area:1 / 1;border-radius:9999px;padding:.2rem .6rem;font-size:.6875rem;font-style:normal;font-weight:800;text-align:center;white-space:nowrap}.sd__status-open{background:#fdf0d8;color:#b45309;opacity:0}.sd__status-done{background:#dcf9e7;color:#15803d}.sd__track{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:1.1rem 0 0;padding:0}.sd__seg{position:absolute;top:1rem;display:flex;align-items:center;justify-content:space-evenly;translate:0 -50%;pointer-events:none}.sd__seg--0{left:calc(100% / 6 + 1.35rem);right:calc(50% + 1.35rem)}.sd__seg--1{left:calc(50% + 1.35rem);right:calc(100% / 6 + 1.35rem)}.sd__chev{width:.95rem;height:.95rem;flex:none;color:#3b82f6;--ic-acc: #22d3ee;stroke-width:2.4}.sd__step{position:relative;display:grid;justify-items:center;gap:.4rem;text-align:center}.sd__dot{--dot-bg: #22d3ee;display:grid;width:2rem;height:2rem;place-items:center;border-radius:9999px;background:var(--dot-bg);color:#08172b;box-shadow:0 0 0 4px #0a1b33}.sd__dot .brand-icon{--ic-acc: currentColor}.sd__step--2 .sd__dot{--dot-bg: #22c55e}.sd__step-text{font-size:.6875rem;font-weight:700;line-height:1.25;color:#e1e7efe6}.sd__chat{display:grid;gap:.45rem;margin-top:1.1rem;border-radius:1rem;background:#07122280;padding:.75rem}.sd__msg{display:inline-flex;align-items:center;gap:.35rem;max-width:85%;margin:0;border-radius:.9rem;padding:.45rem .7rem;font-size:.75rem;font-weight:600;line-height:1.3}.sd__msg--in{justify-self:start;border-bottom-left-radius:.25rem;background:#ffffff1f;color:#fff}.sd__msg--out{justify-self:end;border-bottom-right-radius:.25rem;background:#fff;color:hsl(var(--brand-ink))}.sd__msg--done{justify-self:center;background:#22c35d2e;color:#86efac}.sd__foot{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}.sd__foot span{border-radius:9999px;border:1px solid hsl(0 0% 100% / .14);padding:.2rem .65rem;font-size:.6875rem;font-weight:600;color:#e1e7efd9}@media(prefers-reduced-motion:no-preference){html[data-motion=on] .sd__step--0 .sd__dot{animation:sd-dot-0 var(--loop) var(--ease-out-expo, ease-out) infinite;animation-delay:var(--start)}html[data-motion=on] .sd__step--1 .sd__dot{animation:sd-dot-1 var(--loop) var(--ease-out-expo, ease-out) infinite;animation-delay:var(--start)}html[data-motion=on] .sd__step--2 .sd__dot{animation:sd-dot-2 var(--loop) var(--ease-out-expo, ease-out) infinite;animation-delay:var(--start)}html[data-motion=on] .sd__seg--0 .sd__chev{animation:sd-chev-0 var(--loop) ease-out infinite;animation-delay:calc(var(--start) + var(--j) * .18s)}html[data-motion=on] .sd__seg--1 .sd__chev{animation:sd-chev-1 var(--loop) ease-out infinite;animation-delay:calc(var(--start) + var(--j) * .18s)}html[data-motion=on] .sd__msg--in{animation:sd-msg-0 var(--loop) var(--ease-out-expo, ease-out) infinite;animation-delay:var(--start)}html[data-motion=on] .sd__msg--out{animation:sd-msg-1 var(--loop) var(--ease-out-expo, ease-out) infinite;animation-delay:var(--start)}html[data-motion=on] .sd__msg--done{animation:sd-msg-2 var(--loop) var(--ease-out-expo, ease-out) infinite;animation-delay:var(--start)}html[data-motion=on] .sd__status-open{animation:sd-open var(--loop) linear infinite;animation-delay:var(--start)}html[data-motion=on] .sd__status-done{animation:sd-done var(--loop) var(--ease-out-expo, ease-out) infinite;animation-delay:var(--start)}html[data-motion=on] .sd__ticket{animation:sd-ticket var(--loop) ease-out infinite;animation-delay:var(--start)}}@keyframes sd-dot-0{0%,5%{background:var(--dot-bg);color:#08172b;scale:1}8%,11%{background:#ffffff29;color:#e1e7ef8c;scale:.86}13.5%{background:var(--dot-bg);color:#08172b;scale:1.12}16%,to{background:var(--dot-bg);color:#08172b;scale:1}}@keyframes sd-dot-1{0%,5%{background:var(--dot-bg);color:#08172b;scale:1}8%,29%{background:#ffffff29;color:#e1e7ef8c;scale:.86}31.5%{background:var(--dot-bg);color:#08172b;scale:1.12}34%,to{background:var(--dot-bg);color:#08172b;scale:1}}@keyframes sd-dot-2{0%,5%{background:var(--dot-bg);color:#08172b;scale:1}8%,50%{background:#ffffff29;color:#e1e7ef8c;scale:.86}52.5%{background:var(--dot-bg);color:#08172b;scale:1.12}55%,to{background:var(--dot-bg);color:#08172b;scale:1}}@keyframes sd-chev-0{0%,5%{opacity:1;translate:0 0}8%,17%{opacity:.2;translate:-2px 0}20%{opacity:1;translate:3px 0}24%,to{opacity:1;translate:0 0}}@keyframes sd-chev-1{0%,5%{opacity:1;translate:0 0}8%,37%{opacity:.2;translate:-2px 0}40%{opacity:1;translate:3px 0}44%,to{opacity:1;translate:0 0}}@keyframes sd-msg-0{0%,5%{opacity:1;translate:0 0}8%,14%{opacity:0;translate:0 6px}18%,to{opacity:1;translate:0 0}}@keyframes sd-msg-1{0%,5%{opacity:1;translate:0 0}8%,32%{opacity:0;translate:0 6px}36%,to{opacity:1;translate:0 0}}@keyframes sd-msg-2{0%,5%{opacity:1;translate:0 0}8%,56%{opacity:0;translate:0 6px}60%,to{opacity:1;translate:0 0}}@keyframes sd-open{0%,6%{opacity:0}8%,53%{opacity:1}55%,to{opacity:0}}@keyframes sd-done{0%,6%{opacity:1;scale:1}8%,53%{opacity:0;scale:.8}56%,to{opacity:1;scale:1}}@keyframes sd-ticket{0%,53%{box-shadow:0 14px 28px -18px #000000e6,0 0 #26d96800}56%{box-shadow:0 14px 28px -18px #000000e6,0 0 0 4px #26d96873}66%,to{box-shadow:0 14px 28px -18px #000000e6,0 0 0 10px #26d96800}}.sf{--cycle: 4s;--lus: 12s;position:relative;margin:0;container:sf / inline-size}.sf__card{position:relative;display:grid;gap:0;overflow:hidden;border-radius:1.5rem;border:1px solid hsl(0 0% 100% / .12);background:radial-gradient(120% 140% at 0% 0%,hsl(221 83% 40% / .28),transparent 55%),linear-gradient(160deg,#0b203c,#071427);padding:1rem;color:#fff;box-shadow:0 40px 80px -50px #000000e6}@container sf (min-width: 640px){.sf__card{grid-template-columns:minmax(0,1.2fr) minmax(3.5rem,.5fr) minmax(0,1fr) minmax(3.5rem,.5fr) minmax(0,1fr);align-items:stretch;padding:1.25rem}}.sf__stage{display:grid;align-content:start;gap:.75rem;min-width:0;border-radius:1.1rem;border:1px solid hsl(0 0% 100% / .1);background:#ffffff0d;padding:.9rem}.sf__head{display:flex;align-items:center;gap:.65rem}.sf__icon{display:grid;width:2.25rem;height:2.25rem;flex:none;place-items:center;border-radius:.75rem;background:linear-gradient(135deg,#1d4ed8,#06b6d4);color:#fff}.sf__icon .brand-icon{--ic-acc: #fff}.sf__icon--done{background:#22c55e;color:#08172b}.sf__titles{display:grid;min-width:0;line-height:1.15}.sf__titles small{font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#39dcf9}.sf__titles b{font-size:1rem;font-weight:800;letter-spacing:-.01em}.sf__sub{margin:0;font-size:.8125rem;font-weight:600;line-height:1.35;color:#e1e7efd1}.sf__chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}.sf__chip{display:inline-flex;align-items:center;gap:.35rem;border-radius:9999px;border:1px solid hsl(0 0% 100% / .14);background:#ffffff0f;padding:.25rem .6rem;font-size:.75rem;font-weight:700;line-height:1.2;color:#e1e7efe6}.sf__chip .brand-icon{--ic-acc: #22d3ee}.sf__link{position:relative;display:grid;place-items:center;height:3rem}.sf__chevs{display:flex;flex-direction:column;align-items:center;gap:.05rem}.sf__chev{--nudge: 0 3px;width:.8rem;height:.8rem;flex:none;rotate:90deg;color:#3b82f6;--ic-acc: #22d3ee;stroke-width:2.5}.sf__chevs .sf__chev:nth-child(n+4){display:none}.sf__run{position:absolute;inset:0;pointer-events:none;opacity:0}.sf__token{position:absolute;top:0;left:50%;display:grid;width:1.75rem;height:1.75rem;place-items:center;translate:-50% -50%;border-radius:.55rem;background:#fff;color:#1d4ed8;box-shadow:0 0 0 3px #20d8f859,0 8px 18px -8px #000c}@container sf (min-width: 640px){.sf__link{height:auto}.sf__chevs{flex-direction:row;gap:.1rem}.sf__chev{--nudge: 3px 0;rotate:none}.sf__chevs .sf__chev:nth-child(n+4){display:block}.sf__token{top:50%;left:0}}@media(prefers-reduced-motion:no-preference){html[data-motion=on] .sf__chev{opacity:.4;animation:sf-chev var(--cycle) ease-out infinite;animation-delay:calc(var(--j) * .24s)}html[data-motion=on] .sf__link--1 .sf__chev{animation-delay:calc(1.52s + var(--j) * .24s)}html[data-motion=on] .sf__run{animation:sf-run-y var(--cycle) ease-in-out infinite}html[data-motion=on] .sf__link--1 .sf__run{animation-delay:1.52s}html[data-motion=on] .sf__icon--mid{animation:sf-mid var(--cycle) ease-out infinite}html[data-motion=on] .sf__icon--done{animation:sf-done var(--cycle) ease-out infinite}html[data-motion=on] .sf__chip--0,html[data-motion=on] .sf__chip--1,html[data-motion=on] .sf__chip--2{animation:sf-chip var(--lus) ease-out infinite}html[data-motion=on] .sf__chip--1{animation-delay:4s}html[data-motion=on] .sf__chip--2{animation-delay:8s}html[data-motion=on] .sf__out--0{animation:sf-out-0 var(--lus) ease-out infinite}html[data-motion=on] .sf__out--1{animation:sf-out-1 var(--lus) ease-out infinite}@container sf (min-width: 640px){html[data-motion=on] .sf__run{animation-name:sf-run-x}}}@keyframes sf-run-x{0%,10%{opacity:0;transform:translate(0)}13%,37%{opacity:1}40%,to{opacity:0;transform:translate(100%)}}@keyframes sf-run-y{0%,10%{opacity:0;transform:translateY(0)}13%,37%{opacity:1}40%,to{opacity:0;transform:translateY(100%)}}@keyframes sf-chev{0%,8%{opacity:.4;translate:0 0}14%{opacity:1;translate:var(--nudge)}24%,to{opacity:.4;translate:0 0}}@keyframes sf-mid{0%,39%{scale:1;box-shadow:0 0 #20d8f800}43%{scale:1.1;box-shadow:0 0 0 4px #20d8f873}56%,to{scale:1;box-shadow:0 0 0 12px #20d8f800}}@keyframes sf-done{0%,77%{scale:1;box-shadow:0 0 #26d96800}81%{scale:1.14;box-shadow:0 0 0 4px #26d96873}94%,to{scale:1;box-shadow:0 0 0 12px #26d96800}}@keyframes sf-chip{0%,to{border-color:#ffffff24;background:#ffffff0f;color:#e1e7efe6}2%,10%{border-color:#20d8f8cc;background:#20d8f82e;color:#fff}14%{border-color:#ffffff24;background:#ffffff0f;color:#e1e7efe6}}@keyframes sf-out-0{0%,25%,34%,58%,67%,to{border-color:#ffffff24;background:#ffffff0f;color:#e1e7efe6}27%,31%,60%,64%{border-color:#26d968cc;background:#22c35d33;color:#fff}}@keyframes sf-out-1{0%,91%{border-color:#ffffff24;background:#ffffff0f;color:#e1e7efe6}93%,97%{border-color:#26d968cc;background:#22c35d33;color:#fff}to{border-color:#ffffff24;background:#ffffff0f;color:#e1e7efe6}}