:root { --bg:#0e1116; --card:#171c24; --ink:#e7edf3; --muted:#9aa7b4; --accent:#4c8dff; --line:#232a34; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
.wrap { max-width:860px; margin:0 auto; padding:48px 24px 80px; }
h1 { font-size:2rem; margin:0 0 6px; letter-spacing:-.02em; }
.tag { color:var(--muted); margin:0 0 28px; }
.lede { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin:0 0 32px; }
.lede p { margin:0 0 10px; } .lede p:last-child { margin:0; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 28px; }
@media (max-width:640px){ .grid{ grid-template-columns:1fr; } }
.btn { display:block; text-decoration:none; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px 18px; transition:.15s; }
.btn:hover { border-color:var(--accent); transform:translateY(-2px); }
.btn .k { font-size:1.25rem; font-weight:650; margin-bottom:6px; }
.btn .d { color:var(--muted); font-size:.92rem; }
.btn .n { color:var(--accent); font-size:.8rem; margin-top:10px; letter-spacing:.03em; }
.more { display:inline-block; margin-top:8px; color:var(--accent); text-decoration:none; border:1px solid var(--line); border-radius:8px; padding:10px 16px; }
.more:hover { border-color:var(--accent); }
.foot { color:var(--muted); font-size:.85rem; margin-top:40px; border-top:1px solid var(--line); padding-top:16px; }
code { background:#0b0e13; padding:1px 5px; border-radius:4px; font-size:.9em; }