@import url("_/inter/custom.css");

html { font: 18px/1.5 var(--inter-font-family, "Inter"), "Roboto", sans-serif;
       background: var(--background, #fff); color: var(--color, #000); }
body { margin: 0 auto; padding: 4rem 2rem; max-width: 960px; box-sizing: border-box; }
a { color: var(--accent, #00b); text-decoration-thickness: 0.125em; }
a:not(:hover):not(:focus) { text-decoration: none; }
a:focus { outline: none; }
h1 { margin-top: 0; }
h1, h2 { font-weight: normal; }
pre, code { font-family: monospace; font-size: 1.25em; }
footer { margin-top: 4rem; }

:root { --accent: #a02; }

nav > ul > li { list-style: none; margin-inline-start: -1em; }
nav > ul ul { list-style: disc; }
nav > ul details > summary { width: auto; }
nav > ul details > ul > :last-child { margin-bottom: 0.5em; }
nav > ul details.empty > summary::marker { color: transparent; }
nav > ul details.empty > summary::before { margin-inline-start: -1.25em; width: 1.25em; display: inline-block; }
nav > ul details.empty > summary::before { content: "\2009\2022\2009"; /* bullet point */ }
nav > ul details.empty.up > summary::before { content: "\2191"; /* up arrow */ }
nav > ul details.heading > summary { margin-top: 0.5em; font-weight: bold; }
nav > ul details.heading > summary::before { content: ""; }

nav > ul li.heading { list-style: none; font-weight: bold; }
nav > ul li.heading:not(:first-child) { margin-top: 0.5em; }