docsify/dist/themes/core.css

A magical documentation generator.

/* Variables: Basic */
/* ========================================================================== */
:root {
  /* Color */
  --color-bg   : #fff;
  --color-text : #333;
  --theme-color: #0b85d7;

  /* Color: Monochromatic */
  --color-mono-min: var(--color-bg);
  --color-mono-1  : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 5%);
  --color-mono-2  : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 10%);
  --color-mono-3  : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 20%);
  --color-mono-4  : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 32%);
  --color-mono-5  : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 50%);
  --color-mono-6  : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 32%);
  --color-mono-7  : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 20%);
  --color-mono-8  : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 10%);
  --color-mono-9  : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 5%);
  --color-mono-max: var(--color-text);

  /* Color: Theme Shades (darker) & Tints (lighter)*/
  /* NOTE: Values derived from --theme-color */
  --theme-color-1: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 90%);
  --theme-color-2: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 75%);
  --theme-color-3: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 55%);
  --theme-color-4: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 30%);
  --theme-color-5: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 30%);
  --theme-color-6: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 55%);
  --theme-color-7: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 75%);
  --theme-color-8: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 90%);

  /* Typography */
  --font-family      : system-ui, sans-serif;
  --font-family-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-family-mono : ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --font-size        : 16px; /* px */
  --font-size-xxxl   : calc(var(--font-size-xxl) * var(--modular-scale));
  --font-size-xxl    : calc(var(--font-size-xl) * var(--modular-scale));
  --font-size-xl     : calc(var(--font-size-l) * var(--modular-scale));
  --font-size-l      : calc(1rem * var(--modular-scale));
  --font-size-m      : var(--font-size);
  --font-size-s      : max(13px, calc(var(--font-size-m) / var(--modular-scale)));
  --font-size-xs     : max(11px, calc(var(--font-size-s) / var(--modular-scale)));
  --font-size-emoji  : 1.2em;
  --font-size-mono   : 0.875rem;
  --font-weight      : 350;
  --font-weight-mono : var(--font-weight);
  --line-height      : 1.6;
  --modular-scale    : 1.250; /* 1.067, 1.125, 1.200, 1.250, 1.333, 1.414, 1.500, 1.618 */

  /* Common */
  --border-color      : var(--color-mono-2);
  --border-radius     : 3px; /* Single value */
  --duration-slow     : 500ms;
  --duration-medium   : 250ms;
  --duration-fast     : 150ms;
  --margin-block      : 1rem; /* Single value */
  --scroll-padding-top: var(--margin-block);

  /* Content */
  --content-margin-inline: 45px; /* Single value */
  --content-max-width    : 72ch;

  /* Cover */
  --cover-bg           : unset;
  --cover-bg-brightness: 1;
  --cover-bg-overlay   : radial-gradient(transparent 60%, rgba(0, 0, 0, 0.1));
  --cover-color        : ;
  --cover-title-color  : var(--strong-color);
  --cover-title-font   : var(--font-size-xxxl) var(--font-family);

  /* Elements */
  --blockquote-bg                 : ;
  --blockquote-border-color       : var(--theme-color);
  --blockquote-border-radius      : 0;
  --blockquote-border-width       : 0 0 0 4px;
  --blockquote-color              : var(--color-mono-6);
  --blockquote-padding            : 0 0 0 1.5em;
  --button-bg                     : var(--theme-color);
  --button-border-radius          : 100vh;
  --button-color                  : #fff;
  --button-padding                : 0.3em 1.25em 0.315em 1.25em;
  --callout-bg                    : var(--color-mono-1);
  --callout-border-color          : ;
  --callout-border-radius         : var(--border-radius);
  --callout-border-width          : 1px;
  --callout-charm-bg              : ;
  --callout-charm-border-radius   : 100vh;
  --callout-charm-color           : #fff;
  --callout-charm-content         : '';
  --callout-charm-font-size       : 16px;
  --callout-charm-inset           : 1em auto auto 15px;
  --callout-charm-size            : 26px;
  --callout-charm-translate       : 0;
  --callout-color                 : ;
  --callout-padding               : 1em 1em 1em calc(25px + var(--callout-charm-size));
  --code-bg                       : var(--color-mono-1);
  --code-color                    : ;
  --codeblock-bg                  : var(--code-bg);
  --codeblock-color               : var(--code-color);
  --codeblock-comment             : #6e8090;
  --codeblock-function            : #dd4a68;
  --codeblock-important           : #c94922;
  --codeblock-keyword             : #07a;
  --codeblock-operator            : #a67f59;
  --codeblock-property            : #c08b30;
  --codeblock-punctuation         : #999;
  --codeblock-selector            : #690;
  --codeblock-tag                 : #905;
  --codeblock-variable            : #e90;
  --form-element-bg               : var(--color-mono-1);
  --form-element-border-color     : var(--color-mono-3);
  --form-element-border-radius    : var(--border-radius);
  --form-element-color            : ;
  --heading-color                 : var(--strong-color);
  --heading-font-weight           : 600;
  --heading-line-height           : calc(2ex + 5px); /* Unit required */
  --kbd-bg                        : var(--color-mono-1);
  --kbd-border                    : 1px solid var(--color-mono-3);
  --kbd-border-radius             : 4px;
  --kbd-color                     : var(--color-mono-5);
  --kbd-alt-bg                    : var(--color-mono-1);
  --kbd-alt-border                : none;
  --kbd-alt-border-radius         : var(--kbd-border-radius);
  --kbd-alt-box-shadow            : 0 2px 0 1px var(--color-mono-3);
  --kbd-alt-color                 : var(--kbd-color);
  --link-color                    : ;
  --link-color-hover              : var(--theme-color);
  --link-underline-color          : var(--theme-color);
  --link-underline-color-hover    : var(--link-underline-color);
  --link-underline-thickness      : 2px;
  --link-underline-thickness-hover: var(--link-underline-thickness);
  --mark-bg                       : #fef08a;
  --mark-color                    : ;
  --strong-color                  : color-mix(in srgb, var(--color-text), black 35%);
  --strong-font-weight            : 600;
  --table-row-alt-bg              : var(--color-mono-1);

  /* Navbar */
  --navbar-font-size        : var(--font-size);
  --navbar-height           : 4em;
  --navbar-link-color       : ;
  --navbar-link-color-active: var(--theme-color);
  --navbar-drop-link-spacing: 0.5em;

  /* Sidebar */
  --sidebar-bg                      : var(--color-bg);
  --sidebar-border-color            : var(--border-color);
  --sidebar-color                   : ;
  --sidebar-font-size               : var(--font-size);
  --sidebar-group-border            : ;
  --sidebar-group-spacing           : ;
  --sidebar-group-title-border      : ;
  --sidebar-group-title-color       : var(--strong-color);
  --sidebar-group-title-font-size   : ;
  --sidebar-group-title-font-weight : var(--strong-font-weight);
  --sidebar-group-title-spacing     : ;
  --sidebar-link-color              : var(--color-text);
  --sidebar-link-color-active       : var(--theme-color);
  --sidebar-link-spacing            : 0.75em;
  --sidebar-name-color              : var(--strong-color);
  --sidebar-name-font-family        : var(--font-family);
  --sidebar-name-font-size          : var(--font-size-xl);
  --sidebar-name-font-weight        : var(--strong-font-weight);
  --sidebar-name-margin             : 1.5rem 20px;
  --sidebar-pagelink-bg             : ;
  --sidebar-pagelink-bg-collapsed   : ;
  --sidebar-pagelink-bg-empty       : ;
  --sidebar-pagelink-bg-expanded    : ;
  --sidebar-toggle-alignment        : center; /* start center end */
  --sidebar-toggle-bg               : var(--color-mono-2);
  --sidebar-toggle-bg-hover         : var(--button-bg);
  --sidebar-toggle-color            : var(--color-mono-4);
  --sidebar-toggle-color-hover      : var(--button-color);
  --sidebar-toggle-height           : 80px;
  --sidebar-toggle-margin-block     : 20px;
  --sidebar-toggle-width            : 22px;
  --sidebar-width                   : 280px;
}
/* Scoped Variables */
/* ========================================================================== */
.callout.caution {
    /* Tailwind: red 50/200/500 */
    --callout-bg          : #fef2f2;
    --callout-border-color: #fecaca;
    --callout-charm-bg    : #ef4444 center no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="13" height="13" fill="white"><path d="M10 14C10 15.1 9.1 16 8 16 6.9 16 6 15.1 6 14 6 12.9 6.9 12 8 12 9.1 12 10 12.9 10 14Z"/><path d="M10 1.6C10 1.2 9.8 0.9 9.6 0.7 9.2 0.3 8.6 0 8 0 7.4 0 6.8 0.2 6.5 0.6 6.2 0.9 6 1.2 6 1.6 6 1.7 6 1.8 6 1.9L6.8 9.6C6.9 9.9 7 10.1 7.2 10.2 7.4 10.4 7.7 10.5 8 10.5 8.3 10.5 8.6 10.4 8.8 10.3 9 10.1 9.1 9.9 9.2 9.6L10 1.9C10 1.8 10 1.7 10 1.6Z"/></svg>');
  }
