:root{--night:#0d1130;--lapis:#1a2a6c;--lapis-deep:#111b4a;--gold:#d6a94f;--gold-soft:#f0d38a;--ivory:#fdfaf3;--ivory-dim:#d8d0ba;--turq:#5fc4b8;--dawn:#eda58c;--line:#d6a94f47;--card:#0d113066;--radius:20px;--font-body:"Outfit", system-ui, sans-serif;--font-display:"Playfair Display", Georgia, serif;--font-arabic:"Amiri", "Scheherazade New", "Noto Naskh Arabic", serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:1ms!important;animation-duration:1ms!important}}body{font-family:var(--font-body);color:var(--ivory);background:radial-gradient(at top,#1a2a6c 0%,#0d1130 45%,#070a1f 100%) fixed;font-size:1.05rem;line-height:1.65;overflow-x:hidden}a{color:var(--turq)}button{cursor:pointer;font-family:inherit;transition:all .2s cubic-bezier(.2,.8,.2,1)}button:active{transform:scale(.96)}:focus-visible{outline:2px solid var(--turq);outline-offset:3px}@keyframes fadeUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}section{animation:.8s cubic-bezier(.16,1,.3,1) both fadeUp}section:nth-child(2){animation-delay:.1s}section:nth-child(3){animation-delay:.2s}section:nth-child(4){animation-delay:.3s}section:nth-child(5){animation-delay:.4s}.prayer,.tile,.stepper,.rakat-block,.card{background:var(--card);-webkit-backdrop-filter:blur(12px);border:1px solid #d6a94f26;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .4s;box-shadow:0 8px 32px #0000005e}.prayer:hover,.tile:hover,.rakat-block:hover{border-color:#d6a94f59;transform:translateY(-6px);box-shadow:0 16px 48px #00000073}#stars{z-index:0;pointer-events:none;position:fixed;inset:0}.hud{z-index:50;-webkit-backdrop-filter:blur(16px);background:#0d1130cc;border-bottom:1px solid #d6a94f26;align-items:center;gap:16px;padding:14px 24px;display:flex;position:sticky;top:0}.hud .name{font-family:var(--font-display);letter-spacing:.03em;color:var(--gold-soft);font-size:1.45rem;font-weight:700}.hud .bar{background:#ffffff14;border-radius:99px;flex:1;height:10px;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #0003}.hud .bar i{background:linear-gradient(90deg, var(--turq), var(--gold));border-radius:99px;width:0;height:100%;transition:width .6s cubic-bezier(.2,.8,.2,1);display:block}.hud .xp{color:var(--ivory-dim);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.9rem;font-weight:500}.hud .xp b{color:var(--gold-soft);font-size:1.05rem;font-weight:600}.lang{border:1px solid var(--line);border-radius:99px;flex-shrink:0;display:flex;overflow:hidden}.lang button{color:var(--ivory-dim);background:#0003;border:0;padding:6px 14px;font-size:.85rem;font-weight:600;transition:all .2s}.lang button.on{background:var(--gold);color:var(--night)}.lang button:not(.on):hover{background:#ffffff1a}@media (width<=480px){.hud{gap:10px;padding:12px 14px}.hud .name{font-size:1.2rem}.hud .xp{font-size:.8rem}.hud .xp b{font-size:.9rem}}main{z-index:1;max-width:1040px;margin:0 auto;padding:0 24px 120px;position:relative}section{padding:80px 0 50px;position:relative}.thread{z-index:0;pointer-events:none;background:linear-gradient(#0000,#d6a94f33 15% 85%,#0000);width:1px;position:absolute;top:0;bottom:0;left:50%}@media (width<=760px){.thread{display:none}section{padding:60px 0 40px}}.node{background:var(--night);border:2px solid var(--gold);z-index:1;border-radius:50%;width:16px;height:16px;margin:0 auto 24px;transition:all .4s;position:relative;box-shadow:0 0 0 8px #d6a94f1f}.node.done{background:var(--gold);box-shadow:0 0 26px var(--gold)}h2{font-family:var(--font-display);text-align:center;margin-bottom:12px;font-size:clamp(2.2rem,5vw,3.2rem);font-weight:600;line-height:1.15}.sub{text-align:center;color:var(--ivory-dim);max-width:65ch;margin:0 auto 46px;font-size:1.12rem;font-weight:300}.sub .tr{color:var(--turq);opacity:.95;margin-top:6px;font-size:1rem;display:block}@media (width<=480px){.sub{margin-bottom:32px;font-size:1.05rem}}.hero{text-align:center;padding:90px 0 50px}@media (width<=480px){.hero{padding:50px 0 30px}}.hero .star{filter:drop-shadow(0 0 30px #d6a94f33);width:min(320px,75vw);margin:0 auto 32px;display:block}.hero h1{font-family:var(--font-display);letter-spacing:-.02em;font-size:clamp(2.6rem,8vw,5.2rem);font-weight:700;line-height:1.05}.hero h1 span{font-family:var(--font-arabic);color:var(--gold-soft);text-shadow:0 0 20px #f0d38a4d;direction:rtl;margin-top:12px;font-size:.7em;font-weight:400;display:block}.hero p{max-width:58ch;color:var(--ivory-dim);margin:28px auto 0;font-size:1.15rem;font-weight:300}@media (width<=480px){.hero p{font-size:1.05rem}}.hero .cta{background:linear-gradient(135deg, var(--gold-soft), var(--gold));color:var(--night);border:0;border-radius:99px;margin-top:40px;padding:16px 36px;font-size:1.1rem;font-weight:700;text-decoration:none;transition:all .3s;display:inline-block;box-shadow:0 8px 24px #d6a94f66}.hero .cta:hover{transform:translateY(-3px)scale(1.02);box-shadow:0 12px 32px #d6a94f80}.badges{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px;display:flex}.badge{border:1px solid var(--line);color:var(--ivory-dim);opacity:.6;background:#0003;border-radius:99px;align-items:center;gap:8px;padding:8px 18px;font-size:.85rem;font-weight:500;transition:all .4s;display:flex}.badge.on{opacity:1;border-color:var(--gold);color:var(--gold-soft);background:#d6a94f26;box-shadow:0 0 16px #d6a94f26}.prayers{grid-template-columns:repeat(5,1fr);gap:16px;display:grid}@media (width<=900px){.prayers{grid-template-columns:repeat(3,1fr)}}@media (width<=600px){.prayers{grid-template-columns:repeat(2,1fr)}}@media (width<=400px){.prayers{grid-template-columns:1fr}}.prayer{border-radius:var(--radius);text-align:center;padding:22px 18px;position:relative;overflow:hidden}.prayer .sky{border-radius:12px;height:48px;margin-bottom:16px;box-shadow:inset 0 2px 10px #0003}.prayer h3{font-family:var(--font-display);margin-bottom:2px;font-size:1.7rem;font-weight:600}.prayer .ar{font-family:var(--font-arabic);color:var(--gold-soft);direction:rtl;font-size:1.4rem}.prayer .rak{font-size:2.6rem;font-family:var(--font-display);color:var(--turq);text-shadow:0 0 16px #5fc4b84d;margin:12px 0 6px;font-weight:700;line-height:1}.prayer small{color:var(--ivory-dim);font-size:.85rem;font-weight:300;line-height:1.5;display:block}.prep{grid-template-columns:1fr 1fr;gap:20px;display:grid}@media (width<=800px){.prep{grid-template-columns:1fr}}.tile{border-radius:var(--radius);padding:28px}.tile h3{font-family:var(--font-display);color:var(--gold-soft);margin-bottom:12px;font-size:1.6rem;font-weight:600}.tile ol{color:var(--ivory);padding-left:24px;font-size:1rem;font-weight:300}.tile ol li{margin:8px 0;padding-left:4px}.tile p{font-size:1rem;font-weight:300}.tile .tr{color:var(--turq);margin-top:12px;font-size:.95rem}.stepper{border-radius:28px;grid-template-columns:260px 1fr;align-items:start;gap:32px;padding:28px;display:grid}@media (width<=760px){.stepper{grid-template-columns:1fr;gap:24px;padding:22px}.pose{min-height:200px}}.pose{background:radial-gradient(circle at 50% 70%,#5fc4b833,#0000 70%);border:1px solid #5fc4b81a;border-radius:20px;justify-content:center;align-items:center;min-height:260px;padding:16px;display:flex}.pose svg{filter:drop-shadow(0 4px 12px #0000004d);width:100%;max-width:220px}.pose .fig{stroke:var(--gold-soft);stroke-width:5px;stroke-linecap:round;stroke-linejoin:round;fill:none}.pose .head{fill:var(--gold-soft);stroke:none}.pose .ground{stroke:var(--turq);stroke-width:2px;opacity:.6}.step-body h3{font-family:var(--font-display);margin-bottom:4px;font-size:2.2rem;font-weight:600;line-height:1.1}@media (width<=480px){.step-body h3{font-size:1.8rem}}.step-body .count{letter-spacing:.05em;text-transform:uppercase;color:var(--ivory-dim);margin-bottom:8px;font-size:.85rem;font-weight:600}.say{background:#00000040;border:1px solid #ffffff14;border-radius:16px;margin:18px 0;padding:20px 24px;box-shadow:inset 0 2px 12px #0003}.say .ar{font-family:var(--font-arabic);text-align:right;color:var(--gold-soft);text-shadow:0 2px 10px #0000004d;direction:rtl;font-size:2.2rem;line-height:1.8}@media (width<=480px){.say .ar{font-size:1.8rem}.say{padding:16px}}.say .tl{color:var(--turq);margin-top:8px;font-size:1.05rem;font-style:italic}.say .en,.say .trm{margin-top:8px;font-size:1rem;font-weight:300}.say .trm{color:var(--ivory-dim)}.step-body .how{font-size:1.05rem;font-weight:300}.step-body .how .tr{color:var(--turq);margin-top:8px;font-size:.95rem;display:block}.step-nav{flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px;display:flex}.btn{color:var(--ivory);background:#ffffff0d;border:1px solid #ffffff26;border-radius:99px;padding:12px 22px;font-size:.95rem;font-weight:500}.btn:hover:not(:disabled){background:#ffffff1a;border-color:#ffffff4d}.btn:disabled{opacity:.4;pointer-events:none}.btn.gold{background:linear-gradient(135deg, var(--gold-soft), var(--gold));color:var(--night);border:none;font-weight:600;box-shadow:0 4px 14px #d6a94f4d}.btn.gold:hover:not(:disabled){box-shadow:0 6px 20px #d6a94f73}.btn.done{background:var(--turq);border-color:var(--turq);color:var(--night);font-weight:600;box-shadow:0 4px 14px #5fc4b84d}.dots{flex-wrap:wrap;gap:8px;margin-top:20px;display:flex}.dots button{width:32px;height:32px;color:var(--ivory-dim);background:#0003;border:1px solid #ffffff26;border-radius:50%;font-size:.8rem;font-weight:600}.dots button.cur{border-color:var(--gold);color:var(--gold-soft);background:#d6a94f1a;transform:scale(1.1);box-shadow:0 0 12px #d6a94f33}.dots button.ok{background:var(--turq);border-color:var(--turq);color:var(--night)}.assemble{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}@media (width<=800px){.assemble{grid-template-columns:1fr}}.rakat-block{border-radius:var(--radius);padding:22px}.rakat-block h3{font-family:var(--font-display);color:var(--gold-soft);font-size:1.6rem;font-weight:600}.rakat-block small{color:var(--ivory-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;font-size:.85rem;font-weight:500;display:block}.chain{flex-direction:column;gap:8px;font-size:.95rem;font-weight:300;display:flex}.chain span{background:#0003;border:1px solid #ffffff14;border-radius:10px;padding:8px 12px;box-shadow:inset 0 1px 4px #0000001a}.chain span.sit{color:var(--turq);background:#5fc4b80d;border-color:#5fc4b84d}.chain span.end{color:var(--gold-soft);background:#d6a94f0d;border-color:#d6a94f4d}.mem-tabs{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:24px;display:flex}.mem-tabs button{color:var(--ivory-dim);background:#ffffff08;border:1px solid #ffffff26;border-radius:99px;padding:10px 18px;font-size:.95rem;font-weight:500}.mem-tabs button.on{border-color:var(--gold);color:var(--gold-soft);background:#d6a94f26;box-shadow:0 0 16px #d6a94f33}.mem-tabs button.learned:after{content:" ✓";color:var(--turq)}.card{border-radius:32px;padding:36px;position:relative;overflow:hidden}@media (width<=600px){.card{border-radius:24px;padding:24px}}.card:before{content:"";pointer-events:none;background:radial-gradient(circle,#d6a94f1f,#0000 65%);border-radius:50%;width:300px;height:300px;position:absolute;inset:-40% -20% auto auto}.card h3{font-family:var(--font-display);margin-bottom:4px;font-size:2.4rem;font-weight:600;line-height:1.1}.card .meta{color:var(--ivory-dim);margin-bottom:24px;font-size:.95rem;font-weight:300}.card .ar{font-family:var(--font-arabic);text-align:right;color:var(--gold-soft);text-shadow:0 2px 12px #0000004d;direction:rtl;font-size:2.4rem;line-height:2.1}@media (width<=480px){.card .ar{font-size:1.9rem;line-height:1.9}}.card .ar .v{margin-bottom:8px;display:block}.card .ar .n{color:var(--turq);vertical-align:middle;opacity:.8;margin-right:10px;font-size:.5em}.tl-block{color:var(--turq);margin-top:16px;font-size:1.1rem;font-style:italic;line-height:1.8}.mean{grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;display:grid}@media (width<=760px){.mean{grid-template-columns:1fr}}.mean div{background:#00000040;border:1px solid #ffffff14;border-radius:16px;padding:20px;font-size:1rem;font-weight:300;box-shadow:inset 0 2px 10px #00000026}.mean div b{font-family:var(--font-display);color:var(--gold-soft);letter-spacing:.02em;margin-bottom:8px;font-size:1.3rem;font-weight:600;display:block}.why{border-left:3px solid var(--turq);color:var(--ivory);background:linear-gradient(90deg,#5fc4b81a,#0000);border-radius:0 12px 12px 0;margin-top:20px;padding:10px 18px;font-size:1rem}.why .tr{color:var(--ivory-dim);margin-top:8px;font-weight:300;display:block}.mode{flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px;display:flex}.hide-tl .tl-block,.hide-mean .mean,.hide-mean .why{filter:blur(10px);opacity:.7;-webkit-user-select:none;user-select:none;cursor:pointer;transition:all .4s}@media (hover:hover){.hide-tl .tl-block:hover,.hide-mean .mean:hover{filter:blur();opacity:1}}.hope{-webkit-backdrop-filter:blur(12px);text-align:center;background:linear-gradient(160deg,#1a2a6c99,#0d113080);border:1px solid #d6a94f33;border-radius:36px;padding:48px 32px;box-shadow:0 16px 48px #0006}@media (width<=600px){.hope{border-radius:28px;padding:32px 20px}}.hope p{max-width:60ch;margin:0 auto 16px;font-size:1.15rem;font-weight:300}.hope .tr{color:var(--turq);font-size:1.05rem}.hope .quote{font-family:var(--font-display);max-width:48ch;color:var(--gold-soft);text-shadow:0 2px 12px #0000004d;margin:32px auto;font-size:1.8rem;font-style:italic;line-height:1.4}@media (width<=480px){.hope .quote{margin:24px auto;font-size:1.4rem}}.streak{justify-content:center;gap:12px;margin:24px 0;display:flex}.streak span{width:44px;height:44px;color:var(--ivory-dim);cursor:pointer;background:#0003;border:1px solid #fff3;border-radius:50%;place-items:center;font-size:.85rem;font-weight:600;transition:all .3s cubic-bezier(.2,.8,.2,1);display:grid}.streak span:hover{background:#ffffff1a;transform:scale(1.05)}.streak span:active{transform:scale(.95)}.streak span.lit{background:linear-gradient(135deg, var(--gold-soft), var(--gold));color:var(--night);border:none;transform:scale(1.1);box-shadow:0 0 20px #d6a94f80}.foot{text-align:center;color:var(--ivory-dim);opacity:.7;margin-top:80px;font-size:.9rem;font-weight:300;line-height:1.8}.toast{background:linear-gradient(135deg, var(--gold-soft), var(--gold));color:var(--night);opacity:0;z-index:100;pointer-events:none;white-space:nowrap;border-radius:99px;padding:14px 28px;font-size:1.05rem;font-weight:700;transition:all .4s cubic-bezier(.16,1,.3,1);position:fixed;bottom:32px;left:50%;transform:translate(-50%)translateY(30px)scale(.95);box-shadow:0 8px 32px #0006}@media (width<=480px){.toast{padding:12px 24px;font-size:.95rem;bottom:24px}}.toast.show{opacity:1;transform:translate(-50%)translateY(0)scale(1)}.lang .btn-install{color:var(--turq);border-right:1px solid var(--line);background:#5fc4b826}.lang .btn-install:hover{background:var(--turq);color:var(--night)}.ar-header{justify-content:flex-end;align-items:flex-start;gap:16px;display:flex}.ar-header .ar{flex:1}.btn-play{color:var(--turq);background:#ffffff14;border:1px solid #ffffff26;border-radius:50%;flex-shrink:0;place-items:center;width:44px;height:44px;margin-top:8px;transition:all .3s cubic-bezier(.16,1,.3,1);display:grid}.btn-play:hover{background:var(--turq);color:var(--night);transform:scale(1.1);box-shadow:0 4px 16px #5fc4b866}.btn-play:active{transform:scale(.95)}