:root{--color-bg: #121212;--color-surface: #1e1e1e;--color-primary: #c9a227;--color-text: #e0e0e0;--color-text-dim: #999;--color-arabic: #f0f0f0;--color-border: #333;--color-surface-hover: #2a2a2a;--color-active-text: #000;--font-arabic: "KFGQPC Uthmanic Script HAFS", "Scheherazade New", "Amiri", serif;color-scheme:dark}[data-theme=light]{--color-bg: #f5f5f0;--color-surface: #ffffff;--color-primary: #8a7118;--color-text: #222;--color-text-dim: #666;--color-arabic: #111;--color-border: #d0d0d0;--color-surface-hover: #eaeaea;--color-active-text: #fff;color-scheme:light}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:system-ui,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text)}#root{height:100vh;height:100dvh;overflow:hidden}.app{display:flex;flex-direction:column;height:100%;max-width:800px;margin:0 auto;padding:1rem;overflow:hidden}.app__header{text-align:center;padding:1rem 0;flex-shrink:0}.app__title{font-size:1.5rem;color:var(--color-primary);margin-bottom:1rem}.app__selectors{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.app__main{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 0;min-height:0;overflow:hidden}.app__loading{color:var(--color-text-dim);font-size:1.2rem}.app__footer{padding:1rem 0;padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px));flex-shrink:0}select,button,label{touch-action:manipulation}select{padding:.5rem 1rem;border-radius:6px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-size:.95rem;cursor:pointer;min-height:44px}.word-display{text-align:center;width:100%}.word-display--empty .word-display__placeholder{color:var(--color-text-dim);font-size:1.2rem}.word-display__verse-ref{font-size:.85rem;color:var(--color-text-dim);margin-bottom:1rem}.word-display__arabic{font-family:var(--font-arabic);font-size:5rem;line-height:1.6;color:var(--color-arabic);padding:1rem;font-palette:--Dark;transition:opacity .15s ease;position:relative}[data-theme=light] .word-display__arabic{font-palette:--Light}.word-display__transliteration{font-size:1.3rem;color:var(--color-primary);margin-top:.75rem;font-style:italic}.word-display__translation{font-size:1.1rem;color:var(--color-text-dim);margin-top:.5rem}.player-controls{display:flex;flex-direction:column;align-items:center;gap:.75rem}.player-controls__transport{display:flex;align-items:center;gap:1rem}.player-controls__transport button{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);font-size:1.5rem;width:3rem;height:3rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.player-controls__transport button:hover:not(:disabled){background:var(--color-surface-hover)}.player-controls__transport button:disabled{opacity:.3;cursor:not-allowed}.player-controls__play{width:3.5rem!important;height:3.5rem!important;font-size:1.8rem!important;border-color:var(--color-primary)!important}.player-controls__speed{display:flex;align-items:center;gap:.5rem}.player-controls__speed input[type=range]{width:120px;accent-color:var(--color-primary)}.player-controls__speed-label{font-size:.85rem;color:var(--color-text-dim);min-width:2.5rem;text-align:center}.player-controls__bottom{display:flex;align-items:center;gap:.75rem}.player-controls__progress{font-size:.85rem;color:var(--color-text-dim)}.player-controls__immersive{background:none;border:1px solid var(--color-border);color:var(--color-text-dim);font-size:.9rem;width:2.75rem;height:2.75rem;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s}.player-controls__immersive:hover{color:var(--color-text)}.settings-panel{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}.settings-panel label{display:flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--color-text-dim);cursor:pointer}.settings-panel input[type=checkbox]{accent-color:var(--color-primary)}.settings-panel__theme{display:flex;gap:.25rem}.settings-panel__theme-btn{padding:.2rem .6rem;border-radius:4px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-dim);font-size:.8rem;cursor:pointer;transition:all .15s}.settings-panel__theme-btn.active{background:var(--color-primary);color:var(--color-active-text);border-color:var(--color-primary)}.immersive{position:fixed;inset:0;z-index:100;background:var(--color-bg);display:flex;align-items:center;justify-content:center;cursor:pointer}.immersive__word{pointer-events:none}.immersive__word .word-display__arabic{font-size:8rem}.immersive__controls{position:absolute;bottom:0;left:0;right:0;background:var(--color-surface);border-top:1px solid var(--color-border);padding:1.25rem;padding-bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:.75rem;cursor:default}.immersive__transport{display:flex;align-items:center;gap:1rem}.immersive__transport button{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);font-size:1.5rem;width:3rem;height:3rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.immersive__transport button:hover:not(:disabled){background:var(--color-surface-hover)}.immersive__transport button:disabled{opacity:.3;cursor:not-allowed}.immersive__play{width:3.5rem!important;height:3.5rem!important;font-size:1.8rem!important;border-color:var(--color-primary)!important}.immersive__speed{display:flex;align-items:center;gap:.5rem}.immersive__speed input[type=range]{width:120px;accent-color:var(--color-primary)}.immersive__speed-label{font-size:.85rem;color:var(--color-text-dim);min-width:2.5rem;text-align:center}.immersive__bottom{display:flex;align-items:center;gap:.75rem}.immersive__progress{font-size:.85rem;color:var(--color-text-dim)}.immersive__toggle{background:none;border:1px solid var(--color-border);color:var(--color-text-dim);font-size:.9rem;width:2.75rem;height:2.75rem;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s}.immersive__toggle:hover{color:var(--color-text)}.immersive__controls .settings-panel{margin-top:0}@media(max-width:600px){.app{padding:.5rem}.app__header{padding:.5rem 0}.app__title{font-size:1.2rem;margin-bottom:.5rem}.app__selectors{flex-direction:column;gap:.5rem}.app__selectors select{width:100%}.app__main{padding:1rem 0}.word-display__arabic{font-size:3rem;padding:.5rem}.word-display__transliteration{font-size:1.1rem}.word-display__translation{font-size:.95rem}.player-controls__transport button{width:2.75rem;height:2.75rem;font-size:1.3rem}.player-controls__play{width:3.25rem!important;height:3.25rem!important;font-size:1.6rem!important}.settings-panel{gap:1rem}.settings-panel label{font-size:.8rem}}@media(max-width:380px){.word-display__arabic{font-size:2.2rem}}@media(max-width:600px){.immersive__word .word-display__arabic{font-size:4.5rem}.immersive__controls{padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))}.immersive__transport button{width:2.75rem;height:2.75rem;font-size:1.3rem}.immersive__play{width:3.25rem!important;height:3.25rem!important;font-size:1.6rem!important}.immersive__speed input[type=range]{width:160px}.immersive__controls .settings-panel{gap:1rem}.immersive__controls .settings-panel label{font-size:.8rem}}@media(max-width:380px){.immersive__word .word-display__arabic{font-size:3.5rem}}