@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap");

/* Daylight palette. Source Sans for reading; mono only for code. */

body {
  --font-text-theme: "Source Sans 3", "Segoe UI", sans-serif;
  --font-interface-theme: "Source Sans 3", "Segoe UI", sans-serif;
  --font-monospace-theme: "IBM Plex Mono", ui-monospace, monospace;
  --font-text-size: 18px;
  --line-height-normal: 1.55;
  --font-weight: 400;
  --bold-modifier: 200;
}

.published-container {
  --page-width: 44rem;
  --page-side-padding: 2rem;
  --page-padding: 2.4rem 1.4rem 4.5rem;
  --page-title-font: "Source Sans 3", "Segoe UI", sans-serif;
  --page-title-size: 2rem;
  --page-title-weight: 700;
  --page-title-line-height: 1.2;
  --site-name-font: "Source Sans 3", "Segoe UI", sans-serif;
  --site-name-size: 0.95rem;
  --site-name-weight: 600;
  --header-height: 3.25rem;
  --sidebar-left-width: 15rem;
  --sidebar-right-width: 18rem;
  --nav-item-size: 15px;
  --nav-item-weight: 500;
  --nav-item-weight-active: 600;
  --nav-parent-item-weight: 500;
  --component-title-font: "IBM Plex Mono", ui-monospace, monospace;
  --component-title-size: 0.72rem;
  --component-title-weight: 500;
  --component-title-transform: uppercase;
  --component-title-style: normal;
  --logo-radius: 2px;
  --logo-max-height: 42px;
  --radius-s: 2px;
  --radius-m: 2px;
  --radius-l: 2px;
  --input-radius: 2px;
  --code-radius: 2px;
  --callout-radius: 2px;
  --callout-border-width: 1px;
  --h1-font: "Source Sans 3", "Segoe UI", sans-serif;
  --h2-font: "Source Sans 3", "Segoe UI", sans-serif;
  --h3-font: "Source Sans 3", "Segoe UI", sans-serif;
  --h1-size: 1.6rem;
  --h2-size: 1.28rem;
  --h3-size: 1.08rem;
  --h4-size: 1.02rem;
  --h1-weight: 700;
  --h2-weight: 600;
  --h3-weight: 600;
  --h4-weight: 600;
  --h1-line-height: 1.15;
  --h2-line-height: 1.2;
  --h3-line-height: 1.3;
  --heading-spacing: 1.35em;
  --tag-size: 0.75rem;
  --tag-weight: 500;
  --tag-radius: 2px;
  --tag-padding-x: 0.45rem;
  --tag-padding-y: 0.12rem;
  --tag-border-width: 1px;
  --hr-thickness: 1px;
  --blockquote-border-thickness: 3px;
  --table-border-width: 1px;
  --table-header-weight: 600;
  --table-header-size: 0.92em;
}

