<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@media print {
	body header, .skip, a[href] {
		display: none;
	}	
}
/*=========================================
*            Custom properties            *
=========================================*/
:root {
	--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Oxygen, Cantarell, sans-serif;
	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
}

/* Custom props */
:root {
	/* Colors */
	--dark: hsl(0 0% 20%);
  --darkgrey: hsl(0 0% 15%);
  --darkgreyalpha: hsl(0 0% 15% / .5);
  --grey: hsl(0 0% 30%);
  --light: hsl(0 0% 80%);
  --lighter: hsl(0 0% 100%);
  --border: hsl(0 0% 53%);
  --action-color: hsl(239 78% 84%);

	/* Typography */
	--h1-font-size: 1.7em;
	--h2-font-size: 1.5em;
	--h3-font-size: 1.4em;
	--h4-font-size: 1.3em;
	--h5-font-size: 1.2em;
	--h5-font-size: 1.1em;

	/* Misc */
  --transition: 300ms ease-in-out;
  --dropshadow: 0 0 5px 3px var(--action-color);
	--networkIconSize: 1.5rem;
	--syntax-tab-size: 2;
}

/*==========================================
*            Basics &amp; utilities            *
==========================================*/

html,
body {
	padding: 0;
	margin: 0 auto;
}

body {
	font-family: var(--font-family);
	color: var(--light);
	background-color: var(--dark);
	line-height: 1.6;
	background-image: linear-gradient(90deg, var(--darkgrey) 0, var(--darkgrey) 14rem, var(--dark) 14rem, var(--dark) 100%);
}

h1 { font-size: var(--h1-font-size) }
h2 { font-size: var(--h2-font-size) }
h3 { font-size: var(--h3-font-size) }
h4 { font-size: var(--h4-font-size) }
h5 { font-size: var(--h5-font-size) }
h6 { font-size: var(--h6-font-size) }

:is(h1, h2, h3, h4, h5, h6) {
	line-height: 1.2;
}

