@import "/static/style/base.css";
@import "/static/style/keyframes.css";

@media print {

	:root {
		color-scheme: light;
	}

	footer,
	nav,
	.sidebar,
	.tags {
		display: none !important;
	}

	#noxz-body {
		grid-template: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;

		&>.center {
			min-width: unset !important;
			max-width: calc(100% - 4rem) !important;
			width: calc(100% - 4rem) !important;
			margin: 0 2rem !important;
			padding: 0 !important;
			display: block !important;

			hr {
				box-sizing: border-box;
			}
		}
	}
}

html {
	scroll-behavior: smooth;
	padding: 0;
	margin: 0;
}

body {
	box-sizing: border-box;
	background-color: var(--light);
	font-family: var(--bodyFont);
	color: var(--darkgray);
	margin: 0;
	transition: background .2s;
}

tbody,
li,
p {
	line-height: 1.6rem;
}

article table {
	border-collapse: collapse;
	margin: 1rem 0;
	padding: 1.5rem;

	>* {
		line-height: 2rem;
	}

	tr {
		border-bottom: 1px solid var(--lightgray);

		&:last-child {
			border-bottom: none;
		}

		th {
			text-align: left;
			border-bottom: 2px solid var(--gray);
			padding: .4rem .7rem;
		}

		td {
			padding: .2rem .7rem;
			vertical-align: top;
		}
	}
}

.page {
	max-width: 1500px;
	margin: 0 auto;
}

p,
ul,
text,
a,
tr,
td,
li,
ol,
ul,
.katex,
.math {
	color: var(--darkgray);
	fill: var(--darkgray);
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6,
thead {
	scroll-margin-top: 2rem;
	font-family: var(--headerFont);
	color: var(--dark);
	font-weight: revert;
	margin-bottom: 0;
}

h1 {
	margin-top: 2.25rem;
	margin-bottom: 1rem;
	font-size: 1.75rem;
}

h2 {
	margin-top: 1.9rem;
	margin-bottom: 1rem;
	font-size: 1.4rem;
}

h3 {
	margin-top: 1.62rem;
	margin-bottom: 1rem;
	font-size: 1.12rem;
}

h4,
h5,
h6 {
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	font-size: 1rem;
}

a,
a * {
	color: var(--secondary);
	text-decoration: none;
	transition: color .2s;
}

a.internal {
	background-color: var(--highlight);
	border-radius: 5px;
	padding: 0 .1rem;
	line-height: 1.4rem;
	text-decoration: none;
}

a.internal.anchor {
	background-color: var(--anchorHighlight);
}

a.external.text-link {
	text-decoration: underline;
	text-decoration-style: dotted;
}

a.external.text-link::after {
	content: '';
	display: inline-block;
	width: .65rem;
	height: .65rem;
	margin-left: .25rem;
	vertical-align: center;
	background-color: var(--secondary);

	-webkit-mask-image: url("/static/icons/bi/box-arrow-up-right.svg");
	mask-image: url("/static/icons/bi/box-arrow-up-right.svg");

	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

a:hover,
a:hover * {
	color: var(--tertiary);
}

div:has(> .overflow) {
	max-height: 100%;
	overflow-y: hidden;
}

.page>#noxz-body {
	grid-template:
		"grid-sidebar-left grid-header grid-sidebar-right"
		"grid-sidebar-left grid-center grid-sidebar-right"
		"grid-sidebar-left grid-footer grid-sidebar-right" / 320px auto 320px;
	gap: 5px;
	display: grid;
}

.page>#noxz-body .sidebar {
	box-sizing: border-box;
	gap: 2rem;
	height: 100vh;
	padding: 2rem;
	display: flex;
	position: sticky;
	top: 0;
}

.page>#noxz-body .sidebar.left {
	z-index: 1;
	flex-direction: column;
	grid-area: grid-sidebar-left;
}

.page>#noxz-body .sidebar.right {
	flex-direction: column;
	grid-area: grid-sidebar-right;
	margin-right: 0;
}

.page>#noxz-body .center,
.page>#noxz-body footer {
	min-width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 801px) {

	.page>#noxz-body .center>*,
	.page>#noxz-body footer>* {
		padding-left: 2rem;
	}
}

/* small display */
@media (min-width: 800px) and (max-width: 1200px) {
	.page>#noxz-body {
		grid-template:
			"grid-sidebar-left grid-header"
			"grid-sidebar-left grid-center"
			"grid-sidebar-left grid-sidebar-right"
			"grid-sidebar-left grid-footer" / 320px auto;
		gap: 5px;

		.sidebar.right {
			position: initial;
			height: unset;
			flex-direction: row;
			width: 100%;
			padding: 0;
		}

		.desktop-only {
			display: none;
		}
	}
}

/* mobile */
@media (max-width: 800px) {
	.page>#noxz-body {
		grid-template:
			"grid-sidebar-left"
			"grid-header"
			"grid-center"
			"grid-sidebar-right"
			"grid-footer" / auto;
		gap: 5px;
	}
}

/* page title */
.page-title {
	font-family: var(--logoFont);
	margin: 0;
	line-height: 2.75rem;
}

.page-title a {
	color: var(--dark);
	font-weight: 400;
}

.page-title a::before {
	content: '';
	display: inline-block;
	width: 2rem;
	height: 2rem;
	margin-right: 1rem;
	flex-shrink: 0;
	background-color: var(--black);
	-webkit-mask-image: url("/static/logo.svg");
	mask-image: url("/static/logo.svg");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	vertical-align: middle;
}

.page-title a:hover {
	color: var(--tertiary);
}

/* page flex component  */
.flex-component {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 1rem;
}

.flex-component>div {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	order: 0;
	align-self: center;
}

.flex-component>.flex-grow {
	flex-grow: 1;
}

.flex-component button {
	cursor: pointer;
	width: 22px;
	height: 22px;
	text-align: inherit;
	background: 0 0;
	border: none;
	box-sizing: content-box !important;
	padding: .25rem;
	margin: 0;
	position: relative;
}

.flex-component .flex-shrink button::before,
.flex-component .search-button::after {
	content: '';
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-right: 1rem;
	background-color: var(--dark);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	vertical-align: middle;
}

/* search */
.search {
	.search-button {
		background-color: color-mix(in srgb, var(--lightgray)60%, var(--light)) !important;
		color: var(--darkgray);
		width: calc(100% - .75rem) !important;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		border-radius: .25rem;
		gap: 1rem;

		&::before {
			content: "Search";
			font-family: var(--uiFont);
			font-size: 1rem;
			flex-grow: 1;
			flex-shrink: 1;
			flex-basis: auto;
			align-self: center;
			margin-left: .5rem !important;
		}

		&::after {
			width: 16px !important;
			height: 16px !important;
			margin-right: .5rem !important;
			flex-grow: 0;
			flex-shrink: 1;
			flex-basis: auto;
			align-self: center;
			-webkit-mask-image: url("/static/icons/bi/search.svg");
			mask-image: url("/static/icons/bi/search.svg");
		}
	}

	>.search-modal {
		contain: layout;
		z-index: 999;
		-webkit-backdrop-filter: blur(.25rem);
		backdrop-filter: blur(.25rem);
		width: 100vw;
		height: 100vh;
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		overflow-y: auto;

		&.active {
			display: inline-block;
		}

		.search-container {
			width: 65%;
			margin-top: 12vh;
			margin-left: auto;
			margin-right: auto;

			input {
				box-sizing: border-box;
				color: var(--dark);
				border: 1px solid var(--lightgray);
				outline: none;
				padding: .5em 1em;
				font-family: var(--uiFont);
				font-size: 1.05em;
			}

			&>.search-layout {
				border: 1px solid var(--lightgray);
				box-sizing: border-box;
				flex-direction: row;
				flex: 0 0 100%;
				display: none;

				mark {
					background: var(--textHighlight);
					color: inherit;
					border-radius: 2px;
				}

				&.display-results {
					display: flex;
				}

				&>div {
					height: 63vh;
				}

				&>div:first-child {
					border-right: 1px solid var(--lightgray);
					border-top-right-radius: unset;
					border-bottom-right-radius: unset;
				}

				.results-container {
					overflow-y: auto;
					flex: 0 0 min(30%, 450px);
					box-shadow: inset -.2em 0 .2em #88888812;

					.result-card {
						cursor: pointer;
						border-bottom: 1px solid var(--lightgray);
						box-sizing: border-box;
						text-transform: none;
						text-align: left;
						width: 100%;
						font-family: var(--uiFont);
						font-size: 100%;
						line-height: 1.15;
						font-weight: inherit;
						outline: none;
						margin: 0;
						padding: 1em;
						transition: background .2s;
						display: block;
						overflow: hidden;

						h3,
						p {
							margin: 0;
							line-height: 1.5rem;
						}

						&.focus {
							background: var(--lightgray);
						}

						&:hover {
							background: var(--textHighlight);
						}

						&.no-match {
							background: unset;
							cursor: default;
						}
					}
				}

				.preview-container {
					color: var(--dark);
					flex-grow: 1;
					padding: 0 2rem;
					font-family: inherit;
					font-weight: 400;
					display: block;
					overflow: hidden auto;

					.preview-inner {
						width: min(800px, 100%);
						margin: 0 auto;

						.toc-counter,
						.breadcrumb-container {
							display: none !important;
						}
					}
				}

			}

			&>* {
				background: var(--light);
				border-radius: 7px;
				width: 100%;
				margin-bottom: 2em;
				box-shadow: 0 14px 50px #1b21301f, 0 10px 30px #1b213029;
			}
		}
	}
}

