.app{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.app .mobile{font-weight:bolder;font-size:40pt;text-align:center;background:-webkit-linear-gradient(750deg,MediumSlateBlue,Chocolate,DarkOrchid,YellowGreen);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.bar-container{position:absolute;left:0;top:0;bottom:0;padding:2em 0 2em 2em;align-items:center;display:flex}.bar-container .bar{padding:1em;border-radius:1em;width:4em;background-color:#2f4f4f;flex-direction:column}.quantity{display:flex;margin-top:1em;gap:.2em .2em;flex-wrap:wrap}.quantity-button{flex-grow:1;border:.2em solid Ivory;border-radius:.5em;padding:.2em 0;background-color:transparent;display:inline-block;font-size:12px;cursor:pointer;color:ivory;font-weight:bolder}.quantity-button--selected{color:#daa520;border-color:#daa520}.switcher{display:flex;justify-content:center;align-items:center;margin-bottom:1em}.switcher--switch{width:2em;height:1em;background-color:#708090;display:flex;justify-content:flex-start;border-radius:1em;padding:.25em;cursor:pointer}.switcher--switch[data--is-on=true]{justify-content:flex-end}.switcher--switch--handle{width:1em;height:1em;background-color:ivory;border-radius:.5em}.switcher--text{display:inline-block;font-weight:bolder}.switcher--text.right{text-align:left;padding-left:.25em}.switcher--text.left{text-align:right;padding-right:.25em}.switcher--text>*{color:ivory}.resizer-item{border:0;width:1.5em;height:1.5em;color:ivory;background-color:transparent;display:inline-block;font-size:16px;cursor:pointer}.resizer-item:active{opacity:.5}.resizer{display:flex;justify-content:center}.resizer--content{width:4.5em;height:4.5em;align-items:center}.resizer--content--center{margin-left:1.5em;margin-right:1.5em}.resizer--content--left{margin-right:.75em}.resizer--content--right{margin-left:.75em}.current-size{color:ivory;font-weight:bolder;text-align:center;font-size:12px;margin-top:1em}.color-picker{display:inline-flex;width:4em;height:2em;background-color:#708090;border-radius:.25em;position:relative}.color-picker--button{border:0;width:2em;height:2em;color:ivory;background-color:transparent;display:inline-block;font-size:16px;cursor:pointer}.color-picker--button--selected{color:#daa520}.color-picker--button:active{opacity:.5}.color-picker--selected-color{width:1em;height:1em;margin:.5em}.color-picker-dialog{position:absolute;top:-5em;left:6em;height:10em;overflow-x:hidden;overflow-y:scroll;background-color:#2f4f4f;border-radius:1em;padding:1em}.color-picker-dialog--group{width:20em}.color-picker-dialog--group:first-child>*{margin-top:0}.color-picker-dialog--group h3{text-transform:capitalize;color:ivory}.color-picker-dialog--button-container{display:inline-block;position:relative;border:.2em solid transparent}.color-picker-dialog--button-container--selected{border:.2em solid red}.color-picker-dialog--button{border:0;width:1.6em;height:1.6em;display:inline-block;font-size:16px;cursor:pointer;position:relative}.color-picker-dialog--button:active{opacity:.5}.color-picker-dialog--button:hover:after{visibility:visible}.color-picker-dialog--button:after{visibility:hidden;z-index:1;position:absolute;background-color:ivory;padding:0 .25em;border-radius:.25em;left:1em;top:-1.5em;content:attr(color)}.transparent-background{background-image:repeating-linear-gradient(45deg,PaleGoldenRod 25%,transparent 25%,transparent 75%,PaleGoldenRod 75%,PaleGoldenRod),repeating-linear-gradient(45deg,#eee8aa 25%,#f8f8ff 25%,#f8f8ff 75%,#eee8aa 75%,#eee8aa);background-position:0 0,.8em .8em;background-size:1.6em 1.6em}.divider{width:100%;height:.1em;margin-top:1em;margin-bottom:1em;border-radius:.05em;background-color:ivory}.misc-action{border:0;width:2em;height:2em;border-radius:.25em;color:ivory;background-color:transparent;display:inline-block;font-size:16px;cursor:pointer}.misc-action:active{opacity:.5}.preview{position:absolute;width:100vw;height:100vh;background-color:ivory;top:0;left:0;display:flex;justify-content:center;align-items:center}.preview--container{position:absolute;top:75%;display:flex;left:0;right:0;gap:1em;justify-content:center}.preview--button{width:10em;padding:1em 2em;text-align:center;text-transform:uppercase;transition:.5s;background-size:200% auto;color:ivory;border-radius:2em;border:0;box-shadow:2px 2px #add8e6;background-image:linear-gradient(to right,#483d8b,#ba55d3 51%,#eee8aa);position:relative}.preview--button:hover{background-position:right center;box-shadow:5px 5px #add8e6}.item{border:0;width:2em;height:2em;border-radius:.25em;color:ivory;background-color:transparent;display:inline-block;font-size:16px;cursor:pointer}.item--selected{color:#daa520}.item:active{opacity:.5}.layout-action{border:0;width:2em;height:2em;border-radius:.25em;color:ivory;background-color:transparent;display:inline-block;font-size:16px;cursor:pointer}.layout-action--selected{color:#daa520}.layout-action:active{opacity:.5}.react-transform-wrapper[class*=transform-component-module_wrapper]{overflow:initial}.paint-area{flex-direction:row;background-color:#f8f8ff;background-image:repeating-linear-gradient(45deg,PaleGoldenRod 25%,transparent 25%,transparent 75%,PaleGoldenRod 75%,PaleGoldenRod),repeating-linear-gradient(45deg,#eee8aa 25%,#f8f8ff 25%,#f8f8ff 75%,#eee8aa 75%,#eee8aa)}.paint-area--row{position:relative;display:flex;margin:0;padding:0}.paint-area--pixel{display:block;position:relative}.paint-area--pixel--border{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;border-width:1px;border-style:solid;border-top-color:#000;border-left-color:#000;border-right-color:ivory;border-bottom-color:ivory}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;width:100vw;height:100vh;background-color:#eee8aa}#root{width:100%;height:100%}button{vertical-align:top}