/* Studio plumbing: the preview bar. PREVIEW ONLY, our offer about our artifact; it never
   borrows the site's design, so every rule is scoped to #studio-bar and resets what a
   design's own CSS might set on p, a, nav, button. Fixed to the bottom so the hero is the
   first thing seen. At purchase: delete this file, its <link>, the bar on every page, buy.html. */

:root { --bar-h: 3.75rem; }
body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }

#studio-bar, #studio-bar * { box-sizing: border-box; margin: 0; text-transform: none; letter-spacing: normal; text-shadow: none; float: none; }
#studio-bar {
  position: fixed; inset: auto 0 0 0; z-index: 2147483000; width: 100%; max-width: none;
  display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem 1rem;
  min-height: var(--bar-h);
  padding: .5rem max(1rem, env(safe-area-inset-right, 0px)) calc(.5rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
  background: #15171c; color: #f4f4f5; border: 0; border-radius: 0;
  font: 500 .875rem/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 -1px 0 rgba(255,255,255,.08);
}
#studio-bar p { flex: 1 1 auto; min-width: 0; max-width: none; padding: 0; font: inherit; color: inherit; }
#studio-bar a { color: inherit; text-decoration: none; font: inherit; background: none; border: 0; box-shadow: none; }
#studio-bar .studio-bar__buy {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 2.75rem; padding: 0 1.1rem;
  border-radius: 999px; background: #fff; color: #15171c; font-weight: 650; white-space: nowrap;
}
#studio-bar a:focus-visible, #studio-bar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#studio-bar .studio-designs { display: flex; flex: none; width: auto; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; overflow: hidden; background: none; position: static; }
#studio-bar .studio-designs a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .6rem; border-radius: 0; font-variant-numeric: tabular-nums; }
#studio-bar .studio-designs a + a { border-left: 1px solid rgba(255,255,255,.35); }
#studio-bar .studio-designs a[aria-current="page"] { background: #fff; color: #15171c; }
#studio-bar .studio-bar__label { flex: none; opacity: .7; }
#studio-bar .studio-bar__toggle { flex: none; display: inline-flex; align-items: center; width: auto; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; box-shadow: none; }
#studio-bar[data-min] { inset: auto 0 0 auto; width: auto; min-height: 0; padding: .25rem; border-top-left-radius: 1rem; }
#studio-bar[data-min] > :not(.studio-bar__toggle) { display: none; }

@media (max-width: 40rem) {
  :root { --bar-h: 6.5rem; }
  #studio-bar { flex-wrap: wrap; column-gap: .5rem; }
  #studio-bar .studio-bar__buy { padding: 0 .9rem; }
  #studio-bar .studio-bar__toggle { padding: 0 .75rem; }
  #studio-bar p { flex-basis: 100%; }
  #studio-bar .studio-bar__label { display: none; }
  #studio-bar .studio-bar__buy { margin-left: auto; }
}