@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
#kl{position:fixed;inset:0;z-index:100;background:#fff;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}
#kl.on{opacity:1;visibility:visible;transition:opacity .16s ease}
#kl .box{display:flex;flex-direction:column;align-items:center;gap:22px}
#kl .klbar{width:120px;height:2px;background:#ececea;border-radius:2px;overflow:hidden}
#kl .klbar i{display:block;height:100%;width:0;background:#1f3a2a}
#kl.on .klbar i{animation:kl-bar .6s cubic-bezier(.3,.7,.4,1) forwards}
.km{width:96px;height:96px;display:block}
.km .gt{stroke-dasharray:440;stroke-dashoffset:440}
.km .bk{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.km .st{opacity:0;transform:translateY(-120px)}
.km .ey{transform-box:fill-box;transform-origin:50% 50%}
.play .gt{animation:kl-gt .3s .04s cubic-bezier(.5,0,.3,1) forwards}
.play .bk{animation:kl-bk .14s .3s ease-out forwards}
.play .st{animation:kl-st .26s .38s cubic-bezier(.3,1.4,.5,1) forwards}
.play .ey{animation:kl-ey 1.4s .9s infinite}
.km.loop .gt{animation:kl-gt .7s .3s cubic-bezier(.5,0,.3,1) forwards}
.km.loop .bk{animation:kl-bk .35s 1s ease-out forwards}
.km.loop .st{animation:kl-st .6s 1.4s cubic-bezier(.3,1.3,.5,1) forwards}
.km.loop .ey{animation:kl-ey 2.4s 2.4s infinite}
@keyframes kl-gt{to{stroke-dashoffset:0}}
@keyframes kl-bk{to{transform:scaleY(1)}}
@keyframes kl-st{0%{opacity:0;transform:translateY(-120px)}30%{opacity:1}100%{opacity:1;transform:none}}
@keyframes kl-ey{0%,88%,100%{transform:scaleY(1)}93%{transform:scaleY(.1)}}
@keyframes kl-bar{to{width:92%}}
@media (prefers-reduced-motion:reduce){.km .gt{stroke-dashoffset:0}.km .bk{transform:none}.km .st{opacity:1;transform:none}.km *{animation:none!important}}