:root {
  --bg: #f6f3ec;
  --ink: #23272a;
  --muted: #6b7175;
  --accent: #2f6f8f;
  --card: #fffdf8;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161c20;
    --ink: #e4e8ea;
    --muted: #98a3a9;
    --accent: #7ab6d4;
    --card: #20282e;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 system-ui, sans-serif;
}
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}
a {
  color: var(--accent);
}
.lead {
  color: var(--muted);
}
.card {
  background: var(--card);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.grid img {
  width: 100%;
  border-radius: 8px;
  background: var(--card);
}
.grid figure {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
button {
  font: inherit;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}