/* Reading room (tools/reading_room.py copies it as сайт.css).
   A cyber-alchemical work: a modern, exact layout around an old and learned text.
   Two states of the work — "athanor" (dark: soot, gold, azure, cinnabar) and
   "vellum" (light: parchment, iron-gall ink, the same metals darker). The apparatus —
   links, structure, words of the encyclopedia — is azure, as links always were. The author is
   Sol (gold), the model Luna (silver): their turns are the coniunctio of the opus.
   Type: EB Garamond for the text, Cormorant Garamond for titles, JetBrains Mono for
   every mark of the apparatus (numbers, labels, buttons) — the instrument's voice. */
:root {
  --serif: "EB Garamond", "Cormorant Garamond", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --display: "Cormorant Garamond", "EB Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", Consolas, "SF Mono", ui-monospace, monospace;
  --ui: system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: light;
  --bg: #f1e9d6; --panel: #faf5e8; --ink: #251d13; --muted: #5c5144; --line: #d6c8aa;
  --gold: #74550f; --azure: #1a56a0; --rubric: #a12d1c; --silver: #45586b;
  --accent: var(--azure); --author: var(--gold); --model: var(--silver); --warn: #a12d1c; --art: #6b3d8a;
  --gemini: var(--azure); --grok: var(--gold);
  --chip: #e9dec4; --sel: rgba(31, 98, 176, .12); --authorbg: transparent; --modelbg: transparent;
  /* The voices' ink: the text itself takes Sol's gold or Luna's silver, toned down to read. */
  --author-ink: #4a3410; --model-ink: #2b3a4b; --model-head: #2f4d6e; --malachite: #285e37;
  --glass: rgba(241, 233, 214, .86); --glow: rgba(143, 106, 26, .18);
  --grain: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(110, 80, 30, .14));
  --grid: none;
  /* By day the engraving is ink on the page: inverted to grey, white dropped by multiply. */
  --img-filter: invert(1) grayscale(1) contrast(1.15);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0c0f; --panel: #12141a; --ink: #e9e0cb; --muted: #8e897b; --line: #272a32;
    --gold: #d6b161; --azure: #6cb6ff; --rubric: #e5664a; --silver: #a9b9cc;
    --warn: #ff8a70; --art: #b996e6;
    --chip: #1a1d24; --sel: rgba(108, 182, 255, .14); --author-ink: #ecd8a6; --model-ink: #c2cddb; --model-head: #b4cbe8; --malachite: #86cf9c;
    --glass: rgba(11, 12, 15, .78); --glow: rgba(214, 177, 97, .22);
    --grain: radial-gradient(1100px 520px at 50% -8%, rgba(214, 177, 97, .08), transparent 62%);
    --grid: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 34px 34px,
            linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 34px 34px;
    --img-filter: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0c0f; --panel: #12141a; --ink: #e9e0cb; --muted: #8e897b; --line: #272a32;
  --gold: #d6b161; --azure: #6cb6ff; --rubric: #e5664a; --silver: #a9b9cc;
  --warn: #ff8a70; --art: #b996e6;
  --chip: #1a1d24; --sel: rgba(108, 182, 255, .14); --author-ink: #ecd8a6; --model-ink: #c2cddb; --model-head: #b4cbe8; --malachite: #86cf9c;
  --glass: rgba(11, 12, 15, .78); --glow: rgba(214, 177, 97, .22);
  --grain: radial-gradient(1100px 520px at 50% -8%, rgba(214, 177, 97, .08), transparent 62%);
  --grid: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 34px 34px,
          linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 34px 34px;
  --img-filter: none;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 96px; }
body { margin: 0; color: var(--ink); font: 15px/1.55 var(--ui); background: var(--grain), var(--grid), var(--bg);
  background-attachment: fixed; -webkit-font-smoothing: antialiased; }