/* darkmode */
.darkmode::before {
	-webkit-mask-image: url("/static/icons/bi/sun.svg");
	mask-image: url("/static/icons/bi/sun.svg");
}

[saved-theme="dark"] .darkmode::before {
	-webkit-mask-image: url("/static/icons/bi/moon-fill.svg");
	mask-image: url("/static/icons/bi/moon-fill.svg");
}

/* readermode */
.readermode::before {
	-webkit-mask-image: url("/static/icons/bi/newspaper.svg");
	mask-image: url("/static/icons/bi/newspaper.svg");
}

/* page header */
.page .page-header {
	grid-area: grid-header;
	margin: 2rem 0 0;
}

/* horizontal ruler */
hr {
	background-color: var(--lightgray);
	border: none;
	border-bottom: 1px solid var(--white);
	width: 100%;
	height: 1px;
	margin: 2rem auto;
}

/* page footer */
.page .page-footer {
	margin-top: 1rem;
}

/* footer */
footer {
	grid-area: grid-footer;
	text-align: left;
	opacity: .7;
	margin-bottom: 3rem;
}


/* breadcrumb */
.breadcrumb-container {
	font-family: var(--uiFont);
	display: flex;
	align-items: center;
	gap: .2rem;

	margin: .75rem 0 0;
	padding: 0;

	flex-wrap: nowrap;
	overflow: hidden;
	min-width: 0;

	.breadcrumb-element {
		padding-left: 0;
		position: relative;

		display: flex;
		align-items: center;

		min-width: 0;

		/* keep earlier breadcrumbs intact */
		&:not(:last-child) {
			flex-shrink: 0;
		}

		/* only last breadcrumb shrinks */
		&:last-child {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			flex-shrink: 1;
		}

		/* if last item contains a span */
		&:last-child span {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			display: block;
		}

		&+.breadcrumb-element::before {
			content: '';
			display: inline-block;
			width: 1rem;
			height: 1rem;
			margin-right: .2rem;
			flex-shrink: 0;

			background-color: var(--dark);

			-webkit-mask-image: var(--chevron-mask);
			mask-image: var(--chevron-mask);

			-webkit-mask-size: contain;
			mask-size: contain;

			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;

			-webkit-mask-position: center;
			mask-position: center;
		}
	}
}


/* article title */
.article-title {
	-webkit-hyphens: auto;
	hyphens: auto;
	border-bottom: 1px solid var(--gray);
	margin: 2rem 0 .5rem;
	padding: 0 0 1rem;
	font-family: var(--titleFont);
	font-weight: 200;
}

/* article header */
.content-meta {
	font-family: var(--uiFont);
	color: var(--darkgray);
	margin-top: 0;
}

.content-meta>time,
.content-meta>span {
	vertical-align: middle;
	align-items: center;
	height: 1.6em;
	margin-right: 1.2rem;
	display: inline-flex;
}

.content-meta>time::before,
.content-meta>span::before {
	content: "";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	vertical-align: middle;
	background-color: var(--dark);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-right: .5rem;
}

.content-meta>time::before {
	-webkit-mask-image: url("/static/icons/bi/calendar3.svg");
	mask-image: url("/static/icons/bi/calendar3.svg");
}

.content-meta>span::before {
	-webkit-mask-image: url("/static/icons/bi/book.svg");
	mask-image: url("/static/icons/bi/book.svg");
}

.content-meta>span.visit-counter::before {
	-webkit-mask-image: url("/static/icons/bi/eye.svg");
	mask-image: url("/static/icons/bi/eye.svg");
}

/* tags */
.tags {
	font-family: var(--uiFont);
	flex-wrap: wrap;
	gap: .4rem;
	margin: 1rem 0;
	padding-left: 0;
	list-style: none;
	display: flex;
}

.tags>li {
	white-space: nowrap;
	overflow-wrap: normal;
	margin: 0;
	display: inline-block;
}

a.internal.tag-link {
	background-color: var(--highlight);
	border-radius: 8px;
	margin: 0 .1rem;
	padding: .2rem .4rem;
}

/* tag list */
.tag-list {
	font-family: var(--uiFont);
	flex-wrap: wrap;
	gap: .5rem;
	padding: 0;
	list-style: none;
	display: flex;
}

.tag-list li a span {
	color: var(--light);
	white-space: nowrap;
	background: var(--dark);
	border-radius: .25rem;
	margin-left: .25em;
	padding: .15em .25em;
	font-size: .9rem;
}

/* article listings */
.year-group {
	font-family: var(--uiFont);
	margin-bottom: 2rem;
}

.year-group>h2 {
	margin-bottom: 1rem;
	font-size: 1.4rem;
	font-weight: 200;
}

ul.section-ul {
	margin-top: .5em;
	padding-left: 0;
	list-style: none;
}

li.section-li {
	margin-bottom: 1em;
}

li.section-li>.section {
	grid-template-columns: fit-content(8em) 3fr;
	display: grid;
}

li.section-li h3>a {
	font-family: var(--uiFont);
	font-weight: 200;
	background: none;
}

li.section-li>.section .meta {
	opacity: .6;
	margin: 0 1em 0 0;
}

.meta time {
	min-width: 3rem;
	display: inline-block;
}

.section h3 {
	margin: 0;
}

/* article heading */
body:not([data-course]) article h2.first-heading {
	visibility: hidden;
	height: 0;
	margin: 0;
	padding: 0;
	display: block;
}

article h2,
article h3 {
	position: relative;
}

article h2,
article h3,
article h4,
article h5,
article h6 {
	a.internal.anchor {
		background-color: transparent;
	}

	a.internal.anchor::before {
		content: '';
		display: inline-block;
		width: 1.2rem;
		height: 1.2rem;
		flex-shrink: 0;
		vertical-align: middle;
		background-color: var(--dark);
		-webkit-mask-image: url("/static/icons/bi/link-45deg.svg");
		mask-image: url("/static/icons/bi/link-45deg.svg");
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		opacity: 0;
		transition: opacity .2s;
	}

	&:hover a.internal.anchor::before {
		opacity: 1;
	}
}

@media (min-width: 801px) {
	.toc-counter {
		opacity: .5;
		margin-right: 1.2em;
		font-family: var(--uiFont);
		font-size: .8rem;
		font-weight: 700;
		display: inline !important;
		position: absolute;
		top: 50%;
		right: 100%;
		transform: translateY(-50%);
	}

	.toc-counter::before {
		content: "§";
		margin-right: .2em;
	}
}

.toc-counter {
	display: none;
}


