body {
	margin: 0;
	overflow: hidden;
	display: flex;

	font-family: 'Roboto', 'OpenSansEmoji', Helvetica, Arial, sans-serif;

	font-weight: 300;

	font-size: 16px;
	background-color: #f8f8f8;

	color: #1c1b1f;

	height: 100vh;
	display: flex;

}

div,
input,
select,
textarea,
button {
	box-sizing: border-box;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#grid_container {


	flex-grow: 1;
	flex-shrink: 1;
	min-width: 300px;

	height: 100vh;

	position: relative;
	background-color: #e0e0e0;

	display: flex;

	justify-content: center;
	align-items: center;
	overflow: hidden;

}

#editor_container {
	flex-basis: 380px;

	flex-grow: 0;

	flex-shrink: 0;

	min-width: 300px;

	max-width: 70%;

	height: 100vh;


	position: relative !important;

	overflow: hidden !important;
}

#editor_resizer {
	flex-basis: 8px;

	flex-grow: 0;
	flex-shrink: 0;
	height: 100vh;

	background-color: #cac4d0;

	cursor: col-resize;

	transition: background-color 0.2s ease;
	z-index: 5;

}

#editor_resizer:hover {
	background-color: #79747e;

}

#editor_resizer:active {
	background-color: #6750a4;

}

body.is-resizing {
	cursor: col-resize;

	user-select: none;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

body.is-resizing * {

	pointer-events: none;

}

body.is-resizing #editor_resizer {
	pointer-events: auto;
}

#play_container {


	flex-grow: 1;
	height: 60px;

	position: fixed;

	left: 0;
	bottom: 0;
	background-color: #e7e0ec;

	border-top: 1px solid #cac4d0;

	color: #49454f;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;

	z-index: 10;

	width: 100%;
	box-sizing: border-box;
}

#grid_bg {
	position: absolute;



	cursor: default;
	border: 1px solid #bbbbbb;

	box-sizing: content-box;

}

#grid {
	position: absolute;



	cursor: default;
	border: 1px solid #bbbbbb;

	box-sizing: content-box;
}

#grid>div>div {

	float: left;
	line-height: 1em;

	text-align: center;
	display: flex;

	border: 1px solid #828282;
	justify-content: center;
	align-items: center;
	color: #303030;

}

#grid_bg>div {

	position: absolute;
	border: 1px solid #222222;


	box-sizing: border-box;
}

.ps-container {

	-ms-touch-action: none;
	touch-action: none;
	overflow: hidden !important;
	position: relative;
}

#editor {

	height: 100%;

	width: 100%;

	overflow: auto;

	padding: 20px;

	box-sizing: border-box;

	position: relative;

}

#editor .editor_title {
	font-size: 24px;

	margin-bottom: 20px;
	color: #1d192b;

	font-weight: 400;
}

#editor .editor_title span {
	font-weight: 500;

}

#editor .editor_main_title_input {
	font-family: 'Roboto', 'OpenSansEmoji', Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 24px;
	border: none;
	border-bottom: 2px solid #6750a4;

	background: none;
	width: 100%;
	padding: 8px 0;
	margin-bottom: 25px;
	outline: none;
	color: #1c1b1f;
}

#editor .editor_main_title_input:focus {
	border-bottom-color: #4f378b;

}

#editor .editor_state {
	margin-bottom: 20px;
	background-color: #fffbfe;

	border-radius: 12px;

	padding: 10px 15px;
	border: 1px solid #cac4d0;

	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}

#editor .editor_state_header {
	display: flex;
	align-items: baseline;

	gap: 5px;
	margin-bottom: 5px;

}

#editor input.editor_icon {
	font-size: 24px;

	width: 36px;
	height: 36px;
	line-height: 34px;

	margin-right: 5px;


	background: #eee;
	border: 1px solid #ccc;
	border-radius: 3px;
}

#editor input[type=text].editor_name {
	font-size: 16px;

	height: 30px;

	padding: 2px 5px;
	flex-grow: 1;

	border: 1px solid #ccc;
	border-radius: 3px;
	background-color: #fff;
}

#editor div.delete_state {
	width: 25px;

	height: 25px;
	font-size: 20px;

	line-height: 25px;
	opacity: 0.3;
	color: #000;
	margin-left: 5px;
	align-self: center;


	border-radius: 0;
	background: none;
}

#editor div.delete_state:hover {
	opacity: 1;
	background-color: #fdeded;

}

