.ds-array {
  display: flex;
  margin: 10px 0 10px;
  position: relative;
  align-items: flex-start;
  gap: 2px;
  max-width: 100%;
}
.ds-array.center {
  justify-content: center;
}
.ds-array.string:before,
.ds-array.string:after {
  display: inline-block;
  content: "\"";
  padding: 0 5px;
  font-size: larger;
  font-family:monospace;
}
.ds-array.string .ds-array-cell .ds-array-item {
  border: none;
  border-radius: 0;
  width: fit-content;
  min-width: 1rem;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 1.5rem;
  padding: 0.25rem;
  white-space: pre;
}

.ds-array.large .ds-array-item {
  font-size: 2rem;
  padding: 1rem 2rem;
}
.ds-array.variable {
  gap: 1rem;
  flex-wrap: wrap;
}
.ds-array.variable .ds-array-item {
  border-radius: 0;
  border-top: 0;
  border-width: 0.25rem;
}
.ds-array.variable .ds-array-label {
  color: var(--text-color-lighter);
  font-weight: 700;
  font-size: 1.2rem;
}

.ds-array-item {
  padding: 8px;
  background: var(--jsavnode-bg);
  font-family: var(--ds-font-family);
  font-size: var(--ds-array-item-font-size);
  border: var(--jsavnode-border);
  border-color: var(--jsavnode-border-color);
  font-weight: 700;
  text-align: center;
  position: relative;
  border-radius: 10px;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  color: var(--jsavnode-color);
}

.ds-array[data-show-indices="true"] .ds-array-cell {
  margin-bottom: 16px;
}

.ds-array-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.ds-array-label {
  font-size: 14px;
  color: var(--label-color);
  margin-top: 12px;
}

/* Index displayed below the box */
.ds-array-item::after {
  position: relative;
  content: attr(data-index);
  font-size: 14px;
  bottom: -0.5rem;
  left: 50%;
  font-weight: 400;
  transform: translateX(-50%);
  color: var(--array-index-color);
  display: none;
}

/* Show index when enabled */
.ds-array[data-show-indices="true"] .ds-array-item::after {
  display: block;
}

/* Optional highlights */
.children-highlight .jsavnode {
  background: var(--highlight-bg-pseudo);
  border-color: var(--highlight-border-color);
}

.children-highlight-pink .jsavnode {
  background: var(--highlight-pink-bg-pseudo);
  border-color: var(--highlight-pink-border-color);
  color: var(--jsavnode-color);
}

.children-highlight-green .jsavnode {
  background: var(--highlight-green-bg-pseudo);
  border-color: var(--highlight-green-border-color);
  color: var(--jsavnode-color);
}

.children-highlight-red .jsavnode {
  background: var(--highlight-red-bg-pseudo);
  border-color: var(--highlight-red-border-color);
  color: var(--jsavnode-color);
}

.children-highlight-blue .jsavnode {
  background: var(--highlight-blue-bg-pseudo);
  border-color: var(--highlight-blue-border-color);
  color: var(--jsavnode-color);
}

.children-empty .jsavnode {
  background: transparent!important;
  border-color: transparent!important;
  color: var(--text-color)!important;
  box-shadow: none;
}

.children-empty-complete .jsavnode {
  background: transparent!important;
  border-color: transparent!important;
  color: var(--bg-color)!important;
  box-shadow: none;
}

.highlight.jsavnode,
.highlight {
  background: var(--highlight-bg-pseudo);
  border-color: var(--highlight-border-color);
}

.highlight-pink.jsavnode,
.highlight-pink {
  background: var(--highlight-pink-bg-pseudo);
  border-color: var(--highlight-pink-border-color);
  color: var(--jsavnode-color);
}

.highlight-blue.jsavnode,
.highlight-blue {
  background: var(--highlight-blue-bg-pseudo);
  border-color: var(--highlight-blue-border-color);
  color: var(--jsavnode-color);
}

.highlight-green.jsavnode,
.highlight-green {
  background: var(--highlight-green-bg-pseudo);
  border-color: var(--highlight-green-border-color);
  color: var(--jsavnode-color);
}

.highlight-red.jsavnode,
.highlight-red {
  background: var(--highlight-red-bg-pseudo);
  border-color: var(--highlight-red-border-color);
  color: var(--jsavnode-color);
}

.empty.jsavnode,
.empty {
  background: transparent!important;
  border-color: transparent!important;
  color: var(--text-color)!important;
  box-shadow: none;
}

.empty-complete,
.empty-complete.jsavnode,
.empty-complete .jsavindexlabel {
  background: transparent!important;
  border-color: transparent!important;
  color: var(--bg-color)!important;
  box-shadow: none;
}

.special,
.special .jsavvaluelabel {
  background-color: #90caf9;
  border-color: #90caf9;
}

.highlight-border {
  box-shadow: 0 0 3px 3px var(--highlight-blue-border-color);
}
.highlight-border.jsavtreenode .jsavvaluelabel {
  border: none;
}

.jsavtreenode.end-of-word {
  box-shadow: 0 0 0px 3px var(--bg-opposite) !important;
}

.container100max {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.ds-highlight {
  background: var(--highlight-bg-pseudo);
  border-color: var(--highlight-border-color);
}

.ds-highlight-blue {
  background: var(--highlight-blue-bg-pseudo);
  border-color: var(--highlight-blue-border-color);
}

.ds-highlight-red {
  background: var(--highlight-red-bg-pseudo);
  border-color: var(--highlight-red-border-color);
}

.ds-highlight-green {
  background: var(--highlight-green-bg-pseudo);
  border-color: var(--highlight-green-border-color);
}

.ds-special {
  background-color: #90caf9;
}

/* Container behaves like a vertical stack */
.ds-array, .ds-stack, .ds-tree, #jsavcontainer * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.ds-stack.ds-array {
  display: flex;
  flex-direction: column-reverse; /* bottom to top */
  align-items: center;
  justify-content: flex-start;
  border-left: var(--stack-border);
  border-right: var(--stack-border);
  border-bottom: var(--stack-border);
  border-radius: 0 0 10px 10px;
  padding: 10px;
  width: fit-content;
  margin: 20px 0 20px 20px;
}

