@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);

body {
	--font-default: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica", "Arial", "Segoe UI", "Inter", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif;
	--font-text-theme: var(--font-default);
	--font-text-size-mobile: calc(0.95rem + 0.30vw);
	--font-primary-sans: var(--font-default);
	--font-secondary-sans: Helvetica, -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif;
	--font-primary-serif: Georgia, 'Times New Roman', Times, serif;
	--font-secondary-serif: "Merriweather", 'Times New Roman', Times, serif;
	--font-text-size: calc(0.8rem + 0.30vw);
	--font-smallest: 0.8em;
	--font-smaller: 0.875em;
	--font-small: 0.933em;
	--font-inputs: 0.933em;
	--normal-weight: 400;
	--bold-weight: 600;
	--link-weight: inherit;
	--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;
	--img-grid-gap: 0.5rem;
	--img-zoom-background: rgba(0, 0, 0, 0.6);
	--img-zoom-max-width: 96%;
	--img-zoom-max-height: 90vh;
	--img-zoom-in-cursor: zoom-in;
	--img-zoom-out-cursor: zoom-out;
	--icon-muted: 0.5;
	--border-width: 1px;
	--folding-offset: 16px;
	--nested-padding: 30px;
	--list-padding: 2em;
	--list-spacing: 0.075em
}

@media (max-width:400pt) {
	body {
		--cards-min-width: var(--cards-mobile-width);
		--img-grid-gap: 0.25rem
	}
}

.theme-light {
	--color-red-rgb: 175, 48, 41;
	--color-orange-rgb: 188, 82, 21;
	--color-yellow-rgb: 173, 131, 1;
	--color-green-rgb: 102, 128, 11;
	--color-cyan-rgb: 36, 131, 123;
	--color-blue-rgb: 32, 94, 166;
	--color-purple-rgb: 94, 64, 157;
	--color-pink-rgb: 160, 47, 111;
	--color-red: #AF3029;
	--color-orange: #BC5215;
	--color-yellow: #AD8301;
	--color-green: #66800B;
	--color-cyan: #24837B;
	--color-blue: #205EA6;
	--color-purple: #5E409D;
	--color-pink: #A02F6F
}

.theme-dark {
	--color-red-rgb: 209, 77, 65;
	--color-orange-rgb: 218, 112, 44;
	--color-yellow-rgb: 208, 162, 21;
	--color-green-rgb: 135, 154, 57;
	--color-cyan-rgb: 58, 169, 159;
	--color-blue-rgb: 67, 133, 190;
	--color-purple-rgb: 139, 126, 200;
	--color-pink-rgb: 206, 93, 151;
	--color-red: #D14D41;
	--color-orange: #DA702C;
	--color-yellow: #D0A215;
	--color-green: #879A39;
	--color-cyan: #3AA99F;
	--color-blue: #4385BE;
	--color-purple: #8B7EC8;
	--color-pink: #CE5D97
}

.theme-light {
	--base-h: 360;
	--base-s: 3%;
	--base-l: 6%;
	--accent-h: 175;
	--accent-s: 57%;
	--accent-l: 33%;
	--bg1: #FFFCF0;
	--bg2: #F2F0E5;
	--bg3: rgba(16, 15, 15, 0.05);
	--ui1: #E6E4D9;
	--ui2: #DAD8CE;
	--ui3: #CECDC3;
	--tx1: #100F0F;
	--tx2: #6F6E69;
	--tx3: #B7B5AC;
	--hl1: rgba(187, 220, 206, 0.3);
	--hl2: rgba(247, 209, 61, 0.3)
}

.theme-dark {
	--base-h: 360;
	--base-s: 3%;
	--base-l: 6%;
	--accent-h: 175;
	--accent-s: 49%;
	--accent-l: 45%;
	--bg1: #100F0F;
	--bg2: #1C1B1A;
	--bg3: rgba(254, 252, 240, 0.05);
	--ui1: #282726;
	--ui2: #343331;
	--ui3: #403E3C;
	--tx1: #CECDC3;
	--tx2: #878580;
	--tx3: #575653;
	--hl1: rgba(30, 95, 91, 0.3);
	--hl2: rgba(213, 159, 17, 0.3)
}

.theme-light {
	--mono100: black;
	--mono0: white
}

.theme-dark {
	--mono100: white;
	--mono0: black
}

.theme-dark {
    --h1-color: #6A0DAD;
	--h2-color: #7C27B6;
	--h3-color: #8D41BF;
	--h4-color: #9E5BC8;
	--h5-color: #AF75D1;
	--h6-color: #C08FDB;
}
}
.theme-light {
	--h1-color: #1a1a1a;
	--h2-color: #2c2c2c;
	--h3-color: #3d3d3d;
	--h4-color: #4f4f4f;
	--h5-color: #606060;
	--h6-color: #707070;
}

/* Prevent image inversion in dark mode */
.theme-dark img[src*="portfolio_ai.png"] {
    filter: none !important;
    mix-blend-mode: normal !important;
  }

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

.theme-dark,
.theme-light {
	--background-primary: var(--bg1);
	--background-primary-alt: var(--bg2);
	--background-secondary: var(--bg2);
	--background-secondary-alt: var(--bg1);
	--background-tertiary: var(--bg3);
	--background-table-rows: var(--bg2);
	--background-modifier-form-field: var(--bg1);
	--background-modifier-form-field-highlighted: var(--bg1);
	--background-modifier-accent: var(--ax3);
	--background-modifier-border: var(--ui1);
	--background-modifier-border-hover: var(--ui2);
	--background-modifier-border-focus: var(--ui3);
	--background-modifier-success: var(--color-green);
	--background-divider: var(--ui1);
	--interactive-hover: var(--ui1);
	--interactive-accent: var(--ax3);
	--interactive-accent-hover: var(--ax3);
	--quote-opening-modifier: var(--ui2);
	--modal-border: var(--ui2);
	--icon-color: var(--tx2);
	--icon-color-hover: var(--tx2);
	--icon-color-active: var(--tx1);
	--icon-hex: var(--mono0);
	--text-normal: var(--tx1);
	--text-bold: var(--tx1);
	--text-italic: var(--tx1);
	--text-muted: var(--tx2);
	--text-faint: var(--tx3);
	--text-accent: var(--ax1);
	--text-accent-hover: var(--ax2);
	--text-on-accent: white;
	--text-selection: var(--hl1);
	--text-code: var(--tx4);
	--text-error: var(--color-red);
	--text-blockquote: var(--tx2);
	--title-color: var(--tx1);
	--title-color-inactive: var(--tx2)
}

