@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── Tokens ──────────────────────────────────────────────────────── */
:root{
  --bg:#ffffff;
  --surface:#f7f7f8;
  --surface-2:#f0f1f3;
  --ink:#0a0a0a;
  --ink-2:#1a1a1a;
  --ink-muted:#68686f;
  --ink-faint:#8f8f97;
  --line:#eaeaea;
  --line-2:#e2e2e5;
  --accent:#0969da;
  --accent-soft:#eaf2fd;
  --accent-ink:#ffffff;
  --code-bg:#f7f7f8;
  --inline-code-bg:#f1f1f2;
  --good:#16a34a;
  --warn:#ca8a04;
  --bad:#dc2626;


  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px;
  --text-xs:.75rem; --text-sm:.8125rem; --text-base:.875rem; --text-md:1rem;
  --text-lg:1.25rem; --text-xl:1.75rem; --text-2xl:2.25rem;

  --topbar-h:56px;
  --rail-w:268px;
  --zoom:1;
  --radius:8px;
  --radius-sm:5px;
  --code-line:1.4;

  --font-chrome:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-heading:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a0a0a; --surface:#111113; --surface-2:#17171a;
    --ink:#ffffff; --ink-2:#e4e4e7; --ink-muted:#94949c; --ink-faint:#6c6c74;
    --line:#1e1e21; --line-2:#28282c;
    --accent:#5b9fff; --accent-soft:rgba(91,159,255,.14); --accent-ink:#04121f;
    --code-bg:#111113; --inline-code-bg:#1c1c1f;
    --good:#3fb950; --warn:#e2a336; --bad:#f87171;
  }
}
:root[data-theme="dark"]{
  --bg:#0a0a0a; --surface:#111113; --surface-2:#17171a;
  --ink:#ffffff; --ink-2:#e4e4e7; --ink-muted:#94949c; --ink-faint:#6c6c74;
  --line:#1e1e21; --line-2:#28282c;
  --accent:#5b9fff; --accent-soft:rgba(91,159,255,.14); --accent-ink:#04121f;
  --code-bg:#111113; --inline-code-bg:#1c1c1f;
  --good:#3fb950; --warn:#e2a336; --bad:#f87171;
}

/* ── Style variants (F34-adjacent: switchable "look", independent of
   light/dark) — Docs is the default (bare :root above); Terminal/Journal/
   Blueprint override tokens + fonts when html[data-style] is set. ───── */
:root[data-style="terminal"]{
  --bg:#f4f3ee; --surface:#eae8e0; --surface-2:#dfdccf;
  --ink:#161a17; --ink-2:#2c322d; --ink-muted:#5c655e; --ink-faint:#8b948c;
  --line:#d7d3c6; --line-2:#c9c4b5;
  --accent:#1f7a44; --accent-soft:#dcefdf; --accent-ink:#ffffff;
  --code-bg:#eae8e0; --inline-code-bg:#dfdccf;
  --font-chrome:"JetBrains Mono",monospace; --font-heading:"JetBrains Mono",monospace; --font-body:"JetBrains Mono",monospace;
}
:root[data-style="terminal"][data-theme="dark"]{
  --bg:#090c0a; --surface:#0f1310; --surface-2:#151b16;
  --ink:#dcf3e1; --ink-2:#b7d6bd; --ink-muted:#6f8a75; --ink-faint:#4c5f50;
  --line:#1c2a1f; --line-2:#25352a;
  --accent:#33d17a; --accent-soft:rgba(51,209,122,.14); --accent-ink:#04150a;
  --code-bg:#0f1310; --inline-code-bg:#151b16;
}
:root[data-style="journal"]{
  --bg:#fbfaf6; --surface:#f2f0e9; --surface-2:#e9e5da;
  --ink:#1e1c18; --ink-2:#37342d; --ink-muted:#726c5d; --ink-faint:#a29b87;
  --line:#e0dbcb; --line-2:#d3cdb8;
  --accent:#2c4a7c; --accent-soft:#e6ecf5; --accent-ink:#ffffff;
  --code-bg:#f2f0e9; --inline-code-bg:#e9e5da;
  --font-chrome:'Inter',sans-serif; --font-heading:"Source Serif 4",Georgia,serif; --font-body:"Source Serif 4",Georgia,serif;
}
:root[data-style="journal"][data-theme="dark"]{
  --bg:#17140f; --surface:#1e1a14; --surface-2:#251f18;
  --ink:#ece6d8; --ink-2:#cdc5b1; --ink-muted:#938972; --ink-faint:#5c5646;
  --line:#33291c; --line-2:#413526;
  --accent:#7ba3dd; --accent-soft:rgba(123,163,221,.14); --accent-ink:#0d1b2e;
  --code-bg:#1e1a14; --inline-code-bg:#251f18;
}
:root[data-style="blueprint"]{
  --bg:#ffffff; --surface:#eef4f7; --surface-2:#e1edf1;
  --ink:#0d2530; --ink-2:#1f3947; --ink-muted:#5a7684; --ink-faint:#93a9b3;
  --line:#c9dbe2; --line-2:#b6cdd6;
  --accent:#0e7c86; --accent-soft:#e0f2f3; --accent-ink:#ffffff;
  --code-bg:#eef4f7; --inline-code-bg:#e1edf1;
  --font-chrome:"Space Grotesk",sans-serif; --font-heading:"Space Grotesk",sans-serif; --font-body:'Inter',sans-serif;
}
:root[data-style="blueprint"][data-theme="dark"]{
  --bg:#06121a; --surface:#0b1d26; --surface-2:#102934;
  --ink:#d9eef2; --ink-2:#aecdd4; --ink-muted:#5f838e; --ink-faint:#3a545c;
  --line:#123140; --line-2:#194354;
  --accent:#2fc4cf; --accent-soft:rgba(47,196,207,.14); --accent-ink:#031014;
  --code-bg:#0b1d26; --inline-code-bg:#102934;
}
:root[data-style="blueprint"]:not([data-theme="dark"]) body{
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:22px 22px;
}

