/* styles/hold-mock.css — the Hold menu and its windows, drawn exactly as the owner's mock
   (Hold Menu, Squares v22) draws them: its palette (--mk-*, in styles/al.css), its sizes, its
   radii, its glass sheet. v1331: "It's absolutely nothing like the HTMLs" — the v1322–v1330
   ports had moved every size to the kit's 16px floor and the sheet onto the kit's surfaces.
   CALLED BY: zero.html (<link>, after hold.css and hold-win.css, which keep the mechanics).
   The window rules below the line are the mock's own rules, scoped to :is(#ayah-pop, .mz-und-host) .hw; sizes stay
   the mock's at the default knobs and still follow them (type × --k-type, spacing × --k-density,
   radii × --k-radius, Arabic in the reader's face --f-quran).
   SAFE TO DELETE: only with hold.css / hold-win.css re-sized to the mock by hand. */

/* ── the sheet: a floating glass card, as the mock ─────────────────────── */
html #ayah-pop { --mk-gt:var(--mk-ink2); --mk-gb:var(--mk-fill);
  bottom:calc(12px + env(safe-area-inset-bottom, 0px)); width:min(calc(100vw - 24px), 540px); max-height:calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
  border-radius:var(--mk-r28); padding:calc(14px * var(--k-density)) calc(12px * var(--k-density)) calc(12px * var(--k-density));
  background:var(--mk-glass); -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
  color:var(--mk-ink); font:calc(16px * var(--k-type))/1.5 var(--f-ui); -webkit-font-smoothing:antialiased;
  box-shadow:var(--mk-shadow), 0 0 0 100vmax color-mix(in srgb, var(--mk-ink) 18%, transparent); }
html body.theme-dark #ayah-pop { background:var(--mk-glass); color:var(--mk-ink); box-shadow:var(--mk-shadow), 0 0 0 100vmax rgba(0,0,0,.5); }
html #ayah-pop::before { display:none; }
html #ayah-pop.show { animation:none; }   /* v1620: it rises on the spring (zero.html rise()) */
@media (max-width:480px) { html #ayah-pop { border-radius:var(--mk-r24); padding:calc(10px * var(--k-density)); } html #ayah-pop .hm-b { letter-spacing:-.01em; } }
@media (min-width:744px) {
  html #ayah-pop, html #ayah-pop[data-pane="stage"] { width:min(92vw, 540px); max-height:calc(100dvh - 48px); bottom:24px; }
  html #ayah-pop:is(.show, .leaving), html body.theme-dark #ayah-pop:is(.show, .leaving) { box-shadow:var(--mk-shadow), 0 0 0 100vmax color-mix(in srgb, var(--mk-ink) 18%, transparent); }
  html body.theme-dark #ayah-pop:is(.show, .leaving) { box-shadow:var(--mk-shadow), 0 0 0 100vmax rgba(0,0,0,.5); }
  html #ayah-pop:not([data-pane="stage"]):not([data-win]), html #ayah-pop[data-win=""]:not([data-pane="stage"]) { width:min(92vw, 880px); }
}
html #ayah-pop .al-panes, html #ayah-pop .al-pane { background:none; }
html #ayah-pop .al-stage > .al-bar { position:absolute; top:calc(10px * var(--k-density)); right:calc(10px * var(--k-density)); }
html #ayah-pop .al-stage > .al-bar .al-x { width:40px; height:40px; min-height:0; border-radius:50%; display:grid; place-items:center; background:var(--mk-fill); color:var(--mk-ink2); }
html #ayah-pop .al-stage > .al-bar .al-x svg.ic { width:18px; height:18px; }

/* ── the menu ──────────────────────────────────────────────────────────── */
html #ayah-pop .al-stage .hm-body { padding:0; gap:0; overflow:visible; }
/* v1376 — a marked āyah's card (Mixed up with …) makes the menu taller than a phone screen; the pop clips, so the menu
   must scroll there or its last rows (Study, Understand) cannot be reached (found at 390×844) */
html #ayah-pop .al-stage .hm-body { overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
html #ayah-pop .al-stage .hm-card { margin:calc(4px * var(--k-density)) 0 calc(10px * var(--k-density)); padding-top:calc(2px * var(--k-density)); }   /* v1345: full width, centred */
html #ayah-pop .al-stage .hm-ref { display:grid; grid-template-columns:44px minmax(0, 1fr) 44px; align-items:center; min-height:44px; margin:0 calc(-6px * var(--k-density)); }
html #ayah-pop .al-stage .hm-ref .ayp-ref { grid-column:2; }
html #ayah-pop .al-stage .hm-ref .al-x { grid-column:3; justify-self:end; width:36px; height:36px; min-width:44px; min-height:44px; margin:0; background:none; display:grid; place-items:center; color:var(--mk-ink2); }
html #ayah-pop .al-stage .hm-ref .al-x::before { content:""; position:absolute; width:32px; height:32px; border-radius:50%; background:var(--mk-fill); z-index:-1; }
html #ayah-pop .al-stage .hm-ref .al-x { position:relative; z-index:0; }
html #ayah-pop .al-stage .hm-ref .al-x svg.ic { width:16px; height:16px; }
html #ayah-pop .hm-card { border:0; gap:calc(4px * var(--k-density)); padding:calc(10px * var(--k-density)) calc(12px * var(--k-density)); border-radius:var(--mk-r20); background:var(--mk-card);
  box-shadow:inset 0 0 0 .5px var(--mk-line), 0 12px 26px -18px rgba(27,24,18,.5); justify-content:flex-start; }
html #ayah-pop .hm-ref { justify-content:center; }
html #ayah-pop .hm-ref .ayp-ref, html #ayah-pop .al-stage .hm-ref .ayp-ref { font:700 calc(12.5px * var(--k-type))/1.2 var(--f-ui); color:var(--mk-mut); letter-spacing:.02em; text-align:center; }
html #ayah-pop .hm-ar { font-size:calc(clamp(18px, 5.4vw, 26px) * var(--k-type)); line-height:1.8; text-align:center; color:var(--mk-ink); max-height:calc(1.85em * 5); }
html #ayah-pop .hm-ar.faded { -webkit-mask-image:linear-gradient(to bottom, black 72%, transparent); mask-image:linear-gradient(to bottom, black 72%, transparent); }
html #ayah-pop .hm-card.many .hm-ar { font-size:calc(clamp(15px, 4.6vw, 21px) * var(--k-type)); max-height:calc(1.85em * 2); }
/* v1492 audit #34: the clip box (overflow:hidden) cut the first line's high marks and the last line's low kasras —
   the Qur'an face's marks reach ~.3em past a 1.8 line box. Pad the box so the clip edge clears them; the caps grow by
   the same padding, so the line counts (5, and 2 in a range) are unchanged. */
html #ayah-pop .hm-ar { padding-block:.3em; }
html #ayah-pop .hm-card:not(.many) .hm-ar { max-height:calc(1.85em * 5 + .6em); }
html #ayah-pop .hm-card.many .hm-ar { max-height:calc(1.85em * 2 + .6em); }
html #ayah-pop .hm-card.open .hm-ar { max-height:none; }
html #ayah-pop .hm-ar .al-w.cur { background:var(--mk-gold-soft); color:inherit; border-radius:var(--mk-r6); padding:0 calc(2px * var(--k-density)); box-shadow:inset 0 -2px 0 var(--mk-gold); }
html #ayah-pop .hm-more { min-height:36px; padding:0 calc(14px * var(--k-density)); border-radius:var(--mk-r99); background:var(--mk-fill); color:var(--mk-ink2); font:600 calc(13.5px * var(--k-type))/1 var(--f-ui); }
/* v1492 audit #85: Show all stays the mock's 36px chip, but its tap target reaches 44px (4px above and below) */
html #ayah-pop .hm-more { position:relative; }
html #ayah-pop .hm-more::after { content:""; position:absolute; inset:-4px 0; }
html #ayah-pop .hm-n { background:var(--mk-gold-soft); color:var(--mk-gold); border-radius:var(--mk-r7); font:700 calc(11.5px * var(--k-type))/1.3 var(--f-ui); padding:calc(2px * var(--k-density)) calc(5px * var(--k-density)); min-width:20px; }
html #ayah-pop .hm-orn { color:var(--mk-gold); gap:8px; justify-content:center; }
html #ayah-pop .hm-orn i { max-width:70px; background:color-mix(in srgb, var(--mk-gold) 40%, transparent); }
html #ayah-pop .hm-orn b { font-size:calc(12px * var(--k-type)); }
html #ayah-pop .hm-between { margin-top:0; font:600 calc(12px * var(--k-type))/1 var(--f-ui); color:var(--mk-mut); }

html #ayah-pop .hm-grid { gap:calc(8px * var(--k-density)); }
html #ayah-pop .hm-grp { display:grid; gap:calc(5px * var(--k-density)); align-content:start; padding:calc(8px * var(--k-density)); border-radius:var(--mk-r18); background:var(--mk-gb); }
html #ayah-pop .hm-ls { --mk-gt:var(--mk-ink2); --mk-gb:var(--mk-fill); }
html #ayah-pop .hm-dr { --mk-gt:var(--mk-dr); --mk-gb:var(--mk-dr-soft); }
html #ayah-pop .hm-st { --mk-gt:var(--mk-st); --mk-gb:var(--mk-st-soft); }
html #ayah-pop .hm-qr { --mk-gt:var(--mk-qr); --mk-gb:var(--mk-qr-soft); }
html #ayah-pop .hm-gh, html #ayah-pop .hm-ls .hm-gh { margin:0; padding:calc(4px * var(--k-density)) calc(6px * var(--k-density)) calc(2px * var(--k-density)); font:700 calc(11.5px * var(--k-type))/1 var(--f-ui);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mk-gt); }
html #ayah-pop .hm-b { min-height:calc(48px * var(--k-density)); gap:calc(10px * var(--k-density)); padding:0 calc(12px * var(--k-density)); border-radius:var(--mk-r13); background:var(--mk-card);
  color:var(--mk-gt); box-shadow:0 0 0 .5px var(--mk-line); font:600 calc(14.5px * var(--k-type))/1.15 var(--f-ui); }
html #ayah-pop .hm-b svg.ic { width:20px; height:20px; }
html #ayah-pop .hm-tx { flex:1; flex-direction:row; align-items:center; gap:calc(10px * var(--k-density)); }
html #ayah-pop .hm-b .al-n { font:600 calc(14.5px * var(--k-type))/1.15 var(--f-ui); color:inherit; }
html #ayah-pop .hm-s { margin:0 0 0 auto; font:500 calc(12px * var(--k-type))/1 var(--f-ui); opacity:.8; }
/* v1492 audit #30: the Hide row echoes the held word in Arabic — set it in the Qur'an face at the Arabic-in-a-line rung,
   not the 12px Latin meta size, so its harakat can be read */
html #ayah-pop .ayp-hideword .hm-s { font:400 var(--al-ar3)/1.5 var(--f-quran); opacity:.9; }
html #ayah-pop .hm-b.lead { background:var(--mk-acc); color:var(--mk-acc-ink); box-shadow:0 0 0 .5px var(--mk-line); }
html #ayah-pop .hm-b.lead .hm-s { font-weight:500; opacity:.8; }
html #ayah-pop .hm-b.cur { box-shadow:0 0 0 2px var(--mk-gt); }
html #ayah-pop .hm-cnt { margin-left:auto; min-width:20px; height:20px; padding:0 calc(5px * var(--k-density)); border-radius:var(--mk-r99); background:var(--mk-st-on); color:var(--mk-st-on-ink); font:700 calc(11.5px * var(--k-type))/20px var(--f-ui); text-align:center; }

/* ── a window: the sheet takes its group's tone; the head is the mock's .ph ── */
@media (min-width:744px) { html #ayah-pop[data-win]:not([data-win=""]) { width:min(92vw, 720px); } }
html #ayah-pop[data-win="mark"], html #ayah-pop[data-win="words"], html #ayah-pop[data-win="pairs"], html #ayah-pop[data-win="plan"] {
  background:color-mix(in srgb, var(--mk-st-soft) 72%, var(--mk-glass)); box-shadow:var(--mk-shadow), inset 0 0 0 1px var(--mk-st-line), 0 0 0 100vmax color-mix(in srgb, var(--mk-ink) 18%, transparent); }
html #ayah-pop[data-win="drill"], html #ayah-pop[data-win="write"] {
  background:color-mix(in srgb, var(--mk-dr-soft) 72%, var(--mk-glass)); box-shadow:var(--mk-shadow), inset 0 0 0 1px var(--mk-dr-line), 0 0 0 100vmax color-mix(in srgb, var(--mk-ink) 18%, transparent); }
html #ayah-pop[data-win="tr"], html #ayah-pop[data-win="tf"], html #ayah-pop[data-win="wbw"] {
  background:color-mix(in srgb, var(--mk-qr-soft) 70%, var(--mk-glass)); box-shadow:var(--mk-shadow), inset 0 0 0 1px var(--mk-qr-line), 0 0 0 100vmax color-mix(in srgb, var(--mk-ink) 18%, transparent); }
