/* The language reference, in the site's dress: the same palette and
   type as the front page, a sidebar of chapters, and code coloured as
   the editor colours it. */
:root{
  --paper:#F5F7F6; --ink:#0F1A1C; --muted:#5E6E70; --line:#DCE4E3;
  --teal:#0E7C86; --deep:#0A4F56; --ember:#F2711C; --code:#EDF2F1;
  --string:#177A4C; --num:#8A4B00;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#0B1314; --ink:#E4EDEC; --muted:#8CA0A1; --line:#1E2E30;
         --teal:#3FB3BD; --deep:#8FD6DC; --ember:#FF9248; --code:#111D1F; --string:#5FCF95; --num:#E0A96D; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
a{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(14,124,134,.35)}
a:hover{border-bottom-color:var(--teal)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}
code{font-family:var(--mono);font-size:.92em;background:var(--code);padding:1px 4px;border-radius:2px}
pre code{background:none;padding:0;font-size:inherit}

.top{border-top:4px solid var(--teal)}
.bar{display:flex;align-items:baseline;gap:18px;padding:14px 0;font-family:var(--mono);font-size:13px;
  position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--line)}
.bar .name{font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border:0}
.bar .ver{color:var(--muted)}
.bar .crumb{color:var(--muted)}
.bar .crumb a{color:var(--muted);border:0}
nav.site{display:flex;flex-direction:column;gap:1px;font-family:var(--mono);font-size:12.5px;margin-bottom:6px}
nav.site a{color:var(--muted);border:0;padding:4px 8px;border-radius:3px;white-space:nowrap}
nav.site a:hover{background:var(--code);color:var(--teal)}
nav.site a.here{color:var(--ink);font-weight:600}

.page{display:grid;grid-template-columns:250px 1fr;gap:48px;align-items:start;padding:24px 0 40px}
aside{position:sticky;top:66px;font-size:14px;max-height:calc(100vh - 84px);overflow:auto}
.side-head{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px;font-weight:600}
.chapters,.sections{list-style:none;margin:0;padding:0}
.chapters li a,.sections li a{display:block;padding:5px 8px;border:0;border-radius:3px;color:var(--ink)}
.chapters li a:hover,.sections li a:hover{background:var(--code)}
.chapters li.current a{background:var(--code);color:var(--teal);font-weight:600}
.chapters .no{display:inline-block;width:26px;color:var(--muted);font-family:var(--mono);font-size:12px}
.sections li a{color:var(--muted);font-size:13.5px}
.sections.modules li a{font-family:var(--mono);font-size:12.5px}
.sections.modules li.current a{background:var(--code);color:var(--teal);font-weight:600}
p.import{color:var(--muted);font-size:15px}
main h2{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:44px 0 6px;font-weight:700;scroll-margin-top:66px}
main h3 code{background:none;padding:0;font-size:inherit;color:inherit}
main h3 code.folder{font-size:.8em;color:var(--muted);margin-left:8px}
main.module h3{font-size:15px;font-weight:600;margin:28px 0 6px;color:var(--deep)}

main{min-width:0;max-width:44em}
main.index{max-width:44em;padding:0}
.chapter-no{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 6px;font-weight:700}
h1{font-family:var(--mono);font-weight:700;letter-spacing:-.03em;font-size:clamp(28px,4vw,40px);line-height:1.1;margin:0 0 22px}
h3{font-family:var(--mono);font-size:19px;letter-spacing:-.01em;margin:40px 0 10px;font-weight:700;scroll-margin-top:66px}
h4{font-family:var(--mono);font-size:15.5px;margin:28px 0 8px;font-weight:700}
p{max-width:44em}
main ul,main ol{padding-left:1.4em}
main li{margin:4px 0}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
strong{font-weight:650}

pre{background:var(--code);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:3px;
  padding:16px 18px;overflow-x:auto;margin:16px 0;font-family:var(--mono);font-size:14px;line-height:1.6}
pre.out{border-left-color:var(--muted);color:var(--muted)}
.k{color:var(--deep);font-weight:600}
.t{color:var(--ember)}
.s{color:var(--string)}
.n{color:var(--num)}
.c{color:var(--muted);font-style:italic}
.m{color:var(--teal)}
.f{color:var(--ink)}
.o{color:var(--muted)}

table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--ink)}
tbody tr:hover{background:var(--code)}
blockquote{margin:22px 0;padding-left:20px;border-left:2px solid var(--line);font-family:var(--serif);font-size:18px;color:var(--muted);font-style:italic;max-width:36em}

.prevnext{display:flex;justify-content:space-between;gap:20px;margin-top:56px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--mono);font-size:13px}
.prevnext a{border:0}
.prevnext .next{margin-left:auto;text-align:right}

.toc{list-style:none;padding:0;margin:26px 0 0}
.toc li{border-bottom:1px solid var(--line)}
.toc li a{display:grid;grid-template-columns:34px 1fr;gap:0 8px;padding:14px 4px;border:0;color:var(--ink)}
.toc li a:hover{background:var(--code)}
.toc .no{font-family:var(--mono);font-size:13px;color:var(--muted);padding-top:3px}
.toc b{font-family:var(--mono);font-size:16px;font-weight:700}
.toc .blurb{grid-column:2;color:var(--muted);font-size:14.5px;line-height:1.5}

footer{padding:40px 0 60px;color:var(--muted);font-size:14px}
footer .mono{font-family:var(--mono);font-size:12.5px}

@media (max-width:900px){
  .page{grid-template-columns:1fr;gap:20px}
  aside{position:static;max-height:none;border-bottom:1px solid var(--line);padding-bottom:12px}
  .sections{display:none}
  nav.site{flex-direction:row;flex-wrap:wrap;gap:2px 4px}
  .chapters{display:flex;flex-wrap:wrap;gap:2px}
  .chapters li a{padding:4px 8px;font-size:13px}
  .chapters .no{width:auto;margin-right:4px}
}