:root{--bg: #e8e4df;--surface: #f5f3f0;--surface-hover: #eae8e4;--border: #d5d0ca;--text: #2c2a28;--text-dim: #6b6660;--text-muted: #9e9891;--accent: #c05d3e;--accent-bg: #c05d3e18;--radius: 6px}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:Outfit,system-ui,sans-serif;font-weight:400;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:24px;gap:12px}.app h1{font-family:Caveat,cursive;font-size:28px;font-weight:500;color:var(--text);letter-spacing:.02em;-webkit-user-select:none;user-select:none}.toolbar{display:flex;gap:4px;align-items:center;padding:5px 8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap}.toolbar-section{display:flex;gap:3px;align-items:center;padding:0 3px}.toolbar-divider{width:1px;height:20px;background:var(--border);flex-shrink:0}.tool-btn{padding:4px 10px;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--text-dim);cursor:pointer;font-family:Outfit,system-ui,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.02em;line-height:1;transition:background .12s,color .12s;white-space:nowrap;-webkit-user-select:none;user-select:none}.tool-btn:hover{background:var(--surface-hover);color:var(--text)}.tool-btn.active{background:var(--accent-bg);color:var(--accent)}.tool-btn:disabled{opacity:.3;cursor:default;pointer-events:none}.current-color{width:26px;height:26px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;cursor:pointer;padding:0;background:none;overflow:hidden}.current-color::-webkit-color-swatch-wrapper{padding:0}.current-color::-webkit-color-swatch{border:none;border-radius:50%}.color-palette{display:flex;gap:3px;align-items:center}.color-swatch{width:20px;height:20px;border:1.5px solid var(--border);border-radius:50%;cursor:pointer;transition:border-color .12s;padding:0;flex-shrink:0}.color-swatch:hover{border-color:var(--text-muted)}.line-width-section{display:flex;gap:2px;align-items:center}.width-swatch{width:28px;height:28px;border:1px solid transparent;border-radius:var(--radius);background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:background .12s}.width-swatch:hover{background:var(--surface-hover)}.width-swatch circle{fill:var(--text-dim);transition:fill .12s}.width-swatch:hover circle{fill:var(--text)}.width-swatch.active{background:var(--accent-bg)}.width-swatch.active circle{fill:var(--accent)}.bottom-toolbar{align-self:stretch;justify-content:center}.canvas-size-section{display:flex;gap:4px;align-items:center}.size-input{width:52px;padding:3px 4px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-family:Outfit,system-ui,sans-serif;font-size:12px;text-align:center;outline:none}.size-input:focus{border-color:var(--text-muted)}.size-x{font-size:11px;color:var(--text-muted);-webkit-user-select:none;user-select:none}.canvas-area{position:relative;border:1px solid var(--border);border-radius:3px;overflow:hidden;background:#fff}.canvas-area canvas{display:block;cursor:none}.resize-handle{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;z-index:2}.resize-handle:before,.resize-handle:after{content:"";position:absolute;background:var(--text-muted);border-radius:1px}.resize-handle:before{right:3px;bottom:3px;width:10px;height:1.5px;transform:rotate(-45deg);transform-origin:bottom right}.resize-handle:after{right:3px;bottom:3px;width:6px;height:1.5px;transform:rotate(-45deg) translate(2px);transform-origin:bottom right}.brush-cursor{position:absolute;border-radius:50%;border:1.5px solid rgba(80,80,80,.5);pointer-events:none;transform:translate(-50%,-50%);min-width:3px;min-height:3px}.bottom-bar{display:flex;gap:8px}.bottom-bar .tool-btn{background:var(--surface);border:1px solid var(--border)}.bottom-bar .tool-btn:hover{background:var(--surface-hover)}.bottom-bar .tool-btn.copied{background:#2a7d4f;color:#fff;border-color:#2a7d4f}.bottom-bar .save-btn{background:#2563eb;color:#fff;border-color:#2563eb}.bottom-bar .save-btn:hover{background:#1d4ed8;border-color:#1d4ed8}.loading-overlay{display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--text-dim);font-size:1.1rem}