
	aside.svelte-1me91xs {
		width: 100%;
		border-left: solid 1px var(--vats-topbar-bordercolor);
		padding: 2rem 0;
		font-weight: 300;

		& > div:where(.svelte-1me91xs) {
			padding: 0rem 2rem 2rem;
		}

		& > ul:where(.svelte-1me91xs) {
			list-style: none;

			padding: 0;
    		font-style: normal;

			li:where(.svelte-1me91xs) {
				padding: 0.25rem 0;
				color: var(--vats-text2);
				font-size: var(--vats-text-s);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis
			}
		}

		.selected:where(.svelte-1me91xs) {
			border-left: 2px solid var(--vats-coloredtext);
			background-color: var(--vats-menu-background);
		}

		a:where(.svelte-1me91xs) {
			background-color: antiquewhite;
			text-decoration: none;
		}

		#h1:where(.svelte-1me91xs),
		#h2:where(.svelte-1me91xs) {
			color: var(--vats-text2);
			padding-left: 2rem;
			font-weight: 500;
		}
		#h3:where(.svelte-1me91xs),
		#h4:where(.svelte-1me91xs) {
			padding-left: 3rem;
		}

		#h4:where(.svelte-1me91xs) {
			text-transform: lowercase;
		}
	}

	main.svelte-4e2he8 {
		width: 100%;
		position: relative;

		div:where(.svelte-4e2he8) {
			display: flex;
			flex-direction: column;
			top: 0;

			@media (min-width: 1024px) {
				.lg-hidden:where(.svelte-4e2he8) {
					display: none;
				}
			}
		}

		.button-bar:where(.svelte-4e2he8) {
			display: flex;
			flex-direction: row;
			z-index: 10;
			top: 0;
			position: sticky;
			background-color: var(--vats-topbar-background);
			border-bottom: solid 1px var(--vats-topbar-bordercolor);
			height: var(--vats-buttonbar-height);
			align-items: center;
			padding: 0 2rem;
			gap: 1.5rem;

			div:where(.svelte-4e2he8) {
				color: var(--vats-coloredtext);
				font: 600 var(--vats-text-m) var(--vats-font);
			}
		}

		.page:where(.svelte-4e2he8) {
			flex-grow: 1;
			width: 100%;
			overflow-x: scroll;
			scrollbar-width: none;
		}
	}

	.menu.svelte-4e2he8 {
		display: none;
	}

	#top-bar-menu.menu.show {
		display: block;
		opacity: 1;
		height: 100svh;
		width: 100vw;
		max-height: 100svh;
		z-index: 50;
		inset: 0;
		position: fixed;
		background-color: var(--vats-menu-background);
	}

	.side-bar.svelte-4e2he8 {
		bottom: 0;
		z-index: 50;
		width: 0;
		height: 0;
		visibility: hidden;
	}

	.side-bar.show {
		background-color: lightskyblue;
		visibility: visible;
		width: 75%;
		height: 100svh;
		top: 0;
		position: fixed;
		z-index: 60;

		@media (min-width: 640px) {
			width: 50%;
		}

		@media (min-width: 768px) {
			width: 33%;
		}
	}

	.backdrop-blur.show {
		backdrop-filter: blur(4px);
		background-color: hsl(var(--vats-background-alternative) / 0.8);
		height: 100svh;
		width: 100%;
		z-index: 50;
		position: fixed;
	}

	@media (min-width: 1024px) {
		.lg-hidden.svelte-4e2he8 {
			display: none;
		}

		.lg-sticky.svelte-4e2he8 {
			position: sticky;
		}

		.lg-mix.svelte-4e2he8 {
			top: var(--vats-header-height);
			height: calc(100svh - var(--vats-header-height));
			z-index: 40;
			left: 0;
			width: 420px;
			visibility: visible;
			overflow-y: auto;
			position: sticky;
		}
	}

	article.svelte-4e2he8 {
		padding: var(--vats-page-padding-top) 1.5rem 2rem 1.5rem;
	}

	.no-padding.svelte-4e2he8 {
		padding: 0;
	}

	@media (min-width: 600px) {
		.s-padding.svelte-4e2he8 {
			padding-left: 5rem;
		}
	}

	.grid.svelte-4e2he8 {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 1rem;
		display: grid;
		position: relative;
	}

	.content.svelte-4e2he8 {
		grid-column: span 12 / span 12;
	}

	@media (min-width: 768px) {
		.md-fullgrid.svelte-4e2he8 {
			grid-column: span 9 / span 9;
		}
	}

	.toc.svelte-4e2he8 {
		position: fixed;
		right: 2rem;
		width: 20rem;
		top: calc(var(--vats-header-height) + var(--vats-buttonbar-height));
		max-height: calc(100svh - var(--vats-header-height) - var(--vats-buttonbar-height));
		height: fit-content;
		overflow-y: auto;
		overflow-x: hidden;
		scrollbar-width: thin;
		display: none;
		grid-column: span 3 / span 3;
		padding: 0rem 0 0 2rem;
	}

	@media (min-width: 768px) {
		.md-block.svelte-4e2he8 {
			display: block;
		}
	}

	@media (min-width: 1024px) {
		.lg-top.svelte-4e2he8 {
			top: calc(var(--vats-header-height));
			max-height: calc(100svh - var(--vats-header-height));
		}
	}
