@font-face {
	font-family: 'webapps';
	font-style: normal;
	font-weight: 400;
	src: url("fonts/webapps.woff2") format('woff2');
}

@font-face {
	font-family: 'Icons';
	font-style: normal;
	font-weight: 400;
	src: url("../shared/fonts/slide-icons.woff2") format('woff2');
}

#intro {
	flex-flow: row-reverse;
	align-items: flex-start;
	background: linear-gradient(to left, rgba(0,0,0,.4) 20%, transparent 50%),
	            url(../html-secrets/img/htmlwallpaper.jpg) right 60% / 140% auto;
	padding: 1em .6em 2em 1em;
}

	#intro .authors {
		align-self: flex-start;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		margin-top: -.3em;
		margin-left: 1em;
		font-weight: bold;
		letter-spacing: -.04em;
		font-size: 60%;
		max-width: 14.2em;
		line-height: 1.3;
	}

		#intro .authors h1 {
			margin: 0;
			padding-bottom: .8em;
			background: linear-gradient(currentColor, currentColor) left bottom / 3em .2em  no-repeat;
			font-weight: 300;
			font-size: 130%;
			letter-spacing: -.01em;
			text-align: left;
		}

		#intro .authors > article {
			margin: .5em 0;
		}

			#intro .authors > article > * {
				display: block;
				text-shadow: 0 0 .4em rgba(0,0,0,.2);
			}

			#intro .authors strong {
				font-size: 130%;
			}

			#intro .authors a {
				font-weight: bold;
			}

			#intro .authors .affiliation {
				opacity: .6;
			}

img.inline{
	height: .9em;
}

#todomvcQ {
	flex-flow: row;
	padding: 3vw;
	background: #F5F5F5;
	color: black;
}

	#todomvcQ table {
		width: 40vw;
		margin: 0 3vw 0 0;
	}

	#todomvcQ caption {
		font-size: 250%;
		line-height: .76;
		color: var(--color-magenta);
	}

	#todomvcQ thead th {
		padding-top: 0;
		padding-bottom: 0;
		font-size: 75%;
		background: var(--color-magenta);
		color: white;
	}

	#todomvcQ table + * {
		float: right;
		max-width: 51vw;
	}

.single-sentence h1 {
	font-weight: 300;
}

#conclusion ul {
	font-size: 150%;
	max-width: 19em;
}

#mavo {
	background: radial-gradient(transparent, rgba(0,0,0,.7)) hsl(200, 15%, 20%);
}

	#mavo h1 {
		background: none;
	}

	#mavo img {
		height: 0;
		filter: drop-shadow(0 0 .2em rgba(0,0,0,.5));
		transition: 1s height cubic-bezier(.31,.23,.5,1.5);
	}

	#mavo:target img {
		height: 2.5em;
	}

h1 .label,
#conclusion .label {
	display: block;
	width: fit-content;
	padding: .2em .5em;
	margin: 0 auto .5em;
	background: orange;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 50%;
}

	#evaluation .label {
		background: hsl(85, 80%, 45%);
	}

#mavo {
	padding: 6em;
}

	#mavo .criteria {
		margin-top: 1em;
	}

#todo-code {

}

	#todo-code:not([data-step]) mark {
		background: transparent;
		box-shadow: none;
		text-shadow: none;
	}

/* EVALUATION */

svg.def {
	display: none;
}

svg.person {
	display: inline-block;
	--size: calc((100vw - var(--padding) * 2) / 10);
	width: var(--size);
	height: var(--size);
	margin-left: -.3em;
	opacity: 0;
	transition: .4s opacity, .4s fill;
}

#science {
	 background: url(img/science.png) white center / auto 80% no-repeat;
	 filter: invert(100%);
}

