@font-face {
	font-family: "league-spartan";
	src: url("./assets/fonts/league-spartan/LeagueSpartan-VariableFont_wght.ttf"); /* Change the path to the font if needed */
}

/* === UI Theme Colors (Light Mode) === */
:root {
	--bg-color: #f6f6f6; /* Main background color */
	--text-color: #0a0a0a; /* Primary text color */
	--header-text-color: #0a0a0a; /* Header text color */
	--border-color: rgba(0, 0, 0, 0.1); /* Border and divider color */
	--hover-bg: rgba(0, 0, 0, 0.1); /* Background on hover state */
	--button-bg: #f0f0f0; /* Button and container background */
	--button-text: #0a0a0a; /* Button text color */
	--primary: #6c35e4; /* Active/selected element color */

	--primary-08: rgba(113, 51, 246, 0.8);

	/* === Links === */
	--md-link: #1f35dc;
	--md-link-hover: #5161dc;
	--md-link-visited: #5019da;

	/* === Markdown Code Styling === */
	--md-code-bg-color: #f5f5f5; /* Code block background */
	--md-inline-code-bg: #ececec; /* Inline code background */
	--md-code-block-bg: #f8f9fa; /* Code block background (main) */
	--md-code-block-border: #e9ecef; /* Code block border color */
	--md-greyed-out: #a6a6a6; /* Disabled/muted text color */

	/* === Markdown Signature Blocks === */
	--md-positive-bg: rgba(34, 197, 94, 0.1); /* Success/positive background */
	--md-positive-color: rgb(22, 101, 52); /* Success/positive text color */
	--md-warning-bg: rgba(245, 158, 11, 0.1); /* Warning background */
	--md-warning-color: rgb(146, 64, 14); /* Warning text color */
	--md-negative-bg: rgba(239, 68, 68, 0.1); /* Error/negative background */
	--md-negative-color: rgb(153, 27, 27); /* Error/negative text color */
	--md-info-bg: rgba(59, 130, 246, 0.1); /* Info background */
	--md-info-color: rgb(30, 64, 175); /* Info text color */

	/* === Markdown Button Containers === */
	--md-button-container: rgb(200, 200, 200); /* Button container border color */
	--md-button-container-hover: rgb(160, 160, 160); /* Button container hover border */

	/* === Markdown Signature Block Headings === */
	--md-positive-heading-bg: rgba(34, 197, 94, 0.2); /* Positive heading background */
	--md-warning-heading-bg: rgba(245, 158, 11, 0.2); /* Warning heading background */
	--md-negative-heading-bg: rgba(239, 68, 68, 0.2); /* Negative heading background */
	--md-info-heading-bg: rgba(59, 130, 246, 0.2); /* Info heading background */

	/* === Markdown Tables === */
	--md-table-border: #d1d5db; /* Table border color */
	--md-table-header-bg: #f3f4f6; /* Table header background */
	--md-table-header-color: #374151; /* Table header text color */
	--md-table-cell-bg: white; /* Table cell background */
	--md-table-row-even-bg: #fbfbfb; /* Even row background (zebra striping) */
	--md-table-row-hover-bg: #f3f4f6; /* Table row hover background */

	/* === Code Block Syntax Highlighting === */
	--md-cb-text: #0a0a0a; /* Default code text color */
	--md-cb-comment: #188418; /* Comment text color */
	--md-cb-number: #dfb11b; /* Number literal color */
	--md-cb-keyword: #0e00d5; /* Keyword color */
	--md-cb-hash: #c915e1; /* Hash/special symbol color */
	--md-cb-qmark: #a84600; /* Question mark/operator color */
	--md-cb-brc: var(--md-cb-text); /* Round brackets color */
	--md-cb-cbrc: var(--md-cb-text); /* Curly brackets color */
	--md-cb-sbrc: var(--md-cb-keyword); /* Square brackets color */
	--md-cb-dot: var(--md-cb-text); /* Dot/period color */
	--md-cb-object: #001369; /* Object/class name color */
	--md-cb-property: #575a00; /* Property/attribute name color */
}

