.flipkraft {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 6px;
	user-select: none;
	-webkit-user-select: none;
	outline-offset: -2px;
}
.flipkraft:fullscreen { height: 100vh !important; border-radius: 0; }
.flipkraft-loading,
.flipkraft-noscript { position: absolute; inset: 0; z-index: 2; margin: 0; display: flex; align-items: center; justify-content: center; background: inherit; }
.flipkraft-noscript a, .flipkraft-msg-link { color: inherit; text-decoration: underline; }
.flipkraft-msg-link { display: block; margin-top: 8px; }
.flipkraft-msg {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: #fff; font: 14px/1.4 sans-serif;
}
.flipkraft-stage { position: absolute; left: 0; right: 0; top: 0; bottom: 48px; overflow: hidden; }
.flipkraft-stage canvas { display: block; }
.fk-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: auto; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 12px; -webkit-overflow-scrolling: touch; }
.fk-scroll-page { position: relative; flex: none; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.fk-scroll-page .fk-flat-canvas { width: 100%; height: 100%; }
.fk-scroll-page .fk-text { pointer-events: auto; z-index: 0; }
.fk-scroll-page .fk-link { z-index: 2; } /* the text layer is added after the links (it loads later) and must never sit over them */
.fk-scroll-page .fk-text, .fk-scroll-page .fk-text span { user-select: text; -webkit-user-select: text; }
.fk-scrollmode .fk-scroll-stage canvas { cursor: default; }
.flipkraft.fk-zoomed .flipkraft-stage canvas { cursor: grab; }
.flipkraft:not(.fk-zoomed) .flipkraft-stage canvas { cursor: pointer; }

/* Loading ring */
.flipkraft-spinner {
	position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
	border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%;
	opacity: 0; pointer-events: none; transition: opacity .2s;
}
.flipkraft.is-loading .flipkraft-spinner { opacity: 1; animation: fk-spin .8s linear infinite; }
@keyframes fk-spin { to { transform: rotate(360deg); } }

/* Toolbar */
.flipkraft-bar {
	position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
	display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px;
	color: var(--fk-bar-fg, #fff); font: 13px sans-serif; overflow-x: auto; scrollbar-width: none;
	background: var(--fk-bar-bg, transparent);
}
.flipkraft-bar::-webkit-scrollbar { display: none; }
.flipkraft-bar button,
.flipkraft-bar a {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	background: var(--fk-btn-bg, rgba(255,255,255,.14)); color: var(--fk-bar-fg, #fff); border: 0; border-radius: var(--fk-btn-radius, 4px);
	min-width: 34px; height: 30px; padding: 0; cursor: pointer; text-decoration: none; line-height: 1;
}
.flipkraft-bar button:hover:not(:disabled),
.flipkraft-bar a:hover { background: var(--fk-btn-hover, rgba(255,255,255,.3)); }
.flipkraft-bar button:disabled { opacity: .35; cursor: default; }
.flipkraft-bar button.on { background: var(--fk-btn-on, rgba(255,255,255,.4)); }
.flipkraft-bar button:focus-visible,
.flipkraft-bar a:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.fk-page-input {
	flex: none; width: 46px; height: 28px; text-align: center; border: 0; border-radius: 4px;
	background: rgba(255,255,255,.14); color: #fff; font: inherit;
}
.fk-total { flex: none; white-space: nowrap; opacity: .85; }
.flipkraft.fk-narrow .fk-opt { display: none; }

/* Text, links and search highlights laid over the resting pages */
.fk-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fk-page { position: absolute; overflow: hidden; }
.fk-text { position: absolute; left: 0; top: 0; line-height: 1; pointer-events: none; text-align: initial; }
.fk-text span, .fk-text br { color: transparent; position: absolute; white-space: pre; transform-origin: 0 0; cursor: text; }
.fk-text ::selection { background: rgba(0, 90, 255, .35); }
.fk-text span.fk-hl { background: rgba(255, 213, 0, .5); border-radius: 2px; }
.flipkraft.fk-select .fk-text { pointer-events: auto; }
/* The viewer itself is user-select: none (so dragging never selects the UI); the text layer opts back in while Select text is on. */
.flipkraft.fk-select .fk-text, .flipkraft.fk-select .fk-text span { user-select: text; -webkit-user-select: text; }
.flipkraft.fk-select .flipkraft-stage canvas,
.flipkraft.fk-select .flipkraft-flat { cursor: text; }
.fk-link { position: absolute; display: block; pointer-events: auto; cursor: pointer; }
.fk-link:hover { background: rgba(255, 213, 0, .22); }

/* Side panel */
.fk-panel {
	position: absolute; left: 0; top: 0; bottom: 48px; width: 240px; max-width: 85%;
	background: var(--fk-panel-bg, rgba(20,20,20,.94)); color: var(--fk-bar-fg, #fff); font: 13px/1.4 sans-serif;
	transform: translateX(-100%); transition: transform .25s ease; z-index: 5;
	display: flex; flex-direction: column; visibility: hidden;
}
.fk-panel.open { transform: none; visibility: visible; }
.fk-panel-head { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid rgba(255,255,255,.12); }
.fk-panel-head button { background: none; border: 0; color: #fff; opacity: .65; cursor: pointer; padding: 4px 8px; border-radius: 4px; font: inherit; }
.fk-panel-head button.on { opacity: 1; background: rgba(255,255,255,.14); }
.fk-panel-close { margin-left: auto; display: inline-flex; align-items: center; }
.fk-section { flex: 1; overflow-y: auto; padding: 8px; }
/* min-content rows: with auto rows Chrome sizes them from the thumbnails' aspect ratio wrongly (rows half as tall as the thumbnails, so they overlapped). */
.fk-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; align-items: start; grid-auto-rows: min-content; }
.fk-thumb {
	position: relative; padding: 0; margin: 0; border: 2px solid transparent; background: #fff; border-radius: 3px;
	cursor: pointer; min-height: 60px; overflow: hidden; box-sizing: border-box; width: 100%; height: auto;
}
.fk-thumb canvas { display: block; width: 100%; height: 100%; }
.fk-thumb.on { border-color: #4da3ff; }
.fk-thumb span {
	position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.65); color: #fff;
	font-size: 11px; padding: 0 4px; border-radius: 3px;
}
.fk-section ul { list-style: none; margin: 0; padding: 0 0 0 10px; }
.fk-section > ul { padding-left: 0; }
.fk-section li button, .fk-search-list button {
	display: block; width: 100%; text-align: left; background: none; border: 0; color: #fff;
	padding: 5px 4px; cursor: pointer; font: inherit; border-radius: 3px;
}
.fk-section li button:hover, .fk-search-list button:hover { background: rgba(255,255,255,.12); }
.fk-search-input { width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 4px; border: 0; margin-bottom: 6px; }
.fk-search-status { opacity: .7; font-size: 12px; margin-bottom: 6px; }
.fk-search-list mark { background: rgba(255, 213, 0, .6); color: #fff; }

.fk-toast {
	position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); background: rgba(0,0,0,.8); color: #fff;
	padding: 6px 12px; border-radius: 4px; font: 13px sans-serif; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 6;
}
.fk-toast.show { opacity: 1; }
.fk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* No-WebGL fallback: flat pages with a simple slide/fade turn */
.flipkraft-flat {
	position: absolute; left: 50%; top: 50%; margin: 0; display: flex; transform-origin: center;
	translate: -50% -50%; box-shadow: 0 8px 30px rgba(0,0,0,.45);
}
.flipkraft-slot { background: #fff; overflow: hidden; }
.flipkraft-slot canvas, .fk-flat-canvas { display: block; width: 100%; height: 100%; }
.flipkraft-flat { cursor: pointer; }
.flipkraft-flat.fk-in-next { animation: fk-next .35s ease; }
.flipkraft-flat.fk-in-prev { animation: fk-prev .35s ease; }
@keyframes fk-next { from { opacity: .3; margin-left: 24px; } to { opacity: 1; margin-left: 0; } }
@keyframes fk-prev { from { opacity: .3; margin-left: -24px; } to { opacity: 1; margin-left: 0; } }

@media (prefers-reduced-motion: reduce) {
	.fk-panel, .fk-toast { transition: none; }
	.flipkraft-flat.fk-in-next, .flipkraft-flat.fk-in-prev { animation: none; }
}
.flipkraft.fk-dragging, .flipkraft.fk-dragging .flipkraft-stage canvas { cursor: grabbing; }

/* Lightbox triggers, library grid, popup */
.flipkraft-block-box { padding: 24px; text-align: center; background: #2b2b2b; color: #fff; border-radius: 6px; font-family: sans-serif; }
.flipkraft-trigger { display: inline-block; color: inherit; text-decoration: none; cursor: pointer; }
.flipkraft-link { text-decoration: underline; }
.flipkraft-thumb { text-align: center; }
.flipkraft-cover { display: block; position: relative; aspect-ratio: 3 / 4; background: #e6e6e6; overflow: hidden; border-radius: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: transform .2s, box-shadow .2s; }
.flipkraft-thumb:hover .flipkraft-cover, .flipkraft-thumb:focus-visible .flipkraft-cover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.flipkraft-cover img, .flipkraft-cover canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.flipkraft-title { display: block; margin-top: 8px; font-weight: 600; }
.flipkraft-library { display: grid; grid-template-columns: repeat(var(--fk-cols, 4), minmax(0, 1fr)); gap: 24px; }
.flipkraft-library .flipkraft-trigger { display: block; }
@media (max-width: 700px) { .flipkraft-library { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fk-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; }
.fk-lightbox .flipkraft { width: min(1200px, 100%); height: min(92vh, 900px) !important; }
.fk-lightbox.fk-lb-full { padding: 0; }
.fk-lightbox.fk-lb-full .flipkraft { width: 100%; height: 100vh !important; border-radius: 0; }
.fk-lightbox-close { position: absolute; top: 10px; right: 14px; background: rgba(255,255,255,.18); color: #fff; border: 0; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.fk-lightbox-close:hover { background: rgba(255,255,255,.35); }
.fk-lightbox.fk-lb-light .fk-lightbox-close { background: rgba(0,0,0,.14); color: #111; }
.fk-lightbox.fk-lb-light .fk-lightbox-close:hover { background: rgba(0,0,0,.28); }
body.fk-lightbox-open { overflow: hidden; }
.fk-lightbox.fk-lb-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: fk-lb-spin .8s linear infinite; }
@keyframes fk-lb-spin { to { transform: rotate(360deg); } }

/* Help dialog and overflow menu */
.fk-help { position: absolute; inset: 0; z-index: 7; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; padding: 16px; }
.fk-help.open { display: flex; }
.fk-help-card { background: #fff; color: #222; max-width: 420px; border-radius: 8px; padding: 18px 20px; font: 14px/1.5 sans-serif; position: relative; }
.fk-help-card h3 { margin: 0 0 8px; font-size: 16px; }
.fk-help-card ul { margin: 0; padding-left: 18px; }
.fk-help-card li { margin: 4px 0; }
.fk-print-card { min-width: 240px; }
.fk-print-card label { display: block; margin: 6px 0; cursor: pointer; }
.fk-print-card input.fk-print-range { margin-left: 6px; width: 8em; padding: 3px 6px; font: inherit; }
.fk-print-err { color: #b32d2e; margin: 6px 0 0; min-height: 1.2em; font-size: 13px; }
.fk-print-card .fk-print-actions { display: flex; gap: 8px; margin-top: 10px; }
.fk-print-card .fk-print-actions button { position: static; font-size: 14px; padding: 6px 14px; border-radius: 4px; border: 1px solid #bbb; background: #f4f4f4; }
.fk-print-card .fk-print-actions .fk-print-go { background: #2b2b2b; color: #fff; border-color: #2b2b2b; }
.fk-help-card button { position: absolute; top: 8px; right: 8px; background: none; border: 0; cursor: pointer; font-size: 18px; }
.fk-share-dlg { background: rgba(10, 14, 18, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fk-share-fade .2s ease-out; }
.fk-share-card { width: min(92vw, 420px); padding: 24px 24px 22px; border-radius: 16px; color: #475467; font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; text-align: left; box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 24px 60px rgba(0,0,0,.45); animation: fk-share-in .28s cubic-bezier(.2,.8,.2,1); }
@keyframes fk-share-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fk-share-in { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fk-share-dlg, .fk-share-card { animation: none; } }
/* The host theme must not restyle the panel: type and spacing are set here, not inherited. */
.fk-share-card h3 { margin: 0 40px 16px 0; padding: 0; color: #101828; font: 650 19px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em; text-transform: none; }
.fk-share-card .fk-share-close { top: 14px; right: 14px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #f2f4f7; color: #344054; transition: background .15s; }
.fk-share-card .fk-share-close:hover { background: #e4e7ec; }
.fk-share-link { display: flex; margin: 0; }
.fk-share-link input { flex: 1; min-width: 0; height: 42px; box-sizing: border-box; margin: 0; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 10px 0 0 10px; background: #f9fafb; color: #101828; font: 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; box-shadow: none; user-select: text; -webkit-user-select: text; }
.fk-share-link input:focus { outline: 2px solid #2b2b2b; outline-offset: -2px; }
.fk-share-card .fk-share-copy { position: static; display: inline-flex; align-items: center; gap: 7px; height: 42px; box-sizing: border-box; padding: 0 16px; border: 1px solid #2b2b2b; border-radius: 0 10px 10px 0; background: #2b2b2b; color: #fff; font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; cursor: pointer; white-space: nowrap; transition: background .15s; }
.fk-share-card .fk-share-copy:hover { background: #000; }
.fk-share-link:not(:has(.fk-share-copy)) input { border-radius: 10px; }
.fk-share-start { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: #475467; font-size: 13px; cursor: pointer; }
.fk-share-start input { margin: 0; accent-color: #2b2b2b; }
.fk-share-status { min-height: 1.3em; margin: 6px 0 12px; color: #b42318; font-size: 13px; }
.fk-share-status.ok { color: #067647; font-weight: 600; }
.fk-share-targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.fk-share-card .fk-share-btn { position: static; display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px; height: 40px; box-sizing: border-box; padding: 0 14px; border: 1px solid #e4e7ec; border-radius: 10px; background: #fff; color: #101828; font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.fk-share-card .fk-share-btn::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #98a2b3; }
.fk-share-card .fk-share-whatsapp::before { background: #25d366; }
.fk-share-card .fk-share-facebook::before { background: #1877f2; }
.fk-share-card .fk-share-x::before { background: #101828; }
.fk-share-card .fk-share-linkedin::before { background: #0a66c2; }
.fk-share-card .fk-share-email::before { background: #667085; }
.fk-share-card .fk-share-btn:hover { background: #f9fafb; border-color: #d0d5dd; }
.fk-share-card .fk-share-btn:focus-visible, .fk-share-card .fk-share-copy:focus-visible, .fk-share-card .fk-share-close:focus-visible { outline: 2px solid #2b2b2b; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fk-share-card .fk-share-copy, .fk-share-card .fk-share-btn, .fk-share-card .fk-share-close { transition: none; } }
/* Toolbar position (option "toolbar"). Bottom is the default above; the stage, side panel and message follow the bar. */
.flipkraft.fk-bar-top .flipkraft-bar { top: 0; bottom: auto; }
.flipkraft.fk-bar-top .flipkraft-stage { top: 48px; bottom: 0; }
.flipkraft.fk-bar-top .fk-panel { top: 48px; bottom: 0; }
.flipkraft.fk-bar-top .fk-toast, .flipkraft.fk-bar-hidden .fk-toast { bottom: 12px; }
.flipkraft.fk-bar-top.fk-narrow .flipkraft-bar.fk-more-open { top: 0; bottom: auto; }
.flipkraft.fk-bar-hidden .flipkraft-stage { bottom: 0; }
.flipkraft.fk-bar-hidden .fk-panel { bottom: 0; }
.flipkraft.fk-bar-hidden .flipkraft-bar { display: none; }
.flipkraft.fk-bar-hidden.fk-bar-open .flipkraft-bar { display: flex; z-index: 6; padding-right: 52px; background: var(--fk-bar-bg, rgba(20,20,20,.92)); }
.fk-bar-toggle {
	position: absolute; right: 8px; bottom: 8px; z-index: 7; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	background: var(--fk-bar-bg, rgba(20,20,20,.7)); color: var(--fk-bar-fg, #fff); box-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.fk-bar-toggle:hover { background: var(--fk-btn-hover, rgba(60,60,60,.9)); }
.fk-bar-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fk-more { display: none !important; }
.flipkraft.fk-narrow .fk-more { display: inline-flex !important; }
.flipkraft.fk-narrow .fk-opt { display: none; }
.flipkraft.fk-narrow .flipkraft-bar.fk-more-open { flex-wrap: wrap; height: auto; min-height: 48px; padding: 6px 8px; background: rgba(20,20,20,.96); bottom: 0; z-index: 8; }
.flipkraft.fk-narrow .flipkraft-bar.fk-more-open .fk-opt { display: inline-flex; }

/* Page edges / inner box for letterboxed pages, flat 2D turn, print */
.fk-inner { position: absolute; }
.flipkraft-flat { perspective: 2000px; }
.fk-flat-sheet { transform-style: preserve-3d; z-index: 3; }
.fk-flat-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #fff; }
.fk-flat-back { transform: rotateY(180deg); }
.fk-flat-face canvas { display: block; width: 100%; height: 100%; }
.fk-print-sheet { display: none; }
@media print {
	body > *:not(.fk-print-sheet) { display: none !important; }
	.fk-print-sheet { display: block !important; }
	.fk-print-sheet img { display: block; width: 100%; page-break-after: always; break-after: page; }
}

/* Lightbox triggers sit in the content column and stay a sensible size */
.flipkraft-trigger-wrap { margin: 1em 0; }
.flipkraft-thumb { width: min(100%, var(--fk-thumb, 240px)); }
.flipkraft-library .flipkraft-thumb { width: 100%; }
.flipkraft-library .flipkraft-trigger-wrap { margin: 0; }

/* 2D corner peel */
.fk-peel { position: absolute; z-index: 4; pointer-events: none; }
.fk-peel-mirror { transform: scaleX(-1); transform-origin: 0 0; }
.fk-peel-mirror canvas { transform: scaleX(-1); }
.fk-peel-under, .fk-peel-front, .fk-peel-flapwrap, .fk-peel-flap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.fk-peel-under { overflow: hidden; }
.fk-peel-front { }
.fk-peel-flapwrap { }
.fk-peel-flap { transform-origin: 0 0; }
.fk-peel-shade { position: absolute; pointer-events: none; }
.fk-peeling .flipkraft-flat { cursor: grabbing; }

/* Soft shadow along the spine edge of each page in the flat viewers */
.fk-gutter-l, .fk-gutter-r { position: relative; }
.fk-gutter-l::after, .fk-gutter-r::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.fk-gutter-l::after { background: linear-gradient(to right, rgba(0,0,0,0) 95%, rgba(0,0,0,.2) 100%); }
.fk-gutter-r::after { background: linear-gradient(to left, rgba(0,0,0,0) 95%, rgba(0,0,0,.15) 100%); }
.fk-peel-front.fk-gutter-r, .fk-peel-flap.fk-gutter-l { position: absolute; }