.demo-page{width:min(980px,calc(100% - 48px));margin:0 auto;padding:50px 0 90px}
.demo-intro{max-width:720px;margin:0 auto 47px;text-align:center}
.demo-intro h1{font:400 clamp(42px,5.7vw,68px)/1.13 var(--serif);letter-spacing:-1.8px;margin:0 0 22px}
.demo-intro .lede{margin:0 auto}
.demo-experience{background:#f6f9fbd9;border-radius:25px;padding:32px}
.demo-layout{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);gap:27px;align-items:start}
.demo-samples{display:grid;gap:10px}
.demo-prompt{font-size:15px;font-weight:600;margin:0 0 7px}
.demo-samples button{display:grid;gap:5px;text-align:left;width:100%;border:0;border-radius:12px;background:#e7f0f5;padding:17px 19px;transition:background .18s,transform .18s}
.demo-samples button:hover{background:#dcebf4;transform:translateX(2px)}
.demo-samples button[aria-pressed="true"]{background:#d4e6f1;box-shadow:inset 4px 0 var(--blue)}
.demo-samples button strong{font-size:17px;font-weight:500;line-height:1.35}
.demo-samples button small{font-size:13px;line-height:1.5;color:var(--muted)}
.demo-answer{min-width:0;background:#fff;border-radius:17px;padding:30px 32px;box-shadow:0 12px 36px #303c4708}
.demo-kicker{font-size:11px;letter-spacing:1.1px;color:var(--blue)}
.demo-answer blockquote{font:400 22px/1.5 var(--serif);margin:10px 0 31px}
.demo-answer h2{font:400 31px/1.25 var(--serif);margin:10px 0 12px}
.demo-answer>p:not(.demo-kicker):not(.sr-only){font-size:16px;line-height:1.75;color:var(--muted)}
.demo-person{background:#e9f2f7;border-radius:10px;padding:16px 19px;margin-top:25px}
.demo-person span{display:block;font-size:12px;font-weight:600;color:var(--blue);margin-bottom:5px}
.demo-person p{font-size:15px;line-height:1.65;margin:0}
.demo-noscript,.demo-note{font-size:13px;line-height:1.75;color:var(--muted)}
.demo-noscript{margin:18px 0 0}
.demo-note{max-width:700px;margin:22px auto 0;text-align:center}
.demo-outro{max-width:720px;margin:69px auto 0;text-align:center}
.demo-outro h2{font:400 38px/1.25 var(--serif);margin-bottom:17px}
.demo-outro p{font-size:17px;line-height:1.8;color:var(--muted)}
.demo-next{display:flex;justify-content:center;flex-wrap:wrap;gap:9px 30px;margin-top:21px}
.demo-next a{display:inline-flex;align-items:center;gap:13px;min-height:44px;color:var(--blue);text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.demo-layout{grid-template-columns:1fr}.demo-samples{grid-template-columns:repeat(3,minmax(0,1fr))}.demo-prompt{grid-column:1/-1}}
@media(max-width:600px){.demo-page{width:calc(100% - 40px);padding:23px 0 65px}.demo-intro{margin-bottom:33px}.demo-intro h1{font-size:clamp(38px,11vw,50px);letter-spacing:-1.1px}.demo-intro .lede{font-size:18px}.demo-experience{padding:21px 18px;border-radius:19px}.demo-layout{gap:19px}.demo-samples{grid-template-columns:1fr;gap:8px}.demo-samples button{padding:13px 16px;min-height:0}.demo-samples button strong{font-size:16px}.demo-samples button small{font-size:13px}.demo-answer{padding:25px 21px}.demo-answer blockquote{font-size:21px}.demo-answer h2{font-size:28px}.demo-outro{margin-top:50px}.demo-outro h2{font-size:32px}.demo-outro p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.demo-samples button{transition:none}}