:root { scroll-behavior: smooth; }
        body { 
            font-family: 'Work Sans', sans-serif; 
            background-color: #FDFCDC; 
            color: #2B2D42; 
            overflow-x: hidden; 
        }

        .editorial-container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 6%;
        }

        .dancing-title { font-family: 'Dancing Script', cursive; }

        /* Floating Bubble Animation */
        .bubble {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            z-index: 0;
            opacity: 0.3;
            animation: float 20s infinite alternate ease-in-out;
        }
        @keyframes float {
            0% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(100px, -50px) scale(1.1); }
            100% { transform: translate(-50px, 100px) scale(0.9); }
        }

        /* Card Interactions */
        .routine-card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            background: white;
            border: 2px solid #2B2D42;
        }
        .routine-card:hover {
            transform: rotate(-1.5deg) translateY(-12px);
            box-shadow: 15px 15px 0px #FF9F1C;
        }

        /* Header Transitions */
        .header-glass {
            background: rgba(253, 252, 220, 0.9);
            backdrop-filter: blur(15px);
            transition: all 0.5s ease;
        }
        .header-glass.scrolled {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            border-bottom: 3px solid #2B2D42;
            box-shadow: 0 10px 30px rgba(43, 45, 66, 0.05);
        }

        /* Page Transitions */
        .page-node { display: none; }
        .page-node.active { display: block; animation: slideUp 0.6s ease-out; }
        @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

        .gradient-text {
            background: linear-gradient(90deg, #FF9F1C, #8AC926);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .modal-overlay {
            position: fixed; inset: 0; background: rgba(43, 45, 66, 0.95);
            z-index: 5000; display: none; align-items: center; justify-content: center;
            padding: 1.5rem;
        }
        .modal-overlay.active { display: flex; }

        .asymmetric-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            grid-auto-rows: 10px;
            gap: 20px;
        }