:root { color-scheme: light; --ink:#16324b; --paper:#fffdf7; --accent:#ef694e; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:#edf1f4; color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
button, select { font:inherit; }
button, .reader-link { min-height:44px; border:1px solid #cdd7df; border-radius:12px; background:white; color:var(--ink); padding:10px 16px; cursor:pointer; font-weight:650; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
button:hover:not(:disabled),.reader-link:hover { background:#e7eef3; border-color:#8ca5b8; }
button:disabled { opacity:.4; cursor:default; }
:focus-visible { outline:3px solid #e56b22; outline-offset:4px; }
.reader-header { background:var(--ink); color:white; padding:12px clamp(12px,4vw,48px); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.reader-brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:800; }
.reader-brand img { width:52px; height:42px; border-radius:8px; object-fit:cover; }
.reader-header nav { display:flex; gap:8px; }
.reader-header .reader-link { color:white; background:transparent; border-color:#ffffff40; }
.reader-header .reader-link:hover { background:#ffffff18; }
.reader-shell { --page-height:calc(100dvh - 245px); max-width:1600px; margin:auto; padding:16px clamp(10px,3vw,40px) 28px; }
.reader-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.reader-eyebrow { margin:0 0 4px; color:#536979; text-transform:uppercase; letter-spacing:.15em; font-size:11px; font-weight:750; }
h1 { font-size:clamp(19px,3vw,30px); line-height:1.2; margin:0; }
.reader-options { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.reader-options label { font-size:13px; font-weight:650; }
select { padding:10px; border:1px solid #cdd7df; background:white; color:var(--ink); border-radius:10px; min-height:44px; max-width:100%; }
.reader-stage { display:flex; justify-content:center; align-items:center; gap:4px; min-height:240px; background:#dce3e8; border:1px solid #ced8df; border-radius:16px; padding:12px; overflow:auto; touch-action:pan-y pinch-zoom; }
.reader-page { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; flex:1 1 0; min-width:0; max-width:720px; min-height:200px; background:var(--paper); box-shadow:0 4px 16px #18364b15; overflow:hidden; }
.reader-page img { width:100%; height:auto; max-height:max(240px,var(--page-height)); min-height:0; object-fit:contain; display:block; }
.reader-page h2,.reader-page p { text-align:center; padding:0 20px; }
.reader-error { color:#8b301b; }
.reader-status { position:absolute; top:12px; left:12px; padding:6px 10px; border-radius:8px; background:#fffdf7ed; color:#536979; font-size:13px; }
.reader-stage[data-layout="single"] .reader-page { max-width:1000px; }
.reader-stage.width-fit { align-items:flex-start; touch-action:pan-x pan-y pinch-zoom; }
.reader-stage.width-fit .reader-page { height:auto; min-height:240px; }
.reader-stage.width-fit .reader-page img { height:auto; max-height:none; object-fit:initial; }
.reader-controls { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin:16px 0 8px; }
.reader-controls button:last-child { background:var(--ink); color:white; }
.reader-controls button:last-child:hover:not(:disabled) { background:#284d68; }
.reader-position { display:flex; align-items:center; gap:8px; font-size:14px; }
.reader-position select { max-width:155px; }
.reader-progress { display:block; width:min(500px,100%); height:5px; margin:12px auto; accent-color:var(--accent); border:0; }
.reader-help { text-align:center; color:#536979; font-size:12px; line-height:1.6; margin:8px 0; }
.reader-shell:fullscreen { max-width:none; overflow:auto; background:#edf1f4; --page-height:calc(100dvh - 190px); }
.reader-footer { padding:18px; text-align:center; font-size:12px; color:#536979; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:650px) {
 .reader-brand span { display:none; }
 .reader-header { padding:10px 12px; }
 .reader-heading { align-items:flex-start; flex-direction:column; gap:12px; }
 .reader-options { width:100%; }
 .reader-options button { margin-left:0; font-size:12px; padding:10px; }
 .reader-options select { font-size:12px; padding:8px; }
 .reader-options label { font-size:12px; }
 .reader-shell { --page-height:calc(100dvh - 300px); padding-top:14px; }
 .reader-stage { padding:6px; border-radius:10px; }
 .reader-controls { gap:8px; }
 .reader-controls button { padding:10px 12px; }
 .reader-position { gap:4px; }
 .reader-position select { width:115px; }
}
/* Decorative page leaves sit above the live reader; navigation never waits for them. */
.reader-stage { position:relative; perspective:1800px; isolation:isolate; }
.reader-stage.is-turning { overflow:hidden; }
.reader-turn { position:absolute; z-index:4; transform-style:preserve-3d; pointer-events:none; }
.reader-turn-face { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; background:var(--paper); backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 6px 24px #15223340; }
.reader-turn-face img { width:100%; height:100%; object-fit:contain; }
.reader-turn-face::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#17213b18,transparent 18%,transparent 85%,#17213b12); pointer-events:none; }
.reader-turn-back { transform:rotateY(180deg); }
@media(prefers-reduced-motion:reduce) { .reader-turn { display:none; } }