:root { --demo-bar-h: 40px; }

#demo-bar {
  position: fixed; inset: 0 0 auto 0; min-height: var(--demo-bar-h);
  z-index: 50; /* the app navbar is sticky top-0 z-40 */
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  flex-wrap: wrap; padding: .375rem .75rem;
  background: #b91c1c; color: #fff;
  font: 500 13px/1.3 system-ui, sans-serif;
  box-shadow: 0 1px 3px rgb(0 0 0 / .3);
}
#demo-bar.demo-warn  { background: #ea580c; }
#demo-bar.demo-final { background: #7f1d1d; animation: demo-pulse 1s infinite; }
@keyframes demo-pulse { 50% { opacity: .65; } }

#demo-bar a { color: #fff; text-decoration: underline; }

body    { padding-top: var(--demo-bar-h); }

#demo-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem;
  background: rgb(0 0 0 / .85); color: #fff; text-align: center;
}
#demo-overlay a {
  color: #fff; background: #2563eb; padding: .5rem 1.25rem; border-radius: .375rem;
  text-decoration: none; font: 500 14px system-ui, sans-serif;
}