/* @font-face {
	font-family: 'FF Meta VF';
	src: url('https://variablefonts.monotype.com/MetaVariableDemo-Set.woff2') format('woff2');
	font-display: swap;
	font-style: normal italic;
	font-weight: 100 900;
} */
@font-face {
	/* Kindly provided by Black[Foundry] */
	font-family: 'Drive';
	src: url('DriveVariable.ttf');
	font-weight: 1 999;
}

#intro {
	display: flex;
	align-items: flex-start;
}

.slide.intro.intro,
#cutout-text {
	background: linear-gradient(to right, rgba(0,0,0,.5), transparent 50%),
	            url(img/whisper.jpg) no-repeat left / cover;
}

	.slide.intro::after {
		font-weight: 400;
	}

	.slide.intro h1 {
		display: flex;
		flex-flow: column;
		padding: .5em;
		margin: 0;

		font-size: 350%;
		line-height: .83;
		letter-spacing: -.04em;
		background: white;
		color: black;
		text-transform: uppercase;
	}

	.slide.intro:not(#intro) h1 {
		margin-left: auto;
	}

	#intro h1 {
		mix-blend-mode: screen;
	}

		.slide.intro h1 span:nth-child(1) {
			font-size: 115%;
		}

		.slide.intro h1 span:nth-child(3) {
			font-size: 155%;
		}

		.slide.intro h1 span:nth-child(4) {
			font-size: 70%;
			margin-top: .05em;
		}

	#intro .attribution {
		position: absolute;
		bottom: -.5em;
		color: white;
		font-size: 80%;
		font-weight: 300;
	}

		#intro .attribution a {
			text-decoration: none;
		}
/*
.block,
.blocks div {
	display: flex;
	padding: 1em;
	margin-bottom: 1em;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	line-height: 1.1;
	letter-spacing: -.05em;
	background: white;
}

	.block .block,
	.blocks div .block,
	.blocks div div {
		background: var(--color-magenta);
		margin: 1em;
	} */
/*
@keyframes fall {
	from { transform: translateY(-160vh); }
}

@keyframes pos {
	10% { left: 10vw }
	20% { left: 80vw }
	30% { left: 50vw }
	40% { left: 30vw }
	50% { left: 85vw }
	60% { left: 20vw }
	70% { left: 70vw }
	80% { left: 0vw }
	90% { left: 60vw }
	to { left: 50vw }
}

.future.slide {
	overflow-y: hidden;
}

.future.slide h1::before {
	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="140"><text style="font-size:90px" y="1em">🔮</text></svg>');
	position: absolute;
	bottom: -50vh;
	animation: fall 3s infinite ease-in, pos 30s steps(1) infinite;
	filter: drop-shadow(0 10px 10px rgba(0,0,0,.5));
}

.flipped-emoji {
	display: inline-block;
	transform: scaleX(-1);
} */
#svg-eyes {
	background: hsl(20, 40%, 70%);
	--font-size-multiplier: .8;
}

	#svg-eyes svg {
		width: 90vw;
	}

	#svg-eyes #eye-white {
		fill: white;
	}

	#svg-eyes #iris {
		stroke: hsl(200, 50%, 50%);
		stroke-width: 14;
		fill: black;
	}

	#svg-eyes .second-eye {
		x: 150px;
	}

meter {
	display: inline-block;
	vertical-align: baseline;
}

	meter::-webkit-meter-bar {
		background: transparent;
	}

meter.stars {
	width: 5em;
	height: 1em;
	--background-params: left / auto 100%;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white" fill-opacity=".2">\
		<text style="font-size:90px" y="1em">★</text></svg>') 0 / auto 100%;
}

	meter.stars::-webkit-meter-optimum-value {
		background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white">\
			<text style="font-size:90px" y="1em">★</text></svg>') 0 / auto 100%;
	}

#blending-modes {
	flex-flow: row;
	/* background: radial-gradient(hsl(200, 15%, 20%), hsl(200, 15%, 10%));
	background-size: 53% 100%;
	background-repeat: no-repeat;
	background-color: transparent; */
	background: none;
	--text-color: white;
}

