:root {
  --ink: #f7f9fc;
  --muted: #aab5c5;
  --panel: rgba(13, 21, 32, .94);
  --panel-2: #172333;
  --line: rgba(255, 255, 255, .13);
  --orange: #f58220;
  --blue: #1f9bd7;
  --reader-bg-start: #172231;
  --reader-bg-end: #070b11;
  --page-ratio: 0.7075;
  --toolbar-height: 58px;
  --topbar-height: 58px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  color: var(--ink);
  background: #0a1018;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { cursor: pointer; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.app {
  height: 100%;
  display: grid;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr) var(--toolbar-height);
  background: linear-gradient(145deg, var(--reader-bg-start), var(--reader-bg-end) 72%);
}

.topbar, .toolbar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--panel);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}
.topbar {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr) minmax(150px, 1fr);
  border-bottom: 1px solid var(--line);
}
.toolbar { border-top: 1px solid var(--line); }
.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}
.brand img { width: 145px; max-width: 100%; max-height: 34px; object-fit: contain; object-position: left center; }
.publication-title {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.page-jump { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.page-jump input {
  width: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px;
  color: var(--ink);
  background: rgba(255,255,255,.07);
  text-align: center;
}

.icon-button, .tool-button, .turn-control {
  border: 1px solid var(--line);
  color: var(--ink);
  background: rgba(255,255,255,.06);
  transition: .16s ease;
}
.icon-button:hover, .tool-button:hover, .turn-control:hover,
.icon-button:focus-visible, .tool-button:focus-visible, .turn-control:focus-visible {
  color: #fff;
  border-color: rgba(31,155,215,.8);
  background: rgba(31,155,215,.22);
  outline: none;
}
.icon-button { width: 38px; height: 38px; border-radius: 9px; font-size: 24px; line-height: 1; }
.tool-button { min-width: 40px; height: 38px; padding: 0 10px; border-radius: 8px; font-weight: 700; }
.tool-button:disabled { opacity: .38; cursor: default; }
.zoom-level { width: 46px; color: var(--muted); font-size: 12px; text-align: center; }
.toolbar-divider { height: 26px; width: 1px; background: var(--line); margin: 0 4px; }
.toolbar-spacer { flex: 1; }

.stage { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.book-viewport {
  position: relative;
  width: calc(100% - 140px);
  height: calc(100% - 34px);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  overscroll-behavior: contain;
  overflow: hidden;
}
.book-scaler {
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate3d(var(--book-offset, 0px), 0, 0);
  transition: none;
}
.book-scaler.offset-ready { transition: transform 1.02s cubic-bezier(.35,0,.2,1); }
.book-viewport.is-zoomed { cursor: grab; touch-action: none; }
.book-viewport.is-panning { cursor: grabbing; }
.book-viewport.detail-mode .book-scaler { opacity: 0; pointer-events: none; }
.detail-reader {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: auto;
}
.detail-reader[hidden] { display: none; }
.detail-spread {
  --pan-x: 0px;
  --pan-y: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  transform: translate3d(calc(-50% + var(--pan-x)), calc(-50% + var(--pan-y)), 0) scale(var(--zoom, 1));
  transform-origin: center;

  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.detail-page {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.detail-page > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  image-rendering: auto;
}
.detail-reader.is-loading .detail-spread { opacity: .985; }
.book {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  left: 0 !important;
  filter: drop-shadow(0 0 17px rgba(0,0,0,.34)) drop-shadow(0 11px 26px rgba(0,0,0,.3));
}
.zoom-hint {
  position: absolute;
  z-index: 18;
  bottom: 12px;
  left: 50%;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #fff;
  background: rgba(8, 15, 24, .82);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
}
.zoom-hint.visible { opacity: 1; transform: translate(-50%, 0); }
.publication-page {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
.publication-page > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.pdf-detail-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  image-rendering: auto;
}
.pdf-detail-layer.ready { opacity: 1; }
.publication-page.cover-page { box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.publication-page.soft-page { box-shadow: inset 0 0 0 1px rgba(0,0,0,.055); }
.page-label {
  position: absolute; bottom: 7px; right: 9px; min-width: 24px; padding: 3px 6px;
  border-radius: 5px; color: #fff; background: rgba(0,0,0,.52); font-size: 11px;
  text-align: center; pointer-events: none;
}
.hotspot-layer { position: absolute; inset: 0; z-index: 4; }
.hotspot {
  position: absolute;
  display: block;
  appearance: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  color: transparent;
  background: rgba(31,155,215,0);
  animation: hotspot-in .45s ease both;
}
.hotspot:hover, .hotspot:focus-visible {
  border-color: rgba(31,155,215,.85);
  background: rgba(31,155,215,.15);
  outline: none;
}
@keyframes hotspot-in { from { opacity: 0; } to { opacity: 1; } }
.hotspot-text,.hotspot-shape,.hotspot-image,.hotspot-slideshow {
  pointer-events: none;
  border: 0;
}
.hotspot-text,.hotspot-button,.hotspot-audio,.hotspot-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .45em .7em;
  overflow: hidden;
  color: var(--interaction-color);
  background: var(--interaction-background);
  font-size: calc(var(--interaction-font-size) * var(--raster-zoom, 1));
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.hotspot-shape { background: var(--interaction-background); }
.hotspot-image,.hotspot-slideshow { overflow: hidden; background: transparent; }
.hotspot-image img,.hotspot-slideshow img { display:block; width:100%; height:100%; object-fit:cover; }
.hotspot-button,.hotspot-audio,.hotspot-lead { border: 1px solid rgba(255,255,255,.34); border-radius: 7px; font-weight: 600; cursor:pointer; }
.hotspot-audio.playing { box-shadow: 0 0 0 4px rgba(31,155,215,.3); }
.hotspot-text:hover,.hotspot-shape:hover,.hotspot-image:hover,.hotspot-slideshow:hover { border:0; background:var(--interaction-background); }
.hotspot-image:hover,.hotspot-slideshow:hover { background:transparent; }
.interaction-fade { animation: interaction-fade var(--interaction-duration) ease var(--interaction-delay) both; }
.interaction-slide-up { animation: interaction-slide-up var(--interaction-duration) ease var(--interaction-delay) both; }
.interaction-pulse { animation: interaction-pulse var(--interaction-duration) ease-in-out var(--interaction-delay) 3; }
@keyframes interaction-fade { from { opacity:0 } to { opacity:1 } }
@keyframes interaction-slide-up { from { opacity:0; transform:translateY(22%) } to { opacity:1; transform:none } }
@keyframes interaction-pulse { 50% { transform:scale(1.045); filter:brightness(1.12) } }
@media (prefers-reduced-motion: reduce) {
  .hotspot,.interaction-fade,.interaction-slide-up,.interaction-pulse { animation:none !important; }
}
.media-dialog { width: min(980px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: #0a111b; }
.media-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(4px); }
.media-card { padding: 16px; }
.media-card iframe { display: block; width: 100%; aspect-ratio: 16 / 9; margin-top: 14px; border: 0; border-radius: 10px; background: #000; }
.stf__parent { margin: auto; }
.stf__wrapper { position: relative; height: 100%; padding-bottom: 0 !important; isolation: isolate; }
.stf__block { z-index: 2; cursor: grab; }
.stf__block:active { cursor: grabbing; }

/* Physical paper depth sits outside the turn engine, so it adds no work to a flip. */
.book-depth,.book-gutter {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}
.book-depth {
  z-index: 1;
  left: var(--book-left, 0);
  top: var(--book-top, 0);
  width: var(--book-width, 0);
  height: var(--book-height, 0);
  border-radius: 1px 2px 3px 1px;
  background: #e8e6df;
  box-shadow: 0 18px 26px rgba(0,0,0,.38), 0 4px 5px rgba(0,0,0,.3);
  transform: translate3d(4px,4px,0);
}
.book-depth::before {
  content: "";
  position: absolute;
  left: 100%;
  top: 1px;
  bottom: 0;
  width: 8px;
  border-radius: 0 2px 3px 0;
  background: repeating-linear-gradient(to right,#f8f7f2 0 1px,#c9c6bd 1px 2px,#eeece5 2px 3px);
  box-shadow: 4px 2px 10px rgba(0,0,0,.2);
}
.book-depth::after {
  content: "";
  position: absolute;
  left: 1px;
  right: -8px;
  top: 100%;
  height: 7px;
  border-radius: 0 0 3px 3px;
  background: repeating-linear-gradient(to bottom,#faf9f5 0 1px,#c8c5bc 1px 2px,#eceae3 2px 3px);
}
.book-gutter {
  z-index: 18;
  left: calc(var(--book-centre, 0px) - 22px);
  top: var(--book-top, 0);
  width: 44px;
  height: var(--book-height, 0);
  background: linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.09) 30%,rgba(0,0,0,.3) 49%,rgba(255,255,255,.16) 52%,rgba(0,0,0,.07) 67%,rgba(0,0,0,0));
  mix-blend-mode: multiply;
}
.stf__wrapper.book-open .book-depth,.stf__wrapper.book-open .book-gutter { opacity: 1; }
.stf__wrapper.book-turning .book-gutter { opacity: 0; }
@media(max-width:640px){.book-depth::before{width:5px}.book-depth::after{height:5px}.book-gutter{width:28px;left:calc(var(--book-centre,0px) - 14px)}}

.turn-control {
  position: absolute;
  z-index: 12;
  top: 50%;
  width: 52px;
  height: 78px;
  margin-top: -39px;
  border-radius: 13px;
  font-size: 48px;
  line-height: 1;
  background: rgba(8, 15, 24, .66);
}
.turn-control.previous { left: 18px; }
.turn-control.next { right: 18px; }
.turn-control:disabled { opacity: .2; cursor: default; }

.loading {
  position: absolute; z-index: 40; display: grid; justify-items: center; gap: 9px;
  width: min(360px, calc(100vw - 48px)); padding: 28px; border: 1px solid var(--line); border-radius: 18px;
  color: var(--ink); background: rgba(10,16,24,.94); box-shadow: 0 25px 70px rgba(0,0,0,.45);
}
.loading[hidden] { display: none; }
.loading-spinner {
  width: 38px; height: 38px; margin-bottom: 4px; border: 4px solid rgba(255,255,255,.16);
  border-top-color: #1f9bd7; border-right-color: #a63bc4; border-radius: 50%; animation: loading-spin .8s linear infinite;
}
.loading-title { max-width: 100%; color: #fff; font-size: 16px; line-height: 1.35; text-align: center; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading-spinner { animation-duration: 1.6s; } }

.drawer {
  position: fixed;
  z-index: 50;
  inset: var(--topbar-height) auto var(--toolbar-height) 0;
  width: min(360px, 90vw);
  padding: 14px;
  overflow: auto;
  background: var(--panel);
  border-right: 1px solid var(--line);
  transform: translateX(-102%);
  transition: transform .22s ease;
  box-shadow: 20px 0 60px rgba(0,0,0,.25);
}
.drawer-right { inset-inline: auto 0; border: 0; border-left: 1px solid var(--line); transform: translateX(102%); }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.drawer-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; margin-bottom: 14px; border-radius: 9px; background: rgba(255,255,255,.05); }
.drawer-tabs button { padding: 9px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-weight: 700; }
.drawer-tabs button.active { color: #fff; background: var(--blue); }
.thumbnail-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.thumbnail {
  padding: 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted);
  background: rgba(255,255,255,.045); text-align: center;
}
.thumbnail img { width: 100%; display: block; margin-bottom: 6px; }
.thumbnail.active { color: #fff; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(31,155,215,.16); }
.toc-list { display: grid; gap: 6px; }
.toc-entry { width: 100%; padding: 10px 11px; display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: rgba(255,255,255,.035); text-align: left; }
.toc-entry span:last-child { flex: 0 0 auto; color: var(--orange); }
.toc-entry[data-depth="1"] { padding-left: 22px; }
.toc-entry[data-depth="2"] { padding-left: 34px; }
.toc-entry[data-depth="3"], .toc-entry[data-depth="4"] { padding-left: 46px; }
.search-form { display: flex; gap: 8px; }
.search-form input, .copy-row input {
  min-width: 0; flex: 1; padding: 11px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); background: rgba(255,255,255,.07);
}
.search-form button, .copy-row button, .primary-button {
  border: 0; border-radius: 8px; padding: 10px 14px; color: #fff; background: var(--blue); font-weight: 700;
}
.search-status { color: var(--muted); font-size: 13px; }
.search-result {
  width: 100%; margin-bottom: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink); background: rgba(255,255,255,.04); text-align: left;
}
.search-result strong { display: block; color: var(--orange); margin-bottom: 4px; }
.search-result span { color: var(--muted); font-size: 13px; line-height: 1.35; }

.share-dialog { width: min(520px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: #111b28; }
.share-dialog::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(3px); }
.dialog-card { padding: 20px; }
.dialog-card p { color: var(--muted); }
.copy-row { display: flex; gap: 8px; }
.primary-button { width: 100%; margin-top: 12px; padding: 12px; background: linear-gradient(90deg, var(--blue), #2875ca); }
.social-share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.social-share-grid button{display:flex;align-items:center;gap:7px;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:9px;color:#edf4fc;background:rgba(255,255,255,.045);font-size:11px;font-weight:600;cursor:pointer}
.social-share-grid button:hover{border-color:var(--blue);background:rgba(31,155,215,.12)}
.social-share-grid button span{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;color:#fff;background:#26384b;font-size:10px;font-weight:800}
.social-share-grid button[data-share-channel="whatsapp"] span{background:#168c52}
.social-share-grid button[data-share-channel="facebook"] span{background:#1877f2}
.social-share-grid button[data-share-channel="x"] span{background:#050505}
.social-share-grid button[data-share-channel="linkedin"] span{background:#0a66c2}
.social-share-grid button[data-share-channel="instagram"] span{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
.social-share-status{min-height:17px;margin:7px 0 -4px!important;color:#9fb0c2!important;font-size:11px}

.lead-dialog{width:min(560px,calc(100vw - 28px));padding:0;border:1px solid var(--line);border-radius:16px;color:var(--ink);background:#111b28;box-shadow:0 28px 90px rgba(0,0,0,.55)}
.lead-dialog::backdrop{background:rgba(0,0,0,.76);backdrop-filter:blur(4px)}
.lead-card{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:26px}
.lead-card h2,.lead-card>p,.lead-kicker,.lead-consent,.lead-submit,.lead-status,.lead-trap{grid-column:1/-1}
.lead-kicker{margin:0;color:var(--orange);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.lead-card h2{margin:0;font-size:25px;font-weight:560}.lead-card>p{margin:-5px 0 4px;color:var(--muted);font-size:13px;line-height:1.45}
.lead-card label{display:grid;gap:6px;color:#dce4ee;font-size:11px;font-weight:500}.lead-card input,.lead-card textarea{width:100%;padding:11px;border:1px solid var(--line);border-radius:8px;color:#fff;background:rgba(255,255,255,.06);font:inherit;outline:0}.lead-card input:focus,.lead-card textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,155,215,.14)}.lead-card textarea{resize:vertical}.lead-card label:has(textarea){grid-column:1/-1}.lead-consent{display:flex!important;grid-template-columns:auto 1fr;align-items:flex-start}.lead-consent input{width:auto;margin-top:1px}.lead-submit{margin:0;padding:12px;border:0;border-radius:8px;color:#fff;background:var(--blue);font-weight:600;cursor:pointer}.lead-submit:disabled{opacity:.55;cursor:wait}.lead-status{min-height:17px;margin:0;color:var(--muted);font-size:11px}.lead-status.success{color:#7ee2a8}.lead-status.error{color:#ff8c9c}.lead-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.lead-close{position:absolute;z-index:2;right:12px;top:12px;width:34px;height:34px;border:1px solid var(--line);border-radius:8px;color:#fff;background:rgba(255,255,255,.06);font-size:19px;cursor:pointer}
@media(max-width:560px){.lead-card{grid-template-columns:1fr;padding:22px 18px}.lead-card label{grid-column:1/-1}}

@media (max-width: 760px) {
  :root { --toolbar-height: 54px; --topbar-height: 54px; }
  .topbar { grid-template-columns: 92px minmax(0, 1fr) auto; padding-inline: 8px; }
  .brand img { width: 88px; }
  .publication-title { font-size: 13px; }
  .topbar-actions { gap: 5px; }
  .page-jump input { width: 44px; }
  .book-viewport { width: calc(100% - 24px); height: calc(100% - 20px); }
  .turn-control { width: 42px; height: 64px; margin-top: -32px; font-size: 40px; border-radius: 10px; opacity: .76; }
  .turn-control.previous { left: 6px; }
  .turn-control.next { right: 6px; }
  .toolbar { gap: 5px; padding-inline: 7px; overflow-x: auto; }
  .tool-button { min-width: 38px; padding-inline: 8px; }
  .toolbar-divider, #printButton, #firstPage, #lastPage { display: none; }
  #soundToggle, .zoom-level { display: none; }
  .toolbar-spacer { min-width: 1px; }
  .toolbar{justify-content:space-between}
  .tool-button{flex:0 0 auto}
}

@media(max-width:480px){
  .dialog-card{padding:17px}
  .social-share-grid{grid-template-columns:repeat(2,1fr)}
  .copy-row{display:grid;grid-template-columns:minmax(0,1fr) auto}
}

@media print {
  body * { visibility: hidden; }
  .book, .book * { visibility: visible; }
  .book { position: fixed; inset: 0; display: block; transform: none !important; filter: none; }
  .publication-page { width: 100%; height: auto; aspect-ratio: auto; page-break-after: always; }
  .hotspot-layer, .page-label { display: none; }
}

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

/* Reader v2.9.2: stable controls and safe areas on phones. */
.app { height: 100dvh; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.toolbar > * { flex-shrink: 0; }
.zoom-level { font-variant-numeric: tabular-nums; }
.drawer:not(.open) { visibility: hidden; }
@media (max-width: 380px) {
  .topbar { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 5px; }
  .brand img { width: 64px; }
  .page-jump { font-size: 12px; }
  .page-jump input { width: 38px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  :root { --topbar-height: 46px; --toolbar-height: 46px; }
  .book-viewport { height: calc(100% - 8px); }
  .topbar, .toolbar { padding-block: 4px; }
  .zoom-hint { bottom: 4px; font-size: 11px; }
}