:root{--bg: #101714;--field: #17211c;--ink: #efe6d4;--muted: #8f9a90;--line: #2a3932;--glaze: #3aa392;--copper: #c9844a;--danger: #c45c4a;--radius: 10px;--ui: "Noto Sans Arabic", "Noto Naskh Arabic", serif;--naskh: "Noto Naskh Arabic", serif}*{box-sizing:border-box}html,body,#root{height:100%;max-height:100dvh;overflow:hidden}html{background:var(--bg)}body{margin:0;color:var(--ink);font-family:var(--ui);background:radial-gradient(1200px 600px at 80% -10%,#1c2c26 0%,transparent 55%),var(--bg);text-wrap:pretty}::selection{background:#3aa39255;color:var(--ink)}:focus-visible{outline:2px solid var(--glaze);outline-offset:3px}button,textarea,input{font:inherit;color:inherit}.shell{max-width:760px;margin:0 auto;min-height:100dvh;height:100dvh;display:grid;grid-template-rows:auto 1fr auto;padding:18px 18px 12px;overflow:hidden}.top{display:flex;align-items:center;gap:4px 14px;padding:2px 4px 10px;border-bottom:1px solid var(--line)}.brand{margin:0;font-family:var(--naskh);font-weight:700;font-size:1.28rem;line-height:1;flex-shrink:0;padding-inline-end:4px}.nav{display:flex;align-items:center;gap:2px;min-width:0}.nav button{border:0;background:transparent;padding:8px 10px 7px;color:var(--muted);cursor:pointer;position:relative;font-size:.95rem}.nav button.on,.nav button:hover,.help-btn:hover,.lang button:hover{color:var(--ink)}.nav button.on:after{content:"";position:absolute;inset-inline:10px;bottom:0;height:2px;background:var(--glaze);border-radius:2px}.top-end{margin-inline-start:auto;display:flex;align-items:center;gap:2px;flex-shrink:0}.help-btn{width:36px;height:36px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:0}.help-btn.on{color:var(--glaze)}.lang{display:flex;align-items:center;gap:0}.lang button{border:0;background:transparent;padding:8px;color:var(--muted);cursor:pointer;font-size:.82rem}.lang button.on{color:var(--ink)}.src-btn{border:1px solid var(--line);background:var(--field);color:var(--muted);padding:7px 12px;border-radius:999px;cursor:pointer;font-size:.82rem;white-space:nowrap}.src-btn.on{color:var(--ink);border-color:var(--glaze)}.cite{margin:6px 0 0;font-size:.78rem;color:var(--muted)}.how{padding:8px 0 40px}.how h2{font-family:var(--naskh);font-size:1.45rem;font-weight:600;margin:0 0 10px}.how h2+p,.how p{color:var(--muted);line-height:1.8;margin:0 0 16px;max-width:42em}.how-refs{list-style:none;padding:0;margin:0 0 28px}.how-refs li{border-top:1px solid var(--line);padding:10px 0;display:grid;gap:4px}.how-refs li span{color:var(--muted);font-size:.88rem;overflow-wrap:anywhere}.how-refs a{color:var(--glaze);text-decoration:none}.how-refs a:hover{text-decoration:underline}.diagram{margin:8px 0 0;overflow:visible}.diagram svg{width:100%;height:auto;display:block}.thread{overflow-x:hidden;overflow-y:auto;min-height:0;padding:24px 12px 28px;display:flex;flex-direction:column;gap:28px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.thread::-webkit-scrollbar{width:0;height:0;display:none}.empty{margin:auto 0;padding:12px 0 40px}.empty h2{font-family:var(--naskh);font-size:clamp(1.8rem,5vw,2.6rem);font-weight:600;margin:0 0 10px;line-height:1.35}.empty p{margin:0 0 22px;color:var(--muted);max-width:36em}.prompts{display:flex;flex-direction:column;align-items:stretch;gap:8px}.prompts button{text-align:start;background:transparent;border:0;border-top:1px solid var(--line);padding:12px 0;cursor:pointer;color:var(--ink)}.prompts button:hover{color:var(--glaze)}.turn{display:grid;gap:14px}.q{color:var(--muted);font-size:1.02rem;line-height:1.7}.ayahs{display:grid;gap:18px}.ayah{padding:4px 0 14px;border-bottom:1px solid var(--line)}.ayah-meta{font-size:.78rem;color:var(--glaze);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.ayah-play{border:0;background:transparent;color:var(--copper);cursor:pointer;padding:6px 0;min-height:44px}.ayah-ar{font-family:var(--naskh);font-size:clamp(1.35rem,3.4vw,1.75rem);line-height:2.05;margin:0;overflow-wrap:anywhere}.ayah-ar.words{display:flex;flex-wrap:wrap;gap:0 .38em}.ayah-ar .w{color:var(--muted)}.ayah-ar .w.on,.ayah.playing .w.on,.ayah.done .w.on,.ayah.done .ayah-ar{color:var(--glaze)}.listen-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.reciter{position:relative}.reciter-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--field);color:var(--ink);padding:8px 12px;border-radius:8px;cursor:pointer;min-height:40px;max-width:18rem}.reciter-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reciter-btn svg{flex-shrink:0;color:var(--muted);transition:transform .12s ease-out}.reciter.open .reciter-btn{border-color:var(--glaze)}.reciter.open .reciter-btn svg{transform:rotate(180deg)}.reciter-list{position:fixed;inset:auto;z-index:80;min-width:15rem;margin:0;padding:4px;list-style:none;background:#141e1a;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 32px #0007}.reciter-list button{width:100%;text-align:start;border:0;background:transparent;padding:10px 12px;border-radius:7px;color:var(--muted);cursor:pointer}.reciter-list button.on{color:var(--ink);background:#1c2b26}.reciter-list button:hover{color:var(--ink);background:#22332c}.ayah-tr{margin:10px 0 0;color:var(--muted);line-height:1.7}.tafsir{margin:10px 0 0;font-size:.95rem;line-height:1.85;color:#d7d0c0}.answer{margin:0;line-height:1.9;font-size:1.05rem;white-space:pre-wrap}.err{color:var(--danger);margin:0}.loading{margin:auto 0;display:grid;gap:16px;padding:12px 0 40px}.loading-row{display:flex;align-items:center;gap:12px;color:var(--muted)}.loading-row p{margin:0}.spinner{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--glaze);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.dock{position:sticky;bottom:0;padding-top:10px;background:linear-gradient(to top,var(--bg) 70%,transparent)}.talk{display:grid;justify-items:center;gap:10px;padding:8px 0 4px}.talk-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:min(100%,440px);min-height:64px;padding:12px 22px;border:0;border-radius:999px;background:var(--copper);color:#1a120c;cursor:pointer;font-weight:700;transition:transform 80ms ease-out,background 80ms ease-out}.talk-btn:active{transform:scale(.97)}.talk-btn.live{background:var(--danger);color:#fff;box-shadow:0 0 0 calc(3px + var(--lvl, 0) * 12px) rgba(196,92,74,calc(.16 + var(--lvl, 0) * .35));transition:transform 80ms ease-out,background 80ms ease-out,box-shadow 80ms linear}.talk-btn.live .talk-mic{animation:miclive .9s ease-in-out infinite;background:#ffffff29}.talk-btn.live .meter span{background:#fff}@keyframes miclive{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.talk-btn:disabled{opacity:.45;cursor:not-allowed}.talk-mic{width:36px;height:36px;border-radius:50%;background:#0000001f;display:grid;place-items:center;flex-shrink:0}.talk-label{text-align:start;font-size:1rem}.mic{width:48px;height:48px;border:0;border-radius:50%;background:var(--copper);color:#1a120c;cursor:pointer;display:grid;place-items:center}.mic.live{background:var(--danger);color:#fff;animation:pulse 1.4s ease-out infinite}@keyframes pulse{0%{box-shadow:0 0 #c45c4a66}to{box-shadow:0 0 0 14px #c45c4a00}}.status{min-height:1.4em;margin:8px 4px 4px;font-size:.82rem;color:var(--muted)}.status.live{color:var(--copper)}.file{position:absolute;width:1px;height:1px;opacity:0}.mem{padding:8px 0 40px}.mem h2{font-family:var(--naskh);font-size:1.45rem;font-weight:600;margin:0 0 10px}.mem>p{color:var(--muted);line-height:1.8;margin:0 0 16px;max-width:42em}.mem-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.hidden-ayah{display:grid;gap:12px;justify-items:start;padding:18px 0 8px;border-top:1px solid var(--line)}.recite-stage{display:grid;gap:14px;padding:18px 0 8px;border-top:1px solid var(--line)}.word-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}.chip{display:inline-flex;align-items:center;justify-content:center;min-height:2.4em;padding:4px 10px;border-radius:8px;background:var(--field);border:1px solid var(--line);font-family:var(--naskh);font-size:1.25rem;line-height:1.6;color:transparent;transition:color 80ms ease,border-color 80ms ease,background 80ms ease}.chip.on{color:var(--ink);border-color:var(--glaze);background:#1a2b26}.recite-controls{display:flex;align-items:center;gap:14px}.mic.big{width:64px;height:64px}.meter{display:flex;align-items:flex-end;gap:4px;height:32px}.meter span{width:4px;background:var(--copper);border-radius:2px;display:block;transition:height 80ms linear}.heard{margin:0;color:var(--muted);font-size:.92rem}.blank-line{width:min(100%,28rem);height:3.2rem;border-bottom:1px solid var(--line)}.usage{padding:8px 0 40px}.usage h2{font-family:var(--naskh);font-size:1.45rem;font-weight:600;margin:0 0 10px}.usage table{width:100%;border-collapse:collapse;font-size:.88rem}.usage th,.usage td{text-align:start;padding:10px 8px 10px 0;border-top:1px solid var(--line);vertical-align:top}.usage th{color:var(--muted);font-weight:500}.usage-total{margin:18px 0 8px;font-size:1.05rem}@media(max-width:640px){.shell{padding:10px 12px max(10px,env(safe-area-inset-bottom))}.brand{font-size:1.18rem}.nav button{padding:8px 8px 7px;font-size:.9rem}.empty h2{font-size:1.45rem}.talk-btn{width:100%;min-height:56px}.talk-label{font-size:.9rem}.chip{font-size:1.1rem;min-height:2.2em}.dock{padding-bottom:env(safe-area-inset-bottom)}}@media(prefers-reduced-motion:reduce){.mic.live,.talk-btn.live,.talk-btn.live .talk-mic{animation:none}.spinner{animation:none;border-top-color:var(--glaze)}}