.demo-toolbar {
  position: fixed;
  z-index: 100000;
  inset: 0 0 auto 0;
  min-height: 36px;
  padding: 5px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #f8f8f3;
  background: #11141c;
  border-bottom: 1px solid rgba(255,255,255,.14);
  font: 700 11px/1.2 Inter, Arial, sans-serif;
}
.demo-toolbar > span { margin-right: 8px; letter-spacing: .08em; text-transform: uppercase; }
.demo-toolbar a { padding: 6px 10px; color: inherit; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; text-decoration: none; }
.demo-toolbar a[aria-current="page"] { color: #fff; background: #2755f5; border-color: #6785ff; }
.demo-toolbar .demo-back { margin-left: 8px; color: #d8e1ff; border-color: transparent; }
body.demo-mode { padding-top: 36px; }
body.demo-mode .topbar { top: 36px; }
body.demo-mode .brand-mark img { display: none; }
body.demo-mode .brand-mark::before {
  content: "UP";
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #2755f5;
  font: 800 9px/1 Inter, Arial, sans-serif;
  letter-spacing: -.02em;
}
body.demo-embed { padding-top: 0; }
body.demo-embed .demo-toolbar { display: none; }
body.demo-embed .topbar { top: 0; }
@media (max-width: 620px) {
  .demo-toolbar { padding-inline: 8px; gap: 5px; }
  .demo-toolbar > span { display: none; }
  .demo-toolbar a { padding-inline: 8px; font-size: 10px; }
}