*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--cream:#f7f4ef;--purple:#3c1e5c;--bg:var(--cream);--surface:#fffdf8;--text:#1f2a24;--muted:#5c6b64;--accent:var(--purple);--accent-soft:#d8e8df;--border:#e4ddd2;--header-bg:var(--purple);--header-text:#fff;--header-border:rgba(255,255,255,0.45);--on-accent:#fff;--shadow:rgba(60,30,92,0.14);color-scheme:light}html[data-theme=dark]{--bg:var(--purple);--surface:#4a2768;--text:var(--cream);--muted:#d9cce6;--accent:var(--cream);--accent-soft:rgba(247,244,239,0.16);--border:rgba(247,244,239,0.22);--header-bg:var(--cream);--header-text:var(--purple);--header-border:rgba(60,30,92,0.35);--on-accent:var(--purple);--shadow:rgba(247,244,239,0.12);color-scheme:dark}body{font-family:Georgia,Times New Roman,serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}.container{width:min(960px,calc(100% - 2rem));margin-inline:auto}.site-header{background:var(--header-bg);color:var(--header-text);padding:1.5rem 0 2.5rem;text-align:center}.header-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1.5rem;margin-bottom:1.75rem;text-align:left}.site-logo{display:inline-flex;align-items:center;gap:.6rem;color:var(--header-text);text-decoration:none;letter-spacing:.04em}.site-logo img{display:block;width:1.85rem;height:1.85rem;flex-shrink:0}.header-actions{align-items:center;gap:.65rem 1.1rem}.header-actions,.site-nav{display:flex;flex-wrap:wrap}.site-nav{gap:.35rem 1.1rem}.site-nav a{color:var(--header-text);text-decoration:none;opacity:.75;font-size:.95rem}.theme-toggle{display:inline-flex;align-items:center;width:3.2rem;height:1.75rem;padding:.16rem;border:1px solid var(--header-border);border-radius:999px;background:color-mix(in srgb,var(--header-text) 14%,transparent);cursor:pointer}.theme-switch{display:flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border-radius:50%;background:linear-gradient(145deg,#a078d4,#6b3fa0 42%,#3c1e5c);box-shadow:0 1px 3px var(--shadow);transform:translateX(1.42rem);transition:transform .18s ease}.theme-toggle svg{width:.82rem;height:.82rem;fill:#f7f4ef}html[data-theme=light] .theme-switch{transform:translateX(0)}.theme-toggle:hover{background:color-mix(in srgb,var(--header-text) 20%,transparent)}.theme-toggle:focus-visible{outline:2px solid var(--header-text);outline-offset:3px}.site-nav a.is-active,.site-nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}.site-header h1{font-size:2rem;font-weight:400;letter-spacing:.04em}.site-header .bismillah{font-family:Geeza Pro,Noto Naskh Arabic,Traditional Arabic,serif;font-size:clamp(1.6rem,4.5vw,2.4rem);letter-spacing:0;line-height:1.7;opacity:1}.faq-item+.faq-item{margin-top:1.25rem}.faq-item h3{font-size:1.05rem;font-weight:400;color:var(--accent);margin-bottom:.4rem}.faq-item p{color:var(--muted)}.site-header p{margin-top:.35rem;opacity:.85}#name-arabic{font-size:1.75rem;opacity:1}.header-audio-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;margin-top:1rem;padding:.45rem 1rem;border:1px solid var(--header-border);border-radius:999px;background:transparent;color:var(--header-text);font:inherit;font-size:.95rem;cursor:pointer}.header-audio-btn[hidden]{display:none}.header-audio-btn svg{width:1.1rem;height:1.1rem;fill:currentColor}.header-audio-btn.is-playing,.header-audio-btn:hover{background:color-mix(in srgb,var(--header-text) 14%,transparent)}.header-audio-btn.is-playing{animation:audio-pulse 1.4s ease-in-out infinite}.header-audio-btn:focus-visible{outline:2px solid var(--header-text);outline-offset:3px}main{flex:1 1;padding:2.5rem 0 3rem;min-width:0}section+section{margin-top:2.5rem}h2{font-size:1.25rem;font-weight:400;color:var(--accent);margin-bottom:.75rem}.home-video p,.intro p{color:var(--muted);max-width:42rem}.video-frame{position:relative;width:100%;aspect-ratio:16/9;margin-top:1rem;overflow:hidden;border-radius:12px;border:1px solid var(--border);background:var(--surface)}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.names-index{margin:1.5rem 0 2rem}.names-index>p{color:var(--muted);max-width:42rem;margin-bottom:1rem}.names-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.names-table{width:100%;border-collapse:collapse;font-size:.95rem}.names-table td,.names-table th{padding:.65rem .85rem;text-align:start;border-bottom:1px solid var(--border);vertical-align:top}.names-table th{font-weight:600;color:var(--accent);background:var(--accent-soft)}.names-table tbody tr:last-child td,.names-table tbody tr:last-child th{border-bottom:0}.names-table td[lang=ar]{font-size:1.15rem;white-space:nowrap}.names-table a{color:var(--accent);text-decoration:none;font-weight:600}.names-table a:hover{text-decoration:underline}.names-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-gap:.75rem;gap:.75rem}.name-card-wrap{position:relative}.name-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1rem;text-align:center;text-decoration:none;color:inherit;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.name-card-wrap:hover .name-card,.name-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 8px 18px var(--shadow)}.name-audio-btn{position:absolute;top:.4rem;right:.4rem;z-index:1;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}@media (hover:hover) and (pointer:fine){.name-audio-btn{opacity:0}.name-audio-btn.is-playing,.name-card-wrap:focus-within .name-audio-btn,.name-card-wrap:hover .name-audio-btn{opacity:1}}.name-audio-btn svg{width:1.05rem;height:1.05rem;fill:currentColor}.name-audio-btn.is-playing,.name-audio-btn:hover{color:var(--accent);background:var(--accent-soft)}.name-audio-btn.is-playing{animation:audio-pulse 1.4s ease-in-out infinite}.name-audio-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@keyframes audio-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.name-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.name-card .number{font-size:.75rem;color:var(--muted)}.name-card .arabic{font-size:1.35rem;margin:.35rem 0 .15rem}.name-card .transliteration{color:var(--muted);font-size:.9rem}.header-kicker{margin-bottom:.5rem;font-size:.9rem}.header-kicker a{color:inherit;text-decoration:none;opacity:.85}.header-kicker a:hover{text-decoration:underline}.detail-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.5rem}.detail-number{color:var(--muted);font-size:.9rem;margin-bottom:.75rem}.detail-meaning{font-size:1.15rem;margin:.5rem 0 1.5rem}.detail-card .dua-card{margin:.5rem 0 1rem}.detail-dua-note{color:var(--muted);font-size:.95rem;margin-bottom:1.25rem}.back-link,.detail-dua-note a{color:var(--accent)}.detail-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border)}.detail-nav a{color:var(--accent);text-decoration:none}.detail-nav a:hover{text-decoration:underline}.page-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));grid-gap:.75rem;gap:.75rem;margin-top:2rem}.page-link-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1rem 1.1rem;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.page-link-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 18px var(--shadow)}.page-link-card p{color:var(--muted);font-size:.95rem;margin-top:.35rem}.dua-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:.75rem;gap:.75rem}.dua-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.1rem 1.15rem}.dua-need{font-size:.8rem;color:var(--muted);letter-spacing:.02em}.dua-card .arabic{font-size:1.35rem;margin:.45rem 0 .15rem}.dua-card .transliteration{margin-bottom:.65rem}.dua-card .transliteration a{color:var(--accent);text-decoration:none}.dua-card .transliteration a:hover{text-decoration:underline}.dua-card p:last-child{color:var(--muted)}.dua-more{margin-top:1.25rem}.dua-more a{color:var(--accent)}.prose{max-width:42rem}.intro-line,.prose p{color:var(--muted)}.intro-line{margin-bottom:1rem}.prose section+section,main>section+section{margin-top:2.5rem}.quote{border-left:3px solid var(--accent);padding:.2rem 0 .2rem 1rem;margin:1rem 0;color:var(--muted);font-style:italic}.quote cite{display:block;margin-top:.35rem;font-style:normal;font-size:.85rem;opacity:.85}.plain-list,.step-list{color:var(--muted);padding-left:1.2rem;margin-top:.75rem}.plain-list li+li,.step-list li+li{margin-top:.45rem}.plain-list a,.prose a{color:var(--accent)}.quiz-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.5rem}.quiz-meta{color:var(--muted);font-size:.9rem;margin-bottom:1.25rem}.quiz-prompt{text-align:center;margin-bottom:1.5rem}.quiz-label{color:var(--muted)}.quiz-arabic{font-size:2rem;margin:.4rem 0 .15rem}.quiz-transliteration{color:var(--accent);font-size:1.15rem}.quiz-options{display:grid;grid-gap:.6rem;gap:.6rem}.quiz-next,.quiz-option{font:inherit;cursor:pointer;border-radius:10px;padding:.85rem 1rem;text-align:left}.quiz-option{background:var(--bg);border:1px solid var(--border);color:var(--text)}.quiz-option:hover:not(:disabled){border-color:var(--accent)}.quiz-option.is-correct{border-color:#1e5c45;background:#e7f3ec}.quiz-option.is-wrong{border-color:#8b3a3a;background:#f8ecec}html[data-theme=dark] .quiz-option.is-correct{border-color:#8fd4b0;background:rgba(30,92,69,.4)}html[data-theme=dark] .quiz-option.is-wrong{border-color:#e0a0a0;background:rgba(139,58,58,.4)}.quiz-option:disabled{cursor:default}.quiz-feedback{min-height:1.5em;margin-top:1rem;color:var(--muted)}.quiz-next{margin-top:1.25rem;background:var(--accent);color:var(--on-accent);border:0;text-align:center;width:100%}.quiz-next:hover{opacity:.92}.note-label{display:block;color:var(--muted);font-size:.9rem;margin-bottom:.45rem}.note-input{display:block;width:100%;font:inherit;line-height:1.55;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:.85rem 1rem;resize:vertical;min-height:8rem}.note-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.note-secondary{display:block;width:100%;margin-top:.6rem;padding:.7rem 1rem;font:inherit;cursor:pointer;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--accent)}.note-secondary:hover{border-color:var(--accent)}.notes-list{display:grid;grid-gap:.75rem;gap:.75rem;margin-top:1rem}.note-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.1rem 1.15rem}.note-card-meta{color:var(--muted);font-size:.85rem;margin-bottom:.45rem}.note-card-meta a{color:var(--accent);text-decoration:none}.note-card-meta a:hover{text-decoration:underline}.note-card-body{white-space:pre-wrap;color:var(--text)}.note-card-actions{display:flex;gap:.75rem;margin-top:.85rem}.note-card-actions button{font:inherit;font-size:.9rem;cursor:pointer;background:none;border:0;padding:0;color:var(--accent)}.note-card-actions .note-delete{color:var(--muted)}.note-card-actions button:hover{text-decoration:underline}input.note-input{min-height:0}.feedback-card{box-sizing:border-box;display:block;width:auto;max-width:100%;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.5rem}.feedback-card h2{margin-bottom:.4rem}.feedback-card .note-input,.feedback-submit{box-sizing:border-box;max-width:100%}.feedback-card .note-input{width:100%;min-width:0}.feedback-row{display:grid;grid-template-columns:1fr;grid-gap:.85rem;gap:.85rem;margin-bottom:1rem}@media (min-width:560px){.feedback-row{grid-template-columns:1fr 1fr}}.feedback-field{display:flex;flex-direction:column;min-width:0}.feedback-field textarea.note-input{margin-bottom:.35rem}.about-end,.feedback-topics{min-width:0;max-width:100%}.feedback-topics{margin:0 0 1rem;padding:0;width:100%;display:flex;flex-wrap:wrap;gap:.5rem}.feedback-topics .note-label{flex:1 0 100%;margin-bottom:.15rem}.feedback-topic{position:relative;flex:0 0 auto}.feedback-topic input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}.feedback-topic span{display:inline-block;padding:.4rem .9rem;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.9rem;cursor:pointer;white-space:nowrap}.feedback-topic:hover span{border-color:var(--accent)}.feedback-topic input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.feedback-topic:has(input:focus-visible) span{outline:2px solid var(--accent);outline-offset:2px}.feedback-actions{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;margin-top:1rem}.feedback-honey{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.feedback-hint{color:var(--muted);font-size:.85rem;max-width:22rem;line-height:1.45}.feedback-submit{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;margin-left:auto;padding:.7rem 1.2rem;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font:inherit;font-size:.95rem;cursor:pointer}.feedback-submit svg{width:1.05rem;height:1.05rem;fill:currentColor}.feedback-submit:hover:not(:disabled){opacity:.92}.feedback-submit:disabled{opacity:.6;cursor:default}.feedback-submit:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.feedback-card .quiz-feedback{margin-top:.75rem;min-height:0}@media (max-width:559px){.feedback-card{padding:1.15rem 1rem}.feedback-submit{width:100%;margin-left:0}.feedback-hint{max-width:none}}.site-footer{margin-top:auto;padding:1.35rem 0 1.6rem;background:var(--header-bg);color:color-mix(in srgb,var(--header-text) 82%,transparent);border-top:1px solid var(--header-border);font-size:.9rem}.site-footer p+p{margin-top:.5rem}.footer-links{display:flex;flex-wrap:wrap;gap:.65rem 1.15rem}.site-footer a{color:var(--header-text)}.site-footer a:hover{text-decoration:underline;text-underline-offset:3px}