*
{
	margin: 0;
	padding: 0;
}

:root
{
	--color-gray-1: #f6f6f6;
	--color-gray-2: #e2e2e2;
	--color-gray-3: #8b8b8b;
	--color-gray-4: #6f6f6f;
	--color-gray-5: #3e3e3e;
	--color-gray-6: #222222;

	--color-rose-1: #fff7f9;
	--color-rose-2: #ffdce5;
	--color-rose-3: #ff3b8d;
	--color-rose-4: #db0072;
	--color-rose-5: #800040;
	--color-rose-6: #4c0023;

	--color-raspberry-1: #fff8f8;
	--color-raspberry-2: #ffdddf;
	--color-raspberry-3: #ff426c;
	--color-raspberry-4: #de0051;
	--color-raspberry-5: #82002c;
	--color-raspberry-6: #510018;

	--color-red-1: #fff8f6;
	--color-red-2: #ffddd8;
	--color-red-3: #ff4647;
	--color-red-4: #e0002b;
	--color-red-5: #830014;
	--color-red-6: #530003;

	--color-orange-1: #fff8f5;
	--color-orange-2: #ffded1;
	--color-orange-3: #fd4d00;
	--color-orange-4: #cd3c00;
	--color-orange-5: #752100;
	--color-orange-6: #401600;

	--color-cinnamon-1: #fff8f3;
	--color-cinnamon-2: #ffdfc6;
	--color-cinnamon-3: #d57300;
	--color-cinnamon-4: #ac5c00;
	--color-cinnamon-5: #633300;
	--color-cinnamon-6: #371d00;

	--color-amber-1: #fff8ef;
	--color-amber-2: #ffe0b2;
	--color-amber-3: #b98300;
	--color-amber-4: #926700;
	--color-amber-5: #523800;
	--color-amber-6: #302100;

	--color-yellow-1: #fff9e5;
	--color-yellow-2: #ffe53e;
	--color-yellow-3: #9c8b00;
	--color-yellow-4: #7d6f00;
	--color-yellow-5: #463d00;
	--color-yellow-6: #292300;

	--color-lime-1: #f7ffac;
	--color-lime-2: #d5f200;
	--color-lime-3: #819300;
	--color-lime-4: #677600;
	--color-lime-5: #394100;
	--color-lime-6: #222600;

	--color-chartreuse-1: #e5ffc3;
	--color-chartreuse-2: #98fb00;
	--color-chartreuse-3: #5c9b00;
	--color-chartreuse-4: #497c00;
	--color-chartreuse-5: #264500;
	--color-chartreuse-6: #182600;

	--color-green-1: #e0ffd9;
	--color-green-2: #72ff6c;
	--color-green-3: #00a21f;
	--color-green-4: #008217;
	--color-green-5: #004908;
	--color-green-6: #062800;

	--color-emerald-1: #dcffe6;
	--color-emerald-2: #5dffa2;
	--color-emerald-3: #00a05a;
	--color-emerald-4: #008147;
	--color-emerald-5: #004825;
	--color-emerald-6: #002812;

	--color-aquamarine-1: #daffef;
	--color-aquamarine-2: #42ffc6;
	--color-aquamarine-3: #009f78;
	--color-aquamarine-4: #007f5f;
	--color-aquamarine-5: #004734;
	--color-aquamarine-6: #00281b;

	--color-teal-1: #d7fff7;
	--color-teal-2: #00ffe4;
	--color-teal-3: #009e8c;
	--color-teal-4: #007c6e;
	--color-teal-5: #00443c;
	--color-teal-6: #002722;

	--color-cyan-1: #c4fffe;
	--color-cyan-2: #00fafb;
	--color-cyan-3: #00999a;
	--color-cyan-4: #007a7b;
	--color-cyan-5: #004344;
	--color-cyan-6: #002525;

	--color-powder-1: #dafaff;
	--color-powder-2: #8df0ff;
	--color-powder-3: #0098a9;
	--color-powder-4: #007987;
	--color-powder-5: #004048;
	--color-powder-6: #002227;

	--color-sky-1: #e3f7ff;
	--color-sky-2: #aee9ff;
	--color-sky-3: #0094b4;
	--color-sky-4: #007590;
	--color-sky-5: #00404f;
	--color-sky-6: #001f28;

	--color-cerulean-1: #e8f6ff;
	--color-cerulean-2: #b9e3ff;
	--color-cerulean-3: #0092c5;
	--color-cerulean-4: #00749d;
	--color-cerulean-5: #003c54;
	--color-cerulean-6: #001d2a;

	--color-azure-1: #e8f2ff;
	--color-azure-2: #c6e0ff;
	--color-azure-3: #008fdb;
	--color-azure-4: #0071af;
	--color-azure-5: #003b5e;
	--color-azure-6: #001c30;

	--color-blue-1: #f0f4ff;
	--color-blue-2: #d4e0ff;
	--color-blue-3: #0089fc;
	--color-blue-4: #006dca;
	--color-blue-5: #00386d;
	--color-blue-6: #001a39;

	--color-indigo-1: #f3f3ff;
	--color-indigo-2: #deddff;
	--color-indigo-3: #657eff;
	--color-indigo-4: #0061fc;
	--color-indigo-5: #00328a;
	--color-indigo-6: #001649;

	--color-violet-1: #f7f1ff;
	--color-violet-2: #e8daff;
	--color-violet-3: #9b70ff;
	--color-violet-4: #794aff;
	--color-violet-5: #2d0fbf;
	--color-violet-6: #0b0074;

	--color-purple-1: #fdf4ff;
	--color-purple-2: #f7d9ff;
	--color-purple-3: #d150ff;
	--color-purple-4: #b01fe3;
	--color-purple-5: #660087;
	--color-purple-6: #3a004f;

	--color-magenta-1: #fff3fc;
	--color-magenta-2: #ffd7f6;
	--color-magenta-3: #f911e0;
	--color-magenta-4: #ca00b6;
	--color-magenta-5: #740068;
	--color-magenta-6: #44003c;

	--color-pink-1: #fff7fb;
	--color-pink-2: #ffdcec;
	--color-pink-3: #ff2fb2;
	--color-pink-4: #d2008f;
	--color-pink-5: #790051;
	--color-pink-6: #4b0030;

	--light: var(--color-aquamarine-1);
	--dark: var(--color-orange-6);
	--bg: var(--light);
	--fg: var(--dark);
	--scale: 1px;
	font-size: clamp(.4375rem, 1.25vw, .625rem);
	font-stretch: expanded;
	font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
	font-variation-settings: "CASL" 1;
	scrollbar-color: var(--fg) var(--bg);
}

