.library-page nav.top { top: 0; }
.library-wrap { width: min(1280px, 100%); margin: auto; padding: 64px 24px 0; }
.library-heading { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 48px; padding-bottom: 48px; }
.library-heading h1 { font-size: clamp(76px, 9vw, 128px); line-height: .86; letter-spacing: -.025em; }
.library-heading h1 span { color: var(--arrow); }
.library-intro { padding-bottom: 6px; }
.library-intro p { font-size: 30px; line-height: 1.25; margin-bottom: 20px; }
.library-intro > span, .library-help, .library-note, .library-next p { font: 13px/1.6 system-ui, sans-serif; color: #b7bfaf; }
.library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-block: 1px solid var(--board-line); padding: 16px 0; }
.library-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.library-filters button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--board-line); color: #fff; background: #0e130b; font: 11px "IBM Plex Mono", monospace; }
.library-filters button span { opacity: .65; font-size: 9px; }
.library-filters button[aria-pressed="true"] { background: var(--arrow); border-color: var(--arrow); color: #080a08; }
.library-filters button:hover { border-color: var(--arrow); }
#library-count { font: 10px "IBM Plex Mono", monospace; color: #b7bfaf; white-space: nowrap; }
.library-help { margin-top: 20px; }
.archive-context { font-size: 12px; margin-top: 10px; max-width: 880px; }
.archive-context a { color: var(--arrow); text-decoration: underline; text-underline-offset: 3px; }
.library-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 0; }
.library-pagination button, .library-pagination select { min-height: 44px; padding: 10px 14px; color: #fff; background: #0e130b; border: 1px solid var(--board-line); font: 12px "IBM Plex Mono", monospace; }
.library-pagination button:hover:not(:disabled), .library-pagination select:hover { border-color: var(--arrow); }
.library-pagination button:disabled { opacity: .35; cursor: default; }
.library-pagination label { display: flex; align-items: center; gap: 8px; color: #b7bfaf; font: 11px "IBM Plex Mono", monospace; }
.library-pagination select { color: var(--arrow); }
.share-feedback { min-height: 38px; padding-block: 8px; font: 12px/1.5 system-ui, sans-serif; color: var(--arrow); }
#share-fallback { display: block; margin-block: 12px; }
#share-fallback input { display: block; width: min(100%, 600px); padding: 12px; margin-top: 6px; border: 1px solid var(--arrow); background: #080a08; color: white; font: 14px system-ui, sans-serif; }
.meme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; scroll-margin-top: 100px; }
.meme-card { border: 1px solid var(--board-line); background: #080a08; min-width: 0; scroll-margin-top: 96px; }
.meme-card:target { border-color: var(--arrow); }
.meme-card-heading { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font: 9px/1.5 "IBM Plex Mono", monospace; color: #b7bfaf; border-bottom: 1px solid var(--board-line); }
.meme-card-heading span:last-child { color: var(--arrow); }
.meme-media { background: #000; aspect-ratio: 4 / 3; }
.meme-media > a { display: block; width: 100%; height: 100%; }
.meme-media video, .meme-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.meme-media.template { aspect-ratio: 1168 / 778; display: flex; align-items: center; justify-content: center; background: radial-gradient(#293516, #0c1009); }
.meme-media.template img { width: auto; max-width: 100%; height: 100%; padding: 16px; }
.meme-card-copy { padding: 20px; }
.meme-card-copy h2 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; overflow-wrap: anywhere; }
.meme-card-copy > p { color: #bbc3b3; font-size: 18px; line-height: 1.4; }
.meme-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.meme-actions .btn { font-size: 10px; padding-inline: 12px; letter-spacing: .05em; }
.share-link { border: 0; background: none; color: #d9dfd3; font: 11px "IBM Plex Mono", monospace; min-height: 44px; padding: 10px; text-decoration: underline; text-underline-offset: 4px; }
.share-link:hover { color: var(--arrow); }
.library-note { border-top: 1px solid var(--board-line); margin-top: 40px; padding-block: 24px; max-width: 760px; }
.library-note p + p { margin-top: 12px; }
.library-note a { color: var(--arrow); text-decoration: underline; text-underline-offset: 4px; }
.library-next { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 40px 0 56px; border-top: 1px solid var(--board-line); }
.library-next h2 { font-size: 40px; margin-bottom: 10px; }
.library-next .btn { flex-shrink: 0; }
@media (min-width: 761px) and (max-width: 1080px) {
  .meme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-toolbar { align-items: start; flex-direction: column; }
}
@media (max-width: 760px) {
  .library-wrap { padding: 40px 16px 0; }
  .library-heading { grid-template-columns: 1fr; gap: 26px; padding-bottom: 30px; }
  .library-heading h1 { font-size: clamp(68px, 15vw, 100px); }
  .library-intro p { font-size: 24px; margin-bottom: 12px; }
  .library-toolbar { align-items: start; flex-direction: column; gap: 14px; }
  .meme-grid { grid-template-columns: 1fr; }
  .meme-card-copy { padding: 20px 16px; }
  .meme-card-heading { font-size: 8px; padding-inline: 12px; }
  .library-next { align-items: start; flex-direction: column; }
}
@media (max-width: 380px) {
  .library-pagination { gap: 6px; }
  .library-pagination button, .library-pagination select { padding-inline: 8px; font-size: 10px; }
  .library-pagination label { gap: 5px; font-size: 10px; }
}