.mkdocs-carousel {
	--mkdocs-carousel-accent: var(--frontmark-theme-accent, var(--frontmark-cyan, var(--sl-color-accent, #12c6d8)));
	--mkdocs-carousel-panel: var(--frontmark-theme-panel, var(--frontmark-panel, var(--sl-color-gray-6, #073047)));
	--mkdocs-carousel-text: var(--frontmark-theme-text, var(--frontmark-text, var(--sl-color-white, #f8fafc)));
	--mkdocs-carousel-control-background: color-mix(in srgb, var(--mkdocs-carousel-panel) 92%, transparent);
	--mkdocs-carousel-control-hover-background: color-mix(
		in srgb,
		var(--mkdocs-carousel-accent) 18%,
		var(--mkdocs-carousel-panel)
	);
	--mkdocs-carousel-control-border: color-mix(in srgb, var(--mkdocs-carousel-accent) 58%, transparent);
	--mkdocs-carousel-control-color: var(--mkdocs-carousel-text);
	--mkdocs-carousel-control-shadow: 0 0.45rem 1.4rem rgb(0 0 0 / 24%);
	--mkdocs-carousel-dot-size: 0.72rem;
	--mkdocs-carousel-dots-gap: 0.85rem;
	--mkdocs-carousel-dots-center-offset: 0.785rem;
	--mkdocs-carousel-gap: 0.75rem;
	--mkdocs-carousel-height: auto;
	--mkdocs-carousel-aspect-ratio: auto;
	--mkdocs-carousel-image-fit: cover;
	position: relative;
	max-width: 100%;
	margin-block: 1.5rem 2rem;
}

.mkdocs-carousel-track {
	/* Slick normally supplies this containing block. Keep arrow alignment stable
	   while its stylesheet loads or if a host theme resets the plugin styles. */
	position: relative;
	isolation: isolate;
}

.mkdocs-carousel-track:not(.slick-initialized) {
	display: grid;
	overflow: hidden;
}

.mkdocs-carousel-track:not(.slick-initialized) > .mkdocs-carousel-slide:not(:first-child) {
	display: none;
}

.mkdocs-carousel-slide {
	box-sizing: border-box;
	min-width: 0;
	height: var(--mkdocs-carousel-height);
	padding-inline: calc(var(--mkdocs-carousel-gap) / 2);
}

.mkdocs-carousel-slide > :first-child {
	margin-block-start: 0;
}

.mkdocs-carousel-slide > :last-child {
	margin-block-end: 0;
}

.mkdocs-carousel-slide :is(img, picture, picture img) {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.mkdocs-carousel-slide :is(img, picture img) {
	height: var(--mkdocs-carousel-height);
	aspect-ratio: var(--mkdocs-carousel-aspect-ratio);
	object-fit: var(--mkdocs-carousel-image-fit);
}

.mkdocs-carousel-slide .mkdocs-image-block,
.mkdocs-carousel-slide .mkdocs-image-figure {
	float: none;
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.mkdocs-carousel-slide > .mkdocs-container {
	margin-block: 0;
}

.mkdocs-carousel .slick-list {
	position: relative;
	z-index: 1;
	margin-inline: calc(var(--mkdocs-carousel-gap) / -2);
	isolation: isolate;
}

.mkdocs-carousel .slick-dots {
	position: relative;
	z-index: 20;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin: var(--mkdocs-carousel-dots-gap) 0 0;
	padding: 0;
	list-style: none;
}

.mkdocs-carousel .slick-dots li {
	width: auto;
	margin: 0;
	padding: 0;
}

.mkdocs-carousel .slick-dots button {
	display: block;
	width: var(--mkdocs-carousel-dot-size);
	height: var(--mkdocs-carousel-dot-size);
	border: 1px solid color-mix(in srgb, var(--mkdocs-carousel-accent) 72%, transparent);
	border-radius: 999px;
	padding: 0;
	background: transparent;
	color: transparent;
	font-size: 0;
	cursor: pointer;
	transition: width 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.mkdocs-carousel .slick-dots .slick-active button {
	width: 1.65rem;
	background: var(--mkdocs-carousel-accent);
}

.mkdocs-carousel .slick-dots button:focus-visible,
.mkdocs-carousel .slick-arrow:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--mkdocs-carousel-accent) 48%, transparent);
	outline-offset: 3px;
}

.mkdocs-carousel .slick-arrow {
	position: absolute;
	inset-block-start: 50%;
	z-index: 30;
	display: grid;
	box-sizing: border-box;
	width: 2.5rem;
	height: 2.5rem;
	place-items: center;
	border: 1px solid var(--mkdocs-carousel-control-border);
	border-radius: 999px;
	margin: 0;
	padding: 0;
	background: var(--mkdocs-carousel-control-background);
	box-shadow: var(--mkdocs-carousel-control-shadow);
	color: transparent;
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
	backdrop-filter: blur(10px);
	-webkit-appearance: none;
	appearance: none;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		box-shadow 160ms ease,
		opacity 160ms ease,
		transform 160ms ease;
}

.mkdocs-carousel .slick-dotted > .slick-arrow {
	/* The dots stay in normal flow. Remove half of their occupied space so the
	   controls remain centered on the slide viewport rather than the full rail. */
	inset-block-start: calc(50% - var(--mkdocs-carousel-dots-center-offset));
}

.mkdocs-carousel .slick-arrow::before {
	content: '';
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 1rem;
	height: 1rem;
	display: block;
	border: 0;
	background: var(--mkdocs-carousel-control-color);
	opacity: 1;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2L11 8L5 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2L11 8L5 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
	pointer-events: none;
}

.mkdocs-carousel .slick-prev {
	inset-inline-start: 0.8rem;
}

.mkdocs-carousel .slick-prev::before {
	transform: translate(-50%, -50%) scaleX(-1);
}

.mkdocs-carousel .slick-next {
	inset-inline-end: 0.8rem;
}

.mkdocs-carousel .slick-next::before {
	transform: translate(-50%, -50%);
}

.mkdocs-carousel .slick-arrow:not(.slick-disabled):hover {
	border-color: var(--mkdocs-carousel-accent);
	background: var(--mkdocs-carousel-control-hover-background);
	box-shadow: 0 0.6rem 1.65rem rgb(0 0 0 / 30%);
	transform: translateY(-50%) scale(1.05);
}

.mkdocs-carousel .slick-arrow:not(.slick-disabled):active {
	transform: translateY(-50%) scale(0.96);
}

.mkdocs-carousel .slick-disabled {
	opacity: 0.38;
	cursor: default;
}

.mkdocs-carousel-unavailable .mkdocs-carousel-track {
	border: 1px solid color-mix(in srgb, var(--mkdocs-carousel-accent) 35%, transparent);
	border-radius: 0.5rem;
	padding: var(--mkdocs-carousel-gap);
	background: color-mix(in srgb, var(--mkdocs-carousel-panel) 92%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.mkdocs-carousel .slick-track,
	.mkdocs-carousel .slick-dots button,
	.mkdocs-carousel .slick-arrow {
		transition-duration: 0.01ms !important;
	}
}

@media (forced-colors: active) {
	.mkdocs-carousel .slick-arrow,
	.mkdocs-carousel .slick-dots button {
		border-color: ButtonText;
	}

	.mkdocs-carousel .slick-arrow::before {
		background: ButtonText;
	}

	.mkdocs-carousel .slick-dots .slick-active button {
		background: Highlight;
	}
}