/* ── Reset / base ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font-family:var(--font-chrome);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
code,pre,kbd{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-.015em}
svg.icon{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:inline-block;vertical-align:-0.15em}
a{color:inherit}

/* ── App shell ───────────────────────────────────────────────────── */
.app-topbar{
  height:var(--topbar-h);position:sticky;top:0;z-index:80;
  display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-5);
  background:var(--bg);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:var(--sp-2);font-weight:700;font-size:var(--text-md);letter-spacing:-.01em;color:var(--ink);text-decoration:none;flex-shrink:0}
.brand .icon{width:20px;height:20px;color:var(--accent)}
.crumb{font-size:var(--text-sm);color:var(--ink-faint);display:flex;align-items:center;gap:var(--sp-2);min-width:0;overflow:hidden}
.crumb a{color:var(--ink-muted);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb .sep{color:var(--line-2)}
.crumb .cur{color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.topbar-tools{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0}
.icon-btn{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--ink-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:.14s}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.zoom-controls{display:flex;align-items:center;gap:2px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);padding:2px}
.zoom-controls button{width:26px;height:26px;border:none;background:transparent;color:var(--ink-muted);cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:.14s}
.zoom-controls button:hover{background:var(--surface-2);color:var(--ink)}
.zoom-value{min-width:36px;text-align:center;font-size:var(--text-xs);color:var(--ink-faint);font-variant-numeric:tabular-nums}

.app-row{display:flex;min-height:calc(100vh - var(--topbar-h))}

/* ── Rail (vault tree) ──────────────────────────────────────────── */
.rail{
  width:var(--rail-w);min-width:var(--rail-w);flex-shrink:0;
  border-right:1px solid var(--line);padding:var(--sp-5) var(--sp-3);
  position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow-y:auto;
}
html[data-rail="collapsed"] .rail{display:none}
html[data-rail="collapsed"] main{max-width:none}

.cat{margin-bottom:var(--sp-1)}
.cat-head{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2);border-radius:var(--radius-sm);cursor:pointer;user-select:none;text-decoration:none;color:var(--ink-2)}
.cat-head:hover{background:var(--surface)}
.cat-head.current{background:var(--accent-soft)}
.cat-head.current .cat-title{color:var(--ink);font-weight:600}
.cat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--dot,var(--accent))}
.cat-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base);font-weight:500}
.cat-chevron{width:14px;height:14px;color:var(--ink-faint);transition:transform .15s}
.cat.open .cat-chevron{transform:rotate(90deg)}
.cat-notes{display:none;padding-left:var(--sp-6);margin-top:2px}
.cat.open .cat-notes{display:block}
.cat-note{display:block;padding:var(--sp-1) var(--sp-2);border-radius:5px;color:var(--ink-muted);text-decoration:none;font-size:var(--text-sm);line-height:1.5;transition:.12s}
.cat-note:hover{background:var(--surface);color:var(--ink)}
.cat-note.current{background:var(--accent-soft);color:var(--accent);font-weight:500}
.cat-empty{padding:var(--sp-1) var(--sp-2);font-size:var(--text-xs);color:var(--ink-faint);font-style:italic}

