body{min-height:100vh;position:relative;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.4)}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,var(--gradient-start, #0052cc) 0%,var(--gradient-mid, #2566c9) 25%,var(--gradient-start, #0077ff) 50%,var(--gradient-mid, #2566c9) 75%,var(--gradient-start, #0052cc) 100%);background-size:400% 400%;animation:gradientFlow 8s ease infinite;z-index:-1;opacity:.9;transition:opacity .5s ease;will-change:transform,opacity}body.loaded:before{opacity:1}body[data-theme=ocean]{--gradient-start: #0066cc;--gradient-mid: #4d94ff}body[data-theme=sunset]{--gradient-start: #e65c00;--gradient-mid: #ff8533}body[data-theme=forest]{--gradient-start: #1a8d1a;--gradient-mid: #2eb82e}body[data-theme=aurora]{--gradient-start: #4a148c;--gradient-mid: #7b1fa2}body{transition:--gradient-start .5s ease,--gradient-mid .5s ease}.container{min-height:100vh;padding:1rem;display:flex;flex-direction:column;gap:1rem;max-width:1200px;margin:0 auto}h1,h2,h3,h4,h5,h6{font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,.5);letter-spacing:.5px}button,input{text-shadow:none;font-weight:500}button{font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.3)}input::-moz-placeholder{color:#fffc;font-weight:500}input::placeholder{color:#fffc;font-weight:500}input{color:#fff;font-weight:500}.search-section{display:flex;gap:.5rem;justify-content:center;padding:.5rem}#searchInput{max-width:300px}.weather-card{background:#fff3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);padding:1.5rem;border-radius:1rem;text-align:center;transition:all .3s ease;margin:.5rem auto;max-width:800px;transform:translateZ(0);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}.weather-card h2{font-size:1.5rem!important;margin-bottom:.5rem!important}.weather-card .text-6xl{font-size:2.5rem!important;margin-bottom:.5rem!important}.weather-card .text-5xl{font-size:2rem!important;margin-bottom:.5rem!important}.weather-card .text-xl{font-size:1.1rem!important;margin-bottom:.5rem!important}.weather-card{transform-origin:center;will-change:transform}.weather-card.bounce-in{animation:cardBounce .8s cubic-bezier(.68,-.55,.265,1.55) forwards}@keyframes cardBounce{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.detail-box{padding:.5rem;font-size:.9rem!important;transform:translateZ(0);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}.detail-box i{font-size:1.2rem;margin-bottom:.2rem}.forecast-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;margin-top:.5rem}.forecast-card{padding:.75rem;font-size:.9rem;transform:translateZ(0);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}.forecast-card i{font-size:1.5rem;margin:.3rem 0}.weather-icon{filter:drop-shadow(0 0 10px rgba(255,255,255,.3))}.theme-transition{transition:all .5s ease-in-out}.temp-transition{transition:all .3s ease-in-out}.animate-fade-in{animation:fadeIn .8s ease-out forwards}.animate-bounce-in{animation:bounceIn .8s cubic-bezier(.68,-.55,.265,1.55) forwards}.animate-float{animation:float 3s ease-in-out infinite}.animate-shake{animation:shake .5s ease-in-out}.text-white{color:#fff!important;text-shadow:0 2px 4px rgba(0,0,0,.4)}.text-white-80{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.3);opacity:.9}.puzzle-card{position:relative;perspective:1000px;transform-style:preserve-3d;will-change:transform}.puzzle-piece{position:relative;transform-style:preserve-3d;will-change:transform;transform-origin:center center}.puzzle-card.animating .piece1{animation:puzzlePiece1 1.2s cubic-bezier(.4,0,.2,1) forwards}.puzzle-card.animating .piece2{animation:puzzlePiece2 1.2s cubic-bezier(.4,0,.2,1) forwards}.puzzle-card.animating .piece3{animation:puzzlePiece3 1.2s cubic-bezier(.4,0,.2,1) forwards}@keyframes puzzlePiece1{0%{transform:translateZ(0) rotateX(0) rotateY(0)}50%{transform:translate3d(-100px,-50px,100px) rotateX(45deg) rotateY(-30deg);opacity:.3}to{transform:translateZ(0) rotateX(0) rotateY(0)}}@keyframes puzzlePiece2{0%{transform:translateZ(0) rotateX(0) rotateY(0)}50%{transform:translate3d(100px,-25px,100px) rotateX(-45deg) rotateY(30deg);opacity:.3}to{transform:translateZ(0) rotateX(0) rotateY(0)}}@keyframes puzzlePiece3{0%{transform:translateZ(0) rotateX(0) rotateY(0)}50%{transform:translate3d(0,100px,100px) rotateX(-60deg) rotateY(45deg);opacity:.3}to{transform:translateZ(0) rotateX(0) rotateY(0)}}.puzzle-card.animating:after{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.4),transparent 70%);opacity:0;animation:glowPulse 1.2s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none;border-radius:inherit}.puzzle-card.animating.enter{animation:cardEnter 1.5s cubic-bezier(.4,0,.2,1) forwards}.puzzle-card.animating.enter .piece1{animation:enterPiece1 1.5s cubic-bezier(.4,0,.2,1) forwards}.puzzle-card.animating.enter .piece2{animation:enterPiece2 1.5s cubic-bezier(.4,0,.2,1) forwards}.puzzle-card.animating.enter .piece3{animation:enterPiece3 1.5s cubic-bezier(.4,0,.2,1) forwards}.puzzle-card.animating.exit{animation:cardExit 1.5s cubic-bezier(.4,0,.2,1) forwards}.puzzle-card.animating.exit .piece1{animation:exitPiece1 1.5s cubic-bezier(.4,0,.2,1) forwards}.puzzle-card.animating.exit .piece2{animation:exitPiece2 1.5s cubic-bezier(.4,0,.2,1) forwards}.puzzle-card.animating.exit .piece3{animation:exitPiece3 1.5s cubic-bezier(.4,0,.2,1) forwards}@keyframes cardEnter{0%{opacity:0}to{opacity:1}}@keyframes cardExit{0%{opacity:1}to{opacity:0}}@keyframes enterPiece1{0%{transform:translate3d(-100px,-50px,100px) rotate3d(1,-1,0,60deg);opacity:0}to{transform:translateZ(0) rotate3d(0,0,1,0);opacity:1}}@keyframes enterPiece2{0%{transform:translate3d(100px,-25px,100px) rotate3d(1,1,0,60deg);opacity:0}to{transform:translateZ(0) rotate3d(0,0,1,0);opacity:1}}@keyframes enterPiece3{0%{transform:translate3d(0,100px,100px) rotate3d(-1,0,1,60deg);opacity:0}to{transform:translateZ(0) rotate3d(0,0,1,0);opacity:1}}@keyframes exitPiece1{0%{transform:translateZ(0) rotate3d(0,0,1,0);opacity:1}to{transform:translate3d(-100px,-50px,100px) rotate3d(1,-1,0,60deg);opacity:0}}@keyframes exitPiece2{0%{transform:translateZ(0) rotate3d(0,0,1,0);opacity:1}to{transform:translate3d(100px,-25px,100px) rotate3d(1,1,0,60deg);opacity:0}}@keyframes exitPiece3{0%{transform:translateZ(0) rotate3d(0,0,1,0);opacity:1}to{transform:translate3d(0,100px,100px) rotate3d(-1,0,1,60deg);opacity:0}}.puzzle-card.animating:after{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.4),transparent 70%);opacity:0;animation:glowPulse 1.5s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none;border-radius:inherit;will-change:opacity}@keyframes glowPulse{0%{opacity:0}50%{opacity:.8}to{opacity:0}}.puzzle-card{position:relative;perspective:1000px;transform-style:preserve-3d;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}.puzzle-piece{position:relative;transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity}.puzzle-card.animating .piece1{animation:puzzlePiece1 1.5s cubic-bezier(.4,0,.2,1) both}.puzzle-card.animating .piece2{animation:puzzlePiece2 1.5s cubic-bezier(.4,0,.2,1) both}.puzzle-card.animating .piece3{animation:puzzlePiece3 1.5s cubic-bezier(.4,0,.2,1) both}@keyframes puzzlePiece1{0%,to{transform:translateZ(0) rotate3d(0,0,1,0);opacity:1}50%{transform:translate3d(-100px,-50px,100px) rotate3d(1,-1,0,60deg);opacity:.3}}@keyframes puzzlePiece2{0%,to{transform:translateZ(0) rotate3d(0,0,1,0);opacity:1}50%{transform:translate3d(100px,-25px,100px) rotate3d(1,1,0,60deg);opacity:.3}}@keyframes puzzlePiece3{0%,to{transform:translateZ(0) rotate3d(0,0,1,0);opacity:1}50%{transform:translate3d(0,100px,100px) rotate3d(-1,0,1,60deg);opacity:.3}}.puzzle-card.animating:after{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.4),transparent 70%);opacity:0;animation:glowPulse 1.5s cubic-bezier(.4,0,.2,1) both;pointer-events:none;border-radius:inherit;will-change:opacity}@keyframes glowPulse{0%,to{opacity:0}50%{opacity:.8}}@keyframes puzzlePiece1{0%{transform:translateZ(0) rotateX(0) rotateY(0);opacity:1}20%{transform:translate3d(-120px,-60px,50px) rotateX(45deg) rotateY(-30deg);opacity:.3}80%{transform:translate3d(60px,30px,25px) rotateX(-22deg) rotateY(15deg);opacity:.7}to{transform:translateZ(0) rotateX(0) rotateY(0);opacity:1}}@keyframes puzzlePiece2{0%{transform:translateZ(0) rotateX(0) rotateY(0);opacity:1}20%{transform:translate3d(120px,-30px,50px) rotateX(-45deg) rotateY(30deg);opacity:.3}80%{transform:translate3d(-60px,15px,25px) rotateX(22deg) rotateY(-15deg);opacity:.7}to{transform:translateZ(0) rotateX(0) rotateY(0);opacity:1}}@keyframes puzzlePiece3{0%{transform:translateZ(0) rotateX(0) rotateY(0);opacity:1}20%{transform:translate3d(0,120px,50px) rotateX(-60deg) rotateY(45deg);opacity:.3}80%{transform:translate3d(0,-60px,25px) rotateX(30deg) rotateY(-22deg);opacity:.7}to{transform:translateZ(0) rotateX(0) rotateY(0);opacity:1}}@keyframes locationChange{0%{transform:scale(1) translateY(0);opacity:1}20%{transform:scale(.9) translateY(20px);opacity:0}40%{transform:scale(.8) translateY(-40px);opacity:0}80%{transform:scale(.95) translateY(10px);opacity:.5}to{transform:scale(1) translateY(0);opacity:1}}.location-change{animation:locationChange .8s cubic-bezier(.4,0,.2,1) forwards}@keyframes loadIn{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.load-in{animation:loadIn .5s ease-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes flipInX{0%{transform:perspective(2000px) rotateX(90deg) translateY(-100px) scale(.8);opacity:0;filter:blur(10px)}30%{transform:perspective(2000px) rotateX(-35deg) translateY(40px) scale(1.1);opacity:.7;filter:blur(0px)}50%{transform:perspective(2000px) rotateX(15deg) translateY(-20px) scale(.95);opacity:.8}70%{transform:perspective(2000px) rotateX(-7deg) translateY(10px) scale(1.02);opacity:.9}to{transform:perspective(2000px) rotateX(0) translateY(0) scale(1);opacity:1}}.weather-update{animation:flipInX 1.5s cubic-bezier(.68,-.55,.265,1.55) forwards;backface-visibility:visible!important;transform-style:preserve-3d;transform-origin:center top}@keyframes slideUpFade{0%{transform:translateY(50px) scale(.8);opacity:0;filter:blur(5px)}to{transform:translateY(0) scale(1);opacity:1;filter:blur(0)}}.forecast-card{animation:slideUpFade .8s cubic-bezier(.68,-.55,.265,1.55) forwards;opacity:0}.weather-update,.forecast-card{box-shadow:0 15px 35px -15px #00000080,0 5px 15px -5px #0003;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1)}.weather-update:hover,.forecast-card:hover{box-shadow:0 25px 45px -20px #0009,0 10px 20px -10px #0000004d;border:1px solid rgba(255,255,255,.2);transform:translateY(-5px)}#forecast{opacity:1!important;display:block}#forecast.hidden{display:none}.puzzle-card.animating:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.2),transparent 70%);opacity:1;pointer-events:none;border-radius:inherit;animation:glowPulse 1s ease-in-out}@keyframes glowPulse{0%{opacity:0}50%{opacity:1}to{opacity:0}}.skeleton{background:linear-gradient(90deg,#ffffff1a,#fff3,#ffffff1a);background-size:200% 100%;animation:shimmer 1.5s infinite linear;border-radius:4px}.skeleton-text{height:20px;margin:8px 0}.skeleton-title{width:200px;height:32px}.skeleton-temp{width:120px;height:48px}.skeleton-desc{width:150px;height:24px}.skeleton-container{display:none}.loading .skeleton-container{display:block}.loading .weather-info{display:none}@keyframes gradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.hover-float:hover{animation:float 3s ease-in-out infinite}.hover-glow:hover{filter:drop-shadow(0 0 10px rgba(255,255,255,.5))}*{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.loading{position:relative}.loading:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:loading 1.5s infinite}@keyframes loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.theme-transition{transition:background-image 1s ease-in-out}.card-hover{transition:all .3s ease-in-out}.card-hover:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0003}.icon-spin{transition:transform .3s ease-in-out}.icon-spin:hover{transform:rotate(180deg)}.button-hover{transition:all .3s ease-in-out}.button-hover:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0003}.button-hover:active{transform:translateY(0)}