:root{
  --bg:#0b0f13; --bg-alt:#0e141b; --card:#0f1720; --muted:#9aa4b2; --text:#e6eef3;
  --accent:#6ee7b7; /* default accent */
  --accent-cyber:#48d1c5;
  --accent-ai:#b48ef7;
  --radius:16px; --maxw:1100px; --ff:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue';
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--ff);background:linear-gradient(180deg,#05070b 0%, var(--bg) 100%);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:var(--accent);text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:28px 22px}
header.site-header{position:sticky;top:0;backdrop-filter:saturate(140%) blur(12px);background:rgba(10,15,20,0.55);border-bottom:1px solid rgba(255,255,255,0.06);z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#133,rgba(0,0,0,.25));display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent)}
.site-title{margin:0;font-size:18px}
nav.site-nav a{margin:0 10px;color:var(--muted)}
nav.site-nav a.active, nav.site-nav a:hover{color:var(--accent)}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);padding:22px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 6px 30px rgba(2,6,23,0.4)}
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid.two,.grid.three{grid-template-columns:1fr} nav.site-nav{display:none} .menu-toggle{display:inline-block}}
.menu-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,0.08);padding:8px 10px;border-radius:10px;color:var(--text)}
.mobile-nav{display:none;padding:10px 0;border-top:1px dashed rgba(255,255,255,0.06)}
.mobile-nav a{display:block;padding:8px 0;color:var(--muted)}
h1,h2,h3{margin:0 0 8px}
h1{font-size:28px} h2{font-size:22px} h3{font-size:18px}
.lead{color:var(--muted);margin-top:4px}
footer.site-footer{margin:40px 0 60px;color:var(--muted);text-align:center}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{background:rgba(255,255,255,0.04);padding:6px 10px;border-radius:999px;color:var(--muted);font-size:13px}
.section{margin:26px 0}
/* accent helpers */
.accent-cyber{--accent: var(--accent-cyber)}
.accent-ai{--accent: var(--accent-ai)}
/* fade in */
.fade-in{opacity:0;transform:translateY(10px);transition:all .6s cubic-bezier(.2,.9,.25,1)}
.in-view{opacity:1;transform:none}
/* post styles */
.post header{margin-bottom:12px}
.post .meta{color:var(--muted);font-size:14px}
.posts-list article{padding:18px;border:1px solid rgba(255,255,255,0.05);border-radius:14px;background:rgba(255,255,255,0.02)}
kbd{background:#111a22;border:1px solid rgba(255,255,255,0.08);border-bottom-width:2px;padding:2px 6px;border-radius:6px;font-size:12px}