.expression-input-label {
	display: block;
	margin: 0px 16px 16px;
}

h2 {
	margin: 8px;
}

.frame:has(> #expression-container),
.frame#solution-container {
	padding: 0;
	overflow: hidden;
}

#solution-container > details {
	margin: 16px 0;
}

#solution-container > details[open] {
	margin-bottom: 0px;
}

#solution-container > details[open] > summary {
	margin-bottom: 16px;
}

summary {
	margin-left: 16px;
}

#solution-container .hljs {
	font-size: 1.5rem;
	padding: 8px;
}

#expression-container {
	border-top: 2px solid #3a2402;
}

.expression-display {
	font-family: "ComicShanns", monospace;
	font-size: 1.5rem;
	padding: 8px;
	white-space: pre;
}

.expression-input {
	font-family: "ComicShanns", monospace;
	font-size: 1rem;
	padding: 8px;
	margin: 8px 0 0 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: scroll;
	resize: horizontal;
	min-height: calc(1rem + 16px * 2);
	max-height: calc(16rem + 16px * 2);
	min-width: 20ch;
	max-width: 60ch;
	white-space: pre-wrap;
}

.expression-input:focus-visible {
	outline: none;
	border: 2px solid #3a2402;
}

.expression-input[data-invalid-js] {
	border: 2px solid red;
}

button {
	margin: 0 16px;
}

select {
	margin: 16px;
}