/* Minimal, readable styles - Terminal Green theme */
:root{
  color-scheme: dark;
  /* Terminal palette */
  --bg:#000000;        /* background */
  --panel:#0a0f0a;     /* panel surfaces */
  --card:#0a110a;      /* card surfaces */
  --text:#a8ffb0;      /* primary text (soft green) */
  --muted:#6eb77a;     /* muted text */
  --accent:#00ff7f;    /* links / accents */
  --border:#1a3a1a;    /* borders */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;
  color:var(--text); background:linear-gradient(180deg,#000,#001600 50%,#000);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px,92%); margin-inline:auto}

.site-header{position:sticky; top:0; backdrop-filter:saturate(120%) blur(8px);
  background:rgba(0,20,0,.7); border-bottom:1px solid var(--border); z-index:10}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{font-weight:700; letter-spacing:.2px}
.nav{display:flex; gap:16px}
.nav-link{padding:6px 10px; border-radius:6px}
.nav-link.active,.nav-link:hover{background:rgba(0,255,127,.12)}

.hero{padding:56px 0 28px}
h1,h2,h3{line-height:1.2; margin:0 0 .6rem}
.muted{color:var(--muted)}
.section{padding:28px 0}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px}
.summary{color:var(--muted); margin:.2rem 0 0}

.post{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:18px}
.code{background:#000000; border:1px solid var(--border); border-radius:10px; padding:12px; overflow:auto}
code,pre,code *{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}

/* Make post images responsive and tidy */
.post img{max-width:100%; height:auto; display:block; border:1px solid var(--border); border-radius:10px}

.site-footer{border-top:1px solid var(--border); margin-top:40px}
.site-footer .container{padding:18px 0}

@media (max-width:600px){ .nav{gap:8px} .hero{padding:36px 0 14px} }