::selection { background: var(--glow); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
header { padding: 18px 16px 12px; border-bottom: 1px solid var(--line); }
header h1 { font: 500 34px/1.15 var(--display); margin: 4px 0; letter-spacing: .01em; color: var(--gold); }
header .opts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
header nav { margin-top: 6px; }
.back { font-size: 13px; text-decoration: none; margin-right: 12px; }
.meta, .span { color: var(--muted); font: 12px/1.5 var(--mono); letter-spacing: .01em; }
.fold { font: 12px/1.5 var(--mono); color: var(--muted); }
.hidden { display: none !important; }
.off { color: var(--muted); opacity: .6; }

/* Engravings (Nano Banana, md/оформление/): pale lines, the black made transparent by the build
   (reading_room.engravings) — a blend painted black boxes while the book turned a page. */
.engr { display: block; max-width: 100%; height: auto; filter: var(--img-filter);
  -webkit-user-drag: none; user-select: none; }

/* The site's links: mono, quiet, the brand in gold. */
nav.site { display: flex; align-items: center; gap: 2px; padding: 6px 12px; font: 12px/1 var(--mono); letter-spacing: .03em;
  background: var(--glass); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
nav.site::-webkit-scrollbar { display: none; }
/* A page without a book's top line (the contents, the glossary, search…): the site's
   line sticks and tucks away on the way down, back on the way up, as in the book
   (the owner, 2026-10-14: «стики-уезжающей как в книге везде»). THEME_JS moves it. */
body > nav.site, body > nav.site:has(.navmenu) { position: sticky; top: 0; z-index: 7;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
body > nav.site.tuck { transform: translateY(-100%); }
nav.site a { text-decoration: none; padding: 7px 10px; border-radius: 3px; color: var(--muted); text-transform: uppercase; }
nav.site a:hover { color: var(--ink); background: var(--chip); }
nav.site a.on { color: var(--gold); box-shadow: inset 0 -1px 0 var(--gold); border-radius: 0; }
nav.site a.brand { color: var(--gold); font-weight: 600; margin-right: 10px; padding-left: 2px; text-transform: none; letter-spacing: .08em; }
/* The brand's mark: the app icon's emblem as a mask (--emblem, cut by tools/site_pwa_icons.py
   as emblem-mask.png), in the theme's gold; the owner, 2026-10-15: the ☉ sign «не серьезно». */
:root { --emblem: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAJX0lEQVR42pXYeXSW5ZkG8N/3fl8WEiCALCEsYUe24hgUAqIVkIIVcKnFoxW0A+qgQ5ky1qOdFgsHFUQrVhjL2KrtqFApVAooM2wChsMuMhRZZQkQ9kBC8iX5lvkjgQIi4zx/vc97zvvc9/U893vd1/WEXHuEhcRAN6M0Vy4ppNRJZ+3xsaiQ5LUWCF1z8Ti4TifDtPIn6+W70R7lYpq6SbHnlIhfO8TVR1AT+g5vm2O/94TUN8PnCq11A3Ld4R2tEQh/c6Kha+T+gAcFTnrEYMtUylSpje8p0MHd6mop3fsWK7gM79eW+nrIQEI3M9xvpRS79fOhMoFKCek6GKatmE9keM8j7vaohL3KBd8GQSCBSR631myHtbPcj3xln02elSfbGrMNd9wpaQLlzsgx1FF/9eHVcISvmCXU9q5e/klDB4xQ6UGNDBC3QlgTPUx12jl1NddTeykaqbBfsZ8bbJlzIhKXZ3zpc1wTGzWxXFMZtinTVbZX9NHPGMv9xENGWuR6PSzwO89pqrcGpkk32t8sli8mcvUtCiQ0s8qbovbKlmOUUv0MkSpPmqR0BxQ4qLVb3StqpagPnDRD45pT6uq7JvqdSM2/c8kWhQTq+rWoRW530u3yjfeFLsY55D/NNN8aUV0N0ETcdmNt0cVQ/Yyyy30yvamr33vFWRv/vlEXEETEzNXKIuvkKfGwd82x1kITnbyiDBpIOF0za2285hY7aKzlWlruNr1MtvDCcYcv1vC/6m+EbFvdo6tp2nneT72hDKkayNZAfWkyZUhxnRSVEootxhNKHXGvY6IqRT3jr04IJKsRBMj1Z39UrrdtfqaL4R4zxH4Bmsp0xjkVaCdpL9JkqavMcQkJt5jnSX+x1VuS9svTT1/EqxEEEl5SLKrKKt3M0EM/TzuuTKZWzjsoplJj7XTWRKZyZaJOSpWFtg6b5wVhq3zfeR2lypVqnbBkNet0t99v9NTdQZOFndIdLXTURjpCWvqlHCP11McITT2viTSNNNRRax1lud0WLU20QTfDvWCX64SEwgIJbynwhpc1dN673jPVJ8LKdVHkjAiKpWiphVt1UyrTdjtkaqtSREyls/ao72fmulVd/c2QL8cKkUBcc4EUj/gIS5yS6W2BkLY+FZUhppHRtrjTKZNMEtXfLqMFNgoclxCoEPaac/7HFOlWGijpH9QRC+MeN6s01uNyLfG6X9orqaXjyrV3vxxVEu62wlxlSm1Wy0A7pMrTQZmksHTnxKSZYrUnFZqpnV722BnB/QosNVVTy6yRbikycVaOGTZoZJC4m1Ta6ASydTVErpAT6nnMA47Kla7CXPf6WAN53vSaKiMsCKmlwBsaa6bEaTmOmorWvtLXDMfcAdLkuttA/66WERZb6KBKsF7Y4zZp4SCmq++QHF8KtFHHj7nFC/7gFg9ajc36I10jY20y0SuailwklIaWmKfeRZqJaOd1z9litOukCrnPFPVsdZPmFntLp0AjnXylpfXCbvOFvUgX08xSgUBMTAIhaU76s9mKpQkhIaZKRMxqLVSpJWmTgTrY5oz7zHKj5oH6OpjgqGU+lO16haglpkwZl7TzpJiQ2uoIiV32PqREmbg0nLFLA1kWWaFAmaxAMxt8Xz1rJC11RAwhFcJXaYFJCYkrNERIUiCsSgTnXOdzC6zX1WDz5Qaa+a3v6meGTmZKvbhQ6FvqjwvhEjWzUq/K95oHZPpcg8ApYxX42BTL/UJGTVaRb611QjUoqvtYinI/UmiqKY4apiiw0zARGwXyHXdQPcSk/r/FVEQl0vXR3TkZAp/q4UiAD5VZ4lktPaS3BiiTWrNFiZoKCl8mrv4+T9SoiJAUUVxvqY4eNFRbY30pFtijlrjfGiLHDH+RX3PEqZICWbJEJMTFxYSFhITFxMUlRGSpKyQhXViFkJt9YbaYgRpJKFIY8YUcr+pjsHwjVRngPXFlspQ76ZTxKqQpsstnCsVVicvVR1tNVUj3uai6spSKSco30XesMdz7sg0yMaLUMav9VHvvaGeBlzRxQoky3G6WchnSNdfLT6xQLmyK3s7Z74gK5xUaaYcyUSFt1LbLRPmmS3GznaIRrNXQajsN0MkLNhpjAjKskKKHImeVKHPA9R7QWNIxa+xSpURMqptt8ze9hCSNtxS3W2SDaXbbXl1kLaxU5AG93elLRcYYqsgEnR0RlalSHKkyJG1EL5RclIhV0rWwzstam2O6uGy1NXTIXR5yOCQs7n0hn/mBD9xpmHEGuEtElhYSKFRXoETcnfpIWm1JdbdFTLZM+5SIKfCS9db7g1yTPK2JocLVbX+QObr6R4MVesXDPvTPNXx5g1qytdf+G6o/W6uan+0Z8/T1qE36SjHXbnlCgrCkwG4PecJW2x3Q2vsKTBG1RSf75KrlsKKLSjZUrXdQX0uVCqWIe8o4+b6nrzGGaqVCkbcEEtW6KKmjVV6Qo5kiDxutluE2mqyVE6o0FYgqVSGOsDR11FLphCj4lW4+cMx0s3SQ5SUvmmjrhQDVyu5VZyxTxw7PK7ZaYJoNHlNc09FqS7vIrwlRpTUdrbFfGOwRu/zJPvMdk6OJHBOqxWO4hgPDlphkGOqro9jzVntCZ9NV2oy4ciVKlCpxTolycaR71G98ZYwbTLfIUTGZ+rveOEF1nUUuId0fWirNDnkW6GyoTOtt08s6H5lvrwrJixSYqaNBBjvkYU30NNxndussbI+ORopfYK7IRdBhRUaZZYuDVrrBBybr41mn7JDuIwccdF6xDJXaC+RY6CV7lXtRusMKHRVVxw8943CNFbvCo4XF9THfcp8Y4Lz1nnTWKT9XX9Iez9uqjfqWusW/GOldw/1Yd1MV2ee0h1QYZpy1lzq18GW9KeKAjwyxz7/p5R0FNvsv04xQoqd9/sONXpOhUmfDjVffdOd8aQTyVelmnC2XG8HLTWBC2ElLjTJAlh1STHDeDmxTqY+3FRvkfkNs999a+FS+s2ZJt8rLznjKoSt9ZugqHj+BUSYo8bolnjJeY09aqbMMB2xyj5NS3OZZh8y00Ai1VZltzsWv/w+nHxKSUNvj8qzW3U7b5MnznD1myvO0VSYrVqq5fVKMNs+bTgl/TXFc4zKkGmiOH7hLF1u8KOwp6233qV9pYJ3Nfq21RXZ4R/E3XyWErqEWwjVmtK2+8uX6jtN2SXGjE3Yot9Zye2uK/RtvXP4Xs/BzNcl2AUsAAAAASUVORK5CYII=); }
nav.site a.brand::before { content: ""; display: inline-block; width: 22px; height: 22px; margin: -6px 8px -6px 0; vertical-align: middle; background: currentColor;
  -webkit-mask: var(--emblem) center / contain no-repeat; mask: var(--emblem) center / contain no-repeat; }
nav.site .themebtn, .bookbar > .themebtn { margin-left: auto; flex: none; width: 30px; height: 26px; padding: 0; font: 15px/1 var(--mono, monospace); color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
nav.site .themebtn:hover, .bookbar > .themebtn:hover { color: var(--gold); border-color: var(--gold); }

/* Buttons: one kind everywhere — a hairline frame, mono caps, a glow of gold on touch. */
.btn, aside.panel .pgo button, button.pageno, button.structbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px;
  font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--ink); background: transparent;
  border: 1px solid var(--line); border-radius: 3px; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, box-shadow .15s; }
.btn:hover, aside.panel .pgo button:hover { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 14px var(--glow); }
.btn b { color: var(--gold); font-weight: 600; }
.btn input, button.pageno input { width: 4.6em; height: 22px; font: inherit; background: var(--bg); color: var(--ink);
  border: 1px solid var(--gold); border-radius: 2px; padding: 0 4px; }
body.panel-open:not(.menu-open) .structbtn { border-color: var(--gold); color: var(--gold); }

main { max-width: 1100px; margin: 0 auto; padding: 8px 16px 60px; }
main.plain { max-width: 880px; }
main.plain h2 { font: 500 24px/1.2 var(--display); margin: 26px 0 8px; color: var(--gold); }
/* «Как читать»: the way in. */
.howto-page { max-width: 720px; }
.howto-head { text-align: center; margin: 18px 0 8px; }
.howto-head h1 { margin: 2px 0 0; font: 500 clamp(36px, 6vw, 54px)/1.1 var(--display); color: var(--gold); }
section.howto p, section.howto li { font: 17px/1.55 var(--serif); }
section.howto ul { padding-left: 1.2em; }
.howto-go { text-align: center; margin: 28px 0; }
a.howto-link { display: inline-block; margin-top: 10px; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--muted); }
section.cover a.howto-link { display: block; margin-top: 8px; }
details > summary { cursor: pointer; }
details.sec { margin: 22px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
details.sec > summary { font: 500 22px/1.3 var(--display); list-style: none; color: var(--gold); }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::before { content: "✦"; color: var(--gold); font-size: 13px; margin-right: 10px; display: inline-block;
  transition: transform .2s; vertical-align: 3px; }
details.sec[open] > summary::before { transform: rotate(45deg); }
details.sec[open] > summary { margin-bottom: 10px; }
ol.docs { list-style: none; padding: 0; margin: 12px 0; }
ol.docs > li { margin: 8px 0; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line);
  border-left: 2px solid var(--grok); border-radius: 3px; }
ol.docs > li.gemini { border-left-color: var(--gemini); }
ol.docs > li > a { text-decoration: none; font: 500 19px/1.3 var(--display); color: var(--gold); }
ol.docs > li > a:hover { text-shadow: 0 0 14px var(--glow); }
ol.docs details { font-size: 14px; margin: 4px 0 0; }
ol.docs details > summary { color: var(--muted); font: 12px/1.6 var(--mono); }
.ideas { font-size: 14px; margin: 4px 0; }
.sub { color: var(--muted); font: italic 15px/1.4 var(--serif); }

/* The index as a book's cover: a double gold frame with corner marks, fitted to the
   first screen; the engraving keeps to its share of it. */
section.cover { position: relative; max-width: 640px; min-height: min(calc(100vh - 80px), 860px); margin: 18px auto 34px;
  padding: 34px 32px 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; background: var(--panel); border: 1px solid var(--gold);
  outline: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); outline-offset: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
section.cover::before, section.cover::after { content: "✦"; position: absolute; left: 50%; transform: translateX(-50%);
  color: var(--gold); font-size: 13px; background: var(--bg); padding: 0 8px; line-height: 1; }
section.cover::before { top: -13px; }
section.cover::after { bottom: -13px; }
section.cover h1 { margin: 2px 0 0; font: 500 clamp(44px, 8vw, 72px)/1 var(--display); color: var(--gold); letter-spacing: .02em; }
section.cover .sub { font-size: 18px; margin-top: -2px; }
section.cover img { width: 100%; max-height: 38vh; object-fit: contain; margin: 6px 0; }
section.cover .frontis { width: 100%; display: flex; flex-direction: column; align-items: center; }
/* The version under the engraving, quiet; it opens «Что нового». In the middle (the owner,
   2026-10-16: «версию по центру поставить»; «на пк тоже в центре сделай»). */
section.cover a.ver { align-self: center; font: 11px/1.4 var(--mono); letter-spacing: .08em; color: var(--muted); text-decoration: none; }
section.cover a.ver:hover { color: var(--gold); }
section.cover p { max-width: 30em; margin: 4px 0; font: 17px/1.5 var(--serif); }
section.cover a.read { display: inline-flex; align-items: center; height: 38px; margin: 10px 0 4px; padding: 0 20px; border-radius: 3px;
  border: 1px solid var(--gold); color: var(--gold); text-decoration: none; font: 600 12px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; }
