@import url('../Stack/style.css');
.workspace{grid-template-columns:280px minmax(0,1fr)}select,textarea{width:100%;font:inherit;font-size:13px;background:#fbfdfb;color:inherit;border:1px solid #cddfce;border-radius:6px;padding:11px;min-width:0}textarea{resize:vertical;line-height:1.6}.wide{margin-top:10px}.legend{display:flex;flex-wrap:wrap;gap:15px;font-size:11px;color:#718174;margin:10px 0 24px}.key{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}.unsorted{background:#b4cfaa}.compare{background:#e8bd60}.swap{background:#cd8570}.pivot{background:#9a8abb}.fixed{background:#398247}.chart-scroll{overflow:auto;border:1px solid #e2ebdc;background:repeating-linear-gradient(to top,#f7faf4 0,#f7faf4 79px,#e7eee1 80px);border-radius:9px;padding:15px 16px 0}#chart-container{position:relative;height:350px;min-width:300px;border-bottom:2px solid #a1bc95;margin-bottom:34px}.bar{position:absolute;bottom:0;width:calc(100% / var(--n) - 7px);left:0;transform:translateX(0);background:#b4cfaa;border-radius:5px 5px 0 0;transition:background-color .12s;box-shadow:inset 0 1px 0 #ffffff70}.bar.fixed{background:#398247}.bar.pivot{background:#9a8abb}.bar.compare{background:#e8bd60}.bar.swap{background:#cd8570}.bar-label{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);font-size:11px;font-weight:600;color:#486d47}.bar-index{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);font:10px monospace;color:#8c9c83}.chart-note{font-size:11px}.playback{display:flex;gap:7px;flex-wrap:wrap;margin:24px 0 12px}.playback button{flex:1;white-space:nowrap}.bottom{display:grid;grid-template-columns:1fr 1fr;gap:20px}.bottom h2{margin-top:10px}#code{list-style-position:inside;padding:0;font:12px/1.8 Consolas,monospace;color:#6d8069}#code li{padding:9px 12px;border-radius:5px;margin:3px 0;background:#f7faf4}#code li.active{background:#e4efd9;color:#2e7135;border-left:3px solid #4caf50}.facts{display:grid;gap:12px;margin:20px 0}.facts div{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #e7eee2;padding-bottom:9px;font-size:12px}.facts span{color:#7b8c74}.facts strong{text-align:right}a{color:#2e7d32}#input-message:empty{display:none}.actions input{width:100%;flex:1}.actions button{flex:0}.stats strong{font-size:23px}@media(max-width:800px){.workspace,.bottom{grid-template-columns:1fr}#chart-container{height:280px}.playback button{padding:10px}.legend{gap:10px}.chart-scroll{padding-inline:10px}}@media(prefers-reduced-motion:reduce){.bar{transition:none}}
@media(max-width:800px){#chart-container{height:320px}}