/* Black, Gray, White Gradient Theme */
    .command-block-01 {
      background: linear-gradient(135deg, #ffffff, #f5f5f5);
      color: #333333;
      border-radius: 10px;
      padding: 20px 24px;
      margin: 24px 0;
      font-family: 'Fira Code', 'Cascadia Code', 'Menlo', monospace;
      font-size: 17px;
      position: relative;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      border: 1px solid #e0e0e0;
      border-left: 3px solid #333333;
      overflow: hidden;
      transition: all 0.3s ease;
    }
    
    .command-block-01:hover {
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      transform: translateY(-2px);
      border-color: #666666;
    }
    
    .command-block-01::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, 
        rgba(0, 0, 0, 0.03) 0%, 
        rgba(0, 0, 0, 0.01) 25%, 
        rgba(0, 0, 0, 0) 100%);
      pointer-events: none;
    }
    
    .command-block-01 .prompt {
      color: #333333;
      margin-right: 10px;
      font-size: 18px;
      font-weight: bold;
    }
    
    .command-block-01 .command {
      color: #1a1a1a;
      font-weight: 500;
      font-size: 18px;
    }
    
    .command-block-01 .copy-button {
      position: absolute;
      right: 14px;
      top: 14px;
      background: rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      cursor: pointer;
      transition: all 0.3s;
      z-index: 10;
    }
    
    .command-block-01 .copy-button:hover {
      background: rgba(0, 0, 0, 0.1);
      transform: scale(1.05);
    }
    
    .command-block-01 .copy-button .svg-container {
      width: 22px;
      height: 22px;
    }
    
    .command-block-01 .comment {
      color: #666666;
      font-style: italic;
      margin-top: 10px;
      font-size: 16px;
      padding-left: 18px;
      border-left: 2px solid #e0e0e0;
      transition: border-color 0.3s ease;
    }
    
    .command-block-01:hover .comment {
      border-left-color: #999999;
    }
    

    
    .command-block-01 h3 {
      color: #333333;
      font-weight: 700;
      margin-top: 10px;
      font-size: 24px;
      position: relative;
      display: inline-block;
    }
    
    .command-block-01 h3::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, #333333, transparent);
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }
    
    /* Typing cursor effect */
    .command-block-01 .command::after {
      content: '|';
      display: inline-block;
      color: #333333;
      opacity: 0;
      animation: blink 1s step-end infinite;
      margin-left: 2px;
    }
    
    .command-block-01:hover .command::after {
      opacity: 1;
    }
    
    @keyframes blink {
      0%, 100% { opacity: 0; }
      50% { opacity: 1; }
    }
    
    /* Subtle dot pattern in background */

    
    /* Button press effect */
    .command-block-01 .copy-button:active {
      transform: scale(0.95);
    }
    
    /* Success indicator animation */
    @keyframes success-wave {
      0% { transform: scale(0); opacity: 0.5; }
      100% { transform: scale(2); opacity: 0; }
    }
    
    .command-block-01 .success-indicator {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      background: rgba(34, 197, 94, 0.2);
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(0);
      pointer-events: none;
    }