:root { color-scheme: light dark; --ink:#16181d; --bg:#fbfaf7; --quiet:#6a6f7a; --rule:#e3e0d8; --link:#2f5d50; }
@media (prefers-color-scheme: dark) { :root { --ink:#e8e6e1; --bg:#14161a; --quiet:#9aa0aa; --rule:#272b32; --link:#7fbca9; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 Georgia, "Times New Roman", serif; }
header, main, footer { max-width: 40rem; margin:0 auto; padding:0 20px; }
header { display:flex; justify-content:space-between; align-items:baseline; padding-block:28px; border-bottom:1px solid var(--rule); }
.mark { font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-family:ui-monospace, Menlo, monospace; font-size:14px; }
nav a { margin-left:18px; font-size:14px; }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
main { padding-block:40px 56px; }
h1 { font-size:30px; line-height:1.2; margin:0 0 18px; }
h2 { font-size:19px; margin:34px 0 12px; }
.notes { list-style:none; padding:0; margin:0; }
.notes li { padding:12px 0; border-bottom:1px solid var(--rule); }
.notes span { font-family:ui-monospace, Menlo, monospace; font-size:13px; color:var(--quiet); margin-right:12px; }
.quiet { color:var(--quiet); font-size:15px; }
footer { border-top:1px solid var(--rule); padding-block:20px 40px; color:var(--quiet); font-size:14px; }