.VisualizerEngine {
	outline: 0px none currentcolor;
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
}

.VisualizerEngine canvas {
	max-width: 100%;
	height: 100%;
	display: block;
	max-height: 100%;
	touch-action: none;
}

.VisualizerEngineBlur {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	/* z-index: 10; */
}

.loader-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 0 auto;
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	z-index: 10;
}

.hidden {
	display: none !important;
}
:root{--primary-color: 135, 126, 255}.initial-loader{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.loader-image{position:absolute;width:100%;height:100%;margin:0}.loader-image>img{object-fit:scale-down;width:100%;height:100%}.finish.loader-image{visibility:hidden;opacity:0;transition:visibility 0s .75s,opacity .75s linear}@keyframes rotate{0%{transform:rotateX(-37.5deg) rotateY(45deg)}50%{transform:rotateX(-37.5deg) rotateY(405deg)}100%{transform:rotateX(-37.5deg) rotateY(405deg)}}@keyframes rotateEven{0%{transform:rotateX(-37.5deg) rotateY(45deg)}100%{transform:rotateX(-37.5deg) rotateY(405deg)}}.cube,.cube *{position:absolute;width:33px;height:33px}.sides{animation:rotate 3s ease infinite;animation-delay:.5s;transform-style:preserve-3d;transform:rotateX(-37.5deg) rotateY(45deg)}.finish .sides{animation:rotateEven 10s linear infinite;animation-delay:0}.cube .sides *{box-sizing:border-box;background-color:rgba(var(--primary-color), 0.5);border:1.6px solid #fff;border-radius:3.2px}.cube .sides .top{animation:top-animation 3s ease infinite;animation-delay:0ms;animation-play-state:running;transform:rotateX(90deg) translateZ(32px);animation-fill-mode:forwards;transform-origin:50% 50%}@keyframes top-animation{0%{opacity:1;transform:rotateX(90deg) translateZ(32px)}20%{opacity:1;transform:rotateX(90deg) translateZ(16px)}70%{opacity:.75;transform:rotateX(90deg) translateZ(16px)}90%{opacity:1;transform:rotateX(90deg) translateZ(32px)}100%{opacity:1;transform:rotateX(90deg) translateZ(32px)}}.cube .sides .bottom{animation:bottom-animation 3s ease infinite;animation-delay:0ms;animation-play-state:running;transform:rotateX(-90deg) translateZ(32px);animation-fill-mode:forwards;transform-origin:50% 50%}@keyframes bottom-animation{0%{opacity:1;transform:rotateX(-90deg) translateZ(32px)}20%{opacity:1;transform:rotateX(-90deg) translateZ(16px)}70%{opacity:.75;transform:rotateX(-90deg) translateZ(16px)}90%{opacity:1;transform:rotateX(-90deg) translateZ(32px)}100%{opacity:1;transform:rotateX(-90deg) translateZ(32px)}}.cube .sides .front{animation:front-animation 3s ease infinite;animation-delay:50ms;animation-play-state:running;transform:rotateY(0deg) translateZ(32px);animation-fill-mode:forwards;transform-origin:50% 50%}@keyframes front-animation{0%{opacity:1;transform:rotateY(0deg) translateZ(32px)}20%{opacity:1;transform:rotateY(0deg) translateZ(16px)}70%{opacity:.75;transform:rotateY(0deg) translateZ(16px)}90%{opacity:1;transform:rotateY(0deg) translateZ(32px)}100%{opacity:1;transform:rotateY(0deg) translateZ(32px)}}.cube .sides .back{animation:back-animation 3s ease infinite;animation-delay:50ms;animation-play-state:running;transform:rotateY(-180deg) translateZ(32px);animation-fill-mode:forwards;transform-origin:50% 50%}@keyframes back-animation{0%{opacity:1;transform:rotateY(-180deg) translateZ(32px)}20%{opacity:1;transform:rotateY(-180deg) translateZ(16px)}70%{opacity:.75;transform:rotateY(-180deg) translateZ(16px)}90%{opacity:1;transform:rotateY(-180deg) translateZ(32px)}100%{opacity:1;transform:rotateY(-180deg) translateZ(32px)}}.cube .sides .left{animation:left-animation 3s ease infinite;animation-delay:50ms;animation-play-state:running;transform:rotateY(-90deg) translateZ(32px);animation-fill-mode:forwards;transform-origin:50% 50%}@keyframes left-animation{0%{opacity:1;transform:rotateY(-90deg) translateZ(32px)}20%{opacity:1;transform:rotateY(-90deg) translateZ(16px)}70%{opacity:.75;transform:rotateY(-90deg) translateZ(16px)}90%{opacity:1;transform:rotateY(-90deg) translateZ(32px)}100%{opacity:1;transform:rotateY(-90deg) translateZ(32px)}}.cube .sides .right{animation:right-animation 3s ease infinite;animation-delay:50ms;animation-play-state:running;transform:rotateY(90deg) translateZ(32px);animation-fill-mode:forwards;transform-origin:50% 50%}@keyframes right-animation{0%{opacity:1;transform:rotateY(90deg) translateZ(32px)}20%{opacity:1;transform:rotateY(90deg) translateZ(16px)}70%{opacity:.75;transform:rotateY(90deg) translateZ(16px)}90%{opacity:1;transform:rotateY(90deg) translateZ(32px)}100%{opacity:1;transform:rotateY(90deg) translateZ(32px)}}.finish .cube .sides{opacity:0}.cube-loader{margin:0;display:flex;justify-content:center;align-items:center;position:relative}.cube-loader .inner{display:flex;justify-content:center;align-items:center;position:relative;width:120px;height:120px}.cube-loader .inner:after{content:"";position:absolute;width:100%;height:100%;border-radius:5px;left:0;top:0;opacity:0;transition:opacity .25s linear}.finish .cube-loader .inner:after{opacity:1}.animated-dots{display:flex;gap:3px;position:absolute;transition:opacity .25s linear}.animated-dots .dot{display:block;height:3px;width:3px;opacity:0;background-color:rgb(var(--primary-color));border-radius:50%;animation:dotAnimation 3s linear infinite;z-index:1;transform-origin:center center}.animated-dots.top{transform-origin:center center;left:calc(50% - 7px);top:8px;transform:rotate(-90deg)}.animated-dots.bottom-left{left:8px;bottom:34px;transform:rotate(150deg)}.animated-dots.bottom-right{right:8px;bottom:34px;transform:rotate(30deg)}.animated-dots .one{animation-delay:2.1s}.animated-dots .two{animation-delay:2.25s}.animated-dots .three{animation-delay:2.4s}.finish .animated-dots{opacity:0}@keyframes dotAnimation{0%{opacity:0}20%{opacity:1}40%{opacity:0}}@keyframes fillAnimation{0%{fill:rgba(0,0,0,0)}45%{fill:rgba(0,0,0,0)}55%{fill:rgba(var(--primary-color), 0.25)}100%{fill:rgba(0,0,0,0)}}@keyframes strokeAnimation{0%{fill:rgba(0,0,0,0)}50%{fill:rgba(0,0,0,0)}65%{fill:rgba(var(--primary-color), 0.1)}100%{fill:rgba(0,0,0,0)}}.cube-loader .hexagon-shape{transition:opacity .25s linear;width:120px;stroke:rgb(var(--primary-color));stroke-width:2px;animation:strokeAnimation 3s linear infinite;animation-delay:.75s}.finish .cube-loader .hexagon-shape{opacity:0}.path1{stroke:#cfd5f1}.path2{stroke-dasharray:325;stroke-dashoffset:0;animation:dash 1.5s infinite linear forwards}.path2.initial-loading{animation:none;transition:stroke-dashoffset .2s}@keyframes dash{to{stroke-dashoffset:54}}.cursorWrapper{opacity:0;position:absolute;display:flex;justify-content:center;align-items:center;left:calc(50% - 40px);top:calc(50% - 8px);background-color:rgba(var(--primary-color), 0.65);width:64px;height:64px;border-radius:50%;transition:opacity .5s linear}.finish .cursorWrapper{opacity:1;animation:cursorMovement 5s ease-in-out infinite}.interactionGrab{fill:#fff;transform:translateY(-1px)}@keyframes cursorMovement{0%{transform:translateX(0)}50%{transform:translateX(56px)}100%{transform:translateX(0px)}}.simple-loader{margin-top:auto;margin-left:auto;margin-bottom:12px;margin-right:12px}.circle-loader{display:block;flex-shrink:0;height:24px;width:24px;margin:0 auto;border:3px rgba(44,44,44,.1) solid;border-top:3px rgba(var(--primary-color), 1) solid;border-radius:50%;animation:spin 1s infinite linear}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}
body {
	position: absolute;
	margin: 0;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	overflow: hidden;
	text-align: center;
	font-family: "Roboto";
}

#canvas {
	position: absolute;
	display: block;
	margin: 0;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

viz-ui-layout {
	transition: opacity .175s linear;
}

@media (pointer: fine) {
	viz-ui-layout {
		opacity: 0;
	}

	body:hover {
		viz-ui-layout {
			opacity: .5;
		}

		viz-ui-layout.js-mouse-interact {
			opacity: 0;
		}

		viz-ui-layout.js-mouse-inside:not(.js-mouse-interact) {
			opacity: 1 !important;
		}

		viz-ui-layout.js-mouse-idle {
			opacity: 0;
		}
	}
}

@media not all and (pointer: fine) {
	viz-ui-layout.js-mouse-interact {
		opacity: 0;
	}
}

body:-webkit-full-screen {
	width: 100%;
	height: 100%;
}

#connectionStatusIcon {
	display: flex;
	position: absolute;
	left: 1rem;
	top: 1rem;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	background-color: rgba(255, 255, 255, .8);
	border-radius: 4px;
	z-index: 11;
}

.blink {
	animation: blink-animation 2s cubic-bezier(0, 0.5, 0.5, 1) 15;
}

@keyframes blink-animation {
	50% {
		opacity: 0;
	}
}

dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.5);
}
.navhelp-dialog {
	border-radius: 4px;
	border-style: none;
	padding: 12px;
	outline: none;
	background-color: white;

	>div:first-child {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		gap: 0.5em;

		.dialog-titlebar {
			display: flex;
			width: 100%;
			justify-content: center;
			font-size: 1.17em;
			font-weight: bolder;

			.dialog-close {
				position: absolute;
				top: 0;
				right: 0;
				padding: 0.5em;
			}
		}
	}
}

