/* DOM-built feature examples share the site's existing chat, card and browser illustration styles. */
.feature-demo { min-width: 0; scroll-margin-top: 100px; }
.feature-demo > .fp-demo, .feature-demo > .ft-frame { width: 100%; box-sizing: border-box; }
.feature-demo .fp-demo { margin: 0; }
.feature-demo-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.feature-demo-controls[hidden] { display: none; }
.feature-demo-controls button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 var(--fs-sm)/1.3 var(--body); cursor: pointer; }
.feature-demo-controls button:hover { border-color: var(--primary); color: var(--primary); }
.feature-demo-controls button:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.feature-demo-controls button:disabled { opacity: .45; cursor: default; }
.feature-demo.is-demo-ready [data-demo-part] { transition: opacity 240ms ease, transform 240ms ease; }
.feature-demo.is-demo-ready [data-demo-part]:not(.is-demo-visible) { visibility: hidden; opacity: 0; transform: translateY(6px); pointer-events: none; }
.feature-demo.is-demo-ready .is-demo-visible { visibility: visible; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .feature-demo.is-demo-ready [data-demo-part] { transition: none; transform: none; } }
/* A link and note under an example (run-by-chat's "Open the result" to the live demo), centred under the picture. */
.feature-demo .ft-see-more { display: grid; gap: 8px; justify-items: center; margin: 16px 0 0; text-align: center; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }