diff --git a/modules/rbooks/components/folk-book-reader.ts b/modules/rbooks/components/folk-book-reader.ts
index f97348a..8cf5ed0 100644
--- a/modules/rbooks/components/folk-book-reader.ts
+++ b/modules/rbooks/components/folk-book-reader.ts
@@ -367,6 +367,49 @@ export class FolkBookReader extends HTMLElement {
 				height: 100%;
 				min-height: calc(100vh - 52px);
 				background: var(--rs-bg-page);
+			}
+
+			/* StPageFlip CSS — injected to document.head but doesn't
+			   penetrate shadow DOM, so replicated here. */
+			.stf__parent {
+				position: relative;
+				display: block;
+				box-sizing: border-box;
+				transform: translateZ(0);
+				-ms-touch-action: pan-y;
+				touch-action: pan-y;
+			}
+			.stf__wrapper {
+				position: relative;
+				width: 100%;
+				box-sizing: border-box;
+			}
+			.stf__parent canvas {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				left: 0;
+				top: 0;
+			}
+			.stf__block {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				perspective: 2000px;
+			}
+			.stf__item {
+				display: none;
+				position: absolute;
+				transform-style: preserve-3d;
+			}
+			.stf__outerShadow,
+			.stf__innerShadow,
+			.stf__hardShadow,
+			.stf__hardInnerShadow {
+				position: absolute;
+				left: 0;
+				top: 0;
 				color: var(--rs-text-primary);
 			}
 
diff --git a/modules/rpubs/components/folk-pubs-flipbook.ts b/modules/rpubs/components/folk-pubs-flipbook.ts
index 36a95cd..87f347a 100644
--- a/modules/rpubs/components/folk-pubs-flipbook.ts
+++ b/modules/rpubs/components/folk-pubs-flipbook.ts
@@ -269,7 +269,50 @@ export class FolkPubsFlipbook extends HTMLElement {
 			:host {
 				display: block;
 				position: relative;
-				z-index: 0; /* stacking context — keeps StPageFlip elements above backgrounds */
+				z-index: 0;
+			}
+
+			/* StPageFlip injects these into document.head, but they don't
+			   penetrate shadow DOM — so we replicate them here. */
+			.stf__parent {
+				position: relative;
+				display: block;
+				box-sizing: border-box;
+				transform: translateZ(0);
+				-ms-touch-action: pan-y;
+				touch-action: pan-y;
+			}
+			.stf__wrapper {
+				position: relative;
+				width: 100%;
+				box-sizing: border-box;
+			}
+			.stf__parent canvas {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				left: 0;
+				top: 0;
+			}
+			.stf__block {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				perspective: 2000px;
+			}
+			.stf__item {
+				display: none;
+				position: absolute;
+				transform-style: preserve-3d;
+			}
+			.stf__outerShadow,
+			.stf__innerShadow,
+			.stf__hardShadow,
+			.stf__hardInnerShadow {
+				position: absolute;
+				left: 0;
+				top: 0;
 			}
 
 			.loading {