:root {
  --main-green: #4cae4c;
  --body-fg: black;
  --body-bg: white;
  --header-bg: #222;
  --header-fg: #fff;
  --since-version-color: #555;
  --nav-bg: #222;
  --nav-fg: #fff;
  --nav-current-version-bg: #444;
  --nav-current-version-fg: #fff;
  --breadcrumbs-main: #333;
  --link-color: #0066CC;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-fg: #eee;
    --body-bg: #353535;
    --header-bg: #000;
    --header-fg: #aaa;
    --since-version-color: #ccc;
    --nav-bg: #111;
    --nav-fg: #aaa;
    --breadcrumbs-main: #ddd;
    --link-color: #abf;
  }
}
body {
  color: var(--body-fg);
  background: var(--body-bg);
}

header {
  background: var(--header-bg);
  border-bottom: 2px solid var(--main-green);
  color: var(--header-fg);
}
header .title {
  font-size: 120%;
  font-weight: bold;
  color: var(--main-green);
}
header .links a {
  color: var(--header-fg);
  text-decoration: none;
  margin-left: 3ch;
}
header .links a:hover {
  color: var(--main-green);
}

nav {
  background: var(--nav-bg);
  color: var(--nav-fg);
  border-right: 2px solid var(--main-green);
}
nav .other-versions a {
  font-family: monospace;
  color: var(--main-green);
  text-decoration: none;
  border-bottom: 1px solid var(--main-green);
}
nav .other-versions a:hover {
  background: var(--main-green);
  color: var(--nav-bg);
}
nav .version-label, nav .other-versions {
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
}
nav .current-version {
  background: var(--nav-current-version-bg);
  color: var(--nav-current-version-fg);
}
nav .current-version b, nav .current-version .version-label {
  font-family: monospace;
}
nav .current-version a {
  font-family: monospace;
  color: var(--main-green);
  text-decoration: none;
}
nav .current-version a:hover {
  text-decoration: underline;
}
nav .current-version a.selected {
  color: var(--nav-bg);
  background: var(--main-green);
}

main .header {
  border-bottom: 1px solid var(--breadcrumbs-main);
}
main .header .breadcrumbs {
  font-size: 120%;
}
main .header .breadcrumbs span.separator {
  opacity: 0.5;
}
main .header .breadcrumbs a, main .header .breadcrumbs b, main .header .breadcrumbs span.separator {
  color: var(--breadcrumbs-main);
  text-decoration: none;
}
main .header .breadcrumbs a:hover {
  color: var(--main-green);
}
main .header:hover a {
  text-decoration: underline;
}
main .header .since-version {
  color: var(--since-version-color);
  font-size: 90%;
}
main .header .since-version span {
  text-decoration: dotted underline;
}
main a {
  color: var(--link-color);
  text-decoration: none;
}
main a:hover {
  text-decoration: underline;
}

:root {
  --item-header-color: #333;
  --item-table-border: #777;
  --item-table-term-fg: #000;
  --item-table-term-bg: #eee;
  --item-span-code: #2d672d;
  --item-pre-fg: #000;
  --item-pre-bg: #f7f7f7;
  --item-btncopy-fg: #000;
  --item-btncopy-bg: #ccc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --item-header-color: #eee;
    --item-table-border: #777;
    --item-table-term-fg: #fff;
    --item-table-term-bg: #555;
    --item-span-code: #91cf91;
  }
}
main.item section {
  max-width: 30cm;
}
main.item section h1, main.item section h2, main.item section h3 {
  color: var(--item-header-color);
  border-bottom: 1px solid var(--item-header-color);
}
main.item section p {
  line-height: 1.5;
}
@media screen and (max-width: 20cm) {
  main.item section .examples ul {
    list-style-type: none;
    padding-left: 0;
  }
  main.item section .examples ul li {
    border-bottom: 1px solid var(--item-table-border);
  }
}
main.item section code {
  color: var(--item-span-code);
}
main.item section ul.option, main.item section ul.samp, main.item section ul.var {
  font-family: monospace;
  color: var(--item-span-code);
}
main.item section dl {
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: var(--item-table-border);
}
@media screen and (min-width: 15cm) {
  main.item section dl {
    display: grid;
    grid-template-columns: min-content 1fr;
  }
  main.item section dl dt {
    overflow-wrap: break-word;
    max-width: 25ch;
  }
}
main.item section dl dt {
  font-family: monospace;
  color: var(--item-table-term-fg);
  background: var(--item-table-term-bg);
  border-right: 1px solid var(--item-table-border);
}
main.item section dl dt, main.item section dl dd {
  margin: 0;
  padding: 1ch;
  border-bottom: 1px solid var(--item-table-border);
}
main.item section dl dt p:first-child, main.item section dl dd p:first-child {
  margin-top: 0;
}
main.item section dl dt p:last-child, main.item section dl dd p:last-child {
  margin-bottom: 0;
}
main.item section a.direct-link {
  float: right;
  color: transparent;
  background: transparent;
  font-size: calc(var(--base-font-size) * 1.5);
}
@media (pointer: fine) {
  main.item section:hover > a.direct-link {
    color: var(--item-header-color);
  }
}