[id=blending-modes] * {
	color: var(--text-color);
}

	#blending-modes .demo {
		--height: 70vh;
		--offset: .25;
		--offset-width: calc(var(--offset) * var(--height));
		--margin: calc(100vh - var(--offset-width) - var(--height));
		--width: calc(100vw - var(--offset-width) - var(--margin));

		position: relative;
		margin: calc(-1 * var(--offset-width)) 0 0 calc(-1 * var(--offset-width));
		font-size: 150%;
	}

	.light-background .background,
	.light-foreground .foreground,
	.light-result     .intersection {
		--text-color: black;
	}

		#blending-modes input {
			background: none;
			border: 0;
			color: var(--text-color);
		}

		#blending-modes .demo > div {
			display: flex;
			flex-flow: column;
			justify-content: flex-start;
			width: var(--width);
			height: var(--height);
		}

		#blending-modes .demo button {
			position: absolute;
			top: 0;
			right: calc(-1 * var(--offset-width));
			padding: 0;
			line-height: 1;
			font-size: calc(.65 * var(--offset-width));
			border: none;
			background: none;
		}

			#blending-modes .demo button:not(:hover) {
				filter: grayscale();
			}

		#blending-modes div.foreground {
			position: absolute;
			top: var(--offset-width);
			left: var(--offset-width);
			justify-content: flex-end;
		}

		#blending-modes div.background {

		}

		#blending-modes .demo .intersection {
			position: relative;
			z-index: 1;
			display: flex;
			flex-flow: row;
			align-items: flex-start;
			margin: auto 0 0 var(--offset-width);
			width: calc(var(--width) - var(--offset-width));
			height: calc(var(--height) - var(--offset-width));
			box-sizing: border-box;
			padding: .3em;
		}

			#blending-modes:not(.light-result) .demo .intersection {
				--text-color: white;
			}

			.intersection select {
				border: none;
				color: var(--text-color);
			}

			.light-result .intersection select {
				background: hsla(0,0%,100%,.5);
			}

			#blending-modes .demo label {
				margin-right: auto;
				color: var(--text-color);
			}

				#blending-modes .demo label span {
					display: block;
					font-size: 60%;
					line-height: 1;
					font-weight: bold;
				}

			#blending-modes .math {
				font-size: 70%;
			}

					#blending-modes .math .num {
						display: inline-block;
						font-weight: bold;
						min-width: 2.6em;
					}

					.math tr:nth-child(1) .num {
						color: hsl(0, 100%, 80%);
					}

					.math tr:nth-child(2) .num {
						color: hsl(90, 100%, 80%);
					}

					.math tr:nth-child(3) .num {
						color: hsl(210, 100%, 80%);
					}

					.light-result .math tr:nth-child(1) .num {
						color: hsl(0, 100%, 40%);
					}

					.light-result .math tr:nth-child(2) .num {
						color: hsl(90, 100%, 30%);
					}

					.light-result .math tr:nth-child(3) .num {
						color: hsl(210, 100%, 45%);
					}

				#blending-modes .math .result {

				}

.takeaway.slide {

}

	.takeaway.slide h1,
	.takeaway.slide ul {
		font-weight: 300;
		font-size: 200%;
		line-height: 1.2;
		list-style: none;
		text-align: center;
	}

	.takeaway.slide ul li {
		padding: .2em 0 0;
	}

	.takeaway.slide ul li + li::before {
		content: "and";
		display: block;
		color: orange;
		text-align: center;
		font-weight: bold;
		font-size: 40%;
		background: linear-gradient(orange, orange) left, linear-gradient(orange, orange) right;
		background-position-y: 55%;
		background-repeat: no-repeat;
		background-size: calc(50% - 3ch) 2px;
		text-transform: uppercase;
	}

		.takeaway.slide h1::before,
		.takeaway.slide ul:first-child::before {
			counter-reset: takeaway var(--takeaway);
			content: "Takeaway #" counter(takeaway);
			display: block;
			width: fit-content;
			padding: .2em .5em;
			margin: 0 auto .5em;
			background: orange;
			font-weight: bold;
			text-transform: uppercase;
			font-size: 60%;
		}

