:root{--primary-color: #fff9c4;--text-color: #5d4037;--accent-color: #fbc02d}body{margin:0;padding:0;overflow:hidden;--bg-color-main: #fff1cf;--bg-color-grad1: #ffdf90;--bg-color-grad2: #ffe7ad;--frame-bg: #ffeab5;--btn-border: #ffeab5;--btn-color: #fbc02d;--btn-hover-bg: #fbc02d;--card-bg: #fffcf7;--card-border: #ffd54f;--title-shadow: rgba(251, 192, 45, .4);background-color:var(--bg-color-main);font-family:Quicksand,sans-serif;color:var(--text-color);transition:background-color .5s ease}#app{width:100vw;min-height:100vh;display:flex;justify-content:center;align-items:center;background-image:radial-gradient(var(--bg-color-grad1) 20%,transparent 20%),radial-gradient(var(--bg-color-grad2) 20%,transparent 20%);background-position:0 0,40px 40px;background-size:80px 80px;transition:background-color .5s ease,background-image .5s ease}.content-wrapper{display:flex;flex-direction:column;align-items:center;gap:3rem;padding:2rem;z-index:10}.title{font-family:Fredoka,sans-serif;font-size:3.5rem;margin:0;margin-bottom:2rem;text-align:center;color:var(--text-color);text-shadow:4px 4px 0px var(--title-shadow);animation:fadeInDown 1.5s ease-out;letter-spacing:2px}.photo-container{display:flex;align-items:center;gap:20px;position:relative;animation:float 6s ease-in-out infinite}.nav-btn{background:#fff;border:2px solid var(--btn-border);color:var(--btn-color);font-size:2rem;width:50px;height:50px;border-radius:50%;cursor:pointer;box-shadow:0 4px 8px #0000001a;display:flex;justify-content:center;align-items:center;transition:all .2s ease;z-index:30}.nav-btn:hover{transform:scale(1.1);background:var(--btn-hover-bg);color:#fff;border-color:var(--btn-hover-bg)}.nav-btn:active{transform:scale(.95)}.polaroid{background:#fff;padding:15px 15px 40px;box-shadow:0 10px 20px #00000026;transform:rotate(-3deg);transition:transform .3s ease;position:relative}.polaroid:hover{transform:rotate(0) scale(1.02)}.photo-frame{width:300px;height:300px;background:var(--frame-bg);border-radius:2px;overflow:hidden;position:relative;box-shadow:inset 0 0 10px #0000000d;transition:background .5s ease}canvas#bg{width:100%!important;height:100%!important;outline:none;cursor:grab}canvas#bg:active{cursor:grabbing}.drag-hint{position:absolute;bottom:15px;left:50%;transform:translate(-50%);background:#ffffffd9;padding:6px 14px;border-radius:20px;font-family:Quicksand,sans-serif;font-weight:600;font-size:.85rem;color:#5d4037;pointer-events:none;box-shadow:0 4px 10px #00000014;animation:pulseHint 2s infinite ease-in-out;border:1px solid #ffeab5}@keyframes pulseHint{0%{transform:translate(-50%) scale(1);opacity:.8}50%{transform:translate(-50%) scale(1.05);opacity:1}to{transform:translate(-50%) scale(1);opacity:.8}}.tape{position:absolute;top:-15px;left:50%;transform:translate(-50%);width:100px;height:35px;background-color:#fff6;background-image:linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-size:10px 10px;box-shadow:0 1px 3px #0000001a;opacity:.8;z-index:20}.dedication{font-family:Patrick Hand,cursive;font-size:1.8rem;text-align:center;color:var(--text-color);background:var(--card-bg);padding:2rem 3rem;position:relative;border:2px dashed var(--card-border);border-radius:12px;box-shadow:0 8px 16px #5d403714;max-width:500px;line-height:1.5;animation:fadeInUp 1.5s ease-out .5s backwards;transition:background .5s ease,border-color .5s ease}.dedication:before{content:"";position:absolute;top:-12px;left:50%;transform:translate(-50%) rotate(1deg);width:90px;height:25px;background-color:#ffffffe6;background-image:linear-gradient(45deg,rgba(239,83,80,.15) 25%,transparent 25%,transparent 50%,rgba(239,83,80,.15) 50%,rgba(239,83,80,.15) 75%,transparent 75%,transparent);background-size:10px 10px;box-shadow:0 1px 3px #0000001a}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(-3deg)}}.polaroid:hover{animation-play-state:paused}@media(max-width:600px){.photo-container{gap:10px}.nav-btn{width:40px;height:40px;font-size:1.5rem}.content-wrapper{gap:1.5rem;padding:3rem;width:100%;box-sizing:border-box}.title{font-size:2.2rem;text-align:center;margin-bottom:1em}.photo-frame{width:260px;height:260px}.tape{width:80px;height:30px}.dedication{font-size:1.25rem;padding:1.5rem;margin-bottom:2rem;width:85%}#app{background-position:0 0,30px 30px;background-size:60px 60px}}