.theme-light {
	--interactive-normal: var(--bg1);
	--interactive-accent-rgb: 220, 220, 220;
	--text-highlight-bg: rgba(255, 225, 0, 0.5);
	--text-highlight-bg-active: rgba(0, 0, 0, 0.1);
	--background-modifier-error: rgba(255, 0, 0, 0.14);
	--background-modifier-error-hover: rgba(255, 0, 0, 0.08);
	--shadow-color: rgba(0, 0, 0, 0.1);
	--btn-shadow-color: rgba(0, 0, 0, 0.05)
}

.theme-dark {
	--interactive-normal: var(--bg3);
	--interactive-accent-rgb: 66, 66, 66;
	--text-highlight-bg: rgba(255, 177, 80, 0.3);
	--text-highlight-bg-active: rgba(255, 255, 255, 0.1);
	--background-modifier-error: rgba(255, 20, 20, 0.12);
	--background-modifier-error-hover: rgba(255, 20, 20, 0.18);
	--background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
	--shadow-color: rgba(0, 0, 0, 0.3);
	--btn-shadow-color: rgba(0, 0, 0, 0.2)
}

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

.hide-title.markdown-preview-view div:nth-child(4) h1 {
	margin-top: .25em;
	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
}

.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: " ";
	padding-right: .5em;
	display: inline-block;
	min-width: 2em
}

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

.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);
	box-shadow: 0 .5px .9px rgba(0, 0, 0, .021), 0 1.3px 2.5px rgba(0, 0, 0, .03), 0 3px 6px rgba(0, 0, 0, .039), 0 10px 20px rgba(0, 0, 0, .06);
	margin-top: 10px;
	margin-bottom: 15px;
	border-radius: var(--radius-m)
}

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

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

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

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

@media (max-width:400pt) {
	body {
		--img-grid-gap: 0.25rem
	}
}

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

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

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

.img-grid .image-embed.is-loaded img:active {
	background-color: transparent
}

.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) {
	display: grid;
	margin-block-start: var(--img-grid-gap);
	margin-block-end: var(--img-grid-gap);
	grid-column-gap: var(--img-grid-gap);
	grid-row-gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr))
}

.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 {
	display: grid;
	margin-block-start: var(--img-grid-gap);
	margin-block-end: var(--img-grid-gap);
	grid-column-gap: var(--img-grid-gap);
	grid-row-gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr))
}

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

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

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

.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;
	padding: .5rem 0;
	display: grid;
	grid-template-columns: var(--cards-columns);
	grid-column-gap: .75rem;
	grid-row-gap: .75rem
}

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

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

.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) {
	padding: 4px 0;
	border-bottom: 1px solid var(--background-modifier-border);
	width: calc(100% - var(--cards-padding));
	margin: 0 calc(var(--cards-padding)/2)
}

.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%;
	padding: .25em 0 !important;
	margin: 0 auto !important
}

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

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

.cards table thead {
	display: none
}

.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 {
	display: grid;
	gap: .75rem;
	grid-template-columns: var(--cards-columns);
	padding: 0;
	line-height: var(--line-height-tight)
}

.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 {
	padding: 0;
	display: block;
	background-color: var(--background-secondary);
	border-radius: var(--image-radius)
}

.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 {
	display: block;
	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
}

