/* dequeue.work: follows the system theme; colours are Keedown's GitHub palettes. */
:root { --bg: #ffffff; --card: #f6f8fa; --fg: #1f2328; --muted: #59636e; --border: #d1d9e0; --accent: #0969da; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0d1117; --card: #151b23; --fg: #e6edf3; --muted: #9198a1; --border: #30363d; --accent: #58a6ff; color-scheme: dark; }
}
/* One image per theme. These rules must win over any layout rule that sets display on an img. */
:root .on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root .on-dark { display: block; }
  :root .on-light { display: none; }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }
main { flex: 1; padding-top: 12vh; }
.mark { margin: 0; }
.mark img { width: 100%; height: auto; vertical-align: top; }
.lead { margin: 8px 0 0; text-align: center; color: var(--muted); font-size: 19px; }
.products { list-style: none; padding: 0; margin: 56px 0 0; display: grid; gap: 12px; }
.product { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px;
  color: var(--fg); text-decoration: none; transition: border-color .15s, background .15s; }
.product:hover { border-color: var(--accent); background: var(--card); }
.product img { border-radius: 8px; flex: none; }
.product span { display: flex; flex-direction: column; flex: 1; }
.product small { color: var(--muted); font-size: 15px; }
.product svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.foot { padding-top: 48px; padding-bottom: 32px; color: var(--muted); font-size: 14px; text-align: center; }