/* The second orbit: a leather-bound book that opens onto its contents. */
#gravityBook {
  --book-gold: #c6a46b;
  --book-ink: #4b321c;
  --book-serif: "KaiTi", "STKaiti", "楷体", "Songti SC", "SimSun", serif;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--book-gold);
  background: radial-gradient(ellipse at 50% 46%, #302617 0%, #15140f 38%, #090c0e 76%);
  overflow: auto;
  overscroll-behavior: contain;
  animation: none;
}
#gravityBook::backdrop { background: #080a0c; }
body.book-open { overflow: hidden; }
#gravityBook *, #gravityBook *::before, #gravityBook *::after { box-sizing: border-box; }
#gravityBook button { font: inherit; color: inherit; cursor: pointer; }
#gravityBook button:disabled { cursor: default; }
#gravityBook button:focus-visible { outline: 1px solid #ddbf89; outline-offset: 6px; }
#gravityBook .grimoire-room { min-height: 100svh; position: relative; display: grid; grid-template-rows: 76px 1fr 46px; overflow: hidden; }
.grimoire-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 42px; z-index: 3; }
#gravityBook .grimoire-exit { border: 0; background: none; font-size: 12px; letter-spacing: .13em; padding: 12px 0; }
.grimoire-exit span { margin-right: 8px; }
.grimoire-label { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--book-serif); font-size: 15px; letter-spacing: .25em; white-space: nowrap; }
.grimoire-label > span { margin: 0 .4em; }
.grimoire-index { font: 10px Georgia, serif; letter-spacing: .2em; opacity: .65; }
#gravityBook .grimoire-desk { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 0 0; margin: 0; min-height: 0; position: relative; z-index: 1; pointer-events: auto; }
.grimoire-desk::before { content: ""; position: absolute; width: 680px; height: 200px; max-width: 85vw; border-radius: 50%; background: #be955c13; box-shadow: 0 0 150px 50px #a16d2513; filter: blur(24px); bottom: 40px; pointer-events: none; }
.grimoire-stage { width: min(920px, calc(100vw - 110px), calc((100svh - 240px) * 1.66)); aspect-ratio: 1.66; perspective: 2100px; position: relative; margin: 0 auto; }
.grimoire-volume { position: absolute; width: 50%; height: 100%; left: 50%; transform-style: preserve-3d; transform: translateX(-50%) rotateY(-12deg) rotateZ(-2deg); transition: transform 1.4s cubic-bezier(.32,.03,.2,1); }
.grimoire-volume::after { content: ""; position: absolute; z-index: -1; inset: 12px -8px -8px 3px; background: #2a1a11; border: 2px solid #725030; border-radius: 3px 9px 9px 3px; box-shadow: 12px 25px 35px #0009, 2px 8px 7px #000a; transform: translateZ(-8px); }
.grimoire-page-stack { position: absolute; inset: 5px -5px -4px 3px; border: 1px solid #5e4428; border-radius: 2px 7px 7px 2px; background: repeating-linear-gradient(0deg,#977a4a 0,#d1b983 1px,#b89c67 2px,#6f542d 3px); box-shadow: 2px 2px 4px #0007; }
.grimoire-paper { background: radial-gradient(ellipse at 12% 8%,#75491635,transparent 44%), radial-gradient(ellipse at 100% 100%,#784c285c,transparent 53%), radial-gradient(ellipse at 70% 45%,#f0e1b9a6,transparent 70%), #ccb786; color: var(--book-ink); }
.grimoire-paper::after, .grimoire-cover-front::after { content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.67' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.8' filter='url(%23grain)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; border-radius: inherit; }
.grimoire-paper-frame { position: absolute; inset: 22px 24px; border: 1px solid #77562540; pointer-events: none; }
.grimoire-paper-frame::before, .grimoire-paper-frame::after { content: "◇"; position: absolute; font: 13px Georgia,serif; color: #896739; left: 50%; transform: translateX(-50%); line-height: 1; background: #cfb98a; padding: 0 7px; top: -7px; }
.grimoire-paper-frame::after { top: auto; bottom: -7px; }
.grimoire-contents { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 2px 5px 6px 2px; padding: 11% 12% 9%; box-shadow: inset 20px 0 22px -12px #30200f8a, inset -4px 0 9px #5a391740; }
.grimoire-contents-head { text-align: center; }
.grimoire-contents-head > span { font: 8px Georgia,serif; letter-spacing: .22em; color: #7d603d; }
.grimoire-contents-head h2 { font: 32px var(--book-serif); font-weight: 500; letter-spacing: .38em; margin: 12px 0 6px .38em; line-height: 1.2; outline: none; }
.grimoire-contents-head > div { color: #937142; font: 10px Georgia,serif; }
.grimoire-chapters { margin: 5% 0 10px; padding: 0; list-style: none; position: relative; display: grid; grid-template-rows: repeat(4,1fr); flex: 1; min-height: 0; }
.grimoire-chapters li { padding: 0; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid #7b582326; }
.grimoire-chapters li:last-child { border: 0; }
.grimoire-chapter-title { display: flex; gap: .5em; align-items: center; font-size: clamp(19px, 1.9vw, 25px); color: #47301e; }
.grimoire-chapter-title h3 { font-family: var(--book-serif); font-size: 1em; font-weight: 600; line-height: 1.35; letter-spacing: .025em; margin: 0; white-space: nowrap; }
#gravityBook .grimoire-rune { display: block; width: 1em; height: 1em; flex: 0 0 1em; stroke-width: 1.45; color: #75501f; }
.grimoire-chapters p { font: italic 11px/1.45 Georgia,"Times New Roman",serif; color: #795d3c; letter-spacing: .015em; margin: 7px 0 0; padding-left: calc(clamp(19px, 1.9vw, 25px) * 1.5); }
.grimoire-folio { position: absolute; bottom: 6.3%; left: 0; width: 100%; text-align: center; font: 9px Georgia,serif; color: #83633d; }
#gravityBook .grimoire-cover { position: absolute; inset: -2px -1px -2px -3px; z-index: 2; display: block; padding: 0; border: 0; background: transparent; text-align: center; transform-origin: left center; transform-style: preserve-3d; transform: rotateY(0deg); transition: transform 1.4s cubic-bezier(.32,.03,.2,1); -webkit-tap-highlight-color: transparent; }
.grimoire-cover-front, .grimoire-cover-back { position: absolute; display: block; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4px 7px 7px 4px; }
.grimoire-cover-front { transform: translateZ(1px); border: 1px solid #a07c4680; background: radial-gradient(ellipse at 60% 32%,#63493038,transparent 58%), linear-gradient(100deg,#100d09 0%,#48301b 2%,#1b1711 4%,#473522 6%,#241d13 9%,#292115 95%,#574027 99%,#1a130b); box-shadow: inset 0 0 2px 2px #bd935739,inset 0 0 34px #000a,7px 10px 25px #0007; color: #c7a56d; }
.grimoire-cover-front::before { content: ""; position: absolute; left: 3%; top: 0; bottom: 0; width: 4%; background: repeating-linear-gradient(0deg,transparent 0%,transparent 16%,#8b694823 16.4%,#130c0688 17.2%,transparent 19.5%); border-right: 1px solid #a17e4840; }
.grimoire-cover-frame { position: absolute; inset: 24px 25px 24px 33px; border: 1px solid #b3925c91; box-shadow: 0 0 0 4px #0000,0 0 0 5px #a989514a,inset 0 0 0 4px #0000,inset 0 0 0 5px #a9895138; }
.grimoire-cover-frame::before, .grimoire-cover-frame::after { content: ""; position: absolute; height: 18px; left: 17%; right: 17%; border: 1px solid #aa884c70; transform: skewX(-35deg); top: 20px; border-left: 0; border-right: 0; }
.grimoire-cover-frame::after { top: auto; bottom: 20px; }
.grimoire-corner { position: absolute; font: 34px Georgia,serif; line-height: 1; color: #b38d51; text-shadow: 0 1px #000; }
.corner-nw { top: 26px; left: 26px; }.corner-ne { top: 26px; right: 19px; }.corner-sw { bottom: 26px; left: 26px; }.corner-se { bottom: 26px; right: 19px; }
.grimoire-cover-kicker { position: absolute; width: 100%; top: 16%; left: 0; font: 9px Georgia,serif; letter-spacing: .3em; opacity: .8; }
.grimoire-cover-title { position: absolute; top: 22%; left: .3em; width: calc(100% - .3em); font-family: var(--book-serif); font-size: clamp(36px,4.6vw,62px); line-height: 1.15; letter-spacing: .3em; text-shadow: 0 2px 2px #000,0 -1px #f2da9c44; }
.grimoire-cover-subtitle { position: absolute; top: 38%; left: .25em; width: calc(100% - .25em); font: 17px var(--book-serif); letter-spacing: .4em; }
#gravityBook .grimoire-seal { position: absolute; top: 46%; left: 50%; width: 37%; height: auto; transform: translateX(-50%); stroke: currentColor; stroke-width: .9; color: #c6a363; filter: drop-shadow(0 1px 1px #000); }
.grimoire-cover-english { position: absolute; width: 100%; top: 79%; left: .2em; font: 12px Georgia,serif; letter-spacing: .4em; }
.grimoire-cover-foot { position: absolute; width: 100%; top: 87%; left: 0; font: 8px Georgia,serif; letter-spacing: .13em; opacity: .7; }
.grimoire-cover-back { transform: rotateY(180deg); box-shadow: inset -23px 0 24px -17px #39220db3,inset 4px 0 10px #6b49194d; }
.grimoire-frontispiece-top { position: absolute; top: 14%; left: 0; width: 100%; font: 9px Georgia,serif; letter-spacing: .22em; color: #8a6b3d; }
#gravityBook .grimoire-cover-back .grimoire-seal { top: 25%; width: 44%; color: #86673c; opacity: .7; filter: none; }
.grimoire-frontispiece-title { position: absolute; top: 64%; left: .35em; width: calc(100% - .35em); font: 32px var(--book-serif); letter-spacing: .35em; }
.grimoire-frontispiece-subtitle { position: absolute; top: 74%; left: .3em; width: calc(100% - .3em); font: 14px var(--book-serif); letter-spacing: .3em; color: #81613b; }
.grimoire-frontispiece-english { position: absolute; top: 82%; left: 0; width: 100%; font: 8px Georgia,serif; letter-spacing: .3em; color: #87663d; }
#gravityBook.is-open .grimoire-volume { transform: translateX(0) rotateY(0) rotateZ(0); }
#gravityBook.is-open .grimoire-cover { transform: rotateY(-179deg); }
.grimoire-actions { height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; position: relative; }
#gravityBook .grimoire-turn { display: flex; gap: 24px; align-items: center; padding: 9px 23px 11px; background: linear-gradient(120deg,#8f6b2b13,#b38f5321,#8f6b2b13); border: 1px solid #bd985550; font: 15px var(--book-serif); letter-spacing: .2em; box-shadow: inset 0 0 12px #bb92470a; transition: background .3s,border-color .3s; }
#gravityBook .grimoire-turn:hover { background-color: #9e783329; border-color: #cba45f; }
#gravityBook .grimoire-turn:disabled { opacity: .5; }
.grimoire-turn-arrow { font-family: Georgia,serif; font-size: 13px; }
.grimoire-instruction { font: 10px var(--book-serif); letter-spacing: .2em; color: #9b875f; margin: 0; }
#gravityBook .grimoire-footer { display: flex; align-items: center; justify-content: space-between; padding: 0 42px; height: auto; margin: 0; font: 8px Georgia,serif; letter-spacing: .2em; color: #6e6553; z-index: 1; }
.grimoire-footer > span:nth-child(2) { font-size: 12px; color: #aa864f; }
.grimoire-ambient { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.grimoire-ambient::before { content: ""; position: absolute; width: 80%; height: 100%; left: 20%; top: -30%; background: linear-gradient(135deg,transparent 38%,#d0b37e06 45%,transparent 52%); transform: rotate(-12deg); }
.grimoire-ambient i { position: absolute; width: 2px; height: 2px; background: #d8bc78; border-radius: 50%; opacity: 0; box-shadow: 0 0 9px #d6b267; animation: grimoireDust 14s ease-in-out infinite; top: 64%; left: 19%; }
.grimoire-ambient i:nth-child(2) { left: 31%; top: 80%; animation-delay: -3s; }.grimoire-ambient i:nth-child(3) { left: 76%; top: 76%; animation-delay: -8s; }.grimoire-ambient i:nth-child(4) { left: 68%; top: 41%; animation-delay: -5s; }.grimoire-ambient i:nth-child(5) { left: 87%; top: 54%; animation-delay: -11s; }.grimoire-ambient i:nth-child(6) { left: 11%; top: 32%; animation-delay: -6s; }.grimoire-ambient i:nth-child(7) { left: 53%; top: 18%; animation-delay: -9s; }.grimoire-ambient i:nth-child(8) { left: 42%; top: 53%; animation-delay: -2s; }
@keyframes grimoireDust { 0%,100% { opacity: 0; transform: translate(0,25px); } 30%,65% { opacity: .4; } 95% { transform: translate(25px,-60px); opacity: 0; } }
#gravityBook.instant-turn .grimoire-volume, #gravityBook.instant-turn .grimoire-cover { transition: none; }
@media (max-width: 1050px), (max-height: 740px) {
  .grimoire-chapter-title { font-size: 21px; }
  .grimoire-chapters p { padding-left: 31.5px; font-size: 10px; }
  .grimoire-contents { padding: 10% 10% 8%; }
  .grimoire-contents-head h2 { font-size: 28px; margin-top: 8px; }
}
@media (max-width: 700px) {
  #gravityBook .grimoire-room { grid-template-rows: 68px 1fr 40px; }
  .grimoire-header { padding: 0 20px; }
  .grimoire-label { position: static; transform: none; font-size: 12px; letter-spacing: .12em; }
  .grimoire-index { display: none; }
  #gravityBook .grimoire-exit { font-size: 11px; }
  #gravityBook .grimoire-desk { padding: 12px 0 8px; }
  .grimoire-stage { width: min(420px, calc(100vw - 60px)); min-width: 260px; aspect-ratio: .79; }
  .grimoire-volume { left: 0; width: 100%; transform: rotateY(-10deg) rotateZ(-2deg); }
  #gravityBook.is-open .grimoire-volume { transform: none; }
  #gravityBook.is-open .grimoire-cover { transform: rotateY(-170deg); }
  #gravityBook[data-page="contents"] .grimoire-cover { visibility: hidden; }
  .grimoire-contents { padding: 12% 9% 8%; }
  .grimoire-paper-frame { inset: 17px 17px; }
  .grimoire-cover-title { font-size: 48px; }
  .grimoire-cover-subtitle { font-size: 17px; }
  .grimoire-chapter-title { font-size: clamp(18px, 5.2vw, 24px); gap: .35em; }
  .grimoire-chapters { margin-top: 5%; }
  .grimoire-chapters p { padding-left: calc(clamp(18px, 5.2vw, 24px) * 1.35); font-size: 10px; margin-top: 5px; }
  .grimoire-contents-head h2 { font-size: 29px; }
  .grimoire-actions { height: 88px; }
  #gravityBook .grimoire-footer { padding: 0 20px; font-size: 7px; }
}
@media (min-width: 701px) and (max-height: 630px) {
  #gravityBook .grimoire-room { min-height: 660px; }
  .grimoire-stage { width: min(790px, calc(100vw - 100px)); }
}
@media (prefers-reduced-motion: reduce) {
  #gravityBook .grimoire-volume, #gravityBook .grimoire-cover { transition: none; }
  #gravityBook .grimoire-ambient i { animation: none; }
}