/* Shared chrome for Happy Labs live demos: the demo bar and base reset. */
@font-face {
  font-family: 'Montserrat';
  src: url('/ui/fonts/Montserrat-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  --hl-purple: #833177; --hl-deep: #6A2A5B; --hl-darkest: #4B3048; --hl-night: #2B1229;
  --hl-lime: #84BD00; --hl-green-ink: #467000; --hl-gold: #FFC845; --hl-cream: #ECD898;
  --hl-paper: #FFFDF9; --hl-ink: #4B3048; --hl-ink-2: #6A5B68; --hl-line: #E8E1D8;
  --hl-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--hl-purple); outline-offset: 2px; }

.demo-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px 16px; background: var(--hl-night); color: #F4EBDD; font: 500 14px/1.4 var(--hl-font);
}
.demo-bar strong { color: var(--hl-gold); font-weight: 800; }
.demo-bar .tag { display: inline-block; background: var(--hl-lime); color: var(--hl-night); font-weight: 800; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; margin-right: 8px; }
.demo-bar a { color: var(--hl-cream); font-weight: 700; }
.demo-bar a:hover { color: var(--hl-gold); }
.is-preview .demo-bar { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}