.demo-guide { margin-bottom: 22px; border-color: var(--accent); }
.demo-guide h2 { margin: 0 0 8px; font-size: 20px; }
.demo-guide p { line-height: 1.6; }
.demo-example-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.demo-example-buttons button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.demo-example { border-left: 3px solid var(--accent); padding: 4px 18px; margin: 18px 0; }
.demo-example h3 { margin: 8px 0; font-size: 17px; }
.demo-example-label { font-size: 12px; font-weight: 600; color: var(--accent); }
.demo-live { padding-top: 14px; border-top: 1px solid var(--line); }
.demo-live p { font-size: 13px; }
@media(max-width:600px) { .demo-example-buttons button { flex: 1 1 42%; } }