:root{
  --bg:#161615;
  --bg-alt:#1f1e1c;
  --fg:#ececea;
  --fg-dim:#9a9892;
  --accent:#e8b923;
  --accent-dim:#8a6f1c;
  --rule:rgba(255,255,255,0.12);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  border-top:4px solid var(--accent);
  background:var(--bg);
  color:var(--fg);
  font-family:Arial,Helvetica,"Helvetica Neue",sans-serif;
  font-size:15px;
  line-height:1.6;
}
a{color:var(--accent);text-decoration:underline;}
a:hover{color:#ffd662;}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.wrap{max-width:760px;margin:0 auto;padding:0 20px 80px;}

nav.topbar{
  padding:12px 20px;
  border-bottom:1px solid var(--rule);
  font-size:13px;
  display:flex;
  flex-wrap:wrap;
  row-gap:6px;
  overflow:visible;
}
nav.topbar a{margin-right:14px;text-decoration:none;}
nav.topbar a:hover{text-decoration:underline;}

header.hero{
  padding:32px 0 8px;
  overflow:visible;
}
header.hero h1{
  font-weight:700;
  font-size:28px;
  margin:0;
  color:var(--fg);
  overflow-wrap:anywhere;
  line-height:1.25;
}
header.hero .tagline{
  display:block;
  color:var(--fg-dim);
  font-size:14px;
  margin-top:6px;
}

.top-grid{
  display:flex;
  gap:32px;
  padding:20px 0 8px;
  flex-wrap:wrap;
}

.pages{min-width:150px;font-size:14px;}
.pages p{margin:0 0 8px;color:var(--fg-dim);}
.pages ul{list-style:none;margin:0;padding:0;}
.pages li{margin:4px 0;}
.pages li::before{content:"> ";color:var(--accent-dim);}
.pages li a{text-decoration:none;color:var(--fg);}
.pages li a:hover{color:var(--accent);text-decoration:underline;}

.art{
  flex:1;
  min-width:240px;
  display:flex;
  justify-content:center;
}
.art pre{
  font-family:ui-monospace,"JetBrains Mono","Fira Code",Menlo,Consolas,monospace;
  font-size:12px;
  line-height:1.05;
  color:var(--accent);
  margin:0;
  white-space:pre;
}

section{padding:20px 0;border-top:1px solid var(--rule);}
section:first-of-type{border-top:none;}
section h2{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0 0 10px;
  color:var(--fg-dim);
}
section h3{
  font-size:15px;
  margin:18px 0 8px;
  color:var(--fg);
}
section p{margin:0 0 10px;color:var(--fg);}
section ul{margin:0 0 10px;padding-left:20px;}
section li{margin:4px 0;}


section table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 12px;}
section table th{text-align:left;padding:5px 8px;border-bottom:1px solid var(--rule);color:var(--fg-dim);font-weight:600;}
section table td{padding:5px 8px;border-bottom:1px solid var(--rule);vertical-align:top;}
section code{
  font-family:ui-monospace,"JetBrains Mono","Fira Code",Menlo,Consolas,monospace;
  background:var(--bg-alt);
  padding:1px 5px;
  font-size:.88em;
}

.status-line{
  font-size:13px;
  letter-spacing:.02em;
  color:var(--fg-dim);
}
.status-line strong{color:var(--accent);}

pre.code{
  font-family:ui-monospace,"JetBrains Mono","Fira Code",Menlo,Consolas,monospace;
  background:var(--bg-alt);
  border:1px solid var(--rule);
  padding:14px 16px;
  overflow-x:auto;
  font-size:13px;
  color:var(--fg);
  line-height:1.5;
}
pre.code .c{color:var(--fg-dim);}

.note{color:var(--fg-dim);}

.docnav{
  margin-top:32px;
  padding-top:16px;
  border-top:1px solid var(--rule);
  font-size:13px;
  color:var(--fg-dim);
}
.docnav a{margin-right:10px;}

footer{
  padding:20px 0 0;
  border-top:1px solid var(--rule);
  font-size:12px;
  color:var(--fg-dim);
}

@media (max-width:600px){
  header.hero h1{font-size:22px;}
  .top-grid{flex-direction:column;}
  .art{justify-content:flex-start;}
  .art pre{font-size:10px;}
}

table.listing{width:100%;border-collapse:collapse;font-size:14px;}
table.listing th{text-align:left;padding:6px 10px;border-bottom:1px solid var(--rule);color:var(--fg-dim);font-weight:600;}
table.listing td{padding:5px 10px;border-bottom:1px solid var(--rule);}
table.listing tr:hover td{background:var(--bg-alt);}