.video.slide.cover {
	justify-content: flex-start;
	padding: 0;
}

.video.slide {
	background-color: hsl(200, 15%, 50%);
}

	.video.slide video {
		max-width: 96vw;
	}

	.video.slide.cover > video {
		width: 100%;
	}

.media-frame,
.browser {
	/* Frame offsets in px */
	--frame-top: 38;
	--frame-right: 146;
	--frame-left: 201;

	position: relative;
	width: fit-content;
	min-width: 347px;
	box-sizing: border-box;
	border-radius: 4px;

	box-shadow: 0 20px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3) inset;
	padding-top: calc(var(--frame-top) * 1px);
	background-color: white;

	&::before {
		content: "";
		position: absolute;
		top: 0; right: 0; left: 0;
		border: solid;
		border-width: 38px calc(var(--frame-right) * 1px) 0 calc(var(--frame-left) * 1px);
		border-image: 100% var(--frame-right) 0 var(--frame-left) repeat;
		border-image-source: url("chrome.png");
	}

	&.small {
		padding-top: calc(var(--frame-top) * 1px / 2);

		&::before {
			border-width: 19px calc(var(--frame-right) * 1px / 2) 0 calc(var(--frame-left) * 1px / 2);
		}
	}

	& > :first-child:first-child {
		display: block;
		max-width: 100%;
		max-height: calc(100vh - 6vw);
		max-height: -webkit-fill-available;
		max-height: -moz-available;
		max-height: fill;
		width: auto;
		border-bottom-left-radius: inherit;
		border-bottom-right-radius: inherit;
	}

	&::after {
		content: var(--url);
		position: absolute;
		top: .45em;
		left: 210px;
		font-size: 38%;
		color: black;
		font-weight: 400;
	}

	&:not(:has(> :only-child:is(video, iframe))) {
		padding: 8px 12px;
		padding-top: calc(var(--frame-top) * 1px + 10px);
	}
}

.browser > iframe:only-child {
	width: 100%;
	height: 100%;
}

.video-container {
	position: relative;

	& .annotation {
		background: rgba(0,0,0,.6);
		color: white;
		position: absolute;
		top: var(--top);
		left: var(--left);
		right: var(--right);
		margin-top: calc(var(--pointer-height) + var(--frame-top, 0) * 1px);
		margin-left: calc(-1 * (var(--pointer-left) + var(--pointer-aspect-ratio) * var(--pointer-height) / 2));
		padding: 0 .5em;
		border-radius: .2em;
		filter: drop-shadow(0.1em 0.1em 0.15em rgba(0,0,0,.4));
		font-weight: bold;
		line-height: inherit;
		transition: .4s opacity, .4s transform;

		--pointer-height: .3em;
		--pointer-left: 1em;
		--pointer-aspect-ratio: 2;

		&.centered {
			left: 50%;
			top: 50%;
			transform: translate(-50%);
			transform-origin: center;
		}

		&.top-pointer {
			transform-origin: var(--pointer-left) calc(-1 * var(--pointer-height));

			&::before {
				bottom: calc(100% - .5px);
				clip-path: polygon(0 100%, 50% 0, 100% 100%);
			}
		}

		&:not(.no-pointer)::before {
			content: "";
			position: absolute;
			left: var(--pointer-left);
			width: calc(var(--pointer-aspect-ratio) * var(--pointer-height));
			height: var(--pointer-height);
			background: inherit;
		}

		&.bottom-pointer::before {
			top: calc(100% - .5px);
			clip-path: polygon(0 0, 50% 100%, 100% 0);
		}

		&:is(code) {
			white-space: pre;
		}
	}

	& video:not(.paused) ~ .annotation.on-pause,
	& .annotation.hidden {
		opacity: 0;
		transform: scale(.5);
	}
}