.uk-w{display:flex;align-items:center;justify-content:center;gap:10px;font:600 11px/1.25 inherit;color:#0F172A}
.uk-w *{box-sizing:border-box}
.uk-w small{display:block;color:#64748B;font-size:10.5px;font-weight:600}
.uk-t{position:relative;background:#fff;box-shadow:0 0 0 1px #E7E2D8,0 4px 12px rgba(15,23,42,.06);border-radius:10px;padding:8px 11px}
.uk-ch{display:inline-block;border-radius:999px;padding:2px 8px;font-size:10.5px;background:#DCFCE7;color:#166534;white-space:nowrap}
.uk-am{background:#FEF3C7;color:#92400E}.uk-rd{background:#FEE2E2;color:#991B1B}.uk-bl{background:var(--sx-t);color:var(--sx-a)}.uk-gr{background:#DCFCE7;color:#166534}.uk-pu{background:#F1EEFF;color:#5B21B6}
/* 1 sonar + packet */
.uk-rec{position:relative}
.uk-ring{position:absolute;inset:0;border-radius:10px;box-shadow:0 0 0 1.5px var(--sx-a2);opacity:0;animation:ukk-sonar 3.2s ease-out infinite}
.uk-r2{animation-delay:.7s}
.uk-lane{position:relative;width:64px;height:2px;background:repeating-linear-gradient(90deg,var(--sx-a2) 0 5px,transparent 5px 9px);animation:ukk-march .8s linear infinite}
.uk-pk{position:absolute;left:0;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--sx-a);box-shadow:0 0 0 4px rgba(29,78,216,.15);animation:ukk-pk 3.2s cubic-bezier(.5,0,.3,1) infinite}
.uk-prt{animation:ukk-land 3.2s ease infinite}
.uk-bd{position:absolute;right:-8px;top:-10px;animation:ukk-pop 3.2s ease infinite both}
@keyframes ukk-sonar{0%{transform:scale(1);opacity:.9}60%,100%{transform:scale(1.5,1.75);opacity:0}}
@keyframes ukk-march{to{background-position:9px 0}}
@keyframes ukk-pk{0%{transform:translateX(-4px) scale(.4);opacity:0}10%{opacity:1;transform:translateX(0) scale(1)}58%{transform:translateX(58px) scale(1);opacity:1}66%,100%{transform:translateX(64px) scale(.3);opacity:0}}
@keyframes ukk-land{0%,56%{transform:none}62%{transform:scale(1.06)}72%,100%{transform:none}}
@keyframes ukk-pop{0%,58%{transform:scale(0);opacity:0}66%{transform:scale(1.25);opacity:1}72%,90%{transform:scale(1);opacity:1}98%,100%{transform:scale(.8);opacity:0}}
/* 2 source morph + typewriter */
.uk-inb{width:236px;display:grid;gap:7px}
.uk-hd{display:flex;justify-content:space-between;align-items:center}
.uk-srcs{display:grid;height:20px;width:84px}
.uk-srcs b{grid-area:1/1;justify-self:start;opacity:0;animation:ukk-src 6s ease-in-out infinite both}
.uk-srcs b:nth-child(2){animation-delay:2s}.uk-srcs b:nth-child(3){animation-delay:4s}
.uk-bub{background:#fff;box-shadow:0 0 0 1px #E7E2D8;border-radius:11px 11px 11px 3px;padding:7px 10px;width:max-content;animation:ukk-bub 2s ease infinite both}
.uk-out{justify-self:end;background:var(--sx-a);color:#fff;box-shadow:none;border-radius:11px 11px 3px 11px;animation:ukk-rep 2s ease infinite both}
.uk-ty{display:block;animation:ukk-type 2s steps(16,end) infinite both}
@keyframes ukk-src{0%{opacity:0;transform:translateY(7px)}5%,30%{opacity:1;transform:none}35%,100%{opacity:0;transform:translateY(-7px)}}
@keyframes ukk-bub{0%{opacity:0;transform:translateY(6px)}10%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ukk-rep{0%,28%{opacity:0;transform:translateY(5px)}34%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ukk-type{0%,32%{clip-path:inset(0 100% 0 0)}80%,100%{clip-path:inset(0 0 0 0)}}
/* 3 now line */
.uk-dy{display:grid;gap:6px;justify-items:center}
.uk-seg{position:relative;display:grid;grid-template-columns:repeat(4,1fr);width:208px;background:#fff;border-radius:8px;box-shadow:0 0 0 1px #E7E2D8;text-align:center;font-size:10.5px;color:#64748B}
.uk-seg span{position:relative;padding:3px 0}
.uk-th{position:absolute;left:0;top:0;bottom:0;width:25%;border-radius:8px;background:var(--sx-t);box-shadow:0 0 0 1px var(--sx-a2);animation:ukk-seg 7s ease-in-out infinite}
.uk-tl{position:relative;width:260px;height:88px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #E7E2D8;overflow:hidden;background-image:repeating-linear-gradient(90deg,transparent 0 64px,#EFEBE2 64px 65px)}
.uk-hr{position:absolute;top:4px;font-size:10px;color:#64748B}
.uk-ev{position:absolute;height:26px;border-radius:7px;background:var(--sx-t);color:var(--sx-a);padding:6px 7px;font-size:10.5px}
.uk-lit{position:absolute;inset:0;border-radius:7px;background:var(--sx-a);color:#fff;padding:6px 7px;font-style:normal;opacity:0;white-space:nowrap}
.uk-l1{animation:ukk-l1 6s infinite both}.uk-l2{animation:ukk-l2 6s infinite both}.uk-l3{animation:ukk-l3 6s infinite both}
.uk-now{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--sx-b);animation:ukk-now 6s linear infinite both}
.uk-now:before{content:"";position:absolute;top:0;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--sx-b)}
@keyframes ukk-now{0%{transform:translateX(0);opacity:0}4%{transform:translateX(0);opacity:1}88%{transform:translateX(258px);opacity:1}94%,100%{transform:translateX(258px);opacity:0}}
@keyframes ukk-l1{0%,5%{opacity:0;transform:scale(.95)}9%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes ukk-l2{0%,32%{opacity:0;transform:scale(.95)}36%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes ukk-l3{0%,55%{opacity:0;transform:scale(.95)}59%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes ukk-seg{0%,20%{transform:none}25%,45%{transform:translateX(100%)}50%,70%{transform:translateX(200%)}75%,95%{transform:translateX(300%)}100%{transform:none}}
/* 4 flip cards */
.uk-fl{display:grid;gap:8px;justify-items:center}
.uk-st{position:relative;width:176px;height:88px;perspective:600px}
.uk-fc{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;padding:9px 13px;background:#fff;border-radius:12px;box-shadow:0 0 0 1px #E7E2D8,0 6px 16px rgba(15,23,42,.07);opacity:0;animation:ukk-flip 6.4s cubic-bezier(.4,0,.2,1) infinite both}
.uk-fc small{font-size:10.5px}.uk-fc b{font-size:12.5px}.uk-big{font-size:20px!important;color:var(--sx-a)}
.uk-sg{stroke-dasharray:100;stroke-dashoffset:100;animation:ukk-sig 6.4s ease infinite both}
.uk-dts{display:flex;gap:6px}
.uk-dt{width:6px;height:6px;border-radius:50%;background:var(--sx-a);opacity:.25;animation:ukk-dot 6.4s ease infinite both}
@keyframes ukk-flip{0%{transform:rotateY(90deg);opacity:0}4%,21%{transform:none;opacity:1}25%,100%{transform:rotateY(-90deg);opacity:0}}
@keyframes ukk-sig{0%,6%{stroke-dashoffset:100}17%,100%{stroke-dashoffset:0}}
@keyframes ukk-dot{0%{opacity:.25;transform:scale(1)}4%,21%{opacity:1;transform:scale(1.35)}25%,100%{opacity:.25;transform:scale(1)}}
/* 5 odometer + stamp */
.uk-doc{position:relative;width:156px;display:grid;gap:6px;padding:10px 12px;background:#fff;border-radius:12px;box-shadow:0 0 0 1px #E7E2D8,0 6px 16px rgba(15,23,42,.07)}
.uk-dh{display:flex;justify-content:space-between;align-items:baseline}.uk-dh b{font-size:12px}
.uk-sk{height:5px;border-radius:3px;background:#EFEBE2}
.uk-od{display:flex;align-items:center;height:24px;font-size:22px;font-weight:700;color:var(--sx-a);animation:ukk-fig 5.2s ease infinite both}
.uk-pd{line-height:24px}
.uk-co{display:block;height:24px;width:14px;overflow:hidden}
.uk-co i{display:block;font-style:normal;white-space:pre;line-height:24px;animation:ukk-roll 5.2s cubic-bezier(.2,.8,.2,1) infinite both}
.uk-sp{position:absolute;right:-8px;bottom:6px;border:2px solid #166534;color:#166534;background:rgba(220,252,231,.92);border-radius:6px;padding:1px 7px;font-size:10.5px;letter-spacing:.06em;animation:ukk-stamp 5.2s ease infinite both}
.uk-own{display:grid;gap:6px;justify-items:start}
.uk-vw{animation:ukk-vw 5.2s ease infinite both}
@keyframes ukk-roll{0%,6%{transform:translateY(0)}34%,100%{transform:translateY(var(--to))}}
@keyframes ukk-fig{0%{opacity:0}5%,90%{opacity:1}98%,100%{opacity:0}}
@keyframes ukk-stamp{0%,36%{opacity:0;transform:rotate(-10deg) scale(2.3)}42%{opacity:1;transform:rotate(-10deg) scale(.9)}46%{transform:rotate(-10deg) scale(1.08)}50%,90%{opacity:1;transform:rotate(-10deg) scale(1)}97%,100%{opacity:0;transform:rotate(-10deg) scale(1)}}
@keyframes ukk-vw{0%,48%{opacity:0;transform:scale(.6)}54%{opacity:1;transform:scale(1.1)}58%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
/* 6 peeling stack */
.uk-pl{display:grid;gap:10px;justify-items:center}
.uk-stk{position:relative;width:176px;height:74px}
.uk-pc{position:absolute;left:0;right:0;top:0;height:54px;display:flex;align-items:center;gap:10px;padding:0 12px;background:#fff;border-radius:11px;box-shadow:0 0 0 1px #E7E2D8,0 4px 12px rgba(15,23,42,.07);transform-origin:50% 100%;z-index:3;animation:ukk-peel 4.8s cubic-bezier(.5,0,.2,1) infinite both}
.uk-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;font-style:normal;font-size:13px;font-weight:700;flex:none}
.uk-row{display:flex;gap:6px}
@keyframes ukk-peel{0%,26%{z-index:3;opacity:1;transform:none}34%{z-index:3;opacity:0;transform:translate(84px,-8px) rotate(10deg)}34.1%{z-index:1;opacity:0;transform:translateY(20px) scale(.84)}40%,58%{z-index:1;opacity:1;transform:translateY(20px) scale(.84)}66%,98%{z-index:2;opacity:1;transform:translateY(10px) scale(.92)}100%{z-index:3;opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
.uk-ring,.uk-lane,.uk-pk,.uk-prt,.uk-bd,.uk-srcs b,.uk-bub,.uk-out,.uk-ty,.uk-th,.uk-l1,.uk-l2,.uk-l3,.uk-now,.uk-fc,.uk-sg,.uk-dt,.uk-od,.uk-co i,.uk-sp,.uk-vw,.uk-pc{animation:none}
.uk-ring{opacity:0}.uk-pk{transform:translateX(30px)}
.uk-srcs b:first-child{opacity:1}
.uk-now{transform:translateX(130px)}.uk-l1{opacity:1}
.uk-fc:first-child{opacity:1}.uk-sg{stroke-dashoffset:0}.uk-dt:first-child{opacity:1}
.uk-co i{transform:translateY(var(--to))}.uk-sp{transform:rotate(-10deg)}
.uk-pc:nth-child(2){transform:translateY(10px) scale(.92);z-index:2}.uk-pc:nth-child(3){transform:translateY(20px) scale(.84);z-index:1}
}