.library{padding-block:var(--space-6) var(--space-16)}
.library-breadcrumb{display:flex;align-items:center;gap:var(--space-3);font-size:var(--font-size-xs);color:var(--color-text-muted)}
.library-hero{display:grid;grid-template-columns:1fr auto;gap:var(--space-12);align-items:center;padding-block:var(--space-12);border-bottom:var(--border-width) solid var(--color-border)}
.library-hero h1{font-size:var(--size-44);margin-block:var(--space-5);letter-spacing:-.055em;line-height:1.3}
.library-hero p{font-size:var(--font-size-sm);line-height:var(--line-height-body)}
.library-summary{padding:var(--space-8);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-result-bg);min-width:280px;transform:rotate(2deg)}
.library-summary>span:first-child{font-size:var(--size-10);letter-spacing:.08em;color:var(--color-text-muted)}
.library-summary strong{display:block;font-size:var(--size-32);margin-block:var(--space-4) var(--space-2);letter-spacing:-.05em}
.library-summary-status{display:flex;align-items:center;gap:var(--space-2);font-size:var(--size-11);border-top:var(--border-width) solid var(--color-result-border);padding-top:var(--space-4);margin-top:var(--space-6);color:var(--color-success)}
.library-summary-status i{width:var(--size-6);height:var(--size-6);border-radius:50%;background:var(--color-success)}
.library-nav{display:flex;gap:var(--space-2);flex-wrap:wrap;padding-block:var(--space-5);border-bottom:var(--border-width) solid var(--color-border)}
.library-nav a{display:flex;align-items:center;min-height:var(--size-44);padding:var(--space-2) var(--space-4);font-size:var(--font-size-xs);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface)}
.library-nav a:hover{border-color:var(--color-accent)}
.library-section{padding-block:var(--space-10);border-bottom:var(--border-width) solid var(--color-border);scroll-margin-top:var(--space-6)}
.library-section-heading{display:flex;gap:var(--space-4);margin-bottom:var(--space-6)}
.library-index{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-accent);padding-top:var(--space-1);flex-shrink:0;white-space:nowrap}
.library-section h2{font-size:var(--font-size-xl);margin-bottom:var(--space-2)}
.library-section-heading p{font-size:var(--font-size-xs)}
.library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.library-grid--two,.library-grid--states{grid-template-columns:repeat(2,minmax(0,1fr))}
.library-grid--states{margin-top:var(--space-4)}
.library-sample{min-width:0;padding:var(--space-6);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.library-sample h3{font-size:var(--font-size-xs);color:var(--color-text-muted);font-weight:var(--font-weight-medium);letter-spacing:0;margin-bottom:var(--space-5)}
.library-sample>.ui-field+.ui-field{margin-top:var(--space-4)}
.library-error{color:var(--color-danger)}
.library-playground{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:var(--space-6);margin-top:var(--space-4);padding:var(--space-6);background:var(--color-result-bg);border-radius:var(--radius-md);border:var(--border-width) solid var(--color-result-border)}
.library-live-result{min-width:0;display:flex;flex-direction:column;gap:var(--space-2);padding-bottom:var(--space-3)}
.library-live-result span{font-size:var(--font-size-xs);color:var(--color-text-muted)}
.library-live-result output{font-family:var(--font-mono);font-size:var(--font-size-lg);overflow-wrap:anywhere}
.library-choices{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-4)}
.library-choices label{display:flex;align-items:center;gap:var(--space-2);min-height:var(--size-44);font-size:var(--font-size-xs)}
.library-button-row{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
.library-button-row .ui-hint{flex-basis:100%}
.library-result{margin:0 0 var(--space-4)}
.library-result strong{display:block;font-size:var(--size-36);letter-spacing:-.04em;margin-top:var(--space-3);font-variant-numeric:tabular-nums}
.library-result strong span{font-size:var(--font-size-sm);margin-left:var(--space-2);color:var(--color-text-muted);font-weight:var(--font-weight-normal)}
.library-palette{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-4)}
.library-swatch{min-width:0}.library-swatch strong{display:block;font-size:var(--font-size-xs);margin-top:var(--space-3)}
.library-swatch code{font-size:var(--size-10);color:var(--color-text-muted);overflow-wrap:anywhere}
.library-color{height:var(--size-80);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-sm)}
.library-color--canvas{background:var(--color-background)}.library-color--surface{background:var(--color-surface)}.library-color--ink{background:var(--color-text)}.library-color--accent{background:var(--color-accent)}.library-color--line{background:var(--color-border)}.library-color--result{background:var(--color-result-bg)}
.library-spacing{display:grid;gap:var(--space-3)}.library-spacing>div{display:flex;align-items:center;gap:var(--space-3);font-size:var(--font-size-xs)}
.library-spacing code{min-width:var(--size-60)}.library-spacing small{color:var(--color-text-muted)}
.library-space{display:block;height:var(--size-12);background:var(--color-accent);border-radius:var(--size-2)}
.library-space--1{width:var(--space-1)}.library-space--2{width:var(--space-2)}.library-space--3{width:var(--space-3)}.library-space--4{width:var(--space-4)}.library-space--6{width:var(--space-6)}.library-space--8{width:var(--space-8)}
.library-radii{display:flex;gap:var(--space-3);margin-bottom:var(--space-6)}
.library-radii>div{flex:1;text-align:center;padding:var(--space-6) var(--space-2);border:var(--border-width) solid var(--color-border);background:var(--color-surface-subtle);font-family:var(--font-mono);font-size:var(--font-size-sm)}
.library-radii small{display:block;font-family:var(--font-sans);font-size:var(--size-10);color:var(--color-text-muted);margin-top:var(--space-2)}
.library-radius--sm{border-radius:var(--radius-sm)}.library-radius--md{border-radius:var(--radius-md)}.library-radius--lg{border-radius:var(--radius-lg)}
.library-end{text-align:center;padding-top:var(--space-10)}.library-end p{margin-block:var(--space-3) var(--space-5);font-size:var(--font-size-sm)}
@media(max-width:760px){.library-hero{grid-template-columns:1fr;gap:var(--space-6);padding-block:var(--space-8)}.library-hero h1{font-size:var(--size-32)}.library-summary{min-width:0;transform:none;padding:var(--space-6)}.library-grid,.library-grid--two,.library-grid--states{grid-template-columns:1fr}.library-playground{grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-5)}.library-sample{padding:var(--space-5)}.library-palette{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}.library-section{padding-block:var(--space-8)}.library-nav{gap:var(--space-2)}.library-nav a{padding-inline:var(--space-3)}.library-radii{gap:var(--space-2)}}