* {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

body {
	--font-sans: Helvetica Neue, Segoe UI, sans-serif;
	--gray: 220, 10%;

	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2em;
	font: 120%/1.5 Baskerville, Palatino Linotype, sans-serif;
	background: hsl(var(--gray), 95%);
}

h1 {
	margin: 0 0 .5em 0;
	font: bold 320%/1 var(--font-sans);
	letter-spacing: -.05em;
}

footer {
	margin-top: 2em;
	border-top: 1px solid hsl(var(--gray), 85%);
}

	footer ul {
		display: inline;
		padding: 0;
		margin: 0;
	}

	footer li {
		display: inline-block;
		padding: .4em .6em;
	}

	footer li:nth-child(even) {
		background: hsl(var(--gray), 85%);
		margin-left: .5em;
	}

	footer a {
		color: hsl(var(--gray), 35%);
	}

	footer a:hover {
		color: hsl(var(--gray), 20%);
	}

label {
	display: block;
}

textarea {
	box-sizing: border-box;
	width: 100%;
	font-family: Consolas, Monaco, monospace;
}

fieldset {
	border: 1px solid hsl(var(--gray), 85%);
	border-radius: .3em;
	margin: 1em 0;
}

.link {
	font-size: 100%;
	padding: 0 .2em;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: .2em;
}

	.link.linked {
		box-shadow: .1em .1em .1em rgba(0,0,0,.2) inset;
		background: hsl(var(--gray), 90%);
	}

.image {

}

	.image label {
		display: block;
		margin-bottom: .5em;
		font-size: 70%;
	}

	.image input {
		width: 26em;
	}

details.filter {
	padding: 1em;
	background: white;
	border-radius: .2em;
	margin: .5em 0;
}

	details.filter > summary {
		font: bold 150%/1 var(--font-sans);
		letter-spacing: -.02em;
	}

		details.filter > summary > img {
			width: 1.4em;
			height: 1.4em;
			object-fit: cover;
			vertical-align: bottom;
			filter: var(--filter);
		}

option {
	-webkit-appearance: none;
	background: linear-gradient(red, black);
}

input.css {
	display: block;
	box-sizing: border-box;
	padding: .3em .4em .1em;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: .1em;
	box-shadow: 0 .05em .1em rgba(0, 0, 0, 0.2) inset;
	background: white;
	width: 100%;
	font: 120% Consolas, Monaco, monospace;
}

label.hue.slider {
	background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) 0 1.4em / 100% .8em no-repeat;
}

input[type=range] {
	width: 100%;
}

.mv-add-filter {
	width: 100%;
	box-sizing: border-box;
}

label.output {
	display: block;
	margin-top: 1em;
}