*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:40px 20px}.container{max-width:800px;margin:0 auto;background:#fff;padding:40px;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3)}.container h1{font-size:2.2rem;margin-bottom:30px;color:#1f2937}input[type=text]{width:100%;padding:14px 16px;margin-bottom:14px;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;transition:border-color .3s ease,box-shadow .3s ease}input[type=text]:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1)}input[type=text]::placeholder{color:#9ca3af}button{cursor:pointer;font-weight:600;transition:all .3s ease}.weather-button{width:100%;padding:14px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:16px;margin-bottom:20px}.weather-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 25px rgba(102,126,234,.3)}.weather-button:disabled{opacity:.7;cursor:not-allowed}.error-message{color:#dc2626;background:#fee2e2;padding:12px 16px;border-radius:8px;margin-bottom:16px;border-left:4px solid #dc2626}.weather-result{background:#f9fafb;padding:24px;border-radius:12px;margin-bottom:20px;border:1px solid #e5e7eb}.weather-result h2{font-size:1.5rem;margin-bottom:16px;color:#1f2937}.weather-result p{margin-bottom:10px;color:#4b5563;font-size:1.05rem}.weather-result img{margin-top:12px}.toggle-button{width:100%;margin-top:20px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;padding:14px 20px;border-radius:8px;font-size:16px;font-weight:600}.toggle-button:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(37,99,235,.3)}.project-info{margin-top:20px;padding:32px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:0 4px 20px rgba(15,23,42,.08)}.project-info article{max-width:100%}.project-info h2{font-size:2rem;margin-bottom:16px;color:#1f2937}.project-info h3{margin-top:26px;margin-bottom:12px;font-size:1.3rem;color:#374151}.project-info p{line-height:1.8;margin-bottom:16px;color:#4b5563;font-size:1rem}.project-info ul{padding-left:24px;margin-bottom:16px}.project-info li{margin-bottom:12px;color:#4b5563;line-height:1.6}.project-info strong{color:#1f2937}