.callout.important {
    /* Tailwind: violet 50/200/500 */
    --callout-bg          : #f5f3ff;
    --callout-border-color: #ddd6fe;
    --callout-charm-bg    : #8b5cf6 center no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="white"><path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path></svg>');
  }
.callout.note {
    --callout-bg          : var(--theme-color-1);
    --callout-border-color: var(--theme-color-2);
    --callout-charm-bg    : var(--theme-color) center no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="14" height="14" fill="white"><path d="M9.1 0C10.2 0 10.7 0.7 10.7 1.6 10.7 2.6 9.8 3.6 8.6 3.6 7.6 3.6 7 3 7 2 7 1.1 7.7 0 9.1 0Z"/><path d="M5.8 16C5 16 4.4 15.5 5 13.2L5.9 9.1C6.1 8.5 6.1 8.2 5.9 8.2 5.7 8.2 4.6 8.6 3.9 9.1L3.5 8.4C5.6 6.6 7.9 5.6 8.9 5.6 9.8 5.6 9.9 6.6 9.5 8.2L8.4 12.5C8.2 13.2 8.3 13.5 8.5 13.5 8.7 13.5 9.6 13.2 10.4 12.5L10.9 13.2C8.9 15.2 6.7 16 5.8 16Z"/></svg>');
  }
.callout.tip {
    /* Tailwind: teal 50/200/500 */
    --callout-bg          : #f0fdfa;
    --callout-border-color: #99f6e4;
    --callout-charm-bg    : #14b8a6 center no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="14" height="14" fill="white"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>');
  }
.callout.warning {
    /* Tailwind: amber 50/200/300 */
    --callout-bg          : #fffbeb;
    --callout-border-color: #fde68a;
    --callout-charm-bg    : #fcd34d center no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="13" height="13" fill="#a16207"><path d="M10 14C10 15.1 9.1 16 8 16 6.9 16 6 15.1 6 14 6 12.9 6.9 12 8 12 9.1 12 10 12.9 10 14Z"/><path d="M10 1.6C10 1.2 9.8 0.9 9.6 0.7 9.2 0.3 8.6 0 8 0 7.4 0 6.8 0.2 6.5 0.6 6.2 0.9 6 1.2 6 1.6 6 1.7 6 1.8 6 1.9L6.8 9.6C6.9 9.9 7 10.1 7.2 10.2 7.4 10.4 7.7 10.5 8 10.5 8.3 10.5 8.6 10.4 8.8 10.3 9 10.1 9.1 9.9 9.2 9.6L10 1.9C10 1.8 10 1.7 10 1.6Z"/></svg>');
  }
/* Variables: Advanced */
/* ========================================================================== */
/* prettier-ignore */
:root {
  /* z-index */
  --z-skip-to-content: 2147483647;
  --z-progress       : 2147483637;
  --z-sidebar        : 60;
  --z-sidebar-toggle : 50;
  --z-main-overlay   : 40;
  --z-github-corner  : 30;
  --z-app-nav        : 20;
  --z-cover          : 10;
}
/* Base */
/* ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0;
  font: inherit;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
html,
body {
  height: 100vh;
}
html {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-feature-settings:
    'liga' 1,
    'calt' 1; /* NOTE: Fix for Chrome */
  font-optical-sizing: auto;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  scroll-padding-top: var(--scroll-padding-top);
}
body {
  overflow-x: hidden;
  margin: 0;
}
body:not(.ready) {
    overflow: hidden;
  }
