.leonlab-video-modal-button__root {
	display: grid;
	gap: 10px;
	justify-items: start;
}

.leonlab-video-modal-button__thumb {
	width: min(520px, 100%);
	aspect-ratio: 16/9;
	border-radius: 16px;
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
}

.leonlab-video-modal-button__playBadge {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: #fff;
	background: radial-gradient(circle at center, rgba(0,0,0,0.35), rgba(0,0,0,0));
}

.leonlab-video-modal-button__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,0.12);
	background: rgba(0,0,0,0.02);
	cursor: pointer;
}

.leonlab-video-modal-button__hint {
	font-size: 14px;
	opacity: 0.75;
}

.leonlab-video-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
}

.leonlab-video-modal.is-open {
	display: block;
}

.leonlab-video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--leonlab-video-backdrop-color, #000);
	opacity: var(--leonlab-video-modal-opacity, 0.88);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.leonlab-video-modal__container {
	width: min(1040px, 92vw);
}

.leonlab-video-modal__ratio {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(255,255,255,0.04);
}

.leonlab-video-modal__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.leonlab-video-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.22);
	background: rgba(0,0,0,0.3);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}