@font-face{font-family:HafsSmart;src:url(/assets/fonts/HafsSmart_08.ttf) format("truetype");font-weight:400;font-style:normal;font-display:block}:root{--font-scale: 1;--font-ui: "Geeza Pro", "Arabic Typesetting", "Noto Naskh Arabic", "Segoe UI", Tahoma, serif;--font-quran: "HafsSmart", serif;--bg0: #f3efe6;--bg1: #e7e0d2;--ink: #1f2a24;--muted: #5a665e;--line: rgba(31, 42, 36, .12);--panel: rgba(255, 252, 246, .94);--accent: #2f5d50;--accent-soft: rgba(47, 93, 80, .12);--focus: #c47b2d;--ayah-size: calc(1.55rem * var(--font-scale));--ui-size: .95rem;--max-read: 42rem;--pad: clamp(1rem, 3vw, 1.75rem);--motion: .18s ease}html[data-theme=dark]{--bg0: #121816;--bg1: #1a2420;--ink: #e8efe9;--muted: #a7b4ab;--line: rgba(232, 239, 233, .14);--panel: rgba(20, 28, 25, .94);--accent: #8fbfa8;--accent-soft: rgba(143, 191, 168, .14);--focus: #e0a45a}*,*:before,*:after{box-sizing:border-box}html{color-scheme:light;overflow-x:hidden}html[data-theme=dark]{color-scheme:dark}html,body{margin:0;min-height:100%}body{font-family:var(--font-ui);color:var(--ink);background:radial-gradient(1200px 600px at 10% -10%,rgba(47,93,80,.14),transparent 55%),radial-gradient(900px 500px at 100% 0%,rgba(196,123,45,.1),transparent 50%),linear-gradient(180deg,var(--bg0),var(--bg1));line-height:1.7;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;overflow-x:hidden}button,select,summary{-webkit-tap-highlight-color:transparent}a{color:var(--accent)}:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.skip-link{position:absolute;inset-inline-start:1rem;top:-3rem;z-index:30;padding:.5rem .75rem;border-radius:.5rem;background:var(--panel);color:var(--ink);transition:top var(--motion)}.skip-link:focus{top:.75rem}.topbar{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:color-mix(in srgb,var(--panel) 92%,transparent);border-bottom:1px solid var(--line);box-shadow:0 4px 16px #1f2a240d}.topbar-inner{position:relative;max-width:calc(var(--max-read) + 4rem);min-height:4.55rem;margin:0 auto;padding:max(.55rem,env(safe-area-inset-top)) var(--pad) .55rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem}.brand{grid-column:2;text-align:center;white-space:nowrap}.brand h1{margin:0;font-size:clamp(1.3rem,3vw,1.6rem);font-weight:700}.brand p{margin:.05rem 0 0;color:var(--muted);font-size:.82rem}.reader-settings{grid-column:1;justify-self:start;position:relative}.reader-settings summary{list-style:none;min-width:2.65rem;min-height:2.65rem;padding:.4rem .75rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--panel) 88%,white 12%);color:var(--ink);cursor:pointer;font:inherit;font-size:.84rem;-webkit-user-select:none;user-select:none}.reader-settings summary::-webkit-details-marker{display:none}.reader-settings summary:before{content:"☰";font-size:.9rem;line-height:1}.reader-settings[open] summary{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:var(--accent-soft)}.settings-panel{position:absolute;top:calc(100% + .65rem);inset-inline-start:0;width:min(21rem,calc(100vw - 2rem));max-height:min(70vh,30rem);overflow-y:auto;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--panel);box-shadow:0 18px 55px #1f2a242e;overscroll-behavior:contain}.language-wrap{display:grid;gap:.35rem}.language-wrap label,.language-status{color:var(--muted);font-size:.78rem}.language-select,.control-btn{appearance:none;border:1px solid var(--line);border-radius:.7rem;background:color-mix(in srgb,var(--panel) 84%,white 16%);color:var(--ink);min-height:2.75rem;padding:.45rem .7rem;font:inherit;font-size:var(--ui-size)}html[data-theme=dark] .language-select,html[data-theme=dark] .control-btn,html[data-theme=dark] .reader-settings summary{background:color-mix(in srgb,var(--panel) 86%,black 14%)}.language-select{width:100%}.language-select option:disabled{color:#999}.controls{margin-top:.7rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}.control-btn{cursor:pointer;transition:background var(--motion),border-color var(--motion),transform var(--motion)}.control-btn:hover,.language-select:hover,.reader-settings summary:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:var(--accent-soft)}.control-btn:active{transform:translateY(1px)}.control-btn-wide{grid-column:1 / -1}.language-status{margin:.55rem 0 0}.language-status[hidden]{display:none}main{max-width:var(--max-read);margin:0 auto;padding:1rem var(--pad) max(2.4rem,env(safe-area-inset-bottom))}.ayah-list{display:flex;flex-direction:column;gap:.9rem}.ayah{padding-block:.15rem}.ayah-text{margin:0;font-family:var(--font-quran);font-size:var(--ayah-size);line-height:2;text-align:start;white-space:normal;overflow-wrap:normal;word-break:keep-all;font-kerning:normal}.ayah-translation{margin-top:.65rem;padding-top:.6rem;border-top:1px solid var(--line)}.ayah-translation-label{margin:0 0 .25rem;color:var(--muted);font-size:.78rem}.ayah-translation-text{margin:0;color:var(--ink);font-size:calc(1rem * var(--font-scale));line-height:1.75}.content-pending{margin-top:1.5rem;padding:1.2rem;border:1px dashed var(--line);border-radius:.75rem;background:var(--accent-soft)}.content-pending p{margin:0}@media(max-width:640px){.topbar-inner{min-height:4.2rem;padding-inline:.85rem}.brand h1{font-size:1.28rem}.brand p{font-size:.73rem}.reader-settings summary{width:2.65rem;padding:0;font-size:0}.reader-settings summary:before{font-size:1rem}main{padding-top:.8rem}.ayah-list{gap:.78rem}.ayah-text{line-height:1.94}}@media(max-width:360px){:root{--ayah-size: calc(1.45rem * var(--font-scale))}.brand p{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}