body:not(.ready) [data-cloak],body:not(.ready) .app-nav,body:not(.ready)  > nav {
      display: none;
    }
/* Loading animation */
body.loading::before {
      position: fixed;
    }
/* Content or cover loaded */
body.loading:has(:where(#main,.cover-main):not(:empty))::before {
        display: none;
      }
[tabindex='-1']:focus {
  outline: none !important;
}
/* Elements */
/* ========================================================================== */
small,
sub,
sup {
  display: inline-block;
  font-size: var(--font-size-s);
}
a {
  color: var(--link-color);

  /* NOTE: Safari may require a forced redraw when changing text-decoration
  values (e.g., :hover). One way to do this is via translate: 0 0 0. */
}
a:not(.button) {
    text-decoration-color: var(--link-underline-color);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: var(--link-underline-thickness);
    text-underline-offset: 2px;
  }
a:not(.button):hover {
      color: var(--link-color-hover);
      text-decoration-color: var(--link-underline-color-hover);
      text-decoration-thickness: var(--link-underline-thickness-hover);
    }
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  line-height: var(--heading-line-height);
}
hr {
  margin-block: 1em;
  border: none;
  border-bottom: 1px solid var(--border-color);
}
ins {
  text-decoration: underline;
}
kbd {
  display: inline-block;
  min-width: 2em;
  padding: 0.3em 0.5em;
  border: var(--kbd-border);
  border-radius: var(--kbd-border-radius);
  background: var(--kbd-bg);
  color: var(--kbd-color);
  font-size: var(--font-size-s);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
mark {
  padding-inline: 1px;
  border-radius: 1px;
  background: var(--mark-bg);
  color: var(--mark-color);
}
strong {
  color: var(--strong-color);
  font-weight: var(--strong-font-weight);
}
summary {
  cursor: pointer;
}
summary  > * {
    display: inline;
  }
:disabled {
  cursor: not-allowed;
}
/* Buttons */
/* ---------------------------------- */
a.button,
button[type],
input.button,
input:is([type='button'], [type='reset'], [type='submit']) {
  display: inline-block;
  margin-block: 0.35em;
  border: 2px solid var(--color-mono-2);
  box-shadow: 0 0 0 3px transparent;
  background: var(--color-mono-2);
  color: var(--color-text);
  cursor: pointer;
  vertical-align: middle;
  transition: outline-color var(--duration-fast);
}
:is(a.button,button[type],input.button,input:is([type='button'],[type='reset'],[type='submit'])):not(:focus-visible) {
    outline-color: transparent;
  }
:is(a.button,button[type],input.button,input:is([type='button'],[type='reset'],[type='submit'])):hover {
    outline: 3px solid var(--theme-color-3);
    outline-offset: 1px;
  }
:is(a.button,button[type],input.button,input:is([type='button'],[type='reset'],[type='submit'])) + :is(a.button,button[type],input.button,input:is([type='button'],[type='reset'],[type='submit'])) {
    margin-left: 0.25em;
  }
.primary:is(a.button,button[type],input.button,input:is([type='button'],[type='reset'],[type='submit'])),.secondary:is(a.button,button[type],input.button,input:is([type='button'],[type='reset'],[type='submit'])) {
    border-color: var(--button-bg);
  }
/* Primary Button */
.primary:is(a.button,button[type],input.button,input:is([type='button'],[type='reset'],[type='submit'])) {
    background: var(--button-bg);
    color: var(--button-color);
  }
/* Secondary Button */
.secondary:is(a.button,button[type],input.button,input:is([type='button'],[type='reset'],[type='submit'])) {
    background: transparent;
    color: var(--button-bg);
  }
a.button,
button[type],
input:where([type='button'], [type='reset'], [type='submit']) {
  padding: var(--button-padding);
  border-radius: var(--button-border-radius);
  text-decoration: none;
}
:is(button[type],input.button,input:where([type='button'],[type='reset'],[type='submit'])):disabled {
    opacity: 0.6;
    filter: grayscale(100%);
    pointer-events: none;
  }
button:not([type]) {
  color: inherit;
}
/* Emoji */
/* ---------------------------------- */
.emoji:where(img) {
    height: 1.2em;
    vertical-align: middle;
  }
.emoji:where(span) {
    font-family: var(--font-family-emoji);
    font-size: var(--font-size-emoji);
    vertical-align: middle;
  }
/* Form Elements
/* ---------------------------------- */
:is(fieldset,input:not([type='checkbox']),optgroup,option,select,textarea):disabled {
    opacity: 0.6;
  }
fieldset,
input,
select,
textarea {
  max-width: 100%;
  border-radius: var(--form-element-border-radius);
}
input,
select,
textarea {
  padding: 0.25em 0.5em;
  border: 1px solid var(--form-element-border-color);
}
input,
select,
textarea {
  background: var(--form-element-bg);
  color: var(--form-element-color);
}
input,
label,
select {
  vertical-align: middle;
}
fieldset {
  padding: 1em;
  border: 1px solid var(--color-mono-2);
}
fieldset  > :first-child,fieldset  > legend + * {
    margin-top: 0;
  }
fieldset  > :last-child {
    margin-bottom: 0;
  }
input:where([type='checkbox'], [type='radio']) {
  --_size: 1.1em;

  appearance: none;
  display: inline-block;
  position: relative;
  top: -0.1em;
  height: var(--_size);
  width: var(--_size);
  margin: 0;
  padding: 0;
}
input.toggle:where([type='checkbox'],[type='radio']) {
    --_inset: 2px;
    --_handle-size: calc(var(--_size) - (var(--_inset) * 2));

    height: calc(var(--_size) + 2px);
    width: calc(var(--_size) * 1.9);
    border-radius: 100vh;
  }
input.toggle:where([type='checkbox'],[type='radio'])::before,input.toggle:where([type='checkbox'],[type='radio'])::after {
      all: unset;
    }
input.toggle:where([type='checkbox'],[type='radio'])::before {
      content: '';
      display: inline-block;
      position: absolute;
      top: var(--_inset);
      left: var(--_inset);
      height: var(--_handle-size);
      width: var(--_handle-size);
      border-radius: 100vh;
      background: var(--color-mono-3);
      transition: all var(--duration-fast);
    }
input.toggle:where([type='checkbox'],[type='radio']):checked {
      background: var(--theme-color);
      border-color: var(--theme-color);
    }
input.toggle:where([type='checkbox'],[type='radio']):checked::before {
        left: calc(100% - var(--_handle-size) - var(--_inset));
        background: var(--color-bg);
      }
label input:where([type='checkbox'],[type='radio']) {
    margin-right: 0.25em;
  }
input:where([type='checkbox']):not(.toggle) {
  border-radius: min(var(--form-element-border-radius), 3px);
}
input:where([type='checkbox']):not(.toggle)::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 43%;
    left: 50%;
    rotate: 40deg;
    translate: -50% -50%;
    height: 0.7em;
    width: 0.4em;
    border-bottom: 2px solid transparent;
    border-right: 2px solid transparent;
  }
