:root{--text:#f8fafc;--text-dim:#f8fafcbf;--card-bg:#ffffff1f;--border:#ffffff40;--danger:#fecaca;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{min-height:100vh;color:var(--text);background:#1e3a8a;margin:0}.app{isolation:isolate;text-align:center;width:100%;min-height:100vh;color:var(--text);background:#050b16;flex-direction:column;padding:clamp(2rem,8vh,4.5rem) clamp(1.25rem,4vw,4rem);display:flex;position:relative;overflow:hidden}.app>:not(.weather-background){z-index:2;position:relative}.weather-background{z-index:0;pointer-events:none;background:#050b16;position:fixed;inset:0;overflow:hidden}.weather-orb,.weather-glow,.weather-haze,.weather-stars,.weather-vignette{pointer-events:none;position:absolute}.weather-orb{filter:blur(2px);will-change:transform;border-radius:50%;transform:translate(0,0)}.orb-one{background:radial-gradient(circle at 35% 35%,#38bdf8a6,#0e749033 38%,#0000 70%);width:42vw;min-width:280px;height:42vw;min-height:280px;animation:11s cubic-bezier(.45,.05,.55,.95) infinite alternate orb-one-float;top:8vh;left:-10vw}.orb-two{background:radial-gradient(circle at 50% 45%,#6366f180,#2563eb29 42%,#0000 72%);width:48vw;min-width:320px;height:48vw;min-height:320px;animation:14s cubic-bezier(.37,0,.63,1) infinite alternate orb-two-float;top:2vh;right:-13vw}.orb-three{background:radial-gradient(circle,#0ea5e94d,#064e6f14 48%,#0000 72%);width:34vw;min-width:240px;height:34vw;min-height:240px;animation:9s ease-in-out infinite alternate orb-three-float;bottom:-16vw;left:38vw}.weather-glow{filter:blur(24px);background:radial-gradient(circle,#7dd3fc0f,#0000 64%);border-radius:50%;width:70vw;height:70vw;animation:6s ease-in-out infinite core-breathe;top:8vh;left:15vw}.weather-haze{filter:blur(35px);background:#38bdf80b;border-radius:50%;width:80vw;height:22vh;left:10vw;transform:rotate(-8deg)}.haze-one{animation:12s ease-in-out infinite alternate haze-one;top:25%}.haze-two{background:#6366f10a;animation:15s ease-in-out infinite alternate haze-two;bottom:14%;transform:rotate(9deg)}.weather-stars{opacity:.65;inset:0}.weather-stars i{background:#bae6fdcc;border-radius:50%;animation:10s ease-in-out infinite particle-float;display:block;position:absolute;box-shadow:0 0 10px #7dd3fc99}.weather-vignette{background:radial-gradient(circle,#0000 35%,#02061780 100%);inset:-10%}.weather-bg-clear .orb-two{background:radial-gradient(circle,#fbbf249e,#38bdf82e 42%,#0000 72%)}.weather-bg-clear .weather-glow{background:radial-gradient(circle,#fbbf241f,#0000 62%)}.weather-bg-clouds .weather-orb{filter:blur(7px);opacity:.85}.weather-bg-rain .weather-stars,.weather-bg-drizzle .weather-stars{opacity:.28}.weather-bg-thunderstorm .orb-two{background:radial-gradient(circle,#a855f79e,#4f46e533 45%,#0000 72%)}.weather-bg-snow .weather-stars i{background:#e0f2fee6;box-shadow:0 0 12px #e0f2fecc}.search-wrapper,.weather-card,.error-message{width:min(100%,720px);margin-inline:auto}.search-wrapper{position:relative;z-index:100000!important}.search-field{width:100%;position:relative;z-index:100001!important}.app-title{letter-spacing:-.02em;margin:0;font-size:clamp(1.75rem,6vw,2.5rem)}.app-subtitle{color:var(--text-dim);margin:.5rem 0 2rem;font-size:clamp(.95rem,3vw,1.05rem)}.search-bar{gap:.5rem;display:flex}.search-bar input{min-width:0;color:var(--text);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0f172a6b;border:1px solid #bae6fd33;border-radius:.85rem;outline:none;flex:1;padding:.85rem 1rem;font-size:16px;transition:border-color .2s,background .2s}.search-bar input::placeholder{color:var(--text-dim)}.search-bar input:focus{background:#0f172a94;border-color:#7dd3fcb3}.search-bar button{color:#082f49;cursor:pointer;background:#e0f2fe;border:0;border-radius:.85rem;padding:.85rem 1.5rem;font-size:1rem;font-weight:600;transition:transform .15s,background .15s;box-shadow:0 8px 30px #38bdf833}.search-bar button:hover{background:#fff}.search-bar button:active{transform:scale(.96)}.suggestions{text-align:left;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#07111ffa;border:1px solid #7dd3fc40;border-radius:.85rem;max-height:320px;margin:0;padding:.35rem;list-style:none;animation:.18s fade-up;position:absolute;top:calc(100% + .55rem);left:0;right:0;overflow-y:auto;box-shadow:0 18px 50px #000000a6;z-index:100002!important}.suggestion{width:100%;color:var(--text);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:.55rem;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem .85rem;font-size:.95rem;display:flex}.suggestion:hover{background:#ffffff1f}.suggestion-region{color:var(--text-dim);white-space:nowrap;font-size:.8rem}.locate-button{color:var(--text-dim);border:1px solid var(--border);cursor:pointer;background:#ffffff14;border-radius:999px;align-items:center;gap:.45rem;margin-top:.75rem;padding:.55rem 1.1rem;font-size:.9rem;transition:background .2s,color .2s;display:inline-flex}.locate-button:hover:not(:disabled){color:var(--text);background:#ffffff29}.locate-button:disabled{opacity:.6;cursor:wait}.loading{margin-top:2.5rem}.spinner{border:3px solid #ffffff40;border-top-color:#fff;border-radius:50%;width:2.25rem;height:2.25rem;animation:.8s linear infinite spin;display:inline-block}.error-message{color:var(--danger);background:#ef444426;border:1px solid #ef444466;border-radius:.85rem;margin-top:2rem;padding:.85rem 1rem;animation:.25s fade-up}.weather-card{background:var(--card-bg);border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:1.5rem;margin-top:2rem;padding:2rem 1.5rem;animation:.35s fade-up;position:relative;box-shadow:0 16px 40px #00000040;z-index:1!important}.unit-toggle{color:var(--text);border:1px solid var(--border);cursor:pointer;background:#ffffff1f;border-radius:999px;padding:.4rem .75rem;font-size:.9rem;font-weight:600;position:absolute;top:1rem;right:1rem}.weather-card h2{margin:0;font-size:clamp(1.25rem,5vw,1.5rem)}.weather-icon{filter:drop-shadow(0 6px 14px #0000004d);width:clamp(96px,26vw,128px);height:auto;margin:-.75rem 0}.temperature{letter-spacing:-.03em;margin:0;font-size:clamp(3.25rem,14vw,4.5rem);font-weight:700;line-height:1}.description{text-transform:capitalize;color:var(--text-dim);margin:.5rem 0 1.5rem;font-size:1.05rem}.details{border-top:1px solid var(--border);flex-wrap:wrap;justify-content:center;gap:1rem 2rem;padding-top:1.25rem;display:flex}.detail{flex-direction:column;gap:.25rem;display:flex}.detail .label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);font-size:.8rem}.forecast-section{text-align:left;width:min(100%,960px);margin:2.5rem auto 0;position:relative;z-index:1!important}.forecast-heading{justify-content:space-between;align-items:flex-end;margin-bottom:1rem;padding:0 .2rem;display:flex}.forecast-kicker{letter-spacing:.14em;color:#7dd3fc;font-size:.72rem;font-weight:700;display:block}.forecast-heading h2{letter-spacing:-.02em;margin:.25rem 0 0;font-size:1.35rem}.forecast-hint{color:var(--text-dim);font-size:.78rem}.forecast-scroller{overscroll-behavior-inline:contain;scrollbar-width:thin;padding:.25rem .15rem .8rem;overflow-x:auto}.forecast-track{gap:.75rem;min-width:max-content;display:flex}.forecast-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0f172a85;border:1px solid #bae6fd24;border-radius:1.2rem;width:158px;min-height:250px;padding:1rem;transition:transform .2s,border-color .2s,background .2s;box-shadow:0 14px 40px #0000002e}.forecast-card:hover{background:#0f172aad;border-color:#7dd3fc61;transform:translateY(-5px)}.forecast-card-today{border-color:#7dd3fc6b;box-shadow:0 16px 45px #0ea5e91f}.forecast-date{flex-direction:column;gap:.2rem;display:flex}.forecast-date strong{font-size:1rem}.forecast-date span{color:var(--text-dim);font-size:.76rem}.forecast-icon{filter:drop-shadow(0 7px 12px #0000004d);width:76px;height:76px;margin:.45rem auto 0;display:block}.forecast-condition{min-height:2.5em;color:var(--text-dim);text-transform:capitalize;font-size:.78rem}.forecast-temperatures{align-items:baseline;gap:.45rem;margin-top:.45rem;display:flex}.forecast-temperatures strong{font-size:1.25rem}.forecast-temperatures span{color:var(--text-dim);font-size:.85rem}.forecast-meta{color:var(--text-dim);border-top:1px solid #ffffff14;flex-direction:column;gap:.25rem;margin-top:.75rem;padding-top:.65rem;font-size:.68rem;display:flex}.footer{color:var(--text-dim);margin-top:auto;padding-top:3.5rem;font-size:.9rem}.footer a{color:var(--text);border-bottom:1px solid #ffffff59;font-weight:600;text-decoration:none}:focus-visible{outline-offset:2px;outline:2px solid #ffffffe6}@keyframes spin{to{transform:rotate(360deg)}}@keyframes orb-one-float{0%{transform:translate(-8vw,-4vh)scale(.92)rotate(-8deg)}50%{transform:translate(13vw,8vh)scale(1.08)rotate(5deg)}to{transform:translate(5vw,24vh)scale(1.18)rotate(12deg)}}@keyframes orb-two-float{0%{transform:translate(8vw,-6vh)scale(.9)rotate(4deg)}50%{transform:translate(-12vw,10vh)scale(1.14)rotate(-7deg)}to{transform:translate(-4vw,26vh)scale(1)rotate(8deg)}}@keyframes orb-three-float{0%{transform:translate(-12vw,4vh)scale(.8)}to{transform:translate(18vw,-16vh)scale(1.3)}}@keyframes core-breathe{0%,to{opacity:.45;transform:scale(.82)}50%{opacity:.9;transform:scale(1.18)}}@keyframes haze-one{0%{transform:translate(-18vw,-4vh)rotate(-8deg)scale(.9)}to{transform:translate(18vw,10vh)rotate(7deg)scale(1.2)}}@keyframes haze-two{0%{transform:translate(15vw,5vh)rotate(9deg)scale(.9)}to{transform:translate(-18vw,-8vh)rotate(-7deg)scale(1.25)}}@keyframes particle-float{0%{opacity:0;transform:translateY(18px)scale(.7)}20%{opacity:.7}50%{opacity:.9;transform:translate(18px,-22px)scale(1)}80%{opacity:.5}to{opacity:0;transform:translate(-12px,-60px)scale(.65)}}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (width>=768px){.app-title{font-size:3rem}.app-subtitle{margin-bottom:2.5rem;font-size:1.15rem}.search-bar input{padding:1rem 1.25rem}.search-bar button{padding:1rem 2rem;font-size:1.05rem}.weather-card{margin-top:2.5rem;padding:2.75rem 3rem}.weather-icon{width:152px;margin:-1rem 0}.temperature{font-size:5.5rem}.description{margin-bottom:2rem;font-size:1.2rem}.details{gap:4rem;padding-top:1.75rem}.forecast-card{width:170px}.forecast-heading h2{font-size:1.5rem}}@media (width<=767px){.forecast-section{margin-top:2rem}.forecast-hint{font-size:.7rem}.forecast-card{width:145px;min-height:235px}.forecast-scroller{margin-inline:-.5rem;padding-inline:.5rem}}@media (prefers-reduced-motion:reduce){.weather-background *{animation-duration:.01ms!important;animation-iteration-count:1!important}*,:before,:after{transition-duration:.01ms!important}}