/* ── Вложенные папки внутри категории (любая глубина, не текстовая
   приписка — настоящая раскрывающаяся строка на каждом уровне) ──────── */
.cat-folder{margin-top:1px}
.cat-folder-head{display:flex;align-items:center;gap:6px;padding:var(--sp-1) var(--sp-2);border-radius:5px;cursor:pointer;user-select:none;color:var(--ink-muted)}
.cat-folder-head:hover{background:var(--surface);color:var(--ink)}
.cat-folder-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);font-weight:500}
.cat-folder .cat-chevron{width:12px;height:12px}
.cat-folder.open>.cat-folder-head .cat-chevron{transform:rotate(90deg)}
.cat-folder-body{display:none;padding-left:var(--sp-4);margin-top:1px;border-left:1px solid var(--line);margin-left:9px}
.cat-folder.open>.cat-folder-body{display:block}

/* ── Main content ────────────────────────────────────────────────── */
main{flex:1;min-width:0;padding:var(--sp-7) var(--sp-8) var(--sp-8);display:flex;justify-content:center}
/* Масштаб текста НЕ трогает layout-«хром» (сайдбары/шапку/настройки) —
   только чтение: шрифт крупнее -> колонка чтения ýже, шрифт мельче ->
   колонка шире (обратная зависимость, а не одинаковое сжатие обоих сразу,
   как было раньше через CSS zoom на main — тогда при уменьшении масштаба
   свободное место справа/слева никак не использовалось). --text-* здесь
   переопределены локально (custom properties наследуются, в отличие от
   rem — тот всегда считается от родного :root) — .toc-rail дублирует то
   же самое, т.к. он не вложен в .doc (отдельный сосед по .app-row). */
.doc, .toc-rail{
  --text-xs: calc(.75rem * var(--zoom));
  --text-sm: calc(.8125rem * var(--zoom));
  --text-base: calc(.875rem * var(--zoom));
  --text-md: calc(1rem * var(--zoom));
  --text-lg: calc(1.25rem * var(--zoom));
  --text-xl: calc(1.75rem * var(--zoom));
}
.doc{width:100%;max-width:calc(1500px / var(--zoom));font-size:calc(1em * var(--zoom))}
.doc-eyebrow{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.badge{box-sizing:border-box;display:inline-flex;align-items:center;gap:5px;height:24px;border-radius:20px;padding:0 11px;font-size:var(--text-xs);font-weight:500;border:1px solid var(--line-2);color:var(--ink-muted);background:var(--surface)}
.badge.cat-badge{color:var(--dot,var(--accent));border-color:color-mix(in srgb, var(--dot,var(--accent)) 35%, transparent);background:color-mix(in srgb, var(--dot,var(--accent)) 10%, transparent)}
.badge .icon{width:12px;height:12px}
.doc h1{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 var(--sp-6);text-wrap:balance;line-height:1.25}
.doc h2{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:700;color:var(--ink);margin:var(--sp-8) 0 var(--sp-3);scroll-margin-top:calc(var(--topbar-h) + 16px)}
.doc p{font-family:var(--font-body);margin:0 0 var(--sp-4);color:var(--ink-2)}
.doc p code, .doc li code{background:var(--inline-code-bg);border-radius:4px;padding:1.5px 6px;color:var(--ink);font-size:.88em}
.doc strong{color:var(--ink)}
.doc ul, .doc ol{font-family:var(--font-body);margin:0 0 var(--sp-4);padding-left:1.3em;color:var(--ink-2)}
.doc li{margin-bottom:var(--sp-1)}
.doc img{max-width:100%;height:auto;display:block;margin:var(--sp-4) auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.doc figure{margin:var(--sp-4) 0}
.doc figure img{margin:0 auto}
.doc figcaption{text-align:center;color:var(--ink-faint);font-size:var(--text-sm);margin-top:var(--sp-2)}
.manim-video{max-width:100%;display:block;margin:var(--sp-5) auto;border:1px solid var(--line);border-radius:var(--radius);background:#000}

/* ── Плитки категории/папки (главная + folder.html.jinja) — общие стили,
   чтобы клик по папке ВСЕГДА показывал её содержимое такими же плитками,
   на любой глубине, а не прыгал в произвольный файл. ── */
.home-hero{margin-bottom:var(--sp-8)}
.home-hero h1{font-size:var(--text-2xl);margin:0 0 var(--sp-2)}
.home-hero p{color:var(--ink-muted);max-width:520px;margin:0}
.tile-section{margin-bottom:var(--sp-7)}
.tile-section-title{font-family:var(--font-heading);font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);margin:0 0 var(--sp-4)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-4)}
.cat-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;transition:.15s}
.cat-card:hover{border-color:var(--dot,var(--accent));transform:translateY(-1px)}
.cat-card-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--dot,var(--accent)) 12%, transparent);color:var(--dot,var(--accent))}
.cat-card-icon .icon{width:18px;height:18px}
.cat-card-title{font-weight:600;font-size:var(--text-md);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-card-meta{font-size:var(--text-sm);color:var(--ink-faint)}
.cat-card.file-card .cat-card-icon{background:color-mix(in srgb, var(--ink-faint) 12%, transparent);color:var(--ink-muted)}
.tile-empty{color:var(--ink-faint);font-size:var(--text-sm)}

.doc pre{position:relative;background:var(--code-bg);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4);margin:var(--sp-4) 0 var(--sp-5);overflow-x:auto;font-size:calc(12.5px * var(--zoom));line-height:var(--code-line)}
.doc pre code{color:var(--ink-2);background:none;padding:0}
.cmt{color:var(--ink-faint);font-style:italic;background:color-mix(in srgb, var(--ink-faint) 12%, transparent);border-radius:3px;padding:0 3px}

