/* The demo tag (js/demo.js): bottom-left, away from the family button on the right. */
.demo-tag {
  position: fixed; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: var(--warn-soft); color: var(--ink); border: 1px solid var(--line);
  font: 600 14px/1 Nunito, system-ui, sans-serif; text-decoration: none; box-shadow: 0 2px 10px rgb(43 29 35 / 0.12);
}
.demo-tag b { color: var(--warn); font-weight: 800; }
.demo-tag:hover { background: color-mix(in oklab, var(--warn-soft) 80%, var(--warn)); }
/* Room under the last content, so the tag never sits on a button at the end of the page. */
body:has(.demo-tag) { padding-bottom: 76px; }
.login-card a.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }