#topbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--blue);z-index:200;opacity:0;pointer-events:none}
#topbar.on{opacity:1;width:85%;transition:width 6s cubic-bezier(.1,.7,.2,1)}
#topbar.done{opacity:0;width:100%;transition:width .2s,opacity .4s .2s}
#fx{position:fixed;inset:0;pointer-events:none;z-index:150;width:100%;height:100%}
button,a.btn{position:relative;overflow:hidden}
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:.25;transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
@keyframes inR{from{opacity:0;transform:translateX(36px)}}
@keyframes inL{from{opacity:0;transform:translateX(-36px)}}
#app.r{animation:inR .38s cubic-bezier(.2,.8,.2,1)}#app.l{animation:inL .38s cubic-bezier(.2,.8,.2,1)}
.still .card,.still .stats div,.still .up,.still main,.still .hero,.still .hero h1{animation:none!important}
@keyframes bye{to{opacity:0;transform:translateX(50px) scale(.96);max-height:0;padding:0;margin:0;border-width:0}}
.bye{animation:bye .3s ease-in forwards!important;overflow:hidden}
.sk{height:96px;border-radius:14px;margin-bottom:14px;background:linear-gradient(90deg,var(--card) 25%,var(--line) 50%,var(--card) 75%);background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
header{transition:box-shadow .2s}header.scrolled{box-shadow:0 6px 20px rgba(20,30,70,.12)}
input,select,textarea{transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(45,86,240,.18)}
.hero:before{translate:calc(var(--px,0)*-26px) calc(var(--py,0)*-16px);transition:translate .4s ease-out}
.hero:after{translate:calc(var(--px,0)*30px) calc(var(--py,0)*18px);transition:translate .5s ease-out}
.hero h1{animation:up .6s .1s both}
@keyframes shk{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.shake{animation:shk .45s}
.btnload{pointer-events:none;opacity:.85}
.btnload:after{content:"";display:inline-block;width:14px;height:14px;margin-left:8px;border:2px solid #fff6;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(1turn)}}
.empty{animation:flt 3s ease-in-out infinite}@keyframes flt{50%{transform:translateY(-4px)}}
.post.materi:hover,.post:hover{border-color:var(--blue)}
#toast{transition:opacity .25s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.primary:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%)}
.primary:hover:before{transform:translateX(120%);transition:transform .7s}
@keyframes newin{0%{opacity:0;transform:translateY(-24px) scale(.95);box-shadow:0 0 0 0 var(--blue)}60%{box-shadow:0 0 0 8px transparent}100%{opacity:1;transform:none}}
.newin{animation:newin .8s cubic-bezier(.2,1.2,.4,1)!important}
dialog::backdrop{backdrop-filter:blur(4px);animation:fade .25s}