.page {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.pageMain {
	padding: 20px;
	display: flex;
	flex-direction: row;
	gap: 6px;
	flex: 1;
	overflow: hidden;
}

.codeContainer {
	flex: 1;
	background: #ffffff;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border-bottom: 2px solid var(--accent);
}

.codeContainer .code {
	flex: 1;
	overflow: hidden;
	border: 2px solid var(--accent);
	border-bottom: none;
}

.codeContainer .playButton {
	position: absolute;
	top: 0;
	right: 0;
	font-weight: bold;
}

.stopButton {
	position: absolute;
	top: 0px;
	right: 0px;
	font-weight: bold;
	background: red;
}

.hiddenButton {
	z-index: -1;
}

.codeContainer .errors {
	font-family: var(--font-code);
	font-size: 0.9em;
	position: relative;
	width: 100%;
	max-height: 160px;
	overflow-y: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
	padding: 8px;
	padding-right: 14px; /* space for close button. would flexbox be better? maybe! */
	background: #ffffff;
	border: 2px solid var(--accent);
	border-top: 3px solid var(--error);
	border-bottom: none;
	color: var(--error);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.codeContainer .errorClose {
	position: absolute;
	top: 2px;
	right: 2px;
	color: var(--error);
	background: none;
	border: none;
	cursor: var(--cursor-interactive);
	font-size: 1.2rem;
	padding: 0;
	display: block;
}

.resizeBar {
	height: 100%;
	width: 6px;
	cursor: col-resize;
	background: transparent;
}

.resizeBar:hover,
.resizeBar.resizing {
	background: var(--accent-light);
}

.horizontalResizeBar {
	position: absolute;
	top: 30px;
	z-index: 2;
	width: 100%;
	top: 30px;
	z-index: 2;
	height: 1px;
	cursor: row-resize;
	background: transparent;
}

.horizontalResizeBar:hover,
.horizontalResizeBar.resizing {
	background: var(--accent-light);
	height: 6px;
}

.canvasWrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.screen {
	border: 2px solid var(--accent);
	display: block;
	background: #000000;
	width: 100%;
	height: auto;
	aspect-ratio: 1000 / 800;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	outline: none;
}

.screen:focus {
	outline: 4px solid #2194ff6c;
}

.screenControls {
	color: var(--accent);
	font-size: 0.9em;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
	padding: 8px 0;
}

.screenControls .mute,
.screenControls .stop {
	cursor: var(--cursor-interactive);
	user-select: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	border: none;
	background: none;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
}

.screenControls .mute :global(svg),
.screenControls .stop :global(svg) {
	--size: 24px;
	display: block;
	width: var(--size);
	height: var(--size);
}

.screenControls .screenSize {
	color: var(--accent-light);
	user-select: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.outputArea {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	max-width: 100%;
	overflow: hidden;
}

.helpContainer {
	position: relative;
	height: auto;
	max-width: 100%;
	width: 100%;
}