body { background: #f6f6f8; }
.lib-top { height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-inline: 2rem; background: white; border-bottom: 1px solid var(--av-border); position: sticky; top: 0; z-index: 30; }
.lib-brand { display: flex; align-items: center; gap: 1.5rem; text-decoration: none; min-height: 2.75rem; }
.lib-brand img { width: 10.5rem; height: auto; }
.lib-brand span { color: var(--av-muted); font-size: .875rem; padding-left: 1.5rem; border-left: 1px solid var(--av-border); }
.lib-top-actions { display: flex; align-items: center; gap: 1rem; }
.lib-top-actions .av-button { font-size: .875rem; min-height: 2.75rem; }
.lib-layout { display: grid; grid-template-columns: 14.5rem minmax(0,1fr); max-width: 112rem; margin: auto; }
.lib-sidebar { position: sticky; top: 5rem; height: calc(100dvh - 5rem); padding: 2.5rem 1.5rem; border-right: 1px solid var(--av-border); display: flex; flex-direction: column; overflow: auto; }
.lib-sidebar p { font-size: .75rem; color: var(--av-subtle); text-transform: uppercase; letter-spacing: .1em; margin: 1.5rem .75rem .5rem; }
.lib-sidebar p:first-child { margin-top: 0; }
.lib-sidebar a { display: block; text-decoration: none; padding: .625rem .75rem; font-size: .875rem; border-radius: .5rem; color: var(--av-muted); }
.lib-sidebar a:hover, .lib-sidebar a[aria-current="location"] { background: #e8e8ff; color: var(--av-blue); }
.lib-sidebar footer { margin-top: auto; padding: 2rem .75rem 0; font-size: .75rem; color: var(--av-subtle); }
.lib-main { min-width: 0; padding: 3rem clamp(1.25rem, 4vw, 4.5rem) 5rem; }
.lib-main > .lib-panel { margin-bottom:3.5rem; }
.lib-page-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.75rem; }
.lib-page-title h1 { font: 400 clamp(2rem,4vw,2.75rem)/1.2 var(--av-heading); letter-spacing: -.04em; margin-bottom: .75rem; }
.lib-page-title p { max-width: 39rem; color: var(--av-muted); }
.lib-section { scroll-margin-top: 7rem; margin-bottom: 3.5rem; }
.lib-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.lib-section-heading h2 { font: 500 1.25rem/1.4 var(--av-heading); letter-spacing: -.02em; }
.lib-section-heading p { color: var(--av-muted); font-size: .875rem; }
.lib-panel { background: white; border: 1px solid var(--av-border); border-radius: 1rem; overflow: hidden; }
.lib-panel + .lib-panel { margin-top: 1rem; }
.lib-specimen { padding: clamp(1.25rem,3vw,2.25rem); }
.lib-caption { padding: 1rem 1.5rem; font-size: .875rem; border-top: 1px solid var(--av-border); color: var(--av-muted); background: #fcfcfd; }
.lib-swatches { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.lib-swatch { min-height: 6rem; border-radius: .5rem; border: 1px solid #0000000d; padding: 1rem; display: flex; align-items: flex-end; font-size: .875rem; }
.lib-swatch-label { font-size: .875rem; display: flex; justify-content: space-between; gap: .5rem; margin-top: .625rem; flex-wrap: wrap; }
.lib-swatch-label code { color: var(--av-muted); font-size: .75rem; }
.lib-type-sample { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--av-border); }
.lib-type-sample p:first-child { font-size: .75rem; color: var(--av-muted); margin-bottom: .75rem; }
.lib-poppins { font: 400 clamp(1.75rem,3vw,2.5rem)/1.2 var(--av-heading); letter-spacing: -.035em; }
.lib-body-sample { font-size: 1.125rem; }
.lib-row-label { font-size: .75rem; color: var(--av-muted); margin-bottom: .75rem; }
.lib-state-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.lib-state-row + .lib-row-label { margin-top: 2rem; }
.lib-note { margin-top: 1rem; font-size: .875rem; color: var(--av-muted); max-width: 54rem; }
.lib-code { border-top: 1px solid var(--av-border); }
.lib-code summary { padding: 1rem 1.5rem; font-size: .875rem; }
.lib-code-body { padding: 0 1.5rem 1.5rem; }
.lib-code pre { padding: 1.25rem; max-height: 24rem; overflow: auto; white-space: pre; background: #010113; color: #e4e4ef; border-radius: .5rem; font: .8125rem/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
.lib-code .av-button { min-height: 2.75rem; font-size: .875rem; }
.lib-code-status { margin-left: 1rem; color: var(--av-muted); font-size: .875rem; }
.lib-mobile-nav { display: none; }
@media (max-width: 23rem) {
  .lib-top { gap: .5rem !important; padding-inline: 1rem !important; }
  .lib-top .lib-brand img { width: 7rem; }
}
.lib-panel--navigation { overflow: visible; }
.lib-nav-stage { background: #010113; min-height: 10rem; border-radius: 1rem 1rem 0 0; }
.lib-panel--navigation .lib-caption { border-radius: 0 0 1rem 1rem; }
.lib-specimen--flush { padding: 0; }
.lib-specimen--flush > * { border-radius: .875rem .875rem 0 0; }
.lib-imports { margin: 0; max-width: 100%; white-space: pre; overflow-x: auto; padding: 1.5rem; border-radius: .5rem; background: #010113; color: #e4e4ef; font: .8125rem/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; }
.lib-guidance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.lib-guidance-grid h4 { font-weight: 500; margin-bottom: .5rem; }
.lib-guidance-grid p { color: var(--av-muted); font-size: .875rem; }
.lib-token-table { overflow-x: auto; }
.lib-token-table table { border-collapse: collapse; width: 100%; font-size: .875rem; text-align: left; }
.lib-token-table caption { text-align: left; font-weight: 500; margin-bottom: 1rem; }
.lib-token-table td, .lib-token-table th { padding: .75rem; border-bottom: 1px solid var(--av-border); }
.lib-token-table th { font-weight: 500; background: #fafafa; }
@media (min-width: 49rem) and (max-width: 70rem) {
  .lib-main .av-hero-grid { grid-template-columns: 1fr; }
}
@media (min-width: 112rem) { .lib-layout { border-inline: 1px solid var(--av-border); } }
@media (max-width: 64rem) {
  .lib-layout { grid-template-columns: 11.5rem minmax(0,1fr); }
  .lib-sidebar { padding-inline: .75rem; }
  .lib-top { padding-inline: 1.25rem; }
  .lib-brand span { display: none; }
  .lib-swatches { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 48rem) {
  .lib-top { height: 4.5rem; }
  .lib-brand img { width: 8rem; height: auto; }
  .lib-top-actions > .av-link { display: none; }
  .lib-top-actions .av-button { padding-inline: .75rem; }
  .lib-layout { display: block; }
  .lib-sidebar { display: none; }
  .lib-main { padding-top: 1.5rem; }
  .lib-page-title { margin-block: 1.75rem; flex-wrap: wrap; }
  .lib-section-heading { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .lib-type-sample { grid-template-columns: 1fr; gap: 1.5rem; }
  .lib-guidance-grid { grid-template-columns: 1fr; }
  .lib-mobile-nav { display: block; border-bottom: 1px solid var(--av-border); }
  .lib-mobile-nav summary { padding: .5rem 0 1rem; font-size: .875rem; }
  .lib-mobile-nav nav { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding-bottom: 1rem; }
  .lib-mobile-nav a { padding: .5rem; font-size: .875rem; color: var(--av-blue); }
  .lib-section { scroll-margin-top: 6rem; }
}

/* Original brand gradient, as a reusable surface study. */
.lib-brand-gradient { background:linear-gradient(112deg,#ebebf5,#686bf1 28%,#0c10d4 55%,#010113 100%); color:white; padding:3rem; margin-block:1.5rem; border-radius:.75rem; }
.lib-brand-gradient > span { font:500 clamp(1.8rem,3vw,3rem)/1.1 var(--av-heading); letter-spacing:-.04em; }
.lib-brand-gradient > p { font-size:.875rem; margin-top:1.5rem; max-width:28rem; padding:.5rem; background:#010113b3; }

/* Visible foundations: spacing, rhythm and responsive composition. */
.lib-foundation-detail { border-top:1px solid var(--av-border); scroll-margin-top:7rem; }
.lib-foundation-heading { max-width:45rem; }
.lib-foundation-heading h3 { font:400 clamp(1.35rem,2.4vw,2rem)/1.25 var(--av-heading); letter-spacing:-.03em; }
.lib-foundation-heading > p:last-child { margin-top:.75rem; color:var(--av-muted); }
.lib-space-scale { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; list-style:none; margin:2rem 0; padding:0; }
.lib-space-scale li { min-width:0; display:flex; align-items:center; gap:.75rem; }
.lib-space-scale span { font-size:.875rem; color:var(--av-muted); min-width:1.6rem; }
.lib-space-scale i { display:block; height:1rem; max-width:100%; flex-shrink:0; background:var(--av-link-blue,var(--av-blue)); }
.lib-rhythm-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.lib-rhythm-grid > div { border-top:1px solid var(--av-border); padding-top:1rem; }
.lib-rhythm-grid h4 { font-weight:500; margin-bottom:.5rem; }
.lib-rhythm-grid p { font-size:.875rem; color:var(--av-muted); }
.lib-layout-demo { display:grid; grid-template-columns:minmax(1rem,1fr) minmax(0,8fr) minmax(1rem,1fr); gap:.75rem; margin:2rem 0; padding:1rem .75rem; background:var(--av-surface-soft); border:1px solid var(--av-border); }
.lib-layout-margin { writing-mode:vertical-rl; text-align:center; justify-self:center; color:var(--av-muted); font-size:.7rem; }
.lib-layout-panel { padding:clamp(1rem,2vw,2rem); border:1px dashed var(--av-border-strong); }
.lib-layout-panel > span { display:block; font-size:.7rem; color:var(--av-muted); }
.lib-layout-columns { display:grid; grid-template-columns:1fr 1fr; gap:var(--av-space-5); margin-block:var(--av-space-5); }
.lib-layout-columns > div { display:flex; flex-direction:column; gap:var(--av-space-2); min-width:0; padding:var(--av-space-4); background:var(--av-surface); border-left:2px solid var(--av-link-blue,var(--av-blue)); }
.lib-layout-columns strong { font-size:.875rem; font-weight:500; }
.lib-layout-columns span { font-size:.75rem; color:var(--av-muted); }
@media (max-width:70rem) {
  .lib-rhythm-grid { grid-template-columns:1fr; gap:1rem; }
}
@media (max-width:48rem) {
  .lib-foundation-detail { scroll-margin-top:6rem; }
  .lib-space-scale { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
  .lib-layout-columns { grid-template-columns:1fr; }
}
@media (max-width:23rem) {
  .lib-space-scale { grid-template-columns:1fr; }
}