.navhelp-backdrop {
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
}

.navhelp-dialog.ar {
	margin-top: calc(4em + 40px);
}

.navhelp-actions-grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: 16px;
	column-gap: 12px;
}

.navhelp-action {
	>div {
		color: #202223;
		font-size: 13px;
		font-style: normal;
		font-weight: 400;
		line-height: 13px;
		text-align: center;
	}
}
.ar-sidebar {
	position: absolute;
	top: 40px;
	bottom: 0;
	right: 1rem;
	display: flex;
	flex-direction: column;
	gap: 8px;
	--viz-button-bg-color: rgba(255, 255, 255, .8);
	--viz-button-hover-bg-color: rgba(235, 235, 235, .75);

	:last-child {
		margin-bottom: 1rem;
	}

	.spacer {
		flex-grow: 1;
		visibility: hidden;
	}

	viz-button,
	viz-toggle-button {
		border-radius: 4px;
		height: 32px;
	}
}
/* roboto-latin-100-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 100;
  src: url(d268f5774bc641309cd8.woff2) format('woff2'), url(5a039c456d7fbb54719e.woff) format('woff');
}

/* roboto-latin-300-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(b850f1ff581ea232fac9.woff2) format('woff2'), url(c4bc0593c9954d79cb3a.woff) format('woff');
}

/* roboto-latin-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(297d48e1b5a10c0831a9.woff2) format('woff2'), url(047a7839f69b209db815.woff) format('woff');
}

/* roboto-latin-500-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(7077203b1982951ecf76.woff2) format('woff2'), url(68d40d6d01c6f85d24ba.woff) format('woff');
}

/* roboto-latin-700-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(4535474e1cf8598695ad.woff2) format('woff2'), url(9f6a16a7770c87b2042b.woff) format('woff');
}

/* roboto-latin-900-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(cc6b4bed6bc5f2a13af2.woff2) format('woff2'), url(6ecc73f29922242d3631.woff) format('woff');
}