/* explorer */
.explorer-ul.overflow,
.course-explorer.overflow,
.toc-content.overflow {
	-webkit-mask-image: linear-gradient(#000 calc(100% - 50px), #0000 100%);
	mask-image: linear-gradient(#000 calc(100% - 50px), #0000 100%);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	max-height: calc(100vh - 200px);
	content: "";
	clear: both;
	width: 100%;
	margin-bottom: 0;
	padding-bottom: 3rem !important;
	overflow: hidden;
	overflow-y: auto;
}

.explorer {
	font-family: var(--headerFont);
	font-size: .9rem;
	color: var(--dark);
	max-width: 320px;

	.explorer-content {
		.explorer-ul {
			list-style: none;
			margin: 0;
			padding: 0;

			&>.folder {
				margin: 0;

				.folder-summary {
					display: flex;
					align-items: center;
					cursor: pointer;
					user-select: none;
					list-style: none;
					font-weight: 500;
					color: var(--secondary);
					transition: background 0.18s;
					gap: 6px;

					&::-webkit-details-marker {
						display: none
					}

					&::before {
						content: '';
						display: inline-block;
						width: 1rem;
						height: 1rem;
						flex-shrink: 0;
						background-color: var(--secondary);
						-webkit-mask-image: var(--chevron-mask);
						mask-image: var(--chevron-mask);
						-webkit-mask-size: contain;
						mask-size: contain;
						-webkit-mask-repeat: no-repeat;
						mask-repeat: no-repeat;
						-webkit-mask-position: center;
						mask-position: center;
						transition: transform 0.18s;
					}

					&:hover::before {
						background-color: var(--tertiary);
					}

					details[open]>&::before {
						transform: rotate(90deg)
					}

					.folder-link {
						text-decoration: none;
						color: inherit;
						font-weight: 600;
						flex: 1;
						overflow: hidden;
						text-wrap: nowrap;
						text-overflow: ellipsis;
						pointer-events: auto;
						width: 100%;
						display: inline-block;

						&:hover {
							color: var(--tertiary);
						}
					}

					.badge {
						font-size: 80%;
						padding: 0 .4rem;
						border-radius: .2rem;
						background: var(--secondary);
						color: var(--light);
						margin-left: auto;
						flex-shrink: 0;
						line-height: 1.4rem;
					}
				}

				&:has(.folder-content:empty) .folder-summary::before {
					background-color: transparent;
				}

				.folder-content {
					list-style: none;
					padding: 0;
					margin: 0;

					li {
						border-left: 1px solid var(--lightgray);
						margin-left: .5rem;
						padding: .1rem 0 .1rem .8rem;
						transition: border-color .2s;


						&.file {
							.file-link {
								color: var(--darkgray);
								font-weight: 400;
								text-decoration: none;
								transition: background 0.1s, color 0.1s;

								&.file-link:hover {
									color: var(--secondary)
								}
							}

							&.current {
								border-color: var(--dark);

								.file-link {
									color: var(--tertiary);
								}
							}
						}
					}

					.folder .folder-content .file .folder-link {
						padding-left: 50px
					}
				}
			}
		}

		.course-explorer {
			list-style: none;
			margin: 0;
			padding: 0;

			>li:first-child {
				border-radius: .5rem .5rem 0 0;
				border: none;
			}

			.folder:last-child {
				border-radius: 0 0 .5rem .5rem;
				overflow: hidden;
			}

			.lesson {
				--color: var(--dark);
				--border-color: color-mix(in srgb, var(--color) 10%, var(--light));
				--background-color: color-mix(in srgb, var(--color) 3%, var(--light));
				background-color: var(--background-color);
				border-top: 1px solid var(--border-color);
				padding: 0;

				a {
					display: flex;
					padding: .5rem;
					color: var(--color);
					text-decoration: none;
					line-height: 1.4;
					align-items: flex-start;

					&::before {
						content: '';
						display: inline-block;
						width: .8rem;
						height: .8rem;
						margin: .2rem .5rem .25rem 0;
						flex-shrink: 0;
						background-color: var(--color);
						-webkit-mask-image: url("/static/icons/bi/bookmark.svg");
						mask-image: url("/static/icons/bi/bookmark.svg");
						-webkit-mask-size: contain;
						mask-size: contain;
						-webkit-mask-repeat: no-repeat;
						mask-repeat: no-repeat;
						-webkit-mask-position: center;
						mask-position: center;
						transition: transform 0.18s;
					}
				}

				&.current {
					--color: var(--ui-color8);
					--border-color: color-mix(in srgb, var(--color) 20%, var(--light));
					--background-color: color-mix(in srgb, var(--color) 5%, var(--light));

					a {

						&::before {
							-webkit-mask-image: url("/static/icons/bi/bookmark-fill.svg");
							mask-image: url("/static/icons/bi/bookmark-fill.svg");
						}
					}
				}

				&:not(.current):hover {
					--background-color: var(--white);
				}
			}

			&>.folder {
				--color: var(--ui-color1);
				--border-color: color-mix(in srgb, var(--color) 27%, var(--light));
				--background-color: color-mix(in srgb, var(--color) 8%, var(--light));

				.folder-summary {
					color: var(--color);
					border-top: 1px solid var(--color);
					border-color: var(--border-color);
					background-color: var(--background-color);
					display: flex;
					align-items: center;
					cursor: pointer;
					user-select: none;
					list-style: none;
					font-weight: 500;
					font-size: 13px;
					transition: background 0.18s;
					gap: .25rem;
					padding: .5rem .75rem;

					&::-webkit-details-marker {
						display: none;
					}

					&::after {
						content: '';
						display: inline-block;
						width: .9rem;
						height: .9rem;
						flex-shrink: 0;
						margin-left: auto;
						background-color: var(--color);
						-webkit-mask-image: var(--chevron-mask);
						mask-image: var(--chevron-mask);
						-webkit-mask-size: contain;
						mask-size: contain;
						-webkit-mask-repeat: no-repeat;
						mask-repeat: no-repeat;
						-webkit-mask-position: center;
						mask-position: center;
						transition: transform 0.18s;
					}

					details[open]>&,
					&:hover {
						--background-color: color-mix(in srgb, var(--color) 20%, var(--light));
					}

					details[open]>&::after {
						transform: rotate(90deg);
					}

					.number {
						margin-right: .3rem;
						font-size: .75rem;
						font-weight: 400;
						letter-spacing: .02em;
					}
				}

				.folder-content {
					margin: 0;
					padding: 0;
				}
			}
		}
	}
}

/* table of contents */
.toc {
	summary {
		display: flex;
		align-items: center;
		cursor: pointer;
		user-select: none;
		list-style: none;
		font-weight: 500;
		color: var(--secondary);
		transition: background 0.18s;
		gap: 6px;

		&::-webkit-details-marker {
			display: none;
		}

		&::after {
			content: '';
			display: inline-block;
			width: 1rem;
			height: 1rem;
			flex-shrink: 0;
			background-color: var(--secondary);
			-webkit-mask-image: var(--chevron-mask);
			mask-image: var(--chevron-mask);
			-webkit-mask-size: contain;
			mask-size: contain;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-position: center;
			mask-position: center;
			transition: transform 0.18s;
		}

		details[open]>&::after {
			transform: rotate(90deg);
		}

		.toc-header {
			margin: 0;
			font-family: var(--uiFont);
			font-size: 1rem;
			display: inline-block;
		}
	}

	.toc-content {
		list-style: none;
		padding: 0;
		margin: .5rem 0;

		li:has([data-for]) {
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: .5rem;
				top: 0;
				bottom: 0;
				width: 1px;
				background: color-mix(in srgb, var(--dark) 35%, var(--light));
				transition: background .25s;
			}

			.depth-1::after {
				left: -2.1rem;
				z-index: 1;
				height: 2rem;
			}

			.depth-2::after {
				left: -3.1rem;
				z-index: 2;
				height: 2rem;
			}

			.depth-3::after {
				left: -4.1rem;
				z-index: 3;
				height: 2rem;
			}

			&:has(a.in-view)::after {
				background: var(--secondary);
			}
		}

		ul {
			list-style: none;
			padding: 0 0 0 1rem;
			margin: 0;
		}

		&>li {
			padding-left: 1.6rem;

			&:first-child::after {
				top: 1em;
			}

			&:last-child:not(:has(li))::after {
				bottom: calc(100% - 1em);
			}

			a:hover,
			a:hover * {
				color: var(--tertiary);
			}

			#exercises-toc-content & {
				position: relative;
				padding-left: 1.8rem;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 0.3em;
					width: 1rem;
					height: 1rem;
					background-color: var(--dark);
					-webkit-mask-image: url("/static/icons/bi/pencil-square.svg");
					mask-image: url("/static/icons/bi/pencil-square.svg");
					-webkit-mask-size: contain;
					mask-size: contain;
					-webkit-mask-repeat: no-repeat;
					mask-repeat: no-repeat;
					-webkit-mask-position: center;
					mask-position: center;
				}
			}

			#toc-content &::before {
				content: '';
				position: absolute;
				left: .30rem;
				top: .80em;
				width: .5rem;
				height: .5rem;
				border-radius: 999px;
				background: color-mix(in srgb, var(--dark) 35%, var(--light));
				transform: translateY(-50%);
				z-index: 1;
				transition: background .25s,
					box-shadow .25s,
					transform .25s;
			}

			#toc-content &:has(a.in-view)::before {
				background: var(--secondary);
				box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--secondary) 14%, var(--light));
				transform: translateY(-50%) scale(1.08);
			}
		}

		ul li {
			margin-left: 0;
			padding: .1rem 0;
		}

		a {
			font-family: var(--uiFont);
			font-size: .9rem;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			display: block;
			transition: opacity .3s,
				color .3s;

			&,
			& * {
				color: var(--dark);
			}

			&[data-for] {
				opacity: .35;

				&.in-view {
					opacity: 1;
				}
			}
		}
	}
}

/* backlinks */
.backlinks {
	.backlinks-header {
		margin: 0;
		font-family: var(--uiFont);
		font-size: 1rem;
		display: inline-block;
	}

	.backlinks-content {
		list-style: none;
		padding-left: 0;
		margin: .5rem 0;
	}

	.backlinks-content ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.backlinks-content ul li {
		margin-left: .5rem;
		padding: .1rem 0 .1rem .8rem;
		transition: border-color .2s;
	}

	.backlinks-content a {
		font-family: var(--uiFont);
		font-size: .9rem;
		transition: opacity .5s, color .3s;
	}
}

/* article image */
article img {
	content-visibility: auto;
	border-radius: 5px;
	max-width: 100%;
	margin: 1rem 0;
}

article .tikz-wrapper {
	width: 50%;
	min-width: 400px;
	margin: 0 auto;
	background-color: #fff;
	padding: 1rem;
	border-radius: .5rem;
	box-sizing: border-box;
}

/* article fonts */
article p,
article li,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
article #refs div {
	font-family: var(--bodyFont);
}

article p {
	text-align: justify;
}

/* figure */
figure.figure {
	margin: 1rem;
	text-align: center;

	figcaption {
		margin: 0;
		padding: 0;
		color: var(--darkgray);
		opacity: .8;
		text-align: left;
		font-family: var(--uiFont);
		font-size: .9em;
		font-style: italic;
		line-height: 1.5;
	}
}

/* references */
#refs.references::before {
	content: "References";
	color: var(--dark);
	margin-top: 1.9rem;
	margin-bottom: 1rem;
	font-size: 1.4rem;
	font-weight: 700;
	display: block;
}

