/* v27 (форк v18) — компьютер: слева «титры» — главы с таймкодом и крупное эхо текущей сцены,
   в центре — кадр-сторис 9:16, справа — одно действие. Стрелки — по бокам кадра. */
body { min-height: 100vh; }
.top { position: fixed; z-index: 7; left: 0; right: 0; top: 0; padding: 18px 28px; color: var(--page-ink); }
.top .lang, .top .pause { background: transparent; color: var(--page-ink); border-color: color-mix(in srgb, var(--page-ink) 25%, transparent); backdrop-filter: none; }
.layout { height: 100vh; display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr); align-items: center; gap: clamp(96px, 7vw, 128px);
  padding: 72px clamp(24px, 4vw, 64px) 28px; }
.reel { height: min(calc(100vh - 110px), 860px); aspect-ratio: 9 / 16; border-radius: 28px; overflow: visible;
  box-shadow: 0 30px 80px rgb(18 15 26 / 30%), 0 0 0 1px rgb(255 255 255 / 6%); }
.frame { border-radius: 28px; }
.sc { padding: 60px 26px 30px; }
.kt { font-size: clamp(30px, 4.2vh, 42px); }
.line-t { font-size: clamp(38px, 5.6vh, 56px); }
.edge { top: 50%; margin-top: -22px; }
.edge-prev { left: -64px; }
.edge-next { right: -64px; }
.edge { background: transparent; color: var(--page-ink); border-color: color-mix(in srgb, var(--page-ink) 30%, transparent); backdrop-filter: none; }
.edge:hover { background: color-mix(in srgb, var(--page-ink) 8%, transparent); }
.hint { bottom: 14px; }

.chap { align-self: center; justify-self: end; max-width: 340px; }
.chap-k { margin: 0 0 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.chap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.chap-list button { display: flex; gap: 14px; align-items: baseline; width: 100%; padding: 7px 10px; border: 0; border-radius: 10px;
  background: none; text-align: left; font-size: 15px; opacity: .55; transition: opacity .3s, background .3s; }
.chap-list button:hover { opacity: .85; }
.chap-list .cur button { opacity: 1; background: color-mix(in srgb, var(--page-ink) 7%, transparent); font-weight: 600; }
.tc { font: 500 12px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; opacity: .7; font-variant-numeric: tabular-nums; }
.chap-echo { margin: 28px 0 0; font: 600 clamp(34px, 3.6vw, 56px)/1.04 var(--display); letter-spacing: -.02em; color: var(--lilac-2);
  clip-path: inset(-0.14em -0.2em -0.24em -0.2em); }
.chap-echo.on { animation: rise .8s var(--ease) both; }

.side { align-self: center; justify-self: start; max-width: 300px; }
.side-k { margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.side-t { margin: 0 0 18px; font: 600 26px/1.15 var(--display); }
.side .btn-ok { background: var(--page-ink); color: var(--page); }
.side-f { margin: 22px 0 0; font-size: 13px; opacity: .7; }
.side-f a { color: inherit; }
body[data-scene="6"] .side .to-cta { visibility: hidden; }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr auto 1fr; gap: 96px; }
  .side { display: none; }
  .chap-echo { display: none; }
}
@media (max-width: 900px) {
  .chap { display: none; }
  .layout { grid-template-columns: 1fr; justify-items: center; }
}
.rm .chap-echo.on { animation: none; }