/* Spooky - GENERATED by Claude Code\castle-look\make-themes.ps1 (sync-lookmenu.cmd runs it). Edit the sources, not this:
   1. the Spooky kit: castle-look\themes\spooky\spooky-kit.css (make-castle-kit.ps1 -Theme spooky, from kit.src.css and art.txt);
   2. this site's Castle rules (its Castle look below the kit), rescoped from html[data-look="castle"] to html[data-look="spooky"],
      so Spooky lays out exactly as Castle does;
   3. castle-look\themes\spooky\sites\home.css: Spooky's own words and touches for this site. */
/* GENERATED by castle-look\make-castle-kit.ps1 -Theme spooky from themes\spooky\kit.src.css, font.txt and themes\spooky\art.txt - edit those, not this. */
/* ==== The Spooky kit: the top of every Frizzy G site's Spooky look ====
   Castle's 16-bit structure for Halloween: a violet night with a harvest moon, crooked crypt stone
   with pumpkin-glow rivets, a jack-o'-lantern on a stake either side of the title (instead of the
   torches), a graveyard and a crooked old house on the horizon, leaves falling, and now and then a
   swarm of bats or a ghost going over (spooky.js). Same --ck-* names as the Castle kit, so a site's
   Castle rules wear it unchanged (make-themes.ps1 rescopes them); same font, same pixel discipline:
   Castle Pixel at 10, 20, 30, 40px; art scaled by whole numbers; no radius, no blur. */

