/* Reader-first revision: fewer sections, clearer navigation. */
.brand-logo{display:block;width:116px;height:auto}
.site-header{justify-content:space-between}
.options-toggle{margin-left:auto}
.options-toggle svg{transition:transform .22s ease}
.options-toggle[aria-expanded=true] svg{transform:rotate(90deg)}
.site-menu{transform-origin:top right}
.mobile-course-links{display:none}
.home-main{max-width:1000px}
.home-hero{display:block;padding:64px 0 38px;max-width:720px}
.home-hero h1{font-size:clamp(34px,4vw,48px);letter-spacing:-1.8px;margin-bottom:18px}
.home-hero .lead{max-width:560px;margin:0 0 24px;font-size:16px}
.catalog{padding-top:24px;padding-bottom:36px}
.breadcrumbs{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--mut);margin-bottom:25px}
.breadcrumbs a{text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.lesson-finish{background:none;border:0;border-top:1px solid var(--line);padding:24px 0 0;margin-top:35px}
.lesson-finish p{margin-bottom:0}
.lesson-pagination{margin-top:24px}
.lesson-pagination a{padding:12px;border:1px solid var(--line);border-radius:5px}
.lesson-pagination a:hover{background:var(--soft)}
.lesson-pagination small{font-size:10px}
.lesson-pagination a>span{display:none}
.site-footer{align-items:center;padding:24px 0;margin-top:24px}
html[data-theme=dark] .brand-logo{filter:brightness(0) invert(1)}
@media(prefers-color-scheme:dark){html:not([data-theme=light]) .brand-logo{filter:brightness(0) invert(1)}}
@media(max-width:1280px){.home-main{margin-inline:auto;width:calc(100% - 72px)}}
@media(max-width:650px){.home-main{width:auto;margin-inline:22px}.home-hero{padding:38px 0 24px}.home-hero h1{font-size:35px}.home-hero .lead{font-size:15px}.catalog{padding-top:20px}.brand-logo{width:100px}.site-footer{display:flex;font-size:11px}.site-footer>div{margin:0;gap:16px}.mobile-course-links{display:none}.lesson-pagination a{padding:10px;font-size:12px}.lesson-pagination small{font-size:9px}.site-menu{height:auto;min-height:100dvh}}
@media(prefers-reduced-motion:reduce){.options-toggle svg{transition:none}}
@media print{.breadcrumbs{display:none}.brand-logo{filter:none!important}}


/* Three-language library header and Moroccan Arabic reading direction. */
.header-actions{display:flex;align-items:center;gap:10px;margin-inline-start:auto;flex-shrink:0}
.header-actions .options-toggle{margin:0}
.language-select{max-width:100px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--fg);font-size:12px;line-height:1.4;padding:8px 7px;cursor:pointer;min-height:40px}
.language-select:hover{background:var(--soft)}
@media(max-width:650px){.header-actions{gap:7px}.language-select{max-width:86px;font-size:11px;padding:7px 5px}.brand{gap:9px}}
html[dir=rtl] body{direction:rtl;text-align:start}
html[dir=rtl] .site-menu{right:auto;left:max(24px,calc((100vw - 1200px)/2));transform-origin:top left}
html[dir=rtl] .site-menu>a,html[dir=rtl] .site-menu>button{text-align:right}
html[dir=rtl] .lesson-layout{grid-template-columns:225px minmax(0,740px)}
html[dir=rtl] .lesson-sidebar nav a,html[dir=rtl] .breadcrumbs{direction:rtl}
html[dir=rtl] .lesson-row{padding:22px 0 22px 12px}
html[dir=rtl] .duration{text-align:left}
html[dir=rtl] .section-number,html[dir=rtl] .num{margin-left:13px;margin-right:0}
html[dir=rtl] .copy-code{right:auto;left:9px}
html[dir=rtl] pre,html[dir=rtl] pre code,html[dir=rtl] .example-code,html[dir=rtl] .example-frame,html[dir=rtl] .code-layer,html[dir=rtl] .demo,html[dir=rtl] .ctl{direction:ltr;text-align:left}
html[dir=rtl] code{direction:ltr;unicode-bidi:isolate;display:inline-block;text-align:left}
html[dir=rtl] .note{border-left:0;border-right:2px solid var(--fg)}
html[dir=rtl] .playground{direction:rtl}
html[dir=rtl] .preview-sizes,html[dir=rtl] .lesson-pagination a{direction:rtl}
html[dir=rtl] td,html[dir=rtl] th{text-align:right}
html[dir=rtl] .site-menu a svg,html[dir=rtl] .site-menu button svg{flex-shrink:0}
html[dir=rtl] .brand-logo{direction:ltr}
@media(max-width:850px){html[dir=rtl] .lesson-layout{grid-template-columns:160px minmax(0,1fr)}}
@media(max-width:650px){html[dir=rtl] .site-menu{inset:0 auto 0 0;border-left:0;border-right:1px solid var(--line)}html[dir=rtl] .lesson-layout{display:block}html[dir=rtl] .lesson-row{padding:20px 0}}
@media print{.language-select{display:none!important}}

@media(max-width:400px){.site-header{padding-inline:14px;gap:9px}.brand{gap:8px}.brand-logo{width:82px}.brand-divider{display:none}.brand>span:last-child{font-size:12px}.header-actions{gap:5px}.language-select{max-width:77px;padding-inline:4px}}