*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;font-family:Comic Sans MS,Chalkboard SE,Marker Felt,cursive,sans-serif;background:linear-gradient(135deg,#a8e6ff,#ffe0f0,#fff5cc);color:#333}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1rem}h1{font-size:2rem;color:#ff6b9d;text-shadow:2px 2px 0 #ffd166;margin-bottom:.5rem;text-align:center}.controls{display:flex;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap;justify-content:center;align-items:center}.shape-btn{padding:.5rem 1.2rem;border:3px solid #ff6b9d;border-radius:2rem;background:#fff;color:#ff6b9d;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s}.shape-btn:hover{background:#ff6b9d;color:#fff;transform:scale(1.05)}.shape-btn.active{background:#ff6b9d;color:#fff;box-shadow:0 3px 10px #ff6b9d66}.clear-btn{padding:.5rem 1.2rem;border:3px solid #ffd166;border-radius:2rem;background:#fff;color:#e6a800;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s}.clear-btn:hover{background:#ffd166;color:#fff;transform:scale(1.05)}.palette{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap;justify-content:center;padding:.75rem 1.5rem;background:#fff;border-radius:2rem;box-shadow:0 4px 15px #0000001a}.color-swatch{width:36px;height:36px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .2s;box-shadow:0 2px 5px #00000026}.color-swatch:hover{transform:scale(1.2)}.color-swatch.selected{border-color:#333;transform:scale(1.25);box-shadow:0 3px 10px #0000004d}.canvas-area{background:#fff;border-radius:1.5rem;padding:1.5rem;box-shadow:0 8px 30px #0000001f;max-width:90vw;overflow:auto}.canvas-area svg{display:block;max-width:100%;height:auto}.canvas-area svg path,.canvas-area svg ellipse,.canvas-area svg rect,.canvas-area svg circle,.canvas-area svg polygon{cursor:pointer;transition:opacity .15s;stroke:#555;stroke-width:2}.canvas-area svg path:hover,.canvas-area svg ellipse:hover,.canvas-area svg rect:hover,.canvas-area svg circle:hover,.canvas-area svg polygon:hover{opacity:.8;stroke-width:3}.hint{margin-top:.75rem;font-size:.9rem;color:#888;text-align:center}