:root{--burgundy:#8f1d1d;--burgundy-dark:#631414;--gold:#c9a24b;--ink:#171717;--cream:#f5efe4;--paper:#fff;--muted:#70685f}
*{box-sizing:border-box}html{background:#110d0d}body{margin:0;color:#fff;background:radial-gradient(circle at 50% 20%,#3a2520,#110d0d 65%);font-family:Arial,Helvetica,sans-serif;min-height:100vh}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:30;padding:.7rem 1rem;background:var(--gold);color:#211;font-weight:800}.skip-link:focus{top:1rem}button,select,a{font:inherit}button{cursor:pointer}
header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:1rem clamp(1rem,4vw,3rem);background:linear-gradient(135deg,#181818,#421919 60%,#621616);border-bottom:4px solid var(--gold)}header>div{text-align:center}header p{margin:0;color:var(--gold);font-size:.65rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}h1{margin:.2rem 0 0;font-size:clamp(1.25rem,3vw,2.3rem);line-height:1}h1 span{display:block;color:#eadfce;font-size:.48em;letter-spacing:.1em;text-transform:uppercase}.back-link,.download-link{justify-self:start;color:#fff;font-size:.8rem;font-weight:800;text-decoration:none}.download-link{justify-self:end;padding:.55rem .75rem;border:1px solid var(--gold);border-radius:999px}.back-link:hover,.download-link:hover{color:var(--gold)}
main{width:min(1500px,100%);margin:auto;padding:1rem}.reader-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;margin-bottom:.75rem}.reader-toolbar button,.bottom-controls button,.bottom-controls select{padding:.55rem .75rem;border:1px solid rgba(255,255,255,.22);border-radius:8px;color:#fff;background:rgba(255,255,255,.08)}#fullscreenButton{justify-self:end}.page-status{display:grid;text-align:center;font-weight:800}.page-status small{color:#bcb2aa;font-size:.65rem;font-weight:600}.reader-shell{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:0}#thumbnails{width:180px;max-height:calc(100vh - 215px);padding:.5rem;overflow-y:auto;background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.12);border-radius:10px 0 0 10px}#thumbnails button{display:grid;gap:.25rem;width:100%;margin-bottom:.6rem;padding:.3rem;border:2px solid transparent;color:#ddd;background:transparent;font-size:.68rem;text-align:left}#thumbnails button[aria-current="page"]{border-color:var(--gold);background:rgba(201,162,75,.12)}#thumbnails img{display:block;width:100%;height:auto;background:#fff}
.stage{position:relative;display:grid;place-items:center;min-height:clamp(460px,calc(100vh - 235px),900px);padding:1.5rem 4rem;overflow:hidden;background:radial-gradient(ellipse at center,#5d5149 0%,#302a27 52%,#171311 100%);border:1px solid rgba(255,255,255,.12);border-radius:12px}.book{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(1120px,calc((100vh - 265px)*1.545));max-width:calc(100vw - 11rem);filter:drop-shadow(0 25px 28px rgba(0,0,0,.55));perspective:1800px}.page{position:relative;aspect-ratio:8.5/11;overflow:hidden;background:#fff}.page img{display:block;width:100%;height:100%;object-fit:contain;cursor:zoom-in}.left-page{transform-origin:right center}.right-page{transform-origin:left center}.left-page::after,.right-page::after{content:"";position:absolute;inset:0;pointer-events:none}.left-page::after{background:linear-gradient(90deg,transparent 75%,rgba(0,0,0,.17))}.right-page::after{background:linear-gradient(90deg,rgba(0,0,0,.14),transparent 25%)}.blank{visibility:hidden}.spine{position:absolute;z-index:4;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:rgba(0,0,0,.35);box-shadow:0 0 12px rgba(0,0,0,.55)}.turn-sheet{display:none;position:absolute;z-index:6;right:0;top:0;width:50%;aspect-ratio:8.5/11;transform-origin:left center;background:#fff;backface-visibility:hidden}.turn-sheet img{width:100%;height:100%;object-fit:contain}.turn-sheet.forward{display:block;animation:turnForward .34s ease-in forwards}.turn-sheet.backward{display:block;left:0;right:auto;transform-origin:right center;animation:turnBackward .34s ease-in forwards}@keyframes turnForward{from{transform:rotateY(0)}to{transform:rotateY(-92deg)}}@keyframes turnBackward{from{transform:rotateY(0)}to{transform:rotateY(92deg)}}
.edge-control{position:absolute;z-index:8;top:50%;width:3rem;height:5rem;transform:translateY(-50%);border:1px solid rgba(255,255,255,.18);border-radius:10px;color:#fff;background:rgba(0,0,0,.38);font-size:2.5rem}.edge-control:hover{background:var(--burgundy-dark)}.edge-control:disabled{opacity:.25;cursor:not-allowed}.previous{left:.5rem}.next{right:.5rem}.bottom-controls{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:.8rem}.bottom-controls label{font-size:.75rem}.bottom-controls select{min-width:7rem}.reader-help{text-align:center;color:#bcb2aa;font-size:.72rem}
dialog{max-width:96vw;max-height:96vh;padding:3rem 1rem 1rem;border:0;border-radius:12px;background:#171311;box-shadow:0 30px 80px #000}dialog::backdrop{background:rgba(0,0,0,.85)}dialog img{display:block;max-width:none;width:auto;height:auto;max-height:none}dialog[open]{overflow:auto}#closeDialog{position:fixed;z-index:3;right:2rem;top:2rem;padding:.65rem .85rem;border:1px solid var(--gold);border-radius:99px;color:#fff;background:var(--burgundy-dark)}
body:fullscreen main{width:100%;height:100vh}.stage:fullscreen{height:100vh;border:0;border-radius:0}.stage:fullscreen .book{width:min(1300px,calc((100vh - 4rem)*1.545));max-width:calc(100vw - 8rem)}
@media(max-width:800px){header{grid-template-columns:1fr auto}header>div{grid-column:1/-1;grid-row:1;text-align:left;padding-right:7rem}.back-link{grid-row:2}.download-link{grid-row:2}.reader-toolbar{grid-template-columns:1fr auto 1fr}.reader-shell{display:block}#thumbnails{position:absolute;z-index:15;width:min(230px,80vw);max-height:70vh;border-radius:10px}.stage{min-height:calc(100vh - 250px);padding:1rem 3rem}.book{display:block;width:min(500px,calc((100vh - 290px)*.773));max-width:calc(100vw - 7rem)}.page{display:none}.page.active{display:block}.spine{display:none}.turn-sheet{width:100%}.edge-control{width:2.5rem;height:4rem}.bottom-controls label,.bottom-controls select{display:none}}
@media(max-width:480px){main{padding:.5rem}.stage{padding:.5rem 2.5rem}.book{max-width:calc(100vw - 6rem)}.bottom-controls{gap:.35rem}.reader-help{padding:0 1rem}}
@media(prefers-reduced-motion:reduce){.turn-sheet.forward,.turn-sheet.backward{animation:none}}