:root{touch-action:pan-x pan-y;height:100%;--bg-color: #141514;--text-color: #D8CEC5;--highlight-color: rgb(from var(--text-color) r g b / .2);overflow:clip}input[type=number]{appearance:textfield}body{height:100%}#container{font-family:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif;height:100%;color:var(--text-color);background-color:var(--bg-color);transition:background-color .2s ease-in-out}.gridWrapper{height:100%;display:grid;grid-template-areas:"a" "b" "c";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:1fr;place-content:center;place-items:center}#theme{grid-area:a;height:min-content;display:block;margin:1vmin;z-index:1}#myContent{grid-area:b;display:flex;justify-content:center;overflow:visible}#myContent.abs{position:absolute}canvas{width:100%;height:100%;image-rendering:pixelated;display:none}canvas.show{display:flex}#control-panel{grid-area:c;height:fit-content;display:flex;flex-direction:row;justify-content:space-between;margin:1vmin;box-sizing:border-box;place-self:stretch}.info{max-width:45%;display:block;margin:auto}.info.hide{display:none}.info img{max-width:75%;display:block;margin:auto}.info img.hide{display:none}.gen label input:hover+#dark{background-color:#4e514e3a}.gen label input:hover+#light{background-color:#4e514e3a}.icon{width:5vh;height:5vh}.box{min-width:10%;text-decoration:none;transition:all .2s background 0s;padding:2vh;backdrop-filter:blur(5px) brightness(80%);background:linear-gradient(var(--text-color),var(--text-color)) left / 5px 100%,linear-gradient(var(--text-color),var(--text-color)) right / 5px 100%,linear-gradient(var(--text-color),var(--text-color)) left 5px bottom / 20px 5px,linear-gradient(var(--text-color),var(--text-color)) left 5px top / 20px 5px,linear-gradient(var(--text-color),var(--text-color)) right 5px bottom / 20px 5px,linear-gradient(var(--text-color),var(--text-color)) right 5px top / 20px 5px;background-repeat:no-repeat;background-color:rgb(from var(--bg-color) r g b / .1)}.gen{display:flex;margin:4% 1% 1%;margin-inline:auto;text-decoration:none;transition:all .2s background 0s;transition:color .2s ease-in-out;color:var(--text-color);border-width:0px;text-align:center;align-items:center;justify-content:center;background:transparent}div[class=gen]{box-shadow:none}h2[class=menu-title]{text-align:left;margin:0 0 6%;font-weight:700;font-size:140%}input[class~=gen]{width:95%;padding:3%;font-size:inherit;font-weight:700;background:linear-gradient(var(--text-color),var(--text-color)) left / 2px 100%,linear-gradient(var(--text-color),var(--text-color)) right / 2px 100%,linear-gradient(var(--text-color),var(--text-color)) left 2px bottom / 4px 2px,linear-gradient(var(--text-color),var(--text-color)) left 2px top / 4px 2px,linear-gradient(var(--text-color),var(--text-color)) right 2px bottom / 4px 2px,linear-gradient(var(--text-color),var(--text-color)) right 2px top / 4px 2px;background-repeat:no-repeat}.stage-display input[class~=gen]{display:inline-flex;width:45%}.stage-display{font-weight:700}button[class~=gen]{cursor:pointer;padding:6% 8%;font-weight:700;background:linear-gradient(var(--text-color),var(--text-color)) left / 2px 100%,linear-gradient(var(--text-color),var(--text-color)) right / 2px 100%,linear-gradient(var(--text-color),var(--text-color)) left 2px bottom / 4px 2px,linear-gradient(var(--text-color),var(--text-color)) left 2px top / 4px 2px,linear-gradient(var(--text-color),var(--text-color)) right 2px bottom / 4px 2px,linear-gradient(var(--text-color),var(--text-color)) right 2px top / 4px 2px;background-repeat:no-repeat}.gen:hover{color:#4e514e;box-shadow:none}.radiodiv{width:100%;box-shadow:none}.gen label{width:100%;text-align:center;cursor:pointer}.gen label input{display:none}.gen label span{padding:6%;margin:0;height:100%;box-shadow:none}.gen label input:checked+span{font-weight:700;background:linear-gradient(var(--text-color),var(--text-color)) left / 2px 100%,linear-gradient(var(--text-color),var(--text-color)) right / 2px 100%,linear-gradient(var(--text-color),var(--text-color)) left 2px bottom / 4px 2px,linear-gradient(var(--text-color),var(--text-color)) left 2px top / 4px 2px,linear-gradient(var(--text-color),var(--text-color)) right 2px bottom / 4px 2px,linear-gradient(var(--text-color),var(--text-color)) right 2px top / 4px 2px;background-repeat:no-repeat}.gen label input:checked:hover+span{background:linear-gradient(var(--text-color),var(--text-color)) left / 1px 100%,linear-gradient(var(--text-color),var(--text-color)) right / 1px 100%,linear-gradient(var(--text-color),var(--text-color)) left 1px bottom / 4px 1px,linear-gradient(var(--text-color),var(--text-color)) left 1px top / 4px 1px,linear-gradient(var(--text-color),var(--text-color)) right 1px bottom / 4px 1px,linear-gradient(var(--text-color),var(--text-color)) right 1px top / 4px 1px;background-repeat:no-repeat}.error_msg,.error_msg_stages{display:block;visibility:visible;color:red;font-size:75%;text-align:center;font-weight:400}.error_msg.hide,.error_msg_stages.hide{visibility:hidden}.tpanel{display:none;text-align:center}.tpanel.show{display:block}.tpanel.mobile.show,.mobile-click-area,.mobile-output{display:none}@media screen and (max-width:100vh){.info{max-width:95%}.tpanel{display:none;margin:4% 1% 1%}.tpanel.show{display:none}.tpanel.mobile{height:33%;display:block;flex-direction:column;visibility:hidden}.tpanel.mobile.show{height:33%;display:block;flex-direction:column;visibility:visible}.mobile-click-area{display:block;position:fixed;width:75%;right:-50%;top:0;max-height:90%;min-height:60%;padding:10% 0% 20% 20%;box-sizing:border-box;transition:right .1s ease-out}.mobile-click-area.expand{width:100%;padding:10% 0% 20% 45%;right:0}.mobile-output{height:100%;display:block;box-sizing:border-box}}.properties{margin:auto}.property{text-align:right}.property_label{text-align:left}.tpanel span{font-weight:700}html,body{margin:0;width:100%;height:100%}