:root {
      --ivory: #f3ecdb;
      --ivory-2: #ece3cf;
      --ivory-3: #ddcfb2;
      --paper: #FBFAF6;
      --paper-edge: #E2DFD4;
      --paper-shadow: #d4d0c2;
      --ink: #1a1612;
      --ink-2: #1a1612;
      --ink-mute: #1a1612;
      --rule: rgba(26, 22, 18, 0.14);
      --rule-soft: rgba(26, 22, 18, 0.07);
      --note: #b65a2a;
      --note-deep: #8a3f17;
      --gold-text: #8a6d2f;
      --cover: #1a1612;
      --cover-gold: #c8a163;
      /* единый источник правды: семантические алиасы (раньше жили на fallback'ах/были не определены) */
      --gold: #c8a163;
      --terracotta: #b65a2a;
      --terra: #8a3f17;
      --accent: #a85020;
      --ink-3: #1a1612;
      --good: #5d7a3c;
    }
    /* премиум-рендер шрифта: сглаживание + OpenType (кернинг, лигатуры, старостильные цифры) */
    html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
    body, .content, .body, .lede, p { font-feature-settings: "kern" 1, "liga" 1, "onum" 1; }
    /* цены/статистика — табличные выровненные цифры */
    .bkStats, .t-price, .l-meta, .corner, .mono { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "kern" 1, "tnum" 1, "lnum" 1; }
    /* единое фирменное фокус-кольцо на всех интерактивных элементах */
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
    .tab:focus-visible, .cabinet-cta:focus-visible, .cta-pulse:focus-visible, .bk-btn:focus-visible,
    .list-row:focus-visible, .pgbtn:focus-visible, .pglink:focus-visible, [role="button"]:focus-visible {
      outline: 2px solid var(--note-deep); outline-offset: 2px; border-radius: 1px;
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent
    }

    /* объёмные предметы на столе */
    .desk-scene {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      /* overflow: hidden; */
    }

    /* световое пятно от настольной лампы */
    .lamp-pool {
      position: absolute;
      left: 50%;
      top: -20%;
      width: 160%;
      height: 110%;
      transform: translateX(-50%);
      background:
        radial-gradient(ellipse at 50% 38%, rgba(255, 215, 150, .22) 0%, rgba(255, 200, 130, .08) 25%, transparent 55%);
      pointer-events: none;
    }

    /* кожаный бювар под книгой */
    .desk-pad {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(94vw, 1640px);
      height: min(94vh, 1020px);
      transform: translate(-50%, -50%);
      background:
        radial-gradient(ellipse at 30% 30%, rgba(120, 80, 50, .12) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .35) 100%),
        linear-gradient(155deg, #241510 0%, #2e1a12 45%, #1a0e08 100%);
      border-radius: 4px;
      box-shadow:
        inset 0 0 0 2px rgba(20, 10, 5, .8),
        inset 0 0 40px rgba(0, 0, 0, .55),
        0 15px 40px rgba(0, 0, 0, .55);
    }

    /* кофейная чашка на блюдце — вид сверху */
    .prop-cup {
      position: absolute;
      top: 3vh;
      right: 3vw;
      width: 130px;
      height: 130px;
      filter:
        drop-shadow(0 14px 22px rgba(0, 0, 0, .55))
        drop-shadow(0 4px 6px rgba(0, 0, 0, .4));
    }

    /* перьевая ручка по диагонали */
    .prop-pen {
      position: absolute;
      bottom: 4vh;
      left: 3vw;
      width: 260px;
      height: 32px;
      transform: rotate(28deg);
      transform-origin: left center;
      filter:
        drop-shadow(0 10px 16px rgba(0, 0, 0, .5))
        drop-shadow(0 2px 4px rgba(0, 0, 0, .45));
    }

    /* стикер-заметка */
    .prop-note {
      position: absolute;
      top: 5vh;
      left: 8vw;
      width: 130px;
      height: 110px;
      transform: rotate(-7deg);
      background:
        linear-gradient(170deg, #f0d878 0%, #e8c860 60%, #d4b048 100%);
      box-shadow:
        0 12px 24px rgba(0, 0, 0, .5),
        0 3px 6px rgba(0, 0, 0, .35),
        inset 0 -3px 6px rgba(0, 0, 0, .08);
      font-family: 'Marck Script', cursive;
      color: #4a3010;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px;
      text-align: center;
      line-height: 1.15;
    }

    .prop-note::before {
      content: '';
      position: absolute;
      left: 50%;
      top: -2px;
      width: 60px;
      height: 22px;
      transform: translateX(-50%);
      background: rgba(200, 180, 90, .35);
      box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    }

    html { background: #3a2418; height: 100vh; }
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      background: #3a2418;
      color: var(--ink);
      font-family: 'Cormorant Garamond', Georgia, serif;
      /* overflow: hidden; */
    }

    ::selection {
      background: var(--ink);
      color: var(--ivory);
    }

    body {
      background:
        /* мягкий тёплый свет настольной лампы сверху */
        radial-gradient(ellipse 110% 70% at 50% -5%, rgba(255, 220, 160, .14) 0%, transparent 55%),
        /* виньетка по краям — углы темнее, как тени стола */
        radial-gradient(ellipse 130% 130% at 50% 50%, transparent 35%, rgba(0, 0, 0, .55) 100%),
        /* тонкие волокна — текстура шлифованного дерева */
        repeating-linear-gradient(91deg,
          rgba(255, 220, 180, .025) 0px,
          rgba(255, 220, 180, .04) 1px,
          rgba(20, 8, 2, .05) 2px,
          rgba(255, 220, 180, .015) 3px,
          rgba(20, 8, 2, .03) 5px,
          rgba(255, 220, 180, .025) 7px,
          rgba(20, 8, 2, .05) 11px,
          rgba(255, 220, 180, .015) 14px,
          rgba(20, 8, 2, .04) 19px),
        /* широкие полосы — годовые кольца дерева */
        repeating-linear-gradient(90deg,
          transparent 0px,
          transparent 90px,
          rgba(20, 10, 0, .08) 92px,
          transparent 96px,
          transparent 180px,
          rgba(20, 10, 0, .12) 183px,
          transparent 188px,
          transparent 310px,
          rgba(20, 10, 0, .07) 313px,
          transparent 316px),
        /* базовый цвет — тёплый орех */
        linear-gradient(180deg, #5a3825 0%, #4a2c1c 45%, #38200f 100%);
    }

    /* подложка-блокнот под книгой теперь как .desk-pad внутри .desk-scene */

    body::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 200;
      background-image: radial-gradient(rgba(0, 0, 0, .03) 1px, transparent 1.2px);
      background-size: 3px 3px;
      opacity: .4;
    }

    .mono {
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: .16em;
      font-size: 12px;
      text-transform: uppercase;
    }
    /* канонная капс-метка (раньше .meta была без стиля → дефолтная антиква) */
    .meta {
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: .18em;
      font-size: 11.5px;
      text-transform: uppercase;
      color: var(--ink-mute);
      line-height: 1.4;
    }

    .script {
      font-family: 'Marck Script', cursive;
    }

    .italic {
      font-style: italic;
    }

    /* ─── HEAD (книжная "шапка") ─── */
    .head { display: none !important; 
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 80;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 18px 36px;
      background: linear-gradient(to bottom, rgba(247, 243, 232, .92) 0%, rgba(247, 243, 232, .4) 70%, transparent 100%);
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .2em;
      color: var(--ink-mute);
      text-transform: uppercase;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .head a {
      color: var(--ink-2);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      padding-bottom: 2px;
      transition: border-color .2s, color .2s;
    }

    .head a:hover {
      color: var(--ink);
      border-color: var(--ink);
    }

    .head .title {
      justify-self: center;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 18px;
      letter-spacing: -.005em;
      text-transform: none;
      color: var(--ink);
    }

    .head .right {
      justify-self: end;
      display: flex;
      gap: 18px;
      align-items: center;
    }

    .head .toc-btn {
      background: none;
      border: 1px solid var(--rule);
      color: var(--ink);
      cursor: pointer;
      padding: 8px 14px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .2em;
      text-transform: uppercase;
      transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
      box-shadow: 2px 2px 5px rgba(60, 40, 20, .05);
    }

    .head .toc-btn:hover {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
      transform: translateY(-1px);
      box-shadow: 3px 4px 8px rgba(60, 40, 20, .12);
    }

    /* ─── FULL-VIEWPORT BOOK ─── */
            .book {
      position: fixed;
      top: 1vh;
      bottom: 1vh;
      left: 4vw;
      right: 4vw;
      width: 92vw;
      height: 92vh;
      perspective: 3000px;
      perspective-origin: 50% 50%;
      transform-style: preserve-3d;
      transform: scale(0.9);
    }

    /* ─── ZOOM CONTROL ─── */
    .zoom-ctrl {
      position: fixed;
      bottom: 16px;
      right: 16px;
      display: flex;
      align-items: stretch;
      background: rgba(251, 250, 246, .92);
      border: 1px solid var(--rule);
      border-radius: 2px;
      font-family: 'JetBrains Mono', monospace;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 100;
      box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
      user-select: none;
    }

    .zoom-ctrl button {
      background: transparent;
      border: none;
      color: var(--ink);
      padding: 8px 14px;
      cursor: pointer;
      font-size: 16px;
      font-family: inherit;
      line-height: 1;
      transition: background .15s;
    }

    .zoom-ctrl button:hover {
      background: var(--ivory);
    }

    .zoom-ctrl button:active {
      background: var(--ivory-2);
    }

    .zoom-ctrl button:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    .zoom-ctrl .zoom-val {
      padding: 0 14px;
      min-width: 52px;
      text-align: center;
      color: var(--ink-mute);
      font-size: 10px;
      letter-spacing: .12em;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid var(--rule-soft);
      border-right: 1px solid var(--rule-soft);
      cursor: pointer;
    }

    .zoom-ctrl .zoom-val:hover {
      background: var(--ivory);
      color: var(--ink);
    }

    /* base — flat spread that lives "underneath" the flipping leaves */
    .base {
      position: absolute;
      top: -6px;
      bottom: -6px;
      left: -22px;
      right: -22px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: var(--paper);
      box-shadow: inset 0 0 80px rgba(120, 90, 60, .06),
        0 0 0 6px #c4b094,
        0 20px 50px rgba(60, 30, 10, .25);
      border-radius: 2px;
    }

    .base::before {
      /* central spine shadow — the book opens here */
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 80px;
      transform: translateX(-50%);
      background: linear-gradient(to right,
          transparent 0%,
          rgba(80, 60, 30, .06) 15%,
          rgba(50, 30, 10, .35) 47%,
          rgba(30, 15, 5, .45) 50%,
          rgba(50, 30, 10, .35) 53%,
          rgba(80, 60, 30, .06) 85%,
          transparent 100%);
      pointer-events: none;
      z-index: 30;
    }

    .base::after {
      /* outer vignette around the spread */
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 250, 235, .5) 0%, transparent 50%),
        radial-gradient(80% 100% at 0% 50%, transparent 50%, rgba(120, 90, 60, .10) 100%),
        radial-gradient(80% 100% at 100% 50%, transparent 50%, rgba(120, 90, 60, .10) 100%);
    }

    /* "edge of pages" stack visible on left/right outer margins — makes it look like a real bound book */
    .base .edge-l,
    .base .edge-r {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 25;
      pointer-events: none;
      width: 28px;
      /* фиксированная ширина — увеличенная для объема */
      will-change: transform;
      /* подсказка для GPU */
    }

    .base .edge-l {
      left: 4px;
      transform-origin: left center;
      transform: scaleX(var(--edge-l-scale, 0.5));
      background:
        repeating-linear-gradient(to right,
          rgba(220, 213, 196, .0) 0px,
          rgba(220, 213, 196, .0) 2px,
          rgba(180, 168, 138, .35) 3px,
          rgba(220, 213, 196, .0) 4px,
          rgba(220, 213, 196, .0) 7px);
      box-shadow: inset -6px 0 16px rgba(90, 65, 40, .15);
    }

    .base .edge-r {
      right: 4px;
      transform-origin: right center;
      transform: scaleX(var(--edge-r-scale, 0.5));
      background:
        repeating-linear-gradient(to left,
          rgba(220, 213, 196, .0) 0px,
          rgba(220, 213, 196, .0) 2px,
          rgba(180, 168, 138, .35) 3px,
          rgba(220, 213, 196, .0) 4px,
          rgba(220, 213, 196, .0) 7px);
      box-shadow: inset 6px 0 16px rgba(90, 65, 40, .15);
    }

    /* ─── PAGE FLIP — физически достоверная анимация ───
     Поворот, подъём, тени и кривизна управляются CSS-переменной --p (прогресс 0..1),
     которую обновляет JS через requestAnimationFrame. Это даёт абсолютно плавное
     движение с углом и тенями, синхронными между собой кадр-в-кадр.
  */
    .page {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 50%;
      transform-style: preserve-3d;
      --p: 0;
      /* 0..1 — прогресс анимации, обновляется JS */
      --rot: 0deg;
      /* текущий угол поворота */
      --lift: 0px;
      /* подъём из плоскости */
    }

    .page.right {
      left: 50%;
      transform-origin: 0% 50%;
      transform: rotateY(var(--rot)) translateZ(var(--lift));
    }

    .page.right.flipped:not(.flipping) {
      --rot: -180deg;
      --lift: 0px;
      transform: rotateY(-180deg);
    }

    .page.left {
      left: 0;
      transform-origin: 100% 50%;
    }

    .face {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      background: var(--paper);
      /* overflow: hidden; */
      padding: 24px 5vw 32px;
      display: grid;
        grid-template-rows: auto 1fr auto;
      transform-style: preserve-3d;
    }

    .face.front {
      z-index: 2;
      transform: translateZ(0.1px);
      background: linear-gradient(to right, var(--paper) 0%, #f7f3e8 94%, #e2dac2 100%);
      box-shadow: inset 0 0 40px rgba(180, 160, 130, 0.06);
      border-radius: 0 3px 3px 0;
    }

    .face.back {
      transform: rotateY(180deg) translateZ(0.1px);
      padding: 24px 5vw 32px;
      z-index: 1;
      background: linear-gradient(to left, var(--paper) 0%, #f7f3e8 94%, #e2dac2 100%);
      box-shadow: inset 0 0 40px rgba(180, 160, 130, 0.06);
      border-radius: 3px 0 0 3px;
    }

    .page.flipped .face.front {
      z-index: 1;
    }

    .page.flipped .face.back {
      z-index: 2;
    }

    /* Постоянный мягкий желоб у корешка */
    .face.front::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 240px;
      background: linear-gradient(to right,
          rgba(60, 40, 20, var(--gutter-opacity, 0.45)) 0%,
          rgba(60, 40, 20, calc(var(--gutter-opacity, 0.45) * 0.55)) 12%,
          rgba(60, 40, 20, calc(var(--gutter-opacity, 0.45) * 0.15)) 50%,
          transparent 100%);
      pointer-events: none;
      z-index: 3;
    }

    .face.back::before {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 240px;
      background: linear-gradient(to left,
          rgba(60, 40, 20, var(--gutter-opacity, 0.45)) 0%,
          rgba(60, 40, 20, calc(var(--gutter-opacity, 0.45) * 0.55)) 12%,
          rgba(60, 40, 20, calc(var(--gutter-opacity, 0.45) * 0.15)) 50%,
          transparent 100%);
      pointer-events: none;
      z-index: 3;
    }

    /* Фикс для статической левой страницы (она использует face.front, но должна выглядеть как face.back) */
    .page.left .face.front {
      background: linear-gradient(to left, var(--paper) 0%, #f7f3e8 94%, #e2dac2 100%);
    }

    .page.left .face.front::before {
      left: auto;
      right: 0;
      background: linear-gradient(to left,
          rgba(60, 40, 20, var(--gutter-opacity, 0.45)) 0%,
          rgba(60, 40, 20, calc(var(--gutter-opacity, 0.45) * 0.55)) 12%,
          rgba(60, 40, 20, calc(var(--gutter-opacity, 0.45) * 0.15)) 50%,
          transparent 100%);
    }

    /* Динамические тени и кривизна — управляются переменными:
     --bend  : сила кривизны 0..1 (пик в середине)
     --curl  : темнота края от изгиба 0..1
     --side  : -1 для back, +1 для front (направление освещения)
     --falloff : тень-падение на разворот под ним
  */
    .face::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 4;
      background:
        /* основная тень-кривизна — освещение с одной стороны, тень с другой */
        linear-gradient(calc(95deg * var(--side, 1)),
          rgba(255, 255, 255, calc(var(--bend, 0) * 0.10)) 0%,
          rgba(255, 255, 255, calc(var(--bend, 0) * 0.04)) 30%,
          transparent 50%,
          rgba(20, 12, 4, calc(var(--bend, 0) * 0.22)) 80%,
          rgba(20, 12, 4, calc(var(--curl, 0) * 0.55)) 100%);
      mix-blend-mode: multiply;
      transition: none;
    }

    /* Тонкая «кромка» бумаги — видна когда лист повёрнут под углом, имитирует толщину */
    .page .edge-shine {
      position: absolute;
      top: 0;
      bottom: 0;
      right: -2px;
      width: 3px;
      background: linear-gradient(to right,
          rgba(220, 210, 180, .0),
          rgba(245, 238, 215, .85),
          rgba(180, 168, 138, .6),
          rgba(140, 120, 90, .4));
      box-shadow: 0 0 4px rgba(245, 238, 215, .3);
      z-index: 5;
      pointer-events: none;
      opacity: var(--edge, 0);
      transform: translateZ(.5px);
    }

    /* Тень самого летящего листа на саму книгу под собой.
     Управляется JS, привязано к прогрессу: высота тени тянется по пику кривой и растягивается.
  */
    .flip-cast {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 50vw;
      pointer-events: none;
      z-index: 28;
      opacity: var(--cast, 0);
      transform-origin: 0% 50%;
    }

    .flip-cast.right {
      left: 50%;
      background: radial-gradient(ellipse calc(60% * var(--cast-w, 1)) 90% at 0% 50%,
          rgba(20, 12, 4, calc(.46 * var(--cast, 0))) 0%,
          rgba(20, 12, 4, calc(.20 * var(--cast, 0))) 30%,
          transparent 70%);
    }

    .flip-cast.left {
      left: 0;
      background: radial-gradient(ellipse calc(60% * var(--cast-w, 1)) 90% at 100% 50%,
          rgba(20, 12, 4, calc(.46 * var(--cast, 0))) 0%,
          rgba(20, 12, 4, calc(.20 * var(--cast, 0))) 30%,
          transparent 70%);
    }

    /* drop-shadow на сам лист — растёт к пику и спадает */
    .page.right.flipping {
      will-change: transform;
    }
    
    .page.right.flipping .face {
      box-shadow: calc(var(--p, 0) * -20px) 10px calc(10px + var(--bend, 0) * 30px) rgba(20, 12, 4, calc(.2 * var(--bend, 0)));
      transition: none;
    }

    /* Шелковое ляссе (закладка) */
    .bookmark {
      position: absolute;
      bottom: -65px;
      left: 50%;
      width: 14px;
      height: 160px;
      background: linear-gradient(to bottom, #9b281f 0%, #a62a21 40%, #751d16 100%);
      box-shadow: 2px 5px 12px rgba(60, 20, 10, 0.4), inset 2px 0 3px rgba(255, 255, 255, 0.1);
      transform: translateX(-50%) rotate(-3deg);
      transform-origin: top center;
      z-index: 10;
      pointer-events: none;
      border-radius: 0 0 2px 2px;
    }

    .bookmark::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: repeating-linear-gradient(to right, transparent, transparent 1px, rgba(255, 255, 255, 0.2) 1px, rgba(255, 255, 255, 0.2) 2px);
    }

    .face .content,
    #mobile-display .content,
    #mobile-flipper .face .content {
      flex: 1;
      display: block;
      /* overflow: hidden; */
      position: relative;
      z-index: 1;
    }

    /* page chrome */
    .page-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .18em;
      color: var(--ink-mute);
      text-transform: uppercase;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--rule-soft);
      margin-bottom: 24px;
    }

    .page-foot {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .18em;
      color: var(--ink-mute);
      text-transform: uppercase;
      margin-top: auto;
      padding-top: 16px;
      border-top: 1px solid var(--rule-soft);
    }

    .page-foot .ch {
      font-family: 'Marck Script', cursive;
      font-style: normal;
      font-size: 18px;
      letter-spacing: 0;
      text-transform: none;
    }

    /* —— TYPOGRAPHY scaled up since pages are huge —— */
    h1.title,
    h2.title,
    h3.title,
    .c-title,
    .dcap::first-letter {
      color: rgba(26, 22, 18, 0.92);
    }

    h1.title {
      font-weight: 300;
      font-style: italic;
      font-size: clamp(60px, 8vmin, 140px);
      line-height: .88;
      margin: 0;
      letter-spacing: -.025em;
    }

    h2.title {
      font-weight: 300;
      font-style: italic;
      font-size: clamp(40px, 5vmin, 80px);
      line-height: .92;
      margin: 0;
      letter-spacing: -.02em;
    }

    h3.title {
      font-family: 'Marck Script', cursive;
      font-weight: 400;
      font-style: normal;
      font-size: clamp(34px, 3.4vmin, 52px);
      line-height: 1.05;
      margin: 0;
      letter-spacing: 0;
    }

    .sub-script {
      font-family: 'Marck Script', cursive;
      font-size: clamp(22px, 2.2vmin, 36px);
      color: var(--ink-2);
      margin-top: 10px;
    }

    .lede {
      font-size: clamp(16px, 0.6vw + 0.5rem, 19px);
      line-height: 1.6;
      color: var(--ink);
      font-style: normal;
      margin: 0 0 16px;
    }

    .body {
      font-size: clamp(16px, 0.6vw + 0.5rem, 19px);
      line-height: 1.6;
      color: var(--ink);
      margin: 0 0 16px;
    }

    .body strong {
      font-weight: 500;
      color: var(--ink);
    }

    .dcap::first-letter {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      font-size: clamp(70px, 7.5vmin, 120px);
      line-height: .78;
      float: left;
      margin: 6px 14px 0 -2px;
    }

    .pull {
      font-style: italic;
      font-weight: 300;
      font-size: clamp(20px, 1.8vmin, 28px);
      line-height: 1.18;
      padding-left: 24px;
      border-left: 2px solid var(--note);
      margin: 24px 0;
    }

    .accent {
      color: var(--note);
    }

    /* —— COVER face —— */
    .cover-face {
      background: var(--cover);
      color: var(--ivory);
      padding: 64px 6vw;
    }

    .cover-face::before {
      content: '';
      position: absolute;
      inset: 32px;
      border: 1px solid rgba(200, 161, 99, .22);
      pointer-events: none;
    }

    .cover-face::after {
      /* leather-like grain */
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .4;
      background:
        radial-gradient(rgba(200, 161, 99, .06) 1px, transparent 1.2px),
        radial-gradient(rgba(255, 255, 255, .02) 1px, transparent 1.2px);
      background-size: 5px 5px, 8px 8px;
    }

    .cover-face .corner {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .24em;
      color: rgba(200, 161, 99, .7);
      text-transform: uppercase;
    }

    .cover-face .c-title {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      font-size: clamp(80px, 12vmin, 180px);
      line-height: .85;
      letter-spacing: -.025em;
    }

    .cover-face .c-sub {
      font-style: italic;
      font-size: clamp(20px, 1.8vmin, 30px);
      color: #dcdee5;
      line-height: 1.4;
      margin-top: 30px;
      font-weight: 300;
      max-width: 24ch;
    }

    .cover-face .c-by {
      font-family: 'Marck Script', cursive;
      font-size: clamp(34px, 3.4vmin, 52px);
      color: #fff;
    }

    /* —— lists —— */
    .list-roman {
      display: flex;
      flex-direction: column;
    }

    .list-roman .li {
      display: grid;
      grid-template-columns: 48px 1fr 70px;
      column-gap: 18px;
      align-items: baseline;
      padding: 18px 0;
      border-top: 1px solid var(--rule-soft);
    }

    .list-roman .li:first-of-type {
      border-top: none;
    }

    .list-roman .n {
      font-style: italic;
      font-size: 22px;
      color: var(--ink-mute);
      font-weight: 300;
    }

    .list-roman .t {
      font-style: italic;
      font-size: 24px;
      line-height: 1.1;
    }

    .list-roman .pg {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .16em;
      color: var(--ink-mute);
      text-align: right;
    }

    /* big statements */
    .big-stmt {
      font-weight: 300;
      font-style: italic;
      font-size: clamp(28px, 3.4vmin, 52px);
      line-height: 1.05;
      letter-spacing: -.015em;
      margin: 0;
    }

    .big-stmt strong {
      font-weight: 400;
      color: var(--note);
    }

    .stmt-cap {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .22em;
      color: var(--ink-mute);
      text-transform: uppercase;
      margin-top: 10px;
      display: block;
      font-style: normal;
    }

    /* numbers */
    .big-num {
      text-align: center;
    }

    .big-num .l {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .22em;
      color: var(--ink-mute);
      text-transform: uppercase;
    }

    .big-num .v {
      font-weight: 300;
      font-style: italic;
      font-size: clamp(60px, 7.5vmin, 120px);
      line-height: .95;
      letter-spacing: -.03em;
      margin: 12px 0 8px;
    }

    .big-num .v.accent {
      color: var(--note);
    }

    .big-num .ctx {
      font-size: 14px;
      line-height: 1.55;
      color: var(--ink-2);
      font-style: italic;
      max-width: 32ch;
      margin: 0 auto;
    }

    /* pains */
    .pains .pn {
      display: grid;
      grid-template-columns: 40px 1fr;
      gap: 14px;
      align-items: baseline;
      padding: 16px 0;
      border-top: 1px solid var(--rule-soft);
    }

    .pains .pn:first-of-type {
      border-top: none;
    }

    .pains .pn .num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--note);
      letter-spacing: .18em;
    }

    .pains .pn .t {
      font-style: italic;
      font-size: 22px;
      line-height: 1.1;
    }

    .pains .pn .e {
      font-size: 14px;
      line-height: 1.5;
      color: var(--ink-2);
      margin-top: 5px;
    }

    /* roles */
    .roles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .roles .col {
      padding: 24px;
      background: #fff;
      border: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .roles .col.dark {
      background: var(--ink);
      color: var(--ivory);
      border-color: var(--ink);
    }

    .roles .col h4 {
      font-weight: 300;
      font-style: italic;
      font-size: 30px;
      margin: 0;
    }

    .roles .col .who {
      font-family: 'Marck Script', cursive;
      font-size: 22px;
      color: var(--ink-2);
    }

    .roles .col.dark .who {
      color: #c8c2b0;
    }

    .roles .col ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .roles .col li {
      font-size: 14px;
      line-height: 1.4;
      padding-left: 16px;
      position: relative;
    }

    .roles .col li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      width: 10px;
      height: 1px;
      background: var(--ink);
    }

    .roles .col.dark li::before {
      background: #c8c2b0;
    }

    /* sim mini */
    .sim-mini {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 18px;
    }

    .sim-row .lr {
      display: flex;
      justify-content: space-between;
      font-style: italic;
      font-size: 15px;
      align-items: baseline;
      margin-bottom: 4px;
    }

    .sim-row .lr .val {
      font-family: 'JetBrains Mono', monospace;
      font-style: normal;
      font-size: 11px;
      letter-spacing: .06em;
    }

    .sim-mini input[type=range] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 2px;
      background: var(--ivory-3);
      outline: none;
      cursor: pointer;
      border-radius: 99px;
      margin: 0;
    }

    .sim-mini input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--ink);
      cursor: pointer;
      border: 2px solid var(--paper);
      box-shadow: 0 2px 8px rgba(40, 40, 55, .25);
    }

    .sim-mini input[type=range]::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--ink);
      cursor: pointer;
      border: 2px solid var(--paper);
    }

    .sim-preset.active {
      background: var(--ink) !important;
      color: var(--ivory) !important;
      border-color: var(--ink) !important;
    }

    .sim-result {
      background: var(--ink);
      color: var(--ivory);
      padding: 24px 28px;
      margin-top: 24px;
    }

    .sim-result .ll {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: #c8c2b0;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    .sim-result .roi {
      font-style: italic;
      font-size: clamp(56px, 6vmin, 84px);
      line-height: .95;
      font-weight: 300;
      margin-top: 8px;
      letter-spacing: -.02em;
    }

    .sim-result .rub {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: #c8c2b0;
      letter-spacing: .1em;
    }

    /* table */
    .htable {
      width: 100%;
      border-collapse: collapse;
      margin-top: 24px;
      font-size: 14px;
    }

    .htable th,
    .htable td {
      text-align: left;
      padding: 12px 0;
      border-bottom: 1px solid var(--rule-soft);
    }

    .htable th {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .18em;
      color: var(--ink-mute);
      text-transform: uppercase;
      font-weight: 500;
      border-bottom-color: var(--ink);
    }

    .htable td.year {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 22px;
      color: var(--ink-mute);
    }

    .htable td.income {
      font-style: italic;
      font-size: 17px;
      color: var(--ink);
    }

    .htable tr.peak td.income {
      color: var(--note);
    }

    /* CTA */
    .cta-form {
      margin-top: 28px;
      border-bottom: 2px solid var(--ink);
      display: flex;
      max-width: 480px;
    }

    .cta-form input {
      flex: 1;
      background: transparent;
      border: none;
      padding: 16px 0;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 20px;
      outline: none;
      color: var(--ink);
    }

    .cta-form input::placeholder {
      color: var(--ink-mute);
    }

    .cta-form button {
      background: none;
      border: none;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      padding: 16px 0 16px 22px;
      cursor: pointer;
    }

    .check {
      margin-top: 14px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .16em;
      color: var(--note);
      opacity: 0;
      transition: opacity .3s;
      text-transform: uppercase;
    }

    .check.show {
      opacity: 1;
    }

    /* signature */
    .sig {
      font-family: 'Marck Script', cursive;
      font-size: clamp(34px, 3.4vmin, 52px);
      margin-top: 24px;
    }

    .sig-line {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .18em;
      color: var(--ink-mute);
      text-transform: uppercase;
      margin-top: 4px;
    }

    /* ─── FOOT controls ─── */
    .foot { display: none !important; 
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 80;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 10px 24px;
      background: linear-gradient(to top, rgba(247, 243, 232, .92) 0%, rgba(247, 243, 232, .4) 70%, transparent 100%);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .foot .where {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--ink-mute);
    }

    .foot .nav {
      justify-self: center;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .foot .progress {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--ink-mute);
    }

    .foot .bar {
      width: 120px;
      height: 2px;
      background: var(--rule);
      position: relative;
    }

    .foot .bar .fill {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: var(--ink);
      transition: width .8s ease;
    }

    .ctrl-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .5);
      border: 1px solid var(--rule);
      color: var(--ink);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 17px;
      transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 2px 2px 5px rgba(60, 40, 20, .05);
    }

    .ctrl-btn:hover:not(:disabled) {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
      transform: translateY(-1px);
      box-shadow: 3px 4px 8px rgba(60, 40, 20, .12);
    }

    .ctrl-btn:disabled {
      opacity: .25;
      cursor: not-allowed;
      box-shadow: none;
    }

    .ctrl-page {
      min-width: 120px;
      text-align: center;
      font-style: italic;
      font-family: 'Cormorant Garamond', serif;
      font-size: 13px;
      letter-spacing: 0;
      text-transform: none;
      color: var(--ink);
    }

    /* ─── Top-Left TOC Dropdown ─── */
    .top-toc { display: none !important; 
      position: relative;
      z-index: 200;
      position: fixed;
      top: 32px;
      left: 40px;
      z-index: 200;
    }

    .top-toc-btn {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--ink-mute);
      cursor: pointer;
      padding: 12px 16px;
      background: transparent;
      border: 1px solid transparent;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }

    .top-toc:hover .top-toc-btn {
      color: var(--ink);
      border-color: var(--rule-soft);
      background: var(--paper);
    }

    .top-toc-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      margin-top: -1px;
      background: var(--paper);
      border: 1px solid var(--rule-soft);
      width: 380px;
      max-height: 75vh;
      overflow-y: auto;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      padding: 12px 24px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-5px);
      transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .top-toc:hover .top-toc-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    /* ─── TOC overlay (kept for Auth modal) ─── */
    .toc-overlay {
  display: none !important;
      position: fixed;
      inset: 0;
      z-index: 120;
      background: rgba(30, 26, 22, .55);
      backdrop-filter: blur(12px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 40px;
    }

    .toc-overlay.show {
      display: flex;
    }

    .toc-panel {
      background: var(--paper);
      border: 1px solid var(--rule);
      width: min(720px, 95vw);
      max-height: 88vh;
      overflow-y: auto;
      padding: 56px 64px;
      position: relative;
      box-shadow: 0 40px 100px rgba(0, 0, 0, .4);
    }

    .toc-panel h3 {
      font-weight: 300;
      font-style: italic;
      font-size: 52px;
      line-height: .95;
      margin: 0 0 8px;
      letter-spacing: -.015em;
    }

    .toc-panel .sc {
      font-family: 'Marck Script', cursive;
      font-size: 28px;
      color: var(--ink-2);
      margin-bottom: 36px;
    }

    .toc-list {
      display: flex;
      flex-direction: column;
    }

    .toc-row {
      display: grid;
      grid-template-columns: 48px 1fr 70px;
      gap: 18px;
      padding: 18px 0;
      border-top: 1px solid var(--rule-soft);
      align-items: baseline;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      transition: color .2s, padding-left .2s;
    }

    .toc-row:hover {
      color: var(--note);
      padding-left: 8px;
    }

    .toc-row:hover .pg {
      color: var(--note);
    }

    .toc-row .rn {
      font-style: italic;
      font-size: 24px;
      color: var(--ink-mute);
      font-weight: 300;
    }

    .toc-row .rt {
      font-style: italic;
      font-size: 24px;
      line-height: 1.1;
    }

    .toc-row .rs {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .18em;
      color: var(--ink-mute);
      text-transform: uppercase;
      display: block;
      margin-top: 6px;
    }

    .toc-row .pg {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .16em;
      color: var(--ink-mute);
      text-align: right;
    }

    .toc-close {
      position: absolute;
      top: 20px;
      right: 20px;
      background: none;
      border: none;
      color: var(--ink-mute);
      font-size: 28px;
      cursor: pointer;
      font-family: 'Cormorant Garamond', serif;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .toc-close:hover {
      background: var(--rule-soft);
      color: var(--ink);
    }

    /* пульсирующая CTA-кнопка «начать обучение» — мягкая пульсация,
       привлекает внимание но не раздражает. Останавливается на hover. */
    .cta-pulse {
      position: relative;
    }

    .cta-pulse::after { display: none; }



    .cta-pulse:hover::after {
      animation-play-state: paused;
      opacity: 0;
    }

    @keyframes ctaPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    @keyframes ctaRing {
      0% { opacity: .65; transform: scale(1); }
      80% { opacity: 0; transform: scale(1.18); }
      100% { opacity: 0; transform: scale(1.18); }
    }

    @media (prefers-reduced-motion: reduce) {
      /* гасим только пульс-анимацию, саму кнопку НЕ прячем (иначе пропадает главный CTA) */
      .cta-pulse::after { display: none; }
      .cta-pulse { animation: none !important; }
    }

    /* desktop onboarding — большая подсказка-оверлей на первой загрузке.
       Показывает где кликать чтобы листать. Скрывается на первом клике. */
    .desk-hint {
      display: none !important;
      position: fixed;
      inset: 0;
      z-index: 200;
      pointer-events: auto;
      background: rgba(20, 14, 8, .42);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 1;
      transition: opacity .4s ease;
      cursor: pointer;
    }

    .desk-hint.hide {
      opacity: 0;
    }

    .desk-hint .center {
      text-align: center;
      max-width: 480px;
      padding: 32px 40px;
      background: rgba(20, 12, 6, .65);
      border: 1px solid rgba(240, 232, 216, .15);
      border-radius: 4px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    }

    .desk-hint .title {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: rgba(240, 232, 216, .65);
      margin-bottom: 14px;
    }

    .desk-hint .headline {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 32px;
      line-height: 1.2;
      color: #f5ede0;
      margin-bottom: 22px;
      font-style: italic;
    }

    .desk-hint .keys-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-bottom: 18px;
    }

    .desk-hint .key {
      font-family: 'JetBrains Mono', monospace;
      font-size: 14px;
      color: #f5ede0;
      padding: 8px 12px;
      min-width: 36px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(240, 232, 216, .35);
      border-radius: 4px;
      box-shadow: 0 2px 0 rgba(240, 232, 216, .12) inset;
    }

    .desk-hint .or {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(240, 232, 216, .5);
    }

    .desk-hint .alt {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(240, 232, 216, .55);
      margin-bottom: 22px;
    }

    .desk-hint .dismiss {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(240, 232, 216, .55);
      padding-top: 14px;
      border-top: 1px solid rgba(240, 232, 216, .15);
    }

    /* боковые подсказки-стрелки */
    .desk-hint .side {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1.5px dashed rgba(240, 232, 216, .45);
      border-radius: 50%;
      background: rgba(240, 232, 216, .08);
      animation: deskSidePulse 2.4s ease-in-out infinite;
    }

    .desk-hint .side.left {
      left: 6%;
      animation-delay: .2s;
    }

    .desk-hint .side.right {
      right: 6%;
      animation-delay: 1.2s;
    }

    .desk-hint .side .ar {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 40px;
      color: #f5ede0;
    }

    @keyframes deskSidePulse {
      0%, 100% { background: rgba(240, 232, 216, .06); border-color: rgba(240, 232, 216, .3); }
      50% { background: rgba(240, 232, 216, .14); border-color: rgba(240, 232, 216, .8); }
    }

    /* визуальные подсказки зон тап-навигации на десктопе (видны только при hover) */
    @media (min-width: 901px) {
      .book {
        cursor: default;
      }

      .nav-zone {
        position: fixed;
        top: 8vh;
        bottom: 8vh;
        width: 22vw;
        z-index: 10;
        pointer-events: none;
        opacity: 0;
        transition: opacity .25s ease;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .nav-zone.left {
        left: 1vw;
        cursor: w-resize;
      }

      .nav-zone.right {
        right: 1vw;
        cursor: e-resize;
      }

      .book:hover ~ .nav-zone,
      .nav-zone:hover {
        opacity: 1;
      }

      .nav-zone .nav-arrow {
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: 56px;
        color: var(--ink-mute);
        opacity: .35;
        transition: opacity .25s ease, transform .25s ease;
      }

      .nav-zone:hover .nav-arrow {
        opacity: .85;
        transform: scale(1.1);
      }
    }

    /* startup hint */
    .hint {
      position: fixed;
      left: 50%;
      bottom: 90px;
      transform: translateX(-50%);
      z-index: 75;
      font-family: 'Marck Script', cursive;
      font-size: 22px;
      color: var(--ink-mute);
      opacity: 0;
      transition: opacity 1s;
      pointer-events: none;
    }

    .hint.show {
      opacity: 1;
    }

    .wave-char {
      display: inline-block;
      transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s;
    }

    .wave-char:hover {
      transform: translateY(-4px) scale(1.1);
      color: var(--accent, #908060);
      cursor: default;
    }

    /* responsive — on small screens we still show spread but pages get tighter */
    @media (max-width: 1200px) {
      .book {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
      }
      .page, .base, .face {
        border-radius: 0 !important;
      }

      .base {
        top: -4px;
        bottom: -4px;
        left: -8px;
        right: -8px;
      }

      .face {
        padding: 24px 3vw 32px;
      }

      .face.back {
        padding: 24px 3vw 32px;
      }

      .face.front::before,
      .face.back::before {
        width: 40px;
      }

      .page-head,
      .page-foot {
        font-size: 9px;
      }

      .cover-face .c-title {
        font-size: 56px;
      }

      .cover-face .c-sub {
        font-size: 16px;
      }

      h1.title {
        font-size: 42px;
      }

      h2.title {
        font-size: 32px;
      }

      h3.title {
        font-size: 26px;
      }

      .lede,
      .body {
        font-size: 13px;
      }

      .big-num .v {
        font-size: 60px;
      }

      .foot .progress {
        display: none;
      }

      .head .right .pill-hide {
        display: none;
      }

      .toc-panel {
        padding: 32px 28px;
      }

      .toc-panel h3 {
        font-size: 32px;
      }

      /* ─── MOBILE: одна страница, без декораций стола ─── */

      /* убрать предметы со стола и контрол масштаба */
      .lamp-pool,
      .prop-cup,
      .prop-pen,
      .prop-note,
      .zoom-ctrl,
      .hint,
      .head,
      .foot {
        display: none !important;
      }

      /* столешница превращается в простой тёмный фон + бювар на весь экран */
      body {
        background: #2a1a12;
      }

      .desk-pad {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        box-shadow: inset 0 0 60px rgba(0, 0, 0, .55);
      }

      /* книга на мобильном работает как ОБЫЧНЫЙ сайт: 
         нет position:fixed, нет safe-area, нет visualViewport-магии.
         Просто блок min-height:100vh внутри нормального HTML-потока.
         Браузер сам корректно сдвинет его под свой URL-bar / status-bar
         так же как и любой нормальный сайт. */
      .book {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100vw !important;
        height: 100vh !important;
        height: var(--mob-real-h, 100dvh) !important;
        min-height: 100vh !important;
        min-height: var(--mob-real-h, 100dvh) !important;
        perspective: 1800px;
        zoom: 1 !important;
      }

      /* html/body — обычные, без 100%, без fixed, без overflow:hidden */
      html,
      body.is-mobile {
  touch-action: pan-y !important;
        height: 100% !important;
        min-height: 100vh !important;
        min-height: var(--mob-real-h, 100dvh) !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
      }

      /* база — одна колонка вместо разворота */
            .base {
        top: 64px !important; bottom: 60px !important; left: 0 !important; right: 0 !important;
        width: auto !important;
        height: 100% !important;
        margin: 0 !important;
        position: absolute !important;
        transform: none !important;
        grid-template-columns: 1fr;
        box-shadow: inset 0 0 40px rgba(120, 90, 60, .05);
        border-radius: 0;
      }

      /* центральный «корешок» и стопки страниц по краям не нужны */
      .base::before,
      .base::after,
      .base .edge-l,
      .base .edge-r,
      .bookmark {
        display: none !important;
      }

      /* левая страница скрыта на мобильном по умолчанию */
      .page.left {
        display: none !important;
      }

      /* правая страница — полный экран, ось вращения у левого края */
      .page.right {
        left: 0;
        width: 100%;
        transform-origin: 0% 50%;
      }

      /* На мобильном — собственный простой "page display" + flipper.
         Движок книги (.page.left, .page.right с их флипами) полностью
         отключён, чтобы не было конфликтов состояний. */

      #mobile-display {
        position: absolute;
        inset: 0;
        z-index: 50;
        display: none;
        background: var(--paper);
        box-sizing: border-box;
        overflow: hidden !important;
      }

      /* Внутренняя «страница» — фиксированная дизайн-ширина,
         высота подстраивается под экран. Flexbox делит высоту между
         header, scroll-area и footer автоматически. */
      body.is-mobile #mobile-display > .m-scaler {
        position: absolute;
        top: 0;
        left: 0;
        width: var(--mob-design-w, 380px);
        height: var(--mob-design-h, 720px);
        padding: 0 !important;
        box-sizing: border-box;
        transform-origin: 0 0;
        display: flex !important;
        flex-direction: column !important;
        will-change: transform;
        overflow: hidden !important;
      }

      /* Flexbox: mob-head-wrap и mob-foot-wrap — auto height,
         mobile-scroll-wrapper — flex:1, заполняет оставшееся место */
      body.is-mobile #mobile-display > .m-scaler > .mob-head-wrap,
      body.is-mobile #mobile-flipper .face > .m-scaler > .mob-head-wrap,
      body.is-mobile #mobile-display > .m-scaler > .mob-foot-wrap,
      body.is-mobile #mobile-flipper .face > .m-scaler > .mob-foot-wrap {
        flex: 0 0 auto !important;
        position: relative !important;
        overflow: hidden;
      }

      body.is-mobile #mobile-display > .m-scaler > .mobile-scroll-wrapper,
      body.is-mobile #mobile-flipper .face > .m-scaler > .mobile-scroll-wrapper {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        position: relative !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: none;
      }

      body.is-mobile #mobile-display > .m-scaler .mobile-scroll-content,
      body.is-mobile #mobile-flipper .face > .m-scaler .mobile-scroll-content {
        position: relative !important;
        padding: 0 32px !important;
        box-sizing: border-box !important;
        display: block !important;
      }

      body.is-mobile #mobile-display > .m-scaler::-webkit-scrollbar,
      body.is-mobile #mobile-flipper .face > .m-scaler::-webkit-scrollbar {
        width: 0px;
        background: transparent;
      }
      body.is-mobile #mobile-display > .m-scaler,
      body.is-mobile #mobile-flipper .face > .m-scaler {
        scrollbar-width: none; /* Firefox */
      }
      body.is-mobile #mobile-display {
        display: block;
      }

      body.is-mobile .page.left,
      body.is-mobile .page.right:not(#mobile-flipper) {
        display: none !important;
      }

      /* mobile flipper — отдельный лист поверх mobile-display для проигрывания
         оригинальной 3D-анимации перелистывания. */
      #mobile-flipper {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: 0% 50%;
        transform-style: preserve-3d;
        z-index: 1000;
        display: none;
        pointer-events: none;
      }

      #mobile-flipper.flipping {
        display: block;
      }

      #mobile-flipper .face {
        position: absolute;
        inset: 0;
        backface-visibility: hidden;
        background: var(--paper);
        box-sizing: border-box;
        overflow: hidden !important;
      }

      /* такой же scaler внутри flipper face */
      body.is-mobile #mobile-flipper .face > .m-scaler {
        position: absolute;
        top: 0;
        left: 0;
        width: var(--mob-design-w, 380px);
        height: var(--mob-design-h, 720px);
        padding: 0 !important;
        box-sizing: border-box;
        transform-origin: 0 0;
        display: flex !important;
        flex-direction: column !important;
        will-change: transform;
        overflow: hidden !important;
      }

      #mobile-flipper .face.back {
        transform: rotateY(180deg) translateZ(0.1px);
      }

      /* ─── MOBILE PERFORMANCE OPTIMIZATIONS ───
         На мобильном много декоративных эффектов не видно (их закрывает
         mobile-display), но браузер всё равно их рендерит, тратя GPU/память.
         Полностью отключаем то, что не используется в мобильном виде. */

      /* убрать тяжёлый фон-стол: на мобильном видна только сплошная подложка */
      body.is-mobile {
  touch-action: pan-y !important;
        background: var(--paper) !important;
      }

      body.is-mobile::before {
        display: none !important;
      }

      /* desk-scene с SVG-предметами и тенями — не нужен */
      body.is-mobile .desk-scene {
        display: none !important;
      }

      /* drop-shadow на оригинальных .page.right .face — самый дорогой эффект.
         Они скрыты но всё равно могут влиять на layer composition. */
      body.is-mobile .page.right .face {
        filter: none !important;
      }

      /* backdrop-filter blur — очень тяжёлый на мобильных GPU */
      body.is-mobile .head,
      body.is-mobile .foot,
      body.is-mobile .pill-hide,
      body.is-mobile .ctrl-btn {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      /* GPU-ускорение для flipper и mobile-display */
      #mobile-flipper,
      #mobile-flipper .face,
      #mobile-display { /* Removed 3D to prevent Safari scroll freeze */ }

      /* отключаем все expensive фильтры на оригинальных страницах в мобильном виде */
      body.is-mobile .page,
      body.is-mobile .page * {
        animation: none !important;
      }

      /* contain:layout paint — убрано: мешает flex-раскладке в Safari */

      /* флиперу — небольшая тень через box-shadow (дешевле drop-shadow) */
      #mobile-flipper.flipping {
        will-change: transform;
      }
      #mobile-flipper.flipping .face {
        box-shadow:
          0 calc(var(--p, 0) * 18px) calc(20px + var(--bend, 0) * 22px) rgba(20, 12, 4, calc(.25 * var(--bend, 0)));
      }

      /* убрать тёмный «желоб» у корешка — на одной странице он не нужен */
      .face.front::before,
      .face.back::before {
        display: none !important;
      }

      /* читабельные отступы и большие тапы */
      .face,
      .face.back {
        padding: 56px 22px 56px;
      }

      .page-head,
      .page-foot {
        font-size: 10px;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
      }

      /* Обёртки шапки и футера — непрозрачные, поверх скролла,
         чтобы контент при прокрутке не «просвечивал» */
      body.is-mobile .mob-head-wrap,
      body.is-mobile .mob-foot-wrap {
        position: relative;
        z-index: 2;
        background: var(--paper);
        flex: 0 0 auto;
      }

      /* Компактная шапка: меньше высота — меньше «съедает» контент сверху */
      body.is-mobile .mob-head-wrap .page-head {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        margin: 0 !important;
        padding: 14px 32px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(26, 22, 18, 0.35) !important;
        background: var(--paper) !important;
        box-sizing: border-box !important;
        width: 100% !important;
      }

      /* Симметричный футер */
      body.is-mobile .mob-foot-wrap .page-foot {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        margin: 0 !important;
        padding: 12px 32px 14px !important;
        border: 0 !important;
        border-top: 1px solid rgba(26, 22, 18, 0.35) !important;
        background: var(--paper) !important;
        box-sizing: border-box !important;
        width: 100% !important;
      }

      .lede,
      .body {
        font-size: 16px;
        line-height: 1.55;
      }

      /* подсказка о тапе при первой загрузке (поверх книги) */
      .mobile-hint {
        position: fixed;
        inset: 0;
        z-index: 250;
        pointer-events: auto;
        background: rgba(20, 14, 8, .55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        transition: opacity .35s ease;
        cursor: pointer;
      }

      .mobile-hint.hide {
        opacity: 0;
      }

      /* зоны-цели "тапни сюда" по бокам */
      .mobile-hint .zone {
        position: absolute;
        top: 25%;
        bottom: 25%;
        width: 38%;
        border: 1.5px dashed rgba(240, 232, 216, .55);
        border-radius: 20px;
        background: rgba(240, 232, 216, .06);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 14px;
        animation: hintZonePulse 2.4s ease-in-out infinite;
      }

      .mobile-hint .zone.left {
        left: 4%;
        animation-delay: .2s;
      }

      .mobile-hint .zone.right {
        right: 4%;
        animation-delay: 1.2s;
      }

      .mobile-hint .arrow {
        font-size: 28px;
        color: #f0e8d8;
        font-family: serif;
        line-height: 1;
      }

      .mobile-hint .zone-label {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: #f0e8d8;
        opacity: .85;
      }

      .mobile-hint .center-text {
        position: absolute;
        top: 8%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: #f0e8d8;
        line-height: 1.6;
        max-width: 80%;
      }

      .mobile-hint .center-text strong {
        display: block;
        font-size: 14px;
        letter-spacing: .2em;
        margin-bottom: 6px;
      }

      .mobile-hint .dismiss {
        position: absolute;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: rgba(240, 232, 216, .6);
      }

      @keyframes hintZonePulse {
        0%, 100% {
          background: rgba(240, 232, 216, .06);
          border-color: rgba(240, 232, 216, .35);
        }
        50% {
          background: rgba(240, 232, 216, .14);
          border-color: rgba(240, 232, 216, .85);
        }
      }

      /* CSS-анимация прихода новой страницы (имитация перелистывания) */
      @keyframes mPageInRight {
        from {
          transform: translateX(60%) rotateY(-22deg);
          box-shadow: -28px 8px 36px rgba(0, 0, 0, .35);
          opacity: .6;
        }

        to {
          transform: translateX(0) rotateY(0deg);
          box-shadow: 0 0 0 rgba(0, 0, 0, 0);
          opacity: 1;
        }
      }

      @keyframes mPageInLeft {
        from {
          transform: translateX(-60%) rotateY(22deg);
          box-shadow: 28px 8px 36px rgba(0, 0, 0, .35);
          opacity: .6;
        }

        to {
          transform: translateX(0) rotateY(0deg);
          box-shadow: 0 0 0 rgba(0, 0, 0, 0);
          opacity: 1;
        }
      }

      @keyframes mobileHintFade {

        0%,
        70% {
          opacity: 1;
        }

        100% {
          opacity: 0;
          visibility: hidden;
        }
      }
    }
  
      /* --- REVIEWS SPREAD --- */
      .reviews-wrapper {
        position: absolute;
        inset: 0;
        /* overflow: hidden; */
        display: flex;
        gap: 24px;
        padding: 40px 32px;
        mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
        -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
      }
      .review-track {
        flex: 1;
        display: flex;
      flex-direction: column;
        gap: 60px;
        animation: reviewScroll 40s linear infinite;
      }
      .review-track.t2 {
        animation-duration: 48s; /* Different speed for parallax/checkerboard effect */
      }
      @keyframes reviewScroll {
        from { transform: translateY(100%); }
        to { transform: translateY(-100%); }
      }
      .review-ink {
        opacity: 0;
        filter: blur(8px);
        transform: scale(0.98);
        animation: inkDraw 15s ease-in-out infinite;
        position: relative;
      }
      .review-ink::before {
        content: '“';
        position: absolute;
        left: -16px;
        top: -10px;
        font-family: 'Cormorant Garamond', serif;
        font-size: 40px;
        color: var(--accent, #a85020);
        opacity: 0.3;
      }
      .r-text {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(16px, 1.4vmin, 20px);
        line-height: 1.5;
        font-style: italic;
        color: var(--ink);
      }
      .r-author {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ink-2);
        margin-top: 12px;
        text-align: right;
      }
      
      .r-delay-1 { animation-delay: 0s; }
      .r-delay-2 { animation-delay: 3s; }
      .r-delay-3 { animation-delay: 6s; }
      .r-delay-4 { animation-delay: 9s; }
      .r-delay-5 { animation-delay: 12s; }
      .r-delay-6 { animation-delay: 1s; }
      .r-delay-7 { animation-delay: 4s; }
      .r-delay-8 { animation-delay: 7s; }

      @keyframes inkDraw {
        0%   { opacity: 0; filter: blur(12px); transform: scale(0.95); }
        10%  { opacity: 1; filter: blur(0px); transform: scale(1); }
        85%  { opacity: 1; filter: blur(0px); transform: scale(1); }
        100% { opacity: 0; filter: blur(8px); transform: scale(1.02); }
      }

  
    /* Global Progress & Sticky CTA */
    #global-progress-bar {
      position: fixed;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1000;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink);
      background: rgba(245,242,235,0.8);
      backdrop-filter: blur(4px);
      padding: 6px 12px;
      border-radius: 20px;
      pointer-events: none;
      transition: opacity 0.3s;
    }

    #global-sticky-cta {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 1000;
      transition: opacity 0.3s, transform 0.3s;
    }
    #global-sticky-cta button {
      padding: 14px 24px;
      background: var(--ink);
      color: var(--ivory);
      border: none;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      border-radius: 4px;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    #global-sticky-cta button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    }
    
    @media (max-width: 1200px) {
      #global-sticky-cta {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(5px);
        border-top: 1px solid var(--rule-soft);
        padding: 12px 16px;
      }
      #global-sticky-cta button {
        width: 100%;
        border-radius: 4px;
        box-shadow: none;
        padding: 16px 0;
      }
      #global-progress-bar {
        top: 12px;
      }
      body { padding-bottom: 70px; }
    }



    .auth-tab {
      flex: 1;
      background: none;
      border: none;
      cursor: pointer;
      padding: 12px 0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--ink-mute);
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      transition: color .2s, border-color .2s;
    }

    .auth-tab:hover {
      color: var(--ink);
    }

    .auth-tab.active {
      color: var(--ink);
      border-bottom-color: var(--note);
    }
  
      /* --- REVIEWS SPREAD --- */
      .reviews-wrapper {
        position: absolute;
        inset: 0;
        /* overflow: hidden; */
        display: flex;
        gap: 24px;
        padding: 40px 32px;
        mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
        -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
      }
      .review-track {
        flex: 1;
        display: flex;
      flex-direction: column;
        gap: 60px;
        animation: reviewScroll 40s linear infinite;
      }
      .review-track.t2 {
        animation-duration: 48s; /* Different speed for parallax/checkerboard effect */
      }
      @keyframes reviewScroll {
        from { transform: translateY(100%); }
        to { transform: translateY(-100%); }
      }
      .review-ink {
        opacity: 0;
        filter: blur(8px);
        transform: scale(0.98);
        animation: inkDraw 15s ease-in-out infinite;
        position: relative;
      }
      .review-ink::before {
        content: '“';
        position: absolute;
        left: -16px;
        top: -10px;
        font-family: 'Cormorant Garamond', serif;
        font-size: 40px;
        color: var(--accent, #a85020);
        opacity: 0.3;
      }
      .r-text {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(16px, 1.4vmin, 20px);
        line-height: 1.5;
        font-style: italic;
        color: var(--ink);
      }
      .r-author {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ink-2);
        margin-top: 12px;
        text-align: right;
      }
      
      .r-delay-1 { animation-delay: 0s; }
      .r-delay-2 { animation-delay: 3s; }
      .r-delay-3 { animation-delay: 6s; }
      .r-delay-4 { animation-delay: 9s; }
      .r-delay-5 { animation-delay: 12s; }
      .r-delay-6 { animation-delay: 1s; }
      .r-delay-7 { animation-delay: 4s; }
      .r-delay-8 { animation-delay: 7s; }

      @keyframes inkDraw {
        0%   { opacity: 0; filter: blur(12px); transform: scale(0.95); }
        10%  { opacity: 1; filter: blur(0px); transform: scale(1); }
        85%  { opacity: 1; filter: blur(0px); transform: scale(1); }
        100% { opacity: 0; filter: blur(8px); transform: scale(1.02); }
      }

  
    /* Global Progress & Sticky CTA */
    #global-progress-bar {
      position: fixed;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1000;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink);
      background: rgba(245,242,235,0.8);
      backdrop-filter: blur(4px);
      padding: 6px 12px;
      border-radius: 20px;
      pointer-events: none;
      transition: opacity 0.3s;
    }

    #global-sticky-cta {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 1000;
      transition: opacity 0.3s, transform 0.3s;
    }
    #global-sticky-cta button {
      padding: 14px 24px;
      background: var(--ink);
      color: var(--ivory);
      border: none;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      border-radius: 4px;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    #global-sticky-cta button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    }
    
    @media (max-width: 1200px) {
      #global-sticky-cta {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(5px);
        border-top: 1px solid var(--rule-soft);
        padding: 12px 16px;
      }
      #global-sticky-cta button {
        width: 100%;
        border-radius: 4px;
        box-shadow: none;
        padding: 16px 0;
      }
      #global-progress-bar {
        top: 12px;
      }
      body { padding-bottom: 70px; }
    }

