:root {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
  --tile-border: #888;
  --tile-bg: rgba(127, 127, 127, 0.05);
  --placeholder-bg: rgba(127, 127, 127, 0.15);
  --badge-bg: rgba(180, 90, 0, 0.15);
  --badge-fg: #b45a00;
  --link-muted-fg: inherit;
}

body { margin: 0; padding: 0; }

header { padding: 1rem; border-bottom: 1px solid #888; }
header h1 { margin: 0 0 0.25rem; font-size: 1.5rem; }
.banner { margin: 0 0 0.75rem; font-size: 0.85rem; opacity: 0.8; }

#filter {
  width: 100%;
  max-width: 32rem;
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  border: 1px solid #888;
  border-radius: 4px;
  background: transparent;
  color: inherit;
}

#status { margin: 0.4rem 0 0; font-size: 0.8rem; opacity: 0.7; min-height: 1.1em; }

main { padding: 1rem; }

.category { margin-bottom: 2rem; }
.category h2 {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #888;
  padding-bottom: 0.2rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}

.tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tile-border);
  border-radius: 6px;
  padding: 0.5rem;
  background: var(--tile-bg);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* Inner anchor wrapping thumb + caption (the C/Rust links are siblings —
   anchors must not nest). Grows so the links row sits at a consistent
   bottom edge across tiles whose captions wrap differently. */
.tile .tile-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.tile .thumb {
  /* `position: relative` + absolutely-positioned children below make the
     box size depend ONLY on width + aspect-ratio: neither a missing/odd-size
     <img> nor placeholder text can stretch it, so every tile's thumb block
     is identical regardless of content. */
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--placeholder-bg);
  border-radius: 4px;
  overflow: hidden;
}

.tile .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tile .placeholder {
  /* No <img>; show the example name inside the placeholder so the tile
     is still identifiable when gen-thumbnails couldn't capture it. */
}
.tile .placeholder .ph-name {
  /* Scoped to the name span only — the desktop-only badge overlay is also a
     span inside .placeholder and must keep its own corner positioning. */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  text-align: center;
  word-break: break-word;
  opacity: 0.7;
}

.tile p {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  word-break: break-word;
}

.tile .links {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  opacity: 0.7;
}

.tile .links a {
  color: var(--link-muted-fg);
  text-decoration: underline;
}

.tile .links a:hover {
  opacity: 1;
}

.badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.7rem;
  border-radius: 3px;
  background: var(--badge-bg);
  color: var(--badge-fg);
  vertical-align: middle;
}

/* Badge overlaid on the tile's thumb box (desktop-only marker). Needs an
   opaque-ish background to stay readable over thumbnail imagery. */
.thumb .badge-overlay {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  margin: 0;
  background: rgba(255, 244, 230, 0.92);
}

.hidden { display: none !important; }

nav { padding: 0.5rem 1rem; font-size: 0.9rem; }
nav a { color: inherit; }

pre {
  background: var(--placeholder-bg);
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  overflow-x: auto;
}

canvas { display: block; margin: 1rem auto; background: black; }
.hint { text-align: center; font-size: 0.85rem; opacity: 0.7; }