:root{
  --bg:#E7EBEA;
  --surface:#FFFFFF;
  --ink:#12181B;
  --ink-soft:#55636A;
  --line:#C6D0CE;
  --blue:#1F4B99;
  --blue-soft:#E4EBF7;
  --signal:#2F8F58;
  --amber:#B5680C;
  --amber-soft:#F6E7D3;
  --radius:4px;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --sans:'Inter', -apple-system, sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);}
.wrap{max-width:760px; margin:0 auto; padding:0 24px;}
.mono{font-family:var(--mono);}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-soft);
}

header{
  position:sticky; top:0; z-index:50;
  background:rgba(231,235,234,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.headbar{
  max-width:760px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:baseline; gap:10px; text-decoration:none;}
.brand-mark{
  font-family:var(--mono); font-weight:700; font-size:16px;
  background:var(--ink); color:var(--bg); padding:3px 8px; border-radius:var(--radius);
}
.brand-doc{font-family:var(--mono); font-size:11px; color:var(--ink-soft);}

.btn{
  font-family:var(--mono); font-size:13px; letter-spacing:0.02em;
  padding:9px 16px; border-radius:var(--radius); text-decoration:none;
  display:inline-block; border:1px solid var(--ink); cursor:pointer;
}
.btn-primary{background:var(--ink); color:var(--bg);}
.btn-primary:hover{background:#000;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink);}

main{padding:48px 0 80px;}
.back-link{
  font-family:var(--mono); font-size:12px; color:var(--ink-soft); text-decoration:none;
  display:inline-block; margin-bottom:20px;
}
.back-link:hover{color:var(--blue);}

h1{
  font-family:var(--mono); font-weight:700; font-size:clamp(26px,4.5vw,38px);
  line-height:1.1; letter-spacing:-0.01em; margin:0 0 14px;
}
.lead{font-size:16px; color:var(--ink-soft); max-width:60ch; margin:0 0 36px;}

h2{font-family:var(--mono); font-size:19px; margin:40px 0 6px; letter-spacing:-0.01em;}
p{margin:0 0 16px;}

.steps{list-style:none; padding:0; margin:20px 0;}
.steps li{
  display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--line);
}
.steps li:first-child{border-top:none;}
.step-num{
  font-family:var(--mono); font-size:12px; color:var(--blue); flex-shrink:0;
  width:24px; padding-top:2px;
}
.step-body p{margin:0;}
.step-body strong{font-weight:600;}

.code-box{
  background:var(--ink); color:#D7E4DE; font-family:var(--mono); font-size:13px;
  padding:16px 18px; border-radius:var(--radius); overflow-x:auto; margin:16px 0 28px;
}

.note{
  background:var(--blue-soft); border-left:3px solid var(--blue);
  padding:12px 16px; font-size:14px; color:var(--ink); border-radius:0 var(--radius) var(--radius) 0;
  margin:20px 0;
}

.cta-box{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; text-align:center; margin-top:48px;
}
.cta-box h2{margin-top:0;}
.cta-box p{color:var(--ink-soft); max-width:44ch; margin-left:auto; margin-right:auto;}

footer{border-top:1px solid var(--line); padding:28px 0; text-align:center;}
.foot-note{font-family:var(--mono); font-size:11px; color:var(--ink-soft);}