:root{
  --bg:#0b1020;
  --panel:#11182d;
  --panel-2:#18213a;
  --text:#e7ecf7;
  --muted:#aab6cf;
  --link:#8ec5ff;
  --accent:#9effd8;
  --border:rgba(255,255,255,0.08);
  --code:#0a1326;
  --max:840px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:linear-gradient(180deg,#09101d 0%,#0d1528 100%);
  color:var(--text);
  line-height:1.75;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.site-header{
  border-bottom:1px solid var(--border);
  background:rgba(9,16,29,.75);
  backdrop-filter: blur(10px);
  position:sticky;top:0;z-index:20;
}
.nav{display:flex;justify-content:space-between;align-items:center;padding:18px 0;gap:16px}
.brand{font-weight:700;color:var(--text);letter-spacing:.2px}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:.82rem}
.nav-links{display:flex;gap:18px;flex-wrap:wrap}
.hero{padding:72px 0 38px}
.hero-card,.card{
  background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));
  border:1px solid var(--border);
  border-radius:24px;
  padding:28px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.hero h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.08;margin:0 0 12px}
.hero p{margin:0;color:var(--muted);font-size:1.06rem}
.section{padding:18px 0 42px}
.post-list{display:grid;gap:18px}
.post-card h2,.post-card h3{margin:0 0 8px}
.meta{font-size:.92rem;color:var(--muted);margin-bottom:12px}
.excerpt{color:#d7e0f1}
.footer{
  margin-top:48px;border-top:1px solid var(--border);padding:28px 0 54px;color:var(--muted);font-size:.94rem
}
article{padding:48px 0}
article h1{font-size:clamp(2rem,4vw,3rem);line-height:1.12;margin:0 0 12px}
article p{margin:18px 0}
article code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:rgba(255,255,255,0.06);
  padding:.18em .4em;
  border-radius:8px;
  font-size:.94em;
}
pre{
  background:var(--code);
  border:1px solid var(--border);
  padding:16px;
  border-radius:16px;
  overflow:auto;
}
pre code{background:none;padding:0}
.tag{
  display:inline-block;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--accent);
  font-size:.85rem;
  margin-right:8px;
  margin-bottom:8px;
}
.grid-2{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
}
.note{
  color:var(--muted);
  font-size:.95rem;
}
@media (max-width:760px){
  .grid-2{grid-template-columns:1fr}
  .nav{align-items:flex-start;flex-direction:column}
}