.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 {
	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 (max-width:400pt) {
	.cards table.dataview tbody>tr>td:not(:first-child) {
		font-size: 80%
	}
}

@media (min-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) {
	background-color: transparent;
	border: 1px solid var(--ui1);
	color: var(--tx2);
	font-size: var(--font-small)
}

.tooltip {
	display: none
}

body {
	--flexoki-blue-200: 146, 191, 219;
	--flexoki-blue-300: 102, 160, 200;
	--flexoki-red-500: 203, 62, 52;
	--flexoki-yellow-150: 241, 214, 126;
	--flexoki-yellow-300: 223, 180, 49;
	--flexoki-yellow-400: 208, 162, 21;
	--flexoki-purple-400: 139, 126, 200;
	--flexoki-gray: 230, 228, 217;
	--tag-color: var(--text-normal);
	--tag-size: var(--font-smallest);
	--tag-radius: var(--radius-s);
	--tag-color-hover: var(--color-base-10);
	--tag-padding-x: 4px;
	--tag-padding-y: 1px;
	--h1-size: calc(2.8em + 0.55vw);
	--h2-size: calc(1.40em + 0.35vw);
	--h3-size: calc(1.3em + 0.25vw);
	--h4-size: calc(1.2em + 0.15vw);
	--h5-size: calc(1.1em + 0.20vw);
	--h6-size: calc(0.8em + 0.1vw);
	--h1-weight: 100;
	--h6-weight: 400;
	--h2-weight: 300;
	--h3-weight: 300;
	--h4-weight: 300;
	--h5-weight: 300;
	--h1-line-height: 1;
	--h2-line-height: 1.1;
	--h3-line-height: var(--line-height-tight);
	--h4-line-height: var(--line-height-tight);
	--h5-line-height: 1.15;
	--h6-line-height: var(--line-height-tight);
	--h6-variant: all-small-caps
}

body.theme-light {
	--color-base-55: #a3a199;
	--color-base-80: #555450;
	--tag-background: var(--background-secondary);
	--tag-background-hover: var(--color-base-50);
	--sidebar-left-border-width: 0px;
	--sidebar-right-border-width: 0px
}

body.theme-dark {
	--color-base-55: #63615d;
	--color-base-80: #abaaa4;
	--flexoki-gray: 40, 39, 38;
	--tag-background: var(--color-base-35);
	--tag-background-hover: var(--color-base-70);
	--sidebar-left-border-width: 1px;
	--sidebar-right-border-width: 1px
}

.theme-light {
	--background-reader: var(--background-primary);
	--blockquote-font-style: italic;
	--blockquote-border-color: var(--color-base-25);
	--blockquote-border-thickness: 1px;
	--color-ligthorange: rgb(224, 150, 31);
	--color-faintorange: rgb(204, 146, 83);
	--color-darkorange: rgb(211, 117, 13);
	--color-wine: #9a4a42;
	--color-oldpink: #ac6a8c;
	--color-wine-rgb: 154, 74, 66;
	--color-oldpink-rgb: 172, 106, 140;
	--color-gray-rgb: 111, 110, 105;
	--color-base: 0, 0, 0;
	--code-background: #efefe8;
	--component-title-color: var(--text-normal);
	--embed-border-left: 1px solid var(--blockquote-border-color);
	--graph-node: var(--color-ligthorange);
	--graph-node-unresolved: rgba(0, 0, 0, 1.00);
	--graph-text: var(--color-base-60);
	--img-zoom-color-background: rgba(250, 250, 244, 0.85);
	--interactive-accent: var(--color-darkorange);
	--link-color: rgb(16, 15, 15);
	--link-external-color: rgb(16, 15, 15);
	--link-external-decoration: underline;
	--link-decoration: underline;
	--blockquote-border-thickness: 1px;
	--link-unresolved-color: var(--text-faint);
	--link-unresolved-decoration-style: wavy;
	--logo-width: 100%;
	--sidebar-right-background: var(--color-base-10);
	--text-light: var(--color-base-00);
	--text-accent: var(--color-faintorange);
	--text-accent-hover: var(--color-ligthorange);
	--text-selection: var(--interactive-accent)
}

.theme-dark {
	--background-reader: var(--background-primary);
	--background-modifier-border: var(--color-base-35);
	--blockquote-font-style: italic;
	--blockquote-border-color: var(--color-base-50);
	--color-wine: #b34b42;
	--color-oldpink: #A02F6F;
	--color-wine-rgb: 179, 75, 66;
	--color-oldpink-rgb: 174, 88, 132;
	--color-gray-rgb: 218, 216, 206;
	--color-base: 255, 255, 255;
	--code-background: var(--background-secondary);
	--embed-border-left: 1px solid var(--blockquote-border-color);
	--graph-node: rgb(56, 166, 222);
	--graph-text: rgba(136, 159, 170, 1.00);
	--graph-line: rgba(118, 117, 117, 0.6);
	--graph-node-unresolved: #fd7878;
	--interactive-accent: #4690b5;
	--link-color: rgb(206, 205, 195);
	--link-external-color: rgb(206, 205, 195);
	--link-external-decoration: underline;
	--link-decoration: underline;
	--link-decoration-thickness: auto;
	--link-unresolved-color: var(--text-faint);
	--link-unresolved-decoration-color: var(--text-faint);
	--link-unresolved-decoration-style: wavy;
	--logo-width: 100%;
	--img-zoom-color-background: rgba(0, 0, 0, 0.85);
	--text-accent: rgb(96 184 228);
	--text-accent-hover: #50d9fc;
	--text-selection: var(--interactive-accent);
	--text-light: var(--color-base-100)
}

.published-container {
	--background-color: var(--background-primary);
	--code-radius: var(--radius-m);
	--footer-display: fixed;
	--page-title-size: 48px;
	--page-title-weight: 500;
	--page-title-line-height: 1.1;
	--page-title-variant: all-small-caps;
	--page-title-color: var(--color-base-60);
	--page-title-style: normal;
	--sidebar-right-background: var(--background-primary);
	--site-name-size: 28px;
	--site-name-color: var(--text-accent);
	--site-name-color-hover: var(--color-base-80);
	--site-name-weight: 600;
    margin-bottom: 2rem
}

.published-container .site-title {
    margin-bottom: 5rem; /* Adjust this value as needed */
  }

html {
	-webkit-text-size-adjust: 100%
}

::-moz-selection {
	color: #fff
}

::selection {
	color: #fff
}

.site-body-center-column {
	position: relative;
	box-shadow: 0 0 10px 3px rgba(0, 0, 0, .1)
}

.page-header {
	letter-spacing: 0
}

.publish-renderer:has(:active) {
	z-index: 99999
}

.site-header {
	border-bottom: 0
}

.sliding-windows .render-container {
	background-color: var(--background-primary)
}

.sliding-windows .publish-renderer,
.sliding-windows .site-body-right-column {
	box-shadow: none
}

button .external-link {
	background-image: none
}

button {
	cursor: pointer
}

button.center {
	display: flex
}

button:not(.clickable-icon) {
	color: var(--background-primary);
	background-color: var(--interactive-accent);
	padding: 15px;
	margin: 40px auto
}

button:not(.clickable-icon):hover {
	background-color: var(--text-accent);
	color: var(--background-primary)
}

button:not(.clickable-icon) a.external-link,
button:not(.clickable-icon) a.internal-link {
	color: var(--background-primary);
	padding: 5px 20px;
	border: 0;
	padding: 10px 30px;
	margin: 0 auto;
	text-decoration: none;
	font-weight: 700
}

button:not(.clickable-icon) a.external-link:hover,
button:not(.clickable-icon) a.internal-link:hover {
	color: var(--background-primary);
	text-decoration: none
}

@media screen and (min-width:751px) {
	#toggle-sidebar-btn {
		margin: 0;
		width: 30px;
		background: 0 0;
		padding: 5px;
		position: fixed;
		right: 5px;
		top: 5px;
		background: 0 0;
		border-radius: 50%;
		border: 0;
		box-shadow: none;
		background: var(--background-primary);
		opacity: 1;
		color: var(--component-title-color);
		z-index: 10
	}

	.theme-dark.sliding-windows #toggle-sidebar-btn {
		top: 25px
	}

	#chooser {
		position: absolute;
		bottom: 5px;
		right: 0;
		background-color: var(--background-color);
		padding: 7px 10px 2px 10px;
		border-radius: 20px
	}

	#chooser a {
		color: var(--text-muted);
		margin-right: 5px
	}

	#chooser a:hover {
		color: var(--text-accent-hover)
	}

	#chooser a:last-child {
		margin-right: 0
	}

	#chooser svg {
		width: 18px;
		height: auto
	}

	.sliding-windows #toggle-sidebar-btn {
		right: 287px;
		top: 25px
	}

	#toggle-sidebar-btn:hover {
		color: var(--color-base-100);
		background: var(--background-secondary)
	}

	#toggle-sidebar-btn:hover {
		cursor: pointer
	}

	.published-container:has(.reader-view).is-readable-line-width:not(.has-navigation).has-graph .publish-renderer>.markdown-preview-view>.markdown-preview-sizer,
	.published-container:has(.reader-view).is-readable-line-width:not(.has-navigation).has-outline .publish-renderer>.markdown-preview-view>.markdown-preview-sizer {
		margin-right: calc((100vw - var(--page-width))/ 2) !important
	}

	.site-body:has(.reader-view) #toggle-sidebar-btn {
		color: var(--component-title-color)
	}

	.site-body:has(.reader-view) #toggle-sidebar-btn::before {
		content: "Press r to switch view";
		position: absolute;
		top: 82px;
		right: -46px;
		transform: rotate(90deg);
		color: var(--text-faint);
		font-size: var(--font-smaller)
	}

	.site-body:has(.reader-view) .published-container .markdown-rendered h1 {
		margin-top: 0
	}

	.site-body:has(.reader-view) .markdown-preview-view {
		font-size: calc(.8rem + .3vw)
	}

	.site-body:has(.reader-view) #toggle-sidebar-btn {
		top: 5px;
		background: 0 0
	}

	.site-body:has(.reader-view) #toggle-sidebar-btn:hover {
		background: 0 0
	}

	.sliding-windows .site-body:has(.reader-view) #toggle-sidebar-btn {
		right: 5px
	}

	.published-container:has(.reader-view) .site-header {
		display: block;
		position: fixed;
		top: 5px;
		right: 30px;
		z-index: 10;
		height: auto;
		padding: 5px 10px
	}

	.published-container:has(.reader-view) .site-header .site-header-text::after {
		display: none
	}

	.sliding-windows:has(.reader-view) .publish-renderer,
	.sliding-windows:has(.reader-view) .render-container,
	body:has(.reader-view) {
		background-color: var(--background-reader)
	}

	.sliding-windows:has(.reader-view.white) .publish-renderer,
	.sliding-windows:has(.reader-view.white) .render-container,
	body:has(.reader-view.white) {
		background-color: #fff
	}

	.site-body:has(.reader-view) .render-container-inner {
		margin: 0 auto
	}

	body:not(.sliding-windows):has(.reader-view) .is-readable-line-width.has-outline.has-navigation .publish-renderer>.markdown-preview-view>.markdown-preview-sizer {
		margin-right: inherit
	}

	body:not(.sliding-windows):has(.reader-view) .publish-renderer>.markdown-preview-view>.markdown-preview-sizer {
		margin: 0 auto
	}

	.sliding-windows div.hover-popover.is-loaded .publish-renderer {
		width: inherit !important;
		flex: inherit !important
	}

	.sliding-windows .published-container.has-graph .site-body:has(.reader-view) .site-body-center-column,
	.sliding-windows .site-body:has(.landing) .site-body-center-column,
	.sliding-windows .site-body:has(.reader-view) .site-body-center-column {
		padding-right: 40px
	}

	.site-body:has(.landing) .site-body-center-column,
	.site-body:has(.reader-view) .site-body-center-column {
		padding-left: 0;
		box-shadow: none
	}

	.site-body:has(.reader-view) .graph-view-outer .published-section-header,
	.site-body:has(.reader-view) .mod-footer,
	.site-body:has(.reader-view) .nav-view-outer,
	.site-body:has(.reader-view) .outline-view-outer,
	.site-body:has(.reader-view) .page-header,
	.site-body:has(.reader-view) .search-view-container,
	.site-body:has(.reader-view) .site-body-left-column,
	.site-body:has(.reader-view) .site-body-left-column-site-logo,
	.site-body:has(.reader-view) .site-body-left-column-site-name,
	.site-body:has(.reader-view) .site-body-right-column,
	.site-body:has(.reader-view) .site-footer {
		display: none
	}
}

