#tajweed-notebook{--tj-paper:#fcf8f0;--tj-ink:#302a24;--tj-muted:#62584d;--tj-line:#d0b99d;--tj-clay:#175b49;--tj-soft:#eee2cf;--tj-focus:#076849;color:var(--tj-ink);background:var(--tj-paper);border:1px solid var(--tj-line);border-radius:6px;font-family:Tajawal,Georgia,serif;line-height:1.65;overflow:hidden}
[data-theme=dark] #tajweed-notebook{--tj-paper:#211f1c;--tj-ink:#fff1dc;--tj-muted:#dcccb5;--tj-line:#746149;--tj-clay:#a9d9c4;--tj-soft:#393128;--tj-focus:#a9f5ce}
#tajweed-notebook *{box-sizing:border-box;min-width:0}#tajweed-notebook [hidden]{display:none!important}#tajweed-notebook .tj-heading{padding:1.8rem 2rem;border-block-end:1px solid var(--tj-line);background:repeating-linear-gradient(transparent,transparent 31px,var(--tj-soft) 32px,transparent 33px)}#tajweed-notebook .tj-heading h2{font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.3;font-weight:800;margin:.35rem 0 .8rem;letter-spacing:-.025em}#tajweed-notebook p{margin:.65rem 0;color:inherit;overflow-wrap:anywhere}#tajweed-notebook .tj-heading p:last-child{max-width:72ch;color:var(--tj-muted)}#tajweed-notebook .tj-eyebrow{font-weight:800;color:var(--tj-clay);font-size:.85rem;letter-spacing:.06em}#tajweed-notebook h3{color:var(--tj-ink);font-size:1.12rem;margin:0 0 1rem}#tajweed-notebook button{font:inherit;color:var(--tj-ink);background:var(--tj-paper);border:1px solid var(--tj-line);border-radius:4px;padding:.65rem .85rem;min-height:44px;cursor:pointer;line-height:1.4;white-space:normal;overflow-wrap:anywhere}#tajweed-notebook button:hover{background:var(--tj-soft)}#tajweed-notebook button:disabled{color:var(--tj-muted);opacity:1;cursor:default;background:var(--tj-soft)}#tajweed-notebook button.tj-primary{background:var(--tj-clay);color:var(--tj-paper);border-color:var(--tj-clay);font-weight:800}#tajweed-notebook button.tj-primary:disabled{background:var(--tj-soft);color:var(--tj-muted);border-color:var(--tj-line)}#tajweed-notebook :is(button,input,textarea,select,summary,a):focus-visible{outline:3px solid var(--tj-focus);outline-offset:3px}#tajweed-notebook .tj-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block-end:1px solid var(--tj-line)}#tajweed-notebook .tj-tabs button{border-radius:0;border:0;border-inline-end:1px solid var(--tj-line);padding:1rem .4rem;font-weight:800}#tajweed-notebook .tj-tabs button:last-child{border-inline-end:0}#tajweed-notebook .tj-tabs button[aria-selected=true]{color:var(--tj-clay);box-shadow:inset 0 -4px var(--tj-clay);background:var(--tj-soft)}#tajweed-notebook .tj-panel{padding:1.8rem 2rem}#tajweed-notebook .tj-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem}#tajweed-notebook label{display:block;color:var(--tj-muted);font-weight:700;margin:0 0 .4rem;font-size:.9rem}#tajweed-notebook :is(input,textarea,select){display:block;width:100%;padding:.8rem;border:1px solid var(--tj-line);border-radius:4px;background:var(--tj-paper);color:var(--tj-ink);font:inherit;line-height:1.65;box-shadow:none}#tajweed-notebook :is(input,textarea){font-size:1.65rem}#tajweed-notebook textarea{resize:vertical}#tajweed-notebook .tj-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}#tajweed-notebook .tj-reference{border-inline-start:2px solid var(--tj-line);padding-inline-start:1.5rem}#tajweed-notebook .tj-example-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}#tajweed-notebook .tj-example-buttons button{font-size:1.6rem}#tajweed-notebook .tj-verb-forms{display:grid;gap:.5rem;margin-top:1rem}#tajweed-notebook .tj-form-card{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem;background:var(--tj-soft);border-radius:4px}#tajweed-notebook .tj-form-card small{font-size:.9rem;color:var(--tj-muted)}#tajweed-notebook .tj-arabic{font-size:1.65rem;line-height:1.8;font-weight:700;white-space:normal}#tajweed-notebook .tj-sentence-examples{display:grid;gap:.45rem;max-height:480px;overflow:auto;overscroll-behavior:contain;padding:4px}#tajweed-notebook .tj-sentence-examples button{text-align:right;font-size:1.25rem}#tajweed-notebook .tj-result{margin-top:1.3rem;border-block-start:2px solid var(--tj-clay);padding-top:1rem}#tajweed-notebook .tj-input-reading{font-size:1.75rem;line-height:1.9}#tajweed-notebook .tj-result-label{font-size:.8rem;font-weight:800;color:var(--tj-clay)}#tajweed-notebook .tj-reading-card{display:grid;gap:.35rem;padding:.85rem;background:var(--tj-soft);border:1px solid var(--tj-line);border-radius:4px;margin:.7rem 0}#tajweed-notebook .tj-reading-card small,#tajweed-notebook .tj-note{color:var(--tj-muted)}#tajweed-notebook .tj-classification{font-weight:700}#tajweed-notebook .tj-forms-note{font-size:1.25rem}#tajweed-notebook .tj-type{font-weight:800;font-size:1.2rem}#tajweed-notebook .tj-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}#tajweed-notebook .tj-role{display:grid;text-align:center;gap:.35rem;padding:.6rem;background:var(--tj-soft);border:1px solid var(--tj-line);border-radius:4px}#tajweed-notebook .tj-role span{font-size:.9rem;font-weight:700}#tajweed-notebook .tj-practice-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}#tajweed-notebook .tj-stats{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-block:1px solid var(--tj-line);margin:1.5rem 0}#tajweed-notebook .tj-quiz-reading{font-size:clamp(1.75rem,5vw,2.6rem);line-height:1.9;text-align:center;margin:1.5rem 0}#tajweed-notebook .tj-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}#tajweed-notebook .tj-option[aria-pressed=true]{border:2px solid var(--tj-clay);background:var(--tj-soft);font-weight:800}#tajweed-notebook .tj-quiz-note{background:var(--tj-soft);padding:1rem;border-inline-start:3px solid var(--tj-clay);margin-top:1rem}#tajweed-notebook .tj-notes{padding:1.8rem 2rem;border-block-start:1px solid var(--tj-line)}#tajweed-notebook .tj-rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}#tajweed-notebook details{border:1px solid var(--tj-line);padding:.7rem .9rem;border-radius:4px}#tajweed-notebook summary{cursor:pointer;min-height:30px;font-weight:800}#tajweed-notebook .tj-rule-example{font-size:1.45rem;line-height:1.9}#tajweed-notebook .tj-privacy{font-size:.85rem;color:var(--tj-muted);margin:1.5rem 0}#tajweed-notebook a{color:var(--tj-clay);text-decoration:underline}#tajweed-notebook ul{padding-inline-start:1.2rem}
@media(max-width:700px){#tajweed-notebook .tj-layout{grid-template-columns:1fr;gap:1.5rem}#tajweed-notebook .tj-reference{border-inline-start:0;border-block-start:1px solid var(--tj-line);padding-inline-start:0;padding-top:1.5rem}#tajweed-notebook .tj-sentence-examples{max-height:240px}#tajweed-notebook .tj-panel,#tajweed-notebook .tj-heading,#tajweed-notebook .tj-notes{padding:1.3rem 1rem}#tajweed-notebook .tj-rule-grid{grid-template-columns:1fr}#tajweed-notebook .tj-tabs button{font-size:.85rem}}@media(prefers-reduced-motion:reduce){#tajweed-notebook *{scroll-behavior:auto}}

#tajweed-notebook :is(input,textarea,select){background:var(--tj-paper)!important;color:var(--tj-ink)!important;border-color:var(--tj-muted)!important;border-radius:4px!important}#tajweed-notebook .tj-input-reading{white-space:pre-wrap}

#tajweed-notebook .tj-chooser{display:grid;grid-template-columns:1fr 1.6fr;gap:1rem;margin-bottom:1.5rem}
#tajweed-notebook .tj-rule{border-block-start:3px solid var(--tj-clay);padding-top:1.3rem}#tajweed-notebook .tj-rule h3{font-size:1.6rem;margin-bottom:.35rem}#tajweed-notebook .tj-rule h4{margin:1.2rem 0 .3rem}#tajweed-notebook .tj-arabic{display:block;font-size:1.8rem;color:var(--tj-clay)}#tajweed-notebook .tj-muted{color:var(--tj-muted);font-size:.94rem}#tajweed-notebook .tj-relevant{display:flex;align-items:baseline;gap:1rem;margin:1rem 0;padding:.7rem 0;border-block:1px solid var(--tj-line)}#tajweed-notebook .tj-relevant b{font-size:1.6rem;line-height:1.9}#tajweed-notebook .tj-fragment{font-size:2rem;line-height:2.25;text-align:center;padding:.6rem 1rem;background:var(--tj-soft);border:1px solid var(--tj-line);border-radius:4px;white-space:pre-wrap;overflow-wrap:anywhere}#tajweed-notebook mark{background:var(--tj-clay);color:var(--tj-paper);padding:.08em .06em;border-radius:2px}#tajweed-notebook .tj-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}#tajweed-notebook .tj-letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.5rem;margin:1.3rem 0}#tajweed-notebook .tj-letters button{display:grid;gap:.2rem;justify-items:center}#tajweed-notebook .tj-letters b{font-size:2rem;line-height:1.7}#tajweed-notebook .tj-letters span{font-size:.95rem}#tajweed-notebook .tj-letters button[aria-pressed=true]{background:var(--tj-soft);border-color:var(--tj-clay);box-shadow:inset 0 -3px var(--tj-clay)}#tajweed-notebook .tj-signs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}#tajweed-notebook .tj-signs article{border-block-start:1px solid var(--tj-line);padding:1rem 0}#tajweed-notebook .tj-sign{font-size:2.4rem;line-height:1.9}#tajweed-notebook .tj-signs h4{margin:.5rem 0}#tajweed-notebook .tj-text-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:1rem}#tajweed-notebook .tj-check{display:flex;align-items:flex-start;gap:.65rem;border:1px solid var(--tj-line);padding:.75rem;min-height:44px;border-radius:4px;color:var(--tj-ink);cursor:pointer;margin:0}#tajweed-notebook .tj-check input{width:22px!important;height:22px!important;flex:none;margin:.2rem 0 0;accent-color:var(--tj-clay)}#tajweed-notebook .tj-check small{display:block;font-size:.78rem;overflow-wrap:anywhere;color:var(--tj-muted);font-weight:400}#tajweed-notebook .tj-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}#tajweed-notebook .tj-output{white-space:pre-wrap;overflow-wrap:anywhere;font-size:1.7rem;line-height:2;min-height:2em}#tajweed-notebook .tj-counts{display:grid;grid-template-columns:1fr auto;gap:.4rem;font-size:.9rem}#tajweed-notebook .tj-counts dd{margin:0;direction:ltr}#tajweed-notebook .tj-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}#tajweed-notebook .tj-answer{display:flex;align-items:center;gap:.65rem;padding:.8rem;border:1px solid var(--tj-line);color:var(--tj-ink);min-height:52px;margin:0;border-radius:4px;cursor:pointer}#tajweed-notebook .tj-answer input{width:22px!important;height:22px!important;flex:none;margin:0;accent-color:var(--tj-clay)}#tajweed-notebook .tj-answer:has(input:checked){background:var(--tj-soft);border-color:var(--tj-clay)}#tajweed-notebook .tj-stats{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-block:1px solid var(--tj-line);margin:1rem 0}#tajweed-notebook .tj-footer{padding:1.2rem 2rem;border-block-start:1px solid var(--tj-line)}#tajweed-notebook .tj-footer summary{min-height:44px;padding:.5rem 0;cursor:pointer}#tajweed-notebook a{color:var(--tj-clay);overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:.2em}#tajweed-notebook :is(input,textarea,select){background:var(--tj-paper)!important;color:var(--tj-ink)!important;border:1px solid var(--tj-muted)!important;border-radius:4px!important}
@media(max-width:600px){#tajweed-notebook .tj-chooser,#tajweed-notebook .tj-examples,#tajweed-notebook .tj-text-options,#tajweed-notebook .tj-comparison,#tajweed-notebook .tj-answers{grid-template-columns:1fr}#tajweed-notebook .tj-signs{grid-template-columns:repeat(2,minmax(0,1fr))}#tajweed-notebook .tj-relevant{display:block}#tajweed-notebook .tj-relevant b{display:block;margin-top:.3rem}#tajweed-notebook .tj-footer{padding:1rem}#tajweed-notebook .tj-fragment{font-size:1.8rem;padding:.6rem}#tajweed-notebook .tj-tabs button{padding:.9rem .35rem;font-size:.9rem}}