@import "https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&display=swap";:root{--bg-primary:#f5f5f5;--text-main:#1e293b;--text-secondary:#475569;--text-muted:#94a3b8;--primary:#334155;--accent:#64748b;--glass-bg:#ffffffb3;--glass-border:#fffc;--card-shadow:0 30px 60px -12px #0000000d, 0 18px 36px -18px #00000008;--transition-smooth:all .6s cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-main);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;overflow-x:hidden}#root{width:100%}.app-wrapper{flex-direction:column;align-items:center;min-height:100vh;padding:3rem 1.5rem;display:flex;position:relative}.main-content{z-index:10;width:100%;max-width:650px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.text-right{text-align:right}.w-full{width:100%}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.atmosphere-base{z-index:-1;background-color:var(--bg-primary);width:100%;height:100%;transition:var(--transition-smooth);position:fixed;top:0;left:0}.atmosphere-overlay{opacity:.15;mix-blend-mode:multiply;background-position:50%;background-size:cover;width:100%;height:100%;transition:opacity 1s ease-in-out,background-image 1s ease-in-out;position:absolute;top:0;left:0}.grain-overlay{z-index:1000;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");width:100%;height:100%;position:fixed;top:0;left:0}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px)saturate(180%);border:1px solid var(--glass-border);box-shadow:var(--card-shadow);transition:var(--transition-smooth);border-radius:32px}.glass-card:hover{transform:translateY(-4px);box-shadow:0 40px 80px -12px #00000014}.search-form{margin-bottom:3rem}.search-input-group{align-items:center;gap:1rem;padding:.5rem .5rem .5rem 1.5rem;display:flex}.search-input{color:var(--text-main);background:0 0;border:none;outline:none;flex:1;padding:.5rem 0;font-size:1.125rem;font-weight:500}.search-button{color:#fff;cursor:pointer;background-color:#1e293b;border:none;border-radius:20px;padding:.75rem 2rem;font-weight:600;transition:all .2s}.search-button:hover:not(:disabled){background-color:#334155}.search-button:disabled{opacity:.5;cursor:not-allowed}.details-grid{border-top:1px solid #fff6;grid-template-columns:repeat(3,1fr);gap:2rem;padding-top:2.5rem;display:grid}.detail-item{text-align:center;flex-direction:column;align-items:center;display:flex}.icon-circle{border-radius:1.5rem;justify-content:center;align-items:center;width:3rem;height:3rem;margin-bottom:.75rem;display:flex}.bg-blue{color:#3b82f6;background-color:#eff6ff}.bg-slate{color:#64748b;background-color:#f8fafc}.bg-orange{color:#f97316;background-color:#fffaf0}.temp-large{letter-spacing:-.05em;color:var(--text-main);margin:1rem 0;font-size:clamp(6rem,15vw,9rem);font-weight:200;line-height:1}.location-title{letter-spacing:-.02em;font-size:2rem;font-weight:600}.label-caps{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-size:.75rem;font-weight:600}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-error{color:#ef4444}.animate-entrance{animation:1.2s cubic-bezier(.16,1,.3,1) forwards entrance}@keyframes entrance{0%{opacity:0;transform:translateY(30px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.stagger-1{animation-delay:.1s}.stagger-2{animation-delay:.2s}.stagger-3{animation-delay:.3s}.animate-spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width<=640px){.temp-large{font-size:5rem}.location-title{font-size:1.5rem}.details-grid{grid-template-columns:1fr;gap:1.5rem}}