.code-snippet, main.item section pre {
  white-space: pre-wrap;
  word-break: break-all;
  border: 1px solid var(--item-pre-fg);
  color: var(--item-pre-fg);
  background: var(--item-pre-bg);
  padding: 1ch;
}
.code-snippet button.copy, main.item section pre button.copy {
  cursor: pointer;
  border: 1px solid var(--item-btncopy-fg);
  color: var(--item-btncopy-fg);
  background: var(--item-btncopy-bg);
  float: right;
  position: static;
  font-size: smaller;
  width: 3ch;
  height: 3ch;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
}
.code-snippet button.copy.result, main.item section pre button.copy.result {
  border-color: var(--item-btncopy-bg);
  color: var(--item-btncopy-bg);
  background: var(--item-btncopy-fg);
  pointer-events: none;
}
.code-snippet button.copy:not(.result), main.item section pre button.copy:not(.result) {
  display: none;
}
.code-snippet:hover button.copy, main.item section pre:hover button.copy {
  display: inline-flex;
}

* {
  box-sizing: border-box;
}

body {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 100vh;
}

header {
  grid-column: 1/3;
  grid-row: 1/2;
}
header .sidebar-toggle, header #sidebar-toggle-check {
  display: none;
}

nav {
  grid-column: 1/2;
  grid-row: 2/3;
}

main {
  grid-column: 2/3;
  grid-row: 2/3;
}