#editor textarea,
#editor .editor_textarea {
	font-family: 'Roboto', 'OpenSansEmoji', Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 14px;

	background: #f3f0f4;

	margin: 10px 0;
	border: 1px solid #cac4d0;
	border-radius: 8px;

	width: 100%;
	resize: none;
	overflow: hidden;

	padding: 10px;
	color: #49454f;
	line-height: 1.4;
}

#editor textarea:focus,
#editor .editor_textarea:focus {
	outline: none;
	border-color: #6750a4;
}

#editor input[type=text].editor_number {
	font-size: inherit;
	width: 45px;

	cursor: col-resize;
	border: none;
	border-bottom: 1px dotted #aaa;

	border-radius: 0;
	background: none;
	text-align: center;
	padding: 1px 0;
	margin: 0 4px;

	vertical-align: baseline;
	display: inline;
}

#editor input[type=text].editor_number:focus {
	border-bottom: 1px solid #6750a4;

	outline: none;
}

#editor .editor_actions ul {
	margin: 5px 0 5px 25px;

	padding-left: 0;
	list-style-type: none;
	position: relative;
	border-left: none;
}

#editor .editor_actions li {
	padding: 2px 0 2px 10px;

	margin-bottom: 3px;

	display: block;

	line-height: 1.5;

	position: relative;

	min-height: 22px;
}

#editor .editor_actions li>span,
#editor .editor_actions li>select,
#editor .editor_actions li>input[type=text].editor_number,
#editor .editor_actions li>.editor_state_selector_container {
	display: inline-block;

	vertical-align: middle;

	margin-left: 0;
	margin-right: 4px;

	margin-bottom: 2px;

	padding: 0;

	font-size: inherit;
}

#editor .editor_actions li>.action-ui-container>div {
	margin: 0;
}

#editor .editor_actions li .editor_actions {
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: 10px;

	display: block;

}

#editor .editor_actions li .editor_actions ul {
	margin-left: 15px;

	margin-top: 3px;
	margin-bottom: 3px;
}

#editor .editor_actions li>div:not(.delete_action):not(.editor_new_action_container) {
	display: inline;





}

#editor li>span,

#editor li>div:not(.delete_action):not(.editor_new_action_container) {
	margin-left: 0px;

	flex-grow: 0;

	display: inline;

	margin-right: 4px;

}

#editor .editor_actions li .editor_actions {

	margin-top: 5px;
	margin-bottom: 5px;
}

#editor li>select,
#editor li>input[type=text].editor_number {
	margin-left: 0;

}

#editor li>div.delete_action {
	width: 16px;
	height: 16px;
	position: absolute;
	left: -20px;

	top: 50%;

	transform: translateY(-50%);

	cursor: pointer;
	opacity: 0.3;
	color: #000;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
}

#editor li>div.delete_action:hover {
	opacity: 0.6;

}

#editor .editor_new_action_container {
	margin-left: -25px;

	display: block;

	margin-top: 5px;
}

#editor .editor_new_action_select {


	opacity: 1;
	position: static;
	height: auto;
	padding: 2px 5px;

	border: 1px solid #aaa;

	border-radius: 3px;

	font-family: inherit;
	font-weight: normal;

	font-size: 12px;

	line-height: normal;
	color: #555;

	background-color: #f0f0f0;

	cursor: pointer;
	transition: background-color 0.2s;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: none;

	display: inline-block;

}

#editor .editor_new_action_select:hover {
	background-color: #e0e0e0;

}

#editor .editor_new_action {
	width: auto;
	height: auto;

	display: inline-block;
	margin-top: 0;

	margin-left: -30px;


	position: relative;
}

#editor .editor_new_action div {

	width: auto;
	height: 30px;
	padding: 0 12px;
	border: 1px solid #79747e;

	border-radius: 15px;

	position: absolute;
	font-family: 'Roboto', 'OpenSansEmoji', Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 28px;

	text-align: center;
	color: #6750a4;

	background-color: #fffbfe;

	cursor: pointer;
	transition: background-color 0.2s;
	display: none;
}

#editor .editor_new_action div:hover {
	background-color: #e8def8;

}

