:root { --bg:#14110d; --panel:#1f1a14; --text:#e8dcc4; --muted:#a39478; --accent:#f2a93b; --line:#3a3127; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 Georgia, "Times New Roman", serif; }
a { color:var(--accent); }
.wrap { max-width:1040px; margin:0 auto; padding:0 16px; }
header { border-bottom:1px solid var(--line); background:#0f0c09; }
header .wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:14px; padding-bottom:14px; }
.logo { font:700 22px/1 "Courier New", monospace; color:var(--text); text-decoration:none; letter-spacing:2px; }
.logo span { color:var(--accent); }
nav a { margin-left:18px; color:var(--muted); text-decoration:none; font-family:"Courier New", monospace; }
nav a:hover { color:var(--accent); }
.hero { padding:48px 0 24px; }
h1 { font-size:34px; margin:24px 0 8px; }
h2 { color:var(--accent); font-family:"Courier New", monospace; font-size:20px; margin-top:36px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:18px; }
.card h3 { margin:8px 0; }
.card p { color:var(--muted); margin:0 0 12px; }
.tag { font:12px "Courier New", monospace; text-transform:uppercase; color:var(--bg); background:var(--accent); padding:2px 8px; border-radius:3px; }
.meta { font:13px "Courier New", monospace; color:var(--muted); }
.note { background:var(--panel); border-left:3px solid var(--accent); padding:4px 20px 12px; margin:36px 0; }
pre { background:#0f0c09; border:1px solid var(--line); padding:14px; overflow-x:auto; }
footer { border-top:1px solid var(--line); margin-top:48px; color:var(--muted); font-size:14px; padding:12px 0; }