@keyframes pulse {
	to { transform: scale(1.4); }
}
span.heart {
	display: inline-block;
	animation: pulse .2s infinite alternate;
}

/* table {
	border-spacing: 0;
	border-collapse: collapse;
}

	td, th {
		padding: 0 .3em;
	}

	td {
		border: 1px solid rgba(0,0,0,.1);
	}

	td:not(:first-child) {
		border-top: none;
	}

@media (max-width: 800px) {
	tr, td, th, thead {
		display: block;
	}

	table {
		display: flex;
		overflow: hidden;
	}

		tr {
			margin: .2em 0;
		}

		thead {
			--rows: 5;
			--height: calc(1.67em * var(--rows));
			text-shadow: 0 var(--height), 0 calc(var(--height) * 2), 0 calc(var(--height) * 3);
		}

		th {
			text-align: left;
		}
} */

.🦄 {
	font-size: 200%;
}

section.secret {
	counter-increment: secret;
}

#cutout-text div {
	display: flex;
	flex-flow: row;
	margin-right: auto;
	font-size: calc(10vw + 100%);
}

	#cutout-text h1 {
		position: relative;
		width: 2.6em;
		padding: .2em;
		margin: 0;
		text-transform: uppercase;
		white-space: pre-line;
		background: white;
		color: black;
		line-height: .9;
		mix-blend-mode: screen;
		font-size: 100%;
	}

		#cutout-text div::before {
			content: counter(secret);
			display: flex;
			align-items: center;
			padding: 0 .02em .03em .05em;
			background: black;
			color: white;
			mix-blend-mode: multiply;
			font-weight: bold;
			font-size: 185%;
			line-height: .5;
		}

		#cutout-text h1::first-line {
			font-size: 60%;
		}

@keyframes rainbow-bg {
	from, to {
		background-color: hsl(0, 100%, 90%);
	}

	20% {
		background-color: hsl(50, 100%, 80%);
	}

	40% {
		background-color: hsl(80, 100%, 80%);
	}

	60% {
		background-color: hsl(180, 80%, 80%);
	}

	80% {
		background-color: hsl(320, 80%, 80%);
	}
}

#character-images {
	--tile: 300px;
	--tile-y: calc(.7 * var(--tile));
	--no2: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">\
		<text style="font: bold 90px/1 Helvetica Neue, sans-serif" y=".8em" fill-opacity=".5">№2</text></svg>');
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">\
		<text font-size="100" x=".25em" y=".8em">💩</text></svg>') 0 0,
		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">\
			<text font-size="100" x=".25em" y=".8em">🦄</text></svg>')  calc(var(--tile) / 2) calc(var(--tile-y) / 2),
		var(--no2) calc(var(--tile) / 2) 0,
		var(--no2) 0 calc(var(--tile-y) / 2),
		hsl(40, 100%, 80%);
	background-size: var(--tile) var(--tile-y);
	animation: rainbow-bg 6s linear infinite;
}

	#character-images h1 {
		width: 6em;
		font-weight: bold;
		text-transform: uppercase;
	}

		#character-images h1::first-line {
			font-size: 80%;
		}

#fancy-borders {
	background: transparent;
}

		#fancy-borders h1 {
			width: 5.5em;
			padding: .5em 0 .3em .5em;
			color: black;
			background: gold;
			color: #0ac;
			font-size: 400%;
			text-transform: uppercase;
			text-align: left;
			text-indent: -.05em;
			font-weight: bold;
		}

		#fancy-borders:target h1 {
			background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">\
				<style>\
				@keyframes dashes {\
					to {stroke-dasharray: 200 50}\
				}\
				@keyframes marching-ants {\
					to { stroke-dashoffset: -250px; }\
				}\
				</style>\
				<linearGradient id="g" gradientTransform="rotate(45)">\
					<stop stop-color="gold" />\
					<stop stop-color="%230ac" offset="1" />\
				</linearGradient>\
				<rect width="100%" height="100%" \
				      stroke="url(%23g)" stroke-width="100" stroke-dasharray="200 0" fill="none"\
					  style="animation: dashes 3s 2s forwards, marching-ants 1s 2.1s linear infinite;" \
					   />\
			</svg>');
		}

			#fancy-borders h1::first-line {
				/* rgb(255, 215, 0) rgb(0, 170, 204) */
				color: rgb(128, 193, 102);
				font-size: 152%;
				line-height: .7;
			}

