/* Example-site strip: same on every example, fixed at the top, subtle.
   Each site adds class "has-demo-bar" on <body> and offsets its own sticky header by var(--demo-h). */
:root{--demo-h:30px}
.demo-bar{position:fixed;top:0;left:0;right:0;height:var(--demo-h);z-index:9999;display:flex;align-items:center;
  justify-content:center;gap:10px;padding:0 12px;background:#111114;color:#C9C9D1;
  font:500 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.01em;white-space:nowrap;overflow:hidden}
.demo-bar a{color:#fff;text-decoration:none;font-weight:600}
.demo-bar a:hover{text-decoration:underline}
.demo-bar .dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#7F77DD,#EF9F27);flex:none}
.demo-bar .hide-sm{display:inline}
@media (max-width:520px){.demo-bar .hide-sm{display:none}}
body.has-demo-bar{padding-top:var(--demo-h)}