* {
	font-family: sans-serif;
	box-sizing: border-box;
}
#dragarea {
	display: none;
}
#dragarea.active {
	display: flex;
	font-size: 8vw;
	justify-content: center;
	align-items: center;
	position: absolute;
	box-sizing: border-box;
	border: 1px dashed lime;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 8px;
	background: #00000080;
	z-index: 1;
}
#result {
	display: flex;
	flex-direction: row;
	border: 1px solid black;
	width: 100%;
	height: 100%;
}
#result > * {
	overflow-y: auto;
}
#tree {
	position: relative;
	background-color: lightgray;
	flex: 0 2 300px;
	margin: 0;
	padding: 16px;
}
#output {
	word-break: break-all; /* fallback to line-break */
	line-break: anywhere;
	white-space: break-spaces;
	font-family: monospace;
	flex: 1 3 300px;
	margin: 0;
	padding: 16px;
}
#output, #output * {
	font-family: monospace;
}
li.hidden_dropdown + ul {
	display: none;
}
ul {
	list-style-type: none;
	padding-inline-start: 10px;
}
li > button {
	all: unset;
	position: absolute;
	right: 20px;
	height: 16px;
	width: 16px;
	text-align: center;
	line-height: 16px;
	color: gray;
}
li > button:hover {
	text-shadow: 0px 0px 2px black;
}
li > button::after {
	content: "∧";
}
li.hidden_dropdown > button::after {
	content: "∨";
}
li.no_children > button {
	display: none;
}
li {
	border: 1px solid gray;
	border-radius: 5px;
	background: linear-gradient(180deg, #e0e0e0 50%, #c0c0c0 95%);
	text-overflow: ellipsis;
	overflow: hidden;
}
li.hidden {
	display: none;
}
li.selected {
	background: linear-gradient(180deg, #e0c880 50%, #c09000 95%);
}
li::after {
	content: attr(data-label);
	padding: 5px;
	white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: black;
		color: #ccc;
	}
	#result {
		border: 1px solid #ccc;
	}
	#tree {
		background-color: #333;
	}
	li > button {
		color: #aaa;
	}
	li > button:hover {
		text-shadow: 0px 0px 2px #ddd;
	}
	li {
		border: 1px solid #808080;
		background: linear-gradient(180deg, #505050 50%, #282828 95%);
	}
	li.selected {
		background: linear-gradient(180deg, #b38600 50%, #664d00 95%);
	}
}