:root {
  --ink: #f4f1ea;
  --muted: rgba(244, 241, 234, .54);
  --line: rgba(255, 255, 255, .12);
  --accent: #d3b98a;
  --room: #1b1c1a;
  --room-deep: #111210;
  --paper: #f4efe4;
  --book-width: min(72vw, 1040px);
  --book-ratio: 1.38;
  --radius: 2px;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--room-deep);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { overflow: hidden; background: var(--room); }
button, input { font: inherit; }
button { color: inherit; }

.studio-shell {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 76px 1fr 76px;
  background: radial-gradient(circle at 50% 36%, rgba(255,255,255,.05), transparent 32%), var(--room);
  transition: background .55s ease;
}

.topbar, .reader-bar {
  position: relative;
  z-index: 20;
  display: grid;
  align-items: center;
  border-color: var(--line);
  background: color-mix(in srgb, var(--room-deep) 86%, transparent);
  backdrop-filter: blur(18px);
}

.topbar { grid-template-columns: 1fr auto 1fr; padding: 0 30px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; color: inherit; text-decoration: none; font: 600 19px/1 Manrope, sans-serif; letter-spacing: -.03em; }
.brand > span:last-child { display: grid; gap: 3px; }
.brand b { font: inherit; }
.brand small { color: var(--muted); font: 500 9px/1 DM Sans, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.brand-mark { display: flex; width: 25px; height: 22px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.3)); }
.brand-mark i { width: 50%; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 17%, transparent); }
.brand-mark i:first-child { border-radius: 5px 1px 1px 5px; transform: perspective(30px) rotateY(8deg); transform-origin: right; }
.brand-mark i:last-child { border-radius: 1px 5px 5px 1px; transform: perspective(30px) rotateY(-8deg); transform-origin: left; }
.book-meta { text-align: center; display: grid; gap: 3px; }
.eyebrow, .rail-label { font-size: 10px; font-weight: 600; letter-spacing: .18em; color: var(--accent); }
.book-meta strong { font-family: "Playfair Display", serif; font-size: 16px; font-weight: 600; }
.top-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.icon-button, .tool-button, .page-button, .dialog-close { border: 0; background: transparent; cursor: pointer; }
.icon-button { width: 40px; height: 40px; border-radius: 50%; color: var(--muted); }
.icon-button:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.icon-button svg, .upload-button svg, .tool-button svg, .page-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.upload-button { display: flex; align-items: center; gap: 9px; border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent); border-radius: 999px; padding: 10px 16px; background: var(--accent); color: #1a1814; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.upload-button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.upload-button svg { width: 17px; }

