#prev, .main {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	flex-direction: column
}
.main > ul {
	margin: 0
}
#drop {
	width: 360px;
	min-height: 120px;
	border: 2px dashed #999;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #666;
	padding: 10px 20px;
	user-select: none;
	white-space: initial
}
#drop.dragover {
	background: #eef
}
.controls {
	display: flex;
	gap: 5px;
	align-items: center
}
#canvasDisplay {
	display: block;
	max-width: calc(100% - 2px);
	border: 1px solid #ccc;
	background: #f3f3f3;
	image-rendering: pixelated
}
#canvasDisplay:hover {
	background: #eee
}
button {
	border: 2px solid #000;
	border-radius: 5px;
	padding: 8px 16px;
	cursor: pointer
}
button:disabled {
	opacity: .5;
	cursor: not-allowed
}
#foTr > li:has(#removeTrans:not(:checked)) + li {
	opacity: .5;
	pointer-events: none
}
#dragOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100
}
.main:not(:has(.dragover)) > #dragOverlay {
	display: none
}
.main > h3 {
	margin: 0
}