@layer reset{*,:before,:after{box-sizing:border-box}html,body{block-size:100%;margin:0;padding:0}h1,h2,h3,p,ul,ol,figure{margin:0}ul,ol{padding:0;list-style:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0}img,svg{max-inline-size:100%;display:block}}@layer base{:root{--font-ui:inter, "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;--font-verse:"Noto Naskh Arabic", "IBM Plex Sans Arabic", serif;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=sand]{--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root:lang(ar){--font-ui:"IBM Plex Sans Arabic", inter, system-ui, sans-serif}body{min-block-size:100dvh;font-family:var(--font-ui);font-feature-settings:"tnum" 1, "cv11" 1;color:var(--text-1);background:var(--bg-1);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;line-height:1.4;overflow:hidden}#app{min-block-size:100dvh;padding-block:max(var(--space-5), env(safe-area-inset-top)) max(var(--space-5), env(safe-area-inset-bottom));padding-inline:max(var(--space-6), env(safe-area-inset-left)) max(var(--space-6), env(safe-area-inset-right));position:relative}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}}@layer components{.card{background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}:root[data-glass] .glass{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.touch-target{min-block-size:48px;min-inline-size:48px}.pill-button{gap:var(--space-2);padding-inline:var(--space-5);color:var(--text-1);background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-pill);transition:transform var(--dur-fast) var(--ease-out);justify-content:center;align-items:center;font-weight:600;display:inline-flex}.pill-button:active{transform:scale(.97)}.pill-button.pill-button--accent{color:var(--bg-1);background:var(--accent);border-color:#0000}.overlay-layer{z-index:50;pointer-events:none;position:fixed;inset:0}.overlay-layer>*{pointer-events:auto}.overlay{gap:var(--space-5);padding:var(--space-6);text-align:center;animation:fade-in var(--dur-slow) var(--ease-out);background:#050812d1;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay__title{font-size:var(--type-next-name);letter-spacing:-.01em;font-weight:600}.overlay__hint,.overlay__languages{max-inline-size:40ch;font-size:var(--type-secondary);color:var(--text-2)}.overlay__languages{gap:var(--space-2);color:var(--danger-text);font-weight:600;display:grid}.start-button{aspect-ratio:1;inline-size:clamp(12rem,28vw,18rem);padding:var(--space-5);font-size:var(--type-countdown);color:var(--bg-1);background:var(--accent);border-radius:50%;place-items:center;font-weight:600;display:grid;position:relative}.start-button__ring{border:3px solid var(--accent);opacity:.6;animation:ring-pulse 2.4s var(--ease-out) infinite;border-radius:50%;position:absolute;inset:-12px}.start-button__label{position:relative}.start-button--danger{color:var(--danger-text);background:var(--danger)}.start-button--danger .start-button__ring{border-color:var(--danger);animation-duration:1.2s}.overlay--danger{background:#280606e0}.resume-bar{justify-content:center;display:flex;position:absolute;inset-block-end:max(var(--space-6), env(safe-area-inset-bottom));inset-inline:0}.toast-region{z-index:60;pointer-events:none;justify-content:center;display:flex;position:fixed;inset-block-end:max(var(--space-6), env(safe-area-inset-bottom));inset-inline:0}.toast{gap:var(--space-4);max-inline-size:min(90vw,44rem);padding-block:var(--space-3);padding-inline:var(--space-5);font-size:var(--type-secondary);pointer-events:auto;background:var(--bg-2);border:1px solid var(--surface-border);border-radius:var(--radius-pill);box-shadow:var(--shadow-soft);animation:slide-up var(--dur-base) var(--ease-out);align-items:center;display:flex}.toast__action{padding-inline:var(--space-4);color:var(--accent);font-weight:600}@keyframes fade-in{0%{opacity:0}}@keyframes slide-up{0%{opacity:0;transform:translateY(12px)}}@keyframes ring-pulse{0%{opacity:.6;transform:scale(.96)}70%{opacity:0;transform:scale(1.12)}to{opacity:0;transform:scale(1.12)}}.settings-hotspot{z-index:30;opacity:0;block-size:72px;inline-size:72px;position:fixed;inset-block-start:0;inset-inline-end:0}.settings-layer{z-index:45;padding:max(var(--space-5), env(safe-area-inset-top)) var(--space-5);background:#00000059;place-items:center;display:grid;position:fixed;inset:0}.settings{block-size:min(100%,52rem);inline-size:min(100%,72rem);color:var(--text-1);background:var(--bg-2);border:1px solid var(--surface-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);opacity:.96;grid-template:"header header""nav pane"1fr/minmax(14rem,1fr) 3fr;display:grid;overflow:hidden}.settings__header{gap:var(--space-4);padding:var(--space-4) var(--space-5);border-block-end:1px solid var(--surface-border);grid-area:header;align-items:center;display:flex}.settings__title{font-size:var(--type-times);flex:1;font-weight:600}.settings__nav{padding:var(--space-4);border-inline-end:1px solid var(--surface-border);grid-area:nav;overflow-y:auto}.settings__section{inline-size:100%;padding-inline:var(--space-4);text-align:start;border-radius:var(--radius-sm)}.settings__section[aria-current=page]{color:var(--bg-1);background:var(--accent)}.settings__pane{gap:var(--space-5);padding:var(--space-5);grid-area:pane;align-content:start;display:grid;overflow-y:auto}.settings--portrait{grid-template:"header""nav"1fr/1fr}.settings--portrait .settings__pane{display:none}.settings--portrait.settings--drilled{grid-template:"header""pane"1fr/1fr}.settings--portrait.settings--drilled .settings__nav{display:none}.settings--portrait.settings--drilled .settings__pane{display:grid}.group__title{font-size:var(--type-secondary);color:var(--text-2);margin-block-end:var(--space-2);font-weight:600}.group__body{background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-md);overflow:hidden}.row{gap:var(--space-4);min-block-size:56px;padding:var(--space-2) var(--space-4);justify-content:space-between;align-items:center;display:flex}.row+.row{border-block-start:1px solid var(--surface-border)}.row__text{display:grid}.row__hint{color:var(--text-2);font-size:.85em}.switch{background:var(--surface-border);border-radius:var(--radius-pill);inline-size:56px;position:relative}.switch[aria-checked=true]{background:var(--accent)}.switch__thumb{background:var(--text-1);block-size:36px;inline-size:36px;transition:transform var(--dur-fast) var(--ease-out);border-radius:50%;position:absolute;inset-block-start:6px;inset-inline-start:6px}.switch[aria-checked=true] .switch__thumb{transform:translate(8px)}.segmented{background:var(--surface);border-radius:var(--radius-pill);padding:4px;display:inline-flex}.segmented__option{padding-inline:var(--space-4);border-radius:var(--radius-pill)}.segmented__option[aria-checked=true]{color:var(--bg-1);background:var(--accent)}.stepper{gap:var(--space-2);align-items:center;display:inline-flex}.stepper__button{background:var(--surface);border-radius:50%;font-size:1.4em}.stepper__button:disabled{opacity:.35}.stepper__value{text-align:center;min-inline-size:4ch}.select{max-inline-size:60%;padding-inline:var(--space-3);color:var(--text-1);background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-sm)}.pin{gap:var(--space-4);padding:var(--space-6);background:var(--bg-2);border-radius:var(--radius-lg);justify-items:center;display:grid}.pin__dots{letter-spacing:.4em;font-size:2rem}.pin__error{min-block-size:1.4em;color:var(--danger-text)}.pin__keys{gap:var(--space-3);grid-template-columns:repeat(3,72px);display:grid}.pin__key{background:var(--surface);border-radius:50%;block-size:72px;font-size:1.6rem}.row--warning{color:var(--danger-text);background:var(--danger)}.row--actions{flex-wrap:wrap;justify-content:flex-start}.pill-button--danger{color:var(--danger-text);background:var(--danger)}.input{inline-size:100%;padding-inline:var(--space-3);color:var(--text-1);background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-sm)}.results__item{inline-size:100%;padding-inline:var(--space-4);text-align:start}.debug__value{font-variant-numeric:tabular-nums;color:var(--text-2);text-align:end;overflow-wrap:anywhere}.debug__log{max-block-size:40vh;padding:var(--space-4);white-space:pre-wrap;-webkit-user-select:text;user-select:text;margin:0;font-family:ui-monospace,Menlo,monospace;font-size:.8rem;line-height:1.5;overflow:auto}}@layer views{.app-main{min-block-size:calc(100dvh - 2 * var(--space-5));position:relative}.layout{gap:var(--space-6);min-block-size:inherit;display:grid}.layout--landscape,.layout:not(.layout--portrait){grid-template:"clock next"1fr"timeline timeline"/3fr 2fr;align-items:center}.layout--portrait{grid-template:"clock""next""timeline"1fr/1fr}@media (orientation:portrait){.layout{grid-template:"clock""next""timeline"1fr/1fr}}.zone--clock{grid-area:clock}.zone--next{grid-area:next}.zone--timeline{grid-area:timeline}.clock__time{font-size:var(--type-clock);letter-spacing:-.03em;direction:ltr;align-items:baseline;font-weight:250;line-height:1;display:flex}:root:lang(ar) .clock__time{justify-content:flex-end;font-weight:300}.clock__sec,.clock__ampm{color:var(--text-2);letter-spacing:0;margin-inline-start:.08em;font-size:.32em;font-weight:400}.clock__date,.clock__hijri,.clock__location,.clock__prompt{font-size:var(--type-secondary);color:var(--text-2);margin-block-start:var(--space-3)}.clock__date{color:var(--text-1);margin-block-start:var(--space-5)}.clock__location{font-size:calc(var(--type-secondary) * .85)}.clock__prompt{max-inline-size:32ch;color:var(--accent)}.next-card{gap:var(--space-2);padding:var(--space-6);text-align:center;justify-items:center;display:grid}.next-card__label{font-size:var(--type-secondary);color:var(--text-2);text-transform:uppercase;letter-spacing:.08em}.next-card__name{font-size:var(--type-next-name);font-weight:600;line-height:1.1}.next-card__time{font-size:var(--type-times);color:var(--text-2)}.next-card__ring{aspect-ratio:1;inline-size:clamp(10rem,22vw,16rem);margin-block-start:var(--space-4);position:relative}.ring{block-size:100%;inline-size:100%;transform:rotate(-90deg)}:root[dir=rtl] .ring{transform:rotate(-90deg)scaleY(-1)}.ring__track,.ring__bar{fill:none;stroke-width:4px}.ring__track{stroke:var(--surface-border)}.ring__bar{stroke:var(--accent);stroke-linecap:round}.next-card__center{place-content:center;display:grid;position:absolute;inset:0}.next-card__countdown{font-size:var(--type-countdown);font-variant-numeric:tabular-nums;direction:ltr;font-weight:500}.next-card__remaining{font-size:calc(var(--type-secondary) * .85);color:var(--text-2)}.timeline{gap:var(--space-3);grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.layout--portrait .timeline{grid-template-columns:1fr}.chip{gap:var(--space-1);padding:var(--space-4);font-size:var(--type-times);background:var(--surface);border-radius:var(--radius-md);transition:opacity var(--dur-base) var(--ease-out);border:1px solid #0000;flex-direction:column;align-items:center;display:flex}.layout--portrait .chip{flex-direction:row;justify-content:space-between}.chip .icon{block-size:1.4em;inline-size:1.4em;color:var(--text-2)}.chip__name{color:var(--text-2);font-size:.75em}.chip--past{color:var(--text-2)}.chip--past .icon{opacity:.5}.chip--current{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 24px var(--accent-soft)}.chip--current .icon,.chip--current .chip__name{color:var(--accent)}.chip--next{border-color:var(--surface-border)}.prealert{inline-size:max-content;max-inline-size:90%;padding-block:var(--space-2);padding-inline:var(--space-5);font-size:var(--type-secondary);color:var(--bg-1);background:var(--accent);border-radius:var(--radius-pill);animation:slide-down var(--dur-slow) var(--ease-out);margin-inline:auto;font-weight:600;position:absolute;inset-block-start:0;inset-inline:0}@keyframes slide-down{0%{opacity:0;transform:translateY(-16px)}}.sky{z-index:-1;background:var(--bg-1);position:fixed;inset:0}.sky__layer{opacity:0;transition:opacity 60s linear;position:absolute;inset:0}.sky__layer--visible{opacity:1}.sky__pattern{opacity:0;background-image:url(/patterns/star8.svg);background-size:120px 120px;position:absolute;inset:0}.sky__pattern--on{opacity:.04}:root[data-theme=sand] .sky__pattern--on{opacity:.06;filter:invert()}.reduced-motion .sky__layer{transition-duration:1ms}.azan{z-index:40;gap:var(--space-4);padding:var(--space-7);text-align:center;pointer-events:none;background:var(--bg-1);opacity:0;transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;transform:scale(1.03)}.azan--visible{pointer-events:auto;opacity:1;transform:none}.azan__glow{aspect-ratio:1;background:radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);opacity:.8;border-radius:50%;inline-size:min(70vmin,36rem);position:absolute}.azan--visible .azan__glow--breathing{animation:24s ease-in-out infinite breathe}.azan__label,.azan__time{font-size:var(--type-secondary);color:var(--text-2);position:relative}.azan__name{letter-spacing:-.02em;margin:0;font-size:clamp(4rem,11vw,9rem);font-weight:300;position:relative}.azan__arabic{font-family:var(--font-verse);color:var(--accent);font-size:clamp(2.5rem,6vw,5rem);position:relative}.azan__dua{max-inline-size:60ch;line-height:1.6;position:relative}.azan__dua-title{font-size:var(--type-secondary);color:var(--text-2)}.azan__progress{background:var(--surface-border);border-radius:var(--radius-pill);block-size:4px;inline-size:min(60vw,32rem);position:relative;overflow:hidden}.azan__progress-bar{background:var(--accent);transform-origin:0;block-size:100%;transition:transform 1s linear;transform:scaleX(0)}:root[dir=rtl] .azan__progress-bar{transform-origin:100%}.azan__stop{margin-block-start:var(--space-5);position:relative}@keyframes breathe{0%,to{opacity:.5;transform:scale(.92)}50%{opacity:.9;transform:scale(1.05)}}.screensaver{z-index:20;visibility:hidden;background:var(--bg-1);opacity:0;transition:opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);position:fixed;inset:0}.screensaver--active{visibility:visible;opacity:1;transition:opacity var(--dur-slow) var(--ease-out)}.slide{opacity:0;transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);position:absolute;inset:0;transform:scale(1.02)}.slide--in{opacity:1;transform:none}.panel{gap:var(--space-5);padding:var(--space-8);text-align:center;flex-direction:column;justify-content:center;align-items:center;margin:0;display:flex}.panel__text{max-inline-size:30ch;margin:0;font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.6}.panel__text--ar{font-family:var(--font-verse);line-height:1.9}.panel__translation{max-inline-size:60ch;color:var(--text-2);font-size:clamp(1.25rem,2.2vw,1.9rem);line-height:1.6}.panel__source{font-size:var(--type-secondary);font-variant:small-caps;color:var(--text-2);letter-spacing:.06em}.pill{gap:var(--space-4);padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);align-items:baseline;display:flex;position:absolute}.pill__time{font-size:var(--type-countdown);font-weight:300}.pill__next{font-size:var(--type-secondary);color:var(--text-2)}.pill--top-start{inset-block-start:var(--space-6);inset-inline-start:var(--space-6)}.pill--top-end{inset-block-start:var(--space-6);inset-inline-end:var(--space-6)}.pill--bottom-end{inset-block-end:var(--space-6);inset-inline-end:var(--space-6)}.pill--bottom-start{inset-block-end:var(--space-6);inset-inline-start:var(--space-6)}.photo{overflow:hidden}.photo__img{object-fit:cover;block-size:100%;inline-size:100%;transform:scale(1)}.slide--in.photo--kenburns .photo__img{animation:60s linear forwards ken-burns}.photo__scrim{background:linear-gradient(#0000,#000000a6);position:absolute;inset:40% 0 0}.photos__grid{gap:var(--space-3);padding:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));display:grid}.photos__item{gap:var(--space-2);display:grid}.photos__thumb{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);inline-size:100%}@keyframes ken-burns{to{transform:scale(1.06)}}.night-dim{z-index:35;pointer-events:none;opacity:0;transition:opacity 2s var(--ease-out);background:#000;position:fixed;inset:0}.layout{transition:transform var(--dur-slow) var(--ease-out)}}@layer utilities{.visually-hidden{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.reduced-motion *,.reduced-motion :before,.reduced-motion :after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-wght.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext-wght.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Sans Arabic;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/ibm-plex-sans-arabic-300.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+8A0-8FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}@font-face{font-family:IBM Plex Sans Arabic;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-arabic-400.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+8A0-8FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}@font-face{font-family:IBM Plex Sans Arabic;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-arabic-600.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+8A0-8FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}@font-face{font-family:Noto Naskh Arabic;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/noto-naskh-arabic-wght.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+8A0-8FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}