/* New home page (preview) — "Your day" */
.d2 { max-width: 1180px; margin: 0 auto; padding: 84px 20px 40px; box-sizing: border-box; display: flex; flex-direction: column; gap: 34px; }
.d2-h h2 { font: 700 clamp(1.5rem, 3vw, 2.1rem)/1.1 'Space Grotesk', sans-serif; letter-spacing: -.02em; margin: 0 0 6px; color: var(--t-text); }
.d2-h p { margin: 0; color: var(--t-text-secondary); font-size: 15px; }
.d2-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--t-accent); color: #fff; font: 600 14px/1 'Inter', sans-serif; text-decoration: none; border: 1px solid var(--t-accent); cursor: pointer; white-space: nowrap; }
.d2-btn-2 { background: transparent; color: var(--t-accent); }
.d2-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255, 77, 77, .6); animation: d2-pulse 1.8s infinite; flex: none; }
@keyframes d2-pulse { 70% { box-shadow: 0 0 0 9px rgba(255, 77, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); } }

/* ① the day */
.d2-day { position: relative; border-radius: 28px; overflow: visible; color: #fff; isolation: isolate; }
.d2-sky { position: absolute; inset: 0; border-radius: 28px; z-index: -1; background: linear-gradient(160deg, #0f1430 0%, #1d2350 55%, #33306b 100%); transition: background 1.2s; overflow: hidden; }
.d2-sky::after { content: ''; position: absolute; inset: 0; background: radial-gradient(1200px 400px at 85% -10%, rgba(255, 255, 255, .12), transparent 60%), radial-gradient(2px 2px at 20% 30%, #fff8, transparent), radial-gradient(1.5px 1.5px at 60% 20%, #fff7, transparent), radial-gradient(1.5px 1.5px at 80% 60%, #fff6, transparent), radial-gradient(1px 1px at 35% 70%, #fff7, transparent); }
.d2-day[data-p="fajr"] .d2-sky { background: linear-gradient(170deg, #1d1f4f 0%, #5a4f9a 60%, #d68aa0 100%); }
.d2-day[data-p="sun"] .d2-sky { background: linear-gradient(170deg, #24508c 0%, #3567a6 55%, #4b7cb9 100%); }
.d2-day[data-p="dhuhr"] .d2-sky { background: linear-gradient(170deg, #1f4f8f 0%, #2f66aa 55%, #467dbd 100%); }
.d2-day[data-p="asr"] .d2-sky { background: linear-gradient(170deg, #234a84 0%, #345f9c 60%, #5677a8 100%); }
.d2-day[data-p="maghrib"] .d2-sky { background: linear-gradient(170deg, #2a2457 0%, #8e3f6e 60%, #f08a5a 100%); }
.d2-day-in { padding: 34px 40px 30px; display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 0 40px; }
.d2-l { display: flex; flex-direction: column; justify-content: space-between; gap: 26px; min-width: 0; }
.d2-r { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* the place | the date */
.d2-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.d2-place { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: inherit; border-radius: 999px; padding: 8px 14px 8px 12px; font: 700 16px/1.2 'Inter', sans-serif; cursor: pointer; max-width: 100%; transition: background .2s; }
.d2-place:hover { background: rgba(255, 255, 255, .24); }
/* the place: plain text, no box */
.d2-day .d2-place, .d2-day[data-style="plain"] .d2-place { background: none; border: 0; padding: 0; border-radius: 6px; gap: 7px; }
.d2-day .d2-place:hover, .d2-day[data-style="plain"] .d2-place:hover { background: none; }
.d2-day .d2-place:hover span { text-decoration: underline; text-underline-offset: 4px; }
.d2-day .d2-place .d2-chev { width: 16px; height: 16px; opacity: .8; }
.d2-day .d2-place:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.d2-prayers li > em { grid-column: 3; justify-self: start; font-style: normal; font-size: 13px; font-weight: 600; opacity: .75; font-variant-numeric: tabular-nums; white-space: nowrap; }
.d2-place svg { width: 17px; height: 17px; flex: none; }
.d2-place .d2-chev { width: 14px; height: 14px; opacity: .75; }
.d2-place span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d2-sep { width: 1px; height: 22px; background: currentColor; opacity: .35; }
.d2-greg { font-size: 15px; opacity: .9; }
.d2-gh { display: none; white-space: nowrap; }
/* the countdown */
.d2-cd { margin: 0; }
.d2-k { margin: 0; font: 700 13px/1.2 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.d2-num { margin: 12px 0 10px; font: 700 clamp(64px, 9vw, 112px)/.95 'Space Grotesk', sans-serif; letter-spacing: -.04em; font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
html[dir="rtl"] .d2-num { text-align: right; }
.d2-num i { font-style: normal; opacity: .4; margin: 0 .02em; }
.d2-pn { margin: 0; font: 500 22px/1.2 'Space Grotesk', sans-serif; opacity: .95; }
.d2-pn em { font: 700 38px/1 'Space Grotesk', sans-serif; font-style: normal; letter-spacing: -.01em; }
.d2-pn span { opacity: .8; }
.d2-pn b { font-weight: 700; }
/* from the last time to the next */
.d2-day .d2-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.d2-day .d2-bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 99px; transition: width 1s linear; }
.d2-barlab { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; opacity: .85; margin-top: 7px; }
.d2-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.d2-method { margin: 0; font-size: 12.5px; opacity: .8; }
.d2-method a, .d2-method button { color: inherit; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* the Moon, live, with the Hijri date */
.d2-moon { display: flex; align-items: center; justify-content: flex-end; gap: 14px; text-decoration: none; color: inherit; }
.d2-moon-t { text-align: end; }
.d2-moon-t b { display: block; font: 400 15px/1.3 'Inter', sans-serif; opacity: .9; }
.d2-moon-t small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; opacity: .85; margin-top: 4px; }
.d2-ldot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: d2-ld 2s ease-in-out infinite; }
@keyframes d2-ld { 50% { opacity: .3; } }
.d2-moon svg { width: 58px; height: 58px; flex: none; filter: drop-shadow(0 0 14px rgba(255, 240, 200, .45)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.d2-moon:hover svg { transform: rotate(-8deg) scale(1.06); }
.d2-moon-dim { opacity: .1; }
.d2-moon-lit2 { filter: brightness(1.12) drop-shadow(0 0 3px rgba(255, 246, 220, .85)); }
/* the prayers */
.d2-prayers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; justify-content: center; }
.d2-prayers li { display: grid; grid-template-columns: 26px auto 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; }
.d2-prayers li > .h-icon-mask { width: 22px; height: 22px; }
.d2-prayers li > span { font-size: 15px; }
.d2-prayers li > b { grid-column: 4; font: 700 21px/1.1 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
.d2-prayers li.is-past { opacity: .55; }
.d2-prayers li.is-now { background: rgba(255, 255, 255, .16); }
.d2-prayers li.is-next { background: #fff; color: #25467a; }
/* the platform's own colours instead of the sky */
.d2-day[data-style="plain"] { color: var(--t-text); }
.d2-day[data-style="plain"] .d2-sky { background: var(--t-card) !important; border: 1px solid var(--t-border); }
.d2-day[data-style="plain"] .d2-sky::after { display: none; }
.d2-day[data-style="plain"] .d2-place { background: transparent; border-color: var(--t-border); }
.d2-day[data-style="plain"] .d2-place:hover { background: rgba(var(--t-accent-rgb), .08); }
.d2-day[data-style="plain"] .d2-k { color: var(--t-accent); opacity: 1; }
.d2-day[data-style="plain"] .d2-pn span, .d2-day[data-style="plain"] .d2-greg, .d2-day[data-style="plain"] .d2-method, .d2-day[data-style="plain"] .d2-barlab, .d2-day[data-style="plain"] .d2-moon-t small { color: var(--t-text-secondary); opacity: 1; }
.d2-day[data-style="plain"] .d2-pn b { color: var(--t-accent); }
.d2-day[data-style="plain"] .d2-bar { background: var(--t-border); }
.d2-day[data-style="plain"] .d2-bar i { background: var(--t-accent); }
.d2-day[data-style="plain"] .d2-moon svg { filter: drop-shadow(0 4px 12px rgba(140, 110, 70, .35)); }
.d2-day[data-style="plain"] .d2-moon-dim { opacity: .2; filter: brightness(.7); }
.d2-day[data-style="plain"] .d2-r { border-inline-start-color: var(--t-border); }
.d2-day[data-style="plain"] .h-icon-mask { color: var(--t-accent); }
.d2-day[data-style="plain"] .d2-prayers li.is-now { background: rgba(var(--t-accent-rgb), .1); }
.d2-day[data-style="plain"] .d2-prayers li.is-next { background: var(--t-accent); color: #fff; }
.d2-day[data-style="plain"] .d2-prayers li.is-next .h-icon-mask { color: #fff; }
@media (prefers-reduced-motion: reduce) { .d2-ldot { animation: none; } }

/* ② the moment */
.d2-moment { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.d2-ask-res[hidden] { display: none !important; }
.d2-path, .d2-world { margin-bottom: 14px; }
.d2-moment:empty { display: none; }
.d2-m { border: 1px solid var(--t-border); background: var(--t-card); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.d2-m b { font: 700 1.15rem/1.25 'Space Grotesk', sans-serif; color: var(--t-text); display: flex; align-items: center; gap: 8px; }
.d2-m p { margin: 0; color: var(--t-text-secondary); font-size: 14.5px; line-height: 1.5; }
.d2-m p:empty { display: none; }
.d2-m div { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.d2-m.is-ram, .d2-m.is-fri, .d2-m.is-ev { border-color: var(--t-accent); background: linear-gradient(135deg, rgba(var(--t-accent-rgb), .12), var(--t-card)); }

/* ③ path */
.d2-path { display: flex; flex-direction: column; gap: 16px; }
.d2-path-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
/* the player, laid out wide: the round button on one side, the surah and the links on the other */
.d2-path-grid > .h-qtop { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "head head" "ctrl title" "stats stats" "foot foot"; column-gap: 26px; align-items: center; text-align: start; padding: 22px 26px; }
.d2-path-grid > .h-qtop .h-qp-head { grid-area: head; }
.d2-path-grid > .h-qtop .h-qp-title { grid-area: title; margin: 10px 0 0; align-self: center; }
.d2-path-grid > .h-qtop .h-qp-controls { grid-area: ctrl; margin: 10px 0 0; flex: none; gap: 12px; }
.d2-path-grid > .h-qtop .h-qp-err { grid-column: 1 / -1; }
.d2-path-grid > .h-qtop .h-qp-stats { grid-area: stats; justify-content: flex-start; margin: 16px 0 0; }
.d2-path-grid > .h-qtop .h-qp-foot { grid-area: foot; justify-content: flex-start; margin-top: 10px; padding-top: 10px; align-self: start; }
.d2-path-grid > .h-qtop .h-qp-ar { font-size: 38px; direction: ltr; text-align: start; }
html[dir="rtl"] .d2-path-grid > .h-qtop .h-qp-ar { direction: rtl; }
.d2-path-grid > .h-qtop .h-qp-meta { margin-inline: 0; }
.d2-path-grid > .h-qtop .h-qp-play { width: 132px; height: 132px; flex-basis: 132px; }
/* account */
.d2-acc { border: 1px solid var(--t-border); border-radius: 24px; padding: 22px 24px; background: linear-gradient(135deg, rgba(var(--t-accent-rgb), .14), var(--t-card) 60%); min-width: 0; }
.d2-acc-out, .d2-acc-in { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.d2-acc-out[hidden], .d2-acc-in[hidden] { display: none; }
.d2-acc-h { margin: 0; font: 700 1.35rem/1.25 'Space Grotesk', sans-serif; color: var(--t-text); }
.d2-acc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.d2-acc-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--t-text); }
.d2-acc-list svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; padding: 3px; border-radius: 50%; background: rgba(var(--t-accent-rgb), .16); color: var(--t-accent); box-sizing: border-box; }
.d2-acc-local { margin: 0; font-size: 13px; color: var(--t-text-secondary); }
.d2-acc-local:empty { display: none; }
.d2-acc-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.d2-acc-btns .d2-btn { margin: 0; cursor: pointer; }
.d2-acc-me { display: flex; align-items: center; gap: 14px; }
.d2-acc-me > div { flex: 1; min-width: 0; }
.d2-acc-me small { color: var(--t-text-secondary); font-size: 13px; }
.d2-acc-av { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--t-accent); color: #fff; font: 700 17px 'Space Grotesk', sans-serif; }
.d2-acc-av img { width: 100%; height: 100%; object-fit: cover; }
.d2-acc-prof { font-size: 13px; font-weight: 600; color: var(--t-accent); text-decoration: none; white-space: nowrap; }
.d2-acc-prof:hover { text-decoration: underline; }
.d2-acc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.d2-acc-stats > div { background: var(--t-card); border: 1px solid var(--t-border); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.d2-acc-stats b { display: block; font: 700 1.15rem/1.2 'Space Grotesk', sans-serif; color: var(--t-text); overflow-wrap: anywhere; }
.d2-acc-stats small { display: block; font-size: 11.5px; line-height: 1.3; color: var(--t-text-secondary); }
.d2-acc-chart small { display: block; font-size: 11.5px; color: var(--t-text-secondary); margin-bottom: 6px; }
.d2-spark { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.d2-spark i { flex: 1; min-width: 2px; border-radius: 3px 3px 1px 1px; background: var(--t-accent); opacity: .85; }
.d2-spark i.is-0 { opacity: .18; }
.d2-spark:empty { display: none; }
.d2-acc-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.d2-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--t-border); background: var(--t-card); color: var(--t-text); font-size: 13px; text-decoration: none; }
.d2-chip[hidden] { display: none; }
a.d2-chip:hover { border-color: var(--t-accent); }
.d2-chip svg { width: 14px; height: 14px; color: var(--t-accent); }
.d2-tile { border: 1px solid var(--t-border); background: var(--t-card); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--t-text); min-width: 0; }
a.d2-tile:hover { border-color: var(--t-accent); }
.d2-tile-k { display: flex; align-items: center; gap: 8px; font: 700 12px/1.2 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--t-text-secondary); }
.d2-tile-k svg { width: 18px; height: 18px; color: var(--t-accent); }
.d2-tile > b { font: 700 1.35rem/1.2 'Space Grotesk', sans-serif; }
.d2-tile small { color: var(--t-text-secondary); font-size: 13.5px; line-height: 1.45; }
.d2-bar { height: 6px; border-radius: 99px; background: rgba(var(--t-accent-rgb), .15); overflow: hidden; }
.d2-bar i { display: block; height: 100%; background: var(--t-accent); border-radius: 99px; }

/* ④ world */
.d2-world { border-radius: 28px; background: #0c1026; color: #fff; padding: 24px 28px; display: flex; flex-direction: column; gap: 14px; }
.d2-world .d2-h h2 { color: #fff; }
.d2-world .d2-h p { color: rgba(255, 255, 255, .7); }
.d2-world-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.d2-world-head .d2-h { flex: 0 1 auto; min-width: 0; }
.d2-ticker { margin: 4px 0 0; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .08); border-radius: 18px; padding: 9px 14px; font-size: 14px; line-height: 1.4; flex: 0 1 46%; min-width: 0; }
.d2-ticker > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 980px) { .d2-world-head { flex-direction: column; gap: 12px; } .d2-ticker { flex: none; max-width: 100%; } }
.d2-map { position: relative; width: 100%; aspect-ratio: 1200 / 560; }
.d2-map canvas { width: 100%; height: 100%; display: block; }
.d2-map .d2-map-fx { position: absolute; inset: 0; pointer-events: none; }
.d2-mring { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid #fff; border-radius: 50%; pointer-events: none; box-shadow: 0 0 12px rgba(255, 255, 255, .35); box-sizing: border-box; }
.d2-mring[hidden], .d2-mtip[hidden], .d2-me[hidden] { display: none; }
.d2-me { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 3; }
.d2-me i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.d2-me i::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #fff; animation: d2-me 2.2s ease-out infinite; }
@keyframes d2-me { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
.d2-me b { position: absolute; left: 14px; top: -11px; white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #1d2350; font: 700 12px/16px 'Inter', sans-serif; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.d2-me.is-left b { left: auto; right: 14px; }
@media (prefers-reduced-motion: reduce) { .d2-me i::after { animation: none; } }
.d2-mtip { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 2px; min-width: 120px; max-width: 240px; padding: 9px 12px; border-radius: 12px; background: #fff; color: #1d2350; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); font-size: 13px; line-height: 1.3; text-decoration: none; pointer-events: none; }
.d2-mtip b { font-size: 14px; }
.d2-mtip small { color: #6a6f8f; font-size: 12px; }
.d2-mtip span { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-weight: 600; }
.d2-mtip span i { width: 9px; height: 9px; border-radius: 50%; }
.d2-mtip em { font-style: normal; font-size: 12px; color: #3b4290; margin-top: 4px; font-weight: 600; }
.d2-mtip.is-touch { pointer-events: auto; }
.d2-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: rgba(255, 255, 255, .85); }
.d2-legend li { display: flex; align-items: center; gap: 6px; }
.d2-legend i { width: 10px; height: 10px; border-radius: 3px; }
.d2-legend small { opacity: .6; }

/* ⑤ apps */
.d2-apps { display: flex; flex-direction: column; gap: 18px; }
.d2-groups { display: grid; grid-template-columns: 1.5fr 1.1fr .7fr 1.3fr .8fr; gap: 14px; }
.d2-group { border: 1px solid var(--t-border); background: var(--t-card); border-radius: 20px; padding: 16px; }
.d2-group h3 { margin: 0 0 12px; font: 700 13px/1.2 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--t-text-secondary); }
.d2-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 12px 8px; }
.d2-app { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; text-decoration: none; color: var(--t-text); font-size: 12.5px; line-height: 1.25; }
.d2-app-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(var(--t-accent-rgb), .1); color: var(--t-accent); transition: transform .15s, background .15s; }
.d2-app-ic svg { width: 24px; height: 24px; }
.d2-app:hover .d2-app-ic { transform: translateY(-2px); background: var(--t-accent); color: #fff; }

/* ⑥ events */
.d2-ev { display: flex; flex-direction: column; gap: 14px; }
.d2-ev-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.d2-ev-c { border: 1px solid var(--t-border); background: var(--t-card); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--t-text); }
.d2-ev-c:hover { border-color: var(--t-accent); }
.d2-ev-ar { font-size: 20px; color: var(--t-accent); }
.d2-ev-c b { font: 700 1.1rem/1.2 'Space Grotesk', sans-serif; }
.d2-ev-c small { color: var(--t-text-secondary); }
.d2-ev-c em { font-style: normal; font-weight: 700; color: var(--t-accent); margin-top: 4px; }

@media (max-width: 980px) {
    .d2-day-in { grid-template-columns: 1fr; padding: 26px 26px 22px; }
    .d2-r { margin-top: 24px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); }
    .d2-day[data-style="plain"] .d2-r { border-top-color: var(--t-border); }
    .d2-moon { position: absolute; top: 22px; inset-inline-end: 22px; }
    .d2-moon-t { display: none; }
    .d2-head { padding-inline-end: 64px; }
    .d2-sep { display: none; }
    .d2-greg { flex-basis: 100%; }
    .d2-gh { display: inline; }
    .d2-path-grid { grid-template-columns: 1fr; }
    .d2-acc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .d2-groups { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .d2 { padding: 70px 12px 30px; gap: 26px; }
    .d2-day-in { padding: 22px 20px 18px; gap: 0; }
    .d2-day, .d2-sky, .d2-world { border-radius: 22px; }
    .d2-groups { grid-template-columns: 1fr; }
    .d2-ev-row { grid-template-columns: 1fr; }
    .d2-world { padding: 18px 14px; }
}

.d2 [hidden] { display: none !important; }
.d2-day[data-p="sun"] .d2-sky::after, .d2-day[data-p="dhuhr"] .d2-sky::after, .d2-day[data-p="asr"] .d2-sky::after { background: radial-gradient(900px 300px at 85% -10%, rgba(255, 255, 255, .12), transparent 60%); }

/* the new tools in the bento of the preview */
.h-tools { grid-template-areas: "times times qibla quran" "cal conv qibla ai" "asma zk methods mp3" "hd hd az mq"; }
.h-tool-asma { grid-area: asma; --tint: 180, 130, 40; }
.h-tool-zk { grid-area: zk; --tint: 15, 143, 99; }
@media (max-width: 1100px) { .h-tools { grid-template-areas: "times times" "qibla quran" "qibla cal" "conv ai" "asma zk" "methods mp3" "hd hd" "az mq"; } }
@media (max-width: 600px) { .h-tools { grid-template-areas: "times times" "qibla qibla" "quran quran" "cal cal" "conv conv" "ai ai" "asma asma" "zk zk" "methods mp3" "hd hd" "az az" "mq mq"; } }

@media (max-width: 640px) {
    .d2-path-grid > .h-qtop { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "title" "ctrl" "stats" "foot"; text-align: center; padding: 20px; }
    .d2-path-grid > .h-qtop .h-qp-title { margin: 16px 0 0; }
    .d2-path-grid > .h-qtop .h-qp-controls { justify-content: center; margin: 14px 0 6px; }
    .d2-path-grid > .h-qtop .h-qp-stats, .d2-path-grid > .h-qtop .h-qp-foot { justify-content: center; }
    .d2-path-grid > .h-qtop .h-qp-meta { margin-inline: auto; }
    .d2-path-grid > .h-qtop .h-qp-ar { direction: rtl; text-align: center; }
    .d2-acc { padding: 20px; }
    .d2-acc-me { flex-wrap: wrap; }
    .d2-acc-me .d2-acc-h { font-size: 1.15rem; }
    .d2-acc-prof { flex-basis: 100%; padding-inline-start: 62px; }
}

/* Makkah & Madinah live: a thin strip across the page */
.d2-live { display: flex; align-items: center; gap: 20px; padding: 14px 16px 14px 22px; border-radius: 20px; background: transparent; border: 1px solid var(--t-border); color: var(--t-text); margin-top: -14px; }
.d2-live-main { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.d2-live-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(224, 53, 43, .1); color: #d0342a; font: 700 12px/1 'Inter', sans-serif; letter-spacing: .06em; white-space: nowrap; }
.d2-live-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.d2-live-txt b { font: 700 1.1rem/1.2 'Space Grotesk', sans-serif; }
.d2-live-txt small { font-size: 13px; color: var(--t-text-secondary); }
.d2-live-time { font-size: 13px; color: var(--t-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.d2-live-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.d2-live .d2-btn svg { width: 12px; height: 12px; }
.d2-live .d2-btn:hover { filter: brightness(.95); }
@media (max-width: 980px) {
    .d2-live { flex-wrap: wrap; padding: 16px; }
    .d2-live-main { flex-basis: 100%; }
}
@media (max-width: 640px) {
    .d2-live-main { flex-direction: column; align-items: flex-start; gap: 10px; }
    .d2-live-time { flex-basis: 100%; }
    .d2-live-btns { width: 100%; }
    .d2-live-btns .d2-btn { flex: 1; justify-content: center; }
}

/* the next big date (Ramadan): the night card that was among the tools */
.h-events-module .h-event-hero {
    position: relative; flex: 0 0 40%; border: 1px solid rgba(255, 255, 255, .08); border-radius: 24px; padding: 24px 26px; color: #fff; isolation: isolate;
    background: radial-gradient(1.2px 1.2px at 20% 30%, #fff8, transparent), radial-gradient(1px 1px at 60% 20%, #fff7, transparent),
        radial-gradient(1.4px 1.4px at 80% 60%, #fff6, transparent), radial-gradient(1px 1px at 35% 75%, #fff5, transparent),
        radial-gradient(1px 1px at 70% 85%, #fff6, transparent), radial-gradient(1px 1px at 48% 12%, #fff6, transparent),
        linear-gradient(135deg, #14213d 0%, #1f3a68 60%, #2c4f86 100%);
    box-shadow: 0 14px 34px rgba(20, 33, 61, .18); transition: transform .25s ease, box-shadow .25s ease;
}
.h-events-module .h-event-hero:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(20, 33, 61, .28); }
.h-events-module .h-event-hero-eyebrow { color: #facc15; }
.h-events-module .h-event-hero-name { color: #fff; }
.h-events-module .h-event-hero-also, .h-events-module .h-event-hero-meta { color: rgba(255, 255, 255, .72); }
.h-events-module .h-ehcd-num { background: rgba(255, 255, 255, .1); color: #fff; }
.h-events-module #h-ehcd-d { color: #facc15; background: rgba(250, 204, 21, .14); }
.h-events-module .h-ehcd-lbl { color: rgba(255, 255, 255, .65); }
.h-events-module .h-ehcd-sep { color: #facc15; }
.h-events-module .h-event-hero-cta { color: #facc15; }
.h-events-module .h-event-hero-body { position: relative; z-index: 1; }
.h-events-module .h-event-hero-deco { position: absolute; left: 26px; bottom: 6px; color: #fff; opacity: .06; z-index: 0; font-size: clamp(44px, 5vw, 64px); }
html[dir="rtl"] .h-events-module .h-event-hero-deco { left: auto; right: 26px; }
.h-event-hero-lamp {
    position: relative; z-index: 1; flex: 0 0 92px; align-self: center; width: 92px; height: 104px; background-color: #facc15; opacity: .92;
    -webkit-mask: url('../assets/icon/ramadan.svg') center / contain no-repeat; mask: url('../assets/icon/ramadan.svg') center / contain no-repeat;
    filter: drop-shadow(0 0 18px rgba(250, 204, 21, .45)); transform-origin: 50% 0; transform: rotate(-4deg); transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.h-event-hero:hover .h-event-hero-lamp { transform: rotate(4deg) translateY(-3px); }
.h-event-hero:not(.is-ram) .h-event-hero-lamp { display: none; }
.h-events-module .h-events-slider-wrap { align-self: center; }
@media (max-width: 900px) {
    .h-events-module .h-event-hero { flex: none; width: 100%; border: 1px solid rgba(255, 255, 255, .08); padding: 22px; box-sizing: border-box; }
}
@media (max-width: 600px) {
    .h-event-hero-lamp { flex-basis: 64px; width: 64px; height: 74px; align-self: flex-start; margin-top: 10px; }
    .h-events-module .h-event-hero-deco { display: none; }
}
@media (prefers-reduced-motion: reduce) { .h-event-hero-lamp, .h-events-module .h-event-hero { transition: none; } }
.h-event-hero.is-ram .h-event-hero-deco { display: none; }
.h-events-module .h-event-hero:not(.is-ram) .h-event-hero-deco { left: auto; right: 26px; }
.h-tool-asma .h-tool-deco { font-size: 40px; }
/* the Ramadan card: name, date, the days left (only the days, as on the old card), the link; as tall as the holy-day cards */
.h-events-module { align-items: flex-start; }
.h-events-module .h-event-hero { padding: 18px 22px; box-sizing: border-box; }
.h-events-module .h-event-hero-body { justify-content: space-between; gap: 6px; }
.h-events-module .h-event-hero-name { margin: 0; }
.h-events-module .h-event-hero-meta { margin: 0; }
.h-events-module .h-event-hero-cd { margin: 4px 0 2px; gap: 0; }
.h-events-module .h-event-hero-cd .h-ehcd-sep, .h-events-module .h-event-hero-cd .h-ehcd-unit + .h-ehcd-sep + .h-ehcd-unit { display: none; }
.h-events-module .h-event-hero-cd .h-ehcd-unit:first-child { flex-direction: row; align-items: baseline; gap: 8px; }
.h-events-module #h-ehcd-d { background: none; padding: 0; min-width: 0; text-align: start; font-size: 56px; line-height: 1; color: #facc15; letter-spacing: -1px; }
.h-events-module .h-event-hero-cd .h-ehcd-unit:first-child .h-ehcd-lbl { font-size: 14px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .8); }
.h-events-module .h-event-hero-cta { margin-top: 0; }
.h-events-module .h-event-hero-lamp { width: 80px; height: 92px; flex-basis: 80px; }
@media (max-width: 900px) { .h-events-module .h-event-hero { height: auto !important; margin-top: 0 !important; } }
/* wide screens: Ramadan a quarter of the width, fixed on the left; three holy-day cards beside it, which slide */
@media (min-width: 901px) {
    .h-events-module .h-event-hero { flex: 0 0 calc(32% - 12px); padding: 20px 24px; align-items: stretch; }
    .h-events-module .h-event-hero-body { gap: 4px; }
    .h-events-module .h-event-hero-name { font-size: clamp(20px, 1.8vw, 25px); white-space: normal; }
    .h-events-module .h-event-hero-meta { flex-direction: column; align-items: flex-start; gap: 0; font-size: 12.5px; }
    .h-events-module .h-event-hero-meta .h-event-hero-sep { display: none; }
    .h-events-module .h-event-hero-cd { margin: auto 0 4px; }
    .h-events-module #h-ehcd-d { font-size: 52px; }
    .h-events-module .h-event-hero-lamp { position: absolute; top: 18px; right: 20px; width: 64px; height: 74px; }
    html[dir="rtl"] .h-events-module .h-event-hero-lamp { right: auto; left: 16px; }
    .h-events-module .h-event-hero-name { padding-inline-end: 72px; }
    .h-events-module .h-events-slider .h-ecard { flex: 0 0 calc((100% - 20px) / 3); }
}
/* the holy-day cards: a little taller and roomier */
.h-events-module .h-ecard { min-height: 196px; padding: 18px 18px 16px; gap: 6px; border-radius: 18px; box-sizing: border-box; }
.h-events-module .h-ecard-name { font-size: 15px; }
.h-events-module .h-ecard-hijri { font-size: 12px; }
.h-events-module .h-ecard-date { font-size: 13px; }
.h-events-module .h-ecard-badge { font-size: 22px; margin-top: 4px; }

/* the slider without the date that the Ramadan card already shows */
.h-events-module .h-events-slider .h-ecard-featured { display: none; }

@media (min-width: 981px) {
    .d2-r { margin: -34px -40px -30px 0; padding: 25px 35px 40px; background: rgba(255, 255, 255, .1); border-inline-start: 1px solid rgba(255, 255, 255, .2); border-radius: 0 28px 28px 0; }
    html[dir="rtl"] .d2-r { margin: -34px 0 -30px -40px; border-radius: 28px 0 0 28px; }
    .d2-day[data-style="plain"] .d2-r { background: rgba(var(--t-accent-rgb), .05); }
}
@media (max-width: 640px) {
    .d2-moon svg { width: 46px; height: 46px; }
    .d2-pn em { font-size: 30px; }
    .d2-pn { font-size: 19px; }
    .d2-head { gap: 10px; }
    .d2-greg { font-size: 14px; }
    .d2-r { margin-top: 18px; }
}

/* choosing the place: a white search box that opens under the city */
.d2-pick { position: absolute; z-index: 40; width: min(480px, calc(100% - 24px)); background: #fff; color: #1f2433; border-radius: 18px; padding: 8px; box-shadow: 0 24px 60px rgba(10, 20, 50, .28), 0 4px 14px rgba(10, 20, 50, .12);
    opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: 24px 0; transition: opacity .18s ease, transform .22s cubic-bezier(.2, .9, .3, 1.2); }
.d2-pick.is-open { opacity: 1; transform: none; }
.d2-pick[hidden] { display: none; }
.d2-pick-row { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; border-radius: 12px; background: #f4f5f8; }
.d2-pick-q { width: 18px; height: 18px; flex: none; color: #7a8094; }
.d2-pick input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font: 500 16px/1 'Inter', sans-serif; color: #1f2433; }
.d2-pick input::placeholder { color: #8b90a3; }
.d2-pick input::-webkit-search-cancel-button { display: none; }
.d2-pick-me { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: #fff; color: #2c5aa0; font: 600 13.5px/1 'Inter', sans-serif; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); transition: background .15s; }
.d2-pick-me:hover { background: #eef3fb; }
.d2-pick-me svg { width: 16px; height: 16px; }
.d2-pick-me.is-busy svg { animation: d2-spin 1s linear infinite; }
@keyframes d2-spin { to { transform: rotate(360deg); } }
.d2-pick-res { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow: auto; }
.d2-pick-res:not(:empty) { margin-top: 6px; }
.d2-pick-res li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; animation: d2-in .2s ease both; }
.d2-pick-res li:nth-child(2) { animation-delay: .02s; } .d2-pick-res li:nth-child(3) { animation-delay: .04s; } .d2-pick-res li:nth-child(4) { animation-delay: .06s; } .d2-pick-res li:nth-child(n+5) { animation-delay: .08s; }
@keyframes d2-in { from { opacity: 0; transform: translateY(4px); } }
.d2-pick-res li[aria-selected="true"] { background: #f0f4fb; }
.d2-pick-res li svg { width: 18px; height: 18px; flex: none; color: #2c5aa0; }
.d2-pick-res li span { display: flex; flex-direction: column; min-width: 0; }
.d2-pick-res li b { font: 600 15px/1.25 'Inter', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d2-pick-res li mark { background: none; color: #2c5aa0; }
.d2-pick-res li small { font-size: 12.5px; color: #7a8094; }
.d2-pick-msg { margin: 8px 12px 6px; font-size: 13.5px; color: #7a8094; }
@media (max-width: 640px) { .d2-pick { inset-inline: 10px !important; width: auto; } .d2-pick-me span { display: none; } .d2-pick-me { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .d2-pick, .d2-pick-res li { transition: none; animation: none; } }

/* the look of the card: two quiet dots under it, on the right */
.d2-style { position: absolute; top: calc(100% + 14px); inset-inline-end: 14px; display: inline-flex; align-items: center; gap: 4px; z-index: 2; }
.d2-style button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.d2-style button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.d2-style i { width: 10px; height: 10px; border-radius: 50%; opacity: .35; transition: opacity .2s, transform .2s; }
.d2-style button:hover i { opacity: .7; }
.d2-style button[aria-pressed="true"] i { opacity: 1; transform: scale(1.25); }
.d2-style [data-s="sky"] i { background: linear-gradient(160deg, #1f4f8f, #467dbd); }
.d2-style [data-s="plain"] i { background: var(--t-accent); }
.d2-style button:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 1px; }
.d2-day { margin-bottom: 30px; }

/* the account card for a visitor who is not signed in: the card's own colours, the icons and the button stand out */
.d2-acc.is-guest { position: relative; overflow: hidden; padding: 26px 28px; background: var(--t-card); border: 1px solid var(--t-border); color: var(--t-text); }
.d2-acc.is-guest .d2-acc-out { gap: 14px; }
.d2-acc-art { position: absolute; top: 22px; inset-inline-end: 24px; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; background: rgba(var(--t-accent-rgb), .12); color: var(--t-accent); }
.d2-acc-art svg { width: 38px; height: 38px; }
@keyframes d2-float { 50% { transform: translateY(-4px); } }
.d2-acc-kick { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: rgba(var(--t-accent-rgb), .12); color: var(--t-accent); font: 700 11.5px/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.d2-acc.is-guest .d2-acc-h { color: var(--t-text); font-size: clamp(1.5rem, 2.2vw, 1.9rem); padding-inline-end: 84px; }
.d2-acc.is-guest .d2-acc-list { gap: 10px; }
.d2-acc.is-guest .d2-acc-list li { align-items: center; color: var(--t-text); font-size: 14.5px; }
.d2-acc.is-guest .d2-acc-list i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--t-accent); color: #fff; box-shadow: 0 6px 14px -6px rgba(var(--t-accent-rgb), .7); }
.d2-acc.is-guest .d2-acc-list i svg { width: 17px; height: 17px; padding: 0; margin: 0; background: none; color: inherit; }
.d2-acc.is-guest .d2-acc-local { color: var(--t-accent); font-weight: 600; }
.d2-acc.is-guest .d2-acc-btns { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 6px; }
.d2-acc-cta { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--t-accent); color: #fff; font: 700 15.5px/1 'Inter', sans-serif; cursor: pointer; box-shadow: 0 12px 26px -10px rgba(var(--t-accent-rgb), .8); transition: transform .2s, box-shadow .2s, filter .2s; }
.d2-acc-cta:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 30px -10px rgba(var(--t-accent-rgb), .9); }
.d2-acc-cta span[aria-hidden] { transition: transform .2s; }
.d2-acc-cta:hover span[aria-hidden] { transform: translateX(3px); }
.d2-acc-have { margin: 0; font-size: 13.5px; color: var(--t-text-secondary); }
.d2-acc-have button { padding: 0; border: 0; background: none; color: var(--t-accent); font: 600 13.5px 'Inter', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 640px) { .d2-acc.is-guest { padding: 22px 20px; } .d2-acc-art { width: 54px; height: 54px; border-radius: 16px; } .d2-acc-art svg { width: 30px; height: 30px; } .d2-acc.is-guest .d2-acc-h { padding-inline-end: 64px; } }

/* the prayer times of the city: a quiet button at the top right of the countdown */
.d2-l { position: relative; }
.d2-open { position: absolute; top: -6px; inset-inline-end: -6px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: inherit; opacity: .75; transition: background .2s, opacity .2s, transform .2s; }
.d2-open svg { width: 21px; height: 21px; }
.d2-open:hover { opacity: 1; background: rgba(255, 255, 255, .14); transform: translate(1px, -1px); }
.d2-day[data-style="plain"] .d2-open:hover { background: rgba(var(--t-accent-rgb), .1); }
.d2-open:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }
.d2-head { padding-inline-end: 44px; }
@media (max-width: 980px) { .d2-open { top: 34px; inset-inline-end: -4px; } }

.d2-method #d2-meth { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.d2-method #d2-meth:hover { text-decoration-style: solid; }
.d2-day[data-style="plain"] .d2-moon-t b { color: var(--t-text-secondary); opacity: 1; }

/* phones and tablets: one clear column — place and date, the countdown, the prayers, then the Moon and the method */
@media (max-width: 980px) {
    .d2-day-in { display: flex; flex-direction: column; gap: 0; padding: 22px 20px 20px; }
    .d2-l, .d2-r { display: contents; }
    .d2-head { order: 1; padding-inline-end: 48px; gap: 6px 12px; }
    .d2-sep { display: block; height: 18px; }
    .d2-greg { flex-basis: auto; }
    .d2-gh { display: none; }
    .d2-open { order: 0; position: absolute; top: 14px; inset-inline-end: 12px; }
    .d2-cd { order: 2; margin-top: 22px; }
    .d2-prog { order: 3; margin-top: 18px; }
    .d2-prayers { order: 4; margin: 22px -8px 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); flex: none; }
    .d2-day[data-style="plain"] .d2-prayers { border-top-color: var(--t-border); }
    .d2-moon { order: 5; position: static; justify-content: flex-end; flex-direction: row-reverse; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2); }
    .d2-day[data-style="plain"] .d2-moon { border-top-color: var(--t-border); }
    .d2-moon svg { width: 40px; height: 40px; }
    .d2-moon-t { display: block; text-align: start; }
    .d2-moon-t small { margin-top: 2px; }
    .d2-foot { order: 6; margin-top: 12px; }
    .d2-method { font-size: 12.5px; }
}
@media (max-width: 640px) {
    .d2-num { font-size: clamp(56px, 19vw, 76px); margin: 8px 0 8px; }
    .d2-pn em { font-size: 28px; }
    .d2-pn { font-size: 18px; }
    .d2-prayers li { padding: 9px 12px; gap: 10px; }
    .d2-prayers li > span { font-size: 14.5px; }
    .d2-prayers li > b { font-size: 19px; }
    .d2-prayers li > em { font-size: 12px; }
    .d2-greg { font-size: 14px; }
    .d2-place { font-size: 15px; }
}