:root{--ink:#211f20;--stone:#aa9f8e;--paper:#f6f3ee;--line:rgba(255,255,255,.16)}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{overflow:hidden;background:radial-gradient(circle at 50% 20%,#45413d 0,#262424 42%,#171616 100%);color:#fff;font-family:Arial,Helvetica,sans-serif}
.toolbar{height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(16px,3vw,42px);border-bottom:1px solid var(--line);background:rgba(20,19,19,.82);backdrop-filter:blur(12px)}
.brand,.close,.footer a{color:#fff;text-decoration:none}.brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:.08em;font-size:14px}.mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--stone);color:var(--stone);font-size:21px}.title{font-size:12px;letter-spacing:.25em;color:#d9d2c7}.close{justify-self:end;width:42px;height:42px;display:grid;place-items:center;font-size:30px;font-weight:200;border-radius:50%;transition:.2s}.close:hover{background:rgba(255,255,255,.09)}
.viewer{height:calc(100% - 126px);display:grid;grid-template-columns:minmax(48px,8vw) 1fr minmax(48px,8vw);align-items:center}.stage{height:100%;display:grid;place-items:center;perspective:1800px;padding:18px}.book{position:relative;height:min(78vh,calc(100vh - 164px));aspect-ratio:609.449/856.063;transform-style:preserve-3d;filter:drop-shadow(0 24px 32px rgba(0,0,0,.45));transform-origin:center}.book img{width:100%;height:100%;display:block;object-fit:contain;background:#fff;backface-visibility:hidden;user-select:none}.book::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.2);pointer-events:none}.sheen{position:absolute;inset:0;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.34) 50%,transparent 58%);opacity:0;pointer-events:none}
.turning-page{position:absolute;inset:0;z-index:5;width:100%;height:100%;object-fit:contain;background:#fff;backface-visibility:hidden;will-change:transform,filter;pointer-events:none}
.turn-next{transform-origin:right center;animation:pageTurnNext .68s cubic-bezier(.35,.02,.2,1) forwards}
.turn-prev{transform-origin:left center;animation:pageTurnPrev .68s cubic-bezier(.35,.02,.2,1) forwards}
@keyframes pageTurnNext{0%{transform:rotateY(0);filter:brightness(1);box-shadow:0 0 0 rgba(0,0,0,0)}45%{filter:brightness(.62);box-shadow:-24px 0 34px rgba(0,0,0,.38)}100%{transform:rotateY(178deg);filter:brightness(.35);box-shadow:-8px 0 18px rgba(0,0,0,.18)}}
@keyframes pageTurnPrev{0%{transform:rotateY(-178deg);filter:brightness(.35);box-shadow:8px 0 18px rgba(0,0,0,.18)}55%{filter:brightness(.7);box-shadow:24px 0 34px rgba(0,0,0,.34)}100%{transform:rotateY(0);filter:brightness(1);box-shadow:0 0 0 rgba(0,0,0,0)}}
.nav{height:88px;border:0;background:transparent;color:#fff;font-size:64px;font-weight:200;opacity:.68;cursor:pointer;transition:.2s}.nav:hover{opacity:1;transform:scale(1.08)}.nav:disabled{opacity:.14;cursor:default;transform:none}
.footer{height:54px;display:grid;grid-template-columns:auto minmax(100px,360px) auto;justify-content:center;align-items:center;gap:18px;padding:0 18px;border-top:1px solid var(--line);background:rgba(20,19,19,.82);font-size:12px;letter-spacing:.08em}.progress{height:2px;background:rgba(255,255,255,.15)}.progress span{display:block;height:100%;width:6.25%;background:var(--stone);transition:width .3s}.footer a{color:#d9d2c7}
@media(max-width:640px){.toolbar{height:60px;grid-template-columns:1fr auto}.title{display:none}.brand{font-size:12px}.viewer{height:calc(100% - 108px);grid-template-columns:42px 1fr 42px}.stage{padding:10px 0}.book{width:100%;height:auto;max-height:calc(100vh - 132px)}.nav{font-size:48px}.footer{height:48px;grid-template-columns:auto 1fr auto;gap:10px;padding:0 12px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.turning-page{animation-duration:.01ms}}