section.cover a.read:hover { box-shadow: 0 0 18px var(--glow); background: var(--glow); }
/* «сделано в Шарашке» (public build): quiet, as the version under the engraving. */
section.cover .maker { margin-top: 8px; font: 11px/1.4 var(--mono); letter-spacing: .08em; color: var(--muted); }
section.cover .maker a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
section.cover .maker a:hover { color: var(--gold); }
/* A phone: the margins do not grow with the text size (меню.css zooms the page by --k), and
   the cover's frames sit close to the edge (the owner, 2026-10-15: «поля слишком много места
   занимают на моб раскладке»). */
@media (max-width: 760px) {
  main:not(.book) { padding-left: calc(10px / var(--k, 1)); padding-right: calc(10px / var(--k, 1)); }
  body > header { padding-left: calc(10px / var(--k, 1)); padding-right: calc(10px / var(--k, 1)); }
  main section.opus { padding: calc(16px / var(--k, 1)) calc(14px / var(--k, 1)); }   /* over the base rule below */
  section.cover { min-height: 0; padding: calc(24px / var(--k, 1)) calc(12px / var(--k, 1)) calc(18px / var(--k, 1));
    margin: calc(12px / var(--k, 1)) calc(4px / var(--k, 1)) calc(30px / var(--k, 1));
    outline-offset: calc(4px / var(--k, 1)); }
  /* The cover's count: one line at 100 % (less tracking, a size that follows the width); at a
     bigger size it wraps between its parts, never past the frame («вылезает текст на 150»). */
  section.cover .kicker { white-space: normal; letter-spacing: .1em; font-size: min(11px, 2.9vw); line-height: 1.5; }
  section.cover .kicker span { white-space: nowrap; }
  section.cover a.read { white-space: nowrap; padding: 0 14px; letter-spacing: .06em; } }

/* The opus on the index: its card. */
section.opus { margin: 8px 0 8px; padding: 20px 24px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 3px; position: relative; }
section.opus::before, section.opus::after { content: ""; position: absolute; width: 12px; height: 12px;
  border: 1px solid var(--gold); pointer-events: none; }