#subjects {
	display: block;
	--padding: 4vw;
	padding: var(--padding);
	text-align: center;
}

	#subjects:not([data-step]) svg {
		fill: white;
	}

	#subjects[data-step] svg {
		fill: var(--color);
	}

	#subjects:target svg {
		opacity: 1;
	}

	#subjects svg path {
		 stroke: white;
		 stroke-width: 5;
		 stroke-linecap: round;
		 fill: none;
	}

	.other {
		--color: yellowgreen;
	}

	#subjects[data-step]:not([data-step="1"]):not([data-step="2"]) .beginner {
		--color: orange;
	}

	.male {
		--color: hsl(340, 70%, 70%);
	}

	.female {
		--color: hsl(185, 70%, 60%);
	}

	#subjects[data-step]:not([data-step="1"]):not([data-step="2"]) .intermediate {
		--color: #f06;
	}

	.legend,
	.age,
	#subjects .contacts {
		opacity: 0;
		transition: .4s opacity;
	}

		#subjects[data-step] .gender,
		#subjects[data-step]:not([data-step="1"]) .age,
		#subjects[data-step]:not([data-step="1"]):not([data-step="2"]) .skill,
		#subjects[data-step="4"] .contacts {
			opacity: 1;
		}

	.legend > div,
	.legend-square {
		display: inline-block;
		padding: .35em;
		min-width: 1em;
		margin-left: .5em;
		border-radius: .1em;
		background: var(--color);
		line-height: 1;
		font-size: 80%;
		font-weight: bold;
		text-align: center;
	}

	.age, .legend ~ .legend {
		margin: .5em 0;
		padding-top: .5em;
		border-top: 1px solid hsla(0,0%,100%,.2);
	}

		.age strong {
			color: orange;
		}


.stat.slide {
	transition: .5s font-size;
	line-height: 1.2;
}

.stat.slide:target {
	font-size: 350%;
}

	.stat.slide h1 {
		display: block;
		width: fit-content;
		padding: .2em .5em;
		margin: 0 auto .5em;
		background: yellowgreen;
		font-weight: bold;
		text-transform: uppercase;
		font-size: 80%;
	}

	.stat > strong:first-of-type {
		display: block;
		font-size: 400%;
		line-height: 1;
		color: yellowgreen;
		letter-spacing: -.05em;
	}

	.stat > strong .down-arrow {
		display: inline-block;
		font-size: 75%;
		vertical-align: .1em;
	}

footer.slide {
	padding: 1em 0 0;
}

	footer.slide .sections {
		display: flex;
		width: 100%;

	}

		footer.slide .sections > section {
			display: flex;
			flex-flow: column;
			align-items: space-between;
			justify-content: center;
			flex: 1;
			padding: 1em;
			background: hsla(0,0%,100%,.1);
			text-align: left;
		}

		footer.slide .sections > section:first-child {
			background: black;
			--color: #53AEEE;
		}

		footer.slide .sections > section:nth-child(3) {
			background: hsla(0,0%,100%,.2);
			--color: #BC403A;
		}

	footer.slide h1 {
		margin-top: .8em;
		font-weight: 300;
	}

	footer.slide img {
		max-width: 30vw;
		margin: auto;
	}

	footer.slide ul {
		margin: 1em auto 0;
		padding: 0;
		box-sizing: border-box;
		list-style: none;
	}

		footer.slide ul li {
			flex: 1;
			white-space: nowrap;
		}

		footer.slide ul li + li a {
			font-weight: 300;
		}

		footer.slide ul li::before {
			content: var(--icon);
			display: inline-block;
			margin-right: .3em;
			font-family: Icons;
			font-weight: normal;
			color: var(--color, #f06);
		}

		footer.slide ul a {
			text-decoration: none;
			font-weight: bold;
		}

@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 h1::before {
	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="125"><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));
}

ul.blocks {
	display: flex;
	align-items: center;
	font-size: 120%;
}

ul.blocks li {
	list-style: none;
	margin: 1em;
	text-align: center;
}

ul.blocks li::before {
	content: attr(data-icon);
	font-family: 'webapps';
	display: block;
	font-weight: normal;
	color: var(--color1);
	font-size: 200%;
}

ul.blocks li:nth-child(2)::before {
	color: var(--color4);
}

ul.blocks li:nth-child(3)::before {
	color: var(--color3);
}

ul.blocks li:nth-child(4)::before {
	color: var(--color2);
}

ul.blocks li:nth-child(5)::before {
	color: var(--color5);
}

#hard-conditionals h1,
#hard-refs h1 {
	font-size: 140%;
}

#hard-conditionals p,
#hard-refs p {
	text-align: center;
	margin: .5em 0;
}

