:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#fffffff2;background:linear-gradient(135deg,#5469c3,#764ba2);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);background-attachment:fixed}a{font-weight:500;color:#a8c0ff;text-decoration:inherit}a:hover{color:#ffefba}h1{font-size:24px;line-height:1.1;text-shadow:0 2px 8px rgba(0,0,0,.3)}button{border-radius:8px;border:1px solid transparent;padding:12px 16px;font-size:14px;font-weight:500;font-family:inherit;background:#ffffff26;color:#fff;cursor:pointer;transition:all .25s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}button:hover{border-color:#a8c0ff;background:#ffffff40}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media screen and (min-width:768px){h1{font-size:32px}button{padding:14px 20px;font-size:16px}}@media screen and (min-width:1024px){h1{font-size:48px}button{padding:16px 24px;font-size:18px}}@media(prefers-color-scheme:light){:root{color:#f8f9fa;background:linear-gradient(135deg,#667eea,#764ba2)}body{background:linear-gradient(135deg,#667eea,#764ba2)}a{color:#dfe6e9}a:hover{color:#fff}button{background:#ffffff40;color:#2d3436;border:1px solid rgba(255,255,255,.3)}button:hover{background:#fff6}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}header{color:#fff;padding:16px;text-align:center}header{font-size:50px;font-weight:600}@media screen and (min-width:768px){header{padding:20px}header{font-size:50px}}@media screen and (min-width:1024px){header{padding:24px}header{font-size:50px}}.weather-card{background:#fff;border-radius:8px;padding:16px;box-shadow:0 2px 8px #0000001a;text-align:center;transition:transform .2s ease,box-shadow .2s ease;border:1px solid #e0e0e0}.weather-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.date{font-size:14px;font-weight:600;color:#2c3e50;margin-bottom:8px;text-transform:capitalize}.time{font-size:12px;font-weight:500;color:#666;margin-bottom:8px}.temp{font-size:24px;font-weight:700;color:#333;margin-bottom:12px}.weather-card img{width:50px;height:50px;margin:0 auto 8px}.description{font-size:14px;color:#555;text-transform:capitalize;margin-top:4px}@media screen and (min-width:768px){.weather-card{padding:20px;border-radius:12px}.date{font-size:16px}.time{font-size:14px}.temp{font-size:28px;margin-bottom:16px}.weather-card img{width:60px;height:60px;margin-bottom:12px}.description{font-size:16px}}@media screen and (min-width:1024px){.weather-card{padding:24px}.date{font-size:18px}.time{font-size:14px}.temp{font-size:32px}.weather-card img{width:70px;height:70px}.description{font-size:16px}}.weatherlist{padding:16px;max-width:1200px;margin:0 auto}.weatherlist h1{text-align:center;font-size:24px;margin-bottom:24px;color:#0b0b0b}.weatherlist form{display:flex;gap:8px;margin-bottom:24px;justify-content:center}.weatherlist input{padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;width:200px}.weatherlist button{padding:8px 16px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px}.weatherlist button:hover{background-color:#0056b3}.weatherlist h2{text-align:center;font-size:20px;margin-bottom:24px;color:#212121}.cities{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;list-style:none;padding:0;margin:0}.spinner-center{display:flex;justify-content:center;align-items:center;height:100vh;width:100%}@media screen and (min-width:768px){.weatherlist{padding:24px}.weatherlist h1{font-size:32px;margin-bottom:32px}.weatherlist input{width:300px;font-size:16px;padding:12px 16px}.weatherlist button{padding:12px 24px;font-size:16px}.cities{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}}@media screen and (min-width:1024px){.weatherlist{padding:32px}.weatherlist h1{font-size:36px;margin-bottom:40px}.cities{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}}.footer{color:#fff;padding:16px;text-align:center;margin-top:auto}.footerText{font-size:12px;margin:4px 0;color:#ecf0f1}@media screen and (min-width:768px){.footer{padding:20px}.footerText{font-size:14px;margin:6px 0}}@media screen and (min-width:1024px){.footer{padding:24px;display:flex;justify-content:center;align-items:center;gap:32px}.footerText{font-size:16px;margin:0}}