section.opus::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
section.opus::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
section.opus .kicker, .kicker { font: 600 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
section.opus h2 { margin: 6px 0 2px; font: 500 34px/1.1 var(--display); }
section.opus h2 a { text-decoration: none; color: var(--gold); }
section.opus p { margin: 10px 0; font: 17px/1.55 var(--serif); }
section.opus a.read { display: inline-flex; align-items: center; height: 34px; margin: 4px 0 8px; padding: 0 16px; border-radius: 3px;
  border: 1px solid var(--gold); color: var(--gold); text-decoration: none; font: 600 12px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; }
section.opus a.read:hover { box-shadow: 0 0 18px var(--glow); background: var(--glow); }
section.opus details > summary { color: var(--muted); font: 12px/1.6 var(--mono); }
section.opus details ol { font-size: 14px; }
a.idea { text-decoration: none; border: 1px solid var(--line); border-radius: 2px; padding: 0 7px; font-size: 13px; color: var(--azure); }
a.idea:hover { border-color: var(--azure); color: var(--azure); }
ol.lines > li { margin: 10px 0; }
ol.lines ol { font-size: 14px; }
ul.cols { font-size: 14px; padding-left: 20px; }
ul.cols li { margin: 3px 0; }
/* An admin's moves between the parts and «старое» (места.js): ↑ ↓ by each, a moved one
   marked; a dialogue among the documents is one line, as they are. */
li[data-doc] > button.mv { margin-left: 8px; width: 26px; height: 22px; padding: 0; font: 13px/1 var(--mono); color: var(--muted);
  background: none; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; vertical-align: middle; }
li[data-doc] > button.mv:hover { color: var(--gold); border-color: var(--gold); }
ol.docs > li[data-doc] { position: relative; }
ol.docs > li:has(> button.mv) { padding-right: 48px; }
ol.docs > li[data-doc] > button.mv { position: absolute; top: 10px; right: 10px; margin: 0; }
li.moved::after { content: "перенесён"; margin-left: 8px; font: 11px/1 var(--mono); color: var(--muted); }
ul.cols > li.doc > :is(.meta, details) { display: none; }
ul.cols > li.doc > a { font: inherit; }

/* A work's book (works.py): what it is, folded between the title and the text. */
.book .about { margin-bottom: 2.4em; }

/* --- The top line of a book (book_top): tucks away while one reads ---------------- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 7; transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.top.tuck { transform: translateY(calc(-1 * var(--tuck, 46px))); }
.bookbar { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 0; background: var(--glass);
  backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 color-mix(in srgb, var(--gold) 18%, transparent); }
.bookbar nav.site { background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; flex: 0 1 auto; min-width: 0; }
.bookbar .bt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
  font: italic 16px/1 var(--display); color: var(--muted); }
.top .bar { position: static; }
/* The site's links keep their width; the book's title gives way. Where the line still
   does not fit, книга.js takes out step by step (the rule of every page's line, строка.js):
   the title (.notitle), then «Публ.», 🔖 📌 and the theme (.lean), then the site's links
   from the right (.over); all of them are in the contents (☰). */
.bookbar nav.site { flex: none; flex-wrap: nowrap !important; }   /* one row: what does not fit is measured, not wrapped */
.bookbar.notitle .bt { visibility: hidden; }
.bookbar nav.site a.over, .bookbar.lean > .themebtn, .bookbar.lean > .vsbtn, .bookbar.lean > a.door,
/* ↶ stays: the way back is wanted at the top (the owner, 2026-10-14: «в книге нету кнопки назад сверху»). */
.bookbar.lean > button.mkb:not(.way, .upd), .bookbar.lean > .musbox, .bookbar.lean nav.site .mkb { display: none; }
.bookbar { position: relative; }
/* The tail (🔖 📌 ↶ and the theme) at the right edge, the buttons' height of the row. */
.bookbar > .themebtn { height: 30px; margin-left: 0; }
.bookbar > .vsbtn { flex: none; width: 30px; height: 30px; padding: 0; font: 15px/1 var(--mono, monospace); color: var(--muted);
  background: transparent; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.bookbar > .vsbtn:hover { color: var(--gold); border-color: var(--gold); }
.bookbar > .mkb + .mkb, .bookbar > .mkb + .themebtn, .bookbar > .themebtn + .vsbtn { margin-left: -4px; }   /* 6px apart, as on the cover */
button.menubtn.on { border-color: var(--gold); color: var(--gold); }
.backbtn b { margin-left: 1px; }
/* No flash over a turn touched on a phone: the text listens to taps (the top line). */
.book { -webkit-tap-highlight-color: transparent; }
/* Hidden till put on the kept place (книга.js); laid out all the same, so it is measured. A
   slow put says so (the owner, 2026-10-16: «и индикацию загрузки в процессе»), over the leaf. */
html.vita-placing .book { opacity: 0; }
.book { transition: opacity .12s; }
html.vita-placing body::after { content: "Открываю" var(--vita-pp, "") "…"; position: fixed; left: 50%; top: 50%; z-index: 2147483001;
  transform: translate(-50%, -50%); padding: 11px 18px; pointer-events: none; white-space: nowrap;
  font: 13px/1 var(--mono); letter-spacing: .06em; color: var(--gold); border: 1px solid var(--gold); border-radius: 3px;
  background: var(--bg); opacity: 0; animation: vita-wait-in .2s .3s forwards, vita-wait 1.3s ease-in-out .5s infinite alternate; }
/* It breathes by its opacity alone, which the compositor draws: a sweep of its background was
   painted anew every frame, the main thread taken from the book being put (2026-10-16). */
@keyframes vita-wait-in { to { opacity: 1; } }
@keyframes vita-wait { from { opacity: 1; } to { opacity: .5; } }
/* The leaf a text opens with (the owner, 2026-10-16: «анимация появления его из кнопки, на которую
   тыкнули, в виде отлистывающегося с изгибом в середине листа, но анимация быстрая»): a sheet of
   the page's colour, two halves hinged in the middle — out of the link (--ldx, --ldy, --ls: the
   head's script), the right half turning over like a page; it waits flat while the place is put,
   then fades (leaf-off). Off in ⚙ Настройки. */
/* Each half is the whole screen cut at the fold, with the page's own background (grain, grid —
   the owner, 2026-10-16: «фоновую сетку потерял»): its cells lie where the page's do. */
html.vita-leaf::before, html.vita-leaf::after { content: ""; position: fixed; top: 0; left: 0; z-index: 2147483000; width: 100vw; height: 100vh;
  pointer-events: none; transform-origin: 50% 50%; backface-visibility: hidden; transition: opacity .22s ease-in; }
html.vita-leaf::before { clip-path: inset(0 50% 0 0);
  background: linear-gradient(to right, transparent 41%, rgba(0, 0, 0, .14) 50%, transparent 50%), var(--grain), var(--grid), var(--bg);
  animation: vita-leaf-l .34s cubic-bezier(.2, .7, .2, 1) both; }
html.vita-leaf::after { clip-path: inset(0 0 0 50%);
  background: linear-gradient(to left, transparent 39%, rgba(0, 0, 0, .2) 50%, transparent 50%), var(--grain), var(--grid), var(--bg);
  animation: vita-leaf-r .34s cubic-bezier(.3, .6, .2, 1) both; }
html.vita-leaf.leaf-off::before, html.vita-leaf.leaf-off::after { opacity: 0; }
@keyframes vita-leaf-l {
  from { transform: perspective(1600px) translate(var(--ldx), var(--ldy)) scale(var(--ls)) rotateY(50deg); }
  to { transform: perspective(1600px) translate(0, 0) scale(1) rotateY(0); } }
@keyframes vita-leaf-r {
  from { transform: perspective(1600px) translate(var(--ldx), var(--ldy)) scale(var(--ls)) rotateY(-140deg); }
  45% { transform: perspective(1600px) translate(calc(var(--ldx) * .3), calc(var(--ldy) * .3)) scale(calc(.55 + var(--ls) * .45)) rotateY(-70deg); }
  to { transform: perspective(1600px) translate(0, 0) scale(1) rotateY(0); } }
@media print { html.vita-leaf::before, html.vita-leaf::after, html.vita-placing body::after { display: none; } }

/* The contents (☰, book_top): sections, a page, the site. One side panel with the structure
   (the owner, 2026-10-15: «форма, положение, оформление разное»): the same place under the
   top line, width, head with the two tabs; over the structure while open (z-index). Its top
   stays put when a phone's address bar comes and goes (the bottom moves), so a tap on A+
   lands where it was aimed. */
.menu { position: fixed; top: var(--toph, 46px); right: 0; bottom: 0; z-index: 8; width: min(380px, 100vw);
  overflow: auto; overscroll-behavior: contain;
  padding: 0 18px 40px; background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -10px 0 30px rgba(0, 0, 0, .28); font: 14px/1.45 var(--serif); }
/* The head stays while the panel scrolls (the owner, 2026-10-15: «шапку оглавления и структуры
   надо закрепить»): the panel's top padding is the head's, so it stands still when it sticks. */
.menu .mh, aside.panel .ph { position: sticky; top: 0; z-index: 2; box-sizing: content-box; height: 34px; padding: 12px 0 0;
  background: var(--panel); display: flex; align-items: flex-end; justify-content: space-between; margin: 0 0 12px;
  border-bottom: 1px solid var(--line);
  font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.menu .mh > b, aside.panel .ph > b { align-self: center; }
.tabs { display: flex; gap: 4px; align-self: stretch; }
.tabs .tab { margin-bottom: -1px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--muted); font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.tabs .tab:first-child { padding-left: 0; }
.tabs .tab.on { color: var(--gold); border-bottom-color: var(--gold); cursor: default; }
.tabs .tab:not(.on):hover { color: var(--ink); }
.menu .mh .x-btn, aside.panel .ph .x-btn { align-self: center; }
.menu .x-btn { width: 30px; height: 30px; border: 1px solid transparent; border-radius: 3px; background: none; color: var(--muted);
  font-size: 20px; cursor: pointer; }
.menu .x-btn:hover { border-color: var(--line); color: var(--ink); }
.menu .mback { width: 100%; margin: 2px 0 10px; }
.menu .mpage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.menu .mpage label { font: 12px/1 var(--mono); color: var(--muted); }
.menu .mpage input { width: 5.5em; height: 30px; font: 13px/1 var(--mono); background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 3px; padding: 0 6px; }
.menu h3 { margin: 20px 0 8px; font: 600 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.menu h3::before { content: "✦ "; color: var(--gold); }
.menu h3 .pp { float: right; letter-spacing: 0; text-transform: none; font-weight: 400; }
.menu ol.toc { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.menu ol.toc li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); counter-increment: toc; }
.menu ol.toc li::before { content: counter(toc); flex: none; width: 1.6em; text-align: right; font: 11px/1.9 var(--mono); color: var(--muted); }
.menu ol.toc li a { flex: 1; text-decoration: none; color: var(--ink); line-height: 1.4; }
.menu ol.toc li a:hover { color: var(--azure); }
.menu ol.toc li.on { box-shadow: inset 2px 0 0 var(--gold); }
.menu ol.toc li.on a { color: var(--gold); }
.menu ol.toc .pp { flex: none; color: var(--muted); font: 11px/1.9 var(--mono); }
.menu .mnav { display: flex; flex-direction: column; }
.menu .mnav a { padding: 7px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.menu .mnav a:hover { color: var(--azure); }
.menu .mfont b { min-width: 3.2em; text-align: center; font-weight: 500; color: var(--ink); }
.menu .mtheme, .menu .mfont, aside.panel .mfont { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 12px/1 var(--mono); color: var(--muted); }
.menu .mfont[hidden], aside.panel .mfont[hidden] { display: none; }
.menu .mwords, aside.panel .mwords { cursor: pointer; }
aside.panel .pview .mfont { margin-top: 6px; }
.menu .themebtn { width: 34px; height: 30px; font: 15px/1 var(--mono); color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }

/* Bars of a way (an idea, a word): under the top line, always there while on. */
.bar { position: sticky; top: 0; z-index: 5; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--azure); padding: 7px 44px 7px 16px; font: 13px/1.45 var(--mono); }
.bar b { font: 600 16px/1 var(--display); color: var(--gold); }
.bar .nav { white-space: nowrap; margin-left: 6px; }
.bar .nav a, .bar .nav .off { margin-right: 8px; text-decoration: none; }
.bar .close { position: absolute; right: 14px; top: 4px; font-size: 20px; text-decoration: none; color: var(--muted); }
.wbar { border-bottom-color: var(--gold); }

/* --- The book: a dialogue or a document of «старое» --------------------------- */
.book { --measure: 41rem; --fs: 20px; --lh: var(--lhu, 1.2); max-width: calc(var(--measure) + 10rem); padding: 0 5rem 30vh; margin: 0 auto;
  font: 400 calc(var(--fs) * var(--k, 1))/var(--lh) var(--serif); font-variant-numeric: oldstyle-nums; hyphens: auto; -webkit-hyphens: auto; }
.book header.title { text-align: center; border: 0; padding: 40px 0 26px; margin-bottom: 28px; }
.book header.title .sigil { width: 132px; height: 132px; margin: 0 auto 14px; }
.book header.title h1 { font: 500 46px/1.08 var(--display); margin: 10px 0 8px; letter-spacing: .005em; color: var(--gold); }
.book header.title .meta { margin-top: 10px; }
.book header.title::after { content: "☉ · ☿ · ☽"; display: block; margin-top: 22px; color: var(--gold); font: 14px/1 var(--mono);
  letter-spacing: .5em; }

/* Block = chapter: the number in mono, the title in display. The band of the serpent
   closes a block (the owner, 2026-10-13: at its end, not over the next one's name):
   it stands in the space above the next heading — a block opening a page brings its
   name to the top, the band stays with the text before — and after the book's last. */
.book { --band: 60px; }
.book h2.ep { text-align: center; font: 500 28px/1.2 var(--display); color: var(--gold); overflow-wrap: anywhere;
  margin: calc(var(--band) + 3.2em) 0 1.5em; scroll-margin-top: 70px; position: relative; }
.book h2.ep::before, main.book[data-doc]:not([data-kind])::after { content: ""; width: min(560px, 100%); height: var(--band);
  background: url("арт/headpiece.webp") center / contain no-repeat; filter: var(--img-filter); opacity: .9; }
.book h2.ep::before { position: absolute; left: 50%; top: calc(-1 * var(--band) - 1.6em); transform: translateX(-50%); }
main.book[data-doc]:not([data-kind])::after { display: block; margin: 2.6em auto 0; }
.book h2.ep .no { display: block; font: 600 11px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase;
  color: var(--rubric); margin-bottom: 10px; }
/* The ideas moved in the block, under its heading (from the registry). */
.book h2.ep .epi { display: block; margin: .7em auto 0; max-width: 36em; font: 400 13px/1.6 var(--ui); color: var(--muted);
  text-wrap: balance; }
.book h2.ep .epi summary { cursor: pointer; list-style: none; font: 500 11px/1.8 var(--mono); letter-spacing: .06em; }
.book h2.ep .epi summary::-webkit-details-marker { display: none; }
.book h2.ep .epi summary::before { content: "▸ "; }
.book h2.ep .epi[open] summary::before { content: "▾ "; }
.book h2.ep .epi a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--line); }
.book h2.ep .epi a:hover { color: var(--gold); }
/* The first letter of a chapter, in cinnabar, as the rubricator did; and of every
   turn of the author's (the owner, 2026-10-13: "otherwise it looks poor"). */
.book .x.doc > p:first-of-type:not(.head, .lead)::first-letter,
.book h2.ep + .turn .x > p:first-of-type::first-letter, .book .turn.author .x > p:first-of-type::first-letter { float: left; font: 500 4.3em/.8 var(--display); color: var(--rubric);
  text-transform: uppercase; margin: .04em .09em 0 0; font-variant-numeric: lining-nums; }
/* Sunk three lines by the browser itself (the owner, 2026-10-15: two, then «увеличь до трёх
   строк» — a turn of two lines read beside the letter, a longer one went under it): the letter's
   foot on the third line's baseline, the fourth under it at full width, at any scale and line
   height. The gap on the right is the one under it: a line's height less the text's capitals.
   A figure stands as a capital (lining): the display face's own are old style, a 1 was a small I. */
@supports (initial-letter: 3) {
  .book .x.doc > p:first-of-type:not(.head, .lead)::first-letter,
  .book h2.ep + .turn .x > p:first-of-type::first-letter, .book .turn.author .x > p:first-of-type::first-letter {
    float: none; initial-letter: 3; font: 500 1em/1 var(--display); font-variant-numeric: lining-nums;
    margin: 0 calc(var(--fs) * var(--k, 1) * (var(--lh) - .65)) 0 0; }
}
.book header.title + h2.ep { margin-top: 1.2em; }
.book header.title + h2.ep::before { display: none; }

/* Turns: Sol (the author) and Luna (the model) — who speaks only as a mark. */
.turn { position: relative; margin: 0 0 1.4em; scroll-margin-top: 70px; }
/* The text set to both edges (the owner, 2026-10-14), words broken by hyphens. */
.book .x p, .book .x li { text-align: justify; }
/* A one-word turn is shorter than its initial: the text holds the float, or the next
   turn's label climbs beside the letter. */
.turn .x { display: flow-root; }
.turn .who { font: 600 10.5px/11px var(--mono); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 6px; }
.turn.author .who { color: var(--author); }
.turn.author .who::before { content: "☉ "; }
.turn.model .who { color: var(--model); }
.turn.model .who::before { content: "☽ "; }
.turn.author { padding-left: 1.1em; border-left: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); }
.turn.author::before { content: ""; position: absolute; left: -3px; top: 0; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }
/* The turn's number sits level with who speaks; the mark of moved ideas under it. */
.turn .n { position: absolute; left: -4.4rem; top: 0; width: 3rem; text-align: right; font: 500 11px/11px var(--mono);
  color: var(--muted); text-decoration: none; font-variant-numeric: tabular-nums; }
