.ai-orb{--k:1;--orb-blur:calc(16px*var(--k));--orb-blur-spec:calc(14px*var(--k));--orb-grain:calc(160px*var(--k));position:relative;display:block;border-radius:9999px;overflow:hidden;flex:none;clip-path:circle(50% at 50% 50%);isolation:isolate;background:radial-gradient(130% 130% at 30% 25%,#b5e9fb 0%,#6cc0ef 40%,#2f8fd8 100%);box-shadow:0 calc(24px*var(--k)) calc(48px*var(--k)) calc(-20px*var(--k)) rgba(52,124,175,.55),inset 0 0 calc(30px*var(--k)) rgba(255,255,255,.3);filter:saturate(1.18)}
.ai-orb i{position:absolute;inset:0;will-change:transform;display:block}
.ai-orb .spin{animation:orbrot 11s linear infinite}
.ai-orb .counter{animation:orbrot 15s linear infinite reverse}
.ai-orb b{position:absolute;display:block;border-radius:9999px;filter:blur(var(--orb-blur));will-change:transform}
.ai-orb .green{width:92%;height:92%;left:-30%;top:-30%;background:radial-gradient(closest-side,#6fae3e 0%,rgba(111,174,62,.6) 55%,transparent 76%);animation:orbbr 6s ease-in-out infinite alternate}
.ai-orb .blue{width:100%;height:100%;right:-34%;bottom:-34%;background:radial-gradient(closest-side,#1f7fd0 0%,rgba(31,127,208,.55) 55%,transparent 76%);animation:orbbr 7.5s ease-in-out infinite alternate-reverse}
.ai-orb .spec{width:64%;height:64%;left:6%;top:2%;filter:blur(var(--orb-blur-spec));mix-blend-mode:screen;background:radial-gradient(closest-side,rgba(240,255,255,.95) 0%,rgba(190,242,255,.5) 45%,transparent 72%);animation:orbbr 5s ease-in-out infinite alternate}
.ai-orb .rim{mix-blend-mode:screen;border-radius:9999px;background:radial-gradient(90% 90% at 50% 108%,rgba(170,240,255,.85) 0%,rgba(170,240,255,.25) 32%,transparent 55%)}
.ai-orb .gloss{mix-blend-mode:screen;border-radius:9999px;background:radial-gradient(70% 45% at 32% 16%,rgba(255,255,255,.55) 0%,rgba(255,255,255,.14) 45%,transparent 70%)}
.ai-orb .grain{border-radius:9999px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)' opacity='0.55'/></svg>");background-size:var(--orb-grain) var(--orb-grain);opacity:.45;mix-blend-mode:overlay}
@keyframes orbrot{to{transform:rotate(360deg)}}
@keyframes orbbr{0%{transform:translate(0,0) scale(1)}100%{transform:translate(9%,7%) scale(1.22)}}
.orb-xs{width:26px;height:26px;--k:.217}
.orb-sm{width:34px;height:34px;--k:.283}
.orb-lg{width:96px;height:96px;--k:.8}