.lesson-page{--lesson-ink:#23352a;--lesson-muted:#6b756d;--lesson-line:#e1e8df;--lesson-surface:#fff;--lesson-tint:#f0f6ef;background:radial-gradient(ellipse 75% 25% at 50% 0%,#e8f3e8 0%,transparent 75%);padding:0 20px 88px;color:var(--lesson-ink)}
.dark .lesson-page{--lesson-ink:#eef5ed;--lesson-muted:#abb9ae;--lesson-line:#354239;--lesson-surface:#201f1d;--lesson-tint:#21382b;background:radial-gradient(ellipse 75% 25% at 50% 0%,#203629 0%,transparent 75%)}
.lesson-shell{max-width:1152px;margin:auto}.lesson-progress{position:fixed;z-index:45;top:0;right:0;height:3px;width:0;background:#4b8c67;transition:width .12s linear;pointer-events:none}
.lesson-breadcrumb{display:flex;align-items:center;gap:10px;min-width:0;padding:27px 0 35px;color:var(--lesson-muted);font-size:12px}.lesson-breadcrumb a{white-space:nowrap;transition:color .2s}.lesson-breadcrumb a:hover{color:#4b8c67}.lesson-breadcrumb [aria-current]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--lesson-ink)}
.lesson-header{max-width:900px;margin:0 auto 34px;text-align:center}.lesson-header-inner{display:flex;flex-direction:column;align-items:center}.lesson-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--lesson-tint);border:1px solid var(--lesson-line);color:#3d7155;border-radius:100px;padding:7px 15px;font-size:12px;font-weight:700;margin-bottom:22px}.dark .lesson-eyebrow{color:#9ed3b3}.lesson-eyebrow-dot{width:7px;height:7px;border-radius:50%;background:#62a77a;box-shadow:0 0 0 4px #62a77a20}.lesson-header h1{font-size:clamp(2rem,4.7vw,4.25rem);font-weight:800;line-height:1.35;letter-spacing:-.045em;color:var(--lesson-ink);text-wrap:balance}.lesson-subtitle{margin-top:18px;max-width:680px;color:var(--lesson-muted);font-size:clamp(1rem,1.8vw,1.25rem);line-height:1.95;text-align:center}.lesson-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;color:var(--lesson-muted);font-size:12px;margin-top:24px}.lesson-meta>span:not(.lesson-meta-separator){display:inline-flex;align-items:center;gap:6px}.lesson-meta svg{width:16px;height:16px}.lesson-meta-separator{width:3px;height:3px;border-radius:50%;background:#9faa9f}.lesson-header-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:27px}.lesson-start,.lesson-focus-button{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:44px;padding:0 22px;border-radius:12px;font-size:13px;font-weight:700;transition:transform .2s,background .2s,border-color .2s}.lesson-start{background:#3d7155;color:white;box-shadow:0 9px 23px #3d715529}.lesson-start:hover{background:#315f47;transform:translateY(-2px)}.lesson-focus-button{border:1px solid var(--lesson-line);background:var(--lesson-surface);color:var(--lesson-ink)}.lesson-focus-button:hover{border-color:#7cbe98;transform:translateY(-2px)}.lesson-focus-button svg{width:17px;height:17px}
.lesson-cover{position:relative;height:clamp(245px,38vw,450px);overflow:hidden;border-radius:24px;background:#dbe9db;box-shadow:0 20px 48px #273d2b13}.lesson-cover img{width:100%;height:100%;object-fit:cover}.lesson-cover-placeholder{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 65% 35%,#87b894,#3b6a51 65%,#274737);color:#ffffffbb;font-family:'Aref Ruqaa',serif;font-size:5rem}.lesson-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#10251c20,transparent 45%);pointer-events:none}.lesson-badges{margin:22px auto 0;max-width:1040px}.lesson-badges>div{justify-content:center}
.lesson-reading-grid{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:clamp(30px,5vw,82px);align-items:start;max-width:1040px;margin:53px auto 0;scroll-margin-top:30px}.lesson-article{min-width:0;max-width:720px}.lesson-article>.prose-lesson:first-child,.lesson-article>.lesson-intro{margin-top:0}.lesson-intro{font-size:1.12rem;border-right:3px solid #76ad87;padding-right:22px;margin-bottom:34px}.lesson-intro p{color:var(--lesson-ink);line-height:2.15}.lesson-article .prose-lesson{font-size:1.04rem}.lesson-article .prose-lesson p{line-height:2.15;margin-bottom:1.4rem}.lesson-article .prose-lesson h2{font-size:1.62rem;line-height:1.65;margin-top:3rem;padding-top:5px}.lesson-article .prose-lesson h3{font-size:1.2rem;margin-top:2rem}.lesson-article .prose-lesson blockquote{border-right:3px solid #75a885;background:var(--lesson-tint);padding:20px 24px;border-radius:12px;margin:28px 0}.lesson-article .prose-lesson img{border-radius:16px;margin:28px auto}.lesson-article .prose-lesson a{text-underline-offset:4px}
.lesson-sidebar{position:sticky;top:28px;display:grid;gap:16px}.lesson-toc,.lesson-sidebar-actions{border:1px solid var(--lesson-line);border-radius:18px;background:var(--lesson-surface);padding:23px;box-shadow:0 10px 35px #263d2a0b}.lesson-sidebar-kicker{display:block;color:#608771;font-size:11px;font-weight:800;letter-spacing:.02em;margin-bottom:7px}.lesson-toc h2,.lesson-sidebar-actions h2{font-size:17px;font-weight:800;margin-bottom:17px;color:var(--lesson-ink)}.lesson-toc-links ul{list-style:none;padding:0;margin:0}.lesson-toc-links li{margin:0;border-right:2px solid var(--lesson-line);padding:8px 13px;font-size:13px;line-height:1.75;color:var(--lesson-muted)}.lesson-toc-links li:hover{border-color:#6da47c;color:#3d7155}.lesson-toc-links li a{display:block}.lesson-toc-links li ul{padding-top:5px}.lesson-toc-links li li{font-size:12px;border:0;padding:5px 10px}.lesson-sidebar-actions{background:var(--lesson-tint)}.lesson-sidebar-actions p{color:var(--lesson-muted);font-size:12px;line-height:1.9;text-align:right;margin:-5px 0 17px}.lesson-save{display:block;width:100%;background:#3d7155;color:#fff;text-align:center;border-radius:10px;padding:11px 12px;font-size:12px;font-weight:700;transition:background .2s}.lesson-save:hover{background:#315f47}.lesson-sidebar-share{display:block;text-align:center;color:#3d7155;font-size:12px;font-weight:700;margin-top:13px}.dark .lesson-sidebar-share{color:#9ed3b3}
.lesson-toc-links{max-height:42vh;overflow:auto;scrollbar-width:thin}
.lesson-extra{max-width:1040px;margin:58px auto 0;border-top:1px solid var(--lesson-line);padding-top:30px}.lesson-finish-note{display:flex;align-items:flex-start;gap:16px;background:var(--lesson-tint);border:1px solid var(--lesson-line);border-radius:18px;padding:22px 25px}.lesson-finish-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;background:#dbeade;color:#3d7155;border-radius:11px;font-size:23px}.lesson-finish-note h2{font-size:15px;font-weight:800;margin-bottom:4px}.lesson-finish-note p{font-size:13px;line-height:1.9;color:var(--lesson-muted);text-align:right}.lesson-extra>div:not(.lesson-finish-note){max-width:840px;margin-right:auto;margin-left:auto}
body.focus-mode .lesson-breadcrumb,body.focus-mode .lesson-cover,body.focus-mode .lesson-badges,body.focus-mode .lesson-sidebar,body.focus-mode .lesson-header-actions{display:none}body.focus-mode .lesson-reading-grid{display:block;max-width:760px;margin-top:45px}body.focus-mode .lesson-article{max-width:none}body.focus-mode .lesson-header{margin-top:55px;max-width:760px}body.focus-mode .lesson-page{background:none}
body.focus-mode header.lesson-header{display:block!important}
/* Keep the guide below the sticky navigation and let the whole sidebar scroll when needed. */
html{scroll-behavior:smooth;scroll-padding-top:88px}
.lesson-progress{width:100%;transform:scaleX(0);transform-origin:right;transition:none;will-change:transform}
.lesson-reading-grid,.lesson-article [id]{scroll-margin-top:88px}
.lesson-sidebar{top:84px;max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.lesson-toc-links{max-height:none;overflow:visible}
@media(max-width:820px){.lesson-page{padding:0 16px 60px}.lesson-breadcrumb{padding:18px 0 28px}.lesson-header{margin-bottom:29px}.lesson-cover{border-radius:17px}.lesson-reading-grid{grid-template-columns:1fr;margin-top:38px;gap:35px}.lesson-article{max-width:none}.lesson-sidebar{position:static;grid-template-columns:1fr 1fr}.lesson-toc,.lesson-sidebar-actions{padding:19px}}
@media(max-width:820px){.lesson-sidebar{max-height:none;overflow:visible}}
@media(max-width:600px){.lesson-header h1{font-size:2rem}.lesson-subtitle{margin-top:12px}.lesson-meta{gap:8px;margin-top:18px}.lesson-header-actions{margin-top:22px}.lesson-cover{height:235px}.lesson-badges>div{justify-content:flex-start}.lesson-reading-grid{margin-top:34px}.lesson-sidebar{grid-template-columns:1fr}.lesson-intro{font-size:1.04rem;padding-right:16px}.lesson-article .prose-lesson{font-size:1rem}.lesson-article .prose-lesson h2{font-size:1.4rem}.lesson-finish-note{padding:18px}.lesson-extra{margin-top:42px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.lesson-progress,.lesson-start,.lesson-focus-button{transition:none}}
@media print{.lesson-page{background:white;padding:0;color:#222}.lesson-breadcrumb,.lesson-progress,.lesson-header-actions,.lesson-sidebar,.lesson-badges,.lesson-extra{display:none!important}.lesson-reading-grid{display:block;margin-top:30px}.lesson-cover{height:240px;box-shadow:none}header.lesson-header{display:block!important;margin-bottom:20px}}