.turn.author .n { left: calc(-4.4rem - 1.1em - 1px); }
.turn .n:hover { color: var(--gold); }
/* A turn's number is not a page's: it says so (the owner read 5, 4 and 3.2 on one
   screen and could not tell them apart). */
.turn .n::before { content: "№"; opacity: .6; margin-right: 1px; }
.turn .mk { position: absolute; left: -4.4rem; top: 18px; width: 3rem; text-align: right; border: 0; background: none; color: var(--azure);
  cursor: pointer; font: 11px/1 var(--mono); padding: 0; opacity: .85; }
.turn .mk:hover { opacity: 1; text-shadow: 0 0 10px var(--azure); }
.turn.author .mk { left: calc(-4.4rem - 1.1em - 1px); }
.turn.hl::after { content: ""; position: absolute; left: -1rem; top: 0; bottom: 0; width: 2px; background: var(--azure);
  box-shadow: 0 0 10px var(--azure); }
.turn.author.hl::after { left: calc(-1rem - 1.1em - 1px); }
/* The turn arrived at flares and goes out by itself (the owner, 2026-10-15: a lit turn stayed lit
   «как будто выделенный текст, живущий по своим законам» — the hash outlives the arrival). The
   idea's current move keeps a gold rule beside it instead, its way shown by .hl. */
.turn:target .x, .turn.cur .x { border-radius: 1px; animation: arrive 3.2s ease-in both; }
.turn.cur::after { background: var(--gold); box-shadow: 0 0 10px var(--glow); }
@keyframes arrive { 0%, 45% { background: var(--sel); box-shadow: 0 0 0 8px var(--sel); }
  100% { background: transparent; box-shadow: 0 0 0 8px transparent; } }
/* To a word (?w=, документ.js): the word lit, its turn not. */
body.wjump .turn:target:not(.cur) .x { animation: none; }
.x .w.hit { background: var(--sel); box-shadow: 0 0 0 3px var(--sel); border-radius: 2px; text-decoration-style: solid; }
.turn.author .x { color: var(--author-ink); }
.turn.model .x { color: var(--model-ink); }
/* Text the author brought into his turn (a reply of Grok, an article): his turn, its voice. */
.turn.author .x .paste { color: var(--model-ink); margin: .7em 0; padding: .1em 0 .1em .9em;
  border-left: 2px solid color-mix(in srgb, var(--model) 55%, transparent); }
.turn.author .x .paste::before { content: "Вставка · " attr(data-src); display: block; margin-bottom: .35em;
  font: 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--model); }
.turn.author .x .paste[data-src=""]::before { content: "Вставка"; }
.turn.model:not(.open) .x { color: var(--muted); }
.turn.model.failed .x::after { content: " — полный текст не загрузился, обновите страницу"; color: var(--warn); }
.x { overflow-wrap: anywhere; position: relative; }
.x p { margin: 0 0 .7em; }
.x ul, .x ol { margin: .2em 0 .8em; padding-left: 1.5em; }
.x li::marker { color: var(--gold); }
.x li > p { margin: .1em 0; }
.x strong, .x b { font-weight: 600; }
.x blockquote { margin: .6em 0; padding: 0 1.1em; border-left: 1px solid var(--gold); color: var(--muted); font-style: italic; }
.x pre { white-space: pre-wrap; background: var(--chip); padding: 8px 10px; border-radius: 2px; font: 13px/1.5 var(--mono); }
.x code { font: .82em var(--mono); }
/* Pasted code (reading_room.codify): a block, not prose; pandoc's token classes in the
   site's colours; the note says whether the indents were lost or put back by reading. */
.x div.sourceCode { margin: 1em 0; position: relative; scroll-margin-top: 12px; }
.x div.sourceCode:is(:has(pre.python), :has(pre.latex))::before { content: "Python"; display: block; margin-bottom: 4px;
  padding-right: 4.5em; font: 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); }
.x div.sourceCode:has(pre.latex)::before { content: "LaTeX"; }
.x div.sourceCode:has(pre.lost)::before { content: "Python · отступы потеряны при экспорте"; }
.x div.sourceCode:has(pre.indented)::before { content: "Python · отступы восстановлены по смыслу: в экспорте их нет"; }
.x pre.sourceCode { text-align: left; tab-size: 4; }
.x pre.sourceCode code { font: inherit; }
.x pre.sourceCode a { display: none; }
/* A line too long for the screen goes on 4 characters past its own indent: a wrapped
   line is not taken for a new one (a phone, 2026-10-14). --i — the indent (CODE_LINE). */
.x pre.sourceCode code > span { display: inline-block; padding-left: calc(var(--i, 0ch) + 4ch); text-indent: calc(-1 * (var(--i, 0ch) + 4ch)); }
.x code .co { color: var(--muted); font-style: italic; }
.x code .kw, .x code .cf, .x code .im { color: var(--gold); }
.x code .st, .x code .ch, .x code .ss { color: var(--malachite); }
.x code .dv, .x code .fl, .x code .bn, .x code .cn { color: var(--azure); }
.x code .bu, .x code .fu { color: var(--model-head); }
.x code .ex, .x code .at { color: var(--rubric); }
/* «Код ›»: the block in код.html, the book's code apart (code_page.py); a block arrived
   at from there (?k=) is lit. */
.x a.cref { position: absolute; top: 0; right: 0; font: 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--gold); }
.x div.sourceCode.hit { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 2px; animation: spot 1.4s ease-out; }
.x details.codenote { margin: -.6em 0 1em; font: 13px/1.5 var(--mono); color: var(--muted); }
.x details.codenote summary { cursor: pointer; letter-spacing: .04em; }
.x details.codenote p { margin: .4em 0 0; text-align: left; font: 15px/1.45 var(--ui); color: var(--ink); }
/* Formulas (MathML from the model's TeX): amethyst, the engravings' own colour — not gold
   (author), silver (model) or azure (apparatus). A display formula wider than the
   column scrolls in itself. */
.x math { font-family: math, "STIX Two Math", "Cambria Math", "Latin Modern Math", "Noto Sans Math", serif;
  color: var(--art); font-size: 1.06em; }
.x math[display="inline"] { padding: 0 .2em; border-radius: 2px; background: color-mix(in srgb, var(--art) 10%, transparent); }
.x .mathblock { display: block; margin: .6em 0; padding: .5em .9em; overflow-x: auto; overflow-y: hidden;
  border-left: 2px solid color-mix(in srgb, var(--art) 60%, transparent); background: color-mix(in srgb, var(--art) 6%, transparent); }
.x .mathblock math { margin: 0; }
/* Tables of the turns (622 in the corpus): pandoc fixes column widths (5% for the first
   one) and the text may break anywhere, which left a column a letter wide. Columns take
   their content's width, words stay whole, a wide table scrolls inside itself. */
