/* Fonts */

@font-face {
	font-family: 'Neatnik';
	src: url('https://www.neatnik.net/assets/type/Neatnik-Regular.woff2?v=202601141913') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Neatnik';
	src: url('https://www.neatnik.net/assets/type/Neatnik-Italic.woff2?v=202601141913') format('woff2');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Neatnik';
	src: url('https://www.neatnik.net/assets/type/Neatnik-Bold.woff2?v=202601141913') format('woff2');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Neatnik';
	src: url('https://www.neatnik.net/assets/type/Neatnik-BoldItalic.woff2?v=202601141913') format('woff2');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Neatnik Mono';
	src: url('https://www.neatnik.net/assets/type/NeatnikMono-Regular.woff2?v=202601141913') format('woff2');
	font-weight: normal;
	font-style: normal;
	size-adjust: 90%;
}

.icon {
	height: 1em;
	vertical-align: middle;
	margin: -.25em .25em 0 0;
	display: inline-block;
	overflow: visible;
	
}

/* Configuration */

:root {
	color-scheme: light dark;
	--padding: 1rem;
	--border-radius: .15rem;
	--black: #000;
	--white: #fff;
	--red-light: #f4b1a7;
	--red-dark: #6b2c25;
	--orange-light: #f6c4a1;
	--orange-dark: #7a3a12;
	--yellow-light: #e6d488;
	--yellow-dark: #5c4c14;
	--lime-light: #c3dba0;
	--lime-dark: #3c4c14;
	--green-light: #a3d5ac;
	--green-dark: #1f4a28;
	--cyan-light: #a0dbd9;
	--cyan-dark: #1a4a4a;
	--blue-light: #a8d0f0;
	--blue-dark: #1c3f5e;
	--indigo-light: #b6c0e8;
	--indigo-dark: #2c3468;
	--violet-light: #cabdf0;
	--violet-dark: #3f2f68;
	--plum-light: #cfaed0;
	--plum-dark: #5c2f5e;
	--pink-light: #f0b8d0;
	--pink-dark: #5e2040;
	--red: light-dark(var(--red-light), var(--red-dark));
	--orange: light-dark(var(--orange-light), var(--orange-dark));
	--yellow: light-dark(var(--yellow-light), var(--yellow-dark));
	--lime: light-dark(var(--lime-light), var(--lime-dark));
	--green: light-dark(var(--green-light), var(--green-dark));
	--cyan: light-dark(var(--cyan-light), var(--cyan-dark));
	--blue: light-dark(var(--blue-light), var(--blue-dark));
	--indigo: light-dark(var(--indigo-light), var(--indigo-dark));
	--violet: light-dark(var(--violet-light), var(--violet-dark));
	--plum: light-dark(var(--plum-light), var(--plum-dark));
	--pink: light-dark(var(--pink-light), var(--pink-dark));
	--accent: light-dark(#e9ecef, #333);
	--accent-secondary: light-dark(#ced4da, #444);
	--bg: light-dark(#fff, #222);
	--fg: light-dark(#000, #ccc);
	
	--button-light: #2563EB;
	--button-shadow-light: #1E3A8A;
	--button-dark: #3B82F6;
	--button-shadow-dark: #1E40AF;
	
	--button: light-dark(var(--button-light), var(--button-dark));
	--button-shadow: light-dark(var(--button-shadow-light), var(--button-shadow-dark));
	
}

/* Color */

/*
.red { background-color: var(--red) !important; --light: var(--red-light); --dark: var(--red-dark); }
.orange { background-color: var(--orange) !important; --light: var(--orange-light); --dark: var(--orange-dark); }
.yellow { background-color: var(--yellow) !important; --light: var(--yellow-light); --dark: var(--yellow-dark); }
.lime { background-color: var(--lime) !important; --light: var(--lime-light); --dark: var(--lime-dark); }
.green { background-color: var(--green) !important; --light: var(--green-light); --dark: var(--green-dark); }
.cyan { background-color: var(--cyan) !important; --light: var(--cyan-light); --dark: var(--cyan-dark); }
.blue { background-color: var(--blue) !important; --light: var(--blue-light); --dark: var(--blue-dark); }
.indigo { background-color: var(--indigo) !important; --light: var(--indigo-light); --dark: var(--indigo-dark); }
.violet { background-color: var(--violet) !important; --light: var(--violet-light); --dark: var(--violet-dark); }
.plum { background-color: var(--plum) !important; --light: var(--plum-light); --dark: var(--plum-dark); }
.pink { background-color: var(--pink) !important; --light: var(--pink-light); --dark: var(--pink-dark); }
*/

.red    { --color: var(--red); }
.orange { --color: var(--orange); }
.yellow { --color: var(--yellow); }
.lime   { --color: var(--lime); }
.green  { --color: var(--green); }
.cyan   { --color: var(--cyan); }
.blue   { --color: var(--blue); }
.indigo { --color: var(--indigo); }
.violet { --color: var(--violet); }
.plum   { --color: var(--plum); }
.pink   { --color: var(--pink); }

/*
.red, .orange, .yellow, .lime, .green, .cyan, .blue, .indigo, .violet, .plum, .pink {
	--color-shadow: color-mix(in oklch, var(--color), black 35%);
	--color-deeper: oklch(from var(--color) calc(l - 0.15) calc(c * 1.4) h);
	background-color: var(--color);
}
*/

.red, .orange, .yellow, .lime, .green, .cyan, .blue, .indigo, .violet, .plum, .pink {
	--color-shadow: light-dark(
		color-mix(in oklch, var(--color), black 50%),
		color-mix(in oklch, var(--color), white 50%)
	);
	--color-deeper: light-dark(
		oklch(from var(--color) calc(l - 0.3) calc(c * 1.4) h),
		oklch(from var(--color) calc(l + 0.2) calc(c * 1.4) h)
	);
	background-color: var(--color);
}

.accent { background-color: var(--accent); }
.accent-secondary { background-color: var(--accent-secondary); }

.light-mode { color-scheme: light only; color: #000; }
.dark-mode { color-scheme: dark only; color: #ccc; }

/* Structure */

:root {
	--padding: 1rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	line-height: 1.42;
}

body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
}

img,
picture,
audio,
video,
canvas,
svg,
iframe {
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
	
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

ul[role="list"],
ol[role="list"] {
	list-style: none;
}

.tight {
	--padding: 0.5rem;
	line-height: 1.1;
}

.loose {
	--padding: 2rem;
}

html, body {
	width: 100%;
	max-width: 100vw;
}

html {
	overflow-x: clip;
	overflow-y: scroll;
	scrollbar-gutter: stable;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	font-family: 'Neatnik', serif;
	font-feature-settings: "lnum" on;
	font-size: 16px;
	background: var(--bg);
	color: var(--fg);
}

@media (min-width: 40rem) {
	:root {
		font-size: 19px;
	}
}

@media (min-width: 64rem) {
	:root {
		font-size: 22px;
	}
}

header, main, footer {
	width: min(54rem, calc(100% - 2rem)) !important;
	margin-inline: auto;
}

header, main {
	margin-top: calc(var(--padding) * 2);
}

footer {
	margin-top: calc(var(--padding) * 4);
	font-feature-settings: "lnum" on;
}

header {
	display: flex;
	gap: var(--padding);
	justify-content: space-between;
	align-items: center;
}

header a {
	color: var(--fg) !important;
}

.group {
	display: flex;
	align-items: center;
	gap: var(--padding);
}

section, .section, main > .wide {
	--wide-max: 70rem;
	width: min(100vw, var(--wide-max));
	margin-inline: calc((100% - min(100vw, var(--wide-max))) / 2);
	margin-top: calc(var(--padding) * 2);
	margin-bottom: calc(var(--padding) * 2);
	padding: var(--padding);
}

footer {
	text-align: center;
	font-size: 90%;
	margin-bottom: calc(var(--padding) * 3);
}

footer svg {
	vertical-align: middle;
}

footer ul svg {
	fill: var(--accent-secondary) !important;
	height: 1.7em !important;
}

footer ul {
	list-style: none;
	padding: 0;
	margin: 2rem 0;
}

footer li {
	display: inline-block;
	margin: 0 .4rem;
}

/* Text */

p, h1, h2, h3, h4, h5, h6, li, blockquote {
	max-width: 75ch;
}

footer * {
	max-width: 100%;
}

.size-70 { font-size: 70%; }
.size-80 { font-size: 80%; }
.size-90 { font-size: 90%; }
.size-100 { font-size: 100%; }
.size-110 { font-size: 110%; }
.size-120 { font-size: 120%; }
.size-130 { font-size: 130%; }
.size-140 { font-size: 140%; }
.size-150 { font-size: 150%; }
.size-200 { font-size: 200%; }
.size-250 { font-size: 250%; }
.size-300 { font-size: 300%; }

.small, small {
	font-size: 80%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Neatnik', sans-serif;
	font-weight: bold;
	line-height: 1.2;
}

h1 { font-size: 160%; }
h2 { font-size: 140%; }
h3 { font-size: 120%; }
h4 { font-size: 100%; }
h5 { font-size: 100%; }
h6 { font-size: 100%; }

pre, code, kbd, .monospace {
	font-family: 'Neatnik Mono', monospace;
}

pre {
	text-align: left;
	margin: var(--padding) 0;
	white-space: pre-wrap;
	tab-size: 2;
}

code, kbd {
	background: var(--accent);
	border-radius: var(--border-radius);
	padding: .1em .2em .1em .2em;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

pre code {
	display: block;
	background: var(--black);
	color: var(--white);
	padding: .75em;
	line-height: 1.5;
	border-radius: var(--border-radius);
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
}

details summary {
	list-style: none;
	font-weight: normal;
	&::before {
		content: "\f0da";
		width: 1.2ch;
		display: inline-block;
		padding-right: 1rem;
	}
	[open] &::before {
		content: "\f0d7";
		width: 1.2ch;
		display: inline-block;
	}
}

details summary::-webkit-details-marker {
	display: none;
}

summary:hover {
	cursor: pointer;
}

/*
details summary {
	list-style: none;
	display: flex;
	align-items: center;
}

details summary::before {
		font-family: 'Neatnik Mono';
	font-weight: normal;
	content: "\2662";
	font-size: 140%;
	width: 1.2rem;
}

details[open] summary::before {
	content: "\2666";
}

details summary::-webkit-details-marker {
	display: none;
}
*/

/* Text */

.left { text-align: left; }
.right { text-align: right; }
.center, .centered { text-align: center; }

mark {
	color: var(--fg);
	background: var(--yellow);
}

blockquote {
	line-height: 1.3;
	font-size: 90%;
	border-left: var(--padding) solid var(--accent);
	padding-left: calc(var(--padding) / 2);
}

/* Lists */

li {
	
}

ul {
	list-style: disc;
	padding-left: calc(var(--padding) * 1.5);
}

ul li {
	padding-left: 0;
	text-indent: 0;
}

ul li::marker {
	font-family: 'Neatnik';
}

ul ul {
	padding-left: calc(var(--padding) * 1.5);
}

ul ul li::marker {
	opacity: .6;
}

ul ul ul li::marker {
	opacity: .3;
}

ol {
	list-style: decimal;
	padding-left: calc(var(--padding) * 1.5);
}

ol ol {
	list-style: lower-alpha;
}

ol ol ol {
	list-style: lower-roman;
}

/* Plain Lists */

ul.plain  {
	list-style-type: none !important;
	margin-left: 0;
	padding-left: 0;
	text-indent: 0;
}

ul.plain li:before {
	content: none !important;
}

/*
ul.plain li {
	margin: 0;
	padding: 0;
	text-indent: 0;
}
*/

/*
ul.plain svg {
	margin-left: .15em;
}
*/

ul.plain li {
	margin: 0;
	padding: 0 0 0 1.75em;
	text-indent: -1.75em;
}

/*
ul.plain li {
	position: relative;
	margin: 0;
	padding: 0 0 0 1.75em;
	text-indent: 0;
}

ul.plain svg {
	position: absolute;
	left: 0;
	top: 0.15em;
	margin-left: 0;
}
*/

/* Links */

a:link, a:visited, a:hover, a:active {
	text-decoration-color: inherit;
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
	color: inherit;
}

/* Flex */

.flex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--padding);
	margin-bottom: var(--padding);
}

.flex .box {
	flex: 1 1 auto;
	padding: var(--padding);
	border-radius: var(--border-radius);
	min-width: 14rem !important;
	
	/* default to .flex-third */
	flex-basis: calc(33.3% - 3rem);
	
}

.flex.unpadded .box {
	padding: 0;
	gap: calc(var(--padding) * 2) !important;
}

.flex.bordered .box {
	border: 1px solid var(--fg);
}

.flex.bordered.dotted .box {
	border: 1px dotted var(--fg);
}

.flex .box.no-grow {
	flex: 0 1 auto !important;
	min-width: 0 !important;
	width: fit-content !important;
}

.flex-full, .flex-full .box {
	flex-basis: calc(100%);
}

.flex-half, .flex-half .box {
	flex-basis: calc(50% - var(--padding));
}

.flex-third, .flex-third .box {
	flex-basis: calc(33.3% - calc(var(--padding) * 2));
}

.flex-fourth, .flex-fourth .box {
	flex-basis: calc(25% - calc(var(--padding) * 2));
	min-width: 8rem !important;
}

.flex-fifth, .flex-fifth .box {
	flex-basis: calc(20% - calc(var(--padding) * 3));
	min-width: 8rem !important;
}

/* Grid */

.grid-fluid {
	display: grid;
	gap: calc(var(--padding) / 1.5);
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 250px wide default, need to figure this out? */
}

.grid-fluid > * {
	
	padding: calc(var(--padding) / 1.5);
}

.grid-fluid.bordered .box {
	border: 1px solid var(--fg);
}

.grid-fluid.bordered.dotted .box {
	border: 1px dotted var(--fg);
}

.min-100 { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.min-150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.min-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.min-250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.min-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }


.grid {
	display: grid;
	gap: calc(var(--padding) / 1.5);
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.grid > * {
	padding: calc(var(--padding) / 1.5);
}

.grid.min-100 { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.grid.min-150 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid.min-200 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid.min-250 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid.min-300 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.grid.box-50 { grid-template-columns: repeat(auto-fit, 50px); }
.grid.box-75 { grid-template-columns: repeat(auto-fit, 75px); }
.grid.box-100 { grid-template-columns: repeat(auto-fit, 100px); }
.grid.box-200 { grid-template-columns: repeat(auto-fit, 200px); }
.grid.box-300 { grid-template-columns: repeat(auto-fit, 300px); }
.grid.box-400 { grid-template-columns: repeat(auto-fit, 400px); }
.grid.box-500 { grid-template-columns: repeat(auto-fit, 500px); }

/* Cards */

.card {
	background: var(--accent);
	border-radius: var(--border-radius);
	margin: var(--padding) 0;
}

.box {
	padding: var(--padding);
}

.box:not(.flex .box, .grid .box) {
	margin-top: var(--padding);
	margin-bottom: var(--padding);
}

.two-col {
	display: flex;
	flex-wrap: wrap;
	gap: var(--padding);
}

.two-col > :first-child {
	flex: 1 1 10rem;
}

.two-col > :last-child {
	flex: 6 1 10rem;
}

/* Forms */

form {
	width: 100%;
}

form * {
	font-family: 'Neatnik' !important;
}

form div {
	
}

form p {
	line-height: 1.3;
}

select[multiple],
select[size] {
	-webkit-appearance: listbox;
	-moz-appearance: listbox;
	appearance: listbox;
	display: block;
	overflow-y: auto;
}

select[multiple] option,
select[size] option {
	display: block;
	padding: .3em .5em;
}

select[multiple] optgroup,
select[size] optgroup {
	display: block;
}

/*
input[type="password"] {
	font-family: 'Neatnik Mono', monospace;
}
*/

input, button, .button, .action, fieldset, legend, label, option, select, textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	all: unset;
	font-family: inherit;
}

fieldset {
	margin: 2em 0 1em 0;
	padding: 0 1em 1em 1em;
	border-radius: var(--border-radius);
	width: calc(100% - 2em);
	background: var(--accent);
	position: relative;
}

fieldset legend {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 90%;
	padding: .75em 1em 0 1em;
	margin: 0;
	background: var(--accent);
	border-top-left-radius: calc(var(--border-radius) * 3);
	border-top-right-radius: calc(var(--border-radius) * 3);
	position: absolute;
	top: -1.75em;
	left: 0;
}

fieldset legend svg {
	padding-right: .2em;
}

fieldset > legend + * {
	padding-top: .5em;
}

label, .form-label {
	font-weight: bold;
	display: block;
	margin-bottom: .25em;
}

input, button, textarea, select {
	margin: 0;
	padding: .5rem;
	border: 1.5px solid var(--accent-secondary);
	border-radius: var(--border-radius);
}

input, select, textarea {
	display: block;
	width: calc(100% - 1em);
}

textarea {
	height: 3.5rem;
	white-space: pre-wrap;
}

select {
	padding: .5ch .5ch .5ch .5ch !important;
}



.nowrap {
	white-space: nowrap;
}

.wrap {
	white-space: normal;
}

.really-wrap {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
}



label:hover {
	cursor: pointer;
}

/*
input[type="text"], input[type="email"], input[type="password"] {
	width: calc(100% - 5ch);
}
*/

input[type="checkbox"]:disabled + label {
	cursor: not-allowed;
}

select:hover {
	cursor: pointer;
}

input:disabled {
	opacity: .25;
}

input:disabled + label {
	opacity: .25;
}







input[type="radio"] {
	display: inline-block;
	width: .3rem;
	height: .3rem;
	margin-top: -.3rem;
	text-align: center;
	line-height: 1.1;
	vertical-align: middle;
	background-color: var(--fg);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M528 320C528 205.1 434.9 112 320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320z'/%3E%3C/svg%3E");
	mask-image: -webkit-mask-image;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	cursor: pointer;
}

input[type="radio"]:checked {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320C528 205.1 434.9 112 320 112zM320 416C267 416 224 373 224 320C224 267 267 224 320 224C373 224 416 267 416 320C416 373 373 416 320 416z'/%3E%3C/svg%3E");
	mask-image: -webkit-mask-image;
}

input[type="radio"]:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
	border-radius: 50%;
}

input[type="radio"]:disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

input[type="radio"] + label {
	display: inline-block;
}

input[type="checkbox"] {
	display: inline-block;
	width: .3rem;
	height: .3rem;
	margin-top: -.3rem;
	text-align: center;
	line-height: 1.1;
	vertical-align: middle;
	background-color: var(--fg);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M480 144C488.8 144 496 151.2 496 160L496 480C496 488.8 488.8 496 480 496L160 496C151.2 496 144 488.8 144 480L144 160C144 151.2 151.2 144 160 144L480 144zM160 96C124.7 96 96 124.7 96 160L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 160C544 124.7 515.3 96 480 96L160 96z'/%3E%3C/svg%3E");
	mask-image: -webkit-mask-image;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	cursor: pointer;
}

input[type="checkbox"]:checked {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M160 144C151.2 144 144 151.2 144 160L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 160C496 151.2 488.8 144 480 144L160 144zM96 160C96 124.7 124.7 96 160 96L480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160zM231 231C240.4 221.6 255.6 221.6 264.9 231L319.9 286L374.9 231C384.3 221.6 399.5 221.6 408.8 231C418.1 240.4 418.2 255.6 408.8 264.9L353.8 319.9L408.8 374.9C418.2 384.3 418.2 399.5 408.8 408.8C399.4 418.1 384.2 418.2 374.9 408.8L319.9 353.8L264.9 408.8C255.5 418.2 240.3 418.2 231 408.8C221.7 399.4 221.6 384.2 231 374.9L286 319.9L231 264.9C221.6 255.5 221.6 240.3 231 231z'/%3E%3C/svg%3E");
	mask-image: -webkit-mask-image;
}

input[type="checkbox"]:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
	border-radius: 50%;
}

input[type="checkbox"]:disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

input[type="checkbox"] + label {
	display: inline-block;
}

label + a {
	margin-left: .5em;
}

form p {
	margin-top: 1rem;
}

button,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
	width: auto !important;
	border: none !important;
	border-radius: calc(var(--border-radius) * 4) !important;
	padding: calc(var(--padding) / 3) calc(var(--padding) / 1.5) calc(var(--padding) / 4) calc(var(--padding) / 1.5);
	display: inline-block !important;
	font-weight: bold;
	color: white !important;
	transform: translateY(0);
	transition: transform .08s ease, box-shadow .08s ease;
	cursor: pointer;
	margin-bottom: .75rem;
	background-color: var(--color-deeper, var(--button));
	box-shadow: 0 6px 0 var(--color-shadow, var(--button-shadow));
}

button:hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
	box-shadow: 0 5px 0 var(--color-shadow, var(--button-shadow));
	transform: translateY(1px);
	cursor: pointer;
}

button:active,
.button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
	transform: translateY(6px);
	box-shadow: 0 1px 0 var(--color-shadow, var(--button-shadow));
	cursor: pointer;
}

.pointer:hover {
	cursor: pointer !important;
}

.slim {
	padding: .3em .5em;
	font-size: 85%;
}

a.button {
	text-decoration: none;
}

button svg, .button svg, .action svg {
	fill: var(--white);
	padding-right: .25em;
}

button:hover, .button:hover, .action:hover {
	cursor: pointer;
	transition: filter .2s;
}

button, input[type="submit"] {
	border-radius: var(--border-radius);
	border: none;
}

button:hover, input[type="submit"]:hover {
	cursor: pointer;
}

progress, meter {
	width: 100%;
	max-width: 100%;
}

/* Range */

input[type="range"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: calc(100% - 1em);
	height: 1.5rem;
	background: transparent;
	padding: 0;
	border: none;
	margin-bottom: .75rem;
}

input[type="range"]::-webkit-slider-runnable-track {
	height: .4rem;
	background: var(--accent-secondary);
	border-radius: var(--border-radius);
}

input[type="range"]::-moz-range-track {
	height: .4rem;
	background: var(--accent-secondary);
	border-radius: var(--border-radius);
}

input[type="range"]::-moz-range-progress {
	height: .4rem;
	background: #4f7cff;
	border-radius: var(--border-radius);
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	margin-top: -.55rem;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--button);
	box-shadow: 0 4px 0 var(--button-shadow);
	border: 2px solid var(--bg);
	cursor: pointer;
	transition: transform .08s ease, box-shadow .08s ease;
}

