*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:teal;height:100vh;font-family:MS Sans Serif,Segoe UI,Tahoma,sans-serif;font-size:11px;overflow:hidden}#app{justify-content:stretch;align-items:stretch;width:100%;height:100%;display:flex}.app{background:silver;flex-direction:column;width:100vw;height:100vh;display:flex}.titlebar{color:#fff;user-select:none;background:linear-gradient(90deg,navy,#1084d0);flex-shrink:0;justify-content:space-between;align-items:center;padding:3px 6px;font-size:12px;font-weight:700;display:flex}.titlebar-btns{gap:4px;display:flex}.titlebar-btns button{color:#000;cursor:pointer;background:silver;border:2px solid gray;border-color:#fff gray gray #fff;padding:1px 8px;font-size:11px}.titlebar-btns button:active{border-color:gray #fff #fff gray}.workspace{flex:1;display:flex;overflow:hidden}.toolbar{background:silver;border-right:2px solid gray;flex-direction:column;flex-shrink:0;align-items:center;gap:2px;width:52px;padding:4px 2px;display:flex;overflow-y:auto}.toolbar hr{border:none;border-top:1px solid gray;width:80%;margin:4px 0}.tool-btn{cursor:pointer;background:silver;border:2px solid gray;border-color:#fff gray gray #fff;justify-content:center;align-items:center;width:44px;height:28px;font-size:16px;display:flex}.tool-btn:active,.tool-btn.active{background:#b0b0b0;border-color:gray #fff #fff gray}.size-btn{cursor:pointer;background:silver;border:2px solid gray;border-color:#fff gray gray #fff;justify-content:center;align-items:center;width:44px;height:24px;display:flex}.size-btn:active,.size-btn.active{background:#b0b0b0;border-color:gray #fff #fff gray}.size-dot{background:#000;border-radius:50%;min-width:2px;min-height:2px}.canvas-area{background:gray;flex:1;justify-content:flex-start;align-items:flex-start;padding:8px;display:flex;overflow:auto}.canvas-wrap{cursor:crosshair;border:2px solid #fff;border-color:gray #fff #fff gray;display:inline-block;position:relative;overflow:visible;box-shadow:2px 2px #000}.resize-handle{z-index:10;background:#fff;border:1px solid #000;width:8px;height:8px;position:absolute}.resize-e{cursor:e-resize;top:50%;right:-5px;transform:translateY(-50%)}.resize-s{cursor:s-resize;bottom:-5px;left:50%;transform:translate(-50%)}.resize-se{cursor:se-resize;bottom:-5px;right:-5px}.resize-preview{pointer-events:none;z-index:20;border:1px dashed #000;position:absolute;top:0;left:0}canvas{image-rendering:pixelated;display:block}.overlay{pointer-events:none;position:absolute;top:0;left:0}.palette-panel{background:silver;border-left:2px solid gray;flex-direction:column;flex-shrink:0;align-items:center;gap:8px;width:116px;padding:6px 4px;display:flex}.color-preview{width:52px;height:44px;position:relative}.color-box{border:2px solid #fff;border-color:gray #fff #fff gray;width:32px;height:32px;position:absolute}.color-box.bg{bottom:0;right:0}.color-box.fg{z-index:1;cursor:pointer;top:0;left:0}.palette{grid-template-columns:repeat(4,1fr);gap:2px;display:grid}.swatch{cursor:pointer;border:1px solid gray;width:22px;height:22px;padding:0}.swatch:hover{outline-offset:-1px;outline:2px solid #fff}.custom-color{color:#000;flex-direction:column;align-items:center;gap:2px;font-size:10px;display:flex}.custom-color input[type=color]{cursor:pointer;background:0 0;border:2px solid #fff;border-color:gray #fff #fff gray;width:48px;height:24px;padding:0}.statusbar{background:silver;border-top:2px solid gray;flex-shrink:0;justify-content:space-between;align-items:center;height:22px;padding:3px 8px;font-size:11px;display:flex}.text-input{z-index:100;color:#0000;caret-color:#000;background:0 0;border:1px dashed #000;outline:none;min-width:120px;font-size:16px;display:none;position:fixed}