@font-face {
  font-family: "Vazirmatn";
  src: url("vazirmatn-arabic-wght-normal.woff2") format("woff2-variations"), url("vazirmatn-arabic-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
:root {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --sunken: #eff1f6;
  --text: #161b2e;
  --muted: #646b7e;
  --line: #e2e5ee;
  --accent: #2f4be0;
  --accent-2: #8a3ffc;
  --on-accent: #ffffff;
  --accent-soft: #e8ebfd;
  --ok: #0e9a72;
  --grid: rgba(47, 75, 224, .09);
  --warn: #b25e09;
  --warn-soft: #fdf3e7;
  --danger: #c0392b;
  --danger-soft: #fdeeee;
  --code-bg: #f3f5f9;
  --radius: 10px;
  --sans: "Vazirmatn", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1020; --surface: #131729; --sunken: #1a1f35; --text: #e6e8f2; --muted: #959cb3;
    --line: #262c45; --accent: #8597ff; --accent-2: #c48bff; --on-accent: #0d1020; --accent-soft: #1f2650; --ok: #3fd0a0; --grid: rgba(133, 151, 255, .1);
    --warn: #e0a050; --warn-soft: #2a2116; --danger: #ef7a6d; --danger-soft: #2c1a19; --code-bg: #161a2d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1020; --surface: #131729; --sunken: #1a1f35; --text: #e6e8f2; --muted: #959cb3;
  --line: #262c45; --accent: #8597ff; --accent-2: #c48bff; --on-accent: #0d1020; --accent-soft: #1f2650; --ok: #3fd0a0; --grid: rgba(133, 151, 255, .1);
  --warn: #e0a050; --warn-soft: #2a2116; --danger: #ef7a6d; --danger-soft: #2c1a19; --code-bg: #161a2d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.9 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 2px; }
.prose a[href^="http"] { overflow-wrap: anywhere; unicode-bidi: isolate; }
.skip { position: absolute; inset-inline-start: -999px; }
.skip:focus { inset-inline-start: 8px; top: 8px; z-index: 99; background: var(--surface); padding: 6px 10px; }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 20; height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { font-weight: 650; color: var(--text); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.brand-mark { display: inline-block; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.overall { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { width: 140px; height: 6px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: linear-gradient(to left, var(--accent), var(--accent-2)); border-radius: inherit; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.theme-btn, .menu-btn { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 16px; }
.menu-btn { display: none; }

/* layout */
.layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 220px; max-width: 1400px; margin: 0 auto; }
.sidebar { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; padding-block: 24px; padding-inline: 20px 12px; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; }
.nav { list-style: none; margin: 0; padding: 0; }
.nav a { display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; align-items: baseline; padding: 7px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14.5px; line-height: 1.35; }
.nav a:hover { background: var(--sunken); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-num { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.nav-pct { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nav-pct.complete, .page-progress.complete { color: var(--ok); }
.nav-pct.complete::before { content: "✓ "; }
.sidebar-foot { margin-top: auto; padding: 16px 10px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sidebar-foot button, .import-btn, .btn { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.btn.danger { color: var(--danger); }
.saved { width: 100%; margin: 4px 0 0; font-size: 12px; color: var(--ok); min-height: 1em; }

main { padding: 40px 56px 80px; min-width: 0; overflow-x: clip; }
.prose { max-width: 760px; margin: 0 auto; }
.toc { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; padding-block: 40px 24px; padding-inline: 0 20px; font-size: 13px; }
.toc p { margin: 0 0 8px; font-weight: 600; color: var(--muted); font-size: 12px; }
.toc ol { position: relative; list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--line); }
.toc ol::before { content: ""; position: absolute; inset-inline-start: -1px; top: var(--toc-y, 0); height: var(--toc-h, 0); width: 2px; background: linear-gradient(var(--accent), var(--accent-2)); border-radius: 2px; transition: top .3s cubic-bezier(.2, .8, .2, 1), height .3s cubic-bezier(.2, .8, .2, 1); }
.toc a { display: block; padding-block: 4px; padding-inline: 12px 0; color: var(--muted); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--text); }
.toc a.active { color: var(--accent); }

/* prose */
.prose h1 { font-size: 2.1rem; line-height: 1.45; margin: 0 0 .4em; }
.prose h2 { font-size: 1.4rem; line-height: 1.6; margin: 2.4em 0 .6em; padding-top: .4em; border-top: 1px solid var(--line); }
.prose h3 { font-size: 1.1rem; margin: 1.8em 0 .4em; }
.prose h1 .anchor { display: none; }
.anchor { float: inline-start; margin-inline-start: -1.1em; width: 1.1em; color: var(--muted); text-decoration: none; opacity: 0; font-weight: 400; }
h2:hover .anchor, h3:hover .anchor { opacity: .6; }
.page-meta { color: var(--muted); font-size: 14px; margin: 0 0 6px; }
.page-progress { margin-inline-start: 10px; font-weight: 600; }
.page-progress:not(:empty)::before { content: "· "; color: var(--muted); font-weight: 400; }
.prose p, .prose li { font-size: 16.5px; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose ol { list-style-type: persian; }
.prose li + li { margin-top: .25em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.prose strong { font-weight: 650; }
.prose :not(pre) > code { white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
@media (max-width: 820px) { .prose :not(pre) > code { white-space: normal; overflow-wrap: anywhere; } }
.prose code { font-family: var(--mono); font-size: .86em; background: var(--code-bg); border: 1px solid var(--line); padding: .08em .35em; border-radius: 5px; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 14.5px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: start; vertical-align: top; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 600; color: var(--muted); font-size: 13.5px; }
.prose blockquote { margin: 1.2em 0; padding: 2px 18px; border-inline-start: 3px solid var(--line); color: var(--muted); }

.code { direction: ltr; text-align: left; position: relative; margin: 1.2em 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--code-bg); }
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 13.5px/1.6 var(--mono); }
.code pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.code .lang { position: absolute; top: 6px; left: 12px; font: 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.code .lang + .copy + pre { padding-top: 28px; }
.copy { position: absolute; top: 6px; right: 8px; font: 12px var(--sans); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s; }
.code:hover .copy, .copy:focus { opacity: 1; }
pre.mermaid { direction: ltr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-align: center; overflow-x: auto; }

/* callouts */
.callout { margin: 1.2em 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 16px; }
.callout > :last-child, .callout > div > :last-child { margin-bottom: 0; }
.callout-title { font-weight: 650; margin: 0 0 .3em; }
.callout.tip, .callout.note { border-inline-start: 3px solid var(--accent); }
.callout.warning, .callout.caution { border-inline-start: 3px solid var(--warn); background: var(--warn-soft); }
.callout.danger { border-inline-start: 3px solid var(--danger); background: var(--danger-soft); }
details.callout { padding: 0; }
details.callout summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; display: flex; gap: 10px; }
details.callout summary::before { content: "‹"; color: var(--muted); transition: transform .15s; display: inline-block; }
details.callout[open] summary::before { transform: rotate(-90deg); }
[dir="ltr"] details.callout[open] summary::before { transform: rotate(90deg); }
details.callout summary::-webkit-details-marker { display: none; }
details.callout > div { padding-block: 0 12px; padding-inline: 36px 16px; }
details.question { border-inline-start: 3px solid var(--accent); }

/* tracked inputs */
ul.tasks { list-style: none; padding-inline-start: 0; }
li.task label { display: flex; gap: 12px; align-items: flex-start; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; cursor: pointer; }
li.task label:hover { background: var(--sunken); }
li.task input { appearance: none; -webkit-appearance: none; position: relative; margin: .4em 0 0; width: 19px; height: 19px; flex: none; border: 1.5px solid color-mix(in srgb, var(--muted) 60%, transparent); border-radius: 6px; background: var(--surface); cursor: pointer; transition: background-color .2s, border-color .2s; }
li.task input::after { content: ""; position: absolute; left: 5.5px; top: 1.5px; width: 5px; height: 10px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
li.task input:checked { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; }
li.task input:checked::after { transform: rotate(45deg) scale(1); }
li.task input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
li.task.just-checked label { animation: task-flash .7s ease-out; }
@keyframes task-flash { from { background: var(--accent-soft); } }
li.task span { transition: color .25s; }
li.task.checked span { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
input.field { font-family: var(--sans); font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; min-width: 16em; max-width: 100%; }
textarea.notes { display: block; width: 100%; font: 15px/1.6 var(--sans); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; resize: vertical; margin: .8em 0 1.2em; }
input.field:focus, textarea.notes:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

/* dashboard */
.modules { display: grid; gap: 12px; margin: 1.2em 0; }
.module-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s, transform .2s, box-shadow .2s; }
.module-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 20px -12px var(--accent); }
.module-card:hover .num { color: var(--accent); }
.module-card .num { grid-row: span 2; font-size: 26px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .15s; }
.module-card .title { font-weight: 620; }
.module-card .sub { grid-column: 2; font-size: 13.5px; color: var(--muted); }
.module-card .pct { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--muted);
  background: radial-gradient(closest-side, var(--surface) 76%, transparent 78%), conic-gradient(var(--accent) calc(var(--p) * 1%), var(--sunken) 0);
  animation: fill-p 1.1s cubic-bezier(.2, .8, .2, 1) backwards; transition: --p .6s cubic-bezier(.2, .8, .2, 1); }
.module-card .pct.complete { color: var(--ok); background: radial-gradient(closest-side, var(--surface) 76%, transparent 78%), conic-gradient(var(--ok) 100%, var(--ok) 0); }
.module-card .bar { display: none; }

.pager { max-width: 760px; margin: 64px auto 0; display: flex; justify-content: space-between; gap: 12px; }
.pager a { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--text); background: var(--surface); }
.pager a { transition: border-color .15s, transform .2s; }
.pager a:hover { border-color: var(--accent); }
.pager a:first-child:hover { transform: translateX(3px); }
.pager a:last-child:hover { transform: translateX(-3px); }

/* registered so progress fills can animate */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes fill-p { from { --p: 0; } }

/* home: course route, one segment per module sized by its hours */
.route { margin: 1.6em 0 2.4em; padding: 28px 24px 14px; border: 1px solid var(--line); border-radius: 16px; background-color: var(--surface);
  background-image: radial-gradient(var(--grid) 1.2px, transparent 1.4px); background-size: 18px 18px; background-position: center; }
.route ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.prose .route li { flex: var(--h) 1 0; margin: 0; font-size: inherit; }
.route a { display: flex; align-items: center; text-decoration: none; outline: none; }
.route-node { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; font-weight: 650; line-height: 1;
  background: var(--surface); border: 1.5px solid var(--line); color: var(--muted); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), border-color .2s, color .2s, box-shadow .2s;
  animation: node-in .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i) * 90ms) backwards; }
.route-track { flex: 1; height: 6px; margin-inline: 4px; border-radius: 99px; background: var(--sunken); overflow: hidden; transform-origin: right;
  animation: track-in .55s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 90ms + 120ms) backwards; }
.route-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(to left, var(--accent), var(--accent-2)); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.route a.started .route-node { border-color: var(--accent); color: var(--accent); }
.route a.done .route-node { border-color: transparent; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.route a.done .route-track span { background: var(--ok); }
.route a.current .route-node { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft);
  animation: node-in .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i) * 90ms) backwards, node-pulse 1.6s ease-out 1.1s 2; }
.route a:hover .route-node, .route a:focus-visible .route-node { transform: scale(1.14); border-color: var(--accent); color: var(--accent); }
.route a:focus-visible .route-node { outline: 2px solid var(--accent); outline-offset: 3px; }
.route-caption { margin: 20px 0 0; font-size: 15px; line-height: 1.6; min-height: 1.6em; }
.route-caption strong { font-weight: 650; }
.route-caption span { color: var(--muted); font-size: 13.5px; margin-inline-start: 4px; padding-inline-start: 10px; border-inline-start: 1px solid var(--line); }
.route-caption strong + span { border: 0; padding-inline-start: 4px; }
.route-scale { display: flex; justify-content: space-between; gap: 8px; margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
@keyframes node-in { from { transform: scale(0); opacity: 0; } }
@keyframes track-in { from { transform: scaleX(0); } }
@keyframes node-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }

/* module pages: big numeral that fills as tasks get checked */
article.prose { position: relative; isolation: isolate; }
.module-glyph { --ink-lo: 17.5; --ink-hi: 84.5; --fill: calc((var(--ink-lo) + var(--p) * (var(--ink-hi) - var(--ink-lo)) / 100) * 1%);
  position: absolute; z-index: -1; top: -14px; inset-inline-end: 0; font-size: 140px; line-height: 1; font-weight: 800; color: transparent; pointer-events: none; user-select: none;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 38%, transparent);
  background: linear-gradient(to top, color-mix(in srgb, var(--accent-2) 26%, transparent), color-mix(in srgb, var(--accent) 22%, transparent) var(--fill), transparent var(--fill));
  -webkit-background-clip: text; background-clip: text;
  animation: glyph-in .8s cubic-bezier(.2, .8, .2, 1) backwards, fill-p 1.4s cubic-bezier(.2, .8, .2, 1) .3s backwards; transition: --p .8s cubic-bezier(.2, .8, .2, 1); }
.module-glyph.complete { -webkit-text-stroke-color: color-mix(in srgb, var(--ok) 55%, transparent);
  background-image: linear-gradient(color-mix(in srgb, var(--ok) 26%, transparent), color-mix(in srgb, var(--ok) 26%, transparent)); }
.module-glyph.celebrate { animation: glyph-pop .9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes glyph-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes glyph-pop { 40% { transform: scale(1.08) rotate(-3deg); } }

/* small burst when a click finishes a module */
.burst { position: fixed; z-index: 50; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 2px; background: var(--c); animation: burst .9s cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes burst { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }

@media (max-width: 1180px) { .layout { grid-template-columns: 250px minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .menu-btn { display: inline-block; }
  .sidebar { position: fixed; z-index: 30; right: 0; top: 56px; width: 290px; background: var(--bg); transform: translateX(100%); transition: transform .2s; }
  body.menu-open .sidebar { transform: none; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
  main { padding: 28px 20px 60px; }
  .anchor { display: none; }
  .overall .bar { display: none; }
  .topbar { gap: 10px; padding: 0 12px; }
  .brand { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .route { padding: 22px 14px 12px; }
  .route-node { width: 26px; height: 26px; font-size: 12.5px; }
  .route-track { margin-inline: 2px; height: 5px; }
  .module-glyph { position: static; display: block; width: fit-content; font-size: 84px; line-height: 1; margin: -14px 0 -6px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .topbar, .sidebar, .toc, .pager, .copy, .route, .module-glyph { display: none !important; } .layout { display: block; } }