#line-headings {

}

@keyframes noflex {
	from, 50% { flex: 1; }
	to { flex: 0; }
}

	#line-headings h1,
	#line-headings span {
		display: flex;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		text-transform: uppercase;
		padding: 0;
		background: none;
		color: black;
		margin: 0;
	}

	#line-headings span {
		font-size: 800%;
		line-height: 1;
		font-weight: 100;
		color: hsl(330, 100%, 30%);
		letter-spacing: -.1em;
	}

		#line-headings h1::before,
		#line-headings h1::after,
		#line-headings span::before,
		#line-headings span::after {
			content: "";
			background: currentColor;
			height: .1em;
			flex: 1;
			margin: 0 .2em;
			animation: noflex 3s 0s ease-in-out infinite alternate;
		}

		#line-headings span::before,
		#line-headings span::after {
			--stripe: 3px;
			height: .3em;
			background: repeating-linear-gradient(-45deg, currentColor 0 var(--stripe), transparent 0 calc(2 * var(--stripe)));
		}

		#line-headings h1::before,
		#line-headings span::before {
			margin-left: 0;
		}

		#line-headings h1::after {
			margin-right: 0;
			animation-delay: 1.5s;
		}

		#line-headings span::before {
			animation-delay: .5s;
			margin-right: 0;
		}

		#line-headings span::after {
			animation-delay: 2s;
		}

#variable-fonts {
	font-family: Drive, sans-serif;
	justify-content: center;
}

	#variable-fonts div {
		display: flex;
		flex-flow: row;
		font-size: 300%;
		--width: 4.55em;
		--number-width: 2em;
		position: relative;
		left: calc(-.5 * var(--width));
	}

	@keyframes fw {
		from { font-weight: 1;}
		to {font-weight: 999;}
	}

	#variable-fonts div::after {
		content: counter(secret);
		background: red;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 200%;
		line-height: 1;
		min-width: 1em;
		text-align: center;
		animation: 3s fw linear infinite alternate;
	}

	#variable-fonts h1 {
		font: 200 100%/1.2 Drive, sans-serif;
		text-transform: uppercase;
		--offset: calc(var(--width) + var(--number-width));
		box-shadow: var(--offset) 0 white;
		text-shadow: var(--offset) 0 black;
		margin: 0;
		background: black;
		padding: .4em;
	}

		#variable-fonts span {
			display: block;
			font-size: calc(var(--size, 1) * 100%);
			line-height: calc(.9 + .5 * (1 - var(--size, 1)));
			font-weight: calc(495.816 - 295.547 * var(--size, 1));
		}

		#variable-fonts span:nth-child(1) {
			--size: .52;
			/* font-weight: 350; */
		}

		#variable-fonts span:nth-child(2) {
			--size: .44;
			/* font-weight: 370; */
		}

#variable-fonts-demo {
	overflow: hidden;
}

	#variable-fonts-demo:target ~ #regression-calculator {
		display: flex !important;
		left: auto;
		top: auto;
		visibility: visible;
		width: 100vw;
		height: 100vh;
		transform: scale(.5);
		z-index: 100;
		border-top-left-radius: .3em;
		box-shadow: -.1em -.1em .4em rgba(0,0,0,.2);
	}

	#variable-fonts-demo:target ~ #regression-calculator:not(:focus-within):not(:hover) {
		width: 20em;
		height: 3.8em;
		opacity: .5;
		transform: scale(.25);
	}

		#variable-fonts-demo:target ~ #regression-calculator:not(:focus-within):not(:hover) iframe {
			visibility: hidden;
		}

