diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 8c0ad24..2c9f298 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -49,4 +49,4 @@ repos:
     hooks:
       - id: codespell
         stages: [commit, commit-msg]
-        args: [--ignore-words-list, 'te,ba,nd,ore,claus']
+        args: [--ignore-words-list, 'te,ba,nd,ore,claus', --check-filenames]
diff --git a/package.json b/package.json
index 047a4d7..de6e858 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,9 @@
   },
   "dependencies": {
     "@iconify/svelte": "^3.1.4",
-    "@sveltejs/kit": "^1.25.2",
-    "@threlte/core": "6.0.10",
-    "@threlte/extras": "7.0.1",
+    "@sveltejs/kit": "^1.27.1",
+    "@threlte/core": "6.1.0",
+    "@threlte/extras": "7.5.0",
     "d3": "^7.8.5",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
@@ -36,25 +36,26 @@
     "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^3.2.0",
     "highlight.js": "^11.9.0",
-    "svelte": "4.2.1",
+    "svelte": "4.2.2",
     "svelte-multiselect": "^10.2.0",
-    "three": "^0.157.0"
+    "three": "^0.158.0",
+    "svelte-zoo": "^0.4.9"
   },
   "devDependencies": {
-    "@playwright/test": "^1.38.1",
+    "@playwright/test": "^1.39.0",
     "@sveltejs/adapter-static": "2.0.3",
     "@sveltejs/package": "^2.2.2",
-    "@types/d3-array": "^3.0.8",
-    "@types/d3-color": "^3.1.1",
-    "@types/d3-interpolate-path": "^2.0.1",
-    "@types/d3-scale": "^4.0.5",
-    "@types/d3-scale-chromatic": "^3.0.0",
-    "@types/d3-shape": "^3.1.3",
-    "@types/three": "^0.157.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
+    "@types/d3-array": "^3.0.9",
+    "@types/d3-color": "^3.1.2",
+    "@types/d3-interpolate-path": "^2.0.2",
+    "@types/d3-scale": "^4.0.6",
+    "@types/d3-scale-chromatic": "^3.0.1",
+    "@types/d3-shape": "^3.1.4",
+    "@types/three": "^0.158.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
     "@vitest/coverage-v8": "^0.34.6",
-    "eslint": "^8.51.0",
+    "eslint": "^8.52.0",
     "eslint-plugin-svelte": "^2.34.0",
     "hastscript": "^8.0.0",
     "jsdom": "^22.1.0",
@@ -70,10 +71,9 @@
     "svelte-check": "^3.5.2",
     "svelte-preprocess": "^5.0.4",
     "svelte-toc": "^0.5.6",
-    "svelte-zoo": "^0.4.9",
     "svelte2tsx": "^0.6.23",
     "typescript": "5.2.2",
-    "vite": "^4.4.11",
+    "vite": "^4.5.0",
     "vitest": "^0.34.6"
   },
   "keywords": [
diff --git a/src/lib/InfoCard.svelte b/src/lib/InfoCard.svelte
index be6c4cd..01a81b3 100644
--- a/src/lib/InfoCard.svelte
+++ b/src/lib/InfoCard.svelte
@@ -14,12 +14,13 @@
   export let fallback: string = ``
   export let fmt: string = `.2f`
   export let as: string = `section`
+  export let style: string | null = null
 
   // rename fmt as default_fmt internally
   $: default_fmt = fmt
 </script>
 
-<svelte:element this={as} class="info-card">
+<svelte:element this={as} class="info-card" {style}>
   {#if title || $$slots.title}
     <h2>
       <slot name="title">
diff --git a/src/lib/labels.ts b/src/lib/labels.ts
index 5cfac94..c64c24e 100644
--- a/src/lib/labels.ts
+++ b/src/lib/labels.ts
@@ -87,9 +87,8 @@ export const categories = [
 // prettier-ignore
 export const elem_symbols = [`H`,`He`,`Li`,`Be`,`B`,`C`,`N`,`O`,`F`,`Ne`,`Na`,`Mg`,`Al`,`Si`,`P`,`S`,`Cl`,`Ar`,`K`,`Ca`,`Sc`,`Ti`,`V`,`Cr`,`Mn`,`Fe`,`Co`,`Ni`,`Cu`,`Zn`,`Ga`,`Ge`,`As`,`Se`,`Br`,`Kr`,`Rb`,`Sr`,`Y`,`Zr`,`Nb`,`Mo`,`Tc`,`Ru`,`Rh`,`Pd`,`Ag`,`Cd`,`In`,`Sn`,`Sb`,`Te`,`I`,`Xe`,`Cs`,`Ba`,`La`,`Ce`,`Pr`,`Nd`,`Pm`,`Sm`,`Eu`,`Gd`,`Tb`,`Dy`,`Ho`,`Er`,`Tm`,`Yb`,`Lu`,`Hf`,`Ta`,`W`,`Re`,`Os`,`Ir`,`Pt`,`Au`,`Hg`,`Tl`,`Pb`,`Bi`,`Po`,`At`,`Rn`,`Fr`,`Ra`,`Ac`,`Th`,`Pa`,`U`,`Np`,`Pu`,`Am`,`Cm`,`Bk`,`Cf`,`Es`,`Fm`,`Md`,`No`,`Lr`,`Rf`,`Db`,`Sg`,`Bh`,`Hs`,`Mt`,`Ds`,`Rg`,`Cn`,`Nh`,`Fl`,`Mc`,`Lv`,`Ts`,`Og`] as const
 
-// function combo used to retrieve background color and to compute text color to maximize contrast
+// calculate human-perceived brightness from RGB color
 export function luminance(clr: string) {
-  // calculate human-perceived lightness from RGB
   const { r, g, b } = rgb(clr)
   // if (![r, g, b].every((c) => c >= 0 && c <= 255)) {
   //   console.error(`invalid RGB color: ${clr}, parsed to rgb=${r},${g},${b}`)
@@ -97,6 +96,7 @@ export function luminance(clr: string) {
   return (0.299 * r + 0.587 * g + 0.114 * b) / 255 // https://stackoverflow.com/a/596243
 }
 
+// get background color of passed DOM node, or recurse up the DOM tree if current node is transparent
 export function get_bg_color(
   elem: HTMLElement | null,
   bg_color: string | null = null,
@@ -111,6 +111,7 @@ export function get_bg_color(
   return get_bg_color(elem.parentElement) // otherwise recurse up the DOM tree
 }
 
+// pick black or white text color to maximize contrast with background
 export function choose_bw_for_contrast(
   node: HTMLElement | null,
   // you can explicitly pass bg_color to avoid DOM recursion and in case get_bg_color() fails
diff --git a/src/lib/structure/Structure.svelte b/src/lib/structure/Structure.svelte
index 1b0113a..97ce265 100644
--- a/src/lib/structure/Structure.svelte
+++ b/src/lib/structure/Structure.svelte
@@ -416,6 +416,7 @@
     background: var(--struct-bg, rgba(0, 0, 255, 0.1));
     --struct-controls-transition-duration: 0.3s;
     overflow: var(--struct-overflow, hidden);
+    color: var(--struct-text-color);
   }
   .structure:fullscreen :global(canvas) {
     height: 100vh !important;
@@ -461,6 +462,7 @@
     border-radius: var(--struct-controls-border-radius, 3pt);
     width: var(--struct-controls-width, 20em);
     max-width: var(--struct-controls-max-width, 90cqw);
+    color: var(--struct-controls-text-color);
   }
   dialog.controls hr {
     border: none;
@@ -507,7 +509,7 @@
     text-align: center;
   }
   .atom-label {
-    background: var(--struct-atom-label-bg, rgba(0, 0, 0, 0.2));
+    background: var(--struct-atom-label-bg, rgba(0, 0, 0, 0.1));
     border-radius: var(--struct-atom-label-border-radius, 3pt);
     padding: var(--struct-atom-label-padding, 0 3px);
   }
@@ -515,5 +517,7 @@
     width: var(--struct-input-color-width, 40px);
     height: var(--struct-input-color-height, 16px);
     margin: var(--struct-input-color-margin, 0 0 0 5pt);
+    border: var(--struct-input-color-border, 1px solid rgba(255, 255, 255, 0.05));
+    box-sizing: border-box;
   }
 </style>
diff --git a/src/lib/structure/StructureScene.svelte b/src/lib/structure/StructureScene.svelte
index 4388305..fb45a44 100644
--- a/src/lib/structure/StructureScene.svelte
+++ b/src/lib/structure/StructureScene.svelte
@@ -61,6 +61,8 @@
     width: 0.1,
     opacity: 0.5,
   }
+  // field of view of the camera. 50 is THREE.js default
+  export let fov: number = 50
 
   $: hovered_site = structure?.sites?.[hovered_idx ?? -1] ?? null
   $: active_site = structure?.sites?.[active_idx ?? -1] ?? null
@@ -75,7 +77,7 @@
   $: bond_thickness = bond_radius ?? 0.1 * atom_radius
 </script>
 
-<T.PerspectiveCamera makeDefault position={camera_position}>
+<T.PerspectiveCamera makeDefault position={camera_position} {fov}>
   <!-- fix the ugly target -->
   <OrbitControls
     enableZoom={zoom_speed > 0}