.demo-page,.guide-page{--demo-ink:#171916;--demo-muted:#5a5e56;--demo-soft:#f5f5f2;color:var(--demo-ink);background:#fff;min-height:100dvh;padding:32px 24px 100px;font-family:Manrope,sans-serif}.demo-container{max-width:760px;margin:auto}.demo-page a,.guide-page a{color:inherit;text-underline-offset:4px}.demo-page h1,.guide-page h1{letter-spacing:-.025em;margin:48px 0 20px;font-size:clamp(32px,5vw,48px);font-weight:500;line-height:1.2}.demo-page h2,.guide-page h2{margin:32px 0 12px;font-size:24px;font-weight:500;line-height:1.35}.demo-page p,.guide-page p,.guide-page li{font-size:16px;line-height:1.75}.demo-disclosure{color:var(--demo-muted);border-bottom:1px solid #dedfd9;padding-bottom:24px}.demo-messages{gap:20px;margin:32px 0;display:grid}.demo-messages p{margin:0}.demo-owner{color:#fff;background:#171916;border-radius:14px 14px 4px;justify-self:end;max-width:90%;padding:16px 20px}.demo-assistant{border-left:1px solid #dedfd9;padding:4px 0 4px 16px}.demo-draft{background:var(--demo-soft);border-radius:6px;padding:24px}.demo-draft h2{margin-top:12px}.demo-draft span,.demo-footnote{color:var(--demo-muted)}.demo-draft p+p{margin-top:12px}.demo-success{color:#246b4e;background:#edf7f0;border-radius:4px;gap:12px;padding:20px;display:flex}.demo-success svg{flex-shrink:0;margin-top:4px}.demo-actions{flex-wrap:wrap;gap:12px;display:flex}.demo-actions button,.demo-actions>a{color:#171916;min-height:50px;font:inherit;cursor:pointer;background:#f5d547;border:1px solid #171916;border-radius:4px;justify-content:center;align-items:center;gap:12px;padding:14px 20px;font-weight:600;text-decoration:none;display:flex}.demo-actions .demo-secondary{background:#fff}.demo-actions button:hover,.demo-actions>a:hover{background:#fff5c9}.demo-actions button:focus-visible,.demo-actions>a:focus-visible{outline-offset:4px;outline:3px solid #171916}.demo-page .demo-footnote{margin-top:24px;font-size:14px}.guide-page .demo-container{max-width:70ch}.guide-page li+li{margin-top:8px}.guide-page nav{flex-wrap:wrap;gap:24px;display:flex}@media (max-width:500px){.demo-page,.guide-page{padding-inline:20px}.demo-actions{flex-direction:column}.demo-owner{max-width:96%}}