input:where([type='checkbox']):not(.toggle):checked {
    border-color: var(--theme-color);
    background: var(--theme-color);
  }
input:where([type='checkbox']):not(.toggle):checked::before {
      border-color: var(--color-bg);
    }
input:where([type='radio']):not(.toggle) {
  border-radius: 100vh;
}
input:where([type='radio']):not(.toggle):checked {
    border-color: var(--theme-color);
    box-shadow: inset 0 0 0 0.25em var(--theme-color);
  }
label {
  display: inline-block;
}
select {
  appearance: none;
  padding-right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.95 10'%3E%3Cpolygon fill='black' opacity='0.5' points='1.41 4.67 2.48 3.18 3.54 4.67 1.41 4.67'/%3E%3Cpolygon fill='black' opacity='0.5' points='3.54 5.33 2.48 6.82 1.41 5.33 3.54 5.33'/%3E%3C/svg%3E");
  background-position: right 2px center;
  background-repeat: no-repeat;
  font-weight: normal; /* Fix for Safari using serif font is weight is bold */
}
@media screen and (prefers-color-scheme: dark) {
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.95 10'%3E%3Cpolygon fill='white' opacity='0.4' points='1.41 4.67 2.48 3.18 3.54 4.67 1.41 4.67'/%3E%3Cpolygon fill='white' opacity='0.4' points='3.54 5.33 2.48 6.82 1.41 5.33 3.54 5.33'/%3E%3C/svg%3E");
}
  }
/* App */
/* ========================================================================== */
body  > .progress {
    position: fixed;
    z-index: var(--z-progress);
    inset: 0 0 auto 0;
    height: 2px;
    width: 0%;
    background: var(--theme-color);
    transition:
      width var(--duration-medium) ease,
      opacity calc(var(--duration-medium) * 2);
  }
main {
  display: block;
  position: relative;
  width: 100vw;
  min-height: 100vh;

  /* Overlay */
}
main::before {
    content: '';
    position: fixed;
    z-index: var(--z-main-overlay);
    top: 0;
    bottom: 0;
    width: 0;
    background: transparent;
    transition:
      width 0s var(--duration-medium),
      background var(--duration-medium);
  }
main.hidden {
    display: none;
  }
main  > .content {
    position: absolute;
    inset: 0;
    transition: left var(--duration-medium) ease;
  }
body:has(.sidebar.show) :is(main > .content) {
      left: var(--sidebar-width);
    }
/* hideSidebar: true */
body:not:has(.sidebar) :is(main > .content) {
      position: static;
    }
.github-corner {
  position: absolute;
  top: 0;
  right: 0;
  z-index: var(--z-github-corner);
  border-bottom: 0;
  text-decoration: none;
}
.github-corner:hover .octo-arm {
      animation: github-corner 560ms ease-in-out;
    }
.github-corner svg {
    height: var(--navbar-height);
    width: var(--navbar-height);
    color: var(--color-bg);
    fill: var(--theme-color);
  }
@keyframes github-corner {
  0%,
  100% {
    rotate: 0;
  }
  20%,
  60% {
    rotate: -25deg;
  }
  40%,
  80% {
    rotate: 10deg;
  }
}
.loading:empty /* Block: <div class="loading"></div>  */,
.loading:not(:empty)::before /* Pseudo: <div class="loading">Content</div>  */ {
  --_gradient: no-repeat
    radial-gradient(farthest-side, var(--theme-color) 92%, #0000);

  content: '';
  display: block;
  width: 36px;
  aspect-ratio: 1;
  background:
    var(--_gradient) top,
    var(--_gradient) left,
    var(--_gradient) right,
    var(--_gradient) bottom;
  background-size: 10px 10px;
  animation: loading 1s infinite;
}
.loading:not(:empty)::before {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
@keyframes loading {
  to {
    rotate: 0.5turn;
  }
}
#app {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  height: 100vh;
  padding-inline: 50px;
}
#skip-to-content {
  position: fixed;
  z-index: var(--z-skip-to-content);
  top: 0;
  left: 50%;
  opacity: 0;
  translate: -50% -100%;
  transition-property: opacity, translate;
  transition-duration: 0s, var(--duration-medium);
  transition-delay: var(--duration-medium), 0s;
  transition-timing-function: ease;
}
#skip-to-content:focus {
    opacity: 1;
    translate: -50% 0.75rem;
    transition-duration: 0s, var(--duration-medium);
    transition-delay: 0s, 0s;
  }
/* Cover */
/* ========================================================================== */
.cover {
  display: none;
  position: relative;
  z-index: var(--z-cover);
  min-height: 100vh;
  width: 100%;
  align-items: center;
  background: var(--cover-bg);
  color: var(--cover-color);
}
.cover:before {
    content: '';
    position: absolute;
    inset: 0 0 0 0;
    background: var(--cover-bg-overlay);
    -webkit-backdrop-filter: brightness(var(--cover-bg-brightness));
    backdrop-filter: brightness(var(--cover-bg-brightness));
  }
.cover.show {
    display: flex;
  }
.cover a:not(.anchor) {
    text-decoration-color: var(--theme-color);
  }
.cover blockquote {
    font-size: var(--font-size-xl);
    line-height: var(--heading-line-height);
    text-align: center;
  }