.site-body:has(.reader-view) h1 {
	font-size: calc(3.4em + .55vw)
}

@media screen and (max-width:750px) {
	#toggle-sidebar-btn {
		display: none
	}

	.site-body:has(.reader-view) .site-body-left-column {
		display: flex !important
	}

	.markdown-rendered .callout-content ol>li,
	.markdown-rendered .callout-content ul>li {
		margin-inline-start: 1.25em
	}
}

@media screen and (max-width:1024px) {
	#toggle-sidebar-btn {
		right: 10px
	}
}

::-webkit-scrollbar-track:has(.reader-view) {
	background: rgba(14, 13, 13, 0)
}

.site-body:has(.landing) .callout,
.site-body:has(.landing) h1,
.site-body:has(.landing) h2,
.site-body:has(.landing) h3,
.site-body:has(.landing) h4,
.site-body:has(.landing) h5,
.site-body:has(.landing) h6,
.site-body:has(.landing) li,
.site-body:has(.landing) p {
	text-align: center
}

.site-body:has(.landing) li {
	list-style-position: inside;
	list-style: none
}

.site-body:has(.landing)>li:before {
	content: "— "
}

.site-body:has(.landing)>li:after {
	content: " —"
}

.site-body:has(.landing) .site-header {
	right: 5px
}

.site-body:has(.landing) #chooser,
.site-body:has(.landing) #toggle-sidebar-btn,
.site-body:has(.landing) .graph-view-outer .published-section-header,
.site-body:has(.landing) .mod-footer,
.site-body:has(.landing) .nav-view-outer,
.site-body:has(.landing) .outline-view-outer,
.site-body:has(.landing) .page-header,
.site-body:has(.landing) .search-view-container,
.site-body:has(.landing) .site-body-left-column,
.site-body:has(.landing) .site-body-left-column-site-logo,
.site-body:has(.landing) .site-body-left-column-site-name,
.site-body:has(.landing) .site-body-right-column,
.site-body:has(.landing) .site-footer {
	display: none !important
}

.site-body:has(.landing) .render-container-inner {
	margin: 0 auto
}

@media screen and (max-width:751px) {
	.site-body:has(.landing) .site-header {
		display: none
	}
}

.published-container .backlinks {
	margin-top: 100px;
	margin-bottom: 100px
}

.backlink-items-container {
	font-size: 16px
}

.backlinks .internal-link {
	color: var(--text-muted)
}

@keyframes blink {
	0% {
		opacity: 1
	}

	50% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

.blink {
	animation: blink 2s infinite
}

.blink-green {
	animation: blink 2s infinite;
	font-size: 9px;
	line-height: 1;
	vertical-align: super;
	color: var(--color-green)
}

.theme-dark .blink-green {
	animation: blink 2s infinite
}

.theme-dark .invert {
	filter: invert() !important
}

.publish-article-heading .clickable-icon {
	position: absolute
}

.theme-light .blend {
	mix-blend-mode: multiply
}

.theme-dark .blend {
	mix-blend-mode: normal
}

div.hover-popover.is-loaded h1,
div.hover-popover.is-loaded h2 {
	margin-block-end: .3em !important
}

#cookie-banner {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: var(--bg2);
	text-align: center;
	padding: 10px;
	z-index: 1000;
	border-top: 1px solid var(--background-modifier-border)
}

#cookie-banner button:not(.clickable-icon) {
	margin: 10px
}

.markdown-rendered div:has(>:is(p, pre, table, ul, ol, blockquote))+div>:is(h1, h2, h3, h4, h5, h6) {
	margin-top: var(--heading-spacing) !important
}

.published-container .markdown-rendered h1,
.published-container .markdown-rendered h2 {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: .35em
}

.markdown-rendered h1 .internal-link,
.markdown-rendered h2 .internal-link,
.markdown-rendered h3 .internal-link,
.markdown-rendered h4 .internal-link,
.markdown-rendered h5 .internal-link,
.markdown-rendered h6 .internal-link {
	text-decoration-thickness: 1px
}

.publish-article-heading .footnote-ref {
	font-size: 1.3rem
}

.list-cards.markdown-preview-view div ul ul>li,
.list-cards.markdown-preview-view div>ul>li {
	margin-inline-start: 0;
	background-color: var(--bg2);
	border: 0
}

.list-cards.markdown-preview-view .callout div ul ul>li,
.list-cards.markdown-preview-view .callout div>ul>li {
	background-color: transparent;
	border: 1px solid var(--tx2)
}

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

