diff --git a/src/layer/segmentation/index.ts b/src/layer/segmentation/index.ts
index 70c602250..4cf4fb3a0 100644
--- a/src/layer/segmentation/index.ts
+++ b/src/layer/segmentation/index.ts
@@ -2195,7 +2195,7 @@ export class SegmentationUserLayer extends Base {
         : undefined;
     const nodeInfo = completeNodeInfo ?? previewNodeInfo;
     const container = document.createElement("div");
-    container.classList.add("neuroglancer-spatial-skeleton-selection");
+    container.classList.add("neuroglancer-selection-details-skeleton");
     parent.appendChild(container);
 
     const appendValue = (label: string, value: string | HTMLElement) => {
@@ -2223,7 +2223,7 @@ export class SegmentationUserLayer extends Base {
       );
       const segmentIdChip = document.createElement("span");
       segmentIdChip.className =
-        "neuroglancer-spatial-skeleton-node-segment-chip";
+        "neuroglancer-selection-details-skeleton-segment-chip";
       segmentIdChip.textContent = `${segmentId}`;
       segmentIdChip.style.backgroundColor = segmentChipColors.background;
       segmentIdChip.style.color = segmentChipColors.foreground;
@@ -2282,7 +2282,7 @@ export class SegmentationUserLayer extends Base {
             nodeType,
           });
     const summaryRow = document.createElement("div");
-    summaryRow.classList.add("neuroglancer-spatial-skeleton-selection-summary");
+    summaryRow.classList.add("neuroglancer-selection-details-skeleton-summary");
     container.appendChild(summaryRow);
 
     const editSource = getEditableSpatiallyIndexedSkeletonSource(skeletonLayer);
@@ -2301,7 +2301,7 @@ export class SegmentationUserLayer extends Base {
               );
     const rerootButton = document.createElement("button");
     rerootButton.type = "button";
-    rerootButton.className = "neuroglancer-spatial-skeleton-selection-action";
+    rerootButton.className = "neuroglancer-selection-details-skeleton-action";
     rerootButton.disabled = rerootDisabledReason !== undefined;
     rerootButton.title = rerootDisabledReason ?? "Set as root";
     rerootButton.appendChild(
@@ -2347,7 +2347,7 @@ export class SegmentationUserLayer extends Base {
               );
     const deleteButton = document.createElement("button");
     deleteButton.type = "button";
-    deleteButton.className = "neuroglancer-spatial-skeleton-selection-action";
+    deleteButton.className = "neuroglancer-selection-details-skeleton-action";
     deleteButton.disabled = deleteDisabledReason !== undefined;
     deleteButton.title = deleteDisabledReason ?? "Delete node";
     deleteButton.appendChild(
@@ -2378,7 +2378,7 @@ export class SegmentationUserLayer extends Base {
     summaryRow.appendChild(deleteButton);
 
     const icon = document.createElement("span");
-    icon.className = "neuroglancer-spatial-skeleton-selection-summary-icon";
+    icon.className = "neuroglancer-selection-details-skeleton-summary-icon";
     const nodeTypeIconTitle =
       iconFilterType !== undefined
         ? getSpatialSkeletonNodeFilterLabel(iconFilterType)
@@ -2429,7 +2429,7 @@ export class SegmentationUserLayer extends Base {
     );
     const summaryCoordinates = document.createElement("span");
     summaryCoordinates.className =
-      "neuroglancer-spatial-skeleton-selection-summary-coordinates";
+      "neuroglancer-selection-details-skeleton-summary-coordinates";
     summaryCoordinates.textContent = position.displayText;
     summaryCoordinates.title = position.fullText;
     summaryRow.appendChild(summaryCoordinates);
@@ -2449,8 +2449,8 @@ export class SegmentationUserLayer extends Base {
       let committedTrueEnd = nodeHasTrueEnd;
       let leafTypeSavePending = false;
       const leafTypeEditor = document.createElement("div");
-      leafTypeEditor.className = "neuroglancer-spatial-skeleton-leaf-type";
-      const leafTypeRadioName = `neuroglancer-spatial-skeleton-leaf-type-${segmentId}-${fullNodeInfo.nodeId}`;
+      leafTypeEditor.className = "neuroglancer-selection-details-skeleton-leaf-type";
+      const leafTypeRadioName = `neuroglancer-selection-details-skeleton-leaf-type-${segmentId}-${fullNodeInfo.nodeId}`;
       const leafTypeOptionElements: HTMLLabelElement[] = [];
       const makeLeafTypeOption = (options: {
         label: string;
@@ -2458,15 +2458,15 @@ export class SegmentationUserLayer extends Base {
         trueEnd: boolean;
       }) => {
         const option = document.createElement("label");
-        option.className = "neuroglancer-spatial-skeleton-leaf-type-option";
+        option.className = "neuroglancer-selection-details-skeleton-leaf-type-option";
         const input = document.createElement("input");
         input.type = "radio";
         input.name = leafTypeRadioName;
         input.value = options.trueEnd ? "trueEnd" : "virtualEnd";
         input.className =
-          "neuroglancer-spatial-skeleton-leaf-type-option-input";
+          "neuroglancer-selection-details-skeleton-leaf-type-option-input";
         const icon = document.createElement("span");
-        icon.className = "neuroglancer-spatial-skeleton-leaf-type-option-icon";
+        icon.className = "neuroglancer-selection-details-skeleton-leaf-type-option-icon";
         icon.appendChild(
           makeIcon({
             svg: options.svg,
@@ -2475,7 +2475,7 @@ export class SegmentationUserLayer extends Base {
           }),
         );
         const text = document.createElement("span");
-        text.className = "neuroglancer-spatial-skeleton-leaf-type-option-text";
+        text.className = "neuroglancer-selection-details-skeleton-leaf-type-option-text";
         text.textContent = options.label;
         option.appendChild(input);
         option.appendChild(icon);
@@ -2509,7 +2509,7 @@ export class SegmentationUserLayer extends Base {
         }
         for (const option of leafTypeOptionElements) {
           option.classList.toggle(
-            "neuroglancer-spatial-skeleton-leaf-type-option-disabled",
+            "neuroglancer-selection-details-skeleton-leaf-type-option-disabled",
             !editable,
           );
           if (disabledReason !== undefined) {
@@ -2585,7 +2585,7 @@ export class SegmentationUserLayer extends Base {
       disabledReason: string | undefined,
     ) => {
       input.classList.toggle(
-        "neuroglancer-spatial-skeleton-properties-input-invalid",
+        "neuroglancer-selection-details-skeleton-properties-input-invalid",
         !valid,
       );
       if (disabledReason !== undefined) {
@@ -2639,7 +2639,7 @@ export class SegmentationUserLayer extends Base {
     } else {
       let committedRadius = fullNodeInfo.radius ?? 0;
       const radiusInput = document.createElement("input");
-      radiusInput.className = "neuroglancer-spatial-skeleton-properties-input";
+      radiusInput.className = "neuroglancer-selection-details-skeleton-properties-input";
       radiusInput.type = "number";
       radiusInput.step = "any";
       radiusInput.value = formatSpatialSkeletonEditableNumber(
@@ -2744,7 +2744,7 @@ export class SegmentationUserLayer extends Base {
       );
       const confidenceControl = document.createElement("select");
       confidenceControl.className =
-        "neuroglancer-spatial-skeleton-properties-input";
+        "neuroglancer-selection-details-skeleton-properties-input";
       for (const value of confidenceSelectValues) {
         const option = document.createElement("option");
         option.value = value.toString();
@@ -2845,7 +2845,7 @@ export class SegmentationUserLayer extends Base {
     if (descriptionEditingDisabledReason === undefined) {
       const descriptionElement = document.createElement("textarea");
       descriptionElement.classList.add(
-        "neuroglancer-spatial-skeleton-selection-description",
+        "neuroglancer-selection-details-skeleton-description",
       );
       descriptionElement.rows = 3;
       descriptionElement.placeholder = "Description";
@@ -2895,7 +2895,7 @@ export class SegmentationUserLayer extends Base {
     } else if (descriptionText.length > 0) {
       const descriptionElement = document.createElement("div");
       descriptionElement.classList.add(
-        "neuroglancer-spatial-skeleton-selection-description",
+        "neuroglancer-selection-details-skeleton-description",
       );
       descriptionElement.textContent = descriptionText;
       descriptionElement.title = descriptionEditingDisabledReason;
diff --git a/src/layer/segmentation/style.css b/src/layer/segmentation/style.css
index 6f92b2f3a..2bec3029a 100644
--- a/src/layer/segmentation/style.css
+++ b/src/layer/segmentation/style.css
@@ -168,496 +168,12 @@
   padding: 0;
 }
 
-.neuroglancer-spatial-skeleton-toolbar {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.1em 0.2em;
-  width: 100%;
-}
-
-.neuroglancer-spatial-skeleton-toolbar
-  .neuroglancer-tool-button
-  + .neuroglancer-tool-button {
-  margin-left: 0.35em;
-}
-
-.neuroglancer-spatial-skeleton-toolbar-actions {
-  display: inline-flex;
-  align-items: center;
-  margin-left: auto;
-  gap: 0.1em;
-}
-
-.neuroglancer-spatial-skeleton-nav-tools {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
-  flex: 0 0 auto;
-  justify-content: flex-start;
-  gap: 0.1em;
-}
-
-.neuroglancer-spatial-skeleton-icon-button {
-  border: 0;
-  background: transparent;
-  color: inherit;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-}
-
-.neuroglancer-spatial-skeleton-icon-button .neuroglancer-icon {
-  min-width: 14px;
-  min-height: 14px;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.neuroglancer-spatial-skeleton-icon-button:hover .neuroglancer-icon {
-  background-color: #db4437;
-}
-
-.neuroglancer-spatial-skeleton-icon-button:disabled {
-  opacity: 0.35;
-  cursor: default;
-}
-
-.neuroglancer-spatial-skeleton-icon-button:disabled .neuroglancer-icon {
-  background-color: transparent;
-}
-
-.neuroglancer-spatial-skeleton-tab {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5em;
-  overflow-y: auto;
-}
-
-.neuroglancer-spatial-skeleton-tab-status {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25em;
-  font-size: small;
-}
-
-.neuroglancer-spatial-skeleton-section {
-  --neuroglancer-skeleton-actions-width: 44px;
-  --neuroglancer-skeleton-type-width: 21px;
-  border: 1px solid #2f2f2f;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.neuroglancer-spatial-skeleton-section-toggle {
-  border: 1px solid #2f2f2f;
-  background: #101010;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  width: 1.5em;
-  height: 1.5em;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.neuroglancer-spatial-skeleton-section-toggle .neuroglancer-icon {
-  min-width: 14px;
-  min-height: 14px;
-}
-
-.neuroglancer-spatial-skeleton-section-toggle:hover .neuroglancer-icon {
-  background-color: #3a3a3a;
-}
-
-.neuroglancer-spatial-skeleton-filter {
-  box-sizing: border-box;
-  margin: 0 0.4em;
-  width: calc(100% - 0.8em);
-  background: #050505;
-  border: 1px solid #2f2f2f;
-  color: #dedede;
-  font-family: monospace;
-  padding: 0.32em 0.45em;
-}
-
-.neuroglancer-spatial-skeleton-filter-row {
-  display: flex;
-  align-items: center;
-  gap: 0.45em;
-  margin: 0.35em 0.4em 0;
-  color: #c6c6c6;
-  font-size: small;
-}
-
-.neuroglancer-spatial-skeleton-filter-label {
-  flex: 0 0 auto;
-}
-
-.neuroglancer-spatial-skeleton-show-section {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25em;
-  margin: 0.35em 0.4em 0;
-  color: #c6c6c6;
-  font-size: small;
-}
-
-.neuroglancer-spatial-skeleton-show-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2em;
-  max-height: 10.5em;
-  overflow-y: auto;
-}
-
-.neuroglancer-spatial-skeleton-navigation-bar {
-  display: flex;
-  align-items: center;
-  padding: 0.35em 0.4em 0 0.4em;
-}
-
-.neuroglancer-spatial-skeleton-show-item {
-  display: grid;
-  grid-template-columns: 1.35em minmax(0, 1fr);
-  align-items: center;
-  gap: 0.45em;
-  padding: 0.18em 0.32em 0.18em 0.15em;
-  border: 1px solid #2f2f2f;
-  background: #232323;
-  color: #e4e4e4;
-  font-family: monospace;
-}
-
-.neuroglancer-spatial-skeleton-show-item:hover {
-  background: #2a2a2a;
-}
-
-.neuroglancer-spatial-skeleton-show-checkbox {
-  width: 1.15em;
-  height: 1.15em;
-  margin: 0;
-  accent-color: #1473e6;
-}
-
-.neuroglancer-spatial-skeleton-show-item-content {
-  display: grid;
-  grid-template-columns: min-content minmax(0, 1fr) min-content;
-  align-items: center;
-  gap: 0.45em;
-  min-width: 0;
-}
-
-.neuroglancer-spatial-skeleton-show-item-name,
-.neuroglancer-spatial-skeleton-segment-name {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.neuroglancer-spatial-skeleton-show-item-ratio,
-.neuroglancer-spatial-skeleton-segment-ratio {
-  color: #adadad;
-  white-space: nowrap;
-}
-
-.neuroglancer-spatial-skeleton-filter-select {
-  box-sizing: border-box;
-  margin: 0;
-  flex: 1 1 auto;
-  width: auto;
-  background: #050505;
-  border: 1px solid #2f2f2f;
-  color: #dedede;
-  font: inherit;
-  padding: 0.32em 0.45em;
-}
-
-.neuroglancer-spatial-skeleton-filter-select:focus-visible {
-  outline: 1px solid #6ca4ff;
-  outline-offset: -1px;
-}
-
-.neuroglancer-spatial-skeleton-summary-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5em;
-  padding: 0.25em 0.4em 0.25em 0.4em;
-}
-
-.neuroglancer-spatial-skeleton-summary {
-  font-size: small;
-  color: #c6c6c6;
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.neuroglancer-spatial-skeleton-tree {
-  display: flex;
-  flex-direction: column;
-  min-height: 24em;
-  max-height: 60vh;
-  flex: 1 1 auto;
-  overflow-y: auto;
-  background: #050505;
-  border-top: 1px solid #1e1e1e;
-}
-
-.neuroglancer-spatial-skeleton-list-header,
-.neuroglancer-spatial-skeleton-tree-row {
-  display: grid;
-  grid-template-columns:
-    var(--neuroglancer-skeleton-actions-width)
-    var(--neuroglancer-skeleton-type-width)
-    minmax(58px, 104px)
-    minmax(0, 1fr);
-  align-items: center;
-  column-gap: 3px;
-  padding: 0 4px;
-}
-
-.neuroglancer-spatial-skeleton-list-header {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  min-height: 1.7em;
-  background: #3a3a3a;
-  color: #f0f0f0;
-  font-family: monospace;
-  font-size: 11px;
-  text-transform: lowercase;
-}
-
-.neuroglancer-spatial-skeleton-list-header-spacer {
-  display: block;
-}
-
-.neuroglancer-spatial-skeleton-list-header-actions {
-  width: var(--neuroglancer-skeleton-actions-width);
-}
-
-.neuroglancer-spatial-skeleton-list-header-type {
-  width: var(--neuroglancer-skeleton-type-width);
-}
-
-.neuroglancer-spatial-skeleton-list-header-cell {
-  min-width: 0;
-}
-
-.neuroglancer-spatial-skeleton-tree-entry {
-  display: flex;
-  flex-direction: column;
-}
-
-.neuroglancer-spatial-skeleton-tree-row {
-  min-height: 1.6em;
-  color: #d2d2d2;
-  font-family: monospace;
-  font-size: small;
-  background: #050505;
-  transition: background-color 0.12s ease-in-out;
-}
-
-.neuroglancer-spatial-skeleton-tree-row[role="button"] {
-  cursor: pointer;
-}
-
-.neuroglancer-spatial-skeleton-tree-row[role="button"]:focus-visible {
-  outline: 1px solid #6ca4ff;
-  outline-offset: -1px;
-}
-
-.neuroglancer-spatial-skeleton-tree-entry[data-selected="true"]
-  .neuroglancer-spatial-skeleton-tree-row {
-  background: #242d3c;
-}
-
-.neuroglancer-spatial-skeleton-tree-entry[data-viewer-hovered="true"]
-  .neuroglancer-spatial-skeleton-tree-row:not([data-node-type="root"]) {
-  background: #18253a;
-}
-
-.neuroglancer-spatial-skeleton-tree-entry[data-viewer-hovered="true"]
-  .neuroglancer-spatial-skeleton-tree-row[data-node-type="root"] {
-  background: #364257;
-}
-
-.neuroglancer-spatial-skeleton-tree-row[data-node-type="root"] {
-  background: #2e2e2e;
-}
-
-.neuroglancer-spatial-skeleton-tree-entry[data-selected="true"]
-  .neuroglancer-spatial-skeleton-tree-row[data-node-type="root"] {
-  background: #394558;
-}
-
-.neuroglancer-spatial-skeleton-tree-entry[data-selected="true"][data-viewer-hovered="true"]
-  .neuroglancer-spatial-skeleton-tree-row {
-  background: #294067;
-}
-
-.neuroglancer-spatial-skeleton-tree-entry[data-selected="true"][data-viewer-hovered="true"]
-  .neuroglancer-spatial-skeleton-tree-row[data-node-type="root"] {
-  background: #3f5471;
-}
-
-.neuroglancer-spatial-skeleton-segment-row {
-  min-height: 1.75em;
-  background: #2e2e2e;
-  color: #f0f0f0;
-}
-
-.neuroglancer-spatial-skeleton-segment-meta-line {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75em;
-  min-width: 0;
-}
-
-.neuroglancer-spatial-skeleton-tree-entry:not(
-    [data-selected="true"]
-  )[data-list-hovered="true"]
-  .neuroglancer-spatial-skeleton-tree-row:not([data-node-type="root"]) {
-  background: #121212;
-}
-
-.neuroglancer-spatial-skeleton-tree-entry:hover
-  .neuroglancer-spatial-skeleton-segment-row {
-  background: #2e2e2e;
-}
-
-.neuroglancer-spatial-skeleton-node-id {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.neuroglancer-spatial-skeleton-node-coordinate-cell {
-  min-width: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.neuroglancer-spatial-skeleton-node-coordinates {
-  overflow: hidden;
-  color: #d7d7d7;
-}
-
-.neuroglancer-spatial-skeleton-coordinates-flex {
-  display: flex;
-  flex-direction: row;
-}
-
-.neuroglancer-spatial-skeleton-coord-dim {
-  flex: 1 1 0;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.neuroglancer-spatial-skeleton-node-description {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #a7a7a7;
-  font-size: 11px;
-}
-
-.neuroglancer-spatial-skeleton-node-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.1em;
-  width: var(--neuroglancer-skeleton-actions-width);
-  visibility: hidden;
-  pointer-events: none;
-  justify-content: flex-start;
-}
-
-.neuroglancer-spatial-skeleton-tree-entry[data-list-hovered="true"]
-  .neuroglancer-spatial-skeleton-node-actions,
-.neuroglancer-spatial-skeleton-tree-entry:focus-within
-  .neuroglancer-spatial-skeleton-node-actions {
-  visibility: visible;
-  pointer-events: auto;
-}
-
-.neuroglancer-spatial-skeleton-node-type,
-.neuroglancer-spatial-skeleton-node-type-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--neuroglancer-skeleton-type-width);
-  min-height: 1.4em;
-  color: #cfcfcf;
-}
-
-.neuroglancer-spatial-skeleton-node-type-toggle {
-  border: 0;
-  background: transparent;
-  padding: 0;
-  cursor: pointer;
-}
-
-.neuroglancer-spatial-skeleton-node-type .neuroglancer-icon,
-.neuroglancer-spatial-skeleton-node-type-toggle .neuroglancer-icon {
-  min-width: 14px;
-  min-height: 14px;
-}
-
-.neuroglancer-spatial-skeleton-node-type-toggle:hover .neuroglancer-icon {
-  background-color: #3a3a3a;
-}
-
-.neuroglancer-spatial-skeleton-node-type-toggle:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-
-.neuroglancer-spatial-skeleton-node-type-toggle:disabled .neuroglancer-icon {
-  background-color: transparent;
-}
-
-.neuroglancer-spatial-skeleton-node-action {
-  border: 1px solid #2f2f2f;
-  background: #0d0d0d;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  width: 1.5em;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.neuroglancer-spatial-skeleton-node-action .neuroglancer-icon {
-  min-width: 14px;
-  min-height: 14px;
-}
-
-.neuroglancer-spatial-skeleton-node-action:hover .neuroglancer-icon {
-  background-color: #db4437;
-}
-
-.neuroglancer-spatial-skeleton-node-action:disabled {
-  opacity: 0.35;
-  cursor: default;
-}
-
-.neuroglancer-spatial-skeleton-node-action:disabled .neuroglancer-icon {
-  background-color: transparent;
+.neuroglancer-segment-list-entry
+  .neuroglancer-segment-list-entry-color-input::-webkit-color-swatch {
+  border: none;
 }
 
-.neuroglancer-spatial-skeleton-node-segment-chip {
+.neuroglancer-selection-details-skeleton-segment-chip {
   display: inline-flex;
   align-items: center;
   min-height: 1.2em;
@@ -665,7 +181,7 @@
   font-weight: 600;
 }
 
-.neuroglancer-spatial-skeleton-properties-input {
+.neuroglancer-selection-details-skeleton-properties-input {
   width: 100%;
   box-sizing: border-box;
   border: 1px solid #717171;
@@ -676,22 +192,22 @@
   font: inherit;
 }
 
-.neuroglancer-spatial-skeleton-properties-input-invalid {
+.neuroglancer-selection-details-skeleton-properties-input-invalid {
   border-color: #c94f4f;
   background: #9f7b7b;
 }
 
-.neuroglancer-spatial-skeleton-properties-input::placeholder {
+.neuroglancer-selection-details-skeleton-properties-input::placeholder {
   color: #2a2a2a;
 }
 
-.neuroglancer-spatial-skeleton-selection {
+.neuroglancer-selection-details-skeleton {
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
 }
 
-.neuroglancer-spatial-skeleton-selection-summary {
+.neuroglancer-selection-details-skeleton-summary {
   display: grid;
   grid-template-columns: auto auto auto minmax(0, 1fr);
   align-items: center;
@@ -702,7 +218,7 @@
   font-size: medium;
 }
 
-.neuroglancer-spatial-skeleton-selection-action {
+.neuroglancer-selection-details-skeleton-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -715,27 +231,27 @@
   transition: background-color 0.12s ease-in-out;
 }
 
-.neuroglancer-spatial-skeleton-selection-action:disabled {
+.neuroglancer-selection-details-skeleton-action:disabled {
   opacity: 0.45;
   cursor: default;
 }
 
-.neuroglancer-spatial-skeleton-selection-action:not(:disabled):hover {
+.neuroglancer-selection-details-skeleton-action:not(:disabled):hover {
   background: rgba(255, 255, 255, 0.08);
 }
 
-.neuroglancer-spatial-skeleton-selection-summary-icon {
+.neuroglancer-selection-details-skeleton-summary-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-.neuroglancer-spatial-skeleton-selection-summary-icon .neuroglancer-icon {
+.neuroglancer-selection-details-skeleton-summary-icon .neuroglancer-icon {
   min-width: 14px;
   min-height: 14px;
 }
 
-.neuroglancer-spatial-skeleton-selection-summary-coordinates {
+.neuroglancer-selection-details-skeleton-summary-coordinates {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -743,7 +259,7 @@
   user-select: text;
 }
 
-.neuroglancer-spatial-skeleton-selection .neuroglancer-annotation-property {
+.neuroglancer-selection-details-skeleton .neuroglancer-annotation-property {
   display: grid;
   grid-template-columns: 8rem minmax(0, 1fr);
   align-items: center;
@@ -751,12 +267,12 @@
   padding: 0 0.1rem;
 }
 
-.neuroglancer-spatial-skeleton-selection
+.neuroglancer-selection-details-skeleton
   .neuroglancer-annotation-property-label {
   color: #b0b0b0;
 }
 
-.neuroglancer-spatial-skeleton-selection
+.neuroglancer-selection-details-skeleton
   .neuroglancer-annotation-property-value {
   color: #f0f0f0;
   min-width: 0;
@@ -765,14 +281,14 @@
   justify-content: flex-end;
 }
 
-.neuroglancer-spatial-skeleton-leaf-type {
+.neuroglancer-selection-details-skeleton-leaf-type {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.28rem;
 }
 
-.neuroglancer-spatial-skeleton-leaf-type-option {
+.neuroglancer-selection-details-skeleton-leaf-type-option {
   display: inline-flex;
   align-items: center;
   gap: 0.38rem;
@@ -780,32 +296,32 @@
   cursor: pointer;
 }
 
-.neuroglancer-spatial-skeleton-leaf-type-option-disabled {
+.neuroglancer-selection-details-skeleton-leaf-type-option-disabled {
   cursor: default;
   opacity: 0.65;
 }
 
-.neuroglancer-spatial-skeleton-leaf-type-option-input {
+.neuroglancer-selection-details-skeleton-leaf-type-option-input {
   margin: 0;
   accent-color: #4f8dff;
 }
 
-.neuroglancer-spatial-skeleton-leaf-type-option-icon {
+.neuroglancer-selection-details-skeleton-leaf-type-option-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-.neuroglancer-spatial-skeleton-leaf-type-option-icon .neuroglancer-icon {
+.neuroglancer-selection-details-skeleton-leaf-type-option-icon .neuroglancer-icon {
   min-width: 14px;
   min-height: 14px;
 }
 
-.neuroglancer-spatial-skeleton-leaf-type-option-text {
+.neuroglancer-selection-details-skeleton-leaf-type-option-text {
   white-space: nowrap;
 }
 
-.neuroglancer-spatial-skeleton-selection-description {
+.neuroglancer-selection-details-skeleton-description {
   width: 100%;
   box-sizing: border-box;
   min-height: 5rem;
@@ -820,24 +336,8 @@
   user-select: text;
 }
 
-textarea.neuroglancer-spatial-skeleton-selection-description {
+textarea.neuroglancer-selection-details-skeleton-description {
   outline: 0;
   resize: none;
   overflow-y: auto;
 }
-
-.neuroglancer-spatial-skeleton-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25em;
-}
-
-.neuroglancer-spatial-skeleton-actions > button {
-  flex: 1 1 auto;
-  min-width: 6em;
-}
-
-.neuroglancer-spatial-skeleton-description {
-  min-height: 5em;
-  resize: vertical;
-}
diff --git a/src/ui/skeleton_edit_tools.css b/src/ui/skeleton_edit_tools.css
index 537cd69ab..5858f92b1 100644
--- a/src/ui/skeleton_edit_tools.css
+++ b/src/ui/skeleton_edit_tools.css
@@ -14,19 +14,19 @@
  * limitations under the License.
  */
 
-.neuroglancer-spatial-skeleton-tool-status {
+.neuroglancer-skeleton-tool-status {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.4rem;
 }
 
-.neuroglancer-spatial-skeleton-tool-status-message {
+.neuroglancer-skeleton-tool-status-message {
   display: inline-flex;
   align-items: center;
 }
 
-.neuroglancer-spatial-skeleton-tool-status-point {
+.neuroglancer-skeleton-tool-status-point {
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
@@ -34,14 +34,14 @@
   color: #e6cb57;
 }
 
-.neuroglancer-spatial-skeleton-tool-status-point-field {
+.neuroglancer-skeleton-tool-status-point-field {
   display: inline-flex;
   align-items: center;
   gap: 0.2rem;
   font-weight: 600;
 }
 
-.neuroglancer-spatial-skeleton-tool-status-point-field-label,
-.neuroglancer-spatial-skeleton-tool-status-point-field-value {
+.neuroglancer-skeleton-tool-status-point-field-label,
+.neuroglancer-skeleton-tool-status-point-field-value {
   color: inherit;
 }
diff --git a/src/ui/skeleton_edit_tools.ts b/src/ui/skeleton_edit_tools.ts
index fe5e88f5f..03459bb46 100644
--- a/src/ui/skeleton_edit_tools.ts
+++ b/src/ui/skeleton_edit_tools.ts
@@ -144,28 +144,28 @@ function renderSpatialSkeletonToolStatus(
   },
 ) {
   removeChildren(body);
-  body.classList.add("neuroglancer-spatial-skeleton-tool-status");
+  body.classList.add("neuroglancer-skeleton-tool-status");
   const message = document.createElement("span");
-  message.className = "neuroglancer-spatial-skeleton-tool-status-message";
+  message.className = "neuroglancer-skeleton-tool-status-message";
   message.textContent = options.message;
   body.appendChild(message);
   if (options.point === undefined) {
     return;
   }
   const point = document.createElement("span");
-  point.className = "neuroglancer-spatial-skeleton-tool-status-point";
+  point.className = "neuroglancer-skeleton-tool-status-point";
   for (const field of getSpatialSkeletonToolPointStatusFields(options.point)) {
     const fieldElement = document.createElement("span");
     fieldElement.className =
-      "neuroglancer-spatial-skeleton-tool-status-point-field";
+      "neuroglancer-skeleton-tool-status-point-field";
     const label = document.createElement("span");
     label.className =
-      "neuroglancer-spatial-skeleton-tool-status-point-field-label";
+      "neuroglancer-skeleton-tool-status-point-field-label";
     label.textContent = field.label;
     fieldElement.appendChild(label);
     const value = document.createElement("span");
     value.className =
-      "neuroglancer-spatial-skeleton-tool-status-point-field-value";
+      "neuroglancer-skeleton-tool-status-point-field-value";
     value.textContent = field.value;
     fieldElement.appendChild(value);
     point.appendChild(fieldElement);
diff --git a/src/ui/skeleton_tab.css b/src/ui/skeleton_tab.css
new file mode 100644
index 000000000..76396a953
--- /dev/null
+++ b/src/ui/skeleton_tab.css
@@ -0,0 +1,430 @@
+/**
+ * @license
+ * Copyright 2026 Google Inc.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.neuroglancer-skeleton-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.1em 0.2em;
+  width: 100%;
+}
+
+.neuroglancer-skeleton-toolbar
+  .neuroglancer-tool-button
+  + .neuroglancer-tool-button {
+  margin-left: 0.35em;
+}
+
+.neuroglancer-skeleton-toolbar-actions {
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+  gap: 0.1em;
+}
+
+.neuroglancer-skeleton-nav-tools {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  flex: 0 0 auto;
+  justify-content: flex-start;
+  gap: 0.1em;
+}
+
+.neuroglancer-skeleton-icon-button {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.neuroglancer-skeleton-icon-button .neuroglancer-icon {
+  min-width: 14px;
+  min-height: 14px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.neuroglancer-skeleton-icon-button:hover .neuroglancer-icon {
+  background-color: #db4437;
+}
+
+.neuroglancer-skeleton-icon-button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.neuroglancer-skeleton-icon-button:disabled .neuroglancer-icon {
+  background-color: transparent;
+}
+
+.neuroglancer-skeleton-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  overflow-y: auto;
+}
+
+.neuroglancer-skeleton-section {
+  --neuroglancer-skeleton-actions-width: 44px;
+  --neuroglancer-skeleton-type-width: 21px;
+  border: 1px solid #2f2f2f;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.neuroglancer-skeleton-filter {
+  box-sizing: border-box;
+  margin: 0 0.4em;
+  width: calc(100% - 0.8em);
+  background: #050505;
+  border: 1px solid #2f2f2f;
+  color: #dedede;
+  font-family: monospace;
+  padding: 0.32em 0.45em;
+}
+
+.neuroglancer-skeleton-filter-row {
+  display: flex;
+  align-items: center;
+  gap: 0.45em;
+  margin: 0.35em 0.4em 0;
+  color: #c6c6c6;
+  font-size: small;
+}
+
+.neuroglancer-skeleton-filter-label {
+  flex: 0 0 auto;
+}
+
+.neuroglancer-skeleton-navigation-bar {
+  display: flex;
+  align-items: center;
+  padding: 0.35em 0.4em 0 0.4em;
+}
+
+.neuroglancer-skeleton-segment-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.neuroglancer-skeleton-node-ratio {
+  color: #adadad;
+  white-space: nowrap;
+}
+
+.neuroglancer-skeleton-filter-select {
+  box-sizing: border-box;
+  margin: 0;
+  flex: 1 1 auto;
+  width: auto;
+  background: #050505;
+  border: 1px solid #2f2f2f;
+  color: #dedede;
+  font: inherit;
+  padding: 0.32em 0.45em;
+}
+
+.neuroglancer-skeleton-filter-select:focus-visible {
+  outline: 1px solid #6ca4ff;
+  outline-offset: -1px;
+}
+
+.neuroglancer-skeleton-summary-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  padding: 0.25em 0.4em 0.25em 0.4em;
+}
+
+.neuroglancer-skeleton-summary {
+  font-size: small;
+  color: #c6c6c6;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.neuroglancer-skeleton-tree {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  background: #050505;
+  border-top: 1px solid #1e1e1e;
+}
+
+.neuroglancer-skeleton-list-header,
+.neuroglancer-skeleton-tree-row {
+  display: grid;
+  grid-template-columns:
+    var(--neuroglancer-skeleton-actions-width)
+    var(--neuroglancer-skeleton-type-width)
+    minmax(58px, 104px)
+    minmax(0, 1fr);
+  align-items: center;
+  column-gap: 3px;
+  padding: 0 4px;
+}
+
+.neuroglancer-skeleton-list-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  min-height: 1.7em;
+  background: #3a3a3a;
+  color: #f0f0f0;
+  font-family: monospace;
+  font-size: 11px;
+  text-transform: lowercase;
+}
+
+.neuroglancer-skeleton-list-header-spacer {
+  display: block;
+}
+
+.neuroglancer-skeleton-list-header-actions {
+  width: var(--neuroglancer-skeleton-actions-width);
+}
+
+.neuroglancer-skeleton-list-header-type {
+  width: var(--neuroglancer-skeleton-type-width);
+}
+
+.neuroglancer-skeleton-list-header-cell {
+  min-width: 0;
+}
+
+.neuroglancer-skeleton-tree-entry {
+  display: flex;
+  flex-direction: column;
+}
+
+.neuroglancer-skeleton-tree-row {
+  min-height: 1.6em;
+  color: #d2d2d2;
+  font-family: monospace;
+  font-size: small;
+  background: #050505;
+  transition: background-color 0.12s ease-in-out;
+}
+
+.neuroglancer-skeleton-tree-row[role="button"] {
+  cursor: pointer;
+}
+
+.neuroglancer-skeleton-tree-row[role="button"]:focus-visible {
+  outline: 1px solid #6ca4ff;
+  outline-offset: -1px;
+}
+
+.neuroglancer-skeleton-tree-entry[data-selected="true"]
+  .neuroglancer-skeleton-tree-row {
+  background: #242d3c;
+}
+
+.neuroglancer-skeleton-tree-entry[data-viewer-hovered="true"]
+  .neuroglancer-skeleton-tree-row:not([data-node-type="root"]) {
+  background: #18253a;
+}
+
+.neuroglancer-skeleton-tree-entry[data-viewer-hovered="true"]
+  .neuroglancer-skeleton-tree-row[data-node-type="root"] {
+  background: #364257;
+}
+
+.neuroglancer-skeleton-tree-row[data-node-type="root"] {
+  background: #2e2e2e;
+}
+
+.neuroglancer-skeleton-tree-entry[data-selected="true"]
+  .neuroglancer-skeleton-tree-row[data-node-type="root"] {
+  background: #394558;
+}
+
+.neuroglancer-skeleton-tree-entry[data-selected="true"][data-viewer-hovered="true"]
+  .neuroglancer-skeleton-tree-row {
+  background: #294067;
+}
+
+.neuroglancer-skeleton-tree-entry[data-selected="true"][data-viewer-hovered="true"]
+  .neuroglancer-skeleton-tree-row[data-node-type="root"] {
+  background: #3f5471;
+}
+
+.neuroglancer-skeleton-segment-row {
+  min-height: 1.75em;
+  background: #2e2e2e;
+  color: #f0f0f0;
+}
+
+.neuroglancer-skeleton-segment-meta-line {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75em;
+  min-width: 0;
+}
+
+.neuroglancer-skeleton-tree-entry:not(
+    [data-selected="true"]
+  )[data-list-hovered="true"]
+  .neuroglancer-skeleton-tree-row:not([data-node-type="root"]) {
+  background: #121212;
+}
+
+.neuroglancer-skeleton-tree-entry:hover .neuroglancer-skeleton-segment-row {
+  background: #2e2e2e;
+}
+
+.neuroglancer-skeleton-node-id {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.neuroglancer-skeleton-node-coordinate-cell {
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.neuroglancer-skeleton-node-coordinates {
+  overflow: hidden;
+  color: #d7d7d7;
+}
+
+.neuroglancer-skeleton-coordinates-flex {
+  display: flex;
+  flex-direction: row;
+}
+
+.neuroglancer-skeleton-coord-dim {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.neuroglancer-skeleton-node-description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #a7a7a7;
+  font-size: 11px;
+}
+
+.neuroglancer-skeleton-node-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.1em;
+  width: var(--neuroglancer-skeleton-actions-width);
+  visibility: hidden;
+  pointer-events: none;
+  justify-content: flex-start;
+}
+
+.neuroglancer-skeleton-tree-entry[data-list-hovered="true"]
+  .neuroglancer-skeleton-node-actions,
+.neuroglancer-skeleton-tree-entry:focus-within
+  .neuroglancer-skeleton-node-actions {
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.neuroglancer-skeleton-node-type,
+.neuroglancer-skeleton-node-type-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--neuroglancer-skeleton-type-width);
+  min-height: 1.4em;
+  color: #cfcfcf;
+}
+
+.neuroglancer-skeleton-node-type-toggle {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+}
+
+.neuroglancer-skeleton-node-type .neuroglancer-icon,
+.neuroglancer-skeleton-node-type-toggle .neuroglancer-icon {
+  min-width: 14px;
+  min-height: 14px;
+}
+
+.neuroglancer-skeleton-node-type-toggle:hover .neuroglancer-icon {
+  background-color: #3a3a3a;
+}
+
+.neuroglancer-skeleton-node-type-toggle:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.neuroglancer-skeleton-node-type-toggle:disabled .neuroglancer-icon {
+  background-color: transparent;
+}
+
+.neuroglancer-skeleton-node-action {
+  border: 1px solid #2f2f2f;
+  background: #0d0d0d;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  width: 1.5em;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.neuroglancer-skeleton-node-action .neuroglancer-icon {
+  min-width: 14px;
+  min-height: 14px;
+}
+
+.neuroglancer-skeleton-node-action:hover .neuroglancer-icon {
+  background-color: #db4437;
+}
+
+.neuroglancer-skeleton-node-action:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.neuroglancer-skeleton-node-action:disabled .neuroglancer-icon {
+  background-color: transparent;
+}
+
+.neuroglancer-skeleton-node-segment-chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.2em;
+  padding: 0 0.35em;
+  font-weight: 600;
+}
diff --git a/src/ui/skeleton_tab.ts b/src/ui/skeleton_tab.ts
index 337387bd3..02bd2e974 100644
--- a/src/ui/skeleton_tab.ts
+++ b/src/ui/skeleton_tab.ts
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import "#src/ui/skeleton_tab.css";
 import svg_arrow_left from "ikonate/icons/arrow-left.svg?raw";
 import svg_arrow_right from "ikonate/icons/arrow-right.svg?raw";
 import svg_bin from "ikonate/icons/bin.svg?raw";
@@ -165,11 +166,11 @@ export class SpatialSkeletonEditTab extends Tab {
   constructor(public layer: SegmentationUserLayer) {
     super();
     const { element } = this;
-    element.classList.add("neuroglancer-spatial-skeleton-tab");
+    element.classList.add("neuroglancer-skeleton-tab");
 
     const toolbox = document.createElement("div");
     toolbox.className =
-      "neuroglancer-segmentation-toolbox neuroglancer-spatial-skeleton-toolbar";
+      "neuroglancer-segmentation-toolbox neuroglancer-skeleton-toolbar";
     toolbox.appendChild(
       makeToolButton(this, layer.toolBinder, {
         toolJson: SPATIAL_SKELETON_EDIT_MODE_TOOL_ID,
@@ -192,7 +193,7 @@ export class SpatialSkeletonEditTab extends Tab {
       }),
     );
     const toolbarActions = document.createElement("div");
-    toolbarActions.className = "neuroglancer-spatial-skeleton-toolbar-actions";
+    toolbarActions.className = "neuroglancer-skeleton-toolbar-actions";
 
     const makeIconButton = (
       parent: HTMLElement,
@@ -201,7 +202,7 @@ export class SpatialSkeletonEditTab extends Tab {
       onClick: () => void,
     ) => {
       const button = document.createElement("button");
-      button.className = "neuroglancer-spatial-skeleton-icon-button";
+      button.className = "neuroglancer-skeleton-icon-button";
       button.type = "button";
       button.title = title;
       button.setAttribute("aria-label", title);
@@ -233,14 +234,14 @@ export class SpatialSkeletonEditTab extends Tab {
     toolbox.appendChild(toolbarActions);
 
     const navTools = document.createElement("div");
-    navTools.className = "neuroglancer-spatial-skeleton-nav-tools";
+    navTools.className = "neuroglancer-skeleton-nav-tools";
 
     const nodesSection = document.createElement("div");
-    nodesSection.className = "neuroglancer-spatial-skeleton-section";
+    nodesSection.className = "neuroglancer-skeleton-section";
     const filterInput = document.createElement("input");
     filterInput.type = "text";
     filterInput.placeholder = "Enter node ID or description";
-    filterInput.className = "neuroglancer-spatial-skeleton-filter";
+    filterInput.className = "neuroglancer-skeleton-filter";
     const nodeQuery = layer.displayState.spatialSkeletonNodeQuery;
     const nodeFilterTypeModel = layer.displayState.spatialSkeletonNodeFilter;
     filterInput.value = nodeQuery.value;
@@ -249,7 +250,7 @@ export class SpatialSkeletonEditTab extends Tab {
     );
     nodeFilterTypeWidget.element.classList.add(
       "neuroglancer-layer-control-control",
-      "neuroglancer-spatial-skeleton-filter-select",
+      "neuroglancer-skeleton-filter-select",
     );
     nodeFilterTypeWidget.element.title = "Filter loaded nodes by node type";
     nodeFilterTypeWidget.element.setAttribute(
@@ -264,20 +265,18 @@ export class SpatialSkeletonEditTab extends Tab {
       );
     }
     const nodeFilterTypeRow = document.createElement("label");
-    nodeFilterTypeRow.className = "neuroglancer-spatial-skeleton-filter-row";
+    nodeFilterTypeRow.className = "neuroglancer-skeleton-filter-row";
     const nodeFilterTypeLabel = document.createElement("span");
-    nodeFilterTypeLabel.className =
-      "neuroglancer-spatial-skeleton-filter-label";
+    nodeFilterTypeLabel.className = "neuroglancer-skeleton-filter-label";
     nodeFilterTypeLabel.textContent = "Filter";
     nodeFilterTypeRow.appendChild(nodeFilterTypeLabel);
     nodeFilterTypeRow.appendChild(nodeFilterTypeWidget.element);
     const nodesNavigationBar = document.createElement("div");
-    nodesNavigationBar.className =
-      "neuroglancer-spatial-skeleton-navigation-bar";
+    nodesNavigationBar.className = "neuroglancer-skeleton-navigation-bar";
     const nodesSummaryBar = document.createElement("div");
-    nodesSummaryBar.className = "neuroglancer-spatial-skeleton-summary-bar";
+    nodesSummaryBar.className = "neuroglancer-skeleton-summary-bar";
     const nodesSummary = document.createElement("div");
-    nodesSummary.className = "neuroglancer-spatial-skeleton-summary";
+    nodesSummary.className = "neuroglancer-skeleton-summary";
     let virtualItems: SpatialSkeletonListItem[] = [];
     let renderVirtualListItem = (
       _item: SpatialSkeletonListItem | undefined,
@@ -293,7 +292,7 @@ export class SpatialSkeletonEditTab extends Tab {
     const nodesList = this.registerDisposer(
       new VirtualList({ source: virtualListSource }),
     );
-    nodesList.element.className = "neuroglancer-spatial-skeleton-tree";
+    nodesList.element.className = "neuroglancer-skeleton-tree";
     nodesSection.appendChild(filterInput);
     nodesSection.appendChild(nodeFilterTypeRow);
     nodesNavigationBar.appendChild(navTools);
@@ -551,7 +550,8 @@ export class SpatialSkeletonEditTab extends Tab {
     const applyRowInteractionState = (
       options: { scrollSelectedIntoView?: boolean } = {},
     ) => {
-      const selectedNodeId = layer.selectedSpatialSkeletonNodeInfo.value?.nodeId;
+      const selectedNodeId =
+        layer.selectedSpatialSkeletonNodeInfo.value?.nodeId;
       nodesList.forEachRenderedItem((entry, index) => {
         const item = virtualItems[index];
         if (item?.kind !== "node") return;
@@ -1036,7 +1036,7 @@ export class SpatialSkeletonEditTab extends Tab {
       disabled: boolean,
     ) => {
       const button = document.createElement("button");
-      button.className = "neuroglancer-spatial-skeleton-node-action";
+      button.className = "neuroglancer-skeleton-node-action";
       button.type = "button";
       button.title = title;
       button.disabled = disabled;
@@ -1093,22 +1093,22 @@ export class SpatialSkeletonEditTab extends Tab {
 
     const makeListHeader = () => {
       const listHeader = document.createElement("div");
-      listHeader.className = "neuroglancer-spatial-skeleton-list-header";
+      listHeader.className = "neuroglancer-skeleton-list-header";
       const headerActionsSpacer = document.createElement("span");
       headerActionsSpacer.className =
-        "neuroglancer-spatial-skeleton-list-header-spacer neuroglancer-spatial-skeleton-list-header-actions";
+        "neuroglancer-skeleton-list-header-spacer neuroglancer-skeleton-list-header-actions";
       const headerTypeSpacer = document.createElement("span");
       headerTypeSpacer.className =
-        "neuroglancer-spatial-skeleton-list-header-spacer neuroglancer-spatial-skeleton-list-header-type";
+        "neuroglancer-skeleton-list-header-spacer neuroglancer-skeleton-list-header-type";
       const headerId = document.createElement("span");
-      headerId.className = "neuroglancer-spatial-skeleton-list-header-cell";
+      headerId.className = "neuroglancer-skeleton-list-header-cell";
       headerId.textContent = "id";
       const headerCoordinates = document.createElement("span");
       headerCoordinates.className =
-        "neuroglancer-spatial-skeleton-list-header-cell neuroglancer-spatial-skeleton-coordinates-flex";
+        "neuroglancer-skeleton-list-header-cell neuroglancer-skeleton-coordinates-flex";
       for (const dimLabel of getCoordinateDimensionHeaders()) {
         const dimSpan = document.createElement("span");
-        dimSpan.className = "neuroglancer-spatial-skeleton-coord-dim";
+        dimSpan.className = "neuroglancer-skeleton-coord-dim";
         dimSpan.textContent = dimLabel;
         headerCoordinates.appendChild(dimSpan);
       }
@@ -1129,20 +1129,20 @@ export class SpatialSkeletonEditTab extends Tab {
     const makeSegmentEntry = (segmentState: SegmentDisplayState) => {
       const segmentEntry = document.createElement("div");
       segmentEntry.className =
-        "neuroglancer-spatial-skeleton-tree-entry neuroglancer-spatial-skeleton-segment-entry";
+        "neuroglancer-skeleton-tree-entry neuroglancer-skeleton-segment-entry";
       const segmentRow = document.createElement("div");
       segmentRow.className =
-        "neuroglancer-spatial-skeleton-tree-row neuroglancer-spatial-skeleton-segment-row";
+        "neuroglancer-skeleton-tree-row neuroglancer-skeleton-segment-row";
       const segmentActionsSpacer = document.createElement("span");
       segmentActionsSpacer.className =
-        "neuroglancer-spatial-skeleton-list-header-spacer neuroglancer-spatial-skeleton-list-header-actions";
+        "neuroglancer-skeleton-list-header-spacer neuroglancer-skeleton-list-header-actions";
       const segmentTypeSpacer = document.createElement("span");
       segmentTypeSpacer.className =
-        "neuroglancer-spatial-skeleton-list-header-spacer neuroglancer-spatial-skeleton-list-header-type";
+        "neuroglancer-skeleton-list-header-spacer neuroglancer-skeleton-list-header-type";
       const segmentIdCell = document.createElement("span");
-      segmentIdCell.className = "neuroglancer-spatial-skeleton-node-id";
+      segmentIdCell.className = "neuroglancer-skeleton-node-id";
       const segmentChip = document.createElement("span");
-      segmentChip.className = "neuroglancer-spatial-skeleton-node-segment-chip";
+      segmentChip.className = "neuroglancer-skeleton-node-segment-chip";
       const segmentChipColors = getSegmentChipColors(segmentState.segmentId);
       segmentChip.textContent = String(segmentState.segmentId);
       segmentChip.style.backgroundColor = segmentChipColors.background;
@@ -1152,15 +1152,14 @@ export class SpatialSkeletonEditTab extends Tab {
       segmentIdCell.appendChild(segmentChip);
       const segmentMeta = document.createElement("div");
       segmentMeta.className =
-        "neuroglancer-spatial-skeleton-node-coordinate-cell neuroglancer-spatial-skeleton-segment-meta";
+        "neuroglancer-skeleton-node-coordinate-cell neuroglancer-skeleton-segment-meta";
       const segmentMetaLine = document.createElement("div");
-      segmentMetaLine.className =
-        "neuroglancer-spatial-skeleton-segment-meta-line";
+      segmentMetaLine.className = "neuroglancer-skeleton-segment-meta-line";
       const segmentName = document.createElement("span");
-      segmentName.className = "neuroglancer-spatial-skeleton-segment-name";
+      segmentName.className = "neuroglancer-skeleton-segment-name";
       segmentName.textContent = segmentState.segmentLabel ?? "";
       const segmentRatio = document.createElement("span");
-      segmentRatio.className = "neuroglancer-spatial-skeleton-segment-ratio";
+      segmentRatio.className = "neuroglancer-skeleton-node-ratio";
       segmentRatio.textContent = `${segmentState.displayedNodeCount}/${segmentState.totalNodeCount}`;
       segmentMetaLine.appendChild(segmentName);
       segmentMetaLine.appendChild(segmentRatio);
@@ -1176,7 +1175,7 @@ export class SpatialSkeletonEditTab extends Tab {
     const makeNodeEntry = (rowInfo: SpatialSkeletonSegmentRenderRow) => {
       const { node, type, isLeaf } = rowInfo;
       const entry = document.createElement("div");
-      entry.className = "neuroglancer-spatial-skeleton-tree-entry";
+      entry.className = "neuroglancer-skeleton-tree-entry";
       entry.dataset.selected = String(
         node.nodeId === layer.selectedSpatialSkeletonNodeInfo.value?.nodeId,
       );
@@ -1190,7 +1189,7 @@ export class SpatialSkeletonEditTab extends Tab {
       });
 
       const row = document.createElement("div");
-      row.className = "neuroglancer-spatial-skeleton-tree-row";
+      row.className = "neuroglancer-skeleton-tree-row";
       row.dataset.nodeType = type;
       if (inspectionAllowed) {
         row.tabIndex = 0;
@@ -1202,7 +1201,7 @@ export class SpatialSkeletonEditTab extends Tab {
           if (
             target instanceof HTMLElement &&
             target.closest(
-              ".neuroglancer-spatial-skeleton-node-actions, .neuroglancer-spatial-skeleton-node-type-toggle",
+              ".neuroglancer-skeleton-node-actions, .neuroglancer-skeleton-node-type-toggle",
             ) !== null
           ) {
             return;
@@ -1221,7 +1220,7 @@ export class SpatialSkeletonEditTab extends Tab {
           if (
             target instanceof HTMLElement &&
             target.closest(
-              ".neuroglancer-spatial-skeleton-node-actions, .neuroglancer-spatial-skeleton-node-type-toggle",
+              ".neuroglancer-skeleton-node-actions, .neuroglancer-skeleton-node-type-toggle",
             ) !== null
           ) {
             return;
@@ -1283,8 +1282,8 @@ export class SpatialSkeletonEditTab extends Tab {
           : document.createElement("span");
       typeIcon.className =
         isLeaf || nodeIsTrueEnd
-          ? "neuroglancer-spatial-skeleton-node-type-toggle"
-          : "neuroglancer-spatial-skeleton-node-type";
+          ? "neuroglancer-skeleton-node-type-toggle"
+          : "neuroglancer-skeleton-node-type";
       typeIcon.title = typeButtonTitle;
       if (typeIcon instanceof HTMLButtonElement) {
         typeIcon.type = "button";
@@ -1304,18 +1303,17 @@ export class SpatialSkeletonEditTab extends Tab {
       );
 
       const idCell = document.createElement("span");
-      idCell.className = "neuroglancer-spatial-skeleton-node-id";
+      idCell.className = "neuroglancer-skeleton-node-id";
       idCell.textContent = String(node.nodeId);
 
       const coordinatesCell = document.createElement("div");
-      coordinatesCell.className =
-        "neuroglancer-spatial-skeleton-node-coordinate-cell";
+      coordinatesCell.className = "neuroglancer-skeleton-node-coordinate-cell";
       const coordinatesLine = document.createElement("div");
       coordinatesLine.className =
-        "neuroglancer-spatial-skeleton-node-coordinates neuroglancer-spatial-skeleton-coordinates-flex";
+        "neuroglancer-skeleton-node-coordinates neuroglancer-skeleton-coordinates-flex";
       for (const val of formatNodeCoordinates(node.position)) {
         const valSpan = document.createElement("span");
-        valSpan.className = "neuroglancer-spatial-skeleton-coord-dim";
+        valSpan.className = "neuroglancer-skeleton-coord-dim";
         valSpan.textContent = val;
         coordinatesLine.appendChild(valSpan);
       }
@@ -1323,14 +1321,13 @@ export class SpatialSkeletonEditTab extends Tab {
       const description = getNodeDescriptionText(node);
       if (description !== undefined) {
         const descriptionLine = document.createElement("div");
-        descriptionLine.className =
-          "neuroglancer-spatial-skeleton-node-description";
+        descriptionLine.className = "neuroglancer-skeleton-node-description";
         descriptionLine.textContent = description;
         coordinatesCell.appendChild(descriptionLine);
       }
 
       const actions = document.createElement("div");
-      actions.className = "neuroglancer-spatial-skeleton-node-actions";
+      actions.className = "neuroglancer-skeleton-node-actions";
       let rerootActionTitle =
         node.parentNodeId === undefined ? "already root" : "set as root";
       if (pendingRerootNodes.has(node.nodeId)) {
@@ -1369,7 +1366,7 @@ export class SpatialSkeletonEditTab extends Tab {
 
     const makeEmptyEntry = (text: string) => {
       const empty = document.createElement("div");
-      empty.className = "neuroglancer-spatial-skeleton-summary";
+      empty.className = "neuroglancer-skeleton-summary";
       empty.textContent = text;
       return empty;
     };