.postlist { counter-reset: start-from 65 }
:root {
	--font-family: 'Helvetica',-apple-system, system-ui, sans-serif;
	--background-color: light-dark(oklch(0.997 0.00 0),oklch(0.185 0.0000 180));
	--text-color: light-dark(oklch(0.270 0.010 220),oklch(0.970 0.004 220));
	--text-color-link: light-dark(oklch(0.587 0.224 21),oklch(0.799 0.118 216));
	--text-color-link-active: light-dark(oklch(0.401 0.155 293),oklch(0.854 0.171 92));
	--text-color-link-visited: light-dark(oklch(0.539 0.098 220),oklch(0.630 0.236 15));
	--heading: light-dark(oklch(0.587 0.224 21),oklch(0.854 0.171 92));
	--header-bottom: light-dark(oklch(0.321 0.000 0.0),oklch(0.808 0.000 0.0));
	--font-size-s: clamp(1.0417rem, 1.0214rem + 0.1014vw, 1.1rem);
	--font-size-base: clamp(1.25rem, 1.2065rem + 0.2174vw, 1.375rem);
	--font-size-lg: clamp(1.8rem, 1.6788rem + 0.606vw, 2.1484rem);
	--font-size-xxl: clamp(2.592rem, 2.3259rem + 1.3303vw, 3.3569rem);
}
.fa, .fas, .far, .fab {
	font-display: swap;
}
* {
	box-sizing: content-box;
}
html {
	color-scheme: light dark;
}
html,
body {
	color: var(--text-color); 
	margin: 0 auto;
	background-color: var(--background-color);
	font-family: var(--font-family);
	font-size: var(--font-size-s);
	font-weight: 200;
}
header {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 0;
}
h1 {
	color: var(--heading);
	font-size: var(--font-size-lg);
	text-shadow: 2px 2px var(--text-color);
	font-weight: 900;
}
.home-link {
	color: var(--text-color-link-visited) !important;
	font-size: var(--font-size-xxl);
	text-shadow: 3px 3px var(--text-color);
	font-weight: 900;
	margin: 0;
	text-decoration: none;
}
.nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 1.5rem 0.5rem 1.5rem 0.5rem;
	margin: 0 0 1rem;
	justify-content: center;
	list-style: none;
}
.nav-item {
	margin: 6px;
	font-weight: 400;
	font-size: var(--font-size-s);
}
.nav-item a[href] {
	color: var(--text-color);
	text-decoration-color: var(--text-color-link);
	text-decoration-thickness: .175em;
	text-underline-offset: .10rem;
}
/* Critical for LCP element */
.postlist {
	list-style: none;
	padding: 0;
}
.postlist-link {
	font-size: var(--font-size-base);
	font-weight: 400;
	padding-left: .25em;
	padding-right: .5em;
	text-decoration-thickness: .175em;
	text-underline-offset: .10rem;
	color: var(--text-color);
}
.postlist-date {
	font-size: var(--font-size-s);
	font-weight: 400;
	color: var(--header-bottom);
}
			/* Defaults */
