:root{
  --bg:#09111e;
  --bg2:#0d1727;
  --panel:rgba(15,25,41,.86);
  --panel-solid:#111d2d;
  --panel-2:#162235;
  --line:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.14);
  --text:#f5f8fc;
  --muted:#9eacbd;
  --muted-2:#718095;
  --accent:#71b7ff;
  --accent-2:#a9d6ff;
  --good:#70d6a5;
  --danger:#ff8c8c;
  --radius:22px;
  --shadow:0 24px 70px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg);color-scheme:dark}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg) 0%,#07101b 100%);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input{font:inherit}
button,a{touch-action:manipulation}
button{color:inherit}
a{color:inherit;text-decoration:none}
svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}

.weather-bg{
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
  background:
    radial-gradient(circle at 15% 0%,rgba(75,130,195,.17),transparent 34%),
    radial-gradient(circle at 82% 10%,rgba(48,84,128,.12),transparent 32%);
  transition:background 700ms ease;
}
.weather-bg::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 56%);
}
body[data-sky="clear-day"] .weather-bg{background:radial-gradient(circle at 75% 6%,rgba(255,205,117,.20),transparent 28%),radial-gradient(circle at 12% 0%,rgba(80,158,238,.28),transparent 36%)}
body[data-sky="clear-night"] .weather-bg{background:radial-gradient(circle at 70% 2%,rgba(116,138,194,.14),transparent 30%),radial-gradient(circle at 15% 0%,rgba(42,77,123,.22),transparent 34%)}
body[data-sky="cloud"] .weather-bg{background:radial-gradient(circle at 20% 0%,rgba(116,134,157,.18),transparent 35%),radial-gradient(circle at 82% 8%,rgba(64,82,104,.18),transparent 36%)}
body[data-sky="rain"] .weather-bg{background:radial-gradient(circle at 15% 0%,rgba(50,89,127,.24),transparent 38%),radial-gradient(circle at 80% 5%,rgba(33,57,81,.20),transparent 33%)}
body[data-sky="snow"] .weather-bg{background:radial-gradient(circle at 18% 0%,rgba(169,201,222,.20),transparent 36%),radial-gradient(circle at 80% 5%,rgba(102,132,161,.16),transparent 34%)}
body[data-sky="storm"] .weather-bg{background:radial-gradient(circle at 20% 0%,rgba(92,83,151,.20),transparent 36%),radial-gradient(circle at 80% 6%,rgba(44,61,90,.22),transparent 35%)}

.site-header{
  position:relative;z-index:20;
  width:min(1380px,calc(100% - 40px));
  margin:0 auto;
  padding:24px 0 14px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:42px;height:42px;border:1px solid var(--line-strong);border-radius:13px;
  display:grid;place-items:center;background:rgba(255,255,255,.035);
}
.brand-mark svg{width:24px;height:24px;stroke-width:1.6}
.brand strong{display:block;font-size:16px;letter-spacing:.01em}
.brand small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.header-actions{display:flex;align-items:center;gap:9px}
.icon-button,.unit-switch,.portfolio-button{
  height:40px;border:1px solid var(--line-strong);background:rgba(255,255,255,.035);border-radius:12px;
}
.icon-button{
  width:40px;display:grid;place-items:center;cursor:pointer;transition:.18s ease;
}
.icon-button:hover,.unit-switch:hover,.portfolio-button:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
.icon-button svg{width:18px;height:18px}
.icon-button.loading svg{animation:spin .8s linear infinite}
.unit-switch{display:flex;align-items:center;padding:3px}
.unit-switch button{
  border:0;background:transparent;color:var(--muted);height:32px;min-width:38px;border-radius:8px;cursor:pointer;
}
.unit-switch button.active{background:rgba(255,255,255,.09);color:var(--text)}
.portfolio-button{display:flex;align-items:center;padding:0 15px;font-size:13px;font-weight:650}

