/* The ☰ menu of the site's line — one look on every page (2026-10-13, the owner: «меню
везде одинаково должно выглядеть»). The reading room builds it into меню.css, the
forum keeps a copy as static/menu.css (a test holds them equal); the book's contents
(.menu in сайт.css) has the same values.
The markup:
While the line fits: the panel and its groups are display: contents — their links and
buttons stand in the line; the headings, the menu's own lines and ☰ are not shown.
When it does not (.packed, any width): the line keeps the way through the site and ☰;
☰ opens the panel. */
nav.site .navmore, nav.site .navmore .mnav, nav.site .navmore .mtheme { display: contents; }
nav.site .navmenu, nav.site .navmore .mh, nav.site .navmore .mcap, nav.site .navmore .mtheme > span,
nav.site .navmore .mmarks, nav.site .navmore .mdoor { display: none; }
/* «Как читать» as ? right of the sign, in the line on every page and at every width
(the owner, 2026-10-14: «вынести в меню наверху даже в мобильной»): the background's
colour on gold until it is first pressed, then gold in a gold frame (html.help-seen,
set by the pages' head script from localStorage "vita-howto"). */
nav.site a.help { flex: none; order: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
margin: 0 8px 0 0; padding: 0; border: 1px solid var(--gold); border-radius: 50%; background: var(--gold); color: var(--bg);
font: 600 14px/1 var(--mono, ui-monospace, monospace); letter-spacing: 0; text-transform: none; text-decoration: none; box-shadow: none; }
nav.site a.help:hover { background: var(--gold); color: var(--bg); filter: brightness(1.12); }
/* Until then it pulses softly, as the update's button does (the owner, 2026-10-15; vita-upd below). */
/* (its pulse: a ring of its own, with the others at the end) */
html.help-seen nav.site a.help { background: transparent; color: var(--gold); }
html.help-seen nav.site a.help:hover { background: color-mix(in srgb, var(--gold) 14%, transparent); filter: none; }
/* The line keeps one row (site_line.js → строка.js, the forum's line.js): what does not fit goes
behind ☰ — the tail first (.packed: the panel under ☰, as on a phone), then the line's own
links from the right (.over), their copies in the panel's «Разделы» (.mover). */
nav.site:has(.navmore) { flex-wrap: nowrap; }
nav.site > a.over { display: none !important; }
nav.site .navmore .mover[hidden], nav.site .navmore .mover > a[hidden] { display: none !important; }
nav.site.packed { position: relative; overflow: visible; flex-wrap: nowrap; z-index: 9; }
/* ☰ as the book's: a hairline frame, gold while open or while the page one is on is inside. */
nav.site.packed .navmenu { display: inline-flex; align-items: center; justify-content: center; flex: none; margin-left: auto;
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; }
nav.site.packed .navmenu:hover, nav.site.packed.open .navmenu, nav.site.packed:has(.navmore .here) .navmenu { border-color: var(--gold); color: var(--gold); }
/* The panel as the book's contents: a framed card under the line at the right. */
nav.site.packed .navmore { display: none; position: absolute; top: 100%; right: 8px; z-index: 9; width: min(400px, calc(100vw - 16px));
max-height: calc(100vh - 64px); max-height: calc(100svh - 64px); overflow: auto; overscroll-behavior: contain;
padding: 6px 16px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
box-shadow: 0 14px 40px rgba(0, 0, 0, .28); font: 14px/1.45 var(--serif); letter-spacing: normal;
text-transform: none; white-space: normal; text-align: left; }
nav.site.packed.open .navmore { display: block; }
nav.site.packed .navmore .mh { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 8px;
font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
nav.site.packed .navmore .x-btn { width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 3px;
background: none; color: var(--muted); font-size: 20px; cursor: pointer; }
nav.site.packed .navmore .x-btn:hover { border-color: var(--line); color: var(--ink); }
nav.site.packed .navmore .mcap { display: block; margin: 14px 0 4px; font: 600 11px/1 var(--mono); letter-spacing: .14em;
text-transform: uppercase; color: var(--muted); }
nav.site.packed .navmore .mnav { display: flex; flex-direction: column; }
nav.site.packed .navmore .mnav > a, nav.site.packed .navmore .mnav > form > button, nav.site.packed .navmore .mnav > .mdoor {
display: block; width: 100%; margin: 0; padding: 7px 0; border: 0; border-bottom: 1px solid var(--line);
border-radius: 0; box-shadow: none; background: none; text-align: left; text-decoration: none; text-transform: none;
letter-spacing: normal; font: 14px/1.45 var(--serif); color: var(--ink); cursor: pointer; }
nav.site.packed .navmore .mnav > form { display: block; margin: 0; }
nav.site.packed .navmore .mnav > a:hover, nav.site.packed .navmore .mnav > form > button:hover { color: var(--azure); background: none; }
nav.site.packed .navmore .mnav > a.here { color: var(--gold); box-shadow: inset 2px 0 0 var(--gold); padding-left: 10px; }
/* In the panel the line's own buttons give way to the menu's lines for them. */
nav.site.packed .navmore .door, nav.site.packed .navmore .mkb { display: none; }
nav.site.packed .navmore .mmarks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
nav.site.packed .navmore .mmarks button { display: inline-flex; align-items: 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; }
nav.site.packed .navmore .mmarks button:hover { border-color: var(--gold); color: var(--gold); }
nav.site.packed .navmore .mtheme { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 12px/1 var(--mono); color: var(--muted); }
nav.site.packed .navmore .mtheme > span { display: inline; }
nav.site.packed .navmore .themebtn { width: 34px; height: 30px; margin: 0; font: 15px/1 var(--mono); color: var(--muted);
background: transparent; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
/* «⚙ Настройки» (строка.js, the forum's line.js; the owner, 2026-10-16): ⚙ in a wide line, a row
of the ☰ panel on a narrow one; a book's ☰ has its row .vs-open. The window is .vset. */
nav.site .navmore .mtext { display: inline-flex; position: relative; flex: none; margin-left: 4px; }
nav.site .mtext .aa { width: 30px; height: 26px; padding: 0; font: 15px/1 var(--mono); color: var(--muted);
background: transparent; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
nav.site .mtext .aa:hover, nav.site .mtext .aa[aria-expanded="true"] { color: var(--gold); border-color: var(--gold); }
nav.site .mtext .aal { display: none; }
nav.site.packed .navmore .mtext { display: block; margin: 14px 0 0; }
nav.site.packed .navmore .mtext .aa { width: 100%; height: 34px; padding: 0 12px; text-align: left; font: 13px/1 var(--mono); letter-spacing: .04em; color: var(--ink); }
nav.site.packed .navmore .mtext .aal { display: inline; }
@media print { nav.site .mtext { display: none !important; } }
.vset{position:fixed;inset:0;z-index:91;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.55)}
.vset[hidden]{display:none}
.vset .vs-card{display:flex;flex-direction:column;width:min(28rem,100%);max-height:min(88vh,44rem);max-height:min(88svh,44rem);box-sizing:border-box;
background:var(--panel,var(--bg,#0e0f12));color:var(--ink,#e8e2d0);border-radius:4px;box-shadow:0 18px 60px rgba(0,0,0,.5)}
.vset .vs-head{display:flex;align-items:center;justify-content:space-between;margin:0 7px;padding:14px 16px 12px 19px;border-bottom:1px solid var(--line,#2a2c33)}
.vset .vs-head b{font:600 20px/1.2 var(--display,Georgia,serif);color:var(--gold,#d6b161)}
.vset .vs-x{width:34px;height:34px;padding:0;font:20px/1 var(--mono,monospace);color:var(--muted,#8e897b);background:transparent;border:0;cursor:pointer}
.vset .vs-x:hover{color:var(--gold,#d6b161)}
.vset .vs-body{overflow:auto;overscroll-behavior:contain;padding:8px 26px 20px}
.vset .vs-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font:12px/1 var(--mono,monospace);letter-spacing:.04em;color:var(--muted,#8e897b)}
.vset .vs-row[hidden]{display:none}
.vset .vs-row>span{flex:none;min-width:9.5em}
.vset .vs-row>b{min-width:3.6em;text-align:center;font-weight:500;color:var(--ink,#e8e2d0)}
.vset .vs-row input[type=range]{flex:1;min-width:8em;accent-color:var(--gold,#d6b161)}
.vset button:not(.vs-x){height:32px;padding:0 12px;font:13px/1 var(--mono,monospace);color:var(--ink,#e8e2d0);background:transparent;
border:1px solid var(--line,#2a2c33);border-radius:3px;cursor:pointer}
.vset .trow>button{width:44px;padding:0}
.vset button:not(.vs-x):hover{color:var(--gold,#d6b161);border-color:var(--gold,#d6b161)}
.vset .vs-seg{display:inline-flex;flex-wrap:wrap;gap:6px}
.vset .vs-seg button.on{color:var(--bg,#0e0f12);background:var(--gold,#d6b161);border-color:var(--gold,#d6b161)}
.vset .vs-note{margin:6px 0 0;font:italic 14px/1.35 var(--serif,Georgia,serif);color:var(--muted,#8e897b)}
.vset .vs-help{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line,#2a2c33)}
.vset .vs-help [hidden]{display:none}
@media print{.vset{display:none}}
/* The reader's size of the text on every page: the page's own parts as a whole, as the
browser's zoom does (the line stays); the book sizes its text itself (--k in сайт.css). The
space between lines once the reader has changed it (vita-lh): 1.2 stands for the pages' own.
The book's side panel (☰ and ◈, two tabs of one) is the line's, as the contents always were:
zoomed, the structure grew wider and lower than the contents over it (the owner, 2026-10-15:
«все равно всрато друг на друге»), and the A+ under the finger would move with each press. */
body > :is(main, header, aside, footer):not(.book, .panel) { zoom: var(--k, 1); }
html.vita-lh body > :is(main, header, aside, footer):not(.book, .panel) :is(p, li, dd, dt, blockquote, td, th, figcaption) {
line-height: calc(1.55 * var(--lhu, 1.2) / 1.2); }
/* The way through the pages (путь.js, the forum's way.js): ↶ in the line, its row in ☰,
its list. Here and not in the script: the forum's CSP allows no style put in by one. */
.mkb:is(.way, .reload, .mus, .mprev, .mnext){flex:none;height:26px;min-width:30px;padding:0 6px;margin-left:4px;font:15px/1 var(--mono,ui-monospace,monospace);
color:var(--muted,#8e897b);background:transparent;border:1px solid var(--line,#272a32);border-radius:3px;cursor:pointer;
white-space:nowrap;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mkb:is(.way, .reload, .mus, .mprev, .mnext):hover{color:var(--gold,#d6b161);border-color:var(--gold,#d6b161)}.mkb.way[hidden]{display:none!important}.bookbar>.mkb:is(.way, .reload){height:30px;margin-left:0}
/* ⟳ opens the right-hand group (закладки.js gave the push to 🔖). */
nav.site .mkb.reload{margin-left:auto}nav.site .mkb.reload + .mkb.add{margin-left:4px}
/* The music (музыка.js, the reading rooms; the owner, 2026-10-15): before ⟳, opening the group —
«♪ Музыка», then ‹ ♪ ›; ♪ gold and slowly pulsing while it plays, faster while a press would
let it go on; over it the list of the songs. */
.musbox{display:inline-flex;flex:none;gap:2px;align-items:center}
nav.site .musbox{margin-left:auto}nav.site .musbox + .mkb.reload,nav.site .musbox + .mkb.upd{margin-left:4px}
.bookbar>.musbox{margin:0}.bookbar>.musbox .mkb{height:30px;margin:0}
.musbox .mkb.mus.word{padding:0 10px;font-size:12px;letter-spacing:.04em}
.musbox .mkb:is(.mprev,.mnext){min-width:24px;padding:0 4px;border-color:transparent;font-size:17px}
.musbox .mkb:is(.mprev,.mnext):hover{border-color:var(--line,#272a32)}
.mkb.mus.on{color:var(--bg,#0e0f12);background:var(--gold,#d6b161);border-color:var(--gold,#d6b161);--pulse:3.2s}
.mkb.mus.wait{color:var(--gold,#d6b161);border-color:var(--gold,#d6b161)}
nav.site.packed .navmore .musbox{display:none}
.muslist{position:fixed;z-index:96;width:max-content;max-width:min(360px,calc(100vw - 16px));max-height:70vh;overflow:auto;
padding:8px 0;background:var(--panel,#12141a);color:var(--ink,#e9e0cb);border:1px solid var(--gold,#d6b161);border-radius:3px;
outline:1px solid color-mix(in srgb,var(--gold,#d6b161) 45%,transparent);outline-offset:-6px;
box-shadow:0 14px 40px rgba(0,0,0,.38);font:14px/1.35 var(--serif,Georgia,serif)}
.muslist[hidden]{display:none}
.muslist h3{margin:0;padding:6px 16px 8px;font:600 11px/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#8e897b)}
.muslist button,.mmusrow .mtl button{display:flex;align-items:baseline;gap:10px;width:100%;padding:7px 16px;text-align:left;
font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.muslist button:hover,.mmusrow .mtl button:hover{color:var(--gold,#d6b161)}
.muslist button.here,.mmusrow .mtl button.here{color:var(--gold,#d6b161);background:var(--sel,rgba(108,182,255,.14));box-shadow:inset 2px 0 0 var(--gold,#d6b161)}
.muslist .n,.mmusrow .mtl .n{flex:none;width:1.4em;text-align:right;font:11px/1 var(--mono,monospace);color:var(--muted,#8e897b)}
.muslist .here .n,.mmusrow .mtl .here .n{color:var(--gold,#d6b161)}
.mmusrow{flex-direction:column;align-items:stretch}.mmusrow .mmusctl{display:flex;gap:8px}
.mmusrow .mmusctl .mmus{flex:1}.mmusrow .mmus.on{color:var(--gold,#d6b161);border-color:var(--gold,#d6b161)}
.mmusrow .mtracks summary{cursor:pointer;padding:6px 0;font:12px/1 var(--mono,monospace);color:var(--muted,#8e897b)}
.mmusrow .mtracks[hidden]{display:none}.mmusrow .mtl button{padding:7px 4px;height:auto;border:0;font:14px/1.35 var(--serif,Georgia,serif)}
@media print{.musbox,.muslist{display:none}}
.mway{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.mway[hidden]{display:none!important}
.mway button{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:30px;padding:0 12px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;font:12px/1 var(--mono,monospace);color:var(--ink,#e9e0cb);background:none;
border:1px solid var(--line,#272a32);border-radius:3px;cursor:pointer}.mway button:hover{border-color:var(--gold,#d6b161);color:var(--gold,#d6b161)}
.mway button[hidden]{display:none!important}
.waylist{position:fixed;z-index:70;right:8px;width:min(440px,calc(100vw - 16px));max-height:70vh;overflow:auto;
padding:8px 0;background:var(--panel,#12141a);color:var(--ink,#e9e0cb);border:1px solid var(--line,#272a32);border-radius:3px;
box-shadow:0 14px 40px rgba(0,0,0,.38);font:14px/1.4 var(--ui,system-ui,sans-serif)}
.waylist[hidden]{display:none}.waylist h3{margin:0;padding:4px 14px 8px;font:600 11px/1 var(--mono,monospace);letter-spacing:.14em;
text-transform:uppercase;color:var(--muted,#8e897b)}
.waylist button.g{display:block;width:100%;text-align:left;padding:8px 14px;font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.waylist button.g:hover{color:var(--gold,#d6b161)}.waylist button.g.here{background:var(--sel,rgba(108,182,255,.14));box-shadow:inset 2px 0 0 var(--gold,#d6b161)}
.waylist button.g small{display:block;color:var(--muted,#8e897b);font:11px/1.4 var(--mono,monospace)}
.waylist .ft{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 4px;border-top:1px solid var(--line,#272a32);margin-top:6px}
.waylist .ft button{height:30px;padding:0 10px;font:12px/1 var(--mono,monospace);color:var(--ink,#e9e0cb);background:none;
border:1px solid var(--line,#272a32);border-radius:3px;cursor:pointer}.waylist .ft button:hover{border-color:var(--gold,#d6b161);color:var(--gold,#d6b161)}
.waylist .ft button[disabled]{opacity:.4;cursor:default}
@media print{.mkb.way,.mkb.reload,.mway,.waylist{display:none}}
/* «Как читать» (как-читать.js, the forum's howto.js): its card. Here and not in the script, as
the way's: the forum's CSP allows no style put in by one — the card fell to the page's foot unstyled (2026-10-15). */
.howto-pop{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px}
.howto-pop .hp-back{position:absolute;inset:0;background:rgba(0,0,0,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.howto-pop .hp-card{position:relative;width:min(720px,100%);max-height:min(86vh,100%);max-height:min(86svh,100%);display:flex;flex-direction:column;
background:var(--panel,var(--bg,#14161b));color:var(--ink,#e9e0cb);border:1px solid var(--gold,#d6b161);border-radius:4px;
box-shadow:0 18px 60px rgba(0,0,0,.45)}
.howto-pop .hp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 8px 20px;
border-bottom:1px solid var(--line,#272a32);font:600 12px/1 var(--mono,ui-monospace,monospace);letter-spacing:.2em;text-transform:uppercase;color:var(--gold,#d6b161)}
.howto-pop .hp-x{width:34px;height:34px;border:1px solid transparent;border-radius:3px;background:none;color:var(--muted,#8e897b);font-size:22px;line-height:1;cursor:pointer}
.howto-pop .hp-x:hover{border-color:var(--line,#272a32);color:var(--ink,#e9e0cb)}
.howto-pop .hp-body{overflow:auto;overscroll-behavior:contain;padding:4px 20px 18px}
.howto-pop .hp-body h2{margin:18px 0 6px;font:500 24px/1.2 var(--display,Georgia,serif);color:var(--gold,#d6b161)}
.howto-pop .hp-body p,.howto-pop .hp-body li{font:17px/1.55 var(--serif,Georgia,serif);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.howto-pop .hp-body ul{padding-left:1.2em}
.howto-pop .hp-body a{color:var(--azure,var(--accent,#6cb6ff))}
.howto-pop .hp-body .howto-go{text-align:center;margin:22px 0 6px}
.howto-pop .hp-body .howto-head,.howto-pop .hp-body .kicker{display:none}
@media print{.howto-pop{display:none}}
/* Busy (занят.js, the forum's busy.js): the shimmer on a pressed link, the bar on top. Here for
the same CSP: on the forum neither showed. */
.busy{background-image:linear-gradient(100deg,transparent 0%,transparent 35%,
color-mix(in srgb,currentColor 30%,transparent) 50%,transparent 65%,transparent 100%)!important;
background-size:300% 100%!important;background-repeat:no-repeat!important;animation:vita-busy 1.3s linear infinite alternate!important;
cursor:progress}
@keyframes vita-busy{from{background-position:150% 0}to{background-position:-150% 0}}
.busybar{position:fixed;left:0;top:0;z-index:100;height:3px;width:0;pointer-events:none;
background:var(--gold,#d6b161);box-shadow:0 0 10px var(--gold,#d6b161);transition:width 8s cubic-bezier(.1,.7,.2,1),opacity .3s}
.busybar.go{width:85%}
@media (prefers-reduced-motion:reduce){.busy{animation:none!important;background-position:50% 0!important}.busybar{transition:opacity .3s}}
@media print{.busybar{display:none}}
/* A window over the page is framed as the cover is (the owner, 2026-10-15: «в двойной золотой
рамке… везде где применимо»): a gold line, and a fainter one inside it — inside, since a list
at the screen's edge has no room for one outside. The outline is drawn over what scrolls. */
.news .nbox, .howto-pop .hp-card, .vset .vs-card, .wpop, .waylist, .mklist, .menu, aside.panel, nav.site.packed .navmore {
border: 1px solid var(--gold, #d6b161) !important;
outline: 1px solid color-mix(in srgb, var(--gold, #d6b161) 45%, transparent); outline-offset: -6px; }
/* A window's own rules stop at the inner line. */
.news header, .news footer, .howto-pop .hp-head { margin: 0 7px; }
/* An update waiting (приложение.js): its button in the line before ⟳, the line kept open; on a
narrow screen ⟳ itself and ☰ «⟳ Обновить» are lit instead. Dark on gold as ? is, with a soft
pulse round it (the owner, 2026-10-15: «как знак вопроса сделать тёмным на золотом, чтоб видно
было, и пульсацию лёгкую»). */
.mkb.upd{flex:none;height:26px;padding:0 10px;margin-left:auto;font:600 12px/1 var(--mono,ui-monospace,monospace);
letter-spacing:.04em;color:var(--bg,#0e0f12);background:var(--gold,#d6b161);
border:1px solid var(--gold,#d6b161);border-radius:3px;cursor:pointer;white-space:nowrap}
.mkb.upd:hover{color:var(--bg,#0e0f12);background:var(--gold,#d6b161);border-color:var(--gold,#d6b161);filter:brightness(1.12)}
.bookbar>.mkb.upd{height:30px;margin:0 4px 0 auto}
nav.site .mkb.upd + .mkb.reload{margin-left:4px}
.vita-upd .mkb.reload, .vita-upd .mreload button:first-child{color:var(--bg,#0e0f12);background:var(--gold,#d6b161);
border-color:var(--gold,#d6b161)}
@media (prefers-reduced-motion:reduce){.mkb.upd,.vita-upd .mkb.reload,.vita-upd .mreload button:first-child{
box-shadow:0 0 0 2px color-mix(in srgb,var(--gold,#d6b161) 28%,transparent)}}
.mkb.upd .s{display:none}
@media (max-width:760px){nav.site .mkb.upd{display:none!important}nav.site .mkb.upd + .mkb.reload{margin-left:auto}
.bookbar>.mkb.upd{min-width:30px;padding:0 6px;font-size:15px}
.bookbar>.mkb.upd .l{display:none}.bookbar>.mkb.upd .s{display:inline}}
@media print{.mkb.upd{display:none}}
/* «Знакомство» (тур.js): a gold frame round the lit thing, the card beside it. The frame and
the dimming let presses through: the reader tries what is lit. Above «Что нового» (90). */
.tour-dim{position:fixed;inset:0;z-index:93;pointer-events:none;background:rgba(0,0,0,.45);opacity:0;transition:opacity .3s}
.tour-dim.on{opacity:1}
.tour-spot{position:fixed;z-index:94;pointer-events:none;display:none;border:2px solid var(--gold,#d6b161);border-radius:6px;
outline:1px solid color-mix(in srgb,var(--gold,#d6b161) 45%,transparent);outline-offset:3px;
box-shadow:0 0 0 200vmax rgba(0,0,0,.38),0 0 18px color-mix(in srgb,var(--gold,#d6b161) 60%,transparent);
transition:left .25s,top .25s,width .25s,height .25s;animation:vita-tour 2.2s ease-in-out infinite}
.tour-spot.on{display:block}
.tour-spot.glide{transition:left .36s cubic-bezier(.2,.7,.2,1),top .36s cubic-bezier(.2,.7,.2,1),width .36s,height .36s}
@keyframes vita-tour{0%,100%{border-color:var(--gold,#d6b161)}50%{border-color:color-mix(in srgb,var(--gold,#d6b161) 55%,#fff)}}
.tour-card{position:fixed;z-index:95;box-sizing:border-box;width:min(25rem,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100svh - 32px);overflow:auto;
padding:12px 18px 14px;background:var(--panel,var(--bg,#14161b));color:var(--ink,#e9e0cb);
border:1px solid var(--gold,#d6b161);outline:1px solid color-mix(in srgb,var(--gold,#d6b161) 45%,transparent);outline-offset:-6px;
border-radius:4px;box-shadow:0 18px 60px rgba(0,0,0,.5)}
.tour-card.center{left:50%!important;top:50%!important;transform:translate(-50%,-50%);width:min(30rem,calc(100vw - 32px))}
.tour-head{display:flex;align-items:center;gap:8px;margin:0 -4px 6px 0;font:600 11px/1 var(--mono,ui-monospace,monospace);
letter-spacing:.16em;text-transform:uppercase;color:var(--gold,#d6b161)}
.tour-n{flex:1}
/* The music's box (музыка.js) in the card: «♪ Музыка» pulsing until pressed, then ‹ ♪ ›. */
.tour-mus{display:inline-flex;letter-spacing:normal;text-transform:none}.tour-mus .mkb{height:28px;margin:0}
.tour-mus .mkb.mus.word{color:var(--gold,#d6b161);border-color:var(--gold,#d6b161)}
.tour-x{width:30px;height:30px;border:1px solid transparent;border-radius:3px;background:none;color:var(--muted,#8e897b);font-size:22px;line-height:1;cursor:pointer}
.tour-x:hover{border-color:var(--line,#272a32);color:var(--ink,#e9e0cb)}
.tour-t{margin:4px 0 6px;font:500 23px/1.2 var(--display,Georgia,serif);color:var(--gold,#d6b161)}
.tour-p{margin:0;font:17px/1.5 var(--serif,Georgia,serif);text-align:left;hyphens:auto;-webkit-hyphens:auto}
.tour-hint{margin:8px 0 0;font:italic 15px/1.4 var(--serif,Georgia,serif);color:var(--muted,#8e897b)}
.tour-hint:empty{display:none}
.tour-nav{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.tour-nav button{height:38px;padding:0 16px;border:1px solid currentColor;border-radius:3px;background:none;cursor:pointer;
font:500 13px/1 var(--mono,ui-monospace,monospace);color:var(--muted,#8e897b)}
.tour-nav .tour-next{margin-left:auto;color:var(--bg,#0e0f12);background:var(--gold,#d6b161);border-color:var(--gold,#d6b161)}
.tour-nav button:hover{filter:brightness(1.12)}
.tour-nav button[hidden]{display:none}
/* Folded while what the reader opened is on the screen (тур.js): a strip — the step and «Дальше». */
.tour-card.mini{display:flex;align-items:center;gap:10px;width:auto;max-width:calc(100vw - 24px);padding:6px 6px 6px 14px;transform:none}
.tour-card.mini :is(.tour-t,.tour-p,.tour-hint,.tour-mus,.tour-prev){display:none}
.tour-card.mini .tour-head{margin:0}.tour-card.mini .tour-nav{margin:0}.tour-card.mini .tour-nav button{height:34px;padding:0 12px}
.tour-spot.open{box-shadow:0 0 18px color-mix(in srgb,var(--gold,#d6b161) 60%,transparent)}
@media (prefers-reduced-motion:reduce){.tour-spot,.tour-mus .mkb.mus.word{animation:none;transition:none}}
@media print{.tour-dim,.tour-spot,.tour-card{display:none}}
.tour-lit{opacity:1!important;visibility:visible!important}
/* The walk's other pages open over the one it began on (тур.js), whose song goes on. */
.tour-frame{position:fixed;inset:0;z-index:92;width:100vw;height:100vh;height:100dvh;border:0;background:var(--bg,#0b0c0f)}
html.vita-framed,html.vita-framed body{overflow:hidden}
/* The pages over the one the song plays in (музыка.js): its own line and text hidden under them. */
.vita-shell{position:fixed;inset:0;z-index:89;width:100vw;height:100vh;height:100dvh;border:0;background:var(--bg,#0b0c0f)}
html.vita-shelled,html.vita-shelled body{overflow:hidden}
html.vita-shelled body>:not(.vita-shell,.tour-dim,.tour-spot,.tour-card,.tour-frame){visibility:hidden}
/* Every soft pulse (? until read, the update's ⟳, ♪ playing or waiting, ♪ in the walk): a ring of
its own (::after) whose opacity alone changes, so the compositor draws it. A box-shadow pulse
repainted the line every frame, and every frame the browser looked anew at all the observed
turns of a book: 40 % of the main thread on the Pi while ? pulsed, the page slow to open and
to scroll (the owner, 2026-10-16: «почему постоянно так долго грузится»). */
html:not(.help-seen) nav.site a.help, .mkb.upd, .vita-upd .mkb.reload, .vita-upd .mreload button:first-child,
.mkb.mus.on, .mkb.mus.wait, .tour-mus .mkb.mus.word{position:relative}
html:not(.help-seen) nav.site a.help::after, .mkb.upd::after, .vita-upd .mkb.reload::after, .vita-upd .mreload button:first-child::after,
.mkb.mus.on::after, .mkb.mus.wait::after, .tour-mus .mkb.mus.word::after{content:"";position:absolute;inset:-1px;border-radius:inherit;
pointer-events:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--gold,#d6b161) 40%,transparent);opacity:0;will-change:opacity;
animation:vita-upd var(--pulse,2.4s) ease-in-out infinite}
@keyframes vita-upd{0%,100%{opacity:0}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){html:not(.help-seen) nav.site a.help::after, .mkb.upd::after, .vita-upd .mkb.reload::after,
.vita-upd .mreload button:first-child::after, .mkb.mus.on::after, .mkb.mus.wait::after, .tour-mus .mkb.mus.word::after{animation:none}}