:root { color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.65; background: #f4f2eb; color: #19332e; }
body { margin: 0; }
main, nav, footer { max-width: 48rem; margin: auto; padding: 1.5rem; }
nav { display: flex; gap: 1.5rem; border-bottom: 1px solid #bdc9c3; }
nav a, a { color: #176959; text-underline-offset: .2em; }
h1, h2 { line-height: 1.2; }
h1 { font-size: clamp(2rem, 6vw, 3rem); }
h2 { margin-top: 2rem; }
li { margin-bottom: .5rem; }
footer { font-size: .9rem; border-top: 1px solid #bdc9c3; }
.draft { padding: 1rem; border: 2px solid #976a11; background: #fff2cf; color: #513800; }
:focus-visible { outline: 3px solid #176959; outline-offset: 4px; }
@media (prefers-color-scheme: dark) {
  :root { background: #101c19; color: #e9ede7; }
  a, nav a { color: #92d5c5; }
  nav, footer { border-color: #41554d; }
}