/* ============================================================================
 * Default theme: neutral, flat and restrained long-form reading.
 * ============================================================================ */

.md-content {
	--md-text: #242424;
	--md-text-soft: var(--md-text);
	--md-muted: #666666;
	--md-faint: #7a7a7a;
	--md-disabled: #9a9a9a;
	--md-text-title: #0b0b0b;
	--md-text-heading: #141414;
	--md-link: #339cfd;
	--md-link-hover-bg: #ededeb;
	--md-inline-code-bg: #eaeaea;
	--md-inline-code-text: var(--md-text);
	--md-table-header-bg: #eaeaea;
	--md-table-body-bg: #f5f5f5;
	--md-table-border: #ececea;
	--md-table-header-text: var(--md-text);
	--md-quote-line: #f5f5f5;
	--md-details-bg: #f5f5f5;
	--md-details-summary: var(--md-text);
	--md-accent: #181818;
	--md-radius-sm: 6px;
	--md-radius-md: 10px;
	--md-radius-lg: 18px;
	--md-line-height: 1.84;
}

.md-content::selection,
.md-content *::selection {
	background: #e4e4df;
	color: var(--md-text-title);
}

/* ============================================================================
 * Typography
 * ============================================================================ */

.md-content :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 740;
	line-height: 1.24;
}

.md-content h2 {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 48px 0 18px;
	padding-left: 0;
}

.md-content h2::before {
	width: 4px;
	height: 0.88em;
	flex: 0 0 4px;
	border-radius: 999px;
	background: var(--md-accent);
	content: '';
}

.md-content h3 {
	margin: 34px 0 14px;
}

.md-content h5 {
	color: var(--md-text-soft);
}

.md-content h6 {
	color: var(--md-muted);
}

.md-content a:not(:has(> img, > svg)) {
	font-weight: 620;
}

.md-content a:not(:has(> img, > svg))::before {
	margin-right: 4px;
	vertical-align: -3px;
	background-image: url('./assets/icon_link.svg');
}

.md-content strong {
	font-weight: 750;
}

.md-content s {
	color: var(--md-disabled);
	text-decoration-color: #777770;
	text-decoration-thickness: 1.5px;
}

.md-content hr {
	margin: 38px 0;
}

.md-content mark {
	padding: 0.08em 0.32em 0.12em;
	border-radius: 0.36em;
	background: #e9e7df;
	color: var(--md-text);
}

.md-content kbd {
	border: 1px solid #ececea;
	border-radius: var(--md-radius-sm);
	background: transparent;
	color: var(--md-text);
}

/* ============================================================================
 * Lists and Quote
 * ============================================================================ */

.md-content ul > li::marker {
	color: var(--md-accent);
	font-size: 0.86em;
}

.md-content ol > li::marker {
	color: var(--md-accent);
	font-weight: 720;
}

.md-content .task-list-item {
	padding-left: 2em;
}

.md-content .task-list-item-checkbox {
	top: 0.54em;
	width: 1.08em;
	height: 1.08em;
	border-radius: 4px;
	accent-color: #333330;
}

.md-content blockquote {
	margin: 24px 0;
	padding: 0 0 0 16px;
	border-left: 4px solid var(--md-quote-line);
	border-radius: 0;
	background: transparent;
	color: var(--md-text);
}

/* ============================================================================
 * Callouts
 * ============================================================================ */

.md-content .markdown-alert {
	--md-callout-accent: #339cfd;
	--md-callout-accent-rgb: 51 156 253;
	--md-callout-title-color: #ffffff;
	position: relative;
	margin: 36px 0 32px;
	padding: 20px;
	border: 1px solid var(--md-callout-accent);
	background: rgb(var(--md-callout-accent-rgb) / 10%);
}

.md-content .markdown-alert .markdown-alert-title {
	position: absolute;
	top: -10px;
	left: 20px;
	height: 26px;
	min-height: 26px;
	gap: 4px;
	margin: 0;
	padding: 5px 8px;
	border-radius: 100px;
	background: var(--md-callout-accent);
	color: var(--md-callout-title-color);
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
}

.md-content .markdown-alert .markdown-alert-title::before {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}

.md-content .markdown-alert > :not(.markdown-alert-title) {
	color: var(--md-text);
	font-size: 14px;
}

.md-content .markdown-alert-note {
	--md-callout-accent: #339cfd;
	--md-callout-accent-rgb: 51 156 253;
}

.md-content .markdown-alert-tip {
	--md-callout-accent: #77d7ad;
	--md-callout-accent-rgb: 119 215 173;
}

.md-content .markdown-alert-warning {
	--md-callout-accent: #f58173;
	--md-callout-accent-rgb: 245 129 115;
}

.md-content .markdown-alert-important {
	--md-callout-accent: #f8de5b;
	--md-callout-accent-rgb: 248 222 91;
}

.md-content .markdown-alert-note .markdown-alert-title::before {
	background-image: url('./assets/icon_note.svg');
}

.md-content .markdown-alert-tip .markdown-alert-title::before {
	background-image: url('./assets/icon_tip.svg');
}

.md-content .markdown-alert-warning .markdown-alert-title::before {
	background-image: url('./assets/icon_warning.svg');
}

.md-content .markdown-alert-important .markdown-alert-title::before {
	background-image: url('./assets/icon_important.svg');
}

.md-content summary::before {
	background-image: url('./assets/icon_details_plus.svg');
}

.md-content details[open] summary::before {
	background-image: url('./assets/icon_details_minus.svg');
}

/* ============================================================================
 * Tables, Math and Media
 * ============================================================================ */

.md-content .katex-block {
	margin: 26px 0;
}

.md-content .md-table-wrap {
	margin: 26px 0;
	background: var(--md-table-body-bg);
}

.md-content table {
	color: var(--md-text);
}

.md-content th,
.md-content td {
	border-bottom: 1px solid var(--md-table-border);
}

.md-content th {
	background: var(--md-table-header-bg);
	color: var(--md-table-header-text);
	font-weight: 760;
}

.md-content tbody td,
.md-content tbody tr:nth-child(even) td {
	background: var(--md-table-body-bg);
}

.md-content > svg,
.md-content figure > svg {
	width: 100%;
	overflow: auto;
	border: 1px solid var(--md-media-border);
	border-radius: var(--md-media-radius);
	background: var(--md-media-bg);
}

.md-content .mermaid {
	color: var(--md-text);
	font-size: 13px;
	line-height: 1.66;
}

.md-content pre.mermaid {
	border: 1px solid var(--md-media-border);
	border-radius: var(--md-media-radius);
	background: var(--md-media-bg);
}

.md-content iframe {
	border: 1px solid var(--md-media-border) !important;
	border-radius: var(--md-media-radius) !important;
	background: var(--md-media-bg);
}

/* ============================================================================
 * Details and Images
 * ============================================================================ */

.md-content details {
	background: var(--md-details-bg);
}

.md-content summary {
	color: var(--md-details-summary);
	font-weight: 720;
}

.md-content img {
	border-radius: var(--md-radius-md);
}