.of-app{--of-max:760px;--page-max:var(--of-max);background:var(--c-bg);min-block-size:100dvh;color:var(--c-text);font-family:var(--font-ui)}.of-main{max-inline-size:var(--of-max);padding-inline:var(--gutter);gap:var(--space-6);padding-block:var(--space-6) var(--space-12);margin-inline:auto;display:grid}.of-head{gap:var(--space-2);display:grid}.of-lead,.of-soft{color:var(--c-text-soft);line-height:var(--lh-body);margin:0}.of-net{gap:var(--space-2);padding-block:var(--space-1);padding-inline:var(--space-3);border-radius:var(--radius-full);background:var(--c-warning-soft);color:var(--c-warning);font-size:var(--fs-sm);justify-self:start;align-items:center;margin:0;display:inline-flex}.of-net[data-online]{background:var(--c-success-soft);color:var(--c-success)}.of-section{gap:var(--space-3);display:grid}.of-section p{line-height:var(--lh-body);margin:0}.of-h2{font-size:var(--fs-lg);margin:0}.of-h3{font-size:var(--fs-md);margin:0}.of-cards{gap:var(--space-3);margin:0;padding:0;list-style:none;display:grid}.of-card{gap:var(--space-2);padding:var(--space-4);border:1px solid var(--c-border);border-radius:var(--radius-lg);background:var(--c-surface);display:grid}.of-card-head{gap:var(--space-2);flex-wrap:wrap;justify-content:space-between;align-items:baseline;display:flex}.of-meter{border-radius:var(--radius-full);background:var(--c-accent-soft);block-size:8px;overflow:hidden}.of-meter-fill{border-radius:inherit;background:var(--c-accent);block-size:100%;transition:inline-size var(--dur-fast,.15s) ease-out;display:block}.of-warn{color:var(--c-warning)}.of-actions{gap:var(--space-2);flex-wrap:wrap;align-items:end;display:flex}.of-field{gap:var(--space-1);font-size:var(--fs-sm);display:grid}.of-field .ui-input{inline-size:8em}.of-fallback{gap:var(--space-3);max-inline-size:42rem;padding:var(--space-4);border:1px dashed var(--c-page-frame);border-radius:var(--radius-md);background:var(--c-page-paper);color:var(--c-page-ink);grid-template-columns:minmax(0,1fr);margin-inline:auto;display:grid}.of-fallback-label{overflow-wrap:break-word;gap:var(--space-1);padding-block:var(--space-2);padding-inline:var(--space-3);border-radius:var(--radius-sm);background:var(--c-warning-soft);color:var(--c-text);font-family:var(--font-ui);font-size:var(--fs-sm);margin:0;display:grid}.of-fallback-status{gap:var(--space-2);font-family:var(--font-ui);justify-items:start;margin:0;display:grid}.of-fallback-text{font-family:var(--font-quran);font-size:calc(var(--fs-xl) * var(--rd-scale,1));text-align:justify;line-height:2.2}.of-fallback-head{gap:var(--space-1);margin-block:var(--space-3) var(--space-2);text-align:center;justify-items:center;display:grid}.of-fallback-surah{padding-block:var(--space-1);padding-inline:var(--space-6);border:1px solid var(--c-page-frame-soft);border-radius:var(--radius-sm);background:var(--c-page-frame-fill);font-size:.9em}.of-fallback-mark{white-space:nowrap}.of-fallback-foot{justify-content:space-between;gap:var(--space-2);color:var(--c-text-soft);font-family:var(--font-ui);font-size:var(--fs-xs);flex-wrap:wrap;display:flex}