/*
 * The /library page, on top of the Last Table tokens and components. Reads only --lt- tokens.
 * The hero's star tile is the pulled copy under /library/, so the page shows the library's own file.
 */
.library-hero::before { background-image: url("/library/last-table/star-field.svg"); }
.library-actions { display: flex; flex-wrap: wrap; gap: var(--lt-space-3); }
.library-steps { display: grid; gap: var(--lt-space-5); margin: var(--lt-space-5) 0; padding: 0; list-style: none; }
.library-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--lt-space-3); align-items: start; }
.library-step p { margin: 0 0 var(--lt-space-2); }
.library-step .lt-code { margin: 0; }
.library-icon { margin-top: 2px; color: var(--lt-glow-ink); }
.library-grid { margin-top: var(--lt-space-5); }
.library-asset { scroll-margin-top: var(--lt-space-9); }
/* Previews sit on the midnight sky, because the star tile, the burst and the grain are drawn for a dark page. */
.library-preview { overflow: hidden; background: var(--lt-surface-1); }
.library-preview img { position: absolute; inset: 0; object-fit: contain; }
.library-preview[data-kind="logo"] img { padding: var(--lt-space-6); }
.library-asset .lt-chip { align-self: flex-start; }
.library-summary { margin: 0; color: var(--lt-text-1); }
.library-origin,
.library-meta { margin: 0; color: var(--lt-text-2); font-size: var(--lt-step--1); }
.library-origin code,
.library-meta code { overflow-wrap: anywhere; }
.library-bundle h3 { margin: 0 0 var(--lt-space-2); }
.library-bundle p { margin: 0 0 var(--lt-space-2); }
.library-film { margin: 0 0 var(--lt-space-5); }
.library-film video { display: block; width: 100%; height: auto; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-card); background: var(--lt-surface-3); }
.library-film figcaption { margin-top: var(--lt-space-2); color: var(--lt-text-2); font-size: var(--lt-step--1); }