:root {
	--red-50: oklch(0.971 0.013 17.38);
	--red-100: oklch(0.936 0.032 17.717);
	--red-200: oklch(0.885 0.062 18.334);
	--red-300: oklch(0.808 0.114 19.571);
	--red-400: oklch(0.704 0.191 22.216);
	--red-500: oklch(0.637 0.237 25.331);
	--red-600: oklch(0.577 0.245 27.325);
	--red-700: oklch(0.505 0.213 27.518);
	--red-800: oklch(0.444 0.177 26.899);
	--red-900: oklch(0.396 0.141 25.723);
	--red-950: oklch(0.258 0.092 26.042);
	--orange-50: oklch(0.98 0.016 73.684);
	--orange-100: oklch(0.954 0.038 75.164);
	--orange-200: oklch(0.901 0.076 70.697);
	--orange-300: oklch(0.837 0.128 66.29);
	--orange-400: oklch(0.75 0.183 55.934);
	--orange-500: oklch(0.705 0.213 47.604);
	--orange-600: oklch(0.646 0.222 41.116);
	--orange-700: oklch(0.553 0.195 38.402);
	--orange-800: oklch(0.47 0.157 37.304);
	--orange-900: oklch(0.408 0.123 38.172);
	--orange-950: oklch(0.266 0.079 36.259);
	--amber-50: oklch(0.987 0.022 95.277);
	--amber-100: oklch(0.962 0.059 95.617);
	--amber-200: oklch(0.924 0.12 95.746);
	--amber-300: oklch(0.879 0.169 91.605);
	--amber-400: oklch(0.828 0.189 84.429);
	--amber-500: oklch(0.769 0.188 70.08);
	--amber-600: oklch(0.666 0.179 58.318);
	--amber-700: oklch(0.555 0.163 48.998);
	--amber-800: oklch(0.473 0.137 46.201);
	--amber-900: oklch(0.414 0.112 45.904);
	--amber-950: oklch(0.279 0.077 45.635);
	--yellow-50: oklch(0.987 0.026 102.212);
	--yellow-100: oklch(0.973 0.071 103.193);
	--yellow-200: oklch(0.945 0.129 101.54);
	--yellow-300: oklch(0.905 0.182 98.111);
	--yellow-400: oklch(0.852 0.199 91.936);
	--yellow-500: oklch(0.795 0.184 86.047);
	--yellow-600: oklch(0.681 0.162 75.834);
	--yellow-700: oklch(0.554 0.135 66.442);
	--yellow-800: oklch(0.476 0.114 61.907);
	--yellow-900: oklch(0.421 0.095 57.708);
	--yellow-950: oklch(0.286 0.066 53.813);
	--lime-50: oklch(0.986 0.031 120.757);
	--lime-100: oklch(0.967 0.067 122.328);
	--lime-200: oklch(0.938 0.127 124.321);
	--lime-300: oklch(0.897 0.196 126.665);
	--lime-400: oklch(0.841 0.238 128.85);
	--lime-500: oklch(0.768 0.233 130.85);
	--lime-600: oklch(0.648 0.2 131.684);
	--lime-700: oklch(0.532 0.157 131.589);
	--lime-800: oklch(0.453 0.124 130.933);
	--lime-900: oklch(0.405 0.101 131.063);
	--lime-950: oklch(0.274 0.072 132.109);
	--green-50: oklch(0.982 0.018 155.826);
	--green-100: oklch(0.962 0.044 156.743);
	--green-200: oklch(0.925 0.084 155.995);
	--green-300: oklch(0.871 0.15 154.449);
	--green-400: oklch(0.792 0.209 151.711);
	--green-500: oklch(0.723 0.219 149.579);
	--green-600: oklch(0.627 0.194 149.214);
	--green-700: oklch(0.527 0.154 150.069);
	--green-800: oklch(0.448 0.119 151.328);
	--green-900: oklch(0.393 0.095 152.535);
	--green-950: oklch(0.266 0.065 152.934);
	--emerald-50: oklch(0.979 0.021 166.113);
	--emerald-100: oklch(0.95 0.052 163.051);
	--emerald-200: oklch(0.905 0.093 164.15);
	--emerald-300: oklch(0.845 0.143 164.978);
	--emerald-400: oklch(0.765 0.177 163.223);
	--emerald-500: oklch(0.696 0.17 162.48);
	--emerald-600: oklch(0.596 0.145 163.225);
	--emerald-700: oklch(0.508 0.118 165.612);
	--emerald-800: oklch(0.432 0.095 166.913);
	--emerald-900: oklch(0.378 0.077 168.94);
	--emerald-950: oklch(0.262 0.051 172.552);
	--teal-50: oklch(0.984 0.014 180.72);
	--teal-100: oklch(0.953 0.051 180.801);
	--teal-200: oklch(0.91 0.096 180.426);
	--teal-300: oklch(0.855 0.138 181.071);
	--teal-400: oklch(0.777 0.152 181.912);
	--teal-500: oklch(0.704 0.14 182.503);
	--teal-600: oklch(0.6 0.118 184.704);
	--teal-700: oklch(0.511 0.096 186.391);
	--teal-800: oklch(0.437 0.078 188.216);
	--teal-900: oklch(0.386 0.063 188.416);
	--teal-950: oklch(0.277 0.046 192.524);
	--cyan-50: oklch(0.984 0.019 200.873);
	--cyan-100: oklch(0.956 0.045 203.388);
	--cyan-200: oklch(0.917 0.08 205.041);
	--cyan-300: oklch(0.865 0.127 207.078);
	--cyan-400: oklch(0.789 0.154 211.53);
	--cyan-500: oklch(0.715 0.143 215.221);
	--cyan-600: oklch(0.609 0.126 221.723);
	--cyan-700: oklch(0.52 0.105 223.128);
	--cyan-800: oklch(0.45 0.085 224.283);
	--cyan-900: oklch(0.398 0.07 227.392);
	--cyan-950: oklch(0.302 0.056 229.695);
	--sky-50: oklch(0.977 0.013 236.62);
	--sky-100: oklch(0.951 0.026 236.824);
	--sky-200: oklch(0.901 0.058 230.902);
	--sky-300: oklch(0.828 0.111 230.318);
	--sky-400: oklch(0.746 0.16 232.661);
	--sky-500: oklch(0.685 0.169 237.323);
	--sky-600: oklch(0.588 0.158 241.966);
	--sky-700: oklch(0.5 0.134 242.749);
	--sky-800: oklch(0.443 0.11 240.79);
	--sky-900: oklch(0.391 0.09 240.876);
	--sky-950: oklch(0.293 0.066 243.157);
	--blue-50: oklch(0.97 0.014 254.604);
	--blue-100: oklch(0.932 0.032 255.585);
	--blue-200: oklch(0.882 0.059 254.128);
	--blue-300: oklch(0.809 0.105 251.813);
	--blue-400: oklch(0.707 0.165 254.624);
	--blue-500: oklch(0.623 0.214 259.815);
	--blue-600: oklch(0.546 0.245 262.881);
	--blue-700: oklch(0.488 0.243 264.376);
	--blue-800: oklch(0.424 0.199 265.638);
	--blue-900: oklch(0.379 0.146 265.522);
	--blue-950: oklch(0.282 0.091 267.935);
	--indigo-50: oklch(0.962 0.018 272.314);
	--indigo-100: oklch(0.93 0.034 272.788);
	--indigo-200: oklch(0.87 0.065 274.039);
	--indigo-300: oklch(0.785 0.115 274.713);
	--indigo-400: oklch(0.673 0.182 276.935);
	--indigo-500: oklch(0.585 0.233 277.117);
	--indigo-600: oklch(0.511 0.262 276.966);
	--indigo-700: oklch(0.457 0.24 277.023);
	--indigo-800: oklch(0.398 0.195 277.366);
	--indigo-900: oklch(0.359 0.144 278.697);
	--indigo-950: oklch(0.257 0.09 281.288);
	--violet-50: oklch(0.969 0.016 293.756);
	--violet-100: oklch(0.943 0.029 294.588);
	--violet-200: oklch(0.894 0.057 293.283);
	--violet-300: oklch(0.811 0.111 293.571);
	--violet-400: oklch(0.702 0.183 293.541);
	--violet-500: oklch(0.606 0.25 292.717);
	--violet-600: oklch(0.541 0.281 293.009);
	--violet-700: oklch(0.491 0.27 292.581);
	--violet-800: oklch(0.432 0.232 292.759);
	--violet-900: oklch(0.38 0.189 293.745);
	--violet-950: oklch(0.283 0.141 291.089);
	--purple-50: oklch(0.977 0.014 308.299);
	--purple-100: oklch(0.946 0.033 307.174);
	--purple-200: oklch(0.902 0.063 306.703);
	--purple-300: oklch(0.827 0.119 306.383);
	--purple-400: oklch(0.714 0.203 305.504);
	--purple-500: oklch(0.627 0.265 303.9);
	--purple-600: oklch(0.558 0.288 302.321);
	--purple-700: oklch(0.496 0.265 301.924);
	--purple-800: oklch(0.438 0.218 303.724);
	--purple-900: oklch(0.381 0.176 304.987);
	--purple-950: oklch(0.291 0.149 302.717);
	--fuchsia-50: oklch(0.977 0.017 320.058);
	--fuchsia-100: oklch(0.952 0.037 318.852);
	--fuchsia-200: oklch(0.903 0.076 319.62);
	--fuchsia-300: oklch(0.833 0.145 321.434);
	--fuchsia-400: oklch(0.74 0.238 322.16);
	--fuchsia-500: oklch(0.667 0.295 322.15);
	--fuchsia-600: oklch(0.591 0.293 322.896);
	--fuchsia-700: oklch(0.518 0.253 323.949);
	--fuchsia-800: oklch(0.452 0.211 324.591);
	--fuchsia-900: oklch(0.401 0.17 325.612);
	--fuchsia-950: oklch(0.293 0.136 325.661);
	--pink-50: oklch(0.971 0.014 343.198);
	--pink-100: oklch(0.948 0.028 342.258);
	--pink-200: oklch(0.899 0.061 343.231);
	--pink-300: oklch(0.823 0.12 346.018);
	--pink-400: oklch(0.718 0.202 349.761);
	--pink-500: oklch(0.656 0.241 354.308);
	--pink-600: oklch(0.592 0.249 0.584);
	--pink-700: oklch(0.525 0.223 3.958);
	--pink-800: oklch(0.459 0.187 3.815);
	--pink-900: oklch(0.408 0.153 2.432);
	--pink-950: oklch(0.284 0.109 3.907);
	--rose-50: oklch(0.969 0.015 12.422);
	--rose-100: oklch(0.941 0.03 12.58);
	--rose-200: oklch(0.892 0.058 10.001);
	--rose-300: oklch(0.81 0.117 11.638);
	--rose-400: oklch(0.712 0.194 13.428);
	--rose-500: oklch(0.645 0.246 16.439);
	--rose-600: oklch(0.586 0.253 17.585);
	--rose-700: oklch(0.514 0.222 16.935);
	--rose-800: oklch(0.455 0.188 13.697);
	--rose-900: oklch(0.41 0.159 10.272);
	--rose-950: oklch(0.271 0.105 12.094);
	--slate-50: oklch(0.984 0.003 247.858);
	--slate-100: oklch(0.968 0.007 247.896);
	--slate-200: oklch(0.929 0.013 255.508);
	--slate-300: oklch(0.869 0.022 252.894);
	--slate-400: oklch(0.704 0.04 256.788);
	--slate-500: oklch(0.554 0.046 257.417);
	--slate-600: oklch(0.446 0.043 257.281);
	--slate-700: oklch(0.372 0.044 257.287);
	--slate-800: oklch(0.279 0.041 260.031);
	--slate-900: oklch(0.208 0.042 265.755);
	--slate-950: oklch(0.129 0.042 264.695);
	--gray-50: oklch(0.985 0.002 247.839);
	--gray-100: oklch(0.967 0.003 264.542);
	--gray-200: oklch(0.928 0.006 264.531);
	--gray-300: oklch(0.872 0.01 258.338);
	--gray-400: oklch(0.707 0.022 261.325);
	--gray-500: oklch(0.551 0.027 264.364);
	--gray-600: oklch(0.446 0.03 256.802);
	--gray-700: oklch(0.373 0.034 259.733);
	--gray-800: oklch(0.278 0.033 256.848);
	--gray-900: oklch(0.21 0.034 264.665);
	--gray-950: oklch(0.13 0.028 261.692);
	--zinc-50: oklch(0.985 0 0);
	--zinc-100: oklch(0.967 0.001 286.375);
	--zinc-200: oklch(0.92 0.004 286.32);
	--zinc-300: oklch(0.871 0.006 286.286);
	--zinc-400: oklch(0.705 0.015 286.067);
	--zinc-500: oklch(0.552 0.016 285.938);
	--zinc-600: oklch(0.442 0.017 285.786);
	--zinc-700: oklch(0.37 0.013 285.805);
	--zinc-800: oklch(0.274 0.006 286.033);
	--zinc-900: oklch(0.21 0.006 285.885);
	--zinc-950: oklch(0.141 0.005 285.823);
	--neutral-50: oklch(0.985 0 0);
	--neutral-100: oklch(0.97 0 0);
	--neutral-200: oklch(0.922 0 0);
	--neutral-300: oklch(0.87 0 0);
	--neutral-400: oklch(0.708 0 0);
	--neutral-500: oklch(0.556 0 0);
	--neutral-600: oklch(0.439 0 0);
	--neutral-700: oklch(0.371 0 0);
	--neutral-800: oklch(0.269 0 0);
	--neutral-900: oklch(0.205 0 0);
	--neutral-950: oklch(0.145 0 0);
	--stone-50: oklch(0.985 0.001 106.423);
	--stone-100: oklch(0.97 0.001 106.424);
	--stone-200: oklch(0.923 0.003 48.717);
	--stone-300: oklch(0.869 0.005 56.366);
	--stone-400: oklch(0.709 0.01 56.259);
	--stone-500: oklch(0.553 0.013 58.071);
	--stone-600: oklch(0.444 0.011 73.639);
	--stone-700: oklch(0.374 0.01 67.558);
	--stone-800: oklch(0.268 0.007 34.298);
	--stone-900: oklch(0.216 0.006 56.043);
	--stone-950: oklch(0.147 0.004 49.25);
	--black: #000;
	--white: #fff;

	/* Fonts selected from https://modernfontstacks.com/ */
	--code-font: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
		"DejaVu Sans Mono", monospace;

	--heading-font: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052,
		serif;

	--body-font: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
		source-sans-pro, sans-serif;

	/* Shared interface motion. Physical simulations keep their own timings. */
	--motion-duration-press: 120ms;
	--motion-duration-state: 160ms;
	--motion-duration-move: 220ms;
	--motion-duration-playful: 300ms;
	--motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--motion-ease-bounce: cubic-bezier(0.34, 2.2, 0.64, 1);

	--palette-1: #e69f00;
	--palette-2: #56b4e9;
	--palette-3: #009e73;
	--palette-4: #f0e442;
	--palette-5: #0072b2;
	--palette-6: #d55e00;
	--palette-7: #cc79a7;
	--palette-8: #2e3440;

	--palette-orange: var(--palette-1);
	--palette-blue: var(--palette-2);
	--palette-green: var(--palette-3);
	--palette-yellow: var(--palette-4);
	--palette-dark-blue: var(--palette-5);
	--palette-red: var(--palette-6);
	--palette-pink: var(--palette-7);
	--palette-grey: var(--palette-8);

	--link-color: var(--blue-700);
	--link-visited-color: var(--purple-800);
	--anchor-color: var(--yellow-700);

	--pride-1: #e40303;
	--pride-2: #ff8c00;
	--pride-3: #ffed00;
	--pride-4: #008026;
	--pride-5: #004dff;
	--pride-6: #750787;

	--top-bar-1: #4ba69d;
	--top-bar-2: #a0d9d3;
	--top-bar-3: #f29e38;
	--top-bar-4: #f27405;
	--top-bar-5: #bf4904;

	--dog-speech-bubble-color: var(--background-highlight);

	--max-width: 780px;

	--background-color: var(--white);
	--background-highlight: var(--stone-100);
	--color: var(--stone-900);
	--color-highlight: var(--stone-700);
	--footer-background-color: var(--background-highlight);
	--code-block-background-color: var(--stone-800);
	--code-block-text-color: var(--stone-300);

	--button-color: var(--stone-600);
	--button-text-color: var(--white);
	--button-background-color: var(--stone-600);
	--button-hover-color: var(--stone-500);
	--button-disabled-color: var(--stone-300);
	--button-ghost-text-color: var(--color);
	--button-ghost-hover-color: color-mix(
		in srgb,
		var(--button-background-color) 14%,
		transparent
	);
	--button-border-radius: 8px;

	--visual-container-background-color: var(--stone-100);
	--visual-container-surface-color: var(--stone-50);
	--visual-container-border-color: color-mix(
		in srgb,
		var(--color) 16%,
		transparent
	);
	--visual-container-separator-color: color-mix(
		in srgb,
		var(--color) 12%,
		transparent
	);
}