#regression-calculator {
	flex-flow: row;
	align-items: stretch;
	justify-content: stretch;
	padding: 0 0 0 1em;
	transform-origin: bottom right;
}

	#regression-calculator h1 {
		text-transform: none;
		text-align: left;
		color: orange;
		white-space: nowrap;
	}

	#regression-calculator form {
		padding-right: 1em;
	}

	#regression-calculator table input {
		width: 5em;
	}

	#regression-calculator tbody {
		font-size: 120%;
	}

	#regression-calculator td {
		padding: .1em;
	}

	#regression-calculator .query {
		margin-bottom: 0;
	}

		#regression-calculator .query a {
			text-decoration: none;
		}

		#regression-calculator .query input {
			display: block;
			font-size: 60%;
			width: 20em;
			padding: 0 .3em .1em;
			font-weight: 400;
			border: none;
		}

		#regression-calculator .query img {
			display: inline-block;
			vertical-align: -.2em;
			height: 1em;
		}

	#regression-calculator > div {
		flex: 1;
	}

	#regression-calculator iframe {
		width: 62.5%;
		height: 62.5%;
		transform: scale(1.6);
		transform-origin: 0 0;
		/* --height: 640;
		--scale: calc(var(--100vh) / var(--height));
		height: calc(1px * var(--height));
		min-width: calc((100% - 19em) / var(--scale));
		transform: scale(var(--scale));
		transform-origin: top right; */
		border: 0;
	}

	@media (max-width: 1500px) {
		#regression-calculator iframe {
			width: 100%;
			height: 100%;
			transform: none;
		}
	}

	#regression-calculator .mv-add-values {
		display: none;
	}

#responsive-flex {

}

	@keyframes resp-flex {
		from { width: 20em }
		to { width: 10em; }
	}

	#responsive-flex > div {
		display: flex;
		flex-wrap: wrap;
		animation: resp-flex 4s linear infinite alternate;
		font-size: 120%;
	}

	#responsive-flex > div::before {
		content: counter(secret);
		background: red;
		font-size: 300%;
		line-height: 1;
		padding: .2em;
		flex: 1;
	}

	#responsive-flex h1 {
		padding: .5em;
		margin: 0;
		background: black;
		flex: 9999;
	}


.credits {
	display: flex;
	--color: hsl(80, 80%, 40%);
	background: var(--color);
	font-weight: bold;
	flex-shrink: 0;
	font-size: 90%;
	line-height: 1;
	color: white;
	box-shadow: 0 .05em .2em rgba(0,0,0,.2);
}

	.credits::before {
		content: "Credits";
		display: flex;
		align-items: center;
		background: white;
		color: var(--color);
		padding: 0 .5em;
		text-transform: uppercase;
		font-size: 80%;
	}

	.credits p {
		margin: 0;
		padding: .4em .5em;
		flex: 1;
		align-self: center;
	}

