:root { color-scheme: dark; --bg:#140d24; --surface:#27163c; --lilac:#b58de6; --white:#fcfafc; --muted:#b5acc4; --orange:#fa8254; --lime:#dce747; --faint:rgba(255,255,255,.12); }
* { box-sizing:border-box; }
html { min-height:100%; }
body { min-height:100dvh; margin:0; overflow-x:hidden; color:var(--white); background:radial-gradient(circle at 50% 35%,#382057 0%,#211335 40%,var(--bg) 83%); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; font:inherit; cursor:pointer; }
button:focus-visible,a:focus-visible,.book-stage:focus-visible { outline:3px solid #dce747; outline-offset:3px; }
[hidden] { display:none !important; }
.ambient { position:fixed; z-index:-1; pointer-events:none; border-radius:50%; filter:blur(90px); opacity:.25; }
.ambient-one { width:420px;height:420px; top:17%;left:-15%;background:#c5419d; }
.ambient-two { width:450px;height:450px;bottom:7%;right:-17%;background:#8034e1; }
.app-shell { display:flex; flex-direction:column; min-height:100dvh; position:relative; }
.header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px clamp(18px,4.2vw,68px); border-bottom:1px solid rgba(255,255,255,.09);background:rgba(24,13,40,.67); backdrop-filter:blur(18px); }
.brand-area,.header-actions,.brand-text,.header-context,.icon-button { display:flex; }
.brand-area { align-items:center; gap:10px;min-width:0; }
.brand-icon { display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;font-weight:900;font-style:italic;font-size:25px;color:white;background:linear-gradient(145deg,#fe9e57,#f14891 65%);box-shadow:0 0 0 3px #ffffff20; }
.brand-text { flex-direction:column; line-height:1.05; }
.brand-text strong { letter-spacing:-1.7px;font-size:23px;line-height:1.05; }
.brand-text small { font-size:5.6px;letter-spacing:.3px;font-weight:800;color:#dbd4e5;white-space:nowrap; }
.brand-accent { color:var(--orange); }
.brand-divider {height:32px;width:1px;background:rgba(255,255,255,.19);margin:0 8px 0 12px;}
.header-context { flex-direction:column; gap:3px; min-width:0; }
.eyebrow {font-weight:700;font-size:9px;letter-spacing:1.9px;color:var(--lime); }
.catalog-name {font-size:13px;color:#f1edf5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.header-actions { flex:none;align-items:center;gap:9px; }
.icon-button { align-items:center;justify-content:center;gap:7px;min-width:42px;height:37px;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:0 11px;background:rgba(255,255,255,.055);font-size:12px;font-weight:600;transition:background .15s,border-color .15s; }
.icon-button:hover,.icon-button.active { background:#ffffff23;border-color:#ffffff44; }
.icon-button svg {width:17px;height:17px;flex:none;}
.icon-button.muted .sound-waves { display:none; }
.icon-button.muted .icon { opacity:.5; }
.icon-button.muted::after {content:"";position:absolute;transform:rotate(45deg);width:21px;height:1.6px;background:var(--orange);margin-left:-48px;pointer-events:none;}
.reader { display:flex;flex-direction:column;align-items:center; flex:1; padding:27px 22px 17px; }
.reader-heading { text-align:center; margin-bottom:23px; }
.small-label { display:inline-flex;align-items:center;gap:9px;font-size:10px;letter-spacing:2px;color:#d9cbe7;font-weight:750; }
.accent-dot {width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px #fa825425;}
.sep {color:#5f447b;}
h1 {font-size:clamp(28px,3.1vw,43px);letter-spacing:-1.8px;font-weight:800;line-height:1.1;margin:9px 0 9px; }
h1 em {font-style:normal;color:var(--lime);}
.reader-heading p { font-size:13px;line-height:1.5;margin:0;color:#bcb1cd; }
.book-outer {width:min(100%,1050px,calc((100dvh - 310px) * 2));position:relative;margin:0 auto;min-width:0;}
.book-stage { position:relative;aspect-ratio:2/1; width:100%;margin:0 auto;perspective:2100px; transform-style:preserve-3d;user-select:none;touch-action:pan-y; cursor:pointer; filter:drop-shadow(0 12px 17px rgba(0,0,0,.13)); }
.book-stage::after {content:"";position:absolute;inset:0;border:1px solid #ffffff22;pointer-events:none;z-index:8;box-shadow:0 2px 9px #0005;}
.page { position:absolute;top:0;height:100%;width:50%;overflow:hidden;background:#fbf9fc; box-shadow:inset 0 0 30px #10091c1a; }
.page-left {left:0;box-shadow:inset -20px 0 35px #180e2940;}
.page-right {left:50%;box-shadow:inset 20px 0 35px #180e292f;}
.page img,.flip-face img,.mobile-page img,.mobile-flip img { display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.page .empty-side { position:absolute;inset:0;background:linear-gradient(105deg,#eee9ef,#f7f2f7 70%,#f1ecf5);}
.page-left:has(img:not([hidden])) .empty-side,.page-right:has(img:not([hidden])) .empty-side {display:none;}
.book-binding { position:absolute;left:calc(50% - 2px);width:4px;inset-block:0;z-index:4;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(255,255,255,.2),rgba(0,0,0,.18));box-shadow:0 0 15px #0006;pointer-events:none; }
.flip-sheet {display:none;position:absolute;z-index:6;top:0;left:50%;height:100%;width:50%;transform-origin:left center;transform-style:preserve-3d;will-change:transform; }
.flip-sheet.active {display:block;}
.flip-face {position:absolute;inset:0;overflow:hidden;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 12px 23px #0006;}
.flip-face::after {content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 36%,rgba(255,255,255,.22) 65%,rgba(0,0,0,.17));opacity:.5;}
.flip-back {transform:rotateY(180deg);}
.flip-back::after {background:linear-gradient(90deg,rgba(0,0,0,.24),transparent 45%,rgba(0,0,0,.17));}
.book-shadow {height:21px;width:95%;margin:0 auto;background:radial-gradient(ellipse at center,rgba(0,0,0,.56),rgba(0,0,0,.1) 60%,transparent 75%);filter:blur(8px);transform:translateY(-3px);pointer-events:none;}
.mobile-page,.mobile-flip,.page-corner {display:none;}
.navigator {display:flex;align-items:center;justify-content:center;gap:21px;width:100%;max-width:570px;margin:13px 0 0;}
.nav-arrow {display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.09);border:1px solid #ffffff24;transition:background .18s,transform .18s;color:white;}
.nav-arrow:hover:not(:disabled) {background:#864bb7;transform:translateY(-2px);}
.nav-arrow:disabled {opacity:.28;cursor:not-allowed;}
.nav-arrow .icon {width:22px;height:22px;}
.page-indicator {display:flex;align-items:center;gap:15px;justify-content:center;flex:1;min-width:0;}
.page-label { min-width:112px;text-align:right;font-size:12px;font-weight:750;color:#f6f1fa;white-space:nowrap;}
.page-count {min-width:63px;font-size:12px;letter-spacing:1.6px;color:#b5a8c7;font-weight:650;font-variant-numeric:tabular-nums;}
.progress-track {width:110px;height:3px;border-radius:6px;background:#ffffff25;position:relative;overflow:hidden;}
.progress-bar {position:absolute;height:100%;top:0;left:0;background:linear-gradient(90deg,#f27763,#dce747);width:6%;transition:width .3s;}
.reader-footer {display:flex;justify-content:space-between;align-items:center;gap:16px;width:min(100%,1050px);margin-top:4px;}
.reader-tip {display:flex;align-items:center;gap:7px;color:#9b8cad;font-size:11px;}
.tiny-icon {width:16px;height:16px;flex:none;}
.footer-actions {display:flex;align-items:center;gap:20px;}
.text-button {display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#dfd3ec;text-decoration:none;background:none;border:none;padding:7px 0;white-space:nowrap;}
.text-button:hover {color:var(--lime);}
.bottom-footer {display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px clamp(18px,4.2vw,68px);border-top:1px solid rgba(255,255,255,.09);font-size:11px;color:#827391; }
.bottom-dot { color:var(--orange);margin:0 4px; }
.bottom-footer button {border:0;background:transparent;color:#c9bbd6;display:flex;align-items:center;gap:8px;font-size:11px;}
.bottom-footer button:hover {color:var(--lime);}
.thumbnails-panel {width:min(100%,1050px);border:1px solid #ffffff1c;border-radius:18px;background:#ffffff0b;margin-top:20px;padding:15px 17px 18px;}
.thumbnails-heading {display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px;}
.thumbnails-heading div {display:flex;flex-direction:column;gap:3px;}
.thumbnails-heading strong {font-size:13px;}
.thumbnails-heading span {font-size:11px;color:var(--muted);}
.thumb-close {width:30px;height:30px;border:0;border-radius:9px;background:#ffffff1a;}
.thumbnail-list {display:flex;gap:12px;overflow-x:auto;padding:3px 3px 8px;scroll-snap-type:x mandatory;scrollbar-color:#6c4a83 transparent;}
.thumb-item {flex:0 0 82px;width:82px;border:2px solid transparent;border-radius:8px;background:none;padding:3px;color:#aba1b7;scroll-snap-align:start;}
.thumb-item img {display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px;box-shadow:0 5px 10px #0004;}
.thumb-item span {display:block;margin-top:7px;font-size:10px;font-weight:650;}
.thumb-item:hover {border-color:#fff4;}
.thumb-item.selected {border-color:var(--lime);color:var(--lime);}
.zoom-modal {position:fixed;inset:0;z-index:100;background:#100d17f8;display:flex;flex-direction:column;}
.zoom-toolbar {height:66px;flex:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 20px;border-bottom:1px solid #ffffff20;font-size:12px;font-weight:700;}
.zoom-toolbar-actions {display:flex;align-items:center;gap:9px;}
.zoom-toolbar-actions button {width:36px;height:36px;border-radius:8px;border:1px solid #ffffff33;background:#ffffff13;font-size:19px;}
.zoom-toolbar-actions button:hover {background:#ffffff2d;}
.zoom-toolbar-actions span {font-size:12px;font-variant-numeric:tabular-nums;min-width:47px;text-align:center;}
.zoom-viewport {flex:1;overflow:auto;display:grid;place-items:center;padding:18px;min-height:0;}
.zoom-viewport img {display:block;width:min(100%,calc(100dvh - 132px));max-width:none;height:auto;max-height:none;object-fit:contain;margin:auto;box-shadow:0 10px 50px #000a;}
.zoom-guidance {text-align:center;color:#a49cab;font-size:11px;padding:0 12px 14px;}
body.zoom-open {overflow:hidden;}
@media(max-width:900px){.brand-divider,.header-context {display:none;}.book-outer{width:min(100%,calc((100dvh - 305px)*2));}.reader-tip{display:none;}.reader-footer{justify-content:center;}}
@media(max-width:760px){
 .header {padding:11px 15px;}.header-actions{gap:6px;}.button-text,.only-desktop{display:none!important;}.icon-button{min-width:38px;height:36px;padding:0 9px;}.brand-text strong{font-size:21px;}.brand-icon{width:29px;height:29px;}
 .reader{padding:23px 15px 15px;}.reader-heading{margin-bottom:24px;}.reader-heading h1{font-size:clamp(27px,7vw,36px);margin-top:12px;letter-spacing:-1px;}.reader-heading p{font-size:11px;max-width:340px;margin:auto;}.small-label{font-size:9px;letter-spacing:1.5px;}
 .book-outer{width:min(100%,530px,calc(100dvh - 306px));min-width:0;}
 .book-stage{aspect-ratio:1/1;perspective:1450px;}
 .page,.book-binding,.flip-sheet{display:none!important;}
 .mobile-page {display:block;position:absolute;inset:0;overflow:hidden;background:white;box-shadow:0 8px 22px #0006;}
 .mobile-flip {position:absolute;inset:0;z-index:6;display:none;transform-origin:left center;transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:3px 4px 24px #0008;will-change:transform;overflow:hidden;}
 .mobile-flip.active{display:block;}
 .mobile-flip::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0006,transparent 34%,#fff3 69%,#0005);opacity:.45;}
 .page-corner{display:block;position:absolute;top:0;bottom:0;width:9%;z-index:2;pointer-events:none;opacity:0;}
 .page-corner-left{left:0;background:linear-gradient(90deg,#0003,transparent);}.page-corner-right{right:0;background:linear-gradient(270deg,#0003,transparent);}
 .book-shadow{height:16px;}
 .navigator{margin-top:11px;max-width:460px;gap:13px;}.nav-arrow{height:42px;width:42px;}.page-indicator{gap:10px;}.page-label{min-width:75px;}.page-count{min-width:58px;}.progress-track{width:min(14vw,84px);}.reader-footer{margin-top:12px;}.footer-actions{gap:30px;}.bottom-footer{padding:12px 15px;}.bottom-footer span{font-size:10px;}.bottom-footer button{font-size:10px;}
}
@media(max-width:420px){.reader-heading p{font-size:10.5px;}.book-outer{width:min(100%,calc(100dvh - 295px));}.navigator{gap:8px;}.page-count{font-size:10px;}.page-label{font-size:11px;}.progress-track{width:40px;}.bottom-footer span{max-width:160px;}}
@media(max-height:680px) and (min-width:761px){.reader{padding-top:13px;}.reader-heading{margin-bottom:10px;}.reader-heading p{display:none;}.book-outer{width:min(100%,calc((100dvh - 260px)*2));}.navigator{margin-top:0;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;}}
/* Controls: anchor mute indicator to its own button. */
.icon-button {position:relative;}
.icon-button.muted::after {left:50%;top:50%;margin-left:0;transform:translate(-50%,-50%) rotate(-45deg);}