.stf-viewer{position:relative;isolation:isolate;box-sizing:border-box;width:100%;max-width:var(--stf-max-width);height:var(--stf-height);margin:1.5rem auto;overflow:hidden;border-radius:var(--stf-viewer-radius);background:var(--stf-background);color:var(--stf-toolbar-text);font:14px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 1px 2px rgb(0 0 0 / 8%)}.stf-viewer *{box-sizing:border-box}.stf-stage{position:absolute;inset:0;overflow:hidden;touch-action:pan-y}.stf-toolbar-bottom .stf-stage{bottom:64px}.stf-toolbar-top .stf-stage{top:64px}.stf-book-wrap{position:absolute;inset:28px 60px;display:flex;align-items:center;justify-content:center;overflow:auto;overscroll-behavior:contain}.stf-book{position:relative;display:flex;gap:var(--stf-page-gap);align-items:stretch;justify-content:center;max-width:none;transform:scale(var(--stf-zoom,1));transform-origin:center;transition:transform .18s ease;perspective:var(--stf-perspective)}.stf-page{position:relative;display:flex;overflow:hidden;flex:0 0 auto;border:var(--stf-page-border-width) solid var(--stf-page-border);border-radius:var(--stf-page-radius);background:var(--stf-page);box-shadow:0 12px 35px rgb(0 0 0 / var(--stf-shadow-alpha));transform-style:preserve-3d}.stf-page canvas,.stf-turn-page canvas{display:block;width:100%;height:100%;object-fit:contain}.stf-page-left:after,.stf-page-right:after{content:"";position:absolute;inset:0;pointer-events:none}.stf-page-left:after{background:linear-gradient(90deg,transparent 75%,rgb(0 0 0 / 10%))}.stf-page-right:after{background:linear-gradient(90deg,rgb(0 0 0 / 8%),transparent 25%)}.stf-book.is-single .stf-page-left{display:none}.stf-book.is-single .stf-page-right:after{display:none}.stf-page.is-empty{visibility:hidden}.stf-turn-page{position:absolute;z-index:4;top:0;display:none;overflow:hidden;width:50%;height:100%;border:var(--stf-page-border-width) solid var(--stf-page-border);background:var(--stf-page);box-shadow:0 12px 35px rgb(0 0 0 / var(--stf-shadow-alpha));backface-visibility:hidden;transform-style:preserve-3d}.stf-turn-page.is-next{right:0;display:block;transform-origin:left center;animation:stf-flip-next var(--stf-duration) ease-in-out both}.stf-turn-page.is-prev{left:0;display:block;transform-origin:right center;animation:stf-flip-prev var(--stf-duration) ease-in-out both}.stf-turn-shade{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgb(0 0 0 / 35%));opacity:0;animation:stf-shade var(--stf-duration) ease-in-out}.stf-animation-slide .stf-book.is-animating{animation:stf-slide var(--stf-duration) ease}.stf-animation-fade .stf-book.is-animating{animation:stf-fade var(--stf-duration) ease}.stf-animation-none .stf-turn-page{display:none!important}@keyframes stf-flip-next{0%{transform:rotateY(0)}100%{transform:rotateY(-180deg)}}@keyframes stf-flip-prev{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}@keyframes stf-shade{50%{opacity:1}}@keyframes stf-slide{50%{opacity:.55;transform:translateX(-5%) scale(var(--stf-zoom,1))}}@keyframes stf-fade{50%{opacity:.15}}.stf-loading{position:absolute;z-index:9;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--stf-toolbar-text);background:var(--stf-background)}.stf-loading[hidden]{display:none}.stf-loading small{max-width:80%;text-align:center}.stf-spinner{width:42px;height:42px;border:4px solid rgb(127 127 127 / 20%);border-top-color:var(--stf-loading);border-radius:50%;animation:stf-spin .8s linear infinite}@keyframes stf-spin{to{transform:rotate(360deg)}}.stf-toolbar{position:absolute;z-index:12;left:50%;display:flex;align-items:center;justify-content:center;gap:3px;max-width:calc(100% - 24px);min-height:48px;padding:6px 9px;border-radius:var(--stf-toolbar-radius);background:var(--stf-toolbar-background);box-shadow:0 4px 18px rgb(0 0 0 / 18%);transform:translateX(-50%);overflow-x:auto;scrollbar-width:thin}.stf-toolbar-bottom .stf-toolbar{bottom:8px}.stf-toolbar-top .stf-toolbar{top:8px}.stf-toolbar-full .stf-toolbar{right:0;left:0;width:100%;max-width:none;border-radius:0;transform:none}.stf-toolbar button,.stf-toolbar a{display:grid;flex:0 0 34px;height:34px;margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:var(--stf-toolbar-text);font:600 18px/1 inherit;text-decoration:none;cursor:pointer;place-items:center}.stf-toolbar button:hover,.stf-toolbar button:focus-visible,.stf-toolbar a:hover,.stf-toolbar a:focus-visible{outline:0;background:color-mix(in srgb,var(--stf-accent) 16%,transparent);color:var(--stf-accent)}.stf-toolbar button:disabled{opacity:.3;cursor:not-allowed}.stf-toolbar .stf-zoom-value{flex-basis:48px;font-size:11px}.stf-divider{flex:0 0 1px;height:24px;margin:0 4px;background:color-mix(in srgb,var(--stf-toolbar-text) 20%,transparent)}.stf-page-indicator{display:flex;align-items:center;gap:4px;white-space:nowrap}.stf-page-indicator input{box-sizing:border-box;width:42px;height:30px;margin:0;padding:2px 4px;border:1px solid color-mix(in srgb,var(--stf-toolbar-text) 28%,transparent);border-radius:5px;background:transparent;color:var(--stf-toolbar-text);text-align:center;font:inherit}.stf-page-indicator input::-webkit-inner-spin-button{display:none}.stf-page-indicator span{font-size:12px}.stf-edge{position:absolute;z-index:7;top:50%;display:grid;width:42px;height:64px;padding:0;border:0;border-radius:8px;background:rgb(255 255 255 / 55%);color:#28313b;font:300 42px/1 sans-serif;box-shadow:0 2px 10px rgb(0 0 0 / 10%);transform:translateY(-50%);cursor:pointer;place-items:center;backdrop-filter:blur(5px)}.stf-edge:hover,.stf-edge:focus-visible{background:var(--stf-toolbar-background);color:var(--stf-accent)}.stf-edge:disabled{opacity:.18}.stf-edge-prev{left:10px}.stf-edge-next{right:10px}.stf-panel{position:absolute;z-index:10;top:12px;bottom:12px;left:12px;width:min(310px,calc(100% - 24px));overflow:hidden;border-radius:10px;background:var(--stf-toolbar-background);color:var(--stf-toolbar-text);box-shadow:0 8px 35px rgb(0 0 0 / 30%)}.stf-panel[hidden]{display:none}.stf-panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid color-mix(in srgb,var(--stf-toolbar-text) 16%,transparent)}.stf-panel-head button{width:30px;height:30px;padding:0;border:0;border-radius:5px;background:transparent;color:inherit;font-size:22px;cursor:pointer}.stf-thumbnails{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;height:calc(100% - 55px);padding:12px;overflow:auto}.stf-thumbnail{position:relative;padding:6px;border:2px solid transparent;border-radius:6px;background:color-mix(in srgb,var(--stf-toolbar-text) 7%,transparent);color:inherit;cursor:pointer}.stf-thumbnail:hover,.stf-thumbnail.is-current{border-color:var(--stf-accent)}.stf-thumbnail canvas{display:block;width:100%;height:auto;background:#fff}.stf-thumbnail span{display:block;padding-top:5px;text-align:center;font-size:11px}.stf-search-form{display:flex;gap:6px;padding:12px}.stf-search-form input{min-width:0;flex:1;padding:7px;border:1px solid color-mix(in srgb,var(--stf-toolbar-text) 25%,transparent);border-radius:5px;background:transparent;color:inherit}.stf-search-form button,.stf-search-result{border:0;border-radius:5px;background:var(--stf-accent);color:#fff;cursor:pointer}.stf-search-form button{padding:6px 10px}.stf-search-results{height:calc(100% - 110px);padding:0 12px 12px;overflow:auto}.stf-search-result{display:block;width:100%;margin-bottom:7px;padding:9px;text-align:left}.stf-search-empty{color:color-mix(in srgb,var(--stf-toolbar-text) 65%,transparent)}.stf-viewer.is-dark{--stf-background:#20252b;--stf-toolbar-background:#30363d;--stf-toolbar-text:#f4f5f6}.stf-viewer:fullscreen{width:100vw;max-width:none;height:100vh;margin:0;border-radius:0}.stf-viewer.is-dragging .stf-book{cursor:grabbing}.stf-error{padding:1rem;border-left:4px solid #d63638;background:#fff}.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:760px){.stf-viewer{height:var(--stf-mobile-height);border-radius:min(var(--stf-viewer-radius),10px)}.stf-book-wrap{inset:20px 44px}.stf-toolbar{justify-content:flex-start}.stf-divider{display:none}.stf-edge{width:34px;height:52px;font-size:32px}.stf-edge-prev{left:5px}.stf-edge-next{right:5px}}
@media (prefers-reduced-motion:reduce){.stf-viewer *{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
.stf-book.stf-animation-slide.is-animating{animation:stf-slide var(--stf-duration) ease}.stf-book.stf-animation-fade.is-animating{animation:stf-fade var(--stf-duration) ease}
.stf-viewer.is-mobile{height:var(--stf-mobile-height)}.stf-viewer.is-rtl .stf-book{flex-direction:row-reverse}
.stf-book-wrap.is-zoomed{align-items:flex-start;justify-content:flex-start;cursor:grab}.stf-book-wrap.is-zoomed .stf-book{transform-origin:top left}.stf-book-wrap.is-panning{cursor:grabbing;user-select:none}.stf-book-wrap.is-panning canvas{pointer-events:none}
.stf-turn-page{overflow:visible;border:0;background:transparent;box-shadow:none;backface-visibility:visible}.stf-turn-face{position:absolute;inset:0;overflow:hidden;border:var(--stf-page-border-width) solid var(--stf-page-border);border-radius:var(--stf-page-radius);background:var(--stf-page);box-shadow:0 12px 35px rgb(0 0 0 / var(--stf-shadow-alpha));backface-visibility:hidden;transform-style:preserve-3d}.stf-turn-back{transform:rotateY(180deg)}.stf-toolbar button.is-active{background:color-mix(in srgb,var(--stf-accent) 18%,transparent);color:var(--stf-accent)}.stf-viewer.is-dark{--stf-background:#20252b!important;--stf-toolbar-background:#30363d!important;--stf-toolbar-text:#f4f5f6!important}.stf-viewer.is-dark .stf-edge{background:rgb(48 54 61 / 85%);color:#f4f5f6}
.stf-viewer.is-page-turning .stf-book-wrap{overflow:hidden}