/* ══════════════════════════════════════════════════════════════════
   Лента — доводка облика: бумага, глубина, движение
   Накладывается поверх основных стилей приложения.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --paper-warm:#f7f3ea; --paper-warm-2:#efe9dc;
  --brass:#b08243; --brass-soft:rgba(176,130,67,.14);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:linear(0,.2 6%,.62 13%,.9 20%,1.03 27%,1.06 35%,1.02 47%,1 62%,1);
}
:root[data-theme="light"], :root:not([data-theme="dark"]){
  --surface:#fcf9f2; --plane:#f0e9da;
  --ribbon:#e3d9c1; --ribbon-edge:#b09c72; --ribbon-in:#fffdf8;
  --ink-1:#141110; --ink-2:#443c32; --ink-3:#726858;
  --jew:#21508f; --world:#ab4414;
  --grid:#d9ccb3; --axis:#a2916f;
  --band-a:rgba(176,130,67,.075); --band-b:rgba(176,130,67,.145);
}
:root[data-theme="dark"]{
  --surface:#191710; --plane:#0c0b07;
  --ribbon:#37301f; --ribbon-edge:#6b5a35; --ribbon-in:#1e1a12;
  --ink-1:#faf5e9; --ink-2:#cdc2ad; --ink-3:#9b8f7b;
  --jew:#93bcf2; --world:#f4915c;
  --grid:#39321f; --axis:#6a5c3c;
  --band-a:rgba(208,164,100,.08); --band-b:rgba(208,164,100,.16);
}

/* ── бумага: живая крупица поверх всего ── */
#stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}
:root[data-theme="dark"] #stage::after{mix-blend-mode:screen;opacity:.045}
#stage{background:
  radial-gradient(120% 90% at 50% 40%, var(--surface) 0%, var(--plane) 100%)}

/* ══════════════ СВЕТ В ГЛУБИНЕ («северное сияние») ══════════════
   Три размытых пятна, которые очень медленно плывут. Ни картинок,
   ни шейдеров — три градиента и три анимации.                      */
#aurora{position:absolute;inset:-28%;z-index:0;pointer-events:none;
  opacity:.42;filter:blur(72px);mix-blend-mode:multiply;overflow:hidden}
#aurora i{position:absolute;display:block;border-radius:50%;will-change:transform}
#aurora .a1{width:54%;height:64%;left:1%;top:4%;
  background:radial-gradient(circle at 50% 50%, rgba(176,130,67,.40), transparent 68%);
  animation:au1 71s ease-in-out infinite}
#aurora .a2{width:48%;height:60%;left:36%;top:18%;
  background:radial-gradient(circle at 50% 50%, rgba(47,93,158,.26), transparent 68%);
  animation:au2 89s ease-in-out infinite}
#aurora .a3{width:42%;height:52%;left:64%;top:2%;
  background:radial-gradient(circle at 50% 50%, rgba(194,90,44,.22), transparent 68%);
  animation:au3 103s ease-in-out infinite}
:root[data-theme="dark"] #aurora{mix-blend-mode:screen;opacity:.34;filter:blur(80px)}
@keyframes au1{0%,100%{transform:none}
  34%{transform:translate3d(16%,8%,0) scale(1.16)} 67%{transform:translate3d(-8%,-5%,0) scale(.92)}}
@keyframes au2{0%,100%{transform:none}
  30%{transform:translate3d(-14%,-9%,0) scale(1.1)} 65%{transform:translate3d(11%,6%,0) scale(.88)}}
@keyframes au3{0%,100%{transform:none}
  40%{transform:translate3d(-18%,10%,0) scale(1.22)} 72%{transform:translate3d(7%,-7%,0) scale(.95)}}

/* ── пятно света под рукой («spotlight») ── */
#stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(270px 200px at var(--mx,50%) var(--my,50%),
    rgba(176,130,67,.14), rgba(176,130,67,.05) 46%, transparent 72%);
  opacity:0;transition:opacity .5s var(--ease-out)}
#stage.lit::before{opacity:1}
:root[data-theme="dark"] #stage::before{
  background:radial-gradient(270px 200px at var(--mx,50%) var(--my,50%),
    rgba(240,212,152,.11), rgba(240,212,152,.04) 46%, transparent 72%)}

/* ── лента: объём вместо плоской полосы ── */
#ribbon .rb-out{stroke:var(--ribbon-edge);filter:drop-shadow(0 3px 7px rgba(60,44,20,.14))}
#ribbon .rb-in{stroke:var(--ribbon)}
#ribbon .rb-mid{stroke:var(--brass);opacity:.5;stroke-dasharray:1 7;stroke-width:1.2}
#ribbon .chain-line{stroke-width:2.4;filter:drop-shadow(0 0 5px rgba(27,127,94,.35))}
/* по цепи передачи бежит огонёк: длина пути приведена к 100,
   поэтому один и тот же отрезок работает на любом масштабе */
#ribbon .chain-spark{fill:none;stroke:var(--chain);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:4 96;opacity:.95;filter:drop-shadow(0 0 6px var(--chain));
  animation:spark 12s linear infinite}
@keyframes spark{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* ── эпохи: мягкие вертикальные градиенты, а не заливки ── */
.eband{background-image:linear-gradient(to bottom, transparent 0%, currentColor 42%, transparent 100%)!important;
  color:var(--band-a);background-color:transparent!important;opacity:.9}
.eband:nth-child(even){color:var(--band-b)}
.eband u{font-size:10px;letter-spacing:.11em;color:var(--brass);opacity:.95;font-weight:650}

/* ── сетка тоньше и спокойнее ── */
.gline{background:linear-gradient(to bottom, transparent, var(--grid) 18%, var(--grid) 82%, transparent)}
.gline.major{background:linear-gradient(to bottom, transparent, var(--axis) 12%, var(--axis) 88%, transparent)}
.gtick{letter-spacing:.02em}
.gtick b{color:var(--brass)}

/* ── точки: живые, с ореолом, и слегка тянутся к курсору ──
   --px/--py ставит рука: смещение к указателю. Приём «магнитная кнопка»,
   только без чужой библиотеки — две переменные и один слушатель.        */
.ev{padding:5px}
.ev .d{
  box-shadow:0 0 0 2.5px var(--ribbon-in), 0 1px 2px rgba(40,28,10,.25);
  transform:translate(var(--px,0px), var(--py,0px));
  transition:transform .2s var(--ease-out), box-shadow .3s var(--ease-out);
}
.ev:hover .d{transform:translate(var(--px,0px), var(--py,0px)) scale(1.55);
  box-shadow:0 0 0 2.5px var(--ribbon-in), 0 0 0 6px color-mix(in srgb, currentColor 22%, transparent),
             0 2px 8px rgba(40,28,10,.3)}
.ev.active .d{transform:translate(var(--px,0px), var(--py,0px)) scale(1.7);
  box-shadow:0 0 0 2.5px var(--ribbon-in), 0 0 0 5px currentColor,
             0 0 16px color-mix(in srgb, currentColor 55%, transparent)}
.ev.disputed .d{transform:translate(var(--px,0px), var(--py,0px)) rotate(45deg)}
.ev.disputed:hover .d{transform:translate(var(--px,0px), var(--py,0px)) rotate(45deg) scale(1.45)}
.ev.disputed.active .d{transform:translate(var(--px,0px), var(--py,0px)) rotate(45deg) scale(1.6)}
.clu{box-shadow:0 0 0 2.5px var(--ribbon-in), 0 2px 6px rgba(40,28,10,.28);
  transition:transform .34s var(--ease-spring), box-shadow .25s}
.clu:hover{transform:translate(-50%,-50%) scale(1.18)}
.mapring{border-color:var(--brass);opacity:.9;box-shadow:0 0 6px var(--brass-soft)}

/* ── подписи: перетекают уровнями, а не появляются пачкой ──
   --la  ставит отрисовка: насколько эта ступень важности уже проступила.
   --lf  ведёт анимация появления. Итоговая прозрачность — их произведение,
   поэтому одно не затирает другое.                                        */
@property --lf{syntax:"<number>";initial-value:1;inherits:false}
.lbl{--la:1;opacity:calc(var(--la) * var(--lf, 1));
  animation:lblIn .42s var(--ease-out) backwards;   /* so-fill-backwards */
  transition:background .18s, color .18s, transform .22s var(--ease-out)}
@keyframes lblIn{from{--lf:0;transform:translateY(4px)}to{--lf:1;transform:none}}
/* на ходу подписи пересоздаются каждый кадр — анимацию появления гасим */
body.moving .lbl{animation:none}
.lbl:hover{transform:translateY(-1px);background:var(--brass-soft)}
.lbl.i3{letter-spacing:-.005em}
.lbl em{color:var(--brass);opacity:.85}
.leader{background:linear-gradient(to bottom, transparent, var(--axis));opacity:.6}

/* ── линии жизни ── */
.life{background:linear-gradient(90deg,
  color-mix(in srgb, var(--life) 55%, transparent), var(--life));
  box-shadow:0 1px 3px rgba(40,28,10,.18);transition:opacity .25s var(--ease-out), transform .25s}
.life:hover{transform:scaleY(1.25)}
.life.ch{background:linear-gradient(90deg,
  color-mix(in srgb, var(--chain) 55%, transparent), var(--chain))}

/* ── карточка: стекло и пружина ── */
#popup{
  background:color-mix(in srgb, var(--raised) 88%, transparent);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-color:color-mix(in srgb, var(--brass) 26%, transparent);
  box-shadow:0 2px 6px rgba(40,28,10,.10), 0 18px 50px rgba(40,28,10,.20),
             inset 0 1px 0 rgba(255,255,255,.5);
}
:root[data-theme="dark"] #popup{box-shadow:0 2px 6px rgba(0,0,0,.5),0 18px 50px rgba(0,0,0,.6),
  inset 0 1px 0 rgba(255,255,255,.06)}
#popup.open{animation:popSpring .52s var(--ease-spring)}
@keyframes popSpring{
  from{opacity:0;transform:scale(.88) translateY(10px)}
  to{opacity:1;transform:none}}
#popup .arrow{background:color-mix(in srgb, var(--raised) 88%, transparent);
  border-color:color-mix(in srgb, var(--brass) 26%, transparent)}
#pop-head h3{font-family:var(--font-read);font-size:18px;letter-spacing:-.015em;font-weight:600}
#pop-head{border-bottom-color:var(--brass-soft)}
#pop-foot{background:linear-gradient(to bottom, transparent, var(--brass-soft));border-top-color:var(--brass-soft)}
.tag.year{background:var(--brass);box-shadow:0 1px 3px rgba(120,88,34,.35)}
.tag.year.w{background:var(--world)}

/* ── панель ── */
#panel{box-shadow:-2px 0 10px rgba(40,28,10,.08), -24px 0 70px rgba(40,28,10,.16)}
#panel.open{transition:transform .58s var(--ease-out)}
#tabs button[aria-selected="true"]::after{background:var(--brass)}
.article h1{font-family:var(--font-read)}

/* ── кнопки: отдача при нажатии ── */
.btn,.iconbtn,#zoomc button{transition:background .16s, border-color .16s,
  transform .28s var(--ease-spring), box-shadow .2s}
.btn:active,#zoomc button:active{transform:scale(.94)}
.btn.primary{background:var(--jew);box-shadow:0 2px 8px color-mix(in srgb, var(--jew) 35%, transparent);
  position:relative;overflow:hidden;isolation:isolate}
/* блик пробегает по главной кнопке при наведении */
.btn.primary::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.34) 50%,transparent 60%);
  transform:translateX(-140%)}
.btn.primary:hover::after{animation:sheen .95s var(--ease-out)}
@keyframes sheen{from{transform:translateX(-140%)}to{transform:translateX(140%)}}
.seg .thumb{background:var(--brass);transition:transform .52s var(--ease-spring), width .52s var(--ease-spring)}

/* ── мини-карта ── */
#mini{background:linear-gradient(to bottom, var(--plane), var(--surface))}
#miniWin{background:color-mix(in srgb, var(--brass) 13%, transparent);
  border-color:var(--brass);border-radius:5px;box-shadow:0 0 0 1px rgba(255,255,255,.4) inset;
  transition:left .1s linear, width .1s linear}
.mk{border-radius:2px}

/* ══════════════════════ ВАЛИК ПРИБЛИЖЕНИЯ ══════════════════════
   Латунный цилиндр, утопленный в панель торцом к нам. Объём делают
   три слоя: рифление, цилиндрическая тень по краям и блик сверху.  */
#gearwrap{position:absolute;inset-inline-end:14px;bottom:14px;z-index:26;
  width:118px;user-select:none;touch-action:none}
#wheel{position:relative;height:30px;border-radius:9px;overflow:hidden;cursor:ew-resize;
  background:linear-gradient(180deg,#5a4119,#33240e);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),
             inset 0 2px 5px rgba(0,0,0,.55),
             0 1px 0 rgba(255,255,255,.5), 0 6px 16px rgba(60,40,10,.28)}
#wheelKnurl{position:absolute;inset:2px 0;
  background-image:repeating-linear-gradient(90deg,
    #d9c194 0px, #b8975c 2.2px, #7e5f2b 4.4px, #55401b 6.6px, #7e5f2b 8.8px, #b8975c 11px);
  background-size:11px 100%;
  will-change:background-position}
#wheelShade{position:absolute;inset:2px 0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(20,12,2,.92) 0%, rgba(20,12,2,.45) 9%, rgba(255,244,214,.30) 34%,
    rgba(255,248,226,.42) 50%, rgba(255,244,214,.30) 66%,
    rgba(20,12,2,.45) 91%, rgba(20,12,2,.92) 100%)}
#wheelGloss{position:absolute;inset:2px 0 auto;height:9px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));
  border-radius:6px 6px 0 0}
#gearwrap.spin #wheel{box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),
  inset 0 2px 7px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.5), 0 3px 10px rgba(60,40,10,.34)}
#wheelCap{display:flex;align-items:center;justify-content:space-between;gap:6px;
  margin-top:4px;padding:0 2px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;pointer-events:none}
#wheelCap s{text-decoration:none;font-size:13px;color:var(--brass);letter-spacing:0}
#wheelCap i{font-style:normal;opacity:.7}
#gearLabel{position:absolute;inset-inline-end:130px;bottom:16px;
  background:var(--raised);border:1px solid var(--brass-soft);border-radius:8px;padding:5px 10px;
  font-size:11.5px;color:var(--ink-2);white-space:nowrap;box-shadow:var(--sh-2);
  opacity:0;pointer-events:none;transform:translateX(6px);
  transition:opacity .25s, transform .35s var(--ease-out);font-variant-numeric:tabular-nums}
#gearLabel.on{opacity:1;transform:none}
@media(max-width:900px){ #gearwrap{width:96px;inset-inline-end:10px}
  #wheel{height:28px} #wheelCap i{display:none} #gearLabel{inset-inline-end:106px;bottom:14px} }

/* звук */
#sndBtn{font-size:14px}

/* ── дыхание при загрузке ── */
/* so-fill-backwards: не `both`. `both` оставляет конечный кадр
   (transform:none) висеть навсегда и глушит сдвиг из panApply —
   лента ехала, а цепочка и стрелки учительства стояли. */
body.feel #ribbon{animation:ribbonIn .9s var(--ease-out) backwards}
/* so-bez-pryzhka: только прозрачность. transform у этого
   элемента каждый кадр пишет panApply, и анимация его
   перебивала: лента стояла сжатой, а в конце садилась на
   место рывком. */
@keyframes ribbonIn{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .lbl,#popup.open,body.feel #ribbon,#aurora i,#ribbon .chain-spark,.btn.primary:hover::after{animation:none!important}
  #stage::before{display:none}
  *{transition-duration:.01ms!important}
}

/* скрытые элементы обязаны быть скрыты, даже если у класса есть display */
[hidden]{display:none!important}

/* ══════════ мини-карта: понятная полоса, а не штрихкод ══════════ */
#mini{cursor:pointer}
.mename{position:absolute;top:1px;height:12px;overflow:hidden;pointer-events:none;
  border-inline-start:1px solid color-mix(in srgb,var(--brass) 45%,transparent)}
.mename span{display:block;padding-inline-start:5px;font-size:8.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brass);opacity:.72;font-weight:700;white-space:nowrap;
  text-overflow:ellipsis;overflow:hidden}
.mnow{position:absolute;top:0;bottom:0;width:2px;background:var(--brass);z-index:3;
  pointer-events:none;box-shadow:0 0 6px color-mix(in srgb,var(--brass) 70%,transparent)}
.mnow b{position:absolute;bottom:1px;inset-inline-end:5px;font-size:8.5px;font-weight:700;
  color:var(--brass);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
#miniWin{cursor:grab}
#miniWin::before,#miniWin::after{content:"";position:absolute;top:50%;width:3px;height:16px;
  margin-top:-8px;border-radius:2px;background:var(--brass);opacity:.85}
#miniWin::before{inset-inline-start:-2px} #miniWin::after{inset-inline-end:-2px}

/* ══════════ шестерёнка больше ничего не закрывает ══════════
   Колесо и есть приближение, поэтому кнопки + и − при нём лишние. */
