:root{
  --oj-paper:#fbf7ef;
  --oj-text:#574d47;
  --oj-pink:#b18e97;
  --oj-blue:#7d8ea3;
  --oj-accent:#e39696;
  --oj-close-width:min(500px,46vw);
  --oj-book-width:min(1080px,96vw);
}

.oj,
.oj *{box-sizing:border-box}
.oj [hidden]{display:none!important}
.oj button{font:inherit}

.oj-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:610px;
  overflow:visible;
  perspective:1800px;
}

/* ---------- Closed cover / back cover ---------- */
.oj-cover,
.oj-back{
  position:absolute;
  z-index:30;
  width:var(--oj-close-width);
  aspect-ratio:.88;
  padding:0;
  border:0!important;
  border-radius:5px 13px 13px 5px;
  background:transparent!important;
  box-shadow:12px 18px 38px rgba(20,28,40,.20);
  overflow:visible;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform,opacity;
}

.oj-cover{cursor:pointer;transform-origin:left center}
.oj-back{transform-origin:center center;border-radius:13px 5px 5px 13px}

.oj-cover picture,
.oj-back picture{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(1px);
  border-radius:inherit;
}

.oj-cover img,
.oj-back img{
  position:absolute;
  top:50%;
  display:block;
  width:209.3024%!important;
  max-width:none!important;
  height:auto!important;
  object-fit:unset!important;
  transform:translateY(-50%);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.oj-cover img{right:0}
.oj-back img{left:0}

.oj-cover-label{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  color:#fff;
  font-size:12px;
  letter-spacing:.1em;
  opacity:0;
  transition:opacity .25s ease;
}
.oj-cover:hover>.oj-cover-label{opacity:.9}

.oj-board-side{
  position:absolute;
  z-index:3;
  top:0;
  display:block;
  width:2px;
  height:100%;
  background:linear-gradient(90deg,#75665c 0%,#4e4038 48%,#352d29 100%);
  pointer-events:none;
  backface-visibility:visible;
}
.oj-board-side--cover{
  right:0;
  transform-origin:right center;
  transform:rotateY(90deg) translateZ(1px);
}
.oj-board-side--back{
  left:0;
  transform-origin:left center;
  transform:rotateY(-90deg) translateZ(1px);
}

@keyframes ojBeat{
  0%,100%{transform:scale(1)}
  48%{transform:scale(1.025)}
}
.oj-cover:hover,
.oj-text-btn:hover,
.oj-arrow:hover,
.oj-dot:hover{animation:ojBeat .72s ease 1}
.oj-read-again:hover{box-shadow:0 7px 22px rgba(40,35,30,.18)!important;background:rgba(251,247,239,1)!important}

/* Initial open: center -> right half -> left-opening */
.oj-cover.is-opening{
  animation:ojCoverInitialOpen 1.04s cubic-bezier(.45,.02,.25,1) forwards;
}
@keyframes ojCoverInitialOpen{
  0%{opacity:1;transform:translateX(0) rotateY(0)}
  32%{opacity:1;transform:translateX(52%) rotateY(0)}
  100%{opacity:0;transform:translateX(52%) rotateY(-118deg)}
}

/* Close the Book: front appears on right half, then slides to center */
.oj-cover.is-front-landed{
  opacity:1;
  transform:translateX(52%) rotateY(0);
}
.oj-cover.is-front-centering{
  animation:ojFrontCenter .76s cubic-bezier(.22,.8,.26,1) forwards;
}
@keyframes ojFrontCenter{
  from{opacity:1;transform:translateX(52%) rotateY(0)}
  to{opacity:1;transform:translateX(0) rotateY(0)}
}

/* End: back appears on left half, then slides to center */
.oj-back.is-back-landed{
  opacity:1;
  transform:translateX(-52%) rotateY(0);
}
.oj-back.is-back-centering{
  animation:ojBackCenter .62s cubic-bezier(.22,.8,.26,1) forwards;
}
@keyframes ojBackCenter{
  from{opacity:1;transform:translateX(-52%) rotateY(0)}
  to{opacity:1;transform:translateX(0) rotateY(0)}
}
.oj-back.is-ready{opacity:1;transform:translateX(0) rotateY(0)}

.oj-cover.is-front-pause{
  opacity:1;
  transform:translateX(0) rotateY(0);
}

.oj-cover.is-closing-front-cover{
  transform-origin:left center;
  animation:ojCloseFrontCover .84s cubic-bezier(.55,.02,.25,1) forwards;
}
@keyframes ojCloseFrontCover{
  from{opacity:1;transform:translateX(52%) rotateY(-90deg)}
  to{opacity:1;transform:translateX(52%) rotateY(0)}
}
.oj-back.is-closing-back-cover{
  transform-origin:right center;
  animation:ojCloseBackCover .84s cubic-bezier(.55,.02,.25,1) forwards;
}
@keyframes ojCloseBackCover{
  from{opacity:1;transform:translateX(-52%) rotateY(90deg)}
  to{opacity:1;transform:translateX(-52%) rotateY(0)}
}

.oj-read-again{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  padding:8px 16px!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(251,247,239,.9)!important;
  box-shadow:0 4px 18px rgba(40,35,30,.12)!important;
  color:var(--oj-blue)!important;
  font-size:12px;
  letter-spacing:.08em;
  white-space:nowrap;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.oj-back.is-ready .oj-read-again{
  opacity:1;
  pointer-events:auto;
}
.oj-read-again--3d{
  transform:translateX(-50%) translateZ(20px);
}
.oj-page-edge.is-ready-3d .oj-read-again--3d{
  opacity:1;
  pointer-events:auto;
}

/* ---------- Open book ---------- */
.oj-book{
  position:relative;
  z-index:10;
  width:var(--oj-book-width);
  height:540px;
  perspective:1800px;
}
.oj-book.is-under-cover{opacity:1;transform:none}
.oj-book.is-opening{animation:ojBookIn .62s ease both}
@keyframes ojBookIn{
  from{opacity:0;transform:scale(.988)}
  to{opacity:1;transform:scale(1)}
}

.oj-spread{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  height:540px;
  min-height:540px;
  border:1px solid rgba(90,70,50,.1);
  border-radius:10px;
  overflow:hidden;
  background:var(--oj-paper);
  box-shadow:0 22px 65px rgba(65,48,32,.14);
  opacity:1;
  transform-style:preserve-3d;
}
.oj-left>* ,
.oj-right>*{transition:opacity .18s ease}
.oj-spread.is-content-hidden > .oj-left>* ,
.oj-spread.is-content-hidden > .oj-right>*{opacity:0!important;pointer-events:none!important}
.oj-spread.is-swapping-page > .oj-left>* ,
.oj-spread.is-swapping-page > .oj-right>*{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:none!important;
}
.oj-spread:after{
  content:"";
  position:absolute;
  z-index:8;
  top:0;
  bottom:0;
  left:50%;
  width:28px;
  transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(72,53,37,.07),rgba(255,255,255,.4),rgba(72,53,37,.055),transparent);
}

.oj-page{
  position:relative;
  height:100%;
  padding:24px 36px;
  background:var(--oj-paper);
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
}

.oj-page-cover-face{
  position:absolute;
  z-index:20;
  inset:0;
  overflow:hidden;
  background:transparent;
  transform:rotateY(180deg) translateZ(1px);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  pointer-events:none;
}
.oj-page-cover-face picture{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
}
.oj-page-cover-face img{
  position:absolute;
  top:50%;
  display:block;
  width:209.3024%!important;
  max-width:none!important;
  height:auto!important;
  transform:translateY(-50%);
}
.oj-page-cover-face--front img{right:0}
.oj-page-cover-face--back img{left:0}

.oj-left.is-closing-to-front-cover,
.oj-right.is-closing-to-back-cover{
  z-index:45;
  transform-style:preserve-3d;
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
}
.oj-left.is-closing-to-front-cover{
  transform-origin:right center;
  animation:ojFirstPageToCover 1.15s cubic-bezier(.55,.02,.25,1) forwards;
}
.oj-right.is-closing-to-back-cover{
  transform-origin:left center;
  animation:ojLastPageToBack 1.15s cubic-bezier(.55,.02,.25,1) forwards;
}
.oj-left.is-closing-to-front-cover > *:not(.oj-page-cover-face),
.oj-right.is-closing-to-back-cover > *:not(.oj-page-cover-face){
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
@keyframes ojFirstPageToCover{
  from{transform:rotateY(0)}
  to{transform:rotateY(180deg)}
}
@keyframes ojLastPageToBack{
  from{transform:rotateY(0)}
  to{transform:rotateY(-180deg)}
}

/* Dedicated blank paper for page turns and closing. */
.oj-motion-leaf{
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  width:50%;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(90deg,#f7f0e5 0%,var(--oj-paper) 9%,var(--oj-paper) 91%,#f2e9dc 100%);
  border:1px solid rgba(90,70,50,.08);
  transform-style:preserve-3d;
  backface-visibility:visible;
  will-change:transform,filter,opacity;
}
.oj-motion-leaf.is-turn-next{
  z-index:40;
  left:50%;
  opacity:1;
  transform-origin:left center;
  animation:ojLeafRightToLeft .64s cubic-bezier(.55,.02,.25,1) forwards;
}
.oj-motion-leaf.is-turn-prev{
  z-index:40;
  left:0;
  opacity:1;
  transform-origin:right center;
  animation:ojLeafLeftToRight .64s cubic-bezier(.55,.02,.25,1) forwards;
}
@keyframes ojLeafRightToLeft{
  0%{transform:rotateY(0);filter:drop-shadow(0 0 0 rgba(30,25,20,0))}
  52%{transform:rotateY(-90deg);filter:drop-shadow(-13px 10px 16px rgba(30,25,20,.14))}
  100%{transform:rotateY(-180deg);filter:drop-shadow(-2px 2px 5px rgba(30,25,20,.05))}
}
@keyframes ojLeafLeftToRight{
  0%{transform:rotateY(0);filter:drop-shadow(0 0 0 rgba(30,25,20,0))}
  52%{transform:rotateY(90deg);filter:drop-shadow(13px 10px 16px rgba(30,25,20,.14))}
  100%{transform:rotateY(180deg);filter:drop-shadow(2px 2px 5px rgba(30,25,20,.05))}
}

.oj-artboard{position:relative;width:100%;height:420px}
.oj-art{
  position:absolute;
  display:block;
  object-fit:contain;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .65s ease,visibility 0s linear .65s;
}
.oj-art.is-visible{
  opacity:1;
  visibility:visible;
  transition:opacity .65s ease;
}
.oj-art.is-hit{pointer-events:auto;cursor:default}
.oj-art.is-alpha-hit{cursor:pointer}
.oj-art--gate{left:50%;top:107px;width:58%;height:190px;transform:translateX(-50%)}
.oj-art--main{left:50%;top:18px;width:100%;height:390px;transform:translateX(-50%)}
.oj-fade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to right,var(--oj-paper),transparent 8%,transparent 92%,var(--oj-paper)),
    linear-gradient(to bottom,var(--oj-paper),transparent 8%,transparent 92%,var(--oj-paper));
}
.oj-artboard.is-beat{animation:ojBoardBeat .42s ease-out 1;transform-origin:center center}
@keyframes ojBoardBeat{
  0%,100%{transform:scale(1)}
  52%{transform:scale(1.025)}
}

.oj-actions{
  position:absolute;
  left:0;
  right:0;
  bottom:17px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
@media(min-width:768px){
  .oj-actions.is-single-line{bottom:23px}
}
.oj-text-btn{
  padding:3px 5px!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:12px;
  letter-spacing:.075em;
  cursor:pointer;
}
.oj-pink{color:var(--oj-pink)!important}
.oj-blue{color:var(--oj-blue)!important}
.oj-sp{display:none}
.oj-finish span:last-child{display:none}
.oj-finish:hover span:first-child{display:none}
.oj-finish:hover span:last-child{display:inline}

.oj-copy-layout{position:relative;width:100%;height:420px}
.oj-number,
.oj-title,
.oj-copy{
  position:absolute;
  left:0;
  right:0;
  margin:0;
  text-align:center;
  opacity:0;
  transition:opacity .55s ease,transform .55s ease;
}
.oj-number{color:#b29ea4;font-size:13px;letter-spacing:.32em;transform:translateY(-50%)}
.oj-title{
  color:var(--oj-text);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(26px,2.5vw,35px);
  font-weight:400;
  transform:translateY(-50%);
}
.oj-copy{color:#69605b;font-size:18px;line-height:2.05;transform:translateY(12px)}
.oj-number.is-visible,
.oj-title.is-visible,
.oj-copy.is-visible{opacity:1}
.oj-copy.is-visible{transform:translateY(0)}

.oj-nav{
  position:absolute;
  top:554px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:min(820px,90%);
  margin:0;
}
.oj-arrow{
  position:relative!important;
  display:block!important;
  flex:0 0 44px!important;
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#f4e2e7!important;
  color:#a56978!important;
  box-shadow:none!important;
  line-height:1!important;
}
.oj-arrow:before{
  content:"";
  position:absolute;
  top:16px;
  width:11px;
  height:11px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
}
.oj-arrow--prev:before{left:18px;transform:rotate(-135deg)}
.oj-arrow--next:before{right:18px;transform:rotate(45deg)}
.oj-arrow:hover{background:var(--oj-accent)!important;color:#fff!important}
.oj-arrow:disabled{opacity:.32;cursor:default}

.oj-dots{display:flex;align-items:center;justify-content:center;gap:10px}
.oj-dot{
  display:block!important;
  flex:0 0 20px!important;
  width:20px!important;
  min-width:20px!important;
  max-width:20px!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  color:#cdb4bb!important;
  font-size:17px!important;
  line-height:20px!important;
  text-align:center!important;
}
.oj-dot.is-current{color:var(--oj-accent)!important;font-size:19px!important}

@media(max-width:767px){
  :root{--oj-close-width:min(390px,92vw)}

  .oj-stage{min-height:max(570px,min(620px,calc(100svh - 70px)))}
  .oj-cover,
  .oj-back{
    width:var(--oj-close-width);
    height:min(620px,calc(100svh - 70px));
    min-height:570px;
    aspect-ratio:auto;
    top:0;
    margin-top:0;
  }
  .oj-cover img,
  .oj-back img{width:208.6957%!important}
  .oj-cover>span{opacity:.9}
  .oj-back{border-radius:13px 5px 5px 13px}

  /* Mobile never recenters horizontally during open/close. */
  @keyframes ojCoverInitialOpen{
    from{opacity:1;transform:rotateY(0)}
    to{opacity:0;transform:rotateY(-118deg)}
  }
  .oj-cover.is-front-landed,
  .oj-cover.is-front-centering{opacity:1;transform:none;animation:none}
  .oj-back.is-back-landed,
  .oj-back.is-back-centering,
  .oj-back.is-ready{opacity:1;transform:none;animation:none}

  .oj-cover.is-front-pause{opacity:1;transform:none}
  .oj-cover.is-closing-front-cover{
    animation:ojMobileCloseFrontCover .72s cubic-bezier(.55,.02,.25,1) forwards;
  }
  @keyframes ojMobileCloseFrontCover{
    from{opacity:1;transform:rotateY(-118deg)}
    to{opacity:1;transform:rotateY(0)}
  }
  .oj-back.is-closing-back-cover{
    animation:ojMobileCloseBackCover .72s cubic-bezier(.55,.02,.25,1) forwards;
  }
  @keyframes ojMobileCloseBackCover{
    from{opacity:1;transform:rotateY(118deg)}
    to{opacity:1;transform:rotateY(0)}
  }

  .oj-cover:not(.is-opening):not(.is-closing-front-cover):hover,
  .oj-text-btn:hover,
  .oj-arrow:hover,
  .oj-dot:hover,
  .oj-read-again:hover{animation:none!important}

  .oj-book{width:100%;height:auto}
  .oj-spread{
    display:block;
    height:min(620px,calc(100svh - 70px));
    min-height:570px;
    border-radius:0;
  }
  .oj-spread:after{display:none}
  .oj-page{
    position:absolute;
    inset:0;
    padding:0 16px;
    background:transparent;
  }
  .oj-page-cover-face{display:none}
  .oj-left{
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .oj-right{z-index:2;pointer-events:none}

  .oj-motion-leaf.is-turn-next,
  .oj-motion-leaf.is-turn-prev{
    left:0;
    width:100%;
  }

  .oj-artboard{
    position:absolute;
    top:88px;
    left:16px;
    right:16px;
    width:auto;
    height:272px;
  }
  .oj-art--gate,
  .oj-art--main{left:50%;top:0;height:272px;transform:translateX(-50%)}
  .oj-art--gate{width:55%}
  .oj-art--main{width:100%}
  .oj-fade{inset:-2px}

  .oj-copy-layout{height:100%}
  .oj-number{top:25px!important;font-size:12px}
  .oj-title{top:58px!important;font-size:24px}
  .oj-copy{
    left:12px;
    right:12px;
    top:378px!important;
    bottom:auto!important;
    font-size:16px;
    line-height:1.75;
  }
  .oj-actions{bottom:10px;z-index:5}
  .oj-sp{display:inline}
  .oj-pc{display:none}
  .oj-finish span:first-child{display:inline}
  .oj-finish span:last-child{display:none}

  /* Dots below; arrows stay inside the spread at vertical center. */
  .oj-nav{
    position:static;
    width:100%;
    min-height:40px;
    margin-top:7px;
    transform:none;
    justify-content:center;
  }
  .oj-arrow{
    position:absolute!important;
    z-index:50!important;
    top:480px!important;
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    visibility:visible!important;
  }
  .oj-arrow:before{top:14px}
  .oj-arrow--prev{left:8px!important}
  .oj-arrow--next{right:8px!important}
  .oj-arrow--prev:before{left:16px}
  .oj-arrow--next:before{right:16px}
  .oj-dots{position:relative;z-index:3;margin:0 auto}
  .oj-dot{
    flex-basis:18px!important;
    width:18px!important;
    min-width:18px!important;
    max-width:18px!important;
    height:18px!important;
    min-height:18px!important;
    max-height:18px!important;
    line-height:18px!important;
  }
  .oj-read-again{bottom:20px}
}

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

/* ---------- v3.1.1 behavior corrections ---------- */
/* The closed covers use real 2 px deep board sides. */
.oj-cover,
.oj-back{
  border-radius:8px 15px 15px 8px;
  box-shadow:2px 3px 9px rgba(20,28,40,.13), 0 13px 32px rgba(20,28,40,.11);
}
.oj-back{border-radius:15px 8px 8px 15px}

/* Closing removes the impossible sheet as soon as the real page lifts. */
.oj-spread.is-closing-front .oj-left > *,
.oj-spread.is-closing-back .oj-right > *{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:none!important;
}
.oj-spread.is-closing-front,
.oj-spread.is-closing-back{
  background:transparent;
}
.oj-spread.is-closing-physical{
  overflow:visible;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}
.oj-spread.is-closing-front:after,
.oj-spread.is-closing-back:after{
  opacity:0;
}
.oj-spread.is-closing-physical:after{opacity:0}
.oj-spread.is-cover-handoff-out{
  animation:ojCoverHandoffOut .4s linear forwards;
}
.oj-cover.is-front-handoff{
  transform:translateX(52%) rotateY(0);
  animation:ojCoverHandoffIn .4s linear forwards;
}
.oj-page-edge.is-handoff-in{
  animation:ojCoverHandoffIn .4s linear forwards;
}
@keyframes ojCoverHandoffOut{
  from{opacity:1}
  to{opacity:0}
}
@keyframes ojCoverHandoffIn{
  from{opacity:0}
  to{opacity:1}
}
.oj-spread.is-closing-front .oj-left,
.oj-spread.is-closing-back .oj-right{
  visibility:hidden;
}
/* Main illustrations are display-only. Only Return to entrance can restore the gate. */
.oj-art--main,
.oj-art--main.is-visible{
  pointer-events:none!important;
  cursor:default!important;
}

/* After the copy has rested for one second, the right page becomes the next-page trigger. */
.oj-right.is-next-ready{cursor:pointer}
.oj-right.is-next-beat .oj-copy-layout{
  animation:ojRightPageBeat .44s ease-out 1;
  transform-origin:center center;
}
@keyframes ojRightPageBeat{
  0%,100%{transform:scale(1)}
  52%{transform:scale(1.018)}
}
@media(min-width:768px){
  .oj-right{pointer-events:none}
  .oj-right.is-next-ready{pointer-events:auto}
}

/* A real 3D closed-book object: 2 mm cover / 10 mm pages / 2 mm back. */
.oj-page-edge{
  position:absolute;
  z-index:35;
  width:var(--oj-close-width);
  height:calc(var(--oj-close-width) / .88);
  max-height:568px;
  transform-origin:center center;
  transform-style:preserve-3d;
  backface-visibility:visible;
  filter:drop-shadow(3px 10px 16px rgba(30,25,20,.15));
  opacity:0;
  pointer-events:none;
}
.oj-edge-face{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:5px 13px 13px 5px;
  background:transparent;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.oj-edge-face--back{
  border-radius:13px 5px 5px 13px;
  transform:translateZ(27px);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.oj-edge-face--front{
  transform:translateZ(-27px) rotateY(180deg);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.oj-edge-face picture{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
}
.oj-edge-face img{
  position:absolute;
  top:50%;
  display:block;
  width:209.3024%!important;
  max-width:none!important;
  height:auto!important;
  transform:translateY(-50%);
}
.oj-edge-face--back img{left:0}
.oj-edge-face--front img{right:0}
.oj-edge-side{
  position:absolute;
  top:0;
  left:100%;
  display:flex;
  flex-direction:row;
  width:54px;
  height:100%;
  transform-origin:left center;
  transform:rotateY(90deg) translateX(-27px);
  backface-visibility:visible;
}
.oj-edge-side > span{
  display:block;
  height:100%;
  flex:none;
}
.oj-edge-board{
  width:6px;
  background:#4e4038;
}
.oj-edge-pages{
  width:42px;
  background:repeating-linear-gradient(
    90deg,
    #efe5d7 0 2px,
    #fbf7ef 2px 4px
  );
}
.oj-page-edge.is-closed-back{
  opacity:1;
  transform:rotateY(0);
}
.oj-page-edge.is-closed-back-landed{
  opacity:1;
  transform:translateX(-52%) rotateY(0);
}
.oj-page-edge.is-closed-back-centering{
  opacity:1;
  animation:ojClosedBookCenter .76s cubic-bezier(.22,.8,.26,1) forwards;
}
@keyframes ojClosedBookCenter{
  from{transform:translateX(-52%) rotateY(0)}
  to{transform:translateX(0) rotateY(0)}
}

@media(max-width:767px){
  /* Restore the single-page mobile composition and keep all open/close motion in place. */
  .oj-stage{overflow:visible}
  .oj-book,
  .oj-book.is-opening{width:100%;opacity:1}
  .oj-spread{width:100%}
  .oj-cover.is-opening{animation-duration:.76s}

  .oj-page-edge{
    width:90px;
    height:min(620px,calc(100svh - 70px));
    max-height:none;
    top:0;
    margin-top:0;
    border-radius:2px;
    transform:none;
    transform-style:flat;
    background:linear-gradient(90deg,
      #4e4038 0 14px,
      #efe5d7 14px 21px,
      #fbf7ef 21px 69px,
      #e8ddcf 69px 76px,
      #4e4038 76px 90px);
  }
  .oj-page-edge .oj-edge-face,
  .oj-page-edge .oj-edge-side,
  .oj-board-side{display:none}
  .oj-cover,
  .oj-back{
    transform-style:flat;
    border-radius:5px 13px 13px 5px;
  }
  .oj-back{border-radius:13px 5px 5px 13px}
  .oj-cover picture,
  .oj-back picture{transform:none}

  .oj-cover.is-front-pause{opacity:1;transform:none}

  /* On the single-page layout, the visible copy is the tap target once armed. */
  .oj-right.is-next-ready{pointer-events:none}
  .oj-copy.is-next-ready{
    pointer-events:auto;
    cursor:pointer;
  }
  .oj-right.is-next-beat .oj-copy-layout{animation:ojRightPageBeat .44s ease-out 1}
}

@media(min-width:768px){
  .oj{
    --oj-pc-cover-width:calc(var(--oj-book-width) / 2 + 8px);
    --oj-pc-cover-height:552px;
    --oj-pc-half-center:calc(var(--oj-book-width) / 4);
    --oj-pc-half-center-negative:calc(var(--oj-book-width) / -4);
  }
  .oj-cover,
  .oj-back,
  .oj-page-edge{
    width:var(--oj-pc-cover-width);
    height:var(--oj-pc-cover-height);
    max-height:none;
    aspect-ratio:auto;
    top:50%;
    margin-top:calc(var(--oj-pc-cover-height) / -2);
  }
  .oj-cover,
  .oj-page-cover-face--front,
  .oj-edge-face--front{
    border-radius:7px 17px 17px 7px;
  }
  .oj-back,
  .oj-page-cover-face--back,
  .oj-edge-face--back{
    border-radius:17px 7px 7px 17px;
  }
  .oj-page-cover-face{
    top:-6px;
    bottom:auto;
    width:calc(100% + 8px);
    height:calc(100% + 12px);
  }
  .oj-page-cover-face--front{
    right:0;
    left:auto;
  }
  .oj-page-cover-face--back{
    right:auto;
    left:0;
  }
  .oj-cover.is-front-handoff,
  .oj-cover.is-front-landed{
    transform:translateX(var(--oj-pc-half-center)) rotateY(0);
  }
  .oj-cover.is-front-centering{
    animation:ojPcFrontCenterAligned .76s cubic-bezier(.22,.8,.26,1) forwards;
  }
  @keyframes ojPcFrontCenterAligned{
    from{transform:translateX(var(--oj-pc-half-center)) rotateY(0)}
    to{transform:translateX(0) rotateY(0)}
  }
  .oj-page-edge.is-closed-back-landed{
    transform:translateX(var(--oj-pc-half-center-negative)) rotateY(0);
  }
  .oj-page-edge.is-closed-back-centering{
    animation:ojPcClosedBookCenterAligned .76s cubic-bezier(.22,.8,.26,1) forwards;
  }
  @keyframes ojPcClosedBookCenterAligned{
    from{transform:translateX(var(--oj-pc-half-center-negative)) rotateY(0)}
    to{transform:translateX(0) rotateY(0)}
  }
  .oj-page-edge.is-flat-edge{
    width:54px;
    height:var(--oj-pc-cover-height);
    border-radius:3px;
    opacity:1;
    transform:none;
    transform-style:flat;
    clip-path:polygon(7% 1.2%,93% 0,100% 98.8%,0 100%);
    background:linear-gradient(90deg,
      #4e4038 0 6px,
      #efe5d7 6px 12px,
      #fbf7ef 12px 42px,
      #e8ddcf 42px 48px,
      #4e4038 48px 54px);
  }
  .oj-page-edge.is-flat-edge > *{display:none}
}

.oj-back.is-replay-back,
.oj-cover.is-replay-front,
.oj-page-edge.is-replay-edge{
  will-change:transform,opacity;
}
.oj-back.is-replay-back{
  transform-origin:center center;
  animation:
    ojReplayBackTurn 2.1s cubic-bezier(.45,0,.55,1) forwards,
    ojReplayBackFade 2.1s linear forwards;
}
.oj-page-edge.is-replay-edge{
  --oj-replay-edge-y:1.13;
  transform-origin:center center;
  transform:scaleX(.16) scaleY(var(--oj-replay-edge-y));
  animation:
    ojReplayEdgeShape 2.1s linear forwards,
    ojReplayEdgeFade 2.1s linear forwards;
}
.oj-cover.is-replay-front{
  transform-origin:center center;
  animation:
    ojReplayFrontTurn 2.1s cubic-bezier(.45,0,.55,1) forwards,
    ojReplayFrontFade 2.1s linear forwards;
}
@keyframes ojReplayBackTurn{
  0%{transform:rotateY(0)}
  50%,100%{transform:rotateY(90deg)}
}
@keyframes ojReplayBackFade{
  0%,23.81%{opacity:1}
  40.476%,100%{opacity:0}
}
@keyframes ojReplayEdgeFade{
  0%,40.476%{opacity:0}
  47.619%,50.476%{opacity:1}
  57.619%,100%{opacity:0}
}
@keyframes ojReplayEdgeShape{
  0%,48.571%{transform:scaleX(.16) scaleY(var(--oj-replay-edge-y))}
  49.524%,50.476%{transform:scaleX(1) scaleY(var(--oj-replay-edge-y))}
  51.429%,100%{transform:scaleX(.16) scaleY(var(--oj-replay-edge-y))}
}
@keyframes ojReplayFrontTurn{
  0%,50%{transform:rotateY(-90deg)}
  100%{transform:rotateY(0)}
}
@keyframes ojReplayFrontFade{
  0%,64.286%{opacity:0}
  76.19%,100%{opacity:1}
}

@media(max-width:767px){
  .oj-page-edge.is-flat-edge{
    clip-path:polygon(6% 1.2%,94% 0,100% 98.8%,0 100%);
  }
  .oj-page-edge.is-replay-edge{
    --oj-replay-edge-y:1.07;
  }
}