.x table { border-collapse: collapse; display: block; overflow-x: auto; width: auto !important; max-width: 100%;
  margin: .8em 0 1.1em; font: 15.5px/1.45 var(--serif); font-variant-numeric: lining-nums;
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.x table col { width: auto !important; }
.x th, .x td { padding: 7px 12px; vertical-align: top; text-align: left !important; overflow-wrap: normal; word-break: normal;
  hyphens: auto; -webkit-hyphens: auto; min-width: 9em; max-width: 30em; border-bottom: 1px solid var(--line); }
.x th + th, .x td + td { border-left: 1px solid var(--line); }
.x th { font: 600 11px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid var(--gold); white-space: normal; }
.x th strong, .x th b { color: inherit !important; font-weight: inherit; }
.x tbody tr:nth-child(even) { background: color-mix(in srgb, var(--chip) 55%, transparent); }
.x tbody tr:hover { background: var(--sel); }
.x td:first-child { min-width: 8em; }
/* On a phone a table of three columns or more (reading_room.table_cards) is a stack
   of cards: a row is a card, its first cell the title, the rest under their column's
   name — nothing to scroll sideways. */
@media (max-width: 560px) {
  .x table[data-cards], .x table[data-cards] tbody, .x table[data-cards] tr, .x table[data-cards] td { display: block; }
  .x table[data-cards] { overflow: visible; }
  .x table[data-cards] thead { display: none; }
  .x table[data-cards] tr { padding: 8px 10px; border-bottom: 1px solid var(--line); }
  .x table[data-cards] tr:last-child { border-bottom: 0; }
  .x table[data-cards] td { min-width: 0; max-width: none; padding: 3px 0; border: 0; }
  .x table[data-cards] td:first-child { font-weight: 600; }
  .x table[data-cards] td + td::before { content: attr(data-th); display: block; margin-top: 2px;
    font: 600 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
}
.x hr { border: 0; text-align: center; margin: 1.4em 0; }
.x hr::after { content: "✦ ✦ ✦"; color: var(--gold); letter-spacing: .8em; font-size: 12px; }
.x .footnotes { font-size: 15px; color: var(--muted); }
.x h1, .x h2, .x h3, .x h4, .x h5, .x h6 { font: 600 1.05em/1.3 var(--display); margin: 1em 0 .3em; }
/* The model's structure in three colours, as a rubricator would set it:
   I — headings (h1–h3, a paragraph all in bold, a plain subheading): malachite, display type;
   II — the lead of a point (bold at the head of a list item): Luna's bright silver;
   III — the lead of a sub-point (a list inside a list): silver, italic.
   Bold inside running text is only weight, in the turn's own ink. The author: gold.
   A document of «старое» (.x.doc) is rubricated the same, with no voice: ✦ for ☽ (the
   owner, 2026-10-15: «и старое тоже сделай так же»). */
.turn.author .x :is(h1, h2, h3, h4, h5, h6, strong, b) { color: var(--author); }
.turn.model.open .x :is(strong, b) { color: inherit; }
.turn.model.open .x :is(h1, h2, h3), .turn.model.open .x p.head, .x p.lead, .x.doc :is(h1, h2, h3, p.head) {
  font: 600 1.1em/1.3 var(--display); letter-spacing: .01em; margin: 1.2em 0 .4em; color: var(--malachite); }
:is(.turn.model.open .x, .x.doc) :is(h1, h2, h3, p.head, p.lead) :is(strong, b) { color: inherit; font-weight: inherit; }
:is(.turn.model.open .x, .x.doc) :is(h4, h5, h6) { color: var(--malachite); font-size: 1em; }
.x p.lead::before, .turn.model.open .x p.head::before { content: "☽"; font: 11px/1 var(--mono); color: var(--model); margin-right: .55em;
  vertical-align: .18em; opacity: .8; }
.x.doc :is(p.head, p.lead)::before { content: "✦"; color: var(--gold); }
:is(.turn.model.open .x, .x.doc) li > :is(strong, b):first-child,
:is(.turn.model.open .x, .x.doc) li > p:first-child > :is(strong, b):first-child { color: var(--model-head); }
:is(.turn.model.open .x, .x.doc) li li > :is(strong, b):first-child,
:is(.turn.model.open .x, .x.doc) li li > p:first-child > :is(strong, b):first-child { color: var(--silver); font-style: italic; }
:is(.turn.model.open .x, .x.doc) li li::marker { color: var(--silver); }
.pv { color: var(--muted); }
body.onlyauthor .turn.model { display: none; }
body.midway .turn.model:not(.kept) { display: none; }
/* What an author's turn answers, folded: only where the model's turn before it is hidden. */
.turn .ctx { display: none; }
body.onlyauthor .turn .ctx,
body.midway .turn.model:not(.kept) + .turn.author .ctx,
body.midway .turn.model:not(.kept) + h2.ep + .turn.author .ctx { display: block; }
.turn .ctx { margin: 0 0 .5em; font: 13px/1.5 var(--ui); color: var(--muted); }
.turn .ctx summary { cursor: pointer; list-style: none; color: var(--muted); font: 500 11px/1.8 var(--mono); letter-spacing: .04em; }
.turn .ctx summary::-webkit-details-marker { display: none; }
.turn .ctx summary::before { content: "▸ "; }
.turn .ctx[open] summary::before { content: "▾ "; }
.turn .ctx p { margin: .3em 0; padding-left: .8em; border-left: 1px solid var(--line); color: var(--model-ink); text-align: left; }
/* What of the text is shown (view()): one row of three equal parts, the chosen one gold, what it
   means under it — only the chosen one's line. */
.menu .mmode, aside.panel .mmode { border: 0; margin: 12px 0 0; padding: 0; min-width: 0; font: 12px/1.6 var(--mono); color: var(--muted); }
.mmode legend { float: left; width: 100%; margin: 0 0 6px; padding: 0; }
.mmode .seg { clear: both; display: flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.mmode .seg label { flex: 1; position: relative; cursor: pointer; }
.mmode .seg label + label { border-left: 1px solid var(--line); }
.mmode .seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mmode .seg span { display: block; padding: 7px 4px; text-align: center; font: 12px/1.2 var(--mono); color: var(--ink); white-space: nowrap; }
.mmode .seg label:hover span { color: var(--gold); }
.mmode .seg input:checked + span { background: var(--gold); color: var(--bg); }
.mmode .seg input:focus-visible + span { outline: 1px solid var(--gold); outline-offset: -3px; }
.mmode .mhint { display: none; margin: 6px 0 0; font: 12px/1.45 var(--ui); color: var(--muted); }
.mmode:has(#allturns:checked) .h-all, .mmode:has(#midway:checked) .h-mid, .mmode:has(#onlyauthor:checked) .h-author { display: block; }

/* Book pages on the outer margin, level with the paragraph's first line. */
a.pg { position: absolute; right: -4.6rem; width: 3.4rem; padding-left: 8px; text-align: left;
  font: 500 11px/calc(var(--fs) * var(--k, 1) * var(--lh)) var(--mono); font-variant-numeric: tabular-nums; color: var(--muted);
  text-decoration: none; border-left: 1px solid var(--line); scroll-margin-top: 90px; }
a.pg::before { content: "с."; opacity: .55; margin-right: 3px; }
a.pg:hover, a.pg:target { color: var(--gold); border-left-color: var(--gold); }
.x p:has(> a.pg:target), .x li:has(> a.pg:target) { animation: arrive-p 3.2s ease-in both; }
@keyframes arrive-p { 0%, 45% { background: var(--sel); box-shadow: 0 0 0 6px var(--sel); }
  100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
/* A page's mark is a place, not a button: no focus ring round the first line on arriving. */
a.pg:focus, a.pg:focus-visible { outline: none; }

/* --- The structure panel ------------------------------------------------------- */
/* Under the top line, as the contents (☰) are (the owner, 2026-10-14: «структуру как
   оглавление под панель опусти»): the line keeps its whole width; the panel follows it
   up when it tucks away (книга.js sets --toph and --tuckh). Below the line, so the
   contents open over it. */
aside.panel { position: fixed; top: var(--toph, 46px); right: 0; bottom: 0; width: min(380px, 100vw); z-index: 6; overflow: auto;
  transition: top .28s cubic-bezier(.2, .7, .2, 1);
  background: var(--panel); border-left: 1px solid var(--line); padding: 0 18px 40px; font: 14px/1.5 var(--ui);
  box-shadow: -10px 0 30px rgba(0, 0, 0, .28); }
aside.panel[hidden] { display: none; }
body:has(.top.tuck) aside.panel { top: calc(var(--toph, 46px) - var(--tuckh, 46px)); }
aside.panel .x-btn { width: 30px; height: 30px; border: 1px solid transparent; border-radius: 3px; background: none; color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer; }
aside.panel .x-btn:hover { border-color: var(--line); color: var(--ink); }
aside.panel h3 { font: 600 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px; }
aside.panel h3::before { content: "✦ "; color: var(--gold); }
aside.panel h4 { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; margin: 12px 0 4px; color: var(--muted); }
aside.panel .pgo label { font: 12px/1 var(--mono); color: var(--muted); }
aside.panel .pgo input { width: 5.5em; height: 30px; font: 13px/1 var(--mono); background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 3px; padding: 0 6px; margin: 0 4px; }
aside.panel .fold { display: block; margin: 10px 0; }
aside.panel ul, aside.panel ol { padding-left: 18px; margin: 4px 0; }
aside.panel li { margin: 4px 0; }
aside.panel .where { font: 12px/1.6 var(--mono); }
aside.panel .nav { font: 12px/1.6 var(--mono); }
aside.panel .nav a, aside.panel .nav .off { margin-right: 10px; }
aside.panel details > summary h3 { display: inline; }
/* Blocks of the book in the panel: each its own row, in ink — azure only under the hand,
   gold for the block one is in; a hairline between, the page on the right. */
aside.panel ol.toc { list-style: none; padding: 0; margin: 4px 0; counter-reset: toc; }
aside.panel ol.toc li { display: flex; gap: 10px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); counter-increment: toc; }
aside.panel ol.toc li::before { content: counter(toc); flex: none; width: 1.6em; text-align: right; font: 11px/1.9 var(--mono); color: var(--muted); }
/* The blocks set as in the contents (its tab of the same panel): the book's letter. */
aside.panel ol.toc li a { flex: 1; text-decoration: none; color: var(--ink); font: 14px/1.4 var(--serif); }
aside.panel ol.toc li a:hover { color: var(--azure); }
aside.panel ol.toc li a.on { color: var(--gold); }
aside.panel ol.toc li:has(a.on) { box-shadow: inset 2px 0 0 var(--gold); }
aside.panel ol.toc .pp { flex: none; color: var(--muted); font: 11px/1.9 var(--mono); }
aside.panel h3 .pp { float: right; letter-spacing: 0; text-transform: none; font-weight: 400; }
@media (min-width: 1300px) {
  body.panel-open .book { margin-right: 380px; margin-left: max(0px, calc((100vw - 380px - var(--measure) - 10rem) / 2)); }
}

/* --- The book as an encyclopedia (разметка.js) ---------------------------------- */
body.words .x .w { text-decoration: underline dotted var(--azure); text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  cursor: help; transition: color .15s, text-shadow .15s; }
body.words .x .w:hover { color: var(--azure); text-shadow: 0 0 12px color-mix(in srgb, var(--azure) 45%, transparent); }
body.words .x .w.on { background: var(--sel); text-decoration-style: solid; box-shadow: 0 0 0 2px var(--sel); }
.x mark.q { background: none; color: inherit; }
body.quotes .x mark.q { background: linear-gradient(transparent 64%, color-mix(in srgb, var(--gold) 26%, transparent) 0); cursor: pointer; }
aside.panel .wl { font-size: 13px; line-height: 1.7; }
.wpop { position: absolute; z-index: 9; width: max-content; max-width: min(440px, calc(100vw - 16px)); background: var(--panel);
  color: var(--ink); border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 14px 40px rgba(0, 0, 0, .38), 0 0 0 1px rgba(0, 0, 0, .05);
  padding: 12px 16px 12px; font: 14px/1.5 var(--ui); overscroll-behavior: contain; }
.wpop.tall { overflow-y: auto; }
.wpop[hidden] { display: none; }
.wpop .wh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.wpop .wh b { font: 600 22px/1.1 var(--display); color: var(--gold); }
.wpop .wh a.art { margin-left: auto; font: 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.wpop .kind, .enc .kind { font: 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.wpop p { margin: 8px 0; font: 16px/1.45 var(--serif); }
.wpop .gen, .enc .gen { font-style: italic; color: var(--muted); }
.wpop .meta { font-size: 11px; }
.wpop .row { margin: 7px 0 0; font: 12px/1.6 var(--mono); color: var(--muted); }
.wpop .row a { font-family: var(--ui); font-size: 13px; }
.wpop .nav a, .wpop .nav .off { margin-right: 8px; }
.wpop a.chip { text-decoration: none; border: 1px solid var(--line); border-radius: 2px; padding: 0 7px; display: inline-block; margin: 2px 0;
  color: var(--azure); }
.wpop a.chip:hover { border-color: var(--azure); }

/* энциклопедия.html */
.plate { max-height: 300px; margin: 0 auto 4px; }
header:has(> .plate) { text-align: center; }
header:has(> .plate) .abc { justify-content: center; }
header .abc { display: flex; flex-wrap: wrap; gap: 2px; margin: 10px 0; }
header .abc a { text-decoration: none; font: 600 13px/1 var(--mono); padding: 6px 7px; border: 1px solid transparent; border-radius: 2px;
  color: var(--muted); }
header .abc a:hover { border-color: var(--gold); color: var(--gold); }
header #wq { width: min(440px, 100%); height: 34px; font: 14px/1 var(--mono); padding: 0 10px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 3px; }
header #wq:focus { border-color: var(--gold); outline: 0; box-shadow: 0 0 14px var(--glow); }
.enc details.art { margin: 6px 0; padding: 8px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 2px;
  scroll-margin-top: 12px; }
.enc details.art > summary b { font: 600 19px/1.3 var(--display); color: var(--gold); }
.enc details.art[open] { border-left: 2px solid var(--gold); }
.enc details.art p { margin: 8px 0; font: 16px/1.5 var(--serif); }
.enc h4 { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px; }
.enc .see { font-size: 14px; margin: 6px 0; }
/* comments of the participants (from the forum, PAGE_JS in encyclopedia.py) */
.enc details.cm { margin: 14px 0 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.enc details.cm > summary { cursor: pointer; font: 600 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); }
.enc details.cm[open] > summary { color: var(--gold); }
.enc .cmi { margin: 10px 0; padding: 8px 12px; border-left: 2px solid var(--line); }
.enc .cmi > summary { cursor: pointer; list-style: none; }
.enc .cmi > summary::-webkit-details-marker { display: none; }
.enc .cmi > summary > .meta { margin: 0 0 4px; font-size: 13px; }
.enc .cmi > summary > .meta::before { content: "▸ "; color: var(--gold); }
.enc .cmi[open] > summary > .meta::before { content: "▾ "; }
.enc .cmi > summary > .teaser { margin: 0; font: 15px/1.45 var(--serif); }
.enc .cmi[open] > summary > .teaser { display: none; }
.enc .rich details.rs { border-top: 1px solid var(--line); margin: 2px 0; }
.enc .rich details.rs > summary { cursor: pointer; list-style: none; padding: 6px 0; }
.enc .rich details.rs > summary::-webkit-details-marker { display: none; }
.enc .rich details.rs > summary::before { content: "▸ "; color: var(--gold); }
.enc .rich details.rs[open] > summary::before { content: "▾ "; }
.enc .rich details.ask > summary .q { font-style: italic; color: var(--ink); }
.enc .rich details.ask[open] > summary .q { color: var(--gold); }
.enc .rich details.ask[open] { padding-left: 12px; border-left: 2px solid var(--line); }
.enc .rich details.ask[open] > summary { margin-left: -12px; }
.enc .rich details.rs > summary > :is(h2, h3, h4, h5, h6) { display: inline; margin: 0; }
.enc .cmi .meta b { color: var(--ink); }
.enc .cmadd { display: inline-block; margin: 6px 0 4px; text-decoration: none; }
.enc .rich { overflow-wrap: anywhere; font: 15px/1.5 var(--serif); }
.enc .rich > :first-child { margin-top: 0; }
.enc .rich p { font: inherit; margin: 6px 0; }
.enc .rich h2, .enc .rich h3, .enc .rich h4, .enc .rich h5, .enc .rich h6 { font: 600 17px/1.3 var(--display); color: var(--gold);
  letter-spacing: 0; text-transform: none; margin: 12px 0 4px; }
.enc .rich ul, .enc .rich ol { padding-left: 1.4em; margin: 4px 0 8px; }
.enc .rich blockquote { margin: 6px 0; padding: 2px 12px; border-left: 2px solid var(--line); color: var(--muted); }
.enc .rich code { font: 13px/1.4 var(--mono); padding: 0 3px; background: var(--chip, rgba(127, 127, 127, .12)); border-radius: 2px; }
.enc .rich pre { overflow-x: auto; padding: 8px 10px; background: var(--chip, rgba(127, 127, 127, .12)); }
.enc .rich pre code { padding: 0; background: none; }
.enc .rich table { border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; margin: 6px 0 10px; }
.enc .rich th, .enc .rich td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.enc .rich th { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.totop { position: fixed; right: 60px;  /* the feedback button (.fab) keeps the corner */ bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 8; height: 38px;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--gold); color: var(--gold); }
.totop[hidden] { display: none; }

/* --- Layouts: a laptop (≥ 1000 px) uses the screen's width; a phone (≤ 760 px) one column.
   In between — the plain column of 880 px. The book keeps its measure: lines for reading. */
@media (min-width: 1000px) {
  main.plain { max-width: 1240px; padding-left: 24px; padding-right: 24px; }
  header:not(.title) { padding-left: max(16px, calc((100% - 1240px) / 2 + 24px)); padding-right: max(16px, calc((100% - 1240px) / 2 + 24px)); }
  /* The cover as a spread: the engraving on the left page, the title on the right. */
  section.cover { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-auto-rows: auto;
    align-content: center; justify-items: start; column-gap: 48px; row-gap: 10px; max-width: none;
    min-height: min(calc(100vh - 110px), 600px); margin: 24px 6px 40px; padding: 44px 56px; text-align: left; }
  section.cover > .frontis, section.cover > img { grid-column: 1; grid-row: 1 / span 6; align-self: center; }
  section.cover .frontis { gap: 6px; }
  section.cover img { max-height: min(64vh, 560px); margin: 0; }
  section.cover > :not(.frontis):not(img) { grid-column: 2; }
  section.cover p { max-width: 28em; }
  ol.docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; align-items: start; }
  ol.docs > li { margin: 0; }
  ul.cols { columns: 2; column-gap: 40px; }
  ul.cols li { break-inside: avoid; }
  /* The encyclopedia: two columns of articles, an open one across both. */
  .enc .arts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; align-items: start; }
  .enc details.art[open] { grid-column: 1 / -1; }
  .enc details.art { margin: 0; }
  /* Search: results in two columns, each group under its heading. */
  .grp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .grp h2 { grid-column: 1 / -1; }
}
/* A wide laptop: the book a little larger, still about 70 letters a line. */
@media (min-width: 1400px) {
  .book { --measure: 44rem; --fs: 21px; }
}
@media (max-width: 900px) {
  .bookbar .bt { display: none; }
  .bookbar { gap: 6px; padding-right: 8px; }
  .bookbar nav.site { flex: 1 1 auto; }
}
@media (max-width: 760px) {
  /* Narrow margins (the owner, 2026-10-16: «да ужми поля»; were 2.3/2.7rem): the turn's number
     smaller and without «№», to fit beside its voice. */
  .book { --fs: 18px; padding: 0 1.6rem 30vh 1.4rem; }
  .book header.title h1 { font-size: 32px; }
  .book header.title .sigil { width: 96px; height: 96px; }
  .book { --band: 44px; }
  .book h2.ep { font-size: 23px; }
  .turn .n { left: -1.4rem; width: 1.2rem; font-size: 9px; }
  .turn .n::before { content: none; }
  .turn.author .n { left: calc(-1.4rem - 1px); width: 1.1rem; }   /* its box starts past the line; clear of its ◆ */
  .turn .mk { left: -1.4rem; width: 1.2rem; }
  .turn.author .mk { left: calc(-1.4rem - 1px); }
  /* A narrow margin: a page's start is a dashed break across the text, "с. 4" at
     its end on the margin — where page 4 begins, not one more bare number. */
  a.pg { left: 0; right: -1.5rem; width: auto; padding: 0; text-align: right; font-size: 10px;
    border-left: 0; border-top: 1px dashed color-mix(in srgb, var(--gold) 75%, transparent); pointer-events: none; }
  a.pg::before { content: "с."; margin-right: 1px; }
  /* The break stands apart from the text (the owner, 2026-10-15): the paragraph under it goes
     down by .6 of a line, the dash halfway — between the label above and the capitals below. */
  .x :has(> a.pg) { padding-top: calc(var(--fs) * var(--k, 1) * var(--lh) * .6); }
  .x :has(> a.pg) > a.pg { transform: translateY(calc(var(--fs) * var(--k, 1) * var(--lh) * -.3)); }
  .bar .nav { white-space: normal; }
  .btn, button.pageno, button.structbtn { padding: 0 9px; }
  /* A narrow screen: until книга.js has fitted the line, the sign (to the index), the page
     and the panel; then the links that fit (the owner, 2026-10-15). */
  .bookbar:not(.fitted) nav.site a:not(.brand, .help) { display: none; }
  .bookbar .lbl { display: none; }
  nav.site a { padding: 7px 7px; }
  /* The theme is in the contents (☰): the row keeps the sign, the way back, the page, ☰ and ◈.
     So are «Публ.» (дверь.js) and 🔖 📌 (закладки.js) — the rule of every page's line on a
     narrow screen: the way through the site in the row, the rest behind ☰ (2026-10-13). */
  .bookbar > .themebtn, .bookbar > .vsbtn, .bookbar > a.door, .bookbar > button.mkb:not(.upd) { display: none; }
}
@media (max-width: 560px) {
  /* The site's line fits a phone: the sign for the brand («Диалоги» leads to the same index), tighter links. */
  nav.site { padding: 6px 8px; letter-spacing: 0; flex-wrap: wrap; row-gap: 2px; }
  /* Wraps rather than scrolls: with «Форум», «Публ.» and 🔖 the buttons went past the edge unseen. */
  nav.site a { padding: 7px 6px; }
  nav.site a.brand { font-size: 0; margin-right: 2px; }
  nav.site a.brand::before { width: 24px; height: 24px; margin: -6px 0; }
}
/* A middle window (913px) holds the line in one row with tighter links: «Работы» and the emblem
   came in 2026-10-15 (the forum's line: forum.css, the same width). */
@media (min-width: 761px) and (max-width: 1000px) { nav.site a { padding: 7px 6px; } nav.site a.brand { margin-right: 6px; } }
@media (max-width: 360px) { nav.site { font-size: 11px; } nav.site a { padding: 7px 4px; } }
/* The line's tail and its ☰ panel: меню.css (tools/site_menu.css), the same on the forum. */
@media (max-width: 480px) {
  /* The counter keeps the page (and its screen): the total is in the contents (☰). */
  button.pageno .tot { display: none; }
  .bookbar nav.site a.brand { font-size: 0; margin-right: 0; }
  .bookbar nav.site a.brand::before { width: 24px; height: 24px; margin: -6px 0; }
  .btn.flip { padding: 0 7px; }
}

/* The forum's doors (форум.js): "Обсудить" over a selection, "✎" by a turn's voice. */
button.discuss { position: fixed; z-index: 9; height: 32px; padding: 0 14px; font: 600 12px/1 var(--mono); letter-spacing: .04em;
  color: var(--panel); background: var(--gold); border: 0; border-radius: 3px; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
button.discuss.hidden { display: none; }
.turn a.ed { font: 12px/1 var(--mono); color: var(--muted); text-decoration: none; margin-left: 6px; opacity: 0; transition: opacity .15s; }
.turn:hover a.ed, .turn a.ed:focus-visible { opacity: 1; }
.turn a.ed:hover { color: var(--gold); }
@media (hover: none) { .turn a.ed { opacity: .6; } }

/* Turning pages (книга.js): ‹ › hug the page counter; the hint shows once and fades. */
.pager { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.pager button.flip { width: 30px; padding: 0; font-size: 17px; border-color: transparent; color: var(--muted); }
.pager button.flip:hover { color: var(--gold); border-color: var(--line); }
.fliphint { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9; max-width: calc(100vw - 32px);
  padding: 9px 14px; font: 12px/1.4 var(--mono); color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: 3px; box-shadow: 0 8px 26px rgba(0, 0, 0, .25); text-align: center; transition: opacity .8s; }
.fliphint.off { opacity: 0; }

/* Pointed arrivals (документ.js): the entries a ◆, a ?i=, ?e= or ?w= points at are lit
   in the panel, the ◆ that opened it too — one gold, one hairline, both sides. */
aside.panel .spot { background: var(--sel); box-shadow: inset 2px 0 0 var(--gold); border-radius: 2px; animation: spot 1.4s ease-out; }
aside.panel li.spot { padding-left: 6px; margin-left: -6px; }
aside.panel .wl a.spot, aside.panel ol.toc a.spot { color: var(--gold); }
@keyframes spot { from { background: var(--glow); } }
.mkglyph { color: var(--azure); }
.turn button.mk.on { opacity: 1; color: var(--gold); text-shadow: 0 0 10px var(--glow); }
.codes details.code > summary .meta { font-size: 13px; }
.codes details.code .x { margin: 8px 0; }
.codes p.go { font: 14px/1.4 var(--ui); }
details.art.spot { background: var(--sel); box-shadow: inset 2px 0 0 var(--gold); animation: spot 1.4s ease-out; }
.btn[hidden] { display: none; }

/* A model's drawing in box characters (reading_room.set_diagrams): set as the docx has
   it, in the instrument's mono; the size follows the width down to 8px, then it scrolls. */
.diagram { container-type: inline-size; margin: 0 0 .9em; }
.diagram pre { margin: 0; padding: 10px 0; overflow-x: auto; white-space: pre; background: none;
  font: 400 clamp(8px, calc(100cqw / (var(--cols, 60) * 0.61)), 14px)/1.25 var(--mono); color: inherit; }

/* The thumb's pager (книга.js): on a touch screen a column at the right edge, a little
   off it, › on top under the thumb, the page in the middle, ‹ below (the owner,
   2026-10-12); a mouse and keys have the top line and ← →. It lies over the text, so
   at rest it is faint and see-through; a touch lights it up (.lit), then it fades. */
.thumb { position: fixed; right: 6px; bottom: calc(18vh + env(safe-area-inset-bottom, 0px)); z-index: 6;
  display: flex; flex-direction: column-reverse; align-items: stretch; width: 48px; background: transparent;
  border: 1px solid var(--line); border-radius: 24px;
  overflow: hidden; opacity: .32; transition: opacity .9s ease, background-color .9s ease, box-shadow .9s ease;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.thumb.lit { opacity: 1; background: var(--glass); box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition-duration: .12s; }
.thumb button { border: 0; background: none; color: var(--ink); cursor: pointer; font: 500 11px/1 var(--mono); }
.thumb button.flip { height: 56px; font-size: 26px; color: var(--gold); }
.thumb button.flip:active { background: var(--glow); }
.thumb button.no { height: 40px; padding: 0; color: var(--muted); letter-spacing: -.02em;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.thumb button.no b { font-weight: 500; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .thumb { display: none; } }
body.panel-open .thumb { display: none; }
@media print { .thumb { display: none; } }
@media not ((hover: hover) and (pointer: fine)) { .fliphint { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }

/* The contents (☰) do not repeat what the line shows (книга.js marks it .dup): the more the
   line holds, the less is here (the owner, 2026-10-15). */
.menu .dup { display: none !important; }
/* All the works, folded (книга.js from оглавление.json): a group, its works, a dialogue's
   blocks; this book open, its own list (.mtoc) inside. */
.menu .mworks { margin-top: 14px; }
.menu .mworks details { margin: 0; }
.menu .mworks summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--line); color: var(--ink); line-height: 1.35; }
.menu .mworks summary::-webkit-details-marker { display: none; }
.menu .mworks summary::before { content: "▸"; flex: none; width: 1em; color: var(--muted); font-size: 11px; transition: transform .15s; }
.menu .mworks details[open] > summary::before { transform: rotate(90deg); }
.menu .mworks .mgrp > summary { font: 600 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.menu .mworks .mgrp > summary .n { letter-spacing: 0; font-weight: 400; }
.menu .mworks .mgrp > :not(summary) { padding-left: 1em; }
.menu .mworks a.mdoc, .menu .mworks summary a { flex: 1; text-decoration: none; color: var(--ink); }
.menu .mworks a.mdoc { display: block; padding: 8px 0 8px 1.5em; border-bottom: 1px solid var(--line); line-height: 1.35; }
.menu .mworks a:hover { color: var(--azure); }
.menu .mworks .here > summary a, .menu .mworks a.mdoc.here { color: var(--gold); }
.menu .mworks .here > summary { box-shadow: inset 2px 0 0 var(--gold); }
.menu .mworks ol.toc { padding-left: 1em; }
.menu .mworks ol.toc li a.go { flex: 1; text-decoration: none; color: var(--ink); line-height: 1.4; }