@media (prefers-color-scheme: dark)
{
	:root
	{
		--bg: var(--dark);
		--fg: var(--light);
	}
}

body
{
	display: flex;
	background: var(--bg);
	color: var(--fg);
	font-size: 2rem;
	flex-direction: column;
	font-family: "mold",  ui-sans-serif, system-ui, sans-serif;
	line-height: 1.5em;
	max-inline-size: 24lh;
}

main
{
	padding: 1lh;
}

header
{
}

@media (max-width: 30lh)
{
	main
	{
		margin: 0.5lh 0 100dvh 0.5lh;
		padding: 0.5lh;
	}
}

::selection
{
	background: var(--fg);
	color: var(--bg);
}

:focus-visible
{
	outline: var(--scale) dotted var(--fg);
}

a:any-link
{
	color: var(--fg);
	text-decoration: 0.15rem wavy underline;
	text-decoration-thickness: from-font;
}

h1
{
	font-size: 3rem;
	font-weight: 600;
}

dialog
{
	background: var(--bg);
	border: 0.2rem solid var(--fg);
	color: var(--fg);
	inset: 1lh 1lh 1lh auto;
	max-block-size: calc(100dvh - 3lh);
	max-inline-size: min(40lh, calc(100dvw - 1lh));
	overflow: auto;
	padding: 0.5lh;
	position: fixed;
	z-index: 1000;

	& > form
	{
		display: flex;
		inset-block-start: 0;
		justify-content: flex-start;
		margin-block-end: 0.5lh;
		position: sticky;
	}

	& > pre
	{
		margin: 0;
	}
}

[data-dialog]
{
	align-self: flex-start;
}