.markdown-preview-view .caption .external-link,
.markdown-preview-view .small .external-link {
	background-position-y: 2px
}

.theme-dark .external-link,
.theme-dark .internal-link {
	text-decoration-color: var(--color-base-70)
}

.external-link:hover,
.markdown-rendered .internal-link:hover,
.metadata-container .internal-link:hover {
	text-decoration-color: var(--text-accent)
}

.theme-dark .markdown-rendered mark .internal-link {
	color: var(--background-primary);
	font-weight: 700
}

.outline-view-outer .outline-view {
	padding-bottom: 80px
}

span.inline-note {
	font-size: var(--font-smallest);
	vertical-align: super;
	color: var(--color-base-50);
	padding: 3px;
	font-style: italic
}

.footnote-ref {
	font-size: var(--font-smallest)
}

input.search-bar {
	border-radius: var(--radius-l);
	background: var(--background-primary)
}

.published-container .search-bar {
    margin-top: 1.5rem; /* Adjust this value as needed */
}
  

.publish-renderer .motionblur {
	animation: blur-in 3s ease-out
}

@keyframes blur-in {
	from {
		filter: blur(4px) grayscale(100%)
	}

	to {
		filter: blur(0) grayscale(0)
	}
}

p svg.lucide {
	vertical-align: middle
}

.theme-dark .markdown-rendered mark {
	color: var(--background-primary);
	background-color: rgb(255 235 146 / 71%)
}

.boxed {
	padding: 15px;
	border: 1px solid var(--color-base-50);
	margin: 0 auto;
	border-radius: var(--radius-m);
	max-width: 700px;
	text-align: center
}

.markdown-preview-view .caption,
.markdown-preview-view .smalltext,
.markdown-preview-view .smalltext *,
.smalltext.smalltext.list-cards.markdown-preview-view div>ul>li {
	font-size: var(--font-smallest)
}

.markdown-preview-view .caption a,
.markdown-preview-view .smalltext a {
	text-decoration-thickness: 1px
}

.grayscale img {
	filter: grayscale()
}

.grayscale img:hover {
	filter: none
}

.desaturated {
	filter: grayscale(90%)
}

.desaturated a {
	text-decoration: underline
}

.reduced {
	font-size: 96%
}

.blur {
	filter: blur(4px)
}

.blur:hover {
	filter: blur(0)
}

.desaturated.blur {
	filter: blur(4px) grayscale(90%)
}

.desaturated.blur:hover {
	filter: blur(0) grayscale(90%)
}

.markdown-preview-view .date {
	font-weight: 700;
	opacity: .7;
	text-align: right;
	margin-right: 5px
}

.caption {
	text-align: center;
	display: block;
	margin: -12px auto 35px
}

.list-cards .caption {
	margin-top: 0
}

.img-grid .markdown-preview-section>div:has(.image-embed)>p span.caption {
	text-align: left;
	margin: 0 auto 35px
}

.markdown-preview-view .light * {
	opacity: .7
}

.markdown-preview-view .footnotes ol {
	font-size: var(--font-smallest) !important
}

ul>li.task-list-item .task-list-item-checkbox {
	margin-left: -1.83em !important
}

.nav-view-outer,
.outline-view-outer {
	padding-bottom: 90px
}

.modal-close-button {
	top: 16px
}

.markdown-preview-view.reduced p {
	margin-block-start: 0
}

@media screen and (min-width:751px) {
	.markdown-rendered.clean {
		padding: 70px !important
	}

	.markdown-rendered.clean h1 .markdown-rendered.clean h1 {
		display: none
	}
}

.mermaid {
	text-align: center;
	margin: 30px auto 30px auto
}

.mermaid .text-inner-tspan {
	fill: var(--text-light)
}

.markdown-rendered table {
	border-radius: var(--radius-m);
	margin: 30px 0
}

.markdown-rendered.small-table table td {
	font-size: var(--font-smallest)
}

.markdown-rendered.nolists ol,
.markdown-rendered.nolists.clean-table ul,
table ul:has(li.tag) {
	margin: 0;
	padding: 0
}

.markdown-rendered.nolists ol>li,
.markdown-rendered.nolists ul>li,
table ul:has(li.tag)>li {
	list-style-type: none;
	display: inline-block;
	margin-inline-start: 0
}

table ul:has(li.tag)>li::after {
	content: " "
}

.markdown-rendered.nolists ol>li::after,
.markdown-rendered.nolists ul>li::after {
	content: " / "
}

.markdown-rendered.nolists ol>li:last-child::after,
.markdown-rendered.nolists ul>li:last-child::after,
table ul:has(li.tag)>li:last-child::after {
	content: ""
}

.markdown-rendered.clean-table tbody>tr>td,
.markdown-rendered.clean-table thead>tr>th {
	border: none
}

.markdown-rendered.clean-table tbody tr>td:first-child,
.markdown-rendered.clean-table thead tr>th:first-child {
	text-align: right;
	color: var(--color-base-55)
}

.theme-dark .markdown-rendered.clean-table tbody tr>td:first-child,
.theme-dark .markdown-rendered.clean-table thead tr>th:first-child {
	color: var(--text-muted)
}

.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)
}

.search-view-container {
	margin: 0 0 10px 0
}

.site-body-left-column-site-logo img {
	border-radius: 0
}

.site-body-left-column-site-logo img:hover {
	cursor: pointer
}

.site-body-left-column-site-name {
	z-index: 0 !important;
	padding: 0;
	text-align: center;
	font-weight: 600
}

.theme-dark .site-body-left-column-site-logo img {
	filter: invert(1) hue-rotate(212deg);
	opacity: 1
}

.site-body-left-column-site-theme-toggle {
	margin: 0 auto;
	padding-right: 32px;
	position: absolute;
	top: 10px;
	left: 10px
}

.site-body-left-column .search-view-outer {
	margin: 0;
	display: contents
}

.site-header-text:hover {
	text-decoration: none
}

.site-header-logo {
	display: none
}

.site-body-left-column {
	padding-right: 18px
}

.nav-view-outer .nav-view>.tree-item>.tree-item-children>.tree-item>.tree-item-self:hover {
	opacity: .65
}

.callout {
	margin: 30px 0;
	padding: 10px;
	border-radius: var(--radius-m);
	border-left: 0
}

.callout[data-callout-metadata=red] {
	--callout-color: var(--flexoki-red-500) !important
}

.callout[data-callout-metadata=blue] {
	--callout-color: var(--flexoki-blue-300) !important
}

.callout[data-callout-metadata=yellow] {
	--callout-color: var(--flexoki-yellow-400) !important
}

.callout[data-callout-metadata=purple] {
	--callout-color: var(--flexoki-purple-400) !important
}