.depth-badge{border:1px solid var(--line-2);color:var(--ink-muted)}
.depth-badge.depth-low{background:var(--surface);color:var(--ink-faint);border-color:var(--line-2)}
.depth-badge.depth-mid{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.depth-badge.depth-hard{background:color-mix(in srgb, var(--bad) 12%, transparent);color:var(--bad);border-color:transparent}

.tags{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:0 0 var(--sp-5)}
.tag{font-size:var(--text-xs);color:var(--ink-faint);background:var(--surface);border:1px solid var(--line-2);border-radius:5px;padding:2px 8px}

/* ── Prev/next pagination ────────────────────────────────────────── */
.prevnext{display:flex;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.prevnext a{flex:1;padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink-muted);text-decoration:none;font-size:var(--text-sm);transition:.14s}
.prevnext a:hover{border-color:var(--accent);color:var(--accent)}
.prevnext a.next{text-align:right;margin-left:auto}
.prevnext .pn-label{display:block;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:3px}
.prevnext .pn-title{display:block;color:var(--ink-2);font-weight:500}

/* ── F04 TOC (right rail) ────────────────────────────────────────── */
.toc-rail{width:200px;min-width:200px;padding:var(--sp-5) var(--sp-4);border-left:1px solid var(--line);position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow-y:auto;flex-shrink:0;font-size:var(--text-xs)}
.toc-title{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:var(--sp-3)}
.toc-link{display:block;padding:4px 0 4px 10px;border-left:2px solid var(--line);color:var(--ink-muted);text-decoration:none;line-height:1.4;transition:.12s}
.toc-link:hover{color:var(--ink)}
.toc-link.active{color:var(--ink);border-left-color:var(--accent);font-weight:500}
@media(max-width:1240px){.toc-rail{display:none}}

/* ── F03 Copy button ─────────────────────────────────────────────── */
.copy-btn{position:absolute;top:8px;right:8px;padding:2px 9px;border-radius:5px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink-muted);font-size:11px;cursor:pointer;opacity:0;transition:.15s;font-family:inherit}
.doc pre:hover .copy-btn{opacity:1}
.copy-btn:hover{border-color:var(--accent);color:var(--accent)}
.copy-btn.copied{color:var(--good);border-color:var(--good);opacity:1}

/* ── F02/F10 Command palette (Ctrl+K) ────────────────────────────── */
.pal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:900;display:none;align-items:flex-start;justify-content:center;padding-top:100px}
.pal-overlay.open{display:flex}
.pal{background:var(--bg);border:1px solid var(--line-2);border-radius:12px;width:560px;max-width:92vw;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden}
.pal-input{width:100%;padding:var(--sp-4) var(--sp-5);background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--ink);font-size:var(--text-md);outline:none;font-family:inherit}
.pal-results{max-height:360px;overflow-y:auto}
.pal-item{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-5);text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.pal-item.sel{background:var(--surface)}
.pal-item-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.pal-item-title{font-size:var(--text-base);color:var(--ink)}
.pal-item-snippet{font-size:var(--text-xs);color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-item-meta{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0;margin-left:var(--sp-3)}
.pal-item-cat{font-size:var(--text-xs);color:var(--ink-faint)}
.pal-empty{padding:var(--sp-4) var(--sp-5);color:var(--ink-faint);font-size:var(--text-base)}

/* ── F19 Bookmark / F34 Settings / F11 Notes trigger buttons ────── */
.bookmark-btn.active{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 50%, transparent);background:color-mix(in srgb, var(--warn) 8%, transparent)}
.notes-btn{}

