:root{--bg-color:#fff;--text-primary:#000;--text-secondary:#000000b3;--border:#ffffff1f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-color);width:100%;height:100dvh;color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;touch-action:manipulation;font-family:sans-serif;overflow:hidden}button{background:0 0;border:none}.flipbook-app{background:var(--bg-color);width:100vw;height:100dvh;position:relative;overflow:hidden}.swiper.flipbook-swiper{background-color:var(--bg-color);width:100%;height:100%}.swiper-slide{background-color:var(--bg-color);justify-content:center;align-items:center;width:100%;height:100%;padding:clamp(.75rem,2vw,1.5rem);display:flex;position:relative;overflow:hidden}.video-container{border-radius:12px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.flipbook-video{object-fit:contain;background:#e7e7e7;border-radius:8px;width:100%;height:100%;display:block}.flipbook-progress{bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));right:calc(1.25rem + env(safe-area-inset-right,0px));z-index:20;border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);letter-spacing:.05em;color:var(--text-primary);background:#fff;border-radius:9999px;padding:.5rem .875rem;font-size:.8125rem;font-weight:600;position:absolute;box-shadow:0 4px 20px #00000026}.flipbook-hint{top:calc(1.25rem + env(safe-area-inset-top,0px));z-index:30;border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);pointer-events:auto;background:#fff;border-radius:9999px;align-items:center;gap:.75rem;padding:.5rem .875rem .5rem 1rem;transition:opacity .5s,transform .5s,visibility .5s;display:flex;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #00000026}.flipbook-hint.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-10px)}.hint-content{align-items:center;gap:.625rem;display:flex}.hint-keys{gap:.25rem;display:flex}.hint-keys kbd{color:#111;background:#f0f0f0;border:1px solid #d1d1d1;border-radius:4px;justify-content:center;align-items:center;min-width:22px;height:22px;padding:0 .35rem;font-family:inherit;font-size:.75rem;font-weight:700;display:inline-flex;box-shadow:0 1px 2px #0000001a}.hint-text{color:var(--text-primary);white-space:nowrap;font-size:.8125rem;font-weight:500}.hint-close{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;margin-left:.25rem;padding:0 .125rem;font-size:1.125rem;line-height:1;transition:color .2s}.hint-close:hover{color:var(--text-primary)}.flipbook-loader{z-index:50;background:var(--bg-color);flex-direction:column;justify-content:center;align-items:center;gap:1rem;transition:opacity .4s,visibility .4s;display:flex;position:absolute;inset:0}.flipbook-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.spinner{border:3px solid #00000026;border-top-color:var(--text-primary);border-radius:50%;width:44px;height:44px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loader-text{color:var(--text-secondary);letter-spacing:.03em;font-size:.875rem;font-weight:500}.video-fallback{text-align:center;z-index:5;background:#c8c8c8;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:2rem;display:flex;position:absolute;inset:0}.video-fallback-icon{color:#ef4444;opacity:.9;width:48px;height:48px}.video-fallback-title{color:var(--text-primary);font-size:1.125rem;font-weight:600}.video-fallback-msg{color:var(--text-secondary);max-width:320px;font-size:.875rem}.retry-btn{border:1px solid var(--border);color:var(--text-primary);cursor:pointer;background:#0000001f;border-radius:8px;margin-top:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;transition:background .2s}.retry-btn:hover,.retry-btn:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px;background:#00000040}.flipbook-empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1rem;height:100%;padding:2rem;display:flex}.flipbook-empty h2{font-size:1.5rem;font-weight:600}.flipbook-empty p{color:var(--text-secondary)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}.flipbook-loader{transition:none}}