style.css

:root {
	color-scheme: light dark;
}
body {
	background-color: white;
	color: #222;
	font: 16px sans-serif;
	text-align: center;
}
@media (prefers-color-scheme: dark) {
	body {
		background-color: #222;
		color: white;
	}
}
a {
	color: blue;
}
@media (prefers-color-scheme: dark) {
	a {
		color: lightskyblue;
	}
}
input,
button {
	font: inherit;
}

#subtitle {
	font-weight: bold;
}

.input-row {
	display: block;
	justify-content: center;
}
.input-row > label {
	flex-grow: 1;
	max-width: 500px;
	line-height: 32px;
}
@media (min-width: 600px) {
	.input-row,
	.input-row > label {
		display: flex;
	}
}
#studio-input {
	flex-grow: 1;
	margin-left: 8px;
	height: 32px;
	box-sizing: border-box;
}
.input-row > button {
	height: 32px;
	box-sizing: border-box;
}
.input-row > button + button {
	margin-left: 8px;
}
.input-row > button.default {
	font-weight: bold;
}

#status {
	height: 1.2em;
	line-height: 1.2em;
}
body:not(.waiting) #status progress,
body:not(.projects-complete) #status .projects-result,
body:not(.curators-complete) #status .curators-result,
body:not(.projects-error) #status .projects-error,
body:not(.curators-error) #status .curators-error {
	display: none;
}

#examples {
	height: calc(5*62px);
}
#examples:not(.loading) progress {
	display: none;
}
#examples ul {
	margin: 1em;
	margin-bottom: 0;
	padding: 0;
}
#examples li {
	display: block;
}
#examples button {
	display: inline-flex;
	min-height: 62px;
	box-sizing: border-box;
	padding: 0 4px;
	align-items: center;
}
#examples button:not(:hover) {
	background-color: transparent;
	border-color: transparent;
}
#examples button > img {
	width: 85px;
	height: 50px;
	margin-right: 8px;
}

.small {
	font-size: 12px;
	font-style: italic;
}

#footer {
	color: #606060;
	margin-top: 48px;
}
@media (prefers-color-scheme: dark) {
	#footer {
		color: #aaa;
	}
}