@charset "UTF-8";

/* sass-plugin-0:/Users/juliangarnier/dev/anime/website/src/sass/index.scss */
:root {
  --hex-black-0: #252423;
  --rgb-black-0:
    37,
    36,
    35;
  --hex-black-1: #252423;
  --rgb-black-1:
    37,
    36,
    35;
  --hex-black-2: #262422;
  --rgb-black-2:
    38,
    36,
    34;
  --hex-black-3: #272421;
  --rgb-black-3:
    39,
    36,
    33;
  --hex-black-4: #272421;
  --rgb-black-4:
    39,
    36,
    33;
  --hex-black-5: #262422;
  --rgb-black-5:
    38,
    36,
    34;
  --hex-white-0: #F6F4F2;
  --rgb-white-0:
    246,
    244,
    242;
  --hex-white-1: #f6f4f2;
  --rgb-white-1:
    246,
    244,
    242;
  --hex-white-2: #b8b6b3;
  --rgb-white-2:
    184,
    182,
    179;
  --hex-white-3: #413d39;
  --rgb-white-3:
    65,
    61,
    57;
  --hex-white-4: #2f2c29;
  --rgb-white-4:
    47,
    44,
    41;
  --hex-white-5: #524f49;
  --rgb-white-5:
    82,
    79,
    73;
  --hex-red-0: #FF4B4B;
  --rgb-red-0:
    255,
    75,
    75;
  --hex-red-1: #ff4b4b;
  --rgb-red-1:
    255,
    75,
    75;
  --hex-red-2: #bf3e3e;
  --rgb-red-2:
    191,
    62,
    62;
  --hex-red-3: #412726;
  --rgb-red-3:
    65,
    39,
    38;
  --hex-red-4: #302523;
  --rgb-red-4:
    48,
    37,
    35;
  --hex-red-5: #532a29;
  --rgb-red-5:
    83,
    42,
    41;
  --hex-corail-0: #FF8333;
  --rgb-corail-0:
    255,
    131,
    51;
  --hex-corail-1: #ff8333;
  --rgb-corail-1:
    255,
    131,
    51;
  --hex-corail-2: #bf672d;
  --rgb-corail-2:
    191,
    103,
    45;
  --hex-corail-3: #412f23;
  --rgb-corail-3:
    65,
    47,
    35;
  --hex-corail-4: #302822;
  --rgb-corail-4:
    48,
    40,
    34;
  --hex-corail-5: #533724;
  --rgb-corail-5:
    83,
    55,
    36;
  --hex-orange-0: #FFA828;
  --rgb-orange-0:
    255,
    168,
    40;
  --hex-orange-1: #ffa828;
  --rgb-orange-1:
    255,
    168,
    40;
  --hex-orange-2: #bf8026;
  --rgb-orange-2:
    191,
    128,
    38;
  --hex-orange-3: #413422;
  --rgb-orange-3:
    65,
    52,
    34;
  --hex-orange-4: #302921;
  --rgb-orange-4:
    48,
    41,
    33;
  --hex-orange-5: #523e23;
  --rgb-orange-5:
    82,
    62,
    35;
  --hex-yellow-0: #FFCC2A;
  --rgb-yellow-0:
    255,
    204,
    42;
  --hex-yellow-1: #ffcc2a;
  --rgb-yellow-1:
    255,
    204,
    42;
  --hex-yellow-2: #bf9a27;
  --rgb-yellow-2:
    191,
    154,
    39;
  --hex-yellow-3: #413922;
  --rgb-yellow-3:
    65,
    57,
    34;
  --hex-yellow-4: #302c21;
  --rgb-yellow-4:
    48,
    44,
    33;
  --hex-yellow-5: #524723;
  --rgb-yellow-5:
    82,
    71,
    35;
  --hex-citrus-0: #F9F640;
  --rgb-citrus-0:
    249,
    246,
    64;
  --hex-citrus-1: #f9f640;
  --rgb-citrus-1:
    249,
    246,
    64;
  --hex-citrus-2: #bab836;
  --rgb-citrus-2:
    186,
    184,
    54;
  --hex-citrus-3: #403f24;
  --rgb-citrus-3:
    64,
    63,
    36;
  --hex-citrus-4: #2f2d22;
  --rgb-citrus-4:
    47,
    45,
    34;
  --hex-citrus-5: #515027;
  --rgb-citrus-5:
    81,
    80,
    39;
  --hex-lime-0: #B7FF54;
  --rgb-lime-0:
    183,
    255,
    84;
  --hex-lime-1: #b7ff54;
  --rgb-lime-1:
    183,
    255,
    84;
  --hex-lime-2: #8bbe44;
  --rgb-lime-2:
    139,
    190,
    68;
  --hex-lime-3: #384027;
  --rgb-lime-3:
    56,
    64,
    39;
  --hex-lime-4: #2c2f23;
  --rgb-lime-4:
    44,
    47,
    35;
  --hex-lime-5: #42522b;
  --rgb-lime-5:
    66,
    82,
    43;
  --hex-green-0: #6AFF65;
  --rgb-green-0:
    106,
    255,
    101;
  --hex-green-1: #6aff65;
  --rgb-green-1:
    106,
    255,
    101;
  --hex-green-2: #54be50;
  --rgb-green-2:
    84,
    190,
    80;
  --hex-green-3: #2c4029;
  --rgb-green-3:
    44,
    64,
    41;
  --hex-green-4: #272f24;
  --rgb-green-4:
    39,
    47,
    36;
  --hex-green-5: #31522e;
  --rgb-green-5:
    49,
    82,
    46;
  --hex-emerald-0: #57F695;
  --rgb-emerald-0:
    87,
    246,
    149;
  --hex-emerald-1: #57f695;
  --rgb-emerald-1:
    87,
    246,
    149;
  --hex-emerald-2: #47b873;
  --rgb-emerald-2:
    71,
    184,
    115;
  --hex-emerald-3: #293f30;
  --rgb-emerald-3:
    41,
    63,
    48;
  --hex-emerald-4: #252e27;
  --rgb-emerald-4:
    37,
    46,
    39;
  --hex-emerald-5: #2d5039;
  --rgb-emerald-5:
    45,
    80,
    57;
  --hex-turquoise-0: #66FFBC;
  --rgb-turquoise-0:
    102,
    255,
    188;
  --hex-turquoise-1: #66ffbc;
  --rgb-turquoise-1:
    102,
    255,
    188;
  --hex-turquoise-2: #52be8e;
  --rgb-turquoise-2:
    82,
    190,
    142;
  --hex-turquoise-3: #2b4035;
  --rgb-turquoise-3:
    43,
    64,
    53;
  --hex-turquoise-4: #262f28;
  --rgb-turquoise-4:
    38,
    47,
    40;
  --hex-turquoise-5: #305242;
  --rgb-turquoise-5:
    48,
    82,
    66;
  --hex-cyan-0: #26F2D5;
  --rgb-cyan-0:
    38,
    242,
    213;
  --hex-cyan-1: #26f2d5;
  --rgb-cyan-1:
    38,
    242,
    213;
  --hex-cyan-2: #25b5a0;
  --rgb-cyan-2:
    37,
    181,
    160;
  --hex-cyan-3: #233f39;
  --rgb-cyan-3:
    35,
    63,
    57;
  --hex-cyan-4: #232e2b;
  --rgb-cyan-4:
    35,
    46,
    43;
  --hex-cyan-5: #244e48;
  --rgb-cyan-5:
    36,
    78,
    72;
  --hex-sega-0: #05DBE9;
  --rgb-sega-0:
    5,
    219,
    233;
  --hex-sega-1: #05dbe9;
  --rgb-sega-1:
    5,
    219,
    233;
  --hex-sega-2: #0fa4ae;
  --rgb-sega-2:
    15,
    164,
    174;
  --hex-sega-3: #203b3c;
  --rgb-sega-3:
    32,
    59,
    60;
  --hex-sega-4: #222d2d;
  --rgb-sega-4:
    34,
    45,
    45;
  --hex-sega-5: #1e4a4c;
  --rgb-sega-5:
    30,
    74,
    76;
  --hex-sky-0: #33B3F1;
  --rgb-sky-0:
    51,
    179,
    241;
  --hex-sky-1: #33b3f1;
  --rgb-sky-1:
    51,
    179,
    241;
  --hex-sky-2: #2e88b4;
  --rgb-sky-2:
    46,
    136,
    180;
  --hex-sky-3: #25363e;
  --rgb-sky-3:
    37,
    54,
    62;
  --hex-sky-4: #242b2d;
  --rgb-sky-4:
    36,
    43,
    45;
  --hex-sky-5: #26424e;
  --rgb-sky-5:
    38,
    66,
    78;
  --hex-indigo-0: #717AFF;
  --rgb-indigo-0:
    113,
    122,
    255;
  --hex-indigo-1: #717aff;
  --rgb-indigo-1:
    113,
    122,
    255;
  --hex-indigo-2: #595fbe;
  --rgb-indigo-2:
    89,
    95,
    190;
  --hex-indigo-3: #2c2c3f;
  --rgb-indigo-3:
    44,
    44,
    63;
  --hex-indigo-4: #27252e;
  --rgb-indigo-4:
    39,
    37,
    46;
  --hex-indigo-5: #323351;
  --rgb-indigo-5:
    50,
    51,
    81;
  --hex-lavender-0: #A369FF;
  --rgb-lavender-0:
    163,
    105,
    255;
  --hex-lavender-1: #a369ff;
  --rgb-lavender-1:
    163,
    105,
    255;
  --hex-lavender-2: #7d53be;
  --rgb-lavender-2:
    125,
    83,
    190;
  --hex-lavender-3: #342a3f;
  --rgb-lavender-3:
    52,
    42,
    63;
  --hex-lavender-4: #2a252e;
  --rgb-lavender-4:
    42,
    37,
    46;
  --hex-lavender-5: #3e3051;
  --rgb-lavender-5:
    62,
    48,
    81;
  --hex-purple-0: #C06DDF;
  --rgb-purple-0:
    192,
    109,
    223;
  --hex-purple-1: #c06ddf;
  --rgb-purple-1:
    192,
    109,
    223;
  --hex-purple-2: #9356a8;
  --rgb-purple-2:
    147,
    86,
    168;
  --hex-purple-3: #392b3c;
  --rgb-purple-3:
    57,
    43,
    60;
  --hex-purple-4: #2d252d;
  --rgb-purple-4:
    45,
    37,
    45;
  --hex-purple-5: #45314b;
  --rgb-purple-5:
    69,
    49,
    75;
  --hex-magenta-0: #E962BF;
  --rgb-magenta-0:
    233,
    98,
    191;
  --hex-magenta-1: #e962bf;
  --rgb-magenta-1:
    233,
    98,
    191;
  --hex-magenta-2: #af4e90;
  --rgb-magenta-2:
    175,
    78,
    144;
  --hex-magenta-3: #3f2936;
  --rgb-magenta-3:
    63,
    41,
    54;
  --hex-magenta-4: #2f2429;
  --rgb-magenta-4:
    47,
    36,
    41;
  --hex-magenta-5: #4e2e43;
  --rgb-magenta-5:
    78,
    46,
    67;
  --hex-pink-0: #FF86A7;
  --rgb-pink-0:
    255,
    134,
    167;
  --hex-pink-1: #ff86a7;
  --rgb-pink-1:
    255,
    134,
    167;
  --hex-pink-2: #bf687f;
  --rgb-pink-2:
    191,
    104,
    127;
  --hex-pink-3: #412e32;
  --rgb-pink-3:
    65,
    46,
    50;
  --hex-pink-4: #302626;
  --rgb-pink-4:
    48,
    38,
    38;
  --hex-pink-5: #53363c;
  --rgb-pink-5:
    83,
    54,
    60;
  --hex-bg-0: #252423;
  --rgb-bg-0:
    37,
    36,
    35;
  --hex-bg-1: #252423;
  --rgb-bg-1:
    37,
    36,
    35;
  --hex-bg-2: #2a2928;
  --rgb-bg-2:
    42,
    41,
    40;
  --hex-bg-3: #2f2e2d;
  --rgb-bg-3:
    47,
    46,
    45;
  --hex-bg-4: #3a3938;
  --rgb-bg-4:
    58,
    57,
    56;
  --hex-fg-0: #FFFFFF;
  --rgb-fg-0:
    255,
    255,
    255;
  --hex-fg-1: #e6e6e6;
  --rgb-fg-1:
    230,
    230,
    230;
  --hex-fg-2: #cdcbcb;
  --rgb-fg-2:
    205,
    203,
    203;
  --hex-fg-3: #9b9797;
  --rgb-fg-3:
    155,
    151,
    151;
  --hex-fg-4: #696363;
  --rgb-fg-4:
    105,
    99,
    99;
  --backgroundColor: var(--hex-bg-1);
  --rimColor: #ffc7a8;
  --shadowColor: #212121;
  --worldColor1: #423d3d;
  --outlineColor: #1a1a19;
  --outlineColor: #101010;
  --outlineColorLight: #000000;
  --worldColorLight1: #DAD5D0;
  --box-shadow:
    0 1px 3px 0 rgba(0,0,0,0.03),
    0 0 1px 0 rgba(0,0,0,0.14),
    inset 0 1px 0 0 rgba(255,255,255,0.01);
  --site-header-height: 3.5rem;
  --docs-sidebar-width: 14rem;
  --docs-demos-width: 22rem;
  --docs-demo-header-height: 3.5rem;
  --demo-height: 12rem;
  --margin-xxxs: 0.25rem;
  --margin-xxs: 0.5rem;
  --margin-xs: 0.75rem;
  --margin-s: 1.0rem;
  --margin-m: 1.5rem;
  --margin-l: 4.0rem;
  --br-xs: 0.125rem;
  --br-s: 0.25rem;
  --br-m: 0.25rem;
  --br-l: 0.75rem;
  --inset-width: calc(100% + calc(var(--margin-s) * 2));
  --inset-paddings: var(--margin-xs) var(--margin-s);
  --inset-margin: calc(var(--margin-s) * -1);
  --visual-viewport-height: 100dvh;
  --slnt: 0;
  --wdth: 120;
  --wght: 450;
  --font-body:
    "DIN",
    Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif;
  --font-code: "BerkeleyMono", monospace;
  --text-xxxxl: 2.5rem;
  --text-xxxl: 2.5rem;
  --text-xxl: 2rem;
  --text-xl: 1.5rem;
  --text-l: 1.25rem;
  --text-m: 1rem;
  --text-s: 1rem;
  --text-xs: 0.875rem;
  --text-xxs: 0.75rem;
}
@media (min-width: 900px) {
  :root {
    --site-header-height: 4.5rem;
    --text-xxxxl: 4.0rem;
    --text-xxxl: 3.25rem;
    --text-xxl: 2.5rem;
    --text-xl: 1.75rem;
    --text-l: 1.25rem;
    --text-m: 1.125rem;
    --text-s: 1rem;
    --text-xs: 0.875rem;
    --text-xxs: 0.75rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --docs-sidebar-width: 16rem;
  }
}
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-weight: inherit;
}
a {
  color: currentColor;
}
input,
button {
  touch-action: manipulation;
}
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  color: var(--hex-fg-1);
  background-color: var(--hex-bg-1);
}
body {
  scrollbar-gutter: stable;
}
::selection {
  background-color: var(--hex-fg-3);
  color: var(--hex-bg-1);
}
#site-header {
  position: sticky;
  z-index: 2;
  top: 0;
  padding-left: var(--margin-s);
  padding-right: var(--margin-s);
  background-color: var(--hex-bg-1);
}
#site-header-content {
  position: static;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: var(--site-header-height);
  border-bottom: 1px solid var(--hex-bg-4);
}
@media (min-width: 900px) {
  #site-header {
    padding-left: var(--margin-m);
    padding-right: var(--margin-m);
  }
}
.heading-logo {
  z-index: 1;
  display: flex;
  justify-content: space-between;
  width: 13rem;
}
.header-logo {
  height: var(--site-header-height);
}
@media (max-width: 899px) {
  .heading-logo {
    width: calc(100% - 2.5rem);
  }
}
.heading-logo a {
  display: flex;
  align-items: center;
  height: 100%;
}
.heading-logo img {
  width: auto;
  height: 1.5rem;
}
.heading-logo span {
  display: none;
}
#docs-versions {
  display: none;
  width: 4rem;
  height: var(--site-header-height);
  padding: 0;
  color: var(--hex-fg-4);
}
#docs-versions:hover {
  color: var(--hex-fg-1);
}
#docs-versions .ui-input {
  padding-top: 0.2em;
  padding-right: 1.5rem;
  padding-left: 0rem;
  text-align: right;
  font-family: var(--font-body);
  font-size: 1em;
  font-weight: 400;
  color: currentColor;
}
#docs-versions::before {
  width: 4rem;
  height: 1.25rem;
  top: calc(var(--site-header-height) * 0.5 - 0.625rem);
  left: auto;
  right: 0;
  opacity: 0.2;
}
#docs-versions::after {
  right: 0;
  mask-size: 1rem;
}
#site-footer {
  z-index: 2;
  padding-left: var(--margin-s);
  padding-right: var(--margin-s);
  background-color: var(--hex-bg-1);
  padding-bottom: var(--margin-s);
}
#site-footer-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid var(--hex-bg-4);
}
@media (min-width: 900px) {
  #site-footer-content {
    flex-direction: row-reverse;
  }
  #site-footer {
    padding-left: var(--margin-m);
    padding-right: var(--margin-m);
  }
}
@media (max-width: 899px) {
  .footer-block:nth-child(2),
  .footer-block:nth-child(3) {
    width: calc(50% - var(--margin-xs));
  }
}
.footer-block {
  width: 100%;
  padding-top: var(--margin-s);
}
@media (min-width: 900px) {
  .footer-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 25%;
    padding-bottom: var(--margin-s);
  }
}
.footer-block h3.footer-heading:not(:last-child) {
  color: var(--hex-fg-4);
  margin-bottom: var(--margin-xxs);
}
.text-layout .footer-block ul.links-list {
  padding-left: 0;
}
.text-layout .footer-block ul.links-list li a {
  padding-left: 0;
}
.footer-logo-block {
  justify-content: flex-end;
}
.email-signup-block .email-signup-form {
  margin-top: var(--margin-xxxs);
}
.footer-logo {
  margin-top: var(--margin-xxxs);
  margin-bottom: var(--margin-xxxs);
}
.footer-copyright {
  color: var(--hex-fg-3);
  font-size: var(--text-xs);
}
.footer-copyright a:not(:hover) {
  text-decoration: none;
}
#site-menu {
  position: relative;
  z-index: 1;
}
#site-menu ul {
  display: flex;
  list-style-type: none;
  height: 100%;
}
#site-menu li {
  display: flex;
  align-items: center;
  height: 100%;
}
#site-menu .main-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: var(--margin-xs);
  padding-right: var(--margin-xs);
  text-decoration: none;
  color: var(--hex-fg-3);
}
#site-menu .main-nav-link.is-active {
  color: var(--hex-fg-1);
}
#site-menu .main-nav-link .icon {
  margin-top: 0;
  margin-right: -0.25em;
  margin-left: -0.25em;
}
#toggle-site-menu {
  display: none;
}
#toggle-site-menu .icon {
  margin-top: 0;
}
#site-menu sponsor-button .main-nav-link {
  position: relative;
  color: var(--hex-red-1);
}
#site-menu sponsor-button .main-nav-link::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 2rem;
  background-color: var(--hex-red-3);
  border-radius: var(--br-m);
}
#site-menu sponsor-button .main-nav-link .icon {
  margin-right: 0.25em;
}
#site-menu sponsor-button .main-nav-link .icon + span {
  display: inline;
  z-index: 1;
}
@media (max-width: 1199px) {
  body:has(#site-menu.is-active) #toggle-site-menu {
    position: fixed;
  }
  #site-header {
    z-index: 105;
  }
  #site-menu {
    overflow: scroll;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    min-height: 100dvh;
    padding-top: calc(var(--site-header-height));
    padding-bottom: calc(var(--site-header-height) + var(--margin-m));
    background-color: var(--hex-bg-1);
    transform: translateX(100%);
  }
  #site-menu ul {
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
  }
  #site-menu li {
    height: auto;
    padding-left: var(--margin-xxs);
    padding-right: var(--margin-s);
  }
  #site-menu .main-nav-link .icon,
  #site-menu sponsor-button .main-nav-link .icon {
    margin-right: var(--margin-xs);
  }
  #site-menu .main-nav-link {
    font-size: var(--text-l);
    line-height: 2em;
  }
  #site-menu li:has(.main-nav-link.is-active) {
    border-left: 1px solid;
  }
  #toggle-site-menu {
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 9999;
    top: 0;
    right: 0;
    width: var(--site-header-height);
  }
  #site-menu sponsor-button {
    font-size: var(--text-l);
    line-height: 1.5em;
    margin-top: 0.125em;
    color: var(--hex-red-1);
  }
  #site-menu sponsor-button .main-nav-link::before {
    display: none;
  }
}
@media (min-width: 1200px) {
  #site-menu .main-nav-link {
    height: 100%;
  }
  #site-menu sponsor-button {
    display: flex;
    align-items: center;
    height: 100%;
  }
  #site-menu .main-nav-link::after {
    pointer-events: none;
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: var(--margin-xs);
    right: var(--margin-xs);
    height: 1px;
    background-color: transparent;
  }
  #site-menu .main-nav-link:hover {
    color: var(--hex-fg-1);
  }
  #site-menu .main-nav-link.is-active::after {
    background-color: currentColor;
    opacity: 0.5;
  }
  #site-menu .main-nav-link sponsor-button .icon {
    margin-right: 0.25em;
  }
  #site-menu .main-nav-link sponsor-button .icon + span {
    display: inline;
  }
  #site-menu .main-nav-link:not(.nav-link-retractable) .icon {
    margin-right: var(--margin-xxxs);
  }
  #site-menu .main-nav-link.nav-link-retractable .icon + span {
    display: none;
  }
  #site-menu sponsor-button .main-nav-link {
    margin-left: var(--margin-xs);
  }
  #site-menu sponsor-button .main-nav-link::before {
    top: 1.25em;
    transition: background-color 0.1s ease-out;
  }
  #site-menu sponsor-button .main-nav-link:hover {
    color: var(--hex-red-1);
  }
  #site-menu sponsor-button .main-nav-link:hover::before {
    background-color: var(--hex-red-5);
  }
  #site-menu sponsor-button .main-nav-link:hover span {
    mix-blend-mode: plus-lighter;
    filter: drop-shadow(0 0 3px var(--hex-red-3));
  }
}
.ui-input.copy-button {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 3rem;
  border-top-right-radius: var(--br-s);
  background-color: transparent;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: var(--hex-fg-3);
  transition: opacity 0.125s ease, color 0.125s ease;
}
.text-layout .ui-button {
  overflow: visible;
  height: 3rem;
  color: var(--hex-fg-3);
  border: 1px solid var(--hex-fg-4);
  border-radius: var(--br-s);
  padding-left: var(--margin-s);
  padding-right: var(--margin-s);
  transition: transform 0.125s ease-out;
  line-height: 3rem;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
}
.text-layout .ui-button-s {
  height: 2rem;
  line-height: 2rem;
  padding-left: var(--margin-xxs);
  padding-right: var(--margin-xxs);
}
.text-layout .ui-button:hover,
.text-layout .ui-button:focus {
  color: var(--hex-fg-2);
  border: 1px solid var(--hex-fg-3);
}
.text-layout .ui-button .icon:last-child {
  margin-left: 0.25em;
  margin-right: calc(var(--margin-xxs) * -1);
}
.text-layout .ui-button.ui-primary {
  color: var(--hex-red-1);
  border-color: var(--hex-red-2);
  border: none;
  background-color: var(--hex-red-3);
}
.text-layout .ui-button.ui-primary:hover,
.text-layout .ui-button.ui-primary:focus {
  color: var(--hex-red-1);
  border-color: var(--hex-red-1);
}
.home-section-medium {
  width: 100%;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}
