@charset "UTF-8";
/*
* Generate all shades, 
* also in opacity mode so text colors can be generated
*/
html {
  background-color: black;
}

body,
html {
  padding: 0;
  margin: 0;
  background-color: var(--background, #fffef2);
  color: var(--foreground, #0e011d);
  font-size: var(--base-size, 16px);
  font-family: var(--primary-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
img,
pre,
img,
blockquote,
figure,
ul,
li,
ol {
  margin: 0;
}

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

h1 {
  font-family: var(--h1-heading-font-family, var(--primary-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  font-size: var(--space-l, max(5.5555555556vw, 3em));
}

h2 {
  font-family: var(--h2-heading-font-family, var(--primary-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  font-size: min(var(--space, max(4.1666666667vw, 2em)), 4em);
}

h3 {
  font-family: var(--h3-heading-font-family, var(--primary-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  font-size: min(var(--space-s, max(2.0833333333vw, 1em)), 3em);
}

h4 {
  font-family: var(--h4-heading-font-family, var(--primary-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  font-size: 1.1em;
}

h5 {
  font-family: var(--h5-heading-font-family, var(--primary-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  font-size: 1em;
}

h6 {
  font-family: var(--h6-heading-font-family, var(--primary-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  font-size: 0.875em;
}

h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6, h1 + p, h1 + img, h1 + button, h1 + table, h1 + pre,
h2 + h1,
h2 + h2,
h2 + h3,
h2 + h4,
h2 + h5,
h2 + h6,
h2 + p,
h2 + img,
h2 + button,
h2 + table,
h2 + pre,
h3 + h1,
h3 + h2,
h3 + h3,
h3 + h4,
h3 + h5,
h3 + h6,
h3 + p,
h3 + img,
h3 + button,
h3 + table,
h3 + pre,
h4 + h1,
h4 + h2,
h4 + h3,
h4 + h4,
h4 + h5,
h4 + h6,
h4 + p,
h4 + img,
h4 + button,
h4 + table,
h4 + pre,
h5 + h1,
h5 + h2,
h5 + h3,
h5 + h4,
h5 + h5,
h5 + h6,
h5 + p,
h5 + img,
h5 + button,
h5 + table,
h5 + pre,
h6 + h1,
h6 + h2,
h6 + h3,
h6 + h4,
h6 + h5,
h6 + h6,
h6 + p,
h6 + img,
h6 + button,
h6 + table,
h6 + pre,
p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6,
p + p,
p + img,
p + button,
p + table,
p + pre,
img + h1,
img + h2,
img + h3,
img + h4,
img + h5,
img + h6,
img + p,
img + img,
img + button,
img + table,
img + pre,
button + h1,
button + h2,
button + h3,
button + h4,
button + h5,
button + h6,
button + p,
button + img,
button + button,
button + table,
button + pre,
table + h1,
table + h2,
table + h3,
table + h4,
table + h5,
table + h6,
table + p,
table + img,
table + button,
table + table,
table + pre,
pre + h1,
pre + h2,
pre + h3,
pre + h4,
pre + h5,
pre + h6,
pre + p,
pre + img,
pre + button,
pre + table,
pre + pre {
  margin-top: 1em;
}

/*
  	Theme Colors
  */
@media (prefers-color-scheme: light) {
  body {
    --background: rgba(var(--light-rgb), 1);
    --foreground: rgba(var(--dark-rgb), 1);
    --background-rgb: var(--light-rgb);
    --foreground-rgb: var(--dark-rgb);
  }
}
@media (prefers-color-scheme: dark) {
  body {
    --background: rgba(var(--dark-rgb), 1);
    --foreground: rgba(var(--light-rgb), 1);
    --background-rgb: var(--dark-rgb);
    --foreground-rgb: var(--light-rgb);
  }
}
[color-mode=dark] {
  --background: rgba(var(--dark-rgb), 1);
  --foreground: rgba(var(--light-rgb), 1);
  --background-rgb: var(--dark-rgb);
  --foreground-rgb: var(--light-rgb);
}

[color-mode=light] {
  --background: rgba(var(--light-rgb), 1);
  --foreground: rgba(var(--dark-rgb), 1);
  --background-rgb: var(--light-rgb);
  --foreground-rgb: var(--dark-rgb);
}

:root {
  --primary-rgb: 108, 72, 139;
  --secondary-rgb: 74, 130, 146;
  --tertiary-rgb: 106, 46, 247;
  --caution-rgb: 254, 208, 47;
  --warning-rgb: 253, 131, 36;
  --error-rgb: 252, 27, 28;
  --info-rgb: 122, 191, 252;
  --success-rgb: 84, 213, 119;
  --dark-rgb: 14, 1, 29;
  --light-rgb: 255, 254, 242;
  --background10: rgba(var(---background-rgb), 0.1);
  --background25: rgba(var(---background-rgb), 0.25);
  --background50: rgba(var(---background-rgb), 0.5);
  --background75: rgba(var(---background-rgb), 0.75);
  --background90: rgba(var(---background-rgb), 0.9);
  --foreground10: rgba(var(---foreground-rgb), 0.1);
  --foreground25: rgba(var(---foreground-rgb), 0.25);
  --foreground50: rgba(var(---foreground-rgb), 0.5);
  --foreground75: rgba(var(---foreground-rgb), 0.75);
  --foreground90: rgba(var(---foreground-rgb), 0.9);
  --primary10: rgba(var(---primary-rgb), 0.1);
  --primary25: rgba(var(---primary-rgb), 0.25);
  --primary50: rgba(var(---primary-rgb), 0.5);
  --primary75: rgba(var(---primary-rgb), 0.75);
  --primary90: rgba(var(---primary-rgb), 0.9);
  --secondary10: rgba(var(---secondary-rgb), 0.1);
  --secondary25: rgba(var(---secondary-rgb), 0.25);
  --secondary50: rgba(var(---secondary-rgb), 0.5);
  --secondary75: rgba(var(---secondary-rgb), 0.75);
  --secondary90: rgba(var(---secondary-rgb), 0.9);
  --tertiary10: rgba(var(---tertiary-rgb), 0.1);
  --tertiary25: rgba(var(---tertiary-rgb), 0.25);
  --tertiary50: rgba(var(---tertiary-rgb), 0.5);
  --tertiary75: rgba(var(---tertiary-rgb), 0.75);
  --tertiary90: rgba(var(---tertiary-rgb), 0.9);
  --caution10: rgba(var(---caution-rgb), 0.1);
  --caution25: rgba(var(---caution-rgb), 0.25);
  --caution50: rgba(var(---caution-rgb), 0.5);
  --caution75: rgba(var(---caution-rgb), 0.75);
  --caution90: rgba(var(---caution-rgb), 0.9);
  --warning10: rgba(var(---warning-rgb), 0.1);
  --warning25: rgba(var(---warning-rgb), 0.25);
  --warning50: rgba(var(---warning-rgb), 0.5);
  --warning75: rgba(var(---warning-rgb), 0.75);
  --warning90: rgba(var(---warning-rgb), 0.9);
  --error10: rgba(var(---error-rgb), 0.1);
  --error25: rgba(var(---error-rgb), 0.25);
  --error50: rgba(var(---error-rgb), 0.5);
  --error75: rgba(var(---error-rgb), 0.75);
  --error90: rgba(var(---error-rgb), 0.9);
  --info10: rgba(var(---info-rgb), 0.1);
  --info25: rgba(var(---info-rgb), 0.25);
  --info50: rgba(var(---info-rgb), 0.5);
  --info75: rgba(var(---info-rgb), 0.75);
  --info90: rgba(var(---info-rgb), 0.9);
  --success10: rgba(var(---success-rgb), 0.1);
  --success25: rgba(var(---success-rgb), 0.25);
  --success50: rgba(var(---success-rgb), 0.5);
  --success75: rgba(var(---success-rgb), 0.75);
  --success90: rgba(var(---success-rgb), 0.9);
  --dark10: rgba(var(---dark-rgb), 0.1);
  --dark25: rgba(var(---dark-rgb), 0.25);
  --dark50: rgba(var(---dark-rgb), 0.5);
  --dark75: rgba(var(---dark-rgb), 0.75);
  --dark90: rgba(var(---dark-rgb), 0.9);
  --light10: rgba(var(---light-rgb), 0.1);
  --light25: rgba(var(---light-rgb), 0.25);
  --light50: rgba(var(---light-rgb), 0.5);
  --light75: rgba(var(---light-rgb), 0.75);
  --light90: rgba(var(---light-rgb), 0.9);
  --background-text: var(--dark);
  --foreground-text: var(--light);
  --primary-text: var(--light);
  --secondary-text: var(--light);
  --tertiary-text: var(--light);
  --caution-text: var(--dark);
  --warning-text: var(--dark);
  --error-text: var(--light);
  --info-text: var(--dark);
  --success-text: var(--dark);
  --dark-text: var(--light);
  --light-text: var(--dark);
  --background10-text: var(--light);
  --background25-text: var(--light);
  --background50-text: var(--dark);
  --background75-text: var(--dark);
  --background90-text: var(--dark);
  --foreground10-text: var(--dark);
  --foreground25-text: var(--dark);
  --foreground50-text: var(--dark);
  --foreground75-text: var(--light);
  --foreground90-text: var(--light);
  --primary10-text: var(--dark);
  --primary25-text: var(--dark);
  --primary50-text: var(--dark);
  --primary75-text: var(--light);
  --primary90-text: var(--light);
  --secondary10-text: var(--dark);
  --secondary25-text: var(--dark);
  --secondary50-text: var(--dark);
  --secondary75-text: var(--dark);
  --secondary90-text: var(--light);
  --tertiary10-text: var(--dark);
  --tertiary25-text: var(--dark);
  --tertiary50-text: var(--dark);
  --tertiary75-text: var(--light);
  --tertiary90-text: var(--light);
  --caution10-text: var(--dark);
  --caution25-text: var(--dark);
  --caution50-text: var(--dark);
  --caution75-text: var(--dark);
  --caution90-text: var(--dark);
  --warning10-text: var(--dark);
  --warning25-text: var(--dark);
  --warning50-text: var(--dark);
  --warning75-text: var(--dark);
  --warning90-text: var(--dark);
  --error10-text: var(--dark);
  --error25-text: var(--dark);
  --error50-text: var(--dark);
  --error75-text: var(--dark);
  --error90-text: var(--light);
  --info10-text: var(--dark);
  --info25-text: var(--dark);
  --info50-text: var(--dark);
  --info75-text: var(--dark);
  --info90-text: var(--dark);
  --success10-text: var(--dark);
  --success25-text: var(--dark);
  --success50-text: var(--dark);
  --success75-text: var(--dark);
  --success90-text: var(--dark);
  --dark10-text: var(--dark);
  --dark25-text: var(--dark);
  --dark50-text: var(--dark);
  --dark75-text: var(--light);
  --dark90-text: var(--light);
  --light10-text: var(--light);
  --light25-text: var(--light);
  --light50-text: var(--dark);
  --light75-text: var(--dark);
  --light90-text: var(--dark);
  --primary: rgba(var(--primary-rgb), 1);
  --secondary: rgba(var(--secondary-rgb), 1);
  --tertiary: rgba(var(--tertiary-rgb), 1);
  --caution: rgba(var(--caution-rgb), 1);
  --warning: rgba(var(--warning-rgb), 1);
  --error: rgba(var(--error-rgb), 1);
  --info: rgba(var(--info-rgb), 1);
  --success: rgba(var(--success-rgb), 1);
  --dark: rgba(var(--dark-rgb), 1);
  --light: rgba(var(--light-rgb), 1);
}

/*
		Theme Base
	*/
:root {
  --border-radius: 0.25rem;
  --shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.1);
  --space-xl: max(8.3333333333vw, 4em);
  --space-l: max(5.5555555556vw, 3em);
  --space: max(4.1666666667vw, 2em);
  --space-s: max(2.0833333333vw, 1em);
  --space-xs: max(1.0416666667vw, 0.5em);
  --transition: 0.3s ease-in-out;
}

/*
  	Theme Typography
  */
:root {
  --primary-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --secondary-font-family: times;
  --base-size: 16px;
  --thin-weight: 100;
  --light-weight: 300;
  --normal-weight: 400;
  --medium-weight: 500;
  --bold-weight: 600;
  --heavy-weight: 900;
  --code-font-family: 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(--body-font-family, var(--primary-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  position: relative;
  background-color: var(--body-background-color, var(--background, #fffef2));
  color: var(--body-color, var(--foreground, #0e011d));
}

.section {
  position: relative;
  padding: var(--space, max(4.1666666667vw, 2em));
}
@media screen and (min-width: 720px) {
  .section {
    padding: calc(var(--space, max(4.1666666667vw, 2em)) * 2);
  }
}
.section > .container {
  max-width: var(--content-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, 0.3s ease-in-out), filter var(--transition, 0.3s ease-in-out);
}

.header {
  position: relative;
  z-index: 10;
}
@media screen and (min-width: 720px) {
  .header {
    padding: var(--space-s, max(2.0833333333vw, 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, rgba(var(---background-rgb), 0.5));
  backdrop-filter: blur(1em);
  border-bottom: 2px solid var(--border-color);
}
@media screen and (min-width: 720px) {
  .header__container {
    border-radius: var(--border-radius, 0.25rem);
    border: 2px solid var(--border-color, transparent);
  }
}
.header__container--hide {
  transform: translateY(-50%);
  opacity: 0;
}
.header__container--show {
  transform: translateY(0%);
  opacity: 1;
}
.header__container--off-top {
  --border-color: var(--foreground10, rgba(var(---foreground-rgb), 0.1));
}
.header__container--on-top {
  --border-color: transparent;
}

.header .logo {
  font-weight: var(--header-logo-font-weight, bold);
  color: var(--header-logo-color, var(--foreground, #0e011d));
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0 var(--space-s, max(2.0833333333vw, 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: 3em;
    max-height: 3em;
  }
}
.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, max(4.1666666667vw, 2em));
}
@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(--border-radius, 0.25rem);
    outline: 2px solid var(--foreground10, rgba(var(---foreground-rgb), 0.1));
    background-color: var(--foreground10, rgba(var(---foreground-rgb), 0.1));
    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(--border-radius, 0.25rem);
    display: block;
    background-color: var(--foreground10, rgba(var(---foreground-rgb), 0.1));
    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-item-parent---navigation-link--after-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-item-current---navigation-link--after-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, 0.3s ease-in-out);
  line-height: 1.5;
  white-space: nowrap;
  font-family: var(--navigation-text-text, var(--primary-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
}
.navigation__link {
  padding: var(--space-s, max(2.0833333333vw, 1em));
  text-decoration: none;
  position: relative;
  color: var(--navigation-link-color, var(--foreground, #0e011d));
  display: flex;
  transition: transform var(--transition, 0.3s ease-in-out);
}
@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, max(2.0833333333vw, 1em));
  }
}
@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 (min-width: 720px) {
  .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, rgba(var(---primary-rgb), 0.1));
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: var(--navigation-link--before-transform, translate(-50%, -50%) scale(0.5));
  border-radius: var(--navigation-link--before-border-radius, var(--border-radius, 0.25rem));
  z-index: 1;
  opacity: 0;
  transition: transform var(--transition, 0.3s ease-in-out);
}
.navigation__link:hover {
  transform: scale(1.1);
}
.navigation__link:hover {
  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(--navigation-toggle-border-radius, var(--border-radius, 0.25rem));
  width: var(--space-l, max(5.5555555556vw, 3em));
  height: var(--space-l, max(5.5555555556vw, 3em));
  align-items: center;
  justify-content: center;
  display: flex;
  transition: background var(--transition, 0.3s ease-in-out), border-radius var(--transition, 0.3s ease-in-out);
  color: var(--navigation-toggle-color, var(--foreground, #0e011d));
  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, 0.3s ease-in-out);
}
.navigation__toggle:focus::before, .navigation__toggle:hover::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.navigation__toggle:hover {
  opacity: 1;
}
@media screen and (min-width: 720px) {
  .navigation__toggle {
    display: none;
  }
}
.navigation__toggle span {
  display: block;
  width: calc(var(--space, max(4.1666666667vw, 2em)) * 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, #fffef2);
  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, rgba(var(---background-rgb), 0.9));
    color: var(--foreground, #0e011d);
    height: auto;
    min-width: 50vw;
    height: 100vh;
    right: 0;
    top: 0;
    padding: var(--space-s, max(2.0833333333vw, 1em));
    padding-top: calc(var(--space, max(4.1666666667vw, 2em)) * 2);
    transition: clip-path var(--transition, 0.3s ease-in-out);
    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(--foreground25, rgba(var(---foreground-rgb), 0.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, rgba(var(---background-rgb), 0.9));
  }
}
@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, #0e011d);
  }
  .navigation__input:checked + .navigation__toggle::before {
    transform: var(--navigation-input-checked---navigation-toggle--before-transform, translate(-50%, -50%) scale(1));
    opacity: 1;
    background-color: var(--navigation-input-checked---navigation-toggle--before-background-color, var(--background, #fffef2));
  }
  .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, #fffef2);
  color: var(--foreground, #0e011d);
  background-image: linear-gradient(to bottom, var(--primary10, rgba(var(---primary-rgb), 0.1)), var(--background, #fffef2));
  /*
    * Articles
    */
  /*
    * Blog
    */
}
.archive__link {
  display: block;
  border-radius: var(--border-radius, 0.25rem);
  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 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
@media screen and (min-width: 720px) {
  .archive--articles .archive__list {
    width: calc(100% + var(--space, max(4.1666666667vw, 2em)));
    margin-left: calc(var(--space, max(4.1666666667vw, 2em)) * -1);
    position: relative;
    top: calc(var(--space, max(4.1666666667vw, 2em)) * -1);
  }
}
.archive--articles .archive__text {
  font-size: 1.5em;
  display: block;
  font-weight: bold;
  transition: var(--transition, 0.3s ease-in-out);
}
.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, #fffef2);
  color: currentColor;
  padding: 0.5em;
  border-radius: var(--border-radius, 0.25rem);
}
.archive--articles .archive__info {
  display: block;
}
.archive--articles .archive__item {
  position: relative;
  display: block;
  margin-top: var(--space, max(4.1666666667vw, 2em));
  transform: scale(1);
  transition: transform var(--transition, 0.3s ease-in-out);
  width: 100%;
  border-radius: var(--border-radius, 0.25rem);
}
@media screen and (min-width: 720px) {
  .archive--articles .archive__item {
    width: calc(33.33% - var(--space, max(4.1666666667vw, 2em)));
    margin-left: var(--space, max(4.1666666667vw, 2em));
  }
}
.archive--articles .archive__item + .archive__item {
  flex-direction: column;
}
.archive--articles .archive__item::before {
  content: "";
  display: block;
  width: calc(100% + var(--space, max(4.1666666667vw, 2em)));
  height: calc(100% + var(--space, max(4.1666666667vw, 2em)));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background-color: var(--background, #fffef2);
  z-index: -1;
  box-shadow: 0 0 1em 0 var(--background10, rgba(var(---background-rgb), 0.1));
  opacity: 0;
  border-radius: calc(var(--border-radius, 0.25rem) * 2);
  transition: opacity var(--transition, 0.3s ease-in-out), transform var(--transition, 0.3s ease-in-out);
}
.archive--articles .archive__item:hover .archive__date {
  opacity: 1;
}
.archive--articles .archive__item:hover, .archive--articles .archive__item:focus {
  transform: scale(1.05);
}
.archive--articles .archive__item:hover::before, .archive--articles .archive__item:focus::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(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, 0.3s ease-in-out);
}
@media screen and (min-width: 720px) {
  .archive--articles .archive__tags {
    margin-top: calc(var(--space, max(4.1666666667vw, 2em)) * -1);
  }
}
.archive--articles .archive__tags:hover {
  opacity: 1;
}
.archive--articles .archive__image {
  width: 100%;
  height: 10em;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: var(--border-radius, 0.25rem);
}
.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 (min-width: 720px) {
  .archive--articles .archive__image + .archive__date + .archive__text {
    margin-top: 1em;
  }
}
.archive--articles .archive__image--empty {
  position: relative;
  background-color: var(--background10, rgba(var(---background-rgb), 0.1));
}
.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, #fffef2);
  border-radius: var(--border-radius, 0.25rem);
  color: var(--background10, rgba(var(---background-rgb), 0.1));
}
.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, 0.3s ease-in-out);
}
.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, max(4.1666666667vw, 2em));
}
.archive--blog .archive__item::before {
  content: "";
  pointer-events: none;
  display: block;
  width: calc(100% + var(--space, max(4.1666666667vw, 2em)));
  height: calc(100% + var(--space, max(4.1666666667vw, 2em)));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 0;
  background-color: var(--background, #fffef2);
  border-radius: var(--border-radius, 0.25rem);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.archive--blog .archive__item:not(:hover):focus-within {
  background-color: var(--background, #fffef2);
}
.archive--blog .archive__item:not(:hover):focus-within::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.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(--border-radius, 0.25rem);
  object-fit: cover;
}
@media screen and (min-width: 720px) {
  .archive--blog .archive__image:not(.archive__image--empty) + .archive__date {
    margin-left: calc(var(--space, max(4.1666666667vw, 2em)) / 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, max(4.1666666667vw, 2em)) / 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, rgba(var(---foreground-rgb), 0.1));
  border-bottom: 1px solid var(--foreground10, rgba(var(---foreground-rgb), 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.25;
  transition: opacity var(--transition, 0.3s ease-in-out);
}
.tags:hover {
  opacity: 1;
}

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

.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(--content-table-th-text-bold, bold);
}
.content table thead tr,
.content table tbody tr:last-child {
  border-bottom: 1px solid var(--foreground10, rgba(var(---foreground-rgb), 0.1));
}
.content table tr + tr {
  border-top: 1px solid var(--foreground10, rgba(var(---foreground-rgb), 0.1));
}
@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(--foreground50, rgba(var(---foreground-rgb), 0.5));
    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: "";
  width: calc(100% + 1em);
  height: calc(100% + 1em);
  left: -0.5em;
  top: -0.5em;
  position: absolute;
  border-radius: var(--content-a-not--class----before-border-radius, var(--border-radius, 0.25rem));
}
.content a:not([class]):focus::before {
  outline: 2px solid currentColor;
}

.content blockquote {
  font-family: var(--content-blockquote-font-family, var(--primary-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  font-size: var(--content-blockquote-font-size, var(--base-size, 16px));
  line-height: var(--content-blockquote-line-height, 1.5);
  padding: space;
}

.content p {
  font-size: var(--content-p-font-size, var(--base-size, 16px));
  line-height: var(--content-p-line-height, 1.5);
  max-width: var(--content-paragraph-max-width, max(75ch, 960px));
}
.content p:first-of-type {
  font-size: var(--content-p-first-of-type-font-size, var(--base-size, 16px));
}

.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, rgba(var(---primary-rgb), 0.75));
  color: var(--primary75-text, var(--light));
  font-size: 0.875em;
  border-radius: var(--border-radius, 0.25rem);
}

pre:not([class]) code,
pre[class^=language-] {
  background-color: transparent;
  color: var(--foreground, #0e011d);
  border: 1px solid var(--foreground10, rgba(var(---foreground-rgb), 0.1));
  color: var(--foreground, #0e011d);
  padding: var(--space-s, max(2.0833333333vw, 1em));
  font-family: var(--code-font-family, '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(--border-radius, 0.25rem);
  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, max(4.1666666667vw, 2em));
    width: calc(100% + var(--space-xl, max(8.3333333333vw, 4em)));
    max-width: calc(100% + var(--space-xl, max(8.3333333333vw, 4em)));
    margin-left: calc(var(--space, max(4.1666666667vw, 2em)) * -1);
    margin-right: calc(var(--space, max(4.1666666667vw, 2em)) * -1);
    border: none;
    border-radius: 0;
    background-color: var(--foreground10, rgba(var(---foreground-rgb), 0.1));
  }
}
pre:not([class]) code + code,
pre[class^=language-] + code {
  margin: 0;
}
pre:not([class]) code code,
pre[class^=language-] code {
  color: var(--foreground, #0e011d);
}

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, max(2.0833333333vw, 1em));
  top: 0;
  font-size: 0.75em;
  font-weight: bold;
  background-color: var(--secondary, #4a8292);
  color: var(--secondary-text, var(--light));
  transform: translateY(-50%);
  padding: 0.5em;
  border-radius: var(--border-radius, 0.25rem);
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  pre[class^=language-]::before {
    right: var(--space, max(4.1666666667vw, 2em));
  }
}
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, max(2.0833333333vw, 1em));
  display: block;
}
@media screen and (min-width: 0px) and (max-width: 720px) {
  pre[class^=language-] code {
    padding: var(--space, max(4.1666666667vw, 2em));
  }
}

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(0deg, calc(var(--code-saturation, 50) * 1%), calc(var(--code-lightness, 50) * 1%)));
}

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

.token.boolean,
.token.number {
  color: var(--code-boolean, hsl(0deg, 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(0deg, 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, max(4.1666666667vw, 2em)) * 2);
  width: 100%;
}
@media screen and (min-width: 720px) {
  .content h1 + figure {
    width: calc(100vw + (var(--space, max(4.1666666667vw, 2em)) * 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, max(4.1666666667vw, 2em));
}

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

.row.row--fifths {
  display: grid;
  grid-auto-flow: row;
  grid-column-gap: var(--rowrow-fifths-gap, 0);
  grid-row-gap: var(--rowrow-fifths-gap, 0);
  --row-columns: repeat(
    var(--rowrow-fifths-row-total, 12),
    1fr
  );
  grid-template-columns: 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(--boxes-auto-box-box-width, 100%);
  padding-bottom: var(--boxes-auto-box-box-height, 100%);
}

.box {
  width: 100%;
  height: 100%;
  border-radius: var(--box-border-radius, var(--border-radius, 0.25rem));
}
.box--auto {
  width: auto;
  height: auto;
}

alert {
  padding: var(---space, max(4.1666666667vw, 2em));
  border-radius: var(---border-radius, 0.25rem);
  background-color: var(---alert-alert-background-color, var(---background10, rgba(var(---background-rgb), 0.1)));
  color: var(---alert-alert-text-color, currentColor);
}
alert--success {
  --alert-background-color: green-80;
  --alert-text-color: green-20;
}
alert--warning {
  --alert-background-color: orange-80;
  --alert-text-color: orange-20;
}
alert--error {
  --alert-background-color: red-80;
  --alert-text-color: red-20;
}
alert--tip {
  --alert-background-color: blue-80;
  --alert-text-color: blue-20;
}

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

.card {
  overflow: hidden;
  display: inline-block;
  padding: var(---space-s, max(2.0833333333vw, 1em));
  background-color: var(---background10, rgba(var(---background-rgb), 0.1));
  border-radius: var(---border-radius, 0.25rem);
  color: current;
}
.card figure {
  display: block;
  width: calc(100% + (var(---space-l, max(5.5555555556vw, 3em))));
  height: 0;
  padding-bottom: 100%;
  margin: calc(var(---space-s, max(2.0833333333vw, 1em)) * -1);
  margin-bottom: var(---space, max(4.1666666667vw, 2em));
}

.card-group {
  display: grid;
  grid-auto-flow: row;
  grid-column-gap: var(---card-group-gap, 0);
  grid-row-gap: var(---card-group-gap, 0);
  --row-columns: repeat(
    var(---card-group-row-total, 12),
    1fr
  );
  grid-template-columns: 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 {
  ---switch-stroke: calc(2em * 0.1);
  ---switch-color: var(---foreground50, rgba(var(---foreground-rgb), 0.5));
  ---switch-margin: calc(2em * 4);
  ---switch-dot-size: calc(2em - (2em * 0.4));
  border: var(---color-mode-switch-stroke, calc(2em * 0.1)) solid var(---color-mode-switch-color, var(---foreground50, rgba(var(---foreground-rgb), 0.5)));
  width: calc(2em * 1.5);
  height: calc(2em * 1);
  display: block;
  background-color: transparent;
  border-radius: 2em;
  position: relative;
  text-indent: -999em;
  color: var(---color-mode-switch-color, var(---foreground50, rgba(var(---foreground-rgb), 0.5)));
  transition: opacity var(---transition, 0.3s ease-in-out);
  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(---color-mode--before-switch-stroke, calc(2em * 0.1))), -50%);
  background-color: currentColor;
  border-radius: 50%;
  width: var(---color-mode--before-switch-dot-size, calc(2em - (2em * 0.4)));
  height: var(---color-mode--before-switch-dot-size, calc(2em - (2em * 0.4)));
  background: radial-gradient(circle at 50%, transparent, transparent 33.33%, var(---color-mode--before-switch-color, var(---foreground50, rgba(var(---foreground-rgb), 0.5))) 33.33%);
  background-repeat: no-repeat;
  background-size: calc(2em * 2) 100%;
  background-position: 0% 50%;
}
.color-mode::after {
  background-color: var(---color-mode--after-text, var(--primary-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  color: var(---background, #fffef2);
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, calc(switch-stroke * 2)) scale(0);
  font-size: 0.8em;
  padding: 0.5em 1em;
  border-radius: var(---border-radius, 0.25rem);
  display: block;
  text-indent: 0;
  opacity: 0;
  transition: transform var(---transition, 0.3s ease-in-out);
}
.color-mode:hover::after {
  transform: translate(-50%, calc(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: space-s;
  background-color: var(---notification-background-color, var(--background, #fffef2));
  border-radius: var(---notification-border-radius, var(--border-radius, 0.25rem));
  color: var(---notification-color, var(--foreground, #0e011d));
}
.notification--error {
  border: var(---notification-error-border, 1px solid);
  border-color: var(---notification-error-border-color, var(---error, #fc1b1c));
  background-color: var(---notification-error-background-color, var(--background, #fffef2));
  color: var(---notification-error-color, var(--foreground, #0e011d));
}
.notification p,
.notification p:first-of-type {
  font-size: 1em;
}
.notification--warning {
  border: var(---notification-warning-border, 1px solid);
  border-color: var(---notification-warning-border-color, var(---error, #fc1b1c));
  background-color: var(---notification-warning-background-color, var(--background, #fffef2));
  color: var(---notification-warning-color, var(--foreground, #0e011d));
}
.notification p,
.notification p:first-of-type {
  font-size: 1em;
}
.notification--info {
  border: var(---notification-info-border, 1px solid);
  border-color: var(---notification-info-border-color, var(---error, #fc1b1c));
  background-color: var(---notification-info-background-color, var(--background, #fffef2));
  color: var(---notification-info-color, var(--foreground, #0e011d));
}
.notification p,
.notification p:first-of-type {
  font-size: 1em;
}
.notification--success {
  border: var(---notification-success-border, 1px solid);
  border-color: var(---notification-success-border-color, var(---error, #fc1b1c));
  background-color: var(---notification-success-background-color, var(--background, #fffef2));
  color: var(---notification-success-color, var(--foreground, #0e011d));
}
.notification p,
.notification p:first-of-type {
  font-size: 1em;
}
.notification--primary {
  border: var(---notification-primary-border, 1px solid);
  border-color: var(---notification-primary-border-color, var(---error, #fc1b1c));
  background-color: var(---notification-primary-background-color, var(--background, #fffef2));
  color: var(---notification-primary-color, var(--foreground, #0e011d));
}
.notification p,
.notification p:first-of-type {
  font-size: 1em;
}
.notification--secondary {
  border: var(---notification-secondary-border, 1px solid);
  border-color: var(---notification-secondary-border-color, var(---error, #fc1b1c));
  background-color: var(---notification-secondary-background-color, var(--background, #fffef2));
  color: var(---notification-secondary-color, var(--foreground, #0e011d));
}
.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(---border-radius, 0.25rem);
  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(---border-radius, 0.25rem);
  background-color: var(---foreground10, rgba(var(---foreground-rgb), 0.1));
  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(---primary-text, var(--light));
}
.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, 0.3s ease-in-out);
}
.task-list__label::before {
  transform: translateY(-50%) scale(1);
  box-shadow: 0 0 0 2px var(---foreground, #0e011d);
}
.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, max(4.1666666667vw, 2em));
  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: current-90;
  color: current-10;
  border: 1px solid 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;
}