.stats-design-showcase{--sd-ink:#1b2534;--sd-muted:#63758d;--sd-border:#dfe7f4;--sd-surface:#fff;color:var(--sd-ink);margin-block:88px;scroll-margin-top:110px;min-width:0}
.stats-design-heading{max-width:680px;margin:0 auto 30px;text-align:center}.stats-design-heading h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.045em;line-height:1.1;margin:18px 0}.stats-design-heading p{color:var(--sd-muted);font-size:17px;line-height:1.75;margin:0}
.stats-design-toolbar{display:flex;align-items:center;gap:18px;margin:0 0 18px;min-width:0}.stats-design-options{display:flex;flex-wrap:wrap;gap:7px;flex:1}.stats-design-options button,.stats-design-appearance button{appearance:none;border:1px solid var(--sd-border);background:var(--sd-surface);color:var(--sd-ink);border-radius:12px;cursor:pointer;padding:10px 13px;font:inherit;font-size:12px;line-height:1.1;transition:border-color .18s,background .18s,box-shadow .18s}
.stats-design-options button span{font-size:9px;color:var(--sd-muted);margin-inline-end:7px;font-variant-numeric:tabular-nums}.stats-design-options button[aria-pressed=true],.stats-design-appearance button[aria-pressed=true]{border-color:#2879ff;box-shadow:inset 0 0 0 1px #2879ff;background:#edf4ff;color:#1460d1}.stats-design-options button:focus-visible,.stats-design-appearance button:focus-visible,.stats-design-preview a:focus-visible{outline:3px solid #4094ff;outline-offset:4px}.stats-design-appearance{display:flex;gap:6px;align-self:flex-start}.stats-design-appearance button{font-size:19px;padding:9px 12px}
.stats-design-preview{margin:0;border:1px solid var(--sd-border);border-radius:28px;overflow:hidden;background:var(--sd-surface);box-shadow:0 18px 60px #3f5d8910}.stats-design-preview>a{display:block;overflow:hidden;cursor:zoom-in;aspect-ratio:6/5}.stats-design-preview img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:var(--sd-surface)}.stats-design-preview[data-appearance=dark]>a{background:#202020}.stats-design-preview img.is-changing{opacity:.45;transform:translateY(4px)}.stats-design-preview img{transition:opacity .16s,transform .2s}.stats-design-preview figcaption{display:flex;gap:20px;align-items:center;padding:20px 25px;border-top:1px solid var(--sd-border);font-size:12px;color:var(--sd-muted);line-height:1.6}.stats-design-preview figcaption strong{font-size:16px;color:var(--sd-ink)}.stats-design-preview figcaption span{flex:1}.stats-design-preview figcaption a{white-space:nowrap;color:#2879ff;text-decoration:none}.stats-design-included{color:var(--sd-muted);font-size:12px;text-align:center;margin:15px 0 0}.stats-design-home{padding-block:1px}.product-page .stats-design-showcase{margin-block:75px}
@media(prefers-color-scheme:dark){.product-page .stats-design-showcase{--sd-ink:#e8edf7;--sd-muted:#a2b1c9;--sd-border:#354050;--sd-surface:#1e242c}.product-page .stats-design-options button[aria-pressed=true],.product-page .stats-design-appearance button[aria-pressed=true]{background:#203859;color:#9bc1ff}}
@media(max-width:700px){.stats-design-showcase{margin-block:54px}.stats-design-toolbar{flex-wrap:wrap;gap:12px}.stats-design-options{flex-basis:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.stats-design-options button{padding:10px 3px;font-size:10px;overflow-wrap:anywhere}.stats-design-options button span{display:block;margin:0 0 5px}.stats-design-appearance{margin-inline-start:auto}.stats-design-heading p{font-size:15px}.stats-design-preview{border-radius:18px}.stats-design-preview figcaption{padding:15px;display:grid;grid-template-columns:auto 1fr;gap:8px 13px}.stats-design-preview figcaption span{grid-column:1/-1;grid-row:2}.stats-design-preview figcaption a{justify-self:end;font-size:10px}.stats-design-preview img{max-height:none}}
@media(prefers-reduced-motion:reduce){.stats-design-showcase *{transition:none!important;animation:none!important}}