:root{
  color-scheme:dark;
  --bg:#100d0a;
  --panel:#1b1611;
  --panel-2:#261f18;
  --ink:#f2eadb;
  --muted:#baa98e;
  --gold:#c9a66b;
  --shadow:rgba(0,0,0,.62);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 18%,#2b2117 0,#17110d 38%,#0c0a08 100%);color:var(--ink);font-family:"Hiragino Mincho ProN","Yu Mincho",serif}
body{min-height:100dvh;overflow-x:hidden}
button,input{font:inherit}
button{color:inherit}
.topbar{height:76px;padding:10px clamp(14px,3vw,34px);display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(201,166,107,.24);background:rgba(14,11,9,.88);backdrop-filter:blur(12px)}
.title-block{min-width:0}.eyebrow{margin:0 0 3px;color:var(--gold);font:600 .72rem/1.2 system-ui;letter-spacing:.22em}.title-block h1{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(1rem,2.2vw,1.35rem);font-weight:500;letter-spacing:.06em}
.top-actions{display:flex;align-items:center;gap:8px;flex:none}.tool,.round{border:1px solid rgba(201,166,107,.45);background:#211a14;color:var(--ink);cursor:pointer}.tool{padding:9px 14px;border-radius:999px;font:600 .82rem system-ui}.round{width:38px;height:38px;border-radius:50%;font:700 1rem system-ui}
.reader-shell{min-height:calc(100dvh - 76px);display:flex;flex-direction:column;align-items:center;padding:18px 16px 20px}
.book-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;flex:1;overflow:auto;overscroll-behavior:contain}
.book{--zoom:1;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr);align-items:center;width:min(calc((100dvh - 206px)*1.414),94vw);transform:scale(var(--zoom));transform-origin:center center;transition:transform .18s ease}
.sheet{position:relative;margin:0;background:#fff;box-shadow:0 18px 50px var(--shadow);overflow:hidden;aspect-ratio:419.528/595.276}
.sheet img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.cover-page{position:absolute;inset:0;z-index:2;padding:7.5%;background:
  radial-gradient(circle at 72% 20%,rgba(212,177,105,.16),transparent 28%),
  linear-gradient(145deg,#182d44 0%,#0c1d31 55%,#071321 100%);color:#f5ead1}
.cover-frame{position:relative;width:100%;height:100%;border:2px solid #c7a45e;box-shadow:inset 0 0 0 5px #0b1a2a,inset 0 0 0 6px rgba(199,164,94,.5)}
.cover-frame:before,.cover-frame:after{content:"";position:absolute;left:7%;right:7%;height:1px;background:linear-gradient(90deg,transparent,#c7a45e,transparent)}
.cover-frame:before{top:8%}.cover-frame:after{bottom:8%}
.cover-era,.cover-volume,.cover-author,.cover-editor,.cover-frame h2{position:absolute;margin:0;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.12em}
.cover-era{right:10%;top:13%;font-size:clamp(.55rem,1vw,.82rem);color:#d8c79f}
.cover-frame h2{right:29%;top:13%;height:69%;font-size:clamp(1.2rem,3.1vw,2.45rem);font-weight:500;line-height:1.42;letter-spacing:.08em}
.cover-volume{right:61%;top:27%;font-size:clamp(.8rem,1.7vw,1.25rem)}
.cover-author{right:72%;top:45%;font-size:clamp(.72rem,1.45vw,1.08rem);color:#e5d6b5}
.cover-editor{left:8%;bottom:13%;font-size:clamp(.48rem,.9vw,.72rem);color:#cdbb94}
.sheet-left{border-radius:4px 0 0 4px}.sheet-right{border-radius:0 4px 4px 0}.gutter{height:98%;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(255,255,255,.08),rgba(0,0,0,.72));box-shadow:0 0 18px rgba(0,0,0,.65);z-index:2}
.page-area{position:absolute;z-index:5;top:0;bottom:0;width:25%;border:0;background:transparent;cursor:pointer}.page-area-next{left:0}.page-area-prev{right:0}
.controls{width:min(900px,96vw);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-top:14px}.nav{border:1px solid rgba(201,166,107,.45);background:var(--panel-2);padding:10px 18px;border-radius:999px;cursor:pointer;font:600 .88rem system-ui}.nav:disabled{opacity:.3;cursor:not-allowed}
.progress{min-width:0}.progress>input{width:100%;accent-color:var(--gold)}.page-line{display:flex;justify-content:space-between;color:var(--muted);font:500 .78rem system-ui}.page-line input{width:4.1rem;border:0;border-bottom:1px solid rgba(201,166,107,.45);background:transparent;color:var(--ink);text-align:right}
.zoom-controls{display:flex;align-items:center;gap:8px;margin-top:8px;font:600 .82rem system-ui}.zoom-controls button{min-width:36px;height:32px;border:1px solid rgba(201,166,107,.4);border-radius:16px;background:var(--panel);cursor:pointer}.zoom-controls input{width:min(220px,45vw);accent-color:var(--gold)}
dialog{max-width:min(520px,88vw);border:1px solid rgba(201,166,107,.55);border-radius:16px;padding:28px;background:#1b1611;color:var(--ink);box-shadow:0 25px 70px #000}dialog::backdrop{background:rgba(0,0,0,.75)}dialog h2{margin-top:0}.dialog-close{position:absolute;right:12px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#30261c;color:var(--ink);cursor:pointer}
.single .book{grid-template-columns:minmax(0,1fr);width:min(calc((100dvh - 206px)*.707),72vw)}.single .gutter,.single .sheet-left{display:none}.single .sheet-right{border-radius:4px}
body.cover-view .book{grid-template-columns:minmax(0,1fr);width:min(calc((100dvh - 206px)*.707),72vw)}
body.cover-view .gutter,body.cover-view .sheet-left{display:none}
body.cover-view .sheet-right{border-radius:4px}
.turn-next .sheet-left{animation:turnNext .42s ease}.turn-prev .sheet-right{animation:turnPrev .42s ease}
@keyframes turnNext{50%{transform:perspective(1200px) rotateY(18deg);filter:brightness(.78)}}@keyframes turnPrev{50%{transform:perspective(1200px) rotateY(-18deg);filter:brightness(.78)}}
@media(max-width:760px){
  .topbar{height:66px}.eyebrow{display:none}.top-actions .tool:first-child{display:none}.tool{padding:8px 11px}
  .reader-shell{min-height:calc(100dvh - 66px);padding:10px 8px 14px}
  body:not(.force-spread) .book{grid-template-columns:minmax(0,1fr);width:min(calc((100dvh - 190px)*.707),92vw)}
  body:not(.force-spread) .gutter,body:not(.force-spread) .sheet-left{display:none}
  body:not(.force-spread) .sheet-right{border-radius:4px}
  .controls{grid-template-columns:auto 1fr auto;gap:7px;margin-top:9px}.nav{padding:9px 11px;font-size:.78rem}.page-line{font-size:.72rem}
  .page-area{width:34%}
}
@media(max-height:620px){.topbar{height:58px}.reader-shell{min-height:calc(100dvh - 58px);padding-top:7px}.zoom-controls{display:none}.book{width:min(calc((100dvh - 145px)*1.414),90vw)}}