.callout[data-callout-metadata=gray] {
	--callout-color: var(--flexoki-gray) !important
}

.callout[data-callout=highlight],
.callout[data-callout=pdf] {
	--callout-icon: "lucide-highlighter"
}

.callout[data-callout=pdf][data-callout-metadata=yellow] {
	--callout-color: var(--color-yellow-rgb)
}

.callout[data-callout=pdf][data-callout-metadata=red] {
	--callout-color: var(--color-orange-rgb)
}

.callout[data-callout=pdf][data-callout-metadata=note] {
	--callout-color: var(--color-cyan-rgb)
}

.callout[data-callout=hint] {
	--callout-color: var(--color-purple-rgb)
}

.callout[data-callout=important] {
	--callout-color: var(--color-red-rgb)
}

.callout[data-callout=watch] {
	--callout-icon: "lucide-youtube";
	background-color: var(--background-secondary)
}

.callout[data-callout=timeline] {
	--callout-icon: "lucide-calendar";
	--callout-color: var(--color-purple-rgb)
}

.callout[data-callout=links] {
	--callout-icon: "lucide-link";
	--callout-color: var(--color-orange-rgb)
}

.callout[data-callout=bot],
.callout[data-callout=note] {
	--callout-color: var(--color-purple-rgb)
}

.callout[data-callout=user] {
	--callout-icon: "lucide-user";
	background-color: var(--background-secondary);
	--callout-color: var(--color-gray-rgb)
}

.callout[data-callout=grid].callout,
.callout[data-callout=routes] {
	filter: none;
	-webkit-filter: none
}

.callout[data-callout=cite] {
	background-color: transparent;
	border-radius: 0;
	margin: 20px 30px;
	padding: 0
}

.callout[data-callout=texts] {
	--callout-icon: "lucide-file-text";
	--callout-color: var(--color-oldpink-rgb)
}

.callout[data-callout=bot] {
	--callout-icon: "lucide-bot-message-square"
}

.callout[data-callout=docs] {
	--callout-icon: "lucide-paperclip";
	--callout-color: var(--color-green-rgb)
}

.callout[data-callout=trail] {
	--callout-icon: "lucide-footprints";
	--callout-color: var(--color-yellow-rgb)
}

.callout[data-callout=routes] {
	--callout-icon: "lucide-map";
	--callout-color: var(--color-yellow-rgb)
}

.callout[data-callout=hipertext] {
	--callout-icon: "lucide-refresh-cw";
	--callout-color: var(--color-wine-rgb)
}

.callout[data-callout=small] {
	--callout-icon: "circle-dashed";
	background-color: transparent
}

.callout[data-callout=video] {
	--callout-icon: "lucide-video"
}

.callout[data-callout=galleries],
.callout[data-callout=images],
.callout[data-callout=portfolio] {
	--callout-icon: "lucide-image";
	border: 1px solid var(--color-base-35);
	margin: 20px auto 20px auto;
	border-radius: var(--radius-m);
	background-color: rgba(255, 255, 255, 1)
}

.theme-dark .callout[data-callout=galleries],
.theme-dark .callout[data-callout=images],
.theme-dark .callout[data-callout=portfolio] {
	background-color: rgba(0, 0, 0, 1)
}

.callout[data-callout=newsbox] {
	padding: 15px;
	border: 1px solid var(--text-normal);
	margin: 20px auto 20px auto;
	border-radius: var(--radius-m);
	background-color: transparent;
	--callout-icon: "calendar-days"
}

.callout[data-callout=info] {
	background-color: var(--background-secondary)
}

.callout[data-callout=infobox] {
	padding: 10px;
	border: 1px solid var(--color-base-35);
	margin: 20px auto 20px auto;
	background-color: transparent
}

.callout[data-callout=big-sans],
.callout[data-callout=big-serif] {
	font-size: 22px;
	background: 0;
	margin: 50px 0;
	line-height: 30px;
	padding: 0
}

.callout[data-callout=big-serif] {
	font-family: var(--font-primary-serif)
}

.callout[data-callout=clean] {
	background: 0;
	border: 0;
	padding: 30px 0 30px 50px
}

div.hover-popover.is-loaded .callout[data-callout=clean] {
	margin-left: 0 !important
}

.callout[data-callout=book] {
	--callout-color: var(--color-yellow-rgb);
	--callout-icon: "lucide-book"
}

div.popover.hover-popover.is-loaded .callout[data-callout=noteinfo] {
	margin-top: 0 !important
}

.callout[data-callout=noteinfo] {
	--callout-icon: "lucide-info"
}

.callout[data-callout=noteinfo] {
	font-size: var(--font-smaller);
	background: 0;
	padding: 0;
	margin: 0 0 50px 0;
	border-radius: 0;
	line-height: var(--line-height-normal)
}

.callout[data-callout=small] {
	font-size: var(--font-smallest);
	padding: 0;
	margin: 0 0 50px 0;
	border-radius: 0;
	opacity: 1;
	line-height: var(--line-height-normal)
}

.callout[data-callout=languages] {
	padding: 5px 5px;
	background-color: transparent;
	font-size: var(--font-smallest);
	border: .01em solid var(--color-base-50);
	margin: 0 0 5px 0;
	--callout-icon: "lucide-languages";
	font-variant: all-small-caps
}

.callout[data-callout=big-sans] .callout-title,
.callout[data-callout=big-serif] .callout-title,
.callout[data-callout=cite] .callout-icon,
.callout[data-callout=cite] .callout-title,
.callout[data-callout=clean]>.callout-title,
.callout[data-callout=infobox] .callout-title,
.callout[data-callout=infobox] .callout-title .svg-icon,
.callout[data-callout=noteinfo] .callout-title,
.callout[data-callout=small] .callout-title {
	display: none
}

.callout[data-callout=languages] .callout-title {
	padding: 0
}

.callout[data-callout=galleries] .callout-title,
.callout[data-callout=images] .callout-title,
.callout[data-callout=info] .callout-title,
.callout[data-callout=languages] .callout-title .svg-icon,
.callout[data-callout=portfolio] .callout-title {
	filter: grayscale()
}

.callout[data-callout=languages] .callout-title-inner {
	font-weight: 300;
	color: var(--text-muted)
}

.callout[data-callout=cite] .callout-content {
	font-weight: inherit;
	font-style: italic;
	font-family: var(--font-primary-serif)
}

.callout[data-callout=cite] .callout-content {
	padding: 0
}

.callout[data-callout=cite] .callout-content blockquote {
	border: 0;
	padding: 0
}

.callout[data-callout=infobox] .callout-content {
	text-align: center
}

.callout[data-callout=infobox] .callout-content p {
	margin: 10px 0
}

.callout[data-callout=big-sans] .callout-content,
.callout[data-callout=big-serif] .callout-content {
	padding: 0 0 0 30px
}

