:root{--glass-bg: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .2);--text-primary: #ffffff;--text-secondary: #e0e0e0;--bg-gradient: linear-gradient(135deg, #1f1c2c, #928dab)}body{margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-gradient);height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}.app-container{perspective:1000px}.glass-card{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:24px;padding:3rem 4rem;box-shadow:0 8px 32px #0000005e;text-align:center;color:var(--text-primary);width:300px;transition:transform .3s ease}.glass-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px #00000080}.temp{font-size:4.5rem;font-weight:700;margin:0;text-shadow:2px 2px 10px rgba(0,0,0,.2)}.city{font-size:1.5rem;font-weight:500;margin:.5rem 0;letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary)}.condition{font-size:1rem;font-weight:300;margin-bottom:2rem;font-style:italic;opacity:.8}.icon-container{margin-bottom:1rem}.floating-icon{width:120px;height:120px;filter:drop-shadow(0 0 10px rgba(255,255,255,.3));animation:float 4s ease-in-out infinite}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-15px)}to{transform:translateY(0)}}.details{margin-top:2rem;border-top:1px solid var(--glass-border);padding-top:1rem;display:flex;justify-content:space-around}.detail-item{display:flex;flex-direction:column;font-size:.9rem}.loading-text,.error-text{font-size:1.2rem;letter-spacing:1.5px;animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}