@charset "UTF-8";
*, *::before, *::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
html {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

div.body-wrapper {
  min-height: 100vh;
}

body div.body-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

html:has(body.container) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container main, .container header, .container article, .container footer {
  max-width: 80ch;
}
.container {
  max-width: 80ch;
}

article {
  width: 100%;
  height: 100%;
  display: contents;
}

@media (width < 80ch) {
  img {
    max-width: 100%;
  }
  .container main, .container header, .container article, .container footer {
    max-width: 100vw;
  }
  .container {
    max-width: 100vw;
  }
}
body {
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  text-wrap: balance;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  width: 100%;
  text-wrap: pretty;
}

pre {
  padding: 5pt 5pt;
  margin: 0;
  border: 2px transparent solid;
  overflow-y: scroll;
  display: inline-block;
  max-width: 100%;
}

.arborium-wrapper {
  padding: 0.5rem;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
}

:not(pre) > code {
  padding: 0.1rem 0.25rem;
}

hr {
  border: none;
  border-top: 3px double transparent;
  overflow: visible;
  text-align: center;
  height: 5px;
}
hr::after {
  content: "✩";
  padding: 0 4px;
  position: relative;
  top: -15px;
}

html {
  color: #ddd;
  background: rgb(31.75, 31.75, 31.75);
}
html body, html main, html footer, html header {
  background: #141414;
}
html blockquote {
  border-left-color: #ddd;
}
html aside {
  box-shadow: 0 0 0.2rem 0.2rem #ddd;
}
html pre, html code {
  background: var(--arb-bg-dark, var(--arb-bg-light));
  color: var(--arb-fg-dark, var(--arb-fg-light));
}
html pre, html :not(pre) > code {
  border: 2px solid var(--arb-fg-dark, var(--arb-fg-light));
}
html article a:has(img) img {
  border-bottom-color: #37DCE8;
}
html article a:has(img) img:hover {
  border-bottom-color: #16b1bd;
}
html #taglist a .counter {
  border-left: 1px solid #ddd;
}
html #taglist a {
  border: 1px solid #ddd;
  color: #ddd;
}
html hr {
  color: #ddd;
  border-top-color: #ddd;
}
html hr::after {
  background: #141414;
  color: #ddd;
}
html body div.body-wrapper {
  box-shadow: #505050 0rem 0rem 1rem 1rem;
}
html h1, html h2, html h3, html h4, html h5, html h6 {
  color: #eee;
}
html a, html a:link {
  color: #ddd;
  border-bottom: 2px solid #37DCE8;
}
html a:link h1, html a:link h2, html a:link h3, html a:link h4, html a:link h5, html a:link h6 {
  color: #ddd;
}
html a:visited {
  color: #ddd;
}
html a:visited h1, html a:visited h2, html a:visited h3, html a:visited h4, html a:visited h5, html a:visited h6 {
  color: #ddd;
}
html a:hover {
  color: #ddd;
  background-color: #37DCE8;
  border-bottom: 2px solid #37DCE8;
}
html a:hover h1, html a:hover h2, html a:hover h3, html a:hover h4, html a:hover h5, html a:hover h6 {
  color: #ddd;
  border-bottom: 2px solid #37DCE8;
}
html img#avatar {
  border-color: #ddd;
  box-shadow: 0 0 0.2rem 0.2rem #505050;
}
html header nav .logo a {
  border-bottom: initial !important;
}
html header nav .logo a:hover {
  background-color: initial !important;
}
html header nav .logo img {
  filter: drop-shadow(#505050 0rem 0rem 0.2rem) !important;
}

@media (prefers-color-scheme: dark) {
  html {
    color: #ddd;
    background: rgb(31.75, 31.75, 31.75);
  }
  html body, html main, html footer, html header {
    background: #141414;
  }
  html blockquote {
    border-left-color: #ddd;
  }
  html aside {
    box-shadow: 0 0 0.2rem 0.2rem #ddd;
  }
  html pre, html code {
    background: var(--arb-bg-dark, var(--arb-bg-light));
    color: var(--arb-fg-dark, var(--arb-fg-light));
  }
  html pre, html :not(pre) > code {
    border: 2px solid var(--arb-fg-dark, var(--arb-fg-light));
  }
  html article a:has(img) img {
    border-bottom-color: #37DCE8;
  }
  html article a:has(img) img:hover {
    border-bottom-color: #16b1bd;
  }
  html #taglist a .counter {
    border-left: 1px solid #ddd;
  }
  html #taglist a {
    border: 1px solid #ddd;
    color: #ddd;
  }
  html hr {
    color: #ddd;
    border-top-color: #ddd;
  }
  html hr::after {
    background: #141414;
    color: #ddd;
  }
  html body div.body-wrapper {
    box-shadow: #505050 0rem 0rem 1rem 1rem;
  }
  html h1, html h2, html h3, html h4, html h5, html h6 {
    color: #eee;
  }
  html a, html a:link {
    color: #ddd;
    border-bottom: 2px solid #37DCE8;
  }
  html a:link h1, html a:link h2, html a:link h3, html a:link h4, html a:link h5, html a:link h6 {
    color: #ddd;
  }
  html a:visited {
    color: #ddd;
  }
  html a:visited h1, html a:visited h2, html a:visited h3, html a:visited h4, html a:visited h5, html a:visited h6 {
    color: #ddd;
  }
  html a:hover {
    color: #ddd;
    background-color: #37DCE8;
    border-bottom: 2px solid #37DCE8;
  }
  html a:hover h1, html a:hover h2, html a:hover h3, html a:hover h4, html a:hover h5, html a:hover h6 {
    color: #ddd;
    border-bottom: 2px solid #37DCE8;
  }
  html img#avatar {
    border-color: #ddd;
    box-shadow: 0 0 0.2rem 0.2rem #505050;
  }
  html header nav .logo a {
    border-bottom: initial !important;
  }
  html header nav .logo a:hover {
    background-color: initial !important;
  }
  html header nav .logo img {
    filter: drop-shadow(#505050 0rem 0rem 0.2rem) !important;
  }
  html #taglist a:hover {
    color: #141414;
  }
}
@media (prefers-color-scheme: light) {
  html {
    color: #333;
    background: rgb(239.4, 239.4, 239.4);
  }
  html body, html main, html footer, html header {
    background: #fcfcfc;
  }
  html blockquote {
    border-left-color: #333;
  }
  html aside {
    box-shadow: 0 0 0.2rem 0.2rem #333;
  }
  html pre, html code {
    background: var(--arb-bg-light, var(--arb-bg-dark));
    color: var(--arb-fg-light, var(--arb-fg-dark));
  }
  html pre, html :not(pre) > code {
    border: 2px solid var(--arb-fg-light, var(--arb-fg-dark));
  }
  html article a:has(img) img {
    border-bottom-color: #37DCE8;
  }
  html article a:has(img) img:hover {
    border-bottom-color: #16b1bd;
  }
  html #taglist a .counter {
    border-left: 1px solid #333;
  }
  html #taglist a {
    border: 1px solid #333;
    color: #333;
  }
  html hr {
    color: #333;
    border-top-color: #333;
  }
  html hr::after {
    background: #fcfcfc;
    color: #333;
  }
  html body div.body-wrapper {
    box-shadow: #ccc 0rem 0rem 1rem 1rem;
  }
  html h1, html h2, html h3, html h4, html h5, html h6 {
    color: #111;
  }
  html a, html a:link {
    color: #333;
    border-bottom: 2px solid #37DCE8;
  }
  html a:link h1, html a:link h2, html a:link h3, html a:link h4, html a:link h5, html a:link h6 {
    color: #333;
  }
  html a:visited {
    color: #333;
  }
  html a:visited h1, html a:visited h2, html a:visited h3, html a:visited h4, html a:visited h5, html a:visited h6 {
    color: #333;
  }
  html a:hover {
    color: #333;
    background-color: #37DCE8;
    border-bottom: 2px solid #37DCE8;
  }
  html a:hover h1, html a:hover h2, html a:hover h3, html a:hover h4, html a:hover h5, html a:hover h6 {
    color: #333;
    border-bottom: 2px solid #37DCE8;
  }
  html img#avatar {
    border-color: #333;
    box-shadow: 0 0 0.2rem 0.2rem #ccc;
  }
  html header nav .logo a {
    border-bottom: initial !important;
  }
  html header nav .logo a:hover {
    background-color: initial !important;
  }
  html header nav .logo img {
    filter: drop-shadow(#ccc 0rem 0rem 0.2rem) !important;
  }
}
html:has(#color-scheme-dark:checked) {
  color: #ddd;
  background: rgb(31.75, 31.75, 31.75);
}
html:has(#color-scheme-dark:checked) body, html:has(#color-scheme-dark:checked) main, html:has(#color-scheme-dark:checked) footer, html:has(#color-scheme-dark:checked) header {
  background: #141414;
}
html:has(#color-scheme-dark:checked) blockquote {
  border-left-color: #ddd;
}
html:has(#color-scheme-dark:checked) aside {
  box-shadow: 0 0 0.2rem 0.2rem #ddd;
}
html:has(#color-scheme-dark:checked) pre, html:has(#color-scheme-dark:checked) code {
  background: var(--arb-bg-dark, var(--arb-bg-light));
  color: var(--arb-fg-dark, var(--arb-fg-light));
}
html:has(#color-scheme-dark:checked) pre, html:has(#color-scheme-dark:checked) :not(pre) > code {
  border: 2px solid var(--arb-fg-dark, var(--arb-fg-light));
}
html:has(#color-scheme-dark:checked) article a:has(img) img {
  border-bottom-color: #37DCE8;
}
html:has(#color-scheme-dark:checked) article a:has(img) img:hover {
  border-bottom-color: #16b1bd;
}
html:has(#color-scheme-dark:checked) #taglist a .counter {
  border-left: 1px solid #ddd;
}
html:has(#color-scheme-dark:checked) #taglist a {
  border: 1px solid #ddd;
  color: #ddd;
}
html:has(#color-scheme-dark:checked) hr {
  color: #ddd;
  border-top-color: #ddd;
}
html:has(#color-scheme-dark:checked) hr::after {
  background: #141414;
  color: #ddd;
}
html:has(#color-scheme-dark:checked) body div.body-wrapper {
  box-shadow: #505050 0rem 0rem 1rem 1rem;
}
html:has(#color-scheme-dark:checked) h1, html:has(#color-scheme-dark:checked) h2, html:has(#color-scheme-dark:checked) h3, html:has(#color-scheme-dark:checked) h4, html:has(#color-scheme-dark:checked) h5, html:has(#color-scheme-dark:checked) h6 {
  color: #eee;
}
html:has(#color-scheme-dark:checked) a, html:has(#color-scheme-dark:checked) a:link {
  color: #ddd;
  border-bottom: 2px solid #37DCE8;
}
html:has(#color-scheme-dark:checked) a:link h1, html:has(#color-scheme-dark:checked) a:link h2, html:has(#color-scheme-dark:checked) a:link h3, html:has(#color-scheme-dark:checked) a:link h4, html:has(#color-scheme-dark:checked) a:link h5, html:has(#color-scheme-dark:checked) a:link h6 {
  color: #ddd;
}
html:has(#color-scheme-dark:checked) a:visited {
  color: #ddd;
}
html:has(#color-scheme-dark:checked) a:visited h1, html:has(#color-scheme-dark:checked) a:visited h2, html:has(#color-scheme-dark:checked) a:visited h3, html:has(#color-scheme-dark:checked) a:visited h4, html:has(#color-scheme-dark:checked) a:visited h5, html:has(#color-scheme-dark:checked) a:visited h6 {
  color: #ddd;
}
html:has(#color-scheme-dark:checked) a:hover {
  color: #ddd;
  background-color: #37DCE8;
  border-bottom: 2px solid #37DCE8;
}
html:has(#color-scheme-dark:checked) a:hover h1, html:has(#color-scheme-dark:checked) a:hover h2, html:has(#color-scheme-dark:checked) a:hover h3, html:has(#color-scheme-dark:checked) a:hover h4, html:has(#color-scheme-dark:checked) a:hover h5, html:has(#color-scheme-dark:checked) a:hover h6 {
  color: #ddd;
  border-bottom: 2px solid #37DCE8;
}
html:has(#color-scheme-dark:checked) img#avatar {
  border-color: #ddd;
  box-shadow: 0 0 0.2rem 0.2rem #505050;
}
html:has(#color-scheme-dark:checked) header nav .logo a {
  border-bottom: initial !important;
}
html:has(#color-scheme-dark:checked) header nav .logo a:hover {
  background-color: initial !important;
}
html:has(#color-scheme-dark:checked) header nav .logo img {
  filter: drop-shadow(#505050 0rem 0rem 0.2rem) !important;
}
html:has(#color-scheme-dark:checked) #taglist a:hover {
  color: #141414;
}

html:has(#color-scheme-light:checked) {
  color: #333;
  background: rgb(239.4, 239.4, 239.4);
}
html:has(#color-scheme-light:checked) body, html:has(#color-scheme-light:checked) main, html:has(#color-scheme-light:checked) footer, html:has(#color-scheme-light:checked) header {
  background: #fcfcfc;
}
html:has(#color-scheme-light:checked) blockquote {
  border-left-color: #333;
}
html:has(#color-scheme-light:checked) aside {
  box-shadow: 0 0 0.2rem 0.2rem #333;
}
html:has(#color-scheme-light:checked) pre, html:has(#color-scheme-light:checked) code {
  background: var(--arb-bg-light, var(--arb-bg-dark));
  color: var(--arb-fg-light, var(--arb-fg-dark));
}
html:has(#color-scheme-light:checked) pre, html:has(#color-scheme-light:checked) :not(pre) > code {
  border: 2px solid var(--arb-fg-light, var(--arb-fg-dark));
}
html:has(#color-scheme-light:checked) article a:has(img) img {
  border-bottom-color: #37DCE8;
}
html:has(#color-scheme-light:checked) article a:has(img) img:hover {
  border-bottom-color: #16b1bd;
}
html:has(#color-scheme-light:checked) #taglist a .counter {
  border-left: 1px solid #333;
}
html:has(#color-scheme-light:checked) #taglist a {
  border: 1px solid #333;
  color: #333;
}
html:has(#color-scheme-light:checked) hr {
  color: #333;
  border-top-color: #333;
}
html:has(#color-scheme-light:checked) hr::after {
  background: #fcfcfc;
  color: #333;
}
html:has(#color-scheme-light:checked) body div.body-wrapper {
  box-shadow: #ccc 0rem 0rem 1rem 1rem;
}
html:has(#color-scheme-light:checked) h1, html:has(#color-scheme-light:checked) h2, html:has(#color-scheme-light:checked) h3, html:has(#color-scheme-light:checked) h4, html:has(#color-scheme-light:checked) h5, html:has(#color-scheme-light:checked) h6 {
  color: #111;
}
html:has(#color-scheme-light:checked) a, html:has(#color-scheme-light:checked) a:link {
  color: #333;
  border-bottom: 2px solid #37DCE8;
}
html:has(#color-scheme-light:checked) a:link h1, html:has(#color-scheme-light:checked) a:link h2, html:has(#color-scheme-light:checked) a:link h3, html:has(#color-scheme-light:checked) a:link h4, html:has(#color-scheme-light:checked) a:link h5, html:has(#color-scheme-light:checked) a:link h6 {
  color: #333;
}
html:has(#color-scheme-light:checked) a:visited {
  color: #333;
}
html:has(#color-scheme-light:checked) a:visited h1, html:has(#color-scheme-light:checked) a:visited h2, html:has(#color-scheme-light:checked) a:visited h3, html:has(#color-scheme-light:checked) a:visited h4, html:has(#color-scheme-light:checked) a:visited h5, html:has(#color-scheme-light:checked) a:visited h6 {
  color: #333;
}
html:has(#color-scheme-light:checked) a:hover {
  color: #333;
  background-color: #37DCE8;
  border-bottom: 2px solid #37DCE8;
}
html:has(#color-scheme-light:checked) a:hover h1, html:has(#color-scheme-light:checked) a:hover h2, html:has(#color-scheme-light:checked) a:hover h3, html:has(#color-scheme-light:checked) a:hover h4, html:has(#color-scheme-light:checked) a:hover h5, html:has(#color-scheme-light:checked) a:hover h6 {
  color: #333;
  border-bottom: 2px solid #37DCE8;
}
html:has(#color-scheme-light:checked) img#avatar {
  border-color: #333;
  box-shadow: 0 0 0.2rem 0.2rem #ccc;
}
html:has(#color-scheme-light:checked) header nav .logo a {
  border-bottom: initial !important;
}
html:has(#color-scheme-light:checked) header nav .logo a:hover {
  background-color: initial !important;
}
html:has(#color-scheme-light:checked) header nav .logo img {
  filter: drop-shadow(#ccc 0rem 0rem 0.2rem) !important;
}

/* A kindness to those of you who don't use Javascript */
.nonoscript {
  display: none;
}

.badge-container {
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row wrap;
  gap: 0.75rem;
}
.badge-container img {
  align-self: center;
}

.badge-container a:hover {
  border-color: #16b1bd;
}

#theme-selector {
  text-align: center;
}

header nav, footer nav {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
}
header nav h1, header nav h2, header nav h3, header nav h4, header nav h5, header nav h6, footer nav h1, footer nav h2, footer nav h3, footer nav h4, footer nav h5, footer nav h6 {
  margin: unset;
  padding: unset;
}
header nav .logo, footer nav .logo {
  vertical-align: middle;
}
header nav .logo a, footer nav .logo a {
  border-bottom: initial;
}
header nav .logo a:hover, footer nav .logo a:hover {
  background-color: initial;
}
header nav .logo img, header nav .logo h1, footer nav .logo img, footer nav .logo h1 {
  display: inline-block;
}
header nav .logo img:hover, footer nav .logo img:hover {
  animation: logo-bouncy 1s steps(300) infinite;
  animation-timing-function: cubic-bezier(0, 0.75, 1, 0.5);
  animation-direction: alternate;
}
header nav .logo img, footer nav .logo img {
  height: 5rem;
}
header nav ul, footer nav ul {
  margin: unset;
  padding: unset;
  list-style-type: none;
}
header nav ul li, footer nav ul li {
  /*
    :not(:only-child) is not needed here because that block is already handled
    by setting the same condition to a zero-length at the end!

    why bother wasting an extra conditional?
  */
}
header nav ul li:not(:first-child):not(:last-child), footer nav ul li:not(:first-child):not(:last-child) {
  margin: 0 0.5em;
}
header nav ul li:first-child, footer nav ul li:first-child {
  margin-right: 0.5em;
}
header nav ul li:last-child, footer nav ul li:last-child {
  margin-left: 0.5em;
}
header nav ul li:only-child, footer nav ul li:only-child {
  margin: 0 0rem;
}
header nav ul li, footer nav ul li {
  display: inline-block;
}

dl#frontmatter dt {
  margin-left: 1rem;
}

