:root{--ink:#f3ede3;--muted:#b7aa98;--panel:#241e18;--wood:#6d4b2f;--gold:#c7a468;--paper:#f7f3ea;--shadow:rgba(0,0,0,.48)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#17130f;color:var(--ink);font-family:"Hiragino Mincho ProN","Yu Mincho",serif}
body{min-height:100dvh;background:radial-gradient(circle at 50% 10%,#33291f 0,#1c1712 44%,#110e0b 100%)}
.bar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:12px 28px;border-bottom:1px solid rgba(199,164,104,.24);background:rgba(17,14,11,.82);backdrop-filter:blur(12px)}
.identity{min-width:0}.eyebrow{display:block;color:var(--gold);font-size:.74rem;letter-spacing:.16em;margin-bottom:4px}.identity h1{font-size:clamp(.95rem,2vw,1.18rem);font-weight:500;letter-spacing:.05em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-button,.dialog-close{width:38px;height:38px;border:1px solid rgba(199,164,104,.5);border-radius:50%;background:transparent;color:var(--ink);font:600 1rem system-ui;cursor:pointer}
main{min-height:calc(100dvh - 78px);display:grid;place-items:center;padding:18px 24px 24px}
.reader{width:min(1180px,100%)}.book-shell{position:relative;display:grid;place-items:center}
.book{position:relative;width:min(78vw,900px);aspect-ratio:1.414/1;display:grid;grid-template-columns:1fr 1fr;perspective:2200px;filter:drop-shadow(0 28px 36px var(--shadow))}
.page,.cover-page{background:var(--paper);overflow:hidden}.page img,.cover-page img{display:block;width:100%;height:100%;object-fit:contain;background:var(--paper)}
.page-left{grid-column:1;border-radius:7px 0 0 7px;transform-origin:right center;box-shadow:inset -14px 0 22px rgba(75,55,35,.08)}
.page-right{grid-column:2;border-radius:0 7px 7px 0;transform-origin:left center;box-shadow:inset 14px 0 22px rgba(75,55,35,.08)}
.gutter{position:absolute;z-index:4;left:50%;top:0;bottom:0;width:18px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(44,28,16,.18),transparent);pointer-events:none}
.cover-page{position:absolute;inset:0 25%;border-radius:4px;box-shadow:0 20px 55px rgba(0,0,0,.62);z-index:5}
.book.open .cover-page{display:none}.book.cover .page{visibility:hidden}.book.last .page-left{visibility:hidden}
.book.turn-next .page-left{z-index:7;animation:turnNext .48s cubic-bezier(.55,.04,.35,1)}
.book.turn-prev .page-right{z-index:7;animation:turnPrev .48s cubic-bezier(.55,.04,.35,1)}
@keyframes turnNext{0%{transform:rotateY(0);filter:brightness(1)}50%{filter:brightness(.6)}100%{transform:rotateY(180deg);filter:brightness(1)}}
@keyframes turnPrev{0%{transform:rotateY(0);filter:brightness(1)}50%{filter:brightness(.6)}100%{transform:rotateY(-180deg);filter:brightness(1)}}
.page-hit{position:absolute;z-index:10;top:0;bottom:0;width:18%;border:0;background:transparent;cursor:pointer}.previous-hit{right:0}.next-hit{left:0}
.controls{display:grid;grid-template-columns:auto minmax(220px,520px) auto;gap:18px;align-items:center;justify-content:center;margin:20px auto 12px}
.nav-button,.jump{border:1px solid rgba(199,164,104,.42);background:rgba(36,30,24,.9);color:var(--ink);border-radius:999px;padding:10px 18px;font:600 .9rem system-ui;cursor:pointer;transition:.2s}.nav-button:hover,.jump:hover,.jump.active{background:var(--gold);color:#21170d}
.nav-button:disabled{opacity:.32;cursor:not-allowed}.progress-area{display:grid;gap:7px}.progress-area input[type=range]{width:100%;accent-color:var(--gold)}
.page-status{display:flex;justify-content:space-between;color:var(--muted);font:.78rem system-ui}.page-status input{width:3.2rem;border:0;border-bottom:1px solid rgba(199,164,104,.45);background:transparent;color:var(--ink);text-align:right;font:inherit}
.jumps{display:flex;gap:8px;justify-content:center}.jump{padding:7px 16px;font-size:.8rem}
dialog{max-width:430px;border:1px solid #8a704a;border-radius:12px;background:#251f19;color:var(--ink);padding:28px 32px;box-shadow:0 28px 80px #000}dialog::backdrop{background:rgba(0,0,0,.66)}dialog h2{font-weight:500;margin-top:0}dialog p,dialog li{font:1rem/1.8 system-ui;color:#ddd4c8}.dialog-close{position:absolute;right:14px;top:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:720px){.bar{height:64px;padding:10px 16px}.eyebrow{font-size:.62rem}.identity h1{font-size:.9rem}main{min-height:calc(100dvh - 64px);padding:12px 10px 18px}.book{width:min(87vw,510px);aspect-ratio:1/1.414;display:block}.page{position:absolute;inset:0;border-radius:5px!important}.page-left{display:none}.page-right{box-shadow:none}.gutter{display:none}.cover-page{inset:0}.page-hit{width:28%}.controls{grid-template-columns:auto 1fr auto;gap:8px;margin-top:14px}.nav-button{padding:9px 12px}.nav-button span:first-child:last-child{display:none}.jumps{gap:6px}.jump{padding:7px 13px}}
@media(prefers-reduced-motion:reduce){.book.turn-next .page-left,.book.turn-prev .page-right{animation:none}}