:root { color-scheme: dark; }
body { margin: 0; font-family: system-ui, sans-serif; background: #12100e; color: #eee6d8; }
main { max-width: 64rem; margin: 0 auto; padding: 3rem 1.5rem 1rem; }
h1 { margin: 0 0 0.5rem; }
.lede { opacity: 0.8; }
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.card a { display: block; height: 100%; box-sizing: border-box; padding: 1rem; border: 1px solid #4a4238; border-radius: 8px; color: inherit; text-decoration: none; }
.card a:hover { border-color: #c9a45c; }
.card__num { opacity: 0.6; font-variant-numeric: tabular-nums; }
.card h2 { margin: 0.25rem 0 0.5rem; }
.card__try { font-size: 0.9rem; opacity: 0.75; }