body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .example {
            border-left: 4px solid #4CAF50;
            padding-left: 15px;
            margin: 20px 0;
        }
        
        h1 {
            color: #2c3e50;
            text-align: center;
        }
        
        h2 {
            color: #34495e;
            border-bottom: 2px solid #3498db;
            padding-bottom: 5px;
        }
        
        input, select, button {
            padding: 10px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        button {
            background-color: #3498db;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #2980b9;
        }
        
        .result {
            background-color: #e8f5e8;
            padding: 15px;
            border-radius: 4px;
            margin: 10px 0;
            border-left: 4px solid #4CAF50;
        }
        
        .error {
            background-color: #ffe6e6;
            border-left: 4px solid #f44336;
        }
        
        .step {
            background-color: #f0f8ff;
            padding: 10px;
            margin: 5px 0;
            border-radius: 4px;
        }
        
        .input-step { background-color: #fff3cd; }
        .process-step { background-color: #d4edda; }
        .output-step { background-color: #d1ecf1; }