diff --git a/frontend/assets/ai_inga.jpg b/frontend/assets/ai_inga.jpg
new file mode 100644
index 0000000..ba755ae
Binary files /dev/null and b/frontend/assets/ai_inga.jpg differ
diff --git a/frontend/assets/ai_lev.jpg b/frontend/assets/ai_lev.jpg
new file mode 100644
index 0000000..a63935e
Binary files /dev/null and b/frontend/assets/ai_lev.jpg differ
diff --git a/frontend/assets/story1.jpg b/frontend/assets/story1.jpg
new file mode 100644
index 0000000..83b31c3
Binary files /dev/null and b/frontend/assets/story1.jpg differ
diff --git a/frontend/assets/story2.jpg b/frontend/assets/story2.jpg
new file mode 100644
index 0000000..276297f
Binary files /dev/null and b/frontend/assets/story2.jpg differ
diff --git a/frontend/assets/story3.jpg b/frontend/assets/story3.jpg
new file mode 100644
index 0000000..d54ea02
Binary files /dev/null and b/frontend/assets/story3.jpg differ
diff --git a/frontend/assets/story4.jpg b/frontend/assets/story4.jpg
new file mode 100644
index 0000000..2b602de
Binary files /dev/null and b/frontend/assets/story4.jpg differ
diff --git a/frontend/assets/video1.jpg b/frontend/assets/video1.jpg
new file mode 100644
index 0000000..cb69c85
Binary files /dev/null and b/frontend/assets/video1.jpg differ
diff --git a/frontend/src/features/PreviewApp.html b/frontend/src/features/PreviewApp.html
index ef07098..3547d92 100644
--- a/frontend/src/features/PreviewApp.html
+++ b/frontend/src/features/PreviewApp.html
@@ -6,1191 +6,1007 @@
   <title>между. — CHAPTER / Литературный журнал о близости 18+</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
     :root {
       --bg-paper: #F5F0E8;
       --bg-surface: #FFFDFA;
-      --bg-subtle: #EAE2D6;
       --text-ink: #24211D;
       --text-meta: #686158;
       --border-hairline: #D8CFC3;
-      --border-warm: #D6B39B;
       --accent-wine: #793C49;
-      --accent-wine-hover: #612E39;
-      --accent-wine-soft: #F3E8EA;
-      --video-dark: #211A18;
-      --video-surface: #29241F;
+      --accent-wine-hover: #632F3B;
       --reading-size: 20px;
       --reading-lh: 32px;
     }
-    body.theme-noir {
-      --bg-paper: #10121A;
-      --bg-surface: #1C2030;
-      --bg-subtle: #252B3D;
-      --text-ink: #F6F7F2;
-      --text-meta: #B9C0D0;
-      --border-hairline: #2E364B;
-      --border-warm: #3E4760;
-      --accent-wine: #C9F26F;
-      --accent-wine-hover: #B5E055;
-      --accent-wine-soft: rgba(201, 242, 111, 0.12);
-    }
     body {
       background-color: var(--bg-paper);
       color: var(--text-ink);
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-      font-size: 16px;
+      font-size: 15px;
       line-height: 1.55;
-      transition: background-color 0.25s ease, color 0.25s ease;
       margin: 0;
+      padding: 0;
+      -webkit-font-smoothing: antialiased;
     }
