.button{appearance:none;font:inherit;color:inherit;padding:0 var(--textbox-x);background:var(--c-button);word-spacing:-.25em;cursor:pointer;-webkit-user-select:none;user-select:none;height:var(--buttonHeight);white-space:nowrap;justify-content:center;align-items:center;gap:var(--sp-s);border:none;border-radius:50px;font-size:.7rem;font-weight:700;line-height:1;text-decoration:none;transition:background-color .2s;display:inline-flex}.button--icon-only{width:var(--buttonHeight);padding:0}.button:hover{background-color:var(--c-buttonHover)}.button:active{background-color:var(--c-buttonActive)}.button-icon{align-items:center;display:inline-flex}.button--primary{color:#fff;background:linear-gradient(#3d3d3d 0%,#1f1f1f 55%,#0a0a0a 100%);height:2rem;transition:background .2s,box-shadow .2s,transform .15s;box-shadow:inset 0 1px #ffffff2e,0 1px 2px #0003,0 4px 10px #00000038}.button--primary:hover{background:linear-gradient(#484848 0%,#282828 55%,#121212 100%);box-shadow:inset 0 1px #ffffff38,0 2px 4px #00000038,0 6px 14px #00000042}.button--primary:active{background:linear-gradient(#2e2e2e 0%,#161616 55%,#050505 100%);transform:translateY(1px);box-shadow:inset 0 1px #ffffff1a,0 1px 2px #0000002e}.button--primary .readmeBadge{color:inherit;background-color:#ffffff24}
.color-dot{cursor:pointer;appearance:none;background:0 0;border:2px solid #0000;border-radius:50%;width:1.5rem;height:1.5rem;margin:0;padding:0}.color-dot:focus{border-color:var(--c-fieldFocus);outline:none}.color-dot::-webkit-color-swatch-wrapper{border-radius:50%;padding:0}.color-dot::-webkit-color-swatch{border:none;border-radius:50%}.color-dot::-moz-color-swatch{border:none;border-radius:50%}
.segment-group{border-radius:9999px;align-items:center;display:flex}.segment-group--full-width{width:100%}.segment-group>button{flex:1}.segment{background-color:#0000}.segment--selected{background-color:var(--c-background)}.segment:not(:hover){background-color:#0000}.segment--selected:not(:hover){background-color:var(--c-background)}
.code-block{width:100%;padding:var(--sp-s)var(--sp-m);background-color:var(--c-backgroundCode);white-space:break-spaces;overflow-wrap:anywhere;line-break:anywhere;border-radius:.25rem;margin:0;line-height:1.45;display:block;overflow:auto}.code-block-toolbar{float:right;margin-left:var(--sp-l)}.code-block-copy{vertical-align:middle;background-color:var(--c-background);border-radius:.5rem;display:inline-flex;box-shadow:0 0 0 1px #32325d0a,0 2px 6px #32325d0f,0 1px 2px #00000008}.code-block-copy:hover{background-color:var(--c-background);box-shadow:0 0 0 1px #32325d0f,0 4px 10px #32325d14,0 2px 4px #0000000a}.code-block-copy:active{background-color:var(--c-background)}.code-block code{justify-content:space-between;align-items:center;width:100%;font-family:SF Mono,Consolas,Monaco,Andale Mono,monospace;font-size:.8rem;display:flex}.code-block-content{display:block}.code-block .token.tag{color:#22863a}.code-block .token.attr-name{color:#6f42c1}.code-block .token.attr-value,.code-block .token.string{color:#032f62}.code-block .token.punctuation{color:#586069}.code-block .token.keyword{color:#d73a49}.code-block .token.operator{color:#586069}.code-block .token.property{color:#005cc5}
.chat-avatar-wrapper{padding:var(--sp-s)var(--sp-m);flex-direction:column;display:flex}.chat-avatar-wrapper>div{align-items:center;gap:var(--sp-s);padding-bottom:var(--sp-m);padding-top:var(--sp-m);display:flex}.chat-avatar-wrapper>div+div{border-top:1px solid var(--c-backgroundAlt)}.chat-avatar-wrapper h4{margin:0 0 .2rem;font-size:.85rem;line-height:1}.chat-avatar-wrapper header{position:relative}.chat-avatar-wrapper header span{border:2px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute;bottom:0;right:0}.chat-avatar-wrapper small{color:var(--c-body-secondary);text-align:right;flex:1;align-self:flex-start}.chat-badge{border-radius:99px;margin-left:.25rem;padding:.1rem .4rem .15rem;font-size:.65rem;font-weight:500}.chat-badge--active{color:#0f5c2e;background-color:#c6f6d9}.chat-badge--inactive{background-color:var(--c-backgroundAlt);color:inherit}
.profile-avatar-wrapper{flex-direction:column;align-items:center;display:flex}.profile-avatar-wrapper h4{margin-top:.75rem;margin-bottom:0;font-size:1rem}.profile-avatar-wrapper small{color:var(--c-body-secondary);margin-bottom:.5rem}.profile-avatar-wrapper svg{filter:drop-shadow(2px 0 #fff)drop-shadow(-2px 0 #fff)drop-shadow(0 2px #fff)drop-shadow(0 -2px #fff)}.profile-avatar-wrapper header{width:100%;overflow:hidden}.profile-avatar-wrapper header img{height:calc(var(--sp-xl)*2.5);-o-object-fit:cover;object-fit:cover;background-color:var(--c-button);filter:blur(20px);width:100%;display:block;transform:scale(1.3)}.profile-avatar-wrapper div:last-child{margin-top:calc(var(--sp-l)*-1);text-align:center;align-items:center;gap:var(--sp-s);flex-direction:column;display:flex}.profile-avatar-wrapper button{margin-bottom:var(--sp-m)}
.suggested-avatar{border:1px solid var(--c-backgroundAlt);padding:var(--sp-m);border-radius:.5rem;flex-direction:column;align-items:center;display:flex}.suggested-avatar h4{margin-bottom:var(--sp-m);margin-top:var(--sp-s);text-align:center}.suggested-avatar small{color:var(--c-body-secondary)}.suggested-avatar-wrapper{padding:var(--sp-s)var(--sp-m);gap:var(--sp-s);grid-template-columns:repeat(auto-fill,minmax(100px,1fr));display:grid}.suggested-avatar-wrapper h3{grid-column:1/-1}
.shared-avatar-wrapper{padding:var(--sp-s)var(--sp-m);gap:var(--sp-s);grid-template-columns:repeat(auto-fill,minmax(46px,1fr));display:grid}.shared-avatar-wrapper h3{grid-column:1/-1}.shared-avatar{margin-bottom:var(--sp-s);flex-direction:column;align-items:center;display:flex}.shared-avatar h4{margin-bottom:var(--sp-m);margin-top:var(--sp-s);text-align:center;font-size:.75rem}.shared-avatar small{color:var(--c-body-secondary)}
.upload-avatar-wrapper header div{gap:var(--sp-xs);align-items:center;gap:var(--sp-s);padding:var(--sp-m)var(--sp-m);display:flex}.upload-avatar-wrapper header p{flex:1;margin:0;padding:0;line-height:1.25}.upload-avatar-wrapper header span{color:var(--c-body-secondary);margin-left:var(--sp-xs)}.upload-avatar-wrapper header img{width:100%;height:calc(var(--sp-xl)*4);-o-object-fit:cover;object-fit:cover;background-color:var(--c-button);margin-bottom:var(--sp-s);display:block}.upload-avatar-wrapper footer{padding:var(--sp-s)var(--sp-m);gap:var(--sp-s);margin-bottom:var(--sp-m);display:flex}.upload-avatar-wrapper footer button{word-spacing:.25em}.upload-avatar-wrapper footer button+button{flex:1}.upload-avatar-group{padding:var(--sp-m)var(--sp-m);display:flex}.upload-avatar-group svg+svg{filter:drop-shadow(2px 0 #fff)drop-shadow(-2px 0 #fff)drop-shadow(0 2px #fff)drop-shadow(0 -2px #fff);margin-left:-.25rem}.upload-avatar-group span{margin-left:var(--sp-s)}
.instagram-avatar-wrapper{padding:var(--sp-m);flex-direction:column;display:flex}.instagram-avatar-wrapper header{align-items:center;gap:var(--sp-m);display:flex}.instagram-avatar-wrapper header div{flex:1;display:flex}.instagram-avatar-wrapper h3{margin-top:.75rem;margin-bottom:0}.instagram-avatar-wrapper small{color:var(--c-body-secondary);margin-bottom:.5rem}.instagram-avatar-wrapper button{margin-top:var(--sp-s)}.instagram-data{justify-content:space-between;align-items:center;gap:var(--sp-s);font-size:.75rem;display:flex}.instagram-data div{flex-direction:column;align-items:center;display:flex}.instagram-data div span:first-child{margin:0;font-weight:700;line-height:1}.instagram-data div span:last-child{color:var(--c-body-secondary)}
.twitter-wrapper{padding:var(--sp-l);flex-direction:column;display:flex}.twitter-wrapper>div{align-items:center;gap:var(--sp-s);margin-top:var(--sp-s);margin-left:2rem;display:flex}.twitter-wrapper>div small{text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}.twitter-wrapper>div svg{min-width:fit-content}.twitter-wrapper h4{margin:0;font-size:.85rem;line-height:1}.twitter-wrapper small{color:var(--c-body-secondary)}.twitter-wrapper header{gap:var(--sp-s);margin-bottom:var(--sp-s);display:flex}.twitter-wrapper header svg{min-width:fit-content}.twitter-wrapper header p{margin-top:.5rem;margin-bottom:0}.twitter-wrapper header div>div:first-child{background-color:var(--c-backgroundCode);padding:var(--sp-m);margin-bottom:var(--sp-s);border-radius:.5rem}.twitter-wrapper header div>div:last-child{gap:var(--sp-s);display:flex}
.avatar-container{font-size:.8rem;display:grid}.avatar-container:hover .button-section{opacity:1;transition:all .2s .1s}.avatar-section{justify-content:center;align-items:center;display:flex}.button-section{opacity:0;place-items:center;transition:all .5s;display:grid}.avatar-name{text-align:center;margin-top:var(--sp-s);font-size:.8rem;font-weight:600}.avatar-input{padding:var(--textbox);font:inherit;color:inherit;text-align:center;width:100%;margin-top:var(--sp-s);background:0 0;border:1px solid #0000;border-radius:100rem;transition:all .5s}.avatar-input:hover{border-color:var(--c-fieldHover);transition:all .2s}.avatar-input:focus{border-color:var(--c-fieldFocus);outline:none}
.example-code-card{margin-bottom:var(--sp-xl);margin-top:var(--sp-l);flex-direction:column;padding:0;display:flex}.example-code-title{text-align:center;margin:0;font-size:1rem}.example-code-card .avatars-grid{padding:var(--sp-l);gap:var(--sp-m);flex-wrap:wrap;justify-content:space-between;display:flex}.example-code-content .code-block{padding:var(--sp-m)var(--sp-l);margin:0}.example-grid{grid-gap:var(--sp-l);grid-template-rows:repeat(4,min-content);grid-template-columns:1fr 1fr 1fr;display:grid}@media (max-width:1200px){.example-grid{grid-template-columns:1fr 1fr}}@media (max-width:700px){.example-grid{grid-template-columns:1fr}}.example-grid>.card:first-child,.example-grid>.card:nth-child(2){grid-row:span 2}.example-grid>.card:nth-child(3){grid-row:span 1}.example-grid>.card:nth-child(4),.example-grid>.card:nth-child(5),.example-grid>.card:nth-child(6){grid-row:span 2}.example-grid>.card:nth-child(7){grid-row:span 1}.example-wrapper{font-family:var(--font-sans);padding:var(--sp-xl);background:linear-gradient(210deg,var(--color-1),var(--color-2)),#f6f6f6;border-radius:1rem}@media (max-width:700px){.example-wrapper{padding:var(--sp-l)}}.example-section{margin-bottom:calc(var(--sp-xl)*2)}