:root .q{padding-block:var(--space-6)}:root .q-ar{font-family:"Amiri Quran", var(--font-arabic)}:root .q-book{align-items:center;gap:var(--space-4);padding:var(--space-4);margin-bottom:var(--space-5);border:1px solid color-mix(in srgb, var(--gold) 55%, transparent);background:linear-gradient(120deg, var(--gold-wash), transparent 70%);color:var(--ink);border-radius:14px;text-decoration:none;transition:box-shadow .2s,transform .2s;display:flex}:root .q-book:hover{transform:translateY(-1px);box-shadow:0 6px 22px #0e3b2e24}:root .q-book-cover{aspect-ratio:.69;background:radial-gradient(circle at 50% 40%, var(--night-2), var(--night) 75%);border:1px solid #caa04a;border-radius:3px 8px 8px 3px;flex:none;place-items:center;width:3.6rem;display:grid;box-shadow:inset 3px 0 5px #0006,0 4px 10px #00000040}:root .q-book-cover span{aspect-ratio:1;width:46%;position:relative}:root .q-book-cover span:before,:root .q-book-cover span:after{content:"";border:1.5px solid #caa04a;position:absolute;inset:14%}:root .q-book-cover span:after{transform:rotate(45deg)}:root .q-book-text{flex:1;gap:2px;display:grid}:root .q-book-text strong{font-family:var(--font-display);font-weight:400;font-size:var(--step-1)}:root .q-book-text span{color:var(--ink-soft);font-size:var(--step--1);line-height:1.5}:root .q-book-btn{background:var(--emerald);color:var(--paper);padding:var(--space-2) var(--space-4);white-space:nowrap;border-radius:999px;flex:none;font-weight:600}:root .q-inbook{margin:0 0 var(--space-3);font-size:var(--step--1)}:root .q-inbook a{color:var(--emerald);font-weight:600}@media (width<=560px){:root .q-book{flex-wrap:wrap}:root .q-book-btn{text-align:center;width:100%}}:root .q-note{background:var(--gold-wash);padding:var(--space-4);border-radius:var(--radius)}:root .q-list{gap:0;column-gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));margin:0;padding:0;list-style:none;display:grid}:root .q-list a{align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;display:flex}:root .q-list a:hover .q-name{color:var(--emerald)}:root .q-num{min-width:2.2rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}:root .q-name{flex:1;font-weight:600}:root .q-name small{color:var(--ink-soft);font-weight:400;font-size:var(--step--1);display:block}:root .q-list .q-ar{font-size:var(--step-1);color:var(--emerald)}:root .q-title-ar{color:var(--gold-bright);margin-top:var(--space-1);font-size:clamp(2.3rem,1.7rem + 3vw,3.5rem);font-weight:400;line-height:1.7;display:block}:root #q-text{max-width:46rem;margin-inline:auto}:root .q-bismillah{text-align:center;align-items:center;gap:var(--space-2);padding:var(--space-5) var(--space-6) var(--space-4);margin:var(--space-3) var(--space-1) var(--space-6);border:1px solid var(--gold);outline:1px solid color-mix(in srgb, var(--gold) 45%, transparent);outline-offset:5px;background:radial-gradient(ellipse at 50% 45%, var(--gold-wash), transparent 72%);border-radius:18px;flex-direction:column;transition:background-color .2s,box-shadow .2s;display:flex;position:relative}:root .q-bismillah:before,:root .q-bismillah:after{content:"";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23caa04a' stroke-width='1.3'%3E%3Crect x='5' y='5' width='14' height='14'/%3E%3Crect x='5' y='5' width='14' height='14' transform='rotate(45 12 12)'/%3E%3C/g%3E%3C/svg%3E") 50%/contain no-repeat;width:22px;height:22px;margin-top:-11px;position:absolute;top:50%}:root .q-bismillah:before{inset-inline-start:14px}:root .q-bismillah:after{inset-inline-end:14px}:root .q-bismillah .q-ar{color:var(--ink);margin:0;font-size:clamp(2rem,1.5rem + 2.2vw,2.9rem);line-height:2}:root .q-bismillah .q-play{margin:0}:root .q-bismillah.is-playing{background:var(--emerald-soft);box-shadow:0 2px 16px #0e3b2e24}:root .q-verse{padding:var(--space-5) var(--space-3) var(--space-5);margin-inline:calc(var(--space-3) * -1);border-radius:var(--radius);border-inline-start:4px solid #0000;scroll-margin-top:5rem;transition:background-color .2s,border-color .2s,box-shadow .2s;position:relative}:root .q-verse:after{content:"";inset-inline:12%;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 60%, transparent) 50%, transparent);height:1px;position:absolute;bottom:0}:root .q-verse:before{content:"";inset-inline-start:50%;background:var(--gold);opacity:.75;width:6px;height:6px;margin-inline-start:-3px;position:absolute;bottom:-3px;transform:rotate(45deg)}:root .q-verse .q-ar{word-spacing:.06em;margin:0 0 var(--space-3);color:var(--ink);font-size:clamp(1.95rem,1.45rem + 2.4vw,2.85rem);line-height:2.35}:root .q-key{vertical-align:middle;width:2.7em;height:2.7em;color:var(--gold-ink);font-variant-numeric:tabular-nums;place-items:center;margin-inline-start:.35em;font-size:.5em;font-weight:400;line-height:1;text-decoration:none;display:inline-grid;position:relative}:root .q-key:before,:root .q-key:after{content:"";border:1.5px solid var(--gold);background:var(--gold-wash);position:absolute;inset:15%}:root .q-key:after{background:0 0;transform:rotate(45deg)}:root .q-key span{z-index:1;font-family:"Amiri Quran", var(--font-arabic);font-size:1.15em;position:relative}:root .q-key:hover:before,:root .q-key:focus-visible:before{background:var(--gold)}:root .q-key:hover span,:root .q-key:focus-visible span{color:var(--paper)}:root .q-tr{margin:0 0 var(--space-3);border-inline-start:2px solid color-mix(in srgb, var(--gold) 45%, transparent);color:var(--ink);max-width:40rem;padding-inline-start:var(--space-3);line-height:1.7}:root .q-tr[dir=rtl]{font-family:var(--font-arabic);font-size:var(--step-1);line-height:1.9}:root .q-pick{gap:var(--space-3);margin:0 0 var(--space-4);color:var(--ink-soft);align-items:center;display:flex}:root .q-pick select{font:inherit;padding:var(--space-1) var(--space-2);max-width:100%}:root .q-fn{margin:0 0 var(--space-3);font-size:var(--step--1);color:var(--ink-soft)}:root .q-fn p{white-space:pre-line;margin:var(--space-2) 0 0}:root .q-audio{flex-wrap:wrap}:root .q-btn,:root .q-play{background:var(--emerald);color:var(--paper);border-radius:var(--radius);padding:var(--space-1) var(--space-3);cursor:pointer;font:inherit;border:0}:root .q-play{border:1px solid var(--rule);color:var(--emerald);min-width:2.4rem;background:0 0;border-radius:999px;margin-inline-end:var(--space-2)}:root .q-play[aria-pressed=true]{background:var(--emerald-soft);border-color:var(--emerald)}:root .q-verse.is-playing{background:var(--emerald-soft);border-inline-start-color:var(--emerald);box-shadow:0 2px 14px #0e3b2e1f}:root .q-verse.is-marked{background:var(--gold-wash);border-inline-start-color:var(--gold)}:root .q-verse.is-marked.is-playing{background:var(--emerald-soft);border-inline-start-color:var(--gold)}:root .q-verse.is-marked .q-key:before{background:var(--gold)}:root .q-verse.is-marked .q-key span{color:var(--paper);font-weight:700}:root .q-mark{border:1px solid var(--rule);padding:var(--space-1) var(--space-3);color:var(--ink-soft);cursor:pointer;font:inherit;font-size:var(--step--1);background:0 0;border-radius:999px}:root .q-mark[aria-pressed=true]{border-color:var(--gold);color:var(--gold-ink)}:root .q-pager{justify-content:space-between;gap:var(--space-4);padding-top:var(--space-5);display:flex}:root .q-credit{margin-top:var(--space-6);color:var(--ink-soft);font-size:var(--step--1);text-align:center}@media (prefers-reduced-motion:reduce){:root .q-verse,:root .q-bismillah{transition:none}}