a[href] {
	color: var(--action-color);
}
a[href][download] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background-color: var(--grey);
	border: 2px solid var(--border);
	border-radius: .5rem;
	font-size: 1.2em;
	font-weight: bold;
	padding: 1rem;
	text-decoration: none;
	color: var(--lighter);
	transition: background-color var(--transition);
}
a[href][download]:is(:hover, :focus-visible) {
	background-color: var(--dark);
}
a[href][download]::after {
	content: '';
	width: 2em;
	height: 2em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGQ9Ik0xMi41NTM1IDE2LjUwNjFDMTIuNDExNCAxNi42NjE1IDEyLjIxMDYgMTYuNzUgMTIgMTYuNzVDMTEuNzg5NCAxNi43NSAxMS41ODg2IDE2LjY2MTUgMTEuNDQ2NSAxNi41MDYxTDcuNDQ2NDggMTIuMTMxMUM3LjE2Njk4IDExLjgyNTQgNy4xODgyMiAxMS4zNTEgNy40OTM5MiAxMS4wNzE1QzcuNzk5NjMgMTAuNzkyIDguMjc0MDIgMTAuODEzMiA4LjU1MzUyIDExLjExODlMMTEuMjUgMTQuMDY4MlYzQzExLjI1IDIuNTg1NzkgMTEuNTg1OCAyLjI1IDEyIDIuMjVDMTIuNDE0MiAyLjI1IDEyLjc1IDIuNTg1NzkgMTIuNzUgM1YxNC4wNjgyTDE1LjQ0NjUgMTEuMTE4OUMxNS43MjYgMTAuODEzMiAxNi4yMDA0IDEwLjc5MiAxNi41MDYxIDExLjA3MTVDMTYuODExOCAxMS4zNTEgMTYuODMzIDExLjgyNTQgMTYuNTUzNSAxMi4xMzExTDEyLjU1MzUgMTYuNTA2MVoiIGZpbGw9IiNmZmZmZmYiLz4gPHBhdGggZD0iTTMuNzUgMTVDMy43NSAxNC41ODU4IDMuNDE0MjIgMTQuMjUgMyAxNC4yNUMyLjU4NTc5IDE0LjI1IDIuMjUgMTQuNTg1OCAyLjI1IDE1VjE1LjA1NDlDMi4yNDk5OCAxNi40MjI1IDIuMjQ5OTYgMTcuNTI0OCAyLjM2NjUyIDE4LjM5MThDMi40ODc1NCAxOS4yOTE5IDIuNzQ2NDMgMjAuMDQ5NyAzLjM0ODM1IDIwLjY1MTZDMy45NTAyNyAyMS4yNTM2IDQuNzA4MTQgMjEuNTEyNSA1LjYwODI1IDIxLjYzMzVDNi40NzUyMiAyMS43NSA3LjU3NzU0IDIxLjc1IDguOTQ1MTMgMjEuNzVIMTUuMDU0OUMxNi40MjI1IDIxLjc1IDE3LjUyNDggMjEuNzUgMTguMzkxOCAyMS42MzM1QzE5LjI5MTkgMjEuNTEyNSAyMC4wNDk3IDIxLjI1MzYgMjAuNjUxNyAyMC42NTE2QzIxLjI1MzYgMjAuMDQ5NyAyMS41MTI1IDE5LjI5MTkgMjEuNjMzNSAxOC4zOTE4QzIxLjc1IDE3LjUyNDggMjEuNzUgMTYuNDIyNSAyMS43NSAxNS4wNTQ5VjE1QzIxLjc1IDE0LjU4NTggMjEuNDE0MiAxNC4yNSAyMSAxNC4yNUMyMC41ODU4IDE0LjI1IDIwLjI1IDE0LjU4NTggMjAuMjUgMTVDMjAuMjUgMTYuNDM1NCAyMC4yNDg0IDE3LjQzNjUgMjAuMTQ2OSAxOC4xOTE5QzIwLjA0ODIgMTguOTI1NyAxOS44Njc4IDE5LjMxNDIgMTkuNTkxIDE5LjU5MUMxOS4zMTQyIDE5Ljg2NzggMTguOTI1NyAyMC4wNDgyIDE4LjE5MTkgMjAuMTQ2OUMxNy40MzY1IDIwLjI0ODQgMTYuNDM1NCAyMC4yNSAxNSAyMC4yNUg5QzcuNTY0NTkgMjAuMjUgNi41NjM0NyAyMC4yNDg0IDUuODA4MTIgMjAuMTQ2OUM1LjA3NDM1IDIwLjA0ODIgNC42ODU3NyAxOS44Njc4IDQuNDA5MDEgMTkuNTkxQzQuMTMyMjUgMTkuMzE0MiAzLjk1MTggMTguOTI1NyAzLjg1MzE1IDE4LjE5MTlDMy43NTE1OSAxNy40MzY1IDMuNzUgMTYuNDM1NCAzLjc1IDE1WiIgZmlsbD0iI2ZmZmZmZiIvPgo8L3N2Zz4K);
}

*:focus-visible {
	outline: 1px double var(--action-color);
	outline-offset: .25rem;
}

article {
	font-size: 1.25em;
	max-width: 65ch;
	margin: 0 auto;
	padding: 1rem;
}

p {
	margin-block-start: 0;
}

picture {
	display: block;
	margin: 1rem .5rem;
}
picture &gt; img {
	display: block;
	max-width: 100%;
	height: auto;
}

table {
	display: block;
	width: 100%;
	border-collapse: collapse;
  margin: 1em 0;
  font-size: .7em;
  overflow: auto;
}

table thead {
	border-bottom: 1px solid var(--border);
}

table tbody tr:nth-child(2n+1) {
  background-color: var(--darkgrey);
}

table :is(th, td) {
	padding: .5rem;
}

ol:not([class]) {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0 0 0 2em;
}
ol:not([class]) li {
  counter-increment: item;
  margin-bottom: 0.5em;
}
ol:not([class]) li::before {
  content: counters(item, ".") ". ";
}
ol:not([class]) li li::before {
  content: counters(item, ".") " ";
}

hr {
	position: relative;
	border: none;
	border-top: 1px solid var(--border);
	overflow: visible;
	margin: 3em 0;
}

