/* GENERATED by build.ts from publish.src.css (+ theme.common.css) — DO NOT EDIT. */

/* @settings

name: Apathy Theme
id: apathy-theme
settings:
  -
    id: typography
    title: Typography
    type: heading
    level: 2
    collapsed: true
  -
    id: font-text-size
    title: Text size
    type: variable-number-slider
    default: 16
    min: 12
    max: 24
    step: 1
    format: px
  -
    id: font-small
    title: Small text size
    type: variable-number-slider
    default: 13
    min: 10
    max: 18
    step: 1
    format: px
  -
    id: layout
    title: Layout
    type: heading
    level: 2
    collapsed: true
  -
    id: apathy-hide-title
    title: Hide page title
    description: Hide the rendered page title in Obsidian and Obsidian Publish.
    type: class-toggle
  -
    id: image-radius
    title: Image radius
    type: variable-number-slider
    default: 8
    min: 0
    max: 24
    step: 1
    format: px
  -
    id: callouts
    title: Callouts
    type: heading
    level: 2
    collapsed: true
  -
    id: callout-radius
    title: Callout radius
    type: variable-number-slider
    default: 8
    min: 0
    max: 24
    step: 1
    format: px
  -
    id: callout-border-width
    title: Callout border width
    type: variable-number-slider
    default: 1
    min: 0
    max: 4
    step: 1
    format: px
  -
    id: cards
    title: Cards
    type: heading
    level: 2
    collapsed: true
  -
    id: cards-min-width
    title: Card minimum width
    type: variable-number-slider
    default: 180
    min: 120
    max: 360
    step: 10
    format: px
  -
    id: cards-padding
    title: Card padding
    type: variable-number-slider
    default: 1.2
    min: 0.5
    max: 3
    step: 0.1
    format: em
  -
    id: cards-image-height
    title: Card image height
    type: variable-number-slider
    default: 400
    min: 120
    max: 720
    step: 20
    format: px
  -
    id: cards-image-fit
    title: Card image fit
    type: variable-select
    default: contain
    options:
      -
        label: Contain
        value: contain
      -
        label: Cover
        value: cover
      -
        label: Fill
        value: fill
  -
    id: image-grid
    title: Image grid
    type: heading
    level: 2
    collapsed: true
  -
    id: img-grid-gap
    title: Image grid gap
    type: variable-number-slider
    default: 0.5
    min: 0
    max: 2
    step: 0.05
    format: rem
  -
    id: img-grid-fit
    title: Image grid fit
    type: variable-select
    default: cover
    options:
      -
        label: Cover
        value: cover
      -
        label: Contain
        value: contain
      -
        label: Fill
        value: fill

*/

@font-face {
  font-family: Monaspace Argon;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("https://cdn.jsdelivr.net/gh/githubnext/monaspace@v1.400/fonts/Web%20Fonts/Variable%20Web%20Fonts/Monaspace%20Argon/Monaspace%20Argon%20Var.woff") format("woff");
}

@font-face {
  font-family: Monaspace Neon;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("https://cdn.jsdelivr.net/gh/githubnext/monaspace@v1.400/fonts/Web%20Fonts/Variable%20Web%20Fonts/Monaspace%20Neon/Monaspace%20Neon%20Var.woff") format("woff");
}