#hard-refs th {
	padding: .1em .5em;
	background: hsla(0,0%,100%,.3);
}

#hard-refs td {
	padding: .2em .5em;
}

#uist {
	overflow: hidden;
}

	#uist img {
		opacity: 1;
		transform: translateY(100vh);
		box-shadow: 0 0 1em rgba(0,0,0,.5);
	}

	#uist .delayed.current {
		transform: translateY(10vh);
	}

#form-elements .mv-bar {
	display: none;
}

#html.slide {
	display: flex;
	flex-flow: row;
	justify-content: center;
}

	#html.slide img {
		height: 60%;
		margin-top: -2em;
	}

.graph-1d {
	position: relative;
	width: 80%;
	--thickness: 10px;
	--text-distance: 4em;
	height: var(--thickness);
	margin: calc(1em + var(--text-distance));
	background: linear-gradient(to right, var(--color1), var(--color2));
	border-radius: .3em;
}

	.graph-1d::before,
	.graph-1d::after {
		position: absolute;
		white-space: pre;
		font-weight: bold;
		font-size: 40%;
		margin-top: -1.2em;
		text-transform: uppercase;
	}

	.graph-1d::before {
		content: attr(data-label-before);
		color: var(--color1);
		right: 100%;
		margin-right: 2em;
		text-align: right;
	}

	.graph-1d::after {
		content: attr(data-label-after);
		color: var(--color2);
		left: 100%;
		margin-left: 2em;
	}

	.graph-1d > * {
		position: absolute;
		top: var(--text-distance);
		left: calc(var(--x) * 100%);
		font-size: 80%;
		line-height: 1.2;
		white-space: nowrap;
		font-weight: bold;
	}

	.graph-1d > :nth-child(even) {
		top: calc(-1 * var(--text-distance) - var(--thickness) * 1.5);
	}

		.graph-1d > ::before {
			content: "";
			position: absolute;
			top: calc(-1 * var(--text-distance));
			width: 0;
			height: 0;
			padding: calc(var(--thickness) * 1.5);
			margin: calc(-1 * var(--thickness));
			border-radius: 50%;
			background: var(--color1);
			box-shadow: 0 0 0 1em hsla(180, 100%, 40%, var(--x)) inset;
		}

		.graph-1d > :nth-child(even)::before {
			top: calc(var(--text-distance) + var(--thickness) * 1.5);
		}

		.graph-1d > ::after {
			content: "";
			position: absolute;
			left: calc(var(--thickness) * .5);
			bottom: 1.5em;
			border-left: 1px solid white;
			height: calc(var(--text-distance) - 1.5em);
			opacity: .3;
		}

		.graph-1d > :nth-child(even)::after {
			top: 1.5em;
			bottom: auto;
		}

@keyframes qqq {
	from { --x: .15; }
	to { --x: .85; }
}

#landscape .qqq {
	animation: qqq 5s infinite alternate linear;
}

.tweet {
	max-height: 80vh;
	box-sizing: border-box;
	border: 1em solid white;
	border-radius: 2vmin;
	box-shadow: 0.05em 0.1em 0.2em rgba(0,0,0,.5);
}

#karger {
	background: url(img/david-karger.jpg) right / contain no-repeat, linear-gradient(to bottom, hsl(200, 7%, 39%), 55%, hsl(200, 5%, 63%));
}

	#karger h1 strong {
		display: block;
	}

	#karger h1 a {
		display: block;
		font-size: 50%;
		text-decoration: none;
	}

#workflow-quote {

}

	#workflow-quote blockquote {
		font-size: 140%;
	}

	#workflow-quote p:last-of-type {
		font-style: normal;
		font-size: 70%;
	}

	#workflow-quote small {
		display: block;
		font-size: 50%;
		font-weight: 300;
		text-indent: 2.6em;
	}

#iceberg {
	background-image: url(img/iceberg.jpg);
	font: 500%/1 var(--font-handwritten);
	transition: 2s background-position-x;
}

	#iceberg:target {
		background-position-x: left;
	}

	#iceberg p {
		position: absolute;
		right: 1em;
		margin: 0;
		transition: 2s right;
		text-shadow: 0 0 .1em rgba(0,0,0,.8);
	}

	#iceberg:target p {
		right: 4em;
	}

	#iceberg p:first-of-type {
		top: 20vh;
	}

	#iceberg p:last-of-type {
		bottom: 40vh;
	}

