/* ==========================================================================
   Library chrome — the browser UI around the components.
   Nothing here ships with a copied section.
   ========================================================================== */

/* The Fountain marketing frame is a light-only design — every section is drawn
   on white or a pale wash, and repainting it dark would misrepresent the
   artwork. So this browser commits to one visual world rather than offering
   two, and paints its own ground explicitly so it never borrows the host's. */
:root { color-scheme: light; }

.lib {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  background: #eef0f4;
  min-height: calc(100vh - 64px);
}

.lib-nav__item:focus-visible,
.lib-item__copy:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

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

/* ---- Sidebar ------------------------------------------------------------- */

.lib-nav {
  position: sticky;
  /* clears the site bar */
  top: 64px;
  align-self: start;
  height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--neutral-900);
  color: var(--neutral-white);
  padding: 28px 0;
}
.lib-nav__head { padding: 0 24px 20px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 12px; }
.lib-nav__brand { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.lib-nav__sub { display: block; margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.5); }
.lib-nav__list { display: flex; flex-direction: column; padding: 0 12px; }
.lib-nav__item {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 12px; border-radius: 7px;
  font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.72);
}
.lib-nav__item:hover { background: rgba(255,255,255,.07); color: #fff; }
.lib-nav__num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: rgba(255,255,255,.35); flex: none; }

/* ---- Main ---------------------------------------------------------------- */

.lib-main { padding: 40px 40px 120px; min-width: 0; }
.lib-intro { max-width: 720px; margin: 12px 0 40px; }
.lib-intro__title { font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; }
.lib-intro__lede { margin-top: 12px; font-size: 15px; line-height: 1.55; color: #4a5568; }
.lib-intro code, .lib-item__node { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.lib-intro code { background: #dfe3ea; padding: 1px 5px; border-radius: 4px; }

.lib-item { margin-bottom: 36px; scroll-margin-top: 20px; }
.lib-item__bar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 0 2px 10px;
}
.lib-item__title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.lib-item__node { display: block; margin-top: 3px; color: #7c8798; }
.lib-item__copy {
  flex: none; font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: var(--neutral-900); color: #fff; border: 0;
}
.lib-item__copy:hover { background: var(--brand-600); }

/* The 1440 artboard, scaled down to fit the viewport */
.lib-item__stage {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.1), 0 12px 32px rgba(15,23,42,.07);
}
.lib-item__frame {
  width: 1440px;
  transform-origin: top left;
}

@media print {
  .lib-nav, .lib-item__bar, .lib-intro { display: none; }
  .lib { display: block; background: #fff; }
  .lib-main { padding: 0; }
  .lib-item__stage { box-shadow: none; border-radius: 0; }
}