diff --git a/.gitignore b/.gitignore
index 56934af..46123e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,3 +12,4 @@ _build
 _tmp
 .directory
 *~
+dist-newstyle
diff --git a/Makefile b/Makefile
index 76ee9e2..dba6522 100644
--- a/Makefile
+++ b/Makefile
@@ -1,12 +1,14 @@
-CSS   = $(wildcard style/*.css) $(shell find fonts -type f) \
-        rainbow-quox/style.css
 PAGES = index.html pubkey.txt rainbow-quox/index.html
 MEDIA = \
   $(wildcard media/*.png) $(wildcard media/*.gif) $(wildcard media/*.webp) \
   $(wildcard media/flags/*) $(wildcard media/buttons/*) \
   $(wildcard media/icons/*) $(wildcard media/bg/*) 8831.png 8831-quox.png \
-  $(wildcard rainbow-quox/front/*.png) $(wildcard rainbow-quox/back/*.png)
-SCRIPTS = $(patsubst %.ts,%.js,$(wildcard script/*.ts rainbow-quox/*.ts))
+  $(wildcard rainbow-quox/front/*) $(wildcard rainbow-quox/back/*) \
+  $(wildcard rainbow-quox/*.svg) rainbow-quox/palette.svg
+CSS   = $(shell find fonts -type f) \
+        $(patsubst %.scss,%.css, \
+          $(wildcard rainbow-quox/style/*) $(wildcard style/*))
+SCRIPTS = $(patsubst %.ts,%.js,$(wildcard script/*.ts rainbow-quox/script/*.ts))
 MISC  = $(shell find .well-known -type f)
 ALL   = $(CSS) $(PAGES) $(MEDIA) $(SCRIPTS) $(MISC)
 
@@ -29,38 +31,31 @@ upload: build
 	       $(BUILDDIR)/ $(HOST):$(REMOTE_DIR)/
 
 $(BUILDDIR)/%: %
-	@echo $*
-	@mkdir -p $(dir $@)
-	@cp $< $@
-
-$(BUILDDIR)/%.gif: %_bg.gif
-	@echo $(notdir $@)
-	@mkdir -p $(dir $(BUILDDIR)/$* $(TMPDIR)/$*)
-	@gifsicle -U $*_bg.gif -o $(TMPDIR)/$*_bg_u.gif
-	@convert -transparent '#ff9bc7' $(TMPDIR)/$*_bg_u.gif $(TMPDIR)/$*_t.gif
-	@gifsicle --disposal=previous $(TMPDIR)/$*_t.gif -o $(BUILDDIR)/$*.gif
-
-$(BUILDDIR)/%_small.png: %.svg
-	@echo $(notdir $@)
-	@mkdir -p $(dir $@)
-	@inkscape -e $@ -h 16 $< >/dev/null
-
-$(BUILDDIR)/%_large.png: %.svg
-	@echo $(notdir $@)
-	@mkdir -p $(dir $@)
-	@inkscape -e $@ -h 30 $< >/dev/null
-
-$(BUILDDIR)/%_dim.png: %.png
-	@echo $(notdir $@)
-	@convert -channel A -evaluate Multiply 0.75 $< $@
+	@echo '[copy] ' $<
+	mkdir -p $(dir $@)
+	cp $< $@
 
 $(BUILDDIR)/%.js: %.ts
+	@echo '[tsc] ' $<
 	tsc --strict --noUncheckedIndexedAccess --noEmitOnError \
-	    --lib dom,es2023 --target es2015 \
+	    --lib dom,es2023 --target es2022 \
 	    --outDir $(dir $@) $^
 
+$(BUILDDIR)/rainbow-quox/palette.svg: rainbow-quox/make-palette/*
+	@echo '[make-palette] rainbow-quox/palette.svg'
+	cd rainbow-quox/make-palette; \
+	  cabal run -v0 -- make-palette $(abspath $@)
+
+$(BUILDDIR)/%.css: %.scss $(wildcard $(dir %)/lib/*.scss)
+	@echo '[sass] ' $<
+	mkdir -p $(dir $@)
+	sass --no-source-map -I style $< $@ \
+	  --silence-deprecation mixed-decls
 
 clean:
+	@echo '[clean]'
 	$(RM) -r $(TMPDIR) $(BUILDDIR)
 
 .PHONY: clean all build upload
+
+.SILENT:
diff --git a/fonts/pragmatapro/pragmatapro.css b/fonts/pragmatapro/pragmatapro.css
new file mode 100644
index 0000000..38ebfa8
--- /dev/null
+++ b/fonts/pragmatapro/pragmatapro.css
@@ -0,0 +1,25 @@
+@font-face {
+  font-family: PrgmataPro;
+  font-weight: 400;
+  src:         url(r.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: PrgmataPro;
+  font-weight: 500;
+  src:         url(b.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: PrgmataPro;
+  font-weight: 400;
+  font-style:  italic;
+  src:         url(i.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: PrgmataPro;
+  font-weight: 500;
+  font-style:  italic;
+  src:         url(bi.woff2) format('woff2');
+}
diff --git a/index.html b/index.html
index 713c8dd..68ab674 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
 <link rel=me href=https://chitter.xyz/@niss>
 <link rel=me href=https://cohost.org/niss>
 
-<link rel=icon href=media/favicon.png>
+<link rel=icon href=media/favicon.webp>
 <link rel=stylesheet href=style/base.css>
 <link rel=stylesheet href=style/cube.css>
 <link rel=stylesheet href=style/flat.css>
@@ -20,14 +20,14 @@
 <meta property=og:title content="the gec zone">
 <meta property=og:description content="lair of the creature known as “niss”">
 <meta property=og:url content="https://yummy.cricket">
-<meta property=og:image        content=media/opengraph.png>
+<meta property=og:image        content=media/opengraph.webp>
 <meta property=og:image:width  content=400>
 <meta property=og:image:height content=400>
-<meta property=og:image        content=media/twittercard.png>
+<meta property=og:image        content=media/twittercard.webp>
 <meta property=og:image:width  content=800>
 <meta property=og:image:height content=418>
 <meta name=twitter:card  content=summary_large_image>
-<meta name=twitter:image content=media/twittercard.png>
+<meta name=twitter:image content=media/twittercard.webp>
 
 <script src=script/shuffle.js type=module></script>
 <script src=script/run.js type=module></script>
@@ -96,11 +96,11 @@
       </dl>
 
       <div id=flags>
-        <img src=media/flags/nb.png alt=non-binary title=non-binary>
-        <img src=media/flags/gf.png alt=genderfluid title=genderfluid>
-        <img src=media/flags/pan.png alt=pansexual title=pansexual>
-        <img src=media/flags/quoi.png alt=quoiromantic title=quoiromantic>
-        <img src=media/flags/polyam.png alt=polyamorous title=polyamorous>
+        <img src=media/flags/nb.svg alt=non-binary title=non-binary>
+        <img src=media/flags/gf.svg alt=genderfluid title=genderfluid>
+        <img src=media/flags/pan.svg alt=pansexual title=pansexual>
+        <img src=media/flags/quoi.svg alt=quoiromantic title=quoiromantic>
+        <img src=media/flags/polyam.svg alt=polyamorous title=polyamorous>
       </div>
     </section>
 
@@ -345,10 +345,8 @@
               <picture>
                 <source srcset=media/buttons/FaeAlchemist_still.png
                         media='(prefers-reduced-motion: reduce)'>
-                <img src=https://faealchemist.neocities.org/FaeAlchemist%2088x31.gif
-                     alt=faealchemist>
+                <img src=media/buttons/FaeAlchemist.png alt=faealchemist>
               </picture>
-              <!-- hotlinked to keep it up to date -->
             </a>
 
           <li id=suricrasia>
@@ -434,6 +432,15 @@
             <a href=https://blaurascon.nfshost.com title="blau's blog">
               <img src=media/buttons/blau.png alt="blau's blog">
             </a>
+
+          <li id=deneb>
+            <a href=https://www.netdeneb.com title=deneb>
+              <picture>
+                <source srcset=media/buttons/deneb_still.webp
+                        media='(prefers-reduced-motion: reduce)'>
+                <img src=media/buttons/deneb.gif alt=deneb>
+              </picture>
+            </a>
         </ul>
       </section>
 
diff --git a/media/buttons/FaeAlchemist.gif b/media/buttons/FaeAlchemist.gif
new file mode 100644
index 0000000..abc354b
--- /dev/null
+++ b/media/buttons/FaeAlchemist.gif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9b3110b0a64cad092084d1a63e0c453d47a6c2155a826558cf6063cfd504bd97
+size 5363
diff --git a/media/buttons/alloyed_still.png b/media/buttons/alloyed_still.png
index 9cb13a2..ccbc0f4 100644
--- a/media/buttons/alloyed_still.png
+++ b/media/buttons/alloyed_still.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f2172d138592cd776beab68b871168dc6cd9cefe827ce11f0010b139ee8955e4
-size 1645
+oid sha256:b57d3bec7570d8fe2f8a42ceb9fb107bd26513ae56fe27230878797c03e516f7
+size 1620
diff --git a/media/buttons/beeps_still.png b/media/buttons/beeps_still.png
index 4c362b9..101bb6b 100644
--- a/media/buttons/beeps_still.png
+++ b/media/buttons/beeps_still.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1d5caf5462dba1c6ab25491ec835f7433040c847c81ccd36d29c8b717e13315b
-size 1977
+oid sha256:a62d65bbbb03db4956c29c4a4f743e6ffc62d5462488189c43fdd968bb8b23e9
+size 1955
diff --git a/media/buttons/blau.png b/media/buttons/blau.png
index 0b9e0cb..8ebc487 100644
--- a/media/buttons/blau.png
+++ b/media/buttons/blau.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e18ee746676a2e3b31780c1603e0faecfac2be1b7a662ab9144a3dfb1e6b1079
-size 3011
+oid sha256:80d79cabb9439b5b0056c3755a4529d4cf4ce00f438478fdc515c6e1fe0f3102
+size 2952
diff --git a/media/buttons/cdromca.png b/media/buttons/cdromca.png
index 1451288..d981036 100644
--- a/media/buttons/cdromca.png
+++ b/media/buttons/cdromca.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1d0a89493957752d850100702f4148e010c197b089d83cc465e042658119298c
-size 698
+oid sha256:9573a56b72533d21ec436929c922303516377ed579732f30a711979edb1a219c
+size 696
diff --git a/media/buttons/cervine.png b/media/buttons/cervine.png
index 39caa3a..e9fb25c 100644
--- a/media/buttons/cervine.png
+++ b/media/buttons/cervine.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9387d58c41cd8e6496ef3a8eeaed5b4e7f273d1a1c3eacd974b07cdbdb8db4f0
-size 5036
+oid sha256:a15c8db5290884eda04f9d782a329ce822b53ebf14bd0cf529d126e7101b9b02
+size 4376
diff --git a/media/buttons/clip.png b/media/buttons/clip.png
index c4d9443..e301dec 100644
--- a/media/buttons/clip.png
+++ b/media/buttons/clip.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fa4a658acc9f0d9f2557bace361c9bc41acdf06eb2d8f4fda45365a658c9e8d3
-size 2098
+oid sha256:0aca89b28d4ea4865d0d3d3fa698c1f5160900a8c8ed56cf6e4487d03128f260
+size 1612
diff --git a/media/buttons/coda.png b/media/buttons/coda.png
index 611f52b..55ec73c 100644
--- a/media/buttons/coda.png
+++ b/media/buttons/coda.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:91794eb1b2a45422b14072272c40eb734cd0b1284c668a2300557b2f95515224
-size 2401
+oid sha256:b91cbe947172a37d713c8f06ba8a2b565fbdbabb1f8e4d7ae60a7a021be4176a
+size 943
diff --git a/media/buttons/craw.png b/media/buttons/craw.png
index c494186..0fb3f95 100644
--- a/media/buttons/craw.png
+++ b/media/buttons/craw.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d76b9015e9e7059279a93357c9b6de5a64255e4543627900b0b3a1c9f788ee27
-size 483
+oid sha256:11d39aea3b7588335c1ba0b9085cb1bd05bcbdd53778db4151811aab51590532
+size 440
diff --git a/media/buttons/creature0354_still.png b/media/buttons/creature0354_still.png
index 8a1858d..762e328 100644
--- a/media/buttons/creature0354_still.png
+++ b/media/buttons/creature0354_still.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:db007dba478cf2c1907416e6c79b75081fc85b6d0bce73814919714370d49124
-size 2695
+oid sha256:3052dce39b800d54b47354dac69d032eb39328ca71d104878ffdb5c94fa891af
+size 2662
diff --git a/media/buttons/crouton.png b/media/buttons/crouton.png
index 5f7c400..ea52bbf 100644
--- a/media/buttons/crouton.png
+++ b/media/buttons/crouton.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f9196b6e515480cac2270d7a20edac8a377d0fd9eed11661335141e595363b18
-size 10437
+oid sha256:35ba66cdb47c60e0c10571806652d6a32b5c78ba32dcfd028d94f4ad6a12d1f4
+size 9486
diff --git a/media/buttons/deneb.gif b/media/buttons/deneb.gif
new file mode 100644
index 0000000..c8b169b
--- /dev/null
+++ b/media/buttons/deneb.gif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c3b50cf4132822b62250edccc57530ea4be20fc731e0b894e8fdabb0f9385642
+size 7330
diff --git a/media/buttons/deneb_still.webp b/media/buttons/deneb_still.webp
new file mode 100644
index 0000000..bf1c8ef
--- /dev/null
+++ b/media/buttons/deneb_still.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:aeb9ba3b1e0c0f7178803f0f18d54e2ab5f3d0db320008472f7382a1e23b4054
+size 1650
diff --git a/media/buttons/dex.png b/media/buttons/dex.png
index 1f16eb1..db28211 100644
--- a/media/buttons/dex.png
+++ b/media/buttons/dex.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cfdb19bf757b16700c95ad69ac2e71d79acd7ef7490b1aaa3e86cc102cb6501f
-size 5686
+oid sha256:3a9983502803ef4be963dc1424ffeb89163402fd8b7184a388728ee0f53e51f9
+size 5650
diff --git a/media/buttons/dino.png b/media/buttons/dino.png
index eae44c7..900d5e9 100644
--- a/media/buttons/dino.png
+++ b/media/buttons/dino.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:50f62c80929903b191fd53d57fab5115d253662378c7c788dc6c21862d6cc922
-size 12590
+oid sha256:90e60881064ce5dbde5fa8f62f8a84af46365ffdbe89e36fb8dc7f58358b4133
+size 11675
diff --git a/media/buttons/gabu.png b/media/buttons/gabu.png
index 9daf840..07aa9cd 100644
--- a/media/buttons/gabu.png
+++ b/media/buttons/gabu.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:009b7fc831c0ff7ad57fe71979a0c45be3a4ccd0560e41d3fddc465a8c586ced
-size 835
+oid sha256:7c879b9571886c3215b0673fa743e43d61a6a8d6ec5a2cbff3160cd586316370
+size 766
diff --git a/media/buttons/gulfie.png b/media/buttons/gulfie.png
index 0c6fa47..0efab85 100644
--- a/media/buttons/gulfie.png
+++ b/media/buttons/gulfie.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:240ea6a48809669131cbff7b386a94fd0747bbd3ab78fb4ea8cf9cd19f84a7de
-size 135776
+oid sha256:869bd07d2ef491553e2ed11e6fe765f7f90004ba74b191b8b173bb82a9770e39
+size 135530
diff --git a/media/buttons/hell-labs-still.png b/media/buttons/hell-labs-still.png
index a23a3f2..52cb157 100644
--- a/media/buttons/hell-labs-still.png
+++ b/media/buttons/hell-labs-still.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b23dbc5031f29fb0cb383eb3acda6e0dce805b34a570506a79cae333fa39b05d
-size 2394
+oid sha256:075b0b93bd984c7078b6ec58e0e10e823ec5d538794f382082abeddfb3c79166
+size 1805
diff --git a/media/buttons/katja.png b/media/buttons/katja.png
index 5f470b3..e54e790 100644
--- a/media/buttons/katja.png
+++ b/media/buttons/katja.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d17d6314c864556208031d7d1103fab509cc894b195db98a82685261c96c8299
-size 4027
+oid sha256:623a200959304ecbb386c654218eaa93a831a8e6a857516016aa982e948cec61
+size 3384
diff --git a/media/buttons/krita.png b/media/buttons/krita.png
index 7722cad..9bfec67 100644
--- a/media/buttons/krita.png
+++ b/media/buttons/krita.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ff85766c343619cbe1ad612b8d4168a1f0a13d4c3b8516465677e44e202a7ad5
-size 11487
+oid sha256:9e85a8789fb67183eb433dcfc330e7246445eae672fadae60c09a7ec65347c79
+size 10572
diff --git a/media/buttons/lifning.png b/media/buttons/lifning.png
index 807b50e..202a64b 100644
--- a/media/buttons/lifning.png
+++ b/media/buttons/lifning.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4260ff94fd4a16073c76b1d76ef041de85802f166872d24e4d8c723555a9b951
-size 1528
+oid sha256:eb9f3925417fa2bb5842a2c0ef6c4ccffd13b83d52e67a0fdc9273fc05681583
+size 1461
diff --git a/media/buttons/mathie.png b/media/buttons/mathie.png
index 5e5f6a1..5ed6859 100644
--- a/media/buttons/mathie.png
+++ b/media/buttons/mathie.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c3a76a9d2333fa62c75da7444c0c14218a1f58a2689efa0b2d2676c7ecf6b4ee
-size 10046
+oid sha256:d595aa620181a8889f0440c9ac478d8c2748484757dbd0f032ac19e827faa8e7
+size 8398
diff --git a/media/buttons/odoben.png b/media/buttons/odoben.png
index 5cc1928..d4fd6f1 100644
--- a/media/buttons/odoben.png
+++ b/media/buttons/odoben.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:200c2ced55ce39d5d395fdec14053938fc61c1a8679d18298a699a1c9538e3f5
-size 1209
+oid sha256:08c5a7e4f886a8cbfcc03d465dd13e430389048fadb595617d31961c4187fed1
+size 834
diff --git a/media/buttons/pearshapes.png b/media/buttons/pearshapes.png
index 5e74369..cc5da6c 100644
--- a/media/buttons/pearshapes.png
+++ b/media/buttons/pearshapes.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:28c5ab5c813fd5efefb9a99d0050bbfc3e97371209c275560a0003275544b594
-size 2238
+oid sha256:933efb765ae07794cbc0f4dab6ce7e9486521e5169694378e337ae01ab900ce1
+size 1449
diff --git a/media/buttons/pebble_still.png b/media/buttons/pebble_still.png
index 6ea5316..06b38e5 100644
--- a/media/buttons/pebble_still.png
+++ b/media/buttons/pebble_still.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a1043ef03bb4a2964caa264838dc223e994ff4bbc4dc94a4d49345a2f9d16838
-size 10205
+oid sha256:ea4b6665e433414c2ceac1654f7bae8e8d56b75cfcbe564f1007997ff8288890
+size 9290
diff --git a/media/buttons/therra.png b/media/buttons/therra.png
index a7d19aa..59402f8 100644
--- a/media/buttons/therra.png
+++ b/media/buttons/therra.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6f4471f97ace4b2365e6cfc02cafde7e666d31a8fbcf049441bfc008e4f8ac07
-size 882
+oid sha256:61ab373ba4f1ebf812b03ae6325f79e81d8de535c6c05ca49e2f525f8ec2e7cc
+size 764
diff --git a/media/buttons/tsunderdog_still.png b/media/buttons/tsunderdog_still.png
index 3aec498..73b60ae 100644
--- a/media/buttons/tsunderdog_still.png
+++ b/media/buttons/tsunderdog_still.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:68d90d0158eb34389572e7463864d1cee3e552ea637a368bf19bfc0829ed9660
-size 1617
+oid sha256:82baf8df5618b64bf9f5dcd816752fd965fd1ea2bfd4e401989608df2c66887a
+size 1596
diff --git a/media/favicon.png b/media/favicon.png
deleted file mode 100644
index 7d7bb0e..0000000
--- a/media/favicon.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7260d9f688d6078835cf2e34a9bb81fd98e0d5e3132c153cc36af001b7160d36
-size 9255
diff --git a/media/favicon.webp b/media/favicon.webp
new file mode 100644
index 0000000..4276ec4
--- /dev/null
+++ b/media/favicon.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:938ffd30aa2e5d0f45b0595564a124b285bf77273a20cd37cb31424fb2d5dedf
+size 9570
diff --git a/media/flags/gf.png b/media/flags/gf.png
deleted file mode 100644
index 42bee74..0000000
--- a/media/flags/gf.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c7430ca435d6c5f18b3df6f0a7870213094bdae043b91a8988f7b0052fbf5801
-size 217
diff --git a/media/flags/gf.svg b/media/flags/gf.svg
new file mode 100644
index 0000000..2223f55
--- /dev/null
+++ b/media/flags/gf.svg
@@ -0,0 +1,7 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
+<rect width='200' height='24' fill='#ff74a2'/>
+<rect width='200' height='24' y='24' fill='#fcfcfc'/>
+<rect width='200' height='24' y='48' fill='#bd17d5'/>
+<rect width='200' height='24' y='72' fill='#2b2b2b'/>
+<rect width='200' height='24' y='96' fill='#333ebc'/>
+</svg>
diff --git a/media/flags/nb.png b/media/flags/nb.png
deleted file mode 100644
index 4834d3f..0000000
--- a/media/flags/nb.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:6649f239a69d76063ded165607b9de3af39ef0ab0fa7fd29c812cf689107ca82
-size 546
diff --git a/media/flags/nb.svg b/media/flags/nb.svg
new file mode 100644
index 0000000..5c09c11
--- /dev/null
+++ b/media/flags/nb.svg
@@ -0,0 +1,6 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
+<rect width='200' height='30' fill='#fcf434'/>
+<rect width='200' height='30' y='30' fill='#fcfcfc'/>
+<rect width='200' height='30' y='60' fill='#9b5bd3'/>
+<rect width='200' height='30' y='90' fill='#2b2b2b'/>
+</svg>
diff --git a/media/flags/pan.png b/media/flags/pan.png
deleted file mode 100644
index b522658..0000000
--- a/media/flags/pan.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:60feca8a42802d659fb7fb81e287d80b94ae82ea77c1c006afd4553cb85f06f2
-size 538
diff --git a/media/flags/pan.svg b/media/flags/pan.svg
new file mode 100644
index 0000000..c3d9dfb
--- /dev/null
+++ b/media/flags/pan.svg
@@ -0,0 +1,5 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
+<rect width='200' height='40' fill='#ff208b'/>
+<rect width='200' height='40' y='40' fill='#ffd700'/>
+<rect width='200' height='40' y='80' fill='#20b0ff'/>
+</svg>
diff --git a/media/flags/polyam.png b/media/flags/polyam.png
deleted file mode 100644
index 2100de1..0000000
--- a/media/flags/polyam.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:b1baf4daaee8ce2dd71c5a2ea62ee7c1ef62366e8313fd89db89ba590c72726e
-size 1988
diff --git a/media/flags/polyam.svg b/media/flags/polyam.svg
new file mode 100644
index 0000000..47509b0
--- /dev/null
+++ b/media/flags/polyam.svg
@@ -0,0 +1,11 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
+<rect width='200' height='43' fill='#36e'/>
+<rect width='200' height='34' y='43' fill='#e34'/>
+<rect width='200' height='43' y='77' fill='#123'/>
+<path stroke='#fe7' stroke-width='5' fill='none' d='
+  M126,64 l-26,26 -26,-26
+  c-26,-26 0,-56 26,-22  26,-34 52,-4 26,22 z
+  M55,60
+  c0,-20 20,-28 45,0     25,28 45,20 45,0
+   0,-20 -20,-28 -45,0  -25,28 -45,20 -45,0 z' />
+</svg>
diff --git a/media/flags/quoi.png b/media/flags/quoi.png
deleted file mode 100644
index c9746d3..0000000
--- a/media/flags/quoi.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:5582b09a338e6d2a7f36d219dea37f70cf54aa420a9bb068efe4cf1cc6d080e2
-size 698
diff --git a/media/flags/quoi.svg b/media/flags/quoi.svg
new file mode 100644
index 0000000..ed22b4b
--- /dev/null
+++ b/media/flags/quoi.svg
@@ -0,0 +1,6 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
+<rect width='200' height='30' fill='#2b2b2b'/>
+<rect width='200' height='30' y='30' fill='#8bd655'/>
+<rect width='200' height='30' y='60' fill='#69d0d5'/>
+<rect width='200' height='30' y='90' fill='#d1d1d1'/>
+</svg>
diff --git a/media/icons/artfight.png b/media/icons/artfight.png
deleted file mode 100644
index c05d57b..0000000
--- a/media/icons/artfight.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a5f72bedc083faa7e813f49ca8f80111b314e53006a41af33b3958b1e0f0d638
-size 5895
diff --git a/media/icons/artfight.webp b/media/icons/artfight.webp
new file mode 100644
index 0000000..418bb7c
--- /dev/null
+++ b/media/icons/artfight.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3f54d4e538b82761a1f07e503697458af5a0aa54ff8f096fed06142ec9e05295
+size 4598
diff --git a/media/icons/blog.png b/media/icons/blog.png
deleted file mode 100644
index 8dd1aa4..0000000
--- a/media/icons/blog.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:b4c6460ee6f24e74ed5c06711febf9a37f474ce39e73d350c640d7be3cd44e99
-size 20559
diff --git a/media/icons/blog.webp b/media/icons/blog.webp
new file mode 100644
index 0000000..1623ae1
--- /dev/null
+++ b/media/icons/blog.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f94b964adb87c4df28044725f04434b8f12ad53d08c31404b2dc2ad17a92e531
+size 19026
diff --git a/media/icons/chitter.png b/media/icons/chitter.png
deleted file mode 100644
index 9f68bdd..0000000
--- a/media/icons/chitter.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:874101ff84af4056abc9937cbc286f00e8175e0224fbc8afe72b77788fa6954a
-size 2102
diff --git a/media/icons/chitter.webp b/media/icons/chitter.webp
new file mode 100644
index 0000000..efd4144
--- /dev/null
+++ b/media/icons/chitter.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0a87bd29b0911741a02f66eed5844170f6c124250dfc5af5cbe00abada231012
+size 1510
diff --git a/media/icons/deviantart.png b/media/icons/deviantart.png
deleted file mode 100644
index da44cfe..0000000
--- a/media/icons/deviantart.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:e50ff52e9e2cf8dda4c194a15938d04956946e0a49e37041a37b6dd736c7478e
-size 9720
diff --git a/media/icons/deviantart.webp b/media/icons/deviantart.webp
new file mode 100644
index 0000000..d00ac7b
--- /dev/null
+++ b/media/icons/deviantart.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0c61b0036f96cecd0cfe5dd2d3efd42016498074436499f173bf1bc8234f9587
+size 9672
diff --git a/media/icons/furaffinity.png b/media/icons/furaffinity.png
deleted file mode 100644
index f62d5f3..0000000
--- a/media/icons/furaffinity.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a31f4b2688f6f73558ddea3eebc7e74368273489349682e9c3db6311eec7647d
-size 30297
diff --git a/media/icons/furaffinity.webp b/media/icons/furaffinity.webp
new file mode 100644
index 0000000..9b57358
--- /dev/null
+++ b/media/icons/furaffinity.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:17dce2b0d41345a495dfd71194c8a5277d2a1efb262c597c872701bfb3e413ee
+size 20610
diff --git a/media/kesi-neon.l.webp b/media/kesi-neon.l.webp
new file mode 100644
index 0000000..867f9a5
--- /dev/null
+++ b/media/kesi-neon.l.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8e8394f47f0c80c09cd0ea1dd2e7ec5fa3459d5a6fcaffa023eddf5195bda7bc
+size 41436
diff --git a/media/kesi-neon.png b/media/kesi-neon.png
deleted file mode 100644
index 1779bf4..0000000
--- a/media/kesi-neon.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:90f3a404811c3d284ce4f62db9f5d0933b88bd044d99de43d6630a816dbb22ba
-size 115088
diff --git a/media/kesi-neon.webp b/media/kesi-neon.webp
index 867f9a5..6dac866 100644
--- a/media/kesi-neon.webp
+++ b/media/kesi-neon.webp
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8e8394f47f0c80c09cd0ea1dd2e7ec5fa3459d5a6fcaffa023eddf5195bda7bc
-size 41436
+oid sha256:0d53e6cb09912dd27a68323f059b57ce2688dda12bb5c1a4049c56ce2fe11a58
+size 107648
diff --git a/media/kesi.png b/media/kesi.png
deleted file mode 100644
index 7167395..0000000
--- a/media/kesi.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d7b2ad77a5d6605686777ccf7b6975b288f0cf85ca023abbbbc988ac78587096
-size 27879
diff --git a/media/kesi.webp b/media/kesi.webp
new file mode 100644
index 0000000..44de023
--- /dev/null
+++ b/media/kesi.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e93cef0b9f29a488407bf8a9e88524bc13c26aa15c3c45f64ef02613aaf09f15
+size 25320
diff --git a/media/opengraph.png b/media/opengraph.png
deleted file mode 100644
index df112f3..0000000
--- a/media/opengraph.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:73c900e6dd23eca9a0a43770b1d94e639a424d72fbe7f538d1fb467bae0cf602
-size 221758
diff --git a/media/opengraph.webp b/media/opengraph.webp
new file mode 100644
index 0000000..0f2b5ad
--- /dev/null
+++ b/media/opengraph.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dc7103e9dc04652b0eae84c9b1e2a0cc5ef85f5e7a8dd6129d71ccd481a31825
+size 162456
diff --git a/media/quobl-neon.l.webp b/media/quobl-neon.l.webp
new file mode 100644
index 0000000..6f505d0
--- /dev/null
+++ b/media/quobl-neon.l.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f02c97b50d7d6eaba9edf29624d5a9556158bf918397d71e5f589ded8945e4f5
+size 39692
diff --git a/media/quobl-neon.png b/media/quobl-neon.png
deleted file mode 100644
index 1ecde1a..0000000
--- a/media/quobl-neon.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:988eaf8621e39f86f99350c44af3c591622be47d297ec63669a4205abe6c0d5b
-size 106171
diff --git a/media/quobl-neon.webp b/media/quobl-neon.webp
index 6f505d0..ec47096 100644
--- a/media/quobl-neon.webp
+++ b/media/quobl-neon.webp
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f02c97b50d7d6eaba9edf29624d5a9556158bf918397d71e5f589ded8945e4f5
-size 39692
+oid sha256:837ab21fc819a1068664e67e2b7be0008362bdd39463fa5be33913da9d557c0e
+size 84088
diff --git a/media/quobl.l.webp b/media/quobl.l.webp
new file mode 100644
index 0000000..f56e73a
--- /dev/null
+++ b/media/quobl.l.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ddd009dcb0dc26fc40150162fe78214994b2d323773912d9e23aa3981edc0f7e
+size 33652
diff --git a/media/quobl.png b/media/quobl.png
deleted file mode 100644
index 57aa46a..0000000
--- a/media/quobl.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:610fe136ea865b9842a799a41f62c96b70651aa44a1ec018c981eafb551d85fb
-size 118116
diff --git a/media/quobl.webp b/media/quobl.webp
index f56e73a..9f8e5a3 100644
--- a/media/quobl.webp
+++ b/media/quobl.webp
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ddd009dcb0dc26fc40150162fe78214994b2d323773912d9e23aa3981edc0f7e
-size 33652
+oid sha256:db6cc3ed7c32f3d4df7542974d40285c1fb1bd9b027c9de6f5dca9c9f8e8bf9a
+size 95946
diff --git a/media/quoxtrans.png b/media/quoxtrans.png
deleted file mode 100644
index 5537c8f..0000000
--- a/media/quoxtrans.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:45d76c6e3fc913bf7f81768b0cad8b4ce9a9f0e465e1dd24bad09c4ddfe400c2
-size 1006
diff --git a/media/quoxtrans.webp b/media/quoxtrans.webp
new file mode 100644
index 0000000..0bb81b5
--- /dev/null
+++ b/media/quoxtrans.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dffbf891933e33df3b0813aa55bcdbef10878c7b10d66420fb7ee2f1b329ffc5
+size 1052
diff --git a/media/twittercard.png b/media/twittercard.png
deleted file mode 100644
index 4cacfbf..0000000
--- a/media/twittercard.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:564d3b962f555cc2ce7fd71450de4a6396762e39d9d9135bec4e11fea0e2c08c
-size 393384
diff --git a/media/twittercard.webp b/media/twittercard.webp
new file mode 100644
index 0000000..b277735
--- /dev/null
+++ b/media/twittercard.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:51193e15b14bc01568a0dd2631254ab8fb10df0a7970fa08f683e2b5a9f5e716
+size 273508
diff --git a/media/wave-neon.l.webp b/media/wave-neon.l.webp
new file mode 100644
index 0000000..ed5bb85
--- /dev/null
+++ b/media/wave-neon.l.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f867a079528aab9c9118ab0224da2f36c7249bc0ee9a99a4230062ed7ef21f11
+size 61688
diff --git a/media/wave-neon.png b/media/wave-neon.png
deleted file mode 100644
index 20a5b38..0000000
--- a/media/wave-neon.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:cb91312b00bb1fbeaa863b2bdf265569a9de69f437eccd870c178ae5e5b93940
-size 158747
diff --git a/media/wave-neon.webp b/media/wave-neon.webp
index ed5bb85..f7dab12 100644
--- a/media/wave-neon.webp
+++ b/media/wave-neon.webp
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f867a079528aab9c9118ab0224da2f36c7249bc0ee9a99a4230062ed7ef21f11
-size 61688
+oid sha256:310f619317cfabcaf95c51dde94ad2ef8007ca45bae1a8ec1a313ffe46d12a4c
+size 136684
diff --git a/media/wave.l.webp b/media/wave.l.webp
new file mode 100644
index 0000000..82c6971
--- /dev/null
+++ b/media/wave.l.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7157b92b00e0b3a0dd3cae328b811357a9dca43bbd6b2cef1ef1f205e86308ab
+size 77004
diff --git a/media/wave.png b/media/wave.png
deleted file mode 100644
index 42e39cb..0000000
--- a/media/wave.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:edca327036d21bed916e4bf7e4fc0908aa67b5d4321606854e151b57d32b2e2c
-size 278883
diff --git a/media/wave.webp b/media/wave.webp
index 82c6971..216a3f9 100644
--- a/media/wave.webp
+++ b/media/wave.webp
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7157b92b00e0b3a0dd3cae328b811357a9dca43bbd6b2cef1ef1f205e86308ab
-size 77004
+oid sha256:9b3789a122911eb7a5e761f8fe70c30ba7a1f8d7ab4cc6618d3382bb3b37cdaf
+size 225770
diff --git a/rainbow-quox/back.svg b/rainbow-quox/back.svg
new file mode 100644
index 0000000..d609303
--- /dev/null
+++ b/rainbow-quox/back.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="65" height="65" viewBox="-5 -2.5 65 65"
+     stroke="#123" stroke-width="2">
+  <title>go back</title>
+  <desc>back to the cube.</desc>
+
+  <defs>
+    <linearGradient id="g-arrow-mask">
+      <stop offset="65%" stop-color="white" />
+      <stop offset="90%" stop-color="black" />
+    </linearGradient>
+    <linearGradient id="g-arrow">
+      <stop offset="25%" stop-color="hsl(60 90% 95%)" />
+      <stop offset="75%" stop-color="hsl(60 80% 90%)" />
+    </linearGradient>
+    <linearGradient id="g-hello" x1="25%" y1="25%" x2="75%" y2="75%">
+      <stop offset="0%" stop-color="hsl(310 86% 92%)" />
+      <stop offset="100%" stop-color="hsl(310 90% 80%)" />
+    </linearGradient>
+    <linearGradient id="g-id" x1="0" y1="0" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="hsl(10 87% 92%)" />
+      <stop offset="100%" stop-color="hsl(10 87% 86%)" />
+    </linearGradient>
+    <linearGradient id="g-friends" x1="25%" y1="0" x2="75%" y2="100%">
+      <stop offset="0%" stop-color="hsl(190 87% 92%)" />
+      <stop offset="100%" stop-color="hsl(190 77% 78%)" />
+    </linearGradient>
+
+    <mask id="arrow-mask">
+      <rect height="100%" width="100%" stroke="none" fill="url(#g-arrow-mask)" />
+    </mask>
+  </defs>
+
+  <path id="arrow" fill="url(#g-arrow)" mask="url(#arrow-mask)"
+    d="M30,5 l-30,25 30,25 7.07,-7.07 -17.93,-12.93 40,0 0,-10 -40,0 17.93,-12.93 z" />
+    <!-- (7.07 ≈ 10/√2)-->
+
+  <g id="cube" transform="translate(47 5)">
+    <g stroke="none">
+      <!-- top -->
+      <path id="hello" fill="url(#g-hello)" d="M0,0 l-12,5 l12,5 l12,-5 z" />
+      <!-- left -->
+      <path id="id" fill="url(#g-id)" d="M-12,5 v15 l12,5 v-15 z" />
+      <!-- right -->
+      <path id="friends" fill="url(#g-friends)" d="M12,5 v15 l-12,5 v-15 z" />
+    </g>
+
+    <!-- outline -->
+    <path id="cube-outline" fill="none"
+          d="M0,0 l-12,5 v15 l12,5 12,-5 v-15 z
+             m-12,5 l12,5 12,-5 m-12,5 v15" />
+  </g>
+</svg>
diff --git a/rainbow-quox/back/belly1.png b/rainbow-quox/back/belly1.png
deleted file mode 100644
index 8baa6ee..0000000
--- a/rainbow-quox/back/belly1.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:936b3d8ff41e8b56747c9e8fbeb461a8daa9837e8fcc17aadbbfa902dc0c7de5
-size 31823
diff --git a/rainbow-quox/back/belly1.webp b/rainbow-quox/back/belly1.webp
new file mode 100644
index 0000000..b180728
--- /dev/null
+++ b/rainbow-quox/back/belly1.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:17435ce4ea276f54be6e355a86a9cdafcaa0f740e79bf7cd23fe2a054bf2942f
+size 10186
diff --git a/rainbow-quox/back/belly2.png b/rainbow-quox/back/belly2.png
deleted file mode 100644
index c0cc1df..0000000
--- a/rainbow-quox/back/belly2.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:95546e967c48402d64da50c2eb5e4cbee109e2d132f11e6e73f18be8efd609ae
-size 26262
diff --git a/rainbow-quox/back/belly2.webp b/rainbow-quox/back/belly2.webp
new file mode 100644
index 0000000..963ee27
--- /dev/null
+++ b/rainbow-quox/back/belly2.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5e4583e2e8da22d32dd9ef8504cb3f1a9b98506c4ec93072f1405857eb28080c
+size 11180
diff --git a/rainbow-quox/back/claws.png b/rainbow-quox/back/claws.png
deleted file mode 100644
index 8f0480c..0000000
--- a/rainbow-quox/back/claws.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:37767fc980789fffd668903c8f90648076fe1860471455094619d2a197adbe8b
-size 15219
diff --git a/rainbow-quox/back/claws.webp b/rainbow-quox/back/claws.webp
new file mode 100644
index 0000000..68290cc
--- /dev/null
+++ b/rainbow-quox/back/claws.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3bf7aae31eb9508d901047727e485f9cb0ec570b02a7503d7fd55ec35ee2144d
+size 5866
diff --git a/rainbow-quox/back/cuffs.png b/rainbow-quox/back/cuffs.png
deleted file mode 100644
index c2c2e41..0000000
--- a/rainbow-quox/back/cuffs.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f00fe3d6df5686c7087effd62a18810d2cdb9e948a5679f3915414e11224954a
-size 18248
diff --git a/rainbow-quox/back/cuffs.webp b/rainbow-quox/back/cuffs.webp
new file mode 100644
index 0000000..17b507f
--- /dev/null
+++ b/rainbow-quox/back/cuffs.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ea07cae1405ff4d18c18b75190dee86667e898a2d43059402b8fec5cd4162453
+size 7216
diff --git a/rainbow-quox/back/eyes.png b/rainbow-quox/back/eyes.png
deleted file mode 100644
index f36026a..0000000
--- a/rainbow-quox/back/eyes.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:270e569cd19f8c4aa5ab6cffd613eb50a68b66d8ab83a895a5094dce339ad724
-size 2494
diff --git a/rainbow-quox/back/eyes.webp b/rainbow-quox/back/eyes.webp
new file mode 100644
index 0000000..fa1916d
--- /dev/null
+++ b/rainbow-quox/back/eyes.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eebdbf997f1fe6bbcb95b07904631197a4a8f9da4901dc52f7b3a4281dd966f2
+size 1834
diff --git a/rainbow-quox/back/eyeshine.webp b/rainbow-quox/back/eyeshine.webp
new file mode 100644
index 0000000..fa1916d
--- /dev/null
+++ b/rainbow-quox/back/eyeshine.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eebdbf997f1fe6bbcb95b07904631197a4a8f9da4901dc52f7b3a4281dd966f2
+size 1834
diff --git a/rainbow-quox/back/fins1.png b/rainbow-quox/back/fins1.png
deleted file mode 100644
index 5012332..0000000
--- a/rainbow-quox/back/fins1.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:5927463cd24394137adb4c21eeffda315e4b85bbd427edfee625dc28db74d1b6
-size 19271
diff --git a/rainbow-quox/back/fins1.webp b/rainbow-quox/back/fins1.webp
new file mode 100644
index 0000000..051760d
--- /dev/null
+++ b/rainbow-quox/back/fins1.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c43e64361cf12fd1368d47a5b2e60d4ab75b471bbedc0bd2e82c01838d09a1fa
+size 8934
diff --git a/rainbow-quox/back/fins2.png b/rainbow-quox/back/fins2.png
deleted file mode 100644
index 5dc5ed9..0000000
--- a/rainbow-quox/back/fins2.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:04da31fc3479fa6aa416bf3d26692241cdc3589a487a308304e120604233620d
-size 22619
diff --git a/rainbow-quox/back/fins2.webp b/rainbow-quox/back/fins2.webp
new file mode 100644
index 0000000..edfaa31
--- /dev/null
+++ b/rainbow-quox/back/fins2.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1a3b502e3edc6422fc80ace73b2c10f1a863005ef85f7120de32c264952fbb9b
+size 9604
diff --git a/rainbow-quox/back/fins3.png b/rainbow-quox/back/fins3.png
deleted file mode 100644
index dfb8a92..0000000
--- a/rainbow-quox/back/fins3.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:4e32d31df3b0eaee39b976ee06bab91b7d345a43d247b9539c4780bd15153c88
-size 7710
diff --git a/rainbow-quox/back/fins3.webp b/rainbow-quox/back/fins3.webp
new file mode 100644
index 0000000..50ec1c2
--- /dev/null
+++ b/rainbow-quox/back/fins3.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2378beb39791d7e76ecdc20161d5f399c0e26f8e803e4ce0b1d86bb89f330dac
+size 3336
diff --git a/rainbow-quox/back/lines.png b/rainbow-quox/back/lines.png
deleted file mode 100644
index 11d32c7..0000000
--- a/rainbow-quox/back/lines.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:dccafcdf3bedcf53a3b4d02296b0a32a8d4129ccc8f900ee03ec48a69b412100
-size 175067
diff --git a/rainbow-quox/back/lines.webp b/rainbow-quox/back/lines.webp
new file mode 100644
index 0000000..94e6417
--- /dev/null
+++ b/rainbow-quox/back/lines.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9cb5de6589abac930b8c7d524a60ce0f90f2a544455aacc83faa1b75d491c34d
+size 75832
diff --git a/rainbow-quox/back/masks.png b/rainbow-quox/back/masks.png
deleted file mode 100644
index a6c2634..0000000
--- a/rainbow-quox/back/masks.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:65ef56f98c07512cb61a49dddb878d05745395e0ef3b70a5e2059cadb11dfbcd
-size 11064
diff --git a/rainbow-quox/back/masks.webp b/rainbow-quox/back/masks.webp
new file mode 100644
index 0000000..43f85cd
--- /dev/null
+++ b/rainbow-quox/back/masks.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0e38d13e93dee8edf287443e107321cdbcd460535ed35708ea770cd9f8b82b7a
+size 5054
diff --git a/rainbow-quox/back/outer.png b/rainbow-quox/back/outer.png
deleted file mode 100644
index 32050e7..0000000
--- a/rainbow-quox/back/outer.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:5f14f71598703bb5cbb8c681c130e1530035c8d880c37c785a031a020efd6f25
-size 53674
diff --git a/rainbow-quox/back/outer.webp b/rainbow-quox/back/outer.webp
new file mode 100644
index 0000000..1f494df
--- /dev/null
+++ b/rainbow-quox/back/outer.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4cebc512183191a771b4897727666df3a3ecf74fa473fe250df969870457ca92
+size 16254
diff --git a/rainbow-quox/back/pos.json b/rainbow-quox/back/pos.json
new file mode 100644
index 0000000..b94a365
--- /dev/null
+++ b/rainbow-quox/back/pos.json
@@ -0,0 +1,22 @@
+{
+  "stroke":    [ 0, 0 ],
+  "belly1":    [ 59, 87 ],
+  "belly2":    [ 112, 115 ],
+  "claws":     [ 211, 354 ],
+  "cuffs":     [ 241, 235 ],
+  "eyes":      [ 705, 62 ],
+  "eyeshine":  [ 705, 62 ],
+  "fins1":     [ 247, 80 ],
+  "fins2":     [ 246, 81 ],
+  "fins3":     [ 249, 215 ],
+  "lines":     [ 20, 20 ],
+  "masks":     [ 663, 21 ],
+  "outer":     [ 22, 42 ],
+  "spines":    [ 357, 70 ],
+  "static":    [ 239, 61 ],
+  "stripes":   [ 239, 241 ],
+  "vitiligo1": [ 24, 42 ],
+  "vitiligo2": [ 122, 154 ],
+  "vitiligo3": [ 66, 149 ],
+  "vitiligo4": [ 241, 76 ]
+}
diff --git a/rainbow-quox/back/spines.png b/rainbow-quox/back/spines.png
deleted file mode 100644
index 52d0ca6..0000000
--- a/rainbow-quox/back/spines.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d74050957003e3899004c8feb2e42238711c8f0a36b7d02d71d5da8ce0d31dd4
-size 14773
diff --git a/rainbow-quox/back/spines.webp b/rainbow-quox/back/spines.webp
new file mode 100644
index 0000000..f1fc5b6
--- /dev/null
+++ b/rainbow-quox/back/spines.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3e2928c46e0a82b93f6f4404116ade0f62cc1252f1f8a2c787d348ca265692f2
+size 7770
diff --git a/rainbow-quox/back/static.png b/rainbow-quox/back/static.png
deleted file mode 100644
index fc4d743..0000000
--- a/rainbow-quox/back/static.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:fcd0a1acdee002be0d27a9f63324dd67726d3d1e1b928984eee8a5218201e4de
-size 30714
diff --git a/rainbow-quox/back/static.webp b/rainbow-quox/back/static.webp
new file mode 100644
index 0000000..b871a39
--- /dev/null
+++ b/rainbow-quox/back/static.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3574730db19b5c7543c486263b1c6ff4ffde294ea6486fc3a32981300ba9741b
+size 14654
diff --git a/rainbow-quox/back/stripes.png b/rainbow-quox/back/stripes.png
deleted file mode 100644
index e69e71c..0000000
--- a/rainbow-quox/back/stripes.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:0854a36214a060929bcce3da6fa5c72d44421ea60f85ffc39ba0e99f02eea466
-size 34634
diff --git a/rainbow-quox/back/stripes.webp b/rainbow-quox/back/stripes.webp
new file mode 100644
index 0000000..a9158eb
--- /dev/null
+++ b/rainbow-quox/back/stripes.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ff825e8616b2385276f2bd0091b12372770f764d54de2d3f8ea5efd4afe887c2
+size 15888
diff --git a/rainbow-quox/back/stroke.webp b/rainbow-quox/back/stroke.webp
new file mode 100644
index 0000000..7f70837
--- /dev/null
+++ b/rainbow-quox/back/stroke.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5c3ab4fecebdc2de65d5bde02fa3ba6b1a01ec067ba976eacbda581aae74a1f7
+size 16010
diff --git a/rainbow-quox/back/vitiligo1.png b/rainbow-quox/back/vitiligo1.png
deleted file mode 100644
index 6b90b62..0000000
--- a/rainbow-quox/back/vitiligo1.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:16080417ad3230a645c5bff273c3370f0db00cde84424fc13e90e27354c5a0f9
-size 33461
diff --git a/rainbow-quox/back/vitiligo1.webp b/rainbow-quox/back/vitiligo1.webp
new file mode 100644
index 0000000..32bfed2
--- /dev/null
+++ b/rainbow-quox/back/vitiligo1.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5c037de4c156b9aebc2b221c7167c5ea7ffae49c1480a0f678275c08997dddc5
+size 14106
diff --git a/rainbow-quox/back/vitiligo2.png b/rainbow-quox/back/vitiligo2.png
deleted file mode 100644
index 6da0281..0000000
--- a/rainbow-quox/back/vitiligo2.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:3e0c30c5058ebe7febf9a0a1811801ee7f8bf2cab86343669cec22061d82ca08
-size 7283
diff --git a/rainbow-quox/back/vitiligo2.webp b/rainbow-quox/back/vitiligo2.webp
new file mode 100644
index 0000000..0899891
--- /dev/null
+++ b/rainbow-quox/back/vitiligo2.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:195c7aaf80305f17cbee871b59bf3f797628aafb09701567b22549ae68626f27
+size 2578
diff --git a/rainbow-quox/back/vitiligo3.png b/rainbow-quox/back/vitiligo3.png
deleted file mode 100644
index c67913c..0000000
--- a/rainbow-quox/back/vitiligo3.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a688d2fe7f603d2360ff027b20091a60cb710873204bdf0adfabec73a1f3be65
-size 7040
diff --git a/rainbow-quox/back/vitiligo3.webp b/rainbow-quox/back/vitiligo3.webp
new file mode 100644
index 0000000..a891ca5
--- /dev/null
+++ b/rainbow-quox/back/vitiligo3.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d299e372195d499b57c8f804d51ccba438f73c6aaa2342bec863e1ff0f0e1ea8
+size 1556
diff --git a/rainbow-quox/back/vitiligo4.png b/rainbow-quox/back/vitiligo4.png
deleted file mode 100644
index 3d34316..0000000
--- a/rainbow-quox/back/vitiligo4.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:1cf7bd357602ac2ffee7d2b364562ef5b29065e6090023c71fd6631762126771
-size 13109
diff --git a/rainbow-quox/back/vitiligo4.webp b/rainbow-quox/back/vitiligo4.webp
new file mode 100644
index 0000000..5ccc13d
--- /dev/null
+++ b/rainbow-quox/back/vitiligo4.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dabdb0e89303ef963a74f864301a9e501377fe2521e7856fcdc569a7ca53dc79
+size 5824
diff --git a/rainbow-quox/canvas.ts b/rainbow-quox/canvas.ts
deleted file mode 100644
index 8f989b6..0000000
--- a/rainbow-quox/canvas.ts
+++ /dev/null
@@ -1,304 +0,0 @@
-import * as Color from './color.js';
-
-export const WIDTH = 1000;
-export const HEIGHT = 673;
-
-
-export type Layer = 'static' | 'eyeshine' | Color.Layer;
-
-// in compositing order
-export const allLayers: Layer[] =
-  ['static', 'outer', 'spines', 'stripes', 'cuffs', 'fins1', 'fins2', 'fins3',
-   'belly1', 'belly2', 'masks', 'claws', 'vitiligo1', 'vitiligo2', 'vitiligo3',
-   'vitiligo4', 'eyes', 'eyeshine', 'lines'];
-
-export type Image = ImageData;
-export type Images = Record<Layer, Image>;
-
-export type ComposedImages = Images & {comp?: ImageData};
-
-export type Side = 'front' | 'back';
-
-export function flip(s: Side): Side {
-  return s == 'front' ? 'back' : 'front';
-}
-
-
-let buffer = new OffscreenCanvas(WIDTH, HEIGHT);
-let bufferCtx = buffer.getContext('2d')!;
-
-type Positions = Record<Layer, [number, number]>;
-
-const FRONT_POS: Positions = {
-  belly1:    [187, 105],
-  belly2:    [186, 91],
-  claws:     [3,   168],
-  cuffs:     [42,  160],
-  eyes:      [223, 52],
-  eyeshine:  [223, 52],
-  fins1:     [381, 31],
-  fins2:     [387, 35],
-  fins3:     [495, 140],
-  lines:     [1,   0],
-  masks:     [173, 3],
-  outer:     [28,  43],
-  spines:    [372, 23],
-  static:    [50,  52],
-  stripes:   [50,  168],
-  vitiligo1: [34,  23],
-  vitiligo2: [198, 92],
-  vitiligo3: [214, 312],
-  vitiligo4: [647, 71],
-};
-
-const BACK_POS: Positions = {
-  belly1:    [39,  67],
-  belly2:    [92,  95],
-  claws:     [191, 334],
-  cuffs:     [221, 215],
-  eyes:      [685, 42],
-  eyeshine:  [685, 42],
-  fins1:     [227, 60],
-  fins2:     [226, 61],
-  fins3:     [229, 195],
-  lines:     [0,   0],
-  masks:     [643, 1],
-  outer:     [2,   22],
-  spines:    [337, 50],
-  static:    [219, 41],
-  stripes:   [219, 221],
-  vitiligo1: [4,   22],
-  vitiligo2: [46,  48],
-  vitiligo3: [101, 134],
-  vitiligo4: [221, 56],
-};
-
-
-type Rgb = [number, number, number];
-type Rgbs = Record<Color.Layer, Rgb>;
-
-function toRgb(col: Color.Oklch): Rgb {
-  // :)
-  const prev = bufferCtx.getImageData(0, 0, 1, 1);
-
-  bufferCtx.save();
-  bufferCtx.fillStyle = Color.oklch(col);
-  bufferCtx.fillRect(0, 0, 1, 1);
-  bufferCtx.restore();
-
-  const rgb = bufferCtx.getImageData(0, 0, 1, 1).data;
-  bufferCtx.putImageData(prev, 0, 0);
-
-  return [rgb[0]!, rgb[1]!, rgb[2]!];
-}
-
-function toRgbs(col: Color.Colors): Rgbs {
-  return Color.makeColorInfo(l => toRgb(col[l]));
-}
-
-
-function setImageDataRgb([r, g, b]: Rgb, img: Image): void {
-  let data = img.data;
-  for (let i = 0; i < data.length; i += 4) {
-    data[i] = r; data[i+1] = g; data[i+2] = b;
-  }
-}
-
-
-async function wait(img: HTMLImageElement): Promise<HTMLImageElement> {
-  if (img.complete) {
-    return new Promise((r, _) => r(img));
-  } else {
-    return new Promise((r, _) => img.addEventListener('load', () => r(img)));
-  }
-}
-
-async function load(side: Side, layer: Layer): Promise<Image> {
-  if (layer == 'eyeshine') layer = 'eyes';
-  let img = new Image; img.src = `./${side}/${layer}.png`;
-  let bmp = await createImageBitmap(await wait(img));
-  bufferCtx.clearRect(0, 0, WIDTH, HEIGHT); // ?
-  bufferCtx.drawImage(bmp, 0, 0);
-  return bufferCtx.getImageData(0, 0, WIDTH, HEIGHT);
-}
-
-async function loadSide(side: Side): Promise<ComposedImages> {
-  const res: Partial<ComposedImages> = { };
-  for (const l of allLayers) { res[l] = await load(side, l); }
-  return res as ComposedImages;
-}
-
-function setColors(cols: Rgbs, layers: ComposedImages): void {
-  bufferCtx.save();
-
-  for (const l of allLayers) {
-    if (l == 'static' || l == 'eyeshine') continue;
-    setImageDataRgb(cols[l], layers[l]);
-  }
-
-  delete layers.comp;
-
-  bufferCtx.restore();
-}
-
-async function compose(layers: Images, pos: Positions): Promise<ImageData> {
-  bufferCtx.save();
-  bufferCtx.clearRect(0, 0, WIDTH, HEIGHT);
-
-  for (const l of allLayers) {
-    const [x, y] = pos[l];
-    bufferCtx.globalCompositeOperation =
-      l == 'eyeshine' ? 'luminosity' : 'source-over';
-    bufferCtx.drawImage(await createImageBitmap(layers[l]), x, y);
-  }
-
-  let res = bufferCtx.getImageData(0, 0, WIDTH, HEIGHT);
-  bufferCtx.restore();
-
-  return res;
-}
-
-
-async function redraw(ctx: CanvasRenderingContext2D,
-                      layers: ComposedImages, pos: Positions) {
-  let data = layers.comp ??= await compose(layers, pos);
-  ctx.putImageData(data, 0, 0);
-}
-
-
-async function loadingMessage(): Promise<ImageBitmap> {
-  bufferCtx.save();
-  bufferCtx.clearRect(0, 0, WIDTH, HEIGHT);
-  bufferCtx.font = 'bold 100px Muller, sans-serif';
-  bufferCtx.textAlign = 'center';
-  bufferCtx.fillText('loading layers…', WIDTH/2, HEIGHT/2);
-  let res = createImageBitmap(buffer);
-  bufferCtx.restore();
-  return await res;
-}
-
-
-let pic:  HTMLCanvasElement;
-let picCtx: CanvasRenderingContext2D;
-
-let pic2: HTMLCanvasElement;
-let pic2Ctx: CanvasRenderingContext2D;
-
-let fronts: Images;
-let backs:  Images;
-
-let side: Side = 'front';
-
-function startAnim(name: string) {
-  document.documentElement.dataset.running = name;
-}
-
-function isRunning(): boolean {
-  return !!document.documentElement.dataset.running;
-}
-
-function finishAnim() {
-  delete document.documentElement.dataset.running;
-}
-
-function layers(): Images { return side == 'front' ? fronts : backs; }
-function pos(): Positions { return side == 'front' ? FRONT_POS : BACK_POS; }
-
-
-async function recolorOn(ctx: CanvasRenderingContext2D) {
-  const cols = Color.colors();
-  const rgbs = toRgbs(cols);
-  setColors(rgbs, fronts);
-  setColors(rgbs, backs);
-  await redraw(ctx, layers(), pos());
-  return cols.outer.h;
-}
-
-function setBg(hue: number) {
-  document.documentElement.style.setProperty('--hue', `${hue}`);
-}
-
-
-async function animateReroll(_e: Event, done: () => void) {
-  const duration = 400;
-  const hue = await recolorOn(pic2Ctx);
-  pic2.style.animation = `${duration}ms ease fade-in`;
-  setBg(hue);
-  setTimeout(finish, duration);
-
-  async function finish() {
-    await redraw(picCtx, layers(), pos()).then(() => {
-      pic2.style.removeProperty('animation');
-      pic2.style.removeProperty('opacity');
-      done();
-    });
-  }
-}
-
-
-function animateSwap(_e: Event, done: () => void) {
-  const duration = 1000;
-  pic.style.animation = `${duration}ms ease swap`;
-  setTimeout(swapImage, duration/2);
-  setTimeout(finish, duration);
-
-  async function swapImage() {
-    side = flip(side);
-    await redraw(picCtx, layers(), pos());
-  }
-
-  function finish() {
-    pic.style.removeProperty('animation');
-    done();
-  }
-}
-
-document.addEventListener('DOMContentLoaded', async function() {
-  pic = document.getElementById('pic') as HTMLCanvasElement;
-  picCtx = pic.getContext('2d')!;
-
-  pic2 = document.getElementById('pic2') as HTMLCanvasElement;
-  pic2Ctx = pic2.getContext('2d')!;
-
-  picCtx.drawImage(await loadingMessage(), 0, 0);
-
-  fronts = await loadSide('front');
-  backs  = await loadSide('back');
-  side   = 'front';
-
-  let hue = await recolorOn(picCtx);
-  setBg(hue);
-  await redraw(picCtx, layers(), pos());
-
-  const reroll = document.getElementById('reroll')!;
-  const swap   = document.getElementById('swap')!;
-
-  addListeners();
-
-  function addListeners() {
-    reroll.addEventListener('click', handleReroll);
-    swap.addEventListener('click', handleSwap);
-  }
-
-  function removeListeners() {
-    reroll.removeEventListener('click', handleReroll);
-    swap.removeEventListener('click', handleSwap);
-  }
-
-  function handleReroll(e: Event) { wrap(reroll, animateReroll, 'reroll', e); }
-  function handleSwap(e: Event) { wrap(swap, animateSwap, 'swap', e); }
-
-  type HandlerWithFinish = (e: Event, finish: () => void) => void;
-
-  function wrap(elem: Element, f: HandlerWithFinish,
-                name: string, e: Event) {
-    if (elem != e.target) return;
-    e.stopPropagation();
-    if (isRunning()) return;
-    removeListeners();
-    startAnim(name);
-    f(e, () => { finishAnim(); addListeners(); });
-  }
-});
-
-export { load, loadSide };
diff --git a/rainbow-quox/close.svg b/rainbow-quox/close.svg
new file mode 100644
index 0000000..fd713a6
--- /dev/null
+++ b/rainbow-quox/close.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="25" height="25" viewBox="0 0 65 65">
+  <title>close</title>
+
+  <defs>
+    <linearGradient id="cross-gradient" y1="100%" y2="0%">
+      <stop offset="20%" stop-color="hsl(60 90% 95%)" />
+      <stop offset="100%" stop-color="hsl(60 80% 90%)" />
+    </linearGradient>
+  </defs>
+
+  <path fill="url(#cross-gradient)" transform='rotate(45 32.5 32.5)'
+    d="M 27.5,0 v 27.5 h -27.5 v 10 h 27.5 v 27.5 h 10
+       v -27.5 h 27.5 v -10 h -27.5 v -27.5 z" />
+</svg>
diff --git a/rainbow-quox/color.ts b/rainbow-quox/color.ts
deleted file mode 100644
index 337a33f..0000000
--- a/rainbow-quox/color.ts
+++ /dev/null
@@ -1,268 +0,0 @@
-const rand: () => number = Math.random; // [todo]
-
-const max = Math.max;
-const min = Math.min;
-
-export type Oklch = { l: number, c: number, h: number };
-
-export function oklch(col: Oklch, alpha: number = 1): string {
-  return `oklch(${col.l} ${col.c} ${col.h} / ${alpha})`;
-}
-
-type LD = 'light' | 'dark';
-
-const MAXL = 0.9;
-const MINL = 0.4;
-const MINL_LIGHT = 0.7;
-const MAXL_DARK = 0.65;
-
-const MINC_LIGHT = 0.08;
-const MAXC_LIGHT = 0.1;
-const MINC_DARK = 0.12;
-const MAXC_DARK = 0.175;
-
-// max spread for a sequence of analogous colors. unless that would put them
-// too close together
-const MAXH_WIDTH = 80;
-
-// minimum distance between adjacent analogous colors
-const MINH_SEP = 5;
-
-// size of the wedge a "complementary" color can be in
-const MAXH_COMPL = 40;
-
-// size of the wedge a "triadic" color can be in
-const MAXH_TRIAD = 25;
-
-function randBetween(x: number, y: number): number {
-  const lo = min(x, y), hi = max(x, y);
-  return lo + rand() * (hi - lo);
-}
-
-function oneOf<A>(...xs: A[]): A {
-  return xs[Math.floor(rand() * xs.length)]!;
-}
-
-
-function baseLuma(ld?: LD): number {
-  if (ld == 'light') {
-    return randBetween(MINL_LIGHT, MAXL);
-  } else if (ld == 'dark') {
-    return randBetween(MINL, MAXL_DARK);
-  } else {
-    return randBetween(MINL, MAXL);
-  }
-}
-
-function baseChroma(l: number): number {
-  if (l >= MINL_LIGHT) {
-    return randBetween(MINC_LIGHT, MAXC_LIGHT);
-  } else {
-    return randBetween(MINC_DARK, MAXC_DARK);
-  }
-}
-
-function baseHue(): number { return rand() * 360; }
-
-function baseOklch(ld?: LD): Oklch {
-  const l = baseLuma(ld);
-  return { l, c: baseChroma(l), h: baseHue() };
-}
-
-function lightFor(baseL: number): number {
-  return randBetween(baseL, MAXL);
-}
-function darkFor(baseL: number): number {
-  return randBetween(MINL, baseL);
-}
-
-function isLight(l: number): boolean { return l >= MINL_LIGHT; }
-
-function brightFor(l: number, baseC: number): number {
-  if (isLight(l)) { return randBetween(baseC, MAXC_LIGHT); }
-  else { return randBetween(baseC, MAXC_DARK); }
-}
-
-function dullFor(l: number, baseC: number): number {
-  if (isLight(l)) { return randBetween(baseC, MINC_LIGHT); }
-  else { return randBetween(baseC, MINC_DARK); }
-}
-
-
-function analogous1(baseH: number): number {
-  const size = randBetween(MINH_SEP, 2 * MINH_SEP);
-  return rand() > 0.5 ? baseH + size : baseH - size;
-}
-
-function analogous(baseH: number, count: number): number[] {
-  const minWidth = min(count * MINH_SEP, MAXH_WIDTH * 0.8);
-  const width = randBetween(minWidth, MAXH_WIDTH);
-  const sep = width / (count - 1);
-  const start = baseH - (width / 2);
-  const numbers = Array.from({length: count}, (_u, i) => start + i * sep);
-  return rand() > 0.5 ? numbers : numbers.reverse();
-}
-
-function complementary1(baseH: number): number {
-  return analogous1((baseH + 180) % 360);
-}
-
-function complementary(baseH: number, count: number): number[] {
-  const angle = randBetween(180 - MAXH_COMPL/2, 180 + MAXH_COMPL/2);
-  return analogous(baseH + angle, count);
-}
-
-function triad(baseH: number): [number, number] {
-  const angle = randBetween(120 - MAXH_TRIAD/2, 120 + MAXH_TRIAD/2);
-  return [baseH - angle, baseH + angle];
-}
-
-export type SchemeType = 'triad' | 'fin-belly' | 'fin-body';
-
-export type OuterLayer = 'outer' | 'spines' | 'vitiligo1';
-export type SockLayer  = 'stripes' | 'cuffs';
-export type FinLayer   = 'fins1' | 'fins2' | 'fins3' | 'vitiligo4';
-export type BellyLayer = 'belly1' | 'vitiligo3' | 'belly2' | 'vitiligo2';
-export type MiscLayer  = 'eyes' | 'masks' | 'claws' | 'lines';
-export type Layer      =
-  OuterLayer | SockLayer | FinLayer | BellyLayer | MiscLayer;
-
-export type ColsOf<A extends string> = Record<A, Oklch>;
-export type OuterCols = ColsOf<OuterLayer>;
-export type SockCols  = ColsOf<SockLayer>;
-export type FinCols   = ColsOf<FinLayer>;
-export type BellyCols = ColsOf<BellyLayer>;
-export type MiscCols  = ColsOf<MiscLayer>;
-export type Colors    = ColsOf<Layer>;
-
-export type Scheme = Colors & {type: SchemeType};
-
-export const allLayers: Layer[] =
-  ['outer', 'spines', 'stripes', 'cuffs', 'fins1', 'fins2', 'fins3',
-   'belly1', 'belly2', 'masks', 'claws', 'vitiligo1', 'vitiligo2', 'vitiligo3',
-   'vitiligo4', 'eyes', 'lines'];
-
-export function makeColorInfo<A>(f: (l: Layer) => A): Record<Layer, A> {
-  return Object.fromEntries(allLayers.map(l => [l, f(l)])) as Record<Layer, A>;
-}
-
-
-export function colors(): Scheme {
-  const outer = baseOklch('dark');
-  let outerCols: OuterCols =
-    { outer, spines: mkSpines(outer), vitiligo1: mkVitiligo(outer) };
-
-  const stripes = mkStripes();
-  let sockCols: SockCols = { stripes, cuffs: mkCuffs(stripes) };
-
-  let finCols: FinCols, bellyCols: BellyCols, type: SchemeType;
-  const whichBody = rand();
-  if (whichBody > 2/3) {
-    type = 'triad';
-    const [f, b] = triad(outer.h);
-    finCols = mkFins(f, outer); bellyCols = mkBelly(b);
-  } else if (whichBody > 1/3) {
-    type = 'fin-belly';
-    const [f, b] = complementary(outer.h, 2);
-    finCols = mkFins(f!, outer); bellyCols = mkBelly(b!);
-  } else {
-    type = 'fin-body';
-    finCols = mkFins(analogous1(outer.h), outer);
-    bellyCols = mkBelly(complementary1(outer.h));
-  }
-
-  let miscCols = mkMisc(outerCols, finCols, bellyCols);
-
-  return merge(outerCols, sockCols, finCols, bellyCols, miscCols, type);
-}
-
-
-function mkSpines(outer: Oklch): Oklch {
-  return {
-    l: outer.l * 0.8, c: outer.c * 1.1,
-    h: randBetween(outer.h + 12, outer.h - 12)
-  };
-}
-
-function mkVitiligo(outer: Oklch): Oklch {
-  return {
-    l: randBetween(max(outer.l, 0.94), 0.985), // exception to MAXL
-    c: randBetween(min(outer.c, 0.1), MINC_LIGHT),
-    h: outer.h
-  };
-}
-
-function mkStripes(): Oklch {
-  return {
-    l: randBetween(0.8, MAXL),
-    c: randBetween(MINC_LIGHT, MAXC_LIGHT),
-    h: rand() * 360
-  };
-}
-
-function mkCuffs(sock: Oklch): Oklch {
-  return {
-    l: randBetween(sock.l * 0.85, sock.l * 0.65),
-    c: randBetween(sock.c, MAXC_LIGHT),
-    h: randBetween(sock.h + 8, sock.h - 8)
-  };
-}
-
-function mkFins(h: number, outer: Oklch): FinCols {
-  const [fin1Hue, fin2Hue, fin3Hue] = analogous(h, 3);
-  const [ll, cc] = oneOf([lightFor, dullFor], [darkFor, brightFor]);
-  const fins1 = { l: ll(outer.l), c: cc(outer.l, outer.c), h: fin1Hue! };
-  const fins2 = { l: ll(fins1.l), c: cc(fins1.l, fins1.c), h: fin2Hue! };
-  const fins3 = { l: ll(fins2.l), c: cc(fins2.l, fins2.c), h: fin3Hue! };
-  const vitiligo4 = mkVitiligo(fins1);
-  return { fins1, fins2, fins3, vitiligo4 };
-}
-
-function mkBelly(h: number): BellyCols {
-  const [belly1Hue, belly2Hue] = analogous(h, 2);
-  const belly1 =
-    { l: randBetween(0.7, MAXL), c: baseChroma(1), h: belly1Hue! };
-  const belly2 =
-    { l: min(MAXL, belly1.l * 1.1), c: belly1.c * 0.9, h: belly2Hue! };
-  const vitiligo3 = mkVitiligo(belly1);
-  const vitiligo2 = mkVitiligo(belly2);
-  return { belly1, belly2, vitiligo2, vitiligo3 };
-}
-
-function mkMisc(o: OuterCols, f: FinCols, b: BellyCols): MiscCols {
-  const masks = {
-    l: randBetween(0.8, MAXL),
-    c: randBetween(0.01, 0.06),
-    h: analogous1(oneOf(o.outer, b.belly1, f.fins1).h)
-  };
-  return {
-    masks,
-    eyes: {
-      l: baseLuma('light'),
-      c: randBetween(0.28, MAXC_LIGHT),
-      h: oneOf(analogous1, complementary1)(o.outer.h)
-    },
-    claws: {
-      l: min(MAXL, masks.l + randBetween(0, 0.1)),
-      c: randBetween(0.01, 0.06),
-      h: analogous1(masks.h)
-    },
-    lines: {
-      l: randBetween(0.01, 0.06),
-      c: baseChroma(0),
-      h: analogous1(o.outer.h)
-    }
-  };
-}
-
-function merge({ outer, spines, vitiligo1 }: OuterCols,
-               { stripes, cuffs }: SockCols,
-               { fins1, fins2, fins3, vitiligo4 }: FinCols,
-               { belly1, vitiligo3, belly2, vitiligo2 }: BellyCols,
-               { eyes, masks, claws, lines }: MiscCols,
-               type: SchemeType): Scheme {
-  return {
-    outer, spines, vitiligo1, stripes, cuffs, fins1, fins2, fins3, vitiligo4,
-    belly1, vitiligo3, belly2, vitiligo2, eyes, masks, claws, lines, type
-  };
-}
diff --git a/rainbow-quox/download.svg b/rainbow-quox/download.svg
new file mode 100644
index 0000000..448feb6
--- /dev/null
+++ b/rainbow-quox/download.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="30" height="30" viewBox="0 0 100 100">
+
+  <defs>
+    <linearGradient id="fill" x2="0%" y2="100%">
+      <stop offset="20%" stop-color="hsl(60 90% 95%)" />
+      <stop offset="100%" stop-color="hsl(60 80% 90%)" />
+    </linearGradient>
+
+    <linearGradient id="fade" x2="0%" y1="100%">
+      <stop offset="70%" stop-color="white" />
+      <stop offset="100%" stop-color="black" />
+    </linearGradient>
+
+    <path id="path"
+          d="M 45,0 v 60 l -23.28,-23.28 -7.07,7.07 35.35,35.35
+             35.35,-35.35 -7.07,-7.07 -23.28,23.28 v -60 z
+             M 10,95 h 80 v -20 h -10 v 10 h -60 v -10 h -10 z" />
+
+    <mask id="mask"><rect width="100" height="100" fill="url(#fade)" /></mask>
+  </defs>
+
+  <use href="#path" stroke="#123" fill="url(#fill)" mask="url(#mask)" />
+</svg>
diff --git a/rainbow-quox/front/belly1.png b/rainbow-quox/front/belly1.png
deleted file mode 100644
index 778fc65..0000000
--- a/rainbow-quox/front/belly1.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:018fa612600c9819e2d5256e9a3f11d025cee9ee544e7a6e05f2c08cb0d01c64
-size 32398
diff --git a/rainbow-quox/front/belly1.webp b/rainbow-quox/front/belly1.webp
new file mode 100644
index 0000000..c04d004
--- /dev/null
+++ b/rainbow-quox/front/belly1.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e7a0574268f1913792486b092a12961b6e5b10fdb21a5e48be527dc1b63a785b
+size 9078
diff --git a/rainbow-quox/front/belly2.png b/rainbow-quox/front/belly2.png
deleted file mode 100644
index e4a8188..0000000
--- a/rainbow-quox/front/belly2.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:ec027a0197521656c8d4a6a49a31abb4847dbbf9de6e29cdbd9b329bb8c959ce
-size 33178
diff --git a/rainbow-quox/front/belly2.webp b/rainbow-quox/front/belly2.webp
new file mode 100644
index 0000000..f420bde
--- /dev/null
+++ b/rainbow-quox/front/belly2.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9b36476275d883bfe11a6287310166a9c6cbfcbd534f415c46dda598f7c26a16
+size 14686
diff --git a/rainbow-quox/front/claws.png b/rainbow-quox/front/claws.png
deleted file mode 100644
index dbb913d..0000000
--- a/rainbow-quox/front/claws.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:5ea380fb19422ab0b375b24839ecb70140cc7bb73035c9b3ffbb62d937b61497
-size 21353
diff --git a/rainbow-quox/front/claws.webp b/rainbow-quox/front/claws.webp
new file mode 100644
index 0000000..861ddbd
--- /dev/null
+++ b/rainbow-quox/front/claws.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9e220c631d24393db8328b2a5cadf1aed5102fec789dbfa3aab40b7bbc92794c
+size 8714
diff --git a/rainbow-quox/front/cuffs.png b/rainbow-quox/front/cuffs.png
deleted file mode 100644
index 1871a7b..0000000
--- a/rainbow-quox/front/cuffs.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7c8949d75a69041e6b5375e76901dcd9a023f7aafe9ca287fe63d558837dcc9a
-size 23718
diff --git a/rainbow-quox/front/cuffs.webp b/rainbow-quox/front/cuffs.webp
new file mode 100644
index 0000000..b8e849b
--- /dev/null
+++ b/rainbow-quox/front/cuffs.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d8f44bf4243d67aea2fc32b905b919afa00e8ecad227425e816b67269260ca61
+size 8304
diff --git a/rainbow-quox/front/eyes.png b/rainbow-quox/front/eyes.png
deleted file mode 100644
index 121d181..0000000
--- a/rainbow-quox/front/eyes.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:575412468db799eb7dad082cf2c3e5bc1d035da19c99ada2d6a1a4b6d18231e5
-size 2543
diff --git a/rainbow-quox/front/eyes.webp b/rainbow-quox/front/eyes.webp
new file mode 100644
index 0000000..db3c69c
--- /dev/null
+++ b/rainbow-quox/front/eyes.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c407db7a06688de206e8edfff49a6164c4a0ac62dab42c780befa80fb100e3f6
+size 1890
diff --git a/rainbow-quox/front/eyeshine.webp b/rainbow-quox/front/eyeshine.webp
new file mode 100644
index 0000000..db3c69c
--- /dev/null
+++ b/rainbow-quox/front/eyeshine.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c407db7a06688de206e8edfff49a6164c4a0ac62dab42c780befa80fb100e3f6
+size 1890
diff --git a/rainbow-quox/front/fins1.png b/rainbow-quox/front/fins1.png
deleted file mode 100644
index 427f23a..0000000
--- a/rainbow-quox/front/fins1.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f94136fa4f440cd0a7f437aa09ec10ad4a743234364434f3639d50c623fe6740
-size 13888
diff --git a/rainbow-quox/front/fins1.webp b/rainbow-quox/front/fins1.webp
new file mode 100644
index 0000000..967f769
--- /dev/null
+++ b/rainbow-quox/front/fins1.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b7259534ef0f8bc9857a89f11bffcbad8b65f6f54e17de4c43542278bf912847
+size 6438
diff --git a/rainbow-quox/front/fins2.png b/rainbow-quox/front/fins2.png
deleted file mode 100644
index b31282f..0000000
--- a/rainbow-quox/front/fins2.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d3b2b0d1fb34210e4306ed6d17282b8e88617114810108e0905dcb29857f8d19
-size 14569
diff --git a/rainbow-quox/front/fins2.webp b/rainbow-quox/front/fins2.webp
new file mode 100644
index 0000000..8c337fb
--- /dev/null
+++ b/rainbow-quox/front/fins2.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:142905b5ec5eace81ecbfa9a93482ae8672e55b7962b9c698b9b02fb14543c1e
+size 5988
diff --git a/rainbow-quox/front/fins3.png b/rainbow-quox/front/fins3.png
deleted file mode 100644
index feac6ff..0000000
--- a/rainbow-quox/front/fins3.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:81d82d665ca0b355af4166f1cc0966e67212418e334915dad24ada05516b006d
-size 4093
diff --git a/rainbow-quox/front/fins3.webp b/rainbow-quox/front/fins3.webp
new file mode 100644
index 0000000..c70fded
--- /dev/null
+++ b/rainbow-quox/front/fins3.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:50722592a90c4d8d562eefd5376ac1bd7d07edc72592789fe3b20b24bc06f580
+size 2298
diff --git a/rainbow-quox/front/lines.png b/rainbow-quox/front/lines.png
deleted file mode 100644
index c53cdf4..0000000
--- a/rainbow-quox/front/lines.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:889efb643e0688f235bf0284b9492efa7ecc079b804c82d808fdb91a12c9d4fe
-size 179826
diff --git a/rainbow-quox/front/lines.webp b/rainbow-quox/front/lines.webp
new file mode 100644
index 0000000..7e7046f
--- /dev/null
+++ b/rainbow-quox/front/lines.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:37a4f97523109c4b64f528bdf4eb13bce9e0d91da23ac653e449db4e82b0ed40
+size 79804
diff --git a/rainbow-quox/front/masks.png b/rainbow-quox/front/masks.png
deleted file mode 100644
index 5a0ee6b..0000000
--- a/rainbow-quox/front/masks.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:3e37e416635756c263a96913e47913a3686a095a3b01f81a5283787a71e89e4b
-size 10878
diff --git a/rainbow-quox/front/masks.webp b/rainbow-quox/front/masks.webp
new file mode 100644
index 0000000..07a035d
--- /dev/null
+++ b/rainbow-quox/front/masks.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:326b64b92fc4ccf34d36c39472eac5a8c0b484eb7450af637d2551b92ac81f9c
+size 4848
diff --git a/rainbow-quox/front/outer.png b/rainbow-quox/front/outer.png
deleted file mode 100644
index 3323174..0000000
--- a/rainbow-quox/front/outer.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a9e7ab5efdee557acd9bb8bcbeeefbcbeda4c31071185b1b0d6f8a26da879fc4
-size 34875
diff --git a/rainbow-quox/front/outer.webp b/rainbow-quox/front/outer.webp
new file mode 100644
index 0000000..e070513
--- /dev/null
+++ b/rainbow-quox/front/outer.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2abf9b569e88b52b61cadbcf882ead5c8b06128f31c9495f0e50b13b28778aec
+size 13222
diff --git a/rainbow-quox/front/pos.json b/rainbow-quox/front/pos.json
new file mode 100644
index 0000000..77d3ad6
--- /dev/null
+++ b/rainbow-quox/front/pos.json
@@ -0,0 +1,22 @@
+{
+  "stroke":    [ 0, 0 ],
+  "belly1":    [ 206, 112 ],
+  "belly2":    [ 206, 111 ],
+  "claws":     [ 23, 188 ],
+  "cuffs":     [ 62, 180 ],
+  "eyes":      [ 243, 72 ],
+  "eyeshine":  [ 243, 72 ],
+  "fins1":     [ 401, 51 ],
+  "fins2":     [ 407, 55 ],
+  "fins3":     [ 515, 160 ],
+  "lines":     [ 21, 20 ],
+  "masks":     [ 193, 23 ],
+  "outer":     [ 48, 63 ],
+  "spines":    [ 392, 43 ],
+  "static":    [ 70, 72 ],
+  "stripes":   [ 70, 188 ],
+  "vitiligo1": [ 54, 43 ],
+  "vitiligo2": [ 218, 112 ],
+  "vitiligo3": [ 234, 332 ],
+  "vitiligo4": [ 667, 91 ]
+}
diff --git a/rainbow-quox/front/spines.png b/rainbow-quox/front/spines.png
deleted file mode 100644
index a0a8a0c..0000000
--- a/rainbow-quox/front/spines.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:b43c12e8e6c6b6edbdf6ea35f04151f23b26c67a624e86497063b12c6fa4a4cc
-size 11263
diff --git a/rainbow-quox/front/spines.webp b/rainbow-quox/front/spines.webp
new file mode 100644
index 0000000..cba0a90
--- /dev/null
+++ b/rainbow-quox/front/spines.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2d41ce8b4cf1ff2f05abfc2b001028f9db29e9c25442607657373b4008b82233
+size 5240
diff --git a/rainbow-quox/front/static.png b/rainbow-quox/front/static.png
deleted file mode 100644
index 3ba9e0a..0000000
--- a/rainbow-quox/front/static.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d31dd489e752b5d9fbfb33c67199ab6fe49778fb9d976c06b3695f2bd91ca37b
-size 43641
diff --git a/rainbow-quox/front/static.webp b/rainbow-quox/front/static.webp
new file mode 100644
index 0000000..49c8711
--- /dev/null
+++ b/rainbow-quox/front/static.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:747a5d5b456c54ae31e2eda3279be1e6782b3700133c58e130cc86cee0c4a565
+size 23672
diff --git a/rainbow-quox/front/stripes.png b/rainbow-quox/front/stripes.png
deleted file mode 100644
index 39288a6..0000000
--- a/rainbow-quox/front/stripes.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:6efe51d45898de27318186ab9a945e434b64c9fccad4d0fe6f3266463916d0f6
-size 43540
diff --git a/rainbow-quox/front/stripes.webp b/rainbow-quox/front/stripes.webp
new file mode 100644
index 0000000..cadc60f
--- /dev/null
+++ b/rainbow-quox/front/stripes.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e1327c6808599d2f7a48069cc0171a21213318383a2019f6178a6a092112313b
+size 22274
diff --git a/rainbow-quox/front/stroke.webp b/rainbow-quox/front/stroke.webp
new file mode 100644
index 0000000..4e4b63f
--- /dev/null
+++ b/rainbow-quox/front/stroke.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e946320c011708d61f1b43519c7e4489bc1a5986f45f83e716788c4ccd8e0bd5
+size 17658
diff --git a/rainbow-quox/front/vitiligo1.png b/rainbow-quox/front/vitiligo1.png
deleted file mode 100644
index 494f004..0000000
--- a/rainbow-quox/front/vitiligo1.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:363be71bf2164cffb8f91562bf5913591d73293158f922a5ed9a1917fafb7471
-size 21373
diff --git a/rainbow-quox/front/vitiligo1.webp b/rainbow-quox/front/vitiligo1.webp
new file mode 100644
index 0000000..d62fe8f
--- /dev/null
+++ b/rainbow-quox/front/vitiligo1.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:32f7fe2f08b927c52068039792dd894ff449de8838774b5609a7d62129c2895a
+size 8260
diff --git a/rainbow-quox/front/vitiligo2.png b/rainbow-quox/front/vitiligo2.png
deleted file mode 100644
index fe6cfc6..0000000
--- a/rainbow-quox/front/vitiligo2.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:935543bd4940a2268ba66bc2cb26859fc42368d5e480ed302c14c679a0c3ae1f
-size 5993
diff --git a/rainbow-quox/front/vitiligo2.webp b/rainbow-quox/front/vitiligo2.webp
new file mode 100644
index 0000000..ffdb985
--- /dev/null
+++ b/rainbow-quox/front/vitiligo2.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a67f1fe1cfb109e2928efadf95c26fdccc65dad09af2d2f1df60db80374757d5
+size 2108
diff --git a/rainbow-quox/front/vitiligo3.png b/rainbow-quox/front/vitiligo3.png
deleted file mode 100644
index 16942ab..0000000
--- a/rainbow-quox/front/vitiligo3.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:072c8876a5569801d89db446615f81e3262efd0c6355311b57a4df621b23070f
-size 2421
diff --git a/rainbow-quox/front/vitiligo3.webp b/rainbow-quox/front/vitiligo3.webp
new file mode 100644
index 0000000..7ca5a11
--- /dev/null
+++ b/rainbow-quox/front/vitiligo3.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3ec9edac7aaa5ba1125929e711a47dcb004c9e4f65d62820cc30e9cb19fff056
+size 1036
diff --git a/rainbow-quox/front/vitiligo4.png b/rainbow-quox/front/vitiligo4.png
deleted file mode 100644
index e1246b9..0000000
--- a/rainbow-quox/front/vitiligo4.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c07b8c4234de1e9a03ffecd54e3805f925d2f5f110181ed0c9f467051c626220
-size 3465
diff --git a/rainbow-quox/front/vitiligo4.webp b/rainbow-quox/front/vitiligo4.webp
new file mode 100644
index 0000000..aaca515
--- /dev/null
+++ b/rainbow-quox/front/vitiligo4.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fb16c83441c0262ae9a37f8b30c849c6a01f403b88419d3a8e0d4e4f3ea54319
+size 1794
diff --git a/rainbow-quox/history.svg b/rainbow-quox/history.svg
new file mode 100644
index 0000000..174ce3b
--- /dev/null
+++ b/rainbow-quox/history.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="30" height="30" viewBox="0 0 100 100">
+
+  <defs>
+    <linearGradient id="arrow-color-fade" y1="100%" y2="0%">
+      <stop offset="20%" stop-color="hsl(60 90% 95%)" />
+      <stop offset="100%" stop-color="hsl(60 80% 90%)" />
+    </linearGradient>
+
+    <linearGradient id="arrow-alpha-fade" y1="100%" y2="0%">
+      <stop offset="25%" stop-color="white" />
+      <stop offset="75%" stop-color="black" />
+    </linearGradient>
+
+    <path id="arrow-path"
+      d="M 50,10 a 40,40 0 1 0 28.28,68.28
+         v15 h10 v-32.07 h-32.07 v10 h15
+         a 30,30 0 1 1 -21.21,-51.21 z" />
+
+    <mask id="arrow-mask">
+      <rect width="100" height="100" fill="black" />
+      <use href="#arrow-path" fill="white" />
+    </mask>
+
+    <mask id="fade-mask">
+      <rect width="100" height="100" fill="white" />
+      <rect width="55" height="55" fill="url(#arrow-alpha-fade)" />
+    </mask>
+  </defs>
+
+  <g id="arrow" mask="url(#fade-mask)">
+    <use href="#arrow-path" fill="none" />
+
+    <g id="arrow-fill" mask="url(#arrow-mask)">
+      <rect width="100" height="100" fill="hsl(60 90% 95%)" />
+      <rect x="40" y="40" width="60" height="60" fill="url(#arrow-color-fade)" />
+    </g>
+  </g>
+
+  <path id="hands" fill="url(#arrow-color-fade)" stroke="#123"
+    d="M 46,28 v 28 h 28 v -8 h -20 v -20 h -8 z" />
+</svg>
diff --git a/rainbow-quox/index.html b/rainbow-quox/index.html
index 67e269f..7c9d0e2 100644
--- a/rainbow-quox/index.html
+++ b/rainbow-quox/index.html
@@ -1,27 +1,62 @@
 <!doctype html>
-<html lang=en>
+<html lang=en data-state=loading>
+<meta charset=utf-8>
 
 <meta name=viewport content='width=device-width, initial-scale=0.5'>
 
 <title>rainbow quox</title>
 
-<link rel=stylesheet href=style.css>
-<script src=canvas.js type=module></script>
-
-<div id=pic-holder>
-  <canvas id=pic width=1000 height=673>
-    if the canvas isn't working,
-    the old version is <a href=old.html>here</a>
-  </canvas>
-  <canvas id=pic2 width=1000 height=673>
-  </canvas>
-</div>
+<link rel=stylesheet href=style/style.css>
+<script src=script/quox.js type=module></script>
 
 <div id=buttons>
   <button id=reroll>new quox</button>
   <button id=swap>swap view</button>
+  <button id=hideui>hide ui</button>
 </div>
 
-<nav>
-  <a href=/>back</a>
+<div id=showui-holder>
+  <button id=showui>
+    <img src=showui.svg alt='show ui' title='show ui'>
+  </button>
+</div>
+
+<nav id=back>
+  <a href=/><img src=back.svg alt=back title='back to the cube.'></a>
 </nav>
+
+<div id=history>
+  <button id=close-history>
+    <img src=close.svg alt=close title=close>
+  </button>
+
+  <div id=current>
+    <span id=current-hello>hello my name is</span>
+    <span id=current-name contenteditable>anonymous</span>
+    <button id=history-button>
+      <img src=history.svg alt=history title=history>
+    </button>
+  </div>
+
+  <div id=history-items>
+  </div>
+</div>
+
+<div id=pic-holder>
+  <canvas id=main width=1040 height=713>
+    the canvas failed to load. sorry.
+  </canvas>
+  <canvas id=aux width=1040 height=713></canvas>
+</div>
+
+<div id=palette-bar>
+  <button id=download-button>
+    <img src=download.svg alt='download palette'>
+  </button>
+  <div id=palette-holder>
+    <object type='image/svg+xml' data=palette.svg id=palette
+            width=1152 height=179>
+      there should be a palette here but it failed to load for some reason
+    </object>
+  </div>
+</div>
diff --git a/rainbow-quox/kra/back.kra b/rainbow-quox/kra/back.kra
index a01a414..7bb3f4d 100644
--- a/rainbow-quox/kra/back.kra
+++ b/rainbow-quox/kra/back.kra
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ec8adde036f86be12b8517ff1cdc227ad3dcaaf9e0a0e9e186d060d503fac573
-size 11558980
+oid sha256:75dc67e9a6a3a7807ad39f3b564b841c0a5335ed1ceae6a750ea748d300e3c33
+size 10674968
diff --git a/rainbow-quox/kra/front.kra b/rainbow-quox/kra/front.kra
index 7fd8554..2dfbb5f 100644
--- a/rainbow-quox/kra/front.kra
+++ b/rainbow-quox/kra/front.kra
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:579ca5af9a79a8577f62013418f58c729c646cfda9f2fd2bed54688b59de2ddd
-size 11346742
+oid sha256:047b1eb6e703a2c8d67d6ea3a83b942a8636da501b924d8d6a261f3c2f5f1544
+size 11122381
diff --git a/rainbow-quox/make-palette/cabal.project b/rainbow-quox/make-palette/cabal.project
new file mode 100644
index 0000000..9a93c76
--- /dev/null
+++ b/rainbow-quox/make-palette/cabal.project
@@ -0,0 +1,9 @@
+packages: ./make-palette.cabal
+
+source-repository-package
+  type: git
+  location: https://git.rhiannon.website/rhi/svg-builder
+  tag: 9c09fcea4ac316dd5e0709b40f85952047070bf1
+
+shared: False
+executable-dynamic: False
diff --git a/rainbow-quox/make-palette/make-palette.cabal b/rainbow-quox/make-palette/make-palette.cabal
new file mode 100644
index 0000000..0ab338e
--- /dev/null
+++ b/rainbow-quox/make-palette/make-palette.cabal
@@ -0,0 +1,12 @@
+cabal-version: 3.0
+
+name: make-palette
+version: 0
+
+executable make-palette
+  hs-source-dirs: .
+  build-depends: base, text, svg-builder
+  default-language: GHC2024
+  default-extensions: OverloadedStrings, PatternSynonyms
+  main-is: make-palette.hs
+  ghc-options: -Wall
diff --git a/rainbow-quox/make-palette/make-palette.hs b/rainbow-quox/make-palette/make-palette.hs
new file mode 100644
index 0000000..1634793
--- /dev/null
+++ b/rainbow-quox/make-palette/make-palette.hs
@@ -0,0 +1,147 @@
+import Graphics.Svg
+import Data.Text (Text)
+import Data.Text qualified as Text
+import Data.Maybe
+import System.Environment
+import Data.String (IsString (..))
+
+main :: IO ()
+main = do
+  [out] <- getArgs
+  renderToFile out document
+
+
+document :: Element
+document =
+  svg11_ (stylesheet "style/palette.css" <> foldMap makeItem (zip [0..] items))
+    `with` [Width_ <<- width, Height_ <<- "179",
+            ViewBox_ <<- viewBox]
+  where
+    width = tshow $ 53 + 100 * length items
+    viewBox = "-53 -1 " <> width <> " 179"
+
+
+items :: [Swatch]
+items =
+  ["outer"                `WithMinor` "vitiligo1",
+   "spines"               `WithUse`   "vitiligo1",
+   "stripes" `As` "socks" `WithMinor` "cuffs",
+   "belly1"               `WithMinor` "vitiligo3",
+   "belly2"               `WithMinor` "vitiligo2",
+   "fins1"                `WithMinor` "vitiligo4",
+   "fins2"                `WithUse`   "vitiligo4",
+   "fins3"                `WithUse`   "vitiligo4",
+   Only "masks", Only "claws", Only "eyes"
+  ]
+
+data Layer = Layer Text (Maybe Text)
+instance IsString Layer where fromString l = Layer (fromString l) Nothing
+pattern As :: Text -> Text -> Layer
+pattern txt `As` disp = Layer txt (Just disp)
+
+data Swatch =
+    Only      Layer
+  | WithMinor Layer Layer
+  | WithUse   Layer Text
+
+makeItem :: (Int, Swatch) -> Element
+makeItem (i, swatch) = case swatch of
+  Only (Layer l d) -> makeOnly l d i
+  WithMinor (Layer l1 d1) (Layer l2 d2) -> makeMinor l1 d1 l2 d2 i
+  WithUse (Layer l1 d1) l2 -> makeUse l1 d1 l2 i
+
+data SwatchCount = One | Two
+
+data SwatchPos = SOnly | SFirst | SSecond
+
+data RectType = RMaj | RMin | ROnly
+
+
+stylesheet :: Text -> Element
+stylesheet path =
+  makeElementNoEnd "link" `with`
+    [makeAttribute "xmlns" "http://www.w3.org/1999/xhtml",
+     makeAttribute "rel" "stylesheet",
+     makeAttribute "href" path,
+     Type_ <<- "text/css"]
+
+makeOnly :: Text -> Maybe Text -> Int -> Element
+makeOnly layer display index =
+  itemGroup layer index
+    [makeRect layer ROnly,
+     makeTextBg layer,
+     makeName (fromMaybe layer display) One,
+     makeHex layer SOnly]
+
+makeMinor :: Text -> Maybe Text -> Text -> Maybe Text -> Int -> Element
+makeMinor layer1 display1 layer2 _display2 index =
+  itemGroup layer1 index
+    [makeRect layer2 RMin,
+     makeRect layer1 RMaj,
+     makeTextBg layer1,
+     makeName (fromMaybe layer1 display1) Two,
+     makeHex layer1 SFirst,
+     makeHex layer2 SSecond]
+
+makeUse :: Text -> Maybe Text -> Text -> Int -> Element
+makeUse layer1 display1 layer2 index =
+  itemGroup layer1 index
+    [use_ [makeAttribute "href" $ "#s-" <> layer2],
+     makeRect layer1 RMaj,
+     makeTextBg layer1,
+     makeName (fromMaybe layer1 display1) Two,
+     makeHex layer1 SFirst,
+     use_ [makeAttribute "href" $ "#c-" <> layer2]]
+
+itemGroup :: Text -> Int -> [Element] -> Element
+itemGroup layer index elt =
+  g_ [Class_ <<- "item", Id_ <<- "i-" <> layer,
+      Transform_ <<- itemTranslate index]
+    (mconcat elt)
+
+makeRect :: Text -> RectType -> Element
+makeRect layer typ =
+  rect_ [Class_ <<- classes, Id_ <<- "s-" <> layer,
+         Fill_ <<- "pink",
+         X_ <<- "0", Y_ <<- y,
+         Width_ <<- "80", Height_ <<- height]
+ where
+  classes = "swatch " <>
+    case typ of RMaj -> "maj"; RMin -> "min"; ROnly -> "only"
+  height = case typ of RMaj -> "50"; RMin -> "25"; ROnly -> "80"
+  y = case typ of RMaj -> "30"; RMin -> "0"; ROnly -> "0"
+
+makeTextBg :: Text -> Element
+makeTextBg layer =
+  polygon_ [Class_ <<- "text-bg", Id_ <<- "p-" <> layer,
+            Fill_ <<- "pink",
+            points [(0,85), (80,85), (28,175), (-52,175)]]
+
+makeName :: Text -> SwatchCount -> Element
+makeName display count =
+  text_ [Class_ <<- "name", Text_anchor_ <<- "end",
+         X_ <<- tshow x, Y_ <<- "100", textTransform x] $
+    toElement display
+  where x = case count of One -> 22; Two -> 18
+
+makeHex :: Text -> SwatchPos -> Element
+makeHex layer count =
+  text_ [Class_ <<- "hex", Id_ <<- "c-" <> layer, Text_anchor_ <<- "end",
+         X_ <<- tshow x, Y_ <<- "100", textTransform x] $
+    "#000000"
+  where x = case count of SOnly -> 51; SFirst -> 42; SSecond -> 64
+
+textTransform :: Int -> Attribute
+textTransform x =
+  Transform_ <<- rotateAround @Double (-60) (fromIntegral x) 100
+
+
+itemTranslate :: Int -> Text
+itemTranslate i = translate @Double (fromIntegral $ i * 100) 0
+
+points :: [(Int, Int)] -> Attribute
+points = (Points_ <<-) . Text.unwords .
+         map (\(x, y) -> Text.intercalate "," [tshow x, tshow y])
+
+tshow :: Show a => a -> Text
+tshow = Text.pack . show
diff --git a/rainbow-quox/script/color.ts b/rainbow-quox/script/color.ts
new file mode 100644
index 0000000..1cd1d39
--- /dev/null
+++ b/rainbow-quox/script/color.ts
@@ -0,0 +1,512 @@
+import * as R from './rand.js';
+
+const max = Math.max;
+const min = Math.min;
+
+export type Luma   = number;
+export type Chroma = number;
+export type Hue    = number;
+export type Alpha  = number;
+
+export type HueDistance = number;
+
+const MAXL: Luma = 0.9;
+const MINL: Luma = 0.4;
+const MINL_LIGHT: Luma = 0.7;
+const MAXL_DARK: Luma = 0.65;
+
+const MINC_LIGHT: Chroma = 0.08;
+const MAXC_LIGHT: Chroma = 0.1;
+const MINC_DARK: Chroma = 0.12;
+const MAXC_DARK: Chroma = 0.175;
+
+// max spread for a sequence of analogous colors. unless that would put them
+// too close together
+const MAXH_WIDTH: HueDistance = 80;
+
+// minimum distance between adjacent analogous colors
+const MINH_SEP: HueDistance = 5;
+
+// size of the wedge a "complementary" color can be in
+const MAXH_COMPL: HueDistance = 40;
+
+// size of the wedge a "triadic" color can be in
+const MAXH_TRIAD: HueDistance = 25;
+
+
+type LD = 'light' | 'dark';
+
+export namespace Oklch {
+  export type Channel = 'l' | 'c' | 'h';
+  export type Channels = Record<Channel, number>;
+  export type ChannelMap = (x: number) => number;
+  export type ChannelMaps = Record<Channel, ChannelMap>;
+
+  // a function, or constant value, for each channel;
+  // or nothing, which indicates identity function
+  export type With = Partial<Record<Channel, number | ChannelMap>>;
+  export type With1 = ChannelMap | number | undefined;
+}
+
+function isLight(l: Luma): boolean { return l >= MINL_LIGHT; }
+
+export namespace Rand { export type State = R.State; }
+
+type CloseFar = 'close' | 'far';
+
+export class Rand extends R.Rand {
+  constructor();
+  constructor([a, b, c, d]: Rand.State);
+  constructor(str: string);
+  constructor(st?: Rand.State | string) {
+    if (st === undefined) super();
+    else if (typeof st === 'string') super(st);
+    else super(st);
+  }
+
+  lightFor(baseL: Luma, d: CloseFar = 'close'): Luma {
+    let maxl = d == 'close' ? min(MAXL, baseL * 1.25) : MAXL;
+    return this.float(baseL, maxl);
+  }
+  darkFor(baseL: Luma, d: CloseFar = 'close'): Luma {
+    let minl = d == 'close' ? max(MINL, baseL * 0.8) : MINL
+    return this.float(minl, baseL);
+  }
+
+  brightFor(l: Luma, baseC: Chroma): Chroma {
+    return this.float(baseC, isLight(l) ? MAXC_LIGHT : MAXC_DARK);
+  }
+
+  dullFor(l: Luma, baseC: Chroma): Chroma {
+    return this.float(baseC, isLight(l) ? MINC_LIGHT : MINC_DARK);
+  }
+
+  analogous1(baseH: Hue): Hue {
+    const size = this.float(MINH_SEP, 2 * MINH_SEP);
+    return this.boolean() ? baseH + size : baseH - size;
+  }
+
+  analogous(baseH: Hue, count: number): Hue[] {
+    const minWidth = min(count * MINH_SEP, MAXH_WIDTH * 0.8);
+    const width = this.float(minWidth, MAXH_WIDTH);
+    const sep = width / (count - 1);
+    const start = baseH - (width / 2);
+    const numbers = Array.from({length: count}, (_u, i) => start + i * sep);
+    return this.boolean() ? numbers : numbers.reverse();
+  }
+
+  complementary1(baseH: Hue): Hue {
+    return this.analogous1((baseH + 180) % 360);
+  }
+
+  complementary(baseH: Hue, count: number): Hue[] {
+    const angle = this.float(180 - MAXH_COMPL/2, 180 + MAXH_COMPL/2);
+    return this.analogous(baseH + angle, count);
+  }
+
+  triad(baseH: Hue): [Hue, Hue] {
+    const angle = this.float(120 - MAXH_TRIAD/2, 120 + MAXH_TRIAD/2);
+    return [baseH - angle, baseH + angle];
+  }
+
+  baseLuma(ld?: LD): Luma {
+    if (ld == 'light') {
+      return this.float(MINL_LIGHT, MAXL);
+    } else if (ld == 'dark') {
+      return this.float(MINL, MAXL_DARK);
+    } else {
+      return this.float(MINL, MAXL);
+    }
+  }
+
+  baseChroma(l: Luma): Chroma {
+    if (l >= MINL_LIGHT) {
+      return this.float(MINC_LIGHT, MAXC_LIGHT);
+    } else {
+      return this.float(MINC_DARK, MAXC_DARK);
+    }
+  }
+
+  baseHue(): Hue { return this.float(360); }
+}
+
+
+export class Oklch {
+  readonly l: Luma; readonly c: Chroma; readonly h: Hue;
+
+  static normHue(h: Hue) { return (h = h % 360) < 0 ? h + 360 : h; }
+
+  constructor(l: Luma, c: Chroma, h: Hue);
+  constructor(r: Rand, ld?: LD);
+  constructor(cs: Oklch.Channels);
+  constructor(ll: Luma | Oklch.Channels | Rand, cc?: Chroma | LD, hh?: Hue) {
+    if (hh !== undefined) {
+      this.l = ll as Luma;
+      this.c = cc as Chroma;
+      this.h = hh as Hue;
+    } else if (typeof ll == 'object' && 'l' in ll) {
+      const {l, c, h} = ll as Oklch.Channels;
+      this.l = l; this.c = c; this.h = h;
+    } else {
+      const r = ll as Rand;
+      this.l = r.baseLuma(cc as LD | undefined);
+      this.c = r.baseChroma(this.l);
+      this.h = r.baseHue();
+    }
+  }
+
+  with(maps: Oklch.With): Oklch {
+    function call(comp: Oklch.With1, x: number) {
+      switch (typeof comp) {
+        case 'number':   return comp;
+        case 'function': return comp(x);
+        default:         return x;
+      }
+    }
+    return new Oklch({
+      l: call(maps.l, this.l),
+      c: call(maps.c, this.c),
+      h: call(maps.h, this.h),
+    });
+  }
+
+  css(alpha: number = 1): string {
+    const l = (this.l * 100).toFixed(0);
+    const c = (this.c * 250).toFixed(0);
+    const h = this.h.toFixed(0);
+    if (alpha != 1) { return `oklch(${l}% ${c}% ${h} / ${alpha})`; }
+    else { return `oklch(${l}% ${c}% ${h})`; }
+  }
+
+  rgb(): Rgb { return toRgbViaCanvas(this); }
+
+  static validate(x: unknown): Oklch | undefined {
+    if (typeof x == 'object' && x != null && 'l' in x && 'c' in x && 'h' in x) {
+      const { l, c, h } = x;
+      if (typeof l == 'number' && typeof c == 'number' && typeof h == 'number')
+        return oklch(l, c, h);
+    }
+  }
+}
+
+
+export type SchemeType = 'triad' | 'fin-belly' | 'fin-body';
+
+export type OuterLayer = 'outer' | 'spines' | 'vitiligo1';
+export type SockLayer  = 'stripes' | 'cuffs';
+export type FinLayer   = 'fins1' | 'fins2' | 'fins3' | 'vitiligo4';
+export type BellyLayer = 'belly1' | 'vitiligo3' | 'belly2' | 'vitiligo2';
+export type MiscLayer  = 'eyes' | 'masks' | 'claws' | 'lines';
+export type Layer      =
+  OuterLayer | SockLayer | FinLayer | BellyLayer | MiscLayer;
+
+export type ColsOf<A extends string> = Record<A, Oklch>;
+export type OuterCols = ColsOf<OuterLayer>;
+export type SockCols  = ColsOf<SockLayer>;
+export type FinCols   = ColsOf<FinLayer>;
+export type BellyCols = ColsOf<BellyLayer>;
+export type MiscCols  = ColsOf<MiscLayer>;
+export type Colors    = ColsOf<Layer>;
+
+export type Scheme = Colors & {type: SchemeType};
+
+export const allLayers: Layer[] =
+  ['outer', 'spines', 'stripes', 'cuffs', 'fins1', 'fins2', 'fins3',
+   'belly1', 'belly2', 'masks', 'claws', 'vitiligo1', 'vitiligo2', 'vitiligo3',
+   'vitiligo4', 'eyes', 'lines'];
+
+export function makeColorInfo<A>(f: (l: Layer) => A): Record<Layer, A> {
+  return Object.fromEntries(allLayers.map(l => [l, f(l)])) as Record<Layer, A>;
+}
+
+export type BaseCol = 'outer' | 'belly' | 'fins';
+export type OptionalBaseCol = 'eyes' | 'stripes';
+
+type KnownPalette =
+  Record<BaseCol, Oklch> & Partial<Record<OptionalBaseCol, Oklch>>;
+
+
+export function colors(r: Rand = new Rand(), base?: KnownPalette): Scheme {
+  const outer = base?.outer ?? new Oklch(r, 'dark');
+  let outerCols: OuterCols =
+    { outer, spines: mkSpines(r, outer), vitiligo1: mkVitiligo(r, outer) };
+
+  const stripes = mkStripes(r);
+  let sockCols: SockCols = { stripes, cuffs: mkCuffs(r, stripes) };
+
+  let finCols: FinCols, bellyCols: BellyCols, type: SchemeType;
+  const whichBody = r.float();
+  if (whichBody > 2/3) {
+    type = 'triad';
+    const [f, b] = r.triad(outer.h);
+    finCols = mkFins(r, f, outer, base); bellyCols = mkBelly(r, b, base);
+  } else if (whichBody > 1/3) {
+    type = 'fin-belly';
+    const [f, b] = r.complementary(outer.h, 2);
+    finCols = mkFins(r, f!, outer, base); bellyCols = mkBelly(r, b!, base);
+  } else {
+    type = 'fin-body';
+    finCols = mkFins(r, r.analogous1(outer.h), outer, base);
+    bellyCols = mkBelly(r, r.complementary1(outer.h), base);
+  }
+
+  let miscCols = mkMisc(r, outerCols, finCols, bellyCols, base);
+
+  return merge(outerCols, sockCols, finCols, bellyCols, miscCols, type);
+}
+
+
+function mkSpines(r: Rand, outer: Oklch): Oklch {
+  return outer.with({
+    l: l => r.darkFor(l),
+    c: c => r.brightFor(outer.l, c),
+    h: h => r.float(h + 12, h - 12),
+  })
+}
+
+function mkVitiligo(r: Rand, outer: Oklch): Oklch {
+  return outer.with({
+    l: x => r.float(max(x, 0.94), 0.985), // exception to MAXL
+    c: x => r.float(min(x, 0.1), MINC_LIGHT),
+  });
+}
+
+function mkStripes(r: Rand): Oklch {
+  return new Oklch({
+    l: r.float(0.8, MAXL),
+    c: r.float(MINC_LIGHT, MAXC_LIGHT),
+    h: r.baseHue(),
+  });
+}
+
+function mkCuffs(r: Rand, sock: Oklch): Oklch {
+  return sock.with({
+    l: l => r.float(l * 0.85, l * 0.65),
+    c: c => r.float(c, MAXC_LIGHT),
+    h: h => r.float(h + 8, h - 8),
+  });
+}
+
+function mkFins(r: Rand, h: Hue, outer: Oklch, base?: KnownPalette): FinCols {
+  const baseFin1 = base?.fins;
+  const [fin1Hue, fin2Hue, fin3Hue] = r.analogous(baseFin1?.h ?? h, 3);
+
+  const direction: 'lighter' | 'darker' = r.choice(['lighter', 'darker']);
+
+  function ll(l: Luma): Luma {
+    return direction == 'lighter' ? r.lightFor(l) : r.darkFor(l);
+  }
+  function cc(l: Luma, c: Chroma): Chroma {
+    return direction == 'lighter' ? r.dullFor(l, c) : r.brightFor(l, c);
+  }
+
+  const fins1 = baseFin1 ?? oklch(ll(outer.l), cc(outer.l, outer.c), fin1Hue!);
+  const fins2 = oklch(ll(fins1.l), cc(fins1.l, fins1.c), fin2Hue!);
+  const fins3 = oklch(ll(fins2.l), cc(fins2.l, fins2.c), fin3Hue!);
+  const lighter = fins1.l >= fins3.l ? fins1 : fins3;
+  const vitiligo4 = mkVitiligo(r, lighter);
+  return { fins1, fins2, fins3, vitiligo4 };
+}
+
+function mkBelly(r: Rand, h: Hue, base?: KnownPalette): BellyCols {
+  let baseBelly1 = base?.belly;
+  const [belly1Hue, belly2Hue] = r.analogous(baseBelly1?.h ?? h, 2);
+  const belly1 = baseBelly1 ?? new Oklch({
+    l: r.float(0.7, MAXL),
+    c: r.baseChroma(1),
+    h: belly1Hue!
+  });
+  const belly2 = belly1.with({
+    l: x => min(MAXL, x * 1.1),
+    c: x => x * 0.9,
+    h: belly2Hue!,
+  });
+  const vitiligo3 = mkVitiligo(r, belly1);
+  const vitiligo2 = mkVitiligo(r, belly2);
+  return { belly1, belly2, vitiligo2, vitiligo3 };
+}
+
+function mkMisc(r: Rand, o: OuterCols, f: FinCols, b: BellyCols,
+                base?: KnownPalette): MiscCols {
+  const masks = new Oklch({
+    l: r.float(0.8, MAXL),
+    c: r.float(0.01, 0.06),
+    h: r.analogous1(r.choice([o.outer, b.belly1, f.fins1]).h)
+  });
+  return {
+    masks,
+    eyes: base?.eyes ?? new Oklch({
+      l: r.baseLuma('light'),
+      c: r.float(0.28, MAXC_LIGHT),
+      h: r.boolean() ? r.analogous1(o.outer.h) : r.complementary1(o.outer.h)
+    }),
+    claws: masks.with({
+      l: x => min(MAXL, x + r.float(0, 0.1)),
+      c: r.float(0.01, 0.06),
+      h: h => r.analogous1(h),
+    }),
+    lines: new Oklch({
+      l: r.float(0.01, 0.06),
+      c: r.baseChroma(0),
+      h: r.analogous1(o.outer.h)
+    }),
+  };
+}
+
+function merge({ outer, spines, vitiligo1 }: OuterCols,
+               { stripes, cuffs }: SockCols,
+               { fins1, fins2, fins3, vitiligo4 }: FinCols,
+               { belly1, vitiligo3, belly2, vitiligo2 }: BellyCols,
+               { eyes, masks, claws, lines }: MiscCols,
+               type: SchemeType): Scheme {
+  return {
+    outer, spines, vitiligo1, stripes, cuffs, fins1, fins2, fins3, vitiligo4,
+    belly1, vitiligo3, belly2, vitiligo2, eyes, masks, claws, lines, type
+  };
+}
+
+
+export namespace Rgb {
+  export type Channel = number;
+  export type Channels = { r: number, g: number, b: number };
+}
+
+export class Rgb {
+  readonly r: Rgb.Channel;
+  readonly g: Rgb.Channel;
+  readonly b: Rgb.Channel;
+
+  static clamp(x: Rgb.Channel) {
+    return min(max(0, Math.floor(x)), 255);
+  }
+
+  constructor(r: Rgb.Channel, g: Rgb.Channel, b: Rgb.Channel);
+  constructor({r, g, b}: Rgb.Channels);
+  constructor(rr: Rgb.Channel | Rgb.Channels, gg?: Rgb.Channel, bb?: Rgb.Channel) {
+    const C = Rgb.clamp;
+    if (typeof rr == 'number') {
+      this.r = C(rr!); this.g = C(gg!); this.b = C(bb!);
+    } else {
+      this.r = C(rr.r); this.g = C(rr.g); this.b = C(rr.b);
+    }
+  }
+
+  css() {
+    function h(x: Rgb.Channel) {
+      let s = x.toString(16);
+      return s.length == 2 ? s : '0' + s;
+    }
+    return `#${h(this.r)}${h(this.g)}${h(this.b)}`
+  }
+
+  static validate(x: unknown): Rgb | undefined {
+    if (typeof x == 'object' && x != null && 'r' in x && 'g' in x && 'b' in x) {
+      const { r, g, b } = x;
+      if (typeof r == 'number' && typeof g == 'number' && typeof b == 'number')
+        return rgb(r, g, b);
+    }
+  }
+}
+
+export type Rgbs = Record<Layer, Rgb>;
+
+let rgbBuf: OffscreenCanvasRenderingContext2D;
+
+export function toRgbViaCanvas(col: Oklch): Rgb {
+  rgbBuf ??= new OffscreenCanvas(1, 1).getContext('2d')!;
+  rgbBuf.fillStyle = col.css();
+  rgbBuf.fillRect(0, 0, 1, 1);
+  const pix = rgbBuf.getImageData(0, 0, 1, 1).data;
+  return rgb(pix[0]!, pix[1]!, pix[2]!);
+}
+
+export function toRgbs(col: Colors): Rgbs {
+  return makeColorInfo(l => col[l].rgb());
+}
+
+export function toHex({r, g, b}: Rgb): string {
+  function chan(n: number) {
+    let a = Math.floor(n).toString(16);
+    return a.length == 1 ? `0${a}` : a;
+  }
+  return `#${chan(r)}${chan(g)}${chan(b)}`;
+}
+
+
+export function oklch(l: number, c: number, h: number) {
+  return new Oklch(l, c, h);
+}
+
+export function rgb(r: number, g: number, b: number) {
+  return new Rgb(r, g, b);
+}
+
+
+export const KNOWN: Record<string, KnownPalette> = {
+  niss: {
+    outer: oklch(0.83, 0.201, 151),
+    belly: oklch(0.87, 0.082, 99),
+    fins:  oklch(0.68, 0.178, 16),
+    eyes:  oklch(0.73, 0.135, 242),
+  },
+  kesi: {
+    outer: oklch(0.86, 0.147, 147),
+    belly: oklch(0.96, 0.04, 108),
+    fins:  oklch(0.94, 0.142, 102),
+    eyes:  oklch(0.76, 0.115, 300),
+  },
+  60309: {
+    outer: oklch(0.84, 0.068, 212),
+    belly: oklch(0.56, 0.035, 233),
+    fins:  oklch(0.55, 0.101, 268),
+    eyes:  oklch(0.86, 0.146, 154),
+  },
+  'prickly pear': {
+    outer: oklch(0.64, 0.087, 316),
+    belly: oklch(0.88, 0.03, 88),
+    fins:  oklch(0.6, 0.071, 142),
+    eyes:  oklch(0.66, 0.091, 134),
+  },
+  'the goo': {
+    outer: oklch(0.92, 0.046, 354),
+    belly: oklch(0.83, 0.099, 354),
+    fins:  oklch(0.74, 0.115, 354),
+    eyes:  oklch(0.73, 0.149, 0),
+  },
+  lambda: {
+    outer: oklch(0.71, 0.154, 58),
+    belly: oklch(0.9, 0.05, 80),
+    fins:  oklch(0.76, 0.16, 140),
+    eyes:  oklch(0.82, 0.178, 141),
+  },
+  flussence: {
+    outer: oklch(0.77, 0.118, 133),
+    belly: oklch(0.71, 0.086, 253),
+    fins:  oklch(0.58, 0.102, 254),
+    eyes:  oklch(0.37, 0.107, 278),
+  },
+  serena: {
+    outer: oklch(0.69, 0.176, 349),
+    belly: oklch(0.92, 0.04, 350),
+    fins:  oklch(0.74, 0.138, 319),
+    eyes:  oklch(0.65, 0.206, 4),
+  },
+  pippin: {
+    outer: oklch(0.74, 0.08, 61),
+    belly: oklch(0.82, 0.062, 70),
+    fins:  oklch(0.52, 0.09, 45),
+    eyes:  oklch(0.74, 0.167, 136),
+  },
+  su: {
+    outer: oklch(0.29, 0.012, 219),
+    belly: oklch(0.89, 0.01, 256),
+    fins:  oklch(0.53, 0.093, 20),
+    // eyes:  oklch(0.53, 0.109, 254),
+  },
+  trans: {
+    outer: oklch(0.83, 0.065, 228),
+    belly: oklch(0.95, 0.021, 137),
+    fins:  oklch(0.86, 0.069, 352),
+    // eyes:  oklch(0.57, 0.158, 273),
+  },
+};
diff --git a/rainbow-quox/script/history.ts b/rainbow-quox/script/history.ts
new file mode 100644
index 0000000..af8f71e
--- /dev/null
+++ b/rainbow-quox/script/history.ts
@@ -0,0 +1,128 @@
+import { Colors as Oklchs, Rgbs } from './color.js';
+import * as Color from './color.js';
+
+export class HistoryItem {
+  name:  string;
+  oklch: Oklchs;
+  rgb:   Rgbs;
+
+  constructor(name: string, oklch: Oklchs, rgb: Rgbs) {
+    this.oklch = oklch;
+    this.rgb = rgb;
+    this.name = name;
+  }
+
+  asHtml(): HTMLButtonElement {
+    const { lines: bg, outer, belly1: belly, fins1: fins } = this.rgb;
+
+    const content = `
+      <svg class=history-colors width=30 height=25 viewBox="-10 -10 140 120">
+        <rect x=-10 y=-10 width=140 height=120 fill="${bg.css()}" />
+        <path fill="${fins.css()}" d="M 60,0 h -57.73 v 100 z">
+          <title>fin colour: ${fins.css()}</title>
+        </path>
+        <path fill="${belly.css()}" d="M 70,0 h 40 l -57.73,100 h -40 z">
+          <title>belly colour: ${belly.css()}</title>
+        </path>
+        <path fill="${outer.css()}" d="M 120,0 v 100 h -57.73 z">
+          <title>outer body colour: ${outer.css()}</title>
+        </path>
+        <desc>
+          sample of the palette for ${this.name}.
+          fin colour: ${fins.css()}.
+          belly colour: ${belly.css()}.
+          outer body colour: ${outer.css()}.
+        </desc>
+      </svg>
+      <span class=history-name>${this.name}</span>
+    `;
+
+    let button = document.createElement('button');
+    button.className = 'history-item';
+    button.dataset.name = this.name;
+    button.innerHTML = content;
+    return button;
+  }
+}
+
+
+export class History {
+  items: string[];
+
+  constructor(items: string[] = []) { this.items = items; }
+
+  add(name: string): void { this.items.push(name); }
+
+  *iterNames(maxLength?: number | null): Iterable<string> {
+    let seen = new Set<string>;
+    let done = 0;
+    if (maxLength === undefined) maxLength = 100;
+
+    for (let i = this.items.length - 1; i >= 0; i--) {
+      if (maxLength !== null && done > maxLength) break;
+      const name = this.items[i]!;
+      if (!name || seen.has(name)) continue;
+      seen.add(name); done++;
+      yield name;
+    }
+  }
+
+  *iterItems(maxLength?: number | null): Iterable<HistoryItem> {
+    for (const name of this.iterNames(maxLength)) {
+      const oklch = Color.colors(new Color.Rand(name), Color.KNOWN[name]);
+      const rgbs  = Color.toRgbs(oklch);
+
+      yield new HistoryItem(name, oklch, rgbs);
+    }
+  }
+
+  static validate(x: unknown): History | undefined {
+    if (!Array.isArray(x)) return;
+    if (!x.every(i => typeof i === 'string')) return;
+    return new History(x);
+  }
+
+  toJSON() { return this.items; }
+
+  save(persist = true) {
+    const storage = persist ? localStorage : sessionStorage;
+    storage.setItem('history', JSON.stringify(this));
+  }
+
+  // if the json was invalid, return it
+  // if no history exists just start a new one
+  static load(): History | string {
+    const json =
+      sessionStorage.getItem('history') ??
+      localStorage.getItem('history');
+    if (json != null) {
+      let h = History.validate(JSON.parse(json));
+      if (h) { h.prune(); return h; }
+      else return json;
+    } else {
+      return new History;
+    }
+  }
+
+  // if the json is invalid, discard it
+  static loadOrClear(): History {
+    const h = History.load();
+    return h instanceof History ? h : new History;
+  }
+
+  addSave(name: string, persist = true): void {
+    this.add(name);
+    this.save(persist);
+  }
+
+  prune(maxLength?: number | null) {
+    let keep = [];
+    for (let name of this.iterNames(maxLength)) keep.push(name);
+    this.items = keep.reverse();
+  }
+
+  pruneSave(maxLength?: number | null, persist = true) {
+    this.prune(maxLength);
+    this.save(persist);
+  }
+}
diff --git a/rainbow-quox/script/quox.ts b/rainbow-quox/script/quox.ts
new file mode 100644
index 0000000..0228127
--- /dev/null
+++ b/rainbow-quox/script/quox.ts
@@ -0,0 +1,494 @@
+import * as Color from './color.js';
+import { History } from './history.js';
+
+
+async function loadBitmap(url: string): Promise<ImageBitmap> {
+  const img0 = new Image;
+  const img: Promise<ImageBitmapSource> = new Promise((ok, err) => {
+    img0.addEventListener('load', () => ok(img0));
+    img0.addEventListener('error', () => err(`couldn't load file: ${url}`));
+  });
+  img0.src = url;
+  return createImageBitmap(await img);
+}
+
+
+type Buffer = OffscreenCanvasRenderingContext2D;
+
+function dataViaBuffer(bmp: ImageBitmap, buf: Buffer): ImageData {
+  buf.clearRect(0, 0, bmp.width, bmp.height);
+  buf.drawImage(bmp, 0, 0);
+  return buf.getImageData(0, 0, bmp.width, bmp.height);
+}
+
+async function loadDataLocking(url: string, buf: Buffer): Promise<ImageData> {
+  return loadBitmap(url).then(i =>
+    navigator.locks.request('imagebuf', () => dataViaBuffer(i, buf)));
+}
+
+async function loadDataFresh(url: string): Promise<ImageData> {
+  const img = await loadBitmap(url);
+  let buf = new OffscreenCanvas(img.width, img.height).getContext('2d')!;
+  return dataViaBuffer(img, buf);
+}
+
+function loadImageData(url: string, buf?: Buffer): Promise<ImageData> {
+  if (buf && navigator.locks) return loadDataLocking(url, buf);
+  else return loadDataFresh(url);
+}
+
+const WIDTH = 1040;
+const HEIGHT = 713;
+
+function makeBuffer(width = WIDTH, height = HEIGHT): Buffer {
+  return new OffscreenCanvas(width, height).getContext('2d')!;
+}
+
+function makeBufferIfLocks(width?: number, height?: number): Buffer | undefined {
+  if (navigator.locks) makeBuffer(width, height);
+  else return undefined;
+}
+
+export type Layer = 'stroke' | 'static' | 'eyeshine' | Color.Layer;
+
+// in compositing order
+export const allLayers: Layer[] =
+  ['stroke', 'static', 'outer', 'spines', 'stripes', 'cuffs', 'fins1', 'fins2',
+   'fins3', 'belly1', 'belly2', 'masks', 'claws', 'vitiligo1', 'vitiligo2',
+   'vitiligo3', 'vitiligo4', 'eyes', 'eyeshine', 'lines'];
+
+function makeLayerInfo<A>(f: (l: Layer) => A): Record<Layer, A> {
+  return Object.fromEntries(allLayers.map(l => [l, f(l)])) as Record<Layer, A>;
+}
+
+async function makeLayerInfoAsync<A>(f: (l: Layer) => Promise<A>):
+Promise<Record<Layer, A>> {
+  let list = await Promise.all(allLayers.map(l => f(l).then(res => [l, res])));
+  return Object.fromEntries(list);
+}
+
+
+function loadLayers(dir: string): Promise<Record<Layer, ImageData>> {
+  let buf = makeBufferIfLocks(WIDTH, HEIGHT);
+  return makeLayerInfoAsync(l => loadImageData(`./${dir}/${l}.webp`, buf));
+}
+
+
+
+type Position = [x: number, y: number];
+type Positions = Record<Layer, Position>;
+
+async function loadPos(dir: string): Promise<Positions> {
+  return (await fetch(`./${dir}/pos.json`)).json();
+}
+
+
+type Side = 'front' | 'back';
+
+function swapSide(s: Side): Side {
+  return s == 'front' ? 'back' : 'front';
+}
+
+type SideData = Record<Layer, [ImageData, Position]>;
+
+type LayerData = {
+  front: SideData, back: SideData,
+  frontImage?: ImageData, backImage?: ImageData,
+};
+
+type ComposedData = Required<LayerData>;
+
+async function loadData(): Promise<LayerData> {
+  let [fl, fp, bl, bp] = await Promise.all([
+    loadLayers('front'), loadPos('front'),
+    loadLayers('back'),  loadPos('back')
+  ]);
+  return {
+    front: makeLayerInfo(l => [fl[l], fp[l]]),
+    back:  makeLayerInfo(l => [bl[l], bp[l]]),
+  }
+}
+
+
+function singleColor({ data }: ImageData, { r, g, b }: Color.Rgb) {
+  for (let i = 0; i < data.length; i += 4) {
+    data[i] = r; data[i+1] = g; data[i+2] = b;
+  }
+}
+
+async function recolorLayers(layers: LayerData, cols: Color.Rgbs) {
+  await Promise.all(Color.allLayers.map(l => {
+    singleColor(layers.front[l][0], cols[l]);
+    singleColor(layers.back[l][0],  cols[l]);
+  }));
+  delete layers.frontImage; delete layers.backImage;
+}
+
+type ComposeLayer = [ImageData, Position, GlobalCompositeOperation];
+
+async function compose(buf: Buffer, layers: ComposeLayer[],
+                       width: number, height: number): Promise<ImageData> {
+  buf.save();
+  buf.clearRect(0, 0, width, height);
+  const bmps = await Promise.all(layers.map(async ([l, [x, y], m]) =>
+    [await createImageBitmap(l), x, y, m] as const));
+  for (const [bmp, x, y, m] of bmps) {
+    buf.globalCompositeOperation = m;
+    buf.drawImage(bmp, x, y);
+  }
+  buf.restore();
+  return buf.getImageData(0, 0, width, height);
+}
+
+async function
+ensureComposed(buf: Buffer, data: LayerData): Promise<ComposedData> {
+  let { front, back } = data;
+  data.frontImage ??= await composeLayers(front);
+  data.backImage  ??= await composeLayers(back);
+  return data as ComposedData;
+
+  function composeLayers(sdata: SideData): Promise<ImageData> {
+    return compose(buf, allLayers.map(l => makeLayer(l, sdata)), WIDTH, HEIGHT);
+  }
+  function makeLayer(l: Layer, sdata: SideData): ComposeLayer {
+    let [i, p] = sdata[l];
+    return [i, p, l == 'eyeshine' ? 'luminosity' : 'source-over'];
+  }
+}
+
+
+async function redraw(ctx: CanvasRenderingContext2D,
+                      buf: Buffer, data: ComposedData, side: Side) {
+  await ensureComposed(buf, data);
+  ctx.putImageData(data[`${side}Image`], 0, 0);
+}
+
+
+function message(msg: string, error = false) {
+  const ctx = getCanvasCtx('main');
+  const size = error ? 30 : 100;
+  ctx.save();
+  ctx.clearRect(0, 0, WIDTH, HEIGHT);
+  ctx.font = `bold ${size}px Muller, sans-serif`;
+  ctx.textAlign = 'center';
+  ctx.fillText(msg, WIDTH/2, HEIGHT/2, WIDTH-10);
+  ctx.restore();
+}
+
+
+function urlState(): string | undefined {
+  let hash = document.location.hash?.substring(1);
+  if (hash != '' && hash !== undefined) return decodeURI(hash);
+}
+
+function updateUrl(seed: string): void {
+  history.replaceState({}, '', `#${encodeURI(seed)}`);
+}
+
+type ApplyStateOpts = {
+  seed:       string,
+  side?:      Side,
+  firstLoad?: boolean,
+  buf?:       Buffer,
+  history?:   History,
+  done?:      Done,
+};
+
+async function
+applyState(data: LayerData, opts: ApplyStateOpts): Promise<string> {
+  let { side, seed, firstLoad, buf, history, done } = opts;
+  side      ??= 'front';
+  firstLoad ??= false;
+  buf       ??= new OffscreenCanvas(WIDTH, HEIGHT).getContext('2d')!;
+  done      ??= () => {};
+
+  let rand = new Color.Rand(seed);
+
+  const oklch = Color.colors(rand, Color.KNOWN[seed]);
+  const rgb   = Color.toRgbs(oklch);
+  const newSeed = rand.alphaNum();
+
+  await recolorLayers(data, rgb);
+
+  updateBg(oklch);
+  updateSvgs(oklch, rgb);
+  updateLabel(seed);
+  updateUrl(seed);
+
+  if (firstLoad) {
+    await instantUpdateImage(side, await ensureComposed(buf, data));
+    done();
+  } else {
+    await animateUpdateImage(buf, side, data, done);
+  }
+
+  if (history) history.addSave(seed);
+
+  return newSeed;
+}
+
+type CanvasId = 'main' | 'aux';
+
+function getCanvasCtx(id: CanvasId) {
+  const canvas = document.getElementById(id) as HTMLCanvasElement;
+  return canvas.getContext('2d')!;
+}
+
+async function
+instantUpdateImage(side: Side, data: ComposedData) {
+  getCanvasCtx('main').putImageData(data[`${side}Image`], 0, 0);
+}
+
+type Done = () => void;
+
+const noAnim = matchMedia('(prefers-reduced-motion: reduce)');
+
+async function
+animateUpdateImage(buf: Buffer, side: Side, data: LayerData, done: Done) {
+  if (noAnim.matches) {
+    instantUpdateImage(side, await ensureComposed(buf, data));
+    done();
+    return;
+  }
+
+  const duration = 200;
+
+  const main = getCanvasCtx('main');
+  const aux  = getCanvasCtx('aux');
+
+  document.documentElement.dataset.running = 'reroll';
+  const cdata = await ensureComposed(buf, data);
+  redraw(aux, buf, cdata, side);
+
+  aux.canvas.addEventListener('animationend', async () => {
+    await redraw(main, buf, cdata, side);
+    aux.canvas.style.removeProperty('animation');
+    delete document.documentElement.dataset.running;
+    done();
+  });
+
+  setTimeout(() =>
+    aux.canvas.style.animation = `${duration}ms ease forwards fade-in`
+  );
+}
+
+async function
+animateSwapImage(buf: Buffer, newSide: Side, data: ComposedData, done: Done) {
+  if (noAnim.matches) {
+    instantUpdateImage(newSide, data);
+    done();
+    return;
+  }
+
+  const duration = 400;
+
+  const main = getCanvasCtx('main');
+  const aux  = getCanvasCtx('aux');
+
+  document.documentElement.dataset.running = 'swap';
+  await redraw(aux, buf, data, newSide);
+
+  aux.canvas.addEventListener('animationend', async () => {
+    const image = aux.getImageData(0, 0, WIDTH, HEIGHT);
+    main.putImageData(image, 0, 0);
+
+    main.canvas.style.removeProperty('animation');
+    aux.canvas.style.removeProperty('animation');
+    delete document.documentElement.dataset.running;
+    done();
+  });
+
+  main.canvas.style.animation = `${duration}ms ease swap1`;
+  aux.canvas.style.animation  = `${duration}ms ease swap2`;
+}
+
+function updateBg(cols: Color.Colors) {
+  document.documentElement.style.setProperty('--hue', `${cols.outer.h}`);
+}
+
+function updateLabel(seed: string) {
+  const stateLabel = document.getElementById('current-name');
+  if (stateLabel) stateLabel.innerHTML = seed;
+}
+
+function updateSvgs(oklch: Color.Colors, rgb: Color.Rgbs) {
+  const paletteObj = document.getElementById('palette') as HTMLObjectElement;
+  const palette    = paletteObj.contentDocument as XMLDocument | null;
+
+  if (palette) {
+    palette.documentElement.style.setProperty('--hue', `${oklch.outer.h}`);
+    const get = (id: string) => palette.getElementById(id);
+
+    for (const layer of Color.allLayers) {
+      let col = rgb[layer].css();
+      let elem;
+
+      // main group
+      if (elem = get(`i-${layer}`)) {
+        if (oklch[layer].l < 0.6) {
+          elem.classList.add('light'); elem.classList.remove('dark');
+        } else {
+          elem.classList.add('dark'); elem.classList.remove('light');
+        }
+        elem.style.setProperty('--col', col);
+      }
+
+      // label
+      if (elem = get(`c-${layer}`)) elem.innerHTML = col;
+      // minor swatch, if applicable
+      if (elem = get(`s-${layer}`)) elem.style.setProperty('--col', col);
+    }
+  }
+}
+
+
+function showHistory(history: History, data: LayerData,
+                     opts: Omit<ApplyStateOpts, 'seed' | 'history'>) {
+  const list = document.getElementById('history-items');
+  if (!list) return;
+  list.innerHTML = '';
+  let { side, firstLoad, buf, done } = opts;
+
+  for (const item of history.iterItems()) {
+    const elem = item.asHtml();
+    let allOpts = { side, firstLoad, buf, done, seed: item.name, history };
+    elem.addEventListener('click', () => {
+      applyState(data, allOpts);
+    });
+    list.appendChild(elem);
+  }
+
+  setTimeout(() => {
+    document.documentElement.dataset.state = 'history';
+    const elem = document.createElement('div');
+    elem.id = 'history-close-target';
+    elem.addEventListener('click', closeHistory);
+    document.body.appendChild(elem);
+  });
+}
+
+function closeHistory() {
+  document.getElementById('history-items')?.
+    scroll({top: 0, left: 0, behavior: 'smooth'});
+  let field = document.getElementById('history-close-target');
+  if (field) field.parentElement?.removeChild(field);
+  document.documentElement.dataset.state = 'ready';
+}
+
+function download(seed: string) {
+  const colors = Color.toRgbs(Color.colors(new Color.Rand(seed)));
+
+  let lines = [
+    "GIMP Palette\n",
+    `Name: quox ${seed}\n\n`,
+  ];
+
+  for (const name of Color.allLayers) {
+    let { r, g, b } = colors[name];
+    lines.push(`${r} ${g} ${b} ${name}\n`);
+  }
+
+  const blob = new Blob(lines, { type: 'application/x-gimp-palette' });
+
+  // there must be a better way to push out a file than
+  // this autohotkey-ass nonsense
+  const elem = document.createElement('a');
+  elem.download = `quox-${seed}.gpl`;
+  const url = URL.createObjectURL(blob);
+  elem.href = url;
+  elem.click();
+  URL.revokeObjectURL(url);
+}
+
+async function setup() {
+  message('loading layers…');
+
+  let data = await loadData().catch(e => { message(e, true); throw e });
+  let history = History.loadOrClear();
+
+  let buf = new OffscreenCanvas(WIDTH, HEIGHT).getContext('2d')!;
+
+  let prevSeed = urlState() ?? new Color.Rand().alphaNum();
+  let seed =
+    await applyState(data, { seed: prevSeed, buf, history, firstLoad: true });
+  let side: Side = 'front';
+
+  const reroll = document.getElementById('reroll')!;
+  const swap   = document.getElementById('swap')!;
+
+  addListeners();
+
+  // these ones don't need to be toggled
+  document.getElementById('hideui')?.addEventListener('click', () => {
+    document.documentElement.dataset.state = 'fullquox';
+  });
+  document.getElementById('showui')?.addEventListener('click', () => {
+    document.documentElement.dataset.state = 'ready';
+  });
+  document.getElementById('history-button')?.addEventListener('click', () => {
+    // does this need the add/remove listeners dance
+    // actually does anything any more?
+    showHistory(history, data, { side, buf });
+  });
+  document.getElementById('close-history')?.addEventListener('click', closeHistory);
+  document.getElementById('current-name')?.addEventListener('focusout', async e => {
+    const space = String.raw`(\n|\s|<br>|&nbsp;)`;
+    const re = new RegExp(`^${space}+|${space}+$`, 'msgu');
+
+    let elem = e.target as HTMLElement;
+    let str = elem.innerText.replaceAll(re, '');
+    if (!str) str = new Color.Rand().alphaNum();
+    elem.innerText = str;
+    // todo allow images cos it's funny
+
+    prevSeed = seed;
+    seed = await applyState(data, { side, seed: str, buf, history });
+  });
+  document.getElementById('download-button')?.addEventListener('click', () => {
+    download(prevSeed);
+  });
+
+  document.documentElement.dataset.state = 'ready';
+
+  async function run(task: (k: Done) => Promise<void>): Promise<void> {
+    removeListeners();
+    await task(addListeners);
+  }
+
+  function updateFromUrl() {
+    run(async k => {
+      const newSeed = urlState();
+      if (newSeed) {
+        const opts = { history, side, seed: newSeed, buf, done: k };
+        prevSeed = seed;
+        seed = await applyState(data, opts);
+      }
+    });
+  }
+  function runReroll() {
+    run(async k => {
+      prevSeed = seed;
+      seed = await applyState(data, { side, seed, buf, history, done: k });
+    });
+  }
+  function runSwap() {
+    run(async k => {
+      side = swapSide(side);
+      const cdata = await ensureComposed(buf, data);
+      await animateSwapImage(buf, side, cdata, k);
+    });
+  }
+
+  function addListeners() {
+    window.addEventListener('hashchange', updateFromUrl);
+    reroll.addEventListener('click', runReroll);
+    swap.addEventListener('click', runSwap);
+  }
+  function removeListeners() {
+    window.removeEventListener('hashchange', updateFromUrl);
+    reroll.removeEventListener('click', runReroll);
+    swap.removeEventListener('click', runSwap);
+  }
+}
+
+document.addEventListener('DOMContentLoaded', setup);
diff --git a/rainbow-quox/script/rand.ts b/rainbow-quox/script/rand.ts
new file mode 100644
index 0000000..efc8a1c
--- /dev/null
+++ b/rainbow-quox/script/rand.ts
@@ -0,0 +1,123 @@
+// https://stackoverflow.com/questions/521295#47593316
+
+export type State = [number, number, number, number];
+
+export interface Randy {
+  state: State;
+
+  int(): number; // whole int32 range
+  int(x: number): number; // [0, x)
+  int(x: number, y: number): number; // [x, y)
+
+  float(): number; // [0, 1)
+  float(x: number): number; // [0, x)
+  float(x: number, y: number): number; // [x, y)
+
+  choice<A>(array: A[]): A;
+  boolean(): boolean;
+}
+
+
+export function fromHex(s: string): State {
+  const a = s.substring(0, 8);
+  const b = s.substring(8, 16);
+  const c = s.substring(16, 24);
+  const d = s.substring(24, 32);
+  return [h(a), h(b), h(c), h(d)];
+
+  function h(x: string) { return parseInt(x, 16); }
+}
+
+export function toHex([a, b, c, d]: State): string {
+  return `${h(a)}${h(b)}${h(c)}${h(d)}`;
+  function h(x: number) { return x.toString(16); }
+}
+
+
+const UINT_MAX = 4294967296;
+
+export class Rand implements Randy {
+  #a: number; #b: number; #c: number; #d: number;
+
+  constructor();
+  constructor([a, b, c, d]: State);
+  constructor(str: string);
+  constructor(st?: State | string) {
+    const [a, b, c, d] =
+      st === '' ? s4() :
+      typeof st === 'string' ? Rand.stateFrom(st) :
+      st ?? s4();
+    this.#a = a; this.#b = b; this.#c = c; this.#d = d;
+
+    for (let i = 0; i < 20; ++i) this.#next();
+
+    function s() { return (Math.random() * 2**32) >>> 0; }
+    function s4() { return [s(), s(), s(), s()] as const; }
+  }
+
+  get state(): State { return [this.#a, this.#b, this.#c, this.#d]; }
+
+  get stateString() { return toHex(this.state); }
+
+  static stateFrom(str: string): State {
+    let h1 = 1779033703, h2 = 3144134277,
+        h3 = 1013904242, h4 = 2773480762;
+    for (let i = 0, k; i < str.length; i++) {
+        k = str.charCodeAt(i);
+        h1 = h2 ^ Math.imul(h1 ^ k, 597399067);
+        h2 = h3 ^ Math.imul(h2 ^ k, 2869860233);
+        h3 = h4 ^ Math.imul(h3 ^ k, 951274213);
+        h4 = h1 ^ Math.imul(h4 ^ k, 2716044179);
+    }
+    h1 = Math.imul(h3 ^ (h1 >>> 18), 597399067);
+    h2 = Math.imul(h4 ^ (h2 >>> 22), 2869860233);
+    h3 = Math.imul(h1 ^ (h3 >>> 17), 951274213);
+    h4 = Math.imul(h2 ^ (h4 >>> 19), 2716044179);
+    h1 ^= (h2 ^ h3 ^ h4), h2 ^= h1, h3 ^= h1, h4 ^= h1;
+    return [h1>>>0, h2>>>0, h3>>>0, h4>>>0];
+  }
+
+  int(): number; // whole int32 range
+  int(to: number): number; // [0, x)
+  int(from: number, to: number): number; // [x, y)
+  int(x?: number, y?: number): number {
+    if (x === undefined) return this.#next();
+    return Math.floor(y === undefined ? this.float(x) : this.float(x, y));
+  }
+
+  float(): number; // [0, 1)
+  float(x: number): number; // [0, x)
+  float(x: number, y: number): number; // [x, y)
+  float(x?: number, y?: number): number {
+    const in01 = this.#next() / UINT_MAX;
+    if (x === undefined) return in01;
+    const [lo, hi] = y === undefined? [0, x] : [x, y];
+    return lo + in01 * (hi - lo);
+  }
+
+  choice<A>(array: A[]): A {
+    return array[this.int(array.length)]!;
+  }
+
+  boolean(): boolean { return this.float() > 0.5; }
+
+  alphaNum(len?: number): string {
+    let res = "";
+    // [todo] is there a better way to make a string in js
+    if (len === undefined || len <= 0) len = 16; // idk
+    for (let i = 0; i < len; ++i)
+      res += this.choice(Array.from("abcdefghijklmnopqrstuvwxyz0123456789"));
+    return res;
+  }
+
+  #next(): number {
+    this.#a |= 0; this.#b |= 0; this.#c |= 0; this.#d |= 0;
+    let t = (this.#a + this.#b | 0) + this.#d | 0;
+    this.#d = this.#d + 1 | 0;
+    this.#a = this.#b ^ this.#b >>> 9;
+    this.#b = this.#c + (this.#c << 3) | 0;
+    this.#c = (this.#c << 21 | this.#c >>> 11);
+    this.#c = this.#c + t | 0;
+    return (t >>> 0);
+  }
+}
diff --git a/rainbow-quox/showui.svg b/rainbow-quox/showui.svg
new file mode 100644
index 0000000..add1e2c
--- /dev/null
+++ b/rainbow-quox/showui.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="40" height="34" viewBox="-2.5 -2.5 65 55"
+     stroke="#123" stroke-width="2">
+
+  <linearGradient id="g-bg" x2="0" y2="100%">
+    <stop offset="25%" stop-color="hsl(60 90% 95%)" />
+    <stop offset="75%" stop-color="hsl(60 80% 90%)" />
+  </linearGradient>
+
+  <mask id="screen">
+    <rect width="60" height="50" fill="white" />
+  </mask>
+
+  <rect width="60" height="35" fill="url(#g-bg)" />
+
+  <rect x="4" y="4" width="6" height="6" fill="#123" />
+
+  <path stroke-width="4" fill="none" mask="url(#screen)"
+    d="M25,0 l-6,12 m12,-12 l-6,12 M65,6 h-16" />
+
+  <rect width="60" y="35" height="15" fill="url(#g-bg)" />
+  <path fill="none" stroke-width="4"
+        d="M6,37.5 v10 m6,-10 v10 m6,-10 v10 m6,-10 v10 m6,-10 v10
+           m6,-10 v10 m6,-10 v10 m6,-10 v10 m6,-10 v10" />
+</svg>
diff --git a/rainbow-quox/style.css b/rainbow-quox/style.css
deleted file mode 100644
index b5316c5..0000000
--- a/rainbow-quox/style.css
+++ /dev/null
@@ -1,185 +0,0 @@
-@import url(/fonts/muller/muller.css);
-
-@property --transition {
-  syntax: "*";
-  inherits: true;
-  initial-value: none;
-}
-
-* { box-sizing: border-box; }
-
-@media (prefers-reduced-motion: reduce) {
-  * { transition: none; }
-}
-
-@keyframes swap {
-  0%   { transform: none; }
-  49%  { transform: translateX(-150vw); }
-  50%  { content-visibility: hidden; }
-  51%  { transform: translateX(150vw); content-visibility: visible; }
-  100% { transform: none; }
-}
-
-@keyframes fade-in {
-  from { opacity: 0 }
-  to   { opacity: 1 }
-}
-
-:root {
-  --hue: 300;
-  --c-hue: calc(180 + var(--hue));
-  min-height: 100vh; display: flex;
-  align-items: center; justify-content: center;
-
-  --font: Muller, sans-serif;
-  font-family: var(--font);
-
-  color-scheme: light dark;
-  background: oklch(0.9 0.08 var(--hue));
-  transition: background 0.4s ease;
-
-  width: 100vw;
-  overflow-x: hidden;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root { background: oklch(0.3 0.12 var(--hue)); }
-}
-
-#pic-holder, #pic, #pic2 {
-  width: min(1000px, 75vw);
-  margin: auto;
-  aspect-ratio: 2000/1346;
-}
-
-#pic-holder { position: relative; }
-#pic, #pic2 { position: absolute; inset: 0; }
-
-#pic2 {
-  opacity: 0;
-  pointer-events: none;
-}
-
-
-#front .static { background: url(ufront/static.png) 0 0 / contain; }
-#back .static { background: url(uback/static.png) 0 0 / contain; }
-
-.spines { background: oklch(30.77% 0.1306 298.19); }
-#front .spines { mask-image: url(ufront/spines.png); }
-#back .spines { mask-image: url(uback/spines.png); }
-
-.stripes { background: oklch(88.2% 0.0613 209.07); }
-#front .stripes { mask-image: url(ufront/stripes.png); }
-#back .stripes { mask-image: url(uback/stripes.png); }
-
-.cuffs { background: oklch(72.74% 0.1008 225.69); }
-#front .cuffs { mask-image: url(ufront/cuffs.png); }
-#back .cuffs { mask-image: url(uback/cuffs.png); }
-
-.outer { background: oklch(38.37% 0.1437 306.27); }
-#front .outer { mask-image: url(ufront/outer.png); }
-#back .outer { mask-image: url(uback/outer.png); }
-
-.fins1 { background: oklch(85.06% 0.0961 81.4); }
-#front .fins1 { mask-image: url(ufront/fins1.png); }
-#back .fins1 { mask-image: url(uback/fins1.png); }
-
-.fins2 { background: oklch(79.59% 0.1208 73.56); }
-#front .fins2 { mask-image: url(ufront/fins2.png); }
-#back .fins2 { mask-image: url(uback/fins2.png); }
-
-.fins3 { background: oklch(74.11% 0.1268 64.62); }
-#front .fins3 { mask-image: url(ufront/fins3.png); }
-#back .fins3 { mask-image: url(uback/fins3.png); }
-
-.belly1 { background: oklch(87.26% 0.0699 80.94); }
-#front .belly1 { mask-image: url(ufront/belly1.png); }
-#back .belly1 { mask-image: url(uback/belly1.png); }
-
-.belly2 { background: oklch(76.92% 0.0954 58.36); }
-#front .belly2 { mask-image: url(ufront/belly2.png); }
-#back .belly2 { mask-image: url(uback/belly2.png); }
-
-.eyes { background: oklch(36.26% 0.1107 145.78); }
-#front .eyes { mask-image: url(ufront/eyes.png); }
-#back .eyes { mask-image: url(uback/eyes.png); }
-
-.masks { background: oklch(77.1% 0.0243 317.12); }
-#front .masks { mask-image: url(ufront/masks.png); }
-#back .masks { mask-image: url(uback/masks.png); }
-
-.claws { background: oklch(88.92% 0.0207 325.75); }
-#front .claws { mask-image: url(ufront/claws.png); }
-#back .claws { mask-image: url(uback/claws.png); }
-
-.vitiligo1 { background: oklch(79.4% 0.0588 309.27); }
-#front .vitiligo1 { mask-image: url(ufront/vitiligo1.png); }
-#back .vitiligo1 { mask-image: url(uback/vitiligo1.png); }
-
-.vitiligo2 { background: oklch(93.14% 0.0331 83.71); }
-#front .vitiligo2 { mask-image: url(ufront/vitiligo2.png); }
-#back .vitiligo2 { mask-image: url(uback/vitiligo2.png); }
-
-.vitiligo3 { background: oklch(95.7% 0.0296 94.35); }
-#front .vitiligo3 { mask-image: url(ufront/vitiligo3.png); }
-#back .vitiligo3 { mask-image: url(uback/vitiligo3.png); }
-
-.vitiligo4 { background: oklch(95.7% 0.0296 94.35); }
-#front .vitiligo4 { mask-image: url(ufront/vitiligo4.png); }
-#back .vitiligo4 { mask-image: url(uback/vitiligo4.png); }
-
-.lines { background: oklch(21.96% 0.0661 296.36); }
-#front .lines { mask-image: url(ufront/lines.png); }
-#back .lines { mask-image: url(uback/lines.png); }
-
-.eye-shine { mask: none; mix-blend-mode: luminosity; }
-#front .eye-shine { background: url(ufront/eyes.png) 0 0 / contain; }
-#back .eye-shine { background: url(uback/eyes.png) 0 0 / contain; }
-
-
-#buttons {
-  margin-top: 3rem;
-  display: flex; gap: 20px;
-  z-index: -1;
-}
-
-button {
-  --fg: var(--c-hue);
-  --bg: var(--hue);
-  font: 700 25pt var(--font);
-  flex: 30%;
-  background: oklch(0.5 0.2 var(--bg));
-  color: oklch(0.95 0.075 var(--fg));
-  border: 3px solid oklch(0.2 0.05 var(--bg));
-  padding: 0.2em 0.5em;
-  box-shadow: 6px 6px 2px oklch(0.4 0.2 var(--bg) / 0.45);
-  transition:
-    color 0.4s ease,
-    background 0.4s ease,
-    border 0.4s ease,
-    translate 0.025s ease-in,
-    box-shadow 0.025s ease-in;
-
-  :root:not([data-running]) &:active,
-  [data-running=swap]       &#swap,
-  [data-running=reroll]     &#reroll {
-    translate: 6px 6px;
-    box-shadow: none;
-  }
-}
-
-nav {
-  position: absolute;
-  bottom: 15px; left: 22px;
-}
-
-nav a {
-  color: oklch(0.4 0.15 var(--c-hue));
-  text-decoration: 3px solid underline;
-  text-decoration-color:
-    oklch(0.6 0.1 var(--c-hue));
-}
-
-@media (prefers-color-scheme: dark) {
-  nav a { color: oklch(0.9 0.19 var(--c-hue)); }
-}
diff --git a/rainbow-quox/style/3px-tile.png b/rainbow-quox/style/3px-tile.png
new file mode 100644
index 0000000..8acbe8c
--- /dev/null
+++ b/rainbow-quox/style/3px-tile.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8dc7cd84f755aa0d799d5f9b51383329b699d09a66cd274fa3527cfc398e1bcc
+size 5898
diff --git a/rainbow-quox/style/groovepaper.dark.png b/rainbow-quox/style/groovepaper.dark.png
new file mode 100644
index 0000000..1e73900
--- /dev/null
+++ b/rainbow-quox/style/groovepaper.dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5494b4cf3fb6fd035fe82caf38283d1f6a8f932c84e1c9e9ff08635514af6cf0
+size 61201
diff --git a/rainbow-quox/style/groovepaper.png b/rainbow-quox/style/groovepaper.png
new file mode 100644
index 0000000..f334520
--- /dev/null
+++ b/rainbow-quox/style/groovepaper.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eb51825f76616c381250a05993c2124152f1c5af467c2d9c43360cb963d23038
+size 59534
diff --git a/rainbow-quox/style/palette.scss b/rainbow-quox/style/palette.scss
new file mode 100644
index 0000000..087d7dd
--- /dev/null
+++ b/rainbow-quox/style/palette.scss
@@ -0,0 +1,34 @@
+@import url(../../fonts/muller/muller.css);
+@import url(../../fonts/pragmatapro/pragmatapro.css);
+
+:root {
+  --hue:   300;
+  --c-hue: calc(var(--hue) + 180);
+  --col:   oklch(0.8 0.04 var(--hue));
+  color-scheme: light dark;
+
+  font-family: 'Muller', sans-serif;
+  text-anchor: end;
+}
+
+.swatch, .text-bg {
+  transition:   fill 0.2s ease;
+  fill:         var(--col);
+  stroke:       oklch(from var(--col) 0.15 0.15 h);
+  stroke-width: 2;
+}
+
+.light :is(text, use) { fill: oklch(from var(--col) 0.96 0.05 calc(h + 180)); }
+.dark  :is(text, use) { fill: oklch(from var(--col) 0.18 0.2  calc(h + 180)); }
+
+.name {
+  font-weight: 700;
+  font-size:   25px;
+}
+
+.hex {
+  font-family: monospace;
+  font-weight: 500;
+  font-size:   15px;
+}
+
diff --git a/rainbow-quox/style/style.scss b/rainbow-quox/style/style.scss
new file mode 100644
index 0000000..4a16007
--- /dev/null
+++ b/rainbow-quox/style/style.scss
@@ -0,0 +1,336 @@
+@use 'sass:math';
+@import url(../../fonts/muller/muller.css);
+
+@keyframes swap1 {
+  0%   { transform: none; }
+  49%  { transform: translateX(-150vw); }
+  50%  { content-visibility: hidden; }
+  100% { content-visibility: hidden; transform: none; }
+}
+
+@keyframes swap2 {
+  0%   { content-visibility: hidden; transform: translateX(150vw); }
+  49%  { content-visibility: visible; opacity: 1; }
+  100% { transform: none; opacity: 1; }
+}
+
+@keyframes fade-in {
+  from { opacity: 0 }
+  to   { opacity: 1 }
+}
+
+
+// https://oakreef.ie/transy :)
+$transy-default: 250ms;
+@mixin transy($prop: transform, $duration: $transy-default) {
+  transition: $prop $duration cubic-bezier(.47,.74,.61,1.2);
+}
+
+@mixin shadow {
+  filter: drop-shadow(6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45));
+  @media (prefers-color-scheme: dark) {
+    filter: drop-shadow(6px 6px 0 oklch(0.1 0.125 var(--hue) / 0.45));
+  }
+}
+
+$box-texture: url(3px-tile.png);
+$box-bg: oklch(0.3 0.2 var(--hue));
+$box-fg: oklch(0.95 0.075 var(--c-hue));
+
+$button-bg: oklch(0.5 0.25 var(--hue));
+$button-fg: oklch(0.98 0.1 var(--c-hue));
+
+@mixin box($font-scale: 1, $button: false) {
+  @include shadow;
+  // respecify font family for <button>
+  font:       700 (20pt * $font-scale) var(--font);
+  padding:    0.2rem 0.5rem;
+  @if $button {
+    background: $box-texture, $button-bg;
+    color:      $button-fg;
+  } @else {
+    background: $box-texture, $box-bg;
+    color:      $box-fg;
+  }
+  background-blend-mode: hard-light;
+  border: 3px solid oklch(0.2 0.05 var(--hue));
+}
+
+@mixin image-button {
+  @include box($button: true);
+  padding: 5px;
+  border: 2px solid $button-fg;
+  > * { display: block; }
+}
+
+@mixin button-arrow {
+  &::before {
+    content: '';
+    display: inline-block;
+    height: 1.25ex; aspect-ratio: 2/3;
+    background:
+      conic-gradient(from -124deg at 100% 50%,
+        currentcolor, currentcolor 68deg, transparent 68deg);
+  }
+}
+
+@layer base, layering, come-in;
+
+@layer base {
+  * { box-sizing: border-box; }
+
+  :root {
+    --hue: 300;
+    --c-hue: calc(180 + var(--hue));
+
+    --font: Muller, sans-serif;
+    font-family: var(--font);
+
+    @function bg($lcs, $img) {
+      $lg: to bottom in oklch;
+      @each $l, $c in $lcs { $lg: $lg, oklch($l $c var(--hue)); }
+      @return url(#{$img}), linear-gradient($lg);
+    }
+
+    background: bg([0.9 0.08, 0.7 0.1], 'groovepaper.png');
+    background-blend-mode: screen;
+
+    color-scheme: light dark;
+    @media (prefers-color-scheme: dark) {
+      background: bg([0.3 0.08, 0.2 0.09], 'groovepaper.dark.png');
+      background-blend-mode: multiply;
+    }
+  }
+
+  body {
+    min-height: 100vh;
+    min-height: 100lvh;
+    padding: 1em;
+    margin: 0;
+
+    display: flex;
+    flex-flow: column;
+    justify-content: space-between;
+  }
+
+  button { cursor: pointer; }
+
+  #pic-holder, #main, #aux {
+    width: 1000px;
+    // margin: auto;
+    aspect-ratio: 2000/1346;
+  }
+
+  #pic-holder {
+    position: relative;
+    margin: 6em auto 0 auto;
+  }
+  #main, #aux { position: absolute; inset: 0; }
+
+  #aux {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  #buttons { position: fixed;    top:    -60px; left: -20px; }
+  #reroll  { position: absolute; bottom: 0;     left: 0; }
+  #swap    { position: absolute; bottom: 0;     left: 2.5em; }
+  #hideui  { position: absolute; bottom: 0;     left: 5em; }
+
+  #buttons button {
+    @include box($button: true);
+    @include button-arrow;
+    &::before { margin-right: 0.5ex; }
+    width: calc(6em + 1.5ex + 100px);
+    text-align: left;
+
+    $rotate: rotate(-60deg);
+    transform: $rotate;
+    transform-origin: center right;
+
+    @media not (prefers-reduced-motion: reduce) {
+      :root:not([data-running]) &:active,
+      [data-running=swap]       &#swap,
+      [data-running=reroll]     &#reroll {
+        transform: $rotate translateX(-1.5em);
+      }
+    }
+  }
+
+  #showui { @include image-button; }
+
+  #back, #showui {
+    @include shadow;
+    position: fixed; top: 22px; left: 22px;
+  }
+  #showui { transform: translateX(-200%); }
+
+  #palette-bar {
+    margin: -60px auto 0;
+    position: relative;
+  }
+  #palette-holder {
+    padding-top: 25px;
+    overflow-y: hidden;
+  }
+  #palette { @include shadow; }
+  #download-button {
+    @include image-button;
+    position: absolute;
+    bottom: 100%;
+    right: 20px;
+  }
+
+
+  @mixin history-flex {
+    display:     flex;
+    flex-flow:   column;
+    align-items: end;
+    gap:         3px;
+  }
+  @mixin history-box($font-scale: 1, $button: false) {
+    @include box($font-scale, $button);
+    border-right: none;
+    width: 100%;
+    padding-right: 1em;
+  }
+
+  #history {
+    $width: 24em;
+    width: $width;
+    position: fixed; top: 3rem; right: -1rem;
+    @include history-flex;
+  }
+  #current {
+    @include history-box;
+    position: absolute;
+    top: 0; left: 0;
+    display: grid;
+    grid-template: "a c" "b c" / auto min-content;
+    gap: 0 15px;
+    align-items: start;
+  }
+  #current-hello {
+    grid-area: a;
+    font-size: 75%;
+  }
+  #current-name {
+    grid-area: b;
+    max-width: 16em;
+    word-break: break-word;
+    &::spelling-error { text-decoration: none; }
+  }
+  #history-button {
+    @include image-button;
+    grid-area: c;
+  }
+  :is(#current-name, .history-item) img { max-width: 50%; }
+
+  #close-history {
+    @include box(0.8, $button: true);
+    margin: 0; height: 1lh; width: 1lh;
+    position: absolute; top: 0; left: calc(-1lh);
+    img {
+      position: absolute;
+      inset: 0; width: 100%; height: 100%;
+      object-position: center;
+    }
+  }
+
+  #history-items {
+    $bottom-fade-size: 3lh;
+    $top-fade-size: math.div($bottom-fade-size, 2);
+    @include history-flex;
+    position: absolute;
+    top: -$top-fade-size; left: 0;
+    width: 100%;
+    pointer-events: none;
+    height: 65vh;
+    overflow: hidden auto;
+    padding: $top-fade-size 0 $bottom-fade-size;
+    mask: linear-gradient(to bottom,
+      transparent, black $top-fade-size,
+      black calc(100% - $bottom-fade-size), transparent);
+  }
+  .history-item {
+    @include history-box(0.8, $button: true);
+    @include button-arrow;
+    display:      flex;
+    gap:          5px;
+    align-items:  center;
+  }
+  .history-colors {
+    height: 0.8em;
+    flex:   none;
+  }
+  .history-name {
+    width: 100%;
+    padding-right: 2rem;
+    text-align:  left;
+    white-space: nowrap;
+    overflow:    hidden;
+  }
+  .history-item, #close-history { transform: translateX(25em); }
+  #history-close-target {
+    position: absolute;
+    inset: 0 0 0 0;
+  }
+}
+
+
+@layer layering {
+  #main { z-index: 0; }
+  #aux { z-index: 1; }
+  #buttons, #palette-holder, #back, #showui { z-index: 2; }
+  #history-close-target { z-index: 3; }
+  #history { z-index: 4; }
+}
+
+
+@layer come-in {
+  @media not (prefers-reduced-motion: reduce) {
+    #buttons button, #current, #palette, #back, #showui, .history-item {
+      @include transy;
+    }
+
+    #current { @include transy(all); }
+    #close-history { @include transy; }
+    #download-button { @include transy(opacity); }
+  }
+
+  [data-state=fullquox], [data-state=loading] {
+    #buttons button  { transform: none;             }
+    #current         { transform: translateX(100%); }
+    #palette         { transform: translateY(125%); }
+    #download-button { opacity: 0; }
+    #back            { transform: translateX(-200%); }
+  }
+
+  [data-state=fullquox] {
+    #showui { transform: none; }
+  }
+
+  [data-state=history] {
+    #history-items { pointer-events: auto; }
+    #close-history { pointer-events: auto; transform: none; }
+
+    #current { opacity: 0; }
+
+    @for $i from 0 through 6 {
+      .history-item:nth-child(#{$i}) {
+        transform: translateX(3% * $i); }
+    }
+    .history-item:nth-child(n+7) { transform: translateX(3% * 7); }
+  }
+
+  @media not (prefers-reduced-motion: reduce) {
+    @for $i from 2 through 6 {
+      .history-item:nth-child(#{$i}) {
+        transition-delay: ($i - 1) * 40ms;
+      }
+    }
+    .history-item:nth-child(n+7) {
+      transition-delay: 240ms;
+    }
+  }
+}
diff --git a/style/base.css b/style/base.css
index 7381d1b..8711df0 100644
--- a/style/base.css
+++ b/style/base.css
@@ -206,20 +206,20 @@ strong { font-weight: 700; }
 
 /* extra #cube selector for specificity */
 #cube #hello {
-  --bg-image: url(../media/wave.png);
+  --bg-image: url(../media/wave.webp);
   background:
     var(--bg-image) bottom right / auto 60% no-repeat,
     var(--base-background);
 }
 
 @media (prefers-color-scheme: dark) {
-  #cube #hello { --bg-image: url(../media/wave-neon.png); }
+  #cube #hello { --bg-image: url(../media/wave-neon.webp); }
 }
 @media (prefers-reduced-data: reduce) {
-  #cube #hello { --bg-image: url(../media/wave.webp); }
+  #cube #hello { --bg-image: url(../media/wave.l.webp); }
 }
 @media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
