:root {
  --latar: #f6f4ef;
  --teks: #1f1d1a;
  --redup: #6b665d;
  --kartu: #ffffff;
  --garis: #e2ded4;
  --aksen: #b4541a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --latar: #171614;
    --teks: #efece6;
    --redup: #a39e94;
    --kartu: #22201d;
    --garis: #34312c;
    --aksen: #e58a4e;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 720px; margin: 0 auto; padding: 56px 16px; }
h1 { margin: 0; font-size: 40px; letter-spacing: -0.02em; }
.sub { margin: 4px 0 32px; color: var(--redup); font-size: 18px; }
.pilihan { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kartu {
  display: block;
  padding: 20px;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
.kartu:hover, .kartu:focus-visible { border-color: var(--aksen); }
.kartu strong { display: block; font-size: 20px; color: var(--aksen); margin-bottom: 6px; }
.kartu span { color: var(--redup); }
.catatan { margin-top: 32px; color: var(--redup); font-size: 14px; }