:root{
  --bg:#0b1220; --bg2:#0f1930; --card:#141c2f; --line:#22304d;
  --txt:#e6edf7; --dim:#8fa3c4; --dim2:#5d6f8e; --acc:#4ea1ff; --acc2:#7bd3a0;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --shadow:0 20px 50px rgba(0,0,0,.42);
}
@media (prefers-color-scheme: light){
  :root{--bg:#f6f8fc;--bg2:#eef2f9;--card:#fff;--line:#dbe3ef;--txt:#12203a;--dim:#516381;--dim2:#8798b3;--acc:#1f6fd0;--acc2:#127a52;--shadow:0 16px 40px rgba(20,40,80,.10)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1100px 620px at 50% -12%,var(--bg2) 0%,var(--bg) 58%) no-repeat,var(--bg);color:var(--txt);
  font:16px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,pre{font-family:var(--mono)}
.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 20px}
header.site{padding:26px 0 10px}
header.site .bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-weight:700;font-size:17px;letter-spacing:.4px;color:var(--txt)}
.brand:hover{text-decoration:none}
.brand .dot{color:var(--acc)}
nav.top{display:flex;gap:16px;margin-left:auto;font-size:14px;color:var(--dim)}
nav.top a{color:var(--dim)}
nav.top a:hover{color:var(--txt);text-decoration:none}
main{flex:1;padding:18px 0 56px}
.hero{padding:26px 0 30px}
.hero h1{margin:0 0 10px;font-size:30px;line-height:1.32;letter-spacing:.4px}
.hero p{margin:0;color:var(--dim);font-size:16px;max-width:56ch}
.badge{display:inline-block;font-size:12.5px;color:#ffcf70;border:1px solid #6a5220;background:#2a2110;border-radius:999px;padding:2px 11px;margin-bottom:14px}
@media (prefers-color-scheme: light){.badge{color:#8a5a00;border-color:#e6cf9a;background:#fff6dd}}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:8px 0 34px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:var(--dim);font-size:14px;line-height:1.7}
.card.link:hover{border-color:var(--acc);text-decoration:none}
.card.link:hover h3{color:var(--acc)}
h2.sec{font-size:15px;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim2);margin:0 0 12px;font-weight:600}
.list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.list li{border-bottom:1px solid var(--line);padding:13px 2px;display:flex;gap:12px;align-items:baseline}
.list li time{color:var(--dim2);font-size:13px;font-family:var(--mono);flex:none}
.list li a{font-size:15px}
.list li span{color:var(--dim2);font-size:13px;margin-left:auto;flex:none}
article.post{padding:8px 0 0}
article.post h1{font-size:26px;line-height:1.35;margin:6px 0 10px}
article.post .meta{color:var(--dim2);font-size:13px;font-family:var(--mono);margin-bottom:26px}
article.post p{color:#cfdaf0;margin:0 0 16px}
@media (prefers-color-scheme: light){article.post p{color:#26364f}}
article.post h2{font-size:18px;margin:30px 0 10px}
article.post ul,article.post ol{color:#cfdaf0;padding-left:22px}
article.post li{margin:6px 0}
pre{background:#0a1020;border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow:auto;font-size:13.5px;line-height:1.65;color:#cfe0ff}
@media (prefers-color-scheme: light){pre{background:#f2f6fd;color:#1d2c45}}
p code,li code{background:rgba(78,161,255,.12);border-radius:5px;padding:1px 6px;font-size:13.5px}
blockquote{margin:18px 0;padding:2px 16px;border-left:3px solid var(--acc);color:var(--dim)}
footer.site{border-top:1px solid var(--line);padding:18px 0 28px;color:var(--dim2);font-size:13px}
footer.site .row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
footer.site a{color:var(--dim2)}
.note{font-size:13px;color:var(--dim2);margin-top:26px}