-  #cube #hello { --bg-image: url(../media/wave-neon.webp); }
+  #cube #hello { --bg-image: url(../media/wave-neon.l.webp); }
 }
 
 #id, #id ::selection, #flags img {
@@ -252,17 +252,18 @@ strong { font-weight: 700; }
 #flags img {
   height: 2em;
   border: 2px solid hsl(var(--hue) 30% 5% / 60%);
+  rotate: 8deg;
 }
 
 
 #activities, #activities ::selection {
-  --hue: 60deg;
+  --hue: 90deg;
   --bg-angle: -60deg;
 }
 
 #cube #activities {
-  /* height of quobl.png is 58% of width */
-  --bg-image: url(../media/quobl.png);
+  /* height of quobl.webp is 58% of width */
+  --bg-image: url(../media/quobl.webp);
   background:
     var(--bg-image) bottom left 2ex / 50% auto no-repeat local,
     var(--base-background);
@@ -270,13 +271,13 @@ strong { font-weight: 700; }
 }
 
 @media (prefers-color-scheme: dark) {
-  #cube #activities { --bg-image: url(../media/quobl-neon.png); }
+  #cube #activities { --bg-image: url(../media/quobl-neon.webp); }
 }
 @media (prefers-reduced-data: reduce) {
-  #cube #activities { --bg-image: url(../media/quobl.webp); }
+  #cube #activities { --bg-image: url(../media/quobl.l.webp); }
 }
 @media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
