Using checkbox tree control

styles.css

@@ -67,25 +67,25 @@ h1 {
   line-height: 1.5;
 }
 
-.legend {
-  display: grid;
-  gap: 0.65rem;
-  margin: 1.5rem 0;
+.visibility-panel {
+  margin-top: 1.5rem;
 }
 
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  font-size: 0.95rem;
+.visibility-panel h2 {
+  margin: 0 0 0.65rem;
+  color: var(--ink);
+  font-size: 1rem;
 }
 
-.legend-swatch {
-  width: 0.9rem;
-  height: 0.9rem;
-  border-radius: 999px;
-  flex: none;
-  border: 1px solid rgba(0, 0, 0, 0.12);
+#visibility-tree {
+  --checkbox-tree-indent: 16px;
+  --checkbox-tree-hover-color: var(--accent);
+  max-height: min(45vh, 28rem);
+  overflow: auto;
+  padding: 0.65rem;
+  border: 1px solid var(--panel-border);
+  border-radius: 12px;
+  background: rgba(255, 253, 246, 0.62);
 }
 
 .notes h2 {
@@ -300,23 +300,6 @@ main {
     margin-bottom: 0;
   }
 
-  .legend {
-    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
-    gap: 0.5rem 0.75rem;
-    margin: 1rem 0 0;
-  }
-
-  .legend-item {
-    gap: 0.5rem;
-    min-width: 0;
-    font-size: 0.9rem;
-  }
-
-  .legend-item span:last-child {
-    min-width: 0;
-    overflow-wrap: anywhere;
-  }
-
   #map {
     min-height: min(72svh, 46rem);
     border-radius: 12px;