[data-showcase]{display:grid;justify-items:center;align-content:start;gap:8px}
.showcase{--bg:#fff;--fg:#16211C;--mut:#5E6B65;--me:#1D6B4F;--meFg:#fff;--ai:#F1F3F2;--aiFg:#16211C;--card:#fff;--cardLine:#D6DED9;--acc:#1D6B4F;--icon:#1D6B4F;
position:relative;width:100%;max-width:370px;height:560px;border-radius:38px;border:9px solid #121a16;background:var(--bg);color:var(--fg);padding:12px 14px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(22,33,28,.55);transition:background .4s;cursor:pointer}
.t-muse{--me:#0866FF;--ai:#F0F2F5;--acc:#0866FF;--icon:#E9ECF1}.t-muse .appicon{border-radius:50%;overflow:hidden}.appicon img{width:100%;height:100%;display:block}
.t-gpt{--bg:#212121;--fg:#ECECEC;--mut:#A3A3A3;--me:#303030;--meFg:#ECECEC;--ai:transparent;--aiFg:#ECECEC;--card:#2B2B2B;--cardLine:#3A3A3A;--acc:#10A37F;--icon:#0D0D0D}
.t-claw{--bg:#FFF6F1;--me:#E8412C;--ai:#fff;--card:#fff;--cardLine:#F2D6CB;--acc:#E8412C;--icon:#FFE1D6}
.t-more{--bg:linear-gradient(165deg,#F4F7F5,#DCEEE5)}
.stories{display:flex;gap:5px;margin:0 2px}.seg{flex:1;min-width:0;height:16px;padding:6px 0;border:0;background:none;box-shadow:none;cursor:pointer;border-radius:0}
.seg i{display:block;height:4px;border-radius:4px;background:linear-gradient(var(--fg),var(--fg)) 0 0/0% 100% no-repeat,color-mix(in srgb,var(--fg) 22%,transparent)}
.seg.done i{background-size:100% 100%}.seg.now i{animation:fill linear both}@keyframes fill{to{background-size:100% 100%}}
.apphead{display:flex;align-items:center;gap:10px;padding:2px 2px 8px;border-bottom:1px solid color-mix(in srgb,var(--fg) 12%,transparent)}
.appicon{width:38px;height:38px;border-radius:11px;background:var(--icon);color:#fff;display:grid;place-items:center;font-size:21px;line-height:1;flex:none}.t-gpt .appicon{border:1px solid #3A3A3A}
.apphead b{display:block;font-size:1rem}.apphead div span{font-size:.78rem;color:var(--mut)}.apphead div span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);margin-right:6px;vertical-align:1px}
.thread{flex:1;display:flex;flex-direction:column;gap:8px;min-height:0}
.showcase .msg{padding:9px 13px;border-radius:18px;max-width:86%;font-size:.93rem;line-height:1.35}
.showcase .msg.me{align-self:flex-end;background:var(--me);color:var(--meFg);border-bottom-right-radius:5px}
.showcase .msg.ai{align-self:flex-start;background:var(--ai);color:var(--aiFg);border-bottom-left-radius:5px}.t-gpt .msg.ai{padding-inline:2px;max-width:94%}.t-claw .msg.ai{border:1px solid var(--cardLine)}
.showcase .biz b{font-family:var(--display);font-size:1.05rem}.showcase .biz{margin-top:8px;background:var(--card);border:1px solid var(--cardLine);color:var(--fg);border-radius:12px;padding:10px 12px;display:grid;gap:2px}.biz .via{font-size:.74rem;font-weight:700;color:#1D6B4F}.t-gpt .biz .via{color:#4FC08F}
.showcase .payout{align-self:center;margin-top:auto;font-size:.9rem;background:#DCEEE5;color:#1D6B4F;padding:8px 14px;border-radius:999px;box-shadow:0 8px 20px -12px rgba(22,33,28,.5)}.t-gpt .payout{background:#16342A;color:#7FE0B5}
.typing{align-self:flex-start;display:flex;gap:5px;background:var(--ai);border-radius:16px;padding:10px 14px;overflow:hidden}.t-gpt .typing{background:#2B2B2B}
.t-grok{--bg:#000;--fg:#F5F5F5;--mut:#9B9B9B;--me:#262626;--meFg:#F5F5F5;--ai:transparent;--aiFg:#F5F5F5;--card:#141414;--cardLine:#2E2E2E;--acc:#F5F5F5;--icon:#000}
.t-grok .appicon{border:1px solid #333}.t-grok .msg.ai{padding-inline:2px;max-width:94%}.t-grok .biz .via{color:#4FC08F}.t-grok .payout{background:#16342A;color:#7FE0B5}.t-grok .typing{background:#1A1A1A}.typing i{width:7px;height:7px;border-radius:50%;background:var(--mut);animation:blink 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes typing{0%{opacity:0;max-height:0;padding-block:0}15%,85%{opacity:1;max-height:40px;padding-block:10px}100%{opacity:0;max-height:0;padding-block:0;margin-top:-8px}}
.showcase .s1{animation:rise .35s .1s both}.showcase .typing.s2{animation:typing .75s .45s both}.showcase .s3{animation:rise .35s 1.2s both}.showcase .s4{animation:rise .3s 2s both}.showcase .s5{animation:rise .3s 2.5s both}.showcase .s6{animation:rise .35s 2.9s both}
.more{flex:1;display:grid;align-content:center;justify-items:center;text-align:center;gap:12px;padding:0 6px}.more .bell{font-size:2.4rem;animation:rise .35s .05s both}.more h3{font:800 2rem var(--display);margin:0;animation:rise .35s .15s both}.more p{margin:0;color:#5E6B65;animation:rise .35s .25s both}
.more .apps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:6px 0}.more .app{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #D6DED9;border-radius:999px;padding:7px 12px;font-weight:600;font-size:.88rem}.more .app i{width:10px;height:10px;border-radius:50%}
.more .app.s1{animation:rise .3s .4s both}.more .app.s2{animation:rise .3s .5s both}.more .app.s3{animation:rise .3s .6s both}.more .app.s4{animation:rise .3s .7s both}.more .app.s5{animation:rise .3s .8s both}.more .app.s6{animation:rise .3s .9s both}
.more .one{color:#16211C;font-size:1.1rem;animation:rise .35s 1.1s both}.illo{margin:0;text-align:center;font-size:.72rem;color:var(--muted)}
@media (max-width:480px){.showcase{height:540px;max-width:350px}}
.showcase.static{height:auto;cursor:default}.showcase.static .payout{margin-top:6px}
@media (prefers-color-scheme:dark){.showcase{box-shadow:0 0 0 1px #34413B,0 30px 60px -28px rgba(0,0,0,.7)}}
@media (prefers-reduced-motion:reduce){.showcase *{animation:none!important}.showcase .typing{display:none}.seg.now i{background-size:100% 100%}}.homedemo{display:grid;justify-items:center}footer{margin-top:32vh}