hr::after {
	content: '';
	position: absolute;
	width: .5em;
	height: .5em;
	border-radius: 100%;
	background-color: var(--light);
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

pre:not([class*="language-"]) {
  margin: .5em 0;
  line-height: 1.375; /* 22px /16 */
  -moz-tab-size: var(--syntax-tab-size);
  -o-tab-size: var(--syntax-tab-size);
  tab-size: var(--syntax-tab-size);
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
}

code {
	display: inline-block;
	padding: 0 .25em;
	background-color: var(--grey);
	border-radius: 3px;
  word-break: break-all;
}
pre &gt; code {
	background-color: transparent;
}

.align-center {
	text-align: center;
}

.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.skip {
	flex: none;
}

.notabene {
	margin: 1em;
	padding: 1em;
	font-size: .9em;
	font-style: italic;
	background-color: var(--grey);
	border-left: .25em solid var(--border);
}
.notabene::before {
	content: "N. B.";
	display: block;
	font-weight: bold;
	font-style: normal;
}

.post-item {
	box-sizing: border-box;
	position: relative;
  font-size: 1.2rem;
  color: var(--light);
  background-color: var(--darkgrey);
  border-radius: 1rem;
  min-height: 10rem;
  overflow: hidden;
	box-shadow: 0 0 2px 0 var(--border);
	transition: box-shadow var(--transition);
}
.post-item:is(:hover, :focus-within) {
	box-shadow: var(--dropshadow);
}
.post-item picture {
	margin: 0;
}
.post-item a {
	--action-color: var(--lighter);
	display: block;
	height: 100%;
}
.post-item a img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform var(--transition);
}
.post-item a:is(:hover, :focus-within) img {
	transform: scale(1.15);
}
.post-item a .post-item-title {
	--darkgrey-gradient-end: hsl(0 0% 15% / 0);
	--darkgrey-gradient-intermediate: hsl(0 0% 15% / .7);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: end;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	font-size: .9em;
	padding: 1em;
	text-align: left;
	background: linear-gradient(0deg, var(--darkgrey) 0%, var(--darkgrey-gradient-intermediate) 80%, var(--darkgrey-gradient-end) 100%);
}

.post-item .reading-time {
	position: absolute;
	top: 0;
	right: 0;
	background-color: var(--darkgreyalpha);
	padding: 0.5rem;
	font-size: .8rem;
	z-index: 1;
	border-bottom-left-radius: 1rem;
}

.metadata {
	font-size: .6em;
	font-weight: normal;
	font-style: italic;
}

@media screen and (min-width: 50em) {
	:root {
		--h1-font-size: 2.2em;
		--h2-font-size: 2em;
		--h3-font-size: 1.5em;
		--h4-font-size: 1.3em;
		--h5-font-size: 1.2em;
		--h5-font-size: 1.1em;
	}
	.post-item {
		max-height: 16rem;
	}
	a[href][download] {
		flex-wrap: nowrap;
	}
	a[href][download]::after {
		margin-inline-start: auto;
	}
}

/*==============================
*            Layout            *
==============================*/
header {
	flex: 0 0 14rem;
	background-color: var(--darkgrey);
}
main {
	flex: 1 1 auto;
	background-color: var(--dark);
}
@media screen and (min-width: 50em) {
	body {
		display: flex;
		flex-direction: row;
	}
	header {
		position: sticky;
		top: 0;
		left: 0;
		height: 100vh;
		height: 100dvh;
		overflow: auto;
	}
}
/*===============================
*            Sidebar            *
===============================*/
.home-link {
	display: block;
	margin: 0 auto;
	padding: 2rem;
}
.home-link img {
	display: block;
}
header {
	display: flex;
	flex-direction: column;
}
.nav {
	--action-color: var(--lighter);
	color: var(--lighter);
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 1.5rem;
	margin: 1rem;
	padding: 0;
}
.nav-item {
	line-height: 1.5;
}
:where(.nav-item, .tags-list) :is(a[href]:link, a[href]:visited) {
	text-decoration: none;
}

:where(.nav-item, .tags-list) :is(a[href]:hover, a[href]:focus) {
	text-decoration: underline;
}

.tags-list {
	--action-color: var(--lighter);
	list-style-type: none;
}
.nav .tags-list {
	display: none;
}

