*{box-sizing:border-box}html,body{background:#000;width:100%;min-height:100%;margin:0;padding:0}body{font-family:Arial,Helvetica,sans-serif;overflow:hidden}button{font:inherit}.viewer{color:#fff;background:#000;width:100%;height:100dvh;position:fixed;inset:0;overflow:hidden}.topbar{z-index:50;border-bottom:1px solid #ffffff1f;justify-content:space-between;align-items:center;height:82px;padding:14px 28px;display:flex;position:absolute;top:0;left:0;right:0}.album-mini{background:#111;width:66px;height:66px;overflow:hidden}.album-mini img,.mini-placeholder{object-fit:cover;width:100%;height:100%}.mini-placeholder{place-items:center;font-size:25px;display:grid}.top-actions{align-items:center;gap:22px;display:flex}.icon-button{color:#fff;cursor:pointer;background:0 0;border:0;border-radius:50%;width:48px;height:48px;font-size:38px;line-height:1}.info-button{border:2px solid #fff;font-family:Georgia,serif;font-size:30px}.portrait-screen{flex-direction:column;justify-content:center;align-items:center;padding:22px 20px 75px;display:flex;position:absolute;inset:82px 0 0;overflow-y:auto}.rotate-card{color:#1e293b;text-align:center;background:linear-gradient(#fff 0%,#f8f9fc 100%);border-radius:30px;width:min(650px,92vw);padding:52px 42px 35px;position:relative;overflow:hidden;box-shadow:0 30px 80px #0000008c,0 0 80px #7e3dff1f}.gradient-line{background:linear-gradient(90deg,#4f46e5,#8b5cf6,#ec4899);height:8px;position:absolute;top:0;left:0;right:0}.rotate-card h1{margin:0;font-size:clamp(28px,5vw,42px);font-weight:800}.rotate-description{color:#697386;max-width:510px;margin:18px auto 30px;font-size:clamp(15px,2.5vw,21px);line-height:1.55}.rotate-preview{aspect-ratio:1.55;background:#ddd;border-radius:14px;width:min(310px,65vw);margin:0 auto 25px;overflow:hidden;box-shadow:0 15px 35px #00000040}.rotate-preview img{object-fit:cover;width:100%;height:100%}.rotate-card h2{margin:0;font-size:clamp(20px,3.5vw,28px);font-weight:700}.photographer{color:#6b7280;margin:8px 0 30px;font-size:clamp(14px,2.5vw,19px)}.rotate-button{color:#fff;cursor:pointer;background:linear-gradient(90deg,#4f46e5,#8b5cf6);border:0;border-radius:15px;justify-content:center;align-items:center;gap:14px;width:100%;min-height:72px;font-size:clamp(18px,3vw,24px);font-weight:700;transition:transform .15s,box-shadow .15s;display:flex;box-shadow:0 12px 30px #5b3fe659}.rotate-button:active{transform:scale(.98)}.rotate-symbol{font-size:28px}.branding{color:#9ca3af;margin-top:34px;font-size:14px;line-height:1.55}.branding strong{color:#6555dc}.create-video{color:#fff;cursor:pointer;background:linear-gradient(90deg,#4f46e5,#8b5cf6);border:0;border-radius:40px;min-width:190px;margin-top:30px;padding:16px 28px;font-size:17px;font-weight:700;box-shadow:0 12px 35px #5a3fdc66}.create-video span{margin-right:9px}.book-area{justify-content:center;align-items:center;padding:20px 90px 85px;display:flex;position:absolute;inset:82px 0 0}.book-shell{aspect-ratio:3;flex:0 auto;width:min(94vw,1920px);position:relative}.single-book{perspective:2400px;width:100%;height:100%;transform-style:preserve-3d;filter:drop-shadow(0 22px 30px #0000008c)drop-shadow(0 5px 8px #0006);position:relative}.sheet,.sheet-half,.turn-page{height:100%;position:absolute;top:0}.sheet{background:#fff;width:100%;left:0;overflow:hidden}.sheet img{object-fit:fill;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.next-sheet,.previous-sheet{z-index:1}.sheet-half{z-index:5;width:50%;overflow:hidden}.sheet-half img{object-fit:fill;width:200%;max-width:none;height:100%;position:absolute;top:0}.fixed-left,.fixed-left img{left:0}.fixed-right,.fixed-right img{right:0}.turn-page{z-index:10;width:50%;height:100%;transform-style:preserve-3d;backface-visibility:hidden;top:0}.turn-next{transform-origin:0;animation:.9s cubic-bezier(.22,.61,.36,1) forwards realPageNext;left:50%}.turn-prev{transform-origin:100%;animation:.9s cubic-bezier(.22,.61,.36,1) forwards realPagePrev;left:0}.turn-front,.turn-back{backface-visibility:hidden;background:#fff;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.turn-front img,.turn-back img{object-fit:fill;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:200%;max-width:none;height:100%;position:absolute;top:0}.turn-next .turn-front img{left:-100%}.turn-next .turn-back{transform:rotateY(180deg)}.turn-next .turn-back img,.turn-prev .turn-front img{left:0}.turn-prev .turn-back{transform:rotateY(180deg)}.turn-prev .turn-back img{left:-100%}.center-spine{z-index:20;pointer-events:none;background:linear-gradient(90deg,#0000,#0000006b,#ffffff38,#0000006b,#0000);width:2px;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%);box-shadow:0 0 14px #00000080}@keyframes realPageNext{0%{transform:rotateY(0);box-shadow:-8px 0 12px #0000000d}45%{box-shadow:-18px 0 28px #0000003d}to{transform:rotateY(-180deg);box-shadow:-8px 0 18px #0000001f}}@keyframes realPagePrev{0%{transform:rotateY(0);box-shadow:8px 0 12px #0000000d}45%{box-shadow:18px 0 28px #0000003d}to{transform:rotateY(180deg);box-shadow:8px 0 18px #0000001f}}.nav-arrow{z-index:40;color:#fff;cursor:pointer;background:#ffffff14;border:0;border-radius:20px;width:58px;height:76px;font-size:60px;line-height:1;position:fixed;top:50%;transform:translateY(-50%)}.nav-arrow:hover{background:#ffffff29}.left-arrow{left:25px}.right-arrow{right:25px}.bottom-controls{z-index:60;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#141414e6;border:1px solid #ffffff1a;border-radius:28px;align-items:center;gap:14px;min-height:48px;padding:6px 14px;display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.bottom-controls button{color:#fff;cursor:pointer;background:0 0;border:0;border-radius:8px;width:35px;height:35px;font-size:23px}.page-counter{text-align:center;min-width:75px;font-size:14px}.viewer-loading,.viewer-error{color:#fff;background:#000;place-items:center;display:grid;position:fixed;inset:0}.loading-card,.error-card{text-align:center}.loading-spinner{border:4px solid #fff3;border-top-color:#8b5cf6;border-radius:50%;width:42px;height:42px;margin:0 auto 18px;animation:.8s linear infinite spin}.error-card{padding:30px}.error-icon{background:#ef4444;border-radius:50%;place-items:center;width:55px;height:55px;margin:0 auto 15px;font-size:30px;font-weight:700;display:grid}@keyframes spin{to{transform:rotate(360deg)}}@media (orientation:portrait) and (max-width:900px){.topbar{height:72px;padding:10px 18px}.album-mini{width:58px;height:58px}.top-actions{gap:14px}.icon-button{width:43px;height:43px;font-size:33px}.info-button{font-size:26px}.portrait-screen{justify-content:center;padding:15px 14px 65px;inset:72px 0 0}.rotate-card{border-radius:25px;width:min(92vw,570px);padding:35px 25px 25px}.gradient-line{height:6px}.rotate-description{margin:13px auto 20px}.rotate-preview{width:min(270px,66vw);margin-bottom:18px}.photographer{margin-bottom:20px}.rotate-button{min-height:62px}.branding{margin-top:23px;font-size:12px}.create-video{margin-top:20px;padding:13px 24px;font-size:15px}}@media (orientation:landscape) and (max-height:600px){.topbar{height:58px;padding:6px 18px}.album-mini{width:45px;height:45px}.icon-button{width:38px;height:38px;font-size:27px}.book-area{padding:8px 55px 62px;inset:58px 0 0}.book-shell{aspect-ratio:3;width:min(96vw,1920px)}.nav-arrow{width:45px;height:60px;font-size:50px}.left-arrow{left:10px}.right-arrow{right:10px}.bottom-controls{min-height:40px;bottom:8px}}.single-book{transform-style:preserve-3d}.book-stack{pointer-events:none;width:100%;height:100%;transform-style:preserve-3d;z-index:1;position:absolute;inset:0}.stack-layer{box-sizing:border-box;width:100%;height:100%;transform-style:preserve-3d;background:#f4f4f4;border:1px solid #00000038;position:absolute;top:0}.stack-1{transform:translateZ(-2px)}.stack-2{transform:translateZ(-4px)}.stack-3{transform:translateZ(-6px)}.stack-4{transform:translateZ(-8px)}.stack-5{transform:translateZ(-10px)}.stack-6{transform:translateZ(-12px)}.stack-7{transform:translateZ(-14px)}.stack-8{transform:translateZ(-16px)}.stack-9{transform:translateZ(-18px)}.stack-10{transform:translateZ(-20px)}.book-stack:before,.book-stack:after{content:"";pointer-events:none;z-index:20;width:22px;position:absolute;top:1px;bottom:1px}.book-stack:before{background:repeating-linear-gradient(#fffffff2 0 2px,#bebebe8c 3px,#fffffff2 4px);left:-1px;box-shadow:inset -8px 0 10px #0000002e}.book-stack:after{background:repeating-linear-gradient(#fffffff2 0 2px,#bebebe8c 3px,#fffffff2 4px);right:-1px;box-shadow:inset 8px 0 10px #0000002e}.current-sheet{z-index:5}
