.quran-journey { --qj-ink:#243a35; --qj-green:#167a5c; --qj-soft:#edf5f0; --qj-line:#d9e3dc; --qj-gold:#9a701c; color:var(--qj-ink); background:#fff; padding:32px 20px; margin:24px 0; border-block:1px solid var(--qj-line); min-width:0; text-align:start; letter-spacing:0; }
.quran-journey *, .quran-journey *::before, .quran-journey *::after { box-sizing:border-box; }
.quran-journey h3,.quran-journey h4,.quran-journey h5,.quran-journey p { margin:0; }
.quran-journey h3 { font-size:32px; line-height:1.25; letter-spacing:0; font-weight:650; }
.quran-journey h4 { font-size:18px; line-height:1.4; }
.quran-journey h5 { font-size:17px; }
.quran-journey p { color:#53696e; font-size:14px; line-height:1.6; }
.quran-journey button { font:inherit; font-size:14px; color:var(--qj-ink); background:#fff; border:1px solid #b7cac7; border-radius:6px; min-height:44px; padding:9px 12px; display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; line-height:1.4; letter-spacing:0; white-space:normal; transition:background-color .16s ease,border-color .16s ease; }
.quran-journey button:hover { background:var(--qj-soft); border-color:var(--qj-green); }
.quran-journey button:focus-visible,.qj-viewport:focus-visible,.qj-explanation summary:focus-visible { outline:3px solid #af741c; outline-offset:3px; }
.quran-journey button:disabled { opacity:.45; cursor:default; }
.quran-journey svg { width:18px; height:18px; flex:none; }
.qj-heading,.qj-section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.qj-heading > div,.qj-section-heading > div,.qj-connections article > div { min-width:0; }
.qj-eyebrow,.qj-connections strong,.qj-comparison h5 { overflow-wrap:anywhere; }
.qj-heading img { object-fit:contain; width:44px; height:44px; flex:none; }
.qj-heading .qj-eyebrow { font-size:14px; color:#596d64; margin-bottom:6px; }
.qj-journey-score { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 0 22px; }
.qj-score-block { flex:none; }
.qj-score-label,.qj-goal-label { display:block; font-size:12px; line-height:1.5; font-weight:500; color:#607167; }
.qj-score-label { margin-bottom:6px; }
.qj-score-main { display:flex; gap:10px; align-items:center; flex:none; }
.qj-score-main > strong { font-size:60px; line-height:1; color:#146d51; font-weight:600; font-variant-numeric:tabular-nums; }
.qj-score-main > span { display:grid; gap:1px; font-size:18px; color:#65776d; }
.qj-score-main small { font-size:13px; }
.qj-next-goal { display:flex; align-items:center; gap:14px; min-width:0; max-width:52%; }
.qj-goal-emblem { width:56px; height:56px; flex:none; display:grid; place-items:center; border:1px solid #c4a354; border-radius:50%; color:#8d661c; background:#fcf7e8; box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px #e9dcb4; }
.qj-goal-emblem > svg { width:24px; height:24px; stroke-width:1.6; }
.qj-next-goal > div { display:grid; gap:3px; min-width:0; }
.qj-next-goal strong { font-size:20px; line-height:1.3; font-weight:600; }
.qj-next-goal small { font-size:13px; line-height:1.5; color:#627469; max-width:27ch; }
.qj-progress-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; color:#607167; font-size:12px; }
.qj-progress-label strong { font-size:14px; font-weight:600; color:#146d51; }
.qj-progress-track { height:6px; background:#e5ece6; overflow:hidden; border-radius:3px; margin-bottom:28px; }
.qj-progress-track > span { display:block; height:100%; background:#19865f; min-width:0; border-radius:inherit; transition:width .5s ease; }
.qj-adventure { padding:20px 16px 18px; border-block:1px solid #dde6df; background:#f5f8f6; }
.qj-world-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px; margin:0 auto 16px; max-width:560px; }
.qj-world-toolbar > div { display:flex; gap:0; border:1px solid #bdcec3; border-radius:6px; background:#fff; box-shadow:0 2px 3px #213a2e05; overflow:hidden; flex:none; }
.qj-world-toolbar > div button { width:44px; padding:0; border:0; border-radius:0; background:transparent; }
.qj-world-toolbar > div button + button { border-inline-start:1px solid #e0e8e3; }
.qj-world-toolbar > div button:hover { background:#e6f0e9; }
.qj-world-toolbar > div button:focus-visible { outline-offset:-4px; }
.qj-world-toolbar > button { border-color:#23664d; background:#23664d; color:#fff; font-weight:500; flex:1; min-width:0; max-width:200px; min-height:46px; box-shadow:0 2px 3px #123c2814; }
.qj-world-toolbar > button:hover { background:#164c38; color:#fff; border-color:#164c38; }
.qj-viewport { overflow:auto; position:relative; max-width:100%; scrollbar-width:thin; scrollbar-color:#829e90 transparent; touch-action:pan-y pinch-zoom; }
.qj-canvas { width:min(100%,540px); margin-inline:auto; position:relative; padding:12px 0 16px; }
.qj-tower-cap { height:86px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; color:#285044; }
.qj-tower-cap img { width:32px; height:32px; object-fit:contain; }
.qj-tower-cap strong { font-size:17px; line-height:1.3; }
.qj-tower-cap span { font-size:11px; color:#5d7268; }
.qj-tower { width:136px; position:relative; margin-inline:auto; border-inline:1px solid #bccfc0; background:#fff; box-shadow:0 0 0 5px #fff,0 0 0 6px #d4ded5,8px 0 20px #254a3210,-8px 0 20px #254a3208; }
.qj-tower::before { content:""; position:absolute; top:-7px; inset-inline:-6px; height:7px; background:#af8a35; border-radius:3px 3px 0 0; }
.quran-journey .qj-surah { position:relative; display:block; min-height:0; width:100%; min-width:0; border:0; border-bottom:1px solid #fafbf9; border-radius:0; padding:0; background:#e5ebe6; overflow:visible; transition:none; }
.qj-surah-fill { position:absolute; inset:0; overflow:hidden; pointer-events:auto; }
.qj-page-stratum { position:absolute; left:0; width:100%; background:transparent; }
.qj-page-stratum::before { content:""; position:absolute; inset:0; }
.qj-page-stratum.is-filled { background:#fff; border-inline:2px solid #649882; }
.qj-page-stratum.is-filled::before { background:#087951; opacity:var(--page-strength,1); transition:opacity .3s ease; }
.qj-page-stratum.is-unknown::before { background:repeating-linear-gradient(135deg,#b2ccbf 0 4px,#e3ece7 4px 6px); }
.qj-viewport.is-zoomed .qj-surah-fill::after { content:""; position:absolute; inset:0; border:1px solid #234c3210; box-shadow:inset 0 2px 0 #ffffff65,inset 0 -2px 0 #153a2910; pointer-events:none; }
.qj-page-stratum > span { display:none; position:relative; z-index:1; font-size:12px; line-height:1; }
.qj-surah-label { display:none; pointer-events:none; position:absolute; top:50%; left:calc(100% + 18px); width:var(--qj-label-width,100px); transform:translateY(-50%); color:#68776e; text-align:left; line-height:1.35; }
.qj-surah:nth-child(even) .qj-surah-label { left:auto; right:calc(100% + 18px); text-align:right; }
.qj-surah-label::before { content:""; position:absolute; width:12px; height:1px; top:50%; right:calc(100% + 3px); background:#bac9bf; }
.qj-surah:nth-child(even) .qj-surah-label::before { right:auto; left:calc(100% + 3px); }
.qj-surah.show-label .qj-surah-label { display:block; }
.qj-surah-label small { display:flex; align-items:center; justify-content:flex-start; gap:5px; font-size:11px; font-weight:500; color:#6b776d; margin-bottom:5px; direction:ltr; }
.qj-surah:nth-child(even) .qj-surah-label small { justify-content:flex-end; }
.qj-surah-label strong { font-size:15px; font-weight:500; display:block; overflow-wrap:anywhere; }
.qj-surah-label svg { color:#176a45; width:14px; height:14px; padding:2px; border:1px solid #abc8b5; border-radius:50%; background:#e5efe7; }
.qj-surah.is-started .qj-surah-label { color:#176346; }
.qj-surah.is-complete .qj-surah-label strong { font-weight:600; }
.quran-journey .qj-surah:hover { background:#e9edeb; border-color:#fff; box-shadow:inset 0 0 0 2px #ba912b; z-index:2; }
.quran-journey .qj-surah[aria-pressed=true] { outline:2px solid #ad842a; outline-offset:1px; z-index:3; }
.qj-surah[aria-pressed=true] .qj-surah-label { color:#7b5710; font-weight:700; }
.qj-surah[aria-pressed=true] .qj-surah-label::before { background:#ad842a; height:2px; }
.qj-viewport.is-pages .qj-page-stratum { border-bottom:1px solid #ffffff65; display:flex; align-items:center; justify-content:center; }
.qj-viewport.is-pages .qj-page-stratum > span { display:block; color:#5a6c65; }
.qj-viewport.is-pages .qj-page-stratum.is-filled > span { color:var(--page-ink,#fff); }
.qj-viewport.is-zoomed .qj-surah { border-block:3px solid #fff; }
.quran-journey .qj-scale-title { display:flex; align-items:center; justify-content:center; gap:12px; text-align:center; font-size:12px; padding-bottom:18px; color:#586e5e; }
.qj-scale-title::before,.qj-scale-title::after { content:""; height:1px; width:24px; background:#c9d5cd; }
.qj-tower-foot { width:128px; margin-inline:auto; border-top:4px solid #b89135; display:flex; justify-content:space-between; gap:4px; padding-top:10px; color:#3c6856; height:36px; font-size:11px; }
.qj-map-caption { display:flex; justify-content:center; gap:12px; font-size:14px; color:#557065; padding:18px 3px 0; }
.qj-map-caption > strong { color:#196951; }
.qj-legend { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 16px; padding:18px 0 0; font-size:12px; color:#526c61; }
.qj-legend > span { display:flex; align-items:center; gap:6px; }
.qj-legend b { display:inline-block; width:14px; height:14px; border-radius:2px; background:#e9edeb; border:1px solid #becfc5; }
.qj-legend b.is-filled { background:#167e5b; border-color:#167e5b; }
.qj-legend b.is-faded { background:#b8d8cd; border-color:#87bba9; }
.qj-legend b.is-unknown { background:repeating-linear-gradient(135deg,#b2ccbf 0 3px,#e3ece7 3px 5px); border-color:#649882; }
.qj-fade-key { max-width:360px; margin:24px auto 0; }
.qj-fade-key > strong { display:block; color:#4a6256; font-size:12px; font-weight:500; margin-bottom:10px; }
.qj-fade-key > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.qj-fade-key span { display:grid; gap:6px; }
.qj-fade-key b { height:18px; position:relative; display:block; background:white; border:1px solid #649882; border-radius:2px; overflow:hidden; }
.qj-fade-key b::before { content:""; position:absolute; inset:0; background:#087951; opacity:var(--page-strength); }
.qj-fade-key small { color:#4a6256; font-size:12px; line-height:1.5; }
.quran-journey .qj-review-state { text-align:center; color:#77571f; font-size:13px; margin-top:12px; }
.quran-journey .qj-review-timing { text-align:center; font-size:12px; margin-top:10px; color:#5d7168; }
.qj-page-detail { display:flex; flex-wrap:wrap; align-items:center; gap:12px; justify-content:space-between; padding:16px 0 0; background:transparent; margin:20px auto 0; border-top:1px solid #cfddd3; max-width:560px; }
.qj-page-detail > div { display:grid; gap:4px; min-width:0; }
.qj-page-detail span,.qj-page-detail small { font-size:13px; overflow-wrap:anywhere; }
.qj-status { color:#52666c; }
.qj-status.is-filled { color:#1b6546; font-weight:600; background:#e2eee5; padding:4px 8px; border-radius:3px; font-size:12px; }
.qj-page-detail .qj-review-date { flex-basis:100%; font-size:12px; color:#587165; padding-top:10px; border-top:1px solid #e0e9e4; display:flex; justify-content:space-between; flex-wrap:wrap; gap:5px 12px; }
.qj-review-date > strong { color:#345347; font-size:13px; }
.quran-journey[dir="rtl"] [data-action="back-surahs"] svg { transform:scaleX(-1); }
 .qj-miniature { display:grid; grid-template-columns:1fr; grid-template-rows:repeat(604,minmax(0,1fr)); gap:0; height:302px; max-width:52px; margin-inline:auto; border:2px solid #be9c48; }
.qj-miniature > b { display:block; height:100%; background:#e6ece9; border-radius:1px; }
.qj-miniature > b.is-filled { background:var(--qj-green); }
.qj-explanation { font-size:13px; margin-top:16px; }
.qj-explanation summary { cursor:pointer; min-height:44px; padding:12px 0; }
.qj-explanation p { max-width:76ch; font-size:13px; padding-bottom:12px; }
.qj-sharing { border-top:1px solid var(--qj-line); margin-top:16px; padding-top:24px; }
.qj-section-heading p { max-width:65ch; margin-top:6px; font-size:13px; }
.qj-section-heading > button { flex:none; }
.qj-sharing > .qj-section-heading > button { background:#eff4f8; border-color:#b6cbd9; color:#244d66; min-height:48px; }
.qj-sharing > .qj-section-heading > button:hover { background:#dfebf3; border-color:#6e94ad; }
.qj-invite-count { background:#e7b23d; color:#17313a; border-radius:50%; min-width:23px; height:23px; display:inline-flex; align-items:center; justify-content:center; }
.qj-sharing-body { margin-top:20px; }
.qj-share-status { min-height:30px; padding:12px 0; font-size:14px; color:var(--qj-green); }
.qj-share-status.is-error { color:#a5262b; }
.qj-connections > article { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--qj-line); }
.qj-connections article > div:first-child { display:grid; gap:5px; }
.qj-connections article span { font-size:13px; color:#52666c; }
.qj-connections article > div:last-child { display:flex; gap:7px; flex-wrap:wrap; }
.qj-comparison { margin-top:24px; }
.qj-comparison-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:20px 0; }
.qj-comparison-grid article { min-width:0; }
.qj-comparison-grid article > strong { font-size:27px; display:block; margin:10px 0; }
.qj-comparison-grid small { font-size:13px; font-weight:400; }
.qj-comparison-grid .qj-miniature { grid-template-columns:1fr; gap:0; }
.qj-comparison-grid .qj-miniature b { height:100%; }
.qj-comparison-grid article > span { display:block; margin-top:8px; }
.qj-child-selector { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.qj-child-selector button { min-height:44px; border:1px solid #b7cac7; border-radius:6px; padding:9px 14px; font:inherit; background:white; color:#193c40; cursor:pointer; max-width:100%; overflow-wrap:anywhere; }
.qj-child-selector button[aria-pressed=true] { color:white; background:#17684e; border-color:#17684e; }
.qj-load-error { padding:20px; }
.qj-student-picker { border-top:1px solid var(--qj-line); margin-top:24px; padding-top:20px; }
.qj-student-picker > label { margin:14px 0; max-width:440px; }
.qj-student-list { max-height:340px; overflow:auto; overscroll-behavior:contain; }
.qj-student-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--qj-line); }
.qj-student-row > strong { min-width:0; overflow-wrap:anywhere; font-size:14px; }
.qj-student-row > span { color:#52666c; font-size:13px; text-align:end; }
.qj-student-row > button { background:#17684e; color:white; border-color:#17684e; flex:none; }
.qj-student-picker > p { margin-top:12px; font-size:12px; }
.qj-request-notice { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 20px; background:#f7eac6; color:#16333d; border-bottom:1px solid #d4bb70; }
.qj-request-notice[hidden] { display:none; }
.qj-request-notice button { background:#16333d; color:white; border:0; padding:10px 14px; min-height:44px; border-radius:5px; font:inherit; cursor:pointer; }
.qj-announcement { box-sizing:border-box; width:calc(100% - 32px); max-width:430px; max-height:calc(100dvh - 32px); padding:32px 24px 24px; border:1px solid #c9dad2; border-radius:8px; background:white; color:#16333d; margin:auto; overflow:auto; text-align:start; font-family:inherit; }
.qj-announcement::backdrop { background:rgba(12,30,35,.55); }
.qj-announcement > img { display:block; margin-bottom:22px; object-fit:contain; }
.qj-announcement h2 { font-size:27px; line-height:1.3; margin:6px 0 12px; letter-spacing:0; }
.qj-announcement p { font-size:16px; line-height:1.6; margin:0; color:#50686c; }
.qj-announcement button { font:inherit; min-height:44px; cursor:pointer; border-radius:5px; }
.qj-announcement svg { width:20px; height:20px; flex:none; }
.qj-announcement-close { position:absolute; inset-inline-end:12px; top:12px; width:44px; display:grid; place-items:center; background:white; color:#16333d; border:1px solid #c9dad2; }
.qj-announcement-open { display:flex; justify-content:center; align-items:center; gap:10px; width:100%; margin-top:24px; padding:12px 16px; color:white; background:#17684e; border:1px solid #17684e; }
.qj-announcement button:focus-visible { outline:3px solid #af741c; outline-offset:3px; }
.qj-announcement[dir="rtl"] { font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif; }
.qj-announcement[dir="rtl"] .qj-announcement-open svg { transform:scaleX(-1); }
.quran-journey[dir="rtl"] { font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif; }
.quran-journey[dir="rtl"] .qj-score-main > strong { line-height:1.5; }


@media(max-width:600px) {
  .quran-journey { padding:20px 4px; margin:20px 0; }
  .quran-journey h3 { font-size:28px; }
  .qj-journey-score { gap:16px; padding:24px 0 20px; }
  .qj-score-main { gap:7px; }
  .qj-score-main > strong { font-size:48px; }
  .qj-score-main > span { font-size:15px; }
  .qj-next-goal { gap:9px; max-width:50%; }
  .qj-goal-emblem { width:36px; height:36px; box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #e9dcb4; }
  .qj-goal-emblem > svg { width:17px; height:17px; }
  .qj-next-goal strong { font-size:17px; }
  .qj-goal-label { font-size:11px; }
  .qj-next-goal small { font-size:12px; }
  .qj-adventure { margin-inline:-4px; padding:12px 8px; }
  .qj-world-toolbar > button { padding:8px; font-size:13px; }
  .qj-world-toolbar > div { gap:0; }
  .qj-tower,.qj-tower-foot { width:100px; }
  .qj-surah-label strong { font-size:13px; }
  .qj-surah-label small { font-size:10px; margin-bottom:4px; }
  .qj-map-caption { font-size:13px; }
  .qj-legend { gap:8px 10px; }
  .qj-section-heading,.qj-connections > article { flex-wrap:wrap; }
  .qj-comparison-grid { gap:12px; }
  .qj-comparison-grid .qj-miniature { grid-template-columns:1fr; }
  .qj-comparison-grid .qj-miniature b { height:100%; }
  .qj-page-detail { flex-wrap:wrap; }
}
@media(max-width:360px) {
  .qj-goal-emblem { display:none; }
  .qj-next-goal { max-width:46%; }
}
@media(prefers-reduced-motion:reduce) { .quran-journey button,.qj-progress-track > span,.qj-page-stratum::before { transition:none; } }