body.feel #zoomc{bottom:88px}
body.feel #zIn, body.feel #zOut{display:none}
@media(max-width:900px){ body.feel #zoomc{bottom:76px} }

/* ══════════ КРАЯ СЧЁТА: за ними темнота ══════════
   До года 1 времени ещё нет, после 6000 счёт завершён.
   Полоса именно начинается и именно кончается — это видно глазом. */
.void{position:absolute;top:0;bottom:0;z-index:5;pointer-events:none;
  display:flex;align-items:center;overflow:hidden}
.void.before{left:0;justify-content:flex-end;
  background:linear-gradient(to left, rgba(9,7,4,0) 0, rgba(9,7,4,.7) 24px,
             rgba(9,7,4,.96) 84px, #070502 150px)}
.void.after{justify-content:flex-start;
  background:linear-gradient(to right, rgba(9,7,4,0) 0, rgba(9,7,4,.7) 24px,
             rgba(9,7,4,.96) 84px, #070502 150px)}
/* надпись идёт вдоль края, как на обрезе книги: так она влезает
   при любой ширине тёмного поля и не выглядит обрубленной */
.void span{display:flex;gap:8px;align-items:center;justify-content:center;
  writing-mode:vertical-rl;text-orientation:mixed;height:100%;opacity:.92;padding:0 6px}
.void.before span{transform:rotate(180deg)}
[data-theme="dark"] .ebtn{color:var(--brass)}
.void b{font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:#d3ab68;font-weight:700;white-space:nowrap}
.void i{font-style:normal;font-size:11px;color:#9c8f80;white-space:nowrap;letter-spacing:.04em}
#ribbon .rb-end{stroke:var(--brass);stroke-width:2;opacity:.75;stroke-linecap:round}

/* ══════════ ЛИНЕЙКА СВЕРХУ И КЛИКАБЕЛЬНЫЕ ЭПОХИ ══════════ */
.eband u, .ebtn{position:absolute;top:5px;inset-inline-start:10px}
.ebtn{border:0;background:none;padding:2px 7px;border-radius:7px;cursor:pointer;
  font:inherit;font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:#8a5f1f;opacity:1;pointer-events:auto;white-space:nowrap;max-width:calc(100% - 14px);
  overflow:hidden;text-overflow:ellipsis;
  transition:background .2s, opacity .2s, transform .25s var(--ease-out)}
.ebtn:hover{opacity:1;background:var(--brass-soft);transform:translateY(-1px)}
.ebtn:active{transform:scale(.96)}
.gtick.top{top:28px;bottom:auto}
.gline{top:46px}

/* ── цепь передачи: ровное плетение на своей дорожке ── */
#ribbon .chain-line{stroke-width:2.6;opacity:.95;
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--chain) 55%, transparent))}
#ribbon .chain-node{fill:var(--chain);stroke:var(--surface);stroke-width:1.6}
#ribbon .chain-stem{stroke:var(--chain);stroke-width:1;opacity:.34;stroke-dasharray:2 3}

/* ── григорианский год под годом от Сотворения ── */
.gtick s{display:block;text-decoration:none;font-size:9.5px;color:var(--ink-3);
  opacity:.9;margin-top:1px;letter-spacing:.01em;white-space:nowrap}
.gtick.top s{display:none}
.gtick{bottom:3px}

/* ── боковая панель: выход всегда на виду ── */
#panel header{gap:6px}
#panel header .btn.close{margin-inline-start:8px;font-weight:650;font-size:12.5px;
  background:var(--brass);color:#fff;border-color:transparent;padding:0 12px;
  box-shadow:0 1px 4px rgba(120,88,34,.3)}
#panel header .btn.close:hover{filter:brightness(1.08)}
#panel header .btn.ghost{opacity:.72}
#panel header .btn.ghost:hover{opacity:1}

/* ── срез времени: пока не закреплён, идёт за рукой ── */
#slice .hd{display:inline-flex;align-items:center;gap:6px;cursor:pointer;pointer-events:auto}
#slice .hd i{font-style:normal;opacity:.85}
#slice.follow .ln{border-inline-start-style:dashed;opacity:.9}
/* ширина полосы захвата задана в index.html: 22px. Здесь оставлен только курсор. */
#slice .ln{cursor:ew-resize}
#slicePanel .pin{display:block;width:100%;margin:0 0 10px;border:1px solid var(--line);
  background:var(--chip);border-radius:9px;padding:6px 9px;font:inherit;font-size:11.5px;
  color:var(--ink-2);cursor:pointer;text-align:start;
  transition:background .2s, border-color .2s}
#slicePanel .pin.on{background:color-mix(in srgb, var(--jew) 13%, transparent);
  border-color:color-mix(in srgb, var(--jew) 34%, transparent);color:var(--jew);font-weight:600}
#slicePanel .pin:hover{border-color:var(--brass)}
#slicePanel .x{inset-inline-end:8px;top:8px}

/* ── расхождение хронологий: вторая рельса и парные точки ── */
.acrail{position:absolute;left:0;right:0;height:0;z-index:2;pointer-events:none;
  border-top:1px dashed color-mix(in srgb, var(--ink-3) 55%, transparent)}
.acrail u{position:absolute;inset-inline-start:10px;top:-15px;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);text-decoration:none;font-weight:700;
  background:var(--surface);padding-inline-end:8px}
.dvlink{position:absolute;height:1px;transform-origin:0 50%;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--world) 70%, transparent),
    color-mix(in srgb, var(--ink-3) 45%, transparent));opacity:.75}
.ghost{position:absolute;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;
  border:2px solid var(--ink-3);background:var(--surface);z-index:4;box-sizing:border-box}
.divlbl{position:absolute;z-index:5;font-size:10px;color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums;background:var(--surface);padding:0 4px;border-radius:4px}
.divlbl s{text-decoration:none;color:var(--world);font-weight:700}

/* ══════════ ПОЧИНКА ПОСЛЕ ПРОВЕРКИ ══════════
   Полоса эпохи не ловит указатель (pointer-events:none), поэтому
   кнопке нужно вернуть его явно — иначе название не нажимается. */
.eband{pointer-events:none}
.eband > .ebtn{pointer-events:auto !important;z-index:9}
/* воздух между названием эпохи, строкой годов и сеткой */
.ebtn{top:6px !important;padding:3px 9px !important;line-height:1.2}
.gtick.top{top:32px !important}
.gline{top:52px !important}
/* Причина найдена: слой событий #fg лежит поверх фона сплошным полотном
   и перехватывал клики, адресованные названиям эпох. Полотно делаем
   прозрачным для указателя, а ловят его только сами элементы. */
#fg{pointer-events:none}
#fg > .ev, #fg > .lbl, #fg > .clu, #fg > .life, #fg > .lifelbl,
#fg > .ghost, #fg > .divlbl{pointer-events:auto}

/* ── переключатели цивилизаций в слоях ── */
.regall{display:flex;gap:.4rem;margin-top:.4rem}
.regall button{flex:1;font-size:.78rem;padding:.25rem .4rem;border:1px solid var(--rule);
  border-radius:.4rem;color:var(--ink-3);background:none}
.regall button:hover{border-color:var(--brass);color:var(--ink)}
.regbox summary{cursor:pointer;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);padding:.2rem 0;list-style:none}
.regbox summary::-webkit-details-marker{display:none}
.regbox summary::before{content:"\25b8  ";color:var(--brass)}
.regbox[open] summary::before{content:"\25be  "}

/* ── срез времени: панелька поменьше и её можно двигать ── */
#slicePanel{padding:11px 13px 12px;font-size:12.5px}
#slicePanel .grab{position:sticky;top:-11px;margin:-11px -13px 7px;height:19px;
  display:flex;align-items:center;justify-content:center;cursor:grab;z-index:2;
  background:var(--raised);border-radius:var(--r) var(--r) 0 0;touch-action:none}
#slicePanel .grab::before{content:"";width:32px;height:4px;border-radius:2px;
  background:var(--border-2)}
#slicePanel.moving{cursor:grabbing;box-shadow:0 12px 34px rgba(0,0,0,.22)}
#slicePanel.moving .grab{cursor:grabbing}
#slicePanel h4{cursor:grab;touch-action:none}
#slicePanel .x{top:1px;inset-inline-end:3px;z-index:3}
@media (max-width:980px){
  #slicePanel{inset-inline-start:12px;inset-inline-end:auto;top:auto;
    bottom:calc(38px + env(safe-area-inset-bottom,0px));   /* выше полоски с годами */
    width:min(248px,68vw);max-height:min(42vh,300px);font-size:12px}
  #slicePanel h4{font-size:15.5px}
}

/* ── «Когда это было» в статье на ленте ── */
.article .whenbox{margin:14px 0 20px;padding:13px 15px 11px;border:1px solid var(--border);
  border-radius:12px;background:var(--plane)}
.article .whenbox h2{margin:0 0 10px!important;font-size:10.5px!important;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:620;
  border:0!important;padding:0!important}
.wnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));
  gap:9px 14px;margin-bottom:12px}
.wnums div{display:flex;flex-direction:column;min-width:0}
.wnums b{font-size:20px;line-height:1.1;color:var(--jew);font-variant-numeric:tabular-nums;
  font-weight:660;white-space:nowrap}
.wnums span{font-size:10.5px;color:var(--ink-3);margin-top:2px}
.wanch{list-style:none;margin:0 0 9px;padding:0}
.wanch li{font-size:12.5px;color:var(--ink-2);line-height:1.8;
  padding-inline-start:14px;text-indent:-14px}
.wanch li::before{content:"·";color:var(--jew);margin-inline-end:6px}
.wanch b{font-weight:640;color:var(--ink-1)}
/* so-revizia: ряд плиток вместо строки с запятыми — длинное название
   переносится внутри своей плитки, а не утаскивает панель за край. */
.wline{font-size:12.5px;line-height:1.5;margin:4px 0;color:var(--ink-2);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;max-width:100%}
.wline em{font-style:normal;color:var(--ink-3);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;flex:0 0 auto}
button.wlink{font-size:12.5px;color:var(--jew);background:none;padding:0;
  border-bottom:1px solid transparent;text-align:start;
  max-width:100%;overflow-wrap:anywhere}
button.wlink:hover{border-bottom-color:var(--jew)}
.wage,.wyr{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.wage{margin-inline-start:4px}
.wyr{margin-inline-end:3px}

/* ── ровные строки в панельке среза ──
   Название в две строки раньше вставало по центру и «плясало».
   Всё в панельке выравнивается по началу строки. */
#slicePanel,#slicePanel .who{text-align:start}
#slicePanel .who{align-items:flex-start}
#slicePanel .who button{text-align:start;white-space:normal;line-height:1.45;
  padding:4px 10px;border-radius:11px}
#slicePanel .pin{text-align:start}

/* ── цивилизации в слоях: список с галочками ── */
.pop details.regbox{margin:0}
.pop .regbox > summary{display:flex;align-items:center;gap:9px;width:100%;text-align:start;
  padding:8px 9px;border-radius:8px;font-size:13.5px;cursor:pointer;list-style:none;
  color:var(--ink);text-transform:none;letter-spacing:0}
.pop .regbox > summary::-webkit-details-marker{display:none}
.pop .regbox > summary::before{content:none}
.pop .regbox > summary::after{content:"\203a";margin-inline-start:7px;color:var(--ink-3);
  display:inline-block;transform:rotate(90deg);transition:transform .15s}
.pop .regbox[open] > summary::after{transform:rotate(-90deg)}
.pop .regbox > summary:hover{background:var(--chip)}
.pop .regbox .cnt{margin-inline-start:auto;font-size:11px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.pop .reglist{margin:1px 0 6px 13px;padding-inline-start:8px;
  border-inline-start:1px solid var(--border-2)}
.pop .reglist button.item{font-size:13px;padding:6px 9px}
.pop .regall{display:flex;gap:6px;padding:5px 9px 2px;margin:0}
.pop .regall button{flex:1;font-size:11.5px;padding:4px 6px;border:1px solid var(--border);
  border-radius:8px;color:var(--ink-3);background:none}
.pop .regall button:hover{border-color:var(--jew);color:var(--ink-1)}
@media (max-width:980px){
  .pop{padding:6px}
  .pop button.item{padding:9px 10px;font-size:14px}
  .pop .reglist button.item{font-size:13.5px;padding:8px 10px}
}

/* ── шапка на телефоне ── */
#menuTools h5{margin:0 0 8px;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);font-weight:620}
#menuTools .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:15px;
  padding-bottom:15px;border-bottom:1px solid var(--border-2)}
#menuTools .row .seg{position:relative}
#menuTools[hidden]{display:none}

/* ── кнопки «×» в окошках ──
   Класс .ghost занят декоративными точками на ленте, и крестики в окнах
   из-за этого превращались в крошечный ромбик в углу. Возвращаем кнопку. */
.btn.ghost{position:static;width:auto;height:auto;transform:none;border:0;
  pointer-events:auto;opacity:1;z-index:auto;background:none;color:var(--ink-2)}
.btn.icon.ghost{width:34px;height:34px;border-radius:9px}
.btn.ghost:hover{background:var(--chip);color:var(--ink)}
@media (max-width:980px){
  header.top{gap:7px}
  .brand b{font-size:12.5px;max-width:34vw;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;display:block}
  .brand svg{flex:0 0 auto}
  header.top .spacer{display:none}
  .search{order:9;flex:1 1 100%}
  #layersBtn,#sectionsBtn{padding:0 11px}
}
/* на узком телефоне название уступает место кнопкам — звезда остаётся ссылкой домой */
@media (max-width:700px){
  .brand b{display:none}
  header.top{padding:8px 10px;gap:6px}
  #layersBtn,#sectionsBtn,#menuBtn{height:34px}
}

/* ══════════════ виды «Свиток» и «Машина времени» ══════════════ */
/* панель вида занимает всё между шапкой и краем экрана */
.viewpane{position:fixed;left:0;right:0;bottom:0;overflow:hidden;
  display:flex;flex-direction:column;z-index:15}
body[data-mode="svitok"] #svitok,body[data-mode="mashina"] #mashina{top:var(--headH,104px)}
body[data-mode="svitok"] #stage, body[data-mode="svitok"] #mini,
body[data-mode="mashina"] #stage, body[data-mode="mashina"] #mini{display:none}
body[data-mode="svitok"] #viewSeg, body[data-mode="mashina"] #viewSeg{display:none}
#modeSeg .ico{display:none;font-size:15px;line-height:1}
@media (max-width:760px){
  #modeSeg .lbl{display:none}
  #modeSeg .ico{display:inline}
  #modeSeg button{padding:0 10px}
  header.top{gap:5px}
  #layersBtn,#sectionsBtn{padding:0 9px}
  #menuBtn{width:34px}
}

