* { box-sizing: border-box; margin: 0; }
:root { --bg:#101418; --panel:#1a2129; --text:#e8e6e0; --dim:#8a94a0; --accent:#e8b23a; --green:#58b368; --line:#232b34; }
body { background:var(--bg); color:var(--text); font:16px/1.6 -apple-system,"Segoe UI",Roboto,sans-serif; }
header { display:flex; align-items:baseline; gap:18px; padding:14px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.logo { font-weight:700; font-size:20px; color:inherit; text-decoration:none; }
.accent { color:var(--accent); }
nav { display:flex; gap:16px; margin-left:auto; }
nav a { color:var(--dim); text-decoration:none; font-size:14px; }
nav a:hover { color:var(--text); }
main { max-width:760px; margin:0 auto; padding:36px 20px 60px; }
h1 { font-size:30px; line-height:1.25; margin-bottom:14px; }
h2 { font-size:21px; margin:30px 0 10px; }
p { margin:12px 0; }
a { color:var(--accent); }
ul { margin:12px 0 12px 22px; }
li { margin:6px 0; }
.lead { font-size:18px; color:var(--dim); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin:14px 0; }
.card h3 { font-size:17px; margin-bottom:6px; }
.card p { color:var(--dim); font-size:14px; margin:4px 0; }
.tag { display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--accent); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.cta { display:inline-block; background:#2e7d46; color:#fff; padding:12px 22px; border-radius:9px; text-decoration:none; font-weight:600; margin-top:10px; }
.note { color:var(--dim); font-size:14px; }
code { background:#12181f; border:1px solid #2a3441; border-radius:5px; padding:1px 6px; font-size:14px; }
footer { border-top:1px solid var(--line); color:var(--dim); font-size:13px; padding:18px 20px; text-align:center; margin-top:40px; }
blockquote { border-left:3px solid var(--accent); padding:6px 14px; background:var(--panel); border-radius:0 8px 8px 0; margin:14px 0; font-style:italic; }