div.prism-live {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-flow: column;
}

textarea.prism-live,
pre.prism-live {
	padding: .2rem .5rem;
	box-sizing: border-box;
	margin: 0;
}

textarea.prism-live {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	color: transparent;
	/* color: hsla(0,0%,50%,.4); */
	cursor: text;
	white-space: pre;
	border: 0;
	outline: none;
	background: transparent;
	resize: none;
	--selection-background: hsl(320, 80%, 25%);
	--selection-color: hsla(0, 0%, 100%, .8);
}

@supports (not (caret-color: black)) and (-webkit-text-fill-color: black) {
	textarea.prism-live {
		color: inherit;
		-webkit-text-fill-color: transparent;
	}
}

	/* Setting specific colors is needed
	 * because otherwise Firefox shows blank text */
	textarea.prism-live::-moz-selection {
		background: var(--selection-background);
		color: var(--selection-color);
	}

	textarea.prism-live::selection {
		background: var(--selection-background);
		color: var(--selection-color);
	}

pre.prism-live {
	flex: 1;
	position: relative;
	pointer-events: none;
	overflow: hidden;
	max-height: 100%;
	--scrollbar-width: 17px;
	padding-bottom: var(--scrollbar-width);
	padding-right: var(--scrollbar-width);
}

	pre.prism-live > code:empty::before {
		content: " "
	}