/* ── свиток ── */
.sv-roller{position:relative;z-index:5;height:32px;display:flex;align-items:center;flex:0 0 auto}
.sv-roller .rod{flex:1;height:24px;border-radius:12px;
  background:linear-gradient(180deg,#6b4a26 0%,#8a6335 18%,#c99a58 42%,#7d5a30 78%,#4a3118 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,235,200,.35)}
.sv-roller .knob{width:14px;height:32px;border-radius:7px;margin:0 2px;flex:0 0 auto;
  background:linear-gradient(180deg,#3a2812,#7d5a30 45%,#2c1e0e)}
.sv-roller b{position:absolute;inset-inline-end:26px;font-size:12px;font-weight:700;
  color:#f3e3c2;letter-spacing:.04em;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
#svScroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:#241c11}
.sv-parch{max-width:52rem;margin:0 auto;min-height:100%;padding:20px 18px 34px;
  background:
   linear-gradient(90deg,rgba(90,60,25,.16),rgba(90,60,25,0) 7%,rgba(90,60,25,0) 93%,rgba(90,60,25,.16)),
   var(--t-plane,#f3eee2)}
:root[data-theme="dark"] .sv-parch{background:
   linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0) 7%,rgba(0,0,0,0) 93%,rgba(0,0,0,.5)),
   var(--t-plane)}
.sv-era{margin:22px -18px 16px;padding:9px 18px;text-align:center;
  background:linear-gradient(180deg,var(--t-gold-soft),rgba(176,130,67,.2),var(--t-gold-soft));
  border-block:1px solid rgba(120,85,40,.25);
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--t-ink-2);font-weight:700}
.sv-era small{display:block;letter-spacing:.02em;text-transform:none;
  color:var(--t-ink-3);font-weight:500;margin-top:2px;font-size:11px}
.sv-evt{position:relative;display:block;width:100%;text-align:start;margin:0 0 10px;
  padding:10px 12px 10px 15px;border:1px solid var(--t-border);border-radius:12px;
  background:var(--t-surface);box-shadow:var(--t-sh-1);cursor:pointer;
  font:inherit;color:var(--t-ink)}
.sv-evt:hover{border-color:var(--t-gold);box-shadow:var(--t-sh-2)}
.sv-evt .dot{position:absolute;inset-inline-start:-5px;top:16px;width:9px;height:9px;
  border-radius:50%;background:var(--t-blue)}
.sv-evt.world{border-style:dashed}
.sv-evt.world .dot{background:var(--t-world)}
.sv-evt .yr{font-weight:800;color:var(--t-gold);font-variant-numeric:tabular-nums;margin-inline-end:9px}
.sv-evt .tt{font-weight:640}
.sv-evt.imp .tt{font-size:16px}
.sv-evt .gg{display:block;margin-top:2px;font-size:11.5px;color:var(--t-ink-3);
  font-variant-numeric:tabular-nums}

/* ── машина времени ── */
#mashina{background:
   radial-gradient(90% 60% at 50% 112%,#3a2c17 0%,transparent 60%),
   radial-gradient(closest-side at 72% 16%,rgba(201,154,88,.13),transparent 70%),
   linear-gradient(180deg,#0d0b08 0%,#171208 55%,#241a0d 100%)}
#tmDust{position:absolute;inset:0;pointer-events:none;opacity:.7}
#tmDust i{position:absolute;width:2px;height:2px;border-radius:50%;background:#d8c49a}
#tmStage{position:absolute;inset:0;perspective:840px;perspective-origin:50% 34%;pointer-events:none}
#tmCards{position:absolute;inset:0;transform-style:preserve-3d}
.tm-card{position:absolute;left:50%;top:40%;width:min(330px,82vw);pointer-events:auto;
  border-radius:15px;padding:13px 16px;cursor:pointer;
  background:linear-gradient(180deg,rgba(246,239,223,.97),rgba(233,222,196,.97));
  color:#241d14;box-shadow:0 16px 44px rgba(0,0,0,.5);
  border:1px solid rgba(120,90,40,.35);will-change:transform,opacity,filter}
.tm-card .tag{position:absolute;top:-9px;inset-inline-start:14px;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;background:#21508f;color:#fff;padding:2px 9px;border-radius:999px}
.tm-card.world .tag{background:#c25a2c}
.tm-card .yr{font-weight:800;color:#8a5f22;font-size:14.5px;font-variant-numeric:tabular-nums}
.tm-card .gg{color:#726858;font-size:11px;margin-inline-start:8px}
.tm-card b{display:block;font-size:16.5px;margin-top:3px;font-weight:700;line-height:1.3}
#tmHud{position:absolute;left:0;right:0;bottom:0;z-index:20;pointer-events:none;
  padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  background:linear-gradient(180deg,transparent,rgba(13,11,8,.92) 45%)}
#tmYear{font-size:32px;font-weight:800;color:#f3e3c2;font-variant-numeric:tabular-nums}
#tmSub{color:#a8946f;font-size:12.5px}
#tmEra{position:absolute;top:10px;left:0;right:0;text-align:center;z-index:20;pointer-events:none;
  color:#a8946f;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
#tmScroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;z-index:10;scrollbar-width:none}
#tmScroll::-webkit-scrollbar{display:none}
#tmSpace{width:1px}
/* карточки кликабельны сквозь скроллер: сам скроллер прозрачен для нажатий не нужен —
   нажатия ловит скроллер; пробрасываем клик по координате */
@media (prefers-reduced-motion:reduce){
  body[data-mode="mashina"] #tmCards{transform-style:flat}
}

/* ── MODES_OFF: свиток и машина времени спрятаны ── */
#modeSeg{display:none!important}
/* «Волна / Прямая» остаётся в шапке и на телефоне: место освободилось */
@media (max-width:760px){
  #viewSeg button{padding:0 11px;font-size:12.5px}
}
/* На узком экране слова уводят шапку во вторую строку — заменяем их
   знаками: волнистая линия и прямая. Подсказка остаётся в title. */
@media (max-width:460px){
  #viewSeg button{font-size:0;padding:0 12px}
  #viewSeg #vWave::after{content:"〰";font-size:15px}
  #viewSeg #vLine::after{content:"—";font-size:15px;font-weight:700}
}

/* ── значки ленты ── */
svg.svgi{width:1em;height:1em;display:inline-block;vertical-align:-.14em;
  flex:0 0 auto}
.tag svg.svgi{margin-inline-end:.15em}
/* у карточек маршрутов и разделов значок был цветным эмодзи — держим
   его заметным, но в палитре сайта, а не в палитре системного шрифта */
.rcard .ic{color:var(--brass)}
.rcard .ic svg.svgi{width:26px;height:26px;vertical-align:0}
.pop .mi{display:inline-flex;align-items:center;justify-content:center;
  width:18px;flex:0 0 auto;color:var(--ink-2)}
.pop .mi svg.svgi{width:17px;height:17px;vertical-align:0}
/* ссылки на страницы справочника стоят в том же списке, что и разделы, —
   и должны выглядеть так же, а не теснее */
.pop a.item{gap:9px;padding:8px 9px;border-radius:8px;font-size:13.5px}
.kind svg.svgi{vertical-align:-.16em}
#menu .btn .mi{display:inline-flex;vertical-align:-.16em;margin-inline-end:.45em}
#menu .btn .mi svg.svgi{width:1.05em;height:1.05em;vertical-align:0}

/* ── вид «Список» ── */
#listView{position:absolute;inset:0;overflow:auto;background:var(--paper);
  z-index:4;-webkit-overflow-scrolling:touch}
#listView[hidden]{display:none}
body[data-view="list"] #scene,body[data-view="list"] #botbar,
body[data-view="list"] #zoomc,body[data-view="list"] #slice,
body[data-view="list"] #slicePanel,body[data-view="list"] #mini,
body[data-view="list"] #gearwrap,body[data-view="list"] #popup{display:none}
#listBar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:var(--paper);border-bottom:1px solid var(--border)}
#listQ{flex:1 1 auto;min-width:0;font:inherit;font-size:14px;padding:8px 11px;
  border:1px solid var(--border);border-radius:9px;background:var(--surface);
  color:var(--ink)}
#listCount{flex:0 0 auto;font-size:12px;color:var(--ink-3)}
#listBody{max-width:56rem;margin:0 auto;padding:4px 14px 40px}
h3.lera{position:sticky;top:52px;margin:18px 0 6px;padding:6px 0;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);background:var(--paper)}
.lrow{display:flex;gap:11px;width:100%;text-align:start;align-items:baseline;
  padding:9px 10px;border:0;border-radius:10px;background:none;color:inherit;
  font:inherit;cursor:pointer}
.lrow:hover{background:var(--chip)}
.lrow .ld{flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  transform:translateY(-1px)}
.lrow .ly{flex:0 0 auto;width:5.2rem;font-variant-numeric:tabular-nums;
  font-size:13px;color:var(--ink-2);text-align:end}
.lrow .lt{flex:1 1 auto;min-width:0}
.lrow .lt b{font-family:var(--serif);font-weight:600;font-size:15px}
.lrow .lg{margin-inline-start:.5rem;font-size:12px;color:var(--ink-3);
  white-space:nowrap}
.lrow .lt p{margin:.2rem 0 0;font-size:13px;line-height:1.45;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
#listMore{display:block;width:100%;margin:16px 0 0}
@media (max-width:560px){
  .lrow .lg{display:none}
  #listBody{padding-inline:10px}
}

/* ── подсказка к срезу и «рядом по времени» ── */
#slicePanel .pin s{display:block;margin-top:2px;font-size:10.5px;
  text-decoration:none;opacity:.72;font-weight:400;line-height:1.3}
#slicePanel .who .off{margin-inline-start:.4em;color:var(--ink-3);
  font-size:11px;white-space:nowrap}

/* ── карточки в панельке среза: год колонкой ── */
/* Панелька узкая, строки длинные. Две колонки — год и текст — держат
   перенос там, где ему место: продолжение названия уходит под название,
   а не под год. Вбок панелька не ездит вовсе. */
#slicePanel{overflow-x:hidden}
/* Всё, что внутри панельки, обязано укладываться в её ширину: длинная
   подсказка на кнопке закрепления и длинные названия ломали её вбок. */
#slicePanel *{max-width:100%}
#slicePanel .pin{white-space:normal;text-align:start;line-height:1.35}
#slicePanel h4,#slicePanel .sub,#slicePanel .gen{overflow-wrap:anywhere}
#slicePanel .who{display:block}
#slicePanel .who button{display:flex;gap:.5rem;width:100%;align-items:baseline;
  border-radius:9px;padding:5px 8px;margin:0 0 3px;text-align:start;
  white-space:normal;overflow-wrap:anywhere}
#slicePanel .who .wy{flex:0 0 auto;min-width:2.6rem;max-width:5.4rem;
  text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums;
  color:var(--ink-3);font-size:11px}
/* flex:1 1 0 вместо auto — иначе колонка не сжимается ниже своего
   содержимого и растягивает строку шире панельки. Год не переносим,
   но и разрастаться ему не даём. */
#slicePanel .who .wt{flex:1 1 0;min-width:0;line-height:1.4}
/* white-space:nowrap этой строке достался от прошлой правки и распирал
   панель вбок: «−40 лет · ок. 2350 до н. э.» не переносилось. */
#slicePanel .who .wt .off{display:block;margin-top:1px;font-style:normal;
  font-size:10.5px;color:var(--ink-3);white-space:normal;margin-inline-start:0}

/* ── круг года ── */
/* Картинка отвечает за «где», список — за «что». Раньше обе роли
   пытался играть сам круг, и обе выходили плохо. */
.krug{max-width:640px;margin:0 auto}
#krugSvg{display:block;width:100%;height:auto;overflow:visible;touch-action:manipulation}
#krugSvg .kseg{fill:var(--paper-2,#fbf7ee);stroke:var(--border);stroke-width:.6;cursor:pointer}
#krugSvg .kseg.alt{fill:color-mix(in srgb,var(--ink-3) 7%,transparent)}
#krugSvg .kseg:hover{fill:color-mix(in srgb,var(--accent,#b48a3c) 16%,transparent)}
#krugSvg .kseg.on{fill:color-mix(in srgb,var(--accent,#b48a3c) 26%,transparent)}
#krugSvg .kmon{font-size:13px;fill:var(--ink-2);cursor:pointer}
#krugSvg .kfe{stroke:var(--accent,#b48a3c);stroke-width:2.2;stroke-linecap:round}
#krugSvg .kdot{cursor:pointer}
#krugSvg .kev{fill:var(--ink-1,#2b2b2b)}
#krugSvg .kya{fill:none;stroke:var(--ink-2);stroke-width:1.6}
#krugSvg .kdot:hover{stroke:var(--accent,#b48a3c);stroke-width:3}
#krugSvg .know{stroke:var(--accent,#b48a3c);stroke-width:1.8;stroke-dasharray:4 4}
#krugSvg .knowdot{fill:var(--accent,#b48a3c)}
#krugSvg .knowlab{font-size:12px;fill:var(--accent,#b48a3c);font-weight:600}
#krugSvg .kcen{font-size:22px;font-weight:640;fill:var(--ink-1)}
#krugSvg .kcen2{font-size:12px;fill:var(--ink-3)}
.klegend{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  margin:.6rem 0 1rem;font-size:12px;color:var(--ink-3)}
.klegend i{display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-inline-end:.35rem;vertical-align:middle}
.klegend i.kev{background:var(--ink-1,#2b2b2b)}
.klegend i.kya{border:1.6px solid var(--ink-2)}
.klegend i.kfe{width:3px;height:11px;border-radius:2px;background:var(--accent,#b48a3c)}
.khead{margin:1rem 0 .4rem;font-size:13px;color:var(--ink-3);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em}

/* ── события поверх ленты ── */
/* #ribbon объявлен с z-index:1, а #fg — без z-index вовсе. По правилам
   наложения этого достаточно, чтобы лента рисовалась поверх событий,
   хотя в разметке она идёт раньше. Даём слою событий свой уровень.
   Порядок: фон эпох → лента → события. */
#fg{z-index:4}

/* ── источники по уровням в ленте ── */
.srcs2{margin:.2rem 0 .2rem}
.srcs2 .st{margin:0 0 .7rem}
.srcs2 .st h4{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin:0 0 .25rem}
.srcs2 .st ul{list-style:none;margin:0;padding:0}
.srcs2 .st li{font-size:.88rem;line-height:1.55;padding:.08rem 0 .08rem .85rem;
  text-indent:-.85rem;overflow-wrap:anywhere}
.srcs2 .st li::before{content:"·";color:var(--gold,#b48a3c);margin-inline-end:.4rem}
.srcs2 .st li i{color:var(--ink-3);font-style:italic}

/* ── статья одним свитком ── */
/* Разделы идут подряд, а не по вкладкам: тонкая черта и подзаголовок
   отделяют один от другого, не заставляя переключаться. */
.psec{scroll-margin-top:8px}
.psec + .psec{border-top:1px solid var(--border);margin-top:1.1rem;padding-top:.9rem}
.psec-h{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin:0 0 .6rem}
#tabs button[aria-current="true"]{color:var(--ink-1);font-weight:600}

/* ── круг года: высота по viewBox и в WebKit ── */
/* Safari не выводит высоту svg из viewBox при height:auto — круг
   схлопывался в ноль, и раздел выглядел пустым. */
#krugSvg{aspect-ratio:1/1;height:auto;max-height:none}
#zNow{font-weight:600}

/* оговорка о двух хронологиях под списком мировых событий */
#slicePanel .hronote{
  margin:8px 2px 2px;font-size:11px;line-height:1.45;
  color:var(--ink-3);border-top:1px solid var(--line);padding-top:7px;
}

/* ── «сейчас» на ленте ── */
#nowMark{position:absolute;top:0;bottom:0;width:0;z-index:19;pointer-events:none;display:none}
#nowMark.on{display:block}
#nowMark .nln{position:absolute;top:22px;bottom:0;inset-inline-start:-1px;width:2px;
  background:repeating-linear-gradient(to bottom, var(--brass,#b48a3c) 0 5px, transparent 5px 11px);
  opacity:.65}
#nowMark .nhd{position:absolute;top:1px;transform:translateX(-50%);white-space:nowrap;
  font-size:10.5px;letter-spacing:.02em;padding:2px 7px;border-radius:999px;
  background:var(--bg-1,#fff);border:1px solid var(--brass,#b48a3c);
  color:var(--brass,#b48a3c);opacity:.92}
#nowJump{position:absolute;bottom:86px;z-index:22;display:none;align-items:center;gap:5px;
  font:600 12px/1 inherit;padding:8px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--brass,#b48a3c);background:var(--bg-1,#fff);
  color:var(--brass,#b48a3c);box-shadow:0 6px 18px rgba(0,0,0,.14)}
#nowJump.on{display:inline-flex}
#nowJump.right{inset-inline-end:14px}
#nowJump.left{inset-inline-start:14px}
#nowJump:hover{background:var(--brass,#b48a3c);color:#fff}

/* ── кабинет и кнопки «моё» ── */
.mybar{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.mybtn{border:1px solid var(--line);background:transparent;color:var(--ink-2);
  border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer}
.mybtn:hover{border-color:var(--brass,#b48a3c);color:var(--ink-1)}
.mybtn.on{border-color:var(--brass,#b48a3c);color:var(--brass,#b48a3c);
  background:color-mix(in srgb, var(--brass,#b48a3c) 12%, transparent);font-weight:600}
.kstats{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.kstat{flex:1 1 90px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:center}
.kstat b{display:block;font-size:22px;line-height:1.1}
.kstat span{font-size:11.5px;color:var(--ink-3)}
.khead{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin:16px 0 8px}





/* ── полный кабинет: профиль, настройки, свои данные ──
   Переменные берём те, что есть в оболочке: --border, --plane,
   --ink-1/2/3. Ошибиться тут легко — поля просто станут невидимыми. */
#smBody .kabme{display:grid;gap:12px;margin:2px 0 6px;max-width:520px}
#smBody .kabme label{display:grid;gap:5px;font-size:12px;color:var(--ink-2)}
#smBody .kabme label i{font-style:normal;font-size:11.5px;color:var(--ink-3)}
#smBody .kabme input,#smBody .kabme select{
  font:inherit;font-size:14px;color:var(--ink-1);background:var(--plane);
  border:1px solid var(--border);border-radius:10px;padding:10px 12px;width:100%;
}
#smBody .kabme label .btn{width:100%;justify-content:flex-start}
#smBody .kabme .kabval{font-size:14px;color:var(--ink-2);padding:10px 12px;
  border:1px dashed var(--border);border-radius:10px}
#smBody .kabme .kabbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
#smBody .kabme .kabbtns .btn{flex:1 1 150px;justify-content:center}
#smBody .kabtools{display:grid;gap:8px;margin:2px 0 6px;max-width:520px}
#smBody .kabtools .f{margin:0}
#smBody .kabsmall{opacity:.75}
#smBody .kabsmall .btn{font-size:12.5px;padding:8px 11px}
/* счётчики кабинета остались без рамки: у них в стилях переменная,
   которой в оболочке нет. Поправляем здесь, не трогая чужой патч. */
#smBody .kstat{border:1px solid var(--border)}
#smBody h6.khead{margin:16px 0 7px}


/* ── кабинет: полосы эпох и награды ── */
#smBody .keras{display:grid;gap:9px;margin:2px 0 6px;max-width:520px}
#smBody .kera{display:grid;grid-template-columns:1fr auto;gap:3px 10px;
  text-decoration:none;color:inherit;padding:8px 10px;border:1px solid var(--border);
  border-radius:10px}
#smBody .kera:hover{background:var(--chip)}
#smBody .kera .kn{font-size:13.5px}
#smBody .kera .kc{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
#smBody .kbar{grid-column:1 / -1;height:5px;border-radius:3px;background:var(--chip-2);
  overflow:hidden}
#smBody .kbar i{display:block;height:100%;background:var(--jew);border-radius:3px}
#smBody .kaws{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 4px}
#smBody .kaw{font-size:12.5px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--border);background:var(--chip)}
#smBody .kabnext{font-size:11.5px}

/* ── пути: кнопка у полосы эпохи и список столетий ── */
#smBody .kera{grid-template-columns:1fr auto}
#smBody .kera .kn{text-decoration:none;color:inherit}
#smBody .kera a.kn:hover{text-decoration:underline}
#smBody .kpwrap{grid-column:1 / -1;display:flex;justify-content:flex-end;margin-top:2px}
#smBody .kpbtn{font-size:12px;padding:5px 11px;text-decoration:none}
#smBody .kpdone{font-size:12px;color:var(--ink-3)}
#smBody .kveks{margin:4px 0 6px;max-width:520px}
#smBody .kveks summary{cursor:pointer;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:10px 0 6px}

/* ── «Эта неделя» в ленте ── */
#smBody .wkpar{display:grid;gap:6px;padding:14px;border:1px solid var(--border);
  border-radius:12px;margin:2px 0 6px;max-width:520px}
#smBody .wkpar .wkl{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.07em}
#smBody .wkpar b{font-size:19px;font-family:var(--font-read)}
#smBody .wkpar b a{color:inherit}
#smBody .wkbtn{justify-content:center;margin-top:6px;text-decoration:none}
#smBody .wklist{display:grid;gap:8px;max-width:520px}

/* ── две шкалы: от сотворения сверху, гражданская снизу ── */
/* Верхняя шкала — счёт от сотворения, латунью: это счёт справочника.
   Нижняя — гражданская, тише и серее: она для сверки, а не для чтения. */
.gtick.civ{color:var(--ink-3);font-variant-numeric:tabular-nums}
.gtick.civ b{font-weight:640;color:var(--ink-2)}
.gtick.top b{color:var(--brass)}
/* Старая мелкая приписка гражданского года под верхней шкалой больше
   не нужна: гражданский год теперь стоит своей строкой внизу. */
.gtick.top s{display:none}

/* ── обзорная полоса: четыре ряда и подпись периода в лупе ── */
/* Имена эпох — верхний ряд, ничем не перечёркнутый. */
.mename{top:0 !important;height:12px !important}
.mename span{font-size:8.5px}
/* Числа тысячелетий — нижний ряд, под штрихами, а не в них. */
.mlab{bottom:1px}
/* Подпись периода в лупе: читается поверх штрихов, не мешает тянуть
   рамку мышью и не ловит нажатия — полосу возят за неё саму. */
#miniSpan{position:absolute;top:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:4;white-space:nowrap;
  font-size:9.5px;font-weight:640;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--ink-1);
  background:var(--raised);border:1px solid var(--border);
  border-radius:6px;padding:1px 6px;box-shadow:var(--sh-1)}
:root[dir="rtl"] #miniSpan{transform:translate(50%,-50%)}
/* На узком экране полоса ниже, и подпись прижимается к верху рамки. */
@media (max-width:560px){#miniSpan{font-size:9px;padding:0 5px}}

/* ── плавность прокрутки: слои, фильтры и режимы смешивания ── */
/* 1. Слои, которые едут, объявлены слоями постоянно — иначе Safari
   пересоздаёт их после каждой полной пересборки сцены. */
#bg,#fg,#ribbon{will-change:transform;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}

/* 2. Фильтры-тени на движущейся графике: в покое — да, в движении —
   нет. Класс body.moving снимается через 170 мс после последнего
   сдвига, так что в статике вид не меняется. */
body.moving #ribbon .rb-out,
body.moving #ribbon .chain-line{filter:none}
body.moving #ribbon .chain-spark{animation-play-state:paused}
body.moving .life,body.moving .ev,body.moving .clu{box-shadow:none}

/* 3. Фоновое свечение больше не смешивается с тем, что под ним, и не
   размывается целым слоем: размытие ушло на сами пятна, где оно
   кэшируется. Плотность подобрана заново — на глаз то же самое. */
#aurora{filter:none;mix-blend-mode:normal;isolation:isolate;
  contain:paint;opacity:.62}
#aurora i{filter:blur(26px)}
:root[data-theme="dark"] #aurora{filter:none;mix-blend-mode:normal;opacity:.42}
/* Пятна размываются сами, поэтому края градиентов можно оставить
   жёстче: суммарно получается тот же мягкий налив. */
#aurora .a1{background:radial-gradient(circle at 50% 50%,
  rgba(176,130,67,.34), transparent 74%)}
#aurora .a2{background:radial-gradient(circle at 50% 50%,
  rgba(47,93,158,.22), transparent 74%)}
#aurora .a3{background:radial-gradient(circle at 50% 50%,
  rgba(194,90,44,.19), transparent 74%)}

/* Кто просил меньше движения — тому и свечение незачем. */
@media (prefers-reduced-motion: reduce){
  #aurora{display:none}
}

/* ── полосы: жизнь, правление, время деятельности ── */
/* Три вида полосы, и их надо различать не читая подписи.
   Жизнь — сплошная, как была. Правление — с насечкой: это срок в
   должности, а не срок жизни. Время деятельности — пунктиром: самое
   слабое утверждение из трёх, «когда о нём слышно». */
.life.reign{background:repeating-linear-gradient(90deg,
  var(--brass) 0 7px, transparent 7px 10px);opacity:.5}
.life.reign:hover{opacity:.72}
.life.act{background:none;opacity:.6;
  border-top:2px dotted var(--life);border-radius:0;height:2px;margin-top:5px}
.life.act:hover{opacity:.9}
/* Годы под именем в срезе: у правившего это не возраст, а номер года
   правления, и подпись рядом это говорит. */
#slicePanel .who .off{opacity:.72}

/* ── три отрезка цепочки: получение, печать, преемственность ── */
/* Отрезок преемственности рисуется пунктиром и тише: это другое
   утверждение, чем получение Устной Торы, и вид должен об этом
   говорить сам, без подписи. */
#ribbon .chain-line.auth{stroke-dasharray:6 5;opacity:.5;filter:none}
#ribbon .chain-node.auth{fill:var(--surface);stroke:var(--chain);stroke-width:1.8}
#ribbon .chain-node.seal{fill:var(--surface);stroke:var(--chain);stroke-width:2}
#ribbon .chain-stem.auth{opacity:.22}
/* Разрыв смихи: тонкая нить и двойной штрих поперёк. Точки здесь быть
   не может — датированного действия не записано. */
#ribbon .chain-gap{stroke:var(--chain);stroke-width:1;opacity:.28;stroke-dasharray:1 5}
#ribbon .chain-break{stroke:var(--chain);stroke-width:1.8;opacity:.6;stroke-linecap:round}
#ribbon .chain-node{cursor:default}
/* Подпись отрезка в срезе: у преемственности она тише, чтобы номер
   первого отрезка и её отсутствие не читались как одно и то же. */
#slicePanel .chainbox{margin-top:7px;background:rgba(27,175,122,.12)}
#slicePanel .chainbox.auth{background:rgba(27,175,122,.07)}
#slicePanel .chainbox button{background:none;border:0;padding:0;font:inherit;
  color:var(--ink-1);text-align:start;cursor:pointer;text-decoration:underline;
  text-decoration-style:dotted;text-underline-offset:2px}
#slicePanel .chainbox .off{display:block;margin-top:4px;font-size:11px;
  line-height:1.45;font-style:normal;color:var(--ink-3)}

/* ── выделение в тексте статьи ── */
/* Полужирным в этих текстах помечено то, что читатель должен унести с
   собой: поправка к ходовому изложению, дата, которую путают, имя,
   которое подменяют. Пусть оно и выглядит так — заметно, но не крикливо. */
#panel .body b, #panel p b{font-weight:680;color:var(--ink-1)}
#panel .body i, #panel p i{font-style:italic;opacity:.92}

/* ── полоса с одним известным краем ── */
/* Смерть записана, рождение нет (или наоборот): полоса сплошная у
   известного края и тает к неизвестному. Это сильнее пунктира — один
   факт есть, — и видно, какого именно края не хватает. */
.life.half.openL{background:linear-gradient(90deg, transparent,
  color-mix(in srgb, var(--life) 22%, transparent) 38%, var(--life));
  box-shadow:none}
.life.half.openR{background:linear-gradient(90deg, var(--life),
  color-mix(in srgb, var(--life) 22%, transparent) 62%, transparent);
  box-shadow:none}
/* звено цепи передачи остаётся в цвете цепи и здесь */
.life.ch.half.openL{background:linear-gradient(90deg, transparent,
  color-mix(in srgb, var(--chain) 22%, transparent) 38%, var(--chain))}
.life.ch.half.openR{background:linear-gradient(90deg, var(--chain),
  color-mix(in srgb, var(--chain) 22%, transparent) 62%, transparent)}

/* ── ключ к полосам в панели «Слои» ── */
/* Образцы рисуются теми же правилами, что и сами полосы: если вид
   полосы когда-нибудь поменяется, ключ должен поменяться вместе с ней,
   а не рассказывать про вчерашнюю ленту. */
/* Это не ещё один список переключателей, а справка: её надо
   отбить от рядов вокруг. Черта сверху и снизу, свой отступ и чуть
   иная подложка — глаз сразу видит, что здесь не нажимают, а
   читают. */
.barkey{margin:6px 8px 7px;padding:8px 9px 9px;display:flex;
  flex-direction:column;gap:6px;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);border-radius:8px;
  background:color-mix(in srgb, var(--ink) 3.5%, transparent)}
.barkey h6{margin:0 0 2px;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-3);font-weight:600}
.barkey span{display:flex;align-items:center;gap:8px;font-size:11px;
  color:var(--ink-2);line-height:1.3}
.barkey i.bk{flex:0 0 auto;width:30px;height:7px;border-radius:3px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--life) 55%, transparent), var(--life))}
.barkey i.bk-reign{border-radius:3px;background:repeating-linear-gradient(90deg,
  var(--brass) 0 7px, transparent 7px 10px);opacity:.6}
