@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap";*{box-sizing:border-box}html{background:#111827;min-width:320px}body{min-width:320px;margin:0;font-family:DM Sans,ui-sans-serif,system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.weather-card{-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);color:#fff;background:linear-gradient(135deg,#ffffff38,#ffffff12);border:1px solid #ffffff3b;border-radius:28px;padding:28px;transition:box-shadow .25s;box-shadow:0 24px 65px #070c1e40}.weather-card:hover{box-shadow:0 30px 75px #070c1e57}.weather-card__topline,.section-heading{letter-spacing:.12em;color:#ffffffad;text-transform:uppercase;justify-content:space-between;font-size:.72rem;font-weight:700;display:flex}.weather-hero{justify-content:space-between;align-items:center;gap:16px;padding:24px 0 14px;display:flex}.weather-city{letter-spacing:-.06em;margin:0;font-size:clamp(2rem,6vw,3.3rem);font-weight:600;line-height:1}.weather-description{text-transform:capitalize;color:#ffffffbf;margin:9px 0 0}.weather-icon{color:#fff4bf;filter:drop-shadow(0 5px 9px #00000024);place-items:center;line-height:1;display:inline-grid}.weather-icon--medium{font-size:1.3rem}.weather-icon--hero{font-size:5.5rem}.temperature-row{border-bottom:1px solid #ffffff2e;align-items:end;gap:18px;padding-bottom:20px;display:flex}.temperature{letter-spacing:-.1em;margin:0;font-size:clamp(4.4rem,11vw,6.8rem);font-weight:500;line-height:.8}.temperature-row div{color:#fffc;padding-bottom:3px;font-size:.85rem}.temperature-row p{margin:0 0 5px}.sun-row{color:#ffffffc4;gap:14px;padding:18px 0;font-size:.8rem;display:flex}.sun-row span{align-items:center;gap:5px;display:flex}.sun-row svg{color:#ffe58c;font-size:1rem}.sun-row .sunset-icon{color:#ffb77a}.sun-row strong{color:#fff}.metrics-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.metric-tile{background:#07112c2e;border:1px solid #ffffff1a;border-radius:17px;gap:10px;min-height:88px;padding:13px;display:flex}.metric-tile__icon{color:#dcecff}.metric-tile p{margin:0}.metric-tile__label,.metric-tile__detail{color:#ffffff96;font-size:.66rem}.metric-tile__value{font-size:.92rem;font-weight:700;margin:3px 0!important}@media (width<=480px){.weather-card{border-radius:23px;padding:21px}.weather-icon--hero{font-size:4.3rem}.metrics-grid{grid-template-columns:1fr 1fr;gap:8px}.metric-tile{min-height:82px;padding:10px}.metric-tile__detail{display:none}}.search-section{z-index:1;margin:1.5rem 0 1.75rem;position:relative}.weather-search{color:#ffffffb8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#1119284d;border:1px solid #ffffff3d;border-radius:22px;align-items:center;gap:12px;width:min(100%,600px);margin:auto;padding:7px 8px 7px 19px;display:flex;box-shadow:0 12px 40px #0000001f}.weather-search:focus-within{border-color:#ffffffad;box-shadow:0 12px 42px #0000002e,0 0 0 3px #ffffff21}.weather-search input{color:#fff;background:0 0;border:0;outline:0;flex:1;min-width:0;padding:10px 0;font-size:1rem}.weather-search input::placeholder{color:#ffffffa3}.weather-search button{color:#172032;background:#fff;border:0;border-radius:16px;place-items:center;min-width:112px;min-height:48px;font-weight:700;transition:opacity .2s;display:grid}.weather-search button:disabled{cursor:wait;opacity:.72}.weather-search button span{margin-left:6px}.search-error{color:#ffe5e5;background:#5b142373;border:1px solid #ffe0e033;border-radius:15px;justify-content:center;align-items:center;gap:8px;width:min(100%,600px);margin:12px auto 0;padding:11px 15px;font-size:.88rem;display:flex}@media (width<=520px){.search-section{margin-bottom:2.25rem}.weather-search{border-radius:18px;padding-left:15px}.weather-search button{min-width:52px;padding:0 13px}.weather-search button span{display:none}}.weather-app{--accent:#ffdc7b;color:#fff;isolation:isolate;background:linear-gradient(145deg,#6fbbff 0%,#377ccf 49%,#193362 100%);min-height:100svh;padding:26px clamp(20px,5vw,72px) 58px;position:relative;overflow:hidden}.weather-app:before{content:"";z-index:-2;background:radial-gradient(circle at 72% 8%,#fff2b69e,#0000 25%),linear-gradient(#09183714,#070f2685);position:absolute;inset:0}.weather-app:after{content:"";z-index:-1;background:linear-gradient(160deg,#153f64d6,#051937fa);border-radius:50% 50% 0 0;height:55%;position:absolute;inset:auto -12% -30%}.weather-app--rain{--accent:#b4d8ff;background:linear-gradient(135deg,#263b5c,#496a79 48%,#182535)}.weather-app--rain:before{background-image:linear-gradient(#0a13212e,#0a1222b3),repeating-linear-gradient(112deg,#0000 0 30px,#daefff2e 31px 33px,#0000 34px 78px);background-position:0 0,0 0;background-size:100% 100%,120px 160px;animation:1.15s linear infinite rainfall}.weather-app--snow{--accent:#eaf8ff;background:linear-gradient(145deg,#8bb4d0,#ceddec 49%,#4b6c8a)}.weather-app--clouds{--accent:#e7edff;background:linear-gradient(145deg,#5f718e,#8495ac 45%,#35465d)}.weather-app--clouds:before{background:radial-gradient(at 18% 20%,#ffffff40,#0000 27%),radial-gradient(at 68% 15%,#ffffff29,#0000 30%),linear-gradient(#0b16271f,#0a13208c)}.weather-app--night{--accent:#e2d1ff;background:linear-gradient(145deg,#1d2153,#303176 45%,#11122e)}.weather-app--night:before{background-image:radial-gradient(circle at 12% 22%,#fff 0 1px,#0000 1.8px),radial-gradient(circle at 79% 18%,#fff 0 1.5px,#0000 2px),radial-gradient(circle at 58% 38%,#fff 0 1px,#0000 1.6px),linear-gradient(#07081f33,#070819c7)}.weather-app__aurora{z-index:-1;filter:blur(12px);background:radial-gradient(circle,#f4fdff33,#0000 67%);width:580px;height:580px;position:absolute;top:260px;right:-160px}@keyframes rainfall{to{background-position:0 0,-38px 160px}}@media (prefers-reduced-motion:reduce){.weather-app--rain:before{animation:none}}.real-sky{z-index:-1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.real-sky__stars{transition:opacity 1.5s;position:absolute;inset:0}.star{width:var(--star-size);height:var(--star-size);opacity:.82;pointer-events:auto;animation:4.5s ease-in-out infinite twinkle;animation-delay:var(--twinkle-delay);background:#fff;border:0;border-radius:50%;padding:0;display:block;position:absolute;box-shadow:0 0 5px #dceaffe6}.moon{pointer-events:auto;filter:drop-shadow(0 0 7px #fff7c642);background:radial-gradient(circle at 34% 30%,#fffef4 0 6%,#e5e0c9 35%,#aaa48f 100%);border:0;border-radius:50%;width:64px;height:64px;padding:0;position:absolute;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 0 23px #fff5cd59}.moon__shade{border-radius:inherit;transform-origin:50%;background:#10142f;display:block;position:absolute;inset:-5%}.real-sky__clouds{opacity:.28;filter:blur(20px);background:radial-gradient(at 20% 45%,#8597b5cc 0 8%,#0000 18%),radial-gradient(at 65% 25%,#8597b5a6 0 10%,#0000 25%),radial-gradient(at 92% 60%,#8597b599 0 10%,#0000 23%);animation:75s linear infinite alternate drift-clouds;position:absolute;inset:-20% -25%}.real-sky--rain .real-sky__clouds{opacity:.7;filter:blur(27px)}.real-sky--fog{filter:blur(1.6px)}.shooting-star{background:#fff;border-radius:50%;width:3px;height:3px;animation:1.2s ease-out forwards shooting;position:absolute;top:18%;left:72%;box-shadow:0 0 6px 2px #ffffffb3,-90px 36px 25px 1px #ffffff8c}.weather-app--night:after{background:linear-gradient(160deg,#080a2094,#030512eb)}@keyframes twinkle{0%,to{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.25)}}@keyframes drift-clouds{0%{transform:translate(-4%)}to{transform:translate(7%,3%)}}@keyframes shooting{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}to{opacity:0;transform:translate(-310px,130px)}}.weather-shell{width:min(1120px,100%);margin:auto}.app-header{color:#ffffffb8;justify-content:space-between;align-items:center;font-size:.82rem;display:flex}.brand{color:#fff;letter-spacing:-.02em;align-items:center;gap:8px;font-size:1.05rem;font-weight:700;display:flex}.brand svg{color:var(--accent)}.app-header p{margin:0}.header-sky{flex-direction:column;align-items:flex-end;gap:8px;display:flex}.header-sky>p{font-size:.9rem}.moon-cycle{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#060b2238;border:1px solid #ffffff2b;border-radius:18px;align-items:flex-start;gap:12px;padding:9px 13px;display:flex;box-shadow:0 8px 25px #0000001a}.moon-cycle__day{justify-items:center;gap:5px;display:grid}.moon-cycle__disc{background:radial-gradient(circle at 34% 30%,#fffef0,#e3dbbc 65%,#aaa284);border-radius:50%;width:30px;height:30px;display:block;position:relative;overflow:hidden;box-shadow:0 0 10px #fff1b957}.moon-cycle__disc i{border-radius:inherit;transform:translateX(var(--moon-shade));background:#141a39;display:block;position:absolute;inset:-6%}.moon-cycle__day small{color:#ffffffb8;font-size:.65rem}.intro{max-width:620px;margin-top:clamp(36px,4.5vw,60px)}.eyebrow{letter-spacing:.17em;color:var(--accent);margin:0 0 11px;font-size:.7rem;font-weight:700}.intro h1{letter-spacing:-.075em;margin:0;font-size:clamp(2.8rem,5.2vw,4.8rem);font-weight:600;line-height:.98}.intro h1 em{font-family:Playfair Display,Georgia,serif;font-weight:600}.intro__copy{color:#ffffffc7;max-width:390px;margin:16px 0 0;line-height:1.55}.dashboard{grid-template-columns:minmax(310px,.9fr) minmax(340px,1.1fr);align-items:start;gap:clamp(18px,3.5vw,42px);display:grid}.forecast{padding:4px 0}.section-heading--daily{margin-top:30px}.section-heading small{text-transform:none;letter-spacing:0;font-size:.72rem;font-weight:500}.hourly-row{scrollbar-width:none;gap:10px;padding:13px 0 4px;display:flex;overflow-x:auto}.hourly-row::-webkit-scrollbar{display:none}.hour-card{color:#ffffffdb;background:#ffffff1c;border:1px solid #ffffff21;border-radius:17px;flex:0 0 79px;place-items:center;gap:11px;padding:14px 8px;font-size:.73rem;display:grid}.hour-card strong{color:#fff}.daily-list{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#09112b24;border:1px solid #ffffff29;border-radius:22px;margin-top:10px;padding:6px 16px}.daily-row{color:#ffffffc7;border-bottom:1px solid #ffffff1f;grid-template-columns:70px 29px 33px 1fr 33px;align-items:center;gap:7px;min-height:50px;font-size:.83rem;display:grid}.daily-row:last-child{border:0}.daily-row__day{color:#fff}.temperature-track{background:#ffffff2e;border-radius:8px;height:4px;overflow:hidden}.temperature-track i{border-radius:inherit;background:linear-gradient(90deg,#a8d3ff,#ffe084);height:100%;display:block}.dashboard__right{min-width:0}.weather-tips{margin-top:28px}.tips-list{scroll-snap-type:x mandatory;scrollbar-width:none;gap:10px;margin-top:11px;display:flex;overflow-x:auto}.tips-list::-webkit-scrollbar{display:none}.tip{scroll-snap-align:start;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#08122a2b;border:1px solid #ffffff24;border-radius:19px;flex:0 0 min(235px,78%);align-items:flex-start;gap:10px;min-height:118px;padding:15px;display:flex}.tip__icon{color:var(--accent);flex:0 0 30px;place-items:center;display:grid}.tip h3{color:#fff;margin:0 0 5px;font-size:.83rem}.tip p{color:#ffffffad;margin:0;font-size:.71rem;line-height:1.5}.experience-panel{margin-top:28px}.experience-actions{gap:9px;display:flex}.experience-actions button,.recent-cities button{color:#fff;background:#ffffff1a;border:1px solid #ffffff2e;border-radius:13px;align-items:center;gap:6px;padding:9px 12px;font-size:.73rem;transition:transform .18s,background .18s;display:inline-flex}.experience-actions button:hover,.recent-cities button:hover{background:#ffffff30;transform:translateY(-2px)}.experience-actions svg{font-size:1rem}.experience-feedback{color:#ffffffb3;align-items:center;gap:6px;margin:9px 0 0;font-size:.72rem;display:flex}.experience-feedback svg{font-size:.9rem}.experience-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px;display:grid}.experience-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#08122a2b;border:1px solid #ffffff24;border-radius:19px;min-height:125px;padding:15px}.experience-card__heading{color:#ffffffa6;align-items:center;gap:6px;font-size:.7rem;display:flex}.experience-card__heading svg{color:var(--accent);font-size:.98rem}.experience-card strong{color:#fff;margin-top:13px;font-size:1rem;display:block}.experience-card p{color:#ffffff9e;margin:5px 0 0;font-size:.68rem;line-height:1.4}.experience-card--sun{grid-template-columns:1fr auto;align-items:center;display:grid}.experience-card--sun p{grid-column:1/-1}.sun-ring{background:conic-gradient(var(--accent) var(--daylight), #ffffff24 0);border-radius:50%;place-items:center;width:44px;height:44px;display:grid;position:relative}.sun-ring:before{content:"";border-radius:inherit;background:#263658;width:34px;height:34px;position:absolute}.sun-ring span{z-index:1;color:#fff;font-size:.59rem;position:relative}.commute-note{background:#ffffff1a;border:1px solid #ffffff24;border-radius:18px;gap:10px;margin-top:10px;padding:14px;display:flex}.commute-note svg{color:var(--accent)}.commute-note p{color:#ffffffb3;margin:0;font-size:.72rem;line-height:1.45}.commute-note strong{color:#fff;margin-bottom:3px;display:block}.recent-cities{flex-wrap:wrap;align-items:center;gap:7px;margin-top:12px;display:flex}.recent-cities>span{color:#fff9;margin-right:3px;font-size:.7rem}.recent-cities button{padding:6px 10px;font-size:.68rem}@media (width<=790px){.dashboard{grid-template-columns:1fr}.forecast{padding-top:15px}.weather-card{width:100%;max-width:590px;margin:auto}}.weather-app{padding-bottom:40px}@media (width<=520px){.weather-app{padding:21px 16px 38px}.header-sky>p{font-size:.72rem;display:block}.moon-cycle{gap:7px;padding:6px 8px}.moon-cycle__disc{width:24px;height:24px}.moon-cycle__day small{font-size:.58rem}.moon-cycle__day:nth-child(n+4){display:none}.intro{margin-top:50px}.intro__copy{font-size:.9rem}.daily-list{padding:6px 12px}.daily-row{grid-template-columns:62px 27px 27px 1fr 28px;gap:4px;font-size:.77rem}.tips-list,.experience-grid{grid-template-columns:1fr}.tip{min-height:0}.experience-actions button span{display:none}.experience-actions button{padding:10px}.experience-card{min-height:100px}}@media (width>=791px){.intro{margin-top:24px}.intro h1{font-size:clamp(2.7rem,4.25vw,3.9rem)}.intro__copy{margin-top:12px}.search-section{margin:1rem 0}}