body {
            background-color: #fcfcfc;
            background-image: repeating-linear-gradient(transparent, transparent 31px, #e5e7eb 31px, #e5e7eb 32px);
            background-size: 100% 32px;
            /* Offset to align text perfectly on lines if needed */
            background-position: 0 16px;
            color: #1c1917;
            overflow-x: hidden;
        }

        /* Scrapbook Tape Elements */
        .tape-white {
            position: absolute;
            background: rgba(255, 255, 255, 0.85);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(2px);
            border-radius: 2px;
            z-index: 20;
        }

        .tape-color {
            display: inline-block;
            padding: 0.25rem 1rem;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
            border-radius: 2px 8px 2px 4px;
        }

        /* Folder Tab Cutout using Clip-Path */
        .folder-tab-blue {
            clip-path: polygon(0 0, 220px 0, 260px 48px, 100% 48px, 100% 100%, 0 100%);
        }

        .folder-tab-dark {
            clip-path: polygon(0 48px, 180px 48px, 220px 0, 440px 0, 480px 48px, 100% 48px, 100% 100%, 0 100%);
        }

        .folder-tab-yellow {
            clip-path: polygon(0 48px, 380px 48px, 420px 0, 640px 0, 680px 48px, 100% 48px, 100% 100%, 0 100%);
        }

        @media (max-width: 768px) {

            .folder-tab-blue,
            .folder-tab-dark,
            .folder-tab-yellow {
                clip-path: polygon(0 0, 150px 0, 180px 40px, 100% 40px, 100% 100%, 0 100%);
            }
        }

        /* Zig-Zag / Rough Edges for Skill Pills */
        .rough-edge {
            border: 2px dashed rgba(0, 0, 0, 0.1);
            border-radius: 3px 8px 4px 6px;
        }

        /* Drawn borders */
        .drawn-border {
            border: 2px solid #ffa42d;
            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
        }

        .circle-text {
            border: 2px solid #1c1917;
            border-radius: 50%;
        }

        /* Add this inside your <style> tag */
        .torn-left {
            clip-path: polygon(0 0, 96% 0, 100% 12%, 96% 24%, 100% 36%, 96% 48%, 100% 60%, 96% 72%, 100% 84%, 96% 100%, 0 100%);
        }

        .torn-right {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 4% 84%, 0 72%, 4% 60%, 0 48%, 4% 36%, 0 24%, 4% 12%);
        }

        /* Perfect Unified Jagged Pill */
        .jagged-pill {
            clip-path: polygon(0% 0%, 100% 0%,
                    calc(100% - 4px) 10%, 100% 20%, calc(100% - 4px) 30%, 100% 40%, calc(100% - 4px) 50%, 100% 60%, calc(100% - 4px) 70%, 100% 80%, calc(100% - 4px) 90%, 100% 100%,
                    0% 100%,
                    4px 90%, 0% 80%, 4px 70%, 0% 60%, 4px 50%, 0% 40%, 4px 30%, 0% 20%, 4px 10%);
        }


        /* 7-Step Cascading Trapezoid Tabs (Flawless Overlap) */
        .tab-text-container {
            position: absolute;
            top: 0;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Text positioning */
        .tab-text-1 {
            left: 0%;
            width: 14%;
        }

        .tab-text-2 {
            left: 13%;
            width: 14%;
        }

        .tab-text-3 {
            left: 26%;
            width: 14%;
        }

        .tab-text-4 {
            left: 39%;
            width: 14%;
        }

        .tab-text-5 {
            left: 52%;
            width: 14%;
        }

        .tab-text-6 {
            left: 65%;
            width: 14%;
        }

        .tab-text-7 {
            left: 78%;
            width: 22%;
        }

        /* Mobile Heights (40px) */
        .tab-clip-1 {
            clip-path: polygon(0% 40px, 0% 0%, 14% 0%, 17% 40px, 100% 40px, 100% 100%, 0% 100%);
        }

        .tab-clip-2 {
            clip-path: polygon(0% 40px, 10% 40px, 13% 0%, 27% 0%, 30% 40px, 100% 40px, 100% 100%, 0% 100%);
        }

        .tab-clip-3 {
            clip-path: polygon(0% 40px, 23% 40px, 26% 0%, 40% 0%, 43% 40px, 100% 40px, 100% 100%, 0% 100%);
        }

        .tab-clip-4 {
            clip-path: polygon(0% 40px, 36% 40px, 39% 0%, 53% 0%, 56% 40px, 100% 40px, 100% 100%, 0% 100%);
        }

        .tab-clip-5 {
            clip-path: polygon(0% 40px, 49% 40px, 52% 0%, 66% 0%, 69% 40px, 100% 40px, 100% 100%, 0% 100%);
        }

        .tab-clip-6 {
            clip-path: polygon(0% 40px, 62% 40px, 65% 0%, 79% 0%, 82% 40px, 100% 40px, 100% 100%, 0% 100%);
        }

        .tab-clip-7 {
            clip-path: polygon(0% 40px, 75% 40px, 78% 0%, 100% 0%, 100% 40px, 100% 100%, 0% 100%);
        }

        /* Desktop Heights (50px) */
        @media (min-width: 768px) {
            .tab-text-container {
                height: 50px;
            }

            .tab-clip-1 {
                clip-path: polygon(0% 50px, 0% 0%, 14% 0%, 17% 50px, 100% 50px, 100% 100%, 0% 100%);
            }

            .tab-clip-2 {
                clip-path: polygon(0% 50px, 10% 50px, 13% 0%, 27% 0%, 30% 50px, 100% 50px, 100% 100%, 0% 100%);
            }

            .tab-clip-3 {
                clip-path: polygon(0% 50px, 23% 50px, 26% 0%, 40% 0%, 43% 50px, 100% 50px, 100% 100%, 0% 100%);
            }

            .tab-clip-4 {
                clip-path: polygon(0% 50px, 36% 50px, 39% 0%, 53% 0%, 56% 50px, 100% 50px, 100% 100%, 0% 100%);
            }

            .tab-clip-5 {
                clip-path: polygon(0% 50px, 49% 50px, 52% 0%, 66% 0%, 69% 50px, 100% 50px, 100% 100%, 0% 100%);
            }

            .tab-clip-6 {
                clip-path: polygon(0% 50px, 62% 50px, 65% 0%, 79% 0%, 82% 50px, 100% 50px, 100% 100%, 0% 100%);
            }

            .tab-clip-7 {
                clip-path: polygon(0% 50px, 75% 50px, 78% 0%, 100% 0%, 100% 50px, 100% 100%, 0% 100%);
            }
        }

        /* Realistic Scrapbook Tape */
        .tape-translucent {
            position: absolute;
            background: rgba(255, 255, 255, 0.85);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
            backdrop-filter: blur(3px);
            border-radius: 1px;
            z-index: 40;
            /* High z-index to stay above the images */
        }

        /* Human Eye Blinking & Floating Animations */
        @keyframes human-blink {

            0%,
            92%,
            98%,
            100% {
                transform: scaleY(1);
            }

            95% {
                transform: scaleY(0.1);
            }

            /* Squints the eye */
        }

        .eye-blink {
            animation: human-blink 4s infinite;
            transform-origin: center;
        }

        @keyframes float-gentle {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-8px) rotate(3deg);
            }
        }

        .animate-float {
            animation: float-gentle 5s ease-in-out infinite;
        }


        @keyframes floatSticker {

            0%,
            100% {
                transform: translateY(0) rotate(var(--r));
            }

            50% {
                transform: translateY(-6px) rotate(var(--r));
            }
        }

        .sticker {
            animation: floatSticker 4s ease-in-out infinite;
        }

        .sticker:hover {
            animation-play-state: paused;
            transform: scale(1.1) rotate(0deg) !important;
            z-index: 30;
        }

        /* Staggered animation delays */
        .sticker:nth-child(3n) {
            animation-delay: 0.5s;
            animation-duration: 3.5s;
        }

        .sticker:nth-child(3n+1) {
            animation-delay: 1.2s;
            animation-duration: 4.5s;
        }

        .sticker:nth-child(3n+2) {
            animation-delay: 0.2s;
            animation-duration: 4s;
        }


        @keyframes sweepGlare {
            0% {
                transform: translateX(-150%) skewX(-30deg);
            }

            100% {
                transform: translateX(300%) skewX(-30deg);
            }
        }

        .group:hover .glare-effect {
            animation: sweepGlare 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }