/* Shared "this is a demo" chrome for all demo sites. Each site sets --demo-bg / --demo-fg / --demo-link. */
.demo-bar{background:var(--demo-bg,#222);color:var(--demo-fg,#fff);font:500 14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;padding:.55rem 1rem;display:flex;flex-wrap:wrap;gap:.25rem 1rem;justify-content:center;align-items:center;text-align:center}
.demo-bar p{margin:0}
.demo-bar a{color:var(--demo-link,#fff);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.demo-bar a:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.demo-toast{position:fixed;left:50%;bottom:1.25rem;transform:translate(-50%,1rem);opacity:0;max-width:min(92vw,30rem);background:#1a1a1a;color:#fff;font:500 15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;padding:.8rem 1.1rem;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.25);transition:opacity .2s,transform .2s;z-index:1000;pointer-events:none}
.demo-toast.show{opacity:1;transform:translate(-50%,0)}
.demo-footer-note{font-size:.875rem;opacity:.8}
.demo-footer-note a{color:inherit}
@media (prefers-reduced-motion:reduce){.demo-toast{transition:none}}
[hidden] { display: none !important; }