#bar-0{animation:.35s cubic-bezier(.43,0,.37,1) 0s backwards fadeIn 1}#bar-1{animation:.35s cubic-bezier(.43,0,.37,1) .1s backwards fadeIn 1}#bar-2{animation:.35s cubic-bezier(.43,0,.37,1) .2s backwards fadeIn 1}#bar-3{animation:.35s cubic-bezier(.43,0,.37,1) .3s backwards fadeIn 1}.userCard .profile{display:grid;grid-template-columns:calc(80px * var(--scalar)) 1fr;grid-template-rows:auto auto;grid-template-areas:". filledBar" "img code";gap:calc(9px * var(--scalar))}.userCard .profile .filledBar{grid-area:filledBar;word-break:break-word;padding-right:calc(12px * var(--scalar));padding-left:calc(12px * var(--scalar))}.userCard .profile img{grid-area:img;width:calc(80px * var(--scalar));height:calc(80px * var(--scalar))}.userCard .profile .code{grid-area:code;display:flex;flex-flow:column nowrap;gap:calc(5px * var(--scalar));justify-content:space-between;color:var(--clr-950)}.userCard .profile .code div{display:flex;flex-flow:row wrap;align-items:baseline;justify-content:space-between;gap:calc(12px * var(--scalar))}.userCard .profile .code div p{color:var(--clr-850);font-size:var(--fontSize-md);line-height:1em}.userCard .profile .code div .xx{display:flex;flex-flow:row nowrap;gap:7px;color:var(--clr-accent-1000)}.userCard .profile .code div .xx .x{width:18px}.userCard .bottom{margin-top:calc(12px * var(--scalar));margin-left:calc(80px * var(--scalar) + 9px * var(--scalar))}.userCard .bottom .state{display:grid;grid-template-columns:calc(38px * var(--scalar)) calc(38px * var(--scalar)) calc(38px * var(--scalar)) calc(38px * var(--scalar)) 1fr;gap:2px}.userCard .bottom .state .bar{width:100%;height:4px;border:solid 1px var(--clr-accent-750)}.userCard .bottom .state .bar.filled{border:none;background-color:var(--clr-accent-1000)}.userCard .bottom .button{justify-content:flex-start;width:100%;font-weight:500;padding:calc(12px * var(--scalar)) calc(18px * var(--scalar));border:solid 1px var(--clr-accent-1000);margin-top:calc(9px * var(--scalar))}@media(max-width:431px){.userCard .profile{grid-template-columns:80px 1fr;grid-template-areas:"img filledBar" "code code";gap:6px}.userCard .profile .filledBar{align-self:end}.userCard .profile img{width:80px;height:80px}.userCard .profile .code{gap:12px}.userCard .bottom{margin-top:12px;margin-left:0}}[data-motion=reduced] #bar-0,[data-motion=reduced] #bar-1,[data-motion=reduced] #bar-2,[data-motion=reduced] #bar-3{animation:none}@media(prefers-reduced-motion){#bar-0,#bar-1,#bar-2,#bar-3{animation:none}[data-motion=default] #bar-0{animation:.35s cubic-bezier(.43,0,.37,1) 0s backwards fadeIn 1}[data-motion=default] #bar-1{animation:.35s cubic-bezier(.43,0,.37,1) .1s backwards fadeIn 1}[data-motion=default] #bar-2{animation:.35s cubic-bezier(.43,0,.37,1) .2s backwards fadeIn 1}[data-motion=default] #bar-3{animation:.35s cubic-bezier(.43,0,.37,1) .3s backwards fadeIn 1}}