/* ============================================================
   YAZME STORY · дизайн-система
   ------------------------------------------------------------
   Один источник правды — токены сайта (--yz-*). Локальные --st-*
   существуют только как псевдонимы: их используют инлайн-стили
   в шаблонах, ломать этот контракт нельзя.

   Правила, которых тут придерживаемся:
   • ни одного «сырого» hex в UI — только токены и color-mix;
     фиксированные цвета допустимы лишь внутри тем обложек (это
     не интерфейс, а печатный макет книги);
   • шкала кегля и отступов — конечная, без подгонки на глаз;
   • всё, что может отсутствовать в старом Safari (dvh, cqw),
     имеет фолбэк;
   • hover-эффекты только под @media (hover:hover) — на тач-экране
     они залипали после тапа.
   ============================================================ */

:root{
  /* ---- цвет: псевдонимы к теме сайта ---- */
  --st-accent:      var(--yz-accent, #d97757);
  --st-accent-hi:   var(--yz-accent-hi, #e88a68);
  --st-accent-deep: var(--yz-accent-deep, #b05730);
  --st-accent-soft: var(--yz-accent-soft, rgba(217,119,87,.14));
  --st-accent-line: var(--yz-accent-line, rgba(217,119,87,.42));
  --st-grad:        var(--yz-grad, linear-gradient(135deg,#e2885f,#b3552e));
  --st-gold:        var(--yz-gold, #e2b13c);
  --st-success:     var(--yz-success, #58a76b);
  --st-danger:      var(--yz-danger, #e5484d);
  --st-violet:      #a78bfa;
  --st-aurora:      linear-gradient(115deg,#d97757 0%,#c96a8f 34%,#8b5cf6 68%,#4a7dff 100%);

  --st-bg:        var(--yz-bg, #0F0E0D);
  --st-bg-deep:   var(--yz-bg-deep, #0A0908);
  --st-bg-soft:   var(--yz-bg-deep, #0A0908);
  --st-surface:   var(--yz-surface, #22211F);
  --st-card:      var(--yz-surface, #22211F);
  --st-elev:      var(--yz-surface-2, #2E2C29);
  --st-text:      var(--yz-text, #faf9f5);
  --st-dim:       var(--yz-dim, #b9b4a7);
  /* был #8a8375 ≈ 4.3:1 на 11px — ниже AA. Теперь берём --yz-muted и
     нигде не опускаемся ниже 12px там, где им красят текст. */
  --st-faint:     var(--yz-muted, #8d8878);
  --st-border:    var(--yz-border, rgba(250,249,245,.08));
  --st-border-hi: var(--yz-border-strong, rgba(250,249,245,.17));
  --st-hairline:  var(--yz-border, rgba(250,249,245,.06));
  --st-shadow:    var(--yz-shadow-lg, 0 24px 60px -18px rgba(0,0,0,.65));
  --st-shadow-md: var(--yz-shadow-md, 0 10px 30px -12px rgba(0,0,0,.5));
  --st-shadow-sm: var(--yz-shadow-sm, 0 2px 8px rgba(0,0,0,.28));
  --st-glass:     var(--yz-glass, rgba(15,14,13,.78));
  --st-glass-brd: var(--yz-border-strong, rgba(250,249,245,.17));
  --st-scrim:     var(--yz-overlay, rgba(10,9,8,.72));

  /* ---- «бумага» книги: живёт отдельно от темы сайта ---- */
  --paper:     #faf7f0;
  --paper-2:   #f2ede1;
  --ink:       #211d18;
  --ink-dim:   #8a8173;
  --ink-acc:   #b05730;
  --paper-brd: rgba(33,29,24,.13);

  /* ---- типографика ---- */
  --f-ui:    var(--yz-font-ui, 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif);
  --f-disp:  var(--yz-font-display, 'Unbounded', 'Inter', sans-serif);
  --f-book:  'Literata', 'PT Serif', Georgia, serif;
  --f-title: 'Literata', 'Playfair Display', Georgia, serif;
  --f-script:'Caveat', cursive;

  /* шкала кегля: 12 / 13 / 14 / 15 / 16 / 18 / 20 / 24 / 30 / 38 / 48
     (раньше было 34 разных значения, включая 12.5 и 16.5 — подгонка на глаз) */
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:15px; --fs-lg:16px;
  --fs-xl:18px; --fs-2xl:20px; --fs-3xl:24px; --fs-4xl:30px; --fs-5xl:38px;

  /* шкала отступов: база 4px (было 27 произвольных значений) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:44px; --s9:64px;

  /* поля секции — как в /book, единым токеном */
  --gut: clamp(16px, 4vw, 48px);

  --r-s: 10px; --r-m: 16px; --r-l: 22px; --r-xl: 28px; --r-pill: 999px;
  --ease:   var(--yz-ease, cubic-bezier(.22,1,.36,1));
  --spring: var(--yz-spring, cubic-bezier(.34,1.45,.5,1));
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

/* Светлая и полуночная темы больше не переопределяют ничего вручную:
   всё вытекает из --yz-*, которые задаёт сама тема сайта. Раньше здесь
   был отдельный список из 15 значений, и половина UI всё равно ломалась
   из-за хардкодов ниже по файлу. */

/* ------------------------------------------------ базис -- */
.story-app *, .story-app *::before, .story-app *::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* Поля <body> на сайте нигде не сброшены — браузерные 8px давали рамку
   вокруг всей страницы модуля и горизонтальную прокрутку на телефоне. */
body.story-app{ margin:0; padding:0; overflow-x:hidden; }
/* Читалка занимает весь экран и прокручивается внутри себя */
html:has(> body.reader-body), body.reader-body{ height:100%; overflow:hidden; overscroll-behavior:none; }
.story-app{
  font-family:var(--f-ui); background:var(--st-bg); color:var(--st-text);
  min-height:100vh; min-height:100dvh; line-height:1.55; font-size:var(--fs-lg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* [fix 2026-09-03] Сброс завёрнут в :where() — он обнуляет вес селектора.
   Раньше `.story-app button` (0,1,1) перебивал компонентные правила вида
   `.st-btn` (0,1,0), и у кнопок пропадали фон, рамка и отступы. */
:where(.story-app img){ max-width:100%; display:block; }
.story-app [hidden]{ display:none !important; }
:where(.story-app a){ color:inherit; text-decoration:none; }
:where(.story-app button){ font-family:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:where(.story-app input,.story-app textarea,.story-app select){ font-family:inherit; font-size:var(--fs-lg); color:var(--st-text); }
.story-app ::selection{ background:var(--st-accent-soft); }
.story-app :focus-visible{ outline:2px solid var(--st-accent); outline-offset:2px; border-radius:6px; }

@media (prefers-reduced-motion: reduce){
  .story-app *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* нойз-текстура для «аналоговых» поверхностей */
.st-grain{ position:relative; }
.st-grain::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.05; border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

/* ------------------------------------------------ типовые элементы -- */
.st-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:var(--s3) var(--s5); border-radius:999px; font-weight:700; font-size:var(--fs-base);
  background:var(--st-elev); border:1px solid var(--st-border);
  transition:transform .22s var(--spring), box-shadow .22s, background .22s, opacity .2s;
  user-select:none; white-space:nowrap;
}
.st-btn:active{ transform:scale(.96); }
.st-btn.primary{
  background:var(--st-grad); color:#fff; border:0;
  box-shadow:0 8px 26px rgba(217,119,87,.38);
}
.st-btn.aurora{ background:var(--st-aurora); background-size:220% 220%; color:#fff; border:0; animation:st-aurora-shift 7s ease infinite; box-shadow:0 8px 30px rgba(139,92,246,.35); }
.st-btn.ghost{ background:transparent; }
.st-btn.small{ padding:var(--s2) var(--s4); font-size:var(--fs-sm); gap:var(--s2); }
.st-btn.big{ padding:var(--s4) var(--s7); font-size:var(--fs-lg); }
.st-btn.block{ width:100%; }
/* [fix 2026-09-03] на 320-360 px длинная подпись у .big выпирала за экран
   (у .st-btn стоит white-space:nowrap) — разрешаем перенос и режем паддинги. */
.st-btn{ max-width:100%; }
@media (max-width:380px){ .st-btn.big{ white-space:normal; padding-left:var(--s5); padding-right:var(--s5); } }
.st-btn[disabled]{ opacity:.5; pointer-events:none; }
.st-btn.danger{ color:var(--st-danger); border-color:color-mix(in srgb, var(--st-danger) 34%, transparent); }

.st-icobtn{
  width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--st-glass); border:1px solid var(--st-glass-brd); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  font-size:var(--fs-lg); transition:transform .2s var(--spring), background .2s; flex:0 0 auto;
}
.st-icobtn:active{ transform:scale(.9); }
.st-icobtn.accent{ background:var(--st-grad); color:#fff; border:0; }

.st-chip{
  display:inline-flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s4); border-radius:999px;
  background:var(--st-surface); border:1px solid var(--st-border); font-size:var(--fs-md); font-weight:600;
  transition:all .2s var(--spring); user-select:none; cursor:pointer;
}
.st-chip:active{ transform:scale(.95); }
.st-chip .em{ font-size:var(--fs-lg); }

.st-card-ui{
  background:var(--st-card); border:1px solid var(--st-hairline);
  border-radius:var(--r-l); padding:var(--s4);
}

.st-input, .st-textarea{
  width:100%; background:var(--st-surface); border:1.5px solid var(--st-border);
  border-radius:var(--r-m); padding:var(--s3) var(--s4); transition:border .2s;
}
.st-input:focus, .st-textarea:focus{ border-color:var(--st-accent); outline:none; }
.st-textarea{ resize:none; min-height:88px; line-height:1.5; }
.st-label{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--st-faint); margin:0 0 var(--s2) var(--s1); display:block; }

/* пилюля PRO / замок фичи */
.st-lock{
  display:inline-flex; align-items:center; gap:var(--s1); padding:var(--s1) var(--s2); border-radius:999px;
  font-size:var(--fs-2xs); font-weight:800; letter-spacing:.04em;
  background:linear-gradient(135deg,#e2b13c,#c98b2d); color:#221a08;
}

/* ------------------------------------------------ шапка модуля -- */
.st-top{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:var(--s2);
  padding:calc(10px + var(--sat)) var(--s3) var(--s2);
  background:linear-gradient(var(--st-bg) 55%, transparent);
}
.st-top .st-brand{
  font-family:var(--f-disp); font-weight:800; font-size:var(--fs-lg); letter-spacing:.02em;
  display:flex; align-items:center; gap:var(--s2);
}
.st-brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--st-aurora); background-size:300% 300%; animation:st-aurora-shift 5s ease infinite; box-shadow:0 0 14px rgba(167,139,250,.8); }
.st-top .sp{ flex:1; }

/* ------------------------------------------------ AURORA HERO (лендинг) -- *
@keyframes st-aurora-shift{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes st-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(167,139,250,.6)} 55%{ box-shadow:0 0 0 8px rgba(167,139,250,0)} }

/* печатная машинка-строка героя *
@keyframes st-caret{ 50%{ border-color:transparent } }

/* ------------------------------------------------ секции лендинга -- */
.st-section{ padding:var(--s7) 0 var(--s1); max-width:1080px; margin:0 auto; }
.st-section > h2, .st-row-head h2{
  font-family:var(--f-disp); font-size:clamp(19px,5vw,26px); font-weight:800; margin:0;
  padding:0 var(--s5); letter-spacing:-.01em;
}

.st-row-head{ display:flex; align-items:center; justify-content:space-between; padding-right:20px; }
.st-row-head .more{ color:var(--st-accent-hi); font-weight:700; font-size:var(--fs-sm); display:inline-flex; gap:var(--s1); align-items:center; }

.st-shelf{
  display:grid; grid-auto-flow:column; grid-auto-columns:132px; gap:var(--s4);
  overflow-x:auto; padding:var(--s4) var(--s5) var(--s6); scroll-snap-type:x mandatory; scrollbar-width:none;
}
.st-shelf::-webkit-scrollbar{ display:none; }
.st-shelf > *{ scroll-snap-align:start; }
@media(min-width:700px){ .st-shelf{ grid-auto-columns:158px; } }

/* карточка книги на полке */
.st-bookcard{ display:block; transition:transform .3s var(--spring); }
.st-bookcard .meta{ padding-top:10px; }
.st-bookcard .t{ font-weight:700; font-size:var(--fs-sm); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.st-bookcard .a{ color:var(--st-faint); font-size:var(--fs-xs); margin-top:3px; }
.st-bookcard .badge{ position:absolute; top:8px; left:8px; z-index:3; font-size:var(--fs-2xs); font-weight:800; background:var(--st-glass); border:1px solid var(--st-glass-brd); backdrop-filter:blur(8px); padding:var(--s1) var(--s2); border-radius:99px; letter-spacing:.05em; }
.st-bookcard .badge.wr{ background:rgba(226,177,60,.9); color:#241a05; border:0; }

/* ---------- ОБЛОЖКИ (общий рендер: полка, редактор, читалка) ---------- */
.st-cover{
  position:relative; width:100%; aspect-ratio:10/15; border-radius:6px 12px 12px 6px;
  overflow:hidden; container-type:inline-size; background:#3b352c;
  box-shadow:0 12px 26px rgba(0,0,0,.4), inset -2px 0 6px rgba(0,0,0,.28);
  transform:translateZ(0);
}
html[data-yz-theme="cloud"] .st-cover{ box-shadow:0 12px 26px rgba(95,75,40,.28), inset -2px 0 6px rgba(0,0,0,.2); }
.st-cover::before{ /* корешок */
  content:''; position:absolute; left:0; top:0; bottom:0; width:7%; z-index:4; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.34), rgba(255,255,255,.09) 55%, rgba(0,0,0,.12));
}
.st-cover::after{ /* блик */
  content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.1) 0%, transparent 28%);
}
.st-cover .cv{ position:absolute; inset:0; display:flex; flex-direction:column; padding:10cqw 9cqw 9cqw 13cqw; z-index:2; }
.st-cover .cv .ttl{ font-weight:700; line-height:1.16; overflow-wrap:break-word; }
.st-cover .cv .aut{ margin-top:auto; }
.st-cover .photo{ position:absolute; inset:0; object-fit:cover; width:100%; height:100%; }
.st-cover .veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.62) 78%); }

/* темы обложек */
.st-cover[data-th="classic"]{ background:linear-gradient(160deg,#f4ecd8,#e7dcc0); color:#3b3124; }
.st-cover[data-th="classic"] .cv{ border:1.6cqw solid rgba(90,70,40,.5); margin:6cqw; padding:8cqw 6cqw; align-items:center; text-align:center; }
.st-cover[data-th="classic"] .ttl{ font-family:var(--f-title); font-size:10.5cqw; }
.st-cover[data-th="classic"] .aut{ font-family:var(--f-ui); font-size:5cqw; letter-spacing:.14em; text-transform:uppercase; color:#7a6a50; }
.st-cover[data-th="classic"] .orn{ font-size:7cqw; color:#a08a5f; margin-bottom:4cqw; }

.st-cover[data-th="noir"]{ background:radial-gradient(120% 100% at 30% 0%, #262019, #12100c); color:#ecd9a6; }
.st-cover[data-th="noir"] .cv{ align-items:center; text-align:center; justify-content:center; gap:5cqw; }
.st-cover[data-th="noir"] .ttl{ font-family:var(--f-title); font-size:11cqw; color:#ecd9a6; text-shadow:0 2px 14px rgba(226,177,60,.25); }
.st-cover[data-th="noir"] .aut{ margin:0; font-size:4.6cqw; letter-spacing:.22em; text-transform:uppercase; color:#9c8b55; }
.st-cover[data-th="noir"] .line{ width:26cqw; height:1px; background:linear-gradient(90deg,transparent,var(--ink-orn),transparent); }

.st-cover[data-th="modern"]{ background:var(--cv-accent, #d97757); color:#fff; }
.st-cover[data-th="modern"] .cv{ padding-top:14cqw; }
.st-cover[data-th="modern"] .ttl{ font-family:var(--f-disp); font-size:12cqw; font-weight:900; letter-spacing:-.02em; }
.st-cover[data-th="modern"] .aut{ font-size:5cqw; font-weight:700; opacity:.85; }
.st-cover[data-th="modern"] .shape{ position:absolute; right:-16cqw; bottom:-16cqw; width:56cqw; height:56cqw; border-radius:50%; background:rgba(255,255,255,.16); }
.st-cover[data-th="modern"] .shape.s2{ right:auto; left:-12cqw; bottom:18cqw; width:30cqw; height:30cqw; background:rgba(0,0,0,.14); }

.st-cover[data-th="vintage"]{ background:#efe3c8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)' opacity='0.06'/%3E%3C/svg%3E"); color:#5a4630; }
.st-cover[data-th="vintage"] .cv{ align-items:center; text-align:center; justify-content:center; gap:4cqw; }
.st-cover[data-th="vintage"] .orn{ font-size:9cqw; color:#a3814e; }
.st-cover[data-th="vintage"] .ttl{ font-family:var(--f-title); font-style:italic; font-size:9.6cqw; }
.st-cover[data-th="vintage"] .aut{ margin:0; font-family:var(--f-script); font-size:7cqw; color:#7d6543; }

.st-cover[data-th="aurora"]{ background:var(--st-aurora); background-size:300% 300%; animation:st-aurora-shift 9s ease infinite; color:#fff; }
.st-cover[data-th="aurora"] .cv{ justify-content:flex-end; }
.st-cover[data-th="aurora"] .ttl{ font-family:var(--f-disp); font-weight:800; font-size:10.4cqw; text-shadow:0 3px 18px rgba(0,0,0,.35); }
.st-cover[data-th="aurora"] .aut{ font-size:5cqw; font-weight:700; opacity:.9; margin-top:3cqw; }

.st-cover[data-th="photo"] .cv{ justify-content:flex-end; z-index:3; }
.st-cover[data-th="photo"] .ttl{ font-family:var(--cv-font, var(--f-title)); font-size:10cqw; color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.55); }
.st-cover[data-th="photo"] .aut{ font-size:5cqw; color:rgba(255,255,255,.92); margin-top:3cqw; text-shadow:0 1px 8px rgba(0,0,0,.5); }

.st-cover .demo-tag{ position:absolute; right:6cqw; top:6cqw; z-index:6; font-size:4cqw; background:rgba(0,0,0,.4); color:#ffe9c9; padding:1.5cqw 4cqw; border-radius:99px; backdrop-filter:blur(6px); }

/* ------------------------------------------------ «как это работает» -- */
.st-how{ display:grid; gap:var(--s3); padding:var(--s4) var(--s5); grid-template-columns:1fr; }
@media(min-width:760px){ .st-how{ grid-template-columns:repeat(3,1fr); } }
.st-how .hw{ position:relative; overflow:hidden; }
.st-how .hw .n{ font-family:var(--f-disp); font-size:var(--fs-5xl); font-weight:900; opacity:.14; position:absolute; right:14px; top:6px; }
.st-how .hw .ic{ width:46px; height:46px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xl); background:var(--st-accent-soft); color:var(--st-accent-hi); margin-bottom:12px; }
.st-how .hw b{ font-size:var(--fs-lg); display:block; margin-bottom:6px; }
.st-how .hw p{ margin:0; color:var(--st-dim); font-size:var(--fs-md); }

/* бенто-примочки *
@media(min-width:760px){ .st-bento{ grid-template-columns:repeat(4,1fr); } }

/* ------------------------------------------------ ЧАТ-ТВОРЕЦ -- */
.st-chat-app{ display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; position:relative; }
.st-chat-head{
  display:flex; align-items:center; gap:var(--s3); padding:calc(8px + var(--sat)) var(--s3) var(--s2);
  background:var(--st-glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--st-hairline); z-index:30;
}
.st-ai-face{
  width:40px; height:40px; border-radius:50%; position:relative; flex:0 0 auto;
  background:var(--st-aurora); background-size:280% 280%; animation:st-aurora-shift 7s ease infinite;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:var(--fs-lg);
  box-shadow:0 0 18px rgba(167,139,250,.4);
}
.st-ai-face::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid rgba(167,139,250,.35); animation:st-pulse 2.6s ease infinite; }
.st-chat-head .who b{ font-size:var(--fs-base); display:block; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-chat-head .who span{ font-size:var(--fs-xs); color:var(--st-dim); display:block; }
.st-chat-head .who span.typing{ color:var(--st-violet); }
.st-chat-head .grow{ flex:1; }

.st-progressline{ height:3px; background:var(--st-hairline); position:relative; }
.st-progressline i{ position:absolute; left:0; top:0; bottom:0; background:var(--st-aurora); background-size:220% 100%; animation:st-aurora-shift 5s linear infinite; border-radius:99px; transition:width .6s var(--ease); }

.st-chat-scroll{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:var(--s4) var(--s4) var(--s5); scroll-behavior:smooth; }
.st-chat-inner{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:var(--s4); }

/* сообщения: ИИ — во всю ширину, юзер — справа пузырём */
.st-msg{ animation:st-in .35s var(--spring); }
@keyframes st-in{ from{ opacity:0; transform:translateY(10px) scale(.98);} to{ opacity:1; transform:none; } }
.st-msg.ai{ display:flex; gap:var(--s3); }
.st-msg.ai .st-ai-mini{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto; margin-top:2px;
  background:var(--st-aurora); background-size:280% 280%; animation:st-aurora-shift 7s ease infinite;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:var(--fs-xs);
}
.st-msg.ai .body{ flex:1; min-width:0; font-size:var(--fs-base); line-height:1.6; padding-top:4px; white-space:pre-wrap; overflow-wrap:break-word; }
.st-msg.user{ display:flex; justify-content:flex-end; }
.st-msg.user .body{
  max-width:82%; background:var(--st-grad); color:#fff; padding:var(--s3) var(--s4);
  border-radius:20px 20px 6px 20px; font-size:var(--fs-base); line-height:1.5; white-space:pre-wrap; overflow-wrap:break-word;
  box-shadow:0 6px 20px rgba(217,119,87,.28);
}
.st-msg .time{ font-size:var(--fs-2xs); color:var(--st-faint); margin-top:5px; }

/* индикатор «пишет» */
.st-typing{ display:inline-flex; gap:var(--s1); padding:var(--s3) var(--s1); align-items:center; }
.st-typing i{ width:7px; height:7px; border-radius:50%; background:var(--st-violet); animation:st-tp 1.2s ease infinite; }
.st-typing i:nth-child(2){ animation-delay:.15s } .st-typing i:nth-child(3){ animation-delay:.3s }
@keyframes st-tp{ 0%,100%{ opacity:.25; transform:translateY(0)} 45%{ opacity:1; transform:translateY(-4px)} }
.st-thinking-label{ font-size:var(--fs-xs); color:var(--st-dim); animation:st-fade 1.8s ease infinite; }
@keyframes st-fade{ 0%,100%{opacity:.45} 50%{opacity:1} }

/* чипы-подсказки под сообщением ИИ */
.st-sugs{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:10px; }
.st-sugs .st-chip{ font-size:var(--fs-sm); padding:var(--s2) var(--s3); background:var(--st-card); }

/* карточка-страница внутри чата (превью написанной страницы) */
.st-pagecard{
  background:var(--paper); color:var(--ink); border-radius:var(--r-m);
  padding:var(--s5) var(--s4) var(--s3); margin-top:12px; box-shadow:var(--st-shadow);
  font-family:var(--f-book); position:relative; overflow:hidden;
}
.st-pagecard .ch{ font-family:var(--f-title); font-size:var(--fs-sm); letter-spacing:.12em; text-transform:uppercase; color:var(--st-faint); text-align:center; margin-bottom:10px; }
.st-pagecard .tx{ font-size:var(--fs-md); line-height:1.7; max-height:190px; overflow:hidden; -webkit-mask-image:linear-gradient(#000 62%, transparent); mask-image:linear-gradient(#000 62%, transparent); white-space:pre-wrap; }
.st-pagecard .tx.open{ max-height:none; -webkit-mask-image:none; mask-image:none; }
.st-pagecard .num{ text-align:center; color:var(--st-faint); font-size:var(--fs-2xs); margin-top:8px; font-family:var(--f-ui); }
.st-pagecard .acts{
  display:flex; gap:var(--s1); flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px dashed rgba(90,70,40,.25);
  font-family:var(--f-ui);
}
.st-pagecard .acts button{
  display:inline-flex; gap:var(--s1); align-items:center; font-size:var(--fs-xs); font-weight:700; color:var(--ink-soft);
  padding:var(--s2) var(--s3); border-radius:99px; background:rgba(90,70,40,.08); transition:background .2s;
}
.st-pagecard .media-mini{ display:flex; gap:var(--s1); margin-top:10px; flex-wrap:wrap; }
.st-pagecard .media-mini .mm{ width:52px; height:52px; border-radius:10px; overflow:hidden; position:relative; }
.st-pagecard .media-mini .mm img, .st-pagecard .media-mini .mm video{ width:100%; height:100%; object-fit:cover; }
.st-pagecard .media-mini .mm .rm{ position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:var(--fs-2xs); display:flex; align-items:center; justify-content:center; }

/* карточка плана глав в чате */
.st-plancard{ background:var(--st-card); border:1px solid var(--st-border); border-radius:var(--r-l); padding:var(--s4); margin-top:12px; }
.st-plancard h4{ margin:0 0 var(--s2); font-size:var(--fs-md); display:flex; align-items:center; gap:var(--s2); }
.st-plancard ol{ margin:0; padding:0 0 0 0; list-style:none; display:flex; flex-direction:column; gap:var(--s2); }
.st-plancard li{ display:flex; gap:var(--s2); align-items:baseline; font-size:var(--fs-md); }
.st-plancard li .n{ font-family:var(--f-disp); font-size:var(--fs-xs); color:var(--st-accent-hi); min-width:20px; }

/* композер */
.st-composer{
  padding:var(--s2) var(--s3) calc(12px + var(--sab));
  background:var(--st-glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--st-hairline); z-index:30;
}
.st-composer .row{ display:flex; gap:var(--s2); align-items:flex-end; max-width:720px; margin:0 auto; }
.st-composer textarea{
  flex:1; background:var(--st-surface); border:1.5px solid var(--st-border); border-radius:22px;
  padding:var(--s3) var(--s4); max-height:132px; min-height:46px; line-height:1.45; resize:none;
}
.st-composer textarea:focus{ border-color:var(--st-accent); outline:none; }
.st-composer .send{ background:var(--st-grad); color:#fff; border:0; box-shadow:0 6px 18px rgba(217,119,87,.35); width:46px; height:46px; }
.st-composer .mic{ width:46px; height:46px; position:relative; }
.st-composer .mic.rec{ background:var(--st-aurora); background-size:250% 250%; animation:st-aurora-shift 3s ease infinite; color:#fff; border:0; }
.st-composer .mic.rec::before{ content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(167,139,250,.5); animation:st-pulse 1.4s ease infinite; }
.st-voice-hint{ text-align:center; font-size:var(--fs-xs); color:var(--st-violet); padding-top:8px; display:none; }
.st-voice-hint.on{ display:block; animation:st-fade 1.6s ease infinite; }

/* welcome-оверлей выбора пути *

/* ------------------------------------------------ ЧИТАЛКА -- */
/* Читалка держит собственный набор токенов и не зависит от темы сайта:
   раньше «ночь» делалась россыпью хардкодов в двух десятках правил,
   поэтому половина текста на светлой теме была нечитаемой. */
.st-reader{
  position:fixed; inset:0; overflow:hidden; background:var(--st-bg);
  /* сколько места занимают панели сверху и снизу — лист под них отступает */
  --ui-top:calc(54px + var(--sat)); --ui-bot:calc(58px + var(--sab));
  --paper:#faf7f0; --paper-2:#f2ede1; --ink:#211d18; --ink-dim:#8a8173;
  --ink-soft:#6d6355; --ink-acc:#b05730; --ink-orn:#c08b4a; --paper-brd:rgba(33,29,24,.13);
}
.st-reader.night{
  --paper:#17150f; --paper-2:#1e1b14; --ink:#e9e2d2; --ink-dim:#8f8468;
  --ink-soft:#a89c80; --ink-acc:#e88a68; --ink-orn:var(--ink-orn); --paper-brd:rgba(233,226,210,.14);
}
/* ==== книга листается постранично ====
   Страница занимает экран целиком. Если текста больше, чем помещается,
   он прокручивается ВНУТРИ страницы — от начала до конца, как обычная
   страница. Когда прокрутка внутри дошла до края, жест уходит наружу,
   и scroll-snap доводит следующую страницу. Текст по абзацам не режем. */
.st-book-scroll{
  height:100%; display:block; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none; overscroll-behavior-y:contain; scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
}
.st-book-scroll::-webkit-scrollbar{ display:none; }
.st-page{
  width:100%; height:100%; display:flex; position:relative; padding:0;
  scroll-snap-align:start; scroll-snap-stop:always;
}
.st-page.coverpg, .st-page.mediapg{ align-items:center; justify-content:center; }
.st-sheet{
  width:min(680px, 100%); height:100%; margin:0 auto; background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column; position:relative; font-family:var(--f-book);
  /* страница прокручивается сама; overscroll-behavior НЕ ставим — именно
     через него жест передаётся наружу и лента перелистывает страницу */
  overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
}
.st-sheet::-webkit-scrollbar{ display:none; }
@media(min-width:740px){
  .st-sheet{ border-radius:0; box-shadow:none; }
}
.st-reader.night .st-sheet{ background:var(--paper); color:var(--ink); }
/* Панели читалки висят поверх листа, поэтому лист сам резервирует под них
   место: иначе «Глава 1» пряталась под верхней полосой, а реакции и номер
   страницы — под нижней. */
.st-book-scroll .st-sheet{ padding-top:var(--ui-top); padding-bottom:var(--ui-bot); }
/* flex:1 0 auto — короткая страница растягивает лист на весь экран,
   длинная растит его по содержимому и лист начинает прокручиваться */
.st-sheet .inner{ flex:1 0 auto; padding:var(--s4) var(--s6) var(--s5); }
@media(min-width:740px){ .st-sheet .inner{ padding:var(--s6) 58px var(--s5); } }
/* хвост страницы: реакции и номер — в конце текста, а не поверх него */
.st-page .footrow{
  flex:none; margin-top:auto; padding:0 var(--s6) var(--s3);
  display:flex; flex-direction:column; gap:var(--s1); align-items:center;
}
/* «страница длиннее экрана» — мягкая подсказка у нижнего края */
.st-sheet.scrollable::after{
  content:''; position:sticky; bottom:0; display:block; height:52px; flex:none; margin-top:-52px;
  background:linear-gradient(transparent, var(--paper) 82%);
  transition:opacity .3s var(--ease); pointer-events:none;
}
.st-sheet.scrollable.atend::after{ opacity:0; }
.st-sheet p{ font-size:var(--fs-lg); line-height:1.78; margin:0 0 1em; text-indent:1.6em; }
.st-sheet p:first-of-type{ text-indent:0; }
.st-sheet .drop::first-letter{
  float:left; font-family:var(--f-title); font-size:var(--fs-5xl); line-height:.85; padding:var(--s1) var(--s2) 0 0; color:var(--st-accent);
}
.chapter-eyebrow{ font-family:var(--f-ui); font-size:var(--fs-2xs); font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-acc); text-align:center; margin-bottom:14px; }
.chapter-title{ font-family:var(--f-title); font-size:var(--fs-3xl); line-height:1.25; text-align:center; margin:0 0 var(--s2); font-weight:700; }
.chapter-orn{ text-align:center; color:var(--ink-orn); margin:var(--s2) 0 var(--s5); letter-spacing:.5em; font-size:var(--fs-xs); }
.guest-tag{
  display:flex; align-items:center; gap:var(--s2); justify-content:center; margin:0 0 var(--s4);
  font-family:var(--f-ui); font-size:var(--fs-xs); color:var(--ink-dim); font-weight:700;
}
.guest-tag .av{ width:24px; height:24px; border-radius:50%; background:var(--st-grad); color:#fff; display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xs); }

.st-pg-num{ font-family:var(--f-ui); text-align:center; font-size:var(--fs-2xs); color:var(--ink-dim); padding:var(--s2) 0 var(--s3); }

/* ==== обложечная страница читалки ====
   Была маленькая парящая карточка на 320px с подсказкой «листайте →».
   Стало: обложка во весь экран. Если картинка есть — она и есть страница,
   ничего поверх не пишем (в залитое фото название часто уже впечатано,
   и наш заголовок ложился на чужой текст). Заголовок и автор идут дальше,
   на титульной странице. */
.st-page.coverpg{
  padding:0; overflow:hidden; background:var(--st-bg-deep);
  flex-direction:column; gap:0;
}
/* подложка — та же картинка, размытая: закрывает поля сверху и снизу,
   когда пропорции обложки не совпадают с экраном */
.st-page.coverpg .cbg{
  position:absolute; inset:-10%; pointer-events:none; background-size:cover; background-position:center;
  filter:blur(52px) saturate(1.35); opacity:.62; transform:scale(1.16);
}
/* мягкая виньетка, чтобы поля над и под обложкой не выглядели пустыми */
.st-page.coverpg::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 78% at 50% 50%, transparent 42%, rgba(0,0,0,.42));
}
.st-page.coverpg .cimg{
  position:relative; z-index:2; display:block;
  width:100%; height:auto; max-height:100dvh; object-fit:contain;
}
@media(min-width:740px){
  .st-page.coverpg .cimg{
    width:auto; max-width:min(46vw, 460px); max-height:84dvh;
    border-radius:3px; box-shadow:0 46px 110px rgba(0,0,0,.62);
  }
}
/* нарисованная обложка (фото не загружали) — крупная карточка, без 3D-качания */
.st-page.coverpg .covwrap{ position:relative; z-index:2; width:min(430px, 86vw); }
.st-page.coverpg .st-cover{ box-shadow:0 40px 90px rgba(0,0,0,.55); }
.st-page.coverpg .cdemo{
  position:absolute; z-index:3; top:calc(64px + var(--sat)); right:var(--s4);
  font-family:var(--f-ui); font-size:var(--fs-2xs); font-weight:700; color:#fff;
  background:rgba(0,0,0,.42); backdrop-filter:blur(8px); padding:5px 12px; border-radius:var(--r-pill);
}
/* стрелка вниз вместо текстовой подсказки: чтение теперь вертикальное */
.st-page.coverpg .cdown{
  position:absolute; z-index:3; left:50%; bottom:calc(78px + var(--sab));
  width:46px; height:46px; border-radius:var(--r-pill); display:grid; place-items:center;
  color:#fff; font-size:var(--fs-md);
  background:rgba(255,255,255,.16); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22);
  animation:st-bob 2.4s var(--ease) infinite;
}
@keyframes st-bob{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,8px) } }
@media (prefers-reduced-motion: reduce){
  .st-page.coverpg .cdown{ animation:none; transform:translateX(-50%); }
}

.titlepage{ text-align:center; display:flex; flex-direction:column; justify-content:center; min-height:100%; }
.titlepage .small{ font-family:var(--f-ui); letter-spacing:.3em; font-size:var(--fs-2xs); text-transform:uppercase; color:var(--ink-acc); }
.titlepage h1{ font-family:var(--f-title); font-size:var(--fs-4xl); margin:var(--s4) 0 var(--s2); line-height:1.2; }
.titlepage .aut{ font-size:var(--fs-base); color:var(--ink-soft); font-style:italic; }
.titlepage .orn{ margin:var(--s6) 0; color:var(--ink-orn); letter-spacing:.6em; }
/* аннотация была захардкожена цветом #6d5f49 прямо в JS — на серой и чёрной
   «бумаге» она сливалась со страницей. Теперь это токен чернил. */
.titlepage .ann{ font-style:italic; color:var(--ink-soft); text-indent:0; font-size:var(--fs-base); margin:0; }

.dedication{ display:flex; flex-direction:column; justify-content:center; min-height:100%; text-align:center; }
.dedication .txt{ font-style:italic; font-size:var(--fs-lg); line-height:1.9; color:var(--ink-soft); white-space:pre-wrap; }
.circles-row{ display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; margin-top:26px; }
.circles-row video{ width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid var(--st-gold); cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.25); }

/* медиа-сетка страницы (до 5 фото/видео) */
.st-mediagrid{ display:grid; gap:var(--s2); height:100%; padding:var(--s6); align-content:center; }
.st-mediagrid .cell{ border-radius:14px; overflow:hidden; position:relative; }
.st-mediagrid .cell img,.st-mediagrid .cell video{ width:100%; height:100%; object-fit:cover; }
.st-mediagrid[data-n="1"]{ grid-template:1fr / 1fr; }
/* Две фотографии — самый частый разворот и самый обидный.

   ИСТОРИЯ. Сначала они клались стопкой во всю высоту, а cover срезал всё
   лишнее: у вертикального кадра оставалась полоса с плечами вместо
   человека. Тогда читалке велели ставить ячейке ПРОПОРЦИЮ САМОГО СНИМКА,
   и правила ниже были написаны под неё: auto-строки, align-items:center,
   max-height, тень на ячейке.

   Но инлайновая пропорция оказалась сильнее сетки: ячейка переставала
   слушаться дорожки и вылезала за страницу (замер: страница 805, дорожка
   439, ячейка 1312). Пропорция убрана из reader.js — а вместе с ней
   потеряли смысл и все правила, написанные под неё. Их нельзя было просто
   перекрыть новым блоком: align-items:center и max-height:100% пережили бы
   перекрытие по специфичности и вернули бы обрезку на десктопе.

   Поэтому правила переписаны здесь, на месте.
   Теперь: ячейка занимает свою дорожку, снимок вписывается целиком,
   пустое поле закрывает он же, размытый. */
.st-mediagrid[data-n="2"]{ grid-template:1fr 1fr / 1fr; align-content:stretch; }
.st-mediagrid[data-n="2"][data-por="2"]{ grid-template:1fr / 1fr 1fr; align-items:stretch; }
.st-mediagrid[data-n="2"] .cell{ width:auto; height:auto; min-width:0; min-height:0; }
.st-mediagrid[data-n="2"] .cell img,
.st-mediagrid[data-n="2"] .cell video{ width:100%; height:100%; object-fit:contain; }

.st-mediagrid[data-n="3"]{ grid-template:1.4fr 1fr / 1fr 1fr; }
.st-mediagrid[data-n="3"] .cell:first-child{ grid-column:span 2; }
.st-mediagrid[data-n="4"]{ grid-template:1fr 1fr / 1fr 1fr; }
.st-mediagrid[data-n="5"]{ grid-template:1.3fr 1fr / 1fr 1fr 1fr; }
.st-mediagrid[data-n="5"] .cell:nth-child(1){ grid-column:span 2; }
.st-mediagrid[data-n="5"] .cell:nth-child(2){ grid-row:span 1; }

/* ==== фото-страница книги: снимок на всю страницу ====
   Страница = фотография. Кадр не режем — он вписывается в экран целиком,
   а поля закрывает он же, размытый. Никаких подписей поверх. */
.st-page.mediapg{ padding:0; overflow:hidden; align-items:stretch; }
.st-page.mediapg .mbg{
  position:absolute; inset:-8%; background-size:cover; background-position:center;
  filter:blur(54px) saturate(1.25); opacity:.5;
}
.st-page.mediapg .st-mediagrid{
  position:relative; z-index:1; flex:1; width:100%; height:100%;
  padding:0; gap:2px; align-content:stretch;
}
.st-page.mediapg .st-mediagrid .cell{ border-radius:0; }

/* Несколько фотографий на странице — это уже вёрстка, а не заливка экрана:
   даём поля и скругление. Одиночный кадр по-прежнему во весь экран. */
.st-page.mediapg .st-mediagrid[data-n="2"],
.st-page.mediapg .st-mediagrid[data-n="3"]{
  padding:var(--s5, 22px); gap:var(--s3, 12px); align-content:stretch;
}
/* Скругления у ячейки здесь нет намеренно: при contain коробка ячейки не
   совпадает с видимым кадром, и радиус резал бы пустое поле, а не фото.
   Форму снимку задаёт тень по его собственному контуру. */

/* Подложке даём чуть больше голоса там, где кадров мало и поля крупные. */
.st-page.mediapg:has(.st-mediagrid[data-n="2"]) .mbg,
.st-page.mediapg:has(.st-mediagrid[data-n="3"]) .mbg{ opacity:.55; }

/* ═══════════════════════════════════════════════════════════════════════
   ФОТО НА СТРАНИЦЕ — общие правила
   ═══════════════════════════════════════════════════════════════════════
   Ячейка занимает свою дорожку и ничего не растягивает; снимок вписывается
   целиком; поля закрывает размытая подложка.

   min-height/min-width:0 — не украшение: без них содержимое ячейки снова
   получает право раздвинуть дорожку, и обрезка возвращается.

   overflow здесь НЕ hidden. Резать нечего (кадр и так вписан), а hidden
   срезал бы боковины тени под фотографией: при contain снимок почти всегда
   ровно по ширине ячейки, и половина тени уходила под обрез. */
.st-page.mediapg .st-mediagrid > .cell{
  width:auto; height:auto; min-height:0; min-width:0; overflow:visible;
}
.st-page.mediapg .st-mediagrid > .cell > img,
.st-page.mediapg .st-mediagrid > .cell > video{
  width:100%; height:100%; display:block; object-fit:contain;
}

/* Когда кадр показан целиком, поля вокруг него неизбежны — и от них
   разворот легко читается как недогруженная страница. Тень идёт по контуру
   САМОГО снимка (drop-shadow работает по вписанному изображению, а не по
   коробке ячейки) и превращает поле в подложку: фотография начинает лежать
   НА странице. Одиночный кадр во весь экран рамок не получает. */
.st-page.mediapg .st-mediagrid:not([data-n="1"]) > .cell > img,
.st-page.mediapg .st-mediagrid:not([data-n="1"]) > .cell > video{
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.42));
}

/* ── РАСКЛАДКА: ФОРМА КАДРА ПРОТИВ ФОРМЫ ЭКРАНА ────────────────────────
   Первая версия этого блока разворачивала сетку по форме ЭКРАНА и стала
   регрессией: замеры в браузере показали, что три горизонтальных кадра
   на десктопе занимали 30% страницы вместо 63%, а три вертикальных на
   планшете — 28% вместо 59%. Ставить кадры стопкой на узком экране
   правильно только тогда, когда сами кадры широкие.

   Правило теперь такое: базовая мозаика (крупный кадр сверху, два снизу)
   работает всегда, КРОМЕ случая, когда форма кадров противоположна форме
   экрана. Тогда и только тогда разворачиваем их в один ряд или в одну
   колонку — там это даёт кратный выигрыш:

     вертикальные кадры на широком экране : 25% → 75%
     горизонтальные кадры на узком экране : 41% → 86%

   Ориентацию берём из data-por/data-land — их читалка проставляет давно.
   На книгах, где размеры кадров не сохранены, оба атрибута нулевые,
   правила просто не срабатывают, и остаётся базовая мозаика. */
@media (min-aspect-ratio: 1/1){
  .st-page.mediapg .st-mediagrid[data-n="2"][data-por="2"]{ grid-template:1fr / 1fr 1fr; }
  .st-page.mediapg .st-mediagrid[data-n="3"][data-por="3"]{ grid-template:1fr / repeat(3,1fr); }
  .st-page.mediapg .st-mediagrid[data-n="3"][data-por="3"] > .cell:first-child{ grid-column:auto; }
}
@media (max-aspect-ratio: 1/1){
  .st-page.mediapg .st-mediagrid[data-n="2"][data-land="2"]{ grid-template:1fr 1fr / 1fr; }
  .st-page.mediapg .st-mediagrid[data-n="3"][data-land="3"]{ grid-template:repeat(3,1fr) / 1fr; }
  .st-page.mediapg .st-mediagrid[data-n="3"][data-land="3"] > .cell:first-child{ grid-column:auto; }
}

/* Шести кадров на развороте у книги больше не бывает (потолок вёрстки —
   три), но альбом их присылает. Без своей раскладки они складывались в
   одну колонку и занимали 11% страницы. */
.st-page.mediapg .st-mediagrid[data-n="6"]{ grid-template:repeat(2,1fr) / repeat(3,1fr); }

/* Телефон: разворот занимает экран целиком, без полей и скруглений.
   Специфичность здесь выше, чем у правила с :not() выше по файлу, иначе
   сетки на 4-5 кадров оставались с полями, а именно им они мешают
   сильнее всего. */
@media (max-width:600px){
  .st-page.mediapg .st-mediagrid[data-n],
  .st-page.mediapg .st-mediagrid[data-n="2"],
  .st-page.mediapg .st-mediagrid[data-n="3"]{ padding:0; gap:2px; }
  .st-page.mediapg .st-mediagrid[data-n="4"]{ grid-template:1fr 1fr / 1fr 1fr; }
  .st-page.mediapg .st-mediagrid[data-n="5"]{ grid-template:1fr 1fr / repeat(3,1fr); }
}

/* ── СТИХИ ──────────────────────────────────────────────────────────────
   Два места на книгу: посвящение и последняя строфа финала. Строфа
   набирается не как проза — ей нужны центровка, разрядка и воздух.

   Размер считаем ОТ --read-size: это переменная ползунка «Aa» в читалке.
   С фиксированным var(--fs-lg) стих не реагировал на настройку размера и
   при крупном шрифте оказывался на треть мельче основного текста. */
.st-sheet .inner p.verse{
  text-align:center; font-family:var(--f-title); font-style:normal;
  font-size:calc(var(--read-size, var(--fs-lg)) * 1.06); line-height:2.05;
  color:var(--ink); margin:var(--s6) auto; max-width:32ch;
  text-indent:0; letter-spacing:.004em;
}
.st-sheet .inner p.verse::before{
  content:"✦"; display:block; font-size:.5em; color:var(--ink-dim);
  margin-bottom:var(--s4); letter-spacing:.3em;
}

/* ── ПОСВЯЩЕНИЕ ─────────────────────────────────────────────────────────
   Первая страница после обложки и единственная во всей книге, где
   рассказчик молчит, а книга обращается к человеку прямо и по имени.
   Читается как тост: крупно, коротко, с воздухом вокруг.

   Курсив и приглушённый цвет сняты — от них страница выглядела сноской,
   а не посвящением, и книга начиналась не с торжества, а с примечания. */
.dedication{ gap:var(--s5); align-items:center; }
.dedication .txt{
  font-family:var(--f-title); font-style:normal;
  font-size:clamp(20px, 3.3vw, 30px); line-height:2.0;
  color:var(--ink); white-space:pre-wrap; max-width:26ch;
  letter-spacing:.004em; margin:0 auto;
}
.dedication .txt::before{
  content:"❦"; display:block; font-size:.6em; color:var(--ink-dim);
  margin-bottom:var(--s5); letter-spacing:.35em;
}


/* финальная страница */
.finalpage{ text-align:center; display:flex; flex-direction:column; justify-content:center; min-height:100%; gap:var(--s3); align-items:center; font-family:var(--f-ui); }
.finalpage .fin{ font-family:var(--f-title); font-size:var(--fs-3xl); }
.finalpage .stats{ display:flex; gap:var(--s4); justify-content:center; color:var(--ink-dim); font-size:var(--fs-sm); }
.finalpage .stats b{ display:block; font-size:var(--fs-2xl); font-family:var(--f-disp); color:var(--ink); }
.finalpage .em{ font-size:var(--fs-5xl); }
.finalpage .who{ text-indent:0; color:var(--ink-soft); font-size:var(--fs-sm); font-family:var(--f-ui); margin:0; }
.finalpage .acts{ display:flex; flex-direction:column; gap:var(--s2); width:min(300px,100%); }
/* прогресс + низ читалки */
.st-reader-ui{ position:absolute; left:0; right:0; z-index:40; pointer-events:none; }
/* Панель — аккуратная стеклянная полоса, а не тёмный градиент.
   Градиент поверх кремового листа читался как грязное пятно наверху
   страницы; здесь же кнопкам нужна ровная подложка, а не растушёвка. */
.st-reader-ui.top{
  top:0; padding:calc(8px + var(--sat)) var(--s3) var(--s2); display:flex; gap:var(--s2); align-items:center;
  background:color-mix(in srgb, var(--st-bg-deep) 74%, transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid color-mix(in srgb, var(--st-text) 9%, transparent);
}
.st-reader-ui.top .st-icobtn, .st-reader-ui .st-btn{ pointer-events:auto; }
.st-reader-ui.top .ttl{ flex:1; text-align:center; font-size:var(--fs-sm); font-weight:700; color:var(--st-text); opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 var(--s1); }
.st-reader-bar{
  position:absolute; bottom:0; left:0; right:0; z-index:40; display:flex; gap:var(--s2); align-items:center;
  padding:var(--s2) var(--s3) calc(10px + var(--sab));
  /* та же стеклянная полоса, что и наверху: градиент оставлял серую муть
     на нижней трети светлого листа */
  background:color-mix(in srgb, var(--st-bg-deep) 74%, transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-top:1px solid color-mix(in srgb, var(--st-text) 9%, transparent);
  opacity:1; transition:opacity .3s, transform .3s;
}
.st-reader.hideui .st-reader-bar, .st-reader.hideui .st-reader-ui.top{ opacity:0; pointer-events:none; transform:translateY(6px); }
.st-reader.hideui .st-reader-ui.top{ transform:translateY(-6px); }
.st-progress-track{ flex:1; height:4px; border-radius:99px; background:color-mix(in srgb, var(--st-text) 18%, transparent); position:relative; pointer-events:auto; }
.st-progress-track i{ position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:var(--st-grad); transition:width .25s; }
.st-pgindic{ font-size:var(--fs-xs); color:var(--st-dim); font-weight:700; min-width:52px; text-align:center; }

/* реакции на страницу */
.st-react-row{ display:flex; gap:var(--s1); align-items:center; font-family:var(--f-ui); margin-top:18px; justify-content:center; flex-wrap:wrap; }
/* Было padding:var(--s1) var(--s3) — около 28px высоты. Это главная (и
   почти единственная) кнопка получателя книги, и она была вдвое меньше
   минимальной тап-цели. */
.st-react-row button{ min-height:44px; min-width:44px; padding:var(--s2) var(--s3); border-radius:99px; background:rgba(90,70,40,.08); font-size:var(--fs-md); transition:transform .2s var(--spring); }
.st-react-row button:active{ transform:scale(1.25); }
.st-react-row button.on{ background:var(--st-accent-soft); outline:1px solid var(--st-accent); }
.st-reader.night .st-react-row button{ background:rgba(255,255,255,.07); }

/* --------------------------- комментарии (шит) --------------------------- */
.st-sheet-modal{
  position:fixed; inset:0; z-index:120; display:none; align-items:flex-end; justify-content:center;
}
.st-sheet-modal.open{ display:flex; }
.st-sheet-modal .scrim{ position:absolute; inset:0; background:var(--st-scrim); backdrop-filter:blur(3px); animation:st-fadein .25s; }
@keyframes st-fadein{ from{opacity:0} }
.st-sheet-modal .panel{
  position:relative; width:100%; max-width:640px; max-height:88dvh; display:flex; flex-direction:column;
  background:var(--st-surface); border-radius:26px 26px 0 0; border:1px solid var(--st-glass-brd);
  animation:st-up .38s var(--spring); overflow:hidden;
}
@media(min-width:740px){
  .st-sheet-modal{ align-items:center; padding:var(--s5); }
  .st-sheet-modal .panel{ border-radius:26px; max-height:82dvh; }
}
@keyframes st-up{ from{ transform:translateY(60px); opacity:.4 } }
.st-sheet-modal .grab{ width:44px; height:5px; border-radius:99px; background:var(--st-border); margin:var(--s2) auto var(--s1); }
.st-sheet-modal .head{ display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s4); }
.st-sheet-modal .head b{ font-size:var(--fs-lg); flex:1; }
.st-sheet-modal .bodyy{ flex:1; overflow-y:auto; padding:var(--s1) var(--s4) var(--s4); overscroll-behavior:contain; }

.st-comment{ display:flex; gap:var(--s3); padding:var(--s3) var(--s1); }
.st-comment .av{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 auto; margin-top:2px; }
.st-comment .av.ghost{ background:var(--st-card); }
.st-comment .c-main{ flex:1; min-width:0; }
.st-comment .c-top{ display:flex; gap:var(--s2); align-items:baseline; flex-wrap:wrap; }
.st-comment .c-name{ font-size:var(--fs-sm); font-weight:700; letter-spacing:.01em; }
.st-comment .c-time{ font-size:var(--fs-2xs); color:var(--st-faint); font-weight:500; }
.st-comment .c-page{
  font-size:var(--fs-2xs); font-weight:700; color:var(--st-dim); background:var(--st-card);
  border:1px solid var(--st-hairline); border-radius:99px; padding:var(--s1) var(--s2); cursor:pointer; transition:all .2s;
}
.st-comment .c-quote{
  border-left:2.5px solid var(--st-gold); background:rgba(226,177,60,.07); border-radius:4px 10px 10px 4px;
  padding:var(--s1) var(--s3); font-size:var(--fs-sm); font-style:italic; color:var(--st-dim); margin:var(--s2) 0 var(--s1);
  font-family:var(--f-book); overflow-wrap:break-word;
}
.st-comment .c-quote::before{ content:'« '; color:var(--st-gold); }
.st-comment .c-quote::after{ content:' »'; color:var(--st-gold); }
.st-comment .c-text{ font-size:var(--fs-base); line-height:1.5; margin-top:5px; white-space:pre-wrap; overflow-wrap:break-word; }
.st-comment .c-text.deleted{ color:var(--st-faint); font-style:italic; font-size:var(--fs-sm); }
.st-comment .c-text.emoji-stk{ font-size:var(--fs-5xl); line-height:1.1; margin-top:6px; }
.st-comment .c-text.coin-stk{ font-size:var(--fs-xs); color:var(--st-faint); margin-top:6px; } /* маркер заменится картинкой coin-global */
.st-comment .c-text.coin-stk .coin-inline-sticker{ max-width:128px; max-height:128px; }
.st-comment .c-meta{ display:flex; gap:var(--s1); margin-top:7px; align-items:center; }
.st-comment .c-meta button{
  font-size:var(--fs-xs); color:var(--st-faint); display:inline-flex; gap:var(--s1); align-items:center; font-weight:600;
  padding:var(--s1) var(--s2); border-radius:99px; transition:all .2s;
}
.st-comment .c-meta button.liked{ color:var(--st-accent-hi); }
.st-comment .c-meta .delbtn{ margin-left:auto; opacity:.6; }
.st-comment .replies{ margin-left:20px; border-left:1.5px solid var(--st-hairline); padding-left:14px; margin-top:4px; }
.st-comment .replies .st-comment{ padding:var(--s2) 0; }
.st-comment .replies .av{ width:28px; height:28px; }
.st-comment .circvid{ width:132px; height:132px; border-radius:50%; object-fit:cover; margin-top:7px; cursor:pointer; border:2.5px solid var(--st-violet); box-shadow:0 6px 20px rgba(139,92,246,.25); }
.st-voiceplayer{ display:flex; align-items:center; gap:var(--s2); background:var(--st-card); border-radius:99px; padding:var(--s2) var(--s3) var(--s2) var(--s2); margin-top:6px; max-width:270px; }
.st-voiceplayer .pp{ width:34px; height:34px; border-radius:50%; background:var(--st-grad); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.st-voiceplayer .wave{ flex:1; height:22px; display:flex; gap:var(--s1); align-items:center; }
.st-voiceplayer .wave i{ flex:1; background:var(--st-border); border-radius:2px; min-height:4px; }
.st-voiceplayer .wave i.on{ background:var(--st-accent); }
.st-voiceplayer .tt{ font-size:var(--fs-2xs); color:var(--st-faint); }

/* ---------- композер комментариев: как в мессенджерах 2026 ---------- */
.st-comment-composer{
  border-top:1px solid var(--st-hairline); padding:var(--s2) var(--s3) calc(12px + var(--sab));
  background:var(--st-glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.st-comment-composer .quoting{
  display:flex; gap:var(--s2); align-items:center; background:rgba(226,177,60,.1); border-left:3px solid var(--st-gold);
  border-radius:8px; padding:var(--s2) var(--s2); font-size:var(--fs-xs); margin-bottom:8px; color:var(--st-dim);
}
.st-comment-composer .quoting .x{ margin-left:auto; }

/* ==== поле комментария ====
   Одна цельная пилюля: стикеры слева, отправка справа, текст между ними.
   Раньше поле и две круглые кнопки были тремя отдельными блоками с
   выравниванием по нижнему краю — при наборе второй строки текст ехал
   относительно кнопок, и строка «плыла». */
.cmp-row{ display:flex; }
.cmp-field{
  flex:1; display:flex; align-items:flex-end; gap:var(--s1); min-width:0;
  background:var(--st-card); border:1.5px solid var(--st-border); border-radius:22px;
  padding:5px 5px 5px var(--s1); transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cmp-field:focus-within{ border-color:var(--st-accent); box-shadow:0 0 0 3px var(--st-accent-soft); }
.cmp-stick{
  width:36px; height:36px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xl); color:var(--st-faint); border-radius:var(--r-pill);
  transition:color .2s, transform .2s var(--spring);
}
.cmp-stick:active{ transform:scale(.85); }
.cmp-field textarea{
  flex:1; background:none; border:0; outline:none; resize:none; min-width:0; display:block;
  /* высота считается в JS по scrollHeight; padding сверху и снизу одинаковый,
     иначе первая строка не совпадает с центром кнопок */
  padding:6px var(--s1); height:36px; min-height:36px; max-height:132px; overflow-y:auto;
  font-family:var(--f-ui); font-size:16px; line-height:24px; color:var(--st-text); font-weight:450;
  scrollbar-width:none;
}
.cmp-field textarea::-webkit-scrollbar{ display:none; }
.cmp-field textarea::placeholder{ color:var(--st-faint); font-weight:400; }
.cmp-send{
  width:36px; height:36px; flex:0 0 auto; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-md);
  background:color-mix(in srgb, var(--st-text) 10%, transparent); color:var(--st-faint);
  transition:transform .22s var(--spring), background .2s var(--ease), color .2s var(--ease);
}
.cmp-send.ready{ background:var(--st-grad); color:#fff; box-shadow:0 4px 14px rgba(217,119,87,.35); }
.cmp-send:active{ transform:scale(.88); }
.cmp-send:disabled{ cursor:default; }

/* трей стикеров */
.st-stickers-tray{ display:none; padding:var(--s2) var(--s1) var(--s1); }
.st-stickers-tray.open{ display:block; animation:st-up .3s var(--spring); }
.tray-tabs{ display:flex; gap:var(--s1); padding-bottom:9px; }
.tray-tabs button{ font-size:var(--fs-xs); font-weight:700; color:var(--st-faint); padding:var(--s2) var(--s3); border-radius:99px; background:var(--st-card); }
.tray-tabs button.on{ color:#fff; background:var(--st-grad); }
.tray-body{ display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:var(--s2); max-height:200px; overflow-y:auto; }
.tray-body .emoji-b{ font-size:var(--fs-4xl); padding:var(--s2) var(--s1); border-radius:14px; transition:transform .15s var(--spring), background .2s; }
.tray-body .emoji-b:active{ transform:scale(1.3); }
.tray-body .coin-b{
  position:relative; aspect-ratio:1; border-radius:14px; background:var(--st-card);
  border:1px solid var(--st-hairline); padding:var(--s2); transition:transform .18s var(--spring), border-color .2s;
}
.tray-body .coin-b img{ width:100%; height:100%; object-fit:contain; }
.tray-body .coin-b .cnt{
  position:absolute; top:3px; right:3px; font-size:9.5px; font-weight:800; color:#221a08;
  background:linear-gradient(135deg,#e2b13c,#c98b2d); border-radius:99px; padding:1px var(--s1);
}
.tray-body .coin-b[disabled]{ opacity:.4; }

/* выделение текста в читалке → тултип */
.st-seltip{
  position:fixed; z-index:130; display:none; gap:var(--s1); background:var(--st-elev); border:1px solid var(--st-glass-brd);
  border-radius:14px; box-shadow:var(--st-shadow); padding:var(--s1); backdrop-filter:blur(16px);
}
.st-seltip button{ padding:var(--s2) var(--s3); font-size:var(--fs-xs); font-weight:700; border-radius:10px; display:flex; gap:var(--s1); align-items:center; }

/* ------------------------------------------------ карточки цитат --
   Карточка занимает всю доступную высоту шторки и подстраивается под экран:
   раньше она была фиксированных 300px, и на маленьком телефоне вместе со
   стилями и кнопками не помещалась. */
.st-quotecard-editor .preview-wrap{
  display:flex; justify-content:center; align-items:center;
  height:100%; padding:var(--s2) 0;
}
.st-qcard{
  /* высота от доступного места, но не меньше 300px: на большом экране
     панель шторки имеет высоту по содержимому, проценты в ней не считаются,
     и карточка схлопывалась в 109×194 — текст просто не помещался внутрь */
  height:min(100%, 620px); min-height:min(300px, 52vh); width:auto; aspect-ratio:9/16; max-width:100%;
  border-radius:18px; overflow:hidden; position:relative;
  display:flex; flex-direction:column; justify-content:center; padding:9%; text-align:center;
  box-shadow:var(--st-shadow); container-type:inline-size;
}
.st-qcard .q{ font-family:var(--f-title); font-size:7.4cqw; line-height:1.45; position:relative; z-index:2; }
.st-qcard .mark{ font-family:var(--f-title); font-size:16cqw; line-height:.6; opacity:.4; z-index:2; margin-bottom:2cqw; }
.st-qcard .who{ margin-top:7cqw; font-family:var(--f-ui); font-size:4.4cqw; font-weight:700; display:flex; align-items:center; gap:2.6cqw; justify-content:center; z-index:2; }
.st-qcard .who img{ width:9cqw; height:9cqw; border-radius:50%; object-fit:cover; }
.st-qcard .brand{ position:absolute; bottom:5%; left:0; right:0; text-align:center; font-family:var(--f-disp); font-size:3.6cqw; letter-spacing:.14em; opacity:.65; z-index:2; }
.st-qcard[data-st="paper"]{ background:var(--paper); color:#3b3226; }
.st-qcard[data-st="noir"]{ background:radial-gradient(120% 100% at 50% 0%, #29231b, #100e0a); color:#ead9a8; }
.st-qcard[data-st="aurora"]{ background:var(--st-aurora); background-size:280% 280%; animation:st-aurora-shift 8s ease infinite; color:#fff; }
.st-qcard[data-st="mono"]{ background:#0e0e0e; color:#fff; }
.st-qcard[data-st="mono"] .q{ font-family:var(--f-disp); font-weight:800; font-size:8cqw; line-height:1.28; letter-spacing:-.01em; }
.st-qcard[data-st="mono"] .mark{ color:var(--st-accent); opacity:1; font-size:13cqw; }
.st-qcard[data-st="mono"] .brand{ letter-spacing:.24em; opacity:.5; }
.st-qc-styles{ display:flex; gap:var(--s2); justify-content:center; padding-bottom:var(--s3); overflow-x:auto; scrollbar-width:none; }
.st-qc-styles::-webkit-scrollbar{ display:none; }
.st-qc-styles .st-chip{ flex:0 0 auto; }
/* низ шторки не прокручивается вместе с карточкой — он всегда на виду */
.qc-foot{
  flex:none; padding:var(--s3) var(--s4) calc(14px + var(--sab));
  border-top:1px solid var(--st-hairline); background:var(--st-surface);
}
.qc-sw{
  display:flex; gap:var(--s2); align-items:center; justify-content:center;
  font-size:var(--fs-sm); color:var(--st-dim); margin-bottom:var(--s3);
}
.qc-sw input{ width:18px; height:18px; accent-color:var(--st-accent); }
.qc-acts{ display:flex; gap:var(--s2); }
.qc-acts .st-btn.block{ flex:1; }
.qc-acts .st-btn:not(.block){ flex:0 0 auto; width:52px; padding:0; justify-content:center; }
#qcard-sheet .bodyy{ padding:0 var(--s4); min-height:0; }
/* на широком экране шторка карточки — окно с явной высотой:
   без неё проценты внутри не от чего считать */
@media (min-width:1180px){
  #qcard-sheet .panel{ height:min(86dvh, 880px); max-height:none; min-height:0; max-width:440px; }
}

/* ------------------------------------------------ модалки-центр -- */
.st-modal{ position:fixed; inset:0; z-index:140; display:none; align-items:center; justify-content:center; padding:var(--s4); }
.st-modal.open{ display:flex; }
.st-modal .scrim{ position:absolute; inset:0; background:var(--st-scrim); backdrop-filter:blur(4px); }
.st-modal .box{
  position:relative; width:100%; max-width:440px; max-height:88dvh; overflow-y:auto;
  background:var(--st-surface); border:1px solid var(--st-glass-brd); border-radius:var(--r-xl);
  padding:var(--s5); animation:st-pop .32s var(--spring);
}
@keyframes st-pop{ from{ transform:scale(.92) translateY(14px); opacity:0 } }
.st-modal h3{ margin:0 0 var(--s1); font-size:var(--fs-xl); font-family:var(--f-disp); font-weight:800; }
.st-modal .sub{ color:var(--st-dim); font-size:var(--fs-md); margin:0 0 var(--s4); }

/* тосты */
.st-toast{
  position:fixed; left:50%; bottom:calc(24px + var(--sab)); transform:translateX(-50%) translateY(20px);
  background:var(--st-elev); border:1px solid var(--st-glass-brd); color:var(--st-text);
  padding:var(--s3) var(--s5); border-radius:99px; font-size:var(--fs-md); font-weight:600; z-index:200;
  opacity:0; pointer-events:none; transition:all .3s var(--spring); box-shadow:var(--st-shadow);
  max-width:88vw; text-align:center;
}
.st-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* конфетти-финал */
.st-confetti{ position:fixed; inset:0; pointer-events:none; z-index:300; overflow:hidden; }
.st-confetti i{ position:absolute; width:9px; height:14px; top:-20px; border-radius:2px; animation:st-conf 2.8s ease-in forwards; }
@keyframes st-conf{ to{ transform:translateY(110vh) rotate(720deg); opacity:.2; } }

/* ------------------------------------------------ прочее -- */
.st-empty{ text-align:center; padding:40px var(--s6); color:var(--st-dim); }
.st-empty .em{ font-size:var(--fs-5xl); margin-bottom:10px; }
@keyframes st-skel{ to{ background-position:-200% 0 } }
.st-footer{ text-align:center; color:var(--st-faint); font-size:var(--fs-xs); padding:var(--s7) var(--s5) calc(90px + var(--sab)); }
.st-footer a{ color:var(--st-dim); }

/* печать книги в PDF из читалки */
@media print{
  .st-reader-ui, .st-reader-bar, .st-sheet-modal, .st-seltip, .st-toast{ display:none !important; }
  .st-reader{ height:auto; overflow:visible; background:#fff; }
  .st-book-scroll{ display:block; overflow:visible; height:auto; }
  .st-page{ height:auto; min-height:100vh; page-break-after:always; display:block; }
  .st-sheet{ height:auto; box-shadow:none; width:100%; padding:0; }
  .st-sheet .inner{ overflow:visible; }
  /* Абзацы стартуют с opacity:0 и проявляются по IntersectionObserver.
     Всё, что человек не пролистал глазами, печаталось пустыми листами. */
  .st-sheet p.rin{ opacity:1 !important; transform:none !important; }
}

/* ---------- лендинг 2.1: компактнее и чище ---------- *
.st-cover.newtile{ display:flex; align-items:center; justify-content:center; background:var(--st-card); border:2px dashed var(--st-border); box-shadow:none; }
.st-inviteband{ display:flex; gap:var(--s3); align-items:center; margin:var(--s2) var(--s5) var(--s1); padding:var(--s4) var(--s4); }
.st-inviteband .em{ font-size:var(--fs-4xl); }
.st-inviteband .tx{ flex:1; min-width:180px; }
.st-inviteband .tx b{ display:block; font-size:var(--fs-base); }
.st-inviteband .tx span{ font-size:var(--fs-sm); color:var(--st-dim); }

/* ============================================================
   ЛЕНДИНГ 3.0 — «БУМАГА ВМЕСТО НЕОНА»
   ============================================================ */
.st-subbar{
  display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s4) var(--s1);
  max-width:1080px; margin:0 auto;
}
.st-subbar .crumb{
  display:inline-flex; gap:var(--s2); align-items:center; font-family:var(--f-disp);
  font-weight:800; font-size:var(--fs-base); color:var(--st-text);
}
.st-subbar .crumb i{ color:var(--st-accent-hi); font-size:var(--fs-sm); }
.st-subbar .sp{ flex:1; }

.st-paperhero-wrap{ padding:var(--s3) var(--s3) var(--s2); max-width:1080px; margin:0 auto; }
.st-paperhero{
  position:relative; background:var(--paper); color:var(--ink);
  border-radius:26px; padding:var(--s7) 28px var(--s7);
  box-shadow:0 24px 70px rgba(0,0,0,.42), 0 2px 0 rgba(255,255,255,.05) inset;
  display:flex; gap:var(--s5); align-items:center; overflow:hidden;
}
html[data-yz-theme="cloud"] .st-paperhero{ box-shadow:0 22px 60px rgba(95,75,40,.25); }
.st-paperhero::before{ /* линия прошивки слева, как у тетради */
  content:''; position:absolute; left:22px; top:18px; bottom:18px; width:1px;
  background:repeating-linear-gradient(rgba(90,70,40,.22) 0 7px, transparent 7px 15px);
}
.ph-left{ flex:1; min-width:0; position:relative; padding-left:14px; }
.ph-eyebrow{
  font-family:var(--f-ui); font-size:var(--fs-2xs); font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-acc); margin-bottom:14px;
}
.ph-title{
  font-family:var(--f-title); font-weight:700; color:var(--ink);
  font-size:clamp(30px, 7.4vw, 52px); line-height:1.12; margin:0 0 var(--s3); letter-spacing:-.01em;
  position:relative;
}
.ph-title em{ font-style:italic; color:var(--st-accent-deep); }
.ph-stroke{ display:block; width:min(230px, 60%); height:10px; margin-top:6px; }
.ph-sub{
  font-family:var(--f-book); font-size:clamp(15px, 4vw, 17.5px); line-height:1.6;
  color:color-mix(in srgb, var(--ink) 72%, transparent); margin:0 0 var(--s4);
}
.ph-hand{ font-family:var(--f-script); font-size:1.25em; color:#b3552e; border-bottom:2px dotted rgba(179,85,46,.4); }
.ph-chips{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:20px; }
.story-app .ph-chip{
  font-family:var(--f-ui); font-size:var(--fs-sm); font-weight:650; color:color-mix(in srgb, var(--ink) 80%, transparent);
  padding:var(--s2) var(--s4); border-radius:999px; background:transparent;
  border:1.5px solid rgba(90,70,40,.3); transition:all .2s var(--spring);
}
.ph-chip:active{ transform:scale(.95); }
.ph-cta{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }
.story-app .ph-inkbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--f-ui); font-weight:700; font-size:var(--fs-base); color:var(--paper);
  background:color-mix(in srgb, var(--ink) 92%, transparent); border-radius:999px; padding:var(--s3) var(--s6);
  box-shadow:0 8px 22px rgba(47,42,33,.35); transition:transform .22s var(--spring), box-shadow .2s;
}
.ph-inkbtn.big{ padding:var(--s4) 28px; font-size:var(--fs-lg); }
.ph-inkbtn:active{ transform:scale(.96); }
.ph-inkbtn i{ color:var(--st-gold); }
.ph-note{ margin-top:16px; font-size:var(--fs-xs); color:var(--ink-dim); font-family:var(--f-ui); }

/* веер обложек справа */
.ph-fan{ position:relative; width:250px; height:300px; flex:0 0 auto; }
.ph-fan .fanb{ position:absolute; width:150px; transition:transform .4s var(--spring); }
.ph-fan .f0{ left:0;  top:26px; transform:rotate(-9deg); z-index:1; }
.ph-fan .f1{ left:52px; top:8px;  transform:rotate(-1deg); z-index:2; }
.ph-fan .f2{ left:104px; top:26px; transform:rotate(8deg);  z-index:3; }
.ph-fan .st-cover{ box-shadow:0 16px 34px rgba(50,38,20,.35); }

@media(max-width:820px){
  .st-paperhero{ flex-direction:column; align-items:stretch; padding:var(--s6) var(--s5) var(--s6); }
  .ph-fan{ width:100%; height:210px; margin-top:6px; display:flex; justify-content:center; }
  .ph-fan .fanb{ width:118px; }
  .ph-fan .f0{ left:calc(50% - 130px); }
  .ph-fan .f1{ left:calc(50% - 59px); }
  .ph-fan .f2{ left:calc(50% + 12px); }
  .ph-cta .st-btn.big, .ph-cta .ph-inkbtn.big{ flex:1; justify-content:center; padding:var(--s4) var(--s4); font-size:var(--fs-base); }
}

/* ============================================================
   КОММЕНТАРИИ — защита от глобальных стилей сайта + полировка
   ============================================================ */
/* Было height:86dvh на ВСЕ шиты без разбора: крошечное «Пригласить
   рассказчика» занимало почти весь телефон с пустотой снизу.
   Теперь высота по содержимому, с потолком. */
.st-sheet-modal .panel{ height:auto; max-height:min(88dvh, 88vh); background:var(--st-surface); }
/* Комментарии — на всю высоту экрана: обсуждение книги это отдельный
   экран, а не полоска на треть телефона. На широком экране (от 1180px)
   ниже включается боковая панель — там свои размеры. */
@media (max-width:1179px){
  #comments-sheet, #qcard-sheet{ align-items:stretch; padding:0; }
  #comments-sheet .panel, #qcard-sheet .panel{
    height:100vh; height:100dvh; max-height:none; max-width:none; border-radius:0; border:0;
    padding-top:var(--sat);
  }
  #comments-sheet .grab, #qcard-sheet .grab{ display:none; }
  #comments-sheet .head, #qcard-sheet .head{ padding:var(--s3) var(--s4); border-bottom:1px solid var(--st-hairline); }
}
.st-sheet-modal .panel.tall{ height:min(86dvh, 86vh); }
@media(min-width:740px){ .st-sheet-modal .panel{ height:auto; max-height:82dvh; min-height:420px; } }
#comments-sheet .bodyy{ padding:var(--s1) var(--s4) var(--s3); }

/* поле ввода: жёсткие гарантии против css темы сайта */
.cmp-field textarea, .cmp-field textarea:focus{
  background:transparent !important; border:0 !important; outline:none !important;
  box-shadow:none !important; border-radius:0 !important; margin:0 !important;
  appearance:none; -webkit-appearance:none;
  /* 16px обязательны: на меньшем Safari зумит страницу при фокусе */
  font-family:var(--f-ui) !important; font-size:var(--fs-lg) !important; color:var(--st-text) !important;
}
.cmp-row button, .cmp-rec button{ margin:0; }
.cmp-round i{ pointer-events:none; }
.cmp-rec.showing, #cmp-rec[style*="flex"]{ display:flex; }
.st-comment img.av{ border:0; box-shadow:none; }
.st-comment .c-meta button{ background:transparent; border:0; }

/* coin-стикеры в ленте */
.coin-inline-sticker{ display:inline-block; }
.c-text.coin-stk{ min-height:40px; }

/* ===================== ФОТОАЛЬБОМ (разворот: фото + подпись) ===================== */
.albumpg .inner{ display:flex; flex-direction:column; gap:var(--s3); }
.albumpg .album-title{ text-align:center; margin:var(--s1) 0 var(--s1); }
.albumpg .st-mediagrid.album{ display:grid; gap:var(--s2); grid-template-columns:1fr; margin:0; }
.albumpg .st-mediagrid.album[data-n="2"], .albumpg .st-mediagrid.album[data-n="4"]{ grid-template-columns:1fr 1fr; }
.albumpg .st-mediagrid.album[data-n="3"], .albumpg .st-mediagrid.album[data-n="5"], .albumpg .st-mediagrid.album[data-n="6"]{ grid-template-columns:1fr 1fr 1fr; }
.albumpg .st-mediagrid.album .cell{ overflow:hidden; border-radius:14px; background:#00000010; }
.albumpg .st-mediagrid.album .cell img, .albumpg .st-mediagrid.album .cell video{
  width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1/1;
}
.albumpg .st-mediagrid.album[data-n="1"] .cell img, .albumpg .st-mediagrid.album[data-n="1"] .cell video{ aspect-ratio:4/3; }
.albumpg .album-cap{
  font-family:var(--f-book, Georgia, serif); font-size:var(--fs-lg); line-height:1.6;
  text-align:center; color:var(--ink); padding:var(--s1) var(--s2) var(--s1); text-indent:0;
}
/* Лист книги всегда светлый, поэтому здесь нужны «бумажные» токены:
   --st-border на кремовом фоне был почти невидим, --st-dim нечитаем. */
.albumpg .album-nophoto{
  border:2px dashed var(--paper-brd); border-radius:14px; padding:var(--s7) var(--s4);
  text-align:center; color:var(--ink-dim); font-family:var(--f-ui); font-size:var(--fs-md);
}

/* ===================== ОБЛОЖКА-КОЛЛАЖ (фотоальбом) ===================== */
.st-cover[data-th="collage"]{ position:relative; overflow:hidden; }
.cv-collage{ position:absolute; inset:0; display:grid; gap:2px; }
.cv-collage[data-n="1"]{ grid-template-columns:1fr; }
.cv-collage[data-n="2"], .cv-collage[data-n="4"]{ grid-template-columns:1fr 1fr; }
.cv-collage[data-n="3"], .cv-collage[data-n="5"], .cv-collage[data-n="6"],
.cv-collage[data-n="7"], .cv-collage[data-n="8"], .cv-collage[data-n="9"]{ grid-template-columns:1fr 1fr 1fr; }
.cv-collage img{ width:100%; height:100%; object-fit:cover; display:block; }
.cv-collage.empty{ position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, var(--cv-accent,#d97757), var(--cv-accent,#d97757) 12px, rgba(0,0,0,.13) 12px, rgba(0,0,0,.13) 24px); opacity:.55; }
.st-cover[data-th="collage"] .veil{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.66) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,0) 72%); }
.st-cover[data-th="collage"] .cv{ position:absolute; inset:auto 0 0 0; padding:8% 8% 9%; text-align:center; z-index:2; }
.st-cover[data-th="collage"] .ttl{ color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.6); }
.st-cover[data-th="collage"] .aut{ color:#fff; opacity:.92; text-shadow:0 2px 10px rgba(0,0,0,.6); }

/* ===================== 🎁 ПОДАРОЧНОЕ ОТКРЫТИЕ (кинематографично) ===================== */
.st-gift-reveal{ position:fixed; inset:0; z-index:99999; background:#0b0a09; display:flex;
  align-items:center; justify-content:center; opacity:0; transition:opacity .8s ease; overflow:hidden; }
.st-gift-reveal.show{ opacity:1; }
.st-gift-reveal.opening{ opacity:0 !important; transition:opacity .9s ease; }
.st-gift-reveal .gr-sky{ position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 32%, #2a2018 0%, #141210 55%, #0b0a09 100%); }
.st-gift-reveal .gr-sky::after{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 30%, #fff7, transparent),
    radial-gradient(1.6px 1.6px at 70% 60%, #fff6, transparent),
    radial-gradient(1.2px 1.2px at 40% 80%, #fff6, transparent),
    radial-gradient(1.6px 1.6px at 85% 25%, #fff6, transparent),
    radial-gradient(1.2px 1.2px at 55% 45%, #fff5, transparent),
    radial-gradient(1.2px 1.2px at 12% 68%, #fff5, transparent);
  animation:gr-twinkle 4s ease-in-out infinite alternate; }
@keyframes gr-twinkle{ from{opacity:.35} to{opacity:.75} }
.st-gift-reveal .gr-skip{ position:absolute; top:calc(14px + env(safe-area-inset-top)); right:16px; z-index:6;
  background:#ffffff1c; color:#fff; border:0; border-radius:99px; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer; }
.st-gift-reveal .gr-stage{ position:relative; z-index:2; text-align:center; color:#fff; width:min(560px,92vw); min-height:60vh; }
.st-gift-reveal .gr-step{ position:absolute; left:0; right:0; top:50%; transform:translateY(-46%) scale(.96);
  opacity:0; transition:opacity 1s ease, transform 1.1s ease; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:12px; }
.st-gift-reveal .gr-step.on{ opacity:1; transform:translateY(-50%) scale(1); }
.st-gift-reveal .gr-env{ font-size:66px; filter:drop-shadow(0 8px 34px #e2885f77); animation:gr-float 3s ease-in-out infinite; }
@keyframes gr-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }
.st-gift-reveal .gr-lead,.st-gift-reveal .gr-forwhom{ font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:#e8c9a8; }
.st-gift-reveal .gr-to{ font-family:var(--f-disp,'Unbounded',sans-serif); font-size:clamp(42px,13vw,88px); font-weight:800; line-height:1.03;
  background:linear-gradient(135deg,#f7dcbb,#e2885f); -webkit-background-clip:text; background-clip:text; color:transparent; }
.st-gift-reveal .gr-circle{ width:min(60vw,244px); height:min(60vw,244px); border-radius:50%; object-fit:cover;
  border:3px solid #ffffff35; box-shadow:0 14px 64px #000b, 0 0 0 10px #e2885f22; }
.st-gift-reveal .gr-from{ font-size:21px; color:#f0e3d4; font-family:var(--f-title,Georgia,serif); margin-top:6px; }
.st-gift-reveal .gr-open{ font-size:54px; animation:gr-float 3s ease-in-out infinite; }
.st-gift-reveal .gr-openlbl{ font-size:18px; font-weight:700; color:#f7dcbb; letter-spacing:.04em; }
.st-gift-reveal .gr-sound{ position:absolute; bottom:calc(26px + env(safe-area-inset-bottom)); left:0; right:0; text-align:center;
  color:#fff; font-size:13.5px; z-index:5; animation:gr-pulse 1.6s ease-in-out infinite; }
@keyframes gr-pulse{ 0%,100%{opacity:.5} 50%{opacity:1} }

/* конверт, раскрывающийся в первом кадре */
.st-gift-reveal .gr-envelope{ position:relative; width:156px; height:108px; margin:0 auto 6px; filter:drop-shadow(0 14px 34px #e2885f55); perspective:640px; }
.st-gift-reveal .env-body{ position:absolute; inset:0; background:linear-gradient(#f5ddc2,#e7b98f); border-radius:9px; }
.st-gift-reveal .env-letter{ position:absolute; left:12px; right:12px; top:12px; bottom:10px; background:#fffef8; border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:34px; box-shadow:0 4px 12px #0003;
  transform:translateY(0) scale(.9); opacity:0; z-index:2; transition:transform 1.3s cubic-bezier(.2,.8,.2,1) .9s, opacity .5s ease .9s; }
.st-gift-reveal .env-pocket{ position:absolute; inset:0; border-radius:9px; z-index:3;
  background:linear-gradient(#eec49b,#e0a877); clip-path:polygon(0 40%, 50% 100%, 100% 40%, 100% 100%, 0 100%); }
.st-gift-reveal .env-flap{ position:absolute; top:0; left:0; right:0; height:0; z-index:4; transform-origin:top center; backface-visibility:hidden;
  border-left:78px solid transparent; border-right:78px solid transparent; border-top:58px solid #e6ad7d; transition:transform 1s ease .5s; }
.st-gift-reveal .gr-s1.on .env-flap{ transform:rotateX(180deg); z-index:1; }
.st-gift-reveal .gr-s1.on .env-letter{ transform:translateY(-52px) scale(1); opacity:1; }

/* запечатанный подарок: обратный отсчёт до даты */
.st-gift-lock{ position:fixed; inset:0; z-index:99998; display:flex; align-items:center; justify-content:center;
  background:#0b0a09; opacity:0; transition:opacity .8s ease; overflow:hidden; text-align:center; color:#fff; }
.st-gift-lock.show{ opacity:1; }
.st-gift-lock.opening{ opacity:0 !important; }
.st-gift-lock .gl-sky{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 30%, #2a2018 0%, #141210 55%, #0b0a09 100%); }
.st-gift-lock .gl-box{ position:relative; z-index:2; width:min(460px,90vw); padding:24px; }
.st-gift-lock .gl-env{ font-size:64px; animation:gr-float 3s ease-in-out infinite; filter:drop-shadow(0 10px 30px #e2885f66); }
.st-gift-lock .gl-for{ font-family:var(--f-disp,'Unbounded',sans-serif); font-size:clamp(24px,7vw,38px); font-weight:800; margin-top:14px;
  background:linear-gradient(135deg,#f7dcbb,#e2885f); -webkit-background-clip:text; background-clip:text; color:transparent; }
.st-gift-lock .gl-sub{ margin-top:14px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#c9a888; }
.st-gift-lock .gl-date{ font-size:19px; color:#f0e3d4; margin-top:4px; font-family:var(--f-title,Georgia,serif); }
.st-gift-lock .gl-count{ margin-top:16px; font-size:clamp(22px,6vw,32px); font-weight:800; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.st-gift-lock .gl-hint{ margin-top:18px; font-size:13.5px; color:#b9ab98; }

/* ============================================================
   HOVER — только для мыши.
   Раньше в файле не было ни одного @media (hover:hover): после тапа
   по карточке на телефоне она оставалась «поднятой» до тапа в другом
   месте, чипы залипали в акцентном цвете. Теперь все hover-состояния
   живут здесь и на тач-экранах просто не существуют.
   ============================================================ */
/* Активное состояние — не hover: на тач-экране выбранный чип обязан
   оставаться выделенным. Раньше оно было склеено с :hover одним правилом. */
.st-chip.on{ border-color:var(--st-accent); background:var(--st-accent-soft); color:var(--st-accent-hi); }

@media (hover: hover) and (pointer: fine){
  .st-btn.primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -10px color-mix(in srgb, var(--st-accent) 75%, transparent); }
  .st-chip:hover{ border-color:var(--st-accent); background:var(--st-accent-soft); color:var(--st-accent-hi); }
  .st-bookcard:hover{ transform:translateY(-6px); }
  .st-pagecard .acts button:hover{ background:color-mix(in srgb, var(--ink) 14%, transparent); }
  .st-startcards .sc:hover{ border-color:var(--st-accent); transform:translateY(-2px); }
  .st-comment .c-page:hover{ color:var(--st-accent-hi); border-color:var(--st-accent); }
  .st-comment .c-meta button:hover{ background:var(--st-card); color:var(--st-dim); }
  .cmp-stick:hover{ color:var(--st-gold); }
  .cmp-cancel:hover{ color:var(--st-danger); }
  .tray-body .emoji-b:hover{ background:var(--st-card); }
  .tray-body .coin-b:hover{ transform:translateY(-2px); border-color:var(--st-gold); }
  .st-seltip button:hover{ background:var(--st-accent-soft); }
  .ph-chip:hover{ background:color-mix(in srgb, var(--ink) 8%, transparent); border-color:color-mix(in srgb, var(--ink) 45%, transparent); transform:translateY(-1px); }
  .ph-inkbtn:hover{ box-shadow:0 10px 28px rgba(47,42,33,.45); }
  .st-paperhero:hover .f0{ transform:rotate(-12deg) translateY(-6px); }
  .st-paperhero:hover .f2{ transform:rotate(11deg) translateY(-6px); }
}

/* ============================================================
   СКЕЛЕТОН ЗАГРУЗКИ
   ============================================================ */
.st-skel{
  border-radius:var(--r-m);
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--st-text) 6%, transparent) 20%,
    color-mix(in srgb, var(--st-text) 12%, transparent) 40%,
    color-mix(in srgb, var(--st-text) 6%, transparent) 60%);
  background-size:220% 100%;
  animation:st-skel-run 1.4s linear infinite;
}
@keyframes st-skel-run{ from{background-position:120% 0} to{background-position:-20% 0} }

/* ============================================================
   ФОЛБЭК ДЛЯ CONTAINER QUERIES
   Все размеры на обложках заданы в cqw. В Safari < 16 и старых
   Android WebView эта единица невалидна — декларация отбрасывалась,
   и обложки оставались вообще без названий. Здесь запасной вариант
   в процентах от ширины экрана; он грубее, но текст виден.
   ============================================================ */
@supports not (container-type: inline-size){
  .st-cover .cv{ padding:11% 9% 9% 13%; }
  .st-cover .cv .ttl{ font-size:clamp(13px, 3.4vw, 26px); }
  .st-cover .cv .aut{ font-size:clamp(8px, 1.6vw, 12px); }
  .st-cover .orn,
  .st-cover .cv .orn{ font-size:clamp(11px, 2.4vw, 20px); }
  .st-cover .demo-tag{ font-size:clamp(8px, 1.4vw, 11px); padding:var(--s1) var(--s2); }
}

/* ============================================================
   ДОСТУПНОСТЬ: контраст на «бумаге»
   Номер страницы, эпиграф главы и подписи в финале были 2.5–3.6:1
   при минимуме 4.5:1 по WCAG. Цвета сдвинуты в тёмную сторону.
   ============================================================ */
.st-page .st-pg-num{ color:color-mix(in srgb, var(--ink) 62%, transparent); }
.st-page .chapter-eyebrow{ color:var(--ink-acc); }
.st-page .titlepage .small,
.st-page .finalpage .stats{ color:color-mix(in srgb, var(--ink) 66%, transparent); font-size:var(--fs-sm); }

/* ============================================================
   ДВИЖЕНИЕ
   Aurora-градиент крутился одновременно в семи местах, включая
   мини-аватар ИИ в КАЖДОМ сообщении чата: на длинном диалоге это
   десятки анимируемых фонов, мельтешение и расход батареи.
   Оставляем анимацию только там, где она несёт смысл — на кнопке
   генерации и полосе прогресса. Остальное — статичный градиент.
   ============================================================ */
.st-msg.ai .st-ai-mini,
.st-brand .dot,
.st-cover[data-th="aurora"],
.st-qcard[data-st="aurora"]{ animation:none !important; background-size:100% 100% !important; }


/* ============================================================
   ВИТРИНА (index.php)
   Полки рендерит сервер, поэтому здесь только оформление.
   Сетка построена на --gut — том же поле, что у /book.
   ============================================================ */

.st-main{ position:relative; z-index:2; padding-bottom:var(--s9); }

.st-eyebrow{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:var(--fs-xs); font-weight:800; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--st-accent-hi); margin-bottom:var(--s3);
}
.st-eyebrow::before{ content:''; width:26px; height:2px; background:var(--st-grad); border-radius:2px; }

/* ---- HERO: книга недели ------------------------------------------------ */
.st-hero2{
  position:relative; display:flex; align-items:flex-end; overflow:hidden;
  min-height:clamp(420px, 66vh, 700px);
}
.st-hero2-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(78% 90% at 74% 8%, color-mix(in srgb, var(--st-accent) 42%, transparent), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--st-text) 9%, var(--st-bg)), var(--st-bg) 72%);
}
.st-hero2-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, var(--st-bg) 2%, transparent 58%),
             linear-gradient(100deg, color-mix(in srgb, var(--st-bg) 88%, transparent), transparent 58%);
}
.st-hero2-in{
  position:relative; z-index:2; width:100%; max-width:900px;
  padding:0 var(--gut) clamp(24px, 5vh, 52px);
}
.st-hero2-t{
  font-family:var(--f-title); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(30px, 5.2vw, 62px); line-height:1.04; margin:0 0 var(--s3);
  text-shadow:0 8px 40px rgba(0,0,0,.45);
  transition:opacity .25s var(--ease);
}
.st-hero2-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2) var(--s3);
  color:var(--st-dim); font-size:var(--fs-md); font-weight:600; margin-bottom:var(--s3);
}
.st-hero2-meta .d{ color:var(--st-faint); }
.st-hero2-sub{
  font-size:clamp(15px, 1.5vw, 17px); line-height:1.55; margin:0 0 var(--s6);
  color:color-mix(in srgb, var(--st-text) 88%, transparent); max-width:56ch;
  text-shadow:0 2px 18px rgba(0,0,0,.4);
}
.st-hero2-cta{ display:flex; gap:var(--s3); flex-wrap:wrap; }
.st-hero2-art{
  position:absolute; right:calc(var(--gut) + 24px); top:50%; z-index:1;
  width:clamp(170px, 17vw, 250px); transform:translateY(-50%) rotate(3deg);
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.55));
  transition:opacity .25s var(--ease);
}
.st-hero2-dots{ position:absolute; right:var(--gut); bottom:clamp(24px,5vh,52px); z-index:3; display:flex; gap:var(--s2); }
.st-hero2-dots button{
  width:26px; height:4px; border-radius:4px; padding:0;
  background:color-mix(in srgb, var(--st-text) 24%, transparent); transition:.3s var(--ease);
}
.st-hero2-dots button.on{ background:var(--st-accent); width:40px; }
/* На телефоне герой — колонка: обложка, название, кнопки.
   Было: обложка спрятана совсем (витрина начиналась с пустого градиента),
   а точки карусели, став обычным элементом потока, отъедали у текста
   треть ширины — заголовок ломался, «В библиотеку» сжималось до плюса. */
@media (max-width:900px){
  .st-hero2{
    min-height:auto; flex-direction:column; align-items:stretch;
    padding-top:var(--s5); text-align:center;
  }
  .st-hero2-art{
    display:block; position:static; width:min(42vw, 172px); margin:0 auto var(--s5);
    transform:none; filter:drop-shadow(0 22px 44px rgba(0,0,0,.55));
  }
  .st-hero2-in{ max-width:none; padding-bottom:var(--s3); }
  .st-hero2-sub{ max-width:none; }
  .st-hero2-cta{ justify-content:center; }
  .st-hero2-cta .st-btn{ flex:0 0 auto; white-space:nowrap; }
  /* «В библиотеку» пряталось общим правилом .hide-m, и от кнопки оставался
     голый плюс. В центрированном герое подпись помещается — возвращаем. */
  .st-hero2-cta .hide-m{ display:inline; }
  .st-hero2-dots{ position:static; justify-content:center; margin:0 0 var(--s5); }
}

/* ---- ряд полки --------------------------------------------------------- */
.st-row{ margin-top:clamp(20px, 4vh, 40px); position:relative; }
.st-row[hidden]{ display:none; }
.st-row .st-row-head{
  display:flex; align-items:baseline; gap:var(--s3);
  padding:0 var(--gut); margin-bottom:var(--s3);
}
.st-row .st-row-head h2{
  font-family:var(--f-title); font-weight:800; margin:0;
  font-size:clamp(19px, 2.2vw, 26px); line-height:1.15;
  display:flex; align-items:center; gap:var(--s2);
  /* базовое правило .st-row-head h2 добавляло 20px слева, и заголовок
     стоял правее самой полки — заметно, когда полка одна */
  padding:0;
}
.st-row .st-row-head .sub{ font-size:var(--fs-sm); font-weight:600; color:var(--st-faint); }
.st-row .st-row-head .more{
  margin-left:auto; font-size:var(--fs-xs); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--st-faint);
}
.st-row .st-shelf{
  display:flex; gap:var(--s4); overflow-x:auto; scroll-snap-type:x proximity;
  padding:10px var(--gut) var(--s6); scrollbar-width:none; overscroll-behavior-x:contain;
}
.st-row .st-shelf::-webkit-scrollbar{ display:none; }
.st-row .st-bookcard{ flex:0 0 auto; width:clamp(132px, 14.5vw, 186px); position:relative; }

/* стрелки прокрутки — только для мыши, вешает landing.js */
.st-shelf-arrow{
  position:absolute; top:calc(50% - 22px); z-index:5; width:40px; height:40px; border-radius:var(--r-pill);
  display:grid; place-items:center; color:var(--st-text);
  background:var(--st-glass); border:1px solid var(--st-glass-brd); backdrop-filter:blur(10px);
  box-shadow:var(--st-shadow-md); opacity:0; transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.st-shelf-arrow.l{ left:calc(var(--gut) - 20px); }
.st-shelf-arrow.r{ right:calc(var(--gut) - 20px); }
.st-row.has-arrows:hover .st-shelf-arrow{ opacity:1; }
.st-row.at-start .st-shelf-arrow.l,
.st-row.at-end .st-shelf-arrow.r{ opacity:0 !important; pointer-events:none; }

/* ---- чипы жанров ------------------------------------------------------- */
.st-chiprow{
  display:flex; gap:var(--s2); overflow-x:auto; scrollbar-width:none;
  padding:var(--s5) var(--gut) 0;
}
.st-chiprow::-webkit-scrollbar{ display:none; }
.st-chiprow .st-chip{ flex:0 0 auto; }

/* ---- «живой» индикатор ------------------------------------------------- */
.st-live{
  width:8px; height:8px; border-radius:var(--r-pill); background:var(--st-success); flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--st-success) 60%, transparent);
  animation:st-live-pulse 2s infinite;
}
@keyframes st-live-pulse{
  70%{ box-shadow:0 0 0 8px color-mix(in srgb, var(--st-success) 0%, transparent); }
  100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--st-success) 0%, transparent); }
}

/* ---- ЧАРТ -------------------------------------------------------------- */
.st-chart{
  margin:0 var(--gut); padding:var(--s2); max-width:1320px;
  background:color-mix(in srgb, var(--st-text) 4%, transparent);
  border:1px solid var(--st-border); border-radius:var(--r-l);
}
.st-chrow{
  display:grid; grid-template-columns:44px 44px minmax(0,1fr) 168px 116px 40px;
  align-items:center; gap:var(--s4); padding:var(--s2) var(--s3);
  border-radius:var(--r-m); transition:background .16s var(--ease); color:inherit;
}
.st-chrow .rk{
  font-family:var(--f-disp); font-weight:800; font-size:var(--fs-2xl);
  color:var(--st-faint); text-align:center; line-height:1;
}
.st-chrow .rk small{
  display:block; font-family:var(--f-ui); font-size:var(--fs-2xs); font-weight:700; margin-top:3px;
  color:var(--st-faint);
}
.st-chrow .rk small.up{ color:var(--st-success); }
.st-chrow .cv{ width:44px; }
/* обложка книги — всегда 10/15: квадратная плитка из музыкальных чартов
   тут врёт, у книги другая форма */
.st-chrow .cv .st-cover{ border-radius:var(--r-s); box-shadow:var(--st-shadow-sm); }
.st-chrow .i{ min-width:0; display:block; }
.st-chrow .i .t{
  display:block; font-size:var(--fs-lg); font-weight:700; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.st-chrow .i .a{ display:block; font-size:var(--fs-sm); color:var(--st-faint); font-weight:600; }
.st-chrow .g{ font-size:var(--fs-sm); color:var(--st-faint); font-weight:600; }
.st-chrow .n{
  font-size:var(--fs-md); color:var(--st-dim); font-weight:700; text-align:right;
  font-variant-numeric:tabular-nums;
}
.st-chrow .n small{ display:block; font-size:var(--fs-2xs); font-weight:600; color:var(--st-faint); }
.st-chrow .go{
  width:36px; height:36px; border-radius:var(--r-pill); display:grid; place-items:center;
  color:var(--st-faint); opacity:0; transition:.16s var(--ease);
}
@media (max-width:900px){
  /* Число прочтений на телефоне оставляем — это главная цифра чарта.
     Прячем часы и стрелку: они дублируют то, что и так понятно. */
  .st-chrow{ grid-template-columns:34px 44px minmax(0,1fr) auto; gap:var(--s3); }
  .st-chrow .g, .st-chrow .go{ display:none; }
  .st-chrow .n{ font-size:var(--fs-sm); text-align:right; }
  .st-chrow .n small{ font-size:var(--fs-2xs); }
}

/* ---- широкая карточка: «продолжить» и «пишется сейчас» ----------------- */
.st-wcard{
  flex:0 0 auto; width:clamp(248px, 27vw, 330px); display:flex; gap:var(--s4);
  padding:var(--s4); border-radius:var(--r-l);
  background:var(--st-surface); border:1px solid var(--st-border);
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.st-wcard .cw{ width:62px; flex:none; }
.st-wcard .cw .st-cover{ border-radius:var(--r-s); }
.st-wcard .i{ flex:1; min-width:0; display:flex; flex-direction:column; }
.st-wcard .t{
  font-weight:700; font-size:var(--fs-base); line-height:1.25; margin-bottom:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.st-wcard .a{ font-size:var(--fs-xs); color:var(--st-faint); font-weight:600; margin-bottom:auto; }
.st-wcard .bar{
  display:block; height:4px; border-radius:var(--r-pill); overflow:hidden; margin:10px 0 6px;
  background:color-mix(in srgb, var(--st-text) 10%, transparent);
}
.st-wcard .bar i{ display:block; height:100%; background:var(--st-grad); border-radius:var(--r-pill); }
.st-wcard .pc{ display:block; font-size:var(--fs-2xs); font-weight:700; color:var(--st-faint); }

/* ---- авторы ------------------------------------------------------------ */
.st-authors{ align-items:flex-start; }
.st-author{ flex:0 0 auto; width:112px; text-align:center; }
.st-author .av{
  width:92px; height:92px; border-radius:var(--r-pill); margin:0 auto var(--s3);
  display:grid; place-items:center; overflow:hidden;
  font-family:var(--f-title); font-weight:800; font-size:var(--fs-4xl); color:#fff;
  background:var(--st-grad); border:2px solid transparent; transition:.3s var(--ease);
}
.st-author .av img{ width:100%; height:100%; object-fit:cover; }
.st-author .n{ display:block; font-weight:700; font-size:var(--fs-sm); line-height:1.25; }
.st-author .c{ display:block; font-size:var(--fs-2xs); color:var(--st-faint); font-weight:600; margin-top:2px; }

/* ---- плитка «новая книга» ---------------------------------------------- */
.st-newtile{
  aspect-ratio:10/15; border-radius:6px 12px 12px 6px; display:grid; place-items:center; text-align:center;
  border:1.5px dashed var(--st-border-hi); color:var(--st-faint);
  background:color-mix(in srgb, var(--st-accent) 6%, transparent); transition:.2s var(--ease);
}
.st-newtile .p{ font-size:var(--fs-4xl); line-height:1; font-weight:300; }
.st-newtile .l{ font-size:var(--fs-xs); font-weight:700; margin-top:var(--s1); }

/* ---- полоса «написать книгу»: единственное продающее место -------------- */
.st-writeband{
  margin:var(--s8) var(--gut) 0; padding:clamp(22px, 3vw, 34px);
  border-radius:var(--r-xl); border:1px solid var(--st-accent-line);
  display:flex; gap:var(--s7); align-items:center; flex-wrap:wrap; overflow:hidden;
  background:
    radial-gradient(80% 130% at 88% 6%, color-mix(in srgb, var(--st-accent) 30%, transparent), transparent 62%),
    linear-gradient(150deg, var(--st-surface), var(--st-bg-deep));
}
.st-writeband .tx{ flex:1; min-width:260px; }
.st-writeband h3{
  font-family:var(--f-title); font-weight:800; margin:0 0 var(--s2);
  font-size:clamp(20px, 2.4vw, 28px); line-height:1.16;
}
.st-writeband p{ margin:0 0 var(--s5); font-size:var(--fs-lg); line-height:1.55; color:var(--st-dim); max-width:60ch; }
.st-writeband .acts{ display:flex; gap:var(--s3); flex-wrap:wrap; }
.st-writeband .note{ margin-top:var(--s4); font-size:var(--fs-sm); color:var(--st-faint); }
.st-writeband .fan{ position:relative; width:290px; height:200px; flex:none; }
.st-writeband .fan > div{ position:absolute; width:120px; top:0; left:50%; transition:.4s var(--ease); }
.st-writeband .fan .f0{ transform:translateX(-140px) rotate(-11deg); }
.st-writeband .fan .f1{ transform:translateX(-60px) rotate(-1deg); z-index:2; }
.st-writeband .fan .f2{ transform:translateX(20px) rotate(10deg); }
@media (max-width:820px){ .st-writeband .fan{ display:none; } }

/* мелочи */
.hint{ font-size:var(--fs-md); line-height:1.55; color:var(--st-dim); margin:0 0 var(--s3); }
.st-bookcard .badge.new{ background:var(--st-grad); color:#fff; border:0; }
@media (max-width:520px){ .hide-m{ display:none; } }

@media (hover: hover) and (pointer: fine){
  .st-chrow:hover{ background:color-mix(in srgb, var(--st-text) 8%, transparent); }
  .st-chrow:hover .rk{ color:var(--st-accent-hi); }
  .st-chrow:hover .go{ opacity:1; background:var(--st-accent-soft); color:var(--st-accent-hi); }
  .st-wcard:hover{ border-color:var(--st-border-hi); transform:translateY(-3px); box-shadow:var(--st-shadow-md); }
  .st-author:hover .av{ transform:scale(1.06); border-color:var(--st-accent); }
  .st-bookcard:hover .st-newtile{ border-color:var(--st-accent); color:var(--st-accent-hi); background:var(--st-accent-soft); }
  .st-row-head .more:hover{ color:var(--st-accent-hi); }
  .st-writeband:hover .fan .f0{ transform:translateX(-160px) rotate(-14deg); }
  .st-writeband:hover .fan .f2{ transform:translateX(40px) rotate(13deg); }
  .st-shelf-arrow:hover{ transform:scale(1.08); }
}

/* ---- витрина на узких экранах ------------------------------------------ */
@media (max-width:640px){
  .st-hero2{ padding-bottom:var(--s4); }
  /* flex-элементы метаданных ломались по одному на строку — на узком
     экране это обычный текст, а не сетка */
  .st-hero2-meta{ display:block; font-size:var(--fs-sm); }
  .st-hero2-meta span{ display:inline; }
  .st-hero2-meta .d{ margin:0 5px; }
  .st-hero2-sub{
    margin-bottom:var(--s4); font-size:var(--fs-md);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .st-hero2-t{ font-size:clamp(26px, 8vw, 34px); }
  /* название книги в чарте обрывалось на середине — даём две строки */
  .st-chrow{ padding:var(--s2); gap:var(--s2); }
  .st-chrow .i .t{
    white-space:normal; font-size:var(--fs-md);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .st-row .st-shelf{ padding-bottom:var(--s4); }
  .st-row{ margin-top:var(--s6); }
  /* заголовок ряда переносился на две строки и подпись уезжала под него */
  .st-row .st-row-head{ flex-wrap:wrap; row-gap:var(--s1); }
  .st-row .st-row-head h2{ flex:1 1 100%; }
  .st-row .st-row-head .more{ margin-left:0; }
  .st-row .st-bookcard{ width:132px; }
  .st-wcard{ width:min(84vw, 300px); }
  .st-author{ width:96px; }
  .st-author .av{ width:76px; height:76px; font-size:var(--fs-3xl); }
}

/* ============================================================
   ШАПКА МОДУЛЯ
   На /story общая шапка сайта не подключается — иначе получаются
   две панели подряд. Логика та же, что в /book: раздел живёт под
   своей шапкой. Колокольчик уведомлений перенесён сюда целиком
   (разметка + notifications.js), чтобы ничего не потерять.
   ============================================================ */
.st-topbar{
  position:sticky; top:0; z-index:600;
  display:flex; align-items:center; gap:var(--s3);
  padding:calc(10px + var(--sat)) var(--gut) 10px;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
.st-topbar.solid{
  background:color-mix(in srgb, var(--st-bg-deep) 76%, transparent);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 1px 0 var(--st-border);
}
.st-topbar .brand{
  display:flex; align-items:center; gap:10px; flex:none;
  font-family:var(--f-title); font-weight:800; font-size:var(--fs-2xl); letter-spacing:-.01em; color:var(--st-text);
}
.st-topbar .brand .mark{
  width:34px; height:34px; border-radius:var(--r-s); background:var(--st-grad);
  display:grid; place-items:center; color:#fff; font-size:var(--fs-lg); flex:none;
  box-shadow:0 6px 18px -6px color-mix(in srgb, var(--st-accent) 70%, transparent);
}
.st-topbar .brand sup{ font:800 10px/1 var(--f-ui); color:var(--st-accent-hi); margin-left:2px; }
.st-topbar nav{ display:flex; gap:2px; margin-left:var(--s3); }
.st-topbar nav a{
  font-size:var(--fs-base); font-weight:600; color:var(--st-dim);
  padding:var(--s2) var(--s3); border-radius:var(--r-pill); transition:.18s var(--ease);
}
.st-topbar nav a.on{ color:var(--st-text); background:color-mix(in srgb, var(--st-text) 10%, transparent); }
.st-topbar .sp{ flex:1; }
.st-topbar .acts{ display:flex; align-items:center; gap:var(--s2); }
.st-topbar .ava{
  width:36px; height:36px; border-radius:var(--r-s); overflow:hidden; flex:none;
  border:1.5px solid var(--st-border-hi); display:grid; place-items:center;
  background:var(--st-grad); color:#fff; font-weight:700; font-size:var(--fs-sm);
}
.st-topbar .ava img{ width:100%; height:100%; object-fit:cover; }

/* колокольчик: базовые .yz-hbtn и .notif-badge приходят из yazme-theme.css,
   а выпадашка там прибита к .yz-header — повторяем её для нашей шапки */
.st-topbar .notification-wrapper{ position:relative; }
.st-topbar .notif-dropdown{
  position:absolute; top:calc(100% + 10px); right:0; width:min(92vw, 380px); max-height:70vh; overflow:auto;
  background:var(--yz-glass-strong, var(--st-glass)); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--st-border-hi); border-radius:var(--r-l); box-shadow:var(--st-shadow); z-index:6000;
}
.st-topbar .notif-dropdown.hidden{ display:none; }
.st-topbar .notif-header{
  padding:14px var(--s4) 10px; font-weight:800; font-size:var(--fs-md);
  color:var(--st-text); border-bottom:1px solid var(--st-border);
}
.st-topbar .notif-empty-box{ padding:34px var(--s5); text-align:center; color:var(--st-faint); }
.st-topbar .notif-empty-icon{ width:34px; height:34px; margin-bottom:10px; opacity:.6; }

@media (max-width:900px){
  .st-topbar nav{ display:none; }
  .st-topbar{ padding-left:var(--s4); padding-right:var(--s4); gap:var(--s2); }
  .st-topbar .brand{ font-size:var(--fs-xl); }
}
@media (max-width:640px){
  /* Четыре кнопки в ряд не помещались: «Написать книгу» превращалась
     в обрубок оранжевой таблетки шириной 48px с одним пером. На телефоне
     это круглая акцентная кнопка того же размера, что остальные. */
  .st-topbar .brand sup{ display:none; }
  .st-topbar .acts{ gap:6px; }
  .st-topbar .acts .st-btn{ width:40px; height:40px; padding:0; border-radius:var(--r-pill); justify-content:center; }
  .st-topbar .acts .st-btn i{ margin:0; }
  /* полупрозрачной шапки не хватало: сквозь неё читался текст страницы */
  .st-topbar.solid{ background:color-mix(in srgb, var(--st-bg-deep) 94%, transparent); }
}
@media (hover: hover) and (pointer: fine){
  .st-topbar nav a:hover{ color:var(--st-text); background:color-mix(in srgb, var(--st-text) 7%, transparent); }
}


/* ============================================================
   ЧИТАЛКА: ИММЕРСИВНЫЙ РЕЖИМ
   Атмосфера, панель Aa, автоскрытие интерфейса, кольцо прогресса.
   ============================================================ */

/* фоновая атмосфера — CSS-градиенты, без WebGL и без картинок */
.st-rmood, .st-rtint{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.st-rmood{ background:radial-gradient(120% 90% at 50% 6%, transparent 38%, rgba(0,0,0,.42) 100%); }
.st-rtint{
  opacity:.22; transition:background 2.4s var(--ease), opacity 1.2s var(--ease);
  background:
    radial-gradient(70% 48% at 76% 2%, color-mix(in srgb, var(--st-accent) 80%, transparent), transparent 62%),
    radial-gradient(58% 42% at 8% 96%, color-mix(in srgb, var(--st-violet) 70%, transparent), transparent 60%);
}
/* на «бумаге» и сепии атмосферу почти гасим — иначе лист желтит */
.st-reader:not(.night) .st-rtint{ opacity:.06; }
.st-reader:not(.night) .st-rmood{ background:radial-gradient(120% 90% at 50% 6%, transparent 46%, rgba(90,70,40,.14) 100%); }
.st-reader .st-book-scroll{ position:relative; z-index:1; }

/* абзацы проявляются по мере чтения */
.st-sheet p.rin{ opacity:0; transform:translateY(12px); }
.st-sheet p.rin.seen{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce){
  .st-sheet p.rin{ opacity:1; transform:none; }
}

/* верх и низ прячутся во время чтения */
.st-reader-ui.top, .st-reader-bar{ transition:opacity .35s var(--ease), transform .35s var(--ease); }
.st-reader.hideui .st-reader-ui.top{ opacity:0; transform:translateY(-14px); pointer-events:none; }
.st-reader.hideui .st-reader-bar{ opacity:0; transform:translateY(16px); pointer-events:none; }

/* нижняя плашка: кольцо прогресса + «осталось N минут» */
.st-rring{
  width:38px; height:38px; border-radius:var(--r-pill); flex:none; position:relative;
  display:grid; place-items:center; font-size:var(--fs-2xs); font-weight:800; color:var(--st-text);
  background:conic-gradient(var(--st-accent) calc(var(--p,0) * 1%), color-mix(in srgb, var(--st-text) 18%, transparent) 0);
}
.st-rring::after{ content:''; position:absolute; inset:4px; border-radius:var(--r-pill); background:var(--st-surface); }
.st-rring span{ position:relative; z-index:1; }
.st-rleft{ font-size:var(--fs-xs); font-weight:700; color:var(--st-dim); white-space:nowrap; line-height:1.35; }

/* панель Aa */
.st-aa{
  position:fixed; z-index:220; right:clamp(12px, 3vw, 26px); top:72px; width:300px;
  background:var(--st-glass); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--st-border-hi); border-radius:var(--r-l); box-shadow:var(--st-shadow);
  padding:var(--s5); color:var(--st-text);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:.24s var(--ease);
}
.st-aa.open{ opacity:1; visibility:visible; transform:none; }
.st-aa h5{ font-size:var(--fs-2xs); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--st-faint); margin:0 0 10px; }
.st-aa h5:not(:first-child){ margin-top:var(--s5); }
.st-aa .themes{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); }
.st-aa .themes button{ aspect-ratio:1; border-radius:var(--r-s); border:1.5px solid var(--st-border-hi); transition:.16s var(--ease); }
.st-aa .themes button[data-th="paper"]{ background:#faf7f0; }
.st-aa .themes button[data-th="sepia"]{ background:#f3e7d0; }
.st-aa .themes button[data-th="grey"]{ background:#2b2a28; }
.st-aa .themes button[data-th="black"]{ background:#000; }
.st-aa .themes button.on{ border-color:var(--st-accent); box-shadow:0 0 0 3px var(--st-accent-soft); }
.st-aa .fonts{ display:flex; gap:var(--s2); }
.st-aa .fonts button{ flex:1; padding:10px 0; border:1px solid var(--st-border); border-radius:var(--r-s); font-size:var(--fs-lg); color:var(--st-faint); transition:.16s var(--ease); }
.st-aa .fonts button[data-f="serif"]{ font-family:var(--f-book); }
.st-aa .fonts button[data-f="title"]{ font-family:var(--f-title); }
.st-aa .fonts button[data-f="ui"]{ font-family:var(--f-ui); }
.st-aa .fonts button.on{ border-color:var(--st-accent); color:var(--st-text); background:var(--st-accent-soft); }
.st-aa .sld{ display:flex; align-items:center; gap:var(--s3); color:var(--st-faint); }
.st-aa .sld input{ flex:1; accent-color:var(--st-accent); }
.st-aa .sw{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); font-size:var(--fs-md); padding:var(--s2) 0; }
.st-aa .sw i{ width:38px; height:22px; border-radius:var(--r-pill); background:color-mix(in srgb, var(--st-text) 14%, transparent); position:relative; transition:.2s var(--ease); flex:none; }
.st-aa .sw i::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:var(--r-pill); background:var(--st-text); opacity:.55; transition:.2s var(--ease); }
.st-aa .sw.on i{ background:var(--st-accent); }
.st-aa .sw.on i::after{ transform:translateX(16px); opacity:1; background:#fff; }
@media (max-width:520px){
  .st-aa{ left:var(--s3); right:var(--s3); width:auto; top:auto; bottom:calc(84px + var(--sab)); transform:translateY(10px); }
  .st-aa.open{ transform:none; }
}

/* темы «бумаги» переключаются здесь же — раньше был только ночной тумблер */
.st-reader[data-paper="sepia"]{ --paper:#f3e7d0; --paper-2:#eadcbe; --ink:#3a2e1c; --ink-dim:#8b7754; --ink-soft:#6f5b38; --paper-brd:rgba(91,63,26,.16); }
.st-reader[data-paper="grey"]{ --paper:#2b2a28; --paper-2:#333230; --ink:#e6e2d9; --ink-dim:#918b7e; --ink-soft:#a89c80; --ink-acc:#e88a68; --paper-brd:rgba(250,249,245,.13); }
.st-reader[data-paper="black"]{ --paper:#000; --paper-2:#0a0a09; --ink:#d5d1c8; --ink-dim:#7d786e; --ink-soft:#9a9488; --ink-acc:#e88a68; --paper-brd:rgba(250,249,245,.1); }

/* метка обсуждения прямо в тексте */
.st-cmark{
  display:inline-flex; align-items:center; gap:4px; vertical-align:super; margin-left:5px;
  font-family:var(--f-ui); font-size:var(--fs-2xs); font-weight:800; line-height:1.6;
  padding:2px 8px; border-radius:var(--r-pill); cursor:pointer;
  background:var(--st-accent-soft); color:var(--st-accent-hi); border:1px solid var(--st-accent-line);
  transition:.18s var(--ease);
}
.st-discussed{
  background:color-mix(in srgb, var(--ink-acc) 16%, transparent);
  box-shadow:0 2px 0 color-mix(in srgb, var(--ink-acc) 42%, transparent);
  border-radius:2px; padding:0 2px; cursor:pointer;
}

/* ---- комментарии: на десктопе панель сбоку, а не шит снизу ---- */
@media (min-width:1180px){
  .st-reader.withc .st-book-scroll{ padding-right:420px; }
  .st-reader.withc .st-reader-ui.top{ right:420px; }
  .st-reader.withc .st-reader-bar{ right:420px; }
  #comments-sheet.st-sheet-modal{ pointer-events:none; background:none; }
  #comments-sheet.st-sheet-modal .scrim{ display:none; }
  #comments-sheet.st-sheet-modal .panel{
    pointer-events:auto;
    position:fixed; right:0; top:0; bottom:0; left:auto;
    width:420px; max-width:none; height:100dvh; max-height:none;
    border-radius:0; border-left:1px solid var(--st-border-hi);
    transform:translateX(100%); transition:transform .3s var(--ease);
  }
  #comments-sheet.st-sheet-modal.open .panel{ transform:none; }
  #comments-sheet .grab{ display:none; }
  #comments-sheet .bodyy{ flex:1; }
}

/* размеры текста книги управляются панелью Aa */
.st-book-scroll{ --read-font:var(--f-book); --read-size:17px; --read-width:680px; }
.st-sheet{ width:min(var(--read-width), 100%); }
.st-sheet .inner{ font-family:var(--read-font); }
.st-sheet p{ font-size:var(--read-size); }
.st-reader.no-reveal .st-sheet p.rin{ opacity:1; transform:none; }
.st-reader.no-marks .st-cmark,
.st-reader.no-marks .st-discussed{ display:none; background:none; box-shadow:none; }

/* ==== кнопка комментариев в нижней панели ====
   Был значок с красным пузырьком, налезавшим на угол кнопки. Стала пилюля
   «иконка + число»: счётчик читается сразу, ничего не обрезается. */
.story-app .st-cbtn{
  display:inline-flex; align-items:center; gap:7px; flex:none; height:38px; padding:0 var(--s3);
  border-radius:var(--r-pill); color:var(--st-text); font-family:var(--f-ui);
  background:color-mix(in srgb, var(--st-text) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--st-text) 16%, transparent);
  transition:.18s var(--ease); cursor:pointer;
}
.st-cbtn i{ font-size:var(--fs-md); opacity:.9; }
.st-cbadge{ font-size:var(--fs-xs); font-weight:800; line-height:1; color:var(--st-accent-hi); }
.st-cbadge[hidden]{ display:none; }
.story-app .st-cbtn.on{ background:var(--st-accent-soft); border-color:var(--st-accent-line); color:var(--st-accent-hi); }
@media (hover:hover){
  .story-app .st-cbtn:hover{ background:color-mix(in srgb, var(--st-text) 22%, transparent); }
}

.st-sheet-modal .head .cnt{ color:var(--st-faint); font-size:var(--fs-sm); font-weight:700; }

/* титул, посвящение и финал — содержимое по центру листа */
.st-page.fullpg .inner{ display:flex; flex-direction:column; justify-content:center; }
.titlepage, .dedication, .finalpage{ min-height:0; }

/* лист отделяется от тёмного фона мягкой тенью по бокам */
.st-sheet{ box-shadow:0 0 60px rgba(0,0,0,.28); }
.st-reader:not(.night) .st-sheet{ box-shadow:0 0 50px rgba(0,0,0,.35); }

/* верхняя и нижняя панели поверх листа */
.st-reader-ui.top, .st-reader-bar{ z-index:40; }

/* ==== когда панели спрятаны ====
   На телефоне читалка встречает чистой страницей: ни шапки, ни нижней
   полосы. От интерфейса остаются волосяная полоска прогресса и одна кнопка
   вызова — тап по странице делает то же самое. */
.st-hair{
  position:absolute; left:0; right:0; bottom:0; height:2px; z-index:39;
  background:color-mix(in srgb, var(--st-text) 12%, transparent);
  opacity:0; transition:opacity .3s var(--ease); pointer-events:none;
}
.st-hair i{ display:block; height:100%; width:0; background:var(--st-grad); transition:width .25s; }
.st-callui{
  position:absolute; right:calc(12px + var(--sar, 0px)); bottom:calc(14px + var(--sab)); z-index:41;
  width:42px; height:42px; border-radius:var(--r-pill); display:grid; place-items:center;
  color:var(--st-text); font-size:var(--fs-sm);
  background:color-mix(in srgb, var(--st-bg-deep) 62%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb, var(--st-text) 14%, transparent);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.24s var(--ease);
}
.st-reader.hideui .st-hair{ opacity:1; }
.st-reader.hideui .st-callui{ opacity:1; visibility:visible; transform:none; }




/* нижняя панель читалки на узком экране: «осталось N мин» дублирует
   номер страницы и первым уезжает за край — прячем */
@media (max-width:560px){
  .st-rleft{ display:none; }
  .st-pgindic{ min-width:42px; }
  .st-reader-bar{ gap:var(--s1); padding-left:var(--s2); padding-right:var(--s2); }
}

/* строка оглавления */
.st-tocrow{
  width:100%; display:flex; align-items:center; gap:var(--s3); text-align:left;
  padding:var(--s3) var(--s2); border-radius:var(--r-m); color:inherit; transition:.16s var(--ease);
}
.st-tocrow + .st-tocrow{ border-top:1px solid var(--st-hairline); }
.st-tocrow .n{ font-family:var(--f-disp); font-size:var(--fs-sm); font-weight:800; color:var(--st-faint); min-width:26px; }
.st-tocrow .t{ flex:1; font-size:var(--fs-base); font-weight:600; line-height:1.3; }
.st-tocrow .d{ font-size:var(--fs-xs); color:var(--st-faint); font-weight:700; white-space:nowrap; }
@media (hover: hover) and (pointer: fine){
  .st-tocrow:hover{ background:color-mix(in srgb, var(--st-text) 7%, transparent); }
  .st-tocrow:hover .n{ color:var(--st-accent-hi); }
  .st-cmark:hover{ background:var(--st-accent); color:#fff; border-color:transparent; }
}

/* ============================================================
   ЭКРАН НАЧАЛА КНИГИ  (/story/new)
   Два шага: формат и первая фраза. Книга в базе появляется только
   в конце — до этого человек ничем не связан.
   ============================================================ */
.st-start{ position:fixed; inset:0; overflow-y:auto; background:var(--st-bg); display:flex; flex-direction:column; }
.st-start::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(70% 46% at 82% -4%, color-mix(in srgb, var(--st-accent) 26%, transparent), transparent 62%),
    radial-gradient(56% 40% at 4% 104%, color-mix(in srgb, var(--st-violet) 22%, transparent), transparent 60%);
}
.st-start-head{
  position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:var(--s3);
  padding:calc(10px + var(--sat)) var(--gut) 10px;
}
.st-start-head .steps{ flex:1; display:flex; gap:6px; justify-content:center; }
.st-start-head .steps i{
  width:34px; height:4px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--st-text) 16%, transparent); transition:.3s var(--ease);
}
.st-start-head .steps i.on{ background:var(--st-accent); }

.st-step{ display:none; position:relative; z-index:1; flex:1; }
.st-step.on{ display:block; animation:st-up .34s var(--ease); }
/* второй шаг — короткий, ставим его по центру экрана, а не прижимаем к верху */
.st-step[data-step="2"].on{ display:flex; align-items:center; }
.st-step[data-step="2"] .st-start-in{ width:min(600px,100%); }
.st-start-in{ width:min(720px, 100%); margin:0 auto; padding:var(--s4) var(--gut) calc(40px + var(--sab)); }

.st-start-t{
  font-family:var(--f-title); font-weight:800; letter-spacing:-.01em; line-height:1.1;
  font-size:clamp(28px, 6.4vw, 44px); margin:0 0 var(--s3);
}
.st-start-t.sm{ font-size:clamp(22px, 5vw, 32px); line-height:1.25; }
.st-start-sub{ color:var(--st-dim); font-size:var(--fs-lg); line-height:1.5; margin:0 0 var(--s6); max-width:52ch; }
.st-start-note{ color:var(--st-faint); font-size:var(--fs-sm); text-align:center; margin:var(--s6) 0 0; }

/* карточки форматов */
.st-fmt-grid{ display:grid; gap:var(--s3); }
@media(min-width:680px){ .st-fmt-grid{ grid-template-columns:1fr 1fr; } }
.st-fmt{
  display:flex; align-items:center; gap:var(--s3); text-align:left; width:100%;
  padding:var(--s4); border-radius:var(--r-l);
  background:var(--st-surface-2); border:1px solid var(--st-border-hi);
  box-shadow:var(--st-shadow-sm);
  transition:transform .2s var(--spring), border-color .2s var(--ease), background .2s var(--ease);
}
.st-fmt .em{
  width:52px; height:52px; flex:none; border-radius:var(--r-m); display:grid; place-items:center;
  font-size:26px; background:color-mix(in srgb, var(--st-text) 6%, transparent);
}
.st-fmt .tx{ flex:1; min-width:0; display:block; }
.st-fmt .tx b{ display:block; font-size:var(--fs-lg); font-weight:700; line-height:1.3; }
.st-fmt .tx i{ display:block; font-style:normal; font-size:var(--fs-sm); color:var(--st-faint); margin-top:3px; }
.st-fmt .go{ flex:none; color:var(--st-faint); transition:.2s var(--ease); }
.st-fmt:active{ transform:scale(.985); }
@media (hover:hover){
  .st-fmt:hover{ border-color:var(--st-accent-line); background:var(--st-surface-2); }
  .st-fmt:hover .go{ color:var(--st-accent-hi); transform:translateX(3px); }
}

/* шаг 2 — вопрос соавтора и ответ */
.st-ai-line{ display:flex; align-items:center; gap:var(--s2); color:var(--st-faint); font-size:var(--fs-sm); font-weight:700; margin-bottom:var(--s3); }
.st-ai-line .face{
  width:30px; height:30px; border-radius:var(--r-pill); display:grid; place-items:center;
  background:var(--st-grad); color:#fff; font-size:var(--fs-sm);
}
.st-answer{
  display:flex; align-items:flex-end; gap:var(--s2); margin-top:var(--s5);
  background:var(--st-card); border:1.5px solid var(--st-border); border-radius:var(--r-l);
  padding:var(--s2) var(--s2) var(--s2) var(--s4); transition:border-color .2s var(--ease);
}
.st-answer:focus-within{ border-color:var(--st-accent); }
.st-answer textarea{
  flex:1; background:none; border:0; outline:none; resize:none; min-width:0;
  font-family:var(--f-ui); font-size:16px; line-height:1.5; color:var(--st-text);
  padding:var(--s2) 0; min-height:78px;
}
.st-answer textarea::placeholder{ color:var(--st-faint); }
.st-answer textarea:focus-visible{ outline:none; }
.st-icobtn.mic.on{ background:var(--st-grad); color:#fff; }
.st-start-acts{ display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s5); }

/* ============================================================
   ФОТОАЛЬБОМ «ПЛЁНКА»  (/story/album)
   Загрузка пачкой → разбор → готовые развороты.
   ============================================================ */
.st-alb-drop{ text-align:center; padding-top:var(--s6); }
.st-alb-drop .ic{
  width:92px; height:92px; margin:0 auto var(--s5); border-radius:var(--r-xl);
  background:var(--st-grad); display:grid; place-items:center; font-size:38px;
  box-shadow:0 18px 40px rgba(217,119,87,.32);
}
.st-alb-drop .thumbs{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:var(--s6) 0 0;
}
.st-alb-drop .thumbs .t, .st-alb-drop .thumbs .more{
  width:52px; height:66px; border-radius:var(--r-s); overflow:hidden; background:var(--st-surface-2);
  display:grid; place-items:center; font-size:var(--fs-sm); font-weight:800; color:var(--st-dim);
}
.st-alb-drop .thumbs .t img{ width:100%; height:100%; object-fit:cover; }
.st-alb-drop .acts{ display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s6); }
.st-alb-hint{ color:var(--st-faint); font-size:var(--fs-sm); line-height:1.5; margin-top:var(--s5); text-align:center; }

.st-alb-queue{ padding-top:var(--s8); }
.st-alb-queue .qhead{ display:flex; align-items:baseline; gap:var(--s3); margin-bottom:var(--s3); }
.st-alb-queue .qhead b{ font-family:var(--f-disp); font-size:var(--fs-xl); font-weight:800; flex:1; }
.st-alb-queue .qhead span{ color:var(--st-faint); font-size:var(--fs-sm); font-weight:700; }

/* шаги разбора */
.st-alb-steps{ list-style:none; display:flex; flex-direction:column; gap:var(--s3); margin:var(--s5) 0 0; }
.st-alb-steps li{ display:flex; align-items:center; gap:var(--s3); color:var(--st-faint); font-size:var(--fs-base); }
.st-alb-steps li i{
  width:22px; height:22px; border-radius:var(--r-pill); flex:none; position:relative;
  background:color-mix(in srgb, var(--st-text) 8%, transparent);
}
.st-alb-steps li.now{ color:var(--st-text); }
.st-alb-steps li.now i{ background:var(--st-accent-soft); }
.st-alb-steps li.now i::after{
  content:''; position:absolute; inset:5px; border-radius:var(--r-pill); background:var(--st-accent);
  animation:st-fade 1.1s ease infinite;
}
.st-alb-steps li.done{ color:var(--st-dim); }
.st-alb-steps li.done i{ background:color-mix(in srgb, var(--st-success) 22%, transparent); }
.st-alb-steps li.done i::after{
  content:'✓'; position:absolute; inset:0; display:grid; place-items:center;
  font-size:var(--fs-2xs); font-weight:800; color:var(--st-success);
}

.st-alb-report{ margin-top:var(--s6); display:flex; flex-direction:column; gap:var(--s2); }
.st-alb-report .r{ font-size:var(--fs-base); color:var(--st-text); }
.st-alb-report .r b{ font-family:var(--f-disp); font-weight:800; }
.st-alb-report .r.dim{ color:var(--st-faint); font-size:var(--fs-sm); }
.st-alb-report .r.big{
  margin-top:var(--s3); padding:var(--s4); border-radius:var(--r-m);
  background:var(--st-surface); border:1px solid var(--st-border); font-size:var(--fs-lg);
}
.st-alb-report .days{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
.st-alb-report .day{
  display:flex; flex-direction:column; gap:2px; padding:var(--s2) var(--s3);
  border-radius:var(--r-s); background:var(--st-surface); border:1px solid var(--st-border);
  font-size:var(--fs-2xs); color:var(--st-faint);
}
.st-alb-report .day b{ font-size:var(--fs-sm); color:var(--st-text); font-weight:700; }

/* превью готовых разворотов */
.st-alb-spreads{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin:var(--s5) 0 0; }
@media(min-width:680px){ .st-alb-spreads{ grid-template-columns:repeat(3,1fr); } }
.st-alb-spreads .sp{
  position:relative; border-radius:var(--r-s); overflow:hidden; aspect-ratio:4/3;
  display:grid; gap:2px; background:var(--st-surface-2);
}
.st-alb-spreads .sp.n1{ grid-template:1fr/1fr; }
.st-alb-spreads .sp.n2{ grid-template:1fr/1fr 1fr; }
.st-alb-spreads .sp.n3{ grid-template:1fr 1fr/1fr 1fr; }
.st-alb-spreads .sp.n3 img:first-child{ grid-row:span 2; }
.st-alb-spreads .sp img{ width:100%; height:100%; object-fit:cover; }
.st-alb-spreads .sp .ttl{
  position:absolute; left:0; right:0; bottom:0; padding:16px 8px 6px;
  background:linear-gradient(transparent, rgba(0,0,0,.75)); color:#fff;
  font-size:var(--fs-2xs); font-weight:700;
}

/* подпись разворота фотоальбома: день и текст поверх нижнего края кадра */
.st-albcap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:60px var(--gut) calc(var(--ui-bot) + var(--s2));
  background:linear-gradient(transparent, rgba(0,0,0,.55) 34%, rgba(0,0,0,.9));
  color:#fff; pointer-events:none;
}
.st-albcap b{
  display:block; font-family:var(--f-ui); font-size:var(--fs-2xs); font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:6px;
}
.st-albcap span{ font-family:var(--f-book); font-size:var(--fs-lg); line-height:1.45; }
/* Реакции на фото-развороте лежат ПОВЕРХ снимка. На текстовой странице
   хвост стоит в потоке (иначе он налезал бы на абзацы), но здесь поток
   отнимал бы у фотографии половину ширины. */
.st-page.albumpg .footrow{
  position:absolute; left:0; right:0; bottom:calc(var(--ui-bot) - 6px);
  z-index:3; margin:0; padding-bottom:0;
}
/* на светлом снимке эмодзи пропадали — даём им собственную подложку */
.st-page.albumpg .st-react-row button{
  background:rgba(0,0,0,.42); color:#fff;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}

/* ============================================================
   ЧАРТ КАК ГЛАВНОЕ НА ВИТРИНЕ
   Витрина открывается тем, что люди читают, а не рекламой.
   ============================================================ */
.st-topchart{ position:relative; padding:var(--s5) 0 var(--s6); }
.st-topchart-bg{
  position:absolute; inset:0 0 40% 0; z-index:0; pointer-events:none;
  background:
    radial-gradient(72% 90% at 78% -10%, color-mix(in srgb, var(--st-accent) 32%, transparent), transparent 64%),
    radial-gradient(60% 70% at 6% 0%, color-mix(in srgb, var(--st-violet) 18%, transparent), transparent 62%);
}
.st-topchart > *:not(.st-topchart-bg){ position:relative; z-index:1; }

.st-topchart-head{
  display:flex; align-items:flex-end; gap:var(--s4); flex-wrap:wrap;
  padding:0 var(--gut) var(--s4);
}
.st-topchart-head h1{
  font-family:var(--f-disp); font-weight:800; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(28px, 4.6vw, 50px); margin:6px 0 0;
}
.st-topchart-head > div{ flex:1; min-width:0; }

/* переключатель периода — как вкладки чарта в музыкальных сервисах */
.st-per{ display:flex; gap:2px; padding:3px; border-radius:var(--r-pill); flex:none;
  background:color-mix(in srgb, var(--st-text) 8%, transparent); }
.st-per a{
  padding:var(--s2) var(--s4); border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:700; color:var(--st-faint); transition:.18s var(--ease);
}
.st-per a.on{ background:var(--st-surface); color:var(--st-text); box-shadow:var(--st-shadow-sm); }

/* первое место — крупно */
.st-topone{
  display:flex; gap:var(--s5); align-items:center; margin:0 var(--gut) var(--s5);
  padding:var(--s5); border-radius:var(--r-xl);
  background:var(--st-glass); border:1px solid var(--st-border-hi);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  transition:transform .28s var(--spring), border-color .2s var(--ease);
}
.st-topone .cv{ position:relative; width:clamp(108px, 22vw, 168px); flex:none; }
.st-topone .cv .rk{
  position:absolute; left:-10px; bottom:-10px; width:44px; height:44px; border-radius:var(--r-pill);
  background:var(--st-grad); color:#fff; display:grid; place-items:center;
  font-family:var(--f-disp); font-size:var(--fs-xl); font-weight:800;
  box-shadow:0 10px 26px rgba(217,119,87,.45);
}
.st-topone .in{ flex:1; min-width:0; display:block; }
.st-topone .t{
  display:block; font-family:var(--f-title); font-weight:700; line-height:1.15;
  font-size:clamp(20px, 3vw, 34px);
}
.st-topone .a{ display:block; color:var(--st-dim); font-weight:600; font-size:var(--fs-base); margin-top:4px; }
.st-topone .st{ display:block; margin-top:var(--s3); color:var(--st-dim); font-size:var(--fs-sm); }
.st-topone .st b{ color:var(--st-text); font-weight:800; }
.st-topone .st i{ font-style:normal; color:var(--st-faint); margin:0 5px; }
.st-topone .an{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:var(--st-faint); font-size:var(--fs-sm); line-height:1.5; margin-top:var(--s3);
}
.st-topone .go{
  display:inline-flex; align-items:center; gap:var(--s2); margin-top:var(--s4);
  padding:var(--s3) var(--s5); border-radius:var(--r-pill);
  background:var(--st-grad); color:#fff; font-weight:700; font-size:var(--fs-base);
  box-shadow:0 8px 22px rgba(217,119,87,.3);
}
@media (hover:hover){
  .st-topone:hover{ transform:translateY(-2px); border-color:var(--st-accent-line); }
}
@media (max-width:560px){
  .st-topone{ flex-direction:column; align-items:stretch; text-align:left; padding:var(--s4); gap:var(--s4); }
  .st-topone .cv{ width:132px; }
  .st-topone .go{ justify-content:center; }
  .st-topchart-head{ align-items:flex-start; }
  .st-per{ width:100%; }
  .st-per a{ flex:1; text-align:center; }
}

/* на широком экране чарт не растягиваем во всю ширину: строка длиной
   в полтора метра читается хуже, чем колонка */
@media (min-width:1200px){
  .st-topchart-head, .st-topone, .st-topchart .st-chart{
    max-width:1160px; margin-left:auto; margin-right:auto;
  }
  .st-topone{ padding:var(--s6); gap:var(--s6); }
}

/* второй столбец у автора: книги и часы */
.st-author .c2{ display:block; font-size:var(--fs-2xs); color:var(--st-faint); margin-top:2px; }

/* ============================================================
   ЧАРТ: раскрытие остальных мест
   Места ниже десятого лежат в HTML скрытыми — стрелка их просто
   показывает. Так поисковик видит весь чарт, а человек — короткий.
   ============================================================ */
.story-app .st-chart-more{
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  margin:var(--s4) auto 0; padding:var(--s3) var(--s6);
  border-radius:var(--r-pill); font-weight:700; font-size:var(--fs-sm);
  color:var(--st-dim); background:color-mix(in srgb, var(--st-text) 6%, transparent);
  border:1px solid var(--st-border); transition:.2s var(--ease);
}
.story-app .st-chart-more i{ transition:transform .25s var(--ease); font-size:var(--fs-xs); }
.story-app .st-chart-more.on i{ transform:rotate(180deg); }
@media (hover:hover){
  .story-app .st-chart-more:hover{ color:var(--st-text); border-color:var(--st-accent-line); background:var(--st-accent-soft); }
}

/* Кружок-заглушка вместо битой картинки в комментариях.
   Пустой src рисовал иконку сломанного файла — выглядело как поломка сайта. */
.st-comment .av.ini{
  display:grid; place-items:center; font-weight:800; color:#fff;
  background:var(--st-grad); font-size:var(--fs-sm);
}

/* ============================================================
   СТРАНИЦА АВТОРА (author.php)
   Витрина человека: фото, пара слов, цифры, книги.
   ============================================================ */

.st-ahero{ position:relative; padding:var(--s7) 0 var(--s6); overflow:hidden; }
.st-ahero .bg{
  position:absolute; inset:0; z-index:0;
  background-image:
    radial-gradient(70% 90% at 76% -10%, color-mix(in srgb, var(--st-accent) 30%, transparent), transparent 64%),
    radial-gradient(56% 70% at 6% 0%, color-mix(in srgb, var(--st-violet) 16%, transparent), transparent 62%);
}
.st-ahero .bg::before{
  content:''; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(to top, var(--st-bg), transparent);
}
/* та же колонка, что у чарта на витрине: 1160px содержимого плюс поля,
   иначе страница автора начинается на 48px правее главной */
.st-ahero .in{
  position:relative; z-index:2; display:flex; gap:var(--s6); align-items:center;
  padding:0 var(--gut); max-width:calc(1160px + var(--gut) * 2); margin:0 auto;
}

.st-ahero .ph{
  position:relative; width:clamp(104px, 15vw, 156px); aspect-ratio:1; flex:none;
  border-radius:var(--r-pill); overflow:hidden;
  border:3px solid var(--st-bg); box-shadow:var(--st-shadow-md);
}
.st-ahero .ph .pic{
  display:grid; place-items:center; width:100%; height:100%;
  background:var(--st-grad); color:#fff;
  font-family:var(--f-title); font-weight:800; font-size:clamp(34px, 6vw, 54px);
}
.st-ahero .ph img{ width:100%; height:100%; object-fit:cover; }
/* Фото автора — из профиля сайта, здесь его не меняют. */
.st-ahero .ph .pic{ display:grid; border-radius:var(--r-pill); overflow:hidden; }

.st-ahero .tx{ flex:1; min-width:0; }
.st-ahero .tx h1{
  font-family:var(--f-disp); font-weight:800; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(26px, 4.4vw, 46px); margin:2px 0 0;
}
.st-ahero .tag{ color:var(--st-dim); font-size:var(--fs-lg); margin:var(--s2) 0 0; line-height:1.4; }

.st-ahero .nums{ display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); margin-top:var(--s4); }
.st-ahero .nums span{ display:block; }
.st-ahero .nums b{
  display:block; font-family:var(--f-disp); font-weight:800; font-size:var(--fs-2xl);
  line-height:1.1; font-variant-numeric:tabular-nums;
}
.st-ahero .nums i{ display:block; font-style:normal; font-size:var(--fs-2xs); font-weight:600; color:var(--st-faint); margin-top:2px; }
.st-ahero .acts{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5); }
.st-ahero .st-btn.on i{ color:var(--st-success); }

@media (max-width:700px){
  .st-ahero{ padding-top:var(--s5); }
  .st-ahero .in{ flex-direction:column; align-items:flex-start; gap:var(--s4); }
  .st-ahero .nums{ gap:var(--s3) var(--s5); }
  .st-ahero .acts{ width:100%; }
  .st-ahero .acts .st-btn{ flex:1; justify-content:center; }
}

.st-apage{ max-width:calc(1160px + var(--gut) * 2); margin:0 auto; }

/* ---- о себе ---- */
.st-abio{ padding:var(--s6) var(--gut) 0; }
.st-abio h2{
  font-family:var(--f-title); font-weight:800; margin:0 0 var(--s3);
  font-size:clamp(18px, 2vw, 22px);
}
.st-abio .tx{
  font-family:var(--f-book); font-size:var(--fs-lg); line-height:1.7;
  color:color-mix(in srgb, var(--st-text) 92%, transparent); max-width:68ch;
}
/* Свёрнутый рассказ о себе: видно начало, дальше — по кнопке.
   Не line-clamp: с ним не сделать мягкое затухание, а обрыв текста
   ровно по строке выглядит как сбой загрузки. */
.st-abio.clamp .tx{
  position:relative; max-height:8.5em; overflow:hidden;
}
.st-abio.clamp .tx::after{
  content:''; position:absolute; inset:auto 0 0 0; height:3.2em; pointer-events:none;
  background:linear-gradient(to top, var(--st-bg), transparent);
}
.st-abio.clamp.open .tx{ max-height:none; }
.st-abio.clamp.open .tx::after{ display:none; }
.story-app .st-abio .more{
  margin-top:var(--s2); padding:0; font-size:var(--fs-sm); font-weight:700;
  color:var(--st-accent-hi); background:none; border:0;
}
@media (hover:hover){ .story-app .st-abio .more:hover{ text-decoration:underline; text-underline-offset:3px; } }

.st-abio .empty, .st-apub .empty{
  color:var(--st-faint); font-size:var(--fs-sm); margin:var(--s2) 0 0; line-height:1.6;
}
.st-abio .lnk, .st-apub .lnk{
  color:var(--st-accent-hi); font-weight:700; text-decoration:underline; text-underline-offset:3px;
}

/* ---- паблик ---- */
.st-apub{ padding:var(--s5) var(--gut) 0; }
.st-apub .card{
  display:flex; align-items:center; gap:var(--s4); max-width:520px;
  padding:var(--s4); border-radius:var(--r-l);
  background:var(--st-surface); border:1px solid var(--st-border);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.st-apub .card .ic{
  width:44px; height:44px; flex:none; border-radius:var(--r-m); display:grid; place-items:center;
  background:var(--st-accent-soft); color:var(--st-accent-hi); font-size:var(--fs-lg);
}
.st-apub .card .i{ flex:1; min-width:0; }
.st-apub .card .i b{ display:block; font-size:var(--fs-base); font-weight:700; }
.st-apub .card .i small{
  display:block; font-size:var(--fs-xs); color:var(--st-faint); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.st-apub .card .go{ color:var(--st-faint); }
@media (hover:hover){
  .st-apub .card:hover{ border-color:var(--st-accent-line); transform:translateY(-1px); }
}

/* ---- книги автора: сетка, а не полка ----
   Полка с горизонтальной прокруткой хороша, когда рядов много.
   Здесь ряд один, и книги надо видеть все сразу. */
.st-agrid{
  display:grid; gap:var(--s5) var(--s4); padding:10px var(--gut) var(--s6);
  grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
}
.st-agrid .st-bookcard{ width:auto; position:relative; }
@media (min-width:900px){
  .st-agrid{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ---- подписи полей в шторке ---- */
.st-lbl{
  display:block; font-size:var(--fs-xs); font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--st-faint); margin:0 0 var(--s2);
}
.st-hint{ font-size:var(--fs-xs); color:var(--st-faint); line-height:1.5; margin:var(--s2) 0 0; }

/* ---- авторы на витрине ----
   Под чартом это единственный блок, поэтому не полка со скроллом,
   а сетка: все авторы видны сразу. */
.st-authgrid{
  display:grid; gap:var(--s3); padding:6px var(--gut) var(--s7);
  grid-template-columns:repeat(auto-fill, minmax(272px, 1fr));
}
.st-authcard{
  display:flex; align-items:center; gap:var(--s4); min-width:0;
  padding:var(--s3) var(--s4); border-radius:var(--r-l);
  background:color-mix(in srgb, var(--st-text) 4%, transparent);
  border:1px solid var(--st-border); color:inherit;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.st-authcard .av{
  width:60px; height:60px; flex:none; border-radius:var(--r-pill); overflow:hidden;
  display:grid; place-items:center; background:var(--st-grad); color:#fff;
  font-family:var(--f-title); font-weight:800; font-size:var(--fs-xl);
}
.st-authcard .av img{ width:100%; height:100%; object-fit:cover; }
.st-authcard .i{ flex:1; min-width:0; display:block; }
.st-authcard .n{
  display:block; font-weight:700; font-size:var(--fs-base); line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* строку с цифрами не переносим: «107 прочтений · 18 ч 27 / мин»
   на двух строках делает карточки разной высоты */
.st-authcard .c{
  display:block; font-size:var(--fs-xs); font-weight:700; color:var(--st-accent-hi); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.st-authcard .c2{
  display:block; font-size:var(--fs-2xs); font-weight:600; color:var(--st-faint); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.st-authcard .go{ color:var(--st-faint); font-size:var(--fs-sm); opacity:0; transition:.2s var(--ease); }
@media (hover:hover){
  .st-authcard:hover{
    border-color:var(--st-accent-line); background:var(--st-accent-soft); transform:translateY(-1px);
  }
  .st-authcard:hover .go{ opacity:1; }
}
@media (max-width:520px){
  .st-authgrid{ grid-template-columns:1fr; }
  .st-authcard .av{ width:52px; height:52px; font-size:var(--fs-lg); }
}

/* Нижний край шторки на телефоне: под системной полосой жеста кнопка
   «Сохранить» оказывалась неудобно близко к краю экрана. */
@media (max-width:739px){
  .st-sheet-modal .bodyy{ padding-bottom:calc(var(--s4) + var(--sab)); }
}

/* Одна колонка для чарта и авторов: без этого блок авторов начинался
   на 90px левее чарта, и страница «разъезжалась» на широком экране. */
@media (min-width:1200px){
  .st-narrow{ max-width:calc(1160px + var(--gut) * 2); margin-left:auto; margin-right:auto; }
}

/* ---- строка «подпись поля + кнопка ИИ» ----
   Кнопка стоит у самого поля: она про этот текст, и её надо видеть
   тогда, когда смотришь на пустое поле, а не внизу шторки. */
.st-lblrow{ display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s2); }
.st-lblrow .st-lbl{ margin:0; }
.story-app .st-aihelp{
  margin-left:auto; display:inline-flex; align-items:center; gap:var(--s2);
  padding:6px var(--s3); border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:700; line-height:1;
  color:var(--st-accent-hi); background:var(--st-accent-soft);
  border:1px solid var(--st-accent-line); transition:.18s var(--ease);
}
.story-app .st-aihelp i{ font-size:var(--fs-2xs); }
.story-app .st-aihelp:disabled{ opacity:.75; }
.story-app .st-aihelp.busy i{ animation:st-aispin 1.1s linear infinite; }
@keyframes st-aispin{ to{ transform:rotate(360deg); } }
@media (hover:hover){
  .story-app .st-aihelp:hover:not(:disabled){ background:var(--st-accent); border-color:var(--st-accent); color:#fff; }
}

/* «вернуть как было» — рядом со счётчиком знаков */
.st-hint .lnk{
  margin-left:var(--s3); color:var(--st-accent-hi); font-weight:700;
  text-decoration:underline; text-underline-offset:3px; font-size:var(--fs-xs);
}
.st-hint .lnk[hidden]{ display:none; }

/* ---- выбор паблика из своих ----
   Список, а не поле для ссылки: адрес своего паблика наизусть никто не
   помнит, а из списка невозможно выбрать чужой. */
.st-publist{ display:flex; flex-direction:column; gap:var(--s2); }
.st-publist-load{ font-size:var(--fs-sm); color:var(--st-faint); padding:var(--s3) 0; }

.story-app .st-pubitem{
  display:flex; align-items:center; gap:var(--s3); width:100%; text-align:left;
  padding:var(--s2) var(--s3); border-radius:var(--r-m);
  background:color-mix(in srgb, var(--st-text) 4%, transparent);
  border:1px solid var(--st-border); color:inherit; transition:.16s var(--ease);
}
.story-app .st-pubitem .av{
  width:38px; height:38px; flex:none; border-radius:var(--r-pill); overflow:hidden;
  display:grid; place-items:center; background:var(--st-grad); color:#fff;
  font-weight:800; font-size:var(--fs-base);
}
.st-pubitem .av.dim{ background:color-mix(in srgb, var(--st-text) 10%, transparent); color:var(--st-faint); }
.st-pubitem .av img{ width:100%; height:100%; object-fit:cover; }
.st-pubitem .i{ flex:1; min-width:0; }
.st-pubitem .i b{
  display:block; font-size:var(--fs-base); font-weight:700; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.st-pubitem .i small{ display:block; font-size:var(--fs-2xs); color:var(--st-faint); margin-top:1px; }
.st-pubitem .ck{
  width:24px; height:24px; flex:none; border-radius:var(--r-pill); display:grid; place-items:center;
  border:2px solid var(--st-border-hi); color:transparent; font-size:var(--fs-2xs);
  transition:.16s var(--ease);
}
.story-app .st-pubitem.on{ border-color:var(--st-accent); background:var(--st-accent-soft); }
.st-pubitem.on .ck{ border-color:var(--st-accent); background:var(--st-accent); color:#fff; }
.st-pubitem.none .i b{ font-weight:600; color:var(--st-dim); }
@media (hover:hover){
  .story-app .st-pubitem:hover{ border-color:var(--st-accent-line); }
}

/* пабликов нет — предлагаем создать, а не оставляем пустоту */
.st-pubempty{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2);
  padding:var(--s4); border-radius:var(--r-m);
  border:1px dashed var(--st-border-hi); background:color-mix(in srgb, var(--st-accent) 5%, transparent);
}
.st-pubempty b{ font-size:var(--fs-base); font-weight:700; }
.st-pubempty span{ font-size:var(--fs-sm); color:var(--st-faint); line-height:1.5; }
.st-pubempty .st-btn{ margin-top:var(--s2); }


/* ============================================================
   ОВЕРЛЕЙ ПОВЕРХ ПЛАВАЮЩЕЙ НАВИГАЦИИ САЙТА
   У сайта снизу висит док (.bottom-global-nav, z-index 999999). Наши
   шторки жили на z-index 120 — и док накрывал их нижнюю часть. На
   телефоне под ним оказывалась кнопка «Сохранить»: нажатие уходило в
   док, а выглядело как намертво сломанная кнопка. Проверено замером:
   кнопка занимала 743–793px, док 754–824px.
   Общий файл не трогаем — поднимаем своё и прячем док на время шторки.
   ============================================================ */
.story-app .st-sheet-modal{ z-index:2147483600; }
.story-app .st-modal{ z-index:2147483601; }
.story-app .st-toast{ z-index:2147483602; }
body.st-overlay .bottom-global-nav,
body.st-overlay .guest-nav-wrapper,
body.st-overlay #fn-overlay{
  display:none !important;
}


/* ============================================================
   СТЕНА ВХОДА В КНИГЕ (гость дочитал бесплатные страницы)
   ------------------------------------------------------------
   Это единственная страница книги, которая НЕ «бумага». Лист светлый
   намеренно — так читается текст; но экран входа на светлом листе
   выглядит чужой белой заглушкой, вывалившейся посреди тёмного
   интерфейса. Поэтому стена живёт в токенах сайта и поверх размытой
   обложки: она — часть YAZME, а не часть книги.
   Разметку рисует story/assets/reader.js (kind: 'gate').
   ============================================================ */
.st-page.gatepg{
  align-items:center; justify-content:center; overflow:hidden;
  background:var(--st-bg-deep);
}
.st-page.gatepg .gate-bg{
  position:absolute; inset:-60px; background-size:cover; background-position:center;
  filter:blur(46px) saturate(.85); opacity:.3;
}
.st-page.gatepg .gate-veil{
  position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% 0%,
    color-mix(in srgb, var(--st-bg-deep) 35%, transparent) 0%,
    color-mix(in srgb, var(--st-bg-deep) 92%, transparent) 58%,
    var(--st-bg-deep) 100%);
}
.st-page.gatepg .gate-in{
  position:relative; z-index:2; width:min(400px,100%); text-align:center;
  padding:var(--ui-top) var(--s5) var(--ui-bot); color:var(--st-text);
  font-family:var(--f-ui);
}
.st-page.gatepg .gate-lock{
  width:56px; height:56px; margin:0 auto var(--s4); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xl); color:var(--st-text);
  background:var(--st-grad); box-shadow:var(--st-shadow-md);
}
.st-page.gatepg h2{
  font-family:var(--f-disp); font-weight:800; font-size:var(--fs-3xl);
  line-height:1.2; margin:0 0 var(--s3);
}
.st-page.gatepg .gate-lead{
  font-size:var(--fs-md); line-height:1.55; color:var(--st-dim); margin:0 0 var(--s5);
}
.st-page.gatepg .gate-lead b{ color:var(--st-text); font-weight:600; }
/* Главная кнопка — единственный акцент на экране. Вторая ссылка нарочно
   без рамки и фона: две одинаково громкие кнопки заставляют выбирать там,
   где выбора нет (ведут они в одно и то же место). */
.st-page.gatepg .gate-cta{
  display:block; padding:15px 20px; border-radius:100px; text-decoration:none;
  background:var(--st-grad); color:#fff; font-size:var(--fs-lg); font-weight:600;
  box-shadow:var(--st-shadow-md); transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
@media (hover:hover){
  .st-page.gatepg .gate-cta:hover{ transform:translateY(-1px); box-shadow:var(--st-shadow); }
}
.st-page.gatepg .gate-alt{
  display:inline-block; margin-top:var(--s3); padding:8px 12px;
  color:var(--st-dim); text-decoration:none; font-size:var(--fs-sm);
  border-bottom:1px solid var(--st-border-hi);
}
@media (hover:hover){ .st-page.gatepg .gate-alt:hover{ color:var(--st-text); } }
.st-page.gatepg .gate-note{
  margin-top:var(--s5); font-size:var(--fs-xs); color:var(--st-faint);
  display:flex; align-items:center; justify-content:center; gap:6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ОБЛОЖКИ — набор 2026

   Переписано по разбору премий за обложки (ABCD, AIGA 50/50, SPINE) и по
   тому, как с пользовательским фото работают Artifact Uprising, MILK,
   Mixbook. Один вывод определяет здесь всё: обложка читается как
   любительская ровно тогда, когда текст выглядит НАКЛЕЕННЫМ поверх
   фотографии. Значит, у каждой темы заголовок либо вообще не касается
   кадра (inset, stripe, grid, arch, imprint), либо лежит на затемнении,
   сделанном как светотень, а не как серый прямоугольник (scrim, duo, wash).

   Цвет чернил приходит из PHP переменной --cv-ink: контраст считается по
   яркости выбранного цвета, а не подбирается на глаз.
   ═══════════════════════════════════════════════════════════════════════ */

.st-cover[data-th="inset"],
.st-cover[data-th="wash"],
.st-cover[data-th="stripe"],
.st-cover[data-th="grid"],
.st-cover[data-th="arch"],
.st-cover[data-th="imprint"]{ background:var(--cv-accent); color:var(--cv-ink); }

.st-cover[data-th="inset"] .aut,
.st-cover[data-th="arch"] .aut,
.st-cover[data-th="grid"] .aut,
.st-cover[data-th="stripe"] .aut,
.st-cover[data-th="imprint"] .aut{
  margin-top:2.6cqw; font-family:var(--f-ui); font-size:3.9cqw; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cv-ink-dim);
}

/* ---- 1. Врезка ------------------------------------------------------
   Кадр не доходит до обреза: между ним и краем всегда есть поле. Ровно
   тот механизм, ради которого MILK штампует физическое углубление с
   рамкой 1,5 мм, — он и отличает изданную книгу от распечатанного фото. */
.st-cover[data-th="inset"] .ph{
  position:absolute; left:18.5cqw; top:10.5cqw; width:70cqw; aspect-ratio:4/5;
  overflow:hidden; border-radius:1cqw; z-index:1;
  /* Рамку строим от цвета чернил, а не белым: на жёлтой плашке белая
     обводка не видна вовсе, и врезка снова читалась как наклейка. */
  box-shadow:0 0 0 .7cqw color-mix(in srgb, var(--cv-ink) 16%, transparent),
             0 2.2cqw 4.5cqw rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.28);
}
.st-cover[data-th="inset"] .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.st-cover[data-th="inset"] .cv{ justify-content:flex-end; align-items:center; text-align:center; padding-bottom:7cqw; }
.st-cover[data-th="inset"] .ttl{ line-height:1.1; }

/* ---- 2. Нижний scrim ------------------------------------------------
   Затухание по кривой, а не линейное. Глаз ловит вторую производную
   яркости: у linear-gradient на концах излом, и он читается как граница
   плашки — то самое ощущение наклейки. Тринадцать стопов убирают излом. */
.st-cover[data-th="scrim"]{ background:#14110c; }
.st-cover[data-th="scrim"] .photo{ object-position:center 34%; }
/* Слой затемнения — один на все темы, где текст лежит на кадре.

   Кривая затухания подобрана так, чтобы НИЖНЯЯ ТРЕТЬ была плотнее 0,8:
   ровно там стоит заголовок, и на светлом кадре мягкого затемнения не
   хватало — белые буквы садились на бежевое небо. Выше 40 % кривая
   спадает по-прежнему плавно, поэтому границы плашки по-прежнему не
   видно, а верх кадра остаётся чистым. */
.st-cover .scrim{
  position:absolute; left:0; right:0; bottom:0; height:var(--scrim-h, 72%); z-index:2;
  background:linear-gradient(to top,
    hsl(0,0%,0%)        0%,   hsla(0,0%,0%,.955) 20%,  hsla(0,0%,0%,.855) 30%,
    hsla(0,0%,0%,.700) 39%,   hsla(0,0%,0%,.540) 47%,  hsla(0,0%,0%,.395) 55%,
    hsla(0,0%,0%,.275) 62.5%, hsla(0,0%,0%,.182) 70%,  hsla(0,0%,0%,.114) 77%,
    hsla(0,0%,0%,.066) 83.5%, hsla(0,0%,0%,.034) 89%,  hsla(0,0%,0%,.014) 94%,
    hsla(0,0%,0%,.004) 97.5%, hsla(0,0%,0%,0)   100%);
}
.st-cover[data-th="scrim"] .cv{ justify-content:flex-end; z-index:3; padding-bottom:8cqw; }
.st-cover[data-th="scrim"] .ttl{ color:#FBF7EF; line-height:1.08; }
.st-cover[data-th="scrim"] .aut{
  margin-top:2.8cqw; font-family:var(--f-ui); font-size:3.9cqw; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(251,247,239,.74);
}

/* ---- 3. Дуотон ------------------------------------------------------
   Два слоя зажимают яркости между тёмным и светлым тоном: lighten
   поднимает тени до тёмного, darken опускает света до светлого. После
   этого диапазон кадра предсказуем, и выворотка читается на ЛЮБОЙ
   фотографии — без подбора под каждую. */
.st-cover[data-th="duo"]{ background:#0B0906; --cv-deep:color-mix(in srgb, var(--cv-accent) 52%, #0B0906);
                          --cv-pale:color-mix(in srgb, var(--cv-accent) 16%, #F7F1E4); }
.st-cover[data-th="duo"] .photo{ filter:grayscale(1) contrast(1.22); }
.st-cover[data-th="duo"] .duo { position:absolute; inset:0; z-index:1; background:var(--cv-deep); mix-blend-mode:lighten; }
.st-cover[data-th="duo"] .duo2{ position:absolute; inset:0; z-index:1; background:var(--cv-pale); mix-blend-mode:darken; }
/* Дуотон сжимает яркости, но НЕ гарантирует, что низ кадра тёмный: на
   пересвеченном снимке светлая выворотка ложилась на светлое поле. Та же
   кривая затухания, только короче — держит заголовок и не спорит с
   графикой. */
/* Дуотон сжимает яркости, но НЕ гарантирует, что низ кадра тёмный: на
   пересвеченном снимке светлая выворотка ложилась на светлое поле и
   пропадала (замер контраста давал 1,1:1 при норме 3:1). Тот же слой
   затемнения, только короче. */
.st-cover[data-th="duo"]{ --scrim-h:68%; }
.st-cover[data-th="duo"] .cv{ justify-content:flex-end; z-index:3; padding-bottom:8cqw; }
.st-cover[data-th="duo"] .ttl{
  font-weight:800; line-height:.94; letter-spacing:-.015em; text-transform:uppercase;
  /* Тень нужна не для красоты: светлое пятно дуотона может выйти на верхний
     край строки, и там затемнение ещё тонкое. Тень держит букву на нём. */
  color:var(--cv-pale); text-shadow:0 .3cqw 1.4cqw rgba(0,0,0,.72), 0 0 .5cqw rgba(0,0,0,.5);
}
.st-cover[data-th="duo"] .aut{
  margin-top:3cqw; font-family:var(--f-ui); font-size:3.8cqw; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cv-deep);
  background:var(--cv-pale); align-self:flex-start; padding:1.2cqw 2.6cqw; border-radius:99px;
}

/* ---- 4. Фото как фактура -------------------------------------------
   Иерархия перевёрнута: главное — заголовок, снимок работает подложкой.
   Контраст задан плашкой и от качества кадра не зависит вообще — это
   единственная тема, которая вытягивает совсем плохой архив с фото. */
/* .26 съедало контраст заголовка до 2,8:1 — ниже нормы. .15 сохраняет
   фактуру кадра и оставляет контраст плашки почти нетронутым. */
.st-cover[data-th="wash"] .photo{ opacity:.15; mix-blend-mode:luminosity; z-index:1; }
.st-cover[data-th="wash"] .cv{ justify-content:center; z-index:3; }
.st-cover[data-th="wash"] .ttl{ font-weight:800; line-height:.96; letter-spacing:-.02em; }
.st-cover[data-th="wash"] .aut{
  margin-top:5cqw; font-family:var(--f-ui); font-size:3.9cqw; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cv-ink-dim);
}

/* ---- 5. Типографическая с фото-полосой ------------------------------
   Лучше всех переживает тест миниатюрой: в списке книг на 120 px видно
   крупное имя и цветовое пятно, а не мутный кадр размером с ноготь. */
.st-cover[data-th="stripe"] .cv{ inset:0 0 39cqw 0; justify-content:flex-start; padding-top:13cqw; }
.st-cover[data-th="stripe"] .ttl{ line-height:1.02; letter-spacing:-.01em; }
.st-cover[data-th="stripe"] .band{
  position:absolute; left:0; right:0; bottom:0; height:39cqw; overflow:hidden; z-index:1;
  box-shadow:0 -.4cqw 0 rgba(0,0,0,.22);
}
.st-cover[data-th="stripe"] .band img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- 6. Редакционная сетка ------------------------------------------
   Два кадра разного размера с модульным зазором читаются как вёрстка
   журнала. Замена коллажу из девяти клеток: тот выглядел контактным
   листом, а не обложкой. */
.st-cover[data-th="grid"] .ga,
.st-cover[data-th="grid"] .gb{ position:absolute; overflow:hidden; z-index:1; border-radius:.6cqw;
  box-shadow:0 1.4cqw 3cqw rgba(0,0,0,.26); }
.st-cover[data-th="grid"] .ga{ left:13cqw; top:10cqw; width:52cqw; height:58cqw; }
.st-cover[data-th="grid"] .gb{ left:68cqw; top:40cqw; width:24cqw; height:34cqw; }
.st-cover[data-th="grid"] .ga img,
.st-cover[data-th="grid"] .gb img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Заголовок занимает ВСЮ ширину полосы набора, а не колонку под фото A:
   в узкой колонке «Год, который был» ломался на «Год, кото рый был» — по
   слогам, чего в книге не бывает никогда. */
.st-cover[data-th="grid"] .cv{ inset:82cqw 9cqw auto 13cqw; display:block; }
.st-cover[data-th="grid"] .ttl{ line-height:1.08; }

/* ---- 7. Арка --------------------------------------------------------
   Прямоугольник читается как фотография, арка — как графический объект.
   Самый короткий путь убрать «снимковость» кадра. */
.st-cover[data-th="arch"] .ph{
  position:absolute; left:20cqw; top:13cqw; width:67cqw; aspect-ratio:3/4; z-index:1;
  overflow:hidden; border-radius:33.5cqw 33.5cqw 1cqw 1cqw;
  box-shadow:0 2cqw 4cqw rgba(0,0,0,.3);
}
.st-cover[data-th="arch"] .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.st-cover[data-th="arch"] .cv{ justify-content:flex-end; align-items:center; text-align:center; padding-bottom:6cqw; }
.st-cover[data-th="arch"] .ttl{ line-height:1.1; }

/* ---- 8. Серийная ----------------------------------------------------
   Фотографии нет вовсе: одна антиква, один цвет, весь контраст — по
   кеглю и разрядке. Единственная тема, не зависящая от качества
   снимков; за такой приём ABCD два года подряд даёт награду в категории
   Series Design. */
.st-cover[data-th="imprint"] .cv{ justify-content:center; align-items:stretch; text-align:center; gap:5.5cqw; padding:14cqw 11cqw 14cqw 15cqw; }
.st-cover[data-th="imprint"] .rule{ height:.5cqw; background:var(--cv-ink); opacity:.42; }
.st-cover[data-th="imprint"] .ttl{ line-height:1.14; }
.st-cover[data-th="imprint"] .aut{ margin-top:0; }


/* ===== STORY 2 covers (общий рендер обложек нового поколения; дубль в story2.css) ===== */
/* ---------- обложка (CSS-3D) ---------- */
.s2-bk{--f-book:'Literata',Georgia,serif;--f-ui:'Inter',sans-serif;--ease:cubic-bezier(.22,1,.36,1);--bw:200px;--bh:calc(var(--bw)*1.42);--spine:calc(var(--bw)*.1);width:var(--bw);height:var(--bh);position:relative;perspective:1400px;flex:none}
.s2-bk .book{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-26deg) rotateX(2deg);transition:transform .6s var(--ease)}
.s2-bk:hover .book{transform:rotateY(-14deg) rotateX(1deg)}
.s2-bk.flat .book,.s2-bk.flat:hover .book{transform:none}
.s2-bk .front{position:absolute;inset:0;border-radius:3px 7px 7px 3px;overflow:hidden;transform:translateZ(calc(var(--spine)/2));box-shadow:inset 5px 0 12px -7px rgba(0,0,0,.65),0 30px 50px -20px rgba(0,0,0,.8),0 2px 4px rgba(0,0,0,.4);container-type:inline-size;backface-visibility:hidden}
.s2-bk .pages{position:absolute;top:2px;bottom:2px;left:calc(100% - 1px);width:var(--spine);transform-origin:left center;transform:translateZ(calc(var(--spine)/2)) rotateY(90deg);background:repeating-linear-gradient(180deg,#f4efe3 0 1px,#dcd4c1 1px 2px)}
.s2-bk .spineface{position:absolute;top:0;bottom:0;left:0;width:var(--spine);transform-origin:left center;transform:translateZ(calc(var(--spine)/2)) rotateY(90deg);background:#2a2420;border-radius:3px 0 0 3px}
.s2-bk .backc{position:absolute;inset:0;transform:translateZ(calc(var(--spine)/-2));background:#2a2420;border-radius:7px 3px 3px 7px}
.s2-bk.flat .pages,.s2-bk.flat .spineface,.s2-bk.flat .backc{display:none}
.s2-bk.flat .front{transform:none;border-radius:2px 5px 5px 2px}
.s2-bk.xl{--bw:min(300px,64vw)}.s2-bk.lg{--bw:240px}.s2-bk.md{--bw:150px}.s2-bk.sm{--bw:96px}.s2-bk.xs{--bw:64px}.s2-bk.fill{--bw:100%;width:100%;height:auto;aspect-ratio:1/1.42}
.s2-cv{position:absolute;inset:0;display:flex;flex-direction:column;padding:9cqw 9cqw 9cqw 12cqw;color:var(--cv-ink,#f5efe0)}
.s2-cv .photo{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
.s2-cv .veil{position:absolute;inset:0}
.s2-cv .in{position:relative;z-index:2;display:flex;flex-direction:column;height:100%}
.s2-cv .eb{font-family:var(--f-ui);font-size:3.6cqw;letter-spacing:.2em;text-transform:uppercase;opacity:.8;font-weight:600}
.s2-cv .ttl{font-family:var(--cv-font,var(--f-book));font-size:10.5cqw;line-height:1.08;margin-top:auto;font-weight:500;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.s2-cv .ttl.sm{font-size:8.5cqw}
.s2-cv .aut{font-family:var(--f-ui);font-size:4cqw;letter-spacing:.14em;text-transform:uppercase;margin-top:5cqw;opacity:.85;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2-cv .rule{width:16cqw;height:.8cqw;background:var(--cv-acc,#d97757);margin:5cqw 0 0}
.s2-cv.foil .ttl{background:linear-gradient(100deg,#8a6a1f,#f4dc8c 35%,#c9a24a 55%,#f7e7a8 75%,#8a6a1f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.s2-cv[data-th="classic"]{--cv-font:'Playfair Display',serif;background:#f3ede0;--cv-ink:#1c1a17;--cv-acc:#b8924a}
.s2-cv[data-th="classic"]::before{content:'';position:absolute;inset:5cqw;border:1px solid rgba(28,26,23,.45);outline:3px double rgba(28,26,23,.25);outline-offset:1.5cqw;pointer-events:none}
.s2-cv[data-th="film"]{--cv-font:'Oranienbaum',serif;background:#e8d9b5;--cv-ink:#3b2f2a;--cv-acc:#c9663a}
.s2-cv[data-th="film"] .photo{inset:8cqw 8cqw 34cqw 11cqw;width:auto;height:auto;border-radius:1.5cqw;box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.s2-cv[data-th="film"] .in{justify-content:flex-end}
.s2-cv[data-th="film"] .ttl{font-size:8.5cqw;margin-top:0}
.s2-cv[data-th="artdeco"]{--cv-font:'Forum',serif;background:#0e0e10;--cv-ink:#f5efe0;--cv-acc:#d4af37}
.s2-cv[data-th="artdeco"]::before{content:'';position:absolute;inset:5cqw;border:1.2cqw solid transparent;border-image:linear-gradient(135deg,#f4dc8c,#a37a1e,#f4dc8c) 1;pointer-events:none}
.s2-cv[data-th="artdeco"]::after{content:'';position:absolute;left:50%;top:7cqw;width:30cqw;height:30cqw;transform:translateX(-50%);background:conic-gradient(from 180deg,transparent 0 12deg,rgba(212,175,55,.45) 12deg 13deg,transparent 13deg 24deg,rgba(212,175,55,.45) 24deg 25deg,transparent 25deg 36deg,rgba(212,175,55,.45) 36deg 37deg,transparent 37deg 48deg,rgba(212,175,55,.45) 48deg 49deg,transparent 49deg 60deg,rgba(212,175,55,.45) 60deg 61deg,transparent 61deg 360deg);border-radius:50%;opacity:.9}
.s2-cv[data-th="artdeco"] .ttl{text-transform:uppercase;letter-spacing:.06em;font-size:9cqw;text-align:center}
.s2-cv[data-th="artdeco"] .aut{text-align:center}
.s2-cv[data-th="botanica"]{--cv-font:'Cormorant Garamond',serif;background:#f4f1e8;--cv-ink:#2f3e2e;--cv-acc:#b4552d}
.s2-cv[data-th="botanica"]::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 30cqw 12cqw at 85% 12%,rgba(122,139,111,.55),transparent 70%),radial-gradient(ellipse 22cqw 10cqw at 14% 92%,rgba(122,139,111,.5),transparent 70%),radial-gradient(ellipse 14cqw 7cqw at 78% 86%,rgba(180,85,45,.35),transparent 70%)}
.s2-cv[data-th="botanica"] .ttl{font-weight:500;font-size:11.5cqw;font-style:italic}
.s2-cv[data-th="linen"]{--cv-font:'Tenor Sans',sans-serif;background:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px),#d8d3c8;--cv-ink:#2b2b2b;--cv-acc:#1f3a5f}
.s2-cv[data-th="linen"] .photo{inset:auto 9cqw 30cqw 12cqw;width:auto;height:44cqw;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.s2-cv[data-th="linen"] .ttl{font-size:8cqw;letter-spacing:.04em;text-transform:uppercase}
.s2-cv[data-th="romance"]{--cv-font:'Cormorant Garamond',serif;background:linear-gradient(160deg,#fff7ee,#f4c7c3);--cv-ink:#7b2d3b;--cv-acc:#d6a756}
.s2-cv[data-th="romance"] .ttl{font-style:italic;font-size:12cqw}
.s2-cv[data-th="romance"]::before{content:'';position:absolute;inset:4cqw;border:1px solid rgba(123,45,59,.35);border-radius:2cqw;pointer-events:none}
.s2-cv[data-th="minimal"]{--cv-font:'Unbounded',sans-serif;background:#f0eee9;--cv-ink:#111;--cv-acc:#e63946}
.s2-cv[data-th="minimal"] .ttl{font-size:13cqw;font-weight:700;line-height:.98;letter-spacing:-.03em}
.s2-cv[data-th="minimal"] .rule{width:100%;height:4cqw;background:var(--cv-acc)}
.s2-cv[data-th="academia"]{--cv-font:'Prata',serif;background:#141210;--cv-ink:#e9dfc8;--cv-acc:#7a1e2b}
.s2-cv[data-th="academia"]::before{content:'';position:absolute;inset:6cqw;border:1px solid rgba(194,161,90,.6);pointer-events:none}
.s2-cv[data-th="academia"]::after{content:'❦';position:absolute;top:9cqw;left:50%;transform:translateX(-50%);color:#c2a15a;font-size:7cqw}
.s2-cv[data-th="academia"] .ttl{text-align:center;font-size:10cqw}
.s2-cv[data-th="academia"] .aut{text-align:center;color:#c2a15a}
.s2-cv[data-th="scrap"]{--cv-font:'Caveat',cursive;background:#d9c4a0;--cv-ink:#2a2420;--cv-acc:#d73b2e}
.s2-cv[data-th="scrap"] .photo{inset:10cqw 12cqw 38cqw 9cqw;width:auto;height:auto;transform:rotate(-4deg);border:2.5cqw solid #fff;border-bottom-width:9cqw;box-shadow:0 8px 16px -8px rgba(0,0,0,.5)}
.s2-cv[data-th="scrap"] .ttl{font-size:13cqw;font-weight:700;margin-top:0}
.s2-cv[data-th="scrap"] .in{justify-content:flex-end}
.s2-cv[data-th="fairy"]{--cv-font:'Unbounded',sans-serif;background:radial-gradient(circle at 70% 20%,#ffd166 0 12cqw,transparent 12.5cqw),linear-gradient(180deg,#118ab2,#06d6a0);--cv-ink:#fff8ec;--cv-acc:#ef476f}
.s2-cv[data-th="fairy"] .ttl{font-size:10cqw;font-weight:700}
.s2-cv[data-th="hero"]{--cv-font:'Literata',serif;background:#241f19;--cv-ink:#fff;--cv-acc:#d97757}
.s2-cv[data-th="hero"] .veil{background:linear-gradient(to top,rgba(14,11,8,.92) 0%,rgba(14,11,8,.6) 30%,rgba(14,11,8,.08) 60%,rgba(14,11,8,.3) 100%)}
.s2-cv[data-th="hero"] .ttl{text-shadow:0 2px 20px rgba(0,0,0,.6)}
.s2-cv[data-th="noir"]{--cv-font:'Unbounded',sans-serif;background:#0b0f2b;--cv-ink:#fff;--cv-acc:#c7f464}
.s2-cv[data-th="noir"]::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,110,199,.5),rgba(125,249,255,.35));mix-blend-mode:screen}
.s2-cv[data-th="noir"] .ttl{font-weight:700;font-size:11cqw;letter-spacing:-.02em}
.s2-cv[data-font="display"]{--cv-font:'Unbounded',sans-serif}
.s2-cv[data-font="script"]{--cv-font:'Caveat',cursive}
.s2-cv[data-font="serif"]{--cv-font:'Literata',serif}