:root { color-scheme: dark; }
body { margin: 0; background: #0e0e0e; color: #d4d4d4; font: 16px/1.7 Inter, sans-serif; }
#home-header { display: flex; justify-content: flex-end; padding: 1.25rem 1rem; }
#home-header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem 1.25rem; }
#home-header .top-link { margin: 0; color: #a8a8a8; text-decoration: none; font: 400 .8rem "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
#home-header .top-link:hover { color: #e6e6e6; }
main { max-width: 44rem; margin: 0 auto; padding: 3rem 1rem 5rem; }
h1, h2 { font-family: "JetBrains Mono", monospace; font-weight: 700; line-height: 1.3; color: #e6e6e6; }
h1 { margin: 0 0 1rem; font-size: 2rem; }
h2 { margin: 3rem 0 1rem; font-size: 1.2rem; }
a { color: #e6e6e6; text-underline-offset: 3px; }
li { margin: .5rem 0; }
.lead { margin: 0; font-size: 1.15rem; }
#hero { padding-bottom: 1rem; border-bottom: 1px solid #222222; }
#hero h2 { margin-top: 2.5rem; }
#hero pre { margin: 0; padding: 1rem 3.5rem 1rem 1.25rem; background: #161616; border: 1px solid #333333; border-radius: 4px; }
#hero code { font: 400 .95rem/1.6 "JetBrains Mono", monospace; color: #e6e6e6; white-space: pre-wrap; overflow-wrap: anywhere; }
.note { color: #a8a8a8; font-size: .95rem; }