:root{
  --bg0:#0c1015; --bg1:#0f141a; --panel:#10151c; --muted:#9aa3af; --fg:#e9ecf1; --link:#9ec5ff; --accent:#5aa3ff;
  --max:1120px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 50% 18%, var(--bg1) 0%, var(--bg0) 52%, #0a0d12 100%);
  color:var(--fg);
  font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:16px}
.header{display:flex;align-items:center;justify-content:space-between;padding:16px;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0));position:sticky;top:0;backdrop-filter:saturate(110%) blur(4px)}
.brand{font-family:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC',sans-serif;font-weight:800;letter-spacing:.3px;font-size:clamp(22px,3.5vw,36px)}
.nav a{margin-left:14px;opacity:.95}
.main{padding:12px 0}
.grid{display:grid;gap:14px}
@media (min-width: 900px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.card{background:rgba(16,21,28,.9);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.card h3{margin:4px 0 6px 0;font-size:1.05rem}
.meta{color:var(--muted);font-size:.9rem}
.excerpt{margin-top:6px;color:#dfe5ec}
.footer{opacity:.7;text-align:center;padding:24px 0}
/* subnav buttons */
.subnav{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 18px}
.subnav a{padding:8px 12px;border-radius:14px;background:rgba(16,21,28,.85);border:1px solid rgba(255,255,255,.1)}
/* clamp (preserve HTML) */
.clamped-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* panels & form controls */
.panel{background:rgba(16,21,28,.92);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px}
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #2a2f3a;background:#0f1218;color:var(--fg)}
button{padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:#1b2330;color:var(--fg);cursor:pointer}
button.primary{background:linear-gradient(180deg,#2a6bf0,#235bd1);border:none}
.btns{display:flex;gap:10px;flex-wrap:wrap}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.post-content h1,.post-content h2,.post-content h3{margin:1em 0 .5em}
.post-content p{margin:.6em 0}
.post-content ul{padding-left:1.2em}
.post-content blockquote{border-left:3px solid rgba(255,255,255,.2);margin:.6em 0;padding:.1em .8em;color:#cfd6df}