.minimal.demo.slide {


	& h1 {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
		text-align: center;
	}

	& iframe {
		width: 100%;
		background: white;
		margin-bottom: 1em;
		resize: horizontal;
	}

	& .editor-container {
		order: 2;
		width: 100%;
		height: 80vh;
		font-size: 75%;
	}
}

#tab-libraries {
	display: grid;
	padding: 0;

	& img {
		grid-column: 1;
		grid-row: 1;
		margin-top: -1em;
		max-height: 70vh;
		box-shadow: .1em .1em 1em rgba(0,0,0,.8);

		&:nth-child(odd) {
			transform: rotate(2deg);
		}

		&:nth-child(even) {
			transform: rotate(-1deg);
		}
	}
}

#js-class-tag-name {
	& div {
		font-size: 150%;
		font-weight: bold;
		text-align: center;
	}

	& .plus {
		margin-bottom: auto;
		font-size: 500%;
		line-height: .8;
		transform: translateY(-.3em);
	}
}

#connectedness {
	& .tree {
		--dx: 1em;
	}

	& .tree.connected .node {
		--color: var(--color-green);
		--parent-color: var(--color-green)
	}

	& .tree.not-connected .node {
		--color: var(--color-magenta);
		--parent-color: var(--color-magenta)
	}
	& .legend {
		grid-column-end: span 2;
	}
}

#video {
	overflow: hidden;

	& pre {
		margin-top: 1em;
	}

	& img {
		position: absolute;
		top: 0;
		right: -1px;
		height: 100vh;
		max-height: none;
		transition: 200ms;
		image-rendering: -webkit-optimize-contrast;
	}

	&:not([data-step]) img {
		transform: translateX(100%);
	}

	&[data-step] ::-webkit-media-controls-play-button {
		outline: 1px dashed #7F1FD2;
		outline-offset: -1px;
		background-color: #4B7398;
	}
}

#shadow-dom-definition {
	background: url(img/shadow.avif) no-repeat center / cover;
	color: black;

	& div {
		max-width: 15em;
		text-align: center;
	}

	& .label {
		color: white;
	}
}

#component-types {
	& img {
		object-fit: cover;
		object-position: top left;
		max-height: calc(100% - 3em);
	}
}

h1 + h2.note {
	margin-top: -.5em;
}

#composition {
	& .browser {
		overflow: hidden;

		& video {
			object-fit: cover;
			object-position: top;
		}
	}
}

#observers-def {
	align-items: start;
	justify-content: end;
	font-weight: 600;
	color: black;
	text-shadow: 0 0 .1em white;
	background: radial-gradient(circle at bottom left, hsl(0 0% 100% / .4) 40%, transparent 50%),
		url(img/observer.avif) no-repeat left / cover;

	& ul {
		max-width: 25ch;
	}
}