@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, .97);--panel-solid: #fffaf2;--accent: #2f5d50;--accent-soft: rgba(47, 93, 80, .12);--focus: #c47b2d;--control: color-mix(in srgb, var(--panel-solid) 88%, white 12%);--control-hover: var(--accent-soft);--scrim: rgba(24, 32, 28, .34);--ayah-size: calc(1.55rem * var(--font-scale));--ui-size: .95rem;--max-read: 42rem;--pad: clamp(1rem, 3vw, 1.75rem);--motion: .18s ease;--motion-panel: .22s cubic-bezier(.22, 1, .36, 1);--radius-control: .7rem;--radius-panel: 1.05rem;--shadow-panel: 0 16px 40px rgba(31, 42, 36, .14)}html[data-theme=dark]{--bg0: #121816;--bg1: #1a2420;--ink: #e8efe9;--muted: #a7b4ab;--line: rgba(232, 239, 233, .14);--panel: rgba(22, 30, 27, .97);--panel-solid: #18201c;--accent: #8fbfa8;--accent-soft: rgba(143, 191, 168, .16);--focus: #e0a45a;--control: color-mix(in srgb, var(--panel-solid) 82%, #2a3630 18%);--control-hover: var(--accent-soft);--scrim: rgba(0, 0, 0, .55);--shadow-panel: 0 18px 44px rgba(0, 0, 0, .42)}*,*: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:40;padding:.5rem .75rem;border-radius:.5rem;background:var(--panel-solid);color:var(--ink);transition:top var(--motion)}.skip-link:focus{top:.75rem}.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--panel-solid) 94%,transparent);border-bottom:1px solid var(--line)}.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;min-width:0;text-align:center;white-space:nowrap}.brand h1{margin:0;font-size:clamp(1.28rem,3vw,1.55rem);font-weight:700;letter-spacing:.01em;line-height:1.25}.brand-subtitle{margin:.08rem 0 0;color:var(--muted);font-size:.8rem;line-height:1.35}.basmala{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:.15rem 0 1.15rem;font-family:var(--font-quran);font-size:calc(1.22rem * var(--font-scale));font-weight:400;line-height:1.7;letter-spacing:.03em;text-align:center;color:var(--accent);animation:fade-in .42s ease}.basmala:before,.basmala:after{content:"";width:clamp(1.4rem,5vw,2.4rem);height:1px;background:linear-gradient(to var(--basmala-line-dir, left),transparent,color-mix(in srgb,var(--accent) 55%,transparent));flex:0 0 auto}.basmala:before{--basmala-line-dir: left}.basmala:after{--basmala-line-dir: right}.reader-settings{grid-column:1;justify-self:start;position:relative;z-index:25}.tools-menu-btn{position:relative;z-index:28;grid-column:3;justify-self:end;appearance:none;min-width:2.65rem;min-height:2.65rem;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;background:var(--control);color:var(--ink);cursor:pointer;font:inherit;transition:background var(--motion),border-color var(--motion)}.tools-menu-btn:hover,.tools-menu-btn[aria-expanded=true]{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--control-hover)}.tools-menu-dots,.tools-menu-dots:before,.tools-menu-dots:after{display:block;width:.28rem;height:.28rem;border-radius:50%;background:currentColor}.tools-menu-dots{position:relative}.tools-menu-dots:before,.tools-menu-dots:after{content:"";position:absolute;inset-inline-start:0}.tools-menu-dots:before{top:-.42rem}.tools-menu-dots:after{top:.42rem}.reader-settings summary{list-style:none;min-width:2.65rem;min-height:2.65rem;padding:.4rem .85rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--line);border-radius:999px;background:var(--control);color:var(--ink);cursor:pointer;font:inherit;font-size:.84rem;-webkit-user-select:none;user-select:none;transition:background var(--motion),border-color var(--motion),transform var(--motion)}.reader-settings summary::-webkit-details-marker{display:none}.reader-settings summary:before{content:"";width:1rem;height:.78rem;background:linear-gradient(var(--ink),var(--ink)) 0 0 / 100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 50% / 100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 100% / 100% 2px no-repeat;opacity:.85}.reader-settings[open] summary{position:relative;z-index:27;border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:var(--accent-soft)}.reader-settings summary:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--control-hover)}.settings-scrim{display:none}.reader-settings[open] .settings-scrim{display:block;position:fixed;inset:0;z-index:24;background:var(--scrim);animation:fade-in var(--motion) ease}.settings-panel{position:absolute;top:calc(100% + .65rem);inset-inline-start:0;z-index:26;width:min(22.5rem,calc(100vw - 1.5rem));max-height:min(72vh,34rem);overflow-x:hidden;overflow-y:auto;padding:.95rem 1rem 1.05rem;border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--panel-solid);box-shadow:var(--shadow-panel);overscroll-behavior:contain;animation:panel-in var(--motion-panel)}.settings-handle{display:none;width:2.4rem;height:.28rem;margin:0 auto .7rem;border-radius:999px;background:color-mix(in srgb,var(--muted) 45%,transparent)}.settings-kicker{display:none;margin:0 0 .65rem;color:var(--muted);font-size:.78rem}.settings-section+.settings-section{margin-top:.95rem;padding-top:.9rem;border-top:1px solid var(--line)}.settings-heading{margin:0 0 .55rem;color:var(--ink);font-size:.92rem;font-weight:700}.language-wrap{display:grid;gap:.35rem}.language-wrap label,.language-status,.language-hint{color:var(--muted);font-size:.78rem}.language-hint{margin:.15rem 0 0;line-height:1.55}.select-shell{position:relative}.select-shell:after{content:"";position:absolute;inset-inline-end:.9rem;top:50%;width:.55rem;height:.55rem;border-inline-end:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-65%) rotate(45deg);pointer-events:none;opacity:.85}.language-select,.control-btn{appearance:none;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--control);color:var(--ink);min-height:2.75rem;padding:.45rem .75rem;font:inherit;font-size:var(--ui-size)}.language-select{width:100%;padding-inline-end:2.2rem;cursor:pointer}.language-select option,.language-select optgroup{color:var(--ink);background:var(--panel-solid)}.language-select option:disabled{color:color-mix(in srgb,var(--muted) 80%,#999 20%)}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}.control-btn{cursor:pointer;transition:background var(--motion),border-color var(--motion),color var(--motion),transform var(--motion)}.control-btn:hover,.language-select:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:var(--control-hover)}.control-btn:active{transform:translateY(1px)}.control-btn-wide,.about-translation-btn{grid-column:1 / -1}.about-translation-btn{margin-top:.55rem;width:100%}.language-status{margin:.55rem 0 0;padding:.55rem .65rem;border-radius:.6rem;background:var(--accent-soft);color:var(--ink);line-height:1.45}.language-status[hidden],.about-translation-btn[hidden]{display:none}.about-dialog{border:1px solid var(--line);border-radius:var(--radius-panel);padding:0;max-width:min(28rem,calc(100vw - 2rem));background:var(--panel-solid);color:var(--ink);box-shadow:var(--shadow-panel)}.about-dialog::backdrop{background:var(--scrim)}.about-dialog-inner{margin:0;padding:1.15rem 1.15rem 1.2rem;display:grid;gap:.9rem}.about-dialog-inner h2{margin:0;font-size:1.05rem}.about-dl{margin:0;display:grid;gap:.7rem}.about-dl dt{margin:0;color:var(--muted);font-size:.76rem}.about-dl dd{margin:.15rem 0 0;font-size:.94rem;overflow-wrap:anywhere}.about-disclaimer{margin:.2rem 0 0;padding:.75rem .8rem;border-radius:.65rem;background:var(--accent-soft);color:var(--ink);font-size:.88rem;line-height:1.55}body.settings-open,body.tools-open{overflow:hidden}main{max-width:var(--max-read);margin:0 auto;padding:1rem var(--pad) max(2.4rem,env(safe-area-inset-bottom))}.tools-drawer{position:fixed;inset:0;z-index:30}.tools-drawer[hidden]{display:none}.tools-scrim{position:absolute;inset:0;background:var(--scrim);animation:fade-in var(--motion) ease}.tools-panel{position:absolute;top:0;bottom:0;width:min(22.5rem,92vw);display:flex;flex-direction:column;background:var(--panel-solid);border:0;box-shadow:var(--shadow-panel);overscroll-behavior:contain;outline:none}.tools-drawer[data-side=start] .tools-panel{right:0;left:auto;border-left:1px solid var(--line);animation:drawer-in-start var(--motion-panel)}.tools-drawer[data-side=end] .tools-panel{left:0;right:auto;border-right:1px solid var(--line);animation:drawer-in-end var(--motion-panel)}.tools-panel-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:max(.85rem,env(safe-area-inset-top)) 1rem .75rem;border-bottom:1px solid var(--line)}.tools-panel-title{margin:0;font-size:1.05rem;font-weight:700}.tools-close-btn{appearance:none;min-width:2.5rem;min-height:2.5rem;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--control);color:var(--ink);font:inherit;font-size:1.35rem;line-height:1;cursor:pointer}.tools-close-btn:hover{background:var(--control-hover)}.tools-panel-body{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;padding:.85rem 1rem max(1.25rem,env(safe-area-inset-bottom));overscroll-behavior:contain}.tools-section+.tools-section{margin-top:.95rem;padding-top:.9rem;border-top:1px solid var(--line)}.tools-heading{margin:0 0 .5rem;font-size:.92rem;font-weight:700}.tools-hint,.tools-body{margin:0 0 .65rem;color:var(--muted);font-size:.82rem;line-height:1.55}.tools-body{color:var(--ink)}.tools-primary-btn{appearance:none;width:100%;min-height:2.85rem;padding:.55rem .9rem;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:var(--radius-control);background:var(--accent-soft);color:var(--ink);font:inherit;font-size:.98rem;font-weight:700;cursor:pointer;transition:background var(--motion),border-color var(--motion)}.tools-primary-btn:hover{border-color:color-mix(in srgb,var(--accent) 65%,var(--line));background:color-mix(in srgb,var(--accent-soft) 70%,var(--control))}.share-fallback{margin-top:.7rem}.share-fallback[hidden]{display:none}.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}.share-link,.share-link-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:2.55rem;padding:.4rem .65rem;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--control);color:var(--ink);text-decoration:none;font:inherit;font-size:.9rem;cursor:pointer;transition:background var(--motion),border-color var(--motion)}.share-link:hover,.share-link-btn:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:var(--control-hover)}.tools-text-link{display:inline-flex;align-items:center;min-height:2.4rem;font-size:.9rem;font-weight:600;text-decoration:none}.tools-text-link:hover{text-decoration:underline}.toast{position:fixed;z-index:40;inset-inline:0;bottom:max(1rem,env(safe-area-inset-bottom));width:fit-content;max-width:calc(100vw - 2rem);margin-inline:auto;padding:.65rem 1rem;border:1px solid var(--line);border-radius:999px;background:var(--panel-solid);color:var(--ink);box-shadow:var(--shadow-panel);font-size:.9rem;animation:fade-in var(--motion) ease}.toast[hidden]{display:none}@keyframes drawer-in-start{0%{opacity:.6;transform:translate(1.1rem)}to{opacity:1;transform:translate(0)}}@keyframes drawer-in-end{0%{opacity:.6;transform:translate(-1.1rem)}to{opacity:1;transform:translate(0)}}.translation-reference{margin:0 0 1.1rem;padding:.95rem 1rem;border:1px solid var(--line);border-radius:var(--radius-panel);background:color-mix(in srgb,var(--panel-solid) 92%,var(--accent-soft));animation:fade-in var(--motion) ease}.translation-reference[hidden]{display:none}.translation-reference-title{margin:0;font-size:1.02rem;font-weight:700}.translation-reference-meta,.translation-reference-note,.translation-reference-disclaimer{margin:.45rem 0 0;color:var(--muted);font-size:.86rem;line-height:1.55}.translation-reference-note{color:var(--ink)}.translation-reference-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.reference-link{display:inline-flex;align-items:center;justify-content:center;min-height:2.4rem;padding:.4rem .85rem;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--control);color:var(--ink);text-decoration:none;font-size:.9rem;transition:background var(--motion),border-color var(--motion)}.reference-link:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:var(--control-hover)}.reference-link-primary{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--accent-soft);color:var(--ink);font-weight:600}.translation-reference-disclaimer{margin-top:.75rem;padding-top:.65rem;border-top:1px solid var(--line)}.mushaf-page{margin:0;padding:0;background:transparent;border:0;box-shadow:none;color:inherit}.ayah-list--stacked{display:flex;flex-direction:column;gap:1.15rem}.ayah-list--mushaf{display:block;text-align:justify;text-align-last:center;text-justify:inter-word}.ayah-list--mushaf .ayah{display:inline;padding:0;scroll-margin-top:5.5rem}.ayah-list--stacked .ayah{padding-block:.1rem;scroll-margin-top:5.5rem}.ayah-text{margin:0;font-family:var(--font-quran);font-size:var(--ayah-size);line-height:2.15;color:var(--ink);white-space:normal;overflow-wrap:normal;word-break:keep-all;font-kerning:normal}.ayah-list--mushaf .ayah-text{display:inline;text-align:inherit}.ayah-list--stacked .ayah-text{display:block;text-align:center}.ayah-translation{margin-top:.55rem;padding:.55rem 0 .1rem;border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent);text-align:start}.ayah-translation-label{margin:0 0 .2rem;color:var(--muted);font-size:.72rem;letter-spacing:.01em}.ayah-translation-text{margin:0;color:color-mix(in srgb,var(--ink) 88%,var(--muted) 12%);font-size:calc(.98rem * var(--font-scale));line-height:1.7}.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}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes panel-in{0%{opacity:0;transform:translateY(-.35rem)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.topbar-inner{min-height:4.2rem;padding-inline:.85rem}.brand h1{font-size:1.28rem}.brand-subtitle{font-size:.73rem}.basmala{margin-bottom:1rem;font-size:calc(1.12rem * var(--font-scale))}.reader-settings summary{width:2.65rem;padding:0;font-size:0;gap:0}.reader-settings summary:before{width:1.05rem;height:.82rem}.settings-panel{position:fixed;top:auto;right:.7rem;bottom:max(.7rem,env(safe-area-inset-bottom));left:.7rem;width:auto;max-height:min(78vh,36rem);padding-top:.7rem;border-radius:1.15rem 1.15rem .95rem .95rem;animation:sheet-in var(--motion-panel);transform:none}.settings-handle,.settings-kicker{display:block}.settings-kicker{text-align:center;margin-bottom:.85rem}main{padding-top:.8rem}.ayah-list--stacked{gap:1rem}.ayah-text{line-height:2.05}}@media(max-width:360px){:root{--ayah-size: calc(1.45rem * var(--font-scale))}.brand-subtitle{display:none}.settings-panel{inset-inline:.45rem}.tools-panel{width:100vw}}@keyframes sheet-in{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}