:root{color-scheme:dark;--accent:#2dd4bf;--grad:linear-gradient(92deg,#2ee6a6,#38bdf8 60%,#818cf8);--cmp:#fbbf24;--swap:#fb7185;--pivot:#c084fc;--sorted:#34d399}*{box-sizing:border-box}body{background:radial-gradient(1100px 700px at 50% -10%,#0c1320 0,transparent 55%),#05070a;color:#e8edf1;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;min-height:100vh;-webkit-font-smoothing:antialiased}.sort{margin:0 auto;max-width:1120px;padding:26px 18px 56px}.sort__bar{align-items:center;display:flex;gap:14px;margin-bottom:18px}.sort__title{background:var(--grad);-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0;text-align:center;-webkit-text-fill-color:transparent}.sort__back{margin-right:auto}.sort__back,.sort__home{color:#9fb0bb;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}.sort__home{margin-left:auto}.sort__back:hover,.sort__home:hover{color:#67e8f9}.sort__stage{background:linear-gradient(180deg,hsla(0,0%,100%,.04),hsla(0,0%,100%,.012)),#070b11;border:1px solid hsla(0,0%,100%,.1);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.42),inset 0 1px 0 hsla(0,0%,100%,.05);overflow:hidden;position:relative}.sort__canvas{display:block;height:clamp(260px,50vh,520px);width:100%}.sort__stats{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 14px}.stat{background:hsla(0,0%,100%,.035);border:1px solid hsla(0,0%,100%,.09);border-radius:11px;display:flex;flex:1 1 120px;flex-direction:column;gap:2px;min-width:0;padding:9px 13px}.stat--wide{flex:1.4 1 160px}.stat__k{color:#7d909c;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.stat__v{color:#e8edf1;font-size:17px;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.01em}.stat--status .stat__v{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.sort__controls{align-items:flex-end;background:linear-gradient(180deg,rgba(21,29,40,.6),rgba(12,17,24,.6));border:1px solid hsla(0,0%,100%,.09);border-radius:14px;display:flex;flex-wrap:wrap;gap:12px 16px;padding:14px 15px}.ctl{display:flex;flex-direction:column;gap:7px;min-width:0}.ctl__lbl{color:#8aa0ad;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.ctl__lbl b{color:#b9d4dd;font-variant-numeric:tabular-nums}.ctl__sel{background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.16);border-radius:9px;color:#e8edf1;font:inherit;font-size:13px;font-weight:600;padding:9px 11px}.ctl__range,.ctl__sel{accent-color:var(--accent);cursor:pointer;width:100%}.ctl__range{min-width:150px}.ctl--btns{flex-direction:row;flex-wrap:wrap;gap:9px;margin-left:auto}.btn{background:rgba(45,212,191,.13);border:1px solid rgba(45,212,191,.42);border-radius:9px;color:#d6fbf3;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;padding:9px 15px;transition:background .14s,border-color .14s,color .14s;white-space:nowrap}.btn:hover{background:rgba(45,212,191,.24)}.btn--ghost{background:hsla(0,0%,100%,.04);border-color:hsla(0,0%,100%,.16);color:#b9c6cf}.btn--ghost:hover{background:hsla(0,0%,100%,.09)}.btn[aria-pressed=true]{background:rgba(45,212,191,.2);border-color:rgba(45,212,191,.55);color:#d6fbf3}.sort__legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 2px 0}.leg{align-items:center;color:#9fb0bb;display:inline-flex;font-size:12px;font-weight:600;gap:7px}.sw{border-radius:4px;box-shadow:0 0 8px currentColor;height:13px;width:13px}.sw--cmp{background:var(--cmp);color:var(--cmp)}.sw--swap{background:var(--swap);color:var(--swap)}.sw--pivot{background:var(--pivot);color:var(--pivot)}.sw--sorted{background:var(--sorted);color:var(--sorted)}.sort__hint{color:#71808a;font-size:12.5px;line-height:1.7;margin-top:16px}.sort__hint strong{color:#c7d4dc;font-weight:700}.sort__hint em{color:#9fb0bb;font-style:italic}@media (max-width:640px){.sort{padding:18px 13px 44px}.sort__title{font-size:18px}.sort__back,.sort__home{font-size:13px}.sort__controls{gap:12px}.ctl{flex:1 1 100%}.ctl--btns{margin-left:0}.ctl--btns .btn{flex:1 1 auto;text-align:center}.ctl--btns .btn,.ctl__sel{min-height:44px}.ctl__range{min-width:0}.stat{flex:1 1 calc(50% - 5px)}}@media (max-width:380px){.stat{flex:1 1 100%}}