@font-face {
  font-family: "Castle Pixel";
  src: url(data:font/ttf;base64,AAEAAAAKAIAAAwAgT1MvMmrP+m8AAACsAAAAYGNtYXDRLdbFAAABDAAAAMRnbHlmrDZLRQAAAdAAACAIaGVhZC+WSdgAACHYAAAANmhoZWEGpgOWAAAiEAAAACRobXR49hgAZAAAIjQAAAHUbG9jYQAHj5gAACQIAAAB2G1heHAAgQAuAAAl4AAAACBuYW1lENEo9QAAJgAAAAD4cG9zdP+fAGQAACb4AAAAIAAEAhoBkAAFAAACigJYAAAASwKKAlgAAAFeAGQBLAAAAAAAAAAAAAAAAIAAAAMAAAAiAAAAAAAAAABGUlpHAMAAICcVA4T/OAAAA4QAyAAAAAEAAAAAAfQCvAAAACAAAQAAAAIAAAADAAAAFAADAAEAAAAUAAQAsAAAACgAIAAEAAgAfgCgAKMAsAC3ANcA6SAUIBkgHSAiICYgrCGQIZIiEiW2JxMnFf//AAAAIACgAKMAsAC3ANcA6SATIBggHCAiICYgrCGQIZIiEiW2JxMnFf///+H/wP++/7L/rP+N/3zgU+BQ4E7gSuBH38Le397e3l/avNlg2V8AAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAB9AK8AAMABwALAA8AABE1IRUBETMRIREzEQU1IRUB9P4MZAEsZP4MAfQCWGRk/gwB9P4MAfT+DGRkZAAAAAACAAAAAABkArwAAwAHAAA1ETMRBzUzFWRkZMgB9P4MyGRkAAACAAAB9AEsArwAAwAHAAARNTMVMzUzFWRkZAH0yMjIyAAAAAAIAAAAAAH0ArwAAwAHAAsADwATABcAGwAfAAATNTMVMzUzFQU1IRUFNTMVMzUzFQU1IRUFNTMVMzUzFWRkZGT+cAH0/nBkZGT+cAH0/nBkZGQB9MjIyMhkZGRkZGRkZGRkZMjIyMjIAAkAAAAAAfQCvAADAAcACwAPABMAFwAbAB8AIwAAEzUzFQc1IRUFNTMVMzUzFQc1IRUHNTMVMzUzFQU1IRUHNTMVyGTIAZD+DGRkZMgBLMhkZGT+DAGQyGQCWGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZAAABwAAAAAB9AK8AAMABwALAA8AEwAXABsAABE1MxUzNTMVBzUzFQc1MxUHNTMVBzUzFTM1MxXIyGTIZMhkyGTIZMjIAfTIyMjIZGRkZGRkZGRkyMjIyMgAAAsAAAAAAfQCvAADAAcACwAPABMAFwAbAB8AIwAnACsAABM1MxUFNTMVNzUzFQc1MxUHNTMVBzUzFTc1MxUzNTMVBzUzFQU1MxUzNTMVZMj+1GTIZMhkyGTIZGRkZGTIZP7UyGRkAlhkZMjIyGRkZGRkZGRkZMjIyGRkZGRkZGRkZGRkZGQAAAABAAAB9ABkArwAAwAAETUzFWQB9MjIAAAFAAAAAAEsArwAAwAHAAsADwATAAATNTMVBzUzFQMRMxEVNTMVFTUzFchkyGTIZGRkAlhkZGRkZP7UASz+1GRkZGRkZAAAAAAFAAAAAAEsArwAAwAHAAsADwATAAARNTMVFTUzFRERMxEHNTMVBzUzFWRkZMhkyGQCWGRkZGRk/tQBLP7UZGRkZGRkAAcAAABkAfQCWAADAAcACwAPABMAFwAbAAATNTMVITUzFSE1MxUFNSEVBTUzFRc1MxU3NTMVyGT+1GQBLGT+cAEs/nBkZGRkZAGQyMhkZGRkZGRkZGRkZMjIZGRkAAAAAAMAAABkAfQCWAADAAcACwAAEzUzFQU1IRUFNTMVyGT+1AH0/tRkAZDIyGRkZMjIyAAAAAACAAD/nADIAMgAAwAHAAAzNTMVBzUzFWRkyGTIyGRkZAAAAAABAAABLAGQAZAAAwAAETUhFQGQASxkZAABAAAAAABkAGQAAwAAMTUzFWRkZAAAAAAFAAAAAAH0ArwAAwAHAAsADwATAAABNTMVBzUzFQc1MxUHNTMVBzUzFQGQZMhkyGTIZMhkAfTIyGRkZGRkZGRkZMjIyAAAAAAJAAAAAAH0ArwAAwAHAAsADwATABcAGwAfACMAABM1IRUBETMRJTUzFQc1MxUFNTMVFxEzESU1MxUHNTMVFTUhFWQBLP5wZAEsZMjI/tRkZGT+DMjIZAEsAlhkZP7UASz+1MhkZGRkZGRkZMgBLP7UZGRkZGRkZGRkAAAABABkAAABkAK8AAMABwALAA8AABM1MxUHNTMVAxEzEQc1IRXIZMjIZGTIASwCWGRkZGRk/nABkP5wZGRkAAAAAAcAAAAAAfQCvAADAAcACwAPABMAFwAbAAATNSEVBTUzFQU1MxUHNTMVBzUzFQc1MxUHNSEVZAEs/nBkASxkyGTIZMhkyAH0AlhkZGRkZGTIyGRkZGRkZGRkZGRkZAAAAAcAAAAAAfQCvAADAAcACwAPABMAFwAbAAATNSEVBTUzFQU1MxUFNTMVFTUzFSE1MxUVNSEVZAEs/nBkASxk/tTIZP4MZAEsAlhkZGRkZGTIyGRkZMjIyGRkZGRkAAAAAAcAAAAAAfQCvAADAAcACwAPABMAFwAbAAABNTMVBzUzFQU1MxUXNTMVITUzFQc1IRUHNTMVASxkyMj+1GRkZP5wZGQB9MhkAlhkZGRkZGRkZGTIyGRkZGRkyMjIAAAAAAYAAAAAAfQCvAADAAcACwAPABMAFwAAETUhFQU1MxUHNSEVEREzESE1MxUVNSEVAfT+DGRkAZBk/gxkASwCWGRkZGRkZGRk/tQBLP7UZGRkZGQAAAcAAAAAAfQCvAADAAcACwAPABMAFwAbAAATNTMVBTUzFQc1MxUHNSEVBTUzFSE1MxUFNSEVyMj+1GTIZGQBkP5wZAEsZP5wASwCWGRkZGRkZGRkZGRkyMjIyMhkZGQAAAUAAAAAAfQCvAADAAcACwAPABMAABE1IRUHNTMVBzUzFQc1MxUDETMRAfRkZMhkyGTIZAJYZGRkZGRkZGRkZGT+1AEs/tQAAAcAAAAAAfQCvAADAAcACwAPABMAFwAbAAATNSEVBTUzFSE1MxUFNSEVBTUzFSE1MxUFNSEVZAEs/nBkASxk/nABLP5wZAEsZP5wASwCWGRkyMjIyMhkZGTIyMjIyGRkZAAAAAAHAAAAAAH0ArwAAwAHAAsADwATABcAGwAAEzUhFQU1MxUhNTMVBTUhFQc1MxUHNTMVBTUzFWQBLP5wZAEsZP5wAZBkZMhk/tTIAlhkZMjIyMjIZGRkZGRkZGRkZGRkAAACAAAAZABkAfQAAwAHAAARNTMVAzUzFWRkZAGQZGT+1GRkAAADAAD/nADIAfQAAwAHAAsAABM1MxUDNTMVBzUzFWRkZGTIZAGQZGT+cMjIZGRkAAAHAAAAAAGQArwAAwAHAAsADwATABcAGwAAATUzFQc1MxUHNTMVBzUzFRU1MxUVNTMVFTUzFQEsZMhkyGTIZGRkZAJYZGRkZGRkZGRkZGRkZGRkZGRkZGQAAgAAAMgBkAH0AAMABwAAETUhFQU1IRUBkP5wAZABkGRkyGRkAAAAAAcAAAAAAZACvAADAAcACwAPABMAFwAbAAARNTMVFTUzFRU1MxUVNTMVBzUzFQc1MxUHNTMVZGRkZMhkyGTIZAJYZGRkZGRkZGRkZGRkZGRkZGRkZGQAAAAGAAAAAAH0ArwAAwAHAAsADwATABcAABM1IRUFNTMVBTUzFQc1MxUHNTMVBzUzFWQBLP5wZAEsZMhkyGRkZAJYZGRkZGRkyMhkZGRkZGTIZGQAAAAIAAAAAAH0ArwAAwAHAAsADwATABcAGwAfAAATNSEVAREzEQE1MxUFNSEVBTUzFTM1MxUFNSEVBTUhFWQBLP5wZAEsZP7UASz+1GRkZP7UASz+cAGQAlhkZP4MAfT+DAGQZGRkZGRkZGRkZGRkZMhkZAAAAAYAAAAAAfQCvAADAAcACwAPABMAFwAAEzUhFQU1MxUhNTMVBTUhFQERMxEhETMRZAEs/nBkASxk/gwB9P4MZAEsZAJYZGTIyMjIyGRkZP7UASz+1AEs/tQAAAAABwAAAAAB9AK8AAMABwALAA8AEwAXABsAABE1IRUFNTMVITUzFQU1IRUFNTMVITUzFQU1IRUBkP5wZAEsZP4MAZD+cGQBLGT+DAGQAlhkZMjIyMjIZGRkyMjIyMhkZGQABQAAAAAB9AK8AAMABwALAA8AEwAAEzUhFQERMxEBNTMVAzUzFQU1IRVkASz+cGQBLGRkZP5wASwCWGRk/gwB9P4MAZBkZP5wZGRkZGQAAAAEAAAAAAH0ArwAAwAHAAsADwAAETUhFQERMxEhETMRBTUhFQGQ/nBkASxk/gwBkAJYZGT+DAH0/gwB9P4MZGRkAAAAAAUAAAAAAfQCvAADAAcACwAPABMAABE1IRUFNTMVBzUhFQU1MxUHNSEVAfT+DGRkAZD+cGRkAfQCWGRkyMjIZGRkyMjIZGRkAAQAAAAAAfQCvAADAAcACwAPAAARNSEVBTUzFQc1IRUBETMRAfT+DGRkAZD+cGQCWGRkyMjIZGRk/tQBLP7UAAAGAAAAAAH0ArwAAwAHAAsADwATABcAABM1IRUBETMRATUzFQU1IRUHNTMVBTUhFWQBLP5wZAEsZP7UASxkZP5wAZACWGRk/gwB9P4MAZBkZMhkZMjIyGRkZAAAAAUAAAAAAfQCvAADAAcACwAPABMAABERMxEhETMRBTUhFQERMxEhETMRZAEsZP4MAfT+DGQBLGQBkAEs/tQBLP7UZGRk/tQBLP7UASz+1AAAAwAAAAABLAK8AAMABwALAAARNSEVAxEzEQc1IRUBLMhkyAEsAlhkZP4MAfT+DGRkZAAAAAMAAAAAAZACvAADAAcACwAAJREzESE1MxUVNTMVASxk/nBkyGQCWP2oyMhkZGQAAAkAAAAAAfQCvAADAAcACwAPABMAFwAbAB8AIwAAEREzESU1MxUHNTMVBzUzFQU1MxUDETMRNzUzFRU1MxUVNTMVZAEsZMhkyGT+1MjIZGRkZGQBkAEs/tTIZGRkZGRkZGRkZGT+1AEs/tTIZGRkZGRkZGQAAgAAAAABkAK8AAMABwAANREzEQc1IRVkZAGQZAJY/ahkZGQABwAAAAAB9AK8AAMABwALAA8AEwAXABsAABE1MxUhNTMVBTUzFTM1MxUBETMREzUzFRMRMxFkASxk/gzIZMj+DGRkZGRkAlhkZGRkZGRkZGT+DAH0/gwBLMjI/tQB9P4MAAAAAAcAAAAAAfQCvAADAAcACwAPABMAFwAbAAARNTMVBREzESU1MxUDETMREzUzFRU1MxUDETMRZAEsZP4MyMhkZGTIZGQCWGRkyAEs/tRkZGT+DAH0/gwBkGRkZGRk/tQBLP7UAAAEAAAAAAH0ArwAAwAHAAsADwAAEzUhFQERMxEhETMRBTUhFWQBLP5wZAEsZP5wASwCWGRk/gwB9P4MAfT+DGRkZAAAAAUAAAAAAfQCvAADAAcACwAPABMAABE1IRUFNTMVITUzFQU1IRUBETMRAZD+cGQBLGT+DAGQ/nBkAlhkZMjIyMjIZGRk/tQBLP7UAAAHAAAAAAH0ArwAAwAHAAsADwATABcAGwAAEzUhFQERMxElETMRITUzFRU1MxUFNTMVMzUzFWQBLP5wZAEsZP7UZGT+1MhkZAJYZGT+DAH0/gxkAZD+cGRkZGRkZGRkZGQAAAAACAAAAAAB9AK8AAMABwALAA8AEwAXABsAHwAAETUhFQU1MxUhNTMVBTUhFQERMxE3NTMVFTUzFRU1MxUBkP5wZAEsZP4MAZD+cGRkZGRkAlhkZMjIyMjIZGRk/tQBLP7UyGRkZGRkZGRkAAAABQAAAAAB9AK8AAMABwALAA8AEwAAEzUhFQU1MxUVNSEVFTUzFQU1IRVkAZD+DGQBLGT+DAGQAlhkZMjIyGRkZMjIyGRkZAAAAgAAAAAB9AK8AAMABwAAETUhFQERMxEB9P7UZAJYZGT9qAJY/agAAAMAAAAAAfQCvAADAAcACwAANREzESERMxEFNSEVZAEsZP5wASxkAlj9qAJY/ahkZGQAAAAFAAAAAAH0ArwAAwAHAAsADwATAAA1ETMRIREzEQU1MxUzNTMVBzUzFWQBLGT+cGRkZMhkyAH0/gwB9P4MZGRkZGRkZGQAAAAHAAAAAAH0ArwAAwAHAAsADwATABcAGwAANREzESERMxEhNTMVBTUzFTM1MxUFNTMVITUzFWQBLGT+1GT+1MhkyP4MZAEsZMgB9P4MAfT+DMjIZGRkZGRkZGRkZAAAAAAJAAAAAAH0ArwAAwAHAAsADwATABcAGwAfACMAABE1MxUhNTMVBTUzFTM1MxUHNTMVBzUzFTM1MxUFNTMVITUzFWQBLGT+cGRkZMhkyGRkZP5wZAEsZAH0yMjIyGRkZGRkZGRkZGRkZGTIyMjIyAAABQAAAAAB9AK8AAMABwALAA8AEwAAETUzFSE1MxUFNTMVMzUzFQMRMxFkASxk/nBkZGTIZAH0yMjIyGRkZGRk/nABkP5wAAAABwAAAAAB9AK8AAMABwALAA8AEwAXABsAABE1IRUHNTMVBzUzFQc1MxUHNTMVBzUzFQc1IRUB9GRkyGTIZMhkyGRkAfQCWGRkZGRkZGRkZGRkZGRkZGRkZGRkAAADAAAAAAEsArwAAwAHAAsAABE1IRUBETMRBzUhFQEs/tRkZAEsAlhkZP4MAfT+DGRkZAAABQAAAAAB9AK8AAMABwALAA8AEwAAETUzFRU1MxUVNTMVFTUzFRU1MxVkZGRkZAH0yMhkZGRkZGRkZGTIyMgAAAMAAAAAASwCvAADAAcACwAAETUhFQMRMxEFNSEVASxkZP7UASwCWGRk/gwB9P4MZGRkAAAFAAABkAH0ArwAAwAHAAsADwATAAATNTMVBzUzFTM1MxUFNTMVITUzFchkyGRkZP5wZAEsZAJYZGRkZGRkZGRkZGRkAAEAAP+cAfQAAAADAAAVNSEVAfRkZGQAAAIAAAH0AMgCvAADAAcAABE1MxUVNTMVZGQCWGRkZGRkAAAAAAYAAAAAAfQB9AADAAcACwAPABMAFwAAEzUhFRU1MxUFNSEVBTUzFSE1MxUFNSEVZAEsZP5wAZD+DGQBLGT+cAGQAZBkZGRkZGRkZGRkZGRkZGRkAAUAAAAAAfQCvAADAAcACwAPABMAABE1MxUHNSEVAREzESERMxEFNSEVZGQBkP5wZAEsZP4MAZAB9MjIZGRk/tQBLP7UASz+1GRkZAADAAAAAAGQAfQAAwAHAAsAABM1IRUBETMRFTUhFWQBLP5wZAEsAZBkZP7UASz+1GRkZAAABQAAAAAB9AK8AAMABwALAA8AEwAAATUzFQU1IRUBETMRIREzEQU1IRUBkGT+cAGQ/gxkASxk/nABkAH0yMhkZGT+1AEs/tQBLP7UZGRkAAAGAAAAAAH0AfQAAwAHAAsADwATABcAABM1IRUFNTMVITUzFQU1IRUFNTMVFTUhFWQBLP5wZAEsZP4MAfT+DGQBLAGQZGRkZGRkZGRkZGRkZGRkZAAEAAAAAAGQArwAAwAHAAsADwAAEzUzFQU1MxUHNSEVAREzEcjI/tRkyAGQ/tRkAlhkZGRkZGRkZP5wAZD+cAAABgAA/zgB9AH0AAMABwALAA8AEwAXAAATNSEVAREzESERMxEFNSEVBzUzFQU1IRVkAZD+DGQBLGT+cAGQZGT+cAEsAZBkZP7UASz+1AEs/tRkZGRkZGRkZGQAAAAEAAAAAAH0ArwAAwAHAAsADwAAETUzFQc1IRUBETMRIREzEWRkAZD+cGQBLGQB9MjIZGRk/nABkP5wAZD+cAAAAgAAAAAAZAK8AAMABwAAETUzFQMRMxFkZGQCWGRk/agB9P4MAAAAAAMAAP84ASwCvAADAAcACwAAEzUzFQMRMxEFNTMVyGRkZP7UyAJYZGT9RAJY/ahkZGQAAAAHAAAAAAGQArwAAwAHAAsADwATABcAGwAAEREzETc1MxUHNTMVBTUzFQc1MxU3NTMVFTUzFWTIZMhk/tTIyGRkZGQBLAGQ/nBkZGRkZGRkZGTIyMhkZGRkZGQAAAIAAAAAAMgCvAADAAcAADURMxEVNTMVZGRkAlj9qGRkZAAAAAUAAAAAAfQB9AADAAcACwAPABMAABE1MxUzNTMVAREzETMRMxEzETMRyGRk/nBkZGRkZAGQZGRkZP5wAZD+cAGQ/nABkP5wAAMAAAAAAfQB9AADAAcACwAAETUhFQERMxEhETMRAZD+cGQBLGQBkGRk/nABkP5wAZD+cAAEAAAAAAH0AfQAAwAHAAsADwAAEzUhFQERMxEhETMRBTUhFWQBLP5wZAEsZP5wASwBkGRk/tQBLP7UASz+1GRkZAAAAAUAAP84AfQB9AADAAcACwAPABMAABE1IRUBETMRIREzEQU1IRUFNTMVAZD+cGQBLGT+DAGQ/nBkAZBkZP7UASz+1AEs/tRkZGTIyMgAAAAABQAA/zgB9AH0AAMABwALAA8AEwAAEzUhFQERMxEhETMRBTUhFQc1MxVkAZD+DGQBLGT+cAGQZGQBkGRk/tQBLP7UASz+1GRkZMjIyAAAAAAEAAAAAAGQAfQAAwAHAAsADwAAETUzFTM1MxUFNTMVAxEzEWRkyP5wyMhkAZBkZGRkZGRk/tQBLP7UAAAFAAAAAAH0AfQAAwAHAAsADwATAAATNSEVBTUzFRU1IRUVNTMVBTUhFWQBkP4MZAEsZP4MAZABkGRkZGRkZGRkZGRkZGRkAAAEAAAAAAGQArwAAwAHAAsADwAAEzUzFQc1IRUBETMRFTUzFWRkyAGQ/tRkyAH0yMhkZGT+1AEs/tRkZGQAAAAAAwAAAAAB9AH0AAMABwALAAA1ETMRIREzEQU1IRVkASxk/nABkGQBkP5wAZD+cGRkZAAAAAUAAAAAAfQB9AADAAcACwAPABMAADURMxEhETMRBTUzFTM1MxUHNTMVZAEsZP5wZGRkyGTIASz+1AEs/tRkZGRkZGRkZAAAAAUAAAAAAfQB9AADAAcACwAPABMAADURMxEhETMRITUzFQc1MxUzNTMVZAEsZP7UZMhkZGRkAZD+cAGQ/nDIyGRkZGRkAAAAAAkAAAAAAfQB9AADAAcACwAPABMAFwAbAB8AIwAAETUzFSE1MxUFNTMVMzUzFQc1MxUHNTMVMzUzFQU1MxUhNTMVZAEsZP5wZGRkyGTIZGRk/nBkASxkAZBkZGRkZGRkZGRkZGRkZGRkZGRkZGRkAAAFAAD/OAH0AfQAAwAHAAsADwATAAA1ETMRIREzEQU1IRUHNTMVBTUhFWQBLGT+cAGQZGT+cAEsZAGQ/nABkP5wZGRkZGRkZGRkAAAABQAAAAAB9AH0AAMABwALAA8AEwAAETUhFQc1MxUHNTMVBzUzFQc1IRUB9MhkyGTIZMgB9AGQZGRkZGRkZGRkZGRkZGQAAAAABQAAAAABkAK8AAMABwALAA8AEwAAEzUzFQU1MxUHNTMVFTUzFRU1MxXIyP7UZMhkZMgCWGRkyMjIZGRkyMjIZGRkAAABAAD/OABkArwAAwAAFREzEWTIA4T8fAAFAAAAAAGQArwAAwAHAAsADwATAAARNTMVFTUzFRU1MxUHNTMVBTUzFchkZMhk/tTIAlhkZMjIyGRkZMjIyGRkZAAAAAQAAAEsAfQB9AADAAcACwAPAAATNTMVMzUzFQU1MxUzNTMVZMhkZP4MZMhkAZBkZGRkZGRkZGQABgAAAAAB9AK8AAMABwALAA8AEwAXAAATNTMVBTUzFTc1MxUFNSEVBzUzFQc1IRXIyP7UZMhk/gwBLMhkyAH0AlhkZMjIyGRkZMhkZMjIyGRkZAAABAAAAZABLAK8AAMABwALAA8AABM1MxUHNTMVMzUzFQc1MxVkZMhkZGTIZAJYZGRkZGRkZGRkZAABAAABLABkAZAAAwAAETUzFWQBLGRkAAAJAAAAZAH0AlgAAwAHAAsADwATABcAGwAfACMAABE1MxUhNTMVBTUzFTM1MxUHNTMVBzUzFTM1MxUFNTMVITUzFWQBLGT+cGRkZMhkyGRkZP5wZAEsZAH0ZGRkZGRkZGRkZGRkZGRkZGRkZGRkZAAACAAAAAAB9AK8AAMABwALAA8AEwAXABsAHwAAATUzFQc1MxUHNSEVBTUzFSE1MxUFNSEVBTUzFRU1IRUBLGTIZMgBLP5wZAEsZP4MAfT+DGQBLAJYZGRkZGRkZGRkZGRkZGRkZGRkZGRkZAAAAQAAASwB9AGQAAMAABE1IRUB9AEsZGQAAQAAASwDIAGQAAMAABE1IRUDIAEsZGQAAwAAAZAAyAK8AAMABwALAAATNTMVBzUzFQc1MxVkZMhkZMgCWGRkZGRkZGRkAAAAAwAAAZAAyAK8AAMABwALAAARNTMVBzUzFQc1MxXIZGTIZAJYZGRkZGRkZGQAAAAABgAAAZAB9AK8AAMABwALAA8AEwAXAAATNTMVMzUzFQU1MxUzNTMVBTUzFTM1MxVkZMhk/gxkyGT+cMhkyAJYZGRkZGRkZGRkZGRkZGQAAAAGAAABkAH0ArwAAwAHAAsADwATABcAABE1MxUzNTMVBTUzFTM1MxUFNTMVMzUzFchkyP5wZMhk/gxkyGQCWGRkZGRkZGRkZGRkZGRkAAAAAAMAAADIASwB9AADAAcACwAAEzUzFQc1IRUHNTMVZGTIASzIZAGQZGRkZGRkZGQAAAMAAAAAAfQAZAADAAcACwAAMTUzFTM1MxUzNTMVZGRkZGRkZGRkZGQAAAAABwAAAAAB9AK8AAMABwALAA8AEwAXABsAABM1IRUFNTMVBzUhFQU1MxUHNSEVBTUzFRU1IRXIASz+cGTIAZD+1GTIAZD+1GQBLAJYZGRkZGRkZGRkZGRkZGRkZGRkZGQABQAAAGQCvAJYAAMABwALAA8AEwAAEzUzFQc1MxUFNSEVBTUzFQc1MxXIZMjI/tQCvP2oyGRkAfRkZGRkZGRkZGRkZGRkZAAABQAAAGQCvAJYAAMABwALAA8AEwAAATUzFQc1MxUFNSEVBTUzFQc1MxUBkGRkyP2oArz+1MjIZAH0ZGRkZGRkZGRkZGRkZGQAAQAAASwB9AGQAAMAABE1IRUB9AEsZGQABwAAAAABkAK8AAMABwALAA8AEwAXABsAABE1MxUHNTMVBzUhFQU1IRUFNSEVBTUzFQc1MxVkZMjIASz+1AGQ/nABLP7UyMhkAlhkZGRkZGRkZGRkZGRkZGRkZGRkZAAABgAAAGQCvAJYAAMABwALAA8AEwAXAAABNTMVBTUzFQU1MxUzNTMVBTUhFQc1MxUB9Mj+1Mj9qMhkyP5wASzIZAH0ZGRkZGRkZGRkZGRkZGRkZAAACQAAAGQB9AJYAAMABwALAA8AEwAXABsAHwAjAAARNTMVITUzFQU1MxUzNTMVBzUzFQc1MxUzNTMVBTUzFSE1MxVkASxk/nBkZGTIZMhkZGT+cGQBLGQB9GRkZGRkZGRkZGRkZGRkZGRkZGRkZGQAAAEAAAABAABalT9pXw889QALA+gAAAAA5quDgAAAAADmq4OAAAD/OAMgArwAAAAGAAIAAQAAAAAAAQAAA4T/OAAAA4QAAABkAyAAAQAAAAAAAAAAAAAAAAAAAHUCWAAAAZAAAADIAAABkAAAAlgAAAJYAAACWAAAAlgAAADIAAABkAAAAZAAAAJYAAACWAAAASwAAAH0AAAAyAAAAlgAAAJYAAACWABkAlgAAAJYAAACWAAAAlgAAAJYAAACWAAAAlgAAAJYAAAAyAAAASwAAAH0AAAB9AAAAfQAAAJYAAACWAAAAlgAAAJYAAACWAAAAlgAAAJYAAACWAAAAlgAAAJYAAABkAAAAfQAAAJYAAAB9AAAAlgAAAJYAAACWAAAAlgAAAJYAAACWAAAAlgAAAJYAAACWAAAAlgAAAJYAAACWAAAAlgAAAJYAAABkAAAAlgAAAGQAAACWAAAAlgAAAEsAAACWAAAAlgAAAH0AAACWAAAAlgAAAH0AAACWAAAAlgAAADIAAABkAAAAfQAAAEsAAACWAAAAlgAAAJYAAACWAAAAlgAAAH0AAACWAAAAfQAAAJYAAACWAAAAlgAAAJYAAACWAAAAlgAAAH0AAAAyAAAAfQAAAJYAAABkAAAAlgAAAGQAAAAyAAAAlgAAAJYAAACWAAAA4QAAAEsAAABLAAAAlgAAAJYAAABkAAAAlgAAAJYAAADIAAAAyAAAAJYAAACWAAAAyAAAAJYAAAAAAAAAAAARAAAAEQAAABoAAAAjAAAAPQAAAFoAAABwAAAAkgAAAJgAAACqAAAAuwAAANMAAADgAAAA6QAAAO8AAAD1AAABBwAAASYAAAE2AAABTgAAAWYAAAF+AAABkwAAAasAAAG9AAAB1gAAAe4AAAH3AAACAwAAAhkAAAIjAAACOQAAAk4AAAJrAAACggAAApoAAAKuAAACvwAAAtEAAALhAAAC+AAAAwwAAAMZAAADJQAAA0IAAANLAAADZAAAA30AAAOOAAADoQAAA7oAAAPVAAAD5wAAA/EAAAP+AAAEEAAABCgAAAREAAAEVgAABG0AAAR6AAAEigAABJcAAASoAAAErgAABLcAAATMAAAE3wAABOwAAAUAAAAFFQAABSUAAAU8AAAFTAAABVYAAAVjAAAFegAABYMAAAWVAAAFogAABbMAAAXHAAAF2wAABeoAAAX8AAAGDAAABhkAAAYrAAAGPQAABlkAAAZsAAAGfgAABo8AAAaVAAAGpgAABrQAAAa0AAAGyQAABtcAAAbdAAAG+QAABxQAAAcaAAAHIAAABywAAAc4AAAHTAAAB2AAAAdsAAAHdwAAB48AAAehAAAHswAAB7kAAAfRAAAH5gAACAIAAEAAAB1ACwACwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAGAE4AAwABBAkAAQAYAAAAAwABBAkAAgAOABgAAwABBAkAAwAwACYAAwABBAkABAAYAFYAAwABBAkABQAWAG4AAwABBAkABgAmAIQAQwBhAHMAdABsAGUAIABQAGkAeABlAGwAUgBlAGcAdQBsAGEAcgBDAGEAcwB0AGwAZQAgAFAAaQB4AGUAbAAgAFIAZQBnAHUAbABhAHIAIAAxAC4AMABDAGEAcwB0AGwAZQAgAFAAaQB4AGUAbABWAGUAcgBzAGkAbwBuACAAMQAuADAAQwBhAHMAdABsAGUAUABpAHgAZQBsAC0AUgBlAGcAdQBsAGEAcgADAAAAAAAA/5wAZAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

html[data-look="spooky"] {
  color-scheme: dark;
  font-synthesis: none;

  /* type */
  --ck-pixel: "Castle Pixel", "Lucida Console", "Courier New", monospace;
  --ck-serif: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif;

  /* the violet night, top to horizon, and the pumpkin glow behind the graveyard */
  --ck-sky-1: #0b0616; --ck-sky-2: #170c2a; --ck-sky-3: #2c1240; --ck-glow: #5c2414;
  --ck-sky: linear-gradient(180deg, var(--ck-sky-1) 0%, var(--ck-sky-2) 45%, var(--ck-sky-3) 78%, var(--ck-glow) 100%);

  /* crypt stone: violet-grey, lit from the top left, outlined in black */
  --ck-stone: #4a3d5c; --ck-stone-lit: #7a6a90; --ck-stone-mid: #352a45; --ck-stone-dark: #1e1529; --ck-stone-deep: #120c1a;
  --ck-black: #000;
  --ck-panel: rgba(14, 8, 22, .92); --ck-well: #08050e;

  /* an old spell book's page for long reads, in violet-black ink, headings in burnt orange */
  --ck-parch: #e3d6b0; --ck-parch-lit: #f0e7cb; --ck-parch-edge: #a8875a; --ck-parch-ink: #24152e; --ck-parch-red: #8f2400;
  --ck-parchment: radial-gradient(120% 90% at 50% 40%, var(--ck-parch-lit) 0%, var(--ck-parch) 55%, var(--ck-parch-edge) 100%);

  /* text: candlelight for titles, ghostly lilac for labels, a pale ghost white for reading,
     ectoplasm mint for a hint, slime green for "yes", red for "no"; pumpkin for the shiny things */
  --ck-yellow: #ffcf5a; --ck-orange: #c49bff; --ck-white: #f6f2ff; --ck-dim: #c9bedb;
  --ck-cyan: #7dffd4; --ck-green: #8dff4a; --ck-red: #ff4d3d; --ck-gold: #ff9a1f; --ck-gold-dark: #8a3b06;
  /* pumpkin fire, hottest first */
  --ck-fire-1: #fff2c0; --ck-fire-2: #ffcf5a; --ck-fire-3: #ff8a1f; --ck-fire-4: #d9480f; --ck-fire-5: #6e1d05;

  --ck-shadow: .1em .1em 0 #000;
  --ck-outline: .1em 0 0 #000, -.1em 0 0 #000, 0 .1em 0 #000, 0 -.1em 0 #000, .1em .1em 0 #000, -.1em -.1em 0 #000, .1em -.1em 0 #000, -.1em .1em 0 #000, .2em .2em 0 #000;

  --ck-raise: inset 2px 2px 0 var(--ck-stone-lit), inset -2px -2px 0 var(--ck-stone-dark);
  --ck-press: inset 2px 2px 0 var(--ck-stone-dark), inset -2px -2px 0 var(--ck-stone-lit);
  --ck-sunk: inset 2px 2px 0 #000, inset -2px -2px 0 var(--ck-stone-mid);
  --ck-drop: 4px 4px 0 rgba(0, 0, 0, .55);
  --ck-notch: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);

  /* the pixel art (see art.txt), at 1x: scale by whole numbers. Same sizes as Castle's */
  --ck-art-stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8' shape-rendering='crispEdges'%3E%3Cpath fill='%234a3d5c' d='M0 1h2v1h-2zM3 1h4v1h-4zM8 1h2v1h-2zM11 1h2v1h-2zM14 1h1v1h-1zM0 2h5v1h-5zM6 2h1v1h-1zM8 2h1v1h-1zM10 2h5v1h-5zM0 5h1v1h-1zM2 5h1v1h-1zM4 5h4v1h-4zM9 5h2v1h-2zM13 5h1v1h-1zM15 5h1v1h-1zM0 6h3v1h-3zM4 6h2v1h-2zM7 6h4v1h-4zM12 6h4v1h-4z'/%3E%3Cpath fill='%23352a45' d='M7 0h1v3h-1zM15 0h1v3h-1zM0 3h16v1h-16zM3 4h1v3h-1zM11 4h1v3h-1zM0 7h16v1h-16z'/%3E%3Cpath fill='%235a4c6e' d='M0 0h7v1h-7zM8 0h7v1h-7zM0 4h3v1h-3zM4 4h7v1h-7zM12 4h4v1h-4z'/%3E%3Cpath fill='%2342364f' d='M2 1h1v1h-1zM13 1h1v1h-1zM5 2h1v1h-1zM9 2h1v1h-1zM1 5h1v1h-1zM8 5h1v1h-1zM14 5h1v1h-1zM6 6h1v1h-1z'/%3E%3Cpath fill='%234d6b3c' d='M10 1h1v1h-1zM12 5h1v1h-1z'/%3E%3C/svg%3E");           /* 16 x 8 crypt wall tile */
  --ck-art-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h12v1h-12zM0 1h1v10h-1zM11 1h1v10h-1zM3 3h6v1h-6zM3 4h1v4h-1zM8 4h1v4h-1zM3 8h6v1h-6zM0 11h12v1h-12z'/%3E%3Cpath fill='%237a6a90' d='M1 1h9v1h-9zM1 2h1v8h-1z'/%3E%3Cpath fill='%234a3d5c' d='M10 1h1v1h-1zM3 2h6v1h-6zM2 3h1v6h-1zM9 3h1v6h-1zM3 9h6v1h-6zM1 10h1v1h-1z'/%3E%3Cpath fill='%231e1529' d='M10 2h1v8h-1zM2 10h9v1h-9z'/%3E%3Cpath fill='%23ff8a1f' d='M2 2h1v1h-1zM9 2h1v1h-1zM2 9h1v1h-1zM9 9h1v1h-1z'/%3E%3C/svg%3E");           /* 12 x 12 crypt-stone frame, pumpkin-glow rivets (border-image, slice 4) */
  --ck-art-frame-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h12v1h-12zM0 1h1v10h-1zM11 1h1v10h-1zM3 3h6v1h-6zM3 4h1v4h-1zM8 4h1v4h-1zM3 8h6v1h-6zM0 11h12v1h-12z'/%3E%3Cpath fill='%23ffc46b' d='M1 1h9v1h-9zM1 2h1v8h-1z'/%3E%3Cpath fill='%23e8741a' d='M10 1h1v1h-1zM3 2h6v1h-6zM2 3h1v6h-1zM9 3h1v6h-1zM3 9h6v1h-6zM1 10h1v1h-1z'/%3E%3Cpath fill='%237a2c04' d='M10 2h1v8h-1zM2 10h9v1h-9z'/%3E%3Cpath fill='%23fff2c0' d='M2 2h1v1h-1zM9 2h1v1h-1zM2 9h1v1h-1zM9 9h1v1h-1z'/%3E%3C/svg%3E"); /* the same as a glowing pumpkin, for the one that matters most */
  --ck-art-torch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='30' viewBox='0 0 48 30' shape-rendering='crispEdges'%3E%3Cpath fill='%231b0d05' d='M5 0h2v1h-2zM17 0h2v1h-2zM29 0h2v1h-2zM41 0h2v1h-2zM4 1h1v1h-1zM7 1h1v1h-1zM16 1h1v1h-1zM19 1h1v1h-1zM28 1h1v1h-1zM31 1h1v1h-1zM40 1h1v1h-1zM43 1h1v1h-1zM2 2h3v1h-3zM7 2h3v1h-3zM14 2h3v1h-3zM19 2h3v1h-3zM26 2h3v1h-3zM31 2h3v1h-3zM38 2h3v1h-3zM43 2h3v1h-3zM1 3h1v1h-1zM10 3h1v1h-1zM13 3h1v1h-1zM22 3h1v1h-1zM25 3h1v1h-1zM34 3h1v1h-1zM37 3h1v1h-1zM46 3h1v1h-1zM0 4h1v7h-1zM11 4h2v7h-2zM23 4h2v7h-2zM35 4h2v7h-2zM47 4h1v7h-1zM1 11h1v1h-1zM10 11h1v1h-1zM13 11h1v1h-1zM22 11h1v1h-1zM25 11h1v1h-1zM34 11h1v1h-1zM37 11h1v1h-1zM46 11h1v1h-1zM2 12h8v1h-8zM14 12h8v1h-8zM26 12h8v1h-8zM38 12h8v1h-8zM4 13h1v16h-1zM7 13h1v16h-1zM16 13h1v16h-1zM19 13h1v16h-1zM28 13h1v16h-1zM31 13h1v16h-1zM40 13h1v16h-1zM43 13h1v16h-1zM5 29h2v1h-2zM17 29h2v1h-2zM29 29h2v1h-2zM41 29h2v1h-2z'/%3E%3Cpath fill='%23ff8a1f' d='M2 3h2v1h-2zM5 3h2v1h-2zM8 3h2v1h-2zM14 3h2v1h-2zM17 3h2v1h-2zM20 3h2v1h-2zM26 3h2v1h-2zM29 3h2v1h-2zM32 3h2v1h-2zM38 3h2v1h-2zM41 3h2v1h-2zM44 3h2v1h-2zM1 4h2v1h-2zM4 4h4v2h-4zM9 4h2v1h-2zM13 4h2v1h-2zM16 4h4v2h-4zM21 4h2v1h-2zM25 4h2v1h-2zM28 4h4v2h-4zM33 4h2v1h-2zM37 4h2v1h-2zM40 4h4v2h-4zM45 4h2v1h-2zM2 5h1v1h-1zM9 5h1v1h-1zM14 5h1v1h-1zM21 5h1v1h-1zM26 5h1v1h-1zM33 5h1v1h-1zM38 5h1v1h-1zM45 5h1v1h-1zM5 6h2v1h-2zM17 6h2v1h-2zM29 6h2v1h-2zM41 6h2v1h-2zM2 7h3v1h-3zM7 7h3v1h-3zM14 7h3v1h-3zM19 7h3v1h-3zM26 7h3v1h-3zM31 7h3v1h-3zM38 7h3v1h-3zM43 7h3v1h-3zM3 8h6v1h-6zM15 8h6v1h-6zM27 8h6v1h-6zM39 8h6v1h-6zM4 9h1v1h-1zM7 9h1v1h-1zM16 9h1v1h-1zM19 9h1v1h-1zM28 9h1v1h-1zM31 9h1v1h-1zM40 9h1v1h-1zM43 9h1v1h-1zM2 10h1v1h-1zM9 10h1v1h-1zM14 10h1v1h-1zM21 10h1v1h-1zM26 10h1v1h-1zM33 10h1v1h-1zM38 10h1v1h-1zM45 10h1v1h-1zM3 11h6v1h-6zM15 11h6v1h-6zM27 11h6v1h-6zM39 11h6v1h-6z'/%3E%3Cpath fill='%23c4560b' d='M4 3h1v1h-1zM7 3h1v1h-1zM16 3h1v1h-1zM19 3h1v1h-1zM28 3h1v1h-1zM31 3h1v1h-1zM40 3h1v1h-1zM43 3h1v1h-1zM3 4h1v1h-1zM8 4h1v1h-1zM15 4h1v1h-1zM20 4h1v1h-1zM27 4h1v1h-1zM32 4h1v1h-1zM39 4h1v1h-1zM44 4h1v1h-1zM1 5h1v6h-1zM10 5h1v6h-1zM13 5h1v6h-1zM22 5h1v6h-1zM25 5h1v6h-1zM34 5h1v6h-1zM37 5h1v6h-1zM46 5h1v6h-1zM2 11h1v1h-1zM9 11h1v1h-1zM14 11h1v1h-1zM21 11h1v1h-1zM26 11h1v1h-1zM33 11h1v1h-1zM38 11h1v1h-1zM45 11h1v1h-1z'/%3E%3Cpath fill='%234d7a2a' d='M6 1h1v2h-1zM18 1h1v2h-1zM30 1h1v2h-1zM42 1h1v2h-1z'/%3E%3Cpath fill='%232f5218' d='M5 1h1v2h-1zM17 1h1v2h-1zM29 1h1v2h-1zM41 1h1v2h-1z'/%3E%3Cpath fill='%23ffd84a' d='M3 5h1v1h-1zM8 5h1v1h-1zM27 5h1v1h-1zM32 5h1v1h-1zM2 6h3v1h-3zM7 6h3v1h-3zM26 6h3v1h-3zM31 6h3v1h-3zM5 7h2v1h-2zM29 7h2v1h-2zM2 8h1v1h-1zM9 8h1v1h-1zM26 8h1v1h-1zM33 8h1v1h-1zM2 9h2v1h-2zM5 9h2v1h-2zM8 9h2v1h-2zM26 9h2v1h-2zM29 9h2v1h-2zM32 9h2v1h-2zM3 10h6v1h-6zM27 10h6v1h-6z'/%3E%3Cpath fill='%23fff6c8' d='M15 5h1v1h-1zM20 5h1v1h-1zM14 6h3v1h-3zM19 6h3v1h-3zM17 7h2v1h-2zM14 8h1v1h-1zM21 8h1v1h-1zM14 9h2v1h-2zM17 9h2v1h-2zM20 9h2v1h-2zM15 10h6v1h-6z'/%3E%3Cpath fill='%23ffb238' d='M39 5h1v1h-1zM44 5h1v1h-1zM38 6h3v1h-3zM43 6h3v1h-3zM41 7h2v1h-2zM38 8h1v1h-1zM45 8h1v1h-1zM38 9h2v1h-2zM41 9h2v1h-2zM44 9h2v1h-2zM39 10h6v1h-6z'/%3E%3Cpath fill='%235b3a1d' d='M6 13h1v16h-1zM18 13h1v16h-1zM30 13h1v16h-1zM42 13h1v16h-1z'/%3E%3Cpath fill='%238a5a2e' d='M5 13h1v16h-1zM17 13h1v16h-1zM29 13h1v16h-1zM41 13h1v16h-1z'/%3E%3Cpath fill='%232d4a1e' d='M3 28h1v1h-1zM8 28h1v1h-1zM15 28h1v1h-1zM20 28h1v1h-1zM27 28h1v1h-1zM32 28h1v1h-1zM39 28h1v1h-1zM44 28h1v1h-1zM2 29h1v1h-1zM4 29h1v1h-1zM7 29h1v1h-1zM9 29h1v1h-1zM14 29h1v1h-1zM16 29h1v1h-1zM19 29h1v1h-1zM21 29h1v1h-1zM26 29h1v1h-1zM28 29h1v1h-1zM31 29h1v1h-1zM33 29h1v1h-1zM38 29h1v1h-1zM40 29h1v1h-1zM43 29h1v1h-1zM45 29h1v1h-1z'/%3E%3Cpath fill='%234d7a2a' d='M3 27h1v1h-1zM8 27h1v1h-1zM15 27h1v1h-1zM20 27h1v1h-1zM27 27h1v1h-1zM32 27h1v1h-1zM39 27h1v1h-1zM44 27h1v1h-1zM2 28h1v1h-1zM9 28h1v1h-1zM14 28h1v1h-1zM21 28h1v1h-1zM26 28h1v1h-1zM33 28h1v1h-1zM38 28h1v1h-1zM45 28h1v1h-1zM1 29h1v1h-1zM3 29h1v1h-1zM8 29h1v1h-1zM10 29h1v1h-1zM13 29h1v1h-1zM15 29h1v1h-1zM20 29h1v1h-1zM22 29h1v1h-1zM25 29h1v1h-1zM27 29h1v1h-1zM32 29h1v1h-1zM34 29h1v1h-1zM37 29h1v1h-1zM39 29h1v1h-1zM44 29h1v1h-1zM46 29h1v1h-1z'/%3E%3C/svg%3E");           /* 4 frames of 12 x 30: a jack-o'-lantern on a stake, flickering (ck-torch) */
  --ck-art-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd27a' d='M5 0h6v1h-6zM3 1h10v1h-10zM2 2h11v1h-11zM1 3h4v1h-4zM6 3h7v2h-7zM1 4h3v1h-3zM0 5h10v1h-10zM11 5h3v1h-3zM0 6h3v1h-3zM4 6h5v1h-5zM12 6h2v1h-2zM0 7h2v3h-2zM5 7h1v1h-1zM7 7h1v1h-1zM9 7h1v1h-1zM3 9h2v1h-2zM10 9h2v1h-2zM0 10h7v1h-7zM9 10h3v1h-3zM1 11h10v1h-10zM1 12h9v1h-9zM2 13h7v1h-7zM3 14h4v1h-4z'/%3E%3Cpath fill='%23e8a94a' d='M13 2h1v1h-1zM13 3h2v2h-2zM14 5h2v2h-2zM13 7h3v3h-3zM12 10h4v1h-4zM11 11h4v1h-4zM10 12h5v1h-5zM9 13h5v1h-5zM7 14h6v1h-6zM5 15h6v1h-6z'/%3E%3Cpath fill='%23d18a32' d='M5 3h1v1h-1zM4 4h2v1h-2zM10 5h1v1h-1zM9 6h2v1h-2zM8 10h1v1h-1z'/%3E%3Cpath fill='%23120a1c' d='M3 6h1v1h-1zM11 6h1v1h-1zM2 7h3v1h-3zM6 7h1v1h-1zM8 7h1v1h-1zM10 7h3v1h-3zM2 8h11v1h-11zM2 9h1v1h-1zM5 9h5v1h-5zM12 9h1v1h-1zM7 10h1v1h-1z'/%3E%3C/svg%3E");             /* 16 x 16 harvest moon, with a bat across it */
  --ck-art-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80' shape-rendering='crispEdges'%3E%3Crect x='14' y='13' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='1' y='25' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='8' y='62' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='36' y='29' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='7' y='31' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='22' y='52' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='28' y='54' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='12' y='59' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='93' y='70' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='80' y='68' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='60' y='21' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='104' y='68' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='83' y='14' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='90' y='49' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='50' y='74' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='96' y='45' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='94' y='6' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='78' y='55' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='62' y='4' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='102' y='40' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='16' y='62' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='91' y='48' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='83' y='26' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='6' y='10' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='116' y='13' width='3' height='1' fill='%23a07ad8'/%3E%3Crect x='117' y='12' width='1' height='3' fill='%23a07ad8'/%3E%3Crect x='117' y='13' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='82' y='6' width='1' height='1' fill='%23efe6ff'/%3E%3C/svg%3E");               /* 120 x 80 tile of violet stars */
  --ck-art-skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='64' viewBox='0 0 320 64' shape-rendering='crispEdges'%3E%3Cpolygon fill='%231d1030' points='0,50 30,46 60,49 100,44 150,47 200,43 250,47 290,45 320,50 320,64 0,64'/%3E%3Cg fill='%23150b22'%3E%3Crect x='20' y='40' width='16' height='18'/%3E%3Cpolygon points='23,40 28,23 33,40'/%3E%3Crect x='27' y='17' width='2' height='7'/%3E%3Crect x='25' y='19' width='6' height='2'/%3E%3Cpolygon points='272,58 272,36 276,34 280,37 283,33 286,36 286,58'/%3E%3C/g%3E%3Crect fill='%23ff8a1f' x='27' y='46' width='2' height='4'/%3E%3Crect fill='%23ff8a1f' x='278' y='42' width='2' height='3'/%3E%3Cg fill='%230c0716'%3E%3Cpolygon points='86,58 98,50 150,49 162,58'/%3E%3Cpolygon points='96,52 97,26 107,25 108,52'/%3E%3Cpolygon points='94,27 101,9 110,26'/%3E%3Crect x='100' y='3' width='1' height='7'/%3E%3Crect x='98' y='5' width='5' height='1'/%3E%3Cpolygon points='106,52 105,34 148,31 150,52'/%3E%3Cpolygon points='110,35 112,22 142,19 146,33'/%3E%3Cpolygon points='107,24 126,5 147,20'/%3E%3Cpolygon points='134,13 134,3 139,2 140,11'/%3E%3Cpolygon points='119,45 127,40 135,44'/%3E%3Crect x='122' y='44' width='10' height='8'/%3E%3C/g%3E%3Crect fill='%23c4560b' x='125' y='46' width='4' height='6'/%3E%3Cg fill='%23ffcf5a'%3E%3Crect x='100' y='32' width='3' height='4'/%3E%3Crect x='115' y='26' width='5' height='5'/%3E%3Crect x='131' y='25' width='5' height='5'/%3E%3C/g%3E%3Crect fill='%23ff8a1f' x='109' y='40' width='5' height='5'/%3E%3Crect fill='%232c1240' x='138' y='38' width='5' height='5'/%3E%3Cg fill='%230c0716'%3E%3Crect x='117' y='26' width='1' height='5'/%3E%3Crect x='133' y='25' width='1' height='5'/%3E%3Crect x='111' y='40' width='1' height='5'/%3E%3Crect x='109' y='42' width='5' height='1'/%3E%3C/g%3E%3Crect fill='%237dffd4' x='125' y='13' width='3' height='3'/%3E%3Crect fill='%230c0716' x='126' y='13' width='1' height='3'/%3E%3Cg fill='%23140b20'%3E%3Crect x='56' y='50' width='6' height='8'/%3E%3Crect x='57' y='49' width='4' height='1'/%3E%3Crect x='68' y='46' width='2' height='12'/%3E%3Crect x='66' y='48' width='6' height='2'/%3E%3Cpolygon points='76,58 77,51 82,52 81,58'/%3E%3Crect x='86' y='53' width='4' height='5'/%3E%3Crect x='87' y='52' width='2' height='1'/%3E%3Crect x='172' y='46' width='7' height='12'/%3E%3Crect x='173' y='45' width='5' height='1'/%3E%3Crect x='188' y='43' width='2' height='15'/%3E%3Crect x='185' y='46' width='8' height='2'/%3E%3Crect x='197' y='51' width='5' height='7'/%3E%3Crect x='198' y='50' width='3' height='1'/%3E%3C/g%3E%3Cg fill='%230a0612'%3E%3Crect x='158' y='52' width='48' height='1'/%3E%3Crect x='158' y='55' width='48' height='1'/%3E%3Crect x='158' y='49' width='1' height='9'/%3E%3Crect x='161' y='49' width='1' height='9'/%3E%3Crect x='164' y='49' width='1' height='9'/%3E%3Crect x='167' y='49' width='1' height='9'/%3E%3Crect x='170' y='49' width='1' height='9'/%3E%3Crect x='173' y='49' width='1' height='9'/%3E%3Crect x='176' y='49' width='1' height='9'/%3E%3Crect x='179' y='49' width='1' height='9'/%3E%3Crect x='182' y='49' width='1' height='9'/%3E%3Crect x='185' y='49' width='1' height='9'/%3E%3Crect x='188' y='49' width='1' height='9'/%3E%3Crect x='191' y='49' width='1' height='9'/%3E%3Crect x='194' y='49' width='1' height='9'/%3E%3Crect x='197' y='49' width='1' height='9'/%3E%3Crect x='200' y='49' width='1' height='9'/%3E%3Crect x='203' y='49' width='1' height='9'/%3E%3Cpolygon points='232,58 233,40 231,30 234,30 236,40 237,58'/%3E%3Cpolygon points='233,37 222,29 219,24 221,24 225,28 234,34'/%3E%3Cpolygon points='235,33 244,23 249,22 247,25 236,35'/%3E%3Cpolygon points='232,31 228,20 230,20 234,29'/%3E%3Crect x='219' y='21' width='1' height='3'/%3E%3Crect x='249' y='20' width='1' height='2'/%3E%3Crect x='227' y='17' width='1' height='3'/%3E%3Crect x='244' y='20' width='3' height='2'/%3E%3Crect x='245' y='19' width='1' height='1'/%3E%3Crect x='247' y='20' width='1' height='1'/%3E%3C/g%3E%3Cpolygon fill='%2307040c' points='0,57 20,56 45,58 80,57 110,58 150,56 190,55 214,57 240,54 268,56 300,55 320,57 320,64 0,64'/%3E%3Cg fill='%23ff8a1f'%3E%3Crect x='113' y='54' width='4' height='3'/%3E%3Crect x='141' y='55' width='3' height='2'/%3E%3Crect x='61' y='56' width='3' height='2'/%3E%3C/g%3E%3Cg fill='%234d7a2a'%3E%3Crect x='114' y='53' width='1' height='1'/%3E%3Crect x='142' y='54' width='1' height='1'/%3E%3Crect x='62' y='55' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%23ffe27a'%3E%3Crect x='114' y='55' width='1' height='1'/%3E%3Crect x='116' y='55' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");       /* 320 x 64: the crooked house, a dead tree, the graveyard (repeats sideways) */
  --ck-art-dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath fill='%232a1838' fill-opacity='.09' d='M1 0h1v1h-1zM3 2h1v1h-1z'/%3E%3C/svg%3E");         /* 4 x 4 tile, over parchment */
}

@keyframes ck-torch { to { background-position-x: calc(var(--ck-torch-px, 3px) * -48); } }
@keyframes ck-twinkle { 50% { opacity: .55; } }

/* ==== This site's Castle rules, rescoped to Spooky (make-themes.ps1) ==== */

/* frizzy-g.com in Castle: this page is the login screen. The game has just loaded: "Frizzy G" in
   gold pixel letters between two burning torches, the moon up in the corner, more stars twinkling on
   a slow two-step, the castle on the horizon (the dragon goes over behind it, castle.js), and a
   stone-framed welcome box whose menu is the three apps, each a bevelled stone entry with its own
   crest (a little shield in the app's colour with its mark on it: two balls, a stretch, a voice)
   and its name, nothing else, and an iron PIN plaque on Mbao, behind George's PIN. Phones first
   (everything on one screen at 360 x 740); on a desktop the three entries stand side by side.
   Nothing moves but the torches and the twinkle, and under reduced motion nothing moves at all. */

html[data-look="spooky"] {
  background: var(--ck-sky-1);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* the crests (14 x 17 pixel art, one SVG pixel per art pixel: scale by 2 or 3) */
  --crest-mbao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='17' viewBox='0 0 14 17' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h14v1h-14zM0 1h1v9h-1zM13 1h1v9h-1zM1 10h1v2h-1zM12 10h1v2h-1zM2 12h1v1h-1zM11 12h1v1h-1zM3 13h1v1h-1zM10 13h1v1h-1zM4 14h1v1h-1zM9 14h1v1h-1zM5 15h1v1h-1zM8 15h1v1h-1zM6 16h2v1h-2z'/%3E%3Cpath fill='%23ff9fd0' d='M1 1h12v1h-12zM1 2h1v8h-1zM2 10h1v2h-1zM3 12h1v1h-1zM4 13h1v1h-1zM5 14h1v1h-1z'/%3E%3Cpath fill='%23a8125c' d='M12 2h1v8h-1zM11 10h1v2h-1zM10 12h1v1h-1zM9 13h1v1h-1zM8 14h1v1h-1zM6 15h2v1h-2z'/%3E%3Cpath fill='%2336091f' d='M2 2h10v3h-10zM2 5h2v1h-2zM6 5h2v1h-2zM10 5h2v1h-2zM2 6h1v2h-1zM11 6h1v2h-1zM2 8h2v1h-2zM6 8h2v1h-2zM10 8h2v1h-2zM2 9h10v1h-10zM3 10h8v2h-8zM4 12h6v1h-6zM5 13h4v1h-4zM6 14h2v1h-2z'/%3E%3Cpath fill='%23ff4fa3' d='M4 5h2v1h-2zM3 6h1v1h-1zM5 6h2v1h-2zM3 7h3v1h-3z'/%3E%3Cpath fill='%23ffd2ea' d='M4 6h1v1h-1z'/%3E%3Cpath fill='%23b0175e' d='M6 7h1v1h-1zM4 8h2v1h-2z'/%3E%3Cpath fill='%232fe5ef' d='M8 5h2v1h-2zM7 6h1v1h-1zM9 6h2v1h-2zM7 7h3v1h-3z'/%3E%3Cpath fill='%23d2fdff' d='M8 6h1v1h-1z'/%3E%3Cpath fill='%230b7894' d='M10 7h1v1h-1zM8 8h2v1h-2z'/%3E%3C/svg%3E");  /* 14 x 17 */
  --crest-stretcher: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='17' viewBox='0 0 14 17' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h14v1h-14zM0 1h1v9h-1zM13 1h1v9h-1zM1 10h1v2h-1zM12 10h1v2h-1zM2 12h1v1h-1zM11 12h1v1h-1zM3 13h1v1h-1zM10 13h1v1h-1zM4 14h1v1h-1zM9 14h1v1h-1zM5 15h1v1h-1zM8 15h1v1h-1zM6 16h2v1h-2z'/%3E%3Cpath fill='%23d9ceff' d='M1 1h12v1h-12zM1 2h1v8h-1zM2 10h1v2h-1zM3 12h1v1h-1zM4 13h1v1h-1zM5 14h1v1h-1z'/%3E%3Cpath fill='%235a3fd0' d='M12 2h1v8h-1zM11 10h1v2h-1zM10 12h1v1h-1zM9 13h1v1h-1zM8 14h1v1h-1zM6 15h2v1h-2z'/%3E%3Cpath fill='%231d1450' d='M2 2h10v1h-10zM2 3h1v1h-1zM4 3h2v1h-2zM8 3h2v1h-2zM11 3h1v1h-1zM2 4h2v1h-2zM5 4h1v1h-1zM8 4h1v1h-1zM10 4h2v1h-2zM2 5h3v1h-3zM9 5h3v1h-3zM2 6h4v2h-4zM8 6h4v2h-4zM2 8h3v2h-3zM6 8h2v2h-2zM9 8h3v2h-3zM3 10h1v1h-1zM5 10h4v1h-4zM10 10h1v1h-1zM3 11h8v1h-8zM4 12h6v1h-6zM5 13h4v1h-4zM6 14h2v1h-2z'/%3E%3Cpath fill='%23e6ddff' d='M3 3h1v1h-1zM6 3h2v2h-2zM10 3h1v1h-1zM4 4h1v1h-1zM9 4h1v1h-1zM5 5h4v1h-4zM6 6h2v2h-2zM5 8h1v2h-1zM8 8h1v2h-1zM4 10h1v1h-1zM9 10h1v1h-1z'/%3E%3C/svg%3E");  /* 14 x 17 */
  --crest-earshot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='17' viewBox='0 0 14 17' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h14v1h-14zM0 1h1v9h-1zM13 1h1v9h-1zM1 10h1v2h-1zM12 10h1v2h-1zM2 12h1v1h-1zM11 12h1v1h-1zM3 13h1v1h-1zM10 13h1v1h-1zM4 14h1v1h-1zM9 14h1v1h-1zM5 15h1v1h-1zM8 15h1v1h-1zM6 16h2v1h-2z'/%3E%3Cpath fill='%2398f3f8' d='M1 1h12v1h-12zM1 2h1v8h-1zM2 10h1v2h-1zM3 12h1v1h-1zM4 13h1v1h-1zM5 14h1v1h-1z'/%3E%3Cpath fill='%230b7a8c' d='M12 2h1v8h-1zM11 10h1v2h-1zM10 12h1v1h-1zM9 13h1v1h-1zM8 14h1v1h-1zM6 15h2v1h-2z'/%3E%3Cpath fill='%23062c34' d='M2 2h10v1h-10zM2 3h8v1h-8zM11 3h1v7h-1zM2 4h4v1h-4zM7 4h3v1h-3zM2 5h5v1h-5zM8 5h2v4h-2zM2 6h1v2h-1zM5 6h2v2h-2zM2 8h5v1h-5zM2 9h4v1h-4zM7 9h3v1h-3zM3 10h6v1h-6zM10 10h1v1h-1zM3 11h8v1h-8zM4 12h6v1h-6zM5 13h4v1h-4zM6 14h2v1h-2z'/%3E%3Cpath fill='%232fe5ef' d='M10 3h1v7h-1zM6 4h1v1h-1zM7 5h1v4h-1zM6 9h1v1h-1zM9 10h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 6h2v2h-2z'/%3E%3C/svg%3E");  /* 14 x 17 */
  --crest-mucksalot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='17' viewBox='0 0 14 17' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h14v1h-14zM0 1h1v9h-1zM13 1h1v9h-1zM1 10h1v2h-1zM12 10h1v2h-1zM2 12h1v1h-1zM11 12h1v1h-1zM3 13h1v1h-1zM10 13h1v1h-1zM4 14h1v1h-1zM9 14h1v1h-1zM5 15h1v1h-1zM8 15h1v1h-1zM6 16h2v1h-2z'/%3E%3Cpath fill='%23ffe2b0' d='M1 1h12v1h-12zM1 2h1v8h-1zM2 10h1v2h-1zM3 12h1v1h-1zM4 13h1v1h-1zM5 14h1v1h-1z'/%3E%3Cpath fill='%23a5600c' d='M12 2h1v8h-1zM11 10h1v2h-1zM10 12h1v1h-1zM9 13h1v1h-1zM8 14h1v1h-1zM6 15h2v1h-2z'/%3E%3Cpath fill='%23381c03' d='M2 2h10v2h-10zM2 4h1v6h-1zM4 4h2v2h-2zM8 4h2v2h-2zM11 4h1v6h-1zM5 6h1v1h-1zM8 6h1v1h-1zM3 10h8v2h-8zM4 12h6v1h-6zM5 13h4v1h-4zM6 14h2v1h-2z'/%3E%3Cpath fill='%23ffcf3f' d='M3 5h1v1h-1zM6 5h2v2h-2zM10 5h1v1h-1zM3 6h2v1h-2zM9 6h2v1h-2zM3 7h8v1h-8zM3 8h3v1h-3zM8 8h3v1h-3z'/%3E%3Cpath fill='%23b8790f' d='M3 9h8v1h-8z'/%3E%3Cpath fill='%23e0441c' d='M6 8h2v1h-2z'/%3E%3Cpath fill='%23fff6c8' d='M3 4h1v1h-1zM6 4h2v1h-2zM10 4h1v1h-1z'/%3E%3C/svg%3E");  /* 14 x 17 */
  /* the padlock on the PIN plaque: 7 x 8, at 2x */
  --lock-px: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='8' viewBox='0 0 7 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23c8bfae' d='M2 0h3v1h-3zM1 1h1v2h-1zM5 1h1v2h-1z'/%3E%3Cpath fill='%23ffcf3f' d='M0 3h7v2h-7zM0 5h3v2h-3zM4 5h3v2h-3z'/%3E%3Cpath fill='%233a2410' d='M3 5h1v2h-1z'/%3E%3Cpath fill='%239a6a12' d='M0 7h7v1h-7z'/%3E%3C/svg%3E");
  /* a few bright stars, sparse, for the twinkling layers (200 x 150: scale by 2) */
  --twinkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='150' viewBox='0 0 200 150' shape-rendering='crispEdges'%3E%3Cg fill='%23fff'%3E%3Crect x='24' y='29' width='1' height='3'/%3E%3Crect x='23' y='30' width='3' height='1'/%3E%3Crect x='52' y='118' width='1' height='1'/%3E%3Crect x='8' y='84' width='1' height='1'/%3E%3Crect x='167' y='9' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%23dfe6ff'%3E%3Crect x='118' y='95' width='1' height='3'/%3E%3Crect x='117' y='96' width='3' height='1'/%3E%3Crect x='88' y='12' width='1' height='1'/%3E%3Crect x='182' y='132' width='1' height='1'/%3E%3C/g%3E%3Crect fill='%23ffe9b0' x='150' y='48' width='1' height='1'/%3E%3Crect fill='%23ffe9b0' x='71' y='63' width='1' height='1'/%3E%3C/svg%3E");
}
html[data-look="spooky"] [hidden] { display: none !important; }
html[data-look="spooky"] *, html[data-look="spooky"] *::before, html[data-look="spooky"] *::after { box-sizing: border-box; }
html[data-look="spooky"] body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  color: var(--ck-white); font: 18px/1.5 var(--ck-serif);
  overflow-x: clip;
}
html[data-look="spooky"] ::selection { background: var(--ck-yellow); color: #000; text-shadow: none; }
html[data-look="spooky"] :focus-visible { outline: 2px solid var(--ck-yellow); outline-offset: 2px; }
html[data-look="spooky"] .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- the scene: sky, moon, stars, the castle ---------- */

/* the sky, fading down to the glow behind the castle, with the near stars in it */
html[data-look="spooky"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background: var(--ck-art-stars) 0 0 / 360px 240px, var(--ck-sky);
}
/* the castle on the horizon, in front of the dragon (on a phone the tile starts where the keep and
   its banner come into view) */
html[data-look="spooky"] body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 192px; z-index: -1; pointer-events: none;
  background: var(--ck-art-skyline) -174px bottom / 960px 192px repeat-x;
}
/* .ambient (three <i>): two scatterings of brighter stars that twinkle out of step on a slow
   two-step, and the moon with its light on the sky. Over the sky, under castle.js's canvas */
