.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .ambient-glow-sm {
            box-shadow: 0 0 20px rgba(75, 226, 119, 0.05);
        }
        .tonal-layering {
            background: linear-gradient(180deg, rgb(var(--rr-background) / 1) 0%, rgb(var(--rr-surface-container-lowest) / 1) 100%);
        }
        .hover-card-glow {
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .hover-card-glow:hover {
            transform: translateY(-4px);
            box-shadow: 0 0 20px rgba(74, 225, 118, 0.15);
        }
        .hover-card-glow::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(74, 225, 118, 0.08) 0%, transparent 50%);
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }
        .hover-card-glow:hover::after {
            opacity: 1;
        }
        .falling-pattern-container {
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
            background-color: rgb(var(--rr-background));
        }
        .falling-pattern {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 200%;
            background-image: 
                radial-gradient(circle at 2px 2px, rgba(75, 226, 119, 0.05) 1px, transparent 0);
            background-size: 40px 40px;
            animation: falling 60s linear infinite;
        }
        .code-accent {
            font-family: 'Courier New', Courier, monospace;
            font-size: 10px;
            color: rgba(75, 226, 119, 0.3);
            pointer-events: none;
            user-select: none;
        }
        .progress-bar-fill {
            width: 0;
            transition: width 1.5s cubic-bezier(0.65, 0, 0.35, 1);
        }
        .progress-bar-fill.active {
            width: var(--target-width);
        }
        .shimmer-text {
            background: linear-gradient(90deg, rgb(var(--rr-on-background)) 0%, #4be277 50%, rgb(var(--rr-on-background)) 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shimmer 4s linear infinite;
        }