/* ── F20 Focus mode ──────────────────────────────────────────────── */
html[data-focus] .app-topbar{display:none!important}
html[data-focus] .rail{display:none!important}
html[data-focus] .toc-rail{display:none!important}
html[data-focus] main{max-width:none;margin:0 auto}
.focus-pill{display:none;position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:100;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;background:var(--surface);border:1px solid var(--line-2);font-size:var(--text-xs);color:var(--ink-faint)}
.focus-pill kbd{background:var(--line);border-radius:3px;padding:1px 5px;font-family:inherit;font-size:10px}
html[data-focus] .focus-pill{display:flex}

/* ── F21/F40 Term tooltip + explain popup ────────────────────────── */
.mbl-term{border-bottom:1px dashed var(--accent);cursor:help;color:inherit}
.mbl-term[data-code]{cursor:pointer}
.term-tip{position:fixed;z-index:600;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:9px 13px;font-size:var(--text-sm);color:var(--ink-2);max-width:260px;box-shadow:0 4px 16px rgba(0,0,0,.2);pointer-events:none;opacity:0;transition:opacity .12s;line-height:1.55}
.term-tip.vis{opacity:1}
.term-tip strong{color:var(--accent);display:block;margin-bottom:3px}
.explain-popup{position:fixed;z-index:700;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:var(--sp-4);font-size:var(--text-sm);color:var(--ink-2);max-width:320px;box-shadow:0 8px 32px rgba(0,0,0,.25);display:none;line-height:1.6}
.explain-popup.open{display:block}
.explain-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)}
.explain-title{font-size:var(--text-base);font-weight:700;color:var(--accent)}
.explain-close{background:none;border:none;color:var(--ink-muted);cursor:pointer;font-size:16px;line-height:1;padding:0}

/* ── F33 Progress rings ──────────────────────────────────────────── */
.nav-ring{flex-shrink:0;width:14px;height:14px;margin-left:auto}
.nav-ring circle{fill:none;stroke-width:2.5;stroke-linecap:round}
.nav-ring .ring-bg{stroke:var(--line-2)}
.nav-ring .ring-fg{stroke:var(--good);transition:stroke-dasharray .4s}
.nav-ring .ring-fg-again{stroke:var(--warn);transition:stroke-dasharray .4s}

/* ── F34/F35 Settings panel ──────────────────────────────────────── */
.settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:399;display:none}
.settings-overlay.open{display:block}
.settings-panel{position:fixed;left:0;top:0;width:290px;height:100vh;background:var(--surface);border-right:1px solid var(--line-2);z-index:400;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .2s;box-shadow:4px 0 24px rgba(0,0,0,.2)}
.settings-panel.open{transform:translateX(0)}
.settings-head{padding:var(--sp-4);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.settings-head h3{font-size:var(--text-base);font-weight:700;color:var(--ink)}
.settings-close{background:none;border:none;color:var(--ink-muted);cursor:pointer;font-size:17px;line-height:1}
.settings-body{flex:1;overflow-y:auto;padding:var(--sp-4)}
.set-section{margin-bottom:var(--sp-5)}
.set-title{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:var(--sp-3)}
.set-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3);gap:var(--sp-3)}
.set-row label{font-size:var(--text-sm);color:var(--ink-muted)}
.tab{border:1px solid var(--line-2);background:var(--bg);color:var(--ink-muted);padding:5px 12px;border-radius:20px;font-size:12.5px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;transition:.14s}

/* ── Аккаунт / синхронизация прогресса — тот же паттерн выезжающей
   панели, что settings-panel, только справа (как notes-drawer), чтобы
   визуально не путать с настройками оформления. Внутренняя разметка
   (.set-section/.set-title/.set-row) переиспользуется как есть. ────── */
