:root{font-family:Arial,sans-serif;color:#f9fafb;background:#111827}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;touch-action:none}main{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px}h1,p{margin:0}p{color:#cbd5e1}.color-palette{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:10px;background:#1e293b;border-radius:12px}.color-button{width:42px;height:42px;padding:0;background:var(--color);border:3px solid #64748b;border-radius:50%;cursor:pointer;touch-action:none}.color-button.selected{border-color:#fff;box-shadow:0 0 0 3px #38bdf8}.tool-button{min-height:42px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;color:#f8fafc;background:#475569;border:3px solid #64748b;border-radius:10px;font-weight:700;cursor:pointer;touch-action:none}.tool-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.tool-button.selected{color:#0f172a;background:#f8fafc;border-color:#38bdf8;box-shadow:0 0 0 2px #38bdf8}.clear-button{background:#b91c1c;border-color:#ef4444}.canvas-container{position:relative;width:min(600px,calc(100vw - 40px));height:min(600px,calc(100vw - 40px));max-height:calc(100vh - 140px)}canvas{display:block;width:100%;height:100%;background:#fff;border:2px solid #475569;border-radius:12px;touch-action:none}.brush-cursor{--brush-color: #000000;position:absolute;left:50%;top:50%;width:34px;height:34px;pointer-events:none;transform:translate(-8px,-25px) rotate(-12deg);filter:drop-shadow(0 1px 2px rgb(0 0 0 / 45%));opacity:0;z-index:2}.brush-cursor.visible{opacity:1}.brush-cursor svg{display:block;width:100%;height:100%;overflow:visible}.cursor-eraser-icon{display:none!important;fill:#f8fafc;stroke:#0f172a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.brush-handle{fill:#8b5e3c;stroke:#3f2a1d;stroke-width:1.5}.brush-band{fill:none;stroke:#94a3b8;stroke-width:5}.brush-bristles{fill:var(--brush-color);stroke:#0f172a;stroke-width:1.5}.brush-cursor.eraser-active.visible{opacity:1;transform:translate(-8px,-25px) rotate(-18deg)}.brush-cursor.eraser-active .cursor-brush-icon{display:none}.brush-cursor.eraser-active .cursor-eraser-icon{display:block!important}