:root{
  --accent:#e10600;      /* change this one line to recolor the site */
  --ink:#16181d;
  --muted:#6b7280;
  --bg:#ffffff;
  --bar:#16181d;
  --line:#e6e8eb;
  --maxw:46rem;
}
*{box-sizing:border-box}
body{
  margin:0;
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.site-header{background:var(--bar);border-bottom:3px solid var(--accent)}
.site-header .bar{
  max-width:var(--maxw);margin:0 auto;padding:0 1.25rem;
  display:flex;align-items:center;justify-content:space-between;
  min-height:64px;gap:1rem;
}
.brand{color:#fff;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:1.05rem}
.brand:hover{text-decoration:none}
.brand .spark{color:var(--accent)}
.site-nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.site-nav a{color:#cdd0d6;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}
.site-nav a:hover{color:#fff;text-decoration:none}

.content{max-width:var(--maxw);margin:0 auto;padding:2.5rem 1.25rem 1rem}
.content h1,.content h2,.content h3{line-height:1.25;letter-spacing:-.01em}
.content h1{font-size:1.9rem;margin:.2em 0 .4em}
.content img{max-width:100%;height:auto;border-radius:6px}
.content pre{background:#0f1115;color:#e6e8eb;padding:1rem;border-radius:8px;overflow:auto;font-size:.9rem}
.content code{background:#f2f3f5;padding:.1em .35em;border-radius:4px;font-size:.9em}
.content pre code{background:none;padding:0}
.content blockquote{margin:1.5em 0;padding:.2em 1.1em;border-left:3px solid var(--accent);color:var(--muted)}
hr{border:none;border-top:1px solid var(--line);margin:2.5em 0}

.site-footer{
  max-width:var(--maxw);margin:2rem auto 0;padding:1.5rem 1.25rem 3rem;
  border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--accent)}

@media (max-width:480px){
  .site-header .bar{flex-direction:column;align-items:flex-start;min-height:0;padding:.75rem 1.25rem}
}