/* Tiny Pixel Zoo — self-contained styles shared by the gallery and builder. */
.pixel-zoo { padding-block: 2.5rem clamp(4rem, 7vw, 6rem); }
.pixel-zoo-page { padding-bottom: clamp(3rem, 7vw, 7rem); }
.pixel-zoo-hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(1.6rem, 4vw, 3rem); }
.pixel-zoo-hero h1 { font-size: clamp(3rem, 8vw, 6.5rem); max-width: 850px; letter-spacing: -.055em; line-height: 1.02; }
.pixel-zoo-hero h1 span { color: var(--accent); }
.pixel-zoo-hero .standfirst { margin-top: 1.6rem; max-width: 730px; }
.pixel-zoo-intro { max-width: 670px; margin: 0 0 2rem; color: #454545; font-size: 1.03rem; line-height: 1.6; }
.pixel-zoo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.pixel-zoo-card { min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid #ccc; }
.pixel-zoo-card-art { display: grid; place-items: center; padding: clamp(1.2rem, 3vw, 2rem); background: #e6e8eb; }
.pixel-zoo-preview { display: block; width: min(100%, 220px); height: auto; aspect-ratio: 1; background: #fff; image-rendering: pixelated; image-rendering: crisp-edges; }
.pixel-zoo-card-info { flex: 1; display: flex; flex-direction: column; padding: 1.15rem 1.3rem 1.3rem; }
.pixel-zoo-number { color: #747474; font: 500 .7rem "IBM Plex Mono", monospace; }
.pixel-zoo-card h3 { margin: .6rem 0 .35rem; font: 700 clamp(1.15rem, 2vw, 1.5rem)/1.2 "Space Grotesk",sans-serif; letter-spacing: -.025em; }
.pixel-zoo-card p { margin: 0 0 1.3rem; color: #515151; font-size: .88rem; line-height: 1.5; }
.pixel-zoo-open { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding: .8rem .85rem; background: #111; color: white; text-decoration: none; font: 600 .86rem "Space Grotesk",sans-serif; }
.pixel-zoo-open span { color: #f0a1a1; font-size: 1.2rem; }
.pixel-zoo-open:hover { background: #343434; }
.pixel-zoo-open:focus-visible, .pixel-zoo-bottom a:focus-visible { outline: 3px solid #c94545; outline-offset: 3px; }
.pixel-zoo-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding-top: 1.75rem; margin-top: 1.75rem; border-top: 1px solid #cfcfcf; }
.pixel-zoo-bottom p { margin: 0; color: #444; font-size: .9rem; line-height: 1.6; }
.pixel-zoo-bottom a { font-size: .86rem; font-weight: 600; text-underline-offset: .25em; white-space: nowrap; }
.pixel-zoo-next { max-width: 710px; padding-bottom: 2rem; }
.pixel-zoo-next h2 { margin: .4rem 0 1rem; font: 700 clamp(1.8rem, 4.5vw, 3.1rem)/1.14 "Space Grotesk",sans-serif; letter-spacing: -.04em; }
.pixel-zoo-next p:not(.eyebrow) { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; }
.pixel-zoo-next a { font-weight: 600; text-underline-offset: .25em; }
@media (max-width: 1020px) {
  .pixel-zoo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
  .pixel-zoo-bottom { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 470px) {
  .pixel-zoo { padding-top: 2.25rem; }
  .pixel-zoo-grid { gap: .6rem; }
  .pixel-zoo-card-art { padding: .7rem; }
  .pixel-zoo-card-info { padding: .7rem .7rem .8rem; }
  .pixel-zoo-number { font-size: .64rem; }
  .pixel-zoo-card h3 { font-size: 1rem; }
  .pixel-zoo-card p { font-size: .77rem; line-height: 1.4; margin-bottom: .8rem; }
  .pixel-zoo-open { font-size: .77rem; padding: .68rem .55rem; }
}
@media (max-width: 340px) {
  .pixel-zoo-grid { grid-template-columns: 1fr; }
  .pixel-zoo-card-art { padding: 1.3rem; }
}

/* Gallery contains real 8×8 and 16×16 creations, filterable in place. */
.pixel-zoo-card[hidden] { display: none !important; }
.pixel-zoo-filters { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.25rem 0 .5rem; }
.pixel-zoo-filters button { padding: .67rem .9rem; border: 1px solid #bbb; background: #fff; color: #333; cursor: pointer; font: 600 .8rem "IBM Plex Sans",sans-serif; }
.pixel-zoo-filters button.is-active { background: #111; color: #fff; border-color: #111; }
.pixel-zoo-filters button:focus-visible { outline: 3px solid #c94545; outline-offset: 3px; }
.pixel-zoo-filter-count { margin: 0 0 1.15rem; font: 500 .72rem "IBM Plex Mono",monospace; color: #686868; }
.pixel-zoo-size { display: block; margin: 0 0 .45rem; font: 500 .66rem "IBM Plex Mono",monospace; color: #727272; }