.lib-hero { padding: 32px 0 12px; }
.lib-hero h1 { margin: 12px 0; font-size: clamp(34px, 6vw, 52px); line-height: 1.04; letter-spacing: -.045em; }
#library-message { margin: 16px 0 0; font-weight: 650; }
.lib-cta { display: inline-flex; min-height: 44px; align-items: center; margin-top: 14px; padding: 10px 18px; border-radius: 999px; color: var(--paper); background: var(--ink); font-size: 13px; font-weight: 800; text-decoration: none; }
.shelf { padding: 24px 0; border-top: 1px solid var(--line); }
.shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.shelf-head h2 { margin: 0 0 12px; font-size: 24px; letter-spacing: -.03em; }
.shelf-items { display: grid; grid-template-columns: 1fr; gap: 12px; }
.lib-item { display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.lib-item h3 { margin: 6px 0 4px; font-size: 18px; line-height: 1.2; letter-spacing: -.02em; }
.lib-type { align-self: flex-start; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lib-creator { margin: 0; color: var(--muted); font-size: 14px; font-weight: 650; }
.lib-why { flex: 1; margin: 10px 0 14px; font-size: 15px; line-height: 1.5; }
.lib-open { display: inline-flex; align-self: flex-start; min-height: 44px; align-items: center; padding: 10px 16px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 800; text-decoration: none; }
.lib-upgrade { margin: 12px 0 32px; padding: 20px; border-radius: 18px; color: var(--paper); background: var(--dark); }
.lib-upgrade .eyebrow { color: var(--dark-muted); }
.lib-upgrade .lib-cta { color: var(--ink); background: var(--accent); }
.lib-footer { display: flex; justify-content: space-between; padding: 24px 0 40px; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
@media (min-width: 720px) { .shelf-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .shelf-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }