.orb{position:relative;display:inline-block;flex:none;width:var(--orb-size, 1.75rem);aspect-ratio:1;border-radius:50%;transition:box-shadow var(--orb-fade, .2s) var(--ease-out)}.orb>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none}.orb-state{opacity:0;transition:opacity var(--orb-fade, .2s) var(--ease-out)}.orb-state[data-current=true]{opacity:1}.monogram{display:inline-grid;flex:none;place-items:center;width:var(--orb-size, 1.75rem);aspect-ratio:1;border-radius:50%;background:var(--tint);color:#fff;font-size:.75rem;font-weight:600;line-height:1}.monogram:before{content:attr(data-initial)}.monogram:not([data-initial]){background:#fff;box-shadow:inset 0 0 0 1px var(--border)}.orb-live{position:absolute;inset:0;border-radius:50%;pointer-events:none}.orb-live canvas{display:block;width:100%;height:100%;border-radius:50%;opacity:0;transition:opacity .2s var(--ease-out)}.orb-live canvas[data-presented=true]{opacity:1;transition-duration:.3s}