@layer components{.x-avatar{--size:8em;--avatar-bg:var(--beta);-webkit-user-select:none;user-select:none;width:var(--size);height:var(--size);box-sizing:border-box;aspect-ratio:1;border:.2em solid var(--lines);background:var(--avatar-bg);max-width:100%;box-shadow:var(--box-shadow);transition:border-color var(--motion-fast) ease, opacity var(--motion-fast) ease, transform var(--motion-fast) var(--ease-sticky);border-radius:50%;display:inline-block;position:relative;overflow:clip;transform:translateY(0)scale(1)}.x-avatar[data-clickable]{opacity:.8;cursor:pointer}.x-avatar[data-clickable]:is(:hover,:focus-visible,[data-marked]){opacity:1;border-color:color-mix(in oklch, transparent, var(--alpha) 50%);transform:translateY(var(--motion-hover-y)) scale(1.03)}.x-avatar[data-clickable]:active{opacity:.8;transform:translateY(var(--motion-press-y)) scale(var(--motion-press-scale))}.x-avatar>*{box-sizing:border-box;width:100%;height:100%;display:block;position:absolute;inset:0}.x-avatar img{background:0 0;border:none;display:block}.x-avatar img[hidden]{display:none}.x-avatar svg{color:color-mix(in oklch, var(--avatar-bg), var(--fg) 80%);background:0 0;padding:.4em}.x-login{justify-content:center;align-items:center;gap:var(--pad);display:flex}.x-login .x-avatar{--size:5em;--avatar-bg:var(--neutral)}.x-login>div{gap:var(--pad);flex-direction:column;align-items:start;display:flex}.x-login>div>p{font-size:1.5em;font-weight:700}}