:root{
  --canvas:#f5f4f1;
  --surface:#fbfaf7;
  --border-soft:#dbd7cf;
  --text-main:#1f1f1e;
  --text-muted:#65635f;
  --text-soft:#8b8882;
  --accent:#5f7562;
  --code:#efede8;
  --text-title:clamp(20px,2vw,28px);
  --text-body:15px;
  --text-meta:12px;
  --weight-title:520;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text-main);
  font-family:Verdana, Geneva, sans-serif;
  font-size:var(--text-body);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
strong,b{font-weight:500}
h1,h2,h3{
  margin:0;
  font-size:var(--text-title);
  line-height:1.2;
  font-weight:var(--weight-title);
  letter-spacing:-.015em;
  overflow-wrap:anywhere;
  word-break:break-word;
}
p,li,code,span{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.page{
  max-width:980px;
  margin:0 auto;
  padding:20px 16px 40px;
}
.hero,.card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:16px;
}
.hero{
  padding:18px;
  margin-bottom:14px;
}
.stack{
  display:grid;
  gap:12px;
}
.card{
  padding:16px;
}
.eyebrow{
  margin:0 0 8px;
  color:var(--accent);
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.12em;
}
.lead{
  max-width:760px;
  margin:10px 0 0;
  color:var(--text-muted);
}
.link-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.link-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border:1px solid var(--border-soft);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-muted);
  font-size:12px;
}
.split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
ol,ul{
  margin:0;
  padding-left:18px;
  color:var(--text-muted);
}
code{
  font-family:"Courier New", monospace;
  background:var(--code);
  border:1px solid var(--border-soft);
  border-radius:8px;
  padding:2px 5px;
}
.caption{
  color:var(--text-soft);
  font-size:var(--text-meta);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 6px;
}
@media (max-width:760px){
  .split{grid-template-columns:1fr}
}