:root {
	--r: 4px;
	--f1: 1.4rem;
	--f2: 1.8rem;
	--s1: 6px;
	--s2: 6px;
	--s3: 12px;
	--s4: 16px;
	--s5: 24px;
	--sc: 4rem;
	--ss: 30vw;
}

html {
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Oxygen-Sans,
		Ubuntu,
		Cantarell,
		'Open Sans',
		'Helvetica Neue',
		sans-serif;
	font-size: 62.5%;
	color: #18141fc9;
}

body {
	font-size: 1.4rem;
	margin: 0;
	background-color: #fff;
}

.viewer, .ui {
	width: 100vw;
	height: 100vh;
}

.viewer {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y pinch-zoom;
}

.viewer:active {
	cursor: grabbing;
}

.frames {
	position: relative;
	max-height: 100%;
	overflow: hidden;
}

.frame {
	width: 100%;
	height: 100%;
	transition: filter .2s;
}

.frame[src=''] {
	visibility: hidden;
}

.frame.loading {
	filter: blur(8px);
}

.overlay {
	position: absolute;
	max-height: 100%;
}

.lot {
	fill: #9a4797;
	stroke: transparent;
	stroke-width: 5px;
	opacity: .3;
	transition: opacity .2s;
	cursor: pointer;
}

.lot:hover {
	opacity: .6;
}

.lot.active {
	opacity: .8;
}

.lot.t1 > .floor {
	fill: #800b94;
}

.lot.t2 > .floor {
	fill: #2345a5;
}

.lot.t3 > .floor {
	fill: #2b723d;
}

.lot.t4 > .floor {
	fill: #fae101;
}

.lot.t5 > .floor {
	fill: #f38f28;
}

.lot.t6 > .floor {
	fill: #d82d2d;
}

.floor.out {
	opacity: .4;
}

.ui {
	position: absolute;
	display: flex;
	flex-direction: row-reverse;
	overflow: hidden;
}

.ui.selection ~ .viewer .lot:not(.active, :hover) {
	opacity: .1;
}

.ui.selection ~ .viewer .lot:not(.active, :hover) .wall {
	display: none;
}

.controls {
	position: relative;
	flex: 1;
	margin: var(--s3);
}

.control-sidebar, .sidebar {
	display: none;
}

.control, .compass {
	position: relative;
	font: unset;
	color: #2f2c35b3;
	user-select: none;
	z-index: 1;
}

.control {
	background-color: #fff;
	box-shadow: #18141f0f 0 0 2px, #18141f1a 0 2px 8px;
	border: 3px solid transparent;
	outline: none;
	cursor: pointer;
}

.control svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.control:focus-visible, .control:hover {
	border-color: #18141f0d;
	color: #2f2c35;
}

.control.active {
	background-color: #9a4797;
	color: #fff;
}

.control-camera {
	padding: var(--s2) var(--s3);
	border-radius: 100px;
	font-size: var(--f1);
}

.control-camera option {
	font: unset;
}

.control-sidebar, .control-overlay, .control-close, .control-previous, .control-next {
	position: absolute;
	width: 2rem;
	height: 2rem;
	padding: var(--s2);
	box-sizing: content-box;
	border-radius: 50%;
}

.compass {
	position: absolute;
	bottom: 0;
	left: 0;
	width: var(--sc);
	height: var(--sc);
	opacity: .8;
	fill: currentColor;
}

.control-overlay {
	bottom: 0;
	right: 0;
	transition:
		color .1s,
		border-color .1s,
		background-color .1s,
		transform .2s;
}