.demo-showcase{--exhibit-ink:var(--demo-ink,var(--ink,#13221d));--exhibit-muted:var(--demo-muted,var(--muted,#5e6a60));--exhibit-line:var(--demo-line,var(--line,#d1d8cb));border-top:1px solid var(--exhibit-line);padding-block:82px 86px}.demo-showcase.standalone{border:0;padding:0}.showcase-intro{grid-template-columns:1.35fr 1fr;align-items:end;gap:42px;margin-bottom:38px;display:grid}.showcase-intro h2{text-wrap:balance;margin-top:14px;font-size:clamp(32px,4vw,54px);line-height:1.25}.showcase-intro>p,.showcase-summary{color:var(--exhibit-muted);font-size:16px;line-height:1.75}.showcase-intro>p{justify-self:end;max-width:460px}.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 24px;display:grid}.showcase-card{min-width:0}.showcase-card.featured{grid-column:1/-1}.showcase-entry{height:100%;color:var(--exhibit-ink);border:1px solid var(--exhibit-line);border-radius:16px;grid-template-rows:auto 1fr;display:grid;overflow:clip}.showcase-entry:focus-visible{outline:2px solid var(--exhibit-ink);outline-offset:5px}.showcase-preview{--scene:#253631;--light:#728e77;--image-inset:10%;isolation:isolate;aspect-ratio:1.65;background:radial-gradient(ellipse at 78% 85%, var(--light), transparent 72%), var(--scene);position:relative;overflow:hidden}.showcase-preview:before{z-index:-1;content:"";background-image:linear-gradient(90deg,#ffffff13 1px,#0000 1px),linear-gradient(#ffffff13 1px,#0000 1px);background-size:36px 36px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(to top right,#0000 5%,#000 75%);mask-image:linear-gradient(to top right,#0000 5%,#000 75%)}.showcase-ecommerce .showcase-preview{--scene:#a99e8b;--light:#e9d9bc}.showcase-coffee .showcase-preview{--scene:#6d4432;--light:#ca9560}.showcase-accounting .showcase-preview{--scene:#132b33;--light:#658993}.showcase-automation .showcase-preview{--scene:#1c203b;--light:#526c91}:is(.showcase-ecommerce,.showcase-coffee) .showcase-preview:before{background-image:repeating-linear-gradient(128deg,#0000 0 95px,#fff2dc28 96px,#0000 97px 148px);background-size:auto}.showcase-screen{top:var(--image-inset);background:#f2f0e9;border:1px solid #ffffff54;border-radius:9px;width:84%;transition:transform .26s cubic-bezier(.22,.61,.36,1);position:absolute;left:8%;overflow:hidden;box-shadow:0 14px 26px #111a2540,0 40px 80px #0a11264d}.showcase-screen img,.showcase-phone img{width:100%;height:auto;display:block}.showcase-entry:is(:hover,:focus-visible) .showcase-screen{transform:translateY(-5px)scale(1.025)}.showcase-description{flex-direction:column;align-items:flex-start;padding:clamp(20px,2.35vw,32px);display:flex}.showcase-category{color:var(--exhibit-muted);font:600 14px/1.5 var(--sans)}.showcase-description h3{font:400 clamp(24px, 2.3vw, 33px) / 1.25 var(--serif);letter-spacing:-.025em;text-wrap:balance;margin-block:9px 8px}.lang-zh .showcase-description h3{font-family:Songti SC,STSong,"Source Serif 4",serif}.showcase-summary{margin-bottom:18px}.showcase-link{min-height:44px;font:600 15px/1.4 var(--sans);align-items:center;gap:14px;margin-top:auto;display:inline-flex}.showcase-link svg{transition:transform .18s ease-out}.showcase-entry:is(:hover,:focus-visible) .showcase-link{text-underline-offset:5px;text-decoration:underline}.showcase-entry:is(:hover,:focus-visible) .showcase-link svg{transform:translate(3px,-3px)}.featured .showcase-entry{color:#f2f0e9;background:#13221d;border-color:#30483a;grid-template:"copy visual"1fr/minmax(260px,.95fr) 2fr;min-height:clamp(370px,39vw,530px);position:relative}.featured .showcase-preview{aspect-ratio:auto;background:radial-gradient(at 84% 60%,#3f664e 0,#203c30 46%,#13221d 78%);grid-area:visual;align-self:stretch}.featured .showcase-screen{border:4px solid #263e34;border-radius:13px;width:88%;top:14%;left:4%;box-shadow:0 18px 30px #07120d88,0 0 75px #83c99024}.showcase-phone{background:#f2f0e9;border:5px solid #1b3028;border-radius:clamp(12px,1.8vw,22px);width:20%;transition:transform .26s cubic-bezier(.22,.61,.36,1);position:absolute;bottom:7%;right:5%;overflow:hidden;transform:rotate(4deg);box-shadow:-9px 18px 26px #06140f80,0 0 0 1px #c7d3c06b}.featured .showcase-entry:is(:hover,:focus-visible) .showcase-phone{transform:translateY(-3px)rotate(1deg)}.featured .showcase-description{grid-area:copy;align-self:center;padding:36px 0 36px clamp(24px,4vw,60px)}.featured :is(.showcase-category,.showcase-summary){color:#f2f0e9}.featured .showcase-description h3{margin-block:14px 16px;font-size:clamp(30px,3.1vw,46px)}.featured .showcase-link{border:1px solid #f2f0e9;border-radius:5px;padding-inline:15px}.showcase-note{color:var(--exhibit-muted);font:400 14px/1.6 var(--sans);margin-top:25px}@media (max-width:760px){.demo-showcase{padding-block:56px}.showcase-intro,.showcase-grid{grid-template-columns:1fr;gap:20px}.showcase-intro{margin-bottom:28px}.showcase-intro>p{justify-self:start}.showcase-grid{row-gap:24px}.featured .showcase-entry{grid-template:"visual""copy"/1fr;min-height:0}.featured .showcase-preview{aspect-ratio:1.55}.featured .showcase-description{padding:23px}.featured .showcase-screen{top:10%}}@media (prefers-reduced-motion:reduce){.showcase-entry :is(.showcase-screen,.showcase-phone,.showcase-link svg){transition:none}}