#grid-auto-flow {
	padding: 0;
}

	#grid-auto-flow h1 {
		padding: 0;
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: repeat(7, 1fr);
		grid-auto-flow: dense;
		width: 99vmin;
		height: 99vmin;
		grid-gap: 1px;
		font-weight: 300;
	}

		#grid-auto-flow h1::before {
			content: "{" counter(secret) "}";
			grid-column-end: span 3;
			grid-row-end: span 2;
			font-size: 250%;
			padding-bottom: .1em;
		}

		#grid-auto-flow h1::before,
		#grid-auto-flow [data-letter],
		#grid-auto-flow .note,
		#grid-auto-flow h1::after {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		#grid-auto-flow h1 .separate-letters {
			display: contents;
			text-transform: uppercase;
			color: black
		}

			#grid-auto-flow [data-letter] {
				background: var(--color-green);
				font-weight: bold;
			}

			@supports (translate: 0) {
				@keyframes tetris {
					from { translate: 0 -100vh; }
					to { translate: 0}
				}

				#grid-auto-flow:target [data-letter],
				#grid-auto-flow:target .note,
				#grid-auto-flow:target h1::after {
					animation: tetris .2s calc(var(--index) * .15s) both;
				}
			}

			#grid-auto-flow [data-letter]:nth-child(odd) {
				background: var(--color-aqua);
			}

			#grid-auto-flow [data-letter]:nth-child(3n) {
				background: var(--color-magenta);
			}

			#grid-auto-flow [data-letter]:nth-child(5n) {
				background: var(--color-orange);
			}

			#grid-auto-flow [data-letter]:nth-child(7n) {
				background: hsl(170, 50%, 50%);
			}

			#grid-auto-flow .separate-letters [data-letter="-"] {
				grid-column-end: span 4;
				text-align: center;
				background: gold;
			}

			#grid-auto-flow [data-letter=" "] {
				display: none;
			}

		#grid-auto-flow h1 .note {
			grid-row-end: span 3;
			grid-column-end: span 5;
			padding: .3em .5em .2em;
			background: linear-gradient(gray, gray),
			 url(img/cat8.jpg) no-repeat center / cover;
			background-blend-mode: screen, normal;
			font-size: 120%;
			line-height: .8;
			color: black;
			--index: 19;
		}

		#grid-auto-flow h1::after {
			content: "";
			background: url(img/cat6.jpg) no-repeat 40% 50% / cover;
			grid-column-end: span 2;
			grid-row-end: span 4;
			--index: 20;
		}

#column-sorting {
	background: white;
	--division: 50;
}

	#column-sorting .creatures {
		font-size: 120%;
	}

	#column-sorting article {
		border: 1px solid;
		border-color: hsl(var(--color), calc(var(--lightness, 90%) - 20%));
		background: hsl(var(--color), var(--lightness, 90%));
		padding: .2em .5em;
	}

	#column-sorting .cat.male {
		--color: 200, 100%;
	}

	#column-sorting .cat.female {
		--color: 350, 100%;
	}

		#column-sorting .cat::before {
			content: "😻 "
		}

	#column-sorting .hooman {
		--color: 80, 60%;
		--lightness: 80%;
	}

		#column-sorting .hooman.male::before {
			content: "👨🏼 ";
		}

		#column-sorting .hooman.female::before {
			content: "👩🏽 "
		}

#accessible-menus {
	justify-content: flex-start;
}

	#accessible-menus h1 {
		display: flex;
		padding: 0;
		line-height: 1.5;
		transform: translateY(-2em);
		letter-spacing: -.02em;
	}

		#accessible-menus h1::before {
			content: counter(secret);
			background: white;
			color: black;
			padding: 0 .5em;
		}

		#accessible-menus h1 div {
			position: relative;
		}

		#accessible-menus h1 span {
			display: block;
			padding: 0 .4em;
		}

		@keyframes focus {
			16% {
				outline: auto 10px rgb(59, 153, 252);
				background-color: hsla(0, 100%, 50%, .3);
			}

			32%, to {
				outline: none;
				background-color: transparent;
			}
		}

		@keyframes show-menu {
			from, 62% {
				visibility: visible;
			}
			64%, to {
				visibility: hidden;
			}
		}

		#accessible-menus:target h1 span,
		#accessible-menus:target h1 li {
			--period: 1s;
			animation: focus 6s calc(var(--index) * 1s) infinite step-start;
		}

		#accessible-menus h1 div:last-child {
			background: hsl(350, 100%, 50%);
		}

		#accessible-menus h1 ul {
			position: absolute;
			z-index: -1;
			display: flex;
			flex-flow: column;
			width: 100%;
			list-style: none;
			padding: 0;
			margin: 0;
			background: var(--color-orange);
			font-weight: 300;
			visibility: hidden;
			letter-spacing: normal;
		}

		#accessible-menus:target h1 ul {
			animation: show-menu 6s 2.25s infinite step-start;
		}

		#accessible-menus h1 li {
			flex: 1;
			position: relative;
		}

#accessible-menus + .demo.slide {
	padding: 0;
}

	#accessible-menus + .demo.slide .editor-container {
		margin: 0;
	}

	#accessible-menus + .demo.slide div[data-edit] {
		justify-content: flex-start;
	}

