@font-face {
	font-display: swap;
	font-family: font;
	font-weight: 400 600;
	src: url("./font.woff2");
}

/* General */
html,
body {
	height: 100dvh;
	overflow: clip;
	position: fixed;
	width: 100dvw;
}
body,
ul,
ol,
p {
	margin: 0;
	padding: 0;
}
body,
.circle,
.marker::after,
.screen::after {
	background: #000;
}
body,
.task div,
.screen {
	display: grid;
}
body {
	color: #fff;
	cursor: default;
	font: 400 16px/1.2 font, sans-serif;
	grid: 32% 40% 28% / 20% 60% 20%;
	letter-spacing: 0.06em;
	place-items: start center;
	text-align: center;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.task,
.circle {
	color: var(--colTsk);
}
.mask,
.circle,
.screen {
	box-sizing: border-box;
}
.result,
p {
	background: #2d3f2b;
	border: 1px solid #fff5;
	color: #a9aaae;
}
ul,
ol {
	list-style: none;
	white-space: nowrap;
}
.arrow::after,
.marker::before,
.marker::after,
.source span::after,
.screen::after {
	content: "";
}
.marker::after,
ol li::before {
	position: absolute;
}
.none {
	display: none;
}

/* Placement */
.help,
.x {
	grid-area: 1 / 1;
	margin: 16px 0 0 16px;
	place-self: start;
}
.speaker {
	grid-area: 1 / 2;
	margin: 16px 0 0;
}
.alt,
.esc {
	grid-area: 1 / 3;
	margin: 16px 16px 0 0;
	place-self: start end;
}
.result,
.menu {
	grid-area: 2 / 2;
}
.circle,
.source {
	grid-area: 3 / 2;
	margin: 0 0 16px;
	place-self: end center;
}
.screen {
	grid-area: 3 / 3;
	margin: 0 16px 16px 0;
	place-self: end;
}

/* Task */
.task {
	--sq: 52px;
	font-size: var(--sq);
	font-weight: 480;
	grid: repeat(6, 1fr) / repeat(8, 1fr);
	height: 98dvh;
	line-height: 0.95;
	padding-top: 2dvh;
	place-items: center;
}
.task div,
.arrow::after {
	height: var(--sq);
	width: var(--sq);
}
.task div {
	place-content: center;
}
.arrow::after {
	background: var(--colTsk);
	clip-path: polygon(
		41% 100%,
		43% 35%,
		23% 40%,
		50% 0,
		77% 40%,
		57% 35%,
		59% 100%
	);
	rotate: var(--stm);
	scale: 0.92;
}
.char::after {
	content: var(--stm);
	margin-bottom: -0.05em;
}
.wrong {
	color: #f00;
}
.wrong.arrow::after {
	background: #f00;
}
.result {
	border: 0.1em solid;
	border-radius: 0.8em;
	box-shadow: 0 0 6em #666, 0 0 2em #ccc;
	font-size: 0.84em;
	height: 11em;
	letter-spacing: 0.07em;
	margin-top: -3.2em;
	min-width: 18.152em;
}
.result li {
	font-size: 1.7em;
	font-weight: 600;
	margin: 0.6em 1.2em;
	text-shadow: 0.12em 0.09em 0 #000;
	white-space: pre;
}
.result li:first-child {
	font-size: 2em;
	margin: 0.59em 1em 0;
}

/* Controls */
.circle,
.marker::before,
.source span::after {
	position: relative;
}
.circle,
.marker::after {
	border-radius: 50%;
}
.circle {
	border: 0.92em solid;
	font-size: 0.768em;
	height: 7.65em;
	width: 7.65em;
}
.marker {
	animation: 1s ease-out 0.1s forwards;
	animation-name: clockwise;
}
.reverse {
	animation-name: counterclockwise;
}
@keyframes clockwise {
	100% {
		rotate: 45deg;
	}
}
@keyframes counterclockwise {
	100% {
		rotate: -45deg;
	}
}
.marker::before,
.menu li,
.source span::after {
	display: inline-block;
}
.marker::before {
	background: #555;
	clip-path: polygon(50% 0, 72% 36%, 28% 36%);
	height: 90%;
	top: 5%;
	width: 90%;
}
.marker::after {
	height: 50%;
	left: 25%;
	top: 28.4%;
	width: 50%;
}
.menu {
	color: #000;
	font-optical-sizing: none;
	font-size: 1.55em;
	font-weight: 500;
	margin-top: 4vh;
}
.menu li,
p {
	border-radius: 0.2em;
}
.menu li {
	background: linear-gradient(#000, #999 10%, #999 90%, #000),
		linear-gradient(90deg, #000, #ccc 5%, #ccc 95%, #000);
	background-blend-mode: exclusion;
	height: 2.1em;
	line-height: 2.1;
	margin: 0 1.4em;
	width: 6.5em;
}
p,
ol {
	line-height: 1.7;
}
p {
	font-size: 1.5em;
	font-weight: 450;
	height: 1.7em;
	width: 4.8em;
	text-shadow: 0.08em 0.08em 0 #000;
}
.help,
.alt {
	width: 1.75em;
}
.help:has(ol) {
	height: auto;
	width: auto;
}
.help,
.source::before {
	z-index: 10;
}
ol,
.source {
	color: #ddd;
}
ol {
	counter-reset: ol;
	font-size: 0.66em;
	font-weight: 400;
	margin: 0.55em 1.7em 0.9em 2.6em;
	text-align: left;
}
ol li::before {
	content: counter(ol) ".";
	counter-increment: ol;
	margin-left: -1.7em;
	text-align: right;
	width: 1em;
}
.speaker {
	font-size: 1.3em;
}
.source {
	font-size: 1.4em;
}
.source span {
	filter: drop-shadow(0.09em 0.09em #000);
}
.source::before {
	background: #222;
	bottom: 0;
	content: attr(data-href);
	font-size: 16px;
	left: 0;
	opacity: 0;
	padding: 2px 8px;
	pointer-events: none;
	position: fixed;
	transition: opacity 0.5s;
	visibility: hidden;
}
.screen {
	--scrn: 26px;
	border: calc(var(--scrn) / 8) solid #a9aaae;
	height: var(--scrn);
	place-content: center;
	width: var(--scrn);
	z-index: -1;
}
.screen::after {
	clip-path: polygon(
		0 31%,
		31% 31%,
		31% 0,
		69% 0,
		69% 31%,
		100% 31%,
		100% 69%,
		69% 69%,
		69% 100%,
		31% 100%,
		31% 69%,
		0 69%
	);
	height: calc(var(--scrn) + 2px);
	width: calc(var(--scrn) + 2px);
}
:is(.circle, .screen).active {
	border-color: #444;
}
.marker.active::before {
	background: #222;
}
p.active:not(.source),
p.active ol {
	color: #444;
}
.menu li.active {
	opacity: 0.4;
}
.source.active span::after {
	filter: brightness(40%);
}

/* Media */
@media (any-hover: hover) {
	.source:hover::before {
		opacity: 1;
		visibility: visible;
	}
}
@media (orientation: portrait) {
	.task {
		grid: repeat(9, 1fr) / repeat(5, 1fr);
	}
	.menu {
		margin-top: -0.7em;
	}
	.menu li {
		display: block;
		margin-bottom: 1.85em;
	}
}
@media (orientation: portrait) and (min-width: 480px) {
	.task {
		--sq: 11vw;
	}
}
@media (orientation: landscape) and (min-height: 450px) {
	.task {
		--sq: 11.8525vh;
	}
}
@media (orientation: portrait) and (min-width: 700px) {
	.result {
		font-size: 1.85vw;
	}
	.circle {
		font-size: 1.8vw;
	}
	.menu {
		font-size: 3.8vw;
	}
	p {
		font-size: 3.1vw;
	}
	ol {
		font-size: 1.9vw;
	}
	.speaker {
		font-size: 2.6vw;
	}
	.source {
		font-size: 3vw;
	}
	.source::before {
		font-size: 2vw;
	}
	.screen {
		--scrn: 3.4vw;
	}
}
@media (orientation: landscape) and (min-height: 700px) {
	.result {
		font-size: 1.85vh;
	}
	.circle {
		font-size: 1.8vh;
	}
	.menu {
		font-size: 3.8vh;
	}
	p {
		font-size: 3.1vh;
	}
	ol {
		font-size: 1.9vh;
	}
	.speaker {
		font-size: 2.6vh;
	}
	.source {
		font-size: 3vh;
	}
	.source::before {
		font-size: 2vh;
	}
	.screen {
		--scrn: 3.4vh;
	}
}

/* Images */
.mask-1 .mask {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath shape-rendering='crispEdges' d='M0 0h64v64H0zm64 64h64v64H64zm64-64h64v64h-64zm64 64h64v64h-64zm64-64h64v64h-64zm64 64h64v64h-64zm64-64h64v64h-64zm64 64h64v64h-64zM0 128h64v64H0zm128 0h64v64h-64zm128 0h64v64h-64zm128 0h64v64h-64zm64 64h64v64h-64zm-128 0h64v64h-64zm-128 0h64v64h-64zm-128 0h64v64H64zM0 256h64v64H0zm128 0h64v64h-64zm128 0h64v64h-64zm128 0h64v64h-64zM64 320h64v64H64zm128 0h64v64h-64zm128 0h64v64h-64zm128 0h64v64h-64zM0 384h64v64H0zm128 0h64v64h-64zm128 0h64v64h-64zm128 0h64v64h-64zm-64 64h64v64h-64zm128 0h64v64h-64zm-256 0h64v64h-64zm-128 0h64v64H64z'/%3E%3C/svg%3E") center/cover, var(--colMsk);
}
.mask-2 .mask {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 0v512h512V0H0zm105.7 16 30.6 12.7 6.6 7.2-9.7 3c-4.7 12.8-9 25.7-14.3 38.2h65.4c5-5 9.6-9.3 15.1-13.7l30.1 24.4-24 12.3a563.3 563.3 0 0 1-52 59h51l16.3-13.7L251 170l-13.9 11v265.5c0 36-9.8 39.6-43.8 43.8V474l-54.5-8.2v-8.1h54.5c13.1.2 11-2.5 11.2-7.7v-86h-39.7v57.7h-33.1V364h-44c-4.8 54.3-28.3 86.8-64.6 130.5l-4-1.7c26.3-49.3 36.7-91.4 39-160.9 1.8-51 .2-93.6-.3-144.5l-17.9 24.8-16.8 19.3-4-3c47.4-87 68.3-140.7 80.5-188 2-8.2 3-10.4 6-24.5zm346 25.5 30 24.4c-4.9 3-9.8 6-14.7 8.7-.8 19.8-2.4 62-14.4 81.2a80.4 80.4 0 0 1-61 33.4V173l-38.3-8.1V156h38.2c27.8-.8 30.7-14.3 36.7-33 4.6-18.8 5.3-38 6.7-57.2h-70.4c-13.1 44.5-44.5 93.3-113 130.5l-3.1-4.1c32.5-34 75.2-75.2 83-126.4h-77V55.2H435l16.8-13.7zM114.3 87.9a579.5 579.5 0 0 1-33.6 65.7l11.2 5.6h53.5c7.8-15.5-.5.1 33.1-71.3h-64.2zm-22.4 82v85h39.8v-85H91.9zm72.9 0v85h39.7v-85h-39.7zm184.5 19.4 33 5.6 8.2 5-8.1 5.1v69.3H419l27-27.5 33 27.5V285h-96.7v79.5h50.4l27.5-27.5 32.6 27.5v10.7H382.4v104.5L349.3 496V375.2h-99.4v-10.7h99.4V285H291a754.1 754.1 0 0 1-34 63.7l-4.7-1.5a3598 3598 0 0 0 39.8-156l30.5 12.8 6.7 7.2-9.7 3c-9.4 25.4-12.6 32.3-24.1 60.1h53.7v-85zM91.9 265.6c-.4 39.8-1 59-3 87.6h42.8v-87.6H91.9zm72.9 0v87.6h39.7v-87.6h-39.7z'/%3E%3C/svg%3E") center/cover, var(--colMsk);
	border: 2px solid var(--colMsk);
}
.source span::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 374.234 374.234'%3E%3Ccircle fill='%23a9aaae' cx='187.117' cy='187.117' r='58.8'/%3E%3Cg stroke='%23a9aaae' stroke-linecap='round' stroke-width='26'%3E%3Cpath d='m305.147 69.087-45.246 45.246M354.037 187.117H290.05M305.147 305.147l-45.246-45.246M187.117 354.037V290.05M69.087 305.147l45.246-45.246M20.197 187.117h63.988M69.087 69.087l45.246 45.246M187.117 20.197v63.988'/%3E%3C/g%3E%3C/svg%3E");
	height: 1.1em;
	top: 0.18em;
	width: 1.1em;
}