:root{
  --night:#140b1c;--parch:#f5ecd9;--mist:#c8b9a4;--gold:#d9b261;--gold-l:#f2dc9e;--line:rgba(217,178,97,.3);
  --display:'Cormorant Garamond','Cormorant',Georgia,serif;--ui:'Manrope',system-ui,sans-serif;
  --urdu:'MFD-SAW','Noto Nastaliq Urdu','Jameel Noori Nastaleeq',serif;--quran:'AlMajeed','Amiri','Scheherazade New',serif;
  color-scheme:dark
}
@font-face{font-family:'AlMajeed';src:url(almajeed.woff2) format('woff2');font-display:swap}
@font-face{font-family:'MFD-SAW';src:url(saw.woff2) format('woff2');unicode-range:U+FDFA;font-display:block}
@view-transition{navigation:auto}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;background:var(--night);color:var(--parch);font-family:var(--ui);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:lining-nums}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px;border-radius:6px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.ur{font-family:var(--urdu);direction:rtl;line-height:2.1}
.ar{font-family:var(--quran);direction:rtl}
.bar{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px);background:rgba(20,11,28,.84);box-shadow:0 1px 0 var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bar-in{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--display);font-size:22px;font-weight:600;color:var(--parch);white-space:nowrap;view-transition-name:brand}
.brand svg{width:30px;height:30px;flex:none}
.brand .st{fill:none;stroke:var(--gold);stroke-width:.85}.brand polygon.st{fill:color-mix(in srgb,var(--gold) 18%,transparent)}
.trail{display:flex;align-items:center;gap:8px;min-width:0;font-size:14.5px;font-weight:600;color:var(--mist);white-space:nowrap;overflow:hidden}
.trail a{text-decoration:none}
.trail a:hover{color:var(--parch)}
.trail .sep{opacity:.6}
.trail [aria-current]{color:var(--gold-l);overflow:hidden;text-overflow:ellipsis}
.bar .links{margin-left:auto;display:flex;gap:6px;flex:none}
.bar .links a{text-decoration:none;font-size:15px;font-weight:600;color:var(--mist);padding:8px 14px;border-radius:999px;transition:color .25s,background-color .25s}
.bar .links a:hover{color:var(--parch);background:rgba(255,255,255,.06)}
@media (max-width:720px){.brand span{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;
  transition:transform .25s,background-color .25s,color .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.foot{border-top:1px solid var(--line);margin-top:clamp(50px,9vh,90px);padding-block:20px calc(26px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:14px;color:var(--mist)}
.foot a{color:var(--gold-l);text-decoration:none}
.foot a:hover{text-decoration:underline}
.bar nav,.bar .links{align-items:center}
.theme{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;min-height:0;margin:0;padding:0;border-radius:999px;border:1px solid var(--line);background:none;box-shadow:none;
  color:var(--mist);font:inherit;line-height:1;text-transform:none;cursor:pointer;transition:color .25s,border-color .25s}
.theme:hover{color:var(--parch);border-color:var(--gold)}
.theme svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme .sun{display:none}
html.mqj-light .theme .sun{display:block}
html.mqj-light .theme .moon{display:none}
@media (max-width:640px){.theme{width:36px;height:36px}}
body{--bg:#2a030b;--ink:#f6e4b8;--soft:#c8b9a4;--acc:#d9b261;--acc-l:#f2dc9e;--rule:rgba(217,178,97,.3);--box:rgba(255,255,255,.035);--box-b:rgba(217,178,97,.28);--pin:#4a0612;
  --q-bg:linear-gradient(160deg,#510a18,#3b050e);--q-b:rgba(217,178,97,.5);--q-ink:#f2dc9e;
  --tr-ink:#fff3dc;--x-ink:#e2d0b4;
  --hd-bg:#143424;--hd-b:#4c9a6c;--hd-ink:#d3efdc;--hd-ar:#a6e2bd;
  --po-bg:#3b141b;--po-b:#a3616d;--po-ink:#f4e0e3;
  --iq-bg:rgba(217,178,97,.2);--iq-line:rgba(217,178,97,.55);--iq-ink:#f6e4b8;
  --fz:1;background:var(--bg);color:var(--ink)}
html.mqj-light body{--bg:#f6ecd8;--ink:#3a0a14;--soft:#6f5545;--acc:#a77b26;--acc-l:#8a5f12;--rule:rgba(167,123,38,.32);--box:#fffaf0;--box-b:rgba(167,123,38,.38);--pin:#7c1124;
  --q-bg:linear-gradient(160deg,#5c0b19,#43060f);--q-b:rgba(167,123,38,.6);--q-ink:#f2dc9e;
  --tr-ink:#5a0a18;--x-ink:#2e1a14;
  --hd-bg:#e5f2e9;--hd-b:#8cc6a1;--hd-ink:#1f5435;--hd-ar:#17603a;
  --po-bg:#f9eeee;--po-b:#dcb3b9;--po-ink:#6b1f2c;
  --iq-bg:#f3e1b6;--iq-line:rgba(199,154,60,.7);--iq-ink:#5a0a18;
  --parch:#3a0a14;--mist:#6f5545;--line:rgba(167,123,38,.32);color-scheme:light}
.bar{background:rgba(42,3,11,.88)}
html.mqj-light :is(.bar,.head){--bg:#4d0713;--ink:#f6e4b8;--soft:#dccab2;--acc:#d9b261;--acc-l:#f2dc9e;--rule:rgba(217,178,97,.4);--box-b:rgba(217,178,97,.3);
  --parch:#f5ecd9;--mist:#d4c4ad;--line:rgba(217,178,97,.34);color-scheme:dark;color:var(--ink)}
html.mqj-light .bar{background:rgba(66,6,17,.97)}
.lock{display:flex;align-items:center;min-width:0}
.lock .logo{flex:none;display:block;border-radius:50%}
.lock .logo span{--m:url(bayan-logo-mask.webp);display:block;width:46px;height:46px;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  background:linear-gradient(160deg,#f6e2a6 0%,#e0b45a 45%,#b8862f 100%);transition:transform .25s}
.lock .logo:hover span{transform:scale(1.06)}
.lock .site{margin-left:12px;padding-left:12px;border-left:1px solid var(--line);text-decoration:none;font-family:var(--display);font-size:21px;font-weight:600;line-height:1.2;color:var(--parch);white-space:nowrap}
.lock .site:hover{color:var(--gold-l)}
main{direction:rtl}
#tz-top{--rw:clamp(820px,100vw - 150px,1100px);--wf:1}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.head{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(14px,2.4vh,24px);
  padding:clamp(18px,3vh,30px) 0 clamp(26px,4vh,40px);--box:rgba(30,2,8,.32);--rule:rgba(217,178,97,.4);
  border-image:linear-gradient(180deg,#7c1124,#4d0713 calc(100% - 1px),rgba(217,178,97,.6) calc(100% - 1px)) 0 fill/0/0 100vmax}
.head::after{content:"";position:absolute;left:50%;top:50%;width:min(520px,90%);aspect-ratio:10/7;translate:-50% -50%;z-index:-1;opacity:.12;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70'%3E%3Cg fill='none' stroke='%23f2dc9e' stroke-width='.7'%3E%3Cpath d='M50 12C38 4 18 3 4 7v56c14-4 34-3 46 5 12-8 32-9 46-5V7C82 3 62 4 50 12zM50 12v56'/%3E%3Cpath d='M12 18c10-2 22-1 30 3M12 28c10-2 22-1 30 3M12 38c10-2 22-1 30 3M12 48c10-2 22-1 30 3M58 21c8-4 20-5 30-3M58 31c8-4 20-5 30-3M58 41c8-4 20-5 30-3M58 51c8-4 20-5 30-3'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.bism{margin:0 0 4px;font-family:var(--quran);font-size:clamp(22px,2.4vw,30px);line-height:1.9;color:var(--acc-l)}
.kick{margin:0;font-family:var(--urdu);font-size:16px;line-height:2;color:var(--soft)}
.head h1{margin:0;font-family:var(--quran);font-weight:400;font-size:clamp(30px,3.4vw,40px);line-height:1.6;color:var(--acc-l)}
.tz-badge{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:108px;height:108px;margin:0 0 2px;
  color:#3a0410;font-family:var(--urdu);font-weight:600;font-size:19px;line-height:1.6;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.tz-badge::before{content:"";position:absolute;inset:0;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-11 -11 22 22'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ecd08a'/%3E%3Cstop offset='1' stop-color='%23cfa24a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,-10 2.93,-7.07 7.07,-7.07 7.07,-2.93 10,0 7.07,2.93 7.07,7.07 2.93,7.07 0,10 -2.93,7.07 -7.07,7.07 -7.07,2.93 -10,0 -7.07,-2.93 -7.07,-7.07 -2.93,-7.07' fill='url(%23g)' stroke='%23f6e4b8' stroke-width='.35'/%3E%3Cpolygon points='0.00,-8.40 2.46,-5.94 5.94,-5.94 5.94,-2.46 8.40,0.00 5.94,2.46 5.94,5.94 2.46,5.94 0.00,8.40 -2.46,5.94 -5.94,5.94 -5.94,2.46 -8.40,0.00 -5.94,-2.46 -5.94,-5.94 -2.46,-5.94' fill='none' stroke='%237c1124' stroke-opacity='.45' stroke-width='.3'/%3E%3C/svg%3E") center/contain no-repeat}
.tz-badge span{transform:translate(.06em,-.2em)}                       
.tz-ay{position:relative;margin:-2px 0 2px;padding-bottom:6px;font-family:var(--urdu);font-weight:600;font-size:clamp(30px,3.6vw,44px);line-height:1.9;color:#f6e4b8}
.tz-ay::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#d9b261 20%,#d9b261 80%,transparent)}
.head .mean{margin:0;font-family:var(--urdu);font-size:clamp(17px,1.6vw,20px);line-height:2.1;color:var(--acc)}
.tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.pill{cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--rule);background:var(--box);color:var(--ink);text-decoration:none;
  font-family:var(--urdu);font-size:15.5px;line-height:1.9;transition:border-color .25s,background-color .25s,color .25s}
.pill:hover{border-color:var(--acc)}
.pill svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--acc-l);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pill .x{font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.04em;direction:ltr}
.pill[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#3a0410}
.pill[aria-pressed="true"] svg{stroke:#3a0410}
.size{display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--rule);background:var(--box);overflow:hidden}
.size button{min-width:48px;min-height:44px;padding:0 12px;border:0;background:none;color:var(--ink);font-family:var(--urdu);line-height:1;cursor:pointer}
.size button:first-child{font-size:15px}.size button:last-child{font-size:22px}
.size button i{font-family:var(--ui);font-style:normal;font-size:12px;font-weight:700;color:var(--acc-l);margin-inline-start:2px}
.size button+button{border-right:1px solid var(--rule)}
.size button:hover{background:var(--rule)}
.size button:disabled{opacity:.35;cursor:default;background:none}
.resume{display:inline-flex;align-items:center;gap:8px;margin-top:10px;min-height:44px;padding:2px 18px;border-radius:22px;border:1px solid var(--acc);background:var(--box);
  color:var(--soft);font-family:var(--urdu);font-size:15px;line-height:1.9;cursor:pointer}
.resume:hover{background:var(--rule)}
.resume b{font-weight:600;color:var(--ink)}
.sp{display:flex;align-items:center;gap:10px;margin-top:10px}
.sp .track{width:180px;height:4px;border-radius:2px;background:var(--box-b);overflow:hidden}
.sp i{display:block;height:100%;width:0;background:var(--acc);transition:width .4s}
.sp span{font-family:var(--urdu);font-size:13.5px;line-height:1.9;color:var(--soft)}
.hbar{position:sticky;top:64px;z-index:15;display:flex;align-items:center;gap:6px;max-width:var(--rw);margin:0 auto 6px;padding:10px 0;
  background:var(--bg);box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}
.stations{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.sback{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--acc);color:var(--acc-l);
  text-decoration:none;font-family:var(--urdu);font-size:15px;line-height:1.9;transition:background-color .25s}
.sback svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sback:hover{background:var(--rule)}
.stations::-webkit-scrollbar{display:none}
.stations a{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--rule);text-decoration:none;
  font-family:var(--urdu);font-size:14.5px;line-height:1.9;color:var(--soft);transition:background-color .25s,color .25s,border-color .25s}
.stations a b{font-family:var(--display);font-weight:600;font-size:17px;line-height:1;color:var(--acc-l);direction:ltr}
.stations a .t{display:none;max-width:min(320px,46vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stations a.on .t{display:inline}
.stations a .ok{display:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.stations a.got .ok{display:inline}
.stations a.got{border-color:var(--acc)}
.stations a:hover{color:var(--ink);border-color:var(--acc)}
.stations a.on{background:var(--acc);border-color:var(--acc);color:var(--bg)}
.stations a.on b{color:var(--bg)}
html.mqj-light .stations a.on{background:#7c1124;border-color:#7c1124;color:#f6e4b8}
html.mqj-light .stations a.on b{color:#f2dc9e}
.key{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;max-width:var(--rw);margin:4px auto clamp(22px,3.4vh,34px);font-family:var(--urdu);font-size:13.5px;line-height:1.8;color:var(--soft)}
.key span{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;border:1px solid transparent}
.key .k-q{background:var(--q-bg);border-color:var(--q-b);color:var(--q-ink)}
.key .k-tr{border-color:var(--rule);color:var(--tr-ink);font-weight:600}
.key .k-hd{background:var(--hd-bg);border-color:var(--hd-b);color:var(--hd-ink)}
.key .k-po{background:var(--po-bg);border-color:var(--po-b);color:var(--po-ink)}
.key .k-x{border-color:var(--rule);color:var(--x-ink)}
.read{max-width:var(--rw);margin:0 auto}
.intro,.pre{margin:0 0 clamp(24px,4vh,40px);padding:clamp(14px,2.2vw,24px) clamp(16px,2.6vw,30px);border-radius:18px;border:1px solid var(--box-b);background:var(--box)}
.intro h2,.pre h3{margin:0 0 4px;font-family:var(--urdu);font-weight:600;font-size:calc(var(--fz) * var(--wf) * 18px);line-height:2;color:var(--acc-l)}
.intro{scroll-margin-top:136px}
.hd{scroll-margin-top:136px;padding-bottom:clamp(30px,5vh,50px)}
.hd+.hd{padding-top:clamp(30px,5vh,50px)}
.hh{display:grid;grid-template-columns:auto auto 1fr auto;grid-template-areas:"sn ay h2 vid";align-items:center;gap:0 14px;margin-bottom:16px;padding:12px 20px 12px 16px;
  border-radius:18px;border:1px solid rgba(217,178,97,.45);background:linear-gradient(180deg,rgba(217,178,97,.16),rgba(217,178,97,.06))}
html.mqj-light .hh{border-color:rgba(199,154,60,.55);background:linear-gradient(180deg,#fcf3e0,#f6e6c3);box-shadow:0 16px 30px -24px rgba(74,6,18,.55)}
.hh .sn{grid-area:sn;position:relative;display:grid;place-items:center;width:50px;height:50px}
.hh .sn svg{position:absolute;inset:0;width:100%;height:100%}.hh .sn polygon{fill:#7c1124;stroke:#d9b261;stroke-width:.8}
.hh .sn b{position:relative;font-family:var(--display);font-weight:700;font-size:22px;line-height:1;font-variant-numeric:lining-nums;color:#f2dc9e}   
.hh .ay{grid-area:ay}.hh h2{grid-area:h2}.hh .vid{grid-area:vid}
html.mqj-light .hh .ay{background:#fffaf0}
.hh .ay{min-width:64px;padding:2px 10px;border-radius:999px;border:1px solid var(--box-b);text-align:center;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.6;color:var(--acc-l);direction:ltr}
.hd.done .hh .ay{background:var(--acc);border-color:var(--acc);color:var(--bg)}
.hh h2{margin:0;padding-inline-start:10px;min-width:0;font-family:var(--urdu);font-weight:600;font-size:calc(var(--fz) * clamp(22px,2.2vw,27px));line-height:2;color:var(--ink);text-wrap:balance;
  transform:translateY(-4px)}   
.vid{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 18px;border-radius:999px;background:var(--gold);color:#3a0410;text-decoration:none;font-family:var(--urdu);font-size:15px;line-height:1.9;white-space:nowrap;transition:background-color .25s}
.vid:hover{background:var(--gold-l)}
.vid svg{width:12px;height:12px;fill:currentColor}
.vid .tm{font-family:var(--ui);font-size:13px;font-weight:700;direction:ltr}
html.mqj-light .hh h2{color:#7c1124}
html.mqj-light .hh .ay{color:#7c1124;border-color:rgba(124,17,36,.32)}
html.mqj-light .hd.done .hh .ay{background:#7c1124;border-color:#7c1124;color:#f6e4b8}
.ayat{position:relative;margin:0 0 clamp(18px,3vh,26px);padding:clamp(14px,2vw,22px) clamp(16px,2.4vw,28px);border-radius:18px;border:1px solid var(--q-b);background:var(--q-bg);
  box-shadow:inset 0 0 0 4px rgba(217,178,97,.08);font-family:var(--quran);font-size:calc(var(--fz) * clamp(25px,2.6vw,31px));line-height:2.15;color:var(--q-ink);text-align:justify;text-align-last:center}
.ayat .aa{color:inherit;text-decoration:none;border-radius:8px;transition:background-color .2s}
.ayat .aa:hover,.ayat .aa:focus-visible{background:rgba(242,220,158,.14)}
.ayat .aa.hit{animation:hitq 2.6s ease-out}
@keyframes hitq{0%,35%{background:rgba(242,220,158,.3)}100%{background:transparent}}
.ayat.folded{max-height:calc(var(--fz) * 7.2em);overflow:hidden;-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
.fold{display:flex;justify-content:center;margin:-14px 0 clamp(18px,3vh,26px)}
.fold button{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--q-b);background:var(--bg);color:var(--acc-l);font-family:var(--urdu);font-size:14px;line-height:1.9;cursor:pointer}
.u{padding:6px 0 4px;scroll-margin-top:136px}
.u+.u{margin-top:14px;border-top:1px solid var(--rule);padding-top:18px}
.uh{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.un{display:inline-flex;align-items:baseline;gap:6px;margin:0;padding:0 12px;border-radius:999px;background:var(--rule);font-family:var(--urdu);font-weight:400;font-size:14px;line-height:2;color:var(--soft)}
.un b{font-family:var(--display);font-weight:600;font-size:16px;color:var(--acc-l);direction:ltr}
html.mqj-light .un b{color:#7c1124}
.ib{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid transparent;background:none;color:var(--soft);cursor:pointer;text-decoration:none}
.ib:hover{border-color:var(--rule);color:var(--ink)}
.ib svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.note{font-family:var(--urdu);font-size:13px;line-height:1.9;color:var(--acc-l)}
.qa{margin:8px 0 4px;padding:6px clamp(14px,2vw,20px);border-radius:14px;border:1px solid var(--q-b);background:var(--q-bg);font-family:var(--quran);font-size:calc(var(--fz) * clamp(23px,2.3vw,28px));line-height:2.05;color:var(--q-ink)}
.rq{width:fit-content;max-width:100%;margin:8px 0 4px;padding:2px clamp(12px,1.8vw,16px);border-radius:12px;border:1px dashed var(--q-b);background:var(--q-bg);font-family:var(--quran);font-size:calc(var(--fz) * clamp(20px,2vw,24px));line-height:2;color:var(--q-ink)}
.gl{font-family:var(--urdu);font-size:.76em;opacity:.8}
.tr{margin:4px 0 10px;font-family:var(--urdu);font-weight:600;font-size:calc(var(--fz) * var(--wf) * 19.5px);line-height:2.3;color:var(--tr-ink)}
.u p.x,.intro p:not(.arl),.pre p:not(.arl){margin:0 0 10px;font-family:var(--urdu);font-size:calc(var(--fz) * var(--wf) * 18px);line-height:2.4;color:var(--x-ink);text-align:justify}
.u h3{margin:14px 0 4px;font-family:var(--urdu);font-weight:600;font-size:calc(var(--fz) * var(--wf) * 19px);line-height:2;color:var(--acc-l)}
:is(.x,.tr,.intro,.pre) .iq{font-family:var(--quran);font-size:1.1em;line-height:1;color:var(--iq-ink);background:var(--iq-bg);box-shadow:inset 0 -2px 0 var(--iq-line);border-radius:6px;padding:0 .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
:is(.x,.tr,.intro,.pre,.poem) .ar{font-family:var(--quran);font-size:1.1em;line-height:1;color:var(--acc-l)}
.en{font-family:var(--ui);font-size:.8em;font-weight:500;color:var(--soft)}
.rf{color:var(--soft)}
.hdx{display:block;margin:10px 0;padding:8px clamp(14px,2vw,20px);border-radius:14px;border:1px solid var(--hd-b);background:var(--hd-bg);color:var(--hd-ink);text-align:right}
.hdx .hl{display:block;font-size:12.5px;font-weight:600;line-height:1.8;color:var(--hd-ar)}
.hdx .hdt{display:block;font-family:var(--quran);font-size:1.3em;line-height:2;color:var(--hd-ar)}
.hdx .hdt .fnr{font-size:.55em}
.hdx .ht{display:block;font-weight:600}
:is(.x,.intro,.pre) .hdt{font-family:var(--quran);color:var(--hd-ar)}
.poem{margin:8px auto 14px;padding:8px 16px;max-width:560px;border-radius:14px;border:1px solid var(--po-b);background:var(--po-bg);text-align:center;font-family:var(--urdu);font-size:calc(var(--fz) * var(--wf) * 18.5px);line-height:2.3;color:var(--po-ink)}
.poem p{margin:0}
#read .poem p{margin:0;font-size:inherit;line-height:inherit;color:inherit;text-align:center;text-wrap:balance}   
.xq{margin:8px 0 14px;padding:10px clamp(14px,2vw,22px);border-radius:14px;border:1px dashed var(--q-b)}
.xq .xa{margin:0;padding:4px 12px;border-radius:10px;background:var(--q-bg);font-family:var(--quran);font-size:calc(var(--fz) * var(--wf) * 23px);line-height:2;color:var(--q-ink)}
.xq .tr{margin:4px 0 0;font-size:calc(var(--fz) * var(--wf) * 17.5px)}
.xq .lab{display:block;font-family:var(--urdu);font-size:13px;line-height:2;color:var(--soft)}
.arl{margin:10px 0;text-align:center;font-family:var(--quran);font-size:calc(var(--fz) * var(--wf) * 24px);line-height:2;color:var(--acc-l)}
.orn{margin:16px 0 0;text-align:center;font-family:var(--quran);font-size:22px;letter-spacing:.3em;color:var(--acc)}
.fnr{font-family:var(--ui);font-size:.7em;font-weight:700;color:var(--acc-l);text-decoration:none;vertical-align:super;padding:0 2px}
.fns{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--rule);font-family:var(--urdu);font-size:calc(var(--fz) * var(--wf) * 14.5px);line-height:2.1;color:var(--soft)}
.fns p{margin:0;scroll-margin-top:150px}
.fns .ar{font-family:inherit;color:inherit;font-size:inherit}
.fns a{color:var(--acc-l);text-decoration:none}
.done-row{display:flex;justify-content:center;margin-top:18px}
.mark{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--acc);background:none;color:var(--acc-l);font-family:var(--urdu);font-size:15px;line-height:1.9;cursor:pointer}
.mark svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mark[aria-pressed="true"]{background:var(--acc);color:#3a0410}
html.mqj-light .mark{color:#7c1124;border-color:#7c1124}
html.mqj-light .mark[aria-pressed="true"]{background:#7c1124;color:#f6e4b8}
.hd.hit .hh{animation:hit 2.8s ease-out}
.u.hit{animation:hit 2.8s ease-out;border-radius:12px}
@keyframes hit{0%,35%{background:color-mix(in srgb,var(--acc) 26%,transparent)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.hd.hit .hh,.u.hit,.ayat .aa.hit{animation:none}}
main.tr-only :is(.x,.poem,.hdx,.xq,.fns,.arl,.orn,.u h3:not(.un),.intro,.pre,.rq,.rq+.tr){display:none!important}
main.tr-only .u+.u{margin-top:6px;padding-top:10px}
.pnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:12px;max-width:var(--rw);margin:clamp(20px,4vh,40px) auto clamp(30px,5vh,50px)}
.pnav>a,.pnav>span{display:flex;flex-direction:column;justify-content:center;min-height:84px;padding:8px 20px;border-radius:18px;text-decoration:none;transition:transform .25s,border-color .25s,background-color .25s}
.pnav>a:hover{transform:translateY(-2px)}
.pnav .pv{align-items:flex-start;border:1px solid var(--box-b);background:var(--box);color:var(--ink)}
.pnav .pv:hover{border-color:var(--acc)}
.pnav .nx{align-items:flex-end;border:1px solid var(--gold);background:var(--gold);color:#3a0410}
.pnav .nx:hover{background:var(--gold-l)}
.pnav .dir{display:inline-flex;align-items:center;gap:6px;font-family:var(--urdu);font-size:14.5px;line-height:1.9;opacity:.85}
.pnav .dir svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pnav b{font-family:var(--urdu);font-weight:600;font-size:17px;line-height:2}
.pnav b.ar{font-family:var(--quran);font-weight:400;font-size:24px;line-height:1.5}
.pnav .all{align-self:center;align-items:center;min-height:52px;padding:0 24px;border-radius:999px;border:1px solid var(--acc);color:var(--acc-l);font-family:var(--urdu);font-size:16px;line-height:1.9}
.pnav .all:hover{background:var(--rule)}
.pnav .none{border:0}
html.mqj-light .pnav .all{color:#7c1124;border-color:#7c1124}
.foot{direction:ltr}
.vp{padding:0;border:0;background:none;color:#f6e4b8;width:min(1100px,94vw,calc((100dvh - 160px) * 16 / 9));max-width:none;max-height:none;overflow:visible}
.vp::backdrop{background:rgba(18,2,6,.9)}
.vp-top{display:flex;align-items:center;gap:12px;padding-bottom:10px;direction:rtl}
.vp-top div{flex:1;min-width:0}
.vp h2{margin:0;font-family:var(--urdu);font-weight:600;font-size:clamp(17px,2vw,22px);line-height:2;color:#f6e4b8;overflow-wrap:anywhere}
.vp-sub{margin:0;font-family:var(--urdu);font-size:14px;line-height:2;color:#d9b261}
.vp-x{flex:none;display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid rgba(217,178,97,.55);background:rgba(0,0,0,.35);color:#f6e4b8;cursor:pointer}
.vp-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vp-frame{position:relative;width:100%;aspect-ratio:16/9;max-width:100%;background:#000;border-radius:14px;overflow:hidden;border:1px solid rgba(217,178,97,.35)}
.vp-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vp-bot{padding-top:12px;text-align:center}
.vp-bot a{font-family:var(--urdu);font-size:14px;line-height:2;color:#d9b261}
html:has(.vp[open]){overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  html:not(.still) .head::after{animation:bookIn 1.4s cubic-bezier(.2,.75,.2,1) both}
  html:not(.still) .head .bism{animation:inkIn 1.4s ease .1s both}
  html:not(.still) .head .tz-badge{animation:starIn 1s cubic-bezier(.2,.75,.2,1) .15s both}
  html:not(.still) .head h1{animation:nameIn 1s cubic-bezier(.2,.75,.2,1) .35s both}
  html:not(.still) .head .tz-ay{animation:writeIn 1.6s cubic-bezier(.45,0,.2,1) .6s both}
  html:not(.still) .head .tz-ay::after{transform-origin:right;animation:lineIn 1s ease 2s both}
  html:not(.still) .head .mean{animation:fadeUp .9s ease 1.2s both}
  html:not(.still) .head .tools{animation:fadeUp .9s ease 1.35s both}
}
@keyframes bookIn{from{opacity:0;scale:.3 1}}
@keyframes starIn{from{opacity:0;rotate:-90deg;scale:.5}}
@keyframes writeIn{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes lineIn{from{transform:scaleX(0)}}
@keyframes ornIn{from{opacity:0;scale:.55;rotate:-40deg}}
@keyframes turn{to{rotate:360deg}}
@keyframes inkIn{from{opacity:0;filter:blur(6px)}}
@keyframes nameIn{from{opacity:0;translate:0 18px;filter:blur(4px)}}
@keyframes fadeUp{from{opacity:0;translate:0 12px}}
@media print{
  @page{size:A4;margin:14mm 14mm 16mm}
  html,body{background:#fff!important}
  body,html.mqj-light body{--ink:#111;--x-ink:#111;--tr-ink:#111;--soft:#444;--acc:#555;--acc-l:#5a0a18;--rule:#bbb;--box:#fff;--box-b:#999;
    --q-bg:#fbf4e4;--q-b:#c9a85c;--q-ink:#3a0410;--hd-bg:#eef7f0;--hd-b:#9ccbab;--hd-ink:#163c27;--hd-ar:#163c27;--po-bg:#fbf3f3;--po-b:#dcb3b9;--po-ink:#4a1520;--iq-bg:#f7ecd2;--iq-line:#c9a85c;--iq-ink:#3a0410}
  .bar,.tools,.hbar,.key,.vid,.pnav,.foot,.vp,.head::after,.uh .ib,.fold,.done-row,.resume,.sp{display:none!important}
  .ayat.folded{max-height:none;-webkit-mask:none;mask:none}
  .head{border-image:none!important;padding:0 0 8px;margin-bottom:12px;border-bottom:2px solid #111}
  .head *{color:#111!important;animation:none!important}
  .tz-badge::before,.tz-ay::after{display:none}.tz-badge{width:auto;height:auto;filter:none}
  .hd{padding-bottom:16px}.hd+.hd{padding-top:20px}
  .hh,html.mqj-light .hh{background:none;box-shadow:none;border-color:#999}
  .qa,.rq,.tr,.poem,.xq,.arl,.hh,.hdx{break-inside:avoid}.hh,.uh{break-after:avoid}
}
@media (max-width:640px){
  .tz-badge{width:90px;height:90px;font-size:17px}
  .stations{gap:5px}.stations a{padding:0 12px;min-height:40px}.sback{padding:0 12px;min-height:40px}
  .hh{grid-template-columns:auto auto 1fr;grid-template-areas:"sn ay ." "h2 h2 h2" "vid vid vid";gap:4px 10px;padding:10px 14px 12px}
  .hh .sn{width:42px;height:42px}.hh .sn b{font-size:17px}.hh .ay{min-width:52px;font-size:15px}.hh h2{padding-inline-start:0;transform:none}.hh .vid{justify-self:start}
  .pnav{grid-template-columns:1fr 1fr;grid-template-areas:"nx nx" "pv all"}.pnav .nx{grid-area:nx}.pnav .pv{grid-area:pv}.pnav .all{grid-area:all;align-self:stretch;border-radius:18px}
  .bar .links a{padding:8px 10px}
  .u p.x,.intro p:not(.arl),.pre p:not(.arl){text-align:right}
  .poem{padding:8px;font-size:calc(var(--fz) * 17px)}               
  .tools{gap:6px}.pill{padding:0 14px}
  .key{font-size:12.5px}.key span{padding:0 10px}
}
@media (max-width:380px){
  .lock .logo span{width:40px;height:40px}.lock .site{font-size:18px;margin-left:9px;padding-left:9px}.bar .links a{padding:8px}
}