@font-face {
  font-family: Montserrat Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/montserrat:vf@latest/latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: auto;
  font-weight: 100 900;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-opsz-normal.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3 Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/source-sans-3:vf@latest/latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4 Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/source-serif-4:vf@latest/latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body:is(.blog-post, :has(.blog-post)), body:is(.blog-post, :has(.blog-post)) :is(.markdown-preview-view, .markdown-rendered, .markdown-source-view.mod-cm6, .published-container) {
  --blog-background: #010101;
  --blog-surface: #09090b;
  --blog-border: #18181b;
  --blog-text: #bcc1c8;
  --blog-muted: lab(65.6464% 1.53497 -5.42429);
  --blog-faint: #71717a;
  --blog-link: #fff;
  --blog-font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --file-line-width: 640px;
  --blog-feed-line-width: 768px;
  --blog-feed-top-offset: 4rem;
  --blog-feed-hero-gap: 4rem;
  --blog-feed-row-gap: 3rem;
  --blog-feed-title-size: clamp(3rem, 8vw, 5rem);
  --blog-feed-post-title-size: clamp(1.75rem, 3vw, 2.25rem);
  --font-text-size: 16px;
  --line-height-normal: 1.5em;
  --p-spacing: 1.15em;
  --heading-spacing: 2.6rem;
  --h1-size: 32px;
  --h2-size: 1.9rem;
  --h3-size: 1.35rem;
  --letter-spacing-normal: -.011em;
}

:root {
  --color-red-rgb: 217, 106, 146;
  --color-orange-rgb: 235, 216, 190;
  --color-yellow-rgb: 235, 216, 190;
  --color-green-rgb: 204, 241, 172;
  --color-cyan-rgb: 147, 167, 230;
  --color-purple-rgb: 205, 92, 242;
  --color-pink-rgb: 171, 171, 255;
  --color-red: #d96a92;
  --color-orange: #ebd8bee8;
  --color-yellow: #ebd8bee8;
  --color-green: #ccf1ac;
  --color-cyan: #93a7e6f0;
  --color-purple: #cd5cf2;
  --color-pink: #ababff;
  --accent-h: 210.73;
  --accent-s: 50.78%;
  --accent-l: 75.29%;
  --bg1: #09090b;
  --bg2: #07070944;
  --bg3: #10101b;
  --divider-color: #14151ee6;
  --ui1: #14151ee6;
  --ui2: #52559e14;
  --ui3: #4b3f8166;
  --tx1: #c9d8ffd1;
  --tx2: #676597ab;
  --tx3: #2a2d4d;
  --tx4: #b4c4f4e6;
  --ax1: #9a8ff1cf;
  --ax2: #a59afdcf;
  --ax3: #9a8ff1cf;
  --hl1: #2d3143f3;
  --mono100: white;
  --mono0: black;
  --font-monospace-default: "Monaspace Neon";
  --font-interface-theme: "Inter Variable";
  --font-interface: var(--font-interface-theme, var(--font-default));
  --font-text-theme: "Inter Variable";
  --font-text: var(--font-text-theme), var(--font-default);
  --font-monospace-theme: var(--font-monospace-default);
  --font-monospace: var(--font-monospace-theme), var(--font-monospace-default);
  --font-mermaid: var(--font-text);
  --font-text-size: 13px;
  --blog-font-family: var(--font-text);
  --font-sans: var(--font-interface-theme);
  --font-mono: var(--font-monospace-default);
}

.callout[data-callout="note"], .callout[data-callout="abstract"], .callout[data-callout="summary"], .callout[data-callout="tldr"], .callout[data-callout="example"] {
  --callout-color: 180, 231, 223;
}

.callout[data-callout="info"], .callout[data-callout="todo"] {
  --callout-color: 147, 167, 230;
}

.callout[data-callout="tip"], .callout[data-callout="success"], .callout[data-callout="check"], .callout[data-callout="done"] {
  --callout-color: 204, 241, 172;
}

.callout[data-callout="question"], .callout[data-callout="help"], .callout[data-callout="faq"], .callout[data-callout="warning"], .callout[data-callout="caution"], .callout[data-callout="attention"] {
  --callout-color: 235, 216, 190;
}

.callout[data-callout="failure"], .callout[data-callout="fail"], .callout[data-callout="missing"], .callout[data-callout="danger"], .callout[data-callout="error"], .callout[data-callout="bug"] {
  --callout-color: 217, 106, 146;
}

.callout[data-callout="quote"] {
  --callout-color: 103, 101, 151;
}

.font-mono {
  font-family: var(--font-monospace);
}

body {
  text-rendering: optimizelegibility;
  font-size: 14px;
}

body:is(.blog-post, :has(.blog-post)) .post-date {
  color: #8294ba;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-monospace);
  text-transform: uppercase;
}

body :is(.markdown-source-view.mod-cm6, .markdown-source-view.mod-cm6.blog-post) {
  letter-spacing: -.4px;
  font-size: 14px;
  font-weight: 200;
}

:is(.markdown-reading-view, .markdown-preview-view) {
  font-weight: 300;
}

body :is(.markdown-source-view.mod-cm6, .markdown-source-view.mod-cm6.blog-post) p, :is(.markdown-reading-view, .markdown-preview-view, .markdown-rendered) p {
  line-height: var(--line-height-normal);
}

body :is(.markdown-source-view.mod-cm6, .markdown-source-view.mod-cm6.blog-post) .cm-content {
  font-family: var(--font-monospace);
  letter-spacing: -.2px;
  text-rendering: optimizelegibility;
  font-feature-settings: "calt" 1, "opsz" 1;
  font-kerning: auto;
  -webkit-font-smoothing: antialiased;
  font-weight: 310;
  line-height: 1.4em;
}

body :is(.markdown-source-view.mod-cm6, .markdown-source-view.mod-cm6.blog-post) .cm-content :is(h1, h2, h3, h4, h5, h6, .cm-header) {
  text-rendering: optimizelegibility;
  font-feature-settings: "calt" 1, "opsz" 1;
  font-kerning: auto;
  -webkit-font-smoothing: antialiased;
  font-weight: 700;
  line-height: 1.5em;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index {
  color: #fff;
  width: 100%;
  font-family: var(--blog-font-family);
  background: none;
  margin: 0;
  padding: 0;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__hero {
  margin-bottom: 32px;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__title {
  color: #fff;
  max-width: none;
  font-family: var(--blog-font-family);
  font-size: var(--blog-feed-title-size);
  letter-spacing: -.06em;
  margin: 0 0 1rem;
  font-weight: 650;
  line-height: .95;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__intro {
  color: lab(65.6464% 1.53497 -5.42429);
  max-width: 42rem;
  font-family: var(--blog-font-family);
  opacity: .8;
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.7;
}

body:is(.blog-index, .blog-feed, :has(.blog-index, .blog-feed)) .el-h2 h2 {
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.2px;
  font-family: Montserrat Variable;
  font-size: 20px;
  font-weight: 600;
  border-top: 1px solid var(--blog-border) !important;
  margin-top: 2.5rem !important;
  padding-top: 1.5rem !important;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__meta {
  color: var(--text-muted);
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-family: Monaspace Argon;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.4;
}

body:is(.blog-index, .blog-feed, :has(.blog-index, .blog-feed)) .el-h2 + .el-p p {
  color: var(--blog-muted);
  margin-top: .3rem;
  font-size: 18px;
  line-height: 30.6px;
}

body:is(.blog-index, .blog-feed, :has(.blog-index, .blog-feed)) .post-date {
  color: var(--blog-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  font-family: var(--font-monospace);
  text-transform: uppercase;
}

body:is(.blog-index, .blog-feed, :has(.blog-index, .blog-feed)) .el-h2 h2 a {
  color: var(--blog-muted) !important;
  text-decoration: none !important;
}

body:is(.blog-index, .blog-feed, :has(.blog-index, .blog-feed)) .el-h2 h2 a:hover {
  color: var(--blog-muted) !important;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__post-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__post {
  color: var(--text-muted);
  padding: 32px 0;
  line-height: 24px;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__post-title {
  color: #fff;
  max-width: none;
  font-family: var(--blog-font-family);
  letter-spacing: -.02em;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  border: none !important;
  margin: 16px 0 !important;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__summary {
  max-width: 44rem;
  color: var(--blog-muted);
  font-family: var(--blog-font-family);
  margin: .85rem 0 0;
  font-size: 1rem;
  line-height: 1.7;
}

body:is(.blog-feed, :has(.blog-feed)) .dm-blog-index__post-link:hover .dm-blog-index__post-title {
  color: var(--blog-link);
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__post {
  border-top: 1px solid var(--blog-border);
  padding: 32px 0;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__post:first-child {
  border-top: none;
  padding-top: 0;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__post {
  margin: 0;
  border-top: 1px solid #27272a !important;
  padding: 55px 0 48px !important;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__post:first-child {
  padding-top: 0;
  border-top: none !important;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__meta {
  color: #71717a !important;
  letter-spacing: normal !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  display: flex !important;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__post-title {
  letter-spacing: -.22px !important;
  color: #fff !important;
  border: none !important;
  max-width: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__summary {
  color: #a1a1aa !important;
  max-width: 44rem !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}

body:is(.blog-feed, :has(.blog-feed)) .dm-blog-index__post-link:hover .dm-blog-index__post-title {
  color: #d4d4d8 !important;
  transition: color .15s !important;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__post-title :is(p, .el-p) {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__post-title :is(a, a.internal-link) {
  color: inherit;
  background: none;
  border: none;
  text-decoration: none;
  transition: color .15s;
}

body:is(.blog-feed, :has(.blog-feed), .blog-index, :has(.blog-index)) .dm-blog-index__post:hover .dm-blog-index__post-title :is(a, a.internal-link) {
  color: var(--blog-link, #d4d4d8);
}

body.apathy-publish-theme-apathy-minted, body {
  --blog-background: #000;
  --blog-surface: #09090b88;
  --blog-border: #18181b88;
  --blog-text: #d4d4d8;
  --blog-muted: lab(65.6464% 1.53497 -5.42429);
  --blog-faint: #71717a;
  --blog-link: #d7ecfa;
  --font-text-size: 16px;
  --font-small: 13px;
  --font-smaller: 11px;
  --font-smallest: 10px;
  --font-inputs: 13px;
  --normal-weight: 350;
  --bold-weight: 600;
  --link-weight: inherit;
  --page-title-weight: 500;
  --page-title-line-height: 1.1;
  --page-title-size: 1.6em;
  --page-title-color: var(--blog-link);
  --page-title-style: normal;
  --page-title-variant: normal;
  --page-title-font: "Montserrat Variable";
  --font-text-theme: "Inter Variable";
  --h1-font: var(--page-title-font);
  --h2-font: var(--page-title-font);
  --h3-font: var(--page-title-font);
  --h4-font: var(--page-title-font);
  --h5-font: var(--page-title-font);
  --h6-font: var(--page-title-font);
  --h1: 1.25em;
  --h2: 1.1em;
  --h3: 1.05em;
  --h4: 1em;
  --h5: .85em;
  --h6: .85em;
  --h1-weight: 600;
  --h2-weight: 600;
  --h3-weight: 600;
  --h4-weight: 500;
  --h5-weight: 500;
  --h6-weight: 400;
  --h1-variant: normal;
  --h2-variant: normal;
  --h3-variant: normal;
  --h4-variant: normal;
  --h5-variant: small-caps;
  --h6-variant: small-caps;
  --h1-style: normal;
  --h2-style: normal;
  --h3-style: normal;
  --h4-style: normal;
  --h5-style: normal;
  --h6-style: normal;
  --cards-min-width: 180px;
  --cards-max-width: 1fr;
  --cards-mobile-width: 180px;
  --cards-image-height: 400px;
  --cards-padding: 1.2em;
  --cards-image-fit: contain;
  --cards-background: transparent;
  --cards-border-width: 1px;
  --cards-aspect-ratio: auto;
  --cards-columns: repeat(auto-fit,
    minmax(var(--cards-min-width), var(--cards-max-width)));
  --image-radius: 8px;
  --img-grid-fit: cover;
  --img-grid-background: transparent;
  --image-grid-fit: var(--img-grid-fit);
  --image-grid-background: var(--img-grid-background);
  --img-grid-gap: .5rem;
  --img-zoom-background: #0009;
  --img-zoom-max-width: 96%;
  --img-zoom-max-height: 90vh;
  --img-zoom-in-cursor: zoom-in;
  --img-zoom-out-cursor: zoom-out;
  --icon-muted: .5;
  --border-width: 1px;
  --folding-offset: 16px;
  --nested-padding: 30px;
  --list-padding: 2em;
  --list-spacing: .075em;
  --radius-s: 6px;
  --radius-m: 8px;
  --line-height-tight: 1.3;
  --table-text-size: var(--font-small);
}

p {
  font-weight: var(--normal-weight);
}

@media (width <= 400pt) {
  body {
    --cards-min-width: var(--cards-mobile-width);
    --img-grid-gap: .25rem;
  }
}

body.apathy-publish-theme-apathy-minted, body, .theme-dark.apathy-publish-theme-apathy-minted, body.theme-dark.apathy-publish-theme-apathy-minted, .theme-light.apathy-publish-theme-apathy-minted, body.theme-light.apathy-publish-theme-apathy-minted, .theme-dark, .theme-light {
  --outline-heading-color-active: var(--tx1);
  --sidebar-left-background: #2424470f;
  --background-primary: var(--blog-background);
  --background-primary-alt: var(--blog-surface);
  --background-secondary: var(--blog-surface);
  --background-secondary-alt: var(--blog-background);
  --background-tertiary: var(--blog-surface);
  --background-table-rows: var(--blog-surface);
  --background-modifier-form-field: var(--blog-surface);
  --background-modifier-form-field-highlighted: var(--blog-surface);
  --background-modifier-accent: var(--ax3);
  --background-modifier-border: var(--blog-border);
  --background-modifier-border-hover: var(--ui2);
  --background-modifier-border-focus: var(--ui3);
  --background-modifier-success: var(--color-green);
  --background-divider: var(--blog-border);
  --interactive-normal: var(--blog-surface);
  --interactive-hover: var(--blog-border);
  --interactive-accent: var(--ax3);
  --interactive-accent-hover: var(--ax2);
  --interactive-accent-rgb: 154, 143, 241;
  --quote-opening-modifier: var(--ui2);
  --modal-border: var(--blog-border);
  --icon-color: var(--blog-muted);
  --icon-color-hover: var(--blog-text);
  --icon-color-active: var(--blog-link);
  --icon-hex: var(--mono0);
  --text-normal: var(--blog-text);
  --text-bold: var(--blog-text);
  --text-italic: var(--blog-text);
  --text-muted: var(--blog-muted);
  --text-faint: var(--blog-faint);
  --text-accent: var(--blog-link);
  --text-accent-hover: var(--blog-link);
  --text-on-accent: var(--blog-background);
  --text-selection: var(--hl1);
  --text-code: var(--tx4);
  --text-error: var(--color-red);
  --text-blockquote: var(--blog-muted);
  --text-highlight-bg: var(--hl1);
  --title-color: var(--blog-link);
  --title-color-inactive: var(--blog-muted);
  --h1-color: var(--text-normal);
  --h2-color: var(--text-normal);
  --h3-color: var(--text-normal);
  --h4-color: var(--text-normal);
  --h5-color: var(--text-normal);
  --h6-color: var(--text-muted);
  --code-background: var(--blog-surface);
  --code-normal: #545c7ee6;
  --code-comment: #282948de;
  --code-function: #f2cdcd;
  --code-keyword: #4a5585;
  --code-string: #b7ce99;
  --code-value: #7bc2df;
  --code-operator: #adaca2;
  --blockquote-background-color: var(--blog-surface);
  --blockquote-border-color: var(--blog-border);
  --hr-color: var(--blog-border);
  --caret-color: #9a8ff1cf;
  --border-color: var(--blog-border);
  --input-shadow: none;
  color-scheme: dark;
}

.published-container {
  --outline-heading-color-active: var(--tx1);
  --sidebar-left-background: var(--bg2);
}

.apathy-hide-title .page-header, .alt-title .page-header, .hide-title .page-header {
  display: none;
}

.hide-title.markdown-preview-view div:nth-child(4) h1 {
  font-variant: var(--page-title-variant);
  letter-spacing: -.015em;
  line-height: var(--page-title-line-height);
  font-size: var(--page-title-size);
  color: var(--page-title-color);
  font-weight: var(--page-title-weight);
  font-style: var(--page-title-style);
  font-family: var(--page-title-font);
  border: none;
  margin-top: .25em;
}

.h1-borders h1 {
  border-bottom: 1px solid var(--ui1);
  padding-bottom: .5em;
}

.table-col-1-150.markdown-preview-view td:first-child {
  width: 150px;
}

.table-col-1-200.markdown-preview-view td:first-child {
  width: 200px;
}

.table-100 table, .table-cards table, .table-full table {
  width: 100%;
}

.table-small table {
  --table-text-size: 85%;
}

.table-tiny table {
  --table-text-size: 75%;
}

.row-hover {
  --table-edge-cell-padding-first: 10px;
}

.row-alt {
  --table-row-alt-background: var(--background-table-rows);
  --table-edge-cell-padding-first: 10px;
}

.col-alt .markdown-rendered:not(.cards) {
  --table-column-alt-background: var(--background-table-rows);
}

.table-tabular table {
  font-variant-numeric: tabular-nums;
}

.table-lines {
  --table-border-width: var(--border-width);
  --table-header-border-width: var(--border-width);
  --table-column-first-border-width: var(--border-width);
  --table-column-last-border-width: var(--border-width);
  --table-row-last-border-width: var(--border-width);
  --table-edge-cell-padding: 10px;
}

.table-nowrap {
  --table-white-space: nowrap;
}

.table-nowrap .table-wrap, .trim-cols {
  --table-white-space: normal;
}

.table-numbers table {
  counter-reset: section;
}

.table-numbers table > thead > tr > th:first-child:before {
  content: " ";
  min-width: 2em;
  padding-right: .5em;
  display: inline-block;
}

.table-numbers table > tbody > tr > td:first-child:before {
  counter-increment: section;
  content: counter(section) " ";
  text-align: center;
  min-width: 2em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  padding-right: .5em;
  display: inline-block;
}

.row-lines-off .table-view-table > tbody > tr > td, .row-lines-off table tbody > tr:last-child > td, .row-lines-off table tbody > tr > td {
  border-bottom: none;
}

.row-lines .table-view-table > tbody > tr > td, .row-lines table tbody > tr > td {
  border-bottom: var(--table-border-width) solid var(--table-border-color);
}

.row-lines table tbody > tr:last-child > td {
  border-bottom: none;
}

.col-lines .table-view-table thead > tr > th:not(:last-child), .col-lines .table-view-table > tbody > tr > td:not(:last-child), .col-lines table tbody > tr > td:not(:last-child) {
  border-right: var(--table-border-width) solid
    var(--background-modifier-border);
}

.row-hover {
  --table-row-background-hover: hsla(var(--accent-h), 50%, 80%, 20%);
}

.theme-dark .row-hover, .theme-dark.row-hover {
  --table-row-background-hover: hsla(var(--accent-h), 30%, 40%, 20%);
}

img[src$="#outline"], span[src$="#outline"] img {
  border: 1px solid var(--ui1);
}

.published-container img[src$="#interface"], .published-container span[src$="#interface"] img {
  border: 1px solid var(--ui1);
  border-radius: var(--radius-m);
  margin-top: 10px;
  margin-bottom: 15px;
  box-shadow: 0 .5px .9px #00000005, 0 1.3px 2.5px #00000008, 0 3px 6px #0000000a, 0 10px 20px #0000000f;
}

.theme-dark img[src$="#invert"], .theme-dark span[src$="#invert"] img {
  filter: invert() hue-rotate(180deg);
  mix-blend-mode: screen;
}

.theme-light img[src$="#invertW"], .theme-light span[src$="#invertW"] img {
  filter: invert() hue-rotate(180deg);
}

img[src$="#circle"], span[src$="#circle"] img {
  aspect-ratio: 1;
  border-radius: 50%;
}

body {
  --img-grid-fit: cover;
  --img-grid-background: transparent;
  --img-grid-gap: .5rem;
}

@media (width <= 400pt) {
  body {
    --img-grid-gap: .25rem;
  }
}

.img-grid-ratio {
  --image-grid-fit: contain;
}

.img-grid .image-embed.is-loaded {
  align-items: stretch;
  line-height: 0;
  display: flex;
}

.img-grid .image-embed.is-loaded img {
  background-color: var(--image-grid-background);
}

.img-grid .image-embed.is-loaded img:active {
  background-color: #0000;
}

.img-grid .markdown-preview-section > div:has(img) .image-embed ~ br, .img-grid .markdown-preview-section > div:has(img) img ~ br, .img-grid .markdown-preview-section > div:has(img) p:empty {
  display: none;
}

.img-grid .markdown-preview-section div:has( > .image-embed ~ .image-embed), .img-grid .markdown-preview-section div:has( > img ~ img), .img-grid .markdown-preview-section p:has( > .image-embed ~ .image-embed), .img-grid .markdown-preview-section p:has( > .image-embed ~ img), .img-grid .markdown-preview-section p:has( > img ~ .image-embed), .img-grid .markdown-preview-section p:has( > img ~ img) {
  grid-column-gap: var(--img-grid-gap);
  grid-row-gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin-block-start: var(--img-grid-gap);
  margin-block-end: var(--img-grid-gap);
  display: grid;
}

.img-grid .markdown-preview-section div:has( > .image-embed ~ .image-embed) > img, .img-grid .markdown-preview-section div:has( > img ~ img) > img, .img-grid .markdown-preview-section p:has( > .image-embed ~ .image-embed) > img, .img-grid .markdown-preview-section p:has( > .image-embed ~ img) > img, .img-grid .markdown-preview-section p:has( > img ~ .image-embed) > img, .img-grid .markdown-preview-section p:has( > img ~ img) > img {
  object-fit: var(--image-grid-fit);
  align-self: stretch;
}

.img-grid .markdown-preview-section div:has( > .image-embed ~ .image-embed) > .internal-embed img, .img-grid .markdown-preview-section div:has( > img ~ img) > .internal-embed img, .img-grid .markdown-preview-section p:has( > .image-embed ~ .image-embed) > .internal-embed img, .img-grid .markdown-preview-section p:has( > .image-embed ~ img) > .internal-embed img, .img-grid .markdown-preview-section p:has( > img ~ .image-embed) > .internal-embed img, .img-grid .markdown-preview-section p:has( > img ~ img) > .internal-embed img {
  object-fit: var(--image-grid-fit);
  align-self: center;
}

.img-grid .markdown-preview-section > div:has(img) > p {
  grid-column-gap: var(--img-grid-gap);
  grid-row-gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin-block-start: var(--img-grid-gap);
  margin-block-end: var(--img-grid-gap);
  display: grid;
}

.img-grid .markdown-preview-section > div:has(img) > p > br {
  display: none;
}

.img-zoom .image-embed {
  cursor: zoom-in;
}

.lightbox {
  z-index: 99999;
  background: var(--img-zoom-background);
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.lightbox .internal-embed.image-embed {
  max-width: var(--img-zoom-max-width);
  max-height: var(--img-zoom-max-height);
  cursor: var(--img-zoom-in-cursor);
  display: flex;
}

.lightbox img {
  cursor: var(--img-zoom-out-cursor);
  object-fit: contain;
  width: auto;
}

.cards table {
  --table-width: 100%;
  --table-edge-cell-padding-first: calc(var(--cards-padding)/2);
  --table-edge-cell-padding-last: calc(var(--cards-padding)/2);
  --table-cell-padding: calc(var(--cards-padding)/3)
    calc(var(--cards-padding)/2);
  line-height: 1.3;
}

.cards table tbody {
  clear: both;
  grid-template-columns: var(--cards-columns);
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  padding: .5rem 0;
  display: grid;
}

.cards table > tbody > tr {
  background-color: var(--cards-background);
  border: var(--cards-border-width) solid var(--background-modifier-border);
  padding: 0 0 calc(var(--cards-padding) / 3) 0;
  max-width: var(--cards-max-width);
  border-radius: 6px;
  flex-direction: column;
  margin: 0;
  transition: box-shadow .15s linear;
  display: flex;
  overflow: hidden;
}

.cards table > tbody > tr:hover {
  border: var(--cards-border-width) solid
    var(--background-modifier-border-hover);
  transition: box-shadow .15s linear;
  box-shadow: 0 4px 6px #0000000d, 0 1px 3px 1px #00000006;
}

.cards table tbody > tr > td:first-child {
  font-weight: var(--bold-weight);
  border: none;
}

.cards table tbody > tr > td:first-child a {
  display: block;
}

.cards table tbody > tr > td:last-child {
  border: none;
}

.cards table tbody > tr > td:not(:first-child) {
  font-size: calc(var(--table-text-size) * .9);
  color: var(--text-muted);
}

.cards table tbody > tr > td > * {
  padding: calc(var(--cards-padding) / 3) 0;
}

.cards table tbody > tr > td:not(:last-child):not(:first-child) {
  border-bottom: 1px solid var(--background-modifier-border);
  width: calc(100% - var(--cards-padding));
  margin: 0 calc(var(--cards-padding) / 2);
  padding: 4px 0;
}

.cards table tbody > tr > td a {
  text-decoration: none;
}

.cards table tbody > tr > td > button {
  width: 100%;
  margin: calc(var(--cards-padding) / 2) 0;
}

.cards table tbody > tr > td:last-child > button {
  margin-bottom: calc(var(--cards-padding) / 6);
}

.cards table tbody > tr > td > ul {
  width: 100%;
  margin: 0 auto !important;
  padding: .25em 0 !important;
}

.cards table tbody > tr > td:has(img) {
  background-color: var(--background-secondary);
  width: 100%;
  margin: 0;
  display: block;
  padding: 0 !important;
}

.cards table tbody > tr > td img {
  aspect-ratio: var(--cards-aspect-ratio);
  object-fit: var(--cards-image-fit);
  width: 100%;
  max-height: var(--cards-image-height);
  background-color: var(--background-secondary);
  vertical-align: bottom;
}

.cards table thead, .list-cards.markdown-preview-view .list-bullet, .list-cards.markdown-preview-view .list-collapse-indicator, .list-cards.markdown-preview-view.markdown-rendered.show-indentation-guide li > ul:before {
  display: none;
}

.list-cards.markdown-preview-view div > ul {
  grid-template-columns: var(--cards-columns);
  line-height: var(--line-height-tight);
  gap: .75rem;
  padding: 0;
  display: grid;
}

.list-cards.markdown-preview-view div > ul > li {
  background-color: var(--cards-background);
  padding: calc(var(--cards-padding) / 2);
  border-radius: var(--radius-s);
  border: var(--cards-border-width) solid var(--background-modifier-border);
  overflow: hidden;
}

.list-cards.markdown-preview-view div > ul .image-embed {
  background-color: var(--background-secondary);
  border-radius: var(--image-radius);
  padding: 0;
  display: block;
}

.list-cards.markdown-preview-view div > ul .image-embed img {
  aspect-ratio: var(--cards-aspect-ratio);
  object-fit: var(--cards-image-fit);
  max-height: var(--cards-image-height);
  background-color: var(--background-secondary);
  vertical-align: bottom;
}

.list-cards.markdown-preview-view div > ul > li > a {
  --link-decoration: none;
  --link-external-decoration: none;
  font-weight: var(--bold-weight);
}

.list-cards.markdown-preview-view div ul > li:hover {
  border-color: var(--background-modifier-border-hover);
}

.list-cards.markdown-preview-view div ul ul {
  width: 100%;
  color: var(--text-muted);
  font-size: var(--font-smallest);
  margin: calc(var(--cards-padding) / -4) 0;
  padding: calc(var(--cards-padding) / 2) 0;
  display: block;
}

.list-cards.markdown-preview-view div ul ul ul {
  padding-bottom: calc(var(--cards-padding) / 4);
}

.list-cards.markdown-preview-view div ul ul > li {
  margin-inline-start: 0;
  display: block;
}

.cards.cards-16-9, .list-cards.cards-16-9 {
  --cards-aspect-ratio: 16/9;
}

.cards.cards-1-1, .list-cards.cards-1-1 {
  --cards-aspect-ratio: 1/1;
}

.cards.cards-2-1, .list-cards.cards-2-1 {
  --cards-aspect-ratio: 2/1;
}

.cards.cards-2-3, .list-cards.cards-2-3 {
  --cards-aspect-ratio: 2/3;
}

.cards.cards-cols-1, .list-cards.cards-cols-1 {
  --cards-columns: repeat(1, minmax(0, 1fr));
}

.cards.cards-cols-2, .list-cards.cards-cols-2 {
  --cards-columns: repeat(2, minmax(0, 1fr));
}

.cards.cards-cover, .list-cards.cards-cover {
  --cards-image-fit: cover;
}

.cards.cards-align-bottom table.dataview tbody > tr > td:last-child, .list-cards.cards-align-bottom table.dataview tbody > tr > td:last-child {
  margin-top: auto;
}

@media (width <= 400pt) {
  .cards table.dataview tbody > tr > td:not(:first-child) {
    font-size: 80%;
  }
}

@media (width >= 400pt) {
  .cards-cols-3 {
    --cards-columns: repeat(3, minmax(0, 1fr));
  }

  .cards-cols-4 {
    --cards-columns: repeat(4, minmax(0, 1fr));
  }

  .cards-cols-5 {
    --cards-columns: repeat(5, minmax(0, 1fr));
  }

  .cards-cols-6 {
    --cards-columns: repeat(6, minmax(0, 1fr));
  }

  .cards-cols-7 {
    --cards-columns: repeat(7, minmax(0, 1fr));
  }

  .cards-cols-8 {
    --cards-columns: repeat(8, minmax(0, 1fr));
  }
}

.markdown-preview-view code {
  color: var(--tx4);
  font-size: .85em;
}

.theme-light :not(pre) > code[class*="language-"], .theme-light pre[class*="language-"] {
  background-color: var(--bg2);
}

iframe, img {
  border-radius: var(--image-radius);
}

input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="text"] {
  border-color: var(--ui1);
}

input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="text"]:hover {
  border-color: var(--ui2);
}

input[type="email"]:active, input[type="email"]:focus, input[type="number"]:active, input[type="number"]:focus, input[type="password"]:active, input[type="password"]:focus, input[type="search"]:active, input[type="search"]:focus, input[type="text"]:active, input[type="text"]:focus {
  border-color: var(--ui2);
  box-shadow: 0 0 0 2px var(--ui2);
}

ol > li::marker, ul > li::marker {
  color: var(--tx3);
}

body {
  --table-header-border-width: 0;
  --table-column-first-border-width: 0;
  --table-column-last-border-width: 0;
  --table-row-last-border-width: 0;
  --table-edge-cell-padding-first: 0;
  --table-edge-cell-padding-last: 10px;
  --table-cell-padding: 4px 10px;
  --table-header-size: var(--table-text-size);
}

.markdown-preview-view table {
  border: var(--border-width) solid var(--border-color);
  border-collapse: collapse;
  margin-block-start: 1em;
}

.markdown-preview-view td, .markdown-preview-view th {
  padding: var(--table-cell-padding);
}

.markdown-preview-view td:first-child, .markdown-preview-view th:first-child {
  padding-left: var(--table-edge-cell-padding-first);
}

.markdown-preview-view td:last-child, .markdown-preview-view th:last-child {
  padding-right: var(--table-edge-cell-padding-last);
}

.markdown-preview-view .tag:not(.token) {
  border: 1px solid var(--ui1);
  color: var(--tx2);
  font-size: var(--font-small);
  background-color: #0000;
}

.tooltip {
  display: none;
}

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

.site-body .site-body-left-column-site-name {
  display: none !important;
}

.site-body .site-body-left-column .site-body-left-column-site-logo img {
  max-width: 186px !important;
  margin-left: 4px !important;
}

.site-body-left-column .search-view-container .search-bar {
  background-color: #00000094;
  margin: 14px 0;
}

body:is(.blog-post, :has(.blog-post)) {
  color: var(--blog-text);
  background: var(--blog-background);
  color-scheme: dark;
}

body:is(.blog-post, :has(.blog-post)) :is(.published-container, .site-body, .site-body-center-column, .render-container, .render-container-inner, .markdown-preview-view) {
  color: var(--blog-text);
  background: var(--blog-background);
}

body:is(.blog-post, :has(.blog-post)) :is(.site-header, .site-body-right-column, .graph-view-outer), body:is(.blog-post, :has(.blog-post)) .published-container.has-graph .graph-view-outer, body:is(.blog-post, :has(.blog-post)):not(.blog-nav-expanded) .site-body-left-column {
  display: none;
}

body:is(.blog-post, :has(.blog-post)) .site-body {
  grid-template-columns: minmax(0, 1fr);
}

body:is(.blog-post, :has(.blog-post)) .site-body-center-column {
  width: 100%;
  max-width: none;
}

body:is(.blog-post, :has(.blog-post)).blog-nav-expanded .site-body-left-column {
  z-index: 1000;
  width: min(320px, 86vw);
  box-shadow: none;
  backdrop-filter: blur(5px);
  background: #0808081a;
  border-right: 1px solid #050505;
  display: block;
  position: fixed;
  inset: 0 auto 0 0;
  overflow-y: auto;
}

.nav-view-outer .tree-item-inner, .nav-view-outer .tree-item-inner a {
  letter-spacing: 0;
  text-transform: capitalize;
  font-family: Montserrat Variable;
  font-size: 14px;
  font-weight: 350;
  color: lab(70% -2.2 -2.9) !important;
}

.nav-view-outer .mod-active .tree-item-inner, .nav-view-outer .mod-active .tree-item-inner a {
  color: #9effc0 !important;
}

.nav-view-outer .tree-item-self.mod-collapsible.is-clickable {
  margin-bottom: 0;
  margin-left: -5px;
}

.blog-nav-toggle {
  z-index: 1001;
  color: var(--blog-text);
  font-family: var(--blog-font-family);
  backdrop-filter: blur(12px);
  cursor: pointer;
  background: #000c;
  border: 1px solid #27272a;
  border-radius: 999px;
  padding: .45rem .7rem;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1;
  position: fixed;
  top: 1rem;
  left: 1rem;
  box-shadow: 0 12px 32px #00000061;
}

.blog-nav-toggle:hover, .blog-nav-toggle:focus-visible {
  color: #fff;
  border-color: #3f3f46;
}

body:is(.blog-post, :has(.blog-post)) :is(.markdown-preview-view, .markdown-rendered, .published-container) .markdown-preview-sizer {
  isolation: isolate;
  max-width: var(--blog-feed-line-width);
  margin-inline: auto;
  font-family: var(--blog-font-family);
  margin: 0 auto;
  padding-block: 6rem;
  position: relative;
}

body:is(.blog-post, :has(.blog-post)) :is(.markdown-preview-view, .markdown-rendered, .published-container) .markdown-preview-sizer:before {
  content: "";
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, #ffffff24 1px, #0000 1.5px);
  background-size: 12px 12px;
  width: min(920px, 100%);
  height: 11rem;
  position: absolute;
  inset: 2rem 50% auto auto;
  transform: translateX(50%);
  mask-image: radial-gradient(#000 0%, #0000 72%);
}

body:is(.blog-post, :has(.blog-post)) :is(.markdown-preview-view, .markdown-rendered, .published-container) :is(.page-header, .inline-title, h1:first-child) {
  max-width: var(--file-line-width);
  color: #fff;
  font-family: var(--h1-font, var(--page-title-font), var(--blog-font-family));
  margin: 2.4rem auto 2rem;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 680;
  line-height: 1.02;
}

body:is(.blog-post, :has(.blog-post)) :is(.markdown-preview-view, .markdown-rendered, .published-container) :is(p, ul, ol, blockquote, pre) {
  max-width: var(--file-line-width);
  color: var(--blog-text);
  font-family: var(--blog-font-family);
  font-size: var(--font-text-size);
  line-height: var(--line-height-normal);
  margin-inline: auto;
}

body:is(.blog-post, :has(.blog-post)) :is(.markdown-preview-view, .markdown-rendered, .published-container) p {
  margin-block: var(--p-spacing);
}

body:is(.blog-post, :has(.blog-post)) :is(.markdown-preview-view, .markdown-rendered, .published-container) :is(h1, h2, h3, h4, h5, h6) {
  max-width: var(--file-line-width);
  font-family: var(--page-title-font);
  margin-inline: auto;
}

body:is(.blog-post, :has(.blog-post)) :is(.markdown-preview-view, .markdown-rendered, .published-container) h1 {
  font-size: var(--h1-size);
  font-family: var(--h1-font, var(--page-title-font), var(--blog-font-family));
}

body:is(.blog-post, :has(.blog-post)) :is(.markdown-preview-view, .markdown-rendered, .published-container) h2 {
  border: none;
  margin-top: 3.2rem;
  padding-top: 1rem;
}

body:is(.blog-post, :has(.blog-post)) :is(.markdown-preview-view, .markdown-rendered, .published-container) a {
  color: var(--blog-link);
  text-underline-offset: .18em;
}

body:is(.blog-post, :has(.blog-post)) :is(.markdown-preview-view, .markdown-rendered, .published-container) blockquote {
  color: var(--blog-muted);
  border-left: 3px solid #3f3f46;
  padding: .35rem 0 .35rem 1.35rem;
  font-size: 1.15em;
}

body:is(.blog-post, :has(.blog-post)) :is(.markdown-preview-view, .markdown-rendered, .published-container) img {
  border-radius: calc(var(--image-radius) * 1.5);
  width: min(100%, 920px);
  max-width: none;
  margin: 2.25rem auto;
  display: block;
}

body:is(.blog-post, :has(.blog-post)) :is(.markdown-preview-view, .markdown-rendered, .published-container) hr {
  border-color: var(--blog-border);
  max-width: 8rem;
  margin: 3rem auto;
}

body:is(.blog-post, :has(.blog-post)) :is(.markdown-preview-view, .markdown-rendered, .published-container) :is(.backlinks, .backlink-pane) {
  max-width: var(--file-line-width);
  font-family: var(--blog-font-family);
  color: var(--blog-muted);
  margin-inline: auto;
}

body:is(.blog-feed, :has(.blog-feed)) :is(.markdown-preview-view, .markdown-rendered) {
  color: #fff;
  background: var(--blog-background);
  min-height: 100vh;
}

body:is(.blog-feed, :has(.blog-feed)) :is(.markdown-preview-view, .markdown-rendered, .published-container) .markdown-preview-sizer {
  max-width: var(--blog-feed-line-width);
  margin-inline: auto;
  padding: clamp(5rem, 9vw, 6rem) clamp(1.5rem, 5vw, 4rem) 7rem;
}

body:is(.blog-feed, :has(.blog-feed)) :is(.markdown-preview-view, .markdown-rendered, .published-container) .markdown-preview-sizer:before {
  content: none;
}

body:is(.blog-feed, :has(.blog-feed)) :is(.markdown-preview-view, .markdown-rendered, .published-container) table {
  width: 100%;
  max-width: var(--blog-feed-line-width);
  border: none;
  margin-inline: auto;
  display: none;
}

.site-body .site-body-left-column .site-body-left-column-inner {
  width: 300px;
}