diff --git a/.env.development b/.env.development
new file mode 100644
index 00000000..7fee0eb7
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,3 @@
+# Dev: point the frontend's API calls at the local fork backend (compose `backend`,
+# published on host :8001). Production uses its own VITE_API_ENDPOINT.
+VITE_API_ENDPOINT=http://localhost:8001
diff --git a/package-lock.json b/package-lock.json
index 75623ffe..0487bf8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@chenfengyuan/vue-number-input": "^2.0.1",
+        "@fortawesome/fontawesome-free": "^7.2.0",
         "@openmagnetics/magnetic-virtual-builder": "^1.1.0",
         "@popperjs/core": "^2.11.8",
         "@vueform/slider": "^2.1.10",
@@ -582,12 +583,22 @@
         "vue-demi": ">=0.13.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-7.2.0.tgz",
+      "integrity": "sha512-3DguDv/oUE+7vjMeTSOjCSG+KeawgVQOHrKRnvUuqYh1mfArrh7s+s8hXW3e4RerBA1+Wh+hBqf8sJNpqNrBWg==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
       "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -603,6 +614,7 @@
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -613,6 +625,7 @@
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -623,6 +636,7 @@
       "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25"
@@ -640,6 +654,7 @@
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -649,7 +664,8 @@
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
       "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@openmagnetics/magnetic-virtual-builder": {
       "version": "1.1.0",
@@ -993,7 +1009,6 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -1320,6 +1335,7 @@
       "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -1331,6 +1347,7 @@
       "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -1356,6 +1373,7 @@
       "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -1587,6 +1605,7 @@
       "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.13.2",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
@@ -1597,21 +1616,24 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
       "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
       "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
       "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.13.2",
@@ -1619,6 +1641,7 @@
       "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.13.2",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -1630,7 +1653,8 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
       "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.14.1",
@@ -1638,6 +1662,7 @@
       "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -1651,6 +1676,7 @@
       "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -1661,6 +1687,7 @@
       "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -1670,7 +1697,8 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
       "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.14.1",
@@ -1678,6 +1706,7 @@
       "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -1695,6 +1724,7 @@
       "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
@@ -1709,6 +1739,7 @@
       "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -1722,6 +1753,7 @@
       "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -1737,6 +1769,7 @@
       "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@xtuc/long": "4.2.2"
@@ -1747,14 +1780,16 @@
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
       "dev": true,
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true,
-      "license": "Apache-2.0"
+      "license": "Apache-2.0",
+      "peer": true
     },
     "node_modules/acorn": {
       "version": "8.15.0",
@@ -1776,6 +1811,7 @@
       "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       },
@@ -1789,7 +1825,6 @@
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -1807,6 +1842,7 @@
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ajv": "^8.0.0"
       },
@@ -1825,6 +1861,7 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -1841,7 +1878,8 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/ajv-keywords": {
       "version": "3.5.2",
@@ -1919,6 +1957,7 @@
       "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "baseline-browser-mapping": "dist/cli.js"
       }
@@ -2027,7 +2066,8 @@
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.1",
@@ -2061,7 +2101,8 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "CC-BY-4.0"
+      "license": "CC-BY-4.0",
+      "peer": true
     },
     "node_modules/chalk": {
       "version": "4.1.2",
@@ -2141,6 +2182,7 @@
       "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -2379,7 +2421,6 @@
       "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
       "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "2.3.0",
         "zrender": "6.0.0"
@@ -2390,7 +2431,8 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz",
       "integrity": "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==",
       "dev": true,
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/emojis-list": {
       "version": "3.0.0",
@@ -2408,6 +2450,7 @@
       "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.3.0"
@@ -2451,7 +2494,8 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
       "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
@@ -2527,6 +2571,7 @@
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -2543,6 +2588,7 @@
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -2557,6 +2603,7 @@
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -2570,6 +2617,7 @@
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -2580,6 +2628,7 @@
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -2596,6 +2645,7 @@
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -2629,7 +2679,8 @@
           "url": "https://opencollective.com/fastify"
         }
       ],
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
     },
     "node_modules/fdir": {
       "version": "6.5.0",
@@ -2805,7 +2856,8 @@
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "dev": true,
-      "license": "BSD-2-Clause"
+      "license": "BSD-2-Clause",
+      "peer": true
     },
     "node_modules/gopd": {
       "version": "1.2.0",
@@ -2958,6 +3010,7 @@
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -2971,14 +3024,16 @@
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
       "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -3022,7 +3077,6 @@
         "https://github.com/sponsors/katex"
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "commander": "^8.0.0"
       },
