:root { --blue:#06376f; --blue-dark:#032b59; --teal:#08aeb8; --white:#fff; }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { width:100%; min-height:100%; overflow:hidden; }
body { color:#fff; background:#070d14; font-family:"Plus Jakarta Sans",sans-serif; }
button,a { font:inherit; }
.catalog-reader { min-height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:linear-gradient(145deg,#060c13,#0b1722); }
.reader-header { position:relative; z-index:30; min-height:64px; padding:.55rem clamp(.75rem,2vw,1.5rem); display:grid; grid-template-columns:1fr minmax(0,2fr) 1fr; align-items:center; gap:1rem; border-bottom:1px solid rgba(255,255,255,.1); background:rgba(3,12,22,.88); backdrop-filter:blur(14px); }
.reader-back { justify-self:start; padding:.55rem .75rem; border-radius:999px; color:rgba(255,255,255,.82); font-weight:700; text-decoration:none; transition:.2s; }
.reader-back:hover { color:#fff; background:rgba(255,255,255,.09); }
.reader-title { min-width:0; text-align:center; }
.reader-title small { color:#65d9df; font:800 .67rem/1 "Sora",sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.reader-title h1 { overflow:hidden; margin-top:.28rem; font:700 clamp(.82rem,2vw,1.05rem)/1.15 "Sora",sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.reader-tools { justify-self:end; display:flex; align-items:center; gap:.3rem; }
.reader-tools button,.reader-tools a { height:40px; min-width:40px; padding:0 .7rem; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:999px; color:rgba(255,255,255,.86); background:transparent; text-decoration:none; cursor:pointer; transition:.2s; }
.reader-tools button:hover { color:#fff; border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.09); }
.reader-tools a { gap:.35rem; color:#031b34; background:#65d9df; font-weight:800; }
.reader-tools a:hover { background:#fff; }
.reader-stage { position:relative; min-height:0; display:grid; place-items:center; overflow:auto; padding:clamp(.7rem,2vw,1.5rem) clamp(3.4rem,6vw,5.5rem); scrollbar-color:rgba(101,217,223,.45) transparent; }
.reader-glow { position:fixed; inset:64px 0 50px; pointer-events:none; background:radial-gradient(55% 50% at 50% 45%,rgba(8,174,184,.16),transparent 72%); }
.reader-status { position:relative; z-index:3; color:#d9f5f7; font-weight:800; text-align:center; }
.reader-status.is-hidden { display:none; }
.book-stage { display:none; place-items:center; perspective:2200px; }
.book-stage.is-ready { display:grid; }
.book { position:relative; max-width:none; background:#fff; box-shadow:0 32px 90px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.12); transform-style:preserve-3d; transition:width .2s,height .2s; }
.book::after { content:""; position:absolute; z-index:8; left:3%; right:3%; bottom:-19px; height:19px; border-radius:50%; background:rgba(0,0,0,.45); filter:blur(12px); }
.book-page { position:absolute; inset:0; display:none; width:100%; height:100%; background:#fff; backface-visibility:hidden; transform-style:preserve-3d; }
.book-page.is-current { display:block; z-index:2; }.book-page.is-incoming { display:block; z-index:3; }
.book-page.turn-out-next { transform-origin:left center; animation:turn-out-next .62s cubic-bezier(.55,.05,.28,1) both; }.book-page.turn-in-next { transform-origin:left center; animation:turn-in-next .62s cubic-bezier(.55,.05,.28,1) both; }.book-page.turn-out-prev { transform-origin:right center; animation:turn-out-prev .62s cubic-bezier(.55,.05,.28,1) both; }.book-page.turn-in-prev { transform-origin:right center; animation:turn-in-prev .62s cubic-bezier(.55,.05,.28,1) both; }
.book-spine { position:absolute; z-index:5; inset:0 auto 0 0; width:12px; pointer-events:none; background:linear-gradient(90deg,rgba(3,26,52,.27),transparent); }
.page-arrow { position:fixed; z-index:15; top:50%; width:48px; height:48px; border:1px solid rgba(255,255,255,.17); border-radius:50%; color:#fff; background:rgba(0,0,0,.48); backdrop-filter:blur(8px); font-size:2.1rem; line-height:1; cursor:pointer; transition:.2s; transform:translateY(-50%); }
.page-arrow:hover:not(:disabled) { color:#032b59; border-color:#65d9df; background:#65d9df; transform:translateY(-50%) scale(1.06); }.page-arrow:disabled { opacity:.25; cursor:not-allowed; }.page-arrow-prev { left:clamp(.45rem,2vw,1.5rem); }.page-arrow-next { right:clamp(.45rem,2vw,1.5rem); }
.reader-footer { position:relative; z-index:25; min-height:50px; padding:.5rem clamp(.8rem,2vw,1.5rem); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; border-top:1px solid rgba(255,255,255,.1); background:rgba(3,12,22,.9); color:rgba(255,255,255,.62); font-size:.78rem; }.page-progress { display:flex; align-items:center; gap:.5rem; color:#fff; font:700 .9rem/1 "Sora",sans-serif; }.reader-footer button { justify-self:end; border:0; color:#65d9df; background:none; font-weight:800; cursor:pointer; }
.thumbnail-panel { position:fixed; z-index:60; top:0; right:0; width:min(430px,88vw); height:100dvh; display:flex; flex-direction:column; color:#fff; background:#0a1723; box-shadow:-24px 0 70px rgba(0,0,0,.5); transform:translateX(105%); transition:transform .3s ease; }.thumbnail-panel.is-open { transform:translateX(0); }.thumbnail-head { min-height:64px; padding:.8rem 1rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.1); }.thumbnail-head strong { font-family:"Sora",sans-serif; }.thumbnail-head button { width:40px; height:40px; border:0; border-radius:50%; color:#fff; background:rgba(255,255,255,.08); font-size:1.6rem; cursor:pointer; }
.thumbnail-grid { padding:1rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; overflow:auto; }.thumbnail-item { padding:.45rem; border:1px solid rgba(255,255,255,.12); border-radius:6px; color:#fff; background:rgba(255,255,255,.05); cursor:pointer; }.thumbnail-item:hover,.thumbnail-item.is-active { border-color:#65d9df; box-shadow:0 0 0 2px rgba(101,217,223,.16); }.thumbnail-item canvas { display:block; width:100%; height:auto; background:#fff; }.thumbnail-item span { display:block; padding:.45rem 0 .1rem; text-align:center; font-size:.75rem; }
.panel-backdrop { position:fixed; z-index:55; inset:0; display:none; border:0; background:rgba(0,0,0,.62); }.panel-backdrop.is-open { display:block; }body.is-zoomed .reader-stage { place-items:start center; }
@keyframes turn-out-next { 0%{transform:rotateY(0);filter:brightness(1)}55%{filter:brightness(.65)}100%{transform:rotateY(-89deg);filter:brightness(.86)} }@keyframes turn-in-next { 0%{transform:rotateY(89deg);filter:brightness(.72)}100%{transform:rotateY(0);filter:brightness(1)} }@keyframes turn-out-prev { 0%{transform:rotateY(0);filter:brightness(1)}55%{filter:brightness(.65)}100%{transform:rotateY(89deg);filter:brightness(.86)} }@keyframes turn-in-prev { 0%{transform:rotateY(-89deg);filter:brightness(.72)}100%{transform:rotateY(0);filter:brightness(1)} }
@media(max-width:720px){.reader-header{grid-template-columns:auto minmax(0,1fr) auto;gap:.4rem}.reader-back span,.reader-tools a span{display:none}.reader-title small{display:none}.reader-tools{gap:0}.reader-tools button,.reader-tools a{min-width:36px;height:36px;padding:0 .5rem}.reader-stage{padding:1rem 2.8rem}.reader-hint{display:none}.reader-footer{grid-template-columns:1fr auto}.page-progress{justify-self:start}.reader-footer button{grid-column:2}.page-arrow{width:40px;height:40px}.page-arrow-prev{left:.25rem}.page-arrow-next{right:.25rem}}
@media(prefers-reduced-motion:reduce){.book-page{animation-duration:.01ms!important}.thumbnail-panel{transition:none}}