:root{--font-heading: "Dancing Script", cursive;--font-body: "Quicksand", sans-serif;--color-sky-top: #2c3e50;--color-sky-bottom: #4ca1af;--color-snow: #e8f4f8;--color-heart: #ff6b9d;--color-heart-light: #ff8fab;--color-accent: #ffd700;--bg-gradient: linear-gradient(to bottom, #1a2a6c, #b21f1f, #fdbb2d);--bg-arctic: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)}body{margin:0;padding:0;font-family:var(--font-body);background:var(--bg-arctic);color:#333;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}#root{width:100%;min-height:100vh}*,*:before,*:after{box-sizing:border-box}.app-container{width:100vw;height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:radial-gradient(circle at 50% 10%,#eefbfb,#d9e9f3,#ffd1df);animation:bg-shift 20s infinite alternate ease-in-out}@keyframes bg-shift{0%{background-position:0% 50%}to{background-position:100% 50%}}.content{z-index:10;display:flex;flex-direction:column;align-items:center;padding:2rem;text-align:center;flex:1}.hero{flex-shrink:0}.bear-section{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.bear-wrapper{display:flex;flex-direction:column;align-items:center}.hero h1{font-family:var(--font-heading);font-size:4rem;color:#d6336c;text-shadow:2px 2px 0px #fff,0 0 20px rgba(255,182,193,.5);margin:0;line-height:1.2;animation:glow 3s ease-in-out infinite alternate}@keyframes glow{0%{text-shadow:2px 2px 0px #fff,0 0 10px rgba(255,182,193,.4)}to{text-shadow:2px 2px 0px #fff,0 0 25px rgba(255,107,157,.6)}}.polar-bear-container{width:250px;height:250px;cursor:pointer;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);position:relative;z-index:20;outline:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}.polar-bear-container:hover{transform:scale(1.05) translateY(-5px)}.polar-bear-svg{width:100%;height:100%;overflow:visible;animation:bob 4s ease-in-out infinite}.polar-bear-svg.speaking{animation:bounce .5s infinite alternate}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-5px)}}.beating-heart{transform-origin:128px 136px;animation:heartbeat 1.5s infinite ease-in-out}@keyframes heartbeat{0%,30%,60%,to{transform:scale(1)}15%{transform:scale(1.1)}45%{transform:scale(1.07)}}.click-hint{font-size:.9rem;color:#888;margin-top:10px;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}.polar-bear-container:hover .click-hint{opacity:.8;transform:translateY(0)}.message-bubble{background:#fff;padding:.8rem 1.5rem;border-radius:20px;box-shadow:0 10px 25px #0000001a;font-family:var(--font-body);font-weight:700;color:#d6336c;font-size:1.2rem;opacity:0;transform:scale(.8) translateY(10px);transition:all .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none;white-space:nowrap;border:2px solid #ffeff5;margin-bottom:.5rem;min-height:2.6rem}.message-bubble.visible{opacity:1;transform:scale(1) translateY(0)}.message-bubble:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);border-width:10px 10px 0;border-style:solid;border-color:white transparent transparent transparent}.instructions{font-size:.9rem;color:#777;opacity:.7}.floating-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:1}.floating-item{position:absolute;top:-10%;animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite;opacity:.6}.floating-item.heart{color:#ff8fab}.floating-item.snow{color:#fff;filter:drop-shadow(0 0 5px rgba(255,255,255,.8))}@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.8}90%{opacity:.8}to{transform:translateY(110vh) rotate(360deg);opacity:0}}.heart-burst{position:fixed;z-index:100;pointer-events:none;transform:translate(-50%,-50%)}.burst-heart{position:absolute;font-size:1.4rem;animation:burst .8s ease-out forwards;--angle: calc(var(--i) * 30deg)}@keyframes burst{0%{opacity:1;transform:rotate(var(--angle)) translateY(0) scale(.5)}60%{opacity:1;transform:rotate(var(--angle)) translateY(-90px) scale(1.1)}to{opacity:0;transform:rotate(var(--angle)) translateY(-130px) scale(.3)}}.footer{padding-bottom:2rem;font-size:.9rem;color:#888;z-index:10}@media(max-width:600px){.hero h1{font-size:2.8rem}.polar-bear-container{width:200px;height:200px}.message-bubble{font-size:1rem;padding:.6rem 1rem}}