@charset "UTF-8";
:root {
  --dark-h: 267.8571428571deg;
  --dark-s: 93.3333333333%;
  --dark-l: 5.8823529412%;
  --dark: hsl(
    var(--dark-hue, 267.8571428571deg),
    var(--dark-saturation, 93.3333333333%),
    var(--dark-lightness, 5.8823529412%)
  );
  --dark-text: #e4cefd;
  --light-h: 55.3846153846deg;
  --light-s: 100%;
  --light-l: 97.4509803922%;
  --light: hsl(
    var(--light-hue, 55.3846153846deg),
    var(--light-saturation, 100%),
    var(--light-lightness, 97.4509803922%)
  );
  --light-text: #332f00;
  --primary-h: 272.2388059701deg;
  --primary-s: 31.7535545024%;
  --primary-l: 41.3725490196%;
  --primary: hsl(
    var(--primary-hue, 272.2388059701deg),
    var(--primary-saturation, 31.7535545024%),
    var(--primary-lightness, 41.3725490196%)
  );
  --primary-text: #e6ddee;
  --secondary-h: 193.3333333333deg;
  --secondary-s: 32.7272727273%;
  --secondary-l: 43.137254902%;
  --secondary: hsl(
    var(--secondary-hue, 193.3333333333deg),
    var(--secondary-saturation, 32.7272727273%),
    var(--secondary-lightness, 43.137254902%)
  );
  --secondary-text: #ddeaee;
  --error-h: 7.1641791045deg;
  --error-s: 85.5319148936%;
  --error-l: 46.0784313725%;
  --error: hsl(
    var(--error-hue, 7.1641791045deg),
    var(--error-saturation, 85.5319148936%),
    var(--error-lightness, 46.0784313725%)
  );
  --error-text: #fbd5d0;
  --warning-h: 34.9253731343deg;
  --warning-s: 85.5319148936%;
  --warning-l: 53.9215686275%;
  --warning: hsl(
    var(--warning-hue, 34.9253731343deg),
    var(--warning-saturation, 85.5319148936%),
    var(--warning-lightness, 53.9215686275%)
  );
  --warning-text: #2f1d04;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-h: 267.8571428571deg;
    --background-s: 93.3333333333%;
    --background-l: 5.8823529412%;
    --background: hsl(
      var(--background-hue, 267.8571428571deg),
      var(--background-saturation, 93.3333333333%),
      var(--background-lightness, 5.8823529412%)
    );
    --background-text: #e4cefd;
    --foreground-h: 55.3846153846deg;
    --foreground-s: 100%;
    --foreground-l: 97.4509803922%;
    --foreground: hsl(
      var(--foreground-hue, 55.3846153846deg),
      var(--foreground-saturation, 100%),
      var(--foreground-lightness, 97.4509803922%)
    );
    --foreground-text: #332f00;
    --background-10: #e7e5dd;
    --background-25: #c3bfbd;
    --background-50: #878088;
    --background-75: #4a4052;
    --background-90: #261a32;
    --foreground-10: #261a32;
    --foreground-25: #4a4052;
    --foreground-50: #878088;
    --foreground-75: #c3bfbd;
    --foreground-90: #e7e5dd;
    --dark-10: #0e011d;
    --dark-25: #0e011d;
    --dark-50: #0e011d;
    --dark-75: #0e011d;
    --dark-90: #0e011d;
    --light-10: #261a32;
    --light-25: #4a4052;
    --light-50: #878088;
    --light-75: #c3bfbd;
    --light-90: #e7e5dd;
    --primary-10: #170828;
    --primary-25: #261339;
    --primary-50: #3d2554;
    --primary-75: #553670;
    --primary-90: #634180;
    --secondary-10: #140e29;
    --secondary-25: #1d213a;
    --secondary-50: #2c4258;
    --secondary-75: #3b6275;
    --secondary-90: #447586;
    --error-10: #22051c;
    --error-25: #410b1a;
    --error-50: #741517;
    --error-75: #a71f14;
    --error-90: #c62512;
    --warning-10: #24101e;
    --warning-25: #46271f;
    --warning-50: #7e4e21;
    --warning-75: #b67423;
    --warning-90: #d88b24;
  }
}
body[color-mode=dark] {
  --background-h: 267.8571428571deg;
  --background-s: 93.3333333333%;
  --background-l: 5.8823529412%;
  --background: hsl(
    var(--background-hue, 267.8571428571deg),
    var(--background-saturation, 93.3333333333%),
    var(--background-lightness, 5.8823529412%)
  );
  --background-text: #e4cefd;
  --foreground-h: 55.3846153846deg;
  --foreground-s: 100%;
  --foreground-l: 97.4509803922%;
  --foreground: hsl(
    var(--foreground-hue, 55.3846153846deg),
    var(--foreground-saturation, 100%),
    var(--foreground-lightness, 97.4509803922%)
  );
  --foreground-text: #332f00;
  --background-10: #e7e5dd;
  --background-25: #c3bfbd;
  --background-50: #878088;
  --background-75: #4a4052;
  --background-90: #261a32;
  --foreground-10: #261a32;
  --foreground-25: #4a4052;
  --foreground-50: #878088;
  --foreground-75: #c3bfbd;
  --foreground-90: #e7e5dd;
  --dark-10: #0e011d;
  --dark-25: #0e011d;
  --dark-50: #0e011d;
  --dark-75: #0e011d;
  --dark-90: #0e011d;
  --light-10: #261a32;
  --light-25: #4a4052;
  --light-50: #878088;
  --light-75: #c3bfbd;
  --light-90: #e7e5dd;
  --primary-10: #170828;
  --primary-25: #261339;
  --primary-50: #3d2554;
  --primary-75: #553670;
  --primary-90: #634180;
  --secondary-10: #140e29;
  --secondary-25: #1d213a;
  --secondary-50: #2c4258;
  --secondary-75: #3b6275;
  --secondary-90: #447586;
  --error-10: #22051c;
  --error-25: #410b1a;
  --error-50: #741517;
  --error-75: #a71f14;
  --error-90: #c62512;
  --warning-10: #24101e;
  --warning-25: #46271f;
  --warning-50: #7e4e21;
  --warning-75: #b67423;
  --warning-90: #d88b24;
}