input[type="range"]::-moz-range-thumb {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--button);
	box-shadow: 0 4px 0 var(--button-shadow);
	border: 2px solid var(--bg);
	cursor: pointer;
	transition: transform .08s ease, box-shadow .08s ease;
}

input[type="range"]:hover::-webkit-slider-thumb {
	box-shadow: 0 3px 0 var(--button-shadow);
	transform: translateY(1px);
}

input[type="range"]:active::-webkit-slider-thumb {
	box-shadow: 0 0 0 var(--button-shadow);
	transform: translateY(4px);
}

input[type="range"]:hover::-moz-range-thumb {
	box-shadow: 0 3px 0 var(--button-shadow);
	transform: translateY(1px);
}

input[type="range"]:active::-moz-range-thumb {
	box-shadow: 0 0 0 var(--button-shadow);
	transform: translateY(4px);
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--button-shadow);
	outline-offset: 2px;
}

input[type="range"]:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--button-shadow);
	outline-offset: 2px;
}

input[type="range"]:disabled {
	opacity: .25;
	cursor: not-allowed;
}

.range-output {
	font-family: 'Neatnik';
	font-size: 80%;
	background: var(--accent);
	border-radius: var(--border-radius);
	padding: .1em .4em;
}

/* Progress */

progress {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: .6rem;
	border: none;
	border-radius: var(--border-radius);
	overflow: hidden;
	background: var(--accent-secondary);
}