.workspace { min-height: 0; display: grid; grid-template-columns: 152px 1fr 72px; }
.format-rail { z-index: 10; display: flex; flex-direction: column; gap: 10px; padding: 28px 16px; border-right: 1px solid var(--line); background: rgba(0,0,0,.09); }
.rail-label { margin: 0 8px 8px; color: var(--muted); }
.format-chip { display: grid; justify-items: start; gap: 8px; padding: 11px 9px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); font-size: 11px; text-align: left; cursor: pointer; transition: .25s ease; }
.format-chip:hover { color: var(--ink); background: rgba(255,255,255,.035); }
.format-chip.active { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,.06); }
.format-swatch { position: relative; display: block; width: 47px; height: 31px; border-radius: 2px; box-shadow: 0 8px 14px rgba(0,0,0,.25); transform: perspective(50px) rotateY(-7deg); overflow: hidden; }
.format-swatch::after { content: ""; position: absolute; inset: 0 auto 0 4px; width: 2px; background: rgba(255,255,255,.18); box-shadow: 2px 0 rgba(0,0,0,.18); }
.format-swatch i { position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.18); }
.swatch-coffee { width: 52px; background: #203947; }
.swatch-magazine { background: linear-gradient(135deg, #dd315d, #592591); }
.swatch-modern { background: #e8e4dc; }
.swatch-antique { background: linear-gradient(135deg, #5b2515, #28130d); }

.reading-room { position: relative; min-width: 0; overflow: hidden; display: grid; place-items: center; perspective: 1800px; }
.reading-room::before { content: ""; position: absolute; inset: 0; opacity: .8; background: radial-gradient(ellipse at center bottom, rgba(255,255,255,.065), transparent 55%); transition: background .55s ease; }
.ambient { position: absolute; width: 38vw; height: 38vw; border-radius: 50%; filter: blur(100px); opacity: .08; pointer-events: none; transition: background .55s ease; }
.ambient-one { left: 8%; top: 0; background: var(--accent); }
.ambient-two { right: -5%; bottom: -15%; background: #5f7893; }
.book-plinth { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; width: var(--book-width); aspect-ratio: var(--book-ratio); display: grid; place-items: center; transition: transform .3s ease; }
.flipbook { position: relative; z-index: 4; width: 100%; height: 100%; filter: drop-shadow(0 30px 25px rgba(0,0,0,.25)); }
.book-shadow { position: absolute; z-index: 1; left: 7%; right: 7%; bottom: -2.5%; height: 8%; border-radius: 50%; background: rgba(0,0,0,.55); filter: blur(22px); }
.book-edge { position: absolute; z-index: 3; top: 6%; bottom: 6%; width: 12px; opacity: .8; background: repeating-linear-gradient(to bottom, #d9d2c6 0 1px, #eee9df 1px 3px); box-shadow: 0 5px 12px rgba(0,0,0,.5); }
.book-edge-left { left: 0; transform: skewY(-2deg); }
.book-edge-right { right: 0; transform: skewY(2deg); }

.page { position: relative; overflow: hidden; background: var(--paper); color: #161713; box-shadow: inset 0 0 22px rgba(58,43,18,.08); }
.page canvas { display: block; width: 100%; height: 100%; object-fit: contain; background: white; }
.page canvas.fit-exact { object-fit: fill; }
.landscape-document .book-edge { display: none; }
.landscape-document .book-shadow { left: 2%; right: 2%; bottom: -4%; height: 10%; }
.landscape-book { position: relative; width: 100%; height: 100%; overflow: visible; perspective: 2600px; filter: drop-shadow(0 28px 28px rgba(0,0,0,.34)); }
.landscape-book .page { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: left center; backface-visibility: hidden; will-change: transform; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12), inset -10px 0 24px rgba(0,0,0,.08); }
.landscape-book .page::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(0,0,0,.02), transparent 58%, rgba(0,0,0,.28)); }
.landscape-book .page.turn-next { z-index: 999 !important; animation: landscape-next 880ms cubic-bezier(.42,.02,.18,1) forwards; }
.landscape-book .page.turn-next::after { animation: page-shadow 880ms ease-in-out; }
.landscape-book .page.turn-prev { z-index: 999 !important; animation: landscape-prev 880ms cubic-bezier(.42,.02,.18,1) forwards; }
.landscape-book .page.is-past { visibility: hidden; transform: rotateY(-180deg); }
@keyframes landscape-next {
  0% { transform: rotateY(0deg) skewY(0); }
  48% { transform: rotateY(-86deg) skewY(-1deg); }
  100% { transform: rotateY(-180deg) skewY(0); }
}
@keyframes landscape-prev {
  0% { transform: rotateY(-180deg) skewY(0); }
  52% { transform: rotateY(-86deg) skewY(1deg); }
  100% { transform: rotateY(0deg) skewY(0); }
}
@keyframes page-shadow {
  0%, 100% { opacity: 0; }
  45%, 70% { opacity: 1; }
}
.page-content { position: absolute; inset: 0; display: flex; flex-direction: column; }
.sample-cover { justify-content: flex-end; padding: 8%; color: #f5f1e8; background: linear-gradient(150deg, transparent 35%, rgba(0,0,0,.62)), radial-gradient(circle at 68% 31%, #d6b86e 0 5%, transparent 5.5%), linear-gradient(130deg, #23495b, #0c2432 56%, #07141b); }
.sample-cover::before { content: ""; position: absolute; inset: 0; opacity: .32; background: repeating-linear-gradient(115deg, transparent 0 18px, rgba(255,255,255,.06) 18px 19px); }
.sample-cover > * { position: relative; }
.sample-kicker { font-size: clamp(9px, .8vw, 13px); letter-spacing: .22em; text-transform: uppercase; opacity: .74; }
.sample-cover h1 { margin: .18em 0 .12em; font: 600 clamp(28px, 4vw, 62px)/.96 "Playfair Display", serif; letter-spacing: -.045em; }
.sample-cover p { max-width: 21em; margin: 0; font-size: clamp(10px, 1vw, 15px); line-height: 1.5; opacity: .72; }
.editorial-page { padding: 9%; background: #f2eee5; }
.editorial-page .folio { color: #9f6f45; font-size: 10px; letter-spacing: .2em; }
.editorial-page h2 { max-width: 8em; margin: auto 0 .35em; font: 600 clamp(23px, 3vw, 48px)/1.02 "Playfair Display", serif; letter-spacing: -.035em; }
.editorial-page p { max-width: 27em; margin: 0 0 auto; font: 400 clamp(10px, .9vw, 15px)/1.65 Manrope, sans-serif; color: #55534f; }
.photo-page { justify-content: flex-end; padding: 7%; color: white; background: radial-gradient(circle at 28% 32%, rgba(245,201,114,.86) 0 4%, transparent 4.4%), linear-gradient(to bottom, rgba(7,19,30,.03), rgba(7,19,30,.82)), linear-gradient(135deg, #7291a2, #274453 58%, #0a1d25); }
.photo-page::before { content: ""; position: absolute; width: 65%; height: 60%; right: -18%; top: 10%; border-radius: 50% 0 0 50%; background: rgba(235,219,185,.16); filter: blur(3px); transform: rotate(-12deg); }
.photo-page h2 { position: relative; margin: 0; font: italic 500 clamp(24px, 3.2vw, 50px)/1 "Playfair Display", serif; }
.photo-page p { position: relative; max-width: 24em; margin: .8em 0 0; font-size: clamp(9px, .8vw, 13px); line-height: 1.55; opacity: .76; }
.quote-page { justify-content: center; align-items: center; padding: 12%; text-align: center; background: #e6d6b8; }
.quote-page span { color: #866441; font-size: 42px; line-height: .6; }
.quote-page blockquote { margin: .55em 0; font: italic 500 clamp(22px, 3vw, 44px)/1.18 "Playfair Display", serif; }
.quote-page cite { font-size: 10px; letter-spacing: .18em; font-style: normal; text-transform: uppercase; }
.index-page { padding: 10%; background: #172b36; color: #eee7db; }
.index-page h2 { margin: 0 0 auto; font: 600 clamp(24px, 3vw, 46px)/1 "Playfair Display", serif; }
.index-list { display: grid; gap: 14px; margin-top: auto; }
.index-list div { display: grid; grid-template-columns: 27px 1fr auto; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.16); font-size: clamp(9px, .9vw, 14px); }
.index-list b { color: var(--accent); font-size: 10px; }
.back-cover { align-items: center; justify-content: center; padding: 12%; text-align: center; color: #eee8dd; background: linear-gradient(135deg, #102a37, #091820); }
.back-cover .brand-mark { width: 42px; height: 38px; margin-bottom: 24px; }
.back-cover p { max-width: 20em; font-family: "Playfair Display", serif; font-size: clamp(15px, 1.7vw, 26px); }
.pdf-page { background: #fff; }
.page-number { position: absolute; right: 6%; bottom: 4%; font-size: 9px; color: rgba(0,0,0,.4); }

.reader-tools { z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 28px; border-left: 1px solid var(--line); background: rgba(0,0,0,.09); }
.tool-button { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); transition: .2s ease; }
.tool-button:hover, .tool-button.active { color: var(--ink); background: rgba(255,255,255,.07); }

.reader-bar { grid-template-columns: auto minmax(250px, 420px) auto 1fr auto; justify-content: center; gap: 20px; padding: 0 30px; border-top: 1px solid var(--line); }
.page-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); }
.page-button:hover { color: var(--ink); border-color: rgba(255,255,255,.3); }
.page-status { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; color: var(--muted); font: 500 11px/1 Manrope, sans-serif; }
.page-jump, .page-jump-input { width: 36px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--muted); font: 500 11px/1 Manrope, sans-serif; text-align: center; }
.page-jump-input { width: 46px; border-bottom: 1px solid var(--accent); color: var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.progress-track { height: 1px; background: rgba(255,255,255,.17); }
.progress-track i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .4s ease; }
.turn-hint { justify-self: end; color: var(--muted); font-size: 11px; }
.catalog-download { color: var(--accent); font-size: 11px; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); padding-bottom: 2px; }
.catalog-download:hover { color: var(--ink); border-color: var(--ink); }

body.catalog-loaded { --book-width: min(80vw, 1280px); }
body.catalog-loaded[data-theme="magazine"] { --book-width: min(76vw, 1160px); }
body.catalog-loaded[data-theme="modern"], body.catalog-loaded[data-theme="antique"] { --book-width: min(73vw, 1080px); }

.book-plinth[hidden] { display: none !important; }
.missing-pdf { position: relative; z-index: 5; margin: 0; max-width: min(420px, calc(100% - 32px)); padding: 28px 22px; border: 1px dashed rgba(255,255,255,.28); border-radius: 16px; text-align: center; font: 600 22px/1.3 "Playfair Display", Georgia, serif; }
.drop-message { position: absolute; z-index: 30; inset: 22px; display: none; place-items: center; align-content: center; gap: 8px; border: 1px dashed rgba(255,255,255,.32); border-radius: 18px; background: rgba(10,11,10,.88); backdrop-filter: blur(20px); pointer-events: none; }
.drop-message svg { width: 34px; fill: none; stroke: var(--accent); stroke-width: 1.5; }
.drop-message strong { font: 600 25px "Playfair Display", serif; }
.drop-message span { color: var(--muted); font-size: 13px; }
.reading-room.dragging .drop-message { display: grid; }
.loading-card { position: absolute; z-index: 40; width: min(360px, calc(100% - 40px)); padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: rgba(17,18,16,.92); box-shadow: 0 30px 80px rgba(0,0,0,.45); backdrop-filter: blur(18px); text-align: center; }
.loading-card[hidden] { display: none; }
.loader { width: 28px; height: 28px; margin: 0 auto 16px; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.loading-card strong, .loading-card span { display: block; }
.loading-card span { margin-top: 6px; color: var(--muted); font-size: 12px; }
.loading-track { height: 3px; margin-top: 20px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.1); }
.loading-track i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .25s ease; }
@keyframes spin { to { transform: rotate(360deg); } }

.info-dialog { width: min(500px, calc(100% - 32px)); padding: 38px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; color: #efede7; background: #1d1e1b; box-shadow: 0 40px 100px rgba(0,0,0,.6); }
.info-dialog::backdrop { background: rgba(0,0,0,.64); backdrop-filter: blur(8px); }
.info-dialog h2 { margin: 10px 0 14px; font: 600 31px/1.06 "Playfair Display", serif; }
.info-dialog p, .info-dialog li { color: rgba(255,255,255,.68); line-height: 1.6; }
.info-dialog ul { padding-left: 20px; }
.dialog-close { position: absolute; right: 15px; top: 12px; width: 36px; height: 36px; color: var(--muted); font-size: 25px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 92px; transform: translate(-50%, 18px); padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: rgba(15,16,14,.9); box-shadow: 0 12px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: .3s ease; font-size: 12px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

body[data-theme="magazine"] { --room: #241a2e; --room-deep: #17101d; --accent: #ff6a8f; --paper: #fff; --book-width: min(64vw, 890px); --book-ratio: 1.24; --radius: 0; }
body[data-theme="magazine"] .book-edge { width: 4px; opacity: .55; }
body[data-theme="magazine"] .flipbook { filter: drop-shadow(0 24px 18px rgba(0,0,0,.32)); }
body[data-theme="magazine"] .ambient-two { background: #a23bd0; }
body[data-theme="modern"] { --room: #202326; --room-deep: #151719; --accent: #d7e0e4; --paper: #f8f8f6; --book-width: min(60vw, 840px); --book-ratio: 1.08; --radius: 1px; }
body[data-theme="modern"] .book-edge { width: 8px; }
body[data-theme="modern"] .ambient-two { background: #d7e0e4; opacity: .04; }
body[data-theme="antique"] { --room: #24170f; --room-deep: #160d08; --accent: #c79b58; --paper: #e2cda5; --book-width: min(61vw, 850px); --book-ratio: 1.12; --radius: 3px; }
body[data-theme="antique"] .book-edge { width: 14px; background: repeating-linear-gradient(to bottom, #bda67d 0 1px, #dbc69e 1px 3px); }
body[data-theme="antique"] .flipbook { filter: drop-shadow(0 32px 24px rgba(0,0,0,.48)) sepia(.12); }
body[data-theme="antique"] .page { box-shadow: inset 0 0 42px rgba(83,47,16,.18); }
body[data-theme="antique"] .ambient-two { background: #b9672f; }

@media (max-width: 920px) {
  .studio-shell { grid-template-rows: 68px 1fr 72px; }
  .workspace { grid-template-columns: 1fr 58px; }
  .format-rail { position: absolute; z-index: 25; left: 14px; bottom: 86px; right: 72px; flex-direction: row; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(14,15,13,.82); backdrop-filter: blur(20px); overflow-x: auto; }
  .rail-label { display: none; }
  .format-chip { min-width: 105px; display: flex; align-items: center; padding: 7px 9px; }
  .format-swatch { width: 31px; min-width: 31px; height: 22px; }
  .swatch-coffee { width: 35px; min-width: 35px; }
  .book-plinth { width: min(82vw, 740px); }
  .turn-hint { display: none; }
  .reader-bar { grid-template-columns: auto minmax(190px, 330px) auto auto; padding: 0 16px; gap: 10px; }
}

@media (max-width: 620px) {
  .topbar { grid-template-columns: 1fr auto; padding: 0 14px; }
  .book-meta { display: none; }
  .upload-button { width: 42px; height: 42px; justify-content: center; padding: 0; }
  .upload-button span, .upload-button:not(:has(span)) { font-size: 0; }
  .upload-button { font-size: 0; }
  .workspace { grid-template-columns: 1fr; }
  /* Phones: the page gets its own row; formats and tools sit in a strip below it,
     never on top of the page. */
  .workspace { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; }
  .reading-room { grid-column: 1 / -1; grid-row: 1; container-type: size; }
  .format-rail { position: static; grid-column: 1; grid-row: 2; min-width: 0; gap: 6px; padding: 6px 0 8px 12px; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; overflow-x: auto; }
  .reader-tools { position: static; grid-column: 2; grid-row: 2; flex-direction: row; align-items: center; gap: 2px; padding: 6px 10px 8px 6px; border: 0; background: transparent; }
  .tool-button { width: 38px; height: 38px; }
  .format-chip { min-width: 44px; justify-content: center; padding: 6px 7px; }
  .format-chip > span:last-child { display: none; }
  .book-plinth, body[data-theme] .book-plinth { width: min(92cqw, calc((100cqh - 24px) * var(--plinth-ratio, .78))); aspect-ratio: var(--plinth-ratio, .78); }
  .toast { bottom: 80px; }
  .book-edge { display: none; }
  .reader-bar { grid-template-columns: 40px 1fr 40px; }
  .catalog-download { display: none; }
  .page-status { grid-template-columns: auto 1fr auto; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* A page that is not decoded yet is only the paper color. */
.page-placeholder { position: absolute; inset: 0; background: var(--paper, #f4efe4); }
.curl-book.is-waiting::after {
  content: "";
  position: absolute;
  z-index: 7;
  top: 10px;
  bottom: 10px;
  width: 22px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 220, .72), transparent);
  animation: folio-edge 1.1s ease-in-out infinite;
}
.curl-book.is-waiting[data-wait="prev"]::after { left: 0; }
.curl-book.is-waiting[data-wait="next"]::after,
.curl-book.is-waiting:not([data-wait="prev"])::after { right: 0; }
.curl-cue {
  position: absolute;
  z-index: 8;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 244, 220, .92);
  opacity: 0;
}
.curl-book.is-waiting .curl-cue { opacity: 1; animation: folio-cue 1.1s ease-in-out infinite; }
.curl-book.is-waiting[data-wait="prev"] .curl-cue { left: -5px; bottom: 16px; }
.curl-book.is-waiting[data-wait="next"] .curl-cue,
.curl-book.is-waiting:not([data-wait="prev"]) .curl-cue { right: -5px; bottom: 16px; }
.curl-book.is-landing .leaf { animation: folio-land 320ms ease; }
@keyframes folio-edge {
  0%, 100% { opacity: .25; }
  50% { opacity: .9; }
}
@keyframes folio-cue {
  0%, 100% { transform: scale(.85); opacity: .45; }
  50% { transform: scale(1.15); opacity: 1; }
}
@keyframes folio-land {
  from { opacity: 0; }
  to { opacity: 1; }
}

.curl-book { position: relative; width: 100%; height: 100%; touch-action: none; user-select: none; }
.curl-book .leaf { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.curl-book .leaf.is-bare { visibility: hidden; }
body:has(.curl-book .leaf-left.is-bare) .book-edge-left,
body:has(.curl-book .leaf-right.is-bare) .book-edge-right { visibility: hidden; }
.curl-book.single .leaf-left { display: none; }
.curl-book.single .leaf-right { left: 0; right: 0; }
.curl-book.spread .leaf-left { left: 0; width: 50%; }
.curl-book.spread .leaf-right { left: 50%; width: 50%; }
.curl-book.spread.solo .leaf-left { display: none; }
.curl-book.spread.solo .leaf-right { left: 0; width: 100%; }
.curl-book.spread.solo::after { content: none; }
.curl-book .leaf-face { position: absolute; inset: 0; overflow: hidden; }
/* Only the front face is ever shown. The curl canvas paints the back of a turning
   page; a DOM back face here once escaped the leaf at the wrong size (2026-10-12). */
.curl-book .leaf-face.back { display: none; }
.curl-book .leaf-face canvas { max-width: 100%; max-height: 100%; }
.curl-book .leaf .page { position: absolute; inset: 0; width: 100%; height: 100%; }
.curl-book .page-hold { position: absolute; top: 0; height: 100%; visibility: hidden; pointer-events: none; overflow: hidden; }
.curl-book.single .page-hold { left: 0; width: 100%; }
.curl-book.spread .page-hold { left: 50%; width: 50%; }
.curl-book.spread.solo .page-hold { left: 0; width: 100%; }
.curl-book .page-hold .page { position: absolute; inset: 0; width: 100%; height: 100%; }
.curl-layer { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; visibility: hidden; }
.curl-book .endpaper { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.08), transparent 14%), var(--paper, #f4f1ea); }
.curl-book.spread::after { content: ""; position: absolute; z-index: 4; top: 0; bottom: 0; left: 50%; width: 16px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,.28), rgba(0,0,0,.04)); }
.book-gate { position: relative; z-index: 5; width: min(380px, calc(100% - 32px)); display: grid; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: rgba(17,18,16,.92); }
.book-gate h2 { margin: 0; font: 600 28px/1.1 "Playfair Display", Georgia, serif; }
.book-gate p { margin: 0; color: var(--muted); }
.book-gate label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.book-gate input { width: 100%; min-width: 0; font: inherit; color: var(--ink); background: #111210; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 12px; }
.book-gate button { justify-self: start; border: 0; border-radius: 999px; padding: 12px 16px; background: var(--accent); color: #1a1814; font: 600 14px/1 Manrope, sans-serif; }
.book-gate-error { min-height: 1.2em; color: #ffb4a8; }
.build-tag { position: absolute; right: 12px; top: 5px; z-index: 1; font: 500 10px/1 Manrope, sans-serif; letter-spacing: .04em; color: var(--muted); opacity: .8; pointer-events: none; user-select: none; white-space: nowrap; }

/* Page links (hotspots). Invisible until hover; a soft glint when the page lands. */
.curl-book .hotspot-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.curl-book:not([data-curl="idle"]) .hotspot-layer { visibility: hidden; }
.folio-hotspot {
  position: absolute; pointer-events: auto; margin: 0; padding: 0; border: 0; border-radius: 6px;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.folio-hotspot:hover, .folio-hotspot:focus-visible {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55), 0 0 18px rgba(255, 255, 255, 0.18);
  outline: none;
}
.folio-hotspot:active { background: rgba(255, 255, 255, 0.22); }
.hotspot-layer.hint .folio-hotspot { animation: folio-hotspot-glint 1.4s ease 0.35s 1; }
@keyframes folio-hotspot-glint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  40% { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.45), 0 0 14px rgba(255, 255, 255, 0.16); }
}
@media (prefers-reduced-motion: reduce) { .hotspot-layer.hint .folio-hotspot { animation: none; } }

/* End-reader view (?chrome=0). Same book and turns. Header, formats, tools, and the release label stay in the page for the studio script, and are not shown. */
body.folio-bare,
body.folio-bare .studio-shell,
body.folio-bare .reading-room {
  background: #111210;
}
body.folio-bare { overflow: hidden; }
body.folio-bare .studio-shell {
  display: block;
  position: relative;
  height: 100svh;
  min-height: 100%;
  background-image: none;
}
body.folio-bare .workspace,
body.folio-bare .reading-room {
  display: block;
  height: 100%;
  min-height: 100svh;
}
body.folio-bare .reading-room::before,
body.folio-bare .ambient,
body.folio-bare .topbar,
body.folio-bare .format-rail,
body.folio-bare .reader-tools,
body.folio-bare .build-tag,
body.folio-bare .catalog-download,
body.folio-bare .turn-hint,
body.folio-bare .progress-track,
body.folio-bare .drop-message,
body.folio-bare .info-dialog {
  display: none !important;
}
body.folio-bare .reader-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0 12px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
body.folio-bare .page-button {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}
body.folio-bare .page-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-width: 4.6em;
  color: rgba(244, 241, 234, 0.78);
  font: 500 12px/1 Manrope, sans-serif;
  letter-spacing: 0.06em;
}
body.folio-bare .page-jump {
  width: auto;
  min-width: 1.4em;
  cursor: default;
  pointer-events: none;
}
body.folio-bare #totalPages::before { content: "/"; margin: 0 0.35em 0 0; }

/* Minimal embed (/<slug>/embed?bare=1): only the book, centred and as large as
   fits. No header, title, formats, tools, page counter, page buttons or zoom.
   Turn pages by swipe, click/drag or arrow keys. Elements stay in the DOM for
   the reader script and are hidden here. */
body.reader-bare,
body.reader-bare .studio-shell,
body.reader-bare .reading-room { background: transparent; }
html:has(body.reader-bare) { background: transparent; }
body.reader-bare { overflow: hidden; margin: 0; }
body.reader-bare .studio-shell {
  display: block; position: relative; height: 100svh; min-height: 100%;
  padding: 0; background-image: none;
}
body.reader-bare .workspace,
body.reader-bare .reading-room { display: block; height: 100%; min-height: 100svh; padding: 0; margin: 0; }
body.reader-bare .reading-room::before,
body.reader-bare .ambient,
body.reader-bare .topbar,
body.reader-bare .format-rail,
body.reader-bare .reader-tools,
body.reader-bare .reader-bar,
body.reader-bare .build-tag,
body.reader-bare .catalog-download,
body.reader-bare .turn-hint,
body.reader-bare .drop-message,
body.reader-bare .info-dialog,
body.reader-bare .book-shadow { display: none !important; }
body.reader-bare .loading-card,
body.reader-bare .toast { display: none !important; }
body.reader-bare .bare-poster {
  position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none;
}
body.reader-bare .bare-poster img {
  position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; display: block;
}
/* Loading = loaded look: nothing of the reader (plinth, edges, page paper) shows
   until page one has painted; then the book fades in over the poster. */
body.reader-bare .book-edge { display: none !important; }
body.reader-bare .book-plinth { transition: opacity .25s ease; }
body.reader-bare:not(.bare-ready) .book-plinth { opacity: 0; }
/* 8px inset + contain = the same box the loaded cover lands in (measured 1440 and 390). */
body.reader-bare .bare-poster { transition: opacity .25s ease; background: transparent; }
body.reader-bare.bare-ready .bare-poster { opacity: 0; }
body.reader-bare .bare-spinner {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: bare-spin .9s linear infinite;
}
@keyframes bare-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.reader-bare .bare-spinner { animation: none; } }
body.reader-bare .bare-error {
  position: fixed; inset: 0; margin: auto; height: fit-content; max-width: 22em; padding: 0 16px;
  text-align: center; color: rgba(255,255,255,.82); font: 400 15px/1.5 system-ui, sans-serif;
}
/* Phone swipe: the book owns one-finger drags. No pan-y here, or the browser
   takes a slightly vertical swipe as a scroll, cancels the pointer (no turn)
   and chains the scroll to the page behind the popup. Pinch zoom stays. */
html:has(body.reader-bare), body.reader-bare { overscroll-behavior: none; }
/* Bare embed: no panel behind the book; the host page's backdrop shows through. */
html:has(body.reader-bare),
body.reader-bare,
body.reader-bare .studio-shell,
body.reader-bare .workspace,
body.reader-bare .reading-room,
body.reader-bare .book-plinth {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color-scheme: normal;
}
body.reader-bare .reading-room, body.reader-bare #flipbook { touch-action: pinch-zoom; overscroll-behavior: contain; }