.barkey i.bk-half{background:linear-gradient(90deg, transparent,
  color-mix(in srgb, var(--life) 22%, transparent) 38%, var(--life))}
.barkey i.bk-act{height:0;border-radius:0;background:none;
  border-top:2px dotted var(--life);opacity:.7}

/* ── кабинет: лицо читателя ── */
/* Кружок с инициалами, пока снимка нет; карандаш в углу говорит, что
   на него можно нажать. Снимок хранится у читателя в браузере. */
.kabav{display:flex;align-items:center;gap:13px;margin:1px 0 13px}
.avbtn{position:relative;flex:0 0 auto;width:58px;height:58px;border:0;padding:0;
  border-radius:50%;cursor:pointer;background:var(--jew-soft);color:var(--jew);
  font-size:19px;font-weight:640;transition:transform .14s var(--ease)}
.avbtn:hover{transform:scale(1.04)}
.avbtn:active{transform:scale(.97)}
.avbtn img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avbtn > span{display:flex;width:100%;height:100%;align-items:center;
  justify-content:center;border-radius:50%;letter-spacing:.02em}
.avbtn .pen{position:absolute;inset-inline-end:-2px;bottom:-2px;width:21px;height:21px;
  border-radius:50%;background:var(--raised);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:10px;
  font-style:normal;color:var(--ink-2);box-shadow:var(--sh-1)}
.avbtn:hover .pen{background:var(--chip);color:var(--ink-1)}
.avwho{min-width:0;display:flex;flex-direction:column;gap:2px}
.avwho b{font-size:14.5px;font-weight:640;color:var(--ink-1)}
.avwho i{font-style:normal;font-size:11.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avwho .lnk{align-self:flex-start;background:none;border:0;padding:2px 0 0;
  font-size:11px;color:var(--ink-3);text-decoration:underline;cursor:pointer}
.avwho .lnk:hover{color:var(--ink-1)}

/* ── зоны касания и вырез экрана (iPhone) ── */
/* Кнопка эпохи ростом 18 пикселей — палец промахивался. Видимый размер
   прежний, зона нажатия выросла до 44 невидимым слоем. */
.ebtn{position:relative}
.ebtn::after{content:"";position:absolute;inset:-13px -8px}
/* Шапка и нижние кнопки не прячутся под чёлку и полосу жестов. */
header.top{padding-top:calc(8px + env(safe-area-inset-top,0px))}
/* Вид «Свиток» и «Вглубь» рисуют свою шапку тем же классом. */
#app>header.top{padding-top:calc(8px + env(safe-area-inset-top,0px))}
#zoomc{inset-inline-end:calc(14px + env(safe-area-inset-right,0px))}
#botbar{bottom:calc(16px + env(safe-area-inset-bottom,0px))}

/* ── подпись проекта и письмо автору ── */
.projline{display:flex;flex-direction:column;gap:4px;margin-top:15px;
  padding-top:11px;border-top:1px solid var(--border)}
.projline i{font-style:normal;font-size:10.5px;color:var(--ink-3);
  letter-spacing:.02em}
.projline .lnk{align-self:flex-start;background:none;border:0;padding:0;
  font-size:12.5px;color:var(--jew);text-decoration:underline;cursor:pointer}
#waForm{display:flex;flex-direction:column;gap:8px;margin-top:9px}
#waForm input,#waForm textarea{border:1px solid var(--border);
  border-radius:var(--r-s);background:var(--chip);padding:8px 10px;
  font:inherit;font-size:13px;color:var(--ink-1)}
#waForm textarea{resize:vertical}

/* ── правление врезкой внутри линии жизни ── */
/* Узор тот же, что у самостоятельной полосы правления, — латунная
   насечка; лежит внутри сплошной линии жизни и не ловит указатель:
   нажатие достаётся самой линии. */
.rinset{position:absolute;height:5px;border-radius:2.5px;z-index:4;
  pointer-events:none;opacity:.8;
  background:repeating-linear-gradient(90deg,
    var(--brass) 0 5px, transparent 5px 8px)}

/* ── кнопка «назад» в приложении ── */
/* В браузере её нет вовсе: класс in-app ставит скрипт только внутри
   приложения. Отступ сверху — на вырез экрана. */
#appBack{position:fixed;inset-inline-start:10px;
  top:calc(9px + env(safe-area-inset-top,0px));z-index:60;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--border);
  background:var(--raised);color:var(--ink-2);display:flex;
  align-items:center;justify-content:center;box-shadow:var(--sh-1);
  cursor:pointer;-webkit-tap-highlight-color:transparent}
#appBack:active{transform:scale(.94)}
html.in-app{overscroll-behavior-y:none}
html.in-app button,html.in-app .lbl,html.in-app .life,html.in-app .lifelbl,
html.in-app .card,html.in-app nav a{-webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none}

/* ── протяжка не выделяет текст ── */
/* Подписи на ленте — настоящий текст, и Safari принимал протяжку за
   выделение: пол-экрана вспыхивало синим и гасло на отпускании.
   Запрет стоит там, где текст служит управлением, а не чтением. */
#scene,#bg,#fg,#ribbon,#mini,#topbar,#botbar,#zoomc,#scale,#legend,
#slice,#nowMark,.lbl,.lifelbl,.ebtn,.gtick,.clu,.ev,.life{
  -webkit-user-select:none;user-select:none}
.lbl,.lifelbl,.ebtn{-webkit-user-drag:none}
/* А это читают — здесь выделение нужно: цитату надо уметь скопировать. */
#panel,#panel *,#slicePanel,#slicePanel *,#popup,#popup *,#listBody,
#listBody *{-webkit-user-select:text;user-select:text}
/* На ходу — тем более: пока лента едет, выделять нечего. */
body.moving,body.moving *{-webkit-user-select:none;user-select:none}

/* ── линии учительства ── */
/* Тонкая дуга от полосы учителя к полосе ученика. Нарочно бледная:
   она сшивает полосы, а не спорит с ними. Точка — на стороне ученика,
   чтобы направление читалось без стрелки. */
#ribbon .teach{fill:none;stroke:var(--brass);stroke-width:1.1;opacity:.42;
  stroke-linecap:round}
#ribbon .teach-end{fill:var(--brass);opacity:.62}
/* so-strelki-vmeste: дуги едут с лентой (panApply), прятать их больше незачем */

/* ── баннер недели на ленте ── */
/* Держится поверх полотна как панель среза: то же оформление, та же
   возможность утащить за шапку в удобное место. */
#wkBan{position:fixed;z-index:39;inset-inline-end:14px;top:108px;
  width:min(332px,calc(100vw - 24px));background:var(--raised);
  border:1px solid var(--border);border-radius:var(--r);
  box-shadow:0 10px 30px rgba(0,0,0,.16);font-size:12.5px;color:var(--ink-1);
  display:flex;flex-direction:column;max-height:min(64vh,540px);
  overflow:hidden;animation:wkIn .22s var(--ease-out,ease) both}
@keyframes wkIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1}}
#wkBan .wb-grab{display:flex;align-items:center;gap:6px;padding:8px 6px 8px 12px;
  cursor:grab;touch-action:none;border-bottom:1px solid var(--border);
  background:var(--raised);border-radius:var(--r) var(--r) 0 0}
#wkBan.moving{box-shadow:0 16px 42px rgba(0,0,0,.26)}
#wkBan.moving .wb-grab{cursor:grabbing}
#wkBan .wb-ttl{flex:1;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}
#wkBan .wb-x{width:28px;height:28px;border:0;background:none;color:var(--ink-3);
  font-size:17px;line-height:1;cursor:pointer;border-radius:50%;flex:0 0 auto}
#wkBan .wb-x:hover{background:var(--chip);color:var(--ink-1)}
#wkBan .wb-body{padding:10px 12px 12px;overflow:auto;-webkit-overflow-scrolling:touch}
#wkBan .wb-when{font-size:11.5px;color:var(--ink-3)}
#wkBan .wb-name{font-family:var(--font-read);font-size:19px;font-weight:650;
  margin:1px 0 1px;line-height:1.2}
