@property --ba{syntax:'<angle>';inherits:false;initial-value:40deg}
.bolts{--ba:40deg;background:linear-gradient(var(--ba),transparent 38%,#454C53 38% 62%,transparent 62%) left 10.5px top 10.5px/5px 5px no-repeat,linear-gradient(var(--ba),transparent 38%,#454C53 38% 62%,transparent 62%) right 10.5px top 10.5px/5px 5px no-repeat,linear-gradient(var(--ba),transparent 38%,#454C53 38% 62%,transparent 62%) left 10.5px bottom 10.5px/5px 5px no-repeat,linear-gradient(var(--ba),transparent 38%,#454C53 38% 62%,transparent 62%) right 10.5px bottom 10.5px/5px 5px no-repeat,radial-gradient(circle at 13px 13px,#A9AFB5 0 2.5px,#5E656C 3px,transparent 4px),radial-gradient(circle at calc(100% - 13px) 13px,#A9AFB5 0 2.5px,#5E656C 3px,transparent 4px),radial-gradient(circle at 13px calc(100% - 13px),#A9AFB5 0 2.5px,#5E656C 3px,transparent 4px),radial-gradient(circle at calc(100% - 13px) calc(100% - 13px),#A9AFB5 0 2.5px,#5E656C 3px,transparent 4px)}
.flow{background:linear-gradient(90deg,#1D4F94 0 38%,#6FB2FF 50%,#1D4F94 62% 100%) 100% 0/300% 100% no-repeat #1D4F94;-webkit-mask:linear-gradient(90deg,#000 0 9px,transparent 9px) 0 0/14px 100% repeat-x;mask:linear-gradient(90deg,#000 0 9px,transparent 9px) 0 0/14px 100% repeat-x}
.sh{position:relative;overflow:hidden}
.sh::after{content:"";position:absolute;inset:-2px;pointer-events:none;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.12) 42%,rgba(255,255,255,.7) 49%,rgba(190,210,235,.35) 53%,transparent 64%);transform:translateX(-130%)}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes bolt{0%{--ba:-50deg}100%{--ba:40deg}}
@keyframes flowp{0%{background-position:100% 0}32%{background-position:0 0}100%{background-position:0 0}}
@keyframes dashm{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:14px 0;mask-position:14px 0}}
@keyframes medal{0%{opacity:0;translate:0 16px}55%{opacity:1;translate:0 -4px}78%{translate:0 1px}100%{opacity:1;translate:0 0}}
@keyframes shake{0%{opacity:0;translate:0 0}18%{opacity:1;translate:0 0}32%{translate:0 -4px}46%{translate:0 2px}60%{translate:0 -3px}76%{translate:0 1px}100%{opacity:1;translate:0 0}}
@keyframes swing{0%{opacity:0;rotate:-14deg}30%{opacity:1;rotate:10deg}55%{rotate:-5deg}76%{rotate:2deg}100%{opacity:1;rotate:0deg}}
@keyframes drive{0%{opacity:0;translate:-14px 0}58%{opacity:1;translate:3px 0}80%{translate:-1px 0}100%{opacity:1;translate:0 0}}
@keyframes medalR{0%{translate:0 12px}55%{translate:0 -4px}78%{translate:0 1px}100%{translate:0 0}}
@keyframes shakeR{0%,100%{translate:0 0}20%{translate:0 -4px}40%{translate:0 2px}60%{translate:0 -3px}80%{translate:0 1px}}
@keyframes swingR{0%{rotate:-12deg}30%{rotate:10deg}55%{rotate:-5deg}76%{rotate:2deg}100%{rotate:0deg}}
@keyframes driveR{0%{translate:-12px 0}58%{translate:3px 0}80%{translate:-1px 0}100%{translate:0 0}}
@media (prefers-reduced-motion:no-preference){
.anim .draw:not(.in) :is(path:not([stroke-dasharray]),circle,rect){stroke-dasharray:1 1;stroke-dashoffset:1}
.anim .draw.in :is(path:not([stroke-dasharray]),circle,rect){stroke-dasharray:1 1;animation:draw .5s cubic-bezier(.4,0,.2,1) both}
.anim .draw.in :is(circle,rect){animation-delay:.2s}
.anim .draw:not(.in) text,.anim .draw:not(.in) path[stroke-dasharray]{opacity:0}
.anim .draw.in text,.anim .draw.in path[stroke-dasharray]{animation:fadein .3s .4s both}
.anim .bolts[data-a]:not(.in){--ba:-50deg}
.anim .bolts.in{animation:bolt .45s .15s cubic-bezier(.3,.7,.3,1) both}
.anim .in .flow{animation:flowp 2.4s linear infinite,dashm .7s linear infinite}
.anim .in .flow.f1{animation-delay:.28s,0s}.anim .in .flow.f2{animation-delay:.56s,0s}.anim .in .flow.f3{animation-delay:.84s,0s}.anim .in .flow.f4{animation-delay:1.12s,0s}.anim .in .flow.f5{animation-delay:1.4s,0s}.anim .in .flow.f6{animation-delay:1.68s,0s}
.anim [data-a]:not(.in) .ic{opacity:0}
.anim .in .ic1{animation:medal .7s .1s cubic-bezier(.3,.7,.3,1) both}
.anim .in .ic2{animation:shake .8s .25s ease-in-out both}
.anim .in .ic3{transform-origin:50% 0;animation:swing .9s .4s ease-in-out both}
.anim .in .ic4{animation:drive .7s .55s cubic-bezier(.3,.7,.3,1) both}
.anim .in .hx.go .ic1{animation:medalR .7s cubic-bezier(.3,.7,.3,1) both}
.anim .in .hx.go .ic2{animation:shakeR .8s ease-in-out both}
.anim .in .hx.go .ic3{animation:swingR .9s ease-in-out both}
.anim .in .hx.go .ic4{animation:driveR .7s cubic-bezier(.3,.7,.3,1) both}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.m-sol img,.pimg img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.m-sol:hover img,.pimg:hover img{transform:scale(1.06)}
.sh:hover::after,.sh:focus-visible::after{transform:translateX(130%);transition:transform .7s ease}
}