:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: #ffffff;
    --foreground-color: #202020;
    --keyboard-input-background-color: inherit;
    --keyboard-input-text-color: inherit;
    --keyboard-input-border-color: inherit;
    --keyboard-input-code-background-color: #ffc4ff;
    --keyboard-input-code-text-color: #191970;
    --keyboard-input-code-border-color: #f0a4f0;
    --keyboard-input-code-selected-background-color: #f0a4f0;
    --keyboard-input-code-selected-text-color: #000000;
    --table-head-background-color: #b9c9fe;
    --table-head-text-color: #003399;
    --table-head-border-color: #aabcfe;
    --table-body-background-color: #e8edff;
    --table-body-text-color: #666699;
    --table-body-border-color: #ffffff;
    --table-body-selected-background-color: #d0dafd;
    --table-body-selected-text-color: #333399;
    --tag-pill-background-color: #e8f0fe66;
    --tag-pill-text-color: #174ea6;
    --note-background-color: #e9fbe9;
    --note-text-color: #000000;
    --note-border-color: #52e052;
    --tip-background-color: #fcfaee;
    --tip-text-color: #000000;
    --tip-border-color: #e0cb52;
    --important-background-color: #eeeeee;
    --important-text-color: #000000;
    --important-border-color: #aaaaaa;
    --code-block-background-color: #e8edff;
    --code-block-text-color: #000000;
    --boolean-color: darkred;
    --string-color: green;
    --code-color: green;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #22272e;
    --foreground-color: #c5d1de;
    --keyboard-input-background-color: #636e7b66;
    --keyboard-input-text-color: #c5d1de;
    --keyboard-input-border-color: #636e7b66;
    --keyboard-input-code-background-color: #ffc4ff;
    --keyboard-input-code-text-color: #191970;
    --keyboard-input-code-border-color: #f0a4f0;
    --keyboard-input-code-selected-background-color: #f0a4f0;
    --keyboard-input-code-selected-text-color: #000000;
    --table-head-background-color: #2d333b;
    --table-head-text-color: #c5d1de;
    --table-head-border-color: #444c56;
    --table-body-background-color: #22272e;
    --table-body-text-color: #c5d1de;
    --table-body-border-color: #444c56;
    --table-body-selected-background-color: #2d333b;
    --table-body-selected-text-color: #c5d1de;
    --tag-pill-background-color: #2d333b;
    --tag-pill-text-color: #c5d1de;
    --note-background-color: #22272e;
    --note-text-color: #c5d1de;
    --note-border-color: #347d39;
    --tip-background-color: #22272e;
    --tip-text-color: #c5d1de;
    --tip-border-color: #316dca;
    --important-background-color: #22272e;
    --important-text-color: #c5d1de;
    --important-border-color: #8256d0;
    --code-block-background-color: #2d333b;
    --code-block-text-color: #c5d1de;
    --boolean-color: #6cb6ff;
    --string-color: #8ddb8c;
    --code-color: #8ddb8c;
  }
}

@media (max-width: 800px) {
  .table-wrapper {
    overflow: visible !important;
  }

  table, thead, tbody, tr, th, td {
    display: block;
  }

  table thead {
    width: 1px;
    height: 1px;
    clip-path: inset(100%);
  }

  table tbody tr {
    border-block-start: 4px solid var(--table-head-border-color);
    border-block-end: none;
    margin-block-end: 1rem;
  }

  table tbody tr:last-child {
    border-block-end: 1px solid var(--table-body-border-color);
    margin-block-end: 0;
  }

  table tbody td {
    position: relative;
    padding-inline-start: 50%;
    min-height: 3rem;
  }

  table tbody td::before {
    content: attr(data-label);
    font-weight: lighter;
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 45%;
  }
}