@font-face {
  font-family: Departure Mono;
  src: url("../../fonts/DepartureMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Atkinson Hyperlegible;
  src: url("../../fonts/Atkinson-Hyperlegible-Regular-102a.woff2") format("woff2");
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Atkinson Hyperlegible Bold;
  src: url("../../fonts/Atkinson-Hyperlegible-Bold-102a.woff2") format("woff2");
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Atkinson Hyperlegible Italic;
  src: url("../../fonts/Atkinson-Hyperlegible-Italic-102a.woff2") format("woff2");
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Atkinson Hyperlegible Bold Italic;
  src: url("../../fonts/Atkinson-Hyperlegible-BoldItalic-102a.woff2") format("woff2");
  font-style: normal;
  font-display: block;
}

:root {
	--font-family: 'Atkinson Hyperlegible',-apple-system, system-ui, sans-serif;
	--font-family-bold: 'Atkinson Hyperlegible Bold',-apple-system, system-ui, sans-serif;
	--font-family-monospace: 'Departure Mono',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;

	--color-note: light-dark(oklch(0.543 0.082 198),oklch(0.755 0.105 276));
	--color-tip: light-dark(oklch(0.486 0.193 29),oklch(0.704 0.192 37));
	--color-warning: light-dark(oklch(0.554 0.117 75),oklch(0.720 0.140 80));
	--color-severe: light-dark(oklch(0.557 0.160 45),oklch(0.654 0.158 48));
	--color-caution: light-dark(oklch(0.557 0.206 25),oklch(0.665 0.205 27));
	--color-important: light-dark(oklch(0.563 0.207 295),oklch(0.661 0.193 298));

	--background-color: light-dark(oklch(0.997 0.00 0),oklch(0.185 0.0000 180));
	--pagefind-ui-background: light-dark(oklch(0.997 0.00 0),oklch(0.185 0.0000 180)) !important;

	--text-color: light-dark(oklch(0.270 0.010 220),oklch(0.970 0.004 220));
	--pagefind-ui-text: light-dark(oklch(0.270 0.010 220),oklch(0.970 0.004 220)) !important;
    --text-color-link: light-dark(oklch(0.587 0.224 21),oklch(0.799 0.118 216));
    --text-color-link-active: light-dark(oklch(0.401 0.155 293),oklch(0.854 0.171 92));
    --text-color-link-visited: light-dark(oklch(0.539 0.098 220),oklch(0.630 0.236 15));

	--border-color: light-dark(oklch(0.564 0.217 27),oklch(0.665 0.205 27));
	--pagefind-ui-border: light-dark(oklch(0.564 0.217 27),oklch(0.665 0.205 27)) !important;

	--code-background-color: light-dark(oklch(0.961 0.000 0.0),oklch(0.104 0.003 197));
    --code-color: light-dark(oklch(0.252 0.000 0.0),oklch(0.898 0.000 0.0));

	--heading: light-dark(oklch(0.587 0.224 21),oklch(0.854 0.171 92));
    --heading-shadow: light-dark(oklch(0.401 0.155 293),oklch(0.630 0.236 15));
    --header-bottom: light-dark(oklch(0.321 0.000 0.0),oklch(0.808 0.000 0.0));
  
    --button-text: light-dark(oklch(1.000 0.000 0), oklch(1.000 0.000 0));
	--syntax-tab-size: 2;

	--pagefind-ui-scale: 1;
	--pagefind-ui-primary: light-dark(oklch(0.587 0.224 21),oklch(0.854 0.171 92)) !important;
	--pagefind-ui-tag: light-dark(oklch(0.587 0.224 21),oklch(0.854 0.171 92)) !important;
	--pagefind-ui-border-width: 2px;
	--pagefind-ui-border-radius: 8px;
	--pagefind-ui-image-border-radius: 8px;
	--pagefind-ui-image-box-ratio: 3 / 2;
	--pagefind-ui-font: var(--font-family) !important;

	--font-size-xs: clamp(0.8681rem, 0.8639rem + 0.0208vw, 0.88rem);
    --font-size-s: clamp(1.0417rem, 1.0214rem + 0.1014vw, 1.1rem);
    --font-size-base: clamp(1.25rem, 1.2065rem + 0.2174vw, 1.375rem);
    --font-size-md: clamp(1.5rem, 1.4239rem + 0.3804vw, 1.7188rem);
    --font-size-lg: clamp(1.8rem, 1.6788rem + 0.606vw, 2.1484rem);
    --font-size-xl: clamp(2.16rem, 1.9772rem + 0.914vw, 2.6855rem);
    --font-size-xxl: clamp(2.592rem, 2.3259rem + 1.3303vw, 3.3569rem);
    --font-size-max: clamp(3.1104rem, 2.7327rem + 1.8883vw, 4.1962rem);
}

/* Global */
* { box-sizing: content-box; }

html { color-scheme: light dark; }

html, body {
	color: var(--text-color);
	text-wrap: pretty;
	margin: 0 auto;
	background-color: var(--background-color);
	font-family: var(--font-family);
	font-size: var(--font-size-s);
	font-style: normal;
	font-weight: 200;
}

body { max-width: 57em; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-bold); }

h1 {
	color: var(--heading);
	font-size: var(--font-size-lg);
	text-shadow: 2px 2px var(--text-color);
}

h2 {
	font-size: var(--font-size-md);
	color: var(--text-color-link);
}

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

img, picture {
	height: auto;
	max-width: 100%;
	margin: 0 auto;
}

.svg { display: block; align-content: center; margin: 0; }

p { line-height: 1.75; }
p:last-child { margin-bottom: 0; }
p.caption { text-align: center; font-size: var(--font-size-xs); }

li { line-height: 2.0; }

a[href], a[href]:visited, a[href]:hover, a[href]:active {
	color: var(--text-color);
	position: relative;
	text-decoration-thickness: .175em;
	text-decoration-style: solid;
}
a[href] { text-decoration-color: var(--text-color-link); text-underline-offset: .10rem; }
a[href]:visited { text-decoration-color: var(--text-color-link-visited); text-underline-offset: .10rem; }
a[href]:hover, a[href]:active { text-decoration-color: var(--text-color-link-active); text-underline-offset: .16rem; }