.callout[data-callout=big-sans] p,
.callout[data-callout=big-serif] p {
	padding: 0;
	margin: 0
}

.callout[data-callout=noteinfo] .callout-content {
	padding: 0 0 2px 0;
	text-indent: 0
}

.callout[data-callout=noteinfo] .callout-content p,
.callout[data-callout=small] .callout-content,
.callout[data-callout=small] .callout-content p {
	padding: 0;
	margin: 0
}

.callout[data-callout=noteinfo] .external-link,
.callout[data-callout=small] .external-link {
	background-size: 10px;
	background-position-y: 0
}

.callout[data-callout=small] .callout-content p svg.lucide {
	vertical-align: text-bottom
}

.callout[data-callout=noteinfo] .callout-content,
.callout[data-callout=small] .callout-content {
	padding: 0
}

.callout[data-callout=noteinfo] .callout-content {
	color: var(--text-muted)
}

.callout[data-callout=noteinfo] .callout-content .markdown-rendered .tag:not(.token) {
	font-size: var(--font-smaller)
}

.callout[data-callout=noteinfo] .callout-content a {
	color: var(--color-base-60);
	text-decoration-color: var(--color-base-40)
}

.callout[data-callout=noteinfo] .callout-content a:hover {
	color: var(--text-accent-hover);
	text-decoration-color: var(--text-accent-hover)
}

.callout[data-callout=noteinfo] .callout-content .tag:not(.token):hover {
	color: var(--color-base-00)
}

.theme-dark .callout[data-callout=noteinfo] .callout-content .tag:not(.token):hover {
	color: var(--color-base-60)
}

.callout[data-callout=languages] .callout-content {
	display: none
}

.callout[data-callout=small] .callout-content .markdown-rendered .tag:not(.token) {
	font-size: var(--font-smallest)
}

.callout .callout-title a {
	font-weight: var(--bold-weight);
	color: var(--callout-title-color)
}

.callout[data-callout=pdf][data-callout-metadata=yellow] .callout-title a {
	filter: brightness(.8)
}

.markdown-preview-view .tag:not(.token) {
	white-space: nowrap;
	text-decoration: none;
	font-size: var(--font-smallest);
	border: 1px solid var(--ui3)
}

.markdown-preview-view .tag:not(.token):hover {
	text-decoration: none;
	background-color: var(--ui3)
}

.body:not(.minimal-unstyled-tags) {
	margin: 1px 10px 0 0
}

.markdown-preview-view .callout:not([data-callout=noteinfo]):not([data-callout=clean]):not([data-callout=small]) .tag:not(.token) {
	background-color: transparent;
	color: var(--text-normal);
	border: 1px solid var(--text-normal);
	padding: 0 5px;
	font-size: var(--font-smallest)
}

.markdown-preview-view .callout:not([data-callout=noteinfo]):not([data-callout=clean]):not([data-callout=small]) .tag:not(.token):hover {
	background-color: var(--text-normal);
	color: var(--background-color)
}

.theme-light img[src$="#blend"],
.theme-light span[src$="#blend"] img {
	mix-blend-mode: multiply
}

.theme-light .lightbox [src$="#blend"],
.theme-light .lightbox span[src$="#blend"] img {
	mix-blend-mode: screen
}

.theme-light img[src$="#invert"],
.theme-light span[src$="#invert"] img {
	mix-blend-mode: multiply
}

.theme-light .lightbox [src$="#invert"],
.theme-light .lightbox span[src$="#invert"] img {
	mix-blend-mode: screen
}

.list-cards.cards-white.markdown-preview-view div>ul>li {
	background-color: #fff
}

.list-cards.cards-noborder.markdown-preview-view div>ul>li {
	border: 0
}

img {
	cursor: var(--img-zoom-in-cursor)
}

.publish-renderer .grayscale img {
	filter: grayscale(100%);
	opacity: 1
}

.publish-renderer .grayscale img:hover {
	filter: none;
	opacity: 1
}

.markdown-preview-view img {
	max-width: 100%;
	border-radius: var(--radius-m);
	display: block;
	margin: 0 auto
}

.theme-dark img {
	opacity: .8
}

.theme-dark .lightbox img {
	opacity: 1
}

div[src$="#float"],
span[src$="#float"] {
	padding-right: 10px;
	float: left
}

div[src$="#float"] img,
img[src$="#float"],
span[src$="#float"] img {
	height: auto;
	width: 100px
}

.lightbox div[src$="#float"] img,
.lightbox img[src$="#float"],
.lightbox span[src$="#float"] img {
	height: auto;
	width: auto
}

div[src$="#boxed"] img,
img[src$="#boxed"],
span[src$="#boxed"] img {
	border: 1px solid var(--color-base-50)
}

.lightbox div[src$="#boxed"] img,
.lightbox img[src$="#boxed"],
.lightbox span[src$="#boxed"] img {
	border: 0
}

.theme-dark div[src$="#icon"] img,
.theme-dark img[src$="#icon"],
.theme-dark span[src$="#icon"] img,
.theme-dark svg.icon {
	width: 18px;
	margin-right: 2px;
	filter: invert()
}

div[src$="#icon"] img,
img[src$="#icon"],
span[src$="#icon"] img,
svg.icon {
	width: 18px;
	margin-right: 2px
}

.img-grid .image-embed.is-loaded[src$="#icon"],
.img-grid div[src$="#icon"],
.img-grid span[src$="#icon"],
div[src$="#icon"],
span[src$="#icon"] {
	display: inline-block;
	vertical-align: middle;
	opacity: .6
}

.img-grid span[src$="#icon"].image-embed img:hover,
.img-zoom span[src$="#icon"].image-embed img:hover,
.markdown-preview-view img[src^=http],
div[src$="#icon"].image-embed img:hover,
span[src$="#icon"].image-embed img:hover {
	cursor: default
}

span[src$="#icon"]+span[src$="#icon"] {
	margin-left: 2px
}

.markdown-rendered video {
	width: 100%;
	margin: 0 auto;
	display: block;
	border-radius: var(--radius-m)
}

.markdown-source-view .pdf-embed,
.pdf-embed {
	max-width: 100%;
	height: auto !important
}

.internal-embed:not(.image-embed) {
	--embed-padding: 20px 0 0 20px
}

.internal-embed:not(.image-embed) h1 {
	margin-top: 0;
	font-size: var(--h2-size) !important
}

.internal-embed:not(.image-embed).pdf-embed .iframe,
.internal-embed:not(.image-embed).pdf-embed .iframe embed {
	max-width: 100% !important
}

.markdown-embed-title {
	white-space: pre-wrap;
	font-variant: var(--page-title-variant);
	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);
	margin-bottom: 50px
}

