:root{
  --fb-ink:#11152d;
  --fb-muted:#687087;
  --fb-line:#e0e4ee;
  --fb-paper:#ffffff;
  --fb-accent:#6558ff;
  --fb-blue:#3f7cff;
  --fb-cyan:#20c7e9;
}
.flipbook-shell{min-height:100vh;background:linear-gradient(180deg,#f4f6fb,#eaedf6);padding:42px 18px 70px}
.flipbook-top{width:min(1180px,100%);margin:0 auto 24px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.flipbook-brand{display:flex;align-items:center;gap:12px}
.flipbook-logo{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--fb-accent),var(--fb-blue),var(--fb-cyan));color:#fff;font-weight:800}
.flipbook-brand strong{display:block;font:800 18px/1.1 Manrope,Arial,sans-serif;color:var(--fb-ink)}
.flipbook-brand small{display:block;margin-top:4px;color:var(--fb-muted);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.flipbook-exit{padding:10px 14px;border:1px solid var(--fb-line);border-radius:12px;background:#fff;color:var(--fb-ink);font-size:12px;font-weight:800;text-decoration:none}
.flipbook-stage{width:min(1180px,100%);margin:auto;position:relative}
.flipbook-meta{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}
.flipbook-meta h1{margin:0;font:800 clamp(28px,4vw,46px)/1 Manrope,Arial,sans-serif;color:var(--fb-ink);letter-spacing:-.04em}
.flipbook-meta p{margin:8px 0 0;color:var(--fb-muted);font-size:13px}
.flipbook-counter{flex:0 0 auto;padding:9px 12px;border-radius:999px;background:#fff;border:1px solid var(--fb-line);color:var(--fb-muted);font-size:11px;font-weight:800}
.book-frame{position:relative;perspective:2200px;min-height:720px}
.book{position:relative;width:min(920px,100%);height:680px;margin:auto;transform-style:preserve-3d}
.book-page{
  position:absolute;inset:0;
  transform-origin:left center;
  transition:transform .75s cubic-bezier(.2,.7,.2,1), opacity .4s;
  transform-style:preserve-3d;
  border:1px solid #d9dde7;border-radius:18px;
  background:var(--fb-paper);
  box-shadow:0 30px 80px rgba(25,33,70,.15);
  overflow:hidden;
  backface-visibility:hidden;
}
.book-page.flipped{transform:rotateY(-180deg);pointer-events:none}
.book-page-inner{height:100%;display:grid;grid-template-columns:1.15fr .85fr}
.page-main{padding:54px 56px 42px;display:flex;flex-direction:column}
.page-side{padding:42px 34px;background:linear-gradient(160deg,#141833,#23295b);color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.page-kicker{color:var(--fb-accent);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.page-main h2{margin:18px 0 0;color:var(--fb-ink);font:800 clamp(30px,4vw,48px)/1.04 Manrope,Arial,sans-serif;letter-spacing:-.045em}
.page-main p{margin-top:16px;color:var(--fb-muted);font-size:15px;line-height:1.75}
.page-main ul{margin:18px 0 0 20px;color:var(--fb-muted);font-size:14px;line-height:1.75}
.page-main li+li{margin-top:6px}
.page-example{margin-top:22px;padding:18px;border:1px solid var(--fb-line);border-radius:15px;background:#f7f8fc;color:#4f576d;font-size:13px;line-height:1.65}
.page-tip{margin-top:auto;padding-top:20px;color:#81889a;font-size:11px}
.side-number{font:800 72px/1 Manrope,Arial,sans-serif;color:rgba(255,255,255,.13)}
.side-title{font:800 24px/1.1 Manrope,Arial,sans-serif}
.side-text{margin-top:8px;color:#c6cbe0;font-size:12px;line-height:1.6}
.side-footer{font-size:10px;color:#9299b0}
.flipbook-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px}
.flipbook-controls button{min-width:122px;min-height:46px;border:1px solid var(--fb-line);border-radius:12px;background:#fff;color:var(--fb-ink);font-weight:800;font-size:12px}
.flipbook-controls button.primary{border-color:transparent;background:linear-gradient(135deg,var(--fb-accent),var(--fb-blue));color:#fff}
.flipbook-controls button:disabled{opacity:.35;cursor:not-allowed}
.flipbook-progress{width:min(920px,100%);height:7px;margin:14px auto 0;border-radius:999px;background:#dfe3ed;overflow:hidden}
.flipbook-progress span{display:block;height:100%;width:5%;background:linear-gradient(90deg,var(--fb-accent),var(--fb-cyan));transition:width .3s}
.flipbook-note{width:min(920px,100%);margin:18px auto 0;text-align:center;color:#7a8297;font-size:11px}
@media(max-width:820px){
  .flipbook-shell{padding:18px 10px 90px}
  .flipbook-top{align-items:flex-start}
  .book-frame{min-height:660px}
  .book{height:620px}
  .book-page-inner{grid-template-columns:1fr}
  .page-side{display:none}
  .page-main{padding:34px 26px 28px}
  .page-main h2{font-size:34px}
  .page-main p,.page-main ul{font-size:13px}
}
@media(max-width:520px){
  .book{height:650px}
  .flipbook-meta{align-items:flex-start;flex-direction:column}
  .flipbook-controls{position:sticky;bottom:8px;z-index:100}
  .flipbook-controls button{flex:1;min-width:0}
}

/* V19 substantial preview upgrade */
.book-frame{min-height:850px}
.book{height:810px}
.page-main{padding:38px 44px 30px;overflow:auto}
.page-main h2{font-size:clamp(27px,3vw,40px);margin-top:12px}
.page-main p{font-size:13px;line-height:1.62;margin-top:12px}
.page-main ul{font-size:12.5px;line-height:1.55;margin-top:12px}
.page-main li+li{margin-top:4px}
.page-example{margin-top:14px;padding:14px;font-size:12px;line-height:1.55}
.page-tip{margin-top:12px;padding-top:12px;font-size:10.5px}
.page-side{padding:34px 28px}
.side-number{font-size:64px}
@media(max-width:820px){
  .book-frame{min-height:820px}
  .book{height:780px}
  .page-main{padding:26px 22px 22px}
  .page-main h2{font-size:29px}
  .page-main p,.page-main ul{font-size:12.5px}
}
@media(max-width:520px){
  .book{height:800px}
}

/* V20 — full substantial-note preview pages */
.book-frame{min-height:1080px}
.book{height:1030px}
.page-main{padding:30px 38px 26px;overflow:auto}
.page-main h2{font-size:clamp(25px,2.8vw,37px);margin-top:10px}
.page-main p{font-size:12.5px;line-height:1.55;margin-top:9px}
.page-main ul,.page-main ol{font-size:11.8px;line-height:1.48;margin-top:9px}
.page-main li+li{margin-top:3px}
.page-example{margin-top:11px;padding:12px 14px;font-size:11.7px;line-height:1.5}
.page-deepdive,.page-exam-box,.page-selfcheck{
  margin-top:11px;padding:12px 14px;border:1px solid #e2e6f0;border-radius:13px;background:#fafbfe
}
.page-deepdive h3,.page-exam-box h3,.page-selfcheck h3{
  margin:0 0 5px;color:#171b35;font:800 12.5px/1.2 Manrope,Arial,sans-serif
}
.page-deepdive p,.page-exam-box p{
  margin:5px 0 0;font-size:11.4px;line-height:1.48;color:#5b6378
}
.page-exam-box{background:#f5f4ff;border-color:#dedbff}
.page-selfcheck{background:#f4fbfd;border-color:#d4edf3}
.page-selfcheck ul,.page-exam-box ol{margin:6px 0 0 18px}
.page-tip{margin-top:10px;padding-top:9px}
@media(max-width:820px){
  .book-frame{min-height:1030px}
  .book{height:990px}
  .page-main{padding:24px 20px 22px}
}
@media(max-width:520px){
  .book{height:1020px}
}