#appbar{position:absolute;z-index:100000;top:0;left:0;width:100%}#header{height:44px;width:100%;background:#f5f5f5;display:flex;flex-direction:row;justify-content:start;align-items:center}#main-menu{position:fixed;z-index:500;width:200px;background:#fff;display:flex;flex-direction:column;align-items:start;padding:8px 0;box-shadow:0 2px 4px #00000040}#main-menu>button{padding:10px 12px;font-size:12px;height:44px;width:100%;display:flex;flex-direction:row;align-items:center;gap:16px;background:transparent;cursor:pointer}#main-menu>button>div{width:24px;height:24px}.sub-menu{position:fixed;z-index:500;width:88px;background:#fff;display:flex;flex-direction:column;align-items:start;padding:8px 0;box-shadow:0 2px 4px #00000040}.sub-menu>button{padding:10px 16px;font-size:12px;height:44px;width:100%;display:flex;flex-direction:row;align-items:center;gap:16px;background:transparent;cursor:pointer}.header-button{height:44px;width:44px;cursor:pointer;background:transparent;display:flex;justify-content:center;align-items:center}#menu-bar{display:flex;flex-direction:row;justify-content:start;align-items:center;padding-top:4px;padding-bottom:4px;width:100%;background:#fff;padding-left:8px;gap:8px;border-bottom:1px #E2E2E2 solid}.select-button{width:60px;height:80px;background:transparent;border-radius:8px;border:none;cursor:pointer;padding:11px 5px 8px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.select-button>p{font-size:12px}.mini-buttons{display:flex;flex-direction:column}.select-mini{width:40px;height:40px;border-radius:8px;background:transparent;cursor:pointer;border:none;display:flex;justify-content:center;align-items:center}.button-icon{width:44px;height:44px;display:flex;justify-content:center;align-items:center}.selected{background:#f5f5f5}.div-bar{height:60px;width:1px;background:#0000001a}.brush-control-group{display:flex;flex-direction:column;padding-left:4px}.brush-control{display:flex;flex-direction:row;align-items:center;height:34px}.brush-control>p{font-size:12px}.brush-control>.label{width:48px}.brush-control>.value{width:40px}.slider{-webkit-appearance:none;height:6px;background:transparent;border-radius:3px;outline:none;background:#ccc}.slider::-webkit-slider-runnable-track{border-radius:100px;height:6px;background:#ccc}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;margin-top:-5px;background:#444}#size-slider::-webkit-slider-runnable-track{background:#191919}#size-slider::-webkit-slider-thumb{background:#191919}#opacity-slider::-webkit-slider-runnable-track{background:#e3e3e3}#opacity-slider::-webkit-slider-thumb{background:#fff;border:1px solid #E3E3E3;box-sizing:border-box}.slider-area{padding-left:12px;padding-right:8px;display:flex;justify-content:center;align-items:center}#color-box{display:grid;grid-auto-flow:column;grid-auto-columns:auto;grid-template-rows:repeat(2,1fr)}.select-color{width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.circle-shape{width:24px;height:24px;border-radius:100px;background:#fafafa;border:1px solid #E3E3E3}#color-icon{width:32px;height:32px;border-radius:100px;background:#fafafa;border:1px solid #E3E3E3}html,body{margin:0;height:100%;overscroll-behavior:none;overscroll-behavior-x:none;-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-webkit-tap-highlight-color:transparent;touch-action:manipulation}p,button,h1,h2,h3,input{border:none;margin:0;padding:0}button:focus{outline:none}.body{display:flex;flex-direction:column;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;overflow:hidden}@tailwind base;@tailwind components;@tailwind utilities;*{font-family:Roboto,sans-serif}p,input,h1,h2,h3{color:#191919}*{flex-shrink:0}#container{flex:1;position:relative;display:flex;flex-direction:column;overflow:hidden}#layer-area{width:100%;height:100%;background:#e8e8e8;image-rendering:pixelated;border:none}canvas{image-rendering:pixelated;position:absolute}#canvas{z-index:1;transform-origin:top left}#draw-canvas{z-index:2}#zoom-area{background:#0d99ff20;border:1px solid rgba(13,153,255,1);position:absolute;z-index:3000;box-sizing:border-box;touch-action:none;pointer-events:none}#selection-area{border:1px dashed rgba(255,255,255,.5);position:absolute;z-index:2900;box-sizing:border-box;mix-blend-mode:difference}.handle{z-index:2901;position:absolute;width:7px;height:7px;background:#fff;border:1px solid #404040;box-sizing:border-box;touch-action:none}#handle-rt{transform:translate(-1px)}#handle-rb{transform:translate(-1px,-1px)}#handle-lb{transform:translateY(-1px)}#selection-size{display:flex;flex-direction:row;justify-content:center;align-items:center;position:absolute;z-index:2900}#selection-text{background:#c8c8c880;margin-top:16px;padding:4px 8px;border-radius:4px;font-size:12px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}#brush-cursor{background:transparent;border:1px solid black;outline:1px solid white;border-radius:10000px;position:absolute;z-index:3000;pointer-events:none;mix-blend-mode:difference}#container.grab{cursor:grab}#container.grabbing{cursor:grabbing}#container.brush{cursor:crosshair}#container.zoom{cursor:zoom-in}#container.select,#container.largeBrush{cursor:crosshair}#container.noCursor{cursor:none}#container.nwse-resize{cursor:nwse-resize}#container.nesw-resize{cursor:nesw-resize}#container.ns-resize{cursor:ns-resize}#container.ew-resize{cursor:ew-resize}#container.move{cursor:move}#cursor-position{position:absolute;display:flex;flex-direction:row;align-items:end;justify-content:start;bottom:0;left:0;padding-bottom:6px;padding-left:8px;z-index:4000}#cursor-icon{height:16px}#cursor-position>p{padding-left:4px;font-size:12px;color:#131313}#loading-indicator{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;background-color:#0003;z-index:9999;visibility:hidden}#color-menu{position:fixed;display:flex;flex-direction:column;align-items:start;justify-content:start;padding:16px 16px 24px;width:200px;background:#fff;border:1px solid #E8E8E8}#color-title-box{display:flex;flex-direction:row;align-items:center;padding-bottom:16px}#color-title{font-size:16px}#color-field{position:relative;width:200px;height:200px;background:linear-gradient(to bottom,#fff0,#000),linear-gradient(to right,rgb(255,255,255) 0%,var(--field-end-color) 100%);margin-bottom:12px;border-radius:4px}#color-picker{position:absolute;width:20px;height:20px;background:#b13e3e;border-radius:20px;border:white solid 2px;box-sizing:border-box;box-shadow:0 0 2px #00000080}.color-slider{-webkit-appearance:none;height:4px;border-radius:4px;outline:none;background:transparent;width:100%;padding:10px 0}.color-slider::-webkit-slider-runnable-track{border-radius:100px;height:4px}.color-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;margin-top:-6px}#color-h-slider::-webkit-slider-runnable-track{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}#color-h-slider::-webkit-slider-thumb{background:var(--thumb-h-color)}#color-s-slider::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--thumb-s-start-color) 0%,var(--thumb-s-end-color) 100%)}#color-s-slider::-webkit-slider-thumb{background:var(--thumb-s-color)}#color-v-slider::-webkit-slider-runnable-track{background:linear-gradient(to right,#000,#fff)}#color-v-slider::-webkit-slider-thumb{box-shadow:0 0 2px #00000080;background:var(--thumb-v-color)}#color-input-area{display:flex;flex-direction:row;width:100%;border:#E2E2E3 solid 1px;padding:3px 0;margin-top:12px;align-items:center;border-radius:4px}#color-type{padding:0 10px;font-size:12px}#color-input{font-size:12px;flex:1;border:none;outline:none;padding:0 10px}.tools-button{height:44px;width:50px;cursor:pointer;background:transparent;font-size:16px;display:flex;flex-direction:center;align-items:center}.tools-button>p{width:100%;line-height:19px}.tools-bar{width:100%;position:fixed;display:flex;flex-direction:row;background:#0000000f;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.size-button{height:44px;width:50px;cursor:pointer;background:transparent;font-size:14px;display:flex;flex-direction:center;align-items:center}.size-button>p{width:100%;line-height:19px;font-size:14px}.size-bar{position:fixed;display:flex;flex-direction:column;align-items:start;justify-content:start;padding:8px 20px;background:#fff;border:1px solid #E8E8E8}.mobile-appbar{height:44px;width:100%;display:flex;flex-direction:row;justify-content:start;align-items:center;background:#fff;border-bottom:1px solid #E8E8E8}#navigation{position:absolute;z-index:100000;bottom:0;left:0;width:100%}.mobile-navigation{height:44px;width:100%;display:flex;flex-direction:row;justify-content:start;align-items:center;background:#fff;border-top:1px solid #E8E8E8}.mobile-color-icon{width:24px;height:24px;border-radius:100px;background:#fafafa;border:1px solid #E3E3E3}.mobile-appbar .selected,.mobile-navigation .selected{background:transparent;color:#3587ff}.mobile-appbar .selected>svg>path,.mobile-navigation .selected>svg>path{fill:#3587ff}