:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;height:100vh;margin:0;padding:0;text-align:center;font-family:Manrope,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}body{margin:0;min-width:320px;min-height:100vh;background-color:#f0f2f5;color:#213547}.app-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.weather-card{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;height:100%;width:100%;overflow:hidden;position:relative}.rive-wrapper{width:100%;height:calc(100vh - 4rem);border-radius:16px;overflow:hidden;position:relative}.rive-fg{position:absolute;top:0;left:0;z-index:10;width:100%!important;height:80vh!important}.rive-fg>canvas{width:100%!important;height:80vh!important}.rive-bg{position:absolute;top:0;left:0;width:100%!important;height:100%!important}.rive-bg>canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important}.weather-info{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;width:100%;text-align:left}.city-name{font-size:1.5rem;font-weight:600;margin:0;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.main-temp{display:flex;align-items:flex-start;margin-bottom:.5rem}.temp-value{font-size:4rem;font-weight:700;line-height:1;color:#1a1a1a}.temp-unit{font-size:1.5rem;font-weight:500;margin-top:.5rem;color:#666}.weather-desc{font-size:1.1rem;text-transform:capitalize;color:#666;margin:0 0 1.5rem}.details{display:flex;width:100%;justify-content:space-between;align-items:flex-start;border-top:1px solid #eee}.detail-item{display:flex;width:25%;flex-direction:column;align-items:center;justify-content:flex-start;padding:1rem}.label{font-size:.8rem;color:#888;margin-bottom:.2rem}.value{font-weight:600;color:#333;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}.error-container{color:#ef4444}.loading-container{color:#666}.loader{border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.hint{font-size:.9em;color:#555;background:#fff;padding:1rem;border-radius:8px;margin-top:1rem;box-shadow:0 2px 8px #0000000d}code{background:#eee;padding:2px 4px;border-radius:4px;font-family:monospace}.random-btn{margin-top:1.5rem;width:100%;padding:.8rem;background-color:#ffd229;color:#1a6666;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s}.random-btn:hover{background-color:#ffc900}.random-btn:active{transform:scale(.98)}.button-group{width:100%;display:flex;flex-direction:row;padding:1rem;justify-content:space-between;align-items:center}.location-btn,.random-btn{width:fit-content;display:flex;flex-direction:row;align-items:center;gap:.5rem;justify-content:center;padding:.8rem;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s;margin:0}.location-btn{background-color:#d6f5f5;color:#1a6666;margin-left:1rem}.random-btn{margin-right:1rem}.location-btn:hover{background-color:#b5eded}.location-btn:active{transform:scale(.98)}@media (max-width: 768px){.city-name{font-size:1.2rem}.detail-item,.button-group{padding:.2rem}.location-btn,.random-btn{padding:.2rem;margin:.2rem}.button-text{display:none}}