.avatar{box-sizing:border-box;background:var(--accent-color--200);width:100%;height:100%;color:var(--accent-color--600);letter-spacing:.01em;vertical-align:middle;-webkit-user-select:none;user-select:none;border-radius:50%;flex:none;justify-content:center;align-items:center;font-family:Manrope,system-ui,-apple-system,Segoe UI,sans-serif;font-size:.4em;font-weight:700;line-height:1;display:inline-flex;position:relative;overflow:hidden;container-type:size}[data-theme=dark] .avatar{background:rgba(var(--accent-color--dark-rgb), .22);color:var(--accent-color--300)}.avatar__initials{font-size:clamp(8px,36cqw,28px)}.avatar__image{object-fit:cover;border-radius:50%;width:100%;height:100%}.avatar--ring{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--avatar-ring,var(--accent-color--light));overflow:visible}[data-theme=dark] .avatar--ring{box-shadow:0 0 0 2px #171a23, 0 0 0 4px var(--avatar-ring,var(--accent-color--dark))}.avatar--clickable{cursor:pointer;border:0;padding:0;transition:transform 80ms ease-out}.avatar--clickable:active{transform:scale(.94)}.avatar--clickable:focus-visible{box-shadow:0 0 0 3px rgba(var(--accent-color--light-rgb), .35);outline:none}