a {
  text-decoration: none;
}
a h1, a h2, a h3, a h4, a h5, a h6 {
  width: fit-content;
}

blockquote {
  border-left: 0.5rem solid transparent;
  padding: 0.25rem 1rem;
  margin: 0.5rem;
}

hr#note {
  border-top-style: solid;
  margin: 1rem 0;
}
hr#note::after {
  content: "※";
  font-size: 1.5rem;
  top: -1.4rem;
}

aside {
  padding: 0.25rem 1rem;
  margin: 1rem;
}

h1 {
  text-align: center;
}

.text-center {
  text-align: center;
}

img#avatar {
  float: left;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
  max-width: 30%;
  border: 2px solid transparent;
  border-radius: 2rem;
}

#posts {
  clear: left;
}

ul#taglist a {
  border-radius: 1.5rem;
  padding: 0.25rem 0.5rem;
}

ul#taglist {
  float: left;
  gap: 1rem 0.5rem;
}

.counter {
  display: inline-block;
  width: fit-content;
  min-width: 1.5rem;
  text-align: center;
  margin-left: 0.5rem;
  border-radius: 0%;
}

cite::before {
  content: "—";
}

/* should be enough levels right??? */
ul {
  list-style-type: "✬ ";
}
ul ul {
  list-style-type: "✫ ";
}
ul ul ul {
  list-style-type: "✬ ";
}
ul ul ul ul {
  list-style-type: "✫ ";
}
ul ul ul ul ul {
  list-style-type: "✬ ";
}

