@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Fira+Code:wght@400;500;700&display=swap";.insertion-screen{--ins-bg: #061016;--ins-surface: #0c1c24;--ins-panel: #102833;--ins-primary: #0df259;--ins-blue: #3b82f6;--ins-amber: #f59e0b;--ins-danger: #ef4444;--ins-sorted: #a855f7;--ins-key: #ec4899;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(--ins-bg) 100%);color:#e7fbe7}.ins-shell{max-width:1200px;margin:0 auto;padding:2.5rem 1rem 3rem}.ins-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)}.ins-subtitle{max-width:64ch;font-size:1rem;color:#e7fbe7d1}.ins-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.is-key{background:#ec489966;border-color:var(--ins-key);box-shadow:0 0 15px #ec48994d;transform:translateY(-20px)}.bar.comparing{background:#f59e0b66;border-color:var(--ins-amber)}.bar.shifting{background:#ef444466;border-color:var(--ins-danger)}.bar.sorted{background:#a855f74d;border-color:var(--ins-sorted)}.bar-index{font-size:.75rem;color:#e7fbe780;font-family:Fira Code,monospace}.state-grid{display:grid;grid-template-columns:repeat(3,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(--ins-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(--ins-primary),var(--ins-blue));width:0%;transition:width .3s ease}.footer-link{display:inline-block;margin-top:2rem;color:var(--ins-primary);text-decoration:none;border-bottom:1px dashed rgba(13,242,89,.4)}