/* Local, dependency-free styles for the offline reader. */
:root {
  color-scheme: light;
  --ink: #20183b;
  --purple: #40206d;
  --purple-deep: #21123f;
  --gold: #f1c84b;
  --paper: #fffdf7;
  --cream: #f4f1e9;
  --muted: #776f86;
  --line: #e6e0d4;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--cream); color: var(--ink); }
body { min-height: 100dvh; }
.app-shell { width: min(1500px, 100%); margin: 0 auto; padding: 0 26px 18px; }
.topbar { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #ddd7ca; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--purple-deep); }
.brand b { display: block; font-size: 16px; line-height: 1.2; }
.brand small { display: block; margin-top: 3px; color: #777082; font-size: 9px; letter-spacing: .13em; font-weight: 800; }
.sun-mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--gold); color: var(--purple-deep); font-size: 23px; border-radius: 50%; box-shadow: inset 0 -4px #d5a92e44; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.quiet-button, .project-button, .install-button, .nav-button, .reader-controls select, .page-control input { min-height: 40px; border-radius: 13px; border: 1px solid var(--line); padding: 8px 13px; background: #fffdf9; color: var(--ink); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.quiet-button[aria-pressed="true"] { border-color: #c7b4de; background: #f2ebfb; color: #492777; }
.install-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: var(--gold); border-color: #dfb537; color: var(--purple-deep); }
.install-button:hover { background: #f6d568; }
.install-button[hidden] { display: none; }
.project-button { background: var(--purple-deep); border-color: var(--purple-deep); color: #fff; }
.project-button:hover { background: #39205e; }
.reader-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 23px 2px 13px; }
.eyebrow { margin: 0 0 5px; color: #7258a1; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.reader-heading h1 { margin: 0; font-size: clamp(22px, 3vw, 34px); line-height: 1.12; letter-spacing: -.04em; color: var(--purple-deep); }
.subhead { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.counter { text-align: right; white-space: nowrap; color: var(--purple-deep); }
.counter b, .counter span { display: block; }
.counter b { font-size: 14px; }
.counter span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.reader-controls { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 17px; background: #fffdf9; box-shadow: 0 5px 14px #3523530a; }
.reader-controls button:disabled { opacity: .42; cursor: not-allowed; }
.nav-button { background: #f7f3ed; }
.next-button { background: #f0eaf8; border-color: #d8cae8; color: #44236f; }
.jump-control, .page-control { display: flex; align-items: center; gap: 8px; color: #766d84; font-size: 11px; font-weight: 800; }
.reader-controls select { min-width: 210px; }
.page-control input { width: 63px; text-align: center; cursor: text; }
.page-control span { white-space: nowrap; }
.book-area { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 0 4px; min-height: calc(100dvh - 228px); overflow: hidden; }
.stage-glow { position: absolute; width: min(920px, 85vw); height: min(420px, 46vw); border-radius: 50%; background: radial-gradient(ellipse, #fff9dcad 0%, #e8e0f25f 45%, transparent 72%); filter: blur(8px); pointer-events: none; }
.book-stage { position: relative; z-index: 1; width: min(92vw, 88vh, 1280px); perspective: 1700px; perspective-origin: 50% 45%; transform-style: preserve-3d; }
.book { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 1.45 / 1; width: 100%; overflow: visible; transform: rotateX(14deg); transform-style: preserve-3d; border-radius: 9px; filter: drop-shadow(0 24px 19px #21143b35); transition: transform .4s ease, filter .4s ease; }
.book::before { content: ""; position: absolute; z-index: -1; inset: -6px; border: 4px solid #512583; border-radius: 11px; background: linear-gradient(110deg, #512583, #7b4bb0 50%, #3f1e68); box-shadow: 0 5px 0 #351653, 0 15px 25px #21143b28; }
.book-page { position: relative; min-width: 0; height: 100%; background: var(--paper); overflow: hidden; cursor: zoom-in; transform-style: preserve-3d; backface-visibility: hidden; }
.book-page img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--paper); user-select: none; -webkit-user-drag: none; }
.left-page { border-radius: 5px 0 0 5px; box-shadow: inset -16px 0 24px -22px #21123fbd, inset 0 0 0 1px #ded8ca; }
.right-page { border-radius: 0 5px 5px 0; box-shadow: inset 16px 0 24px -22px #21123fbd, inset 0 0 0 1px #ded8ca; }
.spine { position: absolute; z-index: 5; top: 0; bottom: 0; left: 50%; width: 24px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, transparent 0%, #1b122d22 25%, #2714429c 48%, #1b122d48 68%, transparent 100%); box-shadow: 0 0 13px #25133c29; }
.book.motion-enabled .book-page img { animation: paperBreathe 8s ease-in-out infinite alternate; transform-origin: 50% 55%; }
.book.motion-enabled .right-page img { animation-delay: -3.5s; }
@keyframes paperBreathe { 0% { transform: scale(1); } 100% { transform: scale(1.004) translateY(-1px); } }
.book.is-single { grid-template-columns: 1fr 0; aspect-ratio: .725 / 1; width: min(72vw, 65vh, 590px); margin: 0 auto; transform: rotateX(4deg); }
.book.is-single .left-page, .book.is-single .spine { display: none; }
.book.is-single .right-page { grid-column: 1 / 3; border-radius: 6px; box-shadow: inset 14px 0 18px -22px #21123f99, inset -14px 0 18px -22px #21123f99, inset 0 0 0 1px #ded8ca; }
.book.is-single::before { inset: -5px; }
.book-page.fold-forward { z-index: 8; transform-origin: left center; animation: foldForward .43s cubic-bezier(.44,.03,.7,.6) forwards; box-shadow: 20px 10px 35px #1e103c33; }
.book-page.fold-back { z-index: 8; transform-origin: right center; animation: foldBack .43s cubic-bezier(.44,.03,.7,.6) forwards; box-shadow: -20px 10px 35px #1e103c33; }
.book-page.unfold-left { z-index: 7; transform-origin: right center; animation: unfoldLeft .48s cubic-bezier(.2,.65,.26,1) both; }
.book-page.unfold-right { z-index: 7; transform-origin: left center; animation: unfoldRight .48s cubic-bezier(.2,.65,.26,1) both; }
@keyframes foldForward { to { transform: rotateY(-90deg); filter: brightness(.78); } }
@keyframes foldBack { to { transform: rotateY(90deg); filter: brightness(.78); } }
@keyframes unfoldLeft { from { transform: rotateY(88deg); filter: brightness(.78); } to { transform: rotateY(0); filter: brightness(1); } }
@keyframes unfoldRight { from { transform: rotateY(-88deg); filter: brightness(.78); } to { transform: rotateY(0); filter: brightness(1); } }
.stage-caption { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin-top: 14px; color: #766d84; font-size: 11px; text-align: center; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #8a68bc; box-shadow: 0 0 0 4px #8a68bc1e; }
.app-footer { display: flex; justify-content: space-between; gap: 16px; padding: 10px 1px 0; color: #746d7c; font-size: 10px; }
.app-footer b { color: var(--purple); }
.projector-controls { position: fixed; z-index: 20; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #ffffff2c; border-radius: 99px; background: #160d29e8; color: #fff; box-shadow: 0 8px 30px #0005; backdrop-filter: blur(12px); }
.projector-controls[hidden] { display: none; }
.projector-controls button { min-width: 42px; height: 38px; border: 0; border-radius: 99px; background: #ffffff16; color: #fff; font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; }
.projector-controls span { min-width: 70px; text-align: center; font-size: 11px; font-weight: 850; }
.projector-controls #exitProjector { padding: 0 13px; font-size: 11px; }
.page-modal { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 28px; background: #120b22f2; }
.page-modal[hidden] { display: none; }
.page-modal img { max-width: 96vw; max-height: 90dvh; object-fit: contain; box-shadow: 0 20px 55px #0008; }
.modal-close { position: absolute; right: 18px; top: 14px; width: 42px; height: 42px; border: 1px solid #ffffff4d; border-radius: 50%; background: #27183bcc; color: #fff; font-size: 26px; cursor: pointer; }
.modal-caption { position: absolute; bottom: 10px; color: #eee7f8; font-size: 11px; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 22px; transform: translate(-50%, 12px); opacity: 0; padding: 11px 15px; border-radius: 99px; background: #281845; color: white; font-size: 12px; font-weight: 750; pointer-events: none; transition: opacity .18s, transform .18s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body.projector-mode { background: #100b18; overflow: hidden; }
.projector-mode .app-shell { width: 100%; height: 100dvh; padding: 0; display: grid; grid-template-rows: 1fr; }
.projector-mode .topbar, .projector-mode .reader-heading, .projector-mode .reader-controls, .projector-mode .app-footer, .projector-mode .stage-caption { display: none; }
.projector-mode .book-area { height: 100dvh; min-height: 0; padding: 2vh 2vw 10vh; background: radial-gradient(ellipse at center, #251a35 0%, #100b18 74%); }
.projector-mode .stage-glow { background: radial-gradient(ellipse, #fff8d933 0%, #a985d322 44%, transparent 73%); }
.projector-mode .book-stage { width: min(95vw, 118vh, 1700px); }
.projector-mode .book { transform: rotateX(12deg); filter: drop-shadow(0 24px 28px #0009); }
.projector-mode .book.is-single { width: min(72vw, 61vh, 900px); transform: rotateX(2deg); }
.projector-mode .projector-controls { display: flex; }
.projector-mode .toast { display: none; }
@media (max-width: 700px) {
  .app-shell { padding: 0 13px 12px; }
  .topbar { height: 62px; }
  .brand small { font-size: 8px; }
  .sun-mark { width: 34px; height: 34px; }
  .top-actions { gap: 5px; }
  .quiet-button, .project-button, .install-button { min-height: 36px; padding: 7px 9px; font-size: 10px; }
  .reader-heading { align-items: center; padding: 17px 2px 11px; }
  .reader-heading h1 { font-size: 22px; }
  .subhead { font-size: 10px; }
  .counter b { font-size: 12px; }
  .counter span { font-size: 9px; }
  .reader-controls { gap: 6px; padding: 8px; border-radius: 13px; flex-wrap: wrap; }
  .reader-controls button { min-height: 36px; padding: 7px 9px; font-size: 10px; }
  .jump-control { order: 3; width: 100%; justify-content: center; }
  .reader-controls select { min-height: 35px; flex: 1; max-width: 260px; }
  .page-control { font-size: 10px; }
  .page-control input { min-height: 35px; width: 52px; padding: 6px; }
  .book-area { min-height: calc(100dvh - 208px); padding: 12px 0 3px; }
  .book-stage { width: min(95vw, 128vh); }
  .book { transform: rotateX(6deg); }
  .book.is-single { width: min(73vw, 76vh, 430px); transform: rotateX(2deg); }
  .spine { width: 14px; }
  .stage-caption { font-size: 9px; margin-top: 10px; }
  .app-footer { font-size: 9px; }
  .app-footer span:last-child { display: none; }
  .projector-mode .book-stage { width: min(96vw, 128vh); }
  .projector-mode .book.is-single { width: min(78vw, 61vh, 800px); }
}
@media (max-width: 430px) {
  .reader-heading { gap: 7px; }
  .reader-heading h1 { font-size: 20px; }
  .brand small { display: none; }
  .install-label { display: none; }
  .install-button { width: 36px; padding: 6px; font-size: 15px; }
  .reader-controls .nav-button span { display: none; }
  .page-control { margin-left: auto; }
  .book-area { min-height: calc(100dvh - 198px); }
  .book-stage { width: min(94vw, 124vh); }
  .book.is-single { width: min(78vw, 73vh, 370px); }
  .projector-mode .book-stage { width: min(96vw, 128vh); }
  .projector-mode .book.is-single { width: min(82vw, 61vh, 750px); }
}
@media (orientation: landscape) and (max-height: 550px) {
  .app-shell { padding: 0 12px; }
  .topbar { height: 45px; }
  .reader-heading { display: none; }
  .reader-controls { position: absolute; z-index: 10; top: 6px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 92vw; padding: 4px 6px; opacity: .92; }
  .reader-controls button { min-height: 30px; padding: 5px 8px; }
  .jump-control { display: none; }
  .book-area { min-height: calc(100dvh - 50px); padding: 4px 0; }
  .book-stage { width: min(92vw, 130vh); }
  .book.is-single { width: min(64vw, 60vh); }
  .stage-caption, .app-footer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}