body.sort-demo-page{
  margin:0;
}

.sort-demo,
.sort-demo *{
  box-sizing:border-box;
}

.sort-demo{
  --sort-body-bg:#f6f9fc;
  --sort-text:#1e2b3c;
  --sort-accent:#2b7fc1;
  --sort-accent-dark:#0a2647;
  --sort-border:#c9ddec;
  --sort-border-strong:#bed9f0;
  --sort-panel-bg:#edf4fc;

  --sort-bar-base-bottom:#3173a5;
  --sort-bar-base-top:#4b9ad8;
  --sort-bar-base-inset:#154256;
  --sort-bar-base-border:#a1c9f0;

  --sort-compare-bottom:#b77a00;
  --sort-compare-top:#f3c44b;
  --sort-compare-inset:#7a4e00;
  --sort-compare-glow:rgba(251,191,36,.26);
  --sort-compare-border:#ffd37a;
  --sort-compare-dot:rgba(251,191,36,.95);

  --sort-swap-bottom:#b42318;
  --sort-swap-top:#ef5350;
  --sort-swap-inset:#7f1d1d;
  --sort-swap-glow:rgba(239,83,80,.28);
  --sort-swap-border:#f5a3a0;
  --sort-swap-dot:rgba(239,83,80,.95);

  --sort-sorted-bottom:#388e3c;
  --sort-sorted-top:#5db462;
  --sort-sorted-inset:#1b5e20;

  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
  background:var(--sort-body-bg);
  color:var(--sort-text);
  line-height:1.45;
  min-height:100vh;
  padding:26px 18px 60px;
}

.sort-demo .container{
  max-width: 1320px;
  margin:0 auto;
}

.sort-demo .page-nav{
  display:flex;
  justify-content:flex-start;
  margin: 0 0 18px 0;
}

.sort-demo .page-nav.bottom{
  margin: 18px 0 0 0;
}

.sort-demo .section-title{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 0 0 10px 0;
  color:var(--sort-accent-dark);
  font-weight:700;
  font-size: 30px;
}

.sort-demo .diamond{
  width:16px;
  height:16px;
  background:var(--sort-accent);
  transform: rotate(45deg);
  border-radius:2px;
  box-shadow: 0 2px 8px rgba(43,127,193,.25);
  flex: 0 0 auto;
}

.sort-demo .subtitle-line{
  border-bottom: 2px dashed #aac7df;
  margin: 0 0 18px 0;
  opacity:.9;
}

.sort-demo .viz-container{
  position: relative;
  background:var(--sort-panel-bg);
  border-radius: 40px;
  padding: 26px 26px 18px;
  border: 2px solid var(--sort-border-strong);
  box-shadow: 0 10px 24px rgba(0,20,40,.08);
}

.sort-demo .bars-wrapper{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap: 12px;
  flex-wrap:wrap;
  min-height: 220px;
  background: rgba(255,255,255,0.65);
  border-radius: 44px;
  padding: 30px 22px;
}

.sort-demo .bar-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width: 54px;
  will-change: transform;
}

.sort-demo .bar{
  width: 54px;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(0deg, var(--sort-bar-base-bottom), var(--sort-bar-base-top));
  box-shadow: 0 -3px 0 var(--sort-bar-base-inset) inset, 0 6px 12px rgba(0, 30, 60, 0.22);
  border: 1px solid var(--sort-bar-base-border);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  color:white;
  font-weight:800;
  font-size:15px;
  padding-bottom:8px;
  position:relative;
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
  user-select:none;
}

.sort-demo .idx{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  justify-content:space-between;
  height: 44px;
  min-width: 46px;
  padding: 4px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color:#3e5770;
  background: #e7f2ff;
  border: 1px solid var(--sort-border);
  border-radius: 10px;
  text-align:center;
  box-shadow: 0 2px 6px rgba(0,20,40,.06);
}

.sort-demo .idxnum{
  font-variant-numeric: tabular-nums;
  font-weight:700;
  line-height: 1;
}

.sort-demo .badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  line-height:1;
  min-height: 14px;
}

.sort-demo .idx .b{
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.9);
  box-shadow: 0 4px 10px rgba(0,20,40,.08);
  letter-spacing:.2px;
}

