/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.6;color:#e6edf3;background:#0f1720}
.wrap{max-width:900px;margin:0 auto;padding:2rem}
.site-header{background:linear-gradient(90deg,#111827,#0b1220);border-bottom:1px solid rgba(255,255,255,0.04)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem}
.site-title a{color:#fff;text-decoration:none;font-size:1.25rem}
nav a{color:#9aa6b2;text-decoration:none;margin-left:1rem}
nav a:hover{color:#fff}
.search{margin:1.25rem 0}
#searchInput{width:100%;padding:.75rem 1rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:#0b1220;color:#e6edf3}
.posts{display:grid;grid-template-columns:1fr;gap:1rem}
.post-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:1rem;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
.post-card h2{font-size:1.1rem;margin-bottom:.25rem}
.post-meta{font-size:.85rem;color:#94a3b8;margin-bottom:.5rem}
.post-excerpt{color:#cbd5e1}
.tags{margin-top:.5rem}
.tag{display:inline-block;background:rgba(255,255,255,0.03);color:#9fb4d6;padding:.2rem .5rem;border-radius:999px;font-size:.75rem;margin-right:.4rem}
.site-footer{padding:2rem 0;color:#94a3b8;text-align:center;border-top:1px solid rgba(255,255,255,0.03);margin-top:2rem}
/* post page */
.post-content{background:linear-gradient(180deg,#071127,#05111a);padding:2rem;border-radius:8px;color:#e6edf3}
.post-content h1{margin-bottom:.5rem}
.post-content .meta{color:#94a3b8;margin-bottom:1rem}
.post-content img{max-width:100%;border-radius:6px}
pre{background:#0b1220;padding:1rem;border-radius:6px;overflow:auto}
code{background:rgba(255,255,255,0.02);padding:.15rem .3rem;border-radius:4px}
@media(min-width:700px){
  .posts{grid-template-columns:repeat(2,1fr)}
}
/* accessibility focus */
a:focus,button:focus,input:focus{outline:2px solid #84a3d4;outline-offset:1px}

a {
    color: #5e8cd4;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}