.services li{position:relative}
.services strong,.services span{position:relative;z-index:1}
.demo{display:flex;align-items:flex-end;height:96px;margin-top:auto;padding-top:var(--s3);pointer-events:none}
.demo--s{height:64px}
.demo--m{height:96px}
.demo--l{height:160px}
.demo--l svg{width:250px;height:133px}
.demo--full{position:absolute;inset:0;height:auto;margin:0;padding:0;z-index:0;border-radius:inherit;overflow:hidden;justify-content:center}
.demo svg{width:168px;height:90px;overflow:visible;display:block}
.demo .df{stroke-dasharray:1;stroke-dashoffset:0}
.demo .dw{transform-box:fill-box;transform-origin:0 50%}
.demo.on .df{animation:dfIn .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*.1s)}
.demo.on .dw{animation:dwIn .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*.1s)}
@keyframes dfIn{from{stroke-dashoffset:1}}
@keyframes dwIn{from{transform:scaleX(0);opacity:0}}
.demo--chat{display:grid;grid-template-rows:28px 28px;gap:6px;align-content:end;align-items:stretch;width:min(100%,280px)}
.demo--chat .b{font:500 14px/1 var(--font-body,system-ui,sans-serif);padding:0 14px;height:28px;border-radius:15px;display:flex;align-items:center;white-space:nowrap;width:fit-content;max-width:100%;color:#0D0E13}
.demo--chat .b1{background:#fff;grid-row:1}
.demo--chat .b2,.demo--chat .b2d{grid-row:2;grid-column:1;justify-self:end;background:#5AC494}
.demo--chat .b2d{opacity:0}
.dots i{display:inline-block;width:5px;height:5px;margin:0 2px;border-radius:50%;background:#0D0E13;opacity:.5}
.demo.on .b1{animation:bIn .45s cubic-bezier(.22,1,.36,1) both}
.demo.on .b2d{animation:bDots 1.1s linear .8s both}
.demo.on .b2{animation:bIn .45s cubic-bezier(.22,1,.36,1) 1.9s both}
.demo.on .dots i{animation:dot .5s ease-in-out infinite alternate}
.demo.on .dots i:nth-child(2){animation-delay:.12s}
.demo.on .dots i:nth-child(3){animation-delay:.24s}
@keyframes bIn{from{opacity:0;transform:translateY(6px) scale(.96)}}
@keyframes bDots{0%{opacity:0}12%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes dot{to{opacity:1;transform:translateY(-2px)}}
.demo--cards{display:block;position:relative;width:190px;height:88px}
.demo--cards.demo--s,.demo--cards.demo--m,.demo--cards.demo--l{height:88px}
.pc{position:absolute;left:69px;top:6px;width:52px;height:74px;border-radius:6px;background:#fff;border:1px solid #D9DCE2;box-shadow:0 3px 8px rgba(13,14,19,.14);transform-origin:50% 100%}
.c1{transform:translateX(-56px) rotate(-14deg);background:linear-gradient(#5AC494,#5AC494) left 6px top 6px/calc(100% - 12px) 34% no-repeat,linear-gradient(#C9CCD3,#C9CCD3) left 6px top 50px/calc(100% - 12px) 4px no-repeat,linear-gradient(#C9CCD3,#C9CCD3) left 6px top 59px/60% 4px no-repeat,#fff}
.c2{background:radial-gradient(circle at 16px 15px,#0D0E13 7px,transparent 7.5px),linear-gradient(#C9CCD3,#C9CCD3) left 6px top 36px/calc(100% - 12px) 4px no-repeat,linear-gradient(#C9CCD3,#C9CCD3) left 6px top 45px/calc(100% - 12px) 4px no-repeat,linear-gradient(#C9CCD3,#C9CCD3) left 6px top 54px/70% 4px no-repeat,#fff}
.c3{transform:translateX(56px) rotate(14deg);background:#0D0E13;border-color:#0D0E13}
.c3::after{content:'';position:absolute;left:19px;top:26px;border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.demo.on .pc{animation:fan .7s cubic-bezier(.22,1,.36,1) both}
.demo.on .c1{animation-delay:.15s}
.demo.on .c3{animation-delay:.3s}
@keyframes fan{from{transform:none}}
/* v4: whole-page layer (CSDemos.page) and style variants (.demo--st-NAME) */
.demo-page{position:fixed;inset:0;z-index:-1;display:flex;align-items:center;justify-content:center;opacity:.14;pointer-events:none;overflow:hidden}
.demo-page .demo{margin:0;padding:0;transform:scale(var(--ps,2.4))}
html.has-page-demo{background:var(--paper,#fff)}
html.has-page-demo body{background:transparent}
.demo--chat.demo--st-night .b1{background:#0D0E13;color:#fff}