#access-control {

}

	#access-control div {
		width: 35em;
		font-size: 50%;
		border: 1px solid hsla(0,0%,100%,.4);
		border-radius: .3em;
		margin-bottom: .5em;
		padding: .8em;
		background: hsla(0,0%,100%,.1);
	}

	#access-control p {
		margin: 0;
		margin-left: 7em;
	}

	#access-control p:first-of-type {
		font-family: Blokk;
	}

	#access-control p:last-of-type {
		font-weight: bold;
		margin-top: .5em;
	}

		#access-control a {
			text-decoration: none;
			margin-right: 1em;
			font-size: 120%;
		}

		#access-control a::before {
			display: inline-block;
			vertical-align: middle;
			margin-right: .3em;
		}

		#access-control .reply::before {
			content: "↩";
			transform: scaleY(-1);
			color: hsl(200, 100%, 80%);
			vertical-align: .1em;
		}

		#access-control .edit::before {
			content: "✏️";
		}

		#access-control .delete::before {
			content: "❌";
			color: #f44;
		}

	#access-control img {
		float: left;
		width: 6em;
		height: 6em;
		border-radius: 50%;
		margin: 0 1em 0 0;
	}

#get-involved a {
	font-weight: bold;
	letter-spacing: -.03em;
}

#realtime {
	background: hsl(264, 55%, 56%);
}

.delayed.strike {
	position: relative;
	opacity: 1;
}

	.delayed.strike::after {
		content: "";
		position: absolute;
		bottom: .6em;
		left: -.1em;
		height: .1em;
		background: hsla(0, 100%, 80%, .9);
		width: 0%;
		border-radius: 1em;
		transition: .5s;
	}

	.delayed.strike.current::after,
	.delayed.strike.displayed::after {
		width: 105%;
	}

#mv-action {

}

	#mv-action pre {
		font-size: 120%;
	}

#functions {

}

	#functions pre {
		font-size: 130%;
	}

	#functions li.displayed .data {
		display: none;
	}

	#functions .token.keyword {
		color: inherit;
	}

	#functions .token.keyword:first-child,
	#functions .token.function {
		font-weight: bold;
	}

	#functions ul {
		min-width: 22em;
		list-style: none;
	}

		#functions li {
			position: relative;
		}

		#functions li::before {
			content: "𝒇";
			position: absolute;
			top: 1.1em;
			left: -2.5em;
			padding: .1em .4em .2em;
			border-radius: .15em;
			font-size: 50%;
			background: hsla(0,0%,100%,.4);
			color: #20272A;
			line-height: 1;
		}

#people-schema {
	font-size: 500%;
}

	#people-schema ul.tree > li > a {
		font-size: 90%;
		font-size: 300;
	}

	#people-schema .multiple > a {
		--offset: .17em;
		box-shadow: var(--offset) var(--offset) hsla(0,0%,0%,.3), var(--offset) var(--offset) var(--color),
		            calc(var(--offset) * 2) calc(var(--offset) * 2) hsla(0,0%,0%,.5), calc(var(--offset) * 2) calc(var(--offset) * 2) var(--color);
	}

.collapse-delayed .delayed:not(.displayed):not(.current) {
	display: none;
}

