:root{--page-ratio:.7727272727;--spread-ratio:1.5454545455;--paper:#f7f1e8;--ink:#f7eee5;--gold:#d7ae69;--wine:#5b263d;--bar:#100b0f}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#090709;color:var(--ink);font-family:Arial,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button,a{font:inherit}.flip-app{height:100dvh;display:grid;grid-template-rows:54px minmax(0,1fr) 24px;background:#090709}
.reader-bar{height:54px;display:grid;grid-template-columns:minmax(110px,1fr) auto minmax(205px,1fr);align-items:center;gap:10px;padding:7px 12px;background:linear-gradient(90deg,#0b090a,#24151b 50%,#0b090a);border-bottom:1px solid rgba(215,174,105,.34);z-index:80}.back-link,.mode{color:#f5e7da;text-decoration:none;font:700 10px/1 Arial,sans-serif;letter-spacing:.105em;text-transform:uppercase}.reader-brand{font:500 15px/1 Georgia,serif;letter-spacing:.1em;text-align:center}.reader-bar nav{display:flex;gap:5px;justify-content:center}.mode{padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px}.mode.active{background:#f2e5d5;color:#1a1114}.controls{justify-self:end;display:flex;align-items:center;gap:6px}.controls button{width:35px;height:35px;border:1px solid rgba(215,174,105,.45);border-radius:50%;background:#171014;color:#fff;font-size:18px;cursor:pointer}.controls button:disabled{opacity:.3}.controls span{min-width:110px;text-align:center;font:700 9px/1 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#dbcbbb}
.stage{--ambient-image:none;position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;padding:0;background:radial-gradient(circle at center,#2d1d23 0,#130d10 52%,#070607 100%);isolation:isolate}.stage::before{content:"";position:absolute;inset:-34px;background-image:linear-gradient(rgba(12,8,11,.66),rgba(12,8,11,.80)),var(--ambient-image);background-position:center;background-size:cover;filter:blur(30px) saturate(.9);transform:scale(1.08);opacity:.68;z-index:-2;transition:background-image .35s ease}.stage::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 20%,rgba(4,3,4,.42) 100%);z-index:-1;pointer-events:none}
.book-wrap{position:relative;width:min(calc(100vw - 4px),calc((100dvh - 78px)*var(--spread-ratio)));height:min(calc((100vw - 4px)/var(--spread-ratio)),calc(100dvh - 78px));max-width:100%;max-height:100%;filter:drop-shadow(0 25px 30px rgba(0,0,0,.68));z-index:2}.book{position:absolute;inset:0;perspective:3400px;transition:transform .55s ease}.book.start{transform:translateX(-25%)}.book.end{transform:translateX(25%)}.paper{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.22,.7,.15,1);will-change:transform}.paper.flipped{transform:rotateY(-180deg)}.paper-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--paper);overflow:hidden;outline:1px solid rgba(255,255,255,.08)}.paper-face.front{box-shadow:inset 8px 0 18px rgba(0,0,0,.10)}.paper-face.back{transform:rotateY(180deg);box-shadow:inset -8px 0 18px rgba(0,0,0,.10)}.mag-page{position:relative;width:100%;height:100%;overflow:hidden;background:var(--paper);cursor:zoom-in}.mag-page img{display:block;width:100%;height:100%;object-fit:cover;background:var(--paper);pointer-events:none}
.mobile-wrap{display:none;position:relative;width:min(calc(100vw - 4px),calc((100dvh - 78px)*var(--page-ratio)));height:min(calc((100vw - 4px)/var(--page-ratio)),calc(100dvh - 78px));max-width:100%;max-height:100%;filter:drop-shadow(0 20px 24px rgba(0,0,0,.66));perspective:2200px;z-index:2}.mobile-page{width:100%;height:100%;overflow:hidden;background:var(--paper);transform-origin:left center}.mobile-page .mag-page{cursor:zoom-in}.mobile-page.turn-next{animation:turnNext .58s ease}.mobile-page.turn-prev{animation:turnPrev .58s ease}@keyframes turnNext{0%{transform:rotateY(0);opacity:1}49%{transform:rotateY(-88deg);opacity:.45}50%{transform:rotateY(88deg);opacity:.45}100%{transform:rotateY(0);opacity:1}}@keyframes turnPrev{0%{transform:rotateY(0);opacity:1}49%{transform:rotateY(88deg);opacity:.45}50%{transform:rotateY(-88deg);opacity:.45}100%{transform:rotateY(0);opacity:1}}
.edge{position:absolute;top:0;bottom:0;width:9%;border:0;background:transparent;z-index:60;cursor:pointer}.prev-edge{left:0}.next-edge{right:0}.reader-foot{height:24px;display:grid;place-items:center;background:#0d090b;border-top:1px solid rgba(215,174,105,.25);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:#cdbeb0}.page-focus{position:fixed;inset:0;z-index:1000;display:none;grid-template-rows:auto minmax(0,1fr);background:rgba(5,4,5,.98);color:#fff}.page-focus.open{display:grid}.focus-toolbar{min-height:54px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:7px 12px;background:linear-gradient(90deg,#0b090a,#24151b 50%,#0b090a);border-bottom:1px solid rgba(215,174,105,.38)}.focus-toolbar>span{font:700 10px/1 Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#eadbcb}.focus-toolbar button{min-width:42px;height:36px;border:1px solid rgba(215,174,105,.48);border-radius:999px;background:#171014;color:#fff;font:700 10px/1 Arial,sans-serif;letter-spacing:.06em;cursor:pointer}.focus-toolbar>button{justify-self:start;padding:0 14px}.focus-zoom-controls{justify-self:end;display:flex;align-items:center;gap:7px}.focus-zoom-controls button{font-size:19px}.focus-zoom-controls button:disabled{opacity:.35}.focus-zoom-controls output{min-width:50px;text-align:center;font:700 10px/1 Arial,sans-serif;color:#eadbcb}.focus-scroll{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:10px;display:flex;align-items:flex-start;justify-content:flex-start}.focus-canvas{position:relative;flex:0 0 auto;margin:0 auto;background:var(--paper);box-shadow:0 18px 48px rgba(0,0,0,.7)}.focus-canvas>.mag-page{position:absolute;inset:0;cursor:default}.focus-open .reader-bar,.focus-open .reader-foot{visibility:hidden}
@media(max-width:900px){.flip-app{grid-template-rows:52px minmax(0,1fr) 22px}.reader-bar{height:52px;grid-template-columns:auto 1fr auto;padding:6px}.reader-brand{display:none}.back-link{font-size:8px;max-width:62px;overflow:hidden;white-space:nowrap}.reader-bar nav{justify-self:center}.mode{font-size:8px;padding:7px 8px}.controls{gap:2px}.controls button{width:31px;height:31px;font-size:16px}#pageStatus{display:none}.book-wrap{display:none}.mobile-wrap{display:block;width:min(calc(100vw - 2px),calc((100dvh - 74px)*var(--page-ratio)));height:min(calc((100vw - 2px)/var(--page-ratio)),calc(100dvh - 74px))}.stage{padding:0}.reader-foot{height:22px;font-size:7px;letter-spacing:.05em}.edge{width:14%}.focus-toolbar{grid-template-columns:auto 1fr auto;padding:6px}.focus-toolbar>span{text-align:center;font-size:8px}.focus-toolbar>button{padding:0 10px}.focus-zoom-controls{gap:3px}.focus-zoom-controls output{min-width:38px}.focus-scroll{padding:5px}}
@media(max-width:430px){.back-link{width:48px}.mode{padding:6px}.reader-bar nav{gap:2px}.controls button{width:29px;height:29px}}
@media print{body{display:none!important}}