:root { --demo-paper: #17202b; --demo-ink: #ffffff; --demo-focus: #f5aa58; }
.hallmark-demo-notice { position: relative; z-index: 500; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; background: var(--demo-paper); color: var(--demo-ink); font-family: system-ui, sans-serif; font-size: 13px; line-height: 1.55; }
.hallmark-demo-notice p { max-width: 70ch; margin: 0; }
.hallmark-demo-notice a { flex-shrink: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hallmark-demo-notice a:focus-visible { outline: 2px solid var(--demo-focus); outline-offset: 4px; }
@media (max-width: 640px) { .hallmark-demo-notice { flex-wrap: wrap; padding: 12px 16px; gap: 8px 16px; } .hallmark-demo-notice p { order: 3; width: 100%; font-size: 12px; } }