.avatar{background:#444;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:all .3s;display:inline-flex;position:relative;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.avatar-initials{color:#fff;text-transform:uppercase;background:linear-gradient(135deg,#09bec8 0%,#0891b2 100%);font-weight:600}.avatar-with-level{background:linear-gradient(135deg, var(--level-color), color-mix(in srgb, var(--level-color) 70%, white));box-shadow:0 0 0 1px var(--background-color), 0 0 8px var(--level-color), 0 0 12px color-mix(in srgb, var(--level-color) 40%, transparent);padding:1.5px;animation:3s ease-in-out infinite levelGlow}.avatar-with-level:before{content:"";background:linear-gradient(45deg, transparent, color-mix(in srgb, var(--level-color) 60%, white), transparent);-webkit-mask-composite:xor;opacity:.6;border-radius:50%;padding:1px;animation:4s linear infinite levelShine;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.avatar-with-level img,.avatar-with-level.avatar-initials{border-radius:50%;width:calc(100% - 3px);height:calc(100% - 3px)}@keyframes levelGlow{0%,to{box-shadow:0 0 0 1px var(--background-color), 0 0 8px var(--level-color), 0 0 12px color-mix(in srgb, var(--level-color) 40%, transparent)}50%{box-shadow:0 0 0 1px var(--background-color), 0 0 10px var(--level-color), 0 0 18px color-mix(in srgb, var(--level-color) 60%, transparent)}}@keyframes levelShine{0%{transform:rotate(0)}to{transform:rotate(360deg)}}