#study-design {
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-auto-flow: row dense;
	align-items: stretch;
	text-align: center;
	line-height: 1.1;
	letter-spacing: -.03em;
	text-shadow: 0 0 .2em rgba(0,0,0,.3);
}

	#study-design > * {
		display: flex;
		flex-flow: column;
	}

	#study-design > h1 {
		grid-row: 2;
		grid-column: 1 / span 5;
		font-weight: 300;
		margin: auto;
		font-size: 300%;
	}

	#study-design > div {
		grid-column-end: span var(--units, 1);
		padding: 1em;
		font-weight: bold;
	}

		#study-design > div::before {
			counter-reset: minutes calc(var(--units, 1) * 5);
			content: counter(minutes) "′";
			display: block;
			font-weight: 300;
			font-size: 350%;
			text-indent: .1em;
		}

		#study-design > div div {
			margin-top: .5em;
			font-weight: 300;
			font-size: smaller;
			letter-spacing: normal;
		}

	#study-design .mavo-tutorial {
		background: var(--color4);
	}

	#study-design .baseline {
		background: var(--color1);
	}

	#study-design .elicitation {
		--units: 3;
		background: var(--color2);
	}

	#study-design .prototype-tutorial {
		--units: 2;
		grid-column-end: span 1;
		grid-row-end: span 2;
		align-items: center;
		justify-content: center;
		background: var(--color4);
	}

	#study-design .prototype-testing {
		--units: 2;
		grid-column-start: 5;
		background: var(--color2);
	}

	#study-design .practice-tasks {
		grid-column-start: 4;
		background: var(--color4);
	}

	#study-design .hands-on {
		--units: 3;
		grid-column-start: 1;
		background: var(--color3);
	}

.token[class*="action-"] {
	font-weight: bold;
}

.action-delete {
	color: hsl(0, 90%, 70%);
}

.action-add {
	color: var(--color4);
}

.action-set {
	color: var(--color2);
}

.action-move {
	color: var(--color1);
}

.fn-group {
	color: white;
	opacity: .7;
}

#questions:target {
	justify-content: flex-start;
	bottom: auto;
}

	#questions table {
		margin: 0;
		font-size: 80%;
	}

	#questions td,
	#questions th {
		text-align: left;
		vertical-align: top;
	}

	#questions td:first-child {
		padding-left: 0;
		padding-right: .25em;
	}

	#questions td:last-child {
		padding-left: .25em;
		padding-right: 0;
	}

	#questions code {
		white-space: nowrap;
	}

#referencing {
	padding: .8em;
	flex-flow: row;
	align-items: flex-start;
	font-size: 300%;

}

		#referencing h1 {
			text-orientation: sideways;
			writing-mode: vertical-lr;
			transform: rotate(.5turn);
		}

		#referencing .bubble {
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: flex-start;
			box-sizing: border-box;
			padding: 1em;
			border-radius: 1.5em;
			font-weight: bold;
			border: 2px solid white;
			text-shadow: .04em .04em .1em rgba(0,0,0,.2);
		}

		#referencing .bubble::before,
		#referencing .bubble::after,
		#referencing .bubble p::before,
		#referencing .bubble p::after {
			--append: " ₂₀";
			position: absolute;
			margin: .5em .4em;
			background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><line stroke="white" stroke-width="3" x1="5%" y1="95%" x2="95%" y2="5%" stroke-linecap="round" /></svg>') no-repeat;
			background-position: right .55em bottom 0;
			background-size: .4em .6em;
			background-origin: content-box;
			font-weight: 300;
			font-size: 200%;
			letter-spacing: -.03em;
			line-height: 1;
			text-shadow: none;
			filter: drop-shadow(.04em .04em .03em rgba(0,0,0,.2));
		}

		[data-outof] {
			margin: 0;
			font-size: 100%;
			font-weight: bold;
			letter-spacing: -.03em;
			line-height: 1;
			text-shadow: .05rem .05rem .5rem rgba(0,0,0,.2);
		}

		[data-outof]::after {
			content: "⁄ " attr(data-outof);
			vertical-align: sub;
			font-size: 60%;
			margin-left: .05em;
			font-weight: 300;
			white-space: nowrap;
		}

		[data-outof=""]::after {
			content: "⁄ 20";
		}

		#referencing .bubble p::before,
		#referencing .bubble p::after {
			font-size: 250%;
		}

		#referencing .bubble .function {
			color: yellow;
		}

		#referencing .bubble .punctuation {
			color: inherit;
			opacity: .6;
		}

		#referencing .bubble p {
			margin: 0;
			font-size: 80%;
		}

		#referencing .implicit-all {
			position: relative;
			width: 140vh;
			max-width: 100%;
			height: 100%;
			background: hsla(30, 100%, 50%, .5);
			font-size: 90%;
			text-align: center;
		}

			#referencing .implicit-all .bubble {
				mix-blend-mode: hard-light; /* Good choices: color-dodge, screen, hard-light */
			}

			#referencing .implicit-all::before {
				content: "20" var(--append);
				right: 0;
				top: 0;
				margin-top: .2em;
			}

		#referencing .explicit-all,
		#referencing .explicit-current {
			position: absolute;
			top: 6em;
			width: 54%;
			height: 40%;
			padding-top: .5em;
		}

		#referencing .explicit-all {
			background: hsla(80, 80%, 50%, .5);
			left: 1em;
			text-align: left;
			align-items: flex-start;
		}

			#referencing .explicit-all::before {
				content: "8" var(--append);
				left: 0;
				bottom: 0;
			}

			#referencing .explicit-all::after {
				/* EA ∩ IC */
				content: "7" var(--append);
				left: 2.5em;
				bottom: 0;
			}

		#referencing .explicit-current {
			background: hsla(190, 100%, 50%, .5);
			right: 1em;
			text-align: right;
			align-items: flex-end;
		}

			#referencing .explicit-current::before {
				content: "8" var(--append);
				bottom: 0;
				right: 0;
			}

			#referencing .explicit-current::after {
				/* EA ∩ EC ∩ IC */
				content: "2" var(--append);
				bottom: 0;
				left: 0;
			}

			#referencing .explicit-current p::before {
				/* EC ∩ IC */
				content: "5" var(--append);
				bottom: 0;
				left: 2.5em;
			}

			#referencing .explicit-current p::after {
				/* EC ∩ EA */
				content: "3" var(--append);
				top: 0;
				left: 0;
			}

		#referencing .implicit-current {
			justify-content: flex-end;
			align-items: flex-start;
			position: absolute;
			bottom: 1em;
			left: calc(1em + 14%);
			right: calc(1em + 20%);
			background: hsla(320, 100%, 50%, .5);
			height: 44%;
		}

			#referencing .implicit-current::before {
				content: "17" var(--append);
				right: 0;
				bottom: 0;
			}

