/* Demo disclosure banner.

   Deliberately shared by all three demo pages, and deliberately the only thing
   they share. The demos must look nothing like each other, but the disclosure
   has to be identical everywhere, because it is the thing that stops a
   fictional business being mistaken for a real one.

   Sticky rather than static so it cannot be scrolled away, and it carries no
   close control, so it cannot be dismissed. */
.demo-banner{
  position:sticky;top:0;z-index:999;
  background:#1c1917;color:#fafaf9;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.78rem;line-height:1.5;
  padding:10px 20px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;
  text-align:center;
  border-bottom:1px solid #44403c;
}
.demo-banner strong{color:#fbbf24;font-weight:700;letter-spacing:.04em}
.demo-banner a{color:#fafaf9;text-decoration:underline;text-underline-offset:3px}
.demo-banner a:hover{color:#fbbf24}
.demo-banner a:focus-visible{outline:2px solid #fbbf24;outline-offset:3px;border-radius:3px}
@media (max-width:520px){
  .demo-banner{font-size:.72rem;padding:8px 14px}
}