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