:root{--navy:#061a32;--gold:#d6a13b;--orange:#eb6b32}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font-family:Arial,sans-serif;background:#101924;color:#fff}body{display:grid;grid-template-rows:66px 1fr 64px}header{background:var(--navy);display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #ffffff1b}header a{font-size:12px;color:#fff;text-decoration:none}header div{text-align:center;display:flex;flex-direction:column}header b{font-family:Georgia,serif;font-size:20px;letter-spacing:.06em}header span{font-size:8px;color:var(--gold);letter-spacing:.18em;margin-top:4px}main{min-height:0;background:radial-gradient(circle at center,#394554,#131c27 70%);padding:20px}.reader{height:100%;display:grid;grid-template-columns:55px minmax(0,1fr) 55px;align-items:center;max-width:1260px;margin:auto}.book{height:100%;min-height:0;display:grid;grid-template-columns:1fr 1fr;justify-content:center;perspective:1800px;filter:drop-shadow(0 18px 30px #0008)}figure{height:100%;min-width:0;margin:0;position:relative;background:#fff;display:flex;align-items:center;justify-content:flex-end;overflow:hidden}figure:first-child{border-radius:5px 0 0 5px}figure.second{border-left:1px solid #bfc1c4;justify-content:flex-start;border-radius:0 5px 5px 0}figure img{display:block;max-width:100%;max-height:100%;object-fit:contain;background:#fff}figcaption{position:absolute;bottom:4px;right:7px;color:#777;font-size:8px}.second figcaption{right:auto;left:7px}.book.turn-next{animation:turnNext .35s ease}.book.turn-prev{animation:turnPrev .35s ease}@keyframes turnNext{0%{transform:perspective(1600px) rotateY(0)}45%{transform:perspective(1600px) rotateY(-7deg) scale(.985)}100%{transform:rotateY(0)}}@keyframes turnPrev{0%{transform:perspective(1600px) rotateY(0)}45%{transform:perspective(1600px) rotateY(7deg) scale(.985)}100%{transform:rotateY(0)}}.nav{width:44px;height:64px;border:1px solid #ffffff2a;background:#ffffff12;color:#fff;border-radius:25px;font-size:39px;cursor:pointer;transition:.2s}.nav:hover:not(:disabled){background:var(--orange);border-color:var(--orange)}.nav:disabled{opacity:.25;cursor:not-allowed}footer{background:var(--navy);display:flex;align-items:center;justify-content:center;gap:18px;padding:0 22px;border-top:1px solid #ffffff1b}footer button{border:1px solid #ffffff27;background:#ffffff10;color:#fff;border-radius:3px;padding:8px 12px;cursor:pointer}footer span{font-size:11px;min-width:110px;text-align:center}footer input{width:min(270px,28vw);accent-color:var(--orange)}footer small{font-size:9px;color:#8d9bab}@media(max-width:700px){body{grid-template-rows:58px 1fr 72px}header{padding:0 13px}header b{font-size:16px}header a{font-size:10px}main{padding:10px 3px}.reader{grid-template-columns:38px minmax(0,1fr) 38px}.book{grid-template-columns:1fr}.book figure:first-child{border-radius:4px}.book .second{display:none}.nav{width:34px;height:54px;font-size:31px}footer{gap:8px;flex-wrap:wrap;padding:6px 10px}footer input{width:42vw}footer small{display:none}#fullscreen{font-size:0}#fullscreen:after{content:'⛶';font-size:17px}}