:root{
  --ink:#1c2620;--ink-soft:#3d4a41;--paper:#f7f1e4;--paper-warm:#efe8d6;--card:#fffdf8;
  --gold:#a9852f;--green:#1f4034;--green-deep:#15261f;--line:rgba(28,38,32,.12);
  --shadow:0 18px 50px -22px rgba(28,38,32,.45);--radius:18px;--nav-h:64px;
  --font-ui:"Noto Sans Arabic","Manrope",sans-serif;
  --font-ur:"Gulzar","Noto Nastaliq Urdu",serif;
  --font-ar:"Scheherazade New","Amiri","Noto Naskh Arabic",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-ui);background:var(--paper);color:var(--ink);line-height:1.9;text-align:right}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%231f4034' stroke-opacity='0.045'%3E%3Cpath d='M30 0l15 15-15 15-15-15z'/%3E%3Cpath d='M30 30l15 15-15 15-15-15z'/%3E%3C/g%3E%3C/svg%3E")}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;top:-4rem;right:1rem;z-index:80;background:var(--green);color:var(--paper);padding:.6rem 1rem;border-radius:8px}
.skip:focus{top:1rem}
.topbar{display:flex;justify-content:center;padding:.55rem 6vw;background:var(--green);color:var(--paper)}
.topbar .ar{font-family:"Amiri","Scheherazade New",serif}
.sitenav{position:sticky;top:0;z-index:40;display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem 1.6rem;min-height:var(--nav-h);padding:.55rem 6vw;background:rgba(247,241,228,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.sitenav a{text-decoration:none;color:var(--ink-soft);font-family:var(--font-ui);font-weight:500;font-size:1rem;min-height:44px;display:inline-flex;align-items:center}
.sitenav a[aria-current="page"]{color:var(--green);box-shadow:inset 0 -2px 0 var(--gold)}
.hero{text-align:center;padding:2.8rem 6vw 2.6rem;background:linear-gradient(180deg,var(--green-deep),var(--green));color:var(--paper)}
.hero h1{font-family:var(--font-ur);font-weight:400;font-synthesis:none;font-size:clamp(2.6rem,7.5vw,4.2rem);margin:.15rem 0 .35rem;line-height:1.9}
.hero p{margin:.15rem 0;font-family:var(--font-ur);font-weight:400;font-synthesis:none;font-size:1.28rem;line-height:2.2}
.hero .actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.hero .actions a{text-decoration:none;border:1px solid rgba(255,253,248,.35);border-radius:999px;padding:.45rem 1rem;min-height:44px;display:inline-flex;align-items:center}
.hero .actions a.primary{background:var(--paper);color:var(--green)}
.wrap{max-width:860px;margin:0 auto;padding:0 6vw 4rem}
.intro{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.35rem 1.4rem 1.5rem;margin-top:-1.2rem;position:relative;box-shadow:var(--shadow);font-family:var(--font-ur);font-weight:400;font-synthesis:none;font-size:1.28rem;line-height:2.55}
.tools{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0;align-items:center}
.tools input{font-family:var(--font-ur);font-weight:400;font-synthesis:none;font-size:1.12rem;line-height:2;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.45rem 1.1rem;min-height:48px;color:var(--ink)}
.tools input[type="search"]{flex:1;min-width:180px}
.tools button{font-family:var(--font-ur);font-weight:400;font-synthesis:none;font-size:1.12rem;line-height:2;background:var(--green);color:var(--paper);border:0;border-radius:999px;padding:.4rem 1.35rem;min-height:48px;cursor:pointer;white-space:nowrap}
nav.book{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.4rem 1rem 1rem;margin:0 0 1.2rem;box-shadow:var(--shadow)}
nav.book h2{font-family:var(--font-ur);font-weight:400;font-synthesis:none;color:var(--green);font-size:1.7rem;line-height:2.1;margin:.7rem 0 .15rem}
nav.book .hint{font-family:var(--font-ur);font-weight:400;font-synthesis:none;color:var(--ink-soft);font-size:1.12rem;line-height:2.3;margin:0 0 .5rem}
nav.book details{border-top:1px solid var(--line)}
nav.book summary{cursor:pointer;font-family:var(--font-ur);font-weight:400;font-synthesis:none;color:var(--green);font-size:1.32rem;line-height:2.2;min-height:52px;display:flex;align-items:center}
nav.book a{display:flex;justify-content:space-between;gap:1rem;text-decoration:none;padding:.7rem .3rem;border-radius:10px;font-family:var(--font-ur);font-weight:400;font-synthesis:none;font-size:1.18rem;line-height:2.5}
nav.book a b{color:var(--gold);font-weight:400}
nav.book a:hover,nav.book a.on{background:var(--paper-warm)}
.chapter{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.35rem 1.45rem 1.6rem;margin:0 0 1rem;box-shadow:var(--shadow);scroll-margin-top:7.2rem}
.chapter[hidden]{display:none}
.chapter h2{font-family:var(--font-ur);font-weight:400;font-synthesis:none;color:var(--green);font-size:1.9rem;line-height:2.2;margin:.25rem 0 .55rem;border-right:4px solid var(--gold);padding-right:.7rem}
.chapter h3{font-family:var(--font-ur);font-weight:400;font-synthesis:none;color:var(--green);font-size:1.42rem;line-height:2.2;margin:1.25rem 0 .35rem}
.chapter p{font-family:var(--font-ur);font-weight:400;font-synthesis:none;font-size:1.32rem;line-height:2.65;margin:.85rem 0}
.chapter p.ar{font-family:var(--font-ar);font-size:1.85rem;line-height:2.15;text-align:center;margin:1.15rem 0}
.chapter span.ar{font-family:var(--font-ar);font-size:1.28em;line-height:2;font-weight:400;font-synthesis:none}
.pg{display:inline-block;color:var(--gold);font-family:var(--font-ur);font-weight:400;font-synthesis:none;font-size:1rem;line-height:2;text-decoration:none;margin:.35rem 0;scroll-margin-top:7.2rem}
#found{font-family:var(--font-ur);font-weight:400;font-synthesis:none;font-size:1.05rem;line-height:2}
.reading{position:sticky;top:var(--nav-h);z-index:35;background:rgba(247,241,228,.95);border-bottom:1px solid var(--line);padding:.75rem 6vw .85rem;font-family:var(--font-ur);font-weight:400;font-synthesis:none;font-size:1.15rem;line-height:2;color:var(--green)}
footer{background:var(--green-deep);color:var(--paper);text-align:center;padding:2.2rem 6vw 2.4rem;font-family:var(--font-ur);font-weight:400;font-synthesis:none;font-size:1.2rem;line-height:2.3}
footer a{color:#e6d3a1;margin:0 .55rem}
.totop{position:fixed;left:1rem;bottom:1rem;width:46px;height:46px;border-radius:50%;background:var(--card);color:var(--green);border:1px solid var(--line);cursor:pointer}
@media (max-width:640px){
  :root{--nav-h:122px}
  .sitenav{gap:.5rem .9rem}
  .sitenav a{font-size:.92rem}
  .intro{font-size:1.16rem;line-height:2.5}
  .chapter,.pg{scroll-margin-top:13.5rem}
  .chapter p{font-size:1.16rem;line-height:2.55}
  .chapter p.ar{font-size:1.55rem;line-height:2.1}
  .chapter h2{font-size:1.55rem}
  .tools{align-items:stretch}
  #jump{display:flex;gap:.6rem;width:100%}
  #jump input{flex:1;min-width:0}
  .tools input[type="search"]{flex:1 1 100%}
}
.hero.slim{padding:1.5rem 6vw 1.7rem}
.hero.slim h1{font-size:clamp(1.9rem,5vw,2.8rem);margin-bottom:.15rem}
.pager{display:flex;justify-content:space-between;gap:.6rem;margin:0 0 1rem;flex-wrap:wrap}
.pager a{font-family:var(--font-ur);font-weight:400;font-synthesis:none;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.4rem 1.05rem;min-height:48px;display:inline-flex;align-items:center;line-height:2;font-size:1.12rem}
.pager a.primary{background:var(--green);color:var(--paper);border-color:var(--green)}
.cont{font-family:var(--font-ur);font-weight:400;font-synthesis:none;color:var(--gold);margin:.15rem 0 .2rem}