/* --- 3D Environment Setup --- */
        body {
            overflow: hidden;
            background-color: #ffffff;
            /* Branded pattern with 10px space on every side */
            background-image: url("https://pub-3ab59b8f25ba43769d968211da80e759.r2.dev/og-logo.svg");
            background-repeat: repeat;
            background-size: 60px 60px;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
        }

        #book-wrapper {
            perspective: 2000px;
        }

        #book-container {
            height: 76vh;
            max-height: 800px;
            width: auto;
            aspect-ratio: 9/16;
            margin-bottom: 3dvh;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
            will-change: transform;
            backface-visibility: hidden;
            border-radius: 6px 20px 20px 6px;
        }

        @media (min-width: 991px) {
            #book-container {
                transform: translateX(50%);
            }
            
            #book-container.is-intro {
                transform: rotateX(10deg) rotateZ(4deg) scale(0.75) translate3d(-50%, 8vh, 0) !important;
            }    
        }

        .is-first-centered {
            transform: translate3d(0, 0, 0) !important;
        }

        .is-last-centered {
            transform: translate3d(100%, 0, 0) !important;
        }

        @media (max-width: 640px) {
            #book-container {
                width: 76vw;
                height: auto;
            }
        }

        #book-container.is-intro {
            transform: rotateX(10deg) rotateZ(4deg) scale(0.75) translate3d(0, 8vh, 0) !important;
            cursor: pointer;
        }

        .is-hidden {
            opacity: 0 !important;
            pointer-events: none;
        }

        #intro-title {
            transform: none;
            will-change: transform, opacity;
        }

        .swipe-up-out {
            transform: translateY(-20vh) !important;
            opacity: 0 !important;
            pointer-events: none;
        }

        .page {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform-origin: left center;
            transform-style: preserve-3d;
            cursor: grab;
            border-radius: 6px 20px 20px 6px;
            user-select: none;
            -webkit-user-select: none;
        }

        .page.transitioning {
            transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .page:active {
            cursor: grabbing;
        }

        .page-face {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            overflow: hidden;
            background-color: #000000;
            background-image: url('/leftside-diary-page.svg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transform: translateZ(2px);
            border-radius: inherit;
        }

        .page-back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            overflow: hidden;
            background-color: #0a0a0a;
            background-image: url('/leftside-diary-page.svg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transform: rotateY(180deg) translateZ(2px);
            border-radius: 20px 6px 6px 20px;
            box-shadow: inset -5px 0 15px rgba(0, 0, 0, 0.05);
        }

        .page:not(.is-back-cover) .page-back:after {
            background: linear-gradient(to left, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.5) 1%,rgba(0,0,0,0.2) 2%,transparent 100%);
            bottom: 0;
            content: '';
            right: 0;
            position: absolute;
            top: 0;
            width: 2em;
            z-index: 1;
        }

        .page:not(.is-front-cover) .page-face:after {
            background: linear-gradient(to right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.5) 1%,rgba(0,0,0,0.2) 2%,transparent 100%);
            bottom: 0;
            content: '';
            left: 0;
            position: absolute;
            top: 0;
            width: 2em;
            z-index: 1;
        }

        .shadow-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: linear-gradient(to right,
                    rgba(0, 0, 0, 0.4) 0%,
                    rgba(0, 0, 0, 0.1) 20%,
                    transparent 100%);
            opacity: 0;
            transition: opacity 0.1s;
            z-index: 100;
        }

        .thickness-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            pointer-events: none;
            background-color: #e6e2d8;
        }

        .page.is-front-cover .page-face::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 20px;
            background: none;
            pointer-events: none;
            z-index: 10;
            border-radius: 6px 0 0 6px;
            background: linear-gradient(to right,
                    rgba(0, 0, 0, 0.2) 0%,
                    rgba(0, 0, 0, 0.2) 30%,
                    rgba(0, 0, 0, 0.1) 50%,
                    transparent 100%);
            box-shadow: 2px 0 2px rgba(0, 0, 0, 0.25);
        }

        .page.is-back-cover .page-back::after {
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 20px;
            background: none;
            pointer-events: none;
            z-index: 10;
            border-radius: 0 6px 6px 0;
            background: linear-gradient(to left,
                    rgba(0, 0, 0, 0.2) 0%,
                    rgba(0, 0, 0, 0.2) 30%,
                    rgba(0, 0, 0, 0.1) 50%,
                    transparent 100%);
            box-shadow: -2px 0 2px rgba(0, 0, 0, 0.25);
        }

        .page.is-cover .page-back {
            border-radius: 20px 6px 6px 20px;
        }

        .hidden {
            display: none;
        }