-  #cube #activities { --bg-image: url(../media/quobl-neon.png); }
+  #cube #activities { --bg-image: url(../media/quobl-neon.webp); }
 }
 
 #links, #links ::selection {
@@ -316,7 +317,7 @@ strong { font-weight: 700; }
 #links a:hover { text-decoration: none; }
 
 #links #gallery {
-  --icon: url(../media/favicon.png);
+  --icon: url(../media/favicon.webp);
   --fg:   hsl(280deg 38% 43%);
   --bg:   hsl(100deg 99% 81%);
   image-rendering: pixelated;
@@ -330,7 +331,7 @@ strong { font-weight: 700; }
 }
 
 #links #blog {
-  --icon: url(../media/icons/blog.png);
+  --icon: url(../media/icons/blog.webp);
   --fg: #ffeebb;
   --bg: #332255;
   /* image-rendering: pixelated; */
@@ -353,14 +354,14 @@ strong { font-weight: 700; }
 }
 
 #links #fa {
-  --icon: url(../media/icons/furaffinity.png);
+  --icon: url(../media/icons/furaffinity.webp);
   --icon-bg: #20242a;
   --bg:      #353b45;
   --fg:      white;
 }
 
 #links #da {
-  --icon: url(../media/icons/deviantart.png);
+  --icon: url(../media/icons/deviantart.webp);
   --icon-bg: #000608;
   --bg: #314537;
   --fg: #e7ede4;
