:root{
    --bg:#f4f6f2; --card:#ffffff; --ink:#18201f; --muted:#5f6d6a;
    --accent:#0d7c72; --accent-soft:#e6f1ee; --line:#dde4e0;
    --tag:#e7ece8; --tag-ink:#2f3d3a; --warn:#fff7ed; --warn-ink:#c2410c;
    --code-bg:#101615; --code-ink:#e6eeec; --green:#d1fae5; --green-ink:#065f46;
  }
  html[data-theme="dark"]{
    --bg:#101615; --card:#161e1d; --ink:#e6eeec; --muted:#9fb0ac;
    --accent:#4fd6c4; --accent-soft:#161e1d; --line:#27393a;
    --tag:#1f2c2c; --tag-ink:#cfe0dc; --warn:#422006; --warn-ink:#fdba74;
    --code-bg:#0a1110; --code-ink:#e6eeec; --green:#052e16; --green-ink:#6ee7b7;
  }
  html[data-theme="dark"] body{color-scheme:dark}
  html[data-theme="dark"] header.hero{background:linear-gradient(135deg,#101615,#0a4a44)}
  html[data-theme="dark"] th{background:#101615}
  html[data-theme="dark"] tr:nth-child(even) td{background:#161e1d}
  html[data-theme="dark"] code{background:#0c1312}
  html[data-theme="dark"] .formula,html[data-theme="dark"] .ascii{background:#161e1d}
  .theme-toggle{position:fixed; right:18px; top:18px; z-index:50; width:44px; height:44px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:1.15rem; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.12); transition:transform .15s, border-color .15s}
  .theme-toggle:hover{border-color:var(--accent); transform:scale(1.06)}
  @media print{.theme-toggle{display:none}}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    line-height:1.65; font-size:16px;
  }
  .wrap{max-width:960px; margin:0 auto; padding:32px 20px 90px}
  header.hero{background:linear-gradient(135deg,#0a4a44,#0d7c72); color:#fff; border-radius:16px; padding:36px 32px; margin-bottom:28px}
  header.hero h1{margin:0 0 10px; font-size:1.6rem; line-height:1.25}
  header.hero .sub{opacity:.92; font-size:.97rem}
  header.hero .meta{margin-top:14px; display:flex; flex-wrap:wrap; gap:8px}
  .chip{background:rgba(255,255,255,.16); padding:4px 12px; border-radius:999px; font-size:.82rem}

  h2{font-size:1.35rem; margin:2.2em 0 .6em; padding-bottom:.35em; border-bottom:2px solid var(--line); scroll-margin-top:16px}
  h3{font-size:1.1rem; margin:1.6em 0 .5em; color:#111827; scroll-margin-top:16px}
  p{margin:.7em 0}
  a{color:var(--accent); text-decoration:none}
  a:hover{text-decoration:underline}

  .toc{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px 26px; margin-bottom:30px}
  .toc h2{border:none; margin-top:0; padding-bottom:0}
  .toc ol{margin:.4em 0 0; padding-left:1.4em}
  .toc li{margin:.28em 0}
  .toc a{color:var(--ink)}

  .ts{display:inline-block; background:var(--tag); color:var(--tag-ink); font-weight:600; font-size:.78rem; padding:1px 8px; border-radius:6px; font-variant-numeric:tabular-nums; margin-right:6px; white-space:nowrap}
  .card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 24px; margin:18px 0}
  .note{border-left:4px solid var(--accent); background:var(--accent-soft); padding:12px 16px; border-radius:0 8px 8px 0; margin:16px 0}
  .note .lbl{font-weight:700; color:var(--accent); font-size:.85rem}
  .warn{border-left:4px solid #f59e0b; background:var(--warn); padding:12px 16px; border-radius:0 8px 8px 0; margin:16px 0}
  .warn .lbl{font-weight:700; color:var(--warn-ink); font-size:.85rem}
  .good{border-left:4px solid #10b981; background:var(--green); padding:12px 16px; border-radius:0 8px 8px 0; margin:16px 0}
  .good .lbl{font-weight:700; color:var(--green-ink); font-size:.85rem}

  table{border-collapse:collapse; width:100%; margin:16px 0; font-size:.92rem; background:var(--card)}
  th,td{border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top}
  th{background:#f1f5f9; font-weight:600}
  tr:nth-child(even) td{background:#fafafa}

  code{background:#eef2f7; padding:1px 6px; border-radius:4px; font-family:"SF Mono",Menlo,Consolas,monospace; font-size:.86em}
  pre{background:var(--code-bg); color:var(--code-ink); padding:16px 18px; border-radius:10px; overflow-x:auto; line-height:1.5; font-size:.85rem}
  pre code{background:none; color:inherit; padding:0; font-size:.85rem}

  .formula{background:#f8fafc; border:1px solid var(--line); padding:12px 16px; border-radius:8px; text-align:center; margin:16px 0; font-size:1.15rem; overflow-x:auto}
  .ascii{font-family:"SF Mono",Menlo,Consolas,monospace; font-size:.82rem; line-height:1.35; background:#f8fafc; border:1px solid var(--line); padding:14px 16px; border-radius:8px; overflow-x:auto; white-space:pre; margin:14px 0}

  .timeline{position:relative; margin:18px 0 18px 8px; padding-left:24px; border-left:2px solid var(--line)}
  .timeline .step{position:relative; margin:14px 0}
  .timeline .step::before{content:""; position:absolute; left:-31px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--accent); border:3px solid var(--accent-soft)}

  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  @media(max-width:680px){.grid2{grid-template-columns:1fr} header.hero{padding:26px 20px} .wrap{padding:16px 12px 60px}}

  footer{margin-top:50px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem}
  .toplink{position:fixed; right:18px; bottom:18px; background:var(--accent); color:#fff; border-radius:999px; padding:10px 16px; font-size:.85rem; box-shadow:0 4px 14px rgba(37,99,235,.35); opacity:0; transition:opacity .2s; pointer-events:none}
  .toplink.show{opacity:1; pointer-events:auto}
  @media print{.toplink{display:none} .card,.toc{box-shadow:none} body{background:#fff} header.hero{-webkit-print-color-adjust:exact; print-color-adjust:exact}}

/* ===== Redesign (unified look with navigator) ===== */
:root{
  --bg:#eef2f7;
  --shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 10px 30px -12px rgba(15,23,42,.25);
  --shadow-lg:0 24px 60px -24px rgba(15,23,42,.4);
}
html[data-theme="dark"]{
  --bg:#0c1312; --card:#151f30; --line:#263246; --muted:#8b9bb4;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 12px 30px -12px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,.7);
}
html[data-theme="dark"] header.hero{background:radial-gradient(1200px 400px at 20% -10%,rgba(96,165,250,.35),transparent),linear-gradient(135deg,#0c1312,#0a4a44)}
html[data-theme="dark"] h3{color:var(--ink)}
header.hero{background:radial-gradient(1200px 400px at 20% -10%,rgba(255,255,255,.28),transparent),linear-gradient(135deg,#0a4a44,#0d7c72 60%,#7c3aed); border-radius:22px; padding:44px 40px; margin-bottom:32px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden}
header.hero::after{content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%)}
header.hero h1{font-size:1.85rem; letter-spacing:-.02em; font-weight:800}
header.hero .sub{font-size:1rem}
.chip{background:rgba(255,255,255,.16); backdrop-filter:blur(4px); padding:5px 13px; border:1px solid rgba(255,255,255,.14)}
h2{font-size:1.3rem; letter-spacing:-.01em}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); transition:transform .16s, box-shadow .16s, border-color .16s}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#c7dbff}
.toc{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm)}
.note{border-radius:0 12px 12px 0}
.warn{border-radius:0 12px 12px 0}
.good{border-radius:0 12px 12px 0}
table{border-radius:12px; box-shadow:var(--shadow-sm)}
pre{border-radius:12px; box-shadow:var(--shadow-md)}
.formula{border-radius:12px}
.ascii{border-radius:12px}
.ts{border-radius:999px}
.toplink{box-shadow:var(--shadow-md)}
.viz{margin:20px 0; text-align:center}
.viz svg{width:100%; height:auto; display:block; border-radius:14px; box-shadow:var(--shadow-md)}
.viz figcaption{margin-top:10px; color:var(--muted); font-size:.86rem}
@media(max-width:680px){header.hero{padding:30px 22px; border-radius:18px}}
@media print{.card,.toc,table,pre,.toplink{box-shadow:none} body{background:#fff}}

/* ===== algorithm players ===== */
.algo{background:#141a24; border-radius:14px; box-shadow:var(--shadow-md); padding:18px; margin:20px 0}
.algo .stage{position:relative; margin:0 auto}
.algo .bar{position:absolute; bottom:0; background:#3f5a80; border-radius:7px 7px 3px 3px; transition:left .35s ease, background .2s ease, height .3s ease; display:flex; justify-content:center}
.algo .bar .v{position:absolute; bottom:-22px; color:#c2cdde; font:600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.algo .bar.cmp{background:#ffff00} .algo .bar.cmp .v{color:#ffff00}
.algo .bar.swap{background:#fc6255} .algo .bar.swap .v{color:#fc6255}
.algo .bar.done{background:#83c167} .algo .bar.done .v{color:#83c167}
.algo .ctl{display:flex; align-items:center; gap:12px; margin-top:40px}
.algo .ctl input[type=range]{flex:1; accent-color:#58c4dd}
.algo .ctl button{background:rgba(88,196,221,.15); color:#58c4dd; border:1px solid #2b3a52; border-radius:8px; padding:7px 15px; font:700 .9rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; cursor:pointer}
.algo .ctl button:hover{background:rgba(88,196,221,.3)}
.algo .lbl{color:#9aa4b2; font:500 .8rem/1 ui-monospace,monospace; min-width:62px; text-align:right}
.algo .bsrow{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.algo .bscell{width:56px; height:52px; border-radius:8px; background:#1e2836; border:1px solid #33415a; color:#dfe7f1; display:flex; align-items:center; justify-content:center; font-weight:700; transition:background .2s, border-color .2s, color .2s}
.algo .bscell.L{background:#83c167; color:#141a24}
.algo .bscell.R{background:#ff8c1a; color:#141a24}
.algo .bscell.mid{background:#ffff00; color:#141a24}
.algo .bscell.found{background:#83c167; color:#141a24; box-shadow:0 0 0 3px rgba(131,193,103,.45)}
.algo .bslbl{color:#9aa4b2; text-align:center; margin:16px 0 0; font-size:13px; min-height:20px}
.algocap{color:var(--muted); font-size:.86rem; margin:-8px 0 22px}
@media print{.algo{box-shadow:none}}

/* ===== extra algorithm players ===== */
.albl{color:#c2cdde; font-weight:700; font-size:.85rem; margin:16px 0 6px}
.algo .bscell.small{width:42px; height:44px; font-size:13px}
.algo .slopewrap{max-width:760px; margin:0 auto}
.back{display:inline-flex; align-items:center; gap:6px; margin:0 0 14px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--muted); font-size:.85rem; font-weight:600; text-decoration:none}
  .back:hover{color:var(--accent); border-color:var(--accent); text-decoration:none}
  a.ts{text-decoration:none; cursor:pointer; transition:filter .15s, transform .1s}
  a.ts::before{content:"▶\00a0"; font-size:.8em}
  a.ts:hover{filter:brightness(.9); text-decoration:none; transform:translateY(-1px)}
  @media print{.back{display:none} a.ts::before{content:""}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
html[data-theme]{
  --bg:#f4f6f2; --card:#fffdf8; --ink:#1c1b19; --muted:#6f6a61; --faint:#a19b90;
  --accent:#0d7c72; --accent-soft:#e6f1ee; --line:#e3ded3;
  --tag:#ece7dc; --tag-ink:#3a362f; --warn:#faf1e1; --warn-ink:#94560c; --green:#ebf3ea; --green-ink:#2a6038;
  --code-bg:#1d1c1a; --code-ink:#ebe7df;
  --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
  --serif:"PT Serif",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","PT Mono",Menlo,Consolas,monospace;
  scroll-behavior:smooth;
}
html[data-theme="dark"]{
  --bg:#141413; --card:#1b1b19; --ink:#e9e6df; --muted:#a29d93; --faint:#6f6b64;
  --accent:#4fd6c4; --accent-soft:#16282a; --line:#2e2d2a;
  --tag:#26251f; --tag-ink:#d9d4c9; --warn:#272116; --warn-ink:#e3b46a; --green:#17221a; --green-ink:#93cfa2;
  --code-bg:#0e0e0d; --code-ink:#ebe7df;
  color-scheme:dark;
}
html[data-theme] body{background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased}
html[data-theme] .wrap{max-width:820px; padding:28px 24px 80px}

/* верхняя строка */
html[data-theme] .top{display:flex; justify-content:space-between; align-items:center; gap:12px; font-family:var(--mono); font-size:.8rem}
html[data-theme] .back{display:inline; margin:0; padding:0; border:0; background:none; color:var(--muted); font:inherit}
html[data-theme] .back:hover{color:var(--ink); text-decoration:none}
html[data-theme] .theme-toggle{position:static; width:auto; height:auto; font:inherit; font-size:.8rem; color:var(--muted); background:none; border:1px solid var(--line); border-radius:6px; padding:4px 10px; box-shadow:none; cursor:pointer; transform:none}
html[data-theme] .theme-toggle:hover{color:var(--ink); border-color:var(--muted); transform:none}

/* шапка */
html[data-theme] header.hero{background:none; color:var(--ink); border-radius:0; box-shadow:none; padding:52px 0 26px; margin:0 0 8px; border-bottom:1px solid var(--line); overflow:visible}
html[data-theme] header.hero::after{display:none}
html[data-theme] header.hero h1{font-family:var(--serif); font-weight:700; font-size:clamp(1.9rem,5vw,2.6rem); line-height:1.12; letter-spacing:-.01em; margin:0 0 14px}
html[data-theme] header.hero .sub{font-family:var(--serif); font-size:1.12rem; line-height:1.55; opacity:1; max-width:38em}
html[data-theme] header.hero .meta{gap:0; margin-top:16px}
html[data-theme] .chip{background:none; backdrop-filter:none; border:0; border-radius:0; padding:0; font-family:var(--mono); font-size:.78rem; color:var(--muted)}
html[data-theme] .chip + .chip::before{content:"·"; margin:0 .7em; color:var(--faint)}

/* оглавление */
html[data-theme] .toc{background:none; border:0; border-radius:0; box-shadow:none; padding:20px 0 24px; margin:0 0 12px; border-bottom:1px solid var(--line)}
html[data-theme] .toc h2{font-family:var(--mono); font-size:.78rem; font-weight:500; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; margin:0 0 6px; padding:0; border:0}
html[data-theme] .toc ol{columns:2 280px; column-gap:32px; padding-left:1.5em; margin:0}
html[data-theme] .toc li{font-family:var(--serif); break-inside:avoid; margin:0 0 .4em; color:var(--muted)}
html[data-theme] .toc a{color:var(--ink)}
html[data-theme] .toc a:hover{color:var(--accent); text-decoration:underline; text-underline-offset:3px}

/* текст */
html[data-theme] h2{font-family:var(--serif); font-size:1.7rem; font-weight:700; line-height:1.25; letter-spacing:-.005em; margin:2.4em 0 .6em; padding:0; border:0; scroll-margin-top:20px}
html[data-theme] h3{font-family:var(--serif); font-size:1.25rem; font-weight:700; color:var(--ink); margin:1.8em 0 .5em; scroll-margin-top:20px}
html[data-theme] .wrap > p, html[data-theme] .wrap > ul, html[data-theme] .wrap > ol, html[data-theme] .card p,
html[data-theme] .card li{font-family:var(--serif); font-size:1.08rem; line-height:1.68}
html[data-theme] .note, html[data-theme] .warn, html[data-theme] .good{font-family:var(--serif); font-size:1.04rem}
html[data-theme] a{color:var(--accent)}
html[data-theme] a:hover{text-decoration:underline; text-underline-offset:3px}
html[data-theme] a.ts{display:inline-block; vertical-align:.2em; margin:0 0 0 .5em; padding:2px 7px; border-radius:4px; background:var(--tag); color:var(--tag-ink); font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:0; transition:background-color .15s, color .15s}
html[data-theme] a.ts::before{content:"▶\00a0"; font-size:.85em}
html[data-theme] a.ts:hover{background:var(--ink); color:var(--bg); text-decoration:none; filter:none; transform:none}
html[data-theme] p > a.ts:first-child{margin:0 .4em 0 0; vertical-align:.1em}

/* блоки */
html[data-theme] .card{background:var(--card); border:1px solid var(--line); border-radius:6px; box-shadow:none; transform:none}
html[data-theme] .card:hover{transform:none; box-shadow:none; border-color:var(--line)}
html[data-theme] .note, html[data-theme] .warn, html[data-theme] .good{border-radius:0; border-left-width:2px; padding:12px 18px}
html[data-theme] .note{border-left-color:var(--accent); background:var(--accent-soft)}
html[data-theme] .warn{border-left-color:var(--warn-ink); background:var(--warn)}
html[data-theme] .good{border-left-color:var(--green-ink); background:var(--green)}
html[data-theme] .note .lbl, html[data-theme] .warn .lbl, html[data-theme] .good .lbl{font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase}
html[data-theme] table{background:none; border-radius:0; box-shadow:none; font-size:.92rem}
html[data-theme] th, html[data-theme] td{border:0; border-bottom:1px solid var(--line); padding:9px 12px}
html[data-theme] th{background:none; color:var(--muted); font-weight:600; font-size:.82rem; border-bottom:1px solid var(--ink)}
html[data-theme] tr:nth-child(even) td{background:none}
html[data-theme] code{background:var(--tag); color:var(--ink); border-radius:3px; font-family:var(--mono)}
html[data-theme] pre{background:var(--code-bg); color:var(--code-ink); border-radius:6px; box-shadow:none; font-family:var(--mono)}
html[data-theme] pre code{background:none; color:inherit}
html[data-theme] .formula, html[data-theme] .ascii{background:var(--card); border:1px solid var(--line); border-radius:6px}
html[data-theme] .viz svg{border-radius:6px; box-shadow:none}
html[data-theme] .viz figcaption, html[data-theme] .algocap{font-size:.85rem; color:var(--muted)}
html[data-theme] .algo{border-radius:6px; box-shadow:none}
html[data-theme] .timeline{border-left:1px solid var(--line)}
html[data-theme] .timeline .step::before{width:9px; height:9px; left:-29px; top:8px; border:0; background:var(--ink)}

html[data-theme] footer{font-size:.82rem; color:var(--muted); border-top:1px solid var(--line); margin-top:56px; padding-top:16px}
html[data-theme] .toplink{background:var(--ink); color:var(--bg); border:0; border-radius:6px; box-shadow:none; padding:8px 14px; font-family:var(--sans); font-size:.82rem; cursor:pointer; transform:translateY(8px); transition:opacity .2s, transform .2s}
html[data-theme] .toplink.show{transform:none}

/* схемы: палитра 3B1B → цвета темы (CSS перекрывает атрибуты fill/stroke) */
html[data-theme]{
  --f-bg:var(--card); --f-node:#f1ece2; --f-node2:#ebe5d9; --f-node3:#dde7ef; --f-edge:#c9c1b2; --f-axis:#8f887c;
  --f-text:var(--ink); --f-text2:#4a463e; --f-muted:var(--muted); --f-on:#1c1b19;
  --f-blue:#1b7aa0; --f-blue-bg:#a8d4e6; --f-green:#3b8530; --f-green-bg:#bfdfae;
  --f-orange:#c0610a; --f-orange-bg:#f1bf88; --f-yellow:#a07f00; --f-yellow-bg:#ecd568;
  --f-red:#bf3a2b; --f-red-bg:#ecb0a6; --f-purple:#7a4cc6; --f-purple-bg:#d0bdf0;
}
html[data-theme="dark"]{
  --f-bg:var(--card); --f-node:#262521; --f-node2:#22211e; --f-node3:#23384d; --f-edge:#46433d; --f-axis:#8a857b;
  --f-text:var(--ink); --f-text2:#cfcac0; --f-muted:var(--muted); --f-on:#141413;
  --f-blue:#58c4dd; --f-blue-bg:#58c4dd; --f-green:#83c167; --f-green-bg:#83c167;
  --f-orange:#ff8c1a; --f-orange-bg:#ff8c1a; --f-yellow:#f2e04a; --f-yellow-bg:#f2e04a;
  --f-red:#fc6255; --f-red-bg:#fc6255; --f-purple:#c78bff; --f-purple-bg:#c78bff;
}
html[data-theme] svg :not(text)[fill="#141A24"]{fill:var(--f-bg)}
html[data-theme] svg text[fill="#141A24"]{fill:var(--f-on)}
html[data-theme] svg [stroke="#141A24"]{stroke:var(--f-bg)}
html[data-theme] svg :not(text)[fill="#141a24"]{fill:var(--f-bg)}
html[data-theme] svg text[fill="#141a24"]{fill:var(--f-on)}
html[data-theme] svg [stroke="#141a24"]{stroke:var(--f-bg)}
html[data-theme] svg :not(text)[fill="#1E2836"]{fill:var(--f-node)}
html[data-theme] svg text[fill="#1E2836"]{fill:var(--f-text)}
html[data-theme] svg [stroke="#1E2836"]{stroke:var(--f-node)}
html[data-theme] svg :not(text)[fill="#1e2836"]{fill:var(--f-node)}
html[data-theme] svg text[fill="#1e2836"]{fill:var(--f-text)}
html[data-theme] svg [stroke="#1e2836"]{stroke:var(--f-node)}
html[data-theme] svg :not(text)[fill="#151F30"]{fill:var(--f-node2)}
html[data-theme] svg text[fill="#151F30"]{fill:var(--f-text)}
html[data-theme] svg [stroke="#151F30"]{stroke:var(--f-node2)}
html[data-theme] svg :not(text)[fill="#151f30"]{fill:var(--f-node2)}
html[data-theme] svg text[fill="#151f30"]{fill:var(--f-text)}
html[data-theme] svg [stroke="#151f30"]{stroke:var(--f-node2)}
html[data-theme] svg :not(text)[fill="#24405C"]{fill:var(--f-node3)}
html[data-theme] svg text[fill="#24405C"]{fill:var(--f-text)}
html[data-theme] svg [stroke="#24405C"]{stroke:var(--f-node3)}
html[data-theme] svg :not(text)[fill="#24405c"]{fill:var(--f-node3)}
html[data-theme] svg text[fill="#24405c"]{fill:var(--f-text)}
html[data-theme] svg [stroke="#24405c"]{stroke:var(--f-node3)}
html[data-theme] svg :not(text)[fill="#DFE7F1"]{fill:var(--f-text)}
html[data-theme] svg text[fill="#DFE7F1"]{fill:var(--f-text)}
html[data-theme] svg [stroke="#DFE7F1"]{stroke:var(--f-text)}
html[data-theme] svg :not(text)[fill="#dfe7f1"]{fill:var(--f-text)}
html[data-theme] svg text[fill="#dfe7f1"]{fill:var(--f-text)}
html[data-theme] svg [stroke="#dfe7f1"]{stroke:var(--f-text)}
html[data-theme] svg :not(text)[fill="#C2CDDE"]{fill:var(--f-text2)}
html[data-theme] svg text[fill="#C2CDDE"]{fill:var(--f-text2)}
html[data-theme] svg [stroke="#C2CDDE"]{stroke:var(--f-text2)}
html[data-theme] svg :not(text)[fill="#c2cdde"]{fill:var(--f-text2)}
html[data-theme] svg text[fill="#c2cdde"]{fill:var(--f-text2)}
html[data-theme] svg [stroke="#c2cdde"]{stroke:var(--f-text2)}
html[data-theme] svg :not(text)[fill="#9AA4B2"]{fill:var(--f-muted)}
html[data-theme] svg text[fill="#9AA4B2"]{fill:var(--f-muted)}
html[data-theme] svg [stroke="#9AA4B2"]{stroke:var(--f-axis)}
html[data-theme] svg :not(text)[fill="#9aa4b2"]{fill:var(--f-muted)}
html[data-theme] svg text[fill="#9aa4b2"]{fill:var(--f-muted)}
html[data-theme] svg [stroke="#9aa4b2"]{stroke:var(--f-axis)}
html[data-theme] svg :not(text)[fill="#7C8AA0"]{fill:var(--f-axis)}
html[data-theme] svg text[fill="#7C8AA0"]{fill:var(--f-muted)}
html[data-theme] svg [stroke="#7C8AA0"]{stroke:var(--f-axis)}
html[data-theme] svg :not(text)[fill="#7c8aa0"]{fill:var(--f-axis)}
html[data-theme] svg text[fill="#7c8aa0"]{fill:var(--f-muted)}
html[data-theme] svg [stroke="#7c8aa0"]{stroke:var(--f-axis)}
html[data-theme] svg :not(text)[fill="#33415A"]{fill:var(--f-edge)}
html[data-theme] svg text[fill="#33415A"]{fill:var(--f-muted)}
html[data-theme] svg [stroke="#33415A"]{stroke:var(--f-edge)}
html[data-theme] svg :not(text)[fill="#33415a"]{fill:var(--f-edge)}
html[data-theme] svg text[fill="#33415a"]{fill:var(--f-muted)}
html[data-theme] svg [stroke="#33415a"]{stroke:var(--f-edge)}
html[data-theme] svg :not(text)[fill="#3B4A63"]{fill:var(--f-edge)}
html[data-theme] svg text[fill="#3B4A63"]{fill:var(--f-muted)}
html[data-theme] svg [stroke="#3B4A63"]{stroke:var(--f-edge)}
html[data-theme] svg :not(text)[fill="#3b4a63"]{fill:var(--f-edge)}
html[data-theme] svg text[fill="#3b4a63"]{fill:var(--f-muted)}
html[data-theme] svg [stroke="#3b4a63"]{stroke:var(--f-edge)}
html[data-theme] svg :not(text)[fill="#58C4DD"]{fill:var(--f-blue-bg)}
html[data-theme] svg text[fill="#58C4DD"]{fill:var(--f-blue)}
html[data-theme] svg [stroke="#58C4DD"]{stroke:var(--f-blue)}
html[data-theme] svg :not(text)[fill="#58c4dd"]{fill:var(--f-blue-bg)}
html[data-theme] svg text[fill="#58c4dd"]{fill:var(--f-blue)}
html[data-theme] svg [stroke="#58c4dd"]{stroke:var(--f-blue)}
html[data-theme] svg :not(text)[fill="#83C167"]{fill:var(--f-green-bg)}
html[data-theme] svg text[fill="#83C167"]{fill:var(--f-green)}
html[data-theme] svg [stroke="#83C167"]{stroke:var(--f-green)}
html[data-theme] svg :not(text)[fill="#83c167"]{fill:var(--f-green-bg)}
html[data-theme] svg text[fill="#83c167"]{fill:var(--f-green)}
html[data-theme] svg [stroke="#83c167"]{stroke:var(--f-green)}
html[data-theme] svg :not(text)[fill="#FF8C1A"]{fill:var(--f-orange-bg)}
html[data-theme] svg text[fill="#FF8C1A"]{fill:var(--f-orange)}
html[data-theme] svg [stroke="#FF8C1A"]{stroke:var(--f-orange)}
html[data-theme] svg :not(text)[fill="#ff8c1a"]{fill:var(--f-orange-bg)}
html[data-theme] svg text[fill="#ff8c1a"]{fill:var(--f-orange)}
html[data-theme] svg [stroke="#ff8c1a"]{stroke:var(--f-orange)}
html[data-theme] svg :not(text)[fill="#FFFF00"]{fill:var(--f-yellow-bg)}
html[data-theme] svg text[fill="#FFFF00"]{fill:var(--f-yellow)}
html[data-theme] svg [stroke="#FFFF00"]{stroke:var(--f-yellow)}
html[data-theme] svg :not(text)[fill="#ffff00"]{fill:var(--f-yellow-bg)}
html[data-theme] svg text[fill="#ffff00"]{fill:var(--f-yellow)}
html[data-theme] svg [stroke="#ffff00"]{stroke:var(--f-yellow)}
html[data-theme] svg :not(text)[fill="#FC6255"]{fill:var(--f-red-bg)}
html[data-theme] svg text[fill="#FC6255"]{fill:var(--f-red)}
html[data-theme] svg [stroke="#FC6255"]{stroke:var(--f-red)}
html[data-theme] svg :not(text)[fill="#fc6255"]{fill:var(--f-red-bg)}
html[data-theme] svg text[fill="#fc6255"]{fill:var(--f-red)}
html[data-theme] svg [stroke="#fc6255"]{stroke:var(--f-red)}
html[data-theme] svg :not(text)[fill="#C78BFF"]{fill:var(--f-purple-bg)}
html[data-theme] svg text[fill="#C78BFF"]{fill:var(--f-purple)}
html[data-theme] svg [stroke="#C78BFF"]{stroke:var(--f-purple)}
html[data-theme] svg :not(text)[fill="#c78bff"]{fill:var(--f-purple-bg)}
html[data-theme] svg text[fill="#c78bff"]{fill:var(--f-purple)}
html[data-theme] svg [stroke="#c78bff"]{stroke:var(--f-purple)}
html[data-theme]{--f-blue-soft:var(--f-blue-bg); --f-green-soft:var(--f-green-bg); --f-red-soft:var(--f-red-bg); --f-yellow-soft:var(--f-yellow-bg); --f-orange-soft:var(--f-orange-bg); --f-purple-soft:var(--f-purple-bg);}
html[data-theme="dark"]{--f-blue-soft:#1d4257; --f-green-soft:#27431f; --f-red-soft:#4f1f1b; --f-yellow-soft:#4d4d00; --f-orange-soft:#53300a; --f-purple-soft:#3a2858;}
/* заливки ячеек: светлые в светлой теме, тёмные в тёмной */
html[data-theme] svg :not(text)[fill="#1d4257"]{fill:var(--f-blue-soft)}
html[data-theme] svg :not(text)[fill="#27431f"]{fill:var(--f-green-soft)}
html[data-theme] svg :not(text)[fill="#4f1f1b"]{fill:var(--f-red-soft)}
html[data-theme] svg :not(text)[fill="#4d4d00"]{fill:var(--f-yellow-soft)}
html[data-theme] svg :not(text)[fill="#53300a"]{fill:var(--f-orange-soft)}
html[data-theme] svg :not(text)[fill="#3a2858"]{fill:var(--f-purple-soft)}
/* наконечники стрелок — насыщенным цветом */
html[data-theme] svg marker [fill="#58c4dd"]{fill:var(--f-blue)}
html[data-theme] svg marker [fill="#83c167"]{fill:var(--f-green)}
html[data-theme] svg marker [fill="#ff8c1a"]{fill:var(--f-orange)}
html[data-theme] svg marker [fill="#ffff00"]{fill:var(--f-yellow)}
html[data-theme] svg marker [fill="#fc6255"]{fill:var(--f-red)}
html[data-theme] svg marker [fill="#c78bff"]{fill:var(--f-purple)}
html[data-theme] svg marker [fill="#3b4a63"]{fill:var(--f-axis)}
html[data-theme] svg marker [fill="#33415a"]{fill:var(--f-axis)}
html[data-theme] svg marker [fill="#7c8aa0"]{fill:var(--f-axis)}
html[data-theme] svg marker [fill="#9aa4b2"]{fill:var(--f-muted)}
html[data-theme] svg marker [fill="#dfe7f1"]{fill:var(--f-text)}
html[data-theme] svg marker [fill="#c2cdde"]{fill:var(--f-text2)}
html[data-theme] svg text{font-family:var(--sans)}
html[data-theme] .viz{margin:26px 0}
html[data-theme] .viz svg{border:1px solid var(--line); border-radius:6px; box-shadow:none; background:var(--card)}
html[data-theme] .viz figcaption{font-family:var(--serif); font-size:.95rem; color:var(--muted); text-align:left; margin-top:10px}

/* пошаговые плееры */
html[data-theme] .algo{background:var(--card); border:1px solid var(--line); border-radius:6px; box-shadow:none}
html[data-theme] .algo .bar{background:var(--f-edge)}
html[data-theme] .algo .bar .v{color:var(--f-muted)}
html[data-theme] .algo .bar.cmp{background:var(--f-yellow-bg)} html[data-theme] .algo .bar.cmp .v{color:var(--f-yellow)}
html[data-theme] .algo .bar.swap{background:var(--f-red-bg)} html[data-theme] .algo .bar.swap .v{color:var(--f-red)}
html[data-theme] .algo .bar.done{background:var(--f-green-bg)} html[data-theme] .algo .bar.done .v{color:var(--f-green)}
html[data-theme] .algo .ctl input[type=range]{accent-color:var(--ink)}
html[data-theme] .algo .ctl button{background:none; color:var(--ink); border:1px solid var(--line); border-radius:6px}
html[data-theme] .algo .ctl button:hover{background:var(--hover,var(--tag))}
html[data-theme] .algo .lbl, html[data-theme] .algo .bslbl{color:var(--muted)}
html[data-theme] .algo .bscell{background:var(--f-node); border-color:var(--f-edge); color:var(--ink)}
html[data-theme] .algo .bscell.L, html[data-theme] .algo .bscell.found{background:var(--f-green-bg); color:var(--f-on)}
html[data-theme] .algo .bscell.R{background:var(--f-orange-bg); color:var(--f-on)}
html[data-theme] .algo .bscell.mid{background:var(--f-yellow-bg); color:var(--f-on)}
html[data-theme] .algo .bscell.found{box-shadow:0 0 0 3px color-mix(in srgb,var(--f-green) 40%,transparent)}

/* блоки кода */
html[data-theme]{
  --code-paper:#f4f0e7; --code-head:#ebe5d8; --code-line:#e0d9ca; --code-text:#2b2925;
  --hl-c:#8d877b; --hl-k:#0d7c72; --hl-t:#7a3fb8; --hl-s:#2e7d32; --hl-n:#b4540a; --hl-f:#8a5a00; --hl-p:#b8372a;
}
html[data-theme="dark"]{
  --code-paper:#1c1b19; --code-head:#232220; --code-line:#2e2d2a; --code-text:#e6e2d9;
  --hl-c:#7f7a70; --hl-k:#4fd6c4; --hl-t:#c9a6ff; --hl-s:#a5d68f; --hl-n:#f2a96a; --hl-f:#e9d18e; --hl-p:#f08c7c;
}
html[data-theme] .code{margin:18px 0; border:1px solid var(--code-line); border-radius:8px; background:var(--code-paper); overflow:hidden}
html[data-theme] .code-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 8px 6px 14px; background:var(--code-head); border-bottom:1px solid var(--code-line); font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.03em}
html[data-theme] .code-head .copy{font:inherit; color:var(--muted); background:none; border:1px solid transparent; border-radius:5px; padding:3px 9px; cursor:pointer; transition:color .15s, border-color .15s, background-color .15s}
html[data-theme] .code-head .copy:hover{color:var(--ink); border-color:var(--code-line); background:var(--code-paper)}
html[data-theme] .code pre{margin:0; border:0; border-radius:0; background:none; color:var(--code-text); padding:14px 16px; font-size:.84rem; line-height:1.6; tab-size:4; overflow-x:auto}
html[data-theme] .code pre code{font-family:var(--mono); background:none; color:inherit; padding:0}
html[data-theme] .hl .c{color:var(--hl-c); font-style:italic}
html[data-theme] .hl .k{color:var(--hl-k); font-weight:600}
html[data-theme] .hl .t{color:var(--hl-t)}
html[data-theme] .hl .s{color:var(--hl-s)}
html[data-theme] .hl .n{color:var(--hl-n)}
html[data-theme] .hl .f{color:var(--hl-f)}
html[data-theme] .hl .p{color:var(--hl-p)}
@media print{html[data-theme] .code-head .copy{display:none}}

/* плавная смена темы */


@media(max-width:680px){
  html[data-theme] .viz{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-left:-18px; margin-right:-18px; padding:0 18px}
  html[data-theme] .viz svg{min-width:600px}
  html[data-theme] .viz figcaption{position:sticky; left:0; max-width:calc(100vw - 36px)}
  html[data-theme] .wrap{padding:20px 18px 64px}
  html[data-theme] header.hero{padding:36px 0 22px}
  html[data-theme] h2{font-size:1.45rem}
}
@media(prefers-reduced-motion:reduce){
  html[data-theme]{scroll-behavior:auto}
  @view-transition{navigation:none}
  html.theme-anim, html.theme-anim *{transition:none !important}
}
@media print{html[data-theme] .top, html[data-theme] .toplink{display:none} html[data-theme] body{background:#fff}}
/* ---------- навигация по конспекту ---------- */
html[data-theme] .progress{position:fixed; top:0; left:0; right:0; height:3px; background:var(--accent); transform-origin:0 50%; transform:scaleX(0); z-index:50; pointer-events:none}
html[data-theme] .side-toc{position:fixed; top:84px; right:max(16px, calc(50% - 410px - 250px)); width:220px; max-height:calc(100vh - 120px); overflow:auto;
  font-size:.85rem; line-height:1.35; opacity:0; visibility:hidden; transform:translateX(6px); transition:opacity .25s, transform .25s, visibility .25s; z-index:20}
html[data-theme] .side-toc.show{opacity:1; visibility:visible; transform:none}
html[data-theme] .side-toc p{font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0 0 8px}
html[data-theme] .side-toc a{display:block; color:var(--muted); padding:4px 0 4px 12px; border-left:2px solid var(--line); text-decoration:none; transition:color .2s, border-color .2s}
html[data-theme] .side-toc a:hover{color:var(--ink)}
html[data-theme] .side-toc a.on{color:var(--ink); border-left-color:var(--accent)}
html[data-theme] .secbtn{position:fixed; left:16px; bottom:16px; z-index:30; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:6px;
  padding:8px 14px; font-family:var(--sans); font-size:.82rem; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s, transform .2s, visibility .2s}
html[data-theme] .secbtn.show{opacity:1; visibility:visible; transform:none}
html[data-theme] .secpanel{position:fixed; left:16px; right:16px; bottom:64px; max-width:420px; max-height:60vh; overflow:auto; z-index:31; background:var(--card);
  border:1px solid var(--line); border-radius:8px; padding:10px 0; box-shadow:0 12px 32px rgba(0,0,0,.18)}
html[data-theme] .secpanel[hidden]{display:none}
html[data-theme] .secpanel a{display:block; padding:8px 16px; color:var(--ink); text-decoration:none; font-size:.92rem}
html[data-theme] .secpanel a.on{color:var(--accent); font-weight:650}
html[data-theme] .pager{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:48px 0 0; padding-top:20px; border-top:1px solid var(--ink)}
html[data-theme] .pager a{display:block; padding:14px 16px; border:1px solid var(--line); border-radius:8px; color:var(--ink); text-decoration:none; transition:border-color .2s, background-color .2s}
html[data-theme] .pager a:hover{border-color:var(--accent); background:var(--accent-soft)}
html[data-theme] .pager a.next{text-align:right; grid-column:2}
html[data-theme] .pager small{display:block; font-family:var(--mono); font-size:.75rem; color:var(--muted); margin-bottom:4px}
html[data-theme] .pager b{font-family:var(--serif); font-size:1.08rem}
html[data-theme] h2[id], html[data-theme] h3[id]{scroll-margin-top:24px}
@media(min-width:1300px){html[data-theme] .secbtn, html[data-theme] .secpanel{display:none !important}}
@media(max-width:1299px){html[data-theme] .side-toc{display:none}}
@media(max-width:560px){html[data-theme] .pager{grid-template-columns:1fr} html[data-theme] .pager a.next{grid-column:1}}
@media print{html[data-theme] .progress, html[data-theme] .side-toc, html[data-theme] .secbtn, html[data-theme] .secpanel, html[data-theme] .pager{display:none}}
html[data-look="book"]{--acc-l:#0b7a6e; --acc-d:#4fd6c4}
/* ── палитра книжного вида: холодный стол, белый лист ── */
html[data-look="book"]{
  --desk:#dbe5e1; --sheet-grid:rgba(13,100,90,.06);
  --bg:#ffffff; --card:#ffffff;
  --ink:#111a19; --muted:#4a5855; --faint:#697774;
  --line:#e6ece9; --rule-hard:#d3dbd7;
  --accent:var(--acc-l); --accent-soft:transparent;
  --tag:#e6ece9;
  /* ── Листинг набран на бумаге, а не в чёрном ящике ──
     Тёмная плашка с неоновыми пастельными цветами — язык тёмной IDE,
     и в книжной вёрстке она выглядит чужеродной вставкой. В печатном
     учебнике листинг идёт на той же бумаге: тёмной краской, различение
     даётся начертанием, а красок — минимум.
     Ключевые слова поэтому почти чёрные (у .hl .k уже есть
     font-weight:600 — работает как полужирный в печатном листинге),
     комментарий — серый курсив, и лишь четыре сдержанные краски
     одной светлоты. Минимум в паре 4.75:1. */
  --code-bg:#eef2ef; --code-ink:#17201f;
  --code-paper:#eef2ef; --code-head:transparent;
  --code-line:#d6ddd8; --code-text:#17201f;
  --hl-c:#66746f; --hl-k:#111a19; --hl-t:#0d5c6b; --hl-s:#1f6b45;
  --hl-n:#9a5410; --hl-f:#37464a; --hl-p:#9c3322;
  --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
  --sans:var(--serif);
}
html[data-look="book"][data-theme="dark"]{
  --desk:#0d1211; --sheet-grid:rgba(120,220,200,.055);
  --bg:#141a19; --card:#141a19;
  --ink:#e6eeec; --muted:#a5b4b0; --faint:#78878a;
  --line:#223130; --rule-hard:#2e3d3c;
  --accent:var(--acc-d);
  --tag:#223130;
  /* Палитра листинга обязана идти в комплекте с его подложкой: светлый
     набор выше рассчитан на #eef2ef, и почти чёрные ключевые слова
     #111a19 на тёмной подложке исчезли бы совсем. Здесь та же логика
     набора — ключевые слова почти белым полужирным, комментарий серым
     курсивом, четыре сдержанные краски. Минимум в паре 4.6:1. */
  --code-bg:#182120; --code-ink:#e0eae7;
  --code-paper:#182120; --code-line:#27332f; --code-text:#e0eae7;
  --hl-c:#78867f; --hl-k:#f0f6f4; --hl-t:#8fd9cd; --hl-s:#8fd0a8;
  --hl-n:#e0a86e; --hl-f:#b6c6c1; --hl-p:#e59080;
}

/* ── лист на клетчатом столе ── */
/* Сетку рисует фиксированный слой размером в экран, а не тайловый фон
   на весь body: страница конспекта — десятки тысяч пикселей высотой, и
   растрировать по ней два градиента браузер вынужден заново при
   прокрутке. Это и подлагивало. */
html[data-look="book"]{background:var(--desk)}
html[data-look="book"] body::before{display:none}
html[data-look="book"] body{
  background:none;
  font-family:var(--serif); font-size:18px; line-height:1.72;
  padding:0 24px 72px;
}
html[data-look="book"] .wrap{
  max-width:1060px; margin:0 auto; background:var(--bg);
  /* только резкая волосяная кромка: размытую тень на элементе такой
     высоты браузер перерисовывает заметно дороже */
  box-shadow:0 0 0 1px rgba(17,26,25,.09);
  /* 64px поле + 104px колонка маргиналий */
  padding:0 64px 64px 168px;
}
html[data-look="book"][data-theme="dark"] .wrap{
  box-shadow:0 0 0 1px rgba(255,255,255,.07);
}
/* мера строки: засечками 820px читать тяжело */
html[data-look="book"] .wrap > p,
html[data-look="book"] .wrap > ul,
html[data-look="book"] .wrap > ol,
html[data-look="book"] .wrap > h2,
html[data-look="book"] .wrap > h3,
html[data-look="book"] .wrap > .note,
html[data-look="book"] .wrap > .good,
html[data-look="book"] .wrap > .warn,
html[data-look="book"] .wrap > .card,
html[data-look="book"] header.hero{max-width:66ch}

/* колонтитул и пагинация занимают всю ширину листа */
html[data-look="book"] .top,
html[data-look="book"] .pager{margin-left:-104px}
html[data-look="book"] .top{
  padding:22px 0 14px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
}

/* ── титул ── */
html[data-look="book"] header.hero{
  padding:44px 0 0; margin:0; border-bottom:0;
}
html[data-look="book"] header.hero h1{font-size:2.3rem; line-height:1.12; margin:0 0 18px}
html[data-look="book"] header.hero .sub{font-size:1.02rem; color:var(--muted); max-width:62ch}
html[data-look="book"] header.hero .meta{
  margin-top:24px; padding-top:14px; border-top:2px solid var(--ink);
  font-family:var(--mono); font-size:.82rem;
}

/* ── содержание: две колонки, настоящие номера ── */
html[data-look="book"] nav.toc{margin:40px 0 0; max-width:none}
html[data-look="book"] nav.toc h2{
  font-family:var(--mono); font-weight:400; font-size:.82rem;
  letter-spacing:.1em; margin:0 0 10px;
  padding-bottom:10px; border-bottom:1px solid var(--rule-hard);
}
html[data-look="book"] nav.toc ol{
  columns:2; column-gap:36px; padding-left:1.7em; margin:0;
}
html[data-look="book"] nav.toc li{break-inside:avoid; padding:4px 0}
html[data-look="book"] nav.toc li::marker{
  font-family:var(--mono); font-size:.8rem; color:var(--faint);
}

/* ── разделы: таймкод уходит на поле, а не торчит в заголовке ── */
html[data-look="book"] h2[id]{position:relative; font-size:1.5rem; margin:56px 0 4px}
html[data-look="book"] h3{font-size:1.14rem; margin:34px 0 2px}
html[data-look="book"] h2[id] .ts{
  position:absolute; left:-104px; width:88px; top:.5em;
  text-align:right; background:none; border:0; border-radius:0;
  padding:0; font-family:var(--mono); font-size:.76rem;
  color:var(--faint); font-variant-numeric:tabular-nums;
}
html[data-look="book"] h2[id] .ts:hover{color:var(--accent); background:none}

/* ── наборные среды вместо подкрашенных плашек ── */
html[data-look="book"] .note,
html[data-look="book"] .good,
html[data-look="book"] .warn{
  background:none; border:0; border-left:2px solid var(--accent);
  border-radius:0; padding:0 0 0 18px; margin:26px 0;
  font-style:italic; font-size:1.02rem;
}
/* замечание — без краски и без курсива: это не теорема */
html[data-look="book"] .note{
  border-left-color:transparent; padding-left:0; font-style:normal;
}
html[data-look="book"] .lbl{
  font-style:normal; font-weight:700; font-family:var(--mono);
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-right:10px; display:inline;
}
html[data-look="book"] .note .lbl{color:var(--muted)}
/* ярлык идёт в подбор — перевод строки после него убираем */
html[data-look="book"] .note > br:first-of-type,
html[data-look="book"] .good > br:first-of-type,
html[data-look="book"] .warn > br:first-of-type{display:none}

/* перечисление без рамки: висячие тире */
html[data-look="book"] .card{
  background:none; border:0; border-radius:0; padding:0; margin:18px 0;
}
html[data-look="book"] .card ul{margin:0; padding:0; list-style:none}
html[data-look="book"] .card li{position:relative; padding-left:22px; margin:9px 0}
html[data-look="book"] .card li::before{
  content:"—"; position:absolute; left:0; color:var(--faint);
}

/* ── таблица: линейки, без зебры и рамок ── */
html[data-look="book"] table{
  width:100%; border-collapse:collapse; font-size:.94rem;
  font-variant-numeric:tabular-nums; box-shadow:none;
}
html[data-look="book"] th{
  font-family:var(--mono); font-weight:400; font-size:.76rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  text-align:left; padding:0 14px 8px 0; background:none;
  border-bottom:2px solid var(--ink);
}
html[data-look="book"] td{
  padding:9px 14px 9px 0; background:none;
  border-bottom:1px solid var(--line);
}
html[data-look="book"] tr:nth-child(even) td{background:none}

/* ── код: без скруглений, тонкая шапка ── */
/* Цвета только через токены: подложка листинга светлая в бумажной теме
   и тёмная в ночной, поэтому хардкод вроде rgba(255,255,255,.08) здесь
   работал бы лишь в одной из них. */
html[data-look="book"] .code{
  border:1px solid var(--code-line); border-radius:0;
  margin:26px 0; background:var(--code-paper);
}
html[data-look="book"] .code-head{
  background:none; border-bottom:1px solid var(--code-line);
  padding:7px 14px; font-family:var(--mono); font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
html[data-look="book"] .code-head .copy{
  border:0; border-bottom:1px solid var(--code-line);
  border-radius:0; padding:0; color:var(--muted);
}
html[data-look="book"] .code-head .copy:hover{
  color:var(--ink); border-color:var(--ink); background:none;
}
html[data-look="book"] pre, html[data-look="book"] pre.hl{
  border-radius:0; margin:0;
}
html[data-look="book"] code{
  background:var(--tag); border-radius:0; padding:1px 5px; font-size:.88em;
}
/* ВАЖНО: правило выше иначе протекает в код-блок и склеивает строки.
   Здесь нельзя писать теги буквально: wrap_code() ниже ищет их
   регуляркой по всему файлу и сматчится с этим комментарием. */
html[data-look="book"] pre code{background:none; padding:0; font-size:inherit}

/* ── иллюстрации: без скруглённой плашки ── */
html[data-look="book"] .viz svg{border-radius:0}
html[data-look="book"] .viz figcaption{
  font-family:var(--mono); font-size:.86rem; line-height:1.55;
}

/* ── боковая рейка и соседние занятия ── */
html[data-look="book"] .side-toc{
  right:max(16px, calc(50% - 530px - 236px));
  background:none; border:0; border-left:1px solid var(--line);
  border-radius:0; box-shadow:none; padding:0 0 0 14px;
}
html[data-look="book"] .pager{
  border-top:2px solid var(--ink); margin:64px 0 0; padding-top:20px;
}
html[data-look="book"] .pager a{
  border:0; border-top:3px solid var(--accent); border-radius:0;
  padding:10px 0 0; background:none;
}
html[data-look="book"] .pager a:hover{background:none}
html[data-look="book"] .progress{height:2px}

/* ── кнопка возврата к старому виду ──
   Намеренно парная к переключателю темы: та же форма и размер, чтобы
   читалась как кнопка, а не как обрывок текста рядом с ней. */
.look-toggle{
  font:inherit; font-size:.8rem; color:var(--muted);
  background:none; border:1px solid var(--line);
  padding:4px 10px; margin-left:8px; cursor:pointer;
  white-space:nowrap;
}
.look-toggle:hover{color:var(--ink); border-color:var(--muted)}
.look-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
/* в книжном виде — без скруглений, как весь остальной набор */
html[data-look="book"] .look-toggle{border-radius:0}
html[data-look="paper"] .look-toggle{border-radius:6px}

@media(max-width:1100px){
  /* на узком экране поле маргиналий не помещается — таймкод в строку */
  html[data-look="book"] .wrap{padding:0 24px 44px}
  html[data-look="book"] .top,
  html[data-look="book"] .pager{margin-left:0}
  html[data-look="book"] h2[id] .ts{
    position:static; width:auto; text-align:left; margin-left:10px;
  }
  html[data-look="book"] nav.toc ol{columns:1}
  html[data-look="book"] body{padding:0 12px 48px; font-size:17px}
  html[data-look="book"] header.hero h1{font-size:1.85rem}
}
@media print{
  html[data-look="book"] body{background:#fff; padding:0}
  html[data-look="book"] .wrap{box-shadow:none; padding:0}
  .look-toggle{display:none}
}
/* добавочные блоки нового сайта в духе книжного вида: исправление и собственные вставки */
html[data-theme] .fix, html[data-theme] .own{border-left:2px solid var(--accent); padding:12px 18px; margin:1.1em 0; font-family:var(--serif); font-size:1.04rem}
html[data-theme] .fix{background:#fbe9e8; border-left-color:#a1313a}
html[data-theme] .own{background:#eeeaf8; border-left-color:#5a3aa6}
html[data-theme="dark"] .fix{background:#2c1719; border-left-color:#ff9ca5}
html[data-theme="dark"] .own{background:#1f1a33; border-left-color:#c6b3ff}
html[data-theme] .fix .lbl{color:#a1313a} html[data-theme] .own .lbl{color:#5a3aa6}
html[data-theme="dark"] .fix .lbl{color:#ff9ca5} html[data-theme="dark"] .own .lbl{color:#c6b3ff}
html[data-look="book"] .fix, html[data-look="book"] .own{background:none; padding:0 0 0 18px; margin:26px 0; font-style:italic}
html[data-look="book"] .wrap > .fix, html[data-look="book"] .wrap > .own{max-width:66ch}
html[data-look="book"] .fix > br:first-of-type, html[data-look="book"] .own > br:first-of-type{display:none}
/* общий плеер кадров (data-frames) */
.algo .fsvg{width:100%;height:auto;display:block;border-radius:4px}
.algo .fcap{font-family:var(--mono);font-size:.76rem;color:var(--muted);letter-spacing:.04em;margin-bottom:6px;text-transform:uppercase}
.algo .fmsg{min-height:2.6em;font-size:.92rem;color:var(--muted);margin-top:6px}

/* подпункты (h3) в боковом оглавлении и панели разделов */
html[data-theme] .side-toc a.sub{padding-left:26px; font-size:.8rem}
html[data-theme] .secpanel a.sub{padding-left:32px; font-size:.86rem}
html[data-theme] .side-toc{max-height:calc(100vh - 110px)}

/* полное оглавление: разделы и задачи с номерами и временем */
html[data-look="book"] nav.toc ol, nav.toc ol{list-style:none; padding-left:0; columns:2 300px; column-gap:40px}
nav.toc li{break-inside:avoid; padding:3px 0; display:flex; justify-content:space-between; gap:10px; align-items:baseline}
nav.toc li.t2{margin-top:12px; font-weight:700; font-size:1.02rem}
nav.toc li.t2:first-child{margin-top:0}
nav.toc li.t3{padding-left:14px; font-size:.95rem}
nav.toc .tn{font-family:var(--mono); font-size:.78rem; color:var(--faint); margin-right:4px}
nav.toc .tt{font-family:var(--mono); font-size:.72rem; color:var(--faint); white-space:nowrap}
nav.toc a{color:var(--ink)}
@media(max-width:680px){nav.toc ol{columns:1}}
/* жёлто-чёрная палитра */
html[data-look="book"]{--acc-l:#8a6500; --acc-d:#ffdd2d}
html[data-look="book"]{
  --desk:#efefef; --sheet-grid:transparent;
  --bg:#ffffff; --card:#ffffff;
  --ink:#111111; --muted:#5f6368; --faint:#8a8d92;
  --line:#e6e7ea; --rule-hard:#d0d2d6;
  --tag:#f1f2f4;
  --code-bg:#f4f5f7; --code-paper:#f4f5f7; --code-line:#e0e2e6; --code-ink:#111111; --code-text:#111111;
  --hl-c:#7b8088; --hl-k:#111111; --hl-t:#8a5a00; --hl-s:#3f7d00; --hl-n:#b4531a; --hl-f:#333333; --hl-p:#b3342a;
}
html[data-look="book"][data-theme="dark"]{
  --desk:#0d0e11; --sheet-grid:transparent;
  --bg:#17181c; --card:#1d1e23;
  --ink:#ececf0; --muted:#a3a6b0; --faint:#6f727c;
  --line:#2c2e35; --rule-hard:#3d4048;
  --tag:#272930;
  --code-bg:#121317; --code-paper:#121317; --code-line:#2c2e35; --code-ink:#ececf0; --code-text:#ececf0;
  --hl-c:#7b7f8b; --hl-k:#ffdd2d; --hl-t:#ffe27a; --hl-s:#a8d58f; --hl-n:#ffab40; --hl-f:#ececf0; --hl-p:#ff8a65;
}
html[data-look="book"] header.hero{background:none!important;color:var(--ink)}
html[data-look="book"] ::selection{background:#ffdd2d;color:#333}
.viz svg rect:first-child{fill:#0a0a0a}
.sitelink{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--rule-hard);background:#ffdd2d;color:#333!important;font-weight:700;font-size:.85rem;text-decoration:none!important}
.sitelink:hover{background:#000;color:#ffdd2d!important;border-color:#ffdd2d}
.top .sitelink{margin-right:8px}
.look-toggle{display:none!important}
.sitelink{border-color:#ffdd2d;border-radius:8px}
.sitelink:hover{background:#333;color:#ffdd2d!important;border-color:#333}
html[data-look="book"] .toc li.on>a, html[data-look="book"] mark{background:#ffdd2d;color:#333}
.tgen{display:inline-block;margin-top:10px;padding:4px 12px;border-radius:8px;background:#ffdd2d;color:#333;font-weight:700;font-size:.85rem}
.par h2{font-size:1.4rem;margin:1.8em 0 .5em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.lec{display:flex;flex-direction:column;gap:3px;background:var(--card);border:1px solid var(--line);padding:14px 16px;color:var(--ink)}
.lec:hover{border-color:var(--accent);text-decoration:none}
.lec .n{font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:.06em;text-transform:uppercase}
.lec .tt{font-family:var(--serif);font-weight:700;font-size:1.08rem}.lec .sb{color:var(--muted);font-size:.85rem}
#q{width:100%;padding:11px 14px;border:1px solid var(--rule-hard,var(--line));background:var(--card);color:var(--ink);font:inherit;margin:22px 0 4px}
html[data-look="book"] .wrap{padding:0 64px 64px}
html[data-look="book"] .top{margin-left:0}
@media(max-width:680px){html[data-look="book"] .wrap{padding:0 18px 48px}}

header.home{padding:44px 0 8px;border:0}
header.home .eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
header.home .eyebrow i{width:10px;height:10px;border-radius:50%;background:#ffdd2d;box-shadow:0 0 0 3px rgba(255,221,45,.25)}
header.home h1{font-family:var(--serif);font-weight:800;font-size:clamp(2.3rem,8vw,3.8rem);line-height:1.04;letter-spacing:-.02em;margin:18px 0 16px;color:var(--ink)}
header.home h1 mark{background:#ffdd2d;color:#222;padding:0 .18em;border-radius:.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
header.home .lead{font-family:var(--serif);font-size:1.18rem;line-height:1.55;color:var(--muted);max-width:36em;margin:0 0 20px}
header.home .facts{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:.82rem;color:var(--muted);margin-bottom:6px}
header.home .facts b{color:var(--ink);font-weight:700}
header.home #q{margin:22px 0 4px;border-radius:12px;padding:14px 16px;font-size:1rem}
header.home #q:focus{outline:2px solid #ffdd2d;outline-offset:1px}
header.home .lvh{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:30px 0 10px}
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.lv{display:flex;flex-direction:column;gap:6px;padding:14px 14px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)!important;text-decoration:none!important;transition:border-color .15s,transform .15s}
.lv:hover{border-color:#ffdd2d;transform:translateY(-2px)}
.lv .lk{font-family:var(--mono);font-weight:800;font-size:1.5rem;line-height:1;color:#222;background:#ffdd2d;align-self:flex-start;padding:5px 9px;border-radius:8px}
.lv .lt{font-size:.85rem;line-height:1.4;color:var(--muted)}.lv .lt b{color:var(--ink)}
.lv .lc{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:auto;padding-top:4px}
html{scroll-behavior:smooth}.par{scroll-margin-top:16px}
@media(max-width:680px){header.home{padding:28px 0 4px}.levels{grid-template-columns:1fr 1fr}}

.par{margin-top:46px}
.ph{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.ph .lk{font-family:var(--mono);font-weight:800;font-size:1.05rem;color:#222;background:#ffdd2d;padding:4px 9px;border-radius:8px;line-height:1.1}
.ph h2{margin:0!important;font-size:1.45rem}
.ph .pc{margin-left:auto;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.lec{border-radius:12px;gap:6px;padding:16px 18px;position:relative;transition:border-color .15s,transform .15s}
.lec:hover{border-color:#ffdd2d;transform:translateY(-2px)}
.lec .tt{color:var(--ink);font-size:1.12rem;line-height:1.25;padding-right:22px}
.lec .sb{color:var(--ink);opacity:.68;font-size:.86rem;line-height:1.5}
.lec .n{color:var(--muted)}
.lec::after{content:"→";position:absolute;right:16px;top:14px;font-family:var(--mono);color:#ffdd2d;opacity:0;transform:translateX(-4px);transition:.15s}
.lec:hover::after{opacity:1;transform:none}
footer.foot{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;margin-top:56px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.78rem}
footer.foot a{color:var(--muted)}footer.foot a:hover{color:var(--ink)}
@media(max-width:680px){.ph .pc{margin-left:0;width:100%}}

/* ── главная и страницы параллелей ── */
.levels.big{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.levels.big .lv{padding:20px 20px 16px;gap:8px}
.lv .lh{display:flex;align-items:center;gap:12px}
.lv .lh h3{margin:0;font-family:var(--serif);font-size:1.25rem;line-height:1.2}
.lv .lg{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lv ol{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:3px;font-size:.88rem;color:var(--ink);opacity:.8}
.lv ol li{display:flex;gap:8px}.lv ol li span{font-family:var(--mono);font-size:.72rem;color:var(--muted);padding-top:2px}
.lv .lc{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.74rem;color:var(--muted);margin-top:auto;padding-top:10px}
.lv .lc em{font-style:normal;color:#ffdd2d}
.top .back{font-family:var(--mono);font-size:.8rem;color:var(--muted)!important;text-decoration:none!important}
.top .back:hover{color:var(--ink)!important}
header.phead{padding:36px 0 6px}
header.phead .lk{font-family:var(--mono);font-weight:800;font-size:1.1rem;color:#222;background:#ffdd2d;padding:5px 11px;border-radius:9px}
header.phead h1{font-family:var(--serif);font-weight:800;font-size:clamp(2rem,6vw,3rem);line-height:1.08;letter-spacing:-.02em;margin:16px 0 10px}
header.phead .lead{font-family:var(--serif);font-size:1.12rem;line-height:1.55;color:var(--muted);max-width:36em;margin:0 0 6px}
header.phead .tagrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lec .du{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:6px}
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px}
.pnav a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)!important;text-decoration:none!important}
.pnav a:hover{border-color:#ffdd2d}.pnav small{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.pnav a:last-child:nth-child(2){text-align:right}.pnav .ph0{visibility:hidden}
.hits p{margin:.4em 0}#hits a{color:var(--ink)}
.lv .lh{min-height:48px}
.levels.big .lv{min-height:170px}.levels.big .lv .lt{font-size:.95rem}
.idea{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:46px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.idea h2{margin:0 0 6px!important;font-size:1.2rem}.idea p{margin:0;max-width:34em;color:var(--muted);font-size:.95rem;line-height:1.5}
.ibtn{display:inline-block;padding:11px 20px;border-radius:10px;background:#ffdd2d;color:#222!important;font-weight:700;text-decoration:none!important;white-space:nowrap}
.ibtn:hover{background:#ffe85c}
.lv .lc em{color:var(--ink);font-weight:600}
html[data-theme="dark"] .lv .lc em{color:#ffdd2d}