:root {
            --plum: #9D3C72; --cream: #E1D7C6; --yellow: #FFE9B1; --teal: #0E5E6F;
        }
        body { background-color: var(--cream); color: var(--teal); transition: background 0.8s ease; scroll-behavior: smooth; }
        
        /* Kinetic Typography Intro */
        .kinetic-word { display: inline-block; opacity: 0; transform: translateY(50px) rotate(10deg); transition: 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
        .hero-active .kinetic-word { opacity: 1; transform: translateY(0) rotate(0deg); }

        /* Background Kinetic Shapes */
        .bg-shape { position: absolute; border-radius: 50%; filter: blur(80px); z-index: -1; animation: drift 20s infinite alternate; }
        @keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(100px, 50px) scale(1.2); } }

        /* Floating Cards */
        .float-card { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease; }
        .float-card:hover { transform: translateY(-20px) rotate(2deg); box-shadow: 0 30px 60px rgba(0,0,0,0.1); }

        /* Ink Reveal */
        .ink-reveal { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s cubic-bezier(0.77, 0, 0.175, 1); }
        .reveal-active .ink-reveal { clip-path: inset(0 0 0 0); }

        /* Section Morphing */
        .section-plum { background: var(--plum); color: var(--cream); }
        .section-teal { background: var(--teal); color: var(--cream); }

        /* Subject Strip */
        .subject-pill { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); min-width: 150px; cursor: pointer; filter: grayscale(1); opacity: 0.6; }
        .subject-pill:hover, .subject-pill.active { filter: grayscale(0); opacity: 1; transform: scale(1.05); }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--cream); }
        ::-webkit-scrollbar-thumb { background: var(--plum); border-radius: 4px; }

        /* Header Transitions */
        header.scrolled { background: rgba(225, 215, 198, 0.95); backdrop-filter: blur(10px); padding: 0.75rem 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        
        .page-node { display: none; opacity: 0; transform: translateY(30px); transition: 0.8s ease; }
        .page-node.active { display: block; opacity: 1; transform: translateY(0); }

        .search-results-box { max-height: 400px; overflow-y: auto; scrollbar-width: thin; }