flipbookengine 0.2.4 → 0.4.0

package/dist/engine.d.ts

@@ -5,6 +5,7 @@ import { FlipbookLocale, PartialFlipbookMessages } from './i18n/service';
 export interface FlipbookEngineOptions {
     allowDownload?: boolean;
     showThumbs?: boolean;
+    showArrows?: boolean;
     primaryColor?: string;
     soundEnabled?: boolean;
     soundUrl?: string;
@@ -24,6 +25,11 @@ export interface FlipbookEngineOptions {
     isSingleMode?: boolean;
     autoPlay?: boolean;
     autoPlayInterval?: number;
+    pdfRenderScale?: number;
+    pdfRenderQuality?: number;
+    pdfRenderFormat?: string;
+    pdfRenderConcurrency?: number;
+    pdfWorkerSrc?: string;
 }
 export interface PageImages extends FlipbookPageAsset {
     pageNumber: number;
@@ -55,6 +61,16 @@ export interface FlipbookEngineEventMap {
     orientationChange: {
         orientation: 'landscape' | 'portrait';
     };
+    progress: {
+        phase: 'loading' | 'rendering';
+        completed: number;
+        total: number;
+    };
+    error: {
+        code: 'PDF_LOAD_FAILED' | 'PDF_RENDER_FAILED';
+        message: string;
+        cause?: unknown;
+    };
 }
 export type FlipbookEngineEventName = keyof FlipbookEngineEventMap;
 type FlipbookEventHandler<T extends FlipbookEngineEventName> = (payload: FlipbookEngineEventMap[T]) => void;
@@ -63,21 +79,39 @@ export declare class FlipbookEngine {
     private static readonly DEFAULT_PAGE_VIEWPORT;
     private container;
     private options;
+    private store;
     private pageFlipAdapter;
     private layoutManager;
     private interactionManager;
-    private pdfDoc;
+    private pdfRenderer;
     private listeners;
+    private initializationTimer;
+    private initGeneration;
+    private initAbortController;
+    private eventsReady;
+    private lastEventState;
+    private eventSyncStop;
+    private qualityObserver;
     constructor(selector: string | HTMLElement, options?: FlipbookEngineOptions);
     init(pdfUrl: string, imageList?: Array<PageImages | FlipbookPageAsset>): Promise<void>;
     private loadImageSize;
     goToPage(targetIdx: number): void;
+    getTotalPages(): number;
+    getCurrentPage(): number;
+    getZoom(): number;
+    setZoom(zoomLevel: number): void;
     nextPage(): void;
+    toggleFullscreen(): void;
+    setLocale(locale: FlipbookLocale | string, messages?: Partial<Record<string, PartialFlipbookMessages>>): void;
     prevPage(): void;
     setSingleMode(isSingle: boolean): void;
     updateOptions(options: Partial<FlipbookEngineOptions>): void;
-    setPages(imageList: Array<PageImages | FlipbookPageAsset>, pdfUrl?: string): void;
-    destroy(clearMarkup?: boolean): void;
+    setPages(imageList?: Array<PageImages | FlipbookPageAsset>, pdfUrl?: string): Promise<void>;
+    private setupQualityLoading;
+    private teardownQualityLoading;
+    private setupEventSync;
+    private captureEventState;
+    destroy(keepContainer?: boolean): void;
     on<T extends FlipbookEngineEventName>(eventName: T, handler: FlipbookEventHandler<T>): () => void;
     off<T extends FlipbookEngineEventName>(eventName: T, handler: FlipbookEventHandler<T>): void;
     private emit;

package/dist/flipbook-engine.css

@@ -1 +1 @@
-:root{--flipbook-bg-main: var(--bs-body-bg, #f8f9fa);--flipbook-bg-surface: var(--bs-secondary-bg, #ffffff);--flipbook-bg-surface-alt: var(--bs-tertiary-bg, #f1f3f5);--flipbook-bg-panel: var(--bs-dark, #212529);--flipbook-bg-panel-soft: color-mix(in srgb, var(--flipbook-bg-panel) 88%, white 12%);--flipbook-text-main: var(--bs-body-color, #212529);--flipbook-text-muted: var(--bs-secondary-color, #6c757d);--flipbook-toolbar-text: #f8f9fa;--flipbook-toolbar-button-text: #f8f9fa;--flipbook-border: var(--bs-border-color, rgba(0, 0, 0, .15));--flipbook-accent: var(--bs-primary, #0d6efd);--flipbook-accent-text: #ffffff;--flipbook-thumbrail-bg: color-mix(in srgb, var(--flipbook-bg-panel) 95%, black 5%);--flipbook-thumb-bg: #ffffff;--flipbook-thumb-text: #ffffff;--flipbook-thumbscroll-track: rgba(0, 0, 0, .18);--flipbook-thumbscroll-thumb: rgba(255, 255, 255, .22);--flipbook-navbutton-bg: rgba(0, 0, 0, .6);--flipbook-navbutton-text: #ffffff;--flipbook-shadow: rgba(0, 0, 0, .35);--flipbook-bookpage-bg: #ffffff;--flipbook-emptycover-bg: var(--flipbook-bg-panel);--flipbook-download-bg: #198754;--flipbook-download-border: #198754;--flipbook-download-text: #ffffff;--flipbook-settings-bg: var(--flipbook-bg-surface);--flipbook-settings-text: var(--flipbook-text-main);--flipbook-radius-sm: .375rem;--flipbook-radius-md: .5rem;--flipbook-toolbar-height: 60px;--flipbook-thumbs-height: 110px;--flipbook-navbutton-size: 50px;--flipbook-page-padding: 20px;--flipbook-font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", sans-serif)}[data-bs-theme=dark]{--flipbook-bg-main: var(--bs-body-bg, #121826);--flipbook-bg-surface: var(--bs-secondary-bg, #1b2232);--flipbook-bg-surface-alt: var(--bs-tertiary-bg, #222b3c);--flipbook-bg-panel: #141927;--flipbook-bg-panel-soft: #1d2434;--flipbook-text-main: var(--bs-body-color, #f8f9fa);--flipbook-text-muted: var(--bs-secondary-color, #adb5bd);--flipbook-toolbar-text: #f8f9fa;--flipbook-toolbar-button-text: #f8f9fa;--flipbook-border: var(--bs-border-color, rgba(255, 255, 255, .12));--flipbook-thumbrail-bg: #101522;--flipbook-thumb-bg: #ffffff;--flipbook-settings-bg: #1d2434;--flipbook-settings-text: #f8f9fa;--flipbook-emptycover-bg: #101522;--flipbook-shadow: rgba(0, 0, 0, .5)}.bk-theme-light{color-scheme:light;--flipbook-bg-main: #f8fafc;--flipbook-bg-surface: #ffffff;--flipbook-bg-surface-alt: #f1f5f9;--flipbook-bg-panel: #e2e8f0;--flipbook-bg-panel-soft: #f1f5f9;--flipbook-text-main: #0f172a;--flipbook-text-muted: #64748b;--flipbook-toolbar-text: #0f172a;--flipbook-toolbar-button-text: #334155;--flipbook-border: rgba(15, 23, 42, .1);--flipbook-accent: #4f46e5;--flipbook-accent-text: #ffffff;--flipbook-thumbrail-bg: #f8fafc;--flipbook-thumb-bg: #ffffff;--flipbook-thumb-text: #0f172a;--flipbook-thumbscroll-track: rgba(15, 23, 42, .08);--flipbook-thumbscroll-thumb: rgba(15, 23, 42, .18);--flipbook-navbutton-bg: rgba(15, 23, 42, .65);--flipbook-navbutton-text: #ffffff;--flipbook-shadow: rgba(15, 23, 42, .08);--flipbook-bookpage-bg: #ffffff;--flipbook-emptycover-bg: #e2e8f0;--flipbook-download-bg: #10b981;--flipbook-download-border: #10b981;--flipbook-download-text: #ffffff;--flipbook-settings-bg: #ffffff;--flipbook-settings-text: #0f172a}.bk-theme-dark{color-scheme:dark;--flipbook-bg-main: #0b0f19;--flipbook-bg-surface: #111827;--flipbook-bg-surface-alt: #1f2937;--flipbook-bg-panel: #111827;--flipbook-bg-panel-soft: #1f2937;--flipbook-text-main: #f9fafb;--flipbook-text-muted: #9ca3af;--flipbook-toolbar-text: #f9fafb;--flipbook-toolbar-button-text: #e5e7eb;--flipbook-border: rgba(255, 255, 255, .08);--flipbook-accent: #7367f0;--flipbook-accent-text: #ffffff;--flipbook-thumbrail-bg: #0b0f19;--flipbook-thumb-bg: #1f2937;--flipbook-thumb-text: #f9fafb;--flipbook-thumbscroll-track: rgba(255, 255, 255, .08);--flipbook-thumbscroll-thumb: rgba(255, 255, 255, .18);--flipbook-navbutton-bg: rgba(0, 0, 0, .6);--flipbook-navbutton-text: #ffffff;--flipbook-shadow: rgba(0, 0, 0, .5);--flipbook-bookpage-bg: #ffffff;--flipbook-emptycover-bg: #101522;--flipbook-download-bg: #10b981;--flipbook-download-border: #10b981;--flipbook-download-text: #ffffff;--flipbook-settings-bg: #1f2937;--flipbook-settings-text: #f9fafb}.bk-container,.bk-container *{box-sizing:border-box}.bk-container{color:var(--flipbook-text-main);font-family:var(--flipbook-font-family);flex:1;align-self:stretch}.bk-wrapper{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:var(--flipbook-bg-main);color:var(--flipbook-text-main);overflow:hidden;font-family:var(--flipbook-font-family);border-radius:var(--flipbook-radius-md);flex:1;align-self:stretch}.bk-main-area{flex:1;position:relative;overflow:hidden;width:100%;min-height:0;background:var(--flipbook-bg-main)}.bk-container.single-mode .bk-main-area{overflow-y:auto;overflow-x:hidden}#bk-book-wrapper{position:absolute;inset:var(--flipbook-page-padding);padding:0;display:flex;justify-content:center;align-items:center;transition:transform .3s ease;transform-origin:center center}.bk-container.single-mode #bk-book-wrapper{position:relative;min-height:100%;inset:auto;padding:var(--flipbook-page-padding)}#bk-book-wrapper.zoomed{transition:none;cursor:grab}#bk-book-wrapper.zoomed:active{cursor:grabbing}#bk-book-wrapper.zoomed #bk-book{pointer-events:none}#bk-book-sizer{position:relative;margin:0 auto;transition:transform .4s ease}#bk-book-wrapper.bk-is-cover #bk-book-sizer{transform:translate(-25%)}#bk-book-wrapper.bk-is-back-cover #bk-book-sizer{transform:translate(25%)}.bk-container.double-mode:not(.bk-is-cover):not(.bk-is-back-cover) .stf__block{background-color:#00000080}#bk-book{width:100%;height:100%;position:relative}#bk-single-view{display:none;width:100%;height:100%;justify-content:center;align-items:center;overflow:hidden}#bk-single-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 5px 20px var(--flipbook-shadow);background:var(--flipbook-bookpage-bg);transition:transform .3s ease,opacity .3s ease;pointer-events:none}.slide-left{transform:translate(-100%);opacity:0}.slide-right{transform:translate(100%);opacity:0}.bz-page{background-color:var(--flipbook-bg-main);overflow:hidden;box-shadow:0 0 15px var(--flipbook-shadow)}.page-shadow{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5}.bz-page--left .page-shadow{background:linear-gradient(to right,#0000001a,#0000 3%,#0000 85%,#0006)}.bz-page--right .page-shadow{background:linear-gradient(to right,#0006,#0000 15%,#0000 97%,#0000001a)}.bz-page--cover .page-shadow{display:none!important}.page-content{width:100%;height:100%;object-fit:contain;pointer-events:none;background:var(--flipbook-bookpage-bg);display:block}.page-content--split{width:100%;max-width:none;height:100%;object-fit:cover;object-position:left center}.page-content--left{object-position:left center}.page-content--right{object-position:right center}#bk-single-img.page-content--split{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}.bk-toolbar{height:var(--flipbook-toolbar-height);background:var(--flipbook-bg-panel-soft);color:var(--flipbook-toolbar-text);display:flex;align-items:center;justify-content:space-between;padding:0 15px;z-index:10;flex-shrink:0;border-top:1px solid var(--flipbook-border);gap:.75rem;overflow-x:auto;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.bk-toolbar::-webkit-scrollbar{height:4px}.bk-toolbar::-webkit-scrollbar-thumb{background:var(--flipbook-border);border-radius:999px}.bk-btn-group{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.bk-btn-group--center{flex-grow:1;justify-content:center}.bk-btn{background:transparent;border:1px solid transparent;color:var(--flipbook-toolbar-button-text);width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.bk-btn:hover{background:color-mix(in srgb,var(--flipbook-text-main) 10%,transparent);transform:translateY(-1px)}.bk-btn:active{transform:translateY(1px)}.bk-btn.active{background:color-mix(in srgb,var(--flipbook-accent) 15%,transparent);color:var(--flipbook-accent)}.bk-btn:focus-visible,.thumb-item:focus-visible,.nav-float:focus-visible{outline:2px solid var(--flipbook-accent);outline-offset:2px}.bk-btn--download{color:var(--flipbook-download-bg)}.bk-btn--download:hover{background:color-mix(in srgb,var(--flipbook-download-bg) 15%,transparent)}#bk-page-info{color:var(--flipbook-toolbar-text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:14px;min-width:70px;text-align:center;font-weight:700}.bk-thumbs{height:var(--flipbook-thumbs-height);background:var(--flipbook-thumbrail-bg);overflow-x:auto;padding:15px;gap:15px;z-index:10;display:flex;flex-shrink:0;align-items:center;border-top:1px solid var(--flipbook-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.bk-watermark{position:absolute;bottom:12px;right:15px;font-size:11px;color:var(--flipbook-text-muted);background:color-mix(in srgb,var(--flipbook-bg-surface) 60%,transparent);padding:4px 10px;border-radius:99px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--flipbook-border);z-index:100;box-shadow:0 2px 10px var(--flipbook-shadow);transition:all .2s ease;pointer-events:auto}.bk-watermark:hover{background:var(--flipbook-bg-surface);color:var(--flipbook-text-main);transform:translateY(-2px)}.bk-watermark a{color:inherit;font-weight:600;text-decoration:none}.bk-thumbs::-webkit-scrollbar{height:6px}.bk-thumbs::-webkit-scrollbar-track{background:var(--flipbook-thumbscroll-track);border-radius:999px}.bk-thumbs::-webkit-scrollbar-thumb{background:var(--flipbook-thumbscroll-thumb);border-radius:999px;transition:background-color .2s ease}.bk-thumbs::-webkit-scrollbar-thumb:hover{background:var(--flipbook-accent)}.thumb-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;opacity:.7;transition:all .2s ease;min-width:60px;flex-shrink:0;gap:5px}.thumb-item:hover{opacity:1;transform:translateY(-2px)}.thumb-item.active{opacity:1}.thumb-item.active .thumb-img-wrapper{border-color:var(--flipbook-accent);box-shadow:0 0 0 2px var(--flipbook-accent),0 4px 12px var(--flipbook-shadow)}.thumb-item.active span{color:var(--flipbook-accent);font-weight:700}.thumb-img-wrapper{width:50px;height:65px;background:var(--flipbook-bg-surface);border:1px solid var(--flipbook-border);border-radius:var(--flipbook-radius-sm);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 2px 5px var(--flipbook-shadow);transition:all .2s ease}.thumb-img{width:100%;height:100%;object-fit:cover}.thumb-img--split{width:96px;max-width:none;object-fit:cover}.thumb-img--left{object-position:left center}.thumb-img--right{object-position:right center}.thumb-item span{color:var(--flipbook-thumb-text);font-size:11px;margin-top:6px;font-weight:700}.nav-float{position:absolute;z-index:10;background:var(--flipbook-navbutton-bg);border:none;border-radius:999px;width:var(--flipbook-navbutton-size);height:var(--flipbook-navbutton-size);color:var(--flipbook-navbutton-text);font-size:20px;cursor:pointer;transition:background-color .2s ease;top:50%;transform:translateY(-50%)}.nav-float:hover{background:var(--flipbook-accent)}#nav-prev{left:20px}#nav-next{right:20px}.bk-settings-panel{position:absolute;bottom:70px;right:15px;background:var(--flipbook-settings-bg);color:var(--flipbook-settings-text);border:1px solid var(--flipbook-border);border-radius:var(--flipbook-radius-md);padding:15px;display:none;z-index:20;min-width:200px;box-shadow:0 10px 30px var(--flipbook-shadow)}.setting-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:14px;margin-bottom:10px}.setting-item:last-child{margin-bottom:0}.bk-empty-state{display:grid;place-items:center;width:100%;min-height:240px;padding:1.5rem;background:var(--flipbook-bg-main);color:var(--flipbook-text-main);border:1px dashed var(--flipbook-border);border-radius:var(--flipbook-radius-md)}.bk-empty-state__title{margin:0;font-size:1.125rem;font-weight:600}.empty-cover{background-color:var(--flipbook-emptycover-bg)!important;box-shadow:none!important}.bk-attribution{position:absolute;bottom:15px;left:15px;background:#0f172abf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;padding:6px 12px;border-radius:var(--flipbook-radius-sm);font-size:11px;text-decoration:none;z-index:20;display:flex;align-items:center;gap:6px;box-shadow:0 4px 12px #0006;border:1px solid rgba(255,255,255,.15);transition:all .2s ease;opacity:.85}.bk-attribution:hover{opacity:1;transform:translateY(-2px);box-shadow:0 6px 16px #0009;border-color:var(--flipbook-accent);color:#fff}.bk-attribution-icon{font-size:13px}.bk-attribution-img{height:24px;width:auto;object-fit:contain;display:block}@media (max-width: 768px){:root{--flipbook-toolbar-height: 50px;--flipbook-thumbs-height: 85px;--flipbook-navbutton-size: 35px;--flipbook-page-padding: 12px}.bk-toolbar{padding:0 5px}.bk-btn{padding:0 8px;font-size:12px;height:32px}.bk-btn-group{gap:4px}#bk-page-info{min-width:50px;font-size:12px}.nav-float{font-size:16px}#nav-prev{left:10px}#nav-next{right:10px}.bk-thumbs{padding:10px}.thumb-img{height:45px}.bk-settings-panel{bottom:60px}}.bk-btn.muted{opacity:.5;position:relative}.bk-btn.muted:after{content:"";position:absolute;width:80%;height:2px;background:currentColor;top:50%;left:10%;transform:rotate(-45deg);border-radius:1px}
+:root{--flipbook-bg-main: var(--bs-body-bg, #f8f9fa);--flipbook-bg-surface: var(--bs-secondary-bg, #ffffff);--flipbook-bg-surface-alt: var(--bs-tertiary-bg, #f1f3f5);--flipbook-bg-panel: var(--bs-dark, #212529);--flipbook-bg-panel-soft: color-mix(in srgb, var(--flipbook-bg-panel) 88%, white 12%);--flipbook-text-main: var(--bs-body-color, #212529);--flipbook-text-muted: var(--bs-secondary-color, #6c757d);--flipbook-toolbar-text: #f8f9fa;--flipbook-toolbar-button-text: #f8f9fa;--flipbook-border: var(--bs-border-color, rgba(0, 0, 0, .15));--flipbook-accent: var(--bs-primary, #0d6efd);--flipbook-accent-text: #ffffff;--flipbook-thumbrail-bg: color-mix(in srgb, var(--flipbook-bg-panel) 95%, black 5%);--flipbook-thumb-bg: #ffffff;--flipbook-thumb-text: #ffffff;--flipbook-thumbscroll-track: rgba(0, 0, 0, .18);--flipbook-thumbscroll-thumb: rgba(255, 255, 255, .22);--flipbook-navbutton-bg: rgba(0, 0, 0, .6);--flipbook-navbutton-text: #ffffff;--flipbook-shadow: rgba(0, 0, 0, .35);--flipbook-bookpage-bg: #ffffff;--flipbook-emptycover-bg: var(--flipbook-bg-panel);--flipbook-download-bg: #198754;--flipbook-download-border: #198754;--flipbook-download-text: #ffffff;--flipbook-settings-bg: var(--flipbook-bg-surface);--flipbook-settings-text: var(--flipbook-text-main);--flipbook-radius-sm: .375rem;--flipbook-radius-md: .5rem;--flipbook-toolbar-height: 60px;--flipbook-thumbs-height: 80px;--flipbook-navbutton-size: 50px;--flipbook-page-padding: 20px;--flipbook-font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", sans-serif)}[data-bs-theme=dark]{--flipbook-bg-main: var(--bs-body-bg, #121826);--flipbook-bg-surface: var(--bs-secondary-bg, #1b2232);--flipbook-bg-surface-alt: var(--bs-tertiary-bg, #222b3c);--flipbook-bg-panel: #141927;--flipbook-bg-panel-soft: #1d2434;--flipbook-text-main: var(--bs-body-color, #f8f9fa);--flipbook-text-muted: var(--bs-secondary-color, #adb5bd);--flipbook-toolbar-text: #f8f9fa;--flipbook-toolbar-button-text: #f8f9fa;--flipbook-border: var(--bs-border-color, rgba(255, 255, 255, .12));--flipbook-thumbrail-bg: #101522;--flipbook-thumb-bg: #ffffff;--flipbook-settings-bg: #1d2434;--flipbook-settings-text: #f8f9fa;--flipbook-emptycover-bg: #101522;--flipbook-shadow: rgba(0, 0, 0, .5)}.bk-theme-light{color-scheme:light;--flipbook-bg-main: #f8fafc;--flipbook-bg-surface: #ffffff;--flipbook-bg-surface-alt: #f1f5f9;--flipbook-bg-panel: #e2e8f0;--flipbook-bg-panel-soft: #f1f5f9;--flipbook-text-main: #0f172a;--flipbook-text-muted: #64748b;--flipbook-toolbar-text: #0f172a;--flipbook-toolbar-button-text: #334155;--flipbook-border: rgba(15, 23, 42, .1);--flipbook-accent: #4f46e5;--flipbook-accent-text: #ffffff;--flipbook-thumbrail-bg: #f8fafc;--flipbook-thumb-bg: #ffffff;--flipbook-thumb-text: #0f172a;--flipbook-thumbscroll-track: rgba(15, 23, 42, .08);--flipbook-thumbscroll-thumb: rgba(15, 23, 42, .18);--flipbook-navbutton-bg: rgba(15, 23, 42, .65);--flipbook-navbutton-text: #ffffff;--flipbook-shadow: rgba(15, 23, 42, .08);--flipbook-bookpage-bg: #ffffff;--flipbook-emptycover-bg: #e2e8f0;--flipbook-download-bg: #10b981;--flipbook-download-border: #10b981;--flipbook-download-text: #ffffff;--flipbook-settings-bg: #ffffff;--flipbook-settings-text: #0f172a}.bk-theme-dark{color-scheme:dark;--flipbook-bg-main: #0b0f19;--flipbook-bg-surface: #111827;--flipbook-bg-surface-alt: #1f2937;--flipbook-bg-panel: #111827;--flipbook-bg-panel-soft: #1f2937;--flipbook-text-main: #f9fafb;--flipbook-text-muted: #9ca3af;--flipbook-toolbar-text: #f9fafb;--flipbook-toolbar-button-text: #e5e7eb;--flipbook-border: rgba(255, 255, 255, .08);--flipbook-accent: #7367f0;--flipbook-accent-text: #ffffff;--flipbook-thumbrail-bg: #0b0f19;--flipbook-thumb-bg: #1f2937;--flipbook-thumb-text: #f9fafb;--flipbook-thumbscroll-track: rgba(255, 255, 255, .08);--flipbook-thumbscroll-thumb: rgba(255, 255, 255, .18);--flipbook-navbutton-bg: rgba(0, 0, 0, .6);--flipbook-navbutton-text: #ffffff;--flipbook-shadow: rgba(0, 0, 0, .5);--flipbook-bookpage-bg: #ffffff;--flipbook-emptycover-bg: #101522;--flipbook-download-bg: #10b981;--flipbook-download-border: #10b981;--flipbook-download-text: #ffffff;--flipbook-settings-bg: #1f2937;--flipbook-settings-text: #f9fafb}.bk-container,.bk-container *{box-sizing:border-box}.bk-container{color:var(--flipbook-text-main);font-family:var(--flipbook-font-family);flex:1;align-self:stretch}.bk-wrapper{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:var(--flipbook-bg-main);color:var(--flipbook-text-main);overflow:hidden;font-family:var(--flipbook-font-family);border-radius:var(--flipbook-radius-md);flex:1;align-self:stretch}.bk-main-area{flex:1;position:relative;overflow:hidden;width:100%;min-height:0;background:var(--flipbook-bg-main)}.bk-container.single-mode .bk-main-area{overflow-y:auto;overflow-x:hidden}.bk-book-wrapper{position:absolute;inset:var(--flipbook-page-padding);padding:0;display:flex;justify-content:center;align-items:center;transition:transform .3s ease;transform-origin:center center}.bk-container.single-mode .bk-book-wrapper{position:relative;min-height:100%;inset:auto;padding:var(--flipbook-page-padding)}.bk-book-wrapper.zoomed{transition:none;cursor:grab}.bk-book-wrapper.zoomed:active{cursor:grabbing}.bk-book-wrapper.zoomed .bk-book{pointer-events:none}.bk-book-sizer{position:relative;margin:0 auto;transition:transform .4s ease}.bk-book-wrapper.bk-is-cover .bk-book-sizer{transform:translate(-25%)}.bk-book-wrapper.bk-is-back-cover .bk-book-sizer{transform:translate(25%)}.bk-container.double-mode:not(.bk-is-cover):not(.bk-is-back-cover) .stf__block{background-color:#00000080}.bk-book{width:100%;height:100%;position:relative}.bk-single-view{display:none;width:100%;height:100%;justify-content:center;align-items:center;overflow:hidden}.bk-single-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 5px 20px var(--flipbook-shadow);background:var(--flipbook-bookpage-bg);transition:transform .3s ease,opacity .3s ease;pointer-events:none}.slide-left{transform:translate(-100%);opacity:0}.slide-right{transform:translate(100%);opacity:0}.bz-page{background-color:var(--flipbook-bg-main);overflow:hidden;box-shadow:0 0 15px var(--flipbook-shadow)}.page-shadow{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5}.bz-page--left .page-shadow{background:linear-gradient(to right,#0000001a,#0000 3%,#0000 85%,#0006)}.bz-page--right .page-shadow{background:linear-gradient(to right,#0006,#0000 15%,#0000 97%,#0000001a)}.bz-page--cover .page-shadow{display:none!important}.page-content{width:100%;height:100%;object-fit:contain;pointer-events:none;background:var(--flipbook-bookpage-bg);display:block}.page-content--split{width:100%;max-width:none;height:100%;object-fit:cover;object-position:left center}.page-content--left{object-position:left center}.page-content--right{object-position:right center}.bk-single-img.page-content--split{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}.bk-toolbar{height:var(--flipbook-toolbar-height);background:var(--flipbook-bg-panel-soft);color:var(--flipbook-toolbar-text);display:flex;align-items:center;justify-content:space-between;padding:0 15px;z-index:10;flex-shrink:0;border-top:1px solid var(--flipbook-border);gap:.75rem;overflow-x:auto;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.bk-toolbar::-webkit-scrollbar{height:4px}.bk-toolbar::-webkit-scrollbar-thumb{background:var(--flipbook-border);border-radius:999px}.bk-btn-group{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.bk-btn-group--center{flex-grow:1;justify-content:center}.bk-btn{background:transparent;border:1px solid transparent;color:var(--flipbook-toolbar-button-text);width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.bk-btn:hover{background:color-mix(in srgb,var(--flipbook-text-main) 10%,transparent);transform:translateY(-1px)}.bk-btn:active{transform:translateY(1px)}.bk-btn.active{background:color-mix(in srgb,var(--flipbook-accent) 15%,transparent);color:var(--flipbook-accent)}.bk-btn:focus-visible,.thumb-item:focus-visible,.nav-float:focus-visible{outline:2px solid var(--flipbook-accent);outline-offset:2px}.bk-btn--download{color:var(--flipbook-download-bg)}.bk-btn--download:hover{background:color-mix(in srgb,var(--flipbook-download-bg) 15%,transparent)}#bk-page-info{color:var(--flipbook-toolbar-text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:14px;min-width:70px;text-align:center;font-weight:700}.bk-thumbs{height:var(--flipbook-thumbs-height);background:var(--flipbook-thumbrail-bg);overflow-x:auto;padding:8px 15px;gap:15px;z-index:10;display:flex;flex-shrink:0;align-items:center;border-top:1px solid var(--flipbook-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.bk-nav-arrows{position:absolute;top:50%;left:0;right:0;width:100%;transform:translateY(-50%);pointer-events:none;z-index:10;display:flex;flex-direction:row;justify-content:space-between;padding:0 20px}.bk-nav-arrow{width:48px;height:48px;border-radius:50%;background:var(--flipbook-bg-surface);border:1px solid var(--flipbook-border);box-shadow:0 4px 15px var(--flipbook-shadow);color:var(--flipbook-text-main);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:all .2s ease;opacity:.7}.bk-nav-arrow:hover{opacity:1;background:var(--flipbook-accent);color:#fff;border-color:var(--flipbook-accent);transform:scale(1.1)}.bk-arrow-icon{width:12px;height:12px;border-top:2px solid currentColor;border-right:2px solid currentColor}.bk-arrow-left{transform:rotate(-135deg);margin-left:4px}.bk-arrow-right{transform:rotate(45deg);margin-right:4px}.bk-watermark{position:absolute;bottom:12px;right:15px;font-size:11px;color:var(--flipbook-text-muted);background:color-mix(in srgb,var(--flipbook-bg-surface) 60%,transparent);padding:4px 10px;border-radius:99px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--flipbook-border);z-index:100;box-shadow:0 2px 10px var(--flipbook-shadow);transition:all .2s ease;pointer-events:auto}.bk-watermark:hover{background:var(--flipbook-bg-surface);color:var(--flipbook-text-main);transform:translateY(-2px)}.bk-watermark a{color:inherit;font-weight:600;text-decoration:none}.bk-thumbs::-webkit-scrollbar{height:6px}.bk-thumbs::-webkit-scrollbar-track{background:var(--flipbook-thumbscroll-track);border-radius:999px}.bk-thumbs::-webkit-scrollbar-thumb{background:var(--flipbook-thumbscroll-thumb);border-radius:999px;transition:background-color .2s ease}.bk-thumbs::-webkit-scrollbar-thumb:hover{background:var(--flipbook-accent)}.thumb-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;opacity:.7;transition:all .2s ease;min-width:60px;flex-shrink:0;gap:5px}.thumb-item:hover{opacity:1;transform:translateY(-2px)}.thumb-item.active{opacity:1}.thumb-item.active .thumb-img-wrapper{border-color:var(--flipbook-accent);box-shadow:0 0 0 2px var(--flipbook-accent),0 4px 12px var(--flipbook-shadow)}.thumb-item.active span{color:var(--flipbook-accent);font-weight:700}.thumb-img-wrapper{width:38px;height:50px;background:var(--flipbook-bg-surface);border:1px solid var(--flipbook-border);border-radius:var(--flipbook-radius-sm);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 2px 5px var(--flipbook-shadow);transition:all .2s ease}.thumb-img{width:100%;height:100%;object-fit:cover}.thumb-img--split{width:96px;max-width:none;object-fit:cover}.thumb-img--left{object-position:left center}.thumb-img--right{object-position:right center}.thumb-item span{color:var(--flipbook-thumb-text);font-size:10px;margin-top:4px;font-weight:700}.nav-float{position:absolute;z-index:10;background:var(--flipbook-navbutton-bg);border:none;border-radius:999px;width:var(--flipbook-navbutton-size);height:var(--flipbook-navbutton-size);color:var(--flipbook-navbutton-text);font-size:20px;cursor:pointer;transition:background-color .2s ease;top:50%;transform:translateY(-50%)}.nav-float:hover{background:var(--flipbook-accent)}#nav-prev{left:20px}#nav-next{right:20px}.bk-settings-panel{position:absolute;bottom:70px;right:15px;background:var(--flipbook-settings-bg);color:var(--flipbook-settings-text);border:1px solid var(--flipbook-border);border-radius:var(--flipbook-radius-md);padding:15px;display:none;z-index:20;min-width:200px;box-shadow:0 10px 30px var(--flipbook-shadow)}.setting-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:14px;margin-bottom:10px}.setting-item:last-child{margin-bottom:0}.bk-empty-state{display:grid;place-items:center;width:100%;min-height:240px;padding:1.5rem;background:var(--flipbook-bg-main);color:var(--flipbook-text-main);border:1px dashed var(--flipbook-border);border-radius:var(--flipbook-radius-md)}.bk-empty-state__title{margin:0;font-size:1.125rem;font-weight:600}.empty-cover{background-color:var(--flipbook-emptycover-bg)!important;box-shadow:none!important}.bk-attribution{position:absolute;bottom:15px;left:15px;background:#0f172abf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;padding:6px 12px;border-radius:var(--flipbook-radius-sm);font-size:11px;text-decoration:none;z-index:20;display:flex;align-items:center;gap:6px;box-shadow:0 4px 12px #0006;border:1px solid rgba(255,255,255,.15);transition:all .2s ease;opacity:.85}.bk-attribution:hover{opacity:1;transform:translateY(-2px);box-shadow:0 6px 16px #0009;border-color:var(--flipbook-accent);color:#fff}.bk-attribution-icon{font-size:13px}.bk-attribution-img{height:24px;width:auto;object-fit:contain;display:block}@media (max-width: 768px){:root{--flipbook-toolbar-height: 50px;--flipbook-thumbs-height: 85px;--flipbook-navbutton-size: 35px;--flipbook-page-padding: 12px}.bk-toolbar{padding:0 5px}.bk-btn{padding:0 8px;font-size:12px;height:32px}.bk-btn-group{gap:4px}#bk-page-info{min-width:50px;font-size:12px}.nav-float{font-size:16px}#nav-prev{left:10px}#nav-next{right:10px}.bk-thumbs{padding:6px 10px}.thumb-img-wrapper{height:45px;width:34px}.bk-settings-panel{bottom:60px}}.bk-btn.muted{opacity:.5;position:relative}.bk-btn.muted:after{content:"";position:absolute;width:80%;height:2px;background:currentColor;top:50%;left:10%;transform:rotate(-45deg);border-radius:1px}