body {
	margin: 0;
	color: #fff;
	font-family: sans-serif;
	font-size: 14px;
	display: flex;
	height: 100vh;
	background-color: #21252b;
}

textarea {
	width: 30%;
	padding: 1rem;
	border: none;
	border-right: 1px solid #555;
	resize: none;
	font-family: monospace;
	font-size: 14px;
	background-color: #282c34;
	color: #fff;
}

#viewer {
	width: 70%;
	overflow-y: auto;
	padding: 1rem;
}

.key {
	display: inline;
	font-weight: bold;
	padding-left: 1rem;
}

.value {
	display: inline;
	margin-left: 0.5rem;
	text-wrap-mode: nowrap;
	text-overflow: ellipsis;
}

.container {
	border-left: 2px solid #31373f;
	padding-left: 0.5rem;
}

.array {
	position: relative;
}

.object {
	position: relative;
}

.array > .key,
.object > .key {
	cursor: pointer;
}

.array > .key:hover,
.object > .key:hover {
	color: #a6a6a6;
}

.array::before {
	position: absolute;
	left: 0;
	content: "-";
	z-index: -1;
}

.object::before {
	position: absolute;
	left: 0;
	content: "-";
	z-index: -1;
}

.collapsed > .container {
	display: none;
}

.collapsed::after {
	font-weight: normal;
	color: #888;
}

.collapsed.array::before {
	content: "+";
}

.collapsed.object::before {
	content: "+";
}

.collapsed.array::after {
	content: "[ ]";
}

.collapsed.object::after {
	content: "{ }";
}