@font-face{font-family:Alexandria;src:url(assets/alexandria.ttf)format("truetype");font-weight:100 900;font-display:swap}@font-face{font-family:Sora;src:url(assets/sora.ttf)format("truetype");font-weight:100 800;font-display:swap}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#081e34;color:#fff}body{display:grid;place-items:center;font-family:Sora,Alexandria,sans-serif;-webkit-font-smoothing:antialiased}#ambient{position:fixed;inset:0;background:radial-gradient(ellipse at 80% 10%,#457781,#102f4a 65%)}#stage{position:absolute;width:504px;height:336px;overflow:hidden;transform-origin:center;isolation:isolate;background:#123c62}canvas,.shade,.edge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.shade{background:radial-gradient(ellipse at 50% 42%,#041c3212,transparent 70%),linear-gradient(0deg,#04172be0,transparent 92%)}.edge{box-shadow:inset 0 0 100px #071c362b}.edge:after{content:'';position:absolute;left:202px;top:-179px;width:440px;height:440px;border:1px solid #ffffff13;border-radius:50%;box-shadow:0 0 0 30px #ffffff04,0 0 0 90px #ffffff03}.face{position:absolute;inset:0;opacity:0;transform:translateY(5px);transition:opacity 1s ease,transform 1s ease;pointer-events:none;text-shadow:0 2px 20px #041b4855}.face.active{opacity:1;transform:translateY(0)}[lang=ar]{font-family:Alexandria,Sora,sans-serif}.top{position:absolute;top:20px;left:27px;right:27px;display:flex;justify-content:space-between;align-items:center}.place{display:flex;flex-direction:column;gap:0}.city{font-size:30px;line-height:1.3;letter-spacing:0;font-weight:500}.region{font-size:10px;opacity:.68;line-height:1.6;letter-spacing:.15px}.live{border:1px solid #c4efff30;border-radius:20px;background:#c4edff0a;padding:6px 10px 5px;min-width:60px;font-size:9px;letter-spacing:1.5px;display:flex;justify-content:center;align-items:center;gap:6px;opacity:.92}.dot{width:4px;height:4px;border-radius:50%;background:#c9f2df;box-shadow:0 0 8px #bdffe7}.clock-block{position:absolute;left:23px;right:23px;top:81px;text-align:center}.clock{font-family:Sora,sans-serif;display:flex;align-items:baseline;gap:10px;line-height:1;direction:ltr;justify-content:center}.digits{font-size:99px;font-weight:400;letter-spacing:-5.5px;font-variant-numeric:tabular-nums}.period{font-family:Sora,Alexandria,sans-serif;font-size:16px;letter-spacing:.2px;opacity:.8}.date{font-size:15px;margin-top:6px;opacity:.78;line-height:1.5;letter-spacing:.15px}.weather{position:absolute;left:25px;right:25px;top:216px;height:88px;padding:9px 18px;display:flex;align-items:center;justify-content:space-between;border:1px solid #b7e0f52b;border-radius:22px;background:linear-gradient(115deg,#c9eaff12,#c0e7ff05);box-shadow:inset 0 1px 0 #ffffff0a,0 12px 35px #04162e24}.temperature{font-family:Sora,sans-serif;font-size:62px;letter-spacing:-3px;line-height:1;direction:ltr;white-space:nowrap}.degree{font-size:35px;vertical-align:top;display:inline-block;margin-top:4px;margin-left:3px}.weather-details{display:flex;gap:9px;align-items:center;max-width:285px}.weather-copy{text-align:start}.condition{font-size:19px;line-height:1.55;white-space:nowrap}.range{font-size:12px;opacity:.67;display:flex;gap:10px;line-height:1.7;white-space:nowrap}.range b{font-weight:400;font-family:Sora;display:inline-block;direction:ltr;unicode-bidi:isolate}.range-period{opacity:.68;font-size:9px;align-self:center}.icon{width:49px;height:49px;overflow:visible;flex-shrink:0;filter:drop-shadow(0 3px 8px #092b5233)}.icon .rays{transform-origin:32px 32px;animation:spin 90s linear infinite}.icon .cloud{animation:float 6s ease-in-out infinite}.icon .drops{animation:drip 1.5s linear infinite}.icon .star{animation:twinkle 4s ease-in-out infinite}.footer{position:absolute;bottom:10px;left:29px;right:29px;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:.1px;opacity:.46}.credit{font-family:Sora;font-size:7px}.credit a{color:inherit;text-decoration:none;pointer-events:auto}.unavailable{font-size:14px;max-width:245px;white-space:normal}.loading{opacity:.75}.face[lang=en] .city{font-size:28px;letter-spacing:-.3px}.face[lang=en] .condition{font-size:18px}.face[lang=en] .region{font-size:10px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{50%{transform:translate(2px,-2px)}}@keyframes drip{50%{transform:translate(-1px,3px);opacity:.6}}@keyframes twinkle{50%{opacity:.3}}