@@ -3036,6 +3090,7 @@
       "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6.11.5"
       },
@@ -3111,7 +3166,8 @@
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/micromatch": {
       "version": "4.0.8",
@@ -3199,7 +3255,8 @@
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/node-addon-api": {
       "version": "7.1.1",
@@ -3214,7 +3271,8 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
       "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -3465,6 +3523,7 @@
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "safe-buffer": "^5.1.0"
       }
@@ -3527,6 +3586,7 @@
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3598,7 +3658,8 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/sass": {
       "version": "1.94.1",
@@ -3606,7 +3667,6 @@
       "integrity": "sha512-/YVm5FRQaRlr3oNh2LLFYne1PdPlRZGyKnHh1sLleOqLcohTR4eUUvBjBIqkl1fEXd1MGOHgzJGJh+LgTtV4KQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -3653,6 +3713,7 @@
       "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
       "dev": true,
       "license": "BSD-3-Clause",
+      "peer": true,
       "dependencies": {
         "randombytes": "^2.1.0"
       }
@@ -3663,6 +3724,7 @@
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true,
       "license": "BSD-3-Clause",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3682,6 +3744,7 @@
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -3720,6 +3783,7 @@
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -3736,6 +3800,7 @@
       "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6"
       },
@@ -3750,6 +3815,7 @@
       "integrity": "sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -3769,6 +3835,7 @@
       "integrity": "sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.25",
         "jest-worker": "^27.4.5",
@@ -3822,6 +3889,7 @@
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -3834,7 +3902,8 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
       "version": "4.3.3",
@@ -3842,6 +3911,7 @@
       "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