:is(.cover blockquote),:is(.cover blockquote) > p {
      margin-block: 1rem;
    }
.cover h1 {
    position: relative;
    color: var(--cover-title-color);
    font: var(--cover-title-font);
  }
:is(:is(.cover h1) a),:is(:is(.cover h1) a):hover {
        text-decoration-color: transparent;
      }
:is(.cover h1) a {
      color: var(--cover-title-color);
    }
:is(.cover h1) small {
      font-weight: var(--font-weight);
      position: absolute;
      bottom: 0;
    }
.cover ul {
    margin-bottom: 1.5rem;
    padding: 0;
    list-style-type: none;
  }
.cover-main {
  position: relative;
  z-index: 1;
  flex: 1;
  margin: 5vh var(--content-margin-inline);
  text-align: center;
}
/* Nav Bar */
/* ========================================================================== */
.app-nav {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 1em;
  position: absolute;
  z-index: var(--z-app-nav);
  top: 0;
  right: 0;
  left: 0;
  height: var(--navbar-height);
  padding-inline: var(--content-margin-inline);
  transition: left var(--duration-medium) ease;
}
.app-nav:has( ~ .github-corner) {
    padding-inline-end: calc(var(--navbar-height) + 1em);
  }
body:where(:has(.sidebar.show)) .app-nav {
    left: var(--sidebar-width);
  }
.app-nav a {
    color: var(--navbar-link-color);
    text-decoration-color: transparent;
  }
:is(.app-nav a):hover {
      translate: 0; /* HACK: Force Safari to render text-decoration */
      text-decoration-color: var(--navbar-link-color-active);
    }
.active :is(.app-nav a) {
      color: var(--navbar-link-color-active);
    }
.app-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
.app-nav  > ul {
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
    gap: 0 1em;
  }
.app-nav li {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    cursor: pointer;

    /* Dropdown */
  }
:is(.app-nav li) ul {
      position: absolute;
      z-index: 1;
      top: -9999vh;
      right: 50%;
      translate: 50% 0;
      overflow-y: auto;
      max-height: calc(100vh - 61px);
      padding: 1em;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      background: var(--color-bg);
    }
li:last-child :is(:is(.app-nav li) ul) {
        right: calc(0px - var(--content-margin-inline) / 2);
        translate: 0;
      }
:is(.app-nav li) li {
      display: block;
      margin-block: var(--navbar-drop-link-spacing);
    }
:is(:is(.app-nav li) li):first-child {
        margin-top: 0;
      }
:is(:is(.app-nav li) li):last-child {
        margin-bottom: 0;
      }
:is(:is(.app-nav li) li) a {
        display: flex;
        align-items: center;
        gap: 0.25em;
        margin: 0;
      }
:is(:is(:is(.app-nav li) li) a):hover {
          color: var(--navbar-link-color-active);
        }
:is(:is(.app-nav li):focus-within,:is(.app-nav li):hover) ul {
        top: 100%;
      }
.app-nav p {
    margin: 0;
  }
.app-nav  > :where(a,p),.app-nav  > ul > li > :where(a,p) {
    white-space: nowrap;
  }
.app-nav-merged {
  display: none;
}
/* Sidebar */
/* ========================================================================== */
:root {
  --_sidebar-inset: 20px;
  --_sidebar-list-inset: 0.85em;
  --_sidebar-scrollbar-width: 10px; /* macOS overlay scrollbar default */
}
@supports (scrollbar-width: auto) {
:root {
    --_sidebar-scrollbar-width: 4px;
}
  }
:is(.app-nav-merged,.sidebar-nav)  > * {
    margin-inline: var(--_sidebar-inset);
  }
:is(:is(.app-nav-merged,.sidebar-nav) > *):first-child {
      margin-top: 0;
    }
:is(.app-nav-merged,.sidebar-nav)  > hr {
    margin-inline: 0;
  }
:is(.app-nav-merged,.sidebar-nav) ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
:is(:is(.app-nav-merged,.sidebar-nav) > ul)  > * {
      margin-left: var(--_sidebar-inset);
    }
:is(:is(.app-nav-merged,.sidebar-nav) > ul) ul {
      padding-left: var(--_sidebar-list-inset);
    }
.group:is(:is(:is(.app-nav-merged,.sidebar-nav) > ul) > li) {
        padding-top: var(--sidebar-group-spacing);
        border-top: var(--sidebar-group-border);
      }
.group:is(:is(:is(.app-nav-merged,.sidebar-nav) > ul) > li):has( + :not(.group)),.group:is(:is(:is(.app-nav-merged,.sidebar-nav) > ul) > li):last-child {
          border-bottom: var(--sidebar-group-border);
        }
:is(.app-nav-merged,.sidebar-nav) li {
    margin-block: var(--sidebar-link-spacing);
  }
:is(:is(.app-nav-merged,.sidebar-nav) li)  > p {
      margin: 0;

      /* Text-only <p> tags */
    }
.group-title:is(:is(:is(.app-nav-merged,.sidebar-nav) li) > p) {
        margin-right: var(--_sidebar-inset);
        margin-bottom: var(--sidebar-group-title-spacing);
        padding-bottom: var(--sidebar-group-title-spacing);
        border-bottom: var(--sidebar-group-title-border);
        color: var(--sidebar-group-title-color);
        font-size: var(--sidebar-group-title-font-size);
        font-weight: var(--sidebar-group-title-font-weight);
      }
:is(:is(.app-nav-merged,.sidebar-nav) li) a {
      display: block;
      padding-right: var(--_sidebar-inset);
      overflow: hidden;
    }
:is(:is(:is(.app-nav-merged,.sidebar-nav) li) a):has(img,svg) {
        display: flex;
        align-items: center;
        gap: 0.25em;
      }
.active:is(:is(.app-nav-merged,.sidebar-nav) li)  > a {
        color: var(--sidebar-link-color-active);
      }
.collapse:is(:is(.app-nav-merged,.sidebar-nav) li)  > :not(a) {
        display: none;
      }
