@view-transition {
  navigation: auto; /* enabled! */
}
@font-face {
  font-family: "CaskaydiaCove NFP";
  src: url("./caskaydiacovenfp.ttf") format("truetype");
}

:root {
  --sl-sidebar-width: 20vw;
  --sl-sidebar-item-padding-inline: 0.45rem;
  --sl-transition-duration: 0.375s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sl-transition-duration: 0s
  }
}

/* Dark mode colors. */
:root {
  --sl-color-accent: #8fbcbb;
  --sl-color-white: #ffffff;
  --sl-color-gray-1: #e5e9f0;
  --sl-color-gray-2: #c0c8d8;
  --sl-color-gray-3: #848daa;
  --sl-color-gray-4: #4c566a;
  --sl-color-gray-5: #434c5e;
  --sl-color-gray-6: #3b4252;
  --sl-color-black: #2e3440;
  --sl-color-accent-low: color-mix(
    in oklab,
    var(--sl-color-accent),
    var(--sl-color-black)
  );
  --sl-color-accent-high: color-mix(
    in oklab,
    var(--sl-color-accent),
    var(--sl-color-white)
  );
  --sl-color-text-accent-hover: color-mix(
    in oklab,
    var(--sl-color-accent),
    var(--sl-color-gray-6) 50%
  );
  --sl-color-text-invert: var(--sl-color-black);
  --sl-color-bg-sidebar: hsl(from var(--sl-color-gray-5) h s l / 50%);
  --sl-color-bg-nav: hsl(from var(--sl-color-gray-5) h s l / 50%);
}
/* Light mode colors. */
:root[data-theme="light"] {
  --sl-color-accent: color-mix(in oklab, #81a1c1 75%, #8fbcbb);
  --sl-color-black: #ffffff;
  --sl-color-gray-7: #e5e9f0;
  --sl-color-gray-6: #c0c8d8;
  --sl-color-gray-5: #848daa;
  --sl-color-gray-4: #4c566a;
  --sl-color-gray-3: #434c5e;
  --sl-color-gray-2: #3b4252;
  --sl-color-gray-1: #2e3440;
  --sl-color-white: #181d24;
  --sl-color-accent-high: var(--sl-color-white);
  --sl-color-accent-low: var(--sl-color-black);
  --sl-color-text-accent: color-mix(
    in oklab,
    var(--sl-color-accent),
    var(--sl-color-white) 12.5%
  );
  --sl-color-text-accent-hover: color-mix(
    in oklab,
    var(--sl-color-accent),
    var(--sl-color-gray-6) 25%
  );
  --sl-color-text-invert: var(--sl-color-black);
  --sl-color-bg-sidebar: hsl(from var(--sl-color-gray-6) h s l / 50%);
  --sl-color-bg-nav: hsl(from var(--sl-color-gray-6) h s l / 50%);
}
html {
  background: var(--sl-color-white);
  width: 100vw !important;
  height: 100vh !important;
  body > .page::after,
  body > .page::before {
    display: block;
    content: "";
    position: fixed;
    width: max(100vh, 100vw);
    height: max(100vh, 100vw);
    transform: scale(0);
    z-index: -1;
    border-radius: 50%;
    background: var(--sl-color-black);
  }
  &[data-theme="dark"] body > .page::before,
  &[data-theme="light"] body > .page::after {
    background: var(--sl-color-black);
    transform: scale(1.5);
    transition: transform var(--sl-transition-duration) ease-in-out;
  }
  &[data-theme="light"] {
    background: var(--sl-color-gray-1);
  }
}
html * {
  font-family: "CaskaydiaCove NFP";
  & {
    text-transform: lowercase;
    transition-property:
      background, color, border-inline-start, scrollbar-color;
    transition-duration: var(--sl-transition-duration);
    transition-timing-function: ease-in-out;
  }
}
code {
  text-transform: none;
  overflow-wrap: break-word;
}
.expressive-code {
  * {
    transition-property: background, color;
    text-transform: none;
  }
  > figure > figcaption::before {
    border: none;
    border-bottom: var(--ec-brdWd) solid var(--ec-frm-edTabBarBrdCol);
  }
  > figure:not(.is-terminal) > figcaption > .title {
    border: var(--ec-brdWd) solid var(--ec-frm-edTabBarBrdCol);
    border-bottom: none;
  }
  .copy button {
    width: 2rem;
    height: 2rem;
  }
  .frame {
    --code-background: var(--sl-color-bg-sidebar);
    &.is-terminal {
      span.title {
        border: none;
      }
      .code {
        display: flex;
        flex-direction: row;
        &::before {
          content: "❯ ";
          position: relative;
          display: block;
        }
      }
      .header::before {
        left: unset !important;
        right: var(--ec-uiPadInl);
      }
    }
  }
}
.main-pane > main > .content-panel:first-child {
  padding-top: 0;
}
[aria-current="page"] :is(a, span) {
  font-weight: 599;
  font-size: 1rem;
}
summary:not(#starlight__on-this-page--mobile) {
  justify-content: start;
  padding: 0.2em 0;
  > svg {
    order: -1;
  }
}
.large {
  font-weight: 599;
}
@media (min-width: 72rem) {
  .main-pane {
    margin: auto;
    width: auto !important;
  }
  [class^="right-sidebar"] {
    width: 25vw;
    max-width: 300px;
    > .sl-container {
      width: calc(25vw - (2 * var(--sidebar-pad-x)));
      max-width: calc(300px - (2 * var(--sidebar-pad-x)));
    }
  }
  .main-frame:not(:has(> div > aside[class*="print:hidden"])) {
    --sl-content-inline-start: 20vw;
  }
}
@media (min-width: 50rem) {
  .hero {
    grid-template-columns: unset !important;
  }
  .sidebar-pane {
    width: clamp(220px, 20vw, 300px);
    scrollbar-color: var(--sl-color-bg-accent) transparent;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    &:not(:hover) {
      scrollbar-width: thin;
      padding-right: 0.375em;
    }
  }
  header.header {
    --__sidebar-width: 20vw;
  }
  html[data-has-sidebar] {
    --sl-content-inline-start: max(20vw, 220px) !important;
  }
  .main-frame:not(:has(> div > aside[class*="print:hidden"])) {
    --sl-content-inline-start: 30vw;
  }
  .sidebar-pane {
    border-inline-end: none;
  }
  .main-frame {
    cursor: pointer;
    padding-inline-start: 0;
  }
  body > div:has(> nav) > div .main-frame {
    max-width: calc(
      100vw - clamp(220px, var(--sl-content-inline-start), 300px)
    );
  }
  [data-theme="light"] .sidebar-pane,
  [data-theme="light"] .main-frame {
    scrollbar-color: var(--sl-color-bg-accent) transparent;
  }
}
@media (max-width: 50rem) {
  .sidebar-pane {
    background: transparent;
    backdrop-filter: blur(10px);
  }
}
.main-frame {
  background: transparent;
}
main {
  background: transparent;
}
.title-wrapper {
  max-width: calc(var(--sl-sidebar-width) - 1rem);
}
select > option:hover {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
[data-theme="dark"] select:focus {
  background: hsl(from var(--sl-color-gray-6) h s l / 1%) !important;
}
[data-theme="light"] select:focus {
  background: hsl(from var(--sl-color-gray-7) h s l / 1%) !important;
}
.header {
  border-bottom: none;
}
.pagination-links > a {
  transition: transform var(--sl-transition-duration) ease;
  box-shadow: unset;
  cursor: pointer;
  svg {
    transition: transform var(--sl-transition-duration) ease;
  }
  &:hover {
    transform: scale(1.01);
    svg {
      transform: scale(1.5);
    }
  }
}
.pagination-links:has(> a:hover) > a:not(:hover) {
  transform: scale(0.99);
}
.header {
  --sl-content-width: 60vw;
}
header > .header > .title-wrapper + [class*="print:hidden"] {
  display: block;
  > site-search {
    display: flex;
    float: right;
  }
}
summary#starlight__on-this-page--mobile {
  border-bottom: none;
}
sl-sidebar-state-persist > ul ul li {
  border-inline-start: 0.25em solid var(--sl-color-hairline-light);
  &:hover {
    border-inline-start: 0.25em solid var(--sl-color-text-accent-hover);
    color: var(--sl-color-text-accent-hover);
  }
  &:has(> [aria-current="page"]) {
    border-inline-start: 0.25em solid var(--sl-color-text-accent);
  }
}
ul li {
  cursor: pointer;
}
body {
  background: transparent;
  overflow: hidden;
}
.title-wrapper {
  max-width: unset !important;
}
button {
  box-shadow: unset !important;
  transition-property:
    background, color, border-inline-start, scrollbar-color, transform;
  &:hover:not([aria-label="Search"]) {
    transform: scale(1.125);
  }
}
.dropdown {
  box-shadow: none;
  background: color-mix(
    in oklab,
    var(--sl-color-black),
    var(--sl-color-gray-6)
  );
  border: none;
}
body > div:not(:has(> nav)) > div.main-frame > div {
  height: 100vh;
}
body > div:not(:has(> nav)) > div.main-frame {
  margin-top: var(--sl-nav-height);
  overflow: auto;
  max-height: calc(
    100vh - (var(--sl-nav-height) + var(--sl-mobile-toc-height))
  );
  scrollbar-color: var(--sl-color-bg-accent) transparent;
}
body > div:has(> nav) > div {
  overflow: auto;
  max-height: calc(
    100vh - (var(--sl-nav-height) + var(--sl-mobile-toc-height))
  );
  scrollbar-color: var(--sl-color-bg-accent) transparent;
}
body > div:has(> nav) > div {
  margin-left: clamp(220px, var(--sl-content-inline-start), 300px);
  &.main-frame {
    overflow: auto;
    scrollbar-color: var(--sl-color-bg-accent) transparent;
    margin-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
    padding-top: 0;
    &:not(:hover) {
      scrollbar-width: thin;
      padding-right: 0.375em;
    }
  }
}
figure.frame {
  &:has(> figcaption > span) > pre[data-language] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  &:not(:has(> figcaption > span)) > pre[data-language] {
    padding-top: 1em;
    &::before{
      position: absolute;
      display: block;
      content: attr(data-language);
      left: 1em;
      top: 6px;
      transition: color var(--sl-transition-duration) linear
    }
  }

  > pre[data-language] {
    border-radius: 5px;
  }
  > figcaption {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
}
footer > * {
  margin-top: 0;
}
starlight-file-tree {
  border-radius: 5px;
  .file {
    margin-inline-start: 0em;
    padding-inline-start: 0.5em;
    border-radius: 5px;
    &:hover {
      background: var(--sl-color-gray-4);
    }
    .comment {
      max-width: unset;
      text-align: right;
      color: hsl(from var(--sl-color-gray-3) h s calc(l + 5));
    }
    .tree-entry {
      display: flex;
      justify-content: space-between;
    }
    svg {
      transform: translateY(-0.1em);
    }
  }
  .directory > details[open] > summary {
    border-bottom: 1.5px solid var(--sl-color-gray-4);
    border-radius: 0;
  }
  .directory > details > summary {
    padding-right: 0;
    max-width: unset;
    border-radius: 5px;
    list-style: none;
    &::-webkit-details-marker {
      display: none;
    }
    &:hover {
      background: var(--sl-color-gray-4);
      border-radius: 5px;
    }
    svg {
      transform: translateY(-0.1em);
    }
  }
}
.site-title {
  color: transparent;
  &::before {
    content: "   _____ ____  _   __ _____\a   / ___// __ \\| | / // ___/\a  / /   / /_/ /| |/ // /\a/_/    \\____/ |___//_/";
    line-height: 1.25;
    white-space: pre;
    display: block;
    position: absolute;
    font-size: 0.5em;
    color: var(--sl-color-accent);
    transform: translateY(-0.25rem);
    transition: color var(--sl-transition-duration) linear;
    font-weight: bolder;
    font-variant-ligatures: none;
    text-shadow:
      1px 0 0 currentColor,
      -1px 0 0 currentColor,
      0 1px 0 currentColor,
      0 -1px 0 currentColor,
      1px 1px 0 currentColor,
      -1px 1px 0 currentColor,
      1px -1px 0 currentColor,
      -1px -1px 0 currentColor;
  }
}
starlight-file-tree ul:has(> li.file) {
  border-inline-start: 2px solid var(--sl-color-gray-4);
}
.sl-markdown-content a:not([id^=tab]) {
  color: var(--sl-color-accent-high);
  margin: 0 -0.25em;
  padding: 0 0.25em;
  &:hover {
    color: var(--sl-color-black);
    background-color: var(--sl-color-accent-high);
  }
}

a[id^=tab] {
  transition-property: background, color, border-inline-start, scrollbar-color, border-bottom;
  &:hover[aria-selected="false"] {
    border-bottom: 2px solid var(--sl-color-text-accent-hover);
  }
}

.hero {
  margin-bottom: calc(var(--sl-nav-height) * 2);
  > img {
    display: none;
  }
}
.main-pane > main > .content-panel:has(> div > .hero) {
  margin: 0 min(10vw, 5rem);
  padding: 0;
  .card {
    background: transparent;
  }
}
@media print {
  body > div:has(> nav) > div {
    margin-left: 0;
  }
  .main-frame {
    margin-top: 0;
  }
}

/*mermaid*/
pre.mermaid[data-processed] {
  background: transparent !important;
  transition: all var(--sl-transition-duration) linear;
}

.social-icons > *,
.sl-markdown-content + footer > div:not(.pagination-links) > a > svg {
  transition: rotate calc(var(--sl-transition-duration) * 2) cubic-bezier(0.34, 1.56, 0.64, 1)
}
.social-icons > *:hover,
.sl-markdown-content + footer > div:not(.pagination-links) > a:hover > svg {
  rotate: 360deg;
  user-select: none;
}
.group-label + svg {
  transition: transform var(--sl-transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}
