:root{--gold:#c99a45;--ink:#050708;--paper:#111;--muted:#b9ad98}*{box-sizing:border-box}html,body{height:100%;margin:0;background:radial-gradient(circle at 50% 25%,#242321 0,#0c0e0f 44%,#020303 100%);color:#eee;font-family:Georgia,'Times New Roman',serif;overflow:hidden}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.toolbar{height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;border-bottom:1px solid #ffffff14;background:#050606d9;backdrop-filter:blur(12px);position:relative;z-index:5}.toolbar button{color:var(--gold);letter-spacing:.08em}.brand{letter-spacing:.35em;color:#dfc58e;font-size:17px;text-align:center}.brand small{display:block;font-size:8px;letter-spacing:.5em;margin-top:4px}.tools{justify-self:end;display:flex;gap:10px}.tools button{font-size:22px;padding:8px}main{height:calc(100% - 105px);display:grid;grid-template-columns:70px 1fr 70px;align-items:center}.stage{height:calc(100% - 24px);max-width:1480px;width:100%;margin:auto;perspective:2200px;display:flex;justify-content:center;align-items:center}.book{height:100%;aspect-ratio:4/3;display:grid;grid-template-columns:1fr 1fr;filter:drop-shadow(0 28px 28px #000c);transform-style:preserve-3d;animation:arrive .55s cubic-bezier(.2,.8,.2,1)}@keyframes arrive{from{opacity:.2;transform:rotateY(var(--turn,0deg)) scale(.96)}to{opacity:1;transform:rotateY(0) scale(1)}}.page{position:relative;overflow:hidden;background:#090a0a}.page.left{border-radius:8px 0 0 8px;box-shadow:inset -18px 0 25px -18px #000}.page.right{border-radius:0 8px 8px 0;box-shadow:inset 18px 0 25px -18px #000}.page img{width:100%;height:100%;object-fit:contain;display:block;background:#050505}.page.left:after,.page.right:before{content:"";position:absolute;top:0;bottom:0;width:8%;pointer-events:none;z-index:2}.page.left:after{right:0;background:linear-gradient(90deg,transparent,#0008)}.page.right:before{left:0;background:linear-gradient(90deg,#0009,transparent)}.cover-book{height:100%;aspect-ratio:2/3;filter:drop-shadow(22px 30px 30px #000d);transform:rotateY(-4deg);animation:coverIn .7s ease}.cover-book img{height:100%;width:100%;object-fit:cover;border-radius:3px 10px 10px 3px;box-shadow:inset 14px 0 10px #0009;border-right:8px solid #19120b}@keyframes coverIn{from{opacity:0;transform:rotateY(-22deg) translateY(20px)}to{opacity:1;transform:rotateY(-4deg)}}.intro{padding:10%;display:flex;flex-direction:column;justify-content:center;text-align:center;border:1px solid #8c682c;background:radial-gradient(circle,#171714,#060707 70%)}.intro h1{font-weight:400;color:#d5b16b;font-size:clamp(24px,4vw,58px);letter-spacing:.18em;margin:0}.intro .line{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:28px 0}.intro p{color:#c7bca8;line-height:1.8;letter-spacing:.08em}.intro small{color:#8f7751;margin-top:3rem;letter-spacing:.25em}.blank{background:linear-gradient(90deg,#030303,#0c0c0b);border-radius:8px 0 0 8px}.hotspot{position:absolute;z-index:4;border:1px solid transparent;transition:.2s}.hotspot:hover{border-color:#d1a344;box-shadow:inset 0 0 0 2px #0008,0 0 18px #d1a34488;background:#d1a3440d}.hotspot:after{content:'↗';position:absolute;right:7px;top:7px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#080808bb;color:#e6bd69;opacity:0;transition:.2s}.hotspot:hover:after{opacity:1}.nav{font-size:64px;color:#ad8a4f;opacity:.7;transition:.2s}.nav:hover{opacity:1;transform:scale(1.12)}.nav:disabled{opacity:.12;cursor:default}footer{height:41px;display:grid;grid-template-columns:1fr minmax(180px,420px) 1fr;gap:20px;align-items:center;padding:0 28px;color:#9f9078;font-size:12px;letter-spacing:.12em}.progress{height:1px;background:#ffffff20}.progress i{display:block;height:100%;width:0;background:var(--gold);transition:.35s}#counter{text-align:right}dialog{color:#eee;border:1px solid #896a35;background:#090b0cee;backdrop-filter:blur(18px);box-shadow:0 30px 90px #000;border-radius:8px;max-width:min(900px,92vw)}dialog::backdrop{background:#000b}.close{position:absolute;right:14px;top:8px;font-size:32px;color:#c9a35f}#toc{padding:40px}#toc h2{margin:0;color:#d5b16b;font-weight:400;letter-spacing:.16em}#toc p{color:#9b907d}#tocGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:24px}#tocGrid button{text-align:left;padding:11px 13px;border:1px solid #ffffff12;color:#c9bda8;transition:.2s}#tocGrid button:hover{border-color:#a47d3c;color:#efce8c;background:#a47d3c18}#viewer{padding:18px;max-width:95vw;max-height:95vh}#photoCanvas{display:block;max-width:88vw;max-height:78vh;background:#111}.viewer-actions{display:flex;justify-content:space-between;align-items:center;padding-top:12px;color:#c6af81}.viewer-actions button{border:1px solid #9d793c;padding:9px 14px;color:#e4c681}@media(max-width:900px){.toolbar{padding:0 12px}.toolbar span{display:none}.brand{font-size:13px}.brand small{display:none}main{grid-template-columns:38px 1fr 38px}.nav{font-size:42px}.book{width:100%;height:auto}.stage{height:auto}footer{grid-template-columns:1fr 120px auto;padding:0 10px}#tocGrid{grid-template-columns:repeat(2,1fr)}}