:root {
  --ink: #172b3a;
  --ink-soft: #53626c;
  --blue: #315e78;
  --teal: #4d8796;
  --gold: #c49a54;
  --shell: #101b23;
  --shell-light: #1b2e3b;
  --paper: #f7f0df;
  --paper-2: #fffaf0;
  --page-ink: #26333a;
  --page-muted: #687278;
  --rule: rgba(49,94,120,.22);
  --reader-font: 1rem;
  --page-radius: 5px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #eef4f5;
  background: var(--shell);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 18% 15%, rgba(77,135,150,.19), transparent 32rem),
    radial-gradient(circle at 82% 80%, rgba(196,154,84,.1), transparent 28rem),
    linear-gradient(145deg, #0b151c 0%, var(--shell) 48%, #142630 100%);
}
body.embedded .site-header,
body.embedded .site-footer { display: none; }
body.embedded .reader-shell { padding-top: clamp(.8rem, 2vw, 1.6rem); }
body.embedded { min-height: 100%; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, .book:focus-visible, a:focus-visible { outline: 3px solid #e6b766; outline-offset: 3px; }

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; color: var(--shell); background: #fff; border-radius: 6px; }
.skip-link:focus { top: 1rem; }
.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; }

.site-header {
  height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2.75rem);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand { justify-self: start; display: inline-flex; align-items: center; gap: .7rem; color: #f3f6f6; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; font-family: Georgia, serif; font-size: .8rem; letter-spacing: .06em; background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 4px rgba(255,255,255,.025); }
.brand strong, .brand small { display: block; line-height: 1.05; }
.brand strong { font-family: Georgia, "Times New Roman", serif; font-size: .98rem; }
.brand small { margin-top: .18rem; color: #a8bbc3; font-size: .65rem; text-transform: uppercase; letter-spacing: .17em; }
.main-nav { display: flex; align-items: center; gap: 1.7rem; }
.nav-link { position: relative; padding: 1.55rem .1rem 1.35rem; border: 0; background: none; color: #9fb0b8; font-size: .83rem; cursor: pointer; text-decoration: none; }
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); }
.icon-button { justify-self: end; width: 42px; height: 38px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.04); cursor: pointer; }
.icon-button:hover { background: rgba(255,255,255,.1); }

.reader-shell { width: min(1380px, 100%); margin: 0 auto; padding: clamp(1.2rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.75rem) 2rem; }
.book-meta { display: flex; align-items: end; justify-content: space-between; gap: 2rem; width: min(1180px, 100%); margin: 0 auto 1.4rem; }
.book-meta h1 { margin: .1rem 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, 2.4vw, 2.15rem); font-weight: 500; letter-spacing: -.02em; }
.eyebrow { margin: 0 0 .35rem; color: var(--gold); font-size: .68rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.subtitle { margin: .2rem 0 0; color: #9db0b8; font-size: .88rem; }
.outline-button { display: flex; align-items: center; gap: .6rem; padding: .7rem .95rem; border: 1px solid rgba(255,255,255,.16); border-radius: 7px; background: rgba(255,255,255,.035); font-size: .78rem; cursor: pointer; }
.outline-button:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.menu-lines, .menu-lines::before, .menu-lines::after { width: 14px; height: 1px; display: block; background: currentColor; }
.menu-lines { position: relative; }.menu-lines::before,.menu-lines::after { content:""; position:absolute; left:0; }.menu-lines::before{top:-4px}.menu-lines::after{top:4px}

.reader { width: min(1280px, 100%); margin: 0 auto; }
.book-stage { position: relative; display: grid; place-items: center; min-height: min(68vw, 720px); padding: 1.5rem clamp(.2rem, 2vw, 2rem) 2.4rem; border: 1px solid rgba(255,255,255,.06); border-radius: 18px; background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.055), transparent 65%); overflow: hidden; }
.book-stage::after { content: ""; position: absolute; z-index: 0; bottom: 5.5%; left: 16%; width: 68%; height: 7%; border-radius: 50%; background: rgba(0,0,0,.48); filter: blur(22px); }
.book { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; width: min(1090px, 86vw); aspect-ratio: 1.58 / 1; perspective: 2200px; filter: drop-shadow(0 28px 34px rgba(0,0,0,.38)); touch-action: pan-y; }
.paper-page { position: relative; min-width: 0; padding: clamp(1.45rem, 3.2vw, 3.2rem) clamp(1.35rem, 3.2vw, 3.4rem) clamp(1.3rem, 2.7vw, 2.6rem); overflow: hidden; color: var(--page-ink); background: var(--paper); font-family: Georgia, "Times New Roman", serif; font-size: var(--reader-font); line-height: 1.55; }
.left-page { border-radius: var(--page-radius) 0 0 var(--page-radius); background: linear-gradient(90deg, var(--paper-2) 0%, var(--paper) 78%, color-mix(in srgb, var(--paper) 84%, #8d7e69) 100%); }
.right-page { border-radius: 0 var(--page-radius) var(--page-radius) 0; background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 84%, #8d7e69) 0%, var(--paper) 18%, var(--paper-2) 100%); }
.paper-page::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.18; background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.book-spine { position: absolute; z-index: 5; left: 50%; top: 0; bottom: 0; width: 24px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(44,35,27,.1), rgba(255,255,255,.22) 48%, rgba(44,35,27,.12) 55%, transparent); }
.book-edge { position: absolute; z-index: -1; top: 5px; bottom: -7px; width: 13px; border-radius: 2px; background: repeating-linear-gradient(to bottom, #e7dcc6 0, #e7dcc6 2px, #cbbda2 3px, #f3ead8 4px); }
.book-edge-left { left: -7px; transform: skewY(-.5deg); }.book-edge-right { right: -7px; transform: skewY(.5deg); }
.page-turn { display: none; position: absolute; z-index: 7; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: left center; transform-style: preserve-3d; border-radius: 0 var(--page-radius) var(--page-radius) 0; background: linear-gradient(90deg, #d8cbb3, var(--paper) 12%, var(--paper-2)); box-shadow: 8px 10px 28px rgba(0,0,0,.25); }
.page-turn.forward { display:block; animation: turn-forward .66s cubic-bezier(.55,.05,.2,1) forwards; }
.page-turn.backward { display:block; left:0; transform-origin:right center; animation: turn-backward .66s cubic-bezier(.55,.05,.2,1) forwards; }
@keyframes turn-forward { 0%{transform:rotateY(0)} 45%{box-shadow:18px 12px 35px rgba(0,0,0,.34)} 100%{transform:rotateY(-180deg)} }
@keyframes turn-backward { 0%{transform:rotateY(0)} 45%{box-shadow:-18px 12px 35px rgba(0,0,0,.34)} 100%{transform:rotateY(180deg)} }

.page-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; }
.page-kicker { margin: 0 0 .35rem; font-family: Inter, sans-serif; font-size: .57em; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.page-title { margin: 0 0 .6em; font-size: clamp(1.35em, 2.3vw, 2.05em); line-height: 1.05; font-weight: 500; letter-spacing: -.025em; color: var(--ink); }
.page-lead { margin: 0 0 .8em; padding-bottom: .8em; border-bottom: 1px solid var(--rule); font-size: 1.02em; font-style: italic; line-height: 1.45; color: var(--blue); }
.page-body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(49,94,120,.3) transparent; padding-right: .2rem; }
.page-body p { margin: 0 0 .72em; }
.page-body h3 { margin: 1.05em 0 .35em; font-family: Inter, sans-serif; font-size: .78em; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
.page-body ul, .page-body ol { margin: .25em 0 .8em; padding-left: 1.25em; }
.page-body li { margin-bottom: .25em; padding-left: .15em; }
.page-body strong { color: var(--ink); }
.callout { margin: .95em 0; padding: .75em .85em; border-left: 3px solid var(--teal); background: color-mix(in srgb, var(--teal) 8%, transparent); font-size: .92em; }
.callout.warning { border-left-color: #a54a42; background: rgba(165,74,66,.07); }
.callout .label { display:block; margin-bottom:.25em; font-family:Inter,sans-serif; font-size:.66em; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); }
.callout.warning .label { color:#934139; }
.fact-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.55em; margin:.7em 0; }
.fact { padding:.65em .7em; border:1px solid var(--rule); border-radius:4px; background:rgba(255,255,255,.2); }
.fact span { display:block; font-family:Inter,sans-serif; font-size:.62em; font-weight:750; color:var(--page-muted); text-transform:uppercase; letter-spacing:.06em; }
.fact strong { display:block; margin-top:.15em; font-size:1.08em; }
.chapter-number { position:absolute; right:0; top:-.1em; font-family:Inter,sans-serif; font-weight:800; font-size:4em; line-height:1; color:rgba(49,94,120,.06); }
.page-number { margin: .75em 0 0; padding-top: .45em; border-top: 1px solid rgba(49,94,120,.14); font-family: Inter, sans-serif; font-size: .58em; letter-spacing: .12em; text-align: center; color: var(--page-muted); }
.cover-page { justify-content:center; text-align:center; }
.cover-page::after { content:""; position:absolute; inset:8%; border:1px solid rgba(49,94,120,.22); pointer-events:none; }
.cover-mark { width:3.6em; height:3.6em; display:grid; place-items:center; margin:0 auto 1.6em; border:1px solid var(--gold); border-radius:50%; font-family:Inter,sans-serif; font-size:.75em; font-weight:800; color:var(--gold); }
.cover-page .page-kicker { margin-bottom:1.6em; }
.cover-page .page-title { margin-bottom:.25em; font-size:clamp(2em,4vw,3.6em); text-transform:uppercase; }
.cover-subtitle { margin:0 0 1.7em; font-size:1.2em; color:var(--blue); }
.cover-details { max-width:22em; margin:0 auto; font-family:Inter,sans-serif; font-size:.72em; line-height:1.6; text-transform:uppercase; letter-spacing:.08em; color:var(--page-muted); }
.inside-cover { justify-content:center; text-align:center; }
.inside-cover .quote { max-width:20em; margin:0 auto; font-size:1.35em; font-style:italic; color:var(--blue); }
.inside-cover .small { margin-top:1.8em; font-family:Inter,sans-serif; font-size:.7em; color:var(--page-muted); }
.swipe-hint { position:absolute; z-index:2; bottom:.55rem; margin:0; font-size:.68rem; color:#8fa2aa; letter-spacing:.03em; }

.reader-controls { display:grid; grid-template-columns: 130px minmax(180px, 430px) 130px; align-items:center; justify-content:center; gap:clamp(1rem,3vw,2.5rem); width:min(880px,100%); margin:1.25rem auto 0; }
.turn-button { display:flex; align-items:center; justify-content:center; gap:.55rem; min-height:42px; padding:.65rem 1rem; border:1px solid rgba(255,255,255,.14); border-radius:7px; background:rgba(255,255,255,.045); font-size:.78rem; cursor:pointer; transition:.2s ease; }
.turn-button:hover:not(:disabled) { transform:translateY(-1px); background:rgba(255,255,255,.1); }
.turn-button:disabled { opacity:.3; cursor:not-allowed; }
.progress-wrap { min-width:0; }
.page-status { display:flex; justify-content:space-between; margin-bottom:.4rem; color:#9fb0b7; font-size:.68rem; }
#pageRange { width:100%; height:3px; margin:0; accent-color:var(--gold); cursor:pointer; }
.reader-note { display:flex; align-items:flex-start; gap:.7rem; width:min(860px,100%); margin:1.8rem auto 0; padding:.9rem 1rem; border:1px solid rgba(255,255,255,.08); border-radius:8px; color:#94a6ae; background:rgba(255,255,255,.025); font-size:.7rem; line-height:1.5; }
.reader-note p { margin:0; }.reader-note strong{color:#c4d0d4}.note-icon{display:grid;place-items:center;flex:0 0 18px;height:18px;border:1px solid currentColor;border-radius:50%;font-family:Georgia,serif;font-size:.7rem}
.site-footer { display:flex; justify-content:space-between; max-width:1440px; margin:0 auto; padding:1.2rem clamp(1rem,3vw,2.75rem) 2rem; border-top:1px solid rgba(255,255,255,.06); color:#71868f; font-size:.68rem; }

.dialog-backdrop { position:fixed; z-index:50; inset:0; display:flex; justify-content:flex-end; background:rgba(5,12,16,.7); backdrop-filter:blur(5px); }
.dialog-backdrop[hidden] { display:none; }
.side-panel { width:min(430px,100%); height:100%; padding:clamp(1.25rem,4vw,2.25rem); overflow:auto; color:#edf3f4; background:#14242e; box-shadow:-20px 0 50px rgba(0,0,0,.35); animation:panel-in .28s ease both; }
@keyframes panel-in { from{transform:translateX(30px);opacity:0} to{transform:none;opacity:1} }
.side-panel header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding-bottom:1.1rem; border-bottom:1px solid rgba(255,255,255,.09); }
.side-panel h2 { margin:0; font-family:Georgia,serif; font-weight:500; }
.close-button { width:36px;height:36px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:none;font-size:1.45rem;line-height:1;cursor:pointer; }
.close-button:hover { background:rgba(255,255,255,.08); }
#tocList { margin-top:1rem; }
.toc-entry { display:grid; grid-template-columns:2.1rem 1fr auto; gap:.65rem; width:100%; padding:.78rem .25rem; border:0; border-bottom:1px solid rgba(255,255,255,.06); background:none; text-align:left; cursor:pointer; }
.toc-entry:hover,.toc-entry.current { color:#fff;background:rgba(255,255,255,.035); }
.toc-entry .toc-no { color:var(--gold);font-size:.67rem;padding-top:.12rem; }.toc-entry .toc-title{font-family:Georgia,serif;font-size:.9rem}.toc-entry .toc-page{color:#7f949d;font-size:.65rem;padding-top:.15rem}
.setting-group { margin-top:1.6rem; }.setting-label{display:block;margin-bottom:.7rem;font-size:.72rem;font-weight:700;color:#aebec4;text-transform:uppercase;letter-spacing:.08em}
.segmented { display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.12);border-radius:7px;overflow:hidden; }.segmented button{padding:.7rem .4rem;border:0;border-right:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02);font-size:.72rem;cursor:pointer}.segmented button:last-child{border-right:0}.segmented button.selected{background:var(--blue);color:#fff}
.theme-choices { display:grid;gap:.55rem; }.theme-choices button{display:flex;align-items:center;gap:.7rem;padding:.75rem;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:rgba(255,255,255,.02);font-size:.75rem;cursor:pointer}.theme-choices button.selected{border-color:var(--gold);background:rgba(196,154,84,.08)}.theme-dot{width:22px;height:22px;border:1px solid rgba(255,255,255,.2);border-radius:50%}.theme-dot.cream{background:#f7f0df}.theme-dot.white{background:#fff}.theme-dot.night{background:#26323a}
.reset-button { width:100%;margin-top:2rem;padding:.75rem;border:1px solid rgba(255,255,255,.11);border-radius:7px;background:none;font-size:.72rem;cursor:pointer}.reset-button:hover{background:rgba(255,255,255,.06)}
.toast { position:fixed; z-index:70; left:50%; bottom:1.5rem; max-width:min(90vw,460px); padding:.8rem 1rem; border:1px solid rgba(255,255,255,.13); border-radius:8px; background:#243944; box-shadow:0 12px 34px rgba(0,0,0,.34); font-size:.75rem; text-align:center; opacity:0; transform:translate(-50%,18px); pointer-events:none; transition:.25s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }

body.font-small { --reader-font:.88rem; } body.font-large { --reader-font:1.09rem; }
body.theme-white { --paper:#f7f7f4;--paper-2:#fff;--page-ink:#24313a;--rule:rgba(49,94,120,.18); }
body.theme-night { --paper:#26343b;--paper-2:#2e3d45;--page-ink:#e1e8e9;--page-muted:#a5b3b8;--ink:#f2f5f5;--blue:#9fc4cf;--rule:rgba(255,255,255,.14); }
body.theme-night .paper-page::before{mix-blend-mode:soft-light;opacity:.09} body.theme-night .fact{background:rgba(0,0,0,.09)} body.theme-night .callout{background:rgba(77,135,150,.12)}

@media (max-width: 860px) {
  .site-header { grid-template-columns:1fr auto;height:64px; }.main-nav{display:none}.brand small{display:none}
  .reader-shell{padding-top:1.2rem}.book-meta{align-items:center;margin-bottom:.8rem}.book-meta .subtitle{display:none}
  .book-stage{min-height:auto;padding:.6rem .4rem 2rem;border-radius:12px}.book{display:block;width:min(94vw,540px);aspect-ratio: .72 / 1;}.paper-page{position:absolute;inset:0;padding:clamp(1.4rem,7vw,3rem);border-radius:var(--page-radius);}.left-page{display:none}.right-page{background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 91%,#8d7e69),var(--paper) 12%,var(--paper-2));}.book-spine,.book-edge-left{display:none}.book-edge-right{left:3px;right:-7px}.page-turn{left:0;width:100%;transform-origin:left center;border-radius:var(--page-radius)}.page-turn.backward{left:0;transform-origin:right center}.swipe-hint{bottom:.35rem}
  .reader-controls{grid-template-columns:46px 1fr 46px;gap:.75rem;margin-top:.8rem}.turn-button{padding:.55rem;min-width:0}.button-label{display:none}.reader-note{margin-top:1rem}.site-footer{display:block;text-align:center}.site-footer p{margin:.25rem}.fact-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px) {
  .book-meta h1{font-size:1.2rem}.outline-button{padding:.55rem .65rem}.book-stage{margin-inline:-.55rem;background:none;border-left:0;border-right:0}.book{width:min(94vw,430px)}.paper-page{padding:1.35rem 1.3rem 1rem}.page-title{font-size:1.6em}.page-body{line-height:1.48}.reader-note{font-size:.65rem}
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.page-turn{display:none!important}
}