iframe video .media-controls {
	width: 100% !important
}

iframe {
	border: 0;
	width: 100%;
	max-width: 100%;
	border-radius: var(--radius-m);
	background-color: transparent;
	margin: 50px auto 50px auto;
	display: block
}

iframe.boxed {
	padding: 0
}

iframe.border {
	border-color: var(--color-base-100)
}

.internal-embed:not(.image-embed).pdf-embed {
	height: 800px !important;
	max-width: 100%;
	width: 100%;
	border: 0
}

.internal-embed:not(.image-embed).pdf-embed iframe {
	height: 100% !important;
	min-height: 340px;
	max-width: 100%;
	width: 100%;
	border-radius: var(--radius-m);
	margin: 0
}

.lr_embed {
	margin: 20px 0
}

#slideshow .image-view .image,
video {
	border-radius: var(--radius-m)
}

.site-footer {
	position: absolute;
	right: 5px;
	bottom: 0;
	width: 258px;
	font-size: 11px;
	line-height: initial;
	padding-bottom: 10px;
	background-color: var(--background-primary)
}

.sliding-windows .site-footer {
	right: 23px;
	position: absolute;
	bottom: 0;
	width: 258px;
	font-size: 11px;
	line-height: initial;
	padding-bottom: 10px;
	background-color: var(--background-primary);
	text-align: left
}

.site-footer a {
	text-decoration: underline
}

.theme-light .site-footer {
	color: rgba(127, 127, 127, 1)
}

.theme-dark .site-footer {
	color: rgba(126, 126, 126, 1)
}

.site-footer .foot-links {
	margin-bottom: 2px;
	border-bottom: 0 dotted #e2e2e2;
	padding-bottom: 2px;
	display: none
}

.social {
	margin: 5px auto 5px auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 5px
}

.markdown-preview-view .social img[src^=http] {
	cursor: pointer
}

.social .social-icon svg {
	fill: var(--text-muted)
}

.social svg:hover path {
	fill: var(--text-accent)
}

.social img.social-icon {
	filter: opacity(.6) !important;
	border-radius: 0
}

.social img.social-icon:hover {
	filter: opacity(1) !important
}

.theme-dark .social img.social-icon {
	filter: invert(1) !important;
	opacity: .6
}

.theme-dark .social img.social-icon:hover {
	opacity: 1
}

.social a {
	background: 0 0;
	text-decoration: none;
	margin-right: 10px
}

.social a:last-child {
	margin-right: 0 !important
}

.site-footer .social .behance,
.site-footer .social .facebook,
.site-footer .social .linkedin,
.site-footer .threads {
	display: none !important
}

.site-footer .social {
	text-align: right;
	display: block
}

.sliding-windows .site-footer .social {
	text-align: left;
	display: block
}

.social svg {
	width: auto;
	height: 15px;
	vertical-align: middle
}

.social svg .cls-0,
.social svg:hover path.cls-0 {
	fill: none
}

.social svg#mailme {
	border-radius: 2px;
	background: 0 0;
	width: auto;
	height: 12px;
	gap: 33px
}

.social svg#portfolio {
	height: 18px
}

.social svg#blog {
	height: 20px
}

.social svg#behance {
	background: 0 0;
	width: auto;
	height: 13px
}

.social svg#linkedin-icon {
	background: 0 0;
	width: auto;
	height: 22px
}

.social svg#face {
	border-radius: 2px
}

@media screen and (min-width:1800px) {
	.sliding-windows .publish-renderer {
		width: 800px;
		flex: 0 0 800px
	}

	.site-body-left-column-site-name,
	body {
		font-size: 110%
	}
}

@media screen and (min-width:2100px) {
	.published-container {
		--sidebar-left-width: 400px
	}

	.nav-view,
	.site-body-left-column-site-name,
	body {
		font-size: 120%
	}

	.nav-view [data-path]::after,
	.site-body-left-column-site-name::after {
		font-size: 100%;
		padding: 0
	}

	.callout[data-callout=circle],
	.callout[data-callout=noteinfo],
	.callout[data-callout=small] {
		font-size: 85% !important
	}
}

@media screen and (max-width:730px) {
	.site-header-text::after {
		display: block;
		text-align: left;
		margin: 0
	}

	.page-header {
		display: none
	}

	.site-footer {
		width: 100%
	}

	.site-footer .social {
		display: flex;
		text-align: center
	}

	.site-footer {
		position: relative;
		width: 100%;
		text-align: center;
		right: 0
	}

	.search-view-container {
		margin: 10px 15px 15px
	}

	.search-view-container input {
		height: 50px
	}

	.site-body-left-column-site-name,
	.site-body-left-column-site-theme-toggle {
		margin: 0 0 20px 5px !important;
		position: relative;
		top: 0
	}
}

@media screen and (max-width:1024px) {
	.markdown-rendered h1 {
		margin-block-start: 40px !important
	}

	.frontmatter-container {
		margin-bottom: 3rem
	}

	.callout[data-callout=clean] {
		background: 0;
		border: 0;
		padding: 10px 0 10px 0
	}

	.site-footer {
		width: 100%
	}

	.site-body-left-column .search-view-outer {
		margin: 20px 0 0 0
	}

	.site-footer .social {
		display: none
	}
}

@media screen and (max-width:1024px) and (orientation:landscape) {

	.site-body-left-column-site-logo,
	.site-footer {
		width: 150px !important;
		display: none
	}

	.site-body-left-column-site-name,
	.site-body-left-column-site-theme-toggle {
		margin: 0 0 !important
	}

	.nav-view-outer {
		opacity: 1
	}

	.markdown-preview-view:not(.show-frontmatter) .frontmatter {
		display: none !important
	}

	.site-footer {
		text-align: center;
		width: 100%;
		right: 50%;
		bottom: -20px;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 5px 0 22px 0 !important;
		margin: 0
	}

	.site-footer .social {
		display: none
	}
}

@media screen and (max-width:1024px) and (orientation:portrait) {
	body {
		--font-text-size: var(--font-text-size-mobile) !important
	}

	.tree-item-self .tree-item-icon {
		padding-inline-start: 25px !important
	}

	.site-footer {
		text-align: center;
		right: 0;
		width: 100%
	}

	.site-footer .social {
		text-align: center
	}
}

@media print {

	#toggle-sidebar-btn,
	.backlinks,
	.boxed:has(.social),
	.callout.is-collapsed,
	.frontmatter-container,
	.markdown-preview-view:not(.show-frontmatter) .frontmatter,
	.page-header {
		display: none !important
	}
}

.footnote-tooltip {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	border: 1px solid #ccc;
	padding: 10px;
	z-index: 1000;
	max-width: 300px;
	font-size: .9em
}

.footnote-link:hover .footnote-tooltip {
	display: block
}