body{font-family:Arial,sans-serif;background:#f4f4f4;margin:0;padding:20px;display:flex;justify-content:center;align-items:center;min-width:320px;min-height:90vh}.container{background:#fff;padding:30px;border-radius:10px;box-shadow:0 4px 8px #0000001a;width:90%;max-width:800px;text-align:center}h1{color:#333;margin-bottom:20px}.controls{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:20px}.button{padding:10px 20px;border:none;border-radius:5px;font-weight:700;cursor:pointer;transition:background .3s}.generate-btn{background:#007bff;color:#fff}.generate-btn:hover{background:#0069d9}.search-btn{background:#28a745;color:#fff}.search-btn:hover{background:#218838}.input{padding:10px 15px;border:1px solid #007bff;border-radius:5px;min-width:150px}.array-section{margin:20px 0}.array-container{display:flex;overflow-x:auto;white-space:nowrap;padding:15px 10px;margin:15px 0;gap:10px;background:#f8f9fa;border-radius:5px}.array-box{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;width:60px;height:70px;border:2px solid #979797;border-radius:5px;background:#fff}.array-value{font-weight:700;font-size:18px}.array-index{font-size:12px;color:#666}.highlight{background:#ff4b5c;color:#fff;border-color:#ff4b5c}.highlight .array-value,.highlight .array-index{color:#000}.active{background:#007bff;color:#fff;border-color:#007bff}.active .array-value,.active .array-index{color:#fff}.inactive{background:#e9ecef;opacity:.7}.visualization{margin-top:20px;padding:15px;background:#fff;border-radius:5px;box-shadow:0 2px 4px #0000000d}.step-info{margin-bottom:15px}.step-text{padding:10px;background:#f8f9fa;border-radius:5px;margin-bottom:15px}.result{padding:15px;margin-top:20px;border-radius:5px;font-weight:700}.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}