:root{
  --bg:#0b0c0f;
  --panel:#11131a;
  --text:#e7e9ee;
  --muted:#a8adbb;
  --border:rgba(255,255,255,.12);
  --link:#c8d6ff;
  --linkHover:#ffffff;

  --max:860px;
  --pad:22px;

  --fs:16px;
  --fsSmall:14px;
  --h1:28px;
  --h2:18px;

  --lh:1.55;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:var(--fs);
  line-height:var(--lh);
}

header, main, footer{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

header{
  padding-top:28px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}

main{
  padding-top:22px;
  padding-bottom:44px;
}

footer{
  padding-top:14px;
  padding-bottom:28px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:var(--fsSmall);
}

h1{
  font-size:var(--h1);
  line-height:1.2;
  margin:0 0 14px;
  letter-spacing:-0.01em;
}

h2{
  font-size:var(--h2);
  line-height:1.25;
  margin:22px 0 10px;
  letter-spacing:-0.01em;
}

p{
  margin:0 0 12px;
}

ul{
  margin:0 0 12px 1.1em;
  padding:0;
}

li{
  margin:0 0 6px;
}

a{
  color:var(--link);
  text-decoration:none;
  text-underline-offset:3px;
}

a:hover{
  color:var(--linkHover);
  text-decoration:underline;
}

code{
  font-family:var(--mono);
  font-size:13px;
  padding:.14em .38em;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(255,255,255,.03);
}

header p{
  margin:0;
  color:var(--muted);
  font-size:var(--fsSmall);
}

@media (max-width: 640px){
  :root{ --pad:16px; --h1:26px; }
  header{ padding-top:22px; }
  main{ padding-top:18px; padding-bottom:38px; }
}