main {
	user-select: none;
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-rows: calc(100vh - 60px) 60px;
	@media (width < 1000px) {
		height: auto;
		grid-template-rows: auto auto;
	}
	> div.stage {
		display: grid;
		> div {
			grid-area: 1/1/2/2;
			z-index: 1;
			width: calc(100% - 40px);
			height: calc(100vh - 80px);
			margin-top: 20px;
			margin-inline: 20px;
			display: grid;
			grid-tem-late-columns: 1fr 1fr;
			grid-tem-late-rows: 1fr 1fr;
			column-gap: 5px;
			row-gap: 5px;
			perspective: 1000px;
			> article {
				position: relative;
				width: 100%;
				height: 100%;
				transform-style: preserve-3d;
				> div {
					position: absolute;
					inset: 0;
					display: flex;
					backface-visibility: hidden;
					border-radius: 20px;
					transition: transform 5s ease;
					padding-block: 10px;
					padding-inline: 15px;
					&.back {
						align-items: end;
						justify-content: end;
						background-color: #fff;
						background-image: url(./image/card_back.svg);
						background-repeat: no-repeat;
						background-size: contain;
						background-position: 50% 50%;
						transform: rotateY(0deg);
						font-size: 1rem;
						line-height: 1;
						color: #faa;
					}
					&.front {
						align-items: center;
						justify-content: center;
						background-color: #eee;
						background-image: url(./image/card_front.svg);
						background-repeat: no-repeat;
						background-size: 100% 100%;
						transform: rotateY(180deg);
						font-size: 24px;
						color: #fff;
						width: 100%;
						height: 100%;
						white-space: normal;
						overflow-wrap: break-word;
						word-wrap: break-word;
						padding: 10px;
					}
				}
			}
		}
		> canvas {
			grid-area: 1/1/2/2;
			z-index: 2;
			width: 100%;
			height: 100%;
		}
	}
	> div.control {
		min-height: 60px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		column-gap: 10px;
		row-gap: 5px;
		padding-inline: min(10px,1vw);
		> div.pen {
			display: flex;
			align-items: center;
			column-gap: 5px;
			> span {
				font-size: 0.8rem;
				line-height: 1;
				color: #333;
				@media (width < 1000px) {
					display: none;
				}
			}
			> input[type="color"] {
			}
			> ce-select {
				width: 190px;
				&:nth-of-type(2) {
					width: 120px;
					@media (width < 375px) {
						display: none;
					}
				}
			}
			> button {
				padding-block: 8px;
				padding-inline: 10px;
				border: none;
				border-radius: 20px;
				cursor: pointer;
				font-size: 0.8rem;
				line-height: 1;
				background-color: #000;
				color: #fff;
				&:hover {
					opacity: 0.7;
				}
			}
		}
		> div#information {
			flex-grow: 1;
		}
		> button {
			background-color: transparent;
			border: solid 1px #000;
			border-radius: 3px;
			color: #000;
			cursor: pointer;
			padding: 5px 60px;
			white-space: nowrap;
			@media (width < 1000px) {
				padding: 5px 3px;
			}
			&:hover {
				background-color: #fff;
				color: #333;
			}
			&:disabled {
				opacity: 0.2;
			}
		}
		> p {
			font-size: 0.8rem;
			line-height: 1.2;
			color: #888;
			opacity: 0.7;
			white-space: nowrap;
			@media (width < 1000px) {
				display: none;
			}
		}
	}
}
section.config {
	> div:nth-of-type(2) {
		padding: 15px;
		font-size: 0.9rem;
		line-height: 1.3;
		color: #7b6246;
		font-weight: 400;
		> .ranges {
			display: flex;
			align-items: center;
			column-gap: 5px;
			@media (width < 890px) {
				flex-direction: column;
			}
			> span {
				margin: 5px;
				display: flex;
				align-items: center;
				font-size: 0.9rem;
				line-height: 1.2;
			}
		}
		select {
			font-size: 0.75rem !important;
		}
		> div.button {
			margin-top: 3px;
			display: flex;
			column-gap: 10px;
			> div {
				flex-grow: 1;
			}
		}
		> div.spacer {
			margin-top: 10px;
		}
		> textarea#candidatePreset {
			display: none;
		}
	}
	&:nth-of-type(4n - 4) {
		> div:nth-of-type(1) {
			background-color: rgba(100,100,255,0.1);
		}
	}
	&:nth-of-type(4n - 3) {
		> div:nth-of-type(3) {
			background-color: rgba(255,200,150,0.1);
		}
	}
	&:nth-of-type(4n - 2) {
		> div:nth-of-type(1) {
			background-color: rgba(200,200,255,0.1);
		}
	}
	&:nth-of-type(4n -1) {
		> div:nth-of-type(3) {
			background-color: rgba(200,255,100,0.1);
		}
	}
}