body{margin:0}:root{--book-shadow:0 8px 40px #0000004d, 0 2px 12px #00000026;--page-bg:#fff;--spine-color:#00000014;--bg-color:#1a1a2e;--bg-gradient:linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);--controls-bg:#ffffff14;--controls-hover:#ffffff26;--controls-text:#ffffffd9;--controls-disabled:#fff3;--indicator-text:#ffffff80;--indicator-bar-bg:#ffffff1a;--indicator-fill:#ffffff4d}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.flipbook-wrapper{background:var(--bg-gradient);-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100dvh;display:flex;position:relative;overflow:hidden}.flipbook-stage{perspective:2000px;justify-content:center;align-items:center;width:100%;height:100%;padding:16px;display:flex;position:absolute;inset:0}.book{cursor:pointer;box-shadow:var(--book-shadow);background:var(--page-bg);border-radius:4px;position:relative}.book--desktop{aspect-ratio:946/480;width:min(94vw,1200px);max-height:calc(100dvh - 32px)}.book--mobile{aspect-ratio:473/480;width:min(94vw,480px);max-height:calc(100dvh - 32px)}.book__pages{z-index:1;border-radius:4px;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.book-page{background:var(--page-bg);flex:1;position:relative;overflow:hidden}.book-page img{object-fit:contain;width:100%;height:100%;display:block}.book-page--empty{background:#f5f5f0}.book-page--left{border-right:1px solid #0000000f}.book__spine{background:linear-gradient(90deg, transparent 0%, var(--spine-color) 30%, #0000001f 50%, var(--spine-color) 70%, transparent 100%);z-index:10;pointer-events:none;width:4px;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%)}.book--mobile .book__spine{display:none}.book__flip-container{z-index:20;pointer-events:none;perspective:2000px;border-radius:4px;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.flip-animated-page{height:100%;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform;position:absolute;top:0}.flip-animated-page__face{backface-visibility:hidden;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.flip-animated-page__face img{object-fit:contain;width:100%;height:100%;display:block}.flip-animated-page__front{z-index:2}.flip-animated-page__back{z-index:1;transform:rotateY(180deg)}.flip-animated-page__fold-shadow{pointer-events:none;z-index:3;backface-visibility:hidden;background:linear-gradient(90deg,#0000004d 0%,#0000001a 20%,#0000 50%,#0000000d 80%,#00000026 100%);width:100%;height:100%;position:absolute;top:0;left:0}.flip-animated-page__cast-shadow{pointer-events:none;z-index:15;background:linear-gradient(90deg,#0006 0%,#0000001a 40%,#0000 100%);border-radius:2px;height:100%;position:absolute;top:0}.controls{z-index:100;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#00000073;border:1px solid #ffffff14;border-radius:48px;align-items:center;gap:8px;padding:10px 20px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.controls__btn{width:44px;height:44px;color:var(--controls-text);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;transition:background-color .2s,color .2s,transform .15s;display:flex}.controls__btn:hover:not(:disabled){background:var(--controls-hover);transform:scale(1.08)}.controls__btn:active:not(:disabled){transform:scale(.95)}.controls__btn:disabled{color:var(--controls-disabled);cursor:not-allowed}.page-indicator{z-index:100;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;bottom:82px;left:50%;transform:translate(-50%)}.page-indicator__text{letter-spacing:.5px;color:var(--indicator-text);font-size:12px;font-weight:500}.page-indicator__bar{background:var(--indicator-bar-bg);border-radius:2px;width:120px;height:3px;overflow:hidden}.page-indicator__fill{background:var(--indicator-fill);border-radius:2px;height:100%;transition:width .4s}@media (width<=767px){.flipbook-stage{padding:8px}.controls{gap:4px;padding:8px 16px;bottom:16px}.controls__btn{width:40px;height:40px}.page-indicator{bottom:72px}}@media (width<=480px){.book--mobile{width:92vw}}.loading-page{background:#f5f5f0;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.loading-page__spinner{border:3px solid #0000001a;border-top-color:#0006;border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.overlay-actions{z-index:100;flex-direction:column;gap:8px;display:flex;position:absolute;bottom:24px;left:24px}.overlay-action-btn{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);width:44px;height:44px;color:var(--controls-text);cursor:pointer;background:#00000073;border:1px solid #ffffff14;border-radius:50%;justify-content:center;align-items:center;transition:background-color .2s,transform .15s;display:flex}.overlay-action-btn:hover{background:#0009;transform:scale(1.08)}.overlay-action-btn:active{transform:scale(.95)}.overlay-action-btn--active{background:#ffffff2e;border-color:#ffffff40}.autoplay-countdown{z-index:100;width:40px;height:40px;color:var(--controls-text);justify-content:center;align-items:center;animation:.25s autoplayFadeIn;display:flex;position:absolute;top:20px;right:20px}.autoplay-countdown__ring{position:absolute;top:0;left:0;transform:rotate(-90deg)}.autoplay-countdown__text{font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:13px;font-weight:600;position:relative}@keyframes autoplayFadeIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.zoom-toolbar{z-index:200;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0000008c;border:1px solid #ffffff14;border-radius:14px;align-items:center;gap:12px;padding:8px 16px;display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%)}.zoom-toolbar__row{align-items:center;gap:6px;display:flex}.zoom-toolbar__level{color:var(--controls-text);text-align:center;letter-spacing:.3px;font-variant-numeric:tabular-nums;min-width:40px;font-size:12px;font-weight:600}.zoom-toolbar__separator{background:#ffffff1f;width:1px;height:28px}.zoom-toolbar__btn{width:32px;height:32px;color:var(--controls-text);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:background-color .15s,transform .1s;display:flex}.zoom-toolbar__btn:hover:not(:disabled){background:#ffffff1f}.zoom-toolbar__btn:active:not(:disabled){transform:scale(.92)}.zoom-toolbar__btn:disabled{color:var(--controls-disabled);cursor:not-allowed}.zoom-toolbar__pan-grid{flex-direction:column;align-items:center;gap:1px;display:flex}.zoom-toolbar__pan-mid{align-items:center;gap:1px;display:flex}.zoom-toolbar__btn--pan{border-radius:6px;width:28px;height:28px}.zoom-toolbar__btn--reset{background:#ffffff0f}.zoom-toolbar__btn--reset:hover{background:#ffffff2e}.copy-toast{z-index:400;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#ffffffeb;pointer-events:none;background:#000000bf;border:1px solid #ffffff1a;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:500;animation:.25s toastIn,.3s 1.7s forwards toastOut;position:absolute;bottom:80px;left:24px}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}.thumb-overlay{z-index:300;background:#00000080;justify-content:center;align-items:flex-end;animation:.3s thumbOverlayIn;display:flex;position:absolute;inset:0}@keyframes thumbOverlayIn{0%{opacity:0}to{opacity:1}}.thumb-panel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#000000a6;border:1px solid #ffffff14;border-radius:16px;align-items:center;gap:8px;width:100%;max-width:960px;margin-bottom:100px;margin-left:16px;margin-right:16px;padding:16px 48px;animation:.35s cubic-bezier(.16,1,.3,1) thumbPanelSlideUp;display:flex;position:relative}@keyframes thumbPanelSlideUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.thumb-strip{scroll-behavior:smooth;cursor:grab;-ms-overflow-style:none;scrollbar-width:none;flex:1;gap:10px;padding:8px 4px;display:flex;overflow:auto hidden}.thumb-strip::-webkit-scrollbar{display:none}.thumb-arrow{width:32px;height:32px;color:var(--controls-text);cursor:pointer;background:#ffffff14;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:background-color .15s,transform .1s;display:flex}.thumb-arrow:hover{background:#ffffff2e;transform:scale(1.1)}.thumb-arrow:active{transform:scale(.92)}.thumb-item{aspect-ratio:473/480;cursor:pointer;background:#222;border:2px solid #0000;border-radius:6px;flex-shrink:0;width:80px;padding:0;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative;overflow:hidden}.thumb-item:hover{border-color:#ffffff59;transform:scale(1.05);box-shadow:0 0 12px #ffffff1a}.thumb-item--active{border-color:#fffc;box-shadow:0 0 16px #ffffff26}.thumb-item img{object-fit:cover;pointer-events:none;width:100%;height:100%;display:block}.thumb-item__label{color:#ffffffd9;text-shadow:0 1px 3px #000c;pointer-events:none;font-size:10px;font-weight:600;position:absolute;bottom:2px;right:4px}@media (width<=767px){.overlay-actions{gap:6px;bottom:16px;left:16px}.overlay-action-btn{width:40px;height:40px}.zoom-toolbar{border-radius:12px;gap:8px;padding:6px 12px;top:12px}.thumb-panel{border-radius:12px;margin-bottom:80px;padding:12px 40px}.thumb-item{width:60px}.thumb-strip{gap:8px}}