body {
  margin: auto;
  padding: 0 0.5rem;
  max-width: 1000px;
  background-color: var(--background-color);
  color: var(--foreground-color);
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

section {
  margin-block: 2rem;
}

:is(h1, h2, h3, h4, h5, h6) a:not(:hover, :focus, :active) {
  color: inherit;
  text-decoration: inherit;
}

:is(h1, h2, h3, h4, h5, h6) a:is(:hover, :focus, :active)::after {
  content: "#";
}

ol.table-of-contents,
ol.table-of-contents ol {
  list-style: none;
}

ol.table-of-contents {
  padding-inline-start: 0;
}

ol.table-of-contents ol {
  padding-inline-start: 2ch;
}

ol.table-of-contents a:not(:hover, :focus, :active) {
  color: inherit;
  text-decoration: inherit;
}

ol.table-of-contents > li:not(:last-child) {
  margin-block-end: 0.5rem;
}

ol.table-of-contents > li > a {
  font-weight: bold;
}

button[popovertarget] {
  margin: 0;
  padding: 0;
  border: none;
  font-size: inherit;
  background-color: inherit;
  cursor: help;
}

button.tag-pill {
  padding: 0.1em 0.2em;
  border-radius: 0.3em;
  background-color: var(--tag-pill-background-color);
  color: var(--tag-pill-text-color);
}

p[role="note"] {
  background-color: var(--note-background-color);
  color: var(--note-text-color);
  border-inline-start: 0.5em solid var(--note-border-color);
  padding: 0.5em;
}

p[role="tip"] {
  background-color: var(--tip-background-color);
  color: var(--tip-text-color);
  border-inline-start: 0.5em solid var(--tip-border-color);
  padding: 0.5em;
}

p[role="important"] {
  background-color: var(--important-background-color);
  color: var(--important-text-color);
  border-inline-start: 0.5em solid var(--important-border-color);
  padding: 0.5em;
}

.table-wrapper {
  overflow: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9em;
}

thead tr {
  background-color: var(--table-head-background-color);
  color: var(--table-head-text-color);
  border-block-start: 4px solid var(--table-head-border-color);
}

tbody tr {
  background-color: var(--table-body-background-color);
  color: var(--table-body-text-color);
  border-block: 1px solid var(--table-body-border-color);
}

tbody tr:hover {
  background-color: var(--table-body-selected-background-color);
  color: var(--table-body-selected-text-color);
}

th {
  text-align: start;
  font-weight: normal;
}

th, td {
  padding: 0.4em 0.8em;
}

code.highlight {
  color: var(--code-color);
}

kbd {
  border: 1px solid;
  padding-inline: 2px;
  border-radius: 3px;
  background-color: var(--keyboard-input-background-color);
  color: var(--keyboard-input-text-color);
  border-color: var(--keyboard-input-border-color);
}

kbd.code {
  background-color: var(--keyboard-input-code-background-color);
  color: var(--keyboard-input-code-text-color);
  border-color: var(--keyboard-input-code-border-color);
}

kbd.code:hover {
  background-color: var(--keyboard-input-code-selected-background-color);
  color: var(--keyboard-input-code-selected-text-color);
}

figure {
  margin-inline: 0;
  text-align: center;
}

figure img {
  max-width: 100%;
}

figcaption {
  text-align: center;
  font-style: italic;
}

.code-block-container {
  display: flex;
  justify-content: space-between;
  margin-block: 1em;
  border-radius: 0.3em;
  background-color: var(--code-block-background-color);
  color: var(--code-block-text-color);
}

.code-block-container pre:has(code) {
  margin: 0;
}

pre {
  overflow: auto;
}

pre:has(code) {
  padding: 0.5em 1em;
  border-radius: 0.3em;
  background-color: var(--code-block-background-color);
  color: var(--code-block-text-color);
}

[data-type="keyword"] {
  font-weight: bold;
}

[data-type="boolean"] {
  color: var(--boolean-color);
}

[data-type="string"] {
  color: var(--string-color);
}