blockquote {
	padding: 0 1em;
	color: var(--header-bottom);
	border-left: 0.25em solid var(--text-color-link-active);
}

button {
	display: inline-block;
	background: var(--background-color);
	color: var(--text-color-link);
	padding: 5px;
	border: none;
	place-items: center;
	font-size: inherit;
	font-weight: 900;
	line-height: 1.25em;
	cursor: pointer;
}
button a { text-decoration: none !important; }
button:hover, button:focus { color: var(--text-color-link-active); border: none; }

main, footer { padding: 1.25rem; }

header:after { content: ""; display: table; clear: both; }

/* Nav gradient border mixin */
.links-nextprev,
.nav {
	border-width: .150em;
	border-image-slice: 1;
	border-image-source: linear-gradient(90deg, var(--text-color-link-visited), var(--text-color-link), var(--text-color-link-active)) !important;
}

.links-nextprev {
	display: flex;
	justify-content: space-between;
	gap: .5em 1em;
	list-style: "";
	padding: 1em 0;
	border-top: .150em solid;
}
.links-nextprev > * { flex-grow: 1; }
.links-nextprev-next { text-align: right; }

table { margin: 1em 0; }
table td, table th { padding-right: 1em; }

pre {
	background-color: #090200 !important;
	border: none !important;
	border-radius: 0 !important;
}
pre:not([class*="language-"]) {
	margin: .5em 0;
	line-height: 1.375;
	-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;
	overflow-x: auto;
}

code {
	word-break: break-all;
	background-color: var(--code-background-color);
	color: var(--border-color);
	padding: .225em;
}

/* Header */
header {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 0;
}

.code-icon { display: inline-flex; vertical-align: middle; }
.code-icon.svg-baseline svg { top: .125em; position: relative; }

.home-link {
	color: var(--text-color-link-visited) !important;
	font-size: var(--font-size-xxl);
	text-shadow: 3px 3px var(--text-color);
	font-family: var(--font-family-bold);
	margin: 0;
}
.home-link:link:not(:hover),
.home-link:link:hover { text-decoration: none; }

.footnotes { border-top: 2px solid var(--text-color-link-visited) !important; }

/* Nav */
.nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	list-style: none;
	border-bottom: .150em solid;
	padding: 1.5rem 0.5rem;
	margin: 0 0 1rem;
}

.nav-item { margin: 6px; font-weight: 400; font-size: var(--font-size-s); }
.nav-item a[href]:not(:hover) { text-decoration-color: var(--text-color-link); }
.nav-item a[href][aria-current="page"] {
	color: var(--text-color-link-active) !important;
	text-decoration-thickness: .175em;
	text-decoration-style: solid;
	text-underline-offset: .16rem;
	font-weight: 900;
}

/* Post list */
.postlist { list-style: none; padding: 0; }
.postlist :first-child { margin-top: 0 !important; margin-bottom: 0.65em !important; }
.postlist-item {
	display: flow-root;
	align-items: baseline;
	counter-increment: start-from -1;
	margin-bottom: 0.65em;
}
.postlist-item:before {
	display: inline-block;
	pointer-events: none;
	content: "" counter(start-from, decimal-leading-zero);
	line-height: 100%;
	text-align: right;
}
.postlist-date, .postlist-item:before { font-size: var(--font-size-s); font-weight: 400; color: var(--header-bottom); }
.postlist-description { font-size: var(--font-size-s); color: var(--text-color); font-weight: 500; }
.postlist-link {
	font-size: var(--font-size-base);
	font-weight: 400;
	flex-basis: calc(100% - 1.5rem);
	padding: 0 .5em 0 .25em;
	text-underline-position: from-font;
	text-underline-offset: 0.10rem;
	text-decoration-thickness: .175em;
	text-wrap: pretty;
}
.postlist-item-active .postlist-link { font-weight: bold; }

/* Tags */
.post-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: lowercase;
	text-decoration-color: var(--text-color-link);
	text-decoration-thickness: .175em;
	text-underline-offset: .10rem;
	font-weight: bold;
}
.postlist-item > .post-tag { align-self: center; }

.post-metadata {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .5em;
	list-style: none;
	padding: 0;
	margin: 0;
}
.post-metadata time { margin-right: 1em; }

/* Footer */
.footer { justify-content: center; }
.footer-links {
	list-style: none;
	display: flex;
	color: var(--text-color-link);
	justify-content: center;
	gap: 1.5rem;
	padding-left: 0;
}