.sidebar {
  visibility: hidden;
  position: absolute;
  z-index: var(--z-sidebar);
  top: 0;
  bottom: 0;
  left: 0;
  translate: calc(0px - var(--sidebar-width));
  width: var(--sidebar-width);
  overscroll-behavior: contain;
  border-right: 1px solid var(--sidebar-border-color);
  background: var(--sidebar-bg);
  color: var(--sidebar-color);
  font-size: var(--sidebar-font-size);
  transition:
    translate var(--duration-medium) ease,
    visibility var(--duration-medium);

  /* Non-webkit browsers: style scrollbar for consistency */
}
@supports (scrollbar-width: auto) {
    .sidebar::-webkit-scrollbar {
      width: var(--_sidebar-scrollbar-width);
    }

    .sidebar::-webkit-scrollbar-thumb {
      border-radius: var(--_sidebar-scrollbar-width);
      background: transparent;
    }
      .sidebar:hover::-webkit-scrollbar-thumb {
        background: rgba(136, 136, 136, 0.4);
      }

      .sidebar:hover::-webkit-scrollbar-track {
        background: rgba(136, 136, 136, 0.1);
      }
  }
.sidebar a[href] {
    text-decoration-color: transparent;
    color: var(--sidebar-link-color);
  }
:is(.sidebar a[href]):hover {
      translate: 0; /* HACK: Force Safari to render text-decoration */
      text-decoration-color: var(--sidebar-link-color-active);
    }
.sidebar .app-name {
    margin: var(--sidebar-name-margin);
    color: var(--sidebar-name-color);
    font-family: var(--sidebar-name-font-family);
    font-size: var(--sidebar-name-font-size);
    font-weight: var(--sidebar-name-font-weight);
    text-align: center;
  }
:is(.sidebar a.app-name-link) img {
      display: block;
      max-width: 100%;
    }
:is(.sidebar a.app-name-link):hover {
      color: var(--sidebar-link-color-active);
      text-decoration-color: transparent;
    }
body:has(.sidebar.show) .sidebar {
    visibility: visible;
    translate: 0;
  }
body.sticky .sidebar {
    position: fixed;
    overflow-y: auto;
  }
:is(.sidebar-nav li) a.page-link {
      border-radius: var(--border-radius);
      background: var(--sidebar-pagelink-bg);
    }
.active > :is(:is(.sidebar-nav li) a.page-link),:has(.active) > :is(:is(.sidebar-nav li) a.page-link) {
        background: var(--sidebar-pagelink-bg-expanded);
      }
:is(.active > :is(:is(.sidebar-nav li) a.page-link),:has(.active) > :is(:is(.sidebar-nav li) a.page-link)):only-child {
          background: var(--sidebar-pagelink-bg-empty);
        }
.collapse > :is(:is(.sidebar-nav li) a.page-link) {
        background: var(--sidebar-pagelink-bg-collapsed);
      }
.sidebar-toggle {
  display: flex;
  align-items: var(--sidebar-toggle-alignment);
  justify-content: start;
  position: absolute;
  z-index: var(--z-sidebar-toggle);
  top: 0;
  bottom: 0;
  width: var(--sidebar-toggle-width);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--duration-medium),
    translate var(--duration-medium) ease;
}
@media screen and (any-hover) {
    .sidebar-toggle:hover {
      background: color-mix(
        in srgb,
        var(--sidebar-toggle-bg-hover) 10%,
        transparent
      );
    }
  }
body:where(:has(.sidebar.show)) .sidebar-toggle {
    translate: var(--sidebar-width);
    transition:
      background 0s,
      translate var(--duration-medium) ease;
  }
body.sticky .sidebar-toggle {
    position: fixed;
  }
/* Increase tap target size on touch-only devices */
@media screen and not (any-hover) {
.sidebar-toggle {
    width: calc(var(--content-margin-inline) - 10px);
}
  }
.sidebar-toggle-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: var(--sidebar-toggle-height);
  width: var(--sidebar-toggle-width);
  margin-block: var(--sidebar-toggle-margin-block);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  background: var(--sidebar-toggle-bg);
  color: var(--sidebar-toggle-color);
  transition-duration: var(--duration-medium);
  transition-property: background, translate;
}
.sidebar-toggle-button span {
    --_size: 4px;

    display: block;
    height: var(--_size);
    width: var(--_size);
    border-radius: 100vh;
    background: currentColor;
    transition: background var(--duration-medium);
  }
:is(.sidebar-toggle-button span):nth-child(2) {
      margin-block: calc(var(--_size) - 1px);
    }
@media screen and (any-hover) {
    .sidebar-toggle-button:hover,body:where(:has(.sidebar-toggle:hover)) .sidebar-toggle-button {
      background: var(--sidebar-toggle-bg-hover);
      color: var(--sidebar-toggle-color-hover);
    }
  }
/* Markdown */
/* ========================================================================== */
.markdown-section {
  position: relative;
  width: var(--content-max-width);
  max-width: calc(100% - (var(--content-margin-inline) * 2));
  margin: var(--content-margin-inline) auto 0 auto;
  padding-bottom: 2rem;
}
body:has(.app-nav) .markdown-section {
    margin-top: calc(var(--navbar-height) + (var(--content-margin-inline) / 2));
  }
.markdown-section  > :first-child {
    margin-top: 0;
  }
.markdown-section blockquote,.markdown-section details,.markdown-section figure,.markdown-section form,.markdown-section iframe,.markdown-section ol,.markdown-section output,.markdown-section p,.markdown-section pre,.markdown-section table,.markdown-section ul {
    margin-block: var(--margin-block);
  }
.anchor:is(.markdown-section a) {
      color: inherit;
    }
.anchor:is(.markdown-section a):not(:hover) {
        text-decoration-color: transparent;
      }
.anchor:is(.markdown-section a):hover {
        translate: 0 0 0; /* Safari Fix: Forced redraw */
        text-decoration-color: var(--link-underline-color-hover);
      }
.markdown-section blockquote {
    position: relative;
    overflow: auto;
    margin-inline: 0;
    padding: var(--blockquote-padding);
    border: solid var(--blockquote-border-color);
    border-width: var(--blockquote-border-width);
    border-radius: var(--blockquote-border-radius);
    background: var(--blockquote-bg);
    color: var(--blockquote-color);
  }
:is(.markdown-section blockquote)  > :first-child {
      margin-top: 0;
    }
:is(.markdown-section blockquote)  > :last-child {
      margin-bottom: 0;
    }
