.avatar{background:#444;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:transform .3s,opacity .3s,color .3s,background-color .3s,border-color .3s;display:inline-flex;position:relative;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.avatar:has(img[src$=\.svg]){box-shadow:none;background:0 0;border-radius:0}.avatar:has(img[src$=\.svg]) img{object-fit:contain}.avatar-with-level:has(img[src$=\.svg]){box-shadow:none;background:0 0;padding:0}.avatar-with-level:has(img[src$=\.svg]):before{display:none}.avatar-with-level:has(img[src$=\.svg]):after{display:none}.avatar-with-level:has(img[src$=\.svg]) img{border-radius:0;width:100%;height:100%}.avatar-with-level{filter:drop-shadow(0 0 1px color-mix(in srgb, var(--level-color) 40%, #00000073)) drop-shadow(0 0 2px var(--level-color)) drop-shadow(0 0 6px color-mix(in srgb, var(--level-color) 80%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--level-color) 55%, transparent)) drop-shadow(0 0 24px color-mix(in srgb, var(--level-color) 30%, transparent)) drop-shadow(0 0 36px color-mix(in srgb, var(--level-color) 12%, transparent))}[data-theme=light] .avatar-with-level{filter:drop-shadow(0 0 1px #0009) drop-shadow(0 0 2px color-mix(in srgb, var(--level-color) 85%, black)) drop-shadow(0 0 6px color-mix(in srgb, var(--level-color) 70%, #00000040)) drop-shadow(0 0 12px color-mix(in srgb, var(--level-color) 45%, #00000026)) drop-shadow(0 0 24px color-mix(in srgb, var(--level-color) 25%, #00000014))}.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);padding:1.5px;transition:transform .2s;position:relative}[data-theme=light] .avatar-with-level{background:linear-gradient(135deg, color-mix(in srgb, var(--level-color) 90%, black), color-mix(in srgb, var(--level-color) 65%, black));box-shadow:0 0 0 1px #0003}.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:.5;border-radius:50%;padding:1px;transition:opacity .3s;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}[data-theme=light] .avatar-with-level:before{background:linear-gradient(45deg, transparent, color-mix(in srgb, var(--level-color) 70%, #0003), transparent)}.avatar-with-level:after{content:"";box-shadow:0 0 10px var(--level-color), 0 0 14px color-mix(in srgb, var(--level-color) 50%, transparent);opacity:.7;pointer-events:none;border-radius:50%;transition:opacity .2s;position:absolute;inset:0}[data-theme=light] .avatar-with-level:after{box-shadow:0 0 8px color-mix(in srgb, var(--level-color) 80%, black), 0 0 14px color-mix(in srgb, var(--level-color) 50%, #00000040)}.avatar-with-level:hover,.avatar-with-level:focus-visible{transform:scale(1.08)}.avatar-with-level:hover:before,.avatar-with-level:focus-visible:before{opacity:.85}.avatar-with-level:hover:after,.avatar-with-level:focus-visible:after{opacity:1}.avatar-with-level:active{transform:scale(.95)}.avatar-with-level img,.avatar-with-level.avatar-initials{border-radius:50%;width:calc(100% - 3px);height:calc(100% - 3px)}