@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Noto+Sans+Arabic:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --forest: #123b33;
  --forest-2: #1f5146;
  --forest-3: #32705f;
  --gold: #d9b66e;
  --gold-dark: #a47d3a;
  --paper: #f8f6f0;
  --cream: #eeeadf;
  --white: #fffefa;
  --ink: #1a2925;
  --muted: #73807a;
  --line: #e5e2d9;
  --success: #2f7453;
  --danger: #a4493f;
  --shadow: 0 18px 50px rgba(23, 46, 39, .08);
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #b08b49; outline-offset: 3px; }
::selection { background: #d9b66e66; color: var(--forest); }
.skip-link { position: fixed; top: 8px; right: 8px; z-index: 100; padding: 10px 16px; background: var(--white); color: var(--forest); border-radius: 10px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 258px minmax(0, 1fr); direction: rtl; }
.sidebar { grid-column: 1; grid-row: 1; min-height: 100vh; padding: 30px 20px 22px; background: var(--forest); color: #f7f4e9; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; padding: 3px 5px 25px; border-bottom: 1px solid rgba(255,255,255,.14); }
.brand-mark { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px #0a251f66; }
.brand-mark img { display: block; width: 100%; height: 100%; }
.brand-copy { display: flex; flex-direction: column; gap: 1px; }
.brand-copy strong { font-family: Amiri, Georgia, serif; font-size: 25px; font-weight: 700; line-height: 1.1; letter-spacing: .02em; }
.brand-copy small { color: #d4d9ce; font-size: 10px; }
.term-chip { display: flex; align-items: center; gap: 7px; margin: 20px 4px 27px; padding: 10px 11px; color: #ecede4; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.09); border-radius: 11px; font-size: 10px; white-space: nowrap; }
.term-dot, .local-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px #d9b66e22; flex: 0 0 auto; }
.term-divider { color: #94a89b; }
.nav-label { margin: 0 10px 11px; color: #a8b9ad; font-size: 10px; }
.side-nav { display: grid; gap: 5px; }
.nav-item { width: 100%; border: 0; padding: 12px 12px; display: flex; align-items: center; gap: 10px; text-align: right; color: #e2e8df; background: transparent; border-radius: 10px; cursor: pointer; transition: background .2s, color .2s, transform .2s; font-size: 12px; }
.nav-item:hover { background: rgba(255,255,255,.08); transform: translateX(-2px); }
.nav-item.active { color: var(--forest); background: #f3efe3; font-weight: 700; box-shadow: 0 4px 14px rgba(6,34,26,.13); }
.nav-icon { width: 23px; height: 23px; display: grid; place-items: center; font-size: 16px; color: #ddc37f; }
.nav-item.active .nav-icon { color: var(--forest); }
.nav-arrow { margin-right: auto; font-size: 18px; opacity: .55; }
.sidebar-progress { margin: 30px 7px 0; padding: 15px 13px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; }
.progress-heading, .progress-copy { display: flex; justify-content: space-between; align-items: center; }
.progress-heading { font-size: 11px; color: #edf1e9; }
.progress-heading span:last-child { color: var(--gold); font-weight: 700; }
.progress-track { height: 5px; overflow: hidden; margin: 11px 0 8px; background: rgba(255,255,255,.18); border-radius: 10px; }
.progress-track span { display: block; height: 100%; width: 0; background: var(--gold); border-radius: inherit; transition: width .5s ease; }
.sidebar-progress small { color: #b9c8bd; font-size: 9px; }
.sidebar-note { margin: auto 7px 19px; padding: 18px 9px 14px; border-bottom: 1px solid rgba(255,255,255,.15); text-align: center; }
.note-star { color: var(--gold); font-size: 16px; }
.sidebar-note p { margin: 8px 0 1px; font-family: Amiri, Georgia, serif; font-size: 18px; color: #f3f0e5; }
.sidebar-note small { color: #b7c7bd; font-size: 10px; }
.sidebar-source { display: flex; justify-content: space-between; color: #c5d0c5; padding: 3px 8px 0; font-size: 10px; }
.sidebar-source span { color: var(--gold); }

.main-area { grid-column: 2; grid-row: 1; min-width: 0; padding: 0 clamp(24px, 5vw, 72px); display: flex; flex-direction: column; }
.topbar { min-height: 76px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: #858d85; font-size: 11px; }
.breadcrumb strong { color: var(--ink); font-weight: 600; }
.crumb-divider { color: #c4c6bc; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.local-badge { display: flex; align-items: center; gap: 8px; color: #738078; font-size: 10px; }
.local-badge span { background: #6e9a73; box-shadow: 0 0 0 4px #6e9a7320; }
.share-button { border: 1px solid #d8d7ce; border-radius: 9px; padding: 8px 12px; background: transparent; cursor: pointer; font-size: 10px; color: var(--forest); transition: .2s; }
.share-button span { margin-left: 5px; color: var(--gold-dark); }
.share-button:hover { background: var(--white); border-color: var(--gold); }
.menu-toggle { display: none; border: 1px solid var(--line); background: var(--white); color: var(--forest); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; }
.view-root { flex: 1; outline: none; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); margin-top: 46px; padding: 18px 0 22px; color: #858d84; font-size: 9px; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--forest-2); white-space: nowrap; }
.site-footer a span { color: var(--gold-dark); }

.hero { position: relative; min-height: 365px; overflow: hidden; margin: 34px 0 40px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); background: var(--forest); color: #f9f6ed; border-radius: 19px; box-shadow: var(--shadow); }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 10%, rgba(221,190,119,.12), transparent 42%), linear-gradient(112deg, transparent 53%, rgba(255,255,255,.025) 53.2%, transparent 53.6%); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; padding: 47px 48px 38px 24px; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 9px; color: var(--gold-dark); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.hero .eyebrow { color: #e4cc91; }
.eyebrow-line { display: inline-block; width: 24px; height: 1px; background: var(--gold); }
h1, h2, p { overflow-wrap: anywhere; }
.hero h1, .page-intro h1, .lesson-hero h1, .activity-header h1, .result-screen h1 { margin: 18px 0 12px; font-family: Amiri, Georgia, serif; font-weight: 700; line-height: 1.35; }
.hero h1 { font-size: clamp(36px, 4.2vw, 53px); letter-spacing: -.01em; }
.hero h1 em, .page-intro h1 em, .activity-header h1 em, .result-screen h1 em { color: var(--gold); font-style: normal; }
.hero-intro { max-width: 460px; margin: 0; color: #d1ded4; font-size: 12px; line-height: 2.05; }
.hero-actions { display: flex; align-items: center; gap: 21px; margin-top: 25px; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 10px 17px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; font-size: 11px; font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,43,35,.13); }
.button span { font-size: 16px; font-weight: 400; }
.button-light { background: #f2eddf; color: var(--forest); }
.button-dark { background: var(--forest); color: var(--white); }
.button-outline { background: transparent; color: var(--forest); border-color: #c7cbc2; }
.button-gold { background: var(--gold); color: #26372e; }
.button-complete { background: #e0eee4; color: #306449; border-color: #bfd6c4; }
.text-button, .text-link { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.hero-secondary { color: #e9eadd; font-size: 10px; }
.hero-secondary span { color: var(--gold); margin-right: 5px; }
.hero-meta { display: flex; align-items: center; gap: 9px; margin-top: 25px; color: #b5c6b9; font-size: 9px; }
.hero-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }
.meta-spark { color: var(--gold); }
.hero-art { position: relative; min-height: 300px; display: grid; place-items: center; overflow: hidden; }
.arch-ornament { position: absolute; width: 260px; height: 335px; right: 14%; bottom: -94px; border: 1px solid rgba(221,190,119,.32); border-radius: 145px 145px 0 0; transform: rotate(8deg); }
.arch-ornament::before, .arch-ornament::after { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(221,190,119,.16); border-radius: inherit; }
.arch-ornament::after { inset: 25px; }
.verse-mark { position: absolute; top: 50px; right: 52%; color: var(--gold); font-size: 17px; opacity: .8; }
.learning-steps { position: relative; z-index: 1; width: 200px; margin-top: 20px; margin-right: -7px; }
.learning-step { display: flex; align-items: center; gap: 10px; width: 180px; min-height: 57px; margin: 0 0 11px auto; padding: 8px 10px; background: #f3efe4; border-radius: 11px; color: var(--forest); box-shadow: 0 8px 25px rgba(0,0,0,.14); }
.learning-step.step-mid { margin-right: 22px; background: #e6d6ae; }
.step-index { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #e4e8db; color: var(--forest-2); font-family: Amiri, Georgia, serif; font-size: 16px; }
.learning-step small, .learning-step strong { display: block; }
.learning-step small { color: #778177; font-size: 8px; }
.learning-step strong { font-family: Amiri, Georgia, serif; font-size: 16px; }
.learning-step b { margin-right: auto; color: #88988b; font-weight: 400; }
.step-finish { margin-right: auto; color: var(--gold-dark); font-size: 17px; }
.art-caption { position: absolute; bottom: 20px; right: 52%; color: #c1d0c3; font-size: 9px; letter-spacing: .12em; white-space: nowrap; }
.hero-stamp { position: absolute; z-index: 3; bottom: 20px; left: 22px; display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: #f5f0e5; color: var(--forest); border-radius: 11px; box-shadow: 0 6px 20px #071f1966; }
.hero-stamp span { font-family: Amiri, Georgia, serif; font-size: 25px; line-height: 1; }
.hero-stamp small { font-size: 8px; line-height: 1.5; color: #617067; }

.welcome-row, .path-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.welcome-row { margin: 0 3px 31px; }
.section-kicker { font-size: 9px; }
.welcome-row h2, .path-heading h2, .practice-band h2, .final-cta h2 { margin: 6px 0 0; font-family: Amiri, Georgia, serif; color: var(--ink); font-size: 23px; line-height: 1.5; }
.welcome-progress { width: min(270px, 35%); }
.progress-copy { margin-bottom: 5px; color: #777f77; font-size: 9px; }
.progress-copy strong { color: var(--forest); font-size: 12px; }
.progress-copy small { color: #9ba198; font-size: 9px; font-weight: 400; }
.progress-track.wide { margin: 0; height: 6px; background: #e6e4da; }
.progress-track.wide span { background: var(--forest-3); }
.path-section { margin-bottom: 44px; }
.path-heading { margin: 0 3px 19px; }
.text-link { font-size: 10px; font-weight: 700; color: var(--forest-2); white-space: nowrap; }
.text-link span { display: inline-block; color: var(--gold-dark); transition: transform .2s; }
.text-link:hover span { transform: translateX(-4px); }
.skill-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 11px; }
.path-card { position: relative; min-height: 176px; padding: 17px 15px 13px; text-align: right; display: flex; flex-direction: column; align-items: flex-start; background: var(--white); border: 1px solid #ebe8dd; border-radius: 13px; cursor: pointer; transition: transform .2s, box-shadow .2s, border .2s; }
.path-card:hover { transform: translateY(-4px); border-color: #d0b878; box-shadow: var(--shadow); }
.path-card.is-complete { border-color: #b6d2bd; background: #fbfdf9; }
.path-number { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: #edf0e8; color: var(--forest); font-family: Amiri, Georgia, serif; font-size: 14px; }
.is-complete .path-number { background: #dcece0; color: #36704e; }
.path-tag { margin-top: 12px; color: var(--gold-dark); font-size: 8px; }
.path-card strong { margin-top: 3px; font-family: Amiri, Georgia, serif; font-size: 16px; color: var(--ink); }
.path-card small { margin-top: 4px; color: var(--muted); line-height: 1.7; font-size: 9px; }
.path-foot { margin-top: auto; width: 100%; padding-top: 9px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #eeece4; color: #899087; font-size: 8px; }
.path-foot span { color: var(--forest); font-size: 13px; }
.path-connector { display: none; }

.practice-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 50px; padding: 21px 24px; background: #eeece1; border-radius: 14px; }
.practice-copy { display: flex; align-items: center; gap: 15px; }
.practice-symbol { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #d5c18c; border-radius: 50%; color: var(--gold-dark); font-size: 17px; }
.practice-band h2 { font-size: 19px; }
.practice-band p { max-width: 460px; margin: 4px 0 0; color: #778078; font-size: 9px; line-height: 1.9; }
.button-dark { background: var(--forest); }
.practice-band .button-dark { white-space: nowrap; }
.curriculum-section { margin-bottom: 48px; }
.curriculum-section .path-heading { align-items: start; }
.section-description { max-width: 580px; margin: 5px 0 0; color: #777f78; font-size: 10px; line-height: 1.9; }
.source-link { padding-top: 14px; }
.unit-list { border-top: 1px solid var(--line); }
.unit-row { border-bottom: 1px solid var(--line); }
.unit-row summary { display: flex; align-items: center; gap: 13px; padding: 11px 4px; list-style: none; cursor: pointer; }
.unit-row summary::-webkit-details-marker { display: none; }
.unit-num { width: 30px; height: 30px; display: grid; place-items: center; color: var(--forest); background: #eceee6; border-radius: 9px; font-family: Amiri, Georgia, serif; }
.unit-name { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 12px; }
.unit-name strong { font-family: Amiri, Georgia, serif; font-size: 16px; font-weight: 700; }
.unit-name small { color: #8c948b; font-size: 9px; }
.unit-chevron { color: var(--gold-dark); transition: transform .2s; }
.unit-row[open] .unit-chevron { transform: rotate(180deg); }
.unit-details { padding: 0 48px 14px 10px; }
.unit-details p { margin: 0 0 9px; color: #6d7b72; font-size: 10px; line-height: 1.8; }
.lesson-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lesson-chips span { padding: 5px 9px; background: #efeee7; border-radius: 6px; color: #56675d; font-size: 8px; }
.curriculum-note { margin: 11px 2px 0; color: #959b93; font-size: 8px; }
.final-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 12px; padding: 20px 22px; background: #e9e6da; border-radius: 13px; }
.final-cta > div:first-child > span { color: var(--gold-dark); font-size: 9px; font-weight: 700; }
.final-cta h2 { font-size: 20px; }
.cta-actions { display: flex; gap: 9px; }
.cta-actions .button { min-height: 38px; padding: 8px 13px; font-size: 9px; }

.page-intro { position: relative; padding: 57px 4px 33px; border-bottom: 1px solid var(--line); }
.page-intro h1 { margin: 11px 0 7px; font-size: clamp(38px, 5vw, 56px); color: var(--forest); }
.page-intro h1 em { color: var(--gold-dark); }
.page-intro > p { max-width: 555px; margin: 0; color: #707c73; font-size: 11px; line-height: 2; }
.tiny-diamond { color: var(--gold-dark); font-size: 10px; }
.page-intro-aside { position: absolute; left: 4px; bottom: 31px; display: flex; align-items: center; gap: 8px; color: var(--forest); }
.page-intro-aside span { font-family: Amiri, Georgia, serif; font-size: 38px; }
.page-intro-aside small { color: #7f8980; font-size: 9px; line-height: 1.45; }
.skills-list { padding: 15px 0 0; }
.skill-row { position: relative; min-height: 152px; display: grid; grid-template-columns: 54px minmax(0, 1fr) 90px; align-items: center; gap: 18px; padding: 17px 9px; border-bottom: 1px solid var(--line); }
.skill-row.row-offset { padding-right: 75px; }
.skill-row-number { width: 40px; height: 40px; display: grid; place-items: center; align-self: start; margin-top: 8px; border: 1px solid #d8d9cf; border-radius: 50%; color: var(--forest); font-family: Amiri, Georgia, serif; font-size: 15px; }
.skill-row-number.done { border-color: #b6d2bd; background: #e6f0e7; color: var(--success); }
.skill-row-body { padding: 2px 0; }
.skill-row-meta { display: flex; gap: 13px; color: var(--gold-dark); font-size: 8px; }
.skill-row-meta span + span { color: #858c82; }
.skill-row h2 { margin: 6px 0 1px; color: var(--forest); font-family: Amiri, Georgia, serif; font-size: 21px; }
.skill-row p { margin: 0 0 9px; color: #778078; font-size: 10px; }
.skill-row-glyph { justify-self: center; color: #d3bf8d; font-family: Amiri, Georgia, serif; font-size: 44px; opacity: .75; }
.info-callout { display: flex; align-items: center; gap: 13px; margin-top: 24px; padding: 16px; background: #eeece1; border-right: 3px solid var(--gold); border-radius: 8px; }
.callout-icon { color: var(--gold-dark); font-size: 16px; }
.info-callout p { margin: 0; color: #5c6c62; font-size: 10px; line-height: 1.8; }

.lesson-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 25px 0 3px; color: #838b82; font-size: 9px; }
.back-link { border: 0; background: none; padding: 0; color: var(--forest-2); font-size: 10px; cursor: pointer; }
.back-link span { margin-left: 6px; font-size: 15px; }
.lesson-count { color: #858c83; }
.lesson-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 27px 0 21px; border-bottom: 1px solid var(--line); }
.lesson-hero h1 { margin: 9px 0 2px; color: var(--forest); font-size: clamp(32px, 4vw, 46px); }
.lesson-hero p { margin: 0; color: #758077; font-size: 11px; }
.lesson-emblem { width: 72px; height: 72px; display: grid; place-items: center; flex: 0 0 auto; color: var(--gold-dark); background: #efecdf; border: 1px solid #e0dac8; border-radius: 50%; font-family: Amiri, Georgia, serif; font-size: 25px; }
.lesson-progress { display: flex; align-items: center; gap: 12px; margin: 15px 0 21px; }
.lesson-progress-line { width: min(270px, 55%); height: 4px; overflow: hidden; background: #e4e3d9; border-radius: 10px; }
.lesson-progress-line span { display: block; height: 100%; background: var(--forest-3); border-radius: inherit; }
.lesson-progress small { color: #8b938a; font-size: 8px; }
.lesson-content { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.content-block { min-height: 153px; padding: 19px; background: var(--white); border: 1px solid #e9e6dd; border-radius: 12px; }
.block-label { color: var(--gold-dark); font-size: 9px; font-weight: 700; }
.objective-block { background: #e8ece3; border-color: #dfe5d9; }
.objective-block h2 { margin: 15px 0 0; color: var(--forest); font-family: Amiri, Georgia, serif; font-size: 21px; line-height: 1.7; }
.concept-block p { margin: 14px 0 0; color: #53645a; font-size: 10px; line-height: 2.1; }
.steps-block { grid-column: 1; }
.steps-block ol { margin: 13px 0 0; padding-right: 17px; color: #53645a; font-size: 10px; line-height: 2; }
.steps-block li { padding-right: 3px; margin-bottom: 5px; }
.steps-block li::marker { color: var(--gold-dark); }
.example-block { min-height: 153px; padding: 19px; background: var(--forest); color: #edf1e8; border-radius: 12px; }
.example-label { color: #e2c987; font-size: 9px; font-weight: 700; }
.example-label span { margin-left: 6px; }
.example-block p { margin: 14px 0 0; color: #e4e9de; font-family: Amiri, Georgia, serif; font-size: 17px; line-height: 1.9; }
.lesson-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 17px; padding: 14px 16px; background: #eeece1; border-radius: 11px; }
.lesson-tip > span { color: var(--gold-dark); font-size: 8px; font-weight: 700; }
.lesson-tip p { max-width: 330px; margin: 3px 0 0; color: #748077; font-size: 9px; line-height: 1.7; }
.lesson-buttons { display: flex; gap: 8px; flex-shrink: 0; }
.lesson-buttons .button { min-height: 37px; padding: 8px 12px; font-size: 9px; }
.lesson-next { display: flex; justify-content: flex-start; margin-top: 14px; }
.next-skill { border: 0; background: none; color: var(--forest-2); font-size: 10px; cursor: pointer; }
.next-skill span { color: var(--gold-dark); margin-right: 8px; }

.activity-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 42px 2px 24px; }
.activity-header h1 { margin: 9px 0 5px; color: var(--forest); font-size: clamp(37px, 4vw, 48px); }
.activity-header h1 em { color: var(--gold-dark); }
.activity-header p { max-width: 560px; margin: 0; color: #748077; font-size: 10px; line-height: 1.9; }
.score-orb { width: 76px; height: 76px; display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 0 0 auto; background: var(--forest); color: #fff; border-radius: 50%; box-shadow: 0 0 0 7px #e9e6d9, 0 0 0 8px #d9d2c0; }
.score-orb span { color: var(--gold); font-family: Amiri, Georgia, serif; font-size: 25px; line-height: 1.1; }
.score-orb small { color: #d6e0d6; font-size: 7px; }
.quiz-orb { background: #eee9db; box-shadow: 0 0 0 7px #f8f6f0, 0 0 0 8px #d9d2c0; }
.quiz-orb span { color: var(--forest); }
.quiz-orb small { color: #68786d; }
.game-panel { max-width: 760px; margin: 11px auto 0; padding: 20px clamp(18px, 4vw, 38px) 31px; background: var(--white); border: 1px solid #e7e4da; border-radius: 16px; box-shadow: var(--shadow); }
.activity-meter { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; color: #828b81; font-size: 9px; }
.activity-meter span:nth-child(2) { color: var(--gold-dark); }
.activity-track { grid-column: 1 / -1; height: 4px; background: #e8e6dd; overflow: hidden; border-radius: 10px; }
.activity-track span { display: block; height: 100%; background: var(--forest-3); border-radius: inherit; transition: width .35s; }
.game-challenge { max-width: 570px; margin: 29px auto 0; }
.game-term { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.game-term small { color: #879087; font-size: 9px; }
.game-term strong { padding: 7px 15px; color: var(--forest); background: #edece1; border-radius: 8px; font-family: Amiri, Georgia, serif; font-size: 19px; }
.question-label { color: var(--gold-dark); font-size: 9px; font-weight: 700; }
.game-question h2, .quiz-question { margin: 8px 0 17px; color: var(--ink); font-family: Amiri, Georgia, serif; font-size: 24px; line-height: 1.65; }
.answer-list { display: grid; gap: 8px; }
.answer-option { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 49px; padding: 8px 11px; border: 1px solid #e4e4da; border-radius: 9px; background: #fff; text-align: right; cursor: pointer; font-size: 10px; transition: border .18s, background .18s, transform .18s; }
.answer-option:not(:disabled):hover { transform: translateX(-2px); border-color: #b7b78f; background: #faf9f3; }
.answer-option:disabled { cursor: default; }
.option-key { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; color: var(--forest); background: #edf0e8; border-radius: 7px; font-family: Amiri, Georgia, serif; font-size: 14px; }
.option-mark { margin-right: auto; font-size: 16px; font-weight: 700; }
.answer-option.is-correct { border-color: #78a988; background: #f0f7f1; color: #285b3c; }
.answer-option.is-correct .option-key { color: #fff; background: #49835a; }
.answer-option.is-wrong { border-color: #d4a29d; background: #fbf2f0; color: #85433e; }
.answer-option.is-wrong .option-key { color: #fff; background: #a85d53; }
.feedback { margin-top: 14px; padding: 13px 14px; border-radius: 9px; animation: appear .25s ease-out; }
.feedback-good { background: #edf5ee; border-right: 3px solid #65a074; }
.feedback-try { background: #f5f2e8; border-right: 3px solid var(--gold); }
.feedback > span { color: var(--forest); font-size: 10px; font-weight: 700; }
.feedback p { margin: 4px 0 12px; color: #6e7a70; font-size: 9px; line-height: 1.8; }
.feedback .button { min-height: 34px; padding: 7px 11px; font-size: 9px; }
.activity-footer { max-width: 760px; display: flex; justify-content: space-between; gap: 12px; margin: 13px auto 0; color: #939a90; font-size: 8px; }
.activity-footer button { color: #65756a; font-size: 9px; }
.result-screen { max-width: 680px; min-height: 440px; margin: 35px auto 0; padding: 35px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #eeece1; border-radius: 18px; }
.result-seal { width: 48px; height: 48px; display: grid; place-items: center; color: var(--gold-dark); border: 1px solid #d2c49f; border-radius: 50%; font-size: 18px; }
.result-screen .section-kicker { margin-top: 18px; }
.result-screen h1 { max-width: 470px; margin: 6px 0 8px; color: var(--forest); font-size: clamp(30px, 4vw, 42px); }
.result-screen h1 em { color: var(--gold-dark); }
.result-score { display: flex; align-items: baseline; gap: 9px; margin: 8px 0; color: var(--forest); }
.result-score strong { font-family: Amiri, Georgia, serif; font-size: 48px; line-height: 1.1; }
.result-score strong small { font-size: 21px; }
.result-score > span { color: #7e887d; font-size: 9px; }
.result-screen > p { max-width: 450px; margin: 6px 0 19px; color: #6b786e; font-size: 10px; line-height: 1.9; }
.result-meter { width: min(280px, 90%); height: 6px; margin: 5px 0 12px; background: #d8d8cc; border-radius: 10px; overflow: hidden; }
.result-meter span { display: block; height: 100%; background: var(--forest-3); border-radius: inherit; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.result-actions .button { min-height: 38px; font-size: 9px; }

.toast { position: fixed; right: 50%; bottom: 22px; z-index: 60; max-width: calc(100vw - 32px); padding: 11px 16px; color: #fff; background: #163e35; border: 1px solid #ffffff23; border-radius: 9px; box-shadow: 0 10px 35px #0d291f44; font-size: 10px; opacity: 0; transform: translate(50%, 12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translate(50%, 0); }
.mobile-backdrop { display: none; }
@keyframes appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1050px) {
  .main-area { padding: 0 30px; }
  .hero-copy { padding-right: 34px; }
  .skill-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path-card { min-height: 159px; }
  .practice-band { margin-bottom: 38px; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; top: 0; right: 0; width: min(290px, 84vw); height: 100dvh; min-height: 100dvh; transform: translateX(105%); transition: transform .25s ease; box-shadow: -15px 0 40px #0c241c2e; }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-note { margin-top: 40px; }
  .main-area { padding: 0 19px; }
  .topbar { min-height: 65px; gap: 10px; }
  .menu-toggle { display: grid; place-items: center; flex: 0 0 auto; }
  .breadcrumb { margin-left: auto; font-size: 9px; gap: 6px; }
  .topbar-actions { gap: 8px; }
  .local-badge { display: none; }
  .share-button { padding: 8px 9px; font-size: 9px; white-space: nowrap; }
  .mobile-backdrop:not([hidden]) { display: block; position: fixed; z-index: 15; inset: 0; background: #0b211a80; }
  .hero { grid-template-columns: 1fr; margin: 21px 0 31px; }
  .hero-copy { padding: 30px 24px 21px; }
  .hero h1 { font-size: 40px; }
  .hero-intro { max-width: 510px; font-size: 11px; }
  .hero-art { min-height: 205px; }
  .arch-ornament { width: 210px; height: 270px; right: 23%; bottom: -90px; }
  .learning-steps { margin: -3px 0 0 0; transform: scale(.82); }
  .verse-mark { top: 17px; right: 54%; }
  .art-caption { bottom: 13px; right: 51%; }
  .hero-stamp { bottom: 11px; left: 12px; }
  .hero-meta { margin-top: 18px; flex-wrap: wrap; }
  .welcome-row { align-items: start; flex-direction: column; gap: 12px; margin-bottom: 22px; }
  .welcome-row h2, .path-heading h2 { font-size: 21px; }
  .welcome-progress { width: 100%; }
  .path-heading { align-items: start; }
  .path-heading > .text-link { margin-top: 4px; }
  .skill-path { gap: 8px; }
  .path-card { min-height: 165px; padding: 13px 11px 11px; }
  .path-card strong { font-size: 15px; }
  .path-card small { font-size: 8px; }
  .practice-band { align-items: flex-start; flex-direction: column; padding: 18px; gap: 14px; margin-bottom: 37px; }
  .practice-band .button-dark { align-self: flex-start; }
  .practice-copy { align-items: flex-start; }
  .practice-band h2 { font-size: 18px; }
  .curriculum-section .path-heading { flex-direction: column; gap: 6px; }
  .source-link { padding-top: 0; }
  .unit-name { align-items: flex-start; flex-direction: column; gap: 0; }
  .unit-name strong { font-size: 15px; }
  .unit-details { padding-right: 42px; }
  .final-cta { align-items: flex-start; flex-direction: column; padding: 17px; }
  .cta-actions { width: 100%; }
  .cta-actions .button { flex: 1; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 6px; margin-top: 34px; }
  .page-intro { padding: 39px 2px 28px; }
  .page-intro h1 { font-size: 43px; }
  .page-intro-aside { bottom: 25px; }
  .skill-row { grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 10px; min-height: 139px; padding: 15px 0; }
  .skill-row.row-offset { padding-right: 20px; }
  .skill-row-number { width: 34px; height: 34px; font-size: 13px; }
  .skill-row h2 { font-size: 18px; }
  .skill-row p { font-size: 9px; }
  .skill-row-glyph { font-size: 31px; }
  .lesson-toolbar { padding-top: 17px; }
  .lesson-hero { padding: 23px 0 17px; }
  .lesson-emblem { width: 57px; height: 57px; font-size: 20px; }
  .lesson-hero h1 { font-size: 35px; }
  .lesson-content { grid-template-columns: 1fr; gap: 9px; }
  .content-block, .example-block { min-height: 0; padding: 16px; }
  .objective-block h2 { font-size: 18px; margin-top: 10px; }
  .concept-block p { margin-top: 9px; }
  .steps-block { grid-column: auto; }
  .steps-block ol { margin-top: 8px; }
  .example-block p { margin-top: 8px; font-size: 16px; }
  .lesson-actions { align-items: flex-start; flex-direction: column; }
  .lesson-tip p { max-width: none; }
  .lesson-buttons { width: 100%; }
  .lesson-buttons .button { flex: 1; }
  .activity-header { padding: 29px 1px 17px; }
  .activity-header h1 { font-size: 38px; }
  .activity-header p { max-width: 430px; font-size: 9px; }
  .score-orb { width: 61px; height: 61px; }
  .score-orb span { font-size: 20px; }
  .score-orb small { font-size: 6px; }
  .game-panel { padding: 17px 15px 21px; }
  .game-challenge { margin-top: 22px; }
  .game-question h2, .quiz-question { font-size: 21px; }
  .answer-option { font-size: 9px; min-height: 47px; }
  .activity-footer { font-size: 7px; }
  .result-screen { min-height: 410px; margin-top: 22px; padding: 26px 15px; }
  .result-screen h1 { font-size: 33px; }
  .site-footer p { line-height: 1.7; }
}

@media (max-width: 390px) {
  .main-area { padding: 0 14px; }
  .hero-copy { padding: 26px 19px 18px; }
  .hero h1 { font-size: 35px; }
  .hero-actions { gap: 12px; }
  .hero-actions .button { padding: 9px 12px; font-size: 9px; }
  .hero-secondary { font-size: 9px; }
  .skill-path { grid-template-columns: 1fr 1fr; }
  .path-card { min-height: 157px; }
  .breadcrumb > span:first-child { display: none; }
  .activity-header h1 { font-size: 33px; }
  .activity-header { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}