@import"https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;600&display=swap";*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;font-family:Inter,system-ui,sans-serif;color:#fff;-webkit-font-smoothing:antialiased;background:#000;overflow:hidden}#sky{position:fixed;inset:0;z-index:0}#sky video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.5s ease-in-out;z-index:0}#sky video.active{opacity:.75;z-index:1}#hud{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.logo{position:absolute;top:50px;font-family:Inter,sans-serif;font-size:2rem;font-weight:200;letter-spacing:18px;text-transform:uppercase;color:#ffffffd9;margin:0 -18px 0 0;z-index:10;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 0 10px rgba(255,255,255,.3))}.glass{width:100%;max-width:380px;padding:30px;border-radius:75px;background:#ffffff05;backdrop-filter:blur(15px) saturate(120%);-webkit-backdrop-filter:blur(15px) saturate(120%);border:2px solid rgba(255,255,255,.15);border-top:2px solid rgba(255,255,255,.3);border-left:2px solid rgba(255,255,255,.3);box-shadow:0 4px 6px -1px #0000001a,0 25px 50px -12px #00000026,inset 0 0 20px #ffffff0d;display:flex;flex-direction:column;gap:25px;max-height:800px;overflow:hidden;transition:all 1.5s cubic-bezier(.2,.8,.2,1);z-index:5}.glass.collapsed{max-height:80px;max-width:420px;padding:15px 12px;border-radius:100px;gap:0;justify-content:center}.search-box{display:flex;gap:12px;width:100%}#cityInput{flex:1 1 0;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);padding:14px 24px;border-radius:50px;color:#fff;outline:none;font-size:1rem;transition:.3s}#cityInput::placeholder{color:#ffffffb3}#cityInput:focus{background:#fff3;border-color:#ffffff80}#searchBtn{flex:0 0 48px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);width:48px;border-radius:50%;color:#fff;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:.3s}#searchBtn:hover{background:#fff;color:#000;transform:scale(1.05)}#result{display:flex;flex-direction:column;gap:20px;opacity:1;transform:translateY(0);transition:opacity .6s ease .4s,transform .6s ease .4s}.glass.collapsed #result{opacity:0;transform:translateY(20px);pointer-events:none;transition:none;height:0;margin:0;overflow:hidden}.left-side{text-align:center}.right-side{display:flex;flex-direction:column;gap:15px}.city{font-size:1.2rem;font-weight:500;text-transform:uppercase;letter-spacing:1px;opacity:.9}.big{font-size:6.5rem;font-weight:200;line-height:1;letter-spacing:-3px;margin:5px 0 15px;background:linear-gradient(180deg,#fff 20%,#fff9);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 10px rgba(0,0,0,.2))}.cond{font-size:1.2rem;font-weight:400;opacity:.8}.grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;background:#00000026;padding:24px;border-radius:30px}.grid div{display:flex;flex-direction:column}.grid span:first-child{font-size:.75rem;text-transform:uppercase;opacity:.6;margin-bottom:4px}.grid span:last-child{font-size:1.1rem;font-weight:600}.sun{display:flex;justify-content:space-between;padding:0 10px;font-size:.9rem;opacity:.8}.sun-label{text-transform:uppercase;font-size:.7rem;letter-spacing:1px;opacity:.6;margin-right:8px;font-weight:600}.footer{position:absolute;bottom:30px;display:flex;align-items:center;gap:12px;font-family:Inter,sans-serif;font-size:.8rem;font-weight:300;letter-spacing:2px;text-transform:uppercase;text-decoration:none;color:#ffffff80;z-index:10;transition:all .3s ease}.footer:hover{color:#fff;transform:translateY(-3px);filter:drop-shadow(0 0 8px rgba(255,255,255,.4))}.footer svg{opacity:.8}@media(min-width:800px){.glass{max-width:800px;padding:50px}.glass.collapsed{max-width:500px;padding:15px 20px;max-height:85px}#result{flex-direction:row;align-items:center;justify-content:space-between;gap:50px;margin-top:20px}.left-side{text-align:left;flex:1}.right-side{flex:1;width:100%}.big{font-size:8rem;margin:0}.city{font-size:1.4rem;margin-bottom:0}.cond{font-size:1.4rem;margin-top:10px}}