*{margin:0;padding:0;box-sizing:border-box}:root{--blue: #3d8bfd;--deep-blue: #1b4fa0;--yellow: #ffd23f;--pink: #ff5d8f;--ink: #23305a}html,body{font-family:"Baloo 2",Comic Sans MS,system-ui,sans-serif;color:var(--ink);background:linear-gradient(180deg,#aee3ff,#d8f0ff 45%,#ffe9f5);min-height:100%}.app{position:relative;max-width:560px;margin:0 auto;padding:16px 14px 48px;overflow-x:hidden}.floaters{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.floaters span{position:absolute;font-size:22px;opacity:.55;animation:float 9s ease-in-out infinite}.floaters span:nth-child(1){left:6%;top:12%;animation-delay:0s}.floaters span:nth-child(2){left:85%;top:8%;animation-delay:-2s}.floaters span:nth-child(3){left:70%;top:30%;animation-delay:-4s;font-size:16px}.floaters span:nth-child(4){left:12%;top:42%;animation-delay:-1s;font-size:34px}.floaters span:nth-child(5){left:90%;top:55%;animation-delay:-5s}.floaters span:nth-child(6){left:4%;top:75%;animation-delay:-3s}.floaters span:nth-child(7){left:78%;top:80%;animation-delay:-6s;font-size:30px}.floaters span:nth-child(8){left:40%;top:5%;animation-delay:-7s;font-size:14px}@keyframes float{0%,to{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-18px) rotate(8deg)}}header{position:relative;z-index:1;text-align:center;padding:8px 0 14px}header h1{font-size:clamp(1.7rem,7vw,2.4rem);font-weight:800;background:linear-gradient(90deg,var(--deep-blue),var(--blue) 40%,var(--pink) 80%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 0 rgba(255,255,255,.4);letter-spacing:.5px}.tagline{font-weight:600;color:#4a5a8a;margin-top:2px}main{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px}.canvas-section{position:relative}.canvas-frame{position:relative;width:100%;aspect-ratio:1 / 1;background:#fff;border:4px solid var(--blue);border-radius:22px;box-shadow:0 8px #1b4fa040,inset 0 0 0 2px #dcecff;overflow:hidden}.draw-canvas,.overlay-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;touch-action:none}.overlay-canvas{z-index:2}.pencil-sprite{position:absolute;z-index:3;display:none;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}.magic-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#ffffffbf;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:22px;font-weight:700;font-size:1.05rem;color:var(--deep-blue);text-align:center;padding:12px}.magic-pencil-spin{font-size:3rem;animation:spin-wobble 1.4s ease-in-out infinite}@keyframes spin-wobble{0%,to{transform:rotate(-20deg) scale(1)}50%{transform:rotate(20deg) scale(1.25)}}.toolbar{background:#ffffffd9;border:3px solid #cfe3ff;border-radius:18px;padding:10px 12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 4px #1b4fa01f}.tool-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tool-btn{font-size:1.25rem;width:42px;height:42px;border-radius:12px;border:2px solid transparent;background:#eef5ff;cursor:pointer;transition:transform .1s}.tool-btn:active{transform:scale(.88)}.tool-btn.active{border-color:var(--blue);background:#d5e7ff;box-shadow:0 0 0 3px #3d8bfd40}.tool-divider{flex:1}.color-btn{width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #d7dff0;cursor:pointer;transition:transform .1s}.color-btn.active{transform:scale(1.25);box-shadow:0 0 0 3px var(--deep-blue)}.slider-row input[type=range]{flex:1;accent-color:var(--blue)}.dot-preview{border-radius:50%;flex-shrink:0}.fill-toggle{display:flex;align-items:center;gap:4px;font-weight:700;font-size:.9rem}.description-input{font-family:inherit;font-size:1.05rem;font-weight:600;padding:14px 16px;border-radius:16px;border:3px solid #cfe3ff;background:#ffffffe6;color:var(--ink);outline:none;width:100%}.description-input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #3d8bfd33}.boom-btn{font-family:inherit;font-size:1.25rem;font-weight:800;padding:16px 18px;border:none;border-radius:20px;color:#fff;background:linear-gradient(135deg,var(--pink),#ff8f3f 55%,var(--yellow));box-shadow:0 6px #c23a68,0 10px 18px #ff5d8f66;cursor:pointer;transition:transform .1s,box-shadow .1s;text-shadow:0 2px 2px rgba(0,0,0,.2)}.boom-btn:active{transform:translateY(4px);box-shadow:0 2px #c23a68}.boom-btn.busy{animation:pulse 1.2s ease-in-out infinite;font-size:1rem}.boom-btn:disabled{cursor:wait}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.wiggle{animation:wiggle .5s ease-in-out}@keyframes wiggle{0%,to{transform:translate(0)}20%{transform:translate(-8px) rotate(-1deg)}40%{transform:translate(8px) rotate(1deg)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.gallery{background:#ffffffb3;border-radius:18px;border:3px dashed #b9d6ff;padding:14px}.gallery.empty{text-align:center;font-weight:600;color:#6b7cab}.gallery h2{font-size:1.15rem;margin-bottom:10px;color:var(--deep-blue)}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}.gallery-item{position:relative;border-radius:14px;overflow:hidden;border:3px solid #fff;box-shadow:0 3px 8px #1b4fa033;aspect-ratio:1 / 1}.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}.delete-btn{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:none;background:#23305abf;color:#fff;font-size:.65rem;cursor:pointer;line-height:1}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#141e3c8c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px}.modal{position:relative;background:linear-gradient(180deg,#fff,#f2f8ff);border-radius:24px;border:4px solid var(--yellow);padding:18px;max-width:440px;width:100%;max-height:90vh;overflow-y:auto;text-align:center;box-shadow:0 20px 60px #00000059}.sparkle-in{animation:sparkle-in .45s cubic-bezier(.34,1.56,.64,1)}@keyframes sparkle-in{0%{transform:scale(.4) rotate(-6deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.modal h2{color:var(--deep-blue);margin-bottom:10px}.result-img{width:100%;border-radius:16px;border:3px solid #dcecff}.caption{font-weight:600;color:#55659a;margin:10px 0}.modal-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.chip-btn{font-family:inherit;font-weight:700;font-size:.92rem;padding:9px 14px;border-radius:999px;border:2px solid var(--blue);background:#fff;color:var(--deep-blue);cursor:pointer;text-decoration:none}.chip-btn.close{background:var(--blue);color:#fff}.sparkles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;border-radius:20px}.spark{position:absolute;left:50%;top:40%;color:var(--yellow);text-shadow:0 0 6px #ffb703;font-size:18px;animation:burst 1.1s ease-out forwards;transform:rotate(calc(var(--i) * 30deg)) translateY(-10px)}@keyframes burst{0%{transform:rotate(calc(var(--i) * 30deg)) translateY(-10px) scale(.4);opacity:1}to{transform:rotate(calc(var(--i) * 30deg)) translateY(-190px) scale(1.4);opacity:0}}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%);z-index:30;background:var(--ink);color:#fff;font-weight:700;padding:12px 20px;border-radius:999px;box-shadow:0 8px 24px #0000004d;max-width:90vw;text-align:center;animation:toast-in .3s ease-out}@keyframes toast-in{0%{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%);opacity:1}}