/* ===== Листаемый пример лавбука — разметка в index.html (#fb), логика и страницы в js/flipbook.js ===== */
.fb-lead{text-align:center;color:var(--ink-soft);font-size:15.5px;max-width:31em;margin:-12px auto 18px}
.fb{--pw:300px;--ph:calc(var(--pw)*1.5);--serif:'Lovery Digits Serif','Cormorant Garamond',Georgia,'Times New Roman',serif;
  position:relative;overflow:hidden;max-width:860px;margin:0 auto;
  background:radial-gradient(120% 70% at 50% 40%,#FCFAFF 0,#EFE9FF 60%,#E5DCFB 100%);
  border:2px solid var(--line);border-radius:26px;padding:16px 16px 18px}

/* переключатель формата */
.fb-tabs{display:flex;gap:4px;background:rgba(255,255,255,.75);border-radius:14px;padding:4px;max-width:420px;margin:0 auto}
.fb-tabs button{flex:1;border:0;background:transparent;border-radius:11px;padding:8px 10px;font:inherit;font-size:14.5px;font-weight:600;
  color:var(--ink-soft);cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.2;transition:background .2s,color .2s}
.fb-tabs small{font-size:11.5px;font-weight:500;opacity:.8}
.fb-tabs button[aria-selected=true]{background:#fff;color:var(--violet-deep);box-shadow:0 2px 10px -3px rgba(76,46,170,.35)}

/* сцена и книга */
.fb-stage{position:relative;display:flex;justify-content:center;padding:calc(var(--ph)*.07) 0 calc(var(--ph)*.09);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;outline:none;border-radius:18px}
.fb-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--violet)}
.fb-book{position:relative;flex:none;width:calc(var(--pw)*2);height:var(--ph);perspective:calc(var(--pw)*7);
  transition:transform .7s cubic-bezier(.4,0,.2,1)}
.fb.single .fb-book{width:var(--pw)}
.fb.single .fb-stage{padding:calc(var(--ph)*.035) 0 calc(var(--ph)*.085)}
.fb-book.at-start{transform:translateX(-25%)}
.fb-book.at-end{transform:translateX(25%)}
.fb-shadow{position:absolute;top:1%;bottom:0;left:0;right:0;border-radius:6px;pointer-events:none;
  box-shadow:0 30px 46px -22px rgba(28,18,51,.55),0 8px 18px -8px rgba(28,18,51,.25);
  transition:left .7s cubic-bezier(.4,0,.2,1),right .7s cubic-bezier(.4,0,.2,1)}
