@use "sass:color";
@use "sass:list";
@use "sass:map";
@use "sass:meta";
@use "sass:string";
/* Quartz imports */
@use "../variables.scss" as *;
/* quartz themes */

:root[saved-theme="dark"] {
  --background-modifier-form-field: var(--color-base-25);
  --background-primary: rgb(25, 18, 63);
  --background-secondary: var(--background-secondary-dark, rgb(45, 45, 45));
  --code-background: var(--code-background-dark, rgb(33, 19, 19));
  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --color-accent-1: hsl(
    calc(var(--accent-h) - 3),
    calc(var(--accent-s) * 1.02),
    calc(var(--accent-l) * 1.15)
  );
  --color-accent-2: hsl(
    calc(var(--accent-h) - 5),
    calc(var(--accent-s) * 1.05),
    calc(var(--accent-l) * 1.29)
  );
  --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
  --color-base-00: #1e1e1e;
  --color-base-10: #242424;
  --color-base-100: #dadada;
  --color-base-20: #262626;
  --color-base-25: #2a2a2a;
  --color-base-30: #363636;
  --color-base-35: #3f3f3f;
  --color-base-40: #555555;
  --color-base-50: #666666;
  --color-base-70: #b3b3b3;
  --color-blue: #027aff;
  --color-blue-rgb: 2, 122, 255;
  --color-cyan: #53dfdd;
  --color-cyan-rgb: 83, 223, 221;
  --color-green: #44cf6e;
  --color-green-rgb: 68, 207, 110;
  --color-orange: #e9973f;
  --color-orange-rgb: 233, 151, 63;
  --color-pink: #fa99cd;
  --color-purple: #a882ff;
  --color-purple-rgb: 168, 130, 255;
  --color-red: #fb464c;
  --color-red-rgb: 251, 70, 76;
  --color-yellow: #e0de71;
  --highlight-mix-blend-mode: darken;
  --interactive-accent: var(--color-accent);
  --interactive-accent-hover: var(--color-accent-1);
  --mono-rgb-100: 255, 255, 255;
  --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112),
    0px 30px 90px rgba(0, 0, 0, 0.2);
  --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.121), 0px 3.4px 6.7px rgba(0, 0, 0, 0.179),
    0px 15px 30px rgba(0, 0, 0, 0.3);
  --text-accent: var(--color-accent-1);
  --text-normal: #ffffff;
  color-scheme: dark;

  .callout {
    --callout-blend-mode: lighten;
  }
}

:root[saved-theme="light"] {
  --background-primary: rgb(255, 250, 205);
  --background-secondary: var(--background-secondary-light, rgb(240, 240, 240));
  --code-background: var(--code-background-light, rgb(255, 255, 255));
  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --color-accent-1: hsl(
    calc(var(--accent-h) - 1),
    calc(var(--accent-s) * 1.01),
    calc(var(--accent-l) * 1.075)
  );
  --color-accent-2: hsl(
    calc(var(--accent-h) - 3),
    calc(var(--accent-s) * 1.02),
    calc(var(--accent-l) * 1.15)
  );
  --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
  --color-base-00: #ffffff;
  --color-base-10: #fafafa;
  --color-base-100: #222222;
  --color-base-20: #f6f6f6;
  --color-base-25: #e3e3e3;
  --color-base-30: #e0e0e0;
  --color-base-35: #d4d4d4;
  --color-base-40: #bdbdbd;
  --color-base-50: #ababab;
  --color-base-70: #5c5c5c;
  --color-blue: #086ddd;
  --color-blue-rgb: 8, 109, 221;
  --color-cyan: #00bfbc;
  --color-cyan-rgb: 0, 191, 188;
  --color-green: #08b94e;
  --color-green-rgb: 8, 185, 78;
  --color-orange: #ec7500;
  --color-orange-rgb: 236, 117, 0;
  --color-pink: #d53984;
  --color-purple: #7852ee;
  --color-purple-rgb: 120, 82, 238;
  --color-red: #e93147;
  --color-red-rgb: 233, 49, 71;
  --color-yellow: #e0ac00;
  --highlight-mix-blend-mode: darken;
  --mono-rgb-100: 0, 0, 0;
  --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112),
    0px 30px 90px rgba(0, 0, 0, 0.2);
  --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028), 0px 3.4px 6.7px rgba(0, 0, 0, 0.042),
    0px 15px 30px rgba(0, 0, 0, 0.07);
  --text-normal: #0c0909;
  color-scheme: light;

  .callout {
    --callout-blend-mode: darken;
  }
}

