.tfb-viewer{position:relative;width:100%;height:min(var(--tfb-height),82vh);min-height:420px;background:var(--tfb-bg);border-radius:14px;overflow:hidden;color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.18)}.tfb-stage{position:absolute;inset:0 0 58px;display:flex;align-items:center;justify-content:center;overflow:auto;touch-action:pan-y}.tfb-book{transition:transform .2s ease;transform-origin:center center}.tfb-page{background:#fff;overflow:hidden}.tfb-page canvas,.tfb-page img{display:block;width:100%;height:100%;object-fit:contain}.tfb-toolbar{position:absolute;inset:auto 0 0;height:58px;display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(0,0,0,.42);backdrop-filter:blur(12px);z-index:10}.tfb-toolbar button{appearance:none;border:0;border-radius:50%;width:38px;height:38px;background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;cursor:pointer}.tfb-toolbar button:hover,.tfb-toolbar button:focus-visible{background:rgba(255,255,255,.24);outline:2px solid rgba(255,255,255,.5)}.tfb-counter{min-width:68px;text-align:center;font:600 13px/1 system-ui,sans-serif}.tfb-separator{width:1px;height:24px;background:rgba(255,255,255,.22);margin:0 4px}.tfb-loading{position:absolute;display:flex;align-items:center;gap:10px;font:500 14px/1.4 system-ui,sans-serif}.tfb-loading span{width:19px;height:19px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:tfb-spin .8s linear infinite}.tfb-error{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);max-width:520px;padding:18px;background:#7f1d1d;border-radius:8px;font:500 14px/1.5 system-ui,sans-serif;z-index:20}@keyframes tfb-spin{to{transform:rotate(360deg)}}.tfb-viewer:fullscreen{width:100vw;height:100vh;border-radius:0}.tfb-viewer:fullscreen .tfb-stage{inset:0 0 64px}.tfb-viewer:fullscreen .tfb-toolbar{height:64px}@media(max-width:600px){.tfb-viewer{height:min(var(--tfb-height),75vh);min-height:440px;border-radius:8px}.tfb-toolbar{gap:4px}.tfb-toolbar button{width:36px;height:36px}.tfb-stage{touch-action:pan-y}}