:root{--text:#fff;--muted:rgba(255,255,255,.78);--page:#fff;--shadow:0 18px 55px rgba(0,0,0,.38);--book-scale:1;--app-height:100dvh;--toolbar-space:74px}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}html{background:#272c34;overscroll-behavior:none}body{font-family:Segoe UI,Arial,sans-serif;color:var(--text);overflow:hidden;background:#272c34;overscroll-behavior:none;-webkit-text-size-adjust:100%}
body.bg-studio{background:linear-gradient(#2a2f38,#13161c)}body.bg-holz{background:linear-gradient(135deg,#7b4f2c,#3d2618)}body.bg-nacht{background:radial-gradient(circle at 50% 15%,#1f365e,#050913 65%)}body.bg-papier{background:linear-gradient(#e3dfd1,#bdb6a2);color:#222}body.custom-bg{background-position:center;background-size:cover;background-repeat:no-repeat}
.stage{width:100%;height:var(--app-height,100dvh);display:flex;align-items:center;justify-content:center;position:relative;padding:clamp(6px,2vw,24px) clamp(6px,2vw,24px) calc(var(--toolbar-space) + env(safe-area-inset-bottom));perspective:1800px;touch-action:pan-y pinch-zoom;overflow:hidden}.book{width:min(100%,1400px);height:min(100%,940px);display:grid;grid-template-columns:minmax(0,1fr) 5px minmax(0,1fr);align-items:center;position:relative;transform-style:preserve-3d;transform:scale(var(--book-scale));transform-origin:center center;transition:transform .18s ease}.slot{min-width:0;min-height:0;height:100%;display:flex;align-items:center;overflow:hidden}.slot.left{justify-content:flex-end}.slot.right{justify-content:flex-start}.slot img{display:none;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:var(--page);box-shadow:var(--shadow);user-select:none;-webkit-user-drag:none}.slot img.visible{display:block}.spine{height:92%;background:linear-gradient(to right,rgba(0,0,0,.25),rgba(255,255,255,.16),rgba(0,0,0,.28));opacity:.75;border-radius:3px;z-index:2}.turn-layer{position:absolute;top:4%;bottom:4%;width:48%;right:2%;pointer-events:none;transform-origin:left center;opacity:0;background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(0,0,0,.35));box-shadow:-16px 0 35px rgba(0,0,0,.22)}.book.turn-next .turn-layer{animation:turnNext .34s ease-in}.book.turn-prev .turn-layer{left:2%;right:auto;transform-origin:right center;animation:turnPrev .34s ease-in}@keyframes turnNext{0%{opacity:0;transform:rotateY(0)}45%{opacity:.85}100%{opacity:0;transform:rotateY(-92deg)}}@keyframes turnPrev{0%{opacity:0;transform:rotateY(0)}45%{opacity:.85}100%{opacity:0;transform:rotateY(92deg)}}
.page-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:8;width:54px;height:82px;border:0;border-radius:18px;background:transparent;color:#fff;font:300 58px/1 Segoe UI,Arial,sans-serif;display:grid;place-items:center;padding:0 0 8px;cursor:pointer;text-shadow:0 3px 15px rgba(0,0,0,.58);transition:background .18s ease,transform .18s ease,opacity .18s ease}.page-arrow:hover:not(:disabled){background:rgba(12,16,22,.20);transform:translateY(-50%) scale(1.08)}.page-arrow:focus-visible{outline:2px solid rgba(255,255,255,.88);outline-offset:3px}.page-arrow:disabled{opacity:.12;cursor:default}.page-arrow-prev{left:max(2px,env(safe-area-inset-left))}.page-arrow-next{right:max(2px,env(safe-area-inset-right))}
.floating-toolbar{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;gap:3px;padding:7px 9px;border:1px solid rgba(255,255,255,.27);border-radius:18px;background:rgba(26,30,38,.32);box-shadow:0 12px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.16);backdrop-filter:blur(15px) saturate(145%);-webkit-backdrop-filter:blur(15px) saturate(145%);user-select:none;max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 12px)}.tool-btn{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border:0;border-radius:11px;background:transparent;color:#fff;cursor:pointer;font:400 22px/1 Segoe UI,Arial,sans-serif;padding:0;transition:background .16s ease,transform .16s ease,opacity .16s ease}.tool-btn:hover:not(:disabled){background:rgba(255,255,255,.15)}.tool-btn:active:not(:disabled){transform:scale(.94)}.tool-btn:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:1px}.tool-btn:disabled{opacity:.28;cursor:default}.nav-btn{font-size:31px;padding-bottom:4px}.fullscreen-btn{font-size:22px}.counter{min-width:66px;flex:0 0 auto;text-align:center;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums;padding:0 4px;white-space:nowrap}.divider{width:1px;height:24px;flex:0 0 1px;background:rgba(255,255,255,.24);margin:0 4px}.mode-glyph{width:22px;height:18px;display:flex;gap:3px;align-items:stretch;justify-content:center}.mini-page{display:block;width:8px;border:1.5px solid currentColor;border-radius:2px;background:rgba(255,255,255,.06)}.mode-btn.single-view .mode-glyph{gap:0}.mode-btn.single-view .mini-page.first{width:11px}.mode-btn.single-view .mini-page.second{display:none}
.single .book{grid-template-columns:minmax(0,1fr)}.single .slot.left,.single .spine{display:none}.single .slot.right{justify-content:center}.single .turn-layer{width:72%;right:14%}
@media(max-width:900px){.stage{padding-left:max(5px,env(safe-area-inset-left));padding-right:max(5px,env(safe-area-inset-right))}.page-arrow{width:46px;height:68px;font-size:50px;border-radius:14px}.floating-toolbar{right:max(9px,env(safe-area-inset-right));bottom:max(9px,env(safe-area-inset-bottom));padding:5px 6px;border-radius:15px;gap:1px}.tool-btn{width:34px;height:34px;border-radius:9px;font-size:20px}.nav-btn{font-size:28px}.counter{min-width:58px;font-size:12px;padding:0 2px}.divider{height:20px;margin:0 2px}.mode-glyph{width:20px;height:16px}}
@media(max-width:560px){:root{--toolbar-space:58px}.stage{padding-top:max(4px,env(safe-area-inset-top));padding-left:max(3px,env(safe-area-inset-left));padding-right:max(3px,env(safe-area-inset-right))}.book{max-width:100%;max-height:100%}.page-arrow{width:38px;height:58px;font-size:44px;border-radius:11px}.page-arrow-prev{left:max(0px,env(safe-area-inset-left))}.page-arrow-next{right:max(0px,env(safe-area-inset-right))}.floating-toolbar{right:max(6px,env(safe-area-inset-right));bottom:max(6px,env(safe-area-inset-bottom));padding:4px 5px;border-radius:14px}.tool-btn{width:30px;height:30px;border-radius:8px;font-size:19px}.nav-btn{font-size:26px}.counter{min-width:50px;font-size:11px}.divider{height:18px;margin:0 1px}.mode-glyph{width:18px;height:15px}.mini-page{width:7px}}
@media(max-width:380px){.floating-toolbar{gap:0;padding:3px 4px}.tool-btn{width:27px;height:28px;font-size:18px}.nav-btn{font-size:24px}.counter{min-width:45px;font-size:10.5px}.divider{margin:0}.mode-glyph{width:17px;height:14px}}
@media(max-height:520px){:root{--toolbar-space:50px}.stage{padding-top:3px}.floating-toolbar{bottom:max(4px,env(safe-area-inset-bottom));padding-top:3px;padding-bottom:3px}.tool-btn{height:29px}.page-arrow{height:52px}}
@media(prefers-reduced-motion:reduce){.book,.page-arrow,.tool-btn{transition:none!important}.book.turn-next .turn-layer,.book.turn-prev .turn-layer{animation:none!important}}