:root { --ink:#1d2730; --soft:#5b6873; --line:#dfe4e8; --bg:#fbfaf7; --accent:#0e6ba8; }
@media (prefers-color-scheme: dark) { :root { --ink:#e8ecef; --soft:#a3aeb7; --line:#33404a; --bg:#161c21; --accent:#6db6e8; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 Georgia, "Noto Serif", serif; }
main, header, footer { max-width:720px; margin:0 auto; padding:0 16px; }
header { padding-top:40px; padding-bottom:8px; border-bottom:1px solid var(--line); }
header a { color:var(--ink); text-decoration:none; font-size:20px; letter-spacing:.02em; }
h1 { font-size:32px; line-height:1.2; margin:32px 0 8px; font-weight:normal; }
h2 { font-size:22px; margin:32px 0 8px; font-weight:normal; }
a { color:var(--accent); }
.lede { color:var(--soft); font-size:19px; margin-top:0; }
.app { display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); }
.app img { width:64px; height:64px; border-radius:14px; flex:none; }
.app h2 { margin:0; }
.app p { margin:4px 0; }
.small { color:var(--soft); font-size:15px; }
footer { margin-top:48px; padding-top:16px; padding-bottom:40px; border-top:1px solid var(--line); color:var(--soft); font-size:14px; }