* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; color: #111; background: #fff; }

.container { max-width: 960px; padding: 0 16px; margin: 0 auto; }

.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,0.9); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid #eee; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.brand { font-weight: 700; text-decoration: none; color: #111; }
.nav a { color: #333; text-decoration: none; margin-left: 16px; }
.nav a:hover { color: #000; }

.hero { padding: 32px 0; border-bottom: 1px solid #f2f2f2; }
.hero h1 { margin: 0 0 8px; font-size: 28px; }
.hero p { margin: 0; color: #555; }

.post-list { padding: 24px 0 48px; display: grid; grid-template-columns: 1fr; gap: 20px; }
.post-item { padding-bottom: 16px; border-bottom: 1px dashed #eee; }
.post-title { font-size: 18px; font-weight: 600; color: #0f62fe; text-decoration: none; }
.post-title:hover { text-decoration: underline; }
.meta { margin: 6px 0; color: #777; font-size: 14px; }
.dot { margin: 0 8px; color: #ccc; }
.excerpt { margin: 8px 0 0; color: #444; }

.content { padding: 24px 0 56px; line-height: 1.75; font-size: 16px; }
.content h1, .content h2, .content h3 { line-height: 1.35; }
.content pre { background: #0b1021; color: #e6e6e6; padding: 12px 14px; overflow: auto; border-radius: 6px; }
.content code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.content a { color: #0f62fe; text-decoration: none; }
.content a:hover { text-decoration: underline; }

.site-footer { border-top: 1px solid #eee; background: #fafafa; }
.site-footer .container { display: flex; align-items: center; justify-content: center; gap: 8px; height: 64px; color: #555; font-size: 14px; }
.site-footer .icp { color: #666; text-decoration: none; }
.site-footer .icp:hover { color: #111; text-decoration: underline; }

@media (min-width: 720px) {
  .post-list { grid-template-columns: 1fr; }
  .post-title { font-size: 20px; }
}