:root{--orange:#d96728;--ink:#0b0a08;--paper:#e9dfc7;--muted:#9b9487;--ratio:.6667}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#080705;color:#eee;font-family:Arial,Helvetica,sans-serif;overflow:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:radial-gradient(#fff 0.45px,transparent .7px);background-size:4px 4px;mix-blend-mode:soft-light}
.app{height:100%;display:grid;grid-template-rows:64px 1fr 54px;background:radial-gradient(circle at center,#282016 0,#0b0906 57%,#050403 100%)}.topbar,.bottombar{display:flex;align-items:center;padding:0 20px;background:rgba(7,6,4,.95);border-color:#2e271e;z-index:10}.topbar{justify-content:space-between;border-bottom:1px solid #2e271e}.bottombar{gap:18px;border-top:1px solid #2e271e}.brand{display:flex;align-items:baseline;gap:10px;white-space:nowrap}.brand-main{font-family:Impact,"Arial Black",sans-serif;letter-spacing:.06em;font-size:18px}.brand-sub{font-family:Georgia,serif;font-style:italic;color:#bcaa8c;font-size:13px}button{font:700 11px/1 Arial,sans-serif;letter-spacing:.12em;color:#ddd;background:#17130f;border:1px solid #4a3b2a;padding:10px 12px;cursor:pointer}button:hover{border-color:var(--orange);color:#fff}.top-actions{display:flex;gap:8px}
.reader{min-height:0;display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;justify-items:center;perspective:1800px;padding:14px}.book{position:relative;width:min(calc(100vw - 190px),calc((100vh - 155px)*var(--ratio)));aspect-ratio:var(--ratio);max-height:calc(100vh - 155px);filter:drop-shadow(0 22px 38px rgba(0,0,0,.7));transform-style:preserve-3d;transition:width .25s ease,aspect-ratio .25s ease}.paper-under,.paper-top{position:absolute;inset:0;background:#111;border:1px solid #65533d;transform-style:preserve-3d;backface-visibility:hidden;overflow:hidden}.paper-under img,.paper-top img{width:100%;height:100%;object-fit:contain;display:block;background:#100d09}.paper-top{z-index:3;transform-origin:left center}.paper-under{z-index:1}.book.turn-next .paper-top{animation:turnNext .62s cubic-bezier(.55,.05,.3,1) forwards}.book.turn-prev .paper-top{transform-origin:right center;animation:turnPrev .62s cubic-bezier(.55,.05,.3,1) forwards}@keyframes turnNext{0%{transform:rotateY(0);filter:brightness(1)}45%{filter:brightness(.68)}100%{transform:rotateY(-178deg);filter:brightness(.4)}}@keyframes turnPrev{0%{transform:rotateY(0);filter:brightness(1)}45%{filter:brightness(.68)}100%{transform:rotateY(178deg);filter:brightness(.4)}}.page-sheen{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 14%,transparent 86%,rgba(0,0,0,.18));mix-blend-mode:overlay}.edge{height:90px;width:52px;border-radius:0;font-size:50px;line-height:50px;padding:0;border:0;background:transparent;color:#c6b79f;text-shadow:0 2px 6px #000}.edge:hover{color:var(--orange)}.edge:disabled{opacity:.18;cursor:default}.page-label{min-width:220px;font-family:Georgia,serif;color:#d4c5aa;font-size:13px}.page-count{font-variant-numeric:tabular-nums;color:#8f8779;font-size:12px;min-width:68px;text-align:right}.progress{height:2px;flex:1;background:#2d261d}.progress span{display:block;height:100%;width:0;background:var(--orange);transition:width .3s}
.drawer{width:min(1040px,92vw);max-height:88vh;background:#100d09;color:#eee;border:1px solid #58462f;padding:0;box-shadow:0 30px 80px #000}.drawer::backdrop{background:rgba(0,0,0,.84)}.dialog-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:#100d09;border-bottom:1px solid #3d3023}.dialog-head h2{margin:0;font-family:Impact,"Arial Black",sans-serif;letter-spacing:.06em}.dialog-head p{margin:5px 0 0;color:#9d917e;font-size:12px}.dialog-head button{font-size:22px;padding:7px 11px}.thumb-grid{padding:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:16px}.thumb{background:#17120d;border:1px solid #3b3024;padding:7px;cursor:pointer;color:#cfc2ab;text-align:left}.thumb:hover{border-color:var(--orange)}.thumb img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#0c0a07;display:block}.thumb span{display:block;font-size:11px;line-height:1.3;padding-top:7px}.art-grid{padding:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}.art-card{background:#17120d;border:1px solid #382e23;padding:8px}.art-card img{width:100%;height:240px;object-fit:contain;background:#0b0907;display:block;cursor:zoom-in}.art-card span{display:block;font-size:11px;color:#b9aa91;padding:7px 2px 1px}.art-card img:fullscreen{object-fit:contain;background:#080705}
@media(max-width:780px){.app{grid-template-rows:54px 1fr 48px}.brand-sub,#fsBtn{display:none}.brand-main{font-size:14px}.topbar{padding:0 8px}.top-actions{gap:4px}.top-actions button{padding:8px 7px;font-size:9px}.reader{grid-template-columns:34px minmax(0,1fr) 34px;padding:6px}.edge{width:30px;font-size:38px}.book{width:min(calc(100vw - 84px),calc((100vh - 125px)*var(--ratio)));max-height:calc(100vh - 125px)}.bottombar{padding:0 9px;gap:8px}.page-label{min-width:0;max-width:58%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.thumb-grid{grid-template-columns:repeat(3,1fr);gap:8px;padding:10px}}