/* --- PHYSICAL TABS (TOP) --- */
.physical-tab.top-tab {
  position: absolute;
  padding: 0 8px;
  height: 28px;
  top: 0px;
  border: 1px solid rgba(0,0,0,0.15);
  border-top: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
  background-color: inherit;
  display: flex;
  align-items: flex-end;
  padding-bottom: 6px;
  gap: 6px;
  cursor: pointer;
  z-index: 10;
  transition: padding-bottom 0.2s, filter 0.2s, z-index 0.2s;
  border-radius: 0 0 6px 6px;
  pointer-events: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.physical-tab.top-tab:hover {
  padding-bottom: 10px;
  filter: brightness(1.05);
  z-index: 999 !important;
}

.physical-tab.top-tab .rn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  opacity: 0.6;
}

.physical-tab.top-tab .t {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
}

/* Hide back-tab properly */
.physical-tab.back-tab {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.physical-tab.front-tab {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ONBOARDING BLOCKS */
#ob-checklist, #ob-investor { display: none !important; }
body[data-role="newbie"] #ob-checklist { display: block !important; }
body[data-role="investor"] #ob-investor { display: block !important; }

/* SPINE SHADOW */
.spine-shadow {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100px;
  margin-left: -50px;
  background: linear-gradient(to right, 
      rgba(0,0,0,0) 0%, 
      rgba(60,40,20,0.02) 25%, 
      rgba(60,40,20,0.08) 47%, 
      rgba(0,0,0,0.2) 50%, 
      rgba(60,40,20,0.08) 53%, 
      rgba(60,40,20,0.02) 75%, 
      rgba(0,0,0,0) 100%);
  z-index: 800; /* above pages, below top tabs (z-index: 999 on hover) */
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* EDGE STACK */
.edge-l {
  background: repeating-linear-gradient(
    to right,
    #e8dfd3 0px,
    #f2ebd9 1px,
    rgba(60,40,20,0.08) 1.5px,
    #e8dfd3 2px
  ) !important;
}
.edge-r {
  background: repeating-linear-gradient(
    to left,
    #e8dfd3 0px,
    #f2ebd9 1px,
    rgba(60,40,20,0.08) 1.5px,
    #e8dfd3 2px
  ) !important;
}

/* DROP CAP (Буквица) */
.dcap {
  float: left;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 84px;
  line-height: 0.8;
  margin-right: 8px;
  margin-top: 4px;
  color: var(--terracotta);
  font-style: italic;
}

/* FLEURON */
.fleuron {
  text-align: center;
  font-size: 24px;
  color: var(--terracotta);
  margin: 32px 0;
  font-family: 'Cormorant Garamond', serif;
}
.fleuron::after {
  content: '❦';
}


/* MOBILE TABBAR */
.mobile-tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: var(--ivory);
  border-top: 1px solid var(--rule);
  z-index: 9000;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom); /* iOS safe area */
  box-shadow: 0 -4px 12px rgba(60,40,20,0.05);
}

.tab-item {
  background: transparent;
  border: none;
  display: flex;
      flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--ink-mute);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  width: 20%;
  height: 100%;
}
.tab-item.active {
  color: var(--terracotta);
}
.tab-icon {
  font-size: 20px;
  filter: grayscale(100%);
  opacity: 0.7;
}
.tab-item.active .tab-icon {
  filter: none;
  opacity: 1;
}

