:root{--bg-0:#0c1412;--bg-1:#13201c;--ink:#e8f2ec;--muted:#9bb5a8;--accent:#3ecf8e;--accent-2:#f0b429;--danger:#ff6b5a;--bar:#2a9d75;--bar-compare:#f0b429;--bar-swap:#ff6b5a;--bar-sorted:#5eead4;--line:#e8f2ec1f;--panel:#13201cb8;--font-display:"Syne", sans-serif;--font-body:"DM Sans", sans-serif}*,:before,:after{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:var(--font-body);color:var(--ink);background:radial-gradient(ellipse 80% 50% at 10% -10%, #3ecf8e38, transparent 55%), radial-gradient(ellipse 60% 40% at 90% 0%, #f0b4291f, transparent 50%), linear-gradient(165deg, var(--bg-0), var(--bg-1) 45%, #0a1210);min-height:100vh}#app{min-height:100vh}.page{flex-direction:column;gap:1.5rem;width:min(1100px,100% - 2rem);margin:0 auto;padding:2.5rem 0 3rem;animation:.7s both fade-up;display:flex}.hero{text-align:left}.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .35rem;font-size:.8rem}.brand{font-family:var(--font-display);letter-spacing:-.03em;background:linear-gradient(120deg, #e8f2ec 20%, var(--accent) 75%, var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(2.6rem,7vw,4.2rem);font-weight:800;line-height:.95;animation:.9s cubic-bezier(.2,.8,.2,1) both brand-in}.tagline{max-width:34rem;color:var(--muted);margin:.75rem 0 0;font-size:1.05rem;line-height:1.45}.toolbar{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:1rem;flex-wrap:wrap;align-items:end;gap:1rem 1.25rem;padding:1rem 1.1rem;animation:.8s .1s both fade-up;display:flex}.field{flex-direction:column;flex:1;gap:.4rem;min-width:9rem;display:flex}.field span{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:.78rem}.field strong{color:var(--ink);font-weight:600}select,input[type=range],button{font:inherit}select{appearance:none;color:var(--ink);border:1px solid var(--line);background:#0f1a17;border-radius:.55rem;padding:.55rem .75rem}input[type=range]{width:100%;accent-color:var(--accent)}.actions{flex-wrap:wrap;gap:.55rem;display:flex}button{border:1px solid var(--line);color:var(--ink);cursor:pointer;background:0 0;border-radius:999px;padding:.55rem 1rem;transition:transform .15s,background .15s,border-color .15s}button:hover:not(:disabled){border-color:#3ecf8e73;transform:translateY(-1px)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);color:#062016;border-color:#0000;font-weight:700}.stage{border:1px solid var(--line);background:linear-gradient(#ffffff08,#0000 40%),#080e0c8c;border-radius:1rem;min-height:min(52vh,420px);padding:1rem .75rem .5rem;animation:.9s .18s both fade-up}.bars{align-items:flex-end;gap:2px;width:100%;height:min(48vh,380px);display:flex}.bar{background:linear-gradient(180deg, #4ad49a, var(--bar));border-radius:4px 4px 0 0;flex:1 1 0;min-width:2px;transition:height 80ms linear,background .12s,opacity .12s}.bar.comparing{background:linear-gradient(180deg, #ffd56a, var(--bar-compare))}.bar.swapping{background:linear-gradient(180deg, #ff8f82, var(--bar-swap))}.bar.sorted{background:linear-gradient(180deg, #99f6e4, var(--bar-sorted))}.legend{color:var(--muted);flex-wrap:wrap;gap:1rem 1.5rem;margin:0;font-size:.9rem;display:flex}.legend span{align-items:center;gap:.45rem;display:inline-flex}.swatch{border-radius:999px;width:.75rem;height:.75rem;display:inline-block}.swatch.comparing{background:var(--bar-compare)}.swatch.swapping{background:var(--bar-swap)}.swatch.sorted{background:var(--bar-sorted)}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes brand-in{0%{opacity:0;letter-spacing:.08em;filter:blur(4px)}to{opacity:1;letter-spacing:-.03em;filter:blur()}}@media (width<=720px){.page{padding-top:1.5rem}.toolbar{padding:.9rem}.actions{width:100%}.actions button{flex:1}}