#wkBan .wb-range{font-size:11.5px;color:var(--ink-3);margin:0 0 7px}
#wkBan .wb-sum{margin:0 0 4px;line-height:1.46;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden}
#wkBan h6{margin:10px 0 5px;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}
#wkBan .wb-chips{display:flex;flex-wrap:wrap;gap:5px}
#wkBan .wb-chips button{font:inherit;font-size:11.5px;padding:4px 10px;
  border-radius:999px;border:1px solid var(--border);background:var(--chip);
  color:var(--ink-1);cursor:pointer}
#wkBan .wb-chips button:hover{border-color:var(--brass)}
#wkBan .wb-ev{display:grid;gap:3px}
#wkBan .wb-ev button{font:inherit;font-size:11.5px;text-align:start;
  padding:5px 8px;border-radius:8px;border:1px solid transparent;
  background:none;color:var(--ink-1);cursor:pointer;display:block;width:100%}
#wkBan .wb-ev button:hover{background:var(--chip);border-color:var(--border)}
#wkBan .wb-ev i{font-style:normal;color:var(--ink-3);font-variant-numeric:tabular-nums}
#wkBan .wb-foot{padding:9px 12px 12px;border-top:1px solid var(--border);
  background:var(--raised);flex:0 0 auto}
#wkBan .wb-go{display:block;text-align:center;padding:8px 10px;
  border-radius:999px;background:var(--brass);color:#fff;text-decoration:none;
  font-weight:600;font-size:12.5px}
#wkBan .wb-go:hover{filter:brightness(1.06);text-decoration:none}
/* На узком экране баннер уходит вниз — там же, где панель среза, но
   она открывается только по нажатию, а баннер к тому времени обычно
   уже закрыт или отодвинут. */
@media (max-width:980px){
  #wkBan{inset-inline-end:auto;inset-inline-start:12px;top:auto;
    bottom:calc(42px + env(safe-area-inset-bottom,0px));
    width:min(330px,calc(100vw - 24px));max-height:46vh}
}
@media print{#wkBan{display:none}}

/* ── пока лента собирается ── */
#boot{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;background:var(--paper,#faf7f0);
  font:500 15px/1.4 var(--font-read,system-ui);color:var(--ink-2,#6b6459);
  text-align:center;padding:0 28px}
#boot i{display:block;width:26px;height:26px;border-radius:50%;
  border:2.5px solid var(--border,#d9d2c4);border-top-color:var(--brass,#a8853f);
  animation:bootspin .9s linear infinite}
@keyframes bootspin{to{transform:rotate(360deg)}}
#boot.bad i{display:none}
#boot.bad{color:var(--ink-1,#33302b)}

/* ── карточка под вырезом экрана ── */
/* Карточка человека открывается во весь экран, и её шапка с крестиком
   упиралась в часы: закрыть было нечем. */
#panel>header{padding-top:calc(10px + env(safe-area-inset-top,0px))}

/* ── крестик закрытия без свечения ── */
/* Было световое пятно `0 0 8px 6px`: оно ложилось на соседнюю строку и
   перехватывало нажатие. Плашка осталась, свечение убрано. */
/* Свечение задано селектором `#slicePanel .x` — силой 1-1-0, поэтому
   обычного `button.x` не хватает: нужен свой идентификатор. */
#slicePanel button.x,#panel button.x,.pop button.x,button.x{
  box-shadow:0 0 0 1px var(--border)}
#slicePanel button.x:hover,#panel button.x:hover,.pop button.x:hover{
  box-shadow:0 0 0 1px var(--brass)}
/* В карточке среза первая строка — кнопка на всю ширину; отводим
   крестику собственное место, чтобы текст под него не заезжал. */
#slicePanel .pin{padding-inline-end:32px;margin-top:22px}
/* Крестик уходит в собственную полоску сверху, рядом с ручкой
   перетаскивания: раньше он сидел вплотную к первой строке. */
#slicePanel button.x{top:3px;inset-inline-end:5px}

/* ── телефон не должен греться от красоты ── */
/* Бесконечная анимация трёх размытых пятен на весь экран заставляет
   видеочип пересобирать слои каждый кадр даже в покое. Неподвижное
   свечение считается один раз и дальше бесплатно. */
@media (pointer: coarse){
  /* именно по классам: правило с анимацией задано как `#aurora .a1`,
     и `#aurora i` ему проигрывает по силе */
  #aurora .a1,#aurora .a2,#aurora .a3{animation:none}
  #ribbon .chain-spark{filter:none}
}

/* ── придирки с живого iPhone ── */
/* 1. Мини-карта не лезет в зону жеста «домой»: контент поднят на
   высоту безопасного поля, подложка дотянута до края. */
#mini{height:calc(54px + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:content-box;
  height:54px}
@supports (padding-bottom: env(safe-area-inset-bottom)){
  #mini{padding-bottom:env(safe-area-inset-bottom,0px)}
}
/* 3. Поиск — в одну строку со «Слои · Разделы · ⋯». */
@media (max-width:760px){
  header.top .search{order:0;flex:1 1 72px;min-width:64px}
  header.top .search input{font-size:16px}
}
/* 6. Крестик и ручка баннера: зона нажатия по норме Apple. */
#wkBan .wb-x{position:relative}
#wkBan .wb-x::after{content:"";position:absolute;inset:-9px}
#wkBan .wb-grab{min-height:20px;width:100%}

/* ── карточка среза: полоса управления отдельно от содержимого ── */
#slicePanel{padding-top:34px}
#slicePanel .grab{position:absolute;top:0;left:0;right:0;margin:0;height:28px;
  border-bottom:1px solid var(--border);border-radius:var(--r) var(--r) 0 0}
#slicePanel button.x{position:absolute;top:2px;inset-inline-end:4px;float:none;
  margin:0;z-index:3}
#slicePanel .pin{margin-top:0}

/* ── нижняя метка среза ── */
#slice .hd2{top:auto;bottom:6px}

/* ── упругий край мира ── */
@keyframes bumpL{0%{transform:translate3d(0,0,0)}35%{transform:translate3d(14px,0,0)}100%{transform:translate3d(0,0,0)}}
@keyframes bumpR{0%{transform:translate3d(0,0,0)}35%{transform:translate3d(-14px,0,0)}100%{transform:translate3d(0,0,0)}}
#scene.bump-l{animation:bumpL .32s cubic-bezier(.2,.8,.3,1)}
#scene.bump-r{animation:bumpR .32s cubic-bezier(.2,.8,.3,1)}
@media (prefers-reduced-motion: reduce){#scene.bump-l,#scene.bump-r{animation:none}}

/* ── порог поколения: скрытые люди — счётчиком ── */
.pmore{position:absolute;transform:translateX(-50%);pointer-events:auto;
  font:600 10.5px/1 var(--font-read,system-ui);padding:4px 9px;border-radius:999px;
  background:var(--chip);border:1px solid var(--border);color:var(--ink-2);
  cursor:pointer;white-space:nowrap;z-index:6}
.pmore:hover{border-color:var(--brass);color:var(--ink-1)}
.pmore::after{content:"";position:absolute;inset:-8px}

/* ── баннер недели: компактный, полупрозрачный ── */
#wkBan{width:min(252px,72vw);font-size:11.5px;max-height:min(46vh,330px);
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#wkBan .wb-name{font-size:15px;line-height:1.25}
#wkBan .wb-sum{display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
#wkBan h6{margin:7px 0 3px}

/* ── баннер недели: в центре, крупнее, целиком ── */
#wkBan{width:min(340px,88vw);font-size:13px;max-height:min(68vh,520px)}
#wkBan.wb-center{inset-inline-end:auto;left:50%;top:44%;
  transform:translate(-50%,-50%);animation:wkPop .34s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes wkPop{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#wkBan .wb-name{font-size:17.5px}
#wkBan .wb-sum{display:block;-webkit-line-clamp:unset;overflow:visible;
  line-height:1.5;font-size:12.5px}
#wkBan .wb-body{overflow:auto;-webkit-overflow-scrolling:touch}
#wkBan .wb-when{font-size:11.5px}
@media (prefers-reduced-motion: reduce){#wkBan.wb-center{animation:none}}

/* ── баннер: ровно по центру, заголовок причёсан ── */
#wkBan.wb-center{top:50%}
@keyframes wkPop{from{opacity:0;transform:translate(-50%,-47%) scale(.94)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#wkBan .wb-ttl{font-size:10px;letter-spacing:.14em;color:var(--brass);
  font-weight:700;display:inline-flex;align-items:center;gap:7px}
#wkBan .wb-ttl::before{content:"";width:16px;height:2px;border-radius:1px;
  background:var(--brass);opacity:.8}
#wkBan .wb-name{font-family:var(--serif,serif);font-size:19px;
  letter-spacing:.01em}
#wkBan .wb-when{color:var(--ink-3)}

/* ── шлифовка по разбору 19.08 ── */
/* баннер недели: воздух между блоками, события — кнопками */
#wkBan .wb-sum{margin:9px 0 4px}
#wkBan h6{margin:15px 0 7px;padding-top:11px;border-top:1px solid var(--border);
  font-size:9.5px;letter-spacing:.13em;color:var(--ink-3)}
#wkBan [data-wev]{display:flex;width:100%;box-sizing:border-box;text-align:start;
  align-items:baseline;gap:8px;background:var(--chip);border:1px solid var(--border);
  border-radius:9px;padding:7px 10px;margin:5px 0;cursor:pointer;font:inherit;
  color:var(--ink-1)}
#wkBan [data-wev]::after{content:"\203A";margin-inline-start:auto;
  color:var(--brass);font-size:14px;line-height:1}
#wkBan [data-wev]:active{background:var(--raised)}
#wkBan .wb-chips button{border:1px solid var(--border)}
/* на время движения ленты дорогое размытие гаснет */
body.moving #wkBan{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:var(--raised)}
/* карточка среза: подпись полосы */
#slicePanel .grab{justify-content:flex-start;padding-inline:12px}
#slicePanel .grab::before{display:none}
#slicePanel .grab i{font-style:normal;font-size:9px;letter-spacing:.14em;
  color:var(--brass);font-weight:700}
/* линии учительства не скачут на глазах */
#ribbon .teach{transition:opacity .18s}
/* so-strelki-vmeste: дуги едут с лентой (panApply), прятать их больше незачем */

/* ── цепь передачи: своя дорожка под лентой ── */
#ribbon .chain-rail{stroke:var(--chain);stroke-width:2;opacity:.85;
  stroke-linecap:round}
#ribbon .chain-rail.auth{stroke-dasharray:6 5;opacity:.45}
#ribbon .chain-halo{fill:none;stroke:var(--chain);stroke-width:1.4;opacity:.45}
#ribbon .chain-node.here{stroke-width:2}
#ribbon .chain-num{fill:var(--ink-3);font-size:8.5px;font-weight:600;
  font-variant-numeric:tabular-nums}
.chrail{position:absolute;left:0;right:0;height:0;z-index:2;pointer-events:none}
.chrail u{position:absolute;inset-inline-start:10px;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--chain);text-decoration:none;font-weight:700;
  background:var(--surface);padding-inline-end:8px;opacity:.9}
.chhere{position:absolute;z-index:3;transform:translateX(-50%);pointer-events:none;
  font-size:10px;font-weight:600;color:var(--chain);white-space:nowrap;
  background:var(--surface);padding:1px 6px;border-radius:999px;
  border:1px solid color-mix(in srgb, var(--chain) 40%, transparent)}
/* стрелка вместо точки у ученика */
#ribbon path.teach-end{fill:var(--brass);stroke:none}

/* ── знакомство: три окна при первом входе ── */
#soOnb{position:fixed;inset:0;z-index:120;display:flex;align-items:center;
  justify-content:center;background:color-mix(in srgb, var(--paper,#faf7f0) 62%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  animation:obIn .3s ease both}
#soOnb.bye{opacity:0;transition:opacity .24s}
@keyframes obIn{from{opacity:0}to{opacity:1}}
#soOnb .ob-card{width:min(330px,86vw);background:var(--raised,#fffdf8);
  border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.18);
  overflow:hidden;padding:22px 0 14px}
#soOnb .ob-track{display:flex;transition:transform .3s cubic-bezier(.2,.8,.3,1)}
#soOnb .ob-slide{flex:0 0 100%;padding:0 24px;box-sizing:border-box;text-align:center}
#soOnb .ob-pic{width:96px;height:42px;margin:2px auto 10px;display:block}
#soOnb h3{font-family:var(--serif,serif);font-size:18px;margin:0 0 8px;color:var(--ink-1)}
#soOnb p{font-size:13px;line-height:1.55;color:var(--ink-2);margin:0;min-height:7.2em}
#soOnb .ob-dots{display:flex;gap:7px;justify-content:center;margin:14px 0 12px}
#soOnb .ob-dots i{width:7px;height:7px;border-radius:50%;background:var(--border-2,#d9d2c4)}
#soOnb .ob-dots i.on{background:var(--brass,#a8853f)}
#soOnb .ob-btns{display:flex;align-items:center;justify-content:space-between;
  padding:0 18px}
#soOnb .ob-skip{background:none;border:0;font:inherit;font-size:12px;
  color:var(--ink-3);cursor:pointer;padding:8px}
#soOnb .ob-next{font:600 14px/1 var(--font-read,system-ui);padding:11px 26px;
  border:0;border-radius:999px;background:var(--chip);color:var(--ink-1);cursor:pointer}
