:root {
  --tree-line: var(--pico-muted-border-color);
  --tree-face: var(--pico-card-background-color);
  --tree-text: var(--pico-color);
  --tree-dim: var(--pico-muted-color);
  --tree-accent: var(--pico-primary);
  --tree-current: #1976d2;
  --tree-active: #e3f2fd;
  --tree-selected: #278c57;
  --tree-selected-bg: #e5f5eb;
  --tree-changed: #b26a00;
  --tree-changed-bg: #fff2d4;
  --tree-path: #8558a8;
  --tree-arrow: #626a72;
  --pico-font-family-sans-serif: "Fira Sans", system-ui, sans-serif;
  --pico-font-family-monospace: "Fira Code", ui-monospace, monospace;
  --pico-font-family: var(--pico-font-family-sans-serif);
}
@media (prefers-color-scheme: dark) {
  :root {
    --tree-current: #64b5f6;
    --tree-active: #123454;
    --tree-selected: #65c98f;
    --tree-selected-bg: #143b27;
    --tree-changed: #e7a643;
    --tree-changed-bg: #49330d;
    --tree-path: #bd8cdb;
    --tree-arrow: #aab2bb;
  }
}
[hidden] { display: none !important; }
main.container { max-width: none; width: 100%; box-sizing: border-box; padding: 1.5rem clamp(1rem, 3vw, 3rem) 3rem; }
header { margin-bottom: 1rem; }
header h1 { margin: 0; font-size: 1.45rem; }
.setup-panel > label { font-size: .8rem; color: var(--tree-dim); }
#setup { display: flex; width: min(48rem, 100%); margin: .2rem 0 0; }
#setup > input { flex: 1 1 20rem; min-width: 8rem; }
#setup button { flex: none; width: auto; white-space: nowrap; }
#setup > input, #setup > button { margin-bottom: 0; padding-block: .4rem; font-size: .8rem; }
#setup input, .operation-form input { font-family: var(--pico-font-family-monospace); }
.radio-set { display: flex; flex: none; align-items: center; gap: .65rem; width: auto; margin: 0; padding: .35rem .7rem; border: 1px solid var(--pico-form-element-border-color); border-radius: var(--pico-border-radius); }
.radio-set label, .choice-group label { display: flex; align-items: center; gap: .3rem; margin: 0; white-space: nowrap; font-size: .74rem; }
.radio-set input, .choice-group input { margin: 0; }
#operations { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; margin-top: 1rem; }
.operation-form { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; }
.operation-name { margin-right: .25rem; font-size: .78rem; font-weight: 600; }
.operation-form label { display: flex; align-items: center; gap: .3rem; margin: 0; color: var(--tree-dim); font-size: .72rem; }
.operation-form input { width: 5.5rem; margin: 0; padding-block: .35rem; font-size: .78rem; }
.operation-form button { width: auto; margin: 0; padding-block: .35rem; font-size: .78rem; }
.operation-form > span:not(.operation-name) { color: var(--tree-dim); font-size: .72rem; }
#controls { margin-top: 1rem; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.playback { margin: 0; }
.playback button { margin: 0; padding: .25rem .55rem; border-radius: 3px; font-size: .72rem; }
.playback .wide { min-width: 5.2rem; }
.speed { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--tree-dim); font-size: .72rem; }
.speed input { width: 7rem; height: .5rem; margin: 0; }
.speed output { min-width: 3rem; font-family: var(--pico-font-family-monospace); }
#scrub { height: .5rem; margin: .55rem 0 .3rem; }
#status { display: flex; gap: .55rem; min-height: 1.6rem; margin: 0; font-size: .82rem; }
#counter { flex: none; color: var(--tree-dim); font-family: var(--pico-font-family-monospace); }
#options { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem; margin: .4rem 0 0; }
#options > label { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .76rem; }
.choice-group { display: flex; align-items: center; gap: .7rem; width: auto; margin: 0; padding: 0; border: 0; }
.choice-group legend { float: left; width: auto; margin: 0 .1rem 0 0; padding: 0; color: var(--tree-dim); font-size: .76rem; }
#work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.3rem; align-items: start; }
#stage { overflow-x: auto; margin-top: .8rem; padding-block: .5rem; border-block: 1px solid var(--tree-line); }
.tree-board { display: block; margin-inline: auto; }
.tree-board text { font-family: var(--pico-font-family-monospace); pointer-events: none; }
.edge { stroke: var(--tree-line); stroke-width: 2; }
.edge.path { stroke: var(--tree-path); stroke-width: 3; stroke-dasharray: 5 3; }
.edge.selected { stroke: var(--tree-selected); stroke-width: 3; }
.subtree-boundary { stroke-width: 1.5; pointer-events: none; }
.subtree-boundary.path-subtree { fill: none; stroke: var(--tree-path); stroke-opacity: .22; stroke-dasharray: 4 3; }
.subtree-boundary.selected-subtree { fill: none; stroke: var(--tree-selected); stroke-opacity: .55; }
.subtree-boundary.hover-subtree { fill: none; stroke: var(--tree-accent); stroke-width: 2.5; }
.sibling-arrow { stroke: var(--tree-arrow); stroke-width: 2.5; stroke-dasharray: 5 3; marker-end: url(#sibling-arrow); }
#sibling-arrow path { fill: var(--tree-arrow); }
.node, .cell { fill: var(--tree-face); stroke: var(--tree-line); stroke-width: 1.5; }
.cell { rx: 4; }
.value { fill: var(--tree-text); font-size: 16px; text-anchor: middle; dominant-baseline: central; }
.range { fill: var(--tree-changed); font-size: 10px; text-anchor: middle; }
.cursor { fill: var(--tree-current); font-size: 12px; font-weight: 600; text-anchor: middle; }
.array-index { fill: var(--tree-accent); font-size: 12px; text-anchor: middle; }
.sequence-index { fill: var(--tree-changed); font-size: 12px; text-anchor: middle; }
.caption { fill: var(--tree-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.indexed.active .node, .indexed.active .cell { fill: var(--tree-active); stroke: var(--tree-current); stroke-width: 3; }
.indexed.selected .node, .indexed.selected .cell { fill: var(--tree-selected-bg); stroke: var(--tree-selected); stroke-width: 3; }
.indexed.changed .node, .indexed.changed .cell { fill: var(--tree-changed-bg); stroke: var(--tree-changed); stroke-width: 3; }
.indexed.path .node, .indexed.path .cell { stroke: var(--tree-path); stroke-width: 3; stroke-dasharray: 4 2; }
.indexed.hover .node, .indexed.hover .cell { fill: var(--tree-active); stroke: var(--tree-accent); stroke-width: 3.5; }
.range-guide { fill: none; stroke-width: 2.5; pointer-events: none; }
.range-guide.hover-range { stroke: var(--tree-accent); stroke-width: 3; }
.range-guide.selected-range { stroke: var(--tree-selected); }
.range-guide.changed-range { stroke: var(--tree-changed); }
.dummy .value { fill: var(--tree-dim); font-size: 14px; }
#reference { min-width: 0; margin-top: .8rem; }
#code-panel, .legend { margin: 0 0 1rem; padding: 0; }
#code-panel > header, .legend > header { margin: 0; padding: .6rem 1rem; color: var(--tree-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
#code { margin: 0; padding: .8rem 1rem; background: none; font-size: .76rem; line-height: 1.65; overflow-x: auto; }
#code .line { display: block; padding-inline: .4rem; border-radius: 3px; white-space: pre; }
#code .line.now { color: var(--tree-text); background: var(--tree-active); box-shadow: inset 2px 0 var(--tree-current); font-weight: 500; }
#code .hint { color: var(--tree-dim); white-space: normal; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; margin: 1rem 0 0; padding: .5rem 0; }
.legend > header { margin: 0; padding: 0; }
.legend p { margin: 0; color: var(--tree-dim); font-size: .72rem; }
.swatch { display: inline-block; width: .75rem; height: .75rem; margin-right: .35rem; border: 2px solid; border-radius: 50%; vertical-align: -.1rem; }
.swatch.current { background: var(--tree-active); border-color: var(--tree-current); }
.swatch.chosen { background: var(--tree-selected-bg); border-color: var(--tree-selected); }
.swatch.changed { background: var(--tree-changed-bg); border-color: var(--tree-changed); }
.swatch.path { background: var(--tree-face); border-color: var(--tree-path); border-radius: 2px; }
.dummy-mark { display: inline-block; width: .9rem; margin-right: .2rem; color: var(--tree-dim); font-family: var(--pico-font-family-monospace); text-align: center; }
footer { margin-top: 1.7rem; color: var(--tree-dim); }
footer kbd { font-size: .72rem; }
@media (min-width: 1050px) {
  #work { grid-template-columns: minmax(0, 1fr) 17rem; }
  #work:has(#code-panel[hidden]) { grid-template-columns: minmax(0, 1fr); }
  #work:has(#code-panel:not([hidden])) { grid-template-columns: minmax(0, 1fr) 31rem; }
}
@media (max-width: 640px) {
  main.container { padding-block: 1rem 2rem; }
  #setup { flex-wrap: wrap; }
  #setup > input { flex-basis: 100%; }
  #setup .radio-set { flex: 1 1 100%; justify-content: center; }
  #setup button { flex: 1; }
  .choice-group { flex-wrap: wrap; }
  .operation-form { width: 100%; }
  .operation-form button { flex: 1; }
  .playback { width: 100%; }
  .playback button { flex: 1; padding-inline: .25rem; }
  .playback .wide { min-width: 0; }
  .speed { width: 100%; }
  .speed input { flex: 1; }
  #status { align-items: flex-start; }
}