:root {
	--_ratio: 1.618034;
	--_space-rel: 0.5rem;
	--_space-abs: 8px;
	--_hue: 175deg;
	--_fg-chad: oklch(25% 20% var(--_hue));
	--_fg-normie: oklch(30% 5% var(--_hue));
	--_fg-noob: oklch(45% 2% var(--_hue));
	--_fg-clown: oklch(44% 33% var(--_hue));
	--_bg: oklch(99% 0% var(--_hue));
	--_surface: oklch(98% 1% var(--_hue) / 50%);
	--_separator: oklch(60% 15% var(--_hue) / 50%);
	--_font-sans: "Atkinson Hyperlegible Next", sans-serif;
	--_font-serif: "PT Serif", serif;
	--_font-mono: "Monaspace Neon", monospace;

	@media (prefers-color-scheme: dark) {
		--_fg-chad: oklch(100% 1% var(--_hue));
		--_fg-normie: oklch(100% 0% var(--_hue) / 95%);
		--_fg-noob: oklch(100% 0% var(--_hue) / 80%);
		--_fg-clown: oklch(87% 20% var(--_hue));
		--_bg: oklch(20% 0.5% var(--_hue));
		--_surface: oklch(22% 1% var(--_hue) / 50%);
		--_separator: oklch(55% 10% var(--_hue) / 50%);
	}
}

html {
	font-family: var(--_font-sans);
	color: var(--_fg-normie);
}

[lang="ja"] {
	--_font-sans:
		"Atkinson Hyperlegible Next",
		"Noto Sans JP",
		"Noto Sans CJK JP",
		"Noto Sans",
		sans-serif;
	--_font-serif:
		"PT Serif",
		"Hiragino Mincho ProN W3",
		"ヒラギノ明朝 ProN W3",
		"Hiragino Mincho ProN",
		"游明朝",
		"YuMincho",
		serif;
}

body {
	margin: 0;
	line-height: 1.5;
	display: grid;
	grid-template-columns: minmax(0, 100%);
	grid-template-areas:
		"nav"
		"header"
		"toc"
		"main"
		"footer";

	background-color: var(--_bg);

	& > iframe {
		grid-area: nav;
		position: sticky;
		top: 0;
		border: 0;
		width: 100%;
		height: 100dvh;

		outline: 0;
	}

	& > aside {
		grid-area: nav;
	}

	& > header {
		grid-area: header;
	}

	& > main {
		grid-area: main;
	}

	& > footer {
		grid-area: footer;
	}

	& > .toc {
		grid-area: toc;
	}

	& a,
	& p > code {
		color: var(--_fg-clown);
	}
}

*,
::before,
::after {
	box-sizing: border-box;
}

code {
	font-family: var(--_font-mono);
	font-size: 0.9em;
}

:where(header, main, footer, aside, .toc) {
	padding: 0 var(--_space-abs);

	& h1,
	& h2,
	& h3,
	& h4,
	& h5,
	& h6 {
		font-family: var(--_font-serif);
		font-weight: 700;
		margin: calc(var(--_space-rel) * pow(var(--_ratio), 3)) 0;

		color: var(--_fg-chad);
	}

	& h1 {
		font-size: 2rem;
	}
}

main {
	overflow-x: hidden;

	& > *,
	& p {
		margin: calc(var(--_space-rel) * pow(var(--_ratio), 2)) 0;
	}

	& h2 {
		font-size: 1.8rem;
		margin-block-start: calc(var(--_space-rel) * pow(var(--_ratio), 5));
	}

	& h3 {
		font-size: 1.4rem;
		margin-block-start: calc(var(--_space-rel) * pow(var(--_ratio), 4));
	}

	& h4 {
		font-size: 1rem;
		margin-block-start: calc(var(--_space-rel) * pow(var(--_ratio), 4));
	}

	& h5 {
		font-size: 0.8rem;
		margin-block-start: calc(var(--_space-rel) * pow(var(--_ratio), 3));
	}

	& h6 {
		font-size: 0.8rem;
		font-weight: 400;
		margin-block-start: calc(var(--_space-rel) * pow(var(--_ratio), 3));
	}

	& > :first-child {
		margin-block-start: calc(var(--_space-rel) * pow(var(--_ratio), 3));
	}

	& p > code {
		margin-inline: 0.4em;
	}

	& img {
		max-width: 100%;
		height: auto;

		border-radius: calc(var(--_space-abs) * pow(var(--_ratio), -1));
	}

	& blockquote {
		border-inline-start: calc(var(--_space-rel) * pow(var(--_ratio), -1)) solid var(--_fg-noob);
		padding-inline-start: calc(var(--_space-rel) * pow(var(--_ratio), 1));
		font-style: italic;
	}

	& pre {
		padding: calc(var(--_space-abs) * pow(var(--_ratio), 1));
		border: var(--_separator) 1px solid;
		width: 100%;

		background-color: var(--_surface);
		border-radius: calc(var(--_space-abs) * pow(var(--_ratio), -1));
		overflow-x: auto;
	}

	& hr {
		margin: calc(var(--_space-rel) * pow(var(--_ratio), 3)) 0;
		border: none;
		border-top: var(--_separator) 1px solid;
	}
}

header {
	display: flex;
	flex-direction: column;
	align-items: end;
	padding-block-end: calc(var(--_space-rel) * pow(var(--_ratio), 2));
	margin-block-end: calc(var(--_space-rel) * pow(var(--_ratio), 3));
	border-block-end: 1px solid var(--_separator);

	text-align: end;

	& .title,
	& .subtitle {
		align-self: center;
		text-align: center;
	}
}