#soOnb .ob-next.go{background:var(--brass,#a8853f);color:#fff}
@media (prefers-reduced-motion: reduce){#soOnb,#soOnb .ob-track{animation:none;transition:none}}

/* ── so-palets: зоны нажатия под палец ── */
/* Крестик очистки поиска виден как 23×23, нажимается как 41×41. */
.search .clr::after{content:"";position:absolute;inset:-9px}
/* Название главы и ссылка на календарь в разделе «Эта неделя». */
#sheetModal .wkpar b a{display:inline-block;padding:5px 3px;margin:-5px -3px}
#sheetModal .hint a{display:inline-block;padding:7px 0}
/* Указатель: строки шли вплотную, невидимый слой залез бы на соседа —
   поэтому растёт сама строка. */
.idxgrp button{padding:8px 6px;min-height:34px}

/* ── so-mitz: строка о заповедях главы ──
   Заголовок блока начинается с «/* ── » нарочно: соседние правки
   заменяют свой кусок файла «от своей метки до следующей такой же»,
   и блок без такого заголовка они съедают вместе со своим. */
.mitz{line-height:1.35}
.mitz .mitz-src{display:block;font-size:.78em;opacity:.62;margin-top:.15em}

/* ── so-utro: утренний факт в настройках ── */
.kabme .utro-box{margin:.6rem 0 .2rem;padding:.6rem .7rem;border:1px solid var(--border);
  border-radius:10px;background:var(--plane)}
.kabme .utro-box label{display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;margin:.15rem 0}
.kabme .utro-box input[type="time"]{font:inherit;padding:.3rem .5rem;border-radius:8px;
  border:1px solid var(--border);background:var(--surface);color:var(--ink-1)}
.kabme .utro-box .hint{margin:.4rem 0 0;font-size:.85rem;line-height:1.45}

/* ── so-about: знакомство «что это» и «О приложении» ── */
/* нулевая карточка знакомства — текста больше, точек четыре */
#soOnb .ob-about p{min-height:0}
#soOnb .ob-about .ob-use{margin-top:.6em;color:var(--ink-3)}
#soOnb[dir="rtl"] .ob-slide{text-align:right}
/* «О приложении» в настройках */
.kabme .about-box{margin:.9rem 0 .2rem}
.kabme .about-box summary{cursor:pointer;font-weight:600;list-style:none;
  padding:.45rem 0;color:var(--ink-1)}
.kabme .about-box summary::-webkit-details-marker{display:none}
.kabme .about-box summary::after{content:" ▾";opacity:.5}
.kabme .about-box[open] summary::after{content:" ▴"}
.kabme .about-box p{margin:.35rem 0;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.kabme .about-box ul{margin:.4rem 0 0;padding-inline-start:1.1rem}
.kabme .about-box li{font-size:.88rem;line-height:1.5;color:var(--ink-2);margin:.28rem 0}

/* ── so-otmetki: ряд отметок в статье ── */
.mybar{display:flex;align-items:center;gap:6px;margin:0 0 12px}
.mybar .mysep{flex:1}
.mybtn{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;
  justify-content:center;border-radius:10px;border:1px solid var(--border);
  background:var(--plane);color:var(--ink-3);cursor:pointer;
  transition:color .16s, background .16s, transform .12s}
.mybtn svg{width:20px;height:20px}
.mybtn:active{transform:scale(.92)}
.mybtn.on{color:var(--brass);background:var(--brass-soft,var(--chip));
  border-color:color-mix(in srgb,var(--brass) 45%,transparent)}
.mybtn.on svg{fill:currentColor;stroke:currentColor}
.mybtn[data-my="like"].on{color:#c0392b;
  border-color:color-mix(in srgb,#c0392b 40%,transparent);
  background:color-mix(in srgb,#c0392b 9%,transparent)}

/* ── so-shagi: рука первых шагов и подписи к кнопкам ── */
#soHand{position:fixed;inset:0;z-index:70;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  animation:shIn .35s ease both}
#soHand.bye{opacity:0;transition:opacity .3s}
@keyframes shIn{from{opacity:0}to{opacity:1}}
#soHand .sh-in{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:18px 22px;border-radius:18px;
  background:color-mix(in srgb,var(--ink-1) 76%,transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#soHand .sh-p{position:relative;width:150px;height:74px}
#soHand .sh-h{position:absolute;top:8px;left:50%;margin-left:-24px;
  width:48px;height:58px;color:var(--paper,#faf7f0);opacity:.92;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
#soHand .sh-h svg{width:48px;height:58px}
#soHand .sh-t{max-width:230px;text-align:center;font-size:13.5px;line-height:1.4;
  color:var(--paper,#faf7f0)}
#soHand .drag .sh-h{animation:shDrag 1.7s ease-in-out infinite}
@keyframes shDrag{0%,100%{transform:translateX(-40px)}50%{transform:translateX(40px)}}
#soHand .pinch .sh-h.a{animation:shPinA 1.8s ease-in-out infinite}
#soHand .pinch .sh-h.b{animation:shPinB 1.8s ease-in-out infinite}
@keyframes shPinA{0%,100%{transform:translateX(-14px)}50%{transform:translateX(-44px)}}
@keyframes shPinB{0%,100%{transform:translateX(14px) scaleX(-1)}
                  50%{transform:translateX(44px) scaleX(-1)}}
/* ярлычок у кнопки: висит слева от неё, в правом письме — справа */
#zoomc button{position:relative}
#zoomc .zt{position:absolute;top:50%;inset-inline-end:100%;
  margin-inline-end:9px;transform:translateY(-50%);
  font-size:11.5px;font-style:normal;line-height:1;white-space:nowrap;
  padding:6px 9px;border-radius:999px;pointer-events:none;
  background:color-mix(in srgb,var(--ink-1) 82%,transparent);
  color:var(--paper,#faf7f0);box-shadow:0 3px 10px rgba(0,0,0,.18);
  animation:ztIn .4s var(--ease-out,ease) both}
#zoomc .zt.go{opacity:0;transform:translateY(-50%) translateX(6px);
  transition:opacity .3s, transform .3s}
@keyframes ztIn{from{opacity:0;transform:translateY(-50%) translateX(8px)}
                to{opacity:1;transform:translateY(-50%)}}
#zoomc .zt-mig{animation:ztMig 2.4s ease-in-out infinite}
@keyframes ztMig{0%,72%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brass) 55%,transparent)}
                 86%{box-shadow:0 0 0 7px color-mix(in srgb,var(--brass) 0%,transparent)}}
@media (prefers-reduced-motion: reduce){
  #soHand .sh-h,#zoomc .zt-mig{animation:none}
}

/* ── so-shapka: шапка статьи без лишнего ── */
#panel > header #pRead, #panel > header #pWatch, #panel > header #pPrev,
#panel > header #pNext, #panel > header #pEdit{display:none}
#pMarks{display:flex;align-items:center;min-width:0}
#pMarks .mybar{margin:0;gap:6px;flex-wrap:nowrap}
#pMarks .mybar .mysep{flex:0 0 4px}
#pMarks .mybtn{width:34px;height:34px}
#pMarks .mybtn svg{width:18px;height:18px}

/* ── so-polnyy-vid: подпись у края укорачивается многоточием ── */
.lbl{overflow:hidden;text-overflow:ellipsis}

/* ── so-utro-predlozhenie: карточка «утренний факт?» ── */
#utroOffer{position:fixed;left:14px;right:14px;z-index:96;
  bottom:calc(30px + env(safe-area-inset-bottom, 0px));
  background:var(--raised,var(--bg-1,#fff));border:1px solid var(--border);
  border-radius:14px;padding:14px 16px;
  box-shadow:0 14px 40px rgba(0,0,0,.28);
  opacity:0;transform:translateY(14px);
  transition:opacity .32s var(--ease-out),transform .32s var(--ease-out)}
#utroOffer.on{opacity:1;transform:none}
#utroOffer b{font-size:14px;letter-spacing:.01em}
#utroOffer p{margin:6px 0 11px;font-size:12.5px;line-height:1.5;
  color:var(--ink-2)}
#utroOffer .uo-b{display:flex;gap:8px}
#utroOffer .uo-b .btn{flex:1;justify-content:center}
@media (min-width: 700px){#utroOffer{left:auto;right:20px;width:340px}}

/* ── so-srez-shapka: полоса управления не уезжает при прокрутке ──
   Ручка и крестик стояли absolute внутри самой прокручиваемой
   карточки — и уезжали вверх вместе со списком. Теперь карточка —
   колонка: полоса неподвижна, прокручивается только тело. */
#slicePanel{flex-direction:column;overflow:hidden;padding:0}
/* Показ карточки задан как `#slicePanel.on{display:block}` — селектор
   с классом весомее, и без своей строки колонка бы не включилась. */
#slicePanel.on{display:flex}
#slicePanel .grab{position:relative;top:auto;left:auto;right:auto;
  flex:0 0 auto;height:32px;margin:0;padding-inline:12px 34px;
  display:flex;align-items:center;justify-content:flex-start;
  background:var(--raised);border-bottom:1px solid var(--border);
  border-radius:var(--r) var(--r) 0 0;cursor:grab;touch-action:none;z-index:2}
/* Название среза читаемым кеглем: девять пикселей выглядели полоской. */
#slicePanel .grab i{font-style:normal;font-size:11.5px;letter-spacing:.1em;
  color:var(--brass);font-weight:700;line-height:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#slicePanel button.x{position:absolute;top:4px;inset-inline-end:5px;
  float:none;margin:0;width:24px;height:24px;border-radius:6px;z-index:4}
#slicePanel .sbody{flex:1 1 auto;min-height:0;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:10px 13px calc(10px + env(safe-area-inset-bottom,0px))}
#slicePanel .pin{margin:0 0 9px;padding-inline-end:9px}
/* Год перестал быть ручкой: полоса сверху видна всегда, а тянуть за
   заголовок мешало листать тело. */
#slicePanel h4{cursor:default;touch-action:auto}
/* Где нет наведения — нет и подсказки про нажатие: она объясняла
   очевидное и занимала две строки на маленьком экране. */
@media (hover:none){#slicePanel .pin s{display:none}}

/* ── so-bez-mertsaniya: подписи проступают один раз ──
   Наплыв `lblIn` переигрывался при каждой пересборке сцены — все
   подписи разом. Оставляем его первому сбору ленты, дальше гасим. */
body.lbl-tiho .lbl{animation:none}
/* Метка линии жизни и подпись эпохи — из того же теста. */
body.lbl-tiho .lifelbl,body.lbl-tiho .ebtn{animation:none}

/* ── so-znachki-shapki ──────────────────────────────────────────────
   Значок «скопировать ссылку» стоит в разметке отдельным svg без
   размеров, и правил для него не было: он растягивался во всю
   кнопку — две таблички читались как две толстые рамки. Всем
   значкам в круглых кнопках — честные 18 пикселей. */
.btn.icon > svg{width:18px;height:18px;flex:0 0 auto}
#panel > header .btn.icon > svg{width:18px;height:18px}
/* Крестик закрытия статьи — это `::after`. Кнопка выложена флексом,
   но выравнивания по центру ей не задали: крестик прижимался к
   началу строки. И высота строки у кнопки нулевая — от этого он
   съезжал ещё и по вертикали. */
#panel > header #pClose{justify-content:center;align-items:center}
#panel > header #pClose::after{line-height:1;display:block}

/* ── so-srez-bez-rezhimov: крестик под палец ──
   Знак остаётся маленьким, а нажимается зона 44×44 — как советует
   Apple. Раньше промах на пару пикселей попадал в полосу
   перетаскивания, и срез не закрывался. */
#slicePanel button.x{touch-action:manipulation}
#slicePanel button.x::before{content:"";position:absolute;
  inset:-10px;border-radius:14px}

/* ── so-uchitelya-v-kartochke: у кого учился и кого учил ──
   Строка на человека: имя, два счёта лет и короткое пояснение. */
.uchit{margin:2px 0 16px}
.uchit .uch-h{margin:12px 0 5px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-3);font-weight:620}
.uchit .uch-list{display:flex;flex-direction:column;gap:3px}
.uchit .uch-row{display:block;width:100%;text-align:start;
  background:var(--chip);border:1px solid transparent;border-radius:9px;
  padding:6px 9px;font:inherit;color:var(--ink-1);cursor:pointer;
  transition:background .15s, border-color .15s}
.uchit .uch-row:hover{background:var(--chip-2);border-color:var(--border)}
.uchit .uch-row b{display:block;font-weight:600;font-size:13px;line-height:1.35}
.uchit .uch-row em{display:block;font-style:normal;font-size:11px;
  color:var(--ink-3);font-variant-numeric:tabular-nums;margin-top:1px}
.uchit .uch-row i{display:block;font-style:normal;font-size:11.5px;
  color:var(--ink-2);line-height:1.4;margin-top:3px}
.uchit .uch-more{font-size:11px;color:var(--ink-3);padding:2px 2px 0}

/* ==== КАБИНЕТ v1 — начало (pravka.py) ==== */
/* Было: всё содержимое кабинета — колонка 520px у левого края окна
   шириной 860px, справа пустое поле в треть экрана. */
@media (min-width: 760px){
  #smBody .kabme{ max-width:none;
    grid-template-columns: repeat(2, minmax(0,1fr));
    column-gap: 18px; align-items: start }
  #smBody .kabme > .kabav,
  #smBody .kabme > .kabbtns,
  #smBody .kabme > .hint,
  #smBody .kabme > .ded,
  #smBody .kabme > .utro-box,
  #smBody .kabme > .about-box{ grid-column: 1 / -1 }
  #smBody .kabme .kabbtns .btn{ flex: 0 1 220px }

  #smBody .keras{ max-width:none; display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 18px }
  #smBody .keras > *{ min-width: 0 }
}
@media (min-width: 1100px){
  #smBody .keras{ grid-template-columns: repeat(3, minmax(0,1fr)) }
}
/* ==== КАБИНЕТ v1 — конец ==== */





/* ==== ПОДАЧА v1 — начало (patch_podacha) ==== */
/* Срез: общий год второй строкой под еврейским. */
#slicePanel .who button{ align-items: flex-start }
#slicePanel .who .wy{ min-width:3.4rem; max-width:6.4rem; line-height:1.3 }
#slicePanel .who .wy u{ display:block; text-decoration:none; font-size:10px;
  opacity:.72; font-variant-numeric:tabular-nums; margin-top:1px }

/* Карточка человека: метка общего счёта чуть тише еврейской. */
.chips .tag.greg{ opacity:.85 }

/* «Еврейское и мировое»: две полки вместо одной фразы. */
.zn-par{ display:grid; gap:8px; margin:2px 0 0 }
.zn-side{ border-inline-start:2px solid var(--brass);
  padding-inline-start:10px; padding-block:2px }
.zn-side i{ display:block; font-style:normal; font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:3px }
.zn-side b{ display:block; font-size:14.5px; line-height:1.4; font-weight:600 }
.zn-big .zn-side b{ font-size:15.5px }
.zn-side s{ display:block; text-decoration:none; margin-top:4px;
  font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums }
.zn-mid{ display:block; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--brass); padding-inline-start:10px }
/* ==== ПОДАЧА v1 — конец ==== */

/* ==== ТИШЕ И РОВНЕЕ v1 — начало (patch_lenta_skroll) ==== */
/* Срез, «Рядом по времени в мире»: общий счёт бывает отрезком
   («ок. 1600 до н.э. — 1046 до н.э.») и в узкую колонку года не
   влезает; nowrap он наследовал от колонки и ложился ПОВЕРХ
   названия события. Теперь переносится внутри своей колонки. */
#slicePanel .who .wy u{white-space:normal;overflow-wrap:anywhere}
/* ==== ТИШЕ И РОВНЕЕ v1 — конец ==== */

/* ==== БЕЗ УКРАШЕНИЙ v1 — начало (patch_lenta_stabil) ==== */
/* Сияния больше не создаётся (feel.js); правило на случай, если слой
   остался в разметке от прошлой версии страницы. */
#aurora{display:none!important}
/* Бегущая искра по цепи передачи снята: тонкая линия с тенью-фильтром
   и бесконечной анимацией поверх ленты. Сама цепь остаётся. */
#ribbon .chain-spark{display:none!important;animation:none!important}
/* Карточка события стоит поверх ленты и размывает то, что под ней.
   Пока лента едет, это размытие пересчитывается каждый кадр по новому
   фону — самое дорогое, что бывает. У баннера недели такая защита уже
   стояла, у карточки её забыли. В покое вид прежний. */
body.moving #popup{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:var(--raised)}
/* ==== БЕЗ УКРАШЕНИЙ v1 — конец ==== */

/* ── so-cherta-deshevle: пока черта едет, без размытия ── */
/* Метка года у среза размывает то, что под ней. Красиво, пока стоит;
   пока едет — браузер на каждом кадре перечитывает и размывает полосу
   под меткой, и кадр выходит вдвое длиннее. На время движения
   размытие снимаем: подложка метки и без него почти непрозрачна. */
#slice.vedut .hd{-webkit-backdrop-filter:none!important;
  backdrop-filter:none!important}
/* ── конец so-cherta-deshevle ── */

/* ══ so-ne-duyutsya ══════════════════════════════════════════════
   Полосы жизни росли по наведению на четверть высоты. Ленту тянут
   той же мышью, и указатель во время протяжки проезжает по всем
   полосам подряд: каждая вспухала и опадала — лента шла волнами
   (Давид, 29 августа). Пока ленту ведут, наведение молчит; когда
   лента стоит, всё как было. */
body.moving .life:hover{transform:none}
body.moving .life.reign:hover,
body.moving .life.act:hover{opacity:inherit}
body.moving .lifelbl:hover{transform:none}
/* ══ конец so-ne-duyutsya ══ */

/* ── имена эпох на обзорной полосе: кнопки ── */
/* Имена эпох были нарисованными: pointer-events:none. Теперь это
   кнопки — по ним летят к эпохе. Полоса имён занимает верхние 12
   пикселей обзора, перетаскивают полосу ниже, так что жест не отнят. */
.mename{pointer-events:auto;cursor:pointer;border-radius:3px;
  touch-action:manipulation;
  transition:background .22s var(--ease)}
.mename span{transition:color .22s var(--ease)}
.mename:hover{background:color-mix(in srgb, var(--brass) 22%, transparent)}
.mename:hover span{color:var(--ink-1)}
.mename:active{background:color-mix(in srgb, var(--brass) 34%, transparent)}
/* Эпоха, в которой читатель сейчас: тихая подложка и латунное имя. */
.mename.tut{background:color-mix(in srgb, var(--brass) 14%, transparent)}
.mename.tut span{color:var(--brass);font-weight:700}

/* ── строка эпох: четырнадцать имён, всегда одни и те же ── */
/* Строка лежит НА ленте, а не под ней: своего поля у неё нет, есть
   только полупрозрачные имена поверх нижнего края сцены. И она не
   едет: лента под ней двигается и приближается, а имена стоят. */
#app{position:relative}
#eraBar{position:absolute;inset-inline:0;z-index:22;font-size:9px;
  bottom:calc(54px + env(safe-area-inset-bottom,0px));
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;
  gap:1px;padding:0 6px 4px;background:none;border:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  pointer-events:none}
#eraBar::-webkit-scrollbar{display:none}
/* Кегль ставит скрипт: он уменьшает его, пока четырнадцать имён не
   лягут в одну строку. Здесь только начальное значение — с него
   подбор и начинается. Где ширины не хватит и при шести пикселях,
   строка прокручивается вбок, но остаётся одной. */
#eraBar button{flex:0 0 auto;pointer-events:auto;
  font-family:inherit;font-weight:700;line-height:1;
  font-size:inherit;letter-spacing:.03em;
  text-transform:uppercase;white-space:nowrap;cursor:pointer;
  color:var(--brass);padding:3px 4px;border-radius:99px;border:0;
  background:color-mix(in srgb, var(--surface) 74%, transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:.78;
  transition:background .2s var(--ease), color .2s var(--ease), opacity .2s}
#eraBar button:hover{opacity:1;color:var(--ink-1);
  background:color-mix(in srgb, var(--brass) 55%, transparent)}
#eraBar button:active{background:color-mix(in srgb, var(--brass) 72%, transparent)}
/* Эпоха, в которой читатель сейчас. */
#eraBar button.tut{opacity:1;color:var(--surface);
  background:color-mix(in srgb, var(--brass) 92%, transparent)}
/* Условные обозначения поднимаются на высоту строки: иначе имена эпох
   легли бы прямо на них. */
#botbar{bottom:38px}
@media (max-width:700px){
  #eraBar{justify-content:flex-start;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,
      #000 calc(100% - 10px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 10px,
      #000 calc(100% - 10px),transparent 100%)}
  #eraBar button{padding:3px 4px}
}
@media (max-height:520px){ #eraBar{display:none} #botbar{bottom:16px} }

/* ── выключатель строки эпох ── */
/* Строку имён эпох выключают в «Слоях». Пока она выключена, условные
   обозначения возвращаются на своё прежнее место: отдавать её высоту
   некому. */
body.bez-epoh #eraBar{display:none}
body.bez-epoh #botbar{bottom:16px}

/* ── кнопки недели ── (patch_nedelya_knopki) */
/* Кнопка недели была синей: .btn.primary красится в --jew, цвет
   еврейской дорожки. На кнопке он выглядит чужим — здесь латунь
   сайта (--brass: переменной --gold в палитре ленты нет, с ней
   кнопка выходила прозрачной). И список памятных дней шёл в 520px
   при листе 640 — растягиваем на всю ширину. */
#smBody .wkbtn{background:var(--brass);border-color:var(--brass);
  color:#241703;
  box-shadow:0 2px 8px color-mix(in srgb, var(--brass) 30%, transparent)}