html #ayah-pop[data-win="at"], html #ayah-pop[data-win="play"] { background:var(--mk-glass); }
html body.theme-dark #ayah-pop[data-win]:not([data-win=""]) { box-shadow:var(--mk-shadow), 0 0 0 100vmax rgba(0,0,0,.5); }
html #ayah-pop .hm-page > .al-list { padding:3px 3px 0; gap:0; }   /* v1338: room for the rings and edges the list's clip-path would cut (the Memorize steps, owner's photo) */
html :is(#ayah-pop, .mz-und-host) .hw-ph { gap:calc(8px * var(--k-density)); min-height:0; padding:0; margin-bottom:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw-ph .al-back { width:44px; height:44px; border-radius:50%; background:var(--mk-fill); color:var(--mk-ink); }
html :is(#ayah-pop, .mz-und-host) .hw-ph .wic { width:40px; height:40px; border-radius:var(--mk-r12); background:var(--mk-fill); color:var(--mk-ink2); }
html #ayah-pop .hm-dr .hw-ph .wic { background:var(--mk-dr-on); color:var(--mk-dr-on-ink); }
html #ayah-pop .hm-st .hw-ph .wic { background:var(--mk-st-on); color:var(--mk-st-on-ink); }
html #ayah-pop .hm-qr .hw-ph .wic { background:var(--mk-qr-on); color:var(--mk-qr-on-ink); }
html :is(#ayah-pop, .mz-und-host) .hw-ph .al-title, html #ayah-pop .hm-page .al-title { font:700 calc(19px * var(--k-type))/1.2 var(--f-ui); color:var(--mk-ink); }
html #ayah-pop .hm-dr .hw-ph .al-title { color:var(--mk-dr); }
html #ayah-pop .hm-st .hw-ph .al-title { color:var(--mk-st); }
html #ayah-pop .hm-qr .hw-ph .al-title { color:var(--mk-qr); }
html :is(#ayah-pop, .mz-und-host) .hw-ph .hw-tt { flex:1; }
html :is(#ayah-pop, .mz-und-host) .hw-ph .hw-x { order:9; flex:none; align-self:flex-start; width:40px; height:40px; min-height:0; margin:calc(-4px * var(--k-density)) calc(-2px * var(--k-density)) 0 0; border:0; border-radius:50%; display:grid; place-items:center; background:var(--mk-fill); color:var(--mk-ink2); cursor:pointer; }
html :is(#ayah-pop, .mz-und-host) .hw-ph .hw-x svg.ic { width:18px; height:18px; margin:0; }
html :is(#ayah-pop, .mz-und-host) .hw-sub { font:500 calc(14px * var(--k-type))/1.2 var(--f-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw-toast { padding:calc(8px * var(--k-density)) calc(14px * var(--k-density)); border-radius:var(--mk-r99); background:var(--mk-ink); color:var(--mk-page); font:600 calc(14px * var(--k-type))/1.2 var(--f-ui); }

/* v1332 — iOS WebKit let a window's scrolled content paint over its head (the owner's photo: the Audio
   test steps across "Hear it, then say what comes next"): a scroller under an animated pane lost its clip.
   clip-path clips on the compositor too. The head also sits above the list. */
html #ayah-pop .al-pane > .al-list { clip-path:inset(0); }
html #ayah-pop .al-pane > .al-bar { position:relative; z-index:2; }
@media (max-width:400px) { html #ayah-pop .al-pane .hw .wiz.w4 button { padding:0 calc(5px * var(--k-density)); gap:calc(4px * var(--k-density)); } html #ayah-pop .al-pane .hw .wiz button span { font-size:calc(11.5px * var(--k-type)); } html #ayah-pop .al-pane .hw .wiz button i { width:20px; height:20px; } }
/* v1332 — Word search: tap more words, search them together */
html :is(#ayah-pop, .mz-und-host) .hw .wpick { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:calc(4px * var(--k-density)) calc(10px * var(--k-density)); margin:calc(6px * var(--k-density)) calc(2px * var(--k-density)) calc(10px * var(--k-density)); font:500 calc(13px * var(--k-type))/1.35 var(--f-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .wpick .lnk { min-height:36px; padding:0 calc(8px * var(--k-density)); color:var(--mk-st); }

/* v1333 — My list: a linked pair shows both ayat, each with its reference */
html :is(#ayah-pop, .mz-und-host) .hw .mine .row .tx .trf { display:inline-block; margin-left:calc(8px * var(--k-density)); padding:calc(2px * var(--k-density)) calc(6px * var(--k-density)); border-radius:var(--mk-r7); background:var(--mk-fill); color:var(--mk-mut); font:700 calc(11.5px * var(--k-type))/1.3 var(--f-ui); vertical-align:middle; }
html #ayah-pop .al-pane .hw .mine .row .tx2 { margin-top:calc(-4px * var(--k-density)); padding-top:calc(4px * var(--k-density)); border-top:1px dashed var(--mk-line); }

/* v1334 — Word by word: whose voice the tapped word is in */
html :is(#ayah-pop, .mz-und-host) .hw .wvoice { font:500 calc(12.5px * var(--k-type))/1.3 var(--f-ui); color:var(--mk-mut); margin:calc(-2px * var(--k-density)) 0 calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .wvoice:empty { display:none; }

/* v1339 — the Audio test while it runs: short (no window head — End is in its bar; Recite + Show me on one row),
   and docked at the top of the screen when the lit question/next ayat sit where it would cover them. The Mushaf
   keeps its pinned size — it is never shrunk to make room. */
html #ayah-pop.show.at-testing .hw-ph { display:none; }
html #ayah-pop .al-pane .hw .atrow { display:flex; align-items:center; gap:calc(10px * var(--k-density)); margin-top:calc(10px * var(--k-density)); }
html #ayah-pop .al-pane .hw .atrow .atnow { flex:1; min-width:0; margin:0; justify-content:flex-start; }
html #ayah-pop .al-pane .hw .atrow .go-big { flex:none; width:auto; min-height:48px; padding:0 calc(22px * var(--k-density)); }
html #ayah-pop .al-pane .hw-at .playq { min-height:calc(56px * var(--k-density)); }
html #ayah-pop.show.at-testing.at-top { top:calc(12px + env(safe-area-inset-top, 0px)); bottom:auto; }
@media (min-width:744px) { html #ayah-pop.show.at-testing.at-top { top:24px; } }

/* v1347 — Play and its ⋯ side by side, not joined (owner): Play is the whole lead key; ⋯ a round key of its own
   beside it, opening the reciter list (the player's iOS-style menu) */
/* v1348 — one green Play key; ⋯ lives at its right end, same fill, no divider (owner) */
html #ayah-pop .hm-playrow { display:flex; gap:0; align-items:stretch; min-width:0; max-width:100%; background:var(--mk-acc); color:var(--mk-acc-ink); border-radius:var(--mk-r13); box-shadow:0 0 0 .5px var(--mk-line); overflow:hidden; }
html #ayah-pop .hm-grp.hm-ls { min-width:0; }
html #ayah-pop .hm-playrow .hm-tx, html #ayah-pop .hm-playrow .hm-s { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html #ayah-pop .hm-playrow .hm-b { flex:1 1 0; min-width:0; width:auto; overflow:hidden; background:transparent; box-shadow:none; border-radius:0; padding-right:0; }
html #ayah-pop .hm-playrow .hm-b:active { transform:none; background:color-mix(in srgb, var(--mk-acc-ink) 10%, transparent); }
html #ayah-pop .hm-rc { position:relative; flex:none; width:calc(50px * var(--k-density)); min-width:44px; min-height:calc(48px * var(--k-density)); border:0; border-radius:0; background:transparent; color:var(--mk-acc-ink); box-shadow:none; display:grid; place-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
html #ayah-pop .hm-rc::before { content:""; position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:color-mix(in srgb, var(--mk-acc-ink) 18%, transparent); opacity:0; transform:scale(.7); transition:opacity .15s, transform .15s; }
html #ayah-pop .hm-rc:active::before { opacity:1; transform:scale(1); }
html #ayah-pop .hm-rc svg.ic { position:relative; width:22px; height:22px; margin:0; }
@media (max-width:519px){ html #ayah-pop .hm-playrow .hm-s { display:none; } }
/* v1376 — Mark Ayat's row: the same shape as Play's, in the Study card's colours (not the accent) */
html #ayah-pop .hm-playrow.hm-mkrow { background:var(--mk-card); color:var(--mk-gt); }
html #ayah-pop .hm-mkrow .hm-rc { color:var(--mk-gt); }
html #ayah-pop .hm-mkrow .hm-rc::before { background:color-mix(in srgb, var(--mk-gt) 14%, transparent); }
html #ayah-pop .hm-mkrow .hm-b:active { background:color-mix(in srgb, var(--mk-gt) 8%, transparent); }
html #ayah-pop .hm-rc:focus-visible { outline:2px solid var(--al-focus); outline-offset:-4px; border-radius:var(--mk-r13); }

/* ── the mock's window rules, verbatim, scoped ──────────────────────────── */

/* v1355 — the owner's pick (A with C's red words): under the ayah on the card, the ayah it is mixed up with */
html #ayah-pop .ayp-twins { display:flex; flex-direction:column; gap:calc(6px * var(--k-density)); margin-top:calc(8px * var(--k-density)); padding-top:calc(8px * var(--k-density)); border-top:.5px solid var(--mk-line); text-align:start; }
html #ayah-pop .ayp-twins[hidden] { display:none; }
html #ayah-pop .tw-hd { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:32px; }
html #ayah-pop .tw-k { display:inline-flex; align-items:center; gap:6px; font:700 calc(11.5px * var(--k-type))/1.2 var(--f-ui); letter-spacing:.07em; text-transform:uppercase; color:var(--mk-mixed); }
html #ayah-pop .tw-k::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
html #ayah-pop .tw-un { min-height:44px; padding:0 calc(6px * var(--k-density)); border:0; background:none; color:var(--mk-mixed); font:600 calc(14px * var(--k-type))/1 var(--f-ui); cursor:pointer; }
html #ayah-pop .tw-row { display:flex; flex-direction:column; gap:2px; }
html #ayah-pop .tw-go { display:flex; align-items:center; gap:calc(10px * var(--k-density)); width:100%; min-height:52px; padding:calc(8px * var(--k-density)) calc(10px * var(--k-density)); border:0; border-radius:var(--mk-r12); background:var(--mk-fill); color:var(--mk-ink); text-align:start; cursor:pointer; -webkit-tap-highlight-color:transparent; }
html #ayah-pop .tw-go:active { background:var(--mk-fill2); }
html #ayah-pop .tw-ref { flex:none; display:flex; flex-direction:column; gap:1px; font:700 calc(13px * var(--k-type))/1.2 var(--f-ui); color:var(--mk-ink2); }
html #ayah-pop .tw-ref small { font:500 calc(12px * var(--k-type))/1.2 var(--f-ui); color:var(--mk-mut); font-variant-numeric:tabular-nums; }
html #ayah-pop .tw-ar { flex:1; min-width:0; font:calc(19px * var(--k-type))/1.75 var(--mk-q); color:var(--mk-ink); text-align:right; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
html #ayah-pop .tw-row.open .tw-ar { -webkit-line-clamp:unset; display:block; }
html #ayah-pop .tw-ar .sh { color:var(--mk-mixed); }
html #ayah-pop .tw-ch { flex:none; color:var(--mk-mut); display:grid; }
html #ayah-pop .tw-ch svg.ic { width:15px; height:15px; margin:0; }
html #ayah-pop .tw-more { align-self:flex-end; min-height:36px; padding:0 calc(12px * var(--k-density)); border:0; border-radius:var(--mk-r99); background:none; color:var(--mk-ink2); font:600 calc(13px * var(--k-type))/1 var(--f-ui); cursor:pointer; }
html #ayah-pop .tw-more[hidden] { display:none; }
html #ayah-pop .tw-toast { position:absolute; left:50%; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:6; display:flex; align-items:center; gap:12px; padding:6px 6px 6px 16px; border-radius:var(--mk-r14); background:var(--mk-ink); color:var(--mk-page); font:600 calc(14.5px * var(--k-type))/1.2 var(--f-ui); box-shadow:var(--mk-shadow); opacity:0; pointer-events:none; transform:translate(-50%, 12px); transition:opacity .2s, transform .25s; }
html #ayah-pop .tw-toast.on { opacity:1; pointer-events:auto; transform:translate(-50%, 0); }
html #ayah-pop .tw-toast button { min-height:40px; padding:0 14px; border:0; border-radius:var(--mk-r10); background:color-mix(in srgb, var(--mk-page) 16%, transparent); color:var(--mk-page); font:700 calc(14px * var(--k-type))/1 var(--f-ui); cursor:pointer; }
/* v1355 — nothing in the Mutashabihat window is kept until Done */
html :is(#ayah-pop, .mz-und-host) .hw-done { position:sticky; bottom:0; z-index:3; display:flex; align-items:center; gap:10px; margin-top:calc(10px * var(--k-density)); padding:calc(8px * var(--k-density)) calc(8px * var(--k-density)) calc(8px * var(--k-density)) calc(14px * var(--k-density)); border-radius:var(--mk-r16); background:var(--mk-card); box-shadow:var(--mk-shadow); font:500 calc(13.5px * var(--k-type))/1.3 var(--f-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw-done[hidden] { display:none; }
html :is(#ayah-pop, .mz-und-host) .hw-done span { flex:1; min-width:0; }
html :is(#ayah-pop, .mz-und-host) .hw-done button { flex:none; min-height:44px; padding:0 22px; border:0; border-radius:var(--mk-r13); background:var(--mk-acc); color:var(--mk-acc-ink); font:700 calc(15px * var(--k-type))/1 var(--f-ui); cursor:pointer; }
@media (prefers-reduced-motion:reduce) { html #ayah-pop .tw-toast { transition:none; } }
html #ayah-pop .tw-toast span { white-space:nowrap; }
/* the window's own toast sits above the Done bar, never on it */
html #ayah-pop:has(.al-pane.on .hw-done:not([hidden])) .hw-toast { bottom:calc(var(--al-u, 4px) * 4 + 76px + env(safe-area-inset-bottom, 0px)); }
html :is(#ayah-pop, .mz-und-host) .hw .ar { font-family:var(--mk-q); direction:rtl; }
html :is(#ayah-pop, .mz-und-host) .hw .ic { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
html :is(#ayah-pop, .mz-und-host) .hw .ic.f { fill:currentColor; stroke:none; }
html :is(#ayah-pop, .mz-und-host) .hw .seg { display:inline-flex; padding:calc(3px * var(--k-density)); border-radius:var(--mk-r12); background:var(--mk-fill); gap:calc(2px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .seg button { min-height:calc(36px * var(--k-density)); padding:0 calc(12px * var(--k-density)); border-radius:var(--mk-r9); font:600 calc(14px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .seg button.on { background:var(--mk-card); color:var(--mk-ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }
html :is(#ayah-pop, .mz-und-host) .hw .pv { display:flex; align-items:center; gap:calc(10px * var(--k-density)); padding:calc(6px * var(--k-density)) calc(8px * var(--k-density)) calc(6px * var(--k-density)) calc(14px * var(--k-density)); border-radius:var(--mk-r16); background:var(--mk-card); box-shadow:0 0 0 .5px var(--mk-line); min-width:0; }
html :is(#ayah-pop, .mz-und-host) .hw .pv .ref { font:700 calc(14px * var(--k-type))/1.2 var(--mk-ui); white-space:nowrap; }
html :is(#ayah-pop, .mz-und-host) .hw .pv .v { flex:1; min-width:0; font:calc(22px * var(--k-type))/1.9 var(--mk-q); direction:rtl; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:var(--mk-r8); padding:0 calc(6px * var(--k-density)); transition:background .25s; }
html :is(#ayah-pop, .mz-und-host) .hw .pv .x { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--mk-fill); flex:none; }
html :is(#ayah-pop, .mz-und-host) .hw .pv .x .ic { width:18px; height:18px; }
html :is(#ayah-pop, .mz-und-host) .hw .tabs { display:grid; grid-template-columns:1fr 1fr; padding:calc(3px * var(--k-density)); border-radius:var(--mk-r14); background:var(--mk-fill); gap:calc(3px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .tabs button { min-height:calc(42px * var(--k-density)); border-radius:var(--mk-r11); font:600 calc(15px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink2); display:flex; align-items:center; justify-content:center; gap:calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .tabs button.on { background:var(--mk-card); color:var(--mk-ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }
html :is(#ayah-pop, .mz-und-host) .hw .tabs .ic { width:18px; height:18px; }
html :is(#ayah-pop, .mz-und-host) .hw .hubnav { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:calc(6px * var(--k-density)); margin-bottom:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .hubnav button { min-height:calc(52px * var(--k-density)); border-radius:var(--mk-r14); background:var(--mk-card); box-shadow:0 0 0 .5px var(--mk-line); display:flex; align-items:center; justify-content:center; gap:calc(8px * var(--k-density)); font:600 calc(15px * var(--k-type))/1.1 var(--mk-ui); color:var(--mk-ink2); padding:0 calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .hubnav button.on { background:var(--mk-sel); color:var(--mk-sel-ink); box-shadow:inset 0 0 0 1px var(--mk-sel-ring); box-shadow:none; }
html :is(#ayah-pop, .mz-und-host) .hw .hubnav .ic { width:19px; height:19px; }
html #ayah-pop .al-pane.hm-dr .hw .ph .wic { background:var(--mk-dr-on); color:var(--mk-dr-on-ink); }
html #ayah-pop .al-pane.hm-st .hw .ph .wic { background:var(--mk-st-on); color:var(--mk-st-on-ink); }
html #ayah-pop .al-pane.hm-dr .hw .ph h2 { color:var(--mk-dr); }
html #ayah-pop .al-pane.hm-st .hw .ph h2 { color:var(--mk-st); }
html #ayah-pop .al-pane.hm-st .hw .hubnav button.on { background:var(--mk-st-on); color:var(--mk-st-on-ink); }
html #ayah-pop .al-pane.hm-dr .hw .modes button.on, html #ayah-pop .al-pane.hm-dr .hw .quick button.on, html #ayah-pop .al-pane.hm-dr .hw .seg button.on { background:var(--mk-dr-on); color:var(--mk-dr-on-ink); }
html #ayah-pop .al-pane.hm-dr .hw .go-big { background:var(--mk-dr-on); color:var(--mk-dr-on-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .wseg { display:flex; }
html :is(#ayah-pop, .mz-und-host) .hw .wseg button { flex:1; }
html :is(#ayah-pop, .mz-und-host) .hw .times { display:flex; align-items:center; justify-content:center; gap:calc(18px * var(--k-density)); padding:calc(6px * var(--k-density)) 0; }
html :is(#ayah-pop, .mz-und-host) .hw .times .step { width:52px; height:52px; border-radius:50%; background:var(--mk-fill); font:500 calc(28px * var(--k-type))/1 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .times .tn { min-width:110px; text-align:center; font:700 calc(44px * var(--k-type))/1 var(--mk-ui); font-variant-numeric:tabular-nums; display:grid; gap:calc(4px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .times .tn small { font:500 calc(14px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .quick { display:flex; gap:calc(6px * var(--k-density)); justify-content:center; flex-wrap:wrap; }
html :is(#ayah-pop, .mz-und-host) .hw .quick button { min-height:calc(40px * var(--k-density)); min-width:54px; padding:0 calc(12px * var(--k-density)); border-radius:var(--mk-r999); background:var(--mk-fill); font:600 calc(15px * var(--k-type))/1 var(--mk-ui); font-variant-numeric:tabular-nums; }
html :is(#ayah-pop, .mz-und-host) .hw .quick button.on { background:var(--mk-sel); color:var(--mk-sel-ink); box-shadow:inset 0 0 0 1px var(--mk-sel-ring); }
html :is(#ayah-pop, .mz-und-host) .hw .wprog { display:flex; align-items:center; justify-content:space-between; gap:calc(12px * var(--k-density)); margin-bottom:calc(8px * var(--k-density)); flex-wrap:wrap; }
html :is(#ayah-pop, .mz-und-host) .hw .wprog b { font:700 calc(17px * var(--k-type))/1 var(--mk-ui); font-variant-numeric:tabular-nums; }
html :is(#ayah-pop, .mz-und-host) .hw .wdots { display:flex; gap:calc(5px * var(--k-density)); flex-wrap:wrap; max-width:60%; justify-content:flex-end; }
html :is(#ayah-pop, .mz-und-host) .hw .wdots i { width:10px; height:10px; border-radius:50%; background:var(--mk-fill2); }
html :is(#ayah-pop, .mz-und-host) .hw .wdots i.d { background:var(--mk-acc); }
html :is(#ayah-pop, .mz-und-host) .hw .wdots i.c { background:transparent; box-shadow:inset 0 0 0 2px var(--mk-acc); }
html :is(#ayah-pop, .mz-und-host) .hw .wref { font:calc(24px * var(--k-type))/2 var(--mk-q); direction:rtl; text-align:right; padding:calc(8px * var(--k-density)) calc(12px * var(--k-density)); border-radius:var(--mk-r14); background:var(--mk-card); box-shadow:0 0 0 .5px var(--mk-line); margin-bottom:calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .pad-wrap { border-radius:var(--mk-r18); overflow:hidden; box-shadow:0 0 0 .5px var(--mk-line), 0 10px 24px -16px rgba(27,24,18,.4); margin-bottom:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .pad { position:relative; height:300px; background-color:var(--mk-card); background-image:repeating-linear-gradient(to bottom, transparent 0 59px, var(--mk-line) 59px 60px); touch-action:none; }
html :is(#ayah-pop, .mz-und-host) .hw .pad canvas { position:absolute; inset:0; width:100%; height:100%; }
html :is(#ayah-pop, .mz-und-host) .hw .pad .ghost { position:absolute; inset:0; padding:calc(6px * var(--k-density)) calc(16px * var(--k-density)); font:calc(30px * var(--k-type))/calc(60px * var(--k-type)) var(--mk-q); direction:rtl; text-align:right; color:var(--mk-ink); opacity:0; transition:opacity .15s; pointer-events:none; }
html :is(#ayah-pop, .mz-und-host) .hw .pad.tr .ghost { opacity:.16; }
html :is(#ayah-pop, .mz-und-host) .hw .pad.peek .ghost { opacity:.55; }
html :is(#ayah-pop, .mz-und-host) .hw .pad .hint { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font:600 calc(15px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); pointer-events:none; transition:opacity .2s; }
html :is(#ayah-pop, .mz-und-host) .hw .pad.tr .hint, html :is(#ayah-pop, .mz-und-host) .hw .pad.inked .hint { opacity:0; }
html :is(#ayah-pop, .mz-und-host) .hw .wbtns { display:flex; gap:calc(8px * var(--k-density)); align-items:stretch; }
html :is(#ayah-pop, .mz-und-host) .hw .wbtns .pbtn { min-height:calc(52px * var(--k-density)); padding:0 calc(16px * var(--k-density)); border-radius:var(--mk-r16); font-size:calc(15px * var(--k-type)); }
html :is(#ayah-pop, .mz-und-host) .hw .wbtns .go-big { flex:1; }
html :is(#ayah-pop, .mz-und-host) .hw .go-big:disabled { opacity:.4; }
html :is(#ayah-pop, .mz-und-host) .hw .wdone { display:grid; gap:calc(12px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .wdone .big { display:flex; align-items:center; gap:calc(12px * var(--k-density)); padding:calc(12px * var(--k-density)); border-radius:var(--mk-r18); background:var(--mk-acc-soft); }
html :is(#ayah-pop, .mz-und-host) .hw .wdone .big b { display:block; font:700 calc(18px * var(--k-type))/1.2 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .wdone .big span { font:500 calc(14px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .thumbs { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .thumbs figure { margin:0; position:relative; border-radius:var(--mk-r12); overflow:hidden; box-shadow:0 0 0 .5px var(--mk-line); }
html :is(#ayah-pop, .mz-und-host) .hw .thumbs img { display:block; width:100%; aspect-ratio:2.2; object-fit:cover; }
html :is(#ayah-pop, .mz-und-host) .hw .thumbs figcaption { position:absolute; left:6px; top:6px; min-width:24px; height:24px; border-radius:var(--mk-r999); background:var(--mk-sel); color:var(--mk-sel-ink); box-shadow:inset 0 0 0 1px var(--mk-sel-ring); font:700 calc(12.5px * var(--k-type))/calc(24px * var(--k-type)) var(--mk-ui); text-align:center; padding:0 calc(6px * var(--k-density)); }
@media (max-width:480px) {
  html :is(#ayah-pop, .mz-und-host) .hw .pad { height:240px; }
  html :is(#ayah-pop, .mz-und-host) .hw .hubnav button { flex-direction:column; gap:calc(4px * var(--k-density)); font-size:calc(13.5px * var(--k-type)); min-height:calc(60px * var(--k-density)); }
}
@keyframes mk-vin { from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
html :is(#ayah-pop, .mz-und-host) .hw .sec { display:grid; gap:calc(8px * var(--k-density)); padding:calc(12px * var(--k-density)); border-radius:var(--mk-r18); background:var(--mk-card); box-shadow:0 0 0 .5px var(--mk-line); margin-bottom:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .sec > .hd { display:flex; align-items:baseline; justify-content:space-between; gap:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .sec > .hd b { font:700 calc(15px * var(--k-type))/1.2 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .sec > .hd span { font:500 calc(13.5px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .marks { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .marks button { display:flex; align-items:center; gap:calc(8px * var(--k-density)); min-height:calc(46px * var(--k-density)); padding:0 calc(10px * var(--k-density)); border-radius:var(--mk-r14); background:var(--mk-fill); font:600 calc(14.5px * var(--k-type))/1.1 var(--mk-ui); text-align:left; }
html :is(#ayah-pop, .mz-und-host) .hw .marks button.on { background:var(--mk-sel); color:var(--mk-sel-ink); box-shadow:inset 0 0 0 1px var(--mk-sel-ring); }
html :is(#ayah-pop, .mz-und-host) .hw .dot { width:14px; height:14px; border-radius:50%; flex:none; }
html :is(#ayah-pop, .mz-und-host) .hw .colors { display:flex; flex-wrap:wrap; gap:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .colors button { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 .5px var(--mk-line); }
html :is(#ayah-pop, .mz-und-host) .hw .colors button.on { box-shadow:0 0 0 3px var(--mk-page), 0 0 0 5px var(--mk-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .colors .none { background:var(--mk-fill); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .pair { display:grid; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .pair .ln { display:grid; grid-template-columns:auto minmax(0,1fr); gap:calc(10px * var(--k-density)); align-items:center; padding:calc(6px * var(--k-density)) calc(10px * var(--k-density)); border-radius:var(--mk-r12); background:var(--mk-fill); }
html :is(#ayah-pop, .mz-und-host) .hw .pair .ln.me { background:var(--mk-gold-soft); }
html :is(#ayah-pop, .mz-und-host) .hw .pair .rf { font:700 calc(13.5px * var(--k-type))/1 var(--mk-ui); white-space:nowrap; }
html :is(#ayah-pop, .mz-und-host) .hw .pair .tx { font:calc(21px * var(--k-type))/1.9 var(--mk-q); direction:rtl; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html :is(#ayah-pop, .mz-und-host) .hw .sh { color:var(--mk-gold); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px; }
html :is(#ayah-pop, .mz-und-host) .hw .dabit { font:500 calc(15px * var(--k-type))/1.5 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .dabit-ar { font:calc(20px * var(--k-type))/1.9 var(--mk-q); direction:rtl; text-align:right; color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .src { font:500 calc(13px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .pbtn { justify-self:start; min-height:calc(40px * var(--k-density)); padding:0 calc(14px * var(--k-density)); border-radius:var(--mk-r12); background:var(--mk-fill); font:600 calc(14px * var(--k-type))/1 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .pbtn.on { background:var(--mk-acc); color:var(--mk-acc-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .sugg { display:grid; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .mine { display:grid; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .mine .row { display:grid; grid-template-columns:14px minmax(0,1fr) auto; gap:calc(10px * var(--k-density)); align-items:center; padding:calc(8px * var(--k-density)) calc(10px * var(--k-density)); border-radius:var(--mk-r12); background:var(--mk-fill); }
html :is(#ayah-pop, .mz-und-host) .hw .mine .row .refs { font:700 calc(13.5px * var(--k-type))/1.2 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .mine .row .k { font:500 calc(13px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); white-space:nowrap; }
html :is(#ayah-pop, .mz-und-host) .hw .mine .row .tx { grid-column:2 / 4; font:calc(19px * var(--k-type))/1.8 var(--mk-q); direction:rtl; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .mine .sgrp { display:flex; align-items:center; gap:calc(10px * var(--k-density)); padding:calc(10px * var(--k-density)) calc(2px * var(--k-density)) calc(2px * var(--k-density)); position:sticky; top:0; }
html :is(#ayah-pop, .mz-und-host) .hw .mine .sgrp .snum { min-width:30px; height:30px; border-radius:var(--mk-r9); background:var(--mk-sel); color:var(--mk-sel-ink); box-shadow:inset 0 0 0 1px var(--mk-sel-ring); display:grid; place-items:center; font:700 calc(13.5px * var(--k-type))/1 var(--mk-ui); font-variant-numeric:tabular-nums; }
html :is(#ayah-pop, .mz-und-host) .hw .mine .sgrp b { font:700 calc(16px * var(--k-type))/1.2 var(--mk-ui); flex:1; }
html :is(#ayah-pop, .mz-und-host) .hw .mine .sgrp > span:last-child { font:600 calc(13.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .mine .row.new { animation:mk-flash 1.2s ease; }
@keyframes mk-flash { 0%{ background:var(--mk-gold-soft); } 100%{ background:var(--mk-fill); } }
html :is(#ayah-pop, .mz-und-host) .hw .modes { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .modes button { min-height:calc(78px * var(--k-density)); border-radius:var(--mk-r16); background:var(--mk-fill); display:grid; justify-items:center; align-content:center; gap:calc(6px * var(--k-density)); font:600 calc(14.5px * var(--k-type))/1.1 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .modes button.on { background:var(--mk-sel); color:var(--mk-sel-ink); box-shadow:inset 0 0 0 1px var(--mk-sel-ring); }
html :is(#ayah-pop, .mz-und-host) .hw .far { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .far.f3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
html :is(#ayah-pop, .mz-und-host) .hw .far button { min-height:calc(48px * var(--k-density)); border-radius:var(--mk-r13); background:var(--mk-fill); font:600 calc(14.5px * var(--k-type))/1.15 var(--mk-ui); display:grid; align-content:center; justify-items:center; gap:calc(2px * var(--k-density)); padding:calc(4px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .far button small { font:500 calc(12.5px * var(--k-type))/1 var(--mk-ui); opacity:.75; }
html :is(#ayah-pop, .mz-und-host) .hw .far button.on { background:var(--mk-dr-on); color:var(--mk-dr-on-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .own { display:flex; flex-wrap:wrap; align-items:center; gap:calc(8px * var(--k-density)) calc(10px * var(--k-density)); font:500 calc(15px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .own .og { display:inline-flex; align-items:center; gap:calc(8px * var(--k-density)); white-space:nowrap; }
html :is(#ayah-pop, .mz-und-host) .hw .stp { display:inline-flex; align-items:center; gap:calc(4px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .stp button { width:44px; height:44px; border-radius:var(--mk-r12); background:var(--mk-fill); font:500 calc(22px * var(--k-type))/1 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .stp b { min-width:44px; text-align:center; font:700 calc(18px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink); font-variant-numeric:tabular-nums; }
html :is(#ayah-pop, .mz-und-host) .hw .stp i { font-style:normal; font-size:calc(14px * var(--k-type)); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .sw { width:52px; height:32px; border-radius:var(--mk-r999); background:var(--mk-fill2); position:relative; transition:background .2s; }
html :is(#ayah-pop, .mz-und-host) .hw .sw i { position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:var(--mk-card); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
html :is(#ayah-pop, .mz-und-host) .hw .sw.on { background:var(--mk-dr-on); }
html :is(#ayah-pop, .mz-und-host) .hw .sw.on i { transform:translateX(20px); }
html :is(#ayah-pop, .mz-und-host) .hw .cont { display:flex; align-items:center; gap:calc(10px * var(--k-density)); padding:calc(10px * var(--k-density)) calc(10px * var(--k-density)) calc(10px * var(--k-density)) calc(12px * var(--k-density)); border-radius:var(--mk-r18); background:var(--mk-card); box-shadow:0 0 0 .5px var(--mk-dr-line); margin-bottom:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .cont .cic { width:40px; height:40px; border-radius:var(--mk-r12); display:grid; place-items:center; background:var(--mk-dr-soft); color:var(--mk-dr); flex:none; }
html :is(#ayah-pop, .mz-und-host) .hw .cont .cgo { flex:1; min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:calc(4px * var(--k-density)) calc(10px * var(--k-density)); align-items:center; text-align:left; }
html :is(#ayah-pop, .mz-und-host) .hw .cont .cgo .cic { grid-row:1 / 3; }
html :is(#ayah-pop, .mz-und-host) .hw .cont .ctx b { display:block; font:700 calc(15px * var(--k-type))/1.2 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .cont .ctx span { font:500 calc(13.5px * var(--k-type))/1.3 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .cont .cbar { grid-column:2; height:5px; border-radius:var(--mk-r99); background:var(--mk-fill2); overflow:hidden; }
html :is(#ayah-pop, .mz-und-host) .hw .cont .cbar i { display:block; height:100%; background:var(--mk-dr); border-radius:inherit; }
html :is(#ayah-pop, .mz-und-host) .hw .cont .cx { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--mk-mut); flex:none; }
html :is(#ayah-pop, .mz-und-host) .hw .cont .cx .ic { width:18px; height:18px; }
html :is(#ayah-pop, .mz-und-host) .hw .pvs { display:grid; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .pstep { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:calc(10px * var(--k-density)); padding:calc(4px * var(--k-density)) calc(10px * var(--k-density)); border-radius:var(--mk-r12); background:var(--mk-fill); }
html :is(#ayah-pop, .mz-und-host) .hw .pstep .pn { font:600 calc(13px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); white-space:nowrap; }
html :is(#ayah-pop, .mz-und-host) .hw .pstep .pws { font:calc(21px * var(--k-type))/1.9 var(--mk-q); direction:rtl; text-align:right; color:var(--mk-dr); }
html :is(#ayah-pop, .mz-und-host) .hw .wiz { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:calc(6px * var(--k-density)); margin-bottom:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .wiz button { display:flex; align-items:center; gap:calc(8px * var(--k-density)); min-height:calc(44px * var(--k-density)); padding:0 calc(10px * var(--k-density)); border-radius:var(--mk-r14); background:var(--mk-card); box-shadow:0 0 0 .5px var(--mk-line); font:600 calc(14px * var(--k-type))/1.1 var(--mk-ui); color:var(--mk-mut); text-align:left; }
html :is(#ayah-pop, .mz-und-host) .hw .wiz button i { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font:700 calc(12.5px * var(--k-type))/1 var(--mk-ui); font-style:normal; background:var(--mk-fill); flex:none; }
html :is(#ayah-pop, .mz-und-host) .hw .wiz button.cur { color:var(--mk-ink); box-shadow:0 0 0 1.5px var(--mk-dr); }
html :is(#ayah-pop, .mz-und-host) .hw .wiz button.cur i { background:var(--mk-dr-on); color:var(--mk-dr-on-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .wiz button.done { color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .wiz button.done i { background:var(--mk-dr-soft); color:var(--mk-dr); }
html :is(#ayah-pop, .mz-und-host) .hw .wiz button:disabled { opacity:.6; cursor:default; }
html :is(#ayah-pop, .mz-und-host) .hw .brow { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .brow > span { font:600 calc(14.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .tl { display:flex; align-items:stretch; gap:calc(4px * var(--k-density)); height:34px; margin-top:calc(4px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .tl .blk { border-radius:var(--mk-r9); background:var(--mk-dr-soft); box-shadow:inset 0 0 0 1px var(--mk-dr-line); display:grid; place-items:center; min-width:26px; }
html :is(#ayah-pop, .mz-und-host) .hw .tl .blk em { font:700 calc(12.5px * var(--k-type))/1 var(--mk-ui); font-style:normal; color:var(--mk-dr); }
html :is(#ayah-pop, .mz-und-host) .hw .tl .rest { flex:none; display:grid; place-items:center; padding:0 calc(4px * var(--k-density)); font:600 calc(11.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); border-left:2px dotted var(--mk-fill2); border-right:2px dotted var(--mk-fill2); }
html :is(#ayah-pop, .mz-und-host) .hw .sumcard { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:calc(1px * var(--k-density)); border-radius:var(--mk-r16); overflow:hidden; background:var(--mk-line); margin-bottom:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .sumcard div { background:var(--mk-card); padding:calc(10px * var(--k-density)) calc(12px * var(--k-density)); display:grid; gap:calc(4px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .sumcard span { font:600 calc(12.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .sumcard b { font:700 calc(14.5px * var(--k-type))/1.25 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .wnav { display:flex; gap:calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .wnav .pbtn { min-height:calc(52px * var(--k-density)); padding:0 calc(18px * var(--k-density)); border-radius:var(--mk-r16); font-size:calc(15px * var(--k-type)); }
html :is(#ayah-pop, .mz-und-host) .hw .wnav .go-big { flex:1; }
@media (max-width:480px) {
  html :is(#ayah-pop, .mz-und-host) .hw .wiz button span { font-size:calc(12.5px * var(--k-type)); }
  html :is(#ayah-pop, .mz-und-host) .hw .sumcard { grid-template-columns:1fr; }
}
html :is(#ayah-pop, .mz-und-host) .hw .far.fx { grid-template-columns:repeat(auto-fit, minmax(92px, 1fr)); }
html :is(#ayah-pop, .mz-und-host) .hw .pick { display:grid; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .prow { display:grid; grid-template-columns:72px minmax(0,1fr) 76px; gap:calc(6px * var(--k-density)); align-items:center; }
html :is(#ayah-pop, .mz-und-host) .hw .prow .pl { display:flex; align-items:center; gap:calc(6px * var(--k-density)); font:600 calc(14.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .prow .pl .ic { width:18px; height:18px; color:var(--mk-dr); }
html :is(#ayah-pop, .mz-und-host) .hw .msel { min-height:calc(44px * var(--k-density)); width:100%; min-width:0; padding:0 calc(10px * var(--k-density)); border-radius:var(--mk-r12); border:0; background:var(--mk-fill); color:var(--mk-ink); font:600 calc(15px * var(--k-type))/1 var(--mk-ui); -webkit-appearance:none; appearance:none; }
html :is(#ayah-pop, .mz-und-host) .hw .msel.ay { text-align:center; font-variant-numeric:tabular-nums; }
html :is(#ayah-pop, .mz-und-host) .hw .dmref { font:600 calc(13.5px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-mut); text-align:center; margin-top:calc(4px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .dmv { padding:calc(10px * var(--k-density)) calc(14px * var(--k-density)) calc(12px * var(--k-density)); border-radius:var(--mk-r16); background:var(--mk-card); box-shadow:inset 0 0 0 1px var(--mk-dr-line); }
html :is(#ayah-pop, .mz-und-host) .hw .dm-a { font:calc(22px * var(--k-type))/2 var(--mk-q); direction:rtl; text-align:right; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html :is(#ayah-pop, .mz-und-host) .hw .dm-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:calc(10px * var(--k-density)); align-items:center; }
html :is(#ayah-pop, .mz-und-host) .hw .dm-k { order:2; font:700 calc(12.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-gold); padding:calc(5px * var(--k-density)) calc(7px * var(--k-density)); border-radius:var(--mk-r8); background:var(--mk-gold-soft); font-variant-numeric:tabular-nums; }
html :is(#ayah-pop, .mz-und-host) .hw .dm-orn { display:flex; align-items:center; justify-content:center; gap:calc(10px * var(--k-density)); margin:calc(4px * var(--k-density)) 0 calc(2px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .dm-orn i { flex:1; max-width:110px; height:1px; background:color-mix(in srgb, var(--mk-gold) 40%, transparent); }
html :is(#ayah-pop, .mz-und-host) .hw .dm-orn b { color:var(--mk-gold); font-size:calc(13px * var(--k-type)); }
html :is(#ayah-pop, .mz-und-host) .hw .dm-orn b.dots { font-size:calc(12px * var(--k-type)); letter-spacing:.1em; }
html :is(#ayah-pop, .mz-und-host) .hw .dm-meta { text-align:center; font:600 calc(13px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); margin-bottom:calc(4px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .dm-meta b { color:var(--mk-gold); }
html :is(#ayah-pop, .mz-und-host) .hw .quick.qt { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); }
html :is(#ayah-pop, .mz-und-host) .hw .quick.qt button { min-height:calc(52px * var(--k-density)); display:grid; align-content:center; justify-items:center; gap:calc(3px * var(--k-density)); padding:calc(4px * var(--k-density)) calc(10px * var(--k-density)); border-radius:var(--mk-r14); min-width:0; padding-left:calc(2px * var(--k-density)); padding-right:calc(2px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .quick.qt button small { font:500 calc(12px * var(--k-type))/1 var(--mk-ui); opacity:.75; }
html :is(#ayah-pop, .mz-und-host) .hw .rl { display:grid; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .rl.cfg { margin-top:calc(4px * var(--k-density)); padding-top:calc(8px * var(--k-density)); border-top:1px solid var(--mk-line); }
html :is(#ayah-pop, .mz-und-host) .hw .rrow { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:calc(10px * var(--k-density)); align-items:center; min-height:calc(56px * var(--k-density)); padding:calc(6px * var(--k-density)) calc(10px * var(--k-density)); border-radius:var(--mk-r14); background:var(--mk-fill); text-align:left; width:100%; }
html :is(#ayah-pop, .mz-und-host) .hw .rrow.st { background:transparent; padding:calc(2px * var(--k-density)) 0; }
html :is(#ayah-pop, .mz-und-host) .hw .rrow .ri { width:40px; height:40px; border-radius:var(--mk-r12); display:grid; place-items:center; background:var(--mk-card); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .rrow.st .ri { background:var(--mk-fill); }
html :is(#ayah-pop, .mz-und-host) .hw .rrow .rt b { display:block; font:700 calc(15px * var(--k-type))/1.2 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .rrow .rt span { font:500 calc(13.5px * var(--k-type))/1.3 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .rrow .rad { width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--mk-fill2); }
html :is(#ayah-pop, .mz-und-host) .hw .rrow.on { background:var(--mk-dr-soft); box-shadow:inset 0 0 0 1px var(--mk-dr-line); }
html :is(#ayah-pop, .mz-und-host) .hw .rrow.on .ri { color:var(--mk-dr); }
html :is(#ayah-pop, .mz-und-host) .hw .rrow.on .rad { box-shadow:inset 0 0 0 7px var(--mk-dr-on); }
html :is(#ayah-pop, .mz-und-host) .hw .pl { display:grid; border-radius:var(--mk-r14); overflow:hidden; box-shadow:0 0 0 .5px var(--mk-line); }
html :is(#ayah-pop, .mz-und-host) .hw .pl-row { display:flex; align-items:center; justify-content:space-between; gap:calc(10px * var(--k-density)); min-height:calc(40px * var(--k-density)); padding:0 calc(12px * var(--k-density)); font:600 calc(14.5px * var(--k-type))/1.2 var(--mk-ui); background:var(--mk-card); border-top:1px solid var(--mk-line); }
html :is(#ayah-pop, .mz-und-host) .hw .pl-row:first-child { border-top:0; }
html :is(#ayah-pop, .mz-und-host) .hw .pl-row b { font:700 calc(14.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-dr); font-variant-numeric:tabular-nums; }
html :is(#ayah-pop, .mz-und-host) .hw .pl-row.brk { min-height:calc(32px * var(--k-density)); background:var(--mk-fill); color:var(--mk-mut); font-weight:500; font-size:calc(13.5px * var(--k-type)); }
html :is(#ayah-pop, .mz-und-host) .hw .pl-row.brk span { display:flex; align-items:center; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .pl-row.brk .ic { width:15px; height:15px; }
html :is(#ayah-pop, .mz-und-host) .hw .pl-row.fold { color:var(--mk-mut); justify-content:center; font-weight:500; }
html :is(#ayah-pop, .mz-und-host) .hw .wiz.w4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
html :is(#ayah-pop, .mz-und-host) .hw .wiz.w4 button { padding:0 calc(8px * var(--k-density)); gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .bigin { display:grid; justify-items:center; gap:calc(2px * var(--k-density)); padding:calc(6px * var(--k-density)) 0 calc(2px * var(--k-density)); cursor:text; }
html :is(#ayah-pop, .mz-und-host) .hw .bigin input { width:5.2ch; border:0; background:transparent; text-align:center; font:700 calc(56px * var(--k-type))/1.05 var(--mk-ui); color:var(--mk-ink); font-variant-numeric:tabular-nums; border-bottom:2px dashed var(--mk-fill2); border-radius:0; padding:0; caret-color:var(--mk-dr); }
html :is(#ayah-pop, .mz-und-host) .hw .bigin input:focus { outline:none; border-bottom-color:var(--mk-dr); }
html :is(#ayah-pop, .mz-und-host) .hw .bigin span { font:500 calc(13.5px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .presets { display:flex; justify-content:center; gap:calc(6px * var(--k-density)); flex-wrap:wrap; }
html :is(#ayah-pop, .mz-und-host) .hw .presets button { min-height:calc(40px * var(--k-density)); min-width:54px; padding:0 calc(10px * var(--k-density)); border-radius:var(--mk-r999); background:transparent; box-shadow:inset 0 0 0 1px var(--mk-line); font:600 calc(15px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink2); font-variant-numeric:tabular-nums; }
html :is(#ayah-pop, .mz-und-host) .hw .presets button.on { background:var(--mk-dr-soft); color:var(--mk-dr); box-shadow:inset 0 0 0 1.5px var(--mk-dr); }
html :is(#ayah-pop, .mz-und-host) .hw .tread { display:grid; justify-items:center; gap:calc(2px * var(--k-density)); padding:calc(10px * var(--k-density)); border-radius:var(--mk-r14); background:var(--mk-dr-soft); margin-top:calc(4px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .tread b { font:700 calc(19px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-dr); }
html :is(#ayah-pop, .mz-und-host) .hw .tread span { font:500 calc(13.5px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .tread.pop { animation:mk-tpop .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes mk-tpop { 0%{ transform:scale(.96); opacity:.4; } 100%{ transform:none; opacity:1; } }
html :is(#ayah-pop, .mz-und-host) .hw .lnk { justify-self:center; min-height:calc(36px * var(--k-density)); padding:0 calc(8px * var(--k-density)); font:600 calc(13.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-dr); background:none; }
html :is(#ayah-pop, .mz-und-host) .hw .pedit { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .pedit input { min-height:calc(44px * var(--k-density)); min-width:0; border:0; border-radius:var(--mk-r12); background:var(--mk-fill); text-align:center; font:600 calc(15px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .plan { display:grid; gap:calc(1px * var(--k-density)); border-radius:var(--mk-r18); overflow:hidden; background:var(--mk-line); box-shadow:0 0 0 .5px var(--mk-line); margin-bottom:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .plan > div { background:var(--mk-card); }
html :is(#ayah-pop, .mz-und-host) .hw .ptop { display:grid; gap:calc(4px * var(--k-density)); padding:calc(16px * var(--k-density)); text-align:center; background:var(--mk-dr-soft) !important; }
html :is(#ayah-pop, .mz-und-host) .hw .ptop span { font:600 calc(12.5px * var(--k-type))/1 var(--mk-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--mk-dr); }
html :is(#ayah-pop, .mz-und-host) .hw .ptop b { font:700 calc(30px * var(--k-type))/1.1 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .ptop small { font:500 calc(14px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .prow2 { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:calc(10px * var(--k-density)); align-items:center; padding:calc(10px * var(--k-density)) calc(12px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .prow2 .ri { width:40px; height:40px; border-radius:var(--mk-r12); display:grid; place-items:center; background:var(--mk-fill); color:var(--mk-dr); }
html :is(#ayah-pop, .mz-und-host) .hw .prow2 b { display:block; font:700 calc(15px * var(--k-type))/1.25 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .prow2 span:not(.ri) { font:500 calc(13.5px * var(--k-type))/1.3 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .pdia { padding:calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .go-big:disabled { opacity:.4; }
html :is(#ayah-pop, .mz-und-host) .hw .ink { display:flex; flex-wrap:wrap; direction:rtl; gap:calc(4px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .ink button { font:calc(22px * var(--k-type))/1.75 var(--mk-q); padding:0 calc(7px * var(--k-density)); min-height:calc(44px * var(--k-density)); border-radius:var(--mk-r10); }
html :is(#ayah-pop, .mz-und-host) .hw .ink button.on { background:var(--mk-gold-soft); box-shadow:inset 0 -3px 0 var(--mk-gold); }
html :is(#ayah-pop, .mz-und-host) .hw .hint { font:500 calc(14px * var(--k-type))/1.4 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .sec.fu { box-shadow:0 0 0 1.5px var(--mk-st-line); }
html :is(#ayah-pop, .mz-und-host) .hw .hd.sm span { font:600 calc(13.5px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .tin { min-height:calc(46px * var(--k-density)); width:100%; border:0; border-radius:var(--mk-r12); background:var(--mk-fill); padding:0 calc(12px * var(--k-density)); font:500 calc(15.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .tin.ar { font:calc(22px * var(--k-type))/1 var(--mk-q); }
html :is(#ayah-pop, .mz-und-host) .hw .tin:focus { outline:2px solid var(--mk-st); outline-offset:0; }
html :is(#ayah-pop, .mz-und-host) .hw .cands { display:grid; gap:calc(6px * var(--k-density)); max-height:380px; overflow:auto; }
html :is(#ayah-pop, .mz-und-host) .hw .cand { display:grid; grid-template-columns:22px minmax(0,1fr); gap:calc(10px * var(--k-density)); align-items:start; text-align:left; padding:calc(10px * var(--k-density)); border-radius:var(--mk-r14); background:var(--mk-fill); width:100%; }
html :is(#ayah-pop, .mz-und-host) .hw .cand .rad { width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--mk-fill2); margin-top:calc(2px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .cand.on { background:color-mix(in srgb, var(--mk-mixed) 12%, var(--mk-card)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mk-mixed) 40%, transparent); }
html :is(#ayah-pop, .mz-und-host) .hw .cand.on .rad { box-shadow:inset 0 0 0 7px var(--mk-mixed); }
html :is(#ayah-pop, .mz-und-host) .hw .cand .cm { display:grid; gap:calc(2px * var(--k-density)); min-width:0; }
html :is(#ayah-pop, .mz-und-host) .hw .cand .cm b { font:700 calc(14.5px * var(--k-type))/1.2 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .cand .cm i { font:500 calc(13px * var(--k-type))/1.2 var(--mk-ui); font-style:normal; color:var(--mk-st); }
html :is(#ayah-pop, .mz-und-host) .hw .cand .ar1 { font:calc(20px * var(--k-type))/1.8 var(--mk-q); direction:rtl; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .partner { display:grid; gap:calc(4px * var(--k-density)); padding:calc(10px * var(--k-density)) calc(12px * var(--k-density)); border-radius:var(--mk-r14); background:color-mix(in srgb, var(--mk-mixed) 10%, var(--mk-card)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mk-mixed) 35%, transparent); }
html :is(#ayah-pop, .mz-und-host) .hw .partner .phd { display:flex; align-items:center; gap:calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .partner .phd b { font:700 calc(15px * var(--k-type))/1.2 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .partner .phd span { font:500 calc(13.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); flex:1; }
html :is(#ayah-pop, .mz-und-host) .hw .partner .px { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .partner .px .ic { width:17px; height:17px; }
html :is(#ayah-pop, .mz-und-host) .hw .partner .ar2 { font:calc(21px * var(--k-type))/1.9 var(--mk-q); direction:rtl; text-align:right; }
html :is(#ayah-pop, .mz-und-host) .hw .forms { display:flex; flex-wrap:wrap; direction:rtl; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .forms button { display:grid; justify-items:center; gap:0; padding:calc(4px * var(--k-density)) calc(12px * var(--k-density)) calc(6px * var(--k-density)); min-height:calc(56px * var(--k-density)); border-radius:var(--mk-r14); background:var(--mk-fill); }
html :is(#ayah-pop, .mz-und-host) .hw .forms button { padding-bottom:calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .forms button .w { font:calc(22px * var(--k-type))/2 var(--mk-q); }
html :is(#ayah-pop, .mz-und-host) .hw .forms button .s { font:600 calc(11.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); direction:ltr; margin-top:calc(2px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .arw { font:calc(19px * var(--k-type))/1 var(--mk-q); color:var(--mk-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .forms button.on { background:var(--mk-st-on); color:var(--mk-st-on-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .forms button.on .s { color:inherit; opacity:.8; }
html :is(#ayah-pop, .mz-und-host) .hw .pbtn.ask { display:inline-flex; align-items:center; gap:calc(8px * var(--k-density)); justify-self:start; }
html :is(#ayah-pop, .mz-und-host) .hw .pbtn.ask .ic { width:17px; height:17px; }
html :is(#ayah-pop, .mz-und-host) .hw .presets.l { justify-content:flex-start; }
html :is(#ayah-pop, .mz-und-host) .hw .stat { display:grid; grid-template-columns:40px minmax(0,1fr); gap:calc(10px * var(--k-density)); align-items:center; }
html :is(#ayah-pop, .mz-und-host) .hw .stat .ri { width:40px; height:40px; border-radius:var(--mk-r12); display:grid; place-items:center; background:var(--mk-fill); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .stat b { display:block; font:700 calc(15px * var(--k-type))/1.2 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .stat span:not(.ri) { font:500 calc(13.5px * var(--k-type))/1.3 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .rm { display:inline-flex; align-items:center; gap:calc(8px * var(--k-density)); justify-self:start; min-height:calc(44px * var(--k-density)); padding:0 calc(12px * var(--k-density)); border-radius:var(--mk-r12); font:600 calc(14.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mixed); }
html :is(#ayah-pop, .mz-und-host) .hw .rm .ic { width:17px; height:17px; }
html :is(#ayah-pop, .mz-und-host) .hw .ink.gaps { align-items:center; gap:0; row-gap:calc(4px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .ink .gw { font:calc(22px * var(--k-type))/1.75 var(--mk-q); padding:0 calc(2px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .gap { width:22px; min-height:calc(44px * var(--k-density)); display:grid; place-items:center; border-radius:var(--mk-r8); }
html :is(#ayah-pop, .mz-und-host) .hw .gap i { width:2px; height:26px; border-radius:var(--mk-r2); background:var(--mk-fill2); transition:all .15s; }
html :is(#ayah-pop, .mz-und-host) .hw .gap.on i { width:6px; background:var(--mk-hes); }
html :is(#ayah-pop, .mz-und-host) .hw .gap:hover i { background:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .qrow { display:grid; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .ql { font:600 calc(13.5px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .opts { display:flex; flex-wrap:wrap; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .opts button { min-height:calc(44px * var(--k-density)); padding:0 calc(14px * var(--k-density)); border-radius:var(--mk-r12); background:var(--mk-fill); font:600 calc(14.5px * var(--k-type))/1.15 var(--mk-ui); text-align:left; }
html :is(#ayah-pop, .mz-und-host) .hw .opts button.on { background:var(--mk-st-on); color:var(--mk-st-on-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .opts.in { padding:calc(2px * var(--k-density)) 0 calc(4px * var(--k-density)) calc(32px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .lnk.in { display:inline; min-height:0; padding:0; text-decoration:underline; }
html :is(#ayah-pop, .mz-und-host) .hw .forw { display:flex; flex-wrap:wrap; align-items:center; gap:calc(6px * var(--k-density)); direction:rtl; }
html :is(#ayah-pop, .mz-und-host) .hw .forw span { font:600 calc(13.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); direction:ltr; }
html :is(#ayah-pop, .mz-und-host) .hw .forw button { font:calc(21px * var(--k-type))/1.7 var(--mk-q); padding:0 calc(10px * var(--k-density)); min-height:calc(44px * var(--k-density)); border-radius:var(--mk-r10); background:var(--mk-fill); }
html :is(#ayah-pop, .mz-und-host) .hw .forw button.on { background:var(--mk-gold-soft); box-shadow:inset 0 -3px 0 var(--mk-gold); }
html :is(#ayah-pop, .mz-und-host) .hw .rules { display:grid; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .rule { border-radius:var(--mk-r14); background:var(--mk-fill); }
html :is(#ayah-pop, .mz-und-host) .hw .rule.on { background:color-mix(in srgb, var(--mk-tajwid) 12%, var(--mk-card)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mk-tajwid) 40%, transparent); }
html :is(#ayah-pop, .mz-und-host) .hw .rhead { display:grid; grid-template-columns:22px minmax(0,1fr); gap:calc(10px * var(--k-density)); align-items:center; padding:calc(10px * var(--k-density)); width:100%; text-align:left; }
html :is(#ayah-pop, .mz-und-host) .hw .rhead .rad { width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--mk-fill2); }
html :is(#ayah-pop, .mz-und-host) .hw .rule.on .rhead .rad { box-shadow:inset 0 0 0 7px var(--mk-tajwid); }
html :is(#ayah-pop, .mz-und-host) .hw .rhead .rt b { display:block; font:700 calc(15px * var(--k-type))/1.2 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .rhead .rt span { font:500 calc(13.5px * var(--k-type))/1.3 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .rhead .arw { font-size:calc(18px * var(--k-type)); }
html :is(#ayah-pop, .mz-und-host) .hw .sp2 { display:grid; grid-template-columns:1fr 1fr; gap:calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .spb { display:grid; grid-template-columns:40px minmax(0,1fr); gap:calc(10px * var(--k-density)); align-items:center; padding:calc(10px * var(--k-density)); border-radius:var(--mk-r14); background:var(--mk-st-soft); box-shadow:inset 0 0 0 1px var(--mk-st-line); text-align:left; }
html :is(#ayah-pop, .mz-und-host) .hw .spb .ri { width:40px; height:40px; border-radius:var(--mk-r12); display:grid; place-items:center; background:var(--mk-st-on); color:var(--mk-st-on-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .spb b { display:block; font:700 calc(15px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-st); }
html :is(#ayah-pop, .mz-und-host) .hw .spb span span { display:block; margin-top:calc(2px * var(--k-density)); font:500 calc(13px * var(--k-type))/1.25 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .plist { display:grid; gap:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .pit { display:grid; gap:calc(8px * var(--k-density)); padding:calc(12px * var(--k-density)); border-radius:var(--mk-r18); background:var(--mk-card); box-shadow:0 0 0 .5px var(--mk-line); }
html :is(#ayah-pop, .mz-und-host) .hw .pit.focus { box-shadow:0 0 0 2px var(--mk-st); animation:mk-pfocus 1.2s ease; }
@keyframes mk-pfocus { 0%{ transform:scale(.98); } 30%{ transform:scale(1.01); } 100%{ transform:none; } }
html :is(#ayah-pop, .mz-und-host) .hw .pit.fin { opacity:.72; }
html :is(#ayah-pop, .mz-und-host) .hw .phead { display:flex; align-items:center; gap:calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .phead b { font:700 calc(15.5px * var(--k-type))/1.2 var(--mk-ui); flex:1; }
html :is(#ayah-pop, .mz-und-host) .hw .phead .pn { font:600 calc(13px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .phead .popen { flex:none; display:grid; place-items:center; width:calc(44px * var(--k-density)); height:calc(44px * var(--k-density)); margin:calc(-8px * var(--k-density)) calc(-6px * var(--k-density)) calc(-8px * var(--k-density)) 0; border-radius:var(--mk-r12); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .psur { font:var(--fw-bold) var(--fs-call)/1.2 var(--ds-font); color:var(--mk-mut); padding:calc(8px * var(--k-density)) calc(4px * var(--k-density)) 0; }
html :is(#ayah-pop, .mz-und-host) .hw .p1 { font:calc(21px * var(--k-type))/1.95 var(--mk-q); direction:rtl; text-align:right; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
html :is(#ayah-pop, .mz-und-host) .hw .pit .dmv { box-shadow:none; background:var(--mk-fill); padding:calc(6px * var(--k-density)) calc(12px * var(--k-density)) calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .pit .dm-a { font-size:calc(19px * var(--k-type)); -webkit-line-clamp:1; }
html :is(#ayah-pop, .mz-und-host) .hw .pfoot { display:flex; align-items:center; gap:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .preps { flex:1; display:flex; align-items:center; gap:calc(10px * var(--k-density)); text-align:left; min-height:calc(48px * var(--k-density)); border-radius:var(--mk-r12); padding:calc(2px * var(--k-density)) calc(6px * var(--k-density)) calc(2px * var(--k-density)) 0; }
html :is(#ayah-pop, .mz-und-host) .hw .pring { width:40px; height:40px; transform:rotate(-90deg); flex:none; }
html :is(#ayah-pop, .mz-und-host) .hw .pring circle { fill:none; stroke:var(--mk-fill2); stroke-width:4.5; }
html :is(#ayah-pop, .mz-und-host) .hw .pring .pv { stroke:var(--mk-st); stroke-linecap:round; }
html :is(#ayah-pop, .mz-und-host) .hw .pit.fin .pring .pv { stroke:var(--mk-tajwid); }
html :is(#ayah-pop, .mz-und-host) .hw .preps b { display:block; font:700 calc(20px * var(--k-type))/1.1 var(--mk-ui); font-variant-numeric:tabular-nums; }
html :is(#ayah-pop, .mz-und-host) .hw .preps b i { font-style:normal; color:var(--mk-mut); font-weight:500; }
html :is(#ayah-pop, .mz-und-host) .hw .preps small { font:500 calc(13px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .go-sm { display:inline-flex; align-items:center; gap:calc(7px * var(--k-density)); min-height:calc(44px * var(--k-density)); padding:0 calc(16px * var(--k-density)); border-radius:var(--mk-r14); background:var(--mk-st-on); color:var(--mk-st-on-ink); font:700 calc(15px * var(--k-type))/1 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .go-sm .ic { width:18px; height:18px; }
html :is(#ayah-pop, .mz-und-host) .hw .pedit2 { display:grid; gap:calc(8px * var(--k-density)); padding-top:calc(8px * var(--k-density)); border-top:1px solid var(--mk-line); }
html :is(#ayah-pop, .mz-und-host) .hw .bigin.sm input { font-size:calc(40px * var(--k-type)); }
html :is(#ayah-pop, .mz-und-host) .hw .pedrow { display:flex; justify-content:space-between; align-items:center; }
html :is(#ayah-pop, .mz-und-host) .hw .padd { display:flex; align-items:center; justify-content:center; gap:calc(8px * var(--k-density)); width:100%; min-height:calc(50px * var(--k-density)); margin-top:calc(10px * var(--k-density)); border-radius:var(--mk-r16); box-shadow:inset 0 0 0 1.5px var(--mk-st-line); color:var(--mk-st); font:700 calc(15px * var(--k-type))/1 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .fromp { display:flex; align-items:center; gap:calc(8px * var(--k-density)); padding:calc(10px * var(--k-density)) calc(12px * var(--k-density)); border-radius:var(--mk-r14); background:var(--mk-st-soft); color:var(--mk-st); font:600 calc(14px * var(--k-type))/1.3 var(--mk-ui); margin-bottom:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .fromp span { flex:1; }
html :is(#ayah-pop, .mz-und-host) .hw .fromp .ic { width:18px; height:18px; }
html :is(#ayah-pop, .mz-und-host) .hw .fromp .lnk { color:var(--mk-st); }
html :is(#ayah-pop, .mz-und-host) .hw .pnote { font:500 calc(13px * var(--k-type))/1.3 var(--mk-ui); color:var(--mk-mut); margin-top:calc(-2px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .rtap { display:grid; place-items:center; width:min(78%, 260px); aspect-ratio:1; margin:calc(6px * var(--k-density)) auto 0; border-radius:50%; position:relative; }
html :is(#ayah-pop, .mz-und-host) .hw .rtap svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
html :is(#ayah-pop, .mz-und-host) .hw .rtap circle { fill:var(--mk-card); stroke:var(--mk-fill2); stroke-width:9; }
html :is(#ayah-pop, .mz-und-host) .hw .rtap .pv { fill:none; stroke:var(--mk-dr-on); stroke-linecap:round; transition:stroke-dasharray .25s; }
html :is(#ayah-pop, .mz-und-host) .hw .rtap:active { transform:scale(.97); }
html :is(#ayah-pop, .mz-und-host) .hw .rn { position:relative; display:grid; justify-items:center; }
html :is(#ayah-pop, .mz-und-host) .hw .rn b { font:700 calc(64px * var(--k-type))/1 var(--mk-ui); font-variant-numeric:tabular-nums; }
html :is(#ayah-pop, .mz-und-host) .hw .rn i { font:600 calc(16px * var(--k-type))/1.4 var(--mk-ui); font-style:normal; color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .rhint { text-align:center; font:500 calc(13px * var(--k-type))/1.3 var(--mk-ui); color:var(--mk-mut); margin:calc(6px * var(--k-density)) 0 calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .rmeta { display:grid; gap:calc(4px * var(--k-density)); justify-items:center; font:600 calc(14px * var(--k-type))/1.3 var(--mk-ui); color:var(--mk-ink2); margin-bottom:calc(12px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .brkcard { display:grid; gap:calc(6px * var(--k-density)); justify-items:center; padding:calc(20px * var(--k-density)) calc(16px * var(--k-density)); border-radius:var(--mk-r20); background:var(--mk-dr-soft); margin-bottom:calc(12px * var(--k-density)); text-align:center; }
html :is(#ayah-pop, .mz-und-host) .hw .brkcard span { font:700 calc(13px * var(--k-type))/1 var(--mk-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--mk-dr); }
html :is(#ayah-pop, .mz-und-host) .hw .brkcard b { font:700 calc(48px * var(--k-type))/1.1 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .brkcard small { font:500 calc(14px * var(--k-type))/1.3 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .brkcard .go-big { margin-top:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .padds { display:grid; grid-template-columns:1fr 1fr; gap:calc(8px * var(--k-density)); margin-top:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .padds .padd { margin-top:0; }
html :is(#ayah-pop, .mz-und-host) .hw .spb.wide { grid-column:1 / 3; }
html :is(#ayah-pop, .mz-und-host) .hw .twin2 { display:grid; gap:calc(6px * var(--k-density)); }
@media (min-width:600px) {
  html :is(#ayah-pop, .mz-und-host) .hw .twin2 { grid-template-columns:1fr 1fr; }
}
html :is(#ayah-pop, .mz-und-host) .hw .tw { display:grid; gap:calc(2px * var(--k-density)); padding:calc(8px * var(--k-density)) calc(10px * var(--k-density)); border-radius:var(--mk-r12); background:var(--mk-fill); }
html :is(#ayah-pop, .mz-und-host) .hw .tl { font:700 calc(12.5px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .ar3 { font:calc(20px * var(--k-type))/1.9 var(--mk-q); direction:rtl; text-align:right; }
html :is(#ayah-pop, .mz-und-host) .hw .ar3 .ctx { color:var(--mk-mut); opacity:.7; }
html :is(#ayah-pop, .mz-und-host) .hw .pit.pick { box-shadow:0 0 0 2px var(--mk-st); margin-bottom:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .pround { display:flex; align-items:baseline; gap:calc(6px * var(--k-density)); justify-content:center; font:600 calc(15px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink2); margin:calc(2px * var(--k-density)) 0 calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .pround b { font:700 calc(22px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .pround span { margin-left:calc(10px * var(--k-density)); color:var(--mk-mut); font-variant-numeric:tabular-nums; }
html :is(#ayah-pop, .mz-und-host) .hw .pcard { display:grid; gap:calc(4px * var(--k-density)); width:100%; text-align:left; padding:calc(12px * var(--k-density)); border-radius:var(--mk-r18); background:var(--mk-fill); margin-bottom:calc(8px * var(--k-density)); opacity:.55; transition:opacity .2s, box-shadow .2s, transform .2s; }
html :is(#ayah-pop, .mz-und-host) .hw .pcard.now { opacity:1; background:var(--mk-card); box-shadow:0 0 0 2px var(--mk-dr-on), 0 10px 24px -16px rgba(0,0,0,.4); }
html :is(#ayah-pop, .mz-und-host) .hw .pcard.now:active { transform:scale(.99); }
html :is(#ayah-pop, .mz-und-host) .hw .pcard .ar3 { font-size:calc(22px * var(--k-type)); }
html :is(#ayah-pop, .mz-und-host) .hw .pcnt { justify-self:end; font:600 calc(15px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .pcnt b { font:700 calc(34px * var(--k-type))/1 var(--mk-ui); color:var(--mk-dr); }
html #ayah-pop .al-pane.hm-qr .hw .ph .wic { background:var(--mk-qr-on); color:var(--mk-qr-on-ink); }
html #ayah-pop .al-pane.hm-qr .hw .ph h2 { color:var(--mk-qr); }
html #ayah-pop .al-pane.hm-qr .hw .seg button.on, html #ayah-pop .al-pane.hm-qr .hw .far button.on { background:var(--mk-qr-on); color:var(--mk-qr-on-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .aa { margin-left:auto; display:flex; gap:calc(4px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .aa button { width:40px; height:40px; border-radius:var(--mk-r12); background:var(--mk-fill); font:700 calc(14px * var(--k-type))/1 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .aa button + button { font-size:calc(19px * var(--k-type)); }
html :is(#ayah-pop, .mz-und-host) .hw .uayah { padding:calc(10px * var(--k-density)) calc(12px * var(--k-density)) calc(12px * var(--k-density)); border-radius:var(--mk-r18); background:var(--mk-card); box-shadow:0 0 0 .5px var(--mk-line); margin-bottom:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .unav { display:flex; align-items:center; justify-content:space-between; gap:calc(8px * var(--k-density)); margin-bottom:calc(4px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .unav b { font:700 calc(14px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .unav .nb { display:inline-flex; align-items:center; gap:calc(4px * var(--k-density)); min-height:calc(36px * var(--k-density)); padding:0 calc(8px * var(--k-density)); border-radius:var(--mk-r10); font:600 calc(13.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .unav .nb .ic { width:15px; height:15px; }
html :is(#ayah-pop, .mz-und-host) .hw .uar { font:calc(calc(24px * var(--k-type)) * var(--mk-ufs)) / 2 var(--mk-q); direction:rtl; text-align:right; }
html :is(#ayah-pop, .mz-und-host) .hw .uar mark { background:var(--mk-gold-soft); color:inherit; border-radius:var(--mk-r6); padding:0 calc(2px * var(--k-density)); box-shadow:inset 0 -2px 0 var(--mk-gold); }
html :is(#ayah-pop, .mz-und-host) .hw .aen { color:var(--mk-gold); font-size:.85em; }
html :is(#ayah-pop, .mz-und-host) .hw .trs { display:grid; gap:calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .trb { padding:calc(12px * var(--k-density)) calc(14px * var(--k-density)); border-radius:var(--mk-r16); background:var(--mk-card); box-shadow:0 0 0 .5px var(--mk-line); display:grid; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .trt { font:calc(calc(17px * var(--k-type)) * var(--mk-ufs)) / 1.6 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .trt.rtl { direction:rtl; text-align:right; font-family:var(--mk-q); font-size:calc(calc(19px * var(--k-type)) * var(--mk-ufs)); line-height:2; }
html :is(#ayah-pop, .mz-und-host) .hw .trb.tl .trt { font-style:italic; color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .trt i.s, html :is(#ayah-pop, .mz-und-host) .hw .trt .s { color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .trt .sup, html :is(#ayah-pop, .mz-und-host) .hw .trt a.sup { color:var(--mk-mut); font-size:.75em; vertical-align:super; text-decoration:none; }
html :is(#ayah-pop, .mz-und-host) .hw .trn { font:600 calc(13px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .muted { color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .fnb { display:inline-grid; place-items:center; min-width:22px; height:22px; margin:0 calc(2px * var(--k-density)); padding:0 calc(5px * var(--k-density)); border-radius:var(--mk-r99); background:var(--mk-qr-soft); color:var(--mk-qr); font:700 calc(12px * var(--k-type))/1 var(--mk-ui); vertical-align:super; }
html :is(#ayah-pop, .mz-und-host) .hw .fnbox { position:relative; padding:calc(10px * var(--k-density)) calc(40px * var(--k-density)) calc(10px * var(--k-density)) calc(12px * var(--k-density)); border-radius:var(--mk-r12); background:var(--mk-fill); font:calc(15px * var(--k-type))/1.5 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .fnbox b { color:var(--mk-qr); }
html :is(#ayah-pop, .mz-und-host) .hw .fnbox .fx { position:absolute; top:6px; right:6px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; }
html :is(#ayah-pop, .mz-und-host) .hw .fnbox .fx .ic { width:15px; height:15px; }
html :is(#ayah-pop, .mz-und-host) .hw .choose { display:flex; align-items:center; justify-content:center; gap:calc(8px * var(--k-density)); width:100%; min-height:calc(50px * var(--k-density)); margin-top:calc(10px * var(--k-density)); border-radius:var(--mk-r16); box-shadow:inset 0 0 0 1.5px var(--mk-qr-line); color:var(--mk-qr); font:700 calc(15px * var(--k-type))/1 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .choose .ic { width:18px; height:18px; }
html :is(#ayah-pop, .mz-und-host) .hw .tpick { display:grid; gap:calc(10px * var(--k-density)); margin-top:calc(10px * var(--k-density)); max-height:420px; overflow:auto; padding:calc(2px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .lgrp { display:grid; gap:calc(4px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .lh { position:sticky; top:0; background:var(--mk-page); padding:calc(6px * var(--k-density)) calc(4px * var(--k-density)); font:700 calc(13px * var(--k-type))/1 var(--mk-ui); letter-spacing:.04em; text-transform:uppercase; color:var(--mk-mut); z-index:1; }
html :is(#ayah-pop, .mz-und-host) .hw .lh i { font-style:normal; opacity:.7; }
html :is(#ayah-pop, .mz-und-host) .hw .tck { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:calc(10px * var(--k-density)); align-items:center; min-height:calc(48px * var(--k-density)); padding:calc(6px * var(--k-density)) calc(10px * var(--k-density)); border-radius:var(--mk-r12); background:var(--mk-card); text-align:left; }
html :is(#ayah-pop, .mz-und-host) .hw .tck .cb { width:22px; height:22px; border-radius:var(--mk-r7); box-shadow:inset 0 0 0 2px var(--mk-fill2); }
html :is(#ayah-pop, .mz-und-host) .hw .tck.on .cb { background:var(--mk-qr-on); box-shadow:none; position:relative; }
html :is(#ayah-pop, .mz-und-host) .hw .tck.on .cb::after { content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:var(--mk-qr-on-ink); font:700 calc(14px * var(--k-type))/1 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .tck b { display:block; font:600 calc(14.5px * var(--k-type))/1.2 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .tck i { font:500 calc(12.5px * var(--k-type))/1.2 var(--mk-ui); font-style:normal; color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .tck em { font:600 calc(11.5px * var(--k-type))/1 var(--mk-ui); font-style:normal; color:var(--mk-qr); }
html :is(#ayah-pop, .mz-und-host) .hw .credit { margin-top:calc(10px * var(--k-density)); font:500 calc(12.5px * var(--k-type))/1.4 var(--mk-ui); color:var(--mk-mut); text-align:center; }
html :is(#ayah-pop, .mz-und-host) .hw .wbctl { display:flex; flex-wrap:wrap; gap:calc(8px * var(--k-density)); align-items:center; justify-content:space-between; margin-bottom:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .tg { display:flex; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .tg button { min-height:calc(40px * var(--k-density)); padding:0 calc(12px * var(--k-density)); border-radius:var(--mk-r99); background:var(--mk-fill); font:600 calc(13.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .tg button.on { background:var(--mk-qr-soft); color:var(--mk-qr); box-shadow:inset 0 0 0 1px var(--mk-qr-line); }
html :is(#ayah-pop, .mz-und-host) .hw .wbw { direction:rtl; }
html :is(#ayah-pop, .mz-und-host) .hw .wbw.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .wbw.inline { display:flex; flex-wrap:wrap; gap:calc(2px * var(--k-density)) calc(4px * var(--k-density)); padding:calc(10px * var(--k-density)); border-radius:var(--mk-r16); background:var(--mk-card); box-shadow:0 0 0 .5px var(--mk-line); }
html :is(#ayah-pop, .mz-und-host) .hw .wbc { display:grid; justify-items:center; align-content:start; gap:calc(2px * var(--k-density)); padding:calc(8px * var(--k-density)) calc(6px * var(--k-density)) calc(10px * var(--k-density)); border-radius:var(--mk-r14); background:var(--mk-card); box-shadow:0 0 0 .5px var(--mk-line); text-align:center; }
html :is(#ayah-pop, .mz-und-host) .hw .wbw.inline .wbc { background:none; box-shadow:none; padding:calc(4px * var(--k-density)) calc(4px * var(--k-density)) calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .wbc .wa { font:calc(calc(24px * var(--k-type)) * var(--mk-ufs)) / 1.7 var(--mk-q); }
html :is(#ayah-pop, .mz-und-host) .hw .wbc .wt { font:italic 500 calc(12.5px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-mut); direction:ltr; }
html :is(#ayah-pop, .mz-und-host) .hw .wbc .wm { font:600 calc(13px * var(--k-type))/1.25 var(--mk-ui); color:var(--mk-ink2); direction:ltr; }
html :is(#ayah-pop, .mz-und-host) .hw .wbc.on { box-shadow:0 0 0 2px var(--mk-qr); background:var(--mk-qr-soft); }
html :is(#ayah-pop, .mz-und-host) .hw .wbw.inline .wbc.on { background:var(--mk-qr-soft); border-radius:var(--mk-r12); }
html :is(#ayah-pop, .mz-und-host) .hw .wsel { margin-top:calc(10px * var(--k-density)); padding:calc(12px * var(--k-density)); border-radius:var(--mk-r16); background:var(--mk-card); box-shadow:inset 0 0 0 1px var(--mk-qr-line); display:grid; gap:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .wsh { display:flex; align-items:center; gap:calc(14px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .wsh .wa { font:calc(34px * var(--k-type))/1.4 var(--mk-q); }
html :is(#ayah-pop, .mz-und-host) .hw .wsh b { display:block; font:700 calc(17px * var(--k-type))/1.2 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .wsh span { font:500 calc(13.5px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .wacts { display:flex; flex-wrap:wrap; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .wacts .pbtn { display:inline-flex; align-items:center; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .wacts .ic { width:16px; height:16px; }
html :is(#ayah-pop, .mz-und-host) .hw .tfsel { display:grid; gap:calc(8px * var(--k-density)); margin-bottom:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .lsel { display:flex; align-items:center; gap:calc(10px * var(--k-density)); font:600 calc(13.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .lsel select { flex:1; min-height:calc(44px * var(--k-density)); border:0; border-radius:var(--mk-r12); background:var(--mk-fill); padding:0 calc(12px * var(--k-density)); font:600 calc(15px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .tpills { display:flex; gap:calc(6px * var(--k-density)); overflow-x:auto; padding-bottom:calc(2px * var(--k-density)); scrollbar-width:none; }
html :is(#ayah-pop, .mz-und-host) .hw .tpills::-webkit-scrollbar { display:none; }
html :is(#ayah-pop, .mz-und-host) .hw .tpills button { flex:none; min-height:calc(40px * var(--k-density)); padding:0 calc(14px * var(--k-density)); border-radius:var(--mk-r99); background:var(--mk-card); box-shadow:inset 0 0 0 1px var(--mk-line); font:600 calc(14px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink2); white-space:nowrap; }
html :is(#ayah-pop, .mz-und-host) .hw .tpills button.on { background:var(--mk-qr-on); color:var(--mk-qr-on-ink); box-shadow:none; }
html :is(#ayah-pop, .mz-und-host) .hw .tpills em { font:600 calc(11px * var(--k-type))/1 var(--mk-ui); font-style:normal; opacity:.8; }
html :is(#ayah-pop, .mz-und-host) .hw .grp { margin-bottom:calc(10px * var(--k-density)); border-radius:var(--mk-r16); background:var(--mk-qr-soft); overflow:hidden; }
html :is(#ayah-pop, .mz-und-host) .hw .gb { display:flex; align-items:center; gap:calc(10px * var(--k-density)); width:100%; min-height:calc(48px * var(--k-density)); padding:calc(8px * var(--k-density)) calc(12px * var(--k-density)); text-align:left; color:var(--mk-qr); font:500 calc(14px * var(--k-type))/1.3 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .gb .ic { width:18px; height:18px; flex:none; }
html :is(#ayah-pop, .mz-und-host) .hw .gb span { flex:1; }
html :is(#ayah-pop, .mz-und-host) .hw .gb i { font-style:normal; font-weight:700; }
html :is(#ayah-pop, .mz-und-host) .hw .gv { display:grid; gap:calc(6px * var(--k-density)); padding:0 calc(10px * var(--k-density)) calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .gl { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:calc(8px * var(--k-density)); align-items:center; padding:calc(6px * var(--k-density)) calc(10px * var(--k-density)); border-radius:var(--mk-r12); background:var(--mk-card); }
html :is(#ayah-pop, .mz-und-host) .hw .gl .dm-k { order:2; }
html :is(#ayah-pop, .mz-und-host) .hw .tfb { padding:calc(14px * var(--k-density)) calc(16px * var(--k-density)); border-radius:var(--mk-r18); background:var(--mk-card); box-shadow:0 0 0 .5px var(--mk-line); font:calc(calc(16.5px * var(--k-type)) * var(--mk-ufs)) / 1.7 var(--mk-ui); max-height:520px; overflow:auto; }
html :is(#ayah-pop, .mz-und-host) .hw .tfb h2, html :is(#ayah-pop, .mz-und-host) .hw .tfb h3 { font:700 calc(18px * var(--k-type))/1.3 var(--mk-ui); margin:calc(4px * var(--k-density)) 0 calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .tfb p { margin:0 0 calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .tfb.rtl { direction:rtl; text-align:right; font-family:var(--mk-q); font-size:calc(calc(19px * var(--k-type)) * var(--mk-ufs)); line-height:2.05; }
html :is(#ayah-pop, .mz-und-host) .hw .tfb.rtl h2 { font-family:var(--mk-q); }
html :is(#ayah-pop, .mz-und-host) .hw .tfb .arq { font-family:var(--mk-q); font-size:1.12em; }
html :is(#ayah-pop, .mz-und-host) .hw .tfft { display:flex; align-items:center; gap:calc(10px * var(--k-density)); padding:calc(10px * var(--k-density)) calc(4px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .tfft b { display:block; font:700 calc(14.5px * var(--k-type))/1.2 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .tfft span { font:500 calc(13px * var(--k-type))/1.3 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .vox { display:flex; flex-wrap:wrap; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .vox button { min-height:calc(44px * var(--k-density)); padding:0 calc(14px * var(--k-density)); border-radius:var(--mk-r12); background:var(--mk-fill); font:600 calc(14.5px * var(--k-type))/1 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .vox button.on { background:var(--mk-sel); color:var(--mk-sel-ink); box-shadow:inset 0 0 0 1px var(--mk-sel-ring); }
html :is(#ayah-pop, .mz-und-host) .hw .rrow.st2 { grid-template-columns:minmax(0,1fr) auto; background:transparent; padding:calc(6px * var(--k-density)) 0; }
html :is(#ayah-pop, .mz-und-host) .hw .atq { display:grid; gap:calc(10px * var(--k-density)); justify-items:center; padding:calc(18px * var(--k-density)) calc(14px * var(--k-density)); border-radius:var(--mk-r20); background:var(--mk-card); box-shadow:0 0 0 .5px var(--mk-line); text-align:center; }
html :is(#ayah-pop, .mz-und-host) .hw .atv { font:700 calc(13px * var(--k-type))/1 var(--mk-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .cue { font:calc(30px * var(--k-type))/1.8 var(--mk-q); direction:rtl; }
html :is(#ayah-pop, .mz-und-host) .hw .ar3.big { font-size:calc(24px * var(--k-type)); }
html :is(#ayah-pop, .mz-und-host) .hw .playq { display:flex; align-items:center; gap:calc(12px * var(--k-density)); width:100%; min-height:calc(72px * var(--k-density)); padding:0 calc(16px * var(--k-density)); border-radius:var(--mk-r18); background:var(--mk-acc); color:var(--mk-acc-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .playq .ic { width:28px; height:28px; }
html :is(#ayah-pop, .mz-und-host) .hw .playq .wave { flex:1; display:flex; align-items:center; gap:calc(3px * var(--k-density)); height:40px; }
html :is(#ayah-pop, .mz-und-host) .hw .playq .wave i { flex:1; border-radius:var(--mk-r3); background:currentColor; opacity:.55; }
html :is(#ayah-pop, .mz-und-host) .hw .playq.done { background:var(--mk-fill); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .atk { font:700 calc(15px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .atnow { display:flex; align-items:center; justify-content:center; gap:calc(12px * var(--k-density)); margin:calc(14px * var(--k-density)) 0 calc(10px * var(--k-density)); font:calc(17px * var(--k-type))/1.3 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .cd { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font:700 calc(16px * var(--k-type))/1 var(--mk-ui); background:conic-gradient(var(--mk-acc) 0 0, var(--mk-fill) 0); animation:mk-cd var(--mk-t) linear forwards; }
html :is(#ayah-pop, .mz-und-host) .hw @property --p { syntax:'<percentage>'; inherits:false; initial-value:0%; }
@keyframes mk-cd { from{ background:conic-gradient(var(--mk-acc) 100%, var(--mk-fill) 0); } to{ background:conic-gradient(var(--mk-acc) 0%, var(--mk-fill) 0); } }
html :is(#ayah-pop, .mz-und-host) .hw .atans { display:grid; gap:calc(6px * var(--k-density)); margin:calc(10px * var(--k-density)) 0; }
html :is(#ayah-pop, .mz-und-host) .hw .grade { display:grid; grid-template-columns:1fr 1fr; gap:calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .grade button { min-height:calc(56px * var(--k-density)); border-radius:var(--mk-r16); font:700 calc(16px * var(--k-type))/1 var(--mk-ui); display:flex; align-items:center; justify-content:center; gap:calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .gbad { background:var(--mk-qr-soft); color:var(--mk-qr); }
html :is(#ayah-pop, .mz-und-host) .hw .ggood { background:var(--mk-acc); color:var(--mk-acc-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .grade .ic { width:18px; height:18px; }
html :is(#ayah-pop, .mz-und-host) .hw .more2 { border-top:1px solid var(--mk-line); padding-top:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .more2 summary { list-style:none; cursor:pointer; min-height:calc(44px * var(--k-density)); display:flex; align-items:center; font:600 calc(14.5px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .more2 summary::before { content:'›'; display:inline-block; margin-right:calc(8px * var(--k-density)); transition:transform .2s; font-size:calc(18px * var(--k-type)); }
html :is(#ayah-pop, .mz-und-host) .hw .more2[open] summary::before { transform:rotate(90deg); }
html :is(#ayah-pop, .mz-und-host) .hw .more2 summary::-webkit-details-marker { display:none; }
html :is(#ayah-pop, .mz-und-host) .hw .more2 > *:not(summary) { margin-top:calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .atsum { text-align:center; font:600 calc(14px * var(--k-type))/1.35 var(--mk-ui); color:var(--mk-ink2); margin:calc(8px * var(--k-density)) 0; }
html :is(#ayah-pop, .mz-und-host) .hw .pgno { position:absolute; left:14px; top:6px; font:600 calc(11.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); direction:ltr; }
html :is(#ayah-pop, .mz-und-host) .hw .tbar { display:flex; align-items:center; gap:calc(10px * var(--k-density)); margin-bottom:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .tbar b { font:700 calc(16px * var(--k-type))/1 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .tbar span { flex:1; font:500 calc(13.5px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .pbtn.sm { min-height:calc(36px * var(--k-density)); padding:0 calc(12px * var(--k-density)); font-size:calc(13.5px * var(--k-type)); }
html :is(#ayah-pop, .mz-und-host) .hw .playq em { font:600 calc(13px * var(--k-type))/1 var(--mk-ui); font-style:normal; opacity:.85; }
html :is(#ayah-pop, .mz-und-host) .hw .atk2 { font:600 calc(14px * var(--k-type))/1.5 var(--mk-ui); color:var(--mk-ink2); text-align:center; margin:calc(4px * var(--k-density)) 0 calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .atk2 .kq { background:var(--mk-gold-soft); border-radius:var(--mk-r6); padding:calc(1px * var(--k-density)) calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .atk2 .kn { background:var(--mk-acc-soft); border-radius:var(--mk-r6); padding:calc(1px * var(--k-density)) calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .pctl { display:flex; align-items:center; gap:calc(10px * var(--k-density)); margin-bottom:calc(10px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .pbig { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--mk-acc); color:var(--mk-acc-ink); flex:none; }
html :is(#ayah-pop, .mz-und-host) .hw .pbig .ic { width:26px; height:26px; }
html :is(#ayah-pop, .mz-und-host) .hw .pmid { flex:1; min-width:0; display:grid; gap:calc(4px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .pbar { height:8px; border-radius:var(--mk-r99); background:var(--mk-fill2); overflow:hidden; cursor:pointer; }
html :is(#ayah-pop, .mz-und-host) .hw .pbar i { display:block; height:100%; width:0; background:var(--mk-acc); }
html :is(#ayah-pop, .mz-und-host) .hw .ptime { display:flex; justify-content:space-between; font:600 calc(12.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); font-variant-numeric:tabular-nums; }
html :is(#ayah-pop, .mz-und-host) .hw .tgw { display:inline-flex; align-items:center; gap:calc(6px * var(--k-density)); min-height:calc(44px * var(--k-density)); padding:0 calc(12px * var(--k-density)); border-radius:var(--mk-r12); background:var(--mk-fill); font:600 calc(13.5px * var(--k-type))/1 var(--mk-ui); color:var(--mk-ink2); flex:none; }
html :is(#ayah-pop, .mz-und-host) .hw .tgw .ic { width:17px; height:17px; }
html :is(#ayah-pop, .mz-und-host) .hw .tgw.on { background:var(--mk-acc-soft); color:var(--mk-acc); }
html :is(#ayah-pop, .mz-und-host) .hw .mpage { max-height:560px; overflow:auto; padding:calc(10px * var(--k-density)) calc(14px * var(--k-density)) calc(16px * var(--k-density)); border-radius:var(--mk-r16); background:var(--mk-page); box-shadow:0 0 0 1px var(--mk-line), inset 0 0 0 5px color-mix(in srgb, var(--mk-gold) 12%, transparent); direction:rtl; text-align:justify; font:calc(24px * var(--k-type))/2.1 var(--mk-q); scroll-behavior:smooth; }
html :is(#ayah-pop, .mz-und-host) .hw .mhead { display:flex; justify-content:space-between; font:600 calc(12px * var(--k-type))/1 var(--mk-ui); color:var(--mk-mut); direction:ltr; padding:calc(4px * var(--k-density)) calc(2px * var(--k-density)) calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .pw { display:inline-block; text-align:center; cursor:pointer; border-radius:var(--mk-r8); padding:0 calc(2px * var(--k-density)); transition:background .12s, color .12s; }
html :is(#ayah-pop, .mz-und-host) .hw .pw b { font-weight:400; display:block; }
html :is(#ayah-pop, .mz-und-host) .hw .pw i { display:none; font:500 calc(11.5px * var(--k-type))/1.2 var(--mk-ui); font-style:normal; color:var(--mk-mut); direction:ltr; max-width:110px; margin:calc(-6px * var(--k-density)) auto calc(6px * var(--k-density)); white-space:normal; }
html :is(#ayah-pop, .mz-und-host) .hw .mpage.wbwon .pw i { display:block; margin:calc(4px * var(--k-density)) auto 0; }
html :is(#ayah-pop, .mz-und-host) .hw .mpage.wbwon { line-height:1.6; text-align:right; }
html :is(#ayah-pop, .mz-und-host) .hw .mpage.wbwon .pw { vertical-align:top; margin:0 calc(2px * var(--k-density)) calc(12px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .mpage.wbwon .pw b { line-height:1.75; }
html :is(#ayah-pop, .mz-und-host) .hw .mpage.wbwon .amk2 { vertical-align:top; line-height:1.75; }
html :is(#ayah-pop, .mz-und-host) .hw .pw.now { background:var(--mk-gold-soft); box-shadow:inset 0 -3px 0 var(--mk-gold); }
html :is(#ayah-pop, .mz-und-host) .hw .pw.now i { color:var(--mk-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .amk2 { color:var(--mk-gold); }
html :is(#ayah-pop, .mz-und-host) .hw .startrow { display:grid; gap:calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .startrow > span { text-align:center; font:600 calc(14.5px * var(--k-type))/1.3 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .mdesc { font:500 calc(15px * var(--k-type))/1.45 var(--mk-ui); color:var(--mk-ink2); min-height:calc(44px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .go-big { min-height:calc(52px * var(--k-density)); border-radius:var(--mk-r16); background:var(--mk-acc); color:var(--mk-acc-ink); font:700 calc(16px * var(--k-type))/1 var(--mk-ui); width:100%; }
html :is(#ayah-pop, .mz-und-host) .hw .wstrip { display:flex; flex-wrap:wrap; direction:rtl; gap:calc(6px * var(--k-density)); padding:calc(10px * var(--k-density)); border-radius:var(--mk-r18); background:var(--mk-card); box-shadow:0 0 0 .5px var(--mk-line); }
html :is(#ayah-pop, .mz-und-host) .hw .wstrip button { font:calc(23px * var(--k-type))/1.7 var(--mk-q); padding:calc(2px * var(--k-density)) calc(10px * var(--k-density)); min-height:calc(44px * var(--k-density)); border-radius:var(--mk-r12); background:var(--mk-fill); transition:background .15s, color .15s; }
html :is(#ayah-pop, .mz-und-host) .hw .wstrip button.on { background:var(--mk-sel); color:var(--mk-sel-ink); box-shadow:inset 0 0 0 1px var(--mk-sel-ring); }
html :is(#ayah-pop, .mz-und-host) .hw .wstrip button.same { box-shadow:inset 0 -3px 0 var(--mk-gold); }
html :is(#ayah-pop, .mz-und-host) .hw .whd { display:grid; gap:calc(10px * var(--k-density)); margin:calc(12px * var(--k-density)) 0 calc(8px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .whd .big { display:flex; align-items:baseline; gap:calc(12px * var(--k-density)); flex-wrap:wrap; }
html :is(#ayah-pop, .mz-und-host) .hw .whd .big .w { font:calc(34px * var(--k-type))/1.5 var(--mk-q); }
html :is(#ayah-pop, .mz-und-host) .hw .whd .big .n { font:600 calc(15px * var(--k-type))/1.3 var(--mk-ui); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .fchips { display:flex; flex-wrap:wrap; gap:calc(6px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .fchips button { min-height:calc(38px * var(--k-density)); padding:0 calc(12px * var(--k-density)); border-radius:var(--mk-r999); background:var(--mk-fill); font:600 calc(14px * var(--k-type))/1 var(--mk-ui); display:inline-flex; align-items:center; gap:calc(6px * var(--k-density)); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .fchips button i { font-style:normal; font-variant-numeric:tabular-nums; opacity:.7; }
html :is(#ayah-pop, .mz-und-host) .hw .fchips button.on { background:var(--mk-sel); color:var(--mk-sel-ink); box-shadow:inset 0 0 0 1px var(--mk-sel-ring); }
html :is(#ayah-pop, .mz-und-host) .hw .legend { font:500 calc(13.5px * var(--k-type))/1.45 var(--mk-ui); color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .legend .df { font-weight:700; }
html :is(#ayah-pop, .mz-und-host) .hw .hits { display:grid; gap:calc(6px * var(--k-density)); max-height:560px; overflow:auto; overscroll-behavior:contain; padding:calc(2px * var(--k-density)); margin:calc(-2px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .hit { display:grid; grid-template-columns:auto minmax(0,1fr); gap:calc(4px * var(--k-density)) calc(10px * var(--k-density)); padding:calc(10px * var(--k-density)) calc(12px * var(--k-density)); border-radius:var(--mk-r14); background:var(--mk-card); box-shadow:0 0 0 .5px var(--mk-line); text-align:left; width:100%; }
html :is(#ayah-pop, .mz-und-host) .hw .hit .meta { display:flex; align-items:center; gap:calc(8px * var(--k-density)); grid-column:1 / 3; flex-wrap:wrap; }
html :is(#ayah-pop, .mz-und-host) .hw .hit .rf { font:700 calc(14px * var(--k-type))/1.2 var(--mk-ui); }
html :is(#ayah-pop, .mz-und-host) .hw .hit .pg { font:500 calc(13px * var(--k-type))/1.2 var(--mk-ui); color:var(--mk-mut); font-variant-numeric:tabular-nums; }
html :is(#ayah-pop, .mz-und-host) .hw .hit .kind { font:600 calc(12px * var(--k-type))/1 var(--mk-ui); padding:calc(4px * var(--k-density)) calc(8px * var(--k-density)); border-radius:var(--mk-r999); background:var(--mk-fill); color:var(--mk-ink2); }
html :is(#ayah-pop, .mz-und-host) .hw .hit .kind.pro { background:var(--mk-qr-soft); color:var(--mk-qr); }
html :is(#ayah-pop, .mz-und-host) .hw .hit .close { margin-left:auto; display:inline-flex; gap:calc(3px * var(--k-density)); align-items:center; }
html :is(#ayah-pop, .mz-und-host) .hw .hit .close i { width:7px; height:7px; border-radius:50%; background:var(--mk-fill2); }
html :is(#ayah-pop, .mz-und-host) .hw .hit .close i.on { background:var(--mk-gold); }
html :is(#ayah-pop, .mz-und-host) .hw .hit .sn { grid-column:1 / 3; font:calc(22px * var(--k-type))/2 var(--mk-q); direction:rtl; text-align:right; }
html :is(#ayah-pop, .mz-und-host) .hw .hit.open .sn { white-space:normal; }
html :is(#ayah-pop, .mz-und-host) .hw .sn .d { color:var(--mk-mut); opacity:.75; }
html :is(#ayah-pop, .mz-und-host) .hw .sn .c { color:var(--mk-ink); }
html :is(#ayah-pop, .mz-und-host) .hw .sn .h { color:var(--mk-ink); background:var(--mk-gold-soft); border-radius:var(--mk-r6); padding:0 calc(3px * var(--k-density)); }
html :is(#ayah-pop, .mz-und-host) .hw .df { color:var(--mk-qr); }
html :is(#ayah-pop, .mz-und-host) .hw .hit .full { grid-column:1 / 3; display:none; font:calc(21px * var(--k-type))/2 var(--mk-q); direction:rtl; text-align:right; padding-top:calc(6px * var(--k-density)); border-top:1px solid var(--mk-line); }
html :is(#ayah-pop, .mz-und-host) .hw .hit.open .full { display:block; }
html :is(#ayah-pop, .mz-und-host) .hw .more { min-height:calc(46px * var(--k-density)); border-radius:var(--mk-r14); background:var(--mk-fill); font:600 calc(15px * var(--k-type))/1 var(--mk-ui); width:100%; }
html :is(#ayah-pop, .mz-und-host) .hw .empty { padding:calc(16px * var(--k-density)); text-align:center; color:var(--mk-mut); }
html :is(#ayah-pop, .mz-und-host) .hw .toast { position:absolute; left:50%; bottom:18px; transform:translate(-50%, 20px); opacity:0; pointer-events:none; padding:calc(10px * var(--k-density)) calc(16px * var(--k-density)); border-radius:var(--mk-r999); background:var(--mk-sel); color:var(--mk-sel-ink); box-shadow:inset 0 0 0 1px var(--mk-sel-ring); font:600 calc(14.5px * var(--k-type))/1.2 var(--mk-ui); transition:opacity .2s, transform .2s; white-space:nowrap; z-index:5; }
html :is(#ayah-pop, .mz-und-host) .hw .toast.on { opacity:1; transform:translate(-50%, 0); }
html :is(#ayah-pop, .mz-und-host) .hw .notes { display:grid; gap:calc(14px * var(--k-density)); }
@media (max-width:480px) {
  html :is(#ayah-pop, .mz-und-host) .hw .marks { grid-template-columns:repeat(2, minmax(0,1fr)); }
}