.fb-book.at-start .fb-shadow{left:50%}
.fb-book.at-end .fb-shadow{right:50%}
/* срез страниц: слева — прочитанное, справа — что осталось */
.fb-edge{position:absolute;top:.7%;bottom:.7%;width:0;transition:width .6s;
  background:repeating-linear-gradient(90deg,#FBF7EF 0 1px,#DCD2C2 1px 2px)}
.fb--mag .fb-edge{background:repeating-linear-gradient(90deg,#fff 0 1px,#DDD8E8 1px 2px)}
.fb-edge.l{right:100%;border-radius:3px 0 0 3px}
.fb-edge.r{left:100%;border-radius:0 3px 3px 0}

/* лист = две страницы: лицевая справа, оборот — слева после переворота */
.fb-leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.45,.05,.3,1)}
.fb-leaf.turned{transform:rotateY(-180deg)}
.fb.single .fb-leaf{left:0;width:100%;transition:transform .8s cubic-bezier(.45,.05,.3,1),opacity .2s}
.fb.single .fb-leaf.turned{opacity:0;pointer-events:none;transition:transform .8s cubic-bezier(.45,.05,.3,1),opacity .3s .4s}
.fb-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotateY(0)}
.fb-face.back{transform:rotateY(180deg)}
.fb-sh{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0}
.fb-face.front .fb-sh{background:linear-gradient(90deg,rgba(28,18,51,.4),rgba(28,18,51,.12))}
.fb-face.back .fb-sh{background:linear-gradient(270deg,rgba(28,18,51,.4),rgba(28,18,51,.12))}
.fb-leaf.fwd .front .fb-sh,.fb-leaf.bwd .back .fb-sh{animation:fbDim .9s ease-in forwards}
.fb-leaf.fwd .back .fb-sh,.fb-leaf.bwd .front .fb-sh{animation:fbLit .9s ease-out forwards}
@keyframes fbDim{0%{opacity:0}50%,100%{opacity:1}}
@keyframes fbLit{0%,50%{opacity:1}100%{opacity:0}}
.fb-leaf.peek{animation:fbPeek 1.5s cubic-bezier(.45,.05,.3,1)}
@keyframes fbPeek{0%,100%{transform:rotateY(0)}40%{transform:rotateY(-36deg)}}

/* подсказка «листайте» */
.fb-hint{position:absolute;left:50%;bottom:calc(var(--ph)*.015);transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  display:flex;align-items:center;gap:7px;background:rgba(28,18,51,.78);color:#fff;font-size:12.5px;font-weight:600;
  padding:6px 13px;border-radius:999px;transition:opacity .4s}
.fb-hint svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:fbNudge 1.6s ease-in-out infinite}
.fb-hint.off{opacity:0}
@keyframes fbNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* управление */
.fb-nav{display:flex;align-items:center;gap:12px;max-width:440px;margin:0 auto}
.fb-arr{flex:none;width:46px;height:46px;border-radius:50%;border:2px solid var(--line);background:#fff;color:var(--violet-deep);
  display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s,border-color .2s,opacity .2s,color .2s}
.fb-arr svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fb-arr:hover{border-color:var(--violet)}
.fb-arr:disabled{opacity:.35;cursor:default}
.fb-arr.go{background:var(--violet-deep);border-color:var(--violet-deep);color:#fff}
.fb-prog{flex:1;height:4px;border-radius:4px;background:rgba(109,69,232,.16);overflow:hidden}
.fb-prog i{display:block;height:100%;width:0;background:var(--violet-deep);border-radius:4px;transition:width .5s}
.fb-cnt{font-size:13px;font-weight:600;color:var(--ink-soft);min-width:3.4em;text-align:center;font-variant-numeric:tabular-nums}
.fb-cap{text-align:center;font-size:14.5px;font-weight:500;line-height:1.35;min-height:2.7em;max-width:30em;margin:12px auto 0}

/* «собрать такую» */
.fb-cta{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--line);border-radius:18px;
  padding:11px 11px 11px 16px;max-width:560px;margin:12px auto 0}
