.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}
.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{background-color:var(--c-button);border-radius:10rem;align-items:center;padding:.2rem;display:inline-flex;overflow:auto}.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{position:relative}.code-block-copy{top:var(--sp-xs);right:var(--sp-xs);z-index:1;opacity:0;border-radius:.25rem;transition:opacity .2s;position:absolute}.code-block:hover .code-block-copy{opacity:1}.code-block pre{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:1rem 0;line-height:1.45;display:block;overflow:auto}.code-block code{font-family:SF Mono,Consolas,Monaco,Andale Mono,monospace;font-size:.8rem}
.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-backgroundAlt);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}
.example-section{grid-gap:var(--sp-xl);margin-top:calc(var(--sp-xl)*4);grid-template-columns:320px 1fr;display:grid}@media (max-width:1000px){.example-section{grid-template-columns:1fr}}.example-code{height:fit-content;position:sticky;top:0}@media (max-width:1000px){.example-code{position:static}}.example-code h2+div{grid-gap:var(--sp-xs);margin-bottom:var(--sp-xl);grid-template-columns:repeat(auto-fill,minmax(28px,1fr));display:grid}.example-wrapper{font-family:var(--font-sans);grid-gap:var(--sp-l);padding:var(--sp-xl);background:linear-gradient(210deg,var(--color-1),var(--color-2));border-radius:1rem;grid-template-rows:repeat(4,min-content);grid-template-columns:1fr 1fr 1fr;display:grid}@media (max-width:1200px){.example-wrapper{grid-template-columns:1fr 1fr}}@media (max-width:700px){.example-wrapper{grid-template-columns:1fr}}.example-wrapper>.card:first-child,.example-wrapper>.card:nth-child(2){grid-row:span 2}.example-wrapper>.card:nth-child(3){grid-row:span 1}.example-wrapper>.card:nth-child(4),.example-wrapper>.card:nth-child(5),.example-wrapper>.card:nth-child(6){grid-row:span 2}.example-wrapper>.card:nth-child(7){grid-row:span 1}