@layer theme,base;@layer components{.ux-art{background-color:#fff;background-image:linear-gradient(#046af30f 1px,#0000 1px),linear-gradient(90deg,#046af30f 1px,#0000 1px);background-position:0 0;background-repeat:repeat;background-size:24px 24px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;border:1px solid #dfe3ee;border-radius:16px;position:absolute;inset:9% 8% 22%;box-shadow:0 24px 60px #07074d1a}.ux-el{animation-duration:10s;animation-timing-function:var(--ease);border-radius:12px;animation-iteration-count:infinite;position:absolute}.ux-head{background:#07074d;width:60%;height:26px;animation-name:uxA;top:8%;left:6%}.ux-img{background:#7aaeff;width:42%;height:42%;animation-name:uxB;top:24%;left:6%}.ux-txt{box-sizing:border-box;background:#e6f0ff;flex-direction:column;gap:6px;width:40%;height:42%;padding:10px;animation-name:uxC;display:flex;top:24%;left:54%}.ux-txt i{background:#c9dcff;border-radius:4px;height:7px}.ux-btn{background:#046af3;width:26%;height:30px;animation-name:uxD;top:74%;left:54%}@keyframes uxA{0%,8%{transform:translate(18px,14px)rotate(-4deg)}30%,86%{transform:none}96%,to{transform:translate(18px,14px)rotate(-4deg)}}@keyframes uxB{0%,8%{transform:translate(-14px,22px)rotate(5deg)scale(.9)}34%,86%{transform:none}96%,to{transform:translate(-14px,22px)rotate(5deg)scale(.9)}}@keyframes uxC{0%,8%{transform:translate(24px,-12px)rotate(3deg)}38%,86%{transform:none}96%,to{transform:translate(24px,-12px)rotate(3deg)}}@keyframes uxD{0%,8%{background:#8a90ad;transform:translate(-40px,10px)rotate(-6deg)}42%,86%{background:#046af3;transform:none}96%,to{background:#8a90ad;transform:translate(-40px,10px)rotate(-6deg)}}.ux-guide{opacity:0;border-left:1.5px dashed #046af3;width:0;animation:10s infinite uxGuide;position:absolute;top:0;bottom:0;left:54%}@keyframes uxGuide{0%,30%{opacity:0}36%,48%{opacity:1}56%,to{opacity:0}}.ux-cursor{z-index:5;color:#07074d;width:22px;height:22px;animation:uxCur 10s var(--ease) infinite;position:absolute}@keyframes uxCur{0%{top:80%;left:80%}15%{top:22%;left:36%}28%{top:46%;left:30%}40%{top:46%;left:72%}52%{top:86%;left:64%}70%,to{top:80%;left:80%}}.ux-sw{box-shadow:var(--shadow-sm);background:#fff;border:1px solid #dfe3ee;border-radius:14px;gap:8px;padding:8px 10px;display:flex;position:absolute;bottom:58px;left:50%;transform:translate(-50%)}.ux-sw i{width:22px;height:22px;animation:uxPop 10s var(--ease) infinite;border-radius:999px}.ux-sw i:nth-child(2){animation-delay:.15s}.ux-sw i:nth-child(3){animation-delay:.3s}.ux-sw i:nth-child(4){animation-delay:.45s}@keyframes uxPop{0%,44%{transform:scale(1)}50%{transform:scale(1.25)}58%,to{transform:scale(1)}}}@layer utilities;