:root {
  --ink: #25251f;
  --paper: #fffefa;
  --accent: #c78e61;
  --chrome: #252722;
  --chrome-line: #41433d;
  --muted: #aeb0a7;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; color: #f6f2e9; background: #1f211e; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button { font: inherit; }
[hidden] { display: none !important; }

.loading-screen { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: #1f211e; }
.loading-screen p { margin: 0; color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.loading-mark, .brand-mark { display: grid; place-items: center; border: 1px solid #6a5a49; color: #f1c69f; font: 600 20px Georgia, serif; }
.loading-mark { width: 54px; height: 54px; border-radius: 50%; animation: breathe 1.5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.06); border-color: #c78e61; } }

.reader { width: 100%; height: 100dvh; display: flex; flex-direction: column; }
.reader-header { min-height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; padding: 11px max(18px, env(safe-area-inset-right)) 11px max(18px, env(safe-area-inset-left)); border-bottom: 1px solid var(--chrome-line); background: var(--chrome); }
.reader-brand { min-width: 0; display: flex; align-items: center; gap: 12px; }
.brand-mark { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; }
.reader-brand p { margin: 0 0 2px; color: #b58c68; font-size: 9px; font-weight: 750; letter-spacing: .17em; }
.reader-brand h1 { margin: 0; overflow: hidden; font: 600 17px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.reader-view { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.reader-view strong { font: 600 16px Georgia, serif; }
.reader-view span { color: var(--muted); font-size: 10px; }
.header-button { justify-self: end; display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; color: #f6f2e9; border: 1px solid #5a5c55; border-radius: 7px; background: transparent; cursor: pointer; transition: .16s ease; }
.header-button b { font-size: 11px; }
.header-button:hover { color: #f2d2b3; border-color: #d4ad87; background: rgba(255,255,255,.04); }

.reader-body { min-height: 0; flex: 1; position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) 84px; align-items: stretch; overflow: hidden; background-color: #31332f; background-image: radial-gradient(#454741 .7px, transparent .7px); background-size: 8px 8px; }
.reader-scene { min-width: 0; display: grid; place-items: center; perspective: 2600px; overflow: hidden; }
.reader-scale-wrap { position: relative; width: min(calc(100% - 24px), calc((100dvh - 160px) * 1.5)); max-width: 1440px; aspect-ratio: 3 / 2; display: grid; place-items: center; }
.reader-book { width: 100%; height: 100%; margin: auto; filter: drop-shadow(0 24px 32px rgba(0,0,0,.34)); }
.reader-book .stf__wrapper { isolation: isolate; }
.reader-book .stf__block { filter: drop-shadow(0 0 1px rgba(255,255,255,.16)); }
.reader-book .stf__wrapper.--landscape .stf__block::after { content: ""; position: absolute; z-index: 80; left: 50%; top: 0; bottom: 0; width: 4.4%; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(28,25,21,.055) 23%, rgba(22,19,16,.2) 47%, rgba(255,255,255,.11) 51%, rgba(30,27,23,.08) 65%, transparent); pointer-events: none; }

.flipbook-page { position: relative; overflow: hidden; color: var(--ink); background: var(--paper); container-type: size; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.page-content { position: absolute; inset: 0; overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(34,30,24,.08); }
.flipbook-page.--left .page-content::after, .flipbook-page.--right .page-content::after { content: ""; position: absolute; z-index: 40; top: 0; bottom: 0; width: 5%; pointer-events: none; }
.flipbook-page.--left .page-content::after { right: 0; background: linear-gradient(90deg, transparent, rgba(25,24,21,.13)); }
.flipbook-page.--right .page-content::after { left: 0; background: linear-gradient(90deg, rgba(25,24,21,.13), transparent); }
.flipbook-page.inside-cover .page-content { background: #f0ece2; }
.inside-cover-mark { position: absolute; left: 0; right: 0; bottom: 3%; color: rgba(54,50,43,.34); font: 500 1.25cqw/1 Georgia, serif; text-align: center; letter-spacing: .08em; }
.page-element { position: absolute; z-index: 5; overflow: hidden; transform-origin: center; white-space: pre-wrap; line-height: 1.18; }
.page-element.spread-element { z-index: 20; }
.page-element img { position: absolute; max-width: none; max-height: none; pointer-events: none; transform: none; image-rendering: auto; }
.page-element img:not([src]) { visibility: hidden; }

.edge-button { z-index: 90; border: 0; color: rgba(255,255,255,.76); background: transparent; cursor: pointer; transition: .16s; }
.edge-button:hover:not(:disabled) { color: white; background: rgba(255,255,255,.055); }
.edge-button span { display: inline-grid; width: 45px; height: 45px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; font: 300 39px/1 Georgia, serif; }
.edge-button:disabled { opacity: .2; cursor: not-allowed; }
.reader[data-turn-state="user_fold"] .reader-tip, .reader[data-turn-state="fold_corner"] .reader-tip { color: #e0b38e; }

.reader-footer { min-height: 52px; display: flex; align-items: center; gap: 16px; padding: 0 max(24px, env(safe-area-inset-right)) max(0px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); border-top: 1px solid var(--chrome-line); color: var(--muted); background: var(--chrome); font-size: 10px; }
.progress { flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: #4a4c46; }
.progress span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .3s ease; }
.reader-footer strong { color: white; white-space: nowrap; }
.reader-tip { margin-left: auto; color: #777a72; white-space: nowrap; }

.error-card { width: min(440px, calc(100% - 32px)); margin: 18vh auto 0; padding: 28px; color: #2a2925; border-radius: 12px; background: #faf8f2; box-shadow: 0 25px 90px rgba(0,0,0,.3); text-align: center; }
.error-card h1 { margin: 0 0 8px; font: 600 25px Georgia, serif; }
.error-card p { margin: 0; color: #68675f; font-size: 13px; line-height: 1.5; }
noscript { position: fixed; inset: 0; display: grid; place-content: center; padding: 20px; color: white; background: #1f211e; text-align: center; }

@media (max-width: 820px) {
  .reader-header { min-height: 66px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding-top: max(9px, env(safe-area-inset-top)); }
  .reader-view { display: none; }
  .brand-mark { width: 36px; height: 36px; }
  .reader-brand h1 { font-size: 15px; }
  .header-button b { display: none; }
  .reader-body { grid-template-columns: minmax(0, 1fr); }
  .reader-scene { grid-area: 1 / 1; }
  .reader-scale-wrap { width: min(calc(100% - 8px), calc((100dvh - 128px) * 1.5)); }
  .edge-button { position: absolute; top: 0; bottom: 0; width: 44px; padding: 0; }
  .edge-button.previous { left: 0; }
  .edge-button.next { right: 0; }
  .edge-button span { width: 36px; height: 36px; font-size: 31px; }
  .reader-footer { min-height: 46px; gap: 10px; padding-left: 14px; padding-right: 14px; }
  .reader-tip, .physical-info { display: none; }
}

@media (max-width: 480px) {
  .reader-scale-wrap { width: calc(100% - 4px); }
  .edge-button { width: 36px; }
  .edge-button span { width: 30px; height: 30px; font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}