:root {
  --ink: #0f172a;
  --paper: #ffffff;
  --accent: #1d4ed8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2 { line-height: 1.2; }

a { color: var(--accent); }

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

@media (prefers-color-scheme: dark) {
  :root { --ink: #e2e8f0; --paper: #0b1120; --accent: #93c5fd; }
}

@supports (display: grid) {
  .fallback { display: none; }
}