html[data-look="spooky"] .ambient { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
html[data-look="spooky"] .ambient i { position: absolute; display: block; }
html[data-look="spooky"] .ambient i:nth-child(1),
html[data-look="spooky"] .ambient i:nth-child(2) {
  left: 0; right: 0; top: 0; bottom: 140px;
  background: var(--twinkle) 0 0 / 400px 300px;
  animation: ck-twinkle 5s steps(1) infinite;
}
html[data-look="spooky"] .ambient i:nth-child(2) { background-position: 214px 158px; animation-duration: 7s; animation-delay: -3s; }
html[data-look="spooky"] .ambient i:nth-child(3) {
  left: 4px; top: 4px; width: 112px; height: 112px;
  background:
    var(--ck-art-moon) center / 32px 32px no-repeat,
    radial-gradient(closest-side, rgba(244, 234, 208, .2), rgba(244, 234, 208, .07) 50%, rgba(244, 234, 208, 0));
}

/* ---------- the page: the title over the welcome box ---------- */

html[data-look="spooky"] .home {
  width: 100%; max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: max(70px, calc(env(safe-area-inset-top) + 60px)) max(12px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

/* the title: the site's name in gold, a torch either side (the right one mirrored and a beat
   behind, so they don't flicker in step) */
html[data-look="spooky"] .logo {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: normal;
}
html[data-look="spooky"] .logo::before,
html[data-look="spooky"] .logo::after {
  content: ""; flex: none; width: 24px; height: 60px;
  background: var(--ck-art-torch) 0 0 / 96px 60px no-repeat;
  --ck-torch-px: 2px; animation: ck-torch .6s steps(4) infinite;
}
html[data-look="spooky"] .logo::after { transform: scaleX(-1); animation-delay: -.3s; }
html[data-look="spooky"] .logo-img { display: none; }
html[data-look="spooky"] .logo-text {
  display: block; padding: 0 .2em .1em 0; white-space: nowrap;
  font: 60px/1 var(--ck-pixel); color: var(--ck-gold); text-shadow: var(--ck-outline);
}

/* the welcome box: a stone frame, a heading, a word from the gatekeeper, then the menu */
html[data-look="spooky"] .apps {
  display: grid; gap: 10px;
  padding: 12px 8px 10px;
  border: 12px solid transparent; border-image: var(--ck-art-frame) 4 / 12px;
  background: var(--ck-panel) padding-box;
  box-shadow: var(--ck-drop);
}
html[data-look="spooky"] .apps::before {
  content: "Welcome, you old ghoul"; content: "Welcome, you old ghoul" / "";
  order: -2; text-align: center;
  font: 20px/1.2 var(--ck-pixel); color: var(--ck-yellow); text-shadow: var(--ck-shadow);
}
html[data-look="spooky"] .apps::after {
  content: "Where to? Mind the graves."; content: "Where to? Mind the graves." / "";
  order: -1; margin: -6px 0 4px; text-align: center;
  font: italic 17px/1.3 var(--ck-serif); color: var(--ck-dim);
}

/* the menu: a bevelled stone entry per app (the whole entry is the link), its crest on the left
   and its name in the pixel font, big (the names are all the entries say) */
html[data-look="spooky"] .app {
  --crest: var(--crest-mbao);
  display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: center;
  min-height: 80px; padding: 12px 12px 12px 12px;
  color: var(--ck-white); text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: var(--ck-stone-mid); border: 2px solid #000;
  box-shadow: var(--ck-raise), var(--ck-drop);
}
html[data-look="spooky"] .app-mbao { --crest: var(--crest-mbao); }
html[data-look="spooky"] .app-stretcher { --crest: var(--crest-stretcher); }
html[data-look="spooky"] .app-earshot { --crest: var(--crest-earshot); }
/* behind George's PIN (pin\README.md): the entry gets a third column, and in it, beside the name, a
   little iron plaque: a gold padlock and "PIN" in menu orange. Real text, so a screen reader says it */
html[data-look="spooky"] .app-locked { grid-template-columns: 42px minmax(0, 1fr) auto; }
html[data-look="spooky"] .app-lock {
  grid-column: 3; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 5px 3px 5px; white-space: nowrap;
  font: 20px/1 var(--ck-pixel); color: var(--ck-orange); text-shadow: var(--ck-shadow);
  background: var(--ck-well); border: 2px solid #000; box-shadow: var(--ck-sunk);
}
html[data-look="spooky"] .app-lock::before {
  content: ""; flex: none; width: 14px; height: 16px; margin-top: -2px;
  background: var(--lock-px) 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
}
html[data-look="spooky"] .app::before { /* the crest, 3x */
  content: ""; grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 42px; height: 51px;
  background: var(--crest) 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
}
html[data-look="spooky"] .app-name {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font: 28px/1.2 var(--ck-pixel); color: var(--ck-white); text-shadow: var(--ck-shadow);
}
html[data-look="spooky"] .app-what {
  grid-column: 2 / -1; grid-row: 2; align-self: start;
  font: 17px/1.3 var(--ck-serif); color: var(--ck-dim); text-wrap: pretty;
}
/* pointed at or tabbed to: a gold edge and the name in yellow; pressed: the stone goes in */
@media (hover: hover) {
  html[data-look="spooky"] .app:hover { border-color: var(--ck-gold); }
  html[data-look="spooky"] .app:hover .app-name { color: var(--ck-yellow); }
}
html[data-look="spooky"] .app:focus-visible { border-color: var(--ck-gold); outline: 2px solid var(--ck-yellow); outline-offset: 2px; }
html[data-look="spooky"] .app:focus-visible .app-name { color: var(--ck-yellow); }
html[data-look="spooky"] .app:active { box-shadow: var(--ck-press); transform: translate(2px, 2px); }
html[data-look="spooky"] .app:active .app-name { color: var(--ck-yellow); }

/* the look menu: lookmenu.css draws it for every look (.top-end, .corner, .look-menu, .look-burger,
   .look-panel, .look-panel-label, .lm-opts, .lm-opt, .lm-night, .lm-frizzy, .lm-tom, .lm-castle, and
   the Tom mode PIN form: .lm-pin, .lm-pin-label, .lm-pin-row, .lm-pin-input, .lm-pin-go, .lm-pin-wrong);
   here it only takes the castle's yellow focus ring */
html[data-look="spooky"] .look-burger:focus-visible,
html[data-look="spooky"] .lm-opt:focus-visible { outline: 2px solid var(--ck-yellow); outline-offset: 2px; }

/* ---------- sizes ---------- */

/* a short phone: a little less air */
@media (max-height: 760px) and (max-width: 599px) {
  html[data-look="spooky"] .home { gap: 14px; padding-top: max(66px, calc(env(safe-area-inset-top) + 58px)); }
  html[data-look="spooky"] .apps { gap: 8px; }
}

/* a tablet: a bigger title, the torches at 4x and bigger entries */
@media (min-width: 600px) {
  html[data-look="spooky"] .home { max-width: 600px; gap: 26px; }
  html[data-look="spooky"] .logo { gap: 22px; }
  html[data-look="spooky"] .logo::before,
  html[data-look="spooky"] .logo::after { width: 48px; height: 120px; background-size: 192px 120px; --ck-torch-px: 4px; }
  html[data-look="spooky"] .logo-text { font-size: 80px; }
  html[data-look="spooky"] .apps { gap: 12px; padding: 18px; }
  html[data-look="spooky"] .apps::before { font-size: 30px; }
  html[data-look="spooky"] .apps::after { margin: -4px 0 6px; font-size: 19px; }
  html[data-look="spooky"] .app { column-gap: 18px; min-height: 96px; padding: 14px 18px 15px 16px; }
  html[data-look="spooky"] .app-name { font-size: 34px; }
  html[data-look="spooky"] .app-what { font-size: 18px; }
  html[data-look="spooky"] .ambient i:nth-child(3) { left: auto; right: 5%; top: 1%; width: 160px; height: 160px; background-size: 48px 48px, auto; }
  html[data-look="spooky"] body::after { background-position: center bottom; }
}

/* a desktop: the full login screen. A bigger title, and the box opens out into three entries side
   by side, like the login screen's buttons: the crest at 4x over the name, the PIN plaque in the
   corner. It sits high enough that the castle shows under it */
@media (min-width: 900px) {
  html[data-look="spooky"] body { padding-bottom: 110px; }
  html[data-look="spooky"] .ambient i:nth-child(3) { right: 9%; top: 6%; }
  html[data-look="spooky"] .home { max-width: 860px; gap: 30px; padding-top: 56px; padding-bottom: 40px; }
  html[data-look="spooky"] .logo { gap: 30px; }
  html[data-look="spooky"] .logo::before,
  html[data-look="spooky"] .logo::after { width: 60px; height: 150px; background-size: 240px 150px; --ck-torch-px: 5px; }
  html[data-look="spooky"] .logo-text { font-size: 100px; }
  html[data-look="spooky"] .apps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 20px 22px 24px; }
  html[data-look="spooky"] .apps::before,
  html[data-look="spooky"] .apps::after { grid-column: 1 / -1; }
  html[data-look="spooky"] .apps::after { margin-bottom: 8px; }
  html[data-look="spooky"] .app,
  html[data-look="spooky"] .app-locked {
    position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 14px;
    justify-items: center; align-content: center; min-height: 176px; padding: 22px 16px 20px; text-align: center;
  }
  html[data-look="spooky"] .app::before { grid-column: 1; grid-row: 1; width: 56px; height: 68px; }
  html[data-look="spooky"] .app-name { grid-column: 1; grid-row: 2; font-size: 32px; }
  html[data-look="spooky"] .app-lock { position: absolute; grid-column: auto; grid-row: auto; top: 10px; right: 10px; }
}
/* a laptop that isn't very tall: the title back to 80px and less air, so it still fits */
@media (min-width: 900px) and (max-height: 820px) {
  html[data-look="spooky"] body { padding-bottom: 50px; }
  html[data-look="spooky"] .home { gap: 22px; padding-top: 36px; padding-bottom: 24px; }
  html[data-look="spooky"] .logo { gap: 22px; }
  html[data-look="spooky"] .logo::before,
  html[data-look="spooky"] .logo::after { width: 48px; height: 120px; background-size: 192px 120px; --ck-torch-px: 4px; }
  html[data-look="spooky"] .logo-text { font-size: 80px; }
}
@media (min-width: 900px) and (max-height: 690px) {
  html[data-look="spooky"] body { padding-bottom: 0; }
  html[data-look="spooky"] .home { gap: 16px; padding-top: 24px; padding-bottom: 20px; }
}
/* a phone on its side: the title needn't clear the menu button, which is off to the right */
@media (min-width: 600px) and (max-height: 520px) {
  html[data-look="spooky"] .home { padding-top: 20px; gap: 18px; }
}

/* ---------- motion ---------- */

/* nothing moves: the torches show their first frame, the stars hold still */
@media (prefers-reduced-motion: reduce) {
  html[data-look="spooky"] *, html[data-look="spooky"] *::before, html[data-look="spooky"] *::after { animation: none !important; transition: none !important; }
}

/* more contrast asked for: the secondary words go white */
@media (prefers-contrast: more) {
  html[data-look="spooky"] .app-what, html[data-look="spooky"] .apps::after { color: var(--ck-white); }
}

/* Windows high contrast: keep every edge visible */
@media (forced-colors: active) {
  html[data-look="spooky"] .apps { border: 2px solid CanvasText; border-image: none; }
  html[data-look="spooky"] .app, html[data-look="spooky"] .app-lock { border: 2px solid CanvasText; }
  html[data-look="spooky"] .app:focus-visible { outline: 3px solid Highlight; }
  html[data-look="spooky"] .ambient, html[data-look="spooky"] body::before, html[data-look="spooky"] body::after { display: none; }
}

/* ==== Spooky's own touches for this site (castle-look\themes\spooky\sites\home.css) ==== */
/* the moon's light on the sky: the harvest moon's is pumpkin, not Castle's cream */
html[data-look="spooky"] .ambient i:nth-child(3) {
  background:
    var(--ck-art-moon) center / 32px 32px no-repeat,
    radial-gradient(closest-side, rgba(255, 190, 90, .22), rgba(255, 190, 90, .08) 50%, rgba(255, 190, 90, 0));
}
@media (min-width: 600px) {
  html[data-look="spooky"] .ambient i:nth-child(3) { background-size: 48px 48px, auto; }
}