:root {
	--monospace-font: "Roboto Mono", monospace;

	--sidebar-background: #1C1E26;
	--console-background: #000000;
	--inspector-background: #282A36;

	--reference-background: #dedede;
	--reference-row-background-variant: #d0cfcf;
	--reference-row-border: #cacaca;

	--sidebar-width: 50px;
	--inspector-width: 155px;
}

body {
	display: flex;
	height: 100vh;
	margin: 0;
	background-color: var(--sidebar-background);
}

#editor {
	width: calc(50% - var(--sidebar-width));
}

.ace_toggle_wrap, .hidden {
	display: none!important;
}

#sidebar {
	width: var(--sidebar-width);
	background-color: var(--sidebar-background);
}

#right {
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 50%;
}

#console {
	flex: 1;
	background-color: var(--console-background);
	overflow: auto;
	color: lime;
	border-bottom: calc(var(--sidebar-width) / 4) solid var(--sidebar-background);
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

#console pre {
	margin: 0;
	font-family: var(--monospace-font);
	white-space: pre-wrap;
	word-wrap: break-word;
}

#console span {
	display: flex;
	align-items: center;
	text-align: center;
	font-family: var(--monospace-font);
	margin: 0.5ch 0;
}

#console span::before,
#console span::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #003f00;
}

#console span:not(:empty)::before {
	margin-right: .25em;
}

#console span:not(:empty)::after {
	margin-left: .25em;
}

#debugging {
	max-height: 50%;
	display: flex;
}

#reference {
	overflow: auto;
	flex: 4;
}

#reference table {
	width: 100%;
	background-color: var(--reference-background);
	border-collapse: collapse;
	font-family: "Roboto Mono", monospace;
	font-size: 14px;
	overflow-y: auto;
	max-height: 20px;
}

#reference tr:nth-child(even) {
	background-color: var(--reference-row-background-variant);
}

#reference tr {
	border-bottom: 3px solid var(--reference-row-border);
}

#reference td {
	padding: 10px;
}

#reference thead th {
	padding: 5px 10px;
}

#reference code {
	font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
	padding: 0.2em 0.4em;
	box-sizing: border-box;
	margin: 0;
	font-size: 85%;
	background-color: #1b1f230d;
	border-radius: 3px;
}

#inspector {
	background-color: var(--inspector-background);
	width: var(--inspector-width);
}

#sidebar {
	display: flex;
	flex-direction: column;
}

#sidebar > button {
	cursor: pointer;
	padding: 0;
	border: none;
	background: none;
	aspect-ratio: 1/1;
	transition: 100ms transform ease;
}

#sidebar > button > img {
	height: 25px;
}

#sidebar > button:hover {
	transform: scale(1.3);
}

#sidebar > button:active {
	transform: scale(1.1);
}

#sidebar > button[disabled] {
	transform: scale(0.7);
	filter: grayscale();
}

#sidebar > hr {
	width: 50%;
	border-color: #000;
}

#inspector {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 0.5em 1em;
	color: white;
	overflow: auto;
	font-family: var(--monospace-font);
	gap: 1em;
	flex: 1;
}

#stack {
	flex: 1;
	display: flex;
	flex-direction: column;
	font-size: 1.5rem;
	gap: 0.2em;
}

#stack .stack-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--sidebar-background);
	padding: 0.1em 0.5em;
	border-radius: 5px;
}

.stack-row > span:first-child {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 0.5em;
}

#info {
	font-size: 1.5rem;
	min-height: 2em;
	display: flex;
	gap: 1ch;
}

#info span {
	display: grid;
	place-items: center;
	background-color: var(--sidebar-background);
	border-radius: 5px;
	height: 100%;
}

#instruction {
	aspect-ratio: 1/1;
}

#position {
	flex: 1;
}

#loading-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 999;
	display: grid;
	place-items: center;
}

#loader {
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}