:root {
	--accent-color: royalblue;
	--accent-color: AccentColor;
	--hilight-color: rgba(from currentcolor r g b / .25);
	--zebra-color: rgba(from currentcolor r g b / .0625);
	scrollbar-color: var(--accent-color) transparent;
	scrollbar-width: auto;
	scroll-behavior: smooth;
	scrollbar-gutter: stable both-edges;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 1.25;
	color-scheme: dark light;
	--background-color: #ddd;
	background-color: var(--background-color);
	color: #222;
	height: 100%;
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: auto min(100%, 80ch) auto;
	grid-template-areas: "gutter-start body gutter-end";
	text-wrap: balanced;
	@media (prefers-color-scheme: dark) {
		--background-color: #222;
		color: #ddd;
	}
	&::before,
	&::after {
		content: "";
		display: block;
	}
}
*,
::before,
::after {
	transition-property: none;
	transition-duration: .2s;
	font: inherit;
}
:target {
	background-color: var(--hilight-color);
}
:focus-visible {
	outline: 2px var(--accent-color) solid;
	outline-offset: 2px;
	border-radius: .25rem;
}
body {
	grid-area: body;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"header"
		"main"
		"footer";
	margin: 0;
	container-type: inline-size;
	background-color: inherit;
	overflow-x: clip;
	> svg {
		display: none;
	}
	> header {
		padding-inline: 1rem;
		position: sticky;
		z-index: 1;
		top: 0;
		background-image: linear-gradient(var(--background-color), transparent);
		&::before,
		&::after {
			content: "";
			inset: 0;
			position: absolute;
			mask-image: linear-gradient(0deg, transparent, #000 1.5rem);
			backdrop-filter: blur(.25rem);
			z-index: -1;
		}
		&::after {
			mask-image: linear-gradient(0deg, transparent, #000 3rem);
			backdrop-filter: blur(.5rem);
		}
	}
	> main {
		margin-inline: 1rem;
		container-type: inline-size;
	}
}
svg {
	display: block;
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: .15rem;
}
a,
button,
details summary:hover,
details:not([open]) summary:focus {
	color: var(--accent-color);
}
button,
details summary {
	cursor: pointer;
}
code {
	line-height: 1em;
}
dt, code {
	font-family: monospace;
	font-weight: 800;
	border-radius: .25rem;
	padding-inline: .25rem;
	&:is(dt) {
		display: flex;
		gap: 1ch;
		flex-wrap: wrap;
		align-items: baseline;
		&:not(:first-child) {
			margin-top: 1lh;
		}
	}
	code {
		font-style: italic;
		opacity: .75;
		font-weight: normal;
	}
}

dd {
	margin-inline: clamp(.25rem, calc(100cqi - 60ch), 4ch) 0;
	code {
		background-color: var(--zebra-color);
	}
}
button {
	appearance: none;
	border: none;
	background: none;
	padding: 0;
	vertical-align: top;
}
.tooltip {
	color: #fff;
	background: lightslategray;
	opacity: 0;
	transition: opacity .3s;
	position: absolute;
	padding: 1rem;
	border-radius: 1rem;
	pointer-events: none;
	filter: drop-shadow(0 2px 4px #0008);
}
details {
	summary {
		display: inline;
	}
	&:not([open]) {
		summary:has(> span) {
			&::after {
				content: "\2026";
			}
			> span {
				display: none;
			}
		}
	}
	&[open] + details-content {
		grid-template-rows: 1fr;
		textarea {
			min-height: 1lh;
			padding-block: 1lh 0;
		}
	}
	+ details-content {
		display: grid;
		grid-template-rows: 0fr;
		overflow: hidden;
		transition-property: grid-template-rows;
	}
}
dd textarea {
	border: none;
	border-radius: .25rem;
	background-position: 0 0;
	background-image: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 1lh,
		var(--zebra-color) 1lh,
		var(--zebra-color) 2lh);
	font-family: monospace;
	display: block;
	field-sizing: content;
	min-height: 0;
	padding-block: 0;
	padding-inline: 4ch;
	max-height: 70dvh;
	resize: none;
	overflow: hidden;
	tab-size: 4ch;
	scrollbar-gutter: stable;
	transition-property:
		min-height,
		padding-block;
	&:focus-visible {
		outline-offset: -2px;
	}
}
h1,
h2 {
	margin-block: 2rem;
	font-weight: bold;
}
h1 {
	text-shadow: var(--background-color) 0 2px 2px;
	font-size: 2rem;
}
h2 {
	margin-block-end: 1rem;
	font-size: 1.5rem;
}
.left {
	display: inline-block;
	transform: rotateY(180deg);
}
footer {
	text-align: center;
}
dt textarea {
	field-sizing: content;
	appearance: none;
	border: none;
	background: transparent;
	resize: none;
	hyphenate-character: "";
	max-width: calc(100cqi - 4ch);
}