main {
	position: relative;
}

#toc {
	font-size: 75%;

	& > ul {
		padding: 0;
		list-style: none;
	}

	@media (min-width: 1480px) {
		--_gap: 1rem;
		box-sizing: border-box;
		/* Stretch out #toc in the margin, so it can be a container for the sticky list. */
		position: absolute;
		right: 100%;
		height: 100%;
		padding-inline: var(--_gap);
		max-width: calc(var(--page-margin) - 2 * var(--_gap));
		width: max-content;

		& > ul {
			position: sticky;
			top: var(--_gap);
		}
	}


	@media (max-width: 1480px), (max-height: 30rem) {
		/* Hide all but next, current, prev */
		& > ul {
			& > li:not(.next):not(.current):not(.previous) {
				display: none;
			}
		}
	}

	& ul ul {
		list-style: square
	}

	& .previous,
	& .current,
	& .next {
		&[aria-label]::before {
			content: attr(aria-label) ": ";
			font-size: 85%;
			font-weight: 600;
			opacity: .5;
			text-transform: uppercase;
		}
	}
}

#space-tree {
	width: 100%;

	svg {
		width: 100%;
		overflow: visible;
	}



	.node text {
		font-weight: 500;
		font-size: 44px !important;
	}

	.root text {
		font-weight: bold;
		font-size: 66px !important;
		translate: 0 -10px;
	}
}

.color-space {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 0 1em;
	margin: 1em 0;

	.alias-of {
		font-style: italic;
	}

	> * {
		grid-column: 1;
	}

	> header {
		grid-column: 1 / span 2;
		display: flex;
		align-items: center;

		h2 {
			margin: 0 auto 0 0;

			code {
				font-family: var(--font-monospace);
				font-weight: bold;
				font-size: 70%;

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

		& .file {
			font-style: italic;
			opacity: .6;
			filter: saturate(.1);
		}
	}

	.description {
		margin: .5em 0;
	}

	dl {
		align-self: start;
		min-width: 10em;
		margin: 0;
		grid-row: 2 / span 3;
		grid-column: 2;
		background: hsl(var(--gray) 95%);
		border-radius: .2em;
		padding: 1em;

		> div:not(:first-child) {
			margin-block-start: 1em;
		}

		dt {
			font-size: 80%;
		}

		dd {
			grid-column: 1;
		}
	}
}