*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background:#f4f6f9;color:#1f2937;line-height:1.5}#root{min-height:100vh}.app{min-height:100vh;padding:24px;max-width:960px;margin:0 auto;display:flex;flex-direction:column}.content{flex:1;display:flex;flex-direction:column;gap:24px}.app-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 24px;flex-wrap:wrap}.app-title{margin:0;font-size:1.75rem;font-weight:700;color:#111827}.city-search select{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:#fff;border:1px solid #d1d5db;border-radius:12px;padding:10px 40px 10px 16px;font-size:1rem;color:#1f2937;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;min-width:180px}.city-search select:focus{outline:2px solid #3b82f6;outline-offset:2px;border-color:#3b82f6}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.weather-content{display:flex;flex-direction:column;gap:24px;transition:opacity ease-in-out;opacity:1}.weather-content.fading{opacity:0}.card{background:#fff;border-radius:20px;box-shadow:0 4px 24px #0000000f;padding:24px}.current-weather{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}.current-main{display:flex;flex-direction:column;gap:12px}.city-name{margin:0;font-size:1.5rem;font-weight:600;color:#111827}.current-summary{display:flex;align-items:center;gap:16px}.current-icon{color:#f59e0b;width:64px;height:64px}.current-icon svg{width:100%;height:100%}.current-temp-block{display:flex;flex-direction:column}.current-temperature{font-size:3.5rem;font-weight:700;line-height:1;color:#111827}.current-condition{font-size:1.125rem;color:#6b7280;margin-top:4px}.current-details{display:flex;gap:32px;flex-wrap:wrap}.detail{display:flex;flex-direction:column;gap:4px;min-width:80px}.detail-label{font-size:.875rem;color:#9ca3af;text-transform:uppercase;letter-spacing:.025em}.detail-value{font-size:1.125rem;font-weight:600;color:#374151}.forecast-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.forecast-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:20px 12px}.forecast-day{font-size:.9375rem;font-weight:600;color:#4b5563}.forecast-icon{color:#60a5fa;width:40px;height:40px}.forecast-icon svg{width:100%;height:100%}.forecast-temps{display:flex;flex-direction:column;gap:2px}.forecast-high{font-size:1.125rem;font-weight:700;color:#111827}.forecast-low{font-size:.9375rem;color:#9ca3af}@media (max-width: 720px){.app{padding:16px}.app-header{flex-direction:column;align-items:flex-start;padding-bottom:16px}.app-title{font-size:1.5rem}.city-search select{width:100%}.current-weather{flex-direction:column;align-items:flex-start;gap:24px}.current-temperature{font-size:3rem}.current-details{width:100%;justify-content:space-between;gap:16px}.forecast-row{grid-template-columns:repeat(5,1fr);gap:8px}.forecast-card{padding:16px 8px}.forecast-day{font-size:.8125rem}.forecast-high{font-size:1rem}.forecast-low{font-size:.875rem}}@media (max-width: 480px){.forecast-row{grid-template-columns:repeat(3,1fr)}.forecast-card:nth-child(4),.forecast-card:nth-child(5){grid-column:span 1}}