#refs.references>div {
	text-indent: -3rem;
	text-align: left;
	margin-bottom: 0;
	padding-left: 3rem;
	font-size: 1rem;
	line-height: 1.6rem;
}

#refs.references .reference-backlinks a {
	vertical-align: super;
	font-family: var(--uiFont);
	font-size: 50%;
}

/* link repository */
.link-listing {
	margin-top: 2rem;

	.link-controls {
		flex-direction: column;
		gap: 1rem;
		margin-bottom: 2rem;
		display: flex;

		.link-search {
			box-sizing: border-box;
			border: 1px solid var(--lightgray);
			background-color: color-mix(in srgb, var(--lightgray)60%, var(--light));
			width: 100%;
			color: var(--darkgray);
			border-radius: .25em;
			padding: .25rem .75rem;
			font-size: 1rem;
			transition: border-color .2s, box-shadow .2s;
		}

		.link-tags {
			flex-wrap: wrap;
			gap: .5rem;
			display: flex;

			.link-tag-filter {
				cursor: pointer;
				align-items: center;
				transition: opacity .2s;
				display: flex;

				.tag-checkbox {
					display: none;
				}

				.tag-checkbox:not(:checked)+span {
					opacity: .1;
				}

				span {
					background: var(--lightgray);
					color: var(--darkgray);
					-webkit-user-select: none;
					user-select: none;
					padding: 0.2rem 0.5rem;
					border-radius: .25rem;
					font-family: var(--uiFont);
					font-size: .9rem;
					font-weight: 500;
					transition: all .2s;
				}
			}
		}
	}

	.link-list {
		flex-direction: column;
		gap: 1.5rem;
		display: flex;

		mark {
			background: var(--textHighlight);
			color: inherit;
			padding: .1em 0;
			border-radius: 2px;
		}

		.link-item {
			background: var(--light);
			border: 1px solid var(--lightgray);
			border-radius: .25em;
			padding: 1.25rem;
			transition: border-color .2s, box-shadow .2s;

			&.hidden {
				display: none;
			}

			&:hover {
				border-color: var(--secondary);
				box-shadow: 0 2px 8px #0000000d;
			}

			h3 {
				color: unset;
				display: inline;
			}

			.link-description {
				margin: .75rem 0 0;
				font-family: var(--uiFont);
				font-size: .95rem;
				line-height: 1.6;

				.hidden {
					display: none;
				}
			}

			.link-tags-list {
				flex-wrap: wrap;
				gap: .5rem;
				margin: 1rem 0 0;
				padding: 0;
				list-style: none;
				display: flex;

				li {
					background-color: var(--lightgray);
					color: var(--darkgray);
					border-radius: .5em;
					padding: 0 .7rem;
					font-family: var(--uiFont);
					font-size: .85rem;
					font-weight: 500;
				}
			}
		}
	}
}

