<commit_before>@import (css) 'https://fonts.googleapis.com/css?family=Exo+2:900';
@import (css) 'https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css';

.fixed-height(@height) {
	flex: 0 0 @height;
	height: @height;
}

.fixed-width(@width) {
	flex: 0 0 @width;
	width: @width;
}

.grow-height(@ratio) {
	flex: @ratio 1 0;
	height: 0;
}

.grow-width(@ratio) {
	flex: @ratio 1 0;
	width: 0;
}

.vertical-center {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

html, body, .container {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

button {
	border: none;
	outline: none;
	padding: 0;
	background: none;
	font-family: inherit;
	cursor: pointer;
}

.layer {
	background-size: cover;
	background-position: center;

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	z-index: 0;
}

.background-layer {
	position: fixed;
	background-image: url(image/background.svg);

	.cloud {
		position: absolute;
		left: 100%;

		@keyframes slide {
			from {
				transform: translateX(0);
			}
			to {
				transform: translateX(calc(-100vw - 100%));
			}
		}

		animation: linear 1s infinite slide;

		&:nth-child(1) {
			top: 7%;
			animation-duration: 120s;
			animation-delay: -50s;
			&::before { content: url(image/cloud-01.png); }
		}

		&:nth-child(2) {
			top: 15%;
			animation-duration: 100s;
			animation-delay: -80s;
			&::before { content: url(image/cloud-02.png); }
		}

		&:nth-child(3) {
			top: 23%;
			animation-duration: 80s;
			animation-delay: 0s;
			&::before { content: url(image/cloud-03.png); }
		}

		&:nth-child(4) {
			top: 29%;
			animation-duration: 150s;
			animation-delay: -120s;
			&::before { content: url(image/cloud-04.png); }
		}

		&:nth-child(5) {
			top: 37%;
			animation-duration: 70s;
			animation-delay: -20s;
			&::before { content: url(image/cloud-05.png); }
		}

		&:nth-child(6) {
			top: 45%;
			animation-duration: 150s;
			animation-delay: -60s;
			&::before { content: url(image/cloud-06.png); }
		}

		&:nth-child(7) {
			top: 55%;
			animation-duration: 110s;
			animation-delay: -90s;
			&::before { content: url(image/cloud-07.png); }
		}

		&:nth-child(8) {
			top: 68%;
			animation-duration: 100s;
			animation-delay: 0s;
			&::before { content: url(image/cloud-08.png); }
		}
	}
}

.screens-layer {
	overflow: hidden;

	.screens {
		display: inline-flex;

		transition: transform .8s cubic-bezier(0, 0.75, 0.3, 1);

		&.gaming {
			transform: translateX(-100vw);
		}

		.screen {
			.fixed-width(100vw);
			height: 100vh;
			position: relative;

			.menu {
				width: 800px;

				position: absolute;
				top: 40%;
				left: 50%;
				transform: translate(-50%, -50%);

				.row {
				    text-align: center;
				}

				.logo {
					margin-bottom: 48px;
				}

				button.big {
					background: rgba(61, 128, 42, 0.2);
					transition: background-color .3s;

					padding: 0 2em;
					margin: 24px 0;
					border: 2px solid #222248;
					border-radius: 36px;

					line-height: 72px;
					font-size: 48px;
					font-weight: bold;
					color: white;

					&:hover {
						background: rgba(61, 128, 42, 0.6);
					}
				}

				button.small {
					font-size: 30px;
					margin: 18px 0;
				}

				.stage-list {
					padding: 0;
					margin: 0 0 1em;

					column-count: 2;

					display: none;
					&.active { display: block; }

					.stage-name {
						margin-left: 1em;

						list-style: none;

						text-align: left;
						line-height: 1.5em;
						font-size: 20px;

						position: relative;
						cursor: pointer;

						&::before {
							content: '';

							width: 0;
							height: 0;
							position: absolute;
							top: calc(~"0.75em - 6px");
							right: calc(~"100% + 0.3em");

							border-top: 6px solid transparent;
							border-left: 12px dotted black;
							border-bottom: 6px solid transparent;

							transition: transform .5s ease-out;
						}

						&:hover::before {
							transform: rotateX(360deg);
						}
					}
				}

				.credit-body {
					margin: 0 auto;
					width: 500px;
					text-align: justify;
					line-height: 1.5em;

					display: none;
					&.active { display: block; }

					a {
						&, &:visited {
							text-decoration: none;
							color: #245cff;
						}
					}
				}
			}
		}
	}
}

.game-screen {
	.stage-layer {
		display: flex;
		flex-direction: column;

		.upper-area {
			flex: 1 0 0;
			height: 0;

			display: flex;

			.panel-area {
				.fixed-width(200px);

				display: flex;
			}

			.pipe-area {
				flex: 1 0 0;
				width: 0;

				display: flex;
				flex-direction: column;

				.upper-pipe-area {
					.fixed-height(131px);

					margin-left: 100px;
					margin-right: 100px;

					display: flex;

					.left-corner-pipe {
						.fixed-width(93px);
						background-image: url(image/pipe-upper-left-corner.png);
					}

					.left-pipe, .right-pipe {
						background-image: url(image/pipe-upper.png);
						background-size: 100% 100%;
					}

					.left-pipe {
						.grow-width(1);
					}

					.right-pipe {
						.grow-width(2);
					}

					.center-pipe {
						.fixed-width(81px);
						background-image: url(image/pipe-upper-center.png);
					}

					.right-corner-pipe {
						.fixed-width(93px);
						background-image: url(image/pipe-upper-right-corner.png);
					}
				}

				.downer-pipe-area {
					.fixed-height(119px);

					margin-left: 100px;
					margin-right: 100px;

					display: flex;

					.left-corner-pipe {
						.fixed-width(93px);
						background-image: url(image/pipe-downer-left-corner.png);
					}

					.left-pipe, .right-pipe {
						background-image: url(image/pipe-downer.png);
						background-size: 100% 100%;
					}

					.left-pipe {
						.grow-width(3);
					}

					.right-pipe {
						.grow-width(2);
					}

					.center-pipe {
						.fixed-width(131px);
						background-image: url(image/pipe-downer-center.png);
					}

					.right-corner-pipe {
						.fixed-width(93px);
						background-image: url(image/pipe-downer-right-corner.png);
					}
				}

				.case-board-area {
					flex: 1 0 0;
					height: 0;

					display: flex;

					.case-pipe-area {
						.grow-width(1);

						display: flex;
						flex-direction: column;

						.case-joint-top-pipe, .case-joint-bottom-pipe,
						.case-top-pipe, .case-bottom-pipe {
							width: 40px;
							margin: 0 auto;
						}

						.case-joint-top-pipe, .case-joint-bottom-pipe {
							.fixed-height(10px);
						}

						.case-joint-top-pipe {
							background-image: url(image/pipe-joint-top.png);
						}

						.case-joint-bottom-pipe {
							background-image: url(image/pipe-joint-bottom.png);
						}

						.case-top-pipe, .case-bottom-pipe {
							.grow-height(1);
							background-image: url(image/pipe-vertical.png);
							background-size: 100% 100%;
						}

						.case-area {
							width: 471px;
							height: 343px;

							position: relative;
							margin: 0 auto;

							padding: 45px;
							box-sizing: border-box;

							&::before {
								content: url(image/case-panel.png);
								position: absolute;
								left: -12px;
								top: -3px;
								z-index: -1;
							}

							.case {
								.vertical-center;
								position: relative;
							}
						}
					}

					.board-area {
						.grow-width(1);

						.board-frame-wrapper {
							height: 100%;
							margin: 0 auto;

							display: flex;
							flex-direction: column;
						}

						.board-joint-top-pipe, .board-joint-bottom-pipe,
						.board-top-pipe, .board-bottom-pipe {
							width: 40px;
							margin: 0 auto;
						}

						.board-joint-top-pipe, .board-joint-bottom-pipe {
							.fixed-height(10px);
						}

						.board-joint-top-pipe {
							background-image: url(image/pipe-joint-top.png);
						}

						.board-joint-bottom-pipe {
							background-image: url(image/pipe-joint-bottom.png);
						}

						.board-top-pipe, .board-bottom-pipe {
							.grow-height(1);
							background-image: url(image/pipe-vertical.png);
							background-size: 100% 100%;
						}

						.board-top-pipe, .board-bottom-pipe {
							.grow-height(1);
						}

						.board-frame {
							width: 100%;

							.fixed-height(0);

							display: flex;
							flex-direction: column;

							position: relative;

							.top, .bottom {
								.fixed-height(25px);
							}

							.middle {
								.grow-height(1);
							}

							.top, .bottom, .middle {
								display: flex;

								.left, .right {
									.fixed-width(25px);
								}

								.center {
									.grow-width(1);
								}
							}

							.top .left {
								background-image: url(image/frame-topleft.png);
							}

							.top .center {
								background-image: url(image/frame-top.png);
								background-size: 100% 100%;
							}

							.top .right {
								background-image: url(image/frame-topright.png);
							}

							.middle .left {
								background-image: url(image/frame-left.png);
								background-size: 100% 100%;
							}

							.middle .right {
								background-image: url(image/frame-right.png);
								background-size: 100% 100%;
							}

							.bottom .left {
								background-image: url(image/frame-bottomleft.png);
							}

							.bottom .center {
								background-image: url(image/frame-bottom.png);
								background-size: 100% 100%;
							}

							.bottom .right {
								background-image: url(image/frame-bottomright.png);
							}

							.clock-area {
								position: absolute;
								top: 100%;
								right: 0;

								padding: 3px 4px 4px;

								border: 2px outset #ff920e;
								border-top: none;
								border-bottom-right-radius: 6px;
								border-bottom-left-radius: 6px;

								background: #fbae36;
								color: #fffdf7;
								font-size: 16px;
								font-weight: bold;
								font-family: Arial;
								line-height: 1;

								.clock-icon {
									display: inline-block;
									width: 16px;
									height: 16px;
									background-image: url(image/clock-icon.png);
									vertical-align: text-top;
									margin-right: .2em;
								}

								.clock-value {
									vertical-align: bottom;
								}
							}
						}

						.board-wrap {
							background-color: #e4b67c;

							.block {
								position: relative;
							}

							.block::after {
								content: '';

								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;

								border: 1px dotted rgba(0, 0, 0, .3);
								pointer-events: none;
							}
						}
					}
				}
			}
		}

		.downer-area {
			.fixed-height(150px);

			display: flex;

			.left-area, .right-area {
				.grow-width(1);
			}

			.controls-area {
				.fixed-width(420px);
				position: relative;
			}
		}
	}

	.modal-layer {
		pointer-events: none;

		.modal {
			pointer-events: initial;
			width: 80%;
			background: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/restaurant_icons.png");
			color: #333;
			box-sizing: border-box;
			border-radius: 30px;
			position: absolute;
			max-height: 80vh;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.close {
				width: 102px;
				height: 102px;

				background-image: url(image/close.png);

				position: absolute;
				top: -30px;
				right: -30px;
			}

			.modal-content {
				padding: 50px;
				overflow-y: auto;
				width: 100%;
				max-height: 80vh;
				box-sizing: border-box;
				text-align: center;
				font-size: 24px;
			}
		}
	}

	.inputs, .arrows, .user-outputs, .correct-outputs {
		display: flex;

		.input, .output {
			.grow-width(1);

			@height: 40px;
			height: @height;
			line-height: @height - 4px;
			border: 1px solid;

			text-align: center;
			font-size: 32px;
			font-family: 'Exo 2', sans-serif;

			position: relative;

			&.wrong::after {
				content: '';

				position: absolute;
				top: calc(100% + 5px);
				left: 0;

				width: 100%;
				height: 30px;

				background-image: url(image/panel-answer-wrong.png);
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}

			&.correct::after {
				content: '';

				position: absolute;
				top: calc(100% + 5px);
				left: 0;

				width: 100%;
				height: 30px;

				background-image: url(image/panel-answer-correct.png);
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}
		}

		.arrow {
			.grow-width(1);
			height: 75px;

			background-image: url(image/arrow-down.png);
			background-position: center;
			background-repeat: no-repeat;

			position: relative;
			overflow: hidden;

			&::after {
				content: '';
				position: absolute;

				left: 0;
				right: 0;
				height: 180px;

				background-image: linear-gradient(
					to bottom,
					rgba(255, 255, 255, 0) 0%,
					rgba(255, 255, 255, .5) 12.5%,
					rgba(255, 255, 255, 0) 25%,
					rgba(255, 255, 255, .5) 37.5%,
					rgba(255, 255, 255, 0) 50%,
					rgba(255, 255, 255, .5) 62.5%,
					rgba(255, 255, 255, 0) 75%,
					rgba(255, 255, 255, .5) 87.5%,
					rgba(255, 255, 255, 0) 100%
				);

				@keyframes verticalSlide {
					from { transform: translateY(-50%); }
					to   { transform: translateY(0); }
				}

				animation: 3s linear 0s infinite verticalSlide;
			}
		}
	}

	.inputs, .outputs {
		border: 1px solid black;
	}

	.board {
		display: inline-flex;
		position: relative;

		.rows {
			display: inline-flex;
			flex-direction: column;
			position: relative;

			.row {
				display: inline-flex;
				margin: 0;
			}
		}

		.data-layer {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			pointer-events: none;

			.data {
				position: absolute;
				padding: 3px;
				line-height: 1em;
				font-weight: bold;
				border-radius: 5px;
				background: darkorange;
				transform: translate(-50%, -50%);
				color: white;
			}
		}
	}

	.block {
		width: 50px;
		height: 50px;
		cursor: pointer;
		box-sizing: border-box;
		background-size: contain;

		&::before, &::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			pointer-events: none;
			box-sizing: border-box;
			background-size: contain;
		}
		&[data-rotate='90']::before {
			transform: rotate(90deg);
		}
		&[data-rotate='180']::before {
			transform: rotate(180deg);
		}
		&[data-rotate='270']::before {
			transform: rotate(270deg);
		}
		@blocks-rotatable: wireI, wireL, wireT, diode;
		@blocks-rotate-back-wireI: times-2, add-3, times-3, plus-1, plus-2, minus-1, minus-2, div-2, div-3, const-0, const-1, const-2;
		@blocks-norotate: add, sub, mul, div,  c-contact, conditional, transistor, wireX, pow, mod, bitshift-left, bitshift-right, bitwise-and, bitwise-or, bitwise-xor, iko-ru, neq, gt, geqq, lt, leqq;

		.-r(@i: length(@blocks-rotatable)) when (@i > 0) {
			@name: extract(@blocks-rotatable, @i);
			&[data-type=@{name}]::before {
				background-image: url("image/@{name}.png");
			}
			.-r((@i - 1));
		} .-r;
		.-rI(@i: length(@blocks-rotate-back-wireI)) when (@i > 0) {
			@name: extract(@blocks-rotate-back-wireI, @i);
			&[data-type=@{name}] {
				&::before {
					background-image: url("image/wireI.png");
				}
				&::after {
					background-image: url("image/@{name}.png");
				}
			}
			.-rI((@i - 1));
		} .-rI;
		.-(@i: length(@blocks-norotate)) when (@i > 0) {
			@name: extract(@blocks-norotate, @i);
			&[data-type=@{name}]::before { background-image: url("image/@{name}.png"); }
			.-((@i - 1));
		} .-;
	}

	.panel {
		overflow: auto;
		padding: 8px;
		margin: 30px 0;
		background: #ffa32e;
		border-radius: 5px;
		border: 2px outset #ff920e;

		min-width: 50px;

		.block {
			background-color: white;
			border: none;
			position: relative;
			margin-bottom: 25px;

			&[selected]::after {
				content: '';

				position: absolute;
				top: -3px;
				left: -3px;
				right: -3px;
				bottom: -3px;

				border: 3px solid red;
				pointer-events: none;
			}

			.count {
				position: absolute;
				top: 100%;
				right: 0;

				font-family: 'Exo 2', sans-serif;
				color: darkred;

				&::before {
					content: 'x';
				}
			}
		}
	}

	.controls {
		@button-height: 100px;
		width: 100%;
		height: @button-height;

		.vertical-center;

		&::before {
			@height: 70px;
			content: '';
			position: absolute;

			width: 100%;
			height: @height;

			top: (@button-height - @height) / 2;
			left: 0;

			background: white;
			border-radius: 12px;
			z-index: -1;
		}

		display: flex;
		justify-content: space-around;
		align-items: center;

		& > button {
			width: 50px;
			height: 50px;

			flex: 0 0 auto;

			&.execute, &.stop {
				width: 100px;
				height: 100px;
			}
		}

		@buttons: exit, ranking, execute, stop, rapid, step;
		.-(@i: length(@buttons)) when (@i > 0) {
			@button: extract(@buttons, @i);
			& > button.@{button} {
				background: url('image/control-button-@{button}.png');
			}
			.-((@i - 1));
		} .-;
	}

	.statement-area {
		margin: 35px 0 0 20%;

		.mission {
			padding-left: 22px;
			font-family: 'Exo 2', sans-serif;
			color: #2b1c79;
		}

		.statement {
			background: white;
			border: 2px solid #5651ab;
			border-right: none;
			padding: 6px 20px;
			font-size: 24px;
			border-top-left-radius: 14px;
			border-bottom-left-radius: 14px;
			color: #333;
		}
	}
}
<commit_msg>Change column-count from 2 to 3<commit_after>@import (css) 'https://fonts.googleapis.com/css?family=Exo+2:900';
@import (css) 'https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css';

.fixed-height(@height) {
	flex: 0 0 @height;
	height: @height;
}

.fixed-width(@width) {
	flex: 0 0 @width;
	width: @width;
}

.grow-height(@ratio) {
	flex: @ratio 1 0;
	height: 0;
}

.grow-width(@ratio) {
	flex: @ratio 1 0;
	width: 0;
}

.vertical-center {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

html, body, .container {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

button {
	border: none;
	outline: none;
	padding: 0;
	background: none;
	font-family: inherit;
	cursor: pointer;
}

.layer {
	background-size: cover;
	background-position: center;

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	z-index: 0;
}

.background-layer {
	position: fixed;
	background-image: url(image/background.svg);

	.cloud {
		position: absolute;
		left: 100%;

		@keyframes slide {
			from {
				transform: translateX(0);
			}
			to {
				transform: translateX(calc(-100vw - 100%));
			}
		}

		animation: linear 1s infinite slide;

		&:nth-child(1) {
			top: 7%;
			animation-duration: 120s;
			animation-delay: -50s;
			&::before { content: url(image/cloud-01.png); }
		}

		&:nth-child(2) {
			top: 15%;
			animation-duration: 100s;
			animation-delay: -80s;
			&::before { content: url(image/cloud-02.png); }
		}

		&:nth-child(3) {
			top: 23%;
			animation-duration: 80s;
			animation-delay: 0s;
			&::before { content: url(image/cloud-03.png); }
		}

		&:nth-child(4) {
			top: 29%;
			animation-duration: 150s;
			animation-delay: -120s;
			&::before { content: url(image/cloud-04.png); }
		}

		&:nth-child(5) {
			top: 37%;
			animation-duration: 70s;
			animation-delay: -20s;
			&::before { content: url(image/cloud-05.png); }
		}

		&:nth-child(6) {
			top: 45%;
			animation-duration: 150s;
			animation-delay: -60s;
			&::before { content: url(image/cloud-06.png); }
		}

		&:nth-child(7) {
			top: 55%;
			animation-duration: 110s;
			animation-delay: -90s;
			&::before { content: url(image/cloud-07.png); }
		}

		&:nth-child(8) {
			top: 68%;
			animation-duration: 100s;
			animation-delay: 0s;
			&::before { content: url(image/cloud-08.png); }
		}
	}
}

.screens-layer {
	overflow: hidden;

	.screens {
		display: inline-flex;

		transition: transform .8s cubic-bezier(0, 0.75, 0.3, 1);

		&.gaming {
			transform: translateX(-100vw);
		}

		.screen {
			.fixed-width(100vw);
			height: 100vh;
			position: relative;

			.menu {
				width: 800px;

				position: absolute;
				top: 40%;
				left: 50%;
				transform: translate(-50%, -50%);

				.row {
				    text-align: center;
				}

				.logo {
					margin-bottom: 48px;
				}

				button.big {
					background: rgba(61, 128, 42, 0.2);
					transition: background-color .3s;

					padding: 0 2em;
					margin: 24px 0;
					border: 2px solid #222248;
					border-radius: 36px;

					line-height: 72px;
					font-size: 48px;
					font-weight: bold;
					color: white;

					&:hover {
						background: rgba(61, 128, 42, 0.6);
					}
				}

				button.small {
					font-size: 30px;
					margin: 18px 0;
				}

				.stage-list {
					padding: 0;
					margin: 0 0 1em;

					column-count: 3;

					display: none;
					&.active { display: block; }

					.stage-name {
						margin-left: 1em;

						list-style: none;

						text-align: left;
						line-height: 1.5em;
						font-size: 20px;

						position: relative;
						cursor: pointer;

						&::before {
							content: '';

							width: 0;
							height: 0;
							position: absolute;
							top: calc(~"0.75em - 6px");
							right: calc(~"100% + 0.3em");

							border-top: 6px solid transparent;
							border-left: 12px dotted black;
							border-bottom: 6px solid transparent;

							transition: transform .5s ease-out;
						}

						&:hover::before {
							transform: rotateX(360deg);
						}
					}
				}

				.credit-body {
					margin: 0 auto;
					width: 500px;
					text-align: justify;
					line-height: 1.5em;

					display: none;
					&.active { display: block; }

					a {
						&, &:visited {
							text-decoration: none;
							color: #245cff;
						}
					}
				}
			}
		}
	}
}

.game-screen {
	.stage-layer {
		display: flex;
		flex-direction: column;

		.upper-area {
			flex: 1 0 0;
			height: 0;

			display: flex;

			.panel-area {
				.fixed-width(200px);

				display: flex;
			}

			.pipe-area {
				flex: 1 0 0;
				width: 0;

				display: flex;
				flex-direction: column;

				.upper-pipe-area {
					.fixed-height(131px);

					margin-left: 100px;
					margin-right: 100px;

					display: flex;

					.left-corner-pipe {
						.fixed-width(93px);
						background-image: url(image/pipe-upper-left-corner.png);
					}

					.left-pipe, .right-pipe {
						background-image: url(image/pipe-upper.png);
						background-size: 100% 100%;
					}

					.left-pipe {
						.grow-width(1);
					}

					.right-pipe {
						.grow-width(2);
					}

					.center-pipe {
						.fixed-width(81px);
						background-image: url(image/pipe-upper-center.png);
					}

					.right-corner-pipe {
						.fixed-width(93px);
						background-image: url(image/pipe-upper-right-corner.png);
					}
				}

				.downer-pipe-area {
					.fixed-height(119px);

					margin-left: 100px;
					margin-right: 100px;

					display: flex;

					.left-corner-pipe {
						.fixed-width(93px);
						background-image: url(image/pipe-downer-left-corner.png);
					}

					.left-pipe, .right-pipe {
						background-image: url(image/pipe-downer.png);
						background-size: 100% 100%;
					}

					.left-pipe {
						.grow-width(3);
					}

					.right-pipe {
						.grow-width(2);
					}

					.center-pipe {
						.fixed-width(131px);
						background-image: url(image/pipe-downer-center.png);
					}

					.right-corner-pipe {
						.fixed-width(93px);
						background-image: url(image/pipe-downer-right-corner.png);
					}
				}

				.case-board-area {
					flex: 1 0 0;
					height: 0;

					display: flex;

					.case-pipe-area {
						.grow-width(1);

						display: flex;
						flex-direction: column;

						.case-joint-top-pipe, .case-joint-bottom-pipe,
						.case-top-pipe, .case-bottom-pipe {
							width: 40px;
							margin: 0 auto;
						}

						.case-joint-top-pipe, .case-joint-bottom-pipe {
							.fixed-height(10px);
						}

						.case-joint-top-pipe {
							background-image: url(image/pipe-joint-top.png);
						}

						.case-joint-bottom-pipe {
							background-image: url(image/pipe-joint-bottom.png);
						}

						.case-top-pipe, .case-bottom-pipe {
							.grow-height(1);
							background-image: url(image/pipe-vertical.png);
							background-size: 100% 100%;
						}

						.case-area {
							width: 471px;
							height: 343px;

							position: relative;
							margin: 0 auto;

							padding: 45px;
							box-sizing: border-box;

							&::before {
								content: url(image/case-panel.png);
								position: absolute;
								left: -12px;
								top: -3px;
								z-index: -1;
							}

							.case {
								.vertical-center;
								position: relative;
							}
						}
					}

					.board-area {
						.grow-width(1);

						.board-frame-wrapper {
							height: 100%;
							margin: 0 auto;

							display: flex;
							flex-direction: column;
						}

						.board-joint-top-pipe, .board-joint-bottom-pipe,
						.board-top-pipe, .board-bottom-pipe {
							width: 40px;
							margin: 0 auto;
						}

						.board-joint-top-pipe, .board-joint-bottom-pipe {
							.fixed-height(10px);
						}

						.board-joint-top-pipe {
							background-image: url(image/pipe-joint-top.png);
						}

						.board-joint-bottom-pipe {
							background-image: url(image/pipe-joint-bottom.png);
						}

						.board-top-pipe, .board-bottom-pipe {
							.grow-height(1);
							background-image: url(image/pipe-vertical.png);
							background-size: 100% 100%;
						}

						.board-top-pipe, .board-bottom-pipe {
							.grow-height(1);
						}

						.board-frame {
							width: 100%;

							.fixed-height(0);

							display: flex;
							flex-direction: column;

							position: relative;

							.top, .bottom {
								.fixed-height(25px);
							}

							.middle {
								.grow-height(1);
							}

							.top, .bottom, .middle {
								display: flex;

								.left, .right {
									.fixed-width(25px);
								}

								.center {
									.grow-width(1);
								}
							}

							.top .left {
								background-image: url(image/frame-topleft.png);
							}

							.top .center {
								background-image: url(image/frame-top.png);
								background-size: 100% 100%;
							}

							.top .right {
								background-image: url(image/frame-topright.png);
							}

							.middle .left {
								background-image: url(image/frame-left.png);
								background-size: 100% 100%;
							}

							.middle .right {
								background-image: url(image/frame-right.png);
								background-size: 100% 100%;
							}

							.bottom .left {
								background-image: url(image/frame-bottomleft.png);
							}

							.bottom .center {
								background-image: url(image/frame-bottom.png);
								background-size: 100% 100%;
							}

							.bottom .right {
								background-image: url(image/frame-bottomright.png);
							}

							.clock-area {
								position: absolute;
								top: 100%;
								right: 0;

								padding: 3px 4px 4px;

								border: 2px outset #ff920e;
								border-top: none;
								border-bottom-right-radius: 6px;
								border-bottom-left-radius: 6px;

								background: #fbae36;
								color: #fffdf7;
								font-size: 16px;
								font-weight: bold;
								font-family: Arial;
								line-height: 1;

								.clock-icon {
									display: inline-block;
									width: 16px;
									height: 16px;
									background-image: url(image/clock-icon.png);
									vertical-align: text-top;
									margin-right: .2em;
								}

								.clock-value {
									vertical-align: bottom;
								}
							}
						}

						.board-wrap {
							background-color: #e4b67c;

							.block {
								position: relative;
							}

							.block::after {
								content: '';

								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;

								border: 1px dotted rgba(0, 0, 0, .3);
								pointer-events: none;
							}
						}
					}
				}
			}
		}

		.downer-area {
			.fixed-height(150px);

			display: flex;

			.left-area, .right-area {
				.grow-width(1);
			}

			.controls-area {
				.fixed-width(420px);
				position: relative;
			}
		}
	}

	.modal-layer {
		pointer-events: none;

		.modal {
			pointer-events: initial;
			width: 80%;
			background: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/restaurant_icons.png");
			color: #333;
			box-sizing: border-box;
			border-radius: 30px;
			position: absolute;
			max-height: 80vh;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.close {
				width: 102px;
				height: 102px;

				background-image: url(image/close.png);

				position: absolute;
				top: -30px;
				right: -30px;
			}

			.modal-content {
				padding: 50px;
				overflow-y: auto;
				width: 100%;
				max-height: 80vh;
				box-sizing: border-box;
				text-align: center;
				font-size: 24px;
			}
		}
	}

	.inputs, .arrows, .user-outputs, .correct-outputs {
		display: flex;

		.input, .output {
			.grow-width(1);

			@height: 40px;
			height: @height;
			line-height: @height - 4px;
			border: 1px solid;

			text-align: center;
			font-size: 32px;
			font-family: 'Exo 2', sans-serif;

			position: relative;

			&.wrong::after {
				content: '';

				position: absolute;
				top: calc(100% + 5px);
				left: 0;

				width: 100%;
				height: 30px;

				background-image: url(image/panel-answer-wrong.png);
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}

			&.correct::after {
				content: '';

				position: absolute;
				top: calc(100% + 5px);
				left: 0;

				width: 100%;
				height: 30px;

				background-image: url(image/panel-answer-correct.png);
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}
		}

		.arrow {
			.grow-width(1);
			height: 75px;

			background-image: url(image/arrow-down.png);
			background-position: center;
			background-repeat: no-repeat;

			position: relative;
			overflow: hidden;

			&::after {
				content: '';
				position: absolute;

				left: 0;
				right: 0;
				height: 180px;

				background-image: linear-gradient(
					to bottom,
					rgba(255, 255, 255, 0) 0%,
					rgba(255, 255, 255, .5) 12.5%,
					rgba(255, 255, 255, 0) 25%,
					rgba(255, 255, 255, .5) 37.5%,
					rgba(255, 255, 255, 0) 50%,
					rgba(255, 255, 255, .5) 62.5%,
					rgba(255, 255, 255, 0) 75%,
					rgba(255, 255, 255, .5) 87.5%,
					rgba(255, 255, 255, 0) 100%
				);

				@keyframes verticalSlide {
					from { transform: translateY(-50%); }
					to   { transform: translateY(0); }
				}

				animation: 3s linear 0s infinite verticalSlide;
			}
		}
	}

	.inputs, .outputs {
		border: 1px solid black;
	}

	.board {
		display: inline-flex;
		position: relative;

		.rows {
			display: inline-flex;
			flex-direction: column;
			position: relative;

			.row {
				display: inline-flex;
				margin: 0;
			}
		}

		.data-layer {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			pointer-events: none;

			.data {
				position: absolute;
				padding: 3px;
				line-height: 1em;
				font-weight: bold;
				border-radius: 5px;
				background: darkorange;
				transform: translate(-50%, -50%);
				color: white;
			}
		}
	}

	.block {
		width: 50px;
		height: 50px;
		cursor: pointer;
		box-sizing: border-box;
		background-size: contain;

		&::before, &::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			pointer-events: none;
			box-sizing: border-box;
			background-size: contain;
		}
		&[data-rotate='90']::before {
			transform: rotate(90deg);
		}
		&[data-rotate='180']::before {
			transform: rotate(180deg);
		}
		&[data-rotate='270']::before {
			transform: rotate(270deg);
		}
		@blocks-rotatable: wireI, wireL, wireT, diode;
		@blocks-rotate-back-wireI: times-2, add-3, times-3, plus-1, plus-2, minus-1, minus-2, div-2, div-3, const-0, const-1, const-2;
		@blocks-norotate: add, sub, mul, div,  c-contact, conditional, transistor, wireX, pow, mod, bitshift-left, bitshift-right, bitwise-and, bitwise-or, bitwise-xor, iko-ru, neq, gt, geqq, lt, leqq;

		.-r(@i: length(@blocks-rotatable)) when (@i > 0) {
			@name: extract(@blocks-rotatable, @i);
			&[data-type=@{name}]::before {
				background-image: url("image/@{name}.png");
			}
			.-r((@i - 1));
		} .-r;
		.-rI(@i: length(@blocks-rotate-back-wireI)) when (@i > 0) {
			@name: extract(@blocks-rotate-back-wireI, @i);
			&[data-type=@{name}] {
				&::before {
					background-image: url("image/wireI.png");
				}
				&::after {
					background-image: url("image/@{name}.png");
				}
			}
			.-rI((@i - 1));
		} .-rI;
		.-(@i: length(@blocks-norotate)) when (@i > 0) {
			@name: extract(@blocks-norotate, @i);
			&[data-type=@{name}]::before { background-image: url("image/@{name}.png"); }
			.-((@i - 1));
		} .-;
	}

	.panel {
		overflow: auto;
		padding: 8px;
		margin: 30px 0;
		background: #ffa32e;
		border-radius: 5px;
		border: 2px outset #ff920e;

		min-width: 50px;

		.block {
			background-color: white;
			border: none;
			position: relative;
			margin-bottom: 25px;

			&[selected]::after {
				content: '';

				position: absolute;
				top: -3px;
				left: -3px;
				right: -3px;
				bottom: -3px;

				border: 3px solid red;
				pointer-events: none;
			}

			.count {
				position: absolute;
				top: 100%;
				right: 0;

				font-family: 'Exo 2', sans-serif;
				color: darkred;

				&::before {
					content: 'x';
				}
			}
		}
	}

	.controls {
		@button-height: 100px;
		width: 100%;
		height: @button-height;

		.vertical-center;

		&::before {
			@height: 70px;
			content: '';
			position: absolute;

			width: 100%;
			height: @height;

			top: (@button-height - @height) / 2;
			left: 0;

			background: white;
			border-radius: 12px;
			z-index: -1;
		}

		display: flex;
		justify-content: space-around;
		align-items: center;

		& > button {
			width: 50px;
			height: 50px;

			flex: 0 0 auto;

			&.execute, &.stop {
				width: 100px;
				height: 100px;
			}
		}

		@buttons: exit, ranking, execute, stop, rapid, step;
		.-(@i: length(@buttons)) when (@i > 0) {
			@button: extract(@buttons, @i);
			& > button.@{button} {
				background: url('image/control-button-@{button}.png');
			}
			.-((@i - 1));
		} .-;
	}

	.statement-area {
		margin: 35px 0 0 20%;

		.mission {
			padding-left: 22px;
			font-family: 'Exo 2', sans-serif;
			color: #2b1c79;
		}

		.statement {
			background: white;
			border: 2px solid #5651ab;
			border-right: none;
			padding: 6px 20px;
			font-size: 24px;
			border-top-left-radius: 14px;
			border-bottom-left-radius: 14px;
			color: #333;
		}
	}
}

{'fraction_non_alphanumeric': 0.16029977837396478, 'fraction_numerical': 0.04368365799603406, 'mean_word_length': 2.0142392546365473, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 15, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '441412', 'n_tokens_mistral': 18770, 'n_tokens_neox': 12501, 'n_words': 2539}