:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Segoe UI,Avenir Next,Noto Sans,sans-serif}body{background:radial-gradient(circle at 100% 0,#69afef59,#0000 32%),radial-gradient(circle at 15% 85%,#addaff80,#0000 34%),linear-gradient(#b9dbf9 0%,#edf6ff 46%,#f8fcff 100%);min-height:100vh;margin:0}#root{min-height:100vh}:root{--bg-top:#d9ecff;--bg-bottom:#f5faff;--surface:#ffffffe0;--surface-strong:#fff;--line:#d9e5f2;--text:#12334a;--muted:#567189;--accent:#1d74d5;--accent-soft:#8bc4ff;--shadow:0 20px 40px #1740671f}*{box-sizing:border-box}.weather-app{gap:1rem;width:min(1120px,100%);margin:0 auto;padding:2.5rem 1rem 3rem;display:grid}.card{background:linear-gradient(180deg, var(--surface-strong), var(--surface));border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:20px}.hero{background:radial-gradient(circle at 90% 10%,#67b5ff52,#0000 30%),radial-gradient(circle at 12% 90%,#addcff5c,#0000 40%),linear-gradient(145deg,#eff8ff,#dbeeff);justify-content:space-between;align-items:center;gap:1.2rem;padding:1.6rem 1.7rem;display:flex}.eyebrow{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0;font-size:.78rem;font-weight:700}h1,h2,p{margin:0}h1{color:var(--text);margin-top:.35rem;font-size:clamp(2rem,4vw,3rem);line-height:1.05}h2{color:var(--text);font-size:1.15rem;line-height:1.2}.hero-summary{color:var(--muted);margin-top:.45rem;font-size:1rem}.last-updated{color:#6a849a;margin-top:.75rem;font-size:.84rem}.hero-temp-wrap{text-align:right;place-items:center end;gap:.2rem;display:grid}.hero-temp{color:var(--text);letter-spacing:-.04em;font-size:clamp(2.1rem,4vw,3rem);font-weight:700}.current-and-details{grid-template-columns:1fr 2fr;gap:1rem;display:grid}.current-conditions,.additional-details,.forecast{padding:1.2rem}.current-main{align-items:center;gap:1rem;margin-top:1rem;display:flex}.temp-now{color:var(--text);font-size:2.4rem;font-weight:700;line-height:1}.condition-text{color:var(--muted);max-width:24ch;margin-top:.4rem;font-size:.95rem}.details-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:.9rem;display:grid}.detail-item{background:#f6fbff;border:1px solid #e3edf7;border-radius:14px;min-height:70px;padding:.75rem .85rem}.detail-item p{color:#5d768d;font-size:.81rem}.detail-item strong{color:var(--text);margin-top:.2rem;font-size:1rem;display:block}.forecast-header{justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.forecast-header p{color:#60798f;font-size:.85rem}.forecast-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;margin-top:.95rem;display:grid}.forecast-card{background:#fbfdff;border:1px solid #e0ebf7;border-radius:14px;padding:.8rem;transition:transform .2s,box-shadow .2s,border-color .2s}.forecast-card:hover{border-color:#c8ddf2;transform:translateY(-3px);box-shadow:0 10px 18px #2150781f}.forecast-top{justify-content:space-between;align-items:baseline;gap:.5rem;display:flex}.forecast-day{color:var(--text);font-size:.9rem;font-weight:600}.forecast-date{color:#63819a;font-size:.78rem}.forecast-summary{color:#5f7b90;min-height:2.3em;margin-top:.2rem;font-size:.79rem}.forecast-temp{color:var(--text);justify-content:space-between;align-items:center;margin-top:.45rem;font-size:1.02rem;font-weight:700;display:flex}.forecast-temp span:last-child{color:#67839b;font-weight:600}.precip{color:#4f81ad;margin-top:.3rem;font-size:.8rem}.icon{stroke:var(--accent);fill:#0000;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.hero-icon{width:62px;height:62px}.current-icon{width:58px;height:58px}.forecast-icon{width:36px;height:36px;margin-top:.4rem}@media (width<=980px){.current-and-details{grid-template-columns:1fr}.forecast-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=700px){.weather-app{padding-top:1.2rem}.hero{flex-direction:column;align-items:flex-start}.hero-temp-wrap{text-align:left;justify-items:start}.forecast-header{flex-direction:column;align-items:flex-start}.forecast-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=460px){.forecast-grid,.details-grid{grid-template-columns:1fr}}