@media (max-width: 800px) {
  .mobile-tabbar { display: none !important; }
  /* Ensure page content is not hidden behind the tab bar */
  .book-display { padding-bottom: 0 !important; }
}

/* List rows for Table of Contents */
.list-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--rule-soft);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.list-row:first-of-type { border-top: none; padding-top: 0; }
.list-row:hover .l-title { color: var(--note); }
.list-row .l-num { font-style: italic; font-size: 18px; color: var(--ink-mute); font-weight: 300; }
.list-row .l-title { font-style: italic; font-size: 20px; line-height: 1.1; letter-spacing: -.005em; transition: color .25s; }
.list-row .l-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--ink-mute); text-transform: uppercase; text-align: right; }

@media (max-width: 1200px) { #desk { display: none !important; } .book-display { background: var(--ivory); } }
body.is-mobile #mobile-display * {
  pointer-events: auto !important;
}

body.is-mobile .m-scaler {
  padding: 0 !important;
}

body.is-mobile .mobile-scroll-wrapper {
  position: relative;
  z-index: 1;
  overflow: hidden auto !important;
  overscroll-behavior: contain;
}

body.is-mobile {
  padding-top:    env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

body.is-mobile .book {
  transform: none !important;
}
body.is-mobile .base {
  top: 0 !important;
  bottom: 0 !important;
}
body.is-mobile .mobile-scroll-content {
  min-height: 100% !important;
}
body.is-mobile .content {
  margin-block: auto !important;
}

/* page-head и page-foot внутри mob-head-wrap/mob-foot-wrap —
   уже управляются flex-контейнером, дополнительных правил не нужно */


/* ============================================================
   ВИДИМЫЕ ГРАНИЦЫ HEAD/FOOT НА МОБИЛКЕ И ФИКСЫ БАГОВ
   ============================================================ */
@media (max-width: 900px) {
  .page-head {
    border-bottom: 1px solid rgba(26, 22, 18, 0.35) !important;
    background: var(--paper, #FBFAF6) !important;
    padding: 14px 32px 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
  }
  .page-foot {
    border-top: 1px solid rgba(26, 22, 18, 0.35) !important;
    background: var(--paper, #FBFAF6) !important;
    padding: 12px 32px 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
  }
}

/* Фиксы багов Safari iOS: контент скролла просвечивал/налезал на шапку и футер */
body.is-mobile .mob-head-wrap,
body.is-mobile .mob-foot-wrap {
  position: relative !important;
  z-index: 100 !important;
  background: var(--paper, #FBFAF6) !important;
  transform: translateZ(0) !important;
}

/* Исключаем перекрытие/вылезание текста: строго обрезаем скролл с помощью clip-path */
body.is-mobile .mobile-scroll-wrapper {
  position: relative !important;
  z-index: 1 !important;
  clip-path: inset(0 0 0 0) !important;
  -webkit-clip-path: inset(0 0 0 0) !important;
  transform: translateZ(0) !important;
}

/* Красивые внутренние отступы скролла вместо нуля */
body.is-mobile .mobile-scroll-content {
  padding: 12px 32px !important;
  box-sizing: border-box !important;
}

/* Убираем лишний воздух сверху (остаток u_spacer) с учетом .grain */
body.is-mobile .mobile-scroll-content > div[style*="height"]:first-child,
body.is-mobile .mobile-scroll-content > div[style*="height"]:nth-child(2),
body.is-mobile .mobile-scroll-content > .grain + div[style*="height"] {
  display: none !important;
}


/* GPU Acceleration for flipping */
.flipping {
  will-change: transform, z-index;
}
.flipping .face {
  will-change: transform;
}