.theme-light {
  --accent-h: 332;
  --accent-s: 78%;
  --accent-l: 42%;
  --color-base-00: #f7fbfb;
  --color-base-05: #f3f8f8;
  --color-base-10: #eef5f4;
  --color-base-20: #e4f0ef;
  --color-base-25: #d7e8e6;
  --color-base-30: #c9dfdd;
  --color-base-35: #b7d2cf;
  --color-base-40: #8eada9;
  --color-base-50: #6d8d89;
  --color-base-60: #4e6c69;
  --color-base-70: #35514e;
  --color-base-100: #142028;
  --color-red: #c4234a;
  --color-red-rgb: 196, 35, 74;
  --color-cyan: #0c8f9e;
  --color-cyan-rgb: 12, 143, 158;
  --color-pink: #c2186a;
  --color-pink-rgb: 194, 24, 106;
  --background-primary: #f7fbfb;
  --background-primary-alt: #eef6f5;
  --background-secondary: #e7f3f2;
  --background-secondary-alt: #dcecea;
  --background-modifier-hover: rgba(12, 143, 158, 0.1);
  --background-modifier-border: #c5dedc;
  --background-modifier-border-hover: #0c8f9e;
  --background-modifier-border-focus: rgba(194, 24, 106, 0.45);
  --text-normal: #142028;
  --text-muted: #3c5560;
  --text-faint: #5d7680;
  --text-accent: #c2186a;
  --text-accent-hover: #087f90;
  --text-on-accent: #ffffff;
  --text-highlight-bg: rgba(12, 143, 158, 0.22);
  --bold-color: #101820;
  --italic-color: #3c5560;
  --h1-color: #101820;
  --h2-color: #101820;
  --h3-color: #16303a;
  --h4-color: #16303a;
  --h5-color: #16303a;
  --h6-color: #16303a;
  --link-color: #142028;
  --link-color-hover: #c2186a;
  --link-external-color: #0a6d84;
  --link-external-color-hover: #c2186a;
  --link-unresolved-color: #8d6474;
  --link-decoration: underline;
  --link-decoration-hover: underline;
  --interactive-accent: #0c8f9e;
  --interactive-accent-hover: #087f90;
  --code-normal: #0b6574;
  --code-background: #e5f4f3;
  --code-border-color: #b7d9d6;
  --blockquote-border-color: #0c8f9e;
  --blockquote-color: #1c333c;
  --hr-color: #c9e0de;
  --nav-item-color: #1c333c;
  --nav-item-color-hover: #c2186a;
  --nav-item-color-active: #c2186a;
  --nav-item-color-selected: #c2186a;
  --nav-item-background-hover: rgba(12, 143, 158, 0.12);
  --nav-item-background-active: rgba(194, 24, 106, 0.08);
  --nav-item-background-selected: rgba(194, 24, 106, 0.08);
  --nav-parent-item-color: #1c333c;
  --nav-parent-item-color-active: #c2186a;
  --nav-collapse-icon-color: #0c8f9e;
  --nav-collapse-icon-color-hover: #c2186a;
  --nav-indentation-guide-color: rgba(12, 143, 158, 0.35);
  --site-name-color: #101820;
  --site-name-color-hover: #c2186a;
  --site-menu-icon-color: #142028;
  --site-menu-icon-color-hover: #c2186a;
  --page-title-color: #101820;
  --component-title-color: #0c8f9e;
  --outline-heading-color: #1c333c;
  --outline-heading-color-hover: #c2186a;
  --outline-heading-color-active: #c2186a;
  --outline-heading-weight-active: 600;
  --sidebar-left-background: #e7f3f2;
  --sidebar-left-border-width: 1px;
  --sidebar-left-border-color: rgba(12, 143, 158, 0.4);
  --sidebar-right-background: #f3fafa;
  --sidebar-right-border-width: 1px;
  --sidebar-right-border-color: rgba(12, 143, 158, 0.28);
  --tag-color: #c2186a;
  --tag-color-hover: #087f90;
  --tag-background: rgba(194, 24, 106, 0.06);
  --tag-background-hover: rgba(12, 143, 158, 0.12);
  --tag-border-color: rgba(194, 24, 106, 0.35);
  --tag-border-color-hover: #0c8f9e;
  --tag-decoration: none;
  --table-border-color: #c5dedc;
  --table-header-background: #e7f3f2;
  --table-header-color: #101820;
  --table-row-alt-background: #eef6f5;
  --table-row-alt-background-hover: #e3f1ef;
  --table-row-background-hover: rgba(12, 143, 158, 0.08);
  --graph-node: #c2186a;
  --graph-line: #8ec9cf;
  --graph-text: #142028;
}

