section+section {
	border-left: 1px solid var(--brand-sub-color)
}

section>.header {
	background: var(--brand-sub-color);
	color: #fff
}

section>.header>.caption {
	line-height: 1;
	flex: 1
}

section>.header label {
	padding-left: 15px;
	cursor: pointer;
	font-size: 12px;
}

section>.header input {
	margin-top: 0;
	vertical-align: middle
}

section>.header button {
	margin: 0
}

section>.header button::-moz-focus-inner {
	border: 0
}

.editor {
	flex: 1;
	padding: 10px;
	outline: 0;
	border: 0;
	resize: none;
	min-height: 50vh
}

#result {
	position: relative
}

#error {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, .98);
	color: #d00;
	transition: all .15s;
	opacity: 0;
	visibility: hidden
}

#error.show {
	transition: all .35s;
	opacity: 1;
	visibility: visible
}

#error .header {
	background: #e82020
}

#errorMessage {
	padding: 10px;
	font-size: 120%;
	white-space: pre-wrap
}

#output {
	overflow: auto;
	min-height: 50vh
}

.change-log-toggle {
	display: block;
	font-size: 10px;
	padding: 4px 10px;
	background: #abc;
	text-align: center;
	cursor: pointer
}

#transformations-log {
	overflow: auto;
	background: #f4f4fa
}

#result.show-transformations #transformations-log .content{
	height: auto;
	opacity: 1;
}
#transformations-log .content {
	padding: 10px;
	font-size: 12px;
	height: 0;
	opacity: 0;
}

#transformations-log H2 {
	display: inline-block;
	padding: 2px 5px 0px;
	position: relative;
	left: -5px;
	color: #aaa;
	background: rgba(255,255,255,.65);
	margin: 0 0 0.5em;
	font-size: 12px;
}

#transformations-log .delta+H2 {
	margin-top: 1.25em
}

#transformations-log .empty-delta {
	color: #ccc;
	font-size: 12px
}

#transformations-log .delta {
	line-height: 1.5
}

#transformations-log .delta .added {
	padding: 2px 0;
	background: #595;
	color: #fff
}

#transformations-log .delta .removed {
	padding: 2px 0;
	background: #a66;
	color: #fff
}

#transformations-log .header:hover {
	background: #9ab
}

#output,
#transformations-log {
	flex: 1;
	max-height:900vh;
	height: auto;
	transition: .25s ease-in-out;
	transition-property: padding, max-height, height, flex-grow;
	box-sizing: border-box
}

#result.show-transformations #output{
	flex-grow: 0;
	overflow: hidden
}

#result:not(.show-transformations) #transformations-log {
	flex-grow: 0;
	overflow: hidden
}

.stat-block {
	padding: 5px 10px;
	background: #d8e8f8;
	display: flex;
	align-items: flex-end
}

.stat-block .powered {
	flex: 1;
	text-align: right
}

.stat-block #stat {
	white-space: pre-wrap;
	font-size: 12px;
	line-height: 1.4
}