.algorithm-picker{margin:20px 0}.algorithm-picker-label{color:#333;margin-bottom:12px;font-size:16px;font-weight:600;display:block}.algorithm-picker-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;display:grid}.algorithm-card{cursor:pointer;text-align:left;background:#fff;border:2px solid #ddd;border-radius:8px;padding:16px;transition:all .2s}.algorithm-card:hover{border-color:#4a90e2;transform:translateY(-2px);box-shadow:0 2px 8px #0000001a}.algorithm-card.selected{background:#e8f0fe;border-color:#4a90e2;box-shadow:0 4px 12px #4a90e24d}.algorithm-card-title{color:#333;margin-bottom:6px;font-size:15px;font-weight:600}.algorithm-card-description{color:#666;font-size:13px;line-height:1.4}.pseudocode-renderer{white-space:pre-wrap;word-break:break-word;background:#f5f5f5;border:1px solid #ddd;border-radius:6px;padding:16px;font-family:Roboto Mono,Courier New,Courier,monospace;font-size:14px;line-height:1.6;overflow-x:auto}.pseudocode-renderer.compact{line-height:1.3}.pseudocode-renderer.compact .pseudocode-line{margin:1px 0}.pseudocode-line{margin:4px 0;display:block}.pseudocode-span{border-radius:3px;padding:2px 4px;transition:background-color .3s,color .3s;display:inline-block}.pseudocode-span.highlighted{color:#000;background-color:#fffacd;font-weight:600;box-shadow:inset 0 0 0 2px gold}.pseudocode-span.has-overlay{flex-direction:column;align-items:center;display:flex;position:relative}.overlay-badge{color:#2e7d32;pointer-events:none;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#4caf5026;border:1px solid #4caf5099;border-radius:6px;margin-top:4px;padding:2px 6px;font-size:12px;font-weight:600;position:static}.overlay-inline{color:#2e7d32;flex-direction:column;align-items:center;gap:6px;margin-top:4px;font-size:12px;font-weight:600;display:flex}.overlay-value{background:#4caf501f;border:1px solid #4caf5066;border-radius:6px;padding:0 6px}.demo-manager{max-width:1200px;margin:0 auto;padding:20px}.manager-view{background:#f9f9f9;border-radius:8px;margin-top:30px;padding:20px}.controls{flex-wrap:wrap;gap:10px;margin:20px 0;display:flex}.controls button{color:#fff;cursor:pointer;background-color:#4a90e2;border:none;border-radius:4px;padding:10px 20px;font-size:14px;transition:background-color .2s}.controls button:hover:not(:disabled){background-color:#357abd}.controls button:disabled{cursor:not-allowed;background-color:#ccc}.controls input[type=number]{border:1px solid #ddd;border-radius:4px;padding:8px;font-size:14px}.array-viz{background:#fff;border:1px solid #ddd;border-radius:8px;margin:0;padding:20px}.array-container{flex-wrap:wrap;justify-content:center;gap:8px;margin:20px 0;padding-top:40px;display:flex;position:relative}.array-item{background:#e8f0fe;border:2px solid #4a90e2;border-radius:4px;justify-content:center;align-items:center;min-width:40px;height:40px;font-weight:600;transition:all .3s;display:flex}.array-item.sorted{background:#d4f1d4;border-color:#28a745}.array-item.current-i{background:#fff3cd;border-color:#ffc107;box-shadow:0 0 0 3px #ffc1074d}.array-item.current-min{background:#ffebee;border-color:#d32f2f;box-shadow:0 0 0 3px #d32f2f4d}.array-item.current-mid{background:#f3e5f5;border-color:#7b1fa2;box-shadow:0 0 0 3px #7b1fa24d}.array-item.eliminated{opacity:.5;background:#f5f5f5;border-color:#999}.array-item.found{color:#fff;background:#4caf50;font-weight:700}.array-item.checked{background:#c8e6c9;border-color:#4caf50}.array-item.current{color:#000;background:#fff3cd;border-color:#ff9800;box-shadow:0 0 0 3px #ff98004d}.array-item.shifted{color:#666;opacity:.7;background:#e0e0e0;border-color:#999}.array-item.transition{color:#1565c0;background:#e3f2fd;border-color:#2196f3}.array-item.tmp-placed{color:#2e7d32;background:#c8e6c9;border-color:#4caf50;font-weight:700}.index-badge{color:#fff;background:#ff9800;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;font-weight:700;display:flex;position:absolute;top:-28px;left:50%;transform:translate(-50%);box-shadow:0 2px 4px #0003}.index-badge.badge-left{background:#2196f3;top:-28px;left:-12px;transform:none}.index-badge.badge-right{background:#f44336;top:-28px;left:auto;right:-12px;transform:none}.index-badge.badge-mid{background:#9c27b0;top:-28px;left:50%;transform:translate(-50%)}.index-badge.badge-i{color:#000;background:#ffc107;top:-28px;left:-12px;transform:none}.index-badge.badge-j{background:#00bcd4;top:-28px;right:-12px;transform:none}.index-badge.badge-min{background:#e91e63;top:-28px;right:50%;transform:translate(-50%)}.index-badge.badge-i-centered{color:#000;background:#ffc107;top:-28px;left:50%;transform:translate(-50%)}.index-badge.badge-j-centered{background:#00bcd4;top:-28px;left:50%;transform:translate(-50%)}@keyframes swap-animation{0%{transform:scale(1)translateY(0)}50%{transform:scale(1.1)translateY(-20px)}to{transform:scale(1)translateY(0)}}.array-item.swapping{animation:1s ease-in-out swap-animation}.array-item.swap-anim{animation:1s forwards swap-slide;position:relative}@keyframes swap-slide{0%{transform:translateX(var(--swap-offset,0)) translateY(0)}30%{transform:translateX(var(--swap-offset,0)) translateY(-18px)}to{transform:translate(0)translateY(0)}}.array-item.move-anim{animation:.4s forwards move-slide;position:relative}@keyframes move-slide{0%{transform:translateX(var(--move-offset,0))}to{transform:translate(0)}}.status{text-align:center;color:#666;margin-top:10px;font-size:14px}.array-index{text-align:center;color:#666;margin-top:4px;font-size:12px;font-weight:400}.completed{color:#28a745;font-weight:600}.step-info{color:#1565c0;text-align:left;background:#e3f2fd;border-left:4px solid #2196f3;border-radius:4px;margin:20px 0;padding:15px;font-size:15px}.step-info.complete{color:#2e7d32;background:#c8e6c9;border-left-color:#4caf50}.target-display button{color:#fff;cursor:pointer;background-color:#4a90e2;border:none;border-radius:4px;padding:10px 20px;font-size:14px;transition:background-color .2s}.target-display button:hover:not(:disabled){background-color:#357abd}.target-display button:disabled{cursor:not-allowed;background-color:#ccc}.target-display input[type=number]{border:1px solid #ddd;border-radius:4px;width:60px;padding:8px;font-size:14px}.target-display{text-align:left;background:#f5f5f5;border:1px solid #ddd;border-radius:6px;flex-wrap:nowrap;align-items:center;gap:12px;margin:15px 0;padding:15px;display:flex}.target-display strong{color:#d32f2f;font-size:18px}.error{color:#c62828;background:#ffebee;border:1px solid #f44336;border-radius:4px;padding:20px}.recursion-viz{margin:0 0 30px}.call-stack{background:#fff;border:1px solid #ddd;border-radius:8px;padding:20px}.call-stack h3{margin-top:0}.stack-frames{flex-direction:column;gap:10px;display:flex}.frame-label{font-weight:600}.frame-result{color:#666;margin-top:6px;font-size:13px}.empty-stack{text-align:center;color:#999;padding:20px;font-style:italic}.result-display{text-align:center;background:#d4f1d4;border-radius:8px;margin-top:20px;padding:15px;font-size:16px}.game-display{text-align:center;margin:30px 0}.game-display h2{margin:10px 0}.guess-controls{justify-content:center;gap:10px;margin:20px 0;display:flex}.guess-controls input{border:1px solid #ddd;border-radius:4px;width:150px;padding:10px;font-size:16px}.guess-controls button{color:#fff;cursor:pointer;background-color:#4a90e2;border:none;border-radius:4px;padding:10px 20px;font-size:16px}.guess-controls button:hover{background-color:#357abd}.hint{text-align:center;border-radius:4px;margin:15px 0;padding:15px;font-size:16px;font-weight:600}.hint.higher,.hint.lower{color:#856404;background:#fff3cd;border:1px solid #ffc107}.hint.success{color:#155724;background:#d4edda;border:1px solid #28a745}.guess-history{background:#f5f5f5;border-radius:4px;margin:20px 0;padding:15px}.guess-history h3{margin:0 0 10px}.guess-history ol{margin:0;padding-left:20px}.guess-history .empty{color:#999;font-style:italic}.won-display{text-align:center;background:#d4f1d4;border:2px solid #4caf50;border-radius:8px;margin:20px 0;padding:30px;font-size:20px}.btn-primary{color:#fff;cursor:pointer;background-color:#4a90e2;border:none;border-radius:4px;margin-top:10px;padding:10px 20px}.btn-primary:hover{background-color:#357abd}.tmp-box{flex-direction:column;align-items:center;gap:8px;display:flex}.tmp-label{color:#666;letter-spacing:.5px;font-size:12px;font-weight:700}.tmp-value{color:#000;background:#fff3cd;border:2px solid #ffc107;border-radius:4px;justify-content:center;align-items:center;min-width:40px;height:40px;font-size:16px;font-weight:600;display:flex;box-shadow:0 2px 4px #ffc10733}.tmp-value.tmp-from-array{animation:.4s tmp-from-array}.tmp-value.tmp-to-array{animation:.5s tmp-to-array}@keyframes tmp-from-array{0%{transform:translateX(var(--tmp-offset-x,0)) translateY(var(--tmp-offset-y,0));opacity:.85}to{opacity:1;transform:translate(0)translateY(0)}}@keyframes tmp-to-array{0%{opacity:1;transform:translate(0)translateY(0)}to{transform:translateX(var(--tmp-target-x,0)) translateY(var(--tmp-target-y,0));opacity:0}}.var-box{flex-direction:column;align-items:center;gap:8px;display:flex}.var-label{color:#666;letter-spacing:.5px;font-size:12px;font-weight:700}.var-value{color:#1565c0;background:#e3f2fd;border:2px solid #2196f3;border-radius:4px;justify-content:center;align-items:center;min-width:40px;height:40px;font-size:16px;font-weight:600;display:flex;box-shadow:0 2px 4px #2196f333}@keyframes fade-out{0%{opacity:1}to{opacity:.3}}@keyframes arrive-from{0%{transform:translate(var(--anim-offset-x,0), var(--anim-offset-y,0));opacity:.7}to{opacity:1;transform:translate(0)}}.demo-student{max-width:1200px;margin:0 auto;padding:20px}.demo-student.solo-mode{text-align:center}.demo-student.solo-mode h1{margin:20px 0}.demo-student.solo-mode p{color:#666;margin-bottom:30px;font-size:16px}.solo-header{border-bottom:2px solid #ddd;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;display:flex}.solo-header h2{margin:0}.shared-header{text-align:center;background:#e3f2fd;border-radius:8px;margin-bottom:30px;padding:20px}.shared-header h2{color:#1976d2;margin:0}.student-view{background:#f9f9f9;border-radius:8px;padding:20px}.btn-switch{color:#fff;cursor:pointer;background-color:#4a90e2;border:none;border-radius:4px;padding:8px 16px;font-size:14px;transition:background-color .2s}.btn-switch:hover{background-color:#357abd}.error{text-align:center;color:#666;background:#f5f5f5;border:1px solid #ddd;border-radius:8px;padding:30px;font-size:16px}.algorithm-student{background:#fff;border-radius:8px;padding:20px}.algorithm-student p{color:#666;font-size:14px}.array-item.current-j{background:#e1f5fe;border-color:#0288d1;box-shadow:0 0 0 3px #0288d14d}.stack-frame{background:#e8f0fe;border-left:4px solid #4a90e2;border-radius:4px;flex-direction:column;gap:6px;padding:12px;font-family:monospace;font-size:14px;display:flex}.stack-frame.returning{background:#c8e6c9;border-left-color:#4caf50}.frame-header{color:#1976d2;font-weight:600}.frame-locals{color:#555;border-left:2px solid #b3e5fc;padding-left:12px}.local-var{font-size:13px}.frame-return{color:#f57f17;border-left:2px solid #fff9c4;padding-left:12px;font-weight:500}.array-label{color:#333;margin:12px 0 8px;font-weight:600}.array-item.in-range{border-width:2px}.array-item.mid-marker{border-color:#9c27b0;box-shadow:0 0 0 2px #9c27b033}.scratch-item{color:#999;background:#f5f5f5;border-color:#bbb}.scratch-item.in-range{color:#1565c0;background:#e3f2fd;border-color:#2196f3}.scratch-item.copied-back{color:#999;background:#e0e0e0;border-color:#999;opacity:1!important}.stack-frame.waiting{background:#fff9c4;border-left-color:#fbc02d}.array-item.anim-fade{animation:.5s forwards fade-out}.array-item.anim-arrive{animation:.5s forwards arrive-from}.index-badge.badge-k-centered{background:#9c27b0;top:-28px;left:50%;transform:translate(-50%)}.index-badge.badge-m-centered{background:#ff5722;top:-28px;left:50%;transform:translate(-50%)}