:root{
  --bg:#fff; --text:#1f2937; --muted:#6b7280; --accent:#2563eb; --border:#e5e7eb; --shade:#f8fafc;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  color:var(--text); background:var(--bg); line-height:1.7;
}
.container{max-width:860px;margin:0 auto;padding:0 1rem}

.site-header{border-bottom:1px solid var(--border);background:linear-gradient(180deg,#f1f5f9,#fff)}
.site-header .container{padding:2.5rem 1rem}
.site-header h1{margin:0 0 .5rem;font-size:2rem}
.tagline{margin:0;color:var(--muted)}

.prose{padding:2rem 0 3rem}
.prose h2{margin-top:2rem;border-bottom:1px solid var(--border);padding-bottom:.4rem}
.prose h3{margin-top:1.25rem}
.prose p,.prose li{font-size:1.02rem}
.prose ul,.prose ol{padding-left:1.15rem}
.prose a{color:var(--accent);text-decoration:none}
.prose a:hover{text-decoration:underline}
.prose code{background:var(--shade);padding:.08rem .35rem;border-radius:4px}

/* CLI vs GUI comparison */
.ui-compare{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1.25rem;
  margin:1rem 0 2rem;
}
.ui-card{
  border:1px solid var(--border);
  border-radius:8px;
  padding:1rem;
  background:#fff;
}
.ui-card figcaption{
  font-weight:600;margin-bottom:.75rem
}
.ui-card img{
  width:100%; height:auto; display:block;
  border-radius:6px;
  border:1px solid var(--border);
  background:#000; /* looks fine if you keep placeholder images */
}
.ui-points{
  margin:.75rem 0 0; padding-left:1rem;
}

/* Footer */
.site-footer{border-top:1px solid var(--border);background:#fff}
.site-footer .container{padding:1.25rem 1rem;color:var(--muted);text-align:center}

/* Responsive tweaks */
@media (max-width: 900px){
  .container{padding:0 .875rem}
}
@media (max-width: 760px){
  .ui-compare{grid-template-columns:1fr}
}
@media (max-width: 480px){
  .site-header .container{padding:2rem 1rem}
  .site-header h1{font-size:1.6rem}
  .prose p,.prose li{font-size:1rem}
}