progress::-webkit-progress-bar {
	background: var(--accent-secondary);
	border-radius: var(--border-radius);
}

progress::-webkit-progress-value {
	background: var(--button);
	border-radius: var(--border-radius);
	transition: width .2s ease;
}

progress::-moz-progress-bar {
	background: var(--button);
	border-radius: var(--border-radius);
}

progress:indeterminate {
	background: repeating-linear-gradient(
		135deg,
		var(--accent-secondary),
		var(--accent-secondary) .5rem,
		var(--accent) .5rem,
		var(--accent) 1rem
	);
}

/* Meter */

meter {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: .6rem;
	border: none;
	border-radius: var(--border-radius);
	background: var(--accent-secondary);
}

meter::-webkit-meter-bar {
	background: var(--accent-secondary);
	border-radius: var(--border-radius);
	border: none;
}

meter::-webkit-meter-optimum-value {
	background: var(--green);
	border-radius: var(--border-radius);
}

meter::-webkit-meter-suboptimum-value {
	background: var(--yellow);
	border-radius: var(--border-radius);
}

meter::-webkit-meter-even-less-good-value {
	background: var(--red);
	border-radius: var(--border-radius);
}

meter::-moz-meter-bar {
	border-radius: var(--border-radius);
}

meter:-moz-meter-optimum::-moz-meter-bar { background: var(--green); }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--yellow); }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--red); }

