style.css

body {
	background: hsl(152.32 0% 46.63%); /* lab(50% 0 0) */
	font: 120%/1.5 Helvetica Neue, Helvetica, Segoe UI, sans-serif;
	width: fit-content;
	width: 50em;
	max-width: 90vw;
	margin: 1em auto;
	color: white;
}

input {
	font: inherit;
	box-sizing: border-box;
}

.inputs input[type="text"] {
	width: 100%;
	border: 5px solid var(--color);
	border-right-width: 2em;
	background: hsla(0 0% 100% / .5);
	color: black;
	font-size: 150%;
	padding: 0 .2em;
}

.inputs label {
	display: block;
}

#output {
	margin-top: 1em;
}

[property="gradient"] {
	background: var(--gradient);
	padding: 2em;
	color: black;
}

[property="gradient"] details {
	padding: .5em;
	background: hsl(0 0% 100% / .5);
}

	[property="gradient"] details input,
	[property="gradient"] details textarea {
		background: hsl(0 0% 100% / .5);
		border: 1px solid white;
	}

	input[type=number] {
		width: 4em;
		padding: 0 .2em;
		font-weight: bold;
	}

	textarea {
		display: block;
		margin-top: .5em;
		width: 100%;
		font: 80%/1.4 Consolas, Monaco, monospace;
		height: 7em;
	}

[property="step"] {
	padding: .4em;
	background: var(--color);
	font-weight: bold;
	font-size: 90%;
}

	[property="step"] code {
		font-family: Consolas, Monaco, monospace;
	}

meta[property][mv-mode="edit"] {
	display: none;
}