.avatar{z-index:-1;-webkit-user-select:none;user-select:none;position:relative;transform:translate(0,0)}@media (hover:hover){.styleguide .avatar:hover .avatar--gui-background{transform:translate(-50%,-50%)rotate(360deg)}.avatar:hover .avatar--cli-name{color:#00b9ff}}.size--xs .avatar--gui{width:40px;height:40px}.size--small .avatar--gui{width:70px;height:70px}.size--medium .avatar--gui{width:92px;height:92px}.size--large .avatar--gui{width:140px;height:140px}.size--extraLarge .avatar--gui{width:168px;height:168px}.avatar--gui-progress{transition:calc(var(--transition-duration)*2.5)background cubic-bezier(.25,.61,.355,1);background:conic-gradient(from 180deg at 50% 50%,#7800ff 0%,#00b9ff var(--level-progress),#000 var(--level-progress));--level-progress:100%;border:1px solid #2f2f2f}.avatar--gui-progress.max--level{background:radial-gradient(at 100% 100%,#fedb37 0%,#fdb931 8%,#9f7928 30%,#8a6e2f 40%,#0000 80%),radial-gradient(at 0 0,#fff 0%,#ffffac 8%,#d1b464 25%,#5d4a1f 62.5%,#5d4a1f 100%)}.no--frame .avatar--gui-progress{border-color:#7c7c7c}.avatar--gui-progress,.avatar--gui-progress-shimmer{z-index:0;border-radius:50%}.size--xs .avatar--gui-progress,.size--xs .avatar--gui-progress-shimmer,.size--small .avatar--gui-progress,.size--small .avatar--gui-progress-shimmer{top:0;bottom:0;left:0;right:0}.size--medium .avatar--gui-progress,.size--medium .avatar--gui-progress-shimmer{top:2px;bottom:2px;left:2px;right:2px}.size--large .avatar--gui-progress,.size--large .avatar--gui-progress-shimmer{top:8px;bottom:8px;left:8px;right:8px}.size--extraLarge .avatar--gui-progress,.size--extraLarge .avatar--gui-progress-shimmer{top:10px;bottom:10px;left:10px;right:10px}.avatar--gui-progress-shimmer{transition:calc(var(--transition-duration)*2.5)background cubic-bezier(.25,.61,.355,1);background:conic-gradient(from 180deg at 50% 50%,transparent var(--shimmer-delta),#fff var(--level-progress),#fff var(--shimmer-start),transparent var(--shimmer-end));--level-progress:100%;--shimmer-delta:99%;--shimmer-start:99%;--shimmer-end:100%}.avatar--gui-background{transition:calc(var(--transition-duration)*3)transform cubic-bezier(.25,.61,.355,1);z-index:10;background:#000;border:1px solid #2f2f2f;border-radius:50%;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.size--xs .avatar--gui-background{width:28px;height:28px}.size--small .avatar--gui-background{width:54px;height:54px}.size--medium .avatar--gui-background{width:70px;height:70px}.size--large .avatar--gui-background{width:100px;height:100px}.size--extraLarge .avatar--gui-background{width:120px;height:120px}.no--frame .avatar--gui-background{border-color:#7c7c7c}.avatar--gui-background img{object-fit:cover;width:100%;height:100%}.avatar--gui-image{z-index:20;border-radius:50%;top:50%;left:50%;overflow:hidden;transform:translate3d(-50%,-50%,1px)}.size--xs .avatar--gui-image{width:28px;height:28px}.size--small .avatar--gui-image{width:54px;height:54px}.size--medium .avatar--gui-image{width:70px;height:70px}.size--large .avatar--gui-image{width:100px;height:100px}.size--extraLarge .avatar--gui-image{width:120px;height:120px}.avatar--gui-image img{object-fit:contain;width:100%;height:100%}.avatar--gui-frame{z-index:50;top:-10px;bottom:-10px;left:-18px;right:-18px;transform:translateZ(2px)}.avatar--gui-frame img{object-fit:contain;width:100%;height:100%}.avatar--gui-level{z-index:60;text-align:center;color:#eaeaea;border:1px solid #2f2f2f;border-radius:50%;left:50%;transform:translate3d(-50%,0,3px)}.size--xs .avatar--gui-level{width:10px;height:10px;font:700 8px/10px Noto Sans,sans-serif;bottom:-3px}.size--small .avatar--gui-level{width:18px;height:18px;font:700 10px/16px Noto Sans,sans-serif;bottom:-4px}.size--medium .avatar--gui-level{width:22px;height:22px;font:700 12px/21px Noto Sans,sans-serif;bottom:-1px}.size--large .avatar--gui-level{width:30px;height:30px;font:700 16px/30px Noto Sans,sans-serif;bottom:3px}.size--extraLarge .avatar--gui-level{width:36px;height:36px;font:700 16px/30px Noto Sans,sans-serif;bottom:4px}.no--frame .avatar--gui-level{background:#000;border-color:#7c7c7c}.avatar--gui-epix-notification{background-color:var(--color-red-80);z-index:51;border-radius:50%;width:9px;height:9px;bottom:-2px;right:-2px}.avatar--cli{margin:0 0 0 16px;font-size:14px}.avatar--cli-name{transition:var(--transition-duration)color cubic-bezier(.25,.61,.355,1);-webkit-line-clamp:1;word-break:break-all;-webkit-box-orient:vertical;line-height:19px;display:-webkit-box;overflow:hidden}.avatar--cli-xp{color:#7c7c7c;margin:8px 0 0;line-height:1.077}