div.stage {
	width: 100%;
	height: 100vh;
	padding: 10px;
	@media (width < 670px) {
		height: auto;
	}
	display: grid;
	> div {
		grid-area: 1/1/2/2;
		z-index: 1;
		width: 100%;
		height: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 10px;
		row-gap: 10px;
		@media (width < 670px) {
			grid-template-columns: 1fr;
		}
		> .result {
			flex-grow: 1;
			> table {
				border-collapse: separate;
				border-spacing: 3px;
				width: 100%;
				height: 100%;
				@media (max-width:669px) {
					height: auto;
				}
				> thead {
					> tr {
						> th {
							background-color: rgba(0,0,0,0.2);
							font-size: clamp(15px,3vw,40px);
							line-height: 1;
							color: #fff;
							font-weight: 700;
							font-family: var(--font-number);
							text-align: center;
							@media (width < 670px) {
								padding-block: 5px;
							}
							@media (height < 750px) {
								font-size: clamp(15px,3vw,20px);
							}
						}
					}
				}
				> tbody {
					> tr {
						> td {
							background-color: rgba(255,255,255,0.5);
							font-size: clamp(15px,3vw,40px);
							line-height: 1;
							color: #000;
							font-weight: 700;
							font-family: var(--font-number);
							letter-spacing: 0.1em;
							text-align: center;
							@media (width < 670px) {
								padding-block: 5px;
							}
							@media (height < 750px) {
								font-size: clamp(15px,5vh,30px);
							}
							&.open {
								background-color: #ef0;
							}
							&.last {
								background-color: #f00;
								color: #fff;
							}
						}
					}
				}
			}
		}
		> .machine {
			position: relative;
			> .stage {
				max-width: min(1080px,50vw,calc(100vh - 20px));
				max-height: min(1080px,50vw,calc(100vh - 20px));
				min-width: min(1080px,50vw,calc(100vh - 20px));
				min-height: min(1080px,50vw,calc(100vh - 20px));
				@media (width < 670px) {
					max-width: calc(100vw - 20px);
					max-height: calc(100vw - 20px);
					min-width: calc(100vw - 20px);
					min-height: calc(100vw - 20px);
				}
				position: relative;
				> img {
					position: absolute;
					max-width: 100%;
				}
			}
			> .buttons {
				position: absolute;
				bottom: 5px;
				right: 1px;
				display: flex;
				align-items: center;
				column-gap: 10px;
				> button {
					background-color: transparent;
					border: solid 1px #000;
					border-radius: 3px;
					color: #000;
					padding: 5px 30px;
					cursor: pointer;
					&:hover {
						opacity: 0.8;
					}
					&:disabled {
						opacity: 0.1;
					}
				}
				> p {
					font-size: 0.8rem;
					line-height: 1.2;
					color: #fff;
					opacity: 0.7;
				}
			}
		}
	}
}
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;
		}
		> .button {
			margin-top: 3px;
		}
		> .spacer {
			margin-top: 10px;
		}
	}
	&: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);
		}
	}
}

div#additional {
	display: none;
	&.visible {
		display: block;
	}
}