:root {
  --bg: #f9fafb;
  --fg: #1f2937;
  --accent: #6366f1;
  --accent-light: #a5b4fc;
  --border: #e5e7eb;
  --maxw: 820px;
}
html {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
body { margin: 0; padding: 0 1rem 4rem; display: flex; flex-direction: column; align-items: center; }
header { width: 100%; max-width: var(--maxw); padding: 3rem 0 1rem; text-align: center; }
header h1 { margin: 0; font-size: 2.25rem; line-height: 1.2; color: var(--accent); }
header p { margin: .5rem 0 0; color: #6b7280; }
main { width: 100%; max-width: var(--maxw); }
footer { width: 100%; max-width: var(--maxw); margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .875rem; color: #6b7280; text-align: center; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.post-list { list-style: none; padding: 0; margin: 2rem 0; }
.post-item { padding: 1.25rem 1rem; border: 1px solid var(--border); border-radius: .5rem; background: #fff; margin-bottom: 1rem; transition: box-shadow .15s; }
.post-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.post-item h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.post-meta { font-size: .75rem; color: #9ca3af; margin-bottom: .75rem; }
.back-home { display: inline-block; margin: 2rem 0 0; font-size: .875rem; }
pre { background: #f3f4f6; padding: 1rem; overflow-x: auto; border-radius: .375rem; border: 1px solid var(--border); }
code { font-family: ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace; font-size: .875rem; }
h1, h2, h3 { scroll-margin-top: 3rem; }