*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Georgia Pro,Georgia,serif;background:#fff;color:#000;-webkit-font-smoothing:antialiased}main{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:3rem}article{max-width:900px}h1,h2{margin:0 0 .5rem;font-weight:400}h1{font-size:1.75rem}h2{font-size:1.1rem;margin-top:1.25rem}p,li,dd{line-height:1.6;color:#000}ul{padding-left:1.25rem}.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}.book-wrap{display:flex;flex-direction:column;align-items:center;gap:1.25rem}.book{width:min(210mm,92vw);aspect-ratio:210/297;position:relative;perspective:3200px;margin:4vh auto;display:block}.spine{position:absolute;left:0;top:0;height:100%;width:24px;background:#f6f6f6;border-right:1px solid #e9e9e9;box-shadow:inset -2px 0 #00000005}.page{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:right bottom;transition:transform .9s cubic-bezier(.22,1,.36,1),box-shadow .38s ease;display:block;will-change:transform}.page .paper{position:absolute;inset:0;width:100%;height:100%;background:#fff;border:1px solid #e7e7e7;box-shadow:0 18px 50px #0000001f;transform-style:preserve-3d;overflow:auto}.page .paper-content{padding:3.25rem 3rem;color:#000;display:flex;flex-direction:column;justify-content:center;height:100%}.page:not(.flipped){z-index:10}.page.flipped{transform:rotateY(-180deg) rotateX(18deg) translate3d(-150%,-100%,0) rotate(-8deg);box-shadow:0 18px 60px #0000002e;pointer-events:none}.page.is-flipping{z-index:9999;pointer-events:none}.page.stack-0{transform:translateY(0) translate(0) rotate(-.2deg)}.page.stack-1{transform:translateY(3px) translate(2px) rotate(-.15deg)}.page.stack-2{transform:translateY(6px) translate(4px) rotate(-.08deg)}.page.stack-3{transform:translateY(9px) translate(6px) rotate(0)}.page.stack-4{transform:translateY(12px) translate(8px) rotate(.08deg)}.desk{position:fixed;left:0;right:0;bottom:0;height:34vh;background:linear-gradient(180deg,#cdb48b,#b07a48);box-shadow:inset 0 8px 24px #0000000f;z-index:0}.book{z-index:10}.paper{backface-visibility:hidden;transform-style:preserve-3d}.paper:after{content:"";position:absolute;inset:0;background:transparent;backface-visibility:hidden}.book-controls{display:flex;gap:.5rem;align-items:center}.btn{background:transparent;border:1px solid #d9d9d9;padding:.5rem .75rem;border-radius:6px;cursor:pointer;color:#000}.btn:disabled{opacity:.45;cursor:not-allowed}@media (max-width:800px){.book{width:92vw;height:64vh}.paper-content{padding:1rem}}