:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #ececec;
  background: #111214;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 0%, #24201a 0, #111214 34rem); }
main { width: min(920px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(3rem, 8vw, 7rem) 0; }
header { max-width: 760px; }
.eyebrow { margin: 0 0 .8rem; color: #d7ad53; font: 600 .82rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.5rem, 7vw, 5.1rem); line-height: .98; letter-spacing: -.055em; font-weight: 680; }
.lede { margin: 1.5rem 0 0; max-width: 700px; color: #b9b9ba; font-size: 1.08rem; line-height: 1.7; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: 3rem; }
.card { display: flex; flex-direction: column; gap: .65rem; min-height: 120px; justify-content: space-between; padding: 1.1rem; border: 1px solid #333438; border-radius: 14px; color: inherit; text-decoration: none; background: rgba(24,25,28,.86); transition: border-color .12s ease, transform .12s ease; }
.card:hover, .card:focus-visible { border-color: #7d6b44; transform: translateY(-1px); outline: none; }
.card span { font-weight: 620; }
code { color: #d7ad53; overflow-wrap: anywhere; }
.note { margin-top: 2rem; padding-top: 1.7rem; border-top: 1px solid #2e3033; color: #b9b9ba; line-height: 1.7; }
.note h2 { color: #eee; font-size: 1rem; margin: 0 0 .5rem; }
.note p { margin: 0; }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: light) {
  :root { color: #202124; background: #f6f4ef; }
  body { background: radial-gradient(circle at 15% 0%, #fff1cc 0, #f6f4ef 34rem); }
  .lede, .note { color: #5d5e62; }
  .card { background: rgba(255,255,255,.82); border-color: #d8d5ce; }
  .card:hover, .card:focus-visible { border-color: #a57b20; }
  .note { border-color: #d8d5ce; }
  .note h2 { color: #202124; }
  code, .eyebrow { color: #8a6108; }
}