@font-face{font-family:Alexandria;src:url('/assets/alexandria.ttf')}@font-face{font-family:Sora;src:url('/assets/sora.ttf')}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:#0c1a33;color:#fbfbf6;font-family:Alexandria,sans-serif;--u:min(.052083333vw,.092592593vh);--gold:#ecc47d;--muted:#afbbd0}button,input,select{font:inherit}#display{position:absolute;inset:0;margin:auto;width:calc(1920 * var(--u));height:calc(1080 * var(--u));isolation:isolate}.view{position:absolute;inset:0;opacity:0;transition:opacity 1.5s cubic-bezier(.45,0,.2,1);will-change:opacity;pointer-events:none}.view.active{opacity:1}.view[lang=en]{font-family:Sora,Alexandria,sans-serif}.environment,.sky,.solar-glow,.stars,.clouds,.fog,.vignette,#rain{position:absolute;inset:0;pointer-events:none}.environment{overflow:hidden}.sky{background:linear-gradient(180deg,#162444 0%,#595d80 55%,#d99d93 100%)}.next-sky{opacity:0;transition:opacity 12s ease}.solar-glow{background:radial-gradient(ellipse at 50% 80%,#ffd6a33d,transparent 65%);transition:opacity 12s}.stars{opacity:0;background-image:radial-gradient(1px 1px at 12% 17%,#e0e8ff 90%,transparent),radial-gradient(1px 1px at 72% 31%,#e0e8ff 90%,transparent),radial-gradient(1px 1px at 32% 23%,#e0e8ff 90%,transparent),radial-gradient(1px 1px at 82% 12%,#e0e8ff 90%,transparent);background-size:24vw 23vh;transition:opacity 12s}.clouds{opacity:0;transition:opacity 12s,filter 12s;mix-blend-mode:screen}.clouds img{position:absolute;width:100vw;min-width:1500px;top:4%;left:-25%;opacity:.4;animation:drift 170s ease-in-out infinite alternate}.clouds img+img{width:90vw;left:42%;top:20%;opacity:.25;animation-duration:230s;animation-direction:alternate-reverse}.fog{background:linear-gradient(transparent 20%,#c4d1db66 80%);opacity:0;transition:opacity 12s}.horizon{position:absolute;bottom:20.3%;left:50%;width:max(100vw,calc(1920 * var(--u)));height:calc(430 * var(--u));transform:translateX(-50%);object-fit:fill}.vignette{background:linear-gradient(#05132b30,transparent 40%,#06152b30),radial-gradient(ellipse,transparent 42%,#08172c38 100%)}.topbar{position:absolute;top:calc(44 * var(--u));left:calc(56 * var(--u));right:calc(56 * var(--u));height:calc(145 * var(--u));display:grid;grid-template-columns:calc(376 * var(--u)) 1fr calc(376 * var(--u));gap:calc(30 * var(--u));direction:ltr;align-items:start}.panel{background:linear-gradient(135deg,#08172eed,#10213ce8);border:1px solid #d5c29f2a;box-shadow:0 calc(12 * var(--u)) calc(40 * var(--u)) #06102324;backdrop-filter:blur(14px)}.clock-panel,.location-panel{height:calc(139 * var(--u));border-radius:calc(22 * var(--u));text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(9 * var(--u))}.eyebrow{font-size:calc(24 * var(--u));font-weight:650;line-height:1.5;letter-spacing:.01em;color:#f3f3ef}.clock-line{display:flex;align-items:baseline;gap:calc(12 * var(--u));direction:ltr}.clock{font:650 calc(66 * var(--u))/1.05 Sora,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.045em}.period{font-size:calc(19 * var(--u));color:var(--gold);font-weight:600;min-width:2em}.location-name{font-size:calc(35 * var(--u));font-weight:650;white-space:nowrap}.location-caption{font-size:calc(14 * var(--u));letter-spacing:.12em;color:var(--muted)}.title{text-align:center;padding-top:calc(4 * var(--u));direction:inherit}.title h1{font-size:calc(70 * var(--u));margin:0;font-weight:750;line-height:1.4;letter-spacing:-.03em;text-shadow:0 3px 30px #0b1c4a45;white-space:nowrap}.view[lang=en] h1{font-size:calc(62 * var(--u));letter-spacing:-.04em}.title .date{margin-top:calc(6 * var(--u));font-size:calc(19 * var(--u));color:#e0e3ed;line-height:1.6}.hero{position:absolute;width:calc(970 * var(--u));height:calc(495 * var(--u));top:calc(219 * var(--u));left:50%;transform:translateX(-50%);border-radius:calc(34 * var(--u));text-align:center;padding:calc(26 * var(--u)) calc(58 * var(--u));display:flex;flex-direction:column;align-items:center}.hero:before{content:'';position:absolute;top:-1px;width:28%;height:2px;background:linear-gradient(90deg,transparent,#eac17cbb,transparent)}.hero-label{font-size:calc(34 * var(--u));font-weight:650;line-height:1.45;margin:0;color:#f8f7f2}.next-name{font-size:calc(98 * var(--u));font-weight:750;line-height:1.3;color:var(--gold);margin:calc(6 * var(--u)) 0 calc(13 * var(--u));width:100%}.hero-divider{height:1px;flex-shrink:0;width:100%;background:linear-gradient(90deg,transparent,#91a2bd80,transparent);margin-bottom:calc(18 * var(--u))}.until{font-size:calc(29 * var(--u));font-weight:550;color:#e4e8f1;line-height:1.5}.countdown{direction:ltr;font:650 calc(142 * var(--u))/1.2 Sora,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.05em;white-space:nowrap;margin-top:calc(10 * var(--u));min-height:1.2em}.hero.adhan{border-color:#e8c5879e}.hero.adhan .next-name{font-size:calc(74 * var(--u));margin-top:calc(18 * var(--u))}.hero.adhan .countdown{font-family:Alexandria,sans-serif;font-size:calc(50 * var(--u));padding-top:calc(18 * var(--u));white-space:normal;letter-spacing:0}.countdown.unavailable{font-size:calc(43 * var(--u));font-family:Alexandria,sans-serif;white-space:normal;letter-spacing:0;padding-top:calc(30 * var(--u))}.weather-line{position:absolute;top:calc(748 * var(--u));left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:calc(12 * var(--u));min-width:calc(400 * var(--u));height:calc(44 * var(--u));font-size:calc(17 * var(--u));color:#fff6e8;text-shadow:0 2px 8px #06152b;background:#0a1b3355;border-radius:30px;padding:0 calc(20 * var(--u));white-space:nowrap}.weather-icon{width:calc(26 * var(--u));height:calc(26 * var(--u));color:var(--gold);flex-shrink:0}.prayer-row{position:absolute;top:calc(815 * var(--u));left:calc(34 * var(--u));right:calc(34 * var(--u));height:calc(183 * var(--u));display:grid;grid-template-columns:repeat(5,1fr);border:1px solid #b4b8c261;border-radius:calc(20 * var(--u));overflow:hidden;background:#0b1b35f5;box-shadow:0 8px 45px #0a152b44}.prayer{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;border-inline-end:1px solid #b4b8c23d;gap:calc(12 * var(--u));transition:background 1s,color 1s}.prayer:last-child{border:0}.prayer.selected{background:linear-gradient(115deg,#dfb165,#f1d393);color:#0b1932}.prayer.selected:before{position:absolute;top:calc(10 * var(--u));content:'';width:calc(40 * var(--u));height:calc(3 * var(--u));border-radius:5px;background:#10203a55}.prayer-name{font-size:calc(32 * var(--u));font-weight:700;line-height:1.4}.prayer-clock{display:flex;gap:calc(10 * var(--u));direction:ltr;align-items:baseline}.prayer-time{font:650 calc(62 * var(--u))/1.2 Sora,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.045em}.prayer-period{font-size:calc(17 * var(--u));opacity:.7;min-width:2em}.view[lang=en] .prayer-name{font-size:calc(29 * var(--u));letter-spacing:.01em}.footer{position:absolute;bottom:calc(26 * var(--u));left:calc(55 * var(--u));right:calc(55 * var(--u));display:flex;align-items:center;justify-content:space-between;font-size:calc(15 * var(--u));color:#bdc8d8;gap:calc(22 * var(--u));line-height:1.6}.source{white-space:nowrap}.status{display:flex;align-items:center;gap:calc(9 * var(--u));max-width:55%}.status:before{content:'';width:calc(6 * var(--u));height:calc(6 * var(--u));background:#bbcdbd;border-radius:50%;flex-shrink:0}.status.offline:before{background:var(--gold)}.preview-label{position:absolute;top:calc(190 * var(--u));left:50%;transform:translateX(-50%);color:#f4d18b;font-size:calc(14 * var(--u));white-space:nowrap}.preview-tools{position:fixed;z-index:10;bottom:8px;left:8px;max-width:calc(100vw - 16px);padding:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#061329f5;border:1px solid #e9c58170;border-radius:10px;font-size:12px;direction:rtl}.preview-tools label{display:flex;align-items:center;gap:5px}.preview-tools input,.preview-tools select,.preview-tools button{background:#182b46;color:#fff;border:1px solid #607087;border-radius:5px;padding:5px}.preview-tools button{cursor:pointer}.preview-tools:focus-within{opacity:1}@keyframes drift{to{transform:translateX(15vw)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-aspect-ratio:4/5){body{--u:.052083333vw}.environment .horizon{bottom:calc(50% - 316 * var(--u))}}
[hidden]{display:none!important}.startup-error{position:absolute;inset:30% 10%;text-align:center;font-size:calc(44 * var(--u));background:#08182ee8;padding:2em;border:1px solid #eac17c66;border-radius:20px}.environment>*:not(.sky){z-index:2}.environment .horizon{z-index:3}.environment .vignette{z-index:4}
.environment{z-index:0;isolation:isolate}#display{z-index:1}.environment:after{content:'';position:absolute;z-index:3;inset:74% 0 0;background:linear-gradient(#0b1c3500,#0b1c35 16%,#0b1c35)}.clouds img{opacity:.23}.clouds img+img{opacity:.14}.panel{background:linear-gradient(135deg,#08172ef5,#10213cf5)}
.countdown{font-size:calc(138 * var(--u));line-height:1.3;min-height:1.3em}
/* Original generated matte painting: one unchanging skyline across every solar scene. */
.horizon{height:auto;aspect-ratio:3 / 1;object-fit:contain;max-height:calc(570 * var(--u));filter:brightness(.85);transition:filter 12s}body[data-light=day] .horizon,body[data-light=sunrise] .horizon{filter:brightness(1.12)}body[data-light=night] .horizon{filter:brightness(.72)}
.source a{color:inherit;text-underline-offset:.3em;text-decoration-color:#afbbd050}.source a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
/* Equal text slots keep dates and numerals anchored through language changes. */
.title h1{height:calc(98 * var(--u));line-height:calc(98 * var(--u))}.prayer-name,.view[lang=en] .prayer-name{height:calc(45 * var(--u));line-height:calc(45 * var(--u))}