:root{
  --brand:#6c5ce7;           /* change to your brand color */
  --text:#111827;
  --muted:#6b7280;
  --bg:#ffffff;
  --card:#f8fafc;
  --border:#e5e7eb;
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
}

.site-header{
  border-top: 4px solid var(--brand);
}

a{ color: var(--brand); }
a:hover{ text-decoration: underline; }

.page-content{
  max-width: 860px;
}

h1, h2, h3{
  letter-spacing: -0.02em;
}

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

blockquote{
  border-left: 4px solid var(--brand);
  background: var(--card);
  padding: 12px 14px;
  color: var(--muted);
}

.content{
  padding: 26px 18px;
}
.content h1{ font-size: 28px; margin-top: 10px; }
.content h2{ margin-top: 28px; }
.content p, .content li{ max-width: 75ch; }


.wrap{ max-width: 900px; margin: 0 auto; padding: 0 18px; }
.topbar{ border-top:4px solid var(--brand); border-bottom:1px solid var(--border); background:#fff; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; }
.brand{ display:flex; gap:10px; align-items:center; text-decoration:none; color:inherit; }
.logo{ width:56px; height:56px; }
.name{ font-weight:700; letter-spacing:-0.02em; }
.nav a{ margin-left:14px; text-decoration:none; color:var(--muted); font-weight:600; }
.nav a:hover{ color:var(--brand); }
.content{ padding: 26px 18px; }
.footer{ padding: 22px 18px 40px; color:var(--muted); font-size:14px; }
.footer .dot{ margin: 0 8px; }
.nav a.active{ color: var(--brand); }

@media (max-width: 520px){
  .topbar .wrap{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .nav a{ margin-left: 0; margin-right: 14px; }
}

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:18px; top:18px; background:#fff; padding:8px 10px; border:1px solid var(--border); }