.page-shell{
  position:relative;z-index:2;
  width:min(1380px,calc(100% - 40px));
  margin:0 auto;
  padding:20px 0 48px;
}
.search-section{position:relative;z-index:12;margin:10px 0 24px}
.search-wrap{
  position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;
  min-height:58px;padding:8px 9px 8px 17px;border:1px solid var(--line-strong);
  border-radius:17px;background:rgba(12,21,35,.9);backdrop-filter:blur(20px);box-shadow:0 16px 42px rgba(0,0,0,.18);
}
.search-wrap:focus-within{border-color:rgba(113,183,255,.46);box-shadow:0 0 0 4px rgba(113,183,255,.08),0 16px 42px rgba(0,0,0,.2)}
.search-icon{width:18px;height:18px;color:var(--muted)}
#locationSearch{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:15px;padding:7px 0}
#locationSearch::placeholder{color:#78879a}
.use-location{
  height:40px;border:1px solid var(--line);background:rgba(255,255,255,.045);
  border-radius:11px;display:flex;align-items:center;gap:8px;padding:0 13px;cursor:pointer;font-size:13px;font-weight:620;
}
.use-location:hover{background:rgba(255,255,255,.08)}
.use-location svg{width:16px;height:16px;color:var(--accent)}
.search-results{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  overflow:hidden;border:1px solid var(--line-strong);border-radius:15px;background:#101c2c;box-shadow:var(--shadow);
}
.search-result{
  width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);
  padding:13px 16px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
}
.search-result:last-child{border-bottom:0}
.search-result:hover,.search-result.active{background:#17263a}
.search-result strong{display:block;font-size:14px}
.search-result span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.search-result .country{font-size:11px;color:var(--muted-2);white-space:nowrap}

.empty-state,.loading-state,.error-state{
  min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--line);border-radius:var(--radius);background:rgba(13,23,38,.5);
}
.empty-icon{
  width:76px;height:76px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid var(--line);
  display:grid;place-items:center;margin-bottom:20px;color:var(--accent-2)
}
.empty-icon svg{width:38px;height:38px;stroke-width:1.4}
.empty-state h1{font-size:clamp(28px,4vw,46px);letter-spacing:-.035em;margin:0;max-width:700px}
.empty-state p{color:var(--muted);font-size:16px;margin:12px 0 0}
.loading-state{gap:14px;color:var(--muted)}
.spinner{width:30px;height:30px;border:2px solid rgba(255,255,255,.12);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.error-state{gap:9px}
.error-state strong{font-size:22px}
.error-state span{color:var(--muted)}
.error-state button,.secondary-button,.primary-button{
  border:1px solid var(--line-strong);border-radius:11px;height:42px;padding:0 16px;cursor:pointer;font-weight:650
}
.error-state button,.secondary-button{background:rgba(255,255,255,.045)}
.primary-button{background:#eaf4ff;color:#0c1725;border-color:#eaf4ff}

.hero-card{
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.78fr);
  border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,rgba(20,34,54,.92),rgba(10,19,32,.94));
  box-shadow:var(--shadow);overflow:hidden;
}
.hero-main{padding:32px 34px 30px}
.location-line{display:flex;justify-content:space-between;gap:30px;align-items:flex-start}
.eyebrow{margin:0 0 7px;font-size:10px;font-weight:800;letter-spacing:.16em;color:#87a5c8}
.location-line h1{margin:0;font-size:clamp(25px,3vw,38px);letter-spacing:-.035em}
#placeMeta{margin:7px 0 0;color:var(--muted);font-size:13px}
.updated-block{text-align:right;color:var(--muted);font-size:11px;line-height:1.7;white-space:nowrap}
.updated-block span{display:block}
.current-grid{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-top:44px}
.current-primary{display:flex;align-items:center;gap:19px}
.current-icon{width:94px;height:94px;color:#d8ecff}
.current-icon svg{width:100%;height:100%;stroke-width:1.15}
.temperature{font-size:clamp(66px,8.5vw,112px);font-weight:620;line-height:.84;letter-spacing:-.07em}
.condition{font-size:18px;font-weight:650;margin-top:14px}
.feels{color:var(--muted);font-size:13px;margin-top:5px}
.today-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-width:260px}
.today-summary div{padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}
.today-summary span{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}
.today-summary strong{font-size:17px}
.hero-details{
  border-left:1px solid var(--line);background:rgba(6,13,23,.28);padding:22px;
  display:grid;grid-template-columns:1fr 1fr;gap:1px
}
.detail{min-height:116px;padding:18px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.detail:nth-child(2n){border-right:0}
.detail:nth-last-child(-n+2){border-bottom:0}
.detail-label{display:block;color:var(--muted);font-size:11px;margin-bottom:14px}
.detail strong{display:block;font-size:21px;letter-spacing:-.02em}
.detail small{display:block;color:var(--muted-2);font-size:11px;margin-top:5px}

.forecast-section{margin-top:24px;padding:26px 26px 22px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(13,23,38,.76)}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}
.section-heading h2{margin:0;font-size:20px;letter-spacing:-.025em}
.section-heading.compact{margin-bottom:15px}
.rail-controls{display:flex;gap:7px}
.rail-controls button{width:36px;height:36px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:10px;display:grid;place-items:center;cursor:pointer}
.rail-controls button:hover{background:rgba(255,255,255,.07)}
.rail-controls svg{width:16px;height:16px}
.hourly-rail{display:flex;gap:10px;overflow:auto;scrollbar-width:none;scroll-behavior:smooth;padding-bottom:2px}
.hourly-rail::-webkit-scrollbar{display:none}
.hour-card{
  flex:0 0 116px;min-height:176px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.025);
  padding:15px 13px;display:flex;flex-direction:column;align-items:center;text-align:center
}
.hour-card.now{border-color:rgba(113,183,255,.38);background:rgba(113,183,255,.07)}
.hour-time{font-size:11px;color:var(--muted);height:18px}
.hour-icon{width:42px;height:42px;margin:14px 0 12px;color:#d8ecff}
.hour-icon svg{width:100%;height:100%;stroke-width:1.4}
.hour-temp{font-size:20px;font-weight:700}
.hour-rain{font-size:11px;color:#8ec5ff;margin-top:auto}

.lower-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:24px;margin-top:24px}
.panel{border:1px solid var(--line);border-radius:var(--radius);background:rgba(13,23,38,.76);padding:25px}
.daily-list{display:flex;flex-direction:column}
.daily-row{
  display:grid;grid-template-columns:90px 44px minmax(130px,1fr) 64px 64px;align-items:center;gap:13px;
  min-height:68px;border-top:1px solid var(--line)
}
.daily-row:first-child{border-top:0}
.daily-day strong{display:block;font-size:13px}
.daily-day span{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.daily-icon{width:31px;height:31px;color:#d7eaff}.daily-icon svg{width:100%;height:100%;stroke-width:1.45}
.temp-range{display:flex;align-items:center;gap:10px}
.temp-range .bar{height:4px;flex:1;background:rgba(255,255,255,.07);border-radius:99px;position:relative;overflow:hidden}
.temp-range .bar span{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#79bdfd,#d4ecff)}
.temp-range small{font-size:11px;color:var(--muted);white-space:nowrap}
.daily-rain{font-size:12px;color:#86c2ff;text-align:right}
.daily-temp{font-size:13px;text-align:right}.daily-temp b{font-size:15px}.daily-temp span{color:var(--muted);margin-left:6px}

.side-stack{display:grid;gap:24px}
.sun-track{padding-top:6px}
.sun-arc{
  height:94px;border-radius:120px 120px 0 0;border:1px solid rgba(255,255,255,.15);border-bottom:0;
  position:relative;margin:20px 12px 0;background:linear-gradient(180deg,rgba(255,196,95,.06),transparent)
}
.sun-dot{
  position:absolute;width:14px;height:14px;border-radius:50%;background:#ffd387;box-shadow:0 0 22px rgba(255,202,108,.46);
  left:0%;bottom:-7px;transform:translateX(-50%);transition:left .5s ease,bottom .5s ease
}
.sun-times{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px}
.sun-times span{display:block;color:var(--muted);font-size:11px}
.sun-times strong{display:block;font-size:15px;margin-top:4px}
.sun-times div:last-child{text-align:right}
.rain-stat{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:18px 0 14px}
.rain-stat strong{font-size:38px;letter-spacing:-.04em}
.rain-stat span{font-size:11px;color:var(--muted);padding-bottom:5px}
.rain-bar{height:7px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden}
.rain-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#5da7ee,#a9d9ff);border-radius:99px;transition:width .5s ease}
.rain-panel>p{color:var(--muted);font-size:12px;line-height:1.6;margin:14px 0 0}

.site-footer{
  position:relative;z-index:2;width:min(1380px,calc(100% - 40px));margin:0 auto;
  border-top:1px solid var(--line);padding:24px 0 34px;display:flex;justify-content:space-between;align-items:flex-start;gap:30px;color:var(--muted)
}
.site-footer>div strong{display:block;color:var(--text);font-size:13px}
.site-footer>div span{display:block;font-size:11px;margin-top:5px}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:14px 20px;font-size:11px}
.site-footer a,.site-footer button{color:var(--muted);background:none;border:0;padding:0;cursor:pointer}
.site-footer a:hover,.site-footer button:hover{color:var(--text)}

.modal-backdrop{position:fixed;z-index:100;inset:0;background:rgba(1,7,13,.74);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}
.modal-card{
  width:min(480px,100%);background:#101c2c;border:1px solid var(--line-strong);border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.48);
  padding:28px;position:relative
}
.modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);display:grid;place-items:center;cursor:pointer}
.modal-close svg{width:16px;height:16px}
.modal-icon{width:48px;height:48px;border-radius:14px;background:rgba(113,183,255,.09);color:var(--accent);display:grid;place-items:center;margin-bottom:19px}
.modal-icon svg{width:23px;height:23px}
.modal-card h2{margin:0;font-size:27px;letter-spacing:-.035em}
.modal-card>p:not(.eyebrow){color:var(--muted);line-height:1.65;font-size:13px;margin:11px 0 0}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}
.privacy-card{width:min(580px,100%)}
.privacy-copy{display:grid;gap:16px;margin-top:22px}
.privacy-copy>div{padding-top:15px;border-top:1px solid var(--line)}
.privacy-copy>div:first-child{border-top:0;padding-top:0}
.privacy-copy strong{font-size:13px}
.privacy-copy p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.55}
.noscript{position:fixed;inset:auto 20px 20px;z-index:200;background:#401919;color:#fff;padding:14px;border-radius:12px;text-align:center}

@media(max-width:1050px){
  .hero-card{grid-template-columns:1fr}
  .hero-details{border-left:0;border-top:1px solid var(--line);grid-template-columns:repeat(3,1fr)}
  .detail{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .detail:nth-child(2n){border-right:1px solid var(--line)}
  .detail:nth-child(3n){border-right:0}
  .detail:nth-last-child(-n+3){border-bottom:0}
  .lower-grid{grid-template-columns:1fr}
  .side-stack{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .site-header,.page-shell,.site-footer{width:min(100% - 24px,1380px)}
  .site-header{padding-top:14px}
  .brand small{display:none}
  .brand-mark{width:38px;height:38px}
  .portfolio-button{display:none}
  .page-shell{padding-top:7px}
  .search-wrap{grid-template-columns:20px minmax(0,1fr);padding:8px 13px}
  .use-location{grid-column:1/-1;justify-content:center}
  .hero-main{padding:24px 21px}
  .location-line{display:block}
  .updated-block{text-align:left;margin-top:12px;display:flex;gap:12px;flex-wrap:wrap}
  .updated-block span{display:inline}
  .current-grid{display:block;margin-top:34px}
  .current-primary{align-items:center}
  .current-icon{width:72px;height:72px}
  .temperature{font-size:74px}
  .today-summary{margin-top:27px;min-width:0}
  .hero-details{grid-template-columns:repeat(2,1fr);padding:14px}
  .detail:nth-child(3n){border-right:1px solid var(--line)}
  .detail:nth-child(2n){border-right:0}
  .detail:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .detail:nth-last-child(-n+2){border-bottom:0}
  .forecast-section,.panel{padding:20px 17px}
  .daily-row{grid-template-columns:72px 36px 1fr 52px;gap:8px}
  .temp-range{display:none}
  .daily-rain{font-size:11px}
  .side-stack{grid-template-columns:1fr}
  .site-footer{display:block}
  .site-footer nav{justify-content:flex-start;margin-top:18px}
}
@media(max-width:450px){
  .header-actions{gap:6px}
  .unit-switch button{min-width:34px}
  .current-primary{gap:12px}
  .current-icon{width:62px;height:62px}
  .temperature{font-size:65px}
  .today-summary div{padding:11px}
  .hour-card{flex-basis:104px}
  .modal-card{padding:24px 20px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* Graphical professional layer */
.weather-bg{isolation:isolate}
.sky-orb{
  position:absolute;border-radius:50%;filter:blur(2px);opacity:.65;
  transition:transform 1.2s ease,background 1.2s ease,opacity 1.2s ease;
}
.sky-orb-a{
  width:min(54vw,760px);aspect-ratio:1;right:-11vw;top:-28vw;
  background:radial-gradient(circle,rgba(137,194,255,.20),rgba(79,132,194,.06) 48%,transparent 70%);
}
.sky-orb-b{
  width:min(42vw,590px);aspect-ratio:1;left:-13vw;top:25vh;
  background:radial-gradient(circle,rgba(58,111,173,.13),transparent 68%);
}
body[data-sky="clear-day"] .sky-orb-a{
  background:radial-gradient(circle,rgba(255,216,142,.36),rgba(126,190,252,.10) 45%,transparent 70%);
}
body[data-sky="clear-night"] .sky-orb-a{
  background:radial-gradient(circle,rgba(194,212,255,.15),rgba(83,105,161,.08) 45%,transparent 70%);
}
body[data-sky="storm"] .sky-orb-a{background:radial-gradient(circle,rgba(157,135,255,.22),transparent 68%)}
.weather-particles{position:absolute;inset:0;overflow:hidden}
.weather-particle{position:absolute;pointer-events:none}
.weather-particle.rain{
  width:1px;height:44px;border-radius:20px;background:linear-gradient(180deg,transparent,rgba(169,216,255,.42));
  animation:rainFall var(--speed,1.1s) linear infinite;transform:rotate(12deg);
}
.weather-particle.snow{
  width:5px;height:5px;border-radius:50%;background:rgba(237,248,255,.72);
  box-shadow:0 0 8px rgba(255,255,255,.18);animation:snowFall var(--speed,7s) linear infinite;
}
.weather-particle.star{
  width:2px;height:2px;border-radius:50%;background:rgba(231,241,255,.66);
  box-shadow:0 0 7px rgba(215,230,255,.65);animation:twinkle var(--speed,3.5s) ease-in-out infinite;
}
@keyframes rainFall{from{transform:translate3d(0,-90px,0) rotate(12deg)}to{transform:translate3d(-80px,110vh,0) rotate(12deg)}}
@keyframes snowFall{from{transform:translate3d(0,-30px,0) rotate(0)}to{transform:translate3d(var(--drift,50px),108vh,0) rotate(180deg)}}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.85;transform:scale(1.5)}}

.hero-card{position:relative}
.hero-main{position:relative;overflow:hidden;min-height:410px}
.hero-main>*:not(.hero-scene){position:relative;z-index:2}
.hero-scene{
  position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none;
  opacity:.9;
}
.scene-disc{
  position:absolute;width:240px;height:240px;border-radius:50%;right:7%;top:8%;
  background:radial-gradient(circle at 42% 42%,rgba(255,255,255,.72) 0 2%,rgba(130,198,255,.26) 18%,rgba(103,174,239,.08) 48%,transparent 70%);
  box-shadow:0 0 100px rgba(89,164,236,.12);
  transition:.7s ease;
}
body[data-sky="clear-day"] .scene-disc{
  background:radial-gradient(circle,rgba(255,242,196,.95) 0 10%,rgba(255,215,126,.48) 24%,rgba(255,190,78,.08) 58%,transparent 72%);
  box-shadow:0 0 120px rgba(255,190,91,.23);
}
body[data-sky="clear-night"] .scene-disc{
  width:180px;height:180px;
  background:radial-gradient(circle at 40% 38%,#edf4ff 0 12%,rgba(188,210,246,.34) 24%,rgba(100,126,176,.04) 57%,transparent 70%);
}
body[data-sky="rain"] .scene-disc,body[data-sky="storm"] .scene-disc{opacity:.28}
.scene-cloud{
  position:absolute;width:260px;height:80px;border-radius:60px;
  background:linear-gradient(180deg,rgba(208,227,244,.10),rgba(120,151,178,.045));
  filter:blur(.3px);box-shadow:0 24px 60px rgba(0,0,0,.12);
}
.scene-cloud:before,.scene-cloud:after{
  content:"";position:absolute;border-radius:50%;
  background:inherit;
}
.scene-cloud:before{width:100px;height:100px;left:38px;bottom:20px}
.scene-cloud:after{width:132px;height:132px;right:40px;bottom:16px}
.scene-cloud-a{right:-35px;top:43%;transform:scale(.9);opacity:.85;animation:cloudDrift 18s ease-in-out infinite alternate}
.scene-cloud-b{right:27%;top:27%;transform:scale(.48);opacity:.42;animation:cloudDrift 25s ease-in-out infinite alternate-reverse}
@keyframes cloudDrift{from{translate:-10px 0}to{translate:26px 2px}}
.scene-horizon{
  position:absolute;left:0;right:0;bottom:-1px;height:58%;
  background:linear-gradient(180deg,transparent 0%,rgba(8,16,28,.06) 32%,rgba(8,16,28,.32) 100%);
  mask-image:linear-gradient(to bottom,transparent,black 35%);
}
body[data-sky="clear-day"] .scene-cloud{opacity:.32}
body[data-sky="clear-night"] .scene-cloud{opacity:.26}
body[data-sky="storm"] .scene-cloud{opacity:.9;background:linear-gradient(180deg,rgba(132,140,165,.15),rgba(68,75,98,.09))}

.current-icon{
  position:relative;border-radius:26px;padding:10px;
  background:radial-gradient(circle at 50% 45%,rgba(152,209,255,.12),rgba(255,255,255,.015) 68%);
  border:1px solid rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 46px rgba(0,0,0,.12);
}
.current-icon:after{
  content:"";position:absolute;inset:9%;border:1px solid rgba(255,255,255,.045);border-radius:50%;
}
.temperature{
  text-shadow:0 12px 38px rgba(0,0,0,.22);
  background:linear-gradient(180deg,#fff 0%,#d6e9f8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.detail-visual{display:flex;align-items:center;justify-content:space-between;gap:14px}
.detail-copy{min-width:0}
.mini-gauge{
  --gauge:0%;
  flex:0 0 48px;width:48px;height:48px;border-radius:50%;
  background:conic-gradient(var(--accent) var(--gauge),rgba(255,255,255,.08) 0);
  display:grid;place-items:center;position:relative;
}
.mini-gauge:before{
  content:"";position:absolute;inset:5px;border-radius:50%;background:#101b2b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.mini-gauge span{position:relative;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.uv-gauge{background:conic-gradient(#f2c46f var(--gauge),rgba(255,255,255,.08) 0)}
.uv-gauge span{background:#f2c46f;box-shadow:0 0 10px rgba(242,196,111,.7)}
.mini-compass{
  flex:0 0 54px;width:54px;height:54px;border-radius:50%;position:relative;
  border:1px solid rgba(255,255,255,.1);
  background:radial-gradient(circle,rgba(255,255,255,.045),rgba(255,255,255,.01));
}
.mini-compass:before,.mini-compass:after{
  content:"";position:absolute;left:50%;top:7px;bottom:7px;width:1px;background:rgba(255,255,255,.055)
}
.mini-compass:after{transform:rotate(90deg)}
.compass-n{position:absolute;top:3px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:800;color:#8ebde8;z-index:2}
.compass-arrow{
  --wind-deg:0deg;
  position:absolute;left:50%;top:50%;width:2px;height:20px;transform-origin:50% 100%;
  transform:translate(-50%,-100%) rotate(var(--wind-deg));background:linear-gradient(180deg,#bfe2ff,#6db4f5);border-radius:2px;
}
.compass-arrow:before{
  content:"";position:absolute;top:-3px;left:-3px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid #bfe2ff;
}

.hour-card{position:relative;overflow:hidden;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.hour-card:hover{transform:translateY(-3px);border-color:rgba(113,183,255,.22);background:rgba(255,255,255,.04)}
.hour-card:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,rgba(110,180,246,.45),transparent);
  transform:scaleX(var(--rain-scale,0));transform-origin:left;
}
.trend-card{
  margin-top:18px;border-top:1px solid var(--line);padding-top:16px;
}
.trend-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:7px}
.trend-head span{font-size:12px;font-weight:700;color:#c8d8e9}
.trend-head small{font-size:11px;color:var(--muted)}
.trend-chart{display:block;width:100%;height:146px;overflow:visible}
.trend-area{fill:url(#trendFill);stroke:none}
.trend-line{fill:none;stroke:url(#trendStroke);stroke-width:3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 5px 10px rgba(73,143,209,.18))}
.trend-dot{fill:#cde9ff;stroke:#17304a;stroke-width:4;vector-effect:non-scaling-stroke}
.trend-grid{stroke:rgba(255,255,255,.05);stroke-width:1;vector-effect:non-scaling-stroke}

.daily-row{transition:background .18s ease,padding .18s ease}
.daily-row:hover{background:rgba(255,255,255,.018)}
.temp-range .bar{height:5px}
.temp-range .bar span{box-shadow:0 0 16px rgba(113,183,255,.2)}

.sun-arc:before{
  content:"";position:absolute;inset:9px 12px 0;border-radius:100px 100px 0 0;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,197,91,.12),transparent 65%);
}
.rain-scale{display:flex;justify-content:space-between;color:var(--muted-2);font-size:8px;margin-top:6px}

.panel,.forecast-section,.hero-card{
  backdrop-filter:blur(26px) saturate(118%);
}
.panel:before,.forecast-section:before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.panel,.forecast-section{position:relative;overflow:hidden}

@media(max-width:760px){
  .hero-main{min-height:0}
  .hero-scene{opacity:.58}
  .scene-disc{right:-14%;top:18%;width:170px;height:170px}
  .scene-cloud-a{right:-120px}
  .trend-chart{height:118px}
  .mini-gauge,.mini-compass{transform:scale(.9)}
}

/* Additional weather detail and tool discovery */
.extras-section{margin:30px 0}.unit-preferences{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.unit-preferences label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px}.unit-preferences select{border:1px solid var(--line-strong);border-radius:8px;padding:7px;background:var(--panel-solid);color:var(--text);font:inherit}.extra-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:12px}.extra-metric,.tools-discovery{border:1px solid var(--line-strong);border-radius:16px;background:var(--panel);padding:17px}.extra-metric span,.extra-metric small,.extra-metric a{display:block;color:var(--muted);font-size:12px}.extra-metric strong{display:block;font-size:19px;margin:7px 0}.extra-metric a{color:var(--accent-2);margin-top:9px}.weather-guidance{border-left:3px solid var(--accent);padding:12px 16px;background:rgba(113,183,255,.07);border-radius:0 10px 10px 0}.tools-discovery{margin-top:30px}.tools-links{display:flex;flex-wrap:wrap;gap:9px}.tools-links a{border:1px solid var(--line-strong);padding:8px 11px;border-radius:8px;color:var(--accent-2);font-size:13px}.tools-links a:hover{background:rgba(113,183,255,.1)}@media(max-width:600px){.extra-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.header-actions{flex-wrap:wrap}.extra-metric{min-width:0}.extra-metric strong{overflow-wrap:anywhere}}@media(max-width:380px){.extra-metrics{grid-template-columns:1fr}}

.share-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;margin-bottom:16px}.share-links>span:first-child{color:var(--muted);font-size:13px;margin-right:4px}.share-links a,.share-links button{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:9px;background:rgba(255,255,255,.035);color:var(--text);cursor:pointer}.share-links svg{width:17px;height:17px}.share-links a:hover,.share-links button:hover{background:rgba(113,183,255,.12)}.share-links .share-status{font-size:12px;color:var(--muted)}