@media (prefers-color-scheme: light) {
  :root {
    --foreground-h: 267.8571428571deg;
    --foreground-s: 93.3333333333%;
    --foreground-l: 5.8823529412%;
    --foreground: hsl(
      var(--foreground-hue, 267.8571428571deg),
      var(--foreground-saturation, 93.3333333333%),
      var(--foreground-lightness, 5.8823529412%)
    );
    --foreground-text: #e4cefd;
    --background-h: 55.3846153846deg;
    --background-s: 100%;
    --background-l: 97.4509803922%;
    --background: hsl(
      var(--background-hue, 55.3846153846deg),
      var(--background-saturation, 100%),
      var(--background-lightness, 97.4509803922%)
    );
    --background-text: #332f00;
    --foreground-10: #e7e5dd;
    --foreground-25: #c3bfbd;
    --foreground-50: #878088;
    --foreground-75: #4a4052;
    --foreground-90: #261a32;
    --background-10: #261a32;
    --background-25: #4a4052;
    --background-50: #878088;
    --background-75: #c3bfbd;
    --background-90: #e7e5dd;
    --dark-10: #e7e5dd;
    --dark-25: #c3bfbd;
    --dark-50: #878088;
    --dark-75: #4a4052;
    --dark-90: #261a32;
    --light-10: #fffef2;
    --light-25: #fffef2;
    --light-50: #fffef2;
    --light-75: #fffef2;
    --light-90: #fffef2;
    --primary-10: #f0ece8;
    --primary-25: #dad1d8;
    --primary-50: #b6a3bf;
    --primary-75: #9176a5;
    --primary-90: #7b5a95;
    --secondary-10: #edf2e8;
    --secondary-25: #d2dfda;
    --secondary-50: #a5c0c2;
    --secondary-75: #77a1aa;
    --secondary-90: #5c8e9c;
    --error-10: #fbe9dc;
    --error-25: #f6c9ba;
    --error-50: #ed9482;
    --error-75: #e35e49;
    --error-90: #de3e28;
    --warning-10: #fdf4de;
    --warning-25: #fbe5bf;
    --warning-50: #f7cc8c;
    --warning-75: #f2b358;
    --warning-90: #f0a43a;
  }
}
body[color-mode=light] {
  --foreground-h: 267.8571428571deg;
  --foreground-s: 93.3333333333%;
  --foreground-l: 5.8823529412%;
  --foreground: hsl(
    var(--foreground-hue, 267.8571428571deg),
    var(--foreground-saturation, 93.3333333333%),
    var(--foreground-lightness, 5.8823529412%)
  );
  --foreground-text: #e4cefd;
  --background-h: 55.3846153846deg;
  --background-s: 100%;
  --background-l: 97.4509803922%;
  --background: hsl(
    var(--background-hue, 55.3846153846deg),
    var(--background-saturation, 100%),
    var(--background-lightness, 97.4509803922%)
  );
  --background-text: #332f00;
  --foreground-10: #e7e5dd;
  --foreground-25: #c3bfbd;
  --foreground-50: #878088;
  --foreground-75: #4a4052;
  --foreground-90: #261a32;
  --background-10: #261a32;
  --background-25: #4a4052;
  --background-50: #878088;
  --background-75: #c3bfbd;
  --background-90: #e7e5dd;
  --dark-10: #e7e5dd;
  --dark-25: #c3bfbd;
  --dark-50: #878088;
  --dark-75: #4a4052;
  --dark-90: #261a32;
  --light-10: #fffef2;
  --light-25: #fffef2;
  --light-50: #fffef2;
  --light-75: #fffef2;
  --light-90: #fffef2;
  --primary-10: #f0ece8;
  --primary-25: #dad1d8;
  --primary-50: #b6a3bf;
  --primary-75: #9176a5;
  --primary-90: #7b5a95;
  --secondary-10: #edf2e8;
  --secondary-25: #d2dfda;
  --secondary-50: #a5c0c2;
  --secondary-75: #77a1aa;
  --secondary-90: #5c8e9c;
  --error-10: #fbe9dc;
  --error-25: #f6c9ba;
  --error-50: #ed9482;
  --error-75: #e35e49;
  --error-90: #de3e28;
  --warning-10: #fdf4de;
  --warning-25: #fbe5bf;
  --warning-50: #f7cc8c;
  --warning-75: #f2b358;
  --warning-90: #f0a43a;
}

:root {
  --borderRadius: 0.5em;
  --baseSize: 16px;
  --space: 1em;
  --space-s: 0.5em;
  --space-l: 2em;
  --max-width: max(75ch, 720px);
}

:root {
  --primaryFontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --codeFontFamily: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}

@media screen and (min-width: 0px) and (max-width: 720px) {
  .footer .navigation {
    padding: 1em;
  }
}
.footer .navigation__link {
  padding: 0.5em;
}
.footer .navigation .button {
  display: none;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100%;
  font-family: var(--primaryFontFamily, '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"');
  position: relative;
  background-color: var(--background);
  color: var(--foreground);
}

.section {
  position: relative;
}
.section > .container {
  max-width: var(--max-width, max(75ch, 720px));
  margin-left: auto;
  margin-right: auto;
}
.section > .container + .container {
  margin-top: 1em;
}
.section--h-3-4 {
  min-height: 75vh;
}

.main {
  filter: blur(0);
  transform: translate(0);
  position: relative;
  transition: transform var(--transition), filter var(--transition);
}

.header {
  position: relative;
  z-index: 10;
}
@media screen and (min-width: 720px) {
  .header {
    padding: var(--space, 1em);
  }
}
.header--sticky {
  position: sticky;
  top: 0;
}
.header__container {
  display: flex;
  justify-content: space-between;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  align-items: center;
  background-color: var(--background50);
  backdrop-filter: blur(1em);
  border-bottom: 2px solid var(--foreground-10);
}
@media screen and (min-width: 720px) {
  .header__container {
    border-radius: var(--borderRadius, 0.5em);
    border: 2px solid var(--foreground-10, transparent);
    padding: var(--space, 1em);
  }
}
.header__container--hide {
  transform: translateY(-50%);
  opacity: 0;
}
.header__container--show {
  transform: translateY(0%);
  opacity: 1;
}
.header__container--off-top {
  --border-color: var(--foreground-10);
}
.header__container--on-top {
  --border-color: transparent;
}