/* === UI Theme Colors (Dark Mode) === */
:root.dark-mode {
	--bg-color: #1e1e1e; /* Dark background color */
	--text-color: #e0e0e0; /* Light text for dark mode */
	--header-text-color: #ffffff; /* Bright header text */
	--border-color: rgba(255, 255, 255, 0.1); /* Light border color */
	--hover-bg: rgba(255, 255, 255, 0.1); /* Light hover background */
	--button-bg: #2d2d2d; /* Dark button background */
	--button-text: #e0e0e0; /* Light button text */
	--topic-selected-hover-bg: rgba(134, 59, 246, 0.2); /* Selected element hover background */
	--primary: #9362fd; /* Active/selected element color */

	--primary-08: rgba(113, 51, 246, 0.8);

	/* === Links === */
	--md-link: #acb6fe;
	--md-link-hover: #697afd;
	--md-link-visited: #ad90f8;

	/* === Markdown Code Styling (Dark Mode) === */
	--md-code-bg-color: #2d2d2d; /* Dark code block background */
	--md-inline-code-bg: #2d2d2d; /* Dark inline code background */
	--md-code-block-bg: #2d2d2d; /* Dark code block background (main) */
	--md-code-block-border: #3d3d3d; /* Dark code block border */

	/* === Markdown Signature Blocks (Dark Mode) === */
	--md-positive-bg: rgba(34, 197, 94, 0.2); /* Dark success background */
	--md-positive-color: rgb(111, 218, 152); /* Bright success text */
	--md-warning-bg: rgba(245, 158, 11, 0.2); /* Dark warning background */
	--md-warning-color: rgb(251, 191, 36); /* Bright warning text */
	--md-negative-bg: rgba(239, 68, 68, 0.2); /* Dark error background */
	--md-negative-color: rgb(252, 165, 165); /* Bright error text */
	--md-info-bg: rgba(59, 130, 246, 0.2); /* Dark info background */
	--md-info-color: rgb(147, 197, 253); /* Bright info text */

	/* === Markdown Button Containers (Dark Mode) === */
	--md-button-container: rgb(80, 80, 80); /* Dark button container border */
	--md-button-container-hover: rgb(120, 120, 120); /* Dark button hover border */

	/* === Markdown Signature Block Headings (Dark Mode) === */
	--md-positive-heading-bg: rgba(34, 197, 94, 0.2); /* Dark positive heading background */
	--md-warning-heading-bg: rgba(245, 158, 11, 0.2); /* Dark warning heading background */
	--md-negative-heading-bg: rgba(239, 68, 68, 0.2); /* Dark negative heading background */
	--md-info-heading-bg: rgba(59, 130, 246, 0.2); /* Dark info heading background */

	/* === Markdown Tables (Dark Mode) === */
	--md-table-border: #3d3d3d; /* Dark table border */
	--md-table-header-bg: #2d2d2d; /* Dark table header background */
	--md-table-header-color: #e0e0e0; /* Light table header text */
	--md-table-cell-bg: #1e1e1e; /* Dark table cell background */
	--md-table-row-even-bg: #252525; /* Dark even row background */
	--md-table-row-hover-bg: #2d2d2d; /* Dark table row hover background */

	/* === Code Block Syntax Highlighting (Dark Mode) === */
	--md-cb-text: #e0e0e0; /* Light code text */
	--md-cb-comment: #379837; /* Green comment color */
	--md-cb-number: #dfb11b; /* Number color */
	--md-cb-keyword: #4f43ff; /* Bright keyword color */
	--md-cb-hash: #cf11e8; /* Bright hash/symbol color */
	--md-cb-qmark: #db8b52; /* Orange operator color */
	--md-cb-brc: var(--md-cb-text); /* Round brackets color */
	--md-cb-cbrc: var(--md-cb-text); /* Curly brackets color */
	--md-cb-sbrc: var(--md-cb-keyword); /* Square brackets color */
	--md-cb-dot: var(--md-cb-text); /* Dot/period color */
	--md-cb-object: #bbc2e3; /* Light object/class name color */
	--md-cb-property: #e6e7c8; /* Light property/attribute name color */
}

