.demo.slide {
	height: 100vh;
	box-sizing: border-box;
	--padding: 1.5rem;
}

.demo.slide:not(.minimal) {
	padding: 0;
	display: grid;
	font-size: 200%;
	align-items: stretch;
	background: hsl(220,10%,95%);
}

.horizontal.demo.slide:not(.minimal) {
	grid-template: "controls" auto
	               "target"   minmax(0, 1fr)
	               "editor"   auto / 1fr;
}

.demo.slide:not(.horizontal):not(.minimal) {
	grid-template: "editor controls" 1.5em /* used to be auto but mysteriously broke one day */
	               "editor target" minmax(0, 1fr) / auto minmax(0, 1fr);
}

.demo.slide:not(.horizontal):not(.isolated) {
	padding-right: var(--padding);
}

.isolated.demo.slide {
	--division: 50;
}

	.isolated.demo.slide > iframe {
		justify-self: stretch;
		border: 0;
		box-sizing: border-box;
		margin: 0;
		border-radius: 8px;
		background: hsla(0,0%,100%,.8);
		resize: both;
	}

		.isolated.horizontal.demo.slide > iframe {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			margin: 0 .5em;
		}

		.isolated:not(.horizontal).demo.slide > iframe {
			margin-bottom: var(--padding);
			border-bottom-left-radius: 0;
			border-top-left-radius: 0;
		}

.demo-target {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
}

.slide:not(.minimal) .demo-target {
	grid-area: target;
}

	.horizontal:not(.isolated) .demo-target {
		padding: 0 1rem;
	}

.demo-controls {
	grid-area: controls;
	display: flex;
	padding: .3em;
	font-size: 60%;
	line-height: 1.5;
}

.demo-controls:empty,
.slide.minimal .demo-controls {
	display: none;
}

.horizontal .demo-controls {
	padding: .3em .6em;
}

	.demo-controls h1 {
		margin: 0;
		margin-right: .5em;
		font-size: 150%;
		line-height: 1;
		font-weight: bold;
		letter-spacing: -.02em;
	}

	.demo-controls form {
		display: contents;
	}

	.demo-controls details.notes {
		font-size: 100%;
	}

	.demo-controls details.notes > summary,
	.demo-controls .button,
	.demo-controls button {
		all: unset;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: .1em .4em;
		margin: 0 .2em;
		box-shadow: 0 0 1px inset;
		border-radius: .2em;
		cursor: pointer;
		font-weight: bold;
	}

	.demo-controls .button:not(:hover):not(:focus),
	.demo-controls button:not(:hover):not(:focus) {
		opacity: .6;
	}

.editor-container {
	display: flex;
	flex-flow: column;
	max-width: 100vw;
}

.slide:not(.minimal) .editor-container {
	grid-area: editor;
}

.demo.slide:not(.horizontal):not(.minimal) div.editor-container {
	width: calc(var(--division, 60) * 1vw);
	min-width: 15em;
}

.horizontal.demo.slide:not(.minimal) > div.editor-container:first-child,
.horizontal.demo.slide:not(.minimal) > style:first-child + div.editor-container {
	margin-top: auto;
}

.demo.slide:not(.horizontal):not(.isolated) div.editor-container {
	margin-right: 1em;
}

	.editor-container div.prism-live {
		flex: auto;
	}

	.demo.slide div.prism-live.collapsed {
		--min-height: 1.6em;
		max-height: var(--collapsed-height, var(--min-height));
		min-height: var(--min-height);
		overflow: hidden;
	}

		.demo.slide div.prism-live.collapsed pre {
			opacity: .2;
		}

		.demo.slide div.prism-live.collapsed textarea,
		.demo.slide div.prism-live.collapsed pre {
			overflow: hidden;
		}

div.prism-live ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

div.prism-live ::-webkit-scrollbar-track {
	background: hsl(200, 10%, 30%);
}

div.prism-live ::-webkit-scrollbar-corner {
	background: hsl(200, 10%, 25%);
}

div.prism-live ::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: hsla(0,0%,100%,.05);
	box-shadow: 0 0 .2em black;
}

div.prism-live ::-webkit-scrollbar-thumb:vertical {
	background: hsla(0,0%,100%,.2);
}

div.prism-live ::-webkit-scrollbar-thumb:hover {
	background: hsla(0,0%,100%,.3);
}

div.prism-live {
	color: inherit;
	font-size: calc(var(--font-size-multiplier, 1) * 100%);
	line-height: 1.5em;
	max-height: 100vh;
	transition: .2s;
	transition-property: max-height, flex;
}

.slide:not(.minimal) div.prism-live {
	background: hsl(200, 10%, 15%);
}

textarea.prism-live {
	max-width: 100vw;
	min-height: 1.6em;
}

.demo.slide:not(.horizontal):not(.minimal) textarea.prism-live {
	box-shadow: -.1em 0 .2em rgba(0,0,0,.3) inset;
}

.demo.slide.horizontal pre.prism-live {
	max-height: calc(var(--division, 50) * 1vh);
}

.demo.slide.horizontal:not(.minimal) textarea.prism-live {
	box-shadow: 0 .1em .2em rgba(0,0,0,.3) inset;
}

pre.prism-live {
	height: 100%;
	line-height: 1.5em;
}

.slide:not(.minimal) pre.prism-live {
	background: hsl(200, 10%, 20%) linear-gradient(rgba(0,0,0,.1) 50%, transparent 0);
	background-origin: content-box;
	background-size: auto 3em;
	background-attachment: local;
}

.prism-live label {
	position: absolute;
	top: .6rem;
	right: 1rem;
	z-index: 1;
	padding: .1rem .5rem;
	border-radius: .2em;
	background: hsl(30, 100%, 50%);
	color: white;
	cursor: pointer;
	text-transform: uppercase;
	font: bold 1.2rem/1.5 var(--font-heading, var(--heading-font, Helvetica Neue, Segoe UI, sans-serif));
	opacity: .5;
}

	.prism-live label:hover {
		background: hsl(15, 100%, 45%);
		opacity: 1;
	}