@font-face {
	font-family: "departure mono";
	src: url("/fonts/DepartureMono-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--r-background-color: #fafafa;
	--r-main-color: #2a2722;
	--r-heading-color: var(--r-main-color);
	--r-main-font: "departure mono", monospace;
	--r-main-font-size: 44px;
	--r-heading-font: var(--r-main-font);

	--r-heading1-size: 77px;
	--r-heading2-size: 66px;
	--r-heading3-size: 55px;
	--r-heading4-size: 44px;

	--ease-in-out-quartic: cubic-bezier(0.78, 0, 0.22, 1);
}

.viewer textarea {
	display: none;
}

.border {
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
}

.cell {
	fill: currentcolor;
}

stop {
	stop-color: currentcolor;
}

stop.fade {
	stop-opacity: 0;
}

.vertical rect {
	fill: url(#vertical-gradient);
}

.horizontal rect {
	fill: url(#horizontal-gradient);
}

.fragment.custom.fade-up-down {
	opacity: 0;
	transform: translate(0, 40px);
}

.fragment.custom.fade-up-down.current-fragment {
	opacity: 1;
	transform: translate(0, 0);
}

.fragment.custom.fade-in-children {
	opacity: 1;
}

.fragment.custom.fade-in-children > * {
	opacity: 0;
	transition: opacity .8s linear;
	transition-delay: calc(var(--step, 0) * 100ms);
}

.fragment.custom.fade-in-children.visible > * {
	opacity: 1;
}

.fragment.trace {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 500ms var(--ease-in-out-quartic);
}

.fragment.trace.visible {
	stroke-dashoffset: 0;
}

.fragment.custom.birth-death {
	opacity: 0;
	transform: scale(90%);
	transform-box: fill-box;
	transform-origin: center;
	transition: none;
}

.fragment.birth-death.current-fragment {
	opacity: 1;
	transform: scale(100%);
	transition:
		opacity 500ms var(--ease-in-out-quartic),
		transform 500ms var(--ease-in-out-quartic);
}

#neighbors .vertical rect,
#neighbors .horizontal rect {
	transition-delay: calc(var(--step, 0) * 100ms);
	transition-duration: 1000ms;
	transition-property: height, width, x, y;
	transition-timing-function: var(--ease-in-out-quartic);
}

#neighbors .vertical rect {
	height: 0px;
	y: 256px;
}

#neighbors .horizontal rect {
	width: 0px;
	x: 256px;
}

#neighbors.present .vertical rect,
#neighbors.past .vertical rect {
	height: 512px;
	y: 0px;
}

#neighbors.present .horizontal rect,
#neighbors.past .horizontal rect {
	width: 512px;
	x: 0px;
}

.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1em;
}