@@ -3861,14 +3931,14 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/three": {
       "version": "0.181.1",
       "resolved": "https://registry.npmjs.org/three/-/three-0.181.1.tgz",
       "integrity": "sha512-bz9xZUQMw3pJbjKy7roiwXWgAp+oVUa+4k5o0oBAQ+IFJuru1xzvtk63h6k72XZanXS/SgoEhV6927Vgazyq2w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/three-trackballcontrols": {
       "version": "0.9.0",
@@ -3947,7 +4017,8 @@
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
       "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/universalify": {
       "version": "2.0.1",
@@ -3979,6 +4050,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "escalade": "^3.2.0",
         "picocolors": "^1.1.1"
@@ -4034,7 +4106,6 @@
       "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -4213,7 +4284,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.24.tgz",
       "integrity": "sha512-uTHDOpVQTMjcGgrqFPSb8iO2m1DUvo+WbGqoXQz8Y1CeBYQ0FXf2z1gLRaBtHjlRz7zZUBHxjVB5VTLzYkvftg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.24",
         "@vue/compiler-sfc": "3.5.24",
@@ -4351,6 +4421,7 @@
       "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -4365,6 +4436,7 @@
       "integrity": "sha512-gX/dMkRQc7QOMzgTe6KsYFM7DxeIONQSui1s0n/0xht36HvrgbxtM1xBlgx596NbpHuQU8P7QpKwrZYwUX48nw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.8",
@@ -4414,6 +4486,7 @@
       "integrity": "sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -4442,6 +4515,7 @@
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -4454,7 +4528,8 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/webpack/node_modules/schema-utils": {
       "version": "4.3.3",
@@ -4462,6 +4537,7 @@
       "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
diff --git a/package.json b/package.json
index fd269f8e..cd2b9e1d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@chenfengyuan/vue-number-input": "^2.0.1",
+    "@fortawesome/fontawesome-free": "^7.2.0",
     "@openmagnetics/magnetic-virtual-builder": "^1.1.0",
     "@popperjs/core": "^2.11.8",
     "@vueform/slider": "^2.1.10",
diff --git a/src/components/Header.vue b/src/components/Header.vue
index b61d7e8a..91ef4f72 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -217,9 +217,6 @@ export default {
     },
     mounted() {
         this.$settingsStore.loadingGif = "/images/loading.gif";
-        let fontawesome = document.createElement('script')
-        fontawesome.setAttribute('src', 'https://kit.fontawesome.com/d5a40d6941.js')
-        document.head.appendChild(fontawesome)
 
         const style = getComputedStyle(document.body);
         const theme = {
diff --git a/src/components/Toolbox/MagneticSummary.vue b/src/components/Toolbox/MagneticSummary.vue
index 3e5d20b6..cc8f98fe 100644
--- a/src/components/Toolbox/MagneticSummary.vue
+++ b/src/components/Toolbox/MagneticSummary.vue
@@ -8,6 +8,7 @@ import CoreExporter from '../Exporters/CoreExporter.vue'
 import CoilExporter from '../Exporters/CoilExporter.vue'
 import MASExporter from '../Exporters/MASExporter.vue'
 import CircuitSimulatorsExporter from '../Exporters/CircuitSimulatorsExporter.vue'
+import { coilToTikz } from '/WebSharedComponents/assets/js/coilToTikz.js'
 </script>
 
 <script>
@@ -30,6 +31,7 @@ export default {
             includeFringing: true,
             PLOT_MODES,
             processedMas: null,
+            schematicSvg: '',
         }
     },
     computed: {
@@ -593,8 +595,22 @@ export default {
     },
     mounted() {
         this.computeTexts();
+        this.renderSchematic();
     },
     methods: {
+        renderSchematic() {
+            // Build the coil's electrical schematic (coilToTikz) and render it to an
+            // inline SVG via the backend's /process_latex_svg; omit silently if the
+            // coil has no connections or the renderer endpoint is unavailable.
+            const coil = this.mas?.magnetic?.coil;
+            if (!coil || !(coil.functionalDescription || []).length) return;
+            let tikz;
+            try { tikz = coilToTikz(coil); } catch (e) { return; }
+            const base = import.meta.env.VITE_API_ENDPOINT || 'http://localhost:8001';
+            this.$axios.post(`${base}/process_latex_svg`, tikz)
+                .then((response) => { this.schematicSvg = response.data; })
+                .catch(() => { /* no /process_latex_svg backend -- skip the schematic */ });
+        },
         plotModeChange(newMode) {
             this.plotMode = newMode;
         },
@@ -976,6 +992,12 @@ export default {
                 </div>
             </div>
 
+            <!-- Electrical Schematic -->
+            <div class="section" v-if="schematicSvg">
+                <h3 class="section-title"><i class="fa-solid fa-diagram-project"></i>Schematic</h3>
+                <div class="schematic" v-html="schematicSvg"></div>
+            </div>
+
             <!-- Winding Construction Steps -->
             <div class="section" v-if="isWoundMagnetic && windingConstructionSteps.length > 0">
                 <h3 class="section-title"><i class="fa-solid fa-list-check"></i>Winding Construction Steps</h3>
@@ -1020,6 +1042,8 @@ export default {
 </template>
 
 <style scoped>
+.schematic { display: flex; justify-content: center; padding: .5rem 0; filter: invert(1); }
+.schematic :deep(svg) { max-width: 100%; max-height: 460px; width: auto; height: auto; }
 .datasheet-wrapper {
     background: var(--bs-dark);
     min-height: 100vh;
diff --git a/src/main.js b/src/main.js
index 4db41a7e..eb58192c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import { Tooltip } from 'bootstrap';
 import 'bootstrap';
+import '@fortawesome/fontawesome-free/css/all.min.css';
 import router from "./router";
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
@@ -116,7 +117,7 @@ router.beforeEach((to, from, next) => {
         setTimeout(() => {router.push(from.path);}, 500);
     }
 
-    const nonDataViews = [`${import.meta.env.BASE_URL}`, `${import.meta.env.BASE_URL}home`, `${import.meta.env.BASE_URL}insulation_adviser`]
+    const nonDataViews = [`${import.meta.env.BASE_URL}`, `${import.meta.env.BASE_URL}home`, `${import.meta.env.BASE_URL}insulation_adviser`, `${import.meta.env.BASE_URL}schematic_playground`]
 
     var loadData = !nonDataViews.includes(to.path);
 
diff --git a/src/router/index.js b/src/router/index.js
index c2ee810d..7c4dc83c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,11 @@ const routes = [
         name: 'EngineLoader',
         component: () => import('../views/EngineLoader.vue')
     },
+    {
+        path: '/schematic_playground',
+        name: 'SchematicPlayground',
+        component: () => import('../views/SchematicPlayground.vue')
+    },
     {
         path: '/cookie_policy',
         name: 'CookiePolicy',
diff --git a/src/views/SchematicPlayground.vue b/src/views/SchematicPlayground.vue
new file mode 100644
index 00000000..9869bf6d
--- /dev/null
+++ b/src/views/SchematicPlayground.vue
@@ -0,0 +1,145 @@
+<script>
+import { coilToTikz } from '/WebSharedComponents/assets/js/coilToTikz.js';
+import { MOCK_COILS } from '/WebSharedComponents/assets/js/mockCoils.js';
+
+// Proof-of-concept playground: pick (or paste) a coil, generate its electrical
+// schematic as TikZ via coilToTikz(), and render it to an inline SVG through the OM
+// backend's /process_latex_svg endpoint (shown white-on-dark via a CSS invert).
+export default {
+    name: 'SchematicPlayground',
+    data() {
+        const base = import.meta.env.VITE_API_ENDPOINT;
+        return {
+            mocks: MOCK_COILS,
+            selected: 0,
+            coilText: '',
+            tikz: '',
+            svg: '',
+            // Production serves the renderer off VITE_API_ENDPOINT. For local dev,
+            // default to the OM WebBackend on :8001 (the canonical :8000 is taken by
+            // the prebuilt reference container here). Field is editable.
+            endpoint: base ? `${base}/process_latex_svg` : 'http://localhost:8001/process_latex_svg',
+            error: '',
+            rendering: false,
+        };
+    },
+    mounted() {
+        this.loadMock(0);
+    },
+    methods: {
+        loadMock(index) {
+            this.selected = index;
+            this.coilText = JSON.stringify(this.mocks[index].coil, null, 2);
+            this.generate();
+        },
+        generate() {
+            this.error = '';
+            this.svg = '';
+            try {
+                const coil = JSON.parse(this.coilText);
+                this.tikz = coilToTikz(coil);
+            } catch (e) {
+                this.tikz = '';
+                this.error = `Could not generate TikZ: ${e.message}`;
+            }
+        },
+        render() {
+            if (!this.tikz) return;
+            this.rendering = true;
+            this.error = '';
+            this.$axios.post(this.endpoint, this.tikz)
+                .then((response) => {
+                    this.svg = response.data;
+                })
+                .catch((err) => {
+                    this.error = `Render failed (${this.endpoint}): ${err.message}. `
+                        + 'The TikZ above is still valid -- point the endpoint at a '
+                        + 'backend that exposes /process_latex_svg.';
+                })
+                .finally(() => { this.rendering = false; });
+        },
+    },
+};
+</script>
+
+<template>
+    <div class="playground">
+        <div class="left">
+            <h2>Schematic Playground</h2>
+            <p class="hint">
+                Pick a mock coil (or edit the JSON), generate its TikZ schematic, then
+                render it to an inline SVG via <code>/process_latex_svg</code>.
+            </p>
+
+            <label class="lbl">Mock coil</label>
+            <div class="mocks">
+                <button v-for="(m, i) in mocks" :key="m.name"
+                        :class="['chip', { active: i === selected }]"
+                        @click="loadMock(i)">{{ m.name }}</button>
+            </div>
+            <p class="caption">{{ mocks[selected].caption }}</p>
+
+            <label class="lbl">Coil JSON (editable)</label>
+            <textarea v-model="coilText" class="json" spellcheck="false"></textarea>
+
+            <label class="lbl">Render endpoint</label>
+            <input v-model="endpoint" class="endpoint" spellcheck="false" />
+
+            <div class="actions">
+                <button class="btn" @click="generate">Generate TikZ</button>
+                <button class="btn primary" :disabled="rendering || !tikz" @click="render">
+                    {{ rendering ? 'Rendering...' : 'Render' }}
+                </button>
+            </div>
+
+            <p v-if="error" class="error">{{ error }}</p>
+
+            <label class="lbl">Generated TikZ</label>
+            <pre class="tikz">{{ tikz }}</pre>
+        </div>
+
+        <div class="right">
+            <div v-if="svg" class="svg-wrap" v-html="svg"></div>
+            <div v-else class="placeholder">
+                <p>Rendered schematic appears here.</p>
+                <p class="hint">Click <strong>Render</strong> to compile the TikZ.</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* OpenMagnetics palette (mirrors the --bs-* tokens in assets/css/custom.css).
+   Hard-coded because those vars are only set after the engine-loader init, which
+   this route skips: teal #539796, dark #1a1a1a, panel #2a2a2a, text #d4d4d4. */
+.playground { display: flex; gap: 1rem; padding: 1rem; height: 100vh; box-sizing: border-box;
+    color: #d4d4d4; background: #1a1a1a; }
+.left { width: 480px; min-width: 380px; display: flex; flex-direction: column; overflow-y: auto;
+    border: 1px solid #539796; border-radius: 6px; padding: 1rem; }
+.right { flex: 1; min-width: 300px; border: 1px solid #539796; border-radius: 6px; padding: .5rem; }
+h2 { margin: 0 0 .25rem; color: #539796; font-size: 1.5rem; }
+.hint { font-size: .85rem; opacity: .7; margin: .25rem 0; }
+.hint code { color: #539796; }
+.lbl { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; margin-top: .75rem; }
+.mocks { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
+.chip { padding: .25rem .6rem; border: 1px solid #539796; border-radius: 999px;
+    background: transparent; color: #d4d4d4; cursor: pointer; font-size: .8rem; }
+.chip.active { background: #539796; color: #1a1a1a; }
+.caption { font-size: .85rem; color: #539796; opacity: .9; margin: .4rem 0 0; }
+.json, .endpoint { font-family: monospace; font-size: .8rem; margin-top: .35rem; padding: .35rem;
+    background: #2a2a2a; color: #d4d4d4; border: 1px solid rgba(83, 151, 150, .45); border-radius: 4px; }
+.json { height: 200px; resize: vertical; }
+.actions { display: flex; gap: .5rem; margin-top: .75rem; }
+.btn { padding: .45rem .9rem; border: 1px solid #539796; border-radius: 6px;
+    background: transparent; color: #539796; cursor: pointer; }
+.btn.primary { background: #539796; color: #1a1a1a; }
+.btn:disabled { opacity: .5; cursor: default; }
+.error { color: #ff8800; font-size: .85rem; margin-top: .5rem; }
+.tikz { flex: 1; min-height: 160px; background: #000; color: #d4d4d4; padding: .5rem;
+    font-size: .72rem; overflow: auto; white-space: pre; border-radius: 6px;
+    border: 1px solid rgba(83, 151, 150, .35); }
+.svg-wrap { height: 100%; padding: .5rem; box-sizing: border-box; filter: invert(1); }
+.svg-wrap :deep(svg) { width: 100%; height: 100%; }   /* viewBox keeps aspect (meet) */
+.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center;
+    height: 100%; opacity: .6; border: 1px dashed rgba(83, 151, 150, .5); border-radius: 6px; }
+</style>