@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap";*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{font-family:Manrope,sans-serif;line-height:1.4}:root{--bg-start:#dceeff;--bg-end:#f6fbff;--surface:#ffffffb8;--surface-strong:#fff;--text-primary:#133247;--text-secondary:#4d6b82;--line:#1f5f8a2e;--sun:#ffcc4d;--rain:#2f84c7;--cloud:#c6d5e2;--shadow:0 20px 45px #1042661f}.app-shell{min-height:100vh;color:var(--text-primary);background:linear-gradient(145deg, var(--bg-start), var(--bg-end));transition:background .45s;position:relative;overflow:hidden}.backdrop{pointer-events:none;background:radial-gradient(circle at 15% 20%,#ffffff80,#0000 38%),radial-gradient(circle at 80% 10%,#add0f173,#0000 42%),radial-gradient(circle at 60% 100%,#cde7ff59,#0000 45%);position:absolute;inset:0}.weather-app{z-index:1;gap:1.2rem;width:min(1100px,92vw);margin:0 auto;padding:3.2rem 0 2.8rem;display:grid;position:relative}.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:24px}.hero{grid-template-columns:1.4fr 1fr;align-items:center;gap:1rem;padding:2rem;animation:.6s rise-in;display:grid}.kicker{letter-spacing:.09em;text-transform:uppercase;color:var(--text-secondary);margin:0;font-size:.88rem}h1{margin:.35rem 0 .9rem;font-family:Space Grotesk,sans-serif;font-size:clamp(2rem,5vw,3.4rem);line-height:1}.hero-condition{color:var(--text-secondary);margin:0;font-size:1.08rem}.hero-temp{align-items:baseline;gap:.8rem;margin:.9rem 0 0;display:flex}.hero-temp strong{letter-spacing:-.02em;font-size:clamp(2.1rem,6vw,3.5rem);font-weight:700}.hero-temp span{color:var(--text-secondary);font-size:1.15rem}.hero-range{color:var(--text-secondary);margin:.35rem 0 0}.hero-icon-wrap{justify-self:center;width:min(220px,60vw);animation:3.6s ease-in-out infinite drift}.hero-icon-wrap svg{width:100%;display:block}.section-heading{justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.1rem;display:flex}.section-heading h2{margin:0;font-family:Space Grotesk,sans-serif;font-size:1.6rem}.section-heading p{color:var(--text-secondary);margin:0}.forecast{padding:1.4rem}.forecast-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.9rem;display:grid}.day-card{background:var(--surface-strong);border:1px solid var(--line);border-radius:18px;padding:.85rem;transition:transform .22s,box-shadow .22s}.day-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px #19537e26}.day-top{justify-content:space-between;align-items:center;display:flex}.day-label{margin:0;font-weight:700}.day-date,.day-condition,.temp-f,.precip,.detail-card>p{color:var(--text-secondary);margin:0}.day-date{font-size:.85rem}.day-icon{width:38px}.day-icon svg{width:100%;display:block}.day-condition{margin-top:.65rem;font-size:.9rem}.temp-c{margin:.5rem 0 0;font-weight:700}.temp-f{font-size:.88rem}.precip{margin-top:.5rem;font-size:.84rem}.details{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;display:grid}.detail-card{padding:1.1rem 1.2rem}.detail-card h3{margin:0 0 .35rem;font-family:Space Grotesk,sans-serif;font-size:1.1rem}.detail-value{color:var(--text-primary);margin:0 0 .35rem;font-size:1.8rem;font-weight:700}.theme-sunny{--bg-start:#cbe7ff;--bg-end:#f4fbff}.theme-partly-cloudy{--bg-start:#d9eafd;--bg-end:#eff6fc}.theme-cloudy{--bg-start:#dfe8f2;--bg-end:#eff4fa}.theme-rain{--bg-start:#c7dcf0;--bg-end:#e6eef7}.icon-cloud{fill:var(--cloud)}.icon-sun-core,.icon-sun-soft{fill:var(--sun)}.icon-sun-soft{opacity:.75}.icon-ray-group line{stroke:#f9c43f;stroke-width:3px;stroke-linecap:round}.icon-rain-group line{stroke:var(--rain);stroke-width:3px;stroke-linecap:round}@media (width<=980px){.hero{grid-template-columns:1fr}.hero-icon-wrap{width:160px}.forecast-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.details{grid-template-columns:1fr}}@media (width<=640px){.weather-app{width:min(95vw,1100px);padding:1.5rem 0 1.6rem}.hero,.forecast,.detail-card{border-radius:20px}.hero{padding:1.35rem}.section-heading{flex-direction:column;align-items:start}.forecast-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@keyframes rise-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes drift{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}