:root{--background:#f8fafc;--foreground:#0f172a;--primary:#6366f1;--primary-light:#818cf8;--secondary:#10b981;--accent:#f59e0b;--danger:#ef4444;--surface:#fff;--surface-light:#f1f5f9;--gradient-start:#6366f1;--gradient-end:#8b5cf6}.dark{--background:#0a0a0f;--foreground:#f0f0f5;--surface:#1a1a2e;--surface-light:#252542}*{box-sizing:border-box}body{background:var(--background);color:var(--foreground);min-height:100vh;font-family:JetBrains Mono,Fira Code,Monaco,monospace}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--surface);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary-light)}.geometric-bg{background-color:var(--background);background-image:radial-gradient(circle at 20%,#6366f10d 0%,#0000 50%),radial-gradient(circle at 80%,#8b5cf60d 0%,#0000 50%),radial-gradient(circle at 50% 80%,#10b98108 0%,#0000 40%),linear-gradient(#0000 0%,#f8fafccc 100%)}.dark .geometric-bg{background-image:radial-gradient(circle at 20%,#6366f11a 0%,#0000 50%),radial-gradient(circle at 80%,#8b5cf61a 0%,#0000 50%),radial-gradient(circle at 50% 80%,#10b9810d 0%,#0000 40%),linear-gradient(#0000 0%,#0a0a0fcc 100%)}.grid-pattern{background-image:linear-gradient(#00000005 1px,#0000 1px),linear-gradient(90deg,#00000005 1px,#0000 1px);background-size:40px 40px}.dark .grid-pattern{background-image:linear-gradient(#6366f108 1px,#0000 1px),linear-gradient(90deg,#6366f108 1px,#0000 1px)}.heap-node{background:linear-gradient(135deg, var(--surface-light), var(--surface)) padding-box, linear-gradient(135deg, var(--gradient-start), var(--gradient-end)) border-box;border:3px solid #0000;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;font-size:1.1rem;font-weight:700;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 4px 20px #0006,0 0 30px #6366f133}.heap-node.highlight-compare{background:linear-gradient(135deg,#fbbf24,#f59e0b) padding-box padding-box,linear-gradient(135deg,#fbbf24,#f59e0b) border-box;transform:translate(-50%,-50%)scale(1.15);box-shadow:0 0 30px #fbbf2499}.heap-node.highlight-swap{background:linear-gradient(135deg,#ef4444,#dc2626) padding-box padding-box,linear-gradient(135deg,#ef4444,#dc2626) border-box;animation:.5s ease-in-out pulse-swap;box-shadow:0 0 30px #ef444499}.heap-node.highlight-insert{background:linear-gradient(135deg,#10b981,#059669) padding-box padding-box,linear-gradient(135deg,#10b981,#059669) border-box;animation:.4s cubic-bezier(.34,1.56,.64,1) pop-in;box-shadow:0 0 30px #10b98199}.heap-node.highlight-peek{background:linear-gradient(135deg,#8b5cf6,#7c3aed) padding-box padding-box,linear-gradient(135deg,#8b5cf6,#7c3aed) border-box;transform:translate(-50%,-50%)scale(1.2);box-shadow:0 0 40px #8b5cf6cc}.heap-node.highlight-remove{background:linear-gradient(135deg,#f43f5e,#e11d48) padding-box padding-box,linear-gradient(135deg,#f43f5e,#e11d48) border-box;animation:.4s ease-in-out shake-remove}@keyframes pulse-swap{0%,to{transform:translate(-50%,-50%)scale(1)}50%{transform:translate(-50%,-50%)scale(1.2)}}@keyframes pop-in{0%{opacity:0;transform:translate(-50%,-50%)scale(0)}50%{transform:translate(-50%,-50%)scale(1.3)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes shake-remove{0%,to{transform:translate(-50%,-50%)rotate(0)}25%{transform:translate(-50%,-50%)rotate(-10deg)}75%{transform:translate(-50%,-50%)rotate(10deg)}}.tree-edge{stroke:var(--primary);stroke-width:3px;stroke-linecap:round;opacity:.6;filter:drop-shadow(0 0 4px #6366f166)}.btn-primary{background:linear-gradient(135deg, var(--gradient-start), var(--gradient-end));color:#fff;cursor:pointer;border:none;border-radius:12px;padding:.75rem 1.5rem;font-weight:600;transition:all .3s;box-shadow:0 4px 15px #6366f166}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 25px #6366f199}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{background:var(--surface-light);color:var(--foreground);border:2px solid var(--primary);cursor:pointer;border-radius:12px;padding:.75rem 1.5rem;font-weight:600;transition:all .3s}.btn-secondary:hover{background:var(--primary);transform:translateY(-2px)}.btn-danger{color:#fff;cursor:pointer;background:linear-gradient(135deg,#dc2626,#991b1b);border:none;border-radius:12px;padding:.75rem 1.5rem;font-weight:600;transition:all .3s;box-shadow:0 4px 15px #ef444466}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 6px 25px #ef444499}.btn-success{color:#ecfdf5;cursor:pointer;background:linear-gradient(135deg,#047857,#065f46);border:none;border-radius:12px;padding:.75rem 1.5rem;font-weight:600;transition:all .3s;box-shadow:0 4px 15px #10b98166}.btn-success:hover{transform:translateY(-2px);box-shadow:0 6px 25px #10b98199}.game-card{background:linear-gradient(145deg,#fffffff2,#f8fafcf2);border:1px solid #6366f11a;border-radius:20px;padding:2rem;transition:all .4s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;box-shadow:0 4px 6px #0000000d}.dark .game-card{background:linear-gradient(145deg, var(--surface), var(--surface-light));box-shadow:none;border:1px solid #6366f133}.game-card:before{content:"";background:linear-gradient(90deg, var(--gradient-start), var(--gradient-end));opacity:0;height:4px;transition:opacity .3s;position:absolute;top:0;left:0;right:0}.game-card:hover{border-color:var(--primary);transform:translateY(-8px);box-shadow:0 20px 60px #6366f133}.game-card:hover:before{opacity:1}.input-field{background:var(--surface);border:2px solid var(--surface-light);color:var(--foreground);border-radius:12px;width:100%;padding:.75rem 1rem;font-family:inherit;font-size:1rem;transition:all .3s}.input-field:focus{border-color:var(--primary);outline:none;box-shadow:0 0 20px #6366f14d}.score-display{background:linear-gradient(135deg, var(--surface), var(--surface-light));border:2px solid var(--secondary);color:var(--secondary);border-radius:16px;padding:1rem 2rem;font-size:1.5rem;font-weight:700;box-shadow:0 0 30px #10b98133}.toggle-container{background:var(--surface);border:2px solid var(--surface-light);border-radius:50px;align-items:center;gap:1rem;padding:.5rem;display:flex}.toggle-option{cursor:pointer;border-radius:50px;padding:.5rem 1.5rem;font-weight:600;transition:all .3s}.toggle-option.active{background:linear-gradient(135deg, var(--gradient-start), var(--gradient-end));color:#fff;box-shadow:0 4px 15px #6366f166}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.floating{animation:3s ease-in-out infinite float}.glow-text{text-shadow:0 0 20px #6366f199,0 0 40px #6366f166,0 0 60px #6366f133}.heap-container{background:linear-gradient(145deg,#1a1a2ecc,#252542cc);border:2px solid #6366f14d;border-radius:20px;position:relative;overflow:hidden}.heap-container:before{content:"";pointer-events:none;background:radial-gradient(circle at 30% 30%,#6366f11a 0%,#0000 50%),radial-gradient(circle at 70% 70%,#8b5cf61a 0%,#0000 50%);position:absolute;inset:0}.median-heap-box{background:linear-gradient(145deg, var(--surface), var(--surface-light));border:2px solid var(--surface-light);border-radius:16px;min-height:300px;padding:1.5rem;position:relative}.median-heap-box.left-heap{border-color:#8b5cf680;box-shadow:0 0 30px #8b5cf61a}.median-heap-box.right-heap{border-color:#3b82f680;box-shadow:0 0 30px #3b82f61a}.median-arrow{background:linear-gradient(90deg, var(--primary), var(--secondary));width:60px;height:4px;position:relative}.median-arrow:after{content:"";border-left:12px solid var(--secondary);border-top:8px solid #0000;border-bottom:8px solid #0000;position:absolute;top:50%;right:-8px;transform:translateY(-50%)}.timer{color:var(--accent);font-variant-numeric:tabular-nums;font-size:2rem;font-weight:700}.timer.warning{color:var(--danger);animation:.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.method-card{background:var(--surface);border:2px solid var(--surface-light);cursor:pointer;border-radius:16px;padding:1.5rem;transition:all .3s}.method-card:hover{border-color:var(--primary);transform:translateY(-4px)}.method-card.selected{border-color:var(--secondary);background:#10b9811a}.method-card.optimal{border-color:var(--accent);background:#f59e0b1a}.answer-option{background:var(--surface);border:2px solid var(--surface-light);cursor:pointer;border-radius:12px;padding:1rem 2rem;font-size:1.25rem;font-weight:600;transition:all .3s}.answer-option:hover{border-color:var(--primary);background:#6366f11a}.answer-option.correct{border-color:var(--secondary);background:#10b98133}.answer-option.incorrect{border-color:var(--danger);background:#ef444433}.step-indicator{align-items:center;gap:.5rem;display:flex}.step-dot{background:var(--surface-light);border-radius:50%;width:12px;height:12px;transition:all .3s}.step-dot.active{background:var(--primary);box-shadow:0 0 10px var(--primary)}.step-dot.completed{background:var(--secondary)}.stream-number{background:linear-gradient(135deg, var(--gradient-start), var(--gradient-end));border-radius:12px;justify-content:center;align-items:center;width:50px;height:50px;font-size:1.25rem;font-weight:700;animation:.5s cubic-bezier(.34,1.56,.64,1) slide-in;display:inline-flex}@keyframes slide-in{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@media (max-width:768px){.heap-node{width:44px;height:44px;font-size:.9rem}}