button{padding:0;cursor:pointer;background-color:#fff;color:#000;border:none;font-size:16px}.dark-mode button{background-color:#000;color:#fff}button:hover{background-color:gray}:root{--bg-color: white;--text-color: black;-webkit-user-select:none;user-select:none}.dark-mode{--bg-color: black;--text-color: white}body{margin:0;background-color:var(--bg-color);color:var(--text-color);text-align:center;display:grid;grid-template-rows:auto 1fr auto;min-height:100vh}main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:1.5rem 0}.drawing-controls{display:flex;flex-direction:column;gap:.5rem;align-items:center;margin-bottom:1rem}.drawing-area{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;height:100%}.panel-anchor{position:relative;display:inline-flex;align-items:center}.left-section{margin-right:1rem}.left-content{display:flex;flex-direction:column;align-items:center;justify-content:center}.center-section{display:flex;align-items:center;justify-content:center}.right-section{display:flex;flex-direction:column;gap:16px;margin-left:2rem}.color-palette{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(11,1fr);gap:2px;width:80px;height:200px;background-color:#f0f0f0;padding:8px}.color-swatch{width:100%;height:100%;cursor:pointer}.palette-controls{display:flex;gap:20px;margin-top:8px;justify-content:center}.edit-overlay{position:fixed;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;pointer-events:none;z-index:1000;width:20px;height:20px}select{padding:0;cursor:pointer;background-color:#fff;color:#000;border:none;font-size:16px}.dark-mode select{background-color:#000;color:#fff}select:hover{background-color:gray}.brush-size-controls{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:8px}.brush-sizes{display:flex;gap:4px}.brush-size.active,.brush-type.active{background-color:gray!important}.brush-types{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:4px;margin-top:8px;width:60px}#load-input{display:none}.save-input-container{display:flex;align-items:center;gap:.5rem;background-color:var(--bg-color);position:absolute;bottom:1.5rem;min-width:9rem;pointer-events:auto}.save-input-container.hidden{display:none}.save-input-container input{background-color:var(--bg-color);color:var(--text-color);font-size:16px;width:100%;border:none;padding:0;margin:0;caret-color:#00f}.save-input-container input:focus{outline:none;box-shadow:none}.save-input-container input::placeholder{color:gray}.dark-mode .save-input-container input{background-color:#000;color:#fff;caret-color:red}.dark-mode .save-input-container input::placeholder{color:gray}.save-error{color:var(--text-color);font-size:.85rem;text-align:left}.save-error.hidden{display:none}#canvas-stack{position:relative;width:80vmin;height:80vmin;background-color:#e0e0e0;border:1px solid var(--text-color);touch-action:none}.dark-mode #canvas-stack{background-color:#202020}.drawing-layer{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.layers-section{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:8px}.layer-item{display:flex;align-items:center;gap:4px;cursor:pointer}.layer-item.active{border:2px solid var(--text-color);padding:2px}.layer-preview{width:40px;height:40px;image-rendering:pixelated}.layer-toggle-btn{font-weight:700}.layer-move-btn{font-weight:700;font-size:12px;padding:2px 4px;margin:1px 0}.layer-item.dragging{opacity:.5}.layer-item.drag-over{outline:2px dashed var(--text-color)}.layer-drop-zone{width:100%;height:8px;background:transparent;transition:background .2s}.layer-drop-zone.drag-over{background:var(--text-color, #000000);opacity:.2}.dual-color-controls{display:flex;align-items:center;gap:8px;margin-top:8px}.color-display{width:100%;height:100%;border:none;cursor:pointer;box-sizing:border-box}.color-divider{font-size:18px}.color-switch-bg{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:80px;height:40px;padding:4px;box-sizing:border-box}input[type=range]{accent-color:blue}.dark-mode input[type=range]{accent-color:red}