/* Each stack element */
.ds-stack .ds-array-item {
  min-width: 60px;
  text-align: center;
  position: relative;
}

.ds-queue.ds-array {
  border-top: var(--stack-border);
  border-bottom: var(--stack-border);
  padding: 10px;
  width: fit-content;
  margin: 20px;
}

.render-tree.ds-binary-tree {
  height: auto;
  position: relative;
  padding: 0 20px;
  margin-top:-30px;
}

.ds-tree-node {
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--jsavnode-bg);
  color: var(--array-item-color);
  border-radius: 100%;
  text-align: center;
  line-height: 60px;
  font-weight: bold;
  font-size: var(--ds-array-item-font-size);
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
  transform: translateX(-50%);
  z-index: 2;
}

.ds-tree-node-label {
  position: absolute;
  color: var(--label-color);
  z-index: 2;
  width: fit-content;
  font-weight: 600;
  height: auto;
  font-size: 16px;
  border-radius: 5px;
  padding: 0 5px
}

.ds-tree-edge line {
  stroke: var(--jsav-node-edge-color);
  stroke-width: 10;
  z-index: 1;
}
.section-prose{--jsavnode-bg:var(--panel);--jsavnode-border:1px solid;--jsavnode-border-color:var(--border);--jsavnode-color:var(--text);--ds-font-family:ui-monospace,monospace;--ds-array-item-font-size:16px;--text-color-lighter:var(--muted);--text-color:var(--text);--ds-linked-list-arrow-color:var(--text);--ds-linked-list-item-border:20px solid var(--muted)}
.legacy-visualization{margin:24px 0}.visualization-frame{display:block;width:100%;height:650px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}.visualization-help{color:var(--muted);font-size:13px}.visualization-link{display:inline-block;margin:6px 0;font-weight:650;font-size:13px}.player-fullscreen{position:fixed;inset:0;width:100vw!important;height:100dvh!important;border:0;border-radius:0;z-index:100}.has-player-fullscreen{overflow:hidden}.ds-array{overflow:auto;padding:8px 2px 26px}.ds-array-item{box-sizing:content-box}.ds-tree-node{box-sizing:content-box}.section-prose .highlight,.section-prose .ds-highlight{background:#ffedb2;color:#412c00}.section-prose .highlight-green,.section-prose .ds-highlight-green{background:#c8f0d5;color:#174529}.section-prose .highlight-red,.section-prose .ds-highlight-red{background:#ffd9dd;color:#6e1226}.section-prose .highlight-blue,.section-prose .ds-highlight-blue{background:#d7e9ff;color:#173d69}
.ds-illustration-frame{display:block;width:100%;height:160px;border:0;border-radius:10px;background:var(--panel);margin:12px 0}
.ds-code-actions{gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}.ds-code-actions button{font-size:12px;padding:7px 11px}
.lesson-section .lesson-quiz+.lesson-quiz{margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.section-prose{--array-index-color:var(--muted);--array-item-color:var(--text);--bg-color:var(--panel);--bg-opposite:var(--text);--label-color:var(--text);--jsav-node-edge-color:var(--muted);--stack-border:var(--border);--highlight-bg-pseudo:#ffedb2;--highlight-border-color:#bc921f;--highlight-green-bg-pseudo:#c8f0d5;--highlight-green-border-color:#39895b;--highlight-red-bg-pseudo:#ffd9dd;--highlight-red-border-color:#b84b61;--highlight-blue-bg-pseudo:#d7e9ff;--highlight-blue-border-color:#5183bd;--highlight-pink-bg-pseudo:#f8dded;--highlight-pink-border-color:#ac5a8b}
.section-prose .highlight-pink,.section-prose .ds-special{background:#f8dded;color:#652044}
.enhanced .section-read-button[data-mark-explored]{display:inline-flex;margin-top:22px;align-items:center;gap:8px;font-size:var(--text-label)}
.visualization-frame{border:10px solid #404040;border-radius:32px;box-shadow:0 0 20px #4e98ff40;background:var(--panel)}
:root[data-theme=dark] .visualization-frame{border-color:#647080;box-shadow:0 0 20px #4e98ff30}
.visualization-frame.player-fullscreen{border:0;border-radius:0}
@media(min-width:1000px){.legacy-visualization{width:max(100%,min(1400px,calc(100cqw - 48px)));margin-left:calc((100% - max(100%,min(1400px,calc(100cqw - 48px))))/2)}}
.ds-language-tabs{gap:6px;flex-wrap:wrap;padding:7px;border:1px solid var(--border);border-radius:12px;background:var(--sidebar-surface);margin-top:24px}
.ds-language-tabs button{padding:9px 13px;background:transparent;border:0;font-size:13px;font-weight:650}
.ds-language-tabs button[aria-selected=true]{background:var(--accent);color:var(--panel)}
.ds-code-panel{min-width:0}.ds-code-panel:focus-visible{outline:3px solid var(--focus);outline-offset:5px;border-radius:10px}
.enhanced .ds-code-panel>h3{display:none}
@media(max-width:650px){.visualization-frame{border-width:7px;border-radius:24px}.ds-language-tabs{gap:3px}.ds-language-tabs button{padding:9px 11px}}