:root{--bg-primary:#121011;--bg-secondary:#1a1718;--bg-card:#241f21c7;--border-subtle:#fff8f514;--border-active:#fff8f538;--text-primary:#f7f4f2;--text-muted:#a39c9a;--accent:#f7f4f2;--accent-glow:#d8d0c833;--shadow-book:0 25px 65px -15px #000000d9, 0 0 45px #120e0fb3}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{background-color:var(--bg-primary);width:100%;height:100dvh;color:var(--text-primary);-webkit-user-select:none;user-select:none;background:radial-gradient(at 50% 45%,#231f20 0%,#151314 65%,#0c0b0c 100%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;overflow:hidden}#app{flex-direction:column;width:100%;height:100dvh;display:flex;position:relative;overflow:hidden}.top-header{z-index:50;pointer-events:none;justify-content:space-between;align-items:center;padding:16px 24px;display:flex;position:absolute;top:0;left:0;right:0}.brand{pointer-events:auto;flex-direction:column;display:flex}.brand-title{letter-spacing:.08em;text-transform:uppercase;color:#fff;font-size:.95rem;font-weight:600}.brand-sub{color:var(--text-muted);letter-spacing:.04em;margin-top:2px;font-size:.75rem}.header-badges{pointer-events:auto;align-items:center;gap:12px;display:flex}.hint-badge{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-subtle);color:var(--text-muted);border-radius:20px;align-items:center;gap:6px;padding:5px 12px;font-size:.72rem;transition:opacity .4s;display:inline-flex}.hint-badge.fade-out{opacity:0;pointer-events:none}.stage-container{flex:1;justify-content:center;align-items:center;width:100%;height:100%;padding:60px 20px 80px;display:flex;position:relative}.book-wrapper{transform-origin:50%;will-change:transform;justify-content:center;align-items:center;width:100%;max-width:min(141.33dvh - 226.128px,100vw - 140px);height:auto;margin:0 auto;transition:transform .25s cubic-bezier(.16,1,.3,1);display:flex;position:relative}.book-wrapper.is-zoomed{cursor:grab;z-index:45}.book-wrapper.is-zoomed:active{cursor:grabbing}.book-wrapper[data-orientation=portrait]{max-width:min(70.67dvh - 98.938px,100vw - 24px)}#flipbook{box-shadow:var(--shadow-book);border-radius:3px;transition:transform .25s;overflow:visible!important}.stf__parent{touch-action:pan-y pinch-zoom;margin:0 auto}.stf__block{touch-action:pan-y pinch-zoom}.page-card{background-color:#fcfaf8;width:100%;height:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 1px #0000000f}.page-img{object-fit:fill;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none;width:100%;height:100%;image-rendering:-webkit-optimize-contrast;image-rendering:high-quality;display:block}.page-card:after{content:"";pointer-events:none;z-index:10;position:absolute;top:0;bottom:0}.stf__item.--left:not([data-density=hard]):not(.--hard) .page-card:after{background:linear-gradient(90deg,#0000 0%,#00000004 35%,#0000000f 65%,#00000029 88%,#00000052 97%,#0000007a 100%);width:75px;max-width:14%;right:0}.stf__item.--right:not([data-density=hard]):not(.--hard) .page-card:after{background:linear-gradient(270deg,#0000 0%,#00000004 35%,#0000000f 65%,#00000029 88%,#00000052 97%,#0000007a 100%);width:75px;max-width:14%;left:0}.stf__item.--left:not([data-density=hard]):not(.--hard) .page-card{box-shadow:inset 1px 0 2px #0000000a,inset 0 1px 1px #00000005,inset 0 -1px 1px #00000005}.stf__item.--right:not([data-density=hard]):not(.--hard) .page-card{box-shadow:inset -1px 0 2px #0000000a,inset 0 1px 1px #00000005,inset 0 -1px 1px #00000005}.book-wrapper[data-orientation=portrait] .page-card:after{opacity:.65;width:35px;max-width:9%}.stf__canvas{filter:drop-shadow(0 15px 35px #00000073)}.nav-arrow{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-subtle);color:#fff;cursor:pointer;z-index:40;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 4px 20px #0000004d}.nav-arrow:hover:not(:disabled){border-color:var(--border-active);background:#342d30f2;transform:translateY(-50%)scale(1.08)}.nav-arrow:active:not(:disabled){transform:translateY(-50%)scale(.95)}.nav-arrow:disabled{opacity:.2;cursor:not-allowed;pointer-events:none}.nav-arrow.prev{left:20px}.nav-arrow.next{right:20px}.nav-arrow svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.loading-overlay{background:var(--bg-primary);z-index:100;flex-direction:column;justify-content:center;align-items:center;gap:16px;transition:opacity .5s,visibility .5s;display:flex;position:fixed;inset:0}.loading-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.spinner{border:3px solid #ffffff1a;border-top-color:#fff;border-radius:50%;width:42px;height:42px;animation:.8s linear infinite spin}.loading-text{letter-spacing:.05em;color:var(--text-muted);font-size:.85rem}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=768px){.stage-container{padding:55px 12px 75px}.book-wrapper{max-width:min(70.67dvh - 98.938px,100vw - 24px)}.nav-arrow{display:none}.top-header{padding:12px 16px}.brand-title{font-size:.85rem}.hint-badge{display:none}}.bottom-bar{z-index:50;background:var(--bg-card);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-subtle);border-radius:36px;align-items:center;gap:12px;max-width:92vw;padding:6px 14px;transition:all .25s;display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #00000073}.bottom-bar:hover{border-color:var(--border-active);box-shadow:0 14px 40px #0009}.ctrl-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;outline:none;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;text-decoration:none;transition:all .2s;display:flex}.ctrl-btn:hover:not(:disabled){color:#fff;background:#ffffff1a}.ctrl-btn:active:not(:disabled){transform:scale(.92)}.ctrl-btn:disabled{opacity:.25;cursor:not-allowed}.ctrl-btn svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.page-tracker{align-items:center;gap:10px;padding:0 6px;display:flex}.page-label{letter-spacing:.04em;color:var(--text-primary);text-align:center;white-space:nowrap;min-width:95px;font-size:.78rem;font-weight:500}.page-slider{appearance:none;cursor:pointer;background:#ffffff26;border-radius:2px;outline:none;width:110px;height:4px;transition:background .2s}.page-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .15s,background .15s;box-shadow:0 2px 6px #00000080}.page-slider::-webkit-slider-thumb:hover{transform:scale(1.25)}.page-slider::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:14px;height:14px;box-shadow:0 2px 6px #00000080}.bar-divider{background:var(--border-subtle);width:1px;height:20px;margin:0 2px}.modal{z-index:120;-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;background:#000000b3;justify-content:center;align-items:center;transition:opacity .3s,visibility .3s;display:flex;position:fixed;inset:0}.modal.active{opacity:1;visibility:visible}.modal-content{border:1px solid var(--border-active);background:#1c181a;border-radius:16px;width:90%;max-width:440px;padding:28px;transition:transform .3s cubic-bezier(.16,1,.3,1);position:relative;transform:translateY(15px);box-shadow:0 20px 50px #0009}.modal.active .modal-content{transform:translateY(0)}.modal-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.modal-title{color:#fff;font-size:1.1rem;font-weight:600}.close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:4px}.close-btn:hover{color:#fff}.shortcuts-list{color:var(--text-muted);flex-direction:column;gap:14px;font-size:.85rem;display:flex}.shortcut-item{justify-content:space-between;align-items:center;display:flex}.kbd-badge{color:#fff;background:#ffffff1a;border:1px solid #ffffff26;border-radius:6px;padding:3px 8px;font-family:monospace;font-size:.8rem}@media (width<=600px){.bottom-bar{gap:6px;padding:4px 10px;bottom:12px}.page-slider{display:none}.page-label{min-width:75px;font-size:.74rem}.ctrl-btn{width:32px;height:32px}.ctrl-btn svg{width:16px;height:16px}}