:root{
  --bg:#0e1116; --panel:#161b23; --line:#263041; --txt:#e6edf7; --dim:#93a1b5;
  --accent:#4ea1ff; --gold:#f0b429; --code:#7ee787;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
main{max-width:760px; margin:0 auto; padding:0 20px 72px}
header.site-head{
  max-width:760px; margin:0 auto; padding:22px 20px 6px;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand{font-size:19px; font-weight:800; letter-spacing:-.3px; text-decoration:none; color:var(--txt)}
.brand span{color:var(--accent)}
header.site-head nav a{color:var(--dim); text-decoration:none; margin-left:16px; font-size:15px}
header.site-head nav a:hover{color:var(--txt)}

article{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:32px clamp(20px,5vw,40px); margin-top:18px;
}
h1{font-size:clamp(26px,5vw,34px); line-height:1.22; letter-spacing:-.6px; margin:0 0 14px}
h1 code{color:var(--gold); font-size:.9em}
h2{font-size:22px; margin:38px 0 10px; padding-top:16px; border-top:1px solid var(--line); letter-spacing:-.2px}
h3{font-size:18px; margin:26px 0 8px; color:#cfe0f5}
p{margin:10px 0}
a{color:var(--accent)}
a:hover{text-decoration:underline}
.lead{font-size:18px; color:#cbd6e6}
ul,ol{padding-left:23px; margin:10px 0}
li{margin:7px 0}
strong{color:#fff}
em{color:var(--dim)}

.code-box{
  margin:26px 0 8px; padding:18px 20px; background:#0b0e13;
  border:1px solid #2e3b50; border-radius:12px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.code-label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:1.4px; color:var(--dim)}
.code{font:700 30px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--code); letter-spacing:2px}
.copy{
  background:var(--accent); border:0; color:#06111f; font-weight:700; font-size:15px;
  padding:11px 20px; border-radius:9px; cursor:pointer;
}
.copy:hover{filter:brightness(1.1)}

.cta{
  display:inline-block; background:var(--gold); color:#231a04; text-decoration:none;
  font-weight:800; padding:14px 24px; border-radius:10px; margin-top:6px; font-size:16px;
}
.cta:hover{filter:brightness(1.06); text-decoration:none}
.cta-row{margin-top:30px}

table{width:100%; border-collapse:collapse; margin:16px 0; font-size:15.5px}
caption{caption-side:top; text-align:left; font-size:14px; color:var(--dim); padding-bottom:7px}
th,td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top}
th{background:#1c2431; color:#d7e3f4; font-weight:700}
tbody tr:nth-child(even){background:#13181f}
td:first-child{white-space:nowrap}

.callout{
  margin:22px 0; padding:16px 18px; border-left:4px solid var(--gold);
  background:#1a1710; border-radius:0 9px 9px 0; color:#f2e3c4;
}
.fine,.cta-row + .fine{font-size:14.5px; color:var(--dim); line-height:1.6}
.disclosure{
  margin-top:18px; padding:18px 20px; border:1px dashed var(--line);
  border-radius:11px; font-size:13.5px; color:var(--dim); line-height:1.6;
}
.code-inline,code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
p code,li code,td code{
  background:#0b0e13; border:1px solid var(--line); border-radius:5px;
  padding:1px 6px; color:var(--code); font-size:.94em;
}
@media (max-width:640px){
  article{padding:24px 16px}
  .code{font-size:25px}
  table{font-size:14.5px}
  th,td{padding:8px}
}