#editor .editor_new_action select {

	opacity: 1;
	position: static;

	width: auto;

	height: 32px;

	padding: 0 12px;
	border: 1px solid #79747e;

	border-radius: 16px;

	font-family: 'Roboto', 'OpenSansEmoji', Helvetica, Arial, sans-serif;
	font-weight: 500;

	font-size: 14px;
	line-height: 30px;

	color: #6750a4;

	background-color: #fffbfe;

	cursor: pointer;
	transition: background-color 0.2s;

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	display: inline-block;

}

#editor .editor_new_action select:hover {
	background-color: #e8def8;

}

#editor .editor_fancy_button {
	border-radius: 3px;

	min-width: auto;

	width: auto;

	padding: 5px 10px;

	height: auto;

	background: #ddd;

	font-weight: normal;

	font-size: 14px;

	line-height: normal;

	color: #333;

	cursor: pointer;
	display: inline-flex;
	align-items: center;
	text-align: left;

	border: 1px solid #ccc;

	transition: background-color 0.2s;
	margin-bottom: 10px;

	box-shadow: none;

}

#editor .editor_fancy_button:hover {
	background: #ccc;

	box-shadow: none;
}

#editor .editor_fancy_button span.button-icon {
	font-size: 16px;

	margin-right: 5px;


	border-right: none;
	line-height: inherit;
	height: auto;
	float: none;
	display: inline;
	text-align: center;
	position: static;
}

#editor .editor_fancy_button#save_local_button,
#editor .editor_fancy_button#export_model_button,
#editor .editor_fancy_button#import_model_button {
	background: #ddd;

	color: #333;
}

#editor .editor_fancy_button#save_local_button:hover,
#editor .editor_fancy_button#export_model_button:hover,
#editor .editor_fancy_button#import_model_button:hover {
	background: #ccc;
}

#editor .editor_save_load_section {
	margin-top: 25px;
	padding: 15px;
	background-color: #e7e0ec;

	border-radius: 12px;
	border: 1px solid #cac4d0;
}

#editor .editor_save_load_section h3 {
	margin-top: 10;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 500;
	color: #1d192b;
}

#editor .editor_save_load_section .editor_label {
	margin-bottom: 8px;
}

#editor .importExportRow {

	display: flex;
	gap: 10px;
	flex-wrap: wrap;

	margin-bottom: 15px;

}

#editor input.editor_text_input {

	width: 100%;
	font-size: 14px;
	padding: 10px;
	border: 1px solid #79747e;

	border-radius: 4px;

	margin-bottom: 10px;
	background-color: #fffbfe;

}

#editor input.editor_text_input[readonly] {
	background-color: #f3f0f4;

	cursor: default;
}

#editor input.editor_text_input:focus {
	outline: none;
	border-color: #6750a4;

}

#editor select {
	max-width: none;

	width: auto;

	padding: 2px 5px;

	font-family: inherit;

	font-size: inherit;

	border: 1px solid #aaa;

	border-radius: 3px;

	background-color: #fff;

	margin: 0 4px;

	vertical-align: baseline;

	-webkit-appearance: none;

	-moz-appearance: none;
	appearance: none;

	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23aaa%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.6-3.6%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: right 5px center;
	background-size: 8px auto;
	padding-right: 20px;

	cursor: pointer;
}

#editor select:focus {
	outline: 1px solid #6750a4;

	border-color: #6750a4;
}

#editor div.proportions {
	overflow: visible !important;

	margin-top: 10px;

	padding: 5px;

	min-height: 20px;

	display: block !important;

	visibility: visible !important;
	opacity: 1 !important;
}

#editor div.proportions>div {
	overflow: visible;
	display: flex;
	align-items: center;
	margin-bottom: 5px;
	visibility: visible !important;
	opacity: 1 !important;
}

#editor div.proportions>div>span {
	width: 1.5em;
	height: 1.5em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
	font-size: 16px;

	flex-shrink: 0;
	visibility: visible !important;
	opacity: 1 !important;
}

#editor div.proportions>div>input[type=range] {
	flex-grow: 1;
	cursor: pointer;
	height: 8px;
	-webkit-appearance: none;
	appearance: none;
	background: #d9d4de;
	border-radius: 4px;
	outline: none;
	display: block;

	visibility: visible !important;
	opacity: 1 !important;
}

#editor div.proportions>div>input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	background: #6750a4;

	border-radius: 50%;
	cursor: pointer;
}

#editor div.proportions>div>input[type=range]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	background: #6750a4;
	border-radius: 50%;
	cursor: pointer;
	border: none;
}

