style.css

html {
	font-family: "Inter", "Roboto", sans-serif;
}
@supports (font-variation-settings: normal) {
	html {
		font-family: "Inter var", "Roboto", sans-serif;
	}
}
body {
	margin: 0;
	--text-color: #111;
	--background-color: #fefefe;
	--link-color: #2767d9;
	--hr-color: #e8e8e8;
	color: #111;
	color: var(--text-color);
	background-color: #fefefe;
	background-color: var(--background-color);
}
body, a[href] {
	transition: color .2s ease, background-color .2s ease;
}
@media (prefers-color-scheme: dark) {
	body {
		--text-color: #fefefe;
		--background-color: #111;
		--link-color: #61daff;
	}
}
body.light {
	--text-color: #111;
	--background-color: #fefefe;
	--link-color: #2767d9;
}
body.dark {
	--text-color: #fefefe;
	--background-color: #111;
	--link-color: #61daff;
}
header {
	background-color: hsl(130deg 100% 35% / 25%);
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' fill='%23ffffff' fill-opacity='0.3' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.87 0 7-3.13 7-7s-3.13-7-7-7-7 3.13-7 7 3.13 7 7 7zm48 25c3.87 0 7-3.13 7-7s-3.13-7-7-7-7 3.13-7 7 3.13 7 7 7zm-43-7c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm63 31c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zM34 90c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm56-76c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM60 91c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM35 41c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM12 60c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z'/%3E%3C/svg%3E");
	padding: 1rem 0 0.5rem;
	--mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/20.00px 100%;
	-webkit-mask: var(--mask);
	mask: var(--mask);
}
.maxwidth {
	max-width: 800px;
	margin: auto;
	padding: 0 .5rem;
}
.callout {
	border: 2px solid var(--hr-color);
	padding: 1rem;
	border-radius: 4px;
	background-color: #fcfaff;
	transition: border-color .2s ease, background-color .2s ease;
}
.dark .callout {
	background-color: #0e0a15;
	border-color: #2a2a2a;
}
footer {
	margin-top: 5rem;
	padding-bottom: 1em;
}
h1, h2, h3 {
	margin: 1.5em 0 .5em;
}
h1 {
	font-size: 7rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -4px;
	text-wrap: balance;
	transform: rotate(-3deg);
	translate: 0 -1.5rem;
}
p {
	margin: .75em 0;
	text-indent: 1em;
}
p.noindent {
	text-indent: 0;
}
#dark-mode-wrapper {
	display: block;
	position: relative;
	z-index: 100;
	font: inherit;
	text-align: right;
	float: right;
	font-size: 80%;
	vertical-align: middle;
}
a[href] {
	color: var(--link-color);
	text-decoration: none;
}
a[href]:hover, a[href]:focus {
	text-decoration: underline;
}
h2[id] a[href^="#"]::before, h3[id] a[href^="#"]::before {
	content: "#";
	color: #d2d2d2;
	transition: color .1s ease;
}
h2[id] a[href^="#"]:hover::before, h3[id] a[href^="#"]:hover::before {
	color: var(--link-color);
}
.graph-wrapper {
	width: fit-content;
	margin: auto;
	max-width: 100%;
	max-height: 80vh;
	overflow: auto;
}
hr {
	overflow: visible;
	height: 2px;
	background-color: var(--hr-color);
	border: none;
	outline: none;
	margin: 3em;
	position: relative;
}
pre {
	max-width: 100%;
	overflow-x: auto;
}
b, strong {
	font-weight: 600;
}
.timestamp {
	text-align: right;
	color: #aaa;
	font-size: 85%;
}
.timestamp .email {
	fill: none;
	stroke: #aaa;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	height: 1.5em;
	padding: .15em 0;
	vertical-align: middle;
	box-sizing: border-box;
}
[id] {
	scroll-margin-top: 1em;
}

.icon {
	display: inline-block;
	vertical-align: middle;
	fill: hsl(117, 100%, 29%);
	height: 20px;
	width: 20px;
}
.td-icon {
	vertical-align: middle;
	text-align: center;
}
.icon-no {
	fill: hsl(0, 92%, 34%);
}
.icon-w {
	fill: hsl(209, 72%, 45%);
}
.dark .icon {
	fill: hsl(117, 100%, 65%);
}
.dark .icon-no {
	fill: hsl(0, 100%, 75%);
}
.dark .icon-w {
	fill: hsl(209, 100%, 70%);
}
.graph {
	display: block;
	border: 0;
	margin: auto;
	transition: filter .15s ease;
}
.dark .graph {
	filter: invert(1) contrast(0.85) hue-rotate(180deg) brightness(1.25);
}
.dark pre {
	filter: invert(1) saturate(2);
}
.spaced + .spaced {
	margin-top: 2rem;
}
.chartjs {
	margin: auto;
	width: 600px !important;
	aspect-ratio: 2;
}

figure {
	margin: 1rem 0;
	text-align: center;
}
figure img {
	max-width: min(100%, 400px);
}
.dark figure img {
	filter: invert(1) saturate(2);
}

#toc {
	font-size: 75%;
}
#toc ol, #toc ul {
	padding-left: 1rem;
	font-size: inherit;
	border-left: 2px solid var(--hr-color);
	margin: 0 0 0.25em -0.55rem;
}
#toc li {
	margin-left: 0.75rem;
}

@media screen and (max-width: 775px) {
	.chartjs {
		width: 525px !important;
	}
}
@media screen and (max-width: 600px) {
	h1 {
		font-size: 5rem;
	}
	.chartjs {
		width: 400px !important;
	}
}
@media screen and (max-width: 475px) {
	.chartjs {
		width: 310px !important;
	}
}
@media screen and (min-width: 550px) {
	#list-wrapper {
		display: grid;
		column-gap: 1rem;
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (min-width: 850px) {
	#list-wrapper {
		grid-template-columns: repeat(3, 1fr);
	}
}


.ribbon {
	position: absolute;
	background-color: crimson;
	color: #fff;
	font-weight: 500;
	position: absolute;
	right: 0;
	bottom: -1.5em;

	--ribbon-tail: 1em; /* control the ribbon shape */
	--side-padding: 1em;
	--vert-padding: 0.5em;

	padding: var(--vert-padding) var(--side-padding) var(--vert-padding) calc(var(--side-padding) + var(--ribbon-tail));
	clip-path:
		polygon(
			0 0,
			100% 0,
			100% 100%,
			0 100%,
			var(--ribbon-tail) 50%
		);
}