@import 'https://use.fontawesome.com/releases/v5.7.1/css/all.css';
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}
/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}
/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}
:root {
  --font-smooth: always;
  --font-smooth-webkit: antialiased;
  --font-smooth-moz-osx: greyscale;
  --font-family: 'Helvetica Neue', Helvetica, monospace;
  --font-size: 14px;
  --line-height: 1.8em;
  --nav-font-size: 14px;
  --nav-line-height: inherit;
  --footer-font-size: 11px;
  --footer-line-height: 1.6em;
  --h-font-family: 'Helvetica Neue', Helvetica, monospace;
  --h1-font-family: var(--h-font-family);
  --h2-font-family: var(--h-font-family);
  --h3-font-family: var(--h-font-family);
  --h4-font-family: var(--h-font-family);
  --h5-font-family: var(--h-font-family);
  --h6-font-family: var(--h-font-family);
  --h1-font-size: 3.2em;
  --h2-font-size: 2.4em;
  --h3-font-size: 2.0em;
  --h4-font-size: 16px;
  --h5-font-size: 13px;
  --h6-font-size: 11px;
  --h1-font-weight: 700;
  --h2-font-weight: 700;
  --h3-font-weight: 700;
  --h4-font-weight: 700;
  --h5-font-weight: 700;
  --h6-font-weight: 700;
  --h1-line-height: 1.2em;
  --h2-line-height: 1.2em;
  --h3-line-height: 1.2em;
  --h4-line-height: 1.2em;
  --h5-line-height: 1.2em;
  --h6-line-height: 1.2em;
  --h1-letter-spacing: -2px;
  --h2-letter-spacing: -0.003em;
  --h3-letter-spacing: -0.003em;
  --h4-letter-spacing: -0.003em;
  --h5-letter-spacing: -0.003em;
  --h6-letter-spacing: -0.003em;
  --code-font-family: monospace;
  --blockquote-font-size: 13px;
  --blockquote-line-height: 1.6em;
  --listing-font-size: 14px;
  --listing-line-height: inherit;
  --features-font-size: 14px;
  --features-line-height: inherit;
  --apps-font-size: 14px;
  --apps-line-height: inherit;
  --table-font-size: 14px;
  --table-line-height: 1.8em;
  --button-font-size: inherit;
  --button-line-height: inherit;
  --button-padding: 10px 15px 10px 15px;
  --button-large-font-size: 18px;
  --button-large-line-height: inherit;
  --button-large-padding: 10px 15px 10px 15px;
  --button-normal-font-size: 16px;
  --button-normal-line-height: inherit;
  --button-normal-padding: 10px 15px 10px 15px;
  --button-medium-font-size: 14px;
  --button-medium-line-height: 24px;
  --button-medium-padding: 2px 5px 2px 5px;
  --button-small-font-size: 11px;
  --button-small-line-height: 20px;
  --button-small-padding: 2px 5px 2px 5px;
  --black: 23, 23, 23;
  --white: 255, 255, 255;
  --blue: 33, 144, 211;
  --orange: 232, 110, 72;
  --green: 0, 188, 127;
  --red: 255, 0, 0;
  --purple: 211, 22, 140;
  --grey17: 42, 42, 42;
  --grey23: 59, 59, 59;
  --grey98: 250, 250, 250;
  --page-width: 960px;
  --page-width-wider: 1200px;
  --page-width-smaller: 760px;
  --page-width-tinier: 640px;
  --page-width-mobile: 600px;
  --hero-page-width: 760px;
  --hero-page-width-smaller: 560px;
  --hero-page-width-bigger: 960px;
  --nav-height: 50px;
  --menu-width: 960px;
  --doc-grid-column-gap: 0px;
  --doc-grid-template-columns: 1fr 4fr 2fr;
  --doc-toc-background-color: rgba(var(--grey98), 1);
  --doc-side-background-color: rgba(var(--grey98), 1);
  --doc-toc-ul-margin: 0px 0px 0px 10px;
  --doc-toc-ul-padding: 0px;
  --doc-toc-selected-color: rgba(var(--orange), 1);
  --doc-page-link-color: rgba(var(--orange), 1);
}
html,
body {
  font-smooth: var(--font-smooth) !important;
  -webkit-font-smoothing: var(--font-smooth-webkit) !important;
  -moz-osx-font-smoothing: var(--font-smooth-moz-osx) !important;
}
html {
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
}
@media print {
  @page {
    size: auto;
    margin: 0mm 0mm 0mm 0mm;
  }
  .header,
  .footer {
    display: none ! important;
  }
  article {
    padding: 0 !important;
  }
}
.footer .list {
  font-size: var(--footer-font-size);
  line-height: var(--footer-line-height);
}
@media (max-width: 600px) {
  .footer .hr {
    padding: 10px ! important;
  }
}
section {
  padding: 60px;
  box-sizing: border-box;
  transition: background-color 0.5s;
}
section.big {
  padding: 80px;
}
section.huge {
  padding: 120px;
}
section.norm {
  padding-left: 60px ! important;
  padding-right: 60px ! important;
}
section.porm {
  padding-left: 0px ! important;
  padding-right: 0px ! important;
}
section.chopped {
  padding-bottom: 0px ! important;
}
section.separated-bottom {
  border-bottom: 1px solid #cccccc;
}
@media (max-width: 600px) {
  section {
    padding: 60px 20px 60px 20px ! important;
  }
}
section.transparent {
  --background-color: transparent;
  --current-color: inherit;
  background-color: var(--background-color);
  color: var(--current-color);
}
section.transparent:not(.standalone) + section.transparent {
  padding-top: 0px;
}
section.black {
  --background-color: rgba(var(--black), 1);
  --current-color: #ffffff;
  background-color: var(--background-color);
  color: var(--current-color);
}
section.black:not(.standalone) + section.black {
  padding-top: 0px;
}
section.black-transparent {
  --background-color: rgba(var(--black), 0.9);
  --current-color: #ffffff;
  background-color: var(--background-color);
  color: var(--current-color);
}
section.black-transparent:not(.standalone) + section.black-transparent {
  padding-top: 0px;
}
section.white {
  --background-color: rgba(var(--white), 1);
  --current-color: #000000;
  background-color: var(--background-color);
  color: var(--current-color);
}
section.white:not(.standalone) + section.white {
  padding-top: 0px;
}
section.white-transparent {
  --background-color: rgba(var(--white), 0.9);
  --current-color: #000000;
  background-color: var(--background-color);
  color: var(--current-color);
}
section.white-transparent:not(.standalone) + section.white-transparent {
  padding-top: 0px;
}
section.grey17 {
  --background-color: rgba(var(--grey17), 1);
  --current-color: #e9e9e9;
  background-color: var(--background-color);
  color: var(--current-color);
}
section.grey17:not(.standalone) + section.grey17 {
  padding-top: 0px;
}
section.grey23 {
  --background-color: rgba(var(--grey23), 1);
  --current-color: #e9e9e9;
  background-color: var(--background-color);
  color: var(--current-color);
}
section.grey23:not(.standalone) + section.grey23 {
  padding-top: 0px;
}
section.grey98 {
  --background-color: rgba(var(--grey98), 1);
  --current-color: #444444;
  background-color: var(--background-color);
  color: var(--current-color);
}
section.grey98:not(.standalone) + section.grey98 {
  padding-top: 0px;
}
section.grey {
  --background-color: #fafafa;
  --current-color: #444444;
  background-color: var(--background-color);
  color: var(--current-color);
}
section.grey:not(.standalone) + section.grey {
  padding-top: 0px;
}
section.ash {
  --background-color: #fbfbfb;
  --current-color: #444444;
  background-color: var(--background-color);
  color: var(--current-color);
}
section.ash:not(.standalone) + section.ash {
  padding-top: 0px;
}
section.dim {
  --background-color: #fcfcfc;
  --current-color: #444444;
  background-color: var(--background-color);
  color: var(--current-color);
}
section.dim:not(.standalone) + section.dim {
  padding-top: 0px;
}
section.fab {
  --background-color: #fdfdfd;
  --current-color: #444444;
  background-color: var(--background-color);
  color: var(--current-color);
}
section.fab:not(.standalone) + section.fab {
  padding-top: 0px;
}
section.orange {
  --background-color: rgba(var(--orange), 1);
  --current-color: #e9e9e9;
  background-color: var(--background-color);
  color: var(--current-color);
}
section.orange:not(.standalone) + section.orange {
  padding-top: 0px;
}
section.blue {
  --background-color: rgba(var(--blue), 1);
  --current-color: #e9e9e9;
  background-color: var(--background-color);
  color: var(--current-color);
}
section.blue:not(.standalone) + section.blue {
  padding-top: 0px;
}
section.white {
  --background-color: rgba(var(--white), 1);
  --current-color: #444444;
  background-color: var(--background-color);
  color: var(--current-color);
}
section.white:not(.standalone) + section.white {
  padding-top: 0px;
}
section.grey17-grey23 {
  background-image: linear-gradient(125deg, rgba(var(--grey17), 1) 0%, rgba(var(--grey23), 1) 100%);
  color: #e9e9e9;
}
section.grey17-grey23:not(.standalone) + section.grey17-grey23 {
  padding-top: 0px;
}
.system {
  max-width: var(--page-width);
  margin-left: auto;
  margin-right: auto;
}
.system.wider {
  max-width: var(--page-width-wider);
}
.system.smaller {
  max-width: var(--page-width-smaller);
}
.system.tinier {
  max-width: var(--page-width-tinier);
}
.system.norm {
  padding-left: 60px;
  padding-right: 60px;
}
.hero {
  max-width: var(--hero-page-width);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero.left {
  text-align: left;
  align-items: flex-start;
}
.hero.right {
  text-align: right;
  align-items: flex-end;
}
.hero.smaller {
  max-width: var(--hero-page-width-smaller);
}
.hero.bigger {
  max-width: var(--hero-page-width-bigger);
}
svg.black {
  color: rgba(var(--black), 1);
}
svg.white {
  color: rgba(var(--white), 1);
}
svg.blue {
  color: rgba(var(--blue), 1);
}
svg.orange {
  color: rgba(var(--orange), 1);
}
svg.green {
  color: rgba(var(--green), 1);
}
svg.red {
  color: rgba(var(--red), 1);
}
svg.purple {
  color: rgba(var(--purple), 1);
}
svg.squire {
  border-width: 2px;
  border-style: solid;
}
svg.squire.thin {
  border-width: 1px;
}
svg.squire.black {
  border-color: rgba(var(--black), 1);
}
svg.squire.white {
  border-color: rgba(var(--white), 1);
}
svg.squire.blue {
  border-color: rgba(var(--blue), 1);
}
svg.squire.orange {
  border-color: rgba(var(--orange), 1);
}
svg.squire.green {
  border-color: rgba(var(--green), 1);
}
svg.squire.red {
  border-color: rgba(var(--red), 1);
}
svg.squire.purple {
  border-color: rgba(var(--purple), 1);
}
svg.circle {
  border-radius: 100%;
  border-width: 2px;
  border-style: solid;
}
svg.circle.thin {
  border-width: 1px;
}
svg.circle.black {
  border-color: rgba(var(--black), 1);
}
svg.circle.white {
  border-color: rgba(var(--white), 1);
}
svg.circle.blue {
  border-color: rgba(var(--blue), 1);
}
svg.circle.orange {
  border-color: rgba(var(--orange), 1);
}
svg.circle.green {
  border-color: rgba(var(--green), 1);
}
svg.circle.red {
  border-color: rgba(var(--red), 1);
}
svg.circle.purple {
  border-color: rgba(var(--purple), 1);
}
svg.shadow-black {
  box-shadow: 15px 15px 1px rgba(var(--black), 1);
}
svg.shadow-white {
  box-shadow: 15px 15px 1px rgba(var(--white), 1);
}
svg.shadow-blue {
  box-shadow: 15px 15px 1px rgba(var(--blue), 1);
}
svg.shadow-orange {
  box-shadow: 15px 15px 1px rgba(var(--orange), 1);
}
svg.shadow-green {
  box-shadow: 15px 15px 1px rgba(var(--green), 1);
}
svg.shadow-red {
  box-shadow: 15px 15px 1px rgba(var(--red), 1);
}
svg.shadow-purple {
  box-shadow: 15px 15px 1px rgba(var(--purple), 1);
}
svg.outline {
  stroke-width: 1px;
}
svg.outline.thin {
  stroke-width: 0.5px;
}
svg.outline.black {
  color: rgba(var(--black), 0.05);
  stroke: rgba(var(--black), 1);
}
svg.outline.white {
  color: rgba(var(--white), 0.05);
  stroke: rgba(var(--white), 1);
}
svg.outline.blue {
  color: rgba(var(--blue), 0.05);
  stroke: rgba(var(--blue), 1);
}
svg.outline.orange {
  color: rgba(var(--orange), 0.05);
  stroke: rgba(var(--orange), 1);
}
svg.outline.green {
  color: rgba(var(--green), 0.05);
  stroke: rgba(var(--green), 1);
}
svg.outline.red {
  color: rgba(var(--red), 0.05);
  stroke: rgba(var(--red), 1);
}
svg.outline.purple {
  color: rgba(var(--purple), 0.05);
  stroke: rgba(var(--purple), 1);
}
svg.outline.grey17 {
  color: rgba(var(--grey17), 0.05);
  stroke: rgba(var(--grey17), 1);
}
svg.outline.grey23 {
  color: rgba(var(--grey23), 0.05);
  stroke: rgba(var(--grey23), 1);
}
svg.outline.grey98 {
  color: rgba(var(--grey98), 0.05);
  stroke: rgba(var(--grey98), 1);
}
svg.dim {
  opacity: 0.05;
}
svg.tiny {
  width: 25px;
  height: 25px;
}
svg.small {
  width: 50px;
  height: 50px;
}
svg.medium {
  width: 100px;
  height: 100px;
}
svg.big {
  width: 200px;
  height: 200px;
}
svg.huge {
  width: 400px;
  height: 400px;
}
svg.huuge {
  width: 600px;
  height: 600px;
}
svg.isometric-a {
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
}
svg.isometric-b {
  transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg);
}
svg.stripes.black,
svg.stripes.grey17,
svg.stripes.grey23,
svg.stripes.grey98 {
  background-image: repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(0, 0, 0, 0.03) 40px, rgba(0, 0, 0, 0.03) 80px);
}
svg.stripes.orange {
  background-image: repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(var(--orange), 0.1) 40px, rgba(var(--orange), 0.1) 80px);
}
svg.stripes.green {
  background-image: repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(var(--green), 0.1) 40px, rgba(var(--green), 0.1) 80px);
}
svg.stripes.red {
  background-image: repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(var(--red), 0.1) 40px, rgba(var(--red), 0.1) 80px);
}
svg.stripes.purple {
  background-image: repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(var(--purple), 0.1) 40px, rgba(var(--purple), 0.1) 80px);
}
svg.stripes.black {
  background-image: repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(0, 0, 0, 0.1) 40px, rgba(0, 0, 0, 0.1) 80px);
}
svg.stripes.white {
  background-image: repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(255, 255, 255, 0.1) 40px, rgba(255, 255, 255, 0.1) 80px);
}
ul li {
  margin: 0;
  padding: 0;
}
ul.links {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.list li {
  display: block;
}
ul.list li a {
  color: currentColor;
}
a {
  color: rgb(var(--blue));
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a.black {
  color: rgb(var(--black));
}
a.white {
  color: rgb(var(--white));
}
pre {
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
  font-size: 0.9em;
  line-height: 1.0em;
}
a.icon {
  display: block;
}
a.icon.small {
  width: 52px;
  height: 52px;
}
a.icon.medium {
  width: 100px;
  height: 100px;
}
.nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--nav-height);
  padding-top: 0px;
  padding-bottom: 0px;
  border-bottom: 1px solid rgba(var(--white), 0.1);
  font-size: var(--nav-font-size);
  line-height: var(--nav-line-height);
}
.nav.white {
  border-bottom: 1px solid rgba(var(--grey17), 0.1);
}
.nav {
  position: fixed;
  z-index: 1000;
}
.nav + * {
  padding-top: var(--nav-height);
}
@media (max-width: 600px) {
  .nav {
    position: initial;
    height: auto;
  }
  .nav + * {
    padding-top: 0px;
  }
}
.menu {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  max-width: var(--menu-width);
  margin-left: auto;
  margin-right: auto;
}
.menu a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.menu a.icon {
  line-height: 0px;
  color: currentcolor;
}
.menu a.icon > svg {
  width: auto;
  height: 50px;
}
.menu a:hover {
  color: rgba(var(--blue), 1);
}
@media (max-width: 600px) {
  .menu {
    flex-direction: column;
    align-items: flex-start;
  }
}
.menu.black a:hover {
  color: rgba(var(--black), 1);
}
.menu.white a:hover {
  color: rgba(var(--white), 1);
}
.menu.blue a:hover {
  color: rgba(var(--blue), 1);
}
.menu.orange a:hover {
  color: rgba(var(--orange), 1);
}
.menu.green a:hover {
  color: rgba(var(--green), 1);
}
.menu.red a:hover {
  color: rgba(var(--red), 1);
}
.menu.purple a:hover {
  color: rgba(var(--purple), 1);
}
.menu.grey17 a:hover {
  color: rgba(var(--grey17), 1);
}
.menu.grey23 a:hover {
  color: rgba(var(--grey23), 1);
}
.menu.grey98 a:hover {
  color: rgba(var(--grey98), 1);
}
span.letter {
  display: inline-block;
  text-align: center;
  width: 2em;
  height: 2em;
  font-size: 2em;
  line-height: 2em;
}
span.letter.circle {
  border-radius: 100%;
  border: 1px solid currentColor;
}
span.letter.bold {
  font-weight: bold;
}
span.letter.bold.circle {
  border-width: 2px;
}
span.small {
  font-size: 0.8em;
}
span.pre {
  white-space: pre;
}
.splitup {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.splitup > * {
  flex: 2;
  width: 100%;
}
.splitup > *.half {
  flex: 1;
}
.splitup > *.end {
  align-self: flex-end;
}
.splitup > .space {
  display: block;
  min-width: 30px;
  max-width: 30px;
}
.splitup > .space.tinier {
  min-width: 5px;
  max-width: 5px;
}
.splitup > .space.smaller {
  min-width: 15px;
  max-width: 15px;
}
.splitup > .space.bigger {
  min-width: 60px;
  max-width: 60px;
}
@media (max-width: 600px) {
  .splitup {
    flex-direction: column;
  }
  .splitup > .space {
    display: none;
  }
}
.text.small {
  font-size: 80%;
}
.actions {
  text-align: center;
}
.actions > *:not(:first-child) {
  margin-left: 10px;
}
.actions.left {
  text-align: left;
}
.actions.right {
  text-align: right;
}
.info {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--page-width);
  text-align: left;
}
.info pre {
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.info.smaller {
  max-width: var(--page-width-smaller);
}
.info.wider {
  max-width: var(--page-width-wider);
}
.front {
  overflow: hidden;
  text-align: center;
  height: 600px;
}
.front > img {
  width: 1200px;
}
.front.full {
  height: auto ! important;
}
.front.full > img {
  width: 100%;
}
.front.ltr {
  direction: ltr;
}
.front.rtl {
  direction: rtl;
}
.front.underlined {
  border-bottom: 1px solid #cccccc;
}
.front.underlined.left {
  border-left: 1px solid #cccccc;
}
.front.underlined.right {
  border-right: 1px solid #cccccc;
}
.editable {
  cursor: crosshair;
}
.container {
  position: relative;
}
.container .pos-top {
  position: absolute;
  top: 0;
}
.container .pos-bottom {
  position: absolute;
  bottom: 0;
}
.container .pos-left {
  position: absolute;
  left: 0;
}
.container .pos-right {
  position: absolute;
  right: 0;
}
.quote {
  display: flex;
  flex-direction: column;
}
.quote > blockquote {
  flex: 1;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
  font-size: var(--blockquote-font-size);
  line-height: var(--blockquote-line-height);
}
.quote > blockquote.quoted:before {
  content: open-quote;
  font-size: 2em;
  line-height: 0.2em;
  margin-right: 0.26em;
  vertical-align: -0.4em;
}
.quote > blockquote.quoted:after {
  content: close-quote;
  font-size: 2em;
  line-height: 0.2em;
  margin-left: 0.26em;
  vertical-align: -0.4em;
}
.quote > div {
  marginTop: 10px;
}
.preso {
  text-align: center;
}
.preso > *:not(:last-child) {
  margin: 0px;
  padding: 0px;
  margin-bottom: 40px ! important;
}
.listing {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
@media (min-width: 600px) {
  .listing {
    flex-wrap: nowrap;
  }
}
.listing a.app {
  --color: var(--current-color);
  display: inline-block;
  width: 100px;
  height: 100px;
  text-decoration: none;
  font-size: var(--listing-font-size);
  line-height: var(--listing-line-height);
}
.listing a.app > span {
  display: block;
  text-align: center;
  color: var(--color);
}
.listing a.app > svg {
  display: block;
  width: 100%;
  height: 100%;
  paint-order: stroke;
  transition: color 0.5s, stroke 0.5s;
  color: transparent;
  stroke: var(--color);
}
.listing a.app:hover > svg {
  color: var(--color);
  stroke: var(--color);
}
.listing a.app.selected > svg {
  color: var(--color);
  stroke: var(--color);
}
.listing a.app.nominated > svg {
  color: rgba(var(--color-blue), 0.1);
  stroke: rgba(var(--color-blue), 0.1);
}
.listing.tiny {
  width: var(--page-width);
  overflow: hidden;
}
.listing.tiny a.app {
  width: 50px;
  height: 50px;
}
.listing.centered {
  justify-content: center;
}
.listing.left {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.cards {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-flow: row wrap;
}
.cards[data-selector="selfhosted"] > .card:not(.selfhosted) {
  display: none;
}
.cards[data-selector="reward"] > .card:not(.reward) {
  display: none;
}
.cards[data-selector="hof"] > .card:not(.hof) {
  display: none;
}
.cards[data-selector="fiddles"] > .card:not(.fiddles) {
  display: none;
}
.card {
  --border-grey: #dcdcdc;
  height: 200px;
  width: 400px;
  border: 1px solid var(--border-grey);
  display: flex;
  margin-bottom: 30px;
}
.card > .left {
  height: 200px;
  width: 200px;
  border-right: 1px dashed var(--border-grey);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
}
.card > .left > .logo {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  line-height: 120px;
}
.card > .left > .logo > img {
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
}
.card > .right {
  height: 200px;
  width: 200px;
}
.card > .right > .badges {
  width: 200px;
  height: 75px;
  display: flex;
  justify-content: space-evenly;
  border-bottom: 1px dashed var(--border-grey);
}
.card > .right > .badges > svg {
  margin: auto;
}
.card > .right > .links {
  width: 200px;
  height: 125px;
}
.card > .right > .links > .fiddles,
.card > .right > .links > .targets {
  display: inline-block;
}
.card > .right > .links > .fiddles > .link,
.card > .right > .links > .targets > .link {
  padding: 0 5px;
}
.card > .right > .links > .fiddles > .link > svg,
.card > .right > .links > .targets > .link > svg {
  padding-right: 5px;
}
.todo {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}
.todo > span {
  flex: 0 0 64px;
  margin-right: 10px;
}
.todo > p {
  margin: 0;
}
@media (min-width: 500px) {
  .central.listing {
    width: 300px;
  }
}
@media (min-width: 700px) {
  .central.listing {
    width: 600px;
  }
}
button,
.button-like {
  display: inline-block;
  text-decoration: none;
  outline: none;
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
  padding: var(--button-padding);
  text-align: center;
  border-width: 1px;
  border-style: solid;
}
button:hover,
.button-like:hover,
button:active,
.button-like:active,
button:disabled,
.button-like:disabled,
button *.disabled,
.button-like *.disabled {
  text-decoration: none;
}
button.large,
.button-like.large {
  font-size: var(--button-large-font-size);
  line-height: var(--button-large-line-height);
  padding: var(--button-large-padding);
}
button.normal,
.button-like.normal {
  font-size: var(--button-normal-font-size);
  line-height: var(--button-normal-line-height);
  padding: var(--button-normal-padding);
}
button.medium,
.button-like.medium {
  font-size: var(--button-medium-font-size);
  line-height: var(--button-medium-line-height);
  padding: var(--button-medium-padding);
}
button.small,
.button-like.small {
  font-size: var(--button-small-font-size);
  line-height: var(--button-small-line-height);
  padding: var(--button-small-padding);
}
button.w100,
.button-like.w100 {
  width: 100%;
  max-width: 100px;
}
button.w150,
.button-like.w150 {
  width: 100%;
  max-width: 150px;
}
button.w200,
.button-like.w200 {
  width: 100%;
  max-width: 200px;
}
button.black,
.button-like.black,
button.black.default,
.button-like.black.default,
button.black:active,
.button-like.black:active,
button.black:focus,
.button-like.black:focus {
  --background-color: var(--black);
  --color: var(--white);
  border-color: rgba(var(--background-color), 1.0);
}
button.black:not(.default),
.button-like.black:not(.default),
button.black.default:not(.default),
.button-like.black.default:not(.default),
button.black:active:not(.default),
.button-like.black:active:not(.default),
button.black:focus:not(.default),
.button-like.black:focus:not(.default) {
  background-color: rgba(var(--background-color), 0.0);
  color: rgba(var(--background-color), 1.0);
  transition: background-color 0.5s, color 0.5s;
}
button.black:not(.default):hover,
.button-like.black:not(.default):hover,
button.black.default:not(.default):hover,
.button-like.black.default:not(.default):hover,
button.black:active:not(.default):hover,
.button-like.black:active:not(.default):hover,
button.black:focus:not(.default):hover,
.button-like.black:focus:not(.default):hover {
  background-color: rgba(var(--background-color), 0.2);
}
button.black:not(.default):disabled,
.button-like.black:not(.default):disabled,
button.black.default:not(.default):disabled,
.button-like.black.default:not(.default):disabled,
button.black:active:not(.default):disabled,
.button-like.black:active:not(.default):disabled,
button.black:focus:not(.default):disabled,
.button-like.black:focus:not(.default):disabled {
  border-color: rgba(var(--background-color), 0.1);
  background-color: rgba(var(--background-color), 0.2);
}
button.black.default,
.button-like.black.default,
button.black.default.default,
.button-like.black.default.default,
button.black:active.default,
.button-like.black:active.default,
button.black:focus.default,
.button-like.black:focus.default {
  background-color: rgba(var(--background-color), 1.0);
  color: rgba(var(--color), 1.0);
}
button.white,
.button-like.white,
button.white.default,
.button-like.white.default,
button.white:active,
.button-like.white:active,
button.white:focus,
.button-like.white:focus {
  --background-color: var(--white);
  --color: var(--black);
  border-color: rgba(var(--background-color), 1.0);
}
button.white:not(.default),
.button-like.white:not(.default),
button.white.default:not(.default),
.button-like.white.default:not(.default),
button.white:active:not(.default),
.button-like.white:active:not(.default),
button.white:focus:not(.default),
.button-like.white:focus:not(.default) {
  background-color: rgba(var(--background-color), 0.0);
  color: rgba(var(--background-color), 1.0);
  transition: background-color 0.5s, color 0.5s;
}
button.white:not(.default):hover,
.button-like.white:not(.default):hover,
button.white.default:not(.default):hover,
.button-like.white.default:not(.default):hover,
button.white:active:not(.default):hover,
.button-like.white:active:not(.default):hover,
button.white:focus:not(.default):hover,
.button-like.white:focus:not(.default):hover {
  background-color: rgba(var(--background-color), 0.2);
}
button.white:not(.default):disabled,
.button-like.white:not(.default):disabled,
button.white.default:not(.default):disabled,
.button-like.white.default:not(.default):disabled,
button.white:active:not(.default):disabled,
.button-like.white:active:not(.default):disabled,
button.white:focus:not(.default):disabled,
.button-like.white:focus:not(.default):disabled {
  border-color: rgba(var(--background-color), 0.1);
  background-color: rgba(var(--background-color), 0.2);
}
button.white.default,
.button-like.white.default,
button.white.default.default,
.button-like.white.default.default,
button.white:active.default,
.button-like.white:active.default,
button.white:focus.default,
.button-like.white:focus.default {
  background-color: rgba(var(--background-color), 1.0);
  color: rgba(var(--color), 1.0);
}
button.blue,
.button-like.blue,
button.blue.default,
.button-like.blue.default,
button.blue:active,
.button-like.blue:active,
button.blue:focus,
.button-like.blue:focus {
  --background-color: var(--blue);
  --color: var(--white);
  border-color: rgba(var(--background-color), 1.0);
}
button.blue:not(.default),
.button-like.blue:not(.default),
button.blue.default:not(.default),
.button-like.blue.default:not(.default),
button.blue:active:not(.default),
.button-like.blue:active:not(.default),
button.blue:focus:not(.default),
.button-like.blue:focus:not(.default) {
  background-color: rgba(var(--background-color), 0.0);
  color: rgba(var(--background-color), 1.0);
  transition: background-color 0.5s, color 0.5s;
}
button.blue:not(.default):hover,
.button-like.blue:not(.default):hover,
button.blue.default:not(.default):hover,
.button-like.blue.default:not(.default):hover,
button.blue:active:not(.default):hover,
.button-like.blue:active:not(.default):hover,
button.blue:focus:not(.default):hover,
.button-like.blue:focus:not(.default):hover {
  background-color: rgba(var(--background-color), 0.2);
}
button.blue:not(.default):disabled,
.button-like.blue:not(.default):disabled,
button.blue.default:not(.default):disabled,
.button-like.blue.default:not(.default):disabled,
button.blue:active:not(.default):disabled,
.button-like.blue:active:not(.default):disabled,
button.blue:focus:not(.default):disabled,
.button-like.blue:focus:not(.default):disabled {
  border-color: rgba(var(--background-color), 0.1);
  background-color: rgba(var(--background-color), 0.2);
}
button.blue.default,
.button-like.blue.default,
button.blue.default.default,
.button-like.blue.default.default,
button.blue:active.default,
.button-like.blue:active.default,
button.blue:focus.default,
.button-like.blue:focus.default {
  background-color: rgba(var(--background-color), 1.0);
  color: rgba(var(--color), 1.0);
}
button.orange,
.button-like.orange,
button.orange.default,
.button-like.orange.default,
button.orange:active,
.button-like.orange:active,
button.orange:focus,
.button-like.orange:focus {
  --background-color: var(--orange);
  --color: var(--white);
  border-color: rgba(var(--background-color), 1.0);
}
button.orange:not(.default),
.button-like.orange:not(.default),
button.orange.default:not(.default),
.button-like.orange.default:not(.default),
button.orange:active:not(.default),
.button-like.orange:active:not(.default),
button.orange:focus:not(.default),
.button-like.orange:focus:not(.default) {
  background-color: rgba(var(--background-color), 0.0);
  color: rgba(var(--background-color), 1.0);
  transition: background-color 0.5s, color 0.5s;
}
button.orange:not(.default):hover,
.button-like.orange:not(.default):hover,
button.orange.default:not(.default):hover,
.button-like.orange.default:not(.default):hover,
button.orange:active:not(.default):hover,
.button-like.orange:active:not(.default):hover,
button.orange:focus:not(.default):hover,
.button-like.orange:focus:not(.default):hover {
  background-color: rgba(var(--background-color), 0.2);
}
button.orange:not(.default):disabled,
.button-like.orange:not(.default):disabled,
button.orange.default:not(.default):disabled,
.button-like.orange.default:not(.default):disabled,
button.orange:active:not(.default):disabled,
.button-like.orange:active:not(.default):disabled,
button.orange:focus:not(.default):disabled,
.button-like.orange:focus:not(.default):disabled {
  border-color: rgba(var(--background-color), 0.1);
  background-color: rgba(var(--background-color), 0.2);
}
button.orange.default,
.button-like.orange.default,
button.orange.default.default,
.button-like.orange.default.default,
button.orange:active.default,
.button-like.orange:active.default,
button.orange:focus.default,
.button-like.orange:focus.default {
  background-color: rgba(var(--background-color), 1.0);
  color: rgba(var(--color), 1.0);
}
button.green,
.button-like.green,
button.green.default,
.button-like.green.default,
button.green:active,
.button-like.green:active,
button.green:focus,
.button-like.green:focus {
  --background-color: var(--green);
  --color: var(--white);
  border-color: rgba(var(--background-color), 1.0);
}
button.green:not(.default),
.button-like.green:not(.default),
button.green.default:not(.default),
.button-like.green.default:not(.default),
button.green:active:not(.default),
.button-like.green:active:not(.default),
button.green:focus:not(.default),
.button-like.green:focus:not(.default) {
  background-color: rgba(var(--background-color), 0.0);
  color: rgba(var(--background-color), 1.0);
  transition: background-color 0.5s, color 0.5s;
}
button.green:not(.default):hover,
.button-like.green:not(.default):hover,
button.green.default:not(.default):hover,
.button-like.green.default:not(.default):hover,
button.green:active:not(.default):hover,
.button-like.green:active:not(.default):hover,
button.green:focus:not(.default):hover,
.button-like.green:focus:not(.default):hover {
  background-color: rgba(var(--background-color), 0.2);
}
button.green:not(.default):disabled,
.button-like.green:not(.default):disabled,
button.green.default:not(.default):disabled,
.button-like.green.default:not(.default):disabled,
button.green:active:not(.default):disabled,
.button-like.green:active:not(.default):disabled,
button.green:focus:not(.default):disabled,
.button-like.green:focus:not(.default):disabled {
  border-color: rgba(var(--background-color), 0.1);
  background-color: rgba(var(--background-color), 0.2);
}
button.green.default,
.button-like.green.default,
button.green.default.default,
.button-like.green.default.default,
button.green:active.default,
.button-like.green:active.default,
button.green:focus.default,
.button-like.green:focus.default {
  background-color: rgba(var(--background-color), 1.0);
  color: rgba(var(--color), 1.0);
}
button.red,
.button-like.red,
button.red.default,
.button-like.red.default,
button.red:active,
.button-like.red:active,
button.red:focus,
.button-like.red:focus {
  --background-color: var(--red);
  --color: var(--white);
  border-color: rgba(var(--background-color), 1.0);
}
button.red:not(.default),
.button-like.red:not(.default),
button.red.default:not(.default),
.button-like.red.default:not(.default),
button.red:active:not(.default),
.button-like.red:active:not(.default),
button.red:focus:not(.default),
.button-like.red:focus:not(.default) {
  background-color: rgba(var(--background-color), 0.0);
  color: rgba(var(--background-color), 1.0);
  transition: background-color 0.5s, color 0.5s;
}
button.red:not(.default):hover,
.button-like.red:not(.default):hover,
button.red.default:not(.default):hover,
.button-like.red.default:not(.default):hover,
button.red:active:not(.default):hover,
.button-like.red:active:not(.default):hover,
button.red:focus:not(.default):hover,
.button-like.red:focus:not(.default):hover {
  background-color: rgba(var(--background-color), 0.2);
}
button.red:not(.default):disabled,
.button-like.red:not(.default):disabled,
button.red.default:not(.default):disabled,
.button-like.red.default:not(.default):disabled,
button.red:active:not(.default):disabled,
.button-like.red:active:not(.default):disabled,
button.red:focus:not(.default):disabled,
.button-like.red:focus:not(.default):disabled {
  border-color: rgba(var(--background-color), 0.1);
  background-color: rgba(var(--background-color), 0.2);
}
button.red.default,
.button-like.red.default,
button.red.default.default,
.button-like.red.default.default,
button.red:active.default,
.button-like.red:active.default,
button.red:focus.default,
.button-like.red:focus.default {
  background-color: rgba(var(--background-color), 1.0);
  color: rgba(var(--color), 1.0);
}
button.purple,
.button-like.purple,
button.purple.default,
.button-like.purple.default,
button.purple:active,
.button-like.purple:active,
button.purple:focus,
.button-like.purple:focus {
  --background-color: var(--purple);
  --color: var(--white);
  border-color: rgba(var(--background-color), 1.0);
}
button.purple:not(.default),
.button-like.purple:not(.default),
button.purple.default:not(.default),
.button-like.purple.default:not(.default),
button.purple:active:not(.default),
.button-like.purple:active:not(.default),
button.purple:focus:not(.default),
.button-like.purple:focus:not(.default) {
  background-color: rgba(var(--background-color), 0.0);
  color: rgba(var(--background-color), 1.0);
  transition: background-color 0.5s, color 0.5s;
}
button.purple:not(.default):hover,
.button-like.purple:not(.default):hover,
button.purple.default:not(.default):hover,
.button-like.purple.default:not(.default):hover,
button.purple:active:not(.default):hover,
.button-like.purple:active:not(.default):hover,
button.purple:focus:not(.default):hover,
.button-like.purple:focus:not(.default):hover {
  background-color: rgba(var(--background-color), 0.2);
}
button.purple:not(.default):disabled,
.button-like.purple:not(.default):disabled,
button.purple.default:not(.default):disabled,
.button-like.purple.default:not(.default):disabled,
button.purple:active:not(.default):disabled,
.button-like.purple:active:not(.default):disabled,
button.purple:focus:not(.default):disabled,
.button-like.purple:focus:not(.default):disabled {
  border-color: rgba(var(--background-color), 0.1);
  background-color: rgba(var(--background-color), 0.2);
}
button.purple.default,
.button-like.purple.default,
button.purple.default.default,
.button-like.purple.default.default,
button.purple:active.default,
.button-like.purple:active.default,
button.purple:focus.default,
.button-like.purple:focus.default {
  background-color: rgba(var(--background-color), 1.0);
  color: rgba(var(--color), 1.0);
}
code,
.code-like {
  font-family: var(--code-font-family);
}
.code-block pre,
.code-block .pre-like,
.code-block code,
.code-block .code-like {
  word-break: break-all !important;
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
  font-size: 0.9em;
}
.code-block code,
.code-block .code-like {
  padding: 20px ! important;
}
.code-block-xl pre,
.code-block-xl .pre-like,
.code-block-xl code,
.code-block-xl .code-like {
  word-break: normal !important;
  word-wrap: normal !important;
  white-space: pre !important;
  font-size: 0.9em;
}
.code-block-xl code,
.code-block-xl .code-like {
  padding: 20px ! important;
}
div.features .entry {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-row-gap: 10px;
  text-align: center;
  text-decoration: none;
  color: currentColor;
  font-size: var(--features-font-size);
  line-height: var(--features-line-height);
}
div.features .entry > div:first-child {
  padding: 20px 0px 20px 0px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
div.features .entry > div:first-child > img {
  width: 80%;
  height: auto;
}
div.features .entry > div:last-child {
  display: grid;
  grid-template-rows: auto auto;
}
div.features .entry > div:last-child > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
div.features .entry:hover {
  color: rgba(var(--blue), 1);
}
.apps .entry {
  display: grid;
  grid-template-rows: 1fr auto;
  text-align: center;
  text-decoration: none;
  color: currentColor;
  font-size: var(--apps-font-size);
  line-height: var(--apps-line-height);
}
.apps .entry > div:first-child {
  background-color: rgba(var(--white), 1);
  color: rgba(var(--grey17), 1);
  background-size: 100% 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.apps .entry > div:first-child > img {
  width: 80%;
  height: auto;
}
.apps .entry > div:last-child {
  display: grid;
  grid-template-rows: auto auto;
}
.apps .entry > div:last-child > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apps .entry:hover {
  color: rgba(var(--blue), 1);
}
.apps .entry:hover svg {
  color: rgba(var(--blue), 1);
  fill: rgba(var(--blue), 1);
}
@media (min-width: 600px) {
  #doc {
    display: grid;
    grid-column-gap: var(--doc-grid-column-gap);
    grid-template-columns: var(--doc-grid-template-columns);
  }
}
#doc #doc-toc {
  background: var(--doc-toc-background-color);
  overflow: auto;
  padding: 20px;
}
@media (min-width: 600px) {
  #doc #doc-toc {
    position: sticky;
    top: 0;
    height: 100vh;
  }
}
#doc #doc-toc ul {
  list-style-type: none;
  margin: var(--doc-toc-ul-margin);
  padding: var(--doc-toc-ul-padding);
}
#doc #doc-toc ul ul {
  margin-bottom: 20px;
}
#doc #doc-toc ul li a {
  color: inherit;
}
#doc #doc-toc ul li.selected a {
  color: var(--doc-toc-selected-color);
}
#doc #doc-toc h1 {
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
}
#doc #doc-toc h2 {
  font-family: var(--h5-font-family);
  font-size: var(--h5-font-size);
  font-weight: var(--h5-font-weight);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
}
#doc #doc-side {
  background: var(--doc-side-background-color);
  overflow: auto;
  padding: 20px;
}
#doc #doc-page {
  padding: 20px 60px 20px 60px;
}
@media (max-width: 600px) {
  #doc #doc-page {
    padding: 20px 20px 20px 20px !important;
  }
}
#doc #doc-page h1 {
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  margin-top: 0px;
}
#doc #doc-page h2 {
  font-family: var(--h3-font-family);
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
}
#doc #doc-page h3 {
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
}
#doc #doc-page img {
  width: 100%;
}
#doc #doc-page a {
  color: var(--doc-page-link-color);
}
img.avatar {
  height: 100px;
}
.screenshot-slides img {
  display: inline-block;
  width: auto;
  height: 50px;
  cursor: pointer;
  border: 1px solid transparent;
}
.screenshot-slides img:not(:last-child) {
  margin-right: 5px;
}
.screenshot-slides img.selected {
  border-color: rgba(var(--blue), 1);
}
.archive ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.m0 {
  margin: 0px !important;
}
.m10 {
  margin: 10px !important;
}
.m20 {
  margin: 20px !important;
}
.m30 {
  margin: 30px !important;
}
.m40 {
  margin: 40px !important;
}
.m50 {
  margin: 50px !important;
}
.m60 {
  margin: 60px !important;
}
.m70 {
  margin: 70px !important;
}
.m80 {
  margin: 80px !important;
}
.m90 {
  margin: 90px !important;
}
.m100 {
  margin: 100px !important;
}
.mt0 {
  margin-top: 0px !important;
}
.mt10 {
  margin-top: 10px !important;
}
.mt20 {
  margin-top: 20px !important;
}
.mt30 {
  margin-top: 30px !important;
}
.mt40 {
  margin-top: 40px !important;
}
.mt50 {
  margin-top: 50px !important;
}
.mt60 {
  margin-top: 60px !important;
}
.mt70 {
  margin-top: 70px !important;
}
.mt80 {
  margin-top: 80px !important;
}
.mt90 {
  margin-top: 90px !important;
}
.mt100 {
  margin-top: 100px !important;
}
.mb0 {
  margin-bottom: 0px !important;
}
.mb10 {
  margin-bottom: 10px !important;
}
.mb20 {
  margin-bottom: 20px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.mb40 {
  margin-bottom: 40px !important;
}
.mb50 {
  margin-bottom: 50px !important;
}
.mb60 {
  margin-bottom: 60px !important;
}
.mb70 {
  margin-bottom: 70px !important;
}
.mb80 {
  margin-bottom: 80px !important;
}
.mb90 {
  margin-bottom: 90px !important;
}
.mb100 {
  margin-bottom: 100px !important;
}
.ml0 {
  margin-left: 0px !important;
}
.ml10 {
  margin-left: 10px !important;
}
.ml20 {
  margin-left: 20px !important;
}
.ml30 {
  margin-left: 30px !important;
}
.ml40 {
  margin-left: 40px !important;
}
.ml50 {
  margin-left: 50px !important;
}
.ml60 {
  margin-left: 60px !important;
}
.ml70 {
  margin-left: 70px !important;
}
.ml80 {
  margin-left: 80px !important;
}
.ml90 {
  margin-left: 90px !important;
}
.ml100 {
  margin-left: 100px !important;
}
.mr0 {
  margin-right: 0px !important;
}
.mr10 {
  margin-right: 10px !important;
}
.mr20 {
  margin-right: 20px !important;
}
.mr30 {
  margin-right: 30px !important;
}
.mr40 {
  margin-right: 40px !important;
}
.mr50 {
  margin-right: 50px !important;
}
.mr60 {
  margin-right: 60px !important;
}
.mr70 {
  margin-right: 70px !important;
}
.mr80 {
  margin-right: 80px !important;
}
.mr90 {
  margin-right: 90px !important;
}
.mr100 {
  margin-right: 100px !important;
}
.p0 {
  padding: 0px !important;
}
.p10 {
  padding: 10px !important;
}
.p20 {
  padding: 20px !important;
}
.p30 {
  padding: 30px !important;
}
.p40 {
  padding: 40px !important;
}
.p50 {
  padding: 50px !important;
}
.p60 {
  padding: 60px !important;
}
.p70 {
  padding: 70px !important;
}
.p80 {
  padding: 80px !important;
}
.p90 {
  padding: 90px !important;
}
.p100 {
  padding: 100px !important;
}
.pt0 {
  padding-top: 0px !important;
}
.pt10 {
  padding-top: 10px !important;
}
.pt20 {
  padding-top: 20px !important;
}
.pt30 {
  padding-top: 30px !important;
}
.pt40 {
  padding-top: 40px !important;
}
.pt50 {
  padding-top: 50px !important;
}
.pt60 {
  padding-top: 60px !important;
}
.pt70 {
  padding-top: 70px !important;
}
.pt80 {
  padding-top: 80px !important;
}
.pt90 {
  padding-top: 90px !important;
}
.pt100 {
  padding-top: 100px !important;
}
.pb0 {
  padding-bottom: 0px !important;
}
.pb10 {
  padding-bottom: 10px !important;
}
.pb20 {
  padding-bottom: 20px !important;
}
.pb30 {
  padding-bottom: 30px !important;
}
.pb40 {
  padding-bottom: 40px !important;
}
.pb50 {
  padding-bottom: 50px !important;
}
.pb60 {
  padding-bottom: 60px !important;
}
.pb70 {
  padding-bottom: 70px !important;
}
.pb80 {
  padding-bottom: 80px !important;
}
.pb90 {
  padding-bottom: 90px !important;
}
.pb100 {
  padding-bottom: 100px !important;
}
.pl0 {
  padding-left: 0px !important;
}
.pl10 {
  padding-left: 10px !important;
}
.pl20 {
  padding-left: 20px !important;
}
.pl30 {
  padding-left: 30px !important;
}
.pl40 {
  padding-left: 40px !important;
}
.pl50 {
  padding-left: 50px !important;
}
.pl60 {
  padding-left: 60px !important;
}
.pl70 {
  padding-left: 70px !important;
}
.pl80 {
  padding-left: 80px !important;
}
.pl90 {
  padding-left: 90px !important;
}
.pl100 {
  padding-left: 100px !important;
}
.pr0 {
  padding-right: 0px !important;
}
.pr10 {
  padding-right: 10px !important;
}
.pr20 {
  padding-right: 20px !important;
}
.pr30 {
  padding-right: 30px !important;
}
.pr40 {
  padding-right: 40px !important;
}
.pr50 {
  padding-right: 50px !important;
}
.pr60 {
  padding-right: 60px !important;
}
.pr70 {
  padding-right: 70px !important;
}
.pr80 {
  padding-right: 80px !important;
}
.pr90 {
  padding-right: 90px !important;
}
.pr100 {
  padding-right: 100px !important;
}
.gradient-blue-black {
  background-image: linear-gradient(125deg, rgba(var(--blue), 1) 0%, rgba(var(--black), 1) 100%);
}
.gradient-blue-white {
  background-image: linear-gradient(125deg, rgba(var(--blue), 1) 0%, rgba(var(--white), 1) 100%);
}
.gradient-blue-orange {
  background-image: linear-gradient(125deg, rgba(var(--blue), 1) 0%, rgba(var(--orange), 1) 100%);
}
.gradient-blue-green {
  background-image: linear-gradient(125deg, rgba(var(--blue), 1) 0%, rgba(var(--green), 1) 100%);
}
.gradient-orange-black {
  background-image: linear-gradient(125deg, rgba(var(--orange), 1) 0%, rgba(var(--black), 1) 100%);
}
.gradient-orange-white {
  background-image: linear-gradient(125deg, rgba(var(--orange), 1) 0%, rgba(var(--white), 1) 100%);
}
.gradient-orange-blue {
  background-image: linear-gradient(125deg, rgba(var(--orange), 1) 0%, rgba(var(--blue), 1) 100%);
}
.gradient-orange-green {
  background-image: linear-gradient(125deg, rgba(var(--orange), 1) 0%, rgba(var(--green), 1) 100%);
}
.gradient-green-black {
  background-image: linear-gradient(125deg, rgba(var(--green), 1) 0%, rgba(var(--black), 1) 100%);
}
.gradient-green-white {
  background-image: linear-gradient(125deg, rgba(var(--green), 1) 0%, rgba(var(--white), 1) 100%);
}
.gradient-green-blue {
  background-image: linear-gradient(125deg, rgba(var(--green), 1) 0%, rgba(var(--blue), 1) 100%);
}
.gradient-green-orange {
  background-image: linear-gradient(125deg, rgba(var(--green), 1) 0%, rgba(var(--orange), 1) 100%);
}
.gradient-grey-grey98 {
  background-image: linear-gradient(125deg, rgba(var(--grey17), 1) 0%, rgba(var(--grey98), 1) 100%);
}
.background-black {
  background: rgba(var(--black), 1);
}
.background-white {
  background: rgba(var(--white), 1);
}
.background-blue {
  background: rgba(var(--blue), 1);
}
.background-orange {
  background: rgba(var(--orange), 1);
}
.background-green {
  background: rgba(var(--green), 1);
}
.background-red {
  background: rgba(var(--red), 1);
}
.background-purple {
  background: rgba(var(--purple), 1);
}
.background-grey17 {
  background: rgba(var(--grey17), 1);
}
.background-grey23 {
  background: rgba(var(--grey23), 1);
}
.background-grey98 {
  background: rgba(var(--grey98), 1);
}
.background-hover-black:hover {
  background: rgba(var(--black), 1) ! important;
}
.background-hover-white:hover {
  background: rgba(var(--white), 1) ! important;
}
.background-hover-blue:hover {
  background: rgba(var(--blue), 1) ! important;
}
.background-hover-orange:hover {
  background: rgba(var(--orange), 1) ! important;
}
.background-hover-green:hover {
  background: rgba(var(--green), 1) ! important;
}
.background-hover-red:hover {
  background: rgba(var(--red), 1) ! important;
}
.background-hover-purple:hover {
  background: rgba(var(--purple), 1) ! important;
}
.background-hover-grey17:hover {
  background: rgba(var(--grey17), 1) ! important;
}
.background-hover-grey23:hover {
  background: rgba(var(--grey23), 1) ! important;
}
.background-hover-grey98:hover {
  background: rgba(var(--grey98), 1) ! important;
}
.color-black {
  color: rgba(var(--black), 1);
}
.color-white {
  color: rgba(var(--white), 1);
}
.color-blue {
  color: rgba(var(--blue), 1);
}
.color-orange {
  color: rgba(var(--orange), 1);
}
.color-green {
  color: rgba(var(--green), 1);
}
.color-red {
  color: rgba(var(--red), 1);
}
.color-purple {
  color: rgba(var(--purple), 1);
}
.color-grey17 {
  color: rgba(var(--grey17), 1);
}
.color-grey23 {
  color: rgba(var(--grey23), 1);
}
.color-grey98 {
  color: rgba(var(--grey98), 1);
}
.color-hover-black:hover {
  color: rgba(var(--black), 1) ! important;
}
.color-hover-white:hover {
  color: rgba(var(--white), 1) ! important;
}
.color-hover-blue:hover {
  color: rgba(var(--blue), 1) ! important;
}
.color-hover-orange:hover {
  color: rgba(var(--orange), 1) ! important;
}
.color-hover-green:hover {
  color: rgba(var(--green), 1) ! important;
}
.color-hover-red:hover {
  color: rgba(var(--red), 1) ! important;
}
.color-hover-purple:hover {
  color: rgba(var(--purple), 1) ! important;
}
.color-hover-grey17:hover {
  color: rgba(var(--grey17), 1) ! important;
}
.color-hover-grey23:hover {
  color: rgba(var(--grey23), 1) ! important;
}
.color-hover-grey98:hover {
  color: rgba(var(--grey98), 1) ! important;
}
.strike-wavy {
  text-decoration-style: wavy;
}
.strike-color-black {
  text-decoration-color: rgba(var(--black), 1);
}
.strike-color-white {
  text-decoration-color: rgba(var(--white), 1);
}
.strike-color-blue {
  text-decoration-color: rgba(var(--blue), 1);
}
.strike-color-orange {
  text-decoration-color: rgba(var(--orange), 1);
}
.strike-color-green {
  text-decoration-color: rgba(var(--green), 1);
}
.strike-color-red {
  text-decoration-color: rgba(var(--red), 1);
}
.strike-color-purple {
  text-decoration-color: rgba(var(--purple), 1);
}
.strike-color-grey17 {
  text-decoration-color: rgba(var(--grey17), 1);
}
.strike-color-grey23 {
  text-decoration-color: rgba(var(--grey23), 1);
}
.strike-color-grey98 {
  text-decoration-color: rgba(var(--grey98), 1);
}
.selection-black::selection {
  background: rgba(var(--black), 1);
}
.selection-white::selection {
  background: rgba(var(--white), 1);
}
.selection-blue::selection {
  background: rgba(var(--blue), 1);
}
.selection-orange::selection {
  background: rgba(var(--orange), 1);
}
.selection-green::selection {
  background: rgba(var(--green), 1);
}
.selection-red::selection {
  background: rgba(var(--red), 1);
}
.selection-purple::selection {
  background: rgba(var(--purple), 1);
}
.selection-grey17::selection {
  background: rgba(var(--grey17), 1);
}
.selection-grey23::selection {
  background: rgba(var(--grey23), 1);
}
.selection-grey98::selection {
  background: rgba(var(--grey98), 1);
}
.border-radius5 {
  border-radius: 5px;
}
.border-radius10 {
  border-radius: 10px;
}
.border-radius15 {
  border-radius: 15px;
}
.border-radius20 {
  border-radius: 20px;
}
.o10 {
  opacity: 10;
}
.o9 {
  opacity: 0.9;
}
.o8 {
  opacity: 0.8;
}
.o7 {
  opacity: 0.7;
}
.o6 {
  opacity: 0.6;
}
.o5 {
  opacity: 0.5;
}
.o4 {
  opacity: 0.4;
}
.o3 {
  opacity: 0.3;
}
.o2 {
  opacity: 0.2;
}
.o1 {
  opacity: 0.1;
}
.o10-hover:hover {
  opacity: 10;
}
.o9-hover:hover {
  opacity: 0.9;
}
.o8-hover:hover {
  opacity: 0.8;
}
.o7-hover:hover {
  opacity: 0.7;
}
.o6-hover:hover {
  opacity: 0.6;
}
.o5-hover:hover {
  opacity: 0.5;
}
.o4-hover:hover {
  opacity: 0.4;
}
.o3-hover:hover {
  opacity: 0.3;
}
.o2-hover:hover {
  opacity: 0.2;
}
.o1-hover:hover {
  opacity: 0.1;
}
.us-none {
  user-select: none;
}
.h-window {
  height: 100vh;
}
.h-window-nav {
  height: calc(100vh - var(--nav-height));
}
.h-window-nav-nav {
  height: calc(100vh - var(--nav-height) - var(--nav-height));
}
.h50 {
  height: 50px;
}
.h100 {
  height: 100px;
}
.h150 {
  height: 150px;
}
.h200 {
  height: 200px;
}
.h250 {
  height: 250px;
}
.h300 {
  height: 300px;
}
.mh-window {
  min-height: 100vh;
}
.mh-window-nav {
  min-height: calc(100vh - var(--nav-height));
}
.mh-window-nav-nav {
  min-height: calc(100vh - var(--nav-height) - var(--nav-height));
}
.mh50 {
  min-height: 50px;
}
.mh100 {
  min-height: 100px;
}
.mh150 {
  min-height: 150px;
}
.mh200 {
  min-height: 200px;
}
.mh250 {
  min-height: 250px;
}
.mh300 {
  min-height: 300px;
}
.w100 {
  width: 100%;
  max-width: 100px;
}
.w150 {
  width: 100%;
  max-width: 150px;
}
.w200 {
  width: 100%;
  max-width: 200px;
}
.w250 {
  width: 100%;
  max-width: 250px;
}
.w300 {
  width: 100%;
  max-width: 300px;
}
.w350 {
  width: 100%;
  max-width: 350px;
}
.w400 {
  width: 100%;
  max-width: 400px;
}
.w450 {
  width: 100%;
  max-width: 450px;
}
.w500 {
  width: 100%;
  max-width: 500px;
}
.w550 {
  width: 100%;
  max-width: 550px;
}
.w600 {
  width: 100%;
  max-width: 600px;
}
.w650 {
  width: 100%;
  max-width: 650px;
}
.fs-xxl {
  font-size: 1.9em;
  line-height: 1.5em;
}
.fs-xl {
  font-size: 1.6em;
}
.fs-l {
  font-size: 1.3em;
}
.fs-m {
  font-size: 1.0em;
}
.fs-s {
  font-size: 0.8em;
  line-height: 1.4em;
}
.fs-xs {
  font-size: 0.7em;
  line-height: 1.2em;
}
.fw100 {
  font-weight: 100;
}
.fw200 {
  font-weight: 200;
}
.fw300 {
  font-weight: 300;
}
.fw400 {
  font-weight: 400;
}
.fw500 {
  font-weight: 500;
}
.fw600 {
  font-weight: 600;
}
.lh-1em {
  line-height: 1em !important;
}
.fm-monospace {
  font-family: 'Courier New', Courier, monospace;
}
.transition-background-color {
  transition: background-color 0.2s ease;
}
.transition-color {
  transition: color 0.2s ease;
}
.transition-opacity {
  transition: opacity 0.2s ease;
}
.hidden {
  display: none;
}
.pull-nav {
  margin-top: calc(-1 * var(--nav-height));
}
.pull-bottom-200 {
  margin-bottom: -200px;
}
.pull-bottom-400 {
  margin-bottom: -400px;
}
.push-top-200 {
  margin-top: 200px;
}
.push-top-400 {
  margin-top: 400px;
}
h1,
.h1 {
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
}
h2,
.h2 {
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}
h3,
.h3 {
  font-family: var(--h3-font-family);
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
}
h4,
.h4 {
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
}
h5,
.h5 {
  font-family: var(--h5-font-family);
  font-size: var(--h5-font-size);
  font-weight: var(--h5-font-weight);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
}
h6,
.h6 {
  font-family: var(--h6-font-family);
  font-size: var(--h6-font-size);
  font-weight: var(--h5-font-weight);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  --fill-opacity: 0.1;
  --stroke-opacity: 1;
  --stroke-width: 1px;
  /**
     * SHOULD REMOVE
     */
  /**
     * SHOULD REMOVE
     */
}
h1.normal,
.h1.normal,
h2.normal,
.h2.normal,
h3.normal,
.h3.normal,
h4.normal,
.h4.normal,
h5.normal,
.h5.normal,
h6.normal,
.h6.normal {
  margin: 0;
  padding: 0;
  line-height: 1em;
}
h1 .beta,
.h1 .beta,
h2 .beta,
.h2 .beta,
h3 .beta,
.h3 .beta,
h4 .beta,
.h4 .beta,
h5 .beta,
.h5 .beta,
h6 .beta,
.h6 .beta {
  vertical-align: super;
  text-transform: lowercase;
  font-size: 0.5em;
  line-height: 0;
  margin: 0px 5px 0px 5px;
}
h1 .pro,
.h1 .pro,
h2 .pro,
.h2 .pro,
h3 .pro,
.h3 .pro,
h4 .pro,
.h4 .pro,
h5 .pro,
.h5 .pro,
h6 .pro,
.h6 .pro,
h1 .basic,
.h1 .basic,
h2 .basic,
.h2 .basic,
h3 .basic,
.h3 .basic,
h4 .basic,
.h4 .basic,
h5 .basic,
.h5 .basic,
h6 .basic,
.h6 .basic {
  position: absolute;
  vertical-align: super;
  text-transform: lowercase;
  font-size: 0.5em;
  line-height: 0;
  margin: 0px 5px 0px 5px;
}
h1.black,
.h1.black,
h2.black,
.h2.black,
h3.black,
.h3.black,
h4.black,
.h4.black,
h5.black,
.h5.black,
h6.black,
.h6.black {
  --color: var(--black);
  color: rgb(var(--color));
}
h1.white,
.h1.white,
h2.white,
.h2.white,
h3.white,
.h3.white,
h4.white,
.h4.white,
h5.white,
.h5.white,
h6.white,
.h6.white {
  --color: var(--white);
  color: rgb(var(--color));
}
h1.blue,
.h1.blue,
h2.blue,
.h2.blue,
h3.blue,
.h3.blue,
h4.blue,
.h4.blue,
h5.blue,
.h5.blue,
h6.blue,
.h6.blue {
  --color: var(--blue);
  color: rgb(var(--color));
}
h1.orange,
.h1.orange,
h2.orange,
.h2.orange,
h3.orange,
.h3.orange,
h4.orange,
.h4.orange,
h5.orange,
.h5.orange,
h6.orange,
.h6.orange {
  --color: var(--orange);
  color: rgb(var(--color));
}
h1.green,
.h1.green,
h2.green,
.h2.green,
h3.green,
.h3.green,
h4.green,
.h4.green,
h5.green,
.h5.green,
h6.green,
.h6.green {
  --color: var(--green);
  color: rgb(var(--color));
}
h1.red,
.h1.red,
h2.red,
.h2.red,
h3.red,
.h3.red,
h4.red,
.h4.red,
h5.red,
.h5.red,
h6.red,
.h6.red {
  --color: var(--red);
  color: rgb(var(--color));
}
h1.purple,
.h1.purple,
h2.purple,
.h2.purple,
h3.purple,
.h3.purple,
h4.purple,
.h4.purple,
h5.purple,
.h5.purple,
h6.purple,
.h6.purple {
  --color: var(--purple);
  color: rgb(var(--color));
}
p:empty {
  display: none;
}
.flex {
  display: flex;
}
.flex.row {
  flex-direction: row;
}
.flex.column {
  flex-direction: column;
}
.flex.h-centered {
  align-items: center;
}
.flex.v-centered {
  justify-content: center;
}
.flex1 {
  flex: 1;
}
.flex2 {
  flex: 2;
}
.flex3 {
  flex: 3;
}
.grid {
  display: grid;
  grid-gap: 10px;
  grid-row-gap: 40px;
}
.grid.g6 {
  grid-gap: 60px;
}
.grid.g5 {
  grid-gap: 50px;
}
.grid.g4 {
  grid-gap: 40px;
}
.grid.g3 {
  grid-gap: 30px;
}
.grid.g2 {
  grid-gap: 20px;
}
.grid.g1 {
  grid-gap: 10px;
}
.grid.c9 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.grid.c8 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.grid.c7 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.grid.c6 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.grid.c5 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.grid.c4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid.c3-2-2-1 {
  grid-template-columns: 2fr 2fr 1fr;
}
.grid.c3-1-2-2 {
  grid-template-columns: 1fr 2fr 2fr;
}
.grid.c3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.grid.c2-1-2 {
  grid-template-columns: 1fr 2fr;
}
.grid.c2-2-1 {
  grid-template-columns: 1fr 2fr;
}
.grid.c2 {
  grid-template-columns: 1fr 1fr;
}
.grid.c1 {
  grid-template-columns: 1fr;
}
@media (max-width: 900px) {
  .grid:not(.not-c3) {
    grid-template-columns: 1fr 1fr 1fr ! important;
  }
}
@media (max-width: 800px) {
  .grid:not(.not-c2) {
    grid-template-columns: 1fr 1fr ! important;
  }
}
@media (max-width: 600px) {
  .grid:not(.not-c1) {
    grid-template-columns: 1fr ! important;
  }
}
@keyframes background-gradient-animation {
  0% {
    background-position: 0% 65%;
  }
  50% {
    background-position: 100% 36%;
  }
  100% {
    background-position: 0% 65%;
  }
}
.animate-background {
  background-size: 400% 400%;
  animation: background-gradient-animation 30s ease infinite;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.hr.black {
  --hr-color: rgba(var(--black), 1);
}
.hr.white {
  --hr-color: rgba(var(--white), 1);
}
.hr.blue {
  --hr-color: rgba(var(--blue), 1);
}
.hr.orange {
  --hr-color: rgba(var(--orange), 1);
}
.hr.green {
  --hr-color: rgba(var(--green), 1);
}
.hr.red {
  --hr-color: rgba(var(--red), 1);
}
.hr.purple {
  --hr-color: rgba(var(--purple), 1);
}
.hr.dots {
  height: 0px;
}
.hr.dots:after {
  height: 1em;
  content: '○ ○ ○';
  color: var(--hr-color);
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
}
.hr.line {
  height: 1px;
  background: var(--hr-color);
}
.hr.padded {
  padding: 20px 0px 20px 0px;
}
.hr.padded2x {
  padding: 40px 0px 40px 0px;
}
.hr.padded2-5x {
  padding: 60px 0px 60px 0px;
}
.hr.padded4x {
  padding: 80px 0px 80px 0px;
}
.hr.padded4-5x {
  padding: 90px 0px 90px 0px;
}
.price .currency {
  font-size: 0.5em;
  line-height: 1em;
  vertical-align: super;
}
.price .fraction {
  font-size: 0.5em;
  line-height: 1em;
  vertical-align: super;
}
.price.smaller > .number {
  font-size: 1em;
  line-height: 1em;
}
.switch > button:first-child,
.switch > a:first-child {
  border-top-right-radius: 0px ! important;
  border-bottom-right-radius: 0px ! important;
}
.switch > button:last-child,
.switch > a:last-child {
  border-top-left-radius: 0px ! important;
  border-bottom-left-radius: 0px ! important;
}
.switch > button:not(:first-child):not(:last-child),
.switch > a:not(:first-child):not(:last-child) {
  border-top-right-radius: 0px ! important;
  border-bottom-right-radius: 0px ! important;
  border-top-left-radius: 0px ! important;
  border-bottom-left-radius: 0px ! important;
}
.switch > button:not(:last-child),
.switch > a:not(:last-child) {
  border-right-width: 0px ! important;
}
table.features {
  width: 100%;
  box-sizing: border-box;
  border-spacing: 0px;
  font-size: var(--table-font-size);
  line-height: var(--table-line-height);
}
table.features tr > td:nth-child(1) > div > div:not(:first-child) {
  font-size: 0.9em;
  line-height: 1.2em;
}
table.features tr > td:nth-child(2) {
  text-align: center;
  width: 150px;
}
table.features tr > td:nth-child(3) {
  text-align: center;
  width: 150px;
  background-color: rgba(var(--blue), 0.1);
  border-left: 1px solid rgba(var(--blue), 1);
  border-right: 1px solid rgba(var(--blue), 1);
}
table.features tr > td:nth-child(4) {
  text-align: center;
  width: 150px;
}
table.features tr > td {
  padding-left: 10px;
  padding-right: 10px;
}
table.features tr > td.top {
  vertical-align: text-top;
}
table.features tr > td h5 {
  margin-bottom: 10px;
}
table.features > thead > tr:first-child > td {
  padding-top: 20px;
}
table.features > thead > tr:first-child > td:nth-child(3) {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-top: 1px solid rgba(var(--blue), 1);
}
table.features > tbody > tr:last-child > td {
  padding-top: 20px;
  padding-bottom: 20px;
}
table.features > tbody > tr:last-child > td:nth-child(3) {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom: 1px solid rgba(var(--blue), 1);
}
table.features > tbody > tr:nth-child(odd):not(:last-child) {
  background-color: rgba(var(--blue), 0.05);
}
.pointer {
  cursor: pointer;
}
summary {
  cursor: default;
  outline: 0px;
}
.news-content img {
  width: 100%;
  height: auto;
}
#policy {
  font-family: monospace !important;
}
#policy h1 {
  font-family: monospace !important;
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}
#policy h2 {
  font-family: monospace !important;
  font-family: var(--h3-font-family);
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
}
#policy h3 {
  font-family: monospace !important;
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
}
::selection {
  background: rgba(var(--orange), 1);
  color: rgba(var(--white), 1);
}
#doc #doc-toc ul li.selected a {
  color: rgba(var(--orange), 1);
}
#doc #doc-page a {
  color: rgba(var(--orange), 1);
}
.news-content a,
.news-archive a {
  color: rgba(var(--orange), 1);
}
.archive a {
  color: rgba(var(--orange), 1);
}
.meta {
  display: none;
}