#navigation {
	padding: 1.5rem 2em 1.5rem 6em;
	position: fixed; inset: auto 0 0 auto; z-index: 20;
	background: radial-gradient(12em 100% at 100% 100%,
		var(--black) 0% 50%,
		transparent 100%
	);
	pointer-events: none;
	a {
		display: flex; padding: 0; margin: 0;
		flex-flow: column; gap: .5rem; align-items: center;
		color: var(--light); background: none;
		font-size: inherit; line-height: 1.5; font-family: inherit;
		text-decoration: none;
		border: none;
		cursor: pointer; pointer-events: all;
		&:hover { color: var(--white); }
		&:hover img { rotate: 5deg; }
		span { font-weight: 900; font-size: 1rem; }
		img { width: 4em; height: 4em; }
	}
}
main {
	max-width: min(90%, 36em); margin: 6em auto;
	background-color: rgb(from var(--black) r g b / 70%);
	box-shadow: 0 0 2em 2em rgb(from var(--black) r g b / 70%);
	tab-size: 4;
	@media(width < 50em){ tab-size: 2; }

	img[src*="hero"]{ margin: 0 -50%; translate: 50% 0; }
	img {
		display: block; max-width: 100%; height: auto; margin: 3em auto;
		background: var(--white);
		border-image: url("/-/img/border-filled.png?v=TiT8Ucd1") 64 / 32px / 12px round;
	}
	& > a:first-child {
		display: inline-block; padding: .5em 0; margin: 1em 0;
	}
	h1 {
		margin: 1em 0 0;
		font-size: 2.5em;
	}
	h1, h2, h3 {  line-height: 1.2; }
	h2 { margin: 2em 0 0; }
	time {
		display: block; margin: 0 0 2em;
		color: var(--light);
		font-weight: bold;
	}
	pre, code {
		font: bold 1em / 1.5 "DM Mono", monospace;
		letter-spacing: -.15ch;
	}
	code {
		padding-inline: .2em;
		color: var(--light);
	}
	a code { color: var(--link); }
	ul {
		list-style: none;
		padding: 0;
	}
	li {
		padding: 0 0 0 1.5em;
		background: 0 calc(.75em - 8px) / 16px no-repeat url("/-/img/bullet.png?v=PVvLDntM");
	}
	[role="note"]{
		margin: 3em 1.5em;
		position: relative;
		border-image: url("/-/img/border-round.png?v=k8Xedpq2") 24 / 16px / 32px;
		& > :first-child { text-indent: 1.5em; }
		&::before {
			content: "";
			width: 4em; height: 4em;
			position: absolute; inset: -2.5em auto auto -3em;
			background: center / contain no-repeat url("/-/img/info.png?v=wJ+GqutK");
		}
		&.update::before { background-image: url("/-/img/time.png?v=nfauWQi5"); }
		&.thought::before { background-image: url("/-/img/thought.png?v=AiuGJYiW"); }
	}
	pre {
		--dim: var(--light);
		--value: var(--link);
		--keyword: #96c4ff;
		--special: purple;
		--error: red;
		width: 100%; margin: 2em 0;
		overflow-x: clip;
		code { color: var(--white); }
		&.language-yaml {
			code { color: var(--value); }
			.number, .boolean { color: var(--keyword); }
		}
		.keyword { color: var(--keyword); }
		.string, .number, .boolean { color: var(--value); }
		.parameter { font-style: italic; }
		.comment, .punctuation, .operator { color: var(--dim); }
		.key { color: var(--text); }
	}
	pre code {
		display: block; width: 100%;
		overflow-x: auto;
	}
}