:root { --ink:#f6f7ff; --muted:#a9afca; --violet:#a77cff; --cyan:#7ee6ff; --line:rgba(194,204,255,.16); }
* { box-sizing:border-box; } html,body { min-height:100%; } body { margin:0; min-width:320px; color:var(--ink); background:#080719; font-family:Arial,Helvetica,sans-serif; }
button { font:inherit; } .weather-shell { isolation:isolate; min-height:100vh; overflow:hidden; position:relative; padding:22px; background:radial-gradient(circle at 54% -8%,#3c196d 0,#171335 35%,#080719 73%); }
.app { position:relative; z-index:1; max-width:1250px; margin:auto; }.aurora { position:absolute; z-index:0; border-radius:50%; filter:blur(26px); pointer-events:none; mix-blend-mode:screen; }.aurora-one { width:60vw;height:25vw;top:-13vw;left:10vw;background:radial-gradient(ellipse,rgba(148,73,255,.32),transparent 64%);transform:rotate(-13deg); }.aurora-two { width:45vw;height:34vw;right:-21vw;top:17vw;background:radial-gradient(ellipse,rgba(22,209,246,.13),transparent 69%); }.star-field { position:absolute;z-index:0;width:3px;height:3px;background:#fff;border-radius:50%;opacity:.7;box-shadow:6vw 6vh #fff,19vw 19vh #99a4ff,27vw 9vh #fff,35vw 42vh #fff,53vw 5vh #d5bfff,62vw 23vh #fff,73vw 6vh #85eaff,87vw 31vh #fff,95vw 11vh #fff,9vw 61vh #fff,42vw 71vh #9985ff,68vw 79vh #fff,86vw 64vh #d5bfff,23vw 91vh #fff; }
.topbar { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:7px 4px 26px; }.brand { display:inline-flex;align-items:center;color:var(--ink);font-size:21px;font-weight:800;letter-spacing:-.9px; }.brand b { color:#b68bff; }.brand-mark { display:inline-flex;align-items:end;height:29px;gap:3px;margin-right:9px; }.brand-mark i { display:block;width:5px;border-radius:999px;background:linear-gradient(#b38cff,#79e9ff);transform:rotate(25deg); }.brand-mark i:nth-child(1){height:16px}.brand-mark i:nth-child(2){height:27px}.brand-mark i:nth-child(3){height:21px}
.header-actions { display:flex;align-items:center;gap:16px; }.sync-state { color:#afb5d5;font-size:12px;display:flex;align-items:center;gap:7px; }.sync-dot { width:7px;height:7px;border-radius:50%;background:#82f5c3;box-shadow:0 0 12px #82f5c3; }.sync-dot.loading { animation:ping 1s infinite;background:#f2ce74;box-shadow:0 0 12px #f2ce74; }.refresh-button { cursor:pointer;display:inline-flex;gap:8px;align-items:center;border:1px solid rgba(185,148,255,.55);padding:10px 15px;border-radius:11px;color:#f9f5ff;background:linear-gradient(145deg,rgba(150,91,255,.36),rgba(84,49,167,.37));box-shadow:inset 0 1px rgba(255,255,255,.18),0 7px 22px rgba(61,26,126,.22);font-size:13px;font-weight:700;transition:transform .2s,background .2s; }.refresh-button:hover:not(:disabled){transform:translateY(-2px);background:linear-gradient(145deg,rgba(171,114,255,.55),rgba(84,49,167,.47))}.refresh-button:disabled{cursor:wait;opacity:.8}.spin{display:inline-block;animation:spin .8s linear infinite}
.glass { position:relative;overflow:hidden;border:1px solid var(--line);border-radius:23px;background:linear-gradient(130deg,rgba(52,43,97,.72),rgba(20,22,59,.74));box-shadow:inset 0 1px rgba(255,255,255,.07),0 16px 40px rgba(0,0,0,.18);backdrop-filter:blur(18px); }.hero-grid{display:grid;grid-template-columns:minmax(0,2.18fr) minmax(260px,.82fr);gap:16px}.current-card{min-height:331px;padding:29px 31px}.current-card:after{content:"";position:absolute;width:440px;height:440px;right:-111px;top:-250px;border:1px solid rgba(162,157,255,.12);border-radius:50%;box-shadow:0 0 0 58px rgba(162,157,255,.025),0 0 0 116px rgba(162,157,255,.02);}.current-meta,.section-title{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;position:relative;z-index:1}.eyebrow{margin:0 0 8px;color:#9b91ce;font-family:monospace;font-size:10px;font-weight:700;letter-spacing:1.45px}.pulse{display:inline-block;width:6px;height:6px;margin:0 6px 1px 0;border-radius:999px;background:#8af1d6;box-shadow:0 0 11px #8af1d6}.current-meta h1,h2{margin:0;letter-spacing:-1.4px}.current-meta h1{font-size:clamp(22px,2.5vw,30px)}.date-line{margin:7px 0 0;color:var(--muted);font-size:13px}.location{color:#c4c8e2;border:1px solid rgba(194,204,255,.18);background:rgba(255,255,255,.04);border-radius:9px;padding:8px 10px;font-size:11px}.location b{color:#a579ff;font-size:16px;vertical-align:-2px}
.temperature-stage{position:relative;z-index:1;min-height:148px;display:flex;align-items:center;padding:6px 0 0}.temperature{color:#fff;font-size:clamp(89px,12vw,137px);font-weight:200;letter-spacing:-9px;line-height:.9;text-shadow:0 0 34px rgba(208,184,255,.13)}.temperature sup{position:relative;top:-1.25em;margin-left:5px;font-size:.24em;font-weight:400;letter-spacing:0}.condition-copy{margin:42px 0 0 28px}.condition-label{color:#eeeafa;font-size:14px;font-weight:700}.condition-copy p{margin:7px 0 0;color:#abb2d0;font-size:12px}.condition-copy strong{color:#eeeefe}.glyph{display:inline-flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-weight:400}.condition-copy .glyph{color:#ffde93;margin-right:4px;font-size:17px}.hero-glyph{margin:10px 15px 0 auto;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;color:#ffda7f;font-family:Georgia,serif;font-size:61px;background:radial-gradient(circle at 42% 36%,rgba(255,234,171,.2),rgba(181,108,255,.09) 46%,transparent 72%);filter:drop-shadow(0 0 18px rgba(255,211,119,.28))}.temperature-rail{position:relative;z-index:1;margin-top:17px;height:19px;background:linear-gradient(90deg,rgba(137,163,255,.2),rgba(255,214,130,.4),rgba(238,142,139,.3));border-radius:999px}.temperature-progress{position:absolute;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(129,224,255,.9),#ba98ff,#ffce77);transition:width .75s ease}.temperature-progress i{position:absolute;right:-5px;top:3px;width:13px;height:13px;border:3px solid #fff;background:#bea1ff;border-radius:50%;box-shadow:0 0 0 3px rgba(190,161,255,.22),0 0 15px #b998ff}.rail-labels{display:flex;justify-content:space-between;position:relative;top:26px;color:#99a1c6;font-size:11px}.rail-labels span:nth-child(2){color:#e0ddf4}
.sun-card{padding:29px 26px 23px;min-height:331px}.sun-visual{position:relative;height:152px;margin:-1px -7px 5px;overflow:hidden}.sun-core{position:absolute;left:50%;top:47px;width:70px;height:70px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 40% 38%,#fff6c8,#ffcb67 43%,#eb8d69 76%);box-shadow:0 0 30px rgba(255,207,118,.55),0 0 80px rgba(245,130,98,.18)}.sun-orbit{position:absolute;width:210px;height:96px;left:50%;top:78px;transform:translateX(-50%);border:1px solid rgba(255,205,123,.52);border-bottom:0;border-radius:50% 50% 0 0}.sun-horizon{position:absolute;left:5%;right:5%;bottom:17px;height:1px;background:linear-gradient(90deg,transparent,rgba(235,210,255,.65),transparent);box-shadow:0 0 8px rgba(235,210,255,.7)}.sun-times{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);padding-top:16px}.sun-times div+div{border-left:1px solid var(--line);padding-left:20px}.sun-times strong{display:block;margin-top:5px;font-size:17px}.sun-times small{display:block;margin-top:3px;color:#969dbc;font-size:10px}.tiny-sun{color:#ffca66;font-size:19px}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:16px}.metric{min-height:114px;display:flex;align-items:center;gap:15px;padding:20px;border-radius:16px}.metric-icon{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;color:#9ddfff;font-size:27px;border-radius:11px;background:rgba(104,181,255,.09)}.metric-icon.violet{color:#bda0ff}.metric-icon.green{color:#bff6e5}.metric p{margin:0 0 5px;color:#a2a9c8;font-size:11px}.metric strong{font-size:24px;letter-spacing:-.9px}.metric strong small{color:#c1c4d7;font-size:11px;font-weight:500;letter-spacing:0}.metric div>span{display:block;margin-top:4px;color:#8e96b9;font-size:10px}
.content-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);gap:16px;margin-top:16px}.hourly-card,.insight{min-height:261px;padding:26px 28px 20px}.section-title h2,.insight h2{font-size:21px}.legend{margin-top:16px;color:#a9afcd;font-size:10px}.legend i{display:inline-block;width:17px;height:2px;vertical-align:3px;margin-right:4px;background:linear-gradient(90deg,#86e7ff,#bb91ff)}.hourly-chart{position:relative;height:162px;display:grid;grid-template-columns:repeat(7,1fr);align-items:end;margin-top:2px;padding-top:8px}.chart-line{position:absolute;height:1px;left:3%;right:3%;top:58%;background:rgba(195,206,255,.17)}.hour{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;color:#9ba3c6;font-size:10px}.hour .glyph{position:relative;z-index:1;height:25px;color:#d4d6ed;font-size:23px}.hour.active .glyph{color:#ffdb82;filter:drop-shadow(0 0 8px rgba(255,207,112,.45))}.hour time{font-family:monospace}.hour small{position:absolute;bottom:-14px;color:#b78dff;font-size:9px}.chart-point{position:absolute;width:10px;height:10px;border:2px solid #d6efff;border-radius:50%;background:#a385ff;box-shadow:0 0 10px #ae8dff}.chart-point b{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#eeefff;font-size:10px;font-weight:600}.active:before{content:"";position:absolute;top:21px;bottom:17px;width:1px;background:linear-gradient(#b995ff,transparent);opacity:.8}
.insight{background:linear-gradient(135deg,rgba(82,55,143,.78),rgba(34,31,84,.8))}.insight:after{content:"";pointer-events:none;position:absolute;width:185px;height:185px;right:-77px;bottom:-78px;border-radius:50%;border:1px solid rgba(225,195,255,.32);background:radial-gradient(circle at 35% 35%,rgba(203,151,255,.56),rgba(116,65,214,.22) 38%,transparent 67%);box-shadow:0 0 0 18px rgba(194,144,255,.04),0 0 50px rgba(167,98,255,.24)}.insight h2{position:relative;max-width:205px;line-height:1.05}.insight>p:not(.eyebrow){position:relative;max-width:260px;margin:12px 0 0;color:#c1c1de;font-size:12px;line-height:1.55}.tags{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:17px}.tags span{border:1px solid rgba(212,190,255,.21);background:rgba(210,187,255,.09);border-radius:999px;padding:5px 8px;color:#e9ddff;font-size:10px}
.forecast{margin-top:16px;padding:26px 28px 12px}.forecast-title{align-items:end}.forecast-note{color:#949cbd;font-size:11px}.forecast-list{margin-top:16px}.forecast-day{min-height:57px;display:grid;grid-template-columns:1.1fr 32px minmax(115px,1fr) minmax(185px,1.6fr) 73px;align-items:center;gap:14px;border-top:1px solid rgba(194,204,255,.1);padding:9px 5px}.forecast-day.today{background:linear-gradient(90deg,rgba(151,103,255,.1),transparent);margin-inline:-8px;padding-inline:13px;border-radius:10px;border-top-color:transparent}.forecast-name strong{display:block;font-size:12px}.forecast-name span{color:#929ab9;font-size:10px}.forecast-day>.glyph{color:#ffdb89;font-size:21px}.forecast-condition{color:#bdc1dc;font-size:11px}.forecast-range{display:grid;grid-template-columns:29px 1fr 28px;align-items:center;gap:6px;color:#8991b2;font-size:11px}.forecast-range strong{color:#eff0ff;font-weight:600}.forecast-range>div{position:relative;height:5px;border-radius:999px;background:linear-gradient(90deg,#82dfff,#b596ff 48%,#ffbf78)}.forecast-range i{position:absolute;top:-3px;width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:#b38dff;box-shadow:0 0 8px #ac86ff}.rain-chance{color:#a48af0;font-size:11px}footer{display:flex;align-items:center;gap:7px;padding:24px 5px 2px;color:#858caf;font-size:10px}footer i{color:#614e96;font-style:normal}footer span:last-child{margin-left:auto}.footer-orbit{color:#b895ff;font-size:15px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{50%{transform:scale(1.6);opacity:.45}}
@media(max-width:860px){.hero-grid,.content-grid{grid-template-columns:1fr}.sun-card{min-height:240px}.sun-visual{height:112px}.sun-core{top:20px}.sun-orbit{top:51px}.metric-grid{grid-template-columns:repeat(2,1fr)}.forecast-day{grid-template-columns:1.1fr 28px minmax(120px,1fr) minmax(145px,1.4fr)}.rain-chance{display:none}}@media(max-width:560px){.weather-shell{padding:12px}.topbar{align-items:flex-start;padding:6px 3px 17px}.header-actions{flex-direction:column-reverse;align-items:flex-end;gap:8px}.sync-state{max-width:150px;text-align:right;justify-content:end}.current-card{min-height:320px;padding:23px 20px}.location{display:none}.temperature-stage{min-height:137px}.temperature{font-size:91px}.condition-copy{margin-left:18px}.hero-glyph{position:absolute;right:0;top:12px;width:58px;height:58px;font-size:38px}.metric-grid{gap:9px;margin-top:9px}.metric{min-height:98px;padding:14px;gap:9px}.metric-icon{display:none}.metric strong{font-size:21px}.hourly-card,.insight,.forecast{padding-inline:18px}.hourly-chart{margin-inline:-8px}.forecast-day{grid-template-columns:1fr 27px minmax(83px,1fr);gap:7px}.forecast-range,.forecast-condition{display:none}.forecast-day.today{margin-inline:-4px;padding-inline:9px}footer{flex-wrap:wrap}footer span:last-child{width:100%;margin-left:0}}