#persisted {}

	#persisted th {
		background: hsla(0,0%,100%, .3);
	}

@keyframes bar {
	from {
		--n: 0;
	}
}

.bar {
	width: calc(var(--n) * 1em);
	padding: .0em .3em;
	box-sizing: border-box;
	background: var(--color2);
	font-size: 50%;
	text-align: right;
	letter-spacing: -.03em;
	transition: calc(.07s * var(--n));
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	text-shadow: .02em .02em .1em rgba(0,0,0,.25);
	font-weight: bold;
}

 .slide:not(:target) .bar {
	clip-path: polygon(0 0, 1em 0, 1em 100%, 0 100%);
}

.bar + .bar {
	background: var(--color3)
}

.bar:empty::before {
	counter-reset: text var(--n);
	content: counter(text);
}

ul.fancy {
	font-weight: 300;
	font-size: 180%;
	line-height: 1.2;
	list-style: none;
	text-align: center;
}

ul.fancy li {
	padding: .2em 0 0;
}

ul.fancy 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;
}

#underspecified {}

	#underspecified h1 {
		width: 10em;
		text-transform: uppercase;
		font-size: 357%;
		line-height: 1;
		margin: 0;
	}

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

	#underspecified h2 {
		font-weight: 300;
		font-size: 200%;
		margin: 0;
	}

.underspecified {}

	.underspecified .subjects {
		display: block;
		margin: auto;
		background-color: var(--color4);
		padding: .3em .05em;
		width: 2em;
		border-radius: 50%;
		font-size: 200%;
		line-height: 1;
		margin-bottom: .3em;
		text-shadow: 0 0 .2em rgba(0,0,0,.2);
		letter-spacing: -.05em;
		text-align: center;
		transition: .5s cubic-bezier(.3,.2,.5,1.5);
	}

	.underspecified .subjects::after {
		content: "out of 20 subjects";
		display: block;
		max-width: 5em;
		margin: auto;
		font-size: 23%;
		letter-spacing: -.03em;
		color: black;
		text-shadow: none;
	}

	.underspecified .subjects.delayed:not(.current):not(.displayed) {
		transform: scale(0);
		font-size: 40%;
	}

	.underspecified .token {
		filter: brightness(120%);
	}

	.underspecified .token.function {
		color: inherit;
	}

.pie-container {
	position: relative;
	width: min-content;
	height: min-content;
	font-weight: bold;
	line-height: 1;
	text-align: center;
}