#pie-charts {
	background: url(img/pies.png);
}

	#pie-charts::before {
		content: counter(secret);
		position: absolute;
		top: 20vh;
		left: 20vw;
		background: white;
		color: black;
		font-size: 300%;
		border-radius: 50%;
		padding: .1em .6em;
		font-weight: bold;
	}

	#pie-charts h1 {
		max-width: 4em;
		padding: 1em 1.2em;
		text-transform: uppercase;
		border-radius: 50%;
		font-size: 12vh;
	}

		#pie-charts h1::first-line {
			font-size: 310%;
			line-height: 1;
			font-weight: 300;
		}

.runnable.slide button.run {
	background: var(--color-green);
	color: white;
	font-weight: bold;
	letter-spacing: -.02em;
	border-radius: .1em;
	padding: 0 .5em;
	border: none;
}

	.runnable.slide button.run::before {
		content: "▸ "
	}

	.runnable.slide button.run:active {
		background-image: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.2));
	}

section.history .slide {
	perspective: 100vw;
}

	.slide-info {
		position: relative;
		width: calc(100% - 1em);
		height: calc(100% - 1em);
		transform-style: preserve-3d;
		transition: transform 1s ease-in-out;
		will-change: transform;
	}

	[data-step] .slide-info {
		transform: rotateY(180deg);
	}

	.slide-info > div {
		backface-visibility: hidden;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		position: absolute;
		top: 0; left: 0;
		border-radius: 8px;
		/* filter: drop-shadow(.2em .2em .5em rgba(0,0,0,.6)); */
		box-shadow: .2em .2em 1em rgba(0,0,0,.3);
	}

	.slide-cover {
		background: var(--image) bottom / cover;
		display: flex;
	}

	.slide-content {
		transform: rotateY(180deg);
		background: var(--image) bottom / cover, hsl(0,0%,10%);
		background-blend-mode: multiply;
	}

section.history {}

	section.history h1:only-child {
		background: black;
		width: auto;
		padding: .2em .5em;
		margin: -.5em auto auto;
		border-radius: .1em;
		font-size: 200%;
		background: var(--color-aqua);
		font-weight: bold;
		letter-spacing: -.03em;
	}

	section.history ol {
		display: grid;
		grid-template-columns: auto auto;
		grid-gap: .4em;
		margin: 0;
		padding: 1em;
		height: 100%;
		box-sizing: border-box;
		/* backdrop-filter: blur(10px); */
	}

	section.history li {
		margin-left: 1em;
	}

	section.history .note::before {
		content: 'with ';
	}

#variable-fonts-demo {
	overflow: hidden;
}

#regression {
	background: white;
	overflow: hidden;
	padding: 10vmin;
}

	#regression svg {
		border: .1em solid black;
		border-top-width: 0;
		border-right-width: 0;
		height: 100%;
		fill: none;
	}

		#regression circle {
			fill: red;
			r: 5px;
		}

			@keyframes show-circle {
				from {
					r: 0;
				}
			}

			#regression:target circle {
				animation: show-circle .5s calc(var(--index, 0) * .5s) cubic-bezier(.17,.7,.5,2) both;
			}

		#regression path {
			stroke: var(--color);
			stroke-width: 4px;
			opacity: 1;
			stroke-dasharray: var(--length) var(--length);
			stroke-dashoffset: var(--length);
		}

		#regression .linear {
			--color: hsl(80, 80%, 40%);
		}

		#regression .quadratic {
			--color: hsl(210, 90%, 50%);
		}

		#regression text {
			fill: var(--color);
			opacity: 0;
		}

		#regression .label {
			font-size: 50%;
			text-transform: uppercase;
			font-weight: bold;
		}

		#regression .var {
			font-weight: normal;
		}

		#regression path.linear.current ~ text.linear,
		#regression path.quadratic.current ~ text.quadratic {
			transition: .5s .6s opacity;
			opacity: 1;
		}

		#regression path.current {
			stroke-dashoffset: 0;
			transition: stroke-dashoffset .5s;
		}

