:root { --demo-notice-height: 84px; }
body { padding-top: var(--demo-notice-height); }
body nav { top: var(--demo-notice-height); }
.demo-notice {
  position: fixed; inset: 0 0 auto; z-index: 1000;
  height: var(--demo-notice-height); padding: 10px 18px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  background: #fff5cc; color: #20251d; border-bottom: 1px solid #d6c785;
  font: 13px/1.4 sans-serif; text-align: center;
}
.demo-notice a { color: #23543a; text-decoration: underline; }
.demo-notice p { margin: 0; }
.demo-status { padding: 12px; color: inherit; font: 14px/1.5 sans-serif; }
@media (max-width: 640px) { :root { --demo-notice-height: 124px; } }