#root{width:100%;min-height:100vh}.tutorial-overlay{position:fixed;inset:0;background:#000000bf;z-index:1000;pointer-events:auto}.tutorial-spotlight{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px #000000bf;pointer-events:none;transition:all .4s ease;border:2px solid var(--accent);background:transparent}.tutorial-tooltip{position:fixed;width:320px;background:linear-gradient(145deg,var(--bg-secondary),#253044);border-radius:16px;border:1px solid var(--accent);box-shadow:0 20px 60px #00000080,0 0 40px #3b82f626;z-index:1001;animation:tooltipFadeIn .3s ease;overflow:hidden}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.tutorial-header{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 20px 0}.tutorial-header h3{margin:0;font-size:1.1rem;font-weight:600;color:var(--text-primary);flex:1}.tutorial-close{background:transparent;border:none;color:var(--text-secondary);font-size:1.2rem;cursor:pointer;padding:0;line-height:1;transition:color .2s}.tutorial-close:hover{color:var(--danger)}.tutorial-content{padding:12px 20px 20px;font-size:.9rem;line-height:1.6;color:var(--text-secondary);white-space:pre-line;margin:0}.tutorial-footer{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#0003;border-top:1px solid rgba(255,255,255,.05)}.tutorial-progress{display:flex;gap:6px}.progress-dot{width:8px;height:8px;border-radius:50%;background:var(--bg-tertiary);transition:all .3s}.progress-dot.active{background:var(--accent);transform:scale(1.2)}.progress-dot.completed{background:var(--success)}.tutorial-buttons{display:flex;gap:8px}.tutorial-buttons button{padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;border:none}.btn-prev{background:var(--bg-tertiary);color:var(--text-primary)}.btn-prev:hover{background:#475569}.btn-next{background:linear-gradient(135deg,var(--accent),#2563eb);color:#fff}.btn-next:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);transform:translateY(-1px)}@media(max-width:768px){.tutorial-tooltip{width:90%;max-width:320px;left:50%!important;transform:translate(-50%)!important}}:root{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--accent: #3b82f6;--accent-hover: #2563eb;--success: #22c55e;--danger: #ef4444;--node-default: #3b82f6;--node-active: #f59e0b;--node-found: #22c55e;--node-inserted: #a855f7;--node-compared: #ec4899;--edge-color: #64748b;--radius: 8px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column;padding:20px}header{text-align:center;margin-bottom:20px}header h1{font-size:1.75rem;background:linear-gradient(135deg,var(--accent),var(--success));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}header p{color:var(--text-secondary);font-size:.875rem}.main-layout{display:flex;gap:20px;flex:1}.controls{width:280px;background:var(--bg-secondary);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:20px}.controls section{display:flex;flex-direction:column;gap:10px}.controls h3{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.input-row{display:flex;gap:8px;align-items:stretch}.input-row input{flex:1;min-width:0;padding:10px 12px;background:var(--bg-tertiary);border:1px solid transparent;border-radius:var(--radius);color:var(--text-primary);font-size:.9rem;-moz-appearance:textfield;appearance:textfield}.input-row input[type=number]::-webkit-outer-spin-button,.input-row input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.input-row input:focus{outline:none;border-color:var(--accent)}.input-row button{flex-shrink:0;white-space:nowrap}button{padding:10px 16px;background:var(--bg-tertiary);border:none;border-radius:var(--radius);color:var(--text-primary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}button:hover{background:#475569}.btn-primary{background:var(--success)}.btn-primary:hover{background:#16a34a}.btn-danger{background:var(--danger)}.btn-danger:hover{background:#dc2626}.btn-full{width:100%}.button-row{display:flex;gap:8px}.button-row button{flex:1}.speed-control{display:flex;align-items:center;gap:10px}.speed-control input[type=range]{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:var(--bg-tertiary);border-radius:3px}.speed-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent);border-radius:50%;cursor:pointer}.speed-control span{font-size:.875rem;color:var(--text-secondary);min-width:50px}.traversal-buttons{display:flex;flex-direction:column;gap:8px}.btn-traversal{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--bg-tertiary);border:1px solid transparent;transition:all .2s}.btn-traversal:hover{background:#475569;border-color:var(--accent)}.traversal-hint{font-size:.7rem;color:var(--text-secondary);font-weight:400}.animation-controls{display:flex;gap:8px;padding:12px 16px;background:var(--bg-secondary);border-radius:var(--radius);justify-content:center}.control-btn{display:flex;align-items:center;gap:6px;padding:10px 16px;background:var(--bg-tertiary);border:1px solid transparent;border-radius:var(--radius);color:var(--text-primary);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s}.control-btn:hover:not(:disabled){background:#475569;border-color:var(--accent)}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn-primary{background:var(--accent);border-color:var(--accent)}.control-btn-primary:hover:not(:disabled){background:var(--accent-hover)}.visualization{flex:1;display:flex;flex-direction:column}.bst-visualizer{flex:1;display:flex;flex-direction:column;gap:16px}.svg-container{flex:1;background:var(--bg-secondary);border-radius:var(--radius);overflow:auto;display:flex;align-items:center;justify-content:center;min-height:400px}.svg-container svg{display:block}.status-bar{background:var(--bg-secondary);border-radius:var(--radius);padding:14px 18px;display:flex;justify-content:space-between;align-items:center}.status-message{font-size:.9rem}.step-counter{font-size:.8rem;color:var(--text-secondary);padding:4px 10px;background:var(--bg-tertiary);border-radius:var(--radius)}.legend{display:flex;gap:16px;padding:12px 16px;background:var(--bg-tertiary);border-radius:var(--radius)}.legend-item{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text-secondary)}.legend-dot{width:12px;height:12px;border-radius:50%}.legend-dot.default{background:var(--node-default)}.legend-dot.active{background:var(--node-active)}.legend-dot.compared{background:var(--node-compared)}.legend-dot.found{background:var(--node-found)}.legend-dot.inserted{background:var(--node-inserted)}.node{fill:var(--node-default);stroke:#1e40af;stroke-width:3;transition:all .3s ease}.node.active{fill:var(--node-active);stroke:#b45309;filter:drop-shadow(0 0 12px rgba(245,158,11,.6))}.node.compared{fill:var(--node-compared);stroke:#9d174d;filter:drop-shadow(0 0 12px rgba(236,72,153,.6))}.node.found{fill:var(--node-found);stroke:#15803d;filter:drop-shadow(0 0 12px rgba(34,197,94,.6))}.node.inserted{fill:var(--node-inserted);stroke:#7e22ce;filter:drop-shadow(0 0 12px rgba(168,85,247,.6));animation:pulse .5s ease}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.node-label{fill:#fff;font-size:14px;font-weight:600;font-family:Inter,sans-serif;pointer-events:none}.edge{stroke:var(--edge-color);stroke-width:2}.empty-message{fill:var(--text-secondary);font-size:16px;font-family:Inter,sans-serif}.traversal-result{display:flex;align-items:center;gap:12px;padding:14px 18px;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border-radius:var(--radius);border:1px solid var(--accent)}.result-label{font-size:.85rem;font-weight:600;color:var(--accent);white-space:nowrap}.result-values{font-family:SF Mono,Fira Code,monospace;font-size:.95rem;color:var(--success);font-weight:500;letter-spacing:.5px}