.native-glyph { font-size: var(--ar-size, 2rem); line-height: 2.3; padding: 0 .35em .25rem; white-space: nowrap; user-select: none; }
.native-unicode-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wbw-panel.is-continuous .wbw-words { display: block; text-align: right; direction: rtl; line-height: 2.3; }
.wbw-panel.is-continuous .wbw-word { display: inline-flex; vertical-align: baseline; padding: 0 .1em; border: 0; box-shadow: none; background: transparent; min-width: 0; min-height: 0; margin: 0; }
.wbw-panel.is-continuous .wbw-word { cursor: text; }
.wbw-panel.is-continuous .wbw-word:hover { background: transparent; }
.wbw-panel.is-continuous .wbw-detail { display: none; }
.reader-hint.tajweed-error { color: var(--text); }
@font-palette-values --tronen-rules-light { font-family: TronenQCF4Rules; base-palette: 0; }
@font-palette-values --tronen-rules-dark { font-family: TronenQCF4Rules; base-palette: 1; }
.native-rule-icon { font-family: TronenQCF4Rules; font-palette: --tronen-rules-light; font-size: 2rem; min-width: 3rem; text-align: center; }
[data-theme="dark"] .native-rule-icon { font-palette: --tronen-rules-dark; }
.native-rules-open { overflow: hidden; }
.native-rules { position: fixed; inset: 0; width: min(48rem,calc(100% - 2rem)); max-width: 100%; max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 1px solid var(--rule); border-radius: 1rem; background: var(--paper); color: var(--ink); box-shadow: 0 1rem 5rem #0004; overflow: hidden; }
.native-rules[open] { display: flex; flex-direction: column; }
.native-rules::backdrop { background: #0007; }
.native-rules-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--rule); flex-shrink: 0; }
.native-rules-heading h2 { font-size: 1.8rem; }
.native-rules-heading .tf-kicker { margin-bottom: .25rem; }
.reader #tajweed-rules-close { width: 2.875rem; font-size: 1.5rem; flex-shrink: 0; }
.native-rules-body { padding: 1.25rem; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.native-rules-body > p { margin-bottom: 1rem; font-size: .9375rem; line-height: 1.7; }
.native-rules-footer { border-top: 1px solid var(--rule); padding: .75rem 1.25rem; flex-shrink: 0; text-align: right; }
.native-rules :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.native-rule-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem 2rem; padding: 0; list-style: none; }
.native-rule-list li { display: flex; align-items: start; gap: .8rem; padding-block: .75rem; border-bottom: 1px solid var(--rule); }
.native-rule-list strong,.native-rule-list small { display: block; }
.native-rule-list small { font-size: .875rem; color: var(--muted); margin-top: .25rem; }
.native-rule-list p { margin: .5rem 0; line-height: 1.65; font-size: 1rem; }
.native-rule-icon[hidden],.native-rules[hidden] { display: none; }
@media (max-width: 650px) { .native-rule-list { grid-template-columns: 1fr; gap: .25rem; }.native-rules { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }.native-rules-heading,.native-rules-body { padding: 1rem; } }
@media (forced-colors: active) {
  .native-glyph { display: none; }
  .native-unicode-hidden { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: nowrap; }
}