.pie {
	--size: calc(100vmin - 7em);
	--radius: calc(var(--size) / 2);
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	box-sizing: border-box;

	background: conic-gradient(
		var(--color1) var(--value1),
		var(--color2) 0 calc(var(--value1) + var(--value2)),
		var(--color3) 0 calc(var(--value1) + var(--value2) + var(--value3, 0)),
		var(--color4) 0 calc(var(--value1) + var(--value2) + var(--value3, 0) + var(--value4, 0)),
		transparent 0
	);
	transition-duration: .4s;
	transition-property: --value1, --value2, --value3, --value4;
}

	.pie-container .label {
		position: absolute;
		max-width: 10em;
		margin: 1em;
		text-shadow: .04em .04em .1em rgba(0,0,0,.2);
		transition-delay: .3s;
	}

	.pie-container [data-outof] {
		display: block;
		width: min-content;
		margin: auto;
		margin-bottom: .1em;
		font-size: 200%;
	}

	.pie-container .vertical {
		top: -.5em;
		right: calc(50% - .8em);
		writing-mode: vertical-rl;
		transform: rotate(.5turn);
		max-height: 5.2em;
		text-align: right;
	}

		.pie-container .vertical [data-outof] {
			position: absolute;
			writing-mode: initial;
			transform: rotate(-.5turn);
			top: 1.7em;
			left: 1em;
		}

	.pie-container .label:not(.displayed):not(.current):nth-child(1) ~ .pie {
		--value1: 0% !important;
	}

	.pie-container .label:not(.displayed):not(.current):nth-child(2) ~ .pie {
		--value2: 0% !important;
	}

	.pie-container .label:not(.displayed):not(.current):nth-child(3) ~ .pie {
		--value3: 0% !important;
	}

	.pie-container .label:not(.displayed):not(.current):nth-child(4) ~ .pie {
		--value4: 0% !important;
	}

#separators {
	overflow: hidden;
}

	#separators td:first-child .token {
		color: inherit;
	}

		#separators h1 {
			margin-bottom: 0;
		}

#sequencing .pie-container {

}


	#sequencing .label {
		top: 15%;
		font-size: 80%;
		color: black;
		max-width: 11em;
	}

	#sequencing code {
		display: block;
		font-weight: bold;
		color: white;
		font-size: 88%;
		margin: .5em -.3em 0;
	}

.vertical-bar-chart {
	position: relative;
	display: flex;
	align-items: flex-end;
	border: 2px solid white;
	border-top: 0;
	border-right: 0;
	--height: calc(100vmin - 12em);
	height: var(--height);
	background: linear-gradient(to bottom, hsla(0,0%,100%,.1) 50%, transparent 0) top / 100% 20%;
	font-size: 60%;
}

	.vertical-bar-chart::before {
		content: "100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0%";
		position: absolute;
		right: 100%;
		top: -1.6em;
		margin: 0 .8em;
		width: 3em;
		text-align: right;
		line-height: calc((var(--height) + 2px) / 10);
	}

	.vertical-bar-chart > div {
		display: flex;
		flex-flow: column;
		justify-content: flex-end;
		align-items: center;
		background: var(--color-magenta);
		width: 1.5em;
		height: calc(var(--p) * 100%);
		box-sizing: border-box;
		padding: .3em 0;
		margin: 0 .9em;
		font-weight: bold;
		letter-spacing: -.04em;
		word-wrap: break-word;
		line-height: 1;
	}

	.vertical-bar-chart.percent-sort > div {
		order: var(--order);
	}

		.vertical-bar-chart > div::before {
			content: "Q";
			display: block;
			font-weight: 300;
		}

#correctness {
	justify-content: flex-start
}

	#correctness button {
		padding: 0 .5em;
		border-radius: 0 0 .2em .2em;
		margin: -1.25em auto 1em;
		background: var(--color-green);
		border: none;
		font-weight: bold;
		color: white;
		font-size: 80%;
		cursor: pointer;
	}

	#correctness .vertical-bar-chart > div:hover {
		background: var(--color-aqua);
	}

	#correctness .info {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		text-align: center;
		margin-top: 1em;
		font-size: 160%;
		transition: .2s opacity;
	}

		#correctness .info code {
			display: block;
			margin-top: .3em;
		}

	#correctness div:not(:hover) .info {
		opacity: 0;
		transition-delay: .2s;
		pointer-events: none;
	}