@@ -374,14 +375,14 @@ strong { font-weight: 700; }
 }
 
 #links #artfight {
-  --icon: url(../media/icons/artfight.png);
+  --icon: url(../media/icons/artfight.webp);
   --icon-bg: #222222;
   --bg: #a65178;
   --fg: white;
 }
 
 #links #chitter {
-  --icon: url(../media/icons/chitter.png);
+  --icon: url(../media/icons/chitter.webp);
   --bg: #582c58;
   --icon-bg: #2c162c;
   --fg: white;
@@ -490,6 +491,7 @@ strong { font-weight: 700; }
 #friends #konsti a { background: #060038; color: #ffcccc; }
 #friends #lena   a { background: #e3ccf7; color: #000000; }
 #friends #serena a { background: #e787ad; color: #204; }
+#friends #deneb  a { background: #540f00; color: #ee6bfa; }
 
 #nissbuttons {
   margin: 2em auto 0;
@@ -514,7 +516,7 @@ strong { font-weight: 700; }
 }
 
 #cube #six {
-  --bg-image: url(../media/kesi.png);
+  --bg-image: url(../media/kesi.webp);
   background:
     var(--bg-image) bottom right / 100% auto no-repeat,
     var(--base-background);
@@ -531,11 +533,11 @@ strong { font-weight: 700; }
 }
 
 @media (prefers-color-scheme: dark) {
-  #cube #six { --bg-image: url(../media/kesi-neon.png); }
+  #cube #six { --bg-image: url(../media/kesi-neon.webp); }
 }
 @media (prefers-reduced-data: reduce) {
-  #cube #activities { --bg-image: url(../media/kesi.webp); }
+  #cube #activities { --bg-image: url(../media/kesi.l.webp); }
 }
 @media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
-  #cube #activities { --bg-image: url(../media/kesi-neon.webp); }
+  #cube #activities { --bg-image: url(../media/kesi-neon.l.webp); }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 309f42d..8778022 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,7 @@
     "strict": true,
     "noUncheckedIndexedAccess": true,
     "noEmitOnError": true,
-    "lib": ["ES2021", "dom"],
-    "target": "ES2015"
+    "lib": ["ES2023", "dom"],
+    "target": "ES2022"
   }
 }