#smBody .wkbtn:hover{filter:brightness(1.06)}
#smBody .wklist{max-width:none}
#wkBan .wb-foot{display:grid;gap:8px}
/* ── конец: кнопки недели ── */
/* ==== ЧИТАЕМОСТЬ ТЕМ v1 — начало (patch_svetlaya_chitaemost) ==== */
/* Замер по WCAG на настоящем фоне ленты. Порог мелкого текста — 4,5.
   Тон у всех цветов прежний; менялась светлота, насыщенность чуть
   поднята, чтобы цвет не ушёл в бурый. */
:root[data-theme="light"], :root:not([data-theme="dark"]){
  --brass:#7b5727;              /* было #b08243 — 2,44 на ленте */
  --brass-soft:rgba(123,87,39,.14);
  --world:#a63a08;              /* было #ab4414 — 4,19 */
  --chain:#0f6a4c;              /* было #1b7f5e — 3,53 */
  --ink-3:#665d4f;              /* было #726858 — 3,90 */
}
:root[data-theme="dark"]{
  --brass:#c59048;              /* было #b08243 — 3,81 на тёмной ленте */
  --brass-soft:rgba(197,144,72,.15);
  --chain:#37b186;              /* было #3fa984 — 4,50, ровно на пороге */
}
/* ==== ЧИТАЕМОСТЬ ТЕМ v1 — конец ==== */



/* ── лента тише: одна черта, без пятна, «сейчас» читается ── */
/* Пятно света под указателем снято совсем: пустой слой во весь экран
   всё равно остаётся у композитора, даже когда он прозрачен. */
#stage::before{display:none!important}
/* «Сейчас» на обзорной полосе: выше рамки окна, со своей подложкой —
   иначе рамка ложится сверху и подпись читается как сломанная. */
.mnow{z-index:6}
.mnow b{bottom:2px;padding:1px 5px;border-radius:5px;
  background:var(--raised);border:1px solid var(--brass-soft);
  box-shadow:0 1px 4px rgba(0,0,0,.28);opacity:1;
  pointer-events:auto;cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease)}
.mnow b:hover{background:var(--brass);color:var(--surface)}
/* ── конец «лента тише» ── */

/* so-revizia: «+ Событие» пишет личные правки в память браузера — в
   приложении это непонятная форма для рецензента Apple, прячем. */
html.in-app #addBtn{display:none !important}

/* so-polya: нижняя карточка не прижимает кнопки к обрезу iPhone —
   под ними полоса Home, попасть было трудно. */
#pop-foot{padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
#slicePanel{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}

/* so-znak: имя проекта на иврите — знак вместо случайной звезды.
   Оно одно во всех изданиях: имя не переводится. */
.brand .brand-he{
  font-family:"Noto Sans Hebrew","Times New Roman",serif;
  font-size:15px;line-height:1;font-weight:600;letter-spacing:.01em;
  color:var(--brass);white-space:nowrap;flex:0 0 auto;
  padding-inline-end:2px}
@media (max-width:640px){ .brand .brand-he{font-size:13.5px} }

/* so-znak: посвящение — тихо, без рамки и без пафоса. */
.ded{margin:26px 0 6px;padding-top:16px;border-top:1px solid var(--border-2);
  text-align:center;color:var(--ink-3)}
.ded i{display:block;font-style:normal;font-size:12px;opacity:.75;
  margin-bottom:9px;letter-spacing:.02em}
.ded p{margin:0 0 5px;font-size:12.5px;line-height:1.6;max-width:34ch;
  margin-inline:auto}
.ded b{display:block;margin-top:11px;font-weight:500;font-size:12px;
  color:var(--brass);opacity:.9}

/* so-znaesh: карточки совпадений */
.zn{border:1px solid var(--border);border-radius:12px;padding:13px 15px;
  margin:0 0 10px;background:var(--plane)}
.zn-big{border-color:var(--brass);background:var(--surface)}
.zn-t{display:block;font-style:normal;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brass);margin-bottom:6px}
.zn-x{margin:0;font-size:14.5px;line-height:1.55}
.zn-big .zn-x{font-size:16px;line-height:1.6}
.zn-n{margin:7px 0 0;font-size:11.5px;line-height:1.45;color:var(--ink-3)}
.zn-b{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.zn-b .btn{font-size:12px;height:28px;padding:0 10px;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* so-rtl-center: у центрированного баннера обе логические стороны auto —
   иначе в правом письме остаётся right из мобильного правила, а при
   конфликте left и right в RTL побеждает right: баннер уезжал за экран. */
#wkBan.wb-center{left:50% !important;right:auto !important}

/* ==== СПОСОБ УЧЕНИЯ v1 — начало (patch_sposob_na_lente) ==== */
/* Сплошная — учились лично. Штрих — через учеников, школу или род:
   живого разговора не было, но линия идёт непрерывно. Точки — по
   книгам: человек назвал учителем того, кого читал. */
#ribbon .teach-cherez{ stroke-dasharray:5 3.5; opacity:.36 }
#ribbon .teach-knigi{ stroke-dasharray:1.2 3.2; opacity:.32 }
.uchit .uch-row u{ display:block; font-style:normal; text-decoration:none;
  font-size:11px; letter-spacing:.02em; color:var(--ink-3); margin-top:2px }
/* ==== СПОСОБ УЧЕНИЯ v1 — конец ==== */

/* ══ so-tsarstva ═════════════════════════════════════════════════
   После раскола при Рехаваме и Яроваме это два разных царства, и на
   ленте их полосы идут рядом. Насечку не трогаем — она значит
   «правление, а не жизнь», — меняем только цвет насечки.
   Иудея — латунь, как было. Северное царство — синь ленты.
   Объединённое царство — тёплое золото: те сорок лет, когда
   царство одно. (Давид, 30 августа.) */
.life.reign.mal-yehuda{background:repeating-linear-gradient(90deg,
  var(--brass) 0 7px, transparent 7px 10px)}
.life.reign.mal-israel{background:repeating-linear-gradient(90deg,
  var(--jew) 0 7px, transparent 7px 10px)}
.life.reign.mal-meuchedet{background:repeating-linear-gradient(90deg,
  #d8b25c 0 7px, transparent 7px 10px);opacity:.62}
/* ══ конец so-tsarstva ══ */

/* ══ so-imya-vnutri ══════════════════════════════════════════════
   Имя, написанное внутри полосы, лежит на цветном — ему нужна своя
   читаемость: тёмная тень по краю буквы и вес чуть больше. Место под
   него в дорожке не резервируется. */
.lifelbl.vnutri{padding:0 2px}
.lifelbl.vnutri b{color:#fff;font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.75), 0 0 3px rgba(0,0,0,.55)}
:root[data-theme="light"] .lifelbl.vnutri b{color:#1b1710;
  text-shadow:0 1px 2px rgba(255,255,255,.8)}
/* ══ конец so-imya-vnutri ══ */

/* patch_srez_mudretsy: переключатель «Мудрецы / Все» стоит в самой
   строке заголовка «Кто был жив» — там, где на него смотрят, а не
   отдельной полосой. Латунь — цвет выбранного. */
#slicePanel h6{display:flex;align-items:baseline;gap:6px}
#slicePanel h6 .ktoper{margin-inline-start:auto;display:flex;gap:4px;
  text-transform:none;letter-spacing:0;flex:0 0 auto}
#slicePanel h6 .ktoper button{font-size:10.5px;line-height:1.5;padding:2px 8px;
  border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--ink-3);white-space:nowrap;font-weight:560}
#slicePanel h6 .ktoper button:hover{border-color:var(--brass);color:var(--ink-1)}
#slicePanel h6 .ktoper button.on{border-color:var(--brass);color:var(--brass);
  background:color-mix(in srgb, var(--brass) 12%, transparent);font-weight:660}

/* ══ patch_zhenschiny_tsvet ══════════════════════════════════════
   Приглушённый розовый одного семейства с латунью: на светлой теме
   тёмный, на тёмной светлый — читается на обеих и нигде не кричит.
   Насечку правления не трогаем: она значит «полоса по годам
   правления», и это сведение важнее цвета — меняется только её тон. */
:root[data-theme="light"], :root:not([data-theme="dark"]){ --zhen:#a4576a }
:root[data-theme="dark"]{ --zhen:#e0a3b0 }
.life.zhen{background:linear-gradient(90deg,
  color-mix(in srgb, var(--zhen) 50%, transparent), var(--zhen))}
.life.reign.zhen{background:repeating-linear-gradient(90deg,
  var(--zhen) 0 7px, transparent 7px 10px)}
.lifelbl.zhen{color:var(--zhen)}
.barkey i.bk-zhen{border-radius:3px;background:linear-gradient(90deg,
  color-mix(in srgb, var(--zhen) 50%, transparent), var(--zhen))}
#slicePanel .who button.zhen .wt{color:var(--zhen)}
#slicePanel .who button.zhen .wt .off{color:var(--ink-3)}

/* ── so-perem-temy: недостающие имена цветов ── */
/* То же для ленты. Здесь --ink-1 уже объявлен в самой странице, а
   тонкая рамка называется --border, подложка — --surface. */
:root{
  --line: var(--border);
  --paper-2: var(--surface);
}
/* ── конец so-perem-temy ── */

/* ==== СВЕТЛАЯ v1 — начало (patch_glavnaya) ==== */
/* Полоса жизни начиналась с 55% прозрачности и на кремовой ленте
   почти пропадала: замер по снимку — 197,191,200 на 220,217,212,
   меньше 1,2:1. Тёмной темы это не касается: там фон тёмный и
   полосы видно. */
:root:not([data-theme="dark"]) .life{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--life) 80%, transparent), var(--life));
  box-shadow:0 1px 2px rgba(26,23,20,.30) }
:root:not([data-theme="dark"]) .life.ch{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--chain) 80%, transparent), var(--chain)) }
:root:not([data-theme="dark"]) .life.half.openL{
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--life) 45%, transparent) 38%, var(--life)) }
:root:not([data-theme="dark"]) .life.half.openR{
  background:linear-gradient(90deg, var(--life),
    color-mix(in srgb, var(--life) 45%, transparent) 62%, transparent) }
:root:not([data-theme="dark"]) .life.act{ opacity:.8 }
/* ==== СВЕТЛАЯ v1 — конец ==== */

/* ── so-srez-bez-kursora: год в срезе крупнее ── */
/* Год от Сотворения — главное, что говорит панель, а стоял он тем же
   кеглем, что и списки под ним. Общий год под ним — вторым по весу. */
#slicePanel h4{font-size:27px;line-height:1.05;margin:1px 0 3px;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
#slicePanel .sub{font-size:14.5px;line-height:1.25;margin-bottom:2px}
@media(max-width:700px){
  #slicePanel h4{font-size:22px}
  #slicePanel .sub{font-size:13px}
}
/* слово при числе лет — под числом, тише самого числа */
#slicePanel .who .wy u{display:block;text-decoration:none;font-size:10px;
  opacity:.66;margin-top:0;font-variant-numeric:normal}
/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── конец: год в срезе крупнее ── */

/* ── so-srez-prostor: срезу место, заголовок в строку ── */
/* Панель среза на телефоне была ростом меньше половины экрана —
   помещалось одно имя, и подпись «84 года» обрезалась снизу. */
@media (max-width:980px){
  #slicePanel{max-height:min(64vh,470px)}
}
/* «Кто был жив» ложилось в три слова столбиком: рядом стоят чипы
   «Мудрецы · N» и «Все · N» и отжимали заголовок в колонку. Теперь
   заголовок держит строку, а чипы при тесноте переносятся целиком. */
#slicePanel h6{flex-wrap:wrap;align-items:center;white-space:nowrap;
  row-gap:5px}
#slicePanel h6 .ktoper{white-space:normal;flex-wrap:wrap}
/* Возраст и слово «лет» — одной колонкой, без обрезания снизу. */
#slicePanel .who .wy{line-height:1.25}
#slicePanel .who .wy u{margin-top:0}

/* ── so-tsep-klik: цепь кликается и объяснена ── */
/* so-hvost-ne-rezat: блок НАЧИНАЕТСЯ строкой «/* ── … ── *\/», иначе его
   срежет любой шаг, который переписывает свой блок «до следующего ──».
   Так уже пропал этот самый блок в сборке 7 сентября. */
/* Бусина цепи принимает нажатие — сам слой #ribbon его
   не принимает (pointer-events:none), и это правильно: лента должна
   тянуться отовсюду. Разрешаем только звеньям, а цель под палец даём
   прозрачной обводкой — она не рисуется, но по ней попадают. */
#ribbon .chain-hit{fill:#000;fill-opacity:0;pointer-events:auto;cursor:pointer}
#ribbon .chain-hit:hover{fill:var(--chain);fill-opacity:.14}
#ribbon .chain-node,#ribbon .chain-num,#ribbon .chain-halo{pointer-events:none}

/* so-tsep-klyuch: ключ к знакам цепи в меню «Слои» */
.barkey.chkey i.ck{flex:0 0 auto;width:14px;height:14px;position:relative}
.barkey.chkey i.ck::before{content:"";position:absolute;left:50%;top:50%;
  width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:var(--chain)}
.barkey.chkey i.ck-seal::before{border-radius:1px;transform:rotate(45deg);
  background:var(--surface);border:2px solid var(--chain)}
.barkey.chkey i.ck-auth::before{width:6px;height:6px;margin:-3px 0 0 -3px;
  background:var(--surface);border:1.8px solid var(--chain)}
.barkey.chkey i.ck-here::after{content:"";position:absolute;left:50%;top:50%;
  width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  border:1.4px solid var(--chain);opacity:.5}
.barkey.chkey em{display:block;margin-top:3px;font-size:10.5px;
  font-style:normal;opacity:.72}

/* ── so-srez-epoha: шапка среза в рамке ── */
/* so-hvost-ne-rezat: блок начинается строкой «/* ── … ── *\/», иначе его
   срежет шаг, переписывающий свой блок «до следующего ──». */
/* Шапка среза — рамкой, с воздухом между строками
   (Давид, 7 сентября: «всё кучковато»). Сначала место в эпохе —
   мелко, латунью, в разрядку; под ним имя эпохи; потом год крупно и
   григорианская дата. Одно и то же означается одинаково: латунь и
   разрядка — как полосы эпох наверху ленты. */
#slicePanel .sgod{border:1px solid var(--rule);border-radius:12px;
  padding:9px 12px 10px;margin:2px 0 10px;background:var(--paper)}
#slicePanel .sgod .sepoha{margin:0 0 7px;padding:0 0 7px;
  border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
#slicePanel .sgod .sepoha i{display:block;font-style:normal;font-size:9.5px;
  line-height:1.3;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);font-weight:600;margin-bottom:2px}
#slicePanel .sgod .sepoha b{display:block;font-size:13.5px;line-height:1.3;
  font-weight:600;color:var(--ink-1)}
#slicePanel .sgod h4{margin:0 0 2px}
#slicePanel .sgod .sub{margin:0}
@media (max-width:520px){
  #slicePanel .sgod{padding:7px 10px 8px}
  #slicePanel .sgod .sepoha b{font-size:12.5px}}



/* ── so-dorozhka-narody: дорожка «кто владел землёй» ── */
/* so-hvost-ne-rezat: блок начинается строкой «/* ── … ── *\/». */
#ribbon .nar{pointer-events:auto;cursor:pointer;stroke:var(--surface);stroke-width:.8;opacity:.9}
#ribbon .nar:hover{opacity:1;filter:brightness(1.12)}
#ribbon .nar-israel{fill:var(--israel,#3f7d5c)}
#ribbon .nar-chuzhoy{fill:var(--chuzhoy,#8a6a4a)}
#ribbon .nar-do{fill:var(--dozem,#9b8f6b)}
#ribbon .nar-t{fill:#fff;font-size:9.5px;font-weight:600;pointer-events:none;
  paint-order:stroke;stroke:rgba(0,0,0,.35);stroke-width:2}
:root{--israel:#3f7d5c;--chuzhoy:#8a6a4a;--dozem:#9b8f6b}
html[data-theme="dark"]{--israel:#4f8f6c;--chuzhoy:#967653;--dozem:#a1946f}
.pop .dorzag{margin:.5rem .5rem .2rem;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass)}
#smBody .dorgod{font-size:15px;color:var(--ink-2);margin:0 0 2px}
#smBody .dortoch{font-size:12px;color:var(--ink-3);margin:0 0 10px}
#smBody .dorspor{margin:10px 0;padding:8px 10px;border-inline-start:3px solid var(--brass);
  background:var(--paper);border-radius:0 8px 8px 0;font-size:13.5px}
