.visual-book{color:#10233f;background:#fff;flex-direction:column;gap:10px;max-width:1100px;min-height:calc(100svh - 76px);margin:0 auto;padding:12px;display:flex}.visual-book-fullscreen{z-index:1000;max-width:none;height:100svh;min-height:0;position:fixed;inset:0;overflow:auto}.visual-book-top{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;display:grid}.visual-book-top>div{text-align:center;gap:2px;min-width:0;display:grid}.visual-book-top b{text-overflow:ellipsis;white-space:nowrap;font-size:15px;overflow:hidden}.visual-book-top small{color:#465a70;font-size:12px}.visual-book-top button{min-width:46px;min-height:46px;padding:8px}.visual-book-frame{text-align:center;touch-action:pan-y;background:#eef3f8;border:1px solid #d8e2ec;border-radius:16px;flex:1;justify-content:center;align-items:center;min-height:calc(100svh - 240px);display:flex;position:relative;overflow:hidden}.visual-book-frame canvas{background:#fff;max-width:100%;max-height:calc(100svh - 190px);box-shadow:0 6px 22px #10233f28}.visual-book-page-image{object-fit:contain;background:#fff;width:auto;max-width:100%;height:auto;max-height:calc(100svh - 190px);display:block;box-shadow:0 6px 22px #10233f28}.visual-book-frame>div{padding:20px}.visual-book-frame>div a{color:#075cb5;margin-top:10px;font-weight:700;display:inline-block}.visual-book-rendering{color:#10233f;background:#fff;border-radius:8px;padding:6px 10px;font-size:12px;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.visual-book-bottom{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;display:grid}.visual-book-bottom button{gap:4px;min-width:0;min-height:48px;padding:8px}.visual-book-bottom button:last-child{justify-self:end}.visual-book-bottom>div{justify-items:center;gap:5px;min-width:74px;font-size:14px;display:grid}.visual-book-progress{background:#dbe4ec;border-radius:8px;width:74px;height:5px;display:block;overflow:hidden}.visual-book-progress i{background:#087b6c;height:100%;display:block}.visual-book-backup{color:#37577a;align-self:center;padding:5px;font-size:12px}@media (max-width:430px){.visual-book{gap:8px;padding:8px}.visual-book-top b{font-size:13px}.visual-book-bottom button{font-size:12px}.visual-book-bottom svg{width:15px}.visual-book-frame{min-height:calc(100svh - 215px)}}