.network {
  list-style: none;
  padding: 1rem;
  margin-block: auto 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.network-icon {
  fill: var(--light);
  display: block;
  width: var(--networkIconSize);
  height: var(--networkIconSize);
	transition: fill var(--transition);
}
.network a:is(:hover, :focus-visible) .network-icon {
	fill: var(--action-color);
}

@media screen and (min-width: 50em) {
	.nav {
		flex-direction: column;
	}
	.nav .tags-list {
		display: block;
		padding-inline-start: 1.5rem;
	}
}

/*============================
*            Grid            *
============================*/
.grid {
  --auto-grid-min-size: 16rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: 1.5rem;
  padding: 1rem;
  margin: 0;
  list-style: none;
}
@media screen and (min-width: 50em) {
	.grid--highlight .grid-item:first-child {
		grid-area: 1 / 1 / 3 / 3;
		max-height: none;
		font-size: 2em;
	}
}

/*============================
*            Page            *
============================*/
.single-page-title {
	padding: .5rem 1rem 0;
}

/*============================
*            Post            *
============================*/
.feature {
	max-width: 100%;
	margin: 0;
}
.feature picture {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 3/1;
}
.feature picture::before {
	content: '';
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 1rem .3rem rgba(0, 0, 0, 0.5);
}
.feature img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.feature figcaption {
	text-align: center;
	padding: .5rem;
	font-style: italic;
	font-size: 0.8em;
}

.post-metadata {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
	list-style: none;
	padding: 0;
	margin-block: 0 2em;
	font-size: .8em;
	font-style: italic;
}
.post-metadata li {
	display: inline-block;
	white-space: nowrap;
}
.post-metadata li:not(:last-child):after {
	content: "â€¢";
	display: inline-block;
	margin-inline-start: 1em;
	color: var(--border);
}

.reading-time {
	display: flex;
	align-items: center;
	column-gap: .5rem;
}
.reading-time svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.article h1 {
	margin-block: 1em .5em;
}

.article :is(pre, code) {
  font-family: var(--font-family-monospace);
  font-size: .8em;
}

.links {
	display: flex;
	gap: 1rem;
	padding: 0 0 2rem;
	margin: 0;
}
.links &gt; * {
	flex: 1 1 50%;
}
.links-prev {
	text-align: left;
}
.links-next {
	text-align: right;
}

.wm-react {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}
.wm-react &gt; div {
	flex: 1 1 calc(50% - 0.5rem);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.wm-react-list {
	list-style: none;
	padding-inline-start: 1rem;
	margin: 0;
}
.wm-react-list li {
	position: relative;
	left: -.25rem;
}
.wm-react-list li :is(a, img) {
	display: block;
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
}
.wm-react-list li a {
	border: 2px solid var(--light);
}
code[class*=language-],pre[class*=language-]{color:#c5c8c6;text-shadow:0 1px rgba(0,0,0,.3);font-family:Inconsolata,Monaco,Consolas,'Courier New',Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)&gt;code[class*=language-],pre[class*=language-]{background:#1d1f21}:not(pre)&gt;code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#7c7c7c}.token.punctuation{color:#c5c8c6}.namespace{opacity:.7}.token.keyword,.token.property,.token.tag{color:#96cbfe}.token.class-name{color:#ffffb6;text-decoration:underline}.token.boolean,.token.constant{color:#9c9}.token.deleted,.token.symbol{color:#f92672}.token.number{color:#ff73fd}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a8ff60}.token.variable{color:#c6c5fe}.token.operator{color:#ededed}.token.entity{color:#ffffb6;cursor:help}.token.url{color:#96cbfe}.language-css .token.string,.style .token.string{color:#87c38a}.token.atrule,.token.attr-value{color:#f9ee98}.token.function{color:#dad085}.token.regex{color:#e9c062}.token.important{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}
/*
 * New diff- syntax
 */

pre[class*="language-diff-"] {
	--eleventy-code-padding: 1.25em;
	padding-left: var(--eleventy-code-padding);
	padding-right: var(--eleventy-code-padding);
}
.token.deleted {
	background-color: hsl(0, 51%, 37%);
	color: inherit;
}
.token.inserted {
	background-color: hsl(126, 31%, 39%);
	color: inherit;
}

/* Make the + and - characters unselectable for copy/paste */
.token.prefix.unchanged,
.token.prefix.inserted,
.token.prefix.deleted {
	-webkit-user-select: none;
	user-select: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-top: 2px;
	padding-bottom: 2px;
}
.token.prefix.inserted,
.token.prefix.deleted {
	width: var(--eleventy-code-padding);
	background-color: rgba(0,0,0,.2);
}

/* Optional: full-width background color */
.token.inserted:not(.prefix),
.token.deleted:not(.prefix) {
	display: block;
	margin-left: calc(-1 * var(--eleventy-code-padding));
	margin-right: calc(-1 * var(--eleventy-code-padding));
	text-decoration: none; /* override del, ins, mark defaults */
	color: inherit; /* override del, ins, mark defaults */
}</pre></body></html>