@keyframes up{from{opacity:0;transform:translateY(14px)}}
@keyframes fade{from{opacity:0}}
@keyframes drift{to{transform:translate(40px,30px) scale(1.15)}}
@keyframes pop{from{opacity:0;transform:scale(.95) translateY(10px)}}
@keyframes pulse{50%{opacity:.6}}
main,.hero{animation:fade .35s}
.card,.stats div,.up{animation:up .5s both;animation-delay:calc(var(--i,0)*55ms)}
.hero{position:relative;overflow:hidden}.hero>*{position:relative}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;background:hsl(var(--h,225) 80% 62%/.25);animation:drift 12s ease-in-out infinite alternate}
.hero:before{width:260px;height:260px;right:-60px;top:-120px}
.hero:after{width:180px;height:180px;left:35%;bottom:-110px;animation-duration:16s}
.post,.cls{transition:transform .2s,box-shadow .2s}
.post:hover,.cls:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,30,70,.16)}
button,a.btn{transition:transform .12s,background .2s,box-shadow .2s}
button:active,a.btn:active{transform:scale(.96)}
.primary:hover{box-shadow:0 6px 16px rgba(45,86,240,.4)}
.chip.soon{animation:pulse 1.8s infinite}
dialog[open]{animation:pop .25s}
.prog{margin-top:14px;max-width:340px;font-size:13px}.prog div{height:8px;border-radius:9px;background:rgba(255,255,255,.2);margin-top:5px;overflow:hidden}.prog i{display:block;height:100%;background:#7dffc4;border-radius:9px;transition:width .9s}
.cls em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;background:var(--bg);padding:2px 9px;border-radius:99px;white-space:nowrap}
.mini{display:block;width:100%;text-align:left}.mini strong{display:block;margin-top:4px}.mini small{color:var(--mute)}
button.up{width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:8px 0}
button.up small{color:var(--mute)}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}