/* Photographic skies stay behind a stable, readable typography layer. */
.edge:after{display:none}.shade{background:linear-gradient(180deg,#031b303b 0%,#041a3260 42%,#0215297a 65%,#021225df 100%)}.city{font-size:26px}.face[lang=en] .city{font-size:22px}.region{font-size:10px}.clock-block{text-shadow:0 2px 5px #00152c66,0 3px 28px #00152777}.weather{background:linear-gradient(115deg,#102d489c,#0a203ca6);border-color:#c8e4f93d}.footer{font-size:7.5px;opacity:.59;gap:8px}.credit{flex-shrink:0;font-size:6.5px}.status{white-space:nowrap}

.forecast-note{font-size:10px;line-height:1.5;opacity:.75}.forecast-note:empty{display:none}
/* Fit the available display; keep a balanced composition on tablets and signage. */
#stage{width:100vw;height:100vh;height:100dvh;transform:none!important}
.top{top:6%;left:5.4%;right:5.4%}.clock-block{top:24%;left:4.5%;right:4.5%}.weather{top:auto;bottom:9.5%;left:5%;right:5%;height:26.2%;padding:2% 3.6%}.footer{bottom:3%;left:5.8%;right:5.8%}
@media(min-width:650px){.city{font-size:clamp(28px,4vw,54px)}.face[lang=en] .city{font-size:clamp(24px,3.4vw,48px)}.region,.face[lang=en] .region{font-size:clamp(12px,1.7vw,23px)}.digits{font-size:clamp(76px,min(19.5vw,29vh),260px)}.period{font-size:clamp(18px,3.2vw,42px)}.date{font-size:clamp(17px,3vw,38px)}.temperature{font-size:clamp(70px,12.3vw,165px)}.degree{font-size:clamp(38px,7vw,90px)}.condition,.face[lang=en] .condition{font-size:clamp(20px,3.6vw,48px)}.forecast-note{font-size:clamp(12px,2vw,25px)}.range{font-size:clamp(14px,2.4vw,30px);gap:18px}.range-period{font-size:clamp(11px,1.8vw,22px)}.icon{width:clamp(60px,10vw,130px);height:clamp(60px,10vw,130px)}.weather-details{max-width:none;gap:18px}.live{font-size:clamp(11px,1.6vw,20px);padding:9px 16px}.footer{font-size:clamp(10px,1.5vw,18px)}.credit{font-size:clamp(9px,1.3vw,16px)}}
@media(max-aspect-ratio:4/5){.top{top:7%}.clock-block{top:30%}.digits{font-size:clamp(76px,20vw,170px)}.period{font-size:clamp(16px,4vw,30px)}.date{font-size:clamp(15px,3.5vw,27px);margin-top:14px}.weather{bottom:13%;height:19%;border-radius:26px}.weather-details{gap:8px}.condition,.face[lang=en] .condition{font-size:clamp(17px,3.5vw,28px)}.temperature{font-size:clamp(58px,13vw,105px)}.degree{font-size:clamp(34px,7vw,56px)}.range{font-size:clamp(11px,2.4vw,19px);gap:9px}.forecast-note{font-size:clamp(10px,2.4vw,18px)}.icon{width:clamp(42px,9vw,70px);height:clamp(42px,9vw,70px)}.footer{bottom:5%;flex-wrap:wrap;gap:5px}.city{font-size:clamp(25px,5vw,40px)}.face[lang=en] .city{font-size:clamp(22px,4.4vw,36px)}}