.media {
  display: block;
  width: 100%;
  height: auto;
}
.page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 100dvh;
}
.layout-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.layout-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  max-width: 1500px;
}
@media (min-width: 1500px) {
  .layout-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    max-width: 1500px;
  }
}
body.show-grid .layout-container:after {
  pointer-events: none;
  content: "";
  display: block;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 0.5rem 0.5rem;
}
@font-face {
  font-family: "BerkeleyMono";
  src: url(../fonts/BerkeleyMono-Regular.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BerkeleyMono";
  src: url(../fonts/BerkeleyMono-Italic.woff2) format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Digital-7";
  src: url(../fonts/Digital-7MonoItalic.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN";
  src: url(../fonts/Altinn-DINExp.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN";
  src: url(../fonts/Altinn-DINExp-Italic.woff2) format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DIN";
  src: url(../fonts/Altinn-DINExp-Bold.woff2) format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
html,
body {
  font-family: var(--font-body);
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-size: var(--text-s);
}
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-body);
  font-size: inherit;
  letter-spacing: inherit;
}
strong {
  --wght: bold;
  font-weight: bold;
}
i {
  font-style: italic;
}
input {
  font-family: inherit;
}
input[type=number] {
  font-variant-numeric: tabular-nums;
  font-feature-settings:
    "tnum",
    "ss01",
    "ss01";
}
sup {
  vertical-align: super;
  font-size: 0.625em;
}
pre {
  font-size: inherit;
}
code {
  overflow-x: auto;
  font-family: var(--font-code);
  font-size: 0.875em;
  font-weight: normal;
  line-height: 1.25em;
}
p,
li {
  line-height: 1.5rem;
}
.text-layout ul {
  list-style-type: "-  ";
  padding-left: 1rem;
}
.text-layout a code.hljs {
  display: inline;
  border-left: none;
}
.text-centered {
  text-align: center;
}
.text-layout .text-xxxxl,
.text-xxxxl {
  font-size: var(--text-xxxxl);
  line-height: 0.85em;
  letter-spacing: -0.025em;
  margin-bottom: 1.5em;
}
.text-layout .text-xxxl,
.text-xxxl {
  font-size: var(--text-xxxl);
  line-height: 0.95em;
  letter-spacing: -0.025em;
}
.text-layout h1,
.text-layout .text-xxl,
.text-xxl {
  font-size: var(--text-xxl);
  font-weight: 700;
  letter-spacing: -0.0125em;
  line-height: 0.95em;
}
.text-layout .text-xl,
.text-xl {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.125em;
  color: var(--hex-fg-2);
}
.text-layout h2,
.text-layout .text-l,
.text-l {
  font-size: var(--text-l);
  font-weight: 600;
  line-height: 1.25em;
  color: var(--hex-fg-2);
}
.text-layout p,
.text-layout h3,
.text-layout h4,
.text-layout li,
.text-layout li,
.text-layout .text-s,
.text-s {
  font-size: var(--text-s);
  font-family: inherit;
  line-height: 1.5rem;
}
.text-layout h3,
.text-layout h4 {
  font-weight: 600;
  color: var(--hex-fg-2);
}
.text-layout h5 {
  color: var(--hex-fg-4);
  font-family: inherit;
  font-size: var(--text-s);
  letter-spacing: 0.0125em;
}
.text-layout .text-xs,
.text-xs {
  font-size: var(--text-xs);
  line-height: 1.25em;
  letter-spacing: 0.0125em;
}
.text-layout .text-xxs,
.text-xxs {
  font-size: var(--text-xxs);
  color: var(--hex-fg-4);
}
.text-layout .text-xxxxl:not(:last-child) {
  margin-bottom: 0.25em;
}
.text-layout .text-xxxl:not(:last-child) {
  margin-bottom: 0.375em;
}
.text-layout .text-xxl:not(:last-child),
.text-layout h1:not(:last-child) {
  margin-bottom: 1.25rem;
}
.text-layout h2:not(:last-child),
.text-layout h3:not(:last-child),
.text-layout h4:not(:last-child),
.text-layout h5:not(:last-child) {
  margin-bottom: 1rem;
}
.text-layout p:not(:last-child),
.text-layout ul:not(:last-child) {
  margin-bottom: 1.5rem;
}
.text-layout pre {
  margin-top: 1.5rem;
}
.text-layout pre:not(:last-child) {
  margin-bottom: 1.5rem;
}
.text-layout h2:not(:first-child) {
  margin-top: 2rem;
}
.text-layout h1 + h2:not(:first-child) {
  margin-top: 0rem;
  margin-bottom: 1.75rem;
}
.text-layout h2:not(:first-child),
.text-layout .block:has(h2):not(:last-child) {
  margin-top: 2.25rem;
}
.text-layout h3:not(:first-child),
.text-layout h4:not(:first-child),
.text-layout .block:has(h3):not(:last-child),
.text-layout .block:has(h4):not(:last-child) {
  margin-top: 1.75rem;
}
.text-layout blockquote:not(:last-child) {
  margin-bottom: 1.75rem;
}
.text-layout table:not(:last-child),
.text-layout .block:not(:last-child) {
  margin-bottom: 1.75rem;
}
.text-ui {
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-weight: bold;
}
.text-mono {
  font-family: var(--font-code);
  font-size: var(--text-xs);
  font-weight: normal;
}
.text-layout a {
  display: inline-flex;
  position: relative;
  color: currentColor;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--hex-current-2);
}
.text-layout a:hover {
  color: var(--hex-current-1);
  text-decoration-color: var(--hex-current-1);
}
.text-layout p + pre,
.text-layout h2 + pre,
.text-layout h3 + pre {
  margin-top: 0;
}
.text-layout code {
  position: relative;
  padding: 0.2em 0.375em;
  border-radius: var(--br-s);
  background-color: var(--hex-bg-3);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.text-layout h2 code {
  padding: 0.075em 0.25em;
  border-radius: 0.25em;
}
.text-layout a:hover code {
  color: var(--hex-current-1);
  background-color: var(--hex-current-3);
  text-decoration: none;
}
.text-layout a:hover code span {
  color: var(--hex-current-1);
}
.text-layout pre code.hljs {
  display: block;
}
.text-layout pre code {
  position: relative;
  width: 100%;
  padding: var(--margin-s);
}
.text-layout .block {
  position: relative;
  padding: var(--margin-s);
  margin-top: 2.5rem;
  border-radius: var(--br-s);
}
.text-layout .block::before {
  display: inline-block;
  left: 0;
  height: 0.85rem;
  padding: 0 0.125rem;
  margin-bottom: 0.5rem;
  border-radius: var(--br-xs);
  font-weight: bold;
  font-size: var(--text-xxs);
}
.text-layout .block:has(h2) {
  margin-top: 2rem;
}
.text-layout .block h2:first-child {
  margin-top: 0.5rem;
}
.text-layout .block h2 {
  color: currentColor;
}
.text-layout .block p:not(:last-child) {
  margin-bottom: 1rem;
}
.text-layout .block pre {
  width: 100%;
}
.text-layout .block p + pre {
  margin-top: 0;
}
.text-layout .block .block {
  margin-top: 1.75rem;
}
.text-layout .block .block,
.text-layout .block p + pre code {
  border-radius: var(--br-xs);
}
.text-layout .block.info::before {
  content: "INFO";
  color: var(--hex-sky-4);
  background-color: var(--hex-sky-2);
}
.text-layout .block.info {
  color: var(--hex-sky-1);
  background-color: var(--hex-sky-4);
}
.text-layout .block .block.info {
  background-color: var(--hex-sky-3);
}
.text-layout .block.info code {
  background-color: rgba(var(--rgb-sky-1), 0.075);
}
.text-layout .block.warning {
  color: var(--hex-orange-1);
  background-color: var(--hex-orange-4);
}
.text-layout .block .block.warning {
  background-color: var(--hex-orange-3);
}
.text-layout .block.warning code {
  background-color: rgba(var(--rgb-orange-1), 0.05);
}
.text-layout .block.warning::before {
  content: "WARNING";
  color: var(--hex-orange-4);
  background-color: var(--hex-orange-2);
}
.text-layout-center {
  text-align: center;
}
.responsive-table {
  width: 100%;
  border-spacing: 0;
  border: none;
  color: var(--hex-fg-2);
  background-color: transparent;
}
.responsive-table tr th {
  border-top: 1px solid var(--hex-bg-4);
}
.responsive-table tr th,
.responsive-table tr td {
  border-bottom: 1px solid var(--hex-bg-4);
}
.responsive-table td:not(:empty),
.responsive-table th:not(:empty) {
  text-align: left;
  line-height: 1.5em;
  vertical-align: middle;
  padding: var(--inset-paddings);
}
@media (min-width: 900px) {
  .responsive-table td,
  .responsive-table th {
    white-space: nowrap;
  }
  .responsive-table td:first-child:not(:empty),
  .responsive-table th:first-child:not(:empty) {
    padding-left: 0;
  }
  .responsive-table td:first-child,
  .responsive-table th:first-child {
    border-left: none;
  }
  .responsive-table th:not(:empty) {
    border-top: none;
    padding-top: 0.25rem;
  }
}
.responsive-table td:last-child,
.responsive-table th:last-child {
  width: 100%;
  white-space: wrap;
  border-right: none;
}
.responsive-table th:not(:empty) {
  color: var(--hex-fg-4);
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-weight: bold;
}
@media (max-width: 899px) {
  .responsive-table thead {
    display: none;
  }
  .responsive-table td:not(:first-child),
  .responsive-table th:not(:first-child) {
    padding-top: 0.25rem;
  }
  .responsive-table td:not(:last-child),
  .responsive-table th:not(:last-child) {
    padding-bottom: 0.25rem;
  }
  .responsive-table td,
  .responsive-table th {
    border-left: none;
    border-right: none;
  }
  .responsive-table td:not(:empty) {
    position: relative;
    display: block;
    padding-left: calc(min(30vw, 10rem) + var(--margin-s));
  }
  .responsive-table td:not(:empty),
  .responsive-table th:not(:empty) {
    border-left: none;
  }
  .responsive-table td:not(:last-child) {
    border-bottom: 1px solid var(--hex-bg-1);
  }
  .responsive-table td::before {
    overflow: hidden;
    display: flex;
    align-items: center;
    content: attr(data-label);
    position: absolute;
    top: 0;
    left: 0;
    width: calc(min(30vw, 10rem) - var(--margin-s));
    height: 100%;
    padding-right: 0.5rem;
    border-right: 1px solid var(--hex-bg-1);
    white-space: pre;
    text-overflow: ellipsis;
    color: var(--hex-fg-4);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: bold;
    padding: var(--inset-paddings);
    padding-left: 0;
  }
  .responsive-table td:not(:first-child)::before,
  .responsive-table th:not(:first-child)::before {
    padding-top: 0.25rem;
  }
  .responsive-table td:not(:last-child)::before,
  .responsive-table th:not(:last-child)::before {
    padding-bottom: 0.25rem;
  }
}
.icon {
  pointer-events: none;
  flex-shrink: 0;
  display: inline-block;
  width: 24px;
  height: 24px;
}
.icon * {
  transform-box: fill-box;
  transform-origin: 50% 50% 0;
}
.icon *[stroke="#FFFFFF"] {
  stroke: currentColor;
}
.icon *[fill="#FFFFFF"] {
  fill: currentColor;
}
.ui-overlay {
  --overlay-opacity: 0;
  backdrop-filter: blur(calc(var(--overlay-opacity) * 10px));
}
.ui-overlay::before {
  content: "";
  pointer-events: none;
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  opacity: calc(var(--overlay-opacity) * 0.4);
  background: #000;
}
.ui-input {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  height: 100%;
  max-height: var(--site-header-height);
  padding-right: var(--margin-xxs);
  padding-left: var(--margin-xxs);
  background: transparent;
  color: var(--hex-fg-3);
  border: none;
  box-shadow: none;
  outline: none;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  text-align: left;
  line-height: 1;
  font-family: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.ui-input span {
  width: 100%;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.ui-input:has(span + .icon) {
  flex-direction: row-reverse;
}
.ui-input .icon + span {
  padding-left: var(--margin-xxs);
}
.ui-input:hover {
  color: var(--hex-fg-1);
}
.ui-input:disabled {
  pointer-events: none;
  cursor: not-allowed;
  color: var(--hex-bg-4);
}
.ui-input:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 transparent;
}
.ui-input:focus {
  border-color: transparent;
  color: var(--hex-fg-1);
}
.ui-group {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  height: 100%;
  padding-left: var(--margin-xxs);
  padding-right: var(--margin-xxs);
}
.ui-group .ui-button {
  width: 100%;
}
.ui-group > .ui-group {
  padding-left: 0;
  padding-right: 0;
}
.ui-select {
  position: relative;
  padding-right: 0;
  padding-left: 0;
}
.ui-select::after {
  pointer-events: none;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: var(--margin-s);
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.75rem;
  -webkit-mask: url(../images/icons/drop-down.svg) no-repeat 50% 50%;
  mask: url(../images/icons/drop-down.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  color: inherit;
  background-color: currentColor;
}
.ui-select .ui-input {
  width: 100%;
  height: 100%;
  padding-right: 1.75rem;
}
.sidebar {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
}
.sidebar-nav {
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: var(--margin-m);
  padding-left: var(--margin-s);
}
@media (min-width: 900px) {
  .sidebar-nav {
    padding-top: var(--margin-s);
    padding-right: var(--margin-m);
    padding-bottom: var(--margin-m);
    padding-left: var(--margin-m);
  }
}
.sidebar-nav ul,
.sidebar-nav li {
  overflow-y: hidden;
  backface-visibility: hidden;
}
.sidebar-nav ul > li > ul {
  position: relative;
}
.sidebar-nav ul > li > ul li:last-child {
  margin-bottom: 0.25rem;
}
.sidebar-nav ul li {
  position: relative;
  width: 100%;
  list-style: none;
}
.sidebar-nav ul > li:not(.is-active) {
  color: var(--hex-fg-3);
}
.sidebar-nav ul > li.is-active:has(li.is-active) {
  color: rgba(var(--rgb-current), 0.8);
}
.sidebar-nav ul > li:not(.is-active):hover {
  color: var(--hex-fg-1);
}
.sidebar-nav li.is-active:has(li.is-active) > a:hover {
  color: rgba(var(--rgb-current), 1);
}
.sidebar-nav ul.is-active ul:not(:has(li.is-active ul)) > li:not(.is-active) {
  color: var(--hex-fg-2);
}
.sidebar-nav ul.is-active ul:not(:has(li.is-active ul)) > li:not(.is-active):hover {
  color: var(--hex-fg-1);
}
.sidebar-nav li:not(.is-active) > ul {
  height: 0px;
}
.sidebar-nav ul li a {
  display: block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  min-height: 1.75rem;
  line-height: 1.75rem;
}
.sidebar-nav ul > li > ul::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0.25em;
  left: 0;
  width: 1px;
  background-color: var(--hex-fg-2);
  opacity: 0.35;
}
.sidebar-nav ul > li > ul > li > ul::before,
.sidebar-nav ul ul li ul li::before,
.sidebar-nav ul ul li ul li:has(ul)::after {
  left: var(--margin-xs);
}
.sidebar-nav ul > li > ul > li > ul > li > ul::before,
.sidebar-nav ul ul li ul li ul li::before,
.sidebar-nav ul ul li ul li ul li:has(ul)::after {
  left: calc(var(--margin-xs) * 2);
}
.sidebar-nav ul ul li a {
  padding-left: var(--margin-xs);
  font-weight: normal;
}
.sidebar-nav ul ul li ul li a {
  padding-left: calc(var(--margin-xs) * 2);
}
.sidebar-nav ul ul li ul li ul li a {
  padding-left: calc(var(--margin-xs) * 3);
}
.sidebar-nav ul ul li::before {
  content: "";
  opacity: 0;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background-color: currentColor;
  transform-origin: 0px;
}
.sidebar-nav ul ul li:has(ul)::after {
  content: "";
  opacity: 1;
  display: block;
  position: absolute;
  z-index: 10;
  top: 0.75rem;
  bottom: 0;
  left: 0;
  width: 4px;
  height: 1px;
  margin-left: 1px;
  margin-top: 1px;
  background-color: currentColor;
  transform-origin: 0px;
  opacity: 0.4;
}
.sidebar-nav ul ul li:has(ul):hover::after,
.sidebar-nav ul ul li:has(ul).is-active::after {
  opacity: 1;
}
.sidebar-nav ul ul li:hover,
.sidebar-nav ul ul li:hover::before,
.sidebar-nav ul ul li.is-active,
.sidebar-nav ul ul li.is-active::before {
  opacity: 1;
}
.sidebar-nav ul ul li.is-active:has(li.is-active)::before {
  opacity: 0.5;
}
input[type=range] {
  cursor: ew-resize;
}
input[type=range][value] {
  position: relative;
  width: 100%;
  height: 2rem;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  color: currentColor;
}
input[type=range][value]:focus {
  outline: none;
}
input[type=range][value]::after,
input[type=range][value]::before {
  content: "";
  position: absolute;
  top: 0rem;
  left: 0rem;
  right: 0rem;
  width: 100%;
  height: 2rem;
  border-radius: var(--br-m);
}
input[type=range][value]::before {
  background-color: currentColor;
}
input[type=range][value]::after {
  background-color: transparent;
}
input[type=range][value]::-webkit-slider-thumb {
  position: relative;
  z-index: 2;
  -webkit-appearance: none;
  background-color: transparent;
  border-radius: 1rem;
  width: 2rem;
  height: 2rem;
  box-shadow: none;
  background-image: radial-gradient(circle at 50% 50%, currentColor 0%, currentColor 22%, transparent 24%);
}
.hljs {
  color: #abb2bf;
}
.hljs-comment,
.hljs-quote {
  color: #5c6370;
  color: rgba(255, 255, 255, 0.35);
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
  color: #c678dd;
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
  color: #e06c75;
}
.hljs-variable.language_ {
  color: #56b6c2;
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
  color: #98c379;
}
.hljs-built_in,
.hljs-class .hljs-title,
.class_.hljs-title {
  color: #e6c07b;
}
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
  color: #d19a66;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
  color: #61aeee;
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: bold;
}
.hljs-link {
  text-decoration: underline;
}
sponsor-button {
  position: relative;
  color: var(--hex-red-1);
}
sponsor-button a,
sponsor-button a:hover {
  color: var(--hex-red-1) !important;
  text-decoration-color: var(--hex-red-1) !important;
}
sponsor-button svg {
  transition: filter 0.125s ease;
  filter: drop-shadow(0 0 0px currentColor);
}
sponsor-button:hover svg {
  mix-blend-mode: plus-lighter;
  filter: drop-shadow(0 0 3px currentColor);
}
sponsor-button svg.particle {
  position: absolute;
  top: 0;
  left: 0;
  margin-right: 0;
  margin-left: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 3px currentColor);
}
sponsors-list {
  container-type: inline-size;
  display: flex;
  width: 100%;
  gap: var(--margin-s);
}
.company-sponsors-list sponsors-list {
  gap: var(--margin-xxs);
  margin-bottom: var(--margin-xxs);
}
sponsors-list .sponsor {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  line-height: 1;
}
sponsors-list .sponsor img {
  aspect-ratio: 1/1;
  width: 100%;
  height: auto;
}
sponsors-list .sponsor {
  text-decoration: none;
}
sponsors-list[size=large] .sponsor {
  width: calc(33.33% - var(--margin-xxs));
  font-size: var(--text-xxs);
}
sponsors-list[size=large] .sponsor img {
  margin-bottom: var(--margin-xs);
}
sponsors-list[size=medium] .sponsor {
  width: calc(25% - var(--margin-xxs));
  font-size: var(--text-xxs);
}
sponsors-list[size=medium] .sponsor img {
  margin-bottom: var(--margin-xxs);
}
sponsors-list[size=small] .sponsor {
  width: calc(16.665% - var(--margin-xxs));
  font-size: 0.6rem;
}
sponsors-list[size=small] .sponsor img {
  margin-bottom: var(--margin-xxs);
}
@container (width > 30rem) { sponsors-list[size=large] .sponsor { font-size: var(--text-s); } sponsors-list[size=medium] .sponsor { font-size: var(--text-xs); } sponsors-list[size=small] .sponsor { font-size: var(--text-xs); } }
sponsors-list[boxed] a {
  position: relative;
  padding: var(--margin-xs);
  background-color: var(--hex-bg-2);
  border-radius: var(--br-l);
  color: var(--hex-fg-3);
}
sponsors-list a span.link-arrow {
  display: none;
}
sponsors-list a img {
  opacity: 0.85;
}
sponsors-list a:hover {
  background-color: var(--hex-bg-3);
  color: var(--hex-fg-1);
}
sponsors-list a:hover img {
  opacity: 1;
}
funding-level h3 span {
  font-family: var(--font-code);
  background-color: var(--hex-red-3);
  color: var(--hex-red-1);
}
funding-level .funding-level-status {
  font-family: var(--font-code);
  color: var(--hex-red-1);
}
funding-level .funding-level-status span {
  display: inline-block;
}
funding-level .chart {
  margin-bottom: var(--margin-s);
}
funding-level .sponsors-list {
  --height: 1.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: calc(100% - var(--height) * 0.5);
  height: var(--height);
  gap: 0;
  margin-bottom: var(--margin-xs);
}
funding-level .sponsor {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  flex-shrink: 1;
  flex-grow: 0;
  height: var(--height);
  margin: 0px;
}
funding-level .sponsor:hover {
  z-index: 1;
}
funding-level .sponsor figure {
  background-color: var(--hex-bg-3);
  position: absolute;
  left: 0;
  top: 0;
}
funding-level .sponsor img {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: contain;
  width: var(--height);
  height: var(--height);
  margin: 0px;
  border-radius: 50%;
  transition: transform 0.5s ease-out;
}
funding-level .sponsor:not(:last-child) img {
  pointer-events: none;
}
funding-level .sponsor:hover img {
  transform: scale(2);
  transition-duration: 0s;
}
funding-level .sponsor span {
  display: none;
}
@media (max-width: 899px) {
  funding-level .chart {
    margin-bottom: var(--margin-xxs);
  }
  funding-level .sponsors-list {
    display: none;
  }
}
.text-layout funding-level p:not(:last-child) {
  margin-bottom: var(--margin-xs);
}
.footer-sponsors {
  text-align: left;
  color: var(--hex-fg-3);
  padding-top: calc(var(--margin-l) - 0.5rem);
  margin-top: var(--margin-l);
  border-top: 1px solid var(--hex-bg-4);
}
.footer-sponsors p:first-child {
  margin-bottom: var(--margin-s);
}
.footer-sponsors funding-level figure {
  background-color: var(--hex-bg-3);
  border-radius: 50%;
}
.footer-sponsors funding-level .sponsor img {
  filter: grayscale(100%) brightness(0.8);
  display: block;
  margin-bottom: 0;
}
.footer-sponsors funding-level .sponsor:hover img {
  filter: grayscale(0%) brightness(1);
}
.footer-sponsors a:hover {
  opacity: 1;
}
.footer-sponsors sponsors-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: var(--margin-s);
  padding-bottom: var(--margin-s);
  gap: 1px;
}
.footer-sponsors sponsors-list img {
  width: 1.5rem;
  margin-right: var(--margin-xs);
}
.footer-sponsors sponsors-list a {
  display: flex;
  flex-direction: row;
  border-radius: 0;
}
.footer-sponsors sponsors-list a:first-child {
  border-top-left-radius: var(--br-s);
  border-top-right-radius: var(--br-s);
}
.footer-sponsors sponsors-list a:last-child {
  border-bottom-left-radius: var(--br-s);
  border-bottom-right-radius: var(--br-s);
}
.footer-sponsors sponsors-list a:hover {
  background-color: var(--hex-bg-3);
}
.footer-sponsors sponsors-list .link-arrow {
  display: block;
  position: absolute;
  right: var(--margin-xxs);
}
.email-signup-form {
  width: 100%;
  position: relative;
}
.email-signup-form form.is-pending {
  pointer-events: none;
  opacity: 0.5;
}
.email-signup-form ul:not(:last-child) {
  margin: 0px;
}
.email-signup-fields {
  display: none;
}
.email-signup-fields.is-active {
  display: flex;
}
.email-signup-field {
  flex-grow: 1;
}
.email-signup-input {
  width: 100%;
  padding: var(--margin-xs) var(--margin-xs);
  border-radius: var(--br-s) 0px 0px var(--br-s);
  font-size: var(--text-s);
  background-color: var(--hex-bg-4);
  color: var(--hex-fg-1);
  height: 2.75rem;
}
.email-signup-input::placeholder {
  color: var(--hex-fg-2);
}
.email-signup-submit {
  font-size: var(--text-s);
  padding: var(--margin-xxs) var(--margin-xs);
  border-radius: 0px var(--br-s) var(--br-s) 0px;
  background-color: var(--hex-fg-2);
  color: var(--hex-bg-1);
}
.email-signup-submit:hover {
  cursor: pointer;
  background-color: var(--hex-fg-1);
}
.email-signup-alert {
  display: none;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--margin-xs) var(--margin-xs);
  border-radius: var(--br-s);
  font-size: var(--text-xs);
  min-height: 2.75rem;
}
.email-signup-alert p {
  font-size: 0.8125rem !important;
  font-weight: 600;
  text-align: center;
}
.email-signup-alert.is-active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}
.email-signup-error {
  color: var(--hex-red-1);
  background-color: var(--hex-red-3);
}
.email-signup-success {
  color: var(--hex-green-1);
  background-color: var(--hex-green-3);
}
body[data-template=learn] #site-header {
  background-color: transparent;
  position: relative;
}
#learn {
  --one-cell: 100px;
  --border-color: rgba(255,255,255,.75);
  opacity: 0;
  width: 100%;
  flex-direction: column;
  min-height: 100lvh;
  display: flex;
  justify-content: space-between;
}
#learn.is-ready {
  opacity: 1;
}
#learn::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(-90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(-90deg, rgba(255, 255, 255, 0.0125) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.0125) 1px, transparent 1px);
  background-size:
    calc(var(--one-cell) / 10) calc(var(--one-cell) / 10),
    calc(var(--one-cell) / 10) calc(var(--one-cell) / 10),
    var(--one-cell) var(--one-cell),
    var(--one-cell) var(--one-cell),
    var(--one-cell) var(--one-cell),
    var(--one-cell) var(--one-cell),
    var(--one-cell) var(--one-cell),
    var(--one-cell) var(--one-cell);
  background-position: calc(var(--one-cell) * 0.25) -1px;
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
  mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
}
@media (min-width: 500px) {
  #learn::before {
    width: calc(100% + var(--one-cell) * 0.5);
    left: calc(var(--one-cell) * -0.5);
    background-position: calc(var(--one-cell) * 1) -1px;
  }
}
#learn-animejs {
  position: relative;
  z-index: 1;
  max-width: 58rem;
  margin-left: auto;
  margin-right: auto;
}
#learn-animejs .home-section,
#learn-animejs .home-section-content {
  height: auto;
}
@media (min-height: 64rem) {
  #learn-animejs .home-section-content {
    max-height: 100%;
  }
}
#learn-animejs .home-section-content {
  padding-bottom: var(--margin-l);
}
@media (max-width: 899px) {
  #learn-animejs .home-section-content {
    padding-top: var(--margin-l);
  }
}
#learn-animejs figcaption {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  padding: var(--xxs);
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  height: 2.5rem;
  padding-right: var(--margin-s);
  padding-left: var(--margin-s);
  line-height: 2.5rem;
  border-radius: var(--br-m);
  font-weight: 600;
}
#learn-animejs figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--br-l);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 10px 20px 0px rgba(0, 0, 0, 0.15);
}
.learn-header-text .text-xxxl:not(:last-child) {
  margin-bottom: 2rem;
}
.learn-header-text p {
  color: var(--hex-fg-2);
  max-width: 40rem;
}
.learn-header-text p.text-l {
  color: var(--hex-fg-3);
}
.learn-email-signup {
  margin-top: var(--margin-l);
  margin-bottom: var(--margin-l);
  background: var(--hex-bg-3);
  padding: calc(var(--margin-m) - 0.375rem) var(--margin-m) var(--margin-m);
  border-radius: var(--br-l);
}
.learn-email-signup h3 {
  color: var(--hex-fg-3);
}
.learn-email-signup h3 span {
  color: var(--hex-fg-2);
}
.learn-email-signup p {
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.word-websites {
  display: inline-block;
}
.signup-iframe {
  width: 100% !important;
  height: 220px;
  border: transparent !important;
  background: transparent !important;
  border-radius: var(--br-l);
  margin-bottom: var(--margin-s);
}
body[data-template=home] {
  background-color: #000;
  scroll-behavior: smooth;
}
body[data-template=home] #site-header {
  background-color: transparent;
  position: relative;
}
@media (min-width: 900px) {
  body[data-template=home] #site-header-content {
    border-bottom-color: transparent;
  }
}
body[data-template=home] .page {
  opacity: 0;
}
body[data-template=home] .page.is-ready {
  opacity: 1;
}
#engine {
  position: fixed;
  width: 100%;
  height: 100lvh;
}
#css-renderer {
  --color: var(--rgb-red-1);
  color: rgb(var(--color));
  transform: translateZ(0px) scale(1.001);
  backface-visibility: hidden;
}
#home {
  width: 100%;
  --max-box-width: 21rem;
  flex-direction: column;
}
#path-animation {
  pointer-events: none;
  position: fixed;
  z-index: 105;
  left: 0;
  top: 0;
  width: 100%;
  height: 100lvh;
}
.home-section-container {
  width: 100%;
}
.section-spacer {
  height: 100lvh;
}
.section-half-spacer {
  height: 50lvh;
}
.home-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100lvh;
  padding-left: var(--margin-s);
  padding-right: var(--margin-s);
}
@media (min-width: 900px) {
  .home-section {
    padding-left: var(--margin-l);
    padding-right: var(--margin-l);
  }
}
.home-section-content {
  position: relative;
  width: 100%;
  height: 100lvh;
  padding-top: var(--margin-s);
  padding-bottom: var(--margin-s);
}
@media (min-width: 900px) {
  .home-section-content {
    padding-top: var(--margin-l);
    padding-bottom: var(--margin-l);
  }
}
.home-section-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.debug .section-spacer {
  box-shadow: 0 0 0 1px yellow;
}
.debug .home-section {
  box-shadow: 0 0 0 1px red;
}
.debug .home-section-content {
  box-shadow: 0 0 0 1px green;
}
.home-section-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.home-section-text.home-section-centered {
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 100%;
}
.home-section-text.home-section-centered p {
  max-width: 100%;
}
.home-section-light .text-xxl {
  color: var(--hex-bg-1);
}
.home-section-light .text-xl {
  color: var(--hex-bg-2);
}
.home-section-light .text-m,
.home-section-light .text-l {
  color: var(--hex-bg-3);
}
.home-section-text h2 {
  font-size: var(--text-xxxl);
  line-height: 0.865em;
}
.home-section-text h2:not(:last-child) {
  margin-bottom: 0.365em;
}
.home-section-light .home-section-text h2 {
  color: var(--hex-bg-3);
}
.home-section-text p {
  color: var(--hex-fg-2);
  line-height: 1.25em;
  font-weight: 600;
}
.home-section-light .home-section-text p {
  color: var(--hex-bg-4);
}
@media (min-width: 900px) {
  .home-section-text {
    max-width: 25rem;
  }
  .home-section-text p {
    font-size: var(--text-l);
    max-width: 20rem;
  }
  .home-section-text-short p {
    max-width: var(--max-box-width);
  }
}
#intro {
  position: relative;
}
#intro .home-section {
  position: relative;
  height: calc(100lvh - var(--site-header-height));
}
#intro .home-section-text h2 {
  color: var(--hex-fg-1);
  margin-bottom: 0.365em;
}
.intro-name {
  display: inline-block;
  color: var(--hex-fg-3);
  font-size: var(--text-s);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: -0.865em;
}
@media (max-width: 899px) {
  .intro-name {
    display: none;
  }
}
#intro .animate-anything-wrapper {
  position: relative;
  display: inline-block;
}
.animate-anything {
  position: relative;
}
.animate-anything .char {
  transform-origin: 0% 95%;
}
.red-dot {
  display: inline-block;
  color: var(--hex-red-1);
}
.animate-anything-dot {
  display: block;
  position: absolute;
  right: -0.25em;
  bottom: -0.01em;
}
#intro .home-section-text .red-dot .char {
  opacity: 1 !important;
}
@media (max-width: 899px) {
  #intro h2 {
    margin-top: 0.25em;
  }
  #intro h2 br {
    display: none;
  }
}
@media (min-width: 900px) {
  #intro .home-section-text {
    align-items: flex-start;
    text-align: left;
    height: 100%;
    margin-bottom: var(--margin-l);
  }
  #intro .home-section-text h2 {
    font-size: var(--text-xxxxl);
  }
}
#intro .home-section-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.fixed-container {
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.heading-links {
  z-index: 1;
  will-change: transform;
}
.heading-links .layout-container {
  justify-content: space-between;
  padding-left: var(--margin-s);
  padding-right: var(--margin-s);
  padding-bottom: var(--margin-s);
}
@media (min-width: 900px) {
  .heading-links .layout-container {
    padding-left: var(--margin-l);
    padding-right: var(--margin-l);
    padding-bottom: var(--margin-l);
  }
}
.heading-links .ui-group {
  justify-content: flex-start;
  padding: 0;
}
.text-layout .npm-install,
.text-layout .npm-install:not(:last-child) {
  margin: 0;
  margin-right: 1rem;
}
.text-layout .npm-install code {
  overflow: hidden;
  position: relative;
  display: block;
  width: 100%;
  padding-right: 2.5rem;
  height: 3rem;
}
.learn-more.ui-button {
  position: relative;
  overflow: hidden;
}
.learn-more.ui-button .icon:nth-child(1) {
  position: absolute;
  right: var(--margin-xxs);
  top: -0.25em;
}
.learn-more.ui-button .icon:last-child {
  margin-left: var(--margin-xxxs);
}
@media (max-width: 899px) {
  .text-layout .npm-install {
    display: none;
  }
}
.heading-sponsors {
  position: relative;
  max-width: 10rem;
  width: 100%;
  height: 3rem;
}
.heading-sponsors span {
  display: block;
  position: absolute;
  top: -1.5rem;
  right: 0;
}
.heading-sponsors sponsors-list {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: var(--margin-s);
}
.heading-sponsors sponsors-list .sponsor {
  width: auto;
  padding: 0;
  background: transparent;
}
.heading-sponsors sponsors-list .sponsor:hover {
  background: transparent;
  margin-bottom: 0px;
}
.heading-sponsors sponsors-list .sponsor img {
  width: 3rem;
}
.heading-sponsors sponsors-list .sponsor span {
  display: none;
}
#modules {
  scroll-margin-top: -50lvh;
}
#sponsors {
  scroll-margin-top: 25lvh;
}
#sponsors .home-section {
  height: auto;
}
.feature-section {
  scroll-margin-top: -45lvh;
}
.feature-section {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0px;
  padding-bottom: 0px;
  height: 100lvh;
}
.feature-section.is-in-view {
  pointer-events: auto;
  z-index: 1;
}
.feature-section .home-section-content {
  padding-top: var(--margin-s);
  padding-bottom: 0px;
  height: 100%;
  max-height: 100%;
}
.home-section-text-heading {
  width: calc(100% - var(--margin-s) * 2);
  margin-bottom: var(--margin-m);
}
@media (max-width: 899px) {
  .feature-section h2 {
    font-size: var(--text-xxl);
  }
  .feature-section .home-section-text {
    opacity: 0;
    position: fixed;
    top: var(--margin-s);
  }
}
@media (min-width: 900px) {
  .feature-section .home-section-text {
    position: absolute;
    padding-top: var(--margin-m);
    bottom: 0;
  }
}
.feature-section .home-section-text h2 {
  color: var(--hex-current-1);
}
.feature-section .home-section-text p {
  color: var(--hex-fg-2);
}
.feature-section .home-section-text p strong {
  font-weight: inherit;
}
.feature-section ul.links-list {
  display: none;
}
.home-section-text ul.links-list {
  display: block;
  position: relative;
  width: 100%;
  padding-top: var(--margin-s);
  padding-left: 0;
}
@media (min-width: 900px) {
  .feature-section ul.links-list::before {
    content: "";
    display: block;
    width: 100%;
    max-width: 16rem;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: var(--hex-fg-3);
    transform: scaleX(var(--scaleX));
    transform-origin: 0 0;
  }
  .feature-section ul.links-list {
    --scaleX: 0;
    opacity: 0;
  }
}
.text-layout ul.links-list li {
  list-style-type: none;
  position: relative;
}
.text-layout ul.links-list li a {
  text-decoration: none;
  font-size: var(--text-s);
  padding-left: 1.75rem;
  color: var(--hex-fg-3);
}
.text-layout a .icon {
  transition: transform 0.125s ease-out;
}
.text-layout a:hover .icon {
  transform: translateX(0.125rem);
}
.text-layout ul.links-list li a .icon {
  position: absolute;
  top: 0;
  left: -0.125rem;
  color: var(--hex-fg-4);
}
.text-layout ul.links-list li a:hover,
.text-layout ul.links-list li a:hover .icon {
  color: var(--hex-current-1);
}
.feature-section-demo-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
}
@media (min-width: 900px) {
  .feature-section-demo-wrapper {
    position: fixed;
  }
}
.feature-demo,
.feature-section-demo {
  opacity: 0.001;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  aspect-ratio: 1/1;
  width: 400px;
  height: auto;
  transform: translate(-50%, -50%);
  color: var(--hex-current-1);
}
.debug .feature-demo {
  box-shadow: 0 0 0 1px rgba(255, 50, 0, 0.5);
}
.ui-label {
  margin-right: var(--margin-xxs);
}
.toolbox-labels-container {
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  justify-self: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100lvh;
}
.toolbox-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100lvh;
  max-height: 45lvh;
  min-height: 15rem;
}
@media (min-width: 900px) {
  .toolbox-labels-container {
    height: 100%;
  }
  .toolbox-labels {
    max-height: 64rem;
  }
}
.toolbox-labels ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  margin: 0 !important;
  font-family: var(--font-code);
  font-size: var(--text-xxs);
}
.toolbox-labels,
.toolbox-labels ul {
  position: absolute;
}
.toolbox-labels ul.toolbox-labels-left {
  left: var(--margin-s);
  bottom: var(--margin-s);
}
.toolbox-labels ul.toolbox-labels-right {
  align-items: flex-end;
  right: var(--margin-s);
  top: var(--margin-s);
  text-align: right;
}
@media (min-width: 900px) {
  .toolbox-labels ul {
    font-size: var(--text-xs);
  }
  .toolbox-labels ul.toolbox-labels-left {
    left: var(--margin-l);
    bottom: var(--margin-l);
  }
  .toolbox-labels ul.toolbox-labels-right {
    right: var(--margin-l);
    top: var(--margin-l);
  }
}
.toolbox-labels ul li {
  list-style: none;
  line-height: 1.25em;
  margin-bottom: 0.25em;
  padding-left: 0.25em;
  padding-right: 0.25em;
  border-radius: var(--br-xs);
  will-change: opacity;
}
.module-label-point {
  width: 1px;
  height: 1px;
}
.module-label-point,
.module-label-text div,
.toolbox-labels ul li {
  font-family: var(--font-code);
  font-size: var(--text-xs);
  color: var(--hex-bg-4);
  opacity: 0;
  will-change: transform, opacity;
}
.module-label-text.module-stagger,
.module-label-text.module-timer,
.module-label-text.module-animation,
.module-label-text.module-easings,
.module-label-text.module-scope {
  display: none;
}
.module-label-text div {
  border-radius: var(--br-xs);
  background-color: var(--worldColorLight1);
  line-height: 0.8;
}
#engine .output {
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
}
.output-progress,
.output-progress-bg {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.output-progress path,
.output-progress-bg path {
  stroke: var(--hex-current-1);
}
.output-progress-bg path {
  filter: drop-shadow(0 0 8px rgba(var(--rgb-current-1), 0.85));
}
.output-progress path {
  filter: drop-shadow(0 0 4px rgba(var(--rgb-current-1), 0.5));
}
.output-progress-bg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.125;
}
.grid-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: currentColor;
}
.dotted-grid-canvas {
  z-index: 0;
}
.clock {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.tick {
  opacity: 0.5;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 10px;
  color: var(--hex-red-1);
  background-color: currentColor;
  backface-visibility: hidden;
  transform-origin: 100% 0%;
  will-change: transform, opacity;
}
.shape {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 4px solid currentColor;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  will-change: transform;
}
.circle {
  border-radius: 50%;
}
.shape.fill {
  background-color: currentColor;
}
.square {
  border-radius: 10px;
}
.svg-tracks {
  perspective: 750px;
  transform: scale(0.85);
}
.svg-tracks,
.svg-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.svg-track {
  transform-style: preserve-3d;
}
.svg-tracks-pool {
  opacity: 0;
}
.svg-track-car {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svg-car {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 16px;
  height: 16px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid currentColor;
  transform-origin: 50%;
}
.clock-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  scale: 0.8;
}
.timeline-playhead {
  --height: 158px;
  width: 2px;
  height: var(--height);
  background: currentColor;
  margin-top: calc(var(--height) * -1);
  transform-origin: 50% 100% 0px;
  will-change: transform;
}
#sphere-animation {
  overflow: visible;
  width: 60%;
  height: 60%;
  color: var(--hex-red-10);
}
#sphere-animation path {
  opacity: 0.75;
  stroke-width: 2;
  stroke: currentColor;
}
#responsive-demo {
  transform: translate(-50%, -50%) scale(0.7);
}
.responsive-viewport {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid rgba(var(--rgb-current-1), 0.5);
  border-radius: 50px;
}
.responsive-viewport .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 20px;
  background-color: currentColor;
  will-change: transform;
}
.responsive-viewport .shape {
  border: none;
}
#draggable-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--hex-current-1);
}
.draggable-container {
  position: relative;
  width: 70%;
  height: 70%;
  max-width: 40vw;
  max-height: 40vw;
}
.draggable-container::after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  border: 2px dashed rgba(var(--rgb-current-1), 0.5);
}
#draggable-demo .draggable {
  width: 100%;
  height: 100%;
  color: rgba(var(--rgb-current-1), 1);
  background-color: currentColor;
  will-change: transform;
  border-radius: 50%;
  cursor: grab;
}
#draggable-demo .draggable::after {
  scale: 2;
}
.text-layout .modules-list {
  padding-left: 0rem;
  display: flex;
  flex-wrap: wrap;
}
.modules-list li {
  list-style: none;
  width: 33%;
  font-size: var(--text-xxs);
  color: var(--hex-fg-3);
  line-height: 1.25em;
}
.modules-list .size {
  display: none;
  margin-left: 0.25em;
  font-family: var(--font-code);
  font-size: var(--text-xxs);
  color: var(--hex-fg-4);
}
.label-dot {
  margin-right: 0.5rem;
  position: relative;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--hex-current-1);
}
.box-heading {
  display: flex;
  justify-content: space-between;
}
.box-heading h3:not(:last-child) {
  margin-bottom: 0.5rem;
}
.box-heading .size {
  font-family: var(--font-code);
}
.chart {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  border-radius: var(--br-s);
  margin-bottom: var(--margin-xs);
  background-color: var(--hex-bg-4);
}
.chart-bar {
  height: 0.75rem;
  width: 100%;
  background-color: var(--hex-current-1);
  will-change: width;
}
@media (max-width: 899px) {
  .text-layout .modules-list {
    display: none;
  }
  .chart {
    margin-bottom: var(--margin-xxxs);
  }
  .chart-bar {
    height: 1rem;
  }
}
.company-sponsors-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
@media (min-width: 900px) {
  [data-card] funding-level p {
    letter-spacing: -0.015em;
    white-space: nowrap;
  }
}
#get-started .home-section {
  height: auto;
  padding-top: calc(var(--margin-l) * 2);
  padding-bottom: var(--margin-l);
}
#get-started .home-section-content {
  height: auto;
}
#get-started .home-section-text {
  margin-bottom: 2.5rem;
}
@media (min-width: 900px) {
  #get-started .home-section {
    height: 100lvh;
    padding-bottom: 0px;
  }
  #site-footer {
    z-index: 10;
    bottom: 0;
    left: 0;
    background-color: var(--hex-bg-1);
  }
}
ul.docs-chapters-list {
  overflow: hidden;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 45rem;
  gap: 1px;
  border-radius: var(--br-m);
  background-color: var(--hex-bg-1);
}
.docs-chapters-list li {
  display: block;
  width: 100%;
  list-style: none;
  text-align: center;
}
.docs-chapters-list a {
  width: 100%;
  margin: 0;
  align-items: center;
  justify-content: flex-start;
  padding: var(--margin-xs) var(--margin-s);
  background-color: var(--hex-bg-2);
  text-decoration: none;
}
@media (min-width: 900px) {
  ul.docs-chapters-list {
    gap: 0.5rem;
    border-radius: 0;
  }
  .docs-chapters-list li {
    width: calc(33.3333333333% - 0.5rem);
  }
  .docs-chapters-list a {
    border-radius: var(--br-m);
  }
}
.docs-chapters-list a .label-text {
  display: flex;
  text-align: left;
  width: 100%;
  padding-left: var(--margin-s);
  color: var(--hex-fg-3);
}
.docs-chapters-list a:hover span {
  color: var(--hex-current-1);
}
.docs-chapters-list a span.label-dot {
  color: var(--hex-current-1);
  margin: 0;
}
.docs-chapters-list a span.link-arrow {
  position: absolute;
  right: var(--margin-xs);
}
.docs-chapters-list a:hover {
  background-color: var(--hex-current-3);
}
.fixed-section {
  opacity: 0.001;
  pointer-events: none;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
  padding: 0px;
  will-change: opacity;
}
@media (min-width: 900px) {
  .fixed-section {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}
@media (min-height: 64rem) {
  .home-section-content {
    max-height: 64rem;
  }
}
.fixed-section .home-section-content {
  max-width: 1500px;
  width: 100%;
  height: 100dvh;
  padding: var(--margin-s);
}
.sticky-section {
  position: sticky;
  top: 0;
}
@media (min-width: 900px) {
  .fixed-section .home-section-content {
    padding: var(--margin-l);
  }
}
.sub-nav {
  pointer-events: none;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  right: var(--margin-s);
  left: var(--margin-s);
  bottom: var(--margin-s);
  width: calc(100% - var(--margin-s) * 2);
  height: 10rem;
  border-radius: var(--br-l);
}
.home-progress-card {
  opacity: 0;
  position: absolute;
  z-index: 10;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  border-radius: var(--br-l);
  background-color: var(--hex-bg-3);
}
@media (min-width: 900px) {
  .sub-nav {
    left: auto;
    height: auto;
    width: var(--max-box-width);
    right: var(--margin-l);
    top: var(--margin-l);
    bottom: var(--margin-l);
  }
}
@media (min-width: 1500px) {
  .sub-nav {
    right: calc((100% - 1500px + var(--margin-l) * 2) / 2);
  }
}
@media (min-height: 64rem) and (min-width: 900px) {
  .sub-nav {
    top: calc((100lvh - 64rem + var(--margin-l) * 2) / 2);
    bottom: calc((100lvh - 64rem + var(--margin-l) * 2) / 2);
  }
}
.scroll-bar {
  position: relative;
  display: flex;
  width: calc(100% - 2rem);
  height: 0.75rem;
  top: 0.865rem;
  left: 1rem;
  background-size: 0.7692307692% 0.5rem;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
}
@media (min-width: 900px) {
  .scroll-bar {
    background-size: 1.5384615385% 0.5rem;
  }
}
.scroll-button {
  pointer-events: none;
  position: relative;
  z-index: -1;
  opacity: 0.5;
  display: flex;
  justify-content: space-evenly;
  width: 16.6666666667%;
  height: 0.75rem;
  top: 0;
  border-left: 1px solid #FFF;
}
.scroll-button:last-child {
  border-right: 1px solid #FFF;
}
.scroll-cursor {
  position: absolute;
  z-index: 100;
  flex-shrink: 0;
  top: -0.125rem;
  width: 3px;
  height: 1rem;
  background-color: var(--hex-red-1);
  border-radius: 3px;
  will-change: transform;
}
.scroll-cursor::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 100;
  top: -0.5rem;
  left: -0.5rem;
  right: -0.5rem;
  bottom: -0.5rem;
  background: transparent;
}
.scroll-cursor-ghost {
  opacity: 0;
  background-color: var(--hex-red-2);
  pointer-events: none;
}
[data-card] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3rem;
  width: 100%;
  padding: calc(var(--margin-xs) - 2px) var(--margin-s) var(--margin-xs) var(--margin-s);
  border-radius: var(--br-l);
  background-color: var(--hex-bg-3);
}
[data-card] .ui-input.copy-button {
  border-top-right-radius: var(--br-l);
}
.sub-nav pre {
  line-height: 1em;
}
.sub-nav pre code {
  background-color: transparent;
  font-size: var(--text-xxs);
  line-height: 1em;
}
@supports (-moz-orient: block) {
  .svg-car {
    opacity: 0;
  }
  .responsive-viewport,
  .shape {
    border-radius: 0px !important;
  }
}
body[data-template*=docs] #docs-versions {
  display: block;
}
@media (max-width: 899px) {
  body[data-template*=docs] #site-header {
    position: relative;
  }
}
.text-layout a[target=_blank] {
  --hex-current-1: var(--hex-fg-1);
  --rgb-current-1: var(--rgb-fg-1);
  --hex-current-1-3: var(--rgb-fg-1-3);
  --rgb-current-1-3: var(--rgb-fg-1-3);
  --hex-current-2: var(--hex-fg-2);
  --rgb-current-2: var(--rgb-fg-2);
  --hex-current-2-3: var(--rgb-fg-2-3);
  --rgb-current-2-3: var(--rgb-fg-2-3);
  --hex-current-3: var(--hex-fg-3);
  --rgb-current-3: var(--rgb-fg-3);
  --hex-current-3-3: var(--rgb-fg-3-3);
  --rgb-current-3-3: var(--rgb-fg-3-3);
  --hex-current-4: var(--hex-fg-4);
  --rgb-current-4: var(--rgb-fg-4);
  --hex-current-4-3: var(--rgb-fg-4-3);
  --rgb-current-4-3: var(--rgb-fg-4-3);
  --hex-current-5: var(--hex-fg-5);
  --rgb-current-5: var(--rgb-fg-5);
  --hex-current-5-3: var(--rgb-fg-5-3);
  --rgb-current-5-3: var(--rgb-fg-5-3);
}
.theme-color-0,
.text-layout a[href*="documentation/getting-started"] {
  --hex-current-1: var(--hex-red-1);
  --rgb-current-1: var(--rgb-red-1);
  --hex-current-1-3: var(--rgb-red-1-3);
  --rgb-current-1-3: var(--rgb-red-1-3);
  --hex-current-2: var(--hex-red-2);
  --rgb-current-2: var(--rgb-red-2);
  --hex-current-2-3: var(--rgb-red-2-3);
  --rgb-current-2-3: var(--rgb-red-2-3);
  --hex-current-3: var(--hex-red-3);
  --rgb-current-3: var(--rgb-red-3);
  --hex-current-3-3: var(--rgb-red-3-3);
  --rgb-current-3-3: var(--rgb-red-3-3);
  --hex-current-4: var(--hex-red-4);
  --rgb-current-4: var(--rgb-red-4);
  --hex-current-4-3: var(--rgb-red-4-3);
  --rgb-current-4-3: var(--rgb-red-4-3);
  --hex-current-5: var(--hex-red-5);
  --rgb-current-5: var(--rgb-red-5);
  --hex-current-5-3: var(--rgb-red-5-3);
  --rgb-current-5-3: var(--rgb-red-5-3);
}
.theme-color-1,
.text-layout a[href*="documentation/timer"] {
  --hex-current-1: var(--hex-corail-1);
  --rgb-current-1: var(--rgb-corail-1);
  --hex-current-1-3: var(--rgb-corail-1-3);
  --rgb-current-1-3: var(--rgb-corail-1-3);
  --hex-current-2: var(--hex-corail-2);
  --rgb-current-2: var(--rgb-corail-2);
  --hex-current-2-3: var(--rgb-corail-2-3);
  --rgb-current-2-3: var(--rgb-corail-2-3);
  --hex-current-3: var(--hex-corail-3);
  --rgb-current-3: var(--rgb-corail-3);
  --hex-current-3-3: var(--rgb-corail-3-3);
  --rgb-current-3-3: var(--rgb-corail-3-3);
  --hex-current-4: var(--hex-corail-4);
  --rgb-current-4: var(--rgb-corail-4);
  --hex-current-4-3: var(--rgb-corail-4-3);
  --rgb-current-4-3: var(--rgb-corail-4-3);
  --hex-current-5: var(--hex-corail-5);
  --rgb-current-5: var(--rgb-corail-5);
  --hex-current-5-3: var(--rgb-corail-5-3);
  --rgb-current-5-3: var(--rgb-corail-5-3);
}
.theme-color-2,
.text-layout a[href*="documentation/animation"] {
  --hex-current-1: var(--hex-orange-1);
  --rgb-current-1: var(--rgb-orange-1);
  --hex-current-1-3: var(--rgb-orange-1-3);
  --rgb-current-1-3: var(--rgb-orange-1-3);
  --hex-current-2: var(--hex-orange-2);
  --rgb-current-2: var(--rgb-orange-2);
  --hex-current-2-3: var(--rgb-orange-2-3);
  --rgb-current-2-3: var(--rgb-orange-2-3);
  --hex-current-3: var(--hex-orange-3);
  --rgb-current-3: var(--rgb-orange-3);
  --hex-current-3-3: var(--rgb-orange-3-3);
  --rgb-current-3-3: var(--rgb-orange-3-3);
  --hex-current-4: var(--hex-orange-4);
  --rgb-current-4: var(--rgb-orange-4);
  --hex-current-4-3: var(--rgb-orange-4-3);
  --rgb-current-4-3: var(--rgb-orange-4-3);
  --hex-current-5: var(--hex-orange-5);
  --rgb-current-5: var(--rgb-orange-5);
  --hex-current-5-3: var(--rgb-orange-5-3);
  --rgb-current-5-3: var(--rgb-orange-5-3);
}
.theme-color-3,
.text-layout a[href*="documentation/timeline"] {
  --hex-current-1: var(--hex-yellow-1);
  --rgb-current-1: var(--rgb-yellow-1);
  --hex-current-1-3: var(--rgb-yellow-1-3);
  --rgb-current-1-3: var(--rgb-yellow-1-3);
  --hex-current-2: var(--hex-yellow-2);
  --rgb-current-2: var(--rgb-yellow-2);
  --hex-current-2-3: var(--rgb-yellow-2-3);
  --rgb-current-2-3: var(--rgb-yellow-2-3);
  --hex-current-3: var(--hex-yellow-3);
  --rgb-current-3: var(--rgb-yellow-3);
  --hex-current-3-3: var(--rgb-yellow-3-3);
  --rgb-current-3-3: var(--rgb-yellow-3-3);
  --hex-current-4: var(--hex-yellow-4);
  --rgb-current-4: var(--rgb-yellow-4);
  --hex-current-4-3: var(--rgb-yellow-4-3);
  --rgb-current-4-3: var(--rgb-yellow-4-3);
  --hex-current-5: var(--hex-yellow-5);
  --rgb-current-5: var(--rgb-yellow-5);
  --hex-current-5-3: var(--rgb-yellow-5-3);
  --rgb-current-5-3: var(--rgb-yellow-5-3);
}
.theme-color-4,
.text-layout a[href*="documentation/animatable"] {
  --hex-current-1: var(--hex-citrus-1);
  --rgb-current-1: var(--rgb-citrus-1);
  --hex-current-1-3: var(--rgb-citrus-1-3);
  --rgb-current-1-3: var(--rgb-citrus-1-3);
  --hex-current-2: var(--hex-citrus-2);
  --rgb-current-2: var(--rgb-citrus-2);
  --hex-current-2-3: var(--rgb-citrus-2-3);
  --rgb-current-2-3: var(--rgb-citrus-2-3);
  --hex-current-3: var(--hex-citrus-3);
  --rgb-current-3: var(--rgb-citrus-3);
  --hex-current-3-3: var(--rgb-citrus-3-3);
  --rgb-current-3-3: var(--rgb-citrus-3-3);
  --hex-current-4: var(--hex-citrus-4);
  --rgb-current-4: var(--rgb-citrus-4);
  --hex-current-4-3: var(--rgb-citrus-4-3);
  --rgb-current-4-3: var(--rgb-citrus-4-3);
  --hex-current-5: var(--hex-citrus-5);
  --rgb-current-5: var(--rgb-citrus-5);
  --hex-current-5-3: var(--rgb-citrus-5-3);
  --rgb-current-5-3: var(--rgb-citrus-5-3);
}
.theme-color-5,
.text-layout a[href*="documentation/draggable"] {
  --hex-current-1: var(--hex-lime-1);
  --rgb-current-1: var(--rgb-lime-1);
  --hex-current-1-3: var(--rgb-lime-1-3);
  --rgb-current-1-3: var(--rgb-lime-1-3);
  --hex-current-2: var(--hex-lime-2);
  --rgb-current-2: var(--rgb-lime-2);
  --hex-current-2-3: var(--rgb-lime-2-3);
  --rgb-current-2-3: var(--rgb-lime-2-3);
  --hex-current-3: var(--hex-lime-3);
  --rgb-current-3: var(--rgb-lime-3);
  --hex-current-3-3: var(--rgb-lime-3-3);
  --rgb-current-3-3: var(--rgb-lime-3-3);
  --hex-current-4: var(--hex-lime-4);
  --rgb-current-4: var(--rgb-lime-4);
  --hex-current-4-3: var(--rgb-lime-4-3);
  --rgb-current-4-3: var(--rgb-lime-4-3);
  --hex-current-5: var(--hex-lime-5);
  --rgb-current-5: var(--rgb-lime-5);
  --hex-current-5-3: var(--rgb-lime-5-3);
  --rgb-current-5-3: var(--rgb-lime-5-3);
}
.theme-color-6,
.text-layout a[href*="documentation/scroll"] {
  --hex-current-1: var(--hex-green-1);
  --rgb-current-1: var(--rgb-green-1);
  --hex-current-1-3: var(--rgb-green-1-3);
  --rgb-current-1-3: var(--rgb-green-1-3);
  --hex-current-2: var(--hex-green-2);
  --rgb-current-2: var(--rgb-green-2);
  --hex-current-2-3: var(--rgb-green-2-3);
  --rgb-current-2-3: var(--rgb-green-2-3);
  --hex-current-3: var(--hex-green-3);
  --rgb-current-3: var(--rgb-green-3);
  --hex-current-3-3: var(--rgb-green-3-3);
  --rgb-current-3-3: var(--rgb-green-3-3);
  --hex-current-4: var(--hex-green-4);
  --rgb-current-4: var(--rgb-green-4);
  --hex-current-4-3: var(--rgb-green-4-3);
  --rgb-current-4-3: var(--rgb-green-4-3);
  --hex-current-5: var(--hex-green-5);
  --rgb-current-5: var(--rgb-green-5);
  --hex-current-5-3: var(--rgb-green-5-3);
  --rgb-current-5-3: var(--rgb-green-5-3);
}
.theme-color-7,
.text-layout a[href*="documentation/scope"] {
  --hex-current-1: var(--hex-emerald-1);
  --rgb-current-1: var(--rgb-emerald-1);
  --hex-current-1-3: var(--rgb-emerald-1-3);
  --rgb-current-1-3: var(--rgb-emerald-1-3);
  --hex-current-2: var(--hex-emerald-2);
  --rgb-current-2: var(--rgb-emerald-2);
  --hex-current-2-3: var(--rgb-emerald-2-3);
  --rgb-current-2-3: var(--rgb-emerald-2-3);
  --hex-current-3: var(--hex-emerald-3);
  --rgb-current-3: var(--rgb-emerald-3);
  --hex-current-3-3: var(--rgb-emerald-3-3);
  --rgb-current-3-3: var(--rgb-emerald-3-3);
  --hex-current-4: var(--hex-emerald-4);
  --rgb-current-4: var(--rgb-emerald-4);
  --hex-current-4-3: var(--rgb-emerald-4-3);
  --rgb-current-4-3: var(--rgb-emerald-4-3);
  --hex-current-5: var(--hex-emerald-5);
  --rgb-current-5: var(--rgb-emerald-5);
  --hex-current-5-3: var(--rgb-emerald-5-3);
  --rgb-current-5-3: var(--rgb-emerald-5-3);
}
.theme-color-8,
.text-layout a[href*="documentation/stagger"] {
  --hex-current-1: var(--hex-turquoise-1);
  --rgb-current-1: var(--rgb-turquoise-1);
  --hex-current-1-3: var(--rgb-turquoise-1-3);
  --rgb-current-1-3: var(--rgb-turquoise-1-3);
  --hex-current-2: var(--hex-turquoise-2);
  --rgb-current-2: var(--rgb-turquoise-2);
  --hex-current-2-3: var(--rgb-turquoise-2-3);
  --rgb-current-2-3: var(--rgb-turquoise-2-3);
  --hex-current-3: var(--hex-turquoise-3);
  --rgb-current-3: var(--rgb-turquoise-3);
  --hex-current-3-3: var(--rgb-turquoise-3-3);
  --rgb-current-3-3: var(--rgb-turquoise-3-3);
  --hex-current-4: var(--hex-turquoise-4);
  --rgb-current-4: var(--rgb-turquoise-4);
  --hex-current-4-3: var(--rgb-turquoise-4-3);
  --rgb-current-4-3: var(--rgb-turquoise-4-3);
  --hex-current-5: var(--hex-turquoise-5);
  --rgb-current-5: var(--rgb-turquoise-5);
  --hex-current-5-3: var(--rgb-turquoise-5-3);
  --rgb-current-5-3: var(--rgb-turquoise-5-3);
}
.theme-color-9,
.text-layout a[href*="documentation/svg"] {
  --hex-current-1: var(--hex-cyan-1);
  --rgb-current-1: var(--rgb-cyan-1);
  --hex-current-1-3: var(--rgb-cyan-1-3);
  --rgb-current-1-3: var(--rgb-cyan-1-3);
  --hex-current-2: var(--hex-cyan-2);
  --rgb-current-2: var(--rgb-cyan-2);
  --hex-current-2-3: var(--rgb-cyan-2-3);
  --rgb-current-2-3: var(--rgb-cyan-2-3);
  --hex-current-3: var(--hex-cyan-3);
  --rgb-current-3: var(--rgb-cyan-3);
  --hex-current-3-3: var(--rgb-cyan-3-3);
  --rgb-current-3-3: var(--rgb-cyan-3-3);
  --hex-current-4: var(--hex-cyan-4);
  --rgb-current-4: var(--rgb-cyan-4);
  --hex-current-4-3: var(--rgb-cyan-4-3);
  --rgb-current-4-3: var(--rgb-cyan-4-3);
  --hex-current-5: var(--hex-cyan-5);
  --rgb-current-5: var(--rgb-cyan-5);
  --hex-current-5-3: var(--rgb-cyan-5-3);
  --rgb-current-5-3: var(--rgb-cyan-5-3);
}
.theme-color-10,
.text-layout a[href*="documentation/text"] {
  --hex-current-1: var(--hex-sega-1);
  --rgb-current-1: var(--rgb-sega-1);
  --hex-current-1-3: var(--rgb-sega-1-3);
  --rgb-current-1-3: var(--rgb-sega-1-3);
  --hex-current-2: var(--hex-sega-2);
  --rgb-current-2: var(--rgb-sega-2);
  --hex-current-2-3: var(--rgb-sega-2-3);
  --rgb-current-2-3: var(--rgb-sega-2-3);
  --hex-current-3: var(--hex-sega-3);
  --rgb-current-3: var(--rgb-sega-3);
  --hex-current-3-3: var(--rgb-sega-3-3);
  --rgb-current-3-3: var(--rgb-sega-3-3);
  --hex-current-4: var(--hex-sega-4);
  --rgb-current-4: var(--rgb-sega-4);
  --hex-current-4-3: var(--rgb-sega-4-3);
  --rgb-current-4-3: var(--rgb-sega-4-3);
  --hex-current-5: var(--hex-sega-5);
  --rgb-current-5: var(--rgb-sega-5);
  --hex-current-5-3: var(--rgb-sega-5-3);
  --rgb-current-5-3: var(--rgb-sega-5-3);
}
.theme-color-11,
.text-layout a[href*="documentation/utilities"] {
  --hex-current-1: var(--hex-sky-1);
  --rgb-current-1: var(--rgb-sky-1);
  --hex-current-1-3: var(--rgb-sky-1-3);
  --rgb-current-1-3: var(--rgb-sky-1-3);
  --hex-current-2: var(--hex-sky-2);
  --rgb-current-2: var(--rgb-sky-2);
  --hex-current-2-3: var(--rgb-sky-2-3);
  --rgb-current-2-3: var(--rgb-sky-2-3);
  --hex-current-3: var(--hex-sky-3);
  --rgb-current-3: var(--rgb-sky-3);
  --hex-current-3-3: var(--rgb-sky-3-3);
  --rgb-current-3-3: var(--rgb-sky-3-3);
  --hex-current-4: var(--hex-sky-4);
  --rgb-current-4: var(--rgb-sky-4);
  --hex-current-4-3: var(--rgb-sky-4-3);
  --rgb-current-4-3: var(--rgb-sky-4-3);
  --hex-current-5: var(--hex-sky-5);
  --rgb-current-5: var(--rgb-sky-5);
  --hex-current-5-3: var(--rgb-sky-5-3);
  --rgb-current-5-3: var(--rgb-sky-5-3);
}
.theme-color-12,
.text-layout a[href*="documentation/web-animation-api"] {
  --hex-current-1: var(--hex-indigo-1);
  --rgb-current-1: var(--rgb-indigo-1);
  --hex-current-1-3: var(--rgb-indigo-1-3);
  --rgb-current-1-3: var(--rgb-indigo-1-3);
  --hex-current-2: var(--hex-indigo-2);
  --rgb-current-2: var(--rgb-indigo-2);
  --hex-current-2-3: var(--rgb-indigo-2-3);
  --rgb-current-2-3: var(--rgb-indigo-2-3);
  --hex-current-3: var(--hex-indigo-3);
  --rgb-current-3: var(--rgb-indigo-3);
  --hex-current-3-3: var(--rgb-indigo-3-3);
  --rgb-current-3-3: var(--rgb-indigo-3-3);
  --hex-current-4: var(--hex-indigo-4);
  --rgb-current-4: var(--rgb-indigo-4);
  --hex-current-4-3: var(--rgb-indigo-4-3);
  --rgb-current-4-3: var(--rgb-indigo-4-3);
  --hex-current-5: var(--hex-indigo-5);
  --rgb-current-5: var(--rgb-indigo-5);
  --hex-current-5-3: var(--rgb-indigo-5-3);
  --rgb-current-5-3: var(--rgb-indigo-5-3);
}
.theme-color-13,
.text-layout a[href*="documentation/engine"] {
  --hex-current-1: var(--hex-lavender-1);
  --rgb-current-1: var(--rgb-lavender-1);
  --hex-current-1-3: var(--rgb-lavender-1-3);
  --rgb-current-1-3: var(--rgb-lavender-1-3);
  --hex-current-2: var(--hex-lavender-2);
  --rgb-current-2: var(--rgb-lavender-2);
  --hex-current-2-3: var(--rgb-lavender-2-3);
  --rgb-current-2-3: var(--rgb-lavender-2-3);
  --hex-current-3: var(--hex-lavender-3);
  --rgb-current-3: var(--rgb-lavender-3);
  --hex-current-3-3: var(--rgb-lavender-3-3);
  --rgb-current-3-3: var(--rgb-lavender-3-3);
  --hex-current-4: var(--hex-lavender-4);
  --rgb-current-4: var(--rgb-lavender-4);
  --hex-current-4-3: var(--rgb-lavender-4-3);
  --rgb-current-4-3: var(--rgb-lavender-4-3);
  --hex-current-5: var(--hex-lavender-5);
  --rgb-current-5: var(--rgb-lavender-5);
  --hex-current-5-3: var(--rgb-lavender-5-3);
  --rgb-current-5-3: var(--rgb-lavender-5-3);
}
.theme-color {
  color: rgba(var(--rgb-current-1), 1);
}
.docs-info a::selection {
  background-color: var(--hex-current-1);
  color: var(--hex-current-3);
}
.docs-info .code-preview *::selection {
  background-color: var(--hex-current-1);
  color: var(--hex-current-3);
}
#docs {
  position: relative;
  justify-content: space-between;
  scrollbar-gutter: stable;
}
#docs-nav {
  position: sticky;
  z-index: 102;
  top: 0;
  width: 100%;
  background-color: var(--hex-bg-1);
}
#docs-nav-menu {
  height: var(--site-header-height);
}
@media (min-width: 900px) {
  #docs {
    padding-top: var(--site-header-height);
  }
  #docs-nav {
    z-index: 105;
    max-width: 1500px;
    height: 0px;
    margin-top: calc(var(--site-header-height) * -1);
    background-color: transparent;
  }
  #docs-nav-menu {
    position: relative;
    justify-content: space-between;
    left: calc(var(--docs-sidebar-width) + var(--margin-l));
    width: calc(100% - (var(--docs-sidebar-width) + var(--margin-l) + var(--site-header-height)));
    padding-left: 0;
    padding-right: 0;
  }
  #search-nav {
    width: 100%;
  }
  #toggle-search {
    width: 6rem;
    padding-left: 0;
  }
  #toggle-sidebar {
    display: none;
  }
  #docs-sidebar .sidebar-nav {
    padding-right: 0;
  }
  #docs-sidebar .sidebar-nav > ul {
    padding-bottom: calc(var(--demo-height) * 0.6);
  }
}
@media (min-width: 1200px) {
  #docs-nav-menu {
    left: var(--docs-sidebar-width);
    width: var(--docs-demos-width);
    height: calc(var(--site-header-height) - var(--margin-xs) * 2);
    margin-top: var(--margin-xs);
    background-color: rgba(var(--rgb-bg-3), 0.6);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border-radius: var(--br-l);
    box-shadow: 0 1px 0px 0px rgba(0, 0, 0, 0.1);
  }
  #docs-nav-menu::after {
    content: "";
    position: absolute;
    display: block;
    bottom: calc(var(--site-header-height) - var(--margin-xs) * 3);
    left: 0;
    width: 100%;
    height: 496px;
    background-color: var(--hex-bg-1);
    clip-path: path("M352,496 C352,489.372583 346.627417,484 340,484 L12,484 C5.372583,484 0,489.372583 0,496 L0,0 L352,0 Z");
  }
  #search-nav {
    padding-left: var(--margin-s);
    padding-right: var(--margin-xs);
  }
  #toggle-search {
    flex-direction: row-reverse;
    width: 100%;
  }
}
#docs-sidebar {
  overscroll-behavior: contain;
  left: 0;
  width: var(--docs-sidebar-width);
  position: sticky;
  top: var(--site-header-height);
  height: calc(100dvh - var(--site-header-height));
}
@media (max-width: 899px) {
  #toggle-search span {
    display: none;
  }
  #toggle-sidebar {
    padding-left: 0.25rem;
  }
  #docs-sidebar {
    overscroll-behavior: contain;
    position: sticky;
    z-index: 2;
    top: var(--site-header-height);
    left: 0;
    bottom: 0;
    height: calc(100dvh - var(--site-header-height));
    padding-bottom: 0px;
    transform: translateX(-100%);
    background-color: var(--hex-bg-1);
  }
  #docs-sidebar .sidebar-nav > ul {
    padding-bottom: calc(var(--site-header-height) + var(--margin-m));
  }
}
#docs-info {
  position: relative;
  width: 100%;
}
@media (max-width: 899px) {
  #docs-info {
    flex-shrink: 0;
    margin-left: calc(-1 * var(--docs-sidebar-width));
  }
}
@media (min-width: 900px) {
  #docs-info {
    left: 0;
    width: calc(100% - var(--docs-sidebar-width));
  }
}
@media (min-width: 1200px) {
  #docs-info {
    width: calc(100% - var(--docs-sidebar-width) - var(--docs-demos-width));
  }
}
#docs-info pre {
  position: relative;
}
.docs-info {
  padding-top: var(--margin-s);
  padding-left: var(--margin-s);
  padding-right: var(--margin-s);
  padding-bottom: calc(var(--margin-m) + var(--demo-height));
}
@media (min-width: 900px) {
  .docs-info {
    padding-top: calc(var(--margin-l) - 0.5rem);
    padding-right: var(--margin-l);
    padding-left: var(--margin-l);
    padding-bottom: calc(var(--margin-l));
  }
}
@media (min-width: 1200px) {
  .docs-info {
    padding-top: calc(var(--margin-l) - 0.5rem);
  }
}
.text-layout a.docs-info-header {
  text-decoration: none;
  background-color: transparent;
  color: inherit;
}
.docs-info-content {
  position: relative;
  padding-top: 0;
  margin-bottom: 3rem;
  color: var(--hex-fg-1);
}
.docs-info-content .docs-breadcrumb {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--margin-m);
  margin-left: -0.125em;
}
.docs-info-content .docs-breadcrumb .docs-info-header {
  opacity: 1;
  padding-right: 0.125em;
  font-size: var(--text-xs);
}
.docs-info-content .docs-breadcrumb p {
  margin-bottom: 0;
}
.docs-breadcrumb p a {
  text-decoration: none;
  margin-right: 0;
  margin-left: 0;
  padding: 0.25em;
  border-radius: var(--br-s);
  background-color: transparent;
  color: var(--hex-current-2);
  line-height: 1;
  font-size: var(--text-xxs);
  font-weight: 500;
  text-transform: uppercase;
}
.docs-breadcrumb-arrow {
  position: relative;
  top: -0.25em;
  display: inline-block;
  opacity: 1;
  margin-left: 0.5em;
  margin-right: 0.5em;
  font-size: 0.5em;
  font-family: var(--font-code);
  font-size: 0.425rem;
  line-height: 0;
  text-transform: uppercase;
}
.docs-info-links-heading {
  position: relative;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: -1px;
  margin-bottom: 0;
  padding-top: var(--margin-xs);
  padding-bottom: var(--margin-xs);
  color: var(--hex-fg-3);
}
.docs-info-links-heading strong {
  display: block;
  margin-top: 0;
  margin-bottom: 0;
}
.docs-info-links span {
  position: absolute;
  display: inline-block;
}
.docs-info-links .dotted-grid {
  width: calc(1rem + 1px);
  height: calc(1rem + 1px);
  top: 1rem;
  right: calc(1rem - 1px);
  color: currentColor;
}
.docs-info-links .link-arrow {
  right: 0.5rem;
}
.docs-info-links:not(:last-child) {
  margin-bottom: 3rem;
}
.docs-info-links li {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  list-style: none;
}
.docs-info-link {
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  padding-left: var(--margin-s);
  padding-right: calc(1rem + var(--margin-m));
  padding-top: var(--margin-xs);
  padding-bottom: var(--margin-xs);
  text-decoration: none;
  color: var(--hex-fg-3);
  background-color: var(--hex-bg-2);
}
.docs-info-link::before,
.docs-info-link::after {
  content: "";
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  border-radius: inherit;
}
.docs-info-link::after {
  background-color: rgba(0, 0, 0, 0);
}
.docs-info-link:hover,
.docs-info-link:active {
  z-index: 1;
  color: var(--hex-current-1);
  background-color: var(--hex-current-3);
}
.docs-info-link:active {
  color: var(--hex-current-2);
  transform: scale(0.995);
}
.docs-info-link:active::after {
  background-color: rgba(0, 0, 0, 0.1);
}
.docs-info-link,
.docs-info-link::before,
.docs-info-link::after {
  transition:
    color 0.1s ease-out,
    background-color 0.1s ease-out,
    opacity 0.1s ease-out;
}
.docs-info-link:hover,
.docs-info-link:hover::before,
.docs-info-link:hover::after,
.docs-info-link:active,
.docs-info-link:active::before,
.docs-info-link:active::after {
  transition-duration: 0s;
}
.chapter-links li:first-child .docs-info-link {
  border-top-left-radius: var(--br-m);
  border-top-right-radius: var(--br-m);
}
.chapter-links li:last-child .docs-info-link {
  border-bottom-left-radius: var(--br-m);
  border-bottom-right-radius: var(--br-m);
}
.chapter-links li:not(:last-child) .docs-info-link {
  margin-bottom: 1px;
}
.prev-next-links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.prev-next-links li {
  width: calc(50% - var(--margin-xxs));
}
.prev-next-links li .docs-info-link {
  border-radius: var(--br-m);
}
.prev-next-links li:first-child:not(:last-child) .docs-info-link {
  text-align: right;
  padding-left: calc(1rem + var(--margin-m));
  padding-right: var(--margin-s);
}
.prev-next-links li:first-child:not(:last-child) .docs-info-link .link-arrow {
  right: auto;
  left: 0.5rem;
}
#docs-demos-container {
  z-index: 105;
}
@media (min-width: 1200px) {
  #docs-demos-container {
    position: fixed;
    z-index: 104;
    left: 50%;
    transform: translateX(-50%);
  }
}
#docs-demos {
  z-index: 1;
  overscroll-behavior: contain;
  overflow-y: scroll;
  user-select: none;
  -webkit-user-select: none;
  backface-visibility: hidden;
}
.demos-placeholder {
  position: sticky;
  overflow: visible;
  pointer-events: none;
  z-index: 10;
  left: var(--margin-m);
  right: var(--margin-m);
  top: 0;
  height: 0px;
}
#docs-demos.is-loading {
  pointer-events: none;
  overflow-y: hidden;
}
#docs-demos.is-scrolling {
  transition: none;
}
#docs-demos.is-scrolling .docs-demo {
  pointer-events: none;
}
#docs-demos::-webkit-scrollbar {
  display: none;
}
@media (max-width: 1199px) {
  #docs-demos {
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    transform-origin: 100% 100% 0px;
    z-index: 999;
    width: var(--docs-demos-width);
    height: var(--demo-height);
    background-color: var(--hex-bg-1);
    border-radius: var(--br-l);
    box-shadow: 0 0.4rem 1rem 0 rgba(0, 0, 0, 0.25);
  }
  #docs-demos.is-small .docs-demo {
    pointer-events: none;
  }
  .is-small .animejs-onscroll-debug,
  .is-small .animejs-onscroll-debug + div {
    opacity: 0;
  }
}
@media (min-width: 1200px) {
  #docs-demos {
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior: contain;
    position: absolute;
    left: var(--docs-sidebar-width);
    top: 0;
    width: var(--docs-demos-width);
    height: 100dvh;
    padding-top: var(--site-header-height);
    background-color: var(--hex-bg-1);
    box-shadow: 0 0 0 var(--margin-m) var(--hex-bg-1);
  }
}
.code-preview {
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 100%;
  margin-bottom: var(--margin-m);
  background-color: var(--hex-current-4);
  border-radius: var(--br-m);
}
@media (min-width: 900px) {
  .code-preview {
    margin-top: calc(var(--margin-l) - 1rem);
    margin-bottom: var(--margin-l);
  }
}
.code-preview-content {
  position: relative;
  z-index: 1;
}
.code-preview-content header {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  height: calc(3rem + 2px);
  padding-left: var(--margin-s);
  padding-right: var(--margin-s);
  background-color: var(--hex-current-3);
}
.code-preview-title {
  flex-shrink: 1;
  flex-grow: 0;
  width: 100%;
  overflow: hidden;
}
.code-preview-content header nav {
  display: flex;
  flex-shrink: 0;
  flex-grow: 1;
  height: 100%;
}
.code-preview-content header button {
  cursor: pointer;
  position: relative;
  background-color: transparent;
  color: currentColor;
  border-bottom: 1px solid transparent;
  margin-left: var(--margin-m);
}
.code-preview-title h2 {
  overflow: hidden;
  display: block;
  width: 100%;
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.code-preview-content header button {
  color: var(--hex-current-2);
  border-color: transparent;
}
.code-preview-content button:hover {
  color: var(--hex-current-1);
}
.code-preview-content button.is-active {
  color: var(--hex-current-1);
  border-color: var(--hex-current-1);
}
@media (max-width: 899px) {
  .code-preview-content button span {
    display: none;
  }
}
.code-editor pre:not(:last-child) {
  margin-bottom: 0;
}
.code-editor pre {
  display: none;
  margin: 0;
}
.code-editor pre.is-active {
  display: block;
}
.code-editor pre code {
  display: block;
  border-radius: 0;
  background-color: transparent;
  padding: var(--margin-s);
}
.docs-demo-html pre input {
  position: relative;
  background-color: transparent;
  border-radius: 0;
  flex-shrink: 1;
  flex-grow: 0;
  color: inherit;
  font-family: inherit;
}
.docs-demo-html .centered.row input {
  text-align: center;
}
.notif {
  opacity: 0.65;
}
.badge {
  position: relative;
  display: inline-block;
  top: -0.1rem;
  left: 0;
  height: 0.85rem;
  padding: 0.125rem;
  margin-left: 0.2em;
  margin-right: 0.2em;
  font-size: var(--text-xxs);
  font-weight: bold;
  line-height: 0.8;
  text-transform: uppercase;
  display: inline-block;
  background-color: var(--hex-current-2);
  color: var(--hex-current-4);
  border-radius: var(--br-xs);
}
.docs-nav-item:not(.is-active) .badge,
.docs-demo:not(.is-active) .badge {
  background-color: var(--hex-fg-3);
}
.badge + .badge {
  margin-left: 0;
  margin-right: 0;
}
.text-layout h1 .badge {
  top: -1em;
}
.text-layout h2 .badge {
  top: -0.35rem;
}
.text-layout h3 .badge {
  top: -0.2rem;
}
#docs-search-container {
  pointer-events: none;
  position: fixed;
  z-index: 106;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  height: var(--visual-viewport-height);
  transition: height 0.25s ease-out;
}
#docs-search-modal {
  pointer-events: none;
  opacity: 0;
  position: relative;
  z-index: 2;
  width: calc(100% - var(--margin-s) * 2);
  max-width: 30rem;
  height: calc(var(--visual-viewport-height) - var(--site-header-height) * 2);
  max-height: calc((var(--site-header-height) + 1px) * 7 + var(--margin-xs) - 1px);
}
@media (max-width: 899px) {
  #docs-search-modal {
    max-height: calc((4rem + 1px) * 4 + var(--site-header-height) + var(--margin-xxs));
  }
  .docs-search-result {
    height: 4rem;
  }
}
#docs-search {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-height: 100%;
  padding-left: var(--margin-xs);
  padding-right: var(--margin-xs);
  border-radius: var(--br-l);
  box-shadow:
    var(--box-shadow),
    0 0.25rem 0.5rem 1px rgba(0, 0, 0, 0.05),
    0 0.5rem 1rem 1px rgba(0, 0, 0, 0.075);
  background-color: var(--hex-bg-3);
}
#docs-search-bar {
  position: sticky;
  z-index: 2;
  top: 0;
  padding-left: 0;
  padding-right: 0;
  background-color: var(--hex-bg-3);
}
#docs-search-bar::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--hex-bg-4);
}
#docs-search-input {
  width: 100%;
  height: var(--site-header-height);
  padding-left: var(--margin-xs);
  padding-right: 2.5rem;
  font-size: var(--text-l);
  cursor: text;
}
#docs-close-search {
  position: absolute;
  right: 0;
  top: 0;
}
#docs-close-search .icon:first-child {
  display: none;
}
#docs-close-search:disabled .icon:first-child {
  display: block;
  color: var(--hex-fg-3);
}
#docs-close-search:disabled .icon:last-child {
  display: none;
}
#docs-search-results-container {
  overflow-y: scroll;
  overscroll-behavior: contain;
  max-height: 100%;
  background-color: var(--hex-bg-3);
  border-radius: var(--br-s);
}
#docs-search-results-container:has(.is-active) {
  margin-bottom: var(--margin-xs);
}
#docs-search-results {
  max-height: 100%;
}
.docs-search-result {
  position: relative;
  display: block;
  padding: var(--margin-xs) var(--margin-xs);
  border-bottom: 1px solid var(--hex-bg-4);
  cursor: pointer;
  text-decoration: none;
}
.docs-search-result h2 {
  font-weight: 500;
  color: var(--hex-fg-2);
}
.docs-search-result p {
  font-weight: 400;
  margin-bottom: 0;
  width: 100%;
  color: var(--hex-fg-3);
  overflow: hidden;
  white-space: nowrap;
}
.docs-search-result::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: var(--hex-current-2);
}
.docs-search-result.is-active::before {
  background-color: var(--hex-current-1);
}
.docs-search-result.is-active {
  background-color: var(--hex-current-3);
}
.docs-search-result.is-active > h2 {
  color: var(--hex-current-1);
}
.docs-search-result.is-active > p {
  color: var(--hex-current-2);
}
.docs-demo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: var(--demo-height);
  touch-action: manipulation;
  background-color: rgba(var(--rgb-current-3), 1);
}
.docs-demo.is-active {
  z-index: 2;
}
.docs-demo.is-hidden {
  pointer-events: none;
}
.docs-demo.is-hidden:not(.is-active) .docs-demo-header,
.docs-demo.is-hidden:not(.is-active) .docs-demo-content {
  display: none;
}
.docs-demo-header {
  position: relative;
  z-index: 1;
  height: var(--docs-demo-header-height);
  line-height: var(--docs-demo-header-height);
  padding-left: var(--margin-m);
  padding-right: var(--margin-m);
}
.docs-nav-menu {
  opacity: 0;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0.65rem;
  height: 3.5rem;
  padding: 0rem;
}
#docs-demos:not(.is-small) .docs-demo.is-active .docs-nav-menu {
  opacity: 1;
}
.docs-nav-menu button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 3.5rem;
  border: none;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
}
@media (min-width: 1200px) {
  .docs-demo {
    margin-bottom: var(--margin-xs);
    border-radius: var(--br-l);
  }
  .docs-demo:not(.is-active) {
    --rgb-current-1: var(--rgb-fg-1);
    --hex-current-1: var(--hex-fg-1);
    color: var(--hex-fg-2);
    background-color: var(--hex-bg-2);
    cursor: pointer;
  }
  .docs-demo:not(.is-active):hover,
  .docs-demo:not(.is-active):active {
    background-color: var(--hex-bg-3);
  }
  .docs-demo-header,
  .docs-demo:not(.is-active):hover .docs-demo-header,
  .docs-demo:not(.is-active):active .docs-demo-header {
    opacity: 0.65;
  }
  .docs-demo-content,
  .docs-demo:not(.is-active):hover .docs-demo-content,
  .docs-demo:not(.is-active):active .docs-demo-content {
    opacity: 0.4;
  }
  .docs-demo.is-active .docs-demo-header,
  .docs-demo.is-active .docs-demo-content {
    opacity: 1;
  }
  .docs-demo.is-active .docs-nav-menu button {
    opacity: 0.65;
  }
  .docs-demo.is-active .docs-nav-menu button:hover {
    opacity: 1;
  }
}
@media (min-width: 1200px) {
  .docs-demo.is-active .docs-nav-menu .minimise-demo-button {
    display: none;
  }
}
.docs-demo-html:has(iframe) {
  overflow: hidden;
  display: flex;
  resize: horizontal;
}
.docs-demo-html.docs-demo-live iframe {
  overflow: auto;
  flex: 1;
}
.iframe-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
body.docs-demo-html {
  left: 0px;
  width: 100%;
  margin-left: 0px;
}
.docs-demo-html.docs-demo-live iframe,
.iframe-content {
  width: 100%;
  height: 7rem;
  border: none;
  box-shadow: inset 0px 0px 0px 2px currentColor;
  border-radius: var(--br-s);
}
.docs-demo-html.docs-demo-live iframe,
.docs-demo-html.docs-demo-template .iframe-content {
  border: none;
  box-shadow: inset 0px 0px 0px 2px currentColor;
  border-radius: var(--br-s);
}
.docs-demo-html:has(iframe)::-webkit-resizer {
  display: block;
  width: 20px;
  height: 20px;
}
.docs-demo-html:has(iframe)::after {
  content: "";
  pointer-events: none;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-image: radial-gradient(circle at center, #000 1px, transparent 0), radial-gradient(circle at center, #000 1px, transparent 0);
  background-size: 4px 4px;
  background-color: currentColor;
  border: 4px solid currentcolor;
  border-radius: var(--br-s) 0 var(--br-s) 0;
  box-shadow: -1px -1px 4px rgba(0, 0, 0, 0.25);
}
.docs-demo-html:has(iframe)::before {
  pointer-events: none;
  content: "resize iframe \bb";
  display: block;
  position: absolute;
  bottom: 0px;
  right: 28px;
  height: 20px;
  font-family: var(--font-code);
  opacity: 0.6;
  font-size: 0.75rem;
  letter-spacing: -0.025em;
  white-space: pre;
}
.docs-demo-js {
  display: none;
}
.docs-demo-content {
  pointer-events: none;
  position: relative;
  z-index: 2;
  flex-grow: 1;
  margin-left: var(--margin-m);
  margin-right: var(--margin-m);
  margin-bottom: var(--margin-m);
}
.docs-demo-content.dotted-grid {
  margin-top: -2px;
  margin-bottom: calc(var(--margin-m) - 2px);
}
.docs-demo.is-active .docs-demo-content {
  pointer-events: auto;
}
.dotted-grid::after,
.square-grid::after {
  opacity: 0.5;
  pointer-events: none;
  content: "";
  position: absolute;
}
.dotted-grid::after {
  top: 0.5px;
  left: 1px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
}
.docs-demo-live .square-grid::after {
  top: 0;
  left: 0;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  background-image: linear-gradient(rgba(var(--rgb-current-1), 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--rgb-current-1), 0.5) 1px, transparent 1px);
  background-size: 1rem 1rem, 1rem 1rem;
  box-shadow: inset 0 0 0 1px rgba(var(--rgb-current-1), 1);
}
.scroll-content .square-grid::after,
.square-grid.scroll-content::after {
  box-shadow: none;
  opacity: 0.25;
}
.docs-demo-live .scroll-container .square-grid::after {
  background-image:
    linear-gradient(rgba(var(--rgb-current-1), 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--rgb-current-1), 0.2) 1px, transparent 1px),
    linear-gradient(rgba(var(--rgb-current-1), 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--rgb-current-1), 0.5) 1px, transparent 1px);
  background-size:
    1rem 1rem,
    1rem 1rem,
    3rem 3rem,
    3rem 3rem;
  background-position: 2rem 2rem;
}
.docs-demo-template .scroll-container {
  display: none;
}
.grid {
  display: flex;
}
.grid::before {
  pointer-events: none;
  opacity: 0.5;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: -1px;
  bottom: -1px;
}
.grid.medium {
  position: relative;
  width: 100%;
  height: 4rem;
}
.grid.large {
  width: 100%;
  height: 7rem;
}
.grid.medium.padded {
  padding: 1rem;
}
.grid.large.padded {
  padding: 2rem;
}
.scroll-container .grid.large {
  height: 12rem;
}
.scroll-container .padded {
  padding: 5rem 2rem 4rem;
}
.docs-demo-html .grid.padded .row.log {
  top: 1px;
  left: calc(7rem + 1px);
  width: calc(100% - 9rem - 1px);
  height: calc(3rem - 1px);
}
.docs-demo-html .scroll-section.padded .row.log {
  top: 1px;
  left: calc(9rem + 1px);
  width: calc(100% - 9rem - 1px);
  height: calc(3rem - 1px);
}
.docs-demo-html .scroll-section.padded .row.log .label,
.docs-demo-html .grid.padded .row.log .label {
  opacity: 0.75;
  top: 0.25rem;
  left: 0.25rem;
}
.scroll-container {
  overscroll-behavior: contain;
  position: absolute;
  top: -3.5rem;
  left: -1.5rem;
  width: calc(100% + 3rem);
  height: calc(100% + 5rem);
  border-radius: var(--br-l);
  mask-image: linear-gradient(rgba(0, 0, 0, 0.25), rgb(0, 0, 0) 4rem);
  scrollbar-width: thin;
  scrollbar-color: currentColor transparent;
}
.scroll-container .grid::before {
  opacity: 0;
}
.scroll-container.scroll-x {
  overflow-x: auto;
}
.scroll-container.scroll-y {
  overflow-y: auto;
}
.scroll-content {
  position: relative;
  display: flex;
  flex-direction: column;
}
.scroll-container.scroll-x > .scroll-content {
  width: 46rem;
}
.scroll-container.scroll-x.scroll-y > .scroll-content {
  width: 46rem;
  height: 36rem;
}
.scroll-container.scroll-y:not(.scroll-x) > .scroll-content {
  width: calc(100% - 1px);
}
.scroll-container.scroll-x:not(.scroll-y) > .scroll-content {
  flex-direction: row;
  justify-content: space-between;
  height: calc(100% - 1px);
}
.scroll-section {
  display: flex;
  align-items: center;
  width: 22rem;
  height: 12rem;
}
.scroll-section.sticky {
  position: sticky;
  z-index: 1;
  top: 0;
  left: 0;
}
.perspective {
  perspective: 400px;
}
.perspective .square,
.perspective .circle {
  transform-style: preserve-3d;
}
.draggable {
  display: flex;
  position: relative;
  z-index: 100;
}
.draggable:first-child:not(:last-child) {
  margin-right: 1rem;
}
.draggable::after {
  content: "";
  pointer-events: none;
  position: relative;
  align-self: center;
  margin: auto;
  display: block;
  width: 20px;
  height: 20px;
  background-image: radial-gradient(circle at center, #000 1px, transparent 0), radial-gradient(circle at center, #000 1px, transparent 0);
  background-size: 5px 5px;
}
.draggable.is-disabled {
  color: rgba(var(--rgb-red));
  opacity: 0.5;
}
.dotted-grid::after {
  opacity: 0.5;
  background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
  background-size: calc(0.5rem - 1px) calc(0.5rem - 1px);
  background-position: -3px -3px;
}
.docs-demo-html {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  bottom: 0;
  width: 19rem;
  margin-left: -9.5rem;
}
.docs-demo-template {
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
}
.docs-demo-html .row {
  position: relative;
  z-index: 2;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: 100%;
  height: 1.5rem;
  padding: 1px 0;
}
.docs-demo-html .col .row {
  flex-direction: column;
  align-items: flex-start;
}
.docs-demo-html .centered,
.docs-demo-html .col .row.centered {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.docs-demo-html .justified.row {
  justify-content: space-between;
}
.docs-demo-html .spaced-evenly.row {
  justify-content: space-evenly;
}
.docs-demo-html .medium.row:not(:last-child) {
  margin-bottom: 0.5rem;
}
.docs-demo-html .large.row:not(:last-child):first-child {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.docs-demo-html .grid .large.row:not(:last-child):first-child {
  margin-top: 2rem;
}
.docs-demo-html .x-large.row:not(:last-child) {
  margin-top: -0.5rem;
  margin-bottom: 0.5rem;
}
.docs-demo-html .col {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.docs-demo-html .half.col {
  flex: 0.5;
}
.docs-demo-html .particle,
.docs-demo-html [class*=square]:not([class*=grid]),
.docs-demo-html [class*=circle],
.docs-demo-html [class*=triangle] {
  z-index: 2;
  flex-shrink: 0;
  position: relative;
  width: calc(1.5rem - 2px);
  height: calc(1.5rem - 2px);
  margin-top: 1px;
  margin-left: 1px;
  background-color: currentColor;
}
.docs-demo-html [class*=square]:not([class*=grid]) {
  border-radius: var(--br-s);
}
.docs-demo-html [class*=circle] {
  border-radius: 50%;
}
.docs-demo-html [class*=triangle] {
  margin-left: -0.125rem;
  transform-origin: 50% 70%;
  -webkit-mask: url(../images/icons/triangle.svg) no-repeat 50% 50%;
  mask: url(../images/icons/triangle.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}
.docs-demo.is-active .docs-demo-html .particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: -0.375rem;
  margin-top: -0.375rem;
  will-change: transform;
  mix-blend-mode: plus-lighter;
  box-shadow: 0px 0px 1em 0px currentColor, 0px 0px 5em 0px currentColor;
}
.docs-demo-html .clock {
  position: relative;
  z-index: 2;
  position: relative;
  width: 4rem;
  height: 4rem;
  margin-left: 1px;
  border-radius: 50%;
  border: 0.25rem solid currentColor;
}
.docs-demo-html .clock:not(:last-child) {
  margin-bottom: 1rem;
}
.docs-demo-html .clock::after {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 1.625rem;
  width: 0.25rem;
  height: 1rem;
  border-radius: 0.125rem;
  background-color: currentColor;
}
.docs-demo-html button,
.docs-demo-html input[type=range] {
  height: 1.5rem;
  border-radius: var(--br-m);
}
.docs-demo-html .small.row {
  height: 1.5rem;
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.docs-demo-html .small .square,
.docs-demo-html .small .circle {
  width: 1.5rem;
  height: 1.5rem;
}
.docs-demo-html .medium.row {
  height: 2rem;
}
.docs-demo-html .medium .square,
.docs-demo-html .medium .circle,
.docs-demo-html .medium.pyramid .square,
.docs-demo-html .medium.pyramid .circle {
  width: calc(2rem - 1px);
  height: calc(2rem - 1px);
  margin-top: 1px;
  margin-left: 1px;
}
.docs-demo-html .pyramid .triangle {
  width: calc(2.5rem - 1px);
  height: calc(2.5rem - 1px);
  margin-top: -0.4rem;
  margin-left: calc(1rem - 3px);
  margin-right: 1rem;
  margin-bottom: -1px;
}
.docs-demo-html .large.row {
  height: 3rem;
}
.docs-demo-html .x-large.row {
  height: 4rem;
}
.docs-demo-html .large .square,
.docs-demo-html .large .circle,
.docs-demo-html .x-large .square,
.docs-demo-html .x-large .circle {
  width: 3rem;
  height: 3rem;
}
.docs-demo-html .pyramid {
  display: flex;
  flex-wrap: wrap;
  width: 4rem;
  margin-top: -1rem;
}
.docs-demo-html .align-left {
  justify-content: flex-start;
}
.docs-demo-html .align-right {
  justify-content: flex-end;
}
.docs-demo-html .align-center {
  justify-content: flex-end;
}
.docs-demo-html pre.row {
  pointer-events: none;
  position: relative;
  width: 100%;
  padding: 1rem;
  border-radius: var(--br-s);
}
.docs-demo-html pre::before,
.docs-demo-html pre::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.docs-demo-html pre::before {
  background-color: var(--hex-bg-1);
}
.docs-demo.is-active .docs-demo-html pre::before {
  background-color: rgba(var(--rgb-current-3), 1);
}
.docs-demo-html pre::after {
  opacity: 0.2;
  background-color: currentColor;
}
.docs-demo-html pre code {
  position: relative;
  z-index: 1;
  font-size: 14px;
  overflow: visible;
}
.docs-demo-html .caret {
  position: absolute;
  z-index: 1;
  top: 1rem;
  bottom: 1rem;
  left: 1rem;
  width: 2px;
  height: 1rem;
  font-size: 14px;
  background-color: currentColor;
}
.docs-demo-html .row .label,
.docs-demo-html .row .value {
  position: relative;
  font-family: var(--font-code);
  font-size: 0.875em;
  font-weight: normal;
  line-height: 1.25em;
  line-height: 1;
}
.docs-demo-html .row .value {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  align-self: flex-end;
  white-space: nowrap;
  text-align: right;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
}
.docs-demo-html .row .value.lcd {
  font-family: "Digital-7", monospace;
  font-size: 2.75rem;
  line-height: 2rem;
  letter-spacing: 0;
}
.docs-demo-html .row .label {
  opacity: 0.6;
  font-size: 0.75rem;
  letter-spacing: -0.025em;
  white-space: pre;
  line-height: 1.3;
}
.docs-demo-html .row .label.padded {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.docs-demo-html .row.log {
  position: absolute;
  top: 0;
  left: 5rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: stretch;
  z-index: 1;
  width: calc(100% - 10rem);
  padding: 0.375rem 0;
}
.docs-demo-html .col .row.log {
  position: relative;
  top: auto;
  left: auto;
  margin: auto;
  width: calc(100% - 0.5rem);
}
.docs-demo-html .row.log .label {
  position: absolute;
  top: -1rem;
  left: 0rem;
}
.docs-demo-html .text-l,
.docs-demo-html .text-xl {
  display: block;
  color: currentColor;
  width: 100%;
  padding-left: 0.125rem;
  padding-right: 0.125rem;
  will-change: transform;
  font-kerning: none;
  font-variant-ligatures: none;
  text-rendering: optimizeSpeed;
}
.docs-demo-html .text-xl {
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  line-height: 1.35;
}
.docs-demo-html .viewer {
  width: 100%;
}
.docs-demo-html .tween-viewer {
  align-items: flex-start;
  padding: 0;
}
.docs-demo-html .tl-viewer {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  margin-top: 9px;
  width: calc(100% - 1px);
  height: 1.75rem !important;
  background-size: 33.33% calc(100% - 1.25rem);
  background-repeat: no-repeat;
  border-left: 1px solid;
  border-right: 1px solid;
  border-color: rgba(var(--rgb-fg-1), 0.2);
}
.docs-demo.is-active .docs-demo-html .tl-viewer {
  border-color: rgba(var(--rgb-current-1), 0.2);
}
.docs-demo-html .tween-viewer.medium.row:not(:last-child) {
  margin-top: 0.25rem;
  margin-bottom: 0;
}
.docs-demo-template .tl-viewer,
.docs-demo-template .tween-viewer {
  opacity: 0;
}
.docs-demo-html .tl-viewer::after,
.docs-demo-html .tween-viewer::after {
  opacity: 0;
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  flex-shrink: 0;
  transform: translateX(var(--x));
  background-color: rgba(var(--rgb-current-1), 1);
  color: rgba(var(--rgb-current-3), 1);
  box-shadow: 0 0 0 2px currentColor;
}
.docs-demo.is-active .docs-demo-html .tl-viewer::after,
.docs-demo.is-active .docs-demo-html .tween-viewer::after {
  opacity: 1;
}
.docs-demo-html .tl-viewer::after {
  top: 0px;
  width: 2px;
  height: 100%;
  border-radius: 1px;
}
.docs-demo-html .tween-viewer::after {
  top: calc(1.625rem - 1px);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.5rem;
}
.docs-demo-html .tween-viewer.row span {
  position: relative;
  top: 0.5rem;
  z-index: 1;
  display: block;
  padding: 0;
}
.docs-demo-html .tl-viewer .tl-child,
.docs-demo-html .tween-viewer span::after {
  flex-shrink: 0;
  display: block;
  background-color: currentColor;
  width: 100%;
  height: 0.5rem;
  width: calc(100% - 2px);
}
.docs-demo-html .tl-viewer .tl-child {
  position: relative;
  opacity: 0.5;
}
.docs-demo-html .tl-viewer .tl-child:not(:last-child) {
  margin-bottom: 1px;
}
.docs-demo-html .tl-viewer .tl-child[data-label]::before {
  content: attr(data-label);
  display: block;
  position: absolute;
  left: 4px;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  white-space: pre;
}
.docs-demo-html .tl-viewer .tl-child[data-label]::after {
  content: "";
  display: block;
  position: absolute;
  left: -1px;
  width: 1px;
  height: calc(2.5rem - 2px);
  border-radius: 1px;
  background-color: currentColor;
}
.docs-demo-html .tl-viewer .tl-child:nth-child(1)::before {
  top: calc(-1rem + 4px);
}
.docs-demo-html .tl-viewer .tl-child:nth-child(2)::before {
  top: calc(-1.5rem + 3px);
}
.docs-demo-html .tl-viewer .tl-child:nth-child(3)::before {
  top: calc(-2rem + 2px);
}
.docs-demo-html .tl-viewer .tl-child:nth-child(1)::after {
  top: calc(-1rem + 4px);
}
.docs-demo-html .tl-viewer .tl-child:nth-child(2)::after {
  top: calc(-1.5rem + 4px - 1px);
}
.docs-demo-html .tl-viewer .tl-child:nth-child(3)::after {
  top: calc(-2rem + 4px - 2px);
}
.docs-demo-html .viewer span::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(1rem + 1px);
}
.docs-demo-html .viewer span:first-child::after {
  border-radius: var(--br-s) 0 0 var(--br-s);
}
.docs-demo-html .viewer span:last-child::after {
  border-radius: 0 var(--br-s) var(--br-s) 0;
}
.docs-demo-html .tl-viewer .tl-child,
.docs-demo-html .viewer span:first-child:last-child::after {
  border-radius: var(--br-s);
}
.docs-demo-html .tl-viewer .tl-child span {
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -1px;
  left: -11px;
  width: 8px;
  height: 8px;
  border-radius: 0px;
  transform: none !important;
}
.docs-demo.is-active .tl-viewer .tl-child span {
  color: rgba(var(--rgb-current-1), 1);
}
.docs-demo-html .tl-viewer .tl-child [class*=square]:not([class*=grid]) {
  border-radius: 1px;
}
.docs-demo-html .tl-viewer .tl-child [class*=circle] {
  border-radius: 4px;
}
.docs-demo-html .tl-viewer .tl-child [class*=triangle] {
  top: -1px;
  left: -8px;
  width: 9px;
  height: 8px;
}
.docs-demo-html .controls {
  position: relative;
  display: flex;
  justify-content: center;
  width: calc(100% + 2rem);
  margin-left: -1rem;
  margin-right: -1rem;
  margin-bottom: -1.5rem;
}
.absolute.controls {
  position: absolute;
  width: 50%;
  margin-left: 50%;
  margin-bottom: 0px;
  bottom: 0;
  transform: translateX(-50%);
}
.docs-demo-template .controls,
.docs-demo-template .label,
.docs-demo-template .log,
.docs-demo-template .viewer {
  pointer-events: none;
  opacity: 0;
}
.docs-demo-html .controls button,
.docs-demo-html input[type=range] {
  flex: 1;
  position: relative;
  color: currentColor;
  min-width: 5rem;
  height: 2rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  background-color: transparent;
}
.docs-demo-html .controls button {
  border-radius: var(--br-m);
  font-family: var(--font-code);
  font-size: var(--text-xxs);
  font-weight: bold;
  text-transform: uppercase;
  max-width: 50%;
  cursor: pointer;
}
.absolute.controls button {
  max-width: 100%;
}
.docs-demo-html .controls button::before,
.docs-demo-html .controls button::after {
  content: "";
  opacity: 0.075;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  border-radius: inherit;
}
.docs-demo.is-active .docs-demo-html .controls button {
  color: rgba(var(--rgb-current-1), 0.8);
  background-color: var(--hex-current-5);
}
.docs-demo.is-active .docs-demo-html .controls button:hover {
  color: var(--hex-current-1);
  background-color: var(--hex-current-3);
}
.docs-demo.is-active .docs-demo-html .controls button:active {
  color: rgba(var(--rgb-current-1), 0.8);
  background-color: var(--hex-current-3);
  transform: scaleX(0.99) scaleY(0.98);
}
.docs-demo-html input[type=range]:hover {
  cursor: grab;
}
.docs-demo-html input[type=range]:active {
  cursor: grabbing;
}
.docs-demo-html input[type=range]::before {
  opacity: 0.075;
  transition: opacity 0.25s ease;
}
.docs-demo-html input[type=range]::after {
  color: var(--hex-fg-4);
  background: currentColor;
  padding: calc(1rem - 1px) 15px;
  background-clip: content-box;
}
.docs-demo.is-active .docs-demo-html input[type=range]::after {
  color: var(--hex-current-2);
}
.docs-demo-html .controls button:hover::before,
.docs-demo-html input[type=range]:hover::before,
.docs-demo-html input[type=range]:active::before {
  opacity: 0.175;
  transition-duration: 0s;
}
.docs-demo-html input[type=range] {
  padding: 0;
}
.docs-demo.is-active .docs-demo-html button[disabled],
.docs-demo.is-active .docs-demo-html input[type=range][disabled] {
  pointer-events: none;
  opacity: 0.5;
}