/* cyrillic-ext */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_P-bnTfc7AGraJwA.woff2)
    format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_G-bnTfc7AGraJwA.woff2)
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_B-bnTfc7AGraJwA.woff2)
    format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_N-bnTfc7AGraJwA.woff2)
    format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_M-bnTfc7AGraJwA.woff2)
    format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_C-bnTfc7AGrY.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXvlUlIfM0qh1d65g.woff2)
    format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXt1UlIfM0qh1d65g.woff2)
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXvFUlIfM0qh1d65g.woff2)
    format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXvVUlIfM0qh1d65g.woff2)
    format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXs1UlIfM0qh1d.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
}
body {
  --accent-h: 258;
  --accent-l: 66%;
  --accent-s: 88%;
  --background-modifier-border: var(--color-base-30);
  --background-modifier-border-focus: var(--color-base-40);
  --background-modifier-border-hover: var(--color-base-35);
  --background-modifier-form-field: var(--color-base-00);
  --background-modifier-hover: rgba(var(--mono-rgb-100), 0.067);
  --background-primary: var(--color-base-00);
  --background-primary-alt: var(--color-base-10);
  --background-secondary: var(--color-base-20);
  --bold-color: inherit;
  --bold-modifier: 200;
  --bold-weight: calc(var(--font-weight) + var(--bold-modifier));
  --border-width: 1px;
  --callout-blend-mode: var(--highlight-mix-blend-mode);
  --callout-border-opacity: 0.25;
  --callout-border-width: 0px;
  --callout-bug: var(--color-red-rgb);
  --callout-content-background: transparent;
  --callout-content-padding: 0;
  --callout-default: var(--color-blue-rgb);
  --callout-error: var(--color-red-rgb);
  --callout-example: var(--color-purple-rgb);
  --callout-fail: var(--color-red-rgb);
  --callout-important: var(--color-cyan-rgb);
  --callout-info: var(--color-blue-rgb);
  --callout-padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-6);
  --callout-question: var(--color-orange-rgb);
  --callout-quote: 158, 158, 158;
  --callout-radius: var(--radius-s);
  --callout-success: var(--color-green-rgb);
  --callout-summary: var(--color-cyan-rgb);
  --callout-tip: var(--color-cyan-rgb);
  --callout-title-color: inherit;
  --callout-title-padding: 0;
  --callout-title-size: inherit;
  --callout-title-weight: calc(var(--font-weight) + var(--bold-modifier));
  --callout-todo: var(--color-blue-rgb);
  --callout-warning: var(--color-orange-rgb);
  --caret-color: var(--text-normal);
  --checkbox-border-color: var(--text-faint);
  --checkbox-border-color-hover: var(--text-muted);
  --checkbox-color: var(--interactive-accent);
  --checkbox-color-hover: var(--interactive-accent-hover);
  --checkbox-marker-color: var(--background-primary);
  --checkbox-radius: var(--radius-s);
  --checkbox-size: var(--font-text-size);
  --code-background: var(--background-primary-alt);
  --code-border-color: var(--background-modifier-border);
  --code-border-width: 0px;
  --code-comment: var(--text-faint);
  --code-function: var(--color-yellow);
  --code-important: var(--color-orange);
  --code-keyword: var(--color-pink);
  --code-normal: var(--text-normal);
  --code-property: var(--color-cyan);
  --code-punctuation: var(--text-muted);
  --code-radius: var(--radius-s);
  --code-size: var(--font-smaller);
  --code-string: var(--color-green);
  --code-tag: var(--color-red);
  --code-value: var(--color-purple);
  --code-white-space: pre-wrap;
  --collapse-icon-color: var(--text-faint);
  --collapse-icon-color-collapsed: var(--text-accent);
  --cursor: default;
  --cursor-link: pointer;
  --font-default: ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto,
    "Inter", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --font-interface: var(--font-interface-override), var(--font-interface-theme),
    var(--default-font, "??"), var(--font-default);
  --font-interface-override: "??";
  --font-interface-theme: "??";
  --font-medium: 500;
  --font-monospace: var(--font-monospace-override), var(--font-monospace-theme),
    var(--font-monospace-default);
  --font-monospace-default: ui-monospace, SFMono-Regular, "Cascadia Mono", "Roboto Mono",
    "DejaVu Sans Mono", "Liberation Mono", Menlo, Monaco, "Consolas", "Source Code Pro", monospace;
  --font-monospace-override: "??";
  --font-monospace-theme: "??";
  --font-normal: 400;
  --font-smaller: 0.875em;
  --font-text: var(--body-font, Manrope), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-text-size: 16px;
  --font-ui-medium: 15px;
  --font-ui-small: 13px;
  --font-ui-smaller: 12px;
  --font-weight: var(--font-normal);
  --graph-line: var(--color-base-35, var(--background-modifier-border-focus));
  --graph-node-tag: var(--color-green);
  --graph-node-unresolved: var(--text-faint);
  --h1-color: inherit;
  --h1-font: inherit;
  --h1-line-height: 1.2;
  --h1-size: 1.802em;
  --h1-style: normal;
  --h1-variant: normal;
  --h1-weight: 700;
  --h2-color: inherit;
  --h2-font: inherit;
  --h2-line-height: 1.2;
  --h2-size: 1.602em;
  --h2-style: normal;
  --h2-variant: normal;
  --h2-weight: 600;
  --h3-color: inherit;
  --h3-font: inherit;
  --h3-line-height: 1.3;
  --h3-size: 1.424em;
  --h3-style: normal;
  --h3-variant: normal;
  --h3-weight: 600;
  --h4-color: inherit;
  --h4-font: inherit;
  --h4-line-height: 1.4;
  --h4-size: 1.266em;
  --h4-style: normal;
  --h4-variant: normal;
  --h4-weight: 600;
  --h5-color: inherit;
  --h5-font: inherit;
  --h5-line-height: var(--line-height-normal);
  --h5-size: 1.125em;
  --h5-style: normal;
  --h5-variant: normal;
  --h5-weight: 600;
  --h6-color: inherit;
  --h6-font: inherit;
  --h6-line-height: var(--line-height-normal);
  --h6-size: 1em;
  --h6-style: normal;
  --h6-variant: normal;
  --h6-weight: 600;
  --hr-color: var(--background-modifier-border);
  --hr-thickness: 2px;
  --icon-color: var(--text-muted);
  --indentation-guide-color: rgba(var(--mono-rgb-100), 0.12);
  --indentation-guide-width: 1px;
  --inline-title-color: var(--h1-color);
  --inline-title-font: var(--h1-font);
  --input-border-width: 1px;
  --input-height: 30px;
  --input-radius: 5px;
  --interactive-accent: var(--color-accent-1);
  --interactive-accent-hover: var(--color-accent-2);
  --interactive-accent-hsl: var(--color-accent-hsl);
  --italic-color: inherit;
  --layer-popover: 30;
  --line-height-normal: 1.5;
  --line-height-tight: 1.3;
  --link-color: var(--text-accent);
  --link-color-hover: var(--text-accent-hover);
  --link-external-color: var(--text-accent);
  --link-external-color-hover: var(--text-accent-hover);
  --link-external-filter: none;
  --link-weight: var(--font-weight);
  --metadata-input-text-color: var(--text-normal);
  --nav-heading-color: var(--text-normal);
  --nav-heading-weight: var(--font-medium);
  --nav-indentation-guide-color: var(--indentation-guide-color);
  --nav-indentation-guide-width: var(--indentation-guide-width);
  --nav-item-background-active: var(--background-modifier-hover);
  --nav-item-children-margin-start: var(--size-4-3);
  --nav-item-children-padding-start: var(--size-2-2);
  --nav-item-color: var(--text-muted);
  --nav-item-color-active: var(--text-normal);
  --nav-item-padding: var(--size-4-1) var(--size-4-2) var(--size-4-1) var(--size-4-6);
  --nav-item-size: var(--font-ui-small);
  --nav-item-weight: inherit;
  --nav-item-weight-active: inherit;
  --p-spacing: 1rem;
  --popover-max-height: 95vh;
  --prompt-border-color: var(--color-base-40, var(--background-modifier-border-focus));
  --prompt-border-width: var(--border-width);
  --prompt-input-height: 40px;
  --radius-l: 12px;
  --radius-m: 8px;
  --radius-s: 4px;
  --search-icon-color: var(--text-muted);
  --size-2-1: 2px;
  --size-2-2: 4px;
  --size-4-1: 4px;
  --size-4-12: 48px;
  --size-4-2: 8px;
  --size-4-3: 12px;
  --size-4-4: 16px;
  --size-4-6: 24px;
  --tag-background: hsla(var(--interactive-accent-hsl), 0.1);
  --tag-background-hover: hsla(var(--interactive-accent-hsl), 0.2);
  --tag-border-color: hsla(var(--interactive-accent-hsl), 0.15);
  --tag-border-color-hover: hsla(var(--interactive-accent-hsl), 0.15);
  --tag-border-width: 0px;
  --tag-color: var(--text-accent);
  --tag-color-hover: var(--text-accent);
  --tag-decoration: none;
  --tag-decoration-hover: none;
  --tag-radius: 2em;
  --tag-weight: inherit;
  --text-accent: var(--color-accent);
  --text-accent-hover: var(--color-accent-2);
  --text-faint: var(--color-base-50);
  --text-highlight-bg: rgba(var(--text-highlight-bg-rgb), 0.4);
  --text-highlight-bg-rgb: 255, 208, 0;
  --text-muted: var(--color-base-70);
  --text-normal: var(--color-base-100);
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  background: none;
  background-color: var(--background-primary);
  caret-color: var(--caret-color);
  color: var(--text-normal);
  contain: initial;
  font-family: var(--font-text);
  font-size: var(--font-ui-medium);
  height: 100%;
  line-height: var(--line-height-tight);
  margin: 0;
  overflow: initial;
  overscroll-behavior: none;
  padding: 0;
  padding-top: 0;
  text-rendering: optimizeLegibility;
  user-select: none;
  width: 100%;
}
/* START DARK */
:root[saved-theme="dark"],
html[saved-theme="dark"] {
  --background-modifier-form-field: var(--color-base-25);
  --background-primary: rgb(25, 18, 63);
  --background-secondary: var(--background-secondary-dark, rgb(45, 45, 45));
  --code-background: var(--code-background-dark, rgb(33, 19, 19));
  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --color-accent-1: hsl(
    calc(var(--accent-h) - 3),
    calc(var(--accent-s) * 1.02),
    calc(var(--accent-l) * 1.15)
  );
  --color-accent-2: hsl(
    calc(var(--accent-h) - 5),
    calc(var(--accent-s) * 1.05),
    calc(var(--accent-l) * 1.29)
  );
  --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
  --color-base-00: #1e1e1e;
  --color-base-10: #242424;
  --color-base-100: #dadada;
  --color-base-20: #262626;
  --color-base-25: #2a2a2a;
  --color-base-30: #363636;
  --color-base-35: #3f3f3f;
  --color-base-40: #555555;
  --color-base-50: #666666;
  --color-base-70: #b3b3b3;
  --color-blue: #027aff;
  --color-blue-rgb: 2, 122, 255;
  --color-cyan: #53dfdd;
  --color-cyan-rgb: 83, 223, 221;
  --color-green: #44cf6e;
  --color-green-rgb: 68, 207, 110;
  --color-orange: #e9973f;
  --color-orange-rgb: 233, 151, 63;
  --color-pink: #fa99cd;
  --color-purple: #a882ff;
  --color-purple-rgb: 168, 130, 255;
  --color-red: #fb464c;
  --color-red-rgb: 251, 70, 76;
  --color-yellow: #e0de71;
  --highlight-mix-blend-mode: darken;
  --interactive-accent: var(--color-accent);
  --interactive-accent-hover: var(--color-accent-1);
  --mono-rgb-100: 255, 255, 255;
  --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112),
    0px 30px 90px rgba(0, 0, 0, 0.2);
  --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.121), 0px 3.4px 6.7px rgba(0, 0, 0, 0.179),
    0px 15px 30px rgba(0, 0, 0, 0.3);
  --text-accent: var(--color-accent-1);
  --text-normal: #ffffff;
  color-scheme: dark;
  code[data-theme*=" "] {
    color: var(--shiki-dark);
    background-color: var(--shiki-dark-bg);
  }
  code[data-theme*=" "] span {
    color: var(--shiki-dark);
  }
}
/* END DARK */
/* START LIGHT */
:root[saved-theme="light"],
html[saved-theme="light"] {
  --background-primary: rgb(255, 250, 205);
  --background-secondary: var(--background-secondary-light, rgb(240, 240, 240));
  --code-background: var(--code-background-light, rgb(255, 255, 255));
  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --color-accent-1: hsl(
    calc(var(--accent-h) - 1),
    calc(var(--accent-s) * 1.01),
    calc(var(--accent-l) * 1.075)
  );
  --color-accent-2: hsl(
    calc(var(--accent-h) - 3),
    calc(var(--accent-s) * 1.02),
    calc(var(--accent-l) * 1.15)
  );
  --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
  --color-base-00: #ffffff;
  --color-base-10: #fafafa;
  --color-base-100: #222222;
  --color-base-20: #f6f6f6;
  --color-base-25: #e3e3e3;
  --color-base-30: #e0e0e0;
  --color-base-35: #d4d4d4;
  --color-base-40: #bdbdbd;
  --color-base-50: #ababab;
  --color-base-70: #5c5c5c;
  --color-blue: #086ddd;
  --color-blue-rgb: 8, 109, 221;
  --color-cyan: #00bfbc;
  --color-cyan-rgb: 0, 191, 188;
  --color-green: #08b94e;
  --color-green-rgb: 8, 185, 78;
  --color-orange: #ec7500;
  --color-orange-rgb: 236, 117, 0;
  --color-pink: #d53984;
  --color-purple: #7852ee;
  --color-purple-rgb: 120, 82, 238;
  --color-red: #e93147;
  --color-red-rgb: 233, 49, 71;
  --color-yellow: #e0ac00;
  --highlight-mix-blend-mode: darken;
  --mono-rgb-100: 0, 0, 0;
  --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112),
    0px 30px 90px rgba(0, 0, 0, 0.2);
  --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028), 0px 3.4px 6.7px rgba(0, 0, 0, 0.042),
    0px 15px 30px rgba(0, 0, 0, 0.07);
  --text-normal: #0c0909;
  color-scheme: light;
  code[data-theme*=" "] {
    color: var(--shiki-light);
    background-color: var(--shiki-light-bg);
  }
  code[data-theme*=" "] span {
    color: var(--shiki-light);
  }
}
/* END LIGHT */
/* CALLOUTS */
:root,
html {
  .callout {
    --callout-color: var(--callout-default);
    background-color: rgba(var(--callout-color), 0.1);
    border-color: rgba(var(--callout-color), var(--callout-border-opacity));
    border-radius: var(--callout-radius);
    border-style: solid;
    border-width: var(--callout-border-width);
    margin: 1em 0;
    mix-blend-mode: var(--callout-blend-mode);
    overflow: hidden;
    padding: var(--callout-padding);
    background-color: rgba(var(--callout-color), 0.1);
    overflow-x: auto;
    overflow-y: hidden;
    &[data-callout] {
      --callout-color: var(--callout-default);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="abstract"] {
      --callout-color: var(--callout-summary);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="summary"] {
      --callout-color: var(--callout-summary);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="tldr"] {
      --callout-color: var(--callout-summary);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="info"] {
      --callout-color: var(--callout-info);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="todo"] {
      --callout-color: var(--callout-todo);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="important"] {
      --callout-color: var(--callout-important);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="tip"] {
      --callout-color: var(--callout-tip);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="hint"] {
      --callout-color: var(--callout-tip);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="success"] {
      --callout-color: var(--callout-success);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="check"] {
      --callout-color: var(--callout-success);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="done"] {
      --callout-color: var(--callout-success);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="question"] {
      --callout-color: var(--callout-question);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="help"] {
      --callout-color: var(--callout-question);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="faq"] {
      --callout-color: var(--callout-question);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="warning"] {
      --callout-color: var(--callout-warning);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="caution"] {
      --callout-color: var(--callout-warning);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="attention"] {
      --callout-color: var(--callout-warning);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="failure"] {
      --callout-color: var(--callout-fail);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="fail"] {
      --callout-color: var(--callout-fail);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="missing"] {
      --callout-color: var(--callout-fail);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="danger"] {
      --callout-color: var(--callout-error);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="error"] {
      --callout-color: var(--callout-error);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="bug"] {
      --callout-color: var(--callout-bug);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="example"] {
      --callout-color: var(--callout-example);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="quote"] {
      --callout-color: var(--callout-quote);
      background-color: rgba(var(--callout-color), 0.1);
    }
    &[data-callout="cite"] {
      --callout-color: var(--callout-quote);
      background-color: rgba(var(--callout-color), 0.1);
    }
  }
  .callout-title {
    align-items: flex-start;
    color: rgb(var(--callout-color));
    display: flex;
    font-size: var(--callout-title-size);
    gap: var(--size-4-1);
    line-height: var(--line-height-tight);
    padding: var(--callout-title-padding);
    & > .callout-title-inner > p {
      --font-weight: var(--callout-title-weight);
      color: var(--callout-title-color);
      font-weight: var(--font-weight);
    }
    .callout-title-inner {
      --font-weight: var(--callout-title-weight);
      color: var(--callout-title-color);
      font-weight: var(--font-weight);
    }
  }
  & > .callout-content {
    background-color: var(--callout-content-background);
    overflow-x: auto;
    padding: var(--callout-content-padding);
  }
}
body {
  --quartz-text-highlight: var(--text-highlight-bg, var(--background-modifier-hover)) !important;
  background-color: var(--background-primary);
  section,
  .page > #quartz-body .sidebar {
    &.left,
    &.left:has(.explorer),
    &.right {
      background-color: var(--background-primary);
    }
  }
  .highlight,
  ::selection,
  ::-moz-selection {
    background: var(--quartz-text-highlight, var(--tertiary));
  }
  /* LINKS */
  a,
  footer a {
    --font-weight: var(--link-weight);
    color: var(--text-a, var(--link-color));
    font-weight: var(--link-weight);
    outline: none;
    /* text-decoration-line: var(--link-decoration); */
    /* text-decoration-thickness: var(--link-decoration-thickness); */
    cursor: var(--cursor-link);
    transition: opacity 0.15s ease-in-out;
    background-position: center right;
    background-repeat: no-repeat;
    &:hover {
      color: var(--text-a-hover, var(--link-color-hover));
      /* text-decoration-line: var(--link-decoration-hover); */
    }
    &.internal {
      color: var(--text-a, var(--link-color));
      background-color: color-mix(in srgb, var(--text-a, var(--link-color)), #0000 85%);
      &.tag-link {
        --highlight-fallback: 258, 88%, 66%;
        color: var(--tag-color, var(--text-accent));
        text-decoration: var(--tag-decoration, none);
        background-color: var(
          --tag-background,
          hsla(
            var(--interactive-accent-hsl, var(--color-accent-hsl, var(--highlight-fallback))),
            0.1
          )
        );
        &:hover {
          color: var(--tag-color-hover, var(--text-accent));
          text-decoration: var(--tag-decoration-hover, none);
          background-color: var(
            --tag-background-hover,
            hsla(var(--interactive-accent-hsl, var(--highlight-fallback)), 0.2)
          );
        }
      }
    }
    &.external {
      color: var(--link-external-color);
      /* text-decoration-line: var(--link-external-decoration); */
      background-position: center right;
      background-repeat: no-repeat;
      background-image: linear-gradient(transparent, transparent);
      background-color: transparent;
      /* background-size: 13px; */
      /* padding-inline-end: 16px; */
      /* background-position-y: 4px; */
      cursor: var(--cursor-link);
      filter: var(--link-external-filter);
      transition: opacity 0.15s ease-in-out;
      &:hover {
        color: var(--link-external-color-hover);
        /* text-decoration-line: var(--link-external-decoration-hover); */
      }
    }
  }
  /* TAGS */
  a.tag {
    background-color: var(--tag-background);
    border: var(--tag-border-width) solid var(--tag-border-color);
    border-radius: var(--tag-radius);
    color: var(--tag-color);
    /* font-size: var(--tag-size); */
    font-weight: var(--tag-weight);
    /* text-decoration: var(--tag-decoration); */
    /* padding: var(--tag-padding-y) var(--tag-padding-x); */
    /* line-height: 1; */
    &:hover {
      background-color: var(--tag-background-hover);
      border: var(--tag-border-width) solid var(--tag-border-color-hover);
      color: var(--tag-color-hover);
      text-decoration: var(--tag-decoration-hover);
    }
  }
  input[type="checkbox"] {
    appearance: none;
    appearance: none;
    border-radius: var(--checkbox-radius);
    border: 1px solid var(--checkbox-border-color);
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    margin-inline-end: 6px;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    position: relative;
    transition: box-shadow 0.15s ease-in-out;
  }
  input[type="checkbox"]:hover,
  input[type="checkbox"]:active,
  input[type="checkbox"]:focus {
    outline: 0;
    border-color: var(--checkbox-border-color-hover);
  }
  input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
  }
  input[type="checkbox"]:checked:after {
    content: "";
    top: -1px;
    inset-inline-start: -1px;
    position: absolute;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    display: block;
    background-color: var(--checkbox-marker-color);
    mask-position: 52% 52%;
    mask-size: 65%;
    mask-repeat: no-repeat;
    mask-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23000000"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
  }
  input[type="checkbox"]:checked {
    background-color: var(--checkbox-color);
    border-color: var(--checkbox-color);
  }
  @media (hover: hover) {
    input[type="checkbox"]:checked:hover {
      background-color: var(--checkbox-color-hover);
      border-color: var(--checkbox-color-hover);
    }
  }
  input[type="checkbox"][data-indeterminate="true"]:not(:checked):after {
    content: "";
    position: absolute;
    top: calc(var(--checkbox-size) / 2 - 2px);
    width: calc(var(--checkbox-size) - 6px);
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 2px;
    display: block;
    border-radius: 2px;
    background-color: var(--text-normal);
  }
  /* HEADINGS */
  h1 {
    --font-weight: var(--h1-weight);
    color: var(--h1-color);
    font-family: var(--h1-font);
    font-size: var(--h1-size);
    font-style: var(--h1-style);
    font-variant: var(--h1-variant);
    font-weight: var(--font-weight);
    letter-spacing: -0.015em;
    line-height: var(--h1-line-height);
    margin-block-end: var(--p-spacing);
    margin-block-start: var(--p-spacing);
  }
  h1 a {
    --link-weight: var(--h1-weight);
  }
  h2 {
    --font-weight: var(--h2-weight);
    color: var(--h2-color);
    font-family: var(--h2-font);
    font-size: var(--h2-size);
    font-style: var(--h2-style);
    font-variant: var(--h2-variant);
    font-weight: var(--font-weight);
    letter-spacing: -0.015em;
    line-height: var(--h2-line-height);
    margin-block-end: var(--p-spacing);
    margin-block-start: var(--p-spacing);
  }
  h2 a {
    --link-weight: var(--h2-weight);
  }
  h3 {
    --font-weight: var(--h3-weight);
    color: var(--h3-color);
    font-family: var(--h3-font);
    font-size: var(--h3-size);
    font-style: var(--h3-style);
    font-variant: var(--h3-variant);
    font-weight: var(--font-weight);
    letter-spacing: -0.015em;
    line-height: var(--h3-line-height);
    margin-block-end: var(--p-spacing);
    margin-block-start: var(--p-spacing);
  }
  h3 a {
    --link-weight: var(--h3-weight);
  }
  h4 {
    --font-weight: var(--h4-weight);
    color: var(--h4-color);
    font-family: var(--h4-font);
    font-size: var(--h4-size);
    font-style: var(--h4-style);
    font-variant: var(--h4-variant);
    font-weight: var(--font-weight);
    letter-spacing: 0.015em;
    line-height: var(--h4-line-height);
    margin-block-end: var(--p-spacing);
    margin-block-start: var(--p-spacing);
  }
  h4 a {
    --link-weight: var(--h4-weight);
  }
  h5 {
    --font-weight: var(--h5-weight);
    color: var(--h5-color);
    font-family: var(--h5-font);
    font-size: var(--h5-size);
    font-style: var(--h5-style);
    font-variant: var(--h5-variant);
    font-weight: var(--font-weight);
    letter-spacing: 0.015em;
    line-height: var(--h5-line-height);
    margin-block-end: var(--p-spacing);
    margin-block-start: var(--p-spacing);
  }
  h5 a {
    --link-weight: var(--h5-weight);
  }
  h6 {
    --font-weight: var(--h6-weight);
    color: var(--h6-color);
    font-family: var(--h6-font);
    font-size: var(--h6-size);
    font-style: var(--h6-style);
    font-variant: var(--h6-variant);
    font-weight: var(--font-weight);
    letter-spacing: 0.015em;
    line-height: var(--h6-line-height);
    margin-block-end: var(--p-spacing);
    margin-block-start: var(--p-spacing);
  }
  h6 a {
    --link-weight: var(--h6-weight);
  }
  /* CODE */
  pre {
    background-color: var(--code-background);
    border: var(--code-border-width) solid var(--code-border-color);
    border-radius: var(--code-radius);
    min-height: 38px;
    overflow-x: auto;
    padding: var(--size-4-3) var(--size-4-4);
    position: relative;
    white-space: var(--code-white-space);
    white-space: pre;
    & > code {
      background-color: transparent;
      border: none;
      padding: 0;
    }
  }
  code {
    -webkit-box-decoration-break: clone;
    background-color: var(--code-background);
    border: var(--code-border-width) solid var(--code-border-color);
    border-radius: var(--code-radius);
    color: var(--code-normal);
    font-family: var(--font-monospace);
    font-size: var(--code-size);
    padding: 0.15em 0.3em;
    background-color: var(--code-background);
    //color: var(--code-color);
    span[style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"] {
      //color: var(--code-value) !important;
      color: var(--color-purple) !important;
    }
    span[style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"] {
      //color: var(--code-function) !important;
      color: var(--color-blue) !important;
    }
    span[style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"] {
      //color: var(--code-string) !important;
      color: var(--color-cyan) !important;
    }
    span[style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;"] {
      //color: var(--code-property) !important;
      color: var(--code-yellow) !important;
    }
    span[style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"] {
      //color: var(--code-normal) !important;
      color: var(--code-normal) !important;
    }
    span[style="--shiki-light:#586069;--shiki-dark:#D1D5DA;"] {
      //color: var(--code-punctuation) !important;
      color: var(--text-muted) !important;
    }
    span[style="--shiki-light:#F6F8FA;--shiki-dark:#2F363D;"] {
      //color: var(--code-comment) !important;
      color: var(--text-faint) !important;
    }
    span[style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"] {
      //color: var(--code-comment) !important;
      color: var(--code-comment) !important;
    }
    span[style="--shiki-light:#22863A;--shiki-dark:#85E89D;"] {
      //color: var(--code-tag) !important;
      color: var(--color-green) !important;
    }
    span[style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"] {
      //color: var(--code-important) !important;
      color: var(--color-orange) !important;
    }
    span[style="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;"] {
      //color: var(--text-operator) !important;
      color: var(--color-pink) !important;
    }
    span[style="--shiki-light:#D73A49;--shiki-dark:#F97583;"] {
      //color: var(--code-keyword) !important;
      color: var(--color-red) !important;
    }
  }
  .clipboard-button {
    background-color: transparent;
    box-shadow: none;
    color: var(--text-muted);
    font-family: var(--font-interface);
    font-size: var(--font-ui-smaller);
    height: auto;
    inset-inline-end: 0;
    margin: 6px;
    padding: 6px 8px;
    position: absolute;
    top: 0;
    &:hover {
      background-color: var(--background-modifier-hover);
    }
    & > svg {
      fill: var(--search-icon-color, var(--text-muted, var(--darkgray)));
    }
  }
  /* METADATA */
  .content-meta {
    color: var(--metadata-input-text-color);
  }
  /* BREADCRUMBS */
  .breadcrumbs-element p {
    color: var(--text-faint);
  }
  /* BACKLINKS */
  .backlinks {
    h3 {
      --font-weight: var(--h3-weight);
      color: var(--h3-color);
      font-family: var(--h3-font);
      font-size: var(--h3-size);
      font-style: var(--h3-style);
      font-variant: var(--h3-variant);
      font-weight: var(--font-weight);
      letter-spacing: -0.015em;
      line-height: var(--h3-line-height);
      margin-block-end: var(--p-spacing);
      margin-block-start: var(--p-spacing);
    }
    ul li {
      color: var(--nav-heading-color);
      font-weight: var(--nav-heading-weight);
    }
  }
  /* EXPLORER */
  .explorer {
    @media all and ($mobile) {
      &:not(.collapsed) > .explorer-content {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
      }
    }
    .explorer-content {
      @media all and ($mobile) {
        background-color: var(--background-primary);
      }
      .folder-container {
        --folder-closed-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 5h-8.586L9.707 3.293A.997.997 0 0 0 9 3H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V7c0-1.103-.897-2-2-2zM4 19V7h16l.002 12H4z"></path></svg>');
        --folder-open-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.165 19.551c.186.28.499.449.835.449h15c.4 0 .762-.238.919-.606l3-7A.998.998 0 0 0 21 11h-1V8c0-1.103-.897-2-2-2h-6.655L8.789 4H4c-1.103 0-2 .897-2 2v13h.007a1 1 0 0 0 .158.551zM18 8v3H6c-.4 0-.762.238-.919.606L4 14.129V8h14z"></path></svg>');
        color: var(--icon-color);
        text-overflow: ellipsis;
        position: relative;
        & > svg {
          opacity: 0.001;
          position: absolute;
        }
        &:before {
          width: 16px;
          height: 16px;
          min-width: 16px;
          min-height: 16px;
          display: flex;
          align-self: center;
          background: var(--icon-color);
          content: "";
        }
        & > div {
          width: 100%;
        }
      }
      li:has(> .folder-outer:not(.open)) > .folder-container:before {
        background: var(--collapse-icon-color-collapsed, var(--icon-color));
        mask-image: var(--folder-closed-icon);
        -webkit-mask-image: var(--folder-closed-icon);
      }
      li:has(> .folder-outer.open) > .folder-container:before {
        background: var(--collapse-icon-color, var(--icon-color));
        mask-image: var(--folder-open-icon);
        -webkit-mask-image: var(--folder-open-icon);
      }
      .folder-outer > ul.content {
        border-inline-start: var(--nav-indentation-guide-width) solid
          var(--nav-indentation-guide-color);
        margin-bottom: 1px;
        margin-inline-start: var(
          --nav-item-children-margin-start,
          var(--nav-item-children-margin-left)
        );
        padding-inline-start: var(
          --nav-item-children-padding-start,
          var(--nav-item-children-padding-left)
        );
      }
      ul.explorer-ul li {
        text-overflow: ellipsis;
        position: relative;
        a {
          border-radius: var(--radius-s);
          color: var(--nav-item-color);
          cursor: var(--cursor);
          display: flex;
          font-size: var(--nav-item-size);
          font-weight: var(--nav-item-weight);
          line-height: var(--line-height-tight);
          margin-bottom: var(--size-2-1);
          padding: var(--nav-item-padding);
          &.active,
          &:hover {
            background-color: var(--nav-item-background-active);
            color: var(--nav-item-color-active);
            font-weight: var(--nav-item-weight-active);
          }
          &[data-for$="/index"] {
            padding-inline-start: 8px;
          }
          padding-inline-start: 0;
        }
        > a:before {
          --file-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=""><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>');
          width: 16px;
          height: 16px;
          min-width: 16px;
          min-height: 16px;
          content: "";
          display: flex;
          align-self: center;
          background: var(--icon-color);
          mask-image: var(--file-icon);
          -webkit-mask-image: var(--file-icon);
          margin-inline-end: 8px;
        }
      }
    }
  }
  /* TOC */
  .toc {
    h3 {
      --font-weight: var(--h3-weight);
      color: var(--h3-color);
      font-family: var(--h3-font);
      font-size: var(--h3-size);
      font-style: var(--h3-style);
      font-variant: var(--h3-variant);
      font-weight: var(--font-weight);
      letter-spacing: -0.015em;
      line-height: var(--h3-line-height);
      margin-block-end: var(--p-spacing);
      margin-block-start: var(--p-spacing);
    }
    ul.toc-content.overflow {
      li,
      li > a {
        color: var(--nav-item-color);
        font-weight: var(--nav-item-weight);
        font-size: var(--nav-item-size);
      }
    }
  }
  .backlinks,
  .explorer,
  .graph,
  .toc {
    h3 {
      --font-weight: var(--h3-weight);
      color: var(--h3-color);
      font-family: var(--h3-font);
      font-size: var(--h3-size);
      font-style: var(--h3-style);
      font-variant: var(--h3-variant);
      font-weight: var(--font-weight);
      letter-spacing: -0.015em;
      line-height: var(--h3-line-height);
      margin-block-end: var(--p-spacing);
      margin-block-start: var(--p-spacing);
      min-height: calc(2 * var(--p-spacing) + var(--h3-line-height));
    }
  }
  /* ICONS */
  button.readermode {
    & > svg {
      display: none;
    }
    /* lucide book-open icon */
    --readermode-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJvb2stb3Blbi1pY29uIGx1Y2lkZS1ib29rLW9wZW4iPjxwYXRoIGQ9Ik0xMiA3djE0Ii8+PHBhdGggZD0iTTMgMThhMSAxIDAgMCAxLTEtMVY0YTEgMSAwIDAgMSAxLTFoNWE0IDQgMCAwIDEgNCA0IDQgNCAwIDAgMSA0LTRoNWExIDEgMCAwIDEgMSAxdjEzYTEgMSAwIDAgMS0xIDFoLTZhMyAzIDAgMCAwLTMgMyAzIDMgMCAwIDAtMy0zeiIvPjwvc3ZnPg==");
    background: var(--icon-color) !important;
    mask-image: var(--readermode-icon);
    -webkit-mask-image: var(--readermode-icon);
    width: 24px;
    height: 24px;
  }
  button.global-graph-icon {
    & > svg {
      display: none;
    }
    /* lucide git-fork icon */
    --graph-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWdpdC1mb3JrLWljb24gbHVjaWRlLWdpdC1mb3JrIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjE4IiByPSIzIi8+PGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjMiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjYiIHI9IjMiLz48cGF0aCBkPSJNMTggOXYyYzAgLjYtLjQgMS0xIDFIN2MtLjYgMC0xLS40LTEtMVY5Ii8+PHBhdGggZD0iTTEyIDEydjMiLz48L3N2Zz4=");
    background: var(--icon-color) !important;
    mask-image: var(--graph-icon);
    -webkit-mask-image: var(--graph-icon);
    width: 24px;
    height: 24px;
  }
  button.darkmode {
    & > svg {
      display: none !important;
    }
    /* lucide moon icon */
    --moon-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1vb24taWNvbiBsdWNpZGUtbW9vbiI+PHBhdGggZD0iTTEyIDNhNiA2IDAgMCAwIDkgOSA5IDkgMCAxIDEtOS05WiIvPjwvc3ZnPg==");
    /* lucide sun icon */
    --sun-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXN1bi1pY29uIGx1Y2lkZS1zdW4iPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjQiLz48cGF0aCBkPSJNMTIgMnYyIi8+PHBhdGggZD0iTTEyIDIwdjIiLz48cGF0aCBkPSJtNC45MyA0LjkzIDEuNDEgMS40MSIvPjxwYXRoIGQ9Im0xNy42NiAxNy42NiAxLjQxIDEuNDEiLz48cGF0aCBkPSJNMiAxMmgyIi8+PHBhdGggZD0iTTIwIDEyaDIiLz48cGF0aCBkPSJtNi4zNCAxNy42Ni0xLjQxIDEuNDEiLz48cGF0aCBkPSJtMTkuMDcgNC45My0xLjQxIDEuNDEiLz48L3N2Zz4=");
    background: var(--icon-color) !important;
    width: 24px;
    height: 24px;
  }
  .explorer svg,
  button.toc-header .fold,
  .global-graph-icon,
  .readermode,
  .darkmode {
    color: var(--icon-color);
    stroke: var(--icon-color);
  }
  /* SEARCH */
  .search {
    & > .search-button {
      -webkit-app-region: no-drag;
      background: var(--background-modifier-form-field);
      border: var(--input-border-width) solid var(--background-modifier-border);
      border-radius: var(--input-radius);
      color: var(--text-normal);
      font-family: inherit;
      font-size: var(--font-ui-small);
      height: var(--input-height);
      outline: none;
      padding: var(--size-4-1) var(--size-4-2);
      svg {
        color: var(--search-icon-color, var(--text-muted, var(--darkgray)));
        stroke: var(--search-icon-color, var(--text-muted, var(--darkgray)));
      }
    }
    & > .search-container {
      & > .search-space {
        background-color: var(--background-primary);
        border: var(--prompt-border-width) solid var(--prompt-border-color);
        border-radius: var(--radius-l);
        box-shadow: var(--shadow-l);
        margin: 12vh auto;
        & > input {
          background-color: var(--background-primary);
          border: none;
          border-bottom: 1px solid var(--background-secondary);
          border-radius: 0;
          font-size: var(--font-ui-medium);
          height: var(--prompt-input-height);
          padding: var(--size-4-6);
          padding-inline-end: var(--size-4-12);
          width: 100%;
          margin-bottom: 0;
          border-bottom: none;
          background: transparent;
        }
        & > * {
          color: var(--text-normal);
          background: transparent;
          margin-bottom: 0;
          box-shadow: none;
        }
        & > .search-layout {
          &.display-results {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
          }
          & .highlight {
            font-weight: bold;
            background-color: var(--text-highlight-bg);
            color: var(--text-normal);
          }
          & > .preview-container {
            color: var(--text-normal);
          }
          & > .results-container {
            & .result-card {
              @media all and not ($mobile) {
                display: flex;
                &.no-match {
                  display: block;
                }
              }
              &:hover,
              &:focus,
              &.focus {
                background-color: var(--background-modifier-hover);
              }
              & > ul > li > p {
                background-color: transparent;
                color: var(--text-normal);
                &.match-tag {
                  color: var(--tag-color);
                }
              }
            }
          }
        }
      }
    }
  }
  /* PAGE TITLE */
  .page-title,
  .page-title a {
    color: var(--inline-title-color, var(--h1-color, var(--link-color, var(--darkgray))));
    font-family: var(--inline-title-font, var(--h1-font, var(--font-text, inherit)));
  }
  /* GRAPH */
  .graph {
    & > .graph-outer {
      border: 1px solid var(--background-modifier-border-hover, var(--color-base-35));
      --background-modifier-border-focus: var(--color-base-40);
      & > .global-graph-icon {
        color: var(--search-icon-color, var(--text-muted, var(--darkgray)));
        &:hover {
          background-color: var(--background-modifier-hover);
        }
      }
    }
    & > .global-graph-outer {
      & > .global-graph-container {
        border: 1px solid var(--background-modifier-border-hover, var(--color-base-35));
        background-color: var(--background-primary);
      }
    }
  }
  /* MISC */
  hr {
    border: none;
    border-top: var(--hr-thickness, 2px) solid;
    border-color: var(--hr-color, var(--background-modifier-border, var(--lightgray)));
  }
  details.toc {
    & summary {
      cursor: pointer;
      &::marker {
        color: var(--text-muted);
      }
    }
  }
  /* POPOVER */
  .popover {
    background-color: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-s);
    display: flex;
    max-height: var(--popover-max-height);
    position: absolute;
    z-index: var(--layer-popover);
    display: block;
    position: fixed;
    z-index: 999;
    background-color: unset;
    border: unset;
    & .popover-inner {
      border: 1px solid var(--background-modifier-border);
      background-color: var(--background-primary);

      border-radius: var(--radius-m);
    }
  }
  /* BACKGROUNDS */
  section {
    background-color: var(--background-primary);
  }
  .page > #quartz-body {
    .sidebar {
      background-color: var(--background-primary);
      &.left:has(.explorer) {
        background-color: var(--background-primary);
      }
    }
  }
  /* TEXT */
  .page article p > strong,
  strong {
    color: var(--bold-color);
    font-weight: var(--bold-weight);
  }
  .page article p > i,
  .page article p > em,
  i,
  em {
    color: var(--italic-color);
    font-style: italic;
  }
  .page article p,
  .page article ul,
  .page article text,
  .page article tr,
  .page article td,
  .page article li,
  .page article ol,
  .page article ul,
  .page article .katex,
  .page article .math,
  p,
  ul,
  text,
  tr,
  td,
  li,
  ol,
  ul,
  .katex,
  .math {
    color: var(--text-normal);
    font-family: var(--font-text, var(--font-default));
    hyphens: none;
  }
  .page article a,
  a {
    font-family: var(--font-text, var(--font-default));
    hyphens: none;
  }
  /* override user-select */
  user-select: text;
  -webkit-user-select: text;
}
:root[saved-theme="light"] {
  button.darkmode {
    mask-image: var(--sun-icon);
    -webkit-mask-image: var(--sun-icon);
  }
}
:root[saved-theme="dark"] {
  button.darkmode {
    mask-image: var(--moon-icon);
    -webkit-mask-image: var(--moon-icon);
  }
}
/* FONT OVERRIDES */
:root:root:root {
}
/* START CANVAS GRAPH WORKAROUND */
/* START LIGHT GRAPH */
:root:root[saved-theme="light"] {
  --highlight-fallback: 258, 88%, 66%;
  --lightgray: var(
    --graph-line,
    var(
      --color-base-35,
      var(
        --background-modifier-border-focus,
        var(--background-modifier-border, var(--color-base-30, #e0e0e0))
      )
    )
  ) !important;
  --darkgray: var(
    --graph-node-unresolved,
    var(--text-faint, var(--text-normal, var(--color-base-100, #222222)))
  ) !important;
  --tertiary: var(
    --graph-node-tag,
    var(
      --color-green,
      var(--link-color-hover, var(--text-accent-hover, var(--color-accent-2, #a386f9)))
    )
  ) !important;
}
/* END LIGHT GRAPH */
/* START DARK GRAPH */
:root:root[saved-theme="dark"] {
  --highlight-fallback: 258, 88%, 66%;
  --lightgray: var(
    --graph-line,
    var(
      --color-base-35,
      var(
        --background-modifier-border-focus,
        var(--background-modifier-border, var(--color-base-30, #363636))
      )
    )
  ) !important;
  --darkgray: var(
    --graph-node-unresolved,
    var(--text-faint, var(--text-normal, var(--color-base-100, #dadada)))
  ) !important;
  --tertiary: var(
    --graph-node-tag,
    var(
      --color-green,
      var(--link-color-hover, var(--text-accent-hover, var(--color-accent-2, #c5b6fc)))
    )
  ) !important;
}
/* END DARK GRAPH */
/* END CANVAS GRAPH WORKAROUND */