:root{--pink: #FF69B4;--purple: #BB44FF;--blue: #4488FF;--yellow: #FFD700}*{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,#ffecd2,#fcb69f,#ff9a9e);overflow-x:hidden;user-select:none;-webkit-user-select:none}.app{max-width:600px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:1rem;min-height:100vh}.header{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:.75rem 1.25rem;border-radius:1rem;box-shadow:0 4px 20px #0000001a}.title{font-size:1.75rem;color:#ff6b6b;text-shadow:2px 2px 0 #ffd93d}.music-btn{padding:.5rem 1rem;border:none;border-radius:2rem;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;background:#eee;color:#666}.music-btn.playing{background:linear-gradient(135deg,#a8edea,#fed6e3);color:#333;animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.shape-bar{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem;background:#fff;border-radius:1rem;box-shadow:0 4px 20px #0000001a;-webkit-overflow-scrolling:touch}.shape-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem .75rem;border:3px solid transparent;border-radius:.75rem;background:#f8f8ff;cursor:pointer;transition:all .2s;min-width:60px;flex-shrink:0}.shape-btn.active{border-color:var(--pink);background:#fff0f5;transform:scale(1.1)}.shape-btn:active{transform:scale(.95)}.shape-emoji{font-size:1.5rem}.shape-name{font-size:.7rem;font-weight:700;color:#666}.canvas-wrapper{position:relative;background:#fff;border-radius:1.5rem;padding:1rem;box-shadow:0 8px 30px #00000026;flex:1;display:flex;flex-direction:column;min-height:300px}.canvas{width:100%;flex:1;border-radius:1rem;cursor:crosshair;background:#f8f8ff}.clear-btn{position:absolute;top:1.5rem;right:1.5rem;padding:.4rem .8rem;border:none;border-radius:2rem;background:#ff6b6b;color:#fff;font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .2s;z-index:2}.clear-btn:active{transform:scale(.9)}.palette{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;padding:.75rem;background:#fff;border-radius:1rem;box-shadow:0 4px 20px #0000001a}.color-btn{width:48px;height:48px;border-radius:50%;border:3px solid #fff;cursor:pointer;transition:all .15s;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.color-btn.active{transform:scale(1.25);box-shadow:0 4px 15px #0000004d;border-color:#333}.color-btn:active{transform:scale(.9)}.encouragement{text-align:center;font-size:1.1rem;font-weight:700;color:#ff6b6b;padding:.5rem;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@media(max-width:480px){.title{font-size:1.3rem}.color-btn{width:40px;height:40px}.shape-btn{min-width:50px;padding:.4rem}}