/* Real CSS volumes share the same coordinate space as the turning leaves. */
.book-wrap, .book-wrap[data-position='start'], .book-wrap[data-position='end'], .focus-mode .book-wrap {
  --orbit-x: 10deg; --orbit-y: -18deg;
  transform: perspective(2200px) rotateX(var(--orbit-x)) rotateY(var(--orbit-y));
  transform-style: preserve-3d; perspective: none; filter: none;
  transition: transform .45s ease; touch-action: pan-y; cursor: default;
}
.book-wrap.is-dragging { cursor: grabbing; transition: none; }
.book-wrap img { user-select: none; -webkit-user-drag: none; }
.book { filter: none; transform-style: preserve-3d; }
.book-wrap, .book { pointer-events: none; }
.book-wrap .page[aria-hidden='false'] { pointer-events: auto; }
.book-wrap .page[aria-hidden='false'], .gallery-page .paper-artwork { cursor: grab; }
.solid-under, .solid-side { pointer-events: auto; cursor: grab; }
.book::before { display: none; }
.book-wrap:focus-visible { outline: 1px dashed #718d7950; outline-offset: 24px; }
.solid-half { position: absolute; top: 0; left: 0; width: var(--page-width); height: var(--page-height); transform-style: preserve-3d; pointer-events: none; }
.solid-right { left: var(--page-width); }
.book.closed-start .solid-left, .book.closed-end .solid-right { display: none; }
.solid-under { position: absolute; inset: -3px; display: grid; place-items: center; border: 2px solid #365e5b; border-radius: 5px 9px 9px 5px; background: repeating-linear-gradient(90deg,#ffffff0c 0 1px,transparent 1px 4px),#477c77; transform: translateZ(-22px) rotateY(180deg); backface-visibility: hidden; box-shadow: inset 0 0 0 10px #477c77,inset 0 0 0 11px #d3dabc38; color: #ece4bb; }
.solid-under span { text-align: center; font: 22px/2 var(--hand); letter-spacing: .1em; }
.solid-under small { display: block; font-size: 10px; letter-spacing: .1em; }
.solid-left .solid-under > span { position: absolute; bottom: 43px; left: 34px; right: 23px; padding: 10px; border-radius: 3px; background: #f1dfa0; color: #294e4c; font-size: 28px; }
.solid-side { position: absolute; top: 0; height: 100%; width: 22px; transform-origin: left center; }
.outer-edge { left: 100%; transform: rotateY(90deg); background: repeating-linear-gradient(90deg,#d4cfb9 0 1px,#f9f4e4 1px 3px); border-block: 3px solid #477c77; }
.binding-edge { left: 0; transform: rotateY(90deg); background: repeating-linear-gradient(0deg,#ffffff0a 0 1px,transparent 1px 4px),#365f5a; color: #e4dbaf; font: 11px/22px var(--hand); writing-mode: vertical-rl; text-align: center; letter-spacing: 5px; }
.solid-left .outer-edge { left: 0; }
.solid-left .binding-edge { left: 100%; }
.solid-top, .solid-bottom { position: absolute; left: 0; width: 100%; height: 22px; transform-origin: center top; transform: rotateX(-90deg); background: repeating-linear-gradient(0deg,#d2ceb9 0 1px,#f7f1e1 1px 3px); border-inline: 3px solid #477c77; }
.solid-top { top: 0; }.solid-bottom { top: 100%; }
.desk-intro { left: 5%; top: 35%; max-width: 220px; pointer-events: none; }
.desk-intro h2 { font-size: 34px; }.desk-intro p { font-size: 11px; }
.desk-pencils { opacity: .65; }
.orbit-tools { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; white-space: nowrap; z-index: 200; color: #738273; font: 11px/1.5 -apple-system,'PingFang SC',sans-serif; }
.orbit-tools button { min-width: 36px; min-height: 36px; border: 1px solid #75897326; border-radius: 50%; background: #fffdf7a6; color: #3e6254; cursor: pointer; font: 23px/1 var(--hand); }
.orbit-tools #orbitReset { font: 11px/1.5 -apple-system,'PingFang SC',sans-serif; border-radius: 7px; padding: 7px 11px; }
.orbit-tools button:hover { background: #fffdf4; }
.flower-launch { position: fixed; bottom: 42px; right: 34px; z-index: 200; padding: 9px 14px; background: #fff9ed; color: #936749; border: 1px solid #ba926136; border-radius: 10px; font: 12px/1.5 -apple-system,'PingFang SC',sans-serif; cursor: pointer; }
.flower-launch span { color: #ce885f; font-size: 21px; vertical-align: -2px; margin-right: 4px; }
.title-page { padding: 22px 30px; }
.title-page h1 { font-size: clamp(24px,3vw,39px); }
.title-page .year { margin-top: 12px; }
.title-page .child-quote { margin: 15px 0 10px; }
.flower-patch { position: relative; width: 200px; max-width: 90%; height: 95px; min-height: 60px; margin-bottom: 18px; }
.flower-patch:empty::after { content: '留一朵小花，在这里。'; position: absolute; inset: 35% 0; text-align: center; font: 12px/1.5 var(--hand); color: #a79d7e; }
.flower-sticker { position: absolute; width: 40px; height: 40px; display: grid; place-items: center; font: 49px/1 Georgia,serif; color: var(--petal,#d9a46d); transform: rotate(var(--twist)); text-shadow: 0 2px 0 #fffaf0,1px 3px 2px #756d432b; }
.flower-sticker.just-given { animation: flower-stick .6s cubic-bezier(.25,.9,.3,1.3); }
.give-flower { display: flex; align-items: center; gap: 8px; padding: 9px 15px; color: #8c6345; background: #f5e8cd; border: 1px solid #ba95654a; border-radius: 18px 15px 17px 14px; font: 13px/1.5 var(--hand); box-shadow: 0 2px 0 #b99d6c24; cursor: pointer; }
.give-flower > span { font: 25px/1 Georgia,serif; color: #c88458; }
.give-flower:disabled { opacity: .6; cursor: wait; }
.flower-total { font: 11px/1.6 -apple-system,'PingFang SC',sans-serif; color: #7c806a; margin: 10px 0 0; }
.flower-total strong { color: #aa7850; font-size: 16px; font-weight: 500; }
.flower-feedback { min-height: 16px; margin: 3px 0 0; color: #9a734f; font: 10px/1.6 var(--hand); }
.title-page .page-catalog { margin-top: 7px; padding: 3px; }
@keyframes flower-stick { from { opacity: 0; scale: 1.8; translate: 10px -35px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@media (min-width: 1251px) { .book-wrap[data-position='start'] { translate: 100px 0; } }
@media (max-height: 750px) and (min-width: 781px) { .flower-patch { height: 65px; margin-bottom: 8px; }.title-page h1 { font-size: 29px; }.title-page .year { margin-top: 8px; }.title-page .child-quote { margin: 8px 0; }.give-flower { padding: 5px 12px; }.flower-total { margin-top: 5px; } }
@media (max-width: 780px) {
  .stage { padding: 130px 0 180px; grid-template-columns: minmax(0, 1fr); }
  .book-wrap, .book-wrap[data-position='start'], .book-wrap[data-position='end'] { width: calc(var(--page-width) * 2); height: var(--page-height); flex-shrink: 0; filter: none; }
  .book { display: block !important; }
  .leaf { display: block !important; }
  .leaf[style*='display: none'] { display: none !important; }
  .page { display: block !important; visibility: inherit; }
  .page.front { transform: rotateY(0deg) translateZ(.8px) !important; }
  .page.back { transform: rotateY(180deg) translateZ(.8px) !important; }
  .page[style*='visibility: hidden'] { visibility: hidden !important; }
  .inside-cover, .title-page, .gallery-page, .notes-page, .end-page { display: flex !important; }
  .spine-shadow { display: block; }
  .cover-art { inset: 16px 16px 88px; width: calc(100% - 32px); height: calc(100% - 104px); padding: 4px; }
  .cover-title { left: 15px; right: 12px; bottom: 30px; padding: 9px 5px; font-size: 22px; gap: 5px; }
  .cover-author { right: 20px; bottom: 14px; }.cover-spark { display: none; }
  .book.open .page { border-radius: 2px 5px 5px 2px; }
  .book.open .gallery-page { padding: 10px 10px 5px; }
  .book.open .paper-caption { flex-basis: 45px; gap: 1px; }
  .book.open .paper-caption strong { font-size: 11px; }
  .book.open .paper-caption span { font-size: 7px; }
  .book.open .original-button { font-size: 8px; padding: 3px; }
  .book.open .page-number { font-size: 7px; bottom: 3px; }
  .book.open .owner-label { padding: 12px 4px; width: 80%; }.owner-label small { font-size: 8px; }.owner-label strong { font-size: 17px; }.owner-stars { font-size: 20px; margin: 15px 0; }
  .book.open .title-page { padding: 8px; }
  .title-page h1 { font-size: 20px; }.title-page h1 span { font-size: 10px; margin-bottom: 2px; }.title-page h1::after { height: 3px; margin-top: 2px; }
  .title-page .year { margin-top: 6px; gap: 4px; }.title-page .year strong { font-size: 13px; }.title-page .year span { font-size: 8px; }
  .title-page .child-quote { display: none; }
  .flower-patch { height: 42px; min-height: 32px; width: 118px; margin-bottom: 4px; }
  .flower-patch:empty::after { font-size: 8px; }.flower-sticker { width: 23px; height: 23px; font-size: 28px; }
  .give-flower { font-size: 10px; padding: 4px 9px; margin-top: 7px; gap: 3px; }.give-flower > span { font-size: 16px; }
  .flower-total { font-size: 8px; margin-top: 4px; }.flower-total strong { font-size: 11px; }.flower-feedback { font-size: 7px; min-height: 11px; margin: 1px; }
  .title-page .page-catalog, .inside-cover .inside-mark { display: none; }
  .solid-under span { font-size: 14px; }.solid-under small { font-size: 7px; }.solid-side { font-size: 8px; }
  .solid-left .solid-under > span { bottom: 22px; left: 12px; right: 12px; font-size: 13px; padding: 5px; }
  .orbit-tools { top: 82px; gap: 9px; }
  .flower-launch { bottom: 102px; right: 18px; padding: 6px 10px; font-size: 10px; }
  .catalog-launch { bottom: 102px; left: 18px; transform: none; padding: 9px 11px; }
  .desk-heading { font-size: 11px; left: 15px; }.scene-tools { right: 12px; }.scene-tools .scene-tool { padding: 0 7px; }
  .book.open .notes-page, .book.open .end-page { padding: 15px; font-size: 10px; }.book.open .notes-page h2, .book.open .end-page h2 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .book-wrap, .flower-sticker.just-given { transition: none; animation: none; } }

/* Invisible middle-page reading regions; the remaining book surface rotates. */
.click-zone, .book-wrap .click-zone { display: block; width: calc(var(--page-width) * .29); top: 23%; bottom: 23%; transform: translateZ(5px); z-index: 110; border-radius: 4px; touch-action: manipulation; }
.click-zone::before, .click-zone::after { content: none; display: none; }
.click-zone:disabled { pointer-events: none; }
.stage > .click-zone { position: fixed; right: auto; bottom: auto; transform: none; z-index: 220; touch-action: none; user-select: none; }
.book-wrap { touch-action: none; }
.controls .nav-button, .hint { display: none; }
.stage > .click-zone:disabled, .book-rear .stage > .click-zone, .book-rotating .stage > .click-zone { visibility: hidden; pointer-events: none; }
.viewing-back .click-zone, .is-dragging .click-zone { pointer-events: none; visibility: hidden; }
.orbit-handle { position: fixed; z-index: 240; width: 50px; height: 61px; padding: 3px; border: 1px solid #aa86604a; border-radius: 20px 20px 13px 13px; color: #976244; background: #fffaf0ed; box-shadow: 0 3px 10px #78553812; cursor: grab; touch-action: none; user-select: none; }
.orbit-handle > span { display: block; font: 28px/1.1 Georgia,serif; }.orbit-handle > small { font: 9px/1.5 -apple-system,'PingFang SC',sans-serif; }
.orbit-handle:active { cursor: grabbing; background: #f2dfc1; }
.book-wrap.is-dragging { transition: none; }
.flower-toast { position: fixed; right: 34px; bottom: 104px; z-index: 250; width: 310px; max-width: calc(100vw - 32px); padding: 17px 20px; border-radius: 14px; border: 1px solid #d2a98a59; background: #fffaf1; box-shadow: 0 10px 30px #78553818; }
.flower-toast[hidden] { display: none; }.flower-toast p { margin: 0; font: 13px/1.9 -apple-system,'PingFang SC',sans-serif; color: #91614c; }
.flower-toast a { display: inline-block; text-decoration: none; border-bottom: 1px dashed #b98d73; padding: 4px 0; margin-top: 10px; font: 12px/1.5 -apple-system,'PingFang SC',sans-serif; color: #91614c; }
.flower-toast a[hidden] { display: none; }
.scene-tools .vase-link { text-decoration: none; }
.flower-toast button { border: 0; background: none; border-bottom: 1px dashed #b98d73; padding: 4px 0; margin-top: 10px; font: 12px/1.5 -apple-system,'PingFang SC',sans-serif; color: #a15b47; cursor: pointer; }
.flower-launch span { color: #c86252; }.flower-launch:disabled { opacity: .6; cursor: wait; }
.flower-patch:empty::after { content: '你的小红花，会收藏在这里。'; }
.flower-total { margin-top: 22px; }.title-page .page-catalog { margin-top: 28px; }

/* Cloth over board, with thickness derived from the number of leaves. */
:root { --cloth: #e8d5b1; --binding: #b57859; --board-ink: #735342; }
.stage { background: radial-gradient(ellipse at 45% 20%,#fffdf7 0,#f3eee4 48%,#e6dfd1 100%); }
.stage::after { background: #7e6247; opacity: .13; }
.cover, .back-cover { background: repeating-linear-gradient(90deg,#ffffff18 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,#886d4509 0 1px,transparent 1px 3px),var(--cloth); border-color: var(--binding); box-shadow: inset 0 0 0 1px #f5ead263,inset 13px 0 15px #795d3120; border-radius: 2px; }
.cover::before { border-color: #ac865347; box-shadow: none; }
.cover-title { background: #fcf5e7; color: var(--board-ink); box-shadow: 0 2px 3px #795d3114; }
.cover-title strong, .cover-title span:first-child { color: var(--board-ink); }.cover-author { color: #886b52; }
.cover-art { box-shadow: 0 3px 6px #795d3126; }.hard-edge { background: var(--binding); }
.page:not(.cover):not(.back-cover) { background-image: none; background-color: #fcfaf3; border-radius: 1px; box-shadow: inset 12px 0 20px -19px #76533370; }
.page.back:not(.back-cover) { box-shadow: inset -12px 0 20px -19px #76533370; }
.page::after { background: none; }.page { --curve-shade: 0; }
.leaf::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--sheet-thickness,1px); transform-origin: left; transform: translateZ(calc(var(--sheet-thickness) / 2)) rotateY(90deg); background: #cfc5ae; pointer-events: none; }
.solid-half { transform: translateZ(var(--stack-top,0px)); }
.solid-under { background: repeating-linear-gradient(90deg,#ffffff14 0 1px,transparent 1px 4px),var(--cloth); border-color: var(--binding); border-radius: 2px; transform: translateZ(calc(-1 * var(--stack-depth,22px))) rotateY(180deg); color: var(--board-ink); box-shadow: inset 0 0 0 10px var(--cloth),inset 0 0 0 11px #a584533a; }
.solid-left .solid-under > span { color: var(--board-ink); background: #fcf5e7; }
.solid-side { width: var(--stack-depth,22px); backface-visibility: hidden; }
.outer-edge { background: repeating-linear-gradient(90deg,#c9bfa8 0 .6px,#f5efdf .6px var(--sheet-thickness,1px)); border-block: 2px solid var(--binding); }
.solid-left .outer-edge { transform: translateZ(calc(-1 * var(--stack-depth))) rotateY(-90deg); }
.binding-edge { transform: translateZ(calc(-1 * var(--stack-depth))) rotateY(-90deg); background: repeating-linear-gradient(0deg,#ffffff0e 0 1px,transparent 1px 4px),var(--binding); color: #fff0d9; line-height: var(--stack-depth,22px); backface-visibility: hidden; }
.solid-left .binding-edge { transform: rotateY(90deg); }
/* An open spread exposes the paper block at the gutter, not the closed spine. */
.book.open .binding-edge {
  background: repeating-linear-gradient(90deg,#d5cbb7 0 .6px,#f5efdf .6px var(--sheet-thickness,1px));
  box-shadow: inset 0 0 5px #806b4820;
  color: transparent;
  text-shadow: none;
}
.solid-top, .solid-bottom { height: var(--stack-depth,22px); border-inline-color: var(--binding); background: repeating-linear-gradient(0deg,#c9bfa8 0 .6px,#f5efdf .6px var(--sheet-thickness,1px)); }
.owner-label { background: #fbf3e2; border-color: #cdb68e88; color: #93704b; }.title-page h1,.owner-label strong { color: #8e6046; }.child-quote { color: #9c8264; }
.desk-intro { top: 28%; left: 5%; max-width: 245px; color: #75563f; }
.intro-eyebrow { font: 10px/1.5 -apple-system,'PingFang SC',sans-serif; letter-spacing: .18em; color: #9a8069; }
.desk-intro h2 { font-size: 32px; line-height: 1.65; margin: 22px 0 18px; letter-spacing: .02em; }.desk-intro h2 span { color: #ad7355; }
.desk-intro p { font-size: 12px; line-height: 2; color: #9b856f; }.intro-footnote { display: block; margin-top: 27px; font: 13px/1.7 var(--hand); color: #b29170; }
.intro-sketch { position: relative; width: 154px; height: 105px; margin-top: 35px; }
.intro-sketch i { position: absolute; width: 72px; height: 90px; border: 5px solid #fffdf6; box-shadow: 1px 4px 8px #76563919; background: url('assets/scans/b1-07-thumb.jpg') center/cover; transform: rotate(-13deg); }
.intro-sketch i:nth-child(2) { left: 39px; top: 9px; transform: rotate(8deg); background: url('assets/scans/b1-13-thumb.jpg') center/cover; }
.intro-sketch i:nth-child(3) { left: 76px; top: -3px; transform: rotate(-4deg); background: url('assets/scans/b4-04-thumb.jpg') center/cover; }
@media (max-width: 780px) {
  .click-zone, .book-wrap .click-zone { display: block; width: calc(var(--page-width) * .27); top: 23%; bottom: 23%; }
  .click-zone::after { width: 22px; height: 34px; font-size: 21px; }.click-prev::after { left: 3px; }.click-next::after { right: 3px; }
  .orbit-handle { width: 44px; height: 53px; }.orbit-handle > span { font-size: 23px; }
  .flower-toast { bottom: 160px; right: 16px; padding: 14px 17px; }.flower-toast p { font-size: 12px; }
  .flower-total { margin-top: 12px; }.flower-patch { margin-bottom: 10px; }.book.open .page { border-radius: 1px; }
  .binding-edge { font-size: 7px; letter-spacing: 2px; }
  .solid-under { box-shadow: inset 0 0 0 5px var(--cloth),inset 0 0 0 6px #a584533a; }
}