.header .logo {
  font-weight: bold;
  color: currentColor;
  text-decoration: none;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  .header .logo {
    padding: var(--space, 1em);
  }
}
.header .logo--image-only ~ span {
  display: none;
}
.header .logo img {
  max-width: 5em;
  max-height: 5em;
}
.header .logo__text {
  padding: 1em;
}
.header .logo svg {
  display: block;
  height: 100%;
  min-height: 3em;
  max-height: 5em;
  width: auto;
  max-width: 8em;
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  .header .logo svg {
    min-height: 2em;
    max-height: 2em;
  }
}
.header .logo svg rect:not([fill]),
.header .logo svg polygon:not([fill]),
.header .logo svg path:not([fill]) {
  fill: currentColor;
}

.footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space, 1em);
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  .footer {
    justify-content: start;
  }
}

.navigation {
  position: relative;
  display: flex;
}
.navigation.center {
  justify-content: center;
  align-items: center;
}
.navigation.align-right ul ul {
  right: 0;
}
.navigation.align-right ul ul {
  left: 0;
}
.navigation.align-center ul ul {
  left: 50%;
  transform: translateX(-50%);
}
.navigation__list {
  display: flex;
  background-color: inherit;
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  .navigation__list {
    flex-direction: column;
  }
}
@media screen and (min-width: 720px) {
  .header .navigation__list--sub {
    border-radius: var(--borderRadius, 0.5em);
    outline: 2px solid var(--foreground-10);
    background-color: var(--foreground-10);
    position: absolute;
    left: 50%;
    top: calc(50% + 2em);
    flex-direction: column;
    padding: 0.75em;
    opacity: 0;
    backdrop-filter: blur(0.5em);
    pointer-events: none;
    transform-origin: 50% 0;
    transform: scale(0.85) translateX(var(--nav-translate-x, -50%));
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    z-index: 2;
  }
  .header .navigation__list--sub::before {
    content: "";
    width: 1em;
    height: 1em;
    position: absolute;
    top: 0;
    left: 50%;
    border-top-right-radius: var(--borderRadius, 0.5em);
    display: block;
    background-color: var(--foreground-10);
    transform: translateX(-50%) translateY(calc(-50% - 2px)) rotate(-45deg);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
}
.footer .navigation__list--sub {
  display: none;
}
.navigation__item {
  position: relative;
}
.navigation__item:last-of-type .navigation__list--sub {
  left: auto;
  right: 0;
  --nav-translate-x: 0;
}
.navigation__item--parent > .navigation__link .navigation__icon {
  color: var(--primary, #6c488b);
}
.navigation__item--parent > .navigation__link::after {
  background-color: var(--navigation-dot-parent, var(--primary, #6c488b));
}
.navigation__item--current > .navigation__link .navigation__icon {
  color: var(--secondary, #4a8292);
}
.navigation__item--current > .navigation__link::after {
  background-color: var(--navigation-dot-current, var(--secondary, #4a8292));
}
@media screen and (min-width: 720px) {
  .header .navigation__item:hover .navigation__list, .header .navigation__item:focus-within .navigation__list {
    opacity: 1;
    pointer-events: all;
    transform: scale(1) translateX(var(--nav-translate-x, -50%));
  }
}
.navigation__icon {
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.5em;
  z-index: 2;
  position: relative;
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  .navigation__icon {
    width: 2.5em;
    height: 2.5em;
  }
  .navigation__icon + .navigation__text {
    line-height: 2.5;
  }
}
.navigation__text {
  position: relative;
  z-index: 2;
  display: block;
  transition: transform var(--transition);
  line-height: 1.5;
  white-space: nowrap;
  font-family: var(--text, primaryFontFamily);
}
.navigation__link {
  padding: var(--space-s, 0.5em);
  text-decoration: none;
  position: relative;
  color: currentColor;
  display: flex;
  transition: transform var(--transition);
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  .navigation__link--sub {
    font-size: 0.875em;
    opacity: 0.75;
    padding: 0 var(--space-s, 0.5em);
  }
}
@media screen and (min-width: 720px) {
  .navigation__link--sub {
    padding: 0.5em;
  }
}
.navigation__link::after {
  content: "";
  display: block;
  width: 0.25em;
  height: 0.25em;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
}
@media screen and (max-width: 1280px) {
  .navigation__link::after {
    left: 50%;
    top: calc(50% + 0.5em);
    transform: translate(-50%, 50%);
  }
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  .navigation__link::after {
    left: 1em;
    top: 50%;
    transform: translate(-200%, -50%);
  }
}
.navigation__link::before {
  content: "";
  display: block;
  background-color: var(--primary10);
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  border-radius: var(--borderRadius, 0.5em);
  z-index: 1;
  opacity: 0;
  transition: transform var(--transition);
}
.navigation__link:hover {
  transform: scale(1.1);
  text-decoration: none;
}

.navigation {
  /*
    * Inactive Mobile Header Navigation Toggle
    */
  /*
    * Inactive Mobile Header Navigation Background
    */
  /*
    * Inactive Mobile Header Navigation Control
    */
}
.navigation__toggle {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 11;
  border-radius: var(--borderRadius, 0.5em);
  width: var(--space-l, 2em);
  height: var(--space-l, 2em);
  align-items: center;
  justify-content: center;
  display: flex;
  transition: background var(--transition), border-radius var(--transition);
  color: var(--foreground);
  opacity: 0.5;
}
.navigation__toggle::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  transition: transform var(--transition);
}
.navigation__toggle:focus::before, .navigation__toggle:hover::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.navigation__toggle:hover {
  opacity: 1;
}
@media screen and (max-width: 1280px) {
  .navigation__toggle {
    display: none;
  }
}
.navigation__toggle span {
  display: block;
  width: calc(var(--space, 1em) * 0.75);
  height: 2px;
  background-color: currentColor;
  position: relative;
}
.navigation__toggle span::before, .navigation__toggle span::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: inherit;
}
.navigation__toggle span::before {
  transform: translateY(-400%);
}
.navigation__toggle span::after {
  transform: translateY(300%);
}
.navigation__toggle span, .navigation__toggle span:before, .navigation__toggle span:after {
  transition: transform 0.3s;
}
.navigation__background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background-color: var(--background);
  opacity: 0;
  z-index: 5;
  transition: opacity 0.3s ease-in-out;
}
.navigation__input {
  position: absolute;
  width: 0;
  height: 0;
  clip-path: inset(100% 100% 100% 100%);
  opacity: 0;
  /*
    * Inactive Mobile Header Navigation
    */
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  .navigation__input ~ .navigation, .navigation__input ~ .header .navigation {
    background-color: var(--background90);
    color: var(--foreground);
    height: auto;
    min-width: 50vw;
    height: 100vh;
    right: 0;
    top: 0;
    padding: var(--space-s, 0.5em);
    padding-top: calc(var(--space, 1em) * 2);
    transition: clip-path var(--transition);
    opacity: 1;
    clip-path: inset(0 0 0 100%);
    align-items: flex-start;
    justify-content: start;
    transform-origin: 50% 0;
    position: absolute;
    pointer-events: none;
    border-left: 1px solid var(--foreground-25);
  }
  .navigation__input ~ .navigation .navigation__link, .navigation__input ~ .header .navigation .navigation__link {
    width: auto;
  }
  .navigation__input ~ .navigation .navigation__link::before, .navigation__input ~ .header .navigation .navigation__link::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background-color: var(--background90);
  }
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  .navigation__input:checked {
    /*
    * Active Mobile Header Navigation
    */
    /*
    * Active Mobile Header Navigation Background
    */
    /*
    * Active Mobile Header Navigation Toggle
    */
  }
  .navigation__input:checked ~ .navigation, .navigation__input:checked ~ .header .navigation {
    clip-path: inset(0 0 0 0);
    pointer-events: all;
  }
  .navigation__input:checked ~ .navigation__background {
    pointer-events: all;
    opacity: 0.75;
  }
  .navigation__input:checked + .navigation__toggle {
    color: var(--foreground);
  }
  .navigation__input:checked + .navigation__toggle::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    background-color: var(--background20);
  }
  .navigation__input:checked + .navigation__toggle span {
    transform: rotate(45deg);
  }
  .navigation__input:checked + .navigation__toggle span::before {
    transform: translateY(0%) rotate(-90deg);
  }
  .navigation__input:checked + .navigation__toggle span::after {
    transform: translateY(0%) rotate(90deg);
  }
}

.archive {
  position: relative;
  background-color: var(--background);
  color: var(--foreground);
  background-image: linear-gradient(to bottom, var(--primary-10), var(--background));
  /*
    * Articles
    */
  /*
    * Blog
    */
}
.archive__link {
  display: block;
  border-radius: var(--borderRadius, 0.5em);
  text-decoration: none;
  color: currentColor;
}
.archive__date {
  font-variant-numeric: tabular-nums;
  opacity: 0.5;
  display: block;
  font-size: 0.875em;
}
.archive__date span + span {
  margin-left: 0.5ch;
}
.archive--articles .archive__list {
  padding: var(--space-l, 2em) 0;
  display: grid;
  gap: var(--space-l, 2em);
  width: 100%;
}
@media screen and (min-width: 720px) {
  .archive--articles .archive__list {
    grid-template-columns: 1fr 1fr 1fr;
    position: relative;
  }
}
.archive--articles .archive__text {
  font-size: 1.5em;
  display: block;
  font-weight: bold;
  transition: var(--transition);
}
.archive--articles .archive__excerpt {
  opacity: 0.5;
}
.archive--articles .archive__excerpt, .archive--articles .archive__excerpt:first-of-type {
  font-size: 0.875em;
}
.archive--articles .archive__date {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  margin: 0.5em;
  font-size: 0.8em;
  font-weight: bold;
  background-color: var(--background);
  color: currentColor;
  padding: 0.5em;
  border-radius: var(--borderRadius, 0.5em);
}
.archive--articles .archive__info {
  display: block;
  padding: var(--space, 1em);
}
.archive--articles .archive__item {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--borderRadius, 0.5em);
  border: 2px solid var(--foreground-10);
}
.archive--articles .archive__item:hover {
  background-color: var(--background);
  border-color: var(--background);
}
.archive--articles .archive__item:hover .archive__date {
  opacity: 1;
}
.archive--articles .archive__item:focus {
  outline: none;
}
.archive--articles .archive__tags {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 0;
  opacity: 0.25;
  transition: opacity var(--transition);
}
@media screen and (max-width: 1280px) {
  .archive--articles .archive__tags {
    margin-top: calc(var(--space, 1em) * -1);
  }
}
.archive--articles .archive__tags:hover {
  opacity: 1;
}
.archive--articles .archive__image {
  width: 100%;
  height: 10em;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: var(--borderRadius, 0.5em);
}
.archive--articles .archive__image--svg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.archive--articles .archive__image--svg svg {
  color: var(--secondary, #4a8292);
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.archive--articles .archive__image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.archive--articles .archive__image + .archive__info {
  margin-top: 1em;
}
@media screen and (max-width: 1280px) {
  .archive--articles .archive__image + .archive__date + .archive__text {
    margin-top: 1em;
  }
}
.archive--articles .archive__image--empty {
  position: relative;
  background-color: var(--background10);
}
.archive--articles .archive__image--empty::before {
  content: "?";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  font-size: 2em;
  font-weight: bold;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  background-color: var(--background);
  border-radius: var(--borderRadius, 0.5em);
  color: var(--background10);
}
.archive--articles .archive__image--empty[data-icon]::before {
  content: attr(data-icon);
}
.archive--articles .archive__link {
  width: 100%;
}
.archive--articles .archive__link + .archive__tags {
  margin-top: 0.5em;
}
.archive--blog .archive__list {
  display: flex;
  flex-direction: column;
}
.archive--blog .archive__excerpt {
  opacity: 0.5;
}
.archive--blog .archive__excerpt, .archive--blog .archive__excerpt:first-of-type {
  font-size: 0.875em;
}
.archive--blog .archive__title {
  position: relative;
}
.archive--blog .archive__link {
  position: relative;
  z-index: 1;
  line-height: 1.75;
  display: flex;
  transition: transform var(--transition);
}
.archive--blog .archive__link:focus {
  outline: none;
}
.archive--blog .archive__link:hover .archive__excerpt {
  opacity: 0.75;
}
.archive--blog .archive__item {
  position: relative;
}
.archive--blog .archive__item + .archive__item {
  margin-top: var(--space, 1em);
}
.archive--blog .archive__item:not(:hover):focus-within {
  background-color: var(--background);
}
.archive--blog .archive__info {
  display: flex;
  flex-direction: column;
}
.archive--blog .archive__tags {
  opacity: 0.25;
}
.archive--blog .archive__tags:hover {
  opacity: 1;
}
.archive--blog .archive__image,
.archive--blog .archive__image img {
  width: 4em;
  height: 4em;
  border-radius: var(--borderRadius, 0.5em);
  object-fit: cover;
}
@media screen and (max-width: 1280px) {
  .archive--blog .archive__image:not(.archive__image--empty) + .archive__date {
    margin-left: calc(var(--space, 1em) / 2);
  }
}
.archive--blog .archive__image--empty {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  .archive--blog .archive__image {
    float: left;
    margin-right: calc(var(--space, 1em) / 2);
  }
}
.archive--blog .archive__image--svg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.archive--blog .archive__image--svg svg {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}

.tags {
  border-top: 1px solid var(--foreground10);
  border-bottom: 1px solid var(--foreground10);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.25;
  transition: opacity var(--transition);
}
.tags:hover {
  opacity: 1;
}

main > section:first-child p:first-of-type {
  font-size: 1.2em;
}

.content {
  padding: var(--space-l, 2em) 0;
}

.content table {
  width: calc(100% + 1em);
  margin-left: -0.5em;
  color: currentColor;
  border-collapse: collapse;
}
.content table.middle th,
.content table.middle td {
  vertical-align: middle;
}
.content table th,
.content table td {
  vertical-align: top;
  text-align: left;
  padding: 1em 0.5em;
}
.content table th {
  font-weight: var(--text-bold, bold);
}
.content table thead tr,
.content table tbody tr:last-child {
  border-bottom: 1px solid var(--foreground-10);
}
.content table tr + tr {
  border-top: 1px solid var(--foreground-10);
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  .content table.wrap thead {
    display: none;
  }
  .content table.wrap tr {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .content table.wrap tr td {
    display: block;
  }
  .content table.wrap tr td::before {
    width: 33.33%;
    display: block;
    color: var(--foreground-50);
    font-size: 0.875em;
    line-height: 1.5;
    content: attr(data-label);
  }
}

.content ul:not([class]) + ol, .content ul:not([class]) + ul,
.content ol:not([class]) + ol,
.content ol:not([class]) + ul {
  margin-top: 1em;
}
.content ul:not([class]) ul:not([class]),
.content ul:not([class]) ol:not([class]),
.content ol:not([class]) ul:not([class]),
.content ol:not([class]) ol:not([class]) {
  padding-left: 1em;
}
.content ul:not([class]) li,
.content ol:not([class]) li {
  line-height: 1.5em;
  font-size: 1em;
}
.content ul:not([class]) li::before,
.content ol:not([class]) li::before {
  padding-right: 0.5em;
}
.content ul:not([class]) li + li,
.content ol:not([class]) li + li {
  margin-top: 0.5em;
}
.content ul:not([class]) > li::before {
  content: "—";
}
.content ol:not([class]) {
  counter-reset: list;
}
.content ol:not([class]) ol {
  counter-reset: sublist;
}
.content ol:not([class]) ol > li {
  counter-increment: sublist;
}
.content ol:not([class]) ol > li::before {
  content: counter(list) "." counter(sublist) ".";
}
.content ol:not([class]) ol > li > ol {
  counter-reset: subsublist;
}
.content ol:not([class]) ol > li > ol > li {
  counter-increment: subsublist;
}
.content ol:not([class]) ol > li > ol > li::before {
  content: counter(list) "." counter(sublist) "." counter(subsublist) ".";
}
.content ol:not([class]) > li {
  counter-increment: list;
}
.content ol:not([class]) > li::before {
  font-variant-numeric: tabular-nums;
  content: counter(list) ".";
}

.content svg path:not([class]):not([style]):not([fill]),
.content svg rect:not([class]):not([style]):not([fill]),
.content svg polygon:not([class]):not([style]):not([fill]),
.content svg line:not([class]):not([style]):not([fill]),
.content svg polyline:not([class]):not([style]):not([fill]),
.content svg ellipse:not([class]):not([style]):not([fill]),
.content svg circle:not([class]):not([style]):not([fill]) {
  fill: currentColor;
}

.content a:not([class]) {
  position: relative;
  color: var(--secondary, #4a8292);
  display: inline-block;
}
.content a:not([class]):focus {
  outline: none;
}
.content a:not([class])::before {
  content: "";
  content: "";
  width: calc(100% + 1em);
  height: calc(100% + 1em);
  left: -0.5em;
  top: -0.5em;
  position: absolute;
  border-radius: var(--borderRadius, 0.5em);
}
.content a:not([class]):focus::before {
  outline: 2px solid currentColor;
}

.content blockquote {
  font-family: inherit;
  font-size: var(--baseSize, 16px);
  line-height: 1.5;
  padding: space;
}

.content p {
  font-size: baseSize;
  line-height: 1.5;
  max-width: var(--content.paragraph.max-width);
}
.content p:first-of-type {
  font-size: 1.25em;
}

.content img {
  max-width: 100%;
  width: 100vw;
  max-height: 80vh;
  margin: auto;
}

.content dl {
  display: flex;
  flex-direction: column;
}
.content dl dd + dt {
  margin-top: 1em;
}
.content dl dt,
.content dl dd {
  line-height: 1.5;
}
.content dl dd {
  opacity: 0.5;
}
.content dl dt {
  font-weight: bold;
}
.content dl dt + dd {
  margin-top: 0.5em;
}

.color-preview::after {
  content: "";
  width: 1em;
  height: 1em;
  background-color: var(--color-preview);
  display: inline-block;
  border-radius: 50%;
  margin-left: 0.5em;
}

[color-mode=dark] {
  --code-lightness: 80;
  --code-saturation: 80;
}

[color-mode=light] {
  --code-lightness: 33;
  --code-saturation: 80;
}

code {
  background-color: var(--primary75);
  color: var(--primary75Text);
  font-size: 0.875em;
  border-radius: var(--borderRadius, 0.5em);
}

pre:not([class]) code,
pre[class^=language-] {
  background-color: transparent;
  color: var(--foreground);
  border: 1px solid var(--foreground-10);
  color: var(--foreground);
  padding: var(--space-s, 0.5em);
  font-family: var(--codeFontFamily, 'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace');
  border-radius: var(--borderRadius, 0.5em);
  overflow: scroll;
  max-width: 100%;
  line-height: 1.5;
  display: block;
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  pre:not([class]) code,
pre[class^=language-] {
    padding: var(--space, 1em);
    width: calc(100% + var(--space-xl));
    max-width: calc(100% + var(--space-xl));
    margin-left: calc(var(--space, 1em) * -1);
    margin-right: calc(var(--space, 1em) * -1);
    border: none;
    border-radius: 0;
    background-color: var(--foreground-10);
  }
}
pre:not([class]) code + code,
pre[class^=language-] + code {
  margin: 0;
}
pre:not([class]) code code,
pre[class^=language-] code {
  color: var(--foreground);
}

pre[class^=language-] code,
pre code {
  background-color: transparent;
}

pre[class^=language-] {
  position: relative;
  padding: 0;
  overflow: visible;
}
pre[class^=language-]::before {
  content: "";
  display: block;
  position: absolute;
  right: var(--space-s, 0.5em);
  top: 0;
  font-size: 0.75em;
  font-weight: bold;
  background-color: var(--secondary, #4a8292);
  color: var(--secondaryText);
  transform: translateY(-50%);
  padding: 0.5em;
  border-radius: var(--borderRadius, 0.5em);
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  pre[class^=language-]::before {
    right: var(--space, 1em);
  }
}
pre[class^=language-].language-js::before {
  content: "js";
}
pre[class^=language-].language-html::before {
  content: "html";
}
pre[class^=language-].language-bash::before {
  content: "bash";
}
pre[class^=language-].language-css::before {
  content: "css";
}
pre[class^=language-].language-scss::before {
  content: "scss";
}
pre[class^=language-].language-sass::before {
  content: "sass";
}
pre[class^=language-].language-ts::before {
  content: "ts";
}
pre[class^=language-].language-markdown::before {
  content: "markdown";
}
pre[class^=language-] code {
  overflow: scroll;
  padding: var(--space-s, 0.5em);
  display: block;
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  pre[class^=language-] code {
    padding: var(--space, 1em);
  }
}

td code,
p code {
  display: inline-block;
  padding: 0.5em;
  line-height: 1;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  --code-saturation: 0;
  color: var(--code-comment, hsl(0, calc(var(--code-saturation, 50) * 1%), calc(var(--code-lightness, 50) * 1%)));
}

.token.punctuation {
  color: inherit;
}

.namespace {
  opacity: 0.7;
}

.token.property,
.token.symbol,
.token.deleted {
  color: var(--code-property, hsl(40, calc(var(--code-saturation, 50) * 1%), calc(var(--code-lightness, 50) * 1%)));
}

.token.tag {
  color: var(--code-property, hsl(193.3333333333deg, calc(var(--code-saturation, 50) * 1%), calc(var(--code-lightness, 50) * 1%)));
}

.token.constant {
  color: var(--code-property, hsl(166.6666666667deg, calc(var(--code-saturation, 50) * 1%), calc(var(--code-lightness, 50) * 1%)));
}

.token.boolean,
.token.number {
  color: var(--code-boolean, hsl(272.2388059701deg, calc(var(--code-saturation, 50) * 1%), calc(var(--code-lightness, 50) * 1%)));
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: var(--code-selector, hsl(220, calc(var(--code-saturation, 50) * 1%), calc(var(--code-lightness, 50) * 1%)));
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: var(--code-variable, hsl(200, calc(var(--code-saturation, 50) * 1%), calc(var(--code-lightness, 50) * 1%)));
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: var(--code-function, hsl(272.2388059701deg, calc(var(--code-saturation, 50) * 1%), calc(var(--code-lightness, 50) * 1%)));
}

.token.keyword {
  color: var(--code-keyword, hsl(40, calc(var(--code-saturation, 50) * 1%), calc(var(--code-lightness, 50) * 1%)));
}

.token.regex,
.token.important {
  color: var(--code-regex, hsl(40, calc(var(--code-saturation, 50) * 1%), calc(var(--code-lightness, 50) * 1%)));
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

.content h1 + figure {
  margin-top: calc(var(--space, 1em) * 2);
  width: 100%;
}
@media screen and (max-width: 1280px) {
  .content h1 + figure {
    width: calc(100vw + (var(--space, 1em) * 2));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
.content h1 + figure img {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  object-fit: cover;
}
.content h1 + figure + * {
  margin-top: var(--space, 1em);
}

.row {
  display: grid;
  grid-auto-flow: row;
  grid-column-gap: var(--gap, 0);
  grid-row-gap: var(--gap, 0);
  --row-columns: repeat(
    var(--row-total, 12),
    1fr
  );
  grid-template-columns: var(--row-columns);
  grid-template-rows: auto;
}

.row.row--fifths {
  display: grid;
  grid-auto-flow: row;
  grid-column-gap: var(--gap, 0);
  grid-row-gap: var(--gap, 0);
  --row-columns: repeat(
    var(--row-total, 25),
    1fr
  );
  grid-template-columns: var(--row-columns);
  grid-template-rows: auto;
}

.column {
  width: 100%;
}
.column--middle {
  display: flex;
  align-items: center;
}
.column--center {
  display: flex;
  justify-content: center;
}

.column.full {
  grid-column: span 1200%;
}

.column.half {
  grid-column: span 600%;
}

.column.third {
  grid-column: span 833.325%;
}

.column.two-third {
  grid-column: span 1666.65%;
}

.column.quarter {
  grid-column: span 300%;
}

.column.three-quarter {
  grid-column: span 900%;
}

.column.fifth {
  grid-column: span 240%;
}

.column.two-fifth {
  grid-column: span 480%;
}

.column.three-fifth {
  grid-column: span 720%;
}

.column.four-fifth {
  grid-column: span 960%;
}

.boxes {
  width: 100%;
  display: flex;
}
.boxes--inline {
  display: flex-inline;
}
.boxes--row {
  flex-direction: row;
}
.boxes--column {
  flex-direction: column;
}
.boxes--auto .box {
  width: var(--box-width, 100%);
  padding-bottom: var(--box-height, 100%);
}

.box {
  width: 100%;
  height: 100%;
  border-radius: var(--borderRadius, 0.5em), .box --auto;
  border-radius-width: auto;
  border-radius-height: auto;
}

alert {
  padding: var(--space, 1em);
  border-radius: var(--borderRadius, 0.5em);
  background-color: var(--alert-background-color, var(--background10));
  color: var(--alert-text-color, currentColor);
}
alert--success {
  --alert-background-color: var(--green-80);
  --alert-text-color: var(--green-20);
}
alert--warning {
  --alert-background-color: var(--orange-80);
  --alert-text-color: var(--orange-20);
}
alert--error {
  --alert-background-color: var(--red-80);
  --alert-text-color: var(--red-20);
}
alert--tip {
  --alert-background-color: var(--blue-80);
  --alert-text-color: var(--blue-20);
}

.button {
  display: inline-block;
  padding: space(0.25) space(0.5);
  background-color: inherit;
  text-decoration: none;
  border-radius: var(--borderRadius, 0.5em);
  color: var(--currentColor);
  border: 2px solid currentColor;
  font-size: 1em;
}

.card {
  overflow: hidden;
  display: inline-block;
  padding: var(--space-s, 0.5em);
  background-color: var(--background10);
  border-radius: var(--borderRadius, 0.5em);
  color: var(--current);
}
.card figure {
  display: block;
  width: calc(100% + (var(--space-l, 2em)));
  height: 0;
  padding-bottom: 100%;
  margin: calc(var(--space-s, 0.5em) * -1);
  margin-bottom: var(--space, 1em);
}

.card-group {
  display: grid;
  grid-auto-flow: row;
  grid-column-gap: var(--gap, 0);
  grid-row-gap: var(--gap, 0);
  --row-columns: repeat(
    var(--row-total, 12),
    1fr
  );
  grid-template-columns: var(--row-columns);
  grid-template-rows: auto;
}
.card-group .card--full {
  grid-column: span 1200%;
}
.card-group .card--half {
  grid-column: span 600%;
}
.card-group .card--third {
  grid-column: span 833.325%;
}
.card-group .card--two-third {
  grid-column: span 1666.65%;
}
.card-group .card--quarter {
  grid-column: span 300%;
}
.card-group .card--three-quarter {
  grid-column: span 900%;
}
.card-group .card--fifth {
  grid-column: span 240%;
}
.card-group .card--two-fifth {
  grid-column: span 480%;
}
.card-group .card--three-fifth {
  grid-column: span 720%;
}
.card-group .card--four-fifth {
  grid-column: span 960%;
}

.color-mode {
  border: var(--switchStroke, calc(2em * 0.1)) solid var(--switchColor, var(--foreground-50));
  width: calc(2em * 1.5);
  height: calc(2em * 1);
  display: block;
  background-color: transparent;
  border-radius: 2em;
  position: relative;
  text-indent: -999em;
  color: var(--switchColor, var(--foreground-50));
  transition: opacity var(--transition);
  opacity: 0.5;
}
.color-mode:hover {
  opacity: 1;
}
.color-mode:focus {
  outline: none;
  box-shadow: 0 0 10px 0 var(--primary, #6c488b);
}
.color-mode::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out;
  transform: translate(calc(0% + var(--switchStroke, calc(2em * 0.1))), -50%);
  background-color: currentColor;
  border-radius: 50%;
  width: var(--switchDotSize, calc(2em - (2em * 0.4)));
  height: var(--switchDotSize, calc(2em - (2em * 0.4)));
  background: radial-gradient(circle at 50%, transparent, transparent 33.33%, var(--switchColor, var(--foreground-50)) 33.33%);
  background-repeat: no-repeat;
  background-size: calc(2em * 2) 100%;
  background-position: 0% 50%;
}
.color-mode::after {
  background-color: var(--text);
  color: var(--background);
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, calc(var(--switch-stroke) * 2)) scale(0);
  font-size: 0.8em;
  padding: 0.5em 1em;
  border-radius: var(--borderRadius, 0.5em);
  display: block;
  text-indent: 0;
  opacity: 0;
  transition: transform var(--transition);
}
.color-mode:hover::after {
  transform: translate(-50%, calc(var(--switch-stroke) * 2)) scale(1);
  opacity: 1;
}

[color-mode=dark] .color-mode::before {
  transform: translate(100%, -50%) rotate(180deg);
  background-position: 25% 50%;
}

.notification {
  display: inline-block;
  padding: var(--space-s, 0.5em);
  background-color: var(--background10);
  border-radius: var(--borderRadius, 0.5em);
  color: currentColor;
}
.notification--error {
  border: 1px solid;
  border-color: "error";
  background-color: var(--error25);
  color: var(--error25text);
}
.notification p,
.notification p:first-of-type {
  font-size: 1em;
}
.notification--warning {
  border: 1px solid;
  border-color: "warning";
  background-color: var(--warning25);
  color: var(--warning25text);
}
.notification p,
.notification p:first-of-type {
  font-size: 1em;
}
.notification--info {
  border: 1px solid;
  border-color: "info";
  background-color: var(--info25);
  color: var(--info25text);
}
.notification p,
.notification p:first-of-type {
  font-size: 1em;
}
.notification--success {
  border: 1px solid;
  border-color: "success";
  background-color: var(--success25);
  color: var(--success25text);
}
.notification p,
.notification p:first-of-type {
  font-size: 1em;
}
.notification--primary {
  border: 1px solid;
  border-color: "primary";
  background-color: var(--primary25);
  color: var(--primary25text);
}
.notification p,
.notification p:first-of-type {
  font-size: 1em;
}
.notification--secondary {
  border: 1px solid;
  border-color: "secondary";
  background-color: var(--secondary25);
  color: var(--secondary25text);
}
.notification p,
.notification p:first-of-type {
  font-size: 1em;
}

.tag__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.tag__item {
  display: block;
  font-size: 0.8em;
  position: relative;
}
.tag__link {
  text-decoration: none;
  color: currentColor;
  display: block;
  padding: 0.5em;
  position: relative;
}
.tag__link:hover {
  background-color: transparent;
}
.tag__link::before {
  content: "#";
}
.tag__link::after {
  content: "";
  display: block;
  z-index: 1;
  position: absolute;
  left: 50%;
  width: calc(100% + 1em);
  height: calc(100% + 1em);
  background-color: var(--secondary, #4a8292);
  top: 50%;
  transform: translate(-50%, -50%) scale(0.75);
  border-radius: var(--borderRadius, 0.5em);
  opacity: 0;
  transition: transform 0.3s ease-in-out;
}
.tag__link:hover::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.5;
}

.task-list {
  display: flex;
  flex-direction: column;
}
.task-list__item {
  display: block;
}
.task-list__item + .task-list__item {
  margin-top: 0.5em;
}
.task-list__label {
  padding: 1em;
  border-radius: var(--borderRadius, 0.5em);
  background-color: var(--foreground-10);
  padding-left: 2.5em;
  position: relative;
  display: block;
}
.task-list__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.task-list__input:checked + .task-list__label {
  background-color: var(--primary, #6c488b);
  color: var(--primaryText);
}
.task-list__input:checked + .task-list__label::after {
  transform: translateY(-50%) scale(0.5);
}
.task-list__label::before, .task-list__label::after {
  content: "";
  width: 1.25em;
  height: 1.25em;
  position: absolute;
  left: 0.5em;
  top: 50%;
  display: block;
  border-radius: 50%;
  transition: transform var(--transition);
}
.task-list__label::before {
  transform: translateY(-50%) scale(1);
  box-shadow: 0 0 0 2px var(--foreground);
}
.task-list__label::after {
  background-color: var(--primary, #6c488b);
  transform: translateY(-50%) scale(0);
}
.task-list__link {
  position: relative;
  z-index: 2;
}

.toolbar {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: var(--space, 1em);
  z-index: 11;
}

.tooltip {
  top: calc(100% + 0.5em);
  transform: translate(-50%, 50%) scale(0.5);
  padding: 0.5em;
  position: absolute;
  border-radius: 0.5em;
  opacity: 0;
  pointer-events: none;
  background-color: var(--current-90);
  color: var(--current-10);
  border: 1px solid var(--current);
  transition: transform 0.3s ease-in-out;
  z-index: 10;
  left: 50%;
}
.tooltip code {
  white-space: nowrap;
}

div:hover > .tooltip,
span:hover > .tooltip {
  opacity: 1;
  transform: translate(-50%, 0%) scale(1);
}

.language {
  display: flex;
  font-size: 1em;
  padding: var(--ol-space);
}
@media screen and (max-width: 720px) {
  .language {
    width: 100%;
    justify-content: center;
  }
}
@media screen and (min-width: 720px) {
  .language {
    position: fixed;
    left: 0;
    bottom: 0;
  }
}
.language__link {
  display: block;
  position: relative;
  z-index: 1;
  padding: 0.5em;
  text-decoration: none;
  color: currentColor;
  transition: opacity var(--ol-transition);
}
.language__item {
  position: relative;
}
.language__item::before {
  content: none;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  z-index: 0;
  top: 50%;
  opacity: 0.25;
  background-color: var(--ol-primary);
  border-radius: calc(var(--ol-border-radius) / 2);
  transform: translate(-50%, -50%);
}
.language__item--active::before {
  content: "";
}

.content h6 {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.5;
}
.content h1 + h1, .content h1 + h2, .content h1 + h3, .content h1 + h4, .content h1 + h5, .content h1 + h6, .content h1 + p, .content h1 + .task-list,
.content h2 + h1,
.content h2 + h2,
.content h2 + h3,
.content h2 + h4,
.content h2 + h5,
.content h2 + h6,
.content h2 + p,
.content h2 + .task-list,
.content h3 + h1,
.content h3 + h2,
.content h3 + h3,
.content h3 + h4,
.content h3 + h5,
.content h3 + h6,
.content h3 + p,
.content h3 + .task-list,
.content h4 + h1,
.content h4 + h2,
.content h4 + h3,
.content h4 + h4,
.content h4 + h5,
.content h4 + h6,
.content h4 + p,
.content h4 + .task-list,
.content h5 + h1,
.content h5 + h2,
.content h5 + h3,
.content h5 + h4,
.content h5 + h5,
.content h5 + h6,
.content h5 + p,
.content h5 + .task-list,
.content h6 + h1,
.content h6 + h2,
.content h6 + h3,
.content h6 + h4,
.content h6 + h5,
.content h6 + h6,
.content h6 + p,
.content h6 + .task-list,
.content p + h1,
.content p + h2,
.content p + h3,
.content p + h4,
.content p + h5,
.content p + h6,
.content p + p,
.content p + .task-list,
.content .task-list + h1,
.content .task-list + h2,
.content .task-list + h3,
.content .task-list + h4,
.content .task-list + h5,
.content .task-list + h6,
.content .task-list + p,
.content .task-list + .task-list {
  margin-top: 1em;
}
.content h6 + h1, .content h6 + h2, .content h6 + h3, .content h6 + h4, .content h6 + h5 {
  margin-top: 0;
}
.content h5 + h1, .content h5 + h2, .content h5 + h3, .content h5 + h4 {
  margin-top: 0;
}
.content h4 + h1, .content h4 + h2, .content h4 + h3 {
  margin-top: 0;
}
.content h3 + h1, .content h3 + h2 {
  margin-top: 0;
}
.content h2 + h1 {
  margin-top: 0;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 18px;
  background-color: var(--background);
  color: var(--foreground);
}

* {
  box-sizing: border-box;
}

ul,
ol,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

img,
figure {
  margin: 0;
}

p,
figure,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}