.member-filter{--avatar:36px;grid-template-columns:minmax(0,1fr) 184px;align-items:center;column-gap:12px;min-width:0;display:grid;container-type:inline-size}.member-filter__strip{scrollbar-width:none;align-items:flex-end;gap:8px;min-width:0;height:68px;padding:0 10px 6px;display:flex;overflow-x:auto}.member-filter__strip::-webkit-scrollbar{display:none}.member-filter__button{--member-ring:var(--c-cyan,#6ee7f9);flex:0 0 var(--avatar);width:var(--avatar);height:var(--avatar);background:var(--c-surface-raised);color:var(--c-text-dim);cursor:pointer;scroll-snap-align:center;border:0;border-radius:50%;place-items:center;padding:0;transition:transform .12s,box-shadow .12s;display:grid;position:relative}.member-filter__portrait{border-radius:50%;width:100%;height:100%;display:block;overflow:hidden}.member-filter__portrait .member-sprite,.member-filter__portrait .avatar{object-fit:cover;object-position:50% 34%;width:100%;height:100%;image-rendering:pixelated;transform-origin:50% 34%;transform:scale(2)}.member-filter__portrait,.member-filter__star{opacity:.78;filter:saturate(.85);transition:opacity .12s,filter .12s}.member-filter__star{font-family:var(--font-pixel);font-size:calc(var(--avatar) * .64);line-height:1}.member-filter__name{border:1px solid var(--member-ring);background:var(--c-surface);color:var(--c-text);font-family:var(--font-pixel);white-space:nowrap;opacity:0;pointer-events:none;z-index:2;border-radius:3px;padding:3px 5px 2px;font-size:11px;line-height:1;transition:opacity .12s,transform .12s;position:absolute;bottom:calc(100% + 3px);left:50%;transform:translate(-50%,3px)}.member-filter__button:hover,.member-filter__button:focus-visible{z-index:3}.member-filter__button:hover .member-filter__name,.member-filter__button:focus-visible .member-filter__name{opacity:1;transform:translate(-50%)}.member-filter__button[aria-pressed=true]{color:var(--member-ring);box-shadow:0 0 0 2px var(--member-ring), 0 0 6px 2px color-mix(in srgb, var(--member-ring) 30%, transparent)}.member-filter__button[aria-pressed=true] .member-filter__portrait,.member-filter__button[aria-pressed=true] .member-filter__star{opacity:1;filter:none}.member-filter__button:hover{transform:translateY(-1px)}.member-filter__button:hover .member-filter__portrait,.member-filter__button:hover .member-filter__star{opacity:.95;filter:none}.member-filter__button:focus-visible,.member-filter__clear:focus-visible{outline:2px solid var(--c-cyan,#6ee7f9);outline-offset:4px}.member-filter__live{background:#59dc88;border-radius:50%;width:3px;height:3px;position:absolute;bottom:2px;right:2px}.member-filter__status{min-height:24px;color:var(--c-text-dim);white-space:nowrap;justify-content:flex-end;align-items:center;gap:6px;font-size:12px;display:flex}.member-filter__status>span{text-overflow:ellipsis;min-width:0;overflow:hidden}.member-filter__clear{width:24px;height:24px;color:inherit;cursor:pointer;background:0 0;border:0;flex-shrink:0;padding:0;font-size:18px}@container (max-width:919px){.member-filter__strip,.member-filter__status{grid-column:1/-1}.member-filter__status{justify-content:flex-start;height:24px;padding-inline:10px}}@container (min-width:480px) and (max-width:719px){.member-filter__strip{--avatar:32px;gap:6px}}@media (max-width:639px){.member-filter__strip{scroll-snap-type:x proximity;padding-inline:12px;-webkit-mask-image:linear-gradient(90deg,#0000,#000 12px calc(100% - 12px),#0000);mask-image:linear-gradient(90deg,#0000,#000 12px calc(100% - 12px),#0000)}.member-filter__status{padding-inline:12px}}@media (prefers-reduced-motion:reduce){.member-filter__button,.member-filter__portrait,.member-filter__star,.member-filter__name{transition:none}.member-filter__button:hover{transform:none}}