/* Base Body Styles */
body {
	font-family: "league-spartan", Arial, sans-serif;
	line-height: 1.6;
	margin: 0;
	padding: 0;
}

/* Heading Styles */
.markdown-heading {
	font-weight: bold;
	margin: 0.5em 0 0.25em;
}

.markdown-heading h1 {
	font-size: 2em;
}

.markdown-heading h2 {
	font-size: 1.75em;
}

.markdown-heading h3 {
	font-size: 1.5em;
}

.markdown-heading h4 {
	font-size: 1.25em;
}

.markdown-heading h5 {
	font-size: 1em;
}

.markdown-heading h6 {
	font-size: 0.875em;
}

/* Paragraph Styles */
.markdown-paragraph {
	margin: 0.25em 0;
}

/* Unordered Lists */
.markdown-list {
	list-style-type: disc;
	margin: 0.25em 0 0.25em 1.5em;
	padding: 0;
}

.markdown-list-item {
	margin: 0.25em 0;
}

/* Ordered Lists */
.markdown-ordered-list {
	list-style-type: decimal;
	margin: 0.25em 0 0.25em 1.5em;
	padding: 0;
}

.markdown-ordered-list-item {
	margin: 0.25em 0;
}

/* Bold Text */
.markdown-bold {
	font-weight: bold;
}

/* Italic Text */
.markdown-italic {
	font-style: italic;
}

/* Strikethrough Text */
.markdown-strikethrough {
	text-decoration: line-through;
	opacity: 0.7;
}

/* Inline Code */
.markdown-code {
	font-family: monospace;
	background-color: var(--md-inline-code-bg);
	padding: 0.2em 0.4em;
	border-radius: 4px;
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease;
}

/* Standard Code Block */
.markdown-code-block {
	font-family: monospace;
	background-color: var(--md-code-block-bg);
	border: 1px solid var(--md-code-block-border);
	border-radius: 5px;
	padding: 1rem;
	margin: 1rem 0;
	overflow-x: auto;
	white-space: pre;
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		color 0.3s ease;
}

/* Standard links */
.markdown-link {
	position: relative;
	color: var(--md-link);
	text-decoration: none;
	transition: color 0.1s ease;
}

.markdown-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1.5px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.markdown-link:hover {
	color: var(--md-link-hover);
}

.markdown-link:hover::after {
	transform: scaleX(1);
}

/* Button-styled Links */
.markdown-button {
	display: inline-block;
	background-color: var(--primary);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 5px;
	cursor: pointer;
	transition: 0.1s;
	font-family: "league-spartan", Arial, sans-serif;
	font-weight: 600;
	text-decoration: none;
	border: none;
}

.markdown-button:hover {
	background-color: var(--primary-08);
	transform: translateY(-1px);
}

