*, *::before, *::after
{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-overscroll-behaviour: none;
	overscroll-behaviour: none;
}

.np
{
	cursor: default;
	pointer-events: none;
}

.nf:focus
{
	outline: none;
}

.ns
{
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

svg
{
	width: 100%;
	height: auto;
}

.image
{
	overflow: hidden;
}

img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.null
{
	display: none !important;
}

.btn
{
	cursor: pointer;
	pointer-events: all;
}

.fs
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

@font-face
{
	font-family: "supply";
	font-weight: 100;
	src: url("Supply-Regular.otf") format("opentype");
}

body
{
	background: #000000;
	font-size: 14px;
	font-weight: 100;
}

.webgl
{
	background: #000000;
}

.hidden
{
	display: none !important;;
	pointer-events: none !important;;
}

.disabled
{
	opacity: 0.3;
	pointer-events: none !important;;
}


@keyframes pulse
{
	0%
	{
		opacity: 0.3;
	}

	50%
	{
		opacity: 1;
	}

	100%
	{
		opacity: 0.3;
	}
}

@keyframes bar-enter
{
	0%
	{
		opacity: 0;
		transform: translateY(15px);
	}

	100%
	{
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes bar-exit
{
	100%
	{
		opacity: 0;
		transform: translateY(15px);
	}

	0%
	{
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes bar-load
{
	0%
	{
		width: 0%;
	}

	100%
	{
		width: 90%;
	}
}
.preloader
{
	position: absolute;
	top: 0px;
	left: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	z-index: 10;
	cursor: default;
	pointer-events: none;
}

.preloader .load-bar
{
	position: relative;
	width: 300px;
	height: 10px;
	border-radius: 5px;
	overflow: hidden;
	padding: 2px;
	border: 1px solid #FFFFFF;
}

.preloader .load-bar .bg
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.preloader .load-bar .bar
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	transition: width 0.5s ease-out;
}

.preloader .load-bar .bar .inner
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #FFFFFF;
	animation: pulse 2s infinite;
}

.preloader:not(.loaded) .load-bar
{
	animation: bar-enter 1s normal forwards;
}

.preloader:not(.loaded) .bar
{
	animation: bar-load 5s normal forwards;
}

.preloader.loaded .load-bar
{
	animation: bar-exit 1s normal forwards;
}

.ui
{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	width: 100%;
	font-family: "supply";
	text-transform: uppercase;
	text-rendering: geometricPrecision;
	color: #FFFFFF;
	opacity: 0;
}

.ui.active
{
	transition: opacity 1s ease-out;
	opacity: 1;
}

.cta
{
	display: flex;
	flex-direction: column;
	min-width: 150px;
	padding: 12px;
	color: #FFFFFF;
	border: 1px solid #FFFFFF;
	text-align: center;
}

.cta:hover
{
	background: #FFFFFF;
	color: #0000FF;
}

.main-logo
{
	position: absolute;
	top: 16px;
	left: 16px;
	width: 150px;
	height: 50px;
}

.navbar
{
	position: absolute;
	top: 16px;
	left: 17px;
	width: calc(100vw - 34px);
	border-bottom: 2px solid #FFFFFF;
	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 10;
}

.navbar .btn
{
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 7px;
	padding-bottom: 6px;
}

.navbar .btn:hover
{
	background: #FFFFFF;
	color: #000000;
}

.env-btn
{
	background: #FF0000;
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
}

.intro
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.intro .row
{
	display: flex;
	flex-direction: row;
}

.intro .col
{
	width: 33%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 70px;
	gap: 20px;
}

.intro .molten-logo
{
	width: 150px;
	height: 50px;
}

.state-select .states
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.state-select .state-btn
{
	min-width: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid #FFFFFF;
	margin-bottom: 4px;
}

.state-select .state-btn p
{
	width: 100%;
	padding: 8px;
	text-align: center;
}

.state-select .state-btn:hover p
{
	background: #FFFFFF;
	color: #004ce5;
}

.state-select .state-btn.selected p
{
	background: #FFFFFF;
	color: #004ce5;
}

.state-select .state-btn.reset
{
	position: fixed;
	top: 70px;
	right: 40px;
}

.state-select .state-btn.share
{
	margin-top: 16px;
}

.editor-panel
{
	width: 100%;
	max-width: 240px;
	max-height: 64vh;
	display: flex;
	flex-direction: column;
	pointer-events: all;
	overflow-x: hidden;
	overflow-y: scroll;
	overscroll-behaviour: contain;
}

.editor-panel::-webkit-scrollbar
{
	display: none;
}

.editor-panel .label
{
	margin-bottom: 6px;
}

.spin-direction
{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 6px;
}

.spin-direction .btn
{
	margin-left: 11px;
	width: 40px;
	height: 20px;
	border-radius: 40px;
	border: 2px solid rgba(255,255,255,1.0);
	padding: 2px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.spin-direction .btn .inner
{
	width: 14px;
	height: 100%;
	background: #FFFFFF;
	border-radius: 40px;
}

.spin-direction .btn.set
{
	flex-flow: row-reverse;
}

.swatch-group
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.color-swatch
{
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: 4px;
	border-radius: 32px;
	border: 2px solid rgba(255,255,255,0.0);
}

.color-swatch .inner
{
	width: 32px;
	height: 32px;
	border-radius: 32px;
}

.color-swatch:hover
{
	border: 2px solid rgba(255,255,255,1.0);
}

.color-swatch.selected
{
	border: 2px solid rgba(255,255,255,1.0);
}

.material-swatch
{
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 7px;
	padding-bottom: 7px;
	border: 1px solid rgba(255,255,255,0.3);
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.material-swatch .inner
{
	width: 37px;
	height: 37px;
}

.material-swatch:hover
{
	border: 1px solid #FFFFFF;
}

.material-swatch.selected
{
	border: 1px solid #FFFFFF;
}

.lhc
{
	position: absolute;
	left: 3vw;
	top: 0px;
	height: 100%;
	width: 30vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.rhc
{
	position: absolute;
	right: 2vw;
	top: 0px;
	height: 100%;
	width: 30vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.share-preview
{
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.share-preview .background
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #023a8f;
	opacity: 0;
	transition: opacity 0.6s ease-out;
}

.share-preview.active .background
{
	opacity: 1;
}

.share-preview .content
{
	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 1;
}

.share-preview .share-image
{
	max-width: 50vh;
	border: 2px solid #FFFFFF;
	position: relative;
	aspect-ratio: 1;
	margin-right: 26px;
}

.share-preview .side
{
	margin-left: 26px;
	max-width: 30vw;
}

.share-preview .instructions
{
	margin-top: 16px;
	margin-bottom: 16px;
}

.share-preview .buttons
{
	display: flex;
	flex-wrap: wrap;
	gap: 0 4px;
}

.share-preview .buttons .btn
{
	width: calc(50% - 4px);
	min-height: 53px;
	padding: 4px 8px;
	display: flex;
	justify-content: center;
	line-height: 1.1;
}

.share-preview .buttons--spaced
{
	margin-top: 15px;
}

.share-preview .cta
{
	margin-bottom: 4px;
	max-width: 300px;
}

.gallery .back-btn
{
	position: fixed;
	top: 70px;
	right: 40px;
}

.range-container
{
	position: relative;
	width: 100%;
	height: 35px;
	margin-top: -6px;
}

.range-bg
{
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.range-bg path
{
	fill: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);;
}

.range-slider
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	right: 0px;
}

.range-marker
{
	position: absolute;
	width: 30px;
	height: 100%;
	top: 0px;
	left: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.range-marker .inner
{
	width: 20px;
	height: 20px;
	border-radius: 30px;
	background: #FFFFFF;
}

input[type=range]
{
	-webkit-appearance: none;
	appearance: none;
	opacity: 0;
	background: none;
}

input[type=range]::-webkit-slider-thumb
{
	-webkit-appearance: none;
	appearance: none;
	opacity: 0;
	width: 45px;
	border-radius: 0px;
	height: 100%;
	cursor: pointer;
	pointer-events: all;
	outline: none;
}

input[type=range]::-moz-range-thumb
{
	width: 45px;
	height: 100%;
	outline: none;
	cursor: pointer;
	pointer-events: all;
	border-radius: 0px;
	border: none;
}

input[type=range]:focus
{
	outline: none;
}

.overlay-desktop
{
	position: absolute;
}

.overlay-desktop .border
{
	stroke-width: 2;
	stroke: #FFFFFF;
	position: absolute;
}

.overlay-desktop .graphics
{
	display: flex;
	flex-direction: row;
	align-items: center;
	position: absolute;
	left: 32px;
	bottom: 48px;
}

.overlay-desktop .graphics .graphic
{
	width: 80px;
}

.overlay-desktop .bl
{
	left: 16px;
	bottom: 42px;
	width: 26px;
}

.overlay-desktop .l
{
	left: 17px;
	bottom: 68px;
	top: 16px;
	border-left: 2px solid #FFFFFF;
}

.overlay-desktop .bb
{
	left: 42px;
	bottom: 43px;
	width: 30vw;
	border-bottom: 2px solid #FFFFFF;
}

.overlay-desktop .ibl
{
	left: calc(42px + 30vw);
	bottom: 19px;
	width: 26px;
}

.overlay-desktop .wha
{
	position: absolute;
	bottom: 32px;
	left: calc(68px + 30vw);
	width: 240px;
}

.overlay-desktop .wha svg
{
	fill: rgb(255,255,0);
}

.overlay-desktop .whb
{
	position: absolute;
	bottom: 32px;
	right: 42px;
	width: 240px;
	transform: scale(-1, 1);
}

.overlay-desktop .whb svg
{
	fill: rgb(255,255,0);
}

.overlay-desktop .b
{
	left: calc(68px + 30vw);
	bottom: 20px;
	right: 42px;
	border-bottom: 2px solid #FFFFFF;
}

.overlay-desktop .br
{
	right: 16px;
	bottom: 19px;
	width: 26px;
	transform: scale(-1, 1);
}

.overlay-desktop .r
{
	right: 17px;
	bottom: 44px;
	top: 16px;
	border-right: 2px solid #FFFFFF;
}

.overlay-desktop .t
{
	right: 17px;
	top: 16px;
	left: 17px;
	border-top: 2px solid #FFFFFF;
}

.overlay-desktop .wva
{
	position: absolute;
	left: 26px;
	top: 20vh;
	width: 20px;
}

.overlay-desktop .wvb
{
	position: absolute;
	right: 26px;
	bottom: 20vh;
	width: 20px;
	transform: rotate(180deg);
}

.overlay-desktop .molten-logo
{
	position: absolute;
	bottom: 16px;
	left: 16px;
	width: 85px;
}

.overlay-desktop .title
{
	position: absolute;
	left: 36px;
	top: 64px;
	font-size: 30px;
	overflow: hidden;
}

.overlay-desktop .title .char
{
	display: inline-block;
}

.rotate-screen
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 99;
	background: #023a8f;
	border: 2px solid #FFFFFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.mobile .navbar
{
	display: none;
}

.mobile .border
{
	display: none;
}

.mobile .graphics
{
	display: none;
}

.mobile .wha
{
	display: none;
}

.mobile .whb
{
	display: none;
}

.mobile .overlay-desktop .molten-logo
{
	bottom: unset;
	top: 26px;
	left: 26px;
	width: 100px;
}

.mobile .overlay-desktop .title
{
	left: 26px;
	font-size: 24px;
}

.mobile .overlay-desktop .wva
{
	left: 4px;
	top: 16vh;
	width: 18px;
}

.mobile .overlay-desktop .wvb
{
	right: 4px;
	bottom: 4vh;
	width: 18px;
}

.mobile.portrait .intro
{
	flex-direction: column;
}

.mobile.portrait .intro .row
{
	flex-direction: column;
	position: absolute;
	bottom: 32px;
}

.mobile.portrait .intro .col
{
	width: 100%;
	height: unset;
	padding-left: 36px;
	padding-right: 36px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.mobile.portrait .intro .col:nth-child(0)
{
	order: 1;
}

.mobile.portrait .intro .col:nth-child(2)
{
	display: none;
}

.mobile.portrait .intro .col:nth-child(1)
{
	order: 0;
	text-align: center;
}

.mobile.portrait .lhc
{
	top: unset;
	left: 0px;
	height: unset;
	width: 100%;
	bottom: 6vh;
}

.mobile.landscape .reset
{
	display: none;
}

.mobile.landscape .molten-logo
{
	display: none;
}

.mobile.landscape .title
{
	display: none;
}

.mobile.landscape .rotate-group
{
	position: fixed;
	top: 10000px;
}

.mobile.landscape .editor-panel
{
	max-height: 100vh;
}

.mobile.landscape .wva
{
	width: 14px;
}

.mobile.landscape .wvb
{
	width: 14px;
}

.mobile.landscape .editor-panel .label
{
	margin-bottom: 4px;
}

.mobile.landscape .state-btn
{
	min-width: 120px;
}

.mobile.landscape .material-swatch
{
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
}

.mobile.landscape .color-swatch
{
	margin: 1px;
}

.mobile.landscape .color-swatch .inner
{
	width: 24px;
	height: 24px;
}

.mobile.landscape .rhc
{
	right: 5vw;
	width: 25%;
}

.mobile.landscape .rhc .label
{
	font-size: 12px;
}

.mobile.landscape .share-preview .content
{
	height: 80%;
}

.mobile.landscape .share-preview .share-image
{
	max-width: 70vh;
}


@media screen and (min-width: 1200px)
{
	 body
	{
		font-size: 16px;
	}

	.overlay-desktop .graphics
	{
		bottom: 78px;
	}

	.overlay-desktop .graphics .graphic
	{
		width: 110px;
	}

	.overlay-desktop .bl
	{
		bottom: 72px;
	}

	.overlay-desktop .bb
	{
		bottom: 73px;
	}

	.overlay-desktop .l
	{
		bottom: 98px;
	}

	.overlay-desktop .ibl
	{
		bottom: 49px;
	}

	.overlay-desktop .wha
	{
		bottom: 62px;
		width: 340px;
	}

	.overlay-desktop .whb
	{
		bottom: 62px;
		width: 340px;
	}

	.overlay-desktop .b
	{
		bottom: 50px;
	}

	.overlay-desktop .br
	{
		bottom: 49px;
	}

	.overlay-desktop .r
	{
		bottom: 74px;
	}

	.overlay-desktop .molten-logo
	{
		width: 145px;
	}

	.overlay-desktop .title
	{
		font-size: 40px;
	}

	.cta
	{
		min-width: 200px;
		font-size: 18px;
	}

	 .state-btn
	{
		min-width: 200px;
	}

	 .state-btn p
	{
		width: 100%;
		padding: 16px;
		font-size: 18px;
		text-align: center;
	}

	 .material-swatch
	{
		padding-left: 16px;
		padding-right: 16px;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	 .color-swatch .inner
	{
		width: 24px;
		height: 24px;
	}
}