.theme-dark {
  --accent-h: 330;
  --accent-s: 100%;
  --accent-l: 66%;
  --color-base-00: #0c1216;
  --color-base-10: #121a1f;
  --color-base-20: #182228;
  --color-base-30: #243038;
  --color-base-40: #3d515a;
  --color-base-50: #5d7580;
  --color-base-60: #8aa3ab;
  --color-base-70: #b7cdd2;
  --color-base-100: #e7f4f2;
  --color-red: #ff5d7a;
  --color-red-rgb: 255, 93, 122;
  --color-cyan: #3ee0e0;
  --color-cyan-rgb: 62, 224, 224;
  --color-pink: #ff4d9a;
  --color-pink-rgb: 255, 77, 154;
  --background-primary: #0c1216;
  --background-primary-alt: #121a1f;
  --background-secondary: #10181d;
  --background-secondary-alt: #182228;
  --background-modifier-hover: rgba(62, 224, 224, 0.08);
  --background-modifier-border: #243038;
  --background-modifier-border-hover: #3ee0e0;
  --background-modifier-border-focus: rgba(255, 77, 154, 0.55);
  --text-normal: #e7f4f2;
  --text-muted: #b7cdd2;
  --text-faint: #7f9aa3;
  --text-accent: #ff4d9a;
  --text-accent-hover: #3ee0e0;
  --text-on-accent: #0c1216;
  --text-highlight-bg: rgba(255, 77, 154, 0.28);
  --bold-color: #f4fffe;
  --italic-color: #b7cdd2;
  --h1-color: #f4fffe;
  --h2-color: #f4fffe;
  --h3-color: #d5f4f1;
  --h4-color: #d5f4f1;
  --h5-color: #d5f4f1;
  --h6-color: #d5f4f1;
  --link-color: #ff4d9a;
  --link-color-hover: #3ee0e0;
  --link-external-color: #7ee8ea;
  --link-external-color-hover: #ff4d9a;
  --link-unresolved-color: #c48aa3;
  --interactive-accent: #14b8c4;
  --interactive-accent-hover: #3ee0e0;
  --code-normal: #7ee8ea;
  --code-background: #132226;
  --code-border-color: #1e3a40;
  --blockquote-border-color: #3ee0e0;
  --blockquote-color: #d5eeeb;
  --hr-color: #243038;
  --nav-item-color: #d5eeeb;
  --nav-item-color-hover: #ff4d9a;
  --nav-item-color-active: #ff4d9a;
  --nav-item-color-selected: #ff4d9a;
  --nav-item-background-hover: rgba(62, 224, 224, 0.08);
  --nav-item-background-active: rgba(255, 77, 154, 0.12);
  --nav-item-background-selected: rgba(255, 77, 154, 0.12);
  --nav-parent-item-color: #d5eeeb;
  --nav-parent-item-color-active: #ff4d9a;
  --nav-collapse-icon-color: #3ee0e0;
  --nav-collapse-icon-color-hover: #ff4d9a;
  --nav-indentation-guide-color: rgba(62, 224, 224, 0.28);
  --site-name-color: #f4fffe;
  --site-name-color-hover: #ff4d9a;
  --site-menu-icon-color: #e7f4f2;
  --site-menu-icon-color-hover: #ff4d9a;
  --page-title-color: #f4fffe;
  --component-title-color: #3ee0e0;
  --outline-heading-color: #8aa3ab;
  --outline-heading-color-hover: #ff4d9a;
  --outline-heading-color-active: #ff4d9a;
  --outline-heading-weight-active: 600;
  --sidebar-left-background: #10181d;
  --sidebar-left-border-width: 1px;
  --sidebar-left-border-color: rgba(62, 224, 224, 0.22);
  --sidebar-right-background: #10181d;
  --sidebar-right-border-width: 1px;
  --sidebar-right-border-color: rgba(62, 224, 224, 0.18);
  --tag-color: #ff4d9a;
  --tag-color-hover: #3ee0e0;
  --tag-background: rgba(255, 77, 154, 0.1);
  --tag-background-hover: rgba(62, 224, 224, 0.12);
  --tag-border-color: rgba(255, 77, 154, 0.45);
  --tag-border-color-hover: #3ee0e0;
  --tag-decoration: none;
  --table-border-color: #243038;
  --table-header-background: #182228;
  --table-header-color: #f4fffe;
  --table-row-alt-background: #121a1f;
  --table-row-alt-background-hover: #182228;
  --table-row-background-hover: rgba(62, 224, 224, 0.08);
  --graph-node: #ff4d9a;
  --graph-line: #1e4c52;
  --graph-text: #e7f4f2;
}