.markdown-section em {
    font-style: italic;
  }
.markdown-section hr {
    margin-block: 2em;
  }
.markdown-section iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--color-mono-2);
  }
.markdown-section img {
    max-width: 100%;
  }
.markdown-section kbd {
    margin-inline: 0.15em;
  }
.alt:is(.markdown-section kbd) {
      padding: 0.5em;
      border: var(--kbd-alt-border);
      border-radius: var(--kbd-alt-border-radius);
      box-shadow: var(--kbd-alt-box-shadow);
      background: var(--kbd-alt-bg);
      color: var(--kbd-alt-color);
      font-size: var(--font-size-m);
    }
/* Callouts */
/* ---------------------------------- */
.markdown-section .callout {
    position: relative;
    margin-block: calc(var(--margin-block) * 1.5);
    padding: var(--callout-padding);
    border: solid var(--callout-border-color);
    border-width: var(--callout-border-width);
    border-radius: var(--callout-border-radius);
    background: var(--callout-bg);
    color: var(--callout-color);

    /* Charm */
  }
:is(.markdown-section .callout)::before {
      content: var(--callout-charm-content);
      position: absolute;
      inset: var(--callout-charm-inset);
      height: var(--callout-charm-size);
      width: var(--callout-charm-size);
      translate: var(--callout-charm-translate);
      border-radius: var(--callout-charm-border-radius);
      background: var(--callout-charm-bg);
      color: var(--callout-charm-color);
      font-size: var(--callout-charm-font-size);
      font-weight: var(--strong-font-weight);
      line-height: var(--callout-charm-size);
      text-align: center;
    }
:is(.markdown-section .callout)  > :first-child {
      margin-top: 0;
    }
:is(.markdown-section .callout)  > :last-child {
      margin-bottom: 0;
    }
:is(.markdown-section .callout) code,:is(.markdown-section .callout) strong {
      color: inherit;
    }
:is(.markdown-section .callout) code {
      background: rgba(0, 0, 0, 0.05);
    }
:is(.markdown-section .callout) pre:where([data-lang]) {
      background: rgba(255, 255, 255, 0.4);
    }
:is(.markdown-section .callout) .callout {
      margin-block: var(--margin-block);
    }
/* Code, Output, Samp */
/* ---------------------------------- */
.markdown-section code,.markdown-section output,.markdown-section pre {
    border-radius: var(--border-radius);
  }
.markdown-section code,.markdown-section pre,.markdown-section samp {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-mono);
  }
.markdown-section output,.markdown-section pre[data-lang] {
    position: relative;
  }
:is(.markdown-section output,.markdown-section pre[data-lang])::after {
      content: attr(data-lang);
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      color: inherit;
      font-family: var(--font-family);
      font-size: var(--font-size-xs);
      letter-spacing: 0.02em;
      line-height: 1;
      opacity: 0.5;
    }