aside {
	position: sticky;
	top: 0;
	align-self: start;
	padding: var(--_space-abs) calc(var(--_space-abs) * pow(var(--_ratio), 1));
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 -1px 3px var(--_separator);

	background-color: var(--_bg);
	z-index: 69;

	& > a {
		display: flex;
		align-items: center;
		gap: calc(var(--_space-rel) * pow(var(--_ratio), -1));
		font-weight: 700;

		color: var(--_fg-chad);
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}

		& img {
			width: 1.6rem;
			aspect-ratio: 1 / 1;
		}
	}

	& > ul {
		margin: 0;
		list-style: none;
		display: flex;
		gap: calc(var(--_space-abs) * pow(var(--_ratio), 0))
			calc(var(--_space-abs) * pow(var(--_ratio), 1));
		font-size: 0.9rem;
	}
}

footer {
	margin-block-start: calc(var(--_space-abs) * pow(var(--_ratio), 4));
	border-block-start: 1px solid var(--_separator);
	font-size: 0.9rem;

	color: var(--_fg-noob);
	text-align: end;
}

.subtitle {
	color: var(--_fg-noob);
	font-style: italic;
	margin-block-start: 0;
}

.metadata {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0 calc(var(--_space-rel) * pow(var(--_ratio), 1));
	align-items: center;

	color: var(--_fg-noob);

	& dt {
		font-size: 0.85rem;
	}

	& dd {
		font-size: 0.9rem;
		margin: 0;
	}
}

.toc {
	& ul {
		display: flex;
		flex-direction: column;
		padding: 0;

		list-style: none;

		& ul {
			padding-inline-start: calc(var(--_space-rel) * pow(var(--_ratio), 1));
			border-inline-start: calc(var(--_space-rel) * pow(var(--_ratio), -3)) solid var(--_separator);
		}
	}

	& li {
		margin: calc(var(--_space-rel) * pow(var(--_ratio), -2)) 0;
	}

	& > ul > li {
		margin: calc(var(--_space-rel) * pow(var(--_ratio), -1)) 0;
	}
}

.note {
	padding: calc(var(--_space-abs) * pow(var(--_ratio), 1));
	border: var(--_separator) 1px solid;

	border-radius: calc(var(--_space-abs) * pow(var(--_ratio), -1));

	& p {
		margin: 0;
	}

	& .title {
		font-style: italic;
		margin-bottom: calc(var(--_space-rel) * pow(var(--_ratio), 1));
	}
}

.sourceCode {
	& .kw,
	& .st,
	& .ch,
	& .im,
	& .cf {
		color: var(--_fg-clown);
	}

	& .kw,
	& .dt,
	& .at,
	& .cf,
	& .im {
		font-weight: 700;
	}

	& .at,
	& .bu,
	& .pp,
	& .fu {
		color: var(--_fg-chad);
	}

	& .op,
	& .co {
		color: var(--_fg-noob);
	}

	& .co {
		font-style: italic;
	}
}

.sourceCode.diff {
	& .st {
		color: oklch(40% 40% 0deg);
		font-weight: 700;
	}

	& .va {
		color: oklch(30% 30% 180deg);
		font-weight: 700;
	}

	@media (prefers-color-scheme: dark) {
		& .st {
			color: oklch(85% 30% 0deg);
		}

		& .va {
			color: oklch(85% 20% 180deg);
		}
	}
}

.footnotes > ol {
	font-size: 0.9rem;
	margin: 0;
	padding: 0;
	padding-inline-start: 1.2em;

	& p {
		margin: calc(var(--_space-rel) * pow(var(--_ratio), 0)) 0;
	}
}

@media (min-width: 80rem) {
	body {
		grid-template-columns: minmax(0, 1fr) minmax(60rem, 1fr);
		grid-template-areas: "nav nav" "header header" "toc main" "toc footer";
		gap: 0 calc(var(--_space-rel) * pow(var(--_ratio), 2));
	}

	main > :first-child {
		margin-block-start: calc(var(--_space-rel) * pow(var(--_ratio), 1));
	}

	.toc {
		position: sticky;
		top: calc(var(--_space-rel) * pow(var(--_ratio), 3));
		align-self: start;
		padding: 0 calc(var(--_space-rel) * pow(var(--_ratio), 2));
		border-inline-end: 1px solid var(--_surface);

		overflow-y: auto;

		& h2 {
			font-size: 1rem;
			margin: 0;
			margin-block-start: calc(var(--_space-rel) * pow(var(--_ratio), 2));
		}

		& > ul {
			display: inline-flex;
			margin: calc(var(--_space-rel) * pow(var(--_ratio), 1)) 0;
		}

		& ul {
			font-size: 0.9rem;
		}
	}
}

@media (min-width: 100rem) {
	body {
		grid-template-columns: minmax(0, 1fr) minmax(60rem, 1fr) minmax(0, 1fr);
		grid-template-areas: ". header ." "nav main toc" "nav footer toc";
	}

	.toc {
		top: 0;
		padding: 0 calc(var(--_space-rel) * pow(var(--_ratio), 3));
		border-inline-end: none;
		border-inline-start: 1px solid var(--_surface);

		text-align: start;
	}

	aside {
		justify-self: end;
		padding: 0 calc(var(--_space-rel) * pow(var(--_ratio), 3));
		padding-block-start: calc(var(--_space-rel) * pow(var(--_ratio), 2));
		border-inline-end: 1px solid var(--_surface);
		display: block;

		box-shadow: none;
		text-align: end;

		& > a {
			display: inline-flex;
		}
	}
}