.number-box {
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            position: relative;
            overflow: hidden;
            border-radius: 8px;
        }
        .number-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
            border-radius: 8px 8px 0 0;
        }
        .number-box::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
            transform: scale(0);
            transition: transform 0.5s ease;
            border-radius: 50%;
        }
        .number-box-default {
            background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%);
            color: white;
        }
        .number-box-active {
            background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
            color: white;
            transform: translateY(-10px);
            z-index: 10;
        }
        .number-box-active::after {
            transform: scale(1);
        }
        .number-box-compare {
            background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
            color: white;
            z-index: 5;
        }
        .number-box-sorted {
            background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
            color: white;
        }
        .number-box-pivot {
            background: linear-gradient(135deg, #F87171 0%, #EF4444 100%);
            color: white;
        }
        .control-panel {
            background: rgba(31, 41, 55, 0.8);
            backdrop-filter: blur(10px);
        }
        .visualization-area {
            background: rgba(31, 41, 55, 0.6);
            backdrop-filter: blur(5px);
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        .pulse {
            animation: pulse 1.5s infinite;
        }
        .gradient-text {
            background: linear-gradient(90deg, #8B5CF6, #EC4899);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }