/* === Reset & Base === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;line-height:1.7}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans SC',sans-serif;
  background:#f8f9fa;color:#1a1a2e;transition:.3s;min-height:100vh}
body.dark{background:#0f0f1a;color:#e0e0e0}
a{color:#2563eb;text-decoration:none}
a:hover{text-decoration:underline}
body.dark a{color:#60a5fa}
img{max-width:100%;height:auto;border-radius:8px}
pre{overflow-x:auto;padding:1rem;border-radius:8px;background:#1e1e2e;color:#cdd6f4}
code{font-family:'JetBrains Mono','Fira Code',monospace;font-size:.9em}
p code{background:#e8e8ef;padding:.15em .35em;border-radius:4px}
body.dark p code{background:#2a2a3e}
h1,h2,h3,h4{line-height:1.3;margin:1.5em 0 .5em}
h1{font-size:2em}
h2{font-size:1.6em;border-bottom:1px solid #e0e0e0;padding-bottom:.3em}
body.dark h2{border-color:#2a2a3e}
h3{font-size:1.25em}
p,ul,ol{margin-bottom:1em}
ul,ol{padding-left:1.5em}
blockquote{border-left:4px solid #2563eb;padding:.5em 1em;margin:1em 0;background:#f0f4ff;border-radius:0 8px 8px 0}
body.dark blockquote{background:#1a1a3e}

/* === Layout === */
.container{max-width:820px;margin:0 auto;padding:0 1.5rem}

/* === Header === */
.site-header{border-bottom:1px solid #e0e0e0;padding:1rem 0;margin-bottom:2rem}
body.dark .site-header{border-color:#2a2a3e}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:820px;margin:0 auto;padding:0 1.5rem}
.logo{font-size:1.3em;font-weight:700}
nav{display:flex;gap:1.2rem}
nav a{color:inherit;font-size:.95em}
.theme-toggle{background:none;border:none;cursor:pointer;font-size:1.2em;padding:.2em}

/* === Footer === */
.site-footer{border-top:1px solid #e0e0e0;margin-top:3rem;padding:1.5rem 0;text-align:center;font-size:.9em;color:#666}
body.dark .site-footer{border-color:#2a2a3e;color:#999}
.footer-meta{margin-top:.3em}
.pipeline-badge{font-size:.85em;opacity:.7}

/* === Homepage === */
.hero{padding:2rem 0 1rem}
.hero h1{font-size:2.2em;margin-bottom:.3em}
.hero .subtitle{font-size:1.1em;color:#666}
body.dark .hero .subtitle{color:#999}
.post-list{list-style:none;padding:0}
.post-item{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #eee}
body.dark .post-item{border-color:#2a2a3e}
.post-item:last-child{border:none}
.post-title{font-size:1.4em;margin-bottom:.3em}
.post-meta{font-size:.85em;color:#888;margin-bottom:.5em}
.post-summary{font-size:.95em;color:#555}
body.dark .post-summary{color:#aaa}
.post-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.tag{background:#e0e7ff;color:#2563eb;padding:.15em .6em;border-radius:4px;font-size:.8em}
body.dark .tag{background:#1e1e3e;color:#60a5fa}

/* === Single Page === */
.article-header{margin-bottom:2rem}
.article-header h1{font-size:2em;margin-bottom:.3em}
.article-meta{font-size:.9em;color:#888;display:flex;gap:1rem;flex-wrap:wrap}
.article-content{line-height:1.8}
.article-content img{margin:1.5rem 0}
.article-content table{width:100%;border-collapse:collapse;margin:1rem 0}
.article-content th,.article-content td{border:1px solid #ddd;padding:.5em .8em;text-align:left}
body.dark .article-content th,body.dark .article-content td{border-color:#333}
.article-content th{background:#f0f0f5}
body.dark .article-content th{background:#1e1e2e}

/* === Tags === */
.tag-cloud{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.tag-cloud a{background:#e0e7ff;padding:.3em .8em;border-radius:6px;font-size:.9em}
body.dark .tag-cloud a{background:#1e1e3e}

/* === Mermaid === */
.mermaid{text-align:center;margin:1.5rem 0}

/* === Responsive === */
@media(max-width:600px){
  .header-inner{flex-wrap:wrap;gap:.5rem}
  nav{order:3;width:100%;justify-content:center;font-size:.9em}
  .hero h1{font-size:1.6em}
  .article-header h1{font-size:1.5em}
}

/* === Code Highlight === */
.highlight pre{background:#1e1e2e}