*{box-sizing:border-box}
:root{--bg:#0b1220;--panel:#121a2b;--ink:#e7eefc;--muted:#9fb0d1;--accent:#71b7ff;--good:#7ee787;--warn:#ffd166;--bad:#ff6b6b}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #1f2a44;background:#0f1627;position:sticky;top:0;z-index:10}
.topbar h1{margin:0;font-size:20px}
.badge{font-size:12px;color:#111;background:var(--accent);padding:2px 6px;border-radius:999px;margin-left:8px}
.topbar nav{display:flex;gap:8px;align-items:center}
.topbar input, .topbar select{background:#0c1426;border:1px solid #223152;color:var(--ink);padding:6px 8px;border-radius:6px}
.topbar input#arrayInput{min-width:220px}
.topbar button, .controls button{background:#162541;border:1px solid #24365e;color:var(--ink);padding:6px 10px;border-radius:8px;cursor:pointer}
.topbar button:hover, .controls button:hover{filter:brightness(1.1)}
.grid{display:grid;grid-template-columns:1.5fr 1fr 0.8fr;grid-template-rows:auto auto;gap:12px;padding:12px;max-width:1200px;margin:0 auto;grid-template-areas:"inputs visualization pseudocode" "inputs complexity pseudocode"}
.panel{background:var(--panel);border:1px solid #1f2a44;border-radius:12px;padding:12px;min-height:200px}
.inputs-panel{position:relative;min-height:auto}
.inputs-panel.is-collapsed{min-height:auto;padding-bottom:8px;margin-bottom:56px}
.inputs-panel.is-collapsed .inputs-header{margin-bottom:0}
.inputs-panel .inputs-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.inputs-panel .field{display:flex;flex-direction:column;gap:6px}
.inputs-panel .field.grow{grid-column:1/-1}
.inputs-panel .compact-buttons{display:flex;gap:8px;align-items:flex-end}
.inputs-panel .compact-buttons .size-field{display:flex;align-items:center;gap:6px;color:#cfe1ff;border:1px solid #24365e;border-radius:8px;padding:8px 10px}
.inputs-panel .compact-buttons .size-field input{width:64px;background:#0c1426;border:1px solid #223152;color:var(--ink);padding:6px;border-radius:6px}
.inputs-panel label{font-size:12px;color:#9fb0d1}
.inputs-panel input:not([type="checkbox"]),.inputs-panel select{width:100%;background:#0c1426;border:1px solid #223152;color:var(--ink);padding:10px;border-radius:8px}
.inputs-panel input[type="checkbox"]{width:auto;height:18px;padding:0;border:none;background:transparent}
.inputs-panel button{background:#162541;border:1px solid #24365e;color:var(--ink);padding:10px 12px;border-radius:8px;cursor:pointer}
.bst-buttons{display:flex;gap:8px}
.bst-buttons input{flex:1 1 220px;min-width:200px;max-width:320px}
.inputs-panel #resetBtn{background:#2a1b1b;border-color:#4a2d2d}
.inputs-panel #resetBtn:hover{filter:brightness(1.05)}
.inputs-panel .inputs-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.inputs-hint{color:#9fb0d1;font-size:12px;margin-left:auto;margin-right:8px}
.inputs-toggle{background:#162541;border:1px solid #24365e;color:#e7eefc;padding:6px 10px;border-radius:8px;cursor:pointer}
.inputs-toggle{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}
.inputs-body{transition:max-height .25s ease, opacity .2s ease; overflow:hidden}
.inputs-body.collapsed{max-height:0; opacity:.0; padding-top:0; padding-bottom:0}
.sorted-toggle{display:flex;align-items:center;gap:8px;color:#cfe1ff;border:1px solid #24365e;border-radius:999px;padding:8px 12px}
.sorted-toggle{font-size:14px;line-height:1}
.sorted-toggle input{appearance:none;-webkit-appearance:none;width:0;height:0;opacity:0;position:absolute}
.sorted-toggle .switch{position:relative;width:44px;height:26px;background:#394762;border-radius:999px;transition:background .2s ease;flex:0 0 auto}
.sorted-toggle .switch::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#e7eefc;transition:left .2s ease, background .2s ease}
.sorted-toggle input:checked + .switch{background:#2a7df0}
.sorted-toggle input:checked + .switch::after{left:21px;background:#fff}
.sorted-toggle .switch-label{user-select:none}
.mini-toolbar{display:none;gap:8px;position:absolute;left:12px;right:auto;top:10px;background:rgba(16,26,51,0.9);border:1px solid #24365e;border-radius:999px;padding:6px 8px;z-index:5;pointer-events:none}
.inputs-panel.is-collapsed .mini-toolbar{top:auto;bottom:-28px;left:16px;right:auto}
.mini-toolbar button{background:#162541;border:1px solid #24365e;color:#e7eefc;padding:6px 10px;border-radius:999px;cursor:pointer;pointer-events:auto}
#visual, #searchVisual{height:320px;display:flex;align-items:flex-end;gap:6px;padding:12px;border:1px dashed #24365e;border-radius:10px;overflow-x:auto}
#treeVisual{height:min(48vh, 520px);min-height:280px;position:relative;border:1px dashed #24365e;border-radius:10px;padding:12px;background:rgba(0,0,0,0.1);overflow:auto}
#treeVisual.fit{overflow:visible;touch-action:pan-y}
#treeVisual svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1}
#treeVisual .bst-nodes-layer{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2}
/* When we scale the tree, center and smooth */
#treeVisual .zoom-wrap{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}
#treeVisual .zoom-wrap svg,#treeVisual .zoom-wrap .bst-nodes-layer{transform-origin:0 0}
.bst-node{position:absolute;transform:translate(-50%, -50%);min-width:36px;min-height:36px;border-radius:999px;background:#1b3f79;border:2px solid #24365e;display:flex;align-items:center;justify-content:center;color:#e7eefc;font-weight:700;transition:left .35s ease, top .35s ease, transform .2s ease, opacity .25s ease;z-index:3;will-change:left, top, transform}
.bst-node.current{outline:2px solid var(--accent)}
.bst-node.new{outline:2px dashed var(--warn)}
.bst-node.found{outline:3px solid var(--good)}
/* Traveling key bubble during insert */
.bst-travel{position:absolute;transform:translate(-50%, -50%);min-width:32px;min-height:32px;border-radius:999px;background:#0f2419;border:2px solid var(--accent);color:#e7eefc;display:flex;align-items:center;justify-content:center;font-weight:700;z-index:4;transition:left .35s ease, top .35s ease, opacity .2s ease;pointer-events:none}
@keyframes nodePulse{0%{transform:translate(-50%, -50%) scale(1);box-shadow:0 0 0 rgba(113,183,255,0)}50%{transform:translate(-50%, -50%) scale(1.08);box-shadow:0 0 12px rgba(113,183,255,0.6)}100%{transform:translate(-50%, -50%) scale(1);box-shadow:0 0 0 rgba(113,183,255,0)}}
.bst-node.pulse{animation:nodePulse 450ms ease-out}
svg .level-line{stroke:#24365e;stroke-width:1;stroke-dasharray:4,4}
svg .edge{stroke:#3a5a9e;stroke-width:2;stroke-linecap:round}
svg .edge.edge-active{stroke:#71b7ff;stroke-width:3;filter:drop-shadow(0 0 2px #71b7ff)}
svg .edge-label{fill:#9fb0d1;font-size:11px;font-weight:600}
#visual{display:block;white-space:nowrap;overflow-x:auto}
.bar{width:28px;background:linear-gradient(#2a63b8,#1b3f79);border-radius:6px 6px 0 0;position:relative;display:inline-block;vertical-align:bottom;margin-right:6px}
.bar span{position:absolute;top:-24px;font-size:12px;color:var(--muted)}
.bar.sel{outline:2px solid var(--accent)}
.bar.compare{outline:2px dashed var(--warn)}
.bar.swap{outline:2px solid var(--bad)}

/* Linked List Visualization Styles */
#searchVisual{flex-direction:column;align-items:center;justify-content:center}
.target-info{font-size:18px;font-weight:bold;color:var(--accent);margin-bottom:20px}
.linked-list-container{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.head-label{font-size:14px;color:var(--warn);font-weight:bold;align-self:flex-start;margin-bottom:10px}
.node-container{display:flex;align-items:center;gap:8px}
.node{background:var(--panel);border:2px solid #24365e;border-radius:8px;padding:8px;min-width:60px;text-align:center;position:relative}
.node.current{border-color:var(--accent);background:#1a2a48}
.node.compare{border-color:var(--warn);background:#2b1f00}
.node.found{border-color:var(--good);background:#0f2419}
.node-value{font-size:16px;font-weight:bold;color:var(--ink)}
.node-pointer{font-size:12px;color:var(--muted);margin-top:4px;border-top:1px solid #24365e;padding-top:4px}
.arrow{font-size:20px;color:var(--accent)}

/* Binary Search Array Visualization */
.binary-array-container{display:flex;flex-direction:column;align-items:center;gap:20px}
.array-elements{display:flex;gap:4px}
.array-element{background:var(--panel);border:2px solid #24365e;border-radius:8px;padding:12px 8px;min-width:50px;text-align:center;position:relative;font-size:16px;font-weight:bold}
.array-element.left-bound{border-color:var(--accent);background:#1a2a48}
.array-element.right-bound{border-color:var(--accent);background:#1a2a48}
.array-element.mid{border-color:var(--warn);background:#2b1f00}
.array-element.found{border-color:var(--good);background:#0f2419}
.index-label{position:absolute;bottom:-20px;font-size:10px;color:var(--muted);left:50%;transform:translateX(-50%)}
.pointers-container{display:flex;gap:4px}
.pointer-label{min-width:50px;text-align:center;font-size:14px;font-weight:bold;color:var(--accent);padding:4px}

.controls{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.controls .speed{color:var(--muted);font-size:14px}
.controls #bstResetBtn{background:#162541;border:1px solid #24365e;color:#e7eefc;padding:6px 10px;border-radius:8px;cursor:pointer}
.code .panel-title, .panel-title{font-weight:600;margin-bottom:8px;color:var(--accent)}
#codePane{background:#0b1324;border:1px solid #24365e;border-radius:8px;padding:10px;max-height:340px;overflow:auto}
#codePane code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size:13px;white-space:pre}
.line{display:block;padding:2px 6px;border-radius:6px}
.line.hl{background:#1a2a48}
.panel-sub{margin-top:10px}
.analysis-summary{display:flex;align-items:center;gap:8px;margin:6px 0 8px 0;padding:8px 10px;background:#101a33;border:1px solid #24365e;border-radius:8px;opacity:0;transform:translateY(-4px);transition:opacity .25s ease, transform .25s ease;will-change:opacity, transform}
.analysis-summary.is-visible{opacity:1;transform:translateY(0)}
.analysis-summary .summary-label{color:#9fb0d1}
.analysis-summary .summary-value{font-weight:700;color:#e7eefc}
.analysis-controls{display:flex;gap:8px;align-items:center;margin:6px 0}
.analysis-controls select{background:#0c1426;border:1px solid #223152;color:var(--ink);padding:4px 6px;border-radius:6px}
.analysis-controls input[type="number"]{background:#0c1426;border:1px solid #223152;color:var(--ink);padding:4px 6px;border-radius:6px}
.analysis-controls label{color:#cfe1ff}
.analysis{width:100%;border-collapse:collapse;background:#0b1324;border:1px solid #24365e;border-radius:8px;overflow:hidden}
.analysis th,.analysis td{border-bottom:1px solid #1f2a44;padding:6px 8px;font-size:13px;color:#cfe1ff}
.analysis thead th{background:#101a33;color:#9fb0d1;text-align:left}
.analysis tr:last-child td{border-bottom:none}
.analysis tfoot td{background:#0f1627;color:#e7eefc;font-weight:700;border-top:1px solid #24365e}
.analysis tbody tr.hl td{background:#152241}
@keyframes rowFlash{0%{box-shadow:inset 0 0 0 0 rgba(113,183,255,0.0)}50%{box-shadow:inset 0 0 0 2px rgba(113,183,255,0.6)}100%{box-shadow:inset 0 0 0 0 rgba(113,183,255,0.0)}}
.analysis tbody tr.hl.flash td{animation:rowFlash 420ms ease-out}
.analysis td:nth-child(1){width:64px}
.analysis td:nth-child(4){width:110px}
.complexity{width:100%;border-collapse:collapse}
.complexity td{border-bottom:1px solid #1f2a44;padding:6px 4px;color:#cfe1ff}
.complexity td:first-child{color:var(--muted)}
.notes{margin-top:8px;color:#cfe1ff}
.notes .note-section{margin-top:12px}
.notes .note-section:first-child{margin-top:0}
.notes h3{margin:0 0 6px;color:#9fb0d1;font-size:15px;font-weight:600}
.notes p{margin:4px 0 8px;line-height:1.4}
.notes ul{margin:6px 0 10px 18px;padding:0}
.notes li{margin-bottom:4px}
.notes code{background:#111a2f;color:#e7eefc;padding:0 4px;border-radius:4px;font-size:0.9em}
.notes pre{background:#0f1627;border:1px solid #1f2a44;border-radius:6px;padding:10px;font-size:13px;line-height:1.5;overflow-x:auto}
.notes table{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:13px}
.notes th,.notes td{border:1px solid #1f2a44;padding:6px;text-align:left;vertical-align:top}
.notes thead th{background:#101a33;color:#9fb0d1}
.notes tbody tr:nth-child(even){background:rgba(15,22,39,0.6)}
.notes .note-array-legend{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 4px;color:var(--muted);font-size:12px}
.notes .note-array-legend .cell-label{display:flex;align-items:center;gap:6px}
.notes .note-array-legend .cell-swatch{display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:4px 8px;border-radius:6px;font-weight:600}
.notes .note-array-table th[scope="row"]{background:#0f1627;color:#9fb0d1;font-weight:600;width:88px}
.notes .note-array-table tbody tr:nth-child(even){background:transparent}
.notes .note-array-table td{vertical-align:middle;text-align:center}
.notes .note-array-table .cell{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:6px 0;border-radius:6px;font-weight:700}
.notes .cell-lte{background:rgba(126,231,135,0.35);color:#0b2612}
.notes .cell-gt{background:rgba(255,107,107,0.35);color:#2a0606}
.notes .cell-unseen{background:rgba(159,176,209,0.25);color:#0b1220}
.notes .cell-pivot{background:rgba(255,209,102,0.6);color:#2a1c00;box-shadow:inset 0 0 0 1px rgba(255,209,102,0.6)}
.notes .note-footnote{margin:4px 0 0;font-size:12px;color:var(--muted)}
.notes .pivot-controls{display:flex;align-items:center;gap:12px;margin:8px 0;padding:8px;background:#0f1627;border:1px solid #1f2a44;border-radius:6px}
.notes .pivot-controls label{color:#9fb0d1;font-size:12px;font-weight:600}
.notes .pivot-controls select{background:#0c1426;border:1px solid #223152;color:var(--ink);padding:6px 8px;border-radius:4px}
.notes .pivot-controls button{background:#162541;border:1px solid #24365e;color:var(--ink);padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12px}
.notes .pivot-controls button:hover{filter:brightness(1.1)}
.notes #customPivotInfo{background:rgba(113,183,255,0.1);border:1px solid rgba(113,183,255,0.3);border-radius:6px;padding:8px;margin:8px 0;font-size:12px}
.notes .array-element-clickable{cursor:pointer;transition:all 0.2s ease;border:2px dashed rgba(113,183,255,0.4)!important}
.notes .array-element-clickable:hover{background:rgba(113,183,255,0.3)!important;transform:scale(1.08);border:2px solid rgba(113,183,255,0.8)!important}
.notes .array-element-selected{box-shadow:inset 0 0 0 2px var(--accent)!important}
.bar.clickable-pivot{cursor:pointer;transition:all 0.2s ease;border:2px dashed rgba(113,183,255,0.5);box-shadow:0 0 8px rgba(113,183,255,0.3)}
.bar.clickable-pivot:hover{filter:brightness(1.3);transform:scale(1.08);border:2px solid rgba(113,183,255,0.9);box-shadow:0 0 12px rgba(113,183,255,0.6)}

/* Enhanced Partition Table Styles */
.partition-table-header{margin:12px 0}
.table-explanation{background:rgba(113,183,255,0.1);border:1px solid rgba(113,183,255,0.3);border-radius:6px;padding:10px;margin:8px 0;font-size:13px;line-height:1.4}
.recursion-tree-container{margin:12px 0;padding:12px;background:#0f1627;border:1px solid #1f2a44;border-radius:8px}
.recursion-tree{display:flex;flex-direction:column;gap:8px;min-height:60px}
.tree-placeholder{text-align:center;color:var(--muted);font-style:italic;padding:20px}
.tree-levels{display:flex;flex-direction:column;gap:12px}
.tree-level{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.tree-node{background:#162541;border:1px solid #24365e;border-radius:6px;padding:8px 12px;cursor:pointer;transition:all 0.2s ease;min-width:80px;text-align:center}
.tree-node:hover{background:#1f2f4a;border-color:#3a4d7a;transform:scale(1.05)}
.tree-node.active{background:var(--accent);color:#0b1220;border-color:var(--accent)}
.node-label{font-weight:600;font-size:11px;color:#9fb0d1}
.node-subarray{font-size:10px;color:var(--muted);margin-top:2px}

/* Enhanced recursion tree with shaped nodes */
.recursion-tree-enhanced{display:flex;flex-direction:column;gap:20px;min-height:60px;padding:10px}
.tree-level{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;position:relative}
.tree-node-container{display:flex;flex-direction:column;align-items:center;position:relative}
.tree-node-shaped {
    background: linear-gradient(135deg, #162541 0%, #1a2945 50%, #162541 100%);
    border: 2px solid #24365e;
    border-radius: 14px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 130px;
    max-width: 200px;
    width: 200px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.tree-node-shaped:hover{background:#1f2f4a;border-color:#3a4d7a;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.4)}
.tree-node-shaped.active{background:var(--accent);color:#0b1220;border-color:var(--accent)}
.node-elements{
    font-weight:600;
    font-size:12px;
    color:#e7eefc;
    margin-bottom:4px;
    font-family:ui-monospace,SFMono-Regular,Monaco,Consolas,monospace;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.3;
}
.node-pivot{font-size:10px;color:#9fb0d1;font-style:italic}
.tree-connections{display:flex;gap:16px;margin-top:8px;justify-content:center}
.tree-connection{display:flex;flex-direction:column;align-items:center;min-width:80px}
.connection-line{width:3px;height:24px;background:linear-gradient(180deg, #3a4d7a 0%, #5a6d9a 100%);margin-bottom:4px;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.child-label{font-size:9px;color:#7a8ba3;text-align:center;background:#0f1627;padding:3px 8px;border-radius:6px;border:1px solid #1f2a44;box-shadow:0 1px 2px rgba(0,0,0,0.1)}

/* Triangle tree layout with slanted edges */
.triangle-tree-container {
    --triangle-horizontal-spacing: 120px;
    --triangle-vertical-gap: 130px;
    --triangle-parent-overlap: 28px;
    --triangle-block-gap: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--triangle-block-gap);
    min-height: 120px;
    padding: 20px;
    position: relative;
}

.triangle-tree-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}

.triangle-tree-lines .tree-connection-line {
    stroke: #7b8fc0;
    stroke-width: 2.4px;
    stroke-linecap: round;
    opacity: 0.9;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}

.triangle-tree-level {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    gap: 40px;
    z-index: 1;
}

.triangle-level-root {
    margin-bottom: 12px;
}

.triangle-node-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(calc(var(--node-position, 0) * var(--triangle-horizontal-spacing)));
    z-index: 1;
}

.triangle-node {
    background: linear-gradient(135deg, #162541 0%, #1a2945 50%, #162541 100%);
    border: 2px solid #24365e;
    border-radius: 16px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
    max-width: 160px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.triangle-node:hover {
    background: linear-gradient(135deg, #1f2f4a 0%, #243554 50%, #1f2f4a 100%);
    border-color: #3a4d7a;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.root-node .triangle-node {
    background: linear-gradient(135deg, #2a4a7a 0%, #1a3a6a 50%, #2a4a7a 100%);
    border-color: #4a6a9a;
    box-shadow: 0 6px 16px rgba(42,74,122,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
    font-weight: bold;
    min-width: 140px;
}

.root-node .node-elements {
    font-size: 13px;
    color: #ffffff;
    font-weight: 700;
}

.root-node .node-label {
    font-size: 9px;
    color: #a0b0d0;
    font-style: italic;
    margin-top: 4px;
}

.triangle-node .node-elements {
    font-weight: 600;
    font-size: 11px;
    color: #e7eefc;
    margin-bottom: 3px;
    font-family: ui-monospace, SFMono-Regular, Monaco, Consolas, monospace;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.2;
}

.triangle-node .node-pivot {
    font-size: 9px;
    color: #9fb0d1;
    font-style: italic;
}

/* Enhanced partition table */
.partition-table{font-size:12px;margin-top:12px;width:100%;border-collapse:collapse}
.partition-table th{font-size:11px;padding:8px 4px}
.partition-table td{padding:6px 4px;vertical-align:top}
.partition-call-row{transition:background-color 0.3s ease}
.partition-call-row.highlighted{background:rgba(113,183,255,0.2)!important;border:1px solid rgba(113,183,255,0.5)}
.partition-table code{white-space:normal;word-break:break-word}
.subarray-cell{font-family:ui-monospace,SFMono-Regular,Monaco,Consolas,monospace;font-size:11px;color:var(--muted);word-break:break-word}

/* Desktop enhancements */
@media (min-width: 981px){
  .partition-table{font-size:13px;width:100%;table-layout:fixed}
  .partition-table th:nth-child(1){width:8%}
  .partition-table th:nth-child(2){width:15%}
  .partition-table th:nth-child(3){width:12%}
  .partition-table th:nth-child(4){width:12%}
  .partition-table th:nth-child(5){width:15%}
  .partition-table th:nth-child(6){width:15%}
  .partition-table th:nth-child(7){width:23%}
  .recursion-tree-container{max-width:none}
  .tree-level{justify-content:flex-start;margin-left:calc(var(--level) * 40px)}
  .tree-node{min-width:100px}
}
.foot{color:var(--muted);text-align:center;padding:16px}
@media (max-width: 980px){
	.grid{grid-template-columns:1fr;grid-template-areas:"inputs" "visualization" "complexity" "pseudocode"}
	.inputs-panel .inputs-row{grid-template-columns:1fr}
	.inputs-panel .field.grow{grid-column:auto}
	#visual, #searchVisual{height:200px}
	#treeVisual{height:46vh;min-height:240px}
	.topbar h1{font-size:18px}
	.controls{position:sticky;bottom:0;background:rgba(15,22,39,0.9);backdrop-filter:saturate(1.2) blur(6px);padding:8px;border-radius:10px;margin-top:12px}
	.controls button{padding:10px 12px}
	.controls .speed{font-size:12px}
	#codePane{max-height:240px}
	
        /* Mobile partition table optimizations */
        .partition-table{display:block;font-size:11px;border-collapse:separate;border-spacing:0;overflow:visible}
        .partition-table thead{display:none}
        .partition-table tbody{display:flex;flex-direction:column;gap:10px;width:100%;max-height:55vh;overflow-y:auto;padding-right:2px}
        .partition-table tr{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));grid-auto-flow:row;gap:6px 10px;background:rgba(16,26,51,0.85);border:1px solid #1f2a44;border-radius:12px;padding:8px 10px}
        .partition-table td{display:flex;flex-direction:column;padding:0;border:none;min-width:0;white-space:normal;font-size:10px}
        .partition-table td::before{content:attr(data-label);font-size:9px;font-weight:600;color:#9fb0d1;margin-bottom:2px;text-transform:uppercase;letter-spacing:0.03em}
        .partition-table td.partition-span { grid-column: 1 / -1; }
        .partition-table td code{display:block}
        .partition-call-row.highlighted{box-shadow:0 0 0 1px rgba(113,183,255,0.6)}
        .empty-partition-message{justify-content:center;align-items:center;text-align:center}
	
	/* Mobile tree adjustments */
	.recursion-tree-container{padding:8px;margin:8px 0}
	.tree-node{min-width:60px;padding:6px 8px;font-size:10px}
	.node-label{font-size:10px}
	.node-subarray{font-size:9px}
	.tree-level{gap:8px}
	.table-explanation{font-size:12px;padding:8px}
	
	/* Triangle tree mobile adjustments */
        .triangle-tree-container {
                padding: 15px 5px;
        }

        .triangle-node {
                min-width: 80px;
                max-width: 120px;
                padding: 10px 12px;
                font-size: 10px;
        }

        .triangle-node .node-elements {
                font-size: 10px;
                line-height: 1.1;
        }
	
	.triangle-node .node-pivot {
		font-size: 8px;
	}
	
	.root-node .triangle-node {
		min-width: 100px;
	}
	
	.root-node .node-elements {
		font-size: 11px;
	}
}

@media (max-width: 640px){
	.inputs-panel input,.inputs-panel select{padding:12px;font-size:16px}
	.inputs-panel button{padding:12px 14px}
	#treeVisual{height:42vh;min-height:220px}
	.bst-node{min-width:28px;min-height:28px;font-size:12px}
	svg .edge-label{font-size:9px}
	.bar{width:24px;margin-right:4px}
	.array-element{min-width:44px;padding:10px 6px}
	.pointer-label{min-width:44px}
	.bst-buttons input{flex:1 1 140px;min-width:140px;max-width:220px}
	
        /* Extra small screen triangle tree adjustments */
        .triangle-tree-container {
                padding: 10px 2px;
        }

        .triangle-node {
                min-width: 70px;
                max-width: 100px;
                padding: 8px 10px;
                border-radius: 12px;
        }

        .partition-table tr{grid-template-columns:repeat(2,minmax(0,1fr))}
        .partition-table td{padding-bottom:6px}
        .partition-table td:last-child{padding-bottom:0}

        .triangle-node .node-elements {
                font-size: 9px;
                line-height: 1.0;
        }
	
	.triangle-node .node-pivot {
		font-size: 7px;
	}
	
	.root-node .triangle-node {
		min-width: 90px;
	}
	
	.root-node .node-elements {
		font-size: 10px;
	}
	
}