body {
            background-color: #fdfaf6;
            color: #3a3a3a;
            font-family: 'Noto Sans SC', sans-serif;
            overflow-x: hidden;
            /* Enhanced background with gradient and noise */
            background: linear-gradient(135deg, #fdfaf6 0%, #f8f4ee 50%, #fdfaf6 100%);
            background-image: 
                linear-gradient(135deg, #fdfaf6 0%, #f8f4ee 50%, #fdfaf6 100%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
            background-blend-mode: overlay;
        }

        /* Enhanced page styling */
        .page {
            background: linear-gradient(135deg, #fdfaf6 0%, #ffffff 100%);
            box-shadow: 
                inset -3px 0px 20px rgba(0,0,0,0.05),
                0 1px 3px rgba(0,0,0,0.05);
        }

        /* Improved book card styling */
        .book-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        }

        /* Enhanced polaroid effect */
        .polaroid-frame {
            background: white;
            box-shadow: 
                0 4px 12px rgba(0,0,0,0.1),
                0 1px 3px rgba(0,0,0,0.08);
            transition: all 0.3s ease-in-out;
        }

        .polaroid-frame:hover {
            transform: scale(1.03) rotate(0deg) !important;
            box-shadow: 
                0 12px 24px rgba(0,0,0,0.15),
                0 4px 8px rgba(0,0,0,0.1);
        }
        h1, h3 {
            font-family: 'Playfair Display', serif;
        }

        /* Book Styles - StPageFlip */
        #book-container {
            /* Handled by Tailwind now for flex centering */
            perspective: 1000px; /* Add perspective for better 3D effect */
        }

        /* The book element itself */
        #book {
            box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3); /* Enhanced shadow */
            will-change: transform; /* Hardware acceleration hint */
            transform: translateZ(0); /* Force hardware acceleration */
        }

        /* Page Styles */
        .page {
            background-color: #fdfaf6;
            box-shadow: inset -3px 0px 20px rgba(0,0,0,0.05); /* Spine shadow */
            border-left: 1px solid rgba(0,0,0,0.05);
            overflow: hidden;
            /* Subtle paper texture */
            background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 10%, rgba(255,255,255,0) 100%);
            will-change: transform; /* Hardware acceleration hint */
            transform: translateZ(0); /* Force hardware acceleration */
            backface-visibility: hidden; /* Improve performance for 3D transforms */
        }

        .page-content {
            transform: translateZ(0);
        }

        .page-content {
            /* Content wrapper inside the page */
            width: 100%;
            height: 100%;
        }

        /* Hard Cover Styles */
        .page-cover {
            background-color: #fdfaf6;
            border: 1px solid #e5e7eb;
            box-shadow: inset 4px 0 10px rgba(0,0,0,0.1); /* Hard cover spine effect */
        }

        .page-cover-top {
             border-radius: 4px 0 0 4px;
        }
        
        .page-cover-bottom {
             border-radius: 0 4px 4px 0;
        }

        /* Scrollbar for long content in pages */
        .scrollbar-thin::-webkit-scrollbar {
            width: 4px;
        }
        .scrollbar-thin::-webkit-scrollbar-track {
            background: transparent;
        }
        .scrollbar-thin::-webkit-scrollbar-thumb {
            background-color: #d1d5db;
            border-radius: 20px;
        }

        /* Mobile specific adjustments for book */
        @media (max-width: 640px) {
            #book-container {
               height: 75vh;
            }
            
            /* Adjust book card padding for mobile */
            .book-card {
                padding: 3px 4px !important;
            }
            
            /* Adjust font sizes for mobile */
            .book-card h3 {
                font-size: 1.25rem !important;
                margin-bottom: 0.75rem !important;
                padding-bottom: 0.25rem !important;
            }
            
            .book-card p {
                font-size: 0.875rem !important;
            }
            
            /* Adjust polaroid frame size for mobile */
            .polaroid-frame {
                max-width: 90% !important;
                padding: 0.5rem 0.5rem 1.5rem 0.5rem !important;
            }
            
        }
        
        /* Tablet adjustments */
        @media (min-width: 641px) and (max-width: 1024px) {
            #book-container {
                height: 70vh;
            }
        }
        
        /* Touch device optimizations */
        @media (hover: none) and (pointer: coarse) {
            .polaroid-frame:hover {
                transform: scale(1) rotate(0deg) !important;
            }
            
            /* Add touch feedback */
            .polaroid-frame {
                touch-action: manipulation;
            }
            
        }

        /* Mobile Optimizations */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Card Animation Styles - Adapted for Book */
        .book-card {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* Polaroid Styles */
        .polaroid-gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            justify-content: center;
            margin-top: 1rem;
            margin-bottom: 2rem;
        }
        .polaroid-frame {
            background-color: white;
            padding: 0.75rem 0.75rem 2.5rem 0.75rem; /* Bottom padding for date */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: all 0.2s ease-in-out;
            position: relative;
            transform: rotate(-2deg); /* Default rotation */
        }
        .polaroid-frame:nth-child(even) {
            transform: rotate(2deg);
        }
        .polaroid-frame:hover {
            transform: scale(1.02) rotate(0deg) !important; /* Slightly reduced scale for smoother effect */
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            z-index: 10;
        }
        .polaroid-frame img {
            /* Handled by inline styles / Tailwind classes now */
        }
        .polaroid-date {
                    position: absolute;
                    bottom: 0.5rem;
                    left: 0.75rem;
                    right: 0.75rem;
                    text-align: center;
                    font-family: 'Caveat', cursive; /* A handwriting font */
                    font-size: 0.9rem;
                    color: #555;
                }

                /* About Us Modal Animation */
                #about-us-modal.is-visible > div {
                    transform: scale(1);
                    opacity: 1;
                }