#spreadsheet-actions {
	overflow: hidden;
}

	#spreadsheet-actions iframe {
		transform-origin: 0 0;
		transform: scale(1.8);
	}

#hands-on-success {

}

	#hands-on-success video {
		width: 9em;
		max-height: none;
	}

	#hands-on-success table {
		line-height: 1.15;
	}

	#hands-on-success tbody {
		counter-reset: task;
	}

	#hands-on-success tr {
		counter-increment: task;
	}

	#hands-on-success td[rowspan] {
		position: relative;
		vertical-align: top;
		padding-top: .3em;
		padding-bottom: 0;
	}

	#hands-on-success td[rowspan] > span {
		position: absolute;
		top: .8em;
		left: -.7em;
		writing-mode: vertical-lr;
		transform: rotate(.5turn);
		font-weight: bold;
		font-size: 60%;
		line-height: 1;
		text-transform: uppercase;
		white-space: nowrap;
	}

	#hands-on-success th {
		padding-top: .15em;
		padding-bottom: .2em;
	}

	#hands-on-success td {
		vertical-align: middle;
	}

	#hands-on-success td:nth-last-child(2) {
		padding-top: .3em;
		padding-bottom: .3em;
	}

		#hands-on-success td:nth-last-child(2)::before {
			content: counter(task);
			display: inline-block;
			vertical-align: .25em;
			padding: .3em;
			min-width: 1em;
			border-radius: 50%;
			margin-right: .1em;
			background: var(--color-aqua);
			text-align: center;
			font-size: 60%;
			line-height: 1;
			font-weight: bold;

		}

	#hands-on-success td:last-child {
		padding-top: 0;
		padding-bottom: .1em;
	}

		#hands-on-success [data-outof] {
			font-size: 180%;
		}

		#hands-on-success[data-step] [data-outof] {
			color: var(--color-green);
		}

		#hands-on-success[data-step] [data-outof].bad {
			color: hsl(0, 100%, 60%);
		}

.future-work {
	display: flex;
	--color: 295, 60%;
	background: hsl(var(--color), 80%);
	color:  hsl(var(--color), 25%);
	font-weight: bold;
	padding-right: .4em;
	font-size: 80%;
	letter-spacing: -.03em;
	flex-shrink: 0;
}

	@keyframes scroll-stripes {
		to {
			--length: calc(-2 * var(--stripe-width));
		}
	}

	.future-work::before {
		content: "🔮 Future Work";
		display: flex;
		align-items: center;
		padding: .1em .5em;
		margin-right: .5em;
		text-transform: uppercase;
		font-size: 80%;
		color:  hsl(var(--color), 95%);
		--stripe-width: 10px;
		--length: 0px;
		background: hsl(var(--color), 30%);
		background-image: repeating-linear-gradient(-45deg, hsla(0,0%,100%,.1) var(--length) calc(var(--length) + var(--stripe-width)), transparent var(--length) calc(var(--length) + 2 * var(--stripe-width)));
		text-shadow: .02em .02em .2em rgba(0,0,0,.2);
		animation: scroll-stripes 4s linear infinite;
	}


	.future-work code {
		mix-blend-mode: multiply;
		font-weight: bold;
	}

#click-to {
	flex-flow: row;
	overflow: hidden;
	font-size: 500%;
	padding: 0;
}

	#click-to ul {
		margin: 0;
		margin-top: calc(50vh - .75em);
		align-self: flex-start;
		transform: translateY(calc(-1.5em * var(--n)));
		transition: .4s transform;
		padding-left: .4em;
		list-style: none;
		text-shadow: 0 calc(1.5em * var(--rows)), 0 calc(-1.5em * var(--rows)); /* make copies of text */
	}

	#click-to p,
	#click-to li.active {
		color: var(--color1);
		transition: .2s .3s color;
	}

#time {
	position: fixed;
	bottom: .1em;
	left: .3em;
	z-index: 100;
	font-weight: bold;
	color: hsla(0,0%,100%,.3);
	font-size: 120%;
}