:root{
  --bg:#171b1b;
  --bg-elev:#15151a;
  --text:#e8e8ea;
  --muted:#b9b9c2;
  --border:#2a2a33;
  --accent:#c75c14; /* orange */
  --accent-fg:#0e0e10;
  --focus:#88aaff;
  --code-bg:#13141a;
  --code-border:#242636;
  --link:#ffd1ad;
  --table-row:#11131a;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.6 "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.wrap{max-width:860px;margin:0 auto;padding:0 20px}
.content.wrap{padding:32px 20px 80px}

.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;background:var(--accent);color:#000;padding:8px 10px;border-radius:6px}

.site-header{
  background:linear-gradient(180deg, #111115, #0d0d10);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:40;
  box-shadow:var(--shadow);
}
.site-header .wrap{display:flex;align-items:center;gap:18px;padding:14px 20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#c75c14;font-weight:700}
.brand img{width:22px;height:22px}
.brand span{font-family:"Oswald", Impact, system-ui, sans-serif; letter-spacing:.5px; font-size:18px}

.site-nav{margin-left:auto;display:flex;gap:16px}
.site-nav a{
  color:#c75c14; text-decoration:none; padding:8px 10px; border-radius:10px;
  border:1px solid transparent;
}
.site-nav a:hover{color:#c75c14}
.site-nav a:focus{outline:2px solid var(--focus);outline-offset:2px}

.home-title{
  font-family:"Oswald", Impact, system-ui, sans-serif;
  font-size:32px; line-height:1.15; margin:16px 0 8px;
}
h1,h2,h3,h4{
  font-family:"Oswald", Impact, system-ui, sans-serif;
}
h1{font-size:30px} h2{font-size:22px;margin-top:20px} h3{font-size:18px;margin-top:24px}

.intro,.categories,.post-list,.page header{
  background:var(--bg-elev); border:1px solid var(--border); border-radius:14px; padding:0px 20px; margin:22px 0;
}
.intro p{color:var(--muted)}

.category-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;padding:0;margin:12px 0 0}
.category-grid li{
  background:#101217;border:1px solid var(--border);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center
}
.category-grid a{color:var(--link);text-decoration:none}
.category-grid .count{background:var(--accent);color:var(--accent-fg);padding:2px 8px;border-radius:999px;font-size:12px}

.posts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.post-card{
  background:#101217;border:1px solid var(--border);border-radius:12px;padding:14px;
}
.post-card .post-title{color:var(--text);font-weight:700;text-decoration:none}
.post-card .post-title:hover{color:var(--accent)}
.post-card .post-meta{color:var(--muted);margin-left:8px;font-size:14px}
.post-card .post-tags span{font-size:12px;color:var(--muted);margin-right:8px}

.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.pagination a{color:var(--link)}

.post header .meta{color:var(--muted)}
.tag-link{color:var(--link);text-decoration:none}

.sep{border:0;border-top:1px solid var(--border);margin:28px 0}

.site-footer{
  border-top:1px solid var(--border);
  background:#0c0c10; padding:22px 0; color:var(--muted);
}

.back-to-top{
  position:fixed;right:18px;bottom:18px;padding:10px 12px;border-radius:999px;border:1px solid var(--border);
  background:var(--accent); color:var(--accent-fg); font-weight:700; cursor:pointer; box-shadow:var(--shadow);
}
.back-to-top:focus{outline:2px solid var(--focus);outline-offset:2px}

.toc{background:#101217;border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:16px 0}
.toc strong{display:block;margin-bottom:6px}
.toc ol{margin:0;padding-left:18px}
.toc a{color:var(--link);text-decoration:none}
.toc a:hover{color:var(--accent)}

code,kbd,pre{font-family:"Source Code Pro", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:12px;}
pre{
  background:var(--code-bg); border:1px solid var(--code-border);
  border-radius:12px; padding:14px; overflow:auto; position:relative;
}
pre .copy{
  position:absolute; top:8px; right:8px; font-size:12px; padding:6px 8px;
  background:var(--bg-elev); border:1px solid var(--border); border-radius:8px; cursor:pointer;
}
pre .copy:focus{outline:2px solid var(--focus);outline-offset:2px}

a{color:var(--link)}
a:hover{color:var(--accent)}

table{border-collapse:collapse;width:100%;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;overflow:hidden}
thead th{
  background:linear-gradient(180deg,#141621,#10121a); text-align:left; padding:10px; border-bottom:1px solid var(--border);
}
tbody td{padding:10px;border-bottom:1px solid var(--border)}
tbody tr:nth-child(odd){background:var(--table-row)}

table.series{font-size:14px}
table.series thead th:first-child, table.series tbody td:first-child{width:52px;text-align:center}
table.series a{color:var(--text);text-decoration:none}
table.series a:hover{color:var(--accent)}

.tag-filter{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.tag-filter .tag{
  background:transparent; color:var(--text); border:1px solid var(--border); border-radius:999px; padding:6px 10px; cursor:pointer;
}
.tag-filter .tag.active{background:var(--accent);color:var(--accent-fg);border-color:transparent}

@media (max-width:720px){
  .site-nav{gap:8px}
  .brand span{display:none}
}

h1, .post-title {
  color: var(--accent);
}

h2, .post-title {
  color: #c75c14;
}

h3, .post-title {
  color: #c75c14;
}

.post-title {
  color: var(--accent);
  text-decoration: none;
}

.post-title:hover {
  color: var(--link); /* or var(--text) if you prefer a subtle hover */
}

.highlight-red {
  color: #ff4d4d !important; /* bright red */
  font-weight: bold;
}

.pre{
  color:#282c34;
}

table.series thead th {
  color: #c75c14; /* orange text */
}

.callout{
  --co-accent: var(--accent);
  background:#101217;border:1px solid #2a2a33;border-left:4px solid var(--co-accent);
  border-radius:12px;padding:12px 14px;margin:16px 0;box-shadow:var(--shadow);
}
.callout::before{
  content: attr(aria-label);
  display:inline-block;font-weight:700;font-family:"Oswald", system-ui, sans-serif;
  font-size:.9rem;letter-spacing:.3px;padding:2px 8px;margin:0 0 8px 0;border-radius:999px;
  background: color-mix(in srgb, var(--co-accent) 22%, transparent);
}
.callout--tip      { --co-accent:#2ecc71; }
.callout--note     { --co-accent:#57aaff; }
.callout--important{ --co-accent:#ff7b19; }
.callout--warning  { --co-accent:#ffcc00; }
.callout--caution  { --co-accent:#ff4d4d; }

b {
  color:#c75c14;
}