/* ---------- Linked List visualization ---------- */
  .ll-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    padding: 50px 20px 20px;
    width: 100%;
  }
  .ll-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    padding: 70px 12px 24px;
  }
  .ll-slot {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .ll-label-stack {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse; /* HEAD nearest the node, others above */
    gap: 3px;
    align-items: center;
    pointer-events: none;
  }
  .ll-head-label, .ll-cur-label, .ll-prev-label {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .ll-head-label {
    background: linear-gradient(180deg, #7dd3fc, #38bdf8);
    color: #0a0e1a;
    box-shadow: 0 4px 12px rgba(56,189,248,0.4);
  }
  .ll-cur-label {
    background: linear-gradient(180deg, #fcd34d, #fbbf24);
    color: #1a1206;
    box-shadow: 0 4px 12px rgba(251,191,36,0.4);
  }
  .ll-prev-label {
    background: linear-gradient(180deg, #fca5a5, #f87171);
    color: #1a0606;
    box-shadow: 0 4px 12px rgba(248,113,113,0.4);
  }
  .ll-node {
    min-width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--bar-grad-top), var(--bar-grad-bot));
    display: grid;
    place-items: center;
    color: white;
    font-weight: 700;
    font-size: 17px;
    padding: 0 12px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.20),
      inset 0 -2px 0 rgba(0,0,0,0.25),
      0 6px 18px rgba(0,0,0,0.4);
    transition: background 0.3s, transform 0.3s var(--spring), box-shadow 0.3s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
  .ll-node.ll-new {
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.3),
      0 0 0 2px rgba(251,191,36,0.25),
      0 0 28px rgba(251,191,36,0.65),
      0 8px 22px rgba(217,119,6,0.4);
    animation: keyPulse 1.4s ease-in-out infinite;
  }
  .ll-node.ll-highlight {
    background: linear-gradient(180deg, var(--compare-top), var(--compare-bot));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 0 0 2px rgba(248,113,113,0.25),
      0 0 22px rgba(248,113,113,0.55);
  }
  .ll-node.ll-highlight-enter {
    animation: llNodePop 0.32s cubic-bezier(0.34,1.56,0.64,1);
  }
  @keyframes llNodePop {
    0%   { transform: scale(0.88); }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1); }
  }
  .ll-cur-label, .ll-prev-label {
    animation: llLabelPop 0.28s cubic-bezier(0.34,1.56,0.64,1);
  }
  @keyframes llLabelPop {
    0%   { transform: scale(0) translateY(4px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
  }
  .ll-arrow {
    color: var(--accent);
    font-size: 26px;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(56,189,248,0.5);
    user-select: none;
  }
  .ll-null {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    font-size: 22px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(56,189,248,0.4);
  }
  .ll-null span {
    color: var(--muted);
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    background: rgba(15,23,42,0.5);
    border: 1px dashed rgba(148,163,184,0.3);
    border-radius: 6px;
  }
  .ll-disconnected {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px dashed rgba(251,191,36,0.4);
    border-radius: 12px;
    background: rgba(251,191,36,0.05);
  }
  .ll-disconnected-label {
    color: #fde68a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }

  /* ---------- Graph visualization ---------- */
  .graph-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 20px;
    min-width: 100%;
    min-height: 100%;
  }
  .graph-svg {
    width: 100%;
    max-width: 640px;
    flex: 1;
    min-height: 320px;
    overflow: visible;
  }
  .graph-edge {
    stroke: var(--accent);
    stroke-width: 2;
    opacity: 0.55;
    transition: stroke 0.3s, stroke-width 0.3s, opacity 0.3s;
  }
  .graph-edge-new {
    stroke: var(--key-top);
    stroke-width: 3.5;
    opacity: 1;
    filter: drop-shadow(0 0 6px var(--pointer-i-glow));
    animation: graphEdgePulse 1.4s ease-in-out infinite;
  }
  .graph-edge-highlight {
    stroke: var(--compare-top);
    stroke-width: 3;
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(248,113,113,0.55));
  }
  /* "added" - already drawn in this op; stays visually distinct (green) */
  .graph-edge-added {
    stroke: var(--sorted-top);
    stroke-width: 2.5;
    opacity: 0.95;
    filter: drop-shadow(0 0 4px rgba(74,222,128,0.5));
  }
  /* "tree" - a tree edge in BFS/DFS traversal (kept visible after the walk) */
  .graph-edge-tree {
    stroke: var(--sorted-top);
    stroke-width: 3;
    opacity: 0.95;
    filter: drop-shadow(0 0 4px rgba(74,222,128,0.45));
  }
  /* "active" - the edge being traversed right now */
  .graph-edge-active {
    stroke: var(--key-top);
    stroke-width: 3.5;
    opacity: 1;
    filter: drop-shadow(0 0 6px var(--pointer-i-glow));
  }
  @keyframes graphEdgePulse {
    0%, 100% { stroke-width: 3.5; }
    50%      { stroke-width: 5; }
  }
  .graph-edge-label {
    fill: var(--accent);
    font-size: 11px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    pointer-events: none;
    user-select: none;
  }

  .graph-node {
    fill: url(#graph-node-grad);
    /* Fallback solid color if gradient defs aren't present */
    fill: #4a5568;
    stroke: rgba(255,255,255,0.18);
    stroke-width: 2;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
    transition: fill 0.3s, stroke 0.3s, filter 0.3s, r 0.3s;
  }
  .graph-node-g.graph-node-new .graph-node {
    fill: var(--key-bot);
    stroke: var(--key-top);
    filter: drop-shadow(0 0 14px var(--pointer-i-glow));
  }
  .graph-node-g.graph-node-new {
    animation: graphNodePulse 1.4s ease-in-out infinite;
  }
  @keyframes graphNodePulse {
    0%, 100% { transform-box: fill-box; }
    50%      { filter: brightness(1.15); }
  }
  .graph-node-g.graph-node-highlight .graph-node {
    fill: var(--compare-bot);
    stroke: var(--compare-top);
    filter: drop-shadow(0 0 12px rgba(248,113,113,0.55));
  }
  .graph-node-g.graph-node-pivot .graph-node {
    fill: var(--pivot-bot);
    stroke: var(--pivot-top);
    filter: drop-shadow(0 0 12px rgba(103,232,249,0.55));
  }
  /* Algorithmic kinds: start, current, frontier, visited, done */
  .graph-node-g.graph-node-start .graph-node {
    fill: #1d4ed8;
    stroke: #93c5fd;
    filter: drop-shadow(0 0 14px rgba(147,197,253,0.7));
  }
  .graph-node-g.graph-node-current .graph-node {
    fill: var(--key-bot);
    stroke: var(--key-top);
    filter: drop-shadow(0 0 16px var(--pointer-i-glow));
  }
  .graph-node-g.graph-node-current {
    animation: graphNodePulse 1.4s ease-in-out infinite;
  }
  .graph-node-g.graph-node-frontier .graph-node {
    fill: #d97706;
    stroke: #fcd34d;
    filter: drop-shadow(0 0 10px rgba(252,211,77,0.55));
  }
  .graph-node-g.graph-node-visited .graph-node {
    fill: #15803d;
    stroke: var(--sorted-top);
    filter: drop-shadow(0 0 10px rgba(74,222,128,0.45));
  }
  .graph-node-g.graph-node-done .graph-node {
    fill: #4338ca;
    stroke: #c4b5fd;
    filter: drop-shadow(0 0 10px rgba(196,181,253,0.45));
  }
  /* Distance / order badge attached to the node */
  .graph-node-badge circle {
    fill: var(--key-bot);
    stroke: var(--key-top);
    stroke-width: 1.5;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  }
  .graph-node-badge text {
    fill: #1a1206;
    font-size: 10px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    pointer-events: none;
  }
  .graph-node-label {
    fill: white;
    font-size: 14px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    pointer-events: none;
    user-select: none;
  }
  .graph-node-index {
    fill: var(--accent);
    font-size: 11px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.04em;
    pointer-events: none;
    user-select: none;
    opacity: 0.85;
  }

  /* "Floating" node shown to the side before being added */
  .graph-disconnected {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px dashed rgba(251,191,36,0.4);
    border-radius: 12px;
    background: rgba(251,191,36,0.05);
  }
  .graph-disconnected-label {
    color: #fde68a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  .graph-floating-node {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    color: white;
    font-weight: 700;
    font-size: 15px;
    display: grid;
    place-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 22px var(--pointer-i-glow);
    animation: keyPulse 1.4s ease-in-out infinite;
  }

  /* ---------- Binary Tree visualization ---------- */
  .tree-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 20px;
    min-width: 100%;
    min-height: 100%;
  }
  .tree-svg {
    width: 100%;
    max-width: 680px;
    flex: 1;
    min-height: 320px;
    overflow: hidden;
  }
  .tree-edge {
    stroke: var(--accent);
    stroke-width: 2;
    opacity: 0.55;
    transition: stroke 0.3s, stroke-width 0.3s, opacity 0.3s;
  }
  .tree-edge-new {
    stroke: var(--key-top);
    stroke-width: 3.5;
    opacity: 1;
    filter: drop-shadow(0 0 6px var(--pointer-i-glow));
    animation: graphEdgePulse 1.4s ease-in-out infinite;
  }
  .tree-node {
    fill: #4a5568;
    stroke: rgba(255,255,255,0.18);
    stroke-width: 2;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
    transition: fill 0.3s, stroke 0.3s, filter 0.3s;
  }
  .tree-node-g.tree-node-new .tree-node {
    fill: var(--key-bot);
    stroke: var(--key-top);
    filter: drop-shadow(0 0 14px var(--pointer-i-glow));
  }
  .tree-node-g.tree-node-new {
    animation: graphNodePulse 1.4s ease-in-out infinite;
  }
  .tree-node-g.tree-node-compare .tree-node {
    fill: var(--compare-bot);
    stroke: var(--compare-top);
    filter: drop-shadow(0 0 12px rgba(248,113,113,0.55));
  }
  .tree-node-g.tree-node-highlight .tree-node {
    fill: var(--pivot-bot);
    stroke: var(--pivot-top);
    filter: drop-shadow(0 0 12px rgba(103,232,249,0.55));
  }
  /* Algorithmic kinds for traversals: current (red glow), processed (green
     persistent badge once visited), frontier (yellow - sitting in queue) */
  .tree-node-g.tree-node-current .tree-node {
    fill: var(--compare-bot);
    stroke: var(--compare-top);
    filter: drop-shadow(0 0 14px rgba(248,113,113,0.6));
  }
  .tree-node-g.tree-node-current {
    animation: graphNodePulse 1.4s ease-in-out infinite;
  }
  .tree-node-g.tree-node-processed .tree-node {
    fill: #15803d;
    stroke: var(--sorted-top);
    filter: drop-shadow(0 0 10px rgba(74,222,128,0.45));
  }
  .tree-node-g.tree-node-frontier .tree-node {
    fill: #d97706;
    stroke: #fcd34d;
    filter: drop-shadow(0 0 10px rgba(252,211,77,0.55));
  }
  /* Red-Black tree node colours. The "compare" highlight wins (yellow ring)
     so a marked node still stands out from the colouring. */
  .tree-node-g.tree-node-rb-red .tree-node {
    fill: #dc2626;
    stroke: #fca5a5;
    filter: drop-shadow(0 0 10px rgba(220,38,38,0.55));
  }
  .tree-node-g.tree-node-rb-black .tree-node {
    fill: #1f2937;
    stroke: rgba(255,255,255,0.45);
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.55));
  }
  .tree-node-g.tree-node-rb-red.tree-node-compare .tree-node,
  .tree-node-g.tree-node-rb-black.tree-node-compare .tree-node {
    stroke: #fde68a;
    stroke-width: 3;
    filter: drop-shadow(0 0 14px rgba(252,211,77,0.7));
  }
  /* Visit-order badge attached to the node (small numbered chip) */
  .tree-node-badge circle {
    fill: var(--key-bot);
    stroke: var(--key-top);
    stroke-width: 1.5;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  }
  .tree-node-badge text {
    fill: #1a1206;
    font-size: 10px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    pointer-events: none;
  }

  /* Tree row: SVG plus an optional side panel. Default is column layout
     (queue panel sits below the tree). With .tree-row-stack the panel
     sits to the right of the tree (vertical call-stack visualisation). */
  .tree-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
  }
  .tree-row.tree-row-stack {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 22px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .tree-queue-panel {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 10px 16px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: rgba(15,23,42,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 100%;
  }
  .tree-queue-title {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    align-self: center;
    flex-shrink: 0;
    padding-top: 12px;       /* visual centring against tags below items */
  }
  .tree-queue-items {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    min-height: 40px;
    overflow-x: auto;
    padding: 0 6px 4px;
  }
  .tree-queue-empty {
    color: var(--muted);
    font-size: 22px;
    font-family: 'JetBrains Mono', monospace;
    padding: 6px 18px;
    border: 1px dashed rgba(148,163,184,0.3);
    border-radius: 8px;
  }
  .tree-queue-item {
    position: relative;
    min-width: 44px;
    padding: 8px 12px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--bar-grad-top), var(--bar-grad-bot));
    color: white;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.20),
      inset 0 -2px 0 rgba(0,0,0,0.25),
      0 4px 12px rgba(0,0,0,0.35);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    transition: transform 0.3s var(--spring), background 0.3s, box-shadow 0.3s;
    animation: tqEnter 0.32s var(--spring);
  }
  @keyframes tqEnter {
    from { transform: translateX(12px) scale(0.9); opacity: 0; }
    to   { transform: translateX(0) scale(1); opacity: 1; }
  }
  .tree-queue-item.tree-queue-front {
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.3),
      0 0 0 2px rgba(251,191,36,0.25),
      0 0 18px rgba(251,191,36,0.5);
    color: #1a1206;
  }
  .tree-queue-tag {
    position: absolute;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
  }
  .tree-queue-tag-front {
    background: linear-gradient(180deg, #fcd34d, #fbbf24);
    color: #1a1206;
    box-shadow: 0 2px 8px rgba(251,191,36,0.4);
  }
  .tree-queue-tag-rear {
    background: linear-gradient(180deg, #86efac, #16a34a);
    color: #04200d;
    box-shadow: 0 2px 8px rgba(22,163,74,0.4);
  }

  /* Vertical call-stack panel - top-of-stack rendered at the top.
     Panel grows to fit its contents so deep recursion doesn't get clipped
     or trapped behind a scrollbar. */
  .tree-stack-panel {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: rgba(15,23,42,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: max-content;
  }
  .tree-stack-title {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    flex-shrink: 0;
  }
  .tree-stack-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    min-height: 40px;
  }
  .tree-stack-empty {
    color: var(--muted);
    font-size: 22px;
    font-family: 'JetBrains Mono', monospace;
    padding: 6px 18px;
    border: 1px dashed rgba(148,163,184,0.3);
    border-radius: 8px;
  }
  .tree-stack-item {
    position: relative;
    min-width: 56px;
    padding: 8px 14px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--bar-grad-top), var(--bar-grad-bot));
    color: white;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.20),
      inset 0 -2px 0 rgba(0,0,0,0.25),
      0 4px 12px rgba(0,0,0,0.35);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    transition: transform 0.3s var(--spring), background 0.3s, box-shadow 0.3s;
    animation: tsPush 0.32s var(--spring);
  }
  @keyframes tsPush {
    from { transform: translateY(-10px) scale(0.9); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
  }
  .tree-stack-item.tree-stack-top {
    background: linear-gradient(180deg, var(--compare-top), var(--compare-bot));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.3),
      0 0 0 2px rgba(248,113,113,0.25),
      0 0 18px rgba(248,113,113,0.55);
    color: white;
  }
  .tree-stack-tag {
    position: absolute;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
  }
  .tree-stack-tag-top {
    left: calc(100% + 8px);
    background: linear-gradient(180deg, #fcd34d, #fbbf24);
    color: #1a1206;
    box-shadow: 0 2px 8px rgba(251,191,36,0.4);
  }
  .tree-stack-tag-bottom {
    right: calc(100% + 8px);
    background: linear-gradient(180deg, #93c5fd, #1d4ed8);
    color: white;
    box-shadow: 0 2px 8px rgba(29,78,216,0.4);
  }
  .tree-node-label {
    fill: white;
    font-size: 13px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    pointer-events: none;
    user-select: none;
  }
  .tree-disconnected {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px dashed rgba(251,191,36,0.4);
    border-radius: 12px;
    background: rgba(251,191,36,0.05);
  }
  .tree-disconnected-label {
    color: #fde68a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  .tree-floating-node {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    color: white;
    font-weight: 700;
    font-size: 14px;
    display: grid;
    place-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 22px var(--pointer-i-glow);
    animation: keyPulse 1.4s ease-in-out infinite;
  }

  /* ---------- Hash Table visualization ---------- */
  .ht-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px;
    width: 100%;
  }
  .ht-formula {
    padding: 6px 14px;
    background: rgba(56,189,248,0.10);
    border: 1px solid rgba(56,189,248,0.28);
    border-radius: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--text);
  }
  .ht-formula-val { color: #fde68a; font-weight: 700; }
  .ht-formula-bucket { color: var(--accent); font-weight: 700; }
  .ht-floating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px dashed rgba(251,191,36,0.4);
    border-radius: 10px;
    background: rgba(251,191,36,0.05);
  }
  .ht-floating-label {
    color: #fde68a;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  .ht-buckets {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 600px;
  }
  .ht-bucket {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.25s, box-shadow 0.25s;
  }
  .ht-bucket.highlight {
    background: rgba(56,189,248,0.10);
    box-shadow: 0 0 0 1px rgba(56,189,248,0.25), 0 4px 14px rgba(56,189,248,0.18);
  }
  .ht-bucket-idx {
    flex-shrink: 0;
    width: 38px;
    text-align: center;
    padding: 6px 0;
    background: rgba(15,23,42,0.55);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
  }
  .ht-bucket.highlight .ht-bucket-idx {
    color: var(--accent);
    border-color: rgba(56,189,248,0.4);
  }
  .ht-entries {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ht-entry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 5px 10px;
    background: linear-gradient(180deg, var(--bar-grad-top), var(--bar-grad-bot));
    border-radius: 6px;
    color: white;
    font-weight: 700;
    font-size: 13px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 10px rgba(0,0,0,0.3);
    transition: background 0.25s, transform 0.25s var(--spring), box-shadow 0.25s;
  }
  .ht-entry.ht-new {
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 18px var(--pointer-i-glow);
    animation: keyPulse 1.4s ease-in-out infinite;
  }
  .ht-entry.ht-compare,
  .ht-entry.ht-highlight {
    background: linear-gradient(180deg, var(--compare-top), var(--compare-bot));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 18px rgba(248,113,113,0.55);
  }
  .ht-entry.ht-found {
    background: linear-gradient(180deg, var(--sorted-top), var(--sorted-bot));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 18px rgba(74,222,128,0.5);
  }
  .ht-chain-arrow {
    color: var(--accent);
    font-size: 16px;
    font-weight: 700;
    opacity: 0.7;
  }
  .ht-null {
    padding: 4px 8px;
    color: var(--muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    background: rgba(15,23,42,0.4);
    border: 1px dashed rgba(148,163,184,0.25);
    border-radius: 5px;
    letter-spacing: 0.05em;
  }

  /* ---------- Trie visualization ---------- */
  .trie-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 20px;
    min-width: 100%;
    min-height: 100%;
  }
  .trie-svg {
    width: 100%;
    max-width: 680px;
    flex: 1;
    min-height: 280px;
    overflow: visible;
  }
  .trie-edge {
    stroke: var(--accent);
    stroke-width: 2;
    opacity: 0.55;
    transition: stroke 0.3s, stroke-width 0.3s, opacity 0.3s;
  }
  .trie-edge-new {
    stroke: var(--key-top);
    stroke-width: 3;
    opacity: 1;
    filter: drop-shadow(0 0 4px var(--pointer-i-glow));
  }
  .trie-edge-compare {
    stroke: var(--compare-top);
    stroke-width: 3;
    opacity: 1;
  }
  .trie-node {
    fill: #4a5568;
    stroke: rgba(255,255,255,0.18);
    stroke-width: 2;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
    transition: fill 0.3s, stroke 0.3s, filter 0.3s;
  }
  /* End-of-word nodes get a visible double-ring */
  .trie-end-ring {
    fill: none;
    stroke: var(--sorted-top);
    stroke-width: 2;
    stroke-dasharray: 3 3;
    opacity: 0;
    transition: opacity 0.3s, stroke 0.3s;
  }
  .trie-node-g.trie-end .trie-end-ring { opacity: 0.85; }
  .trie-node-g.trie-node-new .trie-node {
    fill: var(--key-bot);
    stroke: var(--key-top);
    filter: drop-shadow(0 0 14px var(--pointer-i-glow));
  }
  .trie-node-g.trie-node-new {
    animation: graphNodePulse 1.4s ease-in-out infinite;
  }
  .trie-node-g.trie-node-compare .trie-node {
    fill: var(--compare-bot);
    stroke: var(--compare-top);
    filter: drop-shadow(0 0 12px rgba(248,113,113,0.55));
  }
  .trie-node-g.trie-node-found .trie-node {
    fill: var(--sorted-bot);
    stroke: var(--sorted-top);
    filter: drop-shadow(0 0 14px rgba(74,222,128,0.55));
  }
  .trie-node-g.trie-node-highlight .trie-node {
    fill: var(--pivot-bot);
    stroke: var(--pivot-top);
    filter: drop-shadow(0 0 12px rgba(103,232,249,0.55));
  }
  .trie-node-label {
    fill: white;
    font-size: 14px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    pointer-events: none;
    user-select: none;
  }

  /* Floating word display: each char as a chip */
  .trie-word-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: rgba(15,23,42,0.5);
  }
  .trie-word-label {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  .trie-word {
    display: flex;
    gap: 4px;
  }
  .trie-word-char {
    display: inline-grid;
    place-items: center;
    width: 28px; height: 30px;
    border-radius: 6px;
    background: rgba(15,23,42,0.6);
    border: 1px solid var(--panel-border);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .trie-word-char.matched {
    background: rgba(74,222,128,0.18);
    border-color: rgba(74,222,128,0.4);
    color: #86efac;
  }
  .trie-word-char.current {
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    border-color: var(--key-top);
    color: #1a1206;
    box-shadow: 0 0 14px var(--pointer-i-glow);
  }

  /* ---------- String Matching visualization ---------- */
  .sm-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px 12px 12px;
    width: 100%;
  }
  .sm-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .sm-block-label {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    padding-left: 4px;
  }
  .sm-row {
    display: flex;
    gap: 3px;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
  .sm-cell {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    background: rgba(15,23,42,0.5);
    color: var(--text);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 16px;
    font-weight: 700;
    transition: background 0.25s, border-color 0.25s, transform 0.25s var(--spring), box-shadow 0.25s;
  }
  .sm-cell-idx {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9.5px;
    color: var(--muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    pointer-events: none;
    user-select: none;
  }
  .sm-cell-spacer {
    background: transparent;
    border: 1px dashed rgba(148,163,184,0.12);
    opacity: 0.4;
    color: transparent;
  }
  .sm-cell-spacer .sm-cell-idx { display: none; }
  /* Pattern row spacing accounts for index labels of the text row above */
  .sm-pattern-row { margin-top: 18px; }
  .sm-cell-pattern {
    background: rgba(56,189,248,0.08);
    border-color: rgba(56,189,248,0.3);
  }
  /* Per-cell algorithmic kinds */
  .sm-cell-window {
    background: rgba(252,211,77,0.12);
    border-color: rgba(252,211,77,0.45);
  }
  .sm-cell-matched {
    background: linear-gradient(180deg, var(--sorted-top), var(--sorted-bot));
    border-color: var(--sorted-top);
    color: #04200d;
    box-shadow: 0 0 10px rgba(74,222,128,0.45);
  }
  .sm-cell-cur {
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    border-color: var(--key-top);
    color: #1a1206;
    box-shadow: 0 0 16px var(--pointer-i-glow);
    animation: smPulse 1.2s ease-in-out infinite;
    transform: translateY(-2px);
  }
  @keyframes smPulse {
    0%, 100% { box-shadow: 0 0 12px var(--pointer-i-glow); }
    50%      { box-shadow: 0 0 22px var(--pointer-i-glow); }
  }
  .sm-cell-mismatch {
    background: linear-gradient(180deg, var(--compare-top), var(--compare-bot));
    border-color: var(--compare-top);
    color: white;
    box-shadow: 0 0 12px rgba(248,113,113,0.55);
  }
  .sm-cell-success {
    background: linear-gradient(180deg, #4338ca, #6d28d9);
    border-color: #c4b5fd;
    color: white;
    box-shadow: 0 0 14px rgba(196,181,253,0.55);
  }

  /* Match collection chips */
  .sm-matches {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    padding-top: 4px;
  }
  .sm-matches-list {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .sm-match-chip {
    padding: 4px 10px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--sorted-top), var(--sorted-bot));
    color: #04200d;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(22,163,74,0.35);
  }

  /* Side panels: LPS / Z / hash */
  .sm-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: rgba(15,23,42,0.4);
    align-self: flex-start;
    overflow-x: auto;
    max-width: 100%;
  }
  .sm-table {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .sm-table-row {
    display: flex;
    gap: 3px;
    align-items: center;
  }
  .sm-table-rowlabel {
    width: 60px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
  }
  .sm-table-cell {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 5px;
    background: rgba(15,23,42,0.55);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    transition: background 0.25s, border-color 0.25s, transform 0.25s var(--spring);
  }
  .sm-table-cell.sm-table-pattern { background: rgba(56,189,248,0.08); }
  .sm-table-cell.sm-table-idx     { color: var(--muted); font-size: 11px; background: transparent; border-color: transparent; }
  .sm-table-cell.sm-table-vals    { background: rgba(74,222,128,0.08); }
  .sm-table-cell.sm-table-cell-cur {
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    border-color: var(--key-top);
    color: #1a1206;
    box-shadow: 0 0 12px var(--pointer-i-glow);
    transform: translateY(-2px);
  }
  .sm-table-cell.sm-table-cell-sep {
    background: rgba(248,113,113,0.18);
    border-color: rgba(248,113,113,0.45);
    color: var(--compare-top);
  }
  .sm-table-cell.sm-table-cell-success {
    background: linear-gradient(180deg, var(--sorted-top), var(--sorted-bot));
    border-color: var(--sorted-top);
    color: #04200d;
  }

  .sm-side-hash {
    min-width: 200px;
    padding: 12px 14px;
  }
  .sm-hash-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 4px 0;
  }
  .sm-hash-key {
    font-size: 11px;
    color: var(--muted);
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.06em;
  }
  .sm-hash-val {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    padding: 2px 8px;
    border-radius: 5px;
    background: rgba(15,23,42,0.7);
    border: 1px solid rgba(148,163,184,0.18);
    transition: background 0.25s, color 0.25s, box-shadow 0.25s;
  }
  .sm-hash-val.sm-hash-match {
    background: linear-gradient(180deg, var(--sorted-top), var(--sorted-bot));
    color: #04200d;
    border-color: var(--sorted-top);
    box-shadow: 0 0 12px rgba(74,222,128,0.45);
  }

  /* ---------- LRU Cache visualization ---------- */
  .lru-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 32px 18px 20px;
    width: max-content;
  }
  .lru-head {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }
  .lru-cap, .lru-size, .lru-query {
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
  }
  .lru-cap   { background: rgba(56,189,248,0.10); color: var(--accent); border: 1px solid rgba(56,189,248,0.25); }
  .lru-size  { background: rgba(148,163,184,0.10); color: var(--muted); border: 1px solid rgba(148,163,184,0.18); }
  .lru-query { background: linear-gradient(180deg, var(--key-top), var(--key-bot)); color: #1a1206; border: 1px solid var(--key-top); }
  .lru-chain {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 18px;
    padding: 50px 12px 24px;
  }
  .lru-slot {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .lru-label-stack {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    gap: 3px;
    align-items: center;
    pointer-events: none;
  }
  .lru-head-label, .lru-tail-label {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .lru-head-label { background: linear-gradient(180deg, #7dd3fc, #38bdf8); color: #0a0e1a; box-shadow: 0 4px 12px rgba(56,189,248,0.4); }
  .lru-tail-label { background: linear-gradient(180deg, #fda4af, #be123c); color: white;    box-shadow: 0 4px 12px rgba(190,18,60,0.4); }
  .lru-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 78px;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--bar-grad-top), var(--bar-grad-bot));
    color: white;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.20),
      inset 0 -2px 0 rgba(0,0,0,0.25),
      0 6px 18px rgba(0,0,0,0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    transition: transform 0.3s var(--spring), background 0.3s, box-shadow 0.3s;
  }
  .lru-key { font-size: 14px; }
  .lru-val { font-size: 12px; opacity: 0.85; padding-left: 6px; border-left: 1px solid rgba(255,255,255,0.20); }
  .lru-cell-cur {
    background: linear-gradient(180deg, var(--compare-top), var(--compare-bot));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.20),
      0 0 0 2px rgba(248,113,113,0.30),
      0 0 24px rgba(248,113,113,0.55);
    transform: translateY(-2px);
  }
  .lru-cell-new {
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    color: #1a1206;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.30),
      0 0 0 2px rgba(251,191,36,0.30),
      0 0 24px rgba(251,191,36,0.55);
    animation: keyPulse 1.4s ease-in-out infinite;
  }
  .lru-cell-evicted {
    background: linear-gradient(180deg, #fda4af, #be123c);
    color: white;
    opacity: 0.85;
  }
  .lru-arrow {
    color: var(--accent);
    font-size: 22px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(56,189,248,0.5);
    user-select: none;
  }
  .lru-empty {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    padding: 12px 24px;
    border: 1px dashed rgba(148,163,184,0.3);
    border-radius: 8px;
  }
  .lru-evicted {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px dashed rgba(248,113,113,0.4);
    border-radius: 12px;
    background: rgba(248,113,113,0.06);
  }
  .lru-evicted-label {
    color: #fca5a5;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }

  /* ---------- Bloom Filter visualization ---------- */
  .bloom-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 22px 18px 18px;
    width: 100%;
  }
  .bloom-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .bloom-meta {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.05em;
  }
  .bloom-items {
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    max-width: 100%;
    text-align: center;
  }
  .bloom-query {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: rgba(15,23,42,0.5);
    max-width: 100%;
  }
  .bloom-query-label {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .bloom-query-val {
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
  }
  .bloom-hash-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: center;
  }
  .bloom-hash-chip {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(56,189,248,0.12);
    border: 1px solid rgba(56,189,248,0.28);
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
  }
  .bloom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 32px);
    gap: 4px;
    justify-content: center;
    max-width: 100%;
  }
  .bloom-bit {
    position: relative;
    width: 32px;
    height: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(148,163,184,0.20);
    transition: background 0.25s, border-color 0.25s, transform 0.25s var(--spring), box-shadow 0.25s;
  }
  .bloom-bit-on  { background: rgba(56,189,248,0.18); border-color: rgba(56,189,248,0.45); }
  .bloom-bit-off { /* default */ }
  .bloom-bit-val {
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
  }
  .bloom-bit-on .bloom-bit-val { color: var(--accent); }
  .bloom-bit-idx {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    margin-top: 1px;
  }
  .bloom-bit-active {
    transform: translateY(-2px);
    animation: bloomPulse 1.2s ease-in-out infinite;
  }
  @keyframes bloomPulse {
    0%, 100% { box-shadow: 0 0 6px var(--pointer-i-glow); }
    50%      { box-shadow: 0 0 16px var(--pointer-i-glow); }
  }
  .bloom-bit-set {
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    border-color: var(--key-top);
  }
  .bloom-bit-set .bloom-bit-val { color: #1a1206; }
  .bloom-bit-set .bloom-bit-idx { color: rgba(26,18,6,0.65); }
  .bloom-bit-check-hit {
    background: linear-gradient(180deg, var(--sorted-top), var(--sorted-bot));
    border-color: var(--sorted-top);
  }
  .bloom-bit-check-hit .bloom-bit-val { color: #04200d; }
  .bloom-bit-check-miss {
    background: linear-gradient(180deg, var(--compare-top), var(--compare-bot));
    border-color: var(--compare-top);
  }
  .bloom-bit-check-miss .bloom-bit-val { color: white; }
  .bloom-result {
    padding: 8px 16px;
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
  }
  .bloom-result-maybe {
    background: linear-gradient(180deg, var(--sorted-top), var(--sorted-bot));
    color: #04200d;
    box-shadow: 0 4px 14px rgba(74,222,128,0.40);
  }
  .bloom-result-definitely-not {
    background: linear-gradient(180deg, var(--compare-top), var(--compare-bot));
    color: white;
    box-shadow: 0 4px 14px rgba(248,113,113,0.45);
  }

  /* ---------- Segment Tree visualization ---------- */
  .seg-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 18px;
    width: 100%;
  }
  .seg-array {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .seg-array-cell {
    width: 36px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(148,163,184,0.20);
    transition: background 0.25s, border-color 0.25s, transform 0.25s var(--spring), box-shadow 0.25s;
  }
  .seg-array-val {
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
  }
  .seg-array-idx {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    margin-top: 1px;
  }
  .seg-array-cell-cur {
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    border-color: var(--key-top);
    transform: translateY(-2px);
    box-shadow: 0 0 12px var(--pointer-i-glow);
  }
  .seg-array-cell-cur .seg-array-val { color: #1a1206; }
  .seg-array-cell-cur .seg-array-idx { color: rgba(26,18,6,0.6); }
  .seg-array-cell-in-range {
    background: rgba(56,189,248,0.18);
    border-color: rgba(56,189,248,0.45);
  }
  .seg-array-cell-updated {
    background: linear-gradient(180deg, var(--sorted-top), var(--sorted-bot));
    border-color: var(--sorted-top);
    color: #04200d;
  }
  .seg-array-cell-updated .seg-array-val { color: #04200d; }
  .seg-svg {
    width: 100%;
    max-width: 720px;
    min-height: 240px;
    overflow: visible;
  }
  .seg-edge {
    stroke: var(--accent);
    stroke-width: 1.6;
    opacity: 0.55;
    transition: stroke 0.25s, stroke-width 0.25s, opacity 0.25s;
  }
  .seg-node-rect {
    fill: #1f2937;
    stroke: rgba(255,255,255,0.18);
    stroke-width: 1.5;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
    transition: fill 0.25s, stroke 0.25s, filter 0.25s;
  }
  .seg-node-range {
    fill: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    pointer-events: none;
  }
  .seg-node-val {
    fill: white;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
  }
  .seg-node-g.seg-node-cur .seg-node-rect {
    fill: var(--key-bot);
    stroke: var(--key-top);
    filter: drop-shadow(0 0 12px var(--pointer-i-glow));
  }
  .seg-node-g.seg-node-cur { animation: graphNodePulse 1.4s ease-in-out infinite; }
  .seg-node-g.seg-node-cur .seg-node-val { fill: #1a1206; }
  .seg-node-g.seg-node-cur .seg-node-range { fill: rgba(26,18,6,0.6); }
  .seg-node-g.seg-node-leaf .seg-node-rect {
    fill: var(--key-bot);
    stroke: var(--key-top);
  }
  .seg-node-g.seg-node-leaf .seg-node-val   { fill: #1a1206; }
  .seg-node-g.seg-node-leaf .seg-node-range { fill: rgba(26,18,6,0.6); }
  .seg-node-g.seg-node-combine .seg-node-rect,
  .seg-node-g.seg-node-updated .seg-node-rect {
    fill: var(--sorted-bot);
    stroke: var(--sorted-top);
  }
  .seg-node-g.seg-node-combine .seg-node-val,
  .seg-node-g.seg-node-updated .seg-node-val { fill: #04200d; }
  .seg-node-g.seg-node-combine .seg-node-range,
  .seg-node-g.seg-node-updated .seg-node-range { fill: rgba(4,32,13,0.6); }
  .seg-node-g.seg-node-in .seg-node-rect {
    fill: #15803d;
    stroke: var(--sorted-top);
    filter: drop-shadow(0 0 10px rgba(74,222,128,0.5));
  }
  .seg-node-g.seg-node-out .seg-node-rect {
    fill: #4b5563;
    stroke: rgba(148,163,184,0.30);
    opacity: 0.55;
  }
  .seg-node-g.seg-node-partial .seg-node-rect {
    fill: var(--compare-bot);
    stroke: var(--compare-top);
    filter: drop-shadow(0 0 10px rgba(248,113,113,0.45));
  }
  .seg-result {
    padding: 8px 18px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--sorted-top), var(--sorted-bot));
    color: #04200d;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(74,222,128,0.40);
  }

  /* ---------- Fenwick Tree (BIT) visualization ---------- */
  .fen-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 18px;
    width: 100%;
  }
  .fen-head {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .fen-meta {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    padding: 3px 10px;
    background: rgba(148,163,184,0.10);
    border-radius: 6px;
    border: 1px solid rgba(148,163,184,0.18);
  }
  .fen-query {
    color: #1a1206;
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    padding: 4px 12px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
  }
  .fen-row {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    max-width: 100%;
  }
  .fen-row-label {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    width: 36px;
    text-align: right;
    padding-right: 6px;
  }
  .fen-cell {
    width: 60px;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(148,163,184,0.20);
    padding: 4px 2px;
    transition: background 0.25s, border-color 0.25s, transform 0.25s var(--spring), box-shadow 0.25s;
  }
  .fen-cell-disabled { opacity: 0.35; }
  .fen-val {
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
  }
  .fen-idx {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    margin-top: 2px;
  }
  .fen-lsb {
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    margin-top: 1px;
    opacity: 0.7;
  }
  .fen-cell-target {
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    border-color: var(--key-top);
    box-shadow: 0 0 12px var(--pointer-i-glow);
  }
  .fen-cell-target .fen-val { color: #1a1206; }
  .fen-cell-target .fen-idx { color: rgba(26,18,6,0.6); }
  .fen-cell-visited {
    background: rgba(74,222,128,0.18);
    border-color: rgba(74,222,128,0.45);
  }
  .fen-cell-active {
    background: linear-gradient(180deg, var(--compare-top), var(--compare-bot));
    border-color: var(--compare-top);
    transform: translateY(-3px);
    box-shadow: 0 0 16px rgba(248,113,113,0.55);
    animation: graphNodePulse 1.4s ease-in-out infinite;
  }
  .fen-cell-active .fen-val,
  .fen-cell-active .fen-idx,
  .fen-cell-active .fen-lsb { color: white; }
  .fen-result {
    padding: 8px 18px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--sorted-top), var(--sorted-bot));
    color: #04200d;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(74,222,128,0.40);
  }

  /* ---------- Dynamic Programming visualization ---------- */
  .dp-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 18px;
    width: 100%;
  }
  .dp-head {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .dp-meta {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    padding: 3px 10px;
    background: rgba(148,163,184,0.10);
    border-radius: 6px;
    border: 1px solid rgba(148,163,184,0.18);
  }
  .dp-table-wrap {
    max-width: 100%;
  }
  .dp-table {
    display: grid;
    gap: 2px;
    justify-content: center;
  }
  .dp-corner {
    background: transparent;
  }
  .dp-col-hdr, .dp-row-hdr {
    display: grid;
    place-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(56,189,248,0.08);
    border-radius: 4px;
    padding: 2px;
  }
  .dp-cell {
    min-width: 44px;
    min-height: 36px;
    display: grid;
    place-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 4px;
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
  }
  .dp-cell-empty {
    opacity: 0.25;
    color: var(--muted);
  }
  .dp-cell-done {
    background: rgba(56,189,248,0.06);
  }
  .dp-cell-cur {
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    border-color: var(--key-top);
    color: #1a1206;
    box-shadow: 0 0 12px var(--pointer-i-glow);
    transform: scale(1.08);
    z-index: 2;
  }
  .dp-cell-dep {
    background: rgba(248,113,113,0.22);
    border-color: rgba(248,113,113,0.5);
  }
  .dp-cell-path {
    background: linear-gradient(180deg, var(--sorted-top), var(--sorted-bot));
    border-color: var(--sorted-top);
    color: #04200d;
  }
  .dp-row {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    max-width: 100%;
  }
  .dp-row-label {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    width: 36px;
    text-align: right;
    padding-right: 6px;
    flex-shrink: 0;
  }
  .dp-1d-cell {
    width: 52px;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(148,163,184,0.20);
    padding: 4px 2px;
    transition: background 0.25s, border-color 0.25s, transform 0.25s var(--spring), box-shadow 0.25s;
  }
  .dp-1d-val {
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
  }
  .dp-1d-idx {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    margin-top: 2px;
  }
  .dp-1d-cell.dp-cell-empty { opacity: 0.3; }
  .dp-1d-cell.dp-cell-empty .dp-1d-val { color: var(--muted); }
  .dp-1d-cell.dp-cell-cur {
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    border-color: var(--key-top);
    box-shadow: 0 0 12px var(--pointer-i-glow);
    transform: translateY(-3px);
  }
  .dp-1d-cell.dp-cell-cur .dp-1d-val { color: #1a1206; }
  .dp-1d-cell.dp-cell-cur .dp-1d-idx { color: rgba(26,18,6,0.6); }
  .dp-1d-cell.dp-cell-dep {
    background: rgba(248,113,113,0.22);
    border-color: rgba(248,113,113,0.5);
  }
  .dp-1d-cell.dp-cell-path {
    background: linear-gradient(180deg, var(--sorted-top), var(--sorted-bot));
    border-color: var(--sorted-top);
  }
  .dp-1d-cell.dp-cell-path .dp-1d-val { color: #04200d; }
  .dp-1d-cell.dp-cell-done {
    background: rgba(56,189,248,0.06);
  }
  .dp-orig-row {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    max-width: 100%;
    padding-top: 18px;
  }
  .dp-result {
    padding: 8px 18px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--sorted-top), var(--sorted-bot));
    color: #04200d;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(74,222,128,0.40);
  }
  .dp-cell-label {
    font-size: 8px;
    color: var(--muted);
    position: absolute;
    bottom: 1px;
    left: 0;
    right: 0;
    text-align: center;
  }
  .dp-cell.dp-cell-cur .dp-cell-label { color: rgba(26,18,6,0.5); }
  .dp-cell.dp-cell-path .dp-cell-label { color: rgba(4,32,13,0.5); }

  .dp-input-arrays {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
    width: 100%;
    align-items: center;
  }
  .dp-input-row {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    padding-top: 18px;
  }
  .dp-input-label {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    min-width: 32px;
    text-align: right;
    padding-right: 5px;
    padding-bottom: 8px;
    flex-shrink: 0;
  }
  .dp-input-cell {
    position: relative;
    min-width: 32px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148,163,184,0.10);
    padding: 0 4px;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
  }
  .dp-input-cell.dp-input-active {
    background: rgba(251,191,36,0.15);
    border-color: rgba(251,191,36,0.4);
    color: #fbbf24;
  }
  .dp-input-cell.dp-input-active-j {
    background: rgba(248,113,113,0.15);
    border-color: rgba(248,113,113,0.4);
    color: #f87171;
  }
  .dp-input-cell.dp-input-hl {
    background: rgba(74,222,128,0.12);
    border-color: rgba(74,222,128,0.35);
    color: #4ade80;
  }
  .dp-ptr-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 3px;
    line-height: 14px;
    white-space: nowrap;
    pointer-events: none;
  }
  .dp-ptr-badge.ptr-i {
    background: rgba(251,191,36,0.3);
    color: #fbbf24;
  }
  .dp-ptr-badge.ptr-j {
    background: rgba(248,113,113,0.3);
    color: #f87171;
  }

  /* ---------- Doubly Linked List visualization ---------- */
  .dll-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    padding: 56px 20px 20px;
    width: 100%;
  }
  .dll-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    padding: 70px 12px 24px;
  }
  .dll-slot {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .dll-label-stack {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    gap: 3px;
    align-items: center;
    pointer-events: none;
  }
  .dll-head-label, .dll-tail-label, .dll-cur-label, .dll-prev-label {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .dll-head-label {
    background: linear-gradient(180deg, #7dd3fc, #38bdf8);
    color: #0a0e1a;
    box-shadow: 0 4px 12px rgba(56,189,248,0.4);
  }
  .dll-tail-label {
    background: linear-gradient(180deg, #86efac, #16a34a);
    color: #04200d;
    box-shadow: 0 4px 12px rgba(22,163,74,0.4);
  }
  .dll-cur-label {
    background: linear-gradient(180deg, #fcd34d, #fbbf24);
    color: #1a1206;
    box-shadow: 0 4px 12px rgba(251,191,36,0.4);
  }
  .dll-prev-label {
    background: linear-gradient(180deg, #fca5a5, #f87171);
    color: #1a0606;
    box-shadow: 0 4px 12px rgba(248,113,113,0.4);
  }
  .dll-node {
    min-width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--bar-grad-top), var(--bar-grad-bot));
    display: grid;
    place-items: center;
    color: white;
    font-weight: 700;
    font-size: 17px;
    padding: 0 12px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.20),
      inset 0 -2px 0 rgba(0,0,0,0.25),
      0 6px 18px rgba(0,0,0,0.4);
    transition: background 0.3s, transform 0.3s var(--spring), box-shadow 0.3s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
  .dll-node.dll-new {
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.3),
      0 0 0 2px rgba(251,191,36,0.25),
      0 0 28px rgba(251,191,36,0.65),
      0 8px 22px rgba(217,119,6,0.4);
    animation: keyPulse 1.4s ease-in-out infinite;
  }
  .dll-node.dll-highlight {
    background: linear-gradient(180deg, var(--compare-top), var(--compare-bot));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 0 0 2px rgba(248,113,113,0.25),
      0 0 22px rgba(248,113,113,0.55);
  }
  .dll-node.dll-highlight-enter {
    animation: llNodePop 0.32s cubic-bezier(0.34,1.56,0.64,1);
  }
  .dll-cur-label, .dll-prev-label {
    animation: llLabelPop 0.28s cubic-bezier(0.34,1.56,0.64,1);
  }
  .dll-arrow {
    color: var(--accent);
    font-size: 26px;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(56,189,248,0.5);
    user-select: none;
  }
  .dll-null {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    font-size: 22px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(56,189,248,0.4);
  }
  .dll-null span {
    color: var(--muted);
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    background: rgba(15,23,42,0.5);
    border: 1px dashed rgba(148,163,184,0.3);
    border-radius: 6px;
  }
  .dll-disconnected {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px dashed rgba(251,191,36,0.4);
    border-radius: 12px;
    background: rgba(251,191,36,0.05);
  }
  .dll-disconnected-label {
    color: #fde68a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }

  /* ---------- Disjoint Set (Union-Find) visualization ---------- */
  .dsu-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 20px;
    min-width: 100%;
    min-height: 100%;
  }
  .dsu-svg {
    width: 100%;
    max-width: 680px;
    flex: 1;
    min-height: 320px;
    overflow: visible;
  }
  .dsu-edge {
    stroke: var(--accent);
    stroke-width: 2;
    opacity: 0.55;
    transition: stroke 0.3s, stroke-width 0.3s, opacity 0.3s;
  }
  .dsu-edge-active {
    stroke: var(--key-top);
    stroke-width: 3;
    opacity: 1;
    filter: drop-shadow(0 0 4px var(--pointer-i-glow));
  }
  .dsu-node {
    fill: #4a5568;
    stroke: rgba(255,255,255,0.18);
    stroke-width: 2;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
    transition: fill 0.3s, stroke 0.3s, filter 0.3s;
  }
  .dsu-node-g.dsu-node-root .dsu-node {
    fill: #1e3a8a;
    stroke: #60a5fa;
  }
  .dsu-node-g.dsu-node-cur .dsu-node {
    fill: var(--key-bot);
    stroke: var(--key-top);
    filter: drop-shadow(0 0 14px var(--pointer-i-glow));
  }
  .dsu-node-g.dsu-node-cur {
    animation: graphNodePulse 1.4s ease-in-out infinite;
  }
  .dsu-node-g.dsu-node-other .dsu-node {
    fill: var(--compare-bot);
    stroke: var(--compare-top);
    filter: drop-shadow(0 0 12px rgba(248,113,113,0.55));
  }
  .dsu-node-g.dsu-node-root .dsu-node-cur,
  .dsu-node-g.dsu-node-cur.dsu-node-root .dsu-node {
    fill: var(--sorted-bot);
    stroke: var(--sorted-top);
    filter: drop-shadow(0 0 14px rgba(74,222,128,0.55));
  }
  .dsu-node-label {
    fill: white;
    font-size: 14px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    pointer-events: none;
    user-select: none;
  }
  .dsu-rank-badge circle {
    fill: var(--key-bot);
    stroke: var(--key-top);
    stroke-width: 1.5;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  }
  .dsu-rank-badge text {
    fill: #1a1206;
    font-size: 10px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    pointer-events: none;
  }