:root{--paper:#f4f1ea;--ink:#23211d;--muted:#6f6a60;--accent:#2f5d50;--warn:#9a3b1f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--paper);min-height:100%;color:var(--ink);margin:0;font-family:system-ui,-apple-system,Segoe UI,Tahoma,sans-serif}body{padding:max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom))}.placeholder{text-align:center;max-width:32rem;margin:20vh auto 0}.placeholder h1{color:var(--accent);margin:0 0 8px;font-size:2rem}.lead{margin:0 0 24px;font-size:1.125rem}.warn{color:var(--warn);margin:0 0 16px;font-weight:600}.meta{color:var(--muted);word-break:break-all;margin:4px 0;font-size:.75rem}.meta[data-state=not-connected]{color:var(--warn)}@font-face{font-family:QPC Hafs;src:url(/fonts/UthmanicHafs_V22.woff2)format("woff2");font-display:block}button{font:inherit;background:var(--accent);color:#fff;border:0;border-radius:12px;min-height:48px;margin:4px;padding:8px 18px}button.small{min-height:40px;color:var(--ink);background:#e6e1d6;padding:6px 12px}button:disabled{opacity:.5}.signin{gap:12px;max-width:22rem;margin:12vh auto 0;display:grid}.signin h1{color:var(--accent);text-align:center}.signin label{gap:4px;display:grid}.signin input{font:inherit;border:1px solid #c9c2b3;border-radius:10px;padding:10px}.error{color:var(--warn)}.bar{justify-content:space-between;align-items:center;max-width:48rem;margin:0 auto 12px;display:flex}.screen{max-width:48rem;margin:0 auto}.queue-status{max-width:48rem;color:var(--muted);margin:16px auto 0;font-size:.75rem}.events pre,.screen>pre{white-space:pre-wrap;background:#fff;padding:8px;font-size:.7rem;overflow-x:auto}.reading{color:#000;text-align:center;background:#fff;border-radius:16px;padding:20px 16px;font-family:QPC Hafs,serif;line-height:2.2}.reading[data-size=S]{font-size:min(1.4rem,3vw)}.reading[data-size=M]{font-size:min(1.8rem,3.6vw)}.reading[data-size=L]{font-size:min(2.2rem,4.2vw)}.reading[data-size=XL]{font-size:min(2.8rem,5vw)}.reading.mushaf_lines{overflow-x:auto}.reading .line{white-space:nowrap}.reading.flow .flow-text{text-align:justify}.reading .w{border-radius:6px;transition:background-color 80ms}.reading .w.lit{background:#f3d98b}.reading .w.outside{color:#8a8a8a}.reading .w.part{text-underline-offset:.45em;-webkit-text-decoration:underline #2f5d50;text-decoration:underline #2f5d50;text-decoration-thickness:2px}.turn{background:#e6e1d6;border-radius:5px;height:10px;margin:12px 0 4px;overflow:hidden}.turn .fill{background:var(--accent);width:0;height:100%}.phase{text-align:center;margin:8px 0;font-size:1.25rem}.transport{flex-wrap:wrap;justify-content:center;display:flex}.reading.masked{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.reading.masked .w:not(.shown){vertical-align:middle;cursor:pointer;background:#ece8de;width:2em;height:1.1em;display:inline-block}.reading .w.hinted{background:#f6e3d8}.commit{background:#b9c9c3;min-width:12rem;position:relative;overflow:hidden}.commit .fillbar{background:var(--accent);width:0;position:absolute;inset:0 auto 0 0}html[dir=rtl] .commit .fillbar{inset:0 0 0 auto}.commit span{position:relative}.grades{flex-wrap:wrap;justify-content:center;display:flex}.grades button{min-width:5rem;min-height:72px;font-size:1.6rem}.question{text-align:center;font-size:1.3rem}.tafsir{background:#fff;border-radius:12px;margin-top:12px;padding:8px 16px;line-height:1.9}.in-drill>header,.in-drill>footer{display:none}.hint-audio{color:var(--muted);text-align:center;font-size:.8rem}