:root {
            --teal: #427A76;
            --paper: #F7F4EA;
            --cream: #FBF5DE;
            --note-yellow: #fdfd96;
            --note-pink: #ffb7b2;
            --note-blue: #b2e2f2;
        }

        body {
            font-family: 'Cutive Mono', monospace;
            background-color: var(--paper);
            color: var(--teal);
            margin: 0;
            overflow-x: hidden;
            background-image: 
                radial-gradient(var(--teal) 0.5px, transparent 0.5px),
                linear-gradient(to right, #e5e7eb 1px, transparent 1px),
                linear-gradient(to bottom, #e5e7eb 1px, transparent 1px);
            background-size: 20px 20px, 100px 100px, 100px 100px;
            scroll-behavior: smooth;
        }

        h1, h2, h3, .handwritten { font-family: 'Gaegu', cursive; }
        .marker { font-family: 'Permanent Marker', cursive; }

        /* Transitions */
        .page-content { display: none; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; }
        .page-content.active { display: block; opacity: 1; transform: translateY(0); }

        /* Scrapbook Elements */
        .tape {
            position: absolute;
            top: -12px; left: 50%;
            transform: translateX(-50%) rotate(-2deg);
            width: 80px; height: 25px;
            background: rgba(66, 122, 118, 0.2);
            backdrop-filter: blur(2px);
            border-left: 2px dashed rgba(0,0,0,0.1);
            border-right: 2px dashed rgba(0,0,0,0.1);
            z-index: 10;
        }

        .torn-paper {
            clip-path: polygon(0% 2%, 5% 0%, 10% 3%, 15% 1%, 20% 4%, 25% 2%, 30% 5%, 35% 2%, 40% 6%, 45% 3%, 50% 5%, 55% 2%, 60% 7%, 65% 4%, 70% 6%, 75% 3%, 80% 5%, 85% 2%, 90% 7%, 95% 4%, 100% 2%, 100% 98%, 95% 100%, 90% 97%, 85% 99%, 80% 96%, 75% 100%, 70% 97%, 65% 99%, 60% 96%, 55% 100%, 50% 97%, 45% 99%, 40% 96%, 35% 100%, 30% 97%, 25% 99%, 20% 96%, 15% 100%, 10% 97%, 5% 99%, 0% 98%);
            background: white;
            box-shadow: 5px 10px 30px rgba(0,0,0,0.05);
        }

        .sticky-note {
            padding: 20px;
            box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .sticky-note:hover { transform: scale(1.05) rotate(0deg) !important; }

        .btn-hand-drawn {
            border: 3px solid var(--teal);
            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
            padding: 10px 25px;
            transition: 0.3s;
            background: transparent;
            font-weight: bold;
            display: inline-block;
        }
        .btn-hand-drawn:hover {
            background: var(--teal);
            color: var(--paper);
            transform: scale(1.05) rotate(-1deg);
        }

        /* Hero Animation */
        .hero-bg-anim {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
            opacity: 0.4;
            background: radial-gradient(circle at 50% 50%, #fbf5de 0%, transparent 70%);
            animation: pulse 8s infinite alternate;
        }
        @keyframes pulse { from { opacity: 0.2; transform: scale(1); } to { opacity: 0.5; transform: scale(1.1); } }

        /* Cart Drawer */
        #cart-drawer {
            position: fixed;
            right: -400px; top: 0; height: 100vh; width: 350px;
            background: var(--cream);
            z-index: 500;
            transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
            box-shadow: -10px 0 30px rgba(0,0,0,0.1);
            border-left: 5px solid var(--teal);
        }
        #cart-drawer.open { right: 0; }

        /* Path Animation */
        .zigzag-path {
            position: absolute;
            left: 50%; top: 0; bottom: 0; width: 4px;
            border-left: 4px dotted var(--teal);
            transform: translateX(-50%);
            opacity: 0.2;
            z-index: 0;
        }

        @keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-20px) rotate(5deg); } }
        .floating { animation: float 6s ease-in-out infinite; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideLeft {
    from { opacity: 0; transform: translateX(-60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideRight {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pop {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

.animate-fade-up {
    animation: fadeUp 1s ease forwards;
}

.animate-slide-left {
    animation: slideLeft 1s ease forwards;
}

.animate-slide-right {
    animation: slideRight 1s ease forwards;
}

.animate-pop {
    animation: pop 0.6s ease forwards;
}

.delay-200 { animation-delay: 0.2s; }
.delay-400 { animation-delay: 0.4s; }