@media screen and (max-width: 20cm) {
  @supports selector(:has(a, b)) {
    body {
      grid-template-rows: auto 1fr auto;
      grid-template-columns: auto;
    }
    header {
      grid-column: 1/2;
      grid-row: 1/2;
    }
    nav, main {
      grid-column: 1/2;
      grid-row: 2/3;
    }
    header .sidebar-toggle {
      display: flex;
    }
    body:has(#sidebar-toggle-check:checked) nav {
      display: block;
    }
    body:has(#sidebar-toggle-check:checked) main {
      display: none;
    }
    body:not(:has(#sidebar-toggle-check:checked)) main {
      display: block;
    }
    body:not(:has(#sidebar-toggle-check:checked)) nav {
      display: none;
    }
  }
}
header {
  display: flex;
  padding: 1ex;
  align-items: center;
}
header .title {
  flex: 1;
}
header .sidebar-toggle {
  align-items: center;
  padding-right: 1ex;
}
header .sidebar-toggle label {
  font-size: 0;
  overflow: hidden;
}
header .sidebar-toggle label::after {
  content: " ";
  font-size: 1rem;
  display: inline-block;
  height: calc(var(--base-font-size) * 1.4);
  width: calc(var(--base-font-size) * 1.4);
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2NjYyIgc3Ryb2tlLXdpZHRoPSIxMCUiPgo8cmVjdCB4PSI1JSIgeT0iNSUiIHdpZHRoPSI5MCUiIGhlaWdodD0iOTAlIiByeD0iMTAlIi8+CjwvZz4KPGcgc3Ryb2tlPSJub25lIiBmaWxsPSIjY2NjIj4KPHJlY3QgeD0iMjAlIiB5PSIyNSUiIHdpZHRoPSI2MCUiIGhlaWdodD0iMTAlIi8+CjxyZWN0IHg9IjIwJSIgeT0iNDUlIiB3aWR0aD0iNjAlIiBoZWlnaHQ9IjEwJSIvPgo8cmVjdCB4PSIyMCUiIHk9IjY1JSIgd2lkdGg9IjYwJSIgaGVpZ2h0PSIxMCUiLz4KPC9nPgo8L3N2Zz4K");
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
header .sidebar-toggle:has(input:checked) label::after {
  filter: sepia(100%) hue-rotate(90deg) saturate(10) drop-shadow(0 0 3px var(--main-green));
}

nav {
  padding: 0;
}
nav .version, nav .current-version > .version-label {
  display: block;
  padding: 1ex;
}
nav .other-versions summary {
  padding-left: 1ex;
}
nav .other-versions summary:target {
  color: var(--main-green);
}
nav .current-version details a:not(.hidden), nav .current-version details b:not(.hidden) {
  display: block;
  padding-right: 1ch;
  margin-bottom: 0.3ex;
}
nav .current-version details .items {
  padding-left: 2ch;
}
nav .current-version details .items input.show-all, nav .current-version details .items .show-all-label {
  display: none;
}
nav .current-version details .items:has(.collapse):not(:has(.hidden)):not(:has(.show-all:checked)) .collapse {
  display: none;
}
nav .current-version details .items:has(.collapse):not(:has(.hidden)):not(:has(.show-all:checked)) .show-all-label {
  display: block;
  cursor: pointer;
}
nav .current-version details .items:has(.collapse):not(:has(.hidden)):not(:has(.show-all:checked)) .show-all-label:not(:first-child) {
  padding-top: 0.5ch;
}
nav .current-version > details {
  clear: both;
}
nav .current-version > details > summary {
  font-size: calc(var(--base-font-size) * 1.1);
  background: rgba(0, 0, 0, 0.4);
}
nav .current-version > details > details > summary {
  padding-left: 2ch;
}
nav .current-version > details > details[open] {
  padding-bottom: 2ch;
}
nav .current-version > details > details[open] > summary {
  margin-bottom: 1ch;
}
nav .hidden {
  display: none;
}
nav details summary {
  display: block;
  cursor: pointer;
  outline: 0;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
nav details summary::after {
  content: " ";
  float: right;
  display: inline-block;
  margin-left: 1ch;
  height: 1em;
  width: 1em;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CjxwYXRoIHN0cm9rZT0iI2NjYyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxNSIgZD0iTSAyMCAzNSAgICAgICAgTCA1MCA2NSAgICAgICAgTCA4MCAzNSAgICAgICAiLz4KPC9zdmc+Cg==");
  background-size: 1em;
  background-position: center right;
  background-repeat: no-repeat;
  transition: transform 200ms ease-in;
}
nav details summary::-webkit-details-marker {
  display: none;
}
nav details[open] > summary::after {
  transform: scale(1, -1);
}

main {
  margin: 1em;
}
main .header {
  padding-bottom: 1ex;
  display: flex;
  flex-wrap: wrap-reverse;
  column-gap: 2ch;
  row-gap: 0.5ch;
  justify-content: space-between;
}
main .header .since-version {
  align-self: flex-end;
}

:root {
  --list-header: #555;
  --list-items-sep: #ccc;
  --list-selected-bg: rgb(216.024, 237.976, 216.024) ;
}

@media (prefers-color-scheme: dark) {
  :root {
    --list-header: #ccc;
    --list-items-sep: #777;
    --list-selected-bg: rgb(37.24, 85.26, 37.24) ;
  }
}
main.list h1, main.list h2 {
  color: var(--list-header);
}
main.list h1 {
  font-family: monospace;
  text-align: right;
  border-bottom: 3px solid var(--list-header);
}
main.list h2 {
  border-bottom: 1px solid var(--list-header);
}
main.list details {
  margin-left: 1em;
  margin-top: 2em;
}
main.list details summary {
  font-size: 120%;
  color: var(--list-header);
  border-bottom: 1px solid var(--list-items-sep);
  cursor: pointer;
}
@media screen and (min-width: 15cm) {
  main.list dl.items {
    display: grid;
    grid-template-columns: min-content 1fr;
    margin-left: 1em;
  }
}
main.list dl.items a {
  text-decoration: none;
  font-family: monospace;
}
main.list dl.items a:hover {
  text-decoration: underline;
}
main.list dl.items dt, main.list dl.items dd {
  line-height: 1.5;
  margin: 0;
  padding: 1ex;
  border-bottom: 1px solid var(--list-items-sep);
}
main.list dl.items dt {
  min-width: 20ch;
}
@media screen and (max-width: 15cm) {
  main.list dl.items dt {
    border: 0;
    padding-bottom: 0;
  }
}
main.list dl.items dt.selected, main.list dl.items dt.selected + dd {
  background: var(--list-selected-bg);
}

:root {
  --search-fg: #000;
  --search-bg: #ccc;
}

nav input.search {
  float: right;
  color: transparent;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 3ch;
  min-height: 3ch;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CjxwYXRoIGQ9Ik0gOTAgODAgICAgICAgICAgICBMIDYwIDUwICAgICAgICAgICAgQSAxIDEgMCAwIDEgMzAgMjAgICAgICAgICAgICBBIDEgMSAwIDAgMSA2MCA1MCAgICAgICAgICAgICIgc3Ryb2tlPSIjY2NjIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEwIiBmaWxsLW9wYWNpdHk9IjAuNSIvPgo8L3N2Zz4K");
  background-size: 3ch;
  background-position: center right;
  background-repeat: no-repeat;
}
nav input.search:focus, nav input.search:not(:placeholder-shown) {
  display: block;
  float: unset;
  margin-bottom: 1ch;
  text-align: center;
  width: 100%;
  color: var(--search-fg);
  background: var(--search-bg);
  border: 1px solid var(--search-fg);
  outline: none;
}
nav input.search::placeholder {
  text-align: left;
}
nav input.search:not(:focus)::placeholder {
  color: transparent;
}

main.version-front.list section:not(.search) {
  display: none;
}
main.version-front section.search {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  border: 1px solid var(--body-fg);
  padding: 0.5ch;
}
@media screen and (pointer: fine) {
  main.version-front section.search input:placeholder-shown + span.shortcut {
    content: " ";
    width: var(--base-font-size);
    height: var(--base-font-size);
    margin-right: 1ch;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CjxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSI4NSIgaGVpZ2h0PSI4NSIgcng9IjIwIiByeT0iMjAiIGZpbGw9IiNBQUEiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI1Ii8+CjxsaW5lIHgxPSI0MCIgeTE9IjcwIiB4Mj0iNjAiIHkyPSIzMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==");
    background-size: var(--base-font-size);
    background-position: center left;
    background-repeat: no-repeat;
  }
}
main.version-front section.search input {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
}

main.version-changelog section.changelog {
  grid-column: 1/3;
  grid-row: 2/3;
}
main.version-changelog section.changelog h1 {
  font-size: var(--base-font-size);
  color: var(--versionfront-header);
}
main.version-changelog section.changelog ul {
  list-style-type: "- ";
}
main.version-changelog section.changelog li {
  line-height: 1.5;
  font-family: monospace;
}

:root {
  --versionfront-header: #333;
  --versionfront-lists-link: $link-color;
  --versionfront-info-border: #ccc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --versionfront-header: #ccc;
    --versionfront-lists-link: $link-color;
    --versionfront-info-border: #555;
  }
}
main.version-front section {
  margin-bottom: 2em;
}
@media screen and (min-width: 15cm) {
  main.version-front section.lists {
    display: flex;
    column-gap: 3em;
  }
}
@media not screen and (min-width: 15cm) {
  main.version-front section.lists .component {
    margin-bottom: 2em;
  }
}
main.version-front section.lists .component h2 {
  color: var(--versionfront-header);
  font-size: calc(var(--base-font-size) * 1.3);
  border-bottom: 2px solid var(--versionfront-header);
  margin: 0 0 1ex 0;
}
main.version-front section.lists .component a {
  display: block;
  line-height: 1.5;
}
main.version-front section.info {
  font-size: calc(var(--base-font-size) * 1.2);
}
main.version-front section.info > div:not(:first-child) {
  margin-top: 1em;
}
main.version-front section.info h1, main.version-front section.info h2 {
  padding-bottom: 0.2ch;
  border-bottom: 1px solid var(--versionfront-info-border);
}
main.version-front section.info h2 {
  font-size: calc(var(--base-font-size) * 1.4);
}
main.version-front section.info time {
  font-family: monospace;
}
main.version-front section.info article {
  padding-left: 1ch;
}
main.version-front section.info kbd {
  display: inline-block;
  font-family: monospace;
  padding: 0 0.5ch;
  color: black;
  background: #aaaaaa;
  border: 2px solid #444;
  border-radius: 20%;
  font-size: 90%;
}

:root {
  --versionmatrix-header: #777;
  --versionmatrix-table-border: #ddd;
}

main.version-matrix h1 {
  color: var(--versionmatrix-header);
  font-size: calc(var(--base-font-size) * 1.3);
  border-bottom: 2px solid var(--versionmatrix-table-border);
}
main.version-matrix table.versions {
  border-collapse: collapse;
}
main.version-matrix table.versions th {
  font-size: calc(var(--base-font-size) * 0.8);
}
main.version-matrix table.versions th, main.version-matrix table.versions td {
  padding: 0 0.5ch;
  border: 1px solid var(--versionmatrix-table-border);
  font-family: monospace;
}
main.version-matrix table.versions td.present {
  color: var(--main-green);
  background: var(--main-green);
}
main.version-matrix table.versions a {
  line-height: 1.5;
}

:root {
  --base-font-size: 12pt;
}

body {
  font-family: sans-serif;
  font-size: var(--base-font-size);
}