:root{
  --text: #111;
  --muted: #565b61;
  --rule: #e5e7eb;
  --radius: 12px;
}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  color: #fff;
}
main{max-width: 980px; margin: 0 auto; padding: 24px}
header p.lead{margin:.25rem 0 1rem; color:var(--white)}
h1{
  font-weight: 800;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height:1.12;
  letter-spacing:.2px;
  margin: 8px 0 8px;
  padding-bottom: 8px;
  border-bottom: 4px solid currentColor; 
  color: #fff;
}
h2{
  font-size: clamp(20px, 2.4vw, 28px);
  line-height:1.2;
  margin: 20px 0 8px;
  letter-spacing:.2px;
  color: #fff;
}
h3{margin:16px 0 6px}
p{margin:8px 0}
ul,ol{padding-left: 18px; margin: 8px 0; color: #fff;}
li{margin: 4px 0}
a{color:inherit; text-decoration: underline}
hr{border:none; border-top:1px solid var(--rule); margin:20px 0}
.muted{color:var(--fff)}
.note{border:1px solid var(--rule); border-radius: var(--radius); padding:12px; font-size:14px; color:var(--white)}
details{border:1px solid var(--rule); border-radius:var(--radius); padding:10px 12px; margin:8px 0}
details>summary{cursor:pointer; font-weight:600}
.kws{font-size:13px}
.kws code{display:inline-block; margin:3px 6px 0 0; padding:2px 6px; border:1px solid var(--rule); border-radius:8px}
.split{display:grid; gap:14px; grid-template-columns: repeat(2,minmax(0,1fr))}
@media (max-width:760px){ .split{grid-template-columns:1fr} }
.cta a{margin-right:12px}
.btn.primarys {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  margin: 10px 0;
  font-weight: 600;
  text-align: center;
}

.btn.secondary {
  display: inline-block;
  background: #6e1fff;
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  margin: 10px 0;
  font-weight: 600;
  text-align: center;
}