.fb-cta[hidden]{display:none}
.fb-cta .t{flex:1;min-width:0;line-height:1.25}
.fb-cta .t b{display:block;font-size:15px;letter-spacing:-.02em}
.fb-cta .t span{font-size:12.5px;color:var(--ink-soft)}
.fb-pr{flex:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.fb-pr b{font-size:19px;font-weight:800;color:var(--violet-deep);letter-spacing:-.03em}
.fb-pr s{font-size:12.5px;color:var(--ink-soft)}
.fb-cta .btn{padding:12px 16px;white-space:nowrap}

@media(max-width:640px){
  .fb-lead{font-size:14.5px;margin:-8px auto 14px}
  .fb{padding:12px 10px 14px;border-radius:22px}
  .fb-tabs button{font-size:14px;padding:7px 8px}
  .fb-cap{font-size:13.5px;margin-top:10px}
  .fb-cta{padding:10px 10px 10px 14px;gap:10px}
  .fb-cta .t span{display:none}
  .fb-pr b{font-size:17px}
  .fb-cta .btn{padding:11px 12px;font-size:13.5px}
  .fb-cta .t b{font-size:14px}
  .fb-x{display:none}
}
@media(prefers-reduced-motion:reduce){
  .fb-book,.fb-leaf,.fb.single .fb-leaf,.fb.single .fb-leaf.turned,.fb-shadow,.fb-edge{transition:none}
  .fb-leaf.peek,.fb-sh,.fb-hint svg{animation:none!important}
}

/* ===== страницы ===== */
.fb-pg{position:absolute;inset:0;overflow:hidden;background:#FFFDF9;color:#2A1F45;font-size:calc(var(--pw)/22);
  line-height:1.3;letter-spacing:0;text-align:left;overflow-wrap:break-word;font-weight:400}
.front>.fb-pg{border-radius:0 4px 4px 0}
.back>.fb-pg{border-radius:4px 0 0 4px}
.fb-pg::after{content:'';position:absolute;top:0;bottom:0;width:14%;z-index:8;pointer-events:none}
.front>.fb-pg::after{left:0;background:linear-gradient(90deg,rgba(42,26,80,.17),rgba(42,26,80,.05) 35%,rgba(42,26,80,0))}
.back>.fb-pg::after{right:0;background:linear-gradient(270deg,rgba(42,26,80,.17),rgba(42,26,80,.05) 35%,rgba(42,26,80,0))}
.fb-pg.blank{background:#F5F0E6}
.fb--mag .fb-pg.blank{background:#F3F1F7}

/* полоса из конструктора: сама страница — в теневом DOM внутри .lbh (js/flipbook.js), здесь только подложка */
.fb-pg.lb{background:#FFFDF9}
.fb-pg.lb-end{background:#fff}
.lbh{position:absolute;inset:0}

/* твёрдая книга — картонная крышка: скруглённые углы и торец, шарнир у корешка, кант и блик.
   Раскрытая книга лежит на крышке: вокруг блока виден её край (3 мм, как в 3D-виде конструктора), цвет — тема обложки примера */
.fb:not(.fb--mag) .front>.fb-pg.cv{border-radius:3px 8px 8px 3px;box-shadow:1px 0 0 #4E2391,2px 1px 0 #3E1B75}
.fb:not(.fb--mag) .back>.fb-pg.cv{border-radius:8px 3px 3px 8px;box-shadow:-1px 0 0 #4E2391,-2px 1px 0 #3E1B75}
.fb:not(.fb--mag) .fb-pg.cv::after{width:10%}
.fb:not(.fb--mag) .front>.fb-pg.cv::after{background:linear-gradient(90deg,rgba(20,10,50,.5) 0,rgba(20,10,50,.2) 30%,rgba(255,255,255,.24) 48%,rgba(20,10,50,.14) 64%,rgba(20,10,50,0) 100%)}
.fb:not(.fb--mag) .back>.fb-pg.cv::after{background:linear-gradient(270deg,rgba(20,10,50,.5) 0,rgba(20,10,50,.2) 30%,rgba(255,255,255,.24) 48%,rgba(20,10,50,.14) 64%,rgba(20,10,50,0) 100%)}
.fb:not(.fb--mag) .fb-pg.cv::before{content:'';position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 calc(var(--pw)*.04) rgba(20,10,50,.32);
  background:linear-gradient(118deg,rgba(255,255,255,.16),rgba(255,255,255,0) 34%,rgba(255,255,255,0) 72%,rgba(255,255,255,.07))}
.fb:not(.fb--mag) .fb-book::before{content:'';position:absolute;z-index:0;pointer-events:none;border-radius:6px;
  top:calc(var(--pw)*-.022);bottom:calc(var(--pw)*-.022);left:calc(var(--pw)*-.022 - 7px);right:calc(var(--pw)*-.022 - 7px);
  background:linear-gradient(150deg,#7A4FB3,#56238F);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:opacity .4s}
.fb:not(.fb--mag) .fb-book.at-start::before,.fb:not(.fb--mag) .fb-book.at-end::before{opacity:0}
.fb.single .fb-book::before{display:none}

/* «живой пример» в блоке конструктора — прежним шрифтом: до книги Cormorant на главной не грузился, и там был Georgia */
.bbox .bb-h,.bbox .bb-a,.bbox .bb-cover .bb-nm,.bbox .bb-quote .bb-qm,.bbox .bb-quote .bb-qt,.bbox .bb-letter .bb-lt{font-family:'Lovery Digits Serif',Georgia,'Times New Roman',serif}