/* AmalKit design system: a white port of the MotionShine system (motionshine.com).
   Same structure, type, spacing, tool workspace and blog layout. Lapis and gold replace MotionShine purple. */

/* ---------------------------------------------------------------- Fonts ---- */
@font-face{font-family:"Geist";font-weight:400 600;font-display:swap;src:url(/fonts/geist-latin.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400 600;font-display:swap;src:url(/fonts/geist-mono-latin.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400 500;font-display:swap;src:url(/fonts/source-serif-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013,U+2018-201D,U+2026}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400 500;font-display:swap;src:url(/fonts/source-serif-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BB-02BC,U+02BE-02BF,U+0304,U+0323,U+1E00-1EFF}
@font-face{font-family:"Amiri Quran";font-weight:400;font-display:swap;src:url(/fonts/amiri-quran-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}

/* --------------------------------------------------------------- Tokens ---- */
:root{
  --page:#FFFFFF; --surface:#FAFAFA; --raised:#F2F2F3; --line:#E4E4E7; --line-soft:#EFEFF1;
  --text:#0A0A0A; --muted:#5C5C5C; --faint:#737373;
  --lapis:#1D3A8A; --lapis-deep:#132A66; --lapis-hi:#3B5BC4; --lapis-tint:#EEF2FB;
  --gold:#C99A2E; --gold-soft:#E9D3A0; --gold-ink:#7A5A12; --gold-tint:#FBF5E6;
  --brand:var(--lapis); --brand-gradient:linear-gradient(90deg,var(--lapis),var(--lapis-hi));
  --ok:#15803D; --ok-tint:#ECFDF3; --bad:#B42318; --warn:#92400E; --warn-tint:#FFF7E6;
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --translit:"Source Serif 4",Georgia,serif;
  --arabic:"Amiri Quran","Amiri","Noto Naskh Arabic",serif;
  --w:80.5rem; --gutter:1rem; --cell:2.25rem; --section:7.5rem; --r1:4px; --r2:8px; --r3:12px;
  --ring:0 0 0 3px rgba(29,58,138,.22);
  --ease:cubic-bezier(.2,.6,.2,1); --ease-out:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
@media (max-width:991px){:root{--section:6rem}}
@media (max-width:767px){:root{--section:4.5rem;--cell:1.5rem}}

/* ----------------------------------------------------------------- Base ---- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{min-height:100vh;background:var(--page);color:var(--text);font:400 1rem/1.5 var(--font);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--lapis);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--text);color:var(--page);padding:.5rem .875rem;border-radius:var(--r1)}
.u-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------------------------------------------------------------- Frame ---- */
.page{position:relative;overflow-x:clip}
.wrap{max-width:calc(var(--w) + 2 * var(--gutter));margin-inline:auto;padding-inline:calc(var(--gutter) + var(--cell))}
.section{position:relative;padding-block-start:var(--section)}
.section.is-last{padding-block-end:var(--section)}
.section.is-tint{background:var(--surface);padding-block:var(--section);margin-block-start:var(--section)}
.section.is-tint + .section{padding-block-start:var(--section)}

/* ----------------------------------------------------------------- Type ---- */
.h1{font-size:clamp(2.5rem,1.6rem + 3.6vw,4.25rem);line-height:1.02;font-weight:500;letter-spacing:-.038em;text-wrap:balance}
.h2{font-size:clamp(1.875rem,1.35rem + 1.9vw,2.625rem);line-height:1.1;font-weight:500;letter-spacing:-.032em;text-wrap:balance}
.h3{font-size:1.25rem;line-height:1.3;font-weight:500;letter-spacing:-.022em}
.lede{font-size:1.0625rem;line-height:1.6;color:var(--muted);text-wrap:pretty}
.muted{color:var(--muted)}
.note{font-size:.8125rem;line-height:1.5;color:var(--muted)}
.mono{font-family:var(--mono)}
.accent{color:var(--lapis)}
.fade{background:linear-gradient(180deg,#2E2E2E 0%,#9C9C9C 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font:400 .8125rem/1.4 var(--mono);color:var(--muted)}
.eyebrow::before{content:"// "}
.eyebrow.is-chip,.head > .eyebrow,.page_head .eyebrow{display:inline-flex;align-items:center;gap:.5rem;width:fit-content;height:1.75rem;padding:0 .625rem;border-radius:var(--r1);
  font:400 .6875rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#2B2B2B;box-shadow:inset 0 0 0 1px rgba(10,10,10,.14)}
.eyebrow.is-chip::before,.head > .eyebrow::before,.page_head .eyebrow::before{content:"";width:.4375rem;height:.4375rem;flex:none;border-radius:1.5px;background:var(--gold);box-shadow:0 0 0 2px rgba(201,154,46,.18),0 0 8px rgba(201,154,46,.55)}
.page_head .eyebrow a{color:inherit}
.head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:clamp(2rem,6vw,6rem);align-items:end}
.head .eyebrow{grid-column:1/-1;justify-self:start}
.head .h2{margin-block-start:1.25rem;grid-column:1;font-size:clamp(2rem,1.3rem + 2.4vw,3.25rem);line-height:1.08}
.head .h2 .fade{display:block}
.head .lede{grid-column:2;max-width:34rem;justify-self:end;padding-block-end:.25rem}
@media (max-width:899px){.head{grid-template-columns:1fr}.head .lede{grid-column:1;justify-self:start;margin-block-start:1.125rem}}
.head + *{margin-block-start:3.5rem}
.inline a,.prose a,.faq .a a,.note a{color:var(--lapis);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(29,58,138,.3)}
.inline a:hover,.prose a:hover,.faq .a a:hover,.note a:hover{text-decoration-color:var(--lapis)}

/* -------------------------------------------------------------- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.75rem;padding:0 1.25rem;border-radius:var(--r1);border:1px solid var(--text);
  background:var(--text);color:var(--page);font:500 .9375rem/1 var(--font);letter-spacing:-.01em;cursor:pointer;white-space:nowrap;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),translate .3s var(--ease-out)}
.btn:hover{translate:0 -1px;background:#262626}
.btn.is-ghost{background:transparent;color:var(--text);border-color:rgba(10,10,10,.16)}
.btn.is-ghost:hover{background:var(--text);color:var(--page);border-color:var(--text)}
.btn.is-brand{background:var(--lapis);border-color:var(--lapis)}
.btn.is-brand:hover{background:var(--lapis-deep);border-color:var(--lapis-deep)}
.btn.is-gold{background:var(--gold);border-color:var(--gold);color:var(--lapis-deep)}
.btn.is-gold:hover{background:#B88A22;border-color:#B88A22}
.btn.is-sm{height:2.375rem;padding:0 1rem;font-size:.875rem}
.btn[disabled]{opacity:.45;cursor:not-allowed;translate:none}
.btn svg{width:1rem;height:1rem}
.btn .arr{transition:translate .2s var(--ease)}
.btn:hover .arr{translate:2px 0}
.textlink{display:inline-flex;align-items:center;gap:.4rem;font-size:.9375rem;font-weight:500;border-bottom:1px solid rgba(10,10,10,.28);padding-bottom:.15rem}
.textlink:hover{border-color:var(--text)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* --------------------------------------------------------------- Header ---- */
/* Full width bar at the top. On desktop, once you scroll, it lifts into a floating capsule. */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);
  transition:background-color .5s var(--ease),border-color .5s var(--ease)}
.header .wrap{position:relative}
.header_in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.25rem}
.header_in::before{content:"";position:absolute;inset:.1875rem 0;z-index:-1;border-radius:var(--r2);pointer-events:none;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -18px rgba(10,10,10,.22);opacity:0;transition:opacity .5s var(--ease)}
.brand{display:inline-flex;align-items:center;gap:.625rem;font-weight:600;letter-spacing:-.035em;font-size:1.125rem}
.brand_mark{width:1.75rem;height:1.75rem;flex:none}
.nav{display:flex;align-items:center;gap:.25rem}
.nav a{display:inline-flex;align-items:center;height:2.25rem;padding-inline:.85rem;border-radius:var(--r1);font-size:.875rem;color:var(--muted);transition:color .18s var(--ease),background-color .25s var(--ease)}
.nav a:hover{color:var(--text);background:var(--raised)}
.nav a[aria-current="page"]{color:var(--text)}
.nav .nav_mobile_cta{display:none}
.header_cta{display:flex;align-items:center;gap:.5rem}
.burger{display:none;width:2.5rem;height:2.5rem;border:1px solid var(--line);border-radius:var(--r1);background:none;cursor:pointer;place-items:center}
.burger svg{width:1.125rem;height:1.125rem}
@media (min-width:992px){
  html.is-scrolled .header{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .header_in{transition:translate .5s var(--ease),padding .5s var(--ease)}
  html.is-scrolled .header_in{translate:0 .5rem;padding-inline:1rem}
  html.is-scrolled .header_in::before{opacity:1}
}
@media (max-width:991px){
  .burger{display:grid}
  .header_cta .btn{display:none}
  .nav{display:none;position:absolute;top:4.25rem;left:calc(-1 * var(--cell));right:calc(-1 * var(--cell));flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--cell) 1.5rem;background:var(--page);border-bottom:1px solid var(--line);box-shadow:0 30px 40px -30px rgba(10,10,10,.25)}
  .nav[data-open="true"]{display:flex}
  .nav a{height:auto;padding:1rem 0;border-bottom:1px solid var(--line-soft);border-radius:0;font-size:1.125rem;color:var(--text)}
  .nav a:hover{background:none}
  .nav .nav_mobile_cta{display:inline-flex;margin-block-start:1.25rem;justify-content:center;border-bottom:0;padding:0;height:3rem;border-radius:var(--r1);font-size:1rem;color:var(--page)}
}

/* ------------------------------------------------------------ Page head ---- */
.page_head{position:relative;isolation:isolate;overflow:hidden;padding-block:6.5rem 0;text-align:center}
/* A soft lapis glow at the top, the white-page stand-in for MotionShine's star field. */
.page_head::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 50% 0%,rgba(29,58,138,.07),transparent 70%)}
.page_head .h1{margin:1rem auto 0;max-width:52rem;font-size:clamp(2.25rem,1.4rem + 3vw,3.75rem)}
.page_head .h1 .fade{display:block}
.page_head .lede{max-width:38rem;margin:1.25rem auto 0}
.page_head .eyebrow{margin-inline:auto}
.page_head + .section{padding-block-start:clamp(2.25rem,4.5vw,3.5rem)}
.crumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:.375rem;font:400 .75rem/1.4 var(--mono);color:var(--muted)}
.crumbs a:hover{color:var(--text)}
.crumbs li+li::before{content:"/";margin-inline-end:.375rem;color:var(--faint)}

/* ---------------------------------------------------------- Lined grids ---- */
.lined{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.lined.c2{--cols:2}.lined.c4{--cols:4}
.lined > *{border-inline-end:1px solid var(--line);border-block-end:1px solid var(--line);margin:0 -1px -1px 0;padding:var(--cell);min-width:0;background:var(--page)}
@media (max-width:991px){.lined.c3,.lined.c4{--cols:2}}
@media (min-width:768px) and (max-width:991px){.lined.c3 > :last-child:nth-child(odd){grid-column:1 / -1}}
@media (max-width:767px){.lined,.lined[class*="c"]{--cols:1}}
.cell_num{font:400 .8125rem/1 var(--mono);color:var(--faint)}
.cell .h3{margin-block-start:2.5rem}
@media (max-width:767px){.cell .h3{margin-block-start:1.25rem}}
.cell p{margin-block-start:.625rem;color:var(--muted);font-size:.9688rem;line-height:1.6}

/* --------------------------------------------------------------- Panels ---- */
.panel{position:relative;border-radius:var(--r2);overflow:hidden;background:linear-gradient(180deg,#FFFFFF,#F6F6F7);box-shadow:inset 0 0 0 1px rgba(10,10,10,.08),0 40px 80px -40px rgba(10,10,10,.25)}
.panel_pad{position:relative;padding:clamp(1.25rem,3vw,2rem)}
/* Lapis panel: the signature surface (trainer, Today, Ramadan). Gold hairline frame inside. */
.panel.is-lapis{background:linear-gradient(180deg,#22419A,var(--lapis));color:#fff;box-shadow:0 40px 80px -40px rgba(19,42,102,.6)}
.panel.is-lapis.is-deep{background:linear-gradient(180deg,#183273,var(--lapis-deep))}
.panel.is-lapis::before{content:"";position:absolute;inset:8px;border:1px solid rgba(233,211,160,.42);border-radius:4px;pointer-events:none}
.panel.is-lapis :focus-visible{outline-color:var(--gold-soft)}

/* --------------------------------------------------------------- Badges ---- */
.badge{display:inline-flex;align-items:center;height:1.375rem;padding:0 .45rem;border-radius:5px;font:500 .625rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:var(--raised);color:#3A3A3A}
.badge.is-ready{background:var(--ok-tint);color:var(--ok);box-shadow:inset 0 0 0 1px rgba(21,128,61,.25)}
.badge.is-soon{background:var(--lapis-tint);color:var(--lapis);box-shadow:inset 0 0 0 1px rgba(29,58,138,.2)}
.badge.is-hanafi{background:var(--gold-tint);color:var(--gold-ink);box-shadow:inset 0 0 0 1px rgba(201,154,46,.4)}
.badge.is-draft{background:var(--warn-tint);color:var(--warn);box-shadow:inset 0 0 0 1px rgba(146,64,14,.25)}

/* ------------------------------------------------------------ Tool cards ---- */
.toolcards{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.tc{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;padding:1rem 2.25rem 1rem 1rem;border-radius:var(--r3);
  background:linear-gradient(180deg,#FFFFFF 0%,#FAFAFA 100%);box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(10,10,10,.04);color:var(--text);
  transition:box-shadow .2s var(--ease),background .2s var(--ease),translate .2s var(--ease)}
a.tc::after{content:"";position:absolute;top:1.25rem;right:1.125rem;width:.875rem;height:.875rem;background:var(--faint);opacity:.6;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:opacity .2s var(--ease),translate .2s var(--ease),background-color .2s}
a.tc:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(29,58,138,.45),0 18px 40px -22px rgba(29,58,138,.45)}
a.tc:hover::after{opacity:1;translate:2px 0;background:var(--lapis)}
.tc_icon{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:10px;color:#1F1F1F;background:linear-gradient(180deg,#FFFFFF,#F1F1F3);
  box-shadow:inset 0 0 0 1px rgba(10,10,10,.09),inset 0 -1px 0 rgba(10,10,10,.04),0 4px 12px -6px rgba(10,10,10,.25);transition:color .2s,box-shadow .2s,background .2s}
a.tc:hover .tc_icon{color:var(--lapis);background:linear-gradient(180deg,#F4F7FE,#E3EAFA);box-shadow:inset 0 0 0 1px rgba(29,58,138,.35),0 4px 12px -6px rgba(29,58,138,.4)}
.tc_svg{width:1.5rem;height:1.5rem}
.tc_body{display:grid;gap:.3rem;min-width:0;padding-block-start:.1rem}
.tc h3{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0;font-size:1rem;font-weight:500;line-height:1.3;letter-spacing:-.015em}
.tc p{margin:0;font-size:.875rem;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
div.tc{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-soft)}
div.tc .tc_icon{color:#8A8A8A}
div.tc h3{color:#3A3A3A}

/* ------------------------------------------------- Tools hub: search, filter ---- */
.tool_cats{display:flex;gap:.5rem;margin-block-start:1.5rem;overflow-x:auto;scrollbar-width:none;margin-inline:-1rem;padding-inline:1rem;justify-content:center}
.tool_cats::-webkit-scrollbar{display:none}
.tool_cats a{padding:.4rem .8rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:.875rem;white-space:nowrap;transition:background .2s}
.tool_cats a:hover{background:var(--surface)}
.tools_bar{position:sticky;top:4.25rem;z-index:30;display:grid;grid-template-columns:minmax(14rem,20rem) minmax(0,1fr);align-items:center;gap:.75rem;
  margin-inline:calc((var(--gutter) + var(--cell)) * -1);margin-block-end:clamp(2rem,4vw,3rem);padding:.625rem calc(var(--gutter) + var(--cell));transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
@media (min-width:992px){html.is-scrolled .tools_bar{top:5.25rem}}
.tools_bar[data-stuck="true"]{background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
@media (max-width:767px){.tools_bar{grid-template-columns:minmax(0,1fr)}}
.tools_search{position:relative;display:flex;align-items:center;width:100%}
.tools_search > svg{position:absolute;left:1rem;width:1.0625rem;height:1.0625rem;color:var(--muted);pointer-events:none}
.tools_search input{width:100%;height:2.75rem;padding:0 3rem 0 2.75rem;border-radius:999px;border:1px solid var(--line);background:linear-gradient(180deg,#FFFFFF,#FAFAFA);font:400 1rem/1 var(--font);outline:none;
  box-shadow:0 10px 30px -18px rgba(10,10,10,.35);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.tools_search input::placeholder{color:#8A8A8A}
.tools_search input:hover{border-color:#CFCFD4}
.tools_search input:focus{border-color:var(--lapis);box-shadow:0 0 0 4px rgba(29,58,138,.14)}
.tools_search input::-webkit-search-cancel-button{-webkit-appearance:none}
.tools_search kbd{position:absolute;right:.75rem;display:grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .35rem;border-radius:6px;font:400 .75rem/1 var(--mono);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;transition:opacity .15s}
.tools_search input:focus + kbd,.tools_search input:not(:placeholder-shown) + kbd{opacity:0}
@media (max-width:767px){.tools_search kbd{display:none}}
.tools_filter{display:flex;gap:.375rem;overflow-x:auto;padding-block:2px;scrollbar-width:none}
.tools_filter::-webkit-scrollbar{display:none}
.tools_filter button{flex:none;display:inline-flex;align-items:center;gap:.45rem;height:2.25rem;padding:0 .875rem;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:#2B2B2B;font:400 .875rem/1 var(--font);cursor:pointer;transition:background-color .15s,box-shadow .15s,color .15s}
.tools_filter button:hover{background:var(--surface);box-shadow:inset 0 0 0 1px #CFCFD4}
.tools_filter button span{font:400 .6875rem/1 var(--mono);color:var(--faint);font-variant-numeric:tabular-nums}
.tools_filter button[aria-pressed="true"]{background:var(--text);color:#fff;box-shadow:none}
.tools_filter button[aria-pressed="true"] span{color:rgba(255,255,255,.6)}
.tools_empty{padding:3rem 1rem;text-align:center;color:var(--muted)}
.tools_group{display:grid;gap:1.25rem;margin-block-start:clamp(3rem,6vw,4.5rem)}
.tools_group.is-first{margin-block-start:0}
.tools_group[hidden],.tc[hidden]{display:none}
.tools_group_head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1.5rem;padding-block-end:.875rem;border-bottom:1px solid var(--line)}
.tools_group_head .h3{display:flex;align-items:center;gap:.625rem;font-size:1.375rem;letter-spacing:-.025em}
.tools_group_n{display:inline-grid;place-items:center;min-width:1.625rem;height:1.375rem;padding:0 .4rem;border-radius:999px;background:var(--raised);font:400 .6875rem/1 var(--mono);color:var(--muted);letter-spacing:0}
.tools_group_head p{color:var(--muted);font-size:.9375rem}

/* ------------------------------------------------------- Tool workspace ---- */
.tool{display:grid;gap:1.25rem;padding:clamp(1rem,3vw,2rem);border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.tool [hidden]{display:none!important}
.tool_ws{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;align-items:start}
.tool_ws > *,.tool > *{min-width:0}
.tool_main{display:grid;gap:.75rem;min-width:0}
.tool_side{display:grid;gap:1rem;align-content:start}
@media (min-width:1024px){
  .tool_ws{grid-template-columns:minmax(0,1fr) 19.5rem;gap:1.5rem}
  .tool_side{position:sticky;top:6rem;padding:1.25rem;border-radius:14px;background:var(--page);box-shadow:inset 0 0 0 1px var(--line),0 20px 40px -30px rgba(10,10,10,.25);
    max-height:calc(100vh - 7rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#CFCFD4 transparent}
}
.tool_side_t{font:400 .6875rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.tool_grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.tool_side .tool_grid{grid-template-columns:1fr}
.tool_row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.tool_side .tool_row{display:grid;gap:.5rem}
.tool_side .tool_row .btn{width:100%}
.tool_field{position:relative;display:block;min-width:0}
.tool_label{display:block;margin-block-end:.55rem;font:400 .6875rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.tool_label b,.tool_label output{color:var(--text);font-weight:400;font-variant-numeric:tabular-nums}
.tool_field select,.tool_field textarea,.tool_field input[type=text],.tool_field input[type=number],.tool_field input[type=search],.tool_field input[type=date]{
  width:100%;min-height:2.75rem;padding:.6rem .85rem;border-radius:var(--r2);border:1px solid var(--line);background:var(--page);font:400 .9375rem/1.4 var(--font);
  box-shadow:0 1px 2px rgba(10,10,10,.05);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.tool_field select{padding-inline-end:2.25rem;background:var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 6.25 3.5 3.5 3.5-3.5' fill='none' stroke='%235C5C5C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .75rem center/1rem no-repeat}
.tool_field select:hover,.tool_field textarea:hover,.tool_field input:hover{border-color:#CFCFD4}
.tool_field select:focus-visible,.tool_field textarea:focus-visible,.tool_field input:focus-visible{outline:none;border-color:var(--lapis);box-shadow:var(--ring)}
.tool_field input::placeholder,.tool_field textarea::placeholder{color:#8A8A8A}
.tool_field input[type=number]{font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.tool_field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
.tool_field textarea{min-height:10rem;resize:vertical;line-height:1.6}
.tool input[type=range]{--f:.5;--knob:1.125rem;display:block;width:100%;height:2.75rem;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.tool input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--brand-gradient) 0 0/calc(var(--knob) / 2 + (100% - var(--knob)) * var(--f)) 100% no-repeat,#DCDCE0}
.tool input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:#DCDCE0}
.tool input[type=range]::-moz-range-progress{height:4px;border-radius:999px;background:var(--brand-gradient)}
.tool input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--knob);height:var(--knob);margin-top:calc((4px - var(--knob)) / 2);border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.25),0 1px 4px rgba(0,0,0,.3);transition:box-shadow .15s,transform .15s}
.tool input[type=range]::-moz-range-thumb{width:var(--knob);height:var(--knob);border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.25),0 1px 4px rgba(0,0,0,.3)}
.tool input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 .5px rgba(0,0,0,.25),0 1px 4px rgba(0,0,0,.3),0 0 0 5px rgba(29,58,138,.16)}
.tool input[type=range]:focus-visible{outline:none}
.tool input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 .5px rgba(0,0,0,.25),0 0 0 4px rgba(29,58,138,.45)}
/* Toggle switch */
.tool_check{display:inline-flex;align-items:center;gap:.75rem;min-height:2rem;font-size:.9375rem;color:var(--muted);cursor:pointer;user-select:none;transition:color .15s}
.tool_check:has(input:checked){color:var(--text)}
.tool_check input[type=checkbox]{position:relative;flex:none;width:2.25rem;height:1.25rem;margin:0;border-radius:999px;background:#DCDCE0;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .18s}
.tool_check input[type=checkbox]::before{content:"";position:absolute;top:2px;left:2px;width:1rem;height:1rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s var(--ease-out)}
.tool_check input[type=checkbox]:checked{background:var(--lapis)}
.tool_check input[type=checkbox]:checked::before{transform:translateX(1rem)}
.tool_check input[type=checkbox]:focus-visible{outline:none;box-shadow:var(--ring)}
/* Choice cards and radios */
.tool_choice{display:grid;gap:.5rem}
.tool_choice label{display:flex;align-items:flex-start;gap:.6rem;font-size:.9375rem;line-height:1.45;cursor:pointer}
.tool_choice small{display:block;margin-block-start:.15rem;color:var(--muted);font-size:.8125rem}
.tool_choice label:has(small){padding:.85rem 1rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .15s,box-shadow .15s}
.tool_choice label:has(small):has(:checked){background:var(--lapis-tint);box-shadow:inset 0 0 0 1px rgba(29,58,138,.55)}
.tool input[type=radio]{position:relative;flex:none;width:1.125rem;height:1.125rem;margin:.1rem 0 0;border-radius:50%;background:var(--page);cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:inset 0 0 0 1px #BDBDC4;transition:background-color .15s,box-shadow .15s}
.tool input[type=radio]:checked{background:var(--lapis);box-shadow:none}
.tool input[type=radio]:checked::before{content:"";position:absolute;inset:.3125rem;border-radius:50%;background:#fff}
.tool input[type=radio]:focus-visible{outline:none;box-shadow:var(--ring)}
/* Segmented control */
.tool_ab{display:flex;flex-wrap:wrap;gap:.5rem}
.tool_ab button{display:inline-flex;align-items:center;height:2.5rem;padding:0 1rem;border:0;border-radius:999px;background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font-size:.9375rem;cursor:pointer}
.tool_ab button[aria-pressed="true"]{background:var(--text);color:var(--page);box-shadow:none}
/* Status, answers, info */
.tool_status{display:flex;align-items:flex-start;gap:.55rem;font-size:.9375rem;line-height:1.5;color:var(--muted)}
.tool_status:empty{display:none}
.tool_status[data-kind]::before{content:"";flex:none;width:.5rem;height:.5rem;margin-block-start:.5rem;border-radius:50%;background:#9A9A9A}
.tool_status[data-kind="ok"]{color:var(--text)}
.tool_status[data-kind="ok"]::before{background:#22A55A;box-shadow:0 0 0 3px rgba(34,165,90,.15)}
.tool_status[data-kind="bad"]{color:var(--bad)}
.tool_status[data-kind="bad"]::before{background:var(--bad);box-shadow:0 0 0 3px rgba(180,35,24,.12)}
.tool_answer{display:grid;gap:.4rem;padding:1.25rem 1.5rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
.tool_answer b{font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.tool_info{display:grid;gap:.5rem 2rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.tool_info > div{display:grid;gap:.15rem}
.tool_info dt{font:400 .6875rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.tool_info dd{margin:0;font-size:.9375rem}
.tool_privacy{position:relative;margin-block-start:1rem;padding-inline-start:1.1rem;font-size:.875rem;color:var(--muted)}
.tool_privacy::before{content:"";position:absolute;left:0;top:.45rem;width:.5rem;height:.5rem;border-radius:50%;background:#22A55A}
.tool_privacy a{text-decoration:underline;text-underline-offset:2px}
.sw_keys{display:grid;gap:.375rem}
.sw_keys > div{display:flex;justify-content:space-between;gap:1rem;font-size:.8125rem}
.sw_keys dt{font:400 .75rem/1.6 var(--mono);color:var(--text)}
.sw_keys dd{margin:0;color:var(--muted);text-align:right}
.tool_related{margin-block-start:clamp(2.5rem,5vw,3.5rem);padding-block-start:1.5rem;border-top:1px solid var(--line)}
.tool_related_t{font:500 .8125rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem}
.tool_links{display:grid;gap:.625rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.tool_links a{display:block;padding:.875rem 1rem;border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:.9375rem;line-height:1.35;transition:background-color .2s,box-shadow .2s}
.tool_links a:hover{background:var(--page);box-shadow:inset 0 0 0 1px rgba(29,58,138,.4)}

/* ------------------------------------------------- Ayah and dua blocks ---- */
.verse{display:grid;gap:1rem;padding:clamp(1.25rem,3vw,2rem);border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
.verse_head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.verse .verse_ar{direction:rtl;text-align:right;font:400 clamp(1.75rem,1.3rem + 1.6vw,2.5rem)/2 var(--arabic);color:var(--text)}
.verse .verse_tr,.verse_tr{font:italic 400 1.125rem/1.5 var(--translit);color:var(--lapis)}
.verse .verse_en{font-size:1rem;line-height:1.6;color:#2B2B2B}
.verse .verse_src{font:400 .75rem/1.4 var(--mono);color:var(--muted);padding-block-start:.75rem;border-top:1px solid var(--line-soft)}
.icon-btn{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--r1);border:0;background:var(--raised);cursor:pointer;color:var(--text)}
.icon-btn:hover{background:var(--line)}
.icon-btn svg{width:1rem;height:1rem}

/* ---------------------------------------------------------- Madhhab note ---- */
.madhhab{border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--line);background:var(--page);overflow:hidden}
.madhhab_main{display:grid;gap:.5rem;padding:1.25rem 1.25rem 1.25rem 1.5rem;box-shadow:inset 3px 0 0 var(--gold)}
.madhhab_main .badge{justify-self:start}
.madhhab details{border-top:1px solid var(--line)}
.madhhab summary{display:flex;justify-content:space-between;align-items:center;padding:.875rem 1.5rem;cursor:pointer;font-size:.875rem;font-weight:500;list-style:none}
.madhhab summary::-webkit-details-marker{display:none}
.madhhab summary::after{content:"+";font:400 1rem/1 var(--mono);color:var(--muted)}
.madhhab details[open] summary::after{content:"\2212"}
.madhhab dl{display:grid;gap:1rem;padding:0 1.5rem 1.25rem}
.madhhab dt{font:500 .6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.madhhab dd{margin-block-start:.375rem;line-height:1.6;color:#2B2B2B}

/* --------------------------------------------------------- Times table ---- */
.times{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.times th,.times td{padding:.875rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
.times thead th{font:400 .75rem/1.3 var(--mono);color:var(--muted);background:var(--surface)}
.times td:last-child,.times th:last-child{text-align:right}
.times td.t{font:500 1.0625rem/1 var(--mono);letter-spacing:-.02em}
.times tr.is-next td{background:var(--lapis-tint)}
.times tr.is-next td:first-child{box-shadow:inset 3px 0 0 var(--lapis);font-weight:500}
.count{display:flex;gap:clamp(1.25rem,4vw,2.5rem)}
.count b{display:block;font:500 clamp(3rem,2rem + 4vw,5rem)/1 var(--font);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.count small{font:400 .6875rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.panel.is-lapis .count b{color:var(--gold-soft)}
.panel.is-lapis .count small{color:rgba(255,255,255,.75)}

/* ----------------------------------------------------------------- Prose ---- */
.prose{max-width:44rem;margin-inline:auto}
.prose > * + *{margin-block-start:1.1rem}
.prose h2{font-size:1.5rem;line-height:1.2;font-weight:500;letter-spacing:-.025em;margin-block-start:2.75rem}
.prose h3{font-size:1.125rem;font-weight:500;margin-block-start:1.75rem}
.prose ul{list-style:disc;padding-inline-start:1.25rem;display:grid;gap:.4rem}
.prose ol{list-style:decimal;padding-inline-start:1.25rem;display:grid;gap:.4rem}
.prose p,.prose li{line-height:1.7;color:#2B2B2B}
.prose strong{font-weight:500;color:var(--text)}
.prose blockquote{padding-inline-start:1.25rem;box-shadow:inset 2px 0 0 var(--gold)}
.prose .callout{padding:1rem 1.25rem;border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--line);background:var(--surface)}
.prose .verse,.prose .madhhab{margin-block:1.75rem}
.tool_guide{margin-inline:0;max-width:46rem}
kbd{font:500 .8125rem var(--mono);padding:.1rem .45rem;border-radius:var(--r1);box-shadow:inset 0 0 0 1px var(--line);background:var(--raised)}

/* ------------------------------------------------------------------ Blog ---- */
.post_meta{margin:1.5rem auto 0;font:400 .8125rem/1.4 var(--mono);color:var(--muted)}
.post_meta .badge{vertical-align:2px;margin-inline-start:.5rem}
.post_group + .post_group{margin-block-start:4rem}
.post_group_head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;margin-block-end:1.5rem}
.post_group_head p{color:var(--muted);max-width:32rem}
.post_card{display:flex;flex-direction:column;transition:background .2s}
.post_card:hover{background:var(--surface)}
.post_card_img{display:block;width:100%;height:auto;aspect-ratio:1200/630;border-radius:var(--r1);margin-block-end:1.5rem;box-shadow:0 0 0 1px var(--line)}
.post_card .h3{margin-block-start:1.25rem}
.post_card .post_card_meta{margin-block-start:auto;padding-block-start:1.5rem;font:400 .75rem/1 var(--mono);color:var(--muted)}
.post_body{max-width:46rem;margin-inline:auto}
.post_body p,.post_body li{font-size:1.0625rem}
.post_body h2{margin-block-start:3.5rem;padding-block-start:2.25rem;border-top:1px solid var(--line);font-size:1.625rem;scroll-margin-top:6rem}
.post_body h3{scroll-margin-top:6rem}
.post_body code{font:500 .875em var(--mono);padding:.1rem .35rem;border-radius:var(--r1);background:var(--raised)}
.post_toc{padding:1.25rem 1.5rem;border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.post_toc > p{font:400 .6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.post_body .post_toc ul{margin-block-start:.9rem;columns:2 16rem;column-gap:2rem;list-style:none;padding:0;display:block}
.post_toc li{font-size:.9375rem;line-height:1.5;padding-block:.2rem;break-inside:avoid}
.post_toc a{color:var(--muted);text-decoration:none}
.post_toc a:hover{color:var(--text)}
.post_table{overflow-x:auto;border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--line)}
.post_table table{width:100%;min-width:36rem;border-collapse:collapse;font-size:.875rem}
.post_table th,.post_table td{padding:.75rem .8rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.5}
.post_table thead th{font:400 .75rem/1.3 var(--mono);color:var(--muted);background:var(--surface)}
.post_table tbody tr:last-child td{border-bottom:0}
.post_cta{display:grid;gap:.6rem;justify-items:start;padding:1.5rem;border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),inset 3px 0 0 var(--lapis)}
.post_cta .post_cta_t{font-weight:500;color:var(--text)}
.post_cta .btn{margin-block-start:.4rem;color:var(--page);text-decoration:none}
.sources{counter-reset:src;display:grid;gap:.625rem;font-size:.875rem;color:var(--muted)}
.prose ol.sources{list-style:none;padding:0}
.sources li{counter-increment:src;display:grid;grid-template-columns:2rem 1fr;font-size:.875rem;color:var(--muted)}
.sources li::before{content:"[" counter(src) "]";font:400 .75rem/1.9 var(--mono);color:var(--faint)}
.review{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;padding:1rem 1.25rem;border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:.875rem;color:var(--muted)}
.post_rail{display:none}
.docs_nav{position:sticky;top:6rem;display:grid;gap:.1rem;font-size:.9063rem}
.docs_nav p{font:400 .6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-block:0 .6rem;padding-inline-start:.75rem}
.docs_nav a{padding:.4rem .75rem;color:var(--muted);box-shadow:inset 1px 0 0 var(--line);transition:color .2s,box-shadow .2s}
.docs_nav a:hover{color:var(--text)}
.docs_nav a.is-on{color:var(--text);box-shadow:inset 2px 0 0 var(--lapis)}
@media (min-width:1200px){
  .post{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
  .post .post_rail{display:grid;max-height:calc(100vh - 8rem);overflow-y:auto}
  .post .post_toc{display:none}
  .post .post_body{max-width:46rem;margin-inline:0}
}

/* ------------------------------------------------------------------- FAQ ---- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.5rem 0;cursor:pointer;font-weight:500;font-size:1.0625rem;letter-spacing:-.015em;list-style:none;color:#2B2B2B;transition:color .2s}
.faq summary:hover,.faq details[open] summary{color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:2rem;height:2rem;border-radius:var(--r1);box-shadow:inset 0 0 0 1px var(--line);
  background:linear-gradient(currentColor,currentColor) center/.75rem 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px .75rem no-repeat;transition:background-size .35s var(--ease-out),background-color .25s,color .25s,box-shadow .25s}
.faq summary:hover::after{background-color:var(--surface)}
.faq details[open] summary::after{background-size:.75rem 1.5px,1.5px 0;background-color:var(--text);color:var(--page);box-shadow:none}
.faq .a{padding-block-end:1.5rem;color:var(--muted);max-width:44rem;line-height:1.65}
.faq .a p + p{margin-block-start:.75rem}

/* ---------------------------------------------------------------- Footer ---- */
.footer{border-top:1px solid var(--line);background:var(--surface)}
.footer_grid{display:grid;grid-template-columns:1.7fr repeat(3,minmax(0,1fr));gap:3rem clamp(2rem,5vw,4.5rem);padding-block:clamp(3.5rem,6vw,5rem) clamp(3rem,5vw,4rem)}
@media (max-width:860px){.footer_grid{grid-template-columns:1fr 1fr}.footer_about{grid-column:1/-1}}
.footer_title{font:400 .6875rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-block-end:1.5rem}
.footer ul{display:grid;gap:.6875rem;font-size:.875rem}
.footer ul a{color:var(--muted);transition:color .2s}
.footer ul a:hover{color:var(--text)}
.footer_about .brand{font-size:1.0625rem}
.footer_about p{margin-block-start:1.125rem;color:var(--muted);font-size:.875rem;max-width:23rem;line-height:1.6}
.footer_bottom{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.25rem;font:400 .6875rem/1.5 var(--mono);letter-spacing:.02em;color:var(--muted)}
.footer_bottom a:hover{color:var(--text)}

/* ---------------------------------------------------------------- Motion ---- */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;translate:0 12px;animation:rise .7s var(--ease-out) forwards}
  .rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}
  @keyframes rise{to{opacity:1;translate:0 0}}
}

/* -------------------------------------------------------- Fatiha trainer ---- */
.trainer{padding:clamp(1.5rem,3vw,2rem)}
.t-head{position:relative;display:flex;justify-content:space-between;align-items:center;gap:.75rem;font:400 .75rem/1.3 var(--mono);color:var(--gold-soft)}
.t-head b{font:500 .875rem var(--font);color:#fff}
.ayah-nav{display:flex;flex-wrap:wrap;gap:.375rem}
.ayah-nav button{width:2rem;height:2rem;border-radius:var(--r1);border:1px solid rgba(233,211,160,.45);background:transparent;color:var(--gold-soft);font:500 .8125rem/1 var(--mono);cursor:pointer}
.ayah-nav button:hover{background:rgba(255,255,255,.08)}
.ayah-nav button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--lapis-deep)}
.words{position:relative;direction:rtl;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:10px 8px;margin:2rem 0 .5rem;min-height:150px}
.word{direction:rtl;font:400 42px/1.9 var(--arabic);color:#fff;background:transparent;border:0;border-radius:var(--r1);padding:0 10px;cursor:pointer;transition:background .2s,color .2s}
.word:hover{background:rgba(255,255,255,.08)}
.word[aria-pressed="true"]{background:#fff;color:var(--lapis-deep)}
.end{display:inline-grid;place-items:center;align-self:center;width:44px;height:44px}
.end svg{width:44px;height:44px}
.gloss{position:relative;text-align:center;min-height:92px;padding:1rem;border-top:1px solid rgba(233,211,160,.3)}
.gloss .tr{font:italic 500 1.625rem/1.3 var(--translit);color:var(--gold-soft)}
.gloss .mn{font-size:.9375rem;color:rgba(255,255,255,.88);margin-top:.25rem}
.trainer.hide-tr .gloss .tr,.trainer.hide-mn .gloss .mn,.trainer.hide-mn .full-tr{visibility:hidden}
.t-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.375rem;flex-wrap:wrap}
.full-tr{font:italic 400 .9375rem/1.4 var(--translit);color:rgba(255,255,255,.85);flex:1;min-width:200px}
.play svg{width:.875rem;height:.875rem}
.play[data-state="loading"]{opacity:.75;cursor:progress}
.t-msg{position:relative;font-size:.875rem;color:#fff;text-align:center;margin-top:.625rem}
.t-msg:empty{display:none}
@media (max-width:640px){
  .word{font-size:34px}
  .words{min-height:200px;gap:4px}
  .words.long .word{font-size:28px;padding:0 6px}
  .full-tr{min-height:63px;flex-basis:100%}
  .t-head{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:no-preference){.word{animation:fade .45s ease both}@keyframes fade{from{opacity:0}to{opacity:1}}}
.post_table table.times{min-width:0;font-size:1rem}
.verse_ar{direction:rtl;text-align:right;font:400 clamp(1.75rem,1.3rem + 1.6vw,2.5rem)/2 var(--arabic);color:var(--text)}
.prose .verse > *{margin:0}
.prose .tool_related_t{font:500 .8125rem var(--mono);color:var(--muted)}
.prose .tool_links a{color:var(--text);text-decoration:none}
.prose .faq .a p{font-size:1rem}

/* ---------------------------------------------------- Quran recitation ---- */
.rc_player{position:sticky;top:4.25rem;z-index:5;display:grid;gap:.875rem;padding:1rem 1.25rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line),0 20px 40px -30px rgba(10,10,10,.25)}
@media (min-width:992px){html.is-scrolled .rc_player{top:5.25rem}}
.rc_now{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.rc_now .tool_label{margin-block-end:.45rem;color:var(--lapis)}
.rc_title{font-size:1.0625rem;font-weight:500;letter-spacing:-.015em;line-height:1.3}
.rc_qari{font-size:.875rem;color:var(--muted)}
.rc_spin{flex:none;width:1.125rem;height:1.125rem;border-radius:50%;border:2px solid var(--line);border-top-color:var(--lapis);opacity:0;transition:opacity .2s}
[data-loading] .rc_spin{opacity:1;animation:rc_spin .8s linear infinite}
@keyframes rc_spin{to{rotate:360deg}}
.rc_bar{height:4px;border-radius:999px;background:#DCDCE0;overflow:hidden}
.rc_bar span{display:block;width:0;height:100%;border-radius:inherit;background:var(--brand-gradient);transition:width .25s linear}
.rc_ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.btn.rc_icon{width:2.375rem;padding:0}
.rc_ctrl .btn svg{flex:none}
.rc_play{min-width:7.5rem}
.rc_grow{flex:1}
.rc_pair{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.rc_list{display:grid;border:1px solid var(--line);border-radius:var(--r2);background:var(--page);overflow:hidden}
.rc_msg{padding:1.5rem;color:var(--muted)}
.rc_bism{padding:1.5rem 1rem 1.25rem;text-align:center;font:400 clamp(1.625rem,1.2rem + 1.4vw,2.125rem)/2 var(--arabic);border-bottom:1px solid var(--line);background:var(--surface);cursor:pointer;transition:background-color .2s}
.rc_bism.is-on{background:var(--lapis-tint)}
.rc_v{position:relative;display:grid;gap:.5rem;padding:clamp(1.25rem,3vw,1.75rem) clamp(1rem,3vw,1.75rem);border-top:1px solid var(--line);cursor:pointer;transition:background-color .2s}
.rc_v:first-child,.rc_bism + .rc_v{border-top:0}
.rc_v:hover{background:var(--surface)}
.rc_v:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--lapis)}
.rc_v::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease-out)}
.rc_v.is-on{background:var(--lapis-tint)}
.rc_v.is-on::before{transform:scaleY(1)}
.rc_v_head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.rc_v_num{font:400 .75rem/1 var(--mono);color:var(--muted)}
.rc_v.is-on .rc_v_num{color:var(--lapis)}
.rc_v_ar{margin-block-start:.25rem;direction:rtl;text-align:right;font:400 clamp(1.625rem,1.2rem + 1.4vw,2.125rem)/2.15 var(--arabic);color:var(--text)}
.rc_end{color:var(--gold-ink)}
.rc_v_tl{font:italic 400 1.0625rem/1.5 var(--translit);color:var(--lapis)}
.rc_v_tr{font-size:1rem;line-height:1.65;color:#2B2B2B}
.rc_v_tr[lang=bn],.rc_v_tr[lang=hi]{font-size:1.0625rem}
.rc_v_tr[lang=ur]{direction:rtl;text-align:right;font-size:1.125rem;line-height:1.9}
@media (max-width:1023px){
  .rc_ws .tool_side{order:-1}
  .rc_keys,.rc_keys_t{display:none}
}
@media (max-width:767px){
  .rc_player{padding:.875rem 1rem}
  .rc_grow{display:none}
  .rc_play{flex:1}
  #rcShare,#rcDownload{flex:1 1 calc(50% - .25rem)}
}
.rc_more_in{display:grid;gap:1rem}
.rc_more summary{display:flex;justify-content:space-between;align-items:center;min-height:2.75rem;padding:0 .875rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font-size:.9375rem;cursor:pointer;list-style:none}
.rc_more summary::-webkit-details-marker{display:none}
.rc_more summary::after{content:"+";font:400 1rem/1 var(--mono);color:var(--muted)}
.rc_more[open] summary{margin-block-end:1rem}
.rc_more[open] summary::after{content:"\2212"}
@media (min-width:1024px){.rc_more summary{display:none}.rc_more[open] summary{margin:0}}

/* ------------------------------------------------------------ Countdown ---- */
.rm_count{padding:clamp(1.75rem,4vw,3rem);text-align:center}
.rm_count_in{position:relative;display:grid;justify-items:center;gap:1rem}
.rm_count .tool_label{color:var(--gold-soft);margin:0}
.rm_count .note{color:rgba(255,255,255,.78)}
.cd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.5rem,2vw,1.25rem);width:min(100%,36rem)}
.cd > div{display:grid;gap:.4rem;padding:clamp(.75rem,2vw,1.25rem) .5rem;border-radius:var(--r2);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(233,211,160,.22)}
.cd b{font:500 clamp(2rem,1.2rem + 3.5vw,3.5rem)/1 var(--font);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#fff}
.cd small{font:400 .6875rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--gold-soft)}

/* ------------------------------------------------------ Ramadan calendar ---- */
.rm_table .rm_n{font:500 .875rem var(--mono);color:var(--muted);width:3rem}
.rm_table .rm_len{font:400 .8125rem var(--mono);color:var(--muted);white-space:nowrap}
.rm_table td[data-k="iftar"]{color:var(--lapis)}
.rm_table th,.rm_table td{padding:.7rem .75rem;white-space:nowrap}
.tool .note{font-size:.8125rem;color:var(--muted);line-height:1.5}
@media print{
  .header,.footer,.skip,.tool_privacy{display:none!important}
  body:has([data-rm]) .page_head .lede,body:has([data-rm]) .tool_side,body:has([data-rm]) .section:not(:has([data-rm])),.rm_count{display:none!important}
  body:has([data-zakat]) .section:not(:has([data-zakat])),body:has([data-zakat]) .page_head{display:none!important}
  .tool{box-shadow:none;background:#fff;padding:0}
  .section{padding:0!important}
  .rm_table th,.rm_table td{padding:.3rem .5rem;font-size:10pt}
  .times tr.is-next td{background:none}
  body{font-size:10pt}
}

/* ------------------------------------------------------------ Checklist ---- */
.ck{display:grid;gap:.5rem;list-style:none;margin:0;padding:0}
.ck label{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;font-size:.9688rem;line-height:1.5;transition:background-color .15s,box-shadow .15s}
.ck input{flex:none;width:1.125rem;height:1.125rem;margin:.15rem 0 0;accent-color:var(--lapis);cursor:pointer}
.ck label:has(:checked){background:var(--lapis-tint);box-shadow:inset 0 0 0 1px rgba(29,58,138,.35)}
.ck label:has(:checked) span{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(29,58,138,.4)}
.ck_note{margin-block-start:.75rem}
.rc_prep{margin-block-start:1.25rem}
.eid_two{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));margin-block-end:1.25rem}
.eid_two .cd b{font-size:clamp(1.75rem,1rem + 2.5vw,2.75rem)}
@media (max-width:600px){.cd small{font-size:.5625rem;letter-spacing:.03em}.cd > div{padding-inline:.25rem}}

/* ------------------------------------------------------------ Hijri date ---- */
.hj_today{padding:clamp(1.5rem,4vw,2.5rem)}
.hj_in{position:relative;display:grid;gap:.5rem}
.hj_today .tool_label{color:var(--gold-soft);margin:0}
.hj_big{font:500 clamp(2rem,1.3rem + 3vw,3.25rem)/1.1 var(--font);letter-spacing:-.035em;color:#fff}
.hj_ar{font:400 clamp(1.5rem,1.1rem + 1.4vw,2rem)/1.8 var(--arabic);color:var(--gold-soft)}
.hj_g{color:rgba(255,255,255,.88)}
.hj_note{font-size:.8125rem;color:rgba(255,255,255,.7)}
.hj_conv{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.hj_box{display:grid;gap:.875rem;align-content:start;padding:1.25rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
.hj_three{display:grid;grid-template-columns:4.5rem 1fr 5.5rem;gap:.5rem}
.hj_out{display:grid;gap:.2rem;min-height:3.25rem}
.hj_out b{font:500 1.1875rem/1.3 var(--font);letter-spacing:-.02em}
.hj_out span{font-size:.875rem;color:var(--muted)}
.hj_month{border:1px solid var(--line);border-radius:var(--r2);background:var(--page);overflow:hidden}
.hj_month table{width:100%;border-collapse:collapse;table-layout:fixed}
.hj_month caption{padding:.875rem 1rem;text-align:left;font-weight:500;border-bottom:1px solid var(--line)}
.hj_month th{padding:.5rem 0;font:400 .6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hj_month td{height:3.5rem;padding:.35rem;vertical-align:top;border-top:1px solid var(--line-soft,#EFEFF1)}
.hj_month td b{display:block;font:500 1rem/1.2 var(--font)}
.hj_month td small{display:block;font:400 .6875rem/1.3 var(--mono);color:var(--muted)}
.hj_month td.is-today{background:var(--lapis-tint);box-shadow:inset 0 0 0 1.5px var(--lapis)}
.hj_next dd small{color:var(--faint)}

/* ------------------------------------------------------- Zakat calculator ---- */
.zk_group{display:grid;gap:1rem;margin:0;padding:1.25rem;border:0;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
.zk_group legend{float:left;display:flex;align-items:center;gap:.6rem;width:100%;margin-block-end:.25rem;font-weight:500;font-size:1.0625rem;letter-spacing:-.01em}
.zk_group legend span{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--lapis);color:#fff;font:500 .75rem/1 var(--mono)}
.zk_group > .btn{justify-self:start}
.zk_f small{display:block;margin-block-start:.4rem;font-size:.8125rem;line-height:1.45;color:var(--muted)}
.zk_money{position:relative;display:flex;align-items:center}
.zk_money i{position:absolute;left:.85rem;font-style:normal;color:var(--muted);font-size:.9375rem;pointer-events:none}
.zk_money i:last-child{left:auto;right:.85rem}
.zk_money input{padding-inline-start:2.6rem!important;font-variant-numeric:tabular-nums}
.zk_money input[data-z="holdpct"]{padding-inline-start:.85rem!important}
.zk_pair{display:grid;grid-template-columns:1fr 9rem;gap:.75rem}
@media (max-width:600px){.zk_pair{grid-template-columns:1fr}}
.zk_row{display:grid;grid-template-columns:minmax(0,1fr) 7rem 8rem auto 2.25rem;gap:.5rem;align-items:end;padding-block:.25rem}
.zk_row .zk_worn{min-height:2.75rem;font-size:.875rem}
.zk_del{align-self:end;margin-block-end:.25rem}
@media (max-width:700px){.zk_row{grid-template-columns:1fr 1fr;padding:.75rem;border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--line)}.zk_row .zk_worn{grid-column:1}.zk_del{justify-self:end}}
.zk_prices dd{font-variant-numeric:tabular-nums}
.zk_own summary{cursor:pointer;font-size:.875rem;color:var(--muted)}
.zk_own[open]{display:grid;gap:.75rem}
.zk_result{display:grid;gap:.75rem;padding:1rem;border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.zk_result dd{font-variant-numeric:tabular-nums}
.zk_due{display:grid;gap:.35rem;padding-block-start:.75rem;border-top:1px solid var(--line)}
.zk_due .tool_label{margin:0}
.zk_due b{font:500 clamp(1.75rem,1.3rem + 1.5vw,2.25rem)/1.1 var(--font);letter-spacing:-.03em;color:var(--lapis)}
.zk_bar{display:none}
@media (max-width:1023px){
  .zk_bar{position:sticky;bottom:.75rem;z-index:6;display:flex;justify-content:space-between;align-items:center;margin-block-start:1rem;padding:.875rem 1.25rem;border-radius:var(--r2);background:var(--lapis);color:#fff;box-shadow:0 12px 30px -12px rgba(19,42,102,.6)}
  .zk_bar span{font:400 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-soft)}
  .zk_bar b{font:500 1.25rem/1 var(--font);font-variant-numeric:tabular-nums}
}
@media print{
  [data-zakat] .tool_main .btn,[data-zakat] .zk_del,[data-zakat] .tool_row,.zk_bar,.zk_own{display:none!important}
  [data-zakat] .tool_side{display:grid!important;position:static;box-shadow:none}
  .section:has([data-zakat]){display:block!important}
}

/* ------------------------------------------------------ Fitr and fidya ---- */
.fz_people{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.fd_out{display:grid;gap:.75rem}
.fd_card{display:grid;gap:.35rem;padding:1.25rem 1.5rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line),inset 3px 0 0 var(--lapis)}
.fd_card .tool_label{margin:0;color:var(--lapis)}
.fd_card b{font:500 clamp(1.375rem,1.1rem + 1vw,1.75rem)/1.2 var(--font);letter-spacing:-.025em}
.fd_card p{color:var(--muted);font-size:.9375rem;line-height:1.55}

/* ---------------------------------------------------------- Qibla finder ---- */
.qb_top{display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:clamp(1.25rem,4vw,2.5rem);align-items:center;padding:clamp(1.25rem,3vw,2rem);border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
@media (max-width:640px){.qb_top{grid-template-columns:1fr;justify-items:center;text-align:center}.qb_read .tool_row{justify-content:center}}
.qb_compass{position:relative;width:min(100%,18rem);aspect-ratio:1}
.qb_compass svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .15s linear}
.qb_ring{fill:var(--surface);stroke:var(--line);stroke-width:2}
.qb_ticks line{stroke:#B8B8C0;stroke-width:1.5}
.qb_n,.qb_l{font:500 15px var(--font);text-anchor:middle;dominant-baseline:middle;fill:var(--muted)}
.qb_n{fill:#B42318;font-weight:600}
.qb_arrow{fill:var(--lapis)}
.qb_kaaba{fill:#0A0A0A}.qb_band{fill:var(--gold)}
.qb_hub{fill:#fff;stroke:var(--lapis);stroke-width:3}
[data-aligned] .qb_ring{fill:var(--gold-tint);stroke:var(--gold)}
[data-aligned] .qb_arrow{fill:var(--gold)}
.qb_read{display:grid;gap:.5rem}
.qb_read .tool_label{margin:0}
.qb_deg{font:500 clamp(3rem,2rem + 4vw,4.5rem)/1 var(--font);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.qb_status{min-height:1.5em;font-weight:500;color:var(--lapis)}
[data-aligned] .qb_status{color:var(--gold-ink)}
.qb_info{padding:1.25rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
.qb_map{height:min(60vh,26rem);border-radius:var(--r2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.qb_coords{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:end}

/* ------------------------------------------------------- Arabic alphabet ---- */
.ab_modes{margin-block-end:.25rem}
.ab_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.75rem,1fr));gap:.5rem}
.ab_tile{display:grid;justify-items:center;gap:.15rem;padding:.6rem .25rem .55rem;border:0;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:background-color .15s,box-shadow .15s,transform .15s}
.ab_tile:hover{box-shadow:inset 0 0 0 1px rgba(29,58,138,.45);transform:translateY(-1px)}
.ab_tile[aria-pressed="true"]{background:var(--lapis);box-shadow:none;color:#fff}
.ab_tile[aria-pressed="true"] .ab_n{color:var(--gold-soft)}
.ab_tile.is-seen:not([aria-pressed="true"]){background:var(--lapis-tint)}
.ab_c{font:400 2rem/1.6 var(--arabic)}
.ab_n{font:400 .6875rem/1 var(--mono);color:var(--muted)}
.ab_card{display:grid;gap:1rem;margin-block-start:1rem;padding:clamp(1.25rem,3vw,1.75rem);border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
.ab_card_top{display:flex;gap:1.5rem;align-items:center}
.ab_big{font:400 clamp(4rem,3rem + 4vw,6rem)/1.3 var(--arabic);min-width:6rem;text-align:center;color:var(--lapis)}
.ab_meta{display:grid;gap:.35rem}
.ab_meta b{font:500 1.75rem/1.1 var(--font);letter-spacing:-.03em}
.ab_meta span{color:var(--muted)}
.ab_forms,.ab_vowels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.ab_forms > div,.ab_vowels > div{display:grid;justify-items:center;gap:.2rem;padding:.6rem .25rem;border-radius:var(--r2);background:var(--surface)}
.ab_forms .tool_label,.ab_vowels .tool_label{margin:0;font-size:.625rem}
.ab_forms b,.ab_vowels b{font:400 2rem/1.6 var(--arabic)}
.ab_vowels small{font:italic 400 .9375rem var(--translit);color:var(--lapis)}
.ab_ex{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem}
.ab_ex .tool_label{margin:0}
.ab_ex b{font:400 2rem/1.5 var(--arabic)}
.ab_quiz{display:grid;gap:1rem;justify-items:center;padding:clamp(1.25rem,4vw,2.5rem);border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);text-align:center}
.ab_quiz .tool_label{margin:0}
.ab_prompt{min-height:5rem;display:grid;place-items:center}
.ab_opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(5rem,1fr));gap:.6rem;width:min(100%,28rem)}
.ab_opt{height:5rem;border:0;border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font:400 2.5rem/1 var(--arabic);cursor:pointer}
.ab_opt.is-text{height:3.25rem;font:500 1rem/1 var(--font)}
.ab_opt:hover{box-shadow:inset 0 0 0 1px rgba(29,58,138,.5)}
.ab_opt.is-right{background:#E8F6EE;box-shadow:inset 0 0 0 2px #22A55A}
.ab_opt.is-wrong{background:#FDECEA;box-shadow:inset 0 0 0 2px var(--bad);opacity:.7}
.ab_score{font:400 .8125rem var(--mono);color:var(--muted)}
.ab_chart td.ab_ar,.post_table td.ab_ar{font:400 1.75rem/1.6 var(--arabic);text-align:center}
@media (max-width:600px){.ab_card_top{flex-direction:column;text-align:center}.ab_forms,.ab_vowels{grid-template-columns:repeat(2,1fr)}}

/* -------------------------------------------------------- Kalimas, Shahada ---- */
.km_list{display:grid;gap:1rem}
.km_card{display:grid;gap:1rem;padding:clamp(1.25rem,3vw,2rem)}
.km_card > *{position:relative}
.km_head{display:flex;align-items:center;gap:1rem}
.km_num{display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--gold);color:var(--lapis-deep);font:600 1rem var(--font)}
.km_num:empty{display:none}
.km_head h3{font:500 1.25rem/1.2 var(--font);color:#fff;letter-spacing:-.02em}
.km_head p{font-size:.875rem;color:var(--gold-soft)}
.km_done{margin-inline-start:auto;display:flex;align-items:center;gap:.4rem;font-size:.8125rem;color:rgba(255,255,255,.8);cursor:pointer}
.km_done input{accent-color:var(--gold);width:1rem;height:1rem}
.km_words{display:flex;flex-wrap:wrap;gap:.5rem}
.km_w{display:grid;justify-items:center;gap:.15rem;padding:.6rem .8rem;border:0;border-radius:var(--r2);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(233,211,160,.22);color:#fff;cursor:default}
.km_ar{font:400 clamp(1.5rem,1.2rem + 1vw,2rem)/1.7 var(--arabic)}
.km_tl{font:italic 400 1rem/1.3 var(--translit);color:var(--gold-soft)}
.km_mn{font-size:.75rem;color:rgba(255,255,255,.75)}
.km_full{font:400 clamp(1.5rem,1.15rem + 1.2vw,2.125rem)/2.1 var(--arabic);color:#fff}
.km_u{border-radius:4px;transition:background-color .2s,color .2s}
.km_tlfull{font:italic 400 1.0625rem/1.55 var(--translit);color:var(--gold-soft)}
.km_en{color:rgba(255,255,255,.9);line-height:1.6}
.km_note{font-size:.8125rem;color:rgba(255,255,255,.7);padding-block-start:.75rem;border-top:1px solid rgba(233,211,160,.2)}
.km_foot{display:flex;flex-wrap:wrap;gap:.5rem}
.km_btn{background:rgba(255,255,255,.1);border-color:rgba(233,211,160,.35);color:#fff}
.km_btn:hover{background:rgba(255,255,255,.18)}
.hide-tl .km_tl,.hide-tl .km_tlfull{display:none}
.hide-en .km_mn,.hide-en .km_en{display:none}
.km_w.is-hidden,.km_u.is-hidden{background:rgba(233,211,160,.25);color:transparent;cursor:pointer}
.km_w.is-hidden *{visibility:hidden}
.km_w.is-peek,.km_u.is-peek{box-shadow:inset 0 0 0 2px var(--gold)}
.is-memo .km_tlfull,.is-memo .km_en{filter:blur(6px);transition:filter .2s}
.is-memo .km_tlfull:hover,.is-memo .km_en:hover{filter:none}
.km_prog{font:500 1.125rem var(--font)}

/* ---------------------------------------------------- Step-by-step guides ---- */
.sl_stage{display:grid;gap:1rem;padding:clamp(1rem,3vw,1.75rem);border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);outline:none}
.sl_bar{height:4px;border-radius:999px;background:#DCDCE0;overflow:hidden}
.sl_bar span{display:block;height:100%;width:0;background:var(--brand-gradient);transition:width .25s}
.sl_step{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:clamp(1rem,3vw,2rem);align-items:start;min-height:16rem}
.sl_step:has(.sl_pose[data-pose=""]){grid-template-columns:minmax(0,1fr)}
.sl_pose[data-pose=""]{display:none}
.sl_pose{display:grid;justify-items:center;gap:.5rem;padding:1rem .5rem;border-radius:var(--r2);background:var(--lapis-tint);color:var(--lapis)}
.sl_pose svg{width:100%;max-width:7rem;aspect-ratio:1}
.sl_pose span{font:400 .6875rem/1.3 var(--mono);text-align:center;color:var(--lapis)}
.sl_body{display:grid;gap:.6rem}
.sl_body .tool_label{margin:0}
.sl_body h3{font:500 clamp(1.25rem,1rem + 1vw,1.625rem)/1.2 var(--font);letter-spacing:-.025em}
.sl_body > p{color:#2B2B2B;line-height:1.6}
.sl_rec{margin-block-start:.25rem;padding:1rem 1.25rem;gap:.6rem}
.sl_rec .verse_ar{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem)}
.sl_nav{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.sl_count{font:400 .8125rem var(--mono);color:var(--muted)}
.sl_outline ol{display:grid;gap:.15rem;margin:.5rem 0 0;padding:0;list-style:none;max-height:none;counter-reset:s}
.sl_outline li{counter-increment:s}
.sl_outline button{display:flex;gap:.5rem;width:100%;padding:.35rem .4rem;border:0;border-radius:6px;background:none;text-align:left;font-size:.8125rem;color:var(--muted);cursor:pointer}
.sl_outline button::before{content:counter(s);flex:none;width:1.4rem;font:400 .75rem var(--mono);color:var(--faint)}
.sl_outline button:hover{background:var(--surface);color:var(--text)}
.sl_list{display:grid;gap:.4rem;margin:0;padding-inline-start:1.2rem;font-size:.9375rem}
@media (max-width:640px){.sl_step{grid-template-columns:1fr}.sl_pose{grid-template-columns:4rem 1fr;justify-items:start;align-items:center}.sl_pose svg{max-width:4rem}}
.sl_outline button[aria-current]{background:var(--lapis-tint);color:var(--lapis);font-weight:500}

/* --------------------------------------------------------- Tasbih counter ---- */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ts_main{gap:1rem}
.ts_main:fullscreen{background:var(--page);padding:2rem;display:grid;align-content:center}
.ts_step{min-height:1.25em;font:400 .8125rem var(--mono);color:var(--lapis)}
.ts_pad{display:grid;justify-items:center;gap:.6rem;width:100%;min-height:24rem;padding:2rem 1rem;border:0;border-radius:var(--r3);background:linear-gradient(180deg,#22419A,var(--lapis));color:#fff;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;transition:transform .08s}
.ts_pad:active{transform:scale(.992)}
.ts_ring{--p:0;display:grid;place-items:center;align-content:center;width:12rem;height:12rem;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p) * 360deg),rgba(255,255,255,.12) 0);mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 9px)) ,linear-gradient(#000,#000);-webkit-mask-composite:source-over}
.ts_ring{position:relative;mask:none;-webkit-mask:none}
.ts_ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:#1F3D94}
.ts_num,.ts_of{position:relative}
.ts_num{font:500 4rem/1 var(--font);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ts_of{font:400 .75rem var(--mono);color:var(--gold-soft);letter-spacing:.06em;text-transform:uppercase}
.ts_ar{font:400 clamp(1.75rem,1.3rem + 1.5vw,2.5rem)/1.6 var(--arabic)}
.ts_tl{font:italic 400 1.125rem var(--translit);color:var(--gold-soft)}
.ts_mn{font-size:.875rem;color:rgba(255,255,255,.8)}
.ts_hint{margin-block-start:.5rem;font:400 .6875rem var(--mono);color:rgba(255,255,255,.55)}
[data-tasbih].is-done .ts_ring::before{background:var(--gold);transition:background .2s}
.ts_ctrl{justify-content:center}
.ts_total b{font:500 1.75rem var(--font);letter-spacing:-.03em}
.ts_saved{display:grid;gap:.35rem;margin:0;padding:0;list-style:none}
.ts_saved li{display:grid;grid-template-columns:1fr auto auto auto;gap:.5rem;align-items:center;font-size:.875rem}
.ts_saved b{font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- 99 Names ---- */
.nm_search{margin-block-end:.75rem}
.nm_search input{padding-inline-start:1rem}
.nm_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12.5rem),1fr));gap:.6rem}
.nm_card{position:relative;display:grid;justify-items:center;gap:.2rem;padding:1rem .75rem .75rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);text-align:center}
.nm_card.is-known{background:var(--lapis-tint);box-shadow:inset 0 0 0 1px rgba(29,58,138,.3)}
.nm_i{position:absolute;top:.5rem;left:.6rem;font:400 .6875rem var(--mono);color:var(--faint)}
.nm_ar{font:400 1.875rem/1.7 var(--arabic);color:var(--lapis)}
.nm_tl{font:italic 500 1rem var(--translit)}
.nm_en{font-size:.8125rem;color:var(--muted);line-height:1.4}
.nm_play{position:absolute;top:.4rem;right:.4rem;width:1.75rem;height:1.75rem;border:0;border-radius:50%;background:var(--surface);color:var(--lapis);font-size:.625rem;cursor:pointer}
.nm_know{display:flex;align-items:center;gap:.35rem;margin-block-start:.4rem;font-size:.75rem;color:var(--muted);cursor:pointer}
.nm_know input{accent-color:var(--lapis)}
.nm_flash{position:relative;display:grid;justify-items:center;align-content:center;gap:.75rem;min-height:20rem;padding:2rem;border-radius:var(--r3);background:linear-gradient(180deg,#22419A,var(--lapis));color:#fff;cursor:pointer;outline:none;text-align:center}
.nm_flash .nm_i{color:var(--gold-soft)}
.nm_flash .nm_ar{font-size:clamp(3rem,2rem + 4vw,4.5rem);color:#fff}
.nm_back{display:grid;gap:.35rem;visibility:hidden}
.nm_flash.is-turned .nm_back{visibility:visible}
.nm_flash .nm_tl{font-size:1.375rem;color:var(--gold-soft)}
.nm_flash .nm_en{font-size:1.0625rem;color:rgba(255,255,255,.9)}
.nm_qen{font:500 clamp(1.25rem,1rem + 1vw,1.625rem)/1.3 var(--font);letter-spacing:-.02em}
.nm_opt{font-size:1.75rem;height:4.5rem}

/* ------------------------------------------------------- Duas and adhkar ---- */
.du_list{display:grid;gap:1rem}
.du_card .verse_head .badge{margin-inline-start:auto}
.du_foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block-start:.75rem;border-top:1px solid var(--line-soft,#EFEFF1)}
.du_foot .verse_src{padding:0;border:0}
.du_index{display:grid;gap:1.5rem}
.du_feature{background:var(--lapis-tint)}
.ad_card{display:grid;gap:.75rem;width:100%;min-height:22rem;padding:clamp(1.25rem,3vw,2rem);border:0;border-radius:var(--r3);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:box-shadow .2s}
.ad_card:active{box-shadow:inset 0 0 0 2px var(--lapis)}
.ad_top{display:flex;justify-content:space-between;align-items:center}
.ad_top .tool_label{margin:0}
.ad_count{font:400 .875rem var(--mono);color:var(--muted)}
.ad_count b{font:500 2rem var(--font);color:var(--lapis);letter-spacing:-.03em}
.ad_ar{font:400 clamp(1.5rem,1.15rem + 1.2vw,2.125rem)/2.1 var(--arabic);text-align:right;color:var(--text)}
.ad_tl{font:italic 400 1.0625rem/1.55 var(--translit);color:var(--lapis)}
.ad_en{font-size:1rem;line-height:1.6;color:#2B2B2B}
.ad_src{font:400 .75rem var(--mono);color:var(--muted)}
.ad_card .ts_hint{color:var(--faint);justify-self:center}
.is-complete .ad_card{box-shadow:inset 0 0 0 2px var(--gold);background:var(--gold-tint)}

/* ---------------------------------------------------------------- Quran ---- */
.qr{--qsize:1}
.qr_bar{position:sticky;top:4.25rem;z-index:5;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line),0 12px 30px -24px rgba(10,10,10,.3)}
@media (min-width:992px){html.is-scrolled .qr_bar{top:5.25rem}}
.qr_now{flex:1;font:400 .8125rem var(--mono);color:var(--lapis)}
.qr_list{display:grid;border:1px solid var(--line);border-radius:var(--r2);background:var(--page);overflow:hidden}
.qr_sh{display:flex;align-items:baseline;gap:.75rem;padding:1.25rem 1.25rem .5rem;font:500 1.25rem var(--font);letter-spacing:-.02em;border-top:1px solid var(--line)}
.qr_sh:first-child{border-top:0}
.qr_sh span{font-size:.875rem;font-weight:400;color:var(--muted)}
.qr_bism{padding:1.25rem 1rem;text-align:center;font:400 calc(1.75rem * var(--qsize))/2 var(--arabic);border-bottom:1px solid var(--line);background:var(--surface)}
.qr_v{position:relative;display:grid;gap:.5rem;padding:clamp(1.25rem,3vw,1.75rem);border-top:1px solid var(--line)}
.qr_v:first-of-type,.qr_bism + .qr_v,.qr_sh + .qr_v{border-top:0}
.qr_v.is-on{background:var(--lapis-tint)}
.qr_v.is-on::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--gold)}
.qr_vh{display:flex;align-items:center;gap:.6rem}
.qr_play{margin-inline-start:auto;width:2rem;height:2rem;border:0;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--lapis);font-size:.6875rem;cursor:pointer}
.qr_v.is-on .qr_play{background:var(--lapis);color:#fff}
.qr_ar{direction:rtl;text-align:right;font:400 calc(clamp(1.625rem,1.2rem + 1.4vw,2.125rem) * var(--qsize))/2.15 var(--arabic)}
.qr_tl{font:italic 400 1.0625rem/1.55 var(--translit);color:var(--lapis)}
.qr_tr{color:#2B2B2B;line-height:1.65}
.qr_tr:empty{display:none}
.qr_tr[lang=ur]{direction:rtl;text-align:right;font-size:1.125rem}
.hide-tl .qr_tl{display:none}
.qr_pn{display:flex;justify-content:space-between;gap:1rem;margin-block-start:1rem;font-size:.9375rem}
.qr_pn a{color:var(--lapis)}
.qr_facts{margin-block-end:1.5rem;padding:1.25rem;border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.qr_friday{padding:.875rem 1rem;border-radius:var(--r2);background:var(--surface);font-weight:500}
.qr_friday[data-on="true"]{background:var(--gold-tint);color:var(--gold-ink)}
.qr_feat{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:.6rem;margin-block-end:1.5rem}
.qr_index{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:.5rem}
.qr_card{display:grid;grid-template-columns:2.25rem 1fr auto;gap:.75rem;align-items:center;padding:.75rem 1rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s}
.qr_card:hover{box-shadow:inset 0 0 0 1px rgba(29,58,138,.45)}
.qr_card[hidden]{display:none}
.qr_n{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:8px;background:var(--lapis-tint);color:var(--lapis);font:500 .8125rem var(--mono)}
.qr_nm{display:grid;gap:.1rem}
.qr_nm b{font-weight:500}
.qr_nm small{font-size:.75rem;color:var(--muted)}
.qr_arn{font:400 1.375rem var(--arabic);color:var(--lapis)}

/* -------------------------------------------------------- Noorani Qaida ---- */
.qd_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.25rem,1fr));gap:.5rem}
.qd_cell{display:grid;justify-items:center;gap:.1rem;padding:.6rem .25rem;border:0;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color .15s,box-shadow .15s}
.qd_ar{font:400 1.875rem/1.7 var(--arabic)}
.qd_tl{min-height:1.1em;font:italic 400 .875rem var(--translit);color:var(--lapis)}
.hide-tl .qd_cell:not(.is-shown) .qd_tl{visibility:hidden}
.qd_cell.is-on{background:var(--lapis);color:#fff;box-shadow:none}
.qd_cell.is-on .qd_tl{color:var(--gold-soft);visibility:visible}
.qd_cell.is-known{box-shadow:inset 0 0 0 2px #22A55A}
.qd_cell.is-known::after{content:"✓";position:absolute}
.qd_cell{position:relative}
.qd_cell.is-known::after{top:.25rem;right:.4rem;font-size:.6875rem;color:#22A55A}
.qd_nav a[aria-current]{font-weight:600;color:var(--lapis)}
.qd_num{font:600 1.125rem var(--font);color:var(--lapis)}
.qd_two{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.qd_two input{width:100%;min-height:2.75rem;padding:.6rem .85rem;border-radius:var(--r2);border:1px solid var(--line);background:var(--page)}
.qa_gap{padding:.5rem 0}
.qa_track{display:grid;gap:.4rem}
.qa_row{display:grid;grid-template-columns:4.5rem 1fr auto;align-items:center;gap:.5rem;font-size:.875rem}
.qa_row b{font-variant-numeric:tabular-nums;font-weight:500}

/* ------------------------------------------------- Inheritance and will ---- */
.ih_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:.4rem}
.ih_h{display:grid;grid-template-columns:1fr 4.25rem;align-items:center;gap:.5rem;padding:.4rem .4rem .4rem .75rem;border-radius:var(--r2);background:var(--surface);font-size:.875rem;cursor:pointer}
.ih_h input[type=number]{width:100%;height:2.25rem;padding:0 .5rem;border-radius:6px;border:1px solid var(--line);background:var(--page);font-variant-numeric:tabular-nums}
.ih_h input[type=checkbox]{justify-self:end;width:1.25rem;height:1.25rem;accent-color:var(--lapis)}
.ih_h:has(input:checked),.ih_h:has(input[type=number]:not([value="0"])){background:var(--lapis-tint)}
.ih_out{display:grid;gap:.75rem}
.ih_t td small{display:block;font-size:.75rem;color:var(--muted)}
.ih_t tr.is-out td{color:var(--faint)}
.ih_steps{padding:1rem 1.25rem;border-radius:var(--r2);background:var(--surface)}
.ih_steps summary{cursor:pointer;font-weight:500}
.ih_steps ol{margin:.75rem 0 0;padding-inline-start:1.25rem;display:grid;gap:.35rem;font-size:.9375rem}
.wl_beq{display:grid;grid-template-columns:1fr 9rem 2.25rem;gap:.5rem;align-items:end}
.wl_out{max-height:60vh;overflow:auto;border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--line)}
.wl_doc{display:grid;gap:.6rem;padding:1.25rem;font:400 .875rem/1.6 Georgia,"Times New Roman",serif;color:#1A1A1A;background:#fff}
.wl_doc h3{font:600 1.0625rem/1.3 Georgia,serif;text-align:center}
.wl_doc h4{font:600 .875rem Georgia,serif;margin-block-start:.5rem}
.wl_doc ol{margin:0;padding-inline-start:1.25rem}
.wl_sign{margin-block-start:1rem;line-height:2.2}
@media print{
  body:has([data-will]) .section:not(:has([data-will])),body:has([data-will]) .page_head,body:has([data-will]) .tool_main,body:has([data-will]) .tool_row,body:has([data-will]) .tool_side > .note,body:has([data-will]) .tool_side_t{display:none!important}
  body:has([data-will]) .tool_side{position:static;box-shadow:none;padding:0}
  .wl_out{max-height:none;box-shadow:none}
}

/* -------------------------------------------------------- Names and Umrah ---- */
.in_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:.6rem}
.in_card{position:relative;display:grid;gap:.35rem;align-content:start;padding:1rem 1rem .9rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
.in_card[hidden]{display:none}
.in_top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;padding-inline-end:1.75rem}
.in_top b{font:500 1.125rem var(--font);letter-spacing:-.015em}
.in_ar{font:400 1.375rem/1.5 var(--arabic);color:var(--lapis)}
.in_card p{font-size:.9375rem}
.in_card small{font-size:.8125rem;color:var(--muted);line-height:1.45}
.in_card .badge{justify-self:start;margin-block-start:.25rem}
.in_fav{position:absolute;top:.7rem;right:.7rem;border:0;background:none;font-size:1.125rem;color:var(--lapis);cursor:pointer}
.um_count{display:grid;justify-items:center;gap:.35rem;width:100%;padding:1.5rem 1rem;border:0;border-radius:var(--r3);background:linear-gradient(180deg,#22419A,var(--lapis));color:#fff;cursor:pointer;touch-action:manipulation}
.um_count b{font:500 3.5rem/1 var(--font);letter-spacing:-.04em}
.um_count span{font-size:.8125rem;color:var(--gold-soft);text-align:center}
.um_count.is-done{background:var(--gold);color:var(--lapis-deep)}
.um_count.is-done span{color:var(--lapis-deep)}