html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
	color: #fff;
	font-family: "Noto Sans", "Noto Sans Arabic", Arial, Helvetica, sans-serif;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: none;
	cursor: none;
}

[hidden] {
	display: none !important;
}

#door {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform-origin: 50% 50%;
}

#door svg {
	display: block;
	width: 100%;
	height: 100%;
}

#pair, #cover {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 6vmin 8vmin;
	background: #4A4F57;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#pairTitle {
	font-size: 6vmin;
	font-weight: bold;
}

#pairCode {
	margin: 5vmin 0 4vmin;
	font-size: min(15vmin, 11.5vw);
	font-weight: bold;
	white-space: nowrap;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	direction: ltr;
}

#pairSteps {
	max-width: 80vmin;
	font-size: 3.6vmin;
	line-height: 1.35;
}

#pairExpires {
	margin-top: 5vmin;
	padding: 1.2vmin 3vmin;
	background: #F2B84B;
	color: #1A1400;
	font-size: 3.4vmin;
	font-weight: bold;
}

#pairRetry {
	min-height: 4vmin;
	margin-top: 3vmin;
	font-size: 3.2vmin;
}

#pairAddress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4vmin;
	font-size: 2.6vmin;
	opacity: 0.8;
	direction: ltr;
}

#cover {
	z-index: 20;
}

#cover .head {
	font-size: 9vmin;
	font-weight: bold;
}

#cover .line {
	max-width: 85%;
	margin-top: 3vmin;
	font-size: 3.6vmin;
	line-height: 1.35;
}

#dim {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 30;
	background: #000;
	opacity: 0;
	pointer-events: none;
}

#dim.on {
	opacity: 0.6;
}