:root { scroll-behavior: smooth; }
        body { 
            font-family: 'Noto Sans Mono', monospace;
            background-color: #FFFFFF;
            overflow-x: hidden;
            color: #1A1A1A;
        }

        /* Animations */
        @keyframes float {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            33% { transform: translate(15px, -25px) rotate(5deg); }
            66% { transform: translate(-10px, -15px) rotate(-5deg); }
        }
        .animate-float { animation: float 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }
        .animate-float-slow { animation: float 12s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite reverse; }

        @keyframes bounce-subtle {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .btn-bounce:hover { animation: bounce-subtle 0.5s ease infinite; }

        /* Card Mechanics */
        .card-pop {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
        }
        .card-pop:hover {
            transform: scale(1.05) translateY(-10px) rotate(1deg);
            box-shadow: 12px 12px 0px #1A1A1A;
        }

        /* Skill Card Logic */
        .skill-card { perspective: 1000px; height: 380px; }
        .skill-card-inner {
            position: relative;
            width: 100%; height: 100%;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            transform-style: preserve-3d;
        }
        .skill-card:hover .skill-card-inner { transform: rotateY(180deg); }
        .skill-front, .skill-back {
            position: absolute;
            width: 100%; height: 100%;
            backface-visibility: hidden;
            border: 4px solid #1A1A1A;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: 20px;
        }
        .skill-back { transform: rotateY(180deg); background: #1A1A1A; color: white; }

        /* Multipage System */
        .page-view { display: none; }
        .page-view.active { display: block; animation: pageIn 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
        @keyframes pageIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

        /* Visual Style */
        .custom-shadow { box-shadow: 8px 8px 0px #1A1A1A; }
        .custom-shadow-lg { box-shadow: 15px 15px 0px #1A1A1A; }
        
        .bg-grid {
            background-image: 
                linear-gradient(to right, rgba(22, 196, 127, 0.1) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(22, 196, 127, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
        }

        .hero-gradient {
            background: radial-gradient(circle at 50% 50%, #FFD65A 0%, transparent 70%);
            filter: blur(80px);
            opacity: 0.3;
        }

        /* Progress Bar Animation */
        .bar-fill { 
            width: 0; 
            transition: width 1.5s cubic-bezier(0.1, 0.9, 0.2, 1); 
        }
        .active .bar-fill { width: var(--target); }