:root{--bg:#faf8f4;--surface:#fff;--ink:#1f2430;--muted:#667085;--line:#e4e0d8;--accent:#2f5fb3;
--def:#2f5fb3;--defbg:#eef3fb;--thm:#8a4b12;--thmbg:#fbf1e4;--ex:#2d7a4f;--exbg:#eaf6ef;--rem:#6b4fa3;--rembg:#f3eefa;
--font-en:"Source Serif 4",Georgia,serif;--font-ui:"Inter",system-ui,sans-serif;--font-fa:"Vazirmatn",Tahoma,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root{--bg:#14171d;--surface:#1c2028;--ink:#e8eaf0;--muted:#9aa3b2;--line:#303644;--accent:#7fa6ee;
--def:#7fa6ee;--defbg:#1b2638;--thm:#e7a864;--thmbg:#2d2418;--ex:#6fcf9b;--exbg:#17291f;--rem:#b79df0;--rembg:#241e33}}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.7 var(--font-en)}
html[lang=fa] body{font-family:var(--font-fa);line-height:2;font-size:17px}
.top{position:sticky;top:env(safe-area-inset-top,0px);background:var(--surface);border-block-end:1px solid var(--line);z-index:5;font-family:var(--font-ui)}
html[lang=fa] .top{font-family:var(--font-fa)}
.bar{max-width:760px;margin:auto;padding:10px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.crumb{color:var(--muted);font-size:14px}
.lang{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.lang a{padding:6px 14px;color:var(--ink);text-decoration:none;font:600 14px var(--font-ui)}
.lang a[aria-current]{background:var(--accent);color:var(--bg)}
.prog{height:3px;background:var(--line)}.prog i{display:block;height:100%;width:0;background:var(--accent)}
.lesson{max-width:760px;margin:0 auto;padding:28px 20px 60px;counter-reset:exercise}
h1{font-size:2.1rem;line-height:1.25;margin:.2em 0 .3em}
h2{font-size:1.3rem;margin:1.8em 0 .5em}
.kicker{font:600 13px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
html[lang=fa] .kicker{font-family:var(--font-fa);letter-spacing:0}
.box{border-inline-start:5px solid var(--c);background:var(--cb);border-radius:10px;padding:14px 18px;margin:18px 0}
.box>.t{font:700 13px var(--font-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--c);margin-bottom:4px}
html[lang=fa] .box>.t{font-family:var(--font-fa);letter-spacing:0;font-size:15px}
.definition{--c:var(--def);--cb:var(--defbg)}.theorem{--c:var(--thm);--cb:var(--thmbg)}
.example{--c:var(--ex);--cb:var(--exbg)}.remark{--c:var(--rem);--cb:var(--rembg)}
.box p{margin:.3em 0}
.obj{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 20px 8px 36px}
[dir=rtl] .obj{padding:8px 36px 8px 20px}
.obj li{margin:.3em 0}
.math-display{margin:.6em 0}
.katex{direction:ltr;unicode-bidi:isolate}
.katex-display{overflow-x:auto;overflow-y:hidden;max-width:100%}
details.fold{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:8px 16px;margin:12px 0}
details.fold summary{cursor:pointer;font:600 15px var(--font-ui);color:var(--accent)}
html[lang=fa] details.fold summary{font-family:var(--font-fa)}
.exercise{counter-increment:exercise;margin:14px 0}
.exercise .q>p:first-child::before{content:counter(exercise) ". ";font-weight:700}
html[lang=fa] .exercise .q>p:first-child::before{content:counter(exercise,persian) ". "}
.exercise .q p{margin:.3em 0}
.nl{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:18px 0;font-family:var(--font-ui)}
html[lang=fa] .nl{font-family:var(--font-fa)}
.nl svg{width:100%;height:auto;direction:ltr;display:block}
.nl .ctl{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;font-size:15px}
.nl .ctl label{display:flex;gap:8px;align-items:center}
.nl input{accent-color:var(--accent)}
.nl .out{font:600 15px ui-monospace,Menlo,monospace;color:var(--accent);margin-top:6px}
html[lang=fa] .nl .out{font-family:var(--font-fa);font-size:16px}
.nl .out bdi[dir=ltr]{font-family:ui-monospace,Menlo,monospace;white-space:nowrap}
.nl .cap{font-size:13px;color:var(--muted);margin-top:4px}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:40px;font-family:var(--font-ui)}
html[lang=fa] .pager{font-family:var(--font-fa)}
.pager a{color:var(--accent);text-decoration:none;border:1px solid var(--line);padding:8px 16px;border-radius:8px;background:var(--surface)}
[dir=rtl] .arr{display:inline-block;transform:scaleX(-1)}
.toc{padding-inline-start:1.4em}.toc li{margin:.6em 0}.toc small{display:block;color:var(--muted)}
@media(max-width:520px){h1{font-size:1.7rem}body{font-size:17px}}
.nl button{font:600 14px var(--font-ui);background:var(--accent);color:var(--bg);border:0;border-radius:8px;padding:6px 14px;cursor:pointer}
.nl button:disabled{opacity:.4;cursor:default}
html[lang=fa] .nl button{font-family:var(--font-fa)}
.nl .num{display:inline-block;min-width:3ch;direction:ltr;font-family:ui-monospace,Menlo,monospace}
.sv{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;direction:ltr;margin:8px 0}
.sv span{text-align:center;padding:4px 0;border-radius:6px;font:600 13px ui-monospace,Menlo,monospace;background:var(--bg);color:var(--ink)}
.sv .one{opacity:.4}.sv .x{opacity:.35;text-decoration:line-through}
.sv .now{background:var(--rembg);color:var(--rem)}
.sv .cur{background:var(--accent);color:var(--bg)}
.sv .kp,.sv .pr{background:var(--exbg);color:var(--ex)}
.eu{list-style:none;padding:0;margin:8px 0;font:15px ui-monospace,Menlo,monospace}
.nl .h{cursor:grab;touch-action:none}.nl .h:focus{outline:3px solid var(--ink);outline-offset:2px}
.nl .ctl button[aria-pressed=true]{outline:2px solid var(--ink)}
.nl .out div{margin:2px 0}
.pc{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;direction:ltr;max-width:300px;margin:8px 0}
.pc span{aspect-ratio:1;border-radius:3px;background:var(--bg);border:1px solid var(--line)}
.pc span.on{background:var(--accent);border-color:var(--accent)}
.dots{display:flex;flex-wrap:wrap;gap:6px;direction:ltr;margin:6px 0;min-height:18px}
.dots i{width:18px;height:18px;border-radius:50%;display:inline-block}
.dots .d1{background:var(--accent)}.dots .d2{background:var(--thm)}

.nl button{min-height:40px;padding:6px 16px}
.nl input[type=range]{min-height:28px;max-width:100%}
.lang a{display:inline-flex;align-items:center;min-height:36px}