@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Syne:wght@400;600;700;800&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0d0f14;--surface:#13161e;--surface2:#1a1e2a;--border:#252836;--accent:#00e5ff;--accent2:#7c3aed;--yellow:#ffd600;--red:#ff3d71;--green:#00e096;--orange:#ff9f43;--blue:#4d8af0;--bar-default:#2a3a5c;--text:#e2e8f0;--text-muted:#64748b;--text-dim:#94a3b8;--radius:12px;--radius-sm:8px;--glow:0 0 20px #00e5ff26}body,html{margin:0;padding:0}body,html{background:#0d0f14}body{background:var(--bg);color:#e2e8f0;color:var(--text);font-family:Syne,sans-serif;min-height:100vh}.App{background:radial-gradient(ellipse at 20% 0,#7c3aed14 0,#0000 50%),radial-gradient(ellipse at 80% 10%,#00e5ff0f 0,#0000 50%),#0d0f14;background:radial-gradient(ellipse at 20% 0,#7c3aed14 0,#0000 50%),radial-gradient(ellipse at 80% 10%,#00e5ff0f 0,#0000 50%),var(--bg);flex-direction:column;min-height:100vh;padding:32px 20px 48px}.App,.app-header{align-items:center;display:flex}.app-header{justify-content:space-between;margin-bottom:32px;max-width:900px;width:100%}.app-header h1{color:#e2e8f0;color:var(--text);font-family:Syne,sans-serif;font-size:1.6rem;font-weight:800;letter-spacing:-.02em}.app-header h1 span{color:#00e5ff;color:var(--accent)}.status-badge{align-items:center;background:#13161e;background:var(--surface);border:1px solid #252836;border:1px solid var(--border);border-radius:999px;color:#64748b;color:var(--text-muted);display:flex;font-family:JetBrains Mono,monospace;font-size:.72rem;gap:8px;padding:6px 14px}.status-dot{background:#64748b;background:var(--text-muted);border-radius:50%;height:7px;transition:background .3s,box-shadow .3s;width:7px}.status-dot.running{animation:pulse 1s infinite;background:#00e096;background:var(--green);box-shadow:0 0 8px #00e096;box-shadow:0 0 8px var(--green)}.status-dot.paused{background:#ff9f43;background:var(--orange);box-shadow:0 0 8px #ff9f43;box-shadow:0 0 8px var(--orange)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.main-card{background:#13161e;background:var(--surface);border:1px solid #252836;border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 64px #0006;max-width:900px;overflow:hidden;width:100%}.card-topbar{align-items:center;background:#1a1e2a;background:var(--surface2);border-bottom:1px solid #252836;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:14px 20px}.topbar-dots{display:flex;gap:7px}.topbar-dots span{border-radius:50%;display:block;height:11px;width:11px}.topbar-dots span:first-child{background:#ff5f57}.topbar-dots span:nth-child(2){background:#febc2e}.topbar-dots span:nth-child(3){background:#28c840}.topbar-label{color:#64748b;color:var(--text-muted);font-size:.75rem;letter-spacing:.05em}.topbar-algo-tag,.topbar-label{font-family:JetBrains Mono,monospace}.topbar-algo-tag{background:#00e5ff14;border:1px solid #00e5ff33;border-radius:6px;color:#00e5ff;color:var(--accent);font-size:.72rem;padding:3px 10px}.visualizer-wrapper{background:#0d0f14;background:var(--bg);border-bottom:1px solid #252836;border-bottom:1px solid var(--border);padding:32px 32px 24px;position:relative}.visualizer-container{align-items:flex-end;display:flex;gap:5px;height:260px;justify-content:center}.bars-section{align-items:center;display:flex;flex-direction:column}.pointer-row{gap:5px;height:38px;margin-bottom:4px}.pointer-cell,.pointer-row{align-items:flex-end;display:flex;justify-content:center}.pointer-cell{flex-shrink:0}.pointer{align-items:center;animation:popIn .15s ease;display:flex;flex-direction:column}@keyframes popIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.pointer-label{font-family:JetBrains Mono,monospace;font-size:.65rem;font-weight:700;line-height:1;margin-bottom:1px}.pointer-arrow{font-size:.75rem;line-height:1}.pointer.COMPARE{color:#ffd600;color:var(--yellow)}.pointer.SWAP{color:#ff3d71;color:var(--red)}.pointer.OVERWRITE{color:#4d8af0;color:var(--blue)}.pointer.FOUND{color:#00e096;color:var(--green)}.pointer.CHECK{color:#ff9f43;color:var(--orange)}.array-boxes-section{align-items:center;display:flex;flex-direction:column;gap:6px;margin-top:24px}.array-boxes-label{align-self:flex-start;color:#64748b;color:var(--text-muted);font-family:JetBrains Mono,monospace;font-size:.65rem;letter-spacing:.1em;padding-left:4px;text-transform:uppercase}.array-boxes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.array-box-wrap{flex-direction:column;gap:3px;position:relative}.array-box,.array-box-wrap{align-items:center;display:flex}.array-box{background:#1a1e2a;background:var(--surface2);border:2px solid #252836;border:2px solid var(--border);border-radius:8px;color:#94a3b8;color:var(--text-dim);font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:700;height:42px;justify-content:center;transition:border-color .18s,color .18s,transform .18s,box-shadow .18s;width:42px}.array-box.active{box-shadow:0 8px 20px #0000004d;transform:translateY(-4px)}.array-box.COMPARE{box-shadow:0 0 12px #ffd60066}.array-box.SWAP{box-shadow:0 0 12px #ff3d7166}.array-box.OVERWRITE{box-shadow:0 0 12px #4d8af066}.array-box.FOUND{box-shadow:0 0 16px #00e09680}.array-box.CHECK{box-shadow:0 0 12px #ff9f4366}.array-box-index{color:#64748b;color:var(--text-muted);font-size:.6rem}.array-box-index,.box-pointer{font-family:JetBrains Mono,monospace}.box-pointer{animation:popIn .15s ease;font-size:.65rem;font-weight:700;position:absolute;top:-18px}.box-pointer-i{left:4px}.box-pointer-j{right:4px}.bar{border-radius:4px 4px 0 0;position:relative;transition:height .18s ease,background-color .18s ease,box-shadow .18s ease}.bar.swap{box-shadow:0 0 14px #ff3d7199}.bar.found{box-shadow:0 0 18px #00e096b3}.bar.check{box-shadow:0 0 14px #ff9f4399}.axis-line{background:#252836;background:var(--border);border-radius:1px;height:2px;margin-top:8px}.step-info{align-items:center;background:#1a1e2a;background:var(--surface2);border-bottom:1px solid #252836;border-bottom:1px solid var(--border);color:#94a3b8;color:var(--text-dim);display:flex;font-family:JetBrains Mono,monospace;font-size:.78rem;gap:12px;min-height:46px;padding:14px 32px}.step-counter{color:#64748b;color:var(--text-muted);font-size:.7rem}.step-action{border-radius:4px;font-size:.7rem;font-weight:600;letter-spacing:.06em;padding:2px 8px}.step-action.COMPARE{background:#ffd60026;color:#ffd600;color:var(--yellow)}.step-action.SWAP{background:#ff3d7126;color:#ff3d71;color:var(--red)}.step-action.OVERWRITE{background:#4d8af026;color:#4d8af0;color:var(--blue)}.step-action.FOUND{background:#00e09626;color:#00e096;color:var(--green)}.step-action.CHECK{background:#ff9f4326;color:#ff9f43;color:var(--orange)}.controls{display:flex;flex-direction:column;gap:20px;padding:24px 32px}.controls-row{align-items:center;display:flex;flex-wrap:wrap;gap:12px}.controls-label{color:#64748b;color:var(--text-muted);font-size:.7rem;letter-spacing:.08em;min-width:60px;text-transform:uppercase}.controls-label,select{font-family:JetBrains Mono,monospace}select{appearance:none;background:#1a1e2a;background:var(--surface2);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%2364748b' d='M6 8 1 3h10z'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;border:1px solid #252836;border:1px solid var(--border);border-radius:8px;border-radius:var(--radius-sm);color:#e2e8f0;color:var(--text);cursor:pointer;font-size:.8rem;outline:none;padding:9px 34px 9px 14px;transition:border-color .2s}select:focus,select:hover{border-color:#00e5ff;border-color:var(--accent)}input[type=number],input[type=text]{background:#1a1e2a;background:var(--surface2);border:1px solid #252836;border:1px solid var(--border);border-radius:8px;border-radius:var(--radius-sm);color:#e2e8f0;color:var(--text);font-family:JetBrains Mono,monospace;font-size:.8rem;min-width:160px;outline:none;padding:9px 14px;transition:border-color .2s,box-shadow .2s}input[type=number]:focus,input[type=text]:focus{border-color:#00e5ff;border-color:var(--accent);box-shadow:0 0 0 3px #00e5ff14}input::placeholder{color:#64748b;color:var(--text-muted)}.speed-row{align-items:center;display:flex;gap:12px}input[type=range]{accent-color:#00e5ff;accent-color:var(--accent);-webkit-appearance:none;background:#252836;background:var(--border);border-radius:2px;cursor:pointer;height:4px;outline:none;width:160px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#00e5ff;background:var(--accent);border-radius:50%;box-shadow:0 0 8px #00e5ff80;cursor:pointer;height:16px;-webkit-transition:transform .15s;transition:transform .15s;width:16px}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.speed-value{color:#64748b;color:var(--text-muted);font-family:JetBrains Mono,monospace;font-size:.72rem;min-width:40px}.btn-group{display:flex;flex-wrap:wrap;gap:8px}button{align-items:center;border:none;border-radius:8px;border-radius:var(--radius-sm);cursor:pointer;display:flex;font-family:Syne,sans-serif;font-size:.82rem;font-weight:600;gap:6px;letter-spacing:.01em;padding:9px 18px;transition:all .18s ease;white-space:nowrap}.btn-run{background:#00e5ff;background:var(--accent);box-shadow:0 0 16px #00e5ff40;color:#000}.btn-run:hover:not(:disabled){background:#3ef;box-shadow:0 0 24px #00e5ff73;transform:translateY(-1px)}.btn-pause{background:#1a1e2a;background:var(--surface2);border:1px solid #ff9f434d;color:#ff9f43;color:var(--orange)}.btn-pause:hover:not(:disabled){background:#ff9f431a}.btn-resume{background:#1a1e2a;background:var(--surface2);border:1px solid #00e0964d;color:#00e096;color:var(--green)}.btn-resume:hover:not(:disabled){background:#00e0961a}.btn-step{background:#1a1e2a;background:var(--surface2);border:1px solid #4d8af04d;color:#4d8af0;color:var(--blue)}.btn-step:hover:not(:disabled){background:#4d8af01a}.btn-reset{background:#1a1e2a;background:var(--surface2);border:1px solid #252836;border:1px solid var(--border);color:#64748b;color:var(--text-muted)}.btn-reset:hover:not(:disabled){background:#ff3d7114;border-color:#ff3d7133;color:#ff3d71;color:var(--red)}button:disabled{box-shadow:none!important;cursor:not-allowed;opacity:.3;transform:none!important}.how-to-card{background:#13161e;background:var(--surface);border:1px solid #252836;border:1px solid var(--border);border-radius:16px;margin-bottom:20px;max-width:900px;padding:20px 28px;width:100%}.how-to-title{color:#00e5ff;color:var(--accent);font-family:JetBrains Mono,monospace;font-size:.7rem;letter-spacing:.1em;margin-bottom:16px;text-transform:uppercase}.how-to-steps{flex-wrap:wrap;gap:0;gap:8px}.how-step,.how-to-steps{align-items:center;display:flex}.how-step{flex:1 1;gap:12px;min-width:160px}.how-step-num{align-items:center;background:#00e5ff1a;border:1px solid #00e5ff40;border-radius:50%;color:#00e5ff;color:var(--accent);display:flex;flex-shrink:0;font-family:JetBrains Mono,monospace;font-size:.75rem;font-weight:700;height:28px;justify-content:center;width:28px}.how-step-text{display:flex;flex-direction:column;gap:2px}.how-step-text strong{color:#e2e8f0;color:var(--text);font-size:.82rem;font-weight:700}.how-step-text span{color:#64748b;color:var(--text-muted);font-size:.72rem;line-height:1.4}.how-step-text code{background:#00e5ff14;border-radius:4px;color:#00e5ff;color:var(--accent);font-family:JetBrains Mono,monospace;font-size:.7rem;padding:1px 5px}.how-step-divider{background:#252836;background:var(--border);flex-shrink:0;height:1px;width:24px}@media (max-width:600px){.how-step-divider{display:none}.how-to-steps{align-items:flex-start;flex-direction:column}}.legend{background:#1a1e2a;background:var(--surface2);border-top:1px solid #252836;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:16px;padding:16px 32px}.legend-item{align-items:center;color:#64748b;color:var(--text-muted);display:flex;font-family:JetBrains Mono,monospace;font-size:.68rem;gap:7px}.legend-dot{border-radius:3px;height:10px;width:10px}
/*# sourceMappingURL=main.11efbaa9.css.map*/