:root{--bg:#0e0f11;--panel:#15161a;--raised:#1c1e23;--hover:#24262c;--line:#2a2d34;--line-soft:#202228;--text:#ececf0;--muted:#9a9ca7;--faint:#656873;--gold:#d8b45f;--gold-ink:#1b1406;--gold-soft:#d8b45f21;--gold-line:#d8b45f73;--danger:#ef8f80;--ui:"Segoe UI", Tahoma, system-ui, sans-serif;--quran:"UthmanicHafs", serif;--r:8px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}@media (min-width:901px){body{overflow:hidden}}body{background:var(--bg);color:var(--text);font:400 13.5px/1.55 var(--ui);-webkit-font-smoothing:antialiased;margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default}:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.app{grid-template:"top top top""source stage style"minmax(0,1fr)"timeline timeline timeline"clamp(120px,19vh,150px)/300px minmax(0,1fr) 312px;height:100vh;display:grid}.topbar{background:var(--panel);border-bottom:1px solid var(--line);padding:0 16px;flex-wrap:wrap;grid-area:top;align-items:center;gap:20px;min-height:62px;padding-block:9px;display:flex}.brand{color:var(--text);text-decoration:none}.brand__name small{color:var(--muted);font-size:10px;font-weight:400;display:block}.export-select select{background:var(--raised);border:1px solid var(--line);border-radius:6px;padding:5px 7px}.export-warning{color:var(--danger);text-align:center;flex-basis:100%;margin:0;font-size:12px}.export-warning.success{color:var(--gold)}.sr-only{clip:rect(0,0,0,0);width:1px;height:1px;position:absolute;overflow:hidden}.local-note{color:var(--muted);gap:7px;font-size:11px}.local-note strong{color:var(--gold)}.local-note p{margin:0}.local-note a{color:var(--gold)}.local-note summary{cursor:pointer}fieldset.panel{border-block:0;min-width:0;margin:0;padding:0}fieldset.panel:disabled{opacity:.75}@media (max-width:900px){.topbar__actions{flex-wrap:wrap;flex:100%}.topbar__title{text-align:start}}.brand{flex-shrink:0;align-items:center;gap:9px;display:flex}.brand__mark{background:var(--gold);width:28px;height:28px;color:var(--gold-ink);border-radius:7px;place-items:center;font-size:17px;line-height:1;display:grid}.brand__name{letter-spacing:0;font-size:15px;font-weight:600}.topbar__title{text-align:center;min-width:0;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.topbar__actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.btn{white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:7px;justify-content:center;align-items:center;gap:6px;height:32px;padding:0 14px;font-weight:500;text-decoration:none;display:inline-flex}.btn--ghost{color:var(--muted)}.btn--ghost:hover{color:var(--text);background:var(--hover)}.btn--outline{border-color:var(--gold-line);color:var(--gold)}.btn--outline:hover{background:var(--gold-soft)}.btn--primary{background:var(--gold);color:var(--gold-ink);min-width:118px;font-weight:600}.btn--primary:hover:not(:disabled){filter:brightness(1.08)}.btn--primary:disabled{color:#2a2210;background:#6e5f3a}.export{position:relative;overflow:hidden}.export__fill{background:var(--gold);transition:width .5s;position:absolute;inset-block:0;inset-inline-start:0}.export__label{position:relative}.panel{background:var(--panel);scrollbar-width:thin;scrollbar-color:var(--line) transparent;flex-direction:column;display:flex;position:relative;overflow:hidden auto}.panel--source{border-inline-end:1px solid var(--line);grid-area:source}.panel--style{border-inline-start:1px solid var(--line);grid-area:style}.section{border-bottom:1px solid var(--line-soft);flex-direction:column;gap:12px;padding:16px;display:flex}.section--grow{border-bottom:0;flex:1 0 auto;height:0;min-height:240px}.section__title{color:var(--faint);letter-spacing:0;margin:0;font-size:11.5px;font-weight:500}.field{flex-direction:column;flex:1;gap:5px;min-width:0;display:flex}.field>span{color:var(--muted);font-size:12px}.field-row{align-items:flex-end;gap:8px;display:flex}.field-row__sep{color:var(--faint);padding-bottom:7px}.input{background:var(--raised);border:1px solid var(--line);border-radius:var(--r);width:100%;height:34px;color:var(--text);outline:none;padding:0 10px}.input:hover{border-color:#393c45}.input:focus{border-color:var(--gold-line)}select.input{padding-inline-end:6px}input[type=number].input{font-variant-numeric:tabular-nums}.link{color:var(--gold);background:0 0;border:0;padding:0;font-size:12.5px}.link:hover{text-underline-offset:3px;text-decoration:underline}.link--muted{color:var(--muted);align-self:flex-start}.dropzone{background:var(--raised);color:var(--text);text-align:center;border:1px dashed #3a3d46;border-radius:10px;flex-direction:column;align-items:center;gap:6px;padding:20px 14px;display:flex}.dropzone:hover,.dropzone.is-over{border-color:var(--gold);background:var(--gold-soft)}.dropzone__icon{color:var(--gold);font-size:22px;line-height:1}.dropzone small{color:var(--faint);font-size:11.5px}.clip{align-items:center;gap:12px;display:flex}.clip__thumb{object-fit:cover;border:1px solid var(--line);background:#000;border-radius:6px;flex-shrink:0;width:54px;height:76px}.clip__info{flex-direction:column;gap:2px;min-width:0;display:flex}.clip__name{white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.clip__meta{color:var(--faint);font-variant-numeric:tabular-nums;font-size:12px}.clip__actions{gap:14px;margin-top:4px;display:flex}.reciters{flex-direction:column;flex:1;gap:8px;min-height:0;display:flex}.reciters__list{scrollbar-width:thin;scrollbar-color:var(--line) transparent;flex-direction:column;flex:1;gap:10px;min-height:0;margin-inline:-6px;padding-inline:6px;display:flex;overflow-y:auto}.reciters__group{flex-direction:column;gap:2px;display:flex}.reciters__label{color:var(--faint);justify-content:space-between;padding:4px 6px;font-size:11.5px;display:flex}.reciter{border-radius:var(--r);text-align:start;background:0 0;border:1px solid #0000;align-items:center;gap:10px;padding:6px;display:flex}.reciter:hover{background:var(--hover)}.reciter.is-on{background:var(--gold-soft);border-color:var(--gold-line)}.reciter__avatar{background:var(--raised);border:1px solid var(--line);width:30px;height:30px;color:var(--muted);border-radius:50%;flex-shrink:0;place-items:center;font-weight:500;display:grid}.reciter.is-on .reciter__avatar{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}.reciter__name{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.reciter__note{color:var(--muted);background:var(--raised);border-radius:4px;flex-shrink:0;padding:1px 6px;font-size:11px}.empty{color:var(--faint);text-align:center;margin:12px 0}.stage{background:radial-gradient(circle at 50% 40%, #17181c 0%, var(--bg) 70%);flex-direction:column;grid-area:stage;min-width:0;min-height:0;display:flex;position:relative}.viewer{flex:1;place-items:center;min-height:0;padding:20px 24px 12px;display:grid}.screen{background:#000;border-radius:6px;max-width:100%;max-height:100%;position:relative;overflow:hidden;box-shadow:0 0 0 1px #2c2f36,0 24px 60px -20px #000c}.screen--portrait{aspect-ratio:9/16;height:100%}.screen--landscape{aspect-ratio:16/9;width:100%}.screen--square{aspect-ratio:1;height:100%}.screen__empty{color:var(--muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:20px;display:flex;position:absolute;inset:0}.spinner{border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;width:22px;height:22px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.toast{top:12px;z-index:5;border-radius:var(--r);color:var(--danger);background:#2a1a18;border:1px solid #ef8f8066;align-items:flex-start;gap:10px;padding:10px 14px;display:flex;position:absolute;inset-inline:24px}.toast span{flex:1}.toast__close{color:var(--danger);background:0 0;border:0;padding:0 2px;font-size:18px;line-height:1}.hint-bar{border-radius:var(--r);background:var(--gold-soft);color:#e8d3a0;border:1px solid #d8b45f40;margin:12px 24px 0;padding:8px 12px;font-size:12.5px}.strip{border-top:1px solid var(--line-soft);flex-shrink:0;max-height:26%;padding:8px 24px 12px;overflow-y:auto}.strip__hint{color:var(--faint);text-align:center;margin:0 0 2px;font-size:11.5px}.strip__hint kbd{font:inherit;border:1px solid var(--line);color:var(--muted);border-radius:4px;padding:0 5px;font-size:11px}.strip__text{font:25px/2 var(--quran);text-align:center;margin:0}.strip__word{font:inherit;color:#d9d9de;background:0 0;border:0;border-radius:5px;margin:0 1px;padding:0 3px;position:relative}.strip__word:hover{background:var(--hover);color:#fff}.strip__word.is-big{color:var(--gold)}.strip__word.is-break:before{content:"";inset-inline-start:-3px;border-inline-start:2px solid var(--gold);position:absolute;top:20%;bottom:20%}.strip__ayah{color:var(--gold);margin-inline:4px;font-size:.85em}.styles{grid-template-columns:1fr 1fr;gap:8px;display:grid}.style-card{border:1px solid var(--line);background:var(--raised);text-align:start;border-radius:10px;flex-direction:column;align-items:stretch;gap:2px;padding:6px 6px 9px;display:flex}.style-card:hover{border-color:#3a3d46}.style-card.is-on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}.sample{color:#fff;height:58px;font:21px/1 var(--quran);white-space:nowrap;direction:rtl;background:linear-gradient(160deg,#1d3557 0%,#0e1a2c 100%);border-radius:6px;justify-content:center;align-items:center;gap:7px;margin-bottom:6px;display:flex;overflow:hidden}.style-card__name{padding-inline:3px;font-weight:500}.style-card__hint{color:var(--faint);padding-inline:3px;font-size:11px;line-height:1.4}.segmented{background:var(--raised);border:1px solid var(--line);border-radius:var(--r);grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;display:grid}.segmented button{color:var(--muted);background:0 0;border:0;border-radius:6px;flex-direction:column;align-items:center;gap:4px;padding:7px 4px;font-size:11.5px;display:flex}.segmented button:hover{color:var(--text)}.segmented button.is-on{background:var(--hover);color:var(--text);box-shadow:0 0 0 1px var(--line)}.ratio{border:1.5px solid;border-radius:2px;display:block}.ratio--portrait{width:10px;height:17px}.ratio--landscape{width:20px;height:12px;margin-block:2.5px}.ratio--square{width:14px;height:14px;margin-block:1.5px}.segmented button.is-on .ratio{border-color:var(--gold)}.slider{flex-direction:column;gap:4px;display:flex}.slider__head{color:var(--muted);justify-content:space-between;font-size:12px;display:flex}.slider output{color:var(--text);font-variant-numeric:tabular-nums}input[type=range]{appearance:none;background:0 0;width:100%;height:16px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to left, var(--gold) var(--pct,50%), var(--line) var(--pct,50%));border-radius:2px;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#f2f2f4;border:0;border-radius:50%;width:13px;height:13px;margin-top:-5px;box-shadow:0 1px 3px #0009}input[type=range]::-moz-range-track{background:var(--line);border-radius:2px;height:3px}input[type=range]::-moz-range-progress{background:var(--gold);border-radius:2px;height:3px}input[type=range]::-moz-range-thumb{background:#f2f2f4;border:0;border-radius:50%;width:13px;height:13px}.stepper{border:1px solid var(--line);border-radius:var(--r);background:var(--raised);align-items:center;height:32px;display:flex}.stepper button{width:30px;height:100%;color:var(--muted);background:0 0;border:0;font-size:15px}.stepper button:hover:not(:disabled){color:var(--text)}.stepper button:disabled{opacity:.35}.stepper output{text-align:center;font-variant-numeric:tabular-nums;flex:1}.swatches{align-items:center;gap:8px;display:flex}.swatch{border:2px solid var(--panel);width:24px;height:24px;box-shadow:0 0 0 1px var(--line);border-radius:50%;padding:0}.swatch.is-on{box-shadow:0 0 0 2px var(--gold)}.swatch--custom{cursor:pointer;background:conic-gradient(#f87171,#fbbf24,#a3e635,#22d3ee,#818cf8,#f472b6,#f87171);position:relative;overflow:hidden}.swatch--custom input{opacity:0;cursor:pointer;position:absolute;inset:0}.toggle{color:var(--text);cursor:pointer;align-items:center;gap:10px;display:flex;position:relative}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle__track{background:var(--line);border-radius:9px;flex-shrink:0;width:30px;height:17px;transition:background .15s;position:relative}.toggle__track:after{content:"";top:2px;background:#f2f2f4;border-radius:50%;width:13px;height:13px;transition:inset-inline-start .15s;position:absolute;inset-inline-start:2px}.toggle input:checked+.toggle__track{background:var(--gold)}.toggle input:checked+.toggle__track:after{inset-inline-start:15px}.toggle input:focus-visible+.toggle__track{outline:2px solid var(--gold);outline-offset:2px}.timeline{background:var(--panel);border-top:1px solid var(--line);flex-direction:column;grid-area:timeline;gap:6px;min-width:0;padding:8px 16px 12px;display:flex}.timeline--empty{color:var(--faint);justify-content:center;align-items:center}.timeline__head{justify-content:space-between;align-items:center;font-size:12px;display:flex}.timeline__clock{font-variant-numeric:tabular-nums;color:var(--text);direction:ltr}.timeline__clock span,.timeline__count{color:var(--faint)}.timeline__body{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;flex:1;position:relative}.ruler{border-bottom:1px solid var(--line-soft);height:16px;position:relative}.ruler__tick{color:var(--faint);border-left:1px solid var(--line);font-variant-numeric:tabular-nums;height:100%;padding-left:4px;font-size:10px;line-height:15px;position:absolute;top:0}.ayahs{height:18px;position:relative}.ayahs__mark{color:var(--gold);border-left:1px solid var(--gold-line);white-space:nowrap;padding-left:4px;font-size:10.5px;line-height:14px;position:absolute;top:2px}.track{height:54px;position:relative}.block{background:var(--raised);border:1px solid var(--line);border-radius:6px;margin-left:1px;transition:background .15s,border-color .15s;position:absolute;top:0;bottom:0;overflow:hidden}.block:hover{border-color:#40434d}.block.is-current{background:var(--gold-soft);border-color:var(--gold-line)}.block.has-big:after{content:"";background:var(--gold);border-radius:50%;width:5px;height:5px;position:absolute;top:5px;left:5px}.block__text{font:15px/1 var(--quran);color:#cfd0d6;white-space:nowrap;align-items:center;display:flex;position:absolute;inset:0 8px 12px;overflow:hidden}.block__ticks{height:6px;position:absolute;bottom:4px;left:0;right:0}.block__ticks i{background:#4a4d57;width:1px;height:6px;position:absolute;bottom:0}.block.is-current .block__ticks i{background:var(--gold-line)}.playhead{background:var(--gold);pointer-events:none;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0}.playhead:before{content:"";border:5px solid #0000;border-top:6px solid var(--gold);position:absolute;top:-2px;left:-4px}@media (max-width:1180px){.app{grid-template-columns:270px minmax(0,1fr) 280px}.styles{grid-template-columns:1fr}}@media (max-width:900px){.app{grid-template:"top""stage""timeline""source""style"/1fr;height:auto;min-height:100vh}.topbar{flex-wrap:wrap;gap:10px;height:auto;padding:10px 16px}.topbar__title{text-align:start;flex-basis:100%;order:3}.viewer{flex:none;height:min(70vh,560px);min-height:280px;padding:16px}.strip{max-height:220px}.panel,.panel--source{border:0;border-top:1px solid var(--line);overflow:visible}.reciters__list{max-height:360px}.timeline{height:150px}.styles{grid-template-columns:1fr 1fr}}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}.export__fill,.block,.toggle__track,.toggle__track:after{transition:none}}@font-face{font-family:QuranNaskh;src:url(/quran-tools/fonts/NotoNaskhArabic-Bold.woff2)format("woff2");font-display:swap}.styles .style-card:first-child{grid-column:1/-1}.styles .style-card:first-child .sample{height:70px;font-size:26px}.segmented--two{grid-template-columns:repeat(2,1fr)}.font-sample{color:var(--text);font-size:19px;line-height:1.3}