@font-face{font-family:IndoPak;src:url(/fonts/indopak.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Scheherazade New';src:url(/fonts/scheherazade.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Amiri Quran';src:url(/fonts/amiri-quran.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Noto Naskh Arabic';src:url(/fonts/noto-naskh.woff2) format('woff2');font-display:swap}
:root,[data-theme=light]{--bg1:#e6f4ff;--bg2:#fff7ec;--card:#fff;--ink:#1d2b4f;--soft:#eef3ff;--line:#e3e8f2;--acc:#ff8a3d;--g:#2bb673;--lbl:#a34a00;--muted:#5b6785;
--c-f:#e5383b;--c-k:#1e88e5;--c-d:#2bb673;--c-t:#9c27b0;--c-s:#ff8a3d;--c-q:#795548;--c-m:#00897b;--c-w:#c2185b;--sh:#0000000f}
[data-theme=sepia]{--bg1:#f6eedb;--bg2:#efe2c4;--card:#fbf5e6;--ink:#3b2f20;--soft:#efe3c6;--line:#e2d3b0;--acc:#c0662b;--g:#5f8a3a;--lbl:#8a3f00;--muted:#6f5d43;
--c-f:#c62828;--c-k:#1565c0;--c-d:#2e7d32;--c-t:#7b1fa2;--c-s:#d9650f;--c-q:#6d4c41;--c-m:#00796b;--c-w:#ad1457;--sh:#5a3e1012}
[data-theme=dark]{--bg1:#0f1420;--bg2:#161c2b;--card:#1e2536;--ink:#e8edf7;--soft:#2a3348;--line:#323c55;--acc:#ff9b52;--g:#2fa56a;--lbl:#8a3f00;--muted:#a8b3cc;
--c-f:#ff6b6b;--c-k:#64b5f6;--c-d:#5ee0a0;--c-t:#d59ae0;--c-s:#ffb074;--c-q:#d2ab84;--c-m:#4dd0c4;--c-w:#f48fb1;--sh:#0006}
[data-theme=contrast]{--bg1:#000;--bg2:#000;--card:#000;--ink:#fff;--soft:#222;--line:#fff;--acc:#ffd400;--g:#00c853;--lbl:#000;--muted:#fff;
--c-f:#ff5c5c;--c-k:#5cb2ff;--c-d:#3dff8a;--c-t:#ff7bff;--c-s:#ffab00;--c-q:#ffd59a;--c-m:#00ffee;--c-w:#ff80c0;--sh:#0000}
[data-theme=contrast] .t,[data-theme=contrast] .lc,[data-theme=contrast] .intro,[data-theme=contrast] .qtext,[data-theme=contrast] .card{border:2px solid #fff}
*{box-sizing:border-box}
body{margin:0;font-family:Nunito,system-ui,sans-serif;background:linear-gradient(180deg,var(--bg1),var(--bg2));background-attachment:fixed;color:var(--ink);min-height:100vh;--fs:1;--hl:#ffe066;--ar:var(--uf,'Scheherazade New'),'Amiri Quran',serif}
a{color:var(--acc)}
.topbar{position:sticky;top:0;z-index:5;background:var(--card);box-shadow:0 2px 12px var(--sh)}
.nav{display:flex;gap:4px;padding:6px 12px 0;max-width:900px;margin:auto;font-weight:800;font-size:.9rem}
.nav a{text-decoration:none;color:var(--muted);padding:6px 10px;border-radius:10px}.nav a.act,.nav a:hover{color:var(--ink);background:var(--soft)}
.nav .brand{color:var(--ink);margin-right:auto;padding-left:0}
header{padding:8px 12px 10px;display:flex;gap:8px;align-items:center;max-width:900px;margin:auto}
header h1{font-size:1.15rem;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header button{border:0;background:var(--soft);border-radius:12px;padding:10px 14px;font:inherit;font-weight:800;color:var(--ink);cursor:pointer}
#gear{font-size:1.15rem;padding:8px 12px;line-height:1}
main{max-width:900px;margin:auto;padding:16px 14px 120px}
.idx{display:grid;gap:12px}.lc{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:20px;padding:16px;box-shadow:0 4px 14px var(--sh);border:0;font:inherit;text-align:left;color:inherit;cursor:pointer}
.lc .n{width:46px;height:46px;border-radius:14px;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.2rem;flex:none}
[data-theme=contrast] .lc .n{color:#000}
.lc .ar{font-family:'Amiri Quran',serif;font-size:1.4rem;margin-left:auto;direction:rtl}.lc small{display:block;opacity:.7}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--w,84px)*var(--fs)),1fr));gap:12px;direction:rtl}
.t{position:relative;min-height:calc(96px*var(--fs));border:3px solid transparent;border-radius:22px;background:var(--card);box-shadow:0 4px 12px var(--sh);font-family:var(--ar);font-size:calc(3.2rem*var(--fs));line-height:2;color:var(--ink);cursor:pointer;transition:transform .28s cubic-bezier(.3,1.4,.5,1),background .2s;padding:6px 4px 18px;-webkit-tap-highlight-color:transparent}
.t.on{background:var(--hl);border-color:var(--acc);transform:scale(1.6);z-index:3;box-shadow:0 8px 24px #ff8a3d55;
--ink:#1d2b4f;--c-f:#d62828;--c-k:#1565c0;--c-d:#1b8a4b;--c-t:#8e24aa;--c-s:#e0640f;--c-q:#6d4c41;--c-m:#00796b;--c-w:#ad1457}
.nozoom .t.on,.nozoom .grid.words .t.on,.nozoom .t.qw.on{transform:none}
.t .lb{position:absolute;bottom:4px;left:0;right:0;font:800 .72rem Nunito,sans-serif;opacity:0;color:#a34a00;direction:ltr}.t.on .lb{opacity:1}
.intro{background:var(--card);border-radius:18px;padding:14px 16px;margin-bottom:16px}.intro h2{margin:.1em 0}
.ctl{position:fixed;bottom:0;left:0;right:0;background:var(--card);box-shadow:0 -2px 12px var(--sh);display:flex;gap:10px;padding:12px;justify-content:center;z-index:4}
.ctl button{min-width:110px;min-height:52px;border:0;border-radius:16px;font:800 1rem Nunito;background:var(--g);color:#fff}.ctl button.s{background:var(--soft);color:var(--ink)}
.h-f{color:var(--c-f)}.h-k{color:var(--c-k)}.h-d{color:var(--c-d)}.h-t{color:var(--c-t)}.h-s{color:var(--c-s)}.h-q{color:var(--c-q)}.h-m{color:var(--c-m)}
.nocol .stk .ly,.nocol .wq{color:var(--ink)}.nocol .key{display:none}
.key{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:.85rem}.key span{font-family:Nunito,var(--ar);background:var(--soft);border-radius:10px;padding:4px 8px}
.stk{display:inline-grid}.stk .ly{grid-area:1/1;white-space:nowrap}.stk .top{color:var(--ink)}
.t.ay{font-family:'Amiri Quran',serif}body[data-script=indopak]{--ar:IndoPak,'Amiri Quran',serif}
body[data-script=indopak] .t{font-size:calc(3.5rem*var(--fs));line-height:2.4}body[data-script=indopak] .grid.words .t{font-size:calc(2.9rem*var(--fs))}
.sw{display:flex;background:var(--soft);border-radius:12px;padding:3px}.sw button{background:none;padding:8px 10px;font-size:.85rem}.sw button.act{background:var(--acc);color:#fff}
.grid.words{--w:140px!important}.grid.words .t{font-size:calc(2.6rem*var(--fs))}.grid.words .t.on{transform:scale(1.25)}
@media(max-width:480px){.grid.words{grid-template-columns:repeat(auto-fill,minmax(min(46%,calc(140px*var(--fs))),1fr))}.grid.words .t.on{transform:scale(1.12)}header .sw{display:none}}
body .grid.words .t.ph{font-size:calc(2rem*var(--fs));white-space:nowrap}body[data-script=indopak] .grid.words .t.ph{font-size:calc(2.1rem*var(--fs))}
.qtext{background:var(--card);border-radius:22px;padding:14px 8px;box-shadow:0 4px 12px var(--sh)}
.ayah{display:flex;flex-wrap:wrap;gap:2px 4px;justify-content:flex-start;padding:6px 0;border-bottom:1px dashed var(--line)}.ayah:empty{display:none}.ayah:last-child{border:0}
.t.qw{min-height:0;box-shadow:none;background:transparent;font-size:calc(2.3rem*var(--fs));padding:0 6px 14px;border-radius:14px}
[data-theme=contrast] .t.qw{border:3px solid transparent}
body[data-script=indopak] .t.qw{font-size:calc(2.5rem*var(--fs))}.t.qw.on{transform:scale(1.3);background:var(--hl)}
.wq{position:absolute;left:-.15em;top:.35em;font-size:.55em;line-height:1;color:var(--c-w)}
.t.qw{padding:0 3px 14px}.ayah{gap:0 1px}.nw{display:inline-flex;white-space:nowrap;flex-wrap:nowrap}.t.qw.ay{padding:0 2px 14px}
/* settings sheet */
.scrim{position:fixed;inset:0;background:#0006;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s}.scrim.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:21;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;background:var(--card);color:var(--ink);border-radius:22px 22px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px #0004;transform:translateY(105%);transition:transform .25s ease;visibility:hidden}
.sheet.open{transform:none;visibility:visible}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 6px}
.sheet .hd{display:flex;align-items:center;justify-content:space-between}.sheet h2{font-size:1.15rem;margin:6px 0}
.sheet .x{border:0;background:var(--soft);color:var(--ink);border-radius:12px;width:40px;height:40px;font-size:1.1rem;cursor:pointer}
.sheet fieldset{border:0;padding:0;margin:14px 0 0}.sheet legend{font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px;padding:0}
.seg{display:flex;flex-wrap:wrap;gap:6px}.seg button{flex:1 1 auto;min-height:44px;border:2px solid var(--line);background:var(--soft);color:var(--ink);border-radius:12px;font:800 .9rem Nunito,sans-serif;padding:6px 10px;cursor:pointer}
.seg button[aria-pressed=true]{border-color:var(--acc);background:var(--card);box-shadow:inset 0 0 0 1px var(--acc)}
.fonts{display:grid;gap:6px}.fonts button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;border:2px solid var(--line);background:var(--soft);color:var(--ink);border-radius:12px;padding:4px 12px;font:800 .9rem Nunito,sans-serif;cursor:pointer;text-align:left}
.fonts button[aria-pressed=true]{border-color:var(--acc);background:var(--card)}.fonts .pv{font-size:1.6rem;line-height:1.9;direction:rtl}
.note{font-size:.8rem;color:var(--muted);margin:6px 0 0}
.rng{display:flex;align-items:center;gap:10px}.rng input{flex:1;accent-color:var(--acc);height:32px}.rng output{min-width:52px;text-align:right;font-weight:800}
.tg{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-weight:700;gap:12px;cursor:pointer}
.tg input{appearance:none;-webkit-appearance:none;width:50px;height:30px;border-radius:15px;background:var(--line);position:relative;flex:none;cursor:pointer;transition:background .2s}
.tg input::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px #0004}
.tg input:checked{background:var(--g)}.tg input:checked::after{left:23px}
.sw8{display:flex;gap:10px;flex-wrap:wrap}.sw8 button{width:44px;height:44px;border-radius:50%;border:3px solid var(--line);cursor:pointer}.sw8 button[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 3px var(--acc)}
.th button{display:flex;flex-direction:column;align-items:center;gap:4px}.th i{display:block;width:28px;height:18px;border-radius:6px;border:1px solid #8884}
.reset{margin-top:16px;width:100%;min-height:44px;border:0;border-radius:12px;background:var(--soft);color:var(--ink);font:800 .9rem Nunito,sans-serif;cursor:pointer}
@media(min-width:700px){.sheet{left:auto;right:16px;top:16px;bottom:auto;width:380px;max-height:calc(100vh - 32px);border-radius:20px;transform:translateX(110%)}.sheet .grab{display:none}}
/* site pages / blog */
.foot{max-width:900px;margin:0 auto;padding:10px 16px 110px;color:var(--muted);font-size:.9rem;line-height:1.6}
.card{background:var(--card);border-radius:20px;padding:18px 20px;box-shadow:0 4px 14px var(--sh);margin-bottom:14px}
.crumbs{font-size:.85rem;color:var(--muted);margin:4px 0 12px}.crumbs a{color:var(--muted)}
article.post{line-height:1.75;font-size:1.05rem}article.post h1{line-height:1.25;margin:.2em 0 .3em;font-size:1.8rem}article.post h2{margin-top:1.6em}
article.post .meta{color:var(--muted);font-size:.9rem}.post-list{display:grid;gap:12px;padding:0;list-style:none}
.post-list a{text-decoration:none;color:inherit}.post-list h2{margin:0 0 4px;font-size:1.2rem;color:var(--ink)}.post-list p{margin:0;color:var(--muted)}
.cta{display:inline-block;background:var(--g);color:#fff;text-decoration:none;font-weight:800;border-radius:14px;padding:12px 18px;margin:8px 0}
.ar-inline{font-family:IndoPak,'Amiri Quran',serif;font-size:1.3em}
/* v3 toolbar */
.tbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;max-width:900px;margin:auto;padding:8px 12px 10px;border-top:3px solid var(--acc);background:linear-gradient(180deg,var(--soft),var(--card))}
.tg-grp{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.tl{font-weight:800;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.tb{min-height:44px;min-width:44px;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:6px 12px;font:800 .95rem Nunito,sans-serif;cursor:pointer;white-space:nowrap}
.tb[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:#fff}[data-theme=contrast] .tb[aria-pressed=true]{color:#000}
.tb.pen{border-color:var(--acc)}.tb.pen[aria-pressed=true]{background:#d81b60;border-color:#d81b60;color:#fff;box-shadow:0 0 0 3px #d81b6044}
.tb.clr{background:#fff0f0;color:#c62828;border-color:#e57373}
.sw9{width:44px;height:44px;border-radius:50%;border:3px solid var(--line);cursor:pointer;flex:none;padding:0}.sw9[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 3px var(--acc)}
.tb.jump{max-width:190px;padding-right:6px}
.teach .t{cursor:crosshair}.teach .t.on{transform:none}
.t.mk{background:var(--mk)!important;border-color:var(--ink);--ink:#1d2b4f;--c-f:#d62828;--c-k:#1565c0;--c-d:#1b8a4b;--c-t:#8e24aa;--c-s:#e0640f;--c-q:#6d4c41;--c-m:#00796b;--c-w:#ad1457;color:var(--ink)}
.t.mk .lb{opacity:1}
.ad-slot{max-width:900px;margin:0 auto}.ad-slot:empty{display:none}
.foot.mini{padding:4px 16px 100px;text-align:center;font-size:.8rem;opacity:.7}
header{padding:6px 12px}
@media(max-width:600px){.tbar{gap:6px;padding:6px 8px}.tbar>.tg-grp{max-width:100%;overflow-x:auto;scrollbar-width:none;padding:2px}.tbar>.tg-grp::-webkit-scrollbar{display:none}.tl{display:none}.tb{padding:6px 10px;font-size:.9rem}.sw9{width:40px;height:40px}.fnt{flex:1 1 auto}.tbar>.tg-grp:first-child{width:100%}header h1{font-size:1rem}}
main{overflow-x:clip;overflow-clip-margin:0}@media(max-width:600px){.t.on{transform:scale(1.3)}}
[hidden]{display:none!important}
@media(max-width:600px){.lg{display:none}.tb.jump{max-width:130px;flex:1 1 auto}}