/* The white strip at the top of every example site, saying it is an example by 21R6 Studio. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
.example-bar {
  background: #F8F6F1; color: #1B1B1A; border-bottom: 1px solid #1B1B1A;
  font: 400 0.8125rem/1.4 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
}
.example-bar-inner {
  max-width: 82rem; margin: 0 auto; padding: 0.5rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1.5rem;
}
.example-bar p { margin: 0; }
.example-bar-links { display: flex; align-items: center; gap: 1.25rem; }
.example-bar a { color: #1B1B1A; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.example-bar a:hover { text-decoration-thickness: 2px; }
.example-bar a.example-bar-cta {
  background: #1B1B1A; color: #F8F6F1; text-decoration: none; font-weight: 500;
  padding: 0.4rem 0.9rem; border-radius: 0;
}
.example-bar a.example-bar-cta::after { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-left: 0.55rem; border-radius: 50%; background: #E10A0A; }
.example-bar a.example-bar-cta:hover { background: #000; color: #F8F6F1; }
.example-bar a:focus-visible { outline: 2px solid #1B1B1A; outline-offset: 2px; }

/* When an example is shown inside a frame on the studio home page, hide the strip and the scrollbars. */
.is-framed .example-bar { display: none; }
.is-framed, .is-framed body { overflow: hidden; }