#editor hr {
	margin: 30px 0;

	border: none;
	height: 1px;
	background-color: #cac4d0;

}

#editor .editor_label {
	font-size: 12px;
	color: #49454f;

	display: block;
	margin-bottom: 5px;
	line-height: 1.3;
}

#editor .editor_label a {
	color: #6750a4;

	text-decoration: none;
}

#editor .editor_label a:hover {
	text-decoration: underline;
}

#editor .credits_label {
	font-size: 14px;

	color: #49454f;
	margin: 30px 0;
	line-height: 1.5;
}

#editor li>span,
#editor li>div:not(.delete_action) {

	margin-left: 10px;

	flex-grow: 1;

}

#play_controls {
	width: auto;

	max-width: 500px;

	height: 40px;


	overflow: hidden;
	display: flex;

	align-items: center;
	gap: 8px;

}

#play_controls>div {


	flex-shrink: 0;

}

#play_controls>.control_button {
	background: #e8def8;

	color: #1d192b;

	border: 1px solid #cac4d0;
	border-radius: 50%;



	width: 40px;

	height: 40px;




	font-weight: normal;

	font-size: 20px;

	transition: background-color 0.2s;
	cursor: pointer;
	display: inline-flex;

	align-items: center;
	justify-content: center;

}

#play_controls>.control_button>.material-symbols-outlined {
	font-size: 24px;

	line-height: 1;
	display: block;
	width: 24px;

	height: 24px;

	overflow: hidden;

	font-variation-settings:

		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24;
	visibility: visible;

}

#play_controls>.control_button:hover {
	background: #d8cde0;

}

#play_controls>.control_button:active {
	background: #ccc1d6;

}

#play_controls>.control_speed {
	width: 130px;
	height: 40px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 8px;

	padding: 0;

	box-sizing: border-box;

	opacity: 1 !important;

	visibility: visible !important;
	overflow: visible;
}

#play_controls>.control_speed>input[type=range] {
	width: 100%;
	height: 8px;
	margin: 0 0 4px 0;

	cursor: pointer;
	-webkit-appearance: none;
	appearance: auto;
	background: #d9d4de;
	border-radius: 4px;
	outline: none;
	display: block;

	visibility: visible !important;

	opacity: 1;

}

#play_controls>.control_speed>input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: #6750a4;
	border-radius: 50%;
	cursor: pointer;
	margin-top: -4px;

	visibility: visible;

	opacity: 1;

	width: 16px;
	height: 16px;
}

#play_controls>.control_speed>input[type=range]::-moz-range-thumb {

	visibility: visible;

	opacity: 1;

	width: 16px;
	height: 16px;
}

#play_controls>.control_speed>.speed_labels {
	display: flex;
	justify-content: space-between;
	width: 100%;
	font-size: 11px;
	color: #49454f;
	padding: 0 2px;
	line-height: 1;
	visibility: visible;

	opacity: 1;

}

#play_controls>.control_speed>.speed_labels>div {
	float: none !important;
}

#play_controls>#play_draw {

	display: inline-flex;

	align-items: center;
	width: auto;

	padding: 0 10px 0 5px;

	border-radius: 20px;

}

#play_controls>#play_draw>.material-symbols-outlined {
	margin-right: 5px;

}

#play_controls>#play_draw>#play_draw_icon_container {
	width: 26px;
	height: 26px;
	border: 1px solid #79747e;
	font-size: 20px;
	border-radius: 4px;
	line-height: 24px;

	text-align: center;


	background: #fffbfe;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;

	visibility: visible;
}

#play_controls>#play_pause[paused=true] {
	background: #6750a4;

	color: #ffffff;

	border-color: #6750a4;
}

#play_controls>#play_pause[paused=true]>.material-symbols-outlined {
	color: #ffffff;

}

#play_controls>#play_pause[paused=true]:hover {
	background: #5a4591;

}

#play_controls>#play_draw>div {


	width: 24px;

	height: 24px;
	border: 1px solid #79747e;

	font-size: 18px;

	border-radius: 4px;

	line-height: 22px;

	text-align: center;
	margin-left: 8px;

	background: #fffbfe;

	display: inline-flex;

	justify-content: center;
	align-items: center;
}

#play_controls[basic]>#play_step {
	display: none;
}

#play_controls[basic]>.control_divider:nth-of-type(2) {

	display: none;
}

a {
	color: #6750a4;

	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

#importFile {
	display: none;
}