@font-face{font-family:Galada;src:url(fonts/galada.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Tiro Bangla";src:url(fonts/tiro_bangla.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Noto Serif Bengali";src:url(fonts/noto_serif_bengali_400.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Serif Bengali";src:url(fonts/noto_serif_bengali_600.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:Hind;src:url(fonts/hind_regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Hind;src:url(fonts/hind_semibold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Amiri Quran";src:url(fonts/amiri_quran.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Aref Ruqaa";src:url(fonts/aref_ruqaa.ttf) format("truetype");font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant_garamond_600.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant_garamond_700.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:Literata;src:url(fonts/literata_400.ttf) format("truetype");font-display:swap}
@font-face{font-family:Literata;src:url(fonts/literata_400_italic.ttf) format("truetype");font-style:italic;font-display:swap}

:root{--night:#070B1F;--night2:#0D1433;--ink:#E6E2D3;--mist:#AEB3D1;--gold:#E9C27A;--gold2:#FFDFA0;--jade:#7DE0B9;--emerald:#0E5E4E;--panel:#111A3D;--line:rgba(233,194,122,.25);--ayah:#0E2A2E;--ayahar:#FFDFA0}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--night:#F6EEDC;--night2:#EFE2C2;--ink:#3A2A16;--mist:#6B5A40;--gold:#9A6A1F;--gold2:#7A4F10;--jade:#0E5E4E;--panel:#EDE3CC;--line:rgba(154,106,31,.3);--ayah:#EFE2C2;--ayahar:#0E3D33}}
:root[data-theme="light"]{--night:#F6EEDC;--night2:#EFE2C2;--ink:#3A2A16;--mist:#6B5A40;--gold:#9A6A1F;--gold2:#7A4F10;--jade:#0E5E4E;--panel:#EDE3CC;--line:rgba(154,106,31,.3);--ayah:#EFE2C2;--ayahar:#0E3D33}
:root[data-theme="dark"]{--night:#070B1F;--night2:#0D1433;--ink:#E6E2D3;--mist:#AEB3D1;--gold:#E9C27A;--gold2:#FFDFA0;--jade:#7DE0B9;--panel:#111A3D;--line:rgba(233,194,122,.25);--ayah:#0E2A2E;--ayahar:#FFDFA0}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:Hind,system-ui,sans-serif;line-height:1.5;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23E9C27A' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M60 14 70 36 94 26 84 50 106 60 84 70 94 94 70 84 60 106 50 84 26 94 36 70 14 60 36 50 26 26 50 36Z'/%3E%3Cpath d='M0 60H14M106 60H120M60 0V14M60 106V120'/%3E%3Cpath d='M0 0 26 26M120 0 94 26M0 120 26 94M120 120 94 94'/%3E%3C/g%3E%3C/svg%3E")}
a{color:var(--gold)}
img,svg{max-width:100%}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--gold);color:#000;padding:6px 10px;z-index:9}
header.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:10px 16px;background:color-mix(in srgb,var(--night) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{font-family:Galada,cursive;font-size:28px;color:var(--gold2);text-decoration:none;line-height:1;white-space:nowrap}
.logo small{font-family:"Aref Ruqaa";font-size:15px;color:var(--gold);margin-left:6px}
html[lang=en] .logo{font-family:Cormorant,serif;font-weight:700;letter-spacing:.5px}
nav.main{display:flex;gap:18px;margin-left:auto;font-size:15px;overflow-x:auto;padding:4px 6px;scrollbar-width:none;-ms-overflow-style:none}
nav.main::-webkit-scrollbar{display:none}
nav.main a{color:var(--mist);text-decoration:none;white-space:nowrap}
nav.main a:hover{color:var(--gold)}
.lang{border:1px solid var(--line);border-radius:99px;padding:3px 12px;color:var(--gold);text-decoration:none;font-size:14px;white-space:nowrap}
.theme{background:none;border:1px solid var(--line);color:var(--gold);border-radius:99px;padding:3px 10px;cursor:pointer;font:inherit}
.hero{position:relative;overflow:hidden;padding:44px 16px 26px;text-align:center;background:radial-gradient(120% 80% at 50% 120%,rgba(14,94,78,.55),transparent 60%),linear-gradient(#040716,var(--night2))}
:root[data-theme="light"] .hero{background:radial-gradient(120% 80% at 50% 120%,rgba(14,94,78,.18),transparent 60%),linear-gradient(#efe2c2,#f6eedc)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .hero{background:radial-gradient(120% 80% at 50% 120%,rgba(14,94,78,.18),transparent 60%),linear-gradient(#efe2c2,#f6eedc)}}
.crumbs{font-size:14px;color:var(--gold)}
.crumbs a{text-decoration:none}
.arch{width:min(250px,62vw);aspect-ratio:.8;margin:16px auto 0;border-radius:50% 50% 0 0/38% 38% 0 0;overflow:hidden;box-shadow:0 0 0 2px var(--gold),0 0 40px rgba(233,194,122,.18)}
.arch svg{display:block;width:100%;height:100%}
h1{font-family:Galada,cursive;font-weight:400;font-size:clamp(32px,7vw,50px);margin:16px 0 8px;line-height:1.3;color:var(--ink)}
html[lang=en] h1{font-family:Cormorant,serif;font-weight:700}
.badge{display:inline-flex;gap:6px;align-items:center;border:1px solid color-mix(in srgb,var(--c,var(--jade)) 60%,transparent);color:var(--c,var(--jade));background:color-mix(in srgb,var(--c,var(--jade)) 12%,transparent);border-radius:99px;padding:3px 12px;font-size:14px}
.badge.moral{--c:#E39A6B}.badge.history{--c:#8FA6F0}
.meta{color:var(--mist);font-size:14px;margin-top:10px}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}
.wide{max-width:1080px;margin:0 auto;padding:0 16px}
.app-cta{display:flex;gap:14px;align-items:center;margin:24px 0;padding:14px 16px;border-radius:20px;background:linear-gradient(90deg,#14204D,#0F3B3A);color:#EDEBF7}
.app-cta b{display:block}.app-cta span{font-size:13px;color:#AEB3D1}
.app-cta a{margin-left:auto;background:#E9C27A;color:#2A1B00;padding:10px 16px;border-radius:99px;text-decoration:none;font-weight:600;white-space:nowrap}
.divider{display:flex;align-items:center;gap:10px;color:var(--gold);margin:22px 0}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.divider:after{background:linear-gradient(90deg,var(--gold),transparent)}
article p{font-family:"Noto Serif Bengali",serif;font-size:19px;line-height:1.95;margin:0 0 18px}
html[lang=en] article p{font-family:Literata,Georgia,serif;font-size:19px;line-height:1.75}
html[lang=en] article>p:first-of-type::first-letter{font-family:Cormorant,serif;font-weight:700;font-size:3.3em;float:left;line-height:.85;margin:6px 8px 0 0;color:var(--gold)}
article h2{font-family:"Tiro Bangla",serif;font-weight:400;color:var(--gold);font-size:23px;margin:28px 0 8px}
html[lang=en] article h2{font-family:Cormorant,serif;font-weight:700;font-size:26px}
.ayah{margin:28px 0;padding:30px 24px;text-align:center;background:var(--ayah);outline:1.5px solid var(--gold);outline-offset:-10px;border-radius:6px}
.ayah .ar{font-family:"Amiri Quran",serif;font-size:29px;line-height:2.1;direction:rtl;color:var(--ayahar)}
.ayah .tr{font-family:"Noto Serif Bengali",serif;font-size:16px;line-height:1.85;margin-top:6px}
html[lang=en] .ayah .tr{font-family:Literata,serif;font-style:italic}
.ayah .ref{color:var(--gold);font-size:13px;margin-top:6px}.ayah .src{color:var(--mist);font-size:12px}
.hadith{margin:24px 0;padding:18px 20px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.hadith .h{color:var(--gold);font-weight:600;font-size:14px}.hadith .t{font-family:"Noto Serif Bengali",serif;font-size:17px;line-height:1.8;margin:6px 0}
html[lang=en] .hadith .t{font-family:Literata,serif}
.hadith .r{color:var(--gold);font-size:13px}
.note{margin:20px 0;padding:14px 16px;border-radius:12px;background:var(--panel);font-size:16px}
.lesson{margin:26px 0;padding:18px 20px;border-radius:18px;background:color-mix(in srgb,var(--gold) 12%,transparent)}
.lesson b{color:var(--gold)}
.sources{background:var(--panel);border-radius:18px;padding:18px 20px;margin:26px 0;font-size:15px;line-height:1.7}
.sources h2{font-size:17px;margin:0 0 8px;font-family:inherit;color:var(--ink)}
.sources small{color:var(--mist)}
.ad{margin:28px 0;min-height:100px;text-align:center}
.ad .lbl{font-size:11px;color:var(--mist);letter-spacing:.5px}
.next{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.next a{display:block;padding:14px;border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--ink)}
.next small{color:var(--gold);display:block}
.next strong{font-family:"Tiro Bangla",serif;font-weight:400;font-size:18px}
html[lang=en] .next strong{font-family:Cormorant,serif;font-weight:700;font-size:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px;margin:18px 0 30px}
.card{text-decoration:none;color:var(--ink)}
.card .cv{aspect-ratio:.75;border-radius:50% 50% 8px 8px/36% 36% 8px 8px;overflow:hidden;position:relative}
.card .cv svg{display:block;width:100%;height:100%}
.card .ar{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-family:"Aref Ruqaa";font-size:22px}
.card b{display:block;margin-top:8px;font-family:"Tiro Bangla",serif;font-weight:400;font-size:18px}
html[lang=en] .card b{font-family:Cormorant,serif;font-weight:700;font-size:20px}
.card span{font-size:13px;color:var(--mist)}
.list{list-style:none;padding:0;margin:10px 0 30px}
.list li{border-bottom:1px solid var(--line)}
.list a{display:flex;gap:14px;align-items:center;padding:12px 0;text-decoration:none;color:var(--ink)}
.list .n{font-family:Cormorant,serif;font-weight:700;color:var(--gold);font-size:22px;min-width:32px;text-align:center}
.list b{font-family:"Tiro Bangla",serif;font-weight:400;font-size:18px;display:block}
html[lang=en] .list b{font-family:Cormorant,serif;font-weight:700;font-size:20px}
.list small{color:var(--mist)}
h2.sec{font-family:"Tiro Bangla",serif;font-weight:400;font-size:26px;margin:30px 0 4px;display:flex;justify-content:space-between;align-items:baseline}
html[lang=en] h2.sec{font-family:Cormorant,serif;font-weight:700;font-size:28px}
h2.sec span{font-family:"Aref Ruqaa";color:var(--gold);font-size:20px}
.prose{font-size:17px;line-height:1.8}
.prose h2{font-family:inherit;font-size:21px;color:var(--gold);margin-top:28px}
footer{border-top:1px solid var(--line);margin-top:40px;padding:24px 16px 40px;text-align:center;color:var(--mist);font-size:14px}
footer .ruq{font-family:"Aref Ruqaa";font-size:26px;color:var(--gold)}
.lanterns{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:0 8%;pointer-events:none}
.lantern{transform-origin:top center;animation:sway 3.6s ease-in-out infinite alternate}
.lantern:nth-child(2){animation-duration:4.2s}
@keyframes sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.lantern{animation:none}}
@media (max-width:900px){nav.main{display:none}}
@media (max-width:640px){.next{grid-template-columns:1fr}.app-cta{flex-wrap:wrap}.app-cta a{margin-left:0}.lanterns{padding:0 2%}}