.account-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:399;display:none}
.account-overlay.open{display:block}
.account-panel{position:fixed;right:0;top:0;width:300px;height:100vh;background:var(--surface);border-left:1px solid var(--line-2);z-index:400;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s;box-shadow:-4px 0 24px rgba(0,0,0,.2)}
.account-panel.open{transform:translateX(0)}
.acc-input{width:100%;padding:8px 11px;border:1px solid var(--line-2);border-radius:6px;background:var(--bg);color:var(--ink);font-size:var(--text-sm);font-family:inherit;margin-bottom:var(--sp-2)}
.acc-submit{width:100%;padding:8px 11px;border:none;border-radius:6px;background:var(--accent);color:var(--accent-ink);font-size:var(--text-sm);font-weight:500;cursor:pointer;font-family:inherit}
.acc-submit:hover{filter:brightness(1.08)}
.acc-switch{background:none;border:none;color:var(--accent);cursor:pointer;font-size:var(--text-xs);padding:0;font-family:inherit;text-decoration:underline}
.acc-error{color:var(--bad);font-size:var(--text-xs);margin:6px 0 0}
.acc-status{font-size:var(--text-sm);color:var(--ink-2);margin-bottom:var(--sp-3)}
.acc-logout{border:1px solid var(--line-2);background:var(--bg);color:var(--ink-muted);padding:6px 14px;border-radius:6px;font-size:var(--text-sm);cursor:pointer;font-family:inherit}
.acc-logout:hover{border-color:var(--bad);color:var(--bad)}
.account-btn.logged-in{color:var(--accent)}
.vault-badge{color:#c17a1f;border-color:color-mix(in srgb, #c17a1f 35%, transparent);background:color-mix(in srgb, #c17a1f 10%, transparent);margin-left:var(--sp-3);flex-shrink:0;white-space:nowrap}
.icon-btn.vault-btn[hidden]{display:none}
.tab:hover{border-color:var(--accent);color:var(--accent)}
.tab.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tab .icon{width:13px;height:13px}

/* ── F11 Margin notes drawer ─────────────────────────────────────── */
.notes-drawer{position:fixed;right:0;top:0;width:300px;height:100vh;background:var(--surface);border-left:1px solid var(--line-2);z-index:400;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s;box-shadow:-4px 0 24px rgba(0,0,0,.2)}
.notes-drawer.open{transform:translateX(0)}
.notes-head{padding:var(--sp-4);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.notes-head h3{font-size:var(--text-base);font-weight:700;color:var(--ink)}
.notes-meta{display:flex;align-items:center;gap:var(--sp-2)}
.notes-close{background:none;border:none;color:var(--ink-muted);cursor:pointer;font-size:17px;line-height:1}
.notes-kbd{font-size:10px;color:var(--ink-faint);background:var(--line);border-radius:3px;padding:1px 5px}
.notes-body{flex:1;padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.notes-textarea{flex:1;background:var(--bg);border:1px solid var(--line-2);border-radius:6px;color:var(--ink-2);font-size:var(--text-sm);line-height:1.6;padding:var(--sp-3);resize:none;font-family:inherit;outline:none}
.notes-textarea:focus{border-color:var(--accent)}
.notes-footer{display:flex;justify-content:flex-end}
.notes-save{background:var(--accent);border:none;color:var(--accent-ink);font-size:var(--text-sm);padding:5px 14px;border-radius:5px;cursor:pointer;font-family:inherit}
.notes-saved-msg{font-size:var(--text-xs);color:var(--good);display:none;margin-right:auto;align-self:center}

/* ── Keybind hints ───────────────────────────────────────────────── */
.kbd-hints{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:50;display:flex;gap:10px;opacity:0;transition:opacity .3s;pointer-events:none}
.kbd-hints.vis{opacity:1}
.kbd-hint{background:var(--surface);border:1px solid var(--line-2);border-radius:6px;padding:3px 9px;font-size:10.5px;color:var(--ink-faint)}
.kbd-hint kbd{color:var(--ink-muted)}

/* ── Playground (runnable code, proxied to play.golang.org) ───────── */
.playground{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:var(--sp-4) 0 var(--sp-5);background:var(--code-bg)}
.pg-toolbar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);background:var(--surface)}
.pg-run{background:var(--accent);color:var(--accent-ink);border:none;padding:5px 14px;border-radius:6px;font-size:var(--text-sm);cursor:pointer;font-family:inherit;font-weight:500}
.pg-run:hover{filter:brightness(1.08)}
.pg-run:disabled{opacity:.6;cursor:default}
.pg-reset{background:none;border:1px solid var(--line-2);color:var(--ink-muted);padding:4px 12px;border-radius:6px;font-size:var(--text-sm);cursor:pointer;font-family:inherit}
.pg-reset:hover{border-color:var(--accent);color:var(--accent)}
.pg-reset.dirty{border-color:var(--warn);color:var(--warn)}
.pg-reset.dirty::before{content:"● ";font-size:8px;vertical-align:2px}
.pg-hint{margin-left:auto;font-size:var(--text-xs);color:var(--ink-faint)}
.pg-code{display:block;width:100%;padding:var(--sp-3);background:var(--code-bg);border:none;color:var(--ink-2);font-family:"JetBrains Mono",monospace;font-size:calc(12.5px * var(--zoom));line-height:var(--code-line);resize:none;outline:none;tab-size:4;overflow:hidden}
.pg-output{border-top:1px solid var(--line);padding:var(--sp-3);font-family:"JetBrains Mono",monospace;font-size:calc(12.5px * var(--zoom));line-height:var(--code-line);white-space:pre-wrap;max-height:280px;overflow-y:auto}
.pg-suggest{display:flex;flex-wrap:wrap;gap:4px;padding:6px var(--sp-3);border-top:1px solid var(--line);background:var(--surface)}
.pg-suggest-chip{font-family:"JetBrains Mono",monospace;font-size:var(--text-xs);border:1px solid var(--line-2);background:var(--code-bg);color:var(--ink-muted);border-radius:4px;padding:2px 8px;cursor:pointer}
.pg-suggest-chip:hover{border-color:var(--accent);color:var(--accent)}
.pg-suggest-chip.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pg-output.err{color:var(--bad)}
.pg-output.ok{color:var(--ink-2)}
.pg-output.race{color:var(--warn);background:color-mix(in srgb, var(--warn) 8%, transparent)}

/* ── F32 Diff — сплит до/после, подсвечены только отличия ───────── */
.diffsplit{display:flex;flex-direction:column;gap:var(--sp-3);margin:var(--sp-4) 0 var(--sp-5)}
.diffsplit-col{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.diffsplit-label{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);background:var(--surface);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line)}
.diffsplit-col pre{margin:0;padding:var(--sp-2) 0;background:var(--code-bg);font-family:"JetBrains Mono",monospace;font-size:calc(12px * var(--zoom));line-height:var(--code-line);overflow-x:auto}
.diffsplit-col code{display:block}
.diff-line{display:block;width:max-content;min-width:100%;box-sizing:border-box;padding:0 var(--sp-3);white-space:pre;min-height:calc(var(--code-line) * 1em)}
.diffsplit-col.before .diff-line.changed{background:color-mix(in srgb, var(--bad) 14%, transparent)}
.diffsplit-col.after .diff-line.changed{background:color-mix(in srgb, var(--good) 14%, transparent)}

