*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;background:#292e36;color:#fff}header{min-height:56px;background:#080c13;display:flex;align-items:center;justify-content:space-between;padding:8px 13px;gap:10px}header strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}button,input{font:inherit}button{border:0;border-radius:6px;padding:7px 9px;background:#303949;color:#fff;cursor:pointer}input{width:55px;padding:6px;border-radius:6px;border:1px solid #667085}main{height:calc(100% - 56px);display:flex;align-items:center;justify-content:center;overflow:auto;padding:22px;perspective:1800px;position:relative}#book{display:flex;transform-origin:center;transition:transform .18s}.pg{position:relative;width:420px;height:594px;background:#fff;box-shadow:0 12px 32px #0009;overflow:hidden}.pg img{width:100%;height:100%;object-fit:contain;background:#fff}.spine{width:3px;background:linear-gradient(90deg,#111,#aaa,#111)}.hotlayer{position:absolute;inset:0}.hot{position:absolute;display:block}.turn{animation:turn .42s ease}@keyframes turn{50%{transform-origin:left center;transform:rotateY(-80deg);filter:brightness(.65)}}aside{position:absolute;right:0;top:0;height:100%;width:min(420px,90vw);background:#fff;color:#17202a;box-shadow:-8px 0 28px #0008;overflow:hidden}aside>div{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid #ddd}#thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:10px;overflow:auto;height:calc(100% - 50px)}#thumbs button{background:#f3f4f6;color:#17202a}#thumbs img{width:100%;height:auto;display:block;margin-bottom:4px}@media(max-width:800px){.left,.spine{display:none}.pg{width:min(92vw,430px);height:calc(min(92vw,430px)*1.414)}header{height:auto}main{height:calc(100% - 70px);padding:8px}}