@font-face{font-family:NotoArabic;src:url('assets/fonts/noto-sans-arabic.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Amiri;src:url('assets/fonts/amiri.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--forest:#173f3b;--forest-deep:#102d2a;--gold:#d4ad67;--paper:#f5eddb;--paper-light:#fffaf0;--ink:#203d35;--muted:#667267;--line:#d9ceb5;--body:NotoArabic,Arial,sans-serif;--display:Amiri,Georgia,serif;color-scheme:light}
*{box-sizing:border-box}html{background:var(--forest-deep);scroll-behavior:smooth}body{margin:0;font-family:var(--body);color:var(--ink);-webkit-tap-highlight-color:transparent}button,a{-webkit-touch-callout:none}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button{-webkit-appearance:none;appearance:none}button svg{pointer-events:none}button[hidden],[hidden]{display:none!important}h1,h2,h3,p{margin:0}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.icon{width:23px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}#app{min-height:100svh}.cover{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;background:#314d39;color:var(--paper-light);display:flex;flex-direction:column}.cover-art,.cover-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.cover-art{object-position:50% 45%;animation:cover-drift 32s ease-in-out infinite alternate}.cover-shade{z-index:-1;background:linear-gradient(180deg,rgba(10,39,33,.35),transparent 24%,rgba(10,36,31,.27) 39%,rgba(10,36,31,.94) 100%)}.cover-top{display:flex;align-items:center;justify-content:space-between;padding:22px max(24px,env(safe-area-inset-right));font-size:13px;letter-spacing:.025em}.reference-button{border:0;background:none;display:flex;gap:8px;align-items:center;color:inherit;min-height:44px;padding:7px 2px;font-size:12px;white-space:nowrap}.reference-button .icon{width:20px;height:20px}.cover-reference{color:#fff9e9}.cover-copy{margin-top:auto;padding:clamp(50px,13vh,150px) 30px max(42px,calc(env(safe-area-inset-bottom) + 25px));width:100%;max-width:720px}.eyebrow{font-size:11px;font-weight:650;letter-spacing:.02em;color:var(--gold)}.cover h1{font-family:var(--display);font-weight:400;line-height:1.36;font-size:clamp(49px,8vw,80px);margin:13px 0 8px;text-shadow:0 2px 20px rgba(4,28,20,.16)}.cover h1>span{display:block}.cover h1 small{font-size:.38em;white-space:nowrap;vertical-align:middle;margin-inline-start:5px}.cover-question{font-size:15px;line-height:1.95;font-weight:400;color:#f3ecd7;margin:10px 0 23px}.start-button,.primary-button{display:inline-flex;justify-content:center;align-items:center;gap:18px;min-height:54px;padding:9px 26px;border:1px solid var(--gold);border-radius:8px;background:var(--gold);color:var(--forest-deep);font-size:15px;font-weight:650;box-shadow:0 5px 20px rgba(2,23,19,.1)}.start-button:disabled{opacity:.6}.start-button{min-width:205px}.start-button .icon{width:22px}.cover-caption{font-size:10px;color:#d8ddc8;margin-top:20px;line-height:1.8}.load-message{font-size:12px;color:#fff9e9;max-width:320px;line-height:1.9;margin-top:8px}.cover-edge{position:absolute;bottom:0;inset-inline:0;height:4px;background:var(--gold)}
.reader{background:var(--paper);height:100svh;overflow:hidden;display:flex;flex-direction:column}.reader-header,.story-progress{flex-shrink:0}.scene-layout{display:flex;flex:1;min-height:0;flex-direction:column}.reader-header{height:62px;padding:0 25px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;background:var(--forest);color:var(--paper)}.reader-header .reference-button{justify-self:end}.story-wordmark{font-family:var(--display);font-size:27px;line-height:1.4;white-space:nowrap}.scene-count{display:flex;align-items:center;gap:8px;font-size:12px;color:#e9dec5;direction:rtl}.scene-count #scene-number{font-size:18px;color:#fff7e4}.count-divider{opacity:.5;font-size:12px}.story-progress{height:3px;background:#33584c;overflow:hidden}.story-progress>span{display:block;background:var(--gold);width:12.5%;height:100%;transition:width .5s ease}.scene-stage{height:45svh;min-height:0;max-height:560px;flex-shrink:0;position:relative;isolation:isolate;overflow:hidden;background:#294934}.art-frame{position:absolute;inset:0;margin:auto;overflow:hidden;transform:translateZ(0)}.scene-art{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.015);animation:scene-drift 26s ease-in-out infinite alternate}.scene-stage[data-image="birds"] .scene-art{object-position:50% 38%;animation-name:birds-drift}.scene-stage[data-image="passage"] .scene-art{object-position:60% 50%;animation-name:passage-drift}.scene-stage[data-image="warning"] .scene-art{object-position:50% 57%;animation-name:warning-drift}.scene-stage[data-image="light"] .scene-art{object-position:50% 42%}.scene-stage[data-image="canopy"] .scene-art{object-position:50% 35%;animation-name:birds-drift}.art-backdrop{position:absolute;inset:-30px;opacity:.38;filter:blur(18px);background-size:cover;background-position:center}.foreground-foliage{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;opacity:.45;pointer-events:none;animation:foliage-sway 18s ease-in-out infinite alternate;transform-origin:center 90%}.stage-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 78%,rgba(12,41,30,.54))}.stage-caption{position:absolute;bottom:17px;inset-inline:23px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fffaec;pointer-events:none;text-shadow:0 1px 5px #233b2a;font-size:11px}.stage-caption #stage-label{font-size:12px}.art-disclaimer{font-size:9px;opacity:.87}.art-error{position:absolute;top:45%;inset-inline:20px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:15px;font-size:13px;line-height:1.9;z-index:4}.reading-page{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;background:var(--paper);box-shadow:0 -5px 30px rgba(24,54,38,.08)}.page-content{padding:23px 25px 23px;max-width:800px;width:100%;margin:0 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;flex:1;scrollbar-width:thin;scrollbar-color:#b3baa5 transparent}.chapter-heading{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:10px;margin-bottom:9px}.chapter-mark{width:25px;height:1px;background:#96783e}.reading-page h2{font-family:var(--display);font-size:34px;font-weight:400;line-height:1.55;color:var(--forest);margin-bottom:8px;outline:none}.narrative{font-size:15px;line-height:2.05;letter-spacing:0}.narrative p{margin:0 0 11px;color:#47564a;transition:color .3s}.narrative p.active{color:#173f3b}.narrative p:last-child{margin-bottom:0}.audio-notice{font-size:11px;line-height:1.8;background:#e9e3d1;border-inline-start:2px solid #a28a55;padding:8px 11px;margin-top:15px}.story-controls{position:relative;width:100%;flex-shrink:0;box-shadow:0 -7px 18px rgba(245,237,219,.88);z-index:3;padding:0 18px max(13px,env(safe-area-inset-bottom));max-width:800px;margin:auto;background:var(--paper)}.audio-progress{height:1px;margin:4px 7px 12px;background:#d7cfbb;overflow:hidden}.audio-progress>span{height:100%;display:block;background:#6c9272;width:0}.control-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:9px}.audio-buttons{display:flex;align-items:center;gap:3px;direction:rtl}.icon-button,.play-button{border:0;display:grid;place-items:center;min-width:44px;min-height:44px;color:var(--forest);background:transparent;border-radius:50%;padding:10px}.icon-button:hover{background:rgba(23,63,59,.06)}.play-button{background:var(--forest);color:#fbf1d9;min-width:48px;min-height:48px}.play-button:hover{background:var(--forest-deep)}.nav-button{display:flex;align-items:center;gap:5px;min-height:48px;padding:6px 2px;background:none;border:0;color:var(--forest);font-size:12px;font-weight:650;white-space:nowrap}.nav-button:disabled{opacity:.3}.nav-button .icon{width:19px;height:19px}.previous-button{justify-self:start}.next-button{justify-self:end}.playback-state{text-align:center;font-size:9px;line-height:1.7;color:#6b776c;padding-top:10px;min-height:25px}.interaction{margin-top:20px}.interaction:empty{display:none}.interaction-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}.interaction-header .interaction-line{height:1px;flex:1;background:var(--line)}.interaction-label{font-size:10px;color:#786a4c}.interaction h3{font-family:var(--display);font-size:26px;line-height:1.6;font-weight:400;color:var(--forest);margin-bottom:13px}.interaction-wait{border-top:1px solid var(--line);padding-top:15px;display:flex;flex-wrap:wrap;align-items:center;gap:7px 14px;justify-content:space-between}.interaction-wait p{font-size:11px;color:var(--muted);line-height:1.8}.text-button{border:0;background:none;text-decoration:underline;text-underline-offset:5px;color:var(--forest);font-size:11px;padding:7px 2px;min-height:44px;text-align:start}.answers{display:grid;gap:9px}.answer-button{background:rgba(255,250,240,.7);border:1px solid #cdc5ad;min-height:58px;padding:11px 13px;border-radius:9px;color:var(--ink);display:flex;align-items:center;gap:11px;text-align:right;font-size:13px;line-height:1.9;width:100%}.answer-dot{width:18px;height:18px;flex:none;border:1px solid #9caa94;border-radius:50%;position:relative}.answer-button.correct{border-color:#6b9478;background:#e3ecdd}.answer-button.correct .answer-dot{background:var(--forest);border-color:var(--forest)}.answer-button.correct .answer-dot:after{content:'✓';color:white;position:absolute;font-size:12px;inset:0;display:grid;place-items:center}.answer-button.retry{border-color:#bba16b;background:#f0e5cd}.answer-button:disabled{opacity:1;cursor:default}.feedback{font-size:12px;line-height:1.95;margin-top:12px;color:var(--forest)}.feedback:empty{display:none}.interaction-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}.interaction-actions .text-button{font-size:11px;color:#62725f}.order-cards{display:grid;gap:10px}.order-card{display:grid;grid-template-columns:65px 1fr 29px;align-items:center;gap:12px;width:100%;min-height:80px;padding:7px;background:#fff9ec;border:1px solid #cdc5ad;border-radius:10px;color:var(--ink);text-align:right;font-size:12px;line-height:1.9;overflow:hidden}.order-card img{width:65px;height:65px;object-fit:cover;border-radius:6px}.order-card .order-number{width:27px;height:27px;border:1px solid #b7bfa9;border-radius:50%;display:grid;place-items:center;font-size:14px;color:#61705d}.order-card.selected{background:#e8ecdc;border-color:#7c9c77}.order-card.selected .order-number{color:#fff9e9;background:var(--forest);border-color:var(--forest)}.order-card.correct{background:#e0ecdb;border-color:#71986f}.order-card:disabled{opacity:1;cursor:default}.closing{border-top:1px solid var(--line);padding-top:24px;margin-top:24px}.closing .eyebrow{color:#947332}.closing h3{font-family:var(--display);font-size:29px;font-weight:400;line-height:1.6;margin:9px 0}.closing>p:not(.eyebrow){font-size:13px;line-height:2;color:#47564a}.closing .primary-button{margin-top:20px;min-height:49px;font-size:13px;box-shadow:none}.closing .icon{width:21px}.references-dialog{border:0;padding:0;color:var(--ink);background:var(--paper-light);border-radius:16px;width:min(650px,calc(100% - 24px));max-height:87svh;box-shadow:0 20px 100px rgba(0,0,0,.35)}.references-dialog::backdrop{background:rgba(6,26,22,.7);backdrop-filter:blur(5px)}.references-header{position:sticky;top:0;background:var(--paper-light);z-index:1;display:flex;align-items:center;justify-content:space-between;padding:17px 21px 13px;border-bottom:1px solid var(--line)}.references-header h2{font-family:var(--display);font-size:28px;font-weight:400;line-height:1.5}.references-body{padding:21px;font-size:13px;line-height:2}.references-body>p{margin-bottom:18px}.reference-note{background:#e9eddf;padding:13px;border-radius:8px;font-size:12px;line-height:1.95}.reference-source{padding:15px 0;border-bottom:1px solid var(--line)}.reference-source a{color:var(--forest);font-weight:650;text-underline-offset:5px}.reference-source p{font-size:12px;line-height:1.9;margin-top:6px;color:#57664f}.references-body h3{font-family:var(--display);font-weight:400;font-size:26px;margin-top:27px}.quran-verse{padding:18px 0;border-bottom:1px solid var(--line)}.quran-label{font-size:10px;color:#726849;margin-bottom:9px}.quran-text{font-family:var(--display);font-size:26px;line-height:2.05;color:#234d38}.noscript{position:fixed;inset:auto 12px 12px;padding:20px;z-index:20;background:var(--paper);color:var(--forest);border-radius:10px;line-height:1.9}.noscript a{color:inherit}body[data-playing="false"] .reader *,body[data-playing="false"] .reader *::before,body[data-playing="false"] .reader *::after{animation-play-state:paused!important}body.modal-open{overflow:hidden}
@keyframes foliage-sway{from{transform:translate(0,0) rotate(-.2deg)}to{transform:translate(-.7%,.7%) rotate(.35deg)}}@keyframes scene-drift{from{transform:scale(1.015) translateY(0)}to{transform:scale(1.065) translateY(-.8%)}}@keyframes birds-drift{from{transform:scale(1.02) translateY(.8%)}to{transform:scale(1.06) translateY(-.8%)}}@keyframes passage-drift{from{transform:scale(1.02) translateX(-.6%)}to{transform:scale(1.07) translateX(.6%)}}@keyframes warning-drift{from{transform:scale(1.025) translateX(.6%)}to{transform:scale(1.075) translateX(-.6%)}}@keyframes cover-drift{from{transform:scale(1.015)}to{transform:scale(1.075)}}
@media(min-width:700px){.cover-top{padding:26px 45px}.cover-copy{padding-inline:55px;padding-bottom:60px}.cover h1{font-size:76px}.cover-question{font-size:18px}.cover-caption{font-size:12px}.cover-art{object-position:center 45%}.reader-header{height:72px;padding-inline:38px}.scene-stage{height:47svh;max-height:570px}.page-content{padding:35px 42px 25px}.reading-page h2{font-size:41px}.narrative{font-size:17px;line-height:2.1}.story-controls{padding-inline:35px;padding-bottom:21px}.control-row{gap:24px}.audio-buttons{gap:10px}.nav-button{font-size:14px;gap:10px}.interaction h3{font-size:29px}.answer-button{font-size:14px}.order-card{font-size:14px;grid-template-columns:76px 1fr 32px}.order-card img{width:76px;height:67px}.stage-caption{inset-inline:36px;bottom:23px}.cover-shade{background:linear-gradient(90deg,rgba(10,36,31,.05),rgba(10,36,31,.16) 35%,rgba(10,36,31,.6)),linear-gradient(180deg,rgba(10,39,33,.35),transparent 25%,rgba(10,36,31,.83) 100%)}}
@media(min-width:1000px) and (min-aspect-ratio:6/5){.cover-copy{padding:80px 6vw 70px;max-width:800px}.cover h1{font-size:88px}.cover-art{object-position:center 54%}.cover-shade{background:linear-gradient(90deg,transparent 12%,rgba(10,36,31,.24) 48%,rgba(10,36,31,.79) 100%),linear-gradient(180deg,rgba(10,39,33,.2),transparent 30%,rgba(10,36,31,.5) 100%)}.cover-question{margin-top:17px;margin-bottom:26px}.reader-header{height:70px;padding-inline:34px}.scene-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(385px,.9fr);min-height:0;direction:ltr}.scene-stage{height:100%;min-height:0;max-height:none;position:sticky;top:0;direction:rtl}.scene-art{object-position:center}.reading-page{direction:rtl;display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(11,38,22,.1);min-height:0}.page-content{width:100%;max-width:620px;padding:clamp(30px,6vh,70px) clamp(30px,4vw,68px) 28px;margin:0 auto}.reading-page h2{font-size:clamp(34px,3vw,45px);margin-bottom:15px;line-height:1.55}.narrative{font-size:16px;line-height:2.15}.narrative p{margin-bottom:16px}.story-controls{width:100%;max-width:620px;margin:0 auto;padding:0 clamp(24px,3vw,49px) 24px}.interaction{margin-top:24px}.interaction h3{font-size:27px}.order-card{grid-template-columns:62px 1fr 28px;font-size:12px}.order-card img{width:62px;height:58px}.answer-button{font-size:13px}.chapter-heading{margin-bottom:12px}.stage-caption{bottom:28px}.reader-header .reference-button{font-size:12px}.art-backdrop{opacity:.7}.closing{margin-top:18px;padding-top:20px}.closing h3{font-size:27px}}
@media(max-width:389px){.cover-copy{padding-inline:25px;padding-bottom:34px}.cover-top{padding-inline:22px}.cover h1{font-size:48px}.cover-question{font-size:14px}.reader-header{padding-inline:18px;height:58px}.scene-stage{min-height:0;height:44svh}.page-content{padding:21px 21px 16px}.reading-page h2{font-size:31px}.narrative{font-size:14px;line-height:2}.story-controls{padding-inline:12px}.audio-buttons{gap:0}.icon-button{min-width:42px}.nav-button{font-size:11px;gap:3px}.control-row{gap:5px}.order-card{grid-template-columns:57px 1fr 25px;gap:9px;font-size:11px}.order-card img{width:57px;height:61px}.references-header{padding-inline:15px}.references-header h2{font-size:25px}.references-body{padding:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.scene-art,.cover-art{transform:none}}

/* One readable Arabic paragraph accompanies both spoken language segments.
   The page grows naturally for activities and enlarged text; no inner reading scroller. */
.reader{height:auto;min-height:100svh;overflow:visible}
.scene-layout{flex:1 0 auto;min-height:0}
.scene-stage{height:var(--story-art-height,45svh);max-height:none}
.reading-page{flex:1 0 auto;overflow:visible;min-height:0}
.page-content{flex:none;overflow:visible;overscroll-behavior:auto;padding:20px 25px 21px}
.story-controls{position:sticky;bottom:0;margin: auto auto 0;flex:none}
.chapter-heading{font-size:.625rem;line-height:1.8;margin-bottom:7px}
.paragraph-indicator{margin-inline-start:auto;color:#65745e;white-space:nowrap;font-size:.625rem}
.reading-page h2{font-size:2rem;line-height:1.4;margin-bottom:9px}
.narrative{font-size:1rem;line-height:1.95}
.narrative p{margin:0;color:var(--forest)}
.reader[data-mode="interaction"] .narrative,
.reader[data-mode="interaction"] #scene-title,
.reader[data-mode="interaction"] .chapter-heading,
.reader[data-mode="closing"] .narrative,
.reader[data-mode="closing"] #scene-title,
.reader[data-mode="closing"] .chapter-heading{display:none}
.reader[data-mode="interaction"] .page-content{padding-top:18px}
.reader[data-mode="interaction"] .interaction{margin-top:0}
.reader[data-mode="closing"] .closing{margin:0;padding-top:0;border:0}
.interaction h3{font-size:1.625rem}
.answer-button{font-size:.8125rem}
.order-card{font-size:.8125rem}
.feedback,
.closing>p:not(.eyebrow){font-size:.875rem}
.closing h3{font-size:1.8125rem}
@media(max-width:389px){
  .page-content{padding:16px 21px 18px}
  .reading-page h2{font-size:1.75rem;line-height:1.4;margin-bottom:8px}
  .narrative{font-size:.96875rem;line-height:1.88}
  .chapter-heading{margin-bottom:6px}
  .playback-state{padding-top:7px;min-height:22px}
  .story-controls{padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .audio-progress{margin-bottom:9px}
  .order-card{font-size:.75rem}
}
@media(min-width:700px){
  .page-content{padding:28px 42px}
  .reading-page h2{font-size:2.5625rem}
  .narrative{font-size:1.125rem;line-height:2.05}
  .reader[data-mode="interaction"] .page-content{padding-top:25px}
}
@media(min-width:1000px) and (min-aspect-ratio:6/5){
  .scene-layout{min-height:calc(100svh - 73px);align-items:stretch}
  .scene-stage{height:calc(100svh - 73px);position:sticky;top:0}
  .reading-page{min-height:calc(100svh - 73px)}
  .page-content{margin: auto;max-width:660px;padding:40px clamp(30px,4vw,68px)}
  .story-controls{margin:0 auto;position:sticky;bottom:0}
  .reading-page h2{font-size:2.75rem}
  .narrative{font-size:1.1875rem;line-height:2.1}
  .reader[data-mode="interaction"] .page-content{padding-top:34px}
}

/* Story identity and numerals stay consistent across the collection. */
.scene-count{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.scene-count bdi,.paragraph-indicator bdi,.order-number{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.hub-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:inherit;text-decoration:none;font-size:12px}
.hub-link .icon{width:17px;height:17px}
.story-brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;min-height:44px;color:inherit;text-decoration:none;padding:2px 0}
.story-brand .story-wordmark{font-size:24px;line-height:1.2;max-width:100%;white-space:nowrap}
.hub-return{font-size:8px;line-height:1.7;color:#d9e0cf}
.cover-question{white-space:pre-line}
@media(max-width:389px){.story-brand .story-wordmark{font-size:22px}.hub-return{font-size:8px}}
@media(min-width:700px){.story-brand .story-wordmark{font-size:27px}.hub-return{font-size:9px}}

/* Keep every counted object in Yusuf's dream visible at every aspect ratio.
   A plain night background avoids duplicating the lights in a blurred backdrop. */
.scene-stage[data-image="yusuf-stars"],body[data-story="yusuf"] .cover{background:#0b284a}
.scene-stage[data-image="yusuf-stars"] .scene-art,
body[data-story="yusuf"] .cover-art{object-fit:contain;transform:none;animation:none}
.scene-stage[data-image="yusuf-stars"] .art-backdrop{display:none}
body[data-story="yusuf"] .cover-art{object-position:center 15%}
/* The camel is the focal point near the right edge of these two paintings. */
.scene-stage[data-image="salih-valley"] .scene-art,
.scene-stage[data-image="salih-sign"] .scene-art,
body[data-story="salih"] .cover-art{object-position:right center;transform:none;animation:none}