#rfc-3986 {
	background: white;
	overflow: hidden;
}

	#rfc-3986 iframe {
		position: absolute;
		top: 0; left: 0; bottom: 0;
		border: none;
		width: 700px;
		height: 100%;
		overflow: hidden;
		transform-origin: top left;
	}

	#rfc-3986:target iframe {
		transition: 1s 1s transform;
		transform: scale(2);
	}

	#rfc-3986::before {
		content: "";
		position: absolute;
		top: 175px;
		left: 152px;
		width: 950px;
		height: 190px;
		background: yellow;
		mix-blend-mode: multiply;
		transition: 1s 2s opacity;
	}

	#rfc-3986:not(:target)::before {
		opacity: 0;
	}

	#rfc-3986 h1 {
		background: black;
		margin-right: 1em;
		margin-left: auto;
		padding: .5em;
		line-height: 1;
	}

		#rfc-3986 h1 div:nth-child(2) {
			font-size: 109%;
		}

#display-contents h1 {
	display: grid;
	position: relative;
	grid-template-columns: repeat(10, auto);
	grid-template-rows: repeat(2, 1fr);
	grid-gap: .5em;
	text-transform: uppercase;
	font-size: 5vw;
}

	#display-contents h1::before {
		content: counter(secret);
		position: absolute;
		bottom: 100%;
		color: black;
		font-size: 300%;
		left: 50%;
		transform: translateX(-50%);
		line-height: .7;
		letter-spacing: -.05em;
	}

	#display-contents h1 .separate-letters {
		display: contents;
	}

		#display-contents h1 .separate-letters::before {
			content: "";
			position: absolute;
			top: .3em;
			left: .4em;
			right: .4em;
			bottom: 1.95em;
			background: url('data:image/svg+xml,\
	<svg xmlns="http://www.w3.org/2000/svg">\
		<style>@keyframes marching-ants { to { stroke-dashoffset: -15px}}</style>\
	<rect width="100%" height="100%" style="stroke: gray; stroke-width: 4px; stroke-dasharray: 10px 5px; fill: none; animation: marching-ants 1s linear infinite" />\
	</svg>');
		}

		#display-contents h1 .separate-letters span {
			padding: 0 .2em;
			background: white;
			color: black;
		}

	#display-contents h1 div:nth-child(n + 2) {
		grid-column-end: span 5;
		background: var(--color-magenta);
	}

.secret .slide:last-child::before {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
	padding: 5px;
	background: rgba(200, 0, 0, .5);
}

#blend-playground {
	flex-flow: row;
	align-items: stretch;
	justify-content: stretch;
	padding: 0;
	background: none;
	--stops: black 0, black 10%,
		white 0, white 20%,
		gray 0, gray 30%,
		red 0, red 40%,
		lime 0, lime 50%,
		blue 0, blue 60%,
		yellow 0, yellow 70%,
		aqua 0, aqua 80%,
		fuchsia 0, fuchsia 90%,
		yellowgreen 0;
}

	#blend-playground .square {
		--size: 80vmin;
		width: var(--size);
		height: var(--size);
	}

	#blend-playground .backdrop {
		padding-top: calc(var(--size) / 10);
		margin-left: calc(var(--size) / 10);
		margin-top: 1em;
		background: linear-gradient(to right, var(--stops));
	}

	#blend-playground .foreground {
		margin-left: calc(var(--size) / -10);
		width: calc(11 * var(--size) / 10);
		background: linear-gradient(var(--stops));
	}

	#blend-playground div.foreground {
		mix-blend-mode: var(--blend-mode);
	}

	#blend-playground select {
		display: block;
		width: 100%;
		height: calc(100vh - 5em);
		background: hsla(0,0%,100%,.3);
	}

	#blend-playground .options {
		padding: 1em;
		margin-right: 2em;
		background: var(--light1);
	}

	#blend-playground h1 {
		display: flex;
		align-items: center;
		margin-top: 0;
	}

	#blend-playground h1 .foreground,
	#blend-playground h1 .backdrop {
		display: inline-block;
		width: 2em;
		height: 2em;
		margin: 0 .2em;
		padding: 0;
	}