.hero-demo{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0d1122c7;border:1px solid #ffffff14;border-radius:24px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;padding:16px;display:grid;box-shadow:0 30px 80px -40px #000}@property --demo-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.hero-demo{position:relative}.hero-demo:before{content:"";border-radius:inherit;background:conic-gradient(from var(--demo-angle), transparent 0 55%, #24d7ff, #4d6bff, #b14dff, transparent 95%);opacity:0;pointer-events:none;padding:1.5px;transition:opacity .5s;position:absolute;inset:-1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.hero-demo[data-phase=building]:before{opacity:1}.demo-server{position:relative}.demo-server:after{content:"";pointer-events:none;background:linear-gradient(105deg,#0000 35%,#ffffff1f 50%,#0000 65%);position:absolute;inset:0;translate:-100%}.hero-demo [data-on]{transition:opacity .38s var(--ease-out), translate .38s var(--ease-out)}.hero-demo [data-on=false]{opacity:0;translate:0 6px}.demo-chat{background:#0b0d17;border:1px solid #ffffff14;border-radius:16px;flex-direction:column;min-width:0;min-height:0;display:flex}.demo-window-bar{color:#8f98b3;font-family:var(--font-mono);border-bottom:1px solid #ffffff10;align-items:center;gap:10px;padding:14px 16px;font-size:12px;display:flex}.demo-window-mark{background:#0d1122;border-radius:50%;flex:none}.demo-messages{flex-direction:column;flex:1 1 0;gap:12px;min-height:0;padding:18px 16px;display:flex}.demo-messages>:first-child{margin-top:auto}.demo-messages,.demo-channels{scrollbar-width:thin;scrollbar-color:#ffffff2e transparent;overflow:hidden auto;-webkit-mask-image:linear-gradient(#0000,#000 12px calc(100% - 12px),#0000);mask-image:linear-gradient(#0000,#000 12px calc(100% - 12px),#0000)}.demo-bubble{color:#dfe5f5;background:#161a2b;border:1px solid #ffffff14;border-radius:14px;align-self:flex-start;max-width:88%;padding:10px 14px;font-size:13px;line-height:1.5}.demo-bubble-user{color:#fff;background:linear-gradient(120deg,#8a5cff,#6a4dff);border-color:#0000;align-self:flex-end}.demo-input{border-top:1px solid #ffffff10;gap:8px;padding:12px 16px 16px;display:flex}.demo-input>span:first-child{text-overflow:ellipsis;white-space:nowrap;color:#8f98b3;background:#ffffff05;border:1px solid #ffffff14;border-radius:10px;flex:1;padding:10px 12px;font-size:13px;overflow:hidden}.demo-input>span[data-typing=true]{color:#eef1fb;border-color:#4d6bff66}.demo-input>span[data-typing=true]:after{content:"";vertical-align:-2px;background:#24d7ff;width:2px;height:1em;margin-left:2px;display:inline-block}.demo-send{color:#b7c2e0;background:#ffffff0d;border-radius:10px;place-items:center;width:40px;transition:background .25s,box-shadow .25s,color .25s;display:grid}.demo-send[data-sent=true]{background:var(--cta-fill);color:#fff;box-shadow:0 0 20px -2px #4d6bff}.demo-checklist{gap:5px;font-size:12px;display:grid}.demo-checklist li{color:#aeb8d4;align-items:center;gap:7px;display:flex}.demo-checklist li[data-done=true]{color:#e6ebf8}.demo-checklist svg{color:#6b8bff;flex:none}.demo-checklist li[data-done=true] svg{color:var(--success);background:#79d7ad26;border-radius:50%;padding:1px}.demo-typing{gap:4px;padding-block:6px;display:inline-flex}.demo-typing>span{background:#8f98b3;border-radius:50%;width:6px;height:6px}.demo-bot{flex-direction:column;align-self:center;align-items:center;gap:12px;width:124px;display:flex;position:relative}.demo-bot:before{content:"";opacity:0;background:repeating-linear-gradient(90deg,#24d7ff 0 6px,#0000 6px 14px);height:2px;transition:opacity .3s;position:absolute;top:41px;left:-14px;right:-14px}[data-phase=building] .demo-bot:before{opacity:.8}.demo-avatar{background:#0d1122;border-radius:50%;place-items:center;width:84px;height:84px;transition:box-shadow .5s;display:grid;position:relative}.demo-avatar:before{content:"";opacity:0;background:conic-gradient(#24d7ff,#4d6bff,#b14dff,#0000 75%);border-radius:50%;padding:2px;transition:opacity .3s;position:absolute;inset:0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}[data-phase=building] .demo-avatar:before{opacity:1}[data-phase=done] .demo-avatar:before{opacity:1;background:conic-gradient(#24d7ff,#4d6bff,#b14dff,#24d7ff)}[data-phase=done] .demo-avatar{box-shadow:0 12px 30px -12px #4d6bffb3}.demo-bot img{width:72px;height:72px}.demo-status{color:#c7acff;white-space:nowrap;background:#9a6bff14;border:1px solid #9a6bff66;border-radius:100px;padding:5px 11px;font-size:12px;font-weight:600}[data-phase=done] .demo-status{color:var(--success);background:#79d7ad0f;border-color:#79d7ad40}.demo-server{color:#949ba4;background:#2b2d31;border-radius:16px;flex-direction:column;min-width:0;min-height:0;transition:box-shadow .5s;display:flex;overflow:hidden}[data-phase=done] .demo-server{box-shadow:0 24px 60px -28px #4d6bffb3}.demo-server:before{content:"";z-index:1;border-radius:inherit;background:var(--cta-fill);opacity:0;pointer-events:none;padding:1px;transition:opacity .6s;position:absolute;inset:0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}[data-phase=done] .demo-server:before{opacity:1}.demo-server-name{color:#f2f3f5;align-items:center;gap:8px;padding:14px 16px 12px;font-size:15px;font-weight:700;display:flex}.demo-skeleton{background:linear-gradient(90deg,#3a3c43,#4a4d55,#3a3c43) 0 0/200% 100%;border-radius:6px;width:120px;height:12px;margin-block:4px}.demo-server-name>svg{color:var(--success);opacity:0;background:#79d7ad26;border-radius:50%;padding:2px;transition:opacity .3s,scale .4s cubic-bezier(.3,1.6,.5,1);scale:.4}[data-phase=done] .demo-server-name>svg{opacity:1;scale:1}.demo-progress{width:calc(var(--progress,1) * 100%);background:var(--cta-fill);height:2px;transition:width .38s var(--ease-out);display:block}.demo-new{color:#fff;background:#5865f2;border-radius:100px;flex:none;margin-left:auto;padding:1px 6px;font-size:10px;font-weight:700;line-height:16px}.demo-channels{flex:auto;min-height:0;padding:0 8px 12px}.demo-category{white-space:nowrap;align-items:center;gap:4px;margin:10px 0 2px;padding-left:2px;font-size:11px;font-weight:600;display:flex}.demo-category>span{text-overflow:ellipsis;overflow:hidden}.demo-category>svg:last-child{margin-left:auto}.demo-channels li{border-radius:4px;align-items:center;gap:6px;padding:2px 8px;font-size:13.5px;font-weight:500;line-height:19px;display:flex;position:relative}.demo-channels li[data-unread=true]{color:#f2f3f5;font-weight:650}.demo-channels li[data-unread=true]:before{content:"";background:#f2f3f5;border-radius:0 4px 4px 0;width:4px;height:8px;position:absolute;left:-8px}.demo-hash{color:#80848e;flex:none;display:grid;position:relative}.demo-hash>svg+svg{background:#2b2d31;border-radius:50%;padding:1px;position:absolute;top:-2px;right:-3px}.demo-channel-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (prefers-reduced-motion:no-preference){.demo-input>span[data-typing=true]:after{animation:1s step-end infinite demo-caret}.demo-typing>span{animation:1s ease-in-out infinite demo-dot}.demo-skeleton{animation:1.4s linear infinite demo-shimmer}.demo-checklist li:not([data-done=true]) svg{animation:.9s linear infinite demo-spin}.demo-checklist li[data-done=true] svg{animation:.4s cubic-bezier(.3,1.6,.5,1) demo-pop}.hero-demo[data-phase=building]:before{animation:2.4s linear infinite demo-frame}[data-phase=done] .demo-server:after{animation:demo-sweep 1.1s var(--ease-out) .2s both}.demo-typing>span:nth-child(2){animation-delay:.15s}.demo-typing>span:nth-child(3){animation-delay:.3s}[data-phase=building] .demo-bot:before{animation:.5s linear infinite demo-stream}[data-phase=building] .demo-avatar:before{animation:1.2s linear infinite demo-spin}.demo-channels li[data-on=true]{animation:demo-channel .8s var(--ease-out)}.demo-bot img{--companion-lift:-6px;animation:5s ease-in-out infinite companion-float}}@media (max-height:800px) and (min-width:951px){.demo-channels li{line-height:17px}.demo-category{margin-top:6px}}@media (min-width:951px){.hero-demo{grid-template-rows:minmax(0,1fr);max-height:max(260px,100svh - 360px)}}@media (max-width:950px){.hero-demo{grid-template-columns:minmax(0,1fr)}.demo-messages{flex:none}.demo-bot{flex-direction:row;width:auto}.demo-bot:before{display:none}.demo-bot img{width:56px;height:56px}}@media (max-width:600px){.hero-demo{border-radius:20px;padding:12px}}@keyframes demo-frame{to{--demo-angle:1turn}}@keyframes demo-sweep{0%{translate:-100%}to{translate:100%}}@keyframes demo-shimmer{to{background-position:-200% 0}}@keyframes demo-caret{50%{opacity:0}}@keyframes demo-dot{0%,to{opacity:.5;translate:0}50%{opacity:1;translate:0 -4px}}@keyframes demo-stream{to{background-position:14px 0}}@keyframes demo-spin{to{rotate:1turn}}@keyframes demo-channel{0%{color:#fff;background:#4d6bff4d;translate:-10px}}@keyframes demo-pop{0%{scale:.5}}@keyframes companion-float{0%,to{transform:translate(0,0)rotate(-.5deg)}50%{transform:translate3d(0, var(--companion-lift), 0) rotate(.5deg)}}