:root{--blue:#075bb9;--dark:#0d3674;--orange:#fa641a;--ice:#f4fbff;--white:#fff;--ink:#102d60}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:#061a43;overflow:hidden;font-family:"Noto Sans CJK SC","Microsoft YaHei",Arial,sans-serif}.stage{width:1080px;height:1920px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--scale,1));transform-origin:center center;overflow:hidden;color:white;background:#0366c1;isolation:isolate}.scene{position:absolute;inset:0;background-image:url('assets/backgrounds/bg_day_1080x1920.jpg');background-size:cover;transition:background-image 1s}.ambient-clouds{position:absolute;inset:0;background:url('assets/overlays/clouds.svg') center/cover;opacity:.34;animation:cloud-shift 65s ease-in-out infinite alternate;pointer-events:none}.weather-overlay{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity 1.8s ease;overflow:hidden}.rain-layer{position:absolute;inset:-560px -80px;background-repeat:repeat;will-change:background-position;pointer-events:none}.rain-back{background-image:url('assets/effects/rain_far.svg');background-size:480px 560px;opacity:.58;animation:weather-rain-back 1.35s linear infinite}.rain-front{background-image:url('assets/effects/rain_near.svg');background-size:480px 560px;opacity:.54;animation:weather-rain-front .94s linear infinite}.stage.is-rain .weather-overlay{opacity:.49}.stage.weather-drizzle .weather-overlay{opacity:.2}.stage.weather-heavy_rain .weather-overlay{opacity:.83}.stage.is-thunderstorm .weather-overlay{opacity:.7}.stage.weather-heavy_rain .rain-front,.stage.is-thunderstorm .rain-front{animation-duration:.58s}.night-stars{position:absolute;inset:0;z-index:1;background:url('assets/overlays/stars.svg') center/cover;opacity:0;pointer-events:none;transition:opacity 1.8s ease}.stage.theme-night .night-stars{opacity:.56}.sky-sunbeams{position:absolute;left:-130px;top:-188px;width:720px;height:720px;background:url('assets/effects/sky_sunbeams.svg') center/contain no-repeat;z-index:1;opacity:0;transform-origin:center center;pointer-events:none;transition:opacity 1.6s ease;animation:sky-rays-rotate 95s linear infinite}.stage.is-sunny:not(.theme-night) .sky-sunbeams{opacity:.27}.stage.theme-evening.is-sunny .sky-sunbeams{opacity:.15}.thunder-glow{position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse at 68% 19%,rgba(211,230,255,.65),transparent 57%);opacity:0;pointer-events:none}.stage.is-thunderstorm .thunder-glow{animation:thunder-soft 19s infinite}.sea-motion{position:absolute;left:0;right:0;bottom:0;height:240px;z-index:3;overflow:hidden;pointer-events:none;mix-blend-mode:screen}.sea-wave{position:absolute;bottom:-10px;width:1190px;height:240px;max-width:none;left:-55px;object-fit:fill;will-change:transform}.wave-back{opacity:.8;animation:wave-back-flow 12s ease-in-out infinite alternate}.wave-front{opacity:.92;animation:wave-front-flow 7.8s ease-in-out infinite alternate-reverse}.sea-ripples{position:absolute;inset:0;width:1080px;height:240px;opacity:0;transition:opacity 1s;animation:ripples-breathe 3.5s ease-in-out infinite}.stage.is-rain .sea-ripples,.stage.is-thunderstorm .sea-ripples{opacity:.8}.stage.weather-heavy_rain .sea-ripples{opacity:1}.stage.theme-night .sea-wave{opacity:.51}.light-sweep{position:absolute;left:-80%;top:5px;width:55%;height:140px;transform:skewX(-30deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.095),transparent);animation:sweep 60s linear infinite;pointer-events:none;z-index:1}
.top-bar{position:absolute;top:0;left:0;right:0;height:175px;z-index:5;background:linear-gradient(180deg,rgba(0,47,133,.7),rgba(0,68,163,.06))}.brand-logo{position:absolute;left:34px;top:12px;width:332px;height:auto;filter:drop-shadow(0 3px 4px rgba(0,37,91,.3))}.top-separator{position:absolute;left:385px;top:28px;height:68px;width:2px;background:rgba(255,255,255,.75)}.top-claim{position:absolute;left:408px;top:37px;font-size:21px;letter-spacing:2px;font-weight:800;white-space:nowrap;text-shadow:0 2px 7px #075091}.gold-swish{position:absolute;top:39px;left:7px;right:0;height:6px;border-bottom:5px solid #ffdc28;border-radius:50%;transform:rotate(-3deg)}.live-pill{position:absolute;top:24px;right:35px;background:linear-gradient(180deg,#ff565a,#e00812);border:2px solid rgba(255,255,255,.65);border-radius:34px;height:56px;min-width:233px;display:flex;align-items:center;justify-content:center;gap:11px;padding:0 20px;font-size:24px;font-weight:900;box-shadow:0 8px 23px rgba(91,9,34,.25)}.live-dot{width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 0 12px white;animation:live-pulse 2.2s ease-in-out infinite}.strapline{position:absolute;left:39px;bottom:19px;font-size:22px;font-weight:700;white-space:nowrap;text-shadow:0 2px 4px #003571}.loc-symbol{color:#fff}.strap-divider{margin:0 16px;opacity:.65}.clock{position:absolute;right:35px;bottom:14px;font-size:18px;display:flex;align-items:center;gap:15px;font-weight:700;text-shadow:0 2px 5px #003b7c}.clock b{font-size:31px;letter-spacing:1px}
.panel{position:absolute;filter:drop-shadow(0 7px 12px rgba(0,50,138,.20))}.hero{left:29px;top:180px;width:1022px;height:318px;background:url('assets/panels/hero_panel.svg') center/100% 100% no-repeat;box-shadow:inset 0 0 80px rgba(0,135,220,.1)}.hero-title{position:absolute;top:20px;left:40px;display:flex;align-items:center;gap:11px;font-size:32px}.hero-title img{height:48px;width:48px}.hero-title strong{font-size:40px}.hero-title span{font-size:27px;margin-left:8px;opacity:.95}.hero-main{position:absolute;left:32px;top:85px;display:flex;align-items:center;gap:0}.hero-weather-shell{position:relative;width:170px;height:171px;flex:none;isolation:isolate}.hero-weather-icon{position:absolute;inset:0;height:171px;width:170px;z-index:2;filter:drop-shadow(0 5px 5px rgba(0,0,0,.12))}.hero-sun-halo{position:absolute;left:-19px;top:-26px;width:188px;height:188px;z-index:1;opacity:0;transform-origin:50% 50%;transition:opacity 1s ease;animation:hero-sun-rotate 48s linear infinite}.stage.is-sunny .hero-sun-halo{opacity:.63}.stage.theme-night .hero-sun-halo{opacity:0}.hero-temps{display:flex;flex-direction:column;margin-left:0;margin-top:-14px;min-width:275px}.current-temp{height:135px;font-size:139px;line-height:135px;letter-spacing:-10px;font-weight:900;text-shadow:0 5px 9px rgba(0,31,90,.35)}.current-temp small{font-size:45px;letter-spacing:0;margin-left:4px;vertical-align:top;position:relative;top:-17px}.current-condition{font-size:34px;font-weight:850;padding-left:10px;line-height:43px}.hero-divider{position:absolute;left:538px;top:91px;width:3px;height:176px;background:linear-gradient(transparent,rgba(255,255,255,.8),transparent)}.hero-details{position:absolute;left:577px;top:92px;width:408px}.range-row{display:flex;align-items:baseline;gap:24px;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.25);padding:4px 0 20px}.range-row span{font-size:34px;font-weight:850}.range-row b{font-size:39px}.range-row em{font-style:normal;color:#abedff}.range-row strong{color:#ffbd4c}.detail-grid{margin-top:21px;display:grid;grid-template-columns:1fr 1fr;row-gap:17px;column-gap:8px}.detail-grid div{white-space:nowrap;display:flex;gap:6px;align-items:center;font-size:21px;font-weight:650}.detail-grid img{height:30px;width:30px}.detail-grid b{font-size:23px}.hero-bottom-hint{position:absolute;bottom:12px;right:34px;display:flex;gap:20px;font-size:14px;opacity:.72}
.regions{left:29px;top:519px;width:1022px;height:605px;background:url('assets/panels/regions_panel.svg') center/100% 100% no-repeat;color:#082e68}.section-heading{height:68px;display:flex;align-items:center;justify-content:space-between;padding:5px 34px 0 30px}.heading-left{display:flex;gap:10px;align-items:center}.heading-left img{width:43px;height:43px;filter:brightness(.65)}.heading-left strong{font-size:34px;letter-spacing:-1px}.date-chip{display:flex;align-items:center;font-size:22px;font-weight:700;gap:9px;color:#103975}.date-chip img{height:27px;width:27px;filter:brightness(.65)}.region-grid{position:absolute;left:23px;right:23px;top:72px;bottom:24px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:14px}.region-card{position:relative;min-width:0;min-height:0;background:url('assets/panels/region_card.svg') center/100% 100% no-repeat;border-radius:25px;overflow:hidden;box-shadow:0 4px 6px rgba(23,80,144,.17);transition:box-shadow .8s ease,filter .8s ease}.region-card:after{content:"";position:absolute;inset:1px;border-radius:24px;border:3px solid transparent;pointer-events:none;transition:border-color .5s,box-shadow .5s}.region-card.focused:after{border-color:#1c90ff;box-shadow:inset 0 0 18px #9feaff}.region-photo{position:absolute;top:3px;left:3px;right:3px;height:148px;background-size:cover;background-position:center;border-radius:22px 22px 0 0}.region-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 28%,rgba(0,57,117,.75) 100%)}.region-place{position:absolute;top:97px;width:100%;text-align:center;color:white;font-size:31px;font-weight:900;line-height:31px;text-shadow:0 2px 5px #084078}.region-place small{display:block;font-size:19px;font-weight:700;margin-top:1px}.region-bottom{position:absolute;top:153px;left:12px;right:12px;bottom:7px;display:flex;align-items:center;justify-content:center;gap:12px;color:#123467}.region-bottom img{width:90px;height:87px}.region-bottom .region-temp{white-space:nowrap;font-size:28px;font-weight:900}.region-bottom .region-temp em{color:#fd5c14;font-style:normal}.region-bottom .region-condition{font-size:13px;color:#5683a9;position:absolute;bottom:0;right:5px;display:none}
.market-row{position:absolute;top:1146px;left:29px;width:1022px;height:277px;display:flex;gap:17px}.market{position:relative;width:calc((100% - 17px)/2);height:100%;background:url('assets/panels/market_panel.svg') center/100% 100% no-repeat;filter:drop-shadow(0 6px 8px rgba(1,67,146,.17));color:#102c61}.market-header{position:absolute;inset:1px 1px auto 1px;height:66px;border-radius:28px 28px 8px 8px;background:linear-gradient(110deg,#0069da,#157ded,#005bb8);display:flex;align-items:center;padding:0 22px;gap:12px;color:white}.market-header img{width:43px;height:43px}.market-name{font-size:28px;font-weight:900;white-space:nowrap}.market-name small{font-size:15px;font-weight:650}.market-fx .market-name{font-size:27px;display:flex;flex-direction:column;gap:0;line-height:29px}.market-fx .market-name small{font-size:18px}.market-header .updated{margin-left:auto;font-size:14px;white-space:nowrap;align-self:center;opacity:.86}.fuel-rows{position:absolute;top:75px;left:22px;right:22px;display:grid;grid-template-rows:repeat(4,42px);row-gap:7px}.fuel-line{background:#cde6fc;border-radius:15px;height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 0}.fuel-label{width:208px;border-radius:13px;height:40px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:850}.fuel-label.g95{background:linear-gradient(100deg,#14aa46,#138a2b)}.fuel-label.g91{background:linear-gradient(100deg,#ffad03,#ff730b)}.fuel-label.e20{background:linear-gradient(100deg,#19a9f4,#006cd0)}.fuel-label.diesel{background:linear-gradient(100deg,#6657ef,#303ab9)}.fuel-value{color:#142947;font-size:33px;font-weight:900;letter-spacing:-1px}.market-footer{position:absolute;bottom:10px;right:26px;font-size:14px;color:#597da7}.exchange-rows{position:absolute;left:18px;right:18px;top:81px;display:flex;flex-direction:column;gap:14px}.exchange-line{height:73px;background:#cee8fd;border-radius:19px;display:flex;align-items:center;justify-content:space-around;padding:0 10px;gap:6px;white-space:nowrap;color:#112a60;font-size:22px;font-weight:850}.exchange-line .flag{width:60px;height:42px;flex:none;filter:drop-shadow(0 2px 2px #84abc6)}.exchange-line strong{color:#f26718;font-size:31px}.exchange-line b{font-size:21px}
.three-day{left:29px;top:1445px;width:1022px;height:163px;background:url('assets/panels/forecast_panel.svg') center/100% 100% no-repeat;display:flex;color:#123268}.three-day-title{width:243px;border-radius:29px 38px 34px 28px;background:linear-gradient(115deg,#0078e8,#0056c3);height:158px;margin:2px 0 0 2px;color:white;position:relative;padding:56px 10px 0 17px;text-align:center;font-size:26px;font-weight:800;line-height:35px}.three-day-title img{width:54px;height:54px;position:absolute;top:20px;left:20px}.three-day-title span{position:absolute;left:79px;top:25px;font-size:27px}.three-day-title strong{display:block;font-size:26px;white-space:nowrap}.forecast-items{flex:1;display:grid;grid-template-columns:repeat(3,1fr);padding:10px 10px 10px 0}.forecast-item{border-right:2px solid #b8daf3;position:relative;padding:4px 10px 0;text-align:center}.forecast-item:last-child{border:0}.forecast-date{font-size:20px;font-weight:850;margin-bottom:2px}.forecast-middlerow{display:flex;align-items:center;gap:3px;justify-content:center}.forecast-middlerow img{width:90px;height:74px}.forecast-side{display:flex;flex-direction:column;gap:1px;text-align:left}.forecast-description{font-size:20px;font-weight:800}.forecast-temp{font-size:26px;font-weight:900;white-space:nowrap}.forecast-temp b{color:#f26920}
.ticker{left:29px;top:1631px;width:1022px;height:87px;background:url('assets/panels/ticker_panel.svg') center/100% 100% no-repeat;display:flex;align-items:center;padding:0 10px 0 14px;overflow:hidden}.ticker-badge{height:58px;min-width:234px;border-radius:29px;background:linear-gradient(180deg,#fff,#e0f1ff);border-bottom:4px solid #ffb71c;color:#0c3679;display:flex;justify-content:center;align-items:center;gap:8px;font-size:29px;font-weight:900;z-index:2}.ticker-badge img{width:46px;height:46px;filter:brightness(.8)}.ticker-viewport{overflow:hidden;flex:1;height:100%;position:relative;mask-image:linear-gradient(to right,transparent,#000 3%,#000 95%,transparent)}.ticker-track{display:flex;gap:66px;align-items:center;height:100%;white-space:nowrap;width:max-content;animation:ticker 36s linear infinite;font-size:24px;font-weight:780}.ticker-item:before{content:'•';margin-right:20px;color:#fff}.footer-brand{position:absolute;z-index:5;bottom:57px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:25px;flex-direction:column;text-shadow:0 2px 9px rgba(0,20,90,.7);font-size:30px;font-weight:900}.footer-brand small{font-size:17px;opacity:.9}.watermark{position:absolute;bottom:11px;right:15px;background:rgba(1,28,70,.65);font-size:14px;border-radius:12px;padding:5px 10px;z-index:11}.warning-banner{position:absolute;top:490px;left:35px;right:35px;background:#fbc63c;color:#382100;border:3px solid white;border-radius:17px;font-size:22px;font-weight:900;text-align:center;z-index:20;padding:9px}
/* animations */
@keyframes live-pulse{0%,100%{opacity:1;box-shadow:0 0 8px white}50%{opacity:.4;box-shadow:0 0 17px white}}@keyframes cloud-shift{from{transform:translateX(-17px)}to{transform:translateX(17px)}}@keyframes sweep{0%{left:-80%}100%{left:170%}}@keyframes ticker{to{transform:translateX(-50%)}}@keyframes rain-shift{to{background-position:-12px 42px}}@keyframes fade-change{0%{opacity:.4;filter:brightness(1.4)}100%{opacity:1;filter:brightness(1)}}.value-changing{animation:fade-change .6s ease-out}.stage.theme-night .ambient-clouds{opacity:.12}.stage.theme-night .top-bar{background:linear-gradient(180deg,rgba(3,16,67,.9),rgba(4,31,97,.05))}
@media(prefers-reduced-motion:reduce){.live-dot,.ambient-clouds,.light-sweep,.ticker-track,.value-changing{animation:none!important}}

/* V2 SUN + OCEAN + RAIN MOTION. Decorative PNG/SVG assets are separated from data and typography. */
@keyframes hero-sun-rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes sky-rays-rotate{from{transform:rotate(-6deg)}to{transform:rotate(354deg)}}
@keyframes wave-back-flow{0%{transform:translateX(-40px) translateY(-2px)}50%{transform:translateX(17px) translateY(6px)}100%{transform:translateX(55px) translateY(-3px)}}
@keyframes wave-front-flow{0%{transform:translateX(45px) translateY(5px)}50%{transform:translateX(0) translateY(-4px)}100%{transform:translateX(-55px) translateY(3px)}}
@keyframes weather-rain-back{from{background-position:0 -560px}to{background-position:-24px 0}}
@keyframes weather-rain-front{from{background-position:0 -560px}to{background-position:-40px 0}}
@keyframes ripples-breathe{0%,100%{filter:brightness(.8);transform:translateY(1px)}50%{filter:brightness(1.4);transform:translateY(-5px)}}
@keyframes thunder-soft{0%,89%,91%,93%,100%{opacity:0}90%{opacity:.19}92%{opacity:.09}}
@media(prefers-reduced-motion:reduce){.sky-sunbeams,.hero-sun-halo,.sea-wave,.sea-ripples,.rain-layer,.thunder-glow{animation:none!important}.stage.is-rain .weather-overlay{opacity:.15!important}.stage.is-thunderstorm .weather-overlay{opacity:.15!important}}

/* Keep live data above the rain particles; only sky and ocean behind the cards get precipitation. */
.hero,.regions,.market-row,.three-day,.ticker{z-index:4}

/* OBS readability refinements requested after the first live review. */
.current-temp{color:#ffe45d;text-shadow:0 3px 0 rgba(119,77,0,.28),0 5px 13px rgba(0,31,90,.52)}
.region-place{top:80px;font-size:37px;line-height:39px}
.region-place small{font-size:25px;line-height:28px;margin-top:0}
.region-bottom{gap:5px}
.region-bottom img{width:76px;height:80px}
.region-bottom .region-temp{font-size:34px}
.fuel-rows{grid-template-rows:repeat(4,40px);row-gap:4px}
.fuel-line{height:40px}
.fuel-label{width:160px;height:39px;font-size:29px}
.fuel-value{font-size:34px}
.market-fuel .market-footer{font-size:14px;bottom:7px}
.exchange-rows{top:76px;gap:8px}
.exchange-line{height:62px;font-size:24px}
.exchange-line strong{font-size:34px}
.market-fx .market-footer{left:22px;right:18px;bottom:9px;font-size:18px;line-height:22px;font-weight:700;color:#315b91}
.region-card.focused .region-photo{animation:region-photo-focus 10s ease-in-out both}
.region-card.focused:before{content:"";position:absolute;z-index:3;top:2px;bottom:2px;left:-65%;width:42%;transform:skewX(-24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:region-card-glint 1.45s ease-out both;pointer-events:none}
@keyframes region-photo-focus{0%{transform:scale(1)}100%{transform:scale(1.065)}}
@keyframes region-card-glint{from{left:-65%}to{left:145%}}
@media(prefers-reduced-motion:reduce){.region-card.focused .region-photo,.region-card.focused:before{animation:none!important}}