/* Demo-only banner. Not part of the downloadable template.
   The hidden spacer matches the fixed bar’s height at any width, so the page
   starts below it and nothing sits underneath the bar on first paint. */
.demo-banner,
.demo-banner-space {
  box-sizing: border-box;
  display: block;
  margin: 0;
  padding: 8px 14px;
  border-bottom: 3px solid #F5B83D;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}
.demo-banner-space {
  visibility: hidden;
  border-bottom-color: transparent;
}
.demo-banner {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  background: #2A1670;
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.demo-banner:hover { background: #4527A0; color: #fff; }
.demo-banner:focus-visible { outline: 3px solid #F5B83D; outline-offset: -3px; }
.skip:focus { z-index: 120; }