:root{color-scheme:light;--paper:#fff;--ink:#24332e;--accent:#38574d;--page-width:430px;--page-height:640px}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;overflow:hidden;font-family:system-ui,-apple-system,"PingFang TC",sans-serif;color:var(--ink);background:linear-gradient(145deg,#f8faf7,#dfe8e3)}button{font:inherit}
.app{width:min(100%,1100px);height:100dvh;margin:auto;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px}
.topbar,.toolbar{width:min(100%,620px);margin:auto;border:1px solid #cbd6d0;background:#ffffffd9;box-shadow:0 10px 28px #2940361a;backdrop-filter:blur(12px)}.topbar{min-height:44px;padding:7px 12px;border-radius:999px;display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{margin:0;overflow:hidden;font-weight:750;white-space:nowrap;text-overflow:ellipsis}.page-counter{min-width:66px;padding:6px 10px;border-radius:999px;color:white;background:var(--accent);font-size:.82rem;font-weight:800;text-align:center}
.stage{position:relative;min-height:0;display:grid;place-items:center}.book-frame{position:relative;width:var(--page-width);height:var(--page-height);overflow:hidden;border:1px solid #fff;border-radius:16px;background:var(--paper);box-shadow:0 22px 54px #1f352b3d;touch-action:none;user-select:none}.book-frame.zoomed{cursor:grab}.book-frame.panning{cursor:grabbing}.page-track{height:100%;display:flex;transition:transform .42s cubic-bezier(.22,.88,.26,1);will-change:transform}.page{position:relative;min-width:100%;height:100%;overflow:hidden;background:#f7f7f7}.zoom-layer{position:absolute;inset:0;transform-origin:0 0;will-change:transform}.zoom-layer.animating{transition:transform .22s ease}.page img{position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.hotspot-layer{position:absolute;inset:0;z-index:2;pointer-events:none}.hotspot{position:absolute;border:0;border-radius:8px;background:#fff0;cursor:pointer;pointer-events:auto}.hotspot:focus-visible{outline:2px solid #d7ff62;background:#d7ff6233}.zoom-controls{position:absolute;z-index:8;top:8px;right:8px;min-height:34px;padding:3px;border:1px solid #cbd6d0;border-radius:10px;display:flex;align-items:center;gap:2px;color:var(--accent);background:#fffffff0;box-shadow:0 8px 22px #1c30282b;backdrop-filter:blur(10px);cursor:default}.zoom-controls button{width:29px;height:28px;border:0;border-radius:7px;display:grid;place-items:center;color:var(--accent);background:#eef3f0;font-weight:850;line-height:1;cursor:pointer}.zoom-controls button:hover:not(:disabled){color:#fff;background:var(--accent)}.zoom-controls button:disabled{opacity:.32;cursor:not-allowed}.zoom-controls output{min-width:47px;padding:0 3px;font:800 .68rem ui-monospace,monospace;text-align:center}.zoom-controls .zoom-reset{margin-left:2px;color:#fff;background:var(--accent)}
.side-arrow{position:absolute;z-index:4;top:50%;width:46px;height:46px;border:1px solid #cbd6d0;border-radius:50%;color:var(--accent);background:#ffffffe8;font-size:2rem;transform:translateY(-50%)}.side-arrow.prev{left:clamp(8px,5vw,80px)}.side-arrow.next{right:clamp(8px,5vw,80px)}button:disabled{opacity:.32}.toolbar{padding:5px;border-radius:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.toolbar button{min-height:40px;border:0;border-radius:11px;color:var(--ink);background:transparent;font-weight:750}.toolbar .primary{color:white;background:var(--accent)}
@media(max-width:720px){.app{padding-left:4px;padding-right:4px;grid-template-rows:auto auto auto;align-content:start;gap:4px}.side-arrow,.zoom-controls{display:none}.topbar,.toolbar{width:100%}.book-frame{border-radius:10px}.toolbar button{font-size:.82rem}}
@media(prefers-reduced-motion:reduce){.page-track,.zoom-layer{transition:none!important}}