body{margin:0;padding:0;overflow:hidden;background-color:#222;font-family:sans-serif}#container{position:relative;width:100vw;height:100vh;height:100dvh;display:flex;justify-content:center;align-items:center}#viewer-canvas{background-color:#000;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;image-rendering:auto;image-rendering:smooth}.nav-button{position:absolute;top:0;bottom:0;width:80px;background-color:rgba(255,255,255,.05);border:none;cursor:pointer;color:rgba(255,255,255,.5);font-size:48px;transition:background-color .2s;z-index:10}.nav-button:hover{background-color:rgba(255,255,255,.15);color:rgba(255,255,255,.8)}.nav-button:active{background-color:rgba(255,255,255,.25)}#prev-button{right:0}#next-button{left:0}#loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:24px}#nav-bar{position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0));display:flex;justify-content:center;align-items:center;gap:20px;z-index:20;transition:opacity .3s}#nav-bar.hide{opacity:0;pointer-events:none}#nav-bar.show{opacity:1;pointer-events:auto}.nav-bar-button{padding:10px 20px;background-color:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);border-radius:5px;color:#fff;font-size:14px;cursor:pointer;transition:background-color .2s,border-color .2s}.nav-bar-button:hover{background-color:rgba(255,255,255,.3);border-color:rgba(255,255,255,.5)}.nav-bar-button:active{background-color:rgba(255,255,255,.4)}#seamless-container{display:none;position:relative;width:100vw;height:100vh;height:100dvh;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;touch-action:none}#seamless-container.active{display:block}#seamless-container.zoomed{overflow-y:auto}#seamless-scroll{display:flex;align-items:center;height:100%;width:fit-content}.page-canvas{height:100vh;height:100dvh;flex-shrink:0;background-color:#111;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;image-rendering:auto;image-rendering:smooth}#vertical-container{display:none;position:relative;width:100vw;height:100vh;height:100dvh;overflow-x:hidden;overflow-y:auto;scroll-behavior:smooth;touch-action:none}#vertical-container.active{display:block}#vertical-container.zoomed{overflow-x:auto}#vertical-scroll{display:flex;flex-direction:column;align-items:center;width:100%;height:fit-content}.vertical-page-canvas{width:100vw;flex-shrink:0;background-color:#111;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;image-rendering:auto;image-rendering:smooth}#normal-mode-content{position:relative;width:100%;height:100%}#container.seamless-mode #normal-mode-content{display:none}#splash-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;background-color:#fff;display:flex;justify-content:center;align-items:center;z-index:9999;transition:opacity .8s ease-out}#splash-screen.fade-out{opacity:0;pointer-events:none}#splash-logo{max-width:80%;max-height:80%;object-fit:contain;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}#submenu-open-button{position:fixed;top:20px;right:20px;width:48px;height:48px;background:0 0;border:none;cursor:pointer;z-index:30;display:none;padding:0;opacity:0;transition:opacity .3s;pointer-events:none}#submenu-open-button.visible{display:block}#submenu-open-button.show{opacity:.8;pointer-events:auto}#submenu-open-button:hover{opacity:1}#submenu-open-button img{width:100%;height:100%;object-fit:contain}#submenu-popup{position:fixed;top:70px;right:20px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:15px;z-index:25;display:none;box-shadow:0 4px 12px rgba(0,0,0,.15)}#submenu-popup.visible{display:block}.submenu-section{margin-bottom:15px}.submenu-section:last-child{margin-bottom:0}.submenu-section-title{color:#464646;font-size:12px;margin-bottom:8px;padding-left:2px;font-weight:500}.submenu-button-group{display:flex;gap:8px}.submenu-button{flex:1;min-width:0;padding:10px 12px;background-color:#f5f5f5;border:1px solid #d0d0d0;border-radius:5px;color:#464646;font-size:14px;cursor:pointer;transition:all .2s;text-align:center;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px}.submenu-button-group .submenu-button{flex:1 1 0}.submenu-button:hover{background-color:#e8e8e8;border-color:#b0b0b0}.submenu-button:active{background-color:#e0e0e0}.submenu-button.active{background-color:#e3f2fd;border-color:#396bd6;color:#396bd6;font-weight:500}.submenu-button img{width:20px;height:20px;object-fit:contain}.submenu-button .icon-off{display:inline-block}.submenu-button .icon-on{display:none}.submenu-button.active .icon-off{display:none}.submenu-button.active .icon-on{display:inline-block}#autoplay-button-fixed{position:fixed;bottom:30px;left:30px;padding:12px 24px;background-color:#333;border:2px solid #333;border-radius:25px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;z-index:20;display:none;opacity:0;transition:opacity .3s,background-color .2s,border-color .2s,box-shadow .2s,transform .1s;box-shadow:0 2px 8px rgba(0,0,0,.3);align-items:center;gap:8px;pointer-events:none}#autoplay-button-fixed.visible{display:flex}#autoplay-button-fixed.show{opacity:1;pointer-events:auto}#autoplay-button-fixed:hover{background-color:#000;border-color:#000;box-shadow:0 4px 12px rgba(0,0,0,.4)}#autoplay-button-fixed:active{transform:scale(.98)}#autoplay-button-fixed img{width:20px;height:20px;object-fit:contain}#autoplay-button-fixed .play-start{display:inline-block}#autoplay-button-fixed .play-stop{display:none}#autoplay-button-fixed.playing .play-start{display:none}#autoplay-button-fixed.playing .play-stop{display:inline-block}#mode-switch-container{position:fixed;bottom:30px;right:30px;background:#fff;border-radius:25px;padding:8px;display:flex;gap:4px;z-index:20;box-shadow:0 2px 8px rgba(0,0,0,.15);opacity:0;transition:opacity .3s;pointer-events:none}#mode-switch-container.show{opacity:1;pointer-events:auto}.mode-switch-button{background:0 0;border:none;padding:0;cursor:pointer;transition:opacity .2s,transform .1s}.mode-switch-button img{display:block;height:40px;width:auto}.mode-switch-button:hover:not(.inactive){opacity:.8}.mode-switch-button:active:not(.inactive){transform:scale(.95)}.mode-switch-button.inactive{cursor:default;opacity:.6}#fullscreen-button-fixed{position:fixed;bottom:30px;right:30px;background:0 0;border:none;padding:0;cursor:pointer;z-index:20;opacity:0;transition:opacity .3s,transform .1s;pointer-events:none}#fullscreen-button-fixed.show{opacity:1;pointer-events:auto}#fullscreen-button-fixed:hover{opacity:.8}#fullscreen-button-fixed:active{transform:scale(.95)}#fullscreen-button-fixed img{display:block;height:40px;width:auto}#mode-switch-container{right:150px}@media screen and (max-width:768px){#submenu-open-button{top:2vw;right:2vw;width:10vw;height:10vw;max-width:50px;max-height:50px}#submenu-popup{top:13vw;right:2vw;padding:3vw;max-width:90vw}.submenu-section-title{font-size:2.8vw}.submenu-button{padding:2vw 2.5vw;font-size:3vw}.submenu-button img{width:4.5vw;height:4.5vw;max-width:22px;max-height:22px}#autoplay-button-fixed{bottom:3vw;left:3vw;padding:2vw 4vw;font-size:3vw;border-radius:5vw}#autoplay-button-fixed img{width:4vw;height:4vw;max-width:20px;max-height:20px}#mode-switch-container{bottom:3vw;right:3vw;padding:1.5vw;border-radius:5vw;gap:1vw}.mode-switch-button img{height:8vw;max-height:40px}#fullscreen-button-fixed{bottom:3vw;right:3vw}#fullscreen-button-fixed img{height:8vw;max-height:40px}}