.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-initials{color:#fff;text-transform:uppercase;background:linear-gradient(135deg,#09bec8 0%,#0891b2 100%);font-weight:600}.avatar-with-level{background:var(--level-color);box-shadow:0 0 8px var(--level-color), 0 0 24px color-mix(in srgb, var(--level-color) 70%, transparent), 0 0 40px color-mix(in srgb, var(--level-color) 40%, transparent);padding:1px;transition:transform .2s,box-shadow .2s;position:relative;overflow:visible}[data-theme=light] .avatar-with-level{background:color-mix(in srgb, var(--level-color) 90%, black);box-shadow:0 0 8px color-mix(in srgb, var(--level-color) 80%, black), 0 0 24px color-mix(in srgb, var(--level-color) 50%, #00000040)}.avatar-with-level:has(img[src$=\.svg]){box-shadow:none;filter:drop-shadow(0 0 4px color-mix(in srgb, var(--level-color) 40%, #00000073)) drop-shadow(0 0 8px var(--level-color)) drop-shadow(0 0 24px color-mix(in srgb, var(--level-color) 80%, transparent)) drop-shadow(0 0 48px color-mix(in srgb, var(--level-color) 55%, transparent)) drop-shadow(0 0 96px color-mix(in srgb, var(--level-color) 30%, transparent)) drop-shadow(0 0 144px color-mix(in srgb, var(--level-color) 12%, transparent));background:0 0;border:none;padding:0}[data-theme=light] .avatar-with-level:has(img[src$=\.svg]){filter:drop-shadow(0 0 4px #0009) drop-shadow(0 0 8px color-mix(in srgb, var(--level-color) 85%, black)) drop-shadow(0 0 24px color-mix(in srgb, var(--level-color) 70%, #00000040)) drop-shadow(0 0 48px color-mix(in srgb, var(--level-color) 45%, #00000026)) drop-shadow(0 0 96px color-mix(in srgb, var(--level-color) 25%, #00000014))}.avatar-with-level:has(img[src$=\.svg]) img{border-radius:0;width:100%;height:100%}.avatar-with-level:hover,.avatar-with-level:focus-visible{transform:scale(1.08)}.avatar-with-level:active{transform:scale(.95)}.avatar-with-level img,.avatar-with-level.avatar-initials{border-radius:50%;width:calc(100% - 2px);height:calc(100% - 2px)}