.avatar-with-frame{--avatar-frame-size:128px;--avatar-frame-avatar-scale:1;--avatar-frame-avatar-x:0%;--avatar-frame-avatar-y:0%;--avatar-frame-art-scale:1;position:relative;display:inline-block;width:var(--avatar-frame-size);height:var(--avatar-frame-size);flex:0 0 var(--avatar-frame-size);isolation:isolate;overflow:visible}.avatar-with-frame__art,.avatar-with-frame__avatar-clip,.avatar-with-frame__base{position:absolute;inset:0;width:100%;height:100%}.avatar-with-frame__base{z-index:0;object-fit:contain;pointer-events:none}.avatar-with-frame__avatar-clip{z-index:1;container-type:size;display:grid;place-items:center;overflow:hidden;border-radius:50%;transform:translate(var(--avatar-frame-avatar-x),var(--avatar-frame-avatar-y)) scale(var(--avatar-frame-avatar-scale))}.avatar-with-frame:not(.avatar-with-frame--framed) .avatar-with-frame__avatar-clip{transform:none}.avatar-with-frame__avatar,.avatar-with-frame__fallback{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}.avatar-with-frame__fallback{display:grid;place-items:center;background:#30313d;color:#e9e9ef;font-size:calc(var(--avatar-frame-size) * .42);font-size:42cqmin;line-height:1;font-weight:800;text-transform:uppercase}.avatar-with-frame__art{z-index:2;object-fit:contain;transform:scale(var(--avatar-frame-art-scale));pointer-events:none}.avatar-with-frame__presence{position:absolute;right:3%;bottom:5%;z-index:3;width:16%;aspect-ratio:1;border:2px solid #111217;border-radius:50%}.avatar-with-frame__presence--online{background:#35d07f}.avatar-with-frame__presence--away{background:#f7b955}.avatar-with-frame__presence--offline{background:#777b87}