#smBody .dorspor b{display:block;margin-bottom:2px;color:var(--brass)}
#smBody .doropory{margin:12px 0 4px;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass)}
#smBody .dorsrc{margin:0;padding-inline-start:18px;font-size:13px;color:var(--ink-2)}
#smBody .dorsrc i{color:var(--ink-3);font-style:normal}
#smBody .dorgo{margin-top:12px;border:1px solid var(--rule);background:var(--surface);
  color:var(--ink);border-radius:9px;padding:6px 12px;font:inherit;font-size:13.5px;cursor:pointer}
#smBody .dorgo:hover{border-color:var(--brass)}



/* ── so-dorozhki: полосы под лентой ── */
/* so-hvost-ne-rezat: блок начинается строкой «/* ── … ── *\/». */
/* Цвета изгнаний отдельные от цветов власти: два ряда стоят друг под
   другом, и путать их нельзя. Земля бывала чужой, когда народ был на
   ней, и своей, когда большинство жило вне её. */
:root{--doma:#3f7d5c;--galut:#7b5570;--geula:#b08a3e}
html[data-theme="dark"]{--doma:#4f8f6c;--galut:#8f6683;--geula:#c39c4c}
#ribbon .nar-doma{fill:var(--doma)}
#ribbon .nar-galut{fill:var(--galut)}
#ribbon .nar-geula{fill:var(--geula)}
/* имя ряда: стоит над своей полосой, на подложке цвета фона, и не
   уезжает при протяжке (класс pinx) */
.chrail.dorlbl u{color:var(--ink-3);font-size:8.5px;letter-spacing:.14em;
  padding-inline:2px 8px}



/* ── so-dorozhki-shem: удел Шема ── */
:root{--shem:#6f8f6a}
html[data-theme="dark"]{--shem:#7ea078}
#ribbon .nar-shem{fill:var(--shem)}



/* ── so-prazdniki-nedeli: праздники в разделе «Эта неделя» ──
   Праздник, выпавший на субботу, — первое, что должен увидеть
   читатель: недельной главы в этот день нет вовсе. Поэтому у его
   плашки своя левая черта, а не общая с главой. */
.wkmoed{border-left:3px solid var(--gold,#b8892b);padding-left:.9rem}
.wkmoed .wkmoed-net{margin:.5rem 0 .2rem;font-weight:600}
.wkmoedl{display:flex;flex-direction:column;gap:.5rem;margin:.2rem 0 1rem}
.wkmoedl .mcard{border:1px solid var(--rule,rgba(0,0,0,.12));
  border-radius:.6rem;padding:.55rem .8rem}
.wkmoedl .mcard b{display:block;font-weight:600}
.wkmoedl .mcard p{margin:.15rem 0 0;font-size:.85rem;opacity:.75}

/* so-prazdniki-banner: чтение праздника — плотным перечнем, чтобы
   баннер не вырос вдвое; строка следующей главы отбита сверху. */
#wkBan .wb-moed{margin:0 0 10px}
#wkBan .wb-net{margin:6px 0 4px;font-weight:600;font-size:12.5px}
#wkBan .wb-cht{margin:0 0 3px;font-size:12px;color:var(--ink-2)}
#wkBan .wb-dalshe{margin-top:10px}



/* ── so-tsvet-epoh: у каждой эпохи свой оттенок ──
   Четырнадцать эпох различались чередованием одной латуни через одну:
   полосы «через одну» не говорят, где ты, а только рябят. Теперь у
   каждой свой цвет — очень слабый, это подсказка, а не заливка.
   Порядок тот же, что у ERAS в app-core.js: сместится там — сместится
   и здесь, поэтому имена стоят в комментариях. */
:root[data-theme="light"], :root:not([data-theme="dark"]){
  --era-0:rgba(63,86,150,.07);  /* Сотворение и Потоп — ночная синь */
  --era-1:rgba(176,130,67,.07);  /* Праотцы — песок */
  --era-2:rgba(150,110,62,.07);  /* Египет и рабство — глина */
  --era-3:rgba(47,125,143,.07);  /* Исход и пустыня — бирюза */
  --era-4:rgba(160,90,58,.07);  /* Судьи и первые цари — бронза */
  --era-5:rgba(192,154,74,.07);  /* Первый Храм — золото */
  --era-6:rgba(108,92,138,.07);  /* Вавилонское изгнание — лиловое */
  --era-7:rgba(138,154,74,.07);  /* Второй Храм — олива */
  --era-8:rgba(58,107,168,.07);  /* Мишна и Талмуд — синь */
  --era-9:rgba(55,128,110,.07);  /* Савораим и гаоним — зелень */
  --era-10:rgba(138,79,107,.07);  /* Ришоним и средневековье — слива */
  --era-11:rgba(176,96,58,.07);  /* После изгнания — ржавчина */
  --era-12:rgba(74,127,168,.07);  /* Хаскала и сионизм — сталь */
  --era-13:rgba(63,154,106,.07);  /* Израиль и наши дни — свежая зелень */
}
:root[data-theme="dark"]{
  --era-0:rgba(63,86,150,.13);  /* Сотворение и Потоп — ночная синь */
  --era-1:rgba(176,130,67,.13);  /* Праотцы — песок */
  --era-2:rgba(150,110,62,.13);  /* Египет и рабство — глина */
  --era-3:rgba(47,125,143,.13);  /* Исход и пустыня — бирюза */
  --era-4:rgba(160,90,58,.13);  /* Судьи и первые цари — бронза */
  --era-5:rgba(192,154,74,.13);  /* Первый Храм — золото */
  --era-6:rgba(108,92,138,.13);  /* Вавилонское изгнание — лиловое */
  --era-7:rgba(138,154,74,.13);  /* Второй Храм — олива */
  --era-8:rgba(58,107,168,.13);  /* Мишна и Талмуд — синь */
  --era-9:rgba(55,128,110,.13);  /* Савораим и гаоним — зелень */
  --era-10:rgba(138,79,107,.13);  /* Ришоним и средневековье — слива */
  --era-11:rgba(176,96,58,.13);  /* После изгнания — ржавчина */
  --era-12:rgba(74,127,168,.13);  /* Хаскала и сионизм — сталь */
  --era-13:rgba(63,154,106,.13);  /* Израиль и наши дни — свежая зелень */
}

/* ── so-ton: тёмные темы в ленте — те же токены, дорожки и латунь ── */
:root[data-theme="dark"][data-ton="shafran"]{
  --surface:#1c1c1c;--plane:#101010;
  --ribbon:#242424;--ribbon-edge:#3a3a3a;--ribbon-in:#1a1a1a;
  --ink-1:#F4F1EA;--ink-2:#9A968E;--ink-3:#77736B;
  --jew:#E3A72F;--world:#9A9A9A;--grid:#262626;--axis:#3a3a3a;
  --band-a:rgba(255,255,255,.02);--band-b:rgba(255,255,255,.045);
  --brass:#E3A72F;--brass-soft:rgba(227,167,47,.14);
  --israel:#7A7A7A;--chuzhoy:#5A5A5A;--dozem:#474747;
  --doma:#7A7A7A;--galut:#8A8A8A;--geula:#E3A72F;--shem:#6A6A6A;
}
:root[data-theme="dark"][data-ton="shafran"] #aurora{display:none}
:root[data-theme="dark"][data-ton="noch"]{
  --surface:#16203A;--plane:#0B1120;
  --ribbon:#1E2A48;--ribbon-edge:#3A4B7A;--ribbon-in:#182238;
  --ink-1:#ECE6D9;--ink-2:#A7AEC2;--ink-3:#7F879C;
  --jew:#6FB1E8;--world:#F08A5B;--grid:#1c2740;--axis:#2e3d63;
  --band-a:rgba(216,179,106,.05);--band-b:rgba(216,179,106,.10);
  --brass:#D8B36A;--brass-soft:rgba(216,179,106,.14);
  --israel:#3C9C78;--chuzhoy:#6E6A5A;--dozem:#55586A;
  --doma:#3C9C78;--galut:#8E63A0;--geula:#D8B36A;--shem:#6F8F7A;
}
/* ── so-lenta-legche: лента легче ──
   Крупица без смешивания: mix-blend-mode заставлял пересобирать всю
   сцену на каждый кадр движения — треть времени кадра. На 3,5–4,5
   сотых прозрачности normal от screen и multiply не отличить.
   Сияние и искра на время жеста стоят: в покое как было. */
#stage::after{mix-blend-mode:normal!important}
:root[data-theme="dark"] #stage::after{mix-blend-mode:normal!important;opacity:.05}
body.moving #aurora i{animation-play-state:paused}
body.moving #ribbon .chain-spark{animation-play-state:paused}

/* ── so-kak-polzovatsya: экскурсия «Как пользоваться» ── */
#help .sheet{width:min(640px,100%)!important}
.tour{display:flex;flex-direction:column;gap:14px}
.tour-nav{display:flex;gap:6px;flex-wrap:wrap}
.tour-nav .tn{width:28px;height:28px;border-radius:50%;border:1px solid var(--rule);
  background:none;color:var(--ink-3);font:600 11.5px/1 var(--font-ui);cursor:pointer}
.tour-nav .tn.on{background:var(--brass);border-color:var(--brass);color:var(--surface)}
.tour-nav .tn:hover{border-color:var(--brass);color:var(--ink-1)}
.tour-card h3{font-family:var(--font-read);font-size:21px;font-weight:600;margin:10px 0 6px}
.tour-card p{font-family:var(--font-read);font-size:15px;line-height:1.65;margin:0 0 14px;color:var(--ink-2)}
.tour-card kbd{font-family:var(--font-ui);font-size:11.5px;background:var(--chip);border-radius:5px;padding:1px 6px}
.tour-act{display:flex;flex-wrap:wrap;gap:8px}
.tour-pic{background:var(--plane);border-radius:var(--r);padding:10px 14px}
.tour-pic svg{display:block;width:100%;max-height:120px}
.tour-pic .rb{fill:var(--ribbon);stroke:var(--ribbon-edge);stroke-width:1}
.tour-pic .j{fill:var(--jew)} .tour-pic .w{fill:var(--world)}
.tour-pic .clu{fill:var(--jew)} .tour-pic .n{fill:#fff;font:600 8px var(--font-ui);text-anchor:middle}
.tour-pic .n2{fill:var(--ink-1);font:600 7px var(--font-ui);text-anchor:middle}
.tour-pic .d{fill:var(--brass)} .tour-pic .gh{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 2}
.tour-pic .dash{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3}
.tour-pic .t{fill:var(--ink-3);font:600 7.5px var(--font-ui);letter-spacing:.06em}
.tour-pic .ar{fill:none;stroke:var(--brass);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tour-pic .card{fill:var(--surface);stroke:var(--rule);stroke-width:1}
.tour-pic .ln{stroke:var(--ink-3);stroke-width:1.2;stroke-linecap:round;opacity:.7}
.tour-pic .lf{fill:var(--life);opacity:.75}
.tour-pic .ch{fill:none;stroke:var(--chain);stroke-width:2} .tour-pic .chd{fill:var(--chain)}
.tour-pic .d1{fill:#8a7a52} .tour-pic .d2{fill:#3f9a6a;opacity:.85} .tour-pic .d3{fill:#8a5f8a;opacity:.85}
.tour-pic .sl{stroke:var(--brass);stroke-width:1.6}
.tour-pic .st{fill:var(--brass)}
.tour-pic .key{fill:var(--surface);stroke:var(--rule);stroke-width:1}
.tour-pic .k{fill:var(--ink-1);font:600 9px var(--font-ui);text-anchor:middle}
.tour-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--rule-2);padding-top:12px;color:var(--ink-3);font-size:12.5px}
.tour-foot .btn[disabled]{opacity:.4;pointer-events:none}

/* ── люди мира: только в срезе ── */
/* Список людей мира в срезе — тише еврейского, и под именем роль. */
#slicePanel .who.world button{background:rgba(176,106,58,.07)}
#slicePanel .who.world .wy{color:var(--world)}
#slicePanel .who .wt .off{display:block;margin-top:2px;font-size:10.5px;
  line-height:1.35;font-style:normal;color:var(--ink-3);white-space:normal}

/* ── пунктир: одна линия вместо двух ── */
/* Пунктир — сам фон полосы, а не рамка поверх фона: так двух линий не
   получится ни при каком сочетании классов. Перечислены и `.ch`, и
   светлая тема — их правила стоят выше по файлу и иначе перебьют. */
.life.act,
.life.act.ch,
:root:not([data-theme="dark"]) .life.act,
:root:not([data-theme="dark"]) .life.act.ch{
  border:0;height:2px;margin-top:5px;border-radius:1px;opacity:.6;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--life) 72%, transparent) 0 1.5px,
    transparent 1.5px 5.5px)}
/* У человека из цепи передачи пунктир берёт цвет цепи — как и заливка
   у сплошных полос; иначе цепь на нём терялась. */
.life.act.ch,
:root:not([data-theme="dark"]) .life.act.ch{
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--chain) 78%, transparent) 0 1.5px,
    transparent 1.5px 5.5px)}
.life.act:hover{opacity:.88}
:root:not([data-theme="dark"]) .life.act{opacity:.7}

/* Образец в панели «Слои» рисуется тем же правилом, что и полоса. */
.barkey i.bk-act{height:2px;border:0;border-radius:1px;opacity:.6;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--life) 72%, transparent) 0 1.5px,
    transparent 1.5px 5.5px)}

/* Рельса академической хронологии — тот же почерк, только тише: это
   служебная линия, а не утверждение о человеке. */
.acrail{border-top:0;height:1px;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--ink-3) 40%, transparent) 0 1.5px,
    transparent 1.5px 6.5px)}
/* ── конец: пунктир одной линией ── */

/* ── звёзды за краями ленты ── */
/* Пустота до Сотворения и после 6000 — не чёрная дыра, а тихое небо.
   Два слоя звёзд мерцают с некратными периодами, поэтому рисунок не
   повторяется на глаз; двигается только прозрачность. Позиции заданы
   числами: у всех читателей одно и то же небо. */
.void{overflow:hidden}
.void::before,.void::after{content:"";position:absolute;inset:0;
  pointer-events:none;width:1.5px;height:1.5px;border-radius:50%;
  background:transparent}
.void::before{box-shadow:
    30px 8vh 0 0 rgba(214,204,186,0.85),
    90px 31vh 0 0 rgba(214,204,186,0.35),
    55px 52vh 0 0 rgba(214,204,186,0.60),
    140px 15vh 0 0 rgba(214,204,186,0.50),
    180px 44vh 0 0 rgba(214,204,186,0.90),
    110px 68vh 0 0 rgba(214,204,186,0.40),
    220px 24vh 0 0 rgba(214,204,186,0.55),
    75px 84vh 0 0 rgba(214,204,186,0.70),
    250px 60vh 0 0 rgba(214,204,186,0.35),
    160px 90vh 0 0 rgba(214,204,186,0.50),
    270px 9vh 0 0 rgba(214,204,186,0.65),
    35px 37vh 0 0 rgba(214,204,186,0.45),
    200px 76vh 0 0 rgba(214,204,186,0.60),
    255px 41vh 0 0 rgba(214,204,186,0.80),
    15px 63vh 0 0 rgba(214,204,186,0.50),
    120px 3vh 0 0 rgba(214,204,186,0.40),
    235px 87vh 0 0 rgba(214,204,186,0.45),
    60px 20vh 0 0 rgba(214,204,186,0.30),
    285px 70vh 0 0 rgba(214,204,186,0.55),
    95px 47vh 0 0 rgba(214,204,186,0.75);
  animation:zvezdy1 13s ease-in-out infinite}
.void::after{width:1px;height:1px;box-shadow:
    45px 12vh 0 0 rgba(214,204,186,0.50),
    130px 27vh 0 0 rgba(214,204,186,0.80),
    70px 40vh 0 0 rgba(214,204,186,0.35),
    170px 6vh 0 0 rgba(214,204,186,0.60),
    210px 35vh 0 0 rgba(214,204,186,0.45),
    100px 58vh 0 0 rgba(214,204,186,0.85),
    240px 18vh 0 0 rgba(214,204,186,0.40),
    25px 72vh 0 0 rgba(214,204,186,0.60),
    150px 80vh 0 0 rgba(214,204,186,0.50),
    265px 50vh 0 0 rgba(214,204,186,0.70),
    190px 93vh 0 0 rgba(214,204,186,0.35),
    85px 92vh 0 0 rgba(214,204,186,0.55),
    280px 30vh 0 0 rgba(214,204,186,0.50),
    50px 65vh 0 0 rgba(214,204,186,0.40),
    225px 66vh 0 0 rgba(214,204,186,0.65),
    10px 25vh 0 0 rgba(214,204,186,0.55);
  animation:zvezdy2 21s ease-in-out infinite}
/* За правым краем то же небо, отражённое. Опорная точка переносится к
   правой кромке, а отражение разворачивает тени внутрь блока: без
   этого звёзды легли бы от левого края и ушли за экран. */
.void.after::before,.void.after::after{left:auto;right:0;
  transform:scaleX(-1)}
@keyframes zvezdy1{
  0%,100%{opacity:.55} 37%{opacity:.95} 71%{opacity:.4}}
@keyframes zvezdy2{
  0%,100%{opacity:.8} 29%{opacity:.35} 63%{opacity:.9}}
/* Надпись остаётся над звёздами. */
.void span{position:relative;z-index:2}
@media (prefers-reduced-motion: reduce){
  .void::before,.void::after{animation:none}
}
/* ── конец: звёзды за краями ленты ── */