/* The demo bar above the demo app: tuned's own look (ink, Unbounded, the
 * coral dot), so nobody takes it for part of the app below. */

.demo-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 10px 16px;
  background: oklch(0.2 0.02 270); color: #f5f5f2;
  font: 600 14px/1.3 Onest, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.demo-bar .brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.demo-bar .logo { font: 800 22px/1 Unbounded, Onest, system-ui, sans-serif; letter-spacing: -0.05em; }
.demo-bar .logo i { font-style: normal; color: oklch(0.7 0.19 10); }
.demo-bar .product { font-size: 15px; font-weight: 700; opacity: .9; }
.demo-bar .sticker {
  display: inline-block; padding: 3px 9px 2px; border-radius: 6px;
  background: oklch(0.76 0.15 85); color: oklch(0.2 0.02 270);
  font: 800 11px/1.2 Unbounded, Onest, system-ui, sans-serif; letter-spacing: .06em;
  transform: rotate(-4deg); box-shadow: 0 2px 0 rgb(0 0 0 / .35);
}
.demo-bar .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-bar .acts a, .demo-bar .acts button {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px;
  font: 700 13px Onest, system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none; cursor: pointer;
}
.demo-bar .acts a { background: #f5f5f2; color: oklch(0.2 0.02 270); }
.demo-bar .acts button { border: 0; background: transparent; color: #f5f5f2; outline: 1.5px solid oklch(0.35 0.02 270); outline-offset: -1.5px; }
.demo-bar a:focus-visible, .demo-bar button:focus-visible { outline: 2px solid oklch(0.7 0.19 10); outline-offset: 2px; }