@import "https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{color:#e8e8ec;letter-spacing:-.02em;background-color:#0000;background-image:radial-gradient(circle at 15% 15%,#3148540a 0%,#0000 40%),radial-gradient(circle at 85% 85%,#64648c08 0%,#0000 40%),linear-gradient(160deg,#050507 0%,#0c0e14 45%,#050507 100%);background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;justify-content:center;align-items:flex-start;min-height:100vh;padding-top:6vh;font-family:Outfit,sans-serif;display:flex}.main-weather{width:100%;max-width:560px;padding:0 1.25rem}.main-weather>h2{color:#afafc0;text-align:center;letter-spacing:-.03em;margin-bottom:2rem;font-size:1.75rem;font-weight:600}.input-box{border:1px solid #ffffff0f;border-radius:16px;gap:0;transition:border-color .3s;display:flex;overflow:hidden}.input-box:focus-within{border-color:#ffffff1f}.input-box input{color:#e8e8ec;letter-spacing:-.01em;background:#0c0c12;border:none;outline:none;flex:1;padding:1rem 1.25rem;font-family:Outfit,sans-serif;font-size:1rem}.input-box input::placeholder{color:#3a3a50}.input-box button{letter-spacing:.02em;color:#0a0a0f;cursor:pointer;background:#e8e8ec;border:none;padding:1rem 1.5rem;font-family:Outfit,sans-serif;font-size:.9rem;font-weight:600;transition:background .25s,color .25s}.input-box button:hover{background:#fff}.input-box button:active{transform:scale(.97)}.display-box{margin-top:2rem}.loadingTag,.errorTag{letter-spacing:-.01em;border-radius:1rem;justify-content:center;align-items:center;gap:.75rem;margin-bottom:2rem;padding:1.25rem;font-size:1rem;font-weight:500;animation:.4s ease-out both card-enter;display:flex}.loadingTag{color:#7eb8da;background:#7eb8da0d;border:1px solid #7eb8da1a}.errorTag{color:#ff6b6b;background:#ff6b6b0d;border:2px dashed #ff6b6b1a}.spin{animation:1.2s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.weather-displayed{background:#0c0c12;border:1px solid #ffffff0d;border-radius:28px;animation:.5s cubic-bezier(.16,1,.3,1) both card-enter;overflow:hidden;box-shadow:0 4px 40px #00000080,inset 0 0 0 1px #ffffff08}@keyframes card-enter{0%{opacity:0;transform:translateY(20px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.weather-hero{justify-content:space-between;align-items:center;padding:2.25rem 2.25rem 1.5rem;display:flex}.hero-left{flex-direction:column;gap:4px;display:flex}.city-name{color:#fff;letter-spacing:-.04em;font-size:1.8rem;font-weight:700;line-height:1.1}.weather-description{color:#5a5a72;text-transform:uppercase;letter-spacing:.06em;margin-top:.25rem;font-size:.85rem;font-weight:500}.temperature{color:#e8e8ec;letter-spacing:-.06em;margin-top:.75rem;font-size:3.2rem;font-weight:200;line-height:1}.hero-right{flex-shrink:0}.weather-icon{filter:drop-shadow(0 0 20px #ffffff14);width:120px;height:120px;animation:4s ease-in-out infinite icon-float}@keyframes icon-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.stats-grid{background:#ffffff0a;border-top:1px solid #ffffff0a;grid-template-columns:1fr 1fr;gap:1px;display:grid}.stat-card{background:#0c0c12;flex-direction:column;gap:.625rem;padding:1.5rem 1.75rem;transition:background .3s;display:flex;position:relative}.stat-card:hover{background:#101018}.stat-card:after{content:"";opacity:0;background:linear-gradient(90deg,#0000,#2a2a40,#0000);height:1px;transition:opacity .3s;position:absolute;bottom:0;left:24px;right:24px}.stat-card:hover:after{opacity:1}.stat-label{color:#55556e;letter-spacing:.04em;text-transform:uppercase;align-items:center;gap:6px;font-size:.78rem;font-weight:500;display:flex}.stat-icon{color:#7eb8da;font-size:18px}.stat-value{color:#e8e8ec;letter-spacing:-.02em;font-size:1.35rem;font-weight:600}.stat-card:nth-child(3){border-bottom-left-radius:24px}.stat-card:nth-child(4){border-bottom-right-radius:24px}@media (width<=580px){.main-weather{padding:0 .75rem}.weather-hero{padding:1.5rem 1.25rem 1rem}.city-name{font-size:1.4rem}.temperature{font-size:2.6rem}.weather-icon{width:90px;height:90px}.stat-card{padding:1.125rem 1rem}.stat-value{font-size:1.15rem}}