.viz{--r:12px;background:var(--viz-bg);border:1px solid var(--viz-border);border-radius:var(--r);color:var(--viz-text);margin:1.5rem 0;font-size:.95rem;overflow:hidden}.viz *{box-sizing:border-box}.viz-head{border-bottom:1px solid var(--viz-border);background:var(--viz-surface);justify-content:space-between;align-items:center;gap:.75rem;padding:.65rem 1rem;display:flex}.viz-title{align-items:center;gap:.5rem;font-size:.95rem;font-weight:600;display:flex}.viz-title:before{content:"";background:var(--viz-active);border-radius:50%;width:8px;height:8px}.viz-tag{text-transform:uppercase;letter-spacing:.06em;color:var(--viz-muted);font-size:.72rem}.viz-body{padding:1rem}.viz-stage{justify-content:center;align-items:center;min-height:80px;padding:.5rem 0;display:flex;overflow-x:auto}.viz-stage svg{max-width:100%;height:auto}.viz-inputs{border-bottom:1px solid var(--viz-border);background:var(--viz-surface);flex-wrap:wrap;align-items:end;gap:.6rem 1rem;padding:.75rem 1rem;display:flex}.viz-inputs label{color:var(--viz-muted);text-transform:uppercase;letter-spacing:.05em;flex-direction:column;gap:.25rem;font-size:.75rem;display:flex}.viz-inputs input,.viz-inputs select{font:inherit;text-transform:none;letter-spacing:0;color:var(--viz-text);background:var(--viz-bg);border:1px solid var(--viz-border);border-radius:8px;min-width:5rem;padding:.35rem .55rem;font-size:.9rem}.viz-inputs input:focus,.viz-inputs select:focus{outline:2px solid var(--viz-active);outline-offset:1px}.viz-error{color:var(--viz-bad);padding:.25rem 1rem .75rem;font-size:.85rem}.viz-btn{font:inherit;cursor:pointer;color:var(--viz-text);background:var(--viz-cell);border:1px solid var(--viz-border);border-radius:8px;align-items:center;gap:.35rem;padding:.35rem .7rem;font-size:.85rem;line-height:1.2;display:inline-flex}.viz-btn:hover:not(:disabled){border-color:var(--viz-active)}.viz-btn:disabled{opacity:.4;cursor:default}.viz-btn.primary{background:var(--viz-active);border-color:var(--viz-active);color:#fff}.viz-controls{border-top:1px solid var(--viz-border);background:var(--viz-surface);flex-wrap:wrap;align-items:center;gap:.5rem;padding:.65rem 1rem;display:flex}.viz-controls input[type=range]{min-width:120px;accent-color:var(--viz-active);flex:1}.viz-step{font-variant-numeric:tabular-nums;color:var(--viz-muted);text-align:right;min-width:4.5rem;font-size:.8rem}.viz-speed{color:var(--viz-muted);align-items:center;gap:.3rem;font-size:.8rem;display:flex}.viz-speed select{font:inherit;background:var(--viz-bg);color:var(--viz-text);border:1px solid var(--viz-border);border-radius:6px;padding:.15rem .3rem;font-size:.8rem}.viz-note{background:var(--viz-surface);border:1px solid var(--viz-border);border-radius:8px;min-height:2.6rem;margin:.75rem 0 0;padding:.6rem .85rem;font-size:.92rem;line-height:1.5}.viz-note code{font-size:.85em}.arr{flex-direction:column;align-items:flex-start;gap:4px;padding:0 .5rem;display:inline-flex}.arr-row{gap:6px;display:flex;position:relative}.arr.vertical .arr-row{flex-direction:column-reverse}.cell{--c:var(--viz-cell);background:var(--c);min-width:2.6rem;height:2.6rem;font-family:var(--sl-font-mono);border:2px solid #0000;border-radius:8px;place-items:center;padding:0 .4rem;font-size:.95rem;transition:background .25s,border-color .25s,opacity .25s,transform .25s;display:grid}.cell.s-active{background:var(--viz-active-soft);border-color:var(--viz-active);transform:translateY(-3px)}.cell.s-window{background:var(--viz-window);border-color:var(--viz-window-line)}.cell.s-done{background:var(--viz-done-soft);border-color:var(--viz-done)}.cell.s-bad{background:var(--viz-bad-soft);border-color:var(--viz-bad)}.cell.s-warn{background:var(--viz-warn-soft);border-color:var(--viz-warn)}.cell.s-dim{opacity:var(--viz-dim)}.cell.empty{border:2px dashed var(--viz-border);color:var(--viz-muted);background:0 0}.arr-idx{gap:6px;display:flex}.arr-idx span{text-align:center;min-width:2.6rem;color:var(--viz-muted);font-size:.7rem;font-family:var(--sl-font-mono)}.arr-ptrs{gap:6px;min-height:1.4rem;display:flex}.arr-ptrs>div{flex-direction:column;align-items:center;min-width:2.6rem;font-size:.72rem;font-weight:600;line-height:1.1;display:flex}.ptr{color:var(--viz-active)}.ptr:before{content:"▲";text-align:center;font-size:.6rem;display:block}.ptr.top:before{content:none}.ptr.top:after{content:"▼";text-align:center;font-size:.6rem;display:block}.bars{align-items:flex-end;gap:4px;height:180px;padding:0 .5rem;display:flex}.bar{background:var(--viz-cell);border:2px solid var(--viz-border);width:26px;font-size:.7rem;font-family:var(--sl-font-mono);border-bottom:0;border-radius:5px 5px 0 0;justify-content:center;align-items:flex-start;padding-top:2px;transition:height .3s,background .25s,border-color .25s;display:flex}.bar.s-active{background:var(--viz-active-soft);border-color:var(--viz-active)}.bar.s-window{background:var(--viz-window);border-color:var(--viz-window-line)}.bar.s-done{background:var(--viz-done-soft);border-color:var(--viz-done)}.bar.s-bad{background:var(--viz-bad-soft);border-color:var(--viz-bad)}.bar.s-warn{background:var(--viz-warn-soft);border-color:var(--viz-warn)}.bar.s-dim{opacity:var(--viz-dim)}.g-node circle,.g-node rect{fill:var(--viz-cell);stroke:var(--viz-border);stroke-width:2px;transition:fill .25s,stroke .25s}.g-node text{fill:var(--viz-text);font-family:var(--sl-font-mono);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-size:13px}.g-node .badge{fill:var(--viz-muted);font-size:10.5px}.g-node.s-active circle,.g-node.s-active rect{fill:var(--viz-active-soft);stroke:var(--viz-active)}.g-node.s-window circle,.g-node.s-window rect{fill:var(--viz-window);stroke:var(--viz-window-line)}.g-node.s-done circle,.g-node.s-done rect{fill:var(--viz-done-soft);stroke:var(--viz-done)}.g-node.s-bad circle,.g-node.s-bad rect{fill:var(--viz-bad-soft);stroke:var(--viz-bad)}.g-node.s-warn circle,.g-node.s-warn rect{fill:var(--viz-warn-soft);stroke:var(--viz-warn)}.g-node.s-dim{opacity:var(--viz-dim)}.g-edge line,.g-edge path{stroke:var(--viz-border);stroke-width:2px;fill:none;transition:stroke .25s}.g-edge text{fill:var(--viz-muted);font-size:11px;font-family:var(--sl-font-mono);text-anchor:middle;dominant-baseline:central}.g-edge .w-bg{fill:var(--viz-bg);stroke:none}.g-edge.s-active line,.g-edge.s-active path{stroke:var(--viz-active);stroke-width:3px}.g-edge.s-done line,.g-edge.s-done path{stroke:var(--viz-done);stroke-width:3px}.g-edge.s-bad line,.g-edge.s-bad path{stroke:var(--viz-bad);stroke-dasharray:5 4}.g-edge.s-warn line,.g-edge.s-warn path{stroke:var(--viz-warn)}.g-edge.s-window line,.g-edge.s-window path{stroke:var(--viz-window-line)}.g-edge.s-dim{opacity:var(--viz-dim)}.g-arrow{fill:var(--viz-border)}.grid{gap:3px;padding:.25rem;display:inline-grid}.grid .cell{min-width:0;width:var(--cs,2.2rem);height:var(--cs,2.2rem);border-radius:6px;padding:0;font-size:.8rem}.grid .cell.wall{background:var(--viz-text);opacity:.85}.grid .cell.clickable{cursor:pointer}.grid .cell.clickable:hover{border-color:var(--viz-muted)}.vars{flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:.75rem;display:flex}.vars>div{background:var(--viz-surface);border:1px solid var(--viz-border);font-family:var(--sl-font-mono);border-radius:8px;padding:.25rem .6rem;font-size:.82rem}.vars b{color:var(--viz-muted);margin-right:.35rem;font-weight:500}.vars .changed{border-color:var(--viz-warn)}.legend{color:var(--viz-muted);flex-wrap:wrap;justify-content:center;gap:.4rem 1rem;margin-top:.75rem;font-size:.78rem;display:flex}.legend span{align-items:center;gap:.35rem;display:inline-flex}.legend i{border:2px solid;border-radius:3px;width:12px;height:12px;display:inline-block}.legend .s-active{background:var(--viz-active-soft);border-color:var(--viz-active)}.legend .s-window{background:var(--viz-window);border-color:var(--viz-window-line)}.legend .s-done{background:var(--viz-done-soft);border-color:var(--viz-done)}.legend .s-bad{background:var(--viz-bad-soft);border-color:var(--viz-bad)}.legend .s-warn{background:var(--viz-warn-soft);border-color:var(--viz-warn)}.legend .s-dim{background:var(--viz-cell);border-color:var(--viz-border);opacity:.5}.quiz-q{margin-bottom:.75rem;font-weight:600;line-height:1.5}.quiz-opts{gap:.45rem;display:grid}.quiz-opt{text-align:left;font:inherit;cursor:pointer;color:var(--viz-text);background:var(--viz-surface);border:1.5px solid var(--viz-border);border-radius:10px;align-items:baseline;gap:.6rem;padding:.6rem .85rem;font-size:.93rem;display:flex}.quiz-opt:hover:not(:disabled){border-color:var(--viz-active)}.quiz-opt .k{font-family:var(--sl-font-mono);color:var(--viz-muted);font-size:.8rem}.quiz-opt.right{border-color:var(--viz-done);background:var(--viz-done-soft)}.quiz-opt.wrong{border-color:var(--viz-bad);background:var(--viz-bad-soft)}.quiz-opt:disabled{cursor:default}.quiz-explain{background:var(--viz-surface);border-left:3px solid var(--viz-done);border-radius:8px;margin-top:.75rem;padding:.65rem .85rem;line-height:1.55}.quiz-explain.miss{border-left-color:var(--viz-bad)}.chart text{fill:var(--viz-muted);font-size:11px;font-family:var(--sl-font)}.chart .axis{stroke:var(--viz-border)}.chart .gridline{stroke:var(--viz-border);stroke-dasharray:2 4;opacity:.7}.chart .curve{fill:none;stroke-width:2.5px;transition:opacity .2s}.chart .curve.faded{opacity:.15}.chart-keys{flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:.5rem;display:flex}.chart-key{font:inherit;cursor:pointer;background:var(--viz-surface);color:var(--viz-text);border:1.5px solid var(--viz-border);border-radius:999px;align-items:center;gap:.35rem;padding:.2rem .65rem;font-size:.8rem;display:inline-flex}.chart-key i{border-radius:50%;width:10px;height:10px;display:inline-block}.chart-key.off{opacity:.45}.chart-readout{font-family:var(--sl-font-mono);flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:.6rem;font-size:.8rem;display:flex}.chart-readout span{background:var(--viz-surface);border:1px solid var(--viz-border);border-radius:6px;padding:.15rem .5rem}@media (prefers-reduced-motion:reduce){.viz *{transition:none!important}}