.App{display:flex;justify-content:center;align-items:center;position:relative;height:100svh;max-height:100svh;overflow:hidden}.App .filename{padding:10px;margin:auto;font-size:1.5rem;max-width:calc(100vw - var(--button-diameter)* 9)}.App .side-menu{display:flex;flex-direction:column;position:absolute;height:calc(100svh - 2 * var(--button-diameter));top:var(--button-diameter);flex-wrap:wrap;justify-content:space-around;z-index:5}.App .menu{display:flex;position:absolute;width:calc(100% - 2 * var(--button-diameter));left:var(--button-diameter);z-index:5}.App .side-menu>label,.App .menu>label{flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch;width:var(--button-diameter);text-align:center;box-sizing:border-box;padding:5px}.App .side-menu>label{writing-mode:vertical-lr;align-items:stretch;height:37px}.App .side-menu>input[type=range],.App .side-menu>label>input[type=range]{flex:1 1 auto;-webkit-appearance:slider-vertical;width:calc(var(--button-diameter) / 2)}.App .menu>label{display:flex;flex-direction:column;text-align:center}.App>.content{flex:1 1 auto;display:flex}.LeftMenu.side-menu{left:0;height:calc(100svh - var(--button-diameter));top:calc(var(--button-diameter) / 2)}.RightMenu{right:0}.TopMenu{top:0}.BottomMenu{bottom:0}@media screen and (orientation:portrait){.App{height:100vw;max-height:100vw}.App .filename{max-width:calc(100svh - var(--button-diameter)* 9)}.App .side-menu{height:calc(100vw - 2 * var(--button-diameter))}.App .menu{width:calc(100svh - 2 * var(--button-diameter))}}.Menu{list-style:none;padding:0;margin:0;display:flex;gap:3px}.Menu>li{display:flex;flex-direction:column}.Menu>li>ul{gap:3px}.Menu .dropdown ul>li{background:transparent;flex-direction:row;align-items:center;transition:.5s;gap:0}.Menu li>.text{background:var(--overlay-color);padding:.2rem 0;max-width:0;transition:.5s;overflow:hidden;white-space:nowrap;text-overflow:clip}.Menu .dropdown:focus-within li>.text{padding:.2rem .5rem;max-width:100vw}.Menu .dropdown:focus-within ul>li{background:transparent;flex-direction:row;align-items:center;gap:.5rem}.import-brush input{min-width:1rem}.brush-list{height:calc(100svh - 15rem);overflow-y:auto}.brush-list .selected{background:var(--overlay-color)}.brush-list ul.brushes{display:flex;flex-direction:column;justify-content:center;list-style:none;padding:2px 0}ul.brushes li>div{display:flex;justify-content:center;padding:2px 0}@media screen and (orientation:portrait){.brush-list{height:calc(100vw - 15rem)}}.Config{width:400px}.Config button>img{vertical-align:middle;margin-right:.5em}.EditPalettes{width:400px}.EditPalettes>.cols{display:flex;gap:10px;align-content:stretch}.EditPalettes>.cols>*{width:195px}.palette-list{height:calc(100svh - 11rem);overflow-y:auto}.palette-list ul.palettes{display:flex;flex-direction:column;justify-content:center;list-style:none;padding:2px 0}.EditPalettes .import-palette .palette-props label{font-size:12px;display:flex;flex-direction:row}.EditPalettes .import-palette .palette-props{box-sizing:border-box;display:flex;flex-direction:column;gap:.2rem;padding-inline:.5rem}.palette-props{width:165px;display:flex;flex-direction:column;gap:.4rem}.palette-props label>div{flex:1 1 auto}.palette-props label>input{flex:0 0 auto;min-width:80px}.palette-props .InputPaletteColors{flex:1 1 auto}@media screen and (orientation:portrait){.palette-list{height:calc(100vw - 11rem)}}.InputPaletteColors{display:flex;flex-direction:column;justify-content:space-between;gap:.5rem}.InputPaletteColors>.InputColor{width:100%}.InputPaletteColors>.InputColor>.InputColor{width:100%;opacity:0}.InputPaletteColors>ul{display:flex;list-style:none;padding:0;flex-wrap:wrap;align-content:start;overflow-y:scroll}.InputPaletteColors>.color-list{height:calc(100svh - 19rem);flex:1 1 auto;margin:0}.InputPaletteColors>.color-list .color{box-sizing:border-box}.InputPaletteColors .selected .color{border:solid 2px var(--text-color)}@media screen and (orientation:portrait){.InputPaletteColors>.color-list{height:calc(100vw - 19rem)}}.InputColor{writing-mode:initial}.InputColor>.body{height:21px}.InputColor .popup{position:fixed;display:none;touch-action:none;flex-direction:column;padding:5px;gap:5px;text-align:end;filter:none}.InputColor:focus-within .popup{position:fixed;display:grid;grid-template-columns:100px auto}.InputColor .popup>.dropper{opacity:.5}.InputColor .popup>.dropper.active{opacity:1}.InputColor .hue-bar{width:100px;display:flex;position:relative}.InputColor .hue-bar>input{width:116px;opacity:0}.PalettePreview{display:flex;flex-direction:column;justify-content:center;padding:2px 0}.PalettePreview>ul{display:flex;list-style:none;padding:0;flex-wrap:wrap}.import-brush{margin:0;padding:0}.import-brush .brush-props label{font-size:12px;display:flex;flex-direction:row}.import-brush .brush-props{box-sizing:border-box;display:flex;flex-direction:column;gap:.2rem;padding-inline:.5rem}.brush-props label>div{flex:1 1 100%}.brush-props label>input{flex:0 0 auto}.InputImage{width:20px;height:20px;padding:5px;background:var(--background2-color);display:flex;justify-content:center}.InputImage>div{display:flex;justify-content:center}.InputImage canvas{filter:brightness(0) invert(1)}.BrushPreview{position:relative;display:flex;justify-content:center}.BrushPreview>.name{position:absolute;top:0;opacity:.8;text-shadow:var(--overlay-color) 1px 0 10px;font-size:.8rem}.BrushPreview canvas{width:calc(var(--button-diameter) * 2.9)}.LoadFile .table{display:grid;grid-template-columns:auto min-content;gap:2px;overflow-y:auto;max-height:calc(100svh - 200px);padding-right:5px}@media screen and (orientation:portrait){.LoadFile .table{max-height:calc(100vw - 200px)}}.Toolbar{box-sizing:border-box;display:flex;flex-direction:column;gap:5px}.Toolbar .tool{cursor:pointer}.Toolbar .tool.selected{background:var(--main-color)}.Toolbar .tool.selected>img{filter:none}.brush.dropdown{order:1}.brush.dropdown ul{top:var(--button-diameter)}.brush.dropdown:focus-within ul{position:absolute;overflow-y:scroll;height:50svh;opacity:.8}.brush.dropdown button{font-size:calc(var(--button-diameter) * .26)}.brush.dropdown li>div{display:flex;justify-content:center;padding:2px 0}.BrushWidthInput>.brush-reference{position:absolute;border:1px dashed #fff;opacity:1;align-self:center}.BrushWidthInput>.brush-reference.vanishing{position:absolute;transition:1s;opacity:0}.BrushWidthInput>.brush-reference.hidden{display:none}.BrushWidthInput>.brush-reference:after{display:block;content:" ";box-sizing:border-box;width:100%;border-radius:50%;border:1px dashed #000}@media screen and (orientation:portrait){.brush.dropdown:focus-within ul{height:50vw}}.ColorInput{flex:0 1 auto!important;align-items:center!important}.ColorInput .color{display:flex;position:relative;justify-content:center;align-items:center}.ColorInput .InputColor{position:absolute;width:100%;height:100%}.ColorInput .InputColor>.body{opacity:0;height:100%}.ColorInput.dropdown>ul{height:auto;max-width:25vw;max-height:25svh;flex-wrap:wrap;left:var(--button-diameter)}.ColorInput.dropdown:focus-within>ul{overflow-y:scroll;position:absolute}@media screen and (orientation:portrait){.ColorInput.dropdown>ul{max-width:25svh;max-height:25vw}}.h-center{width:100vw;display:flex;justify-content:center;gap:10px}@media screen and (orientation:portrait){.h-center{width:100svh}}.LayerMenu{position:absolute;bottom:calc(0px - var(--button-diameter));flex:1 1 auto;display:flex;align-items:flex-end}.layer-options{flex:1 1 auto;display:flex;height:90svh}.layer-options .menu{flex:1 1 auto;width:240px;right:-240px;overflow:auto;display:flex;flex-direction:column;gap:10px}.layer-options .menu>.scroller{flex:1 1 auto;overflow:auto}.layer-options input[type=checkbox]{display:none}.layer-options .checkbox{filter:invert(1)}.layer-options input[type=checkbox]:not(:checked)+.checkbox{opacity:.3}.layer-options .menu .list{display:flex;flex-direction:column-reverse}.layer-options .menu>.actions{flex:0 0 auto}.layer-options .menu .list .layer{display:flex;gap:10px;align-items:center;padding:5px}.layer-options .menu .layer>.thumbnail{display:flex;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3ggRDQENU0dyawAAACZJREFUGNNjPHXqDAMSMDY2ROYyMeAFNJVm/Pv3LzL/7Nnzg8VpAKebCGpIIxHBAAAAAElFTkSuQmCC),linear-gradient(0deg,#fff,#fff)}.layer-options .menu .list .selected{background:var(--secondary-color)}@media screen and (orientation:portrait){.layer-options{height:90vw}}.InputName{position:relative;min-width:1em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.InputName>input+.text{color:transparent}.InputName>input{position:absolute;background:none;font:inherit;padding:0;width:100%}[data-tip]:after{display:block;content:attr(data-tip);position:absolute;color:var(--main-color);background:var(--background2-color);font-size:.8rem;z-index:2;padding:.2rem .4rem;border-radius:.2rem}.QuickStart{display:flex;align-items:center;justify-content:center;height:calc(100svh - var(--button-diameter) * 2);width:calc(100% - var(--button-diameter) * 2)}.QuickStart>.QuickStart-modal{display:flex;gap:var(--quick-start-gap);width:var(--quick-start-width);min-height:var(--quick-start-height);background:var(--background2-color);padding:var(--quick-start-padding)}.QuickStart>.QuickStart-modal h2{margin-block:.3em}.QuickStart>.QuickStart-modal img{display:inline-block;vertical-align:bottom;margin-right:5px;width:22px}.QuickStart>.QuickStart-modal>*{width:calc((var(--quick-start-width) - var(--quick-start-padding) * 2 - var(--quick-start-gap)) / 2)}.QuickStart>.QuickStart-modal a,.QuickStart>.QuickStart-modal button{display:block;color:var(--main-color);background:var(--background2-color);max-width:calc((var(--quick-start-width) - var(--quick-start-padding) * 2 - var(--quick-start-gap)) / 2);padding:0;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:22px;margin-block:0px;text-decoration:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media screen and (orientation:portrait){.QuickStart{height:calc(100% - var(--button-diameter) * 2);width:calc(100svh - var(--button-diameter) * 2)}}.Canvas{overflow:hidden;height:calc(100svh - var(--button-diameter) * 2);width:calc(100vw - var(--button-diameter) * 2);background:var(--background2-color);position:relative}.Canvas>.viewport{overflow:hidden;height:calc(100svh - var(--button-diameter) * 2 - var(--scroll-width));width:calc(100vw - var(--button-diameter) * 2 - var(--scroll-width));background:var(--background2-color);position:relative}.Canvas>.viewport>*{width:var(--doc-width)}.Canvas>.v-bar,.Canvas>.h-bar{background:var(--background2-color);z-index:3;position:absolute}.Canvas>.v-bar>.handle,.Canvas>.h-bar>.handle{background:var(--secondary-color);position:absolute}.Canvas>.v-bar{right:0;width:var(--scroll-width);height:100%}.Canvas>.h-bar{bottom:0;width:100%;height:var(--scroll-width)}.Canvas>.v-bar>.handle{width:var(--scroll-width);height:200px}.Canvas>.h-bar>.handle{width:200px;height:var(--scroll-width)}.Canvas>.viewport>*>*{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3ggRDQENU0dyawAAACZJREFUGNNjPHXqDAMSMDY2ROYyMeAFNJVm/Pv3LzL/7Nnzg8VpAKebCGpIIxHBAAAAAElFTkSuQmCC);position:relative}.Canvas>.viewport>*>*>*{position:absolute}.Canvas>.viewport>*>*>*>*{position:absolute}@media screen and (orientation:portrait){.Canvas{transform:rotate(90deg);width:calc(100vw - var(--button-diameter) * 2);height:calc(100svh - var(--button-diameter) * 2)}.Canvas>.viewport{width:calc(100vw - var(--button-diameter) * 2 - var(--scroll-width));height:calc(100svh - var(--button-diameter) * 2 - var(--scroll-width))}}:root{--doc-width: 200px;--doc-height: 200px;--button-diameter: min(50px, calc((100svh - 20px) / 7), calc((100vw - 20px) / 7));--scroll-width: 10px;--quick-start-width: 440px;--quick-start-height: 260px;--quick-start-padding: 20px;--quick-start-gap: 10px;--main-color: #eb840f;--secondary-color: #636363;--background-color: #353535;--background2-color: #161616;--overlay-color: #16161688;--text-color: #e7e7e7;--title-color: #ff7856}html,body{overscroll-behavior-x:none;overflow:hidden;height:100svh}body{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0;background:var(--background-color);color:var(--text-color)}:fullscreen,::backdrop{background:var(--background-color)}*::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px var(--overlay-color);background-color:var(--background2-color)}*::-webkit-scrollbar{width:var(--scroll-width);height:var(--scroll-width);background-color:var(--background2-color)}*::-webkit-scrollbar-thumb{background-color:var(--secondary-color);border:0 solid #000}*::-webkit-scrollbar-corner{background-color:transparent}h1,h2,h3,h4,h5{margin-block:.2em}@keyframes pulsating{0%{width:150px;opacity:1}50%{width:200px;opacity:.5}to{width:150px;opacity:1}}input,select{background:var(--background2-color);border:none;color:var(--text-color)}.btn,button{background:var(--secondary-color);border:none;color:var(--text-color)}input[type=range],input[type=checkbox]{filter:grayscale(1) invert(.9)}.btn.disabled,input[type=submit]:disabled,input[type=submit][disabled],button:disabled,button[disabled]{opacity:.5}.btn>img,button>img{filter:invert(1);width:24px}.btn:focus,button:focus{filter:brightness(1.1)}.round-btn{border-radius:calc(var(--button-diameter) / 2);width:var(--button-diameter);height:var(--button-diameter)}.errors{color:var(--main-color);font-size:.8rem;min-height:1.2rem}.fields{display:flex;flex-direction:column;gap:5px}.fields label{display:flex;gap:10px}.fields label>input{flex:1 1 auto}.fields .actions{margin-top:10px;display:flex;justify-content:center;gap:10px}.fields .actions.right{justify-content:right}.dropdown{display:flex;flex-direction:column;padding:0;margin:0}.dropdown li{display:flex;flex-direction:column}.dropdown>ul{display:flex;flex-direction:column;background:var(--background2-color);list-style:none;padding:0;margin:0;height:0;overflow:hidden;z-index:5}.dropdown>ul>li{background:var(--overlay-color)}.dropdown:focus-within>ul{overflow:visible}.pulsating{animation-name:pulsating;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-direction:alternate;filter:invert()}.ReactModal__Overlay{z-index:10}.select-list>ul{display:flex;flex-direction:column;background:var(--background-color);list-style:none;padding:0;margin:0;overflow:hidden}.select-list .selected{background:var(--overlay-color)}.color{width:calc(var(--button-diameter) / 2);height:calc(var(--button-diameter) / 2);border-radius:calc(var(--button-diameter) / 4)}@media screen and (orientation:portrait){html,body{height:100vw;width:100svh}html{position:absolute}body{position:relative;transform-origin:top left;transform:rotate(-90deg);left:0;top:100svh}}