.sort-demo .idx .b.i{ background:#e6f0ff; border-color:#b9d6ff; color:#1f4b77; }
.sort-demo .idx .b.j{ background:#fff4da; border-color:#ffe2a6; color:#8a5a00; }
.sort-demo .idx .b.min{ background:#e8fbf3; border-color:#bdf1dc; color:#0a6a46; }

.sort-demo .idx.role-i{ background: #dfeeff; border-color:#9ec5ff; }
.sort-demo .idx.role-j{ background: #fff0c8; border-color:#ffd98d; }
.sort-demo .idx.role-min{ background: #dcf7ec; border-color:#9be4c9; }

.sort-demo .bar.compare{
  background: linear-gradient(0deg, var(--sort-compare-bottom), var(--sort-compare-top));
  box-shadow: 0 -3px 0 var(--sort-compare-inset) inset, 0 10px 18px var(--sort-compare-glow);
  border-color:var(--sort-compare-border);
  transform: translateY(-2px);
}

.sort-demo .bar.swap{
  background: linear-gradient(0deg, var(--sort-swap-bottom), var(--sort-swap-top));
  box-shadow: 0 -3px 0 var(--sort-swap-inset) inset, 0 10px 18px var(--sort-swap-glow);
  border-color:var(--sort-swap-border);
  transform: translateY(-2px);
}

.sort-demo .bar.sorted{
  background: linear-gradient(0deg, var(--sort-sorted-bottom), var(--sort-sorted-top));
  box-shadow: 0 -3px 0 var(--sort-sorted-inset) inset, 0 6px 12px rgba(0, 30, 60, 0.18);
}

.sort-demo .viz-controls{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin: 18px 0 10px;
  align-items:center;
  justify-content: space-between;
}

.sort-demo .btn-group{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.sort-demo .viz-btn{
  background:white;
  border: 2px solid #3173a5;
  color:#1f4b77;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 60px;
  cursor:pointer;
  font-size: 16px;
  transition: .12s;
  box-shadow: 0 4px 8px #bdd6ec;
  user-select:none;
}

.sort-demo a.viz-btn{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.sort-demo .viz-btn:hover{ background:#e2efff; border-color:#1a5680; }
.sort-demo .viz-btn:active{ transform: scale(.98); }
.sort-demo .viz-btn:disabled{ opacity:.55; cursor:not-allowed; }

.sort-demo .pill{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 18px;
  background: #1b3b5c;
  color:white;
  padding: 7px 22px;
  border-radius: 40px;
  box-shadow: 0 6px 14px rgba(0,20,40,.12);
  white-space:nowrap;
}

.sort-demo .row2{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items:center;
  justify-content: space-between;
  margin-top: 10px;
}

.sort-demo .inputs{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

.sort-demo .inputs label{
  color:#2c3e66;
  font-weight:700;
  font-size: 14px;
}

.sort-demo input[type="number"]{
  width: 90px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--sort-border);
  background: white;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(0,20,40,.06);
  outline:none;
}

.sort-demo input[type="text"]{
  min-width: 340px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--sort-border);
  background: white;
  font-size: 15px;
  box-shadow: 0 4px 10px rgba(0,20,40,.06);
  outline:none;
}

.sort-demo .speedbox{
  display:flex;
  gap:10px;
  align-items:center;
  background: rgba(255,255,255,0.65);
  border:1px solid var(--sort-border);
  border-radius: 22px;
  padding: 10px 14px;
  box-shadow: 0 4px 10px rgba(0,20,40,.05);
}

.sort-demo .speedbox b{ color:#1f4b77; }

.sort-demo input[type="range"]{ width: 220px; }

.sort-demo .info-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.sort-demo .panel{
  background: white;
  border: 1px solid var(--sort-border);
  border-radius: 24px;
  padding: 14px 16px;
  box-shadow: 0 8px 18px rgba(0,20,40,.06);
}

.sort-demo .panel h3{
  margin:0 0 8px 0;
  font-size: 16px;
  color:#113855;
}

.sort-demo .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13.5px;
  color:#24435f;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.sort-demo .counters{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 6px;
}

.sort-demo .counter{
  background:#f3f9ff;
  border:1px solid var(--sort-border);
  border-radius: 18px;
  padding: 8px 12px;
  box-shadow: 0 4px 10px rgba(0,20,40,.05);
  font-size: 14px;
  color:#254d70;
  font-weight:700;
}

.sort-demo .counter b{ color:#0a2647; font-size: 16px; }

.sort-demo .text-block{
  margin-top: 18px;
  background: white;
  border-radius: 32px;
  box-shadow: 0 20px 40px -10px rgba(0,20,40,0.12);
  overflow:hidden;
  border: 1px solid var(--sort-border);
}

.sort-demo .text-block .hd{
  padding: 18px 22px;
  border-bottom: 1px solid var(--sort-border);
  background: linear-gradient(to right, #f3f9ff, #ffffff);
  font-weight:800;
  color:#0a2647;
  font-size: 18px;
}

.sort-demo .text-block .bd{
  padding: 18px 22px 22px;
}

.sort-demo pre{
  margin: 10px 0 0 0;
  border-radius: 18px;
  overflow:auto;
  box-shadow: inset 0 0 0 1px #2a4055, 0 10px 20px -8px rgba(0,0,0,.18);
}

.sort-demo pre code.hljs{
  border-radius: 18px;
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.55;
}

.sort-demo .muted{ color:#2c3e66; }

.sort-demo .legend{
  margin-top: 10px;
  font-size: 14px;
  color:#254d70;
}

.sort-demo .dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:3px;
  vertical-align:middle;
  margin-right:6px;
}

.sort-demo .dot.cmp{ background: var(--sort-compare-dot); }
.sort-demo .dot.swp{ background: var(--sort-swap-dot); }

@media (max-width: 920px){
  .sort-demo .info-grid{ grid-template-columns: 1fr; }
}