:root { color-scheme: dark; --ink:#f8f3e8; --muted:#aab3c4; --panel:#152033; --panel-2:#0e1727; --accent:#ee6f87; --focus:#f4c95d; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:#0b1220; color:var(--ink); font:15px/1.4 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
button,select,input { border:1px solid #3a465b; border-radius:9px; color:var(--ink); background:#1a263a; }
button { min-height:38px; padding:.45rem .75rem; cursor:pointer; }
button:hover:not(:disabled) { border-color:#748099; background:#243149; }
button:disabled { opacity:.4; cursor:not-allowed; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:50; background:var(--focus); color:#101828; padding:.7rem 1rem; border-radius:8px; }
.skip-link:focus { top:1rem; }
.reader { height:100%; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; }
.reader-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.75rem 1.25rem; background:var(--panel-2); border-bottom:1px solid #263247; }
.publication-title { display:flex; align-items:center; gap:.75rem; min-width:0; }
.publication-title small { display:block; color:var(--muted); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.publication-title h1 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 1rem/1.25 Georgia,serif; }
.brand-dot { width:26px; height:26px; border-radius:9px 50% 50%; transform:rotate(12deg); background:var(--accent); flex:none; }
.reader-status { color:var(--muted); text-transform:capitalize; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap; padding:.6rem 1.25rem; background:var(--panel); border-bottom:1px solid #263247; }
.control-group { display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; }
.control-group label { display:flex; align-items:center; gap:.4rem; color:var(--muted); }
.page-jump input { width:4.2rem; padding:.45rem; text-align:center; }
select { padding:.45rem 2rem .45rem .65rem; }
#zoomOutput { width:3.5rem; color:var(--muted); text-align:center; }
.reader-stage { position:relative; min-height:0; overflow:auto; overscroll-behavior:contain; display:grid; place-items:center; padding:30px; background:radial-gradient(circle at 50% 20%,#25334c 0,#111b2d 55%,#0b1220 100%); }
.stage-message { max-width:36rem; padding:1.25rem 1.5rem; text-align:center; color:var(--muted); background:rgba(10,17,29,.8); border:1px solid #344057; border-radius:14px; }
.spread-shell { position:relative; flex:none; }
.spread { position:absolute; left:0; top:0; display:flex; gap:0; align-items:flex-start; transform-origin:top left; transition:opacity 180ms ease,transform 180ms ease; }
.spread.is-turning { opacity:.55; }
.reader-page { position:relative; z-index:1; flex:none; overflow:hidden; color:#182033; background:#FFFFFF; box-shadow:0 18px 55px rgba(0,0,0,.42); container-type:size; }
.reader-page.has-spread-background { background:transparent; }
.reader-spread-background,.reader-spread-objects { position:absolute; inset:0; pointer-events:none; }
.reader-spread-background { z-index:0; overflow:hidden; }
.reader-spread-background .page-image { width:100%; height:100%; object-fit:cover; }
.reader-spread-objects { z-index:2; }
.reader-page img.page-image { display:block; width:100%; height:100%; object-fit:contain; background:#FFFFFF; }
.page-placeholder { position:absolute; inset:0; display:grid; place-items:center; padding:8%; text-align:center; color:#475569; background:repeating-linear-gradient(135deg,#f7f2e9 0 18px,#eee7dc 18px 36px); }
.page-placeholder strong { display:block; color:#27364b; font:600 clamp(22px,6cqw,56px)/1.1 Georgia,serif; margin-bottom:.5em; }
.page-object { position:absolute; overflow:hidden; transform-origin:center; }
.page-object.text { padding:.2em; white-space:pre-wrap; overflow-wrap:anywhere; color:#20283a; font-family:Georgia,serif; font-size:clamp(14px,4cqw,48px); }
.page-object.shape, .page-object.panel { background:#ee6f87; border-radius:8px; }
.page-object.panel { box-shadow:inset 0 0 0 2px rgba(35,34,42,.35); }
.page-object img { width:100%; height:100%; display:block; object-fit:cover; }
.media-fallback { border:2px solid rgba(255,255,255,.45); background:#25334c; }
.immersive-controls { position:absolute; z-index:1000; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:6px; align-items:center; padding:6px; border-radius:11px; background:rgba(11,18,32,.86); box-shadow:0 4px 18px rgba(0,0,0,.3); }
.immersive-controls button { min-height:30px; padding:.2rem .55rem; }
.immersive-controls input { width:min(180px,28vw); }
.reader-footer { display:flex; justify-content:space-between; gap:1rem; padding:.55rem 1.25rem; color:var(--muted); background:var(--panel-2); border-top:1px solid #263247; font-size:.8rem; }
@media (max-width:780px) { .toolbar { align-items:flex-start; } .control-group { width:100%; } .reader-stage { padding:16px; } #fullscreenButton { display:none; } .reader-footer span:first-child { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:0.01ms!important; animation-duration:0.01ms!important; animation-iteration-count:1!important; } }
.library-back{color:var(--ink,#221d1a);font-weight:750;text-underline-offset:4px;white-space:nowrap}.library-back:focus-visible{outline:3px solid #315f8d;outline-offset:4px;border-radius:3px}