.pager{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin:2.5rem 0 .5rem;display:flex}.pager-btn{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;padding:.55rem 1.25rem;font-weight:600;transition:border-color .15s,background .15s}.pager-btn:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.pager-btn:disabled{opacity:.4;cursor:default}.pager-at{text-align:center;min-width:8rem;font-family:var(--font-num);color:var(--muted);font-size:.9375rem}@media (max-width:420px){.pager{gap:.5rem}.pager-btn{padding:.5rem .9rem}.pager-at{min-width:6rem}}
.how{max-width:46rem}.how-intro{color:var(--muted);margin:0 0 2rem;font-size:.9375rem}.how-step{margin-bottom:2.25rem}.how-step h2{align-items:baseline;gap:.6rem;margin:0 0 .4rem;font-size:1.0625rem;display:flex}.how-n{background:var(--accent-soft);width:1.6rem;height:1.6rem;color:var(--accent);font-family:var(--font-num);border-radius:50%;flex:none;place-items:center;font-size:.75rem;line-height:1;display:grid}.how-step>p{color:var(--muted);margin:0 0 .85rem;font-size:.9375rem;line-height:1.95}.how-figure{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);pointer-events:none;padding:.9rem 1rem;overflow-x:auto}.how-row{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.how-verse{font-family:var(--font-quran);font-size:1.5rem;line-height:2.2}.how-verse-en{font-size:1.0625rem;line-height:1.9}.how-input,.how-field{color:var(--muted);font-size:.9375rem}.how-field{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:.7rem .9rem;display:block}.how-count{font-family:var(--font-num);color:var(--muted);margin-top:.5rem;font-size:.8125rem;display:block}.how-bar{font-family:var(--font-num);color:var(--muted);flex-wrap:wrap;align-items:center;gap:.75rem;font-size:.875rem;display:flex}.how-keep{color:var(--accent);align-items:center;gap:.35rem;display:inline-flex}.how-keep svg{width:.8rem;height:.8rem}.how-bar-end{align-items:center;gap:.6rem;margin-inline-start:auto;display:inline-flex}.how-key{border:1px solid var(--border);border-radius:var(--radius-sm);padding:.1rem .45rem;font-size:.8125rem}.how-icon{width:1rem;height:1rem}.how-icons{color:var(--muted);vertical-align:middle;align-items:center;gap:.5rem;margin-inline-start:.4rem;display:inline-flex}.how-share-icon{margin:0 0 .5rem}.how-tiles{grid-template-columns:repeat(2,1fr);margin-top:0}.how-play{background:var(--accent);width:2.2rem;height:2.2rem;color:var(--accent-contrast);border-radius:50%;place-items:center;display:grid}.how-play svg{width:1.1rem;height:1.1rem}.how-num{font-family:var(--font-num);color:var(--muted);font-size:.875rem}.how-select{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);margin-inline-start:auto;padding:.35rem .8rem;font-size:.875rem}.how-known{background:var(--accent);color:var(--accent-contrast)}.how-revealed{margin-top:.6rem}.how-figure .wird{background:0 0;border:0;margin:0;padding:0}.how-wird-title{font-size:.9375rem}.how-share{white-space:pre-line;color:var(--muted);margin:0;font-size:.875rem;line-height:1.9}.how-units{flex-wrap:wrap;gap:.25rem;display:flex}.how-unit{border:1px solid var(--border);width:1.6rem;height:1.6rem;font-family:var(--font-num);color:var(--muted);border-radius:6px;place-items:center;font-size:.6875rem;display:grid}.how-unit[data-on=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.how-swatches{gap:.3rem;display:inline-flex}.how-closing{border-top:1px solid var(--border);color:var(--muted);margin:2.5rem 0 0;padding-top:1.25rem;font-size:.9375rem}.how-cta{margin:1.25rem 0 0}
