.demo-showcase{position:relative;overflow:clip;padding:80px 56px 58px;background:#fff;color:#0d204d;isolation:isolate}.demo-showcase::before{content:'';position:absolute;z-index:-1;left:-15%;top:42%;width:130%;height:55%;border-radius:50%;background:linear-gradient(110deg,#e1f4ff,#ecf7ff 60%,#e0efff);transform:rotate(-3deg);pointer-events:none}.demo-showcase::after{content:'';position:absolute;top:-240px;right:-180px;width:700px;height:450px;z-index:-1;border-radius:50%;background:linear-gradient(130deg,#f5f5ff,#ece9ff);pointer-events:none}.ds-inner{max-width:1320px;margin:auto;position:relative}.ds-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:35px;margin-bottom:14px}.ds-title{font-size:54px;line-height:1.25;letter-spacing:-.045em;margin:0;font-weight:800}.ds-title span{display:inline}.ds-heading p{font-size:21px;color:#586e99;margin-top:19px;line-height:1.75}.ds-cta{border:1px solid #0877ff;background:#fff8;color:#0877ff;border-radius:40px;padding:15px 25px;white-space:nowrap;text-decoration:none;font-size:18px;font-weight:700;display:flex;align-items:center;gap:18px}.ds-cta svg{transform:rotate(-45deg)}.ds-cta svg,.ds-open svg,.ds-invite svg{width:22px;height:22px;flex-shrink:0}.ds-cta:hover{background:#edf6ff}.ds-filters{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin:0 0 33px}.ds-filters button{font:inherit;font-size:14px;font-weight:700;border:1px solid #a4bcff;border-radius:30px;background:#fff8;color:#0877ff;padding:9px 20px;cursor:pointer;transition:background .2s,color .2s}.ds-filters button[aria-pressed=true]{background:#0877ff;color:white;border-color:#0877ff}.ds-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:25px 22px}.ds-card{display:block;text-decoration:none;color:inherit;min-width:0;position:relative;--ds-rx:0deg;--ds-ry:0deg;--ds-x:50%;--ds-y:50%;--ds-ax:0px;--ds-ay:0px}.ds-card[hidden]{display:none}.ds-depth{perspective:850px}.ds-shot{position:relative;border-radius:12px;background:white;border:1px solid white;box-shadow:0 9px 23px #7dafe52e;overflow:hidden;transform:translateY(0) rotateX(var(--ds-rx)) rotateY(var(--ds-ry));transition:transform .5s cubic-bezier(.2,.7,.25,1),box-shadow .4s;transform-origin:center 65%}.ds-chrome{display:flex;align-items:center;gap:4px;height:20px;padding:0 8px;background:linear-gradient(100deg,#fff,#f0f5fc);font:400 6px/1 Arial,sans-serif;color:#6781a8;position:relative;user-select:none}.ds-chrome i{width:4px;height:4px;border-radius:50%;background:#fb8b83}.ds-chrome i:nth-child(2){background:#ffd775}.ds-chrome i:nth-child(3){background:#78d0a0}.ds-chrome>span{position:absolute;left:27%;right:14%;text-align:center;border-radius:10px;background:#eaf0f9;padding:3px}.ds-shot img{width:100%;height:auto;aspect-ratio:480/520;display:block;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.25,1)}.ds-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--ds-x) var(--ds-y),#fff8 0%,#b4edff30 18%,transparent 58%);mix-blend-mode:screen;transition:opacity .35s}.ds-shot::after{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid #ffffffa8;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 2px #ffffff40;transition:opacity .3s}.ds-invite{position:absolute;left:50%;bottom:14px;display:flex;gap:10px;align-items:center;white-space:nowrap;border-radius:30px;padding:9px 14px;background:#0877ff;color:white;box-shadow:0 5px 14px #0877ff30;font-size:12px;font-weight:700;opacity:0;transform:translate(-50%,14px) scale(.92);transition:transform .4s cubic-bezier(.18,.8,.2,1),opacity .3s;pointer-events:none}.ds-invite svg{width:16px;height:16px;transform:rotate(-40deg)}.ds-caption{display:flex;justify-content:center;align-items:center;gap:7px;text-align:center;padding:15px 0 0}.ds-caption h3{font-size:16px;font-weight:800;line-height:1.4;margin:0}.ds-caption p{font-size:13px;line-height:1.6;color:#587099;margin:4px 0 0}.ds-open{display:none}.ds-card:focus-visible,.ds-cta:focus-visible,.ds-filters button:focus-visible{outline:3px solid #0877ff;outline-offset:5px;border-radius:12px}.ds-card:focus-visible .ds-invite{opacity:1;transform:translate(-50%,0) scale(1)}.ds-note{margin:37px 0 0;text-align:center;color:#0877ff;font:400 23px/1.7 DragieSpeech,cursive}.ds-empty{text-align:center;color:#647098}
@media(hover:hover) and (pointer:fine){.ds-card:hover{z-index:2}.ds-card:hover .ds-shot{transform:translateY(-12px) rotateX(var(--ds-rx)) rotateY(var(--ds-ry));box-shadow:0 24px 30px -12px #447cc050,0 0 0 1px #a8cdff}.ds-card:hover .ds-shot img{transform:scale(1.025)}.ds-card:hover .ds-glare,.ds-card:hover .ds-shot::after{opacity:1}.ds-card:hover .ds-invite{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(min-width:701px) and (max-width:1100px){.demo-showcase{padding:65px 32px 50px}.ds-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px}.ds-title{font-size:43px}.ds-heading p{font-size:18px}.ds-cta{font-size:14px;padding:13px 18px;gap:12px}.ds-filters{margin-top:25px}.ds-caption h3{font-size:15px}}
@media(max-width:700px){.demo-showcase{padding:57px 24px 48px}.ds-heading{display:block;margin:0}.ds-title{font-size:35px;line-height:1.3}.ds-title span{display:block}.ds-heading p{font-size:17px;line-height:1.85;margin-top:18px}.ds-cta{font-size:15px;margin-top:24px;width:fit-content;padding:13px 21px;gap:15px}.ds-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 14px}.ds-shot{border-radius:9px}.ds-chrome{height:17px;padding:0 6px;gap:3px}.ds-chrome i{width:3px;height:3px}.ds-chrome>span{font-size:4px;padding:2px}.ds-caption{padding-top:12px}.ds-caption h3{font-size:12px;line-height:1.5}.ds-caption p{font-size:11px;line-height:1.7}.ds-filters{justify-content:flex-start;margin:27px 0 28px;gap:7px}.ds-filters button{font-size:12px;padding:8px 14px}.ds-invite{font-size:10px;padding:7px 10px;gap:6px;bottom:10px}.ds-invite svg{width:13px;height:13px}.ds-note{font-size:19px;line-height:1.8;margin-top:29px}.demo-showcase::before{top:44%;height:50%;left:-35%;width:170%}.demo-showcase::after{width:400px;height:300px;top:-180px;right:-180px}}
@media(prefers-reduced-motion:reduce){.ds-shot,.ds-shot img,.ds-glare,.ds-invite,.ds-filters button{transition:none}.ds-card:hover .ds-shot,.ds-card:hover .ds-shot img{transform:none}}
@media(min-width:1101px){.demo-showcase{padding-top:64px}.ds-heading{margin-bottom:36px}.ds-filters{position:absolute;right:0;top:88px;margin:0}}