/* Basic reset / typography */
* { box-sizing: border-box; }
html,body { height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color: #111; background: #f7f7f8; }


/* Page container */
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }


/* Header */
.site-header { background: #0f1724; color: #fff; }
.header-inner { display:flex; align-items:center; gap:12px; padding:18px 0; }
.site-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: .2px; }
#search { margin-left: auto; padding:8px 10px; border-radius:6px; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: #fff; outline: none; }


/* Layout */
.main-grid { display: grid; grid-template-columns: 280px 1fr; gap: 24px; padding: 24px 0; align-items:start; }


/* Sidebar */
.sidebar { background: #fff; border-radius: 10px; padding:16px; box-shadow: 0 6px 18px rgba(17,17,17,0.06); }
.sidebar h2 { margin-top: 0; font-size: 16px; }
.posts-list { list-style: none; margin: 8px 0 0 0; padding: 0; max-height: 60vh; overflow:auto; }
.posts-list li { padding: 10px 8px; border-radius: 8px; cursor: pointer; }
.posts-list li + li { margin-top: 6px; }
.posts-list li:hover { background: #f2f6fb; }
.posts-list li.active { background: #e6f0ff; font-weight: 600; }


/* Content */
.content { background: #fff; border-radius: 10px; padding:20px; box-shadow: 0 6px 18px rgba(17,17,17,0.06); }
.post-meta { color: #6b7280; font-size: 14px; margin-bottom: 12px; }


/* Make the inner article have a fixed readable width like GitHub's MD rendering */
.post-content { line-height: 1.7; max-width: 760px; margin: 0 auto; }
.post-content h1, .post-content h2, .post-content h3 { margin-top: 1.1em; margin-bottom: 0.4em; }
.post-content p { margin-bottom: 0.8em; }


/* Code blocks */
.post-content pre { background:#0b1220; color:#e6eef8; padding:14px; border-radius:8px; overflow:auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Helvetica Neue", monospace; font-size: 13px; }
.post-content pre code { background: transparent; color: inherit; padding: 0; }


/* Inline code */
.post-content code { background: #f3f4f6; padding: 2px 6px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; color: #111; font-size: 13px; }


/* Tables */
.post-content table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.post-content th, .post-content td { border: 1px solid #e6e6e6; padding: 8px 10px; text-align: left; }
.post-content th { background: #f6f8fa; }


/* Images: responsive and constrained to content column width */
.post-content img { max-width: 100%; height: auto; display: block; margin: 12px 0; border-radius: 6px; }


/* Blockquotes */
.post-content blockquote { border-left: 4px solid #e6e6e6; padding-left: 12px; color: #4b5563; margin: 12px 0; }


/* Responsive */
@media (max-width: 820px) {
.main-grid { grid-template-columns: 1fr; }
#search { display: none; }
.posts-list { max-height: none; }
.post-content { max-width: 100%; padding: 0