* { --width:52em; --thick:8px; --monospace:'Iosevka','Fira Code',monospace }
body            { --bg: #fff; --fg: #222; --faded:#333; --faint:#ccc; --wash:#ddc; --accent:#fd2; --secondary:#8be; --code-fg: #fff; --code-bg:#222; --code-dim:#777 }
body.dark-mode  { --bg: #222; --fg: #ddd; --faded:#bbb; --faint:#444; --wash:#333; --accent:#a24; --secondary:#078; --code-fg: #222; --code-bg:#ccb; --code-dim:#666 }
@media (prefers-color-scheme: dark) {
body.light-mode { --bg: #fff; --fg: #222; --faded:#333; --faint:#ccc; --wash:#ddc; --accent:#fd2; --secondary:#8be; --code-fg: #fff; --code-bg:#222; --code-dim:#777 }
body            { --bg: #222; --fg: #ddd; --faded:#bbb; --faint:#444; --wash:#333; --accent:#a24; --secondary:#078; --code-fg: #222; --code-bg:#ccb; --code-dim:#666 }
}

@font-face { font-family:'Fira Code'; font-weight:bold; font-style:normal;
  src:url('fonts/FiraCode-Medium.woff2') format('woff2'),
      url('fonts/FiraCode-Medium.woff')  format('woff'),
      url('fonts/FiraCode-Medium.ttf')   format('truetype'); }
@font-face { font-family:'Nimbus Sans'; font-weight:normal; font-style:normal;
  src:url('fonts/NimbusSans-Regular.otf')   format('opentype'); }
@font-face { font-family:'Nimbus Sans'; font-weight:bold; font-style:normal;
  src:url('fonts/NimbusSans-Bold.otf')   format('opentype'); }
@font-face { font-family:'Iosevka'; font-weight:bold; font-style:normal;
  src:url('fonts/Iosevka-SS15-Semibold.woff2') format('woff2'),
      url('fonts/Iosevka-SS15-Semibold.woff')  format('woff'),
      url('fonts/Iosevka-SS15-Semibold.otf')  format('opentype'),
      url('fonts/Iosevka-SS15-Semibold.ttf')  format('truetype'); }

* { font-family:'Nimbus Sans', sans-serif; color:var(--fg); box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { display:flex; background:var(--bg); border:var(--thick) solid var(--accent); margin:0; }
body { min-height:calc(100vh); overflow-x:hidden; font-size:95% }
#page { padding:1em; flex-grow:1; min-width:0 }
header, main { max-width:var(--width); margin:0 auto; margin-bottom:2em; }
main { padding-bottom:4em }

nav#outline { position:sticky; top:0; padding:0.4em; background:var(--bg); width:15em; max-width:15em; max-height:calc(100vh); overflow-y:auto }
nav#outline { scrollbar-width:none; border-right:var(--thick) solid var(--accent) }
nav#outline h1 { font-size:1.4em; font-weight:bold; padding:0.1em 0.2em; margin:0; text-shadow:none }
nav#outline h1:before { content:'outline' }
nav#outline ul { margin:0; padding:0 }
nav#outline li { list-style:none; padding-bottom:2px }
nav#outline a { display:block; font-size:90%; border-radius:2px; white-space:nowrap; overflow-x:hidden; text-overflow: ellipsis; padding-right:0.5em}
nav#outline li.l1 { padding-top:0.8em; }  nav#outline li.l1:first-of-type { padding-top:0 }
nav#outline li.l1 a { padding-left:0.4em; }
nav#outline li.l2 a { padding-left:1.4em; }
nav#outline li.l3 a { padding-left:2.2em; }
nav#outline a.active { border-right:0.5em solid var(--fg); padding-right:0.2em}

nav#up a { font-size:1.4em; padding:0.2em 0.4em 0 0.4em }
a#parent { text-transform:lowercase }
a#parent:after { content:'/'; font-weight:bold; margin-left:0.1em  }
h1#title { margin:0.5em 0 0 0 }
nav#toc details { background:var(--accent); margin-top:0.5em }
nav#toc summary { font-size:1.2em; font-weight:bold; padding:0.1em 0 0 0.5em; cursor:pointer }
nav#toc summary:after { content:'contents' }
nav#toc ul { list-style:none; margin:0 0.2em 0.2em 0.2em; padding:0 0 0.25em 0.2em }
nav#toc li { margin-bottom:0.2em }
nav#toc li.l1 { padding:0.4em 0 0 0.5em; margin:1em 0 0 0; border-top:1px solid var(--faded) }
nav#toc li.l1:first-of-type { margin-top:0 }
nav#toc li.l2 { padding-left:2.5em; }
nav#toc li.l3 { padding-left:4.5em; }
nav#toc a { background:none; }
nav#toc a:hover { background:var(--fg); }

#dark-mode { cursor:pointer; float:right; margin-top:-0.2em; margin-right:-0.4em; width:1.8em; height:1.8em; }
#show-outline { cursor:pointer; float:right; margin-top:-0.15em; margin-right:1em; width:1.8em; height:1.8em; }
.hidden { display:none }

h1, h2, h3 { margin:1.5em 0 0 0; text-shadow:var(--accent) 0.12em 0.08em; position:relative }
h1 { font-size:2.8em; margin:0 0 0.4em 0 }
h2 { font-size:1.7em }
h3 { font-size:1.1em }
main h1 { padding-top:0.4em }
h2 + h3 { margin-top:0.6em }
h3:before { content:'■ '; color:var(--accent); padding-right:0.4em }

nav.return { margin-bottom:1em }
nav.return a:before { content:'back to top' }
nav.return a { display:block; padding-left:0.4em; cursor:pointer }

article > ul { padding-left:1em }
article > ul > li { padding-left:0.5em; text-indent:-0.5em; margin-bottom:0.4em }
article > ul > li.checkbox { list-style:none; text-indent:-2em }
article + article { border-top:1em solid var(--faint); margin-top:16em }

figure { margin:0 auto; max-width:40em }
figure a, .gallery a { display:block; background:none; padding:0  }
figure a:hover, .gallery a:hover { background:none }
figure img, .gallery img { display:block; cursor:zoom-in }
figure img { border:2px solid var(--faded); margin:2em auto; max-width:100%; max-height:calc(100vh) }
figure img:hover { box-shadow:var(--accent) 0.3em 0.3em }

.gallery { margin:2em 0; display:grid; grid-gap:6px; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)) }
.gallery img { width:100%; height:100%; object-fit:cover; aspect-ratio:1; border:2px solid transparent; }
.gallery img:hover { border:2px solid var(--faded); box-sizing:border-box; }

audio { width:100%; margin:1em 0; border:1px solid var(--faint) }


div.bedrock {
  --fg:var(--code-fg); --bg:var(--code-bg); --font-family:var(--monospace); --font-weight:bold;
  --comment:var(--code-dim); --value:var(--code-fg); --definition:var(--accent); --reference:var(--secondary); }
pre, div.bedrock {
  margin:1rem 0 1.5rem 0; }
pre { padding:0.5rem 0.7rem; overflow-x:auto; border-radius:2px; background:var(--code-bg); }
pre, pre span { color:var(--bg); font-weight:bold; font-family:var(--monospace) }
pre span.primary { color:var(--accent) }
pre span.secondary { color:var(--secondary) }
pre span.tertiary { color:var(--bg) }
pre span.dim { color:var(--code-dim) }


div.table { width:calc(100vw - 1em); max-width:var(--width); margin:1.5em -1em 0.5em -1em; padding-bottom:0em; overflow-x:auto; overflow-y:visible; }
table { border-collapse:collapse; white-space:nowrap; margin:0 1em 1.0em 1em; border:2px solid var(--faded); box-shadow:var(--accent) 0.3em 0.3em }
th, td:first-of-type.border { background:var(--accent); font-weight:bold } th code, td:first-of-type.border code { background:none }
th { border:2px solid var(--faded) } tbody { border-top:2px solid var(--faded) }
tbody { border-top:1px solid var(--faded) } tbody::before { content:'' }
tr { border-top:1px solid var(--faint) }
td { border-left:2px solid var(--faded); border-right:2px solid var(--faded) }
th, td { padding:0.2em 0.6em 0.0em 0.6em }
td.l { text-align:left } td.c { text-align:center } td.r { text-align:right } td.dim { color:var(--faint) }

a { text-decoration:none }
a:hover { text-decoration:none }
nav a, li a, a.heading, a.page, a.external { font-weight:bold; background:var(--accent); padding:0.2em 0.2em 0 0.2em }
nav a:hover, li a:hover, a.heading:hover, a.page:hover, a.external:hover { color:var(--bg); background:var(--fg) }
a.external { text-decoration:underline }
a.heading, a.page, a.external { text-shadow:none }

code { font-family:var(--monospace); font-weight:bold; padding:0 0.2em; background:var(--wash); border-radius:2px; white-space:pre; }
p { margin:0.4em 0 1em 0 }
aside {  border:2px solid var(--accent); border-left-width:var(--thick); padding:0 1em 0 var(--thick); margin:1.5em 1em }
aside br { margin-bottom:1em }
aside p { margin:0.4em 0 }
aside p + p { margin-top:1em }

article > button { background:var(--accent); border:2px solid var(--fg); box-shadow:var(--fg) 0.25em 0.25em; font-weight:bold; cursor:pointer }
article > button { font-size:100%; padding-top:0.25em }
article > button:hover { background:var(--fg); color:var(--bg) }

hr { margin:3em; margin-bottom:3.5em; border:none; border-top:2px solid var(--faint) }

.math-rendered * { font-family:unset }

div.recipe { border:2px solid var(--faded); border-radius:4px; padding:0.5em 1.5em; max-width:40em; margin:2em auto }
div.recipe hr { margin:1.5em 0 }
div.recipe p { margin-top:1.5em }
div.recipe ul { padding-left:2em }

input { color:black }
form div.row { display:flex }
form div.row input[type=text] { margin:0 0.5em; flex-grow:1 }


@media (max-width: calc(52em + 15em)) {
  nav#outline, #show-outline { display:none }
}