:root{--bg-1: #221106;--bg-2: #3f220d;--panel: #ffefcf;--ink: #2f1d0d;--accent: #d95f18;--accent-2: #8a2e02;--accent-3: #f6c35a;--bar-default: #5e4a2f;--bar-compare: #f4c95d;--bar-swap: #f96e46;--bar-sorted: #7fb069}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font-family:Courier New,Consolas,monospace;background:radial-gradient(circle at 20% -15%,#f39b42 0%,transparent 35%),radial-gradient(circle at 80% 5%,#f6e3af 0%,transparent 30%),linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 100%);padding:clamp(16px,2.6vw,32px)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,transparent 1px,transparent 4px);pointer-events:none}.app-shell{max-width:1200px;margin:0 auto;display:grid;gap:18px}.masthead{color:#fdf2d9;text-align:center;animation:rise .5s ease-out}.chip{display:inline-block;margin:0 0 10px;padding:6px 12px;border:2px solid #f8ca61;letter-spacing:.08em;font-size:.78rem;text-transform:uppercase;background:#10070285}h1{margin:0;font-size:clamp(1.9rem,5vw,3.3rem);text-transform:uppercase;letter-spacing:.08em;text-shadow:4px 4px 0 rgba(0,0,0,.25)}.subtitle{margin:12px auto 0;max-width:60ch;color:#f9ddb5;font-size:clamp(.92rem,2.2vw,1.1rem)}.panel{background:var(--panel);border:4px solid #5e2e0f;box-shadow:0 12px #4e250a,0 20px 36px #00000047;border-radius:14px;padding:clamp(14px,2.2vw,24px)}.control-box{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}.control-item{display:grid;gap:8px}.control-inline{align-items:center;justify-items:center;text-transform:uppercase;letter-spacing:.08em}.label-row{display:flex;align-items:center;justify-content:space-between;gap:10px}label{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.readout{font-size:.77rem;border:2px solid #86522f;background:#fce7bd;padding:4px 8px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;border-radius:0;border:2px solid #6f4422;background:linear-gradient(90deg,#f8ca61,#d85f18);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:#1f1308;border:2px solid #f9cf77;cursor:pointer}input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#1f1308;border:2px solid #f9cf77;cursor:pointer}input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent-2);cursor:pointer}.button-group{grid-column:1 / -1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}button{border:2px solid #2e1808;background:linear-gradient(180deg,#f7c85c,#dc6a1f);color:#2b1306;padding:10px 8px;min-height:45px;font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:transform .16s ease,filter .16s ease}button:hover{transform:translateY(-2px);filter:brightness(1.07)}button:disabled{opacity:.55;cursor:not-allowed;transform:none}#reset{background:linear-gradient(180deg,#ffd7bf,#ff8863)}.stage{display:grid;gap:14px}.stage-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}#statusText{margin:0;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:.75rem}.legend span{display:inline-flex;align-items:center;gap:6px}.dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.5)}.dot-default{background:var(--bar-default)}.dot-compare{background:var(--bar-compare)}.dot-swap{background:var(--bar-swap)}.dot-sorted{background:var(--bar-sorted)}#container{--bar-count: 50;height:min(64vh,520px);display:flex;align-items:flex-end;gap:clamp(2px,.4vw,6px);padding:16px;border:3px solid #6a3b19;background:linear-gradient(180deg,#fde8ba,#f7d08e),repeating-linear-gradient(90deg,rgba(45,24,10,.06) 0,rgba(45,24,10,.06) 1px,transparent 1px,transparent 20px);overflow:hidden}#container>div{flex:1 1 auto;min-width:2px;background:var(--bar-default);border-radius:3px 3px 0 0;transition:background-color .12s linear}.footnote{text-align:center;color:#f6ddb8;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem}@media (max-width: 1050px){.control-box{grid-template-columns:1fr 1fr}.control-inline{grid-column:1 / -1;justify-items:start;grid-auto-flow:column;justify-content:start;gap:12px}.button-group{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width: 700px){.control-box{grid-template-columns:1fr}.button-group{grid-template-columns:repeat(2,minmax(0,1fr))}#container{height:min(52vh,420px);gap:2px;padding:12px}}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}