-    .font-serif-editorial {
+    .font-serif-ed {
       font-family: 'Cormorant Garamond', Georgia, serif;
     }
-    .reading-prose p {
-      font-family: 'Cormorant Garamond', Georgia, serif;
-      font-size: var(--reading-size);
-      line-height: var(--reading-lh);
-      color: var(--text-ink);
-      margin-bottom: 1.45em;
-    }
-    .hairline-border {
+    .hairline {
       border-color: var(--border-hairline);
     }
-    .surface-card {
+    .surface-box {
       background-color: var(--bg-surface);
       border: 1px solid var(--border-hairline);
       border-radius: 6px;
     }
-    .subtle-box {
-      background-color: var(--bg-subtle);
-      border: 1px solid var(--border-hairline);
-      border-radius: 6px;
-    }
     .btn-wine {
       background-color: var(--accent-wine);
       color: #FFFDFA;
-      border-radius: 6px;
+      border-radius: 4px;
+      font-size: 13px;
       font-weight: 500;
-      transition: all 0.18s ease;
-    }
-    body.theme-noir .btn-wine {
-      color: #10121A;
-      font-weight: 600;
+      transition: background-color 0.15s ease;
     }
     .btn-wine:hover {
       background-color: var(--accent-wine-hover);
     }
-    .btn-outline-editorial {
+    .btn-paper-outline {
       background-color: var(--bg-surface);
       color: var(--text-ink);
       border: 1px solid var(--border-hairline);
-      border-radius: 6px;
-      transition: all 0.18s ease;
-    }
-    .btn-outline-editorial:hover {
-      border-color: var(--accent-wine);
-    }
-    .nav-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 7px 10px;
-      border-radius: 5px;
-      font-size: 14px;
-      color: var(--text-meta);
-      cursor: pointer;
-      transition: all 0.15s ease;
-      text-align: left;
-      width: 100%;
-    }
-    .nav-item:hover {
-      color: var(--text-ink);
-      background-color: rgba(121, 60, 73, 0.06);
-    }
-    .nav-item.active {
-      color: var(--text-ink);
-      font-weight: 600;
-      background-color: var(--accent-wine-soft);
-    }
-    .nav-item.active::before {
-      content: "•";
-      color: var(--accent-wine);
-      font-weight: bold;
-      margin-right: 2px;
-    }
-    .meta-text {
-      color: var(--text-meta);
-    }
-    .wine-text {
-      color: var(--accent-wine);
-    }
-    .wine-badge {
-      background-color: var(--accent-wine-soft);
-      color: var(--accent-wine);
-      border: 1px solid rgba(121, 60, 73, 0.22);
       border-radius: 4px;
-      padding: 2px 8px;
-      font-size: 12px;
+      font-size: 13px;
+      font-weight: 500;
+      transition: border-color 0.15s ease;
+    }
+    .btn-paper-outline:hover {
+      border-color: var(--text-ink);
+    }
+    .sidebar-link {
+      display: block;
+      width: 100%;
+      text-align: left;
+      padding: 5px 0;
+      font-size: 14px;
+      color: var(--text-ink);
+      transition: color 0.15s ease;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+    }
+    .sidebar-link:hover {
+      color: var(--accent-wine);
+    }
+    .sidebar-link.active {
+      color: var(--accent-wine);
       font-weight: 500;
     }
-    /* Atmospheric blurred cinema frame for locked video adaptation */
-    .cinema-poster-locked {
-      background:
-        radial-gradient(circle at 72% 38%, rgba(214, 179, 155, 0.42), transparent 45%),
-        radial-gradient(circle at 28% 70%, rgba(121, 60, 73, 0.55), transparent 55%),
-        linear-gradient(135deg, #201A18 0%, #382927 50%, #1B1615 100%);
-      position: relative;
-      overflow: hidden;
+    .sidebar-link.active::before {
+      content: "•  ";
+      color: var(--accent-wine);
     }
-    .cinema-poster-locked::after {
-      content: "";
-      position: absolute;
-      inset: 0;
-      backdrop-filter: blur(14px);
-      background: rgba(32, 26, 24, 0.38);
+    .reading-column p {
+      font-family: 'Cormorant Garamond', Georgia, serif;
+      font-size: var(--reading-size);
+      line-height: var(--reading-lh);
+      color: var(--text-ink);
+      margin-bottom: 1.55em;
     }
-    .cinema-player-unlocked {
-      background:
-        radial-gradient(circle at 68% 32%, rgba(214, 179, 155, 0.28), transparent 45%),
-        radial-gradient(circle at 30% 65%, rgba(121, 60, 73, 0.35), transparent 55%),
-        linear-gradient(160deg, #211A18 0%, #2E2320 55%, #161210 100%);
+    .kicker {
+      font-size: 11px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--accent-wine);
+      font-weight: 500;
+    }
+    .meta {
+      color: var(--text-meta);
     }
   </style>
 </head>
-<body class="min-h-screen flex flex-col lg:flex-row">
+<body>
 
-  <!-- MOBILE HEADER (390px breakpoint from Figma) -->
-  <div class="lg:hidden flex items-center justify-between px-5 py-3.5 border-b hairline-border bg-[var(--bg-surface)] sticky top-0 z-30">
+  <!-- Mobile Top Header (<1024px) -->
+  <div class="lg:hidden flex items-center justify-between px-5 py-3.5 border-b hairline bg-[#F5F0E8] sticky top-0 z-30">
     <div class="flex items-baseline gap-2.5 cursor-pointer" onclick="switchScreen('home')">
-      <span class="font-serif-editorial text-2xl font-semibold tracking-tight">между.</span>
-      <span class="text-[11px] uppercase tracking-widest meta-text">CHAPTER / 18+</span>
-    </div>
-    <div class="flex items-center gap-2">
-      <button onclick="toggleSubscriptionState()" id="mobSubBadge" class="text-[11px] px-2.5 py-1 rounded border hairline-border meta-text">
-        Подписка: выкл
-      </button>
-      <button onclick="document.getElementById('sidebarNav').classList.toggle('hidden')" class="px-3 py-1.5 rounded border hairline-border text-xs font-medium">
-        Меню · 18+
-      </button>
+      <span class="font-serif-ed text-2xl font-semibold">между.</span>
+      <span class="text-[10px] uppercase tracking-widest meta">CHAPTER / 18+</span>
     </div>
+    <button onclick="document.getElementById('leftSidebar').classList.toggle('hidden')" class="btn-paper-outline px-3 py-1.5 text-xs">
+      Меню · 18+
+    </button>
   </div>
 
-  <!-- LEFT SIDEBAR (Exact 232px width from Figma spec 12:317745) -->
-  <aside id="sidebarNav" class="hidden lg:flex flex-col justify-between w-full lg:w-[232px] lg:shrink-0 border-r hairline-border bg-[var(--bg-paper)] px-5 py-7 select-none lg:min-h-screen">
-    <div class="space-y-6">
-      <!-- Brand Header -->
-      <div class="cursor-pointer" onclick="switchScreen('home')">
-        <div class="font-serif-editorial text-[32px] leading-none font-semibold tracking-tight">между.</div>
-        <div class="text-[11px] uppercase tracking-[0.14em] meta-text mt-2 font-medium">CHAPTER / ЖУРНАЛ 18+</div>
-      </div>
+  <!-- Outer App Wrapper (Never on <body> so DEV moderation bar stays at the very top!) -->
+  <div class="min-h-screen flex flex-col lg:flex-row max-w-[1600px] mx-auto">
 
-      <!-- Primary Literary Navigation -->
-      <nav class="space-y-1">
-        <button onclick="switchScreen('home')" id="nav-home" class="nav-item active">Главная</button>
-        <button onclick="switchScreen('catalog')" id="nav-catalog" class="nav-item">Истории</button>
-        <button onclick="switchScreen('videos')" id="nav-videos" class="nav-item">Видео по историям</button>
-        <button onclick="switchScreen('continue')" id="nav-continue" class="nav-item">Продолжить чтение</button>
-        <button onclick="switchScreen('favorites')" id="nav-favorites" class="nav-item">Избранное</button>
-      </nav>
-
-      <!-- Secondary AI Format Navigation (Figma section: ДРУГОЙ ФОРМАТ · AI) -->
-      <div class="pt-4 border-t hairline-border space-y-1">
-        <div class="px-2.5 pb-1.5 text-[10px] uppercase tracking-[0.14em] meta-text font-semibold">ДРУГОЙ ФОРМАТ · AI</div>
-        <button onclick="switchScreen('ai_heroes')" id="nav-ai_heroes" class="nav-item">AI герои</button>
-        <button onclick="switchScreen('ai_chat')" id="nav-ai_chat" class="nav-item">Диалоги</button>
-        <button onclick="switchScreen('my_ai')" id="nav-my_ai" class="nav-item">Мои AI</button>
-        <button onclick="switchScreen('create_ai')" id="nav-create_ai" class="nav-item">Создать героя</button>
-        <button onclick="switchScreen('personal')" id="nav-personal" class="nav-item">Личное</button>
-      </div>
-
-      <!-- Account & Settings Navigation -->
-      <div class="pt-4 border-t hairline-border space-y-1">
-        <button onclick="switchScreen('subscription')" id="nav-subscription" class="nav-item">Подписка</button>
-        <button onclick="switchScreen('login')" id="nav-login" class="nav-item">Анна · Аккаунт</button>
-        <button onclick="switchScreen('settings')" id="nav-settings" class="nav-item">Настройки</button>
-        <button onclick="switchScreen('states')" id="nav-states" class="nav-item">Помощь · Состояния</button>
-      </div>
-    </div>
-
-    <!-- Bottom 18+ Editorial Note -->
-    <div class="pt-6 border-t hairline-border mt-8 space-y-3">
-      <div class="text-xs leading-relaxed meta-text">
-        <strong class="font-medium text-[var(--text-ink)] block mb-0.5">Только для взрослых 18+</strong>
-        Истории о чувствах и близости.
-      </div>
-      <div class="flex items-center justify-between text-[11px] meta-text pt-1">
-        <span>Тема Figma:</span>
-        <button onclick="toggleThemeNoir()" id="themeSwitchBtn" class="underline hover:text-[var(--text-ink)]">
-          CHAPTER (Бумага)
-        </button>
-      </div>
-    </div>
-  </aside>
-
-  <!-- MAIN EDITORIAL AREA (1440px Grid -> Remaining width with 48px desktop padding) -->
-  <div class="flex-1 flex flex-col min-w-0">
-
-    <!-- Top Section Bar (Полоса раздела + Поиск по журналу ⌘K + Interactive Subscription Toggle) -->
-    <header class="border-b hairline-border px-6 lg:px-12 py-3.5 flex flex-wrap items-center justify-between gap-4 bg-[var(--bg-paper)]">
-      <div class="flex items-center gap-3">
-        <span id="topBreadcrumb" class="text-xs font-medium tracking-wide uppercase meta-text">Главная</span>
-        <span class="meta-text opacity-40">·</span>
-        <button onclick="switchScreen('reader')" class="text-xs wine-text hover:underline font-medium">
-          📖 Открыть рассказ «После полуночи» + Видео ↓
-        </button>
-      </div>
-
-      <div class="flex flex-wrap items-center gap-3">
-        <!-- Quick Figma State Switcher for Founder Review -->
-        <div class="flex items-center gap-1.5 text-xs surface-card px-2.5 py-1">
-          <span class="meta-text text-[11px]">Режим видео в рассказах:</span>
-          <button onclick="setVideoAccess(false)" id="btnLockedState" class="px-2 py-0.5 rounded text-[11px] font-medium bg-[var(--accent-wine)] text-white">
-            🔒 Без подписки
-          </button>
-          <button onclick="setVideoAccess(true)" id="btnUnlockedState" class="px-2 py-0.5 rounded text-[11px] font-medium meta-text hover:text-[var(--text-ink)]">
-            🔓 Подписка активна (Плеер)
-          </button>
+    <!-- LEFT SIDEBAR (Exact 232px width from Figma 12:312192) -->
+    <aside id="leftSidebar" class="hidden lg:flex flex-col justify-between w-full lg:w-[232px] lg:shrink-0 border-r hairline px-7 py-8 bg-[#F5F0E8]">
+      <div class="space-y-8">
+        <!-- Brand Logo -->
+        <div class="cursor-pointer" onclick="switchScreen('home')">
+          <div class="font-serif-ed text-[34px] leading-none font-semibold tracking-tight text-[#24211D]">между.</div>
+          <div class="text-[10px] uppercase tracking-[0.12em] meta mt-3">CHAPTER / ЖУРНАЛ 18+</div>
         </div>
 
-        <!-- Search Trigger (Поиск по журналу ⌘K from Figma) -->
-        <div class="surface-card px-3 py-1.5 flex items-center gap-3 text-xs meta-text">
-          <span>Поиск по журналу</span>
-          <kbd class="text-[10px] px-1.5 py-0.5 rounded border hairline-border">⌘ K</kbd>
+        <!-- Primary Navigation -->
+        <nav class="space-y-1.5">
+          <button onclick="switchScreen('home')" id="nav-home" class="sidebar-link active">Главная</button>
+          <button onclick="switchScreen('catalog')" id="nav-catalog" class="sidebar-link">Истории</button>
+          <button onclick="switchScreen('videos')" id="nav-videos" class="sidebar-link">Видео по историям</button>
+          <button onclick="switchScreen('continue')" id="nav-continue" class="sidebar-link">Продолжить чтение</button>
+          <button onclick="switchScreen('favorites')" id="nav-favorites" class="sidebar-link">Избранное</button>
+        </nav>
+
+        <!-- Secondary Format: AI -->
+        <div class="pt-5 border-t hairline space-y-1.5">
+          <div class="text-[10px] uppercase tracking-[0.12em] meta pb-1.5">ДРУГОЙ ФОРМАТ · AI</div>
+          <button onclick="switchScreen('ai_heroes')" id="nav-ai_heroes" class="sidebar-link">AI герои</button>
+          <button onclick="switchScreen('ai_chat')" id="nav-ai_chat" class="sidebar-link">Диалоги</button>
+          <button onclick="switchScreen('my_ai')" id="nav-my_ai" class="sidebar-link">Мои AI</button>
+          <button onclick="switchScreen('create_ai')" id="nav-create_ai" class="sidebar-link">Создать героя</button>
+          <button onclick="switchScreen('personal')" id="nav-personal" class="sidebar-link">Личное</button>
+        </div>
+
+        <!-- Account & Settings -->
+        <div class="pt-5 border-t hairline space-y-1.5">
+          <button onclick="switchScreen('subscription')" id="nav-subscription" class="sidebar-link" style="color:var(--accent-wine);">Подписка</button>
+          <button onclick="switchScreen('login')" id="nav-login" class="sidebar-link">Анна · Аккаунт</button>
+          <button onclick="switchScreen('settings')" id="nav-settings" class="sidebar-link">Настройки</button>
+          <button onclick="switchScreen('states')" id="nav-states" class="sidebar-link">Помощь</button>
+        </div>
+
+        <!-- 18+ Disclaimer -->
+        <div class="pt-5 border-t hairline text-[11px] leading-relaxed meta">
+          Только для взрослых 18+<br />
+          Истории о чувствах и близости.
         </div>
       </div>
-    </header>
+    </aside>
 
-    <!-- CONTENT CONTAINER (48px padding on desktop per Figma spec) -->
-    <main class="px-6 lg:px-12 py-8 lg:py-12 max-w-[1140px] w-full space-y-14">
+    <!-- MAIN PUBLICATION AREA (Область публикации) -->
+    <div class="flex-1 min-w-0 flex flex-col">
 
-      <!-- ===================================================================== -->
-      <!-- SCREEN 1: ГЛАВНАЯ (Figma Frame 12:312192 · Главная · десктоп 1440px)  -->
-      <!-- ===================================================================== -->
-      <section id="screen-home" class="space-y-12">
-        <!-- Editorial Hero -->
-        <div class="border-b hairline-border pb-10 space-y-4">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text font-medium">
-            ЛИТЕРАТУРНЫЙ ЖУРНАЛ О БЛИЗОСТИ · 18+
+      <!-- Top Section Bar (Полоса раздела: exact 56px height, hairline border) -->
+      <header class="h-14 border-b hairline px-6 lg:px-12 flex items-center justify-between text-xs">
+        <div id="topSectionTitle" class="text-[#24211D] font-normal">Главная</div>
+        <div class="flex items-center gap-6">
+          <!-- Interactive toggle for reviewing Locked vs Unlocked video in stories -->
+          <button onclick="toggleSubscriptionAccess()" id="subStatusPill" class="text-[11px] px-2.5 py-1 rounded border hairline meta hover:text-[#24211D] transition" title="Нажмите, чтобы переключить состояние подписки на видео (Закрыто ↔ Открыто)">
+            Видео-доступ: Без подписки (переключить)
+          </button>
+          <div class="flex items-center gap-2 meta cursor-pointer hover:text-[#24211D]" onclick="switchScreen('catalog')">
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke-width="1.7"/><path d="M20 20l-3.5-3.5" stroke-width="1.7" stroke-linecap="round"/></svg>
+            <span>Поиск по журналу</span>
+            <span class="text-[11px] opacity-75 ml-1">⌘ K</span>
           </div>
-          <h1 class="font-serif-editorial text-4xl sm:text-6xl lg:text-[64px] leading-[1.02] font-normal tracking-tight">
-            Между строк.<br />Ближе к чувствам.
-          </h1>
-          <p class="text-base sm:text-lg meta-text max-w-xl leading-relaxed pt-1">
-            Законченные истории для неспешного чтения.<br />
-            Сначала — слова. Потом, если захочется, — кино.
-          </p>
         </div>
+      </header>
 
-        <!-- Story of the Day (ИСТОРИЯ ДНЯ / 01 — После полуночи) -->
-        <div class="surface-card p-7 lg:p-10 grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
-          <div class="lg:col-span-7 space-y-4">
-            <div class="flex flex-wrap items-center gap-2.5">
-              <span class="text-xs uppercase tracking-[0.12em] wine-text font-semibold">ИСТОРИЯ ДНЯ / 01</span>
-              <span class="meta-text">·</span>
-              <span class="text-xs meta-text">Романтическая проза · 3 мин</span>
-              <span class="wine-badge">🎬 Есть видео · по подписке</span>
-            </div>
-            <h2 class="font-serif-editorial text-4xl sm:text-5xl leading-[1.05] font-normal cursor-pointer hover:opacity-80" onclick="openStoryReader(0)">
-              После полуночи
-            </h2>
-            <p class="text-base leading-relaxed">
-              Опоздав на последний трамвай, двое решают не торопить утро. Рассказ о смелости остаться рядом.
+      <!-- Main Content Container (48px desktop padding per Figma spec) -->
+      <main class="px-6 lg:px-12 py-10 lg:py-12 max-w-[1160px] w-full">
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 1: ГЛАВНАЯ (Exact match to Figma Frame 12:312192)            -->
+        <!-- =================================================================== -->
+        <section id="screen-home" class="space-y-14">
+
+          <!-- Hero Title Block -->
+          <div class="space-y-3">
+            <div class="kicker">ЛИТЕРАТУРНЫЙ ЖУРНАЛ О БЛИЗОСТИ · 18+</div>
+            <h1 class="font-serif-ed text-5xl sm:text-[64px] leading-[1.02] font-normal text-[#24211D]">
+              Между строк.<br />Ближе к чувствам.
+            </h1>
+            <p class="text-[15px] meta leading-relaxed pt-1">
+              Законченные истории для неспешного чтения.<br />
+              Сначала — слова. Потом, если захочется, — кино.
             </p>
-            <div class="text-xs meta-text">
-              Персонажи: Вера, 31 · Матвей, 34 &nbsp;|&nbsp; Видео-экранизация в конце текста: 08:40
-            </div>
-            <div class="pt-2 flex flex-wrap items-center gap-3">
-              <button onclick="openStoryReader(0)" class="btn-wine px-6 py-3 text-sm inline-flex items-center gap-2">
-                <span>Читать историю</span>
-                <span>→</span>
-              </button>
-              <button onclick="openStoryReaderAndScrollVideo(0)" class="btn-outline-editorial px-4 py-3 text-xs font-medium">
-                К видео-экранизации (08:40) ↓
-              </button>
-            </div>
           </div>
 
-          <div class="lg:col-span-5 subtle-box p-7 lg:p-8 flex flex-col justify-between min-h-[220px]">
-            <div class="text-[11px] uppercase tracking-widest meta-text">Цитата из рассказа</div>
-            <blockquote class="font-serif-editorial italic text-2xl sm:text-[26px] leading-snug my-4">
-              «Иногда достаточно опоздать, чтобы оказаться вовремя».
-            </blockquote>
-            <div class="text-xs meta-text flex items-center justify-between pt-3 border-t hairline-border">
-              <span>Полный текст бесплатный</span>
-              <span class="wine-text font-medium">Видео 08:40 после текста →</span>
+          <!-- ИСТОРИЯ ДНЯ / 01 (2-column layout directly on #F5F0E8 paper) -->
+          <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center pb-12 border-b hairline">
+            <div class="lg:col-span-5">
+              <div class="overflow-hidden rounded-[6px] aspect-[3/4] bg-[#DFDDD7] cursor-pointer" onclick="openStoryReader(0)">
+                <img src="/assets/between-1323/story1.jpg" alt="После полуночи" class="w-full h-full object-cover hover:scale-[1.02] transition duration-500" />
+              </div>
             </div>
-          </div>
-        </div>
-
-        <!-- Continue Reading Bookmark Widget (ВАША ЗАКЛАДКА · СЕГОДНЯ) -->
-        <div class="space-y-4">
-          <div class="flex items-center justify-between">
-            <h3 class="font-serif-editorial text-2xl font-medium">На вашей странице</h3>
-            <button onclick="switchScreen('continue')" class="text-xs wine-text hover:underline font-medium">Продолжить чтение →</button>
-          </div>
-          <div class="surface-card p-6 flex flex-col md:flex-row md:items-center justify-between gap-6">
-            <div class="space-y-1.5 max-w-2xl">
-              <div class="text-[11px] uppercase tracking-[0.12em] wine-text font-semibold">ВАША ЗАКЛАДКА · СЕГОДНЯ</div>
-              <div class="font-serif-editorial text-2xl font-medium">После полуночи</div>
-              <p class="text-sm meta-text">
-                Вы остановились у моста: <span class="italic text-[var(--text-ink)]">«На другой стороне реки им нужно было расстаться».</span>
+            <div class="lg:col-span-7 space-y-5 max-w-xl">
+              <div class="kicker">ИСТОРИЯ ДНЯ / 01</div>
+              <h2 class="font-serif-ed text-5xl sm:text-[56px] leading-[1.02] font-normal cursor-pointer hover:opacity-80" onclick="openStoryReader(0)">
+                После<br />полуночи
+              </h2>
+              <p class="text-[15px] meta leading-relaxed">
+                Опоздав на последний трамвай, двое решают не торопить утро. Рассказ о смелости остаться рядом.
               </p>
+              <div class="text-xs space-y-0.5 pt-1">
+                <div class="text-[#24211D] font-medium">Романтическая проза · 3 мин</div>
+                <div class="meta">Есть видео · по подписке</div>
+              </div>
+              <div class="pt-1">
+                <button onclick="openStoryReader(0)" class="btn-wine px-5 py-3 inline-flex items-center gap-2">
+                  <span>Читать историю</span>
+                  <span>→</span>
+                </button>
+              </div>
+              <blockquote class="font-serif-ed italic text-2xl leading-snug meta pt-2">
+                «Иногда достаточно опоздать,<br />чтобы оказаться вовремя».
+              </blockquote>
             </div>
-            <div class="flex flex-col sm:flex-row sm:items-center gap-4 shrink-0">
-              <div class="text-right">
-                <div class="text-xs font-medium">Прочитано 42%</div>
-                <div class="text-[11px] meta-text">Осталось 2 мин</div>
-                <div class="w-36 h-1.5 bg-[var(--bg-subtle)] rounded-full overflow-hidden mt-1.5">
-                  <div class="h-full bg-[var(--accent-wine)]" style="width: 42%"></div>
+          </div>
+
+          <!-- На вашей странице (ВАША ЗАКЛАДКА · СЕГОДНЯ) -->
+          <div class="space-y-5 pb-12 border-b hairline">
+            <div class="flex items-center justify-between">
+              <h3 class="font-serif-ed text-[28px] leading-tight font-normal">На вашей странице</h3>
+              <button onclick="switchScreen('continue')" class="text-xs text-[#793C49] hover:underline">Продолжить чтение →</button>
+            </div>
+
+            <div class="surface-box p-7 space-y-4">
+              <div class="kicker">ВАША ЗАКЛАДКА · СЕГОДНЯ</div>
+              <div class="font-serif-ed text-[28px] leading-tight font-normal">После полуночи</div>
+              <p class="text-xs meta">
+                Вы остановились у моста: «На другой стороне реки им нужно было расстаться».
+              </p>
+              <div class="space-y-1.5 pt-1">
+                <div class="flex items-center justify-between text-[11px] meta">
+                  <span>Прочитано 42%</span>
+                  <span>Осталось 2 мин</span>
+                </div>
+                <div class="w-full h-[2px] bg-[#D8CFC3] overflow-hidden">
+                  <div class="h-full bg-[#793C49]" style="width: 42%"></div>
                 </div>
               </div>
-              <button onclick="openStoryReader(0)" class="btn-outline-editorial px-4 py-2.5 text-xs font-medium">
-                Продолжить с 42% →
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Editorial Selection Grid (Выбор редакции — 3 stories) -->
-        <div class="space-y-5">
-          <div class="flex items-center justify-between border-b hairline-border pb-3">
-            <h3 class="font-serif-editorial text-3xl font-normal">Выбор редакции</h3>
-            <button onclick="switchScreen('catalog')" class="text-xs wine-text hover:underline font-medium">Все истории (4) →</button>
-          </div>
-
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <!-- Card 1: Кофе после дождя -->
-            <article class="surface-card p-6 flex flex-col justify-between space-y-5">
-              <div class="space-y-3">
-                <div class="text-[11px] uppercase tracking-[0.1em] meta-text">СОВРЕМЕННАЯ РОМАНТИКА · 6 мин</div>
-                <h4 class="font-serif-editorial text-2xl font-medium cursor-pointer hover:opacity-80" onclick="openStoryReader(1)">
-                  Кофе после дождя
-                </h4>
-                <p class="text-sm meta-text leading-relaxed">
-                  В маленьком кафе Лида и Денис учатся говорить о будущем, не загадывая его друг за друга.
-                </p>
-                <blockquote class="font-serif-editorial italic text-base pt-2 border-t hairline-border">
-                  «Кофе принесли в разных чашках. Лида решила, что это хороший знак: здесь не требовали совпадать.»
-                </blockquote>
-              </div>
-              <div class="pt-3 border-t hairline-border flex items-center justify-between">
-                <span class="wine-badge">🎬 Есть видео · 11:20</span>
-                <button onclick="openStoryReader(1)" class="text-xs font-medium wine-text hover:underline">Читать →</button>
-              </div>
-            </article>
-
-            <!-- Card 2: Вечер в незнакомом городе -->
-            <article class="surface-card p-6 flex flex-col justify-between space-y-5">
-              <div class="space-y-3">
-                <div class="text-[11px] uppercase tracking-[0.1em] meta-text">ПРОЗА О ВЫБОРЕ · 8 мин</div>
-                <h4 class="font-serif-editorial text-2xl font-medium cursor-pointer hover:opacity-80" onclick="openStoryReader(2)">
-                  Вечер в незнакомом городе
-                </h4>
-                <p class="text-sm meta-text leading-relaxed">
-                  Три старых друга встречаются на один вечер. У каждого — свой маршрут, но одна общая история.
-                </p>
-                <blockquote class="font-serif-editorial italic text-base pt-2 border-t hairline-border">
-                  «Они встретились у гостиницы, которую никто из них не выбрал бы для себя. И потому всем было легко.»
-                </blockquote>
-              </div>
-              <div class="pt-3 border-t hairline-border flex items-center justify-between">
-                <span class="wine-badge">🎬 Есть видео · 14:10</span>
-                <button onclick="openStoryReader(2)" class="text-xs font-medium wine-text hover:underline">Читать →</button>
-              </div>
-            </article>
-
-            <!-- Card 3: Письмо, которое всё изменило -->
-            <article class="surface-card p-6 flex flex-col justify-between space-y-5">
-              <div class="space-y-3">
-                <div class="text-[11px] uppercase tracking-[0.1em] meta-text">ЭПИСТОЛЯРНАЯ ПРОЗА · 4 мин</div>
-                <h4 class="font-serif-editorial text-2xl font-medium cursor-pointer hover:opacity-80" onclick="openStoryReader(3)">
-                  Письмо, которое всё изменило
-                </h4>
-                <p class="text-sm meta-text leading-relaxed">
-                  Соня возвращает непрочитанное письмо. Андрей предлагает начать не с объяснений, а с прогулки.
-                </p>
-                <blockquote class="font-serif-editorial italic text-base pt-2 border-t hairline-border">
-                  «Конверт пролежал в ящике стола почти год. Теперь Соня держала его так, словно это был билет в город, где она ещё не бывала.»
-                </blockquote>
-              </div>
-              <div class="pt-3 border-t hairline-border flex items-center justify-between">
-                <span class="text-xs meta-text px-2 py-0.5 rounded border hairline-border">Пока только текст</span>
-                <button onclick="openStoryReader(3)" class="text-xs font-medium wine-text hover:underline">Читать →</button>
-              </div>
-            </article>
-          </div>
-        </div>
-      </section>
-
-      <!-- ===================================================================== -->
-      <!-- SCREEN 2: КАТАЛОГ ИСТОРИЙ (Figma 12:312704 + Node 12:312729 Filter)   -->
-      <!-- ===================================================================== -->
-      <section id="screen-catalog" class="hidden space-y-10">
-        <div class="border-b hairline-border pb-8 space-y-3">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text font-medium">
-            БИБЛИОТЕКА / ЗАКОНЧЕННАЯ ПРОЗА / 18+
-          </div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl lg:text-[56px] leading-[1.04] font-normal">
-            Истории, в которых<br />хочется остаться.
-          </h1>
-          <p class="text-base meta-text max-w-2xl leading-relaxed">
-            Романтика и эротическая литература — о внимании, выборе и близости. Литературные истории для взрослых, без грубых сцен. Полный текст каждой истории открыт.
-          </p>
-        </div>
-
-        <!-- Filter Bar (Exact Node 12:312729 from the user's Figma URL!) -->
-        <div class="flex flex-wrap items-center justify-between gap-4 pb-2">
-          <div class="flex flex-wrap items-center gap-2.5">
-            <select id="filterGenre" onchange="filterCatalog()" class="surface-card px-3.5 py-2 text-xs font-medium cursor-pointer outline-none">
-              <option value="all">Жанр: все ⌄</option>
-              <option value="Романтическая проза">Жанр: романтическая проза</option>
-              <option value="Современная романтика">Жанр: современная романтика</option>
-              <option value="Проза о выборе">Жанр: проза о выборе</option>
-              <option value="Эпистолярная проза">Жанр: эпистолярная проза</option>
-            </select>
-            <select id="filterMood" onchange="filterCatalog()" class="surface-card px-3.5 py-2 text-xs font-medium cursor-pointer outline-none">
-              <option value="all">Настроение: любое ⌄</option>
-              <option value="night">Ночной город и близость</option>
-              <option value="warm">Тёплый разговор</option>
-            </select>
-            <select id="filterTime" onchange="filterCatalog()" class="surface-card px-3.5 py-2 text-xs font-medium cursor-pointer outline-none">
-              <option value="all">Время: любое ⌄</option>
-              <option value="short">До 5 минут</option>
-              <option value="long">6–10 минут</option>
-            </select>
-            <select id="filterVideo" onchange="filterCatalog()" class="surface-card px-3.5 py-2 text-xs font-medium cursor-pointer outline-none">
-              <option value="all">Видео: все ⌄</option>
-              <option value="yes">Есть видео · по подписке</option>
-              <option value="text">Пока только текст</option>
-            </select>
-          </div>
-          <div id="catalogCountLabel" class="text-xs meta-text">4 истории · Редакционный порядок</div>
-        </div>
-
-        <div id="catalogGrid" class="grid grid-cols-1 md:grid-cols-2 gap-6"></div>
-
-        <div class="subtle-box p-5 text-xs meta-text flex flex-wrap items-center justify-between gap-2">
-          <span>Не нужно подписываться, чтобы дочитать. Видео — отдельное продолжение знакомства с историей.</span>
-          <button onclick="switchScreen('videos')" class="wine-text font-medium hover:underline">Перейти к видеоадаптациям →</button>
-        </div>
-      </section>
-
-      <!-- ===================================================================== -->
-      <!-- SCREEN 3: ЧТЕНИЕ ПОЛНОЙ ИСТОРИИ + ВИДЕО В КОНЦЕ (12:313167 & 12:313889) -->
-      <!-- ===================================================================== -->
-      <section id="screen-reader" class="hidden space-y-10">
-        <!-- Reader Top Header & Controls -->
-        <div class="border-b hairline-border pb-8 max-w-[680px] space-y-4">
-          <div id="readerMetaCategory" class="text-xs uppercase tracking-[0.14em] wine-text font-semibold">
-            РОМАНТИЧЕСКАЯ ПРОЗА / 3 мин / 18+
-          </div>
-          <h1 id="readerTitle" class="font-serif-editorial text-4xl sm:text-5xl lg:text-[56px] leading-[1.04] font-normal">
-            После полуночи
-          </h1>
-          <p id="readerLead" class="text-base sm:text-lg meta-text leading-relaxed">
-            Опоздав на последний трамвай, двое решают не торопить утро. Рассказ о смелости остаться рядом.
-          </p>
-          <div id="readerCharacters" class="text-xs meta-text pt-1">
-            Редакция «между.» · Вымышленные взрослые: Вера, 31 · Матвей, 34
-          </div>
-
-          <!-- Reading Comfort Toolbar (А− / А+ / Закладка / Прочитано 42%) -->
-          <div class="pt-4 flex flex-wrap items-center justify-between gap-4 border-t hairline-border">
-            <div class="flex items-center gap-2">
-              <button onclick="changeFontSize(-2)" class="btn-outline-editorial px-3 py-1.5 text-xs font-medium">А−</button>
-              <span id="fontSizeIndicator" class="text-xs meta-text px-1">20 px</span>
-              <button onclick="changeFontSize(2)" class="btn-outline-editorial px-3 py-1.5 text-xs font-medium">А+</button>
-              <button onclick="toggleBookmarkToast()" id="bookmarkBtn" class="btn-outline-editorial px-3.5 py-1.5 text-xs font-medium ml-2">
-                🔖 Закладка
-              </button>
-            </div>
-            <div class="text-xs meta-text">
-              <strong class="text-[var(--text-ink)]">Прочитано 42%</strong> · Осталось 2 мин
-            </div>
-          </div>
-
-          <div class="subtle-box px-4 py-3 text-xs meta-text flex flex-wrap items-center justify-between gap-2">
-            <span>Сохранённая позиция — у моста, 42%.</span>
-            <a href="#endOfStoryVideoBlock" class="wine-text font-medium hover:underline">Видео по этой истории ↓ · после окончания текста</a>
-          </div>
-        </div>
-
-        <!-- 680px Literary Reading Column (Cormorant Garamond 20/32px per Figma spec) -->
-        <article class="max-w-[680px] reading-prose">
-          <h3 id="readerChapterHeading" class="font-serif-editorial text-2xl font-medium mb-6">I. После полуночи</h3>
-          <div id="readerBodyParagraphs"></div>
-
-          <div class="pt-6 pb-8 border-b hairline-border flex items-center justify-between text-xs uppercase tracking-[0.16em] meta-text">
-            <span>КОНЕЦ</span>
-            <span>Весь рассказ доступен без подписки · Позиция 42%</span>
-          </div>
-        </article>
-
-        <!-- =================================================================== -->
-        <!-- KEY PRODUCT FEATURE: VIDEO BLOCK AT THE END OF THE STORY            -->
-        <!-- Supports both Locked (12:313167) and Unlocked (12:313889 / 12:314274) -->
-        <!-- =================================================================== -->
-        <div id="endOfStoryVideoBlock" class="max-w-[680px] pt-2 space-y-6">
-          <div class="flex flex-wrap items-center justify-between gap-2">
-            <div>
-              <div class="text-xs uppercase tracking-[0.14em] wine-text font-semibold">ПРОДОЛЖЕНИЕ НА ЭКРАНЕ · 18+</div>
-              <h3 class="font-serif-editorial text-3xl font-normal mt-0.5">Видео по этой истории</h3>
-            </div>
-            <div class="flex items-center gap-1.5 text-xs">
-              <button onclick="setVideoAccess(false)" id="readerLockTab" class="px-2.5 py-1 rounded border hairline-border text-xs">
-                Состояние: Закрыто
-              </button>
-              <button onclick="setVideoAccess(true)" id="readerUnlockTab" class="px-2.5 py-1 rounded border hairline-border text-xs">
-                Состояние: Открыто (Плеер)
-              </button>
-            </div>
-          </div>
-
-          <!-- STATE A: VIDEO LOCKED (Figma 12:313167 · Полная история · видео закрыто) -->
-          <div id="videoLockedCard" class="surface-card overflow-hidden">
-            <div class="cinema-poster-locked h-64 sm:h-72 flex flex-col items-center justify-center p-6 text-center relative">
-              <div class="relative z-10 max-w-md space-y-3 text-[#FFFDFA]">
-                <span class="inline-block px-3 py-1 rounded bg-black/45 border border-white/20 text-[11px] uppercase tracking-widest">
-                  🔒 Доступно по подписке · <span id="lockedDuration">08:40</span>
-                </span>
-                <div id="lockedStoryTitle" class="font-serif-editorial text-3xl sm:text-4xl">После полуночи</div>
-                <p class="text-xs text-[#E9E1D6] leading-relaxed">
-                  Записанная кинематографичная экранизация финала истории. Тёплый свет ночной пекарни, мост через реку и продолжение вечера.
-                </p>
-              </div>
-            </div>
-            <div class="p-6 sm:p-7 space-y-4 bg-[var(--bg-surface)]">
-              <div class="flex flex-wrap items-center justify-between gap-4">
-                <div>
-                  <div class="text-sm font-medium">Записанная экранизация · <span id="lockedDurationSub">08:40</span></div>
-                  <div class="text-xs meta-text mt-0.5">
-                    Полный текст бесплатный. Подписка открывает только видеоверсии. 690 ₽ / месяц · продлевается автоматически.
-                  </div>
-                </div>
-                <div class="flex flex-wrap items-center gap-3">
-                  <button onclick="setVideoAccess(true)" class="btn-wine px-5 py-2.5 text-xs sm:text-sm">
-                    Оформить подписку (690 ₽ / мес)
-                  </button>
-                  <button onclick="switchScreen('login')" class="btn-outline-editorial px-4 py-2.5 text-xs font-medium">
-                    Уже есть подписка? Войти
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- STATE B: VIDEO UNLOCKED + CINEMA PLAYER (Figma 12:313889 & 12:314274) -->
-          <div id="videoUnlockedCard" class="hidden rounded-lg overflow-hidden border hairline-border bg-[#211A18] text-[#FFFDFA] shadow-xl">
-            <div class="cinema-player-unlocked p-6 sm:p-8 space-y-6">
-              <div class="flex flex-wrap items-center justify-between gap-2 text-xs text-[#D6B39B]">
-                <span class="uppercase tracking-[0.14em] font-medium">ЗАПИСАННАЯ АДАПТАЦИЯ · НЕ AI АВАТАР</span>
-                <span class="px-2.5 py-0.5 rounded bg-emerald-500/20 text-emerald-300 border border-emerald-400/30 text-[11px]">
-                  ✓ Подписка активна
-                </span>
-              </div>
-
-              <!-- Simulated Atmospheric Cinema Screen -->
-              <div class="relative rounded-md overflow-hidden border border-white/15 bg-black/50 aspect-video flex flex-col justify-between p-6">
-                <div class="flex items-center justify-between text-xs text-white/75">
-                  <span id="playerStoryTitle" class="font-serif-editorial text-2xl text-white">После полуночи · Экранизация</span>
-                  <span id="playerDurationBadge" class="font-mono text-xs">02:16 / 08:40</span>
-                </div>
-
-                <!-- Center Play/Pause Button & Scene Subtitle -->
-                <div class="my-auto text-center space-y-3">
-                  <button onclick="toggleVideoPlayback()" id="playPauseCircle" class="w-16 h-16 rounded-full bg-[#793C49]/90 hover:bg-[#793C49] text-white flex items-center justify-center mx-auto text-xl shadow-lg transition transform hover:scale-105">
-                    ▶
-                  </button>
-                  <p id="videoSubtitleLine" class="font-serif-editorial italic text-lg sm:text-xl text-[#F5F0E8] max-w-md mx-auto">
-                    «Под светом настольной лампы нашлось место и двум чашкам, и половине тёплого хлеба...»
-                  </p>
-                  <div id="videoStateNote" class="text-[11px] text-white/60">
-                    На паузе · Нажмите ▶ для запуска демонстрации сцены
-                  </div>
-                </div>
-
-                <!-- Player Scrubber & Controls -->
-                <div class="space-y-2.5">
-                  <div class="w-full h-1.5 bg-white/20 rounded-full overflow-hidden cursor-pointer" onclick="scrubVideo(event)">
-                    <div id="videoProgressBar" class="h-full bg-[#D6B39B] transition-all duration-300" style="width: 28%"></div>
-                  </div>
-                  <div class="flex items-center justify-between text-[11px] text-white/80">
-                    <div class="flex items-center gap-4">
-                      <button onclick="toggleVideoPlayback()" id="playPauseTextBtn" class="hover:text-white font-medium">▶ Воспроизвести</button>
-                      <span>🔊 Звук: вкл</span>
-                      <span>CC Субтитры: рус</span>
-                    </div>
-                    <div class="flex items-center gap-3">
-                      <span>1080p HD</span>
-                      <span>⛶ Полный экран</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Next Story Recommendation (Figma 12:314274: После просмотра) -->
-              <div class="pt-4 border-t border-white/10 flex flex-wrap items-center justify-between gap-4 text-xs">
-                <div>
-                  <div class="text-[#D6B39B] uppercase tracking-wider text-[10px]">После просмотра</div>
-                  <div class="text-white/90 mt-0.5">
-                    Следующая история: <strong>«Кофе после дождя»</strong> · современная романтика · 6 мин. Видеоверсия — 11:20.
-                  </div>
-                </div>
-                <button onclick="openStoryReader(1)" class="px-4 py-2 rounded bg-white/10 hover:bg-white/20 text-white font-medium transition">
-                  Читать «Кофе после дождя» →
+              <div class="pt-2">
+                <button onclick="openStoryReader(0)" class="btn-paper-outline px-4 py-2.5 text-xs">
+                  Продолжить с 42%
                 </button>
               </div>
             </div>
           </div>
 
-          <div class="pt-2">
-            <button onclick="switchScreen('catalog')" class="text-xs meta-text hover:text-[var(--text-ink)]">
-              ← К каталогу историй
-            </button>
-          </div>
-        </div>
-      </section>
-
-      <!-- ===================================================================== -->
-      <!-- SCREEN 4: ВИДЕО ПО ИСТОРИЯМ (Figma Frame 12:314623 · Десктоп)         -->
-      <!-- ===================================================================== -->
-      <section id="screen-videos" class="hidden space-y-10">
-        <div class="border-b hairline-border pb-8 space-y-3">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text font-medium">
-            ИЗ БИБЛИОТЕКИ — НА ЭКРАН
-          </div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl lg:text-[56px] leading-[1.04] font-normal">
-            Те же чувства.<br />Другой язык.
-          </h1>
-          <p class="text-base meta-text max-w-2xl leading-relaxed">
-            Записанные адаптации прочитанных историй. Текст открыт каждому; для видео нужна подписка.
-          </p>
-        </div>
-
-        <div class="subtle-box p-5 flex flex-wrap items-center justify-between gap-4">
-          <div class="space-y-1">
-            <div class="text-sm font-medium">Видеоверсии доступны по подписке (690 ₽ / месяц)</div>
-            <div class="text-xs meta-text">
-              В состоянии без подписки постеры размыты одинаково. Вы можете мгновенно протестировать оба состояния ниже.
+          <!-- Выбор редакции (3-column photographic grid directly on paper) -->
+          <div class="space-y-6 pb-12 border-b hairline">
+            <div class="flex items-center justify-between">
+              <h3 class="font-serif-ed text-[28px] leading-tight font-normal">Выбор редакции</h3>
+              <button onclick="switchScreen('catalog')" class="text-xs text-[#793C49] hover:underline">Все истории →</button>
             </div>
-          </div>
-          <button onclick="toggleSubscriptionState()" class="btn-wine px-4 py-2 text-xs">
-            Переключить доступ к видео
-          </button>
-        </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <!-- Video 1 -->
-          <div class="surface-card overflow-hidden flex flex-col justify-between">
-            <div>
-              <div class="cinema-poster-locked h-44 flex items-center justify-center p-4 text-center">
-                <span class="relative z-10 px-3 py-1 rounded bg-black/55 text-[#FFFDFA] text-xs font-medium">
-                  🎬 После полуночи · 08:40
-                </span>
-              </div>
-              <div class="p-6 space-y-2.5">
-                <div class="text-[11px] uppercase tracking-wider wine-text font-semibold">Доступно по подписке · 08:40</div>
-                <h3 class="font-serif-editorial text-2xl font-medium">После полуночи</h3>
-                <p class="text-xs meta-text leading-relaxed">
-                  Опоздав на последний трамвай, двое решают не торопить утро. Рассказ о смелости остаться рядом.
-                </p>
-              </div>
-            </div>
-            <div class="p-6 pt-0 flex items-center gap-2">
-              <button onclick="openStoryReaderAndScrollVideo(0)" class="btn-wine flex-1 py-2 text-xs">Смотреть / К видео</button>
-              <button onclick="openStoryReader(0)" class="btn-outline-editorial px-3 py-2 text-xs">Текст</button>
-            </div>
-          </div>
-
-          <!-- Video 2 -->
-          <div class="surface-card overflow-hidden flex flex-col justify-between">
-            <div>
-              <div class="cinema-poster-locked h-44 flex items-center justify-center p-4 text-center">
-                <span class="relative z-10 px-3 py-1 rounded bg-black/55 text-[#FFFDFA] text-xs font-medium">
-                  🎬 Кофе после дождя · 11:20
-                </span>
-              </div>
-              <div class="p-6 space-y-2.5">
-                <div class="text-[11px] uppercase tracking-wider wine-text font-semibold">Доступно по подписке · 11:20</div>
-                <h3 class="font-serif-editorial text-2xl font-medium">Кофе после дождя</h3>
-                <p class="text-xs meta-text leading-relaxed">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-7">
+              <!-- Editorial Card 1: Кофе после дождя -->
+              <article class="space-y-3.5">
+                <div class="relative overflow-hidden rounded-[6px] aspect-[3/4] bg-[#DFDDD7] cursor-pointer" onclick="openStoryReader(1)">
+                  <img src="/assets/between-1323/story2.jpg" alt="Кофе после дождя" class="w-full h-full object-cover hover:scale-[1.02] transition duration-500" />
+                  <button onclick="event.stopPropagation();showToast('Добавлено в «Избранное»')" class="absolute top-3 right-3 w-8 h-8 rounded-[4px] bg-[#FFFDFA] border hairline flex items-center justify-center text-xs hover:bg-white">
+                    🔖
+                  </button>
+                </div>
+                <div class="kicker pt-1">СОВРЕМЕННАЯ РОМАНТИКА · 6 мин</div>
+                <h4 class="font-serif-ed text-[28px] leading-[1.1] font-normal cursor-pointer hover:opacity-80" onclick="openStoryReader(1)">
+                  Кофе после дождя
+                </h4>
+                <p class="text-xs meta leading-relaxed">
                   В маленьком кафе Лида и Денис учатся говорить о будущем, не загадывая его друг за друга.
                 </p>
-              </div>
-            </div>
-            <div class="p-6 pt-0 flex items-center gap-2">
-              <button onclick="openStoryReaderAndScrollVideo(1)" class="btn-wine flex-1 py-2 text-xs">Смотреть / К видео</button>
-              <button onclick="openStoryReader(1)" class="btn-outline-editorial px-3 py-2 text-xs">Текст</button>
-            </div>
-          </div>
+                <blockquote class="font-serif-ed text-[18px] leading-[1.45] text-[#24211D]">
+                  «Кофе принесли в разных чашках. Лида решила, что это хороший знак: здесь не требовали совпадать.»
+                </blockquote>
+                <div class="text-[11px] text-[#24211D] pt-1">Есть видео · по подписке</div>
+                <div class="flex items-center justify-between pt-1">
+                  <button onclick="openStoryReader(1)" class="text-xs text-[#793C49] hover:underline">Читать историю →</button>
+                  <span class="text-xs meta">🎬</span>
+                </div>
+              </article>
 
-          <!-- Video 3 -->
-          <div class="surface-card overflow-hidden flex flex-col justify-between">
-            <div>
-              <div class="cinema-poster-locked h-44 flex items-center justify-center p-4 text-center">
-                <span class="relative z-10 px-3 py-1 rounded bg-black/55 text-[#FFFDFA] text-xs font-medium">
-                  🎬 Вечер в незнакомом городе · 14:10
-                </span>
-              </div>
-              <div class="p-6 space-y-2.5">
-                <div class="text-[11px] uppercase tracking-wider wine-text font-semibold">Доступно по подписке · 14:10</div>
-                <h3 class="font-serif-editorial text-2xl font-medium">Вечер в незнакомом городе</h3>
-                <p class="text-xs meta-text leading-relaxed">
+              <!-- Editorial Card 2: Вечер в незнакомом городе -->
+              <article class="space-y-3.5">
+                <div class="relative overflow-hidden rounded-[6px] aspect-[3/4] bg-[#DFDDD7] cursor-pointer" onclick="openStoryReader(2)">
+                  <img src="/assets/between-1323/story3.jpg" alt="Вечер в незнакомом городе" class="w-full h-full object-cover hover:scale-[1.02] transition duration-500" />
+                  <button onclick="event.stopPropagation();showToast('Добавлено в «Избранное»')" class="absolute top-3 right-3 w-8 h-8 rounded-[4px] bg-[#FFFDFA] border hairline flex items-center justify-center text-xs hover:bg-white">
+                    🔖
+                  </button>
+                </div>
+                <div class="kicker pt-1">ПРОЗА О ВЫБОРЕ · 8 мин</div>
+                <h4 class="font-serif-ed text-[28px] leading-[1.1] font-normal cursor-pointer hover:opacity-80" onclick="openStoryReader(2)">
+                  Вечер в незнакомом городе
+                </h4>
+                <p class="text-xs meta leading-relaxed">
                   Три старых друга встречаются на один вечер. У каждого — свой маршрут, но одна общая история.
                 </p>
+                <blockquote class="font-serif-ed text-[18px] leading-[1.45] text-[#24211D]">
+                  «Они встретились у гостиницы, которую никто из них не выбрал бы для себя. И потому всем было легко.»
+                </blockquote>
+                <div class="text-[11px] text-[#24211D] pt-1">Есть видео · по подписке</div>
+                <div class="flex items-center justify-between pt-1">
+                  <button onclick="openStoryReader(2)" class="text-xs text-[#793C49] hover:underline">Читать историю →</button>
+                  <span class="text-xs meta">🎬</span>
+                </div>
+              </article>
+
+              <!-- Editorial Card 3: Письмо, которое всё изменило -->
+              <article class="space-y-3.5">
+                <div class="relative overflow-hidden rounded-[6px] aspect-[3/4] bg-[#DFDDD7] cursor-pointer" onclick="openStoryReader(3)">
+                  <img src="/assets/between-1323/story4.jpg" alt="Письмо, которое всё изменило" class="w-full h-full object-cover hover:scale-[1.02] transition duration-500" />
+                  <button onclick="event.stopPropagation();showToast('Добавлено в «Избранное»')" class="absolute top-3 right-3 w-8 h-8 rounded-[4px] bg-[#FFFDFA] border hairline flex items-center justify-center text-xs hover:bg-white">
+                    🔖
+                  </button>
+                </div>
+                <div class="kicker pt-1">ЭПИСТОЛЯРНАЯ ПРОЗА · 4 мин</div>
+                <h4 class="font-serif-ed text-[28px] leading-[1.1] font-normal cursor-pointer hover:opacity-80" onclick="openStoryReader(3)">
+                  Письмо, которое всё изменило
+                </h4>
+                <p class="text-xs meta leading-relaxed">
+                  Соня возвращает непрочитанное письмо. Андрей предлагает начать не с объяснений, а с прогулки.
+                </p>
+                <blockquote class="font-serif-ed text-[18px] leading-[1.45] text-[#24211D]">
+                  «Конверт пролежал в ящике стола почти год. Теперь Соня держала его так, словно это был билет в город, где она ещё не бывала.»
+                </blockquote>
+                <div class="text-[11px] meta pt-1">Пока только текст</div>
+                <div class="flex items-center justify-between pt-1">
+                  <button onclick="openStoryReader(3)" class="text-xs text-[#793C49] hover:underline">Читать историю →</button>
+                  <span class="text-xs meta">📖</span>
+                </div>
+              </article>
+            </div>
+          </div>
+
+          <!-- Из текста — в кадр (Exact section from Figma 12:312192) -->
+          <div class="space-y-5 pb-12 border-b hairline">
+            <h3 class="font-serif-ed text-[28px] leading-tight font-normal">Из текста — в кадр</h3>
+            <div class="surface-box p-6 space-y-3">
+              <div class="text-sm font-medium text-[#793C49]">Истории, у которых есть видеоверсия</div>
+              <div class="text-xs meta space-y-1">
+                <div>После полуночи · 08:40</div>
+                <div>Кофе после дождя · 11:20</div>
+                <div>Вечер в незнакомом городе · 14:10</div>
+              </div>
+              <div class="text-xs meta pt-2">
+                Все тексты бесплатны. Записанные адаптации — по подписке.
               </div>
             </div>
-            <div class="p-6 pt-0 flex items-center gap-2">
-              <button onclick="openStoryReaderAndScrollVideo(2)" class="btn-wine flex-1 py-2 text-xs">Смотреть / К видео</button>
-              <button onclick="openStoryReader(2)" class="btn-outline-editorial px-3 py-2 text-xs">Текст</button>
-            </div>
-          </div>
-        </div>
-
-        <div class="text-xs meta-text">
-          У истории «Письмо, которое всё изменило» пока нет видео. Она остаётся в каталоге текстов.
-        </div>
-      </section>
-
-      <!-- ===================================================================== -->
-      <!-- SCREEN 5: ПРОДОЛЖИТЬ ЧТЕНИЕ (Figma Frame 12:315008)                   -->
-      <!-- ===================================================================== -->
-      <section id="screen-continue" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-8 space-y-3">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text font-medium">ВАША ПОЗИЦИЯ В ТЕКСТЕ</div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl leading-[1.04] font-normal">
-            Мы оставили<br />страницу открытой.
-          </h1>
-          <p class="text-sm meta-text max-w-xl">
-            Только начатые истории. Закладки избранного и сохранённые AI-материалы находятся в своих разделах.
-          </p>
-        </div>
-
-        <div class="space-y-4">
-          <div class="surface-card p-6 flex flex-col sm:flex-row sm:items-center justify-between gap-6">
-            <div class="space-y-1.5">
-              <div class="text-xs meta-text">Романтическая проза · 3 мин &nbsp;·&nbsp; Сегодня, 21:14 · абзац у моста</div>
-              <h3 class="font-serif-editorial text-2xl font-medium">После полуночи</h3>
-              <p class="font-serif-editorial italic text-lg meta-text">«На другой стороне реки им нужно было расстаться.»</p>
-            </div>
-            <div class="flex items-center gap-4 shrink-0">
-              <div class="text-right">
-                <div class="text-xs font-medium">Прочитано 42%</div>
-                <div class="text-[11px] meta-text">Осталось 2 мин</div>
-              </div>
-              <button onclick="openStoryReader(0)" class="btn-wine px-4 py-2.5 text-xs">Продолжить с 42%</button>
-            </div>
-          </div>
-
-          <div class="surface-card p-6 flex flex-col sm:flex-row sm:items-center justify-between gap-6">
-            <div class="space-y-1.5">
-              <div class="text-xs meta-text">Современная романтика · 6 мин &nbsp;·&nbsp; Вчера, 19:06 · начало рассказа</div>
-              <h3 class="font-serif-editorial text-2xl font-medium">Кофе после дождя</h3>
-              <p class="font-serif-editorial italic text-lg meta-text">«Кофе принесли в разных чашках.»</p>
-            </div>
-            <div class="flex items-center gap-4 shrink-0">
-              <div class="text-right">
-                <div class="text-xs font-medium">Прочитано 18%</div>
-                <div class="text-[11px] meta-text">Осталось 5 мин</div>
-              </div>
-              <button onclick="openStoryReader(1)" class="btn-outline-editorial px-4 py-2.5 text-xs font-medium">Продолжить с 18%</button>
-            </div>
-          </div>
-        </div>
-        <div class="text-xs meta-text">Прогресс относится к чтению текста, а не к просмотру видео.</div>
-      </section>
-
-      <!-- ===================================================================== -->
-      <!-- SCREEN 6: ИЗБРАННОЕ (Figma Frame 12:315383)                           -->
-      <!-- ===================================================================== -->
-      <section id="screen-favorites" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-8 space-y-3">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text font-medium">СОХРАНЁННОЕ ДЛЯ ВДОХНОВЕНИЯ</div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl leading-[1.04] font-normal">
-            К этому<br />хочется вернуться.
-          </h1>
-          <p class="text-sm meta-text max-w-xl">
-            Истории, видео и AI герои — три отдельные коллекции. Здесь нет прогресса чтения или личных версий AI.
-          </p>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div class="surface-card p-6 space-y-3">
-            <div class="text-[11px] uppercase tracking-wider meta-text">РОМАНТИЧЕСКАЯ ПРОЗА · 3 мин</div>
-            <h3 class="font-serif-editorial text-2xl font-medium">После полуночи</h3>
-            <p class="text-xs meta-text">Опоздав на последний трамвай, двое решают не торопить утро.</p>
-            <div class="pt-3 border-t hairline-border flex items-center justify-between">
-              <span class="wine-badge">Есть видео · по подписке</span>
-              <button onclick="openStoryReader(0)" class="text-xs wine-text font-medium">Читать историю →</button>
-            </div>
-          </div>
-
-          <div class="surface-card p-6 space-y-3">
-            <div class="text-[11px] uppercase tracking-wider meta-text">ЭПИСТОЛЯРНАЯ ПРОЗА · 4 мин</div>
-            <h3 class="font-serif-editorial text-2xl font-medium">Письмо, которое всё изменило</h3>
-            <p class="text-xs meta-text">Соня возвращает непрочитанное письмо. Андрей предлагает начать с прогулки.</p>
-            <div class="pt-3 border-t hairline-border flex items-center justify-between">
-              <span class="text-xs meta-text">Пока только текст</span>
-              <button onclick="openStoryReader(3)" class="text-xs wine-text font-medium">Читать историю →</button>
-            </div>
-          </div>
-
-          <div class="subtle-box p-6 space-y-2.5 text-xs">
-            <div class="font-semibold text-sm">В коллекции</div>
-            <p class="meta-text">Истории · 2</p>
-            <p class="meta-text">Видео · 1 («После полуночи», 08:40)</p>
-            <p class="meta-text">AI герои · 1 (Инга, 32)</p>
-            <p class="meta-text pt-2 border-t hairline-border">
-              Личные конфигурации — в «Мои AI», материалы из своих разговоров — в «Личное».
-            </p>
-          </div>
-        </div>
-      </section>
-
-      <!-- ===================================================================== -->
-      <!-- SCREEN 7: AI ГЕРОИ (Figma Frame 12:317609 · ДРУГОЙ ФОРМАТ · AI)       -->
-      <!-- ===================================================================== -->
-      <section id="screen-ai_heroes" class="hidden space-y-10">
-        <div class="border-b hairline-border pb-8 space-y-3">
-          <div class="text-xs uppercase tracking-[0.14em] wine-text font-semibold">ДРУГОЙ ФОРМАТ · AI / ВЗРОСЛЫЕ ВЫМЫШЛЕННЫЕ ПЕРСОНАЖИ 18+</div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl leading-[1.04] font-normal">
-            Разговор, у которого<br />есть характер.
-          </h1>
-          <p class="text-sm meta-text max-w-2xl">
-            Камерные диалоги по мотивам атмосферы журнала. Выбирайте готовый образ или настройте темп и дистанцию под себя.
-          </p>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div class="surface-card p-6 flex flex-col justify-between space-y-5">
-            <div class="space-y-3">
-              <div class="flex items-center justify-between">
-                <span class="wine-badge">AI · 18+</span>
-                <span class="text-xs meta-text">Спокойный · Внимательный</span>
-              </div>
-              <h3 class="font-serif-editorial text-3xl font-medium">Лев, 36</h3>
-              <p class="text-xs font-medium wine-text">Архитектор · Вечерний город</p>
-              <p class="text-sm meta-text leading-relaxed">
-                Внимательный к деталям, с мягкой иронией. Любит старые мосты, поздние трамваи и разговоры без спешки.
-              </p>
-            </div>
-            <div class="pt-3 border-t hairline-border flex items-center gap-2">
-              <button onclick="switchScreen('ai_chat')" class="btn-wine flex-1 py-2.5 text-xs">Открыть диалог →</button>
-              <button onclick="switchScreen('my_ai')" class="btn-outline-editorial px-3 py-2.5 text-xs">Моя версия</button>
-            </div>
-          </div>
-
-          <div class="surface-card p-6 flex flex-col justify-between space-y-5">
-            <div class="space-y-3">
-              <div class="flex items-center justify-between">
-                <span class="wine-badge">AI · 18+</span>
-                <span class="text-xs meta-text">Тёплый · Литературный</span>
-              </div>
-              <h3 class="font-serif-editorial text-3xl font-medium">Инга, 32</h3>
-              <p class="text-xs font-medium wine-text">Переводчица · Маленькие кафе</p>
-              <p class="text-sm meta-text leading-relaxed">
-                Любит прогулки после дождя и разговоры о редких словах. Умеет слушать паузы между фразами.
-              </p>
-            </div>
-            <div class="pt-3 border-t hairline-border flex items-center gap-2">
-              <button onclick="switchScreen('ai_chat')" class="btn-wine flex-1 py-2.5 text-xs">Открыть диалог →</button>
-              <button onclick="switchScreen('my_ai')" class="btn-outline-editorial px-3 py-2.5 text-xs">Моя версия</button>
-            </div>
-          </div>
-
-          <div class="surface-card p-6 flex flex-col justify-between space-y-5">
-            <div class="space-y-3">
-              <div class="flex items-center justify-between">
-                <span class="wine-badge">AI · Конструктор</span>
-                <span class="text-xs meta-text">5 шагов</span>
-              </div>
-              <h3 class="font-serif-editorial text-3xl font-medium">Свой образ</h3>
-              <p class="text-xs font-medium wine-text">Персональная настройка</p>
-              <p class="text-sm meta-text leading-relaxed">
-                Задайте образ, внешность, характер, голос и границы общения в спокойном 5-шаговом конструкторе.
-              </p>
-            </div>
-            <div class="pt-3 border-t hairline-border">
-              <button onclick="switchScreen('create_ai')" class="btn-outline-editorial w-full py-2.5 text-xs font-medium">
-                Создать героя →
+            <div>
+              <button onclick="switchScreen('videos')" class="btn-paper-outline px-4 py-2.5 text-xs">
+                Видео по историям →
               </button>
             </div>
           </div>
-        </div>
-      </section>
 
-      <!-- ===================================================================== -->
-      <!-- SCREEN 8: ДИАЛОГИ + AI ВИДЕОДИАЛОГ (Figma Frame 12:317552)            -->
-      <!-- ===================================================================== -->
-      <section id="screen-ai_chat" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-6 flex flex-wrap items-center justify-between gap-4">
-          <div>
-            <div class="text-xs uppercase tracking-[0.14em] wine-text font-semibold">ДИАЛОГИ / ЛЕВ, 36 · AI · ЛИЧНАЯ ВЕРСИЯ</div>
-            <h1 class="font-serif-editorial text-3xl sm:text-4xl font-normal mt-1">Лев · Кофе после дождя</h1>
-          </div>
-          <div class="flex items-center gap-2">
-            <button onclick="toggleAiVideoMode(false)" id="chatModeTextBtn" class="btn-wine px-3.5 py-1.5 text-xs">Текст и голос</button>
-            <button onclick="toggleAiVideoMode(true)" id="chatModeVideoBtn" class="btn-outline-editorial px-3.5 py-1.5 text-xs">AI видеодиалог (Аватар)</button>
-          </div>
-        </div>
-
-        <!-- AI Video Avatar Call Box (Hidden by default, toggled via button) -->
-        <div id="aiVideoCallBox" class="hidden rounded-lg p-6 bg-[#211A18] text-[#FFFDFA] space-y-4">
-          <div class="flex items-center justify-between text-xs text-[#D6B39B]">
-            <span>AI ВИДЕОДИАЛОГ · ВЫМЫШЛЕННЫЙ AI АВАТАР · 18+</span>
-            <span>Камера пользователя: Выкл. (необязательна)</span>
-          </div>
-          <div class="aspect-video max-h-[340px] w-full rounded bg-black/50 border border-white/15 flex flex-col items-center justify-center p-6 text-center space-y-3">
-            <div class="w-20 h-20 rounded-full bg-[#793C49]/40 border border-[#D6B39B] flex items-center justify-center font-serif-editorial text-3xl">
-              Л
+          <!-- Настроение вечера (Exact section from Figma 12:312192) -->
+          <div class="space-y-5">
+            <h3 class="font-serif-ed text-[28px] leading-tight font-normal">Настроение вечера</h3>
+            <div class="flex flex-wrap gap-3">
+              <button onclick="openStoryReader(0)" class="btn-paper-outline px-5 py-3 font-serif-ed text-xl">Случайная встреча ↗</button>
+              <button onclick="openStoryReader(3)" class="btn-paper-outline px-5 py-3 font-serif-ed text-xl">Второй шанс ↗</button>
+              <button onclick="openStoryReader(1)" class="btn-paper-outline px-5 py-3 font-serif-ed text-xl">Город после дождя ↗</button>
+              <button onclick="openStoryReader(2)" class="btn-paper-outline px-5 py-3 font-serif-ed text-xl">Сказать главное ↗</button>
             </div>
-            <div class="font-serif-editorial text-2xl">Лев, 36 · AI аватар готов к разговору</div>
-            <p class="text-xs text-white/70 max-w-md">
-              «Кажется, дождь решил задержать нас здесь ещё на полчаса. Я не против. А ты?»
+            <div class="surface-box p-6 space-y-1.5">
+              <div class="text-sm font-medium text-[#793C49]">Отдельный формат · AI герои</div>
+              <p class="text-xs meta">
+                Лев, 36 · архитектор. Инга, 32 · переводчица. Вымышленные собеседники для собственных разговоров — не персонажи литературных историй.
+              </p>
+            </div>
+            <div>
+              <button onclick="switchScreen('ai_heroes')" class="btn-paper-outline px-4 py-2.5 text-xs">
+                Открыть AI героев →
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 2: КАТАЛОГ ИСТОРИЙ (Exact match to Figma Frame 12:312704)    -->
+        <!-- =================================================================== -->
+        <section id="screen-catalog" class="hidden space-y-10">
+          <div class="space-y-3 pb-6 border-b hairline">
+            <div class="kicker">БИБЛИОТЕКА / ЗАКОНЧЕННАЯ ПРОЗА / 18+</div>
+            <h1 class="font-serif-ed text-5xl sm:text-[60px] leading-[1.02] font-normal">
+              Истории, в которых<br />хочется остаться.
+            </h1>
+            <p class="text-sm meta max-w-3xl leading-relaxed pt-1">
+              Романтика и эротическая литература — о внимании, выборе и близости. Литературные истории для взрослых, без графических сцен. Полный текст каждой истории открыт.
             </p>
           </div>
-        </div>
 
-        <!-- Chat Messages Thread -->
-        <div class="surface-card p-6 space-y-5 max-w-[760px]">
-          <div class="text-center text-xs meta-text pb-2 border-b hairline-border">
-            Сегодня · Сцена: «За окном дождь. В кафе почти никого.»
+          <!-- Filter Bar (Node 12:312729 from the user's Figma URL!) -->
+          <div class="space-y-3">
+            <div class="flex flex-wrap items-center gap-2.5">
+              <span class="meta text-sm mr-1">▽</span>
+              <select id="filterGenre" onchange="filterCatalog()" class="btn-paper-outline px-3.5 py-2 text-xs cursor-pointer outline-none">
+                <option value="all">Жанр: все ⌄</option>
+                <option value="Романтическая проза">Жанр: романтическая проза</option>
+                <option value="Современная романтика">Жанр: современная романтика</option>
+                <option value="Проза о выборе">Жанр: проза о выборе</option>
+                <option value="Эпистолярная проза">Жанр: эпистолярная проза</option>
+              </select>
+              <select id="filterMood" onchange="filterCatalog()" class="btn-paper-outline px-3.5 py-2 text-xs cursor-pointer outline-none">
+                <option value="all">Настроение: любое ⌄</option>
+                <option value="night">Ночной город</option>
+                <option value="warm">Разговор после дождя</option>
+              </select>
+              <select id="filterTime" onchange="filterCatalog()" class="btn-paper-outline px-3.5 py-2 text-xs cursor-pointer outline-none">
+                <option value="all">Время: любое ⌄</option>
+                <option value="short">До 5 минут</option>
+                <option value="long">6–10 минут</option>
+              </select>
+              <select id="filterVideo" onchange="filterCatalog()" class="btn-paper-outline px-3.5 py-2 text-xs cursor-pointer outline-none">
+                <option value="all">Видео: все ⌄</option>
+                <option value="yes">Есть видео · по подписке</option>
+                <option value="text">Пока только текст</option>
+              </select>
+            </div>
+            <div id="catalogCountText" class="text-xs meta">4 истории · Редакционный порядок</div>
           </div>
 
-          <div id="chatMessagesList" class="space-y-4">
-            <div class="subtle-box p-4 max-w-lg space-y-1">
-              <div class="text-[11px] meta-text">19:41 · Лев · AI</div>
-              <p class="text-sm">Кажется, дождь решил задержать нас здесь. Я не против. А ты?</p>
-            </div>
+          <!-- 3-Column Photographic Grid (Matches 12:312704 1:1) -->
+          <div id="catalogGrid" class="grid grid-cols-1 md:grid-cols-3 gap-7 pb-10 border-b hairline"></div>
 
-            <div class="p-4 rounded-md bg-[var(--accent-wine-soft)] ml-auto max-w-lg space-y-1">
-              <div class="text-[11px] wine-text">19:41 · Вы · Доставлено ✓✓</div>
-              <p class="text-sm">Если кофе хороший — я тоже. Часто сюда заходишь?</p>
-            </div>
+          <div class="text-xs meta">
+            Не нужно подписываться, чтобы дочитать. Видео — отдельное продолжение знакомства с историей.
+          </div>
+        </section>
 
-            <div class="subtle-box p-4 max-w-lg space-y-1">
-              <div class="text-[11px] meta-text">19:42 · Лев · AI</div>
-              <p class="text-sm">Когда хочется замедлиться. Здесь никто не торопит, а бариста запоминает любимый кофе. Что заказать тебе?</p>
+        <!-- =================================================================== -->
+        <!-- SCREEN 3: ЧТЕНИЕ ИСТОРИИ + ВИДЕО В КОНЦЕ (12:313167 & 12:313889)    -->
+        <!-- =================================================================== -->
+        <section id="screen-reader" class="hidden space-y-10">
+
+          <!-- Story Header -->
+          <div class="space-y-3">
+            <div id="readerKicker" class="kicker">РОМАНТИЧЕСКАЯ ПРОЗА / 3 мин / 18+</div>
+            <h1 id="readerTitle" class="font-serif-ed text-5xl sm:text-[60px] leading-[1.02] font-normal">
+              После полуночи
+            </h1>
+            <p id="readerLead" class="text-sm meta">
+              Опоздав на последний трамвай, двое решают не торопить утро. Рассказ о смелости остаться рядом.
+            </p>
+            <div id="readerCredits" class="text-xs text-[#24211D] pt-1">
+              Редакция «между.» · Вымышленные взрослые: Вера, 31 · Матвей, 34
             </div>
           </div>
 
-          <form onsubmit="sendAiChatMessage(event)" class="pt-4 border-t hairline-border flex gap-2">
-            <input id="aiChatInput" type="text" placeholder="Написать Льву…" class="flex-1 px-4 py-2.5 rounded border hairline-border bg-[var(--bg-paper)] text-sm outline-none" />
-            <button type="submit" class="btn-wine px-5 py-2.5 text-xs">Отправить</button>
-          </form>
-          <div class="text-[11px] meta-text">
-            Лев — AI. Ответы вымышлены. Вы всегда можете сохранить понравившуюся фразу в «Личное».
+          <!-- Centered Story Portrait Cover (Exact match to Figma 12:313167) -->
+          <div class="py-2">
+            <div class="w-full max-w-[380px] mx-auto aspect-[3/4] rounded-[6px] overflow-hidden bg-[#DFDDD7]">
+              <img id="readerCoverImg" src="/assets/between-1323/story1.jpg" alt="После полуночи" class="w-full h-full object-cover" />
+            </div>
           </div>
-        </div>
-      </section>
 
-      <!-- ===================================================================== -->
-      <!-- SCREEN 9: МОИ AI & СОЗДАТЬ ГЕРОЯ & ЛИЧНОЕ (12:317510 / 460 / 425)     -->
-      <!-- ===================================================================== -->
-      <section id="screen-my_ai" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-6">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text">ЛИЧНЫЕ КОНФИГУРАЦИИ · AI</div>
-          <h1 class="font-serif-editorial text-4xl font-normal mt-1">Мои AI</h1>
-          <p class="text-sm meta-text mt-1">Сохранённые версии героев с вашим темпом беседы и границами.</p>
-        </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div class="surface-card p-6 space-y-3">
-            <div class="wine-badge inline-block">Личная версия</div>
-            <h3 class="font-serif-editorial text-2xl font-medium">Лев · моя версия</h3>
-            <p class="text-xs meta-text">Тон: спокойный, внимательный · Сценарий: вечерний город после дождя.</p>
-            <button onclick="switchScreen('ai_chat')" class="btn-wine px-4 py-2 text-xs">Продолжить диалог →</button>
-          </div>
-          <div class="surface-card p-6 space-y-3">
-            <div class="wine-badge inline-block">Конструктор</div>
-            <h3 class="font-serif-editorial text-2xl font-medium">Создать нового героя</h3>
-            <p class="text-xs meta-text">Настройте имя, возраст (18+), тембр голоса и характер с нуля.</p>
-            <button onclick="switchScreen('create_ai')" class="btn-outline-editorial px-4 py-2 text-xs">Открыть конструктор →</button>
-          </div>
-        </div>
-      </section>
+          <!-- Full-Width Reading Controls & 2px Progress Line -->
+          <div class="space-y-3 pb-4">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <button onclick="adjustFontSize(-2)" class="btn-paper-outline w-9 h-8 flex items-center justify-center text-xs">А−</button>
+                <button onclick="adjustFontSize(2)" class="btn-paper-outline w-9 h-8 flex items-center justify-center text-xs">А+</button>
+              </div>
+              <button onclick="showToast('Позиция чтения (42% · у моста) сохранена в Закладках')" class="text-xs meta hover:text-[#24211D] flex items-center gap-1.5">
+                <span>🔖</span>
+                <span>Закладка</span>
+              </button>
+            </div>
+
+            <div class="space-y-1.5">
+              <div class="flex items-center justify-between text-[11px] meta">
+                <span>Прочитано 42%</span>
+                <span>Осталось 2 мин</span>
+              </div>
+              <div class="w-full h-[2px] bg-[#D8CFC3]">
+                <div class="h-full bg-[#793C49]" style="width: 42%"></div>
+              </div>
+              <div class="text-[11px] meta pt-1 leading-relaxed">
+                Сохранённая позиция — у моста, 42%.<br />
+                <a href="#endOfStoryVideo" class="hover:underline">Видео по этой истории ↓ · после окончания текста</a>
+              </div>
+            </div>
+          </div>
+
+          <!-- Narrow Centered Reading Column (Cormorant Garamond 20/32px, max-w-[560px]) -->
+          <article class="max-w-[560px] mx-auto reading-column">
+            <h2 id="readerChapterTitle" class="font-serif-ed text-[26px] text-[#793C49] font-normal mb-6">
+              I. После полуночи
+            </h2>
+            <div id="readerParagraphs"></div>
+
+            <!-- КОНЕЦ Divider -->
+            <div class="pt-8 pb-4 text-center space-y-4">
+              <div class="font-serif-ed text-lg tracking-[0.28em] text-[#793C49] uppercase">КОНЕЦ</div>
+              <div class="border-t hairline pt-3 text-left text-[11px] meta">
+                Весь рассказ доступен без подписки. Сохранённая позиция чтения — 42%.
+              </div>
+            </div>
+          </article>
+
+          <!-- ================================================================= -->
+          <!-- VIDEO BLOCK AT THE END OF THE STORY (Figma 12:313167 & 12:313889) -->
+          <!-- ================================================================= -->
+          <div id="endOfStoryVideo" class="pt-6 border-t hairline space-y-5">
+            <div class="flex flex-wrap items-center justify-between gap-2">
+              <h3 class="font-serif-ed text-[28px] font-normal">Видео по этой истории</h3>
+              <div class="flex items-center gap-2 text-xs">
+                <span class="meta text-[11px]">Состояние макета Figma:</span>
+                <button onclick="setSubscriptionAccess(false)" id="btnStateLocked" class="px-2.5 py-1 rounded text-xs bg-[#793C49] text-white">
+                  12:313167 · Видео закрыто
+                </button>
+                <button onclick="setSubscriptionAccess(true)" id="btnStateUnlocked" class="btn-paper-outline px-2.5 py-1 text-xs">
+                  12:313889 · Видео открыто
+                </button>
+              </div>
+            </div>
+
+            <!-- Wide 16:9 Cinema Frame using original Figma /assets/between-1323/video1.jpg -->
+            <div class="relative w-full aspect-[16/7] min-h-[300px] rounded-[6px] overflow-hidden bg-[#211A18] flex items-center justify-center text-center">
+              <img id="videoPosterImg" src="/assets/between-1323/video1.jpg" alt="Видео по истории" class="absolute inset-0 w-full h-full object-cover transition duration-500 blur-xl scale-105 brightness-50" />
+
+              <!-- Overlay when LOCKED (12:313167) -->
+              <div id="videoLockedOverlay" class="relative z-10 max-w-md px-6 space-y-3 text-[#FFFDFA]">
+                <div class="text-lg opacity-90">🔒</div>
+                <div class="font-serif-ed text-3xl sm:text-4xl font-normal">Доступно по подписке</div>
+                <div id="videoDurationLocked" class="text-xs text-[#E9E1D6]">Записанная экранизация · 08:40</div>
+                <div class="pt-2">
+                  <button onclick="setSubscriptionAccess(true)" class="btn-wine px-5 py-2.5 text-xs">
+                    Оформить подписку
+                  </button>
+                </div>
+                <div>
+                  <button onclick="switchScreen('login')" class="text-[11px] text-[#E9E1D6] hover:underline">
+                    Уже есть подписка? Войти
+                  </button>
+                </div>
+              </div>
+
+              <!-- Overlay when UNLOCKED (12:313889) -->
+              <div id="videoUnlockedOverlay" class="hidden relative z-10 max-w-md px-6 space-y-3 text-[#FFFDFA]">
+                <div class="text-lg opacity-90">▶️</div>
+                <div id="videoTitleUnlocked" class="font-serif-ed text-3xl sm:text-4xl font-normal">После полуночи</div>
+                <div id="videoDurationUnlocked" class="text-xs text-[#E9E1D6]">Записанная экранизация · 08:40</div>
+                <div class="pt-2">
+                  <button onclick="switchScreen('player')" class="btn-wine px-5 py-2.5 text-xs">
+                    Смотреть видео
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div id="videoFootnote" class="text-xs meta">
+              Полный текст бесплатный. Подписка открывает только видеоверсии. 690 ₽ / месяц · продлевается автоматически. Условия — до оформления.
+            </div>
+
+            <div class="pt-2">
+              <button onclick="switchScreen('catalog')" class="btn-paper-outline px-4 py-2 text-xs">
+                ← К историям
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 3B: ВИДЕОПЛЕЕР (Figma Frame 12:314274)                       -->
+        <!-- =================================================================== -->
+        <section id="screen-player" class="hidden space-y-8">
+          <div class="space-y-2">
+            <div class="kicker">ЗАПИСАННАЯ АДАПТАЦИЯ · НЕ AI АВАТАР</div>
+            <h1 class="font-serif-ed text-5xl font-normal">После полуночи</h1>
+            <div class="text-xs meta">08:40 · По одноимённому рассказу · Подписка активна</div>
+          </div>
+
+          <div class="relative w-full aspect-video rounded-[6px] overflow-hidden bg-[#211A18] flex flex-col justify-between p-6 text-[#FFFDFA]">
+            <img src="/assets/between-1323/video1.jpg" alt="Кадр экранизации" class="absolute inset-0 w-full h-full object-cover brightness-75" />
+            <div class="relative z-10 flex justify-between text-xs text-white/80">
+              <span>После полуночи · Записанная экранизация</span>
+              <span class="font-mono">02:16 / 08:40</span>
+            </div>
+            <div class="relative z-10 my-auto text-center space-y-3">
+              <button onclick="this.innerText = this.innerText === '▶' ? '⏸' : '▶'" class="w-16 h-16 rounded-full bg-[#793C49] text-white text-xl flex items-center justify-center mx-auto shadow-lg">▶</button>
+              <div class="text-xs text-white/80">На паузе · только изображение состояния</div>
+            </div>
+            <div class="relative z-10 space-y-2">
+              <div class="w-full h-1 bg-white/30 rounded-full overflow-hidden">
+                <div class="h-full bg-[#D6B39B]" style="width: 28%"></div>
+              </div>
+              <div class="flex justify-between text-[11px] text-white/80">
+                <span>🔊 Звук · CC Субтитры</span>
+                <span>⛶ Полный экран</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="surface-box p-6 flex flex-wrap items-center justify-between gap-4">
+            <div class="space-y-1">
+              <div class="text-xs font-medium text-[#793C49]">После просмотра</div>
+              <div class="text-xs meta">Следующая история: «Кофе после дождя» · современная романтика · 6 мин. Видеоверсия — 11:20.</div>
+            </div>
+            <div class="flex gap-3">
+              <button onclick="openStoryReader(0)" class="btn-paper-outline px-4 py-2 text-xs">← Вернуться к истории (42%)</button>
+              <button onclick="openStoryReader(1)" class="btn-wine px-4 py-2 text-xs">Читать «Кофе после дождя» →</button>
+            </div>
+          </div>
+        </section>
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 4: ВИДЕО ПО ИСТОРИЯМ (Exact match to Figma Frame 12:314623)  -->
+        <!-- =================================================================== -->
+        <section id="screen-videos" class="hidden space-y-10">
+          <div class="space-y-3">
+            <div class="kicker">ИЗ БИБЛИОТЕКИ — НА ЭКРАН</div>
+            <h1 class="font-serif-ed text-5xl sm:text-[60px] leading-[1.02] font-normal">
+              Те же чувства.<br />Другой язык.
+            </h1>
+            <p class="text-sm meta max-w-2xl pt-1">
+              Записанные адаптации прочитанных историй. Текст открыт каждому; для видео нужна подписка.
+            </p>
+          </div>
+
+          <div class="surface-box p-6 space-y-1.5">
+            <div class="text-sm font-medium text-[#793C49]">Видеоверсии доступны по подписке</div>
+            <p class="text-xs meta">
+              Все три постера размыты одинаково. Это состояние доступа к видео, а не скрытая обложка книги. 690 ₽ / месяц · условия до оформления.
+            </p>
+          </div>
+
+          <!-- Stacked Full-Width Video Adaptations (Matches 12:314623 1:1) -->
+          <div class="space-y-12">
+            <!-- Video Item 1 -->
+            <div class="space-y-4">
+              <div class="relative w-full aspect-[16/6] min-h-[240px] rounded-[6px] overflow-hidden bg-[#201A18] flex items-center justify-center text-center cursor-pointer" onclick="openStoryReaderAndScrollVideo(0)">
+                <img src="/assets/between-1323/video1.jpg" alt="После полуночи" class="video-catalog-poster absolute inset-0 w-full h-full object-cover blur-xl scale-105 brightness-50 transition duration-500" />
+                <div class="relative z-10 text-[#FFFDFA] space-y-1.5">
+                  <div class="text-base">🔒</div>
+                  <div class="text-xs">Доступно по подписке · 08:40</div>
+                </div>
+              </div>
+              <h3 class="font-serif-ed text-3xl font-normal">После полуночи</h3>
+              <p class="text-xs meta">Опоздав на последний трамвай, двое решают не торопить утро. Рассказ о смелости остаться рядом.</p>
+              <div class="flex items-center gap-3 pt-1">
+                <button onclick="openStoryReader(0)" class="btn-paper-outline px-4 py-2.5 text-xs">Читать историю</button>
+                <button onclick="switchScreen('subscription')" class="btn-wine px-4 py-2.5 text-xs">Условия подписки</button>
+              </div>
+            </div>
+
+            <!-- Video Item 2 -->
+            <div class="space-y-4">
+              <div class="relative w-full aspect-[16/6] min-h-[240px] rounded-[6px] overflow-hidden bg-[#201A18] flex items-center justify-center text-center cursor-pointer" onclick="openStoryReaderAndScrollVideo(1)">
+                <img src="/assets/between-1323/story2.jpg" alt="Кофе после дождя" class="video-catalog-poster absolute inset-0 w-full h-full object-cover blur-xl scale-105 brightness-50 transition duration-500" />
+                <div class="relative z-10 text-[#FFFDFA] space-y-1.5">
+                  <div class="text-base">🔒</div>
+                  <div class="text-xs">Доступно по подписке · 11:20</div>
+                </div>
+              </div>
+              <h3 class="font-serif-ed text-3xl font-normal">Кофе после дождя</h3>
+              <p class="text-xs meta">В маленьком кафе Лида и Денис учатся говорить о будущем, не загадывая его друг за друга.</p>
+              <div class="flex items-center gap-3 pt-1">
+                <button onclick="openStoryReader(1)" class="btn-paper-outline px-4 py-2.5 text-xs">Читать историю</button>
+                <button onclick="switchScreen('subscription')" class="btn-wine px-4 py-2.5 text-xs">Условия подписки</button>
+              </div>
+            </div>
+
+            <!-- Video Item 3 -->
+            <div class="space-y-4">
+              <div class="relative w-full aspect-[16/6] min-h-[240px] rounded-[6px] overflow-hidden bg-[#201A18] flex items-center justify-center text-center cursor-pointer" onclick="openStoryReaderAndScrollVideo(2)">
+                <img src="/assets/between-1323/story3.jpg" alt="Вечер в незнакомом городе" class="video-catalog-poster absolute inset-0 w-full h-full object-cover blur-xl scale-105 brightness-50 transition duration-500" />
+                <div class="relative z-10 text-[#FFFDFA] space-y-1.5">
+                  <div class="text-base">🔒</div>
+                  <div class="text-xs">Доступно по подписке · 14:10</div>
+                </div>
+              </div>
+              <h3 class="font-serif-ed text-3xl font-normal">Вечер в незнакомом городе</h3>
+              <p class="text-xs meta">Три старых друга встречаются на один вечер. У каждого — свой маршрут, но одна общая история.</p>
+              <div class="flex items-center gap-3 pt-1">
+                <button onclick="openStoryReader(2)" class="btn-paper-outline px-4 py-2.5 text-xs">Читать историю</button>
+                <button onclick="switchScreen('subscription')" class="btn-wine px-4 py-2.5 text-xs">Условия подписки</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="pt-4 border-t hairline text-xs meta">
+            У истории «Письмо, которое всё изменило» пока нет видео. Она остаётся в каталоге текстов.
+          </div>
+        </section>
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 5: AI ГЕРОИ (Exact match to Figma Frame 12:317904)           -->
+        <!-- =================================================================== -->
+        <section id="screen-ai_heroes" class="hidden space-y-10">
+          <div class="space-y-3">
+            <div class="kicker">ОТДЕЛЬНЫЙ ФОРМАТ / ВЫМЫШЛЕННЫЕ СОБЕСЕДНИКИ</div>
+            <h1 class="font-serif-ed text-5xl sm:text-[60px] leading-[1.02] font-normal">
+              Для разговора.<br />Не для продолжения книги.
+            </h1>
+            <p class="text-sm meta max-w-3xl pt-1">
+              AI герои не связаны с персонажами литературных историй. Можно начать собственный диалог или настроить личную версию.
+            </p>
+          </div>
+
+          <div class="surface-box p-6 space-y-1.5">
+            <div class="text-sm font-medium text-[#793C49]">Это AI, а не реальные люди</div>
+            <p class="text-xs meta">
+              Все герои вымышлены и старше 25 лет. Сообщения могут содержать неточности. Не сообщайте личные или чувствительные данные.
+            </p>
+          </div>
+
+          <!-- 2-Column Portrait Grid using original Figma /assets/between-1323/ai_lev.jpg & ai_inga.jpg -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-8 pb-10 border-b hairline">
+            <div class="space-y-4">
+              <div class="aspect-square rounded-[6px] overflow-hidden bg-[#DFDDD7] cursor-pointer" onclick="switchScreen('ai_chat')">
+                <img src="/assets/between-1323/ai_lev.jpg" alt="Лев, 36" class="w-full h-full object-cover hover:scale-[1.02] transition duration-500" />
+              </div>
+              <div class="kicker">ВЫМЫШЛЕННЫЙ ВЗРОСЛЫЙ · AI</div>
+              <h3 class="font-serif-ed text-4xl font-normal">Лев, 36</h3>
+              <p class="text-xs meta">Архитектор. Внимательный к деталям, с мягкой иронией.</p>
+              <button onclick="switchScreen('ai_chat')" class="btn-paper-outline w-full py-3 text-xs">
+                Открыть профиль
+              </button>
+            </div>
+
+            <div class="space-y-4">
+              <div class="aspect-square rounded-[6px] overflow-hidden bg-[#DFDDD7] cursor-pointer" onclick="switchScreen('ai_chat')">
+                <img src="/assets/between-1323/ai_inga.jpg" alt="Инга, 32" class="w-full h-full object-cover hover:scale-[1.02] transition duration-500" />
+              </div>
+              <div class="kicker">ВЫМЫШЛЕННЫЙ ВЗРОСЛЫЙ · AI</div>
+              <h3 class="font-serif-ed text-4xl font-normal">Инга, 32</h3>
+              <p class="text-xs meta">Переводчица. Любит прогулки и разговоры о языке.</p>
+              <button onclick="switchScreen('ai_chat')" class="btn-paper-outline w-full py-3 text-xs">
+                Открыть профиль
+              </button>
+            </div>
+          </div>
 
-      <section id="screen-create_ai" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-6">
-          <div class="text-xs uppercase tracking-[0.14em] wine-text font-semibold">КОНСТРУКТОР ОБРАЗА · 5 ШАГОВ</div>
-          <h1 class="font-serif-editorial text-4xl font-normal mt-1">Создать героя</h1>
-          <p class="text-sm meta-text mt-1">Все персонажи — вымышленные взрослые (18+).</p>
-        </div>
-        <div class="flex flex-wrap gap-2 text-xs">
-          <span class="px-3 py-1.5 rounded bg-[var(--accent-wine)] text-white font-medium">1 · Образ</span>
-          <span class="px-3 py-1.5 rounded surface-card">2 · Внешность</span>
-          <span class="px-3 py-1.5 rounded surface-card">3 · Характер</span>
-          <span class="px-3 py-1.5 rounded surface-card">4 · Голос и общение</span>
-          <span class="px-3 py-1.5 rounded surface-card">5 · Проверка</span>
-        </div>
-        <div class="surface-card p-6 max-w-xl space-y-4">
           <div>
-            <label class="block text-xs meta-text mb-1">Имя героя</label>
-            <input type="text" value="Алекс" class="w-full px-3.5 py-2 rounded border hairline-border bg-[var(--bg-paper)] text-sm" />
+            <button onclick="switchScreen('create_ai')" class="btn-paper-outline px-5 py-3 text-xs">
+              Создать своего героя →
+            </button>
           </div>
-          <div>
-            <label class="block text-xs meta-text mb-1">Возраст (только 18+)</label>
-            <input type="text" value="32 года · Взрослый вымышленный герой" class="w-full px-3.5 py-2 rounded border hairline-border bg-[var(--bg-paper)] text-sm" />
-          </div>
-          <div>
-            <label class="block text-xs meta-text mb-1">Атмосфера и характер</label>
-            <textarea rows="3" class="w-full px-3.5 py-2 rounded border hairline-border bg-[var(--bg-paper)] text-sm">Внимательный собеседник с мягким юмором. Любит ночные прогулки и кинематограф.</textarea>
-          </div>
-          <button onclick="switchScreen('ai_chat')" class="btn-wine px-5 py-2.5 text-xs">Сохранить и начать разговор →</button>
-        </div>
-      </section>
+        </section>
 
-      <section id="screen-personal" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-6">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text">ЛИЧНЫЙ АРХИВ</div>
-          <h1 class="font-serif-editorial text-4xl font-normal mt-1">Маленькие вещи, которые остаются.</h1>
-          <p class="text-sm meta-text mt-1">Сохранённые фрагменты из ваших диалогов и любимые строки из рассказов.</p>
-        </div>
-        <div class="surface-card p-6 space-y-3 max-w-2xl">
-          <div class="text-xs meta-text">Из рассказа «После полуночи»</div>
-          <blockquote class="font-serif-editorial italic text-2xl">
-            «С этими тёплыми свёртками они стали похожи на людей, возвращавшихся из одного дома.»
-          </blockquote>
-        </div>
-      </section>
-
-      <!-- ===================================================================== -->
-      <!-- SCREEN 10: ПОДПИСКА · УСЛОВИЯ (Figma Frame 12:313554 · 690 ₽ / мес)   -->
-      <!-- ===================================================================== -->
-      <section id="screen-subscription" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-8 space-y-3">
-          <div class="text-xs uppercase tracking-[0.14em] wine-text font-semibold">ВИДЕОВЕРСИИ / ОТДЕЛЬНО ОТ ЧТЕНИЯ</div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl leading-[1.04] font-normal">
-            Ещё один способ<br />почувствовать историю.
-          </h1>
-          <p class="text-base meta-text max-w-2xl">
-            Читайте все истории бесплатно. Подписка открывает только записанные видеоадаптации — не AI-диалоги и не доступ к текстам.
-          </p>
-        </div>
-
-        <div class="surface-card p-8 max-w-xl space-y-6">
-          <div class="flex items-center justify-between">
-            <span class="text-xs uppercase tracking-wider wine-text font-semibold">ОДИН ПЛАН · БИБЛИОТЕКА ВИДЕО</span>
-            <span class="wine-badge">18+</span>
+        <!-- =================================================================== -->
+        <!-- SCREEN 6: ПРОДОЛЖИТЬ ЧТЕНИЕ (Figma Frame 12:315008)                 -->
+        <!-- =================================================================== -->
+        <section id="screen-continue" class="hidden space-y-8">
+          <div class="space-y-3 pb-6 border-b hairline">
+            <div class="kicker">ВАША ПОЗИЦИЯ В ТЕКСТЕ</div>
+            <h1 class="font-serif-ed text-5xl font-normal">Мы оставили<br />страницу открытой.</h1>
+            <p class="text-sm meta max-w-xl">Только начатые истории. Закладки избранного и сохранённые AI-материалы находятся в своих разделах.</p>
           </div>
-          <div>
-            <div class="font-serif-editorial text-5xl font-semibold">690 ₽ / месяц</div>
-            <div class="text-xs meta-text mt-1">Продлевается автоматически · Отмена в любой момент в Настройках</div>
+
+          <div class="space-y-4">
+            <div class="surface-box p-6 space-y-3">
+              <div class="text-xs meta">Романтическая проза · 3 мин · Сегодня, 21:14 · абзац у моста</div>
+              <h3 class="font-serif-ed text-3xl font-normal">После полуночи</h3>
+              <p class="font-serif-ed italic text-lg meta">«На другой стороне реки им нужно было расстаться.»</p>
+              <div class="w-full h-[2px] bg-[#D8CFC3]"><div class="h-full bg-[#793C49]" style="width:42%"></div></div>
+              <div class="flex justify-between items-center pt-1">
+                <span class="text-xs meta">Прочитано 42% · Осталось 2 мин</span>
+                <button onclick="openStoryReader(0)" class="btn-wine px-4 py-2 text-xs">Продолжить с 42%</button>
+              </div>
+            </div>
+
+            <div class="surface-box p-6 space-y-3">
+              <div class="text-xs meta">Современная романтика · 6 мин · Вчера, 19:06 · начало рассказа</div>
+              <h3 class="font-serif-ed text-3xl font-normal">Кофе после дождя</h3>
+              <p class="font-serif-ed italic text-lg meta">«Кофе принесли в разных чашках.»</p>
+              <div class="w-full h-[2px] bg-[#D8CFC3]"><div class="h-full bg-[#793C49]" style="width:18%"></div></div>
+              <div class="flex justify-between items-center pt-1">
+                <span class="text-xs meta">Прочитано 18% · Осталось 5 мин</span>
+                <button onclick="openStoryReader(1)" class="btn-paper-outline px-4 py-2 text-xs">Продолжить с 18%</button>
+              </div>
+            </div>
           </div>
-          <ul class="space-y-2.5 text-sm">
-            <li>✓ &nbsp;Все доступные записанные видеоадаптации («После полуночи», «Кофе после дождя» и др.)</li>
-            <li>✓ &nbsp;Новые видеоверсии по мере выхода</li>
-            <li>✓ &nbsp;Полные тексты — всегда бесплатно и без подписки</li>
-          </ul>
-          <div class="pt-2 flex flex-wrap items-center gap-3">
-            <button onclick="setVideoAccess(true);openStoryReaderAndScrollVideo(0);" class="btn-wine px-6 py-3 text-sm">
+        </section>
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 7: ИЗБРАННОЕ (Figma Frame 12:315383)                         -->
+        <!-- =================================================================== -->
+        <section id="screen-favorites" class="hidden space-y-8">
+          <div class="space-y-3 pb-6 border-b hairline">
+            <div class="kicker">СОХРАНЁННОЕ ДЛЯ ВДОХНОВЕНИЯ</div>
+            <h1 class="font-serif-ed text-5xl font-normal">К этому<br />хочется вернуться.</h1>
+            <p class="text-sm meta max-w-xl">Истории, видео и AI герои — три отдельные коллекции.</p>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-7">
+            <div class="surface-box p-6 space-y-3">
+              <div class="kicker">РОМАНТИЧЕСКАЯ ПРОЗА · 3 мин</div>
+              <h3 class="font-serif-ed text-3xl font-normal">После полуночи</h3>
+              <p class="text-xs meta">Опоздав на последний трамвай, двое решают не торопить утро.</p>
+              <button onclick="openStoryReader(0)" class="text-xs text-[#793C49] hover:underline">Читать историю →</button>
+            </div>
+            <div class="surface-box p-6 space-y-3">
+              <div class="kicker">В КОЛЛЕКЦИИ</div>
+              <p class="text-xs meta">Истории · 2<br/>Видео · 1 («После полуночи», 08:40)<br/>AI герои · 1 (Инга, 32)</p>
+            </div>
+          </div>
+        </section>
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 8: ДИАЛОГИ С AI + ВИДЕОДИАЛОГ (12:321943 & 12:322342)        -->
+        <!-- =================================================================== -->
+        <section id="screen-ai_chat" class="hidden space-y-8">
+          <div class="flex flex-wrap items-center justify-between gap-4 pb-6 border-b hairline">
+            <div class="flex items-center gap-4">
+              <img src="/assets/between-1323/ai_lev.jpg" alt="Лев" class="w-14 h-14 rounded-full object-cover border hairline" />
+              <div>
+                <div class="kicker">ВЫМЫШЛЕННЫЙ ВЗРОСЛЫЙ · AI · ЛИЧНАЯ ВЕРСИЯ</div>
+                <h1 class="font-serif-ed text-3xl font-normal">Лев, 36 · Архитектор</h1>
+              </div>
+            </div>
+            <div class="flex gap-2">
+              <button onclick="document.getElementById('aiAvatarBox').classList.add('hidden')" class="btn-paper-outline px-3.5 py-2 text-xs">Текстовый диалог</button>
+              <button onclick="document.getElementById('aiAvatarBox').classList.remove('hidden')" class="btn-wine px-3.5 py-2 text-xs">AI видеодиалог (Аватар)</button>
+            </div>
+          </div>
+
+          <div id="aiAvatarBox" class="hidden relative rounded-[6px] overflow-hidden aspect-video max-w-2xl bg-[#211A18] text-white p-6 flex flex-col justify-between">
+            <img src="/assets/between-1323/ai_lev.jpg" alt="Лев AI аватар" class="absolute inset-0 w-full h-full object-cover brightness-75" />
+            <div class="relative z-10 flex justify-between text-xs text-white/80">
+              <span>AI ВИДЕОДИАЛОГ · Лев, 36 (AI аватар)</span>
+              <span>Камера пользователя: Выкл.</span>
+            </div>
+            <div class="relative z-10 bg-black/55 backdrop-blur-sm p-4 rounded max-w-md">
+              <p class="font-serif-ed italic text-lg">«Кажется, дождь решил задержать нас здесь. Я не против. А ты?»</p>
+            </div>
+          </div>
+
+          <div class="surface-box p-6 max-w-2xl space-y-4">
+            <div id="chatThread" class="space-y-3">
+              <div class="p-4 rounded bg-[#F5F0E8] max-w-md space-y-1">
+                <div class="text-[11px] meta">19:41 · Лев · AI</div>
+                <p class="text-xs">Кажется, дождь решил задержать нас здесь. Я не против. А ты?</p>
+              </div>
+              <div class="p-4 rounded bg-[#F3E8EA] ml-auto max-w-md space-y-1">
+                <div class="text-[11px] text-[#793C49]">19:41 · Вы</div>
+                <p class="text-xs">Если кофе хороший — я тоже. Часто сюда заходишь?</p>
+              </div>
+              <div class="p-4 rounded bg-[#F5F0E8] max-w-md space-y-1">
+                <div class="text-[11px] meta">19:42 · Лев · AI</div>
+                <p class="text-xs">Когда хочется замедлиться. Здесь никто не торопит, а бариста запоминает любимый кофе. Что заказать тебе?</p>
+              </div>
+            </div>
+            <form onsubmit="sendChat(event)" class="flex gap-2 pt-3 border-t hairline">
+              <input id="chatInp" type="text" placeholder="Написать Льву…" class="flex-1 px-3.5 py-2 rounded border hairline bg-[#F5F0E8] text-xs outline-none" />
+              <button type="submit" class="btn-wine px-4 py-2 text-xs">Отправить</button>
+            </form>
+          </div>
+        </section>
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 9: МОИ AI / СОЗДАТЬ ГЕРОЯ / ЛИЧНОЕ / ПОДПИСКА / НАСТРОЙКИ     -->
+        <!-- =================================================================== -->
+        <section id="screen-my_ai" class="hidden space-y-6">
+          <div class="kicker">ЛИЧНЫЕ КОНФИГУРАЦИИ · AI</div>
+          <h1 class="font-serif-ed text-5xl font-normal">Мои AI</h1>
+          <div class="surface-box p-6 max-w-xl flex items-center justify-between gap-4">
+            <div class="flex items-center gap-4">
+              <img src="/assets/between-1323/ai_lev.jpg" alt="Лев" class="w-12 h-12 rounded-full object-cover" />
+              <div>
+                <div class="font-serif-ed text-2xl">Лев · моя версия</div>
+                <div class="text-xs meta">Спокойный темп · Вечерний город</div>
+              </div>
+            </div>
+            <button onclick="switchScreen('ai_chat')" class="btn-wine px-4 py-2 text-xs">Открыть диалог →</button>
+          </div>
+        </section>
+
+        <section id="screen-create_ai" class="hidden space-y-6">
+          <div class="kicker">КОНСТРУКТОР · 5 ШАГОВ</div>
+          <h1 class="font-serif-ed text-5xl font-normal">Создать своего героя</h1>
+          <div class="surface-box p-6 max-w-xl space-y-4">
+            <div class="flex gap-2 text-xs">
+              <span class="px-3 py-1 rounded bg-[#793C49] text-white">1 · Образ</span>
+              <span class="px-3 py-1 rounded border hairline">2 · Внешность</span>
+              <span class="px-3 py-1 rounded border hairline">3 · Характер</span>
+              <span class="px-3 py-1 rounded border hairline">4 · Голос</span>
+              <span class="px-3 py-1 rounded border hairline">5 · Проверка</span>
+            </div>
+            <div>
+              <label class="block text-xs meta mb-1">Имя героя (вымышленный взрослый 25+)</label>
+              <input type="text" value="Алекс, 32" class="w-full px-3 py-2 rounded border hairline bg-[#F5F0E8] text-xs" />
+            </div>
+            <div>
+              <label class="block text-xs meta mb-1">Характер и манера разговора</label>
+              <textarea rows="3" class="w-full px-3 py-2 rounded border hairline bg-[#F5F0E8] text-xs">Внимательный собеседник с мягкой иронией. Любит ночные прогулки и кинематограф.</textarea>
+            </div>
+            <button onclick="switchScreen('ai_chat')" class="btn-wine px-5 py-2.5 text-xs">Сохранить и начать диалог →</button>
+          </div>
+        </section>
+
+        <section id="screen-personal" class="hidden space-y-6">
+          <div class="kicker">ЛИЧНОЕ</div>
+          <h1 class="font-serif-ed text-5xl font-normal">Маленькие вещи, которые остаются.</h1>
+          <div class="surface-box p-6 max-w-xl space-y-2">
+            <div class="text-xs meta">Сохранённая строка · «После полуночи»</div>
+            <blockquote class="font-serif-ed italic text-2xl">«С этими тёплыми свёртками они стали похожи на людей, возвращавшихся из одного дома.»</blockquote>
+          </div>
+        </section>
+
+        <section id="screen-subscription" class="hidden space-y-8">
+          <div class="space-y-2">
+            <div class="kicker">ВИДЕОВЕРСИИ / ОТДЕЛЬНО ОТ ЧТЕНИЯ</div>
+            <h1 class="font-serif-ed text-5xl font-normal">Ещё один способ<br />почувствовать историю.</h1>
+            <p class="text-sm meta max-w-xl">Читайте все истории бесплатно. Подписка открывает только записанные видеоадаптации.</p>
+          </div>
+          <div class="surface-box p-8 max-w-xl space-y-5">
+            <div class="kicker">ОДИН ПЛАН · БИБЛИОТЕКА ВИДЕО</div>
+            <div class="font-serif-ed text-5xl">690 ₽ / месяц</div>
+            <ul class="text-xs space-y-2 meta">
+              <li>✓ Все доступные записанные видеоадаптации</li>
+              <li>✓ Новые видеоверсии по мере выхода</li>
+              <li>✓ Полные тексты — бесплатно и без подписки</li>
+            </ul>
+            <button onclick="setSubscriptionAccess(true);openStoryReaderAndScrollVideo(0)" class="btn-wine px-5 py-3 text-xs">
               Оформить подписку и открыть видео →
             </button>
-            <button onclick="openStoryReader(0)" class="btn-outline-editorial px-4 py-3 text-xs">
-              ← Вернуться к истории без оформления
-            </button>
           </div>
-        </div>
-      </section>
+        </section>
 
-      <!-- ===================================================================== -->
-      <!-- SCREEN 11: ВХОД (12:315832) & НАСТРОЙКИ (12:316253) & СОСТОЯНИЯ       -->
-      <!-- ===================================================================== -->
-      <section id="screen-login" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-6">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text">ВАШ АККАУНТ / 18+</div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl font-normal mt-1">Вернуться к своей странице.</h1>
-          <p class="text-sm meta-text mt-1">Войдите, чтобы проверить подписку и сохранить вашу библиотеку.</p>
-        </div>
-        <div class="surface-card p-7 max-w-md space-y-4">
-          <div>
-            <label class="block text-xs meta-text mb-1">Электронная почта</label>
-            <input type="email" value="anna@example.ru" class="w-full px-3.5 py-2 rounded border hairline-border bg-[var(--bg-paper)] text-sm" />
+        <section id="screen-login" class="hidden space-y-6">
+          <div class="kicker">ВАШ АККАУНТ / 18+</div>
+          <h1 class="font-serif-ed text-5xl font-normal">Вернуться к своей странице.</h1>
+          <div class="surface-box p-6 max-w-md space-y-4">
+            <div>
+              <label class="block text-xs meta mb-1">Электронная почта</label>
+              <input type="email" value="anna@example.ru" class="w-full px-3 py-2 rounded border hairline bg-[#F5F0E8] text-xs" />
+            </div>
+            <div>
+              <label class="block text-xs meta mb-1">Пароль</label>
+              <input type="password" value="••••••••••••" class="w-full px-3 py-2 rounded border hairline bg-[#F5F0E8] text-xs" />
+            </div>
+            <button onclick="setSubscriptionAccess(true);openStoryReaderAndScrollVideo(0)" class="btn-wine w-full py-2.5 text-xs">Войти</button>
           </div>
-          <div>
-            <label class="block text-xs meta-text mb-1">Пароль</label>
-            <input type="password" value="••••••••••••" class="w-full px-3.5 py-2 rounded border hairline-border bg-[var(--bg-paper)] text-sm" />
-          </div>
-          <label class="flex items-start gap-2 text-xs meta-text">
-            <input type="checkbox" checked class="mt-1" />
-            <span>Мне исполнилось 18 лет. Я согласна с условиями использования и политикой конфиденциальности.</span>
-          </label>
-          <div class="pt-2 flex gap-2">
-            <button onclick="setVideoAccess(true);openStoryReaderAndScrollVideo(0)" class="btn-wine flex-1 py-2.5 text-xs">Войти и вернуться к истории</button>
-          </div>
-        </div>
-      </section>
+        </section>
 
-      <section id="screen-settings" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-6">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text">АККАУНТ И ВАШ КОМФОРТ</div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl font-normal mt-1">Настроить свой ритм.</h1>
-        </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl">
-          <div class="surface-card p-6 space-y-4">
-            <h3 class="font-serif-editorial text-2xl font-medium">Чтение</h3>
-            <p class="text-xs meta-text">
-              Шрифт: Cormorant Garamond. Размер текста на компьютере — 20 px, на телефоне — 18 px. Межстрочный интервал — 32 / 29 px.
-            </p>
-            <div class="flex items-center gap-3">
-              <button onclick="changeFontSize(-2)" class="btn-outline-editorial px-3 py-1.5 text-xs">А−</button>
-              <span class="text-xs font-medium">20 px</span>
-              <button onclick="changeFontSize(2)" class="btn-outline-editorial px-3 py-1.5 text-xs">А+</button>
+        <section id="screen-settings" class="hidden space-y-6">
+          <div class="kicker">АККАУНТ И ВАШ КОМФОРТ</div>
+          <h1 class="font-serif-ed text-5xl font-normal">Настроить свой ритм.</h1>
+          <div class="surface-box p-6 max-w-xl space-y-4">
+            <div class="font-serif-ed text-2xl">Чтение</div>
+            <p class="text-xs meta">Шрифт: Cormorant Garamond. Размер текста на компьютере — 20 px, межстрочный интервал — 32 px.</p>
+            <div class="flex items-center gap-2">
+              <button onclick="adjustFontSize(-2)" class="btn-paper-outline px-3 py-1.5 text-xs">А−</button>
+              <span id="settingsFontLbl" class="text-xs px-2">20 px</span>
+              <button onclick="adjustFontSize(2)" class="btn-paper-outline px-3 py-1.5 text-xs">А+</button>
             </div>
           </div>
-          <div class="surface-card p-6 space-y-4">
-            <h3 class="font-serif-editorial text-2xl font-medium">Приватность и доступность</h3>
-            <label class="flex items-center gap-2 text-xs"><input type="checkbox" checked /> Сохранять позицию чтения (42%)</label>
-            <label class="flex items-center gap-2 text-xs"><input type="checkbox" checked /> Субтитры для видеоверсий</label>
-            <label class="flex items-center gap-2 text-xs"><input type="checkbox" onchange="toggleThemeNoir()" /> Вечерняя тема NOIR (#10121A)</label>
-          </div>
-        </div>
-      </section>
+        </section>
 
-      <section id="screen-states" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-6">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text">ДОСКА СОСТОЯНИЙ И СПЕЦИФИКАЦИЯ FIGMA (12:317745 & 12:316744)</div>
-          <h1 class="font-serif-editorial text-4xl font-normal mt-1">Разные причины. Ясный следующий шаг.</h1>
-        </div>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
-          <div class="surface-card p-5 space-y-1.5">
-            <div class="wine-text font-semibold uppercase">01 / Палитра CHAPTER</div>
-            <p class="meta-text">Бумага <code>#F5F0E8</code> · Поверхность <code>#FFFDFA</code> · Текст <code>#24211D</code> · Мета <code>#686158</code> · Вино <code>#793C49</code></p>
+        <section id="screen-states" class="hidden space-y-6">
+          <div class="kicker">ИЗОБРАЖЁННЫЕ СОСТОЯНИЯ</div>
+          <h1 class="font-serif-ed text-5xl font-normal">Разные причины.<br />Ясный следующий шаг.</h1>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
+            <div class="surface-box p-5 space-y-1">
+              <div class="kicker">ОФОРМЛЕНИЕ · УСПЕХ</div>
+              <div class="font-serif-ed text-2xl">Подписка активна</div>
+              <p class="meta">Возврат к «После полуночи», в тот же блок видео. Позиция чтения 42% сохранена.</p>
+            </div>
+            <div class="surface-box p-5 space-y-1">
+              <div class="kicker">ПОДПИСКА ИСТЕКЛА</div>
+              <div class="font-serif-ed text-2xl">Период подписки закончился</div>
+              <p class="meta">Видео «После полуночи» закрыто. Рассказ остаётся бесплатным.</p>
+            </div>
           </div>
-          <div class="surface-card p-5 space-y-1.5">
-            <div class="wine-text font-semibold uppercase">02 / Оформление · Успех</div>
-            <p class="meta-text">Подписка активна. Возврат к «После полуночи», в тот же блок видео. Позиция чтения 42% сохранена.</p>
-          </div>
-          <div class="surface-card p-5 space-y-1.5">
-            <div class="wine-text font-semibold uppercase">03 / Подписка истекла</div>
-            <p class="meta-text">Видео «После полуночи» закрыто. Рассказ остаётся бесплатным.</p>
-          </div>
-        </div>
-      </section>
+        </section>
 
-    </main>
+      </main>
+    </div>
   </div>
 
-  <!-- Toast Notification -->
-  <div id="editorialToast" class="hidden fixed bottom-6 right-6 surface-card px-5 py-3 shadow-xl text-xs font-medium z-50">
-    🔖 Позиция чтения (42% · у моста) сохранена на вашей странице
-  </div>
+  <!-- Toast -->
+  <div id="toastMsg" class="hidden fixed bottom-6 right-6 surface-box px-4 py-2.5 shadow-lg text-xs z-50"></div>
 
   <script>
+    const SLUG = "between-1323";
     const STORIES = [
       {
         id: 0,
         genre: "Романтическая проза",
-        meta: "РОМАНТИЧЕСКАЯ ПРОЗА / 3 мин / 18+",
-        duration: "3 мин",
+        kicker: "РОМАНТИЧЕСКАЯ ПРОЗА · 3 мин",
+        readerKicker: "РОМАНТИЧЕСКАЯ ПРОЗА / 3 мин / 18+",
         timeCat: "short",
         mood: "night",
         hasVideo: true,
         videoDuration: "08:40",
+        img: `/assets/${SLUG}/story1.jpg`,
+        videoImg: `/assets/${SLUG}/video1.jpg`,
         title: "После полуночи",
-        characters: "Редакция «между.» · Вымышленные взрослые: Вера, 31 · Матвей, 34",
+        credits: "Редакция «между.» · Вымышленные взрослые: Вера, 31 · Матвей, 34",
         lead: "Опоздав на последний трамвай, двое решают не торопить утро. Рассказ о смелости остаться рядом.",
         quote: "«Вера услышала, как за поворотом стих последний трамвай. Город словно перевернул страницу.»",
         chapter: "I. После полуночи",
@@ -1212,119 +1028,127 @@
       {
         id: 1,
         genre: "Современная романтика",
-        meta: "СОВРЕМЕННАЯ РОМАНТИКА / 6 мин / 18+",
-        duration: "6 мин",
+        kicker: "СОВРЕМЕННАЯ РОМАНТИКА · 6 мин",
+        readerKicker: "СОВРЕМЕННАЯ РОМАНТИКА / 6 мин / 18+",
         timeCat: "long",
         mood: "warm",
         hasVideo: true,
         videoDuration: "11:20",
+        img: `/assets/${SLUG}/story2.jpg`,
+        videoImg: `/assets/${SLUG}/story2.jpg`,
         title: "Кофе после дождя",
-        characters: "Редакция «между.» · Вымышленные взрослые: Лида, 29 · Денис, 33",
+        credits: "Редакция «между.» · Вымышленные взрослые: Лида, 29 · Денис, 33",
         lead: "В маленьком кафе Лида и Денис учатся говорить о будущем, не загадывая его друг за друга.",
         quote: "«Кофе принесли в разных чашках. Лида решила, что это хороший знак: здесь не требовали совпадать.»",
         chapter: "I. Кофе после дождя",
         paragraphs: [
-          "Кофе принесли в разных чашках — одну широкую, с тонким золотым ободком, другую высокую, из тяжёлого тёплого фаянса. Лида решила, что это хороший знак: здесь не требовали совпадать.",
-          "За витриной шумел октябрьский ливень. Денис снял промокший шарф и положил его на спинку соседнего стула. Они знали друг друга три недели, но до сегодняшнего дня всегда встречались на ходу — между выставками, звонками и чужими компаниями.",
-          "— Знаешь, чего я боюсь в таких вечерах? — спросила Лида, согревая ладони о чашку. — Что кто-нибудь обязательно начнёт спрашивать про планы на пять лет вперёд.",
-          "— Тогда давай договоримся, — улыбнулся Денис. — Наше будущее сегодня заканчивается ровно в полночь. А дальше посмотрим, захочется ли его продлить.",
-          "Это сняло неловкость быстрее любого комплимента. Когда через час официант зажёг на столиках маленькие свечи, разговор уже шёл о том, какие окна в городе кажутся самыми уютными и почему в дождь так легко признаваться в желаниях."
+          "Кофе принесли в разных чашках — одну широкую, с тонким ободком, другую высокую, из тёплого фаянса. Лида решила, что это хороший знак: здесь не требовали совпадать.",
+          "За витриной Café Les Deux Amis шумел дождь. Денис снял промокший шарф и положил его на спинку стула. Впервые за месяц им не нужно было никуда спешить."
         ]
       },
       {
         id: 2,
         genre: "Проза о выборе",
-        meta: "ПРОЗА О ВЫБОРЕ / 8 мин / 18+",
-        duration: "8 мин",
+        kicker: "ПРОЗА О ВЫБОРЕ · 8 мин",
+        readerKicker: "ПРОЗА О ВЫБОРЕ / 8 мин / 18+",
         timeCat: "long",
         mood: "night",
         hasVideo: true,
         videoDuration: "14:10",
+        img: `/assets/${SLUG}/story3.jpg`,
+        videoImg: `/assets/${SLUG}/story3.jpg`,
         title: "Вечер в незнакомом городе",
-        characters: "Редакция «между.» · Вымышленные взрослые: Ася, 32 · Илья, 35 · Роман, 36",
+        credits: "Редакция «между.» · Вымышленные взрослые: Ася, 32 · Илья, 35 · Роман, 36",
         lead: "Три старых друга встречаются на один вечер. У каждого — свой маршрут, но одна общая история.",
         quote: "«Они встретились у гостиницы, которую никто из них не выбрал бы для себя. И потому всем было легко.»",
         chapter: "I. Вечер в незнакомом городе",
         paragraphs: [
-          "Они встретились у гостиницы, которую никто из них не выбрал бы для себя. И потому всем было легко. Чужой вокзал, влажный воздух северного города и три часа до ночного поезда создавали редкое чувство невесомости.",
-          "Ася смотрела, как Илья и Роман спорят о карте старого центра, и ловила себя на мысли, что за пять лет разлуки исчезла вся прежняя осторожность. Осталось только острое, почти осязаемое притяжение людей, которые слишком хорошо помнят друг друга."
+          "Они встретились у гостиницы, которую никто из них не выбрал бы для себя. И потому всем было легко. Тёплый свет люстры отражался в мокрых окнах холла."
         ]
       },
       {
         id: 3,
         genre: "Эпистолярная проза",
-        meta: "ЭПИСТОЛЯРНАЯ ПРОЗА / 4 мин / 18+",
-        duration: "4 мин",
+        kicker: "ЭПИСТОЛЯРНАЯ ПРОЗА · 4 мин",
+        readerKicker: "ЭПИСТОЛЯРНАЯ ПРОЗА / 4 мин / 18+",
         timeCat: "short",
         mood: "warm",
         hasVideo: false,
         videoDuration: "",
+        img: `/assets/${SLUG}/story4.jpg`,
+        videoImg: `/assets/${SLUG}/story4.jpg`,
         title: "Письмо, которое всё изменило",
-        characters: "Редакция «между.» · Вымышленные взрослые: Соня, 30 · Андрей, 34",
+        credits: "Редакция «между.» · Вымышленные взрослые: Соня, 30 · Андрей, 34",
         lead: "Соня возвращает непрочитанное письмо. Андрей предлагает начать не с объяснений, а с прогулки.",
         quote: "«Конверт пролежал в ящике стола почти год. Теперь Соня держала его так, словно это был билет в город, где она ещё не бывала.»",
         chapter: "I. Письмо",
         paragraphs: [
-          "Конверт пролежал в ящике стола почти год. Теперь Соня держала его так, словно это был билет в город, где она ещё не бывала. Бумага сохранила лёгкий запах табака и кедра.",
-          "Когда Андрей открыл дверь, он посмотрел на запечатанный конверт в её руке и не стал спрашивать, почему она не вскрыла его прошлой зимой. Он просто взял пальто с вешалки: «Пойдём к набережной. Прочитаешь вслух, если захочешь»."
+          "Конверт пролежал в ящике стола почти год. Теперь Соня держала его так, словно это был билет в город, где она ещё не бывала."
         ]
       }
     ];
 
-    let isSubscribed = false;
-    let isVideoPlaying = false;
-    let currentFontSize = 20;
-
-    const SCREEN_TITLES = {
+    const TITLES = {
       home: "Главная",
       catalog: "Истории",
       reader: "Истории / Чтение",
+      player: "Видео / После полуночи",
       videos: "Видео по историям",
       continue: "Продолжить чтение",
       favorites: "Избранное",
-      ai_heroes: "Другой формат · AI герои",
+      ai_heroes: "AI герои",
       ai_chat: "Диалоги / Лев · моя версия",
       my_ai: "Мои AI",
       create_ai: "Создать героя",
       personal: "Личное",
       subscription: "Подписка",
-      login: "Вход · 18+",
+      login: "Вход",
       settings: "Настройки",
       states: "Состояния интерфейса"
     };
 
-    function switchScreen(screenId) {
-      Object.keys(SCREEN_TITLES).forEach(k => {
+    let hasSub = false;
+    let fontSize = 20;
+
+    function switchScreen(id) {
+      Object.keys(TITLES).forEach(k => {
         const sec = document.getElementById('screen-' + k);
         if (sec) sec.classList.add('hidden');
         const nav = document.getElementById('nav-' + k);
         if (nav) nav.classList.remove('active');
       });
-      const target = document.getElementById('screen-' + screenId);
+      const target = document.getElementById('screen-' + id);
       if (target) target.classList.remove('hidden');
-      const activeNav = document.getElementById('nav-' + (screenId === 'reader' ? 'catalog' : screenId));
-      if (activeNav) activeNav.classList.add('active');
-      document.getElementById('topBreadcrumb').innerText = SCREEN_TITLES[screenId] || "Главная";
+      const navKey = (id === 'reader') ? 'catalog' : (id === 'player' ? 'videos' : id);
+      const navEl = document.getElementById('nav-' + navKey);
+      if (navEl) navEl.classList.add('active');
+      document.getElementById('topSectionTitle').innerText = TITLES[id] || "Главная";
       window.scrollTo({ top: 0, behavior: 'smooth' });
     }
 
     function renderCatalog(list) {
       const grid = document.getElementById('catalogGrid');
-      document.getElementById('catalogCountLabel').innerText = `${list.length} истории · Редакционный порядок`;
+      document.getElementById('catalogCountText').innerText = `${list.length} истории · Редакционный порядок`;
       grid.innerHTML = list.map(s => `
-        <article class="surface-card p-7 flex flex-col justify-between space-y-5">
-          <div class="space-y-3">
-            <div class="text-[11px] uppercase tracking-[0.12em] meta-text">${s.genre.toUpperCase()} · ${s.duration}</div>
-            <h3 class="font-serif-editorial text-3xl font-normal cursor-pointer hover:opacity-80" onclick="openStoryReader(${s.id})">${s.title}</h3>
-            <p class="text-sm meta-text leading-relaxed">${s.lead}</p>
-            <blockquote class="font-serif-editorial italic text-lg pt-3 border-t hairline-border">${s.quote}</blockquote>
+        <article class="space-y-3.5">
+          <div class="relative overflow-hidden rounded-[6px] aspect-[3/4] bg-[#DFDDD7] cursor-pointer" onclick="openStoryReader(${s.id})">
+            <img src="${s.img}" alt="${s.title}" class="w-full h-full object-cover hover:scale-[1.02] transition duration-500" />
+            <button onclick="event.stopPropagation();showToast('Добавлено в «Избранное»')" class="absolute top-3 right-3 w-8 h-8 rounded-[4px] bg-[#FFFDFA] border hairline flex items-center justify-center text-xs hover:bg-white">
+              🔖
+            </button>
           </div>
-          <div class="pt-4 border-t hairline-border flex items-center justify-between">
-            ${s.hasVideo
-              ? `<span class="wine-badge">🎬 Есть видео · по подписке (${s.videoDuration})</span>`
-              : `<span class="text-xs meta-text px-2.5 py-0.5 rounded border hairline-border">Пока только текст</span>`
-            }
-            <button onclick="openStoryReader(${s.id})" class="text-xs font-medium wine-text hover:underline">Читать историю →</button>
+          <div class="kicker pt-1">${s.kicker}</div>
+          <h3 class="font-serif-ed text-[28px] leading-[1.1] font-normal cursor-pointer hover:opacity-80" onclick="openStoryReader(${s.id})">
+            ${s.title}
+          </h3>
+          <p class="text-xs meta leading-relaxed">${s.lead}</p>
+          <blockquote class="font-serif-ed text-[18px] leading-[1.45] text-[#24211D]">${s.quote}</blockquote>
+          <div class="text-[11px] ${s.hasVideo ? 'text-[#24211D]' : 'meta'} pt-1">
+            ${s.hasVideo ? 'Есть видео · по подписке' : 'Пока только текст'}
+          </div>
+          <div class="flex items-center justify-between pt-1">
+            <button onclick="openStoryReader(${s.id})" class="text-xs text-[#793C49] hover:underline">Читать историю →</button>
+            <span class="text-xs meta">${s.hasVideo ? '🎬' : '📖'}</span>
           </div>
         </article>
       `).join('');
@@ -1346,125 +1170,107 @@
       renderCatalog(filtered);
     }
 
-    function openStoryReader(storyIdx) {
-      const s = STORIES[storyIdx] || STORIES[0];
-      document.getElementById('readerMetaCategory').innerText = s.meta;
+    function openStoryReader(idx) {
+      const s = STORIES[idx] || STORIES[0];
+      document.getElementById('readerKicker').innerText = s.readerKicker;
       document.getElementById('readerTitle').innerText = s.title;
       document.getElementById('readerLead').innerText = s.lead;
-      document.getElementById('readerCharacters').innerText = s.characters;
-      document.getElementById('readerChapterHeading').innerText = s.chapter;
-      document.getElementById('readerBodyParagraphs').innerHTML = s.paragraphs.map(p => `<p>${p}</p>`).join('');
-      document.getElementById('lockedStoryTitle').innerText = s.title;
-      document.getElementById('playerStoryTitle').innerText = s.title + " · Экранизация";
-      document.getElementById('lockedDuration').innerText = s.videoDuration || "08:40";
-      document.getElementById('lockedDurationSub').innerText = s.videoDuration || "08:40";
-      document.getElementById('playerDurationBadge').innerText = "02:16 / " + (s.videoDuration || "08:40");
+      document.getElementById('readerCredits').innerText = s.credits;
+      document.getElementById('readerCoverImg').src = s.img;
+      document.getElementById('readerChapterTitle').innerText = s.chapter;
+      document.getElementById('readerParagraphs').innerHTML = s.paragraphs.map(p => `<p>${p}</p>`).join('');
+      document.getElementById('videoPosterImg').src = s.videoImg;
+      document.getElementById('videoTitleUnlocked').innerText = s.title;
+      document.getElementById('videoDurationLocked').innerText = `Записанная экранизация · ${s.videoDuration || '08:40'}`;
+      document.getElementById('videoDurationUnlocked').innerText = `Записанная экранизация · ${s.videoDuration || '08:40'}`;
       switchScreen('reader');
     }
 
-    function openStoryReaderAndScrollVideo(storyIdx) {
-      openStoryReader(storyIdx);
+    function openStoryReaderAndScrollVideo(idx) {
+      openStoryReader(idx);
       setTimeout(() => {
-        const el = document.getElementById('endOfStoryVideoBlock');
+        const el = document.getElementById('endOfStoryVideo');
         if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
       }, 150);
     }
 
-    function setVideoAccess(unlocked) {
-      isSubscribed = unlocked;
-      const lockedCard = document.getElementById('videoLockedCard');
-      const unlockedCard = document.getElementById('videoUnlockedCard');
-      const bLock = document.getElementById('btnLockedState');
-      const bUnlock = document.getElementById('btnUnlockedState');
-      const mobSub = document.getElementById('mobSubBadge');
+    function setSubscriptionAccess(unlocked) {
+      hasSub = unlocked;
+      const img = document.getElementById('videoPosterImg');
+      const lockOv = document.getElementById('videoLockedOverlay');
+      const unlockOv = document.getElementById('videoUnlockedOverlay');
+      const bLock = document.getElementById('btnStateLocked');
+      const bUnlock = document.getElementById('btnStateUnlocked');
+      const pill = document.getElementById('subStatusPill');
+      const note = document.getElementById('videoFootnote');
+
+      document.querySelectorAll('.video-catalog-poster').forEach(el => {
+        if (unlocked) {
+          el.classList.remove('blur-xl', 'scale-105', 'brightness-50');
+          el.classList.add('brightness-75');
+        } else {
+          el.classList.add('blur-xl', 'scale-105', 'brightness-50');
+          el.classList.remove('brightness-75');
+        }
+      });
 
       if (unlocked) {
-        lockedCard.classList.add('hidden');
-        unlockedCard.classList.remove('hidden');
-        bUnlock.className = "px-2 py-0.5 rounded text-[11px] font-medium bg-[var(--accent-wine)] text-white";
-        bLock.className = "px-2 py-0.5 rounded text-[11px] font-medium meta-text hover:text-[var(--text-ink)]";
-        if (mobSub) mobSub.innerText = "Подписка: активна";
+        img.classList.remove('blur-xl', 'scale-105', 'brightness-50');
+        img.classList.add('brightness-75');
+        lockOv.classList.add('hidden');
+        unlockOv.classList.remove('hidden');
+        bUnlock.className = "px-2.5 py-1 rounded text-xs bg-[#793C49] text-white";
+        bLock.className = "btn-paper-outline px-2.5 py-1 text-xs";
+        pill.innerText = "Видео-доступ: Подписка активна ✓";
+        note.innerText = "Полный текст бесплатный. Подписка открывает только видеоверсии. Видео не запускается автоматически.";
       } else {
-        lockedCard.classList.remove('hidden');
-        unlockedCard.classList.add('hidden');
-        bLock.className = "px-2 py-0.5 rounded text-[11px] font-medium bg-[var(--accent-wine)] text-white";
-        bUnlock.className = "px-2 py-0.5 rounded text-[11px] font-medium meta-text hover:text-[var(--text-ink)]";
-        if (mobSub) mobSub.innerText = "Подписка: выкл";
+        img.classList.add('blur-xl', 'scale-105', 'brightness-50');
+        img.classList.remove('brightness-75');
+        lockOv.classList.remove('hidden');
+        unlockOv.classList.add('hidden');
+        bLock.className = "px-2.5 py-1 rounded text-xs bg-[#793C49] text-white";
+        bUnlock.className = "btn-paper-outline px-2.5 py-1 text-xs";
+        pill.innerText = "Видео-доступ: Без подписки (переключить)";
+        note.innerText = "Полный текст бесплатный. Подписка открывает только видеоверсии. 690 ₽ / месяц · продлевается автоматически. Условия — до оформления.";
       }
     }
 
-    function toggleSubscriptionState() {
-      setVideoAccess(!isSubscribed);
+    function toggleSubscriptionAccess() {
+      setSubscriptionAccess(!hasSub);
     }
 
-    function toggleVideoPlayback() {
-      isVideoPlaying = !isVideoPlaying;
-      document.getElementById('playPauseCircle').innerText = isVideoPlaying ? "⏸" : "▶";
-      document.getElementById('playPauseTextBtn').innerText = isVideoPlaying ? "⏸ Пауза" : "▶ Воспроизвести";
-      document.getElementById('videoStateNote').innerText = isVideoPlaying
-        ? "Идёт воспроизведение экранизации · Звук включён"
-        : "На паузе · Позиция чтения 42% сохранена";
-      document.getElementById('videoProgressBar').style.width = isVideoPlaying ? "64%" : "28%";
+    function adjustFontSize(delta) {
+      fontSize = Math.max(16, Math.min(26, fontSize + delta));
+      document.documentElement.style.setProperty('--reading-size', fontSize + 'px');
+      document.documentElement.style.setProperty('--reading-lh', Math.round(fontSize * 1.6) + 'px');
+      const lbl = document.getElementById('settingsFontLbl');
+      if (lbl) lbl.innerText = fontSize + ' px';
     }
 
-    function scrubVideo(e) {
-      const rect = e.currentTarget.getBoundingClientRect();
-      const pct = Math.max(5, Math.min(98, Math.round(((e.clientX - rect.left) / rect.width) * 100)));
-      document.getElementById('videoProgressBar').style.width = pct + "%";
-    }
-
-    function changeFontSize(delta) {
-      currentFontSize = Math.max(16, Math.min(26, currentFontSize + delta));
-      document.documentElement.style.setProperty('--reading-size', currentFontSize + 'px');
-      document.documentElement.style.setProperty('--reading-lh', Math.round(currentFontSize * 1.6) + 'px');
-      const ind = document.getElementById('fontSizeIndicator');
-      if (ind) ind.innerText = currentFontSize + ' px';
-    }
-
-    function toggleBookmarkToast() {
-      const t = document.getElementById('editorialToast');
-      t.classList.remove('hidden');
-      setTimeout(() => t.classList.add('hidden'), 3000);
-    }
-
-    function toggleAiVideoMode(showVideo) {
-      const box = document.getElementById('aiVideoCallBox');
-      const bText = document.getElementById('chatModeTextBtn');
-      const bVid = document.getElementById('chatModeVideoBtn');
-      if (showVideo) {
-        box.classList.remove('hidden');
-        bVid.className = "btn-wine px-3.5 py-1.5 text-xs";
-        bText.className = "btn-outline-editorial px-3.5 py-1.5 text-xs";
-      } else {
-        box.classList.add('hidden');
-        bText.className = "btn-wine px-3.5 py-1.5 text-xs";
-        bVid.className = "btn-outline-editorial px-3.5 py-1.5 text-xs";
-      }
-    }
-
-    function sendAiChatMessage(e) {
+    function sendChat(e) {
       e.preventDefault();
-      const inp = document.getElementById('aiChatInput');
-      const val = inp.value.trim();
-      if (!val) return;
-      const list = document.getElementById('chatMessagesList');
-      list.innerHTML += `
-        <div class="p-4 rounded-md bg-[var(--accent-wine-soft)] ml-auto max-w-lg space-y-1">
-          <div class="text-[11px] wine-text">Сейчас · Вы · Доставлено ✓✓</div>
-          <p class="text-sm">${val}</p>
+      const inp = document.getElementById('chatInp');
+      const v = inp.value.trim();
+      if (!v) return;
+      const th = document.getElementById('chatThread');
+      th.innerHTML += `
+        <div class="p-4 rounded bg-[#F3E8EA] ml-auto max-w-md space-y-1">
+          <div class="text-[11px] text-[#793C49]">Сейчас · Вы</div>
+          <p class="text-xs">${v}</p>
         </div>
-        <div class="subtle-box p-4 max-w-lg space-y-1">
-          <div class="text-[11px] meta-text">Сейчас · Лев · AI</div>
-          <p class="text-sm">Мне нравится, как ты это замечаешь. Давай возьмём ещё по чашке кофе и никуда не будем спешить.</p>
+        <div class="p-4 rounded bg-[#F5F0E8] max-w-md space-y-1">
+          <div class="text-[11px] meta">Сейчас · Лев · AI</div>
+          <p class="text-xs">Мне нравится, как ты это замечаешь. Давай возьмём ещё по чашке кофе и никуда не будем торопиться.</p>
         </div>
       `;
       inp.value = '';
     }
 
-    function toggleThemeNoir() {
-      document.body.classList.toggle('theme-noir');
-      const isNoir = document.body.classList.contains('theme-noir');
-      document.getElementById('themeSwitchBtn').innerText = isNoir ? "NOIR (#10121A)" : "CHAPTER (Бумага)";
+    function showToast(msg) {
+      const t = document.getElementById('toastMsg');
+      t.innerText = msg;
+      t.classList.remove('hidden');
+      setTimeout(() => t.classList.add('hidden'), 2800);
     }
 
     document.addEventListener('DOMContentLoaded', () => {
diff --git a/frontend/src/features/PreviewDev.html b/frontend/src/features/PreviewDev.html
index ef07098..3547d92 100644
--- a/frontend/src/features/PreviewDev.html
+++ b/frontend/src/features/PreviewDev.html
@@ -6,1191 +6,1007 @@
   <title>между. — CHAPTER / Литературный журнал о близости 18+</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
     :root {
       --bg-paper: #F5F0E8;
       --bg-surface: #FFFDFA;
-      --bg-subtle: #EAE2D6;
       --text-ink: #24211D;
       --text-meta: #686158;
       --border-hairline: #D8CFC3;
-      --border-warm: #D6B39B;
       --accent-wine: #793C49;
-      --accent-wine-hover: #612E39;
-      --accent-wine-soft: #F3E8EA;
-      --video-dark: #211A18;
-      --video-surface: #29241F;
+      --accent-wine-hover: #632F3B;
       --reading-size: 20px;
       --reading-lh: 32px;
     }
-    body.theme-noir {
-      --bg-paper: #10121A;
-      --bg-surface: #1C2030;
-      --bg-subtle: #252B3D;
-      --text-ink: #F6F7F2;
-      --text-meta: #B9C0D0;
-      --border-hairline: #2E364B;
-      --border-warm: #3E4760;
-      --accent-wine: #C9F26F;
-      --accent-wine-hover: #B5E055;
-      --accent-wine-soft: rgba(201, 242, 111, 0.12);
-    }
     body {
       background-color: var(--bg-paper);
       color: var(--text-ink);
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-      font-size: 16px;
+      font-size: 15px;
       line-height: 1.55;
-      transition: background-color 0.25s ease, color 0.25s ease;
       margin: 0;
+      padding: 0;
+      -webkit-font-smoothing: antialiased;
     }
-    .font-serif-editorial {
+    .font-serif-ed {
       font-family: 'Cormorant Garamond', Georgia, serif;
     }
-    .reading-prose p {
-      font-family: 'Cormorant Garamond', Georgia, serif;
-      font-size: var(--reading-size);
-      line-height: var(--reading-lh);
-      color: var(--text-ink);
-      margin-bottom: 1.45em;
-    }
-    .hairline-border {
+    .hairline {
       border-color: var(--border-hairline);
     }
-    .surface-card {
+    .surface-box {
       background-color: var(--bg-surface);
       border: 1px solid var(--border-hairline);
       border-radius: 6px;
     }
-    .subtle-box {
-      background-color: var(--bg-subtle);
-      border: 1px solid var(--border-hairline);
-      border-radius: 6px;
-    }
     .btn-wine {
       background-color: var(--accent-wine);
       color: #FFFDFA;
-      border-radius: 6px;
+      border-radius: 4px;
+      font-size: 13px;
       font-weight: 500;
-      transition: all 0.18s ease;
-    }
-    body.theme-noir .btn-wine {
-      color: #10121A;
-      font-weight: 600;
+      transition: background-color 0.15s ease;
     }
     .btn-wine:hover {
       background-color: var(--accent-wine-hover);
     }
-    .btn-outline-editorial {
+    .btn-paper-outline {
       background-color: var(--bg-surface);
       color: var(--text-ink);
       border: 1px solid var(--border-hairline);
-      border-radius: 6px;
-      transition: all 0.18s ease;
-    }
-    .btn-outline-editorial:hover {
-      border-color: var(--accent-wine);
-    }
-    .nav-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 7px 10px;
-      border-radius: 5px;
-      font-size: 14px;
-      color: var(--text-meta);
-      cursor: pointer;
-      transition: all 0.15s ease;
-      text-align: left;
-      width: 100%;
-    }
-    .nav-item:hover {
-      color: var(--text-ink);
-      background-color: rgba(121, 60, 73, 0.06);
-    }
-    .nav-item.active {
-      color: var(--text-ink);
-      font-weight: 600;
-      background-color: var(--accent-wine-soft);
-    }
-    .nav-item.active::before {
-      content: "•";
-      color: var(--accent-wine);
-      font-weight: bold;
-      margin-right: 2px;
-    }
-    .meta-text {
-      color: var(--text-meta);
-    }
-    .wine-text {
-      color: var(--accent-wine);
-    }
-    .wine-badge {
-      background-color: var(--accent-wine-soft);
-      color: var(--accent-wine);
-      border: 1px solid rgba(121, 60, 73, 0.22);
       border-radius: 4px;
-      padding: 2px 8px;
-      font-size: 12px;
+      font-size: 13px;
+      font-weight: 500;
+      transition: border-color 0.15s ease;
+    }
+    .btn-paper-outline:hover {
+      border-color: var(--text-ink);
+    }
+    .sidebar-link {
+      display: block;
+      width: 100%;
+      text-align: left;
+      padding: 5px 0;
+      font-size: 14px;
+      color: var(--text-ink);
+      transition: color 0.15s ease;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+    }
+    .sidebar-link:hover {
+      color: var(--accent-wine);
+    }
+    .sidebar-link.active {
+      color: var(--accent-wine);
       font-weight: 500;
     }
-    /* Atmospheric blurred cinema frame for locked video adaptation */
-    .cinema-poster-locked {
-      background:
-        radial-gradient(circle at 72% 38%, rgba(214, 179, 155, 0.42), transparent 45%),
-        radial-gradient(circle at 28% 70%, rgba(121, 60, 73, 0.55), transparent 55%),
-        linear-gradient(135deg, #201A18 0%, #382927 50%, #1B1615 100%);
-      position: relative;
-      overflow: hidden;
+    .sidebar-link.active::before {
+      content: "•  ";
+      color: var(--accent-wine);
     }
-    .cinema-poster-locked::after {
-      content: "";
-      position: absolute;
-      inset: 0;
-      backdrop-filter: blur(14px);
-      background: rgba(32, 26, 24, 0.38);
+    .reading-column p {
+      font-family: 'Cormorant Garamond', Georgia, serif;
+      font-size: var(--reading-size);
+      line-height: var(--reading-lh);
+      color: var(--text-ink);
+      margin-bottom: 1.55em;
     }
-    .cinema-player-unlocked {
-      background:
-        radial-gradient(circle at 68% 32%, rgba(214, 179, 155, 0.28), transparent 45%),
-        radial-gradient(circle at 30% 65%, rgba(121, 60, 73, 0.35), transparent 55%),
-        linear-gradient(160deg, #211A18 0%, #2E2320 55%, #161210 100%);
+    .kicker {
+      font-size: 11px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--accent-wine);
+      font-weight: 500;
+    }
+    .meta {
+      color: var(--text-meta);
     }
   </style>
 </head>
-<body class="min-h-screen flex flex-col lg:flex-row">
+<body>
 
-  <!-- MOBILE HEADER (390px breakpoint from Figma) -->
-  <div class="lg:hidden flex items-center justify-between px-5 py-3.5 border-b hairline-border bg-[var(--bg-surface)] sticky top-0 z-30">
+  <!-- Mobile Top Header (<1024px) -->
+  <div class="lg:hidden flex items-center justify-between px-5 py-3.5 border-b hairline bg-[#F5F0E8] sticky top-0 z-30">
     <div class="flex items-baseline gap-2.5 cursor-pointer" onclick="switchScreen('home')">
-      <span class="font-serif-editorial text-2xl font-semibold tracking-tight">между.</span>
-      <span class="text-[11px] uppercase tracking-widest meta-text">CHAPTER / 18+</span>
-    </div>
-    <div class="flex items-center gap-2">
-      <button onclick="toggleSubscriptionState()" id="mobSubBadge" class="text-[11px] px-2.5 py-1 rounded border hairline-border meta-text">
-        Подписка: выкл
-      </button>
-      <button onclick="document.getElementById('sidebarNav').classList.toggle('hidden')" class="px-3 py-1.5 rounded border hairline-border text-xs font-medium">
-        Меню · 18+
-      </button>
+      <span class="font-serif-ed text-2xl font-semibold">между.</span>
+      <span class="text-[10px] uppercase tracking-widest meta">CHAPTER / 18+</span>
     </div>
+    <button onclick="document.getElementById('leftSidebar').classList.toggle('hidden')" class="btn-paper-outline px-3 py-1.5 text-xs">
+      Меню · 18+
+    </button>
   </div>
 
-  <!-- LEFT SIDEBAR (Exact 232px width from Figma spec 12:317745) -->
-  <aside id="sidebarNav" class="hidden lg:flex flex-col justify-between w-full lg:w-[232px] lg:shrink-0 border-r hairline-border bg-[var(--bg-paper)] px-5 py-7 select-none lg:min-h-screen">
-    <div class="space-y-6">
-      <!-- Brand Header -->
-      <div class="cursor-pointer" onclick="switchScreen('home')">
-        <div class="font-serif-editorial text-[32px] leading-none font-semibold tracking-tight">между.</div>
-        <div class="text-[11px] uppercase tracking-[0.14em] meta-text mt-2 font-medium">CHAPTER / ЖУРНАЛ 18+</div>
-      </div>
+  <!-- Outer App Wrapper (Never on <body> so DEV moderation bar stays at the very top!) -->
+  <div class="min-h-screen flex flex-col lg:flex-row max-w-[1600px] mx-auto">
 
-      <!-- Primary Literary Navigation -->
-      <nav class="space-y-1">
-        <button onclick="switchScreen('home')" id="nav-home" class="nav-item active">Главная</button>
-        <button onclick="switchScreen('catalog')" id="nav-catalog" class="nav-item">Истории</button>
-        <button onclick="switchScreen('videos')" id="nav-videos" class="nav-item">Видео по историям</button>
-        <button onclick="switchScreen('continue')" id="nav-continue" class="nav-item">Продолжить чтение</button>
-        <button onclick="switchScreen('favorites')" id="nav-favorites" class="nav-item">Избранное</button>
-      </nav>
-
-      <!-- Secondary AI Format Navigation (Figma section: ДРУГОЙ ФОРМАТ · AI) -->
-      <div class="pt-4 border-t hairline-border space-y-1">
-        <div class="px-2.5 pb-1.5 text-[10px] uppercase tracking-[0.14em] meta-text font-semibold">ДРУГОЙ ФОРМАТ · AI</div>
-        <button onclick="switchScreen('ai_heroes')" id="nav-ai_heroes" class="nav-item">AI герои</button>
-        <button onclick="switchScreen('ai_chat')" id="nav-ai_chat" class="nav-item">Диалоги</button>
-        <button onclick="switchScreen('my_ai')" id="nav-my_ai" class="nav-item">Мои AI</button>
-        <button onclick="switchScreen('create_ai')" id="nav-create_ai" class="nav-item">Создать героя</button>
-        <button onclick="switchScreen('personal')" id="nav-personal" class="nav-item">Личное</button>
-      </div>
-
-      <!-- Account & Settings Navigation -->
-      <div class="pt-4 border-t hairline-border space-y-1">
-        <button onclick="switchScreen('subscription')" id="nav-subscription" class="nav-item">Подписка</button>
-        <button onclick="switchScreen('login')" id="nav-login" class="nav-item">Анна · Аккаунт</button>
-        <button onclick="switchScreen('settings')" id="nav-settings" class="nav-item">Настройки</button>
-        <button onclick="switchScreen('states')" id="nav-states" class="nav-item">Помощь · Состояния</button>
-      </div>
-    </div>
-
-    <!-- Bottom 18+ Editorial Note -->
-    <div class="pt-6 border-t hairline-border mt-8 space-y-3">
-      <div class="text-xs leading-relaxed meta-text">
-        <strong class="font-medium text-[var(--text-ink)] block mb-0.5">Только для взрослых 18+</strong>
-        Истории о чувствах и близости.
-      </div>
-      <div class="flex items-center justify-between text-[11px] meta-text pt-1">
-        <span>Тема Figma:</span>
-        <button onclick="toggleThemeNoir()" id="themeSwitchBtn" class="underline hover:text-[var(--text-ink)]">
-          CHAPTER (Бумага)
-        </button>
-      </div>
-    </div>
-  </aside>
-
-  <!-- MAIN EDITORIAL AREA (1440px Grid -> Remaining width with 48px desktop padding) -->
-  <div class="flex-1 flex flex-col min-w-0">
-
-    <!-- Top Section Bar (Полоса раздела + Поиск по журналу ⌘K + Interactive Subscription Toggle) -->
-    <header class="border-b hairline-border px-6 lg:px-12 py-3.5 flex flex-wrap items-center justify-between gap-4 bg-[var(--bg-paper)]">
-      <div class="flex items-center gap-3">
-        <span id="topBreadcrumb" class="text-xs font-medium tracking-wide uppercase meta-text">Главная</span>
-        <span class="meta-text opacity-40">·</span>
-        <button onclick="switchScreen('reader')" class="text-xs wine-text hover:underline font-medium">
-          📖 Открыть рассказ «После полуночи» + Видео ↓
-        </button>
-      </div>
-
-      <div class="flex flex-wrap items-center gap-3">
-        <!-- Quick Figma State Switcher for Founder Review -->
-        <div class="flex items-center gap-1.5 text-xs surface-card px-2.5 py-1">
-          <span class="meta-text text-[11px]">Режим видео в рассказах:</span>
-          <button onclick="setVideoAccess(false)" id="btnLockedState" class="px-2 py-0.5 rounded text-[11px] font-medium bg-[var(--accent-wine)] text-white">
-            🔒 Без подписки
-          </button>
-          <button onclick="setVideoAccess(true)" id="btnUnlockedState" class="px-2 py-0.5 rounded text-[11px] font-medium meta-text hover:text-[var(--text-ink)]">
-            🔓 Подписка активна (Плеер)
-          </button>
+    <!-- LEFT SIDEBAR (Exact 232px width from Figma 12:312192) -->
+    <aside id="leftSidebar" class="hidden lg:flex flex-col justify-between w-full lg:w-[232px] lg:shrink-0 border-r hairline px-7 py-8 bg-[#F5F0E8]">
+      <div class="space-y-8">
+        <!-- Brand Logo -->
+        <div class="cursor-pointer" onclick="switchScreen('home')">
+          <div class="font-serif-ed text-[34px] leading-none font-semibold tracking-tight text-[#24211D]">между.</div>
+          <div class="text-[10px] uppercase tracking-[0.12em] meta mt-3">CHAPTER / ЖУРНАЛ 18+</div>
         </div>
 
-        <!-- Search Trigger (Поиск по журналу ⌘K from Figma) -->
-        <div class="surface-card px-3 py-1.5 flex items-center gap-3 text-xs meta-text">
-          <span>Поиск по журналу</span>
-          <kbd class="text-[10px] px-1.5 py-0.5 rounded border hairline-border">⌘ K</kbd>
+        <!-- Primary Navigation -->
+        <nav class="space-y-1.5">
+          <button onclick="switchScreen('home')" id="nav-home" class="sidebar-link active">Главная</button>
+          <button onclick="switchScreen('catalog')" id="nav-catalog" class="sidebar-link">Истории</button>
+          <button onclick="switchScreen('videos')" id="nav-videos" class="sidebar-link">Видео по историям</button>
+          <button onclick="switchScreen('continue')" id="nav-continue" class="sidebar-link">Продолжить чтение</button>
+          <button onclick="switchScreen('favorites')" id="nav-favorites" class="sidebar-link">Избранное</button>
+        </nav>
+
+        <!-- Secondary Format: AI -->
+        <div class="pt-5 border-t hairline space-y-1.5">
+          <div class="text-[10px] uppercase tracking-[0.12em] meta pb-1.5">ДРУГОЙ ФОРМАТ · AI</div>
+          <button onclick="switchScreen('ai_heroes')" id="nav-ai_heroes" class="sidebar-link">AI герои</button>
+          <button onclick="switchScreen('ai_chat')" id="nav-ai_chat" class="sidebar-link">Диалоги</button>
+          <button onclick="switchScreen('my_ai')" id="nav-my_ai" class="sidebar-link">Мои AI</button>
+          <button onclick="switchScreen('create_ai')" id="nav-create_ai" class="sidebar-link">Создать героя</button>
+          <button onclick="switchScreen('personal')" id="nav-personal" class="sidebar-link">Личное</button>
+        </div>
+
+        <!-- Account & Settings -->
+        <div class="pt-5 border-t hairline space-y-1.5">
+          <button onclick="switchScreen('subscription')" id="nav-subscription" class="sidebar-link" style="color:var(--accent-wine);">Подписка</button>
+          <button onclick="switchScreen('login')" id="nav-login" class="sidebar-link">Анна · Аккаунт</button>
+          <button onclick="switchScreen('settings')" id="nav-settings" class="sidebar-link">Настройки</button>
+          <button onclick="switchScreen('states')" id="nav-states" class="sidebar-link">Помощь</button>
+        </div>
+
+        <!-- 18+ Disclaimer -->
+        <div class="pt-5 border-t hairline text-[11px] leading-relaxed meta">
+          Только для взрослых 18+<br />
+          Истории о чувствах и близости.
         </div>
       </div>
-    </header>
+    </aside>
 
-    <!-- CONTENT CONTAINER (48px padding on desktop per Figma spec) -->
-    <main class="px-6 lg:px-12 py-8 lg:py-12 max-w-[1140px] w-full space-y-14">
+    <!-- MAIN PUBLICATION AREA (Область публикации) -->
+    <div class="flex-1 min-w-0 flex flex-col">
 
-      <!-- ===================================================================== -->
-      <!-- SCREEN 1: ГЛАВНАЯ (Figma Frame 12:312192 · Главная · десктоп 1440px)  -->
-      <!-- ===================================================================== -->
-      <section id="screen-home" class="space-y-12">
-        <!-- Editorial Hero -->
-        <div class="border-b hairline-border pb-10 space-y-4">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text font-medium">
-            ЛИТЕРАТУРНЫЙ ЖУРНАЛ О БЛИЗОСТИ · 18+
+      <!-- Top Section Bar (Полоса раздела: exact 56px height, hairline border) -->
+      <header class="h-14 border-b hairline px-6 lg:px-12 flex items-center justify-between text-xs">
+        <div id="topSectionTitle" class="text-[#24211D] font-normal">Главная</div>
+        <div class="flex items-center gap-6">
+          <!-- Interactive toggle for reviewing Locked vs Unlocked video in stories -->
+          <button onclick="toggleSubscriptionAccess()" id="subStatusPill" class="text-[11px] px-2.5 py-1 rounded border hairline meta hover:text-[#24211D] transition" title="Нажмите, чтобы переключить состояние подписки на видео (Закрыто ↔ Открыто)">
+            Видео-доступ: Без подписки (переключить)
+          </button>
+          <div class="flex items-center gap-2 meta cursor-pointer hover:text-[#24211D]" onclick="switchScreen('catalog')">
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke-width="1.7"/><path d="M20 20l-3.5-3.5" stroke-width="1.7" stroke-linecap="round"/></svg>
+            <span>Поиск по журналу</span>
+            <span class="text-[11px] opacity-75 ml-1">⌘ K</span>
           </div>
-          <h1 class="font-serif-editorial text-4xl sm:text-6xl lg:text-[64px] leading-[1.02] font-normal tracking-tight">
-            Между строк.<br />Ближе к чувствам.
-          </h1>
-          <p class="text-base sm:text-lg meta-text max-w-xl leading-relaxed pt-1">
-            Законченные истории для неспешного чтения.<br />
-            Сначала — слова. Потом, если захочется, — кино.
-          </p>
         </div>
+      </header>
 
-        <!-- Story of the Day (ИСТОРИЯ ДНЯ / 01 — После полуночи) -->
-        <div class="surface-card p-7 lg:p-10 grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
-          <div class="lg:col-span-7 space-y-4">
-            <div class="flex flex-wrap items-center gap-2.5">
-              <span class="text-xs uppercase tracking-[0.12em] wine-text font-semibold">ИСТОРИЯ ДНЯ / 01</span>
-              <span class="meta-text">·</span>
-              <span class="text-xs meta-text">Романтическая проза · 3 мин</span>
-              <span class="wine-badge">🎬 Есть видео · по подписке</span>
-            </div>
-            <h2 class="font-serif-editorial text-4xl sm:text-5xl leading-[1.05] font-normal cursor-pointer hover:opacity-80" onclick="openStoryReader(0)">
-              После полуночи
-            </h2>
-            <p class="text-base leading-relaxed">
-              Опоздав на последний трамвай, двое решают не торопить утро. Рассказ о смелости остаться рядом.
+      <!-- Main Content Container (48px desktop padding per Figma spec) -->
+      <main class="px-6 lg:px-12 py-10 lg:py-12 max-w-[1160px] w-full">
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 1: ГЛАВНАЯ (Exact match to Figma Frame 12:312192)            -->
+        <!-- =================================================================== -->
+        <section id="screen-home" class="space-y-14">
+
+          <!-- Hero Title Block -->
+          <div class="space-y-3">
+            <div class="kicker">ЛИТЕРАТУРНЫЙ ЖУРНАЛ О БЛИЗОСТИ · 18+</div>
+            <h1 class="font-serif-ed text-5xl sm:text-[64px] leading-[1.02] font-normal text-[#24211D]">
+              Между строк.<br />Ближе к чувствам.
+            </h1>
+            <p class="text-[15px] meta leading-relaxed pt-1">
+              Законченные истории для неспешного чтения.<br />
+              Сначала — слова. Потом, если захочется, — кино.
             </p>
-            <div class="text-xs meta-text">
-              Персонажи: Вера, 31 · Матвей, 34 &nbsp;|&nbsp; Видео-экранизация в конце текста: 08:40
-            </div>
-            <div class="pt-2 flex flex-wrap items-center gap-3">
-              <button onclick="openStoryReader(0)" class="btn-wine px-6 py-3 text-sm inline-flex items-center gap-2">
-                <span>Читать историю</span>
-                <span>→</span>
-              </button>
-              <button onclick="openStoryReaderAndScrollVideo(0)" class="btn-outline-editorial px-4 py-3 text-xs font-medium">
-                К видео-экранизации (08:40) ↓
-              </button>
-            </div>
           </div>
 
-          <div class="lg:col-span-5 subtle-box p-7 lg:p-8 flex flex-col justify-between min-h-[220px]">
-            <div class="text-[11px] uppercase tracking-widest meta-text">Цитата из рассказа</div>
-            <blockquote class="font-serif-editorial italic text-2xl sm:text-[26px] leading-snug my-4">
-              «Иногда достаточно опоздать, чтобы оказаться вовремя».
-            </blockquote>
-            <div class="text-xs meta-text flex items-center justify-between pt-3 border-t hairline-border">
-              <span>Полный текст бесплатный</span>
-              <span class="wine-text font-medium">Видео 08:40 после текста →</span>
+          <!-- ИСТОРИЯ ДНЯ / 01 (2-column layout directly on #F5F0E8 paper) -->
+          <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center pb-12 border-b hairline">
+            <div class="lg:col-span-5">
+              <div class="overflow-hidden rounded-[6px] aspect-[3/4] bg-[#DFDDD7] cursor-pointer" onclick="openStoryReader(0)">
+                <img src="/assets/between-1323/story1.jpg" alt="После полуночи" class="w-full h-full object-cover hover:scale-[1.02] transition duration-500" />
+              </div>
             </div>
-          </div>
-        </div>
-
-        <!-- Continue Reading Bookmark Widget (ВАША ЗАКЛАДКА · СЕГОДНЯ) -->
-        <div class="space-y-4">
-          <div class="flex items-center justify-between">
-            <h3 class="font-serif-editorial text-2xl font-medium">На вашей странице</h3>
-            <button onclick="switchScreen('continue')" class="text-xs wine-text hover:underline font-medium">Продолжить чтение →</button>
-          </div>
-          <div class="surface-card p-6 flex flex-col md:flex-row md:items-center justify-between gap-6">
-            <div class="space-y-1.5 max-w-2xl">
-              <div class="text-[11px] uppercase tracking-[0.12em] wine-text font-semibold">ВАША ЗАКЛАДКА · СЕГОДНЯ</div>
-              <div class="font-serif-editorial text-2xl font-medium">После полуночи</div>
-              <p class="text-sm meta-text">
-                Вы остановились у моста: <span class="italic text-[var(--text-ink)]">«На другой стороне реки им нужно было расстаться».</span>
+            <div class="lg:col-span-7 space-y-5 max-w-xl">
+              <div class="kicker">ИСТОРИЯ ДНЯ / 01</div>
+              <h2 class="font-serif-ed text-5xl sm:text-[56px] leading-[1.02] font-normal cursor-pointer hover:opacity-80" onclick="openStoryReader(0)">
+                После<br />полуночи
+              </h2>
+              <p class="text-[15px] meta leading-relaxed">
+                Опоздав на последний трамвай, двое решают не торопить утро. Рассказ о смелости остаться рядом.
               </p>
+              <div class="text-xs space-y-0.5 pt-1">
+                <div class="text-[#24211D] font-medium">Романтическая проза · 3 мин</div>
+                <div class="meta">Есть видео · по подписке</div>
+              </div>
+              <div class="pt-1">
+                <button onclick="openStoryReader(0)" class="btn-wine px-5 py-3 inline-flex items-center gap-2">
+                  <span>Читать историю</span>
+                  <span>→</span>
+                </button>
+              </div>
+              <blockquote class="font-serif-ed italic text-2xl leading-snug meta pt-2">
+                «Иногда достаточно опоздать,<br />чтобы оказаться вовремя».
+              </blockquote>
             </div>
-            <div class="flex flex-col sm:flex-row sm:items-center gap-4 shrink-0">
-              <div class="text-right">
-                <div class="text-xs font-medium">Прочитано 42%</div>
-                <div class="text-[11px] meta-text">Осталось 2 мин</div>
-                <div class="w-36 h-1.5 bg-[var(--bg-subtle)] rounded-full overflow-hidden mt-1.5">
-                  <div class="h-full bg-[var(--accent-wine)]" style="width: 42%"></div>
+          </div>
+
+          <!-- На вашей странице (ВАША ЗАКЛАДКА · СЕГОДНЯ) -->
+          <div class="space-y-5 pb-12 border-b hairline">
+            <div class="flex items-center justify-between">
+              <h3 class="font-serif-ed text-[28px] leading-tight font-normal">На вашей странице</h3>
+              <button onclick="switchScreen('continue')" class="text-xs text-[#793C49] hover:underline">Продолжить чтение →</button>
+            </div>
+
+            <div class="surface-box p-7 space-y-4">
+              <div class="kicker">ВАША ЗАКЛАДКА · СЕГОДНЯ</div>
+              <div class="font-serif-ed text-[28px] leading-tight font-normal">После полуночи</div>
+              <p class="text-xs meta">
+                Вы остановились у моста: «На другой стороне реки им нужно было расстаться».
+              </p>
+              <div class="space-y-1.5 pt-1">
+                <div class="flex items-center justify-between text-[11px] meta">
+                  <span>Прочитано 42%</span>
+                  <span>Осталось 2 мин</span>
+                </div>
+                <div class="w-full h-[2px] bg-[#D8CFC3] overflow-hidden">
+                  <div class="h-full bg-[#793C49]" style="width: 42%"></div>
                 </div>
               </div>
-              <button onclick="openStoryReader(0)" class="btn-outline-editorial px-4 py-2.5 text-xs font-medium">
-                Продолжить с 42% →
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Editorial Selection Grid (Выбор редакции — 3 stories) -->
-        <div class="space-y-5">
-          <div class="flex items-center justify-between border-b hairline-border pb-3">
-            <h3 class="font-serif-editorial text-3xl font-normal">Выбор редакции</h3>
-            <button onclick="switchScreen('catalog')" class="text-xs wine-text hover:underline font-medium">Все истории (4) →</button>
-          </div>
-
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <!-- Card 1: Кофе после дождя -->
-            <article class="surface-card p-6 flex flex-col justify-between space-y-5">
-              <div class="space-y-3">
-                <div class="text-[11px] uppercase tracking-[0.1em] meta-text">СОВРЕМЕННАЯ РОМАНТИКА · 6 мин</div>
-                <h4 class="font-serif-editorial text-2xl font-medium cursor-pointer hover:opacity-80" onclick="openStoryReader(1)">
-                  Кофе после дождя
-                </h4>
-                <p class="text-sm meta-text leading-relaxed">
-                  В маленьком кафе Лида и Денис учатся говорить о будущем, не загадывая его друг за друга.
-                </p>
-                <blockquote class="font-serif-editorial italic text-base pt-2 border-t hairline-border">
-                  «Кофе принесли в разных чашках. Лида решила, что это хороший знак: здесь не требовали совпадать.»
-                </blockquote>
-              </div>
-              <div class="pt-3 border-t hairline-border flex items-center justify-between">
-                <span class="wine-badge">🎬 Есть видео · 11:20</span>
-                <button onclick="openStoryReader(1)" class="text-xs font-medium wine-text hover:underline">Читать →</button>
-              </div>
-            </article>
-
-            <!-- Card 2: Вечер в незнакомом городе -->
-            <article class="surface-card p-6 flex flex-col justify-between space-y-5">
-              <div class="space-y-3">
-                <div class="text-[11px] uppercase tracking-[0.1em] meta-text">ПРОЗА О ВЫБОРЕ · 8 мин</div>
-                <h4 class="font-serif-editorial text-2xl font-medium cursor-pointer hover:opacity-80" onclick="openStoryReader(2)">
-                  Вечер в незнакомом городе
-                </h4>
-                <p class="text-sm meta-text leading-relaxed">
-                  Три старых друга встречаются на один вечер. У каждого — свой маршрут, но одна общая история.
-                </p>
-                <blockquote class="font-serif-editorial italic text-base pt-2 border-t hairline-border">
-                  «Они встретились у гостиницы, которую никто из них не выбрал бы для себя. И потому всем было легко.»
-                </blockquote>
-              </div>
-              <div class="pt-3 border-t hairline-border flex items-center justify-between">
-                <span class="wine-badge">🎬 Есть видео · 14:10</span>
-                <button onclick="openStoryReader(2)" class="text-xs font-medium wine-text hover:underline">Читать →</button>
-              </div>
-            </article>
-
-            <!-- Card 3: Письмо, которое всё изменило -->
-            <article class="surface-card p-6 flex flex-col justify-between space-y-5">
-              <div class="space-y-3">
-                <div class="text-[11px] uppercase tracking-[0.1em] meta-text">ЭПИСТОЛЯРНАЯ ПРОЗА · 4 мин</div>
-                <h4 class="font-serif-editorial text-2xl font-medium cursor-pointer hover:opacity-80" onclick="openStoryReader(3)">
-                  Письмо, которое всё изменило
-                </h4>
-                <p class="text-sm meta-text leading-relaxed">
-                  Соня возвращает непрочитанное письмо. Андрей предлагает начать не с объяснений, а с прогулки.
-                </p>
-                <blockquote class="font-serif-editorial italic text-base pt-2 border-t hairline-border">
-                  «Конверт пролежал в ящике стола почти год. Теперь Соня держала его так, словно это был билет в город, где она ещё не бывала.»
-                </blockquote>
-              </div>
-              <div class="pt-3 border-t hairline-border flex items-center justify-between">
-                <span class="text-xs meta-text px-2 py-0.5 rounded border hairline-border">Пока только текст</span>
-                <button onclick="openStoryReader(3)" class="text-xs font-medium wine-text hover:underline">Читать →</button>
-              </div>
-            </article>
-          </div>
-        </div>
-      </section>
-
-      <!-- ===================================================================== -->
-      <!-- SCREEN 2: КАТАЛОГ ИСТОРИЙ (Figma 12:312704 + Node 12:312729 Filter)   -->
-      <!-- ===================================================================== -->
-      <section id="screen-catalog" class="hidden space-y-10">
-        <div class="border-b hairline-border pb-8 space-y-3">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text font-medium">
-            БИБЛИОТЕКА / ЗАКОНЧЕННАЯ ПРОЗА / 18+
-          </div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl lg:text-[56px] leading-[1.04] font-normal">
-            Истории, в которых<br />хочется остаться.
-          </h1>
-          <p class="text-base meta-text max-w-2xl leading-relaxed">
-            Романтика и эротическая литература — о внимании, выборе и близости. Литературные истории для взрослых, без грубых сцен. Полный текст каждой истории открыт.
-          </p>
-        </div>
-
-        <!-- Filter Bar (Exact Node 12:312729 from the user's Figma URL!) -->
-        <div class="flex flex-wrap items-center justify-between gap-4 pb-2">
-          <div class="flex flex-wrap items-center gap-2.5">
-            <select id="filterGenre" onchange="filterCatalog()" class="surface-card px-3.5 py-2 text-xs font-medium cursor-pointer outline-none">
-              <option value="all">Жанр: все ⌄</option>
-              <option value="Романтическая проза">Жанр: романтическая проза</option>
-              <option value="Современная романтика">Жанр: современная романтика</option>
-              <option value="Проза о выборе">Жанр: проза о выборе</option>
-              <option value="Эпистолярная проза">Жанр: эпистолярная проза</option>
-            </select>
-            <select id="filterMood" onchange="filterCatalog()" class="surface-card px-3.5 py-2 text-xs font-medium cursor-pointer outline-none">
-              <option value="all">Настроение: любое ⌄</option>
-              <option value="night">Ночной город и близость</option>
-              <option value="warm">Тёплый разговор</option>
-            </select>
-            <select id="filterTime" onchange="filterCatalog()" class="surface-card px-3.5 py-2 text-xs font-medium cursor-pointer outline-none">
-              <option value="all">Время: любое ⌄</option>
-              <option value="short">До 5 минут</option>
-              <option value="long">6–10 минут</option>
-            </select>
-            <select id="filterVideo" onchange="filterCatalog()" class="surface-card px-3.5 py-2 text-xs font-medium cursor-pointer outline-none">
-              <option value="all">Видео: все ⌄</option>
-              <option value="yes">Есть видео · по подписке</option>
-              <option value="text">Пока только текст</option>
-            </select>
-          </div>
-          <div id="catalogCountLabel" class="text-xs meta-text">4 истории · Редакционный порядок</div>
-        </div>
-
-        <div id="catalogGrid" class="grid grid-cols-1 md:grid-cols-2 gap-6"></div>
-
-        <div class="subtle-box p-5 text-xs meta-text flex flex-wrap items-center justify-between gap-2">
-          <span>Не нужно подписываться, чтобы дочитать. Видео — отдельное продолжение знакомства с историей.</span>
-          <button onclick="switchScreen('videos')" class="wine-text font-medium hover:underline">Перейти к видеоадаптациям →</button>
-        </div>
-      </section>
-
-      <!-- ===================================================================== -->
-      <!-- SCREEN 3: ЧТЕНИЕ ПОЛНОЙ ИСТОРИИ + ВИДЕО В КОНЦЕ (12:313167 & 12:313889) -->
-      <!-- ===================================================================== -->
-      <section id="screen-reader" class="hidden space-y-10">
-        <!-- Reader Top Header & Controls -->
-        <div class="border-b hairline-border pb-8 max-w-[680px] space-y-4">
-          <div id="readerMetaCategory" class="text-xs uppercase tracking-[0.14em] wine-text font-semibold">
-            РОМАНТИЧЕСКАЯ ПРОЗА / 3 мин / 18+
-          </div>
-          <h1 id="readerTitle" class="font-serif-editorial text-4xl sm:text-5xl lg:text-[56px] leading-[1.04] font-normal">
-            После полуночи
-          </h1>
-          <p id="readerLead" class="text-base sm:text-lg meta-text leading-relaxed">
-            Опоздав на последний трамвай, двое решают не торопить утро. Рассказ о смелости остаться рядом.
-          </p>
-          <div id="readerCharacters" class="text-xs meta-text pt-1">
-            Редакция «между.» · Вымышленные взрослые: Вера, 31 · Матвей, 34
-          </div>
-
-          <!-- Reading Comfort Toolbar (А− / А+ / Закладка / Прочитано 42%) -->
-          <div class="pt-4 flex flex-wrap items-center justify-between gap-4 border-t hairline-border">
-            <div class="flex items-center gap-2">
-              <button onclick="changeFontSize(-2)" class="btn-outline-editorial px-3 py-1.5 text-xs font-medium">А−</button>
-              <span id="fontSizeIndicator" class="text-xs meta-text px-1">20 px</span>
-              <button onclick="changeFontSize(2)" class="btn-outline-editorial px-3 py-1.5 text-xs font-medium">А+</button>
-              <button onclick="toggleBookmarkToast()" id="bookmarkBtn" class="btn-outline-editorial px-3.5 py-1.5 text-xs font-medium ml-2">
-                🔖 Закладка
-              </button>
-            </div>
-            <div class="text-xs meta-text">
-              <strong class="text-[var(--text-ink)]">Прочитано 42%</strong> · Осталось 2 мин
-            </div>
-          </div>
-
-          <div class="subtle-box px-4 py-3 text-xs meta-text flex flex-wrap items-center justify-between gap-2">
-            <span>Сохранённая позиция — у моста, 42%.</span>
-            <a href="#endOfStoryVideoBlock" class="wine-text font-medium hover:underline">Видео по этой истории ↓ · после окончания текста</a>
-          </div>
-        </div>
-
-        <!-- 680px Literary Reading Column (Cormorant Garamond 20/32px per Figma spec) -->
-        <article class="max-w-[680px] reading-prose">
-          <h3 id="readerChapterHeading" class="font-serif-editorial text-2xl font-medium mb-6">I. После полуночи</h3>
-          <div id="readerBodyParagraphs"></div>
-
-          <div class="pt-6 pb-8 border-b hairline-border flex items-center justify-between text-xs uppercase tracking-[0.16em] meta-text">
-            <span>КОНЕЦ</span>
-            <span>Весь рассказ доступен без подписки · Позиция 42%</span>
-          </div>
-        </article>
-
-        <!-- =================================================================== -->
-        <!-- KEY PRODUCT FEATURE: VIDEO BLOCK AT THE END OF THE STORY            -->
-        <!-- Supports both Locked (12:313167) and Unlocked (12:313889 / 12:314274) -->
-        <!-- =================================================================== -->
-        <div id="endOfStoryVideoBlock" class="max-w-[680px] pt-2 space-y-6">
-          <div class="flex flex-wrap items-center justify-between gap-2">
-            <div>
-              <div class="text-xs uppercase tracking-[0.14em] wine-text font-semibold">ПРОДОЛЖЕНИЕ НА ЭКРАНЕ · 18+</div>
-              <h3 class="font-serif-editorial text-3xl font-normal mt-0.5">Видео по этой истории</h3>
-            </div>
-            <div class="flex items-center gap-1.5 text-xs">
-              <button onclick="setVideoAccess(false)" id="readerLockTab" class="px-2.5 py-1 rounded border hairline-border text-xs">
-                Состояние: Закрыто
-              </button>
-              <button onclick="setVideoAccess(true)" id="readerUnlockTab" class="px-2.5 py-1 rounded border hairline-border text-xs">
-                Состояние: Открыто (Плеер)
-              </button>
-            </div>
-          </div>
-
-          <!-- STATE A: VIDEO LOCKED (Figma 12:313167 · Полная история · видео закрыто) -->
-          <div id="videoLockedCard" class="surface-card overflow-hidden">
-            <div class="cinema-poster-locked h-64 sm:h-72 flex flex-col items-center justify-center p-6 text-center relative">
-              <div class="relative z-10 max-w-md space-y-3 text-[#FFFDFA]">
-                <span class="inline-block px-3 py-1 rounded bg-black/45 border border-white/20 text-[11px] uppercase tracking-widest">
-                  🔒 Доступно по подписке · <span id="lockedDuration">08:40</span>
-                </span>
-                <div id="lockedStoryTitle" class="font-serif-editorial text-3xl sm:text-4xl">После полуночи</div>
-                <p class="text-xs text-[#E9E1D6] leading-relaxed">
-                  Записанная кинематографичная экранизация финала истории. Тёплый свет ночной пекарни, мост через реку и продолжение вечера.
-                </p>
-              </div>
-            </div>
-            <div class="p-6 sm:p-7 space-y-4 bg-[var(--bg-surface)]">
-              <div class="flex flex-wrap items-center justify-between gap-4">
-                <div>
-                  <div class="text-sm font-medium">Записанная экранизация · <span id="lockedDurationSub">08:40</span></div>
-                  <div class="text-xs meta-text mt-0.5">
-                    Полный текст бесплатный. Подписка открывает только видеоверсии. 690 ₽ / месяц · продлевается автоматически.
-                  </div>
-                </div>
-                <div class="flex flex-wrap items-center gap-3">
-                  <button onclick="setVideoAccess(true)" class="btn-wine px-5 py-2.5 text-xs sm:text-sm">
-                    Оформить подписку (690 ₽ / мес)
-                  </button>
-                  <button onclick="switchScreen('login')" class="btn-outline-editorial px-4 py-2.5 text-xs font-medium">
-                    Уже есть подписка? Войти
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- STATE B: VIDEO UNLOCKED + CINEMA PLAYER (Figma 12:313889 & 12:314274) -->
-          <div id="videoUnlockedCard" class="hidden rounded-lg overflow-hidden border hairline-border bg-[#211A18] text-[#FFFDFA] shadow-xl">
-            <div class="cinema-player-unlocked p-6 sm:p-8 space-y-6">
-              <div class="flex flex-wrap items-center justify-between gap-2 text-xs text-[#D6B39B]">
-                <span class="uppercase tracking-[0.14em] font-medium">ЗАПИСАННАЯ АДАПТАЦИЯ · НЕ AI АВАТАР</span>
-                <span class="px-2.5 py-0.5 rounded bg-emerald-500/20 text-emerald-300 border border-emerald-400/30 text-[11px]">
-                  ✓ Подписка активна
-                </span>
-              </div>
-
-              <!-- Simulated Atmospheric Cinema Screen -->
-              <div class="relative rounded-md overflow-hidden border border-white/15 bg-black/50 aspect-video flex flex-col justify-between p-6">
-                <div class="flex items-center justify-between text-xs text-white/75">
-                  <span id="playerStoryTitle" class="font-serif-editorial text-2xl text-white">После полуночи · Экранизация</span>
-                  <span id="playerDurationBadge" class="font-mono text-xs">02:16 / 08:40</span>
-                </div>
-
-                <!-- Center Play/Pause Button & Scene Subtitle -->
-                <div class="my-auto text-center space-y-3">
-                  <button onclick="toggleVideoPlayback()" id="playPauseCircle" class="w-16 h-16 rounded-full bg-[#793C49]/90 hover:bg-[#793C49] text-white flex items-center justify-center mx-auto text-xl shadow-lg transition transform hover:scale-105">
-                    ▶
-                  </button>
-                  <p id="videoSubtitleLine" class="font-serif-editorial italic text-lg sm:text-xl text-[#F5F0E8] max-w-md mx-auto">
-                    «Под светом настольной лампы нашлось место и двум чашкам, и половине тёплого хлеба...»
-                  </p>
-                  <div id="videoStateNote" class="text-[11px] text-white/60">
-                    На паузе · Нажмите ▶ для запуска демонстрации сцены
-                  </div>
-                </div>
-
-                <!-- Player Scrubber & Controls -->
-                <div class="space-y-2.5">
-                  <div class="w-full h-1.5 bg-white/20 rounded-full overflow-hidden cursor-pointer" onclick="scrubVideo(event)">
-                    <div id="videoProgressBar" class="h-full bg-[#D6B39B] transition-all duration-300" style="width: 28%"></div>
-                  </div>
-                  <div class="flex items-center justify-between text-[11px] text-white/80">
-                    <div class="flex items-center gap-4">
-                      <button onclick="toggleVideoPlayback()" id="playPauseTextBtn" class="hover:text-white font-medium">▶ Воспроизвести</button>
-                      <span>🔊 Звук: вкл</span>
-                      <span>CC Субтитры: рус</span>
-                    </div>
-                    <div class="flex items-center gap-3">
-                      <span>1080p HD</span>
-                      <span>⛶ Полный экран</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Next Story Recommendation (Figma 12:314274: После просмотра) -->
-              <div class="pt-4 border-t border-white/10 flex flex-wrap items-center justify-between gap-4 text-xs">
-                <div>
-                  <div class="text-[#D6B39B] uppercase tracking-wider text-[10px]">После просмотра</div>
-                  <div class="text-white/90 mt-0.5">
-                    Следующая история: <strong>«Кофе после дождя»</strong> · современная романтика · 6 мин. Видеоверсия — 11:20.
-                  </div>
-                </div>
-                <button onclick="openStoryReader(1)" class="px-4 py-2 rounded bg-white/10 hover:bg-white/20 text-white font-medium transition">
-                  Читать «Кофе после дождя» →
+              <div class="pt-2">
+                <button onclick="openStoryReader(0)" class="btn-paper-outline px-4 py-2.5 text-xs">
+                  Продолжить с 42%
                 </button>
               </div>
             </div>
           </div>
 
-          <div class="pt-2">
-            <button onclick="switchScreen('catalog')" class="text-xs meta-text hover:text-[var(--text-ink)]">
-              ← К каталогу историй
-            </button>
-          </div>
-        </div>
-      </section>
-
-      <!-- ===================================================================== -->
-      <!-- SCREEN 4: ВИДЕО ПО ИСТОРИЯМ (Figma Frame 12:314623 · Десктоп)         -->
-      <!-- ===================================================================== -->
-      <section id="screen-videos" class="hidden space-y-10">
-        <div class="border-b hairline-border pb-8 space-y-3">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text font-medium">
-            ИЗ БИБЛИОТЕКИ — НА ЭКРАН
-          </div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl lg:text-[56px] leading-[1.04] font-normal">
-            Те же чувства.<br />Другой язык.
-          </h1>
-          <p class="text-base meta-text max-w-2xl leading-relaxed">
-            Записанные адаптации прочитанных историй. Текст открыт каждому; для видео нужна подписка.
-          </p>
-        </div>
-
-        <div class="subtle-box p-5 flex flex-wrap items-center justify-between gap-4">
-          <div class="space-y-1">
-            <div class="text-sm font-medium">Видеоверсии доступны по подписке (690 ₽ / месяц)</div>
-            <div class="text-xs meta-text">
-              В состоянии без подписки постеры размыты одинаково. Вы можете мгновенно протестировать оба состояния ниже.
+          <!-- Выбор редакции (3-column photographic grid directly on paper) -->
+          <div class="space-y-6 pb-12 border-b hairline">
+            <div class="flex items-center justify-between">
+              <h3 class="font-serif-ed text-[28px] leading-tight font-normal">Выбор редакции</h3>
+              <button onclick="switchScreen('catalog')" class="text-xs text-[#793C49] hover:underline">Все истории →</button>
             </div>
-          </div>
-          <button onclick="toggleSubscriptionState()" class="btn-wine px-4 py-2 text-xs">
-            Переключить доступ к видео
-          </button>
-        </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <!-- Video 1 -->
-          <div class="surface-card overflow-hidden flex flex-col justify-between">
-            <div>
-              <div class="cinema-poster-locked h-44 flex items-center justify-center p-4 text-center">
-                <span class="relative z-10 px-3 py-1 rounded bg-black/55 text-[#FFFDFA] text-xs font-medium">
-                  🎬 После полуночи · 08:40
-                </span>
-              </div>
-              <div class="p-6 space-y-2.5">
-                <div class="text-[11px] uppercase tracking-wider wine-text font-semibold">Доступно по подписке · 08:40</div>
-                <h3 class="font-serif-editorial text-2xl font-medium">После полуночи</h3>
-                <p class="text-xs meta-text leading-relaxed">
-                  Опоздав на последний трамвай, двое решают не торопить утро. Рассказ о смелости остаться рядом.
-                </p>
-              </div>
-            </div>
-            <div class="p-6 pt-0 flex items-center gap-2">
-              <button onclick="openStoryReaderAndScrollVideo(0)" class="btn-wine flex-1 py-2 text-xs">Смотреть / К видео</button>
-              <button onclick="openStoryReader(0)" class="btn-outline-editorial px-3 py-2 text-xs">Текст</button>
-            </div>
-          </div>
-
-          <!-- Video 2 -->
-          <div class="surface-card overflow-hidden flex flex-col justify-between">
-            <div>
-              <div class="cinema-poster-locked h-44 flex items-center justify-center p-4 text-center">
-                <span class="relative z-10 px-3 py-1 rounded bg-black/55 text-[#FFFDFA] text-xs font-medium">
-                  🎬 Кофе после дождя · 11:20
-                </span>
-              </div>
-              <div class="p-6 space-y-2.5">
-                <div class="text-[11px] uppercase tracking-wider wine-text font-semibold">Доступно по подписке · 11:20</div>
-                <h3 class="font-serif-editorial text-2xl font-medium">Кофе после дождя</h3>
-                <p class="text-xs meta-text leading-relaxed">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-7">
+              <!-- Editorial Card 1: Кофе после дождя -->
+              <article class="space-y-3.5">
+                <div class="relative overflow-hidden rounded-[6px] aspect-[3/4] bg-[#DFDDD7] cursor-pointer" onclick="openStoryReader(1)">
+                  <img src="/assets/between-1323/story2.jpg" alt="Кофе после дождя" class="w-full h-full object-cover hover:scale-[1.02] transition duration-500" />
+                  <button onclick="event.stopPropagation();showToast('Добавлено в «Избранное»')" class="absolute top-3 right-3 w-8 h-8 rounded-[4px] bg-[#FFFDFA] border hairline flex items-center justify-center text-xs hover:bg-white">
+                    🔖
+                  </button>
+                </div>
+                <div class="kicker pt-1">СОВРЕМЕННАЯ РОМАНТИКА · 6 мин</div>
+                <h4 class="font-serif-ed text-[28px] leading-[1.1] font-normal cursor-pointer hover:opacity-80" onclick="openStoryReader(1)">
+                  Кофе после дождя
+                </h4>
+                <p class="text-xs meta leading-relaxed">
                   В маленьком кафе Лида и Денис учатся говорить о будущем, не загадывая его друг за друга.
                 </p>
-              </div>
-            </div>
-            <div class="p-6 pt-0 flex items-center gap-2">
-              <button onclick="openStoryReaderAndScrollVideo(1)" class="btn-wine flex-1 py-2 text-xs">Смотреть / К видео</button>
-              <button onclick="openStoryReader(1)" class="btn-outline-editorial px-3 py-2 text-xs">Текст</button>
-            </div>
-          </div>
+                <blockquote class="font-serif-ed text-[18px] leading-[1.45] text-[#24211D]">
+                  «Кофе принесли в разных чашках. Лида решила, что это хороший знак: здесь не требовали совпадать.»
+                </blockquote>
+                <div class="text-[11px] text-[#24211D] pt-1">Есть видео · по подписке</div>
+                <div class="flex items-center justify-between pt-1">
+                  <button onclick="openStoryReader(1)" class="text-xs text-[#793C49] hover:underline">Читать историю →</button>
+                  <span class="text-xs meta">🎬</span>
+                </div>
+              </article>
 
-          <!-- Video 3 -->
-          <div class="surface-card overflow-hidden flex flex-col justify-between">
-            <div>
-              <div class="cinema-poster-locked h-44 flex items-center justify-center p-4 text-center">
-                <span class="relative z-10 px-3 py-1 rounded bg-black/55 text-[#FFFDFA] text-xs font-medium">
-                  🎬 Вечер в незнакомом городе · 14:10
-                </span>
-              </div>
-              <div class="p-6 space-y-2.5">
-                <div class="text-[11px] uppercase tracking-wider wine-text font-semibold">Доступно по подписке · 14:10</div>
-                <h3 class="font-serif-editorial text-2xl font-medium">Вечер в незнакомом городе</h3>
-                <p class="text-xs meta-text leading-relaxed">
+              <!-- Editorial Card 2: Вечер в незнакомом городе -->
+              <article class="space-y-3.5">
+                <div class="relative overflow-hidden rounded-[6px] aspect-[3/4] bg-[#DFDDD7] cursor-pointer" onclick="openStoryReader(2)">
+                  <img src="/assets/between-1323/story3.jpg" alt="Вечер в незнакомом городе" class="w-full h-full object-cover hover:scale-[1.02] transition duration-500" />
+                  <button onclick="event.stopPropagation();showToast('Добавлено в «Избранное»')" class="absolute top-3 right-3 w-8 h-8 rounded-[4px] bg-[#FFFDFA] border hairline flex items-center justify-center text-xs hover:bg-white">
+                    🔖
+                  </button>
+                </div>
+                <div class="kicker pt-1">ПРОЗА О ВЫБОРЕ · 8 мин</div>
+                <h4 class="font-serif-ed text-[28px] leading-[1.1] font-normal cursor-pointer hover:opacity-80" onclick="openStoryReader(2)">
+                  Вечер в незнакомом городе
+                </h4>
+                <p class="text-xs meta leading-relaxed">
                   Три старых друга встречаются на один вечер. У каждого — свой маршрут, но одна общая история.
                 </p>
+                <blockquote class="font-serif-ed text-[18px] leading-[1.45] text-[#24211D]">
+                  «Они встретились у гостиницы, которую никто из них не выбрал бы для себя. И потому всем было легко.»
+                </blockquote>
+                <div class="text-[11px] text-[#24211D] pt-1">Есть видео · по подписке</div>
+                <div class="flex items-center justify-between pt-1">
+                  <button onclick="openStoryReader(2)" class="text-xs text-[#793C49] hover:underline">Читать историю →</button>
+                  <span class="text-xs meta">🎬</span>
+                </div>
+              </article>
+
+              <!-- Editorial Card 3: Письмо, которое всё изменило -->
+              <article class="space-y-3.5">
+                <div class="relative overflow-hidden rounded-[6px] aspect-[3/4] bg-[#DFDDD7] cursor-pointer" onclick="openStoryReader(3)">
+                  <img src="/assets/between-1323/story4.jpg" alt="Письмо, которое всё изменило" class="w-full h-full object-cover hover:scale-[1.02] transition duration-500" />
+                  <button onclick="event.stopPropagation();showToast('Добавлено в «Избранное»')" class="absolute top-3 right-3 w-8 h-8 rounded-[4px] bg-[#FFFDFA] border hairline flex items-center justify-center text-xs hover:bg-white">
+                    🔖
+                  </button>
+                </div>
+                <div class="kicker pt-1">ЭПИСТОЛЯРНАЯ ПРОЗА · 4 мин</div>
+                <h4 class="font-serif-ed text-[28px] leading-[1.1] font-normal cursor-pointer hover:opacity-80" onclick="openStoryReader(3)">
+                  Письмо, которое всё изменило
+                </h4>
+                <p class="text-xs meta leading-relaxed">
+                  Соня возвращает непрочитанное письмо. Андрей предлагает начать не с объяснений, а с прогулки.
+                </p>
+                <blockquote class="font-serif-ed text-[18px] leading-[1.45] text-[#24211D]">
+                  «Конверт пролежал в ящике стола почти год. Теперь Соня держала его так, словно это был билет в город, где она ещё не бывала.»
+                </blockquote>
+                <div class="text-[11px] meta pt-1">Пока только текст</div>
+                <div class="flex items-center justify-between pt-1">
+                  <button onclick="openStoryReader(3)" class="text-xs text-[#793C49] hover:underline">Читать историю →</button>
+                  <span class="text-xs meta">📖</span>
+                </div>
+              </article>
+            </div>
+          </div>
+
+          <!-- Из текста — в кадр (Exact section from Figma 12:312192) -->
+          <div class="space-y-5 pb-12 border-b hairline">
+            <h3 class="font-serif-ed text-[28px] leading-tight font-normal">Из текста — в кадр</h3>
+            <div class="surface-box p-6 space-y-3">
+              <div class="text-sm font-medium text-[#793C49]">Истории, у которых есть видеоверсия</div>
+              <div class="text-xs meta space-y-1">
+                <div>После полуночи · 08:40</div>
+                <div>Кофе после дождя · 11:20</div>
+                <div>Вечер в незнакомом городе · 14:10</div>
+              </div>
+              <div class="text-xs meta pt-2">
+                Все тексты бесплатны. Записанные адаптации — по подписке.
               </div>
             </div>
-            <div class="p-6 pt-0 flex items-center gap-2">
-              <button onclick="openStoryReaderAndScrollVideo(2)" class="btn-wine flex-1 py-2 text-xs">Смотреть / К видео</button>
-              <button onclick="openStoryReader(2)" class="btn-outline-editorial px-3 py-2 text-xs">Текст</button>
-            </div>
-          </div>
-        </div>
-
-        <div class="text-xs meta-text">
-          У истории «Письмо, которое всё изменило» пока нет видео. Она остаётся в каталоге текстов.
-        </div>
-      </section>
-
-      <!-- ===================================================================== -->
-      <!-- SCREEN 5: ПРОДОЛЖИТЬ ЧТЕНИЕ (Figma Frame 12:315008)                   -->
-      <!-- ===================================================================== -->
-      <section id="screen-continue" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-8 space-y-3">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text font-medium">ВАША ПОЗИЦИЯ В ТЕКСТЕ</div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl leading-[1.04] font-normal">
-            Мы оставили<br />страницу открытой.
-          </h1>
-          <p class="text-sm meta-text max-w-xl">
-            Только начатые истории. Закладки избранного и сохранённые AI-материалы находятся в своих разделах.
-          </p>
-        </div>
-
-        <div class="space-y-4">
-          <div class="surface-card p-6 flex flex-col sm:flex-row sm:items-center justify-between gap-6">
-            <div class="space-y-1.5">
-              <div class="text-xs meta-text">Романтическая проза · 3 мин &nbsp;·&nbsp; Сегодня, 21:14 · абзац у моста</div>
-              <h3 class="font-serif-editorial text-2xl font-medium">После полуночи</h3>
-              <p class="font-serif-editorial italic text-lg meta-text">«На другой стороне реки им нужно было расстаться.»</p>
-            </div>
-            <div class="flex items-center gap-4 shrink-0">
-              <div class="text-right">
-                <div class="text-xs font-medium">Прочитано 42%</div>
-                <div class="text-[11px] meta-text">Осталось 2 мин</div>
-              </div>
-              <button onclick="openStoryReader(0)" class="btn-wine px-4 py-2.5 text-xs">Продолжить с 42%</button>
-            </div>
-          </div>
-
-          <div class="surface-card p-6 flex flex-col sm:flex-row sm:items-center justify-between gap-6">
-            <div class="space-y-1.5">
-              <div class="text-xs meta-text">Современная романтика · 6 мин &nbsp;·&nbsp; Вчера, 19:06 · начало рассказа</div>
-              <h3 class="font-serif-editorial text-2xl font-medium">Кофе после дождя</h3>
-              <p class="font-serif-editorial italic text-lg meta-text">«Кофе принесли в разных чашках.»</p>
-            </div>
-            <div class="flex items-center gap-4 shrink-0">
-              <div class="text-right">
-                <div class="text-xs font-medium">Прочитано 18%</div>
-                <div class="text-[11px] meta-text">Осталось 5 мин</div>
-              </div>
-              <button onclick="openStoryReader(1)" class="btn-outline-editorial px-4 py-2.5 text-xs font-medium">Продолжить с 18%</button>
-            </div>
-          </div>
-        </div>
-        <div class="text-xs meta-text">Прогресс относится к чтению текста, а не к просмотру видео.</div>
-      </section>
-
-      <!-- ===================================================================== -->
-      <!-- SCREEN 6: ИЗБРАННОЕ (Figma Frame 12:315383)                           -->
-      <!-- ===================================================================== -->
-      <section id="screen-favorites" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-8 space-y-3">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text font-medium">СОХРАНЁННОЕ ДЛЯ ВДОХНОВЕНИЯ</div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl leading-[1.04] font-normal">
-            К этому<br />хочется вернуться.
-          </h1>
-          <p class="text-sm meta-text max-w-xl">
-            Истории, видео и AI герои — три отдельные коллекции. Здесь нет прогресса чтения или личных версий AI.
-          </p>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div class="surface-card p-6 space-y-3">
-            <div class="text-[11px] uppercase tracking-wider meta-text">РОМАНТИЧЕСКАЯ ПРОЗА · 3 мин</div>
-            <h3 class="font-serif-editorial text-2xl font-medium">После полуночи</h3>
-            <p class="text-xs meta-text">Опоздав на последний трамвай, двое решают не торопить утро.</p>
-            <div class="pt-3 border-t hairline-border flex items-center justify-between">
-              <span class="wine-badge">Есть видео · по подписке</span>
-              <button onclick="openStoryReader(0)" class="text-xs wine-text font-medium">Читать историю →</button>
-            </div>
-          </div>
-
-          <div class="surface-card p-6 space-y-3">
-            <div class="text-[11px] uppercase tracking-wider meta-text">ЭПИСТОЛЯРНАЯ ПРОЗА · 4 мин</div>
-            <h3 class="font-serif-editorial text-2xl font-medium">Письмо, которое всё изменило</h3>
-            <p class="text-xs meta-text">Соня возвращает непрочитанное письмо. Андрей предлагает начать с прогулки.</p>
-            <div class="pt-3 border-t hairline-border flex items-center justify-between">
-              <span class="text-xs meta-text">Пока только текст</span>
-              <button onclick="openStoryReader(3)" class="text-xs wine-text font-medium">Читать историю →</button>
-            </div>
-          </div>
-
-          <div class="subtle-box p-6 space-y-2.5 text-xs">
-            <div class="font-semibold text-sm">В коллекции</div>
-            <p class="meta-text">Истории · 2</p>
-            <p class="meta-text">Видео · 1 («После полуночи», 08:40)</p>
-            <p class="meta-text">AI герои · 1 (Инга, 32)</p>
-            <p class="meta-text pt-2 border-t hairline-border">
-              Личные конфигурации — в «Мои AI», материалы из своих разговоров — в «Личное».
-            </p>
-          </div>
-        </div>
-      </section>
-
-      <!-- ===================================================================== -->
-      <!-- SCREEN 7: AI ГЕРОИ (Figma Frame 12:317609 · ДРУГОЙ ФОРМАТ · AI)       -->
-      <!-- ===================================================================== -->
-      <section id="screen-ai_heroes" class="hidden space-y-10">
-        <div class="border-b hairline-border pb-8 space-y-3">
-          <div class="text-xs uppercase tracking-[0.14em] wine-text font-semibold">ДРУГОЙ ФОРМАТ · AI / ВЗРОСЛЫЕ ВЫМЫШЛЕННЫЕ ПЕРСОНАЖИ 18+</div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl leading-[1.04] font-normal">
-            Разговор, у которого<br />есть характер.
-          </h1>
-          <p class="text-sm meta-text max-w-2xl">
-            Камерные диалоги по мотивам атмосферы журнала. Выбирайте готовый образ или настройте темп и дистанцию под себя.
-          </p>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div class="surface-card p-6 flex flex-col justify-between space-y-5">
-            <div class="space-y-3">
-              <div class="flex items-center justify-between">
-                <span class="wine-badge">AI · 18+</span>
-                <span class="text-xs meta-text">Спокойный · Внимательный</span>
-              </div>
-              <h3 class="font-serif-editorial text-3xl font-medium">Лев, 36</h3>
-              <p class="text-xs font-medium wine-text">Архитектор · Вечерний город</p>
-              <p class="text-sm meta-text leading-relaxed">
-                Внимательный к деталям, с мягкой иронией. Любит старые мосты, поздние трамваи и разговоры без спешки.
-              </p>
-            </div>
-            <div class="pt-3 border-t hairline-border flex items-center gap-2">
-              <button onclick="switchScreen('ai_chat')" class="btn-wine flex-1 py-2.5 text-xs">Открыть диалог →</button>
-              <button onclick="switchScreen('my_ai')" class="btn-outline-editorial px-3 py-2.5 text-xs">Моя версия</button>
-            </div>
-          </div>
-
-          <div class="surface-card p-6 flex flex-col justify-between space-y-5">
-            <div class="space-y-3">
-              <div class="flex items-center justify-between">
-                <span class="wine-badge">AI · 18+</span>
-                <span class="text-xs meta-text">Тёплый · Литературный</span>
-              </div>
-              <h3 class="font-serif-editorial text-3xl font-medium">Инга, 32</h3>
-              <p class="text-xs font-medium wine-text">Переводчица · Маленькие кафе</p>
-              <p class="text-sm meta-text leading-relaxed">
-                Любит прогулки после дождя и разговоры о редких словах. Умеет слушать паузы между фразами.
-              </p>
-            </div>
-            <div class="pt-3 border-t hairline-border flex items-center gap-2">
-              <button onclick="switchScreen('ai_chat')" class="btn-wine flex-1 py-2.5 text-xs">Открыть диалог →</button>
-              <button onclick="switchScreen('my_ai')" class="btn-outline-editorial px-3 py-2.5 text-xs">Моя версия</button>
-            </div>
-          </div>
-
-          <div class="surface-card p-6 flex flex-col justify-between space-y-5">
-            <div class="space-y-3">
-              <div class="flex items-center justify-between">
-                <span class="wine-badge">AI · Конструктор</span>
-                <span class="text-xs meta-text">5 шагов</span>
-              </div>
-              <h3 class="font-serif-editorial text-3xl font-medium">Свой образ</h3>
-              <p class="text-xs font-medium wine-text">Персональная настройка</p>
-              <p class="text-sm meta-text leading-relaxed">
-                Задайте образ, внешность, характер, голос и границы общения в спокойном 5-шаговом конструкторе.
-              </p>
-            </div>
-            <div class="pt-3 border-t hairline-border">
-              <button onclick="switchScreen('create_ai')" class="btn-outline-editorial w-full py-2.5 text-xs font-medium">
-                Создать героя →
+            <div>
+              <button onclick="switchScreen('videos')" class="btn-paper-outline px-4 py-2.5 text-xs">
+                Видео по историям →
               </button>
             </div>
           </div>
-        </div>
-      </section>
 
-      <!-- ===================================================================== -->
-      <!-- SCREEN 8: ДИАЛОГИ + AI ВИДЕОДИАЛОГ (Figma Frame 12:317552)            -->
-      <!-- ===================================================================== -->
-      <section id="screen-ai_chat" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-6 flex flex-wrap items-center justify-between gap-4">
-          <div>
-            <div class="text-xs uppercase tracking-[0.14em] wine-text font-semibold">ДИАЛОГИ / ЛЕВ, 36 · AI · ЛИЧНАЯ ВЕРСИЯ</div>
-            <h1 class="font-serif-editorial text-3xl sm:text-4xl font-normal mt-1">Лев · Кофе после дождя</h1>
-          </div>
-          <div class="flex items-center gap-2">
-            <button onclick="toggleAiVideoMode(false)" id="chatModeTextBtn" class="btn-wine px-3.5 py-1.5 text-xs">Текст и голос</button>
-            <button onclick="toggleAiVideoMode(true)" id="chatModeVideoBtn" class="btn-outline-editorial px-3.5 py-1.5 text-xs">AI видеодиалог (Аватар)</button>
-          </div>
-        </div>
-
-        <!-- AI Video Avatar Call Box (Hidden by default, toggled via button) -->
-        <div id="aiVideoCallBox" class="hidden rounded-lg p-6 bg-[#211A18] text-[#FFFDFA] space-y-4">
-          <div class="flex items-center justify-between text-xs text-[#D6B39B]">
-            <span>AI ВИДЕОДИАЛОГ · ВЫМЫШЛЕННЫЙ AI АВАТАР · 18+</span>
-            <span>Камера пользователя: Выкл. (необязательна)</span>
-          </div>
-          <div class="aspect-video max-h-[340px] w-full rounded bg-black/50 border border-white/15 flex flex-col items-center justify-center p-6 text-center space-y-3">
-            <div class="w-20 h-20 rounded-full bg-[#793C49]/40 border border-[#D6B39B] flex items-center justify-center font-serif-editorial text-3xl">
-              Л
+          <!-- Настроение вечера (Exact section from Figma 12:312192) -->
+          <div class="space-y-5">
+            <h3 class="font-serif-ed text-[28px] leading-tight font-normal">Настроение вечера</h3>
+            <div class="flex flex-wrap gap-3">
+              <button onclick="openStoryReader(0)" class="btn-paper-outline px-5 py-3 font-serif-ed text-xl">Случайная встреча ↗</button>
+              <button onclick="openStoryReader(3)" class="btn-paper-outline px-5 py-3 font-serif-ed text-xl">Второй шанс ↗</button>
+              <button onclick="openStoryReader(1)" class="btn-paper-outline px-5 py-3 font-serif-ed text-xl">Город после дождя ↗</button>
+              <button onclick="openStoryReader(2)" class="btn-paper-outline px-5 py-3 font-serif-ed text-xl">Сказать главное ↗</button>
             </div>
-            <div class="font-serif-editorial text-2xl">Лев, 36 · AI аватар готов к разговору</div>
-            <p class="text-xs text-white/70 max-w-md">
-              «Кажется, дождь решил задержать нас здесь ещё на полчаса. Я не против. А ты?»
+            <div class="surface-box p-6 space-y-1.5">
+              <div class="text-sm font-medium text-[#793C49]">Отдельный формат · AI герои</div>
+              <p class="text-xs meta">
+                Лев, 36 · архитектор. Инга, 32 · переводчица. Вымышленные собеседники для собственных разговоров — не персонажи литературных историй.
+              </p>
+            </div>
+            <div>
+              <button onclick="switchScreen('ai_heroes')" class="btn-paper-outline px-4 py-2.5 text-xs">
+                Открыть AI героев →
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 2: КАТАЛОГ ИСТОРИЙ (Exact match to Figma Frame 12:312704)    -->
+        <!-- =================================================================== -->
+        <section id="screen-catalog" class="hidden space-y-10">
+          <div class="space-y-3 pb-6 border-b hairline">
+            <div class="kicker">БИБЛИОТЕКА / ЗАКОНЧЕННАЯ ПРОЗА / 18+</div>
+            <h1 class="font-serif-ed text-5xl sm:text-[60px] leading-[1.02] font-normal">
+              Истории, в которых<br />хочется остаться.
+            </h1>
+            <p class="text-sm meta max-w-3xl leading-relaxed pt-1">
+              Романтика и эротическая литература — о внимании, выборе и близости. Литературные истории для взрослых, без графических сцен. Полный текст каждой истории открыт.
             </p>
           </div>
-        </div>
 
-        <!-- Chat Messages Thread -->
-        <div class="surface-card p-6 space-y-5 max-w-[760px]">
-          <div class="text-center text-xs meta-text pb-2 border-b hairline-border">
-            Сегодня · Сцена: «За окном дождь. В кафе почти никого.»
+          <!-- Filter Bar (Node 12:312729 from the user's Figma URL!) -->
+          <div class="space-y-3">
+            <div class="flex flex-wrap items-center gap-2.5">
+              <span class="meta text-sm mr-1">▽</span>
+              <select id="filterGenre" onchange="filterCatalog()" class="btn-paper-outline px-3.5 py-2 text-xs cursor-pointer outline-none">
+                <option value="all">Жанр: все ⌄</option>
+                <option value="Романтическая проза">Жанр: романтическая проза</option>
+                <option value="Современная романтика">Жанр: современная романтика</option>
+                <option value="Проза о выборе">Жанр: проза о выборе</option>
+                <option value="Эпистолярная проза">Жанр: эпистолярная проза</option>
+              </select>
+              <select id="filterMood" onchange="filterCatalog()" class="btn-paper-outline px-3.5 py-2 text-xs cursor-pointer outline-none">
+                <option value="all">Настроение: любое ⌄</option>
+                <option value="night">Ночной город</option>
+                <option value="warm">Разговор после дождя</option>
+              </select>
+              <select id="filterTime" onchange="filterCatalog()" class="btn-paper-outline px-3.5 py-2 text-xs cursor-pointer outline-none">
+                <option value="all">Время: любое ⌄</option>
+                <option value="short">До 5 минут</option>
+                <option value="long">6–10 минут</option>
+              </select>
+              <select id="filterVideo" onchange="filterCatalog()" class="btn-paper-outline px-3.5 py-2 text-xs cursor-pointer outline-none">
+                <option value="all">Видео: все ⌄</option>
+                <option value="yes">Есть видео · по подписке</option>
+                <option value="text">Пока только текст</option>
+              </select>
+            </div>
+            <div id="catalogCountText" class="text-xs meta">4 истории · Редакционный порядок</div>
           </div>
 
-          <div id="chatMessagesList" class="space-y-4">
-            <div class="subtle-box p-4 max-w-lg space-y-1">
-              <div class="text-[11px] meta-text">19:41 · Лев · AI</div>
-              <p class="text-sm">Кажется, дождь решил задержать нас здесь. Я не против. А ты?</p>
-            </div>
+          <!-- 3-Column Photographic Grid (Matches 12:312704 1:1) -->
+          <div id="catalogGrid" class="grid grid-cols-1 md:grid-cols-3 gap-7 pb-10 border-b hairline"></div>
 
-            <div class="p-4 rounded-md bg-[var(--accent-wine-soft)] ml-auto max-w-lg space-y-1">
-              <div class="text-[11px] wine-text">19:41 · Вы · Доставлено ✓✓</div>
-              <p class="text-sm">Если кофе хороший — я тоже. Часто сюда заходишь?</p>
-            </div>
+          <div class="text-xs meta">
+            Не нужно подписываться, чтобы дочитать. Видео — отдельное продолжение знакомства с историей.
+          </div>
+        </section>
 
-            <div class="subtle-box p-4 max-w-lg space-y-1">
-              <div class="text-[11px] meta-text">19:42 · Лев · AI</div>
-              <p class="text-sm">Когда хочется замедлиться. Здесь никто не торопит, а бариста запоминает любимый кофе. Что заказать тебе?</p>
+        <!-- =================================================================== -->
+        <!-- SCREEN 3: ЧТЕНИЕ ИСТОРИИ + ВИДЕО В КОНЦЕ (12:313167 & 12:313889)    -->
+        <!-- =================================================================== -->
+        <section id="screen-reader" class="hidden space-y-10">
+
+          <!-- Story Header -->
+          <div class="space-y-3">
+            <div id="readerKicker" class="kicker">РОМАНТИЧЕСКАЯ ПРОЗА / 3 мин / 18+</div>
+            <h1 id="readerTitle" class="font-serif-ed text-5xl sm:text-[60px] leading-[1.02] font-normal">
+              После полуночи
+            </h1>
+            <p id="readerLead" class="text-sm meta">
+              Опоздав на последний трамвай, двое решают не торопить утро. Рассказ о смелости остаться рядом.
+            </p>
+            <div id="readerCredits" class="text-xs text-[#24211D] pt-1">
+              Редакция «между.» · Вымышленные взрослые: Вера, 31 · Матвей, 34
             </div>
           </div>
 
-          <form onsubmit="sendAiChatMessage(event)" class="pt-4 border-t hairline-border flex gap-2">
-            <input id="aiChatInput" type="text" placeholder="Написать Льву…" class="flex-1 px-4 py-2.5 rounded border hairline-border bg-[var(--bg-paper)] text-sm outline-none" />
-            <button type="submit" class="btn-wine px-5 py-2.5 text-xs">Отправить</button>
-          </form>
-          <div class="text-[11px] meta-text">
-            Лев — AI. Ответы вымышлены. Вы всегда можете сохранить понравившуюся фразу в «Личное».
+          <!-- Centered Story Portrait Cover (Exact match to Figma 12:313167) -->
+          <div class="py-2">
+            <div class="w-full max-w-[380px] mx-auto aspect-[3/4] rounded-[6px] overflow-hidden bg-[#DFDDD7]">
+              <img id="readerCoverImg" src="/assets/between-1323/story1.jpg" alt="После полуночи" class="w-full h-full object-cover" />
+            </div>
           </div>
-        </div>
-      </section>
 
-      <!-- ===================================================================== -->
-      <!-- SCREEN 9: МОИ AI & СОЗДАТЬ ГЕРОЯ & ЛИЧНОЕ (12:317510 / 460 / 425)     -->
-      <!-- ===================================================================== -->
-      <section id="screen-my_ai" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-6">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text">ЛИЧНЫЕ КОНФИГУРАЦИИ · AI</div>
-          <h1 class="font-serif-editorial text-4xl font-normal mt-1">Мои AI</h1>
-          <p class="text-sm meta-text mt-1">Сохранённые версии героев с вашим темпом беседы и границами.</p>
-        </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div class="surface-card p-6 space-y-3">
-            <div class="wine-badge inline-block">Личная версия</div>
-            <h3 class="font-serif-editorial text-2xl font-medium">Лев · моя версия</h3>
-            <p class="text-xs meta-text">Тон: спокойный, внимательный · Сценарий: вечерний город после дождя.</p>
-            <button onclick="switchScreen('ai_chat')" class="btn-wine px-4 py-2 text-xs">Продолжить диалог →</button>
-          </div>
-          <div class="surface-card p-6 space-y-3">
-            <div class="wine-badge inline-block">Конструктор</div>
-            <h3 class="font-serif-editorial text-2xl font-medium">Создать нового героя</h3>
-            <p class="text-xs meta-text">Настройте имя, возраст (18+), тембр голоса и характер с нуля.</p>
-            <button onclick="switchScreen('create_ai')" class="btn-outline-editorial px-4 py-2 text-xs">Открыть конструктор →</button>
-          </div>
-        </div>
-      </section>
+          <!-- Full-Width Reading Controls & 2px Progress Line -->
+          <div class="space-y-3 pb-4">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <button onclick="adjustFontSize(-2)" class="btn-paper-outline w-9 h-8 flex items-center justify-center text-xs">А−</button>
+                <button onclick="adjustFontSize(2)" class="btn-paper-outline w-9 h-8 flex items-center justify-center text-xs">А+</button>
+              </div>
+              <button onclick="showToast('Позиция чтения (42% · у моста) сохранена в Закладках')" class="text-xs meta hover:text-[#24211D] flex items-center gap-1.5">
+                <span>🔖</span>
+                <span>Закладка</span>
+              </button>
+            </div>
+
+            <div class="space-y-1.5">
+              <div class="flex items-center justify-between text-[11px] meta">
+                <span>Прочитано 42%</span>
+                <span>Осталось 2 мин</span>
+              </div>
+              <div class="w-full h-[2px] bg-[#D8CFC3]">
+                <div class="h-full bg-[#793C49]" style="width: 42%"></div>
+              </div>
+              <div class="text-[11px] meta pt-1 leading-relaxed">
+                Сохранённая позиция — у моста, 42%.<br />
+                <a href="#endOfStoryVideo" class="hover:underline">Видео по этой истории ↓ · после окончания текста</a>
+              </div>
+            </div>
+          </div>
+
+          <!-- Narrow Centered Reading Column (Cormorant Garamond 20/32px, max-w-[560px]) -->
+          <article class="max-w-[560px] mx-auto reading-column">
+            <h2 id="readerChapterTitle" class="font-serif-ed text-[26px] text-[#793C49] font-normal mb-6">
+              I. После полуночи
+            </h2>
+            <div id="readerParagraphs"></div>
+
+            <!-- КОНЕЦ Divider -->
+            <div class="pt-8 pb-4 text-center space-y-4">
+              <div class="font-serif-ed text-lg tracking-[0.28em] text-[#793C49] uppercase">КОНЕЦ</div>
+              <div class="border-t hairline pt-3 text-left text-[11px] meta">
+                Весь рассказ доступен без подписки. Сохранённая позиция чтения — 42%.
+              </div>
+            </div>
+          </article>
+
+          <!-- ================================================================= -->
+          <!-- VIDEO BLOCK AT THE END OF THE STORY (Figma 12:313167 & 12:313889) -->
+          <!-- ================================================================= -->
+          <div id="endOfStoryVideo" class="pt-6 border-t hairline space-y-5">
+            <div class="flex flex-wrap items-center justify-between gap-2">
+              <h3 class="font-serif-ed text-[28px] font-normal">Видео по этой истории</h3>
+              <div class="flex items-center gap-2 text-xs">
+                <span class="meta text-[11px]">Состояние макета Figma:</span>
+                <button onclick="setSubscriptionAccess(false)" id="btnStateLocked" class="px-2.5 py-1 rounded text-xs bg-[#793C49] text-white">
+                  12:313167 · Видео закрыто
+                </button>
+                <button onclick="setSubscriptionAccess(true)" id="btnStateUnlocked" class="btn-paper-outline px-2.5 py-1 text-xs">
+                  12:313889 · Видео открыто
+                </button>
+              </div>
+            </div>
+
+            <!-- Wide 16:9 Cinema Frame using original Figma /assets/between-1323/video1.jpg -->
+            <div class="relative w-full aspect-[16/7] min-h-[300px] rounded-[6px] overflow-hidden bg-[#211A18] flex items-center justify-center text-center">
+              <img id="videoPosterImg" src="/assets/between-1323/video1.jpg" alt="Видео по истории" class="absolute inset-0 w-full h-full object-cover transition duration-500 blur-xl scale-105 brightness-50" />
+
+              <!-- Overlay when LOCKED (12:313167) -->
+              <div id="videoLockedOverlay" class="relative z-10 max-w-md px-6 space-y-3 text-[#FFFDFA]">
+                <div class="text-lg opacity-90">🔒</div>
+                <div class="font-serif-ed text-3xl sm:text-4xl font-normal">Доступно по подписке</div>
+                <div id="videoDurationLocked" class="text-xs text-[#E9E1D6]">Записанная экранизация · 08:40</div>
+                <div class="pt-2">
+                  <button onclick="setSubscriptionAccess(true)" class="btn-wine px-5 py-2.5 text-xs">
+                    Оформить подписку
+                  </button>
+                </div>
+                <div>
+                  <button onclick="switchScreen('login')" class="text-[11px] text-[#E9E1D6] hover:underline">
+                    Уже есть подписка? Войти
+                  </button>
+                </div>
+              </div>
+
+              <!-- Overlay when UNLOCKED (12:313889) -->
+              <div id="videoUnlockedOverlay" class="hidden relative z-10 max-w-md px-6 space-y-3 text-[#FFFDFA]">
+                <div class="text-lg opacity-90">▶️</div>
+                <div id="videoTitleUnlocked" class="font-serif-ed text-3xl sm:text-4xl font-normal">После полуночи</div>
+                <div id="videoDurationUnlocked" class="text-xs text-[#E9E1D6]">Записанная экранизация · 08:40</div>
+                <div class="pt-2">
+                  <button onclick="switchScreen('player')" class="btn-wine px-5 py-2.5 text-xs">
+                    Смотреть видео
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div id="videoFootnote" class="text-xs meta">
+              Полный текст бесплатный. Подписка открывает только видеоверсии. 690 ₽ / месяц · продлевается автоматически. Условия — до оформления.
+            </div>
+
+            <div class="pt-2">
+              <button onclick="switchScreen('catalog')" class="btn-paper-outline px-4 py-2 text-xs">
+                ← К историям
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 3B: ВИДЕОПЛЕЕР (Figma Frame 12:314274)                       -->
+        <!-- =================================================================== -->
+        <section id="screen-player" class="hidden space-y-8">
+          <div class="space-y-2">
+            <div class="kicker">ЗАПИСАННАЯ АДАПТАЦИЯ · НЕ AI АВАТАР</div>
+            <h1 class="font-serif-ed text-5xl font-normal">После полуночи</h1>
+            <div class="text-xs meta">08:40 · По одноимённому рассказу · Подписка активна</div>
+          </div>
+
+          <div class="relative w-full aspect-video rounded-[6px] overflow-hidden bg-[#211A18] flex flex-col justify-between p-6 text-[#FFFDFA]">
+            <img src="/assets/between-1323/video1.jpg" alt="Кадр экранизации" class="absolute inset-0 w-full h-full object-cover brightness-75" />
+            <div class="relative z-10 flex justify-between text-xs text-white/80">
+              <span>После полуночи · Записанная экранизация</span>
+              <span class="font-mono">02:16 / 08:40</span>
+            </div>
+            <div class="relative z-10 my-auto text-center space-y-3">
+              <button onclick="this.innerText = this.innerText === '▶' ? '⏸' : '▶'" class="w-16 h-16 rounded-full bg-[#793C49] text-white text-xl flex items-center justify-center mx-auto shadow-lg">▶</button>
+              <div class="text-xs text-white/80">На паузе · только изображение состояния</div>
+            </div>
+            <div class="relative z-10 space-y-2">
+              <div class="w-full h-1 bg-white/30 rounded-full overflow-hidden">
+                <div class="h-full bg-[#D6B39B]" style="width: 28%"></div>
+              </div>
+              <div class="flex justify-between text-[11px] text-white/80">
+                <span>🔊 Звук · CC Субтитры</span>
+                <span>⛶ Полный экран</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="surface-box p-6 flex flex-wrap items-center justify-between gap-4">
+            <div class="space-y-1">
+              <div class="text-xs font-medium text-[#793C49]">После просмотра</div>
+              <div class="text-xs meta">Следующая история: «Кофе после дождя» · современная романтика · 6 мин. Видеоверсия — 11:20.</div>
+            </div>
+            <div class="flex gap-3">
+              <button onclick="openStoryReader(0)" class="btn-paper-outline px-4 py-2 text-xs">← Вернуться к истории (42%)</button>
+              <button onclick="openStoryReader(1)" class="btn-wine px-4 py-2 text-xs">Читать «Кофе после дождя» →</button>
+            </div>
+          </div>
+        </section>
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 4: ВИДЕО ПО ИСТОРИЯМ (Exact match to Figma Frame 12:314623)  -->
+        <!-- =================================================================== -->
+        <section id="screen-videos" class="hidden space-y-10">
+          <div class="space-y-3">
+            <div class="kicker">ИЗ БИБЛИОТЕКИ — НА ЭКРАН</div>
+            <h1 class="font-serif-ed text-5xl sm:text-[60px] leading-[1.02] font-normal">
+              Те же чувства.<br />Другой язык.
+            </h1>
+            <p class="text-sm meta max-w-2xl pt-1">
+              Записанные адаптации прочитанных историй. Текст открыт каждому; для видео нужна подписка.
+            </p>
+          </div>
+
+          <div class="surface-box p-6 space-y-1.5">
+            <div class="text-sm font-medium text-[#793C49]">Видеоверсии доступны по подписке</div>
+            <p class="text-xs meta">
+              Все три постера размыты одинаково. Это состояние доступа к видео, а не скрытая обложка книги. 690 ₽ / месяц · условия до оформления.
+            </p>
+          </div>
+
+          <!-- Stacked Full-Width Video Adaptations (Matches 12:314623 1:1) -->
+          <div class="space-y-12">
+            <!-- Video Item 1 -->
+            <div class="space-y-4">
+              <div class="relative w-full aspect-[16/6] min-h-[240px] rounded-[6px] overflow-hidden bg-[#201A18] flex items-center justify-center text-center cursor-pointer" onclick="openStoryReaderAndScrollVideo(0)">
+                <img src="/assets/between-1323/video1.jpg" alt="После полуночи" class="video-catalog-poster absolute inset-0 w-full h-full object-cover blur-xl scale-105 brightness-50 transition duration-500" />
+                <div class="relative z-10 text-[#FFFDFA] space-y-1.5">
+                  <div class="text-base">🔒</div>
+                  <div class="text-xs">Доступно по подписке · 08:40</div>
+                </div>
+              </div>
+              <h3 class="font-serif-ed text-3xl font-normal">После полуночи</h3>
+              <p class="text-xs meta">Опоздав на последний трамвай, двое решают не торопить утро. Рассказ о смелости остаться рядом.</p>
+              <div class="flex items-center gap-3 pt-1">
+                <button onclick="openStoryReader(0)" class="btn-paper-outline px-4 py-2.5 text-xs">Читать историю</button>
+                <button onclick="switchScreen('subscription')" class="btn-wine px-4 py-2.5 text-xs">Условия подписки</button>
+              </div>
+            </div>
+
+            <!-- Video Item 2 -->
+            <div class="space-y-4">
+              <div class="relative w-full aspect-[16/6] min-h-[240px] rounded-[6px] overflow-hidden bg-[#201A18] flex items-center justify-center text-center cursor-pointer" onclick="openStoryReaderAndScrollVideo(1)">
+                <img src="/assets/between-1323/story2.jpg" alt="Кофе после дождя" class="video-catalog-poster absolute inset-0 w-full h-full object-cover blur-xl scale-105 brightness-50 transition duration-500" />
+                <div class="relative z-10 text-[#FFFDFA] space-y-1.5">
+                  <div class="text-base">🔒</div>
+                  <div class="text-xs">Доступно по подписке · 11:20</div>
+                </div>
+              </div>
+              <h3 class="font-serif-ed text-3xl font-normal">Кофе после дождя</h3>
+              <p class="text-xs meta">В маленьком кафе Лида и Денис учатся говорить о будущем, не загадывая его друг за друга.</p>
+              <div class="flex items-center gap-3 pt-1">
+                <button onclick="openStoryReader(1)" class="btn-paper-outline px-4 py-2.5 text-xs">Читать историю</button>
+                <button onclick="switchScreen('subscription')" class="btn-wine px-4 py-2.5 text-xs">Условия подписки</button>
+              </div>
+            </div>
+
+            <!-- Video Item 3 -->
+            <div class="space-y-4">
+              <div class="relative w-full aspect-[16/6] min-h-[240px] rounded-[6px] overflow-hidden bg-[#201A18] flex items-center justify-center text-center cursor-pointer" onclick="openStoryReaderAndScrollVideo(2)">
+                <img src="/assets/between-1323/story3.jpg" alt="Вечер в незнакомом городе" class="video-catalog-poster absolute inset-0 w-full h-full object-cover blur-xl scale-105 brightness-50 transition duration-500" />
+                <div class="relative z-10 text-[#FFFDFA] space-y-1.5">
+                  <div class="text-base">🔒</div>
+                  <div class="text-xs">Доступно по подписке · 14:10</div>
+                </div>
+              </div>
+              <h3 class="font-serif-ed text-3xl font-normal">Вечер в незнакомом городе</h3>
+              <p class="text-xs meta">Три старых друга встречаются на один вечер. У каждого — свой маршрут, но одна общая история.</p>
+              <div class="flex items-center gap-3 pt-1">
+                <button onclick="openStoryReader(2)" class="btn-paper-outline px-4 py-2.5 text-xs">Читать историю</button>
+                <button onclick="switchScreen('subscription')" class="btn-wine px-4 py-2.5 text-xs">Условия подписки</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="pt-4 border-t hairline text-xs meta">
+            У истории «Письмо, которое всё изменило» пока нет видео. Она остаётся в каталоге текстов.
+          </div>
+        </section>
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 5: AI ГЕРОИ (Exact match to Figma Frame 12:317904)           -->
+        <!-- =================================================================== -->
+        <section id="screen-ai_heroes" class="hidden space-y-10">
+          <div class="space-y-3">
+            <div class="kicker">ОТДЕЛЬНЫЙ ФОРМАТ / ВЫМЫШЛЕННЫЕ СОБЕСЕДНИКИ</div>
+            <h1 class="font-serif-ed text-5xl sm:text-[60px] leading-[1.02] font-normal">
+              Для разговора.<br />Не для продолжения книги.
+            </h1>
+            <p class="text-sm meta max-w-3xl pt-1">
+              AI герои не связаны с персонажами литературных историй. Можно начать собственный диалог или настроить личную версию.
+            </p>
+          </div>
+
+          <div class="surface-box p-6 space-y-1.5">
+            <div class="text-sm font-medium text-[#793C49]">Это AI, а не реальные люди</div>
+            <p class="text-xs meta">
+              Все герои вымышлены и старше 25 лет. Сообщения могут содержать неточности. Не сообщайте личные или чувствительные данные.
+            </p>
+          </div>
+
+          <!-- 2-Column Portrait Grid using original Figma /assets/between-1323/ai_lev.jpg & ai_inga.jpg -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-8 pb-10 border-b hairline">
+            <div class="space-y-4">
+              <div class="aspect-square rounded-[6px] overflow-hidden bg-[#DFDDD7] cursor-pointer" onclick="switchScreen('ai_chat')">
+                <img src="/assets/between-1323/ai_lev.jpg" alt="Лев, 36" class="w-full h-full object-cover hover:scale-[1.02] transition duration-500" />
+              </div>
+              <div class="kicker">ВЫМЫШЛЕННЫЙ ВЗРОСЛЫЙ · AI</div>
+              <h3 class="font-serif-ed text-4xl font-normal">Лев, 36</h3>
+              <p class="text-xs meta">Архитектор. Внимательный к деталям, с мягкой иронией.</p>
+              <button onclick="switchScreen('ai_chat')" class="btn-paper-outline w-full py-3 text-xs">
+                Открыть профиль
+              </button>
+            </div>
+
+            <div class="space-y-4">
+              <div class="aspect-square rounded-[6px] overflow-hidden bg-[#DFDDD7] cursor-pointer" onclick="switchScreen('ai_chat')">
+                <img src="/assets/between-1323/ai_inga.jpg" alt="Инга, 32" class="w-full h-full object-cover hover:scale-[1.02] transition duration-500" />
+              </div>
+              <div class="kicker">ВЫМЫШЛЕННЫЙ ВЗРОСЛЫЙ · AI</div>
+              <h3 class="font-serif-ed text-4xl font-normal">Инга, 32</h3>
+              <p class="text-xs meta">Переводчица. Любит прогулки и разговоры о языке.</p>
+              <button onclick="switchScreen('ai_chat')" class="btn-paper-outline w-full py-3 text-xs">
+                Открыть профиль
+              </button>
+            </div>
+          </div>
 
-      <section id="screen-create_ai" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-6">
-          <div class="text-xs uppercase tracking-[0.14em] wine-text font-semibold">КОНСТРУКТОР ОБРАЗА · 5 ШАГОВ</div>
-          <h1 class="font-serif-editorial text-4xl font-normal mt-1">Создать героя</h1>
-          <p class="text-sm meta-text mt-1">Все персонажи — вымышленные взрослые (18+).</p>
-        </div>
-        <div class="flex flex-wrap gap-2 text-xs">
-          <span class="px-3 py-1.5 rounded bg-[var(--accent-wine)] text-white font-medium">1 · Образ</span>
-          <span class="px-3 py-1.5 rounded surface-card">2 · Внешность</span>
-          <span class="px-3 py-1.5 rounded surface-card">3 · Характер</span>
-          <span class="px-3 py-1.5 rounded surface-card">4 · Голос и общение</span>
-          <span class="px-3 py-1.5 rounded surface-card">5 · Проверка</span>
-        </div>
-        <div class="surface-card p-6 max-w-xl space-y-4">
           <div>
-            <label class="block text-xs meta-text mb-1">Имя героя</label>
-            <input type="text" value="Алекс" class="w-full px-3.5 py-2 rounded border hairline-border bg-[var(--bg-paper)] text-sm" />
+            <button onclick="switchScreen('create_ai')" class="btn-paper-outline px-5 py-3 text-xs">
+              Создать своего героя →
+            </button>
           </div>
-          <div>
-            <label class="block text-xs meta-text mb-1">Возраст (только 18+)</label>
-            <input type="text" value="32 года · Взрослый вымышленный герой" class="w-full px-3.5 py-2 rounded border hairline-border bg-[var(--bg-paper)] text-sm" />
-          </div>
-          <div>
-            <label class="block text-xs meta-text mb-1">Атмосфера и характер</label>
-            <textarea rows="3" class="w-full px-3.5 py-2 rounded border hairline-border bg-[var(--bg-paper)] text-sm">Внимательный собеседник с мягким юмором. Любит ночные прогулки и кинематограф.</textarea>
-          </div>
-          <button onclick="switchScreen('ai_chat')" class="btn-wine px-5 py-2.5 text-xs">Сохранить и начать разговор →</button>
-        </div>
-      </section>
+        </section>
 
-      <section id="screen-personal" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-6">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text">ЛИЧНЫЙ АРХИВ</div>
-          <h1 class="font-serif-editorial text-4xl font-normal mt-1">Маленькие вещи, которые остаются.</h1>
-          <p class="text-sm meta-text mt-1">Сохранённые фрагменты из ваших диалогов и любимые строки из рассказов.</p>
-        </div>
-        <div class="surface-card p-6 space-y-3 max-w-2xl">
-          <div class="text-xs meta-text">Из рассказа «После полуночи»</div>
-          <blockquote class="font-serif-editorial italic text-2xl">
-            «С этими тёплыми свёртками они стали похожи на людей, возвращавшихся из одного дома.»
-          </blockquote>
-        </div>
-      </section>
-
-      <!-- ===================================================================== -->
-      <!-- SCREEN 10: ПОДПИСКА · УСЛОВИЯ (Figma Frame 12:313554 · 690 ₽ / мес)   -->
-      <!-- ===================================================================== -->
-      <section id="screen-subscription" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-8 space-y-3">
-          <div class="text-xs uppercase tracking-[0.14em] wine-text font-semibold">ВИДЕОВЕРСИИ / ОТДЕЛЬНО ОТ ЧТЕНИЯ</div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl leading-[1.04] font-normal">
-            Ещё один способ<br />почувствовать историю.
-          </h1>
-          <p class="text-base meta-text max-w-2xl">
-            Читайте все истории бесплатно. Подписка открывает только записанные видеоадаптации — не AI-диалоги и не доступ к текстам.
-          </p>
-        </div>
-
-        <div class="surface-card p-8 max-w-xl space-y-6">
-          <div class="flex items-center justify-between">
-            <span class="text-xs uppercase tracking-wider wine-text font-semibold">ОДИН ПЛАН · БИБЛИОТЕКА ВИДЕО</span>
-            <span class="wine-badge">18+</span>
+        <!-- =================================================================== -->
+        <!-- SCREEN 6: ПРОДОЛЖИТЬ ЧТЕНИЕ (Figma Frame 12:315008)                 -->
+        <!-- =================================================================== -->
+        <section id="screen-continue" class="hidden space-y-8">
+          <div class="space-y-3 pb-6 border-b hairline">
+            <div class="kicker">ВАША ПОЗИЦИЯ В ТЕКСТЕ</div>
+            <h1 class="font-serif-ed text-5xl font-normal">Мы оставили<br />страницу открытой.</h1>
+            <p class="text-sm meta max-w-xl">Только начатые истории. Закладки избранного и сохранённые AI-материалы находятся в своих разделах.</p>
           </div>
-          <div>
-            <div class="font-serif-editorial text-5xl font-semibold">690 ₽ / месяц</div>
-            <div class="text-xs meta-text mt-1">Продлевается автоматически · Отмена в любой момент в Настройках</div>
+
+          <div class="space-y-4">
+            <div class="surface-box p-6 space-y-3">
+              <div class="text-xs meta">Романтическая проза · 3 мин · Сегодня, 21:14 · абзац у моста</div>
+              <h3 class="font-serif-ed text-3xl font-normal">После полуночи</h3>
+              <p class="font-serif-ed italic text-lg meta">«На другой стороне реки им нужно было расстаться.»</p>
+              <div class="w-full h-[2px] bg-[#D8CFC3]"><div class="h-full bg-[#793C49]" style="width:42%"></div></div>
+              <div class="flex justify-between items-center pt-1">
+                <span class="text-xs meta">Прочитано 42% · Осталось 2 мин</span>
+                <button onclick="openStoryReader(0)" class="btn-wine px-4 py-2 text-xs">Продолжить с 42%</button>
+              </div>
+            </div>
+
+            <div class="surface-box p-6 space-y-3">
+              <div class="text-xs meta">Современная романтика · 6 мин · Вчера, 19:06 · начало рассказа</div>
+              <h3 class="font-serif-ed text-3xl font-normal">Кофе после дождя</h3>
+              <p class="font-serif-ed italic text-lg meta">«Кофе принесли в разных чашках.»</p>
+              <div class="w-full h-[2px] bg-[#D8CFC3]"><div class="h-full bg-[#793C49]" style="width:18%"></div></div>
+              <div class="flex justify-between items-center pt-1">
+                <span class="text-xs meta">Прочитано 18% · Осталось 5 мин</span>
+                <button onclick="openStoryReader(1)" class="btn-paper-outline px-4 py-2 text-xs">Продолжить с 18%</button>
+              </div>
+            </div>
           </div>
-          <ul class="space-y-2.5 text-sm">
-            <li>✓ &nbsp;Все доступные записанные видеоадаптации («После полуночи», «Кофе после дождя» и др.)</li>
-            <li>✓ &nbsp;Новые видеоверсии по мере выхода</li>
-            <li>✓ &nbsp;Полные тексты — всегда бесплатно и без подписки</li>
-          </ul>
-          <div class="pt-2 flex flex-wrap items-center gap-3">
-            <button onclick="setVideoAccess(true);openStoryReaderAndScrollVideo(0);" class="btn-wine px-6 py-3 text-sm">
+        </section>
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 7: ИЗБРАННОЕ (Figma Frame 12:315383)                         -->
+        <!-- =================================================================== -->
+        <section id="screen-favorites" class="hidden space-y-8">
+          <div class="space-y-3 pb-6 border-b hairline">
+            <div class="kicker">СОХРАНЁННОЕ ДЛЯ ВДОХНОВЕНИЯ</div>
+            <h1 class="font-serif-ed text-5xl font-normal">К этому<br />хочется вернуться.</h1>
+            <p class="text-sm meta max-w-xl">Истории, видео и AI герои — три отдельные коллекции.</p>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-7">
+            <div class="surface-box p-6 space-y-3">
+              <div class="kicker">РОМАНТИЧЕСКАЯ ПРОЗА · 3 мин</div>
+              <h3 class="font-serif-ed text-3xl font-normal">После полуночи</h3>
+              <p class="text-xs meta">Опоздав на последний трамвай, двое решают не торопить утро.</p>
+              <button onclick="openStoryReader(0)" class="text-xs text-[#793C49] hover:underline">Читать историю →</button>
+            </div>
+            <div class="surface-box p-6 space-y-3">
+              <div class="kicker">В КОЛЛЕКЦИИ</div>
+              <p class="text-xs meta">Истории · 2<br/>Видео · 1 («После полуночи», 08:40)<br/>AI герои · 1 (Инга, 32)</p>
+            </div>
+          </div>
+        </section>
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 8: ДИАЛОГИ С AI + ВИДЕОДИАЛОГ (12:321943 & 12:322342)        -->
+        <!-- =================================================================== -->
+        <section id="screen-ai_chat" class="hidden space-y-8">
+          <div class="flex flex-wrap items-center justify-between gap-4 pb-6 border-b hairline">
+            <div class="flex items-center gap-4">
+              <img src="/assets/between-1323/ai_lev.jpg" alt="Лев" class="w-14 h-14 rounded-full object-cover border hairline" />
+              <div>
+                <div class="kicker">ВЫМЫШЛЕННЫЙ ВЗРОСЛЫЙ · AI · ЛИЧНАЯ ВЕРСИЯ</div>
+                <h1 class="font-serif-ed text-3xl font-normal">Лев, 36 · Архитектор</h1>
+              </div>
+            </div>
+            <div class="flex gap-2">
+              <button onclick="document.getElementById('aiAvatarBox').classList.add('hidden')" class="btn-paper-outline px-3.5 py-2 text-xs">Текстовый диалог</button>
+              <button onclick="document.getElementById('aiAvatarBox').classList.remove('hidden')" class="btn-wine px-3.5 py-2 text-xs">AI видеодиалог (Аватар)</button>
+            </div>
+          </div>
+
+          <div id="aiAvatarBox" class="hidden relative rounded-[6px] overflow-hidden aspect-video max-w-2xl bg-[#211A18] text-white p-6 flex flex-col justify-between">
+            <img src="/assets/between-1323/ai_lev.jpg" alt="Лев AI аватар" class="absolute inset-0 w-full h-full object-cover brightness-75" />
+            <div class="relative z-10 flex justify-between text-xs text-white/80">
+              <span>AI ВИДЕОДИАЛОГ · Лев, 36 (AI аватар)</span>
+              <span>Камера пользователя: Выкл.</span>
+            </div>
+            <div class="relative z-10 bg-black/55 backdrop-blur-sm p-4 rounded max-w-md">
+              <p class="font-serif-ed italic text-lg">«Кажется, дождь решил задержать нас здесь. Я не против. А ты?»</p>
+            </div>
+          </div>
+
+          <div class="surface-box p-6 max-w-2xl space-y-4">
+            <div id="chatThread" class="space-y-3">
+              <div class="p-4 rounded bg-[#F5F0E8] max-w-md space-y-1">
+                <div class="text-[11px] meta">19:41 · Лев · AI</div>
+                <p class="text-xs">Кажется, дождь решил задержать нас здесь. Я не против. А ты?</p>
+              </div>
+              <div class="p-4 rounded bg-[#F3E8EA] ml-auto max-w-md space-y-1">
+                <div class="text-[11px] text-[#793C49]">19:41 · Вы</div>
+                <p class="text-xs">Если кофе хороший — я тоже. Часто сюда заходишь?</p>
+              </div>
+              <div class="p-4 rounded bg-[#F5F0E8] max-w-md space-y-1">
+                <div class="text-[11px] meta">19:42 · Лев · AI</div>
+                <p class="text-xs">Когда хочется замедлиться. Здесь никто не торопит, а бариста запоминает любимый кофе. Что заказать тебе?</p>
+              </div>
+            </div>
+            <form onsubmit="sendChat(event)" class="flex gap-2 pt-3 border-t hairline">
+              <input id="chatInp" type="text" placeholder="Написать Льву…" class="flex-1 px-3.5 py-2 rounded border hairline bg-[#F5F0E8] text-xs outline-none" />
+              <button type="submit" class="btn-wine px-4 py-2 text-xs">Отправить</button>
+            </form>
+          </div>
+        </section>
+
+        <!-- =================================================================== -->
+        <!-- SCREEN 9: МОИ AI / СОЗДАТЬ ГЕРОЯ / ЛИЧНОЕ / ПОДПИСКА / НАСТРОЙКИ     -->
+        <!-- =================================================================== -->
+        <section id="screen-my_ai" class="hidden space-y-6">
+          <div class="kicker">ЛИЧНЫЕ КОНФИГУРАЦИИ · AI</div>
+          <h1 class="font-serif-ed text-5xl font-normal">Мои AI</h1>
+          <div class="surface-box p-6 max-w-xl flex items-center justify-between gap-4">
+            <div class="flex items-center gap-4">
+              <img src="/assets/between-1323/ai_lev.jpg" alt="Лев" class="w-12 h-12 rounded-full object-cover" />
+              <div>
+                <div class="font-serif-ed text-2xl">Лев · моя версия</div>
+                <div class="text-xs meta">Спокойный темп · Вечерний город</div>
+              </div>
+            </div>
+            <button onclick="switchScreen('ai_chat')" class="btn-wine px-4 py-2 text-xs">Открыть диалог →</button>
+          </div>
+        </section>
+
+        <section id="screen-create_ai" class="hidden space-y-6">
+          <div class="kicker">КОНСТРУКТОР · 5 ШАГОВ</div>
+          <h1 class="font-serif-ed text-5xl font-normal">Создать своего героя</h1>
+          <div class="surface-box p-6 max-w-xl space-y-4">
+            <div class="flex gap-2 text-xs">
+              <span class="px-3 py-1 rounded bg-[#793C49] text-white">1 · Образ</span>
+              <span class="px-3 py-1 rounded border hairline">2 · Внешность</span>
+              <span class="px-3 py-1 rounded border hairline">3 · Характер</span>
+              <span class="px-3 py-1 rounded border hairline">4 · Голос</span>
+              <span class="px-3 py-1 rounded border hairline">5 · Проверка</span>
+            </div>
+            <div>
+              <label class="block text-xs meta mb-1">Имя героя (вымышленный взрослый 25+)</label>
+              <input type="text" value="Алекс, 32" class="w-full px-3 py-2 rounded border hairline bg-[#F5F0E8] text-xs" />
+            </div>
+            <div>
+              <label class="block text-xs meta mb-1">Характер и манера разговора</label>
+              <textarea rows="3" class="w-full px-3 py-2 rounded border hairline bg-[#F5F0E8] text-xs">Внимательный собеседник с мягкой иронией. Любит ночные прогулки и кинематограф.</textarea>
+            </div>
+            <button onclick="switchScreen('ai_chat')" class="btn-wine px-5 py-2.5 text-xs">Сохранить и начать диалог →</button>
+          </div>
+        </section>
+
+        <section id="screen-personal" class="hidden space-y-6">
+          <div class="kicker">ЛИЧНОЕ</div>
+          <h1 class="font-serif-ed text-5xl font-normal">Маленькие вещи, которые остаются.</h1>
+          <div class="surface-box p-6 max-w-xl space-y-2">
+            <div class="text-xs meta">Сохранённая строка · «После полуночи»</div>
+            <blockquote class="font-serif-ed italic text-2xl">«С этими тёплыми свёртками они стали похожи на людей, возвращавшихся из одного дома.»</blockquote>
+          </div>
+        </section>
+
+        <section id="screen-subscription" class="hidden space-y-8">
+          <div class="space-y-2">
+            <div class="kicker">ВИДЕОВЕРСИИ / ОТДЕЛЬНО ОТ ЧТЕНИЯ</div>
+            <h1 class="font-serif-ed text-5xl font-normal">Ещё один способ<br />почувствовать историю.</h1>
+            <p class="text-sm meta max-w-xl">Читайте все истории бесплатно. Подписка открывает только записанные видеоадаптации.</p>
+          </div>
+          <div class="surface-box p-8 max-w-xl space-y-5">
+            <div class="kicker">ОДИН ПЛАН · БИБЛИОТЕКА ВИДЕО</div>
+            <div class="font-serif-ed text-5xl">690 ₽ / месяц</div>
+            <ul class="text-xs space-y-2 meta">
+              <li>✓ Все доступные записанные видеоадаптации</li>
+              <li>✓ Новые видеоверсии по мере выхода</li>
+              <li>✓ Полные тексты — бесплатно и без подписки</li>
+            </ul>
+            <button onclick="setSubscriptionAccess(true);openStoryReaderAndScrollVideo(0)" class="btn-wine px-5 py-3 text-xs">
               Оформить подписку и открыть видео →
             </button>
-            <button onclick="openStoryReader(0)" class="btn-outline-editorial px-4 py-3 text-xs">
-              ← Вернуться к истории без оформления
-            </button>
           </div>
-        </div>
-      </section>
+        </section>
 
-      <!-- ===================================================================== -->
-      <!-- SCREEN 11: ВХОД (12:315832) & НАСТРОЙКИ (12:316253) & СОСТОЯНИЯ       -->
-      <!-- ===================================================================== -->
-      <section id="screen-login" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-6">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text">ВАШ АККАУНТ / 18+</div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl font-normal mt-1">Вернуться к своей странице.</h1>
-          <p class="text-sm meta-text mt-1">Войдите, чтобы проверить подписку и сохранить вашу библиотеку.</p>
-        </div>
-        <div class="surface-card p-7 max-w-md space-y-4">
-          <div>
-            <label class="block text-xs meta-text mb-1">Электронная почта</label>
-            <input type="email" value="anna@example.ru" class="w-full px-3.5 py-2 rounded border hairline-border bg-[var(--bg-paper)] text-sm" />
+        <section id="screen-login" class="hidden space-y-6">
+          <div class="kicker">ВАШ АККАУНТ / 18+</div>
+          <h1 class="font-serif-ed text-5xl font-normal">Вернуться к своей странице.</h1>
+          <div class="surface-box p-6 max-w-md space-y-4">
+            <div>
+              <label class="block text-xs meta mb-1">Электронная почта</label>
+              <input type="email" value="anna@example.ru" class="w-full px-3 py-2 rounded border hairline bg-[#F5F0E8] text-xs" />
+            </div>
+            <div>
+              <label class="block text-xs meta mb-1">Пароль</label>
+              <input type="password" value="••••••••••••" class="w-full px-3 py-2 rounded border hairline bg-[#F5F0E8] text-xs" />
+            </div>
+            <button onclick="setSubscriptionAccess(true);openStoryReaderAndScrollVideo(0)" class="btn-wine w-full py-2.5 text-xs">Войти</button>
           </div>
-          <div>
-            <label class="block text-xs meta-text mb-1">Пароль</label>
-            <input type="password" value="••••••••••••" class="w-full px-3.5 py-2 rounded border hairline-border bg-[var(--bg-paper)] text-sm" />
-          </div>
-          <label class="flex items-start gap-2 text-xs meta-text">
-            <input type="checkbox" checked class="mt-1" />
-            <span>Мне исполнилось 18 лет. Я согласна с условиями использования и политикой конфиденциальности.</span>
-          </label>
-          <div class="pt-2 flex gap-2">
-            <button onclick="setVideoAccess(true);openStoryReaderAndScrollVideo(0)" class="btn-wine flex-1 py-2.5 text-xs">Войти и вернуться к истории</button>
-          </div>
-        </div>
-      </section>
+        </section>
 
-      <section id="screen-settings" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-6">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text">АККАУНТ И ВАШ КОМФОРТ</div>
-          <h1 class="font-serif-editorial text-4xl sm:text-5xl font-normal mt-1">Настроить свой ритм.</h1>
-        </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl">
-          <div class="surface-card p-6 space-y-4">
-            <h3 class="font-serif-editorial text-2xl font-medium">Чтение</h3>
-            <p class="text-xs meta-text">
-              Шрифт: Cormorant Garamond. Размер текста на компьютере — 20 px, на телефоне — 18 px. Межстрочный интервал — 32 / 29 px.
-            </p>
-            <div class="flex items-center gap-3">
-              <button onclick="changeFontSize(-2)" class="btn-outline-editorial px-3 py-1.5 text-xs">А−</button>
-              <span class="text-xs font-medium">20 px</span>
-              <button onclick="changeFontSize(2)" class="btn-outline-editorial px-3 py-1.5 text-xs">А+</button>
+        <section id="screen-settings" class="hidden space-y-6">
+          <div class="kicker">АККАУНТ И ВАШ КОМФОРТ</div>
+          <h1 class="font-serif-ed text-5xl font-normal">Настроить свой ритм.</h1>
+          <div class="surface-box p-6 max-w-xl space-y-4">
+            <div class="font-serif-ed text-2xl">Чтение</div>
+            <p class="text-xs meta">Шрифт: Cormorant Garamond. Размер текста на компьютере — 20 px, межстрочный интервал — 32 px.</p>
+            <div class="flex items-center gap-2">
+              <button onclick="adjustFontSize(-2)" class="btn-paper-outline px-3 py-1.5 text-xs">А−</button>
+              <span id="settingsFontLbl" class="text-xs px-2">20 px</span>
+              <button onclick="adjustFontSize(2)" class="btn-paper-outline px-3 py-1.5 text-xs">А+</button>
             </div>
           </div>
-          <div class="surface-card p-6 space-y-4">
-            <h3 class="font-serif-editorial text-2xl font-medium">Приватность и доступность</h3>
-            <label class="flex items-center gap-2 text-xs"><input type="checkbox" checked /> Сохранять позицию чтения (42%)</label>
-            <label class="flex items-center gap-2 text-xs"><input type="checkbox" checked /> Субтитры для видеоверсий</label>
-            <label class="flex items-center gap-2 text-xs"><input type="checkbox" onchange="toggleThemeNoir()" /> Вечерняя тема NOIR (#10121A)</label>
-          </div>
-        </div>
-      </section>
+        </section>
 
-      <section id="screen-states" class="hidden space-y-8">
-        <div class="border-b hairline-border pb-6">
-          <div class="text-xs uppercase tracking-[0.14em] meta-text">ДОСКА СОСТОЯНИЙ И СПЕЦИФИКАЦИЯ FIGMA (12:317745 & 12:316744)</div>
-          <h1 class="font-serif-editorial text-4xl font-normal mt-1">Разные причины. Ясный следующий шаг.</h1>
-        </div>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
-          <div class="surface-card p-5 space-y-1.5">
-            <div class="wine-text font-semibold uppercase">01 / Палитра CHAPTER</div>
-            <p class="meta-text">Бумага <code>#F5F0E8</code> · Поверхность <code>#FFFDFA</code> · Текст <code>#24211D</code> · Мета <code>#686158</code> · Вино <code>#793C49</code></p>
+        <section id="screen-states" class="hidden space-y-6">
+          <div class="kicker">ИЗОБРАЖЁННЫЕ СОСТОЯНИЯ</div>
+          <h1 class="font-serif-ed text-5xl font-normal">Разные причины.<br />Ясный следующий шаг.</h1>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
+            <div class="surface-box p-5 space-y-1">
+              <div class="kicker">ОФОРМЛЕНИЕ · УСПЕХ</div>
+              <div class="font-serif-ed text-2xl">Подписка активна</div>
+              <p class="meta">Возврат к «После полуночи», в тот же блок видео. Позиция чтения 42% сохранена.</p>
+            </div>
+            <div class="surface-box p-5 space-y-1">
+              <div class="kicker">ПОДПИСКА ИСТЕКЛА</div>
+              <div class="font-serif-ed text-2xl">Период подписки закончился</div>
+              <p class="meta">Видео «После полуночи» закрыто. Рассказ остаётся бесплатным.</p>
+            </div>
           </div>
-          <div class="surface-card p-5 space-y-1.5">
-            <div class="wine-text font-semibold uppercase">02 / Оформление · Успех</div>
-            <p class="meta-text">Подписка активна. Возврат к «После полуночи», в тот же блок видео. Позиция чтения 42% сохранена.</p>
-          </div>
-          <div class="surface-card p-5 space-y-1.5">
-            <div class="wine-text font-semibold uppercase">03 / Подписка истекла</div>
-            <p class="meta-text">Видео «После полуночи» закрыто. Рассказ остаётся бесплатным.</p>
-          </div>
-        </div>
-      </section>
+        </section>
 
-    </main>
+      </main>
+    </div>
   </div>
 
-  <!-- Toast Notification -->
-  <div id="editorialToast" class="hidden fixed bottom-6 right-6 surface-card px-5 py-3 shadow-xl text-xs font-medium z-50">
-    🔖 Позиция чтения (42% · у моста) сохранена на вашей странице
-  </div>
+  <!-- Toast -->
+  <div id="toastMsg" class="hidden fixed bottom-6 right-6 surface-box px-4 py-2.5 shadow-lg text-xs z-50"></div>
 
   <script>
+    const SLUG = "between-1323";
     const STORIES = [
       {
         id: 0,
         genre: "Романтическая проза",
-        meta: "РОМАНТИЧЕСКАЯ ПРОЗА / 3 мин / 18+",
-        duration: "3 мин",
+        kicker: "РОМАНТИЧЕСКАЯ ПРОЗА · 3 мин",
+        readerKicker: "РОМАНТИЧЕСКАЯ ПРОЗА / 3 мин / 18+",
         timeCat: "short",
         mood: "night",
         hasVideo: true,
         videoDuration: "08:40",
+        img: `/assets/${SLUG}/story1.jpg`,
+        videoImg: `/assets/${SLUG}/video1.jpg`,
         title: "После полуночи",
-        characters: "Редакция «между.» · Вымышленные взрослые: Вера, 31 · Матвей, 34",
+        credits: "Редакция «между.» · Вымышленные взрослые: Вера, 31 · Матвей, 34",
         lead: "Опоздав на последний трамвай, двое решают не торопить утро. Рассказ о смелости остаться рядом.",
         quote: "«Вера услышала, как за поворотом стих последний трамвай. Город словно перевернул страницу.»",
         chapter: "I. После полуночи",
@@ -1212,119 +1028,127 @@
       {
         id: 1,
         genre: "Современная романтика",
-        meta: "СОВРЕМЕННАЯ РОМАНТИКА / 6 мин / 18+",
-        duration: "6 мин",
+        kicker: "СОВРЕМЕННАЯ РОМАНТИКА · 6 мин",
+        readerKicker: "СОВРЕМЕННАЯ РОМАНТИКА / 6 мин / 18+",
         timeCat: "long",
         mood: "warm",
         hasVideo: true,
         videoDuration: "11:20",
+        img: `/assets/${SLUG}/story2.jpg`,
+        videoImg: `/assets/${SLUG}/story2.jpg`,
         title: "Кофе после дождя",
-        characters: "Редакция «между.» · Вымышленные взрослые: Лида, 29 · Денис, 33",
+        credits: "Редакция «между.» · Вымышленные взрослые: Лида, 29 · Денис, 33",
         lead: "В маленьком кафе Лида и Денис учатся говорить о будущем, не загадывая его друг за друга.",
         quote: "«Кофе принесли в разных чашках. Лида решила, что это хороший знак: здесь не требовали совпадать.»",
         chapter: "I. Кофе после дождя",
         paragraphs: [
-          "Кофе принесли в разных чашках — одну широкую, с тонким золотым ободком, другую высокую, из тяжёлого тёплого фаянса. Лида решила, что это хороший знак: здесь не требовали совпадать.",
-          "За витриной шумел октябрьский ливень. Денис снял промокший шарф и положил его на спинку соседнего стула. Они знали друг друга три недели, но до сегодняшнего дня всегда встречались на ходу — между выставками, звонками и чужими компаниями.",
-          "— Знаешь, чего я боюсь в таких вечерах? — спросила Лида, согревая ладони о чашку. — Что кто-нибудь обязательно начнёт спрашивать про планы на пять лет вперёд.",
-          "— Тогда давай договоримся, — улыбнулся Денис. — Наше будущее сегодня заканчивается ровно в полночь. А дальше посмотрим, захочется ли его продлить.",
-          "Это сняло неловкость быстрее любого комплимента. Когда через час официант зажёг на столиках маленькие свечи, разговор уже шёл о том, какие окна в городе кажутся самыми уютными и почему в дождь так легко признаваться в желаниях."
+          "Кофе принесли в разных чашках — одну широкую, с тонким ободком, другую высокую, из тёплого фаянса. Лида решила, что это хороший знак: здесь не требовали совпадать.",
+          "За витриной Café Les Deux Amis шумел дождь. Денис снял промокший шарф и положил его на спинку стула. Впервые за месяц им не нужно было никуда спешить."
         ]
       },
       {
         id: 2,
         genre: "Проза о выборе",
-        meta: "ПРОЗА О ВЫБОРЕ / 8 мин / 18+",
-        duration: "8 мин",
+        kicker: "ПРОЗА О ВЫБОРЕ · 8 мин",
+        readerKicker: "ПРОЗА О ВЫБОРЕ / 8 мин / 18+",
         timeCat: "long",
         mood: "night",
         hasVideo: true,
         videoDuration: "14:10",
+        img: `/assets/${SLUG}/story3.jpg`,
+        videoImg: `/assets/${SLUG}/story3.jpg`,
         title: "Вечер в незнакомом городе",
-        characters: "Редакция «между.» · Вымышленные взрослые: Ася, 32 · Илья, 35 · Роман, 36",
+        credits: "Редакция «между.» · Вымышленные взрослые: Ася, 32 · Илья, 35 · Роман, 36",
         lead: "Три старых друга встречаются на один вечер. У каждого — свой маршрут, но одна общая история.",
         quote: "«Они встретились у гостиницы, которую никто из них не выбрал бы для себя. И потому всем было легко.»",
         chapter: "I. Вечер в незнакомом городе",
         paragraphs: [
-          "Они встретились у гостиницы, которую никто из них не выбрал бы для себя. И потому всем было легко. Чужой вокзал, влажный воздух северного города и три часа до ночного поезда создавали редкое чувство невесомости.",
-          "Ася смотрела, как Илья и Роман спорят о карте старого центра, и ловила себя на мысли, что за пять лет разлуки исчезла вся прежняя осторожность. Осталось только острое, почти осязаемое притяжение людей, которые слишком хорошо помнят друг друга."
+          "Они встретились у гостиницы, которую никто из них не выбрал бы для себя. И потому всем было легко. Тёплый свет люстры отражался в мокрых окнах холла."
         ]
       },
       {
         id: 3,
         genre: "Эпистолярная проза",
-        meta: "ЭПИСТОЛЯРНАЯ ПРОЗА / 4 мин / 18+",
-        duration: "4 мин",
+        kicker: "ЭПИСТОЛЯРНАЯ ПРОЗА · 4 мин",
+        readerKicker: "ЭПИСТОЛЯРНАЯ ПРОЗА / 4 мин / 18+",
         timeCat: "short",
         mood: "warm",
         hasVideo: false,
         videoDuration: "",
+        img: `/assets/${SLUG}/story4.jpg`,
+        videoImg: `/assets/${SLUG}/story4.jpg`,
         title: "Письмо, которое всё изменило",
-        characters: "Редакция «между.» · Вымышленные взрослые: Соня, 30 · Андрей, 34",
+        credits: "Редакция «между.» · Вымышленные взрослые: Соня, 30 · Андрей, 34",
         lead: "Соня возвращает непрочитанное письмо. Андрей предлагает начать не с объяснений, а с прогулки.",
         quote: "«Конверт пролежал в ящике стола почти год. Теперь Соня держала его так, словно это был билет в город, где она ещё не бывала.»",
         chapter: "I. Письмо",
         paragraphs: [
-          "Конверт пролежал в ящике стола почти год. Теперь Соня держала его так, словно это был билет в город, где она ещё не бывала. Бумага сохранила лёгкий запах табака и кедра.",
-          "Когда Андрей открыл дверь, он посмотрел на запечатанный конверт в её руке и не стал спрашивать, почему она не вскрыла его прошлой зимой. Он просто взял пальто с вешалки: «Пойдём к набережной. Прочитаешь вслух, если захочешь»."
+          "Конверт пролежал в ящике стола почти год. Теперь Соня держала его так, словно это был билет в город, где она ещё не бывала."
         ]
       }
     ];
 
-    let isSubscribed = false;
-    let isVideoPlaying = false;
-    let currentFontSize = 20;
-
-    const SCREEN_TITLES = {
+    const TITLES = {
       home: "Главная",
       catalog: "Истории",
       reader: "Истории / Чтение",
+      player: "Видео / После полуночи",
       videos: "Видео по историям",
       continue: "Продолжить чтение",
       favorites: "Избранное",
-      ai_heroes: "Другой формат · AI герои",
+      ai_heroes: "AI герои",
       ai_chat: "Диалоги / Лев · моя версия",
       my_ai: "Мои AI",
       create_ai: "Создать героя",
       personal: "Личное",
       subscription: "Подписка",
-      login: "Вход · 18+",
+      login: "Вход",
       settings: "Настройки",
       states: "Состояния интерфейса"
     };
 
-    function switchScreen(screenId) {
-      Object.keys(SCREEN_TITLES).forEach(k => {
+    let hasSub = false;
+    let fontSize = 20;
+
+    function switchScreen(id) {
+      Object.keys(TITLES).forEach(k => {
         const sec = document.getElementById('screen-' + k);
         if (sec) sec.classList.add('hidden');
         const nav = document.getElementById('nav-' + k);
         if (nav) nav.classList.remove('active');
       });
-      const target = document.getElementById('screen-' + screenId);
+      const target = document.getElementById('screen-' + id);
       if (target) target.classList.remove('hidden');
-      const activeNav = document.getElementById('nav-' + (screenId === 'reader' ? 'catalog' : screenId));
-      if (activeNav) activeNav.classList.add('active');
-      document.getElementById('topBreadcrumb').innerText = SCREEN_TITLES[screenId] || "Главная";
+      const navKey = (id === 'reader') ? 'catalog' : (id === 'player' ? 'videos' : id);
+      const navEl = document.getElementById('nav-' + navKey);
+      if (navEl) navEl.classList.add('active');
+      document.getElementById('topSectionTitle').innerText = TITLES[id] || "Главная";
       window.scrollTo({ top: 0, behavior: 'smooth' });
     }
 
     function renderCatalog(list) {
       const grid = document.getElementById('catalogGrid');
-      document.getElementById('catalogCountLabel').innerText = `${list.length} истории · Редакционный порядок`;
+      document.getElementById('catalogCountText').innerText = `${list.length} истории · Редакционный порядок`;
       grid.innerHTML = list.map(s => `
-        <article class="surface-card p-7 flex flex-col justify-between space-y-5">
-          <div class="space-y-3">
-            <div class="text-[11px] uppercase tracking-[0.12em] meta-text">${s.genre.toUpperCase()} · ${s.duration}</div>
-            <h3 class="font-serif-editorial text-3xl font-normal cursor-pointer hover:opacity-80" onclick="openStoryReader(${s.id})">${s.title}</h3>
-            <p class="text-sm meta-text leading-relaxed">${s.lead}</p>
-            <blockquote class="font-serif-editorial italic text-lg pt-3 border-t hairline-border">${s.quote}</blockquote>
+        <article class="space-y-3.5">
+          <div class="relative overflow-hidden rounded-[6px] aspect-[3/4] bg-[#DFDDD7] cursor-pointer" onclick="openStoryReader(${s.id})">
+            <img src="${s.img}" alt="${s.title}" class="w-full h-full object-cover hover:scale-[1.02] transition duration-500" />
+            <button onclick="event.stopPropagation();showToast('Добавлено в «Избранное»')" class="absolute top-3 right-3 w-8 h-8 rounded-[4px] bg-[#FFFDFA] border hairline flex items-center justify-center text-xs hover:bg-white">
+              🔖
+            </button>
           </div>
-          <div class="pt-4 border-t hairline-border flex items-center justify-between">
-            ${s.hasVideo
-              ? `<span class="wine-badge">🎬 Есть видео · по подписке (${s.videoDuration})</span>`
-              : `<span class="text-xs meta-text px-2.5 py-0.5 rounded border hairline-border">Пока только текст</span>`
-            }
-            <button onclick="openStoryReader(${s.id})" class="text-xs font-medium wine-text hover:underline">Читать историю →</button>
+          <div class="kicker pt-1">${s.kicker}</div>
+          <h3 class="font-serif-ed text-[28px] leading-[1.1] font-normal cursor-pointer hover:opacity-80" onclick="openStoryReader(${s.id})">
+            ${s.title}
+          </h3>
+          <p class="text-xs meta leading-relaxed">${s.lead}</p>
+          <blockquote class="font-serif-ed text-[18px] leading-[1.45] text-[#24211D]">${s.quote}</blockquote>
+          <div class="text-[11px] ${s.hasVideo ? 'text-[#24211D]' : 'meta'} pt-1">
+            ${s.hasVideo ? 'Есть видео · по подписке' : 'Пока только текст'}
+          </div>
+          <div class="flex items-center justify-between pt-1">
+            <button onclick="openStoryReader(${s.id})" class="text-xs text-[#793C49] hover:underline">Читать историю →</button>
+            <span class="text-xs meta">${s.hasVideo ? '🎬' : '📖'}</span>
           </div>
         </article>
       `).join('');
@@ -1346,125 +1170,107 @@
       renderCatalog(filtered);
     }
 
-    function openStoryReader(storyIdx) {
-      const s = STORIES[storyIdx] || STORIES[0];
-      document.getElementById('readerMetaCategory').innerText = s.meta;
+    function openStoryReader(idx) {
+      const s = STORIES[idx] || STORIES[0];
+      document.getElementById('readerKicker').innerText = s.readerKicker;
       document.getElementById('readerTitle').innerText = s.title;
       document.getElementById('readerLead').innerText = s.lead;
-      document.getElementById('readerCharacters').innerText = s.characters;
-      document.getElementById('readerChapterHeading').innerText = s.chapter;
-      document.getElementById('readerBodyParagraphs').innerHTML = s.paragraphs.map(p => `<p>${p}</p>`).join('');
-      document.getElementById('lockedStoryTitle').innerText = s.title;
-      document.getElementById('playerStoryTitle').innerText = s.title + " · Экранизация";
-      document.getElementById('lockedDuration').innerText = s.videoDuration || "08:40";
-      document.getElementById('lockedDurationSub').innerText = s.videoDuration || "08:40";
-      document.getElementById('playerDurationBadge').innerText = "02:16 / " + (s.videoDuration || "08:40");
+      document.getElementById('readerCredits').innerText = s.credits;
+      document.getElementById('readerCoverImg').src = s.img;
+      document.getElementById('readerChapterTitle').innerText = s.chapter;
+      document.getElementById('readerParagraphs').innerHTML = s.paragraphs.map(p => `<p>${p}</p>`).join('');
+      document.getElementById('videoPosterImg').src = s.videoImg;
+      document.getElementById('videoTitleUnlocked').innerText = s.title;
+      document.getElementById('videoDurationLocked').innerText = `Записанная экранизация · ${s.videoDuration || '08:40'}`;
+      document.getElementById('videoDurationUnlocked').innerText = `Записанная экранизация · ${s.videoDuration || '08:40'}`;
       switchScreen('reader');
     }
 
-    function openStoryReaderAndScrollVideo(storyIdx) {
-      openStoryReader(storyIdx);
+    function openStoryReaderAndScrollVideo(idx) {
+      openStoryReader(idx);
       setTimeout(() => {
-        const el = document.getElementById('endOfStoryVideoBlock');
+        const el = document.getElementById('endOfStoryVideo');
         if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
       }, 150);
     }
 
-    function setVideoAccess(unlocked) {
-      isSubscribed = unlocked;
-      const lockedCard = document.getElementById('videoLockedCard');
-      const unlockedCard = document.getElementById('videoUnlockedCard');
-      const bLock = document.getElementById('btnLockedState');
-      const bUnlock = document.getElementById('btnUnlockedState');
-      const mobSub = document.getElementById('mobSubBadge');
+    function setSubscriptionAccess(unlocked) {
+      hasSub = unlocked;
+      const img = document.getElementById('videoPosterImg');
+      const lockOv = document.getElementById('videoLockedOverlay');
+      const unlockOv = document.getElementById('videoUnlockedOverlay');
+      const bLock = document.getElementById('btnStateLocked');
+      const bUnlock = document.getElementById('btnStateUnlocked');
+      const pill = document.getElementById('subStatusPill');
+      const note = document.getElementById('videoFootnote');
+
+      document.querySelectorAll('.video-catalog-poster').forEach(el => {
+        if (unlocked) {
+          el.classList.remove('blur-xl', 'scale-105', 'brightness-50');
+          el.classList.add('brightness-75');
+        } else {
+          el.classList.add('blur-xl', 'scale-105', 'brightness-50');
+          el.classList.remove('brightness-75');
+        }
+      });
 
       if (unlocked) {
-        lockedCard.classList.add('hidden');
-        unlockedCard.classList.remove('hidden');
-        bUnlock.className = "px-2 py-0.5 rounded text-[11px] font-medium bg-[var(--accent-wine)] text-white";
-        bLock.className = "px-2 py-0.5 rounded text-[11px] font-medium meta-text hover:text-[var(--text-ink)]";
-        if (mobSub) mobSub.innerText = "Подписка: активна";
+        img.classList.remove('blur-xl', 'scale-105', 'brightness-50');
+        img.classList.add('brightness-75');
+        lockOv.classList.add('hidden');
+        unlockOv.classList.remove('hidden');
+        bUnlock.className = "px-2.5 py-1 rounded text-xs bg-[#793C49] text-white";
+        bLock.className = "btn-paper-outline px-2.5 py-1 text-xs";
+        pill.innerText = "Видео-доступ: Подписка активна ✓";
+        note.innerText = "Полный текст бесплатный. Подписка открывает только видеоверсии. Видео не запускается автоматически.";
       } else {
-        lockedCard.classList.remove('hidden');
-        unlockedCard.classList.add('hidden');
-        bLock.className = "px-2 py-0.5 rounded text-[11px] font-medium bg-[var(--accent-wine)] text-white";
-        bUnlock.className = "px-2 py-0.5 rounded text-[11px] font-medium meta-text hover:text-[var(--text-ink)]";
-        if (mobSub) mobSub.innerText = "Подписка: выкл";
+        img.classList.add('blur-xl', 'scale-105', 'brightness-50');
+        img.classList.remove('brightness-75');
+        lockOv.classList.remove('hidden');
+        unlockOv.classList.add('hidden');
+        bLock.className = "px-2.5 py-1 rounded text-xs bg-[#793C49] text-white";
+        bUnlock.className = "btn-paper-outline px-2.5 py-1 text-xs";
+        pill.innerText = "Видео-доступ: Без подписки (переключить)";
+        note.innerText = "Полный текст бесплатный. Подписка открывает только видеоверсии. 690 ₽ / месяц · продлевается автоматически. Условия — до оформления.";
       }
     }
 
-    function toggleSubscriptionState() {
-      setVideoAccess(!isSubscribed);
+    function toggleSubscriptionAccess() {
+      setSubscriptionAccess(!hasSub);
     }
 
-    function toggleVideoPlayback() {
-      isVideoPlaying = !isVideoPlaying;
-      document.getElementById('playPauseCircle').innerText = isVideoPlaying ? "⏸" : "▶";
-      document.getElementById('playPauseTextBtn').innerText = isVideoPlaying ? "⏸ Пауза" : "▶ Воспроизвести";
-      document.getElementById('videoStateNote').innerText = isVideoPlaying
-        ? "Идёт воспроизведение экранизации · Звук включён"
-        : "На паузе · Позиция чтения 42% сохранена";
-      document.getElementById('videoProgressBar').style.width = isVideoPlaying ? "64%" : "28%";
+    function adjustFontSize(delta) {
+      fontSize = Math.max(16, Math.min(26, fontSize + delta));
+      document.documentElement.style.setProperty('--reading-size', fontSize + 'px');
+      document.documentElement.style.setProperty('--reading-lh', Math.round(fontSize * 1.6) + 'px');
+      const lbl = document.getElementById('settingsFontLbl');
+      if (lbl) lbl.innerText = fontSize + ' px';
     }
 
-    function scrubVideo(e) {
-      const rect = e.currentTarget.getBoundingClientRect();
-      const pct = Math.max(5, Math.min(98, Math.round(((e.clientX - rect.left) / rect.width) * 100)));
-      document.getElementById('videoProgressBar').style.width = pct + "%";
-    }
-
-    function changeFontSize(delta) {
-      currentFontSize = Math.max(16, Math.min(26, currentFontSize + delta));
-      document.documentElement.style.setProperty('--reading-size', currentFontSize + 'px');
-      document.documentElement.style.setProperty('--reading-lh', Math.round(currentFontSize * 1.6) + 'px');
-      const ind = document.getElementById('fontSizeIndicator');
-      if (ind) ind.innerText = currentFontSize + ' px';
-    }
-
-    function toggleBookmarkToast() {
-      const t = document.getElementById('editorialToast');
-      t.classList.remove('hidden');
-      setTimeout(() => t.classList.add('hidden'), 3000);
-    }
-
-    function toggleAiVideoMode(showVideo) {
-      const box = document.getElementById('aiVideoCallBox');
-      const bText = document.getElementById('chatModeTextBtn');
-      const bVid = document.getElementById('chatModeVideoBtn');
-      if (showVideo) {
-        box.classList.remove('hidden');
-        bVid.className = "btn-wine px-3.5 py-1.5 text-xs";
-        bText.className = "btn-outline-editorial px-3.5 py-1.5 text-xs";
-      } else {
-        box.classList.add('hidden');
-        bText.className = "btn-wine px-3.5 py-1.5 text-xs";
-        bVid.className = "btn-outline-editorial px-3.5 py-1.5 text-xs";
-      }
-    }
-
-    function sendAiChatMessage(e) {
+    function sendChat(e) {
       e.preventDefault();
-      const inp = document.getElementById('aiChatInput');
-      const val = inp.value.trim();
-      if (!val) return;
-      const list = document.getElementById('chatMessagesList');
-      list.innerHTML += `
-        <div class="p-4 rounded-md bg-[var(--accent-wine-soft)] ml-auto max-w-lg space-y-1">
-          <div class="text-[11px] wine-text">Сейчас · Вы · Доставлено ✓✓</div>
-          <p class="text-sm">${val}</p>
+      const inp = document.getElementById('chatInp');
+      const v = inp.value.trim();
+      if (!v) return;
+      const th = document.getElementById('chatThread');
+      th.innerHTML += `
+        <div class="p-4 rounded bg-[#F3E8EA] ml-auto max-w-md space-y-1">
+          <div class="text-[11px] text-[#793C49]">Сейчас · Вы</div>
+          <p class="text-xs">${v}</p>
         </div>
-        <div class="subtle-box p-4 max-w-lg space-y-1">
-          <div class="text-[11px] meta-text">Сейчас · Лев · AI</div>
-          <p class="text-sm">Мне нравится, как ты это замечаешь. Давай возьмём ещё по чашке кофе и никуда не будем спешить.</p>
+        <div class="p-4 rounded bg-[#F5F0E8] max-w-md space-y-1">
+          <div class="text-[11px] meta">Сейчас · Лев · AI</div>
+          <p class="text-xs">Мне нравится, как ты это замечаешь. Давай возьмём ещё по чашке кофе и никуда не будем торопиться.</p>
         </div>
       `;
       inp.value = '';
     }
 
-    function toggleThemeNoir() {
-      document.body.classList.toggle('theme-noir');
-      const isNoir = document.body.classList.contains('theme-noir');
-      document.getElementById('themeSwitchBtn').innerText = isNoir ? "NOIR (#10121A)" : "CHAPTER (Бумага)";
+    function showToast(msg) {
+      const t = document.getElementById('toastMsg');
+      t.innerText = msg;
+      t.classList.remove('hidden');
+      setTimeout(() => t.classList.add('hidden'), 2800);
     }
 
     document.addEventListener('DOMContentLoaded', () => {