.article-demo{margin:34px 0 38px;font-size:1rem;line-height:1.5}.article-demo-head{flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:12px;display:flex}.article-demo-eyebrow{font-family:var(--font-brand);letter-spacing:.08em;text-transform:uppercase;color:#6d3cf5;font-size:11px;font-weight:700}.article-demo-title{font-family:var(--font-brand);color:var(--text);font-size:1.05rem;font-weight:700}.article-demo-how{color:var(--muted);flex-basis:100%;font-size:14px}.article-demo-window{background:var(--bg);border:1px solid var(--border);border-radius:12px;max-height:min(720px,78vh);padding:20px;position:relative;overflow:auto;box-shadow:inset 0 -18px 18px -18px #0000001f}.article-demo-window:focus-visible{outline-offset:2px;outline:2px solid #6d3cf5}.article-demo-cover{aspect-ratio:16/10;object-fit:cover;cursor:default;border-radius:8px;width:100%;display:block}.article-demo .demo-loading{min-height:40vh;color:var(--muted);place-items:center;font-size:.85rem;display:grid}@media (min-width:1000px){.article-demo{--demo-w:min(1040px, calc(100vw - 6rem));width:var(--demo-w);margin-left:calc((100% - var(--demo-w)) / 2)}}@media (max-width:780px){.article-demo{--demo-gutter:clamp(1.25rem, 4vw, 3.5rem);margin-inline:calc(-1 * var(--demo-gutter));width:calc(100% + var(--demo-gutter) * 2)}.article-demo-head{margin-inline:var(--demo-gutter)}.article-demo-window{max-height:80vh;padding:12px}}