:root{--btn-hover-bg: #474747;--btn-active-bg: #252525;--my-dark: #000;--my-white: #d2e1e6;--scroll-bar-color: #ccc;--modal-bg: #282b2d;--modal-text-color: #d2e1e6;--modal-list-border-color: #50595b;--modal-list-color-hover: #363b3b;--option-input-bg: #383b3c;--option-input-border-color: #50595b;--option-input-border-color-focus: #4c5353;--option-input-bg-focus: #282b2d;--modal-button-bg: #3e4344;--modal-button-bg-hover: #353a3c;--modal-button-bg-active: #232628;--surah-number-color: #a2afb3;--checked-bg: #5a6061;--checked-border-color: #c4d1d6}@font-face{font-family:UthmanicHafs;src:url(/assets/Uthmanic-Hafs-Font-DUW0m3Xp.otf) format("opentype");font-weight:400;font-style:normal}html,body{--icon-color: var(--my-white);background-color:var(--my-dark);color:var(--my-white);margin:0;padding:0}body.light{--icon-color: var(--my-dark);background-color:var(--my-white);color:var(--my-dark);--btn-hover-bg: #def1f8;--btn-active-bg: #c2d1d5;--scroll-bar-color: #a0a0a0;--modal-bg: #d2e1e6;--modal-text-color: #0d1117;--modal-list-border-color: #c0c9cf;--modal-list-color-hover: #cad7dc;--option-input-bg: #d8e4e8;--option-input-border-color: #c0c9cf;--option-input-border-color-focus: #809f9f;--option-input-bg-focus: #d2e1e6;--modal-button-bg: #dbecf2;--modal-button-bg-hover: #bfced3;--modal-button-bg-active: #a6afb5;--checked-bg: #bfced3;--checked-border-color: #4d585c;--surah-number-color: #777}svg,path{color:var(--icon-color);fill:var(--icon-color)}.viewport{width:100vw;height:100dvh;overflow:hidden;position:relative}.grabbing{cursor:grabbing}.canvas{position:absolute;top:0;left:0;display:flex;transition:transform .5s ease}.panel{position:absolute;width:100vw;height:100dvh;display:flex;align-items:center;justify-content:center}.content-wrapper{padding:.5rem 1rem;width:85%;max-height:85dvh;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;cursor:text;-webkit-mask-image:linear-gradient(to bottom,transparent,black 20px,black calc(100% - 20px),transparent);mask-image:linear-gradient(to bottom,transparent,black 20px,black calc(100% - 20px),transparent)}.content-wrapper>*{margin-bottom:.3rem}.quran{direction:rtl;font-family:UthmanicHafs;font-size:1.8rem}.tafseer{font-family:Calibri,Arial,sans-serif;font-size:1.4rem}.source{direction:rtl;all:unset;font-family:UthmanicHafs;font-size:1.3rem;cursor:pointer}.action-buttons{background-color:#0000;border-radius:25px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);position:fixed;top:5px;right:5px;display:flex;flex-direction:column;z-index:2}.action-buttons button{font-size:24px;padding:8px;background-color:#fff0;border-radius:50px;border:none;cursor:pointer;transition:background .2s;width:38px;display:flex;align-items:center;justify-content:center}body .action-buttons button:hover,.audio-control:hover{background:var(--btn-hover-bg)}body .action-buttons button:active,.audio-control:active{background:var(--btn-active-bg)}.audio-control{border-radius:100%;position:fixed;bottom:35px;right:30px;padding:8px;z-index:2;width:46px;height:46px}.loading{position:fixed;top:5px;left:5px;padding:8px;z-index:2;width:26px;height:26px}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.warning-edge{position:fixed;top:0;width:0px;height:100vh;background-color:#ff6464}.start{right:0}.end{left:0}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:center;z-index:3}.modal-body{font-family:Calibri,Gill Sans,Gill Sans MT,sans-serif;width:90%;max-width:550px;padding:10px 25px 25px;color:var(--modal-text-color);background-color:var(--modal-bg);border-radius:16px;box-shadow:0 10px 30px #0000001a;box-sizing:border-box;position:relative}#close-modal{all:unset;display:inline-block;cursor:pointer}#close-modal svg{border-radius:50px;width:24px;margin:0;padding:3px;position:absolute;top:10px;right:10px}#close-modal:hover svg{background-color:var(--btn-hover-bg)}#close-modal:active svg{background-color:var(--btn-active-bg)}#search-input{width:100%;padding:20px 15px;margin-top:1.5rem;margin-bottom:10px;border:1px solid var(--option-input-border-color);border-radius:8px;box-sizing:border-box;font-size:1em;background-color:var(--option-input-bg);color:var(--modal-text-color)}#search-input:focus{border-color:var(--option-input-border-color-focus);background-color:var(--option-input-bg-focus);outline:none}.item-list{list-style:none;padding:0;max-height:175px;overflow-y:auto;margin:15px 0;scrollbar-color:var(--scroll-bar-color) transparent;scrollbar-width:thin}.item-list>li:nth-child(1)>label>svg{width:24px}.item-list>li:nth-child(1)>.item-label{display:flex;padding-top:3px}.item-list{-webkit-mask-image:linear-gradient(to bottom,transparent,black 15px,black calc(100% - 15px),transparent);mask-image:linear-gradient(to bottom,transparent,black 15px,black calc(100% - 15px),transparent)}.list-item{display:flex;justify-content:start;align-items:center;border-bottom:.1px solid var(--modal-list-border-color);padding:12px 0 12px 12px;border-radius:3px;font-size:12px}.list-item:hover{background-color:var(--modal-list-color-hover)}.list-item:last-child{border-bottom:none}.list-item:has(input:checked),.dropdown-list:focus .option-label:has(input:checked){border-left:4px solid var(--checked-border-color);border-radius:0 5px 5px 0;font-weight:700;background-color:var(--checked-bg)}.item-label{align-items:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.dropdown-list{list-style:none;padding:0;margin:0;height:50px;width:100%;border-radius:12px;overflow-y:hidden;position:relative;flex-direction:column;border:1px solid var(--modal-list-border-color)}.dropdown-list::-webkit-scrollbar{width:0px}.dropdown-list:focus{height:160px;overflow-y:auto}.option-label{min-height:50px;top:0;z-index:1;display:flex;justify-content:center;align-items:center;box-sizing:border-box;pointer-events:none;font-size:1.4rem;background-color:var(--modal-button-bg);border-bottom:.1px solid var(--modal-list-border-color)}.option-label:hover{background-color:var(--modal-list-color-hover)}.dropdown-list:focus .option-label{position:relative;pointer-events:all}input{appearance:none;-webkit-appearance:none;width:0px;height:0px;margin:-1px}.modal-content{display:grid;grid-template-columns:1fr;width:100%;align-items:center;margin-top:1.5rem;margin-bottom:1.5rem}.arrow-between{display:flex;justify-content:center;align-items:center;margin:.25rem;transform:rotate(90deg)}.arrow-between svg{width:24px}.input-group{display:grid;grid-template-columns:65% 3% auto;place-items:center;gap:8px}.colon{font-size:1.6rem;color:var(--modal-text-color)}.surah-number{position:absolute;left:clamp(0px,12%,100px);color:var(--surah-number-color)}.modal-footer{display:grid;grid-template-columns:50% 50%;gap:12px;width:100%}.modal-button{padding:4px;background-color:var(--modal-button-bg);border:none;border-radius:8px;cursor:pointer;transition:background-color .2s;margin-top:15px}.modal-button svg{width:2rem}.modal-button:hover{background-color:var(--modal-button-bg-hover)}.modal-button:active{background-color:var(--modal-button-bg-active)}#save-language,#save-reciter{width:100%}@media (max-width: 400px){.modal-footer{grid-template-columns:1fr;gap:4px}.modal-button{margin-top:2px}}.glass-background{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.1);color:var(--my-white)}.player-container{position:fixed;bottom:30px;inset-inline:0;margin:auto;width:95%;max-width:350px;display:grid;grid-template-columns:auto 55px;gap:30px;align-items:center;scrollbar-width:none;-ms-overflow-style:none}.player-container::-webkit-scrollbar{display:none}.player-container .icon-btn svg{width:18px}.play-section{display:flex;align-items:center;justify-content:center;height:55px;width:55px;border-radius:50%;cursor:pointer;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.1)}.play-section svg{width:clamp(60%,50%,75%)}.audio-player{width:95%;display:grid;grid-template-rows:1fr 1fr;padding:3px 15px;border-radius:300px}.timeline-row{width:100%;display:grid;grid-template-columns:.18fr auto .18fr;gap:5px;align-items:center;justify-items:center;font-family:monospace;color:var(--modal-text-color);font-weight:700}.progress-bar{position:relative;width:100%;height:5px;border-radius:3px;background-color:var(--checked-bg);cursor:pointer}.progress{position:relative;width:0%;height:100%;border-radius:3px;background-color:var(--modal-text-color);transition:width .1s linear}.progress-handle{position:absolute;top:50%;right:-7px;width:14px;height:14px;border-radius:50%;background-color:#dedede;box-shadow:0 1px 4px #0000004d;opacity:0;transform:translateY(-50%) scale(0);transition:opacity .2s ease,transform .2s ease}.progress-bar:hover .progress-handle{opacity:1;transform:translateY(-50%) scale(1)}.audio-controls{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}.audio-controls::-webkit-scrollbar{display:none}.icon-btn{background:none;border:none;color:inherit;cursor:pointer;color:var(--modal-text-color)}.icon-btn:focus{border-radius:100px;background-color:#77777759;-webkit-tap-highlight-color:transparent}.blur{filter:blur(8px)}.hide{display:none!important}.disabled{opacity:60%}