.demos{padding-top:130px;padding-bottom:90px}.demo-intro{max-width:810px;margin-bottom:48px}
.demo-intro h1{font-size:clamp(42px,6vw,72px);line-height:1.04;letter-spacing:-.055em;margin:14px 0 24px}
.demo-intro p{max-width:660px;font-size:22px;color:var(--muted)}.demo-note{font-size:13px;color:var(--muted)}
.demo-tools{margin-bottom:28px}.demo-tools label{display:block;font-weight:650;margin-bottom:10px}
#demo-search{width:100%;max-width:600px;padding:16px 20px;border:1px solid var(--line);border-radius:18px;background:var(--surface-solid);color:var(--text);font:inherit;appearance:none}
#demo-search:focus-visible,.demo-filters button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.demo-filters{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}.demo-filters button{font:inherit;font-size:14px;border:1px solid var(--line);border-radius:999px;padding:10px 16px;background:var(--surface-solid);color:var(--text);cursor:pointer}
.demo-filters button[aria-pressed="true"]{background:var(--accent);color:white;border-color:var(--accent)}.demo-count{font-size:14px;color:var(--muted);margin:20px 0 0}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px}.demo-card{min-width:0;border:1px solid var(--line);border-radius:24px;background:var(--surface-solid);overflow:hidden}
.demo-card[hidden],.demo-empty[hidden]{display:none}.demo-card video{display:block;width:100%;aspect-ratio:9/16;background:#0b1420;object-fit:contain}
.demo-caption{padding:20px}.demo-caption h2{font-size:18px;line-height:1.35;letter-spacing:-.025em;margin:10px 0 0}.demo-caption span{font-size:12px;color:var(--muted)}
.demo-empty{padding:45px 0;color:var(--muted)}
@media(max-width:800px){.demos{padding-top:105px}.demo-intro p{font-size:19px}.demo-filters{flex-wrap:nowrap;overflow-x:auto;padding:3px 3px 12px;margin-left:-3px}.demo-filters button{white-space:nowrap;flex-shrink:0}.demo-grid{gap:20px}.demo-intro{margin-bottom:36px}}
#demo-more{display:block;margin:32px auto 0;padding:12px 24px;border:1px solid var(--line);border-radius:999px;background:var(--surface-solid);color:var(--text);font:inherit;cursor:pointer}
#demo-more[hidden]{display:none}
/* Spacious controls and legible recordings, shared by the two languages. */
.demos{padding-top:132px;padding-bottom:80px}.demo-intro{max-width:820px;margin-bottom:38px}.demo-intro .eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase}.demo-intro h1{font-size:clamp(42px,5vw,64px);line-height:1.08}.demo-intro p{font-size:20px;line-height:1.6}.demo-tools{padding:28px 30px;border:1px solid var(--line);border-radius:26px;background:#fff;margin-bottom:30px}.demo-tools label{font-size:16px}#demo-search{max-width:100%;border-radius:14px;background:#f6f7fa;font-size:16px;min-height:52px}.demo-filters{margin-top:18px;gap:7px}.demo-filters button{font-size:13px;min-height:44px;padding:10px 16px;background:#f8f9fc}.demo-filters button[aria-pressed="true"]{background:var(--text);border-color:var(--text)}#demo-languages{margin-top:20px}#demo-languages button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}.demo-count{margin-top:20px}.demo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.demo-card{border-radius:24px;box-shadow:0 8px 28px #202c4008}.demo-card video{aspect-ratio:1206/2622;background:#f0f1f5;max-height:620px}.demo-caption{padding:22px 24px}.demo-caption h2{font-size:19px;line-height:1.4}.demo-caption span{font-size:12px}.demo-card:focus-within{border-color:#9cbee9}#demo-more{min-height:48px;font-size:14px;background:#fff;padding-inline:28px}
@media(max-width:1000px){.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.demos{padding-top:105px}.demo-intro h1{font-size:40px}.demo-intro p{font-size:18px}.demo-tools{padding:22px 18px;border-radius:22px}.demo-tools label{font-size:15px}.demo-filters{flex-wrap:wrap;overflow:visible;padding:0;margin-left:0;gap:6px}.demo-filters button{font-size:12px;padding-inline:13px}.demo-grid{grid-template-columns:1fr;max-width:430px;margin:auto;gap:24px}.demo-card video{max-height:none}.demo-caption{padding:20px 22px}.demo-intro{margin-bottom:28px}}