/* The demo's banner above the top bar and its login hint, linked only on the fake backend. See DESIGN.md#demo */
body { grid-template-rows: auto var(--header) 1fr; }
.demo-banner { grid-column: 1 / -1; margin: 0; padding: var(--sp-2) var(--sp-5); background: var(--btn-bg); color: var(--btn-text); font: 600 var(--fs-small)/1.4 var(--font-sans); letter-spacing: .02em; text-align: center; }
.demo-hint { margin-bottom: var(--sp-4); border-left-color: var(--warning); }
.demo-hint strong { font-family: var(--font-mono); font-weight: 600; }
@media (max-width: 900px) {
  body { grid-template-rows: auto var(--header) auto 1fr; }
  body.bare { grid-template-rows: auto var(--header) 1fr; }
}
@media (max-width: 600px) {
  .demo-banner { padding: var(--sp-2) var(--sp-3); }
}