* {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                 font-family: 'Comic Sans MS', 'Segoe UI', sans-serif;
                background: #f9fafc;
                min-height: 100vh;
                padding: 5px;
                color: #333;
            }

            .container {
                max-width: 1400px;
                margin: 0 auto;
                background: #cacaca;
                border-radius: 20px;
                box-shadow: 0 20px 40px rgba(0,0,0,0.1);
                overflow: hidden;
            }

            .header {
                background:#356c67;
                color: white;
                padding: 10px;
                text-align: center;
            }

            .header h1 {
                font-size: 2.5rem;
                margin-bottom: 10px;
                text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            }

            .subtitle {
                font-size: 1.2rem;
                opacity: 0.9;
            }

            .explanation {
                background: #f8f9fa;
                border-left: 6px solid #356c67;
                padding: 25px;
                margin: 30px;
                border-radius: 10px;
            }

            .character {
                font-weight: bold;
                margin-bottom: 10px;
            }

            .bhide {
                color: #e74c3c;
            }

            .jethalal {
                color: #3498db;
            }

            .acid-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
                gap: 20px;
                padding: 9px;
            }

            .acid-card {
                background: white;
                border-radius: 15px;
                padding: 25px;
                box-shadow: 0 10px 25px rgba(0,0,0,0.1);
                border: 3px solid transparent;
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
            }

            .acid-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: linear-gradient(45deg, var(--accent-color), var(--accent-color-light));
            }

            .acid-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 35px rgba(0,0,0,0.15);
            }

            .atomicity { --accent-color: #e74c3c; --accent-color-light: #ec7063; }
            .consistency { --accent-color: #f39c12; --accent-color-light: #f7dc6f; }
            .isolation { --accent-color: #27ae60; --accent-color-light: #58d68d; }
            .durability { --accent-color: #8e44ad; --accent-color-light: #bb8fce; }

            .acid-title {
                font-size: 1.5rem;
                font-weight: bold;
                color: var(--accent-color);
                margin-bottom: 15px;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .acid-icon {
                font-size: 2rem;
            }

            .demo-section {
                margin-top: 20px;
                padding: 20px;
                background: #f8f9fa;
                border-radius: 10px;
                border: 2px dashed var(--accent-color);
            }

            .demo-controls {
                display: flex;
                gap: 10px;
                margin-bottom: 15px;
                flex-wrap: wrap;
            }

            .demo-btn {
                padding: 10px 20px;
                border: none;
                border-radius: 25px;
                cursor: pointer;
                font-weight: bold;
                transition: all 0.3s ease;
                background: var(--accent-color);
                color: white;
            }

            .demo-btn:hover {
                transform: scale(1.05);
                box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            }

            .demo-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
                transform: none;
            }

            .transaction-log {
                background: #2c3e50;
                color: #ecf0f1;
                padding: 15px;
                border-radius: 10px;
                font-family: 'Courier New', monospace;
                font-size: 14px;
                height: 200px;
                overflow-y: auto;
                margin-top: 15px;
            }

            .log-entry {
                margin-bottom: 5px;
                padding: 5px;
                border-radius: 3px;
                animation: fadeIn 0.3s ease;
            }

            .log-success { background: rgba(39, 174, 96, 0.2); }
            .log-error { background: rgba(231, 76, 60, 0.2); }
            .log-info { background: rgba(52, 152, 219, 0.2); }
            .log-warning { background: rgba(243, 156, 18, 0.2); }

            @keyframes fadeIn {
                from { opacity: 0; transform: translateX(-10px); }
                to { opacity: 1; transform: translateX(0); }
            }

            .database-state {
                background: #34495e;
                color: white;
                padding: 15px;
                border-radius: 10px;
                margin-top: 15px;
            }

            .account-balance {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 10px 0;
                padding: 10px;
                background: rgba(255,255,255,0.1);
                border-radius: 5px;
            }

            .balance-amount {
                font-weight: bold;
                font-size: 1.1rem;
            }

            .concurrent-demo {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 20px;
                margin-top: 20px;
            }

            .transaction-box {
                border: 2px solid var(--accent-color);
                border-radius: 10px;
                padding: 15px;
                background: rgba(255,255,255,0.5);
            }

            .transaction-status {
                padding: 5px 10px;
                border-radius: 15px;
                font-size: 0.9rem;
                font-weight: bold;
                text-align: center;
                margin-top: 10px;
            }

            .status-waiting { background: #f39c12; color: white; }
            .status-running { background: #3498db; color: white; }
            .status-committed { background: #27ae60; color: white; }
            .status-rollback { background: #e74c3c; color: white; }

            .progress-bar {
                width: 100%;
                height: 8px;
                background: #ecf0f1;
                border-radius: 4px;
                overflow: hidden;
                margin: 10px 0;
            }

            .progress-fill {
                height: 100%;
                background: var(--accent-color);
                width: 0%;
                transition: width 0.3s ease;
            }

            .reset-all-btn {
                background: #ff0000;
                color: white;
                border: none;
                padding: 15px 30px;
                border-radius: 30px;
                cursor: pointer;
                font-size: 16px;
                font-weight: bold;
                margin: 30px auto;
                display: block;
                transition: transform 0.3s ease;
            }

            .reset-all-btn:hover {
                transform: scale(1.05);
            }

            @media (max-width: 768px) {
                .acid-grid {
                    grid-template-columns: 1fr;
                }
                
                .concurrent-demo {
                    grid-template-columns: 1fr;
                }
                
                .demo-controls {
                    justify-content: center;
                }
            }