/* Success/Positive Block */
.markdown-positive {
	background-color: var(--md-positive-bg);
	border-left: 4px solid rgb(34, 197, 94);
	padding: 0.5rem 0.75rem;
	margin: 0.5rem 0;
	border-radius: 3px;
	font-family: "league-spartan", Arial, sans-serif;
	font-weight: 500;
	color: var(--md-positive-color);
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

/* Warning Block */
.markdown-warning {
	background-color: var(--md-warning-bg);
	border-left: 3px solid rgb(245, 158, 11);
	border-radius: 3px;
	padding: 0.5rem 0.75rem;
	margin: 0.5rem 0;
	font-family: "league-spartan", Arial, sans-serif;
	font-weight: 500;
	color: var(--md-warning-color);
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

/* Error/Negative Block */
.markdown-negative {
	background-color: var(--md-negative-bg);
	border-left: 4px solid rgb(239, 68, 68);
	padding: 0.5rem 0.75rem;
	margin: 0.5rem 0;
	border-radius: 3px;
	font-family: "league-spartan", Arial, sans-serif;
	font-weight: 500;
	color: var(--md-negative-color);
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

/* Info Block */
.markdown-info {
	background-color: var(--md-info-bg);
	border-left: 4px solid rgb(59, 130, 246);
	padding: 0.5rem 0.75rem;
	margin: 0.5rem 0;
	border-radius: 3px;
	font-family: "league-spartan", Arial, sans-serif;
	font-weight: 500;
	color: var(--md-info-color);
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

/* Signature Block Sub-components */
.markdown-signature-heading {
	margin: 0 0 0.25rem 0;
	font-weight: 600;
	font-size: 1.1em;
	color: inherit;
}

.markdown-signature-header {
	display: flex;
	align-items: center;
	gap: 8px;
}

.markdown-signature-body {
	margin: 0;
	font-weight: 400;
	opacity: 0.9;
}

.markdown-signature-header .icon {
	height: 16px;
	width: 16px;
	margin-top: -0.37rem;
}

/* Signature Block Icons - Light Mode */
.markdown-positive .markdown-signature-header .icon {
	filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(106deg) brightness(91%) contrast(97%);
	transition: filter 0.3s ease;
}

.markdown-warning .markdown-signature-header .icon {
	filter: brightness(0) saturate(100%) invert(41%) sepia(94%) saturate(1263%) hue-rotate(13deg) brightness(94%) contrast(91%);
}

.markdown-negative .markdown-signature-header .icon {
	filter: brightness(0) saturate(100%) invert(15%) sepia(73%) saturate(3607%) hue-rotate(347deg) brightness(89%) contrast(88%);
	transition: filter 0.3s ease;
}

.markdown-info .markdown-signature-header .icon {
	filter: brightness(0) saturate(100%) invert(19%) sepia(95%) saturate(2733%) hue-rotate(224deg) brightness(91%) contrast(95%);
	transition: filter 0.3s ease;
}

/* Signature Block Icons - Dark Mode */
:root.dark-mode .markdown-positive .markdown-signature-header .icon {
	filter: brightness(0) saturate(100%) invert(79%) sepia(23%) saturate(864%) hue-rotate(88deg) brightness(96%) contrast(89%);
	transition: filter 0.3s ease;
}

:root.dark-mode .markdown-warning .markdown-signature-header .icon {
	filter: brightness(0) saturate(100%) invert(80%) sepia(47%) saturate(565%) hue-rotate(360deg) brightness(102%) contrast(98%);
}

:root.dark-mode .markdown-negative .markdown-signature-header .icon {
	filter: brightness(0) saturate(100%) invert(84%) sepia(17%) saturate(1078%) hue-rotate(308deg) brightness(102%) contrast(98%);
	transition: filter 0.3s ease;
}

:root.dark-mode .markdown-info .markdown-signature-header .icon {
	filter: brightness(0) saturate(100%) invert(75%) sepia(26%) saturate(741%) hue-rotate(188deg) brightness(101%) contrast(98%);
	transition: filter 0.3s ease;
}

/* Signature Block Heading Styles */
.markdown-positive-heading {
	background-color: rgba(34, 197, 94, 0.2);
	margin: -0.5rem -0.75rem 0.25rem -0.75rem;
	padding: 0.5rem 0.75rem;
	font-weight: 600;
	font-size: 1.1em;
	color: inherit;
	border-radius: 3px 3px 0 0;
}

.markdown-positive-body {
	margin: 0;
	font-weight: 400;
	opacity: 0.9;
}

.markdown-warning-heading {
	background-color: rgba(245, 158, 11, 0.2);
	margin: -0.5rem -0.75rem 0.25rem -0.75rem;
	padding: 0.5rem 0.75rem;
	font-weight: 600;
	font-size: 1.1em;
	color: inherit;
	border-radius: 3px 3px 0 0;
}

.markdown-warning-body {
	margin: 0;
	font-weight: 400;
	opacity: 0.9;
}

.markdown-negative-heading {
	background-color: rgba(239, 68, 68, 0.2);
	margin: -0.5rem -0.75rem 0.25rem -0.75rem;
	padding: 0.5rem 0.75rem;
	font-weight: 600;
	font-size: 1.1em;
	color: inherit;
	border-radius: 3px 3px 0 0;
}

.markdown-negative-body {
	margin: 0;
	font-weight: 400;
	opacity: 0.9;
}

.markdown-info-heading {
	background-color: rgba(59, 130, 246, 0.2);
	margin: -0.5rem -0.75rem 0.25rem -0.75rem;
	padding: 0.5rem 0.75rem;
	font-weight: 600;
	font-size: 1.1em;
	color: inherit;
	border-radius: 3px 3px 0 0;
}

.markdown-info-body {
	margin: 0;
	font-weight: 400;
	opacity: 0.9;
}

/* Images */
.markdown-image {
	max-width: 100%;
	height: auto;
	border-radius: 5px;
	margin: 0.5rem 0;
}

/* Main Table Container */
.markdown-table {
	border-collapse: separate;
	border-spacing: 0;
	/* allow table to be wider than viewport but scroll inside */
	display: block;
	width: 100%;
	margin: 1rem 0;
	font-family: "league-spartan", Arial, sans-serif;
	border: 1px solid var(--md-table-border);
	border-radius: 5px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Table Header Cells */
.markdown-table-header {
	background-color: var(--md-table-header-bg);
	color: var(--md-table-header-color);
	padding: 0.5rem 0.75rem;
	text-align: left;
	font-weight: 700;
	border: 1px solid var(--md-table-border);
	border-top: none;
	border-left: none;
	white-space: nowrap;
}

.markdown-table-header:last-child {
	border-right: none;
}

/* Table Data Cells */
.markdown-table-cell {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--md-table-border);
	border-top: none;
	border-left: none;
	background-color: var(--md-table-cell-bg);
	white-space: nowrap;
}

.markdown-table-cell:last-child {
	border-right: none;
}

/* Table Row Styling */
.markdown-table-row:last-child .markdown-table-cell {
	border-bottom: none;
}

.markdown-table-row:nth-child(even) .markdown-table-cell {
	background-color: var(--md-table-row-even-bg);
}

.markdown-table-row:hover .markdown-table-cell {
	background-color: var(--md-table-row-hover-bg);
	transition: background-color 0.2s ease-in-out;
}

/* Desktop Table Styling */
@media (min-width: 769px) {
	.markdown-table {
		display: table;
		width: auto;
		border-collapse: separate;
		border-spacing: 0;
		border: 1px solid var(--md-table-border);
		border-radius: 5px;
		overflow: hidden;
		margin: 1rem 0;
		background-clip: padding-box;
	}

	.markdown-table-header,
	.markdown-table-cell {
		border: none;
		white-space: normal;
		padding: 0.5rem 0.75rem;
	}

	.markdown-table-header {
		background-color: var(--md-table-header-bg);
		color: var(--md-table-header-color);
		font-weight: 700;
	}

	.markdown-table-cell {
		background-color: var(--md-table-cell-bg);
	}

	.markdown-table-row .markdown-table-cell:not(:last-child) {
		border-right: 1px solid var(--md-table-border);
	}

	.markdown-table-row:not(:last-child) .markdown-table-cell {
		border-bottom: 1px solid var(--md-table-border);
	}
}

/* Button Container Box */
.markdown-button-container {
	padding: 1rem;
	border: solid 2px var(--md-button-container);
	width: fit-content;
	border-radius: 5px;
	transition: ease-in-out 0.2s;
}

.markdown-button-container:hover {
	border: solid 2px var(--md-button-container-hover);
}

/* Button Container Heading */
.markdown-button-heading {
	font-weight: 600;
	font-size: larger;
}

/* Navigation End Container */
.markdown-end-container {
	display: flex;
	width: 100%;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
}

.markdown-end-previous,
.markdown-end-next {
	padding: 0.7rem;
	border: solid 1px var(--md-button-container);
	width: 100%;
	text-align: left;
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 0.3rem;
	transition: all 0.2s ease;
}

.markdown-end-content-p {
	display: flex;
	align-items: end;
	flex-direction: column;
	gap: 0.3rem;
}

.markdown-end-content-n {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.markdown-end-icon {
	width: 20px;
	height: 20px;
	opacity: 0.6;
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		filter 0.3s ease;
	flex-shrink: 0;
}

.markdown-end-icon-previous {
	width: 20px;
	height: 20px;
	opacity: 0.6;
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		filter 0.3s ease;
	flex-shrink: 0;
	transform: rotate(180deg);
}

:root.dark-mode .markdown-end-icon,
:root.dark-mode .markdown-end-icon-previous {
	filter: brightness(0) saturate(100%) invert(100%);
}

.markdown-end-next:hover .markdown-end-icon {
	opacity: 1;
	transform: translateX(3px);
}

.markdown-end-next:hover .markdown-end-icon-previous {
	opacity: 1;
	transform: rotate(180deg) translateX(3px);
}

.markdown-end-previous:hover,
.markdown-end-next:hover {
	border-color: var(--md-button-container-hover);
}

.markdown-end-previous:hover .markdown-end-title,
.markdown-end-next:hover .markdown-end-title {
	color: var(--primary);
}

.markdown-end-previous {
	align-self: flex-start;
}

.markdown-end-next {
	align-self: flex-end;
}

.markdown-end-label {
	font-size: 0.85rem;
	margin: 0;
	padding: 0;
	opacity: 0.7;
	font-weight: 500;
}

.markdown-end-title {
	font-size: 1.1rem;
	margin: 0;
	font-weight: 600;
	transition: color 0.2s ease;
}

/* Calculation Display */
.markdown-calculation {
	padding: 1rem;
	font-family: "Courier New", Courier, monospace;
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease;
}

/* Main Formatted Code Container */
.markdown-formatted-code {
	font-family: monospace;
	background-color: var(--md-code-bg-color);
	border: 1px solid var(--md-code-block-border);
	border-radius: 5px;
	text-align: left;
	padding: 0.5rem;
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		color 0.3s ease;
	overflow: visible;
}

/* Formatted Code Header */
.markdown-formatted-code-header {
	width: 100%;
	padding: 0.3em 0.7em 0.3em 0.7em;
	margin: 0;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	overflow: visible;
}

/* Code Language Label */
.code-lang {
	font-family: "league-spartan";
	user-select: none;
	align-self: start;
	color: var(--md-greyed-out);
	font-size: 1.1em;
	font-weight: 400;
	margin: 0;
	padding: 0;
}

/* Formatted Code Content Container */
.markdown-formatted-code-content {
	display: flex;
	flex-direction: row;
	align-self: flex-start;
	gap: 0.5rem;
	margin: 0;
	overflow-x: auto;
}

/* Code Line Numbers */
.markdown-formatted-code-line-numbers {
	min-width: 1.5em;
	text-align: right;
	color: #888;
	user-select: none;
	font-family: monospace;
	padding-right: 0.5em;
	line-height: normal;
}

/* Code Lines */
.markdown-formatted-code-content-lines {
	flex: 1;
	white-space: pre-wrap;
	font-family: monospace;
	line-height: normal;
}

.markdown-formatted-code-content-lines p {
	margin: 0;
	padding: 0;
}

/* Copy Button */
.code-copy-button {
	background-color: var(--button-bg);
	color: var(--button-text);
	border: 1px solid var(--border-color);
	padding: 0.3rem 0.6rem;
	border-radius: 4px;
	cursor: pointer;
	font-family: "league-spartan", sans-serif;
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		transform 0.1s ease,
		border-color 0.25s ease;
	align-self: flex-end;
	margin-right: 1rem;
}

.code-copy-button:hover {
	background-color: var(--hover-bg);
}

.code-copy-button:active {
	transform: scale(0.95);
}

/* Copy Button Icon */
.code-copy-button .icon {
	width: 14px;
	height: 14px;
}

/* Make copy SVG adapt to theme by using CSS filters (svg file is an external <img>) */
.code-copy-button .icon {
	transition: filter 0.25s ease;
	/* default: show as provided (dark path on light backgrounds) */
	filter: none;
}

:root.dark-mode .code-copy-button .icon {
	/* invert the icon for dark backgrounds (black -> white) */
	filter: invert(1) brightness(1.1) contrast(1);
}

/* Copy Button Text */
.code-copy-text {
	line-height: 1;
}

/* Default Code Text */
.markdown-code-text {
	color: var(--md-cb-text);
}

/* Comments */
.markdown-code-comment {
	color: var(--md-cb-comment);
}

/* Numbers & Numeric Literals */
.markdown-code-number {
	color: var(--md-cb-number);
}

/* Keywords */
.markdown-code-keyword {
	color: var(--md-cb-keyword);
}

/* Hash Symbols & Special Characters */
.markdown-code-hash {
	color: var(--md-cb-hash);
}

/* Question Marks & Other Operators */
.markdown-code-qmark {
	color: var(--md-cb-qmark);
}

/* Round Brackets/Parentheses */
.markdown-code-brackets {
	color: var(--md-cb-brc);
}

/* Curly Brackets/Braces */
.markdown-code-curly-brackets {
	color: var(--md-cb-cbrc);
}

/* Square Brackets */
.markdown-code-square-brackets {
	color: var(--md-cb-sbrc);
}

/* Dots/Periods */
.markdown-code-dot {
	color: var(--md-cb-dot);
}

/* Objects & Class Names */
.markdown-code-object {
	color: var(--md-cb-object);
}

/* Properties & Attributes */
.markdown-code-property {
	color: var(--md-cb-property);
}

/* Smooth transitions for markdown components on theme change */
.markdown-table,
.markdown-table-header,
.markdown-table-cell,
.markdown-button-container,
.markdown-positive,
.markdown-warning,
.markdown-negative,
.markdown-info,
.markdown-formatted-code,
.markdown-code-block,
.code-copy-button {
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		border-color 0.25s ease;
}

/* Dark Mode Button & Container Styling */
:root.dark-mode .markdown-button-container,
:root.dark-mode .code-copy-button {
	background: var(--bg-color);
	border: 1px solid var(--end-border-color);
	color: var(--button-text);
}

/* === Sources Block === */
.markdown-sources {
	background-color: var(--border-color);
	padding: 0;
	border-radius: 20px;
	font-family: "league-spartan", Arial, sans-serif;
	overflow: hidden;
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		height 0.3s ease;
	width: fit-content;
	height: 40px;
}

.markdown-sources.expanded {
	height: auto;
	background-color: var(--border-color);
}

.markdown-sources-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0.5rem 0.75rem;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.2s ease;
}

.markdown-sources-header:hover {
	background-color: var(--border-color);
	filter: brightness(0.95);
}

.markdown-sources-count {
	font-weight: 500;
	color: var(--md-greyed-out);
}

.markdown-sources-label {
	font-weight: 500;
	color: var(--text-color);
	align-self: flex-start;
	flex: 1;
}

.markdown-sources-list {
	max-height: 0;
	overflow: hidden;
	transition:
		max-height 0.3s ease,
		padding 0.3s ease;
	background-color: var(--button-bg);
}

.markdown-sources.expanded .markdown-sources-list {
	max-height: 500px;
	padding: 0.5rem 0;
}

.markdown-sources-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0.4rem 0.75rem 0.4rem 1rem;
	color: var(--text-color);
	text-decoration: none;
}

.markdown-sources-item-number {
	font-weight: 600;
	min-width: 1.5em;
	color: var(--md-greyed-out);
}

.markdown-sources-item-text {
	flex: 1;
	transition: 1s ease;
}

.markdown-sources-item-text:hover {
	text-decoration: underline;
}

.markdown-page-link {
	color: var(--primary);
	text-decoration: underline;
	cursor: pointer;
}

.markdown-page-link:hover {
	color: var(--primary-08);
}