:root{--bg:#f7efe6;--panel:#fffaf4;--ink:#2d2420;--muted:#8a776b;--line:#ead9c8;--accent:#ff7a59;--accent-ink:#fff;--compare:#ffb703;--moving:#ef476f;--marked:#8e6cff;--sorted:#2ec4b6;--code-bg:#1e1b26;--code-line:#2a2634;--radius:16px;color:var(--ink);font-family:Nunito,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);margin:0}button,select,input{font:inherit;color:inherit}.mono{font-family:JetBrains Mono,ui-monospace,monospace}.small{font-size:12px}.muted{color:var(--muted)}#app{flex-direction:column;gap:12px;max-width:1500px;margin:0 auto;padding:14px 18px 24px;display:flex}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-mark{color:#fff;background:var(--accent);border-radius:14px;place-items:center;width:46px;height:46px;display:grid;box-shadow:0 4px #d9573a}.brand h1{letter-spacing:-.02em;margin:0;font-size:22px;font-weight:900}.brand p{color:var(--muted);margin:0;font-size:13px;font-weight:700}.tabs{background:var(--panel);border:1px solid var(--line);border-radius:999px;flex-wrap:wrap;gap:4px;padding:4px;display:flex}.tabs button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:8px 16px;font-weight:800;transition:background .15s,color .15s}.tabs button:hover{color:var(--ink)}.tabs button.active{background:var(--ink);color:#fff}.lucide{stroke-width:2.25px;flex:none;width:18px;height:18px}.brand-mark .lucide{width:26px;height:26px}.lucide.inline{vertical-align:-2px;width:14px;height:14px}.intro{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:18px 28px;padding:14px 52px 14px 18px;display:grid;position:relative}.intro[hidden]{display:none}.intro h2{align-items:center;gap:8px;margin:0 0 4px;font-size:15px;font-weight:900;display:flex}.intro h2 .lucide{color:var(--accent)}.intro p{color:#5c4d44;margin:0;font-size:14px;font-weight:600;line-height:1.5}.intro-steps{flex-direction:column;gap:6px;margin:0;padding:0;font-size:14px;font-weight:600;list-style:none;display:flex}.intro-steps li{align-items:center;gap:10px;display:flex}.intro-steps .num{background:var(--accent);color:#fff;border-radius:50%;flex:none;place-items:center;width:22px;height:22px;font-size:12px;font-weight:900;display:grid}kbd{border:1px solid var(--line);background:#fff;border-bottom-width:2px;border-radius:6px;padding:1px 6px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px}.intro-close{width:30px;height:30px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;display:grid;position:absolute;top:10px;right:10px}.intro-close:hover{color:var(--ink);background:#fff3e6}.intro-close .lucide{width:16px;height:16px}.stage-wrap{border:1px solid var(--line);background:radial-gradient(at 50% 30%,#fff8ee 0%,#fbe3c8 55%,#f2cfa9 100%);border-radius:24px;height:clamp(320px,50vh,560px);position:relative;overflow:hidden;box-shadow:inset 0 -40px 80px #b46e3c1f}#stage{position:absolute;inset:0}#stage canvas{cursor:grab;width:100%;height:100%;display:block}#stage canvas:active{cursor:grabbing}.narration{border:1px solid var(--line);text-align:center;pointer-events:none;background:#ffffffeb;border-radius:999px;max-width:min(720px,100% - 32px);padding:9px 18px;font-size:15px;font-weight:800;position:absolute;top:14px;left:50%;transform:translate(-50%);box-shadow:0 6px 20px #78461e1f}.narration.done{background:var(--sorted);color:#fff;border-color:#0000}.legend{color:var(--muted);pointer-events:none;flex-wrap:wrap;gap:12px;font-size:12px;font-weight:800;display:flex;position:absolute;bottom:12px;left:14px}.legend span{align-items:center;gap:5px;display:flex}.legend i{border:3px solid var(--c);border-radius:50%;width:12px;height:12px}.legend i.pad{background:#ffd9a0;border:0}.view-btn{align-items:center;gap:6px;display:flex;position:absolute;top:12px;right:12px}.hint .lucide{vertical-align:-2px;width:13px;height:13px;margin-right:4px}.hint{color:var(--muted);pointer-events:none;font-size:12px;font-weight:700;position:absolute;bottom:12px;right:14px}.controls{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:18px;padding:10px 14px;display:flex}.transport{align-items:center;gap:6px;display:flex}.icon-btn,.ghost-btn,.play-btn{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:12px;font-weight:800;transition:transform 80ms,background .15s}.icon-btn,.play-btn{place-items:center;display:grid}.icon-btn{width:38px;height:38px}.ghost-btn{align-items:center;gap:6px;padding:8px 12px;font-size:14px;display:inline-flex}.ghost-btn .lucide{width:16px;height:16px}.icon-btn:hover,.ghost-btn:hover{background:#fff3e6}.icon-btn:active,.ghost-btn:active,.play-btn:active{transform:translateY(1px)}.play-btn .lucide{fill:currentColor;width:22px;height:22px}.play-btn .ic-replay{fill:none}.play-btn .lucide{display:none}.play-btn[data-state=play] .ic-play,.play-btn[data-state=pause] .ic-pause,.play-btn[data-state=replay] .ic-replay{display:block}.play-btn{background:var(--accent);width:52px;height:46px;color:var(--accent-ink);border-color:#0000;box-shadow:0 3px #d9573a}.scrubber{flex:220px;align-items:center;gap:10px;display:flex}.scrubber input{flex:1}#step-count{color:var(--muted);text-align:right;min-width:70px;font-size:12px}.field{align-items:center;gap:8px;font-size:14px;font-weight:800;display:flex}.field .lucide{color:var(--muted)}.field select{border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 8px}#speed{width:110px}#speed-label{min-width:78px;color:var(--muted)}.btn-row{gap:6px;display:flex}input[type=range]{accent-color:var(--accent)}.bottom{grid-template-columns:minmax(0,1fr) 320px;gap:12px;display:grid}.code-card{background:var(--code-bg);border-radius:var(--radius);flex-direction:column;display:flex;overflow:hidden;box-shadow:0 10px 30px #28140a26}.code-head{color:#cfc8dc;background:#17151d;align-items:center;gap:12px;padding:10px 14px;font-size:13px;display:flex}.code-icon{color:#8c84a0;width:15px;height:15px}.code-head #code-line{color:#8c84a0;margin-left:auto}.dots{gap:6px;display:flex}.dots i{background:#ff5f57;border-radius:50%;width:11px;height:11px}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}.code{--hl-dur:.15s;color:#d8d2e6;max-height:440px;padding:10px 0;font-family:JetBrains Mono,ui-monospace,monospace;font-size:13.5px;line-height:1.7;position:relative;overflow:auto}.code-bar{border-left:4px solid var(--compare);height:0;transition:transform var(--hl-dur) ease-out;pointer-events:none;background:linear-gradient(90deg,#ffb70347,#ffb70314);position:absolute;top:0;left:0;right:0}.code-bar:before{content:"▶";color:var(--compare);font-size:10px;position:absolute;top:50%;left:4px;transform:translateY(-50%)}.code-bar.pulse{animation:.35s ease-out pulse}@keyframes pulse{0%{background-color:#ffb70359}to{background-color:#0000}}.code-line{white-space:pre;padding-right:16px;display:flex;position:relative}.code-line .ln{text-align:right;color:#5d566e;-webkit-user-select:none;user-select:none;flex:none;width:52px;padding-right:18px}.code-line.active .ln{color:var(--compare);font-weight:700}.code-line.active .src{filter:brightness(1.2)}.tk-kw{color:#ff7eb6}.tk-fn{color:#7dd3fc}.tk-id{color:#e4def0}.tk-num{color:#ffb86b}.tk-op{color:#a59cbc}.tk-comment{color:#6f8f6f;font-style:italic}.info{flex-direction:column;gap:12px;display:flex}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}.card h3{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);align-items:center;gap:6px;margin:0 0 10px;font-size:13px;display:flex}.vars{flex-wrap:wrap;gap:6px;min-height:30px;display:flex}.var{border:1px solid var(--line);border-radius:8px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:13px;display:inline-flex;overflow:hidden}.var b{background:var(--ink);color:#fff;padding:3px 7px;font-weight:600}.var span{background:#fff;padding:3px 8px}.var.changed span{animation:.6s ease-out flash}@keyframes flash{0%{background:#ffe08a}to{background:#fff}}.stats{grid-template-columns:1fr 1fr;gap:10px;display:grid}.stats div{flex-direction:column;display:flex}.stats b{font-size:28px;font-weight:900;line-height:1.1}.stats span{color:var(--muted);font-size:12px;font-weight:800}.blurb{margin:0 0 12px;font-size:14px;font-weight:600;line-height:1.5}.complexity{border-collapse:collapse;text-align:center;width:100%;font-size:12px}.complexity th{color:var(--muted);padding-bottom:4px;font-weight:800}.complexity td{border:1px solid var(--line);background:#fff;padding:5px 2px;font-family:JetBrains Mono,ui-monospace,monospace;font-weight:600}@media (width<=900px){.intro,.bottom{grid-template-columns:1fr}.hint{display:none}}@media (width<=600px){#app{padding:10px 12px 20px}.narration{border-radius:14px;font-size:13px}.legend{display:none}}.card h3 .lucide{width:15px;height:15px}