:root {
  --base-font-size: 2vw;
  --base-unit: 1rem;
  --space-xxs: calc(var(--base-unit) * 0.125);
  --space-xs: calc(var(--base-unit) * 0.25);
  --space-s: calc(var(--base-unit) * 0.375);
  --space-sm: calc(var(--base-unit) * 0.5);
  --space-m: calc(var(--base-unit) * 0.625);
  --space-l: calc(var(--base-unit) * 0.75);
  --space-xl: calc(var(--base-unit) * 1.25);
  --space-xxl: calc(var(--base-unit) * 1.5);
  --space-xxxl: calc(var(--base-unit) * 1.875);
  --space-xxxxl: calc(var(--base-unit) * 2.5);
  --space-xxxxxl: calc(var(--base-unit) * 8.75);
  --border-width-s: calc(var(--base-unit) * 0.0125);
  --border-width-m: calc(var(--base-unit) * 0.0625);
  --background-body: #fff;
  --background: #efefef;
  --background-alt: #f7f7f7;
  --selection: #9e9e9e;
  --text-main: #363636;
  --text-bright: #000;
  --text-muted: #70777f;
  --links: #0076d1;
  --focus: #0096bfab;
  --border: #dbdbdb;
  --code: #000;
  --animation-duration: 0.1s;
  --button-base: #d0cfcf;
  --button-hover: #9b9b9b;
  --scrollbar-thumb: #0f0f0f;
  --scrollbar-thumb-hover: var(--button-hover);
  --form-placeholder: #949494;
  --form-text: #1d1d1d;
  --variable: #39a33c;
  --highlight: #ff0;
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='116.9' height='62.5' fill='%23161f27'%3E%3Cpath d='M115.3 1.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1L7.4 1.6C5.8 0 3.2 0 1.6 1.6S0 5.8 1.6 7.4l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    --base-font-size: 2vw;
    --base-unit: 1rem;
    --space-xxs: calc(var(--base-unit) * 0.125);
    --space-xs: calc(var(--base-unit) * 0.25);
    --space-s: calc(var(--base-unit) * 0.375);
    --space-sm: calc(var(--base-unit) * 0.5);
    --space-m: calc(var(--base-unit) * 0.625);
    --space-l: calc(var(--base-unit) * 0.75);
    --space-xl: calc(var(--base-unit) * 1.25);
    --space-xxl: calc(var(--base-unit) * 1.5);
    --space-xxxl: calc(var(--base-unit) * 1.875);
    --space-xxxxl: calc(var(--base-unit) * 2.5);
    --space-xxxxxl: calc(var(--base-unit) * 8.75);
    --border-width-s: calc(var(--base-unit) * 0.0125);
    --border-width-m: calc(var(--base-unit) * 0.0625);
    --background-body: #202b38;
    --background: #161f27;
    --background-alt: #1a242f;
    --selection: #1c76c5;
    --text-main: #dbdbdb;
    --text-bright: #fff;
    --text-muted: #a9b1ba;
    --links: #41adff;
    --focus: #0096bfab;
    --border: #526980;
    --code: #ffbe85;
    --animation-duration: 0.1s;
    --button-base: #0c151c;
    --button-hover: #040a0f;
    --scrollbar-thumb: var(--button-hover);
    --scrollbar-thumb-hover: #000;
    --form-placeholder: #a9a9a9;
    --form-text: #fff;
    --variable: #d941e2;
    --highlight: #efdb43;
    --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='116.9' height='62.5' fill='%23efefef'%3E%3Cpath d='M115.3 1.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1L7.4 1.6C5.8 0 3.2 0 1.6 1.6S0 5.8 1.6 7.4l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8'/%3E%3C/svg%3E");
  }
}
html {
  font-size: 2vw;
  font-size: var(--base-font-size);
  scrollbar-color: #0f0f0f #fff;
  scrollbar-color: var(--scrollbar-thumb) var(--background-body);
  scrollbar-width: thin;
}
@media (prefers-color-scheme: dark) {
  html {
    font-size: 2vw;
    font-size: var(--base-font-size);
    scrollbar-color: #040a0f #202b38;
    scrollbar-color: var(--scrollbar-thumb) var(--background-body);
  }
}
body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    Segoe UI Emoji,
    Apple Color Emoji,
    Noto Color Emoji,
    sans-serif;
  line-height: 1.4;
  margin: 1.25rem auto;
  margin: var(--space-xl) auto;
  padding: 0 0.625rem;
  padding: 0 var(--space-m);
  word-wrap: break-word;
  background: #fff;
  background: var(--background-body);
  color: #363636;
  color: var(--text-main);
  text-rendering: optimizeLegibility;
}
@media (prefers-color-scheme: dark) {
  body {
    background: #202b38;
    background: var(--background-body);
    color: #dbdbdb;
    color: var(--text-main);
    margin: 1.25rem auto;
    margin: var(--space-xl) auto;
    padding: 0 0.625rem;
    padding: 0 var(--space-m);
  }
}
button {
  transition:
    background-color 0.1s linear,
    border-color 0.1s linear,
    color 0.1s linear,
    box-shadow 0.1s linear,
    transform 0.1s ease;
  transition:
    background-color var(--animation-duration) linear,
    border-color var(--animation-duration) linear,
    color var(--animation-duration) linear,
    box-shadow var(--animation-duration) linear,
    transform var(--animation-duration) ease;
}
@media (prefers-color-scheme: dark) {
  button {
    transition:
      background-color 0.1s linear,
      border-color 0.1s linear,
      color 0.1s linear,
      box-shadow 0.1s linear,
      transform 0.1s ease;
    transition:
      background-color var(--animation-duration) linear,
      border-color var(--animation-duration) linear,
      color var(--animation-duration) linear,
      box-shadow var(--animation-duration) linear,
      transform var(--animation-duration) ease;
  }
}
input {
  transition:
    background-color 0.1s linear,
    border-color 0.1s linear,
    color 0.1s linear,
    box-shadow 0.1s linear,
    transform 0.1s ease;
  transition:
    background-color var(--animation-duration) linear,
    border-color var(--animation-duration) linear,
    color var(--animation-duration) linear,
    box-shadow var(--animation-duration) linear,
    transform var(--animation-duration) ease;
}
@media (prefers-color-scheme: dark) {
  input {
    transition:
      background-color 0.1s linear,
      border-color 0.1s linear,
      color 0.1s linear,
      box-shadow 0.1s linear,
      transform 0.1s ease;
    transition:
      background-color var(--animation-duration) linear,
      border-color var(--animation-duration) linear,
      color var(--animation-duration) linear,
      box-shadow var(--animation-duration) linear,
      transform var(--animation-duration) ease;
  }
}
textarea {
  transition:
    background-color 0.1s linear,
    border-color 0.1s linear,
    color 0.1s linear,
    box-shadow 0.1s linear,
    transform 0.1s ease;
  transition:
    background-color var(--animation-duration) linear,
    border-color var(--animation-duration) linear,
    color var(--animation-duration) linear,
    box-shadow var(--animation-duration) linear,
    transform var(--animation-duration) ease;
}
@media (prefers-color-scheme: dark) {
  textarea {
    transition:
      background-color 0.1s linear,
      border-color 0.1s linear,
      color 0.1s linear,
      box-shadow 0.1s linear,
      transform 0.1s ease;
    transition:
      background-color var(--animation-duration) linear,
      border-color var(--animation-duration) linear,
      color var(--animation-duration) linear,
      box-shadow var(--animation-duration) linear,
      transform var(--animation-duration) ease;
  }
}
h1 {
  font-size: 2.2em;
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-l);
  margin-top: 0;
  margin-top: 1.5rem;
  margin-top: var(--space-xxl);
}
@media (prefers-color-scheme: dark) {
  h1 {
    margin-bottom: 0.75rem;
    margin-bottom: var(--space-l);
    margin-top: 1.5rem;
    margin-top: var(--space-xxl);
  }
}
h2 {
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-l);
  margin-top: 1.5rem;
  margin-top: var(--space-xxl);
}
@media (prefers-color-scheme: dark) {
  h2 {
    margin-bottom: 0.75rem;
    margin-bottom: var(--space-l);
    margin-top: 1.5rem;
    margin-top: var(--space-xxl);
  }
}
h3 {
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-l);
  margin-top: 1.5rem;
  margin-top: var(--space-xxl);
}
@media (prefers-color-scheme: dark) {
  h3 {
    margin-bottom: 0.75rem;
    margin-bottom: var(--space-l);
    margin-top: 1.5rem;
    margin-top: var(--space-xxl);
  }
}
h4 {
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-l);
  margin-top: 1.5rem;
  margin-top: var(--space-xxl);
}
@media (prefers-color-scheme: dark) {
  h4 {
    margin-bottom: 0.75rem;
    margin-bottom: var(--space-l);
    margin-top: 1.5rem;
    margin-top: var(--space-xxl);
  }
}
h5 {
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-l);
  margin-top: 1.5rem;
  margin-top: var(--space-xxl);
}
@media (prefers-color-scheme: dark) {
  h5 {
    margin-bottom: 0.75rem;
    margin-bottom: var(--space-l);
    margin-top: 1.5rem;
    margin-top: var(--space-xxl);
  }
}
h6 {
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-l);
  margin-top: 1.5rem;
  margin-top: var(--space-xxl);
}
@media (prefers-color-scheme: dark) {
  h6 {
    margin-bottom: 0.75rem;
    margin-bottom: var(--space-l);
    margin-top: 1.5rem;
    margin-top: var(--space-xxl);
  }
}
h1 {
  color: #000;
  color: var(--text-bright);
}
@media (prefers-color-scheme: dark) {
  h1 {
    color: #fff;
    color: var(--text-bright);
  }
}
h2 {
  color: #000;
  color: var(--text-bright);
}
@media (prefers-color-scheme: dark) {
  h2 {
    color: #fff;
    color: var(--text-bright);
  }
}
h3 {
  color: #000;
  color: var(--text-bright);
}
@media (prefers-color-scheme: dark) {
  h3 {
    color: #fff;
    color: var(--text-bright);
  }
}
h4 {
  color: #000;
  color: var(--text-bright);
}
@media (prefers-color-scheme: dark) {
  h4 {
    color: #fff;
    color: var(--text-bright);
  }
}
h5 {
  color: #000;
  color: var(--text-bright);
}
@media (prefers-color-scheme: dark) {
  h5 {
    color: #fff;
    color: var(--text-bright);
  }
}
h6 {
  color: #000;
  color: var(--text-bright);
}
@media (prefers-color-scheme: dark) {
  h6 {
    color: #fff;
    color: var(--text-bright);
  }
}
strong {
  color: #000;
  color: var(--text-bright);
}
@media (prefers-color-scheme: dark) {
  strong {
    color: #fff;
    color: var(--text-bright);
  }
}
b,
h1,
h2,
h3,
h4,
h5,
h6,
strong,
th {
  font-weight: 600;
}
q:after,
q:before {
  content: none;
}
blockquote {
  border-left: 0.25rem solid #0096bfab;
  border-left: var(--space-xs) solid var(--focus);
  font-style: italic;
  margin: 1.5em 0;
  padding: 0.5em 1em;
}
@media (prefers-color-scheme: dark) {
  blockquote {
    border-left: 0.25rem solid #0096bfab;
    border-left: var(--space-xs) solid var(--focus);
  }
}
q {
  border-left: 0.25rem solid #0096bfab;
  border-left: var(--space-xs) solid var(--focus);
  font-style: italic;
  margin: 1.5em 0;
  padding: 0.5em 1em;
}
@media (prefers-color-scheme: dark) {
  q {
    border-left: 0.25rem solid #0096bfab;
    border-left: var(--space-xs) solid var(--focus);
  }
}
blockquote > footer {
  border: 0;
  font-style: normal;
}
address,
blockquote cite {
  font-style: normal;
}
mark {
  background-color: #ff0;
  background-color: var(--highlight);
  color: #000;
  padding: 0 0.125rem;
  padding: 0 var(--space-xxs);
}
@media (prefers-color-scheme: dark) {
  mark {
    background-color: #efdb43;
    background-color: var(--highlight);
    padding: 0 0.125rem;
    padding: 0 var(--space-xxs);
  }
}
a > code,
a > strong {
  color: inherit;
}
button,
input[type="button"],
input[type="checkbox"],
input[type="radio"],
input[type="range"],
input[type="reset"],
input[type="submit"],
select {
  cursor: pointer;
}
input,
select {
  display: block;
}
[type="checkbox"],
[type="radio"] {
  display: initial;
}
input {
  background-color: #efefef;
  background-color: var(--background);
  border: none;
  color: #1d1d1d;
  color: var(--form-text);
  font-family: inherit;
  font-size: inherit;
  margin-bottom: 0.375rem;
  margin-bottom: var(--space-s);
  margin-right: 0.375rem;
  margin-right: var(--space-s);
  outline: none;
  padding: 0.625rem;
  padding: var(--space-m);
}
@media (prefers-color-scheme: dark) {
  input {
    background-color: #161f27;
    background-color: var(--background);
    color: #fff;
    color: var(--form-text);
    margin-bottom: 0.375rem;
    margin-bottom: var(--space-s);
    margin-right: 0.375rem;
    margin-right: var(--space-s);
    padding: 0.625rem;
    padding: var(--space-m);
  }
}
button {
  background-color: #efefef;
  background-color: var(--background);
  border: none;
  color: #1d1d1d;
  color: var(--form-text);
  font-family: inherit;
  font-size: inherit;
  margin-bottom: 0.375rem;
  margin-bottom: var(--space-s);
  margin-right: 0.375rem;
  margin-right: var(--space-s);
  outline: none;
  padding: 0.625rem;
  padding: var(--space-m);
}
@media (prefers-color-scheme: dark) {
  button {
    background-color: #161f27;
    background-color: var(--background);
    color: #fff;
    color: var(--form-text);
    margin-bottom: 0.375rem;
    margin-bottom: var(--space-s);
    margin-right: 0.375rem;
    margin-right: var(--space-s);
    padding: 0.625rem;
    padding: var(--space-m);
  }
}
textarea {
  background-color: #efefef;
  background-color: var(--background);
  border: none;
  color: #1d1d1d;
  color: var(--form-text);
  font-family: inherit;
  font-size: inherit;
  margin-bottom: 0.375rem;
  margin-bottom: var(--space-s);
  margin-right: 0.375rem;
  margin-right: var(--space-s);
  outline: none;
  padding: 0.625rem;
  padding: var(--space-m);
}
@media (prefers-color-scheme: dark) {
  textarea {
    background-color: #161f27;
    background-color: var(--background);
    color: #fff;
    color: var(--form-text);
    margin-bottom: 0.375rem;
    margin-bottom: var(--space-s);
    margin-right: 0.375rem;
    margin-right: var(--space-s);
    padding: 0.625rem;
    padding: var(--space-m);
  }
}
select {
  background-color: #efefef;
  background-color: var(--background);
  border: none;
  color: #1d1d1d;
  color: var(--form-text);
  font-family: inherit;
  font-size: inherit;
  margin-bottom: 0.375rem;
  margin-bottom: var(--space-s);
  margin-right: 0.375rem;
  margin-right: var(--space-s);
  outline: none;
  padding: 0.625rem;
  padding: var(--space-m);
}
@media (prefers-color-scheme: dark) {
  select {
    background-color: #161f27;
    background-color: var(--background);
    color: #fff;
    color: var(--form-text);
    margin-bottom: 0.375rem;
    margin-bottom: var(--space-s);
    margin-right: 0.375rem;
    margin-right: var(--space-s);
    padding: 0.625rem;
    padding: var(--space-m);
  }
}
button {
  background-color: #d0cfcf;
  background-color: var(--button-base);
  padding-left: 1.875rem;
  padding-left: var(--space-xxxl);
  padding-right: 1.875rem;
  padding-right: var(--space-xxxl);
}
@media (prefers-color-scheme: dark) {
  button {
    background-color: #0c151c;
    background-color: var(--button-base);
    padding-left: 1.875rem;
    padding-left: var(--space-xxxl);
    padding-right: 1.875rem;
    padding-right: var(--space-xxxl);
  }
}
input[type="submit"] {
  background-color: #d0cfcf;
  background-color: var(--button-base);
  padding-left: 1.875rem;
  padding-left: var(--space-xxxl);
  padding-right: 1.875rem;
  padding-right: var(--space-xxxl);
}
@media (prefers-color-scheme: dark) {
  input[type="submit"] {
    background-color: #0c151c;
    background-color: var(--button-base);
    padding-left: 1.875rem;
    padding-left: var(--space-xxxl);
    padding-right: 1.875rem;
    padding-right: var(--space-xxxl);
  }
}
input[type="reset"] {
  background-color: #d0cfcf;
  background-color: var(--button-base);
  padding-left: 1.875rem;
  padding-left: var(--space-xxxl);
  padding-right: 1.875rem;
  padding-right: var(--space-xxxl);
}
@media (prefers-color-scheme: dark) {
  input[type="reset"] {
    background-color: #0c151c;
    background-color: var(--button-base);
    padding-left: 1.875rem;
    padding-left: var(--space-xxxl);
    padding-right: 1.875rem;
    padding-right: var(--space-xxxl);
  }
}
input[type="button"] {
  background-color: #d0cfcf;
  background-color: var(--button-base);
  padding-left: 1.875rem;
  padding-left: var(--space-xxxl);
  padding-right: 1.875rem;
  padding-right: var(--space-xxxl);
}
@media (prefers-color-scheme: dark) {
  input[type="button"] {
    background-color: #0c151c;
    background-color: var(--button-base);
    padding-left: 1.875rem;
    padding-left: var(--space-xxxl);
    padding-right: 1.875rem;
    padding-right: var(--space-xxxl);
  }
}
button:hover {
  background: #9b9b9b;
  background: var(--button-hover);
}
@media (prefers-color-scheme: dark) {
  button:hover {
    background: #040a0f;
    background: var(--button-hover);
  }
}
input[type="submit"]:hover {
  background: #9b9b9b;
  background: var(--button-hover);
}
@media (prefers-color-scheme: dark) {
  input[type="submit"]:hover {
    background: #040a0f;
    background: var(--button-hover);
  }
}
input[type="reset"]:hover {
  background: #9b9b9b;
  background: var(--button-hover);
}
@media (prefers-color-scheme: dark) {
  input[type="reset"]:hover {
    background: #040a0f;
    background: var(--button-hover);
  }
}
input[type="button"]:hover {
  background: #9b9b9b;
  background: var(--button-hover);
}
@media (prefers-color-scheme: dark) {
  input[type="button"]:hover {
    background: #040a0f;
    background: var(--button-hover);
  }
}
input[type="color"] {
  cursor: pointer;
  min-height: 2rem;
  padding: 0.5rem;
  padding: var(--space-sm);
}
@media (prefers-color-scheme: dark) {
  input[type="color"] {
    padding: 0.5rem;
    padding: var(--space-sm);
  }
}
input[type="checkbox"],
input[type="radio"] {
  height: 1em;
  width: 1em;
}
input[type="radio"] {
  border-radius: 100%;
}
input {
  vertical-align: top;
}
label {
  display: inline-block;
  margin-bottom: 0.25rem;
  margin-bottom: var(--space-xs);
  vertical-align: middle;
}
@media (prefers-color-scheme: dark) {
  label {
    margin-bottom: 0.25rem;
    margin-bottom: var(--space-xs);
  }
}
button,
input:not([type="checkbox"]):not([type="radio"]),
input[type="range"],
select,
textarea {
  -webkit-appearance: none;
}
textarea {
  box-sizing: border-box;
  display: block;
  margin-right: 0;
  resize: vertical;
}
textarea:not([cols]) {
  width: 100%;
}
textarea:not([rows]) {
  height: 8.75rem;
  height: var(--space-xxxxxl);
  min-height: 2.5rem;
  min-height: var(--space-xxxxl);
}
@media (prefers-color-scheme: dark) {
  textarea:not([rows]) {
    height: 8.75rem;
    height: var(--space-xxxxxl);
    min-height: 2.5rem;
    min-height: var(--space-xxxxl);
  }
}
select {
  background: #efefef
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='116.9' height='62.5' fill='%23161f27'%3E%3Cpath d='M115.3 1.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1L7.4 1.6C5.8 0 3.2 0 1.6 1.6S0 5.8 1.6 7.4l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8'/%3E%3C/svg%3E")
    calc(100% - 0.75rem) 50% /0.75rem no-repeat;
  background: var(--background) var(--select-arrow) calc(100% - var(--space-l))
    50% / var(--space-l) no-repeat;
  padding-right: 1.875rem;
  padding-right: var(--space-xxxl);
}
@media (prefers-color-scheme: dark) {
  select {
    background: #161f27
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='116.9' height='62.5' fill='%23efefef'%3E%3Cpath d='M115.3 1.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1L7.4 1.6C5.8 0 3.2 0 1.6 1.6S0 5.8 1.6 7.4l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8'/%3E%3C/svg%3E")
      calc(100% - 0.75rem) 50% /0.75rem no-repeat;
    background: var(--background) var(--select-arrow)
      calc(100% - var(--space-l)) 50% / var(--space-l) no-repeat;
    padding-right: 1.875rem;
    padding-right: var(--space-xxxl);
  }
}
select::-ms-expand {
  display: none;
}
select[multiple] {
  background-image: none;
  overflow-y: auto;
  padding-right: 0.625rem;
  padding-right: var(--space-m);
}
@media (prefers-color-scheme: dark) {
  select[multiple] {
    padding-right: 0.625rem;
    padding-right: var(--space-m);
  }
}
input:focus {
  box-shadow: 0 0 0 0.125rem #0096bfab;
  box-shadow: 0 0 0 var(--space-xxs) var(--focus);
}
@media (prefers-color-scheme: dark) {
  input:focus {
    box-shadow: 0 0 0 0.125rem #0096bfab;
    box-shadow: 0 0 0 var(--space-xxs) var(--focus);
  }
}
select:focus {
  box-shadow: 0 0 0 0.125rem #0096bfab;
  box-shadow: 0 0 0 var(--space-xxs) var(--focus);
}
@media (prefers-color-scheme: dark) {
  select:focus {
    box-shadow: 0 0 0 0.125rem #0096bfab;
    box-shadow: 0 0 0 var(--space-xxs) var(--focus);
  }
}
button:focus {
  box-shadow: 0 0 0 0.125rem #0096bfab;
  box-shadow: 0 0 0 var(--space-xxs) var(--focus);
}
@media (prefers-color-scheme: dark) {
  button:focus {
    box-shadow: 0 0 0 0.125rem #0096bfab;
    box-shadow: 0 0 0 var(--space-xxs) var(--focus);
  }
}
textarea:focus {
  box-shadow: 0 0 0 0.125rem #0096bfab;
  box-shadow: 0 0 0 var(--space-xxs) var(--focus);
}
@media (prefers-color-scheme: dark) {
  textarea:focus {
    box-shadow: 0 0 0 0.125rem #0096bfab;
    box-shadow: 0 0 0 var(--space-xxs) var(--focus);
  }
}
input[type="checkbox"]:active {
  transform: translateY(0.125rem);
  transform: translateY(var(--space-xxs));
}
@media (prefers-color-scheme: dark) {
  input[type="checkbox"]:active {
    transform: translateY(0.125rem);
    transform: translateY(var(--space-xxs));
  }
}
input[type="radio"]:active {
  transform: translateY(0.125rem);
  transform: translateY(var(--space-xxs));
}
@media (prefers-color-scheme: dark) {
  input[type="radio"]:active {
    transform: translateY(0.125rem);
    transform: translateY(var(--space-xxs));
  }
}
input[type="submit"]:active {
  transform: translateY(0.125rem);
  transform: translateY(var(--space-xxs));
}
@media (prefers-color-scheme: dark) {
  input[type="submit"]:active {
    transform: translateY(0.125rem);
    transform: translateY(var(--space-xxs));
  }
}
input[type="reset"]:active {
  transform: translateY(0.125rem);
  transform: translateY(var(--space-xxs));
}
@media (prefers-color-scheme: dark) {
  input[type="reset"]:active {
    transform: translateY(0.125rem);
    transform: translateY(var(--space-xxs));
  }
}
input[type="button"]:active {
  transform: translateY(0.125rem);
  transform: translateY(var(--space-xxs));
}
@media (prefers-color-scheme: dark) {
  input[type="button"]:active {
    transform: translateY(0.125rem);
    transform: translateY(var(--space-xxs));
  }
}
input[type="range"]:active {
  transform: translateY(0.125rem);
  transform: translateY(var(--space-xxs));
}
@media (prefers-color-scheme: dark) {
  input[type="range"]:active {
    transform: translateY(0.125rem);
    transform: translateY(var(--space-xxs));
  }
}
button:active {
  transform: translateY(0.125rem);
  transform: translateY(var(--space-xxs));
}
@media (prefers-color-scheme: dark) {
  button:active {
    transform: translateY(0.125rem);
    transform: translateY(var(--space-xxs));
  }
}
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
::-moz-placeholder {
  color: #949494;
  color: var(--form-placeholder);
}
::placeholder {
  color: #949494;
  color: var(--form-placeholder);
}
@media (prefers-color-scheme: dark) {
  ::-moz-placeholder {
    color: #a9a9a9;
    color: var(--form-placeholder);
  }
  ::placeholder {
    color: #a9a9a9;
    color: var(--form-placeholder);
  }
}
fieldset {
  border: 0.0625rem solid #0096bfab;
  border: var(--border-width-m) var(--focus) solid;
  margin: 0 0 0.75rem;
  margin-bottom: var(--space-l);
  padding: 0.625rem;
  padding: var(--space-m);
}
@media (prefers-color-scheme: dark) {
  fieldset {
    border: 0.0625rem solid #0096bfab;
    border: var(--border-width-m) var(--focus) solid;
    margin-bottom: 0.75rem;
    margin-bottom: var(--space-l);
    padding: 0.625rem;
    padding: var(--space-m);
  }
}
legend {
  font-size: 0.9em;
  font-weight: 600;
}
input[type="range"] {
  background: transparent;
  margin: 0.625rem 0;
  margin: var(--space-m) 0;
  padding: 0.625rem 0;
  padding: var(--space-m) 0;
}
@media (prefers-color-scheme: dark) {
  input[type="range"] {
    margin: 0.625rem 0;
    margin: var(--space-m) 0;
    padding: 0.625rem 0;
    padding: var(--space-m) 0;
  }
}
input[type="range"]:focus {
  outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  background: #efefef;
  background: var(--background);
  height: 0.625rem;
  height: var(--space-m);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  width: 100%;
}
@media (prefers-color-scheme: dark) {
  input[type="range"]::-webkit-slider-runnable-track {
    background: #161f27;
    background: var(--background);
    height: 0.625rem;
    height: var(--space-m);
  }
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #dbdbdb;
  background: var(--border);
  border-radius: 50%;
  box-shadow:
    0 1px 1px #000,
    0 0 1px #0d0d0d;
  height: 1.25rem;
  height: var(--space-xl);
  margin-top: -0.375rem;
  margin-top: calc(var(--space-s) * -1);
  width: 1.25rem;
  width: var(--space-xl);
}
@media (prefers-color-scheme: dark) {
  input[type="range"]::-webkit-slider-thumb {
    background: #526980;
    background: var(--border);
    height: 1.25rem;
    height: var(--space-xl);
    margin-top: -0.375rem;
    margin-top: calc(var(--space-s) * -1);
    width: 1.25rem;
    width: var(--space-xl);
  }
}
input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #efefef;
  background: var(--background);
}
@media (prefers-color-scheme: dark) {
  input[type="range"]:focus::-webkit-slider-runnable-track {
    background: #161f27;
    background: var(--background);
  }
}
input[type="range"]::-moz-range-track {
  background: #efefef;
  background: var(--background);
  height: 0.625rem;
  height: var(--space-m);
  -moz-transition: 0.2s;
  transition: 0.2s;
  width: 100%;
}
@media (prefers-color-scheme: dark) {
  input[type="range"]::-moz-range-track {
    background: #161f27;
    background: var(--background);
    height: 0.625rem;
    height: var(--space-m);
  }
}
input[type="range"]::-moz-range-thumb {
  background: #dbdbdb;
  background: var(--border);
  border-radius: 50%;
  box-shadow:
    1px 1px 1px #000,
    0 0 1px #0d0d0d;
  height: 1.25rem;
  height: var(--space-xl);
  width: 1.25rem;
  width: var(--space-xl);
}
@media (prefers-color-scheme: dark) {
  input[type="range"]::-moz-range-thumb {
    background: #526980;
    background: var(--border);
    height: 1.25rem;
    height: var(--space-xl);
    width: 1.25rem;
    width: var(--space-xl);
  }
}
input[type="range"]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 1rem 0;
  border-width: var(--base-unit) 0;
  color: transparent;
  height: 0.625rem;
  height: var(--space-m);
  width: 100%;
}
@media (prefers-color-scheme: dark) {
  input[type="range"]::-ms-track {
    border-width: 1rem 0;
    border-width: var(--base-unit) 0;
    height: 0.625rem;
    height: var(--space-m);
  }
}
input[type="range"]::-ms-fill-lower {
  background: #efefef;
  background: var(--background);
  border: 0.0125rem solid #010101;
  border: var(--border-width-s) solid #010101;
  box-shadow:
    1px 1px 1px #000,
    0 0 1px #0d0d0d;
}
@media (prefers-color-scheme: dark) {
  input[type="range"]::-ms-fill-lower {
    background: #161f27;
    background: var(--background);
    border: 0.0125rem solid #010101;
    border: var(--border-width-s) solid #010101;
  }
}
input[type="range"]::-ms-fill-upper {
  background: #efefef;
  background: var(--background);
  border: 0.0125rem solid #010101;
  border: var(--border-width-s) solid #010101;
  box-shadow:
    1px 1px 1px #000,
    0 0 1px #0d0d0d;
}
@media (prefers-color-scheme: dark) {
  input[type="range"]::-ms-fill-upper {
    background: #161f27;
    background: var(--background);
    border: 0.0125rem solid #010101;
    border: var(--border-width-s) solid #010101;
  }
}
input[type="range"]::-ms-thumb {
  background: #dbdbdb;
  background: var(--border);
  border: 0.0625rem solid #000;
  border: var(--border-width-m) solid #000;
  border-radius: 50%;
  box-shadow:
    1px 1px 1px #000,
    0 0 1px #0d0d0d;
  height: 1.25rem;
  height: var(--space-xl);
  width: 1.25rem;
  width: var(--space-xl);
}
@media (prefers-color-scheme: dark) {
  input[type="range"]::-ms-thumb {
    background: #526980;
    background: var(--border);
    border: 0.0625rem solid #000;
    border: var(--border-width-m) solid #000;
    height: 1.25rem;
    height: var(--space-xl);
    width: 1.25rem;
    width: var(--space-xl);
  }
}
input[type="range"]:focus::-ms-fill-lower {
  background: #efefef;
  background: var(--background);
}
@media (prefers-color-scheme: dark) {
  input[type="range"]:focus::-ms-fill-lower {
    background: #161f27;
    background: var(--background);
  }
}
input[type="range"]:focus::-ms-fill-upper {
  background: #efefef;
  background: var(--background);
}
@media (prefers-color-scheme: dark) {
  input[type="range"]:focus::-ms-fill-upper {
    background: #161f27;
    background: var(--background);
  }
}
a {
  color: #0076d1;
  color: var(--links);
  text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  a {
    color: #41adff;
    color: var(--links);
  }
}
a:hover {
  text-decoration: underline;
}
code {
  background: #efefef;
  background: var(--background);
  color: #000;
  color: var(--code);
  font-size: 1em;
  padding: 0.25rem 0.375rem;
  padding: var(--space-xs) var(--space-s);
}
@media (prefers-color-scheme: dark) {
  code {
    background: #161f27;
    background: var(--background);
    color: #ffbe85;
    color: var(--code);
    padding: 0.25rem 0.375rem;
    padding: var(--space-xs) var(--space-s);
  }
}
samp {
  background: #efefef;
  background: var(--background);
  color: #000;
  color: var(--code);
  font-size: 1em;
  padding: 0.25rem 0.375rem;
  padding: var(--space-xs) var(--space-s);
}
@media (prefers-color-scheme: dark) {
  samp {
    background: #161f27;
    background: var(--background);
    color: #ffbe85;
    color: var(--code);
    padding: 0.25rem 0.375rem;
    padding: var(--space-xs) var(--space-s);
  }
}
time {
  background: #efefef;
  background: var(--background);
  color: #000;
  color: var(--code);
  font-size: 1em;
  padding: 0.25rem 0.375rem;
  padding: var(--space-xs) var(--space-s);
}
@media (prefers-color-scheme: dark) {
  time {
    background: #161f27;
    background: var(--background);
    color: #ffbe85;
    color: var(--code);
    padding: 0.25rem 0.375rem;
    padding: var(--space-xs) var(--space-s);
  }
}
pre > code {
  display: block;
  overflow-x: auto;
  padding: 0.625rem;
  padding: var(--space-m);
}
@media (prefers-color-scheme: dark) {
  pre > code {
    padding: 0.625rem;
    padding: var(--space-m);
  }
}
var {
  color: #39a33c;
  color: var(--variable);
  font-family: monospace;
  font-style: normal;
}
@media (prefers-color-scheme: dark) {
  var {
    color: #d941e2;
    color: var(--variable);
  }
}
kbd {
  background: #efefef;
  background: var(--background);
  border: 0.0625rem solid #dbdbdb;
  border: var(--border-width-m) solid var(--border);
  color: #363636;
  color: var(--text-main);
  padding: 0.125rem 0.25rem;
  padding: var(--space-xxs) var(--space-xs);
}
@media (prefers-color-scheme: dark) {
  kbd {
    background: #161f27;
    background: var(--background);
    border: 0.0625rem solid #526980;
    border: var(--border-width-m) solid var(--border);
    color: #dbdbdb;
    color: var(--text-main);
    padding: 0.125rem 0.25rem;
    padding: var(--space-xxs) var(--space-xs);
  }
}
img,
video {
  height: auto;
  max-width: 100%;
}
hr {
  border: none;
  border-top: 0.0625rem solid #dbdbdb;
  border-top: var(--border-width-m) solid var(--border);
}
@media (prefers-color-scheme: dark) {
  hr {
    border-top: 0.0625rem solid #526980;
    border-top: var(--border-width-m) solid var(--border);
  }
}
table {
  border-collapse: collapse;
  margin-bottom: 0.625rem;
  margin-bottom: var(--space-m);
  table-layout: fixed;
  width: 100%;
}
@media (prefers-color-scheme: dark) {
  table {
    margin-bottom: 0.625rem;
    margin-bottom: var(--space-m);
  }
}
table caption,
td {
  text-align: left;
}
td {
  padding: 0.375rem;
  padding: var(--space-s);
  vertical-align: top;
  word-wrap: break-word;
}
@media (prefers-color-scheme: dark) {
  td {
    padding: 0.375rem;
    padding: var(--space-s);
  }
}
th {
  padding: 0.375rem;
  padding: var(--space-s);
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
}
@media (prefers-color-scheme: dark) {
  th {
    padding: 0.375rem;
    padding: var(--space-s);
  }
}
thead {
  border-bottom: 0.0625rem solid #dbdbdb;
  border-bottom: var(--border-width-m) solid var(--border);
}
@media (prefers-color-scheme: dark) {
  thead {
    border-bottom: 0.0625rem solid #526980;
    border-bottom: var(--border-width-m) solid var(--border);
  }
}
tfoot {
  border-top: 0.0625rem solid #dbdbdb;
  border-top: var(--border-width-m) solid var(--border);
}
@media (prefers-color-scheme: dark) {
  tfoot {
    border-top: 0.0625rem solid #526980;
    border-top: var(--border-width-m) solid var(--border);
  }
}
tbody tr:nth-child(2n) {
  background-color: #efefef;
  background-color: var(--background);
}
@media (prefers-color-scheme: dark) {
  tbody tr:nth-child(2n) {
    background-color: #161f27;
    background-color: var(--background);
  }
}
tbody tr:nth-child(2n) button {
  background-color: #f7f7f7;
  background-color: var(--background-alt);
}
@media (prefers-color-scheme: dark) {
  tbody tr:nth-child(2n) button {
    background-color: #1a242f;
    background-color: var(--background-alt);
  }
}
tbody tr:nth-child(2n) button:hover {
  background-color: #fff;
  background-color: var(--background-body);
}
@media (prefers-color-scheme: dark) {
  tbody tr:nth-child(2n) button:hover {
    background-color: #202b38;
    background-color: var(--background-body);
  }
}
::-webkit-scrollbar {
  height: 0.625rem;
  height: var(--space-m);
  width: 0.625rem;
  width: var(--space-m);
}
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar {
    height: 0.625rem;
    height: var(--space-m);
    width: 0.625rem;
    width: var(--space-m);
  }
}
::-webkit-scrollbar-track {
  background: #efefef;
  background: var(--background);
}
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-track {
    background: #161f27;
    background: var(--background);
  }
}
::-webkit-scrollbar-thumb {
  background: #0f0f0f;
  background: var(--scrollbar-thumb);
}
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb {
    background: #040a0f;
    background: var(--scrollbar-thumb);
  }
}
::-webkit-scrollbar-thumb:hover {
  background: #9b9b9b;
  background: var(--scrollbar-thumb-hover);
}
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb:hover {
    background: #000;
    background: var(--scrollbar-thumb-hover);
  }
}
::-moz-selection {
  background-color: #9e9e9e;
  background-color: var(--selection);
  color: #000;
  color: var(--text-bright);
}
::selection {
  background-color: #9e9e9e;
  background-color: var(--selection);
  color: #000;
  color: var(--text-bright);
}
@media (prefers-color-scheme: dark) {
  ::-moz-selection {
    color: #fff;
    color: var(--text-bright);
  }
  ::selection {
    color: #fff;
    color: var(--text-bright);
  }
}
@media (prefers-color-scheme: dark) {
  ::-moz-selection {
    background-color: #1c76c5;
    background-color: var(--selection);
  }
  ::selection {
    background-color: #1c76c5;
    background-color: var(--selection);
  }
}
details {
  align-items: flex-start;
  background-color: #f7f7f7;
  background-color: var(--background-alt);
  display: flex;
  flex-direction: column;
  margin: 1em 0;
  overflow: hidden;
  padding: 0.625rem 0.625rem 0;
  padding: var(--space-m) var(--space-m) 0;
}
@media (prefers-color-scheme: dark) {
  details {
    background-color: #1a242f;
    background-color: var(--background-alt);
    padding: 0.625rem 0.625rem 0;
    padding: var(--space-m) var(--space-m) 0;
  }
}
details[open] {
  padding: 0.625rem;
  padding: var(--space-m);
}
@media (prefers-color-scheme: dark) {
  details[open] {
    padding: 0.625rem;
    padding: var(--space-m);
  }
}
details > :last-child {
  margin-bottom: 0;
}
details[open] summary {
  margin-bottom: 0.625rem;
  margin-bottom: var(--space-m);
}
@media (prefers-color-scheme: dark) {
  details[open] summary {
    margin-bottom: 0.625rem;
    margin-bottom: var(--space-m);
  }
}
summary {
  background-color: #efefef;
  background-color: var(--background);
  cursor: pointer;
  display: list-item;
  margin: -0.625rem -0.625rem 0;
  margin: calc(var(--space-m) * -1) calc(var(--space-m) * -1) 0;
  outline: none;
  padding: 0.625rem;
  padding: var(--space-m);
}
@media (prefers-color-scheme: dark) {
  summary {
    background-color: #161f27;
    background-color: var(--background);
    margin: -0.625rem -0.625rem 0;
    margin: calc(var(--space-m) * -1) calc(var(--space-m) * -1) 0;
    padding: 0.625rem;
    padding: var(--space-m);
  }
}
summary:focus,
summary:hover {
  text-decoration: underline;
}
details > :not(summary) {
  margin-top: 0;
}
summary::-webkit-details-marker {
  color: #363636;
  color: var(--text-main);
}
@media (prefers-color-scheme: dark) {
  summary::-webkit-details-marker {
    color: #dbdbdb;
    color: var(--text-main);
  }
}
dialog {
  background-color: #f7f7f7;
  background-color: var(--background-alt);
  border: #dbdbdb;
  border-color: var(--border);
  color: #363636;
  color: var(--text-main);
  padding: 0.625rem 1.875rem;
  padding: var(--space-m) var(--space-xxxl);
}
@media (prefers-color-scheme: dark) {
  dialog {
    background-color: #1a242f;
    background-color: var(--background-alt);
    border-color: #526980;
    border-color: var(--border);
    color: #dbdbdb;
    color: var(--text-main);
    padding: 0.625rem 1.875rem;
    padding: var(--space-m) var(--space-xxxl);
  }
}
dialog > header:first-child {
  background-color: #efefef;
  background-color: var(--background);
  margin: -0.625rem -1.875rem 0.625rem;
  margin: calc(var(--space-m) * -1) calc(var(--space-xxxl) * -1) var(--space-m);
  padding: 0.625rem;
  padding: var(--space-m);
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  dialog > header:first-child {
    background-color: #161f27;
    background-color: var(--background);
    margin: -0.625rem -1.875rem 0.625rem;
    margin: calc(var(--space-m) * -1) calc(var(--space-xxxl) * -1)
      var(--space-m);
    padding: 0.625rem;
    padding: var(--space-m);
  }
}
dialog::backdrop {
  backdrop-filter: blur(0.25rem);
  backdrop-filter: blur(var(--space-xs));
  background: #0000009c;
}
@media (prefers-color-scheme: dark) {
  dialog::backdrop {
    backdrop-filter: blur(0.25rem);
    backdrop-filter: blur(var(--space-xs));
  }
}
footer {
  border-top: 0.0625rem solid #dbdbdb;
  border-top: var(--border-width-m) solid var(--border);
  color: #70777f;
  color: var(--text-muted);
  padding-top: 0.625rem;
  padding-top: var(--space-m);
}
@media (prefers-color-scheme: dark) {
  footer {
    border-top: 0.0625rem solid #526980;
    border-top: var(--border-width-m) solid var(--border);
    color: #a9b1ba;
    color: var(--text-muted);
    padding-top: 0.625rem;
    padding-top: var(--space-m);
  }
}
body > footer {
  margin-top: 2.5rem;
  margin-top: var(--space-xxxxl);
}
@media (prefers-color-scheme: dark) {
  body > footer {
    margin-top: 2.5rem;
    margin-top: var(--space-xxxxl);
  }
}
@media print {
  body,
  button,
  code,
  details,
  input,
  pre,
  summary,
  textarea {
    background-color: #fff;
  }
  button {
    border: 0.0625rem solid #000;
    border: var(--border-width-m) solid #000;
  }
  @media (prefers-color-scheme: dark) {
    button {
      border: 0.0625rem solid #000;
      border: var(--border-width-m) solid #000;
    }
  }
  input {
    border: 0.0625rem solid #000;
    border: var(--border-width-m) solid #000;
  }
  @media (prefers-color-scheme: dark) {
    input {
      border: 0.0625rem solid #000;
      border: var(--border-width-m) solid #000;
    }
  }
  textarea {
    border: 0.0625rem solid #000;
    border: var(--border-width-m) solid #000;
  }
  @media (prefers-color-scheme: dark) {
    textarea {
      border: 0.0625rem solid #000;
      border: var(--border-width-m) solid #000;
    }
  }
  body,
  button,
  code,
  footer,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  input,
  pre,
  strong,
  summary,
  textarea {
    color: #000;
  }
  summary::marker {
    color: #000;
  }
  summary::-webkit-details-marker {
    color: #000;
  }
  tbody tr:nth-child(2n) {
    background-color: #f2f2f2;
  }
  a {
    color: #00f;
    text-decoration: underline;
  }
}