:root{color-scheme:light;font-family:Segoe UI,Comic Sans MS,cursive,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:linear-gradient(135deg,#fce4ec,#e8eaf6,#e0f7fa,#fff3e0);background-size:400% 400%;animation:gradientShift 15s ease infinite;color:#333;overflow-x:hidden}@keyframes gradientShift{0%,to{background-position:0% 50%}25%{background-position:100% 0%}50%{background-position:100% 100%}75%{background-position:0% 100%}}.menu-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.menu-title{font-size:3rem;background:linear-gradient(135deg,#ff6b9d,#c084fc,#60a5fa,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;text-shadow:none;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.1));animation:titleBounce 2s ease-in-out infinite}@keyframes titleBounce{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.menu-subtitle{font-size:1.2rem;color:#888;margin-bottom:2.5rem}.page-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;max-width:900px;width:100%}.page-card{background:#fff;border-radius:20px;padding:1.5rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #00000014;border:3px solid transparent;position:relative;overflow:hidden}.page-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 12px 30px #00000026}.page-card.princess{border-color:#f9a8d4}.page-card.princess:hover{background:#fdf2f8}.page-card.animal{border-color:#86efac}.page-card.animal:hover{background:#f0fdf4}.page-card.dinosaur{border-color:#fcd34d}.page-card.dinosaur:hover{background:#fffbeb}.page-card.fantasy{border-color:#a78bfa}.page-card.fantasy:hover{background:#f5f3ff}.page-card-icon{font-size:4rem;margin-bottom:.5rem;display:block}.page-card-title{font-size:1.2rem;font-weight:700;color:#555}.page-card-desc{font-size:.85rem;color:#999;margin-top:.25rem}.editor-screen{min-height:100vh;display:flex;flex-direction:column}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:2px solid rgba(0,0,0,.05);z-index:10}.editor-header h2{font-size:1.3rem;background:linear-gradient(135deg,#ff6b9d,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.back-btn{background:linear-gradient(135deg,#ff6b9d,#c084fc);color:#fff;border:none;padding:.5rem 1.2rem;border-radius:25px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.back-btn:hover{transform:scale(1.05);box-shadow:0 4px 15px #c084fc66}.editor-body{display:flex;flex:1;overflow:hidden}.sidebar{width:280px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:2px solid rgba(0,0,0,.05);overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.sidebar-section h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:#999;margin-bottom:.5rem}.color-palette{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.color-swatch{width:100%;aspect-ratio:1;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .2s;position:relative}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{border-color:#333;box-shadow:0 0 0 2px #fff,0 0 0 4px #333;transform:scale(1.15)}.color-swatch.glitter{background-image:linear-gradient(135deg,var(--swatch-color) 25%,rgba(255,255,255,.6) 50%,var(--swatch-color) 75%);background-size:200% 200%;animation:glitterShimmer 1.5s ease-in-out infinite}@keyframes glitterShimmer{0%,to{background-position:0% 0%}50%{background-position:100% 100%}}.brush-options{display:flex;flex-direction:column;gap:6px}.brush-btn{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;border:2px solid #e5e7eb;border-radius:12px;background:#fff;cursor:pointer;transition:all .2s;font-size:.9rem}.brush-btn:hover{border-color:#c084fc;background:#faf5ff}.brush-btn.active{border-color:#c084fc;background:linear-gradient(135deg,#faf5ff,#ede9fe);box-shadow:0 2px 8px #c084fc4d}.brush-btn-icon{font-size:1.3rem}.brush-size-slider{width:100%;margin-top:.5rem;accent-color:#c084fc}.sticker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.sticker-btn{font-size:1.5rem;padding:.4rem;border:2px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;transition:all .2s;text-align:center}.sticker-btn:hover{transform:scale(1.15);border-color:#fcd34d;background:#fffbeb}.sticker-btn.active{border-color:#fcd34d;background:#fef3c7;box-shadow:0 2px 8px #fcd34d4d}.action-btns{display:flex;flex-direction:column;gap:6px}.action-btn{padding:.6rem;border:2px solid #e5e7eb;border-radius:12px;background:#fff;cursor:pointer;transition:all .2s;font-size:.85rem;font-weight:600}.action-btn:hover{border-color:#60a5fa;background:#eff6ff}.action-btn.clear{border-color:#fca5a5;color:#ef4444}.action-btn.clear:hover{background:#fef2f2}.action-btn.animate-btn{border-color:#34d399;color:#059669;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 #34d39966}50%{box-shadow:0 0 0 8px #34d39900}}.canvas-container{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;overflow:hidden}.canvas-wrapper{position:relative;background:#fff;border-radius:20px;box-shadow:0 8px 40px #0000001a;overflow:visible}.coloring-svg{display:block;width:600px;height:600px;max-width:80vw;max-height:70vh}.coloring-svg path,.coloring-svg ellipse,.coloring-svg circle,.coloring-svg rect,.coloring-svg polygon{cursor:pointer;transition:fill .3s ease,filter .3s ease;stroke:#333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.coloring-svg path:hover,.coloring-svg ellipse:hover,.coloring-svg circle:hover,.coloring-svg rect:hover,.coloring-svg polygon:hover{filter:brightness(1.08);stroke-width:3}.glitter-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.glitter-particle{position:absolute;border-radius:50%;animation:glitterFloat 2s ease-in-out infinite;pointer-events:none}@keyframes glitterFloat{0%{transform:translateY(0) rotate(0) scale(1);opacity:1}50%{transform:translateY(-10px) rotate(180deg) scale(1.2);opacity:.8}to{transform:translateY(0) rotate(360deg) scale(1);opacity:1}}.sparkle-trail{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;animation:sparkleFade .6s ease-out forwards;z-index:10}@keyframes sparkleFade{0%{transform:scale(1);opacity:1}to{transform:scale(0) translateY(-20px);opacity:0}}.placed-sticker{position:absolute;font-size:2.5rem;cursor:grab;-webkit-user-select:none;user-select:none;transition:filter .2s;z-index:6;filter:drop-shadow(2px 2px 3px rgba(0,0,0,.2))}.placed-sticker:hover{filter:drop-shadow(2px 2px 6px rgba(0,0,0,.3)) brightness(1.1)}.placed-sticker.dragging{cursor:grabbing;z-index:20}.celebration-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;pointer-events:none}.confetti-piece{position:absolute;width:10px;height:10px;top:-20px;animation:confettiFall linear forwards}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(110vh) rotate(720deg);opacity:0}}.celebration-text{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;font-weight:800;background:linear-gradient(135deg,#ff6b9d,#c084fc,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:celebrationPop .6s cubic-bezier(.68,-.55,.265,1.55) forwards;z-index:101;text-align:center;pointer-events:none}@keyframes celebrationPop{0%{transform:translate(-50%,-50%) scale(0);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.animate-mode .coloring-svg path,.animate-mode .coloring-svg ellipse,.animate-mode .coloring-svg circle,.animate-mode .coloring-svg rect,.animate-mode .coloring-svg polygon{animation:breathe 3s ease-in-out infinite}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.animate-mode .placed-sticker{animation:stickerBounce 1s ease-in-out infinite}@keyframes stickerBounce{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(-5deg)}75%{transform:translateY(-4px) rotate(5deg)}}.magic-cursor{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text y='24' font-size='24'>✨</text></svg>") 16 16,crosshair}@media(max-width:768px){.editor-body{flex-direction:column}.sidebar{width:100%;flex-direction:row;flex-wrap:wrap;overflow-x:auto;overflow-y:hidden;border-right:none;border-bottom:2px solid rgba(0,0,0,.05);max-height:200px}.sidebar-section{min-width:150px}.canvas-container{padding:1rem}.coloring-svg{width:100%;height:auto}.menu-title{font-size:2rem}.page-grid{grid-template-columns:repeat(2,1fr)}}