:root { color-scheme: dark; }
* { box-sizing: border-box; }

body {
  margin: 0 auto; max-width: 1100px; padding: 0 16px;
  background: #0a0a0e; color: #d8d8e4;
  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

header { padding: 32px 0 8px; }
h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: 0.04em; }
header p { color: #7d7d92; max-width: 64ch; }
code { color: #b9b9d6; }
em { color: #c8b06a; font-style: normal; }

#flock {
  display: grid; gap: 12px; padding: 16px 0 32px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.card canvas {
  display: block; width: 100%; aspect-ratio: 1;
  background: #000; border: 1px solid #232330; cursor: pointer;
}
.card canvas.rendering { opacity: 0.85; }
.card.selected canvas { border-color: #c8b06a; }

.bar { height: 3px; background: #16161f; }
.bar-fill {
  height: 100%; width: 0; background: #c8b06a;
  transition: width 0.15s ease;
}

.meta {
  display: flex; gap: 8px; align-items: baseline;
  padding: 4px 1px; font-size: 12px; color: #8d8da4;
}
.meta .tally { color: #c8b06a; margin-left: auto; }

button {
  background: none; border: 1px solid #33334a; color: #b9b9d6;
  font: inherit; font-size: 12px; padding: 1px 8px; cursor: pointer;
}
button:hover:not(:disabled) { border-color: #c8b06a; }
button:disabled { color: #62627a; cursor: default; }
/* back = spend a credit to vote; visually distinct from the render pledge. */
button.back { border-color: #5a4a6a; color: #c8a0e0; }
button.back:hover:not(:disabled) { border-color: #c8a0e0; }
button.on { border-color: #c8b06a; color: #c8b06a; }

#nursery {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 12px; border: 1px solid #2a2a3c; margin-top: 8px;
}
#nursery canvas { width: 256px; height: 256px; background: #000; }
#nursery p { margin: 0 0 8px; color: #8d8da4; }

footer {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0 24px; color: #62627a; font-size: 12px;
}
footer a { color: #8d8da4; }