.markdown-section :not(pre) > code,.markdown-section samp {
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
.markdown-section code {
    margin: 0 0.1em;
    padding: 0.2em 0.35em;
    background: var(--code-bg);
    color: var(--code-color);
  }
:is(.markdown-section code) .token {
      position: relative;
      left: auto;
    }
.markdown-section output {
    display: block;
    padding: 1.7rem 1.4rem 1.4rem;
    border: 1px solid var(--color-mono-2);
  }
:is(.markdown-section output)  > :first-child {
      margin-top: 0;
    }
:is(.markdown-section output)  > :last-child {
      margin-bottom: 0;
    }
.markdown-section pre[data-lang] {
    /* NOTE: !important declaration are intended to override third-party Prism theme values */
    padding: 0 !important;
    border-radius: var(--border-radius) !important;
    font-family: var(--font-family-mono) !important;
    font-size: var(--font-size-mono) !important;
    line-height: inherit !important;
    tab-size: 2 !important;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
:is(.markdown-section pre[data-lang]):only-child {
      margin: 0;
    }
:is(.markdown-section pre[data-lang])  > code {
      display: block;
      overflow: auto;
      margin: 0 !important;
      padding: 0 !important;
      padding-block: 1.5rem !important;
      padding-inline: 1.5rem !important;
      background: transparent;
      color: inherit;
      font-size: inherit;
      white-space: inherit;
    }
.markdown-section samp {
    font-weight: var(--strong-font-weight);
  }
:is(.markdown-section samp) .token {
      position: relative;
      left: auto;
    }
/* Headings */
/* --------------------------------- */
.markdown-section :where(h1,h2,h3,h4,h5,h6) {
    margin: 2rem 0 0.5em;
    color: var(--heading-color);
    font-weight: var(--heading-font-weight);

    /* Prevent long titles from causing horizontal scrolling */
  }
[id]:is(.markdown-section :where(h1,h2,h3,h4,h5,h6)) a {
      overflow-x: clip;
      overflow-y: visible;
      text-overflow: ellipsis;
    }
.markdown-section h1,.markdown-section h2 {
    margin-top: 2.5rem;
  }
.markdown-section :is(h1,h2,h3,h4,h5,h6) + * {
    margin-top: 0;
  }
.markdown-section h1 {
    font-size: var(--font-size-xxxl);
  }
:is(.markdown-section h1):first-of-type {
      margin-top: 0;
    }
.markdown-section h2 {
    --_spacing: 0.5em;

    margin-bottom: calc(
      var(--_spacing) + (var(--heading-line-height) - var(--font-size-xxl))
    );
    padding-bottom: var(--_spacing);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-xxl);
  }
.markdown-section h3 {
    font-size: var(--font-size-xl);
  }
.markdown-section h4 {
    font-size: var(--font-size-l);
  }
.markdown-section h5 {
    font-size: var(--font-size-m);
  }
:is(.markdown-section h6),:is(.markdown-section h6) + :not(h1,h2,h3,h4,h5) {
      font-size: var(--font-size-s);
    }
/* Lists */
/* ---------------------------------- */
.markdown-section ol,.markdown-section ul {
    margin: 0;
    padding-inline-start: 1.5em;
  }
:is(.markdown-section ol,.markdown-section ul) :is(.markdown-section ol,.markdown-section ul) {
      margin-top: 0.25em;
    }
:is(.markdown-section li):not(:last-child) {
      margin-bottom: 0.25em;
    }
.markdown-section ul.task-list {
    --_checkbox-margin: 0.2em;
    --_checkbox-offset: 1.6em;

    padding-inline-start: 0.6em;
  }
:is(.markdown-section ul.task-list) input[type='checkbox'] {
      margin-top: -0.15em;
      margin-right: var(--_checkbox-margin);
      margin-left: calc(0px - var(--_checkbox-offset));
    }
:is(.markdown-section ul.task-list) li {
      position: relative;
      margin-top: var(--_checkbox-margin);
      margin-bottom: var(--_checkbox-margin);
      margin-left: var(--_checkbox-offset);
      list-style-type: none;

      /* Vertical Connector */
    }
:is(:is(.markdown-section ul.task-list) li):has(.task-list)::before {
          content: '';
          position: absolute;
          z-index: -1;
          top: 1em;
          left: -1em;
          bottom: 0;
          border-left: 1px solid var(--color-mono-2);
        }
:is(.markdown-section ul.task-list) ul.task-list {
      padding-inline-start: 1.5em;
    }
:is(:is(.markdown-section ul.task-list) ul.task-list) li {
        margin-left: var(--_checkbox-margin);
      }
/* Horizontal Connector */
:is(:is(:is(.markdown-section ul.task-list) ul.task-list) > li)::after {
          content: '';
          position: absolute;
          z-index: -1;
          top: 0.9em;
          left: -2.7em;
          width: 1.25em;
          border-top: 1px solid var(--color-mono-2);
          border-left: none;
        }
/* Horizontal Connector + Mask */
:is(:is(:is(.markdown-section ul.task-list) ul.task-list) > li):last-child::after {
            bottom: 0;
            background: var(--color-bg);
          }
/* Tables */
/* ---------------------------------- */
.markdown-section th,.markdown-section td {
    padding: 0.25em 0.75em;
    border: 1px solid var(--color-mono-2);
  }
.markdown-section table {
    display: block;
    width: 100%;
    overflow: auto;
    border-collapse: collapse;
    border-spacing: 0;
  }
.markdown-section thead {
    display: none;
    font-weight: var(--strong-font-weight);
    text-align: left;
  }
:is(.markdown-section thead):has(th:not(:empty)) {
      display: table-header-group;
    }
.markdown-section th {
    font-weight: var(--strong-font-weight);
  }
:is(.markdown-section th):not([align]) {
      text-align: left;
    }
.markdown-section tr {
    border-top: 1px solid var(--color-mono-2);
  }
:is(.markdown-section tr):nth-child(2n) {
      background: var(--table-row-alt-bg);
    }
/* Syntax Highlighting */
/* See: https://prismjs.com */
/* ========================================================================== */
pre[data-lang] {
  background: var(--codeblock-bg);
  color: var(--codeblock-color);
}
.namespace {
  opacity: 0.7;
}
.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag {
    color: var(--codeblock-tag);
  }
.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string {
    color: var(--codeblock-selector);
  }
.token.entity,.token.operator,.token.url,.language-css .token.string,.style .token.string {
    color: var(--codeblock-operator);
  }
.token.cdata,.token.comment,.token.doctype,.token.prolog {
    color: var(--codeblock-comment);
  }
.token.atrule,.token.attr-value,.token.keyword {
    color: var(--codeblock-keyword);
  }
.token.important,.token.regex,.token.variable {
    color: var(--codeblock-variable);
  }
.token.bold,.token.important {
    font-weight: var(--strong-font-weight);
  }
.token.entity {
    cursor: help;
  }
.token.function {
    color: var(--codeblock-function);
  }
.token.important {
    color: var(--codeblock-important);
  }
.token.italic {
    font-style: italic;
  }
.token.punctuation {
    color: var(--codeblock-punctuation);
  }
/* Utility */
/* ========================================================================== */
[class*='clamp-'] {
  overflow: hidden;
  text-overflow: ellipsis;
}
[class*='clamp-']:not(.clamp-1) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
.clamp-1 {
  white-space: nowrap;
}
.clamp-2 {
  -webkit-line-clamp: 2;
}
.clamp-3 {
  -webkit-line-clamp: 3;
}
.visually-hidden {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
/* Media */
/* ========================================================================== */
:root {
  --_mobile-breakpoint: 640px; /* JS Accessible. Match with MQ below. */
}
@media (prefers-reduced-motion) {
  :root {
    --duration-slow: 0s;
    --duration-medium: 0s;
    --duration-fast: 0s;
  }
}
@media print {
  .app-nav,
  .github-corner,
  .sidebar,
  .sidebar-toggle {
    display: none;
  }
}
/* Mobile */
@media screen and (max-width: 640px) {
  .app-nav-merged {
    display: block;
  }
    body:has(.sidebar.show) .app-nav,body:has(.sidebar.show) .github-corner {
      pointer-events: none;
    }

    body:has(.sidebar.show) .app-nav {
      left: 0;
    }
      :is(body:has(.sidebar.show) main)::before {
        width: 100%;
        background: rgba(0, 0, 0, 0.15);
        transition:
          width 0s,
          background var(--duration-medium);
      }

    body:has(.sidebar.show) .sidebar-toggle {
      width: calc(100% - var(--sidebar-width));
    }

      :is(body:has(.sidebar.show) .sidebar-toggle):hover {
        background: transparent;
      }

    body:has(.sidebar.show) main > .content {
      left: 0;
    }
    body:has(.app-nav-merged) .app-nav {
      display: none;
    }

    body:has(.app-nav-merged) .markdown-section {
      margin-top: var(--content-margin-inline);
    }
}
/* Sidebar chevrons */
/* ========================================================================== */
/* prettier-ignore */
:root:has(body[class*='sidebar-chevron']) {
  --sidebar-chevron-collapsed-color: var(--color-mono-3);
  --sidebar-chevron-expanded-color : var(--theme-color);

  /* Chevron right (Mono) */
  --sidebar-pagelink-bg: no-repeat var(--_sidebar_pagelink-bg-left)
      calc(50% - 2.5px) / 6px 5px
      linear-gradient(
        45deg,
        transparent 2.75px,
        var(--sidebar-chevron-collapsed-color) 2.75px 4.25px,
        transparent 4px
      ),