/* Tables */

table {
	font-feature-settings: "tnum" on;
	border-collapse: collapse;
	margin: var(--padding) 0;
}

.table {
	overflow-x: auto;
	max-width: calc(100vw - 2em) !important;
}

table.bordered td, table.bordered th {
	border: 1px solid var(--fg) !important;
	padding: calc(var(--padding) / 2);
}

td, th {
	padding: .25rem .5rem;
	vertical-align: top;
}

table {
	border-collapse: collapse;
}

.borderless td {
	border: 0;
	padding-bottom: 0;
}

th {
	text-align: left;
}

/* Notices */

.notice {
	position: relative;
	border-radius: var(--border-radius);
	padding: var(--padding);
	font-size: 90%;
	background: var(--accent);
	margin: var(--padding) 0;
}

.notice > * {
	margin-left: calc(var(--padding) * 2.5);
}

.notice-icon {
	background: rgba(0, 0, 0, 0.1);
	margin: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	padding: calc(var(--padding) / 1.5);
}

.notice a {
	color: inherit !important;
}

.notice-icon .icon {
	fill: currentColor;
	opacity: .85;
	height: 1.2rem;
	margin-top: .3rem;
	margin-right: 0;
}

.notice a {
	color: inherit !important;
}

.notice :is(h1, h2, h3, h4, h5, h6) {
	font-size: 110%;
}

.notice { background: var(--blue); color: var(--fg); }
.notice.success { background: var(--green); }
.notice.caution { background: var(--yellow); }
.notice.warning { background: var(--red); }

/* Figures */

figure img {
	
}

figure figcaption {
	font-size: 90%;
}

/* Horizontal Rule */

hr {
	border: none;
	margin: 0 0 1rem 0;
	text-align: center;
	width: 100%;
}

hr::before {
	width: 100%;
	font-family: 'Neatnik';
	content: "\2022 \2022 \2022";
	font-size: 3rem;
	text-align: center;
}

/* Misc */

.box > *:first-child, .notice > *:first-child, section > *:first-child {
	margin-top: 0;
}

.box > *:last-child, .notice > *:last-child, section > *:last-child {
	margin-bottom: 0;
}

.smcp {
	font-size: 90%;
	text-transform: uppercase;
	letter-spacing: .075rem;
}

.badges svg {
	margin: 1rem .5rem;
}

.badges a {
	text-decoration: none;
}

#message {
	border: 0;
	background: none;
	
}

#message::backdrop {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	background-color: rgba(0, 0, 0, 0.5);
}

/*
.margined {
	margin: var(--padding);
}

.padded {
	padding: var(--padding);
}
*/