.ui-library{padding-block:var(--spacing-32)}.ui-library__header{grid-column:content-start/content-end;margin-bottom:var(--spacing-32)}.ui-library__header h1{margin-bottom:var(--spacing-8)}.ui-library__header p{margin-bottom:0;color:var(--text-muted);max-width:70ch}.ui-library code{font-size:.8125rem;font-family:var(--font-mono)}.ui-library__section-intro{margin-bottom:var(--spacing-24)}.ui-library__section-intro-sm{margin-bottom:var(--spacing-16)}.ui-library__note{margin-top:var(--spacing-8);font-size:var(--text-sm);color:var(--text-muted)}.ui-library__tabs{grid-column:content-start/content-end;display:flex;flex-direction:column;gap:var(--spacing-24)}.token-section{margin-bottom:0}.accordion__content>.token-section+.token-section{margin-top:var(--spacing-24)}.token-list{display:flex;flex-direction:column;gap:var(--spacing-8)}.token-list__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-8);padding:var(--spacing-8)var(--spacing-12);border:1px solid var(--border-default);border-radius:var(--radius-4);background-color:var(--surface-subtle)}.token-list__role{min-width:8rem;font-size:var(--text-sm);font-weight:var(--sans-weight-medium);color:var(--text-default)}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--spacing-16)}.color-swatch{display:flex;flex-direction:column;gap:var(--spacing-8)}.color-swatch__visual{width:100%;height:80px;border-radius:6px;border:1px solid var(--border-default)}.color-swatch__meta{font-size:.875rem}.color-swatch__meta code{font-size:.8125rem}.color-swatch__badge{display:inline-flex;align-items:center;margin-left:var(--spacing-8);padding:2px var(--spacing-8);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--sans-weight-medium);color:var(--text-inverse);background-color:var(--primary)}.color-swatch--primary .color-swatch__visual{outline:2px solid var(--primary);outline-offset:2px}.pantone-year-list{display:flex;flex-direction:column;gap:var(--spacing-24)}.pantone-year-card{display:flex;flex-direction:column;gap:var(--spacing-12);padding:var(--spacing-16);border:1px solid var(--border-default);border-radius:var(--radius-8);background-color:var(--surface-subtle)}.pantone-year-card__header{display:flex;flex-direction:column;gap:var(--spacing-4)}.pantone-year-card__meta{margin:0;font-size:var(--text-sm);color:var(--text-muted)}.pantone-year-card__label{margin:0;font-size:var(--text-sm);font-weight:var(--sans-weight-medium)}.typography-scale{display:flex;flex-direction:column;gap:var(--spacing-24)}.typography-example{display:flex;flex-direction:column;gap:var(--spacing-8);padding:var(--spacing-16);border:1px solid var(--border-default);border-radius:6px}.typography-example__sample{color:var(--text-default)}.typography-example__token{font-size:.875rem;color:var(--text-muted)}.typography-token-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--spacing-12)}.typography-token-card{display:flex;flex-direction:column;justify-content:flex-start;gap:var(--spacing-8);padding:var(--spacing-12);border:1px solid var(--border-default);border-radius:var(--radius-8);background-color:var(--surface-subtle)}.typography-token-card__sample{margin:0;color:var(--text-default);line-height:var(--line-height-normal)}.typography-token-card code{font-size:var(--text-xs);color:var(--text-muted)}.typography-token-card--scale .typography-token-card__sample{font-size:var(--token-size,var(--text-base));line-height:1}.spacing-scale{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--spacing-16)}.spacing-example{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--spacing-12);padding:var(--spacing-12);border:1px solid var(--border-default);border-radius:6px;background-color:var(--surface-subtle)}.spacing-example__visual{background-color:var(--primary);border-radius:4px;flex-shrink:0;min-width:2px}.spacing-example__token{font-size:var(--text-sm);font-weight:var(--sans-weight-bold);justify-self:end}.size-token-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--spacing-12)}.size-token-grid--wide{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.size-token-card{display:flex;flex-direction:column;gap:var(--spacing-8);padding:var(--spacing-12);border:1px solid var(--border-default);border-radius:var(--radius-8);background-color:var(--surface-subtle)}.size-token-card__label{margin:0;line-height:1.2}.size-token-card__bar{height:10px;width:min(var(--token-size,0px),100%);min-width:2px;border-radius:var(--radius-2);background-color:var(--primary)}.size-token-list{margin-top:var(--spacing-12);display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--spacing-12)}.size-token-list__item{display:flex;flex-direction:column;gap:var(--spacing-8);padding:var(--spacing-12);border:1px solid var(--border-default);border-radius:var(--radius-8);background-color:var(--surface-subtle)}.token-preview-grid{display:grid;grid-template-columns:repeat(12,[col-start] minmax(0,1fr));column-gap:var(--spacing-24);row-gap:var(--spacing-16)}.token-preview-grid>.token-preview{grid-column:span 3}@media(max-width:63.9375em){.token-preview-grid{grid-template-columns:repeat(8,[col-start] minmax(0,1fr))}.token-preview-grid>.token-preview{grid-column:span 4}}@media(max-width:47.9375em){.token-preview-grid{grid-template-columns:repeat(4,[col-start] minmax(0,1fr));column-gap:var(--spacing-16)}.token-preview-grid>.token-preview{grid-column:span 2}}@media(max-width:29.9375em){.token-preview-grid>.token-preview{grid-column:span 4}}.token-preview{display:flex;flex-direction:column;gap:var(--spacing-8)}.token-preview__value{margin:0}.token-preview__visual{width:100%;height:72px;border:1px solid var(--border-default);background-color:var(--surface-subtle)}.token-preview__radius{background-image:linear-gradient( var(--state-surface-hover),var(--state-surface-hover) )}.token-preview__shadow{border-radius:var(--radius-8);background-color:var(--surface-default)}.token-preview__ring{border-radius:var(--radius-8);background-color:var(--surface-page)}.motion-demo{display:flex;flex-direction:column;gap:var(--spacing-16)}.motion-demo__toolbar{display:flex;justify-content:flex-end}.motion-demo__replay{border:1px solid var(--border-default);border-radius:var(--radius-8);background-color:var(--surface-default);color:var(--text-default);font-size:var(--text-sm);font-weight:var(--sans-weight-medium);padding:var(--spacing-8)var(--spacing-12);cursor:pointer;transition:background-image var(--state-layer-duration)var(--state-layer-ease),border-color var(--motion-duration-fast)var(--motion-ease-standard)}.motion-demo__replay:hover{background-image:linear-gradient( var(--state-surface-hover),var(--state-surface-hover) )}.motion-demo__replay:focus-visible{outline:none;box-shadow:var(--ring-focus)}.motion-demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--spacing-12)}.motion-demo-card{border:1px solid var(--border-default);border-radius:var(--radius-8);background-color:var(--surface-subtle);padding:var(--spacing-12);display:flex;flex-direction:column;gap:var(--spacing-8)}.motion-demo-track{border:1px solid var(--border-subtle);background-color:var(--surface-page);border-radius:var(--radius-pill);height:var(--size-24);padding:var(--spacing-4);display:flex;align-items:center}.motion-demo-dot{width:var(--size-12);height:var(--size-12);border-radius:50%;background-color:var(--primary);animation-name:ui-library-motion-slide;animation-duration:var(--motion-demo-duration,var(--motion-duration-base));animation-timing-function:var( --motion-demo-ease,var(--motion-ease-standard) );animation-iteration-count:infinite;animation-direction:alternate}.motion-distance-box{border:1px solid var(--border-subtle);background-color:var(--surface-page);border-radius:var(--radius-8);height:calc(var(--size-24) + var(--size-16));display:grid;place-items:center}.motion-distance-chip{width:var(--size-24);height:var(--size-8);border-radius:var(--radius-pill);background-color:var(--primary);animation-name:ui-library-motion-rise;animation-duration:var(--motion-duration-reveal);animation-timing-function:var(--motion-ease-decelerate);animation-iteration-count:infinite;animation-direction:alternate;transform:translateY(var(--motion-demo-distance,var(--motion-distance-sm)))}.motion-state-demo{position:relative;border:1px solid var(--border-default);border-radius:var(--radius-8);background-color:var(--surface-page);color:var(--text-default);padding:var(--spacing-8)var(--spacing-12);font-size:var(--text-sm);overflow:hidden}.motion-state-demo::before{content:"";position:absolute;inset:0;background-image:linear-gradient( var(--state-surface-hover),var(--state-surface-hover) );opacity:0;transition:opacity var(--state-layer-duration)var(--state-layer-ease)}.motion-state-demo:hover::before{opacity:1}@keyframes ui-library-motion-slide{from{transform:translateX(0)}to{transform:translateX(160px)}}@keyframes ui-library-motion-rise{from{transform:translateY( var(--motion-demo-distance,var(--motion-distance-sm)) )}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.motion-demo-dot,.motion-distance-chip{animation:none;transform:none}}.spacing-example__usage{font-size:.875rem;color:var(--text-muted)}.grid-section{margin-bottom:var(--spacing-24)}.grid-demo{background-color:var(--surface-subtle);border-radius:6px}.grid-demo.use-subgrid{grid-template-columns:repeat(12,[col-start] 1fr);column-gap:var(--spacing-24)}.grid-demo__item{padding:var(--spacing-16);background-color:var(--primary);color:#fff;border-radius:4px;text-align:center;font-weight:var(--sans-weight-medium)}.grid-demo .place-full,.grid-demo .place-wide,.grid-demo .place-prose,.grid-demo .place-narrow,.grid-demo .place-aside,.grid-demo .place-aside-left,.grid-demo .place-bleed,.grid-demo [style*=--col]{grid-column:var(--col);grid-row:var(--row,auto)}.grid-demo[class*=stepped-]>*{grid-column:var(--col);grid-row:var(--row,auto)}.code-example{margin-top:var(--spacing-8)}.code-example summary{cursor:pointer;font-size:.875rem;color:var(--primary);padding:var(--spacing-8);border-radius:4px}.code-example summary:hover{background-color:var(--surface-subtle)}.code-example .highlight{margin-top:var(--spacing-8)}.code-example .highlight pre{margin:0}.code-example pre{margin-top:var(--spacing-8)}.code-example code{font-family:var(--font-mono);font-size:.875rem}.component-doc{display:flex;flex-direction:column;margin-bottom:var(--spacing-16)}.component-doc>*+*{margin-top:var(--spacing-16)}.component-doc>.accordion-nested+.accordion-nested{margin-top:0}.component-meta{padding:var(--spacing-16);background-color:var(--surface-default);border-radius:6px;border:1px solid var(--border-default)}.meta-list{display:flex;flex-direction:column;gap:var(--spacing-12);margin:0}.meta-item{display:grid;grid-template-columns:100px 1fr;gap:var(--spacing-8);align-items:baseline}.meta-item dt{font-weight:var(--sans-weight-bold);font-size:var(--text-sm);color:var(--text-muted)}.meta-item dd{margin:0;font-size:var(--text-sm)}.meta-item code{font-size:.8125rem;padding:2px 6px;background-color:var(--surface-default);border-radius:4px;border:1px solid var(--border-default)}.component-examples{display:flex;flex-direction:column;gap:var(--spacing-16)}.component-example-group{display:flex;flex-wrap:wrap;gap:var(--spacing-12);padding:var(--spacing-16);background-color:var(--surface-subtle);border:1px solid var(--border-default);border-radius:6px}.component-example-group--center{justify-content:center;align-items:center}.gallery-demo-tile{display:grid;place-items:center;min-height:7rem;border:1px solid var(--border-default);border-radius:var(--radius-8);background:linear-gradient( 140deg,var(--surface-default) 0%,var(--surface-subtle) 100% );color:var(--text-muted);font-size:var(--text-sm);font-family:var(--font-mono)}.gallery-demo-tile--lg{min-height:10rem}.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--spacing-12)}.icon-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-8);min-height:96px;padding:var(--spacing-12);border:1px solid var(--border-default);border-radius:var(--radius-8);background-color:var(--surface-page);text-align:center}.icon-card .pdf-icon,.icon-card .download-icon,.icon-card .arrow-left,.icon-card .language-icon{margin-inline:auto}.icon-card>svg{display:block;margin-inline:auto}.icon-card p{margin:0}@media(max-width:47.9375em){.color-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.meta-item{grid-template-columns:1fr}}