*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#24180f}
body{touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
.desk{width:100vw;height:100svh;display:grid;place-items:center;background:#24180f}
.desk::before{content:"";position:fixed;inset:0;background:url("book-desk.webp") center/cover;filter:blur(24px) brightness(.45)}
.book{position:relative;width:min(100vw,66.6667svh);height:min(150vw,100svh);background:url("book-desk.webp") center/100% 100% no-repeat}
/* Inner rectangle measured from the existing photograph. All type and effects stay inside the right leaf. */
#page{position:absolute;left:24%;right:11%;top:23%;bottom:16%;overflow:hidden;isolation:isolate;container-type:inline-size}
#field{display:block;width:100%;height:100%}
#leaf{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#dfd1b5,#eee3cb 65%,#c4b28e);transform:translateX(105%);z-index:3}
#leaf.turn{animation:turn 1.35s ease-in-out}
@keyframes turn{0%{transform:translateX(105%)}50%{transform:translateX(0)}100%{transform:translateX(-105%)}}
#retry{position:absolute;bottom:5%;left:5%;border:0;background:transparent;color:#40382c;font:24px Georgia,serif;cursor:pointer;padding:12px;z-index:4}
#retry[hidden]{display:none}
.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}