.kwfb-wrap { width: 100%; max-width: 100%; }
.kwfb-toolbar { display:flex; justify-content:space-between; gap:12px; align-items:center; margin:0 0 12px; flex-wrap:wrap; }
.kwfb-toolbar__left, .kwfb-toolbar__right { display:flex; gap:8px; align-items:center; flex-wrap:wrap;padding-right:50px; }
.kwfb-btn { border:1px solid #ccd0d4; background:#fff; color:#495254; padding:8px 12px; border-radius:4px; text-decoration:none; cursor:pointer; font-size:13px; }
.kwfb-btn:hover { background:#813811;color:#ffffff;}
.kwfb-stage {
	width: 100%;
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	min-height: 240px;
}

.kwfb-stage.is-zoomed {
	overflow: auto;
}

.kwfb-canvas-wrap {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	perspective: 2200px;
	transform-style: preserve-3d;
	background: #fff;
	isolation: isolate;
	overflow: hidden;
}

.kwfb-canvas,
.kwfb-reveal-canvas,
.kwfb-turn-canvas {
	display: block;
	width: auto;
	max-width: none;
	height: auto;
	background: #fff;
}

.kwfb-canvas {
	cursor: grab;
	transform-origin: center center;
	transition: transform .12s linear;
	position: relative;
	z-index: 2;
}

.kwfb-canvas:active {
	cursor: grabbing;
}

.kwfb-reveal-canvas,
.kwfb-turn-canvas {
	position: absolute;
	pointer-events: none;
	display: none;
}

.kwfb-reveal-canvas.is-active {
	z-index: 1;
}

.kwfb-turn-canvas.is-active {
	z-index: 4;
	backface-visibility: hidden;
	box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.kwfb-turn-shadow { position:absolute; top:0; bottom:0; width:54px; background:linear-gradient(90deg, rgba(0,0,0,.24), rgba(0,0,0,0)); opacity:0; pointer-events:none; z-index:3; filter:blur(10px); }
.kwfb-status { font-size:13px; color:#50575e; }

.kwfb-load-progress {
	position: relative;
	display: none;
	width: 160px;
	height: 8px;
	border-radius: 999px;
	background: rgba(129, 56, 17, 0.16);
	overflow: hidden;
}
.kwfb-load-progress.is-visible { display: inline-block; }
.kwfb-load-progress__bar {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: #813811;
	transition: width .18s ease;
}
.kwfb-load-progress.is-indeterminate .kwfb-load-progress__bar {
	width: 45%;
	animation: kwfbProgressIndeterminate 1.1s ease-in-out infinite;
}
.kwfb-load-progress__text {
	font-size: 13px;
	color: #50575e;
	white-space: nowrap;
}
@keyframes kwfbProgressIndeterminate {
	0% { transform: translateX(-110%); }
	100% { transform: translateX(240%); }
}
.kwfb-drag-indicator { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.03), rgba(0,0,0,0)); opacity:0; transition:transform .15s ease, opacity .15s ease; z-index:5; }
.kwfb-open-link { all: unset; cursor: pointer; }
.kwfb-open-link:hover, .kwfb-open-link:focus, .kwfb-open-link:visited { color: inherit; text-decoration: inherit; }
.kwfb-open-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.kwfb-modal { position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; padding:12px; }
.kwfb-modal.is-open { display:flex; z-index: 2198887342;}
.kwfb-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); }
.kwfb-modal__dialog { position:relative; z-index:1; width:95vw; max-width:95vw; max-height:95vh; background:#fff; border-radius:14px; overflow:auto; padding:18px; box-shadow:0 25px 80px rgba(0,0,0,.35); }
.kwfb-modal__content { display:block; width:100%; }
.kwfb-modal__content .kwfb-wrap,
.kwfb-modal__content .kwfb-stage { width:100%; max-width:100%; }
.kwfb-modal__close { position:absolute; top:10px; right:10px; z-index:7; border:none; background:#813811; color:#fff; width:36px; height:36px; border-radius:999px; font-size:24px; cursor:pointer; }
.kwfb-lock-scroll { overflow:hidden; }
.kwfb-error { padding:10px 12px; border-left:4px solid #d63638; background:#fcf0f1; }
.kwfb-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:42px; height:42px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.92); color:#1d2327; cursor:pointer; box-shadow:0 4px 18px rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; font-size:28px; line-height:1; }
.kwfb-nav:hover { background:#fff; }
.kwfb-nav--prev { left:12px; }
.kwfb-nav--next { right:12px; }
.kwfb-canvas-wrap.kwfb-flip-next { animation: kwfbFlipNextOut .18s ease-in forwards; }
.kwfb-canvas-wrap.kwfb-flip-prev { animation: kwfbFlipPrevOut .18s ease-in forwards; }
.kwfb-canvas-wrap.kwfb-flip-in-next { animation: kwfbFlipNextIn .22s ease-out forwards; }
.kwfb-canvas-wrap.kwfb-flip-in-prev { animation: kwfbFlipPrevIn .22s ease-out forwards; }
@keyframes kwfbFlipNextOut { from { transform:rotateY(0deg); opacity:1; } to { transform:rotateY(-16deg) scale(.985); opacity:.35; } }
@keyframes kwfbFlipPrevOut { from { transform:rotateY(0deg); opacity:1; } to { transform:rotateY(16deg) scale(.985); opacity:.35; } }
@keyframes kwfbFlipNextIn { from { transform:rotateY(14deg) scale(.985); opacity:.4; } to { transform:rotateY(0deg) scale(1); opacity:1; } }
@keyframes kwfbFlipPrevIn { from { transform:rotateY(-14deg) scale(.985); opacity:.4; } to { transform:rotateY(0deg) scale(1); opacity:1; } }
@media (max-width: 782px) {
  .kwfb-modal { padding:8px; }
  .kwfb-modal__dialog { width:98vw; max-width:98vw; max-height:98vh; padding:14px; }
  .kwfb-btn { padding:7px 10px; }
  .kwfb-nav { width:36px; height:36px; font-size:24px; }
  .kwfb-nav--prev { left:8px; }
  .kwfb-nav--next { right:8px; }
}
.kwfb-wrap.kwfb-is-fullscreen { width:100% !important; max-width:100% !important; height:100vh; display:flex; flex-direction:column; background:#fff; }
.kwfb-wrap.kwfb-is-fullscreen .kwfb-toolbar { flex:0 0 auto; }
.kwfb-wrap.kwfb-is-fullscreen .kwfb-stage { flex:1 1 auto; min-height:0 !important; max-height:none; overflow:auto; }
.kwfb-wrap.kwfb-is-fullscreen .kwfb-canvas-wrap { width:100%; height:100%; }


/* DearFlip-backed renderer */
.kwfb-open-link { text-decoration: inherit; color: inherit; }
.kwfb-dflip-book {
	width: 100%;
	min-height: 240px;
	height: min(700px, 75vh);
}
.df-lightbox-wrapper, .df-ui-wrapper, .df-app, .df-container { box-sizing: border-box; }