*{box-sizing:border-box}html,body{margin:0;max-width:100%;overflow-x:clip;font:16px/1.65 system-ui,Arial;color:#17304a;background:#f5f7fb}a{color:#2355a4}header,footer{background:#f1f4fa;padding:12px clamp(12px,3vw,40px)}header img{width:175px;height:auto}nav{display:flex;gap:8px;flex-wrap:wrap}nav a{padding:6px 9px;text-decoration:none;background:linear-gradient(110deg,#d9edff,#d8d4fb);color:#1d3565}main{max-width:1450px;margin:auto;padding:20px}h1{font-size:clamp(1.5rem,3vw,2.4rem)}h2{color:#304da3}.intro,.lesson,.chapter-links{background:white;border:1px solid #d8e2f2;border-radius:10px;padding:18px;margin:14px 0}.layout{display:grid;grid-template-columns:minmax(220px,290px) minmax(0,1fr);gap:20px}.chapters{position:sticky;top:12px;align-self:start;max-height:85vh;overflow:auto;background:#fff;padding:12px;border:1px solid #d8e2f2;border-radius:8px}.chapters a{display:block;padding:5px 8px;border-bottom:1px solid #eef1f8}.chapters a[aria-current=page]{background:#d9e6ff;font-weight:700}.lesson p{max-width:88ch}.lesson pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#0c382e;color:#f0fff4;padding:14px;border-radius:8px}details{margin:10px 0;border:1px solid #cbd7ed;padding:10px;border-radius:8px}summary{cursor:pointer;font-weight:700}.controls{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.controls button,.controls select{padding:8px;border:1px solid #a7bce2;background:white;border-radius:6px}body.dark{background:#10203c;color:#eef5ff}body.dark .lesson,body.dark .chapters,body.dark .intro,body.dark .chapter-links{background:#1c3050;color:#eef5ff}body.dark a{color:#bbd5ff}body.dark h2{color:#a7c7ff}footer{margin-top:25px}html[dir=rtl] body{text-align:start}@media(max-width:760px){.layout{display:block}.chapters{position:static;max-height:220px;margin-bottom:12px}main{padding:10px}}
/* Responsive course reading layout */
:root{color-scheme:light}html{overflow-x:clip}body{width:100%;min-width:0}*{min-width:0}img,svg,iframe,video{max-width:100%;height:auto}pre,code{overflow-wrap:anywhere}pre{max-width:100%;overflow-x:auto} .layout>*{min-width:0}.lesson{overflow-wrap:break-word}.chapters{scrollbar-width:thin}.subchapters{display:grid;gap:12px}.subchapters>details{background:#f8fbff;padding:14px;border-color:#d8e2f2}.subchapters>details>summary{font-size:1.12rem;color:#254b93;list-style-position:inside}.subchapters>details[open]{background:#fff}.subchapters h2{margin:12px 0}.chapters-toggle{display:none}.language-note{font-size:.8rem;color:#425a7d}.lesson nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.lesson nav a{padding:8px 12px;background:#e7efff;border-radius:6px}.course-contents{max-width:100%}.course-contents .chapters{position:static;max-height:none}.course-contents a{overflow-wrap:anywhere}body.dark .subchapters>details{background:#1c3050;color:#f0f5ff}body.dark .subchapters summary{color:#d8e6ff}body.dark .lesson nav a{background:#2b4670;color:#fff}html[dir=rtl] .layout{direction:rtl}html[dir=rtl] .lesson,html[dir=rtl] .chapters{text-align:right}html[dir=rtl] pre,html[dir=rtl] code{direction:ltr;text-align:left;unicode-bidi:isolate}header nav,footer nav{overflow-wrap:anywhere}header img{width:clamp(150px,19vw,215px);aspect-ratio:210/80;object-fit:contain}header{background:#f5f7fa}header nav a{border-radius:0}footer{background:#f5f7fa}
@media(max-width:760px){.chapters-toggle{display:inline-flex;margin:0 0 10px;padding:9px 12px;border:1px solid #829bc3;background:#e5edff;border-radius:6px;font-weight:700}.layout>.chapters{display:none;position:static;max-height:45vh;overflow:auto}.layout>.chapters.is-open{display:block}.layout{display:block}.lesson{padding:13px}.subchapters>details{padding:10px}header nav{gap:5px}header nav a{font-size:.86rem;padding:5px 7px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}