/* Every selector is class based so this file can be reused verbatim (with a
   frame prefix) inside the landing page and still render identically. */
.demo-page { margin: 0; background: #fff; color: #1f2430; font: 15px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif; }
.demo-page, .demo-page * { box-sizing: border-box; }
.demo-nav { display: flex; align-items: center; gap: 22px; padding: 14px 26px; border-bottom: 1px solid #e6e9ef; font-size: 14px; }
.demo-brand { font-weight: 700; letter-spacing: .02em; margin-right: 6px; }
.demo-nav a { color: #55607a; text-decoration: none; }
.demo-nav a:hover { color: #3156d5; }
.demo-nav a[aria-current] { color: #1f2430; font-weight: 600; }
.demo-main { max-width: 680px; margin: 0 auto; padding: 26px 26px 34px; }
.demo-article h1 { font-size: 24px; margin: 0 0 12px; }
.demo-article h2, .demo-table h2 { font-size: 17px; margin: 26px 0 8px; }
.demo-article p { margin: 0 0 12px; color: #333c4d; }
.demo-article a, .demo-footer a, .demo-hub a { color: #3156d5; }
.demo-article code { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: #f1f3f8; border-radius: 4px; padding: 1px 5px; }
.demo-article ul { margin: 0 0 16px; padding-left: 20px; color: #333c4d; }
.demo-article li { margin: 4px 0; }
.demo-article button { padding: 7px 16px; border: 0; border-radius: 6px; background: #3156d5; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.demo-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.demo-table caption { text-align: left; color: #6b7488; font-size: 13px; padding-bottom: 6px; }
.demo-table th, .demo-table td { border: 1px solid #e6e9ef; padding: 7px 10px; text-align: left; vertical-align: top; }
.demo-table thead th { background: #f7f8fb; font-weight: 600; }
.demo-table tbody th { font-weight: 600; color: #1f2430; }
.demo-table td { color: #3b4457; }
.demo-footer { max-width: 680px; margin: 0 auto; padding: 16px 26px 30px; border-top: 1px solid #e6e9ef; color: #6b7488; font-size: 13px; }
.demo-footer p, .demo-hub p { margin: 0; }
.demo-hub { max-width: 680px; margin: 0 auto; padding: 26px; }
.demo-hub h1 { font-size: 22px; margin: 0 0 10px; }
.demo-hub ul { padding-left: 20px; }