/* ── F38 Compare block ───────────────────────────────────────────── */
.compare{display:flex;flex-direction:column;gap:var(--sp-3);margin:var(--sp-4) 0 var(--sp-5)}
.compare-col{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare-label{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);background:var(--surface);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line)}
.compare-col pre{margin:0;padding:var(--sp-3);background:var(--code-bg);font-family:"JetBrains Mono",monospace;font-size:calc(12px * var(--zoom));line-height:var(--code-line);overflow-x:auto}

/* ── F25/F35 Знаю / Повторю + интервальные повторения ───────────── */
.sr-block{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3)}
.sr-prompt{font-size:var(--text-sm);color:var(--ink-muted)}
.sr-buttons{display:flex;gap:var(--sp-2)}
.sr-btn{border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-size:var(--text-sm);padding:6px 16px;border-radius:20px;cursor:pointer;font-family:inherit;transition:.14s}
.sr-btn:hover{border-color:var(--accent)}
.sr-btn.again:hover{border-color:var(--bad);color:var(--bad)}
.sr-btn.hard:hover{border-color:var(--warn);color:var(--warn)}
.sr-btn.good:hover{border-color:var(--accent);color:var(--accent)}
.sr-btn.easy:hover{border-color:var(--good);color:var(--good)}
.sr-status{font-size:var(--text-xs);color:var(--ink-faint);width:100%}
.sr-status.mastered{color:var(--warn);font-weight:600;display:inline-flex;align-items:center;gap:6px}
@media (prefers-reduced-motion: no-preference){
  .sr-status.mastered .icon{animation:sr-glow 2.2s ease-in-out infinite}
}
.sr-status.mastered .icon{filter:drop-shadow(0 0 4px var(--warn))}
@keyframes sr-glow{0%,100%{filter:drop-shadow(0 0 2px var(--warn))}50%{filter:drop-shadow(0 0 8px var(--warn))}}
.cat-note{position:relative}
.cat-note.due::after{content:"";position:absolute;right:7px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--warn)}
.cat-note.unread::after{content:"";position:absolute;right:7px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--ink-faint)}
.cat-note .mastered-star{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:11px;height:11px;color:var(--warn);filter:drop-shadow(0 0 3px var(--warn))}
@media (prefers-reduced-motion: no-preference){
  .cat-note .mastered-star{animation:sr-glow 2.2s ease-in-out infinite}
}
.cat-note.mastered.due::after{content:none}