#playpause
{
	background: var(--bg);
	border: 0.2rem solid var(--fg);
	cursor: pointer;
	inset-block-start: 0.5lh;
	inset-inline-end: 0.5lh;
	padding: 0.25lh 0.5lh;
	position: fixed;
	z-index: 100;

	&:has(:checked)
	{
		background: var(--fg);
		color: var(--bg);
	}

	& input { display: none; }
}

lichen-dla,
lichen-sca,
lichen-physarum,
lichen-rd,
lichen-scope
{
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	justify-content: space-between;
	padding: 1lh;
	position: relative;

	& canvas
	{
		aspect-ratio: 1 / 1;
		background: transparent;
		image-rendering: pixelated;
		inline-size: 100%;
		inset: 0;
		pointer-events: none;
		position: absolute;
		z-index: -1;
	}

}

lichen-synth
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	inset: 0;
	padding: 1lh;
	position: absolute;
}

.synth-hint
{
	inline-size: 100%;
}

h2
{
	font-size: inherit;
	font-weight: 600;
	text-wrap: balance;
	margin-block: 1lh 0.5lh;
}

h3
{
	font-size: inherit;
	font-weight: 600;
	margin-block-start: 1lh;
}

p,
pre
{
	margin-block: 0.5lh 1lh;
}

ol,
ul
{
	margin: 0.5lh 0 1lh 1lh;
}

dl
{
    display: grid;
    column-gap: 0.5lh;
    grid-template-columns: auto 1fr;
}

dt
{
    font-weight: 600;
    text-align: end;
}

dd
{
    grid-column: 2;
}

li
{
	margin-block-end: 0.25lh;
}

fieldset
{
	align-items: anchor-center;
	border: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1lh;
}

label
{
	display: flex;
	gap: 0.5lh;
}

input
{
	appearance: none;
	background: none;
	border: none;
	font: inherit;
}

button,
input:where([type="button"], [type="text"], [type="radio"], [type="checkbox"]),
textarea,
::file-selector-button
{
	background: var(--bg);
	border: 0.2rem solid var(--fg);
	color: var(--fg);
	font: inherit;
	padding: 0.25lh 0.5lh;
	resize: none;

	&:where(:checked, :selected, :active):not(textarea)
	{
		background: var(--fg);
		color: var(--bg);
	}
}

input:where([type="radio"], [type="checkbox"])
{
	inline-size: 1lh;
	block-size: 1lh;
}

input:where([type="color"])
{
	border: 0.2em solid var(--fg);
	inline-size: 1lh;
	block-size: 1lh;
	padding: 0;
}

input::-webkit-color-swatch-wrapper { padding: 0; }
input::-webkit-color-swatch { border: none; }
input::-moz-color-swatch { border: none; }

lichen-demo
{
	display: block;
}

textarea
{
	box-sizing: border-box;
	block-size: 12.5lh;
	margin-block: 0.5lh;
	inline-size: 100%;
}

pre
{
	white-space: pre-wrap;
}

output
{
	word-break: break-word;
}

code,
output,
pre,
textarea
{
	font: inherit;
	font-family: "mold", ui-monospace, monospace;
	font-variation-settings: "CASL" 1, "MONO" 1;
}

p, ul
{
	margin-block: 0.5lh;
}

abbr
{
	font-variant-caps: small-caps;
	text-decoration: none;
}

table
{
	border-collapse: collapse;
	inline-size: 100%;

	& .fastest { font-weight: 600; color: var(--fastest); }
	& .slowest { color: var(--slowest); }
}

sup
{
	display: inline-block;
	font: inherit;
	font-size: calc(1em - 0.5rem);
	margin-block: -1ex;
	vertical-align: 0.5ex;
}

th
{
	text-align: start;
}

td
{
	vertical-align: top;
	
	&:not(:last-child)
	{
		border-inline-end: 0.2rem solid var(--fg);
		padding-inline-end: 0.5lh;
	}

	&:not(:first-child)
	{
		padding-inline-start: 0.5lh;
		text-align: end;
	}
}

tr:not(:last-child) :where(th, td)
{
	border-block-end: 0.2rem solid var(--fg);
}

:where(th, td):not(:first-child)
{
	text-align: end;
}

:where(th, td):not(:last-child)
{
	padding-inline-end: 0.5lh;
}