ul.inline-list {
  display: flex;
}
ul.inline-list li {
  display: inline-block;
}
ul.inline-list {
  flex-wrap: wrap;
  margin: unset;
  padding: unset;
  gap: 0.5rem 1rem;
  list-style-type: none;
}

body > header, body > main, body > footer,
.body-wrapper > header, .body-wrapper > main, .body-wrapper > footer {
  padding: 0.5rem;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.icon + h2 {
  margin-left: 0.25em;
}

dialog header {
  display: flex;
  justify-items: stretch;
  align-items: center;
}
dialog header h1, dialog header h2, dialog header h3, dialog header h4, dialog header h5, dialog header h6 {
  margin: unset;
}

.alert-info {
  border-color: #0ac;
}

.alert-error {
  border-color: red;
}

button:hover {
  cursor: pointer;
}

[class^=button-] {
  border: 1px solid #111;
  border-radius: 0.25rem;
}

.button-primary {
  background: #09d;
  color: #fff;
}

.button-warning {
  background: #da0;
  color: #fff;
}

.button-success {
  background: #0d6;
  color: #fff;
}

.button-error {
  background: #d22;
  color: #fff;
}

.button-text {
  background: none;
  border: none;
}

article a:has(img) img {
  display: block;
  margin: 0 auto;
  border-bottom: 4px solid transparent;
}
article a:has(img) + a:has(img) img {
  margin-top: 1rem;
}
article a:has(img):hover img {
  border-bottom: 4px solid transparent;
}

dialog.one-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
dialog.one-line header {
  display: flex;
  align-items: center;
}
dialog.one-line header h1, dialog.one-line header h2, dialog.one-line header h3, dialog.one-line header h4, dialog.one-line header h5, dialog.one-line header h6 {
  margin: unset;
}

.margin-center {
  margin: 0 auto;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

form.table fieldset {
  display: table;
}
form.table fieldset .row {
  display: table-row;
}
form.table fieldset label {
  padding-right: 1rem;
}
form.table fieldset label, form.table fieldset input:not([type=submit]) {
  margin-bottom: 1rem;
}
form.table fieldset .cell, form.table fieldset label, form.table fieldset input {
  display: table-cell;
}

div.quote {
  padding: 1rem;
}

@keyframes logo-bouncy {
  0% {
    transform: rotate(20deg);
    padding-bottom: 0px;
  }
  50% {
    transform: rotate(0deg);
    padding-bottom: 10px;
  }
  100% {
    transform: rotate(-20deg);
    padding-bottom: 0px;
  }
}

/*# sourceMappingURL=main.css.map */