/* ── Feedback (оценка качества страницы) ────────────────────────── */
.feedback-block{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.feedback-toggle{border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-size:var(--text-sm);padding:6px 16px;border-radius:20px;cursor:pointer;font-family:inherit;transition:.14s}
.feedback-toggle:hover{border-color:var(--accent)}
.feedback-form{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.feedback-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.feedback-label{font-size:var(--text-sm);color:var(--ink-muted)}
.feedback-scale{display:flex;gap:6px}
.feedback-dot{width:28px;height:28px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-faint);border-radius:50%;cursor:pointer;font-family:inherit;font-size:var(--text-xs);transition:.14s}
.feedback-dot:hover{border-color:var(--accent);color:var(--ink-2)}
.feedback-dot.selected{border-color:var(--accent);background:var(--accent);color:var(--bg)}
.feedback-comment{width:100%;min-height:60px;resize:vertical;font-family:inherit;font-size:var(--text-sm);color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);padding:var(--sp-3)}
.feedback-actions{display:flex;align-items:center;gap:var(--sp-3)}
.feedback-submit{border:1px solid var(--accent);background:var(--accent);color:var(--bg);font-size:var(--text-sm);padding:6px 16px;border-radius:20px;cursor:pointer;font-family:inherit;transition:.14s}
.feedback-submit:hover{opacity:.85}
.feedback-submit:disabled{opacity:.5;cursor:default}
.feedback-status{font-size:var(--text-xs);color:var(--ink-faint)}
.feedback-thanks{font-size:var(--text-sm);color:var(--good)}

/* ── Checklist ───────────────────────────────────────────────────── */
.checklist{margin:var(--sp-6) 0 0;padding-top:var(--sp-5);border-top:1px solid var(--line)}
.checklist-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}
.checklist-title{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint)}
.checklist-count{font-size:var(--text-xs);color:var(--ink-faint);font-variant-numeric:tabular-nums}
.check-item{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-2) 0;cursor:pointer}
.check-box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-2);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;color:transparent;transition:.14s}
.check-item.done .check-box{background:var(--good);border-color:var(--good);color:#fff}
.check-item.done .check-box .icon{width:11px;height:11px;stroke-width:3}
.check-text{font-size:var(--text-base);color:var(--ink-2);line-height:1.55}
.check-item.done .check-text{color:var(--ink-faint);text-decoration:line-through}

/* ── Responsive ──────────────────────────────────────────────────── */
@media(max-width:860px){
  /* Сайдбар на мобиле — не колонка рядом со статьёй (не влезает), а
     выезжающая панель поверх контента: скрыта по умолчанию (translateX),
     открывается тем же .rail-toggle, что и десктопный collapse/expand
     (см. initRail в mbl.js — там разная логика по ширине экрана). */
  .rail{
    position:fixed;left:0;top:var(--topbar-h);bottom:0;z-index:75;
    width:min(85vw,320px);min-width:0;
    background:var(--bg);box-shadow:2px 0 24px rgba(0,0,0,.25);
    transform:translateX(-100%);transition:transform .2s ease;
  }
  .rail.mobile-open{transform:translateX(0)}
  .rail-backdrop{
    position:fixed;left:0;right:0;top:var(--topbar-h);bottom:0;z-index:74;
    background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .rail-backdrop.show{opacity:1;pointer-events:auto}
  main{padding:var(--sp-6) var(--sp-4)}
  .pg-toolbar{flex-wrap:wrap}
  .prevnext{flex-direction:column}
  .settings-panel,.notes-drawer,.account-panel{max-width:90vw}
}
@media(max-width:520px){
  .app-topbar{padding:0 var(--sp-3);gap:var(--sp-2)}
  .crumb{display:none}
  .vault-badge{display:none}
  main{padding:var(--sp-5) var(--sp-4)}
  .doc-eyebrow{flex-wrap:wrap}
  .home-hero h1{font-size:var(--text-xl)}
}