.theme-light .site-body-left-column {
  background-color: #e7f3f2;
  background-image:
    linear-gradient(rgba(12, 143, 158, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 143, 158, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}

.theme-dark .site-body-left-column {
  background-color: #10181d;
  background-image:
    linear-gradient(rgba(62, 224, 224, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62, 224, 224, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

.site-body-left-column-site-name,
.site-header-text {
  letter-spacing: 0.01em;
  text-transform: none;
}

.site-body-left-column-site-logo {
  text-align: left;
}

.site-body-left-column-site-name::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 3px;
  margin-top: 0.55rem;
  background: linear-gradient(90deg, #c2186a, #0c8f9e);
}

.theme-dark .site-body-left-column-site-name::after {
  background: linear-gradient(90deg, #ff4d9a, #3ee0e0);
}

.published-container .page-header {
  letter-spacing: -0.015em;
  margin-bottom: 0.2rem;
  overflow-wrap: normal;
  word-break: normal;
}

.published-container .page-header::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 3px;
  margin-top: 0.75rem;
  background: linear-gradient(90deg, #c2186a, #0c8f9e);
}

.theme-dark .published-container .page-header::after,
.published-container.theme-dark .page-header::after {
  background: linear-gradient(90deg, #ff4d9a, #3ee0e0);
}

.published-container .markdown-rendered h2 {
  margin: 1.5rem 0 0.4rem;
  padding-bottom: 0.15rem;
  letter-spacing: 0;
  border-bottom: 1px solid var(--background-modifier-border);
}

.published-container .markdown-rendered ul {
  margin-top: 0.35rem;
}

.markdown-rendered a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.theme-light .markdown-rendered a {
  text-decoration-color: #c2186a;
}

.theme-light .markdown-rendered a.external-link {
  text-decoration-color: #0a6d84;
}

.markdown-rendered ul > li::marker {
  color: var(--interactive-accent);
}

.markdown-rendered pre {
  border: 1px solid var(--code-border-color);
  border-left: 3px solid var(--interactive-accent);
  border-radius: 2px;
}

.markdown-rendered :not(pre) > code {
  border-radius: 2px;
  padding: 0.08em 0.32em;
}

.markdown-rendered blockquote {
  border-left-width: 3px;
  background: var(--background-primary-alt);
  padding: 0.2rem 0.9rem;
}

.markdown-rendered img {
  border-radius: 2px;
}

.nav-file-title.is-active,
.nav-file-title.is-selected,
.nav-folder-title.is-active {
  box-shadow: inset 2px 0 0 var(--interactive-accent);
}

::selection {
  background: rgba(12, 143, 158, 0.28);
}

.theme-dark ::selection {
  background: rgba(255, 77, 154, 0.35);
}

/* The readable-line layout stretches both sidebars until the title column
   is too narrow to hold the site name. Keep fixed rails instead. */
@media screen and (min-width: 1000px) {
  .published-container.is-readable-line-width .site-body-left-column {
    flex: 0 0 var(--sidebar-left-width);
    width: var(--sidebar-left-width);
    min-width: var(--sidebar-left-width);
    max-width: var(--sidebar-left-width);
  }

  .published-container.is-readable-line-width .site-body-right-column {
    position: relative;
    top: auto;
    right: auto;
    flex: 0 0 var(--sidebar-right-width);
    width: var(--sidebar-right-width);
    min-width: var(--sidebar-right-width);
    max-width: var(--sidebar-right-width);
    height: 100%;
  }

  body .is-readable-line-width.has-navigation .publish-renderer > .markdown-preview-view > .markdown-preview-sizer {
    width: min(100%, var(--page-width));
    max-width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
  }
}

.graph-view-outer {
  display: none !important;
}

.site-body-right-column .site-body-right-column-inner {
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0 1.15rem 1.5rem;
  box-sizing: border-box;
}

.outline-view-outer {
  padding-top: 1.15rem;
}

.outline-view-outer .tree-item-children {
  border-left: none;
  margin-inline-start: 0;
  padding-left: 0;
}

.outline-view-outer .tree-item-inner {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

.outline-view-outer .tree-item,
.outline-view-outer .tree-item-self {
  font-size: 14.5px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.outline-view-outer .tree-item-self {
  height: auto;
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
}

.markdown-preview-view.home h1.page-header {
  display: none;
}

.markdown-preview-view.home h1 {
  margin: 0 0 0.2rem;
  padding-bottom: 0;
  border-bottom: none;
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.markdown-preview-view.home h1::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 3px;
  margin-top: 0.7rem;
  background: linear-gradient(90deg, #c2186a, #0c8f9e);
}

.theme-dark .markdown-preview-view.home h1::after {
  background: linear-gradient(90deg, #ff4d9a, #3ee0e0);
}

.markdown-preview-view.home p:first-of-type {
  font-size: 1rem;
}

.markdown-preview-view.home p:first-of-type a {
  white-space: nowrap;
}

@media screen and (max-width: 750px) {
  .published-container {
    --page-title-size: 1.9rem;
    --page-padding: 1.35rem 1rem 3rem;
    --h1-size: 1.55rem;
    --h2-size: 1.2rem;
  }

  .published-container.has-navigation .site-header,
  .site-header {
    background: var(--background-secondary);
    border-bottom: 1px solid var(--background-modifier-border);
  }
}
