body { font-family: Arial, sans-serif; margin: 20px; background: #f0f0f0; }
header { background: #007acc; color: white; padding: 10px; }
nav a { margin: 0 10px; text-decoration: none; color: #007acc; }
footer { margin-top: 50px; font-size: 0.9em; color: #666; }

article { background:#fff; padding:20px 28px; margin:16px 0; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,.08); line-height:1.75; max-width:820px; }
article h1 { color:#007acc; } article h2 { color:#005a99; margin-top:1.3em; border-left:4px solid #007acc; padding-left:10px; }
article img { max-width:100%; height:auto; display:block; margin:18px auto; border:1px solid #e6e6e6; border-radius:4px; }
article pre { background:#1e1e1e; color:#dcdcdc; padding:12px 14px; border-radius:4px; overflow:auto; }
article code { font-family:Consolas,Monaco,monospace; }
.post-meta { color:#888; font-size:.9em; }
#posts-list ul { list-style:none; padding:0; max-width:820px; }
#posts-list li { background:#fff; margin:8px 0; padding:12px 16px; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
#posts-list small { color:#999; float:right; }
.post-nav { display:flex; justify-content:space-between; max-width:820px; margin:18px 0; gap:12px; }
.post-nav a { background:#fff; padding:10px 14px; border-radius:6px; text-decoration:none; color:#007acc; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.post-nav a:hover { background:#eaf3fb; }