[data-theme="dark"] {
	--palette-1: color-mix(in srgb, #e69f00, black 20%);
	--palette-2: color-mix(in srgb, #56b4e9, black 20%);
	--palette-3: color-mix(in srgb, #009e73, black 20%);
	--palette-4: color-mix(in srgb, #f0e442, black 20%);
	--palette-5: color-mix(in srgb, #0072b2, black 20%);
	--palette-6: color-mix(in srgb, #d55e00, black 20%);
	--palette-7: color-mix(in srgb, #cc79a7, black 20%);
	--palette-8: color-mix(in srgb, #2e3440, black 20%);

	--background-color: var(--stone-950);
	--background-highlight: var(--stone-800);
	--color: var(--stone-300);
	--color-highlight: var(--stone-400);
	--footer-background-color: var(--background-highlight);

	--button-color: var(--stone-700);
	--button-text-color: var(--stone-100);
	--button-background-color: var(--stone-700);
	--button-hover-color: var(--stone-600);
	--button-disabled-color: color-mix(
		in oklch,
		var(--stone-700) 55%,
		var(--stone-800)
	);
	--button-ghost-text-color: var(--color);
	--button-ghost-hover-color: color-mix(
		in srgb,
		var(--button-background-color) 28%,
		transparent
	);
	--button-border-radius: 8px;

	--visual-container-background-color: var(--stone-800);
	--visual-container-surface-color: var(--stone-900);

	--link-color: var(--blue-400);
	--link-visited-color: var(--purple-400);

	--top-bar-1: color-mix(in srgb, #4ba69d, black 20%);
	--top-bar-2: color-mix(in srgb, #a0d9d3, black 20%);
	--top-bar-3: color-mix(in srgb, #f29e38, black 20%);
	--top-bar-4: color-mix(in srgb, #f27405, black 20%);
	--top-bar-5: color-mix(in srgb, #bf4904, black 20%);
}

html {
	--safe-area-top: env(safe-area-inset-top, 0px);
	--safe-area-right: env(safe-area-inset-right, 0px);
	--safe-area-bottom: env(safe-area-inset-bottom, 0px);
	--safe-area-left: env(safe-area-inset-left, 0px);
	color-scheme: light dark;
	background-color: var(--background-color);
}

html[data-theme="light"] {
	color-scheme: light;
}

html[data-theme="dark"] {
	color-scheme: dark;
}

body {
	background-color: var(--background-color);
	color: var(--color);
	font-size: 14pt;
	font-family: var(--body-font);
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
}

html.has-newsletter-footer,
html.has-newsletter-footer body {
	background-color: var(--footer-background-color);
}

.page-canvas {
	width: 100%;
	background-color: var(--background-color);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.page-canvas:only-child {
	min-height: 100vh;
}

aside {
	font-style: italic;
}

nav {
	width: 100%;
	margin-bottom: 1.5rem;
	padding-bottom: 0.5rem;
}

nav ul {
	padding-left: 0;
	width: 100%;
	margin: auto;
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

nav ul li {
	padding: 0.5rem;
	text-align: center;
	font-size: 0.9rem;
	font-weight: normal;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.1rem;
}

.pride.bar {
	filter: saturate(70%);
	display: flex;
}

.pride.bar .segment {
	height: 0.7rem;
	flex-grow: 1;
}

.pride.bar .segment:nth-child(1) {
	background-color: var(--pride-1);
}

.pride.bar .segment:nth-child(2) {
	background-color: var(--pride-2);
}

.pride.bar .segment:nth-child(3) {
	background-color: var(--pride-3);
}

.pride.bar .segment:nth-child(4) {
	background-color: var(--pride-4);
}

.pride.bar .segment:nth-child(5) {
	background-color: var(--pride-5);
}

.pride.bar .segment:nth-child(6) {
	background-color: var(--pride-6);
}

.bar {
	display: flex;
	width: 100%;
}

.bar .segment {
	height: 0.7rem;
	flex-grow: 1;
}

.bar .segment:nth-child(1) {
	background-color: var(--top-bar-1);
}

.bar .segment:nth-child(2) {
	background-color: var(--top-bar-2);
}

.bar .segment:nth-child(3) {
	background-color: var(--top-bar-3);
}

.bar .segment:nth-child(4) {
	background-color: var(--top-bar-4);
}

.bar .segment:nth-child(5) {
	background-color: var(--top-bar-5);
}

.bar .segment:nth-child(6) {
	background-color: var(--top-bar-1);
}

.bar .segment:nth-child(7) {
	background-color: var(--top-bar-2);
}

.bar .segment:nth-child(8) {
	background-color: var(--top-bar-3);
}

.bar .segment:nth-child(9) {
	background-color: var(--top-bar-4);
}

.bar .segment:nth-child(10) {
	background-color: var(--top-bar-5);
}

footer {
	padding-top: 2rem;
	color: var(--footer-background-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	padding-top: 2rem;
	font-family: var(--heading-font);
	line-height: 1.2;
}

a {
	color: var(--link-color);
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: var(--link-visited-color);
}

article .content a:not(.anchor) {
	text-decoration-line: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.12em;
}

a.anchor {
	color: var(--anchor-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-family: var(--code-font);
	background: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: 0.75rem;
	overflow: hidden;
	text-align: left;
	color: var(--text-color);

	--border-color: light-dark(var(--slate-300), var(--slate-700));
	--border-color-hover: light-dark(var(--slate-400), var(--slate-500));
	--background-color: light-dark(var(--slate-100), var(--slate-900));
	--stripe-background-color: light-dark(var(--slate-200), var(--slate-800));
	--header-background-color: light-dark(var(--slate-300), var(--slate-700));
	--text-color: light-dark(var(--slate-700), var(--slate-200));
}

table[center] {
	text-align: center;
}

table[fixed] {
	table-layout: fixed;
}

table thead tr {
	background: var(--header-background-color);
}

table thead th {
	padding: 0.75rem 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-color);
	text-align: center;
}

table[compact] thead th {
	padding: 0.5rem 0.75rem;
}

table tbody tr {
	transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

tbody td {
	padding: 0.85rem 1rem;
	border: 1px solid var(--border-color);
	font-size: 0.95rem;
}

table[striped] tbody tr:nth-child(even) {
	background: var(--stripe-background-color);
}

table[hover] tbody tr:hover {
	background: var(--stripe-background-color);
	box-shadow: inset 0 0 0 1px var(--border-color-hover);
}

table[hover][striped] tbody tr:hover {
	background: var(--stripe-background-color);
	box-shadow: inset 0 0 0 1px var(--border-color-hover);
}

tbody tr:last-child td {
	border-bottom: none;
}

table[compact] tbody td {
	padding: 0.3rem 0.6rem;
}

article {
	container-type: inline-size;
	max-width: var(--max-width);
	width: 100%;
	padding: 1rem;
	padding-right: max(1rem, var(--safe-area-right));
	padding-left: max(1rem, var(--safe-area-left));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.post {
	align-items: stretch;
	margin-inline: auto;
}

article h1 {
	font-size: 3rem;
	text-wrap: pretty;
	text-align: center;
}

article h2 {
	font-size: 2rem;
}

article h3 {
	font-size: 1.5rem;
}

article p {
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
}

article img {
	max-width: 95%;
	margin: auto;
}

article blockquote {
	color: var(--text-color);
	font-style: italic;
	font-family: var(--heading-font);
	background: var(--background-highlight);
	border-left: 10px solid var(--palette-blue);
	padding-left: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-right: 0.7em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

article blockquote blockquote {
	border-left: 10px solid #d08770;
}

article blockquote.warn {
	border-left: 10px solid #ebcb8b;
}

article blockquote.success {
	border-left: 10px solid #a3be8c;
}

article blockquote.danger {
	border-left: 10px solid #bf616a;
}

article blockquote.haskie {
	background: none;
	padding: 1rem 0 1rem 0;
	border: none;
	margin: 0 0 0 0;
	display: flex;
	align-items: center;
}

article blockquote.haskie img {
	width: 100px;
	margin: 0 1rem 0 0;
}

article blockquote.haskie p {
	background-color: var(--dog-speech-bubble-color);
	padding: 1rem;
	border-radius: 1rem;
	position: relative;
}

article blockquote.haskie p::after {
	content: "";
	border: 20px solid transparent;
	position: absolute;
	border-right-color: var(--dog-speech-bubble-color);
	border-left: 0;
	left: -20px;
	top: 50%;
	margin-top: -20px;
}

article blockquote.haskie.warn p {
	background-color: #ebcb8b;
}

article blockquote.haskie.warn p::after {
	border-right-color: #ebcb8b;
}

.post-header .post-meta,
article.post > main > header .post-meta {
	text-align: center;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
	font-variant: small-caps;
	color: var(--color-highlight);
}

article.post > main > header h1 {
	margin-bottom: 0.5rem;
}

article h1:first-child {
	text-align: center;
}

article pre {
	box-sizing: border-box;
	border: 1px dashed var(--visual-container-border-color);
	border-radius: 1rem;
	padding: 1rem;
	overflow-x: auto;
}

article code {
	font-family: var(--code-font);
}

article p code {
	font-weight: bold;
}

article li code {
	font-weight: bold;
}

main {
	width: 100%;
	max-width: 100%;
}

.hero {
	max-width: 380px;
	width: 100%;
	height: auto;
	margin: auto;
	margin-top: -40px;
	display: block;
}

.posts > header {
	width: 100%;
	padding-bottom: 2rem;
}

.hero-topleft {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 140px;
	margin-left: -15px;
	margin-top: -50px;
}

.post-header {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--max-width);
	padding: 1rem 1rem 1.5rem;
	padding-right: max(1rem, var(--safe-area-right));
	padding-left: max(1rem, var(--safe-area-left));
	margin: auto;
	text-align: center;
}

.post-header h1 {
	font-size: 3rem;
	line-height: 1.2;
	text-wrap: pretty;
	padding: 0;
	margin: 1rem;
}

.footnote-definition {
	display: inline;
	float: right;
	position: relative;
	width: 17vw;
	margin-right: -21vw;
	font-size: 80%;
	color: #6f7d98;
}

.footnote-definition code {
	color: #809bbd;
}

.footnote-definition sup {
	display: inline;
}

.footnote-definition p {
	display: inline;
}

@media (max-width: 1300px) {
	.footnote-definition {
		display: block;
		float: none;
		margin: 2% 7% 2% 7%;
		width: 80%;
		font-size: 15px;
	}
}

.embeddable-buttondown-form {
	width: 100%;
	max-width: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: var(--background-highlight);
	padding-bottom: 0.5rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.embeddable-buttondown-form a {
	color: var(--color-highlight);
	font-variant: small-caps;
	text-decoration: none;
}

.embeddable-buttondown-form input[type="email"] {
	max-width: 100%;
	width: 18rem;
	border: none;
	border-radius: 0.5rem;
	padding: 0.5rem;
	text-align: center;
	background-color: var(--background-color);
	border: 1px solid
		color-mix(in srgb, var(--background-color), var(--color) 30%);
}

.embeddable-buttondown-form input[type="submit"] {
	max-width: 100%;
	width: 12rem;
	border: 0;
	border-radius: 0.5rem;
	padding: 0.5rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	background: var(--button-background-color);
	color: var(--button-text-color);
	font-size: 0.9rem;
	cursor: pointer;
}

.embeddable-buttondown-form input[type="submit"]:hover {
	background: var(--button-hover-color);
}

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

.skip-link {
	position: fixed;
	z-index: 1000;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	background: var(--button-background-color);
	color: var(--button-text-color);
	transform: translateY(-200%);
}

.skip-link:focus-visible {
	transform: translateY(0);
	outline: 3px solid var(--anchor-color);
	outline-offset: 3px;
}

.newsletter-footer {
	width: 100%;
	color: var(--color);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	padding-right: max(1rem, var(--safe-area-right));
	padding-bottom: calc(1rem + var(--safe-area-bottom));
	padding-left: max(1rem, var(--safe-area-left));
	background: var(--background-highlight);
	gap: 1rem;
	color: var(--color);
	text-align: center;
	font-size: 1rem;
}

.social-links {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
}

.black {
	color: #000;
}

.grey {
	color: #2e3440;
}

.orange {
	color: #e69f00;
}

.lightBlue {
	color: #56b4e9;
}

.green {
	color: #009e73;
}

.yellow {
	color: #f0e442;
}

.blue {
	color: #0072b2;
}

.red {
	color: #d55e00;
}

.purple {
	color: #cc79a7;
}

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.subheading {
	margin: 0;
	padding: 0;
	margin-top: -1rem;
	margin-bottom: 2rem;
	font-family: var(--heading-font);
	color: #4c566a;
	font-size: 1rem;
	text-align: center;
	font-style: italic;
}

.dog blockquote {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.5rem;
	font-family: var(--body-font);
	background: none;
	padding: 1rem 0 1rem 0;
	border: none;
	margin: 0 0 0 0;
	display: flex;
	align-items: center;
	margin-left: max(1rem, 3vw);
	margin-right: max(1rem, 3vw);
}

.dog.right blockquote {
	flex-direction: row-reverse;
}

.dog.right p::after {
	border-left-color: var(--dog-speech-bubble-color);
	border-right: 0;
	right: -14px;
}

.dog.left p::after {
	border-right-color: var(--dog-speech-bubble-color);
	border-left: 0;
	left: -14px;
}

.dog img {
	width: 100px;
	max-width: 100px;
	margin: unset;
}

.dog p {
	background-color: var(--dog-speech-bubble-color);
	padding: 1rem;
	border-radius: 1rem;
	position: relative;
}

.dog p::after {
	content: "";
	border: 15px solid transparent;
	position: absolute;
	top: 50%;
	margin-top: -15px;
}

.dog a {
	color: var(--link-color);
	text-decoration: none;
	cursor: pointer;
}

.dog a:visited {
	color: var(--link-visited-color);
}

.dog a:hover {
	text-decoration: underline;
}

.dog a.anchor {
	color: #d08770;
}

@container (width < 60ch) {
	.dog.left blockquote,
	.dog.right blockquote {
		flex-direction: column-reverse;
		gap: 0rem;
		padding-bottom: 0;
	}

	.dog.right p::after,
	.dog.left p::after {
		border: 15px solid transparent;
		position: absolute;

		margin-top: 0;
		top: 100%;
		right: 50%;
		left: unset;

		border: 15px solid transparent;
		border-top-color: var(--dog-speech-bubble-color);
	}
}

@supports not (container-type: inline-size) {
	@media screen and (max-width: 60ch) {
		.dog.left blockquote,
		.dog.right blockquote {
			flex-direction: column-reverse;
			gap: 0rem;
			padding-bottom: 0;
		}

		.dog.right p::after,
		.dog.left p::after {
			border: 15px solid transparent;
			position: absolute;

			margin-top: 0;
			top: 100%;
			right: 50%;
			left: unset;

			border: 15px solid transparent;
			border-top-color: var(--dog-speech-bubble-color);
		}
	}
}

.post-listing date {
	font-family: var(--code-font);
	color: var(--palette-grey);
	font-size: 0.9rem;
}

.z-code {
	color: var(--code-block-text-color);
	background-color: var(--code-block-background-color);
}

/* Monokai's keyword pink is below AA contrast on the site's code background. */
.z-13 {
	color: #ff568f;
}

.giallo-l {
	display: inline-block;
	min-height: 1lh;
	width: 100%;
}