.hp-avatar{box-sizing:border-box;width:var(--hp-avatar);height:var(--hp-avatar);border:1px solid var(--hp-rule-2);background:var(--hp-surface-2);color:var(--hp-ink);font-family:var(--hp-font-display);font-weight:700;font-size:var(--hp-t-label);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative;overflow:hidden}.hp-avatar[data-size=xs]{width:var(--hp-avatar-xs);height:var(--hp-avatar-xs);font-size:var(--hp-t-eyebrow)}.hp-avatar[data-size=sm]{width:var(--hp-avatar-sm);height:var(--hp-avatar-sm);font-size:var(--hp-t-small)}.hp-avatar[data-size=lg]{width:var(--hp-avatar-lg);height:var(--hp-avatar-lg)}.hp-avatar[data-size=xl]{width:var(--hp-avatar-xl);height:var(--hp-avatar-xl);font-size:var(--hp-t-h2)}.hp-avatar[data-size=xxl]{width:calc(var(--hp-avatar-xl) * 1.5);height:calc(var(--hp-avatar-xl) * 1.5);font-size:var(--hp-t-h1)}.hp-avatar[data-type]{--hp-av-bg:hsl(var(--hp-av-h) 30% 22%);--hp-av-body:hsl(var(--hp-av-h) 40% 40%);--hp-av-face:hsl(var(--hp-av-h) 28% 80%);--hp-av-dark:hsl(var(--hp-av-h) 35% 14%);--hp-av-light:hsl(var(--hp-av-h) 60% 88%);--hp-av-prop:hsl(calc(var(--hp-av-h) + 180) 70% 62%);background:0 0;border:0}.hp-avatar[data-type]>svg,.hp-avatar>img{width:100%;height:100%}.hp-avatar>img{object-fit:cover}.hp-avatar[data-mark]>svg{width:50%;height:50%}.hp-avatar[data-mark=gm]{background:var(--hp-accent);color:var(--hp-accent-ink)}.hp-avatar[data-mark=system]{color:var(--hp-accent-text)}