diff --git a/public/preview.html b/public/preview.html
index 37e6578..31f762d 100644
--- a/public/preview.html
+++ b/public/preview.html
@@ -1 +1,303 @@
-PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8+CiAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLCB2aWV3cG9ydC1maXQ9Y292ZXIsIG1heGltdW0tc2NhbGU9MSIgLz4KICA8dGl0bGU+TmV3YnVyeSBOaWdodHMg4oCUIEdob3N0IFByZXZpZXc8L3RpdGxlPgogIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iL2Nzcy9hcHAuY3NzIiAvPgogIDxzY3JpcHQgdHlwZT0iaW1wb3J0bWFwIj4KICB7CiAgICAiaW1wb3J0cyI6IHsKICAgICAgInRocmVlIjogImh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vdGhyZWVAMC4xNjAuMC9idWlsZC90aHJlZS5tb2R1bGUuanMiCiAgICB9CiAgfQogIDwvc2NyaXB0PgogIDxzdHlsZT4KICAgICNwdi1zdGFnZSB7IHBvc2l0aW9uOiBmaXhlZDsgaW5zZXQ6IDA7IG92ZXJmbG93OiBoaWRkZW47IGJhY2tncm91bmQ6ICMwNzA5MGY7IH0KICAgICNwdi12aWRlbyB7IHBvc2l0aW9uOiBhYnNvbHV0ZTsgaW5zZXQ6IDA7IHdpZHRoOiAxMDAlOyBoZWlnaHQ6IDEwMCU7IG9iamVjdC1maXQ6IGNvdmVyOyB9CiAgICAjcHYtY2FudmFzIHsgcG9zaXRpb246IGFic29sdXRlOyBpbnNldDogMDsgd2lkdGg6IDEwMCU7IGhlaWdodDogMTAwJTsgfQogICAgLnB2LWJhciB7CiAgICAgIHBvc2l0aW9uOiBmaXhlZDsgbGVmdDogMDsgcmlnaHQ6IDA7IHRvcDogMDsgei1pbmRleDogMTA7CiAgICAgIGRpc3BsYXk6IGZsZXg7IGFsaWduLWl0ZW1zOiBjZW50ZXI7IGdhcDogMTBweDsgZmxleC13cmFwOiB3cmFwOwogICAgICBwYWRkaW5nOiAxMHB4IDE0cHg7IGJhY2tncm91bmQ6IHJnYmEoNyw5LDE1LC44Mik7IGJhY2tkcm9wLWZpbHRlcjogYmx1cig4cHgpOwogICAgICBib3JkZXItYm90dG9tOiAxcHggc29saWQgcmdiYSgyNTUsMjU1LDI1NSwuMDgpOwogICAgfQogICAgLnB2LWJhciAuYnJhbmQgeyBmb250LXdlaWdodDogNzAwOyBsZXR0ZXItc3BhY2luZzogLjA0ZW07IHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7IGZvbnQtc2l6ZTogMTRweDsgfQogICAgLnB2LWJhciAuYnJhbmQgc3BhbiB7IGNvbG9yOiB2YXIoLS1ibHVlLCAjM2JiNmZmKTsgfQogICAgLnB2LWJhciBzZWxlY3QsIC5wdi1iYXIgYnV0dG9uIHsgZm9udC1zaXplOiAxM3B4OyB9CiAgICAucHYtYmFyIC5ncm93IHsgZmxleDogMTsgfQogICAgLnB2LWhpbnQgeyBwb3NpdGlvbjogZml4ZWQ7IGxlZnQ6IDA7IHJpZ2h0OiAwOyBib3R0b206IDA7IHotaW5kZXg6IDEwOwogICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7IHBhZGRpbmc6IDhweDsgZm9udC1mYW1pbHk6IHZhcigtLW1vbm8sIG1vbm9zcGFjZSk7IGZvbnQtc2l6ZTogMTFweDsKICAgICAgY29sb3I6IHJnYmEoMjU1LDI1NSwyNTUsLjcpOyBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodHJhbnNwYXJlbnQsIHJnYmEoNyw5LDE1LC43NSkpOyB9CiAgICAucHYtY29udHJvbHMgeyBwb3NpdGlvbjogZml4ZWQ7IHJpZ2h0OiAxNHB4OyBib3R0b206IDM2cHg7IHotaW5kZXg6IDEwOwogICAgICBkaXNwbGF5OiBmbGV4OyBmbGV4LWRpcmVjdGlvbjogY29sdW1uOyBnYXA6IDhweDsgYWxpZ24taXRlbXM6IHN0cmV0Y2g7IH0KICAgIC5wdi1jb250cm9scyBsYWJlbCB7IGZvbnQtZmFtaWx5OiB2YXIoLS1tb25vLCBtb25vc3BhY2UpOyBmb250LXNpemU6IDEwcHg7IGxldHRlci1zcGFjaW5nOiAuMWVtOwogICAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlOyBjb2xvcjogcmdiYSgyNTUsMjU1LDI1NSwuNjUpOyB9CiAgICAucHYtY29udHJvbHMgaW5wdXRbdHlwZT1yYW5nZV0geyB3aWR0aDogMTUwcHg7IH0KICAgIC8qIExvZ2luIGdhdGUgKi8KICAgICNwdi1sb2dpbiB7IHBvc2l0aW9uOiBmaXhlZDsgaW5zZXQ6IDA7IHotaW5kZXg6IDIwOyBkaXNwbGF5OiBncmlkOyBwbGFjZS1pdGVtczogY2VudGVyOwogICAgICBwYWRkaW5nOiAyNHB4OyBiYWNrZ3JvdW5kOiAjMDcwOTBmOyB9CiAgICAucHYtbG9naW4tY2FyZCB7IGJhY2tncm91bmQ6IHZhcigtLXBhbmVsLCAjMTExNTFmKTsgYm9yZGVyOiAxcHggc29saWQgcmdiYSgyNTUsMjU1LDI1NSwuMSk7CiAgICAgIGJvcmRlci1yYWRpdXM6IDE0cHg7IHBhZGRpbmc6IDMwcHg7IHdpZHRoOiAxMDAlOyBtYXgtd2lkdGg6IDM2MHB4OyB9CiAgICAucHYtbG9naW4tY2FyZCBoMSB7IGZvbnQtc2l6ZTogMzBweDsgbGluZS1oZWlnaHQ6IC45OyBtYXJnaW46IDAgMCA0cHg7IH0KICAgIC5wdi1sb2dpbi1jYXJkIGgxIHNwYW4geyBjb2xvcjogdmFyKC0tYmx1ZSwgIzNiYjZmZik7IH0KICAgIC5wdi1sb2dpbi1jYXJkIC5zdWIgeyBmb250LXNpemU6IDExcHg7IGxldHRlci1zcGFjaW5nOiAuM2VtOyBjb2xvcjogcmdiYSgyNTUsMjU1LDI1NSwuNTUpOwogICAgICBtYXJnaW46IDZweCAwIDIycHg7IGZvbnQtZmFtaWx5OiB2YXIoLS1tb25vLCBtb25vc3BhY2UpOyB9CiAgICAucHYtbG9naW4tY2FyZCBsYWJlbCB7IGRpc3BsYXk6IGJsb2NrOyBtYXJnaW4tdG9wOiAxMnB4OyBmb250LXNpemU6IDEzcHg7IH0KICAgIC5wdi1sb2dpbi1jYXJkIGlucHV0IHsgd2lkdGg6IDEwMCU7IGJveC1zaXppbmc6IGJvcmRlci1ib3g7IH0KICAgIC5wdi1lcnIgeyBjb2xvcjogdmFyKC0tZGFuZ2VyLCAjZmYzYjVjKTsgZm9udC1zaXplOiAxM3B4OyBtYXJnaW4tdG9wOiAxMnB4OyB9CiAgICAuaGlkZGVuIHsgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50OyB9CiAgPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KICA8IS0tIExvZ2luIGdhdGUgKHNhbWUgY2xpZW50LXNpZGUgZmxvdyBhcyAvYWRtaW4pIC0tPgogIDxkaXYgaWQ9InB2LWxvZ2luIj4KICAgIDxkaXYgY2xhc3M9InB2LWxvZ2luLWNhcmQiPgogICAgICA8aDE+TmV3YnVyeTxzcGFuPk5pZ2h0czwvc3Bhbj48L2gxPgogICAgICA8ZGl2IGNsYXNzPSJzdWIiPkdIT1NUIFBSRVZJRVc8L2Rpdj4KICAgICAgPGxhYmVsIGZvcj0icHYtdXNlciI+VXNlcm5hbWU8L2xhYmVsPgogICAgICA8aW5wdXQgaWQ9InB2LXVzZXIiIGF1dG9jb21wbGV0ZT0idXNlcm5hbWUiIC8+CiAgICAgIDxsYWJlbCBmb3I9InB2LXBhc3MiPlBhc3N3b3JkPC9sYWJlbD4KICAgICAgPGlucHV0IGlkPSJwdi1wYXNzIiB0eXBlPSJwYXNzd29yZCIgYXV0b2NvbXBsZXRlPSJjdXJyZW50LXBhc3N3b3JkIiAvPgogICAgICA8YnV0dG9uIGNsYXNzPSJwcmltYXJ5IiBpZD0icHYtZ28iIHN0eWxlPSJ3aWR0aDoxMDAlO21hcmdpbi10b3A6MTRweCI+U2lnbiBpbjwvYnV0dG9uPgogICAgICA8ZGl2IGlkPSJwdi1sb2dpbi1lcnIiIGNsYXNzPSJwdi1lcnIgaGlkZGVuIj48L2Rpdj4KICAgIDwvZGl2PgogIDwvZGl2PgoKICA8IS0tIFByZXZpZXcgc3RhZ2UgLS0+CiAgPGRpdiBpZD0icHYtc3RhZ2UiIGNsYXNzPSJoaWRkZW4iPgogICAgPHZpZGVvIGlkPSJwdi12aWRlbyIgcGxheXNpbmxpbmUgbXV0ZWQ+PC92aWRlbz4KICAgIDxjYW52YXMgaWQ9InB2LWNhbnZhcyI+PC9jYW52YXM+CiAgPC9kaXY+CgogIDxkaXYgaWQ9InB2LWFwcCIgY2xhc3M9ImhpZGRlbiI+CiAgICA8ZGl2IGNsYXNzPSJwdi1iYXIiPgogICAgICA8ZGl2IGNsYXNzPSJicmFuZCI+TmV3YnVyeTxzcGFuPk5pZ2h0czwvc3Bhbj4gwrcgUFJFVklFVzwvZGl2PgogICAgICA8c2VsZWN0IGlkPSJwdi1zZWxlY3QiPjxvcHRpb24gdmFsdWU9IiI+TG9hZGluZyBnaG9zdHPigKY8L29wdGlvbj48L3NlbGVjdD4KICAgICAgPGJ1dHRvbiBpZD0icHYtY2FtZXJhLXRvZ2dsZSIgY2xhc3M9InNtYWxsIj5DYW1lcmE6IG9uPC9idXR0b24+CiAgICAgIDxzcGFuIGNsYXNzPSJncm93Ij48L3NwYW4+CiAgICAgIDxhIGhyZWY9Ii9hZG1pbiIgY2xhc3M9InNtYWxsIiBzdHlsZT0idGV4dC1kZWNvcmF0aW9uOm5vbmUiPjxidXR0b24gY2xhc3M9InNtYWxsIj7ihpAgQWRtaW48L2J1dHRvbj48L2E+CiAgICA8L2Rpdj4KCiAgICA8ZGl2IGNsYXNzPSJwdi1jb250cm9scyI+CiAgICAgIDxsYWJlbD5EaXN0YW5jZSA8c3BhbiBpZD0icHYtZGlzdC12YWwiPjMuMDwvc3Bhbj48L2xhYmVsPgogICAgICA8aW5wdXQgaWQ9InB2LWRpc3QiIHR5cGU9InJhbmdlIiBtaW49IjEuNSIgbWF4PSI4IiBzdGVwPSIwLjEiIHZhbHVlPSIzIiAvPgogICAgICA8bGFiZWw+U2l6ZSA8c3BhbiBpZD0icHYtc2l6ZS12YWwiPjEuMjwvc3Bhbj48L2xhYmVsPgogICAgICA8aW5wdXQgaWQ9InB2LXNpemUiIHR5cGU9InJhbmdlIiBtaW49IjAuNCIgbWF4PSIzIiBzdGVwPSIwLjEiIHZhbHVlPSIxLjIiIC8+CiAgICA8L2Rpdj4KCiAgICA8ZGl2IGNsYXNzPSJwdi1oaW50IiBpZD0icHYtaGludCI+U2VsZWN0IGEgZ2hvc3QgdG8gcHJldmlldyBpdCBvdmVyIHRoZSBjYW1lcmEgZmVlZC48L2Rpdj4KICA8L2Rpdj4KCiAgPHNjcmlwdCB0eXBlPSJtb2R1bGUiPgogICAgaW1wb3J0ICogYXMgVEhSRUUgZnJvbSAndGhyZWUnOwoKICAgIGNvbnN0ICQgPSAocykgPT4gZG9jdW1lbnQucXVlcnlTZWxlY3RvcihzKTsKICAgIGNvbnN0IFRZUEVfQ09MT1JTID0geyByZWQ6IDB4ZmYzYjVjLCB5ZWxsb3c6IDB4ZmZjMjNiLCBibHVlOiAweDNiYjZmZiB9OwoKICAgIC8vIFNhbWUgVlA5LWFscGhhIGNhcGFiaWxpdHkgY2hlY2sgYXMgdGhlIGh1bnQuCiAgICBjb25zdCBTVVBQT1JUU19XRUJNX0FMUEhBID0gKCgpID0+IHsKICAgICAgdHJ5IHsKICAgICAgICBjb25zdCB2ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgndmlkZW8nKTsKICAgICAgICByZXR1cm4gISF2LmNhblBsYXlUeXBlICYmIHYuY2FuUGxheVR5cGUoJ3ZpZGVvL3dlYm07IGNvZGVjcz0idnA5IicpICE9PSAnJzsKICAgICAgfSBjYXRjaCB7IHJldHVybiBmYWxzZTsgfQogICAgfSkoKTsKCiAgICBsZXQgVE9LRU4gPSBudWxsOwogICAgbGV0IEdIT1NUUyA9IFtdOwoKICAgIC8qIC0tLS0tLS0tLS0gbG9naW4gLS0tLS0tLS0tLSAqLwogICAgJCgnI3B2LWdvJykuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBsb2dpbik7CiAgICAkKCcjcHYtcGFzcycpLmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCAoZSkgPT4geyBpZiAoZS5rZXkgPT09ICdFbnRlcicpIGxvZ2luKCk7IH0pOwoKICAgIGFzeW5jIGZ1bmN0aW9uIGxvZ2luKCkgewogICAgICBjb25zdCB1c2VybmFtZSA9ICQoJyNwdi11c2VyJykudmFsdWUudHJpbSgpOwogICAgICBjb25zdCBwYXNzd29yZCA9ICQoJyNwdi1wYXNzJykudmFsdWU7CiAgICAgIGNvbnN0IGVyciA9ICQoJyNwdi1sb2dpbi1lcnInKTsKICAgICAgZXJyLmNsYXNzTGlzdC5hZGQoJ2hpZGRlbicpOwogICAgICB0cnkgewogICAgICAgIGNvbnN0IHJlcyA9IGF3YWl0IGZldGNoKCcvYXV0aC9sb2dpbicsIHsKICAgICAgICAgIG1ldGhvZDogJ1BPU1QnLAogICAgICAgICAgaGVhZGVyczogeyAnQ29udGVudC1UeXBlJzogJ2FwcGxpY2F0aW9uL2pzb24nIH0sCiAgICAgICAgICBib2R5OiBKU09OLnN0cmluZ2lmeSh7IHVzZXJuYW1lLCBwYXNzd29yZCB9KSwKICAgICAgICB9KTsKICAgICAgICBpZiAoIXJlcy5vaykgdGhyb3cgbmV3IEVycm9yKCdiYWQgbG9naW4nKTsKICAgICAgICBUT0tFTiA9IChhd2FpdCByZXMuanNvbigpKS50b2tlbjsKICAgICAgfSBjYXRjaCB7CiAgICAgICAgZXJyLnRleHRDb250ZW50ID0gJ0ludmFsaWQgdXNlcm5hbWUgb3IgcGFzc3dvcmQuJzsKICAgICAgICBlcnIuY2xhc3NMaXN0LnJlbW92ZSgnaGlkZGVuJyk7CiAgICAgICAgcmV0dXJuOwogICAgICB9CiAgICAgICQoJyNwdi1sb2dpbicpLmNsYXNzTGlzdC5hZGQoJ2hpZGRlbicpOwogICAgICAkKCcjcHYtc3RhZ2UnKS5jbGFzc0xpc3QucmVtb3ZlKCdoaWRkZW4nKTsKICAgICAgJCgnI3B2LWFwcCcpLmNsYXNzTGlzdC5yZW1vdmUoJ2hpZGRlbicpOwogICAgICBhd2FpdCBsb2FkR2hvc3RzKCk7CiAgICAgIGluaXRTY2VuZSgpOwogICAgICBhd2FpdCBpbml0Q2FtZXJhKCk7CiAgICAgIGxvb3AoKTsKICAgIH0KCiAgICBhc3luYyBmdW5jdGlvbiBsb2FkR2hvc3RzKCkgewogICAgICBjb25zdCByZXMgPSBhd2FpdCBmZXRjaCgnL2FwaS9hZG1pbi9naG9zdHMnLCB7IGhlYWRlcnM6IHsgQXV0aG9yaXphdGlvbjogYEJlYXJlciAke1RPS0VOfWAgfSB9KTsKICAgICAgR0hPU1RTID0gKGF3YWl0IHJlcy5qc29uKCkpLmdob3N0czsKICAgICAgY29uc3Qgc2VsID0gJCgnI3B2LXNlbGVjdCcpOwogICAgICBzZWwuaW5uZXJIVE1MID0gJzxvcHRpb24gdmFsdWU9IiI+4oCUIHBpY2sgYSBnaG9zdCDigJQ8L29wdGlvbj4nICsKICAgICAgICBHSE9TVFMubWFwKChnKSA9PiBgPG9wdGlvbiB2YWx1ZT0iJHtnLmlkfSI+JHtlc2MoZy5uYW1lKX0ke2cuaXNfYm9zcyA/ICcgKGJvc3MpJyA6ICcnfSAkeyfimIUnLnJlcGVhdChnLnJhcml0eSl9PC9vcHRpb24+YCkuam9pbignJyk7CiAgICAgIHNlbC5hZGRFdmVudExpc3RlbmVyKCdjaGFuZ2UnLCAoKSA9PiB7CiAgICAgICAgY29uc3QgZyA9IEdIT1NUUy5maW5kKCh4KSA9PiB4LmlkID09PSArc2VsLnZhbHVlKTsKICAgICAgICBpZiAoZykgc2hvd0dob3N0KGcpOwogICAgICAgIGVsc2UgY2xlYXJHaG9zdCgpOwogICAgICB9KTsKICAgIH0KCiAgICAvKiAtLS0tLS0tLS0tIGNhbWVyYSAtLS0tLS0tLS0tICovCiAgICBsZXQgc3RyZWFtID0gbnVsbDsKICAgIGxldCBjYW1lcmFPbiA9IHRydWU7CiAgICBhc3luYyBmdW5jdGlvbiBpbml0Q2FtZXJhKCkgewogICAgICBjb25zdCB2aWRlbyA9ICQoJyNwdi12aWRlbycpOwogICAgICB0cnkgewogICAgICAgIHN0cmVhbSA9IGF3YWl0IG5hdmlnYXRvci5tZWRpYURldmljZXMuZ2V0VXNlck1lZGlhKHsgdmlkZW86IHsgZmFjaW5nTW9kZTogJ2Vudmlyb25tZW50JyB9LCBhdWRpbzogZmFsc2UgfSk7CiAgICAgICAgdmlkZW8uc3JjT2JqZWN0ID0gc3RyZWFtOwogICAgICAgIGF3YWl0IHZpZGVvLnBsYXkoKTsKICAgICAgfSBjYXRjaCB7CiAgICAgICAgJCgnI3B2LWhpbnQnKS50ZXh0Q29udGVudCA9ICdDYW1lcmEgdW5hdmFpbGFibGUg4oCUIGdob3N0IHNob3duIG92ZXIgYSBkYXJrIGJhY2tkcm9wLic7CiAgICAgIH0KICAgIH0KICAgICQoJyNwdi1jYW1lcmEtdG9nZ2xlJykuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoKSA9PiB7CiAgICAgIGNhbWVyYU9uID0gIWNhbWVyYU9uOwogICAgICAkKCcjcHYtdmlkZW8nKS5zdHlsZS52aXNpYmlsaXR5ID0gY2FtZXJhT24gPyAndmlzaWJsZScgOiAnaGlkZGVuJzsKICAgICAgJCgnI3B2LWNhbWVyYS10b2dnbGUnKS50ZXh0Q29udGVudCA9IGBDYW1lcmE6ICR7Y2FtZXJhT24gPyAnb24nIDogJ29mZid9YDsKICAgIH0pOwoKICAgIC8qIC0tLS0tLS0tLS0gdGhyZWUuanMgc2NlbmUgLS0tLS0tLS0tLSAqLwogICAgbGV0IHNjZW5lLCBjYW1lcmEsIHJlbmRlcmVyLCBjdXJyZW50ID0gbnVsbCwgcmFmID0gbnVsbDsKICAgIGxldCBkaXN0YW5jZSA9IDMsIHNpemUgPSAxLjI7CgogICAgZnVuY3Rpb24gaW5pdFNjZW5lKCkgewogICAgICBjb25zdCBjYW52YXMgPSAkKCcjcHYtY2FudmFzJyk7CiAgICAgIHJlbmRlcmVyID0gbmV3IFRIUkVFLldlYkdMUmVuZGVyZXIoeyBjYW52YXMsIGFscGhhOiB0cnVlLCBhbnRpYWxpYXM6IHRydWUgfSk7CiAgICAgIHJlbmRlcmVyLnNldFBpeGVsUmF0aW8oTWF0aC5taW4oZGV2aWNlUGl4ZWxSYXRpbywgMikpOwogICAgICByZW5kZXJlci5zZXRTaXplKGlubmVyV2lkdGgsIGlubmVySGVpZ2h0KTsKCiAgICAgIHNjZW5lID0gbmV3IFRIUkVFLlNjZW5lKCk7CiAgICAgIGNhbWVyYSA9IG5ldyBUSFJFRS5QZXJzcGVjdGl2ZUNhbWVyYSg3MCwgaW5uZXJXaWR0aCAvIGlubmVySGVpZ2h0LCAwLjEsIDEwMCk7CiAgICAgIGNhbWVyYS5wb3NpdGlvbi5zZXQoMCwgMCwgMCk7CgogICAgICBzY2VuZS5hZGQobmV3IFRIUkVFLkFtYmllbnRMaWdodCgweGZmZmZmZiwgMC44NSkpOwogICAgICBjb25zdCBwID0gbmV3IFRIUkVFLlBvaW50TGlnaHQoMHg4OGFhZmYsIDEuMiwgNTApOwogICAgICBwLnBvc2l0aW9uLnNldCgwLCAyLCAyKTsKICAgICAgc2NlbmUuYWRkKHApOwoKICAgICAgYWRkRXZlbnRMaXN0ZW5lcigncmVzaXplJywgKCkgPT4gewogICAgICAgIGNhbWVyYS5hc3BlY3QgPSBpbm5lcldpZHRoIC8gaW5uZXJIZWlnaHQ7CiAgICAgICAgY2FtZXJhLnVwZGF0ZVByb2plY3Rpb25NYXRyaXgoKTsKICAgICAgICByZW5kZXJlci5zZXRTaXplKGlubmVyV2lkdGgsIGlubmVySGVpZ2h0KTsKICAgICAgfSk7CiAgICB9CgogICAgLy8gQnVpbGQgYSBnaG9zdCBncm91cCB1c2luZyB0aGUgU0FNRSByZW5kZXIgcGF0aCBhcyB0aGUgaHVudDoKICAgIC8vIFdlYk0gKFZQOSthbHBoYSkgVmlkZW9UZXh0dXJlIOKGkiBHSUYvaW1hZ2UgVGV4dHVyZSDihpIgcHJvY2VkdXJhbCB3aXNwLgogICAgZnVuY3Rpb24gYnVpbGRHaG9zdChkYXRhKSB7CiAgICAgIGNvbnN0IGdyb3VwID0gbmV3IFRIUkVFLkdyb3VwKCk7CiAgICAgIGNvbnN0IGNvbG9yID0gVFlQRV9DT0xPUlNbZGF0YS50eXBlXSA/PyAweGZmZmZmZjsKICAgICAgbGV0IG1lc2g7CgogICAgICAvLyBBUEkgZmllbGQgbmFtZXMgZnJvbSByb3dUb0dob3N0OiB3ZWJtIC8gd2VicCAvIGltYWdlIChVUkxzIG9yIG51bGwpLgogICAgICBjb25zdCB3ZWJtID0gZGF0YS53ZWJtIHx8IG51bGw7CiAgICAgIGNvbnN0IGltYWdlID0gZGF0YS5pbWFnZSB8fCBkYXRhLndlYnAgfHwgbnVsbDsKCiAgICAgIGlmICh3ZWJtICYmIFNVUFBPUlRTX1dFQk1fQUxQSEEpIHsKICAgICAgICBjb25zdCB2aWQgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCd2aWRlbycpOwogICAgICAgIHZpZC5jcm9zc09yaWdpbiA9ICdhbm9ueW1vdXMnOwogICAgICAgIHZpZC5tdXRlZCA9IHRydWU7IHZpZC5sb29wID0gdHJ1ZTsgdmlkLnBsYXlzSW5saW5lID0gdHJ1ZTsgdmlkLmF1dG9wbGF5ID0gdHJ1ZTsgdmlkLnByZWxvYWQgPSAnYXV0byc7CiAgICAgICAgdmlkLnNyYyA9IHdlYm07CiAgICAgICAgY29uc3QgdGV4ID0gbmV3IFRIUkVFLlZpZGVvVGV4dHVyZSh2aWQpOwogICAgICAgIHRleC5jb2xvclNwYWNlID0gVEhSRUUuU1JHQkNvbG9yU3BhY2U7CiAgICAgICAgdGV4Lm1pbkZpbHRlciA9IFRIUkVFLkxpbmVhckZpbHRlcjsgdGV4Lm1hZ0ZpbHRlciA9IFRIUkVFLkxpbmVhckZpbHRlcjsgdGV4LmdlbmVyYXRlTWlwbWFwcyA9IGZhbHNlOwogICAgICAgIGNvbnN0IG1hdCA9IG5ldyBUSFJFRS5NZXNoQmFzaWNNYXRlcmlhbCh7IG1hcDogdGV4LCB0cmFuc3BhcmVudDogdHJ1ZSwgc2lkZTogVEhSRUUuRG91YmxlU2lkZSwgZGVwdGhXcml0ZTogZmFsc2UgfSk7CiAgICAgICAgbWVzaCA9IG5ldyBUSFJFRS5NZXNoKG5ldyBUSFJFRS5QbGFuZUdlb21ldHJ5KDEsIDEpLCBtYXQpOwogICAgICAgIHZpZC5vbmVycm9yID0gKCkgPT4gewogICAgICAgICAgaWYgKGdyb3VwLnVzZXJEYXRhLmZlbGwgfHwgIWltYWdlKSByZXR1cm47CiAgICAgICAgICBncm91cC51c2VyRGF0YS5mZWxsID0gdHJ1ZTsKICAgICAgICAgIGNvbnN0IGltZyA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2ltZycpOwogICAgICAgICAgaW1nLmNyb3NzT3JpZ2luID0gJ2Fub255bW91cyc7IGltZy5zcmMgPSBpbWFnZTsKICAgICAgICAgIGNvbnN0IHQyID0gbmV3IFRIUkVFLlRleHR1cmUoaW1nKTsKICAgICAgICAgIGltZy5vbmxvYWQgPSAoKSA9PiB7IHQyLm5lZWRzVXBkYXRlID0gdHJ1ZTsgfTsKICAgICAgICAgIG1lc2gubWF0ZXJpYWwubWFwID0gdDI7IG1lc2gubWF0ZXJpYWwubmVlZHNVcGRhdGUgPSB0cnVlOwogICAgICAgICAgZ3JvdXAudXNlckRhdGEuZ2lmVGV4ID0gdDI7IGdyb3VwLnVzZXJEYXRhLmdpZkltZyA9IGltZzsgZ3JvdXAudXNlckRhdGEudmlkRWwgPSBudWxsOwogICAgICAgIH07CiAgICAgICAgY29uc3QgcHIgPSB2aWQucGxheSgpOyBpZiAocHIgJiYgcHIuY2F0Y2gpIHByLmNhdGNoKCgpID0+IHt9KTsKICAgICAgICBncm91cC51c2VyRGF0YS52aWRFbCA9IHZpZDsKICAgICAgfSBlbHNlIGlmIChpbWFnZSkgewogICAgICAgIGNvbnN0IGltZyA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2ltZycpOwogICAgICAgIGltZy5jcm9zc09yaWdpbiA9ICdhbm9ueW1vdXMnOyBpbWcuc3JjID0gaW1hZ2U7CiAgICAgICAgY29uc3QgdGV4ID0gbmV3IFRIUkVFLlRleHR1cmUoaW1nKTsKICAgICAgICBpbWcub25sb2FkID0gKCkgPT4geyB0ZXgubmVlZHNVcGRhdGUgPSB0cnVlOyB9OwogICAgICAgIGNvbnN0IG1hdCA9IG5ldyBUSFJFRS5NZXNoQmFzaWNNYXRlcmlhbCh7IG1hcDogdGV4LCB0cmFuc3BhcmVudDogdHJ1ZSwgc2lkZTogVEhSRUUuRG91YmxlU2lkZSB9KTsKICAgICAgICBtZXNoID0gbmV3IFRIUkVFLk1lc2gobmV3IFRIUkVFLlBsYW5lR2VvbWV0cnkoMSwgMSksIG1hdCk7CiAgICAgICAgZ3JvdXAudXNlckRhdGEuZ2lmVGV4ID0gdGV4OyBncm91cC51c2VyRGF0YS5naWZJbWcgPSBpbWc7CiAgICAgIH0gZWxzZSB7CiAgICAgICAgY29uc3QgZ2VvID0gbmV3IFRIUkVFLlNwaGVyZUdlb21ldHJ5KDAuNCwgMjQsIDI0KTsKICAgICAgICBjb25zdCBtYXQgPSBuZXcgVEhSRUUuTWVzaFN0YW5kYXJkTWF0ZXJpYWwoewogICAgICAgICAgY29sb3IsIGVtaXNzaXZlOiBjb2xvciwgZW1pc3NpdmVJbnRlbnNpdHk6IDEuNCwgcm91Z2huZXNzOiAwLjQsIHRyYW5zcGFyZW50OiB0cnVlLCBvcGFjaXR5OiAwLjkyLAogICAgICAgIH0pOwogICAgICAgIG1lc2ggPSBuZXcgVEhSRUUuTWVzaChnZW8sIG1hdCk7CiAgICAgICAgY29uc3QgaGFsbyA9IG5ldyBUSFJFRS5NZXNoKAogICAgICAgICAgbmV3IFRIUkVFLlNwaGVyZUdlb21ldHJ5KDAuNTUsIDI0LCAyNCksCiAgICAgICAgICBuZXcgVEhSRUUuTWVzaEJhc2ljTWF0ZXJpYWwoeyBjb2xvciwgdHJhbnNwYXJlbnQ6IHRydWUsIG9wYWNpdHk6IDAuMTYsIHNpZGU6IFRIUkVFLkJhY2tTaWRlIH0pCiAgICAgICAgKTsKICAgICAgICBncm91cC5hZGQoaGFsbyk7CiAgICAgIH0KICAgICAgZ3JvdXAuYWRkKG1lc2gpOwogICAgICBncm91cC51c2VyRGF0YS5tZXNoID0gbWVzaDsKICAgICAgZ3JvdXAudXNlckRhdGEuYm9iUGhhc2UgPSBNYXRoLnJhbmRvbSgpICogTWF0aC5QSSAqIDI7CiAgICAgIHJldHVybiBncm91cDsKICAgIH0KCiAgICBmdW5jdGlvbiBzaG93R2hvc3QoZGF0YSkgewogICAgICBjbGVhckdob3N0KCk7CiAgICAgIGN1cnJlbnQgPSBidWlsZEdob3N0KGRhdGEpOwogICAgICBhcHBseVRyYW5zZm9ybSgpOwogICAgICBzY2VuZS5hZGQoY3VycmVudCk7CiAgICAgICQoJyNwdi1oaW50JykudGV4dENvbnRlbnQgPSBgJHtkYXRhLm5hbWV9JHtkYXRhLndlYm0gPyAnIMK3IFdlYk0nICsgKFNVUFBPUlRTX1dFQk1fQUxQSEEgPyAnJyA6ICcgKG5vIFZQOS1hbHBoYSDihpIgZmFsbGJhY2spJykgOiBkYXRhLmltYWdlID8gJyDCtyBpbWFnZScgOiAnIMK3IHByb2NlZHVyYWwgd2lzcCd9YDsKICAgIH0KCiAgICBmdW5jdGlvbiBjbGVhckdob3N0KCkgewogICAgICBpZiAoIWN1cnJlbnQpIHJldHVybjsKICAgICAgaWYgKGN1cnJlbnQudXNlckRhdGEudmlkRWwpIHsgdHJ5IHsgY3VycmVudC51c2VyRGF0YS52aWRFbC5wYXVzZSgpOyBjdXJyZW50LnVzZXJEYXRhLnZpZEVsLnNyYyA9ICcnOyB9IGNhdGNoIHt9IH0KICAgICAgc2NlbmUucmVtb3ZlKGN1cnJlbnQpOwogICAgICBjdXJyZW50ID0gbnVsbDsKICAgIH0KCiAgICBmdW5jdGlvbiBhcHBseVRyYW5zZm9ybSgpIHsKICAgICAgaWYgKCFjdXJyZW50KSByZXR1cm47CiAgICAgIGN1cnJlbnQucG9zaXRpb24uc2V0KDAsIDAsIC1kaXN0YW5jZSk7CiAgICAgIGNvbnN0IG0gPSBjdXJyZW50LnVzZXJEYXRhLm1lc2g7CiAgICAgIGlmIChtKSBtLnNjYWxlLnNldChzaXplLCBzaXplLCBzaXplKTsKICAgIH0KCiAgICAkKCcjcHYtZGlzdCcpLmFkZEV2ZW50TGlzdGVuZXIoJ2lucHV0JywgKGUpID0+IHsKICAgICAgZGlzdGFuY2UgPSArZS50YXJnZXQudmFsdWU7ICQoJyNwdi1kaXN0LXZhbCcpLnRleHRDb250ZW50ID0gZGlzdGFuY2UudG9GaXhlZCgxKTsgYXBwbHlUcmFuc2Zvcm0oKTsKICAgIH0pOwogICAgJCgnI3B2LXNpemUnKS5hZGRFdmVudExpc3RlbmVyKCdpbnB1dCcsIChlKSA9PiB7CiAgICAgIHNpemUgPSArZS50YXJnZXQudmFsdWU7ICQoJyNwdi1zaXplLXZhbCcpLnRleHRDb250ZW50ID0gc2l6ZS50b0ZpeGVkKDEpOyBhcHBseVRyYW5zZm9ybSgpOwogICAgfSk7CgogICAgZnVuY3Rpb24gbG9vcCgpIHsKICAgICAgcmFmID0gcmVxdWVzdEFuaW1hdGlvbkZyYW1lKGxvb3ApOwogICAgICBjb25zdCB0ID0gcGVyZm9ybWFuY2Uubm93KCkgLyAxMDAwOwogICAgICBpZiAoY3VycmVudCkgewogICAgICAgIGN1cnJlbnQucG9zaXRpb24ueSA9IE1hdGguc2luKHQgKiAxLjUgKyBjdXJyZW50LnVzZXJEYXRhLmJvYlBoYXNlKSAqIDAuMDY7CiAgICAgICAgY3VycmVudC5sb29rQXQoY2FtZXJhLnBvc2l0aW9uKTsKICAgICAgICBpZiAoY3VycmVudC51c2VyRGF0YS5naWZUZXggJiYgY3VycmVudC51c2VyRGF0YS5naWZJbWc/LmNvbXBsZXRlKSBjdXJyZW50LnVzZXJEYXRhLmdpZlRleC5uZWVkc1VwZGF0ZSA9IHRydWU7CiAgICAgIH0KICAgICAgcmVuZGVyZXIucmVuZGVyKHNjZW5lLCBjYW1lcmEpOwogICAgfQoKICAgIGZ1bmN0aW9uIGVzYyhzKSB7CiAgICAgIHJldHVybiBTdHJpbmcocyA/PyAnJykucmVwbGFjZSgvWyY8PiInXS9nLCAoYykgPT4KICAgICAgICAoeyAnJic6ICcmYW1wOycsICc8JzogJyZsdDsnLCAnPic6ICcmZ3Q7JywgJyInOiAnJnF1b3Q7JywgIiciOiAnJiMzOTsnIH1bY10pKTsKICAgIH0KICA8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+Cg==
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1" />
+  <title>Newbury Nights — Ghost Preview</title>
+  <link rel="stylesheet" href="/css/app.css" />
+  <script type="importmap">
+  {
+    "imports": {
+      "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js"
+    }
+  }
+  </script>
+  <style>
+    #pv-stage { position: fixed; inset: 0; overflow: hidden; background: #07090f; }
+    #pv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+    #pv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
+    .pv-bar {
+      position: fixed; left: 0; right: 0; top: 0; z-index: 10;
+      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+      padding: 10px 14px; background: rgba(7,9,15,.82); backdrop-filter: blur(8px);
+      border-bottom: 1px solid rgba(255,255,255,.08);
+    }
+    .pv-bar .brand { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 14px; }
+    .pv-bar .brand span { color: var(--blue, #3bb6ff); }
+    .pv-bar select, .pv-bar button { font-size: 13px; }
+    .pv-bar .grow { flex: 1; }
+    .pv-hint { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
+      text-align: center; padding: 8px; font-family: var(--mono, monospace); font-size: 11px;
+      color: rgba(255,255,255,.7); background: linear-gradient(transparent, rgba(7,9,15,.75)); }
+    .pv-controls { position: fixed; right: 14px; bottom: 36px; z-index: 10;
+      display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
+    .pv-controls label { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .1em;
+      text-transform: uppercase; color: rgba(255,255,255,.65); }
+    .pv-controls input[type=range] { width: 150px; }
+    /* Login gate */
+    #pv-login { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
+      padding: 24px; background: #07090f; }
+    .pv-login-card { background: var(--panel, #11151f); border: 1px solid rgba(255,255,255,.1);
+      border-radius: 14px; padding: 30px; width: 100%; max-width: 360px; }
+    .pv-login-card h1 { font-size: 30px; line-height: .9; margin: 0 0 4px; }
+    .pv-login-card h1 span { color: var(--blue, #3bb6ff); }
+    .pv-login-card .sub { font-size: 11px; letter-spacing: .3em; color: rgba(255,255,255,.55);
+      margin: 6px 0 22px; font-family: var(--mono, monospace); }
+    .pv-login-card label { display: block; margin-top: 12px; font-size: 13px; }
+    .pv-login-card input { width: 100%; box-sizing: border-box; }
+    .pv-err { color: var(--danger, #ff3b5c); font-size: 13px; margin-top: 12px; }
+    .hidden { display: none !important; }
+  </style>
+</head>
+<body>
+  <!-- Login gate (same client-side flow as /admin) -->
+  <div id="pv-login">
+    <div class="pv-login-card">
+      <h1>Newbury<span>Nights</span></h1>
+      <div class="sub">GHOST PREVIEW</div>
+      <label for="pv-user">Username</label>
+      <input id="pv-user" autocomplete="username" />
+      <label for="pv-pass">Password</label>
+      <input id="pv-pass" type="password" autocomplete="current-password" />
+      <button class="primary" id="pv-go" style="width:100%;margin-top:14px">Sign in</button>
+      <div id="pv-login-err" class="pv-err hidden"></div>
+    </div>
+  </div>
+
+  <!-- Preview stage -->
+  <div id="pv-stage" class="hidden">
+    <video id="pv-video" playsinline muted></video>
+    <canvas id="pv-canvas"></canvas>
+  </div>
+
+  <div id="pv-app" class="hidden">
+    <div class="pv-bar">
+      <div class="brand">Newbury<span>Nights</span> · PREVIEW</div>
+      <select id="pv-select"><option value="">Loading ghosts…</option></select>
+      <button id="pv-camera-toggle" class="small">Camera: on</button>
+      <span class="grow"></span>
+      <a href="/admin" class="small" style="text-decoration:none"><button class="small">← Admin</button></a>
+    </div>
+
+    <div class="pv-controls">
+      <label>Distance <span id="pv-dist-val">3.0</span></label>
+      <input id="pv-dist" type="range" min="1.5" max="8" step="0.1" value="3" />
+      <label>Size <span id="pv-size-val">1.2</span></label>
+      <input id="pv-size" type="range" min="0.4" max="3" step="0.1" value="1.2" />
+    </div>
+
+    <div class="pv-hint" id="pv-hint">Select a ghost to preview it over the camera feed.</div>
+  </div>
+
+  <script type="module">
+    import * as THREE from 'three';
+
+    const $ = (s) => document.querySelector(s);
+    const TYPE_COLORS = { red: 0xff3b5c, yellow: 0xffc23b, blue: 0x3bb6ff };
+
+    // Same VP9-alpha capability check as the hunt.
+    const SUPPORTS_WEBM_ALPHA = (() => {
+      try {
+        const v = document.createElement('video');
+        return !!v.canPlayType && v.canPlayType('video/webm; codecs="vp9"') !== '';
+      } catch { return false; }
+    })();
+
+    let TOKEN = null;
+    let GHOSTS = [];
+
+    /* ---------- login ---------- */
+    $('#pv-go').addEventListener('click', login);
+    $('#pv-pass').addEventListener('keydown', (e) => { if (e.key === 'Enter') login(); });
+
+    async function login() {
+      const username = $('#pv-user').value.trim();
+      const password = $('#pv-pass').value;
+      const err = $('#pv-login-err');
+      err.classList.add('hidden');
+      try {
+        const res = await fetch('/auth/login', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ username, password }),
+        });
+        if (!res.ok) throw new Error('bad login');
+        TOKEN = (await res.json()).token;
+      } catch {
+        err.textContent = 'Invalid username or password.';
+        err.classList.remove('hidden');
+        return;
+      }
+      $('#pv-login').classList.add('hidden');
+      $('#pv-stage').classList.remove('hidden');
+      $('#pv-app').classList.remove('hidden');
+      await loadGhosts();
+      initScene();
+      await initCamera();
+      loop();
+    }
+
+    async function loadGhosts() {
+      const res = await fetch('/api/admin/ghosts', { headers: { Authorization: `Bearer ${TOKEN}` } });
+      GHOSTS = (await res.json()).ghosts;
+      const sel = $('#pv-select');
+      sel.innerHTML = '<option value="">— pick a ghost —</option>' +
+        GHOSTS.map((g) => `<option value="${g.id}">${esc(g.name)}${g.is_boss ? ' (boss)' : ''} ${'★'.repeat(g.rarity)}</option>`).join('');
+      sel.addEventListener('change', () => {
+        const g = GHOSTS.find((x) => x.id === +sel.value);
+        if (g) showGhost(g);
+        else clearGhost();
+      });
+    }
+
+    /* ---------- camera ---------- */
+    let stream = null;
+    let cameraOn = true;
+    async function initCamera() {
+      const video = $('#pv-video');
+      try {
+        stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' }, audio: false });
+        video.srcObject = stream;
+        await video.play();
+      } catch {
+        $('#pv-hint').textContent = 'Camera unavailable — ghost shown over a dark backdrop.';
+      }
+    }
+    $('#pv-camera-toggle').addEventListener('click', () => {
+      cameraOn = !cameraOn;
+      $('#pv-video').style.visibility = cameraOn ? 'visible' : 'hidden';
+      $('#pv-camera-toggle').textContent = `Camera: ${cameraOn ? 'on' : 'off'}`;
+    });
+
+    /* ---------- three.js scene ---------- */
+    let scene, camera, renderer, current = null, raf = null;
+    let distance = 3, size = 1.2;
+
+    function initScene() {
+      const canvas = $('#pv-canvas');
+      renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
+      renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+      renderer.setSize(innerWidth, innerHeight);
+
+      scene = new THREE.Scene();
+      camera = new THREE.PerspectiveCamera(70, innerWidth / innerHeight, 0.1, 100);
+      camera.position.set(0, 0, 0);
+
+      scene.add(new THREE.AmbientLight(0xffffff, 0.85));
+      const p = new THREE.PointLight(0x88aaff, 1.2, 50);
+      p.position.set(0, 2, 2);
+      scene.add(p);
+
+      addEventListener('resize', () => {
+        camera.aspect = innerWidth / innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(innerWidth, innerHeight);
+      });
+    }
+
+    // Build a ghost group using the SAME render path as the hunt:
+    // WebM (VP9+alpha) VideoTexture -> GIF/image Texture -> procedural wisp.
+    function buildGhost(data) {
+      const group = new THREE.Group();
+      const color = TYPE_COLORS[data.type] ?? 0xffffff;
+      let mesh;
+
+      // API field names from rowToGhost: webm / webp / image (URLs or null).
+      const webm = data.webm || null;
+      const image = data.image || data.webp || null;
+
+      if (webm && SUPPORTS_WEBM_ALPHA) {
+        const vid = document.createElement('video');
+        vid.crossOrigin = 'anonymous';
+        vid.muted = true; vid.loop = true; vid.playsInline = true; vid.autoplay = true; vid.preload = 'auto';
+        vid.src = webm;
+        const tex = new THREE.VideoTexture(vid);
+        tex.colorSpace = THREE.SRGBColorSpace;
+        tex.minFilter = THREE.LinearFilter; tex.magFilter = THREE.LinearFilter; tex.generateMipmaps = false;
+        const mat = new THREE.MeshBasicMaterial({ map: tex, transparent: true, side: THREE.DoubleSide, depthWrite: false });
+        mesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), mat);
+        vid.onerror = () => {
+          if (group.userData.fell || !image) return;
+          group.userData.fell = true;
+          const img = document.createElement('img');
+          img.crossOrigin = 'anonymous'; img.src = image;
+          const t2 = new THREE.Texture(img);
+          img.onload = () => { t2.needsUpdate = true; };
+          mesh.material.map = t2; mesh.material.needsUpdate = true;
+          group.userData.gifTex = t2; group.userData.gifImg = img; group.userData.vidEl = null;
+        };
+        const pr = vid.play(); if (pr && pr.catch) pr.catch(() => {});
+        group.userData.vidEl = vid;
+      } else if (image) {
+        const img = document.createElement('img');
+        img.crossOrigin = 'anonymous'; img.src = image;
+        const tex = new THREE.Texture(img);
+        img.onload = () => { tex.needsUpdate = true; };
+        const mat = new THREE.MeshBasicMaterial({ map: tex, transparent: true, side: THREE.DoubleSide });
+        mesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), mat);
+        group.userData.gifTex = tex; group.userData.gifImg = img;
+      } else {
+        const geo = new THREE.SphereGeometry(0.4, 24, 24);
+        const mat = new THREE.MeshStandardMaterial({
+          color, emissive: color, emissiveIntensity: 1.4, roughness: 0.4, transparent: true, opacity: 0.92,
+        });
+        mesh = new THREE.Mesh(geo, mat);
+        const halo = new THREE.Mesh(
+          new THREE.SphereGeometry(0.55, 24, 24),
+          new THREE.MeshBasicMaterial({ color, transparent: true, opacity: 0.16, side: THREE.BackSide })
+        );
+        group.add(halo);
+      }
+      group.add(mesh);
+      group.userData.mesh = mesh;
+      group.userData.bobPhase = Math.random() * Math.PI * 2;
+      return group;
+    }
+
+    function showGhost(data) {
+      clearGhost();
+      current = buildGhost(data);
+      applyTransform();
+      scene.add(current);
+      $('#pv-hint').textContent = `${data.name}${data.webm ? ' · WebM' + (SUPPORTS_WEBM_ALPHA ? '' : ' (no VP9-alpha -> fallback)') : data.image ? ' · image' : ' · procedural wisp'}`;
+    }
+
+    function clearGhost() {
+      if (!current) return;
+      if (current.userData.vidEl) { try { current.userData.vidEl.pause(); current.userData.vidEl.src = ''; } catch {} }
+      scene.remove(current);
+      current = null;
+    }
+
+    function applyTransform() {
+      if (!current) return;
+      current.position.set(0, 0, -distance);
+      const m = current.userData.mesh;
+      if (m) m.scale.set(size, size, size);
+    }
+
+    $('#pv-dist').addEventListener('input', (e) => {
+      distance = +e.target.value; $('#pv-dist-val').textContent = distance.toFixed(1); applyTransform();
+    });
+    $('#pv-size').addEventListener('input', (e) => {
+      size = +e.target.value; $('#pv-size-val').textContent = size.toFixed(1); applyTransform();
+    });
+
+    function loop() {
+      raf = requestAnimationFrame(loop);
+      const t = performance.now() / 1000;
+      if (current) {
+        current.position.y = Math.sin(t * 1.5 + current.userData.bobPhase) * 0.06;
+        current.lookAt(camera.position);
+        if (current.userData.gifTex && current.userData.gifImg?.complete) current.userData.gifTex.needsUpdate = true;
+      }
+      renderer.render(scene, camera);
+    }
+
+    function esc(s) {
+      return String(s ?? '').replace(/[&<>"']/g, (c) =>
+        ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+    }
+  </script>
+</body>
+</html>