/* Loading Overlay */
#loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
        #back-to-top {
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }

        #back-to-top.is-visible {
            opacity: 1;
            visibility: visible;
        }

.book-body {
    text-indent: 2em;
    letter-spacing: 0.01em;
    line-height: 1.85;
}

.polaroid-frame {
    background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
}

.polaroid-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

.polaroid-frame img {
    filter: saturate(1.05) contrast(1.03);
}

#music-toggle,
#back-to-top,
#immersive-toggle {
    background: rgba(255,255,255,0.82) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

#music-toggle:active,
#back-to-top:active,
#immersive-toggle:active {
    transform: scale(0.96);
}

@media (max-width: 640px) {
    #book-container {
        height: 84svh;
    }

    .page-content {
        padding: 16px 14px !important;
    }

    .book-card {
        padding: 12px 12px !important;
    }

    .book-body {
        text-indent: 1.25em;
        line-height: 1.92;
    }

    .polaroid-gallery {
        margin-bottom: 1.25rem;
    }

    .polaroid-frame {
        max-width: 94% !important;
        padding: 0.65rem 0.65rem 2.15rem 0.65rem !important;
    }

    .polaroid-date {
        font-size: 0.85rem;
        color: rgba(55, 65, 81, 0.75);
    }

    #music-toggle {
        bottom: calc(1.5rem + env(safe-area-inset-bottom));
        right: calc(1.5rem + env(safe-area-inset-right));
    }

    #back-to-top {
        bottom: calc(1.5rem + env(safe-area-inset-bottom));
        right: calc(5rem + env(safe-area-inset-right));
    }

    #immersive-toggle {
        bottom: calc(1.5rem + env(safe-area-inset-bottom));
        left: calc(1.5rem + env(safe-area-inset-left));
    }
}

.medium-zoom-overlay {
    z-index: 9000 !important;
}

.medium-zoom-image--opened,
.medium-zoom-image--open {
    z-index: 9001 !important;
}