/* Crucial container */
.crucial_container {
    --ct-bg: var(--background-color) !important;
    --ct-card-bg: var(--background-color) !important;
    --ct-text: var(--text-color) !important;
    --ct-heading: var(--heading) !important;
    --ct-link: var(--text-color-link) !important;
    --ct-button-hover: rgba(255,255,255,0.08) !important;
}

/* Responsive */
@media screen and (max-width: 600px) {
  .column { width: 100%; }
}

heading-anchors:not(:defined) :is(h2,h3,h4,h5,h6):after {
	content: "#";
	padding: 0 .25em;
	opacity: 0;
}
			.pagefind-ui {
    width: 100%;
    color: var(--pagefind-ui-text);
    font-family: var(--pagefind-ui-font);
}
.pagefind-ui__hidden {
    display: none !important;
}
.pagefind-ui__suppressed {
    opacity: 0;
    pointer-events: none;
}
.pagefind-ui__form {
    position: relative;
}
.pagefind-ui__form::before {
    background-color: var(--pagefind-ui-text);
    width: calc(18px * var(--pagefind-ui-scale));
    height: calc(18px * var(--pagefind-ui-scale));
    top: calc(23px * var(--pagefind-ui-scale));
    left: calc(20px * var(--pagefind-ui-scale));
    content: "";
    position: absolute;
    display: block;
    opacity: 0.7;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
    -webkit-mask-size: 100%;
    mask-size: 100%;
    z-index: 9;
    pointer-events: none;
}
.pagefind-ui__search-input {
    height: calc(64px * var(--pagefind-ui-scale));
    padding: 0 calc(70px * var(--pagefind-ui-scale)) 0
      calc(54px * var(--pagefind-ui-scale));
    background-color: var(--pagefind-ui-background);
    border: .500em solid;
	border-image-slice: 1;
	border-width: .150em;
	border-image-source: linear-gradient(90deg, var(--text-color-link-visited),var(--text-color-link),var(--text-color-link-active)) !important;
    font-size: calc(21px * var(--pagefind-ui-scale));
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    font-weight: 700;
}
.pagefind-ui__search-input::placeholder {
    opacity: 0.6;
}
.pagefind-ui__search-clear {
    position: absolute;
    top: calc(3px * var(--pagefind-ui-scale));
    right: calc(1.5px * var(--pagefind-ui-scale));
    
    padding: 0 calc(15px * var(--pagefind-ui-scale)) 0
      calc(2px * var(--pagefind-ui-scale));
    color: var(--pagefind-ui-text);
    font-size: calc(14px * var(--pagefind-ui-scale));
    cursor: pointer;
    background-color: var(--pagefind-ui-background);
    border-radius: var(--pagefind-ui-border-radius);
}
.pagefind-ui__drawer {
    gap: calc(60px * var(--pagefind-ui-scale));
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.pagefind-ui__results-area {
    min-width: min(calc(400px * var(--pagefind-ui-scale)), 100%);
    flex: 1000;
    margin-top: calc(20px * var(--pagefind-ui-scale));
}
.pagefind-ui__results {
    padding: 0;
}
.pagefind-ui__message {
    box-sizing: content-box;
    font-size: calc(16px * var(--pagefind-ui-scale));
    height: calc(24px * var(--pagefind-ui-scale));
    padding: calc(20px * var(--pagefind-ui-scale)) 0;
    display: flex;
    align-items: center;
    font-weight: 700;
    margin-top: 0;
}
.pagefind-ui__button {
    margin-top: calc(40px * var(--pagefind-ui-scale));
    border: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
    border-radius: var(--pagefind-ui-border-radius);
    height: calc(48px * var(--pagefind-ui-scale));
    padding: 0 calc(12px * var(--pagefind-ui-scale));
    font-size: calc(16px * var(--pagefind-ui-scale));
    color: var(--pagefind-ui-primary);
    background: var(--pagefind-ui-background);
    width: 100%;
    text-align: center;
    font-weight: 700;
    cursor: pointer;
}
.pagefind-ui__button:hover {
    border-color: var(--pagefind-ui-primary);
    color: var(--pagefind-ui-primary);
    background: var(--pagefind-ui-background);  
}
			/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: 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;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #272822;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #8292a2;
}

.token.punctuation {
	color: #f8f8f2;
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #f92672;
}

.token.boolean,
.token.number {
	color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
	color: #e6db74;
}

.token.keyword {
	color: #66d9ef;
}

.token.regex,
.token.important {
	color: #fd971f;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}