.algo-visualization{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 2px 10px #0000000d}.dark-mode .algo-visualization{color:#fff;background:#1a1a2e}.visualization-header{border-bottom:2px solid #e0e0e0;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.dark-mode .visualization-header{border-bottom-color:#3d3d54}.visualization-icon{font-size:2rem}.visualization-header h3{color:#667eea;margin:0;font-size:1.8rem}.dark-mode .visualization-header h3{color:#9f7aea}.visualization-content{margin:1.5rem 0}.visualization-canvas{background:linear-gradient(135deg,#f5f5f5 0%,#e8e8e8 100%);border-radius:12px;justify-content:center;align-items:center;min-height:300px;margin-bottom:1.5rem;padding:3rem;display:flex}.dark-mode .visualization-canvas{background:linear-gradient(135deg,#2d2d44 0%,#3d3d54 100%)}.array-visualization{flex-direction:column;align-items:center;gap:1.5rem;width:100%;display:flex}.search-challenges-container{background:linear-gradient(135deg,#f0f4ff 0%,#e8efff 100%);border-left:4px solid #667eea;border-radius:12px;margin:1.5rem 2rem;padding:1.5rem}.dark-mode .search-challenges-container{background:linear-gradient(135deg,#2d2d44 0%,#3d3d54 100%);border-left-color:#9f7aea}.search-challenges-container h4{color:#667eea;margin:0 0 .5rem;font-size:1.2rem}.dark-mode .search-challenges-container h4{color:#9f7aea}.challenges-subtitle{color:#666;margin:0 0 1rem;font-size:.9rem}.dark-mode .challenges-subtitle{color:#aaa}.challenges-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;display:grid}.challenge-btn{color:#667eea;cursor:pointer;background:#fff;border:2px solid #667eea;border-radius:8px;padding:.8rem 1rem;font-size:.95rem;font-weight:600;transition:all .3s}.challenge-btn:hover{color:#fff;background:#667eea;transform:translateY(-3px);box-shadow:0 4px 12px #667eea4d}.dark-mode .challenge-btn{color:#9f7aea;background:#2d2d44;border-color:#9f7aea}.dark-mode .challenge-btn:hover{color:#fff;background:#9f7aea}.target-input-container{background:#fff;border-radius:12px;flex-wrap:wrap;align-items:center;gap:1rem;margin:1.5rem 2rem;padding:1.5rem;display:flex;box-shadow:0 4px 15px #0000001a}.dark-mode .target-input-container{background:#2d2d44}.target-input-container label{color:#667eea;font-size:1rem;font-weight:600}.dark-mode .target-input-container label{color:#9f7aea}.target-input{text-align:center;border:2px solid #e0e0e0;border-radius:8px;width:100px;padding:.6rem 1rem;font-size:1rem;font-weight:600;transition:all .3s}.target-input:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}.dark-mode .target-input{color:#fff;background:#1a1a2e;border-color:#4d4d64}.dark-mode .target-input:focus{border-color:#9f7aea;box-shadow:0 0 0 3px #9f7aea1a}.target-submit-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;padding:.6rem 1.5rem;font-size:1rem;font-weight:600;transition:all .3s}.target-submit-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #667eea4d}.target-submit-btn:active{transform:translateY(0)}.help-text{color:#888;margin-left:auto;font-size:.9rem;font-style:italic}.dark-mode .help-text{color:#aaa}.search-info{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.info-badge{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:20px;padding:.5rem 1rem;font-size:.9rem;font-weight:600}.array-container{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.array-element{background:#fff;border:3px solid #e0e0e0;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:.3rem;width:70px;height:80px;transition:all .5s;display:flex;position:relative}.array-value{color:#333;font-size:1.5rem;font-weight:700}.array-index{color:#888;font-size:.75rem}.array-element.mid{background:gold;border-color:orange;transform:scale(1.1);box-shadow:0 4px 20px #ffd70080}.array-element.mid .array-value{color:#000}.array-element.found{color:#fff;background:#4caf50;border-color:#2e7d32;animation:.5s pulse;transform:scale(1.15);box-shadow:0 4px 20px #4caf5099}.array-element.found .array-value,.array-element.found .array-index{color:#fff}.array-element.not-found{color:#fff;background:#f44336;border-color:#c62828;transform:scale(1.1);box-shadow:0 4px 20px #f4433680}.array-element.not-found .array-value,.array-element.not-found .array-index{color:#fff}.array-element.active-zone{background:#e3f2fd;border-color:#667eea}.array-element.eliminated{opacity:.4;background:#f5f5f5;border-color:#ccc}.dark-mode .array-element{background:#2d2d44;border-color:#4d4d64}.dark-mode .array-value{color:#fff}.dark-mode .array-element.active-zone{background:#3d3d54;border-color:#9f7aea}.dark-mode .array-element.eliminated{background:#1a1a2e;border-color:#2d2d44}@keyframes pulse{0%,to{transform:scale(1.15)}50%{transform:scale(1.25)}}.tree-visualization,.graph-visualization{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.tree-placeholder,.graph-placeholder{color:#666;text-align:center;font-size:1.2rem}.dark-mode .tree-placeholder,.dark-mode .graph-placeholder{color:#aaa}.visualization-placeholder{text-align:center;background:linear-gradient(135deg,#f5f5f5 0%,#e8e8e8 100%);border:2px dashed #ccc;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;min-height:300px;padding:3rem 2rem;display:flex}.dark-mode .visualization-placeholder{background:linear-gradient(135deg,#2d2d44 0%,#3d3d54 100%);border-color:#4d4d64}.visualization-placeholder .placeholder-icon{margin-bottom:1rem;font-size:4rem}.visualization-placeholder h4{color:#667eea;margin:1rem 0 .5rem;font-size:1.4rem}.dark-mode .visualization-placeholder h4{color:#9f7aea}.visualization-placeholder p{color:#666;margin:0;font-size:1rem}.dark-mode .visualization-placeholder p{color:#aaa}.visualization-controls{flex-wrap:wrap;justify-content:center;gap:1rem;margin:1.5rem 0;display:flex}.control-button{color:#667eea;cursor:pointer;background:#fff;border:2px solid #667eea;border-radius:8px;align-items:center;gap:.5rem;padding:.8rem 1.5rem;font-size:1rem;font-weight:600;transition:all .3s;display:flex}.control-button:hover:not(:disabled){color:#fff;background:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.control-button.play{color:#fff;background:#667eea}.control-button.play:hover{background:#5568d3}.control-button:disabled{opacity:.4;cursor:not-allowed}.dark-mode .control-button{color:#9f7aea;background:#2d2d44;border-color:#9f7aea}.dark-mode .control-button:hover:not(:disabled){color:#fff;background:#9f7aea}.dark-mode .control-button.play{background:#9f7aea}.step-indicator{background:linear-gradient(135deg,#f0f4ff 0%,#e8efff 100%);border-left:4px solid #667eea;border-radius:8px;margin-top:1.5rem;padding:1.5rem}.dark-mode .step-indicator{background:linear-gradient(135deg,#2d2d44 0%,#3d3d54 100%);border-left-color:#9f7aea}.step-number{color:#667eea;text-transform:uppercase;letter-spacing:1px;margin:0 0 .5rem;font-size:.9rem;font-weight:700}.dark-mode .step-number{color:#9f7aea}.step-description{color:#333;margin:0;font-size:1.1rem;line-height:1.6}.dark-mode .step-description{color:#ddd}.visualization-description{background:#f9f9f9;border-radius:8px;margin:2rem 0;padding:1.5rem}.dark-mode .visualization-description{background:#2d2d44}.visualization-description h4{color:#667eea;margin:0 0 1rem;font-size:1.3rem}.dark-mode .visualization-description h4{color:#9f7aea}.visualization-description p{color:#666;margin:0;line-height:1.6}.dark-mode .visualization-description p{color:#aaa}@media (max-width:768px){.algo-visualization{padding:1.5rem}.visualization-header h3{font-size:1.5rem}.visualization-canvas{padding:2rem 1rem}.array-element{width:50px;height:50px;font-size:1.2rem}.visualization-controls{gap:.5rem}.control-button{padding:.6rem 1rem;font-size:.9rem}.step-indicator{padding:1rem}}.generic-visualization{justify-content:center;align-items:center;min-height:200px;padding:2rem;display:flex}.step-display{width:100%;max-width:800px}.step-content{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 8px #0000001a}.dark-mode .step-content{color:#fff;background:#2d2d44}.step-text{white-space:pre-wrap;color:#333;margin:0;font-family:Courier New,monospace;font-size:1.1rem;line-height:1.8}.dark-mode .step-text{color:#e0e0e0}.code-execution-wrapper{width:100%;max-width:100%;margin:0}.visualization-canvas:has(.code-execution-wrapper){padding:1.5rem}.execution-step-description{background:#f8f9fa;border-left:4px solid #667eea;border-radius:4px;margin-top:1.5rem;padding:1rem 1.5rem}.dark-mode .execution-step-description{background:#2d2d44;border-left-color:#9f7aea}.execution-step-description h4{color:#667eea;margin:0 0 .5rem;font-size:1.1rem}.dark-mode .execution-step-description h4{color:#9f7aea}.execution-step-description p{color:#555;margin:0;line-height:1.6}.dark-mode .execution-step-description p{color:#d0d0d0}
.code-execution-tracer{gap:1rem;width:100%;max-width:100%;min-height:500px;margin:0;display:flex}.code-panel{background:#1e1e1e;border-radius:8px;flex-direction:column;flex:52%;min-width:0;display:flex;overflow:hidden;box-shadow:0 2px 8px #0000001a}.variables-panel{background:#fff;border:1px solid #e0e0e0;border-radius:8px;flex-direction:column;flex:0 0 48%;min-width:320px;max-width:550px;display:flex;overflow:hidden;box-shadow:0 2px 8px #0000001a}.panel-header{align-items:center;gap:.5rem;padding:.75rem 1rem;font-size:.95rem;font-weight:600;display:flex}.code-panel .panel-header{color:#fff;background:#2d2d2d;border-bottom:1px solid #3e3e3e}.variables-panel .panel-header{color:#333;background:#f5f5f5;border-bottom:1px solid #e0e0e0}.panel-icon{font-size:1.1rem}.panel-header h4{margin:0;font-size:.95rem}.code-editor-container{flex:1;position:relative;overflow:hidden}.no-code-message{color:#888;justify-content:center;align-items:center;height:100%;font-style:italic;display:flex}.highlighted-line{animation:.5s ease-in-out highlightPulse;background-color:#ffd70026!important;border-left:3px solid gold!important}.highlighted-line-0{background-color:#ffd70040!important;border-left-color:gold!important}.highlighted-line-1{background-color:#ffd7002e!important;border-left-color:#e6c200!important}.highlighted-line-2{background-color:#ffd7001f!important;border-left-color:#ccad00!important}.highlighted-line-glyph{background-color:gold;width:3px!important}@keyframes highlightPulse{0%{background-color:#ffd70066}to{background-color:#ffd70026}}.variables-table-container{flex:1;padding:1rem;overflow-y:auto}.variables-table{border-collapse:collapse;width:100%;font-size:.9rem}.variables-table thead{z-index:10;background:#f8f9fa;position:sticky;top:0}.variables-table th{text-align:left;color:#555;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #e0e0e0;padding:.75rem .5rem;font-size:.85rem;font-weight:600}.variables-table td{vertical-align:middle;border-bottom:1px solid #f0f0f0;padding:.75rem .5rem}.variables-table tbody tr{transition:background-color .2s}.variables-table tbody tr:hover{background-color:#f8f9fa}.variable-changed{animation:.6s ease-in-out variableChangePulse;background-color:#4caf501a!important}.variable-changed .variable-name,.variable-changed .variable-value{color:#2e7d32;font-weight:600}@keyframes variableChangePulse{0%{background-color:#4caf504d}to{background-color:#4caf501a}}.change-indicator{color:#4caf50;margin-left:.5rem;font-size:.85rem;animation:.6s ease-in-out sparkle}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.variable-name{color:#333;font-family:Monaco,Menlo,Courier New,monospace;font-weight:500}.variable-value{color:#06c;text-overflow:ellipsis;white-space:nowrap;max-width:200px;font-family:Monaco,Menlo,Courier New,monospace;overflow:hidden}.variable-type{color:#666;font-size:.85rem;font-style:italic}.no-variables-message{color:#888;text-align:center;justify-content:center;align-items:center;height:100%;padding:2rem;font-style:italic;display:flex}@media (max-width:1024px){.code-execution-tracer{flex-direction:column}.variables-panel{flex:none;min-height:300px}.code-panel{min-height:400px}}@media (max-width:768px){.code-execution-tracer{gap:1rem}.panel-header{padding:.6rem .8rem}.variables-table{font-size:.85rem}.variables-table th,.variables-table td{padding:.6rem .4rem}}