@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Fira+Code:wght@400;500;700&display=swap";.bubble-screen{--bubble-bg: #061016;--bubble-surface: #0c1c24;--bubble-panel: #102833;--bubble-primary: #0df259;--bubble-blue: #3b82f6;--bubble-amber: #f59e0b;--bubble-danger: #ef4444;--bubble-sorted: #a855f7;min-height:100vh;font-family:Chakra Petch,sans-serif;background:radial-gradient(circle at 10% 10%,rgba(13,242,89,.12),transparent 45%),radial-gradient(circle at 85% 20%,rgba(59,130,246,.14),transparent 40%),linear-gradient(135deg,#050b11 0%,var(--bubble-bg) 100%);color:#e7fbe7}.bubble-shell{max-width:1200px;margin:0 auto;padding:2.5rem 1rem 3rem}.bubble-title{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.05;font-weight:700;letter-spacing:.02em;text-shadow:0 0 30px rgba(13,242,89,.28)}.bubble-subtitle{max-width:64ch;font-size:1rem;color:#e7fbe7d1}.bubble-grid{display:grid;gap:1rem;grid-template-columns:repeat(12,minmax(0,1fr))}.card{background:linear-gradient(160deg,#102833e6,#08141adb);border:1px solid rgba(13,242,89,.18);border-radius:1rem;box-shadow:0 18px 34px #00000047;padding:1.25rem}.code-card,.visual-card{grid-column:span 12}@media(min-width:1024px){.code-card,.visual-card{grid-column:span 6}}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.badge{display:inline-flex;align-items:center;border:1px solid rgba(13,242,89,.25);background:#0df2591a;border-radius:999px;padding:.2rem .6rem;font-size:.72rem;font-family:Fira Code,monospace;letter-spacing:.04em}.code-panel{background:#040a0ed9;border:1px solid rgba(13,242,89,.14);border-radius:.8rem;padding:.75rem;font-family:Fira Code,monospace;font-size:.85rem;overflow-x:auto}.code-row{display:grid;grid-template-columns:2rem 1fr;gap:.8rem;padding:.25rem .5rem;border-radius:.4rem;color:#e7fbe7cc;transition:all .2s ease}.code-row.active{background:linear-gradient(90deg,#0df25933,#0df2590d);outline:1px solid rgba(13,242,89,.3);transform:translate(4px);color:#fff}.line-num{color:#e7fbe759;text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none}.array-container{display:flex;align-items:flex-end;justify-content:center;gap:.75rem;height:180px;margin:2rem 0;padding-bottom:1.5rem;border-bottom:1px solid rgba(13,242,89,.1)}.bar-wrapper{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:45px;transition:all .4s cubic-bezier(.4,0,.2,1)}.bar{width:100%;background:#3b82f64d;border:1px solid rgba(59,130,246,.5);border-radius:.4rem .4rem 0 0;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.5rem;font-family:Fira Code,monospace;font-weight:700;color:#fff}.bar.comparing{background:#f59e0b66;border-color:var(--bubble-amber);box-shadow:0 0 15px #f59e0b4d;transform:scale(1.05)}.bar.swapping{background:#ef444466;border-color:var(--bubble-danger);box-shadow:0 0 15px #ef44444d}.bar.sorted{background:#a855f74d;border-color:var(--bubble-sorted)}.bar-index{font-size:.75rem;color:#e7fbe780;font-family:Fira Code,monospace}.state-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:1rem}.state-item{padding:.75rem;border-radius:.8rem;background:#0df2590d;border:1px solid rgba(13,242,89,.1);text-align:center}.state-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#e7fbe799;margin-bottom:.25rem}.state-value{font-family:Fira Code,monospace;font-size:1.25rem;font-weight:700;color:var(--bubble-primary)}.controls{margin-top:2rem;display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.btn{border:1px solid rgba(13,242,89,.3);background:#0df2591a;color:#e7fbe7;padding:.6rem 1.2rem;border-radius:.75rem;font-weight:600;transition:all .2s ease;cursor:pointer}.btn:hover:not(:disabled){background:#0df25933;transform:translateY(-1px);box-shadow:0 4px 12px #0df25933}.btn:disabled{opacity:.3;cursor:not-allowed}.step-msg{margin-top:1.5rem;padding:1rem;border-radius:.8rem;background:#3b82f61a;border:1px solid rgba(59,130,246,.25);min-height:80px;display:flex;align-items:center}.progress-container{margin-top:1rem;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,var(--bubble-primary),var(--bubble-blue));width:0%;transition:width .3s ease}.footer-link{display:inline-block;margin-top:2rem;color:var(--bubble-primary);text-decoration:none;border-bottom:1px dashed rgba(13,242,89,.4)}