/* callout */
blockquote {
	background-color: var(--white);
	border-left: .25rem solid var(--secondary);
	box-shadow: .0 .125rem .25rem color-mix(in srgb, #000 10%, var(--light));
	margin: 1rem 0;
	padding: .5rem .75rem;
	transition: border-color .2s;

	&:not(.callout) {
		padding: 1rem 1.5rem;
		border-radius: 0 .25rem .25rem 0;
	}
}

.callout {
	border: 1px solid var(--color);
	border-left: .5rem solid var(--color);
	border-color: color-mix(in srgb, var(--color) 27%, var(--light));
	background-color: color-mix(in srgb, var(--color) 8%, var(--light));

	&.is-collapsed:has(>.callout-title:hover) {
		border-color: color-mix(in srgb, var(--color) 36%, var(--light));
		background-color: color-mix(in srgb, var(--color) 16%, var(--light));
	}

	.callout-number {
		color: var(--color);
		border: 1px solid var(--color);
		border-color: color-mix(in srgb, var(--color) 50%, var(--light));
		background-color: color-mix(in srgb, var(--color) 20%, var(--light));
		padding: .25rem .5rem;
		margin-right: .75rem;
		border-radius: .25rem;
		font-size: .8rem;
		vertical-align: top;
		-webkit-user-select: none;
		user-select: none;
	}


	box-sizing: border-box;
	overflow-y: hidden;
	--callout-icon-note: url("/static/icons/bi/pencil-fill.svg");
	--callout-icon-abstract: url("/static/icons/bi/journal-text.svg");
	--callout-icon-info: url("/static/icons/bi/info-circle-fill.svg");
	--callout-icon-todo: url("/static/icons/bi/clipboard-check-fill.svg");
	--callout-icon-tip: url("/static/icons/bi/fire.svg");
	--callout-icon-success: url("/static/icons/bi/check.svg");
	--callout-icon-question: url("/static/icons/bi/question-square-fill.svg");
	--callout-icon-warning: url("/static/icons/bi/exclamation-triangle-fill.svg");
	--callout-icon-failure: url("/static/icons/bi/x.svg");
	--callout-icon-danger: url("/static/icons/bi/lightning-charge-fill.svg");
	--callout-icon-bug: url("/static/icons/bi/bug-fill.svg");
	--callout-icon-example: url("/static/icons/bi/list-ul.svg");
	--callout-icon-quote: url("/static/icons/bi/quote.svg");
	--callout-icon-fold: url("/static/icons/bi/chevron-down.svg");
}

.callout>.callout-content {
	transition: grid-template-rows .3s;
	display: grid;
	grid-template-rows: 1fr;
}

.callout.is-collapsed>.callout-content {
	grid-template-rows: 0fr;
	display: none;
}

.callout>.callout-content>.callout-content-inner {
	padding-top: .5rem;
	overflow: hidden;
}

blockquote>:first-child,
.callout>.callout-content>.callout-content-inner>:first-child {
	margin-top: 0;
}

blockquote>:last-child,
.callout>.callout-content>.callout-content-inner>:last-child {
	margin-bottom: 0;
}

.callout[data-callout] {
	--color: var(--ui-color1);
	--callout-icon: var(--callout-icon-note);
}

.callout[data-callout=abstract] {
	--color: var(--ui-color2);
	--callout-icon: var(--callout-icon-abstract);
}

.callout[data-callout=info],
.callout[data-callout=todo] {
	--color: var(--ui-color3);
	--callout-icon: var(--callout-icon-info);
}

.callout[data-callout=todo] {
	--callout-icon: var(--callout-icon-todo);
}

.callout[data-callout=tip] {
	--color: var(--ui-color4);
	--callout-icon: var(--callout-icon-tip);
}

.callout[data-callout=success] {
	--color: var(--ui-color5);
	--callout-icon: var(--callout-icon-success);
}

.callout[data-callout="question"] {
	--color: var(--ui-color6);
	--callout-icon: var(--callout-icon-question);
}

.callout[data-callout=warning] {
	--color: var(--ui-color7);
	--callout-icon: var(--callout-icon-warning);
}

.callout[data-callout=failure],
.callout[data-callout=danger],
.callout[data-callout=bug] {
	--color: var(--ui-color8);
	--callout-icon: var(--callout-icon-failure);
}

.callout[data-callout=bug] {
	--callout-icon: var(--callout-icon-bug);
}

.callout[data-callout=danger] {
	--callout-icon: var(--callout-icon-danger);
}

.callout[data-callout=example] {
	--color: var(--ui-color9);
	--callout-icon: var(--callout-icon-example);
}

.callout[data-callout=exercise] {
	--color: var(--darkgray);

	&>.callout-title>.callout-icon {
		display: none;
	}

	.callout-number {
		--color: var(--ui-color8);

		&::before {
			content: "EXERCISE ";
		}

	}
}

.callout[data-callout=quote] {
	--color: var(--secondary);
	--border: var(--lightgray);
	--callout-icon: var(--callout-icon-quote);
}

.callout.is-collapsed>.callout-title>.fold-callout-icon {
	transform: rotate(-90deg);
}

.callout-title {
	color: var(--color);
	--icon-size: 18px;
	align-items: flex-start;
	gap: .5rem;
	display: flex;

	.is-collapsible>& {
		cursor: pointer;
		-webkit-user-select: none;
		user-select: none;
	}
}

.callout-title .fold-callout-icon {
	opacity: .8;
	cursor: pointer;
	--callout-icon: var(--callout-icon-fold);
	transition: transform .15s;
}

.callout-title>.callout-title-inner>p {
	font-family: var(--uiFont);
	font-weight: 800;
	color: var(--color);
	margin: 0;
}

.callout-title .callout-icon,
.callout-title .fold-callout-icon {
	width: var(--icon-size);
	height: var(--icon-size);
	flex: 0 0 var(--icon-size);
	background-size: var(--icon-size)var(--icon-size);
	background-position: 50%;
	background-color: var(--color);
	-webkit-mask-image: var(--callout-icon);
	mask-image: var(--callout-icon);
	-webkit-mask-size: var(--icon-size)var(--icon-size);
	mask-size: var(--icon-size)var(--icon-size);
	padding: .25rem 0;
	-webkit-mask-position: 50%;
	mask-position: 50%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.callout-title .callout-title-inner {
	font-weight: 600;
	flex-grow: 1;
}

/* pretty code */
code {
	color: var(--codeInline);
	border: 1px solid var(--codeInline);
	border-color: color-mix(in srgb, var(--codeInline) 27%, var(--light));
	background-color: color-mix(in srgb, var(--codeInline) 8%, var(--light));
	font-size: .8rem;
	font-family: var(--codeFont);
	border-radius: 5px;
	padding: .1rem .2rem;
	/* disable ligatures for thins like -->> */
	font-variant-ligatures: none;
	font-feature-settings: "liga" 0, "calt" 0;

	pre & {
		color: var(--dark);
		background-color: var(--lightgray);
		border: none;
	}
}

figure[data-pretty-code-figure] {
	margin: 1.5rem 0;
	border-radius: .3rem;
	overflow: hidden;
	position: relative;
	box-shadow: .0 .125rem .25rem color-mix(in srgb, #000 10%, var(--light));

	figcaption[data-pretty-code-title] {
		padding: .4rem .7rem;
		background-color: var(--lightgray);
		color: var(--dark);
		font-family: var(--codeFont);
		font-size: .9rem;
		-webkit-user-select: none;
		user-select: none;

		&::before {
			content: '';
			display: inline-block;
			width: 1rem;
			height: 1.2rem;
			margin-right: .5rem;
			flex-shrink: 0;
			vertical-align: center;
			background-color: var(--dark);
			-webkit-mask-image: url("/static/icons/bi/file-earmark.svg");
			mask-image: url("/static/icons/bi/file-earmark.svg");
			-webkit-mask-size: contain;
			mask-size: contain;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-position: center;
			mask-position: center;
		}

		[data-collapse="collapse"] & {
			&:hover {
				cursor: pointer;
				background-color: color-mix(in srgb, var(--gray) 20%, var(--lightgray));
			}

			&::after {
				content: '';
				display: block;
				width: .8rem;
				height: 1.2rem;
				float: right;
				flex-shrink: 0;
				background-color: var(--dark);
				-webkit-mask-image: var(--chevron-mask);
				mask-image: var(--chevron-mask);
				-webkit-mask-size: contain;
				mask-size: contain;
				-webkit-mask-repeat: no-repeat;
				mask-repeat: no-repeat;
				-webkit-mask-position: center;
				mask-position: center;
				transition: transform 0.18s;
				transform: rotate(90deg);
			}

			[data-collapse="collapse"].collapsed &::after {
				transform: rotate(0);
			}
		}

		&[data-language=sh]::before,
		&[data-language=bash]::before {
			-webkit-mask-image: url("/static/icons/devicon/bash.svg");
			mask-image: url("/static/icons/devicon/bash.svg");
		}

		&[data-language=python]::before {
			-webkit-mask-image: url("/static/icons/devicon/python.svg");
			mask-image: url("/static/icons/devicon/python.svg");
		}

		&[data-language=html]::before {
			-webkit-mask-image: url("/static/icons/devicon/html5.svg");
			mask-image: url("/static/icons/devicon/html5.svg");
		}
	}

	pre.highlight {
		margin: 0;
		padding: 1rem;
		overflow-x: auto;
		background-color: var(--codeBackground) !important;

		[data-collapse="collapse"].collapsed & {
			display: none;
		}

		code {
			background-color: unset;
			font-family: var(--codeFont);
			font-size: 0.875rem;
			line-height: 1.6;
			display: block;
			white-space: pre;
			padding: 0;

			&>[data-line]::before {
				color: var(--gray);
				content: counter(line);
				counter-increment: line;
				text-align: right;
				width: 1rem;
				margin-right: 1rem;
				display: inline-block;
			}
		}

		&>code {
			counter-reset: line;
		}
	}

	.copy-code-button {
		position: absolute;
		top: .5rem;
		right: .5rem;
		padding: .4rem .7rem;
		border: none;
		border-radius: .5rem;
		background: var(--dark);
		color: var(--light);
		cursor: pointer;
		opacity: 0;
		transition: opacity 0.2s ease;

		&.captioned {
			top: 2.5rem;
		}
	}

	& pre:hover+.copy-code-button,
	& .copy-code-button:hover {
		opacity: 1;
	}
}

/* mermaid */
.mermaid {
	display: none;
}

.processed-mermaid {
	svg {
		p {
			margin: 0;
			color: unset;
			font-family: unset;
			text-align: unset;
		}

		/* special classes */
		.current-node {
			rect {
				fill: var(--mermaid-current) !important;
				stroke: var(--mermaid-current) !important;
			}

			.label,
			.label p,
			.label text {
				fill: var(--white) !important;
				color: var(--white) !important;
			}
		}
	}
}


/* slides */
.slides-container {
	-webkit-user-select: none;
	user-select: none;
	border: 1px solid var(--lightgray);
	border-radius: .25rem;
	margin: 2rem 0;
	overflow: hidden;
	box-shadow: .0 .125rem .25rem color-mix(in srgb, #000 10%, var(--light));

	.slides-btn {
		color: var(--light);
		cursor: pointer;
		background: var(--secondary);
		border: none;
		border-radius: 6px;
		padding: .2rem .5rem;
		font-size: .8rem;
		font-weight: 600;
		transition: opacity .15s;

		&.disabled {
			color: var(--gray);
			cursor: not-allowed;
			background: var(--lightgray) !important;
		}

		&:hover:not(.disabled) {
			opacity: .8;
		}
	}

	.slides-topbar {
		background-color: var(--white);
		border-bottom: 1px solid var(--lightgray);
		justify-content: space-between;
		align-items: center;
		gap: .75rem;
		padding: .5rem 1rem;
		display: flex;
		font-family: var(--uiFont);

		.slides-section-label {
			color: var(--secondary);
			letter-spacing: .06em;
			text-overflow: ellipsis;
			text-transform: uppercase;
			white-space: nowrap;
			flex: 1;
			font-size: .75rem;
			font-weight: 600;
			overflow: hidden;
		}

		.slides-progress-bar {
			background: var(--lightgray);
			border-radius: .25rem;
			flex: 2;
			height: 6px;
			overflow: hidden;

			.slides-progress-fill {
				background: var(--secondary);
				height: 100%;
				transition: width .3s;
			}
		}

		.slides-counter {
			color: var(--darkgray);
			font-variant-numeric: tabular-nums;
			white-space: nowrap;
			font-size: .75rem;
		}

		.slides-fullscreen-btn::before {
			content: '';
			display: inline-block;
			width: .7rem;
			height: .7rem;
			flex-shrink: 0;
			vertical-align: center;
			background-color: var(--light);
			-webkit-mask-image: url("/static/icons/bi/fullscreen.svg");
			mask-image: url("/static/icons/bi/fullscreen.svg");
			-webkit-mask-size: contain;
			mask-size: contain;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-position: center;
			mask-position: center;
		}

	}

	.slides-viewport {
		aspect-ratio: 16/9;
		zoom: 1;
		background-color: var(--light);
		width: 100%;
		position: relative;
		overflow: hidden;

		.slide {
			box-sizing: border-box;
			color: var(--dark);
			width: 100%;
			height: 100%;
			padding: 1.5rem 2rem;
			overflow: scroll;
			display: none;

			&.active {
				display: flex;
			}

			&.front-slide.active {
				text-align: center;
				background: linear-gradient(135deg, var(--secondary) 0%, var(--tertiary) 100%);
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: .5rem;
				position: relative;

				&::before {
					content: "";
					background-color: var(--light);
					border-radius: 1rem;
					position: absolute;
					inset: 4rem 2rem;
				}

				&>* {
					position: relative;
				}

				.slide-title,
				.slide-subtitle,
				.slide-author {
					color: var(--dark);
					font-family: var(--uiFont);
					font-size: 2rem;
					font-weight: 700;
					line-height: 2;
				}

				.slide-subtitle,
				.slide-author {
					color: var(--darkgray);
					font-size: 1.5rem;
					font-weight: 400;
					line-height: 2;
				}

				.slide-author {
					font-size: 1.2rem;
					line-height: 1;
				}
			}

			&.section-slide.active {
				background: linear-gradient(135deg, var(--secondary) 0%, var(--tertiary) 100%);
				justify-content: center;
				align-items: center;

				.slide-title {
					color: var(--light);
					font-family: var(--uiFont);
					font-size: 2rem;
					font-weight: 700;
					line-height: 2;
				}
			}

			&.title-slide.active {
				flex-direction: column;

				.slide-title {
					color: var(--dark);
					border-bottom: 2px solid var(--secondary);
					margin: 0 0 .75rem;
					padding-bottom: .35rem;
					font-family: var(--uiFont);
					font-size: 1.1rem;
					font-weight: 700;
				}

				.slide-columns {
					display: flex;
					gap: 1.25rem;
					width: 100%;

					.slide-column {
						flex: 1;
						min-width: 0;
					}
				}

				ul,
				ol {
					margin: .3rem 0 .3rem 1.2rem;
					padding: 0;
				}

				p,
				li,
				td {
					margin: .2rem 0;
					line-height: 1.45;
				}
			}
		}
	}

	.slides-controls {
		background-color: var(--white);
		border-top: 1px solid var(--lightgray);
		justify-content: center;
		align-items: center;
		gap: .5rem;
		padding: .5rem 1rem;
		display: flex;

		.slide-dot-nav {
			flex-wrap: wrap;
			flex: 1;
			justify-content: center;
			align-items: center;
			gap: .25rem;
			display: flex;

			.slide-dot {
				cursor: pointer;
				background-color: var(--lightgray);
				border: none;
				border-radius: 50%;
				width: 8px;
				height: 8px;
				padding: 0;
				transition: background .15s, transform .15s;

				&.active {
					background-color: var(--secondary);
					transform: scale(1.35);
				}

				&.is-section {
					border-radius: 2px;
					width: 12px;
				}
			}
		}
	}

	&:fullscreen {
		border-radius: 0;
		flex-direction: column;
		width: 100dvw;
		height: 100dvh;
		display: flex;

		.slides-viewport {
			aspect-ratio: unset;
			flex: 1;
		}
	}
}


/* flashcards */
.flashcards-container {
	background: var(--white);
	padding: 1rem 1rem .5rem;
	-webkit-user-select: none;
	user-select: none;
	margin: 2rem auto;
	font-family: var(--uiFont);
	max-width: 600px;
	border: 1px solid var(--lightgray);
	border-radius: .25rem;
	box-shadow: .0 .125rem .25rem color-mix(in srgb, #000 10%, var(--light));

	.flashcards-btn {
		color: var(--light);
		cursor: pointer;
		background: var(--secondary);
		border: none;
		border-radius: 6px;
		padding: .2rem .5rem;
		font-size: .8rem;
		font-weight: 600;
		transition: opacity .15s;

		&.disabled {
			color: var(--gray);
			cursor: not-allowed;
			background: var(--lightgray) !important;
		}

		&:hover:not(.disabled) {
			opacity: .8;
		}

		&.fullscreen::before {
			content: '';
			display: inline-block;
			width: .7rem;
			height: .7rem;
			flex-shrink: 0;
			vertical-align: center;
			background-color: var(--light);
			-webkit-mask-image: url("/static/icons/bi/fullscreen.svg");
			mask-image: url("/static/icons/bi/fullscreen.svg");
			-webkit-mask-size: contain;
			mask-size: contain;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-position: center;
			mask-position: center;
		}
	}

	.flashcards-viewport {
		width: 100%;

		.flashcard {
			cursor: pointer;
			box-sizing: border-box;
			color: var(--light);
			width: 100%;
			height: 350px;
			perspective: 1000px;
			display: none;

			:fullscreen & {
				height: calc(100vh - 4rem);
			}

			&.active {
				display: block;
			}

			.flashcard-inner {
				transform-style: preserve-3d;
				width: 100%;
				height: 100%;
				transition: transform .6s;
				position: relative;

				.flashcard-face {
					box-sizing: border-box;
					backface-visibility: hidden;
					justify-content: center;
					align-items: center;
					border-radius: .25rem;
					width: 100%;
					height: 100%;
					display: flex;
					position: absolute;
					top: 0;
					left: 0;

					&.flashcard-front {
						background: linear-gradient(135deg, var(--secondary) 0%, var(--tertiary) 100%);
					}

					&.flashcard-back {
						background: linear-gradient(135deg, var(--flashcard-color1) 0%, var(--flashcard-color2) 100%);
						transform: rotateY(180deg);
					}

					.flashcard-content {
						font-family: var(--uiFont);
						font-size: 1.5rem;
						padding: 2rem;
						max-width: 100vw;
						box-sizing: border-box;

						.katex-display {
							background-color: var(--light);
							padding: .75rem 1rem;
							border-radius: .25rem;

							@media (max-width:800px) {
								font-size: 4vw;
							}
						}

						p {
							text-align: center;
							color: var(--light);
							font-family: var(--uiFont);
							line-height: 1.4;

							&:has(img) {
								justify-content: center;
								align-items: center;
								height: 250px;
								display: flex;
							}

							&>img {
								max-width: 100%;
								max-height: 100%;
							}
						}

					}
				}
			}

			&.flipped .flashcard-inner {
				transform: rotateY(180deg);
			}
		}
	}

	.flashcards-controls {
		justify-content: center;
		align-items: center;
		gap: 1rem;
		padding: .5rem 0;
		display: flex;

		.flashcards-progress-bar {
			background: var(--lightgray);
			border-radius: .25rem;
			flex: 2;
			height: 6px;
			overflow: hidden;

			.flashcards-progress-fill {
				background: var(--secondary);
				height: 100%;
				transition: width .3s;
			}
		}

		.flashcards-counter {
			color: var(--darkgray);
			font-variant-numeric: tabular-nums;
			white-space: nowrap;
			font-size: .75rem;
		}
	}
}

/* keys */
.keys {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-family: var(--uiFont);
	font-size: 0.9rem;
	color: var(--dark);

	kbd {
		background-color: var(--white);
		border: 1px solid var(--gray);
		border-bottom-width: .2rem;
		border-radius: .3rem;
		box-shadow: .0 .125rem .125rem color-mix(in srgb, #000 10%, var(--light));
		color: var(--black);
		display: inline-block;
		font-family: inherit;
		font-size: 0.85rem;
		font-weight: 600;
		line-height: 1;
		padding: .25rem .5rem;
		white-space: nowrap;
		-webkit-user-select: none;
		user-select: none;
	}
}

/* readermode */
:root[reader-mode="on"] {

	footer,
	nav,
	.right,
	.tags {
		display: none !important;
	}

	#noxz-body {
		grid-template: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;

		&>.center {
			min-width: unset !important;
			max-width: calc(100% - 2rem) !important;
			width: calc(100% - 2rem) !important;
			margin: 0 1rem !important;
			padding: 0 !important;
			display: block !important;

			hr {
				box-sizing: border-box;
			}
		}
	}


	.left {
		position: absolute !important;
		inset: 0;
		width: 0 !important;
		height: 0 !important;
		overflow: visible;
		pointer-events: none;
	}

	.left>*:not(.flex-component),
	.flex-component>*:not(.flex-shrink),
	.flex-shrink:not(:has(.readermode)) {
		display: none;
	}

	.readermode {
		position: fixed;
		background-color: var(--white);
		border: 1px solid var(--gray);
		border-bottom-width: .2rem;
		border-radius: .3rem;
		box-shadow: .0 .125rem .125rem color-mix(in srgb, #000 10%, var(--light));
		top: 2rem;
		right: 2rem;
		z-index: 9999;

		width: auto;
		height: auto;

		display: flex;
		flex: none;

		pointer-events: auto;

		&::before {
			margin-right: 0;
		}
	}
}


/* responsive layout */
#hamburger,
.explorer-toggle {
	display: none;
}

.mobile-only {
	display: none;
}

.spacer {
	flex: 2 auto;
}

@media not (min-width: 1200px) {
	.search>.search-modal>.search-container {
		width: 90%;
	}
}

@media (max-width:800px) {
	.mobile-only {
		display: initial;
	}

	.page>#noxz-body {
		grid-template: "grid-sidebar-left" "grid-header" "grid-center" "grid-sidebar-right" "grid-footer" /auto;
		gap: 5px;
		margin: 0 auto;

		.sidebar.right {
			display: none;
		}

		.sidebar.left {
			background-color: var(--light);
			width: 100vw;
			margin: 0;
			padding: 1rem;
			height: unset;
			flex-direction: row;
			align-items: center;
			gap: 0;
			transition: background .2s;

			.explorer {
				.explorer-toggle {
					content: '';
					width: 22px;
					height: 22px;
					padding: 5px;
					margin-left: 1rem;
					background-color: var(--dark);
					-webkit-mask-size: contain;
					mask-size: contain;
					-webkit-mask-repeat: no-repeat;
					mask-repeat: no-repeat;
					-webkit-mask-position: center;
					mask-position: center;
					vertical-align: middle;

					-webkit-mask-image: url("/static/icons/bi/list.svg");
					mask-image: url("/static/icons/bi/list.svg");

					cursor: pointer;
					align-items: center;
					display: flex;
					position: relative;
					box-sizing: border-box;
					z-index: 101;
				}

				.explorer-content {
					box-sizing: border-box;
					z-index: 100;
					background-color: var(--light);
					visibility: hidden;
					width: 100vw;
					max-width: 100vw;
					height: 100dvh;
					margin-top: 0;
					padding: 2rem 3.5rem 0 1rem;
					transition: transform .2s, visibility .2s;
					position: absolute;
					top: 0;
					left: 0;
					overflow: hidden;
					transform: translate(-100vw);
					max-height: 100dvh !important;

					#hamburger:checked~& {
						visibility: visible;
						transform: translate(0);
					}
				}
			}
		}

		&> :not(.sidebar.left:has(.explorer)) {
			width: calc(100vw - 2rem);
			min-width: auto;
			max-width: auto;
			transition: transform .3s ease-in-out;
		}

		.search>.search-button {
			width: 20px !important;
			height: 20px !important;
			text-align: inherit !important;
			box-sizing: content-box !important;
			background: 0 0 !important;
			border: none !important;
			flex-shrink: 0 !important;
			margin: 0 !important;
			padding: 5px !important;
			position: relative !important;

			&::before {
				display: none;
			}

			&::after {
				margin: 0 !important;
			}
		}
	}
}

/* special list links */
li {
	--icon-space: 2em;

	&:has(a[href$=".pdf"]),
	&:has(a[href^="https://youtube.com/"]),
	&:has(a[href^="https://www.youtube.com/"]),
	&:has(a[href^="https://eddler.se/"]) {
		list-style: none;

		&::before {
			content: "";
			display: inline-block;
			width: 1rem;
			height: 1rem;
			flex-shrink: 0;
			vertical-align: middle;
			background-color: var(--dark);

			-webkit-mask-size: contain;
			mask-size: contain;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-position: center;
			mask-position: center;

			margin-left: calc(var(--icon-space) * -1);
			margin-right: .5rem;
		}
	}

	&:has(a[href$=".pdf"])::before {
		-webkit-mask-image: url("/static/icons/bi/file-pdf-fill.svg");
		mask-image: url("/static/icons/bi/file-pdf-fill.svg");
	}

	&:has(a[href^="https://youtube.com/"])::before,
	&:has(a[href^="https://www.youtube.com/"])::before {
		-webkit-mask-image: url("/static/icons/bi/youtube.svg");
		mask-image: url("/static/icons/bi/youtube.svg");
	}

	&:has(a[href^="https://eddler.se/"])::before {
		-webkit-mask-image: url("/static/icons/bi/journal-bookmark-fill.svg");
		mask-image: url("/static/icons/bi/journal-bookmark-fill.svg");
	}
}

/* katex */
article .katex-display {
	overflow-x: scroll;
}

article .katex-display:not(.flashcards-container .katex-display) {
	background-color: var(--white);
	border: 1px solid var(--lightgray);
	border-left: .2rem solid var(--tertiary);
	border-radius: 0 .3rem .3rem 0;
	padding: 1rem 1.4rem;
	box-shadow: .0 .125rem .25rem color-mix(in srgb, #000 10%, var(--light));

	>.katex {
		text-align: left;
	}
}

/* lesson header */
.lesson-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 1rem 0;

	.lesson-button {
		--color: var(--black);
		display: flex-block;
		box-shadow: border-box;
		color: var(--color);
		border: 1px solid var(--color);
		border-color: color-mix(in srgb, var(--color) 27%, var(--light));
		background-color: color-mix(in srgb, var(--color) 8%, var(--light));
		box-shadow: .0 .125rem .25rem color-mix(in srgb, #000 10%, var(--light));
		font-family: var(--uiFont);
		padding: .5rem 1rem;
		border-radius: .25rem;
		text-decoration: none;
		line-height: 1.4rem;
		transition: background 200ms ease;
		width: calc(100%/2 - 3rem);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

		&::before {
			font-family: var(--codeFont);
			content: "← PREVIOUS";
			font-size: .8rem;
			font-weight: 700;
			display: block;
		}

		&.next {
			text-align: right;
		}

		&.next::before {
			content: "NEXT →";
		}

		&:hover {
			color: var(--color);
			background-color: color-mix(in srgb, var(--color) 16%, var(--light));
		}

		.lesson-block-name {
			display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			height: 1.4rem;
			font-size: .8rem;
			font-style: italic;
		}
	}
}

/* calendar */
.course-calendar {
	ul.course-calendar-legend {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		padding: 0;
		margin: 1rem 0;
		list-style: none;

		>li.legend-item {
			--color: var(--ui-color10);
			list-style: none;
			display: flex;
			align-items: center;
			gap: .5rem;
			font-family: var(--headerFont);
			font-size: .9rem;
			line-height: 1.2rem;

			>span {
				color: var(--color);
				border: 1px solid var(--color);
				border-color: color-mix(in srgb, var(--color) 27%, var(--light));
				background-color: color-mix(in srgb, var(--color) 8%, var(--light));
				font-size: .8rem;
				font-family: var(--codeFont);
				border-radius: 5px;
				padding: .1rem .2rem;
			}

			&::before {
				content: "";
				width: .8rem;
				height: .8rem;
				border-radius: 50%;
				background: var(--color);
				flex-shrink: 0;
			}

			&.legend-1 {
				--color: var(--ui-color1);
			}

			&.legend-2 {
				--color: var(--ui-color4);
			}

			&.legend-3 {
				--color: var(--ui-color6);
			}

			&.legend-4 {
				--color: var(--ui-color8);
			}

			&.legend-5 {
				--color: var(--ui-color9);
			}

			&.legend-6 {
				--color: var(--ui-color2);
			}

			&.legend-7 {
				--color: var(--ui-color7);
			}

			&.legend-8 {
				--color: var(--ui-color3);
			}

			&.legend-9 {
				--color: var(--ui-color5);
			}
		}
	}

	.course-calendar-progress-bar {
		border-radius: .2rem;
		grid-auto-columns: minmax(auto, 1rem);
		grid-auto-flow: column;
		gap: .2rem;
		margin-bottom: 1.5rem;
		display: grid;
		position: relative;
		overflow: scroll;
		-webkit-user-select: none;
		user-select: none;

		.course-block-span {
			--color: var(--ui-color10);
			color: var(--color);
			background-color: color-mix(in srgb, var(--color) 8%, var(--light));
			text-overflow: ellipsis;
			white-space: nowrap;
			cursor: help;
			pointer-events: auto;
			border-radius: .2rem;
			align-items: center;
			height: 1rem;
			padding: .2rem .25rem;
			font-family: var(--uiFont);
			font-size: .7rem;
			font-weight: 600;
			transition: background .2s;
			display: flex;
			overflow: hidden;
		}

		.calendar-progress-week {
			flex-direction: column;
			gap: .2rem;
			padding-top: .2rem;
			padding-bottom: .2rem;
			display: flex;
			grid-row: 2;

			&:nth-child(2n+1):not(.active-nav-week) {
				background-color: color-mix(in srgb, var(--lightgray)30%, transparent);
			}

			&.active-nav-week {
				background-color: color-mix(in srgb, var(--textHighlight)70%, transparent);
				border-radius: 2px;
				margin-left: -2px;
				margin-right: -2px;
				padding-left: 2px;
				padding-right: 2px;
			}

			.calendar-progress-lesson {
				--color: var(--ui-color10);
				cursor: pointer;
				opacity: .85;
				border-radius: 2px;
				height: 10px;
				transition: all .2s;
				background-color: var(--color);

				&.lesson-1 {
					--color: var(--ui-color1);
				}

				&.lesson-2 {
					--color: var(--ui-color4);
				}

				&.lesson-3 {
					--color: var(--ui-color6);
				}

				&.lesson-4 {
					--color: var(--ui-color8);
				}

				&.lesson-5 {
					--color: var(--ui-color9);
				}

				&.lesson-6 {
					--color: var(--ui-color2);
				}

				&.lesson-7 {
					--color: var(--ui-color7);
				}

				&.lesson-8 {
					--color: var(--ui-color3);
				}

				&.lesson-9 {
					--color: var(--ui-color5);
				}

				&.past {
					filter: saturate(.5)brightness(.4);
				}

				&[data-cancelled=true] {
					display: none;
				}

				.single-course &[data-assessment=true] {
					--color: var(--ui-color8);
				}

				.single-course &[data-block-start=true] {
					--color: var(--ui-color10);
				}

				&.current {
					animation: 2s ease-in-out infinite pulse;
				}
			}

			.calendar-progress-week-label {
				color: var(--dark);
				text-align: center;
				cursor: pointer;
				font-variant-numeric: tabular-nums;
				width: 16px;
				margin-top: auto;
				padding-top: 4px;
				font-family: var(--uiFont);
				font-size: .65rem;
			}
		}
	}

	.calendar-week-nav {
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1rem;
		display: flex;
		position: relative;
		-webkit-user-select: none;
		user-select: none;

		.calendar-week-nav-title {
			text-align: center;
			pointer-events: none;
			font-family: var(--headerFont);
			font-size: 1rem;
			font-weight: 700;
			position: absolute;
			left: 0;
			right: 0;
		}

		.calendar-week-nav-group {
			display: flex;
			gap: 0.5rem;
		}

		.calendar-week-nav-btn {
			--color: var(--ui-color10);
			color: var(--color);
			border: 1px solid var(--color);
			border-color: color-mix(in srgb, var(--color) 27%, var(--light));
			background-color: color-mix(in srgb, var(--color) 8%, var(--light));
			cursor: pointer;
			background: 0 0;
			border-radius: 2px;
			padding: .3rem .75rem;
			font-size: .75rem;
			line-height: 1.4;
			transition: background .15s, border-color .15s;

			&.today {
				--color: var(--ui-color1);
			}

			&:hover {
				border-color: color-mix(in srgb, var(--color) 37%, var(--light));
				background-color: color-mix(in srgb, var(--color) 18%, var(--light));
			}

			&.previous,
			&.next {
				&::before {
					content: "";
					display: inline-block;
					width: .5rem;
					height: .5rem;
					flex-shrink: 0;
					vertical-align: middle;
					background-color: var(--dark);

					-webkit-mask-size: contain;
					mask-size: contain;
					-webkit-mask-repeat: no-repeat;
					mask-repeat: no-repeat;
					-webkit-mask-position: center;
					mask-position: center;
				}

				&.previous::before {
					-webkit-mask-image: url("/static/icons/bi/chevron-left.svg");
					mask-image: url("/static/icons/bi/chevron-left.svg");
				}

				&.next::before {
					-webkit-mask-image: url("/static/icons/bi/chevron-right.svg");
					mask-image: url("/static/icons/bi/chevron-right.svg");
				}
			}
		}
	}

	.calendar-timetable {
		border: 1px solid var(--lightgray);
		border-radius: .25rem;
		grid-template-rows: 2rem repeat(540, 1.2px);
		grid-template-columns: 2.5rem repeat(5, 1fr);
		font-size: .78rem;
		display: none;
		position: relative;
		overflow: hidden;
		-webkit-user-select: none;
		user-select: none;

		&.active {
			display: grid;
		}

		.gutter-corner {
			background: var(--light);
			border-bottom: 2px solid var(--lightgray);
			grid-area: 1/1;
			position: sticky;
			top: 0;
		}

		.day-header {
			background: var(--light);
			border-bottom: 2px solid var(--lightgray);
			text-transform: capitalize;
			grid-row: 1;
			justify-content: center;
			align-items: center;
			font-family: var(--headerFont);
			font-size: .8rem;
			font-weight: 700;
			display: flex;
			position: sticky;
			top: 0;

			&.current {
				color: var(--secondary);
			}
		}

		.gutter-background {
			grid-column: 1;
			grid-row: 2/542;
			border-right: 1px solid var(--lightgray);
		}

		.day-background {
			pointer-events: none;
			grid-row: 2/542;

			&:nth-child(2n+1) {
				background: color-mix(in srgb, var(--lightgray)30%, transparent);
			}
		}

		.hour-label {
			grid-column: 1;
			justify-content: flex-end;
			align-items: flex-start;
			padding-top: .2rem;
			padding-right: .4rem;
			font-family: var(--uiFont);
			font-size: .8rem;
			display: flex;
		}

		.hour-line {
			border-top: 1px solid var(--lightgray);
			pointer-events: none;
			grid-column: 2/7;
		}

		.halfhour-line {
			border-top: 1px dashed var(--lightgray);
			pointer-events: none;
			grid-column: 2/7;
		}

		.now-line {
			justify-self: stretch;
			height: 2px;
			background: var(--black);
			z-index: 100;
			pointer-events: none;
			position: relative;

			&::before {
				content: "";
				background: var(--black);
				border-radius: 50%;
				width: .6rem;
				height: .6rem;
				position: absolute;
				top: -.3rem;
				left: -.3rem;
			}
		}

		.lesson {
			cursor: default;
			border-left: 3px solid #0000;
			color: var(--color);
			border-color: color-mix(in srgb, var(--color) 60%, var(--light));
			background-color: color-mix(in srgb, var(--color) 18%, var(--light));
			font-family: var(--headerFont);
			font-size: .8rem;
			font-weight: 700;
			border-radius: .2rem;
			flex-direction: column;
			gap: 1px;
			min-height: 0;
			margin: 0 2px;
			padding: 3px 5px;
			position: relative;
			display: flex;
			overflow: hidden;

			&.lesson-1 {
				--color: var(--ui-color1);
			}

			&.lesson-2 {
				--color: var(--ui-color4);
			}

			&.lesson-3 {
				--color: var(--ui-color6);
			}

			&.lesson-4 {
				--color: var(--ui-color8);
			}

			&.lesson-5 {
				--color: var(--ui-color9);
			}

			&.lesson-6 {
				--color: var(--ui-color2);
			}

			&.lesson-7 {
				--color: var(--ui-color7);
			}

			&.lesson-8 {
				--color: var(--ui-color3);
			}

			&.lesson-9 {
				--color: var(--ui-color5);
			}

			.course-name {
				color: var(--color);
				letter-spacing: .03em;
				white-space: nowrap;
				text-overflow: ellipsis;
				opacity: .9;
				font-size: .62rem;
				font-weight: 700;
				overflow: hidden;
			}

			.lesson-title {
				color: var(--dark);
				line-clamp: 3;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				font-size: .72rem;
				font-weight: 500;
				line-height: 1.2;
				display: -webkit-box;
				overflow: hidden;

				a {
					color: var(--dark);
					line-height: unset;
				}
			}

			.lesson-time-location {
				color: var(--dark);
				opacity: .75;
				margin-top: auto;
				font-family: var(--uiFont);
				font-size: .62rem;

				.lesson-location {
					color: var(--dark);
					background-color: var(--white);
					padding: 3px 5px;
					border-radius: .2rem;
					float: right;
				}
			}

			&.past {
				filter: saturate(.45)brightness(.9);
				opacity: .3;
			}

			&[data-assessment=true] {
				overflow: hidden;
				box-shadow: inset 0 0 5px #fff;

				&::after {
					content: "";
					pointer-events: none;
					mix-blend-mode: soft-light;
					background: linear-gradient(-45deg, #0000 40%, #fff 50%, #0000 60%) 150% 0/300%;
					animation: 1.5s linear infinite shimmer;
					position: absolute;
					inset: 0;
				}

				&::before {
					content: "";
					pointer-events: none;
					mix-blend-mode: soft-light;
					background: linear-gradient(#0000, gold);
					position: absolute;
					inset: 0;
				}
			}

			/* fix overlaps */
			& {
				position: relative;
				box-sizing: border-box;

				--gap: .25em;
				--padding-right: .25em;

				width: calc((100% - (var(--overlap-count) - 1) * var(--gap)) / var(--overlap-count));

				left: calc(var(--overlap-index) * ((100% - (var(--overlap-count) - 1) * var(--gap)) / var(--overlap-count) + var(--gap)));

				&.overlap-last {
					width: calc((100% - (var(--overlap-count) - 1) * var(--gap)) / var(--overlap-count) - var(--padding-right));
				}
			}
		}
	}
}

/* glitch */
.glitch {
	position: relative;
	display: block;
	font-family: var(--codeFont, monospace);
	font-size: 6rem;
	font-weight: 700;
	line-height: 1;
	color: var(--dark);
	background: var(--lightgray);
	text-align: center;
	white-space: nowrap;
	width: fit-content;
	margin: 4rem auto;
	text-align: center;
	padding: 2rem;
	border-radius: 1rem;
	-webkit-user-select: none;
	user-select: none;

	&::before,
	&::after {
		content: attr(data-text);
		position: absolute;
		inset: 0;
		overflow: hidden;
		pointer-events: none;
		white-space: nowrap;
		background: var(--light);
		padding: 2rem;
	}

	&::before {
		color: var(--dark);
		text-shadow: -2px 0 var(--ui-color1);
		animation: glitch-top 700ms infinite steps(1, end);
	}

	&::after {
		color: var(--dark, #111);
		text-shadow: 2px 0 var(--ui-color7);
		animation: glitch-bottom 250ms infinite steps(1, end);
	}

	.glitch-static::before {
		content: "";
		position: absolute;
		display: block;
		height: 100%;
		width: 100%;
		border-radius: 1rem;
		left: 0;
		top: 0;
		background:
			repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%) 50% 0/2500px 2500px,
			repeating-conic-gradient(#000 0 0.0001%, #fff 0 0.0002%) 60% 60%/2500px 2500px;
		background-blend-mode: difference;
		animation: glitch-static .2s infinite alternate;
		opacity: .2;
		box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 1);
		z-index: 1;
	}
}

/* lessons page */
[data-course=lessons] article {
	.toc-counter {
		display: none !important;
	}

	ul {
		list-style: none;
		margin: 0px;
		padding: 0px;

		li {
			& a {
				--color: var(--dark);
				background-color: transparent;
				display: inline-flex;
				padding: 0.5rem 0;
				text-decoration: none;
				line-height: 1.4;
				align-items: flex-start;

				&::before {
					content: '';
					display: inline-block;
					width: .8rem;
					height: .8rem;
					margin: .2rem .5rem .25rem 0;
					flex-shrink: 0;
					background-color: var(--color);
					-webkit-mask-image: url("/static/icons/bi/bookmark.svg");
					mask-image: url("/static/icons/bi/bookmark.svg");
					-webkit-mask-size: contain;
					mask-size: contain;
					-webkit-mask-repeat: no-repeat;
					mask-repeat: no-repeat;
					-webkit-mask-position: center;
					mask-position: center;
					transition: transform 0.18s;
				}

				&:hover::before {
					-webkit-mask-image: url("/static/icons/bi/bookmark-fill.svg");
					mask-image: url("/static/icons/bi/bookmark-fill.svg");
				}
			}
		}
	}
}

/* abbriviation */
abbr[data-tooltip] {
	position: relative;
	text-decoration: underline;
	text-decoration-style: dotted;
	cursor: help;

	&[data-tooltip]:hover::before,
	&[data-tooltip]:focus-visible::before {
		content: attr(data-tooltip);
		position: absolute;
		left: 0%;
		top: calc(100% + 0.25rem);
		padding: 0.55rem 0.8rem;
		width: 30vw;
		background: var(--dark);
		color: var(--light);
		font-family: var(--uiFont);
		font-style: italic;
		font-weight: 500;
		line-height: 1.4;
		text-align: left;
		border-radius: 0.125rem;
		box-shadow: .0 .125rem .25rem color-mix(in srgb, #000 10%, var(--light));
		pointer-events: none;
		z-index: 1000;
		animation: abbr-tooltip-in 160ms ease-out;
	}

	&.tooltip-right:hover::before {
		left: auto;
		right: 0;
	}
}

/* katex hi */
.katex .latex-highlight {
	color: var(--ui-color8);
}