From 090af3f5db989d9489b8212e5f8db9aab352e05e Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 08:48:04 +0100
Subject: [PATCH 01/46] docs: rebuild the website as an absurd ink drawing

The landing page becomes a felt-pen drawing of a lighthouse on a hill, drawn in a canvas
behind paper notes: a one-eyed lighthouse in a pom-pom hat, a fried-egg sun, sheep, ducks,
gulls and a sea monster. The light follows the pointer and highlights the headline words it
crosses, grass and clouds lean away from it, scrolling brings the evening, the moon tile
brings the night, and a click on the hill or the sea drops a surprise there.

The bar demos stay: popups, Edit Bar in Place, the right-click menu, the Store review, theme
picking and the bar turning into the site header. Each section is a different paper (a taped
note, a washing line of themes, a notebook page, a postcard, a recipe card), with its own
small scene in the drawing. The terminal, the draggable windows, the disk image mock and the
Popups and Every display sections go; the guide covers them.

Shantell Sans replaces Host Grotesk for headings, captions and labels. The privacy and terms
pages move to the same paper without the drawing. Reduced motion keeps the drawing still,
and the page works without scene.js.
---
 site/fonts/host-grotesk.woff2                 |  Bin 20296 -> 0 bytes
 ...-grotesk-OFL.txt => shantell-sans-OFL.txt} |    4 +-
 site/fonts/shantell-sans-display.woff2        |  Bin 0 -> 30716 bytes
 site/fonts/shantell-sans-hand.woff2           |  Bin 0 -> 31312 bytes
 site/index.html                               |  535 +++--
 site/main.js                                  |  561 +++---
 site/privacy.html                             |    6 +-
 site/scene.js                                 | 1748 +++++++++++++++++
 site/style.css                                |  931 ++++-----
 site/terms.html                               |    6 +-
 10 files changed, 2797 insertions(+), 994 deletions(-)
 delete mode 100644 site/fonts/host-grotesk.woff2
 rename site/fonts/{host-grotesk-OFL.txt => shantell-sans-OFL.txt} (95%)
 create mode 100644 site/fonts/shantell-sans-display.woff2
 create mode 100644 site/fonts/shantell-sans-hand.woff2
 create mode 100644 site/scene.js

diff --git a/site/fonts/host-grotesk.woff2 b/site/fonts/host-grotesk.woff2
deleted file mode 100644
index 44d652b50726ae572b4eff1ee44f0b0fe9c95b76..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 20296
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

diff --git a/site/fonts/host-grotesk-OFL.txt b/site/fonts/shantell-sans-OFL.txt
similarity index 95%
rename from site/fonts/host-grotesk-OFL.txt
rename to site/fonts/shantell-sans-OFL.txt
index 551f7be6..5a9d5251 100644
--- a/site/fonts/host-grotesk-OFL.txt
+++ b/site/fonts/shantell-sans-OFL.txt
@@ -1,4 +1,4 @@
-Copyright 2023 The Host Grotesk Project Authors (https://github.com/Element-Type/HostGrotesk) HostGrotesk-Italic[wght].ttf: Copyright 2023 The Host Grotesk Project Authors (https://github.com/Element-Type/HostGrotesk)
+Copyright 2022 The Shantell Sans Project Authors (https://github.com/arrowtype/shantell-sans)
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:
@@ -18,7 +18,7 @@ with others.
 
 The OFL allows the licensed fonts to be used, studied, modified and
 redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
+fonts, including any derivative works, can be bundled, embedded, 
 redistributed and/or sold with any software provided that any reserved
 names are not used by derivative works. The fonts and derivatives,
 however, cannot be released under any other type of license. The
diff --git a/site/fonts/shantell-sans-display.woff2 b/site/fonts/shantell-sans-display.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..d04a8608480a431c438f3ca6e2ec38a07cebb49d
GIT binary patch
literal 30716
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

literal 0
HcmV?d00001

diff --git a/site/fonts/shantell-sans-hand.woff2 b/site/fonts/shantell-sans-hand.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..a093ff0170ac40d711a5d23fe093fc9a4e62c225
GIT binary patch
literal 31312
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
E2SuFg@&Et;

literal 0
HcmV?d00001

diff --git a/site/index.html b/site/index.html
index ba9114dc..534064c9 100644
--- a/site/index.html
+++ b/site/index.html
@@ -35,10 +35,10 @@
   "sameAs": "https://github.com/Seb-GRAF/StableBar"
 }
 </script>
-<meta name="theme-color" content="#15110d">
+<meta name="theme-color" content="#86cbf2">
 <link rel="icon" href="images/icon-64.png">
 <link rel="apple-touch-icon" href="images/icon-256.png">
-<link rel="preload" href="fonts/host-grotesk.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="fonts/shantell-sans-display.woff2" as="font" type="font/woff2" crossorigin>
 <link rel="preload" href="fonts/atkinson-hyperlegible-next.woff2" as="font" type="font/woff2" crossorigin>
 <link rel="stylesheet" href="style.css">
 <script>
@@ -46,6 +46,7 @@
 root.dataset.mode = localStorage.getItem("mode") || (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
 root.classList.add("js");
 </script>
+<script src="scene.js" defer></script>
 <script src="main.js" defer></script>
 </head>
 <body>
@@ -60,6 +61,8 @@
   <symbol id="i-disk" viewBox="0 0 16 16"><rect x="1.5" y="4.5" width="13" height="7" rx="1.8" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="11.6" cy="8" r=".9" fill="currentColor"/><path d="M4 8h4" stroke="currentColor" stroke-width="1.2"/></symbol>
   <symbol id="i-down" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="currentColor"/><path d="M8 4.2v6.6M5.2 8.2 8 11l2.8-2.8" fill="none" stroke="var(--amber)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></symbol>
   <symbol id="i-apple" viewBox="0 0 15 18"><path d="M12.5 9.6c0-2 1.6-2.9 1.7-3a3.7 3.7 0 0 0-2.9-1.6c-1.2-.1-2.4.7-3 .7-.6 0-1.6-.7-2.6-.7A3.9 3.9 0 0 0 2.4 7c-1.4 2.4-.4 6 1 7.9.7 1 1.4 2 2.4 2 1 0 1.3-.6 2.5-.6s1.5.6 2.5.6c1 0 1.7-1 2.3-1.9.7-1 1-2 1-2.1 0 0-2-.8-2-3.3ZM10.6 3.6c.5-.7.9-1.6.8-2.6-.8 0-1.8.5-2.4 1.2-.5.6-1 1.6-.8 2.5.9.1 1.8-.5 2.4-1.1Z"/></symbol>
+  <symbol id="i-moon" viewBox="0 0 20 20"><path d="M16.5 12.2A7 7 0 0 1 7.8 3.5a7 7 0 1 0 8.7 8.7Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></symbol>
+  <symbol id="i-moon-fill" viewBox="0 0 20 20"><path d="M16.5 12.2A7 7 0 0 1 7.8 3.5a7 7 0 1 0 8.7 8.7Z" fill="currentColor" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></symbol>
 
   <symbol id="i-note" viewBox="0 0 16 16"><path d="M6 12.2V3.6l7-1.6v8.4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><circle cx="4.4" cy="12.2" r="1.9" fill="currentColor"/><circle cx="11.4" cy="10.4" r="1.9" fill="currentColor"/></symbol>
   <symbol id="i-open" viewBox="0 0 16 16"><path d="M5 11 11 5M6 4.6h5.4V10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></symbol>
@@ -96,357 +99,265 @@
   <symbol id="i-tool" viewBox="0 0 16 16"><path d="M9.8 2.4a3.4 3.4 0 0 0-3.6 4.5L2.4 10.7a1.4 1.4 0 0 0 2 2l3.8-3.8a3.4 3.4 0 0 0 4.5-3.6l-2 2-1.8-.3-.3-1.8z" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></symbol>
 
   <symbol id="p-check" viewBox="0 0 12 12"><path d="m2 6.4 2.6 2.6L10 3.3" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+
+  <!-- the key's drawings, in the felt pen -->
+  <symbol id="k-sheep" viewBox="0 0 32 24"><g stroke="#111" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 20v3M13 20.5v2.8M18 20.5v2.8M22 20v3" fill="none"/><path d="M6.4 16.4c-3-.4-3.6-4.4-.8-5.4-.2-3.2 3.6-4.6 5.4-2.6 1.4-3 6-3 7.2-.2 2.8-1.2 5.6 1.2 4.6 3.8 2.4 1 1.8 5-1.2 5 .2 2.6-4.4 3.4-6 1.4-1.6 2-6.4 1.8-7-.8-.8.2-1.6.1-2.2-.2Z" fill="#fff"/><path d="M23.4 9.2c1.6-1.4 4.4-1 5.4.8 1 1.8.2 4.4-1.8 5-1.8.6-3.6-.2-4.2-1.8" fill="#111"/><path d="M24 9.4c-.8-.9-2.2-1-2.8-.2" fill="none"/></g><circle cx="26.6" cy="11.2" r=".9" fill="#fff"/></symbol>
+  <symbol id="k-duck" viewBox="0 0 32 24"><g stroke="#111" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 13.4c.6 5 5 7.6 11.4 7.6 6.6 0 10.8-2.6 11.2-6.6.2-2.2-1.6-3.2-3.6-2.4-1.6.6-3.2.2-4.2-1.2-1.6 2-5.2 2.8-8.4 2.4-2.6-.4-4.8-.8-6.4.2Z" fill="#ffe04a"/><circle cx="19.4" cy="7.4" r="4.6" fill="#ffe04a"/><path d="M23.6 7.6c1.8-.6 3.8 0 4.8 1.2-1.3 1-3.3 1.3-4.9.7" fill="#ff8a3d"/><path d="M9.6 14.6c2 1.6 5.2 1.5 6.8-.4" fill="none"/></g><circle cx="20.6" cy="6.4" r="1" fill="#111"/></symbol>
+  <symbol id="k-moon" viewBox="0 0 32 24"><g stroke="#111" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 3A9 9 0 1 0 24.2 15.8 7.5 7.5 0 0 1 16.5 3Z" fill="#ffe04a"/><path d="M11.6 11.4q1.4 1.2 2.8 0M12.4 16.4q1.6.9 3 0" fill="none"/></g><path d="M26.5 4.5v3M25 6h3M28.5 10.5v2M27.5 11.5h2" stroke="#111" stroke-width="1.3" stroke-linecap="round"/></symbol>
+  <symbol id="k-arrow" viewBox="0 0 160 40"><path d="M150 37C138 8 52 0 16 31" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" vector-effect="non-scaling-stroke"/><path d="M10 19.5 15.5 32l12-3" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"/></symbol>
 </svg>
 
 <a class="skip" href="#main">Skip to content</a>
-<div class="page">
-  <header class="top">
-    <a class="brand" href="#"><img src="images/icon-64.png" alt="">StableBar</a>
-    <nav class="nav">
-      <a href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/README.md">Guide</a>
-      <a href="#store">Store</a>
-      <a class="gh" href="https://github.com/Seb-GRAF/StableBar/tree/main/examples">Examples</a>
-      <a class="gh" href="https://github.com/Seb-GRAF/StableBar">GitHub</a>
-      <button class="mode" id="mode" aria-label="Dark mode" aria-pressed="true">
-        <svg class="moon" viewBox="0 0 20 20" aria-hidden="true"><path d="M16.5 12.2A7 7 0 0 1 7.8 3.5a7 7 0 1 0 8.7 8.7Z"/></svg>
-        <svg class="sun" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="3.6"/><path d="M10 1.8v1.8M10 16.4v1.8M1.8 10h1.8M16.4 10h1.8M4.2 4.2l1.3 1.3M14.5 14.5l1.3 1.3M4.2 15.8l1.3-1.3M14.5 5.5l1.3-1.3"/></svg>
-      </button>
-    </nav>
-  </header>
+<div class="scene" id="scene" aria-hidden="true"></div>
 
-  <main id="main">
-  <section class="hero">
-    <h1>A native, configurable<br class="wide"> menu bar for macOS.</h1>
-    <p class="lede">Themes, widgets and popups, set up in the app or in plain JSON.</p>
-    <div class="get">
-      <a class="cta" href="https://github.com/Seb-GRAF/StableBar/releases/download/v0.9.0/StableBar.dmg"><svg aria-hidden="true"><use href="#i-apple"/></svg>Download for Mac <span class="ver">v0.9.0</span></a>
-      <p class="req">macOS 14 or later on Apple silicon.<br>Free and open source, MIT License.</p>
+<header class="dock" id="dock" data-theme="built-in">
+  <div class="bar ws-fill" id="bar" role="toolbar" aria-label="StableBar">
+    <div class="g" id="gl">
+      <div class="w apple" data-key="apple" data-pri="1" role="img" aria-label="Apple menu"><svg style="width:13px;height:15px;fill:currentColor"><use href="#i-apple"/></svg></div>
+      <div class="w ws" data-key="ws" data-pri="never">
+        <span class="ind"></span>
+        <button class="wsi" data-ws="1" aria-label="Workspace 1" aria-pressed="false">1 <img class="ai" src="images/apps/ghostty.webp" alt="" width="14" height="14"></button>
+        <button class="wsi on" data-ws="2" aria-label="Workspace 2" aria-pressed="true">2 <img class="ai" src="images/apps/t3-code.webp" alt="" width="14" height="14"><img class="ai" src="images/apps/finder.svg" alt="" width="14" height="14"></button>
+        <button class="wsi" data-ws="3" aria-label="Workspace 3" aria-pressed="false">3 <img class="ai" src="images/apps/vscodium.webp" alt="" width="14" height="14"><img class="ai" src="images/apps/chromium.webp" alt="" width="14" height="14"></button>
+        <button class="wsi" data-ws="4" aria-label="Workspace 4" aria-pressed="false">4 <img class="ai" src="images/apps/ollama.webp" alt="" width="14" height="14"></button>
+      </div>
+      <div class="w app finder" data-key="app" data-pri="2"><span class="name">Finder</span><span class="menus"><span><span>File</span><span>Edit</span><span>View</span><span>Go</span><span>Window</span><span>Help</span></span></span></div>
+      <div class="w app site" data-key="site" data-pri="8" data-pop="site"><button type="button" class="name" aria-expanded="false">StableBar</button><span class="menus"><span><a href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/README.md">Guide</a><a href="#store">Store</a><a href="https://github.com/Seb-GRAF/StableBar/tree/main/examples">Examples</a><a href="https://github.com/Seb-GRAF/StableBar">GitHub</a></span></span></div>
     </div>
+    <div class="g" id="gc"></div>
+    <div class="g" id="gr">
+      <button class="w more" data-key="more" data-pop="more" aria-expanded="false" aria-label="More widgets" hidden>•••</button>
+      <button class="w np" data-key="np" data-pri="3" data-pop="np" aria-expanded="false" aria-label="Now playing: Midnight City · M83"><i class="art"></i><span class="track">Midnight City · M83</span><span class="eq"><i></i><i></i><i></i><i></i></span></button>
+      <button class="w" data-key="meeting" data-pri="1" data-pop="agenda" aria-expanded="false"><svg><use href="#i-cal"/></svg>Design review&nbsp;&nbsp;10:30</button>
+      <button class="w" data-key="system" data-pri="0" data-pop="system" aria-expanded="false"><svg><use href="#i-cpu"/></svg><span class="vh">CPU </span>18%<span class="vh">,</span>&nbsp;&nbsp;<svg><use href="#i-mem"/></svg><span class="vh">memory </span>54%</button>
+      <div class="w snd" data-key="sound" data-pri="0"><span class="slide"><span><input type="range" min="0" max="100" value="64" aria-label="Volume"><span class="pct num">64%</span></span></span><svg role="img" aria-label="Sound"><use href="#i-snd"/></svg></div>
+      <div class="w" data-key="battery" data-pri="1"><svg style="width:19px"><use href="#i-bat"/></svg><span class="vh">Battery </span>82%</div>
+      <div class="w num clock" data-key="clock" data-pri="5" data-format="full">Thu 22 Oct&nbsp;&nbsp;09:41</div>
+      <a class="w dl" data-key="dl" data-pri="9" href="https://github.com/Seb-GRAF/StableBar/releases/download/v0.9.0/StableBar.dmg"><span><svg><use href="#i-down"/></svg>Download</span></a>
+      <button class="w moon" data-key="moon" data-pri="never" id="night" aria-label="Night" aria-pressed="false"><svg class="off" aria-hidden="true"><use href="#i-moon"/></svg><svg class="on" aria-hidden="true"><use href="#i-moon-fill"/></svg></button>
+    </div>
+  </div>
 
-    <div class="desk" id="desk" data-theme="built-in">
-      <div class="wall"></div>
-
-      <div class="dock" id="dock">
-        <div class="bar ws-fill" id="bar" role="toolbar" aria-label="StableBar">
-          <div class="g" id="gl">
-            <div class="w apple" data-key="apple" data-pri="1" role="img" aria-label="Apple menu"><svg style="width:13px;height:15px;fill:currentColor"><use href="#i-apple"/></svg></div>
-            <div class="w ws" data-key="ws" data-pri="never">
-              <span class="ind"></span>
-              <button class="wsi" data-ws="1" aria-label="Workspace 1" aria-pressed="false">1 <img class="ai" src="images/apps/ghostty.webp" alt="" width="14" height="14"></button>
-              <button class="wsi on" data-ws="2" aria-label="Workspace 2" aria-pressed="true">2 <img class="ai" src="images/apps/t3-code.webp" alt="" width="14" height="14"><img class="ai" src="images/apps/finder.svg" alt="" width="14" height="14"></button>
-              <button class="wsi" data-ws="3" aria-label="Workspace 3" aria-pressed="false">3 <img class="ai" src="images/apps/vscodium.webp" alt="" width="14" height="14"><img class="ai" src="images/apps/chromium.webp" alt="" width="14" height="14"></button>
-              <button class="wsi" data-ws="4" aria-label="Workspace 4" aria-pressed="false">4 <img class="ai" src="images/apps/ollama.webp" alt="" width="14" height="14"></button>
-            </div>
-            <div class="w app finder" data-key="app" data-pri="2"><span class="name">Finder</span><span class="menus"><span><span>File</span><span>Edit</span><span>View</span><span>Go</span><span>Window</span><span>Help</span></span></span></div>
-            <div class="w app site" data-key="site" data-pri="8" data-pop="site"><span class="name">StableBar</span><span class="menus"><span><a href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/README.md">Guide</a><a href="#store">Store</a><a href="https://github.com/Seb-GRAF/StableBar/tree/main/examples">Examples</a><a href="https://github.com/Seb-GRAF/StableBar">GitHub</a></span></span></div>
-          </div>
-          <div class="g" id="gc"></div>
-          <div class="g" id="gr">
-            <button class="w more" data-key="more" data-pop="more" aria-expanded="false" aria-label="More widgets" hidden>•••</button>
-            <button class="w np" data-key="np" data-pri="3" data-pop="np" aria-expanded="false" aria-label="Now playing: Midnight City · M83"><i class="art"></i><span class="track">Midnight City · M83</span><span class="eq"><i></i><i></i><i></i><i></i></span></button>
-            <button class="w" data-key="meeting" data-pri="1" data-pop="agenda" aria-expanded="false"><svg><use href="#i-cal"/></svg>Design review&nbsp;&nbsp;10:30</button>
-            <button class="w" data-key="system" data-pri="0" data-pop="system" aria-expanded="false"><svg><use href="#i-cpu"/></svg><span class="vh">CPU </span>18%<span class="vh">,</span>&nbsp;&nbsp;<svg><use href="#i-mem"/></svg><span class="vh">memory </span>54%</button>
-            <div class="w snd" data-key="sound" data-pri="0"><span class="slide"><span><input type="range" min="0" max="100" value="64" aria-label="Volume"><span class="pct num">64%</span></span></span><svg role="img" aria-label="Sound"><use href="#i-snd"/></svg></div>
-            <div class="w" data-key="battery" data-pri="1"><svg style="width:19px"><use href="#i-bat"/></svg><span class="vh">Battery </span>82%</div>
-            <div class="w num clock" data-key="clock" data-pri="5" data-format="full">Thu 22 Oct&nbsp;&nbsp;09:41</div>
-            <a class="w dl" data-key="dl" data-pri="9" href="https://github.com/Seb-GRAF/StableBar/releases/download/v0.9.0/StableBar.dmg"><span><svg><use href="#i-down"/></svg>Download</span></a>
-          </div>
-        </div>
-
-        <div class="pop" id="pop">
-          <div class="pane menu" data-id="more">
-            <p>More widgets</p>
-            <button data-for="np" data-open="np"><i class="art"></i>Midnight City · M83</button>
-            <button data-for="meeting" data-open="agenda"><svg><use href="#i-cal"/></svg>Design review&nbsp;&nbsp;10:30</button>
-            <button data-for="system" data-open="system"><svg><use href="#i-cpu"/></svg>CPU 18%&nbsp;&nbsp;Memory 54%</button>
-            <button data-for="sound"><svg><use href="#i-snd"/></svg>Sound</button>
-            <button data-for="battery"><svg><use href="#i-bat"/></svg>Battery 82%</button>
-            <button data-for="clock" class="clock" data-format="full">Thu 22 Oct&nbsp;&nbsp;09:41</button>
-            <button data-for="app">Finder</button>
-            <button data-for="apple">Apple menu</button>
-          </div>
-          <div class="pane menu" data-id="site">
-            <a href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/README.md">User guide</a>
-            <a href="#store">Widget store</a>
-            <a href="https://github.com/Seb-GRAF/StableBar/tree/main/examples">Examples</a>
-            <a href="https://github.com/Seb-GRAF/StableBar/releases">Releases</a>
-            <a href="https://github.com/Seb-GRAF/StableBar">Source on GitHub</a>
-          </div>
-          <div class="pane np-pop" data-id="np">
-            <div class="src"><svg><use href="#i-note"/></svg>Music<svg class="go"><use href="#i-open"/></svg></div>
-            <div class="now"><i class="art"></i><div><b>Midnight City</b><b>M83</b><span>Hurry Up, We’re Dreaming</span></div></div>
-            <div class="meter"><i id="np-bar"></i></div>
-            <div class="times num"><span id="np-at">1:27</span><span>4:03</span></div>
-            <div class="ctrl">
-              <button aria-label="Shuffle"><svg><use href="#i-shuffle"/></svg></button>
-              <button aria-label="Previous"><svg><use href="#i-prev"/></svg></button>
-              <button class="play" id="np-play" aria-label="Pause"><svg class="pause"><use href="#i-pause"/></svg><svg class="resume"><use href="#i-play"/></svg></button>
-              <button aria-label="Next"><svg><use href="#i-next"/></svg></button>
-              <button aria-label="Repeat"><svg><use href="#i-repeat"/></svg></button>
-            </div>
-            <label class="vol"><svg><use href="#i-vol"/></svg><input type="range" min="0" max="100" value="64" aria-label="Volume"><svg><use href="#i-snd"/></svg></label>
-          </div>
-          <div class="pane" data-id="agenda">
-            <p class="hd">Today</p>
-            <div class="row"><span>09:15</span><span>Standup</span></div>
-            <div class="row"><span>10:30</span><span>Design review</span></div>
-            <div class="row"><span>12:30</span><span>Lunch with Ana</span></div>
-            <div class="row"><span>15:00</span><span>1:1 with Sam</span></div>
-            <div class="row"><span>16:30</span><span>Release planning</span></div>
-            <div class="sep"></div>
-            <div>Calendar</div>
-          </div>
-          <div class="pane" data-id="system" style="width:260px">
-            <p class="hd">System</p>
-            <svg class="graph" viewBox="0 0 220 44" preserveAspectRatio="none"><polyline points="0,30 14,27 28,31 42,24 56,26 70,22 84,29 98,25 112,27 126,18 140,23 154,13 168,28 182,24 196,26 210,20 220,22"/></svg>
-            <div class="kv"><span>CPU</span><span>18 %</span></div>
-            <div class="meter"><i style="width:18%"></i></div>
-            <div class="kv"><span>Memory</span><span>54 %</span></div>
-            <div class="meter"><i style="width:54%"></i></div>
-            <div class="sep"></div>
-            <div>Activity Monitor</div>
-          </div>
-        </div>
-
-        <div class="edit-ctl" id="edit-ctl">
-          <span class="hint idle">Right-click the bar, or</span>
-          <button class="start" id="edit-start">Edit Bar in Place</button>
-          <span class="hint editing-hint">Drag to move · − removes · + adds</span>
-          <button class="b" id="edit-undo" aria-label="Undo bar change" title="Undo (⌘Z)" disabled>Undo</button>
-          <button class="b done" id="edit-done" aria-label="Finish editing the bar" title="Finish editing the bar (Esc)">Done</button>
-        </div>
-        <div class="addpop" id="addpop" role="dialog" aria-label="Add here" hidden></div>
-        <div class="ctx" id="ctx" role="menu" hidden></div>
-        <p class="vh" id="edit-help">Drag it, or use the Left and Right arrow keys, to move it. Delete removes it.</p>
-        <p class="vh" id="edit-live" aria-live="polite"></p>
+  <div class="pop" id="pop">
+    <div class="pane menu" data-id="more">
+      <p>More widgets</p>
+      <button data-for="np" data-open="np"><i class="art"></i>Midnight City · M83</button>
+      <button data-for="meeting" data-open="agenda"><svg><use href="#i-cal"/></svg>Design review&nbsp;&nbsp;10:30</button>
+      <button data-for="system" data-open="system"><svg><use href="#i-cpu"/></svg>CPU 18%&nbsp;&nbsp;Memory 54%</button>
+      <button data-for="sound"><svg><use href="#i-snd"/></svg>Sound</button>
+      <button data-for="battery"><svg><use href="#i-bat"/></svg>Battery 82%</button>
+      <button data-for="clock" class="clock" data-format="full">Thu 22 Oct&nbsp;&nbsp;09:41</button>
+      <button data-for="app">Finder</button>
+      <button data-for="apple">Apple menu</button>
+    </div>
+    <div class="pane menu" data-id="site">
+      <a href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/README.md">User guide</a>
+      <a href="#store">Widget store</a>
+      <a href="https://github.com/Seb-GRAF/StableBar/tree/main/examples">Examples</a>
+      <a href="https://github.com/Seb-GRAF/StableBar/releases">Releases</a>
+      <a href="https://github.com/Seb-GRAF/StableBar">Source on GitHub</a>
+    </div>
+    <div class="pane np-pop" data-id="np">
+      <div class="src"><svg><use href="#i-note"/></svg>Music<svg class="go"><use href="#i-open"/></svg></div>
+      <div class="now"><i class="art"></i><div><b>Midnight City</b><b>M83</b><span>Hurry Up, We’re Dreaming</span></div></div>
+      <div class="meter"><i id="np-bar"></i></div>
+      <div class="times num"><span id="np-at">1:27</span><span>4:03</span></div>
+      <div class="ctrl">
+        <button aria-label="Shuffle"><svg><use href="#i-shuffle"/></svg></button>
+        <button aria-label="Previous"><svg><use href="#i-prev"/></svg></button>
+        <button class="play" id="np-play" aria-label="Pause"><svg class="pause"><use href="#i-pause"/></svg><svg class="resume"><use href="#i-play"/></svg></button>
+        <button aria-label="Next"><svg><use href="#i-next"/></svg></button>
+        <button aria-label="Repeat"><svg><use href="#i-repeat"/></svg></button>
       </div>
+      <label class="vol"><svg><use href="#i-vol"/></svg><input type="range" min="0" max="100" value="64" aria-label="Volume"><svg><use href="#i-snd"/></svg></label>
+    </div>
+    <div class="pane" data-id="agenda">
+      <p class="hd">Today</p>
+      <div class="row"><span>09:15</span><span>Standup</span></div>
+      <div class="row"><span>10:30</span><span>Design review</span></div>
+      <div class="row"><span>12:30</span><span>Lunch with Ana</span></div>
+      <div class="row"><span>15:00</span><span>1:1 with Sam</span></div>
+      <div class="row"><span>16:30</span><span>Release planning</span></div>
+      <div class="sep"></div>
+      <div>Calendar</div>
+    </div>
+    <div class="pane" data-id="system" style="width:260px">
+      <p class="hd">System</p>
+      <svg class="graph" viewBox="0 0 220 44" preserveAspectRatio="none"><polyline points="0,30 14,27 28,31 42,24 56,26 70,22 84,29 98,25 112,27 126,18 140,23 154,13 168,28 182,24 196,26 210,20 220,22"/></svg>
+      <div class="kv"><span>CPU</span><span>18 %</span></div>
+      <div class="meter"><i style="width:18%"></i></div>
+      <div class="kv"><span>Memory</span><span>54 %</span></div>
+      <div class="meter"><i style="width:54%"></i></div>
+      <div class="sep"></div>
+      <div>Activity Monitor</div>
+    </div>
+  </div>
 
-      <div class="layer theme-layer">
-        <div class="win theme-win" role="group" aria-labelledby="theme-title">
-          <div class="tb"><span class="tl"><i></i><i></i><i></i></span><b id="theme-title">Theme</b><span class="save">Save as Theme…</span></div>
-          <div class="cards" id="cards"></div>
-        </div>
+  <div class="edit-ctl" id="edit-ctl">
+    <span class="hint">Drag to move · − removes · + adds</span>
+    <button class="b" id="edit-undo" aria-label="Undo bar change" title="Undo (⌘Z)" disabled>Undo</button>
+    <button class="b done" id="edit-done" aria-label="Finish editing the bar" title="Finish editing the bar (Esc)">Done</button>
+  </div>
+  <div class="addpop" id="addpop" role="dialog" aria-label="Add here" hidden></div>
+  <div class="ctx" id="ctx" role="menu" hidden></div>
+  <p class="vh" id="edit-help">Drag it, or use the Left and Right arrow keys, to move it. Delete removes it.</p>
+  <p class="vh" id="edit-live" aria-live="polite"></p>
+</header>
+
+<main id="main">
+  <section class="hero" id="hero" data-state="hero" data-dusk="0" aria-labelledby="h-hero">
+    <div class="note hero-note" data-ink>
+      <h1 id="h-hero"><span class="lumen">A</span> <span class="lumen">native,</span> <span class="lumen">configurable</span> <span class="lumen">menu</span> <span class="lumen">bar</span> <span class="lumen">for</span> <span class="lumen">macOS.</span></h1>
+      <p class="lede">Themes, widgets and popups, set up in the app or in plain JSON.</p>
+      <div class="get">
+        <a class="cta" data-ink="pill" href="https://github.com/Seb-GRAF/StableBar/releases/download/v0.9.0/StableBar.dmg"><svg aria-hidden="true"><use href="#i-apple"/></svg>Download for Mac <span class="ver">v0.9.0</span></a>
+        <p class="req">macOS 14 or later on Apple silicon.<br>Free and open source, MIT License.</p>
       </div>
-      <div class="layer term-layer">
-        <div class="win term" role="group" aria-label="Terminal">
-          <div class="tb"><span class="tl"><i></i><i></i><i></i></span><span class="title">zsh</span></div>
-          <pre><button data-run="popup"><span class="p" aria-hidden="true">%</span> StableBar --popup agenda</button><button data-run="seconds"><span class="p" aria-hidden="true">%</span> StableBar --set clock '{"format":"HH:mm:ss"}'</button><div class="out" id="out" aria-live="polite">Click a line to run it on the bar above.</div></pre>
-        </div>
+      <div class="hero-foot">
+        <p class="cap">This is not a menu bar.* <small>*It is.</small></p>
+        <p class="quiet"><a href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/README.md">User guide</a><a href="https://github.com/Seb-GRAF/StableBar">GitHub</a></p>
       </div>
     </div>
-  </section>
 
-  <section class="stop first">
-    <h2>Configure all of it.</h2>
-    <div class="body">
-      <p><strong>Edit the bar where it is.</strong> Drag widgets between positions, take one off with −, and add one with + right where it should go. Changes save as you go, with Undo.</p>
-      <button class="more-link try" id="try-edit">Try it on the bar above</button>
-      <p>Every widget, style and popup is also a setting, per display and per kind of screen, in Settings or in plain JSON. StableBar applies the file when you save it, and keeps the last working bar if a change is invalid.</p>
-      <p><strong>Tiling, natively.</strong> Workspaces come straight from AeroSpace, yabai or OmniWM, with app icons or one item per window, and update in place instead of recreating windows.</p>
-      <a class="more-link" href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/widgets.md">Workspaces in the guide</a>
-    </div>
-    <div class="fig specs">
-      <div>
-        <h3>Window managers</h3>
-        <ul>
-          <li><b>AeroSpace and OmniWM</b><span>Workspace, monitor, window and focus events, live. Reconnects when the window manager restarts.</span></li>
-          <li><b>yabai</b><span>Spaces, windows and displays, refreshed by yabai signals.</span></li>
-          <li><b>One item per window</b><span>Window titles in the workspace; click one to focus it.</span></li>
-          <li><b>No tiling manager</b><span>macOS Spaces, and windows kept clear of the bar.</span></li>
-        </ul>
-      </div>
-      <div>
-        <h3>Configuration</h3>
-        <ul>
-          <li><b>On the bar itself</b><span>Drag, add and remove widgets where they sit, with Undo.</span></li>
-          <li><b>JSON with a schema</b><span>Completion and validation in your editor.</span></li>
-          <li><b>Every style</b><span>Fonts, colors, padding, corners and borders, per widget or per theme.</span></li>
-          <li><b>Per kind of screen</b><span>Its own layout, size and theme on the laptop or a monitor.</span></li>
-          <li><b>Profiles</b><span>A different bar on battery, in dark mode or for one app.</span></li>
-        </ul>
+    <div class="note key" data-ink role="group" aria-labelledby="key-t">
+      <p class="key-t" id="key-t"><span class="mouse">The light follows your pointer.</span><span class="touch">Drag sideways to steer the light.</span></p>
+      <div class="keys">
+        <button type="button" data-drop="sheep"><svg aria-hidden="true"><use href="#k-sheep"/></svg>Drop a sheep</button>
+        <button type="button" data-drop="duck"><svg aria-hidden="true"><use href="#k-duck"/></svg>Drop a duck</button>
+        <button type="button" class="night" aria-pressed="false"><svg aria-hidden="true"><use href="#k-moon"/></svg>Night</button>
       </div>
+      <p class="key-or"><span class="mouse">Or click the hill or the sea.</span><span class="touch">Or tap the hill or the sea.</span></p>
     </div>
   </section>
 
-  <section class="stop flip">
-    <h2>Popups</h2>
-    <div class="body">
-      <p>Any widget can open a popup. Build it from rows, columns, text, graphs, lists, buttons, sliders, toggles and search fields, filled with the widget's data.</p>
-      <a class="more-link" href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/popups.md">Custom popups in the guide</a>
-    </div>
-    <div class="fig" data-theme="built-in">
-      <div class="pops">
-        <div class="pop p1" style="width:260px">
-          <p class="hd">System</p>
-          <svg class="graph" viewBox="0 0 220 44" preserveAspectRatio="none"><polyline points="0,30 14,27 28,31 42,24 56,26 70,22 84,29 98,25 112,27 126,18 140,23 154,13 168,28 182,24 196,26 210,20 220,22"/></svg>
-          <div class="kv"><span>CPU</span><span>18 %</span></div>
-          <div class="meter"><i style="width:18%"></i></div>
-          <div class="kv"><span>Memory</span><span>54 %</span></div>
-          <div class="meter"><i style="width:54%"></i></div>
-          <div class="sep"></div>
-          <div>Activity Monitor</div>
-        </div>
-        <div class="pop p2">
-          <p class="hd">Today</p>
-          <div class="row"><span>09:15</span><span>Standup</span></div>
-          <div class="row"><span>10:30</span><span>Design review</span></div>
-          <div class="row"><span>12:30</span><span>Lunch with Ana</span></div>
-          <div class="row"><span>15:00</span><span>1:1 with Sam</span></div>
-          <div class="row"><span>16:30</span><span>Release planning</span></div>
-          <div class="sep"></div>
-          <div>Calendar</div>
-        </div>
-        <div class="pop p3">
-          <p class="hd">Controls</p>
-          <label class="ctl"><span>Level</span><input type="range" min="0" max="100" value="62" aria-label="Level"></label>
-          <label class="check"><input type="checkbox" checked>Enabled</label>
-          <div class="ctl"><span>Mode</span><div class="seg"><button aria-pressed="false">Quiet</button><button class="on" aria-pressed="true">Balanced</button><button aria-pressed="false">Focus</button></div></div>
-          <div class="sep"></div>
-          <input class="search" placeholder="Find an app" aria-label="Find an app">
-          <div class="apps"><div>Finder</div><div>Calendar</div><div>Activity Monitor</div><div>Terminal</div></div>
-        </div>
-      </div>
+  <section class="sec edit" id="edit" data-state="edit" data-dusk="0.18" aria-labelledby="h-edit">
+    <div class="note taped" data-ink>
+      <i class="tape2" aria-hidden="true"></i>
+      <h2 id="h-edit">Edit the bar where it is.</h2>
+      <p>Drag widgets between positions, take one off with −, and add one with + right where it should go. Changes save as you go, with Undo.</p>
+      <figure class="fig-edit screen" data-theme="built-in" role="img" aria-label="The bar while you edit it: a tray for each position, a minus on every widget, and a plus where one can be added. An arrow drags the calendar widget to the center.">
+        <span class="trays">
+          <span class="tray"><span class="tile"><span class="w apple"><svg style="width:13px;height:15px;fill:currentColor"><use href="#i-apple"/></svg></span><span class="minus"></span></span><span class="tile"><span class="w ws"><span class="wsi on">1</span><span class="wsi">2</span><span class="wsi">3</span></span><span class="minus"></span></span><span class="add"><svg><use href="#i-plus"/></svg></span></span>
+          <span class="tray center"><span class="add"><svg><use href="#i-plus"/></svg></span></span>
+          <span class="tray"><span class="add"><svg><use href="#i-plus"/></svg></span><span class="tile cal"><span class="w"><svg><use href="#i-cal"/></svg>Design review&nbsp;&nbsp;10:30</span><span class="minus"></span></span><span class="tile"><span class="w num clock" data-format="time">09:41</span><span class="minus"></span></span></span>
+        </span>
+        <svg class="arrow" viewBox="0 0 160 40" preserveAspectRatio="none"><use href="#k-arrow"/></svg>
+        <span class="drag-note">drag</span>
+      </figure>
+      <button class="try" id="try-edit" type="button">Try it on the bar above</button>
+      <p>Every widget, style and popup is also a setting, per display and per kind of screen, in Settings or in plain JSON. StableBar applies the file when you save it, and keeps the last working bar if a change is invalid.</p>
+      <p class="cap">The keeper rearranges things when bored.</p>
     </div>
   </section>
 
-  <section class="stop wide">
-    <h2>Themes</h2>
-    <div class="body">
-      <p>Choose a theme during setup, cycle through them on your own bar with <strong>Try&nbsp;Themes…</strong>, or get more from the store. <strong>Save&nbsp;as&nbsp;Theme…</strong> turns your own look into one.</p>
+  <section class="sec themes" id="themes" data-state="themes" data-dusk="0.4" aria-labelledby="h-themes">
+    <div class="note line-note" data-ink>
+      <h2 id="h-themes">Themes</h2>
+      <p>Choose a theme during setup, cycle through them on your own bar with <strong>Try&nbsp;Themes…</strong>, or get more from the Store. <strong>Save&nbsp;as&nbsp;Theme…</strong> turns your own look into one.</p>
+      <div class="line" role="group" aria-label="Theme for the bar at the top">
+        <button class="tag" type="button" data-theme-pick="built-in" aria-pressed="true"><span class="shot ws-fill" data-theme="built-in" aria-hidden="true"><span class="mini"><span class="strip"></span><span class="g"><span class="t ws"><span class="wsi on">1</span><span class="wsi">2</span><span class="wsi">3</span></span><span class="t">Finder</span></span><span class="g"><span class="t"><svg style="width:17px;height:14px"><use href="#i-bat"/></svg>82%</span><span class="t num">9:41</span></span></span></span><span class="nm">Built-in</span></button>
+        <button class="tag" type="button" data-theme-pick="catppuccin" aria-pressed="false"><span class="shot ws-fill" data-theme="catppuccin" aria-hidden="true"><span class="mini"><span class="strip"></span><span class="g"><span class="t ws"><span class="wsi on">1</span><span class="wsi">2</span><span class="wsi">3</span></span><span class="t">Finder</span></span><span class="g"><span class="t"><svg style="width:17px;height:14px"><use href="#i-bat"/></svg>82%</span><span class="t num">9:41</span></span></span></span><span class="nm">Catppuccin</span></button>
+        <button class="tag" type="button" data-theme-pick="gruvbox" aria-pressed="false"><span class="shot ws-text" data-theme="gruvbox" aria-hidden="true"><span class="mini"><span class="strip"></span><span class="g"><span class="t ws"><span class="wsi on">1</span><span class="wsi">2</span><span class="wsi">3</span></span><span class="t">Finder</span></span><span class="g"><span class="t"><svg style="width:17px;height:14px"><use href="#i-bat"/></svg>82%</span><span class="t num">9:41</span></span></span></span><span class="nm">Gruvbox</span></button>
+        <button class="tag" type="button" data-theme-pick="leman" aria-pressed="false"><span class="shot ws-fill" data-theme="leman" aria-hidden="true"><span class="mini"><span class="strip"></span><span class="g"><span class="t ws"><span class="wsi on">1</span><span class="wsi">2</span><span class="wsi">3</span></span><span class="t">Finder</span></span><span class="g"><span class="t"><svg style="width:17px;height:14px"><use href="#i-bat"/></svg>82%</span><span class="t num">9:41</span></span></span></span><span class="nm">Léman</span></button>
+        <button class="tag" type="button" data-theme-pick="nord" aria-pressed="false"><span class="shot ws-under" data-theme="nord" aria-hidden="true"><span class="mini"><span class="strip"></span><span class="g"><span class="t ws"><span class="wsi on">1</span><span class="wsi">2</span><span class="wsi">3</span></span><span class="t">Finder</span></span><span class="g"><span class="t"><svg style="width:17px;height:14px"><use href="#i-bat"/></svg>82%</span><span class="t num">9:41</span></span></span></span><span class="nm">Nord</span></button>
+        <button class="tag" type="button" data-theme-pick="notch" aria-pressed="false"><span class="shot ws-text" data-theme="notch" aria-hidden="true"><span class="mini"><span class="strip"></span><span class="g"><span class="t ws"><span class="wsi on">1</span><span class="wsi">2</span><span class="wsi">3</span></span><span class="t">Finder</span></span><span class="g"><span class="t"><svg style="width:17px;height:14px"><use href="#i-bat"/></svg>82%</span><span class="t num">9:41</span></span></span></span><span class="nm">Notch</span></button>
+        <button class="tag" type="button" data-theme-pick="phosphor" aria-pressed="false"><span class="shot ws-fill" data-theme="phosphor" aria-hidden="true"><span class="mini"><span class="strip"></span><span class="g"><span class="t ws"><span class="wsi on">1</span><span class="wsi">2</span><span class="wsi">3</span></span><span class="t">Finder</span></span><span class="g"><span class="t"><svg style="width:17px;height:14px"><use href="#i-bat"/></svg>82%</span><span class="t num">9:41</span></span></span></span><span class="nm">Phosphor</span></button>
+      </div>
       <p>Pick one here and the bar at the top changes with it.</p>
-      <a class="more-link" href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/themes.md">Themes in the guide</a>
-    </div>
-    <div class="fig">
-      <div class="board" id="board"><a class="card store" href="https://github.com/Seb-GRAF/stablebar-packages">More themes in the store<svg><use href="#i-open"/></svg></a></div>
+      <p class="links"><a href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/themes.md">Themes in the guide</a><a href="https://github.com/Seb-GRAF/stablebar-packages">More themes in the Store</a></p>
+      <p class="cap">Same lighthouse, different pyjamas.</p>
     </div>
   </section>
 
-  <section class="stop">
-    <h2>Any script is a widget</h2>
-    <div class="body">
+  <section class="sec widgets" id="widgets" data-state="widgets" data-dusk="0.6" aria-labelledby="h-widgets">
+    <div class="note notebook" data-ink="torn">
+      <h2 id="h-widgets">Any script is a widget.</h2>
       <p>A widget can run any command that prints text or a JSON object. Refresh it on a timer or on events, and give it a popup with graphs, lists and controls.</p>
-      <p>The command line queries and edits the running bar, and other tools can send it events.</p>
-      <a class="more-link" href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/create-a-widget.md">Create a widget</a>
-    </div>
-    <div class="fig scripts">
-      <div class="code">
-        <div class="fn"><span>widgets/disk.sh</span><span>sh</span></div>
-<pre tabindex="0"><span class="c">#!/bin/sh</span>
+      <div class="script">
+        <div class="code">
+          <div class="fn"><span>widgets/disk.sh</span><span>sh</span></div>
+<pre tabindex="0" aria-label="widgets/disk.sh"><span class="c">#!/bin/sh</span>
 used=$(df -h / | awk 'NR == 2 { print $5 }')
 printf '{"text":"%s","icon":"internaldrive"}' "$used"</pre>
+        </div>
+        <div class="result screen" data-theme="built-in" role="group" aria-label="The disk widget on the bar"><div class="w new"><svg><use href="#i-disk"/></svg>61%</div><div class="w"><svg style="width:19px"><use href="#i-bat"/></svg>82%</div><div class="w num clock" data-format="time">09:41</div></div>
       </div>
-      <div class="code">
-        <div class="fn"><span>config.json</span><span>json</span></div>
-<pre tabindex="0">{
-  "id": "disk", "type": "script",
-  "position": "right", "interval": 300,
-  "command": "~/.config/stablebar/widgets/disk.sh"
-}</pre>
-      </div>
-      <div class="result" data-theme="built-in" role="group" aria-label="The disk widget on the bar"><div class="w new"><svg><use href="#i-disk"/></svg>61%</div><div class="w"><svg style="width:19px"><use href="#i-bat"/></svg>82%</div><div class="w num clock" data-format="time">09:41</div></div>
-    </div>
-  </section>
+      <p class="links"><a href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/create-a-widget.md">Create a widget</a></p>
 
-  <section class="stop flip" id="store">
-    <h2>The Store</h2>
-    <div class="body">
-      <p>Add widgets other people wrote, from Settings or the bar’s <strong>+</strong>, without writing a script. Before anything runs, StableBar shows what a package does: the commands it runs, the hosts it contacts and the macOS permissions it uses.</p>
-      <p><strong>Checked on the way in.</strong> Every Store package is open source, and the Store builds and publishes it, not its author. A maintainer reads each version that runs commands, and StableBar checks every download against its SHA-256. Tokens stay in your Keychain, and versions stay pinned until you choose another.</p>
-      <p><strong>Your team’s own widgets.</strong> Host a private source for packages that can’t be public, and invite your team with a join link. A <code>stablebar://</code> link opens one package’s page in StableBar.</p>
-      <a class="more-link" href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/packages.md">Packages and the store in the guide</a>
-    </div>
-    <div class="fig">
-      <div class="win store-win" data-theme="built-in" role="group" aria-label="StableBar Settings, Packages">
-        <div class="tb"><span class="tl"><i></i><i></i><i></i></span><span class="tabs" aria-hidden="true"><span>Installed</span><span class="on">Store</span></span><span class="find" aria-hidden="true">Search packages</span></div>
-        <div class="kinds" aria-hidden="true"><span class="on">All</span><span>Widgets</span><span>Themes</span></div>
-        <div class="pkgs">
-          <div class="pkg" data-id="now-playing"><div class="pv"><div class="w"><i class="art"></i>Midnight City · M83</div></div><b>Now playing</b><p>Shows the playing or paused track from Music or Spotify with its artwork and bouncing bars while it plays.</p><div class="by"><span>Widget · by Seb-GRAF</span><span class="state"><svg viewBox="0 0 12 12" aria-hidden="true"><use href="#p-check"/></svg>Installed</span></div></div>
-          <div class="pkg" data-id="ai-usage"><div class="pv"><div class="w"><svg><use href="#i-asterisk"/></svg><span class="gauge"><i style="--p:42%"></i><i style="--p:64%"></i></span>42%&nbsp;&nbsp;<svg><use href="#i-term"/></svg><span class="gauge"><i style="--p:18%"></i><i style="--p:30%"></i></span>18%</div></div><b>AI usage</b><p>Shows your Claude Code and Codex limits in one widget, with reset countdowns and weekly pace.</p><div class="by"><span>Widget · by Seb-GRAF</span><button class="pkg-get" aria-label="Get AI usage">Get</button></div></div>
-          <div class="pkg" data-id="dock-badges"><div class="pv"><div class="w"><svg><use href="#i-badge"/></svg>2</div></div><b>Dock badges</b><p>Shows the total unread count from running apps’ Dock badges, with a popup that opens each app.</p><div class="by"><span>Widget · by Seb-GRAF</span><button class="pkg-get" aria-label="Get Dock badges">Get</button></div></div>
-          <div class="pkg" data-id="github-notifications"><div class="pv"><div class="w"><svg><use href="#i-bell"/></svg>3</div></div><b>GitHub notifications</b><p>Shows your unread GitHub notification count and lists the latest ones, each opening on GitHub.</p><div class="by"><span>Widget · by Seb-GRAF</span><button class="pkg-get" aria-label="Get GitHub notifications">Get</button></div></div>
-          <div class="pkg" data-id="homebrew-outdated"><div class="pv"><div class="w"><svg><use href="#i-box"/></svg>4</div></div><b>Homebrew outdated</b><p>Shows how many Homebrew formulae and casks are outdated, and lists them.</p><div class="by"><span>Widget · by Seb-GRAF</span><button class="pkg-get" aria-label="Get Homebrew outdated">Get</button></div></div>
-          <div class="pkg" data-id="weather"><div class="pv"><div class="w"><svg><use href="#i-weather"/></svg>14°</div></div><b>Weather</b><p>Shows the current temperature and conditions from wttr.in, with feels-like, humidity, wind and today’s high and low.</p><div class="by"><span>Widget · by Seb-GRAF</span><button class="pkg-get" aria-label="Get Weather">Get</button></div></div>
+      <div class="store" id="store">
+        <h3>Or get one from the Store.</h3>
+        <p>Add widgets other people wrote, from Settings or the bar’s <strong>+</strong>, without writing a script. Before anything runs, StableBar shows what a package does: the commands it runs, the hosts it contacts and the macOS permissions it uses.</p>
+        <div class="store-fig">
+          <div class="win store-win" data-theme="built-in" role="group" aria-label="StableBar Settings, Packages">
+            <div class="tb"><span class="tl"><i></i><i></i><i></i></span><span class="tabs" aria-hidden="true"><span>Installed</span><span class="on">Store</span></span><span class="find" aria-hidden="true">Search packages</span></div>
+            <div class="pkgs">
+              <div class="pkg" data-id="now-playing"><div class="pv"><div class="w"><i class="art"></i>Midnight City · M83</div></div><b>Now playing</b><p>Shows the playing or paused track from Music or Spotify with its artwork and bouncing bars while it plays.</p><div class="by"><span>Widget · by Seb-GRAF</span><span class="state"><svg viewBox="0 0 12 12" aria-hidden="true"><use href="#p-check"/></svg>Installed</span></div></div>
+              <div class="pkg" data-id="ai-usage"><div class="pv"><div class="w"><svg><use href="#i-asterisk"/></svg><span class="gauge"><i style="--p:42%"></i><i style="--p:64%"></i></span>42%&nbsp;&nbsp;<svg><use href="#i-term"/></svg><span class="gauge"><i style="--p:18%"></i><i style="--p:30%"></i></span>18%</div></div><b>AI usage</b><p>Shows your Claude Code and Codex limits in one widget, with reset countdowns and weekly pace.</p><div class="by"><span>Widget · by Seb-GRAF</span><button class="pkg-get" aria-label="Get AI usage">Get</button></div></div>
+              <div class="pkg" data-id="dock-badges"><div class="pv"><div class="w"><svg><use href="#i-badge"/></svg>2</div></div><b>Dock badges</b><p>Shows the total unread count from running apps’ Dock badges, with a popup that opens each app.</p><div class="by"><span>Widget · by Seb-GRAF</span><button class="pkg-get" aria-label="Get Dock badges">Get</button></div></div>
+              <div class="pkg" data-id="github-notifications"><div class="pv"><div class="w"><svg><use href="#i-bell"/></svg>3</div></div><b>GitHub notifications</b><p>Shows your unread GitHub notification count and lists the latest ones, each opening on GitHub.</p><div class="by"><span>Widget · by Seb-GRAF</span><button class="pkg-get" aria-label="Get GitHub notifications">Get</button></div></div>
+              <div class="pkg" data-id="homebrew-outdated"><div class="pv"><div class="w"><svg><use href="#i-box"/></svg>4</div></div><b>Homebrew outdated</b><p>Shows how many Homebrew formulae and casks are outdated, and lists them.</p><div class="by"><span>Widget · by Seb-GRAF</span><button class="pkg-get" aria-label="Get Homebrew outdated">Get</button></div></div>
+              <div class="pkg" data-id="weather"><div class="pv"><div class="w"><svg><use href="#i-weather"/></svg>14°</div></div><b>Weather</b><p>Shows the current temperature and conditions from wttr.in, with feels-like, humidity, wind and today’s high and low.</p><div class="by"><span>Widget · by Seb-GRAF</span><button class="pkg-get" aria-label="Get Weather">Get</button></div></div>
+            </div>
+          </div>
+          <div class="addpop review pkg-review" id="pkg-review" role="dialog" aria-label="Review package" hidden></div>
         </div>
+        <p class="links"><a href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/packages.md">Packages and the Store in the guide</a></p>
       </div>
-      <div class="addpop review pkg-review" id="pkg-review" role="dialog" aria-label="Review package" hidden></div>
+      <p class="cap">This one was written by a sheep. Allegedly.</p>
     </div>
   </section>
 
-  <section class="stop">
-    <h2>Every display</h2>
-    <div class="body">
-      <p>Placement that knows about the notch, widgets per kind of screen, and a separate bar for each screen setup. Each kind of screen can have its own theme.</p>
-      <a class="more-link" href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/layout.md">Displays and layout</a>
-    </div>
-    <div class="setup">
-      <figure class="cap monitor" data-theme="leman">
-        <div class="bar ws-fill" aria-hidden="true">
-          <div class="g gl">
-            <div class="w ws"><span class="wsi">1 <img class="ai" src="images/apps/ghostty.webp" alt="" width="14" height="14"></span><span class="wsi on">2 <img class="ai" src="images/apps/t3-code.webp" alt="" width="14" height="14"><img class="ai" src="images/apps/finder.svg" alt="" width="14" height="14"></span><span class="wsi">3 <img class="ai" src="images/apps/vscodium.webp" alt="" width="14" height="14"><img class="ai" src="images/apps/chromium.webp" alt="" width="14" height="14"></span><span class="wsi">4 <img class="ai" src="images/apps/ollama.webp" alt="" width="14" height="14"></span></div>
-            <div class="w app"><span class="name">Finder</span></div>
-          </div>
-          <div class="g">
-            <div class="w meeting"><svg><use href="#i-cal"/></svg>Design review&nbsp;&nbsp;10:30</div>
-            <div class="w cpu open"><svg><use href="#i-cpu"/></svg>18%&nbsp;&nbsp;<svg><use href="#i-mem"/></svg>54%</div>
-            <div class="w num clock" data-format="full">Thu 22 Oct&nbsp;&nbsp;09:41</div>
-          </div>
-        </div>
-        <div class="pop open" aria-hidden="true">
-          <p class="hd">System</p>
-          <svg class="graph" viewBox="0 0 220 44" preserveAspectRatio="none"><polyline points="0,26 14,29 28,24 42,27 56,21 70,25 84,23 98,28 112,22 126,24 140,16 154,22 168,25 182,19 196,23 210,27 220,24"/></svg>
-          <div class="kv"><span>CPU</span><span>18 %</span></div>
-          <div class="meter"><i style="width:18%"></i></div>
-          <div class="kv"><span>Memory</span><span>54 %</span></div>
-          <div class="meter"><i style="width:54%"></i></div>
-          <div class="sep"></div>
-          <div>Activity Monitor</div>
-        </div>
-        <figcaption><b>Monitor.</b> Léman, with more room for widgets.</figcaption>
-      </figure>
-      <figure class="cap laptop" data-theme="notch">
-        <span class="notch"></span>
-        <div class="bar ws-text" aria-hidden="true">
-          <div class="g">
-            <div class="w ws"><span class="wsi">1</span><span class="wsi on">2</span><span class="wsi">3</span></div>
-            <div class="w app"><span class="name">Finder</span></div>
-          </div>
-          <div class="g">
-            <div class="w"><svg style="width:19px"><use href="#i-bat"/></svg>82%</div>
-            <div class="w num clock" data-format="time">09:41</div>
-          </div>
+  <section class="sec tiling" id="tiling" data-state="tiling" data-dusk="0.8" aria-labelledby="h-tiling">
+    <div class="note postcard" data-ink>
+      <div class="pc-msg">
+        <h2 id="h-tiling">Tiling, natively.</h2>
+        <p>Workspaces come straight from AeroSpace, yabai or OmniWM, with app icons or one item per window, and update in place instead of recreating windows. Without a tiling manager, the bar shows macOS Spaces.</p>
+      </div>
+      <div class="pc-addr" aria-hidden="true">
+        <span class="stamp"><svg viewBox="0 0 40 48"><path d="M6 44h28M12 44l3-30h10l3 30" fill="#fff" stroke="#111" stroke-width="1.6" stroke-linejoin="round"/><path d="M14.2 22h11.6l.7 7H13.5zM13 35h14l.6 6H12.4z" fill="#ff4a36"/><path d="M14 14h12l-6-8z" fill="#ff4a36" stroke="#111" stroke-width="1.6" stroke-linejoin="round"/><circle cx="20" cy="17.5" r="2.2" fill="#fff" stroke="#111" stroke-width="1.2"/><path d="M23 16 38 10v14z" fill="#ffe04a" opacity=".85"/></svg></span>
+        <svg class="postmark" viewBox="0 0 74 50"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><circle cx="22" cy="25" r="17"/><circle cx="22" cy="25" r="12.5" stroke-dasharray="2 3"/><path d="M42 13c5-3 9 3 14 0s9-3 14 0M42 25c5-3 9 3 14 0s9-3 14 0M42 37c5-3 9 3 14 0s9-3 14 0"/></g></svg>
+        <span class="to">To</span>
+        <span class="addr">AeroSpace</span>
+        <span class="addr">yabai</span>
+        <span class="addr">OmniWM</span>
+      </div>
+      <div class="pc-ws screen" data-theme="built-in">
+        <div class="ws-big ws-fill" role="group" aria-label="Workspaces">
+          <button class="wsi" data-ws="1" aria-label="Workspace 1" aria-pressed="false">1 <img class="ai" src="images/apps/ghostty.webp" alt="" width="14" height="14"></button>
+          <button class="wsi on" data-ws="2" aria-label="Workspace 2" aria-pressed="true">2 <img class="ai" src="images/apps/t3-code.webp" alt="" width="14" height="14"><img class="ai" src="images/apps/finder.svg" alt="" width="14" height="14"></button>
+          <button class="wsi" data-ws="3" aria-label="Workspace 3" aria-pressed="false">3 <img class="ai" src="images/apps/vscodium.webp" alt="" width="14" height="14"><img class="ai" src="images/apps/chromium.webp" alt="" width="14" height="14"></button>
+          <button class="wsi" data-ws="4" aria-label="Workspace 4" aria-pressed="false">4 <img class="ai" src="images/apps/ollama.webp" alt="" width="14" height="14"></button>
         </div>
-        <figcaption><b>Laptop.</b> Notch, split around the notch and blending into it, with the battery only here.</figcaption>
-      </figure>
+      </div>
+      <div class="pc-foot">
+        <p class="cap">Every window gets its own little room.</p>
+        <p class="links"><a href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/widgets.md">Workspaces in the guide</a></p>
+      </div>
     </div>
   </section>
 
-  <section class="install">
-    <div class="copy">
-      <h2>See it on your own bar.</h2>
-      <p class="lede">Setup walks you through a preset, a theme and a placement, and shows each choice on your real bar. Nothing is saved until you click Finish setup.</p>
+  <section class="sec install" id="install" data-state="install" data-dusk="1" aria-labelledby="h-install">
+    <div class="note recipe" data-ink>
+      <h2 id="h-install">See it on your own bar.</h2>
+      <ol class="steps">
+        <li>Download StableBar.</li>
+        <li>Open it from Applications.</li>
+        <li>Setup walks you through a preset, a theme and a placement, and shows each choice on your real bar.</li>
+        <li>Nothing is saved until you click <strong>Finish setup</strong>.</li>
+      </ol>
       <div class="get">
-        <a class="cta" href="https://github.com/Seb-GRAF/StableBar/releases/download/v0.9.0/StableBar.dmg"><svg aria-hidden="true"><use href="#i-apple"/></svg>Download for Mac <span class="ver">v0.9.0</span></a>
+        <a class="cta" data-ink="pill" href="https://github.com/Seb-GRAF/StableBar/releases/download/v0.9.0/StableBar.dmg"><svg aria-hidden="true"><use href="#i-apple"/></svg>Download for Mac <span class="ver">v0.9.0</span></a>
         <p class="req">macOS 14 or later on Apple silicon.<br>Releases update themselves.</p>
       </div>
-      <p class="req brew">Or with Homebrew: <code>brew install --cask seb-graf/tap/stablebar</code></p>
-    </div>
-    <div class="desktop">
-      <div class="wall"></div>
-      <div class="win dmg" id="dmg">
-        <div class="tb"><span class="tl"><i></i><i></i><i></i></span><span class="title">StableBar</span></div>
-        <div class="stage">
-          <div class="slot"><div class="ico"><img class="app-ico" id="app-ico" src="images/icon-256.png" alt="" draggable="false"></div>StableBar</div>
-          <div class="arrow"><svg viewBox="0 0 72 14" aria-hidden="true"><path d="M1 7h68M63 1.5 69 7l-6 5.5"/></svg>Drag to download</div>
-          <div class="slot"><div class="ico"><svg class="folder" id="folder" viewBox="0 0 80 64" aria-hidden="true"><path d="M4 12a6 6 0 0 1 6-6h18l6 6h36a6 6 0 0 1 6 6v36a6 6 0 0 1-6 6H10a6 6 0 0 1-6-6z" fill="#3b8ee8"/><path d="M4 22a6 6 0 0 1 6-6h60a6 6 0 0 1 6 6v32a6 6 0 0 1-6 6H10a6 6 0 0 1-6-6z" fill="#62adf5"/><path d="M33 47h14M40 30v13M35 38l5 5 5-5" fill="none" stroke="#2f7dd6" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Applications</div>
-        </div>
-        <p class="foot">Then open StableBar from Applications.</p>
-      </div>
+      <p class="brew">Or with Homebrew: <code>brew install --cask seb-graf/tap/stablebar</code></p>
+      <p class="cap">The lamp is on. Come in.</p>
     </div>
   </section>
-  </main>
+</main>
 
-  <footer>
-    <span>StableBar is a free, open-source alternative to SketchyBar, built by Sebastien Graf and Steve Mendes Reis. It is available under the MIT License, including commercial use and redistribution.</span>
+<footer class="site-foot">
+  <p>StableBar is a free, open-source alternative to SketchyBar, built by Sebastien Graf and Steve Mendes Reis. It is available under the MIT License, including commercial use and redistribution.</p>
+  <nav aria-label="Footer">
     <a href="https://github.com/Seb-GRAF/StableBar">Source on GitHub</a>
     <a href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/README.md">User guide</a>
     <a href="https://github.com/Seb-GRAF/stablebar-packages">Widget store</a>
@@ -454,7 +365,7 @@ <h2>See it on your own bar.</h2>
     <a href="https://github.com/Seb-GRAF/StableBar/releases">Releases</a>
     <a href="privacy.html">Privacy Policy</a>
     <a href="terms.html">Terms of Service</a>
-  </footer>
-</div>
+  </nav>
+</footer>
 </body>
 </html>
diff --git a/site/main.js b/site/main.js
index 36b85a69..1c4e7200 100644
--- a/site/main.js
+++ b/site/main.js
@@ -1,3 +1,8 @@
+/* stablebar.app: the bar demos, the paper notes, and the drawing behind them (scene.js).
+   Everything here works without the drawing; the drawing only adds to it. */
+(() => {
+"use strict";
+const root = document.documentElement;
 const THEMES = [
   ["built-in", "Built-in", "ws-fill"],
   ["catppuccin", "Catppuccin", "ws-fill"],
@@ -7,7 +12,6 @@ const THEMES = [
   ["notch", "Notch", "ws-text"],
   ["phosphor", "Phosphor", "ws-fill"],
 ];
-const desk = document.getElementById("desk");
 const dock = document.getElementById("dock");
 const bar = document.getElementById("bar");
 const gl = document.getElementById("gl");
@@ -17,11 +21,25 @@ const more = bar.querySelector(".more");
 const pop = document.getElementById("pop");
 const panes = [...pop.querySelectorAll(".pane")];
 const menu = pop.querySelector('[data-id="more"]');
+const heroNote = document.querySelector(".hero-note");
 const reduce = matchMedia("(prefers-reduced-motion: reduce)");
 const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
 let openId = null;
 let editing = false;
 
+/* The drawing, if scene.js is there. Every call goes through S, so a scene that fails never takes the page with it. */
+let scene = null;
+let sceneFailed = false;
+function S(method, ...args) {
+  if (!scene || typeof scene[method] !== "function") return undefined;
+  try { return scene[method](...args); } catch (err) {
+    if (!sceneFailed) { sceneFailed = true; console.warn("The drawing failed:", err); }
+    return undefined;
+  }
+}
+/* The bar's height when it isn't being edited; Nord is shorter */
+const restHeight = () => parseFloat(getComputedStyle(dock).getPropertyValue("--rest-h")) || 40;
+
 /* Now playing: the track moves on while it plays */
 const track = { at: 87, length: 243, playing: true };
 const trackAt = document.getElementById("np-at");
@@ -49,28 +67,19 @@ function tick() {
 tick();
 setInterval(tick, 1000);
 
-/* Sample bars: three workspaces, Finder, battery and clock, as in Settings' theme cards */
-function mini() {
-  return `<div class="mini"><div class="strip"></div>
-    <div class="g"><span class="t ws"><span class="wsi on">1</span><span class="wsi">2</span><span class="wsi">3</span></span><span class="t"><span>Finder</span></span></div>
-    <div class="g"><span class="t"><svg style="width:17px;height:14px"><use href="#i-bat"/></svg>82%</span><span class="t num">9:41</span></div></div>`;
-}
-const cards = document.getElementById("cards");
-const store = document.querySelector("#board .store");
-for (const [id, name, ws] of THEMES) {
-  const card = `<button class="card" data-theme-pick="${id}"><div class="shot ${ws}" data-theme="${id}" aria-hidden="true">${mini()}</div><div class="nm">${name}<svg viewBox="0 0 12 12"><use href="#p-check"/></svg></div></button>`;
-  cards.insertAdjacentHTML("beforeend", card);
-  store.insertAdjacentHTML("beforebegin", card);
-}
-
+/* Themes: the tags on the washing line restyle the bar, and dress the lighthouse to match */
 function setTheme(id) {
-  desk.dataset.theme = id;
+  dock.dataset.theme = id;
   bar.className = `bar ${THEMES.find(t => t[0] === id)[2]}`;
   for (const b of document.querySelectorAll("[data-theme-pick]")) {
     b.classList.toggle("on", b.dataset.themePick === id);
     b.setAttribute("aria-pressed", b.dataset.themePick === id);
   }
-  requestAnimationFrame(fit);
+  S("setTheme", id);
+  requestAnimationFrame(() => {
+    fit();
+    S("setTopInset", restHeight());
+  });
 }
 for (const b of document.querySelectorAll("[data-theme-pick]")) b.addEventListener("click", () => setTheme(b.dataset.themePick));
 
@@ -119,6 +128,8 @@ function place() {
   pop.style.width = `${pane.offsetWidth}px`;
   pop.style.height = `${pane.offsetHeight}px`;
 }
+/* The control that opens a widget's popup: the widget itself, or the app name in StableBar's menus */
+const popButton = w => w.matches("button") ? w : w.querySelector(":scope > button");
 /* Opening another widget's popup morphs the open one into it, as the app does */
 function open(id) {
   if (id !== openId && anchorFor(id).hidden) return;
@@ -129,7 +140,7 @@ function open(id) {
   for (const p of panes) p.classList.toggle("on", p.dataset.id === openId);
   for (const w of bar.querySelectorAll("[data-pop]")) {
     w.classList.toggle("open", w.dataset.pop === openId || Boolean(openId && anchorFor(openId) === w));
-    if (w.matches("button")) w.setAttribute("aria-expanded", w.classList.contains("open"));
+    popButton(w)?.setAttribute("aria-expanded", w.classList.contains("open"));
   }
   place();
 }
@@ -139,29 +150,33 @@ for (const w of bar.querySelectorAll("[data-pop]")) w.addEventListener("click",
   open(w.dataset.pop);
 });
 for (const b of menu.querySelectorAll("[data-open]")) b.addEventListener("click", e => { e.stopPropagation(); open(b.dataset.open); });
-document.addEventListener("click", e => { if (openId && !e.target.closest(".pop, .win, .card, .w")) open(openId); });
+document.addEventListener("click", e => { if (openId && !e.target.closest(".pop, .win, .tag, .w")) open(openId); });
 /* Escape closes the popup and returns focus to its widget */
 document.addEventListener("keydown", e => {
   if (e.key !== "Escape" || !openId) return;
   const from = pop.contains(document.activeElement) && anchorFor(openId);
   open(openId);
-  if (from) from.focus();
+  if (from) (popButton(from) || from).focus();
 });
 
-/* Workspaces: the focus highlight slides to the one you click, as on the real bar */
+/* Workspaces: the focus highlight slides to the one you click, as on the real bar.
+   The postcard's large widget is the same four workspaces, and the drawing's beach huts follow. */
 const ind = bar.querySelector(".ind");
 function slide() {
   const on = bar.querySelector(".wsi.on");
   ind.style.setProperty("--x", `${on.offsetLeft}px`);
   ind.style.setProperty("--w", `${on.offsetWidth}px`);
 }
-for (const el of bar.querySelectorAll(".wsi")) el.addEventListener("click", () => {
-  bar.querySelectorAll(".wsi").forEach(e => {
-    e.classList.toggle("on", e === el);
-    e.setAttribute("aria-pressed", e === el);
-  });
+function focusWorkspace(n) {
+  for (const e of document.querySelectorAll(".wsi[data-ws]")) {
+    const on = e.dataset.ws === String(n);
+    e.classList.toggle("on", on);
+    e.setAttribute("aria-pressed", on);
+  }
   slide();
-});
+  S("setWorkspace", n);
+}
+for (const el of document.querySelectorAll(".wsi[data-ws]")) el.addEventListener("click", () => focusWorkspace(Number(el.dataset.ws)));
 
 /* The app's menus open on hover when the bar has room for them */
 const finder = bar.querySelector(".finder");
@@ -187,48 +202,12 @@ volume.addEventListener("input", () => {
   volume.style.setProperty("--v", `${volume.value}%`);
 });
 
-/* Controls */
-for (const seg of document.querySelectorAll(".seg")) for (const b of seg.querySelectorAll("button")) b.addEventListener("click", () => {
-  seg.querySelectorAll("button").forEach(x => {
-    x.classList.toggle("on", x === b);
-    x.setAttribute("aria-pressed", x === b);
-  });
-});
-for (const s of document.querySelectorAll(".search")) s.addEventListener("input", () => {
-  const q = s.value.toLowerCase();
-  s.nextElementSibling.querySelectorAll("div").forEach(d => d.hidden = !d.textContent.toLowerCase().includes(q));
-  place();
-});
-
-/* The terminal runs its commands against the bar */
-const out = document.getElementById("out");
-for (const b of document.querySelectorAll("[data-run]")) b.addEventListener("click", e => {
-  e.stopPropagation();
-  endEditing();
-  if (b.dataset.run === "popup") {
-    open("agenda");
-    out.textContent = `{"popup":"agenda","open":${openId === "agenda"}}`;
-  } else {
-    bar.querySelector(".clock").dataset.format = "seconds";
-    menu.querySelector(".clock").dataset.format = "seconds";
-    tick();
-    fit();
-    out.textContent = '{"set":"clock"}';
-  }
-  b.classList.add("ran");
-});
-
-/* The bar stays at the top of the window once the desk reaches it,
-   and becomes the page's header once the desk has scrolled away. */
+/* Once the page scrolls, a strip of paper slides in behind the bar. Once the headline has gone
+   under it, the bar becomes the page's header. While the bar is being edited it stays the demo. */
 function dockState() {
-  const r = desk.getBoundingClientRect();
-  const header = r.bottom <= 120;
-  const docked = r.top <= 0;
-  dock.classList.toggle("docked", docked);
-  dock.style.left = docked ? `${r.left}px` : "";
-  dock.style.width = docked ? `${r.width}px` : "";
+  dock.classList.toggle("scrolled", scrollY > 2);
+  const header = !editing && heroNote.getBoundingClientRect().bottom < restHeight() + 56;
   if (header === dock.classList.contains("header")) return;
-  if (header) endEditing();
   dock.classList.add("measure");
   dock.classList.toggle("header", header);
   fit();
@@ -237,133 +216,11 @@ function dockState() {
   dock.classList.remove("measure");
   dock.classList.toggle("header", header);
   if (openId) open(openId);
-  setTimeout(fit, 450);
 }
-
-let queued = false;
-addEventListener("scroll", () => {
-  if (queued) return;
-  queued = true;
-  requestAnimationFrame(() => { queued = false; dockState(); });
-}, { passive: true });
-
-/* Drag a window by its title bar. It leans into the motion and glides when let go. */
-const layers = [...desk.querySelectorAll(".layer")];
-const px = (el, name) => parseFloat(el.style.getPropertyValue(name)) || 0;
-function bounds(layer) {
-  return {
-    x: [8 - layer.offsetLeft, desk.clientWidth - layer.offsetWidth - 8 - layer.offsetLeft],
-    y: [bar.offsetHeight + 8 - layer.offsetTop, desk.clientHeight - 48 - layer.offsetTop],
-  };
-}
-function moveTo(layer, dx, dy) {
-  const b = bounds(layer);
-  const x = clamp(dx, ...b.x), y = clamp(dy, ...b.y);
-  layer.style.setProperty("--dx", `${x}px`);
-  layer.style.setProperty("--dy", `${y}px`);
-  return [x !== dx, y !== dy];
-}
-for (const layer of layers) {
-  const handle = layer.querySelector(".tb");
-  let drag = null, frame = 0, vx = 0, vy = 0;
-
-  function animate() {
-    const tilt = px(layer, "--tilt");
-    if (!drag) {
-      const [hitX, hitY] = moveTo(layer, px(layer, "--dx") + vx * 16, px(layer, "--dy") + vy * 16);
-      vx = hitX ? 0 : vx * .92;
-      vy = hitY ? 0 : vy * .92;
-    } else {
-      vx *= .85;
-    }
-    const target = drag ? clamp(vx * 6, -8, 8) : 0;
-    layer.style.setProperty("--tilt", `${tilt + (target - tilt) * .2}deg`);
-    if (drag || Math.abs(vx) + Math.abs(vy) > .01 || Math.abs(tilt) > .05) frame = requestAnimationFrame(animate);
-    else layer.style.setProperty("--tilt", "0deg");
-  }
-
-  handle.addEventListener("pointerdown", e => {
-    if (e.button !== 0) return;
-    e.preventDefault();
-    handle.setPointerCapture(e.pointerId);
-    layers.forEach(l => l.style.zIndex = l === layer ? 5 : 4);
-    const r = layer.getBoundingClientRect();
-    layer.style.transformOrigin = `${e.clientX - r.left}px ${e.clientY - r.top}px`;
-    drag = { x: e.clientX, y: e.clientY, dx: px(layer, "--dx"), dy: px(layer, "--dy"), lx: e.clientX, ly: e.clientY, t: e.timeStamp };
-    vx = vy = 0;
-    layer.classList.add("dragging");
-    cancelAnimationFrame(frame);
-    if (!reduce.matches) frame = requestAnimationFrame(animate);
-  });
-  handle.addEventListener("pointermove", e => {
-    if (!drag) return;
-    moveTo(layer, drag.dx + e.clientX - drag.x, drag.dy + e.clientY - drag.y);
-    const dt = Math.max(1, e.timeStamp - drag.t);
-    vx = vx * .5 + (e.clientX - drag.lx) / dt * .5;
-    vy = vy * .5 + (e.clientY - drag.ly) / dt * .5;
-    Object.assign(drag, { lx: e.clientX, ly: e.clientY, t: e.timeStamp });
-  });
-  const release = () => {
-    if (!drag) return;
-    drag = null;
-    layer.classList.remove("dragging");
-  };
-  handle.addEventListener("pointerup", release);
-  handle.addEventListener("pointercancel", release);
-}
-
-/* The disk image: drag StableBar onto Applications to download the DMG the buttons link */
-const ico = document.getElementById("app-ico");
-const folder = document.getElementById("folder");
-const dmg = document.querySelector(".install .cta").href;
-let grab = null;
-const overFolder = e => {
-  const r = folder.getBoundingClientRect();
-  return e.clientX > r.left - 20 && e.clientX < r.right + 20 && e.clientY > r.top - 20 && e.clientY < r.bottom + 20;
-};
-ico.addEventListener("pointerdown", e => {
-  if (ico.classList.contains("in")) return;
-  e.preventDefault();
-  ico.setPointerCapture(e.pointerId);
-  grab = { x: e.clientX, y: e.clientY };
-  ico.classList.add("dragging");
-});
-ico.addEventListener("pointermove", e => {
-  if (!grab) return;
-  ico.style.transform = `translate(${e.clientX - grab.x}px, ${e.clientY - grab.y}px) scale(1.06)`;
-  folder.classList.toggle("over", overFolder(e));
+/* The bar measures itself again once the header's menus and Download have finished opening or closing */
+bar.addEventListener("transitionend", e => {
+  if (e.propertyName === "grid-template-columns" && e.target.matches(".site .menus, .w.dl")) fit();
 });
-ico.addEventListener("pointerup", e => {
-  if (!grab) return;
-  grab = null;
-  ico.classList.remove("dragging");
-  folder.classList.remove("over");
-  if (!overFolder(e)) { ico.style.transform = ""; return; }
-  // Started from the drop itself, so the browser counts it as the visitor's own download.
-  location.href = dmg;
-  const f = folder.getBoundingClientRect();
-  const home = ico.parentElement.getBoundingClientRect();
-  ico.style.transform = `translate(${f.left + f.width / 2 - (home.left + home.width / 2)}px, ${f.top + f.height / 2 - (home.top + home.height / 2)}px) scale(.4)`;
-  ico.classList.add("in");
-  setTimeout(() => {
-    ico.style.transition = "none";
-    ico.style.transform = "";
-    requestAnimationFrame(() => requestAnimationFrame(() => {
-      ico.style.transition = "";
-      ico.classList.remove("in");
-    }));
-  }, 1600);
-});
-ico.addEventListener("pointercancel", () => { grab = null; ico.classList.remove("dragging"); ico.style.transform = ""; });
-
-/* The product pictures ease in as they scroll into view */
-const io = new IntersectionObserver(entries => {
-  for (const e of entries) if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
-}, { rootMargin: "0px 0px -10% 0px" });
-for (const el of document.querySelectorAll(".pops, .board, .scripts, .store-win, .setup, .install .desktop")) {
-  el.classList.add("reveal");
-  io.observe(el);
-}
 
 /* Edit Bar in Place: the bar becomes its own editor, as in the app. Each position gets a tray,
    widgets keep their look, − takes one off, + adds one where it sits, and Undo and Done wait below. */
@@ -373,10 +230,11 @@ const NAMES = { apple: "Apple menu", ws: "Workspaces", app: "App menus", np: "No
 const ease = "cubic-bezier(.22, 1, .36, 1)";
 const editCtl = document.getElementById("edit-ctl");
 const undoButton = document.getElementById("edit-undo");
+const tryEdit = document.getElementById("try-edit");
 const addPop = document.getElementById("addpop");
 const ctx = document.getElementById("ctx");
 const live = document.getElementById("edit-live");
-let past = [], future = [], drag = null, adding = null, made = 0;
+let past = [], future = [], drag = null, adding = null, made = 0, opener = null;
 
 const lane = i => trays[i].querySelector(".lane");
 const tilesIn = (i, except) => [...lane(i).querySelectorAll(":scope > .tile:not([hidden])")].filter(t => t !== except);
@@ -405,11 +263,13 @@ function tile(w) {
   return t;
 }
 
-function beginEditing() {
-  if (editing || dock.classList.contains("header")) return;
+function beginEditing(from) {
+  if (editing) return;
   if (openId) open(openId);
   closeMenu();
+  opener = from || (bar.contains(document.activeElement) ? document.activeElement : null);
   editing = true;
+  dockState();
   past = [];
   future = [];
   sound.classList.remove("expand");
@@ -417,7 +277,7 @@ function beginEditing() {
   for (const [i, g] of trays.entries()) {
     const l = document.createElement("div");
     l.className = "lane";
-    for (const w of [...g.children].filter(w => w.dataset.key && !w.matches(".more, .dl, .site"))) l.append(tile(w));
+    for (const w of [...g.children].filter(w => w.dataset.key && !w.matches(".more, .dl, .site, .moon"))) l.append(tile(w));
     const add = document.createElement("button");
     add.className = "add";
     add.title = add.ariaLabel = `Add a widget to ${TRAYS[i]}`;
@@ -469,9 +329,16 @@ function endEditing() {
   editing = false;
   dock.classList.remove("editing", "dragging");
   updateControls();
-  requestAnimationFrame(() => { fit(); slide(); });
+  requestAnimationFrame(() => { fit(); slide(); dockState(); });
   say("Finished editing the bar.");
 }
+/* Done and Escape hand focus back to whatever started editing */
+function finishEditing() {
+  const back = opener;
+  opener = null;
+  endEditing();
+  if (back?.isConnected && !back.closest("[inert]")) back.focus({ preventScroll: true });
+}
 
 function updateControls() {
   undoButton.disabled = !past.length;
@@ -588,7 +455,7 @@ function lift(e) {
   const copy = t.firstElementChild.cloneNode(true);
   copy.querySelector(".ind")?.remove();
   ghost.append(copy);
-  desk.append(ghost);
+  dock.append(ghost);
   drag.ghost = ghost;
   t.classList.add("lifted");
   dock.classList.add("dragging");
@@ -783,7 +650,7 @@ function add(c) {
   record(before, `Added ${c.name} to ${TRAYS[i]}.`);
 }
 
-/* The Store section: Get reviews a package, and Add to bar puts it on the bar at the top of the page */
+/* The Store: Get reviews a package, and Add to bar puts it on the bar at the top of the page */
 const pkgReview = document.getElementById("pkg-review");
 const storeWin = document.querySelector(".store-win");
 let reviewing = null;
@@ -797,6 +664,7 @@ function closeReview() {
   reviewing = null;
   pkgReview.hidden = true;
   storeWin.classList.remove("sheet");
+  storeWin.inert = false;
   if (pkgReview.contains(document.activeElement) && get.isConnected) get.focus({ preventScroll: true });
 }
 document.querySelector(".pkgs").addEventListener("click", e => {
@@ -809,6 +677,8 @@ document.querySelector(".pkgs").addEventListener("click", e => {
   pkgReview.innerHTML = reviewHTML(c, "Cancel", "Add to bar");
   pkgReview.hidden = false;
   storeWin.classList.add("sheet");
+  // the sheet covers the window, as on the Mac: what's under it can't take focus until it closes
+  storeWin.inert = true;
   pkgReview.querySelector(".back").addEventListener("click", closeReview);
   pkgReview.querySelector(".go").addEventListener("click", () => {
     closeReview();
@@ -845,41 +715,29 @@ function showMenu(x, y, items) {
 }
 function closeMenu() { ctx.hidden = true; }
 bar.addEventListener("contextmenu", e => {
-  if (dock.classList.contains("header") || innerWidth < 720 || e.target.closest(".menus a")) return;
+  if (innerWidth < 720 || e.target.closest(".menus a")) return;
   e.preventDefault();
   const t = editing && e.target.closest(".tile");
-  if (!editing) showMenu(e.clientX, e.clientY, [["Edit Bar in Place", beginEditing]]);
-  else if (t) showMenu(e.clientX, e.clientY, [["Move Left", () => step(t, -1)], ["Move Right", () => step(t, 1)], ["Remove Widget", () => remove(t)], null, ["Finish Editing Bar", endEditing]]);
-  else showMenu(e.clientX, e.clientY, [["Finish Editing Bar", endEditing]]);
+  if (!editing) showMenu(e.clientX, e.clientY, [["Edit Bar in Place", () => beginEditing(opener)]]);
+  else if (t) showMenu(e.clientX, e.clientY, [["Move Left", () => step(t, -1)], ["Move Right", () => step(t, 1)], ["Remove Widget", () => remove(t)], null, ["Finish Editing Bar", finishEditing]]);
+  else showMenu(e.clientX, e.clientY, [["Finish Editing Bar", finishEditing]]);
 });
+bar.addEventListener("contextmenu", () => { if (!editing && bar.contains(document.activeElement)) opener = document.activeElement; }, true);
 ctx.addEventListener("keydown", e => {
   const items = [...ctx.querySelectorAll("button")], k = items.indexOf(document.activeElement);
   if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); items[(k + (e.key === "ArrowDown" ? 1 : -1) + items.length) % items.length].focus(); }
 });
 
-document.getElementById("edit-start").addEventListener("click", e => {
+/* From the Edit section: the bar above turns into its own editor, right where you are */
+tryEdit.addEventListener("click", e => {
   e.stopPropagation();
-  beginEditing();
+  beginEditing(tryEdit);
   bar.querySelector(".tile")?.focus({ preventScroll: true });
 });
-/* From the Configure section: back to the bar, then edit it */
-document.getElementById("try-edit").addEventListener("click", e => {
-  e.stopPropagation();
-  scrollTo({ top: 0, behavior: reduce.matches ? "auto" : "smooth" });
-  const until = performance.now() + 2500;
-  const go = () => {
-    if (scrollY > 1) { if (performance.now() < until) requestAnimationFrame(go); return; }
-    dockState();
-    beginEditing();
-    bar.querySelector(".tile")?.focus({ preventScroll: true });
-  };
-  requestAnimationFrame(go);
-});
 undoButton.addEventListener("click", e => { e.stopPropagation(); undo(); });
 document.getElementById("edit-done").addEventListener("click", e => {
   e.stopPropagation();
-  endEditing();
-  document.getElementById("edit-start").focus({ preventScroll: true });
+  finishEditing();
 });
 document.addEventListener("click", e => {
   if (!ctx.hidden && !e.target.closest(".ctx")) closeMenu();
@@ -892,7 +750,7 @@ document.addEventListener("keydown", e => {
     if (!ctx.hidden) { closeMenu(); return; }
     if (adding) { closeAdd(); return; }
     if (drag?.started) { settle(false); drag = null; return; }
-    if (editing) { endEditing(); document.getElementById("edit-start").focus({ preventScroll: true }); }
+    if (editing) finishEditing();
   } else if (editing && (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z" && !e.target.closest("input")) {
     e.preventDefault();
     e.shiftKey ? redo() : undo();
@@ -900,29 +758,260 @@ document.addEventListener("keydown", e => {
 });
 addEventListener("scroll", closeMenu, { passive: true });
 
-/* Light and dark: starts from the system setting, remembers the visitor's choice */
+/* ---------- The drawing ---------- */
+
+/* Scrolling brings the evening: each section holds its own hour, and the hours blend in between.
+   The night switch brings the night at once and keeps it. */
+const sections = [...document.querySelectorAll("main > section[data-state]")];
+let marks = [];
+function measureMarks() {
+  marks = sections.map(s => {
+    const r = s.getBoundingClientRect(), top = r.top + scrollY, h = r.height, pad = Math.min(h * .25, innerHeight * .4);
+    return { name: s.dataset.state, d: Number(s.dataset.dusk), top, bottom: top + h, a: top + pad, b: top + h - pad };
+  });
+}
+const smooth = t => t * t * (3 - 2 * t);
+function hour() {
+  const y = scrollY + innerHeight / 2;
+  let d = marks[0].d, name = marks[0].name;
+  for (let i = 0; i < marks.length; i++) {
+    const m = marks[i], n = marks[i + 1];
+    if (y >= m.top) name = m.name;
+    if (y >= m.a) d = m.d;
+    if (n && y > m.b && y < n.a) d = m.d + (n.d - m.d) * smooth((y - m.b) / (n.a - m.b));
+  }
+  return { d, name };
+}
+let lastDusk = -1, lastState = "";
+function updateDusk() {
+  if (!marks.length) return;
+  const { d, name } = hour();
+  const dusk = root.dataset.mode === "dark" ? 1 : d;
+  if (Math.abs(dusk - lastDusk) > .001) { lastDusk = dusk; S("setDusk", dusk); }
+  if (name !== lastState) { lastState = name; S("setState", name); }
+}
+
+/* Words in the headline light up when the beam crosses them */
+const lumens = [...document.querySelectorAll(".lumen")];
+let lumRects = null;
+function measureLumens() {
+  lumRects = lumens.map(el => {
+    const r = el.getBoundingClientRect();
+    return { el, x: r.left + r.width / 2, y: r.top + r.height / 2, on: el.classList.contains("lit"), seen: r.bottom > 0 && r.top < innerHeight };
+  });
+}
+function lightWords(s) {
+  if (!lumRects) measureLumens();
+  const I = s.beamI();
+  for (const r of lumRects) {
+    const on = r.seen && s.inBeam(r.x, r.y) * (.45 + .55 * I) > .35;
+    if (on !== r.on) { r.on = on; r.el.classList.toggle("lit", on); }
+  }
+}
+
+/* The night switch: the moon tile on the bar and the key's Night. Starts from the system setting,
+   remembers the visitor's choice, shared with the privacy and terms pages. */
 const themeColor = document.querySelector('meta[name="theme-color"]');
-const modeButton = document.getElementById("mode");
+const nightSwitches = [document.getElementById("night"), document.querySelector(".key .night")];
 function setMode(mode) {
   root.dataset.mode = mode;
-  themeColor.content = mode === "light" ? "#f5f0e8" : "#15110d";
-  modeButton.setAttribute("aria-pressed", mode === "dark");
+  themeColor.content = mode === "light" ? "#86cbf2" : "#232662";
+  for (const b of nightSwitches) b.setAttribute("aria-pressed", mode === "dark");
+  updateDusk();
 }
-setMode(root.dataset.mode);
-modeButton.addEventListener("click", () => {
+for (const b of nightSwitches) b.addEventListener("click", e => {
+  e.stopPropagation();
   const mode = root.dataset.mode === "light" ? "dark" : "light";
   localStorage.setItem("mode", mode);
-  if (document.startViewTransition && !reduce.matches) document.startViewTransition(() => setMode(mode));
-  else setMode(mode);
+  setMode(mode);
 });
 
-addEventListener("resize", () => { fit(); dockState(); });
-document.fonts.ready.then(fit);
+measureMarks();
+try {
+  if (window.Hill?.Scene) scene = new window.Hill.Scene(document.getElementById("scene"), { topInset: restHeight(), dusk: root.dataset.mode === "dark" ? 1 : hour().d });
+} catch (err) {
+  console.warn("The drawing didn't start:", err);
+  scene = null;
+}
+root.classList.toggle("has-scene", Boolean(scene));
+
+if (scene) {
+  scene.onFrame = s => {
+    try { lightWords(s); } catch (err) {
+      if (!sceneFailed) { sceneFailed = true; console.warn("The drawing failed:", err); }
+    }
+  };
+
+  /* The pointer and a finger steer the light and stir the grass, clouds and water.
+     On touch only a sideways drag steers; the page keeps its vertical scrolling (touch-action: pan-y). */
+  addEventListener("pointermove", e => S("pointer", e.clientX, e.clientY, e.pointerType), { passive: true });
+  addEventListener("pointerdown", e => S("pointer", e.clientX, e.clientY, e.pointerType), { passive: true });
+  addEventListener("pointerup", e => { if (e.pointerType !== "mouse") S("release"); }, { passive: true });
+  addEventListener("pointercancel", () => S("release"), { passive: true });
+  let swipe = null;
+  addEventListener("touchstart", e => { const t = e.touches[0]; swipe = t && { x: t.clientX, y: t.clientY, side: null }; }, { passive: true });
+  addEventListener("touchmove", e => {
+    const t = e.touches[0];
+    if (!t || !swipe) return;
+    if (swipe.side === null && Math.hypot(t.clientX - swipe.x, t.clientY - swipe.y) > 8) swipe.side = Math.abs(t.clientX - swipe.x) > Math.abs(t.clientY - swipe.y);
+    if (swipe.side) S("pointer", t.clientX, t.clientY, "touch");
+  }, { passive: true });
+  addEventListener("touchend", () => { swipe = null; S("release"); }, { passive: true });
+  addEventListener("touchcancel", () => { swipe = null; S("release"); }, { passive: true });
+  root.addEventListener("mouseleave", () => S("release"));
+  addEventListener("blur", () => S("release"));
+
+  /* A click or tap on the landscape, not on the page, drops something there.
+     A click that only closes a popup or a menu doesn't. */
+  let overlay = false;
+  document.addEventListener("click", () => { overlay = Boolean(openId || adding || !ctx.hidden || reviewing); }, true);
+  document.addEventListener("click", e => {
+    if (overlay || editing || e.detail === 0) return;
+    if (e.target.closest("a, button, input, label, pre, .note, .dock, .site-foot, [role='dialog']")) return;
+    if (String(getSelection?.() || "")) return;
+    S("tap", e.clientX, e.clientY);
+  });
+
+  /* The key's buttons drop the same surprises, for keyboards and screen readers too */
+  for (const b of document.querySelectorAll("[data-drop]")) b.addEventListener("click", () => S("surprise", b.dataset.drop));
+}
+
+/* ---------- The pen: every note, Download button, tag and key button gets a felt-pen outline,
+   drawn at its size in three slightly different states that the CSS steps through (the boil).
+   Inline SVG paths rather than images, so an outline never counts as the page's largest paint. ---------- */
+const INK = ".note, .cta, .tag, .keys button";
+const hash = n => { const s = Math.sin(n * 127.1 + 311.7) * 43758.5453; return s - Math.floor(s); };
+const noise = x => { const i = Math.floor(x), f = x - i, u = f * f * (3 - 2 * f); return (hash(i) + (hash(i + 1) - hash(i)) * u) * 2 - 1; };
+const r1 = v => Math.round(v * 10) / 10;
+const PAD = 8;
+
+/* The torn top of the notebook page: one tooth every 12 px or so, the same each time */
+function teeth(W, seed) {
+  const n = Math.max(6, Math.round(W / 12)), out = [];
+  for (let i = 0; i <= n; i++) out.push([W * i / n, 2 + 8 * hash(seed + i * 1.7) * (i % 2 ? 1 : .45)]);
+  return out;
+}
+/* The centre line of an outline, clockwise, starting a little way along the top */
+function perimeter(W, H, shape, radii, seed) {
+  const pts = [], step = 6;
+  const seg = (ax, ay, bx, by) => {
+    const n = Math.max(1, Math.round(Math.hypot(bx - ax, by - ay) / step));
+    for (let i = 0; i < n; i++) pts.push([ax + (bx - ax) * i / n, ay + (by - ay) * i / n]);
+  };
+  const arc = (cx, cy, r, a0, a1) => {
+    const n = Math.max(2, Math.round(r * Math.abs(a1 - a0) / step));
+    for (let i = 0; i < n; i++) { const a = a0 + (a1 - a0) * i / n; pts.push([cx + Math.cos(a) * r, cy + Math.sin(a) * r]); }
+  };
+  const [tl, tr, br, bl] = radii.map(r => Math.min(r, W / 2, H / 2));
+  const x0 = PAD, y0 = PAD, x1 = PAD + W, y1 = PAD + H, Q = Math.PI / 2;
+  if (shape === "torn") {
+    const top = teeth(W, seed).map(([x, y]) => [x0 + x, y0 + y]);
+    for (let i = 0; i < top.length - 1; i++) seg(...top[i], ...top[i + 1]);
+    seg(x1, top.at(-1)[1], x1, y1 - br); arc(x1 - br, y1 - br, br, 0, Q);
+    seg(x1 - br, y1, x0 + bl, y1); arc(x0 + bl, y1 - bl, bl, Q, 2 * Q);
+    seg(x0, y1 - bl, x0, top[0][1]);
+    for (let i = 0; i < 3; i++) pts.push(top[i]);
+    return pts;
+  }
+  const sx = x0 + tl + (W - tl - tr) * (.12 + .2 * hash(seed));
+  seg(sx, y0, x1 - tr, y0); arc(x1 - tr, y0 + tr, tr, -Q, 0);
+  seg(x1, y0 + tr, x1, y1 - br); arc(x1 - br, y1 - br, br, 0, Q);
+  seg(x1 - br, y1, x0 + bl, y1); arc(x0 + bl, y1 - bl, bl, Q, 2 * Q);
+  seg(x0, y1 - bl, x0, y0 + tl); arc(x0 + tl, y0 + tl, tl, 2 * Q, 3 * Q);
+  seg(x0 + tl, y0, Math.min(sx + 26, x1 - tr), y0);
+  return pts;
+}
+/* A felt-pen stroke: a ribbon that wobbles a little, swells and thins, and tapers where the pen lifts.
+   The three boil states share the shape and differ only in the fine jitter. */
+function outline(W, H, shape, radii, seed, boil, weight) {
+  const c = perimeter(W, H, shape, radii, seed), n = c.length, L = [], R = [], j = seed + boil * 9.1;
+  for (let i = 0; i < n; i++) {
+    const [ax, ay] = c[Math.max(0, i - 1)], [bx, by] = c[Math.min(n - 1, i + 1)];
+    const len = Math.hypot(bx - ax, by - ay) || 1, nx = -(by - ay) / len, ny = (bx - ax) / len;
+    const off = noise(i * .031 + seed * 7.7) * 1.4 + noise(i * .21 + j * 3.1) * .55;
+    const ends = Math.min(1, (i + 1) / 7, (n - i) / 6);
+    const w = weight * (.8 + .22 * noise(i * .07 + seed * 5.3 + 40) + .1 * noise(i * .3 + j * 2.3)) * (.3 + .7 * ends) / 2;
+    const [x, y] = c[i];
+    L.push([x + nx * (off + w), y + ny * (off + w)]);
+    R.push([x + nx * (off - w), y + ny * (off - w)]);
+  }
+  const ring = [...L, ...R.reverse()];
+  let d = `M${r1(ring[0][0])} ${r1(ring[0][1])}`;
+  for (let i = 1; i < ring.length; i++) {
+    const [x, y] = ring[i], [nx, ny] = ring[(i + 1) % ring.length];
+    d += `Q${r1(x)} ${r1(y)} ${r1((x + nx) / 2)} ${r1((y + ny) / 2)}`;
+  }
+  return `${d}Z`;
+}
+function ink(el, seed) {
+  const W = el.offsetWidth, H = el.offsetHeight;
+  if (!W || !H || el.dataset.inkSize === `${W}x${H}`) return;
+  el.dataset.inkSize = `${W}x${H}`;
+  const shape = el.dataset.ink === "torn" ? "torn" : el.matches(".cta, .keys button") ? "pill" : "rect";
+  const cs = getComputedStyle(el);
+  const radii = shape === "pill" ? [H / 2, H / 2, H / 2, H / 2]
+    : [cs.borderTopLeftRadius, cs.borderTopRightRadius, cs.borderBottomRightRadius, cs.borderBottomLeftRadius].map(v => parseFloat(v) || 0);
+  const weight = el.matches(".note") ? 2.9 : 2.5;
+  let svg = el.querySelector(":scope > .pen");
+  if (!svg) {
+    svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("class", "pen");
+    svg.setAttribute("aria-hidden", "true");
+    el.append(svg);
+  }
+  svg.setAttribute("viewBox", `0 0 ${W + PAD * 2} ${H + PAD * 2}`);
+  svg.innerHTML = [0, 1, 2].map(k => `<path class="p${k}" d="${outline(W, H, shape, radii, seed, k, weight)}"/>`).join("");
+  if (shape === "torn") el.style.setProperty("--torn", `polygon(${teeth(W, seed).map(([x, y]) => `${r1(x)}px ${r1(y)}px`).join(", ")}, 100% 100%, 0 100%)`);
+  el.classList.add("inked");
+}
+const inked = [...document.querySelectorAll(INK)];
+const seeds = new Map(inked.map((el, i) => [el, 1 + i * 2.3]));
+const pen = new ResizeObserver(entries => { for (const e of entries) ink(e.target, seeds.get(e.target)); });
+for (const el of inked) pen.observe(el);
+
+/* The boil rests after a few quiet seconds, like the drawing */
+let idleTimer = 0, lastWake = 0;
+function wake() {
+  const now = performance.now();
+  if (now - lastWake < 250) return;
+  lastWake = now;
+  root.classList.remove("idle");
+  clearTimeout(idleTimer);
+  idleTimer = setTimeout(() => root.classList.add("idle"), 6000);
+}
+for (const type of ["pointermove", "pointerdown", "keydown", "scroll", "wheel", "touchstart"]) addEventListener(type, wake, { passive: true });
+wake();
+
+/* ---------- Start ---------- */
+let queued = false;
+addEventListener("scroll", () => {
+  if (queued) return;
+  queued = true;
+  requestAnimationFrame(() => {
+    queued = false;
+    dockState();
+    updateDusk();
+    lumRects = null;
+  });
+}, { passive: true });
+addEventListener("resize", () => {
+  fit();
+  dockState();
+  measureMarks();
+  updateDusk();
+  lumRects = null;
+  S("setTopInset", restHeight());
+});
+document.fonts.ready.then(() => {
+  fit();
+  measureMarks();
+  updateDusk();
+  lumRects = null;
+});
+setMode(root.dataset.mode);
 setTheme("built-in");
+focusWorkspace(2);
 fit();
 dockState();
-
-/* Arrival: the headline settles, the bar's widgets come in from the left, then the windows and the agenda */
-bar.querySelectorAll(".g > .w").forEach((w, i) => w.style.setProperty("--i", i));
-requestAnimationFrame(() => requestAnimationFrame(() => root.classList.add("arrived")));
-if (innerWidth >= 720) setTimeout(() => { if (!openId && !editing) open("agenda"); }, reduce.matches ? 0 : 1100);
+updateDusk();
+})();
diff --git a/site/privacy.html b/site/privacy.html
index 71874028..54a9a047 100644
--- a/site/privacy.html
+++ b/site/privacy.html
@@ -6,14 +6,16 @@
 <title>Privacy Policy · StableBar</title>
 <meta name="description" content="What StableBar and stablebar.app collect: no account, no analytics, and no personal data.">
 <link rel="canonical" href="https://stablebar.app/privacy.html">
-<meta name="theme-color" content="#15110d">
+<meta name="theme-color" content="#86cbf2">
 <link rel="icon" href="images/icon-64.png">
 <link rel="stylesheet" href="style.css">
 <script>
 document.documentElement.dataset.mode = localStorage.getItem("mode") || (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
+if (document.documentElement.dataset.mode === "dark") document.querySelector('meta[name="theme-color"]').content = "#232662";
 </script>
 </head>
-<body>
+<body class="doc">
+<a class="skip" href="#main">Skip to content</a>
 <div class="page">
   <header class="top">
     <a class="brand" href="./"><img src="images/icon-64.png" alt="">StableBar</a>
diff --git a/site/scene.js b/site/scene.js
new file mode 100644
index 00000000..a3de7dbd
--- /dev/null
+++ b/site/scene.js
@@ -0,0 +1,1748 @@
+/* Lighthouse Hill, in absurd ink: the scene behind stablebar.app.
+   A one-eyed lighthouse in a pom-pom hat on a hill above the sea, drawn in Canvas 2D by one
+   felt-pen hand: tapered ink ribbons that boil a little, and flat colours printed slightly off
+   the line. main.js creates one scene and forwards input to it (the API is at the end). */
+(() => {
+'use strict';
+
+/* ---------- small maths ---------- */
+const TAU = Math.PI * 2;
+const clamp = (v, a = 0, b = 1) => (v < a ? a : v > b ? b : v);
+const lerp = (a, b, t) => a + (b - a) * t;
+const smooth = (e0, e1, x) => { const t = clamp((x - e0) / (e1 - e0)); return t * t * (3 - 2 * t); };
+const easeOut = t => t * (2 - t);
+const hash = n => { const s = Math.sin(n * 127.1 + 311.7) * 43758.5453; return s - Math.floor(s); };
+const noise = x => { const i = Math.floor(x), f = x - i, u = f * f * (3 - 2 * f); return lerp(hash(i), hash(i + 1), u) * 2 - 1; };
+const rng = seed => { let a = (seed >>> 0) || 1; return () => { a = (a + 0x6D2B79F5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; };
+const hex = h => [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)];
+const mix = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];
+const mul = (a, b) => [a[0] * b[0] / 255, a[1] * b[1] / 255, a[2] * b[2] / 255];
+const rgba = (c, a = 1) => `rgba(${c[0] | 0},${c[1] | 0},${c[2] | 0},${a})`;
+const angDiff = (a, b) => { let d = (a - b) % TAU; if (d > Math.PI) d -= TAU; if (d < -Math.PI) d += TAU; return d; };
+const stops = list => list.map(([d, p]) => [d, Object.fromEntries(Object.entries(p).map(([k, v]) => [k, hex(v)]))]);
+function palAt(list, d) {
+  let i = 0;
+  while (i < list.length - 2 && d > list[i + 1][0]) i++;
+  const [d0, p0] = list[i], [d1, p1] = list[i + 1], t = clamp((d - d0) / (d1 - d0));
+  const out = {};
+  for (const k in p0) out[k] = mix(p0[k], p1[k], t);
+  return out;
+}
+/* Catmull-Rom through control points, then evenly spaced points every `step` px */
+function curve(ctrl, step, closed = false) {
+  const p = closed ? [ctrl[ctrl.length - 1], ...ctrl, ctrl[0], ctrl[1]] : [ctrl[0], ...ctrl, ctrl[ctrl.length - 1]];
+  const raw = [];
+  for (let i = 1; i < p.length - 2; i++) {
+    const p0 = p[i - 1], p1 = p[i], p2 = p[i + 1], p3 = p[i + 2];
+    for (let s = 0; s < 8; s++) {
+      const t = s / 8, t2 = t * t, t3 = t2 * t;
+      const f = k => 0.5 * (2 * p1[k] + (-p0[k] + p2[k]) * t + (2 * p0[k] - 5 * p1[k] + 4 * p2[k] - p3[k]) * t2 + (-p0[k] + 3 * p1[k] - 3 * p2[k] + p3[k]) * t3);
+      raw.push([f(0), f(1)]);
+    }
+  }
+  if (!closed) raw.push(ctrl[ctrl.length - 1].slice());
+  return dens(raw, step, closed);
+}
+/* Points every `step` px along a polyline */
+function dens(pts, step, closed = false) {
+  const out = [], src = closed ? [...pts, pts[0]] : pts;
+  for (let i = 0; i < src.length - 1; i++) {
+    const [x0, y0] = src[i], [x1, y1] = src[i + 1];
+    const n = Math.max(1, Math.ceil(Math.hypot(x1 - x0, y1 - y0) / step));
+    for (let k = 0; k < n; k++) out.push([lerp(x0, x1, k / n), lerp(y0, y1, k / n)]);
+  }
+  if (!closed) out.push(src[src.length - 1].slice());
+  return out;
+}
+const ellipse = (cx, cy, rx, ry, n = 32, a0 = 0, a1 = TAU, rot = 0) => {
+  const out = [], c = Math.cos(rot), s = Math.sin(rot);
+  for (let i = 0; i < n; i++) {
+    const a = lerp(a0, a1, i / (a1 - a0 >= TAU - 1e-6 ? n : n - 1)), x = Math.cos(a) * rx, y = Math.sin(a) * ry;
+    out.push([cx + x * c - y * s, cy + x * s + y * c]);
+  }
+  return out;
+};
+function poly(c, pts, close = true, dx = 0, dy = 0) {
+  c.beginPath();
+  for (let i = 0; i < pts.length; i++) i ? c.lineTo(pts[i][0] + dx, pts[i][1] + dy) : c.moveTo(pts[i][0] + dx, pts[i][1] + dy);
+  if (close) c.closePath();
+}
+function inPoly(pts, x, y) {
+  let ins = false;
+  for (let i = 0, j = pts.length - 1; i < pts.length; j = i++) {
+    const [xi, yi] = pts[i], [xj, yj] = pts[j];
+    if ((yi > y) !== (yj > y) && x < (xj - xi) * (y - yi) / ((yj - yi) || 1e-9) + xi) ins = !ins;
+  }
+  return ins;
+}
+/* A cumulus: the upper envelope of a few bumps over a flat base */
+function cloudPts(cx, cy, w, seed) {
+  const R = rng(seed), n = 4 + ((R() * 2) | 0), bumps = [];
+  for (let i = 0; i < n; i++) {
+    const fx = (i + 0.5) / n;
+    bumps.push([cx - w / 2 + fx * w + (R() - 0.5) * w * 0.06, w * (0.14 + R() * 0.1) * (1.3 - Math.abs(fx - 0.5))]);
+  }
+  const x0 = cx - w / 2 - w * 0.05, x1 = cx + w / 2 + w * 0.05, top = [];
+  for (let i = 0; i <= 64; i++) {
+    const x = lerp(x0, x1, i / 64);
+    let y = cy;
+    for (const [bx, r] of bumps) { const dx = x - bx; if (Math.abs(dx) < r) y = Math.min(y, cy - Math.sqrt(r * r - dx * dx) * 0.92); }
+    top.push([x, y]);
+  }
+  return top.filter((p, i) => p[1] < cy - 0.3 || i === 0 || i === top.length - 1);
+}
+
+/* ---------- colours ---------- */
+/* Five hours of the day. The felt pen stays black; only the printed colours move. */
+const PAL = stops([
+  [0,    { sky: '#86CBF2', sky2: '#B8E2F8', sea: '#2E58D8', sea2: '#8DB0FF', foam: '#FFFFFF', hill: '#83CF5F', hill2: '#66B24C', ink: '#111111', paper: '#FFFFFF', beam: '#FFE04A', cloud: '#FFFFFF', far: '#A2C9EC', glass: '#B8E2F8' }],
+  [0.2,  { sky: '#A6B6F4', sky2: '#E6C4EE', sea: '#2E50CC', sea2: '#93AAFF', foam: '#FFFFFF', hill: '#7CC95E', hill2: '#5FA84B', ink: '#111111', paper: '#FFFBF4', beam: '#FFE04A', cloud: '#FFFFFF', far: '#B9B4E6', glass: '#E6C4EE' }],
+  [0.44, { sky: '#FF8F73', sky2: '#FFC07F', sea: '#3043B8', sea2: '#9EA3FF', foam: '#FFF1E6', hill: '#6DB65A', hill2: '#539A4A', ink: '#111111', paper: '#FFF7EC', beam: '#FFE04A', cloud: '#FFE1CF', far: '#D88BA0', glass: '#FFC07F' }],
+  [0.7,  { sky: '#6A4CC4', sky2: '#B0609C', sea: '#22287A', sea2: '#6E77D8', foam: '#D9CCFF', hill: '#3E7D56', hill2: '#2F6447', ink: '#111111', paper: '#F0E6FF', beam: '#FFE24E', cloud: '#C3B2EE', far: '#5E4B9A', glass: '#FFD86A' }],
+  [1,    { sky: '#232662', sky2: '#30357E', sea: '#14184A', sea2: '#4A54B4', foam: '#9EA6E8', hill: '#244F3E', hill2: '#1B3F31', ink: '#0B0B14', paper: '#E8E2FF', beam: '#FFE65C', cloud: '#565C9E', far: '#2E3270', glass: '#FFE65C' }],
+]);
+const STEPS = 48; // palette steps that the cached layers are keyed on
+
+/* The lighthouse's pyjamas, one per StableBar theme: stripes and hat */
+const THEMES = {
+  'built-in': { stripes: ['#FF4A36'], hat: '#FF4A36' },
+  catppuccin: { stripes: ['#CBA6F7'], hat: '#CBA6F7' },
+  gruvbox: { stripes: ['#FABD2F', '#FE8019', '#FB4934'], hat: '#FE8019' },
+  leman: { stripes: ['#5CC5B8'], hat: '#5CC5B8' },
+  nord: { stripes: ['#88C0D0'], hat: '#88C0D0' },
+  notch: { stripes: ['#111111'], hat: '#111111' },
+  phosphor: { stripes: ['#FFB000'], hat: '#FFB000' },
+};
+const STATES = ['hero', 'edit', 'themes', 'widgets', 'tiling', 'install'];
+const KINDS = ['sheep', 'cow', 'duck', 'monster', 'gull'];
+const C = {
+  wool: hex('#FFFFFF'), yolk: hex('#FFC21A'), duck: hex('#FFD21F'), beak: hex('#FF7A1A'), pink: hex('#FF9CB0'),
+  monster: hex('#FF8FC0'), chimney: hex('#E8452F'), roof: hex('#2B2B36'), door: hex('#2E58D8'), skin: hex('#F6C9A6'),
+  navy: hex('#25305E'), wood: hex('#C98B4A'), steel: hex('#D8DCE6'), moon: hex('#FFE89A'), tile: hex('#1D1D24'),
+  huts: ['#FF4A36', '#2E58D8', '#FFC21A', '#36A852'].map(hex),
+};
+const HAND = '"Shantell Sans Hand", "Shantell Sans", "Chalkboard SE", sans-serif';
+
+/* ---------- the pen ----------
+   One felt pen in three weights. Every stroke is a filled ribbon whose width follows the pen's
+   pressure: thin where it lands and lifts, a little uneven along the way. The line boils between
+   three states; the printed fills don't boil and sit one constant vector off the line. */
+let BOIL = 0, PW = 1, INK = '#111', REGX = 2.6, REGY = 1.9;
+const SIL = 3.2, DET = 2.1, TEX = 1.35;
+
+function ribbon(c, pts, w, sd = 0, o = {}) {
+  const n = pts.length;
+  if (n < 2) return;
+  const len = new Float64Array(n);
+  for (let i = 1; i < n; i++) len[i] = len[i - 1] + Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]);
+  const total = len[n - 1] || 1, bo = BOIL * 7.13 + sd * 3.71;
+  const amp = (o.amp ?? 0.85) * PW, tin = Math.min(total * 0.4, (o.tin ?? 9) * PW), tout = Math.min(total * 0.5, (o.tout ?? 15) * PW);
+  const w0 = o.w0 ?? 0.4, w1 = o.w1 ?? 0.22, hw0 = w * PW * 0.5;
+  const lx = new Float64Array(n), ly = new Float64Array(n), rx = new Float64Array(n), ry = new Float64Array(n);
+  let ex = 0, ey = 0, etx = 0, ety = 0, ehw = 0, sx = 0, sy = 0, stx = 0, sty = 0, shw = 0;
+  for (let i = 0; i < n; i++) {
+    const a = pts[i > 0 ? i - 1 : 0], b = pts[i < n - 1 ? i + 1 : n - 1];
+    let tx = b[0] - a[0], ty = b[1] - a[1];
+    const tl = Math.hypot(tx, ty) || 1; tx /= tl; ty /= tl;
+    const s = len[i], off = amp * (noise(s / 70 + bo) * 0.9 + noise(s / 19 + bo * 1.7 + 5) * 0.28);
+    const x = pts[i][0] - ty * off, y = pts[i][1] + tx * off;
+    const p = lerp(w0, 1, easeOut(clamp(s / tin))) * lerp(w1, 1, easeOut(clamp((total - s) / tout))) * (1 + 0.15 * noise(s / 43 + bo * 0.6 + 17));
+    const hw = hw0 * p;
+    lx[i] = x - ty * hw; ly[i] = y + tx * hw; rx[i] = x + ty * hw; ry[i] = y - tx * hw;
+    if (i === 0) { sx = x; sy = y; stx = tx; sty = ty; shw = hw; }
+    if (i === n - 1) { ex = x; ey = y; etx = tx; ety = ty; ehw = hw; }
+  }
+  c.moveTo(lx[0], ly[0]);
+  for (let i = 1; i < n; i++) c.lineTo(lx[i], ly[i]);
+  for (let k = 1; k < 5; k++) { const th = k / 5 * Math.PI, co = Math.cos(th), si = Math.sin(th); c.lineTo(ex + ehw * (-ety * co + etx * si), ey + ehw * (etx * co + ety * si)); }
+  for (let i = n - 1; i >= 0; i--) c.lineTo(rx[i], ry[i]);
+  for (let k = 1; k < 5; k++) { const th = k / 5 * Math.PI, co = Math.cos(th), si = Math.sin(th); c.lineTo(sx + shw * (sty * co - stx * si), sy + shw * (-stx * co - sty * si)); }
+  c.closePath();
+}
+/* A single stroke in ink */
+function ink(c, pts, w, sd, o) { c.beginPath(); ribbon(c, pts, w, sd, o); c.fillStyle = o?.color || INK; c.fill(); }
+/* A closed contour drawn in one go, ending a little past where it started */
+function loop(c, pts, w, sd = 0, o = {}) {
+  const n = pts.length, k = Math.abs(Math.round(sd * 7919)) % n, over = Math.max(2, Math.round(n * (o.over ?? 0.08)));
+  let cx = 0, cy = 0;
+  for (const p of pts) { cx += p[0]; cy += p[1]; }
+  cx /= n; cy /= n;
+  const out = [];
+  for (let i = 0; i <= n + over; i++) {
+    const p = pts[(k + i) % n];
+    if (i <= n) out.push(p);
+    else { const f = (i - n) / over * 1.6 * PW, dx = p[0] - cx, dy = p[1] - cy, dl = Math.hypot(dx, dy) || 1; out.push([p[0] + dx / dl * f, p[1] + dy / dl * f]); }
+  }
+  ribbon(c, out, w, sd, { tin: 5, tout: 12, w0: 0.55, w1: 0.12, ...o });
+}
+/* Straight edges, each its own stroke running a little past the corners */
+function edges(c, corners, w, sd = 0, closed = true, o = {}) {
+  const m = corners.length, ov = (o.ov ?? 2.6) * PW;
+  for (let i = 0; i < (closed ? m : m - 1); i++) {
+    const [x0, y0] = corners[i], [x1, y1] = corners[(i + 1) % m], l = Math.hypot(x1 - x0, y1 - y0) || 1, ux = (x1 - x0) / l, uy = (y1 - y0) / l;
+    const a = hash(sd * 3.1 + i) * ov, b = hash(sd * 5.7 + i + 0.5) * ov;
+    ribbon(c, dens([[x0 - ux * a, y0 - uy * a], [x1 + ux * b, y1 + uy * b]], 5), w, sd + i * 1.7, { tin: 4, tout: 6, w0: 0.6, w1: 0.45, ...o });
+  }
+}
+/* A printed fill, off the line by the register vector */
+function print(c, pts, col) { poly(c, pts, true, REGX, REGY); c.fillStyle = typeof col === 'string' ? col : rgba(col); c.fill(); }
+function shape(c, pts, col, w = DET, sd = 0, o) { print(c, pts, col); c.beginPath(); loop(c, pts, w, sd, o); c.fillStyle = INK; c.fill(); }
+function dot(c, x, y, r, col) { c.beginPath(); c.arc(x, y, r, 0, TAU); c.fillStyle = typeof col === 'string' ? col : rgba(col); c.fill(); }
+function label(c, text, x, y, size, col, align = 'left', rot = -0.035) {
+  c.save(); c.translate(x, y); c.rotate(rot);
+  c.font = `400 ${size}px ${HAND}`; c.textAlign = align; c.textBaseline = 'middle'; c.fillStyle = col;
+  c.fillText(text, 0, 0); c.restore();
+}
+
+/* ---------- the scene: geometry, state, input and time ---------- */
+const IDLE_AFTER = 4000, IDLE_FPS = 14, BOIL_FPS = 7, MAX_OBJS = 36;
+
+class Scene {
+  constructor(host, opts = {}) {
+    this.o = Object.assign({ topInset: 0, dusk: 0, seed: 11 }, opts);
+    this.host = host;
+    const cv = this.canvas = document.createElement('canvas');
+    cv.setAttribute('aria-hidden', 'true');
+    cv.style.cssText = 'position:absolute;left:0;top:0;display:block;pointer-events:none';
+    host.appendChild(cv);
+    this.ctx = cv.getContext('2d');
+    this.top = Math.max(0, +this.o.topInset || 0);
+    this.t = 0; this.d = this.dTarget = clamp(+this.o.dusk || 0);
+    this.state = 'hero'; this.theme = 'built-in'; this.ws = 1;
+    this.pres = Object.fromEntries(STATES.map(k => [k, k === 'hero' ? 1 : 0]));
+    this.since = Object.fromEntries(STATES.map(k => [k, 0]));
+    this.ptr = { x: 0, y: 0, on: false, last: -1e9, kind: 'mouse' };
+    this.vel = { x: 0, y: 0 };
+    this.wind = 0; this.windAmb = 0.3; this.windTotal = 0.3; this.drift = 0;
+    this.beam = { a: Math.PI * 0.96, len: 1, flash: 0, phi: Math.PI * 0.96, steer: 0, sa: Math.PI * 0.96 };
+    this.blink = { next: 2.5, at: -9, wink: -9 };
+    this.ripples = []; this.objs = [];
+    this.layers = { back: [], front: [] };
+    this.sprites = new Map();
+    this.fontsV = 0; this.layoutV = 0; this.sparkle = -9; this.rebuilds = 0;
+    this.onFrame = null;
+    this.times = [];
+    this.awake = 0; this.kick = 0; this.raf = 0; this.timer = 0; this.last = null;
+    this.mq = matchMedia('(prefers-reduced-motion: reduce)');
+    this.reduced = this.o.reduced ?? this.mq.matches;
+    this.onMQ = () => { if (this.o.reduced == null) { this.reduced = this.mq.matches; if (this.reduced) { this.still(); this.awake = 0; } this.wake(); } };
+    this.mq.addEventListener?.('change', this.onMQ);
+    this.frame = this.frame.bind(this);
+    this.measure(true);
+    this.ro = new ResizeObserver(() => { if (this.measure()) this.wake(); });
+    this.ro.observe(host);
+    this.onVis = () => { if (document.hidden) this.sleep(); else { this.last = null; this.wake(); } };
+    document.addEventListener('visibilitychange', this.onVis);
+    const fontsIn = () => { this.fontsV++; this.wake(); };
+    if (document.fonts) {
+      document.fonts.load(`400 16px ${HAND}`).then(fontsIn, () => {});
+      document.fonts.addEventListener?.('loadingdone', fontsIn);
+    }
+    this.wake();
+  }
+
+  /* ----- page state ----- */
+  setDusk(d) { this.dTarget = clamp(+d || 0); if (this.reduced) this.d = this.dTarget; this.wake(); }
+  setState(name) {
+    if (!STATES.includes(name)) return;
+    if (name !== this.state) { this.state = name; this.since[name] = this.t; }
+    this.wake();
+  }
+  setTheme(id) {
+    if (!THEMES[id]) return;
+    if (id !== this.theme) { this.theme = id; if (this.t > 0.5) this.sparkle = this.t; }
+    this.wake();
+  }
+  setWorkspace(n) { this.ws = clamp(Math.round(+n || 1), 1, 4); this.wake(); }
+  setTopInset(px) { const v = Math.max(0, +px || 0); if (v !== this.top) { this.top = v; this.layout(); } this.wake(); }
+  destroy() {
+    this.dead = true; this.sleep(); this.ro.disconnect();
+    this.mq.removeEventListener?.('change', this.onMQ);
+    document.removeEventListener('visibilitychange', this.onVis);
+    this.canvas.remove();
+  }
+
+  /* ----- what the page reads after every frame ----- */
+  inBeam(x, y) {
+    x -= this.ox; y -= this.oy;
+    const b = this.beam, L = this.g.lamp, dx = x - L.x, dy = y - L.y, dist = Math.hypot(dx, dy);
+    if (dist < 6 || dist > b.len * this.diag || b.len < 0.08) return 0;
+    const w = this.g.beamHalf + 10 * this.g.u / dist;
+    return 1 - smooth(w * 0.7, w * 1.2, Math.abs(angDiff(Math.atan2(dy, dx), b.a)));
+  }
+  beamI() { return Math.max(0.3 + 0.7 * smooth(0.22, 0.72, this.d), this.pres.install); }
+  lamp() { return { x: this.g.lamp.x + this.ox, y: this.g.lamp.y + this.oy }; }
+
+  /* ----- input, in client coordinates ----- */
+  pointer(x, y, kind = 'mouse') {
+    x -= this.ox; y -= this.oy;
+    const now = performance.now() / 1000;
+    if (this.ptr.on && now - this.ptr.last < 0.25) {
+      const dt = Math.max(0.008, now - this.ptr.last);
+      this.vel.x = lerp(this.vel.x, (x - this.ptr.x) / dt, 0.35);
+      this.vel.y = lerp(this.vel.y, (y - this.ptr.y) / dt, 0.35);
+    }
+    Object.assign(this.ptr, { x, y, on: true, last: now, kind: kind || 'mouse' });
+    const sp = Math.hypot(this.vel.x, this.vel.y);
+    if (!this.reduced && sp > 650 && this.isSea(x, y) && now - (this.lastRip || 0) > 0.11) {
+      this.lastRip = now;
+      this.ripples.push({ x, y, t0: this.t, a: Math.min(1, sp / 2400) * 0.9 });
+    }
+    if (this.reduced) this.aim(x, y);
+    this.wake();
+  }
+  release() { this.ptr.on = false; this.wake(); }
+  tap(x, y) {
+    x -= this.ox; y -= this.oy;
+    this.aim(x, y);
+    this.wake();
+    const g = this.g, T = g.lh;
+    if (y < this.top) return false;
+    // the lighthouse winks instead of catching things
+    if (Math.abs(x - T.x) < T.wB * 0.75 && y > T.hatTop && y < T.base) { this.blink.wink = this.t; return false; }
+    this.spawn(x, y);
+    return true;
+  }
+  surprise(kind) {
+    if (!KINDS.includes(kind)) return;
+    const p = this.spot(kind);
+    const o = p.cloud ? this.ride(kind, p.cloud) : this.spawn(p.x, p.y, kind, false, p.fromSky);
+    if (o.kind === 'gull' && !this.reduced) { o.vx *= 0.5; o.calm = 1.6; }
+    this.wake();
+  }
+  aim(x, y) {
+    const L = this.g.lamp;
+    Object.assign(this.ptr, { x, y, on: true, last: performance.now() / 1000 });
+    this.beam.sa = this.clampAim(Math.atan2(y - L.y, x - L.x));
+    if (this.reduced) this.beam.steer = 1;
+  }
+  clampAim(a) {
+    // keep the light off the lighthouse's own feet: never closer than this to straight down
+    const lim = 0.14, down = Math.PI / 2;
+    if (a > down - lim && a <= down) return down - lim;
+    if (a > down && a < down + lim) return down + lim;
+    return a;
+  }
+
+  /* ----- size and layout ----- */
+  measure(first) {
+    const r = this.host.getBoundingClientRect();
+    this.ox = r.left; this.oy = r.top;
+    let W = Math.max(2, Math.round(r.width)), H = Math.max(2, Math.round(r.height));
+    // phones: the browser's toolbars change the height while scrolling; keep the larger one
+    if (!first && W === this.W && this.g.portrait && H < this.H && H > this.H * 0.7) H = this.H;
+    if (W === this.W && H === this.H) return false;
+    this.W = W; this.H = H; this.diag = Math.hypot(W, H);
+    const budget = 9.4e6; // device pixels for one full canvas
+    this.dpr = Math.min(2, window.devicePixelRatio || 1, Math.sqrt(budget / (W * H)));
+    this.canvas.width = Math.round(W * this.dpr); this.canvas.height = Math.round(H * this.dpr);
+    this.canvas.style.width = W + 'px'; this.canvas.style.height = H + 'px';
+    this.layout();
+    return true;
+  }
+
+  layout() {
+    const { W, H } = this, top = this.top, Hs = H - top;
+    const portrait = W < 700 || H > W * 1.1;
+    const u = clamp(Math.sqrt(W * H) / 1138, 0.42, 1.35);
+    const was = this.g ? [...this.g.clouds, this.g.sheepCloud] : [];
+    const g = this.g = { W, H, u, portrait, top };
+    g.pw = clamp(0.55 + 0.45 * u, 0.74, 1.15);
+    const at = (fx, fy) => [fx * W, top + fy * Hs];
+    let ridgeCtl, shoreCtl;
+    if (portrait) {
+      // a headland in the upper right, the sea to the left and below
+      g.horizon = top + Hs * 0.375;
+      ridgeCtl = [at(0.165, 0.398), at(0.2, 0.384), at(0.3, 0.366), at(0.42, 0.343), at(0.55, 0.322), at(0.65, 0.312), at(0.72, 0.31), at(0.8, 0.312), at(0.9, 0.318), at(1.06, 0.33)];
+      shoreCtl = [at(0.165, 0.398), at(0.2, 0.414), at(0.3, 0.432), at(0.44, 0.466), at(0.6, 0.5), at(0.78, 0.53), at(0.92, 0.545), at(1.06, 0.552)];
+    } else {
+      g.horizon = top + Hs * 0.6;
+      ridgeCtl = [[0.43, 1.04], [0.5, 0.915], [0.56, 0.81], [0.605, 0.71], [0.64, 0.636], [0.678, 0.58], [0.727, 0.549], [0.775, 0.539], [0.84, 0.547], [0.92, 0.575], [1.05, 0.615]].map(([x, y]) => at(x, y));
+      shoreCtl = null;
+    }
+    g.ridge = curve(ridgeCtl, 6);
+    g.shore = shoreCtl ? curve(shoreCtl, 6) : null;
+    g.hillPoly = g.shore ? [...g.ridge, ...[...g.shore].reverse()] : [...g.ridge, [W + 40, H + 40], [g.ridge[0][0] - 40, H + 40]];
+    g.beamHalf = 0.1;
+    const ins = 2.6 * g.pw;
+    g.hillClip = g.shore ? [...g.ridge.map(([x, y]) => [x, y + ins]), ...g.shore.slice().reverse().map(([x, y]) => [x, y - ins])] : [...g.ridge.map(([x, y]) => [x, y + ins]), [W + 40, H + 40], [g.ridge[0][0] - 40, H + 40]];
+
+    // the lighthouse: lamp, eye, gallery, tower and hat
+    const lx = W * (portrait ? 0.72 : 0.775);
+    const T = g.lh = { x: lx };
+    if (portrait) {
+      T.base = top + Hs * 0.31 + 2 * u;
+      T.er = clamp(W * 0.036, 11.5, 22);
+      const lampY = top + H * 0.1;
+      T.gal = T.er * 0.62;
+      T.top = lampY + T.er * 1.02 + T.gal;
+      T.h = T.base - T.top;
+    } else {
+      T.base = this.ridgeY(lx) + 2 * u;
+      T.h = Math.min(Hs * 0.27 * 1.32, W * 0.3);
+      T.er = T.h * 0.062;
+      T.gal = T.er * 0.62;
+      T.top = T.base - T.h;
+    }
+    T.wT = T.er * 1.62; T.wB = T.er * 2.6;
+    g.lamp = { x: lx, y: T.top - T.gal - T.er * 1.02 };
+    T.hatTop = g.lamp.y - T.er * 3.6;
+    // the keeper's cottage, to the right of the lighthouse
+    const cx = portrait ? lx + T.wB * 0.5 + T.h * 0.4 : lx + T.wB * 0.5 + T.h * 0.3;
+    const cw = portrait ? Math.min(T.h * 0.34, W * 0.13) : T.h * 0.3;
+    g.cot = { x: cx, base: this.ridgeY(cx) + 3 * u, w: cw, h: cw * 0.62 };
+
+    const R = rng(this.o.seed);
+    const sky = g.horizon - top;
+    // clouds; the third one has legs and may be a sheep. It wanders where it can be seen.
+    g.clouds = (portrait ? [0.08, 0.55, 0.9] : [0.06, 0.3, 0.7, 0.93]).map((x, i) => ({
+      x0: x * (W + 360 * u), y: top + sky * (portrait ? 0.08 + R() * 0.3 : 0.1 + R() * 0.38), w: (110 + R() * 80) * u * (portrait ? 0.95 : 1),
+      sp: 5 + R() * 8, seed: 31 * i + this.o.seed, ox: 0, oy: 0,
+    }));
+    g.sheepCloud = portrait
+      ? { x0: 0.1 * W, x1: 0.16 * W, y: top + H * 0.058, w: 84 * u + 22, seed: 77, ox: 0, oy: 0 }
+      : { x0: 0.5 * W, x1: 0.585 * W, y: top + sky * 0.13, w: 128 * u, seed: 77, ox: 0, oy: 0 };
+    g.sheepCloud.x = lerp(g.sheepCloud.x0, g.sheepCloud.x1, 0.3); g.sheepCloud.dir = 1;
+    // animals riding a cloud move to the same cloud in the new layout
+    for (const o of this.objs) if (o.ride) {
+      const i = was.indexOf(o.ride), cl = i === was.length - 1 ? g.sheepCloud : g.clouds[i] || g.sheepCloud;
+      o.dx *= cl.w / (o.ride.w || cl.w); o.ride = cl;
+    }
+    const n = clamp(Math.round(W * sky / 6500), 26, 180);
+    g.stars = Array.from({ length: n }, () => ({ x: R() * W, y: top + 8 + R() * (sky - 24), s: 0.55 + R() * R() * 1.6, p: R() * TAU }))
+      .filter(s => Math.hypot(s.x - g.lamp.x, s.y - g.lamp.y) > T.er * 4);
+    // the far island and its smaller lighthouse
+    g.isle = portrait ? { x0: 0.03 * W, x1: 0.24 * W, h: 20 * u + 8 } : { x0: 0.49 * W, x1: 0.585 * W, h: 22 * u };
+    g.sun = portrait ? { x: 0.3 * W, y0: top + H * 0.115 } : { x: 0.57 * W, y0: top + sky * 0.3 };
+    g.moon = portrait ? { x: 0.08 * W + 6, y1: top + H * 0.15 } : { x: 0.6 * W, y1: top + sky * 0.44 };
+
+    // the sea: rows of scallops, sparse and small near the horizon
+    const rows = portrait ? Math.round(clamp((H - g.horizon) / 11, 26, 60)) : Math.round(18 + 14 * Math.min(1, u));
+    g.rows = [];
+    for (let i = 1; i <= rows; i++) {
+      const f = i / rows, y = g.horizon + (H - g.horizon) * Math.pow(f, 1.6);
+      g.rows.push({ y, f, seed: i * 97 + this.o.seed, spans: this.seaSpans(y) });
+    }
+    // grass tufts along the ridge, a few
+    g.tufts = [];
+    for (let x = g.ridge[0][0] + 14 * u; x < W; x += (26 + R() * 30) * u) {
+      const y = this.ridgeY(x);
+      if (y == null || y > H + 4 || Math.abs(x - lx) < T.wB * 0.7 || (x > g.cot.x - g.cot.w * 0.55 && x < g.cot.x + g.cot.w * 0.5)) continue;
+      g.tufts.push({ x, y, l: (8 + R() * 7) * Math.max(u, 0.62), p: R() * TAU, n: 2 + ((R() * 2.2) | 0) });
+    }
+    // where the page's notes sit (a guess, for placing labels and surprises)
+    g.note = portrait ? { x0: 0, x1: W, y0: top + Hs * 0.24, y1: H } : { x0: 0, x1: W * 0.05 + Math.min(W * 0.46, 620) + 12, y0: top, y1: H * 0.84 };
+    g.key = portrait ? null : { x0: 0, x1: W * 0.05 + 440, y0: H - 160, y1: H };
+    this.layoutV++;
+    for (const o of this.objs) this.settle(o);
+  }
+  seaSpans(y) {
+    const spans = [], W = this.W;
+    let x0 = null;
+    for (let x = -8; x <= W + 8; x += 4) {
+      const sea = !this.inHill(x, y);
+      if (sea && x0 == null) x0 = x;
+      if ((!sea || x > W + 4) && x0 != null) { spans.push([x0, x - 4]); x0 = null; }
+    }
+    return spans;
+  }
+  ridgeY(x) {
+    const r = this.g.ridge;
+    if (x < r[0][0] || x > r[r.length - 1][0]) return null;
+    let lo = 0, hi = r.length - 1;
+    while (hi - lo > 1) { const m = (lo + hi) >> 1; if (r[m][0] <= x) lo = m; else hi = m; }
+    const [x0, y0] = r[lo], [x1, y1] = r[hi];
+    return lerp(y0, y1, (x - x0) / ((x1 - x0) || 1));
+  }
+  shoreY(x) {
+    const s = this.g.shore;
+    if (!s) return this.H + 40;
+    if (x < s[0][0]) return s[0][1];
+    for (let i = 1; i < s.length; i++) if (s[i][0] >= x) return lerp(s[i - 1][1], s[i][1], (x - s[i - 1][0]) / ((s[i][0] - s[i - 1][0]) || 1));
+    return s[s.length - 1][1];
+  }
+  inHill(x, y) { return inPoly(this.g.hillPoly, x, y); }
+  isSea(x, y) { return y > this.g.horizon && !this.inHill(x, y); }
+  isLand(x, y) { const ry = this.ridgeY(x); return ry != null && y >= ry - 1 && y <= this.shoreY(x); }
+  depthScale(y) { const g = this.g; return clamp(0.8 + (y - g.horizon) / (g.H - g.horizon) * 1.0, 0.7, 1.9) * (g.portrait ? 1.15 : 1.1); }
+
+  /* ----- where things go ----- */
+  // Is a point of the scene visible, or covered by page content? A guess from the DOM.
+  seen(x, y) {
+    const els = document.elementsFromPoint?.(x + this.ox, y + this.oy);
+    if (!els) return true;
+    for (const el of els) {
+      if (el === this.canvas || el === this.host) return true;
+      if (el === document.body || el === document.documentElement) return true;
+      if (/^(IMG|SVG|VIDEO|BUTTON|INPUT|TEXTAREA|SELECT|CANVAS|svg)$/.test(el.tagName)) return false;
+      for (const pseudo of [null, '::before', '::after']) {
+        const cs = getComputedStyle(el, pseudo);
+        if (pseudo && cs.content === 'none') continue;
+        const bg = cs.backgroundColor.match(/[\d.]+/g);
+        if ((bg && bg.length === 4 ? +bg[3] > 0.15 : bg && bg.length === 3) || (cs.backgroundImage && cs.backgroundImage !== 'none')) return false;
+      }
+    }
+    return true;
+  }
+  spot(kind) {
+    const g = this.g, u = g.u, R = Math.random, T = g.lh, W = g.W, H = g.H;
+    const free = (x, y) => !(g.key && x > g.key.x0 && x < g.key.x1 && y > g.key.y0) && Math.abs(x - T.x) > T.wB + 26 * u;
+    const tries = [];
+    for (let i = 0; i < 40; i++) {
+      let x, y;
+      if (kind === 'gull') {
+        x = g.portrait ? lerp(0.08, 0.6, R()) * W : lerp(0.48, 0.68, R()) * W;
+        y = g.portrait ? g.top + lerp(0.04, 0.17, R()) * H : lerp(g.top + 40 * u, g.horizon - 70 * u, R());
+      } else if (kind === 'duck' || kind === 'monster') {
+        y = lerp(g.horizon + 18 * u, H - 24 * u, R() ** (g.portrait ? 1 : 0.8));
+        const sp = this.seaSpans(y), span = sp[(R() * sp.length) | 0];
+        if (!span) continue;
+        x = lerp(Math.max(span[0], 0) + 22 + 20 * u, Math.min(span[1], W) - 10 - (kind === 'monster' ? 60 : 24) * u, R());
+        if (!g.portrait && i < 30) x = lerp(Math.max(g.note.x1 + 30 * u, span[0] + 30 * u), span[1] - (kind === 'monster' ? 60 : 24) * u, R());
+      } else {
+        x = g.portrait ? lerp(0.36, 0.95, R()) * W : lerp(0.56, 0.97, R()) * W;
+        const ry = this.ridgeY(x);
+        if (ry == null) continue;
+        y = ry + lerp(8 * u, Math.min(this.shoreY(x) - ry - 20 * u, H * 0.32), R());
+        if (y > H - 20 * u) continue;
+      }
+      if (!free(x, y)) continue;
+      if (i < 32 && this.objs.some(o => o.dying == null && Math.abs(o.x - x) < 56 * u && Math.abs((o.ty ?? o.y) - y) < 30 * u)) continue;
+      tries.push({ x, y });
+      if (this.seen(x, y) && this.seen(x, y - 20 * u)) return { x, y };
+    }
+    // no land in sight (a phone, with the notes over the hill): it lands on a cloud
+    if (kind === 'sheep' || kind === 'cow') {
+      const riders = cl => this.objs.filter(o => o.ride === cl && o.dying == null).length + R() * 0.5;
+      for (const cl of [...g.clouds, g.sheepCloud].sort((a, b) => riders(a) - riders(b))) {
+        const p = this.cloudXY(cl);
+        if (p.x > 40 * u && p.x < W - 40 * u && Math.hypot(p.x - g.lamp.x, p.y - g.lamp.y) > T.er * 5 && this.seen(p.x, p.y - cl.w * 0.2)) return { x: p.x, y: p.y, cloud: cl };
+      }
+    }
+    // nothing visible: drop it where it belongs anyway, falling from the sky
+    const p = tries[0] || { x: W * 0.8, y: H * 0.8 };
+    return { ...p, fromSky: true };
+  }
+
+  spawn(x, y, kind, settled, fromSky) {
+    const g = this.g, u = g.u, R = Math.random;
+    const land = this.isLand(x, y), sea = this.isSea(x, y);
+    const o = { x, y, vx: 0, vy: 0, t0: this.t, flip: R() < 0.5, seed: (R() * 1e4) | 0, lit: 0, kind };
+    if (!o.kind) {
+      if (land) o.kind = R() < 0.6 ? 'sheep' : 'cow';
+      else if (sea) o.kind = R() < 0.55 ? 'duck' : 'monster';
+      else if (y < lerp(g.top, g.horizon, 0.55) && R() < 0.45) o.kind = 'gull';
+      else o.kind = this.ridgeY(x) != null && y < this.shoreY(x) && x > (g.portrait ? 0 : this.hillLeftX(g.horizon) - 20 * u) ? (R() < 0.6 ? 'sheep' : 'cow') : (R() < 0.6 ? 'duck' : 'monster');
+    }
+    const still = settled || this.reduced;
+    if (o.kind === 'gull') {
+      o.state = 'fly'; o.vx = (o.flip ? -1 : 1) * (60 + R() * 60) * u; o.vy = -(6 + R() * 18) * u; o.sc = 1.15;
+      if (this.reduced) { o.vx = 0; o.vy = 0; o.state = 'hover'; }
+    } else if (o.kind === 'sheep' || o.kind === 'cow') {
+      let ry = this.ridgeY(x);
+      if (ry == null) { o.x = x = clamp(x, g.ridge[0][0] + 20 * u, g.W - 14 * u); ry = this.ridgeY(x); }
+      const room = this.shoreY(x) - ry - 14 * u;
+      o.depth = land ? clamp(y - ry, 3 * u, Math.min(room, g.H - ry - 24 * u)) : clamp((6 + R() * 40) * u, 3 * u, room);
+      o.ty = ry + o.depth;
+      if (still || land && !fromSky) { o.state = 'land'; o.y = o.ty; o.land = still ? -9 : this.t; }
+      else { o.state = 'fall'; if (fromSky) o.y = Math.min(o.ty - 120 * u, g.top - 20); }
+      o.sc = this.depthScale(o.ty);
+    } else {
+      o.ty = sea ? y : g.horizon + (g.H - g.horizon) * (0.16 + R() * 0.55);
+      if (!sea) { const sp = this.seaSpans(o.ty); const s = sp.find(q => q[0] <= x && x <= q[1]) || sp[0]; if (s) o.x = clamp(x, s[0] + 24 * u, s[1] - 30 * u); }
+      if (o.kind === 'monster' || still || sea && !fromSky) { o.y = o.ty; o.state = o.kind === 'monster' ? 'swim' : 'float'; if (!this.reduced) this.ripples.push({ x: o.x, y: o.ty, t0: this.t, a: 0.8 }); }
+      else { o.state = 'fall'; if (fromSky) o.y = Math.min(o.ty - 120 * u, g.top - 20); }
+      o.sc = this.depthScale(o.ty);
+    }
+    this.objs.push(o);
+    const live = this.objs.filter(q => q.dying == null);
+    if (live.length > MAX_OBJS) live[0].dying = this.t;
+    return o;
+  }
+  ride(kind, cl) {
+    const g = this.g, R = Math.random, p = this.cloudXY(cl);
+    const o = { kind, ride: cl, dx: (R() - 0.5) * cl.w * 0.3, x: p.x, y: 0, vx: 0, vy: 0, t0: this.t, flip: R() < 0.5, seed: (R() * 1e4) | 0, lit: 0, sc: 0.85 * (g.portrait ? 1.1 : 1) };
+    o.x = p.x + o.dx; o.ty = this.rideY(o);
+    if (this.reduced) { o.state = 'ride'; o.y = o.ty; o.land = -9; } else { o.state = 'fall'; o.y = g.top - 30; }
+    this.objs.push(o);
+    const live = this.objs.filter(q => q.dying == null);
+    if (live.length > MAX_OBJS) live[0].dying = this.t;
+    return o;
+  }
+  rideY(o) { const p = this.cloudXY(o.ride); return p.y - o.ride.w * 0.17; }
+  // reduced motion switched on: whatever is moving stops where it is
+  still() {
+    for (const o of this.objs) {
+      if (o.state === 'fly') { o.state = 'hover'; o.vx = o.vy = 0; }
+      else if (o.state === 'fall') { o.y = o.ty; o.vy = 0; o.state = o.ride ? 'ride' : o.kind === 'duck' ? 'float' : 'land'; }
+      o.land = -9;
+      if (o.dying != null) o.dead = true;
+    }
+    this.objs = this.objs.filter(o => !o.dead);
+    this.ripples = [];
+  }
+  settle(o) {
+    // after a resize, put land animals back on the ground and sea animals back in the water
+    if (o.ride) return;
+    if (o.kind === 'sheep' || o.kind === 'cow') { const ry = this.ridgeY(clamp(o.x, this.g.ridge[0][0], this.W - 10)); if (ry != null) { o.ty = ry + Math.min(o.depth, this.shoreY(o.x) - ry - 14); if (o.state !== 'fall') o.y = o.ty; } }
+    else if (o.kind !== 'gull' && !this.isSea(o.x, o.ty)) o.dying ??= this.t;
+  }
+  hillLeftX(y) {
+    const r = this.g.ridge;
+    for (let i = 1; i < r.length; i++) if (r[i][1] <= y) { const [x0, y0] = r[i - 1], [x1, y1] = r[i]; return lerp(x0, x1, (y - y0) / ((y1 - y0) || 1)); }
+    return this.W;
+  }
+
+  /* ----- time ----- */
+  wake() {
+    this.awake = Math.max(this.awake, performance.now() + (this.reduced ? 300 : IDLE_AFTER));
+    this.kick = 3; // at least a few frames, however late the first one comes
+    if (this.timer) { clearTimeout(this.timer); this.timer = 0; }
+    this.schedule();
+  }
+  sleep() { cancelAnimationFrame(this.raf); clearTimeout(this.timer); this.raf = this.timer = 0; }
+  schedule() {
+    if (this.raf || this.timer || this.dead || document.hidden) return;
+    const active = this.kick > 0 || performance.now() < this.awake || this.busy();
+    if (active) this.raf = requestAnimationFrame(this.frame);
+    else if (!this.reduced) this.timer = setTimeout(() => { this.timer = 0; this.raf = requestAnimationFrame(this.frame); }, 1000 / IDLE_FPS - 6);
+    // reduced motion and nothing moving: the scene sleeps until the next call or input
+  }
+  busy() {
+    if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
+    for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
+    if (this.ripples.length) return true;
+    for (const o of this.objs) if (o.state === 'fall' || (o.state === 'fly' && !this.reduced) || o.dying != null || (o.land > 0 && this.t - o.land < 0.4)) return true;
+    return this.beam.steer > 0.01 && this.beam.steer < 0.99 && !this.reduced;
+  }
+  frame(now) {
+    this.raf = 0;
+    if (this.dead || document.hidden) return;
+    this.kick--;
+    const dt = this.last == null ? 1 / 60 : Math.min(0.1, Math.max(0, (now - this.last) / 1000));
+    this.last = now;
+    this.update(dt);
+    const t0 = performance.now();
+    this.render();
+    this.times.push(performance.now() - t0);
+    if (this.times.length > 240) this.times.shift();
+    this.onFrame?.(this);
+    this.schedule();
+  }
+  update(dt) {
+    const g = this.g, u = g.u, rm = this.reduced;
+    this.t += dt;
+    for (const k of STATES) {
+      const want = k === this.state ? 1 : 0;
+      this.pres[k] = rm ? want : clamp(this.pres[k] + Math.sign(want - this.pres[k]) * dt * 1.8);
+    }
+    // the install state brings the night with it
+    const dTarget = this.dEff = Math.max(this.dTarget, this.pres.install > 0 ? lerp(this.dTarget, 1, this.pres.install) : 0);
+    this.d = rm ? dTarget : this.d + (dTarget - this.d) * Math.min(1, dt * 2.4);
+    if (Math.abs(dTarget - this.d) < 0.0005) this.d = dTarget;
+    this.boil = rm ? 0 : Math.floor(this.t * BOIL_FPS) % 3;
+    this.vel.x *= Math.exp(-dt * 2.5); this.vel.y *= Math.exp(-dt * 2.5);
+    this.windAmb = rm ? 0.2 : 0.28 + 0.22 * noise(this.t * 0.13 + 3);
+    this.wind = lerp(this.wind, clamp(this.vel.x / 1300, -1.5, 1.5), Math.min(1, dt * 1.8));
+    this.windTotal = this.windAmb + this.wind;
+    if (!rm) this.drift += dt * (1 + this.windTotal * 2.4);
+    // clouds lean away from the pointer
+    for (const cl of [...g.clouds, g.sheepCloud]) {
+      let tx = 0, ty = 0;
+      if (this.ptr.on && !rm) {
+        const p = this.cloudXY(cl, true), dx = p.x - this.ptr.x, dy = p.y - this.ptr.y, r = 170 * u, dd = Math.hypot(dx, dy);
+        if (dd < r) { const k = (1 - dd / r) ** 2 * 48 * u / (dd || 1); tx = dx * k; ty = dy * k; }
+      }
+      const k = rm ? 1 : Math.min(1, dt * 3);
+      cl.ox = lerp(cl.ox, tx, k); cl.oy = lerp(cl.oy, ty, k);
+    }
+    // the cloud with legs wanders to and fro, against the wind if it likes
+    const sc = g.sheepCloud;
+    if (!rm) {
+      sc.x += sc.dir * 7 * u * dt;
+      if (sc.x > sc.x1) sc.dir = -1; else if (sc.x < sc.x0) sc.dir = 1;
+    }
+    // the eye blinks now and then
+    if (!rm && this.t > this.blink.next) { this.blink.at = this.t; this.blink.next = this.t + 3 + Math.random() * 5; }
+    this.updateBeam(dt);
+    this.ripples = this.ripples.filter(r => this.t - r.t0 < 2.2);
+    this.updateObjs(dt);
+  }
+  updateBeam(dt) {
+    const b = this.beam, L = this.g.lamp, now = performance.now() / 1000, rm = this.reduced;
+    const quiet = this.ptr.kind === 'touch' ? 3.2 : 5;
+    const steering = this.ptr.on && now - this.ptr.last < quiet;
+    b.steer = rm ? (steering || b.steer > 0.5 ? 1 : 0) : lerp(b.steer, steering ? 1 : 0, Math.min(1, dt * (steering ? 4 : 0.7)));
+    if (!rm) b.phi += dt * TAU / 15;
+    const c = Math.cos(b.phi), sn = Math.sin(b.phi);
+    if (this.ptr.on && steering) {
+      const want = this.clampAim(Math.atan2(this.ptr.y - L.y, this.ptr.x - L.x));
+      b.sa = rm ? want : b.sa + angDiff(want, b.sa) * Math.min(1, dt * 5);
+    }
+    const vx = lerp(c, Math.cos(b.sa), b.steer), vy = lerp(0.03 * Math.abs(c), Math.sin(b.sa), b.steer);
+    b.a = Math.atan2(vy, vx);
+    b.len = clamp(Math.hypot(vx, vy));
+    b.flash = Math.pow(Math.max(0, sn), 14) * (1 - b.steer);
+  }
+  updateObjs(dt) {
+    const g = this.g, u = g.u, G = 1500 * u, rm = this.reduced;
+    for (const o of this.objs) {
+      if (o.ride) {
+        // riding a cloud: follow it, landing first if still falling
+        const p = this.cloudXY(o.ride);
+        o.x = p.x + o.dx; o.ty = this.rideY(o);
+        if (o.state === 'fall') { o.vy += G * dt; o.y += o.vy * dt; if (o.y >= o.ty) { o.y = o.ty; o.state = 'ride'; o.land = this.t; } }
+        else o.y = o.ty;
+        o.lit = lerp(o.lit, this.inBeam(o.x + this.ox, o.y - 12 * u * o.sc + this.oy), rm ? 1 : Math.min(1, dt * 8));
+        if (o.dying != null && (rm || this.t - o.dying > 0.7)) o.dead = true;
+        continue;
+      }
+      if (o.state === 'fall') {
+        o.vy += G * dt; o.y += o.vy * dt;
+        if (o.y >= o.ty) {
+          o.y = o.ty; o.vy = 0; o.land = this.t;
+          o.state = o.kind === 'duck' ? 'float' : 'land';
+          if (o.kind === 'duck') this.ripples.push({ x: o.x, y: o.ty, t0: this.t, a: 1 });
+        }
+      } else if (rm) {
+        // reduced motion: everything holds still where it appeared
+      } else if (o.state === 'land') {
+        const dx = o.x - this.ptr.x, dy = o.y - this.ptr.y, near = this.ptr.on && o.kind === 'sheep' && dx * dx + dy * dy < (110 * u) ** 2;
+        const stroll = Math.sin(this.t * 0.35 + o.seed) > 0.8 ? (o.flip ? -1 : 1) * (o.kind === 'cow' ? 7 : 12) * u : 0;
+        o.vx = lerp(o.vx, near ? Math.sign(dx || 1) * 70 * u : stroll, Math.min(1, dt * 3));
+        if (Math.abs(o.vx) > 3 * u) o.flip = o.vx < 0;
+        const nx = o.x + o.vx * dt, ry = this.ridgeY(nx);
+        if (ry == null || ry + o.depth > Math.min(g.H - 8 * u, this.shoreY(nx) - 12 * u) || nx > g.W - 12 * u || Math.abs(nx - g.lh.x) < g.lh.wB * 0.6) o.vx = 0;
+        else { o.x = nx; o.y = ry + o.depth; }
+      } else if (o.state === 'float') {
+        o.x += this.windTotal * 6 * u * dt;
+        o.y = o.ty + Math.sin(this.t * 2.2 + o.seed) * 1.8 * u;
+        if (!this.isSea(o.x + 16 * u, o.ty - 1) || o.x > g.W - 10) o.x -= this.windTotal * 6 * u * dt + 0.5;
+      } else if (o.state === 'swim') {
+        o.x += (o.flip ? -1 : 1) * 16 * u * o.sc * dt;
+        if (!this.isSea(o.x + (o.flip ? -40 : 64) * u * o.sc, o.ty - 1) || o.x < 50 * u || o.x > g.W - 60 * u) o.flip = !o.flip;
+      } else if (o.state === 'fly') {
+        if (o.calm > 0) { o.calm -= dt; o.x += o.vx * 0.15 * dt; o.y += Math.sin(this.t * 2 + o.seed) * 10 * u * dt; }
+        else { o.x += o.vx * dt; o.y += (o.vy + Math.sin(this.t * 2 + o.seed) * 14 * u) * dt; o.vy *= 1 - dt * 0.4; }
+        if (o.x < -100 || o.x > g.W + 100 || o.y < -100) o.dead = true;
+      }
+      o.lit = rm ? this.inBeam(o.x + this.ox, o.y - 12 * u * o.sc + this.oy) : lerp(o.lit, this.inBeam(o.x + this.ox, o.y - 12 * u * o.sc + this.oy), Math.min(1, dt * 8));
+      if (o.dying != null && (rm || this.t - o.dying > 0.7)) o.dead = true;
+    }
+    this.objs = this.objs.filter(o => !o.dead);
+  }
+  cloudXY(cl, raw) {
+    const g = this.g;
+    if (cl === g.sheepCloud) return { x: cl.x + (raw ? 0 : cl.ox), y: cl.y + (raw ? 0 : cl.oy) };
+    const span = g.W + 360 * g.u;
+    let x = (cl.x0 + this.drift * cl.sp * g.u) % span;
+    if (x < 0) x += span;
+    return { x: x - 180 * g.u + (raw ? 0 : cl.ox), y: cl.y + (raw ? 0 : cl.oy) };
+  }
+  sunPos() { const g = this.g, k = smooth(0, 0.62, this.d); return { x: g.sun.x, y: lerp(g.sun.y0, g.horizon + 30 * g.u, k), a: 1 - smooth(0.56, 0.66, this.d) }; }
+  moonPos() { const g = this.g, k = smooth(0.58, 1, this.d); return { x: g.moon.x, y: lerp(g.horizon + 24 * g.u, g.moon.y1, k), a: smooth(0.56, 0.7, this.d) }; }
+  waveY(x, row) {
+    const g = this.g, t = this.t, u = g.u, ph = this.reduced ? 0 : t;
+    let y = row.y + Math.sin(x * 0.011 / (0.35 + row.f) + ph * 1.15 + row.seed) * (0.5 + row.f * 2.4) * Math.max(u, 0.66) * (0.8 + 0.5 * Math.abs(this.windTotal));
+    if (this.ptr.on && !this.reduced) {
+      const dx = x - this.ptr.x, dy = (row.y - this.ptr.y) * 2.2, d2 = dx * dx + dy * dy, r = 150 * u;
+      if (d2 < r * r) y += Math.sin(Math.sqrt(d2) * 0.085 / u - t * 6) * 5 * u * Math.exp(-d2 / (2 * 3600 * u * u));
+    }
+    for (const r of this.ripples) {
+      const age = t - r.t0, rad = age * 150 * u, dx = x - r.x, dy = (row.y - r.y) * 2.4;
+      const dist = Math.sqrt(dx * dx + dy * dy), band = Math.exp(-((dist - rad) ** 2) / (2 * (16 * u) ** 2));
+      if (band > 0.01) y += Math.sin(dist * 0.1 / u - age * 9) * 6 * u * r.a * band * (1 - age / 2.8);
+    }
+    return y;
+  }
+  squash(o) { if (!(o.land > 0)) return 0; const a = this.t - o.land; return a < 0.3 ? Math.sin(a / 0.3 * Math.PI) * 0.28 * (1 - a / 0.3) : 0; }
+
+  /* ----- drawing ----- */
+  render() {
+    const c = this.ctx, g = this.g, k = this.dpr;
+    const step = Math.round(this.d * STEPS);
+    this.P = palAt(PAL, step / STEPS);
+    this.pstep = step;
+    BOIL = this.boil; PW = g.pw; INK = rgba(this.P.ink); REGX = 2.6 * g.pw; REGY = 1.9 * g.pw;
+    c.setTransform(k, 0, 0, k, 0, 0);
+    c.globalAlpha = 1; c.globalCompositeOperation = 'source-over';
+    drawScene(this, c);
+  }
+  /* A cached layer: one per boil state, redrawn when the hour, the theme or the layout changes */
+  layer(name, rect, draw) {
+    const key = `${this.layoutV}|${this.pstep}|${this.theme}|${this.fontsV}`;
+    const L = this.layers[name][this.boil] ||= { cv: document.createElement('canvas'), key: '' };
+    const k = this.dpr, x0 = Math.floor(rect.x * k), y0 = Math.floor(rect.y * k), w = Math.ceil(rect.w * k), h = Math.ceil(rect.h * k);
+    if (L.key !== key) {
+      if (L.cv.width !== w || L.cv.height !== h) { L.cv.width = w; L.cv.height = h; }
+      const c = L.cv.getContext('2d');
+      c.setTransform(1, 0, 0, 1, 0, 0); c.clearRect(0, 0, w, h);
+      c.setTransform(k, 0, 0, k, -x0, -y0);
+      draw(c);
+      L.key = key;
+      this.rebuilds++;
+    }
+    const c = this.ctx;
+    c.save(); c.setTransform(1, 0, 0, 1, 0, 0); c.drawImage(L.cv, x0, y0); c.restore();
+  }
+  /* A small cached drawing (a cloud, the sun), drawn around its own origin */
+  sprite(name, w, h, x, y, draw) {
+    const key = `${name}|${this.layoutV}|${this.boil}|${this.pstep}|${this.fontsV}`, k = this.dpr;
+    let s = this.sprites.get(key);
+    if (!s) {
+      const cv = document.createElement('canvas');
+      cv.width = Math.ceil(w * k); cv.height = Math.ceil(h * k);
+      const c = cv.getContext('2d');
+      c.setTransform(k, 0, 0, k, w * k / 2, h * k / 2);
+      draw(c);
+      s = { cv, w, h };
+      this.sprites.set(key, s);
+      if (this.sprites.size > 60) this.sprites.delete(this.sprites.keys().next().value);
+    }
+    const c = this.ctx;
+    c.save(); c.setTransform(1, 0, 0, 1, 0, 0);
+    c.drawImage(s.cv, Math.round((x - w / 2) * k), Math.round((y - h / 2) * k));
+    c.restore();
+  }
+}
+
+/* =====================================================================
+   THE DRAWING
+   Back to front: sky and sea, the cached band, stars, the scallops, the
+   beam, then the sun, moon, clouds and far island in front of it, the
+   cached hill with its cottage and tower, then everything that moves.
+   ===================================================================== */
+function drawScene(s, c) {
+  const g = s.g, { W, H, u } = g, P = s.P;
+  c.lineCap = 'round'; c.lineJoin = 'round';
+  c.fillStyle = rgba(P.sky); c.fillRect(0, 0, W, g.horizon + 2);
+  c.fillStyle = rgba(P.sea); c.fillRect(0, g.horizon, W, H - g.horizon);
+  const bandTop = g.horizon - (g.horizon - g.top) * (g.portrait ? 0.42 : 0.36) - 20 * u;
+  s.layer('back', { x: 0, y: bandTop, w: W, h: g.horizon - bandTop + 6 * u }, x => drawBand(s, x, bandTop));
+  drawStars(s, c);
+  drawWaves(s, c);
+  drawHalo(s, c);
+  drawBeam(s, c);
+  drawSun(s, c);
+  drawMoon(s, c);
+  for (let i = 0; i < g.clouds.length; i++) drawCloud(s, c, g.clouds[i], 'cloud' + i);
+  drawCloud(s, c, g.sheepCloud, 'sheepcloud', true);
+  drawIsle(s, c);
+  const T = g.lh, x0 = g.portrait ? g.ridge[0][0] - 8 : Math.max(0, g.ridge[0][0] - 10);
+  const y0 = Math.min(T.top - T.gal * 1.2, g.cot.base - g.cot.h * 4.2) - 10 * u;
+  const y1 = g.portrait ? Math.max(...g.shore.map(p => p[1])) + 14 * u : H;
+  s.layer('front', { x: x0, y: y0, w: W - x0, h: y1 - y0 }, x => { drawHill(s, x); drawCottage(s, x); drawTower(s, x); });
+  drawHillLight(s, c);
+  drawTufts(s, c);
+  drawSmoke(s, c);
+  drawEye(s, c);
+  drawHat(s, c);
+  drawStates(s, c);
+  const objs = s.objs.slice().sort((a, b) => a.y - b.y);
+  for (const o of objs) drawObj(s, c, o);
+  if (s.pres.hero > 0.01) drawLabels(s, c);
+}
+
+/* the lower sky, a lighter band with a soft wave at its top, and the horizon */
+function drawBand(s, c, bandTop) {
+  const g = s.g, { W, u } = g, P = s.P;
+  const by = bandTop + 20 * u, band = [];
+  for (let x = -30; x <= W + 30; x += 16 * u) band.push([x, by + Math.sin(x * 0.006 + 1) * 11 * u + Math.sin(x * 0.019 + 2) * 3 * u]);
+  band.push([W + 30, g.horizon + 4], [-30, g.horizon + 4]);
+  poly(c, band); c.fillStyle = rgba(P.sky2); c.fill();
+  c.beginPath(); ribbon(c, dens([[-10, g.horizon], [W + 10, g.horizon]], 8), DET, 2, { amp: 0.6, tin: 1, tout: 1, w0: 1, w1: 1 }); c.fillStyle = INK; c.fill();
+}
+
+function drawStars(s, c) {
+  const g = s.g, u = g.u, st = smooth(0.55, 0.9, s.d);
+  if (st <= 0) return;
+  c.beginPath();
+  for (const p of g.stars) {
+    if (p.s < 0.75) continue;
+    const r = p.s * 2.7 * u * (s.reduced ? 1 : 0.78 + 0.22 * Math.sin(s.t * 2 + p.p));
+    for (let k = 0; k < 3; k++) {
+      const a = k / 3 * Math.PI + p.p + BOIL * 0.07;
+      ribbon(c, [[p.x - Math.cos(a) * r, p.y - Math.sin(a) * r], [p.x + Math.cos(a) * r, p.y + Math.sin(a) * r]], 1.7, k, { amp: 0.15, tin: 1, tout: 1, w0: 0.7, w1: 0.6 });
+    }
+  }
+  c.fillStyle = rgba(s.P.beam, st); c.fill();
+  // and a few small dots between them
+  c.fillStyle = rgba(s.P.beam, st * 0.8);
+  for (const p of g.stars) if (p.s < 0.75) { c.beginPath(); c.arc(p.x, p.y, 0.9 * u + 0.4, 0, TAU); c.fill(); }
+}
+
+/* a fried-egg sun that sets into the sea, behind the far island */
+function drawSun(s, c) {
+  const g = s.g, u = g.u, sun = s.sunPos();
+  if (sun.a <= 0) return;
+  const r = 38 * u, sz = r * 3;
+  c.save(); c.beginPath(); c.rect(0, 0, g.W, g.horizon); c.clip();
+  c.globalAlpha = sun.a;
+  s.sprite('sun', sz, sz, sun.x, sun.y, x => {
+    const white = [];
+    for (let i = 0; i < 48; i++) { const a = i / 48 * TAU; white.push([Math.cos(a) * r * (1 + 0.12 * Math.sin(a * 3 + 1) + 0.06 * Math.sin(a * 5 + 2)), Math.sin(a) * r * 0.86 * (1 + 0.09 * Math.sin(a * 4))]); }
+    shape(x, dens(white, 4, true), mul(hex('#FFFFFF'), s.P.paper), DET, 5);
+    const yolk = ellipse(3 * u, -3 * u, r * 0.42, r * 0.4, 30);
+    shape(x, yolk, C.yolk, DET * 0.9, 7);
+    // the shine on the yolk
+    x.beginPath(); ribbon(x, ellipse(3 * u, -3 * u, r * 0.27, r * 0.25, 10, Math.PI * 1.1, Math.PI * 1.55), TEX * 1.3, 3, { tin: 2, tout: 2 }); x.fillStyle = '#FFFFFF'; x.fill();
+    dot(x, 3 * u - r * 0.12, -3 * u - r * 0.27, 1.3 * u + 0.4, '#FFFFFF');
+  });
+  c.restore();
+}
+
+/* a crescent moon, asleep, with a z */
+function drawMoon(s, c) {
+  const g = s.g, u = g.u, m = s.moonPos();
+  if (m.a <= 0) return;
+  const r = 25 * u, sz = r * 3.4;
+  c.save(); c.beginPath(); c.rect(0, 0, g.W, g.horizon); c.clip();
+  c.globalAlpha = m.a;
+  s.sprite('moon', sz, sz, m.x, m.y, x => {
+    const cres = [];
+    for (let i = 0; i <= 26; i++) { const a = -Math.PI / 2 + i / 26 * Math.PI; cres.push([Math.cos(a) * r, Math.sin(a) * r]); }
+    for (let i = 25; i >= 1; i--) { const a = -Math.PI / 2 + i / 26 * Math.PI; cres.push([Math.cos(a) * r * 0.38 + r * 0.02, Math.sin(a) * r * 0.97]); }
+    shape(x, dens(cres, 3, true), C.moon, DET, 11);
+    // a closed eye with lashes, and a small smile
+    x.beginPath();
+    ribbon(x, ellipse(r * 0.62, -r * 0.2, r * 0.17, r * 0.11, 9, 0.15 * Math.PI, 0.85 * Math.PI), TEX * 1.2, 2, { tin: 2, tout: 2 });
+    for (const k of [0.3, 0.5, 0.7]) { const a = k * Math.PI, ex = r * 0.62 + Math.cos(a) * r * 0.17, ey = -r * 0.2 + Math.sin(a) * r * 0.11; ribbon(x, [[ex, ey], [ex + Math.cos(a) * 3 * u, ey + Math.sin(a) * 3 * u]], TEX, k * 9, { tin: 1, tout: 1 }); }
+    ribbon(x, ellipse(r * 0.52, r * 0.3, r * 0.15, r * 0.1, 9, 0.2 * Math.PI, 0.8 * Math.PI), TEX * 1.1, 4, { tin: 2, tout: 2 });
+    x.fillStyle = INK; x.fill();
+  });
+  c.restore();
+  {
+    const zz = s.reduced ? 0.4 : (s.t * 0.4) % 1, col = rgba(mix(s.P.paper, s.P.beam, 0.3), m.a * (1 - zz) * 0.95);
+    label(c, 'z', m.x + r * 1.1 + zz * 10 * u, m.y - r * 0.7 - zz * 16 * u, (11 + zz * 5) * u + 3, col, 'left', -0.2);
+  }
+}
+
+function drawCloud(s, c, cl, name, legs) {
+  const g = s.g, u = g.u, P = s.P, p = s.cloudXY(cl), w = cl.w;
+  if (p.x < -w || p.x > g.W + w) return;
+  if (legs) {
+    // four legs, walking when it walks
+    const walk = s.reduced ? 0 : s.t * 5;
+    c.beginPath();
+    const feet = [];
+    [-0.24, -0.11, 0.1, 0.23].forEach((lx, i) => {
+      const x = p.x + lx * w * (cl.dir < 0 ? -1 : 1), sw = Math.sin(walk + i * 1.7 + (i % 2) * Math.PI) * 2.6 * u;
+      ribbon(c, [[x, p.y - 4 * u], [x + sw * 0.5, p.y + 5 * u], [x + sw, p.y + 12 * u]], DET * 1.25, i * 3, { tin: 2, tout: 2, w0: 0.9, w1: 0.9 });
+      feet.push([x + sw, p.y + 13 * u]);
+    });
+    c.fillStyle = INK; c.fill();
+    for (const [fx, fy] of feet) { c.beginPath(); c.ellipse(fx + 0.6 * u, fy, 2.6 * u, 1.9 * u, 0, 0, TAU); c.fill(); }
+  }
+  const sz = w * 1.3;
+  s.sprite(name + (legs && cl.dir < 0 ? 'L' : ''), sz, w * 0.75, p.x, p.y - w * 0.12, x => {
+    const top = cloudPts(0, w * 0.12, w, cl.seed);
+    const pts = dens(top, 5, true);
+    print(x, pts, P.cloud);
+    x.beginPath();
+    loop(x, pts, DET, cl.seed % 13);
+    // a curl or two of puff inside, drawn lightly
+    const R = rng(cl.seed + 5);
+    for (let i = 0; i < 2; i++) {
+      const cx = (R() - 0.5) * w * 0.5, cy = w * 0.02 - R() * w * 0.06, rr = w * (0.07 + R() * 0.05);
+      ribbon(x, ellipse(cx, cy, rr, rr * 0.8, 10, Math.PI * 1.05, Math.PI * 1.75), TEX, i + 3, { tin: 2, tout: 3 });
+    }
+    x.fillStyle = INK; x.fill();
+    if (legs) {
+      // a tail, and the hint of an ear: it might be a sheep
+      const f = cl.dir < 0 ? -1 : 1;
+      x.beginPath();
+      ribbon(x, [[-f * w * 0.5, w * 0.02], [-f * w * 0.57, -w * 0.03], [-f * w * 0.6, w * 0.03]], TEX, 4, { tin: 2, tout: 2 });
+      x.fillStyle = INK; x.fill();
+    }
+  });
+}
+
+/* the competition: a much smaller lighthouse on a far island */
+function drawIsle(s, c) {
+  const g = s.g, u = g.u, P = s.P, I = g.isle, hz = g.horizon;
+  const w = I.x1 - I.x0, h = I.h, cx = (I.x0 + I.x1) / 2, lx = I.x0 + w * 0.4, ltop = hz - h * 0.86 - 24 * u;
+  s.sprite('isle', w + 30 * u, (h + 44 * u) * 2, cx, hz, x => {
+    const hump = curve([[-w / 2, 0.5], [-w * 0.32, -h * 0.5], [-w * 0.08, -h * 0.86], [w * 0.16, -h * 0.8], [w * 0.38, -h * 0.4], [w / 2, 0.5]], 4);
+    print(x, [...hump, [w / 2, 3], [-w / 2, 3]], P.far);
+    x.beginPath(); ribbon(x, hump, DET * 0.9, 21, { tin: 3, tout: 3 }); x.fillStyle = INK; x.fill();
+    // the little tower: white, two stripes, a lamp
+    const tx = lx - cx, by = -h * 0.84, th = 24 * u, bw = 5.5 * u, tw = 3.6 * u;
+    const body = [[tx - bw / 2, by], [tx - tw / 2, by - th], [tx + tw / 2, by - th], [tx + bw / 2, by]];
+    print(x, body, mul(hex('#FFFFFF'), P.paper));
+    for (const k of [0.3, 0.68]) {
+      const y0 = by - th * k, y1 = by - th * (k + 0.16), w0 = lerp(bw, tw, k) / 2, w1 = lerp(bw, tw, k + 0.16) / 2;
+      print(x, [[tx - w0, y0], [tx - w1, y1], [tx + w1, y1], [tx + w0, y0]], hex('#FF4A36'));
+    }
+    x.beginPath(); edges(x, body, TEX * 1.1, 4, false, { ov: 1 }); x.fillStyle = INK; x.fill();
+  });
+  // its lamp, which blinks at night in a hurry
+  const night = smooth(0.4, 0.75, s.d), on = s.reduced ? 1 : (Math.sin(s.t * 3.1) > 0.2 ? 1 : 0.35);
+  const ly = ltop - 3 * u;
+  if (night > 0.05) { c.beginPath(); c.arc(lx, ly, (5 + 5 * on) * u, 0, TAU); c.fillStyle = rgba(P.beam, 0.35 * night * on); c.fill(); }
+  dot(c, lx, ly, 2.9 * u, rgba(mix(mul(hex('#FFFFFF'), P.paper), P.beam, Math.max(0.5, night * on))));
+  c.beginPath(); ribbon(c, ellipse(lx, ly, 3.2 * u, 3.2 * u, 12), TEX, 5, { tin: 1, tout: 1, w0: 1, w1: 1 }); c.fillStyle = INK; c.fill();
+}
+
+/* the sea: rows of scallops, thinning toward the horizon; ripples where things land */
+function waveScallops(s, c, lit) {
+  const g = s.g, u = g.u;
+  for (let i = 0; i < g.rows.length; i += 2) {
+    const row = g.rows[i], step = (16 + 34 * row.f) * Math.max(u, 0.66), w = (0.75 + 1.3 * row.f) * g.pw * (lit ? 1.15 : 1);
+    if (row.f < 0.08 && !lit) continue;
+    c.beginPath();
+    for (const [a, b] of row.spans) {
+      for (let x = a + hash(i) * step; x < b - step; x += step * (1.3 + hash(x * 0.1 + i) * 0.8)) {
+        if (hash(x * 0.37 + i * 3.1) < 0.18 - row.f * 0.2) continue;
+        const y = s.waveY(x, row), y2 = s.waveY(x + step, row);
+        c.moveTo(x, y); c.quadraticCurveTo(x + step / 2, (y + y2) / 2 - step * 0.34, x + step, y2);
+      }
+    }
+    c.lineWidth = w; c.stroke();
+  }
+}
+function drawWaves(s, c) {
+  const g = s.g, u = g.u, P = s.P;
+  c.strokeStyle = rgba(P.sea2); waveScallops(s, c, false);
+  for (const r of s.ripples) {
+    const age = s.t - r.t0, rx = 8 * u + age * 70 * u;
+    c.beginPath(); ribbon(c, ellipse(r.x, r.y, rx, rx * 0.3, 40), DET * 0.8, 4, { tin: 1, tout: 1, w0: 1, w1: 1 });
+    c.fillStyle = rgba(P.foam, clamp(1 - age / 2.2) * r.a); c.fill();
+  }
+}
+
+/* the light: a flat yellow fan with felt-pen edges, brighter at night */
+function beamPoly(s) {
+  const L = s.g.lamp, B = s.beam, len = B.len * s.diag * 1.05, hw = s.g.beamHalf;
+  return { L, len, a0: B.a - hw, a1: B.a + hw };
+}
+function drawBeam(s, c) {
+  const g = s.g, u = g.u, P = s.P, I = s.beamI(), { L, len, a0, a1 } = beamPoly(s);
+  if (len < 10) return;
+  const night = smooth(0.3, 0.8, s.d);
+  const e0 = [L.x + Math.cos(a0) * len, L.y + Math.sin(a0) * len], e1 = [L.x + Math.cos(a1) * len, L.y + Math.sin(a1) * len];
+  const fan = [[L.x, L.y], e0];
+  for (let i = 1; i < 12; i++) { const a = lerp(a0, a1, i / 12); fan.push([L.x + Math.cos(a) * len, L.y + Math.sin(a) * len]); }
+  fan.push(e1);
+  const col = mix(P.beam, hex('#FFF6C2'), night * 0.45);
+  poly(c, fan); c.fillStyle = rgba(col, 0.84 + 0.12 * night * I); c.fill();
+  // the scallops it crosses light up
+  c.save(); poly(c, fan); c.clip();
+  c.strokeStyle = rgba(mix(col, hex('#FFFFFF'), 0.5), 0.95); waveScallops(s, c, true);
+  c.restore();
+  // the pen goes along both edges, from just outside the eye
+  const r0 = g.lh.er * 2.3;
+  c.beginPath();
+  for (const [a, sd] of [[a0, 13], [a1, 17]]) ribbon(c, dens([[L.x + Math.cos(a) * r0, L.y + Math.sin(a) * r0], [L.x + Math.cos(a) * len, L.y + Math.sin(a) * len]], 9), DET * 0.95, sd, { tin: 20, tout: 1, w0: 0.2, w1: 1 });
+  if (s.beam.len < 0.85) ribbon(c, dens(fan.slice(1), 6), DET * 0.9, 19, { tin: 3, tout: 3 });
+  c.fillStyle = INK; c.fill();
+}
+
+/* where the light lands on the hill: a flat, lighter print on the grass */
+function drawHillLight(s, c) {
+  const { L, len, a0, a1 } = beamPoly(s);
+  if (len < 10 || Math.sin(s.beam.a) < 0.08) return;
+  const night = smooth(0.3, 0.8, s.d);
+  c.save(); poly(c, s.g.hillClip); c.clip();
+  c.beginPath(); c.moveTo(L.x, L.y);
+  for (let i = 0; i <= 12; i++) { const a = lerp(a0, a1, i / 12); c.lineTo(L.x + Math.cos(a) * len, L.y + Math.sin(a) * len); }
+  c.closePath(); c.fillStyle = rgba(mix(s.P.hill, s.P.beam, 0.5 + 0.2 * night)); c.fill();
+  c.restore();
+}
+
+/* the lamp's halo at night: hand-drawn rings and short rays, no blur */
+function drawHalo(s, c) {
+  const g = s.g, u = g.u, P = s.P, L = g.lamp, er = g.lh.er;
+  const night = smooth(0.35, 0.85, s.d), f = s.beam.flash, k = Math.max(night * s.beamI(), f * 0.9);
+  if (k < 0.02) return;
+  const r1 = er * (2.1 + f * 0.6), r2 = er * (3 + f * 1.4);
+  // the lit lantern: a flat disc of light just around the eye
+  c.globalAlpha = clamp(k * 1.4);
+  print(c, ellipse(L.x, L.y, er * 1.75, er * 1.6, 30), mix(P.beam, hex('#FFFFFF'), 0.25));
+  c.globalAlpha = 1;
+  c.beginPath();
+  ribbon(c, ellipse(L.x, L.y, r1, r1, 30, 0.3, TAU - 0.2), TEX, 7, { tin: 4, tout: 6 });
+  ribbon(c, ellipse(L.x, L.y, r2, r2, 40, 1.4, TAU + 0.6), TEX, 9, { tin: 4, tout: 8 });
+  const spin = s.reduced ? 0 : s.t * 0.25;
+  for (let i = 0; i < 14; i++) {
+    const a = i / 14 * TAU + spin + (i % 2) * 0.12, a1 = r2 * (1.15 + (i % 3) * 0.06), a2 = r2 * (1.42 + (i % 2) * 0.22 + f * 0.5);
+    ribbon(c, [[L.x + Math.cos(a) * a1, L.y + Math.sin(a) * a1], [L.x + Math.cos(a) * a2, L.y + Math.sin(a) * a2]], TEX, i, { tin: 1, tout: 2, w0: 0.7 });
+  }
+  c.fillStyle = rgba(P.beam, clamp(k * 1.1)); c.fill();
+}
+
+/* the hill: printed green, a shaded flank, the ridge in the heaviest line, a few hatches and flowers */
+function drawHill(s, c) {
+  const g = s.g, { W, H, u } = g, P = s.P, T = g.lh, rd = g.ridge;
+  print(c, g.hillPoly, P.hill);
+  // the shady flank, a second flat green
+  const sh = [];
+  for (const [x, y] of rd) if (x < T.x - T.wB * 2) sh.push([x, y]);
+  if (g.portrait) {
+    // under the headland, a darker band of cliff above the shore
+    const sl = g.shore, x0 = sl[0][0];
+    print(c, [...sl, ...sl.slice().reverse().map(([x, y]) => [x + 4 * u, y - (8 + (x - x0) / W * 26) * u])], P.hill2);
+  } else {
+    // it narrows to nothing near the top, so it reads as the hill turning away from the light
+    const n = sh.length, inner = sh.map(([x, y], i) => { const f = smooth(0, 0.35, (n - 1 - i) / n); return [x + (34 + (H - y) * 0.12) * u * f, y + (16 + (H - y) * 0.05) * u * f]; }).reverse();
+    print(c, [...sh, ...inner], P.hill2);
+  }
+  // hatching on the shady side: a few short groups, lightest line
+  c.beginPath();
+  const R = rng(5);
+  const groups = g.portrait ? 7 : 11;
+  for (let i = 0; i < groups; i++) {
+    const fx = R(), x = g.portrait ? lerp(rd[0][0] + 20 * u, T.x - T.wB * 3, fx) : lerp(rd[0][0] + 30 * u, T.x - T.wB * 2.2, fx);
+    const ry = s.ridgeY(x);
+    if (ry == null) continue;
+    const y = ry + (14 + R() * (g.portrait ? 26 : 70)) * u;
+    if (g.portrait && y > s.shoreY(x) - 12 * u) continue;
+    const n = 3 + ((R() * 3) | 0), l = (13 + R() * 10) * u;
+    for (let k = 0; k < n; k++) {
+      const hx = x + k * 5 * u, hy = y + k * 1.6 * u, lk = l * (1 - Math.abs(k - (n - 1) / 2) * 0.16);
+      ribbon(c, [[hx, hy], [hx + lk * 0.42, hy + lk]], TEX, i * 5 + k, { tin: 3, tout: 5, w0: 0.45, w1: 0.2, amp: 0.4 });
+    }
+  }
+  c.fillStyle = INK; c.fill();
+  // foam where the hill meets the sea
+  c.beginPath();
+  const foam = g.portrait ? g.shore : rd.filter(p => p[1] > g.horizon + 3 && p[0] < T.x);
+  for (let i = 2; i < foam.length - 2; i += 3) {
+    const [x, y] = foam[i], [x2, y2] = foam[i + 2], nx = g.portrait ? 0 : -1, ny = g.portrait ? 1 : 0;
+    const ox = nx * 5 * u, oy = ny * 5 * u, mx = (x + x2) / 2 + ox, my = (y + y2) / 2 + oy;
+    if (mx < -10 || mx > W + 10 || my > H + 10 || hash(i * 0.7) < 0.3) continue;
+    ribbon(c, [[x + ox, y + oy], [mx + nx * 2 * u - (g.portrait ? 0 : 1) * u, my + (g.portrait ? 3 : -2) * u], [x2 + ox, y2 + oy]], TEX * 1.1, i, { tin: 1, tout: 1, amp: 0.3 });
+  }
+  c.fillStyle = rgba(P.foam); c.fill();
+  // the ridge, and in portrait the shore under it
+  c.beginPath();
+  ribbon(c, rd.filter(p => p[0] > -20 && p[0] < W + 20), SIL, 21, { tin: 4, tout: 4, w0: 0.8, w1: 0.8 });
+  if (g.portrait) ribbon(c, g.shore.filter(p => p[0] < W + 20), SIL * 0.9, 23, { tin: 30, tout: 4, w0: 0.3, w1: 0.8 });
+  c.fillStyle = INK; c.fill();
+  // daisies near the cottage and the tower, where the eye goes
+  const D = rng(9);
+  for (let i = 0; i < (g.portrait ? 6 : 11); i++) {
+    const x = lerp(T.x - T.h * 0.42, Math.min(W - 10, g.cot.x + g.cot.w * 1.6), D()), ry = s.ridgeY(x);
+    if (ry == null || Math.abs(x - T.x) < T.wB * 0.8 || Math.abs(x - g.cot.x) < g.cot.w * 0.6) { D(); continue; }
+    const y = ry + (8 + D() * (g.portrait ? 20 : 46)) * u, r = 2.2 * u;
+    for (let k = 0; k < 5; k++) { const a = k / 5 * TAU; dot(c, x + Math.cos(a) * r + REGX * 0.5, y + Math.sin(a) * r + REGY * 0.5, 1.5 * u, mul(hex('#FFFFFF'), P.paper)); }
+    dot(c, x + REGX * 0.5, y + REGY * 0.5, 1.4 * u, C.yolk);
+  }
+}
+
+function drawCottage(s, c) {
+  const g = s.g, u = g.u, P = s.P, k = g.cot, w = k.w, h = k.h, x0 = k.x - w / 2, y0 = k.base - h;
+  const paper = mul(hex('#FFFFFF'), P.paper), night = smooth(0.45, 0.75, s.d);
+  // the chimney, a little crooked
+  const chx = x0 + w * 0.68, chw = w * 0.15, cht = y0 - h * 1.45;
+  const chim = [[chx, y0 - h * 0.2], [chx + 1.2 * u, cht], [chx + chw + 1.6 * u, cht], [chx + chw, y0 - h * 0.25]];
+  print(c, chim, mul(C.chimney, P.paper));
+  c.beginPath(); edges(c, chim, DET, 3, false);
+  ribbon(c, dens([[chx - 1.5 * u, cht + 3 * u], [chx + chw + 3 * u, cht + 2.5 * u]], 4), DET * 1.15, 4, { tin: 2, tout: 2 });
+  c.fillStyle = INK; c.fill();
+  // walls
+  const wall = [[x0, k.base], [x0, y0], [x0 + w, y0], [x0 + w, k.base]];
+  print(c, wall, paper);
+  // the roof, inked solid as felt-pen fills are
+  const roof = [[x0 - w * 0.12, y0 + 1 * u], [x0 + w * 0.5, y0 - h * 0.78], [x0 + w * 1.12, y0 + 1 * u]];
+  poly(c, roof); c.fillStyle = rgba(C.roof); c.fill();
+  c.beginPath(); edges(c, roof, DET * 1.1, 6, true); edges(c, wall, SIL * 0.85, 8, false); c.fillStyle = INK; c.fill();
+  // the window: four panes, lit at night
+  const wx = x0 + w * 0.14, wy = y0 + h * 0.24, ww = w * 0.27, wh = h * 0.36;
+  print(c, [[wx, wy], [wx + ww, wy], [wx + ww, wy + wh], [wx, wy + wh]], night > 0.5 ? P.beam : P.glass);
+  c.beginPath(); edges(c, [[wx, wy], [wx + ww, wy], [wx + ww, wy + wh], [wx, wy + wh]], DET * 0.85, 11, true, { ov: 1.2 });
+  ribbon(c, [[wx + ww / 2, wy + 1], [wx + ww / 2, wy + wh - 1]], TEX, 12, { tin: 1, tout: 1, w0: 0.8, w1: 0.8 });
+  ribbon(c, [[wx + 1, wy + wh / 2], [wx + ww - 1, wy + wh / 2]], TEX, 13, { tin: 1, tout: 1, w0: 0.8, w1: 0.8 });
+  c.fillStyle = INK; c.fill();
+  // the door (it opens for the keeper: see the states)
+  const dx = x0 + w * 0.56, dw = w * 0.24, dh = h * 0.66;
+  k.door = { x: dx, y: k.base - dh, w: dw, h: dh };
+  print(c, [[dx, k.base], [dx, k.base - dh], [dx + dw, k.base - dh], [dx + dw, k.base]], mul(C.door, P.paper));
+  c.beginPath(); edges(c, [[dx, k.base], [dx, k.base - dh], [dx + dw, k.base - dh], [dx + dw, k.base]], DET * 0.85, 14, false, { ov: 1 });
+  c.fillStyle = INK; c.fill();
+  dot(c, dx + dw * 0.78, k.base - dh * 0.48, 1.3 * u + 0.4, INK);
+}
+
+/* the tower: white with curved stripes in the theme's colours, a door, two windows and a gallery */
+function drawTower(s, c) {
+  const g = s.g, u = g.u, P = s.P, T = g.lh, th = THEMES[s.theme];
+  const paper = mul(hex('#FFFFFF'), P.paper);
+  const half = k => lerp(T.wB, T.wT, k) / 2, yAt = k => T.base - T.h * k;
+  const Lp = [], Rp = [];
+  for (let i = 0; i <= 20; i++) { const k = i / 20; Lp.push([T.x - half(k), yAt(k)]); Rp.push([T.x + half(k), yAt(k)]); }
+  const body = [...Lp, ...Rp.slice().reverse()];
+  print(c, body, paper);
+  // stripes, seen from below: their edges curve up a little
+  const bands = 6, sag = T.wB * 0.09;
+  const edge = k => { const hw = half(k), out = []; for (let i = 0; i <= 12; i++) { const f = i / 12 * 2 - 1; out.push([T.x + f * hw, yAt(k) - sag * (1 - f * f)]); } return out; };
+  let n = 0;
+  for (let j = 1; j < bands; j += 2) {
+    const k0 = j / bands, k1 = (j + 1) / bands;
+    const lo = edge(k0), hi = j + 1 >= bands ? [[T.x + half(1), yAt(1)], [T.x - half(1), yAt(1)]] : edge(k1).reverse();
+    const col = hex(th.stripes[n++ % th.stripes.length]);
+    print(c, [...lo, ...hi], mul(col, P.paper));
+  }
+  // windows and the door
+  const win = (k, w, h) => { const y = yAt(k); return [[T.x - w / 2, y - h / 2], [T.x + w / 2, y - h / 2], [T.x + w / 2, y + h / 2], [T.x - w / 2, y + h / 2]]; };
+  const night = smooth(0.45, 0.75, s.d);
+  const glass = night > 0.5 ? P.beam : rgba(C.roof);
+  for (const k of [0.25, 0.58]) { const q = win(k, T.wB * 0.22, T.er * 0.75); poly(c, q); c.fillStyle = typeof glass === 'string' ? glass : rgba(glass); c.fill(); }
+  const dw = T.wB * 0.32, dh = T.wB * 0.5, dpts = [[T.x - dw / 2, T.base], ...ellipse(T.x, T.base - dh + dw / 2, dw / 2, dw / 2, 10, Math.PI, TAU).map(p => p), [T.x + dw / 2, T.base]];
+  poly(c, dpts); c.fillStyle = rgba(C.roof); c.fill();
+  // the outline: two sides and the base, then a few stripe edges and hatches on the shady side
+  c.beginPath();
+  ribbon(c, dens([[T.x - T.wB / 2 - 1 * u, T.base + 3 * u], [T.x - T.wT / 2, T.top - 1 * u]], 6), SIL, 31, { tin: 6, tout: 4, w0: 0.7, w1: 0.6 });
+  ribbon(c, dens([[T.x + T.wB / 2 + 0.5 * u, T.base + 2 * u], [T.x + T.wT / 2, T.top - 1 * u]], 6), SIL, 33, { tin: 6, tout: 4, w0: 0.7, w1: 0.6 });
+  for (let j = 1; j < bands; j++) {
+    const e = edge(j / bands), cut = Math.round(e.length * (0.55 + hash(j) * 0.35));
+    ribbon(c, j % 2 ? e.slice(0, cut) : e.slice(e.length - cut), TEX, 40 + j, { tin: 2, tout: 8, w0: 0.6, w1: 0.1 });
+  }
+  for (let j = 0; j < bands; j++) {
+    const k = (j + 0.5) / bands, x = T.x + half(k) - 2.6 * u, y = yAt(k);
+    for (let i = 0; i < 3; i++) ribbon(c, [[x - i * 3 * u, y - T.h / bands * 0.32], [x - i * 3 * u - 0.6 * u, y + T.h / bands * 0.3 - i * 2 * u]], TEX * 0.85, j * 3 + i, { tin: 2, tout: 2, amp: 0.3 });
+  }
+  for (const k of [0.25, 0.58]) edges(c, win(k, T.wB * 0.22, T.er * 0.75), TEX, 50 + k * 10, true, { ov: 0.6 });
+  ribbon(c, dpts, DET * 0.9, 61, { tin: 2, tout: 2 });
+  c.fillStyle = INK; c.fill();
+  // the gallery: a dark deck the eye sits on
+  const gw = T.wT * 0.95, gy = T.top;
+  const deck = [[T.x - gw, gy + 1 * u], [T.x - gw * 1.05, gy - T.gal * 0.42], [T.x + gw * 1.05, gy - T.gal * 0.42], [T.x + gw, gy + 1 * u]];
+  poly(c, deck); c.fillStyle = INK; c.fill();
+}
+
+/* the eye in the lantern: an iris the colour of the light, a pupil that follows the beam, a lid */
+function drawEye(s, c) {
+  const g = s.g, u = g.u, P = s.P, T = g.lh, L = g.lamp, er = T.er, B = s.beam;
+  const night = smooth(0.35, 0.8, s.d);
+  const rx = er * 1.32, ry = er * 1.08;
+  const eye = ellipse(L.x, L.y, rx, ry, 40);
+  print(c, eye, mix(mul(hex('#FFFFFF'), P.paper), P.beam, night * 0.25));
+  // where it looks: along the beam, or straight at you when the light faces you
+  const look = clamp(B.len * 1.3) * (1 - B.flash), pa = B.a;
+  const px = L.x + Math.cos(pa) * rx * 0.42 * look, py = L.y + Math.sin(pa) * ry * 0.36 * look;
+  const ir = er * (0.62 + 0.12 * B.flash), pr = er * (0.3 - 0.08 * night + 0.1 * B.flash);
+  c.save(); poly(c, eye, true, REGX, REGY); c.clip();
+  dot(c, px + REGX, py + REGY, ir, mix(P.beam, hex('#FFB52E'), 0.35 - 0.2 * night));
+  c.restore();
+  c.save(); poly(c, eye); c.clip();
+  dot(c, px, py, pr, INK);
+  dot(c, px - pr * 0.45, py - pr * 0.5, pr * 0.38 + 0.4, '#FFFFFF');
+  c.beginPath(); ribbon(c, ellipse(px, py, ir, ir, 22), TEX, 3, { tin: 1, tout: 1, w0: 1, w1: 1, amp: 0.3 }); c.fillStyle = INK; c.fill();
+  // the lid: a little heavy by day, wide awake at night, shut when it blinks or winks
+  const bl = s.t - s.blink.at, wk = s.t - s.blink.wink;
+  let shut = lerp(0.2, 0.02, night);
+  if (bl < 0.18) shut = Math.max(shut, Math.sin(bl / 0.18 * Math.PI));
+  if (wk < 0.6) shut = Math.max(shut, wk < 0.1 ? wk / 0.1 : wk < 0.45 ? 1 : 1 - (wk - 0.45) / 0.15);
+  if (s.reduced && wk >= 0.6) shut = lerp(0.2, 0.02, night);
+  const lidCol = rgba(mul(hex('#FFFFFF'), P.paper));
+  if (shut > 0.86) {
+    poly(c, eye); c.fillStyle = lidCol; c.fill();
+    c.beginPath();
+    ribbon(c, ellipse(L.x, L.y - ry * 0.35, rx * 0.78, ry * 0.55, 16, 0.2 * Math.PI, 0.8 * Math.PI), DET, 5, { tin: 3, tout: 3 });
+    for (const k of [0.32, 0.5, 0.68]) { const a = k * Math.PI, ex = L.x + Math.cos(a) * rx * 0.78, ey = L.y - ry * 0.35 + Math.sin(a) * ry * 0.55; ribbon(c, [[ex, ey], [ex + Math.cos(a) * er * 0.35, ey + Math.sin(a) * er * 0.35]], TEX, k * 9, { tin: 1, tout: 1 }); }
+    c.fillStyle = INK; c.fill();
+  } else if (shut > 0.01) {
+    const ly = L.y - ry + shut * ry * 1.2, lid = [];
+    for (let i = 0; i <= 24; i++) { const a = Math.PI + i / 24 * Math.PI; lid.push([L.x + Math.cos(a) * (rx + 2), L.y + Math.sin(a) * (ry + 2)]); }
+    for (let i = 0; i <= 16; i++) { const f = 1 - i / 16, x = L.x - rx + f * 2 * rx; lid.push([x, ly + (1 - ((x - L.x) / rx) ** 2) * ry * 0.22 * shut]); }
+    poly(c, lid); c.fillStyle = lidCol; c.fill();
+    c.beginPath(); ribbon(c, lid.slice(25), DET, 5, { tin: 3, tout: 3 }); c.fillStyle = INK; c.fill();
+  }
+  c.restore();
+  c.beginPath(); loop(c, eye, SIL * 0.85, 8); c.fillStyle = INK; c.fill();
+  // the gallery's railing passes in front of the eye
+  const gw = T.wT * 0.95, top = T.top - T.gal * 0.42, rail = top - T.gal * 0.62;
+  c.beginPath();
+  ribbon(c, dens([[L.x - gw * 1.08, rail], [L.x + gw * 1.08, rail]], 4), DET * 0.9, 9, { tin: 2, tout: 2, w0: 0.8, w1: 0.8 });
+  for (let i = 0; i <= 6; i++) { const x = L.x - gw + i / 6 * gw * 2; ribbon(c, [[x, top], [x, rail]], TEX * 0.95, 70 + i, { tin: 1, tout: 1, w0: 0.9, w1: 0.9, amp: 0.2 }); }
+  c.fillStyle = INK; c.fill();
+}
+
+/* a knitted pom-pom hat: a ribbed brim, a long floppy cone in the theme's colour, a white bobble */
+function drawHat(s, c) {
+  const g = s.g, u = g.u, P = s.P, T = g.lh, L = g.lamp, er = T.er, th = THEMES[s.theme];
+  const col = mul(hex(th.hat), P.paper), ry = er * 1.08;
+  const sway = s.reduced ? 0.15 : 0.15 + s.windTotal * 0.25 + Math.sin(s.t * 1.3) * 0.05;
+  const by = L.y - ry * 0.62, bw = er * 1.5, bh = er * 0.62;
+  const tip = [L.x + er * (0.5 + sway * 2.2), by - er * 3.1 + Math.abs(sway) * er * 0.6];
+  const cone = curve([[L.x - bw * 0.92, by - bh * 0.6], [L.x - bw * 0.5, by - er * 1.9], [L.x + er * 0.1 + sway * er, by - er * 2.85], tip, [L.x + er * 0.65 + sway * er * 1.4, by - er * 2.2], [L.x + bw * 0.9, by - bh * 0.6]], 3);
+  print(c, cone, col);
+  // a white knitted stripe across the cone
+  c.save(); poly(c, cone, true, REGX, REGY); c.clip();
+  const sy = by - er * 1.55;
+  c.beginPath(); c.moveTo(L.x - bw * 2, sy + er * 0.25); c.quadraticCurveTo(L.x, sy - er * 0.05, L.x + bw * 2, sy + er * 0.2); c.lineTo(L.x + bw * 2, sy - er * 0.25); c.quadraticCurveTo(L.x, sy - er * 0.55, L.x - bw * 2, sy - er * 0.25); c.closePath();
+  c.fillStyle = rgba(mul(hex('#FFFFFF'), P.paper)); c.fill();
+  c.restore();
+  const brim = [[L.x - bw, by + bh * 0.45], [L.x - bw * 1.02, by - bh * 0.55], [L.x + bw * 1.02, by - bh * 0.6], [L.x + bw, by + bh * 0.5]];
+  print(c, brim, mix(col, hex('#000000'), 0.12));
+  c.beginPath();
+  loop(c, cone, DET * 1.05, 14, { over: 0.05 });
+  edges(c, brim, DET, 15, true, { ov: 1.2 });
+  for (let i = 1; i < 7; i++) { const x = L.x - bw + i / 7 * bw * 2; ribbon(c, [[x, by - bh * 0.4], [x + 0.4 * u, by + bh * 0.32]], TEX * 0.8, 80 + i, { tin: 1, tout: 1, amp: 0.2 }); }
+  c.fillStyle = INK; c.fill();
+  // the bobble: a scribbled ball of wool
+  const pr = er * 0.66, pb = [];
+  for (let i = 0; i < 40; i++) { const a = i / 40 * TAU, r = pr * (1 + 0.09 * Math.abs(Math.sin(a * 5.5 + 1))); pb.push([tip[0] + Math.cos(a) * r, tip[1] - pr * 0.6 + Math.sin(a) * r]); }
+  shape(c, pb, mul(hex('#FFFFFF'), P.paper), DET * 0.95, 16);
+  c.beginPath(); ribbon(c, ellipse(tip[0] + pr * 0.1, tip[1] - pr * 0.5, pr * 0.42, pr * 0.36, 8, 0.2, 1.9), TEX * 0.8, 90, { tin: 1, tout: 2 }); c.fillStyle = INK; c.fill();
+  // a sparkle or two after changing into new pyjamas
+  const sp = s.t - s.sparkle;
+  if (sp < 1.2 && !s.reduced) {
+    c.beginPath();
+    for (let i = 0; i < 6; i++) {
+      const a = -Math.PI / 2 + (i - 2.5) * 0.55, r1 = T.wB * (0.9 + sp * 1.4), r2 = r1 + 7 * u;
+      const cx = T.x, cy = T.top + T.h * 0.3;
+      ribbon(c, [[cx + Math.cos(a) * r1 * 1.4, cy + Math.sin(a) * r1 * 2], [cx + Math.cos(a) * r2 * 1.4, cy + Math.sin(a) * r2 * 2]], DET, i, { tin: 1, tout: 1 });
+    }
+    c.fillStyle = rgba(P.ink, 1 - sp / 1.2); c.fill();
+  }
+}
+
+/* grass along the ridge, leaning with the wind and away from the pointer */
+function drawTufts(s, c) {
+  const g = s.g, u = g.u;
+  c.beginPath();
+  for (const b of g.tufts) {
+    let a = s.reduced ? 0.12 : Math.sin(s.t * 1.6 + b.p) * 0.14 * (0.6 + s.windAmb) + s.windTotal * 0.36;
+    if (s.ptr.on && !s.reduced) {
+      const dx = b.x - s.ptr.x, dy = b.y - s.ptr.y, r = 95 * u, d2 = dx * dx + dy * dy;
+      if (d2 < r * r) a += Math.sign(dx || 1) * 1.05 * (1 - Math.sqrt(d2) / r);
+    }
+    a = clamp(a, -1.3, 1.3);
+    for (let k = 0; k < b.n + 1; k++) {
+      const da = (k - b.n / 2) * 0.42, l = b.l * (k === 1 ? 1.15 : 0.85), x = b.x + (k - b.n / 2) * 1.6 * u, y = b.y + 1.5 * u;
+      const tx = x + Math.sin(a + da) * l, ty = y - Math.cos(a + da) * l, w = 1.1 * g.pw;
+      c.moveTo(x - w, y); c.quadraticCurveTo(lerp(x, tx, 0.5) - w * 0.4, lerp(y, ty, 0.55), tx, ty); c.quadraticCurveTo(lerp(x, tx, 0.5) + w * 0.4, lerp(y, ty, 0.55), x + w, y); c.closePath();
+    }
+  }
+  c.fillStyle = INK; c.fill();
+}
+
+function drawSmoke(s, c) {
+  if (s.reduced) return;
+  const g = s.g, u = g.u, k = g.cot, x0 = k.x - k.w / 2 + k.w * 0.68 + k.w * 0.075, y0 = k.base - k.h - k.h * 1.5;
+  c.beginPath();
+  for (let i = 0; i < 3; i++) {
+    const a = (s.t * 0.22 + i / 3) % 1, sx = x0 + s.windTotal * 50 * u * a + Math.sin(a * 6 + i) * 3 * u, sy = y0 - 6 * u - a * 46 * u, r = (2.5 + a * 6) * u;
+    const sp = [];
+    for (let k2 = 0; k2 <= 16; k2++) { const an = k2 / 16 * TAU * 1.35 + i, rr = r * (0.25 + k2 / 16 * 0.75); sp.push([sx + Math.cos(an) * rr, sy + Math.sin(an) * rr]); }
+    ribbon(c, sp, TEX * (1 - a * 0.4), i, { tin: 3, tout: 6 });
+  }
+  c.fillStyle = rgba(s.P.ink, 0.85); c.fill();
+}
+
+/* ---------- scene states: one dry gag per section, drawn where it's seen ---------- */
+function drawStates(s, c) {
+  const p = s.pres;
+  if (p.themes > 0.01) drawWashing(s, c, p.themes);
+  if (p.tiling > 0.01) drawHuts(s, c, p.tiling);
+  if (p.widgets > 0.01) drawDesk(s, c, p.widgets);
+  if (p.install > 0.01) drawDoorway(s, c, p.install);
+  if (p.edit > 0.01) drawEditKeeper(s, c, p.edit);
+}
+/* pops a prop in from the ground: scale with a little overshoot */
+const pop = p => { const t = clamp(p); return t < 1 ? 1 - Math.pow(1 - t, 3) * Math.cos(t * 4.2) : 1; };
+
+function drawKeeper(s, c, x, y, sc, pose, flip, walk) {
+  const u = s.g.u * sc, P = s.P, f = flip ? -1 : 1;
+  const navy = mul(C.navy, P.paper), skin = mul(C.skin, P.paper), white = mul(hex('#FFFFFF'), P.paper);
+  c.save(); c.translate(x, y); c.scale(f, 1);
+  // legs
+  const st = Math.sin(walk) * 0.45;
+  c.beginPath();
+  ribbon(c, [[-2 * u, -12 * u], [-2 * u + Math.sin(st) * 9 * u, 0]], DET * 1.5, 1, { tin: 1, tout: 1, w0: 1, w1: 1 });
+  ribbon(c, [[2 * u, -12 * u], [2 * u - Math.sin(st) * 9 * u, 0]], DET * 1.5, 2, { tin: 1, tout: 1, w0: 1, w1: 1 });
+  c.fillStyle = rgba(navy); c.fill();
+  // boots
+  dot(c, -2 * u + Math.sin(st) * 9 * u + 1.5 * u, -0.5 * u, 2.2 * u, INK); dot(c, 2 * u - Math.sin(st) * 9 * u + 1.5 * u, -0.5 * u, 2.2 * u, INK);
+  // a striped jumper
+  const body = [[-5.5 * u, -11 * u], [-6 * u, -24 * u], [6 * u, -24 * u], [5.5 * u, -11 * u]];
+  print(c, body, white);
+  c.save(); poly(c, body, true, REGX, REGY); c.clip();
+  for (let i = 0; i < 3; i++) { c.fillStyle = rgba(navy); c.fillRect(-8 * u + REGX, (-22 + i * 4.2) * u + REGY, 16 * u, 2.1 * u); }
+  c.restore();
+  c.beginPath(); edges(c, body, DET, 3, true, { ov: 0.6 });
+  // arms
+  if (pose === 'carry') {
+    ribbon(c, [[-5 * u, -22 * u], [-7 * u, -30 * u], [-5 * u, -37 * u]], DET * 1.1, 4, { tin: 1, tout: 1 });
+    ribbon(c, [[5 * u, -22 * u], [7 * u, -30 * u], [5 * u, -37 * u]], DET * 1.1, 5, { tin: 1, tout: 1 });
+  } else if (pose === 'wave') {
+    const wv = s.reduced ? 0 : Math.sin(s.t * 7) * 0.5;
+    ribbon(c, [[-5 * u, -22 * u], [-7 * u, -15 * u]], DET * 1.1, 4, { tin: 1, tout: 1 });
+    ribbon(c, [[5 * u, -22 * u], [10 * u, -28 * u], [10 * u + Math.sin(wv) * 7 * u, -36 * u]], DET * 1.1, 5, { tin: 1, tout: 1 });
+  } else {
+    ribbon(c, [[-5 * u, -22 * u], [-6.5 * u - st * 4 * u, -14 * u]], DET * 1.1, 4, { tin: 1, tout: 1 });
+    ribbon(c, [[5 * u, -22 * u], [6.5 * u + st * 4 * u, -14 * u]], DET * 1.1, 5, { tin: 1, tout: 1 });
+  }
+  c.fillStyle = INK; c.fill();
+  // head, white beard, cap with a peak
+  const head = ellipse(0.5 * u, -29 * u, 5 * u, 5.4 * u, 20);
+  print(c, head, skin);
+  const beard = [[-4.4 * u, -29 * u], [-3 * u, -23.5 * u], [1 * u, -22.4 * u], [5.2 * u, -24.5 * u], [5.6 * u, -28.5 * u]];
+  print(c, curve(beard, 2), white);
+  c.beginPath(); loop(c, head, DET, 6, { over: 0.04 }); ribbon(c, curve(beard, 2), TEX, 7, { tin: 1, tout: 1 }); c.fillStyle = INK; c.fill();
+  dot(c, 2.6 * u, -30 * u, 0.9 * u + 0.3, INK);
+  dot(c, 5.6 * u, -28.6 * u, 1.3 * u, mix(skin, hex('#E0786A'), 0.5));
+  const cap = [[-5 * u, -31.5 * u], [-4.6 * u, -36 * u], [3 * u, -36.4 * u], [5.4 * u, -32 * u]];
+  poly(c, cap); c.fillStyle = rgba(navy); c.fill();
+  c.beginPath(); edges(c, cap, DET * 0.9, 8, false, { ov: 0.5 }); ribbon(c, [[3 * u, -32 * u], [9 * u, -31 * u]], DET * 1.2, 9, { tin: 1, tout: 2 }); c.fillStyle = INK; c.fill();
+  c.restore();
+}
+
+function drawTile(s, c, x, y, u) {
+  const w = 34 * u, h = 15 * u, r = 5 * u, P = s.P;
+  const box = [];
+  for (const [cx, cy, a] of [[x + w / 2 - r, y - h / 2 + r, -Math.PI / 2], [x + w / 2 - r, y + h / 2 - r, 0], [x - w / 2 + r, y + h / 2 - r, Math.PI / 2], [x - w / 2 + r, y - h / 2 + r, Math.PI]])
+    for (let i = 0; i <= 4; i++) { const an = a + i / 4 * Math.PI / 2; box.push([cx + Math.cos(an) * r, cy + Math.sin(an) * r]); }
+  shape(c, box, C.tile, DET, 4, { over: 0.05 });
+  label(c, '10:30', x + REGX * 0.5, y + REGY * 0.5 + 0.5, 10 * u + 1.5, rgba(mul(hex('#FFFFFF'), P.paper)), 'center', 0);
+}
+
+/* edit: the keeper wanders the ridge with a widget tile ("10:30") */
+function drawEditKeeper(s, c, p) {
+  const g = s.g, u = g.u, T = g.lh, k = g.cot, sc = g.portrait ? 1.5 : 1.55;
+  const t = s.t - s.since.edit;
+  const door = k.x - k.w * 0.5 + k.w * 0.68, xL = g.portrait ? g.W * 0.42 : g.W * 0.668, xR = T.x - T.wB * 1.6;
+  const v = 32 * u;
+  let x, flip;
+  const out = (door - xR) / v;
+  if (s.reduced) { x = lerp(xL, xR, 0.45); flip = true; }
+  else if (t < out) { x = door - t * v; flip = true; }
+  else {
+    const span = xR - xL, ph = ((t - out) * v) % (span * 2 + 120 * u);
+    if (ph < span) { x = xR - ph; flip = true; }
+    else if (ph < span + 60 * u) { x = xL; flip = false; }
+    else if (ph < span * 2 + 60 * u) { x = xL + (ph - span - 60 * u); flip = false; }
+    else { x = xR; flip = true; }
+  }
+  const ry = s.ridgeY(x) ?? k.base, walking = !s.reduced && t > 0;
+  c.globalAlpha = clamp(p * 1.5);
+  drawKeeper(s, c, x, ry + 2 * u, sc, 'carry', flip, walking ? s.t * 9 : 0);
+  drawTile(s, c, x + (flip ? -1 : 1) * 0.5 * u, ry + 2 * u - 42 * u * sc + Math.sin(s.reduced ? 0 : s.t * 9) * 0.6 * u, u * sc);
+  c.globalAlpha = 1;
+}
+
+/* install: night, the cottage door open with warm light, the keeper waving */
+function drawDoorway(s, c, p) {
+  const g = s.g, u = g.u, P = s.P, k = g.cot, d = k.door;
+  if (!d) return;
+  const warm = hex('#FFD45C');
+  c.globalAlpha = clamp(p * 1.4);
+  // light spilling onto the grass
+  const spill = [[d.x, k.base], [d.x + d.w, k.base], [d.x + d.w + 44 * u, k.base + 34 * u], [d.x - 34 * u, k.base + 34 * u]];
+  poly(c, spill); c.fillStyle = rgba(mix(P.hill, warm, 0.62)); c.fill();
+  poly(c, [[d.x, k.base], [d.x, d.y], [d.x + d.w, d.y], [d.x + d.w, k.base]]); c.fillStyle = rgba(warm); c.fill();
+  // the door swung open against the wall
+  const door = [[d.x + d.w, k.base], [d.x + d.w, d.y], [d.x + d.w * 1.55, d.y + 2 * u], [d.x + d.w * 1.55, k.base - 1 * u]];
+  print(c, door, mul(C.door, P.paper));
+  c.beginPath(); edges(c, door, DET * 0.85, 3, true, { ov: 0.6 }); c.fillStyle = INK; c.fill();
+  drawKeeper(s, c, d.x + d.w * 0.5, k.base, g.portrait ? 1.05 : 1.45, 'wave', false, 0);
+  c.globalAlpha = 1;
+}
+
+/* widgets: a sheep at a tiny desk with a laptop, typing */
+function drawDesk(s, c, p) {
+  const g = s.g, P = s.P, sc = pop(p) * (g.portrait ? 1.75 : 2.1), u = g.u * sc;
+  const x = g.portrait ? g.W * 0.5 : g.W * 0.7, ry = s.ridgeY(x), y = g.portrait ? ry + (s.shoreY(x) - ry) * 0.66 : ry + g.H * 0.2;
+  if (sc < 0.05) return;
+  const typing = s.reduced ? 0 : s.t * 11, wool = mul(C.wool, P.paper), night = smooth(0.4, 0.8, s.d);
+  c.save(); c.translate(x, y);
+  // the sheep behind the desk, seen from the front
+  const bob = s.reduced ? 0 : Math.sin(s.t * 2.4) * 0.6 * u;
+  const body = [];
+  for (let i = 0; i < 36; i++) { const a = i / 36 * TAU, r = 1 + 0.12 * Math.abs(Math.sin(a * 5)); body.push([Math.cos(a) * 15 * u * r, -27 * u + Math.sin(a) * 12 * u * r]); }
+  shape(c, body, wool, DET, 3);
+  const face = ellipse(0, -36 * u + bob, 6 * u, 7.5 * u, 20);
+  poly(c, face); c.fillStyle = INK; c.fill();
+  for (const sx of [-1, 1]) { const ear = ellipse(sx * 8.5 * u, -40 * u + bob, 4.4 * u, 1.9 * u, 12, 0, TAU, sx * 0.35); poly(c, ear); c.fillStyle = INK; c.fill(); }
+  const tuft = []; for (let i = 0; i < 14; i++) { const a = Math.PI + i / 13 * Math.PI, r = 1 + 0.2 * Math.abs(Math.sin(a * 4)); tuft.push([Math.cos(a) * 6.5 * u * r, -42 * u + bob + Math.sin(a) * 3.6 * u * r]); }
+  shape(c, tuft, wool, TEX, 5);
+  // eyes on the screen, lit by it at night
+  for (const sx of [-1, 1]) { dot(c, sx * 2.6 * u, -36.5 * u + bob, 1.6 * u, '#FFFFFF'); dot(c, sx * 2.6 * u, -35.8 * u + bob, 0.8 * u, INK); }
+  // the desk
+  const top = [[-24 * u, -14 * u], [24 * u, -14 * u], [24 * u, -10.5 * u], [-24 * u, -10.5 * u]];
+  print(c, top, mul(C.wood, P.paper));
+  c.beginPath(); edges(c, top, DET, 7, true, { ov: 1 });
+  ribbon(c, [[-20 * u, -10.5 * u], [-21 * u, 0]], DET, 8, { tin: 1, tout: 1 }); ribbon(c, [[20 * u, -10.5 * u], [21 * u, 0]], DET, 9, { tin: 1, tout: 1 });
+  c.fillStyle = INK; c.fill();
+  // the laptop, seen from the back, with a lighthouse sticker; the screen's glow on the sheep
+  if (night > 0.05) { c.beginPath(); c.ellipse(0, -30 * u, 16 * u, 9 * u, 0, 0, TAU); c.fillStyle = rgba(hex('#BFE3FF'), 0.35 * night); c.fill(); }
+  const lid = [[-11 * u, -14.5 * u], [-12 * u, -29 * u], [12 * u, -29 * u], [11 * u, -14.5 * u]];
+  print(c, lid, mul(C.steel, P.paper));
+  c.beginPath(); edges(c, lid, DET, 11, true, { ov: 0.8 }); c.fillStyle = INK; c.fill();
+  const st = [[-1.6 * u, -18 * u], [-1.1 * u, -25 * u], [1.1 * u, -25 * u], [1.6 * u, -18 * u]];
+  print(c, st, mul(hex('#FFFFFF'), P.paper)); c.fillStyle = rgba(mul(C.chimney, P.paper)); c.fillRect(-1.4 * u + REGX, -22.5 * u + REGY, 2.8 * u, 1.6 * u);
+  // hooves on the keys, one and then the other
+  c.beginPath();
+  for (const sx of [-1, 1]) {
+    const up = s.reduced ? 0 : Math.max(0, Math.sin(typing + (sx > 0 ? Math.PI : 0))) * 2.4 * u;
+    ribbon(c, [[sx * 10 * u, -22 * u], [sx * 13 * u, -17 * u - up], [sx * 11 * u, -15.5 * u - up]], DET * 1.3, 12 + sx, { tin: 1, tout: 1 });
+  }
+  c.fillStyle = INK; c.fill();
+  // tak tak
+  if (!s.reduced) {
+    const ph = (s.t * 1.3) % 1;
+    label(c, ph < 0.5 ? 'tak' : 'tak tak', 15 * u, -34 * u - ph * 6 * u, 8 * u + 2, rgba(s.d > 0.55 ? P.paper : P.ink, 1 - ph), 'left', -0.15);
+  }
+  // a mug of something
+  const mug = [[16 * u, -14 * u], [16.5 * u, -20 * u], [21 * u, -20 * u], [20.5 * u, -14 * u]];
+  print(c, mug, mul(hex('#FF4A36'), P.paper)); c.beginPath(); edges(c, mug, TEX, 13, true, { ov: 0.6 }); ribbon(c, ellipse(21.5 * u, -17 * u, 2 * u, 2 * u, 8, -1.2, 1.2), TEX, 14, { tin: 1, tout: 1 }); c.fillStyle = INK; c.fill();
+  c.restore();
+}
+
+/* tiling: four numbered beach huts; the focused workspace's hut is lit, its door open */
+function hutSpots(s) {
+  const g = s.g;
+  if (g.portrait) return [0.38, 0.54, 0.7, 0.86].map(fx => { const x = fx * g.W; return { x, y: g.top + (g.H - g.top) * 0.455 + (fx - 0.38) * g.H * 0.05 }; });
+  return [0.625, 0.705, 0.785, 0.865].map(fx => ({ x: fx * g.W, y: g.top + (g.H - g.top) * 0.82 }));
+}
+function drawHuts(s, c, p) {
+  const g = s.g, P = s.P, spots = hutSpots(s), white = mul(hex('#FFFFFF'), P.paper);
+  const k0 = pop(p) * (g.portrait ? 1.3 : 1.75);
+  // the boardwalk they share
+  if (k0 > 0.05) {
+    const u = g.u * k0, a = spots[0], b = spots[3], walk = [[a.x - 30 * u, a.y], [b.x + 30 * u, b.y], [b.x + 30 * u, b.y + 4 * u], [a.x - 30 * u, a.y + 4 * u]];
+    print(c, walk, mul(C.wood, P.paper));
+    c.beginPath(); edges(c, walk, TEX * 1.2, 2, true, { ov: 1.2 });
+    for (let x = a.x - 22 * u; x < b.x + 30 * u; x += 9 * u) ribbon(c, [[x, a.y + lerp(0, b.y - a.y, (x - a.x) / (b.x - a.x)) + 0.5 * u], [x, a.y + lerp(0, b.y - a.y, (x - a.x) / (b.x - a.x)) + 3.5 * u]], TEX * 0.8, x, { tin: 1, tout: 1, amp: 0.2 });
+    c.fillStyle = INK; c.fill();
+  }
+  spots.forEach((q, i) => {
+    const sc = pop(clamp(p * 1.6 - i * 0.15)) * (g.portrait ? 1.3 : 1.75), u = g.u * sc;
+    if (sc < 0.05) return;
+    const on = s.ws === i + 1, col = mul(C.huts[i], P.paper);
+    const w = 26 * u, h = 27 * u, x0 = q.x - w / 2, y0 = q.y - h;
+    const body = [[x0, q.y], [x0, y0], [x0 + w, y0], [x0 + w, q.y]];
+    print(c, body, white);
+    c.save(); poly(c, body, true, REGX, REGY); c.clip(); c.fillStyle = rgba(col);
+    for (let k = 0; k < 4; k++) c.fillRect(x0 + REGX + k * w / 4, y0 + REGY - 1, w / 8, h + 2);
+    c.restore();
+    const roof = [[x0 - 4 * u, y0 + 1 * u], [q.x, y0 - 14 * u], [x0 + w + 4 * u, y0 + 1 * u]];
+    print(c, roof, col);
+    // the door: shut with its number painted on, or open on a warm room
+    const dw = w * 0.5, dh = h * 0.74, dx = q.x - dw / 2, dy = q.y - dh, door = [[dx, q.y], [dx, dy], [dx + dw, dy], [dx + dw, q.y]];
+    const lit = mix(P.beam, hex('#FFB84A'), 0.3);
+    let num = [q.x, dy + dh * 0.45, 1];
+    if (on) {
+      poly(c, door); c.fillStyle = rgba(lit); c.fill();
+      const leaf = [[dx + dw, q.y], [dx + dw, dy], [dx + dw * 1.55, dy + 2.5 * u], [dx + dw * 1.55, q.y - 1.2 * u]];
+      print(c, leaf, mix(col, hex('#000000'), 0.12));
+      c.beginPath(); edges(c, leaf, TEX * 1.2, i + 3, true, { ov: 0.4 }); c.fillStyle = INK; c.fill();
+      num = [dx + dw * 1.29, dy + dh * 0.45, 0.85];
+    } else {
+      print(c, door, mix(col, hex('#000000'), 0.12));
+    }
+    // the round window in the gable
+    dot(c, q.x + REGX, y0 - 5 * u + REGY, 3.4 * u, on ? lit : mix(P.sky, P.ink, 0.25 + 0.35 * smooth(0.4, 0.8, s.d)));
+    c.beginPath();
+    edges(c, roof, DET, i * 7, true, { ov: 1 }); edges(c, body, DET, i * 7 + 2, false, { ov: 0.8 });
+    edges(c, door, TEX * 1.2, i * 7 + 4, false, { ov: 0.4 });
+    ribbon(c, ellipse(q.x, y0 - 5 * u, 3.4 * u, 3.4 * u, 12), TEX, i, { tin: 1, tout: 1, w0: 1, w1: 1 });
+    c.fillStyle = INK; c.fill();
+    label(c, String(i + 1), num[0] + 0.5 * u, num[1], 11 * u * num[2] + 2, rgba(white), 'center', 0);
+  });
+}
+
+/* themes: the washing line, with the other pyjamas drying */
+function drawWashing(s, c, p) {
+  const g = s.g, u = g.u, P = s.P, T = g.lh, sc = pop(p);
+  if (sc < 0.05) return;
+  const px = g.portrait ? g.W * 0.4 : g.W * 0.615, pry = s.ridgeY(px) ?? T.base;
+  const ph = (g.portrait ? 48 : 92) * u * sc, top = [px, pry - ph], end = [T.x - lerp(T.wB, T.wT, 0.3) / 2, T.base - T.h * 0.3];
+  c.beginPath();
+  ribbon(c, dens([[px, pry + 3 * u], top], 5), DET * 1.1, 1, { tin: 2, tout: 2 });
+  ribbon(c, [[px - 6 * u, top[1] + 4 * u], [px, top[1] - 1 * u], [px + 6 * u, top[1] + 4 * u]], TEX, 2, { tin: 1, tout: 1 });
+  const sag = 16 * u, line = [];
+  for (let i = 0; i <= 20; i++) { const f = i / 20; line.push([lerp(top[0], end[0], f), lerp(top[1], end[1], f) + Math.sin(f * Math.PI) * sag]); }
+  ribbon(c, line, TEX, 3, { tin: 2, tout: 2 });
+  c.fillStyle = INK; c.fill();
+  const others = Object.keys(THEMES).filter(k => k !== s.theme);
+  const wind = s.reduced ? 0.1 : s.windTotal;
+  others.forEach((id, i) => {
+    const f = (i + 0.7) / (others.length + 0.4), ax = lerp(top[0], end[0], f), ay = lerp(top[1], end[1], f) + Math.sin(f * Math.PI) * sag;
+    const k = sc * (g.portrait ? 1 : 1.45), w = 13 * u * k, h = 14 * u * k, sw = (s.reduced ? 0 : Math.sin(s.t * 2.2 + i) * 0.08) + wind * 0.12;
+    c.save(); c.translate(ax, ay); c.rotate(sw);
+    const shirt = [[-w / 2, 0], [-w * 0.85, h * 0.25], [-w * 0.62, h * 0.4], [-w * 0.42, h * 0.3], [-w * 0.42, h], [w * 0.42, h], [w * 0.42, h * 0.3], [w * 0.62, h * 0.4], [w * 0.85, h * 0.25], [w / 2, 0]];
+    print(c, shirt, mul(hex('#FFFFFF'), P.paper));
+    c.save(); poly(c, shirt, true, REGX, REGY); c.clip();
+    const st = THEMES[id].stripes;
+    for (let j = 0; j < 3; j++) { c.fillStyle = rgba(mul(hex(st[j % st.length]), P.paper)); c.fillRect(-w + REGX, h * (0.18 + j * 0.3) + REGY, w * 2, h * 0.15); }
+    c.restore();
+    c.beginPath(); edges(c, shirt, TEX, i * 3, true, { ov: 0.3 });
+    ribbon(c, [[-w * 0.2, -2 * u], [-w * 0.2, 3 * u]], DET, i, { tin: 1, tout: 1, w0: 1, w1: 1 }); ribbon(c, [[w * 0.2, -2 * u], [w * 0.2, 3 * u]], DET, i + 1, { tin: 1, tout: 1, w0: 1, w1: 1 });
+    c.fillStyle = INK; c.fill();
+    c.restore();
+  });
+}
+
+/* ---------- the hero's labels, each with a hand-drawn arrow ---------- */
+function arrow(c, pts, w, sd) {
+  const p = curve(pts, 4), n = p.length, [x1, y1] = p[n - 1], [x0, y0] = p[Math.max(0, n - 4)], a = Math.atan2(y1 - y0, x1 - x0), h = 8 * PW;
+  c.beginPath();
+  ribbon(c, p, w, sd, { tin: 4, tout: 2, w0: 0.5, w1: 0.7 });
+  ribbon(c, [[x1 + Math.cos(a + 2.6) * h, y1 + Math.sin(a + 2.6) * h], [x1, y1], [x1 + Math.cos(a - 2.5) * h, y1 + Math.sin(a - 2.5) * h]], w, sd + 1, { tin: 2, tout: 2, w0: 0.6, w1: 0.6 });
+  c.fill();
+}
+function drawLabels(s, c) {
+  const g = s.g, u = g.u, P = s.P, T = g.lh, night = smooth(0.5, 0.7, s.d);
+  const col = rgba(mix(P.ink, P.paper, night), s.pres.hero);
+  const size = Math.max(13, 17 * u);
+  c.fillStyle = col;
+  if (g.portrait) {
+    // the lighthouse, from the left of its lamp
+    const tx = T.x - T.wB * 1.9, ty = T.top + T.h * 0.3;
+    label(c, 'a lighthouse (stable)', tx, ty, size, col, 'right');
+    c.fillStyle = col; arrow(c, [[tx + 4, ty - 1], [tx + 14, ty - 5], [T.x - T.wB * 0.62, T.top + T.h * 0.2]], TEX * 1.1, 8);
+  } else {
+    const tipX = T.x - T.wB * 0.62, tipY = T.top + T.h * 0.6, ax = tipX - 88 * u, ay = tipY + 38 * u;
+    label(c, 'a lighthouse (stable)', ax, ay, size, col, 'right');
+    c.fillStyle = col; arrow(c, [[ax + 6 * u, ay - 3 * u], [ax + 42 * u, ay - 22 * u], [tipX - 6 * u, tipY]], TEX * 1.1, 8);
+  }
+  // the cloud with legs
+  const sc = g.sheepCloud, p = s.cloudXY(sc), w = sc.w;
+  const lx = p.x + w * 0.42 + (g.portrait ? 6 : 14 * u), ly = p.y + (g.portrait ? 12 : 22 * u);
+  c.font = `400 ${size}px ${HAND}`;
+  if (lx + 16 * u + c.measureText('a cloud (or a sheep)').width < (g.portrait ? g.lamp.x - T.er * 1.7 : T.x - T.er * 3)) {
+    label(c, 'a cloud (or a sheep)', lx + 16 * u, ly + 4 * u, size, col, 'left');
+    c.fillStyle = col; arrow(c, [[lx + 12 * u, ly + 3 * u], [lx, ly + 2 * u], [p.x + w * 0.36, p.y + 6 * u]], TEX * 1.1, 9);
+  }
+  // the sea
+  const sea = seaLabelSpot(s);
+  if (sea) {
+    const wTxt = c.measureText ? (c.font = `400 ${size}px ${HAND}`, c.measureText('the sea (wet)').width) : 100;
+    label(c, 'the sea (wet)', sea.x, sea.y, size, rgba(P.paper, s.pres.hero), 'left');
+    c.fillStyle = rgba(P.paper, s.pres.hero); arrow(c, [[sea.x + wTxt * 0.62, sea.y + 11 * u], [sea.x + wTxt * 0.5, sea.y + 22 * u], [sea.x + wTxt * 0.3, sea.y + 30 * u]], TEX * 1.1, 10);
+  }
+}
+function seaLabelSpot(s) {
+  const g = s.g, u = g.u, wTxt = 112 * u + 10;
+  if (g.portrait) { const y = g.horizon + (g.H - g.horizon) * 0.55; return { x: g.W * 0.3, y }; }
+  // in the sea, right of the notes or below them, clear of the key
+  for (const fy of [0.07, 0.14, 0.3, 0.55, 0.7, 0.85]) {
+    const y = g.horizon + (g.H - g.horizon) * fy, right = s.hillLeftX(y + 26 * u) - 10 * u;
+    let x0 = 30 * u + 22 * u;
+    if (y < g.note.y1) x0 = Math.max(x0, g.note.x1 + 16 * u);
+    if (g.key && y + 30 * u > g.key.y0) x0 = Math.max(x0, g.key.x1 + 24 * u);
+    if (right - x0 > wTxt) return { x: x0 + Math.min(20 * u, (right - x0 - wTxt) * 0.4), y: y + 8 * u };
+  }
+  return null;
+}
+
+/* ---------- surprises ---------- */
+function drawObj(s, c, o) {
+  const g = s.g, P = s.P, k = g.u * o.sc, lit = o.lit * s.beamI(), sq = s.squash(o), t = s.reduced ? 0 : s.t;
+  if (o.dying != null) c.globalAlpha = clamp(1 - (s.t - o.dying) / 0.7);
+  c.save(); c.translate(o.x, o.y);
+  if (lit > 0.15) {
+    // a startled "!", in the pen
+    const jy = -40 * k - Math.abs(Math.sin(t * 8)) * 3 * k;
+    c.globalAlpha *= clamp(lit * 1.6);
+    c.beginPath(); ribbon(c, [[2.6 * k, jy - 15 * k], [2 * k, jy - 6 * k], [1.6 * k, jy - 1 * k]], DET * 1.35, o.seed, { tin: 1, tout: 4, w0: 1, w1: 0.3 }); c.fillStyle = INK; c.fill();
+    dot(c, 1.3 * k, jy + 4 * k, 1.7 * PW, INK);
+    c.globalAlpha = o.dying != null ? clamp(1 - (s.t - o.dying) / 0.7) : 1;
+  }
+  c.scale((o.flip ? -1 : 1) * (1 + sq * 0.6), 1 - sq);
+  const tint = base => mix(mul(base, P.paper), P.beam, clamp(lit) * 0.75);
+  switch (o.kind) {
+    case 'sheep': drawSheep(c, k, tint(C.wool), o, t); break;
+    case 'cow': drawCow(c, k, tint(hex('#FFFFFF')), P, o, t); break;
+    case 'gull': drawGull(c, k, tint(hex('#FFFFFF')), o, t); break;
+    case 'duck': drawDuck(c, k, tint(C.duck), P, o, t); break;
+    case 'monster': drawMonster(c, k, tint(C.monster), P, o, t); break;
+  }
+  c.restore();
+  c.globalAlpha = 1;
+}
+function drawSheep(c, u, wool, o, t) {
+  const fall = o.state === 'fall', step = Math.abs(o.vx) > 2 ? Math.sin(t * 14 + o.seed) * 2 * u : 0;
+  c.beginPath();
+  [-8, -3, 5, 10].forEach((lx, i) => ribbon(c, [[lx * u, -10 * u], [lx * u + (fall ? 3 * u : (i % 2 ? step : -step)), 0]], DET * 1.05, i, { tin: 1, tout: 1, w0: 0.9, w1: 1 }));
+  c.fillStyle = INK; c.fill();
+  const body = [];
+  for (let i = 0; i < 40; i++) { const a = i / 40 * TAU, r = 1 + 0.13 * Math.abs(Math.sin(a * 5 + o.seed)); body.push([Math.cos(a) * 14 * u * r, -16 * u + Math.sin(a) * 9.5 * u * r]); }
+  shape(c, body, wool, DET, o.seed % 7);
+  // tail puff, black face, an ear, an eye
+  const head = ellipse(15 * u, -19 * u, 5 * u, 6.4 * u, 18, 0, TAU, -0.35);
+  poly(c, head); c.fillStyle = INK; c.fill();
+  const ear = ellipse(11.5 * u, -23.5 * u, 3.6 * u, 1.6 * u, 10, 0, TAU, 0.5);
+  poly(c, ear); c.fill();
+  const tuft = []; for (let i = 0; i < 10; i++) { const a = Math.PI * 1.05 + i / 9 * Math.PI * 0.9; tuft.push([13.5 * u + Math.cos(a) * 5 * u, -24 * u + Math.sin(a) * 2.6 * u]); }
+  c.beginPath(); ribbon(c, tuft, TEX, 3, { tin: 1, tout: 1, color: rgba(wool) }); c.fillStyle = rgba(wool); c.fill();
+  dot(c, 16.6 * u, -20.5 * u, 1.5 * u, '#FFFFFF'); dot(c, 17.1 * u, -20.3 * u, 0.75 * u, INK);
+}
+function drawCow(c, u, white, P, o, t) {
+  const step = Math.abs(o.vx) > 2 ? Math.sin(t * 9 + o.seed) * 2 * u : 0;
+  c.beginPath();
+  [-12, -7, 8, 13].forEach((lx, i) => ribbon(c, [[lx * u, -11 * u], [lx * u + (i % 2 ? step : -step), 0]], DET * 1.15, i, { tin: 1, tout: 1, w0: 0.9, w1: 1 }));
+  ribbon(c, [[-17 * u, -20 * u], [-21 * u, -14 * u], [-20 * u, -7 * u]], TEX, 5, { tin: 1, tout: 1 });
+  c.fillStyle = INK; c.fill();
+  dot(c, -20 * u, -6 * u, 2 * u, INK);
+  const body = curve([[-17 * u, -22 * u], [-6 * u, -26.5 * u], [10 * u, -25.5 * u], [17 * u, -20 * u], [15 * u, -11 * u], [0, -10 * u], [-16 * u, -11 * u], [-18.5 * u, -16 * u]], 3, true);
+  print(c, body, white);
+  // patches, inside the body
+  c.save(); poly(c, body, true, REGX, REGY); c.clip();
+  const R = rng(o.seed + 3);
+  for (let i = 0; i < 3; i++) { const px = (-11 + i * 9 + R() * 4) * u, py = (-21 + R() * 8) * u; poly(c, ellipse(px, py, (3.5 + R() * 3) * u, (2.6 + R() * 2) * u, 12, 0, TAU, R())); c.fillStyle = INK; c.fill(); }
+  c.restore();
+  c.beginPath(); loop(c, body, DET, 3); c.fillStyle = INK; c.fill();
+  // head, muzzle, horns, an ear
+  const head = curve([[15 * u, -29 * u], [21 * u, -31 * u], [24.5 * u, -26 * u], [24.5 * u, -20 * u], [18 * u, -19.5 * u], [15 * u, -24 * u]], 2, true);
+  shape(c, head, white, DET, 4);
+  const muzzle = ellipse(23 * u, -21 * u, 4 * u, 3 * u, 14);
+  shape(c, muzzle, mul(C.pink, P.paper), TEX * 1.2, 2);
+  dot(c, 22 * u, -21 * u, 0.7 * u, INK); dot(c, 24.6 * u, -21.2 * u, 0.7 * u, INK);
+  dot(c, 20.2 * u, -26.6 * u, 1.05 * u, INK);
+  c.beginPath();
+  ribbon(c, [[16.5 * u, -29.5 * u], [15 * u, -33.5 * u], [16.5 * u, -36 * u]], TEX * 1.3, 1, { tin: 1, tout: 2 });
+  ribbon(c, [[21 * u, -31 * u], [22.5 * u, -34.5 * u], [21.5 * u, -37 * u]], TEX * 1.3, 2, { tin: 1, tout: 2 });
+  c.fillStyle = INK; c.fill();
+  poly(c, ellipse(13.6 * u, -27.5 * u, 3 * u, 1.5 * u, 10, 0, TAU, 0.4)); c.fillStyle = INK; c.fill();
+}
+function drawGull(c, u, white, o, t) {
+  const fl = o.state === 'hover' ? 2 * u : Math.sin(t * 9 + o.seed) * 6 * u;
+  c.beginPath();
+  ribbon(c, curve([[-1 * u, -4 * u], [-8 * u, -11 * u - fl * 0.4], [-14 * u, -10 * u - fl], [-20 * u, -6 * u - fl]], 2), DET * 1.15, 3, { tin: 2, tout: 6, w0: 1, w1: 0.2 });
+  ribbon(c, curve([[2 * u, -4 * u], [8 * u, -11 * u - fl * 0.4], [14 * u, -10 * u - fl], [20 * u, -6 * u - fl]], 2), DET * 1.15, 4, { tin: 2, tout: 6, w0: 1, w1: 0.2 });
+  c.fillStyle = INK; c.fill();
+  shape(c, ellipse(0, -2.5 * u, 7.5 * u, 3.6 * u, 18), white, DET * 0.9, 1);
+  dot(c, 5 * u, -4 * u, 3 * u + REGX * 0.2, white);
+  poly(c, [[7 * u, -4 * u], [12 * u, -3 * u], [7 * u, -1.8 * u]]); c.fillStyle = rgba(C.beak); c.fill();
+  dot(c, 5.6 * u, -4.6 * u, 0.8 * u, INK);
+}
+function drawDuck(c, u, yellow, P, o, t) {
+  const body = curve([[-12 * u, -8 * u], [-14 * u, -13 * u], [-8 * u, -10 * u], [2 * u, -10.5 * u], [10 * u, -8 * u], [11 * u, -3 * u], [4 * u, -0.5 * u], [-8 * u, -0.5 * u]], 2, true);
+  shape(c, body, yellow, DET, 1);
+  const head = ellipse(6.5 * u, -15 * u, 6 * u, 5.6 * u, 22);
+  shape(c, head, yellow, DET, 2);
+  const beak = [[11.5 * u, -15.5 * u], [17.5 * u, -14 * u], [16 * u, -12 * u], [11.5 * u, -12.2 * u]];
+  print(c, beak, C.beak);
+  c.beginPath(); loop(c, dens(beak, 2, true), TEX * 1.2, 5); ribbon(c, ellipse(-1 * u, -6 * u, 6 * u, 3 * u, 10, 0.2, 2.2), TEX, 6, { tin: 1, tout: 2 }); c.fillStyle = INK; c.fill();
+  dot(c, 8 * u, -16.5 * u, 1.35 * u, INK); dot(c, 7.6 * u, -17 * u, 0.45 * u, '#FFFFFF');
+  // a little water at the waterline
+  c.beginPath(); ribbon(c, [[-13 * u, 0.5 * u], [-4 * u, -1.2 * u], [5 * u, 0.6 * u], [13 * u, -0.6 * u]], TEX, 7, { tin: 2, tout: 2 }); c.fillStyle = rgba(P.foam); c.fill();
+}
+function drawMonster(c, u, pink, P, o, t) {
+  const sw = Math.sin(t * 1.6 + o.seed);
+  for (let i = 0; i < 3; i++) {
+    const hx = (-30 + i * 19) * u, hh = (8 + 2.5 * Math.sin(t * 2 + i * 1.3)) * u * (0.85 + 0.15 * sw);
+    const hump = ellipse(hx, 1 * u, 8.5 * u, hh, 14, Math.PI, TAU);
+    print(c, [...hump, [hx + 8.5 * u, 1 * u]], pink);
+    c.beginPath(); ribbon(c, hump, DET, i, { tin: 2, tout: 2 }); c.fillStyle = INK; c.fill();
+    c.beginPath(); ribbon(c, [[hx - 11 * u, 1.5 * u], [hx, 0], [hx + 11 * u, 1.5 * u]], TEX, i + 4, { tin: 2, tout: 2 }); c.fillStyle = rgba(P.foam); c.fill();
+  }
+  const neck = curve([[20 * u, 1 * u], [22 * u, -10 * u], [27 * u, -20 * u], [34 * u, -25 * u], [42 * u, -26 * u], [48 * u, -21 * u], [46 * u, -16 * u], [38 * u, -16 * u], [33 * u, -11 * u], [31 * u, 1 * u]], 2);
+  print(c, neck, pink);
+  c.beginPath(); ribbon(c, neck, DET, 7, { tin: 2, tout: 2 }); c.fillStyle = INK; c.fill();
+  c.beginPath(); ribbon(c, [[16 * u, 1.5 * u], [26 * u, 0], [36 * u, 1.5 * u]], TEX, 8, { tin: 2, tout: 2 }); c.fillStyle = rgba(P.foam); c.fill();
+  dot(c, 41 * u, -21.5 * u, 2.6 * u, '#FFFFFF');
+  c.beginPath(); ribbon(c, ellipse(41 * u, -21.5 * u, 2.6 * u, 2.6 * u, 10), TEX, 9, { tin: 1, tout: 1, w0: 1, w1: 1 }); c.fillStyle = INK; c.fill();
+  dot(c, 41.8 * u, -21.3 * u, 1.1 * u, INK);
+  c.beginPath(); ribbon(c, [[45 * u, -18 * u], [47 * u, -17.6 * u]], TEX, 10, { tin: 1, tout: 1 }); c.fill();
+  // its little top hat, with a red band
+  const hat = [[36 * u, -25.5 * u], [37 * u, -35 * u], [45 * u, -35.5 * u], [45.5 * u, -26 * u]];
+  poly(c, hat); c.fillStyle = INK; c.fill();
+  c.fillStyle = rgba(mul(C.chimney, P.paper)); c.fillRect(36.6 * u, -29.5 * u, 8.6 * u, 2 * u);
+  c.beginPath(); ribbon(c, [[33 * u, -25.8 * u], [49 * u, -26.4 * u]], DET * 1.2, 2, { tin: 1, tout: 1, w0: 1, w1: 1 }); c.fillStyle = INK; c.fill();
+}
+
+window.Hill = { Scene, themes: Object.keys(THEMES), states: STATES };
+})();
diff --git a/site/style.css b/site/style.css
index df47a672..5e780b98 100644
--- a/site/style.css
+++ b/site/style.css
@@ -1,7 +1,16 @@
+/* stablebar.app: Lighthouse Hill in absurd ink. Paper notes taped over a felt-pen drawing
+   (scene.js), with the real bar running along the top. */
+
+@font-face {
+  font-family: "Shantell Sans";
+  src: url(fonts/shantell-sans-display.woff2) format("woff2");
+  font-weight: 800;
+  font-display: swap;
+}
 @font-face {
-  font-family: "Host Grotesk";
-  src: url(fonts/host-grotesk.woff2) format("woff2");
-  font-weight: 300 800;
+  font-family: "Shantell Sans Hand";
+  src: url(fonts/shantell-sans-hand.woff2) format("woff2");
+  font-weight: 600;
   font-display: swap;
 }
 @font-face {
@@ -10,151 +19,101 @@
   font-weight: 200 800;
   font-display: swap;
 }
+/* Fallbacks scaled to take the same room as the web fonts, so the swap doesn't move the page */
+@font-face { font-family: "Shantell Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 800; size-adjust: 117%; ascent-override: 87.2%; descent-override: 27.3%; line-gap-override: 0%; }
+@font-face { font-family: "Hand Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 112%; ascent-override: 91%; descent-override: 28.6%; line-gap-override: 0%; }
+@font-face { font-family: "Atkinson Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 549; size-adjust: 98.6%; ascent-override: 99.8%; descent-override: 32%; line-gap-override: 0%; }
+@font-face { font-family: "Atkinson Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 900; size-adjust: 98.6%; ascent-override: 99.8%; descent-override: 32%; line-gap-override: 0%; }
 
 :root {
-  color-scheme: dark;
-  --ground: #15110d;
-  --text: #efe6da;
-  --text-2: #b8ac9d;
-  --text-3: #a09484;
-  --line: #efe6da2e;
-  --line-2: #efe6da66;
-  --backdrop: url(images/setup-amber-light.webp);
-  --backdrop-2: url(images/setup-amber-dark.webp);
-  --dim: linear-gradient(color-mix(in srgb, var(--ground) 40%, transparent) 0 0);
-  --win-bg: #1e1d1c;
-  --win-fg: #f5f5f7;
-  --win-ring: #000;
-  --win-edge: #ffffff17;
-  --card-bg: #2a2928;
-  --card-edge: #ffffff12;
-  --card-hover: #ffffff40;
-  --sys-blue: #0a84ff;
-  --shadow-1: #000;
-  --shadow-2: #000c;
-  --code-bg: #100e0c;
-  --code-fg: #d9cfc2;
-  --code-dim: #a09484;
+  color-scheme: light;
+  /* the page: white paper notes at every hour, a felt pen, yellow tape */
+  --paper: #ffffff;
+  --text: #141414;
+  --text-2: #3b3b3b;
+  --pen: #111111;
+  --tape: #ffe04ab8;
+  --hi: #ffe04a;
+  --red: #d03a28;
+  --link: #2e58d8;
+  --ring: #2e58d8;
+  --sky: #86cbf2;
+  --sea: #2e58d8;
+  --screen: #86cbf2;
+  --strip: #ffffff;
+  /* the bar keeps the site's amber Download */
   --amber: #f5821f;
   --amber-ink: #1b1007;
-  --ring: #f5821f;
-  --ease: cubic-bezier(.22, 1, .36, 1);
-  --gutter: 20px;
-  --bar-h: 40px;
-  --desk-r: 0px;
-  --display: "Host Grotesk", "Helvetica Neue", sans-serif;
-  --body: "Atkinson Hyperlegible Next", "Helvetica Neue", sans-serif;
-  --mac: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
-  --mono: ui-monospace, "SF Mono", Menlo, monospace;
-}
-:root[data-mode="light"] {
-  color-scheme: light;
-  --ground: #f5f0e8;
-  --text: #1d1813;
-  --text-2: #4f463d;
-  --text-3: #60564b;
-  --line: #1d181329;
-  --line-2: #1d18137a;
+  /* the app's windows: Add here, the right-click menu, the Store */
   --win-bg: #f4f2ef;
   --win-fg: #1d1d1f;
   --win-ring: #00000026;
   --win-edge: #ffffff99;
-  --card-bg: #ffffff;
-  --card-edge: #0000001a;
-  --card-hover: #00000033;
   --sys-blue: #0068da;
-  --shadow-1: #4a2d1240;
-  --shadow-2: #4a2d1229;
-  --code-bg: #fffaf2;
-  --code-fg: #3b3229;
-  --code-dim: #6f6559;
-  --ring: #a3470a;
+  --blue-fill: #0068da;
+  --shadow-1: #1b2a5240;
+  --shadow-2: #1b2a5233;
+  --ease: cubic-bezier(.22, 1, .36, 1);
+  --bar-h: 40px;
+  --display: "Shantell Sans", "Shantell Fallback", "Chalkboard SE", sans-serif;
+  --hand: "Shantell Sans Hand", "Hand Fallback", "Chalkboard SE", sans-serif;
+  --body: "Atkinson Hyperlegible Next", "Atkinson Fallback", "Helvetica Neue", sans-serif;
+  --mac: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
+  --mono: ui-monospace, "SF Mono", Menlo, monospace;
+  /* felt-pen pieces: the washing line, a rule, and the highlighter */
+  --string: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 104%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 9 L10 9.9 L20 9.3 L30 9.6 L40 10.8 L50 10.5 L60 10.2 L70 11.4 L80 11.5 L90 10.9 L100 11.7 L110 12.3 L120 11.5 L130 11.8 L140 12.8 L150 12.1 L160 11.9 L170 12.9 L180 12.7 L190 11.9 L200 12.7 L210 13 L220 12 L230 12.3 L240 13 L250 12.1 L260 11.7 L270 12.6 L280 12.1 L290 11.2 L300 11.9 L310 11.9 L320 10.7 L330 10.9 L340 11.4 L350 10.2 L360 9.9 L370 10.5 L380 9.7 L390 8.8 L400 9.3%27 fill=%27none%27 stroke=%27%23111%27 stroke-width=%272%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
+  --rule: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%2710%27%3E%3Cpath d=%27M0 5 L2.5 5.7 L5 5.9 L7.5 5.9 L10 6 L12.5 6 L15 5.9 L17.5 5.9 L20 5.8 L22.5 5.7 L25 5.6 L27.5 5.6 L30 5.6 L32.5 5.6 L35 5.7 L37.5 5.8 L40 6 L42.5 6.1 L45 6.3 L47.5 6.4 L50 6.5 L52.5 6.6 L55 6.6 L57.5 6.6 L60 6.5 L62.5 6.3 L65 6.1 L67.5 5.9 L70 5.6 L72.5 5.3 L75 5 L77.5 4.7 L80 4.5 L82.5 4.3 L85 4.1 L87.5 4.1 L90 4 L92.5 4 L95 4.1 L97.5 4.1 L100 4.2 L102.5 4.3 L105 4.4 L107.5 4.4 L110 4.4 L112.5 4.4 L115 4.3 L117.5 4.2 L120 4 L122.5 3.9 L125 3.7 L127.5 3.6 L130 3.5 L132.5 3.4 L135 3.4 L137.5 3.4 L140 3.5 L142.5 3.7 L145 3.9 L147.5 4.1 L150 4.4 L152.5 4.7 L155 5 L157.5 5.3 L160 5.5%27 fill=%27none%27 stroke=%27%23111%27 stroke-width=%272.4%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
+  --rule-night: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%2710%27%3E%3Cpath d=%27M0 5 L2.5 5.7 L5 5.9 L7.5 5.9 L10 6 L12.5 6 L15 5.9 L17.5 5.9 L20 5.8 L22.5 5.7 L25 5.6 L27.5 5.6 L30 5.6 L32.5 5.6 L35 5.7 L37.5 5.8 L40 6 L42.5 6.1 L45 6.3 L47.5 6.4 L50 6.5 L52.5 6.6 L55 6.6 L57.5 6.6 L60 6.5 L62.5 6.3 L65 6.1 L67.5 5.9 L70 5.6 L72.5 5.3 L75 5 L77.5 4.7 L80 4.5 L82.5 4.3 L85 4.1 L87.5 4.1 L90 4 L92.5 4 L95 4.1 L97.5 4.1 L100 4.2 L102.5 4.3 L105 4.4 L107.5 4.4 L110 4.4 L112.5 4.4 L115 4.3 L117.5 4.2 L120 4 L122.5 3.9 L125 3.7 L127.5 3.6 L130 3.5 L132.5 3.4 L135 3.4 L137.5 3.4 L140 3.5 L142.5 3.7 L145 3.9 L147.5 4.1 L150 4.4 L152.5 4.7 L155 5 L157.5 5.3 L160 5.5%27 fill=%27none%27 stroke=%27%23f2eeff%27 stroke-width=%272.4%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
+  --highlight: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 20%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M2 4.5 9 2.6 50 2 92 1.6 98 3.4 96.4 7 99 10.6 97.6 15.2 99.2 18.4 60 18.6 8 19 1 17.4 3 13.2 .8 9.4Z%27 fill=%27%23ffe04a%27/%3E%3C/svg%3E");
+}
+:root[data-mode="dark"] {
+  --sky: #232662;
+  --sea: #14184a;
+  --screen: #2f3374;
+  --strip: #1c1e4e;
+  --win-bg: #1e1d1c;
+  --win-fg: #f5f5f7;
+  --win-ring: #000;
+  --win-edge: #ffffff17;
+  --sys-blue: #0a84ff;
+  --shadow-1: #000;
+  --shadow-2: #000c;
 }
 * { box-sizing: border-box; margin: 0; padding: 0; }
 html {
-  background: var(--ground); color: var(--text);
+  background: var(--sky); color: var(--text);
   -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
+  scroll-padding-top: calc(var(--bar-h) + 24px);
 }
-body { font: 400 16px/1.55 var(--body); overflow-x: hidden; }
-a { color: inherit; text-decoration: none; }
+body { font: 400 18px/1.55 var(--body); overflow-x: hidden; touch-action: pan-y pinch-zoom; }
+a { color: inherit; }
 button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
-:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
-:where(.brand, .nav a, .more-link, footer a, .skip):focus-visible { border-radius: 4px; }
-::selection { background: color-mix(in srgb, var(--amber) 40%, transparent); }
+:focus-visible { outline: 2.5px solid var(--ring); outline-offset: 3px; border-radius: 4px; }
+::selection { background: var(--hi); color: #111; }
+p { text-wrap: pretty; }
+h1, h2, h3 { text-wrap: balance; }
+.num { font-variant-numeric: tabular-nums; }
+.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .skip {
-  position: absolute; top: 10px; left: var(--gutter); z-index: 100; padding: 10px 14px; border-radius: 8px;
-  background: var(--text); color: var(--ground); font: 600 14px/1 var(--display);
-  translate: 0 calc(-100% - 20px);
+  position: fixed; top: 8px; left: 10px; z-index: 100; padding: 10px 14px; border-radius: 10px;
+  background: var(--paper); color: var(--text); box-shadow: 0 0 0 2.4px var(--pen);
+  font: 600 16px/1 var(--hand); text-decoration: none; translate: 0 calc(-100% - 20px);
 }
 .skip:focus-visible { translate: none; }
-.page { max-width: calc(1800px + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
-.num { font-variant-numeric: tabular-nums; }
-.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
-p { text-wrap: pretty; }
-h1, h2 { text-wrap: balance; }
-
-/* ---------- Top ---------- */
-.top { display: flex; align-items: center; justify-content: space-between; height: 60px; }
-.brand { display: flex; align-items: center; gap: 10px; font: 600 16px/1 var(--display); letter-spacing: -.01em; }
-.brand img { width: 26px; height: 26px; }
-.nav { display: flex; gap: 18px; font-size: 14px; color: var(--text-2); }
-.nav a { padding: 10px 0; }
-.nav a:hover { color: var(--text); }
-.nav .gh { display: none; }
-.nav { align-items: center; }
-.mode { display: grid; place-items: center; width: 36px; height: 36px; margin: -8px -10px -8px -4px; border-radius: 50%; color: var(--text-2); }
-.mode:hover { color: var(--text); background: var(--line); }
-.mode svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
-.mode .sun, [data-mode="light"] .mode .moon { display: none; }
-[data-mode="light"] .mode .sun { display: block; }
-
-/* ---------- Hero ---------- */
-.hero { padding: 36px 0 34px; }
-h1 {
-  font: 600 clamp(38px, 10.4vw, 62px)/1.02 var(--display); letter-spacing: -.035em;
-  max-width: 12ch;
-}
-h1 .wide { display: none; }
-.lede { margin-top: 18px; font-size: 18px; line-height: 1.5; color: var(--text-2); max-width: 36ch; }
-.get { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
-.cta {
-  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 16px;
-  background: var(--amber); color: var(--amber-ink); border-radius: 9px;
-  font: 600 15.5px/1 var(--display); letter-spacing: -.005em;
-  transition: background .15s;
-}
-.cta:hover { background: #ff9233; }
-.cta svg { width: 15px; height: 18px; fill: currentColor; }
-.cta .ver { margin-left: -2px; font-weight: 500; font-variant-numeric: tabular-nums; opacity: .75; }
-.req { font-size: 13.5px; line-height: 1.45; color: var(--text-3); }
-.brew { margin-top: 14px; }
-.req code { font: 400 .92em/1 var(--mono); color: var(--text); white-space: nowrap; }
-
-/* ---------- The desk: the product, at real scale ---------- */
-.desk {
-  position: relative; margin: 34px calc(var(--gutter) * -1) 0; height: 260px;
-  isolation: isolate; z-index: 10;
-}
-.wall {
-  position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: var(--desk-r); background: #f08a24;
-  -webkit-mask-image: radial-gradient(64% 84% at 78% 0%, #0000009e 0%, #00000075 40%, #0000001f 74%, transparent 100%), linear-gradient(#000 55%, transparent);
-  -webkit-mask-composite: source-in;
-  mask-image: radial-gradient(64% 84% at 78% 0%, #0000009e 0%, #00000075 40%, #0000001f 74%, transparent 100%), linear-gradient(#000 55%, transparent);
-  mask-composite: intersect;
-}
-.wall::before, .wall::after { content: ""; position: absolute; inset: -60% -10%; background: var(--backdrop) center / cover; scale: 1.4; }
-.wall::after { background-image: var(--backdrop-2); opacity: .5; }
-@media (prefers-reduced-motion: no-preference) {
-  .wall::before { animation: grow 44s ease-in-out infinite alternate, turn 69s ease-in-out infinite alternate, wander 57s ease-in-out infinite alternate; }
-  .wall::after { animation: grow 44s ease-in-out -22s infinite alternate, turn 69s ease-in-out -35s infinite alternate, wander 57s ease-in-out -28s infinite alternate, fade 25s ease-in-out infinite alternate; }
+
+/* The drawing lives behind the page. Until it paints, or without it, the page sits on its sky. */
+.scene {
+  position: fixed; left: 0; top: 0; z-index: 0; width: 100%; height: 100vh; height: 100lvh;
+  background: linear-gradient(var(--sky) 0 61%, var(--sea) 61%);
 }
-@keyframes grow { from { scale: 1.32; } to { scale: 1.48; } }
-@keyframes turn { from { rotate: -12deg; } to { rotate: 12deg; } }
-@keyframes wander { from { translate: -6% -6%; } to { translate: 6% 6%; } }
-@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
+.scene canvas { display: block; }
+main, .site-foot { position: relative; z-index: 1; }
+main { overflow-x: clip; }
+
+/* ---------- The bar, drawn as the app draws it ---------- */
 
 /* Theme tokens, from each theme's config.json in Resources/themes */
-[data-theme] { --strip-bg: transparent; --strip-edge: none; --strip-radius: 0px; --strip-m: 0px; --w-bg: #242629ee; --w-border: #ffffff1f; --w-shadow: #00000040; --w-glow: none; --w-radius: 14px; --tile-h: 28px; --fg: #f5f5f7; --muted: #a1a1a6; --accent: #0a84ff; --accent-text: #ffffff; --ws-off: #f5f5f7; --ws-ind: #0a84ff; --ws-on: #ffffff; --ws-r: 10px; --pop-bg: #242629ee; --pop-border: #ffffff1f; --pop-radius: 14px; --raised: #36383c; --track: #f5f5f726; --bar-font: 400 13px/1 var(--mac); --pop-font: 400 13px/16px var(--mac); }
+[data-theme] { --rest-h: 40px; --strip-bg: transparent; --strip-edge: none; --strip-radius: 0px; --strip-m: 0px; --w-bg: #242629ee; --w-border: #ffffff1f; --w-shadow: #00000040; --w-glow: none; --w-radius: 14px; --tile-h: 28px; --fg: #f5f5f7; --muted: #a1a1a6; --accent: #0a84ff; --accent-text: #ffffff; --ws-off: #f5f5f7; --ws-ind: #0a84ff; --ws-on: #ffffff; --ws-r: 10px; --pop-bg: #242629ee; --pop-border: #ffffff1f; --pop-radius: 14px; --raised: #36383c; --track: #f5f5f726; --bar-font: 400 13px/1 var(--mac); --pop-font: 400 13px/16px var(--mac); }
 [data-theme] { --tray-tint: color-mix(in srgb, var(--fg) 7%, transparent); --tray-line: color-mix(in srgb, var(--fg) 12%, transparent); --tray-backing: transparent; }
 [data-theme="built-in"] { --tray-backing: #2b2b2b; }
 [data-mode="light"] [data-theme="built-in"] { --tray-backing: #f7f7f7; }
@@ -165,42 +124,42 @@ h1 .wide { display: none; }
 [data-mode="light"] [data-theme="gruvbox"] { --strip-bg: linear-gradient(180deg, #fbf1c7ee 0%, #fbf1c7ee 79%, #cc241d 79%, #cc241d 86%, #d65d0e 86%, #d65d0e 93%, #d79921 93%, #d79921 100%); --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --fg: #3c3836; --muted: #7c6f64; --accent: #af3a03; --accent-text: #fbf1c7; --ws-off: #7c6f64; --ws-ind: transparent; --ws-on: #af3a03; --pop-bg: #fbf1c7ee; --pop-border: #3c38361f; --raised: #ebdbb2; --track: #d5c4a1; }
 [data-theme="leman"] { --strip-bg: #0f1d21ee; --strip-edge: inset 0 0 0 1px #dcebe81f; --strip-radius: 14px; --strip-m: 6px; --tile-h: 22px; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --w-radius: 10px; --fg: #dcebe8; --muted: #8fb0ad; --accent: #5cc5b8; --accent-text: #0f1d21; --ws-off: #8fb0ad; --ws-ind: #5cc5b829; --ws-on: #5cc5b8; --ws-r: 7px; --pop-bg: #0f1d21ee; --pop-border: #dcebe81f; --pop-radius: 10px; --raised: #1d3238; --track: #dcebe826; --bar-font: 400 13px/1 var(--mac); }
 [data-mode="light"] [data-theme="leman"] { --strip-bg: #edf3f2ee; --strip-edge: inset 0 0 0 1px #12343b1f; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --fg: #12343b; --muted: #4d6b70; --accent: #0e7c7b; --accent-text: #ffffff; --ws-off: #4d6b70; --ws-ind: #0e7c7b1f; --ws-on: #0e7c7b; --pop-bg: #edf3f2ee; --pop-border: #12343b1f; --track: #12343b26; }
-[data-theme="nord"] { --bar-h: 30px; --strip-bg: #2e3440ee; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --w-radius: 5px; --fg: #eceff4; --muted: #a3acbd; --accent: #88c0d0; --accent-text: #2e3440; --ws-off: #a3acbd; --ws-ind: #88c0d0; --ws-on: #eceff4; --ws-r: 1.5px; --pop-bg: #2e3440ee; --pop-border: #eceff41f; --pop-radius: 8px; --raised: #3b4252; --track: #4c566a; --bar-font: 500 12px/1 "Avenir Next", var(--mac); --pop-font: 500 12px/16px "Avenir Next", var(--mac); }
+[data-theme="nord"] { --rest-h: 30px; --bar-h: 30px; --strip-bg: #2e3440ee; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --w-radius: 5px; --fg: #eceff4; --muted: #a3acbd; --accent: #88c0d0; --accent-text: #2e3440; --ws-off: #a3acbd; --ws-ind: #88c0d0; --ws-on: #eceff4; --ws-r: 1.5px; --pop-bg: #2e3440ee; --pop-border: #eceff41f; --pop-radius: 8px; --raised: #3b4252; --track: #4c566a; --bar-font: 500 12px/1 "Avenir Next", var(--mac); --pop-font: 500 12px/16px "Avenir Next", var(--mac); }
 [data-mode="light"] [data-theme="nord"] { --strip-bg: #eceff4ee; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --fg: #2e3440; --muted: #4c566a; --accent: #5e81ac; --accent-text: #eceff4; --ws-off: #4c566a; --ws-ind: #5e81ac; --ws-on: #2e3440; --pop-bg: #eceff4ee; --pop-border: #2e34401f; --raised: #d8dee9; --track: #d8dee9; }
 [data-theme="notch"] { --strip-bg: #000000; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --w-radius: 6px; --muted: #8e8e93; --accent: #64d2ff; --accent-text: #000000; --ws-off: #8e8e93; --ws-ind: transparent; --ws-on: #f5f5f7; --ws-r: 0px; --pop-bg: #000000; --pop-border: #ffffff1a; --pop-radius: 6px; --raised: #1c1c1e; --track: #ffffff26; --bar-font: 500 13px/1 var(--mac); --pop-font: 500 13px/16px var(--mac); }
 [data-mode="light"] [data-theme="notch"] { --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --fg: #f5f5f7; --muted: #8e8e93; --accent: #64d2ff; --ws-off: #8e8e93; --ws-ind: transparent; --pop-bg: #000000; --pop-border: #ffffff1a; --raised: #1c1c1e; --track: #ffffff26; }
 [data-theme="phosphor"] { --tile-h: 27px; --strip-bg: #110d06ee; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --w-glow: drop-shadow(0 0 4px #ffb00080); --w-radius: 0px; --fg: #ffb000; --muted: #b8800c; --accent: #ffcc5c; --accent-text: #110d06; --ws-off: #b8800c; --ws-ind: #ffb000; --ws-on: #110d06; --ws-r: 0px; --pop-bg: #110d06ee; --pop-border: #ffb00059; --pop-radius: 0px; --raised: #2b2009; --track: #ffb00033; --bar-font: 400 12px/1 "Monaco", var(--mono); --pop-font: 400 12px/15px "Monaco", var(--mono); }
 [data-mode="light"] [data-theme="phosphor"] { --strip-bg: #f6f1e6ee; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --w-glow: none; --fg: #5c3a00; --muted: #87683b; --accent: #a86400; --accent-text: #f6f1e6; --ws-off: #87683b; --ws-ind: #5c3a00; --ws-on: #f6f1e6; --pop-bg: #f6f1e6ee; --pop-border: #5c3a0040; --raised: #ebe2cf; --track: #5c3a0026; }
 
-/* The dock holds the bar and its popups. It sits at the top of the desk,
-   stays at the top of the window once the desk reaches it, and becomes
-   the page's header once the desk has scrolled away. */
-.dock { position: absolute; top: 0; left: 0; right: 0; height: var(--bar-h); z-index: 30; }
-.dock.docked { position: fixed; z-index: 50; --desk-r: 0px; }
+/* The dock holds the bar and its popups at the top of the window, for the whole page.
+   Once the page scrolls, a strip of paper slides in behind it so text never runs under its widgets. */
+.dock { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--bar-h); }
+[data-mode="dark"] .dock { color-scheme: dark; --ring: #ffe04a; }
 .dock::before {
-  content: ""; position: absolute; inset: 0; z-index: -1;
-  background: var(--ground); box-shadow: 0 1px 0 var(--line);
-  opacity: 0; transition: opacity .3s;
+  content: ""; position: absolute; inset: 0 0 -7px; z-index: -1; pointer-events: none;
+  background: var(--rule) left bottom / 160px 10px repeat-x, linear-gradient(var(--strip) 0 0) top / 100% calc(100% - 5px) no-repeat;
+  opacity: 0; translate: 0 -6px; transition: opacity .25s, translate .3s var(--ease);
 }
-.dock.header::before { inset: 0 -100vw; opacity: 1; }
+[data-mode="dark"] .dock::before { background-image: var(--rule-night), linear-gradient(var(--strip) 0 0); }
+.dock.scrolled::before { opacity: 1; translate: none; }
 
 .bar {
   position: absolute; top: 0; left: 0; right: 0; height: calc(var(--bar-h) - 2 * var(--strip-m));
-  margin: 0 var(--strip-m); padding: 0 12px; margin-top: var(--strip-m);
+  margin: var(--strip-m) var(--strip-m) 0; padding: 0 12px;
   display: flex; align-items: center; justify-content: space-between; gap: 12px;
   color: var(--fg); font: var(--bar-font); -webkit-font-smoothing: auto;
-  background: var(--strip-bg); box-shadow: var(--strip-edge);
-  border-radius: max(var(--strip-radius), var(--desk-r)) max(var(--strip-radius), var(--desk-r)) var(--strip-radius) var(--strip-radius);
+  background: var(--strip-bg); box-shadow: var(--strip-edge); border-radius: var(--strip-radius);
   transition: background .25s, border-radius .25s, margin .25s var(--ease), height .25s var(--ease);
 }
 .bar .g { display: flex; align-items: center; gap: 6px; min-width: 0; }
 .w {
   flex: none; height: var(--tile-h); display: flex; align-items: center; gap: 7px; padding: 0 10px; white-space: nowrap;
   background: var(--w-bg); box-shadow: inset 0 0 0 1px var(--w-border), 0 1px 3px var(--w-shadow); border-radius: var(--w-radius);
-  filter: var(--w-glow); cursor: default; user-select: none; transition: background .15s, border-radius .25s;
+  filter: var(--w-glow); color: var(--fg); font: var(--bar-font); text-decoration: none; cursor: default; user-select: none;
+  transition: background .15s, border-radius .25s;
 }
-.w[data-pop], .w.app, .w.more { cursor: pointer; }
-.w[data-pop]:hover, .w.more:hover { background: var(--raised); }
+.w[data-pop], .w.app, .w.more, .w.moon { cursor: pointer; }
+.w[data-pop]:hover, .w.more:hover, .w.moon:hover { background: var(--raised); }
 .w.over, .w[hidden] { display: none !important; }
 .w svg { width: 15px; height: 15px; flex: none; }
 .w.apple { padding: 0 9px; font-size: 15px; }
@@ -220,6 +179,7 @@ h1 .wide { display: none; }
 .menus { display: grid; grid-template-columns: 0fr; transition: grid-template-columns .3s var(--ease); }
 .menus > span { overflow: hidden; display: flex; gap: 14px; }
 .menus > span > :first-child { margin-left: 6px; }
+.menus a { text-decoration: none; }
 .app.expand .menus { grid-template-columns: 1fr; }
 .w.more { padding: 0 9px; letter-spacing: .08em; }
 /* Sound: hovering it opens a volume slider before the icon, as on the right of the real bar */
@@ -233,6 +193,11 @@ h1 .wide { display: none; }
 .snd input::-webkit-slider-thumb { appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px #0000004d, 0 1px 2px #00000059; }
 .snd input::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px #0000004d, 0 1px 2px #00000059; }
 .snd .pct { min-width: 4ch; text-align: right; }
+/* The night switch: a script widget with an icon and an action, as the app can draw one */
+.w.moon { padding: 0 9px; }
+.w.moon svg { width: 16px; height: 16px; }
+.moon .on, .moon[aria-pressed="true"] .off { display: none; }
+.moon[aria-pressed="true"] .on { display: block; }
 
 /* Now playing: artwork, the track and an equalizer, as on the real bar */
 .art { width: 16px; height: 16px; flex: none; border-radius: 3px; background: linear-gradient(150deg, #241a5c 0%, #6b2a8c 42%, #e0566a 72%, #f6a04d 100%); }
@@ -287,20 +252,21 @@ h1 .wide { display: none; }
 .lane.fl { mask-image: linear-gradient(90deg, transparent, #000 18px); }
 .lane.fr { mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
 .lane.fl.fr { mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
-.tile { position: relative; flex: none; display: flex; isolation: isolate; border-radius: 5px; cursor: grab; touch-action: none; user-select: none; }
+.tile { position: relative; flex: none; display: flex; isolation: isolate; border-radius: 5px; user-select: none; }
+.lane .tile { cursor: grab; touch-action: none; }
 .tile::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 5px; background: var(--fg); opacity: 0; transition: opacity .1s; }
-.tile:hover::before { opacity: .08; }
+.lane .tile:hover::before { opacity: .08; }
 .tile:focus-visible { outline-offset: 2px; }
 .tile[hidden] { display: none; }
 .tile.lifted { opacity: 0; }
-.tile .w { cursor: grab; }
+.lane .tile .w { cursor: grab; }
 .minus { position: absolute; left: -5px; top: -5px; z-index: 2; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #6e6e73; transition: opacity .15s; }
 .minus::before { content: ""; width: 7px; height: 1.8px; border-radius: 1px; background: #fff; }
 .add { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; color: var(--fg); border: 1.5px dashed color-mix(in srgb, var(--fg) 55%, transparent); transition: opacity .15s; }
 .add svg { width: 12px; height: 12px; }
-.add.on { background: var(--sys-blue); border-color: var(--sys-blue); color: #fff; }
+.add.on { background: var(--blue-fill); border-color: var(--blue-fill); color: #fff; }
 .chip { position: absolute; left: 5px; top: -5px; z-index: 3; padding: 1px 4px; border-radius: 99px; font: 700 9px/1.25 var(--mac); color: var(--fg); background: linear-gradient(var(--tray-tint) 0 0) var(--pop-bg); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--fg) 15%, transparent); opacity: 0; transition: opacity .15s; pointer-events: none; }
-.g.target .chip { background: var(--sys-blue); color: #fff; }
+.g.target .chip { background: var(--blue-fill); color: #fff; }
 .dragging .chip { opacity: 1; }
 .dragging .minus { opacity: 0; pointer-events: none; }
 .dragging .g.target .add { opacity: 0; }
@@ -313,24 +279,22 @@ h1 .wide { display: none; }
 .gauge i { height: 5px; border-radius: 3px; background: linear-gradient(currentColor 0 0) 0 / var(--p) 100% no-repeat, var(--track); }
 .gauge i + i { height: 3px; }
 
-/* The panel below the bar: Edit Bar in Place, then a hint, Undo and Done while editing */
+/* Below the bar while editing: a hint, Undo and Done */
 .edit-ctl {
-  position: absolute; top: calc(100% + 12px); left: calc(var(--strip-m) + 6px); z-index: 5;
-  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; white-space: nowrap;
+  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 5; translate: -50% 0;
+  display: none; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; white-space: nowrap;
   color: var(--win-fg); font: 400 13px/1 var(--mac);
   background: color-mix(in srgb, var(--win-bg) 84%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
   box-shadow: 0 0 0 .5px var(--win-ring), inset 0 0 0 1px var(--win-edge), 0 14px 34px -14px var(--shadow-2);
 }
-.edit-ctl button { height: 22px; padding: 0 8px; border-radius: 5px; background: color-mix(in srgb, var(--win-fg) 12%, transparent); }
-[data-mode="light"] .edit-ctl button { background: color-mix(in srgb, var(--win-fg) 7%, transparent); }
+.editing .edit-ctl { display: flex; }
+.adding .edit-ctl { display: none; }
+.edit-ctl button { height: 22px; padding: 0 8px; border-radius: 5px; background: color-mix(in srgb, var(--win-fg) 7%, transparent); }
+[data-mode="dark"] .edit-ctl button { background: color-mix(in srgb, var(--win-fg) 12%, transparent); }
 .edit-ctl button:hover { background: color-mix(in srgb, var(--win-fg) 18%, transparent); }
-.edit-ctl .done, [data-mode="light"] .edit-ctl .done { background: var(--sys-blue); color: #fff; }
+.edit-ctl .done, [data-mode="dark"] .edit-ctl .done { background: var(--blue-fill); color: #fff; }
 .edit-ctl button:disabled { opacity: .45; cursor: default; background: color-mix(in srgb, var(--win-fg) 12%, transparent); }
 .edit-ctl .hint { font-size: 11.5px; color: color-mix(in srgb, var(--win-fg) 62%, transparent); }
-.editing .edit-ctl { left: 50%; translate: -50% 0; }
-.edit-ctl .editing-hint, .edit-ctl .b, .editing .edit-ctl :is(.start, .idle) { display: none; }
-.editing .edit-ctl :is(.editing-hint, .b) { display: inline-block; }
-.header .edit-ctl, .adding .edit-ctl, .docked:not(.editing) .edit-ctl { display: none; }
 
 /* Add here: built-in widgets and the Store's packages, then a package's review */
 .addpop {
@@ -340,29 +304,29 @@ h1 .wide { display: none; }
 }
 .addpop.review { width: 400px; }
 .addpop::before { content: ""; position: absolute; top: -6px; left: var(--ax, 24px); width: 12px; height: 12px; rotate: 45deg; background: var(--win-bg); border-radius: 2px 0 0; box-shadow: -1px -1px 0 -.5px var(--win-edge); }
-.addpop .t { margin-bottom: 10px; font: 700 10px/1 var(--mac); color: color-mix(in srgb, var(--win-fg) 55%, transparent); letter-spacing: .02em; }
+.addpop .t { margin-bottom: 10px; font: 700 10px/1 var(--mac); color: color-mix(in srgb, var(--win-fg) 68%, transparent); letter-spacing: .02em; }
 .addpop .find { width: 100%; height: 26px; padding: 0 9px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--win-fg) 8%, transparent); color: inherit; font: 400 13px/1 var(--mac); }
 .addpop .find:focus-visible { outline: 3px solid color-mix(in srgb, var(--sys-blue) 55%, transparent); outline-offset: 0; }
-.addpop .find::placeholder { color: color-mix(in srgb, var(--win-fg) 50%, transparent); }
+.addpop .find::placeholder { color: color-mix(in srgb, var(--win-fg) 62%, transparent); }
 .addpop .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 296px; margin-top: 10px; overflow-y: auto; overscroll-behavior: contain; }
 .addpop .ch { display: flex; align-items: center; gap: 7px; height: 44px; min-width: 0; padding: 0 8px; border-radius: 6px; text-align: left; }
 .addpop .ch:hover, .addpop .ch:focus-visible { background: color-mix(in srgb, var(--sys-blue) 18%, transparent); outline: none; }
 .addpop .ch .ic { width: 15px; height: 15px; flex: none; margin: 0 1.5px; }
 .addpop .ch span { min-width: 0; }
 .addpop .ch b { display: block; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.addpop .ch small { display: block; margin-top: 1px; font-size: 10px; color: color-mix(in srgb, var(--win-fg) 55%, transparent); }
+.addpop .ch small { display: block; margin-top: 1px; font-size: 10px; color: color-mix(in srgb, var(--win-fg) 68%, transparent); }
 .addpop .ch .from-store { width: 11px; height: 11px; flex: none; margin-left: auto; }
-.addpop .none { padding: 10px 2px 2px; color: color-mix(in srgb, var(--win-fg) 55%, transparent); }
+.addpop .none { padding: 10px 2px 2px; color: color-mix(in srgb, var(--win-fg) 68%, transparent); }
 .addpop .back { height: 22px; padding: 0 8px; border-radius: 5px; background: color-mix(in srgb, var(--win-fg) 12%, transparent); }
 .addpop h4 { margin-top: 12px; font: 600 15px/1.25 var(--mac); }
 .addpop .d { margin-top: 4px; color: color-mix(in srgb, var(--win-fg) 78%, transparent); }
-.addpop .m { margin-top: 4px; color: color-mix(in srgb, var(--win-fg) 55%, transparent); }
+.addpop .m { margin-top: 4px; color: color-mix(in srgb, var(--win-fg) 68%, transparent); }
 .addpop .can { list-style: none; margin-top: 12px; padding: 2px 10px; border-radius: 8px; background: color-mix(in srgb, var(--win-fg) 5%, transparent); }
 .addpop .can li { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
 .addpop .can li + li { border-top: 1px solid color-mix(in srgb, var(--win-fg) 8%, transparent); }
 .addpop .can svg { width: 14px; height: 14px; flex: none; color: color-mix(in srgb, var(--win-fg) 60%, transparent); }
-.addpop .foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: color-mix(in srgb, var(--win-fg) 55%, transparent); font-size: 11px; }
-.addpop .go { flex: none; margin-left: auto; height: 26px; padding: 0 12px; border-radius: 6px; background: var(--sys-blue); color: #fff; font-size: 13px; }
+.addpop .foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: color-mix(in srgb, var(--win-fg) 68%, transparent); font-size: 11px; }
+.addpop .go { flex: none; margin-left: auto; height: 26px; padding: 0 12px; border-radius: 6px; background: var(--blue-fill); color: #fff; font-size: 13px; }
 
 /* The bar's context menu, in the system's style */
 .ctx {
@@ -372,12 +336,12 @@ h1 .wide { display: none; }
   box-shadow: 0 0 0 .5px var(--win-ring), inset 0 0 0 1px var(--win-edge), 0 12px 30px -10px var(--shadow-2);
 }
 .ctx button { display: block; width: 100%; padding: 5px 10px; border-radius: 5px; text-align: left; }
-.ctx button:hover, .ctx button:focus-visible { background: var(--sys-blue); color: #fff; outline: none; }
+.ctx button:hover, .ctx button:focus-visible { background: var(--blue-fill); color: #fff; outline: none; }
 .ctx hr { height: 1px; margin: 5px 10px; border: 0; background: color-mix(in srgb, var(--win-fg) 14%, transparent); }
 
 /* Popups and the More widgets menu */
 .pop {
-  position: absolute; z-index: 6; width: 300px; padding: 12px 14px 11px;
+  position: absolute; z-index: 6; width: 300px;
   background: var(--pop-bg); color: var(--fg); box-shadow: inset 0 0 0 1px var(--pop-border), 0 24px 60px -24px var(--shadow-2);
   border-radius: var(--pop-radius); font: var(--pop-font); -webkit-font-smoothing: auto;
   opacity: 0; visibility: hidden; transform: translateY(-4px);
@@ -399,19 +363,9 @@ h1 .wide { display: none; }
 .pop .meter i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
 .pop .graph { display: block; width: 100%; height: 44px; margin: 2px 0 4px; }
 .pop .graph polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
-.ctl { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; padding: 5px 0; }
-.ctl input[type=range] { width: 100%; accent-color: var(--accent); }
-.check { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; }
-.check input { accent-color: var(--accent); width: 14px; height: 14px; }
-.seg { display: flex; background: var(--track); border-radius: 7px; padding: 2px; }
-.seg button { flex: 1; padding: 4px 0; border-radius: 5px; font: inherit; }
-.seg button.on { background: var(--raised); }
-.search { width: 100%; margin-top: 8px; padding: 6px 9px; border-radius: 7px; border: 0; background: var(--track); color: var(--fg); font: inherit; }
-.search::placeholder { color: var(--muted); }
-.apps div { padding: 4px 0; }
 .menu { width: 250px; padding: 6px; }
 .menu p { color: var(--muted); padding: 6px 8px 4px; font: 500 11.5px/1 var(--mac); }
-.menu button, .menu a { display: flex; width: 100%; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; text-align: left; font: inherit; }
+.menu button, .menu a { display: flex; width: 100%; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; text-align: left; font: inherit; text-decoration: none; }
 .menu button:hover, .menu a:hover { background: var(--accent); color: var(--accent-text); }
 .pane[data-id="site"] { width: 200px; }
 .np-pop .src { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
@@ -437,291 +391,388 @@ h1 .wide { display: none; }
 .menu button svg { width: 15px; height: 15px; flex: none; }
 .menu button.over-off { display: none; }
 
-/* Windows. On the desk, drag them by the title bar. */
-.layer {
-  position: absolute; z-index: 4;
-  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--tilt, 0deg));
-}
-.win {
-  border-radius: 12px; background: var(--win-bg); color: var(--win-fg); font: 400 13px/1.3 var(--mac);
-  box-shadow: 0 0 0 .5px var(--win-ring), inset 0 0 0 1px var(--win-edge), 0 40px 90px -30px var(--shadow-1), 0 12px 30px -16px var(--shadow-2);
-  transition: box-shadow .2s;
-}
-.win .tb { position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 16px 10px; }
-.win .tb .title { position: absolute; left: 0; right: 0; text-align: center; color: var(--text-3); font-size: 12px; pointer-events: none; }
-.layer .tb { cursor: grab; touch-action: none; user-select: none; }
-.layer.dragging .tb { cursor: grabbing; }
-.layer.dragging .win { box-shadow: 0 0 0 .5px var(--win-ring), inset 0 0 0 1px var(--win-edge), 0 60px 120px -30px var(--shadow-1), 0 20px 44px -16px var(--shadow-2); }
-.tl { display: flex; gap: 8px; }
-.tl i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
-.tl i:nth-child(2) { background: #febc2e; } .tl i:nth-child(3) { background: #28c840; }
-.theme-layer { left: 16px; bottom: 16px; width: min(358px, calc(100% - 32px)); }
-.theme-win .tb b { font-weight: 600; }
-.theme-win .tb .save { margin-left: auto; color: var(--sys-blue); font-size: 12.5px; white-space: nowrap; }
-.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 206px; overflow-y: auto; overscroll-behavior: contain; padding: 2px 14px 14px; }
-.card { min-width: 0; overflow: hidden; padding: 5px 5px 7px; border-radius: 9px; background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-edge); text-align: left; transition: box-shadow .15s; }
-.card:hover { box-shadow: inset 0 0 0 1px var(--card-hover); }
-.card.on { box-shadow: inset 0 0 0 2px var(--sys-blue); }
-.card .shot { position: relative; height: 40px; border-radius: 5px; overflow: hidden; background: var(--dim), var(--backdrop) center / cover; }
-.card .nm { display: flex; justify-content: space-between; align-items: center; margin: 6px 3px 0; font-size: 12px; font-weight: 600; }
-.card .nm svg { width: 12px; height: 12px; stroke: var(--sys-blue); fill: none; stroke-width: 2.2; opacity: 0; }
-.card.on .nm svg { opacity: 1; }
-.term-layer { display: none; }
-.win.term { --win-bg: #100e0c; --win-fg: #d9cfc2; --win-edge: #ffffff17; --text-3: #a09484; }
-.term pre { padding: 2px 8px 14px; font: 400 12.5px/1.5 var(--mono); }
-.term button { display: block; width: 100%; text-align: left; padding: 3px 8px; border-radius: 5px; font: inherit; white-space: pre; position: relative; }
-.term button::after { content: "Run ↵"; content: "Run ↵" / ""; position: absolute; right: 8px; color: var(--amber); font-family: var(--body); font-size: 11.5px; opacity: 0; transition: opacity .15s; }
-.term button:hover { background: #f5821f14; }
-.term button:hover::after, .term button.ran::after { opacity: 1; }
-.term button.ran::after { content: "✓"; content: "✓" / ""; }
-.term .p, .term .out { color: var(--text-3); }
-.term .out { padding: 0 8px 4px; }
-
-/* Small sample bars in the theme cards and the theme list */
+/* ---------- Paper ---------- */
+
+/* A note: white paper with an irregular corner, a felt-pen line printed a little off it, and tape.
+   main.js draws each line as an SVG (.pen) in three states at the note's size, and the CSS steps between them. */
+.note {
+  --rot: -.6deg; --ox: -5px; --oy: -3px;
+  position: relative; isolation: isolate; background: var(--paper); color: var(--text);
+  padding: 32px 34px 30px; border-radius: 16px 24px 14px 28px / 24px 14px 28px 16px; rotate: var(--rot);
+}
+.note::after {
+  content: ""; position: absolute; top: -14px; left: var(--tape-x, 50%); width: var(--tape-w, 118px); height: 30px; z-index: 1;
+  translate: -50% 0; rotate: var(--tape-r, -3deg); background: var(--tape); pointer-events: none;
+  clip-path: polygon(0 6%, 4% 0, 8% 8%, 13% 2%, 18% 7%, 50% 3%, 82% 6%, 88% 0, 93% 7%, 97% 1%, 100% 8%, 99% 92%, 95% 100%, 90% 93%, 85% 100%, 50% 96%, 15% 99%, 10% 92%, 5% 100%, 1% 94%);
+}
+/* The pen line before main.js draws it, or without it */
+:where(.note, .cta, .tag, .keys button)::before {
+  content: ""; position: absolute; z-index: -1; pointer-events: none;
+  inset: var(--oy) calc(-1 * var(--ox)) calc(-1 * var(--oy)) var(--ox);
+  border: 2.4px solid var(--pen); border-radius: inherit;
+}
+.inked::before { content: none; }
+.inked > .pen {
+  position: absolute; z-index: -1; left: calc(var(--ox) - 8px); top: calc(var(--oy) - 8px); width: calc(100% + 16px); height: calc(100% + 16px);
+  margin: 0 !important; overflow: visible; pointer-events: none; fill: var(--pen);
+}
+.pen path { visibility: hidden; }
+.pen .p0 { visibility: visible; }
+/* About seven states a second, the same everywhere; at rest after a few quiet seconds */
+@media (prefers-reduced-motion: no-preference) {
+  .pen path { animation: boil .429s steps(1, end) infinite; }
+  .pen .p1 { animation-delay: -.286s; }
+  .pen .p2 { animation-delay: -.143s; }
+  .idle .pen path { animation-play-state: paused; }
+}
+@keyframes boil { 0% { visibility: visible; } 33.333%, 100% { visibility: hidden; } }
+
+/* Type on paper */
+h1, h2 { font-family: var(--display); font-weight: 800; font-variation-settings: "INFM" 70, "BNCE" 25; letter-spacing: -.01em; color: var(--text); }
+h1 { font-size: clamp(40px, 4.2vw, 62px); line-height: 1.04; rotate: -1deg; }
+h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.06; }
+h3 { font: 800 22px/1.2 var(--display); font-variation-settings: "INFM" 70, "BNCE" 25; }
+.note > * + * { margin-top: 14px; }
+.note h2 + p { margin-top: 12px; }
+.note a:not(.cta) { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
+.note a:not(.cta):hover { text-decoration-color: currentColor; }
+.note strong { font-weight: 700; }
+.lede { font-size: 1.15em; line-height: 1.45; }
+.req { font-size: 15px; line-height: 1.45; color: var(--text-2); }
+.links { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 16px; }
+.cap {
+  width: fit-content; max-width: 100%; color: var(--red); rotate: -2deg; transform-origin: left center;
+  font: 600 18px/1.3 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 60;
+}
+.cap small { font-size: .78em; color: var(--text); }
+.note .cap { margin-top: 22px; }
+
+/* Words the beam crosses get a highlighter swipe; at rest the headline has none */
+.lumen { position: relative; z-index: 0; }
+.lumen::before {
+  content: ""; position: absolute; inset: 18% -.08em 4% -.1em; z-index: -1;
+  background: var(--highlight) 0 0 / 100% 100% no-repeat; clip-path: inset(0 100% 0 0);
+  transition: clip-path .28s var(--ease);
+}
+.lumen.lit::before { clip-path: inset(0); }
+
+/* Download: Shantell on the lamp's yellow, in a pen line */
+.get { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
+.note .get { margin-top: 24px; }
+.cta {
+  --ox: -4px; --oy: -3px;
+  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; flex: none;
+  min-height: 54px; padding: 12px 26px 12px 22px; border-radius: 999px; background: var(--hi); color: #111;
+  font: 800 20px/1 var(--display); font-variation-settings: "INFM" 70, "BNCE" 25; text-decoration: none; white-space: nowrap;
+  transition: rotate .2s var(--ease), background-color .2s;
+}
+.cta:hover { background: #ffb547; rotate: -2deg; }
+.cta svg { width: 16px; height: 19px; flex: none; fill: currentColor; }
+.cta .ver { margin-left: -2px; opacity: .72; font-variant-numeric: tabular-nums; }
+
+/* ---------- The hero: the headline note and the key ---------- */
+.hero {
+  --left: 5vw;
+  position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
+  padding: calc(var(--bar-h) + clamp(26px, 6.5vh, 70px)) 0 clamp(18px, 3.4vh, 34px) var(--left);
+}
+.hero-note { width: min(46vw, 620px); --rot: -.7deg; --tape-x: 38%; padding: 34px 38px 26px; }
+.hero-note .lede { margin-top: 16px; }
+.hero-note .get { margin-top: 22px; }
+.hero-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
+.note .hero-foot { margin-top: 18px; }
+.quiet { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15.5px; }
+.hero-foot .cap { margin-top: 0; }
+
+.key { --rot: .8deg; --tape-x: 16%; --tape-w: 66px; --tape-r: 6deg; margin-top: auto; width: min(452px, 46vw); padding: 14px 18px 12px; border-radius: 12px 18px 10px 20px / 18px 10px 20px 12px; }
+.js:not(.has-scene) .key { visibility: hidden; }
+.key-t, .key-or { font: 600 16px/1.25 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 60; }
+.key .touch { display: none; }
+@media (pointer: coarse) { .key .mouse { display: none; } .key .touch { display: inline; } }
+.keys { display: flex; flex-wrap: wrap; gap: 8px; }
+.note .keys { margin-top: 9px; }
+.note .key-or { margin-top: 7px; }
+.keys button {
+  --ox: -3px; --oy: -2px;
+  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px 0 6px;
+  border-radius: 999px; background: var(--paper); font: 600 15px/1 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 60;
+  transition: background-color .15s, rotate .2s var(--ease);
+}
+.keys button:hover { background: #fff6c2; rotate: -2deg; }
+.keys button[aria-pressed="true"] { background: var(--hi); }
+.keys svg { width: 26px; height: 20px; flex: none; }
+
+/* ---------- Sections: each a different piece of paper, in the left part of the window ---------- */
+.sec { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: 14vh 0 14vh var(--left, 5vw); }
+.sec .note { width: min(44vw, 620px); }
+.edit { --left: 7vw; }
+.themes { --left: 4.5vw; }
+.widgets { --left: 6vw; }
+.tiling { --left: 7.5vw; }
+.install { --left: 5vw; }
+/* Narrow landscape screens: wider notes so the Download button stays on its paper, still clear of the lighthouse at 0.775 × width */
+@media (min-width: 700px) and (max-width: 1023.98px) {
+  .hero-note, .sec .note { width: min(58vw, 620px); }
+  .hero-note { padding-left: 30px; padding-right: 30px; }
+  .key { width: min(452px, 58vw); }
+}
+
+/* Edit: a taped note with a picture of the bar in edit mode */
+.taped { --rot: .7deg; --tape-x: 9%; --tape-r: -32deg; --tape-w: 104px; }
+.taped::after { top: -6px; }
+.taped .tape2 + h2 { margin-top: 0; }
+.taped .tape2 { position: absolute; top: -4px; right: -12px; width: 96px; height: 28px; rotate: 34deg; background: var(--tape); clip-path: polygon(0 6%, 5% 0, 10% 8%, 50% 3%, 90% 6%, 95% 0, 100% 8%, 99% 92%, 94% 100%, 50% 96%, 6% 100%, 1% 92%); pointer-events: none; z-index: 1; }
+.screen { position: relative; border-radius: 13px; background: var(--screen); box-shadow: 0 0 0 2.2px var(--pen); }
+.fig-edit { display: block; margin-top: 22px !important; padding: 40px 12px 16px; color: var(--fg); font: var(--bar-font); -webkit-font-smoothing: auto; container-type: inline-size; }
+.fig-edit .trays { display: flex; flex-wrap: wrap; gap: 8px; }
+.fig-edit .tray { position: relative; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 7px; border-radius: 9px; background: linear-gradient(var(--tray-tint) 0 0) var(--tray-backing); box-shadow: inset 0 0 0 .5px var(--tray-line); }
+.fig-edit .tray.center { flex: 1; justify-content: center; min-width: 48px; }
+.fig-edit .tile { cursor: default; }
+.fig-edit .w { cursor: default; }
+.fig-edit .w.ws { gap: 2px; padding: 0 4px; }
+.fig-edit .w.ws .wsi { height: 22px; cursor: default; }
+.fig-edit .w.ws .wsi.on { background: var(--ws-ind); }
+.fig-edit .arrow { position: absolute; left: var(--ax, 196px); top: 6px; width: var(--aw, 150px); height: 36px; color: var(--pen); pointer-events: none; }
+[data-mode="dark"] .fig-edit .arrow { color: #fff; }
+.fig-edit .drag-note { position: absolute; left: calc(var(--ax, 196px) + var(--aw, 150px) * .42); top: 2px; font: 600 15px/1 var(--hand); color: var(--pen); rotate: -4deg; }
+[data-mode="dark"] .fig-edit .drag-note { color: #fff; }
+@container (max-width: 470px) { .fig-edit .arrow, .fig-edit .drag-note { display: none; } .fig-edit { padding-top: 16px; } }
+.try {
+  position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 20px !important; padding: 9px 16px 10px;
+  border-radius: 10px 14px 12px 9px; background: var(--paper); box-shadow: 0 0 0 2.2px var(--pen), 3px 3px 0 2.2px var(--pen);
+  font: 600 17px/1.2 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 60; transition: translate .15s, box-shadow .15s;
+}
+.try::after { content: "↑"; font-family: var(--body); font-weight: 700; }
+.try:hover { background: #fff6c2; }
+.try:active { translate: 2px 2px; box-shadow: 0 0 0 2.2px var(--pen), 1px 1px 0 2.2px var(--pen); }
+
+/* Themes: seven tags pegged on a washing line, each a miniature bar in its theme */
+.line-note { --rot: -.9deg; }
+.line-note::after { display: none; }
+.line {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); grid-auto-rows: 112px; column-gap: 12px;
+  margin: 18px -12px 0 !important; padding: 0 12px; background: var(--string) 0 0 / 100% 112px repeat-y;
+}
+.tag {
+  --ox: -3px; --oy: -2px; --r: -2deg;
+  position: relative; isolation: isolate; align-self: start; display: flex; flex-direction: column; gap: 7px;
+  margin-top: 18px; padding: 8px 8px 9px; border-radius: 6px 9px 7px 10px; background: var(--paper); text-align: left;
+  rotate: var(--r); transform-origin: 50% -8px; transition: rotate .35s var(--ease), background-color .15s;
+}
+.tag:nth-child(3n + 2) { --r: 1.8deg; }
+.tag:nth-child(3n) { --r: -.5deg; }
+.tag:hover { --r: 0deg; }
+.tag[aria-pressed="true"] { background: var(--hi); }
+/* a wooden peg */
+.tag::after {
+  content: ""; position: absolute; top: -19px; left: 50%; width: 10px; height: 24px; translate: -50% 0; rotate: 4deg;
+  border-radius: 3px 3px 4px 4px; background: linear-gradient(90deg, #d79b5f 0 45%, #b8783f 45% 55%, #d79b5f 55%); box-shadow: 0 0 0 1.8px var(--pen);
+}
+.tag .shot { position: relative; height: 40px; overflow: hidden; border-radius: 5px; background: var(--screen); box-shadow: 0 0 0 1.6px var(--pen); }
+.tag .nm { display: flex; align-items: center; justify-content: space-between; gap: 6px; font: 600 16px/1 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 60; }
+.tag[aria-pressed="true"] .nm::after { content: "✓"; font-family: var(--body); font-weight: 700; }
+
+/* Small sample bars in the theme tags: three workspaces, Finder, battery and clock, as in Settings' theme cards */
 .mini {
-  display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 100%;
-  font: var(--bar-font); color: var(--fg); -webkit-font-smoothing: auto; padding: 0 calc(5px + var(--strip-m) * .5);
+  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px;
+  width: 200%; height: 200%; padding: 0 calc(5px + var(--strip-m) * .5); transform: scale(.5); transform-origin: 0 0;
+  font: var(--bar-font); color: var(--fg); -webkit-font-smoothing: auto;
 }
-.mini .strip { position: absolute; inset: 3px calc(3px + var(--strip-m) * .4); background: var(--strip-bg); border-radius: var(--strip-radius); box-shadow: var(--strip-edge); }
+.mini .strip { position: absolute; inset: 6px calc(6px + var(--strip-m) * .4); background: var(--strip-bg); border-radius: var(--strip-radius); box-shadow: var(--strip-edge); }
 .mini .g { display: flex; gap: 4px; position: relative; }
-.mini .t { position: relative; filter: var(--w-glow); background: var(--w-bg); box-shadow: inset 0 0 0 1px var(--w-border), 0 1px 3px var(--w-shadow); border-radius: var(--w-radius); padding: 0 7px; height: calc(var(--tile-h) * 22 / 28); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
-.mini .wsi { padding: 0 6px; border-radius: calc(var(--ws-r) * 22 / 28); cursor: default; }
+.mini .t { position: relative; filter: var(--w-glow); background: var(--w-bg); box-shadow: inset 0 0 0 1px var(--w-border), 0 1px 3px var(--w-shadow); border-radius: var(--w-radius); padding: 0 7px; height: var(--tile-h); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
+.mini .wsi { padding: 0 6px; cursor: inherit; }
 .ws-under .mini .wsi.on::after { bottom: 1px; }
-.card .mini { transform: scale(.52); transform-origin: left center; width: 192%; }
-
-/* ---------- Sections ---------- */
-.stop { position: relative; padding: 72px 0 20px; }
-.stop.first { padding-top: 96px; }
-.stop h2 { margin-bottom: 26px; font: 600 clamp(30px, 7.6vw, 48px)/1.04 var(--display); letter-spacing: -.03em; }
-.body p { max-width: 52ch; color: var(--text-2); }
-.body p + p { margin-top: 12px; }
-.body p strong { color: var(--text); font-weight: 500; }
-.more-link { display: inline-block; margin-top: 16px; font-size: 14.5px; color: var(--text); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
-.more-link:hover { border-color: var(--text); }
-.more-link.try { margin: 14px 0 6px; }
-.try + p { margin-top: 16px; }
-.fig { margin-top: 40px; position: relative; }
-
-/* Configure all of it: two groups of specs */
-.specs h3 { margin-bottom: 4px; font: 500 13.5px/1.3 var(--body); color: var(--text-3); }
-.specs h3 + ul { margin-bottom: 32px; }
-.specs ul { list-style: none; border-bottom: 1px solid var(--line); }
-.specs li { padding: 11px 0; border-top: 1px solid var(--line); }
-.specs b { display: block; font: 600 15px/1.3 var(--display); }
-.specs span { font-size: 13.5px; line-height: 1.4; color: var(--text-3); }
-
-/* Popups */
-.pops { position: relative; display: grid; gap: 14px; }
-.pops .pop { position: relative; opacity: 1; visibility: visible; transform: none; width: auto; max-width: 320px; }
-
-/* Themes: every included theme as a card that restyles the bar */
-.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
-.board .card { padding: 6px 6px 9px; background: none; box-shadow: inset 0 0 0 1px var(--line); }
-.board .card:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
-.board .card.on { box-shadow: inset 0 0 0 2px var(--ring); }
-.board .card .nm { margin: 8px 3px 0; font: 600 14px/1.3 var(--display); }
-.board .card .nm svg { stroke: var(--ring); }
-.board .store { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px; color: var(--text-2); font-size: 14px; }
-.board .store:hover { color: var(--text); }
-.board .store svg { width: 14px; height: 14px; }
-
-/* Scripts */
-.code { border-radius: 12px; background: var(--code-bg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
-.code .fn { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 500 12px/1.2 var(--mono); color: var(--text-3); }
-.code pre { padding: 12px 14px 14px; font: 400 12.5px/1.6 var(--mono); color: var(--code-fg); overflow-x: auto; }
-.code pre:focus-visible { outline-offset: -2px; border-radius: 0 0 12px 12px; }
-.code .c { color: var(--code-dim); }
-.code + .code { margin-top: 12px; }
-.result { position: relative; margin: -18px 0 0 auto; width: max-content; z-index: 2; display: flex; gap: 6px; padding: 6px; border-radius: 12px; background: var(--dim), var(--backdrop) center / cover; box-shadow: inset 0 0 0 1px var(--line), 0 20px 50px -20px var(--shadow-1); }
+
+/* Scripts and the Store: a page torn from a notebook, ruled, with a red margin */
+.notebook { --rot: .5deg; --ox: -5px; --oy: -3px; background: none; padding: 46px 34px 34px 70px; line-height: 28px; }
+.notebook::after {
+  content: ""; inset: 0; top: 0; left: 0; width: auto; height: auto; translate: none; rotate: none; z-index: -2;
+  border-radius: 0 0 14px 22px / 0 0 22px 14px; clip-path: var(--torn, none);
+  background:
+    linear-gradient(90deg, transparent 48px, #e8786b 48px 50px, transparent 50px),
+    repeating-linear-gradient(transparent 0 27px, #b7d2ef 27px 28px) 0 17px / 100% 28px,
+    var(--paper);
+}
+.notebook > * + * { margin-top: 14px; }
+.notebook h2 { line-height: 1.1; }
+.notebook .script { margin-top: 18px; }
+.code { border-radius: 10px; background: #fbfaf6; box-shadow: 0 0 0 2px var(--pen); overflow: hidden; }
+.code .fn { display: flex; justify-content: space-between; padding: 7px 14px; border-bottom: 2px solid var(--pen); font: 500 12.5px/1.2 var(--mono); color: #4a4a4a; background: #fff2a8; }
+.code pre { padding: 12px 14px 14px; font: 400 13px/1.6 var(--mono); color: #1d1d1f; overflow-x: auto; }
+.code pre:focus-visible { outline-offset: -3px; border-radius: 0 0 10px 10px; }
+.code .c { color: #6b6b6b; }
+.result { display: flex; gap: 6px; width: max-content; max-width: 100%; margin: -14px 18px 0 auto; padding: 7px; }
 .result .w { font: var(--bar-font); -webkit-font-smoothing: auto; color: var(--fg); }
-.result .w.new { box-shadow: inset 0 0 0 1px var(--w-border), 0 0 0 2px var(--amber); }
+.result .w.new { box-shadow: inset 0 0 0 1px var(--w-border), 0 0 0 2.5px var(--amber); }
+.store { margin-top: 30px !important; }
+.store > * + * { margin-top: 12px; }
+.store-fig { position: relative; margin-top: 18px !important; rotate: -.6deg; }
 
 /* The Store: Settings → Packages, as the app draws it */
-.body code { font: 400 .92em/1 var(--mono); color: var(--text); }
-.store-win .tb { gap: 16px; padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--win-fg) 9%, transparent); }
-.tabs, .kinds { display: flex; padding: 2px; border-radius: 7px; background: color-mix(in srgb, var(--win-fg) 8%, transparent); font-size: 12.5px; }
-.tabs span, .kinds span { padding: 4px 10px; border-radius: 5px; color: color-mix(in srgb, var(--win-fg) 80%, transparent); }
-.tabs .on, .kinds .on { background: color-mix(in srgb, var(--win-fg) 16%, transparent); color: var(--win-fg); }
-.store-win .find { flex: 1; min-width: 0; max-width: 220px; padding: 5px 10px; border-radius: 7px; background: color-mix(in srgb, var(--win-fg) 6%, transparent); color: color-mix(in srgb, var(--win-fg) 50%, transparent); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
-.kinds { width: max-content; margin: 14px 14px 0; }
-.pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; padding: 14px; }
-.pkg { display: flex; flex-direction: column; min-width: 0; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--win-fg) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--win-fg) 8%, transparent); }
-.pkg .pv { display: grid; place-items: center; height: 58px; border-radius: 7px; background: var(--dim), var(--backdrop) center / cover; font: var(--bar-font); -webkit-font-smoothing: auto; color: var(--fg); overflow: hidden; }
+.win { border-radius: 12px; background: var(--win-bg); color: var(--win-fg); font: 400 13px/1.3 var(--mac); box-shadow: 0 0 0 .5px var(--win-ring), inset 0 0 0 1px var(--win-edge), 0 0 0 2.4px var(--pen), 6px 8px 0 0 #1111111f; }
+[data-mode="dark"] .store-fig { color-scheme: dark; }
+.win .tb { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 14px; }
+.tl { display: flex; gap: 8px; }
+.tl i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
+.tl i:nth-child(2) { background: #febc2e; } .tl i:nth-child(3) { background: #28c840; }
+.store-win .tb { gap: 14px; border-bottom: 1px solid color-mix(in srgb, var(--win-fg) 9%, transparent); }
+.tabs { display: flex; padding: 2px; border-radius: 7px; background: color-mix(in srgb, var(--win-fg) 8%, transparent); font-size: 12.5px; }
+.tabs span { padding: 4px 10px; border-radius: 5px; color: color-mix(in srgb, var(--win-fg) 80%, transparent); }
+.tabs .on { background: color-mix(in srgb, var(--win-fg) 16%, transparent); color: var(--win-fg); }
+.store-win .find { flex: 1; min-width: 0; max-width: 200px; padding: 5px 10px; border-radius: 7px; background: color-mix(in srgb, var(--win-fg) 6%, transparent); color: color-mix(in srgb, var(--win-fg) 50%, transparent); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
+.pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; padding: 12px; line-height: 1.3; }
+.pkg { display: flex; flex-direction: column; min-width: 0; padding: 9px; border-radius: 10px; background: color-mix(in srgb, var(--win-fg) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--win-fg) 8%, transparent); }
+.pkg .pv { display: grid; place-items: center; height: 50px; border-radius: 7px; background: var(--screen); font: var(--bar-font); -webkit-font-smoothing: auto; color: var(--fg); overflow: hidden; }
 .pkg .pv .w { height: 26px; }
-.pkg b { margin-top: 10px; font-weight: 600; font-size: 13.5px; }
-.pkg p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: 12px; line-height: 1.35; color: color-mix(in srgb, var(--win-fg) 62%, transparent); }
-.pkg .by { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 11.5px; color: color-mix(in srgb, var(--win-fg) 55%, transparent); }
+.pkg b { margin-top: 9px; font-weight: 600; font-size: 13px; }
+.pkg p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: color-mix(in srgb, var(--win-fg) 66%, transparent); }
+.pkg .by { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 9px; font-size: 11px; color: color-mix(in srgb, var(--win-fg) 60%, transparent); }
 .pkg .by > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.pkg .pkg-get { height: 24px; padding: 0 12px; border-radius: 6px; background: color-mix(in srgb, var(--win-fg) 12%, transparent); color: var(--win-fg); font-size: 12.5px; }
+.pkg .pkg-get { flex: none; height: 24px; padding: 0 12px; border-radius: 6px; background: color-mix(in srgb, var(--win-fg) 12%, transparent); color: var(--win-fg); font-size: 12.5px; }
 .pkg .pkg-get:hover { background: color-mix(in srgb, var(--win-fg) 18%, transparent); }
 .pkg .state { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
 .pkg .state svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; }
 .store-win { position: relative; }
 .store-win::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #00000059; opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
 .store-win.sheet::after { opacity: 1; visibility: visible; transition: opacity .2s; }
-.pkg-review { z-index: 3; top: 56px; left: 50%; translate: -50% 0; width: min(400px, calc(100% - 24px)); }
+.addpop.pkg-review { z-index: 3; top: 52px; left: 50%; translate: -50% 0; width: min(400px, calc(100% - 24px)); line-height: 1.3; }
 .pkg-review::before { content: none; }
 
-/* Displays: two screens, each with its own bar */
-.setup { display: grid; gap: 16px; margin: 40px calc(var(--gutter) * -1) 0; }
-.cap {
-  position: relative; overflow: hidden; height: 300px; border-radius: 12px;
-  background: linear-gradient(transparent 45%, #000000a6), var(--dim), var(--backdrop) 50% 40% / cover;
-  box-shadow: 0 0 0 .5px var(--win-ring), inset 0 0 0 1px var(--win-edge), 0 40px 90px -30px var(--shadow-1);
-}
-.cap .bar { transition: none; }
-.cap .w { cursor: default; }
-.cap .pop { right: 150px; top: calc(var(--bar-h) - var(--strip-m) + 6px); width: 250px; }
-.cap figcaption { position: absolute; left: 16px; right: 16px; bottom: 14px; font-size: 13.5px; line-height: 1.4; color: #fff; }
-.cap figcaption b { font-weight: 600; font-family: var(--display); }
-.cap.monitor figcaption { text-align: right; }
-.cap.monitor .gl { display: none; }
-.cap.monitor .bar { justify-content: flex-end; }
-.cap.laptop { height: 220px; border-radius: 14px 14px 6px 6px; background-image: linear-gradient(transparent 45%, #000000a6), var(--dim), var(--backdrop-2); }
-.cap.laptop .bar { padding: 0 10px; }
-.notch { position: absolute; top: 0; left: 50%; width: 96px; height: 34px; translate: -50% 0; background: #000; border-radius: 0 0 11px 11px; z-index: 1; }
-
-/* ---------- Install ---------- */
-.install { position: relative; margin-top: 40px; padding: 88px 0 96px; isolation: isolate; }
-.install h2 { font: 600 clamp(40px, 11vw, 88px)/.98 var(--display); letter-spacing: -.04em; max-width: 11ch; }
-.install .lede { max-width: 40ch; }
-.install .cta { height: 54px; padding: 0 24px 0 20px; font-size: 17px; border-radius: 11px; }
-.install .cta svg { width: 17px; height: 20px; }
-
-/* The disk image window, on setup's backdrop: drag StableBar onto Applications */
-.desktop { position: relative; isolation: isolate; display: grid; place-items: center; margin: 48px calc(var(--gutter) * -1) 0; padding: 40px 20px; }
-.desktop .wall { -webkit-mask-image: linear-gradient(#0009 0 0); mask-image: linear-gradient(#0009 0 0); }
-.dmg { width: 100%; max-width: 520px; }
-.dmg .stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 24px 18px 18px; }
-.slot { justify-self: center; display: grid; justify-items: center; gap: 8px; font-size: 12.5px; }
-.slot .ico { width: 84px; height: 84px; display: grid; place-items: center; }
-.app-ico { width: 84px; height: 84px; touch-action: none; cursor: grab; user-select: none; -webkit-user-drag: none; position: relative; z-index: 2; transition: transform .45s var(--ease), opacity .3s; }
-.app-ico.dragging { cursor: grabbing; transition: none; }
-.app-ico.in { opacity: 0; }
-.dmg .arrow { display: grid; justify-items: center; gap: 8px; color: var(--text-3); font: 400 12px/1 var(--mono); }
-.dmg .arrow svg { width: 72px; height: 14px; stroke: var(--amber); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
-.folder { width: 80px; height: 64px; transition: transform .25s var(--ease); }
-.folder.over { transform: scale(1.08); }
-.dmg .foot { padding: 0 18px 16px; text-align: center; color: var(--text-3); font-size: 12.5px; }
-
-footer { padding: 22px 0 40px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: var(--text-3); }
-footer span { flex-basis: 100%; }
-footer a:hover { color: var(--text); }
-
-/* ---------- Privacy Policy and Terms ---------- */
-.legal { max-width: 68ch; padding: 36px 0 64px; }
-.legal h1 { font-size: clamp(34px, 8vw, 48px); max-width: none; }
-.legal .updated { margin-top: 10px; font-size: 14px; color: var(--text-3); }
-.legal h2 { margin-top: 36px; font: 600 22px/1.2 var(--display); letter-spacing: -.01em; }
-.legal p, .legal ul { margin-top: 12px; color: var(--text-2); }
-.legal ul { padding-left: 1.2em; }
-.legal li + li { margin-top: 6px; }
-.legal strong { font-weight: 600; color: var(--text); }
-.legal a { text-decoration: underline; text-underline-offset: 3px; }
-.legal a:hover { color: var(--text); }
-.legal code { font: 14px var(--mono); }
-
-/* Arrival, then sections easing in as they scroll into view */
-@media (prefers-reduced-motion: no-preference) {
-  .js .hero h1, .js .hero .lede, .js .hero .get { opacity: 0; translate: 0 12px; }
-  .js .wall { opacity: 0; }
-  .js #bar .g > .w:not(.dl) { opacity: 0; translate: 0 -6px; }
-  .js .layer { opacity: 0; translate: 0 28px; }
-  .arrived .hero h1, .arrived .hero .lede, .arrived .hero .get { opacity: 1; translate: none; transition: opacity .8s var(--ease) var(--d, 0s), translate 1s var(--ease) var(--d, 0s); }
-  .arrived .hero .lede { --d: .08s; }
-  .arrived .hero .get { --d: .16s; }
-  .arrived .wall { opacity: 1; transition: opacity 1.4s var(--ease) .2s; }
-  .arrived #bar .g > .w:not(.dl) { opacity: 1; translate: none; transition: background .15s, border-radius .25s, opacity .5s var(--ease) calc(.4s + var(--i) * 35ms), translate .7s var(--ease) calc(.4s + var(--i) * 35ms); }
-  .arrived .layer { opacity: 1; translate: none; transition: opacity .8s var(--ease) var(--d), translate 1.1s var(--ease) var(--d); }
-  .arrived .theme-layer { --d: .75s; }
-  .arrived .term-layer { --d: .9s; }
-  .js .edit-ctl { opacity: 0; }
-  .arrived .edit-ctl { opacity: 1; transition: opacity .6s var(--ease) 1s; }
-
-  .js .reveal { opacity: 0; translate: 0 8px; transition: opacity .6s var(--ease), translate .8s var(--ease); }
-  .js .reveal.in { opacity: 1; translate: none; }
-}
-
-/* Phones: keep the header bar to the essentials */
-@media (max-width: 719px) {
-  .pops .pop { width: calc(100% - 48px); }
-  .pops .p2 { margin-left: 24px; }
-  .pops .p3 { margin-left: 48px; }
+/* Tiling: a postcard, with the workspace widget large as its picture */
+.postcard {
+  --rot: -1.1deg; --tape-x: 88%; --tape-r: 28deg; --tape-w: 90px;
+  display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 34%); column-gap: 26px;
+  padding: 30px 30px 24px; border-radius: 8px 12px 9px 14px / 12px 8px 14px 9px;
+}
+.postcard > * + * { margin-top: 0; }
+.pc-msg > * + * { margin-top: 12px; }
+.pc-addr { position: relative; display: flex; flex-direction: column; gap: 10px; padding-left: 22px; }
+.pc-addr::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2.2px; border-radius: 2px; background: var(--pen); rotate: .8deg; }
+.stamp {
+  align-self: flex-end; display: grid; place-items: center; width: 62px; height: 74px; margin-bottom: 12px; rotate: 3deg;
+  background: #9fd6f5;
+  -webkit-mask: radial-gradient(circle at 50% 50%, #000 2.6px, transparent 2.8px) -4px -4px / 8px 8px, linear-gradient(#000 0 0) center / calc(100% - 8px) calc(100% - 8px) no-repeat;
+  mask: radial-gradient(circle at 50% 50%, #000 2.6px, transparent 2.8px) -4px -4px / 8px 8px, linear-gradient(#000 0 0) center / calc(100% - 8px) calc(100% - 8px) no-repeat;
+}
+.stamp svg { width: 40px; height: 48px; }
+.postmark { position: absolute; top: -6px; right: 34px; width: 74px; height: 50px; rotate: -12deg; color: #3a3a46; opacity: .75; pointer-events: none; }
+.pc-addr .to { font: 600 15px/1 var(--hand); color: var(--red); }
+.pc-addr .addr { padding: 0 2px 4px; border-bottom: 2px dotted #9aa3b5; font: 600 19px/1.1 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 60; }
+.pc-ws { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 22px; padding: 22px 12px; }
+.ws-big {
+  display: flex; align-items: center; gap: 3px; height: 34px; padding: 0 5px; zoom: 1.7;
+  background: var(--w-bg); box-shadow: inset 0 0 0 1px var(--w-border), 0 1px 3px var(--w-shadow); border-radius: var(--w-radius);
+  color: var(--fg); font: var(--bar-font); -webkit-font-smoothing: auto;
+}
+.ws-big .wsi { height: 26px; }
+.pc-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-top: 18px !important; }
+.note .pc-foot .cap { margin-top: 0; }
+
+/* Install: a recipe card, numbered */
+.recipe {
+  --rot: .9deg; --tape-x: 50%; --tape-r: 2deg;
+  padding: 30px 34px 30px; border-radius: 6px 10px 8px 12px / 10px 6px 12px 8px;
+}
+.recipe h2 { padding-bottom: 12px; border-bottom: 2.4px solid #e8786b; }
+.steps { list-style: none; counter-reset: step; background: repeating-linear-gradient(transparent 0 33px, #c3d8f0 33px 35px) 0 0 / 100% 35px; }
+.note .steps { margin-top: 18px; }
+.steps li { position: relative; counter-increment: step; padding-left: 44px; line-height: 35px; }
+.steps li::before {
+  content: counter(step); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; display: grid; place-items: center;
+  border-radius: 54% 46% 50% 48% / 48% 54% 46% 52%; box-shadow: 0 0 0 2.2px var(--pen); background: var(--paper);
+  font: 600 16px/1 var(--hand); color: var(--red);
+}
+.steps li:nth-child(2n)::before { rotate: -8deg; }
+.brew { font-size: 15.5px; color: var(--text-2); }
+.brew code { display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 6px; background: #fbfaf6; box-shadow: 0 0 0 1.6px var(--pen); font: 400 14px/1.4 var(--mono); color: #1d1d1f; white-space: nowrap; }
+
+/* ---------- Footer: a strip of paper with a pen line along its top ---------- */
+.site-foot { display: grid; gap: 12px; margin-top: 8vh; padding: 30px 5vw 44px; background: var(--paper); color: var(--text); font-size: 15.5px; line-height: 1.5; }
+.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 10px; background: var(--rule) 0 0 / 160px 10px repeat-x; }
+.site-foot p { max-width: 70ch; }
+.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
+.site-foot a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
+
+/* ---------- Portrait: phones and portrait tablets. The scene's rule: narrower than 700 px, or taller than 1.1 × wide ---------- */
+@media (max-width: 699.98px), (max-aspect-ratio: 10/11) {
+  .hero, .sec { --left: var(--m); padding-left: var(--m); padding-right: var(--m); align-items: stretch; }
+  :root { --m: clamp(14px, 4vw, 32px); }
+  .hero { padding-top: calc(var(--bar-h) + 24vh); padding-top: calc(var(--bar-h) + 24lvh); padding-bottom: 0; min-height: 0; }
+  .hero-note, .sec .note { width: auto; max-width: 680px; }
+  .key { width: auto; max-width: 680px; margin-top: 28px; }
+  .sec { display: block; min-height: 0; padding-top: 34vh; padding-bottom: 6vh; }
+  .install { padding-bottom: 12vh; }
+  h1 { font-size: clamp(34px, 9.4vw, 58px); }
+  .site-foot { padding-left: var(--m); padding-right: var(--m); }
+}
+@media (max-width: 719.98px) {
+  body { font-size: 17px; }
+  .note { padding: 26px 22px 24px; }
+  .hero-note { padding: 28px 22px 24px; }
+  .hero-note .lede { margin-top: 14px; }
+  .note .get { margin-top: 20px; }
+  .cta { min-height: 50px; padding: 10px 22px 10px 18px; font-size: 18px; }
+  h2 { font-size: 30px; }
+  .notebook { padding: 40px 18px 26px 52px; }
+  .notebook::after { background: linear-gradient(90deg, transparent 36px, #e8786b 36px 38px, transparent 38px), repeating-linear-gradient(transparent 0 27px, #b7d2ef 27px 28px) 0 17px / 100% 28px, var(--paper); }
+  .result { margin-right: 8px; }
+  .postcard { grid-template-columns: 1fr; }
+  .pc-addr { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 18px !important; padding: 16px 70px 0 0; }
+  .pc-addr::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 2.2px; }
+  .stamp { position: absolute; right: 0; top: 14px; width: 52px; height: 62px; margin: 0; }
+  .stamp svg { width: 32px; height: 40px; }
+  .postmark { top: 12px; right: 30px; width: 60px; height: 42px; }
+  .ws-big { zoom: 1.25; }
+  .ws-big .ai { display: none; }
   .code pre { font-size: 11.5px; }
+  .brew code { white-space: normal; }
+  .taped .tape2 { right: 4px; }
+  .try, .edit-ctl { display: none !important; }
+  .pkg:nth-child(n + 5) { display: none; }
+  .store-win .find { display: none; }
+  .line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   #bar .ws .ai, #bar [data-key="app"], #bar [data-key="meeting"], #bar [data-key="system"], #bar [data-key="sound"], #bar [data-key="battery"], #bar .np .track, #bar .clock .day,
-  .header [data-key="clock"], .site .menus, .cap.laptop .app, .cap .meeting { display: none; }
-  .cap .pop { right: 12px; }
-  .edit-ctl, .try { display: none !important; }
-  .store-win .find, .pkg:nth-child(n+5) { display: none; }
-  .try + p { margin-top: 12px; }
-  .theme-layer { width: min(296px, calc(100% - 32px)); }
-  .theme-win .tb { gap: 10px; padding: 11px 12px 8px; }
-  .theme-win .tl { gap: 6px; }
-  .theme-win .tl i { width: 10px; height: 10px; }
-  .cards { gap: 6px; max-height: 100px; padding: 2px 10px 10px; }
-  .cards .card { padding: 4px 4px 5px; border-radius: 7px; }
-  .cards .shot { height: 30px; }
-  .cards .mini { transform: scale(.42); width: 238%; }
-  .cards .nm { margin-top: 4px; font-size: 11px; }
-}
-
-/* ---------- Wider screens ---------- */
-@media (min-width: 720px) {
-  :root { --gutter: 32px; }
-  .nav .gh { display: inline; }
-  .desk { height: 640px; margin-left: 0; margin-right: 0; --desk-r: 16px; }
-  .desktop { margin-left: 0; margin-right: 0; padding: 64px 40px; --desk-r: 16px; }
-  .term-layer { display: block; right: 3%; top: 120px; width: 390px; }
-  .theme-layer { left: 3%; width: 470px; bottom: 24px; }
-  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-  .pops { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
-  .setup { margin-left: 0; margin-right: 0; }
-  .cap.laptop { height: 260px; }
-  .notch { width: 132px; }
-  .install { padding-top: 120px; padding-bottom: 128px; }
+  .header [data-key="clock"], .site .menus { display: none; }
+}
+@media (max-width: 380px) {
+  .keys button { padding-right: 11px; font-size: 14.5px; }
+  .cta { font-size: 17px; padding-left: 16px; padding-right: 18px; }
 }
 @media (min-width: 1080px) {
-  :root { --gutter: 48px; }
-  h1 .wide { display: inline; }
-  h1 { max-width: none; font-size: clamp(62px, 5.6vw, 84px); }
   .header .w.ws { display: flex; }
-  .hero { padding: 64px 0 0; }
-  .lede { font-size: 19px; }
-  .hero .lede { max-width: none; }
-  .desk { height: 680px; margin-top: 56px; }
-  .theme-layer { left: 5%; width: 520px; bottom: 40px; }
-  .term-layer { right: 4%; top: 300px; width: 410px; }
-  .stop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px; padding-top: 160px; }
-  .stop.first { padding-top: 120px; }
-  .stop h2 { grid-column: 1 / -1; margin-bottom: 36px; }
-  .body { grid-column: 1 / 5; }
-  .fig { grid-column: 6 / -1; margin-top: 0; }
-  .specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
-  .specs h3 + ul { margin-bottom: 0; }
-  .pops { display: block; max-width: 715px; height: 470px; margin-left: auto; }
-  .pops .pop { position: absolute; width: 290px; }
-  .pops .p1 { left: 0; top: 0; z-index: 0; box-shadow: inset 0 0 0 1px var(--pop-border), 0 10px 30px -18px var(--shadow-2); }
-  .pops .p2 { left: min(26%, 190px); top: 150px; z-index: 1; }
-  .pops .p3 { left: min(58%, 425px); top: 40px; z-index: 2; box-shadow: inset 0 0 0 1px var(--pop-border), 0 40px 90px -30px var(--shadow-1), 0 16px 40px -20px var(--shadow-2); }
-  .flip .body { grid-column: 9 / -1; grid-row: 2; }
-  .flip .fig { grid-column: 1 / 8; grid-row: 2; }
-  .wide .fig { grid-column: 1 / -1; margin-top: 56px; }
-  .board { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
-  .board .card .shot { height: 50px; }
-  .board .card .mini { transform: scale(.75); width: 133.33%; }
-  .scripts .code:first-child { margin-right: 16%; }
-  .scripts .code + .code { position: relative; margin: -12px 0 0 16%; }
-  .result { margin: -22px 8% 0 auto; }
-  .setup { grid-column: 1 / -1; justify-self: end; display: block; position: relative; width: min(100%, 1280px); height: 600px; margin-top: 64px; }
-  .cap { position: absolute; }
-  .cap.monitor { right: 0; top: 0; width: min(940px, 72%); height: 500px; }
-  .cap.laptop { left: 0; bottom: 0; width: min(620px, 46%); height: 340px; z-index: 2; }
-  .cap.monitor .gl { display: flex; }
-  .cap.monitor .bar { justify-content: space-between; }
-  .install { padding: 160px 0 150px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px; align-items: end; }
-  .install .copy { grid-column: 1 / 7; }
-  .desktop { grid-column: 7 / -1; margin-top: 0; }
 }
+
+/* ---------- Privacy Policy and Terms: one sheet of paper on the sky, no drawing ---------- */
+.doc .page {
+  position: relative; isolation: isolate; max-width: 820px; margin: 40px auto 56px; padding: 6px 48px 8px;
+  background: var(--paper); color: var(--text); border-radius: 14px 22px 12px 26px / 22px 12px 26px 14px;
+}
+.doc .page::before { content: ""; position: absolute; inset: -4px 6px 4px -6px; z-index: -1; border: 2.6px solid var(--pen); border-radius: inherit; pointer-events: none; }
+.doc .page::after { content: ""; position: absolute; top: -15px; left: 50%; width: 130px; height: 30px; translate: -50% 0; rotate: -2deg; background: var(--tape); }
+.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 10px 0; background: var(--rule) left bottom / 160px 10px repeat-x; }
+.brand { display: flex; align-items: center; gap: 10px; font: 800 22px/1 var(--display); text-decoration: none; }
+.brand img { width: 30px; height: 30px; }
+.nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font: 600 17px/1 var(--hand); }
+.nav a { padding: 8px 0; color: var(--link); text-decoration: none; }
+.nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
+.legal { padding: 34px 0 40px; }
+.legal h1 { rotate: none; font-size: clamp(36px, 7vw, 54px); line-height: 1.05; }
+.legal .updated { margin-top: 10px; font: 600 16px/1.3 var(--hand); color: var(--red); }
+.legal h2 { margin-top: 38px; font-size: 27px; line-height: 1.15; }
+.legal p, .legal ul { margin-top: 12px; }
+.legal ul { padding-left: 1.25em; }
+.legal li + li { margin-top: 8px; }
+.legal strong { font-weight: 700; }
+.legal a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
+.legal code { font: 15px var(--mono); }
+.doc footer { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 22px 0 28px; background: var(--rule) left top / 160px 10px repeat-x; font-size: 15.5px; }
+.doc footer a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
+@media (max-width: 719.98px) {
+  .doc .page { margin: 26px 12px 36px; padding: 4px 20px 6px; }
+  .doc { font-size: 17px; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
 }
diff --git a/site/terms.html b/site/terms.html
index a4bccef6..06522ba7 100644
--- a/site/terms.html
+++ b/site/terms.html
@@ -6,14 +6,16 @@
 <title>Terms of Service · StableBar</title>
 <meta name="description" content="The terms for using StableBar and stablebar.app: the MIT License, no warranty, and your responsibility for the packages and scripts you run.">
 <link rel="canonical" href="https://stablebar.app/terms.html">
-<meta name="theme-color" content="#15110d">
+<meta name="theme-color" content="#86cbf2">
 <link rel="icon" href="images/icon-64.png">
 <link rel="stylesheet" href="style.css">
 <script>
 document.documentElement.dataset.mode = localStorage.getItem("mode") || (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
+if (document.documentElement.dataset.mode === "dark") document.querySelector('meta[name="theme-color"]').content = "#232662";
 </script>
 </head>
-<body>
+<body class="doc">
+<a class="skip" href="#main">Skip to content</a>
 <div class="page">
   <header class="top">
     <a class="brand" href="./"><img src="images/icon-64.png" alt="">StableBar</a>

From 6fb8db060e81823043c14bb3c84fdd18e1bba37d Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 09:55:02 +0100
Subject: [PATCH 02/46] docs: keep the website's bar steady and readable when
 scrolling

The night switch showed the same crescent outlined by day and filled at night, which looks
alike at 16 points. It now shows a sun by day and a moon at night, as the old site did.

Scrolling past the headline slid the bar into the header in several visible steps: a widget
dropped into More widgets, Download grew from nothing and the menus opened late. It now fades
out, swaps in one step and fades back in, and stays the header until the headline is well
back in view, so small scrolls no longer flip it back and forth.

Once scrolled, a white strip slid in behind the bar, where its near-white tiles disappeared.
The strip now takes the colour of the sky it covers, so the bar reads as it does over the
drawing, by day and by night.
---
 site/index.html |  4 ++--
 site/main.js    | 55 +++++++++++++++++++++++++++++++++++++------------
 site/scene.js   |  2 ++
 site/style.css  | 20 ++++++++++--------
 4 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/site/index.html b/site/index.html
index 534064c9..a622fac5 100644
--- a/site/index.html
+++ b/site/index.html
@@ -62,7 +62,7 @@
   <symbol id="i-down" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="currentColor"/><path d="M8 4.2v6.6M5.2 8.2 8 11l2.8-2.8" fill="none" stroke="var(--amber)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></symbol>
   <symbol id="i-apple" viewBox="0 0 15 18"><path d="M12.5 9.6c0-2 1.6-2.9 1.7-3a3.7 3.7 0 0 0-2.9-1.6c-1.2-.1-2.4.7-3 .7-.6 0-1.6-.7-2.6-.7A3.9 3.9 0 0 0 2.4 7c-1.4 2.4-.4 6 1 7.9.7 1 1.4 2 2.4 2 1 0 1.3-.6 2.5-.6s1.5.6 2.5.6c1 0 1.7-1 2.3-1.9.7-1 1-2 1-2.1 0 0-2-.8-2-3.3ZM10.6 3.6c.5-.7.9-1.6.8-2.6-.8 0-1.8.5-2.4 1.2-.5.6-1 1.6-.8 2.5.9.1 1.8-.5 2.4-1.1Z"/></symbol>
   <symbol id="i-moon" viewBox="0 0 20 20"><path d="M16.5 12.2A7 7 0 0 1 7.8 3.5a7 7 0 1 0 8.7 8.7Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></symbol>
-  <symbol id="i-moon-fill" viewBox="0 0 20 20"><path d="M16.5 12.2A7 7 0 0 1 7.8 3.5a7 7 0 1 0 8.7 8.7Z" fill="currentColor" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></symbol>
+  <symbol id="i-sun" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><circle cx="10" cy="10" r="3.6"/><path d="M10 1.8v1.8M10 16.4v1.8M1.8 10h1.8M16.4 10h1.8M4.2 4.2l1.3 1.3M14.5 14.5l1.3 1.3M4.2 15.8l1.3-1.3M14.5 5.5l1.3-1.3"/></g></symbol>
 
   <symbol id="i-note" viewBox="0 0 16 16"><path d="M6 12.2V3.6l7-1.6v8.4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><circle cx="4.4" cy="12.2" r="1.9" fill="currentColor"/><circle cx="11.4" cy="10.4" r="1.9" fill="currentColor"/></symbol>
   <symbol id="i-open" viewBox="0 0 16 16"><path d="M5 11 11 5M6 4.6h5.4V10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></symbol>
@@ -134,7 +134,7 @@
       <div class="w" data-key="battery" data-pri="1"><svg style="width:19px"><use href="#i-bat"/></svg><span class="vh">Battery </span>82%</div>
       <div class="w num clock" data-key="clock" data-pri="5" data-format="full">Thu 22 Oct&nbsp;&nbsp;09:41</div>
       <a class="w dl" data-key="dl" data-pri="9" href="https://github.com/Seb-GRAF/StableBar/releases/download/v0.9.0/StableBar.dmg"><span><svg><use href="#i-down"/></svg>Download</span></a>
-      <button class="w moon" data-key="moon" data-pri="never" id="night" aria-label="Night" aria-pressed="false"><svg class="off" aria-hidden="true"><use href="#i-moon"/></svg><svg class="on" aria-hidden="true"><use href="#i-moon-fill"/></svg></button>
+      <button class="w moon" data-key="moon" data-pri="never" id="night" aria-label="Night" aria-pressed="false"><svg class="off" aria-hidden="true"><use href="#i-sun"/></svg><svg class="on" aria-hidden="true"><use href="#i-moon"/></svg></button>
     </div>
   </div>
 
diff --git a/site/main.js b/site/main.js
index 1c4e7200..b6c0348e 100644
--- a/site/main.js
+++ b/site/main.js
@@ -202,25 +202,44 @@ volume.addEventListener("input", () => {
   volume.style.setProperty("--v", `${volume.value}%`);
 });
 
-/* Once the page scrolls, a strip of paper slides in behind the bar. Once the headline has gone
+/* Once the page scrolls, a strip of sky slides in behind the bar. Once the headline has gone
    under it, the bar becomes the page's header. While the bar is being edited it stays the demo. */
-function dockState() {
-  dock.classList.toggle("scrolled", scrollY > 2);
-  const header = !editing && heroNote.getBoundingClientRect().bottom < restHeight() + 56;
-  if (header === dock.classList.contains("header")) return;
+let swapAt = 0;
+function wantHeader() {
+  const line = restHeight() + 56, bottom = heroNote.getBoundingClientRect().bottom;
+  // once it's the header it stays so until the headline is well back in view, so small scrolls don't flip it
+  return !editing && bottom < (dock.classList.contains("header") ? line + 120 : line);
+}
+function setHeader(header) {
   dock.classList.add("measure");
   dock.classList.toggle("header", header);
   fit();
-  dock.classList.toggle("header", !header);
   dock.offsetWidth;
   dock.classList.remove("measure");
-  dock.classList.toggle("header", header);
   if (openId) open(openId);
 }
-/* The bar measures itself again once the header's menus and Download have finished opening or closing */
-bar.addEventListener("transitionend", e => {
-  if (e.propertyName === "grid-template-columns" && e.target.matches(".site .menus, .w.dl")) fit();
-});
+/* Scrolling swaps the bar's contents in one step behind a short fade, as macOS swaps an app's menus,
+   instead of letting widgets slide over one another. Editing, resizing and loading swap at once. */
+function dockState(fade = false) {
+  dock.classList.toggle("scrolled", scrollY > 2);
+  if (swapAt && fade) return;
+  swapAt = 0;
+  bar.classList.remove("swap");
+  const header = wantHeader();
+  if (header === dock.classList.contains("header")) return;
+  if (!fade || reduce.matches) return setHeader(header);
+  // fade out, then swap on the first frame after the fade (frames, not a timer, so a busy page can't hold it)
+  bar.classList.add("swap");
+  const at = swapAt = performance.now() + 130;
+  const step = now => {
+    if (swapAt !== at) return;
+    if (now < at) return requestAnimationFrame(step);
+    swapAt = 0;
+    setHeader(wantHeader());
+    bar.classList.remove("swap");
+  };
+  requestAnimationFrame(step);
+}
 
 /* Edit Bar in Place: the bar becomes its own editor, as in the app. Each position gets a tray,
    widgets keep their look, − takes one off, + adds one where it sits, and Undo and Done wait below. */
@@ -836,8 +855,18 @@ try {
 root.classList.toggle("has-scene", Boolean(scene));
 
 if (scene) {
+  /* The strip behind the bar takes the colour of the sky it covers, so the bar reads over it as it does over the drawing */
+  let lastSky = "";
+  const lum = h => [1, 3, 5].map(i => parseInt(h.slice(i, i + 2), 16) / 255).map(c => c <= .03928 ? c / 12.92 : ((c + .055) / 1.055) ** 2.4).reduce((a, c, i) => a + c * [.2126, .7152, .0722][i], 0);
+  const skyStrip = s => {
+    const sky = s.sky?.();
+    if (!sky || sky === lastSky) return;
+    lastSky = sky;
+    dock.style.setProperty("--strip", sky);
+    dock.dataset.sky = lum(sky) < .18 ? "dark" : "light";
+  };
   scene.onFrame = s => {
-    try { lightWords(s); } catch (err) {
+    try { lightWords(s); skyStrip(s); } catch (err) {
       if (!sceneFailed) { sceneFailed = true; console.warn("The drawing failed:", err); }
     }
   };
@@ -989,7 +1018,7 @@ addEventListener("scroll", () => {
   queued = true;
   requestAnimationFrame(() => {
     queued = false;
-    dockState();
+    dockState(true);
     updateDusk();
     lumRects = null;
   });
diff --git a/site/scene.js b/site/scene.js
index a3de7dbd..68fc4c05 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -272,6 +272,8 @@ class Scene {
   }
   beamI() { return Math.max(0.3 + 0.7 * smooth(0.22, 0.72, this.d), this.pres.install); }
   lamp() { return { x: this.g.lamp.x + this.ox, y: this.g.lamp.y + this.oy }; }
+  // the colour of the sky at the top of the drawing right now, as #rrggbb
+  sky() { const c = this.P?.sky; return c ? '#' + c.map(v => Math.round(v).toString(16).padStart(2, '0')).join('') : null; }
 
   /* ----- input, in client coordinates ----- */
   pointer(x, y, kind = 'mouse') {
diff --git a/site/style.css b/site/style.css
index 5e780b98..8948d3d3 100644
--- a/site/style.css
+++ b/site/style.css
@@ -40,7 +40,7 @@
   --sky: #86cbf2;
   --sea: #2e58d8;
   --screen: #86cbf2;
-  --strip: #ffffff;
+  --strip: var(--sky);
   /* the bar keeps the site's amber Download */
   --amber: #f5821f;
   --amber-ink: #1b1007;
@@ -70,7 +70,6 @@
   --sky: #232662;
   --sea: #14184a;
   --screen: #2f3374;
-  --strip: #1c1e4e;
   --win-bg: #1e1d1c;
   --win-fg: #f5f5f7;
   --win-ring: #000;
@@ -132,7 +131,7 @@ main { overflow-x: clip; }
 [data-mode="light"] [data-theme="phosphor"] { --strip-bg: #f6f1e6ee; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --w-glow: none; --fg: #5c3a00; --muted: #87683b; --accent: #a86400; --accent-text: #f6f1e6; --ws-off: #87683b; --ws-ind: #5c3a00; --ws-on: #f6f1e6; --pop-bg: #f6f1e6ee; --pop-border: #5c3a0040; --raised: #ebe2cf; --track: #5c3a0026; }
 
 /* The dock holds the bar and its popups at the top of the window, for the whole page.
-   Once the page scrolls, a strip of paper slides in behind it so text never runs under its widgets. */
+   Once the page scrolls, a strip of sky slides in behind it so text never runs under its widgets. */
 .dock { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--bar-h); }
 [data-mode="dark"] .dock { color-scheme: dark; --ring: #ffe04a; }
 .dock::before {
@@ -140,7 +139,9 @@ main { overflow-x: clip; }
   background: var(--rule) left bottom / 160px 10px repeat-x, linear-gradient(var(--strip) 0 0) top / 100% calc(100% - 5px) no-repeat;
   opacity: 0; translate: 0 -6px; transition: opacity .25s, translate .3s var(--ease);
 }
-[data-mode="dark"] .dock::before { background-image: var(--rule-night), linear-gradient(var(--strip) 0 0); }
+/* The strip is the colour of the sky behind it (set by main.js); its pen line turns light when the sky is dark */
+[data-mode="dark"] .dock::before, .dock[data-sky="dark"]::before { background-image: var(--rule-night), linear-gradient(var(--strip) 0 0); }
+.dock[data-sky="light"]::before { background-image: var(--rule), linear-gradient(var(--strip) 0 0); }
 .dock.scrolled::before { opacity: 1; translate: none; }
 
 .bar {
@@ -152,6 +153,9 @@ main { overflow-x: clip; }
   transition: background .25s, border-radius .25s, margin .25s var(--ease), height .25s var(--ease);
 }
 .bar .g { display: flex; align-items: center; gap: 6px; min-width: 0; }
+/* Becoming the header: the widgets fade out, swap in one step and fade back in (see dockState in main.js) */
+.bar .g { transition: opacity .13s ease; }
+.bar.swap .g { opacity: 0; }
 .w {
   flex: none; height: var(--tile-h); display: flex; align-items: center; gap: 7px; padding: 0 10px; white-space: nowrap;
   background: var(--w-bg); box-shadow: inset 0 0 0 1px var(--w-border), 0 1px 3px var(--w-shadow); border-radius: var(--w-radius);
@@ -223,17 +227,15 @@ main { overflow-x: clip; }
 .header .w.site { display: flex; }
 .site .menus a { color: var(--fg); }
 .site .menus a:hover { color: var(--accent); }
-.header .site .menus { grid-template-columns: 1fr; transition-delay: .1s; }
-@starting-style { .header .site .menus { grid-template-columns: 0fr; } }
+.header .site .menus { grid-template-columns: 1fr; }
 .w.dl {
   padding: 0; display: grid; grid-template-columns: 0fr; margin-left: -6px; opacity: 0; visibility: hidden;
   background: var(--amber); box-shadow: none; color: var(--amber-ink); font-weight: 600;
-  transition: grid-template-columns .4s var(--ease), margin .4s var(--ease), opacity .3s, visibility 0s .4s;
 }
-.w.dl > span { overflow: hidden; display: flex; align-items: center; gap: 6px; padding: 0; transition: padding .4s var(--ease); }
+.w.dl > span { overflow: hidden; display: flex; align-items: center; gap: 6px; padding: 0; }
 .w.dl svg { width: 16px; height: 16px; }
 .w.dl:hover { background: #ff9233; }
-.header .w.dl { grid-template-columns: 1fr; margin-left: 0; opacity: 1; visibility: visible; transition-delay: 0s; }
+.header .w.dl { grid-template-columns: 1fr; margin-left: 0; opacity: 1; visibility: visible; }
 .header .w.dl > span { padding: 0 11px 0 8px; }
 .measure * { transition: none !important; }
 

From 8805a9b57de0d564a68afd1b860d89c4046b8770 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 09:59:42 +0100
Subject: [PATCH 03/46] docs: draw the website's header Download like the
 page's button

The Download widget that joins the bar once it becomes the header still used the old site's
amber and the system font. It now matches the page's Download button at bar size: the
highlighter yellow, the display handwriting, a felt-pen outline printed a little off it that
boils with the others, and the same tilt on hover.
---
 site/index.html |  2 +-
 site/main.js    |  6 +++---
 site/style.css  | 20 ++++++++++++--------
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/site/index.html b/site/index.html
index a622fac5..a78e4a4a 100644
--- a/site/index.html
+++ b/site/index.html
@@ -59,7 +59,7 @@
   <symbol id="i-bat" viewBox="0 0 20 16"><rect x="1" y="4" width="16" height="8" rx="2.2" fill="none" stroke="currentColor" stroke-width="1.3"/><rect x="2.8" y="5.8" width="10.4" height="4.4" rx="1" fill="currentColor"/><path d="M18.6 6.8v2.4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></symbol>
   <symbol id="i-snd" viewBox="0 0 16 16"><path d="M2.5 6h2.4L8.5 3v10L4.9 10H2.5z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/><path d="M10.6 5.6a3.4 3.4 0 0 1 0 4.8M12.4 3.8a6 6 0 0 1 0 8.4" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></symbol>
   <symbol id="i-disk" viewBox="0 0 16 16"><rect x="1.5" y="4.5" width="13" height="7" rx="1.8" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="11.6" cy="8" r=".9" fill="currentColor"/><path d="M4 8h4" stroke="currentColor" stroke-width="1.2"/></symbol>
-  <symbol id="i-down" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="currentColor"/><path d="M8 4.2v6.6M5.2 8.2 8 11l2.8-2.8" fill="none" stroke="var(--amber)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+  <symbol id="i-down" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="currentColor"/><path d="M8 4.2v6.6M5.2 8.2 8 11l2.8-2.8" fill="none" stroke="var(--hi)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></symbol>
   <symbol id="i-apple" viewBox="0 0 15 18"><path d="M12.5 9.6c0-2 1.6-2.9 1.7-3a3.7 3.7 0 0 0-2.9-1.6c-1.2-.1-2.4.7-3 .7-.6 0-1.6-.7-2.6-.7A3.9 3.9 0 0 0 2.4 7c-1.4 2.4-.4 6 1 7.9.7 1 1.4 2 2.4 2 1 0 1.3-.6 2.5-.6s1.5.6 2.5.6c1 0 1.7-1 2.3-1.9.7-1 1-2 1-2.1 0 0-2-.8-2-3.3ZM10.6 3.6c.5-.7.9-1.6.8-2.6-.8 0-1.8.5-2.4 1.2-.5.6-1 1.6-.8 2.5.9.1 1.8-.5 2.4-1.1Z"/></symbol>
   <symbol id="i-moon" viewBox="0 0 20 20"><path d="M16.5 12.2A7 7 0 0 1 7.8 3.5a7 7 0 1 0 8.7 8.7Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></symbol>
   <symbol id="i-sun" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><circle cx="10" cy="10" r="3.6"/><path d="M10 1.8v1.8M10 16.4v1.8M1.8 10h1.8M16.4 10h1.8M4.2 4.2l1.3 1.3M14.5 14.5l1.3 1.3M4.2 15.8l1.3-1.3M14.5 5.5l1.3-1.3"/></g></symbol>
diff --git a/site/main.js b/site/main.js
index b6c0348e..5f812d64 100644
--- a/site/main.js
+++ b/site/main.js
@@ -908,7 +908,7 @@ if (scene) {
 /* ---------- The pen: every note, Download button, tag and key button gets a felt-pen outline,
    drawn at its size in three slightly different states that the CSS steps through (the boil).
    Inline SVG paths rather than images, so an outline never counts as the page's largest paint. ---------- */
-const INK = ".note, .cta, .tag, .keys button";
+const INK = ".note, .cta, .tag, .keys button, .w.dl";
 const hash = n => { const s = Math.sin(n * 127.1 + 311.7) * 43758.5453; return s - Math.floor(s); };
 const noise = x => { const i = Math.floor(x), f = x - i, u = f * f * (3 - 2 * f); return (hash(i) + (hash(i + 1) - hash(i)) * u) * 2 - 1; };
 const r1 = v => Math.round(v * 10) / 10;
@@ -976,11 +976,11 @@ function ink(el, seed) {
   const W = el.offsetWidth, H = el.offsetHeight;
   if (!W || !H || el.dataset.inkSize === `${W}x${H}`) return;
   el.dataset.inkSize = `${W}x${H}`;
-  const shape = el.dataset.ink === "torn" ? "torn" : el.matches(".cta, .keys button") ? "pill" : "rect";
+  const shape = el.dataset.ink === "torn" ? "torn" : el.matches(".cta, .keys button, .w.dl") ? "pill" : "rect";
   const cs = getComputedStyle(el);
   const radii = shape === "pill" ? [H / 2, H / 2, H / 2, H / 2]
     : [cs.borderTopLeftRadius, cs.borderTopRightRadius, cs.borderBottomRightRadius, cs.borderBottomLeftRadius].map(v => parseFloat(v) || 0);
-  const weight = el.matches(".note") ? 2.9 : 2.5;
+  const weight = el.matches(".note") ? 2.9 : el.matches(".w.dl") ? 2.1 : 2.5;
   let svg = el.querySelector(":scope > .pen");
   if (!svg) {
     svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
diff --git a/site/style.css b/site/style.css
index 8948d3d3..4822af93 100644
--- a/site/style.css
+++ b/site/style.css
@@ -41,9 +41,8 @@
   --sea: #2e58d8;
   --screen: #86cbf2;
   --strip: var(--sky);
-  /* the bar keeps the site's amber Download */
+  /* the ring around the widget a script makes */
   --amber: #f5821f;
-  --amber-ink: #1b1007;
   /* the app's windows: Add here, the right-click menu, the Store */
   --win-bg: #f4f2ef;
   --win-fg: #1d1d1f;
@@ -228,15 +227,20 @@ main { overflow-x: clip; }
 .site .menus a { color: var(--fg); }
 .site .menus a:hover { color: var(--accent); }
 .header .site .menus { grid-template-columns: 1fr; }
+/* The header's Download is the page's own button at bar size: the highlighter yellow, the display hand
+   and a felt-pen outline printed a little off it (drawn by main.js, as on the page's other buttons) */
 .w.dl {
-  padding: 0; display: grid; grid-template-columns: 0fr; margin-left: -6px; opacity: 0; visibility: hidden;
-  background: var(--amber); box-shadow: none; color: var(--amber-ink); font-weight: 600;
+  --ox: -2px; --oy: -2px;
+  position: relative; isolation: isolate; padding: 0; display: grid; grid-template-columns: 0fr; margin-left: -6px; opacity: 0; visibility: hidden;
+  border-radius: 999px; background: var(--hi); box-shadow: none; filter: none; color: #111;
+  font: 800 13.5px/1 var(--display); font-variation-settings: "INFM" 70, "BNCE" 25; letter-spacing: .01em;
+  transition: rotate .2s var(--ease), background-color .2s;
 }
 .w.dl > span { overflow: hidden; display: flex; align-items: center; gap: 6px; padding: 0; }
-.w.dl svg { width: 16px; height: 16px; }
-.w.dl:hover { background: #ff9233; }
-.header .w.dl { grid-template-columns: 1fr; margin-left: 0; opacity: 1; visibility: visible; }
-.header .w.dl > span { padding: 0 11px 0 8px; }
+.w.dl svg:not(.pen) { width: 16px; height: 16px; }
+.w.dl:hover { background: #ffb547; rotate: -2deg; }
+.header .w.dl { grid-template-columns: 1fr; margin-left: 2px; opacity: 1; visibility: visible; }
+.header .w.dl > span { padding: 0 12px 0 8px; }
 .measure * { transition: none !important; }
 
 /* The center position shows only when a widget sits there */

From c6a65c4975dc5c0a88d28be3d0511d41f38e6c6b Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 10:58:57 +0100
Subject: [PATCH 04/46] docs: let the website's lighthouse play with the bar

Three small games between the drawing and the demo bar, all decorative:

- Keepy-uppy: a click on the lighthouse, or the key's new Play ball, sends its pom-pom up
  at the bar. Widgets hop when it hits them, a workspace it hits gets focused, the pointer
  aims the next bounce, and the rally ends with a splash in the sea and a new pom-pom.
- Pointing at a widget lights it from below and hangs a paper tag under it, such as
  "the keeper is late" under the calendar. Keyboard focus shows the same tag.
- Left alone for a while, once per visit, the lighthouse nudges a widget aside and chuckles,
  then puts it back, whistling, when the visitor moves.

None of them changes the bar for good or runs while it's being edited. Under reduced motion
only the tags remain. The scene's idle timers now also start when the page loads quickly.
---
 site/index.html |   3 +
 site/main.js    | 171 ++++++++++++++++++-
 site/scene.js   | 444 +++++++++++++++++++++++++++++++++++++++++++++---
 site/style.css  |  30 +++-
 4 files changed, 611 insertions(+), 37 deletions(-)

diff --git a/site/index.html b/site/index.html
index a78e4a4a..2a421f08 100644
--- a/site/index.html
+++ b/site/index.html
@@ -104,6 +104,7 @@
   <symbol id="k-sheep" viewBox="0 0 32 24"><g stroke="#111" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 20v3M13 20.5v2.8M18 20.5v2.8M22 20v3" fill="none"/><path d="M6.4 16.4c-3-.4-3.6-4.4-.8-5.4-.2-3.2 3.6-4.6 5.4-2.6 1.4-3 6-3 7.2-.2 2.8-1.2 5.6 1.2 4.6 3.8 2.4 1 1.8 5-1.2 5 .2 2.6-4.4 3.4-6 1.4-1.6 2-6.4 1.8-7-.8-.8.2-1.6.1-2.2-.2Z" fill="#fff"/><path d="M23.4 9.2c1.6-1.4 4.4-1 5.4.8 1 1.8.2 4.4-1.8 5-1.8.6-3.6-.2-4.2-1.8" fill="#111"/><path d="M24 9.4c-.8-.9-2.2-1-2.8-.2" fill="none"/></g><circle cx="26.6" cy="11.2" r=".9" fill="#fff"/></symbol>
   <symbol id="k-duck" viewBox="0 0 32 24"><g stroke="#111" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 13.4c.6 5 5 7.6 11.4 7.6 6.6 0 10.8-2.6 11.2-6.6.2-2.2-1.6-3.2-3.6-2.4-1.6.6-3.2.2-4.2-1.2-1.6 2-5.2 2.8-8.4 2.4-2.6-.4-4.8-.8-6.4.2Z" fill="#ffe04a"/><circle cx="19.4" cy="7.4" r="4.6" fill="#ffe04a"/><path d="M23.6 7.6c1.8-.6 3.8 0 4.8 1.2-1.3 1-3.3 1.3-4.9.7" fill="#ff8a3d"/><path d="M9.6 14.6c2 1.6 5.2 1.5 6.8-.4" fill="none"/></g><circle cx="20.6" cy="6.4" r="1" fill="#111"/></symbol>
   <symbol id="k-moon" viewBox="0 0 32 24"><g stroke="#111" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 3A9 9 0 1 0 24.2 15.8 7.5 7.5 0 0 1 16.5 3Z" fill="#ffe04a"/><path d="M11.6 11.4q1.4 1.2 2.8 0M12.4 16.4q1.6.9 3 0" fill="none"/></g><path d="M26.5 4.5v3M25 6h3M28.5 10.5v2M27.5 11.5h2" stroke="#111" stroke-width="1.3" stroke-linecap="round"/></symbol>
+  <symbol id="k-ball" viewBox="0 0 32 24"><g stroke="#111" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 9.4h6M3.6 13.6h5.6M5.4 17.6h4.2" fill="none"/><path d="M28.7 11.6Q28.7 12.8 28.4 13.3Q28.1 13.8 27.8 14.3Q27.5 14.8 27.5 15.4Q27.4 16 27.1 16.5Q26.7 17 26.2 17.3Q25.7 17.6 25.2 17.9Q24.7 18.1 24.3 18.6Q23.9 19 23.4 19.3Q22.8 19.5 22.2 19.5Q21.6 19.5 21.1 19.4Q20.5 19.3 19.9 19.5Q19.3 19.7 18.8 19.6Q18.2 19.5 17.7 19.2Q17.2 18.8 16.8 18.5Q16.3 18.1 15.7 17.9Q15.1 17.8 14.7 17.4Q14.3 17 14 16.5Q13.8 15.9 13.6 15.4Q13.5 14.8 13.1 14.4Q12.7 13.9 12.5 13.3Q12.3 12.8 12.4 12.2Q12.5 11.6 12.7 11Q12.8 10.5 12.7 9.9Q12.7 9.3 12.8 8.7Q13 8.2 13.4 7.7Q13.8 7.3 14.2 6.9Q14.6 6.5 14.9 6Q15.1 5.4 15.6 5Q16 4.6 16.6 4.5Q17.2 4.4 17.8 4.3Q18.3 4.2 18.8 3.8Q19.3 3.5 19.9 3.4Q20.5 3.3 21.1 3.5Q21.6 3.7 22.2 3.9Q22.7 4.2 23.3 4.2Q23.9 4.2 24.4 4.4Q25 4.6 25.3 5.1Q25.7 5.6 26 6.1Q26.4 6.5 26.9 6.9Q27.4 7.2 27.7 7.7Q28 8.2 28.1 8.8Q28.1 9.4 28.2 9.9Q28.2 10.5 28.4 11Q28.7 11.6 28.7 12.2Z" fill="#fff"/><path d="M24.4 12.9A3.2 2.7 0 0 1 20.3 15M16.9 8.8A1.6 1.6 0 0 1 18.5 7.2" fill="none" stroke-width="1.3"/></g></symbol>
   <symbol id="k-arrow" viewBox="0 0 160 40"><path d="M150 37C138 8 52 0 16 31" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" vector-effect="non-scaling-stroke"/><path d="M10 19.5 15.5 32l12-3" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"/></symbol>
 </svg>
 
@@ -198,6 +199,7 @@
     <button class="b" id="edit-undo" aria-label="Undo bar change" title="Undo (⌘Z)" disabled>Undo</button>
     <button class="b done" id="edit-done" aria-label="Finish editing the bar" title="Finish editing the bar (Esc)">Done</button>
   </div>
+  <div class="lamp-tag" id="lamp-tag" aria-hidden="true" hidden><span class="lt-p"><span class="lt-t"></span></span><svg class="lt-s"><path class="h"/><path class="k"/></svg></div>
   <div class="addpop" id="addpop" role="dialog" aria-label="Add here" hidden></div>
   <div class="ctx" id="ctx" role="menu" hidden></div>
   <p class="vh" id="edit-help">Drag it, or use the Left and Right arrow keys, to move it. Delete removes it.</p>
@@ -225,6 +227,7 @@ <h1 id="h-hero"><span class="lumen">A</span> <span class="lumen">native,</span>
         <button type="button" data-drop="sheep"><svg aria-hidden="true"><use href="#k-sheep"/></svg>Drop a sheep</button>
         <button type="button" data-drop="duck"><svg aria-hidden="true"><use href="#k-duck"/></svg>Drop a duck</button>
         <button type="button" class="night" aria-pressed="false"><svg aria-hidden="true"><use href="#k-moon"/></svg>Night</button>
+        <button type="button" data-play><svg aria-hidden="true"><use href="#k-ball"/></svg>Play ball</button>
       </div>
       <p class="key-or"><span class="mouse">Or click the hill or the sea.</span><span class="touch">Or tap the hill or the sea.</span></p>
     </div>
diff --git a/site/main.js b/site/main.js
index 5f812d64..9efd8dcd 100644
--- a/site/main.js
+++ b/site/main.js
@@ -89,7 +89,7 @@ function fit() {
   const widgets = [...bar.querySelectorAll("[data-pri]")].filter(w => w.dataset.pri !== "never");
   widgets.forEach(w => w.classList.remove("over"));
   more.hidden = true;
-  if (editing) { fades(); return; }
+  if (editing) { fades(); sendBar(); return; }
   const order = widgets.map((w, i) => ({ w, p: Number(w.dataset.pri), i })).sort((a, b) => a.p - b.p || b.i - a.i).map(o => o.w);
   const shown = order.filter(w => w.offsetWidth > 0);
   for (const w of shown) {
@@ -108,8 +108,32 @@ function fit() {
   }
   place();
   slide();
+  sendBar();
 }
 
+/* The bar's visible widgets, for the lighthouse's ball game (scene.setBar): each workspace number is
+   its own target, and the ball bounces on the line under them: the widgets' bottom edge, the bar's
+   when it has a strip, or the strip's pen line once the page has scrolled. Measured when the bar
+   changes (fit, the header swap, resizing, themes, scrolling past the top), never every frame. */
+function barTargets() {
+  if (editing) return [];
+  // from the theme's tokens rather than the bar's box, which may still be easing into a new theme
+  const cs = getComputedStyle(bar), strip = cs.getPropertyValue("--strip-bg").trim() !== "transparent";
+  const line = dock.classList.contains("scrolled") ? restHeight() + 3.5 : strip ? restHeight() - (parseFloat(cs.getPropertyValue("--strip-m")) || 0) : null;
+  const out = [];
+  const add = (key, el) => {
+    const r = el.getBoundingClientRect();
+    if (r.width > 3 && r.right > 0 && r.left < innerWidth) out.push({ key, x0: r.left, x1: r.right, y: line ?? r.bottom });
+  };
+  for (const w of bar.querySelectorAll(":scope > .g > .w[data-key]")) {
+    if (w.hidden || w.classList.contains("over") || getComputedStyle(w).visibility === "hidden") continue;
+    if (w.dataset.key === "ws") for (const b of w.querySelectorAll(".wsi")) add(`ws:${b.dataset.ws}`, b);
+    else add(w.dataset.key, w);
+  }
+  return out;
+}
+function sendBar() { if (scene) S("setBar", barTargets()); }
+
 /* Popups open below their widget, or from More widgets when the widget is hidden */
 function anchorFor(id) {
   if (id === "more") return more;
@@ -133,6 +157,7 @@ const popButton = w => w.matches("button") ? w : w.querySelector(":scope > butto
 /* Opening another widget's popup morphs the open one into it, as the app does */
 function open(id) {
   if (id !== openId && anchorFor(id).hidden) return;
+  hideTour();
   const from = openId;
   openId = openId === id ? null : id;
   pop.classList.toggle("morph", Boolean(from && openId));
@@ -201,6 +226,8 @@ volume.addEventListener("input", () => {
   sound.querySelector(".pct").textContent = `${volume.value}%`;
   volume.style.setProperty("--v", `${volume.value}%`);
 });
+/* Those two change the widgets' widths, and a new theme the bar's height: the ball game measures the bar again once they settle */
+bar.addEventListener("transitionend", e => { if ((e.propertyName === "grid-template-columns" || e.target === bar && e.propertyName === "height") && !editing) sendBar(); });
 
 /* Once the page scrolls, a strip of sky slides in behind the bar. Once the headline has gone
    under it, the bar becomes the page's header. While the bar is being edited it stays the demo. */
@@ -211,6 +238,7 @@ function wantHeader() {
   return !editing && bottom < (dock.classList.contains("header") ? line + 120 : line);
 }
 function setHeader(header) {
+  hideTour();
   dock.classList.add("measure");
   dock.classList.toggle("header", header);
   fit();
@@ -221,7 +249,10 @@ function setHeader(header) {
 /* Scrolling swaps the bar's contents in one step behind a short fade, as macOS swaps an app's menus,
    instead of letting widgets slide over one another. Editing, resizing and loading swap at once. */
 function dockState(fade = false) {
-  dock.classList.toggle("scrolled", scrollY > 2);
+  if (dock.classList.contains("scrolled") !== scrollY > 2) {
+    dock.classList.toggle("scrolled", scrollY > 2);
+    sendBar();
+  }
   if (swapAt && fade) return;
   swapAt = 0;
   bar.classList.remove("swap");
@@ -287,6 +318,7 @@ function beginEditing(from) {
   if (openId) open(openId);
   closeMenu();
   opener = from || (bar.contains(document.activeElement) ? document.activeElement : null);
+  hideTour();
   editing = true;
   dockState();
   past = [];
@@ -866,7 +898,7 @@ if (scene) {
     dock.dataset.sky = lum(sky) < .18 ? "dark" : "light";
   };
   scene.onFrame = s => {
-    try { lightWords(s); skyStrip(s); } catch (err) {
+    try { lightWords(s); skyStrip(s); if (lit && s.playing) hideTour(); } catch (err) {
       if (!sceneFailed) { sceneFailed = true; console.warn("The drawing failed:", err); }
     }
   };
@@ -901,14 +933,136 @@ if (scene) {
     S("tap", e.clientX, e.clientY);
   });
 
-  /* The key's buttons drop the same surprises, for keyboards and screen readers too */
+  /* The key's buttons drop the same surprises, for keyboards and screen readers too; Play ball starts the game */
   for (const b of document.querySelectorAll("[data-drop]")) b.addEventListener("click", () => S("surprise", b.dataset.drop));
+  for (const b of document.querySelectorAll("[data-play]")) b.addEventListener("click", () => { hideTour(); S("play"); });
+  scene.onBar = onBar;
+}
+
+/* ---------- The lighthouse plays with the bar ----------
+   The ball hits a widget and it hops; a workspace number also takes the focus, as a click would, which lights
+   its beach hut. The bored lighthouse shoves one widget aside and puts it back. Nothing else changes:
+   Download never navigates, the night switch never toggles, and every hop is gone in half a second. */
+const widgetFor = key => key.startsWith("ws:") ? bar.querySelector(`#gl .wsi[data-ws="${key.slice(3)}"]`) : bar.querySelector(`:scope > .g > .w[data-key="${CSS.escape(key)}"]`);
+let shove = null;
+function unshove(quick) {
+  const s = shove;
+  if (!s) return;
+  shove = null;
+  if (!reduce.matches && s.el.isConnected) s.el.animate([{ transform: s.to }, { transform: "none" }], { duration: quick ? 240 : 760, easing: quick ? "cubic-bezier(.3, 0, .2, 1)" : "cubic-bezier(.45, 0, .25, 1)" }).finished.then(() => { if (shove?.el !== s.el) s.el.style.zIndex = ""; }, () => {});
+  else s.el.style.zIndex = "";
+  s.a.cancel();
+}
+function onBar(event, key, info = {}) {
+  if (event === "release") return unshove(info.caught);
+  const el = !editing && widgetFor(key);
+  if (!el) return;
+  if (event === "bump") {
+    if (key.startsWith("ws:")) focusWorkspace(Number(key.slice(3)));
+    if (!reduce.matches) el.animate([
+      { transform: "none" },
+      { transform: "translateY(-6px) rotate(-3deg)", offset: .26, easing: "ease-in" },
+      { transform: "translateY(1px) scale(1.04, .94)", offset: .52 },
+      { transform: "translateY(-1.5px) rotate(.6deg)", offset: .74 },
+      { transform: "none" },
+    ], { duration: 520, easing: "ease-out" });
+  } else if (event === "nudge" && !reduce.matches) {
+    unshove(true);
+    const dx = info.dx || 14, to = `translateX(${dx}px) rotate(${Math.sign(dx) * 3}deg)`;
+    el.style.zIndex = "3";
+    shove = { el, to, a: el.animate([{ transform: "none" }, { transform: to }], { duration: 620, easing: "cubic-bezier(.3, 1.5, .5, 1)", fill: "forwards" }) };
+  }
+}
+
+/* The lamp-lit tour, for pointers that hover: the widget under the pointer takes the lamp's glow (the beam
+   already follows the pointer) and a paper tag hangs under it on a string. Keyboard focus shows it too.
+   It waits while the ball is in play, and never shows while editing, dragging or a popup is open. */
+const tag = document.getElementById("lamp-tag");
+const tagPaper = tag.querySelector(".lt-p"), tagText = tag.querySelector(".lt-t"), tagString = [...tag.querySelectorAll(".lt-s path")];
+const TAGS = {
+  ws: "four little rooms", apple: "still there", app: "Finder’s, for now", site: "this website, dressed as an app",
+  np: "the lighthouse hums along", meeting: "the keeper is late", system: "all calm", sound: "shh, the sheep are asleep",
+  battery: "the lamp runs on oil", clock: "always on time, unlike the keeper", dl: "the only serious button",
+  moon: "the lamp’s favourite", more: "the ones that didn’t fit",
+};
+const canHover = matchMedia("(hover: hover)");
+let lit = null, tourShow = 0, tourHide = 0;
+const tourWidget = el => { const w = el?.closest?.(".w[data-key]"); return w && bar.contains(w) && !w.closest(".lane") && TAGS[w.dataset.key] ? w : null; };
+const tourOK = () => scene && !editing && !openId && !drag && !adding && ctx.hidden && !scene.playing && !bar.classList.contains("swap");
+function showTour(w) {
+  clearTimeout(tourShow);
+  clearTimeout(tourHide);
+  if (!tourOK()) return;
+  const again = Boolean(lit);
+  lit?.classList.remove("lamp");
+  lit = w;
+  w.classList.add("lamp");
+  tagText.textContent = TAGS[w.dataset.key];
+  tagPaper.style.setProperty("--r", `${(w.dataset.key.length * 7 % 5 - 2) * .7}deg`);
+  tag.hidden = false;
+  placeTag();
+  if (!reduce.matches) tag.animate(again
+    ? [{ transform: "rotate(7deg)" }, { transform: "rotate(-3deg)", offset: .45 }, { transform: "none" }]
+    : [{ transform: "rotate(-16deg)", opacity: 0 }, { transform: "rotate(10deg)", opacity: 1, offset: .28 }, { transform: "rotate(-5deg)", offset: .52 }, { transform: "rotate(2deg)", offset: .76 }, { transform: "none" }],
+  { duration: again ? 420 : 850, easing: "ease-out" });
+}
+/* The tag hangs from the middle of the widget's bottom edge; the paper keeps inside the window and the
+   string goes through a hole above the widget, wherever the paper ends up */
+function placeTag() {
+  const r = lit.getBoundingClientRect(), cx = r.left + r.width / 2, len = 13, pw = tagPaper.offsetWidth;
+  const left = clamp(cx - pw / 2, 8, innerWidth - pw - 8) - cx, hole = clamp(-left, 14, pw - 14);
+  tag.style.left = `${cx}px`;
+  tag.style.top = `${r.bottom - 1}px`;
+  tagPaper.style.left = `${left}px`;
+  tagPaper.style.top = `${len}px`;
+  tagPaper.style.setProperty("--hole", `${hole}px`);
+  const hx = left + hole, hy = len + 7.5;
+  for (const p of tagString) p.setAttribute("d", `M0 -1C${hx * .2 + 1.8} ${hy * .4} ${hx * .75 - 1.4} ${hy * .62} ${hx} ${hy}`);
+}
+function hideTour() {
+  clearTimeout(tourShow);
+  clearTimeout(tourHide);
+  if (!lit) return;
+  lit.classList.remove("lamp");
+  lit = null;
+  tag.hidden = true;
+}
+bar.addEventListener("pointerover", e => {
+  if (e.pointerType === "touch" || !canHover.matches) return;
+  const w = tourWidget(e.target);
+  if (!w) return;
+  clearTimeout(tourHide);
+  if (w === lit) return;
+  clearTimeout(tourShow);
+  if (lit) showTour(w);
+  else tourShow = setTimeout(() => showTour(w), 240);
+});
+bar.addEventListener("pointerout", e => {
+  const w = tourWidget(e.target);
+  if (!w || w.contains(e.relatedTarget)) return;
+  clearTimeout(tourShow);
+  if (w === lit) tourHide = setTimeout(hideTour, 140);
+});
+bar.addEventListener("focusin", e => { const w = tourWidget(e.target); if (w && e.target.matches(":focus-visible")) showTour(w); });
+bar.addEventListener("focusout", e => { if (lit && !lit.contains(e.relatedTarget) && !lit.matches(":hover")) hideTour(); });
+
+/* The bored lighthouse: once a visit, after a quiet spell with no pointer, scroll or key, and nothing open.
+   The scene checks the rest (motion allowed, the lamp in view, no game on); any input catches it. */
+let boredTimer = 0, boredDone = false;
+function quietSpell() {
+  clearTimeout(boredTimer);
+  if (!scene || boredDone) return;
+  boredTimer = setTimeout(function check() {
+    const calm = !editing && !openId && !adding && ctx.hidden && !reviewing && !lit && !document.hidden && !reduce.matches;
+    if (calm && S("bored")) boredDone = true;
+    else boredTimer = setTimeout(check, 4000);
+  }, 12000);
 }
 
 /* ---------- The pen: every note, Download button, tag and key button gets a felt-pen outline,
    drawn at its size in three slightly different states that the CSS steps through (the boil).
    Inline SVG paths rather than images, so an outline never counts as the page's largest paint. ---------- */
-const INK = ".note, .cta, .tag, .keys button, .w.dl";
+const INK = ".note, .cta, .tag, .keys button, .w.dl, .lt-p";
 const hash = n => { const s = Math.sin(n * 127.1 + 311.7) * 43758.5453; return s - Math.floor(s); };
 const noise = x => { const i = Math.floor(x), f = x - i, u = f * f * (3 - 2 * f); return (hash(i) + (hash(i + 1) - hash(i)) * u) * 2 - 1; };
 const r1 = v => Math.round(v * 10) / 10;
@@ -980,7 +1134,7 @@ function ink(el, seed) {
   const cs = getComputedStyle(el);
   const radii = shape === "pill" ? [H / 2, H / 2, H / 2, H / 2]
     : [cs.borderTopLeftRadius, cs.borderTopRightRadius, cs.borderBottomRightRadius, cs.borderBottomLeftRadius].map(v => parseFloat(v) || 0);
-  const weight = el.matches(".note") ? 2.9 : el.matches(".w.dl") ? 2.1 : 2.5;
+  const weight = el.matches(".note") ? 2.9 : el.matches(".w.dl, .lt-p") ? 2.1 : 2.5;
   let svg = el.querySelector(":scope > .pen");
   if (!svg) {
     svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -999,7 +1153,7 @@ const pen = new ResizeObserver(entries => { for (const e of entries) ink(e.targe
 for (const el of inked) pen.observe(el);
 
 /* The boil rests after a few quiet seconds, like the drawing */
-let idleTimer = 0, lastWake = 0;
+let idleTimer = 0, lastWake = -1e9;
 function wake() {
   const now = performance.now();
   if (now - lastWake < 250) return;
@@ -1007,6 +1161,8 @@ function wake() {
   root.classList.remove("idle");
   clearTimeout(idleTimer);
   idleTimer = setTimeout(() => root.classList.add("idle"), 6000);
+  S("poke");
+  quietSpell();
 }
 for (const type of ["pointermove", "pointerdown", "keydown", "scroll", "wheel", "touchstart"]) addEventListener(type, wake, { passive: true });
 wake();
@@ -1024,6 +1180,7 @@ addEventListener("scroll", () => {
   });
 }, { passive: true });
 addEventListener("resize", () => {
+  hideTour();
   fit();
   dockState();
   measureMarks();
diff --git a/site/scene.js b/site/scene.js
index 68fc4c05..5868f5d7 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -221,6 +221,11 @@ class Scene {
     this.sprites = new Map();
     this.fontsV = 0; this.layoutV = 0; this.sparkle = -9; this.rebuilds = 0;
     this.onFrame = null;
+    // the ball game and the bored trick (see "the lighthouse plays with the bar")
+    this.bar = []; this.ball = null; this.bore = null; this.look = null;
+    this.doodles = []; this.splashes = [];
+    this.hatKick = -9; this.regrowAt = -9;
+    this.onBar = null;
     this.times = [];
     this.awake = 0; this.kick = 0; this.raf = 0; this.timer = 0; this.last = null;
     this.mq = matchMedia('(prefers-reduced-motion: reduce)');
@@ -231,7 +236,7 @@ class Scene {
     this.measure(true);
     this.ro = new ResizeObserver(() => { if (this.measure()) this.wake(); });
     this.ro.observe(host);
-    this.onVis = () => { if (document.hidden) this.sleep(); else { this.last = null; this.wake(); } };
+    this.onVis = () => { if (document.hidden) { this.endBall(); this.endBore(); this.sleep(); } else { this.last = null; this.wake(); } };
     document.addEventListener('visibilitychange', this.onVis);
     const fontsIn = () => { this.fontsV++; this.wake(); };
     if (document.fonts) {
@@ -291,17 +296,23 @@ class Scene {
       this.ripples.push({ x, y, t0: this.t, a: Math.min(1, sp / 2400) * 0.9 });
     }
     if (this.reduced) this.aim(x, y);
+    this.poke();
     this.wake();
   }
   release() { this.ptr.on = false; this.wake(); }
   tap(x, y) {
     x -= this.ox; y -= this.oy;
+    const T = this.g.lh;
+    this.poke();
+    // the lighthouse plays ball instead of catching things (and winks when it can't)
+    if (y >= this.top && Math.abs(x - T.x) < T.wB * 0.75 && y > T.hatTop - T.er * 1.6 && y < T.base) {
+      if (!this.play()) this.blink.wink = this.t;
+      this.wake();
+      return false;
+    }
     this.aim(x, y);
     this.wake();
-    const g = this.g, T = g.lh;
     if (y < this.top) return false;
-    // the lighthouse winks instead of catching things
-    if (Math.abs(x - T.x) < T.wB * 0.75 && y > T.hatTop && y < T.base) { this.blink.wink = this.t; return false; }
     this.spawn(x, y);
     return true;
   }
@@ -326,6 +337,234 @@ class Scene {
     return a;
   }
 
+  /* ----- the lighthouse plays with the bar -----
+     Keepy-uppy: the pom-pom leaves the hat, bounces off the line under a widget, comes back and is
+     headed up again, three to six times, then misses and drops into the sea. The bored trick: once,
+     when nobody has done anything for a while (the page decides), the beam shoves a widget aside.
+     The page sends the bar's widgets, animates them on onBar(event, key, info) and reads s.playing. */
+  get playing() { return Boolean(this.ball); }
+  // the bar's visible widgets, in client coordinates: { key, x0, x1, y }, y the line the ball bounces on
+  setBar(list) {
+    this.bar = (Array.isArray(list) ? list : []).filter(t => t && t.x1 > t.x0)
+      .map(t => ({ key: String(t.key), x0: t.x0 - this.ox, x1: t.x1 - this.ox, y: t.y - this.oy }));
+    if (!this.bar.length) { this.endBall(); this.endBore(); }
+    this.wake();
+  }
+  play() {
+    if (this.reduced || this.ball || document.hidden) return false;
+    const h = hatGeom(this), pr = h.pr;
+    if (!this.bar.some(t => t.y + pr < h.bob[1] - pr) || !this.seen(this.g.lamp.x, this.g.lamp.y)) return false;
+    this.endBore();
+    this.ball = { x: h.bob[0], y: h.bob[1], vx: 0, vy: 0, n: 0, max: 3 + Math.floor(Math.random() * 4), key: null, last: null, spin: 0, sq: -9 };
+    this.regrowAt = -9;
+    this.serve();
+    this.wake();
+    return !!this.ball;
+  }
+  // any input: catches the bored trick in the act
+  poke() {
+    const b = this.bore;
+    if (!b || (b.phase !== 'look' && b.phase !== 'push')) return;
+    if (b.phase === 'push') this.emit('release', b.key, { caught: true });
+    b.phase = 'caught'; b.at = this.t; b.notes = 0;
+    this.wake();
+  }
+  // the bored trick, now (the page calls it after a quiet spell; also a hook for testing). True if it started.
+  bored() {
+    if (this.reduced || this.ball || this.bore || document.hidden) return false;
+    const L = this.g.lamp, mid = t => (t.x0 + t.x1) / 2;
+    const near = this.bar.filter(t => /^(clock|meeting|battery)$/.test(t.key)).sort((a, b) => Math.abs(mid(a) - L.x) - Math.abs(mid(b) - L.x))[0];
+    if (!near || !this.seen(L.x, L.y)) return false;
+    const x = mid(near);
+    this.bore = { key: near.key, x, y: Math.max(4, this.top * 0.5), side: x < L.x ? -1 : 1, phase: 'look', at: this.t, notes: 0 };
+    this.wake();
+    return true;
+  }
+  emit(event, key, info = {}) {
+    try { this.onBar?.(event, key, info); } catch (err) { if (!this.onBarFailed) { this.onBarFailed = true; console.warn('onBar failed:', err); } }
+  }
+  // the next widget: the one nearest the pointer when it's up near the bar, otherwise another one, never the same twice
+  pick() {
+    const b = this.ball, g = this.g, h = hatGeom(this), L = g.lamp, mid = t => (t.x0 + t.x1) / 2;
+    const reach = this.bar.filter(t => t.y + h.pr < h.bob[1] - h.pr && t.x1 > 0 && t.x0 < g.W);
+    if (!reach.length) return null;
+    if (this.ptr.on && this.ptr.y < Math.max(g.top + 60 * g.u, g.H * 0.34)) {
+      const px = this.ptr.x, gap = t => px < t.x0 ? t.x0 - px : px > t.x1 ? px - t.x1 : 0;
+      return reach.slice().sort((p, q) => gap(p) - gap(q) || Math.abs(mid(p) - px) - Math.abs(mid(q) - px))[0];
+    }
+    const other = reach.filter(t => t.key !== b.last);
+    const list = other.length ? other : reach, w = list.map(t => 1 / (1 + Math.abs(mid(t) - L.x) / (500 * g.u + 200)));
+    let r = Math.random() * w.reduce((a, v) => a + v, 0);
+    for (let i = 0; i < list.length; i++) if ((r -= w[i]) <= 0) return list[i];
+    return list[list.length - 1];
+  }
+  // up from the hat to the next widget
+  serve() {
+    const b = this.ball, tg = this.pick();
+    if (!tg) return this.endBall();
+    const pr = this.g.lh.er * 0.66, span = tg.x1 - tg.x0;
+    b.key = tg.key;
+    this.leg('up', clamp((tg.x0 + tg.x1) / 2 + (Math.random() - 0.5) * span * 0.36, pr, this.g.W - pr), tg.y + pr);
+  }
+  /* One flight, along a parabola: 'up' slows down and still rises when it arrives (the bounce),
+     'down' and 'miss' speed up as they fall back, 'fall' drops freely into the sea */
+  leg(kind, bx, by, v0) {
+    const b = this.ball, R = by - b.y, T = clamp(0.4 + Math.abs(bx - b.x) / 1600, 0.42, 1);
+    const L = { kind, t0: this.t, ax: b.x, ay: b.y, bx, by, T };
+    if (kind === 'up') { const k = 0.3; L.v0 = 2 * R / (T * (1 + k)); L.g = (k - 1) * L.v0 / T; }
+    else if (kind === 'fall') {
+      const g = 1300 * this.g.u, v = Math.max(0, v0 || 0);
+      L.v0 = v; L.g = g; L.T = (-v + Math.sqrt(v * v + 2 * g * Math.max(1, R))) / g;
+    } else { L.v0 = 0.3 * R / T; L.g = 2 * (R - L.v0 * T) / (T * T); }
+    b.leg = L;
+  }
+  legAt(L, k) { return [L.ax + (L.bx - L.ax) * k / L.T, L.ay + L.v0 * k + 0.5 * L.g * k * k]; }
+  updateBall(dt) {
+    const b = this.ball;
+    if (!b) return;
+    const L = b.leg, k = Math.min(this.t - L.t0, L.T);
+    [b.x, b.y] = this.legAt(L, k);
+    b.vx = (L.bx - L.ax) / L.T; b.vy = L.v0 + L.g * k;
+    b.spin += dt * b.vx / (this.g.lh.er * 0.66) * 0.5;
+    if (this.t - L.t0 < L.T) return;
+    if (L.kind === 'up') this.hit();
+    else if (L.kind === 'down') this.header();
+    else if (L.kind === 'miss') this.fall();
+    else this.splash();
+  }
+  // the ball meets the line under a widget: the widget hops, "boink!"
+  hit() {
+    const b = this.ball, g = this.g, u = g.u, pr = g.lh.er * 0.66;
+    const tg = this.bar.find(t => t.key === b.key && b.x > t.x0 - pr && b.x < t.x1 + pr) || this.bar.find(t => b.x > t.x0 - 2 && b.x < t.x1 + 2);
+    b.sq = this.t; b.n++;
+    if (tg) {
+      b.last = tg.key;
+      this.emit('bump', tg.key);
+      // "boink!" beside it on the far side from the lighthouse, out of the way of the ball coming back;
+      // against the window's edge, under it instead
+      const side = b.x < g.lamp.x ? -1 : 1;
+      if (side < 0 ? b.x < 90 * u + 20 : b.x > g.W - 90 * u - 20) this.doodle('boink', clamp(b.x, 34 * u + 12, g.W - 34 * u - 12), b.y + pr + 14 * u + 4);
+      else this.doodle('boink', b.x + side * (pr + 4 * u), b.y + pr * 0.15, { align: side < 0 ? 'right' : 'left' });
+    }
+    const h = hatGeom(this);
+    // the last one comes back just wide of the hat, on the sea side, clear of the gallery, and keeps going
+    if (b.n >= b.max) this.leg('miss', Math.min(h.bob[0] - h.pr * 2.7, g.lamp.x - g.lh.er * 1.7 - h.pr), h.bob[1] + h.pr * 0.9);
+    else this.leg('down', h.bob[0], h.bob[1]);
+  }
+  // back on the hat: a header, "pok", and up again
+  header() {
+    const b = this.ball, u = this.g.u, pr = this.g.lh.er * 0.66, from = b.vx > 0 ? -1 : 1;
+    if (!this.seen(this.g.lamp.x, this.g.lamp.y)) return this.endBall();
+    this.hatKick = this.t; b.sq = this.t;
+    this.doodle('pok', b.x + from * (pr + 3 * u), b.y + pr * 0.3, { align: from < 0 ? 'right' : 'left', life: 0.7 });
+    this.serve();
+  }
+  // missed: the hat lunges too late, and the ball falls past the lighthouse into the sea
+  fall() {
+    const b = this.ball;
+    this.hatKick = this.t;
+    const S = b.splash = this.splashSpot();
+    this.leg('fall', S.x, S.y, b.vy);
+    // when the sea there is under the page, "plop" where the ball was last seen
+    if (!S.seen) {
+      let last = null;
+      for (let i = 1; i <= 14; i++) { const p = this.legAt(b.leg, b.leg.T * i / 14); if (!this.seen(p[0], p[1])) break; last = p; }
+      S.edge = last;
+    }
+  }
+  splash() {
+    const b = this.ball, S = b.splash, u = this.g.u;
+    if (S.seen) {
+      this.ripples.push({ x: S.x, y: S.y, t0: this.t, a: 1 });
+      this.splashes.push({ x: S.x, y: S.y, t0: this.t });
+      this.doodle('plop', S.x + 12 * u, S.y - 26 * u, { life: 1.1 });
+    } else if (S.edge) this.doodle('plop', S.edge[0] + 8 * u, S.edge[1] - 6 * u, { life: 1.1 });
+    this.look = { x: S.edge ? S.edge[0] : S.x, y: S.edge ? S.edge[1] : S.y, until: this.t + 1.2 };
+    this.ball = null;
+    this.regrowAt = this.t + 0.6;
+  }
+  // a spot in the sea near the lighthouse, on its sea side, that can be seen (a few DOM checks, once a game)
+  splashSpot() {
+    const g = this.g, u = g.u, L = g.lamp, near = g.horizon + (g.H - g.horizon) * 0.24, out = [];
+    // and clear of "the sea (wet)" while the hero's labels show
+    const lab = this.pres.hero > 0.01 && seaLabelSpot(this);
+    const onLabel = (x, y) => lab && x > lab.x - 40 * u && x < lab.x + 170 * u && y > lab.y - 50 * u && y < lab.y + 45 * u;
+    // not right on the horizon, where a splash is too small to read: a little way out, close to the hill
+    for (const fy of [0.12, 0.2, 0.3, 0.42, 0.55, 0.72, 0.88]) {
+      const y = g.horizon + (g.H - g.horizon) * fy;
+      for (const [a, z] of this.seaSpans(y))
+        for (let x = Math.min(z, g.W) - 30 * u; x > Math.max(a, 0) + 18 * u; x -= 34 * u)
+          if (x < L.x - g.lh.wB * 1.6 && !onLabel(x, y)) out.push({ x, y, d: Math.hypot(x - g.lh.x, (y - near) * 0.8) });
+    }
+    out.sort((p, q) => p.d - q.d);
+    let tries = 0;
+    for (const p of out) {
+      if (tries++ > 14) break;
+      if (this.seen(p.x, p.y) && this.seen(p.x, p.y - 30 * u)) return { x: p.x, y: p.y, seen: true };
+    }
+    const p = out[0] || { x: L.x - 160 * u, y: g.H - 12 };
+    return { x: p.x, y: p.y, seen: false };
+  }
+  // the game ends quietly (editing, the page hidden, the lighthouse covered): the pom-pom is simply back
+  endBall() {
+    if (!this.ball) return;
+    this.ball = null;
+    this.regrowAt = this.reduced || document.hidden ? -9 : this.t;
+  }
+  endBore() {
+    const b = this.bore;
+    if (!b) return;
+    if (b.phase === 'push') this.emit('release', b.key, { caught: true });
+    this.bore = null;
+  }
+  updateBore() {
+    const b = this.bore;
+    if (!b) return;
+    const a = this.t - b.at, g = this.g, u = g.u, L = g.lamp, er = g.lh.er;
+    if (b.phase === 'look' && a > 1.3) {
+      b.phase = 'push'; b.at = this.t;
+      this.emit('nudge', b.key, { dx: b.side * 14 });
+      this.doodle('hehe', L.x - b.side * (er * 1.32 + 12 * u + 3), L.y + er * 0.25, { align: b.side > 0 ? 'right' : 'left', life: 2.4 });
+    } else if (b.phase === 'push' && a > 6) {
+      b.phase = 'back'; b.at = this.t;
+      this.emit('release', b.key, { caught: false });
+    } else if (b.phase === 'caught') {
+      // whistling innocently, the notes rising on the side it looks away to
+      if (b.notes < 3 && a > 0.45 + b.notes * 0.48) {
+        this.doodle('note', L.x - b.side * (er * 1.5 + (4 + b.notes * 3) * u), L.y - er * (0.9 + b.notes * 0.15), { life: 1.5, flip: b.notes % 2 });
+        b.notes++;
+      }
+      if (a > 2.5) this.bore = null;
+    } else if (b.phase === 'back' && a > 1.6) this.bore = null;
+  }
+  // the bored trick holds the light on its widget
+  beamLock() {
+    const b = this.bore;
+    if (!b || !((b.phase === 'look' && this.t - b.at > 0.35) || b.phase === 'push')) return null;
+    return Math.atan2(b.y - this.g.lamp.y, b.x - this.g.lamp.x);
+  }
+  /* What the eye is up to: where it looks (a, m), and squint, wide, a heavier lid or a happy shut eye */
+  mood() {
+    const L = this.g.lamp, b = this.bore;
+    if (this.ball) return { a: Math.atan2(this.ball.y - L.y, this.ball.x - L.x), m: 1 };
+    if (this.look && this.t < this.look.until) return { a: Math.atan2(this.look.y - L.y, this.look.x - L.x), m: 1 };
+    if (!b) return null;
+    const a = this.t - b.at, up = Math.atan2(b.y - L.y, b.x - L.x);
+    if (b.phase === 'look') return { a: up, m: smooth(0, 0.45, a), squint: smooth(0.3, 0.85, a) };
+    if (b.phase === 'push') return { a: up, m: 1, squint: 1 };
+    if (b.phase === 'caught') {
+      if (a < 0.4) return { a: up, m: 1, wide: smooth(0, 0.07, a) };
+      return { a: -Math.PI / 2 - b.side * 0.9, m: 0.85, shut: 0.36 * smooth(0.4, 0.7, a), wide: 1 - smooth(0.4, 0.62, a) };
+    }
+    return { a: up, m: 1 - smooth(0, 0.5, a), squint: 1 - smooth(0, 0.3, a), happy: a > 0.25 && a < 1.05 ? 1 : 0 };
+  }
+  // 0 while the pom-pom is in play, growing back after it
+  bobbleK() { return this.ball || this.t < this.regrowAt ? 0 : pop((this.t - this.regrowAt) / 0.5); }
+  // a word or a note drawn by the pen for a moment; light over the sea, dark over the sky by day
+  doodle(kind, x, y, o = {}) {
+    this.doodles.push({ kind, x, y, t0: this.t, life: o.life ?? 0.95, align: o.align ?? 'center', sea: this.isSea(x, y + 4 * this.g.u), flip: o.flip ? -1 : 1, seed: Math.random() * 10 });
+  }
+
   /* ----- size and layout ----- */
   measure(first) {
     const r = this.host.getBoundingClientRect();
@@ -434,9 +673,11 @@ class Scene {
     }
     // where the page's notes sit (a guess, for placing labels and surprises)
     g.note = portrait ? { x0: 0, x1: W, y0: top + Hs * 0.24, y1: H } : { x0: 0, x1: W * 0.05 + Math.min(W * 0.46, 620) + 12, y0: top, y1: H * 0.84 };
-    g.key = portrait ? null : { x0: 0, x1: W * 0.05 + 440, y0: H - 160, y1: H };
+    g.key = portrait ? null : { x0: 0, x1: W * 0.05 + Math.min(W * 0.46, 562) + 12, y0: H - 160, y1: H };
     this.layoutV++;
     for (const o of this.objs) this.settle(o);
+    // the bar's widgets moved with it: a game or a trick in progress ends quietly
+    this.endBall(); this.endBore();
   }
   seaSpans(y) {
     const spans = [], W = this.W;
@@ -582,6 +823,9 @@ class Scene {
     }
     this.objs = this.objs.filter(o => !o.dead);
     this.ripples = [];
+    this.endBall(); this.endBore();
+    this.regrowAt = this.hatKick = -9;
+    this.doodles = []; this.splashes = []; this.look = null;
   }
   settle(o) {
     // after a resize, put land animals back on the ground and sea animals back in the water
@@ -614,6 +858,7 @@ class Scene {
     if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
     if (this.ripples.length) return true;
+    if (this.ball || this.bore || this.doodles.length || this.splashes.length || this.t - this.hatKick < 0.7 || this.t - this.regrowAt < 0.9) return true;
     for (const o of this.objs) if (o.state === 'fall' || (o.state === 'fly' && !this.reduced) || o.dying != null || (o.land > 0 && this.t - o.land < 0.4)) return true;
     return this.beam.steer > 0.01 && this.beam.steer < 0.99 && !this.reduced;
   }
@@ -669,15 +914,20 @@ class Scene {
     this.updateBeam(dt);
     this.ripples = this.ripples.filter(r => this.t - r.t0 < 2.2);
     this.updateObjs(dt);
+    this.updateBall(dt);
+    this.updateBore();
+    this.doodles = this.doodles.filter(d => this.t - d.t0 < d.life);
+    this.splashes = this.splashes.filter(p => this.t - p.t0 < 0.7);
   }
   updateBeam(dt) {
     const b = this.beam, L = this.g.lamp, now = performance.now() / 1000, rm = this.reduced;
-    const quiet = this.ptr.kind === 'touch' ? 3.2 : 5;
-    const steering = this.ptr.on && now - this.ptr.last < quiet;
+    const quiet = this.ptr.kind === 'touch' ? 3.2 : 5, lock = this.beamLock();
+    const steering = lock != null || (this.ptr.on && now - this.ptr.last < quiet);
     b.steer = rm ? (steering || b.steer > 0.5 ? 1 : 0) : lerp(b.steer, steering ? 1 : 0, Math.min(1, dt * (steering ? 4 : 0.7)));
     if (!rm) b.phi += dt * TAU / 15;
     const c = Math.cos(b.phi), sn = Math.sin(b.phi);
-    if (this.ptr.on && steering) {
+    if (lock != null) b.sa += angDiff(lock, b.sa) * Math.min(1, dt * 3.2);
+    else if (this.ptr.on && steering) {
       const want = this.clampAim(Math.atan2(this.ptr.y - L.y, this.ptr.x - L.x));
       b.sa = rm ? want : b.sa + angDiff(want, b.sa) * Math.min(1, dt * 5);
     }
@@ -843,6 +1093,9 @@ function drawScene(s, c) {
   const objs = s.objs.slice().sort((a, b) => a.y - b.y);
   for (const o of objs) drawObj(s, c, o);
   if (s.pres.hero > 0.01) drawLabels(s, c);
+  drawSplashes(s, c);
+  drawBall(s, c);
+  drawDoodles(s, c);
 }
 
 /* the lower sky, a lighter band with a soft wave at its top, and the horizon */
@@ -1211,17 +1464,19 @@ function drawTower(s, c) {
   poly(c, deck); c.fillStyle = INK; c.fill();
 }
 
-/* the eye in the lantern: an iris the colour of the light, a pupil that follows the beam, a lid */
+/* the eye in the lantern: an iris the colour of the light, a pupil that follows the beam (or the ball), a lid.
+   It also squints when up to something, goes wide when caught, and shuts happily when it got away with it. */
 function drawEye(s, c) {
   const g = s.g, u = g.u, P = s.P, T = g.lh, L = g.lamp, er = T.er, B = s.beam;
-  const night = smooth(0.35, 0.8, s.d);
-  const rx = er * 1.32, ry = er * 1.08;
+  const night = smooth(0.35, 0.8, s.d), md = s.mood() || {}, wide = md.wide || 0, sq = md.squint || 0;
+  const rx = er * 1.32 * (1 + 0.13 * wide), ry = er * 1.08 * (1 + 0.16 * wide);
   const eye = ellipse(L.x, L.y, rx, ry, 40);
   print(c, eye, mix(mul(hex('#FFFFFF'), P.paper), P.beam, night * 0.25));
-  // where it looks: along the beam, or straight at you when the light faces you
-  const look = clamp(B.len * 1.3) * (1 - B.flash), pa = B.a;
+  // where it looks: along the beam, or straight at you when the light faces you, or wherever it's busy
+  let look = clamp(B.len * 1.3) * (1 - B.flash), pa = B.a;
+  if (md.a != null) { pa = md.a; look = md.m; }
   const px = L.x + Math.cos(pa) * rx * 0.42 * look, py = L.y + Math.sin(pa) * ry * 0.36 * look;
-  const ir = er * (0.62 + 0.12 * B.flash), pr = er * (0.3 - 0.08 * night + 0.1 * B.flash);
+  const ir = er * (0.62 + 0.12 * B.flash) * (1 - 0.2 * wide), pr = er * (0.3 - 0.08 * night + 0.1 * B.flash) * (1 - 0.42 * wide);
   c.save(); poly(c, eye, true, REGX, REGY); c.clip();
   dot(c, px + REGX, py + REGY, ir, mix(P.beam, hex('#FFB52E'), 0.35 - 0.2 * night));
   c.restore();
@@ -1231,12 +1486,18 @@ function drawEye(s, c) {
   c.beginPath(); ribbon(c, ellipse(px, py, ir, ir, 22), TEX, 3, { tin: 1, tout: 1, w0: 1, w1: 1, amp: 0.3 }); c.fillStyle = INK; c.fill();
   // the lid: a little heavy by day, wide awake at night, shut when it blinks or winks
   const bl = s.t - s.blink.at, wk = s.t - s.blink.wink;
-  let shut = lerp(0.2, 0.02, night);
-  if (bl < 0.18) shut = Math.max(shut, Math.sin(bl / 0.18 * Math.PI));
+  let shut = lerp(lerp(0.2, 0.02, night), 0, wide);
+  if (md.shut) shut = Math.max(shut, md.shut);
+  shut = Math.max(shut, 0.5 * sq);
+  if (bl < 0.18 && !s.bore) shut = Math.max(shut, Math.sin(bl / 0.18 * Math.PI));
   if (wk < 0.6) shut = Math.max(shut, wk < 0.1 ? wk / 0.1 : wk < 0.45 ? 1 : 1 - (wk - 0.45) / 0.15);
   if (s.reduced && wk >= 0.6) shut = lerp(0.2, 0.02, night);
   const lidCol = rgba(mul(hex('#FFFFFF'), P.paper));
-  if (shut > 0.86) {
+  if (md.happy) {
+    // shut, and pleased with itself: the lid line curves up
+    poly(c, eye); c.fillStyle = lidCol; c.fill();
+    c.beginPath(); ribbon(c, ellipse(L.x, L.y + ry * 0.38, rx * 0.72, ry * 0.62, 16, 1.18 * Math.PI, 1.82 * Math.PI), DET, 5, { tin: 3, tout: 3 }); c.fillStyle = INK; c.fill();
+  } else if (shut > 0.86) {
     poly(c, eye); c.fillStyle = lidCol; c.fill();
     c.beginPath();
     ribbon(c, ellipse(L.x, L.y - ry * 0.35, rx * 0.78, ry * 0.55, 16, 0.2 * Math.PI, 0.8 * Math.PI), DET, 5, { tin: 3, tout: 3 });
@@ -1249,8 +1510,25 @@ function drawEye(s, c) {
     poly(c, lid); c.fillStyle = lidCol; c.fill();
     c.beginPath(); ribbon(c, lid.slice(25), DET, 5, { tin: 3, tout: 3 }); c.fillStyle = INK; c.fill();
   }
+  if (sq > 0.01 && !md.happy) {
+    // squinting: the lower lid comes up too
+    const ly = L.y + ry - sq * ry * 0.62, lid = [];
+    for (let i = 0; i <= 24; i++) { const a = i / 24 * Math.PI; lid.push([L.x + Math.cos(a) * (rx + 2), L.y + Math.sin(a) * (ry + 2)]); }
+    for (let i = 0; i <= 16; i++) { const x = L.x - rx + i / 16 * 2 * rx; lid.push([x, ly - (1 - ((x - L.x) / rx) ** 2) * ry * 0.16 * sq]); }
+    poly(c, lid); c.fillStyle = lidCol; c.fill();
+    c.beginPath(); ribbon(c, lid.slice(25), TEX * 1.2, 6, { tin: 3, tout: 3 }); c.fillStyle = INK; c.fill();
+  }
   c.restore();
   c.beginPath(); loop(c, eye, SIL * 0.85, 8); c.fillStyle = INK; c.fill();
+  // caught: a start, in a few short strokes either side
+  if (wide > 0.05) {
+    c.beginPath();
+    for (const sx of [-1, 1]) for (const k of [-0.42, 0, 0.42]) {
+      const a = (sx < 0 ? Math.PI : 0) + sx * k, r0 = rx * 1.22, r1 = r0 + er * 0.55 * wide;
+      ribbon(c, [[L.x + Math.cos(a) * r0, L.y + Math.sin(a) * r0 * 0.9], [L.x + Math.cos(a) * r1, L.y + Math.sin(a) * r1 * 0.9]], TEX * 1.1, 20 + k * 7 + sx, { tin: 1, tout: 2 });
+    }
+    c.fillStyle = INK; c.fill();
+  }
   // the gallery's railing passes in front of the eye
   const gw = T.wT * 0.95, top = T.top - T.gal * 0.42, rail = top - T.gal * 0.62;
   c.beginPath();
@@ -1259,13 +1537,30 @@ function drawEye(s, c) {
   c.fillStyle = INK; c.fill();
 }
 
+/* The hat right now: where its brim sits and where the cone's tip and the bobble are. It lifts and
+   flops when it heads the ball (the ball game reads the bobble's place from here too). */
+function hatGeom(s) {
+  const g = s.g, L = g.lamp, er = g.lh.er, ry = er * 1.08, ka = s.t - s.hatKick, kicked = !s.reduced && ka >= 0 && ka < 0.7;
+  const lift = kicked && ka < 0.3 ? Math.sin(ka / 0.3 * Math.PI) * er * 0.34 : 0;
+  const flop = kicked ? Math.sin(ka * 19) * Math.exp(-ka * 6) * 0.34 : 0;
+  const sway = s.reduced ? 0.15 : 0.15 + s.windTotal * 0.25 + Math.sin(s.t * 1.3) * 0.05 + flop;
+  const by = L.y - ry * 0.62 - lift, pr = er * 0.66;
+  const tip = [L.x + er * (0.5 + sway * 2.2), by - er * 3.1 + Math.abs(sway) * er * 0.6];
+  return { by, bw: er * 1.5, bh: er * 0.62, sway, tip, pr, bob: [tip[0], tip[1] - pr * 0.6] };
+}
+/* a pom-pom: a scribbled ball of wool, turning with `spin` */
+function bobble(c, x, y, pr, col, spin = 0) {
+  const pb = [];
+  for (let i = 0; i < 40; i++) { const a = i / 40 * TAU, r = pr * (1 + 0.09 * Math.abs(Math.sin((a - spin) * 5.5 + 1))); pb.push([x + Math.cos(a) * r, y + Math.sin(a) * r]); }
+  shape(c, pb, col, DET * 0.95, 16);
+  const cs = Math.cos(spin), sn = Math.sin(spin), ox = pr * 0.1, oy = pr * 0.1;
+  c.beginPath(); ribbon(c, ellipse(x + ox * cs - oy * sn, y + ox * sn + oy * cs, pr * 0.42, pr * 0.36, 8, 0.2 + spin, 1.9 + spin), TEX * 0.8, 90, { tin: 1, tout: 2 }); c.fillStyle = INK; c.fill();
+}
+
 /* a knitted pom-pom hat: a ribbed brim, a long floppy cone in the theme's colour, a white bobble */
 function drawHat(s, c) {
   const g = s.g, u = g.u, P = s.P, T = g.lh, L = g.lamp, er = T.er, th = THEMES[s.theme];
-  const col = mul(hex(th.hat), P.paper), ry = er * 1.08;
-  const sway = s.reduced ? 0.15 : 0.15 + s.windTotal * 0.25 + Math.sin(s.t * 1.3) * 0.05;
-  const by = L.y - ry * 0.62, bw = er * 1.5, bh = er * 0.62;
-  const tip = [L.x + er * (0.5 + sway * 2.2), by - er * 3.1 + Math.abs(sway) * er * 0.6];
+  const col = mul(hex(th.hat), P.paper), h = hatGeom(s), { by, bw, bh, sway, tip, pr } = h;
   const cone = curve([[L.x - bw * 0.92, by - bh * 0.6], [L.x - bw * 0.5, by - er * 1.9], [L.x + er * 0.1 + sway * er, by - er * 2.85], tip, [L.x + er * 0.65 + sway * er * 1.4, by - er * 2.2], [L.x + bw * 0.9, by - bh * 0.6]], 3);
   print(c, cone, col);
   // a white knitted stripe across the cone
@@ -1281,11 +1576,21 @@ function drawHat(s, c) {
   edges(c, brim, DET, 15, true, { ov: 1.2 });
   for (let i = 1; i < 7; i++) { const x = L.x - bw + i / 7 * bw * 2; ribbon(c, [[x, by - bh * 0.4], [x + 0.4 * u, by + bh * 0.32]], TEX * 0.8, 80 + i, { tin: 1, tout: 1, amp: 0.2 }); }
   c.fillStyle = INK; c.fill();
-  // the bobble: a scribbled ball of wool
-  const pr = er * 0.66, pb = [];
-  for (let i = 0; i < 40; i++) { const a = i / 40 * TAU, r = pr * (1 + 0.09 * Math.abs(Math.sin(a * 5.5 + 1))); pb.push([tip[0] + Math.cos(a) * r, tip[1] - pr * 0.6 + Math.sin(a) * r]); }
-  shape(c, pb, mul(hex('#FFFFFF'), P.paper), DET * 0.95, 16);
-  c.beginPath(); ribbon(c, ellipse(tip[0] + pr * 0.1, tip[1] - pr * 0.5, pr * 0.42, pr * 0.36, 8, 0.2, 1.9), TEX * 0.8, 90, { tin: 1, tout: 2 }); c.fillStyle = INK; c.fill();
+  // the bobble, unless it's in play; then a few loose ends of wool, until a new one grows back with a pop
+  const k = s.bobbleK();
+  if (k < 0.999) {
+    c.beginPath();
+    for (const a of [-2.3, -1.6, -0.9]) ribbon(c, [[tip[0], tip[1]], [tip[0] + Math.cos(a) * pr * 0.55, tip[1] + Math.sin(a) * pr * 0.55]], TEX, a * 3, { tin: 1, tout: 2 });
+    c.fillStyle = INK; c.fill();
+  }
+  if (k > 0.02) bobble(c, tip[0], tip[1] - pr * 0.6 * k, pr * k, mul(hex('#FFFFFF'), P.paper));
+  const ra = s.t - s.regrowAt;
+  if (ra > 0.18 && ra < 0.75 && !s.reduced) {
+    const f = (ra - 0.18) / 0.57, cx = tip[0], cy = tip[1] - pr * 0.6;
+    c.beginPath();
+    for (let i = 0; i < 6; i++) { const a = -Math.PI / 2 + (i - 2.5) * 0.62, r0 = pr * (1.35 + f * 0.9), r1 = r0 + pr * 0.55 * (1 - f * 0.6); ribbon(c, [[cx + Math.cos(a) * r0, cy + Math.sin(a) * r0], [cx + Math.cos(a) * r1, cy + Math.sin(a) * r1]], TEX, i, { tin: 1, tout: 1 }); }
+    c.fillStyle = rgba(P.ink, 1 - f); c.fill();
+  }
   // a sparkle or two after changing into new pyjamas
   const sp = s.t - s.sparkle;
   if (sp < 1.2 && !s.reduced) {
@@ -1746,5 +2051,92 @@ function drawMonster(c, u, pink, P, o, t) {
   c.beginPath(); ribbon(c, [[33 * u, -25.8 * u], [49 * u, -26.4 * u]], DET * 1.2, 2, { tin: 1, tout: 1, w0: 1, w1: 1 }); c.fillStyle = INK; c.fill();
 }
 
+/* ---------- the lighthouse plays with the bar: the ball, its doodles and the splash ---------- */
+function drawBall(s, c) {
+  const b = s.ball;
+  if (!b) return;
+  const g = s.g, u = g.u, pr = g.lh.er * 0.66, v = Math.hypot(b.vx, b.vy);
+  // a couple of speed lines behind it when it's going
+  if (v > 240 * u && !s.reduced) {
+    const ax = -b.vx / v, ay = -b.vy / v, nx = -ay, ny = ax, l = pr * clamp(v / (700 * u), 0.6, 1.4);
+    c.beginPath();
+    for (const k of [-0.5, 0.42]) {
+      const x0 = b.x + ax * pr * 1.4 + nx * pr * k, y0 = b.y + ay * pr * 1.4 + ny * pr * k;
+      ribbon(c, [[x0, y0], [x0 + ax * l * (1 - k * 0.3), y0 + ay * l * (1 - k * 0.3)]], TEX, 30 + k * 5, { tin: 1, tout: 4 });
+    }
+    c.fillStyle = INK; c.fill();
+  }
+  // squashed for a moment by a hit or a header
+  const q = s.t - b.sq, sq = q < 0.16 ? Math.sin(q / 0.16 * Math.PI) * 0.24 : 0;
+  c.save(); c.translate(b.x, b.y); c.scale(1 + sq, 1 - sq);
+  bobble(c, 0, 0, pr, mul(hex('#FFFFFF'), s.P.paper), b.spin);
+  c.restore();
+}
+
+/* a quaver, drawn: a tilted head, a stem and a flag */
+function quaver(c, x, y, sz, col, flip) {
+  c.beginPath(); c.ellipse(x, y, sz * 0.62, sz * 0.44, -0.45, 0, TAU); c.fillStyle = col; c.fill();
+  c.beginPath();
+  ribbon(c, [[x + sz * 0.52, y - sz * 0.1], [x + sz * 0.56, y - sz * 2.1]], TEX * 1.2, 3, { tin: 1, tout: 1, w0: 0.9, w1: 0.9 });
+  ribbon(c, [[x + sz * 0.56, y - sz * 2.1], [x + sz * (0.56 + 0.6 * flip), y - sz * 1.62], [x + sz * (0.56 + 0.45 * flip), y - sz * 1.0]], TEX * 1.1, 4, { tin: 1, tout: 3 });
+  c.fillStyle = col; c.fill();
+}
+
+/* "boink!", "pok", "plop", "hehe" and the whistled notes: they pop in, drift a little and fade */
+function drawDoodles(s, c) {
+  if (!s.doodles.length) return;
+  const g = s.g, u = g.u, P = s.P, ink = rgba(mix(P.ink, P.paper, smooth(0.5, 0.7, s.d)));
+  for (const d of s.doodles) {
+    const a = s.t - d.t0, k = pop(a / 0.24), f = 1 - smooth(d.life - 0.3, d.life, a), col = d.sea ? rgba(P.paper) : ink;
+    if (f <= 0 || k <= 0.01) continue;
+    c.save(); c.globalAlpha = f;
+    if (d.kind === 'note') {
+      const sz = 4.2 * u + 1.6;
+      quaver(c, d.x + Math.sin(a * 4 + d.seed) * 5 * u, d.y - a * 36 * u, sz * k, col, d.flip);
+      c.restore(); continue;
+    }
+    const size = Math.max(d.kind === 'pok' ? 12 : 13.5, (d.kind === 'pok' ? 12 : d.kind === 'boink' ? 16 : 15) * u + 4), dir = d.align === 'right' ? -1 : 1;
+    const shake = d.kind === 'hehe' ? (Math.floor(a * 9) % 2 ? -1 : 1) * 1.3 * u : 0;
+    c.translate(d.x, d.y - a * (d.kind === 'plop' ? 12 : 8) * u + shake); c.scale(k, k);
+    const text = d.kind === 'boink' ? 'boink!' : d.kind;
+    label(c, text, 0, 0, size, col, d.align, d.kind === 'boink' ? -0.09 * dir : d.kind === 'pok' ? 0.12 * dir : -0.06);
+    c.beginPath();
+    if (d.kind === 'boink') {
+      // the knock, in three short strokes toward the widget
+      for (const i of [0, 1, 2]) { const an = -Math.PI / 2 - dir * (0.25 + i * 0.42), r0 = size * 0.32, r1 = size * 0.72; ribbon(c, [[Math.cos(an) * r0, -size * 0.3 + Math.sin(an) * r0], [Math.cos(an) * r1, -size * 0.3 + Math.sin(an) * r1]], TEX * 1.1, i + 7, { tin: 1, tout: 2 }); }
+    } else if (d.kind === 'plop') {
+      // two drops over the word
+      for (const i of [0, 1]) { const x = size * (0.45 + i * 0.85), y = -size * (0.9 + i * 0.2); ribbon(c, ellipse(x, y, size * 0.13, size * 0.18, 10, -0.6, Math.PI * 1.6), TEX, i + 3, { tin: 1, tout: 1 }); }
+    }
+    c.fillStyle = col; c.fill();
+    c.restore();
+  }
+}
+
+/* where the ball lands: a crown of water and a few drops thrown up and out, in foam with the pen round them */
+function drawSplashes(s, c) {
+  if (!s.splashes.length) return;
+  const g = s.g, u = g.u, P = s.P, foam = rgba(P.foam);
+  for (const p of s.splashes) {
+    const a = s.t - p.t0, k = clamp(a / 0.7), e = easeOut(k);
+    c.globalAlpha = 1 - smooth(0.6, 1, k);
+    for (const [w, col] of [[DET * 2.5, INK], [DET * 1.25, foam]]) {
+      c.beginPath();
+      for (let i = 0; i < 5; i++) {
+        const an = -Math.PI / 2 + (i - 2) * 0.46, r0 = 6 * u, r1 = r0 + (8 + 20 * e) * u * (1 - k * 0.55);
+        ribbon(c, [[p.x + Math.cos(an) * r0 * 1.5, p.y + Math.sin(an) * r0 * 0.5], [p.x + Math.cos(an) * r1 * 1.5, p.y + Math.sin(an) * r1]], w, i, { tin: 2, tout: 3, amp: 0.4 });
+      }
+      c.fillStyle = col; c.fill();
+    }
+    for (let i = 0; i < 4; i++) {
+      const dx = (i - 1.5) * (10 + 22 * e) * u, dy = -(30 + i % 2 * 10) * u * e + 70 * u * k * k, x = p.x + dx, y = p.y + dy, r = (2.8 - 1.4 * k) * u + 0.8;
+      if (y > p.y + 2) continue;
+      dot(c, x, y, r, foam);
+      c.beginPath(); ribbon(c, ellipse(x, y, r + 0.6, r + 0.6, 10), TEX * 0.8, i, { tin: 1, tout: 1, w0: 1, w1: 1 }); c.fillStyle = INK; c.fill();
+    }
+    c.globalAlpha = 1;
+  }
+}
+
 window.Hill = { Scene, themes: Object.keys(THEMES), states: STATES };
 })();
diff --git a/site/style.css b/site/style.css
index 4822af93..0e2c6f64 100644
--- a/site/style.css
+++ b/site/style.css
@@ -159,7 +159,7 @@ main { overflow-x: clip; }
   flex: none; height: var(--tile-h); display: flex; align-items: center; gap: 7px; padding: 0 10px; white-space: nowrap;
   background: var(--w-bg); box-shadow: inset 0 0 0 1px var(--w-border), 0 1px 3px var(--w-shadow); border-radius: var(--w-radius);
   filter: var(--w-glow); color: var(--fg); font: var(--bar-font); text-decoration: none; cursor: default; user-select: none;
-  transition: background .15s, border-radius .25s;
+  transition: background .15s, border-radius .25s, box-shadow .2s;
 }
 .w[data-pop], .w.app, .w.more, .w.moon { cursor: pointer; }
 .w[data-pop]:hover, .w.more:hover, .w.moon:hover { background: var(--raised); }
@@ -243,6 +243,26 @@ main { overflow-x: clip; }
 .header .w.dl > span { padding: 0 12px 0 8px; }
 .measure * { transition: none !important; }
 
+/* The lamp-lit tour: the widget under the pointer glows as if the lamp lit it from below,
+   and a paper tag hangs under it on a doodled string (placed by main.js) */
+#bar .w.lamp { background-image: linear-gradient(0deg, #ffe04a80, #ffe04a00 82%); box-shadow: inset 0 0 0 1px var(--w-border), 0 0 0 1.5px #ffd43bb3, 0 6px 14px -2px #ffd43bf0; }
+#bar .w.dl.lamp { background-image: none; box-shadow: 0 6px 14px -2px #ffd43bf0; }
+.lamp-tag { position: absolute; left: 0; top: 0; z-index: 4; width: 0; height: 0; pointer-events: none; transform-origin: 0 0; }
+.lamp-tag[hidden] { display: none; }
+.lt-s { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
+.lt-s path { fill: none; stroke-linecap: round; }
+.lt-s .h { stroke: #fff; stroke-width: 4.4; }
+.lt-s .k { stroke: var(--pen); stroke-width: 1.9; }
+.lt-p {
+  --ox: -3px; --oy: -2px;
+  position: absolute; left: 0; top: 0; isolation: isolate; display: block; padding: 12px 12px 7px; white-space: nowrap;
+  background: var(--paper); color: var(--text); border-radius: 7px 10px 6px 11px / 10px 6px 11px 7px;
+  font: 600 15px/1.15 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 60;
+  rotate: var(--r, -1deg); transform-origin: var(--hole, 50%) 7px;
+}
+/* the punched hole the string goes through, the sky showing in it */
+.lt-p::after { content: ""; position: absolute; left: var(--hole, 50%); top: 4px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--strip); box-shadow: 0 0 0 1.6px var(--pen); }
+
 /* The center position shows only when a widget sits there */
 .dock:not(.editing) #gc:not(:has(> .w:not([hidden]))) { display: none; }
 
@@ -412,7 +432,7 @@ main { overflow-x: clip; }
   clip-path: polygon(0 6%, 4% 0, 8% 8%, 13% 2%, 18% 7%, 50% 3%, 82% 6%, 88% 0, 93% 7%, 97% 1%, 100% 8%, 99% 92%, 95% 100%, 90% 93%, 85% 100%, 50% 96%, 15% 99%, 10% 92%, 5% 100%, 1% 94%);
 }
 /* The pen line before main.js draws it, or without it */
-:where(.note, .cta, .tag, .keys button)::before {
+:where(.note, .cta, .tag, .keys button, .lt-p)::before {
   content: ""; position: absolute; z-index: -1; pointer-events: none;
   inset: var(--oy) calc(-1 * var(--ox)) calc(-1 * var(--oy)) var(--ox);
   border: 2.4px solid var(--pen); border-radius: inherit;
@@ -490,7 +510,7 @@ h3 { font: 800 22px/1.2 var(--display); font-variation-settings: "INFM" 70, "BNC
 .quiet { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15.5px; }
 .hero-foot .cap { margin-top: 0; }
 
-.key { --rot: .8deg; --tape-x: 16%; --tape-w: 66px; --tape-r: 6deg; margin-top: auto; width: min(452px, 46vw); padding: 14px 18px 12px; border-radius: 12px 18px 10px 20px / 18px 10px 20px 12px; }
+.key { --rot: .8deg; --tape-x: 16%; --tape-w: 66px; --tape-r: 6deg; margin-top: auto; width: fit-content; max-width: min(562px, 46vw); padding: 14px 18px 12px; border-radius: 12px 18px 10px 20px / 18px 10px 20px 12px; }
 .js:not(.has-scene) .key { visibility: hidden; }
 .key-t, .key-or { font: 600 16px/1.25 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 60; }
 .key .touch { display: none; }
@@ -507,6 +527,8 @@ h3 { font: 800 22px/1.2 var(--display); font-variation-settings: "INFM" 70, "BNC
 .keys button:hover { background: #fff6c2; rotate: -2deg; }
 .keys button[aria-pressed="true"] { background: var(--hi); }
 .keys svg { width: 26px; height: 20px; flex: none; }
+/* The ball game moves; without motion it isn't offered */
+@media (prefers-reduced-motion: reduce) { .keys [data-play] { display: none; } }
 
 /* ---------- Sections: each a different piece of paper, in the left part of the window ---------- */
 .sec { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: 14vh 0 14vh var(--left, 5vw); }
@@ -520,7 +542,7 @@ h3 { font: 800 22px/1.2 var(--display); font-variation-settings: "INFM" 70, "BNC
 @media (min-width: 700px) and (max-width: 1023.98px) {
   .hero-note, .sec .note { width: min(58vw, 620px); }
   .hero-note { padding-left: 30px; padding-right: 30px; }
-  .key { width: min(452px, 58vw); }
+  .key { max-width: min(562px, 58vw); }
 }
 
 /* Edit: a taped note with a picture of the bar in edit mode */

From ffab236ae6444f267ad30f815b90209567874672 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 12:00:26 +0100
Subject: [PATCH 05/46] docs: bring the hill on the website to life

The drawing no longer starts empty: a few sheep, a cow and a duck are already there where the
notes leave the hill and the sea in view. Grass sprouts here and there on the hill and leans
away from the pointer; sheep and cows wander over in turns, munch it until it's gone and look
pleased. The section's little scenes (the desk, the huts, the keeper) are drawn over the
animals, and animals don't stay in their way.

A white box with a cloud's puffs for a lid drifts across the sky with the clouds, labelled "a
sheep (in a box)" while it's in clear sky. In the beam two eyes look out of its air holes,
and a click makes it hop and say "baa!".

A click in the sky above the sea now drops a duck that falls into the water; sea monsters only
surface where the water itself is clicked.
---
 site/scene.js | 666 +++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 611 insertions(+), 55 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index 5868f5d7..4deec7dd 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -120,7 +120,31 @@ const C = {
   monster: hex('#FF8FC0'), chimney: hex('#E8452F'), roof: hex('#2B2B36'), door: hex('#2E58D8'), skin: hex('#F6C9A6'),
   navy: hex('#25305E'), wood: hex('#C98B4A'), steel: hex('#D8DCE6'), moon: hex('#FFE89A'), tile: hex('#1D1D24'),
   huts: ['#FF4A36', '#2E58D8', '#FFC21A', '#36A852'].map(hex),
+  sprout: hex('#2E9B3B'),
 };
+// animals that live on the hill (not riding a cloud): they wander and graze
+const grazer = o => (o.kind === 'sheep' || o.kind === 'cow') && !o.ride;
+/* The sheep's box, in its own units (times boxK): the front face's half size, the depth seen past it, and
+   three air holes punched in the front, the first two with eyes behind them */
+const BOX = { hw: 21, hh: 13, dx: 9, dy: -7, holes: [[-11, -1.5], [0.5, -3.5], [11.5, -0.5]] };
+// its lid: a cloud's row of puffs sitting on the box, following its top back to the far corner (box units)
+const LID = (() => {
+  const bumps = [[-18, -12, 10], [-6, -18, 13], [8, -19.5, 13], [21, -18, 11], [30, -17, 7.5]], top = [];
+  for (let i = 0; i <= 72; i++) {
+    const x = -28.5 + 66.5 * i / 72;
+    let y = -9.5;
+    for (const [bx, by, r] of bumps) { const d = x - bx; if (Math.abs(d) < r) y = Math.min(y, by - Math.sqrt(r * r - d * d)); }
+    top.push([x, y]);
+  }
+  return top;
+})();
+const LID_TOP = Math.min(...LID.map(p => p[1])), LID_X0 = LID[0][0], LID_X1 = LID[LID.length - 1][0];
+const BOX_SP = 6.5; // its drift, in the clouds' units
+// a rect [x0, y0, x1, y1] against a rect, or a disc [x, y, r]
+const overlaps = (a, q) => q.length === 3
+  ? Math.hypot(clamp(q[0], a[0], a[2]) - q[0], clamp(q[1], a[1], a[3]) - q[1]) < q[2]
+  : a[0] < q[2] && a[2] > q[0] && a[1] < q[3] && a[3] > q[1];
+const boxK = s => Math.max(s.g.u, 0.72) * 1.12;
 const HAND = '"Shantell Sans Hand", "Shantell Sans", "Chalkboard SE", sans-serif';
 
 /* ---------- the pen ----------
@@ -196,6 +220,8 @@ function label(c, text, x, y, size, col, align = 'left', rot = -0.035) {
 
 /* ---------- the scene: geometry, state, input and time ---------- */
 const IDLE_AFTER = 4000, IDLE_FPS = 14, BOIL_FPS = 7, MAX_OBJS = 36;
+// the grass on the hill: at most this many tufts, a new one every 6 to 12 s while there are fewer
+const MEADOW_MAX = 6, SPROUT_MIN = 6, SPROUT_MAX = 12;
 
 class Scene {
   constructor(host, opts = {}) {
@@ -226,6 +252,9 @@ class Scene {
     this.doodles = []; this.splashes = [];
     this.hatKick = -9; this.regrowAt = -9;
     this.onBar = null;
+    // a lived-in hill: the animals already there, the grass they eat, and a sheep in a box up in the sky
+    this.flocked = false; this.meadow = []; this.sproutAt = 0;
+    this.box = { v: null, cl: null, side: null, lastSide: null, la: 0, seenAt: -9, hop: -9, peek: -9, lit: 0, open: false, openAt: -9, blinkAt: -9, nextBlink: 0 };
     this.times = [];
     this.awake = 0; this.kick = 0; this.raf = 0; this.timer = 0; this.last = null;
     this.mq = matchMedia('(prefers-reduced-motion: reduce)');
@@ -250,7 +279,11 @@ class Scene {
   setDusk(d) { this.dTarget = clamp(+d || 0); if (this.reduced) this.d = this.dTarget; this.wake(); }
   setState(name) {
     if (!STATES.includes(name)) return;
-    if (name !== this.state) { this.state = name; this.since[name] = this.t; }
+    if (name !== this.state) {
+      this.state = name; this.since[name] = this.t;
+      // a new little scene may stand where an animal rests: resting ones look around again shortly
+      for (const o of this.objs) if (grazer(o) && o.act === 'idle') o.until = Math.min(o.until, this.t + 0.6 + Math.random() * 1.2);
+    }
     this.wake();
   }
   setTheme(id) {
@@ -310,6 +343,13 @@ class Scene {
       this.wake();
       return false;
     }
+    // the sheep in its box says baa (and the light turns to see who's there); nothing drops
+    if (this.boxHit(x, y)) {
+      this.aim(x, y);
+      this.baa();
+      this.wake();
+      return false;
+    }
     this.aim(x, y);
     this.wake();
     if (y < this.top) return false;
@@ -562,7 +602,7 @@ class Scene {
   bobbleK() { return this.ball || this.t < this.regrowAt ? 0 : pop((this.t - this.regrowAt) / 0.5); }
   // a word or a note drawn by the pen for a moment; light over the sea, dark over the sky by day
   doodle(kind, x, y, o = {}) {
-    this.doodles.push({ kind, x, y, t0: this.t, life: o.life ?? 0.95, align: o.align ?? 'center', sea: this.isSea(x, y + 4 * this.g.u), flip: o.flip ? -1 : 1, seed: Math.random() * 10 });
+    this.doodles.push({ kind, x, y, t0: this.t, life: o.life ?? 0.95, align: o.align ?? 'center', sea: this.isSea(x, y + 4 * this.g.u), flip: o.flip ? -1 : 1, seed: Math.random() * 10, text: o.text, calm: Boolean(o.calm) });
   }
 
   /* ----- size and layout ----- */
@@ -676,6 +716,15 @@ class Scene {
     g.key = portrait ? null : { x0: 0, x1: W * 0.05 + Math.min(W * 0.46, 562) + 12, y0: H - 160, y1: H };
     this.layoutV++;
     for (const o of this.objs) this.settle(o);
+    // the grass stays on the ground at the same depth, or goes; meals and walks start over
+    for (const m of this.meadow) {
+      const ry = this.ridgeY(m.x);
+      if (ry == null || ry + m.depth > Math.min(this.shoreY(m.x) - 10 * u, H - 12 * u)) m.gone = true;
+      else m.y = ry + m.depth;
+      m.by = null;
+    }
+    this.meadow = this.meadow.filter(m => !m.gone);
+    for (const o of this.objs) if (grazer(o) && o.act) { o.tuft = null; o.act = 'idle'; o.until = this.t + 1; }
     // the bar's widgets moved with it: a game or a trick in progress ends quietly
     this.endBall(); this.endBore();
   }
@@ -756,16 +805,23 @@ class Scene {
     }
     // no land in sight (a phone, with the notes over the hill): it lands on a cloud
     if (kind === 'sheep' || kind === 'cow') {
-      const riders = cl => this.objs.filter(o => o.ride === cl && o.dying == null).length + R() * 0.5;
-      for (const cl of [...g.clouds, g.sheepCloud].sort((a, b) => riders(a) - riders(b))) {
-        const p = this.cloudXY(cl);
-        if (p.x > 40 * u && p.x < W - 40 * u && Math.hypot(p.x - g.lamp.x, p.y - g.lamp.y) > T.er * 5 && this.seen(p.x, p.y - cl.w * 0.2)) return { x: p.x, y: p.y, cloud: cl };
-      }
+      const cl = this.cloudSpot();
+      if (cl) { const p = this.cloudXY(cl); return { x: p.x, y: p.y, cloud: cl }; }
     }
     // nothing visible: drop it where it belongs anyway, falling from the sky
     const p = tries[0] || { x: W * 0.8, y: H * 0.8 };
     return { ...p, fromSky: true };
   }
+  // a cloud that shows, the one with the fewest riders first, for a sheep or a cow with no land in sight
+  cloudSpot() {
+    const g = this.g, u = g.u, R = Math.random, T = g.lh;
+    const riders = cl => this.objs.filter(o => o.ride === cl && o.dying == null).length + R() * 0.5;
+    for (const cl of [...g.clouds, g.sheepCloud].sort((a, b) => riders(a) - riders(b))) {
+      const p = this.cloudXY(cl);
+      if (p.x > 40 * u && p.x < g.W - 40 * u && Math.hypot(p.x - g.lamp.x, p.y - g.lamp.y) > T.er * 5 && this.seen(p.x, p.y - cl.w * 0.2)) return cl;
+    }
+    return null;
+  }
 
   spawn(x, y, kind, settled, fromSky) {
     const g = this.g, u = g.u, R = Math.random;
@@ -775,7 +831,7 @@ class Scene {
       if (land) o.kind = R() < 0.6 ? 'sheep' : 'cow';
       else if (sea) o.kind = R() < 0.55 ? 'duck' : 'monster';
       else if (y < lerp(g.top, g.horizon, 0.55) && R() < 0.45) o.kind = 'gull';
-      else o.kind = this.ridgeY(x) != null && y < this.shoreY(x) && x > (g.portrait ? 0 : this.hillLeftX(g.horizon) - 20 * u) ? (R() < 0.6 ? 'sheep' : 'cow') : (R() < 0.6 ? 'duck' : 'monster');
+      else o.kind = this.ridgeY(x) != null && y < this.shoreY(x) && x > (g.portrait ? 0 : this.hillLeftX(g.horizon) - 20 * u) ? (R() < 0.6 ? 'sheep' : 'cow') : 'duck'; // from the sky, only ducks: monsters surface where the water is clicked
     }
     const still = settled || this.reduced;
     if (o.kind === 'gull') {
@@ -793,7 +849,7 @@ class Scene {
     } else {
       o.ty = sea ? y : g.horizon + (g.H - g.horizon) * (0.16 + R() * 0.55);
       if (!sea) { const sp = this.seaSpans(o.ty); const s = sp.find(q => q[0] <= x && x <= q[1]) || sp[0]; if (s) o.x = clamp(x, s[0] + 24 * u, s[1] - 30 * u); }
-      if (o.kind === 'monster' || still || sea && !fromSky) { o.y = o.ty; o.state = o.kind === 'monster' ? 'swim' : 'float'; if (!this.reduced) this.ripples.push({ x: o.x, y: o.ty, t0: this.t, a: 0.8 }); }
+      if (o.kind === 'monster' || still || sea && !fromSky) { o.y = o.ty; o.state = o.kind === 'monster' ? 'swim' : 'float'; if (!this.reduced && !settled) this.ripples.push({ x: o.x, y: o.ty, t0: this.t, a: 0.8 }); }
       else { o.state = 'fall'; if (fromSky) o.y = Math.min(o.ty - 120 * u, g.top - 20); }
       o.sc = this.depthScale(o.ty);
     }
@@ -802,11 +858,11 @@ class Scene {
     if (live.length > MAX_OBJS) live[0].dying = this.t;
     return o;
   }
-  ride(kind, cl) {
+  ride(kind, cl, settled) {
     const g = this.g, R = Math.random, p = this.cloudXY(cl);
     const o = { kind, ride: cl, dx: (R() - 0.5) * cl.w * 0.3, x: p.x, y: 0, vx: 0, vy: 0, t0: this.t, flip: R() < 0.5, seed: (R() * 1e4) | 0, lit: 0, sc: 0.85 * (g.portrait ? 1.1 : 1) };
     o.x = p.x + o.dx; o.ty = this.rideY(o);
-    if (this.reduced) { o.state = 'ride'; o.y = o.ty; o.land = -9; } else { o.state = 'fall'; o.y = g.top - 30; }
+    if (this.reduced || settled) { o.state = 'ride'; o.y = o.ty; o.land = -9; } else { o.state = 'fall'; o.y = g.top - 30; }
     this.objs.push(o);
     const live = this.objs.filter(q => q.dying == null);
     if (live.length > MAX_OBJS) live[0].dying = this.t;
@@ -820,8 +876,14 @@ class Scene {
       else if (o.state === 'fall') { o.y = o.ty; o.vy = 0; o.state = o.ride ? 'ride' : o.kind === 'duck' ? 'float' : 'land'; }
       o.land = -9;
       if (o.dying != null) o.dead = true;
+      // no one eats: heads up, meals over
+      if (grazer(o)) { this.letGo(o); o.act = 'idle'; o.head = 0; o.vx = o.vd = 0; o.joy = null; }
     }
     this.objs = this.objs.filter(o => !o.dead);
+    // the grass stands still: grown, with whatever is left of it
+    for (const m of this.meadow) { m.t0 = -99; m.blades = m.blades.filter(b => b.cut == null); m.left = m.blades.length; }
+    this.meadow = this.meadow.filter(m => m.left > 0);
+    this.box.hop = this.box.peek = -9;
     this.ripples = [];
     this.endBall(); this.endBore();
     this.regrowAt = this.hatKick = -9;
@@ -858,7 +920,8 @@ class Scene {
     if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
     if (this.ripples.length) return true;
-    if (this.ball || this.bore || this.doodles.length || this.splashes.length || this.t - this.hatKick < 0.7 || this.t - this.regrowAt < 0.9) return true;
+    // (the grazing and its "nom"s are slow: they carry on at the idle rate)
+    if (this.ball || this.bore || this.doodles.some(d => !d.calm) || this.splashes.length || this.t - this.hatKick < 0.7 || this.t - this.regrowAt < 0.9 || this.t - this.box.hop < 0.8) return true;
     for (const o of this.objs) if (o.state === 'fall' || (o.state === 'fly' && !this.reduced) || o.dying != null || (o.land > 0 && this.t - o.land < 0.4)) return true;
     return this.beam.steer > 0.01 && this.beam.steer < 0.99 && !this.reduced;
   }
@@ -894,7 +957,7 @@ class Scene {
     this.windTotal = this.windAmb + this.wind;
     if (!rm) this.drift += dt * (1 + this.windTotal * 2.4);
     // clouds lean away from the pointer
-    for (const cl of [...g.clouds, g.sheepCloud]) {
+    for (const cl of [...g.clouds, g.sheepCloud, ...(this.box.cl ? [this.box.cl] : [])]) {
       let tx = 0, ty = 0;
       if (this.ptr.on && !rm) {
         const p = this.cloudXY(cl, true), dx = p.x - this.ptr.x, dy = p.y - this.ptr.y, r = 170 * u, dd = Math.hypot(dx, dy);
@@ -913,7 +976,10 @@ class Scene {
     if (!rm && this.t > this.blink.next) { this.blink.at = this.t; this.blink.next = this.t + 3 + Math.random() * 5; }
     this.updateBeam(dt);
     this.ripples = this.ripples.filter(r => this.t - r.t0 < 2.2);
+    if (!this.flocked) this.flock();
     this.updateObjs(dt);
+    this.updateMeadow();
+    this.updateBox(dt);
     this.updateBall(dt);
     this.updateBore();
     this.doodles = this.doodles.filter(d => this.t - d.t0 < d.life);
@@ -959,13 +1025,7 @@ class Scene {
       } else if (rm) {
         // reduced motion: everything holds still where it appeared
       } else if (o.state === 'land') {
-        const dx = o.x - this.ptr.x, dy = o.y - this.ptr.y, near = this.ptr.on && o.kind === 'sheep' && dx * dx + dy * dy < (110 * u) ** 2;
-        const stroll = Math.sin(this.t * 0.35 + o.seed) > 0.8 ? (o.flip ? -1 : 1) * (o.kind === 'cow' ? 7 : 12) * u : 0;
-        o.vx = lerp(o.vx, near ? Math.sign(dx || 1) * 70 * u : stroll, Math.min(1, dt * 3));
-        if (Math.abs(o.vx) > 3 * u) o.flip = o.vx < 0;
-        const nx = o.x + o.vx * dt, ry = this.ridgeY(nx);
-        if (ry == null || ry + o.depth > Math.min(g.H - 8 * u, this.shoreY(nx) - 12 * u) || nx > g.W - 12 * u || Math.abs(nx - g.lh.x) < g.lh.wB * 0.6) o.vx = 0;
-        else { o.x = nx; o.y = ry + o.depth; }
+        this.live(o, dt);
       } else if (o.state === 'float') {
         o.x += this.windTotal * 6 * u * dt;
         o.y = o.ty + Math.sin(this.t * 2.2 + o.seed) * 1.8 * u;
@@ -981,8 +1041,320 @@ class Scene {
       o.lit = rm ? this.inBeam(o.x + this.ox, o.y - 12 * u * o.sc + this.oy) : lerp(o.lit, this.inBeam(o.x + this.ox, o.y - 12 * u * o.sc + this.oy), Math.min(1, dt * 8));
       if (o.dying != null && (rm || this.t - o.dying > 0.7)) o.dead = true;
     }
+    for (const o of this.objs) if (o.dead || o.dying != null) this.letGo(o);
     this.objs = this.objs.filter(o => !o.dead);
   }
+
+  /* ----- a lived-in hill -----
+     A small flock is there from the start, settled where it's seen. Tufts of grass sprout here and there on
+     the visible hill; a sheep or a cow that isn't busy walks over to the nearest free one (across the slope as
+     much as along it), lowers its head and eats it blade by blade, looks pleased, and goes back to idling and
+     wandering. Sheep still run from the pointer, mid-meal or not. All of it is slow, so it runs at the idle rate. */
+  flock() {
+    this.flocked = true;
+    const g = this.g, u = g.u, R = Math.random;
+    if (g.portrait) {
+      // phones: one or two, on whatever land or cloud shows in the first screen
+      for (const kind of ['sheep', R() < 0.4 ? 'cow' : 'sheep']) {
+        const p = this.landSpot({ gap: 50 * u });
+        if (p) this.spawn(p.x, p.y, kind, true);
+        else { const cl = this.cloudSpot(); if (cl && !this.objs.some(o => o.ride === cl)) this.ride(kind, cl, true); }
+      }
+    } else {
+      for (const kind of g.W >= 1200 ? ['sheep', 'cow', 'sheep', 'sheep'] : ['sheep', 'cow', 'sheep']) {
+        const p = this.landSpot({ gap: 64 * u, spread: true, check: 4, snug: true });
+        if (p) this.spawn(p.x, p.y, kind, true);
+      }
+      const d = this.seaSpot();
+      if (d) this.spawn(d.x, d.y, 'duck', true);
+    }
+    // grass already there: one a short walk from somebody (the first meal comes soon), the rest spread out
+    const first = this.objs.find(grazer);
+    for (let i = 0, n = 3 + (R() < 0.5 ? 1 : 0); i < n; i++) this.sprout(true, i === 0 && first && !this.reduced ? first : null);
+    this.sproutAt = this.t + 4 + R() * 4;
+    // not everyone is hungry at once: the one nearest some grass first, soon, and the others in turn
+    const near = o => Math.min(1e9, ...this.meadow.map(m => Math.hypot(m.x - o.x, (m.y - o.y) * 1.5)));
+    this.objs.filter(grazer).sort((a, b) => near(a) - near(b)).forEach((o, k) => {
+      o.hungry = this.t + (k ? 6 + k * (6 + R() * 5) : 0); o.act = 'idle'; o.until = this.t + (k ? 1 + R() * 3 : 1); o.head = 0; o.vd = 0;
+    });
+  }
+  /* A visible spot on the hill for an animal or a tuft, clear of the lighthouse, the cottage, the key and the
+     section's props, at least `gap` from the others (the farthest of a few when `spread`), or near `near`.
+     A few DOM checks at most; null when none shows. */
+  landSpot({ gap = 0, spread = false, near = null, reach = 0, min = 0, check = 3, snug = false, clear = false } = {}) {
+    const g = this.g, u = g.u, R = Math.random, W = g.W, H = g.H, out = [];
+    const others = [...this.objs.filter(o => grazer(o) && o.dying == null && o !== near), ...this.meadow];
+    for (let i = 0; i < 40; i++) {
+      const x = near ? near.x + (R() * 2 - 1) * reach : (g.portrait ? lerp(0.3, 0.97, R()) : lerp(0.5, 0.97, R())) * W;
+      const ry = this.ridgeY(x);
+      if (ry == null || x > W - 22 * u) continue;
+      const room = Math.min(this.shoreY(x) - 16 * u, H - 24 * u, ry + H * 0.36) - ry;
+      if (room < 12 * u) continue;
+      const y = near ? clamp(near.y + (R() * 2 - 1) * reach * 0.45, ry + 6 * u, ry + room) : ry + lerp(8 * u, room, R() ** 0.85);
+      if (near && Math.hypot(x - near.x, y - near.y) < min) continue;
+      // snug: well inside the hill, not on its steep edge over the sea or down at the window's bottom
+      if (snug && (y > H - 84 * u || !this.isLand(x - 46 * u, y) || !this.isLand(x - 46 * u, y + 16 * u))) continue;
+      if (!this.open(x, y)) continue;
+      // clear: not hidden behind an animal's body, nor under its feet
+      if (clear && others.some(o => !o.blades && Math.abs(o.x - x) < 32 * u * o.sc && y > o.y - 36 * u * o.sc && y < o.y + 12 * u)) continue;
+      let d = 1e9;
+      for (const o of others) d = Math.min(d, Math.hypot(o.x - x, (o.y - y) * 1.6));
+      if (d < gap) continue;
+      out.push({ x, y, d });
+    }
+    // spread out, but not into the corners: far enough from the others, then near the middle of the pasture
+    if (spread) { const mid = g.portrait ? 0.7 * W : 0.79 * W, sc = p => Math.min(p.d, 170 * u) - Math.abs(p.x - mid) * 0.3; out.sort((a, b) => sc(b) - sc(a)); }
+    // seen: its middle, and its ends too unless it's only a walk's goal
+    for (let i = 0; i < Math.min(check, out.length); i++) {
+      const p = out[i];
+      if (this.seen(p.x, p.y - 6 * u) && this.seen(p.x, p.y - 24 * u) && (near || (this.seen(p.x - 20 * u, p.y - 8 * u) && this.seen(p.x + 20 * u, p.y - 8 * u)))) return p;
+    }
+    return null;
+  }
+  // nothing of the scene's own in the way: the lighthouse, the cottage, the key, the huts, the desk
+  open(x, y) {
+    const g = this.g, u = g.u, T = g.lh, k = g.cot;
+    if (g.key && x > g.key.x0 && x < g.key.x1 && y > g.key.y0 - 30 * u) return false;
+    if (Math.abs(x - T.x) < T.wB * 0.9 + 20 * u && y < T.base + 42 * u) return false;
+    if (Math.abs(x - k.x) < k.w * 0.8 + 18 * u && y < k.base + 32 * u) return false;
+    if (this.state === 'tiling' || this.pres.tiling > 0.01) for (const q of hutSpots(this)) if (Math.abs(x - q.x) < 42 * u && y > q.y - 74 * u && y < q.y + 24 * u) return false;
+    if (this.state === 'widgets' || this.pres.widgets > 0.01) { const d = deskSpot(this); if (Math.abs(x - d.x) < 66 * u && y > d.y - 110 * u && y < d.y + 24 * u) return false; }
+    return true;
+  }
+  // a visible spot on the sea for the duck, clear of "the sea (wet)"
+  seaSpot() {
+    const u = this.g.u, lab = seaLabelSpot(this);
+    for (let i = 0; i < 4; i++) {
+      const p = this.spot('duck');
+      if (p.fromSky) return null;
+      if (!lab || !(p.x > lab.x - 46 * u && p.x < lab.x + 160 * u && p.y > lab.y - 34 * u && p.y < lab.y + 54 * u)) return p;
+    }
+    return null;
+  }
+  // a tuft of grass where it's seen (near `near` if it can); `grown` for the ones already there when the page opens
+  sprout(grown, near) {
+    const u = this.g.u, R = Math.random;
+    const p = (near && this.landSpot({ near, reach: 110 * u, min: 55 * u, gap: 44 * u, snug: true, clear: true, check: 3 }))
+      || this.landSpot({ gap: 48 * u, snug: true, clear: true, spread: grown });
+    if (!p) return null;
+    const sc = this.depthScale(p.y) * 0.85, n = 5 + ((R() * 3) | 0), blades = [];
+    for (let i = 0; i < n; i++) {
+      const f = i / (n - 1) - 0.5;
+      blades.push({
+        dx: (f * 13 + (R() - 0.5) * 1.8) * u * sc, a: f * 1.05 + (R() - 0.5) * 0.22, flex: 0.7 + R() * 0.5,
+        l: (14 + R() * 7) * (1 - Math.abs(f) * 0.5) * u * sc, d: Math.abs(f) * 1.1 + R() * 0.3, cut: null,
+      });
+    }
+    const m = { x: p.x, y: p.y, depth: p.y - this.ridgeY(p.x), sc, blades, left: n, lastCut: -9, by: null, t0: grown || this.reduced ? -99 : this.t, ph: R() * TAU };
+    this.meadow.push(m);
+    return m;
+  }
+  updateMeadow() {
+    if (!this.flocked) return;
+    const t = this.t, R = Math.random;
+    // the last blade gone: the tuft goes, and whoever ate it looks pleased
+    for (const m of this.meadow) {
+      if (m.left > 0 || t - m.lastCut < 0.45) continue;
+      m.gone = true;
+      const o = m.by;
+      if (o) { o.tuft = null; o.act = 'happy'; o.joy = t; o.until = t + 1.3; o.hungry = t + 30 + R() * 30; }
+    }
+    this.meadow = this.meadow.filter(m => !m.gone);
+    // a new one now and then, only while the page shows (the scene's time stands still while it's hidden)
+    if (this.reduced || t < this.sproutAt) return;
+    const m = this.meadow.length < MEADOW_MAX ? this.sprout(false) : null;
+    this.sproutAt = t + (m || this.meadow.length >= MEADOW_MAX ? lerp(SPROUT_MIN, SPROUT_MAX, R()) : 3);
+  }
+  letGo(o) { if (o.tuft) { if (o.tuft.by === o) o.tuft.by = null; o.tuft = null; } }
+  // one animal's day: idle, wander, walk to a tuft and eat it, look pleased; run from the pointer (sheep)
+  live(o, dt) {
+    const g = this.g, u = g.u, t = this.t, R = Math.random, cow = o.kind === 'cow';
+    if (o.act == null) { o.act = 'idle'; o.until = t + 0.5 + R() * 2.5; o.hungry ??= t + 3 + R() * 10; o.head = 0; o.vd = 0; o.bites = 0; }
+    o.vd ??= 0;
+    const dx = o.x - this.ptr.x, dy = o.y - this.ptr.y;
+    const scared = this.ptr.on && !cow && o.dying == null && dx * dx + dy * dy < (110 * u) ** 2;
+    let wx = 0, wd = 0, head = 0;
+    if (scared) {
+      this.letGo(o);
+      o.act = 'flee'; o.until = t + 0.5 + R() * 0.8;
+      wx = Math.sign(dx || 1) * 70 * u; wd = clamp(dy / (110 * u), -1, 1) * 26 * u;
+    } else {
+      if ((o.act === 'flee' || o.act === 'happy') && t > o.until) { o.act = 'idle'; o.until = t + 1.5 + R() * 3.5; }
+      if (o.act === 'idle' && t > o.until) this.decide(o);
+      if (o.act === 'walk' || o.act === 'go') {
+        const ex = o.tx - o.x, ed = o.td - o.depth, dist = Math.hypot(ex, ed);
+        if (o.act === 'go' && dist < 2.5 * u && o.tuft) { o.act = 'eat'; o.bite = t + 0.8; o.flip = o.tuft.x < o.x; }
+        else if (dist < 2.5 * u || t > o.until || (o.act === 'go' && !o.tuft)) { this.letGo(o); o.act = 'idle'; o.until = t + 2 + R() * 4; }
+        else {
+          const v = (o.act === 'go' ? 19 : 13) * u * (cow ? 0.65 : 1) * Math.min(1, dist / (6 * u));
+          wx = ex / dist * v; wd = ed / dist * v;
+        }
+      }
+      if (o.act === 'eat') {
+        const m = o.tuft;
+        if (!m) { o.act = 'idle'; o.until = t + 1 + R() * 2; }
+        else {
+          head = 1;
+          o.flip = m.x < o.x;
+          if (m.left > 0 && t > o.bite && o.head > 0.85) this.bite(o, m);
+        }
+      }
+    }
+    o.head = lerp(o.head || 0, head, Math.min(1, dt * 4));
+    // walk, in x and in depth (across the slope), as far as the hill allows
+    const k = Math.min(1, dt * 3);
+    o.vx = lerp(o.vx, wx, k); o.vd = lerp(o.vd, wd, k);
+    if (o.act !== 'eat' && Math.abs(o.vx) > 2.5 * u) o.flip = o.vx < 0;
+    const roomAt = (x, ry) => Math.min(g.H - 10 * u, this.shoreY(x) - 12 * u) - ry;
+    const nx = o.x + o.vx * dt, ny = this.ridgeY(nx);
+    if (ny == null || roomAt(nx, ny) < 3 * u || nx > g.W - 12 * u || (Math.abs(nx - g.lh.x) < g.lh.wB * 0.6 && o.depth < 30 * u)) o.vx = 0;
+    else o.x = nx;
+    const ry = this.ridgeY(o.x);
+    if (ry == null) return;
+    o.depth = clamp(o.depth + o.vd * dt, 3 * u, Math.max(3 * u, roomAt(o.x, ry)));
+    o.y = o.ty = ry + o.depth;
+    o.sc = this.depthScale(o.y);
+  }
+  // what next: grass if hungry and there's some free nearby, otherwise a short walk or a rest
+  decide(o) {
+    const t = this.t, R = Math.random, u = this.g.u;
+    // standing where one of the section's little scenes now shows: out of its way first
+    if (!this.open(o.x, o.y - 6 * u)) {
+      const p = this.landSpot({ near: o, reach: 170 * u, min: 40 * u, gap: 34 * u, check: 1 });
+      if (p) { o.act = 'walk'; o.tx = p.x; o.td = p.y - this.ridgeY(p.x); o.until = t + 14; return; }
+    }
+    if (t > o.hungry && this.feed(o)) return;
+    if (R() < 0.5) {
+      const p = this.landSpot({ near: o, reach: 100 * u, min: 30 * u, gap: 34 * u, check: 1 });
+      if (p) { o.act = 'walk'; o.tx = p.x; o.td = p.y - this.ridgeY(p.x); o.until = t + 14; return; }
+    }
+    o.act = 'idle'; o.until = t + 2.5 + R() * 4.5;
+    if (t > o.hungry) o.hungry = t + 3 + R() * 4; // nothing to eat in reach: look again in a bit
+  }
+  // the nearest free tuft in reach (grown, nobody else at it): walk over to stand with the mouth at it
+  feed(o) {
+    const g = this.g, u = g.u, reach = (o.kind === 'cow' ? 21 : 19) * u;
+    // they graze in turns: a few at the grass at once, at most, so the hill stays calm
+    const herd = this.objs.filter(q => grazer(q) && q.dying == null), busy = herd.filter(q => q.tuft).length;
+    if (busy >= Math.min(3, Math.max(1, Math.round(herd.length * 0.4)))) return false;
+    let best = null, bd = 320 * u;
+    for (const m of this.meadow) {
+      if (m.by || m.left <= 0 || this.t - m.t0 < 2.2) continue;
+      const d = Math.hypot(m.x - o.x, (m.y - o.y) * 1.5);
+      if (d < bd) { bd = d; best = m; }
+    }
+    if (!best) return false;
+    const sc = this.depthScale(best.y);
+    for (const f of best.x >= o.x ? [1, -1] : [-1, 1]) {
+      const x = best.x - f * reach * sc, ry = this.ridgeY(x);
+      if (ry == null || x > g.W - 14 * u) continue;
+      const d = best.y - ry, room = Math.min(g.H - 10 * u, this.shoreY(x) - 12 * u) - ry;
+      if (d < 3 * u || d > room || (Math.abs(x - g.lh.x) < g.lh.wB * 0.6 && d < 30 * u)) continue;
+      // not where another animal already stands
+      if (this.objs.some(q => q !== o && grazer(q) && Math.abs(q.x - x) < 30 * u * sc && Math.abs(q.y - best.y) < 14 * u * sc)) continue;
+      best.by = o; o.tuft = best; o.act = 'go'; o.tx = x; o.td = d; o.until = this.t + 45;
+      return true;
+    }
+    return false;
+  }
+  // a blade gone, the one nearest the mouth; every other bite, a "nom"
+  bite(o, m) {
+    const t = this.t, u = this.g.u, f = o.flip ? -1 : 1, mx = o.x + f * 20 * u * o.sc;
+    let pick = null;
+    for (const b of m.blades) if (b.cut == null && (!pick || Math.abs(m.x + b.dx - mx) < Math.abs(m.x + pick.dx - mx))) pick = b;
+    if (pick) { pick.cut = t; m.left--; m.lastCut = t; }
+    o.bite = t + (o.kind === 'cow' ? 1.3 : 1) + Math.random() * 0.35;
+    if ((o.bites = (o.bites || 0) + 1) % 2 === 1) {
+      const words = o.kind === 'cow' ? ['crunch', 'munch', 'crunch'] : ['nom', 'nom nom', 'munch'];
+      this.doodle('munch', o.x + f * 23 * u * o.sc, o.y - 31 * u * o.sc, { text: words[((o.bites - 1) / 2 | 0) % 3], align: f > 0 ? 'left' : 'right', life: 1.15, calm: true });
+    }
+  }
+
+  /* ----- the sheep in a box -----
+     A white box with a cloud's puffs for a lid drifts across the sky with the clouds, at a height of its own.
+     When the light finds it, two eyes look out through its air holes (glinting at night); a click or a tap
+     makes it hop and say baa. It isn't a surprise: clicking it drops nothing. Its label shows while it's in
+     clear sky. */
+  placeBox() {
+    const g = this.g, u = g.u, W = g.W, b = this.box, k = boxK(this), T = g.lh, L = g.lamp, sc = g.sheepCloud;
+    b.v = `${this.layoutV}|${this.fontsV}`;
+    const size = b.size = Math.max(13, 17 * u), cw = textW(this, 'a cloud (or a sheep)', size);
+    b.tw = textW(this, 'a sheep (in a box)', size);
+    // where the box and its label don't show (rects, and discs as [x, y, r]): the bar, the notes (a guess; the
+    // DOM has the last word), near the horizon, the lighthouse, its halo and labels, the cloud with legs and its
+    // label (the sun and the moon, while they're up, are added as they move)
+    const noteX = W < 1024 ? W * 0.05 + Math.min(W * 0.58, 620) + 16 : g.note.x1 + 4;
+    b.hard = [
+      [0, 0, W, g.top + 8], g.portrait ? [0, g.note.y0 - 10, W, g.H] : [0, 0, noteX, g.H], [-1e4, g.horizon - 26 * u, 2e4, 2e4],
+      [L.x, L.y, T.er * 4.9], [T.x - T.wB * 0.8, T.hatTop, T.x + T.wB * 0.8, T.base],
+      [sc.x0 - sc.w * 0.66, sc.y - sc.w * 0.5, sc.x1 + sc.w * 0.66, sc.y + 18 * u],
+      [sc.x0 + sc.w * 0.3, sc.y - 6 * u, sc.x1 + sc.w * 0.42 + (g.portrait ? 6 : 14 * u) + 16 * u + cw + 6, sc.y + (g.portrait ? 12 : 22 * u) + 4 * u + size * 0.8],
+      ...lighthouseLabelRects(this, textW(this, 'a lighthouse (stable)', size), size),
+    ];
+    // it drifts with the clouds, at a height of its own, as far as can be from theirs
+    const sky = g.horizon - g.top, lo = g.top + sky * (g.portrait ? 0.12 : 0.18), hi = g.top + sky * (g.portrait ? 0.34 : 0.46);
+    const others = [...g.clouds.map(cl => cl.y), sc.y];
+    let y = lo, far = -1;
+    for (let cy = lo; cy <= hi; cy += 3 * u) { const d = Math.min(...others.map(o => Math.abs(o - cy))); if (d > far) { far = d; y = cy; } }
+    // first seen in open sky between the headline and the lighthouse; after a resize, where it was
+    const frac = b.frac ?? (g.portrait ? 0.5 : 0.62);
+    b.cl = { x0: frac * W + 180 * u - this.drift * BOX_SP * u, y, w: (2 * BOX.hw + BOX.dx) * k, sp: BOX_SP, seed: 91, ox: b.cl?.ox ?? 0, oy: b.cl?.oy ?? 0 };
+    b.seenAt = -9;
+  }
+  // the box right now: where it drifts, its tilt, and (unless `still`, as for its label) the hop with its squash
+  boxAt(still) {
+    const b = this.box, u = this.g.u, k = boxK(this), rm = this.reduced, t = this.t, q = this.cloudXY(b.cl);
+    let y = q.y + (rm ? 0 : Math.sin(t * 0.7 + 1) * 3 * u), rot = rm ? 0 : Math.sin(t * 0.5) * 0.035, sq = 0;
+    const a = still ? -1 : t - b.hop;
+    if (!rm && a >= 0 && a < 0.75) {
+      if (a < 0.08) sq = Math.sin(a / 0.08 * Math.PI) * 0.1;
+      else if (a < 0.52) { const f = (a - 0.08) / 0.44; y -= Math.sin(f * Math.PI) * 18 * k; rot -= Math.sin(f * Math.PI) * 0.14; }
+      else sq = Math.sin((a - 0.52) / 0.23 * Math.PI) * 0.14;
+    }
+    return { x: q.x, y, rot, sq, k };
+  }
+  boxHit(x, y) {
+    if (this.box.v == null || !this.box.cl) return false;
+    const p = this.boxAt(), k = p.k, pad = this.ptr.kind === 'touch' ? 14 : 7;
+    return x > p.x + LID_X0 * k - pad && x < p.x + LID_X1 * k + pad && y > p.y + LID_TOP * k - pad && y < p.y + BOX.hh * k + pad;
+  }
+  // a click or a tap: it hops (not without motion) and says so
+  baa() {
+    const b = this.box, p = this.boxAt(), k = p.k;
+    if (!this.reduced) b.hop = this.t;
+    b.peek = this.t;
+    // beside it, toward the lighthouse, where the hop doesn't cover it
+    this.doodle('baa', p.x + (BOX.hw + BOX.dx + 6) * k, p.y + (BOX.dy - BOX.hh + 1) * k, { text: 'baa!', align: 'left', life: 1.4 });
+  }
+  updateBox(dt) {
+    const b = this.box, rm = this.reduced, t = this.t;
+    if (b.v !== `${this.layoutV}|${this.fontsV}`) this.placeBox();
+    const p = this.boxAt(), lit = this.inBeam(p.x + this.ox, p.y + this.oy);
+    b.frac = p.x / this.g.W;
+    b.lit = rm ? lit : lerp(b.lit, lit, Math.min(1, dt * 8));
+    // the eyes come to the holes while the light is on it (and for a moment after a baa), blinking now and then
+    const want = b.lit > 0.4 || t - b.peek < 1.8;
+    if (want !== b.open) { b.open = want; b.openAt = t; b.nextBlink = t + 1.4 + Math.random() * 2; }
+    if (b.open && !rm && t > b.nextBlink) { b.blinkAt = t; b.nextBlink = t + 1.8 + Math.random() * 2.6; }
+    // its label, while it's in clear sky: looked at a few times a second, faded in and out
+    if (t - b.seenAt > 0.3 || rm) { b.seenAt = t; b.side = this.pres.hero > 0.01 ? this.boxSide(this.boxAt(true)) : null; if (b.side) b.lastSide = b.side; }
+    b.la = rm ? (b.side ? 1 : 0) : lerp(b.la, b.side ? 1 : 0, Math.min(1, dt * 3));
+  }
+  // the side of the box its label fits on right now (below, left or right), or null: the box and the label in the
+  // window, clear of what's in the way, and seen
+  boxSide(p) {
+    const g = this.g, u = g.u, W = g.W, k = p.k, sp = this.sunPos(), mp = this.moonPos(), moon = 25 * u * 1.15, z = 26 * u, hard = [...this.box.hard];
+    if (sp.a > 0.1) hard.push([sp.x, sp.y, 38 * u * 1.2]);
+    if (mp.a > 0.1) hard.push([mp.x, mp.y, moon], [mp.x + moon, mp.y - moon - z * 0.6, mp.x + moon + z, mp.y - moon * 0.2]);
+    const r = [p.x + LID_X0 * k, p.y + LID_TOP * k, p.x + LID_X1 * k, p.y + BOX.hh * k];
+    if (r[0] < 6 || r[2] > W - 6 || hard.some(q => overlaps(r, q)) || !this.seen(p.x, p.y)) return null;
+    for (const side of ['below', 'left', 'right']) {
+      const q = boxLabel(p.x, p.y, k, u, this.box.size, this.box.tw, side);
+      if (q.x0 < 6 || q.x1 > W - 6 || hard.some(h => overlaps([q.x0, q.y0, q.x1, q.y1], h))) continue;
+      if (this.seen((q.x0 + q.x1) / 2, (q.y0 + q.y1) / 2)) return side;
+    }
+    return null;
+  }
   cloudXY(cl, raw) {
     const g = this.g;
     if (cl === g.sheepCloud) return { x: cl.x + (raw ? 0 : cl.ox), y: cl.y + (raw ? 0 : cl.oy) };
@@ -1079,6 +1451,7 @@ function drawScene(s, c) {
   drawMoon(s, c);
   for (let i = 0; i < g.clouds.length; i++) drawCloud(s, c, g.clouds[i], 'cloud' + i);
   drawCloud(s, c, g.sheepCloud, 'sheepcloud', true);
+  drawBox(s, c);
   drawIsle(s, c);
   const T = g.lh, x0 = g.portrait ? g.ridge[0][0] - 8 : Math.max(0, g.ridge[0][0] - 10);
   const y0 = Math.min(T.top - T.gal * 1.2, g.cot.base - g.cot.h * 4.2) - 10 * u;
@@ -1089,9 +1462,11 @@ function drawScene(s, c) {
   drawSmoke(s, c);
   drawEye(s, c);
   drawHat(s, c);
+  // animals and the grass on the hill, back to front (a tuft in front of the one eating it)
+  const items = [...s.objs.map(o => [o.y, o]), ...s.meadow.map(m => [m.y + 0.5, m])].sort((a, b) => a[0] - b[0]);
+  for (const [, it] of items) it.blades ? drawMeadow(s, c, it) : drawObj(s, c, it);
+  // the section's little scenes over them: animals pass behind the desk, the huts and the keeper
   drawStates(s, c);
-  const objs = s.objs.slice().sort((a, b) => a.y - b.y);
-  for (const o of objs) drawObj(s, c, o);
   if (s.pres.hero > 0.01) drawLabels(s, c);
   drawSplashes(s, c);
   drawBall(s, c);
@@ -1212,6 +1587,58 @@ function drawCloud(s, c, cl, name, legs) {
   });
 }
 
+/* the sheep's box, white and soft like the clouds it drifts with: a box below, a cloud's puffs for a lid and three
+   air holes in front; while the light is on it, eyes in two of them that look at the lamp, blink, and glint at night */
+function drawBox(s, c) {
+  const b = s.box;
+  if (b.v == null || !b.cl) return;
+  const g = s.g, P = s.P, p = s.boxAt(), k = p.k, t = s.t, rm = s.reduced, { hw, hh, dx, dy } = BOX;
+  if (p.x < -(hw + dx) * k * 1.8 || p.x > g.W + hw * k * 1.8) return;
+  const night = smooth(0.5, 0.9, s.d);
+  c.save(); c.translate(p.x, p.y + hh * k); c.rotate(p.rot); c.scale(1 + p.sq * 0.6, 1 - p.sq); c.translate(0, -hh * k);
+  const K = q => q.map(([x, y]) => [x * k, y * k]);
+  const lid = K(LID);
+  print(c, K([[hw, -hh], [hw + dx, -hh + dy], [hw + dx, hh + dy], [hw, hh]]), mix(P.cloud, P.sky, 0.2));
+  print(c, K([[-hw, -hh], [hw, -hh], [hw, hh], [-hw, hh]]), mix(P.cloud, P.sky, 0.07));
+  print(c, lid, P.cloud);
+  // the holes, dark; eyes in two of them while the light is on the box (or just after a baa)
+  let open = b.open ? (rm ? 1 : smooth(0, 0.2, t - b.openAt)) : (rm ? 0 : 1 - smooth(0, 0.14, t - b.openAt));
+  if (b.open && !rm && t - b.blinkAt < 0.16) open *= Math.abs(Math.cos((t - b.blinkAt) / 0.16 * Math.PI));
+  const L = s.g.lamp, look = Math.atan2(L.y - p.y, L.x - p.x), r = 3.4 * k;
+  BOX.holes.forEach(([hx, hy], i) => {
+    const x = hx * k, y = hy * k;
+    dot(c, x, y, r, mix(P.ink, P.sky, 0.15));
+    if (i > 1 || open < 0.04) return;
+    const ew = r * 0.8, eh = r * 0.8 * open;
+    c.beginPath(); c.ellipse(x, y + (1 - open) * r * 0.3, ew, Math.max(0.3, eh), 0, 0, TAU); c.fillStyle = rgba(mix(hex('#FFFFFF'), P.beam, 0.4 * night)); c.fill();
+    c.save(); c.clip();
+    const px = x + Math.cos(look) * r * 0.32, py = y + Math.sin(look) * r * 0.28;
+    dot(c, px, py, r * 0.44, INK);
+    dot(c, px - r * 0.16, py - r * 0.2, r * 0.15 + 0.25, '#FFFFFF');
+    c.restore();
+  });
+  // the pen: the box below the puffs, the puffs' edge, the corner where front meets side lighter, a ring round
+  // each hole, and a curl of puff on the lid as on the clouds
+  c.beginPath();
+  edges(c, K([[-hw, -9.5], [-hw, hh], [hw, hh], [hw + dx, hh + dy], [hw + dx, -9.5]]), DET * 1.05, 3, false, { ov: 1.2 });
+  ribbon(c, lid, DET, 5, { tin: 2, tout: 2 });
+  edges(c, K([[hw, -9.5], [hw, hh]]), TEX * 1.25, 9, false, { ov: 0.8 });
+  BOX.holes.forEach(([hx, hy], i) => ribbon(c, ellipse(hx * k, hy * k, r, r, 12, i), TEX, 30 + i, { tin: 1, tout: 1, w0: 1, w1: 1, amp: 0.2 }));
+  ribbon(c, ellipse(-7 * k, -23 * k, 7.5 * k, 6 * k, 10, Math.PI * 1.05, Math.PI * 1.75), TEX, 3, { tin: 2, tout: 3 });
+  ribbon(c, ellipse(18 * k, -22 * k, 5.5 * k, 4.4 * k, 10, Math.PI * 1.1, Math.PI * 1.7), TEX, 7, { tin: 2, tout: 3 });
+  c.fillStyle = INK; c.fill();
+  // and at night the eyes glint, a little star at each
+  if (open > 0.3 && night > 0.05) {
+    c.beginPath();
+    for (let i = 0; i < 2; i++) {
+      const [hx, hy] = BOX.holes[i], x = hx * k + r * 0.95, y = hy * k - r * 1.05, l = (1.4 + 1.2 * night) * k * open;
+      for (const an of [0.2, 0.2 + Math.PI / 2]) ribbon(c, [[x - Math.cos(an) * l, y - Math.sin(an) * l], [x + Math.cos(an) * l, y + Math.sin(an) * l]], TEX * 0.9, i * 2 + an, { tin: 1, tout: 1, w0: 0.5, w1: 0.5, amp: 0.1 });
+    }
+    c.fillStyle = rgba(P.beam, clamp(night * open * 1.3)); c.fill();
+  }
+  c.restore();
+}
+
 /* the competition: a much smaller lighthouse on a far island */
 function drawIsle(s, c) {
   const g = s.g, u = g.u, P = s.P, I = g.isle, hz = g.horizon;
@@ -1624,6 +2051,63 @@ function drawTufts(s, c) {
   c.fillStyle = INK; c.fill();
 }
 
+/* a tuft of fresh grass on the hill: blades that rise out of the ground one after another, lean with the wind
+   and away from the pointer, part for an animal walking through, and go one by one when something eats them */
+function drawMeadow(s, c, m) {
+  const g = s.g, u = g.u, P = s.P, t = s.t, rm = s.reduced, age = t - m.t0;
+  // a section's props stand in front of the grass (the huts, the desk)
+  let alpha = 1;
+  if (s.pres.tiling > 0.01) for (const q of hutSpots(s)) if (Math.abs(m.x - q.x) < 34 * u && m.y > q.y - 64 * u && m.y < q.y + 8 * u) alpha = Math.min(alpha, 1 - s.pres.tiling);
+  if (s.pres.widgets > 0.01) { const d = deskSpot(s); if (Math.abs(m.x - d.x) < 56 * u && m.y > d.y - 100 * u && m.y < d.y + 8 * u) alpha = Math.min(alpha, 1 - s.pres.widgets); }
+  if (alpha <= 0.01) return;
+  // the lean: the wind and its gusts, away from the pointer, apart for a passer-by, toward the mouth eating it
+  let a = rm ? 0.12 : Math.sin(t * 1.6 + m.ph) * 0.14 * (0.6 + s.windAmb) + s.windTotal * 0.36;
+  if (!rm) {
+    if (s.ptr.on) { const dx = m.x - s.ptr.x, dy = m.y - 6 * u - s.ptr.y, r = 95 * u, d2 = dx * dx + dy * dy; if (d2 < r * r) a += Math.sign(dx || 1) * 1.05 * (1 - Math.sqrt(d2) / r); }
+    for (const o of s.objs) {
+      if (!grazer(o) || o === m.by || o.state !== 'land') continue;
+      const dx = m.x - o.x, w = 19 * u * o.sc;
+      if (Math.abs(dx) < w && Math.abs(m.y - o.y) < 9 * u * o.sc) a += Math.sign(dx || 1) * 0.95 * (1 - Math.abs(dx) / w);
+    }
+    const e = m.by;
+    if (e && e.act === 'eat') a += (e.flip ? 1 : -1) * (0.2 + 0.16 * Math.sin(t * 9 + e.seed)) * e.head;
+  }
+  const blades = [];
+  for (const b of m.blades) {
+    const gk = rm ? 1 : pop((age - b.d) / 0.75), ck = b.cut == null ? 1 : 1 - clamp((t - b.cut) / 0.4) ** 2;
+    if (gk <= 0.02 || ck <= 0.03) continue;
+    const L = b.l * gk * ck, th = clamp(b.a + a * b.flex, -1.45, 1.45), bx = m.x + b.dx, by = m.y + 1.2 * u;
+    const mx = bx + Math.sin(th * 0.4 + b.a * 0.3) * L * 0.55, my = by - Math.cos(th * 0.4) * L * 0.55, tx = bx + Math.sin(th) * L, ty = by - Math.cos(th) * L;
+    const pts = [];
+    for (let i = 0; i <= 6; i++) { const q = i / 6, r = 1 - q; pts.push([r * r * bx + 2 * r * q * mx + q * q * tx, r * r * by + 2 * r * q * my + q * q * ty]); }
+    blades.push({ pts, w: (3.9 + 0.6 * ck) * u * m.sc, L, gk: clamp(gk) });
+  }
+  if (!blades.length) return;
+  c.save(); c.globalAlpha = alpha;
+  // the green, printed off the line
+  const night = smooth(0.4, 0.9, s.d);
+  c.beginPath();
+  for (const { pts, w } of blades) {
+    const l = [], r = [], n = pts.length - 1;
+    for (let i = 0; i <= n; i++) {
+      const p0 = pts[Math.max(0, i - 1)], p1 = pts[Math.min(n, i + 1)], dx = p1[0] - p0[0], dy = p1[1] - p0[1], dl = Math.hypot(dx, dy) || 1, hw = w * (1 - i / n) * 0.5 + 0.25;
+      l.push([pts[i][0] - dy / dl * hw + REGX, pts[i][1] + dx / dl * hw + REGY]); r.push([pts[i][0] + dy / dl * hw + REGX, pts[i][1] - dx / dl * hw + REGY]);
+    }
+    const ring = [...l, ...r.reverse()];
+    c.moveTo(ring[0][0], ring[0][1]);
+    for (const p of ring) c.lineTo(p[0], p[1]);
+    c.closePath();
+  }
+  c.fillStyle = rgba(mix(P.hill2, C.sprout, 0.85 * (1 - night))); c.fill();
+  // the pen: one stroke a blade, and a little ground under the tuft that grows and goes with it
+  c.beginPath();
+  blades.forEach(({ pts, L }, i) => ribbon(c, pts, TEX * (L > 6 * u ? 0.8 : 0.65), m.ph * 3 + i, { tin: 1, tout: 6, w0: 0.9, w1: 0.12, amp: 0.25 }));
+  const gw = 9 * u * m.sc * Math.min(1, Math.max(...blades.map(b => b.gk)) * 1.4) * Math.max(0.4, blades.length / m.blades.length);
+  ribbon(c, [[m.x - gw, m.y + 2.2 * u], [m.x - gw * 0.3, m.y + 1 * u], [m.x + gw * 0.4, m.y + 1.2 * u], [m.x + gw, m.y + 2.4 * u]], TEX, m.ph, { tin: 2, tout: 3, amp: 0.3 });
+  c.fillStyle = INK; c.fill();
+  c.restore();
+}
+
 function drawSmoke(s, c) {
   if (s.reduced) return;
   const g = s.g, u = g.u, k = g.cot, x0 = k.x - k.w / 2 + k.w * 0.68 + k.w * 0.075, y0 = k.base - k.h - k.h * 1.5;
@@ -1749,7 +2233,7 @@ function drawDoorway(s, c, p) {
 /* widgets: a sheep at a tiny desk with a laptop, typing */
 function drawDesk(s, c, p) {
   const g = s.g, P = s.P, sc = pop(p) * (g.portrait ? 1.75 : 2.1), u = g.u * sc;
-  const x = g.portrait ? g.W * 0.5 : g.W * 0.7, ry = s.ridgeY(x), y = g.portrait ? ry + (s.shoreY(x) - ry) * 0.66 : ry + g.H * 0.2;
+  const { x, y } = deskSpot(s);
   if (sc < 0.05) return;
   const typing = s.reduced ? 0 : s.t * 11, wool = mul(C.wool, P.paper), night = smooth(0.4, 0.8, s.d);
   c.save(); c.translate(x, y);
@@ -1912,6 +2396,14 @@ function drawLabels(s, c) {
     label(c, 'a cloud (or a sheep)', lx + 16 * u, ly + 4 * u, size, col, 'left');
     c.fillStyle = col; arrow(c, [[lx + 12 * u, ly + 3 * u], [lx, ly + 2 * u], [p.x + w * 0.36, p.y + 6 * u]], TEX * 1.1, 9);
   }
+  // the sheep in its box, where placeBox found room for the label
+  const bx = s.box;
+  if (bx.lastSide && bx.la > 0.01 && bx.cl) {
+    const p = s.boxAt(true), q = boxLabel(p.x, p.y, p.k, u, size, bx.tw, bx.lastSide), lc = rgba(mix(P.ink, P.paper, night), s.pres.hero * bx.la);
+    label(c, 'a sheep (in a box)', q.tx, q.ty, size, lc, q.align);
+    c.fillStyle = lc; arrow(c, q.arrow, TEX * 1.1, 11);
+    c.fillStyle = col;
+  }
   // the sea
   const sea = seaLabelSpot(s);
   if (sea) {
@@ -1920,6 +2412,37 @@ function drawLabels(s, c) {
     c.fillStyle = rgba(P.paper, s.pres.hero); arrow(c, [[sea.x + wTxt * 0.62, sea.y + 11 * u], [sea.x + wTxt * 0.5, sea.y + 22 * u], [sea.x + wTxt * 0.3, sea.y + 30 * u]], TEX * 1.1, 10);
   }
 }
+function textW(s, text, size) { const c = s.ctx; c.save(); c.font = `400 ${size}px ${HAND}`; const w = c.measureText(text).width; c.restore(); return w; }
+// what "a lighthouse (stable)" and its arrow cover (as drawLabels places them), for keeping out of their way
+function lighthouseLabelRects(s, w, size) {
+  const g = s.g, u = g.u, T = g.lh, h = size * 0.75;
+  if (g.portrait) {
+    const tx = T.x - T.wB * 1.9, ty = T.top + T.h * 0.3;
+    return [[tx - w - 4, ty - h, tx + 4, ty + h], [tx, T.top + T.h * 0.2 - 6, T.x - T.wB * 0.62 + 4, ty + 4]];
+  }
+  const tipX = T.x - T.wB * 0.62, tipY = T.top + T.h * 0.6, ax = tipX - 88 * u, ay = tipY + 38 * u;
+  return [[ax - w - 4, ay - h, ax + 4, ay + h], [ax, tipY - 6, tipX + 4, ay]];
+}
+/* "a sheep (in a box)" for a box at (x, y): below it, or beside it, with an arrow back to the box;
+   the text's anchor and alignment, the arrow, and the rect the two take */
+function boxLabel(x, y, k, u, size, tw, side) {
+  const h = size * 0.75, R = (BOX.hw + BOX.dx) * k, Lx = BOX.hw * k, B = BOX.hh * k;
+  if (side === 'below') {
+    const tx = x - Lx * 0.35, ty = y + B + 12 * u + size * 0.55;
+    return { tx, ty, align: 'left', arrow: [[tx + 3 * u, ty - h * 1.05], [tx - 3 * u, ty - h * 1.6], [x - Lx * 0.5, y + B + 3 * u]], x0: Math.min(tx, x - Lx) - 4, y0: y + B + 2, x1: tx + tw + 4, y1: ty + h };
+  }
+  if (side === 'right') {
+    const tx = x + R + 22 * u, ty = y + 9 * u;
+    return { tx, ty, align: 'left', arrow: [[tx - 3 * u, ty - 1 * u], [tx - 11 * u, ty - 2 * u], [x + R + 4 * u, y + 1 * u]], x0: x + R + 2, y0: ty - h, x1: tx + tw + 4, y1: ty + h };
+  }
+  const tx = x - Lx - 20 * u, ty = y + 9 * u;
+  return { tx, ty, align: 'right', arrow: [[tx + 3 * u, ty - 1 * u], [tx + 11 * u, ty - 2 * u], [x - Lx - 4 * u, y + 1 * u]], x0: tx - tw - 4, y0: ty - h, x1: x - Lx - 2, y1: ty + h };
+}
+// where the widgets section's sheep sits at its desk
+function deskSpot(s) {
+  const g = s.g, x = g.portrait ? g.W * 0.5 : g.W * 0.7, ry = s.ridgeY(x);
+  return { x, y: g.portrait ? ry + (s.shoreY(x) - ry) * 0.66 : ry + g.H * 0.2 };
+}
 function seaLabelSpot(s) {
   const g = s.g, u = g.u, wTxt = 112 * u + 10;
   if (g.portrait) { const y = g.horizon + (g.H - g.horizon) * 0.55; return { x: g.W * 0.3, y }; }
@@ -1938,7 +2461,9 @@ function seaLabelSpot(s) {
 function drawObj(s, c, o) {
   const g = s.g, P = s.P, k = g.u * o.sc, lit = o.lit * s.beamI(), sq = s.squash(o), t = s.reduced ? 0 : s.t;
   if (o.dying != null) c.globalAlpha = clamp(1 - (s.t - o.dying) / 0.7);
-  c.save(); c.translate(o.x, o.y);
+  // a sheep pleased with its meal hops, twice
+  const ja = t - (o.joy ?? -99), hop = o.kind === 'sheep' && ja >= 0 && ja < 0.8 ? Math.abs(Math.sin(ja / 0.4 * Math.PI)) * 6 * k * (1 - ja / 0.8) : 0;
+  c.save(); c.translate(o.x, o.y - hop);
   if (lit > 0.15) {
     // a startled "!", in the pen
     const jy = -40 * k - Math.abs(Math.sin(t * 8)) * 3 * k;
@@ -1959,30 +2484,53 @@ function drawObj(s, c, o) {
   c.restore();
   c.globalAlpha = 1;
 }
+/* a grazer's head: up, or lowered into the grass and chewing; `px, py` is where the neck turns, `to` where it
+   goes when the head is down. Draws the head with `draw`, in the head-up coordinates. */
+function head(c, u, o, t, px, py, to, turn, draw) {
+  const hd = o.head || 0, chew = o.act === 'eat' ? Math.sin(t * 9 + o.seed) * hd : 0;
+  c.save();
+  c.translate(lerp(px, to[0], hd) * u, (lerp(py, to[1], hd) + chew * 0.55) * u);
+  c.rotate(hd * turn + chew * 0.07);
+  c.translate(-px * u, -py * u);
+  draw(chew);
+  c.restore();
+}
+// pleased with a meal: a short while after it, eyes shut happily and the tail wags
+const joyAt = (o, t) => { const a = t - (o.joy ?? -99); return a >= 0 && a < 1.3 ? a : -1; };
 function drawSheep(c, u, wool, o, t) {
-  const fall = o.state === 'fall', step = Math.abs(o.vx) > 2 ? Math.sin(t * 14 + o.seed) * 2 * u : 0;
+  const fall = o.state === 'fall', step = Math.hypot(o.vx, o.vd || 0) > 2 ? Math.sin(t * 14 + o.seed) * 2 * u : 0;
   c.beginPath();
   [-8, -3, 5, 10].forEach((lx, i) => ribbon(c, [[lx * u, -10 * u], [lx * u + (fall ? 3 * u : (i % 2 ? step : -step)), 0]], DET * 1.05, i, { tin: 1, tout: 1, w0: 0.9, w1: 1 }));
   c.fillStyle = INK; c.fill();
   const body = [];
   for (let i = 0; i < 40; i++) { const a = i / 40 * TAU, r = 1 + 0.13 * Math.abs(Math.sin(a * 5 + o.seed)); body.push([Math.cos(a) * 14 * u * r, -16 * u + Math.sin(a) * 9.5 * u * r]); }
   shape(c, body, wool, DET, o.seed % 7);
-  // tail puff, black face, an ear, an eye
-  const head = ellipse(15 * u, -19 * u, 5 * u, 6.4 * u, 18, 0, TAU, -0.35);
-  poly(c, head); c.fillStyle = INK; c.fill();
-  const ear = ellipse(11.5 * u, -23.5 * u, 3.6 * u, 1.6 * u, 10, 0, TAU, 0.5);
-  poly(c, ear); c.fill();
-  const tuft = []; for (let i = 0; i < 10; i++) { const a = Math.PI * 1.05 + i / 9 * Math.PI * 0.9; tuft.push([13.5 * u + Math.cos(a) * 5 * u, -24 * u + Math.sin(a) * 2.6 * u]); }
-  c.beginPath(); ribbon(c, tuft, TEX, 3, { tin: 1, tout: 1, color: rgba(wool) }); c.fillStyle = rgba(wool); c.fill();
-  dot(c, 16.6 * u, -20.5 * u, 1.5 * u, '#FFFFFF'); dot(c, 17.1 * u, -20.3 * u, 0.75 * u, INK);
+  // a stubby tail, wagging when pleased
+  const ja = joyAt(o, t);
+  c.save(); c.translate(-14 * u, -19 * u); c.rotate(-0.45 + (ja >= 0 ? Math.sin(ja * 24) * 0.6 * (1 - ja / 1.3) : 0));
+  shape(c, ellipse(-2.4 * u, 0, 3 * u, 2.2 * u, 12), wool, TEX * 1.15, 5, { over: 0.05 });
+  c.restore();
+  // black face, an ear, a tuft of wool on top, an eye
+  head(c, u, o, t, 15, -19, [19, -7.5], 1.05, chew => {
+    poly(c, ellipse(15 * u, -19 * u, 5 * u, 6.4 * u, 18, 0, TAU, -0.35)); c.fillStyle = INK; c.fill();
+    poly(c, ellipse(11.5 * u, -23.5 * u, 3.6 * u, 1.6 * u, 10, 0, TAU, 0.5 + chew * 0.25)); c.fill();
+    const tuft = []; for (let i = 0; i < 10; i++) { const a = Math.PI * 1.05 + i / 9 * Math.PI * 0.9; tuft.push([13.5 * u + Math.cos(a) * 5 * u, -24 * u + Math.sin(a) * 2.6 * u]); }
+    c.beginPath(); ribbon(c, tuft, TEX, 3, { tin: 1, tout: 1 }); c.fillStyle = rgba(wool); c.fill();
+    if (ja >= 0) { c.beginPath(); ribbon(c, ellipse(16.6 * u, -19.6 * u, 1.7 * u, 1.3 * u, 8, Math.PI * 1.1, Math.PI * 1.9), TEX, 4, { tin: 1, tout: 1, w0: 0.9, w1: 0.9, amp: 0.1 }); c.fillStyle = '#FFFFFF'; c.fill(); }
+    else { dot(c, 16.6 * u, -20.5 * u, 1.5 * u, '#FFFFFF'); dot(c, 17.1 * u, -20.3 * u, 0.75 * u, INK); }
+  });
 }
 function drawCow(c, u, white, P, o, t) {
-  const step = Math.abs(o.vx) > 2 ? Math.sin(t * 9 + o.seed) * 2 * u : 0;
+  const step = Math.hypot(o.vx, o.vd || 0) > 2 ? Math.sin(t * 9 + o.seed) * 2 * u : 0;
   c.beginPath();
   [-12, -7, 8, 13].forEach((lx, i) => ribbon(c, [[lx * u, -11 * u], [lx * u + (i % 2 ? step : -step), 0]], DET * 1.15, i, { tin: 1, tout: 1, w0: 0.9, w1: 1 }));
-  ribbon(c, [[-17 * u, -20 * u], [-21 * u, -14 * u], [-20 * u, -7 * u]], TEX, 5, { tin: 1, tout: 1 });
   c.fillStyle = INK; c.fill();
+  // the tail swishes now and then, and wags when pleased
+  const ja = joyAt(o, t), wag = ja >= 0 ? Math.sin(ja * 16) * 0.5 * (1 - ja / 1.3) : Math.sin(t * 1.3 + o.seed) * 0.12;
+  c.save(); c.translate(-17 * u, -20 * u); c.rotate(wag); c.translate(17 * u, 20 * u);
+  c.beginPath(); ribbon(c, [[-17 * u, -20 * u], [-21 * u, -14 * u], [-20 * u, -7 * u]], TEX, 5, { tin: 1, tout: 1 }); c.fillStyle = INK; c.fill();
   dot(c, -20 * u, -6 * u, 2 * u, INK);
+  c.restore();
   const body = curve([[-17 * u, -22 * u], [-6 * u, -26.5 * u], [10 * u, -25.5 * u], [17 * u, -20 * u], [15 * u, -11 * u], [0, -10 * u], [-16 * u, -11 * u], [-18.5 * u, -16 * u]], 3, true);
   print(c, body, white);
   // patches, inside the body
@@ -1991,18 +2539,21 @@ function drawCow(c, u, white, P, o, t) {
   for (let i = 0; i < 3; i++) { const px = (-11 + i * 9 + R() * 4) * u, py = (-21 + R() * 8) * u; poly(c, ellipse(px, py, (3.5 + R() * 3) * u, (2.6 + R() * 2) * u, 12, 0, TAU, R())); c.fillStyle = INK; c.fill(); }
   c.restore();
   c.beginPath(); loop(c, body, DET, 3); c.fillStyle = INK; c.fill();
-  // head, muzzle, horns, an ear
-  const head = curve([[15 * u, -29 * u], [21 * u, -31 * u], [24.5 * u, -26 * u], [24.5 * u, -20 * u], [18 * u, -19.5 * u], [15 * u, -24 * u]], 2, true);
-  shape(c, head, white, DET, 4);
-  const muzzle = ellipse(23 * u, -21 * u, 4 * u, 3 * u, 14);
-  shape(c, muzzle, mul(C.pink, P.paper), TEX * 1.2, 2);
-  dot(c, 22 * u, -21 * u, 0.7 * u, INK); dot(c, 24.6 * u, -21.2 * u, 0.7 * u, INK);
-  dot(c, 20.2 * u, -26.6 * u, 1.05 * u, INK);
-  c.beginPath();
-  ribbon(c, [[16.5 * u, -29.5 * u], [15 * u, -33.5 * u], [16.5 * u, -36 * u]], TEX * 1.3, 1, { tin: 1, tout: 2 });
-  ribbon(c, [[21 * u, -31 * u], [22.5 * u, -34.5 * u], [21.5 * u, -37 * u]], TEX * 1.3, 2, { tin: 1, tout: 2 });
-  c.fillStyle = INK; c.fill();
-  poly(c, ellipse(13.6 * u, -27.5 * u, 3 * u, 1.5 * u, 10, 0, TAU, 0.4)); c.fillStyle = INK; c.fill();
+  // head, muzzle (it chews), horns, an ear
+  head(c, u, o, t, 15, -24, [19, -13], 0.95, chew => {
+    const face = curve([[15 * u, -29 * u], [21 * u, -31 * u], [24.5 * u, -26 * u], [24.5 * u, -20 * u], [18 * u, -19.5 * u], [15 * u, -24 * u]], 2, true);
+    shape(c, face, white, DET, 4);
+    const my = (-21 + Math.max(0, chew) * 0.7) * u;
+    shape(c, ellipse(23 * u, my, 4 * u, 3 * u, 14), mul(C.pink, P.paper), TEX * 1.2, 2);
+    dot(c, 22 * u, my, 0.7 * u, INK); dot(c, 24.6 * u, my - 0.2 * u, 0.7 * u, INK);
+    if (ja >= 0) { c.beginPath(); ribbon(c, ellipse(20.2 * u, -25.8 * u, 1.5 * u, 1.1 * u, 8, Math.PI * 1.1, Math.PI * 1.9), TEX, 6, { tin: 1, tout: 1, amp: 0.1 }); c.fillStyle = INK; c.fill(); }
+    else dot(c, 20.2 * u, -26.6 * u, 1.05 * u, INK);
+    c.beginPath();
+    ribbon(c, [[16.5 * u, -29.5 * u], [15 * u, -33.5 * u], [16.5 * u, -36 * u]], TEX * 1.3, 1, { tin: 1, tout: 2 });
+    ribbon(c, [[21 * u, -31 * u], [22.5 * u, -34.5 * u], [21.5 * u, -37 * u]], TEX * 1.3, 2, { tin: 1, tout: 2 });
+    c.fillStyle = INK; c.fill();
+    poly(c, ellipse(13.6 * u, -27.5 * u, 3 * u, 1.5 * u, 10, 0, TAU, 0.4 + chew * 0.2)); c.fillStyle = INK; c.fill();
+  });
 }
 function drawGull(c, u, white, o, t) {
   const fl = o.state === 'hover' ? 2 * u : Math.sin(t * 9 + o.seed) * 6 * u;
@@ -2082,12 +2633,13 @@ function quaver(c, x, y, sz, col, flip) {
   c.fillStyle = col; c.fill();
 }
 
-/* "boink!", "pok", "plop", "hehe" and the whistled notes: they pop in, drift a little and fade */
+/* "boink!", "pok", "plop", "hehe", the whistled notes, the grazers' "nom"s and the box's "baa!": they pop in,
+   drift a little and fade (without motion they just show, and go) */
 function drawDoodles(s, c) {
   if (!s.doodles.length) return;
-  const g = s.g, u = g.u, P = s.P, ink = rgba(mix(P.ink, P.paper, smooth(0.5, 0.7, s.d)));
+  const g = s.g, u = g.u, P = s.P, rm = s.reduced, ink = rgba(mix(P.ink, P.paper, smooth(0.5, 0.7, s.d)));
   for (const d of s.doodles) {
-    const a = s.t - d.t0, k = pop(a / 0.24), f = 1 - smooth(d.life - 0.3, d.life, a), col = d.sea ? rgba(P.paper) : ink;
+    const a = s.t - d.t0, k = rm ? 1 : pop(a / 0.24), f = 1 - smooth(d.life - 0.3, d.life, a), col = d.sea ? rgba(P.paper) : ink;
     if (f <= 0 || k <= 0.01) continue;
     c.save(); c.globalAlpha = f;
     if (d.kind === 'note') {
@@ -2095,15 +2647,19 @@ function drawDoodles(s, c) {
       quaver(c, d.x + Math.sin(a * 4 + d.seed) * 5 * u, d.y - a * 36 * u, sz * k, col, d.flip);
       c.restore(); continue;
     }
-    const size = Math.max(d.kind === 'pok' ? 12 : 13.5, (d.kind === 'pok' ? 12 : d.kind === 'boink' ? 16 : 15) * u + 4), dir = d.align === 'right' ? -1 : 1;
-    const shake = d.kind === 'hehe' ? (Math.floor(a * 9) % 2 ? -1 : 1) * 1.3 * u : 0;
-    c.translate(d.x, d.y - a * (d.kind === 'plop' ? 12 : 8) * u + shake); c.scale(k, k);
-    const text = d.kind === 'boink' ? 'boink!' : d.kind;
-    label(c, text, 0, 0, size, col, d.align, d.kind === 'boink' ? -0.09 * dir : d.kind === 'pok' ? 0.12 * dir : -0.06);
+    const munch = d.kind === 'munch', dir = d.align === 'right' ? -1 : 1;
+    const size = munch ? Math.max(11, 12 * u + 2.5) : Math.max(d.kind === 'pok' ? 12 : 13.5, (d.kind === 'pok' ? 12 : d.kind === 'boink' ? 16 : 15) * u + 4);
+    const shake = d.kind === 'hehe' && !rm ? (Math.floor(a * 9) % 2 ? -1 : 1) * 1.3 * u : 0;
+    c.translate(d.x, d.y - (rm ? 0 : a * (d.kind === 'plop' ? 12 : munch ? 7 : 8) * u) + shake); c.scale(k, k);
+    const text = d.text || (d.kind === 'boink' ? 'boink!' : d.kind);
+    label(c, text, 0, 0, size, col, d.align, d.kind === 'boink' ? -0.09 * dir : d.kind === 'pok' ? 0.12 * dir : munch ? -0.1 * dir : d.kind === 'baa' ? 0.1 * dir : -0.06);
     c.beginPath();
     if (d.kind === 'boink') {
       // the knock, in three short strokes toward the widget
       for (const i of [0, 1, 2]) { const an = -Math.PI / 2 - dir * (0.25 + i * 0.42), r0 = size * 0.32, r1 = size * 0.72; ribbon(c, [[Math.cos(an) * r0, -size * 0.3 + Math.sin(an) * r0], [Math.cos(an) * r1, -size * 0.3 + Math.sin(an) * r1]], TEX * 1.1, i + 7, { tin: 1, tout: 2 }); }
+    } else if (d.kind === 'baa') {
+      // two short strokes, from the box toward the word
+      for (const i of [0, 1]) { const an = Math.PI * (i ? 0.1 : -0.12), x0 = -dir * size * 0.6, r = size * 0.42; ribbon(c, [[x0 - dir * Math.cos(an) * r * 0.2, -size * 0.1 + Math.sin(an) * r * 0.6 + i * size * 0.38 - size * 0.12], [x0 + dir * Math.cos(an) * r * 0.55, -size * 0.1 + i * size * 0.38 - size * 0.12]], TEX * 1.1, i + 5, { tin: 1, tout: 2 }); }
     } else if (d.kind === 'plop') {
       // two drops over the word
       for (const i of [0, 1]) { const x = size * (0.45 + i * 0.85), y = -size * (0.9 + i * 0.2); ribbon(c, ellipse(x, y, size * 0.13, size * 0.18, 10, -0.6, Math.PI * 1.6), TEX, i + 3, { tin: 1, tout: 1 }); }

From 0afe1486339a10690c6d819355531d9da10446e9 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 12:01:56 +0100
Subject: [PATCH 06/46] docs: draw the website's sheep box as a plain box in
 cloud colours

The box drifting with the clouds keeps its own shape again, without the puffs on its lid, and
takes the clouds' colours: the top as white as they are, the front with a touch of sky and the
side in their shade, changing with them through the evening.
---
 site/scene.js | 41 +++++++++++++----------------------------
 1 file changed, 13 insertions(+), 28 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index 4deec7dd..b5d1e2d8 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -127,18 +127,6 @@ const grazer = o => (o.kind === 'sheep' || o.kind === 'cow') && !o.ride;
 /* The sheep's box, in its own units (times boxK): the front face's half size, the depth seen past it, and
    three air holes punched in the front, the first two with eyes behind them */
 const BOX = { hw: 21, hh: 13, dx: 9, dy: -7, holes: [[-11, -1.5], [0.5, -3.5], [11.5, -0.5]] };
-// its lid: a cloud's row of puffs sitting on the box, following its top back to the far corner (box units)
-const LID = (() => {
-  const bumps = [[-18, -12, 10], [-6, -18, 13], [8, -19.5, 13], [21, -18, 11], [30, -17, 7.5]], top = [];
-  for (let i = 0; i <= 72; i++) {
-    const x = -28.5 + 66.5 * i / 72;
-    let y = -9.5;
-    for (const [bx, by, r] of bumps) { const d = x - bx; if (Math.abs(d) < r) y = Math.min(y, by - Math.sqrt(r * r - d * d)); }
-    top.push([x, y]);
-  }
-  return top;
-})();
-const LID_TOP = Math.min(...LID.map(p => p[1])), LID_X0 = LID[0][0], LID_X1 = LID[LID.length - 1][0];
 const BOX_SP = 6.5; // its drift, in the clouds' units
 // a rect [x0, y0, x1, y1] against a rect, or a disc [x, y, r]
 const overlaps = (a, q) => q.length === 3
@@ -1271,7 +1259,7 @@ class Scene {
   }
 
   /* ----- the sheep in a box -----
-     A white box with a cloud's puffs for a lid drifts across the sky with the clouds, at a height of its own.
+     A box in the clouds' colours drifts across the sky with them, at a height of its own.
      When the light finds it, two eyes look out through its air holes (glinting at night); a click or a tap
      makes it hop and say baa. It isn't a surprise: clicking it drops nothing. Its label shows while it's in
      clear sky. */
@@ -1316,7 +1304,7 @@ class Scene {
   boxHit(x, y) {
     if (this.box.v == null || !this.box.cl) return false;
     const p = this.boxAt(), k = p.k, pad = this.ptr.kind === 'touch' ? 14 : 7;
-    return x > p.x + LID_X0 * k - pad && x < p.x + LID_X1 * k + pad && y > p.y + LID_TOP * k - pad && y < p.y + BOX.hh * k + pad;
+    return x > p.x - BOX.hw * k - pad && x < p.x + (BOX.hw + BOX.dx) * k + pad && y > p.y + (BOX.dy - BOX.hh) * k - pad && y < p.y + BOX.hh * k + pad;
   }
   // a click or a tap: it hops (not without motion) and says so
   baa() {
@@ -1346,7 +1334,7 @@ class Scene {
     const g = this.g, u = g.u, W = g.W, k = p.k, sp = this.sunPos(), mp = this.moonPos(), moon = 25 * u * 1.15, z = 26 * u, hard = [...this.box.hard];
     if (sp.a > 0.1) hard.push([sp.x, sp.y, 38 * u * 1.2]);
     if (mp.a > 0.1) hard.push([mp.x, mp.y, moon], [mp.x + moon, mp.y - moon - z * 0.6, mp.x + moon + z, mp.y - moon * 0.2]);
-    const r = [p.x + LID_X0 * k, p.y + LID_TOP * k, p.x + LID_X1 * k, p.y + BOX.hh * k];
+    const r = [p.x - BOX.hw * k - 3, p.y + (BOX.dy - BOX.hh) * k - 3, p.x + (BOX.hw + BOX.dx) * k + 3, p.y + BOX.hh * k + 3];
     if (r[0] < 6 || r[2] > W - 6 || hard.some(q => overlaps(r, q)) || !this.seen(p.x, p.y)) return null;
     for (const side of ['below', 'left', 'right']) {
       const q = boxLabel(p.x, p.y, k, u, this.box.size, this.box.tw, side);
@@ -1587,8 +1575,8 @@ function drawCloud(s, c, cl, name, legs) {
   });
 }
 
-/* the sheep's box, white and soft like the clouds it drifts with: a box below, a cloud's puffs for a lid and three
-   air holes in front; while the light is on it, eyes in two of them that look at the lamp, blink, and glint at night */
+/* the sheep's box, in the colours of the clouds it drifts with: three faces and three air holes in front; while
+   the light is on it, eyes in two of them that look at the lamp, blink, and glint at night */
 function drawBox(s, c) {
   const b = s.box;
   if (b.v == null || !b.cl) return;
@@ -1597,10 +1585,10 @@ function drawBox(s, c) {
   const night = smooth(0.5, 0.9, s.d);
   c.save(); c.translate(p.x, p.y + hh * k); c.rotate(p.rot); c.scale(1 + p.sq * 0.6, 1 - p.sq); c.translate(0, -hh * k);
   const K = q => q.map(([x, y]) => [x * k, y * k]);
-  const lid = K(LID);
-  print(c, K([[hw, -hh], [hw + dx, -hh + dy], [hw + dx, hh + dy], [hw, hh]]), mix(P.cloud, P.sky, 0.2));
-  print(c, K([[-hw, -hh], [hw, -hh], [hw, hh], [-hw, hh]]), mix(P.cloud, P.sky, 0.07));
-  print(c, lid, P.cloud);
+  // lit from above like the clouds: the top as white as they are, the front a touch of sky, the side in their shade
+  print(c, K([[hw, -hh], [hw + dx, -hh + dy], [hw + dx, hh + dy], [hw, hh]]), mix(P.cloud, P.sky, 0.24));
+  print(c, K([[-hw, -hh], [-hw + dx, -hh + dy], [hw + dx, -hh + dy], [hw, -hh]]), P.cloud);
+  print(c, K([[-hw, -hh], [hw, -hh], [hw, hh], [-hw, hh]]), mix(P.cloud, P.sky, 0.08));
   // the holes, dark; eyes in two of them while the light is on the box (or just after a baa)
   let open = b.open ? (rm ? 1 : smooth(0, 0.2, t - b.openAt)) : (rm ? 0 : 1 - smooth(0, 0.14, t - b.openAt));
   if (b.open && !rm && t - b.blinkAt < 0.16) open *= Math.abs(Math.cos((t - b.blinkAt) / 0.16 * Math.PI));
@@ -1617,15 +1605,12 @@ function drawBox(s, c) {
     dot(c, px - r * 0.16, py - r * 0.2, r * 0.15 + 0.25, '#FFFFFF');
     c.restore();
   });
-  // the pen: the box below the puffs, the puffs' edge, the corner where front meets side lighter, a ring round
-  // each hole, and a curl of puff on the lid as on the clouds
+  // the pen: the outline in one weight, the edges inside lighter, and a ring round each hole
   c.beginPath();
-  edges(c, K([[-hw, -9.5], [-hw, hh], [hw, hh], [hw + dx, hh + dy], [hw + dx, -9.5]]), DET * 1.05, 3, false, { ov: 1.2 });
-  ribbon(c, lid, DET, 5, { tin: 2, tout: 2 });
-  edges(c, K([[hw, -9.5], [hw, hh]]), TEX * 1.25, 9, false, { ov: 0.8 });
+  edges(c, K([[-hw, hh], [-hw, -hh], [-hw + dx, -hh + dy], [hw + dx, -hh + dy], [hw + dx, hh + dy], [hw, hh]]), DET * 1.05, 3, true, { ov: 1.5 });
+  edges(c, K([[-hw, -hh], [hw, -hh], [hw, hh]]), TEX * 1.25, 9, false, { ov: 0.8 });
+  edges(c, K([[hw, -hh], [hw + dx, -hh + dy]]), TEX * 1.25, 12, false, { ov: 0.6 });
   BOX.holes.forEach(([hx, hy], i) => ribbon(c, ellipse(hx * k, hy * k, r, r, 12, i), TEX, 30 + i, { tin: 1, tout: 1, w0: 1, w1: 1, amp: 0.2 }));
-  ribbon(c, ellipse(-7 * k, -23 * k, 7.5 * k, 6 * k, 10, Math.PI * 1.05, Math.PI * 1.75), TEX, 3, { tin: 2, tout: 3 });
-  ribbon(c, ellipse(18 * k, -22 * k, 5.5 * k, 4.4 * k, 10, Math.PI * 1.1, Math.PI * 1.7), TEX, 7, { tin: 2, tout: 3 });
   c.fillStyle = INK; c.fill();
   // and at night the eyes glint, a little star at each
   if (open > 0.3 && night > 0.05) {

From 7ae479ab01bb3992746b83aaca3da1beed1e96e6 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 12:16:22 +0100
Subject: [PATCH 07/46] docs: start the website's sheep box at the far left of
 the sky

The box sets off from the left edge of the sky when the page opens and drifts right with the
clouds from there, instead of starting between the headline and the lighthouse.
---
 site/scene.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index b5d1e2d8..1b2dfeec 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -1284,8 +1284,8 @@ class Scene {
     const others = [...g.clouds.map(cl => cl.y), sc.y];
     let y = lo, far = -1;
     for (let cy = lo; cy <= hi; cy += 3 * u) { const d = Math.min(...others.map(o => Math.abs(o - cy))); if (d > far) { far = d; y = cy; } }
-    // first seen in open sky between the headline and the lighthouse; after a resize, where it was
-    const frac = b.frac ?? (g.portrait ? 0.5 : 0.62);
+    // it sets off from the far left of the sky; after a resize, it carries on from where it was
+    const frac = b.frac ?? (BOX.hw * k + 8) / W;
     b.cl = { x0: frac * W + 180 * u - this.drift * BOX_SP * u, y, w: (2 * BOX.hw + BOX.dx) * k, sp: BOX_SP, seed: 91, ox: b.cl?.ox ?? 0, oy: b.cl?.oy ?? 0 };
     b.seenAt = -9;
   }

From a66a37b9fe0e40edb81ace4feb7b5edd002915eb Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 13:03:29 +0100
Subject: [PATCH 08/46] docs: open the website with the camera coming down to
 the bar

On a visit's first page load the drawing starts up in the sky, with the bar in the middle of
the screen and the headline waiting below. The camera then comes down to the hill while the
bar flies up to its place, and the lighthouse sweeps its light along the bar, widget by
widget.

It plays once a session, only when the page opens at its top, and never under reduced
motion; any scroll, key, click or tap jumps straight to the end. The headline is on screen
from the first frame, so the page's largest paint isn't delayed.
---
 site/index.html |  2 ++
 site/main.js    | 46 ++++++++++++++++++++++++++++++++++++++++++++--
 site/scene.js   | 23 +++++++++++++++++++++--
 site/style.css  | 13 +++++++++++++
 4 files changed, 80 insertions(+), 4 deletions(-)

diff --git a/site/index.html b/site/index.html
index 2a421f08..82b1a830 100644
--- a/site/index.html
+++ b/site/index.html
@@ -45,6 +45,8 @@
 const root = document.documentElement;
 root.dataset.mode = localStorage.getItem("mode") || (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
 root.classList.add("js");
+// the landing film: once a session, opening at the top of the page, with motion allowed (see land() in main.js)
+try { if (!sessionStorage.getItem("landed") && !location.hash && !matchMedia("(prefers-reduced-motion: reduce)").matches) root.classList.add("intro"); } catch {}
 </script>
 <script src="scene.js" defer></script>
 <script src="main.js" defer></script>
diff --git a/site/main.js b/site/main.js
index 9efd8dcd..c29c2e0d 100644
--- a/site/main.js
+++ b/site/main.js
@@ -879,7 +879,7 @@ for (const b of nightSwitches) b.addEventListener("click", e => {
 
 measureMarks();
 try {
-  if (window.Hill?.Scene) scene = new window.Hill.Scene(document.getElementById("scene"), { topInset: restHeight(), dusk: root.dataset.mode === "dark" ? 1 : hour().d });
+  if (window.Hill?.Scene) scene = new window.Hill.Scene(document.getElementById("scene"), { topInset: restHeight(), dusk: root.dataset.mode === "dark" ? 1 : hour().d, held: root.classList.contains("intro") });
 } catch (err) {
   console.warn("The drawing didn't start:", err);
   scene = null;
@@ -898,7 +898,7 @@ if (scene) {
     dock.dataset.sky = lum(sky) < .18 ? "dark" : "light";
   };
   scene.onFrame = s => {
-    try { lightWords(s); skyStrip(s); if (lit && s.playing) hideTour(); } catch (err) {
+    try { if (landed) lightWords(s); sweepGlow(s); skyStrip(s); if (lit && s.playing) hideTour(); } catch (err) {
       if (!sceneFailed) { sceneFailed = true; console.warn("The drawing failed:", err); }
     }
   };
@@ -974,6 +974,48 @@ function onBar(event, key, info = {}) {
   }
 }
 
+/* The landing: the camera starts up in the sky with the bar in the middle of it, comes down to the hill as the bar
+   flies up to its place, and the lighthouse sweeps its light along the bar. Once a session, opening at the top, with
+   motion allowed (the class comes from the page's head); any scroll, key, click or tap ends it at once. */
+let landed = !root.classList.contains("intro"), sweptUntil = 0, runTimer = 0, landTimer = 0;
+const swept = new Map();
+const LAND_SKIP = ["wheel", "keydown", "pointerdown", "touchstart", "scroll"];
+function land(skip) {
+  if (landed) return;
+  landed = true;
+  clearTimeout(runTimer);
+  clearTimeout(landTimer);
+  for (const type of LAND_SKIP) removeEventListener(type, skipLanding, true);
+  if (skip) root.classList.add("intro-skip");
+  root.classList.remove("intro", "intro-run");
+  measureMarks();
+  lumRects = null;
+  sendBar(); // the bar's widgets where they now stand, at the top, for the sweep and the ball game
+  S("hold", false);
+  if (skip) requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove("intro-skip")));
+  else if (S("sweepBar", 1.1)) sweptUntil = performance.now() + 1800;
+}
+function skipLanding() { land(true); }
+/* While the light sweeps the bar, each widget it passes glows for a moment */
+function sweepGlow(s) {
+  const now = performance.now();
+  if (now < sweptUntil) for (const w of bar.querySelectorAll(".w[data-key]")) {
+    if (w.hidden || w.classList.contains("over") || !w.offsetWidth) continue;
+    const r = w.getBoundingClientRect();
+    if (s.inBeam(r.left + r.width / 2, r.top + r.height / 2) > .45) { w.classList.add("swept"); swept.set(w, now + 420); }
+  }
+  for (const [w, until] of swept) if (now > until) { w.classList.remove("swept"); swept.delete(w); }
+}
+if (!landed) {
+  try { sessionStorage.setItem("landed", "1"); } catch {}
+  if (scrollY > 0 || document.hidden) land(true);
+  else {
+    for (const type of LAND_SKIP) addEventListener(type, skipLanding, { capture: true, passive: true });
+    runTimer = setTimeout(() => root.classList.add("intro-run"), 380);
+    landTimer = setTimeout(() => land(false), 380 + 1500);
+  }
+}
+
 /* The lamp-lit tour, for pointers that hover: the widget under the pointer takes the lamp's glow (the beam
    already follows the pointer) and a paper tag hangs under it on a string. Keyboard focus shows it too.
    It waits while the ball is in play, and never shows while editing, dragging or a popup is open. */
diff --git a/site/scene.js b/site/scene.js
index 1b2dfeec..86297203 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -242,6 +242,7 @@ class Scene {
     this.onBar = null;
     // a lived-in hill: the animals already there, the grass they eat, and a sheep in a box up in the sky
     this.flocked = false; this.meadow = []; this.sproutAt = 0;
+    this.held = !!this.o.held; this.sweep = null;
     this.box = { v: null, cl: null, side: null, lastSide: null, la: 0, seenAt: -9, hop: -9, peek: -9, lit: 0, open: false, openAt: -9, blinkAt: -9, nextBlink: 0 };
     this.times = [];
     this.awake = 0; this.kick = 0; this.raf = 0; this.timer = 0; this.last = null;
@@ -378,6 +379,17 @@ class Scene {
     if (!this.bar.length) { this.endBall(); this.endBore(); }
     this.wake();
   }
+  // the landing: until the camera has come down, the flock and the grass wait (they're placed where they're seen)
+  hold(on) { this.held = !!on; if (!on) this.measure(); this.wake(); }
+  // the landing's last beat: the light swings to the bar's left end and sweeps along it to the right, once
+  sweepBar(dur = 1) {
+    const L = this.g.lamp, ts = this.bar;
+    if (this.reduced || !ts.length || document.hidden) return false;
+    const y = Math.min(...ts.map(t => t.y)) - 12 * this.g.u, x0 = Math.min(...ts.map(t => (t.x0 + t.x1) / 2)), x1 = Math.max(...ts.map(t => (t.x0 + t.x1) / 2));
+    this.sweep = { t0: this.t, lead: 0.3, dur, tail: 0.25, a0: Math.atan2(y - L.y, x0 - L.x), a1: Math.atan2(y - L.y, x1 - L.x) };
+    this.wake();
+    return true;
+  }
   play() {
     if (this.reduced || this.ball || document.hidden) return false;
     const h = hatGeom(this), pr = h.pr;
@@ -567,6 +579,12 @@ class Scene {
   }
   // the bored trick holds the light on its widget
   beamLock() {
+    const w = this.sweep;
+    if (w) {
+      const a = this.t - w.t0;
+      if (a < w.lead + w.dur + w.tail) return a < w.lead ? w.a0 : lerp(w.a0, w.a1, smooth(0, 1, (a - w.lead) / w.dur));
+      this.sweep = null;
+    }
     const b = this.bore;
     if (!b || !((b.phase === 'look' && this.t - b.at > 0.35) || b.phase === 'push')) return null;
     return Math.atan2(b.y - this.g.lamp.y, b.x - this.g.lamp.x);
@@ -905,6 +923,7 @@ class Scene {
     // reduced motion and nothing moving: the scene sleeps until the next call or input
   }
   busy() {
+    if (this.sweep) return true;
     if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
     if (this.ripples.length) return true;
@@ -964,7 +983,7 @@ class Scene {
     if (!rm && this.t > this.blink.next) { this.blink.at = this.t; this.blink.next = this.t + 3 + Math.random() * 5; }
     this.updateBeam(dt);
     this.ripples = this.ripples.filter(r => this.t - r.t0 < 2.2);
-    if (!this.flocked) this.flock();
+    if (!this.flocked && !this.held) this.flock();
     this.updateObjs(dt);
     this.updateMeadow();
     this.updateBox(dt);
@@ -980,7 +999,7 @@ class Scene {
     b.steer = rm ? (steering || b.steer > 0.5 ? 1 : 0) : lerp(b.steer, steering ? 1 : 0, Math.min(1, dt * (steering ? 4 : 0.7)));
     if (!rm) b.phi += dt * TAU / 15;
     const c = Math.cos(b.phi), sn = Math.sin(b.phi);
-    if (lock != null) b.sa += angDiff(lock, b.sa) * Math.min(1, dt * 3.2);
+    if (lock != null) b.sa += angDiff(lock, b.sa) * Math.min(1, dt * (this.sweep ? 9 : 3.2));
     else if (this.ptr.on && steering) {
       const want = this.clampAim(Math.atan2(this.ptr.y - L.y, this.ptr.x - L.x));
       b.sa = rm ? want : b.sa + angDiff(want, b.sa) * Math.min(1, dt * 5);
diff --git a/site/style.css b/site/style.css
index 0e2c6f64..f5b3c64f 100644
--- a/site/style.css
+++ b/site/style.css
@@ -104,6 +104,17 @@ h1, h2, h3 { text-wrap: balance; }
   position: fixed; left: 0; top: 0; z-index: 0; width: 100%; height: 100vh; height: 100lvh;
   background: linear-gradient(var(--sky) 0 61%, var(--sea) 61%);
 }
+/* The landing (see land() in main.js): the camera starts up in the sky, the bar in the middle of it and the
+   headline below, then comes down to the hill as the bar flies up to its place */
+.intro .scene { background: var(--sky); }
+.intro .scene canvas { transform: translateY(72vh); }
+.intro .hero { transform: translateY(64vh); }
+.intro .dock { transform: translateY(calc(46vh - var(--bar-h) / 2)); }
+.intro-run .scene canvas, .intro-run .hero { transform: none; transition: transform 1.4s cubic-bezier(.45, 0, .2, 1); }
+.intro-run .dock { transform: none; transition: transform 1.25s cubic-bezier(.55, 0, .2, 1) .15s; }
+.intro-skip .scene canvas, .intro-skip .hero, .intro-skip .dock { transition: none !important; }
+/* on phones the headline starts higher, so its big words are on screen from the first frame */
+@media (max-width: 699.98px), (max-aspect-ratio: 10/11) { .intro .hero { transform: translateY(38vh); } }
 .scene canvas { display: block; }
 main, .site-foot { position: relative; z-index: 1; }
 main { overflow-x: clip; }
@@ -247,6 +258,8 @@ main { overflow-x: clip; }
    and a paper tag hangs under it on a doodled string (placed by main.js) */
 #bar .w.lamp { background-image: linear-gradient(0deg, #ffe04a80, #ffe04a00 82%); box-shadow: inset 0 0 0 1px var(--w-border), 0 0 0 1.5px #ffd43bb3, 0 6px 14px -2px #ffd43bf0; }
 #bar .w.dl.lamp { background-image: none; box-shadow: 0 6px 14px -2px #ffd43bf0; }
+/* the landing's sweep: each widget glows as the light passes over it */
+#bar .w.swept { background-image: linear-gradient(0deg, #ffe04a80, #ffe04a00 82%); box-shadow: inset 0 0 0 1px var(--w-border), 0 0 0 1.5px #ffd43bb3, 0 6px 14px -2px #ffd43bf0; }
 .lamp-tag { position: absolute; left: 0; top: 0; z-index: 4; width: 0; height: 0; pointer-events: none; transform-origin: 0 0; }
 .lamp-tag[hidden] { display: none; }
 .lt-s { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }

From c82f6160909da7ab9aaad9094d5835b1b20de373 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 13:08:05 +0100
Subject: [PATCH 09/46] docs: put the website's sheep box back on the grass

The sheep's box no longer drifts in the sky in the clouds' colours. It's a cardboard box
again, sitting on the grass where it's seen, with room for its label beside it, and now and
then it wobbles as the sheep inside shifts. Animals walk round it and no grass grows under
it; the eyes in its air holes, its hop and its "baa!" stay.
---
 site/scene.js | 133 +++++++++++++++++++++++++++-----------------------
 1 file changed, 73 insertions(+), 60 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index 86297203..7610af4b 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -120,14 +120,13 @@ const C = {
   monster: hex('#FF8FC0'), chimney: hex('#E8452F'), roof: hex('#2B2B36'), door: hex('#2E58D8'), skin: hex('#F6C9A6'),
   navy: hex('#25305E'), wood: hex('#C98B4A'), steel: hex('#D8DCE6'), moon: hex('#FFE89A'), tile: hex('#1D1D24'),
   huts: ['#FF4A36', '#2E58D8', '#FFC21A', '#36A852'].map(hex),
-  sprout: hex('#2E9B3B'),
+  kraft: hex('#CC9A5E'), kraftLit: hex('#E2B983'), kraftDark: hex('#A87442'), tape: hex('#FFE04A'), sprout: hex('#2E9B3B'),
 };
 // animals that live on the hill (not riding a cloud): they wander and graze
 const grazer = o => (o.kind === 'sheep' || o.kind === 'cow') && !o.ride;
 /* The sheep's box, in its own units (times boxK): the front face's half size, the depth seen past it, and
    three air holes punched in the front, the first two with eyes behind them */
 const BOX = { hw: 21, hh: 13, dx: 9, dy: -7, holes: [[-11, -1.5], [0.5, -3.5], [11.5, -0.5]] };
-const BOX_SP = 6.5; // its drift, in the clouds' units
 // a rect [x0, y0, x1, y1] against a rect, or a disc [x, y, r]
 const overlaps = (a, q) => q.length === 3
   ? Math.hypot(clamp(q[0], a[0], a[2]) - q[0], clamp(q[1], a[1], a[3]) - q[1]) < q[2]
@@ -243,7 +242,7 @@ class Scene {
     // a lived-in hill: the animals already there, the grass they eat, and a sheep in a box up in the sky
     this.flocked = false; this.meadow = []; this.sproutAt = 0;
     this.held = !!this.o.held; this.sweep = null;
-    this.box = { v: null, cl: null, side: null, lastSide: null, la: 0, seenAt: -9, hop: -9, peek: -9, lit: 0, open: false, openAt: -9, blinkAt: -9, nextBlink: 0 };
+    this.box = { v: null, gx: null, gy: null, side: null, lastSide: null, la: 0, seenAt: -9, hop: -9, wob: -9, nextWob: 0, peek: -9, lit: 0, open: false, openAt: -9, blinkAt: -9, nextBlink: 0 };
     this.times = [];
     this.awake = 0; this.kick = 0; this.raf = 0; this.timer = 0; this.last = null;
     this.mq = matchMedia('(prefers-reduced-motion: reduce)');
@@ -928,7 +927,7 @@ class Scene {
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
     if (this.ripples.length) return true;
     // (the grazing and its "nom"s are slow: they carry on at the idle rate)
-    if (this.ball || this.bore || this.doodles.some(d => !d.calm) || this.splashes.length || this.t - this.hatKick < 0.7 || this.t - this.regrowAt < 0.9 || this.t - this.box.hop < 0.8) return true;
+    if (this.ball || this.bore || this.doodles.some(d => !d.calm) || this.splashes.length || this.t - this.hatKick < 0.7 || this.t - this.regrowAt < 0.9 || this.t - this.box.hop < 0.8 || this.t - this.box.wob < 0.5) return true;
     for (const o of this.objs) if (o.state === 'fall' || (o.state === 'fly' && !this.reduced) || o.dying != null || (o.land > 0 && this.t - o.land < 0.4)) return true;
     return this.beam.steer > 0.01 && this.beam.steer < 0.99 && !this.reduced;
   }
@@ -964,7 +963,7 @@ class Scene {
     this.windTotal = this.windAmb + this.wind;
     if (!rm) this.drift += dt * (1 + this.windTotal * 2.4);
     // clouds lean away from the pointer
-    for (const cl of [...g.clouds, g.sheepCloud, ...(this.box.cl ? [this.box.cl] : [])]) {
+    for (const cl of [...g.clouds, g.sheepCloud]) {
       let tx = 0, ty = 0;
       if (this.ptr.on && !rm) {
         const p = this.cloudXY(cl, true), dx = p.x - this.ptr.x, dy = p.y - this.ptr.y, r = 170 * u, dd = Math.hypot(dx, dy);
@@ -1120,7 +1119,8 @@ class Scene {
   }
   // nothing of the scene's own in the way: the lighthouse, the cottage, the key, the huts, the desk
   open(x, y) {
-    const g = this.g, u = g.u, T = g.lh, k = g.cot;
+    const g = this.g, u = g.u, T = g.lh, k = g.cot, bx = this.box;
+    if (bx.gx != null && Math.abs(x - bx.gx) < 44 * u && y > bx.gy - 46 * u && y < bx.gy + 18 * u) return false;
     if (g.key && x > g.key.x0 && x < g.key.x1 && y > g.key.y0 - 30 * u) return false;
     if (Math.abs(x - T.x) < T.wB * 0.9 + 20 * u && y < T.base + 42 * u) return false;
     if (Math.abs(x - k.x) < k.w * 0.8 + 18 * u && y < k.base + 32 * u) return false;
@@ -1278,50 +1278,54 @@ class Scene {
   }
 
   /* ----- the sheep in a box -----
-     A box in the clouds' colours drifts across the sky with them, at a height of its own.
-     When the light finds it, two eyes look out through its air holes (glinting at night); a click or a tap
-     makes it hop and say baa. It isn't a surprise: clicking it drops nothing. Its label shows while it's in
-     clear sky. */
+     A cardboard box with three air holes sits on the grass where it's seen, clear of the lighthouse, the cottage,
+     the little scenes and the animals. Now and then the sheep inside shifts and the box wobbles. When the light
+     finds it, two eyes look out through the holes (glinting at night); a click or a tap makes it hop and say baa.
+     It isn't a surprise: clicking it drops nothing. Its label shows in the first screen while it's in view. */
   placeBox() {
-    const g = this.g, u = g.u, W = g.W, b = this.box, k = boxK(this), T = g.lh, L = g.lamp, sc = g.sheepCloud;
+    const g = this.g, u = g.u, W = g.W, b = this.box, T = g.lh, ck = g.cot;
     b.v = `${this.layoutV}|${this.fontsV}`;
-    const size = b.size = Math.max(13, 17 * u), cw = textW(this, 'a cloud (or a sheep)', size);
-    b.tw = textW(this, 'a sheep (in a box)', size);
-    // where the box and its label don't show (rects, and discs as [x, y, r]): the bar, the notes (a guess; the
-    // DOM has the last word), near the horizon, the lighthouse, its halo and labels, the cloud with legs and its
-    // label (the sun and the moon, while they're up, are added as they move)
+    b.size = Math.max(13, 17 * u); b.tw = textW(this, 'a sheep (in a box)', b.size);
+    // where its label mustn't go: the bar, the notes (a guess; the DOM has the last word), the key, the
+    // lighthouse and its label, the cottage
     const noteX = W < 1024 ? W * 0.05 + Math.min(W * 0.58, 620) + 16 : g.note.x1 + 4;
     b.hard = [
-      [0, 0, W, g.top + 8], g.portrait ? [0, g.note.y0 - 10, W, g.H] : [0, 0, noteX, g.H], [-1e4, g.horizon - 26 * u, 2e4, 2e4],
-      [L.x, L.y, T.er * 4.9], [T.x - T.wB * 0.8, T.hatTop, T.x + T.wB * 0.8, T.base],
-      [sc.x0 - sc.w * 0.66, sc.y - sc.w * 0.5, sc.x1 + sc.w * 0.66, sc.y + 18 * u],
-      [sc.x0 + sc.w * 0.3, sc.y - 6 * u, sc.x1 + sc.w * 0.42 + (g.portrait ? 6 : 14 * u) + 16 * u + cw + 6, sc.y + (g.portrait ? 12 : 22 * u) + 4 * u + size * 0.8],
-      ...lighthouseLabelRects(this, textW(this, 'a lighthouse (stable)', size), size),
+      [0, 0, W, g.top + 8], g.portrait ? [0, g.note.y0 - 10, W, g.H] : [0, 0, noteX, g.H],
+      [T.x - T.wB * 0.9, T.hatTop, T.x + T.wB * 0.9, T.base + 4 * u], [ck.x - ck.w * 0.7, ck.base - ck.h * 3, ck.x + ck.w * 0.7, ck.base + 4 * u],
+      ...lighthouseLabelRects(this, textW(this, 'a lighthouse (stable)', b.size), b.size),
+      ...(g.key ? [[g.key.x0, g.key.y0, g.key.x1, g.key.y1]] : []),
     ];
-    // it drifts with the clouds, at a height of its own, as far as can be from theirs
-    const sky = g.horizon - g.top, lo = g.top + sky * (g.portrait ? 0.12 : 0.18), hi = g.top + sky * (g.portrait ? 0.34 : 0.46);
-    const others = [...g.clouds.map(cl => cl.y), sc.y];
-    let y = lo, far = -1;
-    for (let cy = lo; cy <= hi; cy += 3 * u) { const d = Math.min(...others.map(o => Math.abs(o - cy))); if (d > far) { far = d; y = cy; } }
-    // it sets off from the far left of the sky; after a resize, it carries on from where it was
-    const frac = b.frac ?? (BOX.hw * k + 8) / W;
-    b.cl = { x0: frac * W + 180 * u - this.drift * BOX_SP * u, y, w: (2 * BOX.hw + BOX.dx) * k, sp: BOX_SP, seed: 91, ox: b.cl?.ox ?? 0, oy: b.cl?.oy ?? 0 };
-    b.seenAt = -9;
-  }
-  // the box right now: where it drifts, its tilt, and (unless `still`, as for its label) the hop with its squash
+    // a spot on the grass where it's seen, away from the animals, the tufts and the window's edges, with room
+    // for its label on the grass beside it
+    b.gx = b.gy = null;
+    const k = boxK(this);
+    let first = null, pick = null;
+    for (let i = 0; i < 14 && !pick; i++) {
+      const p = this.landSpot({ gap: 56 * u, spread: i < 7, check: 3, snug: true, clear: true });
+      if (!p) break;
+      first ||= p;
+      if (!g.portrait && (p.x < noteX + 60 * u || p.x > W * 0.9)) continue;
+      if (this.boxSide({ x: p.x, y: p.y - BOX.hh * k, k })) pick = p;
+    }
+    if (pick ||= first) { b.gx = pick.x; b.gy = pick.y; }
+    b.seenAt = -9; b.nextWob = this.t + 4 + Math.random() * 6;
+  }
+  // the box right now: standing on the grass, its wobble, and (unless `still`, as for its label) the hop with its squash
   boxAt(still) {
-    const b = this.box, u = this.g.u, k = boxK(this), rm = this.reduced, t = this.t, q = this.cloudXY(b.cl);
-    let y = q.y + (rm ? 0 : Math.sin(t * 0.7 + 1) * 3 * u), rot = rm ? 0 : Math.sin(t * 0.5) * 0.035, sq = 0;
+    const b = this.box, k = boxK(this), rm = this.reduced, t = this.t;
+    let y = b.gy - BOX.hh * k, rot = 0, sq = 0;
+    const w = t - b.wob;
+    if (!rm && w >= 0 && w < 0.5) rot = Math.sin(w / 0.5 * Math.PI * 3) * 0.05 * (1 - w / 0.5);
     const a = still ? -1 : t - b.hop;
     if (!rm && a >= 0 && a < 0.75) {
       if (a < 0.08) sq = Math.sin(a / 0.08 * Math.PI) * 0.1;
       else if (a < 0.52) { const f = (a - 0.08) / 0.44; y -= Math.sin(f * Math.PI) * 18 * k; rot -= Math.sin(f * Math.PI) * 0.14; }
       else sq = Math.sin((a - 0.52) / 0.23 * Math.PI) * 0.14;
     }
-    return { x: q.x, y, rot, sq, k };
+    return { x: b.gx, y, rot, sq, k };
   }
   boxHit(x, y) {
-    if (this.box.v == null || !this.box.cl) return false;
+    if (this.box.gx == null) return false;
     const p = this.boxAt(), k = p.k, pad = this.ptr.kind === 'touch' ? 14 : 7;
     return x > p.x - BOX.hw * k - pad && x < p.x + (BOX.hw + BOX.dx) * k + pad && y > p.y + (BOX.dy - BOX.hh) * k - pad && y < p.y + BOX.hh * k + pad;
   }
@@ -1335,29 +1339,31 @@ class Scene {
   }
   updateBox(dt) {
     const b = this.box, rm = this.reduced, t = this.t;
+    if (this.held) return;
     if (b.v !== `${this.layoutV}|${this.fontsV}`) this.placeBox();
+    if (b.gx == null) return;
     const p = this.boxAt(), lit = this.inBeam(p.x + this.ox, p.y + this.oy);
-    b.frac = p.x / this.g.W;
     b.lit = rm ? lit : lerp(b.lit, lit, Math.min(1, dt * 8));
     // the eyes come to the holes while the light is on it (and for a moment after a baa), blinking now and then
     const want = b.lit > 0.4 || t - b.peek < 1.8;
     if (want !== b.open) { b.open = want; b.openAt = t; b.nextBlink = t + 1.4 + Math.random() * 2; }
     if (b.open && !rm && t > b.nextBlink) { b.blinkAt = t; b.nextBlink = t + 1.8 + Math.random() * 2.6; }
-    // its label, while it's in clear sky: looked at a few times a second, faded in and out
+    // now and then the sheep inside shifts
+    if (!rm && t > b.nextWob) { b.wob = t; b.nextWob = t + 7 + Math.random() * 9; }
+    // its label, in the first screen while it's in view: looked at a few times a second, faded in and out
     if (t - b.seenAt > 0.3 || rm) { b.seenAt = t; b.side = this.pres.hero > 0.01 ? this.boxSide(this.boxAt(true)) : null; if (b.side) b.lastSide = b.side; }
     b.la = rm ? (b.side ? 1 : 0) : lerp(b.la, b.side ? 1 : 0, Math.min(1, dt * 3));
   }
-  // the side of the box its label fits on right now (below, left or right), or null: the box and the label in the
-  // window, clear of what's in the way, and seen
+  // the side of the box its label fits on right now (right, into the pasture, first; then left or below), or null:
+  // the box and the label in the window, on the grass, clear of what's in the way, and seen
   boxSide(p) {
-    const g = this.g, u = g.u, W = g.W, k = p.k, sp = this.sunPos(), mp = this.moonPos(), moon = 25 * u * 1.15, z = 26 * u, hard = [...this.box.hard];
-    if (sp.a > 0.1) hard.push([sp.x, sp.y, 38 * u * 1.2]);
-    if (mp.a > 0.1) hard.push([mp.x, mp.y, moon], [mp.x + moon, mp.y - moon - z * 0.6, mp.x + moon + z, mp.y - moon * 0.2]);
+    const g = this.g, u = g.u, W = g.W, k = p.k, hard = this.box.hard;
     const r = [p.x - BOX.hw * k - 3, p.y + (BOX.dy - BOX.hh) * k - 3, p.x + (BOX.hw + BOX.dx) * k + 3, p.y + BOX.hh * k + 3];
     if (r[0] < 6 || r[2] > W - 6 || hard.some(q => overlaps(r, q)) || !this.seen(p.x, p.y)) return null;
-    for (const side of ['below', 'left', 'right']) {
+    for (const side of ['right', 'left', 'below']) {
       const q = boxLabel(p.x, p.y, k, u, this.box.size, this.box.tw, side);
-      if (q.x0 < 6 || q.x1 > W - 6 || hard.some(h => overlaps([q.x0, q.y0, q.x1, q.y1], h))) continue;
+      if (q.x0 < 6 || q.x1 > W - 6 || q.y1 > g.H - 6 || hard.some(h => overlaps([q.x0, q.y0, q.x1, q.y1], h))) continue;
+      if (!this.isLand(q.x0 + 4, (q.y0 + q.y1) / 2) || !this.isLand(q.x1 - 4, (q.y0 + q.y1) / 2)) continue;
       if (this.seen((q.x0 + q.x1) / 2, (q.y0 + q.y1) / 2)) return side;
     }
     return null;
@@ -1458,7 +1464,6 @@ function drawScene(s, c) {
   drawMoon(s, c);
   for (let i = 0; i < g.clouds.length; i++) drawCloud(s, c, g.clouds[i], 'cloud' + i);
   drawCloud(s, c, g.sheepCloud, 'sheepcloud', true);
-  drawBox(s, c);
   drawIsle(s, c);
   const T = g.lh, x0 = g.portrait ? g.ridge[0][0] - 8 : Math.max(0, g.ridge[0][0] - 10);
   const y0 = Math.min(T.top - T.gal * 1.2, g.cot.base - g.cot.h * 4.2) - 10 * u;
@@ -1470,8 +1475,8 @@ function drawScene(s, c) {
   drawEye(s, c);
   drawHat(s, c);
   // animals and the grass on the hill, back to front (a tuft in front of the one eating it)
-  const items = [...s.objs.map(o => [o.y, o]), ...s.meadow.map(m => [m.y + 0.5, m])].sort((a, b) => a[0] - b[0]);
-  for (const [, it] of items) it.blades ? drawMeadow(s, c, it) : drawObj(s, c, it);
+  const items = [...s.objs.map(o => [o.y, o]), ...s.meadow.map(m => [m.y + 0.5, m]), ...(s.box.gx != null ? [[s.box.gy, s.box]] : [])].sort((a, b) => a[0] - b[0]);
+  for (const [, it] of items) it === s.box ? drawBox(s, c) : it.blades ? drawMeadow(s, c, it) : drawObj(s, c, it);
   // the section's little scenes over them: animals pass behind the desk, the huts and the keeper
   drawStates(s, c);
   if (s.pres.hero > 0.01) drawLabels(s, c);
@@ -1594,27 +1599,30 @@ function drawCloud(s, c, cl, name, legs) {
   });
 }
 
-/* the sheep's box, in the colours of the clouds it drifts with: three faces and three air holes in front; while
-   the light is on it, eyes in two of them that look at the lamp, blink, and glint at night */
+/* the sheep's box: kraft cardboard, a strip of tape over the flaps, three air holes; while the light is on
+   it, eyes in two of them that look at the lamp, blink, and glint at night */
 function drawBox(s, c) {
   const b = s.box;
-  if (b.v == null || !b.cl) return;
+  if (b.gx == null) return;
   const g = s.g, P = s.P, p = s.boxAt(), k = p.k, t = s.t, rm = s.reduced, { hw, hh, dx, dy } = BOX;
-  if (p.x < -(hw + dx) * k * 1.8 || p.x > g.W + hw * k * 1.8) return;
-  const night = smooth(0.5, 0.9, s.d);
+  const night = smooth(0.5, 0.9, s.d), card = col => mix(mul(col, P.paper), P.sky, 0.2 * night);
   c.save(); c.translate(p.x, p.y + hh * k); c.rotate(p.rot); c.scale(1 + p.sq * 0.6, 1 - p.sq); c.translate(0, -hh * k);
   const K = q => q.map(([x, y]) => [x * k, y * k]);
-  // lit from above like the clouds: the top as white as they are, the front a touch of sky, the side in their shade
-  print(c, K([[hw, -hh], [hw + dx, -hh + dy], [hw + dx, hh + dy], [hw, hh]]), mix(P.cloud, P.sky, 0.24));
-  print(c, K([[-hw, -hh], [-hw + dx, -hh + dy], [hw + dx, -hh + dy], [hw, -hh]]), P.cloud);
-  print(c, K([[-hw, -hh], [hw, -hh], [hw, hh], [-hw, hh]]), mix(P.cloud, P.sky, 0.08));
+  const front = K([[-hw, -hh], [hw, -hh], [hw, hh], [-hw, hh]]);
+  const top = K([[-hw, -hh], [-hw + dx, -hh + dy], [hw + dx, -hh + dy], [hw, -hh]]);
+  const side = K([[hw, -hh], [hw + dx, -hh + dy], [hw + dx, hh + dy], [hw, hh]]);
+  print(c, side, card(C.kraftDark)); print(c, top, card(C.kraftLit)); print(c, front, card(C.kraft));
+  // tape over the seam between the flaps, front to back, folded a little way down the front
+  c.globalAlpha = 0.8;
+  print(c, K([[-3.4, -hh], [-3.4 + dx, -hh + dy], [3.4 + dx, -hh + dy], [3.4, -hh], [3.6, -hh + 6.5], [0.4, -hh + 5.8], [-3.6, -hh + 6.8]]), card(C.tape));
+  c.globalAlpha = 1;
   // the holes, dark; eyes in two of them while the light is on the box (or just after a baa)
   let open = b.open ? (rm ? 1 : smooth(0, 0.2, t - b.openAt)) : (rm ? 0 : 1 - smooth(0, 0.14, t - b.openAt));
   if (b.open && !rm && t - b.blinkAt < 0.16) open *= Math.abs(Math.cos((t - b.blinkAt) / 0.16 * Math.PI));
   const L = s.g.lamp, look = Math.atan2(L.y - p.y, L.x - p.x), r = 3.4 * k;
   BOX.holes.forEach(([hx, hy], i) => {
     const x = hx * k, y = hy * k;
-    dot(c, x, y, r, mix(P.ink, P.sky, 0.15));
+    dot(c, x, y, r, mix(P.ink, C.kraftDark, 0.18));
     if (i > 1 || open < 0.04) return;
     const ew = r * 0.8, eh = r * 0.8 * open;
     c.beginPath(); c.ellipse(x, y + (1 - open) * r * 0.3, ew, Math.max(0.3, eh), 0, 0, TAU); c.fillStyle = rgba(mix(hex('#FFFFFF'), P.beam, 0.4 * night)); c.fill();
@@ -1624,12 +1632,17 @@ function drawBox(s, c) {
     dot(c, px - r * 0.16, py - r * 0.2, r * 0.15 + 0.25, '#FFFFFF');
     c.restore();
   });
-  // the pen: the outline in one weight, the edges inside lighter, and a ring round each hole
+  // the pen: the outline in one weight, the edges inside lighter, a ring round each hole, and this side up
   c.beginPath();
   edges(c, K([[-hw, hh], [-hw, -hh], [-hw + dx, -hh + dy], [hw + dx, -hh + dy], [hw + dx, hh + dy], [hw, hh]]), DET * 1.05, 3, true, { ov: 1.5 });
   edges(c, K([[-hw, -hh], [hw, -hh], [hw, hh]]), TEX * 1.25, 9, false, { ov: 0.8 });
   edges(c, K([[hw, -hh], [hw + dx, -hh + dy]]), TEX * 1.25, 12, false, { ov: 0.6 });
   BOX.holes.forEach(([hx, hy], i) => ribbon(c, ellipse(hx * k, hy * k, r, r, 12, i), TEX, 30 + i, { tin: 1, tout: 1, w0: 1, w1: 1, amp: 0.2 }));
+  for (const ax of [hw + dx * 0.32, hw + dx * 0.7]) {
+    const x = ax * k, y0 = (dy * (ax - hw) / dx + 6) * k, y1 = y0 - 7 * k;
+    ribbon(c, [[x, y0], [x, y1]], TEX * 0.9, ax, { tin: 1, tout: 1, w0: 0.8, w1: 0.8, amp: 0.1 });
+    ribbon(c, [[x - 1.7 * k, y1 + 2.4 * k], [x, y1], [x + 1.7 * k, y1 + 2.4 * k]], TEX * 0.9, ax + 1, { tin: 1, tout: 1, w0: 0.8, w1: 0.8, amp: 0.1 });
+  }
   c.fillStyle = INK; c.fill();
   // and at night the eyes glint, a little star at each
   if (open > 0.3 && night > 0.05) {
@@ -2402,7 +2415,7 @@ function drawLabels(s, c) {
   }
   // the sheep in its box, where placeBox found room for the label
   const bx = s.box;
-  if (bx.lastSide && bx.la > 0.01 && bx.cl) {
+  if (bx.lastSide && bx.la > 0.01 && bx.gx != null) {
     const p = s.boxAt(true), q = boxLabel(p.x, p.y, p.k, u, size, bx.tw, bx.lastSide), lc = rgba(mix(P.ink, P.paper, night), s.pres.hero * bx.la);
     label(c, 'a sheep (in a box)', q.tx, q.ty, size, lc, q.align);
     c.fillStyle = lc; arrow(c, q.arrow, TEX * 1.1, 11);

From 8bea9e86469320d27558bfcd8089936472d1613f Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 13:11:33 +0100
Subject: [PATCH 10/46] docs: let the website's opening film replay with ?intro

The opening plays once a browser tab, only from the top of the page. Adding ?intro to the
address plays it again on every load, so it can be watched and reviewed; reduced motion still
turns it off.
---
 site/index.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/site/index.html b/site/index.html
index 82b1a830..ecebc2e9 100644
--- a/site/index.html
+++ b/site/index.html
@@ -45,8 +45,9 @@
 const root = document.documentElement;
 root.dataset.mode = localStorage.getItem("mode") || (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
 root.classList.add("js");
-// the landing film: once a session, opening at the top of the page, with motion allowed (see land() in main.js)
-try { if (!sessionStorage.getItem("landed") && !location.hash && !matchMedia("(prefers-reduced-motion: reduce)").matches) root.classList.add("intro"); } catch {}
+// the landing film: once a session, opening at the top of the page, with motion allowed; ?intro plays it again
+// (see land() in main.js)
+try { if (!matchMedia("(prefers-reduced-motion: reduce)").matches && (new URLSearchParams(location.search).has("intro") || (!sessionStorage.getItem("landed") && !location.hash))) root.classList.add("intro"); } catch {}
 </script>
 <script src="scene.js" defer></script>
 <script src="main.js" defer></script>

From c021796e02a197a145fdd3075fda1f700cd6ef32 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 13:24:56 +0100
Subject: [PATCH 11/46] docs: open the website on a title card that expands
 into the bar

The opening no longer starts on an empty sky. The whole drawing is there from the first
frame, with a title card over it: StableBar in big letters, the bar large and centred
under it, and a line about it under that. After a moment the card's bar stretches across
the window and rises into the real bar at the top, the card drifts away, the notes come in
and the lighthouse sweeps its light along the bar.

On phones the card sits low over the sea, its title on two lines. The drawing's own labels
wait until the card has gone, and the title stays the page's first large paint.
---
 site/index.html | 12 +++++++++++
 site/main.js    | 46 ++++++++++++++++++++++++++++++---------
 site/scene.js   |  4 +++-
 site/style.css  | 57 +++++++++++++++++++++++++++++++++++++++----------
 4 files changed, 97 insertions(+), 22 deletions(-)

diff --git a/site/index.html b/site/index.html
index ecebc2e9..56b4ebfe 100644
--- a/site/index.html
+++ b/site/index.html
@@ -113,6 +113,18 @@
 
 <a class="skip" href="#main">Skip to content</a>
 <div class="scene" id="scene" aria-hidden="true"></div>
+<div class="opening" id="opening" aria-hidden="true" data-theme="built-in">
+  <p class="op-mark"><span class="op-w1">Sta<span class="op-b">b</span>le</span><span class="op-w2">Bar</span></p>
+  <div class="op-bar">
+    <span class="w"><svg style="width:13px;height:15px;fill:currentColor"><use href="#i-apple"/></svg></span>
+    <span class="w op-app"><b>Finder</b><span>File</span><span>Edit</span><span>View</span></span>
+    <span class="op-gap"></span>
+    <span class="w op-snd"><svg><use href="#i-snd"/></svg></span>
+    <span class="w num clock" data-format="full">&nbsp;</span>
+    <span class="w op-sun"><svg class="off"><use href="#i-sun"/></svg><svg class="on"><use href="#i-moon"/></svg></span>
+  </div>
+  <p class="op-line">A native, configurable bar for your Mac.</p>
+</div>
 
 <header class="dock" id="dock" data-theme="built-in">
   <div class="bar ws-fill" id="bar" role="toolbar" aria-label="StableBar">
diff --git a/site/main.js b/site/main.js
index c29c2e0d..47a29a42 100644
--- a/site/main.js
+++ b/site/main.js
@@ -879,7 +879,7 @@ for (const b of nightSwitches) b.addEventListener("click", e => {
 
 measureMarks();
 try {
-  if (window.Hill?.Scene) scene = new window.Hill.Scene(document.getElementById("scene"), { topInset: restHeight(), dusk: root.dataset.mode === "dark" ? 1 : hour().d, held: root.classList.contains("intro") });
+  if (window.Hill?.Scene) scene = new window.Hill.Scene(document.getElementById("scene"), { topInset: restHeight(), dusk: root.dataset.mode === "dark" ? 1 : hour().d });
 } catch (err) {
   console.warn("The drawing didn't start:", err);
   scene = null;
@@ -974,11 +974,13 @@ function onBar(event, key, info = {}) {
   }
 }
 
-/* The landing: the camera starts up in the sky with the bar in the middle of it, comes down to the hill as the bar
-   flies up to its place, and the lighthouse sweeps its light along the bar. Once a session, opening at the top, with
-   motion allowed (the class comes from the page's head); any scroll, key, click or tap ends it at once. */
+/* The opening: a title card over the whole drawing with the bar big in the middle of it. After a moment the bar
+   stretches up into its place at the top, the card drifts away, the notes come in, and the lighthouse sweeps its
+   light along the bar. Once a session, opening at the top, with motion allowed (the class comes from the page's
+   head; ?intro plays it again); any scroll, key, click or tap ends it at once. */
 let landed = !root.classList.contains("intro"), sweptUntil = 0, runTimer = 0, landTimer = 0;
 const swept = new Map();
+const opening = document.getElementById("opening");
 const LAND_SKIP = ["wheel", "keydown", "pointerdown", "touchstart", "scroll"];
 function land(skip) {
   if (landed) return;
@@ -987,15 +989,38 @@ function land(skip) {
   clearTimeout(landTimer);
   for (const type of LAND_SKIP) removeEventListener(type, skipLanding, true);
   if (skip) root.classList.add("intro-skip");
-  root.classList.remove("intro", "intro-run");
+  root.classList.remove("intro", "op-bar-in", "op-page-in");
+  opening.remove();
   measureMarks();
   lumRects = null;
-  sendBar(); // the bar's widgets where they now stand, at the top, for the sweep and the ball game
-  S("hold", false);
+  sendBar(); // the bar's widgets where they stand, for the sweep and the ball game
+  S("labels", true);
   if (skip) requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove("intro-skip")));
   else if (S("sweepBar", 1.1)) sweptUntil = performance.now() + 1800;
 }
 function skipLanding() { land(true); }
+/* The card's bar stretches into the real one: a copy of it leaves the card and grows to the window's width as it
+   rises to the top, shrinking to the real bar's height, its widgets sliding apart as it widens; the real bar fades
+   in under it, the copy fades away and the notes come in */
+function expandOpening() {
+  if (landed) return;
+  const pill = opening.querySelector(".op-bar"), a = pill.getBoundingClientRect(), b = bar.getBoundingClientRect(), k = b.height / a.height;
+  const fly = pill.cloneNode(true);
+  fly.classList.add("op-fly");
+  opening.append(fly);
+  pill.style.visibility = "hidden";
+  const grow = fly.animate([
+    { left: `${a.left}px`, top: `${a.top}px`, width: `${a.width}px`, transform: "scale(1)", borderRadius: "22px" },
+    { left: `${b.left}px`, top: `${b.top}px`, width: `${b.width / k}px`, transform: `scale(${k})`, borderRadius: "0px" },
+  ], { duration: 720, easing: "cubic-bezier(.6, 0, .2, 1)", fill: "forwards" });
+  for (const el of opening.querySelectorAll(".op-mark, .op-line")) el.animate([{ opacity: 1, transform: "none" }, { opacity: 0, transform: "translateY(-28px)" }], { duration: 460, easing: "ease-in", fill: "forwards" });
+  grow.finished.then(() => {
+    if (landed) return;
+    root.classList.add("op-bar-in");
+    fly.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 340, fill: "forwards" });
+    setTimeout(() => { if (!landed) root.classList.add("op-page-in"); }, 120);
+  }, () => {});
+}
 /* While the light sweeps the bar, each widget it passes glows for a moment */
 function sweepGlow(s) {
   const now = performance.now();
@@ -1011,10 +1036,11 @@ if (!landed) {
   if (scrollY > 0 || document.hidden) land(true);
   else {
     for (const type of LAND_SKIP) addEventListener(type, skipLanding, { capture: true, passive: true });
-    runTimer = setTimeout(() => root.classList.add("intro-run"), 380);
-    landTimer = setTimeout(() => land(false), 380 + 1500);
+    S("labels", false);
+    runTimer = setTimeout(expandOpening, 1150);
+    landTimer = setTimeout(() => land(false), 1150 + 1250);
   }
-}
+} else opening.remove();
 
 /* The lamp-lit tour, for pointers that hover: the widget under the pointer takes the lamp's glow (the beam
    already follows the pointer) and a paper tag hangs under it on a string. Keyboard focus shows it too.
diff --git a/site/scene.js b/site/scene.js
index 7610af4b..66acd7e6 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -380,6 +380,8 @@ class Scene {
   }
   // the landing: until the camera has come down, the flock and the grass wait (they're placed where they're seen)
   hold(on) { this.held = !!on; if (!on) this.measure(); this.wake(); }
+  // the drawing's own labels ("a lighthouse (stable)" and the others), off while the page's title card is up
+  labels(on) { this.noLabels = !on; this.wake(); }
   // the landing's last beat: the light swings to the bar's left end and sweeps along it to the right, once
   sweepBar(dur = 1) {
     const L = this.g.lamp, ts = this.bar;
@@ -1479,7 +1481,7 @@ function drawScene(s, c) {
   for (const [, it] of items) it === s.box ? drawBox(s, c) : it.blades ? drawMeadow(s, c, it) : drawObj(s, c, it);
   // the section's little scenes over them: animals pass behind the desk, the huts and the keeper
   drawStates(s, c);
-  if (s.pres.hero > 0.01) drawLabels(s, c);
+  if (s.pres.hero > 0.01 && !s.noLabels) drawLabels(s, c);
   drawSplashes(s, c);
   drawBall(s, c);
   drawDoodles(s, c);
diff --git a/site/style.css b/site/style.css
index f5b3c64f..70ea87a7 100644
--- a/site/style.css
+++ b/site/style.css
@@ -104,17 +104,52 @@ h1, h2, h3 { text-wrap: balance; }
   position: fixed; left: 0; top: 0; z-index: 0; width: 100%; height: 100vh; height: 100lvh;
   background: linear-gradient(var(--sky) 0 61%, var(--sea) 61%);
 }
-/* The landing (see land() in main.js): the camera starts up in the sky, the bar in the middle of it and the
-   headline below, then comes down to the hill as the bar flies up to its place */
-.intro .scene { background: var(--sky); }
-.intro .scene canvas { transform: translateY(72vh); }
-.intro .hero { transform: translateY(64vh); }
-.intro .dock { transform: translateY(calc(46vh - var(--bar-h) / 2)); }
-.intro-run .scene canvas, .intro-run .hero { transform: none; transition: transform 1.4s cubic-bezier(.45, 0, .2, 1); }
-.intro-run .dock { transform: none; transition: transform 1.25s cubic-bezier(.55, 0, .2, 1) .15s; }
-.intro-skip .scene canvas, .intro-skip .hero, .intro-skip .dock { transition: none !important; }
-/* on phones the headline starts higher, so its big words are on screen from the first frame */
-@media (max-width: 699.98px), (max-aspect-ratio: 10/11) { .intro .hero { transform: translateY(38vh); } }
+/* The opening (see land() in main.js): a title card over the whole drawing, with the bar big in the middle of it.
+   The bar then stretches up into its place at the top, the card drifts away and the page comes in. The title is
+   the page's largest text, so it is also its first large paint. */
+.opening { display: none; }
+.intro .opening {
+  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: clamp(16px, 3vh, 32px); padding: 0 28vw 16vh 2vw; pointer-events: none; text-align: center;
+  --tile-h: 38px; --bar-font: 400 16px/1 var(--mac); --w-radius: 16px; --halo: var(--sky);
+}
+.op-mark {
+  font: 800 clamp(76px, 10vw, 136px)/.92 var(--display); font-variation-settings: "INFM" 70, "BNCE" 25; letter-spacing: -.012em;
+  color: var(--pen); rotate: -1.5deg; text-shadow: 0 0 22px var(--halo), 0 0 6px var(--halo);
+}
+.op-mark .op-b { background: linear-gradient(transparent 16%, var(--hi) 16% 88%, transparent 88%); padding: 0 .03em; margin: 0 -.03em; }
+.op-bar {
+  display: flex; align-items: center; gap: 8px; width: min(780px, 100%); padding: 7px 8px; border-radius: 22px;
+  background: color-mix(in srgb, #ffffff 36%, transparent); box-shadow: inset 0 0 0 1px #ffffffb3, 0 20px 44px -20px #0b1d4a73;
+  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
+}
+.op-bar .w { gap: 8px; padding: 0 13px; }
+.op-bar svg { width: 18px; height: 18px; }
+.op-app { gap: 15px !important; }
+.op-app b { font-weight: 700; }
+.op-gap { flex: 1; }
+.op-sun .on, [data-mode="dark"] .op-sun .off { display: none; }
+[data-mode="dark"] .op-sun .on { display: block; }
+.op-line { font: 600 clamp(18px, 1.7vw, 23px)/1.3 var(--hand); color: var(--pen); text-shadow: 0 0 14px var(--halo), 0 0 4px var(--halo); }
+[data-mode="dark"] .op-mark, [data-mode="dark"] .op-line { color: #f2eeff; }
+[data-mode="dark"] .op-bar { background: color-mix(in srgb, #0d1030 42%, transparent); box-shadow: inset 0 0 0 1px #ffffff2e, 0 20px 44px -20px #000000a6; }
+/* the card's bar on its way up: a copy of it, out of the card, that stretches and shrinks into the real bar */
+.op-fly { position: fixed; margin: 0; transform-origin: 0 0; }
+/* behind the card the page waits: the bar and the notes come in once the bar has reached the top */
+.intro .dock { opacity: 0; pointer-events: none; }
+.intro .hero > * { opacity: 0; translate: 0 14px; }
+.intro.op-bar-in .dock { opacity: 1; transition: opacity .3s; }
+.intro.op-page-in .hero > * { opacity: 1; translate: none; transition: opacity .45s, translate .5s var(--ease); }
+.intro-skip .dock, .intro-skip .hero > * { transition: none !important; }
+@media (max-width: 699.98px), (max-aspect-ratio: 10/11) {
+  /* on phones the card sits low, over the sea under the lighthouse, its title on two lines */
+  .intro .opening { justify-content: flex-end; padding: 0 4vw 10vh; --tile-h: 36px; --halo: #14184acc; }
+  .op-mark { font-size: clamp(64px, 21vw, 112px); line-height: .86; color: #fff; }
+  .op-mark .op-w1, .op-mark .op-w2 { display: block; }
+  .op-line { color: #fff; }
+  .op-app span, .op-snd, .opening .clock .day { display: none; }
+  .op-bar { width: auto; min-width: min(330px, 92vw); }
+}
 .scene canvas { display: block; }
 main, .site-foot { position: relative; z-index: 1; }
 main { overflow-x: clip; }

From 6120452b7a3b93b40c8d852f9a7dbe11f9827645 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 13:29:06 +0100
Subject: [PATCH 12/46] docs: let the lighthouse light the website's title
 letter by letter

The title card's StableBar no longer has a yellow mark on its b. Instead the lighthouse
swings its beam to the first letter and sweeps it across the word, and each letter glows
once the light has reached it. Then the bar expands to the top as before. The glow is drawn
behind the letters, so the title stays the page's first large paint.
---
 site/index.html |  2 +-
 site/main.js    | 36 ++++++++++++++++++++++++++++++++----
 site/scene.js   | 11 ++++++++++-
 site/style.css  |  6 +++++-
 4 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/site/index.html b/site/index.html
index 56b4ebfe..d58976c4 100644
--- a/site/index.html
+++ b/site/index.html
@@ -114,7 +114,7 @@
 <a class="skip" href="#main">Skip to content</a>
 <div class="scene" id="scene" aria-hidden="true"></div>
 <div class="opening" id="opening" aria-hidden="true" data-theme="built-in">
-  <p class="op-mark"><span class="op-w1">Sta<span class="op-b">b</span>le</span><span class="op-w2">Bar</span></p>
+  <p class="op-mark"><span class="op-w1">Stable</span><span class="op-w2">Bar</span></p>
   <div class="op-bar">
     <span class="w"><svg style="width:13px;height:15px;fill:currentColor"><use href="#i-apple"/></svg></span>
     <span class="w op-app"><b>Finder</b><span>File</span><span>Edit</span><span>View</span></span>
diff --git a/site/main.js b/site/main.js
index 47a29a42..709b2b6f 100644
--- a/site/main.js
+++ b/site/main.js
@@ -898,7 +898,7 @@ if (scene) {
     dock.dataset.sky = lum(sky) < .18 ? "dark" : "light";
   };
   scene.onFrame = s => {
-    try { if (landed) lightWords(s); sweepGlow(s); skyStrip(s); if (lit && s.playing) hideTour(); } catch (err) {
+    try { if (landed) lightWords(s); readGlow(s); sweepGlow(s); skyStrip(s); if (lit && s.playing) hideTour(); } catch (err) {
       if (!sceneFailed) { sceneFailed = true; console.warn("The drawing failed:", err); }
     }
   };
@@ -988,7 +988,8 @@ function land(skip) {
   clearTimeout(runTimer);
   clearTimeout(landTimer);
   for (const type of LAND_SKIP) removeEventListener(type, skipLanding, true);
-  if (skip) root.classList.add("intro-skip");
+  if (skip) { root.classList.add("intro-skip"); S("stopSweep"); }
+  reading = null;
   root.classList.remove("intro", "op-bar-in", "op-page-in");
   opening.remove();
   measureMarks();
@@ -1021,6 +1022,32 @@ function expandOpening() {
     setTimeout(() => { if (!landed) root.classList.add("op-page-in"); }, 120);
   }, () => {});
 }
+/* The light reads the title: a glowing copy of it sits behind the letters, one element per letter, and each letter
+   lights up once the beam has reached it (all of them by the end of the sweep) */
+let reading = null;
+function readTitle() {
+  if (landed) return;
+  const mark = opening.querySelector(".op-mark"), glow = document.createElement("span");
+  glow.className = "op-glow";
+  glow.setAttribute("aria-hidden", "true");
+  for (const word of mark.children) {
+    const copy = document.createElement("span");
+    copy.className = word.className;
+    for (const ch of word.textContent) copy.append(Object.assign(document.createElement("i"), { textContent: ch }));
+    glow.append(copy);
+  }
+  mark.append(glow);
+  const letters = [...glow.querySelectorAll("i")].map(el => { const r = el.getBoundingClientRect(); return { el, x: r.left + r.width / 2, y: r.top + r.height / 2 }; });
+  const ys = letters.map(l => l.y), first = letters[0], last = letters.at(-1);
+  if (!S("sweepAlong", first.x - 10, (Math.min(...ys) + Math.max(...ys)) / 2, last.x + 10, (Math.min(...ys) + Math.max(...ys)) / 2, 1.1)) return;
+  reading = { letters, until: performance.now() + 1900 };
+}
+function readGlow(s) {
+  if (!reading) return;
+  const done = performance.now() > reading.until;
+  for (const l of reading.letters) if (!l.el.classList.contains("lit") && (done || s.inBeam(l.x, l.y) > .45)) l.el.classList.add("lit");
+  if (done) reading = null;
+}
 /* While the light sweeps the bar, each widget it passes glows for a moment */
 function sweepGlow(s) {
   const now = performance.now();
@@ -1037,8 +1064,9 @@ if (!landed) {
   else {
     for (const type of LAND_SKIP) addEventListener(type, skipLanding, { capture: true, passive: true });
     S("labels", false);
-    runTimer = setTimeout(expandOpening, 1150);
-    landTimer = setTimeout(() => land(false), 1150 + 1250);
+    setTimeout(readTitle, 250);
+    runTimer = setTimeout(expandOpening, 2150);
+    landTimer = setTimeout(() => land(false), 2150 + 1250);
   }
 } else opening.remove();
 
diff --git a/site/scene.js b/site/scene.js
index 66acd7e6..0994ae20 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -380,6 +380,15 @@ class Scene {
   }
   // the landing: until the camera has come down, the flock and the grass wait (they're placed where they're seen)
   hold(on) { this.held = !!on; if (!on) this.measure(); this.wake(); }
+  // the opening: the light swings to one point and sweeps along to another, once (viewport coordinates)
+  sweepAlong(x0, y0, x1, y1, dur = 1) {
+    if (this.reduced || document.hidden) return false;
+    const L = this.g.lamp;
+    this.sweep = { t0: this.t, lead: 0.35, dur, tail: 0.3, a0: Math.atan2(y0 - this.oy - L.y, x0 - this.ox - L.x), a1: Math.atan2(y1 - this.oy - L.y, x1 - this.ox - L.x) };
+    this.wake();
+    return true;
+  }
+  stopSweep() { this.sweep = null; this.wake(); }
   // the drawing's own labels ("a lighthouse (stable)" and the others), off while the page's title card is up
   labels(on) { this.noLabels = !on; this.wake(); }
   // the landing's last beat: the light swings to the bar's left end and sweeps along it to the right, once
@@ -583,7 +592,7 @@ class Scene {
     const w = this.sweep;
     if (w) {
       const a = this.t - w.t0;
-      if (a < w.lead + w.dur + w.tail) return a < w.lead ? w.a0 : lerp(w.a0, w.a1, smooth(0, 1, (a - w.lead) / w.dur));
+      if (a < w.lead + w.dur + w.tail) return a < w.lead ? w.a0 : w.a0 + angDiff(w.a1, w.a0) * smooth(0, 1, (a - w.lead) / w.dur);
       this.sweep = null;
     }
     const b = this.bore;
diff --git a/site/style.css b/site/style.css
index 70ea87a7..fef68a78 100644
--- a/site/style.css
+++ b/site/style.css
@@ -117,7 +117,11 @@ h1, h2, h3 { text-wrap: balance; }
   font: 800 clamp(76px, 10vw, 136px)/.92 var(--display); font-variation-settings: "INFM" 70, "BNCE" 25; letter-spacing: -.012em;
   color: var(--pen); rotate: -1.5deg; text-shadow: 0 0 22px var(--halo), 0 0 6px var(--halo);
 }
-.op-mark .op-b { background: linear-gradient(transparent 16%, var(--hi) 16% 88%, transparent 88%); padding: 0 .03em; margin: 0 -.03em; }
+.op-mark { position: relative; isolation: isolate; }
+/* the light reading the title: a copy of it behind the letters, each letter glowing once the beam has reached it */
+.op-glow { position: absolute; inset: 0; z-index: -1; color: transparent; text-shadow: none; pointer-events: none; }
+.op-glow i { font-style: normal; transition: text-shadow .3s; }
+.op-glow i.lit { text-shadow: 0 0 10px #ffe04a, 0 0 24px #ffe04ae6, 0 0 46px #ffd43ba6; }
 .op-bar {
   display: flex; align-items: center; gap: 8px; width: min(780px, 100%); padding: 7px 8px; border-radius: 22px;
   background: color-mix(in srgb, #ffffff 36%, transparent); box-shadow: inset 0 0 0 1px #ffffffb3, 0 20px 44px -20px #0b1d4a73;

From 4bf2ad18f3a683d284d123ea4904b08db4fdf5ae Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 13:42:16 +0100
Subject: [PATCH 13/46] docs: wake the website's lighthouse to read its title

The opening now starts with the lighthouse asleep: its eye shut, its lamp out and a few z's
rising from under its hat. Just before the title is read it opens its eye, blinks once, and
its light comes on to sweep across the word. Skipping the opening wakes it at once.

The title card's StableBar is now white, outlined in the drawing's black pen, on light and
dark skies alike.
---
 site/main.js   | 15 +++++++++------
 site/scene.js  | 35 +++++++++++++++++++++++++++++------
 site/style.css |  8 ++++----
 3 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/site/main.js b/site/main.js
index 709b2b6f..374bfaa5 100644
--- a/site/main.js
+++ b/site/main.js
@@ -974,9 +974,9 @@ function onBar(event, key, info = {}) {
   }
 }
 
-/* The opening: a title card over the whole drawing with the bar big in the middle of it. After a moment the bar
-   stretches up into its place at the top, the card drifts away, the notes come in, and the lighthouse sweeps its
-   light along the bar. Once a session, opening at the top, with motion allowed (the class comes from the page's
+/* The opening: a title card over the whole drawing with the bar big in the middle of it, and the lighthouse asleep.
+   It wakes up and reads the title with its light; then the bar stretches up into its place at the top, the card
+   drifts away, the notes come in, and the lighthouse sweeps its light along the bar. Once a session, opening at the top, with motion allowed (the class comes from the page's
    head; ?intro plays it again); any scroll, key, click or tap ends it at once. */
 let landed = !root.classList.contains("intro"), sweptUntil = 0, runTimer = 0, landTimer = 0;
 const swept = new Map();
@@ -989,6 +989,7 @@ function land(skip) {
   clearTimeout(landTimer);
   for (const type of LAND_SKIP) removeEventListener(type, skipLanding, true);
   if (skip) { root.classList.add("intro-skip"); S("stopSweep"); }
+  S("doze", false);
   reading = null;
   root.classList.remove("intro", "op-bar-in", "op-page-in");
   opening.remove();
@@ -1037,6 +1038,7 @@ function readTitle() {
     glow.append(copy);
   }
   mark.append(glow);
+  S("doze", false); // the lighthouse wakes up: its eye opens and its light comes on
   const letters = [...glow.querySelectorAll("i")].map(el => { const r = el.getBoundingClientRect(); return { el, x: r.left + r.width / 2, y: r.top + r.height / 2 }; });
   const ys = letters.map(l => l.y), first = letters[0], last = letters.at(-1);
   if (!S("sweepAlong", first.x - 10, (Math.min(...ys) + Math.max(...ys)) / 2, last.x + 10, (Math.min(...ys) + Math.max(...ys)) / 2, 1.1)) return;
@@ -1064,9 +1066,10 @@ if (!landed) {
   else {
     for (const type of LAND_SKIP) addEventListener(type, skipLanding, { capture: true, passive: true });
     S("labels", false);
-    setTimeout(readTitle, 250);
-    runTimer = setTimeout(expandOpening, 2150);
-    landTimer = setTimeout(() => land(false), 2150 + 1250);
+    S("doze", true); // it starts asleep, and wakes to read the title
+    setTimeout(readTitle, 750);
+    runTimer = setTimeout(expandOpening, 2650);
+    landTimer = setTimeout(() => land(false), 2650 + 1250);
   }
 } else opening.remove();
 
diff --git a/site/scene.js b/site/scene.js
index 0994ae20..c6d24c5a 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -242,6 +242,7 @@ class Scene {
     // a lived-in hill: the animals already there, the grass they eat, and a sheep in a box up in the sky
     this.flocked = false; this.meadow = []; this.sproutAt = 0;
     this.held = !!this.o.held; this.sweep = null;
+    this.dozing = false; this.wokeAt = -9; this.zAt = 0;
     this.box = { v: null, gx: null, gy: null, side: null, lastSide: null, la: 0, seenAt: -9, hop: -9, wob: -9, nextWob: 0, peek: -9, lit: 0, open: false, openAt: -9, blinkAt: -9, nextBlink: 0 };
     this.times = [];
     this.awake = 0; this.kick = 0; this.raf = 0; this.timer = 0; this.last = null;
@@ -389,6 +390,19 @@ class Scene {
     return true;
   }
   stopSweep() { this.sweep = null; this.wake(); }
+  // the opening: asleep, its eye shut and its lamp out, until the page wakes it to read the title
+  doze(on) {
+    if (on) this.dozing = true;
+    else if (this.dozing) {
+      this.dozing = false; this.wokeAt = this.t;
+      for (const d of this.doodles) if (d.kind === 'z') d.life = Math.min(d.life, this.t - d.t0 + 0.3);
+      this.blink.next = this.t + 0.6;
+    }
+    this.wake();
+  }
+  // 1 while asleep, easing to 0 as the eye opens; the light comes on once the eye is half open
+  drowsy() { return this.dozing ? 1 : 1 - smooth(0, 0.4, this.t - this.wokeAt); }
+  lampOn() { return 1 - smooth(0, 0.6, this.drowsy()); }
   // the drawing's own labels ("a lighthouse (stable)" and the others), off while the page's title card is up
   labels(on) { this.noLabels = !on; this.wake(); }
   // the landing's last beat: the light swings to the bar's left end and sweeps along it to the right, once
@@ -933,7 +947,7 @@ class Scene {
     // reduced motion and nothing moving: the scene sleeps until the next call or input
   }
   busy() {
-    if (this.sweep) return true;
+    if (this.sweep || this.t - this.wokeAt < 0.7) return true;
     if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
     if (this.ripples.length) return true;
@@ -989,6 +1003,8 @@ class Scene {
       sc.x += sc.dir * 7 * u * dt;
       if (sc.x > sc.x1) sc.dir = -1; else if (sc.x < sc.x0) sc.dir = 1;
     }
+    // asleep: a z now and then
+    if (this.dozing && !rm && this.t > this.zAt) { const L = g.lamp, er = g.lh.er; this.zAt = this.t + 0.38; this.doodle('z', L.x + er * 2, L.y - er * 0.4, { life: 1.5 }); }
     // the eye blinks now and then
     if (!rm && this.t > this.blink.next) { this.blink.at = this.t; this.blink.next = this.t + 3 + Math.random() * 5; }
     this.updateBeam(dt);
@@ -1016,8 +1032,8 @@ class Scene {
     }
     const vx = lerp(c, Math.cos(b.sa), b.steer), vy = lerp(0.03 * Math.abs(c), Math.sin(b.sa), b.steer);
     b.a = Math.atan2(vy, vx);
-    b.len = clamp(Math.hypot(vx, vy));
-    b.flash = Math.pow(Math.max(0, sn), 14) * (1 - b.steer);
+    b.len = clamp(Math.hypot(vx, vy)) * this.lampOn();
+    b.flash = Math.pow(Math.max(0, sn), 14) * (1 - b.steer) * this.lampOn();
   }
   updateObjs(dt) {
     const g = this.g, u = g.u, G = 1500 * u, rm = this.reduced;
@@ -1762,7 +1778,7 @@ function drawHillLight(s, c) {
 /* the lamp's halo at night: hand-drawn rings and short rays, no blur */
 function drawHalo(s, c) {
   const g = s.g, u = g.u, P = s.P, L = g.lamp, er = g.lh.er;
-  const night = smooth(0.35, 0.85, s.d), f = s.beam.flash, k = Math.max(night * s.beamI(), f * 0.9);
+  const night = smooth(0.35, 0.85, s.d), f = s.beam.flash, k = Math.max(night * s.beamI(), f * 0.9) * s.lampOn();
   if (k < 0.02) return;
   const r1 = er * (2.1 + f * 0.6), r2 = er * (3 + f * 1.4);
   // the lit lantern: a flat disc of light just around the eye
@@ -1947,6 +1963,7 @@ function drawEye(s, c) {
   if (bl < 0.18 && !s.bore) shut = Math.max(shut, Math.sin(bl / 0.18 * Math.PI));
   if (wk < 0.6) shut = Math.max(shut, wk < 0.1 ? wk / 0.1 : wk < 0.45 ? 1 : 1 - (wk - 0.45) / 0.15);
   if (s.reduced && wk >= 0.6) shut = lerp(0.2, 0.02, night);
+  shut = Math.max(shut, s.drowsy());
   const lidCol = rgba(mul(hex('#FFFFFF'), P.paper));
   if (md.happy) {
     // shut, and pleased with itself: the lid line curves up
@@ -2661,8 +2678,8 @@ function quaver(c, x, y, sz, col, flip) {
   c.fillStyle = col; c.fill();
 }
 
-/* "boink!", "pok", "plop", "hehe", the whistled notes, the grazers' "nom"s and the box's "baa!": they pop in,
-   drift a little and fade (without motion they just show, and go) */
+/* "boink!", "pok", "plop", "hehe", the whistled notes, the grazers' "nom"s, the box's "baa!" and the sleeper's
+   z's: they pop in, drift a little and fade (without motion they just show, and go) */
 function drawDoodles(s, c) {
   if (!s.doodles.length) return;
   const g = s.g, u = g.u, P = s.P, rm = s.reduced, ink = rgba(mix(P.ink, P.paper, smooth(0.5, 0.7, s.d)));
@@ -2670,6 +2687,12 @@ function drawDoodles(s, c) {
     const a = s.t - d.t0, k = rm ? 1 : pop(a / 0.24), f = 1 - smooth(d.life - 0.3, d.life, a), col = d.sea ? rgba(P.paper) : ink;
     if (f <= 0 || k <= 0.01) continue;
     c.save(); c.globalAlpha = f;
+    if (d.kind === 'z') {
+      // asleep: each z drifts up and away from the shut eye, growing as it goes
+      const er = g.lh.er, sz = Math.max(12, er * 1.1) * (0.8 + 0.7 * clamp(a / d.life));
+      label(c, 'z', d.x + (rm ? 0 : a * er * 1.3 + Math.sin(a * 4 + d.seed) * er * 0.15), d.y - (rm ? 0 : a * er * 2.2), sz * k, col, 'left', -0.15);
+      c.restore(); continue;
+    }
     if (d.kind === 'note') {
       const sz = 4.2 * u + 1.6;
       quaver(c, d.x + Math.sin(a * 4 + d.seed) * 5 * u, d.y - a * 36 * u, sz * k, col, d.flip);
diff --git a/site/style.css b/site/style.css
index fef68a78..403c2b16 100644
--- a/site/style.css
+++ b/site/style.css
@@ -115,11 +115,11 @@ h1, h2, h3 { text-wrap: balance; }
 }
 .op-mark {
   font: 800 clamp(76px, 10vw, 136px)/.92 var(--display); font-variation-settings: "INFM" 70, "BNCE" 25; letter-spacing: -.012em;
-  color: var(--pen); rotate: -1.5deg; text-shadow: 0 0 22px var(--halo), 0 0 6px var(--halo);
+  color: #fff; rotate: -1.5deg; -webkit-text-stroke: .045em var(--pen); paint-order: stroke fill; text-shadow: 0 .045em 0 #1111111f;
 }
 .op-mark { position: relative; isolation: isolate; }
 /* the light reading the title: a copy of it behind the letters, each letter glowing once the beam has reached it */
-.op-glow { position: absolute; inset: 0; z-index: -1; color: transparent; text-shadow: none; pointer-events: none; }
+.op-glow { position: absolute; inset: 0; z-index: -1; color: transparent; text-shadow: none; -webkit-text-stroke: 0; pointer-events: none; }
 .op-glow i { font-style: normal; transition: text-shadow .3s; }
 .op-glow i.lit { text-shadow: 0 0 10px #ffe04a, 0 0 24px #ffe04ae6, 0 0 46px #ffd43ba6; }
 .op-bar {
@@ -135,7 +135,7 @@ h1, h2, h3 { text-wrap: balance; }
 .op-sun .on, [data-mode="dark"] .op-sun .off { display: none; }
 [data-mode="dark"] .op-sun .on { display: block; }
 .op-line { font: 600 clamp(18px, 1.7vw, 23px)/1.3 var(--hand); color: var(--pen); text-shadow: 0 0 14px var(--halo), 0 0 4px var(--halo); }
-[data-mode="dark"] .op-mark, [data-mode="dark"] .op-line { color: #f2eeff; }
+[data-mode="dark"] .op-line { color: #f2eeff; }
 [data-mode="dark"] .op-bar { background: color-mix(in srgb, #0d1030 42%, transparent); box-shadow: inset 0 0 0 1px #ffffff2e, 0 20px 44px -20px #000000a6; }
 /* the card's bar on its way up: a copy of it, out of the card, that stretches and shrinks into the real bar */
 .op-fly { position: fixed; margin: 0; transform-origin: 0 0; }
@@ -148,7 +148,7 @@ h1, h2, h3 { text-wrap: balance; }
 @media (max-width: 699.98px), (max-aspect-ratio: 10/11) {
   /* on phones the card sits low, over the sea under the lighthouse, its title on two lines */
   .intro .opening { justify-content: flex-end; padding: 0 4vw 10vh; --tile-h: 36px; --halo: #14184acc; }
-  .op-mark { font-size: clamp(64px, 21vw, 112px); line-height: .86; color: #fff; }
+  .op-mark { font-size: clamp(64px, 21vw, 112px); line-height: .86; }
   .op-mark .op-w1, .op-mark .op-w2 { display: block; }
   .op-line { color: #fff; }
   .op-app span, .op-snd, .opening .clock .day { display: none; }

From 35b029362e73f4e3af34d6d65eb652be40f00700 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 13:59:25 +0100
Subject: [PATCH 14/46] docs: let the website's opening sleep until the visitor
 moves

The opening now starts at night and holds still: the lighthouse sleeps with z's rising beside
its hat, the animals have their eyes shut, and the drawing stops. The first move of the mouse,
or the first tap, wakes it up: the day comes, the lighthouse opens its eye and reads the title
with its light, then the bar rises into place as before. A scroll or a key still ends the
opening at once.

It wakes into the light theme, or stays at night for visitors who chose the night with the
switch. The tap that wakes it no longer drops a duck or reaches the page's hidden links. The
moon now sits as high as the sun, clear of the title.
---
 site/index.html |  7 ++---
 site/main.js    | 70 +++++++++++++++++++++++++++++++++++++++----------
 site/scene.js   | 41 +++++++++++++++++------------
 site/style.css  | 15 ++++++++++-
 4 files changed, 98 insertions(+), 35 deletions(-)

diff --git a/site/index.html b/site/index.html
index d58976c4..8a124108 100644
--- a/site/index.html
+++ b/site/index.html
@@ -45,9 +45,9 @@
 const root = document.documentElement;
 root.dataset.mode = localStorage.getItem("mode") || (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
 root.classList.add("js");
-// the landing film: once a session, opening at the top of the page, with motion allowed; ?intro plays it again
-// (see land() in main.js)
-try { if (!matchMedia("(prefers-reduced-motion: reduce)").matches && (new URLSearchParams(location.search).has("intro") || (!sessionStorage.getItem("landed") && !location.hash))) root.classList.add("intro"); } catch {}
+// the landing film: once a session, opening at the top of the page, with motion allowed; ?intro plays it again.
+// It starts at night, and wakes into the day when the visitor moves (see land() in main.js)
+try { if (!matchMedia("(prefers-reduced-motion: reduce)").matches && (new URLSearchParams(location.search).has("intro") || (!sessionStorage.getItem("landed") && !location.hash))) { root.classList.add("intro"); root.dataset.mode = "dark"; } } catch {}
 </script>
 <script src="scene.js" defer></script>
 <script src="main.js" defer></script>
@@ -114,6 +114,7 @@
 <a class="skip" href="#main">Skip to content</a>
 <div class="scene" id="scene" aria-hidden="true"></div>
 <div class="opening" id="opening" aria-hidden="true" data-theme="built-in">
+  <span class="op-z"><i>z</i><i>z</i><i>z</i></span>
   <p class="op-mark"><span class="op-w1">Stable</span><span class="op-w2">Bar</span></p>
   <div class="op-bar">
     <span class="w"><svg style="width:13px;height:15px;fill:currentColor"><use href="#i-apple"/></svg></span>
diff --git a/site/main.js b/site/main.js
index 374bfaa5..c698f05c 100644
--- a/site/main.js
+++ b/site/main.js
@@ -898,7 +898,7 @@ if (scene) {
     dock.dataset.sky = lum(sky) < .18 ? "dark" : "light";
   };
   scene.onFrame = s => {
-    try { if (landed) lightWords(s); readGlow(s); sweepGlow(s); skyStrip(s); if (lit && s.playing) hideTour(); } catch (err) {
+    try { if (landed) lightWords(s); if (!woken) placeSnore(s); readGlow(s); sweepGlow(s); skyStrip(s); if (lit && s.playing) hideTour(); } catch (err) {
       if (!sceneFailed) { sceneFailed = true; console.warn("The drawing failed:", err); }
     }
   };
@@ -923,11 +923,11 @@ if (scene) {
   addEventListener("blur", () => S("release"));
 
   /* A click or tap on the landscape, not on the page, drops something there.
-     A click that only closes a popup or a menu doesn't. */
+     A click that only closes a popup or a menu doesn't, nor one that wakes the opening up. */
   let overlay = false;
   document.addEventListener("click", () => { overlay = Boolean(openId || adding || !ctx.hidden || reviewing); }, true);
   document.addEventListener("click", e => {
-    if (overlay || editing || e.detail === 0) return;
+    if (overlay || editing || e.detail === 0 || !landed) return;
     if (e.target.closest("a, button, input, label, pre, .note, .dock, .site-foot, [role='dialog']")) return;
     if (String(getSelection?.() || "")) return;
     S("tap", e.clientX, e.clientY);
@@ -974,21 +974,29 @@ function onBar(event, key, info = {}) {
   }
 }
 
-/* The opening: a title card over the whole drawing with the bar big in the middle of it, and the lighthouse asleep.
-   It wakes up and reads the title with its light; then the bar stretches up into its place at the top, the card
-   drifts away, the notes come in, and the lighthouse sweeps its light along the bar. Once a session, opening at the top, with motion allowed (the class comes from the page's
-   head; ?intro plays it again); any scroll, key, click or tap ends it at once. */
-let landed = !root.classList.contains("intro"), sweptUntil = 0, runTimer = 0, landTimer = 0;
+/* The opening: a title card over the whole drawing with the bar big in the middle of it, at night. Everything
+   sleeps and nothing moves until the visitor does: then the lighthouse wakes up, the day comes, and its light reads
+   the title; the bar stretches up into its place at the top, the card drifts away, the notes come in, and the
+   lighthouse sweeps its light along the bar. Once a session, opening at the top, with motion allowed (the class and
+   the night come from the page's head; ?intro plays it again). A scroll or a key ends it at once, and so does a
+   click or a tap once it's awake. */
+let landed = !root.classList.contains("intro"), woken = landed, wokeAt = 0, sweptUntil = 0, runTimer = 0, landTimer = 0;
 const swept = new Map();
-const opening = document.getElementById("opening");
+const opening = document.getElementById("opening"), snore = opening.querySelector(".op-z");
+const WAKE_ON = ["pointermove", "pointerdown", "touchstart"];
 const LAND_SKIP = ["wheel", "keydown", "pointerdown", "touchstart", "scroll"];
+// it wakes into the day, or into the night when that's the visitor's choice on the night switch
+const dayMode = () => localStorage.getItem("mode") === "dark" ? "dark" : "light";
 function land(skip) {
   if (landed) return;
   landed = true;
   clearTimeout(runTimer);
   clearTimeout(landTimer);
+  for (const type of WAKE_ON) removeEventListener(type, stirs, true);
   for (const type of LAND_SKIP) removeEventListener(type, skipLanding, true);
+  if (!woken) { woken = true; setMode(dayMode()); }
   if (skip) { root.classList.add("intro-skip"); S("stopSweep"); }
+  S("freeze", false);
   S("doze", false);
   reading = null;
   root.classList.remove("intro", "op-bar-in", "op-page-in");
@@ -1000,7 +1008,42 @@ function land(skip) {
   if (skip) requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove("intro-skip")));
   else if (S("sweepBar", 1.1)) sweptUntil = performance.now() + 1800;
 }
-function skipLanding() { land(true); }
+// a click or a tap wakes it up, and only ends the opening once it's awake (not the one that woke it)
+function skipLanding(e) {
+  if ((e.type === "pointerdown" || e.type === "touchstart") && (!woken || performance.now() - wokeAt < 400)) return;
+  land(true);
+}
+/* Waking up: the first move of a mouse or a pen (one that really moves: a browser may report a still pointer as the
+   page appears under it), or the first click or tap */
+let stirred = 0, stirAt = null;
+function stirs(e) {
+  if (e.type === "pointermove" && e.pointerType !== "touch") {
+    if (stirAt) stirred += Math.hypot(e.clientX - stirAt[0], e.clientY - stirAt[1]);
+    stirAt = [e.clientX, e.clientY];
+    if (stirred < 6) return;
+  }
+  wakeUp();
+}
+function wakeUp() {
+  if (woken || landed) return;
+  woken = true;
+  wokeAt = performance.now();
+  for (const type of WAKE_ON) removeEventListener(type, stirs, true);
+  snore.classList.add("gone");
+  setMode(dayMode());
+  S("freeze", false);
+  readTitle();
+  runTimer = setTimeout(expandOpening, 1900);
+  landTimer = setTimeout(() => land(false), 1900 + 1250);
+}
+// the sleeper's z's, by its lamp wherever the drawing has put it
+let snoreAt = "";
+function placeSnore(s) {
+  const p = s.lampAt(), size = Math.max(12, p.r * 1.1), key = `${Math.round(p.x)} ${Math.round(p.y)} ${Math.round(size)}`;
+  if (key === snoreAt) return;
+  snoreAt = key;
+  snore.style.cssText = `left: ${p.x + p.r * 2}px; top: ${p.y - p.r * 0.4 - size / 2}px; --zs: ${size}px`;
+}
 /* The card's bar stretches into the real one: a copy of it leaves the card and grows to the window's width as it
    rises to the top, shrinking to the real bar's height, its widgets sliding apart as it widens; the real bar fades
    in under it, the copy fades away and the notes come in */
@@ -1065,11 +1108,10 @@ if (!landed) {
   if (scrollY > 0 || document.hidden) land(true);
   else {
     for (const type of LAND_SKIP) addEventListener(type, skipLanding, { capture: true, passive: true });
+    for (const type of WAKE_ON) addEventListener(type, stirs, { capture: true, passive: true });
     S("labels", false);
-    S("doze", true); // it starts asleep, and wakes to read the title
-    setTimeout(readTitle, 750);
-    runTimer = setTimeout(expandOpening, 2650);
-    landTimer = setTimeout(() => land(false), 2650 + 1250);
+    S("doze", true); // asleep, its eye shut and its lamp out,
+    S("freeze", true); // and the whole drawing still, until the visitor moves
   }
 } else opening.remove();
 
diff --git a/site/scene.js b/site/scene.js
index c6d24c5a..a5469004 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -138,7 +138,7 @@ const HAND = '"Shantell Sans Hand", "Shantell Sans", "Chalkboard SE", sans-serif
    One felt pen in three weights. Every stroke is a filled ribbon whose width follows the pen's
    pressure: thin where it lands and lifts, a little uneven along the way. The line boils between
    three states; the printed fills don't boil and sit one constant vector off the line. */
-let BOIL = 0, PW = 1, INK = '#111', REGX = 2.6, REGY = 1.9;
+let BOIL = 0, PW = 1, INK = '#111', REGX = 2.6, REGY = 1.9, NAP = false;
 const SIL = 3.2, DET = 2.1, TEX = 1.35;
 
 function ribbon(c, pts, w, sd = 0, o = {}) {
@@ -242,7 +242,7 @@ class Scene {
     // a lived-in hill: the animals already there, the grass they eat, and a sheep in a box up in the sky
     this.flocked = false; this.meadow = []; this.sproutAt = 0;
     this.held = !!this.o.held; this.sweep = null;
-    this.dozing = false; this.wokeAt = -9; this.zAt = 0;
+    this.dozing = false; this.wokeAt = -9; this.frozen = false;
     this.box = { v: null, gx: null, gy: null, side: null, lastSide: null, la: 0, seenAt: -9, hop: -9, wob: -9, nextWob: 0, peek: -9, lit: 0, open: false, openAt: -9, blinkAt: -9, nextBlink: 0 };
     this.times = [];
     this.awake = 0; this.kick = 0; this.raf = 0; this.timer = 0; this.last = null;
@@ -395,7 +395,6 @@ class Scene {
     if (on) this.dozing = true;
     else if (this.dozing) {
       this.dozing = false; this.wokeAt = this.t;
-      for (const d of this.doodles) if (d.kind === 'z') d.life = Math.min(d.life, this.t - d.t0 + 0.3);
       this.blink.next = this.t + 0.6;
     }
     this.wake();
@@ -403,6 +402,10 @@ class Scene {
   // 1 while asleep, easing to 0 as the eye opens; the light comes on once the eye is half open
   drowsy() { return this.dozing ? 1 : 1 - smooth(0, 0.4, this.t - this.wokeAt); }
   lampOn() { return 1 - smooth(0, 0.6, this.drowsy()); }
+  // the opening's still night: nothing moves until the visitor does (the page draws the sleeper's z's)
+  freeze(on) { this.frozen = !!on; if (!on) this.last = null; this.wake(); }
+  // where the lamp is in the window, and the eye's size: the page puts the z's there
+  lampAt() { const L = this.g.lamp; return { x: this.ox + L.x, y: this.oy + L.y, r: this.g.lh.er }; }
   // the drawing's own labels ("a lighthouse (stable)" and the others), off while the page's title card is up
   labels(on) { this.noLabels = !on; this.wake(); }
   // the landing's last beat: the light swings to the bar's left end and sweeps along it to the right, once
@@ -725,7 +728,8 @@ class Scene {
     // the far island and its smaller lighthouse
     g.isle = portrait ? { x0: 0.03 * W, x1: 0.24 * W, h: 20 * u + 8 } : { x0: 0.49 * W, x1: 0.585 * W, h: 22 * u };
     g.sun = portrait ? { x: 0.3 * W, y0: top + H * 0.115 } : { x: 0.57 * W, y0: top + sky * 0.3 };
-    g.moon = portrait ? { x: 0.08 * W + 6, y1: top + H * 0.15 } : { x: 0.6 * W, y1: top + sky * 0.44 };
+    // (as high as the sun: lower, it would sit on the opening's title)
+    g.moon = portrait ? { x: 0.08 * W + 6, y1: top + H * 0.15 } : { x: 0.6 * W, y1: top + sky * 0.3 };
 
     // the sea: rows of scallops, sparse and small near the horizon
     const rows = portrait ? Math.round(clamp((H - g.horizon) / 11, 26, 60)) : Math.round(18 + 14 * Math.min(1, u));
@@ -941,6 +945,8 @@ class Scene {
   sleep() { cancelAnimationFrame(this.raf); clearTimeout(this.timer); this.raf = this.timer = 0; }
   schedule() {
     if (this.raf || this.timer || this.dead || document.hidden) return;
+    // frozen: a frame only when one is asked for (a resize, a new theme), none in between
+    if (this.frozen) { if (this.kick > 0) this.raf = requestAnimationFrame(this.frame); return; }
     const active = this.kick > 0 || performance.now() < this.awake || this.busy();
     if (active) this.raf = requestAnimationFrame(this.frame);
     else if (!this.reduced) this.timer = setTimeout(() => { this.timer = 0; this.raf = requestAnimationFrame(this.frame); }, 1000 / IDLE_FPS - 6);
@@ -962,7 +968,8 @@ class Scene {
     this.kick--;
     const dt = this.last == null ? 1 / 60 : Math.min(0.1, Math.max(0, (now - this.last) / 1000));
     this.last = now;
-    this.update(dt);
+    // frozen, only the very first frame moves anything: it puts everyone in their place
+    if (!this.frozen || this.t === 0) this.update(dt);
     const t0 = performance.now();
     this.render();
     this.times.push(performance.now() - t0);
@@ -1003,8 +1010,6 @@ class Scene {
       sc.x += sc.dir * 7 * u * dt;
       if (sc.x > sc.x1) sc.dir = -1; else if (sc.x < sc.x0) sc.dir = 1;
     }
-    // asleep: a z now and then
-    if (this.dozing && !rm && this.t > this.zAt) { const L = g.lamp, er = g.lh.er; this.zAt = this.t + 0.38; this.doodle('z', L.x + er * 2, L.y - er * 0.4, { life: 1.5 }); }
     // the eye blinks now and then
     if (!rm && this.t > this.blink.next) { this.blink.at = this.t; this.blink.next = this.t + 3 + Math.random() * 5; }
     this.updateBeam(dt);
@@ -1427,7 +1432,7 @@ class Scene {
     const step = Math.round(this.d * STEPS);
     this.P = palAt(PAL, step / STEPS);
     this.pstep = step;
-    BOIL = this.boil; PW = g.pw; INK = rgba(this.P.ink); REGX = 2.6 * g.pw; REGY = 1.9 * g.pw;
+    BOIL = this.boil; PW = g.pw; INK = rgba(this.P.ink); REGX = 2.6 * g.pw; REGY = 1.9 * g.pw; NAP = this.drowsy() > 0.5;
     c.setTransform(k, 0, 0, k, 0, 0);
     c.globalAlpha = 1; c.globalCompositeOperation = 'source-over';
     drawScene(this, c);
@@ -2540,6 +2545,11 @@ function head(c, u, o, t, px, py, to, turn, draw) {
   draw(chew);
   c.restore();
 }
+// asleep: the eye shut, a short curve
+function napEye(c, x, y, r, col) {
+  c.beginPath(); ribbon(c, ellipse(x, y - r * 0.5, r * 1.2, r * 0.9, 8, Math.PI * 0.1, Math.PI * 0.9), TEX, 4, { tin: 1, tout: 1, w0: 0.9, w1: 0.9, amp: 0.1 });
+  c.fillStyle = col; c.fill();
+}
 // pleased with a meal: a short while after it, eyes shut happily and the tail wags
 const joyAt = (o, t) => { const a = t - (o.joy ?? -99); return a >= 0 && a < 1.3 ? a : -1; };
 function drawSheep(c, u, wool, o, t) {
@@ -2562,6 +2572,7 @@ function drawSheep(c, u, wool, o, t) {
     const tuft = []; for (let i = 0; i < 10; i++) { const a = Math.PI * 1.05 + i / 9 * Math.PI * 0.9; tuft.push([13.5 * u + Math.cos(a) * 5 * u, -24 * u + Math.sin(a) * 2.6 * u]); }
     c.beginPath(); ribbon(c, tuft, TEX, 3, { tin: 1, tout: 1 }); c.fillStyle = rgba(wool); c.fill();
     if (ja >= 0) { c.beginPath(); ribbon(c, ellipse(16.6 * u, -19.6 * u, 1.7 * u, 1.3 * u, 8, Math.PI * 1.1, Math.PI * 1.9), TEX, 4, { tin: 1, tout: 1, w0: 0.9, w1: 0.9, amp: 0.1 }); c.fillStyle = '#FFFFFF'; c.fill(); }
+    else if (NAP) napEye(c, 16.6 * u, -20.5 * u, 1.5 * u, '#FFFFFF');
     else { dot(c, 16.6 * u, -20.5 * u, 1.5 * u, '#FFFFFF'); dot(c, 17.1 * u, -20.3 * u, 0.75 * u, INK); }
   });
 }
@@ -2592,6 +2603,7 @@ function drawCow(c, u, white, P, o, t) {
     shape(c, ellipse(23 * u, my, 4 * u, 3 * u, 14), mul(C.pink, P.paper), TEX * 1.2, 2);
     dot(c, 22 * u, my, 0.7 * u, INK); dot(c, 24.6 * u, my - 0.2 * u, 0.7 * u, INK);
     if (ja >= 0) { c.beginPath(); ribbon(c, ellipse(20.2 * u, -25.8 * u, 1.5 * u, 1.1 * u, 8, Math.PI * 1.1, Math.PI * 1.9), TEX, 6, { tin: 1, tout: 1, amp: 0.1 }); c.fillStyle = INK; c.fill(); }
+    else if (NAP) napEye(c, 20.2 * u, -26.6 * u, 1.3 * u, INK);
     else dot(c, 20.2 * u, -26.6 * u, 1.05 * u, INK);
     c.beginPath();
     ribbon(c, [[16.5 * u, -29.5 * u], [15 * u, -33.5 * u], [16.5 * u, -36 * u]], TEX * 1.3, 1, { tin: 1, tout: 2 });
@@ -2619,7 +2631,8 @@ function drawDuck(c, u, yellow, P, o, t) {
   const beak = [[11.5 * u, -15.5 * u], [17.5 * u, -14 * u], [16 * u, -12 * u], [11.5 * u, -12.2 * u]];
   print(c, beak, C.beak);
   c.beginPath(); loop(c, dens(beak, 2, true), TEX * 1.2, 5); ribbon(c, ellipse(-1 * u, -6 * u, 6 * u, 3 * u, 10, 0.2, 2.2), TEX, 6, { tin: 1, tout: 2 }); c.fillStyle = INK; c.fill();
-  dot(c, 8 * u, -16.5 * u, 1.35 * u, INK); dot(c, 7.6 * u, -17 * u, 0.45 * u, '#FFFFFF');
+  if (NAP) napEye(c, 8 * u, -16.5 * u, 1.4 * u, INK);
+  else { dot(c, 8 * u, -16.5 * u, 1.35 * u, INK); dot(c, 7.6 * u, -17 * u, 0.45 * u, '#FFFFFF'); }
   // a little water at the waterline
   c.beginPath(); ribbon(c, [[-13 * u, 0.5 * u], [-4 * u, -1.2 * u], [5 * u, 0.6 * u], [13 * u, -0.6 * u]], TEX, 7, { tin: 2, tout: 2 }); c.fillStyle = rgba(P.foam); c.fill();
 }
@@ -2678,8 +2691,8 @@ function quaver(c, x, y, sz, col, flip) {
   c.fillStyle = col; c.fill();
 }
 
-/* "boink!", "pok", "plop", "hehe", the whistled notes, the grazers' "nom"s, the box's "baa!" and the sleeper's
-   z's: they pop in, drift a little and fade (without motion they just show, and go) */
+/* "boink!", "pok", "plop", "hehe", the whistled notes, the grazers' "nom"s and the box's "baa!": they pop in,
+   drift a little and fade (without motion they just show, and go) */
 function drawDoodles(s, c) {
   if (!s.doodles.length) return;
   const g = s.g, u = g.u, P = s.P, rm = s.reduced, ink = rgba(mix(P.ink, P.paper, smooth(0.5, 0.7, s.d)));
@@ -2687,12 +2700,6 @@ function drawDoodles(s, c) {
     const a = s.t - d.t0, k = rm ? 1 : pop(a / 0.24), f = 1 - smooth(d.life - 0.3, d.life, a), col = d.sea ? rgba(P.paper) : ink;
     if (f <= 0 || k <= 0.01) continue;
     c.save(); c.globalAlpha = f;
-    if (d.kind === 'z') {
-      // asleep: each z drifts up and away from the shut eye, growing as it goes
-      const er = g.lh.er, sz = Math.max(12, er * 1.1) * (0.8 + 0.7 * clamp(a / d.life));
-      label(c, 'z', d.x + (rm ? 0 : a * er * 1.3 + Math.sin(a * 4 + d.seed) * er * 0.15), d.y - (rm ? 0 : a * er * 2.2), sz * k, col, 'left', -0.15);
-      c.restore(); continue;
-    }
     if (d.kind === 'note') {
       const sz = 4.2 * u + 1.6;
       quaver(c, d.x + Math.sin(a * 4 + d.seed) * 5 * u, d.y - a * 36 * u, sz * k, col, d.flip);
diff --git a/site/style.css b/site/style.css
index 403c2b16..f2432eaa 100644
--- a/site/style.css
+++ b/site/style.css
@@ -135,13 +135,26 @@ h1, h2, h3 { text-wrap: balance; }
 .op-sun .on, [data-mode="dark"] .op-sun .off { display: none; }
 [data-mode="dark"] .op-sun .on { display: block; }
 .op-line { font: 600 clamp(18px, 1.7vw, 23px)/1.3 var(--hand); color: var(--pen); text-shadow: 0 0 14px var(--halo), 0 0 4px var(--halo); }
+/* the day comes: the card's bar and line change with the sky */
+.opening .op-bar, .opening .w, .op-line { transition: background-color 1s, color 1s, box-shadow 1s, text-shadow 1s; }
+/* asleep: z's rising beside the lighthouse's hat (the page puts them by its lamp) */
+.op-z { position: fixed; left: -99px; top: -99px; font: 400 var(--zs, 16px)/1 var(--hand); color: #f2eeff; transition: opacity .3s; }
+.op-z i { position: absolute; left: 0; top: 0; font-style: normal; opacity: 0; animation: op-z 1.5s linear infinite; }
+.op-z i:nth-child(2) { animation-delay: .5s; }
+.op-z i:nth-child(3) { animation-delay: 1s; }
+.op-z.gone { opacity: 0; }
+@keyframes op-z {
+  0% { opacity: 0; transform: translate(0, 0) scale(.8) rotate(-9deg); }
+  15%, 70% { opacity: 1; }
+  100% { opacity: 0; transform: translate(calc(var(--zs) * 1.8), calc(var(--zs) * -3)) scale(1.5) rotate(-9deg); }
+}
 [data-mode="dark"] .op-line { color: #f2eeff; }
 [data-mode="dark"] .op-bar { background: color-mix(in srgb, #0d1030 42%, transparent); box-shadow: inset 0 0 0 1px #ffffff2e, 0 20px 44px -20px #000000a6; }
 /* the card's bar on its way up: a copy of it, out of the card, that stretches and shrinks into the real bar */
 .op-fly { position: fixed; margin: 0; transform-origin: 0 0; }
 /* behind the card the page waits: the bar and the notes come in once the bar has reached the top */
 .intro .dock { opacity: 0; pointer-events: none; }
-.intro .hero > * { opacity: 0; translate: 0 14px; }
+.intro .hero > * { opacity: 0; translate: 0 14px; pointer-events: none; }
 .intro.op-bar-in .dock { opacity: 1; transition: opacity .3s; }
 .intro.op-page-in .hero > * { opacity: 1; translate: none; transition: opacity .45s, translate .5s var(--ease); }
 .intro-skip .dock, .intro-skip .hero > * { transition: none !important; }

From 0f2e5a3a5b94ca8319abd51e4dfd95fc4a804584 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 14:08:16 +0100
Subject: [PATCH 15/46] docs: play the website's opening by itself, without the
 pointer

The opening no longer waits for the visitor. The lighthouse sleeps at night for a moment, then
wakes up on its own: the sun comes up over almost two seconds, its light reads the title, and
the bar rises into place while the notes come in. The pointer leaves the drawing alone until the
opening is over, and a click that ends it no longer drops anything.

The sunrise is now an even change instead of the usual quick ease. The card's bar turns its
words from light to dark halfway through, so they never fade to grey on grey, and its sun and
moon cross over. The drawing's labels fade in, and the notes no longer wait for the bar to
settle.
---
 site/main.js   | 81 +++++++++++++++++++++++---------------------------
 site/scene.js  | 23 ++++++++++----
 site/style.css | 15 +++++++---
 3 files changed, 66 insertions(+), 53 deletions(-)

diff --git a/site/main.js b/site/main.js
index c698f05c..71738ee1 100644
--- a/site/main.js
+++ b/site/main.js
@@ -834,11 +834,11 @@ function hour() {
   return { d, name };
 }
 let lastDusk = -1, lastState = "";
-function updateDusk() {
+function updateDusk(dur) {
   if (!marks.length) return;
   const { d, name } = hour();
   const dusk = root.dataset.mode === "dark" ? 1 : d;
-  if (Math.abs(dusk - lastDusk) > .001) { lastDusk = dusk; S("setDusk", dusk); }
+  if (Math.abs(dusk - lastDusk) > .001) { lastDusk = dusk; S("setDusk", dusk, dur); }
   if (name !== lastState) { lastState = name; S("setState", name); }
 }
 
@@ -864,11 +864,14 @@ function lightWords(s) {
    remembers the visitor's choice, shared with the privacy and terms pages. */
 const themeColor = document.querySelector('meta[name="theme-color"]');
 const nightSwitches = [document.getElementById("night"), document.querySelector(".key .night")];
-function setMode(mode) {
+// (over a few seconds for the opening's sunrise: the drawing follows, and the browser's colour changes halfway)
+function setMode(mode, dur) {
   root.dataset.mode = mode;
-  themeColor.content = mode === "light" ? "#86cbf2" : "#232662";
+  const color = mode === "light" ? "#86cbf2" : "#232662";
+  if (dur) setTimeout(() => { themeColor.content = color; }, dur * 500);
+  else themeColor.content = color;
   for (const b of nightSwitches) b.setAttribute("aria-pressed", mode === "dark");
-  updateDusk();
+  updateDusk(dur);
 }
 for (const b of nightSwitches) b.addEventListener("click", e => {
   e.stopPropagation();
@@ -903,10 +906,10 @@ if (scene) {
     }
   };
 
-  /* The pointer and a finger steer the light and stir the grass, clouds and water.
+  /* The pointer and a finger steer the light and stir the grass, clouds and water, once the opening is over.
      On touch only a sideways drag steers; the page keeps its vertical scrolling (touch-action: pan-y). */
-  addEventListener("pointermove", e => S("pointer", e.clientX, e.clientY, e.pointerType), { passive: true });
-  addEventListener("pointerdown", e => S("pointer", e.clientX, e.clientY, e.pointerType), { passive: true });
+  addEventListener("pointermove", e => { if (landed) S("pointer", e.clientX, e.clientY, e.pointerType); }, { passive: true });
+  addEventListener("pointerdown", e => { if (landed) S("pointer", e.clientX, e.clientY, e.pointerType); }, { passive: true });
   addEventListener("pointerup", e => { if (e.pointerType !== "mouse") S("release"); }, { passive: true });
   addEventListener("pointercancel", () => S("release"), { passive: true });
   let swipe = null;
@@ -915,7 +918,7 @@ if (scene) {
     const t = e.touches[0];
     if (!t || !swipe) return;
     if (swipe.side === null && Math.hypot(t.clientX - swipe.x, t.clientY - swipe.y) > 8) swipe.side = Math.abs(t.clientX - swipe.x) > Math.abs(t.clientY - swipe.y);
-    if (swipe.side) S("pointer", t.clientX, t.clientY, "touch");
+    if (swipe.side && landed) S("pointer", t.clientX, t.clientY, "touch");
   }, { passive: true });
   addEventListener("touchend", () => { swipe = null; S("release"); }, { passive: true });
   addEventListener("touchcancel", () => { swipe = null; S("release"); }, { passive: true });
@@ -923,11 +926,11 @@ if (scene) {
   addEventListener("blur", () => S("release"));
 
   /* A click or tap on the landscape, not on the page, drops something there.
-     A click that only closes a popup or a menu doesn't, nor one that wakes the opening up. */
+     A click that only closes a popup or a menu doesn't, nor one that ends the opening. */
   let overlay = false;
   document.addEventListener("click", () => { overlay = Boolean(openId || adding || !ctx.hidden || reviewing); }, true);
   document.addEventListener("click", e => {
-    if (overlay || editing || e.detail === 0 || !landed) return;
+    if (overlay || editing || e.detail === 0 || !landed || performance.now() < quietUntil) return;
     if (e.target.closest("a, button, input, label, pre, .note, .dock, .site-foot, [role='dialog']")) return;
     if (String(getSelection?.() || "")) return;
     S("tap", e.clientX, e.clientY);
@@ -974,17 +977,17 @@ function onBar(event, key, info = {}) {
   }
 }
 
-/* The opening: a title card over the whole drawing with the bar big in the middle of it, at night. Everything
-   sleeps and nothing moves until the visitor does: then the lighthouse wakes up, the day comes, and its light reads
-   the title; the bar stretches up into its place at the top, the card drifts away, the notes come in, and the
-   lighthouse sweeps its light along the bar. Once a session, opening at the top, with motion allowed (the class and
-   the night come from the page's head; ?intro plays it again). A scroll or a key ends it at once, and so does a
-   click or a tap once it's awake. */
-let landed = !root.classList.contains("intro"), woken = landed, wokeAt = 0, sweptUntil = 0, runTimer = 0, landTimer = 0;
+/* The opening: a title card over the whole drawing with the bar big in the middle of it. It starts at night, the
+   lighthouse asleep and the drawing still. After a moment the lighthouse wakes up, the day comes, and its light
+   reads the title; then the bar stretches up into its place at the top, the card drifts away, the notes come in,
+   and the lighthouse sweeps its light along the bar. The pointer leaves the drawing alone until it's over. Once a
+   session, opening at the top, with motion allowed (the class and the night come from the page's head; ?intro plays
+   it again); a scroll, a key, a click or a tap ends it at once. */
+let landed = !root.classList.contains("intro"), woken = landed, sweptUntil = 0, quietUntil = 0, runTimer = 0, landTimer = 0;
 const swept = new Map();
 const opening = document.getElementById("opening"), snore = opening.querySelector(".op-z");
-const WAKE_ON = ["pointermove", "pointerdown", "touchstart"];
 const LAND_SKIP = ["wheel", "keydown", "pointerdown", "touchstart", "scroll"];
+const DAWN = 1.8; // seconds from night to day
 // it wakes into the day, or into the night when that's the visitor's choice on the night switch
 const dayMode = () => localStorage.getItem("mode") === "dark" ? "dark" : "light";
 function land(skip) {
@@ -992,8 +995,8 @@ function land(skip) {
   landed = true;
   clearTimeout(runTimer);
   clearTimeout(landTimer);
-  for (const type of WAKE_ON) removeEventListener(type, stirs, true);
   for (const type of LAND_SKIP) removeEventListener(type, skipLanding, true);
+  removeEventListener("visibilitychange", skipHidden);
   if (!woken) { woken = true; setMode(dayMode()); }
   if (skip) { root.classList.add("intro-skip"); S("stopSweep"); }
   S("freeze", false);
@@ -1008,33 +1011,24 @@ function land(skip) {
   if (skip) requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove("intro-skip")));
   else if (S("sweepBar", 1.1)) sweptUntil = performance.now() + 1800;
 }
-// a click or a tap wakes it up, and only ends the opening once it's awake (not the one that woke it)
+// (a click or a tap that ends it doesn't also drop something on the landscape)
 function skipLanding(e) {
-  if ((e.type === "pointerdown" || e.type === "touchstart") && (!woken || performance.now() - wokeAt < 400)) return;
+  if (e.type === "pointerdown" || e.type === "touchstart") quietUntil = performance.now() + 1000;
   land(true);
 }
-/* Waking up: the first move of a mouse or a pen (one that really moves: a browser may report a still pointer as the
-   page appears under it), or the first click or tap */
-let stirred = 0, stirAt = null;
-function stirs(e) {
-  if (e.type === "pointermove" && e.pointerType !== "touch") {
-    if (stirAt) stirred += Math.hypot(e.clientX - stirAt[0], e.clientY - stirAt[1]);
-    stirAt = [e.clientX, e.clientY];
-    if (stirred < 6) return;
-  }
-  wakeUp();
-}
+// nobody watching: it ends rather than play on unseen
+function skipHidden() { if (document.hidden) land(true); }
+// waking up: the eye opens, the z's go, the day comes over a couple of seconds, and the light reads the title
 function wakeUp() {
   if (woken || landed) return;
+  if (document.hidden) return land(true);
   woken = true;
-  wokeAt = performance.now();
-  for (const type of WAKE_ON) removeEventListener(type, stirs, true);
   snore.classList.add("gone");
-  setMode(dayMode());
+  setMode(dayMode(), DAWN);
   S("freeze", false);
   readTitle();
-  runTimer = setTimeout(expandOpening, 1900);
-  landTimer = setTimeout(() => land(false), 1900 + 1250);
+  runTimer = setTimeout(expandOpening, 2000);
+  landTimer = setTimeout(() => land(false), 2000 + 1300); // once the bar and the notes have come in
 }
 // the sleeper's z's, by its lamp wherever the drawing has put it
 let snoreAt = "";
@@ -1045,8 +1039,8 @@ function placeSnore(s) {
   snore.style.cssText = `left: ${p.x + p.r * 2}px; top: ${p.y - p.r * 0.4 - size / 2}px; --zs: ${size}px`;
 }
 /* The card's bar stretches into the real one: a copy of it leaves the card and grows to the window's width as it
-   rises to the top, shrinking to the real bar's height, its widgets sliding apart as it widens; the real bar fades
-   in under it, the copy fades away and the notes come in */
+   rises to the top, shrinking to the real bar's height, its widgets sliding apart as it widens. The notes come in
+   while it rises, once the title has gone; at the top the real bar fades in under it and the copy fades away */
 function expandOpening() {
   if (landed) return;
   const pill = opening.querySelector(".op-bar"), a = pill.getBoundingClientRect(), b = bar.getBoundingClientRect(), k = b.height / a.height;
@@ -1059,11 +1053,11 @@ function expandOpening() {
     { left: `${b.left}px`, top: `${b.top}px`, width: `${b.width / k}px`, transform: `scale(${k})`, borderRadius: "0px" },
   ], { duration: 720, easing: "cubic-bezier(.6, 0, .2, 1)", fill: "forwards" });
   for (const el of opening.querySelectorAll(".op-mark, .op-line")) el.animate([{ opacity: 1, transform: "none" }, { opacity: 0, transform: "translateY(-28px)" }], { duration: 460, easing: "ease-in", fill: "forwards" });
+  setTimeout(() => { if (!landed) root.classList.add("op-page-in"); }, 480);
   grow.finished.then(() => {
     if (landed) return;
     root.classList.add("op-bar-in");
     fly.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 340, fill: "forwards" });
-    setTimeout(() => { if (!landed) root.classList.add("op-page-in"); }, 120);
   }, () => {});
 }
 /* The light reads the title: a glowing copy of it sits behind the letters, one element per letter, and each letter
@@ -1108,10 +1102,11 @@ if (!landed) {
   if (scrollY > 0 || document.hidden) land(true);
   else {
     for (const type of LAND_SKIP) addEventListener(type, skipLanding, { capture: true, passive: true });
-    for (const type of WAKE_ON) addEventListener(type, stirs, { capture: true, passive: true });
+    addEventListener("visibilitychange", skipHidden);
     S("labels", false);
     S("doze", true); // asleep, its eye shut and its lamp out,
-    S("freeze", true); // and the whole drawing still, until the visitor moves
+    S("freeze", true); // and the whole drawing still,
+    runTimer = setTimeout(wakeUp, 1200); // for a moment
   }
 } else opening.remove();
 
diff --git a/site/scene.js b/site/scene.js
index a5469004..2c9865cf 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -220,7 +220,7 @@ class Scene {
     host.appendChild(cv);
     this.ctx = cv.getContext('2d');
     this.top = Math.max(0, +this.o.topInset || 0);
-    this.t = 0; this.d = this.dTarget = clamp(+this.o.dusk || 0);
+    this.t = 0; this.d = this.dTarget = clamp(+this.o.dusk || 0); this.dTween = null; this.labelsAt = -9;
     this.state = 'hero'; this.theme = 'built-in'; this.ws = 1;
     this.pres = Object.fromEntries(STATES.map(k => [k, k === 'hero' ? 1 : 0]));
     this.since = Object.fromEntries(STATES.map(k => [k, 0]));
@@ -265,7 +265,13 @@ class Scene {
   }
 
   /* ----- page state ----- */
-  setDusk(d) { this.dTarget = clamp(+d || 0); if (this.reduced) this.d = this.dTarget; this.wake(); }
+  // with a duration (the opening's sunrise), an even change over that time instead of the usual quick ease
+  setDusk(d, dur = 0) {
+    d = clamp(+d || 0);
+    if (dur > 0 && !this.reduced) this.dTween = { from: this.d, t0: this.t, dur };
+    else if (d !== this.dTarget) this.dTween = null;
+    this.dTarget = d; if (this.reduced) this.d = d; this.wake();
+  }
   setState(name) {
     if (!STATES.includes(name)) return;
     if (name !== this.state) {
@@ -407,7 +413,9 @@ class Scene {
   // where the lamp is in the window, and the eye's size: the page puts the z's there
   lampAt() { const L = this.g.lamp; return { x: this.ox + L.x, y: this.oy + L.y, r: this.g.lh.er }; }
   // the drawing's own labels ("a lighthouse (stable)" and the others), off while the page's title card is up
-  labels(on) { this.noLabels = !on; this.wake(); }
+  labels(on) { if (on && this.noLabels) this.labelsAt = this.t; this.noLabels = !on; this.wake(); }
+  // how far the labels have come back in (they fade in)
+  labelsK() { return this.noLabels ? 0 : this.reduced ? 1 : smooth(0, 0.6, this.t - this.labelsAt); }
   // the landing's last beat: the light swings to the bar's left end and sweeps along it to the right, once
   sweepBar(dur = 1) {
     const L = this.g.lamp, ts = this.bar;
@@ -953,7 +961,7 @@ class Scene {
     // reduced motion and nothing moving: the scene sleeps until the next call or input
   }
   busy() {
-    if (this.sweep || this.t - this.wokeAt < 0.7) return true;
+    if (this.sweep || this.t - this.wokeAt < 0.7 || this.t - this.labelsAt < 0.6) return true;
     if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
     if (this.ripples.length) return true;
@@ -986,7 +994,9 @@ class Scene {
     }
     // the install state brings the night with it
     const dTarget = this.dEff = Math.max(this.dTarget, this.pres.install > 0 ? lerp(this.dTarget, 1, this.pres.install) : 0);
-    this.d = rm ? dTarget : this.d + (dTarget - this.d) * Math.min(1, dt * 2.4);
+    const tw = this.dTween;
+    if (tw && !rm) { const k = smooth(0, 1, (this.t - tw.t0) / tw.dur); this.d = lerp(tw.from, dTarget, k); if (k >= 1) this.dTween = null; }
+    else this.d = rm ? dTarget : this.d + (dTarget - this.d) * Math.min(1, dt * 2.4);
     if (Math.abs(dTarget - this.d) < 0.0005) this.d = dTarget;
     this.boil = rm ? 0 : Math.floor(this.t * BOIL_FPS) % 3;
     this.vel.x *= Math.exp(-dt * 2.5); this.vel.y *= Math.exp(-dt * 2.5);
@@ -1511,7 +1521,8 @@ function drawScene(s, c) {
   for (const [, it] of items) it === s.box ? drawBox(s, c) : it.blades ? drawMeadow(s, c, it) : drawObj(s, c, it);
   // the section's little scenes over them: animals pass behind the desk, the huts and the keeper
   drawStates(s, c);
-  if (s.pres.hero > 0.01 && !s.noLabels) drawLabels(s, c);
+  const lk = s.labelsK();
+  if (s.pres.hero > 0.01 && lk > 0.01) { c.globalAlpha = lk; drawLabels(s, c); c.globalAlpha = 1; }
   drawSplashes(s, c);
   drawBall(s, c);
   drawDoodles(s, c);
diff --git a/site/style.css b/site/style.css
index f2432eaa..07fff4bd 100644
--- a/site/style.css
+++ b/site/style.css
@@ -132,11 +132,18 @@ h1, h2, h3 { text-wrap: balance; }
 .op-app { gap: 15px !important; }
 .op-app b { font-weight: 700; }
 .op-gap { flex: 1; }
-.op-sun .on, [data-mode="dark"] .op-sun .off { display: none; }
-[data-mode="dark"] .op-sun .on { display: block; }
+/* the card's sun and moon, one over the other: they cross over halfway through the sunrise */
+.op-sun { position: relative; }
+.op-sun svg { transition: opacity .5s .65s; }
+.op-sun .on { position: absolute; left: 13px; opacity: 0; }
+[data-mode="dark"] .op-sun .on { opacity: 1; }
+[data-mode="dark"] .op-sun .off { opacity: 0; }
 .op-line { font: 600 clamp(18px, 1.7vw, 23px)/1.3 var(--hand); color: var(--pen); text-shadow: 0 0 14px var(--halo), 0 0 4px var(--halo); }
-/* the day comes: the card's bar and line change with the sky */
-.opening .op-bar, .opening .w, .op-line { transition: background-color 1s, color 1s, box-shadow 1s, text-shadow 1s; }
+/* the day comes: the card's bar and line change with the sky; their words turn from light to dark quickly, halfway,
+   where either reads (fading slowly, they would go grey on grey) */
+.opening .op-bar, .opening .w, .op-line {
+  transition: background-color 1.8s ease-in-out, box-shadow 1.8s ease-in-out, text-shadow 1.8s ease-in-out, color .16s .82s;
+}
 /* asleep: z's rising beside the lighthouse's hat (the page puts them by its lamp) */
 .op-z { position: fixed; left: -99px; top: -99px; font: 400 var(--zs, 16px)/1 var(--hand); color: #f2eeff; transition: opacity .3s; }
 .op-z i { position: absolute; left: 0; top: 0; font-style: normal; opacity: 0; animation: op-z 1.5s linear infinite; }

From 0c71b4cf35ba473cab9d4e836c1b0e93ba946ca2 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 14:26:52 +0100
Subject: [PATCH 16/46] docs: wake the website's lighthouse slowly

The lighthouse's eye now opens over a second instead of snapping open, its light comes on as
the eye opens, and it turns gently toward the title before reading it. Each sweep of the light
starts from exactly where it points, so it never jumps, and the sweep along the bar after the
opening is slower. Its first blink waits until it has read the title.

The click that ends the opening is the only one that doesn't drop anything: the next click
works at once.
---
 site/main.js  | 26 +++++++++++++-------------
 site/scene.js | 21 ++++++++++++---------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/site/main.js b/site/main.js
index 71738ee1..c021023d 100644
--- a/site/main.js
+++ b/site/main.js
@@ -927,10 +927,11 @@ if (scene) {
 
   /* A click or tap on the landscape, not on the page, drops something there.
      A click that only closes a popup or a menu doesn't, nor one that ends the opening. */
-  let overlay = false;
+  let overlay = false, pressedInOpening = false;
+  addEventListener("pointerdown", () => { pressedInOpening = !landed; }, true);
   document.addEventListener("click", () => { overlay = Boolean(openId || adding || !ctx.hidden || reviewing); }, true);
   document.addEventListener("click", e => {
-    if (overlay || editing || e.detail === 0 || !landed || performance.now() < quietUntil) return;
+    if (overlay || editing || e.detail === 0 || !landed || pressedInOpening) return;
     if (e.target.closest("a, button, input, label, pre, .note, .dock, .site-foot, [role='dialog']")) return;
     if (String(getSelection?.() || "")) return;
     S("tap", e.clientX, e.clientY);
@@ -983,7 +984,7 @@ function onBar(event, key, info = {}) {
    and the lighthouse sweeps its light along the bar. The pointer leaves the drawing alone until it's over. Once a
    session, opening at the top, with motion allowed (the class and the night come from the page's head; ?intro plays
    it again); a scroll, a key, a click or a tap ends it at once. */
-let landed = !root.classList.contains("intro"), woken = landed, sweptUntil = 0, quietUntil = 0, runTimer = 0, landTimer = 0;
+let landed = !root.classList.contains("intro"), woken = landed, sweptUntil = 0, runTimer = 0, landTimer = 0;
 const swept = new Map();
 const opening = document.getElementById("opening"), snore = opening.querySelector(".op-z");
 const LAND_SKIP = ["wheel", "keydown", "pointerdown", "touchstart", "scroll"];
@@ -1009,13 +1010,10 @@ function land(skip) {
   sendBar(); // the bar's widgets where they stand, for the sweep and the ball game
   S("labels", true);
   if (skip) requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove("intro-skip")));
-  else if (S("sweepBar", 1.1)) sweptUntil = performance.now() + 1800;
-}
-// (a click or a tap that ends it doesn't also drop something on the landscape)
-function skipLanding(e) {
-  if (e.type === "pointerdown" || e.type === "touchstart") quietUntil = performance.now() + 1000;
-  land(true);
+  else if (S("sweepBar", 1.6)) sweptUntil = performance.now() + 2800;
 }
+// (a click or a tap that ends it doesn't also drop something on the landscape: see pressedInOpening)
+function skipLanding() { land(true); }
 // nobody watching: it ends rather than play on unseen
 function skipHidden() { if (document.hidden) land(true); }
 // waking up: the eye opens, the z's go, the day comes over a couple of seconds, and the light reads the title
@@ -1027,8 +1025,8 @@ function wakeUp() {
   setMode(dayMode(), DAWN);
   S("freeze", false);
   readTitle();
-  runTimer = setTimeout(expandOpening, 2000);
-  landTimer = setTimeout(() => land(false), 2000 + 1300); // once the bar and the notes have come in
+  runTimer = setTimeout(expandOpening, 2300);
+  landTimer = setTimeout(() => land(false), 2300 + 1300); // once the bar and the notes have come in
 }
 // the sleeper's z's, by its lamp wherever the drawing has put it
 let snoreAt = "";
@@ -1078,8 +1076,10 @@ function readTitle() {
   S("doze", false); // the lighthouse wakes up: its eye opens and its light comes on
   const letters = [...glow.querySelectorAll("i")].map(el => { const r = el.getBoundingClientRect(); return { el, x: r.left + r.width / 2, y: r.top + r.height / 2 }; });
   const ys = letters.map(l => l.y), first = letters[0], last = letters.at(-1);
-  if (!S("sweepAlong", first.x - 10, (Math.min(...ys) + Math.max(...ys)) / 2, last.x + 10, (Math.min(...ys) + Math.max(...ys)) / 2, 1.1)) return;
-  reading = { letters, until: performance.now() + 1900 };
+  const y = (Math.min(...ys) + Math.max(...ys)) / 2;
+  // it turns to the first letter while its eye opens, then reads across
+  if (!S("sweepAlong", first.x - 10, y, last.x + 10, y, 1.1, 0.8)) return;
+  reading = { letters, until: performance.now() + 2100 };
 }
 function readGlow(s) {
   if (!reading) return;
diff --git a/site/scene.js b/site/scene.js
index 2c9865cf..5755d4ff 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -388,10 +388,12 @@ class Scene {
   // the landing: until the camera has come down, the flock and the grass wait (they're placed where they're seen)
   hold(on) { this.held = !!on; if (!on) this.measure(); this.wake(); }
   // the opening: the light swings to one point and sweeps along to another, once (viewport coordinates)
-  sweepAlong(x0, y0, x1, y1, dur = 1) {
+  sweepAlong(x0, y0, x1, y1, dur = 1, lead = 0.35) {
     if (this.reduced || document.hidden) return false;
-    const L = this.g.lamp;
-    this.sweep = { t0: this.t, lead: 0.35, dur, tail: 0.3, a0: Math.atan2(y0 - this.oy - L.y, x0 - this.ox - L.x), a1: Math.atan2(y1 - this.oy - L.y, x1 - this.ox - L.x) };
+    const L = this.g.lamp, b = this.beam;
+    // it starts from exactly where the light points, steered from there on
+    b.sa = b.a; b.steer = 1;
+    this.sweep = { t0: this.t, lead, dur, tail: 0.3, from: b.a, a0: Math.atan2(y0 - this.oy - L.y, x0 - this.ox - L.x), a1: Math.atan2(y1 - this.oy - L.y, x1 - this.ox - L.x) };
     this.wake();
     return true;
   }
@@ -401,12 +403,12 @@ class Scene {
     if (on) this.dozing = true;
     else if (this.dozing) {
       this.dozing = false; this.wokeAt = this.t;
-      this.blink.next = this.t + 0.6;
+      this.blink.next = this.t + 2.6; // a first blink once it's done reading
     }
     this.wake();
   }
-  // 1 while asleep, easing to 0 as the eye opens; the light comes on once the eye is half open
-  drowsy() { return this.dozing ? 1 : 1 - smooth(0, 0.4, this.t - this.wokeAt); }
+  // 1 while asleep, easing to 0 as the eye slowly opens; the light comes on once the eye is half open
+  drowsy() { return this.dozing ? 1 : 1 - smooth(0, 1.1, this.t - this.wokeAt); }
   lampOn() { return 1 - smooth(0, 0.6, this.drowsy()); }
   // the opening's still night: nothing moves until the visitor does (the page draws the sleeper's z's)
   freeze(on) { this.frozen = !!on; if (!on) this.last = null; this.wake(); }
@@ -421,7 +423,8 @@ class Scene {
     const L = this.g.lamp, ts = this.bar;
     if (this.reduced || !ts.length || document.hidden) return false;
     const y = Math.min(...ts.map(t => t.y)) - 12 * this.g.u, x0 = Math.min(...ts.map(t => (t.x0 + t.x1) / 2)), x1 = Math.max(...ts.map(t => (t.x0 + t.x1) / 2));
-    this.sweep = { t0: this.t, lead: 0.3, dur, tail: 0.25, a0: Math.atan2(y - L.y, x0 - L.x), a1: Math.atan2(y - L.y, x1 - L.x) };
+    this.beam.sa = this.beam.a; this.beam.steer = 1;
+    this.sweep = { t0: this.t, lead: 0.85, dur, tail: 0.25, from: this.beam.a, a0: Math.atan2(y - L.y, x0 - L.x), a1: Math.atan2(y - L.y, x1 - L.x) };
     this.wake();
     return true;
   }
@@ -617,7 +620,7 @@ class Scene {
     const w = this.sweep;
     if (w) {
       const a = this.t - w.t0;
-      if (a < w.lead + w.dur + w.tail) return a < w.lead ? w.a0 : w.a0 + angDiff(w.a1, w.a0) * smooth(0, 1, (a - w.lead) / w.dur);
+      if (a < w.lead + w.dur + w.tail) return a < w.lead ? w.from + angDiff(w.a0, w.from) * smooth(0, 1, a / w.lead) : w.a0 + angDiff(w.a1, w.a0) * smooth(0, 1, (a - w.lead) / w.dur);
       this.sweep = null;
     }
     const b = this.bore;
@@ -961,7 +964,7 @@ class Scene {
     // reduced motion and nothing moving: the scene sleeps until the next call or input
   }
   busy() {
-    if (this.sweep || this.t - this.wokeAt < 0.7 || this.t - this.labelsAt < 0.6) return true;
+    if (this.sweep || this.t - this.wokeAt < 1.2 || this.t - this.labelsAt < 0.6) return true;
     if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
     if (this.ripples.length) return true;

From da02031f375e85e34cea204d99a7eede71b4c193 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 14:26:59 +0100
Subject: [PATCH 17/46] docs: let the website's sheep out of its box

Knocking on the sheep's box makes it hop higher and say baa louder each time, and the fifth
knock in a row lets the sheep out: once the box is back on the ground its flaps burst open, the
sheep jumps out onto the grass beside it and joins the others, and the label becomes "a box
(empty)". Knocking on the empty box calls the sheep home: it trots back, ignoring the pointer,
and hops in, and the flaps close over it. Without motion it simply appears beside the box, and
is simply back.

A knock while the box is still in the air no longer drops it to the ground, and each new baa
replaces the one before instead of piling up on it.
---
 site/scene.js | 174 ++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 148 insertions(+), 26 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index 5755d4ff..c9cadc54 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -243,7 +243,7 @@ class Scene {
     this.flocked = false; this.meadow = []; this.sproutAt = 0;
     this.held = !!this.o.held; this.sweep = null;
     this.dozing = false; this.wokeAt = -9; this.frozen = false;
-    this.box = { v: null, gx: null, gy: null, side: null, lastSide: null, la: 0, seenAt: -9, hop: -9, wob: -9, nextWob: 0, peek: -9, lit: 0, open: false, openAt: -9, blinkAt: -9, nextBlink: 0 };
+    this.box = { v: null, gx: null, gy: null, side: null, lastSide: null, la: 0, seenAt: -9, hop: -9, wob: -9, nextWob: 0, peek: -9, lit: 0, open: false, openAt: -9, blinkAt: -9, nextBlink: 0, knocks: 0, knockAt: -9, hopK: 1, out: null, burst: 0, lid: 0, sheep: null };
     this.times = [];
     this.awake = 0; this.kick = 0; this.raf = 0; this.timer = 0; this.last = null;
     this.mq = matchMedia('(prefers-reduced-motion: reduce)');
@@ -917,6 +917,7 @@ class Scene {
   // reduced motion switched on: whatever is moving stops where it is
   still() {
     for (const o of this.objs) {
+      if (o.state === 'leap') this.endLeap(o);
       if (o.state === 'fly') { o.state = 'hover'; o.vx = o.vy = 0; }
       else if (o.state === 'fall') { o.y = o.ty; o.vy = 0; o.state = o.ride ? 'ride' : o.kind === 'duck' ? 'float' : 'land'; }
       o.land = -9;
@@ -965,12 +966,13 @@ class Scene {
   }
   busy() {
     if (this.sweep || this.t - this.wokeAt < 1.2 || this.t - this.labelsAt < 0.6) return true;
+    if (Math.abs(this.box.lid - (this.boxEmpty() ? 1 : 0)) > 0.01) return true;
     if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
     if (this.ripples.length) return true;
     // (the grazing and its "nom"s are slow: they carry on at the idle rate)
     if (this.ball || this.bore || this.doodles.some(d => !d.calm) || this.splashes.length || this.t - this.hatKick < 0.7 || this.t - this.regrowAt < 0.9 || this.t - this.box.hop < 0.8 || this.t - this.box.wob < 0.5) return true;
-    for (const o of this.objs) if (o.state === 'fall' || (o.state === 'fly' && !this.reduced) || o.dying != null || (o.land > 0 && this.t - o.land < 0.4)) return true;
+    for (const o of this.objs) if (o.state === 'fall' || o.state === 'leap' || (o.state === 'fly' && !this.reduced) || o.dying != null || (o.land > 0 && this.t - o.land < 0.4)) return true;
     return this.beam.steer > 0.01 && this.beam.steer < 0.99 && !this.reduced;
   }
   frame(now) {
@@ -1066,7 +1068,13 @@ class Scene {
         if (o.dying != null && (rm || this.t - o.dying > 0.7)) o.dead = true;
         continue;
       }
-      if (o.state === 'fall') {
+      if (o.state === 'leap') {
+        // out of the box onto the grass, or back in: a hop along an arc (out, it rises before it goes sideways)
+        const L = o.leap, f = clamp((this.t - L.t0) / L.dur);
+        o.x = lerp(L.x0, L.x1, L.in ? smooth(0, 0.85, f) : smooth(0.15, 1, f));
+        o.y = lerp(L.y0, L.y1, f) - 4 * L.h * f * (1 - f);
+        if (f >= 1) this.endLeap(o);
+      } else if (o.state === 'fall') {
         o.vy += G * dt; o.y += o.vy * dt;
         if (o.y >= o.ty) {
           o.y = o.ty; o.vy = 0; o.land = this.t;
@@ -1224,7 +1232,7 @@ class Scene {
     if (o.act == null) { o.act = 'idle'; o.until = t + 0.5 + R() * 2.5; o.hungry ??= t + 3 + R() * 10; o.head = 0; o.vd = 0; o.bites = 0; }
     o.vd ??= 0;
     const dx = o.x - this.ptr.x, dy = o.y - this.ptr.y;
-    const scared = this.ptr.on && !cow && o.dying == null && dx * dx + dy * dy < (110 * u) ** 2;
+    const scared = this.ptr.on && !cow && o.dying == null && o.act !== 'home' && dx * dx + dy * dy < (110 * u) ** 2;
     let wx = 0, wd = 0, head = 0;
     if (scared) {
       this.letGo(o);
@@ -1233,12 +1241,19 @@ class Scene {
     } else {
       if ((o.act === 'flee' || o.act === 'happy') && t > o.until) { o.act = 'idle'; o.until = t + 1.5 + R() * 3.5; }
       if (o.act === 'idle' && t > o.until) this.decide(o);
-      if (o.act === 'walk' || o.act === 'go') {
+      if (o.act === 'home') {
+        // called home: to the box's side, then a hop in (from wherever it got to, if that takes too long)
+        const h = this.homeSpot(o);
+        if (!h || t > o.until) return this.hopIn(o);
+        o.tx = h.x; o.td = h.d;
+      }
+      if (o.act === 'walk' || o.act === 'go' || o.act === 'home') {
         const ex = o.tx - o.x, ed = o.td - o.depth, dist = Math.hypot(ex, ed);
+        if (o.act === 'home' && dist < 3 * u) return this.hopIn(o);
         if (o.act === 'go' && dist < 2.5 * u && o.tuft) { o.act = 'eat'; o.bite = t + 0.8; o.flip = o.tuft.x < o.x; }
-        else if (dist < 2.5 * u || t > o.until || (o.act === 'go' && !o.tuft)) { this.letGo(o); o.act = 'idle'; o.until = t + 2 + R() * 4; }
+        else if (o.act !== 'home' && (dist < 2.5 * u || t > o.until || (o.act === 'go' && !o.tuft))) { this.letGo(o); o.act = 'idle'; o.until = t + 2 + R() * 4; }
         else {
-          const v = (o.act === 'go' ? 19 : 13) * u * (cow ? 0.65 : 1) * Math.min(1, dist / (6 * u));
+          const v = (o.act === 'home' ? 30 : o.act === 'go' ? 19 : 13) * u * (cow ? 0.65 : 1) * Math.min(1, dist / (6 * u));
           wx = ex / dist * v; wd = ed / dist * v;
         }
       }
@@ -1325,8 +1340,10 @@ class Scene {
   /* ----- the sheep in a box -----
      A cardboard box with three air holes sits on the grass where it's seen, clear of the lighthouse, the cottage,
      the little scenes and the animals. Now and then the sheep inside shifts and the box wobbles. When the light
-     finds it, two eyes look out through the holes (glinting at night); a click or a tap makes it hop and say baa.
-     It isn't a surprise: clicking it drops nothing. Its label shows in the first screen while it's in view. */
+     finds it, two eyes look out through the holes (glinting at night); a click or a tap makes it hop and say baa,
+     louder each time, and the fifth in a row lets the sheep out: the flaps burst open, it jumps onto the grass and
+     joins the others, and the box is empty. Knocking on the empty box calls the sheep home: it trots back and hops
+     in. It isn't a surprise: clicking it drops nothing. Its label shows in the first screen while it's in view. */
   placeBox() {
     const g = this.g, u = g.u, W = g.W, b = this.box, T = g.lh, ck = g.cot;
     b.v = `${this.layoutV}|${this.fontsV}`;
@@ -1362,9 +1379,11 @@ class Scene {
     const w = t - b.wob;
     if (!rm && w >= 0 && w < 0.5) rot = Math.sin(w / 0.5 * Math.PI * 3) * 0.05 * (1 - w / 0.5);
     const a = still ? -1 : t - b.hop;
+    const pa = t - b.burst;
+    if (!rm && b.out != null && pa >= 0 && pa < 0.25) sq += Math.sin(pa / 0.25 * Math.PI) * 0.12;
     if (!rm && a >= 0 && a < 0.75) {
       if (a < 0.08) sq = Math.sin(a / 0.08 * Math.PI) * 0.1;
-      else if (a < 0.52) { const f = (a - 0.08) / 0.44; y -= Math.sin(f * Math.PI) * 18 * k; rot -= Math.sin(f * Math.PI) * 0.14; }
+      else if (a < 0.52) { const f = (a - 0.08) / 0.44; y -= Math.sin(f * Math.PI) * 18 * k * b.hopK; rot -= Math.sin(f * Math.PI) * 0.14 * b.hopK; }
       else sq = Math.sin((a - 0.52) / 0.23 * Math.PI) * 0.14;
     }
     return { x: b.gx, y, rot, sq, k };
@@ -1374,13 +1393,91 @@ class Scene {
     const p = this.boxAt(), k = p.k, pad = this.ptr.kind === 'touch' ? 14 : 7;
     return x > p.x - BOX.hw * k - pad && x < p.x + (BOX.hw + BOX.dx) * k + pad && y > p.y + (BOX.dy - BOX.hh) * k - pad && y < p.y + BOX.hh * k + pad;
   }
-  // a click or a tap: it hops (not without motion) and says so
+  // a click or a tap: it hops (not without motion) and says so, higher and louder with each knock in a row
   baa() {
-    const b = this.box, p = this.boxAt(), k = p.k;
-    if (!this.reduced) b.hop = this.t;
+    const b = this.box;
+    if (b.out != null) return this.callHome();
+    b.knocks = this.t - b.knockAt < 2.5 ? b.knocks + 1 : 1;
+    b.knockAt = this.t;
+    if (b.knocks >= 5) return this.letOut();
+    // it hops, unless it's still in the air from the knock before (a new hop there would drop it to the ground)
+    if (!this.reduced && !this.boxUp()) { b.hop = this.t; b.hopK = 1 + 0.2 * (b.knocks - 1); }
     b.peek = this.t;
-    // beside it, toward the lighthouse, where the hop doesn't cover it
-    this.doodle('baa', p.x + (BOX.hw + BOX.dx + 6) * k, p.y + (BOX.dy - BOX.hh + 1) * k, { text: 'baa!', align: 'left', life: 1.4 });
+    this.boxSays(['baa!', 'baa!', 'baa!!', 'BAA!!'][b.knocks - 1]);
+  }
+  // in the air from a hop: how long until it lands, or 0
+  boxUp() { const a = this.t - this.box.hop; return a >= 0 && a < 0.55 ? 0.55 - a : 0; }
+  // beside it, toward the lighthouse, where the hop doesn't cover it; the newest word replaces the one before
+  boxSays(text) {
+    const p = this.boxAt(), k = p.k;
+    this.doodles = this.doodles.filter(d => d.kind !== 'baa');
+    this.doodle('baa', p.x + (BOX.hw + BOX.dx + 6) * k, p.y + (BOX.dy - BOX.hh + 1) * k, { text, align: 'left', life: 1.4 });
+  }
+  // the sheep is out of the box (or on its way out once the box has landed)
+  boxEmpty() { return this.box.out != null && this.t >= this.box.burst; }
+  // the fifth knock: once the box is on the ground, the flaps burst open and the sheep jumps out onto the grass a
+  // short hop away
+  letOut() {
+    const b = this.box, g = this.g, u = g.u, p = this.boxAt(true), k = p.k, wait = this.reduced ? 0 : this.boxUp();
+    b.out = this.t; b.burst = this.t + wait; b.knocks = 0; b.peek = -9; b.wob = -9;
+    b.tw = textW(this, 'a box (empty)', b.size);
+    // it lands beside the box, in the same row, on whichever side has grass (the pasture's first)
+    const mid = p.x + BOX.dx * k * 0.5, reach = (BOX.hw + 34) * k;
+    let spot = null;
+    for (const dir of [1, -1]) for (const far of [1, 1.4, 0.8]) {
+      const x = mid + dir * reach * far;
+      if (!spot && x > 30 * u && x < g.W - 30 * u && this.ridgeY(x) != null && this.isLand(x, b.gy) && this.open(x, b.gy)) spot = { x, y: b.gy };
+    }
+    spot ||= { x: clamp(mid + reach, 30 * u, g.W - 30 * u), y: b.gy };
+    const o = this.spawn(spot.x, spot.y, 'sheep', true);
+    b.sheep = o;
+    if (!this.reduced) {
+      // from all the way down inside (the box is smaller than its sheep), up over the rim and down beside it
+      const x0 = p.x + BOX.dx * k * 0.5;
+      o.leap = { x0, y0: b.gy - 2 * BOX.hh * k + 30 * u * o.sc, x1: o.x, y1: o.ty, t0: b.burst, dur: 0.85, h: 58 * k };
+      o.state = 'leap'; o.flip = o.x < x0; o.x = x0; o.y = o.leap.y0;
+    }
+    this.boxSays('baa!');
+    this.wake();
+  }
+  // the empty box knocked on: its sheep comes home (or, gone from the hill, is simply back)
+  callHome() {
+    const b = this.box, o = b.sheep, u = this.g.u;
+    if (!o || o.dead || o.dying != null || !this.objs.includes(o)) return this.closeBox();
+    // without motion nobody walks: it's simply back in
+    if (this.reduced) { this.letGo(o); o.dead = true; this.objs = this.objs.filter(q => q !== o); return this.closeBox(); }
+    if (o.state === 'leap' || o.act === 'home') return;
+    this.letGo(o);
+    o.act = 'home'; o.until = this.t + 9;
+    this.doodle('baa', o.x + 14 * u * o.sc, o.y - 34 * u * o.sc, { text: 'baa?', align: 'left', life: 1.2 });
+    this.wake();
+  }
+  // where it goes to hop in: beside the box, on the side it comes from
+  homeSpot(o) {
+    const b = this.box, p = this.boxAt(true), k = p.k, mid = p.x + BOX.dx * k * 0.5;
+    const x = mid + (o.x < mid ? -1 : 1) * (BOX.hw + 22) * k, ry = this.ridgeY(x);
+    return ry == null || b.gx == null ? null : { x, d: b.gy - ry };
+  }
+  hopIn(o) {
+    const b = this.box, p = this.boxAt(true), k = p.k;
+    this.letGo(o);
+    if (this.reduced || b.gx == null) { o.dead = true; this.closeBox(); return; }
+    const x1 = p.x + BOX.dx * k * 0.5;
+    o.leap = { x0: o.x, y0: o.y, x1, y1: b.gy - 2 * BOX.hh * k + 30 * this.g.u * o.sc, t0: this.t, dur: 0.7, h: 52 * k, in: true };
+    o.state = 'leap'; o.act = 'idle'; o.flip = x1 < o.x; o.vx = o.vd = 0;
+  }
+  // the hop's end: on the grass, one of the flock now; or in the box, which closes over it
+  endLeap(o) {
+    const L = o.leap;
+    o.leap = null;
+    if (L.in) { o.dead = true; this.closeBox(); return; }
+    o.x = L.x1; o.y = o.ty; o.state = 'land'; o.land = this.t; o.act = null;
+  }
+  closeBox() {
+    const b = this.box;
+    b.out = null; b.sheep = null; b.peek = this.t; b.wob = this.t;
+    b.tw = textW(this, 'a sheep (in a box)', b.size);
+    this.wake();
   }
   updateBox(dt) {
     const b = this.box, rm = this.reduced, t = this.t;
@@ -1389,12 +1486,16 @@ class Scene {
     if (b.gx == null) return;
     const p = this.boxAt(), lit = this.inBeam(p.x + this.ox, p.y + this.oy);
     b.lit = rm ? lit : lerp(b.lit, lit, Math.min(1, dt * 8));
+    // the flaps: open while the sheep is out
+    const lid = this.boxEmpty() ? 1 : 0;
+    b.lid = rm ? lid : lerp(b.lid, lid, Math.min(1, dt * (lid ? 14 : 9)));
+    if (Math.abs(b.lid - lid) < 0.005) b.lid = lid;
     // the eyes come to the holes while the light is on it (and for a moment after a baa), blinking now and then
-    const want = b.lit > 0.4 || t - b.peek < 1.8;
+    const want = b.out == null && (b.lit > 0.4 || t - b.peek < 1.8);
     if (want !== b.open) { b.open = want; b.openAt = t; b.nextBlink = t + 1.4 + Math.random() * 2; }
     if (b.open && !rm && t > b.nextBlink) { b.blinkAt = t; b.nextBlink = t + 1.8 + Math.random() * 2.6; }
     // now and then the sheep inside shifts
-    if (!rm && t > b.nextWob) { b.wob = t; b.nextWob = t + 7 + Math.random() * 9; }
+    if (!rm && t > b.nextWob) { if (b.out == null) b.wob = t; b.nextWob = t + 7 + Math.random() * 9; }
     // its label, in the first screen while it's in view: looked at a few times a second, faded in and out
     if (t - b.seenAt > 0.3 || rm) { b.seenAt = t; b.side = this.pres.hero > 0.01 ? this.boxSide(this.boxAt(true)) : null; if (b.side) b.lastSide = b.side; }
     b.la = rm ? (b.side ? 1 : 0) : lerp(b.la, b.side ? 1 : 0, Math.min(1, dt * 3));
@@ -1520,8 +1621,8 @@ function drawScene(s, c) {
   drawEye(s, c);
   drawHat(s, c);
   // animals and the grass on the hill, back to front (a tuft in front of the one eating it)
-  const items = [...s.objs.map(o => [o.y, o]), ...s.meadow.map(m => [m.y + 0.5, m]), ...(s.box.gx != null ? [[s.box.gy, s.box]] : [])].sort((a, b) => a[0] - b[0]);
-  for (const [, it] of items) it === s.box ? drawBox(s, c) : it.blades ? drawMeadow(s, c, it) : drawObj(s, c, it);
+  const items = [...s.objs.map(o => [o.leap ? s.box.gy + 0.25 : o.y, o]), ...s.meadow.map(m => [m.y + 0.5, m]), ...(s.box.gx != null ? [[s.box.gy, s.box]] : [])].sort((a, b) => a[0] - b[0]);
+  for (const [, it] of items) it === s.box ? drawBox(s, c) : it.blades ? drawMeadow(s, c, it) : it.leap ? drawLeap(s, c, it) : drawObj(s, c, it);
   // the section's little scenes over them: animals pass behind the desk, the huts and the keeper
   drawStates(s, c);
   const lk = s.labelsK();
@@ -1657,11 +1758,20 @@ function drawBox(s, c) {
   const front = K([[-hw, -hh], [hw, -hh], [hw, hh], [-hw, hh]]);
   const top = K([[-hw, -hh], [-hw + dx, -hh + dy], [hw + dx, -hh + dy], [hw, -hh]]);
   const side = K([[hw, -hh], [hw + dx, -hh + dy], [hw + dx, hh + dy], [hw, hh]]);
-  print(c, side, card(C.kraftDark)); print(c, top, card(C.kraftLit)); print(c, front, card(C.kraft));
-  // tape over the seam between the flaps, front to back, folded a little way down the front
-  c.globalAlpha = 0.8;
-  print(c, K([[-3.4, -hh], [-3.4 + dx, -hh + dy], [3.4 + dx, -hh + dy], [3.4, -hh], [3.6, -hh + 6.5], [0.4, -hh + 5.8], [-3.6, -hh + 6.8]]), card(C.tape));
-  c.globalAlpha = 1;
+  // with the sheep out the flaps stand open, up from the sides, over the dark inside
+  const lid = b.lid, th = lid * 1.95, flaps = [];
+  print(c, side, card(C.kraftDark)); print(c, top, lid > 0.01 ? mix(card(C.kraftDark), P.ink, 0.4) : card(C.kraftLit)); print(c, front, card(C.kraft));
+  if (lid > 0.01) for (const sd of [-1, 1]) {
+    const hx = sd * hw, wx = -sd * hw * Math.cos(th), wy = -hw * Math.sin(th);
+    const flap = K([[hx, -hh], [hx + dx, -hh + dy], [hx + dx + wx, -hh + dy + wy], [hx + wx, -hh + wy]]);
+    print(c, flap, card(sd < 0 ? C.kraftLit : C.kraft));
+    flaps.push(flap);
+  } else {
+    // tape over the seam between the flaps, front to back, folded a little way down the front
+    c.globalAlpha = 0.8;
+    print(c, K([[-3.4, -hh], [-3.4 + dx, -hh + dy], [3.4 + dx, -hh + dy], [3.4, -hh], [3.6, -hh + 6.5], [0.4, -hh + 5.8], [-3.6, -hh + 6.8]]), card(C.tape));
+    c.globalAlpha = 1;
+  }
   // the holes, dark; eyes in two of them while the light is on the box (or just after a baa)
   let open = b.open ? (rm ? 1 : smooth(0, 0.2, t - b.openAt)) : (rm ? 0 : 1 - smooth(0, 0.14, t - b.openAt));
   if (b.open && !rm && t - b.blinkAt < 0.16) open *= Math.abs(Math.cos((t - b.blinkAt) / 0.16 * Math.PI));
@@ -1683,6 +1793,7 @@ function drawBox(s, c) {
   edges(c, K([[-hw, hh], [-hw, -hh], [-hw + dx, -hh + dy], [hw + dx, -hh + dy], [hw + dx, hh + dy], [hw, hh]]), DET * 1.05, 3, true, { ov: 1.5 });
   edges(c, K([[-hw, -hh], [hw, -hh], [hw, hh]]), TEX * 1.25, 9, false, { ov: 0.8 });
   edges(c, K([[hw, -hh], [hw + dx, -hh + dy]]), TEX * 1.25, 12, false, { ov: 0.6 });
+  flaps.forEach((f, i) => edges(c, f, TEX * 1.25, 40 + i, true, { ov: 0.8 }));
   BOX.holes.forEach(([hx, hy], i) => ribbon(c, ellipse(hx * k, hy * k, r, r, 12, i), TEX, 30 + i, { tin: 1, tout: 1, w0: 1, w1: 1, amp: 0.2 }));
   for (const ax of [hw + dx * 0.32, hw + dx * 0.7]) {
     const x = ax * k, y0 = (dy * (ax - hw) / dx + 6) * k, y1 = y0 - 7 * k;
@@ -1702,6 +1813,17 @@ function drawBox(s, c) {
   c.restore();
 }
 
+/* a sheep hopping out of its box or back in: in front of the box, and hidden by its front while inside it */
+function drawLeap(s, c, o) {
+  if (s.t < o.leap.t0) return;
+  const L = o.leap, f = clamp((s.t - L.t0) / L.dur), p = s.boxAt(), k = p.k;
+  const inside = Math.abs(o.x - (p.x + BOX.dx * k * 0.5)) < BOX.hw * k && (L.in ? f > 0.5 : f < 0.5);
+  if (!inside) { drawObj(s, c, o); return; }
+  c.save(); c.beginPath(); c.rect(-1e4, -1e4, 2e4, 1e4 + p.y - BOX.hh * k + 1); c.clip();
+  drawObj(s, c, o);
+  c.restore();
+}
+
 /* the competition: a much smaller lighthouse on a far island */
 function drawIsle(s, c) {
   const g = s.g, u = g.u, P = s.P, I = g.isle, hz = g.horizon;
@@ -2464,7 +2586,7 @@ function drawLabels(s, c) {
   const bx = s.box;
   if (bx.lastSide && bx.la > 0.01 && bx.gx != null) {
     const p = s.boxAt(true), q = boxLabel(p.x, p.y, p.k, u, size, bx.tw, bx.lastSide), lc = rgba(mix(P.ink, P.paper, night), s.pres.hero * bx.la);
-    label(c, 'a sheep (in a box)', q.tx, q.ty, size, lc, q.align);
+    label(c, s.boxEmpty() ? 'a box (empty)' : 'a sheep (in a box)', q.tx, q.ty, size, lc, q.align);
     c.fillStyle = lc; arrow(c, q.arrow, TEX * 1.1, 11);
     c.fillStyle = col;
   }
@@ -2567,7 +2689,7 @@ function napEye(c, x, y, r, col) {
 // pleased with a meal: a short while after it, eyes shut happily and the tail wags
 const joyAt = (o, t) => { const a = t - (o.joy ?? -99); return a >= 0 && a < 1.3 ? a : -1; };
 function drawSheep(c, u, wool, o, t) {
-  const fall = o.state === 'fall', step = Math.hypot(o.vx, o.vd || 0) > 2 ? Math.sin(t * 14 + o.seed) * 2 * u : 0;
+  const fall = o.state === 'fall' || o.state === 'leap', step = Math.hypot(o.vx, o.vd || 0) > 2 ? Math.sin(t * 14 + o.seed) * 2 * u : 0;
   c.beginPath();
   [-8, -3, 5, 10].forEach((lx, i) => ribbon(c, [[lx * u, -10 * u], [lx * u + (fall ? 3 * u : (i % 2 ? step : -step)), 0]], DET * 1.05, i, { tin: 1, tout: 1, w0: 0.9, w1: 1 }));
   c.fillStyle = INK; c.fill();

From c1742235cf71238936c6e7e934bf0df4ac1e4f92 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 14:34:46 +0100
Subject: [PATCH 18/46] docs: let the website's lighthouse look around as it
 wakes, then at you

The lighthouse now wakes up in steps: its eye opens looking straight at you, its light coming
on toward you, and blinks twice; it looks out to the left and blinks again; then it turns down
to the title and reads it. Once it has lit the whole bar after the opening, it turns to look
straight at you, glowing, for a couple of seconds before it goes back to turning and following
the pointer.

The opening now takes about seven seconds before the page comes in.
---
 site/main.js  | 16 +++++------
 site/scene.js | 76 ++++++++++++++++++++++++++++++++++-----------------
 2 files changed, 59 insertions(+), 33 deletions(-)

diff --git a/site/main.js b/site/main.js
index c021023d..84f043e1 100644
--- a/site/main.js
+++ b/site/main.js
@@ -1025,8 +1025,8 @@ function wakeUp() {
   setMode(dayMode(), DAWN);
   S("freeze", false);
   readTitle();
-  runTimer = setTimeout(expandOpening, 2300);
-  landTimer = setTimeout(() => land(false), 2300 + 1300); // once the bar and the notes have come in
+  runTimer = setTimeout(expandOpening, 4550); // once it has read the title (WAKE in scene.js)
+  landTimer = setTimeout(() => land(false), 4550 + 1300); // once the bar and the notes have come in
 }
 // the sleeper's z's, by its lamp wherever the drawing has put it
 let snoreAt = "";
@@ -1059,7 +1059,8 @@ function expandOpening() {
   }, () => {});
 }
 /* The light reads the title: a glowing copy of it sits behind the letters, one element per letter, and each letter
-   lights up once the beam has reached it (all of them by the end of the sweep) */
+   lights up once the beam has reached it while reading (all of them by the end). Before that the lighthouse wakes
+   up: it blinks at you, looks out to the left and blinks again (WAKE in scene.js) */
 let reading = null;
 function readTitle() {
   if (landed) return;
@@ -1076,13 +1077,12 @@ function readTitle() {
   S("doze", false); // the lighthouse wakes up: its eye opens and its light comes on
   const letters = [...glow.querySelectorAll("i")].map(el => { const r = el.getBoundingClientRect(); return { el, x: r.left + r.width / 2, y: r.top + r.height / 2 }; });
   const ys = letters.map(l => l.y), first = letters[0], last = letters.at(-1);
-  const y = (Math.min(...ys) + Math.max(...ys)) / 2;
-  // it turns to the first letter while its eye opens, then reads across
-  if (!S("sweepAlong", first.x - 10, y, last.x + 10, y, 1.1, 0.8)) return;
-  reading = { letters, until: performance.now() + 2100 };
+  const y = (Math.min(...ys) + Math.max(...ys)) / 2, now = performance.now();
+  if (!S("wakeRead", first.x - 10, y, last.x + 10, y)) return;
+  reading = { letters, from: now + 3050, until: now + 4350 };
 }
 function readGlow(s) {
-  if (!reading) return;
+  if (!reading || performance.now() < reading.from) return;
   const done = performance.now() > reading.until;
   for (const l of reading.letters) if (!l.el.classList.contains("lit") && (done || s.inBeam(l.x, l.y) > .45)) l.el.classList.add("lit");
   if (done) reading = null;
diff --git a/site/scene.js b/site/scene.js
index c9cadc54..67126582 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -19,6 +19,8 @@ const mix = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b
 const mul = (a, b) => [a[0] * b[0] / 255, a[1] * b[1] / 255, a[2] * b[2] / 255];
 const rgba = (c, a = 1) => `rgba(${c[0] | 0},${c[1] | 0},${c[2] | 0},${a})`;
 const angDiff = (a, b) => { let d = (a - b) % TAU; if (d > Math.PI) d -= TAU; if (d < -Math.PI) d += TAU; return d; };
+// the light's turn that faces you (its rotation at a quarter turn), nearest to where it is
+const facing = phi => Math.PI / 2 + TAU * Math.round((phi - Math.PI / 2) / TAU);
 const stops = list => list.map(([d, p]) => [d, Object.fromEntries(Object.entries(p).map(([k, v]) => [k, hex(v)]))]);
 function palAt(list, d) {
   let i = 0;
@@ -207,6 +209,9 @@ function label(c, text, x, y, size, col, align = 'left', rot = -0.035) {
 
 /* ---------- the scene: geometry, state, input and time ---------- */
 const IDLE_AFTER = 4000, IDLE_FPS = 14, BOIL_FPS = 7, MAX_OBJS = 36;
+// the opening's wake-up, in seconds after the eye starts to open: it opens, blinks twice, looks out to the left from
+// `left`, blinks, turns to the title from `turn` and reads it from `read` for `dur`; it's over at `end`
+const WAKE = { open: 0.85, blinks: [[0.95, 0.26], [1.3, 0.26], [2.35, 0.22]], left: 1.55, turn: 2.55, read: 3.15, dur: 1.1, end: 4.5 };
 // the grass on the hill: at most this many tufts, a new one every 6 to 12 s while there are fewer
 const MEADOW_MAX = 6, SPROUT_MIN = 6, SPROUT_MAX = 12;
 
@@ -228,7 +233,8 @@ class Scene {
     this.vel = { x: 0, y: 0 };
     this.wind = 0; this.windAmb = 0.3; this.windTotal = 0.3; this.drift = 0;
     this.beam = { a: Math.PI * 0.96, len: 1, flash: 0, phi: Math.PI * 0.96, steer: 0, sa: Math.PI * 0.96 };
-    this.blink = { next: 2.5, at: -9, wink: -9 };
+    this.blink = { next: 2.5, at: -9, wink: -9, dur: 0.18 }; this.blinks = [];
+    this.wakePath = null; this.gaze = null;
     this.ripples = []; this.objs = [];
     this.layers = { back: [], front: [] };
     this.sprites = new Map();
@@ -387,28 +393,28 @@ class Scene {
   }
   // the landing: until the camera has come down, the flock and the grass wait (they're placed where they're seen)
   hold(on) { this.held = !!on; if (!on) this.measure(); this.wake(); }
-  // the opening: the light swings to one point and sweeps along to another, once (viewport coordinates)
-  sweepAlong(x0, y0, x1, y1, dur = 1, lead = 0.35) {
+  // the opening's wake-up (see WAKE): facing you as the eye opens, it blinks; it looks out to the left and blinks
+  // again; then its light turns down to the title, from one point to another (viewport coordinates), and reads it
+  wakeRead(x0, y0, x1, y1) {
     if (this.reduced || document.hidden) return false;
-    const L = this.g.lamp, b = this.beam;
-    // it starts from exactly where the light points, steered from there on
-    b.sa = b.a; b.steer = 1;
-    this.sweep = { t0: this.t, lead, dur, tail: 0.3, from: b.a, a0: Math.atan2(y0 - this.oy - L.y, x0 - this.ox - L.x), a1: Math.atan2(y1 - this.oy - L.y, x1 - this.ox - L.x) };
+    const L = this.g.lamp, at = (x, y) => Math.atan2(y - this.oy - L.y, x - this.ox - L.x);
+    this.wakePath = { t0: this.t, phi: facing(this.beam.phi), aL: Math.PI + 0.12, a0: at(x0, y0), a1: at(x1, y1) };
+    this.blinks = WAKE.blinks.map(([d, dur]) => [this.t + d, dur]);
     this.wake();
     return true;
   }
-  stopSweep() { this.sweep = null; this.wake(); }
+  stopSweep() { this.sweep = this.wakePath = null; this.blinks = []; this.wake(); }
   // the opening: asleep, its eye shut and its lamp out, until the page wakes it to read the title
   doze(on) {
     if (on) this.dozing = true;
     else if (this.dozing) {
       this.dozing = false; this.wokeAt = this.t;
-      this.blink.next = this.t + 2.6; // a first blink once it's done reading
+      this.blink.next = this.t + WAKE.end + 1; // its own blinks once it's done waking up
     }
     this.wake();
   }
   // 1 while asleep, easing to 0 as the eye slowly opens; the light comes on once the eye is half open
-  drowsy() { return this.dozing ? 1 : 1 - smooth(0, 1.1, this.t - this.wokeAt); }
+  drowsy() { return this.dozing ? 1 : 1 - smooth(0, WAKE.open, this.t - this.wokeAt); }
   lampOn() { return 1 - smooth(0, 0.6, this.drowsy()); }
   // the opening's still night: nothing moves until the visitor does (the page draws the sleeper's z's)
   freeze(on) { this.frozen = !!on; if (!on) this.last = null; this.wake(); }
@@ -424,7 +430,7 @@ class Scene {
     if (this.reduced || !ts.length || document.hidden) return false;
     const y = Math.min(...ts.map(t => t.y)) - 12 * this.g.u, x0 = Math.min(...ts.map(t => (t.x0 + t.x1) / 2)), x1 = Math.max(...ts.map(t => (t.x0 + t.x1) / 2));
     this.beam.sa = this.beam.a; this.beam.steer = 1;
-    this.sweep = { t0: this.t, lead: 0.85, dur, tail: 0.25, from: this.beam.a, a0: Math.atan2(y - L.y, x0 - L.x), a1: Math.atan2(y - L.y, x1 - L.x) };
+    this.sweep = { t0: this.t, lead: 0.85, dur, tail: 0.25, gaze: true, from: this.beam.a, a0: Math.atan2(y - L.y, x0 - L.x), a1: Math.atan2(y - L.y, x1 - L.x) };
     this.wake();
     return true;
   }
@@ -622,6 +628,8 @@ class Scene {
       const a = this.t - w.t0;
       if (a < w.lead + w.dur + w.tail) return a < w.lead ? w.from + angDiff(w.a0, w.from) * smooth(0, 1, a / w.lead) : w.a0 + angDiff(w.a1, w.a0) * smooth(0, 1, (a - w.lead) / w.dur);
       this.sweep = null;
+      // having lit the whole bar, it turns to look straight at you for a moment
+      if (w.gaze) this.gaze = { phi: facing(this.beam.phi), until: this.t + 3.2 };
     }
     const b = this.bore;
     if (!b || !((b.phase === 'look' && this.t - b.at > 0.35) || b.phase === 'push')) return null;
@@ -932,6 +940,7 @@ class Scene {
     this.box.hop = this.box.peek = -9;
     this.ripples = [];
     this.endBall(); this.endBore();
+    this.wakePath = this.gaze = null; this.blinks = [];
     this.regrowAt = this.hatKick = -9;
     this.doodles = []; this.splashes = []; this.look = null;
   }
@@ -965,7 +974,7 @@ class Scene {
     // reduced motion and nothing moving: the scene sleeps until the next call or input
   }
   busy() {
-    if (this.sweep || this.t - this.wokeAt < 1.2 || this.t - this.labelsAt < 0.6) return true;
+    if (this.sweep || this.wakePath || this.gaze || this.t - this.wokeAt < 1.2 || this.t - this.labelsAt < 0.6) return true;
     if (Math.abs(this.box.lid - (this.boxEmpty() ? 1 : 0)) > 0.01) return true;
     if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
@@ -1025,8 +1034,9 @@ class Scene {
       sc.x += sc.dir * 7 * u * dt;
       if (sc.x > sc.x1) sc.dir = -1; else if (sc.x < sc.x0) sc.dir = 1;
     }
-    // the eye blinks now and then
-    if (!rm && this.t > this.blink.next) { this.blink.at = this.t; this.blink.next = this.t + 3 + Math.random() * 5; }
+    // the eye blinks now and then, and when told to (slower, as it wakes up)
+    if (!rm && this.blinks.length && this.t >= this.blinks[0][0]) { const [at, dur] = this.blinks.shift(); Object.assign(this.blink, { at, dur }); }
+    else if (!rm && this.t > this.blink.next) Object.assign(this.blink, { at: this.t, dur: 0.18, next: this.t + 3 + Math.random() * 5 });
     this.updateBeam(dt);
     this.ripples = this.ripples.filter(r => this.t - r.t0 < 2.2);
     if (!this.flocked && !this.held) this.flock();
@@ -1039,17 +1049,33 @@ class Scene {
     this.splashes = this.splashes.filter(p => this.t - p.t0 < 0.7);
   }
   updateBeam(dt) {
-    const b = this.beam, L = this.g.lamp, now = performance.now() / 1000, rm = this.reduced;
-    const quiet = this.ptr.kind === 'touch' ? 3.2 : 5, lock = this.beamLock();
-    const steering = lock != null || (this.ptr.on && now - this.ptr.last < quiet);
-    b.steer = rm ? (steering || b.steer > 0.5 ? 1 : 0) : lerp(b.steer, steering ? 1 : 0, Math.min(1, dt * (steering ? 4 : 0.7)));
-    if (!rm) b.phi += dt * TAU / 15;
-    const c = Math.cos(b.phi), sn = Math.sin(b.phi);
-    if (lock != null) b.sa += angDiff(lock, b.sa) * Math.min(1, dt * (this.sweep ? 9 : 3.2));
-    else if (this.ptr.on && steering) {
-      const want = this.clampAim(Math.atan2(this.ptr.y - L.y, this.ptr.x - L.x));
-      b.sa = rm ? want : b.sa + angDiff(want, b.sa) * Math.min(1, dt * 5);
+    const b = this.beam, L = this.g.lamp, now = performance.now() / 1000, rm = this.reduced, wp = this.wakePath;
+    if (wp && (this.ball || this.t - wp.t0 > WAKE.end)) this.wakePath = null;
+    if (this.gaze && (this.ball || this.sweep || this.wakePath || this.t > this.gaze.until)) this.gaze = null;
+    if (this.wakePath) {
+      // waking up (see wakeRead): facing you (its light comes on toward you), then out to the left, then down to
+      // the title and across it
+      const w = this.t - wp.t0;
+      b.phi = wp.phi;
+      b.steer = smooth(WAKE.left, WAKE.left + 0.6, w);
+      b.sa = w < WAKE.turn ? wp.aL : w < WAKE.read ? wp.aL + angDiff(wp.a0, wp.aL) * smooth(WAKE.turn, WAKE.read, w)
+        : wp.a0 + angDiff(wp.a1, wp.a0) * smooth(WAKE.read, WAKE.read + WAKE.dur, w);
+    } else if (this.gaze) {
+      // looking at you: the light comes round to face you and stays there a moment (the pointer can wait)
+      b.phi = this.gaze.phi;
+      b.steer = lerp(b.steer, 0, Math.min(1, dt * 3));
+    } else {
+      const quiet = this.ptr.kind === 'touch' ? 3.2 : 5, lock = this.beamLock();
+      const steering = lock != null || (this.ptr.on && now - this.ptr.last < quiet);
+      b.steer = rm ? (steering || b.steer > 0.5 ? 1 : 0) : lerp(b.steer, steering ? 1 : 0, Math.min(1, dt * (steering ? 4 : 0.7)));
+      if (!rm) b.phi += dt * TAU / 15;
+      if (lock != null) b.sa += angDiff(lock, b.sa) * Math.min(1, dt * (this.sweep ? 9 : 3.2));
+      else if (this.ptr.on && steering) {
+        const want = this.clampAim(Math.atan2(this.ptr.y - L.y, this.ptr.x - L.x));
+        b.sa = rm ? want : b.sa + angDiff(want, b.sa) * Math.min(1, dt * 5);
+      }
     }
+    const c = Math.cos(b.phi), sn = Math.sin(b.phi);
     const vx = lerp(c, Math.cos(b.sa), b.steer), vy = lerp(0.03 * Math.abs(c), Math.sin(b.sa), b.steer);
     b.a = Math.atan2(vy, vx);
     b.len = clamp(Math.hypot(vx, vy)) * this.lampOn();
@@ -2101,7 +2127,7 @@ function drawEye(s, c) {
   let shut = lerp(lerp(0.2, 0.02, night), 0, wide);
   if (md.shut) shut = Math.max(shut, md.shut);
   shut = Math.max(shut, 0.5 * sq);
-  if (bl < 0.18 && !s.bore) shut = Math.max(shut, Math.sin(bl / 0.18 * Math.PI));
+  if (bl < s.blink.dur && !s.bore) shut = Math.max(shut, Math.sin(bl / s.blink.dur * Math.PI));
   if (wk < 0.6) shut = Math.max(shut, wk < 0.1 ? wk / 0.1 : wk < 0.45 ? 1 : 1 - (wk - 0.45) / 0.15);
   if (s.reduced && wk >= 0.6) shut = lerp(0.2, 0.02, night);
   shut = Math.max(shut, s.drowsy());

From fb14aeaa552bda8493b75338c8a61cf7d0a31ce0 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 14:40:03 +0100
Subject: [PATCH 19/46] docs: let the day come before the website's lighthouse
 wakes up

The opening's sunrise now comes first: the lighthouse sleeps on while the sky, the sun and the
moon turn from night to day, and the rest of the drawing holds still. Then it wakes up slowly:
its eye opens halfway, grows a little heavier for a moment, then opens all the way, before it
blinks, looks out to the left and reads the title as before. Visitors who chose the night don't
wait for a sunrise that doesn't come.

The opening now takes about eight seconds before the page comes in.
---
 site/main.js   | 32 ++++++++++++++++++++------------
 site/scene.js  | 45 ++++++++++++++++++++++++++++-----------------
 site/style.css |  7 ++++---
 3 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/site/main.js b/site/main.js
index 84f043e1..e8ce6d3f 100644
--- a/site/main.js
+++ b/site/main.js
@@ -979,16 +979,16 @@ function onBar(event, key, info = {}) {
 }
 
 /* The opening: a title card over the whole drawing with the bar big in the middle of it. It starts at night, the
-   lighthouse asleep and the drawing still. After a moment the lighthouse wakes up, the day comes, and its light
-   reads the title; then the bar stretches up into its place at the top, the card drifts away, the notes come in,
-   and the lighthouse sweeps its light along the bar. The pointer leaves the drawing alone until it's over. Once a
-   session, opening at the top, with motion allowed (the class and the night come from the page's head; ?intro plays
-   it again); a scroll, a key, a click or a tap ends it at once. */
+   lighthouse asleep and the drawing still. After a moment the day comes while it sleeps on; then it wakes up slowly,
+   and its light reads the title; then the bar stretches up into its place at the top, the card drifts away, the
+   notes come in, and the lighthouse sweeps its light along the bar. The pointer leaves the drawing alone until it's
+   over. Once a session, opening at the top, with motion allowed (the class and the night come from the page's head;
+   ?intro plays it again); a scroll, a key, a click or a tap ends it at once. */
 let landed = !root.classList.contains("intro"), woken = landed, sweptUntil = 0, runTimer = 0, landTimer = 0;
 const swept = new Map();
 const opening = document.getElementById("opening"), snore = opening.querySelector(".op-z");
 const LAND_SKIP = ["wheel", "keydown", "pointerdown", "touchstart", "scroll"];
-const DAWN = 1.8; // seconds from night to day
+const DAWN = 1.6; // seconds from night to day
 // it wakes into the day, or into the night when that's the visitor's choice on the night switch
 const dayMode = () => localStorage.getItem("mode") === "dark" ? "dark" : "light";
 function land(skip) {
@@ -1016,17 +1016,25 @@ function land(skip) {
 function skipLanding() { land(true); }
 // nobody watching: it ends rather than play on unseen
 function skipHidden() { if (document.hidden) land(true); }
-// waking up: the eye opens, the z's go, the day comes over a couple of seconds, and the light reads the title
+// the day comes while it sleeps on: only the sky, the sun and the moon move, and the card changes with them
+function dawn() {
+  if (landed) return;
+  if (document.hidden) return land(true);
+  const mode = dayMode();
+  setMode(mode, DAWN);
+  runTimer = setTimeout(wakeUp, mode === "dark" ? 0 : DAWN * 1000 - 200); // (a night owl's stays night)
+}
+// then it wakes up, slowly: the z's go, the drawing comes to life, the eye opens and the light reads the title
+// (WAKE in scene.js)
 function wakeUp() {
   if (woken || landed) return;
   if (document.hidden) return land(true);
   woken = true;
   snore.classList.add("gone");
-  setMode(dayMode(), DAWN);
   S("freeze", false);
   readTitle();
-  runTimer = setTimeout(expandOpening, 4550); // once it has read the title (WAKE in scene.js)
-  landTimer = setTimeout(() => land(false), 4550 + 1300); // once the bar and the notes have come in
+  runTimer = setTimeout(expandOpening, 4500); // once it has read the title
+  landTimer = setTimeout(() => land(false), 4500 + 1300); // once the bar and the notes have come in
 }
 // the sleeper's z's, by its lamp wherever the drawing has put it
 let snoreAt = "";
@@ -1079,7 +1087,7 @@ function readTitle() {
   const ys = letters.map(l => l.y), first = letters[0], last = letters.at(-1);
   const y = (Math.min(...ys) + Math.max(...ys)) / 2, now = performance.now();
   if (!S("wakeRead", first.x - 10, y, last.x + 10, y)) return;
-  reading = { letters, from: now + 3050, until: now + 4350 };
+  reading = { letters, from: now + 3150, until: now + 4350 };
 }
 function readGlow(s) {
   if (!reading || performance.now() < reading.from) return;
@@ -1106,7 +1114,7 @@ if (!landed) {
     S("labels", false);
     S("doze", true); // asleep, its eye shut and its lamp out,
     S("freeze", true); // and the whole drawing still,
-    runTimer = setTimeout(wakeUp, 1200); // for a moment
+    runTimer = setTimeout(dawn, 800); // for a moment
   }
 } else opening.remove();
 
diff --git a/site/scene.js b/site/scene.js
index 67126582..67cf45de 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -209,9 +209,10 @@ function label(c, text, x, y, size, col, align = 'left', rot = -0.035) {
 
 /* ---------- the scene: geometry, state, input and time ---------- */
 const IDLE_AFTER = 4000, IDLE_FPS = 14, BOIL_FPS = 7, MAX_OBJS = 36;
-// the opening's wake-up, in seconds after the eye starts to open: it opens, blinks twice, looks out to the left from
-// `left`, blinks, turns to the title from `turn` and reads it from `read` for `dur`; it's over at `end`
-const WAKE = { open: 0.85, blinks: [[0.95, 0.26], [1.3, 0.26], [2.35, 0.22]], left: 1.55, turn: 2.55, read: 3.15, dur: 1.1, end: 4.5 };
+// the opening's wake-up, in seconds after the eye starts to open: it opens slowly (over `open`), blinks twice, looks
+// out to the left from `left`, blinks, turns to the title from `turn` and reads it from `read` for `dur`; it's over
+// at `end`
+const WAKE = { open: 1.3, blinks: [[1.4, 0.26], [1.7, 0.26], [2.6, 0.22]], left: 1.95, turn: 2.75, read: 3.25, dur: 1, end: 4.45 };
 // the grass on the hill: at most this many tufts, a new one every 6 to 12 s while there are fewer
 const MEADOW_MAX = 6, SPROUT_MIN = 6, SPROUT_MAX = 12;
 
@@ -274,7 +275,7 @@ class Scene {
   // with a duration (the opening's sunrise), an even change over that time instead of the usual quick ease
   setDusk(d, dur = 0) {
     d = clamp(+d || 0);
-    if (dur > 0 && !this.reduced) this.dTween = { from: this.d, t0: this.t, dur };
+    if (dur > 0 && !this.reduced) this.dTween = { from: this.d, a: 0, dur };
     else if (d !== this.dTarget) this.dTween = null;
     this.dTarget = d; if (this.reduced) this.d = d; this.wake();
   }
@@ -414,7 +415,12 @@ class Scene {
     this.wake();
   }
   // 1 while asleep, easing to 0 as the eye slowly opens; the light comes on once the eye is half open
-  drowsy() { return this.dozing ? 1 : 1 - smooth(0, WAKE.open, this.t - this.wokeAt); }
+  drowsy() {
+    if (this.dozing) return 1;
+    // slowly, still sleepy: half open, a little heavier for a moment, then all the way
+    const a = this.t - this.wokeAt;
+    return a < 0.55 ? lerp(1, 0.5, smooth(0, 0.55, a)) : a < 0.8 ? lerp(0.5, 0.58, smooth(0.55, 0.8, a)) : lerp(0.58, 0, smooth(0.8, WAKE.open, a));
+  }
   lampOn() { return 1 - smooth(0, 0.6, this.drowsy()); }
   // the opening's still night: nothing moves until the visitor does (the page draws the sleeper's z's)
   freeze(on) { this.frozen = !!on; if (!on) this.last = null; this.wake(); }
@@ -966,15 +972,15 @@ class Scene {
   sleep() { cancelAnimationFrame(this.raf); clearTimeout(this.timer); this.raf = this.timer = 0; }
   schedule() {
     if (this.raf || this.timer || this.dead || document.hidden) return;
-    // frozen: a frame only when one is asked for (a resize, a new theme), none in between
-    if (this.frozen) { if (this.kick > 0) this.raf = requestAnimationFrame(this.frame); return; }
+    // frozen: a frame only when one is asked for (a resize, a new theme) or while the hour changes, none in between
+    if (this.frozen) { if (this.kick > 0 || this.d !== (this.dEff ?? this.dTarget)) this.raf = requestAnimationFrame(this.frame); return; }
     const active = this.kick > 0 || performance.now() < this.awake || this.busy();
     if (active) this.raf = requestAnimationFrame(this.frame);
     else if (!this.reduced) this.timer = setTimeout(() => { this.timer = 0; this.raf = requestAnimationFrame(this.frame); }, 1000 / IDLE_FPS - 6);
     // reduced motion and nothing moving: the scene sleeps until the next call or input
   }
   busy() {
-    if (this.sweep || this.wakePath || this.gaze || this.t - this.wokeAt < 1.2 || this.t - this.labelsAt < 0.6) return true;
+    if (this.sweep || this.wakePath || this.gaze || this.t - this.wokeAt < WAKE.open + 0.2 || this.t - this.labelsAt < 0.6) return true;
     if (Math.abs(this.box.lid - (this.boxEmpty() ? 1 : 0)) > 0.01) return true;
     if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
@@ -990,8 +996,9 @@ class Scene {
     this.kick--;
     const dt = this.last == null ? 1 / 60 : Math.min(0.1, Math.max(0, (now - this.last) / 1000));
     this.last = now;
-    // frozen, only the very first frame moves anything: it puts everyone in their place
+    // frozen, only the very first frame moves anything (it puts everyone in their place); after it only the hour does
     if (!this.frozen || this.t === 0) this.update(dt);
+    else this.stepDusk(dt);
     const t0 = performance.now();
     this.render();
     this.times.push(performance.now() - t0);
@@ -999,6 +1006,15 @@ class Scene {
     this.onFrame?.(this);
     this.schedule();
   }
+  // the hour: toward the one asked for, quickly, or evenly over the time given (see setDusk)
+  stepDusk(dt) {
+    const rm = this.reduced, tw = this.dTween;
+    // the install state brings the night with it
+    const dTarget = this.dEff = Math.max(this.dTarget, this.pres.install > 0 ? lerp(this.dTarget, 1, this.pres.install) : 0);
+    if (tw && !rm) { tw.a += dt; const k = smooth(0, 1, tw.a / tw.dur); this.d = lerp(tw.from, dTarget, k); if (k >= 1) this.dTween = null; }
+    else this.d = rm ? dTarget : this.d + (dTarget - this.d) * Math.min(1, dt * 2.4);
+    if (Math.abs(dTarget - this.d) < 0.0005) this.d = dTarget;
+  }
   update(dt) {
     const g = this.g, u = g.u, rm = this.reduced;
     this.t += dt;
@@ -1006,12 +1022,7 @@ class Scene {
       const want = k === this.state ? 1 : 0;
       this.pres[k] = rm ? want : clamp(this.pres[k] + Math.sign(want - this.pres[k]) * dt * 1.8);
     }
-    // the install state brings the night with it
-    const dTarget = this.dEff = Math.max(this.dTarget, this.pres.install > 0 ? lerp(this.dTarget, 1, this.pres.install) : 0);
-    const tw = this.dTween;
-    if (tw && !rm) { const k = smooth(0, 1, (this.t - tw.t0) / tw.dur); this.d = lerp(tw.from, dTarget, k); if (k >= 1) this.dTween = null; }
-    else this.d = rm ? dTarget : this.d + (dTarget - this.d) * Math.min(1, dt * 2.4);
-    if (Math.abs(dTarget - this.d) < 0.0005) this.d = dTarget;
+    this.stepDusk(dt);
     this.boil = rm ? 0 : Math.floor(this.t * BOIL_FPS) % 3;
     this.vel.x *= Math.exp(-dt * 2.5); this.vel.y *= Math.exp(-dt * 2.5);
     this.windAmb = rm ? 0.2 : 0.28 + 0.22 * noise(this.t * 0.13 + 3);
@@ -1057,7 +1068,7 @@ class Scene {
       // the title and across it
       const w = this.t - wp.t0;
       b.phi = wp.phi;
-      b.steer = smooth(WAKE.left, WAKE.left + 0.6, w);
+      b.steer = smooth(WAKE.left, WAKE.left + 0.5, w);
       b.sa = w < WAKE.turn ? wp.aL : w < WAKE.read ? wp.aL + angDiff(wp.a0, wp.aL) * smooth(WAKE.turn, WAKE.read, w)
         : wp.a0 + angDiff(wp.a1, wp.a0) * smooth(WAKE.read, WAKE.read + WAKE.dur, w);
     } else if (this.gaze) {
@@ -1572,7 +1583,7 @@ class Scene {
     const step = Math.round(this.d * STEPS);
     this.P = palAt(PAL, step / STEPS);
     this.pstep = step;
-    BOIL = this.boil; PW = g.pw; INK = rgba(this.P.ink); REGX = 2.6 * g.pw; REGY = 1.9 * g.pw; NAP = this.drowsy() > 0.5;
+    BOIL = this.boil; PW = g.pw; INK = rgba(this.P.ink); REGX = 2.6 * g.pw; REGY = 1.9 * g.pw; NAP = this.drowsy() > 0.75;
     c.setTransform(k, 0, 0, k, 0, 0);
     c.globalAlpha = 1; c.globalCompositeOperation = 'source-over';
     drawScene(this, c);
diff --git a/site/style.css b/site/style.css
index 07fff4bd..bef0aff1 100644
--- a/site/style.css
+++ b/site/style.css
@@ -134,7 +134,7 @@ h1, h2, h3 { text-wrap: balance; }
 .op-gap { flex: 1; }
 /* the card's sun and moon, one over the other: they cross over halfway through the sunrise */
 .op-sun { position: relative; }
-.op-sun svg { transition: opacity .5s .65s; }
+.op-sun svg { transition: opacity .45s .55s; }
 .op-sun .on { position: absolute; left: 13px; opacity: 0; }
 [data-mode="dark"] .op-sun .on { opacity: 1; }
 [data-mode="dark"] .op-sun .off { opacity: 0; }
@@ -142,10 +142,11 @@ h1, h2, h3 { text-wrap: balance; }
 /* the day comes: the card's bar and line change with the sky; their words turn from light to dark quickly, halfway,
    where either reads (fading slowly, they would go grey on grey) */
 .opening .op-bar, .opening .w, .op-line {
-  transition: background-color 1.8s ease-in-out, box-shadow 1.8s ease-in-out, text-shadow 1.8s ease-in-out, color .16s .82s;
+  transition: background-color 1.6s ease-in-out, box-shadow 1.6s ease-in-out, text-shadow 1.6s ease-in-out, color .14s .73s;
 }
 /* asleep: z's rising beside the lighthouse's hat (the page puts them by its lamp) */
-.op-z { position: fixed; left: -99px; top: -99px; font: 400 var(--zs, 16px)/1 var(--hand); color: #f2eeff; transition: opacity .3s; }
+.op-z { position: fixed; left: -99px; top: -99px; font: 400 var(--zs, 16px)/1 var(--hand); color: #f2eeff; transition: opacity .3s, color 1.6s ease-in-out; }
+[data-mode="light"] .op-z { color: var(--pen); }
 .op-z i { position: absolute; left: 0; top: 0; font-style: normal; opacity: 0; animation: op-z 1.5s linear infinite; }
 .op-z i:nth-child(2) { animation-delay: .5s; }
 .op-z i:nth-child(3) { animation-delay: 1s; }

From ac9aa1076e249ef5aee4cee6feb309b9f89ba069 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 14:43:18 +0100
Subject: [PATCH 20/46] docs: play the website's opening on every load

The opening used to play once a browser session, so a reload went straight to the page. It now
plays on every load, reloads included, and a reload starts from the top of the page, where it
plays, rather than where the page was left. A link to a section still goes straight there, and
reduced motion still turns the opening off.
---
 site/index.html | 11 ++++++++---
 site/main.js    |  5 ++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/site/index.html b/site/index.html
index 8a124108..8646911e 100644
--- a/site/index.html
+++ b/site/index.html
@@ -45,9 +45,14 @@
 const root = document.documentElement;
 root.dataset.mode = localStorage.getItem("mode") || (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
 root.classList.add("js");
-// the landing film: once a session, opening at the top of the page, with motion allowed; ?intro plays it again.
-// It starts at night, and wakes into the day when the visitor moves (see land() in main.js)
-try { if (!matchMedia("(prefers-reduced-motion: reduce)").matches && (new URLSearchParams(location.search).has("intro") || (!sessionStorage.getItem("landed") && !location.hash))) { root.classList.add("intro"); root.dataset.mode = "dark"; } } catch {}
+// the landing film: on every load, reloads too, with motion allowed; a link to a section goes straight there
+// (?intro plays it anyway). It starts at night, and the day comes before the lighthouse wakes (see land() in
+// main.js). A reload starts from the top, where it plays, rather than where the page was left.
+try {
+  if (!matchMedia("(prefers-reduced-motion: reduce)").matches && (new URLSearchParams(location.search).has("intro") || !location.hash)) {
+    root.classList.add("intro"); root.dataset.mode = "dark"; history.scrollRestoration = "manual";
+  }
+} catch {}
 </script>
 <script src="scene.js" defer></script>
 <script src="main.js" defer></script>
diff --git a/site/main.js b/site/main.js
index e8ce6d3f..8ac945e5 100644
--- a/site/main.js
+++ b/site/main.js
@@ -982,8 +982,8 @@ function onBar(event, key, info = {}) {
    lighthouse asleep and the drawing still. After a moment the day comes while it sleeps on; then it wakes up slowly,
    and its light reads the title; then the bar stretches up into its place at the top, the card drifts away, the
    notes come in, and the lighthouse sweeps its light along the bar. The pointer leaves the drawing alone until it's
-   over. Once a session, opening at the top, with motion allowed (the class and the night come from the page's head;
-   ?intro plays it again); a scroll, a key, a click or a tap ends it at once. */
+   over. On every load at the top, with motion allowed (the class and the night come from the page's head); a scroll,
+   a key, a click or a tap ends it at once. */
 let landed = !root.classList.contains("intro"), woken = landed, sweptUntil = 0, runTimer = 0, landTimer = 0;
 const swept = new Map();
 const opening = document.getElementById("opening"), snore = opening.querySelector(".op-z");
@@ -1106,7 +1106,6 @@ function sweepGlow(s) {
   for (const [w, until] of swept) if (now > until) { w.classList.remove("swept"); swept.delete(w); }
 }
 if (!landed) {
-  try { sessionStorage.setItem("landed", "1"); } catch {}
   if (scrollY > 0 || document.hidden) land(true);
   else {
     for (const type of LAND_SKIP) addEventListener(type, skipLanding, { capture: true, passive: true });

From 5de5ec1df1fc5494ab68f1f7276bb55266e85cdf Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 14:45:34 +0100
Subject: [PATCH 21/46] docs: let the website's lighthouse get bored only after
 the opening

The bored lighthouse's quiet spell started counting when the page loaded, so with the longer
opening its trick began right after the page came in, while the light was still looking at
you. The count now starts when the opening ends, and the trick waits while the light is busy
sweeping the bar or looking at you.
---
 site/main.js  | 8 +++++---
 site/scene.js | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/site/main.js b/site/main.js
index 8ac945e5..43641a81 100644
--- a/site/main.js
+++ b/site/main.js
@@ -1011,6 +1011,7 @@ function land(skip) {
   S("labels", true);
   if (skip) requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove("intro-skip")));
   else if (S("sweepBar", 1.6)) sweptUntil = performance.now() + 2800;
+  setTimeout(quietSpell); // the bored lighthouse's quiet spell starts now (not before the page's script has run)
 }
 // (a click or a tap that ends it doesn't also drop something on the landscape: see pressedInOpening)
 function skipLanding() { land(true); }
@@ -1189,12 +1190,13 @@ bar.addEventListener("pointerout", e => {
 bar.addEventListener("focusin", e => { const w = tourWidget(e.target); if (w && e.target.matches(":focus-visible")) showTour(w); });
 bar.addEventListener("focusout", e => { if (lit && !lit.contains(e.relatedTarget) && !lit.matches(":hover")) hideTour(); });
 
-/* The bored lighthouse: once a visit, after a quiet spell with no pointer, scroll or key, and nothing open.
-   The scene checks the rest (motion allowed, the lamp in view, no game on); any input catches it. */
+/* The bored lighthouse: once a visit, after a quiet spell with no pointer, scroll or key, and nothing open,
+   counted from the end of the opening. The scene checks the rest (motion allowed, the lamp in view, no game on,
+   its light not busy); any input catches it. */
 let boredTimer = 0, boredDone = false;
 function quietSpell() {
   clearTimeout(boredTimer);
-  if (!scene || boredDone) return;
+  if (!scene || boredDone || !landed) return;
   boredTimer = setTimeout(function check() {
     const calm = !editing && !openId && !adding && ctx.hidden && !reviewing && !lit && !document.hidden && !reduce.matches;
     if (calm && S("bored")) boredDone = true;
diff --git a/site/scene.js b/site/scene.js
index 67cf45de..5c09a35d 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -461,7 +461,7 @@ class Scene {
   }
   // the bored trick, now (the page calls it after a quiet spell; also a hook for testing). True if it started.
   bored() {
-    if (this.reduced || this.ball || this.bore || document.hidden) return false;
+    if (this.reduced || this.ball || this.bore || this.sweep || this.wakePath || this.gaze || document.hidden) return false;
     const L = this.g.lamp, mid = t => (t.x0 + t.x1) / 2;
     const near = this.bar.filter(t => /^(clock|meeting|battery)$/.test(t.key)).sort((a, b) => Math.abs(mid(a) - L.x) - Math.abs(mid(b) - L.x))[0];
     if (!near || !this.seen(L.x, L.y)) return false;

From 47aac74924b459a3d3391147193799aae3723a0f Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 14:58:33 +0100
Subject: [PATCH 22/46] docs: bring the website's page in with the day, then
 wake the lighthouse

The opening is reordered. At night the lighthouse sleeps under the title card; then the day
comes and, with it, the card's bar rises into place at the top, the card drifts away and the
notes come in, while the lighthouse sleeps on. Only then does it wake up, slowly, and light the
headline word by word before it sweeps the bar and looks at you. The page is ready after about
two and a half seconds instead of eight, and the lighthouse wakes up on the page itself.

The words it lights stay lit while it reads. The bored lighthouse now also rests for a while
after looking at you before its trick.
---
 site/index.html |   8 ++--
 site/main.js    | 119 +++++++++++++++++++-----------------------------
 site/scene.js   |  31 ++++++++-----
 site/style.css  |   9 ++--
 4 files changed, 73 insertions(+), 94 deletions(-)

diff --git a/site/index.html b/site/index.html
index 8646911e..ba4cac3d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -46,11 +46,11 @@
 root.dataset.mode = localStorage.getItem("mode") || (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
 root.classList.add("js");
 // the landing film: on every load, reloads too, with motion allowed; a link to a section goes straight there
-// (?intro plays it anyway). It starts at night, and the day comes before the lighthouse wakes (see land() in
-// main.js). A reload starts from the top, where it plays, rather than where the page was left.
+// (?intro plays it anyway). It starts at night, the lighthouse asleep; the day comes with the page, and then it
+// wakes (see land() in main.js). A reload starts from the top, where it plays, rather than where the page was left.
 try {
   if (!matchMedia("(prefers-reduced-motion: reduce)").matches && (new URLSearchParams(location.search).has("intro") || !location.hash)) {
-    root.classList.add("intro"); root.dataset.mode = "dark"; history.scrollRestoration = "manual";
+    root.classList.add("intro", "asleep"); root.dataset.mode = "dark"; history.scrollRestoration = "manual";
   }
 } catch {}
 </script>
@@ -118,8 +118,8 @@
 
 <a class="skip" href="#main">Skip to content</a>
 <div class="scene" id="scene" aria-hidden="true"></div>
+<span class="op-z" id="snore" aria-hidden="true"><i>z</i><i>z</i><i>z</i></span>
 <div class="opening" id="opening" aria-hidden="true" data-theme="built-in">
-  <span class="op-z"><i>z</i><i>z</i><i>z</i></span>
   <p class="op-mark"><span class="op-w1">Stable</span><span class="op-w2">Bar</span></p>
   <div class="op-bar">
     <span class="w"><svg style="width:13px;height:15px;fill:currentColor"><use href="#i-apple"/></svg></span>
diff --git a/site/main.js b/site/main.js
index 43641a81..34111755 100644
--- a/site/main.js
+++ b/site/main.js
@@ -853,10 +853,11 @@ function measureLumens() {
 }
 function lightWords(s) {
   if (!lumRects) measureLumens();
-  const I = s.beamI();
+  // (while the lighthouse reads the headline after the opening, the words it has lit stay lit)
+  const I = s.beamI(), keep = s.readingWords();
   for (const r of lumRects) {
     const on = r.seen && s.inBeam(r.x, r.y) * (.45 + .55 * I) > .35;
-    if (on !== r.on) { r.on = on; r.el.classList.toggle("lit", on); }
+    if (on !== r.on && (on || !keep)) { r.on = on; r.el.classList.toggle("lit", on); }
   }
 }
 
@@ -901,7 +902,7 @@ if (scene) {
     dock.dataset.sky = lum(sky) < .18 ? "dark" : "light";
   };
   scene.onFrame = s => {
-    try { if (landed) lightWords(s); if (!woken) placeSnore(s); readGlow(s); sweepGlow(s); skyStrip(s); if (lit && s.playing) hideTour(); } catch (err) {
+    try { if (landed) lightWords(s); if (!woken) placeSnore(s); sweepGlow(s); skyStrip(s); if (lit && s.playing) hideTour(); } catch (err) {
       if (!sceneFailed) { sceneFailed = true; console.warn("The drawing failed:", err); }
     }
   };
@@ -978,19 +979,20 @@ function onBar(event, key, info = {}) {
   }
 }
 
-/* The opening: a title card over the whole drawing with the bar big in the middle of it. It starts at night, the
-   lighthouse asleep and the drawing still. After a moment the day comes while it sleeps on; then it wakes up slowly,
-   and its light reads the title; then the bar stretches up into its place at the top, the card drifts away, the
-   notes come in, and the lighthouse sweeps its light along the bar. The pointer leaves the drawing alone until it's
-   over. On every load at the top, with motion allowed (the class and the night come from the page's head); a scroll,
-   a key, a click or a tap ends it at once. */
-let landed = !root.classList.contains("intro"), woken = landed, sweptUntil = 0, runTimer = 0, landTimer = 0;
+/* The opening: a title card over the whole drawing with the bar big in the middle of it, at night, the lighthouse
+   asleep and the drawing still. After a moment the day comes, and with it the page: the card's bar stretches up into
+   its place at the top, the card drifts away and the notes come in, while the lighthouse sleeps on. Then it wakes up,
+   slowly, reads the headline with its light, sweeps it along the bar and looks at you (WAKE in scene.js). On every
+   load at the top, with motion allowed (the class and the night come from the page's head); until the page has come
+   in, a scroll, a key, a click or a tap brings it in at once, the lighthouse awake. */
+let landed = !root.classList.contains("intro"), woken = landed, runTimer = 0, landTimer = 0;
 const swept = new Map();
-const opening = document.getElementById("opening"), snore = opening.querySelector(".op-z");
+const opening = document.getElementById("opening"), snore = document.getElementById("snore");
 const LAND_SKIP = ["wheel", "keydown", "pointerdown", "touchstart", "scroll"];
 const DAWN = 1.6; // seconds from night to day
 // it wakes into the day, or into the night when that's the visitor's choice on the night switch
 const dayMode = () => localStorage.getItem("mode") === "dark" ? "dark" : "light";
+// the page has come in: at the end of the sunrise, or at once with the lighthouse awake
 function land(skip) {
   if (landed) return;
   landed = true;
@@ -998,44 +1000,43 @@ function land(skip) {
   clearTimeout(landTimer);
   for (const type of LAND_SKIP) removeEventListener(type, skipLanding, true);
   removeEventListener("visibilitychange", skipHidden);
-  if (!woken) { woken = true; setMode(dayMode()); }
-  if (skip) { root.classList.add("intro-skip"); S("stopSweep"); }
-  S("freeze", false);
-  S("doze", false);
-  reading = null;
+  if (skip) { root.classList.add("intro-skip"); setMode(dayMode()); }
   root.classList.remove("intro", "op-bar-in", "op-page-in");
   opening.remove();
   measureMarks();
   lumRects = null;
   sendBar(); // the bar's widgets where they stand, for the sweep and the ball game
   S("labels", true);
-  if (skip) requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove("intro-skip")));
-  else if (S("sweepBar", 1.6)) sweptUntil = performance.now() + 2800;
+  if (skip) { wakeUp(true); requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove("intro-skip"))); }
+  else runTimer = setTimeout(wakeUp, 300);
   setTimeout(quietSpell); // the bored lighthouse's quiet spell starts now (not before the page's script has run)
 }
-// (a click or a tap that ends it doesn't also drop something on the landscape: see pressedInOpening)
+// (a click or a tap that brings it in doesn't also drop something on the landscape: see pressedInOpening)
 function skipLanding() { land(true); }
-// nobody watching: it ends rather than play on unseen
+// nobody watching: it comes in rather than play on unseen
 function skipHidden() { if (document.hidden) land(true); }
-// the day comes while it sleeps on: only the sky, the sun and the moon move, and the card changes with them
-function dawn() {
+// the day comes, and with it the page: the bar rises into place while the sky, the sun and the moon turn and the
+// card changes with them; the drawing holds still and the lighthouse sleeps on
+function rise() {
   if (landed) return;
   if (document.hidden) return land(true);
-  const mode = dayMode();
-  setMode(mode, DAWN);
-  runTimer = setTimeout(wakeUp, mode === "dark" ? 0 : DAWN * 1000 - 200); // (a night owl's stays night)
-}
-// then it wakes up, slowly: the z's go, the drawing comes to life, the eye opens and the light reads the title
-// (WAKE in scene.js)
-function wakeUp() {
-  if (woken || landed) return;
-  if (document.hidden) return land(true);
+  expandOpening();
+  setMode(dayMode(), DAWN);
+  landTimer = setTimeout(() => land(false), DAWN * 1000 + 100);
+}
+// then it wakes up, slowly: the z's go, the drawing comes to life, the eye opens, and its light reads the headline,
+// sweeps along the bar and looks at you (WAKE in scene.js); brought in at once (now), it's simply awake
+function wakeUp(now) {
+  if (woken) return;
   woken = true;
   snore.classList.add("gone");
+  setTimeout(() => { root.classList.remove("asleep"); snore.remove(); }, 400);
   S("freeze", false);
-  readTitle();
-  runTimer = setTimeout(expandOpening, 4500); // once it has read the title
-  landTimer = setTimeout(() => land(false), 4500 + 1300); // once the bar and the notes have come in
+  S("doze", false);
+  if (now === true || document.hidden) return;
+  measureLumens();
+  const seen = lumRects.filter(r => r.seen);
+  if (seen.length) S("wakeRead", seen[0].x - 10, seen[0].y, seen.at(-1).x + 10, seen.at(-1).y);
 }
 // the sleeper's z's, by its lamp wherever the drawing has put it
 let snoreAt = "";
@@ -1045,61 +1046,33 @@ function placeSnore(s) {
   snoreAt = key;
   snore.style.cssText = `left: ${p.x + p.r * 2}px; top: ${p.y - p.r * 0.4 - size / 2}px; --zs: ${size}px`;
 }
-/* The card's bar stretches into the real one: a copy of it leaves the card and grows to the window's width as it
-   rises to the top, shrinking to the real bar's height, its widgets sliding apart as it widens. The notes come in
-   while it rises, once the title has gone; at the top the real bar fades in under it and the copy fades away */
+/* The card's bar stretches into the real one, as the day comes: a copy of it leaves the card and grows to the
+   window's width as it rises to the top, shrinking to the real bar's height, its widgets sliding apart as it widens.
+   The card's words drift away, the notes come in while it rises, and at the top the real bar fades in under it and
+   the copy fades away. The copy is made before the day comes, so its colours change with the sky's */
 function expandOpening() {
-  if (landed) return;
   const pill = opening.querySelector(".op-bar"), a = pill.getBoundingClientRect(), b = bar.getBoundingClientRect(), k = b.height / a.height;
   const fly = pill.cloneNode(true);
   fly.classList.add("op-fly");
   opening.append(fly);
+  getComputedStyle(fly).backgroundColor;
   pill.style.visibility = "hidden";
   const grow = fly.animate([
     { left: `${a.left}px`, top: `${a.top}px`, width: `${a.width}px`, transform: "scale(1)", borderRadius: "22px" },
     { left: `${b.left}px`, top: `${b.top}px`, width: `${b.width / k}px`, transform: `scale(${k})`, borderRadius: "0px" },
-  ], { duration: 720, easing: "cubic-bezier(.6, 0, .2, 1)", fill: "forwards" });
-  for (const el of opening.querySelectorAll(".op-mark, .op-line")) el.animate([{ opacity: 1, transform: "none" }, { opacity: 0, transform: "translateY(-28px)" }], { duration: 460, easing: "ease-in", fill: "forwards" });
-  setTimeout(() => { if (!landed) root.classList.add("op-page-in"); }, 480);
+  ], { duration: 1100, easing: "cubic-bezier(.45, 0, .25, 1)", fill: "forwards" });
+  for (const el of opening.querySelectorAll(".op-mark, .op-line")) el.animate([{ opacity: 1, transform: "none" }, { opacity: 0, transform: "translateY(-28px)" }], { duration: 600, easing: "ease-in", fill: "forwards" });
+  setTimeout(() => { if (!landed) root.classList.add("op-page-in"); }, 650);
   grow.finished.then(() => {
     if (landed) return;
     root.classList.add("op-bar-in");
     fly.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 340, fill: "forwards" });
   }, () => {});
 }
-/* The light reads the title: a glowing copy of it sits behind the letters, one element per letter, and each letter
-   lights up once the beam has reached it while reading (all of them by the end). Before that the lighthouse wakes
-   up: it blinks at you, looks out to the left and blinks again (WAKE in scene.js) */
-let reading = null;
-function readTitle() {
-  if (landed) return;
-  const mark = opening.querySelector(".op-mark"), glow = document.createElement("span");
-  glow.className = "op-glow";
-  glow.setAttribute("aria-hidden", "true");
-  for (const word of mark.children) {
-    const copy = document.createElement("span");
-    copy.className = word.className;
-    for (const ch of word.textContent) copy.append(Object.assign(document.createElement("i"), { textContent: ch }));
-    glow.append(copy);
-  }
-  mark.append(glow);
-  S("doze", false); // the lighthouse wakes up: its eye opens and its light comes on
-  const letters = [...glow.querySelectorAll("i")].map(el => { const r = el.getBoundingClientRect(); return { el, x: r.left + r.width / 2, y: r.top + r.height / 2 }; });
-  const ys = letters.map(l => l.y), first = letters[0], last = letters.at(-1);
-  const y = (Math.min(...ys) + Math.max(...ys)) / 2, now = performance.now();
-  if (!S("wakeRead", first.x - 10, y, last.x + 10, y)) return;
-  reading = { letters, from: now + 3150, until: now + 4350 };
-}
-function readGlow(s) {
-  if (!reading || performance.now() < reading.from) return;
-  const done = performance.now() > reading.until;
-  for (const l of reading.letters) if (!l.el.classList.contains("lit") && (done || s.inBeam(l.x, l.y) > .45)) l.el.classList.add("lit");
-  if (done) reading = null;
-}
 /* While the light sweeps the bar, each widget it passes glows for a moment */
 function sweepGlow(s) {
   const now = performance.now();
-  if (now < sweptUntil) for (const w of bar.querySelectorAll(".w[data-key]")) {
+  if (s.sweepingBar()) for (const w of bar.querySelectorAll(".w[data-key]")) {
     if (w.hidden || w.classList.contains("over") || !w.offsetWidth) continue;
     const r = w.getBoundingClientRect();
     if (s.inBeam(r.left + r.width / 2, r.top + r.height / 2) > .45) { w.classList.add("swept"); swept.set(w, now + 420); }
@@ -1114,9 +1087,9 @@ if (!landed) {
     S("labels", false);
     S("doze", true); // asleep, its eye shut and its lamp out,
     S("freeze", true); // and the whole drawing still,
-    runTimer = setTimeout(dawn, 800); // for a moment
+    runTimer = setTimeout(rise, 800); // for a moment
   }
-} else opening.remove();
+} else { opening.remove(); snore.remove(); }
 
 /* The lamp-lit tour, for pointers that hover: the widget under the pointer takes the lamp's glow (the beam
    already follows the pointer) and a paper tag hangs under it on a string. Keyboard focus shows it too.
diff --git a/site/scene.js b/site/scene.js
index 5c09a35d..99949e5a 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -210,8 +210,8 @@ function label(c, text, x, y, size, col, align = 'left', rot = -0.035) {
 /* ---------- the scene: geometry, state, input and time ---------- */
 const IDLE_AFTER = 4000, IDLE_FPS = 14, BOIL_FPS = 7, MAX_OBJS = 36;
 // the opening's wake-up, in seconds after the eye starts to open: it opens slowly (over `open`), blinks twice, looks
-// out to the left from `left`, blinks, turns to the title from `turn` and reads it from `read` for `dur`; it's over
-// at `end`
+// out to the left from `left`, blinks, turns to the headline from `turn` and reads it from `read` for `dur`; at `end`
+// it goes on to sweep the bar
 const WAKE = { open: 1.3, blinks: [[1.4, 0.26], [1.7, 0.26], [2.6, 0.22]], left: 1.95, turn: 2.75, read: 3.25, dur: 1, end: 4.45 };
 // the grass on the hill: at most this many tufts, a new one every 6 to 12 s while there are fewer
 const MEADOW_MAX = 6, SPROUT_MIN = 6, SPROUT_MAX = 12;
@@ -235,7 +235,7 @@ class Scene {
     this.wind = 0; this.windAmb = 0.3; this.windTotal = 0.3; this.drift = 0;
     this.beam = { a: Math.PI * 0.96, len: 1, flash: 0, phi: Math.PI * 0.96, steer: 0, sa: Math.PI * 0.96 };
     this.blink = { next: 2.5, at: -9, wink: -9, dur: 0.18 }; this.blinks = [];
-    this.wakePath = null; this.gaze = null;
+    this.wakePath = null; this.gaze = null; this.restAt = -99;
     this.ripples = []; this.objs = [];
     this.layers = { back: [], front: [] };
     this.sprites = new Map();
@@ -394,17 +394,21 @@ class Scene {
   }
   // the landing: until the camera has come down, the flock and the grass wait (they're placed where they're seen)
   hold(on) { this.held = !!on; if (!on) this.measure(); this.wake(); }
-  // the opening's wake-up (see WAKE): facing you as the eye opens, it blinks; it looks out to the left and blinks
-  // again; then its light turns down to the title, from one point to another (viewport coordinates), and reads it
+  // the opening's wake-up (see WAKE): facing you as the eye opens, it blinks; it looks out to the left, up over the
+  // page, and blinks again; then its light turns to the headline, from one point to another (viewport coordinates),
+  // and reads it; then it sweeps the bar and looks at you
   wakeRead(x0, y0, x1, y1) {
     if (this.reduced || document.hidden) return false;
     const L = this.g.lamp, at = (x, y) => Math.atan2(y - this.oy - L.y, x - this.ox - L.x);
-    this.wakePath = { t0: this.t, phi: facing(this.beam.phi), aL: Math.PI + 0.12, a0: at(x0, y0), a1: at(x1, y1) };
+    this.wakePath = { t0: this.t, phi: facing(this.beam.phi), aL: Math.PI + 0.35, a0: at(x0, y0), a1: at(x1, y1) };
     this.blinks = WAKE.blinks.map(([d, dur]) => [this.t + d, dur]);
     this.wake();
     return true;
   }
-  stopSweep() { this.sweep = this.wakePath = null; this.blinks = []; this.wake(); }
+  // reading the headline: the words it has lit stay lit until it's done
+  readingWords() { const wp = this.wakePath; return !!wp && this.t - wp.t0 >= WAKE.read; }
+  // sweeping the bar: the page lights the widgets it passes
+  sweepingBar() { return !!this.sweep?.bar; }
   // the opening: asleep, its eye shut and its lamp out, until the page wakes it to read the title
   doze(on) {
     if (on) this.dozing = true;
@@ -436,7 +440,7 @@ class Scene {
     if (this.reduced || !ts.length || document.hidden) return false;
     const y = Math.min(...ts.map(t => t.y)) - 12 * this.g.u, x0 = Math.min(...ts.map(t => (t.x0 + t.x1) / 2)), x1 = Math.max(...ts.map(t => (t.x0 + t.x1) / 2));
     this.beam.sa = this.beam.a; this.beam.steer = 1;
-    this.sweep = { t0: this.t, lead: 0.85, dur, tail: 0.25, gaze: true, from: this.beam.a, a0: Math.atan2(y - L.y, x0 - L.x), a1: Math.atan2(y - L.y, x1 - L.x) };
+    this.sweep = { t0: this.t, lead: 0.85, dur, tail: 0.25, bar: true, gaze: true, from: this.beam.a, a0: Math.atan2(y - L.y, x0 - L.x), a1: Math.atan2(y - L.y, x1 - L.x) };
     this.wake();
     return true;
   }
@@ -461,7 +465,8 @@ class Scene {
   }
   // the bored trick, now (the page calls it after a quiet spell; also a hook for testing). True if it started.
   bored() {
-    if (this.reduced || this.ball || this.bore || this.sweep || this.wakePath || this.gaze || document.hidden) return false;
+    // (not while its light is busy, nor for a while after it has looked at you: it has only just performed)
+    if (this.reduced || this.ball || this.bore || this.sweep || this.wakePath || this.gaze || this.t - this.restAt < 10 || document.hidden) return false;
     const L = this.g.lamp, mid = t => (t.x0 + t.x1) / 2;
     const near = this.bar.filter(t => /^(clock|meeting|battery)$/.test(t.key)).sort((a, b) => Math.abs(mid(a) - L.x) - Math.abs(mid(b) - L.x))[0];
     if (!near || !this.seen(L.x, L.y)) return false;
@@ -1061,8 +1066,12 @@ class Scene {
   }
   updateBeam(dt) {
     const b = this.beam, L = this.g.lamp, now = performance.now() / 1000, rm = this.reduced, wp = this.wakePath;
-    if (wp && (this.ball || this.t - wp.t0 > WAKE.end)) this.wakePath = null;
-    if (this.gaze && (this.ball || this.sweep || this.wakePath || this.t > this.gaze.until)) this.gaze = null;
+    if (wp && (this.ball || this.t - wp.t0 > WAKE.end)) {
+      this.wakePath = null;
+      // done reading: on to the bar
+      if (!this.ball) this.sweepBar(1.6);
+    }
+    if (this.gaze && (this.ball || this.sweep || this.wakePath || this.t > this.gaze.until)) { this.gaze = null; this.restAt = this.t; }
     if (this.wakePath) {
       // waking up (see wakeRead): facing you (its light comes on toward you), then out to the left, then down to
       // the title and across it
diff --git a/site/style.css b/site/style.css
index bef0aff1..13ec52c8 100644
--- a/site/style.css
+++ b/site/style.css
@@ -118,10 +118,6 @@ h1, h2, h3 { text-wrap: balance; }
   color: #fff; rotate: -1.5deg; -webkit-text-stroke: .045em var(--pen); paint-order: stroke fill; text-shadow: 0 .045em 0 #1111111f;
 }
 .op-mark { position: relative; isolation: isolate; }
-/* the light reading the title: a copy of it behind the letters, each letter glowing once the beam has reached it */
-.op-glow { position: absolute; inset: 0; z-index: -1; color: transparent; text-shadow: none; -webkit-text-stroke: 0; pointer-events: none; }
-.op-glow i { font-style: normal; transition: text-shadow .3s; }
-.op-glow i.lit { text-shadow: 0 0 10px #ffe04a, 0 0 24px #ffe04ae6, 0 0 46px #ffd43ba6; }
 .op-bar {
   display: flex; align-items: center; gap: 8px; width: min(780px, 100%); padding: 7px 8px; border-radius: 22px;
   background: color-mix(in srgb, #ffffff 36%, transparent); box-shadow: inset 0 0 0 1px #ffffffb3, 0 20px 44px -20px #0b1d4a73;
@@ -144,8 +140,9 @@ h1, h2, h3 { text-wrap: balance; }
 .opening .op-bar, .opening .w, .op-line {
   transition: background-color 1.6s ease-in-out, box-shadow 1.6s ease-in-out, text-shadow 1.6s ease-in-out, color .14s .73s;
 }
-/* asleep: z's rising beside the lighthouse's hat (the page puts them by its lamp) */
-.op-z { position: fixed; left: -99px; top: -99px; font: 400 var(--zs, 16px)/1 var(--hand); color: #f2eeff; transition: opacity .3s, color 1.6s ease-in-out; }
+/* asleep: z's rising beside the lighthouse's hat (the page puts them by its lamp), from the night until it wakes */
+.op-z { display: none; position: fixed; z-index: 60; left: -99px; top: -99px; font: 400 var(--zs, 16px)/1 var(--hand); color: #f2eeff; pointer-events: none; transition: opacity .3s, color 1.6s ease-in-out; }
+.asleep .op-z { display: block; }
 [data-mode="light"] .op-z { color: var(--pen); }
 .op-z i { position: absolute; left: 0; top: 0; font-style: normal; opacity: 0; animation: op-z 1.5s linear infinite; }
 .op-z i:nth-child(2) { animation-delay: .5s; }

From 861dcd6cd44f17f7f6eb144b7e5ae54addc95a63 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 15:02:40 +0100
Subject: [PATCH 23/46] docs: draw the website's 404 page on paper like the
 other pages

The new 404 page from main used the old site's colours. It now sits on the redrawn site's paper
note over the sky, like the privacy and terms pages, with their browser colour for day and night
and a skip link.
---
 site/404.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/site/404.html b/site/404.html
index e5a68c1c..15e1621a 100644
--- a/site/404.html
+++ b/site/404.html
@@ -5,15 +5,17 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Page not found · StableBar</title>
 <meta name="robots" content="noindex">
-<meta name="theme-color" content="#15110d">
+<meta name="theme-color" content="#86cbf2">
 <!-- GitHub Pages serves this page at any missing address, so every path starts at the root. -->
 <link rel="icon" href="/images/icon-64.png">
 <link rel="stylesheet" href="/style.css">
 <script>
 document.documentElement.dataset.mode = localStorage.getItem("mode") || (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
+if (document.documentElement.dataset.mode === "dark") document.querySelector('meta[name="theme-color"]').content = "#232662";
 </script>
 </head>
-<body>
+<body class="doc">
+<a class="skip" href="#main">Skip to content</a>
 <div class="page">
   <header class="top">
     <a class="brand" href="/"><img src="/images/icon-64.png" alt="">StableBar</a>

From 7527c1097ed73260865872ce33a192afa2deca68 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 15:07:53 +0100
Subject: [PATCH 24/46] docs: keep the website's lighthouse from getting bored
 too soon

Its bored trick, ending in a "hehe", now waits at least 40 seconds after the opening: from the
end of its look at you, or from waking up when the opening was skipped. After that it comes, as
before, once a visit after a quiet spell.
---
 site/scene.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index 99949e5a..f7c8c1c8 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -413,7 +413,7 @@ class Scene {
   doze(on) {
     if (on) this.dozing = true;
     else if (this.dozing) {
-      this.dozing = false; this.wokeAt = this.t;
+      this.dozing = false; this.wokeAt = this.t; this.restAt = this.t;
       this.blink.next = this.t + WAKE.end + 1; // its own blinks once it's done waking up
     }
     this.wake();
@@ -465,8 +465,9 @@ class Scene {
   }
   // the bored trick, now (the page calls it after a quiet spell; also a hook for testing). True if it started.
   bored() {
-    // (not while its light is busy, nor for a while after it has looked at you: it has only just performed)
-    if (this.reduced || this.ball || this.bore || this.sweep || this.wakePath || this.gaze || this.t - this.restAt < 10 || document.hidden) return false;
+    // (not while its light is busy, nor in the first 40 s after the opening, counted from the end of its look at
+    // you, or from waking up when the opening was skipped: it has only just performed)
+    if (this.reduced || this.ball || this.bore || this.sweep || this.wakePath || this.gaze || this.t - this.restAt < 40 || document.hidden) return false;
     const L = this.g.lamp, mid = t => (t.x0 + t.x1) / 2;
     const near = this.bar.filter(t => /^(clock|meeting|battery)$/.test(t.key)).sort((a, b) => Math.abs(mid(a) - L.x) - Math.abs(mid(b) - L.x))[0];
     if (!near || !this.seen(L.x, L.y)) return false;

From 100c3825209ca08318bf4c86c726721b98ae7ae2 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 17:15:22 +0100
Subject: [PATCH 25/46] docs: wake the website's lighthouse as soon as the bar
 is up

The opening's wake-up took about 4.5 s after the page came in: the eye opened slowly,
blinked, looked out to the left and only then read the headline, so the bar's sweep
ended about 10 s after load.

Now the eye opens the moment the card's bar reaches the top, its light coming on at
the headline's first word. It reads the headline, keeps it lit while it sweeps the
bar, then looks at you and blinks. The whole headline is lit by about 3.1 s and the
look at you ends at about 9 s.

Also stop the light following the pointer for one frame as the sweep ends and it
turns to look at you.
---
 site/main.js  | 25 +++++++++++---------
 site/scene.js | 63 ++++++++++++++++++++++++---------------------------
 2 files changed, 43 insertions(+), 45 deletions(-)

diff --git a/site/main.js b/site/main.js
index 34111755..06e0b4c7 100644
--- a/site/main.js
+++ b/site/main.js
@@ -902,7 +902,7 @@ if (scene) {
     dock.dataset.sky = lum(sky) < .18 ? "dark" : "light";
   };
   scene.onFrame = s => {
-    try { if (landed) lightWords(s); if (!woken) placeSnore(s); sweepGlow(s); skyStrip(s); if (lit && s.playing) hideTour(); } catch (err) {
+    try { if (woken) lightWords(s); else placeSnore(s); sweepGlow(s); skyStrip(s); if (lit && s.playing) hideTour(); } catch (err) {
       if (!sceneFailed) { sceneFailed = true; console.warn("The drawing failed:", err); }
     }
   };
@@ -981,10 +981,10 @@ function onBar(event, key, info = {}) {
 
 /* The opening: a title card over the whole drawing with the bar big in the middle of it, at night, the lighthouse
    asleep and the drawing still. After a moment the day comes, and with it the page: the card's bar stretches up into
-   its place at the top, the card drifts away and the notes come in, while the lighthouse sleeps on. Then it wakes up,
-   slowly, reads the headline with its light, sweeps it along the bar and looks at you (WAKE in scene.js). On every
-   load at the top, with motion allowed (the class and the night come from the page's head); until the page has come
-   in, a scroll, a key, a click or a tap brings it in at once, the lighthouse awake. */
+   its place at the top, the card drifts away and the notes come in, while the lighthouse sleeps on. As the bar reaches
+   the top it wakes up, its light coming on at the headline: it reads it, sweeps along the bar and looks at you (WAKE in
+   scene.js). On every load at the top, with motion allowed (the class and the night come from the page's head); until
+   the page has come in, a scroll, a key, a click or a tap brings it in at once, the lighthouse awake. */
 let landed = !root.classList.contains("intro"), woken = landed, runTimer = 0, landTimer = 0;
 const swept = new Map();
 const opening = document.getElementById("opening"), snore = document.getElementById("snore");
@@ -1008,7 +1008,7 @@ function land(skip) {
   sendBar(); // the bar's widgets where they stand, for the sweep and the ball game
   S("labels", true);
   if (skip) { wakeUp(true); requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove("intro-skip"))); }
-  else runTimer = setTimeout(wakeUp, 300);
+  else wakeUp(); // (if the bar's arrival hasn't woken it already)
   setTimeout(quietSpell); // the bored lighthouse's quiet spell starts now (not before the page's script has run)
 }
 // (a click or a tap that brings it in doesn't also drop something on the landscape: see pressedInOpening)
@@ -1016,7 +1016,7 @@ function skipLanding() { land(true); }
 // nobody watching: it comes in rather than play on unseen
 function skipHidden() { if (document.hidden) land(true); }
 // the day comes, and with it the page: the bar rises into place while the sky, the sun and the moon turn and the
-// card changes with them; the drawing holds still and the lighthouse sleeps on
+// card changes with them; the drawing holds still and the lighthouse sleeps until the bar is up
 function rise() {
   if (landed) return;
   if (document.hidden) return land(true);
@@ -1024,8 +1024,9 @@ function rise() {
   setMode(dayMode(), DAWN);
   landTimer = setTimeout(() => land(false), DAWN * 1000 + 100);
 }
-// then it wakes up, slowly: the z's go, the drawing comes to life, the eye opens, and its light reads the headline,
-// sweeps along the bar and looks at you (WAKE in scene.js); brought in at once (now), it's simply awake
+// then it wakes up at once: the z's go, the drawing comes to life, the eye opens, and its light comes on at the
+// headline, reads it, sweeps along the bar and looks at you (WAKE in scene.js); brought in at once (now), it's simply
+// awake
 function wakeUp(now) {
   if (woken) return;
   woken = true;
@@ -1048,8 +1049,9 @@ function placeSnore(s) {
 }
 /* The card's bar stretches into the real one, as the day comes: a copy of it leaves the card and grows to the
    window's width as it rises to the top, shrinking to the real bar's height, its widgets sliding apart as it widens.
-   The card's words drift away, the notes come in while it rises, and at the top the real bar fades in under it and
-   the copy fades away. The copy is made before the day comes, so its colours change with the sky's */
+   The card's words drift away, the notes come in while it rises, and at the top the real bar fades in under it, the
+   copy fades away and the lighthouse wakes. The copy is made before the day comes, so its colours change with the
+   sky's */
 function expandOpening() {
   const pill = opening.querySelector(".op-bar"), a = pill.getBoundingClientRect(), b = bar.getBoundingClientRect(), k = b.height / a.height;
   const fly = pill.cloneNode(true);
@@ -1067,6 +1069,7 @@ function expandOpening() {
     if (landed) return;
     root.classList.add("op-bar-in");
     fly.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 340, fill: "forwards" });
+    wakeUp();
   }, () => {});
 }
 /* While the light sweeps the bar, each widget it passes glows for a moment */
diff --git a/site/scene.js b/site/scene.js
index f7c8c1c8..ee2ed158 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -209,10 +209,9 @@ function label(c, text, x, y, size, col, align = 'left', rot = -0.035) {
 
 /* ---------- the scene: geometry, state, input and time ---------- */
 const IDLE_AFTER = 4000, IDLE_FPS = 14, BOIL_FPS = 7, MAX_OBJS = 36;
-// the opening's wake-up, in seconds after the eye starts to open: it opens slowly (over `open`), blinks twice, looks
-// out to the left from `left`, blinks, turns to the headline from `turn` and reads it from `read` for `dur`; at `end`
-// it goes on to sweep the bar
-const WAKE = { open: 1.3, blinks: [[1.4, 0.26], [1.7, 0.26], [2.6, 0.22]], left: 1.95, turn: 2.75, read: 3.25, dur: 1, end: 4.45 };
+// the opening's wake-up, in seconds after the eye starts to open: it opens at once (over `open`), its light coming on
+// at the headline's first word, and reads the headline from `read` for `dur`; at `end` it goes on to sweep the bar
+const WAKE = { open: 0.45, read: 0.35, dur: 1.1, end: 1.6 };
 // the grass on the hill: at most this many tufts, a new one every 6 to 12 s while there are fewer
 const MEADOW_MAX = 6, SPROUT_MIN = 6, SPROUT_MAX = 12;
 
@@ -234,7 +233,7 @@ class Scene {
     this.vel = { x: 0, y: 0 };
     this.wind = 0; this.windAmb = 0.3; this.windTotal = 0.3; this.drift = 0;
     this.beam = { a: Math.PI * 0.96, len: 1, flash: 0, phi: Math.PI * 0.96, steer: 0, sa: Math.PI * 0.96 };
-    this.blink = { next: 2.5, at: -9, wink: -9, dur: 0.18 }; this.blinks = [];
+    this.blink = { next: 2.5, at: -9, wink: -9 };
     this.wakePath = null; this.gaze = null; this.restAt = -99;
     this.ripples = []; this.objs = [];
     this.layers = { back: [], front: [] };
@@ -394,19 +393,17 @@ class Scene {
   }
   // the landing: until the camera has come down, the flock and the grass wait (they're placed where they're seen)
   hold(on) { this.held = !!on; if (!on) this.measure(); this.wake(); }
-  // the opening's wake-up (see WAKE): facing you as the eye opens, it blinks; it looks out to the left, up over the
-  // page, and blinks again; then its light turns to the headline, from one point to another (viewport coordinates),
-  // and reads it; then it sweeps the bar and looks at you
+  // the opening's wake-up (see WAKE): as the eye opens, its light comes on at the headline, from one point to another
+  // (viewport coordinates), and reads it; then it sweeps the bar and looks at you
   wakeRead(x0, y0, x1, y1) {
     if (this.reduced || document.hidden) return false;
     const L = this.g.lamp, at = (x, y) => Math.atan2(y - this.oy - L.y, x - this.ox - L.x);
-    this.wakePath = { t0: this.t, phi: facing(this.beam.phi), aL: Math.PI + 0.35, a0: at(x0, y0), a1: at(x1, y1) };
-    this.blinks = WAKE.blinks.map(([d, dur]) => [this.t + d, dur]);
+    this.wakePath = { t0: this.t, a0: at(x0, y0), a1: at(x1, y1) };
     this.wake();
     return true;
   }
-  // reading the headline: the words it has lit stay lit until it's done
-  readingWords() { const wp = this.wakePath; return !!wp && this.t - wp.t0 >= WAKE.read; }
+  // reading the headline: the words it has lit stay lit until it has swept the bar too
+  readingWords() { return !!this.wakePath || this.sweepingBar(); }
   // sweeping the bar: the page lights the widgets it passes
   sweepingBar() { return !!this.sweep?.bar; }
   // the opening: asleep, its eye shut and its lamp out, until the page wakes it to read the title
@@ -414,16 +411,16 @@ class Scene {
     if (on) this.dozing = true;
     else if (this.dozing) {
       this.dozing = false; this.wokeAt = this.t; this.restAt = this.t;
-      this.blink.next = this.t + WAKE.end + 1; // its own blinks once it's done waking up
+      this.blink.next = this.t + WAKE.end + 4; // a first blink once it's done showing off (sooner if it looks at you)
     }
     this.wake();
   }
-  // 1 while asleep, easing to 0 as the eye slowly opens; the light comes on once the eye is half open
+  // 1 while asleep, easing to 0 as the eye opens; the light comes on once the eye is half open
   drowsy() {
     if (this.dozing) return 1;
-    // slowly, still sleepy: half open, a little heavier for a moment, then all the way
-    const a = this.t - this.wokeAt;
-    return a < 0.55 ? lerp(1, 0.5, smooth(0, 0.55, a)) : a < 0.8 ? lerp(0.5, 0.58, smooth(0.55, 0.8, a)) : lerp(0.58, 0, smooth(0.8, WAKE.open, a));
+    // at once, wide awake: quick at first, settling as it opens all the way
+    const a = clamp((this.t - this.wokeAt) / WAKE.open);
+    return (1 - a) * (1 - a);
   }
   lampOn() { return 1 - smooth(0, 0.6, this.drowsy()); }
   // the opening's still night: nothing moves until the visitor does (the page draws the sleeper's z's)
@@ -440,7 +437,7 @@ class Scene {
     if (this.reduced || !ts.length || document.hidden) return false;
     const y = Math.min(...ts.map(t => t.y)) - 12 * this.g.u, x0 = Math.min(...ts.map(t => (t.x0 + t.x1) / 2)), x1 = Math.max(...ts.map(t => (t.x0 + t.x1) / 2));
     this.beam.sa = this.beam.a; this.beam.steer = 1;
-    this.sweep = { t0: this.t, lead: 0.85, dur, tail: 0.25, bar: true, gaze: true, from: this.beam.a, a0: Math.atan2(y - L.y, x0 - L.x), a1: Math.atan2(y - L.y, x1 - L.x) };
+    this.sweep = { t0: this.t, lead: 0.5, dur, tail: 0.25, bar: true, gaze: true, from: this.beam.a, a0: Math.atan2(y - L.y, x0 - L.x), a1: Math.atan2(y - L.y, x1 - L.x) };
     this.wake();
     return true;
   }
@@ -640,8 +637,8 @@ class Scene {
       const a = this.t - w.t0;
       if (a < w.lead + w.dur + w.tail) return a < w.lead ? w.from + angDiff(w.a0, w.from) * smooth(0, 1, a / w.lead) : w.a0 + angDiff(w.a1, w.a0) * smooth(0, 1, (a - w.lead) / w.dur);
       this.sweep = null;
-      // having lit the whole bar, it turns to look straight at you for a moment
-      if (w.gaze) this.gaze = { phi: facing(this.beam.phi), until: this.t + 3.2 };
+      // having lit the whole bar, it turns to look straight at you for a moment, and blinks
+      if (w.gaze) { this.gaze = { phi: facing(this.beam.phi), until: this.t + 3.2 }; this.blink.next = this.t + 1.1; }
     }
     const b = this.bore;
     if (!b || !((b.phase === 'look' && this.t - b.at > 0.35) || b.phase === 'push')) return null;
@@ -952,7 +949,7 @@ class Scene {
     this.box.hop = this.box.peek = -9;
     this.ripples = [];
     this.endBall(); this.endBore();
-    this.wakePath = this.gaze = null; this.blinks = [];
+    this.wakePath = this.gaze = null;
     this.regrowAt = this.hatKick = -9;
     this.doodles = []; this.splashes = []; this.look = null;
   }
@@ -1051,9 +1048,8 @@ class Scene {
       sc.x += sc.dir * 7 * u * dt;
       if (sc.x > sc.x1) sc.dir = -1; else if (sc.x < sc.x0) sc.dir = 1;
     }
-    // the eye blinks now and then, and when told to (slower, as it wakes up)
-    if (!rm && this.blinks.length && this.t >= this.blinks[0][0]) { const [at, dur] = this.blinks.shift(); Object.assign(this.blink, { at, dur }); }
-    else if (!rm && this.t > this.blink.next) Object.assign(this.blink, { at: this.t, dur: 0.18, next: this.t + 3 + Math.random() * 5 });
+    // the eye blinks now and then
+    if (!rm && this.t > this.blink.next) { this.blink.at = this.t; this.blink.next = this.t + 3 + Math.random() * 5; }
     this.updateBeam(dt);
     this.ripples = this.ripples.filter(r => this.t - r.t0 < 2.2);
     if (!this.flocked && !this.held) this.flock();
@@ -1070,23 +1066,22 @@ class Scene {
     if (wp && (this.ball || this.t - wp.t0 > WAKE.end)) {
       this.wakePath = null;
       // done reading: on to the bar
-      if (!this.ball) this.sweepBar(1.6);
+      if (!this.ball) this.sweepBar(1.3);
     }
     if (this.gaze && (this.ball || this.sweep || this.wakePath || this.t > this.gaze.until)) { this.gaze = null; this.restAt = this.t; }
+    // (asked first: when the sweep ends here, the look at you starts this very frame, before the pointer can pull
+    // the light)
+    const lock = this.wakePath || this.gaze ? null : this.beamLock();
     if (this.wakePath) {
-      // waking up (see wakeRead): facing you (its light comes on toward you), then out to the left, then down to
-      // the title and across it
-      const w = this.t - wp.t0;
-      b.phi = wp.phi;
-      b.steer = smooth(WAKE.left, WAKE.left + 0.5, w);
-      b.sa = w < WAKE.turn ? wp.aL : w < WAKE.read ? wp.aL + angDiff(wp.a0, wp.aL) * smooth(WAKE.turn, WAKE.read, w)
-        : wp.a0 + angDiff(wp.a1, wp.a0) * smooth(WAKE.read, WAKE.read + WAKE.dur, w);
+      // waking up (see wakeRead): its light comes on at the headline's first word and reads across to the last
+      b.steer = 1;
+      b.sa = wp.a0 + angDiff(wp.a1, wp.a0) * smooth(WAKE.read, WAKE.read + WAKE.dur, this.t - wp.t0);
     } else if (this.gaze) {
       // looking at you: the light comes round to face you and stays there a moment (the pointer can wait)
       b.phi = this.gaze.phi;
       b.steer = lerp(b.steer, 0, Math.min(1, dt * 3));
     } else {
-      const quiet = this.ptr.kind === 'touch' ? 3.2 : 5, lock = this.beamLock();
+      const quiet = this.ptr.kind === 'touch' ? 3.2 : 5;
       const steering = lock != null || (this.ptr.on && now - this.ptr.last < quiet);
       b.steer = rm ? (steering || b.steer > 0.5 ? 1 : 0) : lerp(b.steer, steering ? 1 : 0, Math.min(1, dt * (steering ? 4 : 0.7)));
       if (!rm) b.phi += dt * TAU / 15;
@@ -2148,7 +2143,7 @@ function drawEye(s, c) {
   let shut = lerp(lerp(0.2, 0.02, night), 0, wide);
   if (md.shut) shut = Math.max(shut, md.shut);
   shut = Math.max(shut, 0.5 * sq);
-  if (bl < s.blink.dur && !s.bore) shut = Math.max(shut, Math.sin(bl / s.blink.dur * Math.PI));
+  if (bl < 0.18 && !s.bore) shut = Math.max(shut, Math.sin(bl / 0.18 * Math.PI));
   if (wk < 0.6) shut = Math.max(shut, wk < 0.1 ? wk / 0.1 : wk < 0.45 ? 1 : 1 - (wk - 0.45) / 0.15);
   if (s.reduced && wk >= 0.6) shut = lerp(0.2, 0.02, night);
   shut = Math.max(shut, s.drowsy());

From b49a440b5355728c1b31cbb8e0b19daf66963186 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 17:50:21 +0100
Subject: [PATCH 26/46] docs: make the website's lighthouse strain to light its
 lamp

The lighthouse's light came on the moment its eye opened, once the bar was up.

Now its eye opens while the card's bar is still rising, and it looks at the headline with
its lamp out. It squeezes its eye shut three times, trembling, with strain marks either
side. The light flickers after the second try and comes on after the third, landing on the
headline's first word, and its hat hops. The read, the bar's sweep and the look at you
follow as before. The light comes on at about 3.4 s and the opening ends at about 10 s.

A skip while it strains brings the page in with the light on at once, and the flickers
light none of the headline's words.
---
 site/main.js  | 51 +++++++++++++++++++-------------
 site/scene.js | 81 ++++++++++++++++++++++++++++++++++++++-------------
 2 files changed, 91 insertions(+), 41 deletions(-)

diff --git a/site/main.js b/site/main.js
index 06e0b4c7..ed44386f 100644
--- a/site/main.js
+++ b/site/main.js
@@ -853,10 +853,11 @@ function measureLumens() {
 }
 function lightWords(s) {
   if (!lumRects) measureLumens();
-  // (while the lighthouse reads the headline after the opening, the words it has lit stay lit)
-  const I = s.beamI(), keep = s.readingWords();
+  // (while the lighthouse reads the headline after the opening, the words it has lit stay lit; its lamp's flickers as
+  // it wakes light none)
+  const I = s.beamI(), keep = s.readingWords(), lamp = s.lampOn() > .6;
   for (const r of lumRects) {
-    const on = r.seen && s.inBeam(r.x, r.y) * (.45 + .55 * I) > .35;
+    const on = lamp && r.seen && s.inBeam(r.x, r.y) * (.45 + .55 * I) > .35;
     if (on !== r.on && (on || !keep)) { r.on = on; r.el.classList.toggle("lit", on); }
   }
 }
@@ -981,10 +982,11 @@ function onBar(event, key, info = {}) {
 
 /* The opening: a title card over the whole drawing with the bar big in the middle of it, at night, the lighthouse
    asleep and the drawing still. After a moment the day comes, and with it the page: the card's bar stretches up into
-   its place at the top, the card drifts away and the notes come in, while the lighthouse sleeps on. As the bar reaches
-   the top it wakes up, its light coming on at the headline: it reads it, sweeps along the bar and looks at you (WAKE in
-   scene.js). On every load at the top, with motion allowed (the class and the night come from the page's head); until
-   the page has come in, a scroll, a key, a click or a tap brings it in at once, the lighthouse awake. */
+   its place at the top, the card drifts away and the notes come in. As the bar rises the lighthouse wakes up: its eye
+   opens, it strains to light its lamp, and the light comes on at the headline; it reads it, sweeps along the bar and
+   looks at you (WAKE in scene.js). On every load at the top, with motion allowed (the class and the night come from
+   the page's head); until the page has come in, a scroll, a key, a click or a tap brings it in at once, the lighthouse
+   awake. */
 let landed = !root.classList.contains("intro"), woken = landed, runTimer = 0, landTimer = 0;
 const swept = new Map();
 const opening = document.getElementById("opening"), snore = document.getElementById("snore");
@@ -1008,7 +1010,7 @@ function land(skip) {
   sendBar(); // the bar's widgets where they stand, for the sweep and the ball game
   S("labels", true);
   if (skip) { wakeUp(true); requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove("intro-skip"))); }
-  else wakeUp(); // (if the bar's arrival hasn't woken it already)
+  else wakeUp(); // (if the rise hasn't woken it already)
   setTimeout(quietSpell); // the bored lighthouse's quiet spell starts now (not before the page's script has run)
 }
 // (a click or a tap that brings it in doesn't also drop something on the landscape: see pressedInOpening)
@@ -1016,28 +1018,37 @@ function skipLanding() { land(true); }
 // nobody watching: it comes in rather than play on unseen
 function skipHidden() { if (document.hidden) land(true); }
 // the day comes, and with it the page: the bar rises into place while the sky, the sun and the moon turn and the
-// card changes with them; the drawing holds still and the lighthouse sleeps until the bar is up
+// card changes with them; the lighthouse wakes up as it goes
 function rise() {
   if (landed) return;
   if (document.hidden) return land(true);
   expandOpening();
   setMode(dayMode(), DAWN);
+  runTimer = setTimeout(wakeUp, 250);
   landTimer = setTimeout(() => land(false), DAWN * 1000 + 100);
 }
-// then it wakes up at once: the z's go, the drawing comes to life, the eye opens, and its light comes on at the
-// headline, reads it, sweeps along the bar and looks at you (WAKE in scene.js); brought in at once (now), it's simply
-// awake
+// then it wakes up: the z's go, the drawing comes to life, the eye opens, it strains to light its lamp, and its light
+// comes on at the headline, reads it, sweeps along the bar and looks at you (WAKE in scene.js); brought in at once
+// (now), it's simply awake, even halfway through
 function wakeUp(now) {
-  if (woken) return;
+  if (woken) { if (now === true) S("doze", false, true); return; }
   woken = true;
   snore.classList.add("gone");
   setTimeout(() => { root.classList.remove("asleep"); snore.remove(); }, 400);
   S("freeze", false);
-  S("doze", false);
+  S("doze", false, now === true);
   if (now === true || document.hidden) return;
-  measureLumens();
-  const seen = lumRects.filter(r => r.seen);
-  if (seen.length) S("wakeRead", seen[0].x - 10, seen[0].y, seen.at(-1).x + 10, seen.at(-1).y);
+  const ends = headlineEnds();
+  if (ends) S("wakeRead", ...ends);
+}
+// the headline's first and last words in view, where they'll stand once the notes are in (they come in from a
+// little lower: .intro .hero in style.css)
+function headlineEnds() {
+  const note = lumens[0]?.closest(".hero > *"), dy = note ? parseFloat(getComputedStyle(note).translate.split(" ")[1]) || 0 : 0;
+  const seen = lumens.map(el => el.getBoundingClientRect()).filter(r => r.bottom - dy > 0 && r.top - dy < innerHeight);
+  if (!seen.length) return null;
+  const a = seen[0], b = seen.at(-1);
+  return [a.left + a.width / 2 - 10, a.top + a.height / 2 - dy, b.left + b.width / 2 + 10, b.top + b.height / 2 - dy];
 }
 // the sleeper's z's, by its lamp wherever the drawing has put it
 let snoreAt = "";
@@ -1049,9 +1060,8 @@ function placeSnore(s) {
 }
 /* The card's bar stretches into the real one, as the day comes: a copy of it leaves the card and grows to the
    window's width as it rises to the top, shrinking to the real bar's height, its widgets sliding apart as it widens.
-   The card's words drift away, the notes come in while it rises, and at the top the real bar fades in under it, the
-   copy fades away and the lighthouse wakes. The copy is made before the day comes, so its colours change with the
-   sky's */
+   The card's words drift away, the notes come in while it rises, and at the top the real bar fades in under it and
+   the copy fades away. The copy is made before the day comes, so its colours change with the sky's */
 function expandOpening() {
   const pill = opening.querySelector(".op-bar"), a = pill.getBoundingClientRect(), b = bar.getBoundingClientRect(), k = b.height / a.height;
   const fly = pill.cloneNode(true);
@@ -1069,7 +1079,6 @@ function expandOpening() {
     if (landed) return;
     root.classList.add("op-bar-in");
     fly.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 340, fill: "forwards" });
-    wakeUp();
   }, () => {});
 }
 /* While the light sweeps the bar, each widget it passes glows for a moment */
diff --git a/site/scene.js b/site/scene.js
index ee2ed158..13b3156f 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -209,9 +209,14 @@ function label(c, text, x, y, size, col, align = 'left', rot = -0.035) {
 
 /* ---------- the scene: geometry, state, input and time ---------- */
 const IDLE_AFTER = 4000, IDLE_FPS = 14, BOIL_FPS = 7, MAX_OBJS = 36;
-// the opening's wake-up, in seconds after the eye starts to open: it opens at once (over `open`), its light coming on
-// at the headline's first word, and reads the headline from `read` for `dur`; at `end` it goes on to sweep the bar
-const WAKE = { open: 0.45, read: 0.35, dur: 1.1, end: 1.6 };
+// the opening's wake-up, in seconds after the eye starts to open (while the bar rises): it opens over `open` and looks
+// at the headline, its lamp still out, then strains to light it, squeezing its eye shut for each of `pushes` ([when,
+// how long, how hard]). The light flickers after the second (`flicks`) and comes on after the third, at `on`, on the
+// headline's first word; it reads the headline from `read` for `dur`, and at `end` goes on to sweep the bar
+const WAKE = {
+  open: 0.55, pushes: [[0.8, 0.24, 0.7], [1.2, 0.28, 0.85], [1.74, 0.36, 1]], flicks: [[1.52, 1.59], [1.64, 1.69]],
+  on: 2.1, read: 2.36, dur: 1.1, end: 3.61,
+};
 // the grass on the hill: at most this many tufts, a new one every 6 to 12 s while there are fewer
 const MEADOW_MAX = 6, SPROUT_MIN = 6, SPROUT_MAX = 12;
 
@@ -248,7 +253,7 @@ class Scene {
     // a lived-in hill: the animals already there, the grass they eat, and a sheep in a box up in the sky
     this.flocked = false; this.meadow = []; this.sproutAt = 0;
     this.held = !!this.o.held; this.sweep = null;
-    this.dozing = false; this.wokeAt = -9; this.frozen = false;
+    this.dozing = false; this.wokeAt = -9; this.waking = false; this.popped = false; this.frozen = false;
     this.box = { v: null, gx: null, gy: null, side: null, lastSide: null, la: 0, seenAt: -9, hop: -9, wob: -9, nextWob: 0, peek: -9, lit: 0, open: false, openAt: -9, blinkAt: -9, nextBlink: 0, knocks: 0, knockAt: -9, hopK: 1, out: null, burst: 0, lid: 0, sheep: null };
     this.times = [];
     this.awake = 0; this.kick = 0; this.raf = 0; this.timer = 0; this.last = null;
@@ -406,23 +411,41 @@ class Scene {
   readingWords() { return !!this.wakePath || this.sweepingBar(); }
   // sweeping the bar: the page lights the widgets it passes
   sweepingBar() { return !!this.sweep?.bar; }
-  // the opening: asleep, its eye shut and its lamp out, until the page wakes it to read the title
-  doze(on) {
+  // the opening: asleep, its eye shut and its lamp out, until the page wakes it, to strain to light its lamp and read
+  // the title (see WAKE), or at once (now): its light comes on as the eye opens. Woken at once while it strains, it
+  // gives up the show and its light comes on.
+  doze(on, now) {
     if (on) this.dozing = true;
     else if (this.dozing) {
-      this.dozing = false; this.wokeAt = this.t; this.restAt = this.t;
+      this.dozing = false; this.wokeAt = this.t; this.restAt = this.t; this.waking = !now && !this.reduced;
       this.blink.next = this.t + WAKE.end + 4; // a first blink once it's done showing off (sooner if it looks at you)
-    }
+    } else if (now && this.straining()) { this.waking = false; this.wakePath = null; }
     this.wake();
   }
-  // 1 while asleep, easing to 0 as the eye opens; the light comes on once the eye is half open
+  // 1 while asleep, easing to 0 as the eye opens
   drowsy() {
     if (this.dozing) return 1;
-    // at once, wide awake: quick at first, settling as it opens all the way
+    // quick at first, settling as it opens all the way
     const a = clamp((this.t - this.wokeAt) / WAKE.open);
     return (1 - a) * (1 - a);
   }
-  lampOn() { return 1 - smooth(0, 0.6, this.drowsy()); }
+  // still straining to light its lamp, in the opening's wake-up
+  straining() { return this.waking && this.t - this.wokeAt < WAKE.on; }
+  // how hard it squeezes its eye shut right now, straining (0 to 1)
+  squeeze() {
+    if (!this.straining() || this.reduced) return 0;
+    const a = this.t - this.wokeAt;
+    for (const [p, d, k] of WAKE.pushes) if (a >= p && a < p + d) return k * smooth(p, p + 0.06, a) * (1 - smooth(p + d - 0.07, p + d, a));
+    return 0;
+  }
+  // the lamp: out while asleep; waking up with the show, out but for its flickers until it comes on at once; else
+  // on once the eye is half open
+  lampOn() {
+    if (this.dozing) return 0;
+    const a = this.t - this.wokeAt;
+    if (this.waking) return a >= WAKE.on ? smooth(WAKE.on, WAKE.on + 0.1, a) : WAKE.flicks.some(([f0, f1]) => a >= f0 && a < f1) ? 0.22 : 0;
+    return 1 - smooth(0, 0.6, this.drowsy());
+  }
   // the opening's still night: nothing moves until the visitor does (the page draws the sleeper's z's)
   freeze(on) { this.frozen = !!on; if (!on) this.last = null; this.wake(); }
   // where the lamp is in the window, and the eye's size: the page puts the z's there
@@ -442,7 +465,7 @@ class Scene {
     return true;
   }
   play() {
-    if (this.reduced || this.ball || document.hidden) return false;
+    if (this.reduced || this.ball || document.hidden || this.straining()) return false;
     const h = hatGeom(this), pr = h.pr;
     if (!this.bar.some(t => t.y + pr < h.bob[1] - pr) || !this.seen(this.g.lamp.x, this.g.lamp.y)) return false;
     this.endBore();
@@ -644,9 +667,15 @@ class Scene {
     if (!b || !((b.phase === 'look' && this.t - b.at > 0.35) || b.phase === 'push')) return null;
     return Math.atan2(b.y - this.g.lamp.y, b.x - this.g.lamp.x);
   }
-  /* What the eye is up to: where it looks (a, m), and squint, wide, a heavier lid or a happy shut eye */
+  /* What the eye is up to: where it looks (a, m), and squint, wide, a heavier lid, a happy shut eye or a straining
+     squeeze */
   mood() {
     const L = this.g.lamp, b = this.bore;
+    if (this.straining()) {
+      // waking up: it looks at the headline, and squeezes its eye shut, straining to light its lamp
+      const k = this.squeeze(), wp = this.wakePath;
+      return { a: wp ? wp.a0 : 0, m: wp ? smooth(WAKE.open * 0.4, WAKE.open + 0.2, this.t - this.wokeAt) : 0, shut: Math.min(1, k * 1.5), strain: k };
+    }
     if (this.ball) return { a: Math.atan2(this.ball.y - L.y, this.ball.x - L.x), m: 1 };
     if (this.look && this.t < this.look.until) return { a: Math.atan2(this.look.y - L.y, this.look.x - L.x), m: 1 };
     if (!b) return null;
@@ -949,7 +978,7 @@ class Scene {
     this.box.hop = this.box.peek = -9;
     this.ripples = [];
     this.endBall(); this.endBore();
-    this.wakePath = this.gaze = null;
+    this.wakePath = this.gaze = null; this.waking = false;
     this.regrowAt = this.hatKick = -9;
     this.doodles = []; this.splashes = []; this.look = null;
   }
@@ -983,7 +1012,7 @@ class Scene {
     // reduced motion and nothing moving: the scene sleeps until the next call or input
   }
   busy() {
-    if (this.sweep || this.wakePath || this.gaze || this.t - this.wokeAt < WAKE.open + 0.2 || this.t - this.labelsAt < 0.6) return true;
+    if (this.sweep || this.wakePath || this.gaze || this.t - this.wokeAt < (this.waking ? WAKE.on : WAKE.open) + 0.2 || this.t - this.labelsAt < 0.6) return true;
     if (Math.abs(this.box.lid - (this.boxEmpty() ? 1 : 0)) > 0.01) return true;
     if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
@@ -1050,6 +1079,8 @@ class Scene {
     }
     // the eye blinks now and then
     if (!rm && this.t > this.blink.next) { this.blink.at = this.t; this.blink.next = this.t + 3 + Math.random() * 5; }
+    // its lamp lit at last, after all that straining: the hat jumps
+    if (this.waking && !this.popped && this.t - this.wokeAt >= WAKE.on) { this.popped = true; this.hatKick = this.t; }
     this.updateBeam(dt);
     this.ripples = this.ripples.filter(r => this.t - r.t0 < 2.2);
     if (!this.flocked && !this.held) this.flock();
@@ -2119,12 +2150,14 @@ function drawTower(s, c) {
 }
 
 /* the eye in the lantern: an iris the colour of the light, a pupil that follows the beam (or the ball), a lid.
-   It also squints when up to something, goes wide when caught, and shuts happily when it got away with it. */
+   It also squints when up to something, goes wide when caught, shuts happily when it got away with it, and squeezes
+   shut, trembling, when it strains to light its lamp. */
 function drawEye(s, c) {
   const g = s.g, u = g.u, P = s.P, T = g.lh, L = g.lamp, er = T.er, B = s.beam;
-  const night = smooth(0.35, 0.8, s.d), md = s.mood() || {}, wide = md.wide || 0, sq = md.squint || 0;
+  const night = smooth(0.35, 0.8, s.d), md = s.mood() || {}, wide = md.wide || 0, sq = md.squint || 0, strain = md.strain || 0;
   const rx = er * 1.32 * (1 + 0.13 * wide), ry = er * 1.08 * (1 + 0.16 * wide);
   const eye = ellipse(L.x, L.y, rx, ry, 40);
+  c.save(); c.translate(Math.sin(s.t * 97) * 1.1 * u * strain, 0);
   print(c, eye, mix(mul(hex('#FFFFFF'), P.paper), P.beam, night * 0.25));
   // where it looks: along the beam, or straight at you when the light faces you, or wherever it's busy
   let look = clamp(B.len * 1.3) * (1 - B.flash), pa = B.a;
@@ -2152,6 +2185,12 @@ function drawEye(s, c) {
     // shut, and pleased with itself: the lid line curves up
     poly(c, eye); c.fillStyle = lidCol; c.fill();
     c.beginPath(); ribbon(c, ellipse(L.x, L.y + ry * 0.38, rx * 0.72, ry * 0.62, 16, 1.18 * Math.PI, 1.82 * Math.PI), DET, 5, { tin: 3, tout: 3 }); c.fillStyle = INK; c.fill();
+  } else if (shut > 0.86 && strain > 0.5) {
+    // squeezed shut, straining: a tight, crumpled line
+    poly(c, eye); c.fillStyle = lidCol; c.fill();
+    c.beginPath();
+    ribbon(c, [[-0.88, 0.02], [-0.44, 0.13], [0, 0.03], [0.44, 0.13], [0.88, 0.02]].map(([x, y]) => [L.x + x * rx, L.y + y * ry]), DET, 5, { tin: 3, tout: 3 });
+    c.fillStyle = INK; c.fill();
   } else if (shut > 0.86) {
     poly(c, eye); c.fillStyle = lidCol; c.fill();
     c.beginPath();
@@ -2175,15 +2214,17 @@ function drawEye(s, c) {
   }
   c.restore();
   c.beginPath(); loop(c, eye, SIL * 0.85, 8); c.fillStyle = INK; c.fill();
-  // caught: a start, in a few short strokes either side
-  if (wide > 0.05) {
+  // caught: a start, in a few short strokes either side (the same strokes when it strains)
+  const marks = Math.max(wide, strain);
+  if (marks > 0.05) {
     c.beginPath();
     for (const sx of [-1, 1]) for (const k of [-0.42, 0, 0.42]) {
-      const a = (sx < 0 ? Math.PI : 0) + sx * k, r0 = rx * 1.22, r1 = r0 + er * 0.55 * wide;
+      const a = (sx < 0 ? Math.PI : 0) + sx * k, r0 = rx * 1.22, r1 = r0 + er * 0.55 * marks;
       ribbon(c, [[L.x + Math.cos(a) * r0, L.y + Math.sin(a) * r0 * 0.9], [L.x + Math.cos(a) * r1, L.y + Math.sin(a) * r1 * 0.9]], TEX * 1.1, 20 + k * 7 + sx, { tin: 1, tout: 2 });
     }
     c.fillStyle = INK; c.fill();
   }
+  c.restore();
   // the gallery's railing passes in front of the eye
   const gw = T.wT * 0.95, top = T.top - T.gal * 0.42, rail = top - T.gal * 0.62;
   c.beginPath();

From 26979d4793cbf0e3b6c6874f510eafbcb7854b01 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 18:20:38 +0100
Subject: [PATCH 27/46] docs: let the website's lighthouse light its title at
 night, then the headline

The opening now tells a longer story, as asked. At night the lighthouse wakes up on the
title card and strains to light its lamp: its light finds the StableBar title, weak and
unsteady, nearly going out now and then, and the title's words glow with it. Then the bar
rises with the day: the lighthouse blinks its weak light out and strains again, and its
light comes on for good as the headline comes in. It reads the headline, sweeps the bar
and looks at you as before.

The glow sits on the title's own words, so it adds no later paint for the browser to count
as the page's largest: the title stays the first large paint, at about 0.13 s on a phone.

The weak light lights none of the headline's words, the ball game waits for the light,
and a skip at any point brings the page in with the light on at once.
---
 site/main.js   |  71 +++++++++++++++++------------
 site/scene.js  | 120 ++++++++++++++++++++++++++++++-------------------
 site/style.css |   5 +++
 3 files changed, 121 insertions(+), 75 deletions(-)

diff --git a/site/main.js b/site/main.js
index ed44386f..7cd8db5b 100644
--- a/site/main.js
+++ b/site/main.js
@@ -853,9 +853,9 @@ function measureLumens() {
 }
 function lightWords(s) {
   if (!lumRects) measureLumens();
-  // (while the lighthouse reads the headline after the opening, the words it has lit stay lit; its lamp's flickers as
-  // it wakes light none)
-  const I = s.beamI(), keep = s.readingWords(), lamp = s.lampOn() > .6;
+  // (while the lighthouse reads the headline after the opening, the words it has lit stay lit; its weak light as it
+  // wakes lights none)
+  const I = s.beamI(), keep = s.readingWords(), lamp = s.lampOn() > .6 && s.lampPower() > .8;
   for (const r of lumRects) {
     const on = lamp && r.seen && s.inBeam(r.x, r.y) * (.45 + .55 * I) > .35;
     if (on !== r.on && (on || !keep)) { r.on = on; r.el.classList.toggle("lit", on); }
@@ -903,7 +903,7 @@ if (scene) {
     dock.dataset.sky = lum(sky) < .18 ? "dark" : "light";
   };
   scene.onFrame = s => {
-    try { if (woken) lightWords(s); else placeSnore(s); sweepGlow(s); skyStrip(s); if (lit && s.playing) hideTour(); } catch (err) {
+    try { if (woken) lightWords(s); else placeSnore(s); if (woken && !landed) glowTitle(s); sweepGlow(s); skyStrip(s); if (lit && s.playing) hideTour(); } catch (err) {
       if (!sceneFailed) { sceneFailed = true; console.warn("The drawing failed:", err); }
     }
   };
@@ -981,17 +981,18 @@ function onBar(event, key, info = {}) {
 }
 
 /* The opening: a title card over the whole drawing with the bar big in the middle of it, at night, the lighthouse
-   asleep and the drawing still. After a moment the day comes, and with it the page: the card's bar stretches up into
-   its place at the top, the card drifts away and the notes come in. As the bar rises the lighthouse wakes up: its eye
-   opens, it strains to light its lamp, and the light comes on at the headline; it reads it, sweeps along the bar and
-   looks at you (WAKE in scene.js). On every load at the top, with motion allowed (the class and the night come from
-   the page's head); until the page has come in, a scroll, a key, a click or a tap brings it in at once, the lighthouse
-   awake. */
+   asleep and the drawing still. After a moment it wakes up and strains to light its lamp, and its light finds the
+   title, weak and unsteady. Then the day comes, and with it the page: the card's bar stretches up into its place at
+   the top, the card drifts away and the notes come in, while the lighthouse blinks its light out and strains again.
+   Its light comes on for good as the headline comes in: it reads it, sweeps along the bar and looks at you (WAKE in
+   scene.js). On every load at the top, with motion allowed (the class and the night come from the page's head); until
+   the page has come in, a scroll, a key, a click or a tap brings it in at once, the lighthouse awake. */
 let landed = !root.classList.contains("intro"), woken = landed, runTimer = 0, landTimer = 0;
 const swept = new Map();
-const opening = document.getElementById("opening"), snore = document.getElementById("snore");
+const opening = document.getElementById("opening"), snore = document.getElementById("snore"), mark = opening.querySelector(".op-mark");
 const LAND_SKIP = ["wheel", "keydown", "pointerdown", "touchstart", "scroll"];
 const DAWN = 1.6; // seconds from night to day
+const WAKE_AT = 450, RISE_AFTER = 2450; // ms: asleep for a moment, then awake at night, until the day comes
 // it wakes into the day, or into the night when that's the visitor's choice on the night switch
 const dayMode = () => localStorage.getItem("mode") === "dark" ? "dark" : "light";
 // the page has come in: at the end of the sunrise, or at once with the lighthouse awake
@@ -1010,26 +1011,14 @@ function land(skip) {
   sendBar(); // the bar's widgets where they stand, for the sweep and the ball game
   S("labels", true);
   if (skip) { wakeUp(true); requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove("intro-skip"))); }
-  else wakeUp(); // (if the rise hasn't woken it already)
   setTimeout(quietSpell); // the bored lighthouse's quiet spell starts now (not before the page's script has run)
 }
 // (a click or a tap that brings it in doesn't also drop something on the landscape: see pressedInOpening)
 function skipLanding() { land(true); }
 // nobody watching: it comes in rather than play on unseen
 function skipHidden() { if (document.hidden) land(true); }
-// the day comes, and with it the page: the bar rises into place while the sky, the sun and the moon turn and the
-// card changes with them; the lighthouse wakes up as it goes
-function rise() {
-  if (landed) return;
-  if (document.hidden) return land(true);
-  expandOpening();
-  setMode(dayMode(), DAWN);
-  runTimer = setTimeout(wakeUp, 250);
-  landTimer = setTimeout(() => land(false), DAWN * 1000 + 100);
-}
-// then it wakes up: the z's go, the drawing comes to life, the eye opens, it strains to light its lamp, and its light
-// comes on at the headline, reads it, sweeps along the bar and looks at you (WAKE in scene.js); brought in at once
-// (now), it's simply awake, even halfway through
+// it wakes up: the z's go, the drawing comes to life, the eye opens and it strains to light its lamp on the title,
+// until the day comes (WAKE in scene.js); brought in at once (now), it's simply awake, even halfway through the show
 function wakeUp(now) {
   if (woken) { if (now === true) S("doze", false, true); return; }
   woken = true;
@@ -1037,9 +1026,21 @@ function wakeUp(now) {
   setTimeout(() => { root.classList.remove("asleep"); snore.remove(); }, 400);
   S("freeze", false);
   S("doze", false, now === true);
-  if (now === true || document.hidden) return;
+  if (now === true) return;
+  const r = mark.getBoundingClientRect();
+  S("lightTitle", r.left + r.width / 2, r.top + r.height / 2);
+  runTimer = setTimeout(rise, RISE_AFTER);
+}
+// then the day comes, and with it the page: the bar rises into place while the sky, the sun and the moon turn and the
+// card changes with them; the lighthouse puts its weak light out, and its light comes on for good on the headline
+function rise() {
+  if (landed) return;
+  if (document.hidden) return land(true);
   const ends = headlineEnds();
-  if (ends) S("wakeRead", ...ends);
+  expandOpening();
+  setMode(dayMode(), DAWN);
+  S("rising", ...(ends || []));
+  landTimer = setTimeout(() => land(false), DAWN * 1000 + 100);
 }
 // the headline's first and last words in view, where they'll stand once the notes are in (they come in from a
 // little lower: .intro .hero in style.css)
@@ -1050,6 +1051,20 @@ function headlineEnds() {
   const a = seen[0], b = seen.at(-1);
   return [a.left + a.width / 2 - 10, a.top + a.height / 2 - dy, b.left + b.width / 2 + 10, b.top + b.height / 2 - dy];
 }
+/* The title's glow at night: each of its words glows as brightly as the lighthouse's weak light on it (--glow, in
+   style.css; on the words themselves, so the glow is no new paint for the browser to count as the page's largest) */
+let glowWords = null;
+function glowTitle(s) {
+  const p = s.lampOn() * s.lampPower();
+  if (!glowWords) {
+    if (p <= 0) return;
+    glowWords = [...mark.children].map(el => { const r = el.getBoundingClientRect(); return { el, xs: [.2, .5, .8].map(f => r.left + r.width * f), y: r.top + r.height / 2, k: 0 }; });
+  }
+  for (const w of glowWords) {
+    const k = Math.round(Math.min(1, Math.max(...w.xs.map(x => s.inBeam(x, w.y))) * p * 1.6) * 50) / 50;
+    if (k !== w.k) { w.k = k; w.el.style.setProperty("--glow", k); }
+  }
+}
 // the sleeper's z's, by its lamp wherever the drawing has put it
 let snoreAt = "";
 function placeSnore(s) {
@@ -1099,7 +1114,7 @@ if (!landed) {
     S("labels", false);
     S("doze", true); // asleep, its eye shut and its lamp out,
     S("freeze", true); // and the whole drawing still,
-    runTimer = setTimeout(rise, 800); // for a moment
+    runTimer = setTimeout(wakeUp, WAKE_AT); // for a moment
   }
 } else { opening.remove(); snore.remove(); }
 
diff --git a/site/scene.js b/site/scene.js
index 13b3156f..6f3117cb 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -209,13 +209,14 @@ function label(c, text, x, y, size, col, align = 'left', rot = -0.035) {
 
 /* ---------- the scene: geometry, state, input and time ---------- */
 const IDLE_AFTER = 4000, IDLE_FPS = 14, BOIL_FPS = 7, MAX_OBJS = 36;
-// the opening's wake-up, in seconds after the eye starts to open (while the bar rises): it opens over `open` and looks
-// at the headline, its lamp still out, then strains to light it, squeezing its eye shut for each of `pushes` ([when,
-// how long, how hard]). The light flickers after the second (`flicks`) and comes on after the third, at `on`, on the
-// headline's first word; it reads the headline from `read` for `dur`, and at `end` goes on to sweep the bar
+// the opening's wake-up, in seconds. At night, from when its eye starts to open: it opens over `open`, then strains to
+// light its lamp, squeezing its eye shut for each of `pushes` ([when, how long, how hard]), and from `dim` its light
+// finds the title, weak and unsteady (nearly out in each of `dips`, counted from `dim`). When the day comes (from the
+// page's rising): it blinks its light out over `out`, strains again (`again`), and its light comes on for good at
+// `on`, on the headline's first word; it reads the headline from `read` for `dur`, and at `end` it sweeps the bar
 const WAKE = {
-  open: 0.55, pushes: [[0.8, 0.24, 0.7], [1.2, 0.28, 0.85], [1.74, 0.36, 1]], flicks: [[1.52, 1.59], [1.64, 1.69]],
-  on: 2.1, read: 2.36, dur: 1.1, end: 3.61,
+  open: 0.5, pushes: [[0.7, 0.26, 0.75], [1.08, 0.32, 0.9]], dim: 1.44, dips: [[0.22, 0.27], [0.52, 0.58], [0.63, 0.67], [0.88, 0.93]],
+  out: 0.14, again: [[0.24, 0.28, 0.85], [0.62, 0.36, 1]], on: 0.98, read: 1.22, dur: 1.1, end: 2.45,
 };
 // the grass on the hill: at most this many tufts, a new one every 6 to 12 s while there are fewer
 const MEADOW_MAX = 6, SPROUT_MIN = 6, SPROUT_MAX = 12;
@@ -253,7 +254,7 @@ class Scene {
     // a lived-in hill: the animals already there, the grass they eat, and a sheep in a box up in the sky
     this.flocked = false; this.meadow = []; this.sproutAt = 0;
     this.held = !!this.o.held; this.sweep = null;
-    this.dozing = false; this.wokeAt = -9; this.waking = false; this.popped = false; this.frozen = false;
+    this.dozing = false; this.wokeAt = -9; this.waking = false; this.titleAim = this.riseAt = null; this.popped = false; this.frozen = false;
     this.box = { v: null, gx: null, gy: null, side: null, lastSide: null, la: 0, seenAt: -9, hop: -9, wob: -9, nextWob: 0, peek: -9, lit: 0, open: false, openAt: -9, blinkAt: -9, nextBlink: 0, knocks: 0, knockAt: -9, hopK: 1, out: null, burst: 0, lid: 0, sheep: null };
     this.times = [];
     this.awake = 0; this.kick = 0; this.raf = 0; this.timer = 0; this.last = null;
@@ -398,12 +399,22 @@ class Scene {
   }
   // the landing: until the camera has come down, the flock and the grass wait (they're placed where they're seen)
   hold(on) { this.held = !!on; if (!on) this.measure(); this.wake(); }
-  // the opening's wake-up (see WAKE): as the eye opens, its light comes on at the headline, from one point to another
-  // (viewport coordinates), and reads it; then it sweeps the bar and looks at you
-  wakeRead(x0, y0, x1, y1) {
-    if (this.reduced || document.hidden) return false;
+  // the opening's wake-up (see WAKE), at night: the title its weak light finds (a point, in viewport coordinates)
+  lightTitle(x, y) {
+    if (!this.showing()) return false;
+    const L = this.g.lamp;
+    this.titleAim = Math.atan2(y - this.oy - L.y, x - this.ox - L.x);
+    this.wake();
+    return true;
+  }
+  // then the day comes: it blinks its light out and strains again, and its light comes on for good on the headline,
+  // from one point to the other, and reads it; then it sweeps the bar and looks at you (with no headline, it only
+  // lights up)
+  rising(x0, y0, x1, y1) {
+    if (!this.showing() || this.riseAt != null) return false;
     const L = this.g.lamp, at = (x, y) => Math.atan2(y - this.oy - L.y, x - this.ox - L.x);
-    this.wakePath = { t0: this.t, a0: at(x0, y0), a1: at(x1, y1) };
+    this.riseAt = this.blink.at = this.t;
+    this.wakePath = x0 == null ? null : { t0: this.t, a0: at(x0, y0), a1: at(x1, y1) };
     this.wake();
     return true;
   }
@@ -411,15 +422,15 @@ class Scene {
   readingWords() { return !!this.wakePath || this.sweepingBar(); }
   // sweeping the bar: the page lights the widgets it passes
   sweepingBar() { return !!this.sweep?.bar; }
-  // the opening: asleep, its eye shut and its lamp out, until the page wakes it, to strain to light its lamp and read
-  // the title (see WAKE), or at once (now): its light comes on as the eye opens. Woken at once while it strains, it
-  // gives up the show and its light comes on.
+  // the opening: asleep, its eye shut and its lamp out, until the page wakes it for the show (see WAKE), or at once
+  // (now), its light coming on as the eye opens. Woken at once during the show, it gives it up and its light comes on.
   doze(on, now) {
     if (on) this.dozing = true;
     else if (this.dozing) {
       this.dozing = false; this.wokeAt = this.t; this.restAt = this.t; this.waking = !now && !this.reduced;
-      this.blink.next = this.t + WAKE.end + 4; // a first blink once it's done showing off (sooner if it looks at you)
-    } else if (now && this.straining()) { this.waking = false; this.wakePath = null; }
+      this.titleAim = this.riseAt = null; this.popped = false;
+      this.blink.next = this.t + (this.waking ? 12 : 4); // its own blinks once it's done (sooner if it looks at you)
+    } else if (now && this.showing()) { this.waking = false; this.wakePath = null; this.blink.next = this.t + 2; }
     this.wake();
   }
   // 1 while asleep, easing to 0 as the eye opens
@@ -429,22 +440,30 @@ class Scene {
     const a = clamp((this.t - this.wokeAt) / WAKE.open);
     return (1 - a) * (1 - a);
   }
-  // still straining to light its lamp, in the opening's wake-up
-  straining() { return this.waking && this.t - this.wokeAt < WAKE.on; }
-  // how hard it squeezes its eye shut right now, straining (0 to 1)
+  // the opening's show is on: from waking up until its light comes on for good
+  showing() { return this.waking && !(this.riseAt != null && this.t - this.riseAt >= WAKE.on); }
+  // how hard it squeezes its eye shut right now, straining to light its lamp (0 to 1)
   squeeze() {
-    if (!this.straining() || this.reduced) return 0;
-    const a = this.t - this.wokeAt;
-    for (const [p, d, k] of WAKE.pushes) if (a >= p && a < p + d) return k * smooth(p, p + 0.06, a) * (1 - smooth(p + d - 0.07, p + d, a));
+    if (!this.showing() || this.reduced) return 0;
+    const night = this.riseAt == null, a = this.t - (night ? this.wokeAt : this.riseAt);
+    for (const [p, d, k] of night ? WAKE.pushes : WAKE.again) if (a >= p && a < p + d) return k * smooth(p, p + 0.06, a) * (1 - smooth(p + d - 0.07, p + d, a));
     return 0;
   }
-  // the lamp: out while asleep; waking up with the show, out but for its flickers until it comes on at once; else
-  // on once the eye is half open
+  // how far its light reaches (0 to 1): out while asleep; in the show, from `dim` at night until the day's `out`, then
+  // from `on`; else on once the eye is half open
   lampOn() {
     if (this.dozing) return 0;
-    const a = this.t - this.wokeAt;
-    if (this.waking) return a >= WAKE.on ? smooth(WAKE.on, WAKE.on + 0.1, a) : WAKE.flicks.some(([f0, f1]) => a >= f0 && a < f1) ? 0.22 : 0;
-    return 1 - smooth(0, 0.6, this.drowsy());
+    if (!this.waking) return 1 - smooth(0, 0.6, this.drowsy());
+    const dim = smooth(WAKE.dim, WAKE.dim + 0.15, this.t - this.wokeAt), b = this.t - this.riseAt;
+    return this.riseAt == null ? dim : b < WAKE.out ? dim : smooth(WAKE.on, WAKE.on + 0.12, b);
+  }
+  // how bright its light is (0 to 1): in the show, at night, weak and unsteady, nearly out now and then, and going out
+  // as the day comes; else full
+  lampPower() {
+    if (!this.waking || (this.riseAt != null && this.t - this.riseAt >= WAKE.on)) return 1;
+    const f = this.t - this.wokeAt - WAKE.dim;
+    const weak = WAKE.dips.some(([d0, d1]) => f >= d0 && f < d1) ? 0.1 : 0.5 + 0.1 * Math.sin(f * 31) * Math.sin(f * 13 + 1);
+    return this.riseAt == null ? weak : weak * (1 - smooth(0, WAKE.out, this.t - this.riseAt));
   }
   // the opening's still night: nothing moves until the visitor does (the page draws the sleeper's z's)
   freeze(on) { this.frozen = !!on; if (!on) this.last = null; this.wake(); }
@@ -465,7 +484,7 @@ class Scene {
     return true;
   }
   play() {
-    if (this.reduced || this.ball || document.hidden || this.straining()) return false;
+    if (this.reduced || this.ball || document.hidden || this.showing()) return false;
     const h = hatGeom(this), pr = h.pr;
     if (!this.bar.some(t => t.y + pr < h.bob[1] - pr) || !this.seen(this.g.lamp.x, this.g.lamp.y)) return false;
     this.endBore();
@@ -671,10 +690,11 @@ class Scene {
      squeeze */
   mood() {
     const L = this.g.lamp, b = this.bore;
-    if (this.straining()) {
-      // waking up: it looks at the headline, and squeezes its eye shut, straining to light its lamp
-      const k = this.squeeze(), wp = this.wakePath;
-      return { a: wp ? wp.a0 : 0, m: wp ? smooth(WAKE.open * 0.4, WAKE.open + 0.2, this.t - this.wokeAt) : 0, shut: Math.min(1, k * 1.5), strain: k };
+    if (this.showing()) {
+      // waking up: it looks at what it means to light (the title, then the headline), and squeezes its eye shut,
+      // straining to light its lamp
+      const k = this.squeeze(), aim = this.wakePath ? this.wakePath.a0 : this.titleAim;
+      return { a: aim ?? 0, m: aim == null ? 0 : smooth(WAKE.open * 0.4, WAKE.open + 0.2, this.t - this.wokeAt), shut: Math.min(1, k * 1.5), strain: k };
     }
     if (this.ball) return { a: Math.atan2(this.ball.y - L.y, this.ball.x - L.x), m: 1 };
     if (this.look && this.t < this.look.until) return { a: Math.atan2(this.look.y - L.y, this.look.x - L.x), m: 1 };
@@ -1012,7 +1032,7 @@ class Scene {
     // reduced motion and nothing moving: the scene sleeps until the next call or input
   }
   busy() {
-    if (this.sweep || this.wakePath || this.gaze || this.t - this.wokeAt < (this.waking ? WAKE.on : WAKE.open) + 0.2 || this.t - this.labelsAt < 0.6) return true;
+    if (this.sweep || this.wakePath || this.gaze || this.showing() || this.t - this.wokeAt < WAKE.open + 0.2 || this.t - this.labelsAt < 0.6) return true;
     if (Math.abs(this.box.lid - (this.boxEmpty() ? 1 : 0)) > 0.01) return true;
     if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
@@ -1079,8 +1099,8 @@ class Scene {
     }
     // the eye blinks now and then
     if (!rm && this.t > this.blink.next) { this.blink.at = this.t; this.blink.next = this.t + 3 + Math.random() * 5; }
-    // its lamp lit at last, after all that straining: the hat jumps
-    if (this.waking && !this.popped && this.t - this.wokeAt >= WAKE.on) { this.popped = true; this.hatKick = this.t; }
+    // its lamp lit for good, after all that straining: the hat jumps
+    if (this.waking && !this.popped && this.riseAt != null && this.t - this.riseAt >= WAKE.on) { this.popped = true; this.hatKick = this.t; }
     this.updateBeam(dt);
     this.ripples = this.ripples.filter(r => this.t - r.t0 < 2.2);
     if (!this.flocked && !this.held) this.flock();
@@ -1102,11 +1122,17 @@ class Scene {
     if (this.gaze && (this.ball || this.sweep || this.wakePath || this.t > this.gaze.until)) { this.gaze = null; this.restAt = this.t; }
     // (asked first: when the sweep ends here, the look at you starts this very frame, before the pointer can pull
     // the light)
-    const lock = this.wakePath || this.gaze ? null : this.beamLock();
+    const lock = this.wakePath || this.gaze || this.showing() ? null : this.beamLock();
     if (this.wakePath) {
-      // waking up (see wakeRead): its light comes on at the headline's first word and reads across to the last
+      // the day comes (see rising): its weak light goes out on the title, and its light for good comes on at the
+      // headline's first word and reads across to the last
+      const w = this.t - wp.t0;
+      b.steer = 1;
+      if (w >= WAKE.out) b.sa = wp.a0 + angDiff(wp.a1, wp.a0) * smooth(WAKE.read, WAKE.read + WAKE.dur, w);
+    } else if (this.showing()) {
+      // at night (see lightTitle): its weak light on the title, a little unsteady
       b.steer = 1;
-      b.sa = wp.a0 + angDiff(wp.a1, wp.a0) * smooth(WAKE.read, WAKE.read + WAKE.dur, this.t - wp.t0);
+      if (this.titleAim != null) b.sa = this.titleAim + (rm ? 0 : 0.025 * Math.sin(this.t * 2.1));
     } else if (this.gaze) {
       // looking at you: the light comes round to face you and stays there a moment (the pointer can wait)
       b.phi = this.gaze.phi;
@@ -1950,31 +1976,31 @@ function drawWaves(s, c) {
   }
 }
 
-/* the light: a flat yellow fan with felt-pen edges, brighter at night */
+/* the light: a flat yellow fan with felt-pen edges, brighter at night (fainter, pen and all, while it's weak) */
 function beamPoly(s) {
   const L = s.g.lamp, B = s.beam, len = B.len * s.diag * 1.05, hw = s.g.beamHalf;
   return { L, len, a0: B.a - hw, a1: B.a + hw };
 }
 function drawBeam(s, c) {
-  const g = s.g, u = g.u, P = s.P, I = s.beamI(), { L, len, a0, a1 } = beamPoly(s);
-  if (len < 10) return;
+  const g = s.g, u = g.u, P = s.P, I = s.beamI(), pw = s.lampPower(), { L, len, a0, a1 } = beamPoly(s);
+  if (len < 10 || pw < 0.02) return;
   const night = smooth(0.3, 0.8, s.d);
   const e0 = [L.x + Math.cos(a0) * len, L.y + Math.sin(a0) * len], e1 = [L.x + Math.cos(a1) * len, L.y + Math.sin(a1) * len];
   const fan = [[L.x, L.y], e0];
   for (let i = 1; i < 12; i++) { const a = lerp(a0, a1, i / 12); fan.push([L.x + Math.cos(a) * len, L.y + Math.sin(a) * len]); }
   fan.push(e1);
   const col = mix(P.beam, hex('#FFF6C2'), night * 0.45);
-  poly(c, fan); c.fillStyle = rgba(col, 0.84 + 0.12 * night * I); c.fill();
+  poly(c, fan); c.fillStyle = rgba(col, (0.84 + 0.12 * night * I) * pw); c.fill();
   // the scallops it crosses light up
   c.save(); poly(c, fan); c.clip();
-  c.strokeStyle = rgba(mix(col, hex('#FFFFFF'), 0.5), 0.95); waveScallops(s, c, true);
+  c.strokeStyle = rgba(mix(col, hex('#FFFFFF'), 0.5), 0.95 * pw); waveScallops(s, c, true);
   c.restore();
   // the pen goes along both edges, from just outside the eye
   const r0 = g.lh.er * 2.3;
   c.beginPath();
   for (const [a, sd] of [[a0, 13], [a1, 17]]) ribbon(c, dens([[L.x + Math.cos(a) * r0, L.y + Math.sin(a) * r0], [L.x + Math.cos(a) * len, L.y + Math.sin(a) * len]], 9), DET * 0.95, sd, { tin: 20, tout: 1, w0: 0.2, w1: 1 });
   if (s.beam.len < 0.85) ribbon(c, dens(fan.slice(1), 6), DET * 0.9, 19, { tin: 3, tout: 3 });
-  c.fillStyle = INK; c.fill();
+  c.globalAlpha = 0.3 + 0.7 * pw; c.fillStyle = INK; c.fill(); c.globalAlpha = 1;
 }
 
 /* where the light lands on the hill: a flat, lighter print on the grass */
@@ -1985,14 +2011,14 @@ function drawHillLight(s, c) {
   c.save(); poly(c, s.g.hillClip); c.clip();
   c.beginPath(); c.moveTo(L.x, L.y);
   for (let i = 0; i <= 12; i++) { const a = lerp(a0, a1, i / 12); c.lineTo(L.x + Math.cos(a) * len, L.y + Math.sin(a) * len); }
-  c.closePath(); c.fillStyle = rgba(mix(s.P.hill, s.P.beam, 0.5 + 0.2 * night)); c.fill();
+  c.closePath(); c.fillStyle = rgba(mix(s.P.hill, s.P.beam, (0.5 + 0.2 * night) * s.lampPower())); c.fill();
   c.restore();
 }
 
 /* the lamp's halo at night: hand-drawn rings and short rays, no blur */
 function drawHalo(s, c) {
   const g = s.g, u = g.u, P = s.P, L = g.lamp, er = g.lh.er;
-  const night = smooth(0.35, 0.85, s.d), f = s.beam.flash, k = Math.max(night * s.beamI(), f * 0.9) * s.lampOn();
+  const night = smooth(0.35, 0.85, s.d), f = s.beam.flash, k = Math.max(night * s.beamI(), f * 0.9) * s.lampOn() * s.lampPower();
   if (k < 0.02) return;
   const r1 = er * (2.1 + f * 0.6), r2 = er * (3 + f * 1.4);
   // the lit lantern: a flat disc of light just around the eye
diff --git a/site/style.css b/site/style.css
index 13ec52c8..14324202 100644
--- a/site/style.css
+++ b/site/style.css
@@ -118,6 +118,11 @@ h1, h2, h3 { text-wrap: balance; }
   color: #fff; rotate: -1.5deg; -webkit-text-stroke: .045em var(--pen); paint-order: stroke fill; text-shadow: 0 .045em 0 #1111111f;
 }
 .op-mark { position: relative; isolation: isolate; }
+/* its words glow in the lighthouse's weak light at night (main.js sets --glow) */
+.op-mark > span {
+  text-shadow: 0 .045em 0 #1111111f, 0 0 10px rgb(255 224 74 / var(--glow, 0)), 0 0 24px rgb(255 224 74 / calc(var(--glow, 0) * .9)),
+    0 0 46px rgb(255 212 59 / calc(var(--glow, 0) * .65));
+}
 .op-bar {
   display: flex; align-items: center; gap: 8px; width: min(780px, 100%); padding: 7px 8px; border-radius: 22px;
   background: color-mix(in srgb, #ffffff 36%, transparent); box-shadow: inset 0 0 0 1px #ffffffb3, 0 20px 44px -20px #0b1d4a73;

From ce781d18e96da14297e58ee2eaa9476860de01db Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 18:45:34 +0100
Subject: [PATCH 28/46] docs: light the website's bar at night in the opening,
 not its title

The opening's weak light at night now shows off the bar, the site's subject, rather than the
StableBar title. It comes on at the left end of the card's bar and crosses it to the right,
each widget glowing as it passes, and it stops at the bar as if the bar caught it. The
lighthouse also sleeps a little longer before it opens its eye: about 1.3 s instead of 0.7 s.

The rest is as before: as the day comes it blinks the light out, strains again and lights the
headline, then the bar along the top, then looks at you; the opening is over at about 12 s.
The widgets' glow adds no later candidate for the page's largest paint.
---
 site/main.js   | 45 ++++++++++++++++++++++++--------------------
 site/scene.js  | 51 +++++++++++++++++++++++++++++++++-----------------
 site/style.css | 12 +++++++-----
 3 files changed, 66 insertions(+), 42 deletions(-)

diff --git a/site/main.js b/site/main.js
index 7cd8db5b..697a4db1 100644
--- a/site/main.js
+++ b/site/main.js
@@ -903,7 +903,7 @@ if (scene) {
     dock.dataset.sky = lum(sky) < .18 ? "dark" : "light";
   };
   scene.onFrame = s => {
-    try { if (woken) lightWords(s); else placeSnore(s); if (woken && !landed) glowTitle(s); sweepGlow(s); skyStrip(s); if (lit && s.playing) hideTour(); } catch (err) {
+    try { if (woken) lightWords(s); else placeSnore(s); if (woken && !rose) glowBar(s); sweepGlow(s); skyStrip(s); if (lit && s.playing) hideTour(); } catch (err) {
       if (!sceneFailed) { sceneFailed = true; console.warn("The drawing failed:", err); }
     }
   };
@@ -981,18 +981,19 @@ function onBar(event, key, info = {}) {
 }
 
 /* The opening: a title card over the whole drawing with the bar big in the middle of it, at night, the lighthouse
-   asleep and the drawing still. After a moment it wakes up and strains to light its lamp, and its light finds the
-   title, weak and unsteady. Then the day comes, and with it the page: the card's bar stretches up into its place at
-   the top, the card drifts away and the notes come in, while the lighthouse blinks its light out and strains again.
+   asleep and the drawing still. After a while it wakes up and strains to light its lamp, and its light finds the
+   card's bar, weak and unsteady, and crosses it. Then the day comes, and with it the page: the card's bar stretches up
+   into its place at the top, the card drifts away and the notes come in, while the lighthouse blinks its light out
+   and strains again.
    Its light comes on for good as the headline comes in: it reads it, sweeps along the bar and looks at you (WAKE in
    scene.js). On every load at the top, with motion allowed (the class and the night come from the page's head); until
    the page has come in, a scroll, a key, a click or a tap brings it in at once, the lighthouse awake. */
-let landed = !root.classList.contains("intro"), woken = landed, runTimer = 0, landTimer = 0;
+let landed = !root.classList.contains("intro"), woken = landed, rose = landed, runTimer = 0, landTimer = 0;
 const swept = new Map();
-const opening = document.getElementById("opening"), snore = document.getElementById("snore"), mark = opening.querySelector(".op-mark");
+const opening = document.getElementById("opening"), snore = document.getElementById("snore");
 const LAND_SKIP = ["wheel", "keydown", "pointerdown", "touchstart", "scroll"];
 const DAWN = 1.6; // seconds from night to day
-const WAKE_AT = 450, RISE_AFTER = 2450; // ms: asleep for a moment, then awake at night, until the day comes
+const WAKE_AT = 1100, RISE_AFTER = 2750; // ms: asleep for a while, then awake at night, until the day comes
 // it wakes into the day, or into the night when that's the visitor's choice on the night switch
 const dayMode = () => localStorage.getItem("mode") === "dark" ? "dark" : "light";
 // the page has come in: at the end of the sunrise, or at once with the lighthouse awake
@@ -1017,8 +1018,9 @@ function land(skip) {
 function skipLanding() { land(true); }
 // nobody watching: it comes in rather than play on unseen
 function skipHidden() { if (document.hidden) land(true); }
-// it wakes up: the z's go, the drawing comes to life, the eye opens and it strains to light its lamp on the title,
-// until the day comes (WAKE in scene.js); brought in at once (now), it's simply awake, even halfway through the show
+// it wakes up: the z's go, the drawing comes to life, the eye opens and it strains to light its lamp on the card's
+// bar, until the day comes (WAKE in scene.js); brought in at once (now), it's simply awake, even halfway through the
+// show
 function wakeUp(now) {
   if (woken) { if (now === true) S("doze", false, true); return; }
   woken = true;
@@ -1027,8 +1029,8 @@ function wakeUp(now) {
   S("freeze", false);
   S("doze", false, now === true);
   if (now === true) return;
-  const r = mark.getBoundingClientRect();
-  S("lightTitle", r.left + r.width / 2, r.top + r.height / 2);
+  const tiles = [...opening.querySelectorAll(".op-bar .w")].map(el => el.getBoundingClientRect()).filter(r => r.width), a = tiles[0], b = tiles.at(-1);
+  if (a) S("lightBar", a.left + a.width / 2, a.top + a.height / 2, b.left + b.width / 2, b.top + b.height / 2);
   runTimer = setTimeout(rise, RISE_AFTER);
 }
 // then the day comes, and with it the page: the bar rises into place while the sky, the sun and the moon turn and the
@@ -1037,6 +1039,8 @@ function rise() {
   if (landed) return;
   if (document.hidden) return land(true);
   const ends = headlineEnds();
+  rose = true;
+  for (const t of glowTiles || []) t.el.style.removeProperty("--glow"); // (its weak light goes out: see glowBar)
   expandOpening();
   setMode(dayMode(), DAWN);
   S("rising", ...(ends || []));
@@ -1051,18 +1055,19 @@ function headlineEnds() {
   const a = seen[0], b = seen.at(-1);
   return [a.left + a.width / 2 - 10, a.top + a.height / 2 - dy, b.left + b.width / 2 + 10, b.top + b.height / 2 - dy];
 }
-/* The title's glow at night: each of its words glows as brightly as the lighthouse's weak light on it (--glow, in
-   style.css; on the words themselves, so the glow is no new paint for the browser to count as the page's largest) */
-let glowWords = null;
-function glowTitle(s) {
+/* The card's bar at night: each of its widgets glows as brightly as the lighthouse's weak light on it, fading just
+   after the light has passed (--glow, in style.css) */
+let glowTiles = null;
+function glowBar(s) {
   const p = s.lampOn() * s.lampPower();
-  if (!glowWords) {
+  if (!glowTiles) {
     if (p <= 0) return;
-    glowWords = [...mark.children].map(el => { const r = el.getBoundingClientRect(); return { el, xs: [.2, .5, .8].map(f => r.left + r.width * f), y: r.top + r.height / 2, k: 0 }; });
+    glowTiles = [...opening.querySelectorAll(".op-bar .w")].map(el => { const r = el.getBoundingClientRect(); return { el, x: r.left + r.width / 2, y: r.top + r.height / 2, trail: 0, k: 0 }; });
   }
-  for (const w of glowWords) {
-    const k = Math.round(Math.min(1, Math.max(...w.xs.map(x => s.inBeam(x, w.y))) * p * 1.6) * 50) / 50;
-    if (k !== w.k) { w.k = k; w.el.style.setProperty("--glow", k); }
+  for (const t of glowTiles) {
+    t.trail = Math.max(s.inBeam(t.x, t.y), t.trail * .9);
+    const k = Math.round(Math.min(1, t.trail * p * 1.6) * 50) / 50;
+    if (k !== t.k) { t.k = k; t.el.style.setProperty("--glow", k); }
   }
 }
 // the sleeper's z's, by its lamp wherever the drawing has put it
diff --git a/site/scene.js b/site/scene.js
index 6f3117cb..8982325d 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -211,11 +211,13 @@ function label(c, text, x, y, size, col, align = 'left', rot = -0.035) {
 const IDLE_AFTER = 4000, IDLE_FPS = 14, BOIL_FPS = 7, MAX_OBJS = 36;
 // the opening's wake-up, in seconds. At night, from when its eye starts to open: it opens over `open`, then strains to
 // light its lamp, squeezing its eye shut for each of `pushes` ([when, how long, how hard]), and from `dim` its light
-// finds the title, weak and unsteady (nearly out in each of `dips`, counted from `dim`). When the day comes (from the
-// page's rising): it blinks its light out over `out`, strains again (`again`), and its light comes on for good at
-// `on`, on the headline's first word; it reads the headline from `read` for `dur`, and at `end` it sweeps the bar
+// finds the card's bar, weak and unsteady (nearly out in each of `dips`), and crosses it (`scan`: [when, how long]; both
+// counted from `dim`). When the day comes (from the page's rising): it blinks its light out over `out`, strains again
+// (`again`), and its light comes on for good at `on`, on the headline's first word; it reads the headline from `read`
+// for `dur`, and at `end` it sweeps the bar
 const WAKE = {
-  open: 0.5, pushes: [[0.7, 0.26, 0.75], [1.08, 0.32, 0.9]], dim: 1.44, dips: [[0.22, 0.27], [0.52, 0.58], [0.63, 0.67], [0.88, 0.93]],
+  open: 0.5, pushes: [[0.7, 0.26, 0.75], [1.08, 0.32, 0.9]], dim: 1.44, scan: [0.25, 0.9],
+  dips: [[0.22, 0.27], [0.52, 0.58], [0.63, 0.67], [0.88, 0.93], [1.14, 1.19]],
   out: 0.14, again: [[0.24, 0.28, 0.85], [0.62, 0.36, 1]], on: 0.98, read: 1.22, dur: 1.1, end: 2.45,
 };
 // the grass on the hill: at most this many tufts, a new one every 6 to 12 s while there are fewer
@@ -254,7 +256,7 @@ class Scene {
     // a lived-in hill: the animals already there, the grass they eat, and a sheep in a box up in the sky
     this.flocked = false; this.meadow = []; this.sproutAt = 0;
     this.held = !!this.o.held; this.sweep = null;
-    this.dozing = false; this.wokeAt = -9; this.waking = false; this.titleAim = this.riseAt = null; this.popped = false; this.frozen = false;
+    this.dozing = false; this.wokeAt = -9; this.waking = false; this.nightPath = this.riseAt = null; this.popped = false; this.frozen = false;
     this.box = { v: null, gx: null, gy: null, side: null, lastSide: null, la: 0, seenAt: -9, hop: -9, wob: -9, nextWob: 0, peek: -9, lit: 0, open: false, openAt: -9, blinkAt: -9, nextBlink: 0, knocks: 0, knockAt: -9, hopK: 1, out: null, burst: 0, lid: 0, sheep: null };
     this.times = [];
     this.awake = 0; this.kick = 0; this.raf = 0; this.timer = 0; this.last = null;
@@ -399,14 +401,27 @@ class Scene {
   }
   // the landing: until the camera has come down, the flock and the grass wait (they're placed where they're seen)
   hold(on) { this.held = !!on; if (!on) this.measure(); this.wake(); }
-  // the opening's wake-up (see WAKE), at night: the title its weak light finds (a point, in viewport coordinates)
-  lightTitle(x, y) {
+  // the opening's wake-up (see WAKE), at night: the card's bar its weak light finds and crosses, from one end to the
+  // other (viewport coordinates)
+  lightBar(x0, y0, x1, y1) {
     if (!this.showing()) return false;
-    const L = this.g.lamp;
-    this.titleAim = Math.atan2(y - this.oy - L.y, x - this.ox - L.x);
+    const L = this.g.lamp, at = (x, y) => Math.atan2(y - this.oy - L.y, x - this.ox - L.x);
+    this.nightPath = { a0: at(x0, y0), a1: at(x1, y1), p0: [x0 - this.ox, y0 - this.oy], p1: [x1 - this.ox, y1 - this.oy] };
     this.wake();
     return true;
   }
+  // how far across the card's bar its weak light has come (0 to 1)
+  scanK() { const s0 = WAKE.dim + WAKE.scan[0]; return smooth(s0, s0 + WAKE.scan[1], this.t - this.wokeAt); }
+  // how far its light reaches, as part of its full length: at night, in the show, only just past the card's bar,
+  // as if the bar caught it; else all the way
+  reach() {
+    const np = this.nightPath;
+    if (!np || !this.showing() || (this.riseAt != null && this.t - this.riseAt >= WAKE.out)) return 1;
+    // where the light meets the bar's line, along where it points now
+    const L = this.g.lamp, [x0, y0] = np.p0, vx = np.p1[0] - x0, vy = np.p1[1] - y0, ux = Math.cos(this.beam.a), uy = Math.sin(this.beam.a);
+    const den = ux * vy - uy * vx, d = Math.abs(den) < 1e-6 ? Math.hypot(x0 - L.x, y0 - L.y) : ((x0 - L.x) * vy - (y0 - L.y) * vx) / den;
+    return clamp((Math.max(0, d) + 50 * this.g.u) / (this.diag * 1.05));
+  }
   // then the day comes: it blinks its light out and strains again, and its light comes on for good on the headline,
   // from one point to the other, and reads it; then it sweeps the bar and looks at you (with no headline, it only
   // lights up)
@@ -428,7 +443,7 @@ class Scene {
     if (on) this.dozing = true;
     else if (this.dozing) {
       this.dozing = false; this.wokeAt = this.t; this.restAt = this.t; this.waking = !now && !this.reduced;
-      this.titleAim = this.riseAt = null; this.popped = false;
+      this.nightPath = this.riseAt = null; this.popped = false;
       this.blink.next = this.t + (this.waking ? 12 : 4); // its own blinks once it's done (sooner if it looks at you)
     } else if (now && this.showing()) { this.waking = false; this.wakePath = null; this.blink.next = this.t + 2; }
     this.wake();
@@ -691,10 +706,11 @@ class Scene {
   mood() {
     const L = this.g.lamp, b = this.bore;
     if (this.showing()) {
-      // waking up: it looks at what it means to light (the title, then the headline), and squeezes its eye shut,
-      // straining to light its lamp
-      const k = this.squeeze(), aim = this.wakePath ? this.wakePath.a0 : this.titleAim;
-      return { a: aim ?? 0, m: aim == null ? 0 : smooth(WAKE.open * 0.4, WAKE.open + 0.2, this.t - this.wokeAt), shut: Math.min(1, k * 1.5), strain: k };
+      // waking up: it squeezes its eye shut, straining to light its lamp, and looks where the light is to go (the
+      // card's bar, then the headline), or along it once it's on
+      const k = this.squeeze(), aim = this.wakePath ? this.wakePath.a0 : this.nightPath?.a0, md = { shut: Math.min(1, k * 1.5), strain: k };
+      if (this.lampOn() > 0.05) return { ...md, a: this.beam.a, m: 1 };
+      return aim == null ? md : { ...md, a: aim, m: smooth(WAKE.open * 0.4, WAKE.open + 0.2, this.t - this.wokeAt) };
     }
     if (this.ball) return { a: Math.atan2(this.ball.y - L.y, this.ball.x - L.x), m: 1 };
     if (this.look && this.t < this.look.until) return { a: Math.atan2(this.look.y - L.y, this.look.x - L.x), m: 1 };
@@ -1130,9 +1146,10 @@ class Scene {
       b.steer = 1;
       if (w >= WAKE.out) b.sa = wp.a0 + angDiff(wp.a1, wp.a0) * smooth(WAKE.read, WAKE.read + WAKE.dur, w);
     } else if (this.showing()) {
-      // at night (see lightTitle): its weak light on the title, a little unsteady
+      // at night (see lightBar): its weak light comes on at one end of the card's bar and crosses it, a little unsteady
+      const np = this.nightPath;
       b.steer = 1;
-      if (this.titleAim != null) b.sa = this.titleAim + (rm ? 0 : 0.025 * Math.sin(this.t * 2.1));
+      if (np) b.sa = np.a0 + angDiff(np.a1, np.a0) * this.scanK() + (rm ? 0 : 0.02 * Math.sin(this.t * 2.1));
     } else if (this.gaze) {
       // looking at you: the light comes round to face you and stays there a moment (the pointer can wait)
       b.phi = this.gaze.phi;
@@ -1151,7 +1168,7 @@ class Scene {
     const c = Math.cos(b.phi), sn = Math.sin(b.phi);
     const vx = lerp(c, Math.cos(b.sa), b.steer), vy = lerp(0.03 * Math.abs(c), Math.sin(b.sa), b.steer);
     b.a = Math.atan2(vy, vx);
-    b.len = clamp(Math.hypot(vx, vy)) * this.lampOn();
+    b.len = clamp(Math.hypot(vx, vy)) * this.lampOn() * this.reach();
     b.flash = Math.pow(Math.max(0, sn), 14) * (1 - b.steer) * this.lampOn();
   }
   updateObjs(dt) {
diff --git a/site/style.css b/site/style.css
index 14324202..9e140ea8 100644
--- a/site/style.css
+++ b/site/style.css
@@ -118,17 +118,19 @@ h1, h2, h3 { text-wrap: balance; }
   color: #fff; rotate: -1.5deg; -webkit-text-stroke: .045em var(--pen); paint-order: stroke fill; text-shadow: 0 .045em 0 #1111111f;
 }
 .op-mark { position: relative; isolation: isolate; }
-/* its words glow in the lighthouse's weak light at night (main.js sets --glow) */
-.op-mark > span {
-  text-shadow: 0 .045em 0 #1111111f, 0 0 10px rgb(255 224 74 / var(--glow, 0)), 0 0 24px rgb(255 224 74 / calc(var(--glow, 0) * .9)),
-    0 0 46px rgb(255 212 59 / calc(var(--glow, 0) * .65));
-}
 .op-bar {
   display: flex; align-items: center; gap: 8px; width: min(780px, 100%); padding: 7px 8px; border-radius: 22px;
   background: color-mix(in srgb, #ffffff 36%, transparent); box-shadow: inset 0 0 0 1px #ffffffb3, 0 20px 44px -20px #0b1d4a73;
   -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
 }
 .op-bar .w { gap: 8px; padding: 0 13px; }
+/* its widgets glow in the lighthouse's weak light at night (main.js sets --glow; none of these is in the card's
+   transitions, so the light's flicker stays sharp) */
+.opening .op-bar:not(.op-fly) .w {
+  background-image: linear-gradient(0deg, rgb(255 224 74 / calc(var(--glow, 0) * .55)), rgb(255 224 74 / 0) 82%);
+  outline: 1.5px solid rgb(255 212 59 / calc(var(--glow, 0) * .8)); outline-offset: 0;
+  filter: drop-shadow(0 5px 10px rgb(255 212 59 / calc(var(--glow, 0) * .9)));
+}
 .op-bar svg { width: 18px; height: 18px; }
 .op-app { gap: 15px !important; }
 .op-app b { font-weight: 700; }

From 02b978b3c8305188758b34fcecb6bb8235ac30bb Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 18:53:54 +0100
Subject: [PATCH 29/46] docs: open the website's lighthouse's eye slowly in the
 opening

Its eye snapped open in half a second, most of it in the first tenth. In the opening it now
eases open over 1.2 s, starting gently and settling slowly, and the squeezes and the weak
light on the bar follow once it's open. Woken at once by a skip, it still opens quickly.
The opening is over at about 12.4 s.
---
 site/main.js  |  2 +-
 site/scene.js | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/site/main.js b/site/main.js
index 697a4db1..4160b93e 100644
--- a/site/main.js
+++ b/site/main.js
@@ -993,7 +993,7 @@ const swept = new Map();
 const opening = document.getElementById("opening"), snore = document.getElementById("snore");
 const LAND_SKIP = ["wheel", "keydown", "pointerdown", "touchstart", "scroll"];
 const DAWN = 1.6; // seconds from night to day
-const WAKE_AT = 1100, RISE_AFTER = 2750; // ms: asleep for a while, then awake at night, until the day comes
+const WAKE_AT = 1100, RISE_AFTER = 3350; // ms: asleep for a while, then awake at night, until the day comes
 // it wakes into the day, or into the night when that's the visitor's choice on the night switch
 const dayMode = () => localStorage.getItem("mode") === "dark" ? "dark" : "light";
 // the page has come in: at the end of the sunrise, or at once with the lighthouse awake
diff --git a/site/scene.js b/site/scene.js
index 8982325d..d3037a00 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -209,14 +209,14 @@ function label(c, text, x, y, size, col, align = 'left', rot = -0.035) {
 
 /* ---------- the scene: geometry, state, input and time ---------- */
 const IDLE_AFTER = 4000, IDLE_FPS = 14, BOIL_FPS = 7, MAX_OBJS = 36;
-// the opening's wake-up, in seconds. At night, from when its eye starts to open: it opens over `open`, then strains to
-// light its lamp, squeezing its eye shut for each of `pushes` ([when, how long, how hard]), and from `dim` its light
+// the opening's wake-up, in seconds. At night, from when its eye starts to open: it opens slowly over `open`, easing
+// out, then strains to light its lamp, squeezing its eye shut for each of `pushes` ([when, how long, how hard]), and from `dim` its light
 // finds the card's bar, weak and unsteady (nearly out in each of `dips`), and crosses it (`scan`: [when, how long]; both
 // counted from `dim`). When the day comes (from the page's rising): it blinks its light out over `out`, strains again
 // (`again`), and its light comes on for good at `on`, on the headline's first word; it reads the headline from `read`
 // for `dur`, and at `end` it sweeps the bar
 const WAKE = {
-  open: 0.5, pushes: [[0.7, 0.26, 0.75], [1.08, 0.32, 0.9]], dim: 1.44, scan: [0.25, 0.9],
+  open: 1.2, pushes: [[1.3, 0.26, 0.75], [1.68, 0.32, 0.9]], dim: 2.04, scan: [0.25, 0.9],
   dips: [[0.22, 0.27], [0.52, 0.58], [0.63, 0.67], [0.88, 0.93], [1.14, 1.19]],
   out: 0.14, again: [[0.24, 0.28, 0.85], [0.62, 0.36, 1]], on: 0.98, read: 1.22, dur: 1.1, end: 2.45,
 };
@@ -448,12 +448,12 @@ class Scene {
     } else if (now && this.showing()) { this.waking = false; this.wakePath = null; this.blink.next = this.t + 2; }
     this.wake();
   }
-  // 1 while asleep, easing to 0 as the eye opens
+  // 1 while asleep, easing to 0 as the eye opens: slowly in the show, quickly when woken at once
   drowsy() {
     if (this.dozing) return 1;
-    // quick at first, settling as it opens all the way
-    const a = clamp((this.t - this.wokeAt) / WAKE.open);
-    return (1 - a) * (1 - a);
+    // easing out: on its way at once, settling gently as it opens all the way
+    const a = clamp((this.t - this.wokeAt) / (this.waking ? WAKE.open : 0.45));
+    return 1 - Math.sin(a * Math.PI / 2);
   }
   // the opening's show is on: from waking up until its light comes on for good
   showing() { return this.waking && !(this.riseAt != null && this.t - this.riseAt >= WAKE.on); }

From ccf2bb789af9b73dce1e949401629494c8aa6fe7 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 18:54:13 +0100
Subject: [PATCH 30/46] docs: rewrap the wake-up notes in the website scene

---
 site/scene.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index d3037a00..90745236 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -210,11 +210,11 @@ function label(c, text, x, y, size, col, align = 'left', rot = -0.035) {
 /* ---------- the scene: geometry, state, input and time ---------- */
 const IDLE_AFTER = 4000, IDLE_FPS = 14, BOIL_FPS = 7, MAX_OBJS = 36;
 // the opening's wake-up, in seconds. At night, from when its eye starts to open: it opens slowly over `open`, easing
-// out, then strains to light its lamp, squeezing its eye shut for each of `pushes` ([when, how long, how hard]), and from `dim` its light
-// finds the card's bar, weak and unsteady (nearly out in each of `dips`), and crosses it (`scan`: [when, how long]; both
-// counted from `dim`). When the day comes (from the page's rising): it blinks its light out over `out`, strains again
-// (`again`), and its light comes on for good at `on`, on the headline's first word; it reads the headline from `read`
-// for `dur`, and at `end` it sweeps the bar
+// out, then strains to light its lamp, squeezing its eye shut for each of `pushes` ([when, how long, how hard]), and
+// from `dim` its light finds the card's bar, weak and unsteady (nearly out in each of `dips`), and crosses it (`scan`:
+// [when, how long]; both counted from `dim`). When the day comes (from the page's rising): it blinks its light out over
+// `out`, strains again (`again`), and its light comes on for good at `on`, on the headline's first word; it reads the
+// headline from `read` for `dur`, and at `end` it sweeps the bar
 const WAKE = {
   open: 1.2, pushes: [[1.3, 0.26, 0.75], [1.68, 0.32, 0.9]], dim: 2.04, scan: [0.25, 0.9],
   dips: [[0.22, 0.27], [0.52, 0.58], [0.63, 0.67], [0.88, 0.93], [1.14, 1.19]],

From 1921326bb0851bef455ffd3546998ae01e2a3e99 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 19:01:39 +0100
Subject: [PATCH 31/46] docs: open the website's lighthouse's eye halfway, then
 all the way

As asked, the eye now wakes in two goes in the opening: it opens halfway, stays a moment,
droops a little, then opens all the way, easing out, over about 1.45 s. The animals on the
hill wake as it starts to open, and no longer nap again while its eye droops. The opening is
over at about 12.7 s.
---
 site/main.js  |  2 +-
 site/scene.js | 30 ++++++++++++++++++------------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/site/main.js b/site/main.js
index 4160b93e..cf6a92f4 100644
--- a/site/main.js
+++ b/site/main.js
@@ -993,7 +993,7 @@ const swept = new Map();
 const opening = document.getElementById("opening"), snore = document.getElementById("snore");
 const LAND_SKIP = ["wheel", "keydown", "pointerdown", "touchstart", "scroll"];
 const DAWN = 1.6; // seconds from night to day
-const WAKE_AT = 1100, RISE_AFTER = 3350; // ms: asleep for a while, then awake at night, until the day comes
+const WAKE_AT = 1100, RISE_AFTER = 3600; // ms: asleep for a while, then awake at night, until the day comes
 // it wakes into the day, or into the night when that's the visitor's choice on the night switch
 const dayMode = () => localStorage.getItem("mode") === "dark" ? "dark" : "light";
 // the page has come in: at the end of the sunrise, or at once with the lighthouse awake
diff --git a/site/scene.js b/site/scene.js
index 90745236..bf3afcc2 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -209,14 +209,16 @@ function label(c, text, x, y, size, col, align = 'left', rot = -0.035) {
 
 /* ---------- the scene: geometry, state, input and time ---------- */
 const IDLE_AFTER = 4000, IDLE_FPS = 14, BOIL_FPS = 7, MAX_OBJS = 36;
-// the opening's wake-up, in seconds. At night, from when its eye starts to open: it opens slowly over `open`, easing
-// out, then strains to light its lamp, squeezing its eye shut for each of `pushes` ([when, how long, how hard]), and
-// from `dim` its light finds the card's bar, weak and unsteady (nearly out in each of `dips`), and crosses it (`scan`:
-// [when, how long]; both counted from `dim`). When the day comes (from the page's rising): it blinks its light out over
-// `out`, strains again (`again`), and its light comes on for good at `on`, on the headline's first word; it reads the
-// headline from `read` for `dur`, and at `end` it sweeps the bar
+// the opening's wake-up, in seconds. At night, from when its eye starts to open: it opens halfway (to `lids.mid` shut)
+// by `lids.half`, stays a moment, droops a little (to `lids.heavy`) by `lids.sag`, then opens all the way by `open`,
+// easing out. Then it strains to light its lamp, squeezing its eye shut for each of `pushes` ([when, how long, how
+// hard]), and from `dim` its light finds the card's bar, weak and unsteady (nearly out in each of `dips`), and crosses
+// it (`scan`: [when, how long]; both counted from `dim`). When the day comes (from the page's rising): it blinks its
+// light out over `out`, strains again (`again`), and its light comes on for good at `on`, on the headline's first
+// word; it reads the headline from `read` for `dur`, and at `end` it sweeps the bar
 const WAKE = {
-  open: 1.2, pushes: [[1.3, 0.26, 0.75], [1.68, 0.32, 0.9]], dim: 2.04, scan: [0.25, 0.9],
+  open: 1.45, lids: { half: 0.5, hold: 0.6, sag: 0.85, mid: 0.62, heavy: 0.84 },
+  pushes: [[1.55, 0.26, 0.75], [1.93, 0.32, 0.9]], dim: 2.29, scan: [0.25, 0.9],
   dips: [[0.22, 0.27], [0.52, 0.58], [0.63, 0.67], [0.88, 0.93], [1.14, 1.19]],
   out: 0.14, again: [[0.24, 0.28, 0.85], [0.62, 0.36, 1]], on: 0.98, read: 1.22, dur: 1.1, end: 2.45,
 };
@@ -448,12 +450,16 @@ class Scene {
     } else if (now && this.showing()) { this.waking = false; this.wakePath = null; this.blink.next = this.t + 2; }
     this.wake();
   }
-  // 1 while asleep, easing to 0 as the eye opens: slowly in the show, quickly when woken at once
+  // 1 while asleep, easing to 0 as the eye opens: in the show halfway, a little heavier again, then all the way (see
+  // WAKE); quickly when woken at once
   drowsy() {
     if (this.dozing) return 1;
-    // easing out: on its way at once, settling gently as it opens all the way
-    const a = clamp((this.t - this.wokeAt) / (this.waking ? WAKE.open : 0.45));
-    return 1 - Math.sin(a * Math.PI / 2);
+    const a = this.t - this.wokeAt, out = k => Math.sin(clamp(k) * Math.PI / 2), W = WAKE.lids;
+    if (!this.waking) return 1 - out(a / 0.45);
+    if (a < W.half) return lerp(1, W.mid, out(a / W.half));
+    if (a < W.hold) return W.mid;
+    if (a < W.sag) return lerp(W.mid, W.heavy, smooth(W.hold, W.sag, a));
+    return lerp(W.heavy, 0, out((a - W.sag) / (WAKE.open - W.sag)));
   }
   // the opening's show is on: from waking up until its light comes on for good
   showing() { return this.waking && !(this.riseAt != null && this.t - this.riseAt >= WAKE.on); }
@@ -1662,7 +1668,7 @@ class Scene {
     const step = Math.round(this.d * STEPS);
     this.P = palAt(PAL, step / STEPS);
     this.pstep = step;
-    BOIL = this.boil; PW = g.pw; INK = rgba(this.P.ink); REGX = 2.6 * g.pw; REGY = 1.9 * g.pw; NAP = this.drowsy() > 0.75;
+    BOIL = this.boil; PW = g.pw; INK = rgba(this.P.ink); REGX = 2.6 * g.pw; REGY = 1.9 * g.pw; NAP = this.drowsy() > 0.9;
     c.setTransform(k, 0, 0, k, 0, 0);
     c.globalAlpha = 1; c.globalCompositeOperation = 'source-over';
     drawScene(this, c);

From 30e83dde7efe35b6902da8d7994df93c2ec81dba Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 19:19:18 +0100
Subject: [PATCH 32/46] docs: draw the website's moon as a croissant and
 thicken its grass

The moon is now a croissant (de lune): a crescent of golden dough creased into five, its ends
curling in and more baked, still asleep with its closed eye, lashes and small smile. It's a
little bigger, so the creases read.

The grass is denser: about nine tufts on the hill when the page opens (five on phones), up to
fourteen (eight), a new one every 3 to 6 s instead of 6 to 12, closer together and fuller, and
twice as many tufts along the ridge. The drawing still takes under 2 ms a frame.
---
 site/scene.js | 78 ++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 55 insertions(+), 23 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index bf3afcc2..cc1e4724 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -120,7 +120,8 @@ const KINDS = ['sheep', 'cow', 'duck', 'monster', 'gull'];
 const C = {
   wool: hex('#FFFFFF'), yolk: hex('#FFC21A'), duck: hex('#FFD21F'), beak: hex('#FF7A1A'), pink: hex('#FF9CB0'),
   monster: hex('#FF8FC0'), chimney: hex('#E8452F'), roof: hex('#2B2B36'), door: hex('#2E58D8'), skin: hex('#F6C9A6'),
-  navy: hex('#25305E'), wood: hex('#C98B4A'), steel: hex('#D8DCE6'), moon: hex('#FFE89A'), tile: hex('#1D1D24'),
+  navy: hex('#25305E'), wood: hex('#C98B4A'), steel: hex('#D8DCE6'), tile: hex('#1D1D24'),
+  bun: hex('#EBA348'), bake: hex('#C97A30'), crumb: hex('#FFE0A0'),
   huts: ['#FF4A36', '#2E58D8', '#FFC21A', '#36A852'].map(hex),
   kraft: hex('#CC9A5E'), kraftLit: hex('#E2B983'), kraftDark: hex('#A87442'), tape: hex('#FFE04A'), sprout: hex('#2E9B3B'),
 };
@@ -222,8 +223,8 @@ const WAKE = {
   dips: [[0.22, 0.27], [0.52, 0.58], [0.63, 0.67], [0.88, 0.93], [1.14, 1.19]],
   out: 0.14, again: [[0.24, 0.28, 0.85], [0.62, 0.36, 1]], on: 0.98, read: 1.22, dur: 1.1, end: 2.45,
 };
-// the grass on the hill: at most this many tufts, a new one every 6 to 12 s while there are fewer
-const MEADOW_MAX = 6, SPROUT_MIN = 6, SPROUT_MAX = 12;
+// the grass on the hill: at most this many tufts (fewer on phones), a new one every 3 to 6 s while there are fewer
+const MEADOW_MAX = 14, MEADOW_PHONE = 8, SPROUT_MIN = 3, SPROUT_MAX = 6;
 
 class Scene {
   constructor(host, opts = {}) {
@@ -837,12 +838,12 @@ class Scene {
       const f = i / rows, y = g.horizon + (H - g.horizon) * Math.pow(f, 1.6);
       g.rows.push({ y, f, seed: i * 97 + this.o.seed, spans: this.seaSpans(y) });
     }
-    // grass tufts along the ridge, a few
+    // grass tufts along the ridge, close together
     g.tufts = [];
-    for (let x = g.ridge[0][0] + 14 * u; x < W; x += (26 + R() * 30) * u) {
+    for (let x = g.ridge[0][0] + 14 * u; x < W; x += (13 + R() * 15) * u) {
       const y = this.ridgeY(x);
       if (y == null || y > H + 4 || Math.abs(x - lx) < T.wB * 0.7 || (x > g.cot.x - g.cot.w * 0.55 && x < g.cot.x + g.cot.w * 0.5)) continue;
-      g.tufts.push({ x, y, l: (8 + R() * 7) * Math.max(u, 0.62), p: R() * TAU, n: 2 + ((R() * 2.2) | 0) });
+      g.tufts.push({ x, y, l: (8 + R() * 7) * Math.max(u, 0.62), p: R() * TAU, n: 3 + ((R() * 2.2) | 0) });
     }
     // where the page's notes sit (a guess, for placing labels and surprises)
     g.note = portrait ? { x0: 0, x1: W, y0: top + Hs * 0.24, y1: H } : { x0: 0, x1: W * 0.05 + Math.min(W * 0.46, 620) + 12, y0: top, y1: H * 0.84 };
@@ -1251,7 +1252,7 @@ class Scene {
     }
     // grass already there: one a short walk from somebody (the first meal comes soon), the rest spread out
     const first = this.objs.find(grazer);
-    for (let i = 0, n = 3 + (R() < 0.5 ? 1 : 0); i < n; i++) this.sprout(true, i === 0 && first && !this.reduced ? first : null);
+    for (let i = 0, n = (g.portrait ? 5 : 9) + (R() < 0.5 ? 1 : 0); i < n; i++) this.sprout(true, i === 0 && first && !this.reduced ? first : null);
     this.sproutAt = this.t + 4 + R() * 4;
     // not everyone is hungry at once: the one nearest some grass first, soon, and the others in turn
     const near = o => Math.min(1e9, ...this.meadow.map(m => Math.hypot(m.x - o.x, (m.y - o.y) * 1.5)));
@@ -1316,14 +1317,14 @@ class Scene {
   // a tuft of grass where it's seen (near `near` if it can); `grown` for the ones already there when the page opens
   sprout(grown, near) {
     const u = this.g.u, R = Math.random;
-    const p = (near && this.landSpot({ near, reach: 110 * u, min: 55 * u, gap: 44 * u, snug: true, clear: true, check: 3 }))
-      || this.landSpot({ gap: 48 * u, snug: true, clear: true, spread: grown });
+    const p = (near && this.landSpot({ near, reach: 110 * u, min: 55 * u, gap: 30 * u, snug: true, clear: true, check: 3 }))
+      || this.landSpot({ gap: 30 * u, snug: true, clear: true, spread: grown });
     if (!p) return null;
-    const sc = this.depthScale(p.y) * 0.85, n = 5 + ((R() * 3) | 0), blades = [];
+    const sc = this.depthScale(p.y) * 0.85, n = 6 + ((R() * 4) | 0), blades = [];
     for (let i = 0; i < n; i++) {
       const f = i / (n - 1) - 0.5;
       blades.push({
-        dx: (f * 13 + (R() - 0.5) * 1.8) * u * sc, a: f * 1.05 + (R() - 0.5) * 0.22, flex: 0.7 + R() * 0.5,
+        dx: (f * 15 + (R() - 0.5) * 1.8) * u * sc, a: f * 1.05 + (R() - 0.5) * 0.22, flex: 0.7 + R() * 0.5,
         l: (14 + R() * 7) * (1 - Math.abs(f) * 0.5) * u * sc, d: Math.abs(f) * 1.1 + R() * 0.3, cut: null,
       });
     }
@@ -1344,8 +1345,8 @@ class Scene {
     this.meadow = this.meadow.filter(m => !m.gone);
     // a new one now and then, only while the page shows (the scene's time stands still while it's hidden)
     if (this.reduced || t < this.sproutAt) return;
-    const m = this.meadow.length < MEADOW_MAX ? this.sprout(false) : null;
-    this.sproutAt = t + (m || this.meadow.length >= MEADOW_MAX ? lerp(SPROUT_MIN, SPROUT_MAX, R()) : 3);
+    const max = this.g.portrait ? MEADOW_PHONE : MEADOW_MAX, m = this.meadow.length < max ? this.sprout(false) : null;
+    this.sproutAt = t + (m || this.meadow.length >= max ? lerp(SPROUT_MIN, SPROUT_MAX, R()) : 3);
   }
   letGo(o) { if (o.tuft) { if (o.tuft.by === o) o.tuft.by = null; o.tuft = null; } }
   // one animal's day: idle, wander, walk to a tuft and eat it, look pleased; run from the pointer (sheep)
@@ -1802,23 +1803,54 @@ function drawSun(s, c) {
   c.restore();
 }
 
-/* a crescent moon, asleep, with a z */
+/* the moon, a croissant (de lune), asleep, with a z: a fat crescent of dough, creased into five, its ends curling in
+   and a little more baked */
 function drawMoon(s, c) {
   const g = s.g, u = g.u, m = s.moonPos();
   if (m.a <= 0) return;
-  const r = 25 * u, sz = r * 3.4;
+  const r = 30 * u, sz = r * 3.4;
   c.save(); c.beginPath(); c.rect(0, 0, g.W, g.horizon); c.clip();
   c.globalAlpha = m.a;
   s.sprite('moon', sz, sz, m.x, m.y, x => {
-    const cres = [];
-    for (let i = 0; i <= 26; i++) { const a = -Math.PI / 2 + i / 26 * Math.PI; cres.push([Math.cos(a) * r, Math.sin(a) * r]); }
-    for (let i = 25; i >= 1; i--) { const a = -Math.PI / 2 + i / 26 * Math.PI; cres.push([Math.cos(a) * r * 0.38 + r * 0.02, Math.sin(a) * r * 0.97]); }
-    shape(x, dens(cres, 3, true), C.moon, DET, 11);
-    // a closed eye with lashes, and a small smile
+    const D = Math.PI / 180, END = 105 * D, CREASES = [25 * D, 65 * D];
+    // along the crescent's middle line (t in radians, 0 pointing right), and half its thickness there: fat in the
+    // middle, tapering to round ends that curl in, a little pinched at each crease
+    const mid = t => 0.62 - 0.12 * smooth(60 * D, END, Math.abs(t));
+    const half = t => (0.31 * Math.pow(Math.max(0, 1 - (t / END) ** 2), 0.6) + 0.07) * (1 - 0.1 * Math.max(...CREASES.map(k => Math.exp(-(((Math.abs(t) - k) / (6 * D)) ** 2)))));
+    const at = (t, off) => { const d = (mid(t) + off) * r; return [Math.cos(t) * d, Math.sin(t) * d]; };
+    // the dough between two angles, its ends rounded off where they're the crescent's ends
+    const piece = (t0, t1) => {
+      const pts = [], n = Math.max(4, Math.round((t1 - t0) / (4 * D)));
+      for (let i = 0; i <= n; i++) { const t = lerp(t0, t1, i / n); pts.push(at(t, half(t))); }
+      if (t1 >= END - 1e-6) for (let i = 1; i < 8; i++) { const a = i / 8 * Math.PI, [cx, cy] = at(END, 0), h = half(END) * r; pts.push([cx + Math.cos(END + a) * h, cy + Math.sin(END + a) * h]); }
+      for (let i = n; i >= 0; i--) { const t = lerp(t0, t1, i / n); pts.push(at(t, -half(t))); }
+      if (t0 <= -END + 1e-6) for (let i = 1; i < 8; i++) { const a = Math.PI + i / 8 * Math.PI, [cx, cy] = at(-END, 0), h = half(-END) * r; pts.push([cx + Math.cos(-END + a) * h, cy + Math.sin(-END + a) * h]); }
+      return pts;
+    };
+    shape(x, piece(-END, END), C.bun, DET, 11);
+    // the ends, more baked
+    for (const sg of [-1, 1]) print(x, sg < 0 ? piece(-END, -CREASES[1]) : piece(CREASES[1], END), C.bake);
+    // the creases, bowed toward the middle, and the pen round the whole croissant again over the baked ends
     x.beginPath();
-    ribbon(x, ellipse(r * 0.62, -r * 0.2, r * 0.17, r * 0.11, 9, 0.15 * Math.PI, 0.85 * Math.PI), TEX * 1.2, 2, { tin: 2, tout: 2 });
-    for (const k of [0.3, 0.5, 0.7]) { const a = k * Math.PI, ex = r * 0.62 + Math.cos(a) * r * 0.17, ey = -r * 0.2 + Math.sin(a) * r * 0.11; ribbon(x, [[ex, ey], [ex + Math.cos(a) * 3 * u, ey + Math.sin(a) * 3 * u]], TEX, k * 9, { tin: 1, tout: 1 }); }
-    ribbon(x, ellipse(r * 0.52, r * 0.3, r * 0.15, r * 0.1, 9, 0.2 * Math.PI, 0.8 * Math.PI), TEX * 1.1, 4, { tin: 2, tout: 2 });
+    for (const k of CREASES) for (const sg of [-1, 1]) {
+      const t = sg * k, bow = -sg * 5 * D;
+      ribbon(x, [at(t, -half(t) * 0.92), at(t + bow, 0), at(t, half(t) * 0.92)], DET * 0.85, 30 + k * 10 + sg, { tin: 2, tout: 2 });
+    }
+    loop(x, piece(-END, END), DET, 11);
+    x.fillStyle = INK; x.fill();
+    // a shine along the top of each piece
+    x.beginPath();
+    for (const [t, w] of [[0, 9], [-45, 7], [45, 7], [-86, 4], [86, 4]]) {
+      const a = t * D, pts = [];
+      for (let i = 0; i <= 4; i++) { const tt = a + (i / 4 - 0.5) * w * 2 * D; pts.push(at(tt, half(tt) * 0.55)); }
+      ribbon(x, pts, TEX * 1.2, 5 + t / 9, { tin: 2, tout: 2 });
+    }
+    x.fillStyle = rgba(C.crumb); x.fill();
+    // a closed eye with lashes, and a small smile, on the middle piece
+    x.beginPath();
+    ribbon(x, ellipse(r * 0.67, -r * 0.12, r * 0.13, r * 0.08, 9, 0.15 * Math.PI, 0.85 * Math.PI), TEX * 1.2, 2, { tin: 2, tout: 2 });
+    for (const k of [0.3, 0.5, 0.7]) { const a = k * Math.PI, ex = r * 0.67 + Math.cos(a) * r * 0.13, ey = -r * 0.12 + Math.sin(a) * r * 0.08; ribbon(x, [[ex, ey], [ex + Math.cos(a) * 2.6 * u, ey + Math.sin(a) * 2.6 * u]], TEX, k * 9, { tin: 1, tout: 1 }); }
+    ribbon(x, ellipse(r * 0.64, r * 0.1, r * 0.1, r * 0.07, 9, 0.2 * Math.PI, 0.8 * Math.PI), TEX * 1.1, 4, { tin: 2, tout: 2 });
     x.fillStyle = INK; x.fill();
   });
   c.restore();

From 6476b23af107b6f594385e88cbaac011a2c91b1e Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 19:36:09 +0100
Subject: [PATCH 33/46] docs: slim the website's croissant moon down to the old
 crescent

The croissant moon was too fat and too brown. It now keeps the old moon's thin crescent,
pointed horns and all, in lighter golden dough, creased into five with its horns a little
more baked, and the same sleeping face.
---
 site/scene.js | 53 +++++++++++++++++++++++----------------------------
 1 file changed, 24 insertions(+), 29 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index cc1e4724..e1735ddb 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -121,7 +121,7 @@ const C = {
   wool: hex('#FFFFFF'), yolk: hex('#FFC21A'), duck: hex('#FFD21F'), beak: hex('#FF7A1A'), pink: hex('#FF9CB0'),
   monster: hex('#FF8FC0'), chimney: hex('#E8452F'), roof: hex('#2B2B36'), door: hex('#2E58D8'), skin: hex('#F6C9A6'),
   navy: hex('#25305E'), wood: hex('#C98B4A'), steel: hex('#D8DCE6'), tile: hex('#1D1D24'),
-  bun: hex('#EBA348'), bake: hex('#C97A30'), crumb: hex('#FFE0A0'),
+  bun: hex('#F2B65A'), bake: hex('#E29A45'), crumb: hex('#FFE6B0'),
   huts: ['#FF4A36', '#2E58D8', '#FFC21A', '#36A852'].map(hex),
   kraft: hex('#CC9A5E'), kraftLit: hex('#E2B983'), kraftDark: hex('#A87442'), tape: hex('#FFE04A'), sprout: hex('#2E9B3B'),
 };
@@ -1803,8 +1803,8 @@ function drawSun(s, c) {
   c.restore();
 }
 
-/* the moon, a croissant (de lune), asleep, with a z: a fat crescent of dough, creased into five, its ends curling in
-   and a little more baked */
+/* the moon, a croissant (de lune), asleep, with a z: the moon's thin crescent in golden dough, creased into five, its
+   horns a little more baked */
 function drawMoon(s, c) {
   const g = s.g, u = g.u, m = s.moonPos();
   if (m.a <= 0) return;
@@ -1812,45 +1812,40 @@ function drawMoon(s, c) {
   c.save(); c.beginPath(); c.rect(0, 0, g.W, g.horizon); c.clip();
   c.globalAlpha = m.a;
   s.sprite('moon', sz, sz, m.x, m.y, x => {
-    const D = Math.PI / 180, END = 105 * D, CREASES = [25 * D, 65 * D];
-    // along the crescent's middle line (t in radians, 0 pointing right), and half its thickness there: fat in the
-    // middle, tapering to round ends that curl in, a little pinched at each crease
-    const mid = t => 0.62 - 0.12 * smooth(60 * D, END, Math.abs(t));
-    const half = t => (0.31 * Math.pow(Math.max(0, 1 - (t / END) ** 2), 0.6) + 0.07) * (1 - 0.1 * Math.max(...CREASES.map(k => Math.exp(-(((Math.abs(t) - k) / (6 * D)) ** 2)))));
-    const at = (t, off) => { const d = (mid(t) + off) * r; return [Math.cos(t) * d, Math.sin(t) * d]; };
-    // the dough between two angles, its ends rounded off where they're the crescent's ends
+    const D = Math.PI / 180, H = Math.PI / 2, CREASES = [22 * D, 55 * D];
+    // the crescent (t from -90°, the top horn, to 90°): its outer edge half a circle, its inner one a narrower half
+    // ellipse, the two nearly meeting at the horns
+    const outer = t => [Math.cos(t) * r, Math.sin(t) * r], inner = t => [(Math.cos(t) * 0.38 + 0.02) * r, Math.sin(t) * 0.97 * r];
     const piece = (t0, t1) => {
-      const pts = [], n = Math.max(4, Math.round((t1 - t0) / (4 * D)));
-      for (let i = 0; i <= n; i++) { const t = lerp(t0, t1, i / n); pts.push(at(t, half(t))); }
-      if (t1 >= END - 1e-6) for (let i = 1; i < 8; i++) { const a = i / 8 * Math.PI, [cx, cy] = at(END, 0), h = half(END) * r; pts.push([cx + Math.cos(END + a) * h, cy + Math.sin(END + a) * h]); }
-      for (let i = n; i >= 0; i--) { const t = lerp(t0, t1, i / n); pts.push(at(t, -half(t))); }
-      if (t0 <= -END + 1e-6) for (let i = 1; i < 8; i++) { const a = Math.PI + i / 8 * Math.PI, [cx, cy] = at(-END, 0), h = half(-END) * r; pts.push([cx + Math.cos(-END + a) * h, cy + Math.sin(-END + a) * h]); }
+      const pts = [], n = Math.max(3, Math.round((t1 - t0) / (4 * D)));
+      for (let i = 0; i <= n; i++) pts.push(outer(lerp(t0, t1, i / n)));
+      for (let i = n; i >= 0; i--) pts.push(inner(lerp(t0, t1, i / n)));
       return pts;
     };
-    shape(x, piece(-END, END), C.bun, DET, 11);
-    // the ends, more baked
-    for (const sg of [-1, 1]) print(x, sg < 0 ? piece(-END, -CREASES[1]) : piece(CREASES[1], END), C.bake);
-    // the creases, bowed toward the middle, and the pen round the whole croissant again over the baked ends
+    shape(x, piece(-H, H), C.bun, DET, 11);
+    // the horns, more baked
+    for (const sg of [-1, 1]) print(x, sg < 0 ? piece(-H, -CREASES[1]) : piece(CREASES[1], H), C.bake);
+    // the creases, bowed toward the middle, then the pen round it all again over the baked horns
     x.beginPath();
     for (const k of CREASES) for (const sg of [-1, 1]) {
-      const t = sg * k, bow = -sg * 5 * D;
-      ribbon(x, [at(t, -half(t) * 0.92), at(t + bow, 0), at(t, half(t) * 0.92)], DET * 0.85, 30 + k * 10 + sg, { tin: 2, tout: 2 });
+      const [ox, oy] = outer(sg * k), [ix, iy] = inner(sg * k);
+      ribbon(x, [[lerp(ix, ox, 0.08), lerp(iy, oy, 0.08)], [(ix + ox) / 2, (iy + oy) / 2 - sg * 0.05 * r], [lerp(ix, ox, 0.92), lerp(iy, oy, 0.92)]], DET * 0.8, 30 + k * 10 + sg, { tin: 2, tout: 2 });
     }
-    loop(x, piece(-END, END), DET, 11);
+    loop(x, piece(-H, H), DET, 11);
     x.fillStyle = INK; x.fill();
-    // a shine along the top of each piece
+    // a shine along each piece, near its outer edge
     x.beginPath();
-    for (const [t, w] of [[0, 9], [-45, 7], [45, 7], [-86, 4], [86, 4]]) {
-      const a = t * D, pts = [];
-      for (let i = 0; i <= 4; i++) { const tt = a + (i / 4 - 0.5) * w * 2 * D; pts.push(at(tt, half(tt) * 0.55)); }
+    for (const [t, w] of [[0, 10], [-38, 8], [38, 8], [-72, 5], [72, 5]]) {
+      const pts = [];
+      for (let i = 0; i <= 4; i++) { const tt = (t + (i / 4 - 0.5) * w * 2) * D; pts.push([Math.cos(tt) * 0.86 * r, Math.sin(tt) * 0.86 * r]); }
       ribbon(x, pts, TEX * 1.2, 5 + t / 9, { tin: 2, tout: 2 });
     }
     x.fillStyle = rgba(C.crumb); x.fill();
     // a closed eye with lashes, and a small smile, on the middle piece
     x.beginPath();
-    ribbon(x, ellipse(r * 0.67, -r * 0.12, r * 0.13, r * 0.08, 9, 0.15 * Math.PI, 0.85 * Math.PI), TEX * 1.2, 2, { tin: 2, tout: 2 });
-    for (const k of [0.3, 0.5, 0.7]) { const a = k * Math.PI, ex = r * 0.67 + Math.cos(a) * r * 0.13, ey = -r * 0.12 + Math.sin(a) * r * 0.08; ribbon(x, [[ex, ey], [ex + Math.cos(a) * 2.6 * u, ey + Math.sin(a) * 2.6 * u]], TEX, k * 9, { tin: 1, tout: 1 }); }
-    ribbon(x, ellipse(r * 0.64, r * 0.1, r * 0.1, r * 0.07, 9, 0.2 * Math.PI, 0.8 * Math.PI), TEX * 1.1, 4, { tin: 2, tout: 2 });
+    ribbon(x, ellipse(r * 0.73, -r * 0.12, r * 0.11, r * 0.07, 9, 0.15 * Math.PI, 0.85 * Math.PI), TEX * 1.2, 2, { tin: 2, tout: 2 });
+    for (const k of [0.3, 0.5, 0.7]) { const a = k * Math.PI, ex = r * 0.73 + Math.cos(a) * r * 0.11, ey = -r * 0.12 + Math.sin(a) * r * 0.07; ribbon(x, [[ex, ey], [ex + Math.cos(a) * 2.4 * u, ey + Math.sin(a) * 2.4 * u]], TEX, k * 9, { tin: 1, tout: 1 }); }
+    ribbon(x, ellipse(r * 0.71, r * 0.12, r * 0.09, r * 0.06, 9, 0.2 * Math.PI, 0.8 * Math.PI), TEX * 1.1, 4, { tin: 2, tout: 2 });
     x.fillStyle = INK; x.fill();
   });
   c.restore();

From 8b64284e01d9e9120ace13815699b99d4c814ba3 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 19:45:06 +0100
Subject: [PATCH 34/46] docs: put the croissant moon's face back on its inner
 edge

As on the old moon, its closed eye and small smile sit along the crescent's inner edge
again. The creases moved out a little so the smile stays clear of them.
---
 site/scene.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index e1735ddb..571ee39c 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -1812,7 +1812,7 @@ function drawMoon(s, c) {
   c.save(); c.beginPath(); c.rect(0, 0, g.W, g.horizon); c.clip();
   c.globalAlpha = m.a;
   s.sprite('moon', sz, sz, m.x, m.y, x => {
-    const D = Math.PI / 180, H = Math.PI / 2, CREASES = [22 * D, 55 * D];
+    const D = Math.PI / 180, H = Math.PI / 2, CREASES = [36 * D, 66 * D];
     // the crescent (t from -90°, the top horn, to 90°): its outer edge half a circle, its inner one a narrower half
     // ellipse, the two nearly meeting at the horns
     const outer = t => [Math.cos(t) * r, Math.sin(t) * r], inner = t => [(Math.cos(t) * 0.38 + 0.02) * r, Math.sin(t) * 0.97 * r];
@@ -1829,23 +1829,23 @@ function drawMoon(s, c) {
     x.beginPath();
     for (const k of CREASES) for (const sg of [-1, 1]) {
       const [ox, oy] = outer(sg * k), [ix, iy] = inner(sg * k);
-      ribbon(x, [[lerp(ix, ox, 0.08), lerp(iy, oy, 0.08)], [(ix + ox) / 2, (iy + oy) / 2 - sg * 0.05 * r], [lerp(ix, ox, 0.92), lerp(iy, oy, 0.92)]], DET * 0.8, 30 + k * 10 + sg, { tin: 2, tout: 2 });
+      ribbon(x, [[lerp(ix, ox, 0.08), lerp(iy, oy, 0.08)], [(ix + ox) / 2, (iy + oy) / 2 - sg * 0.035 * r], [lerp(ix, ox, 0.92), lerp(iy, oy, 0.92)]], DET * 0.8, 30 + k * 10 + sg, { tin: 2, tout: 2 });
     }
     loop(x, piece(-H, H), DET, 11);
     x.fillStyle = INK; x.fill();
     // a shine along each piece, near its outer edge
     x.beginPath();
-    for (const [t, w] of [[0, 10], [-38, 8], [38, 8], [-72, 5], [72, 5]]) {
+    for (const [t, w] of [[0, 12], [-51, 8], [51, 8], [-78, 5], [78, 5]]) {
       const pts = [];
       for (let i = 0; i <= 4; i++) { const tt = (t + (i / 4 - 0.5) * w * 2) * D; pts.push([Math.cos(tt) * 0.86 * r, Math.sin(tt) * 0.86 * r]); }
       ribbon(x, pts, TEX * 1.2, 5 + t / 9, { tin: 2, tout: 2 });
     }
     x.fillStyle = rgba(C.crumb); x.fill();
-    // a closed eye with lashes, and a small smile, on the middle piece
+    // a closed eye with lashes, and a small smile, along the inner edge of the middle piece
     x.beginPath();
-    ribbon(x, ellipse(r * 0.73, -r * 0.12, r * 0.11, r * 0.07, 9, 0.15 * Math.PI, 0.85 * Math.PI), TEX * 1.2, 2, { tin: 2, tout: 2 });
-    for (const k of [0.3, 0.5, 0.7]) { const a = k * Math.PI, ex = r * 0.73 + Math.cos(a) * r * 0.11, ey = -r * 0.12 + Math.sin(a) * r * 0.07; ribbon(x, [[ex, ey], [ex + Math.cos(a) * 2.4 * u, ey + Math.sin(a) * 2.4 * u]], TEX, k * 9, { tin: 1, tout: 1 }); }
-    ribbon(x, ellipse(r * 0.71, r * 0.12, r * 0.09, r * 0.06, 9, 0.2 * Math.PI, 0.8 * Math.PI), TEX * 1.1, 4, { tin: 2, tout: 2 });
+    ribbon(x, ellipse(r * 0.62, -r * 0.2, r * 0.17, r * 0.11, 9, 0.15 * Math.PI, 0.85 * Math.PI), TEX * 1.2, 2, { tin: 2, tout: 2 });
+    for (const k of [0.3, 0.5, 0.7]) { const a = k * Math.PI, ex = r * 0.62 + Math.cos(a) * r * 0.17, ey = -r * 0.2 + Math.sin(a) * r * 0.11; ribbon(x, [[ex, ey], [ex + Math.cos(a) * 3 * u, ey + Math.sin(a) * 3 * u]], TEX, k * 9, { tin: 1, tout: 1 }); }
+    ribbon(x, ellipse(r * 0.52, r * 0.3, r * 0.15, r * 0.1, 9, 0.2 * Math.PI, 0.8 * Math.PI), TEX * 1.1, 4, { tin: 2, tout: 2 });
     x.fillStyle = INK; x.fill();
   });
   c.restore();

From e49243fc0821503303e80c5fe3a063b97f85d622 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 19:50:56 +0100
Subject: [PATCH 35/46] docs: bring back the website's crescent moon

The croissant moon goes: the moon is the pale crescent it was before, asleep with its closed
eye, lashes and small smile. The denser grass stays.
---
 site/scene.js | 43 ++++++++-----------------------------------
 1 file changed, 8 insertions(+), 35 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index 571ee39c..20863673 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -120,8 +120,7 @@ const KINDS = ['sheep', 'cow', 'duck', 'monster', 'gull'];
 const C = {
   wool: hex('#FFFFFF'), yolk: hex('#FFC21A'), duck: hex('#FFD21F'), beak: hex('#FF7A1A'), pink: hex('#FF9CB0'),
   monster: hex('#FF8FC0'), chimney: hex('#E8452F'), roof: hex('#2B2B36'), door: hex('#2E58D8'), skin: hex('#F6C9A6'),
-  navy: hex('#25305E'), wood: hex('#C98B4A'), steel: hex('#D8DCE6'), tile: hex('#1D1D24'),
-  bun: hex('#F2B65A'), bake: hex('#E29A45'), crumb: hex('#FFE6B0'),
+  navy: hex('#25305E'), wood: hex('#C98B4A'), steel: hex('#D8DCE6'), moon: hex('#FFE89A'), tile: hex('#1D1D24'),
   huts: ['#FF4A36', '#2E58D8', '#FFC21A', '#36A852'].map(hex),
   kraft: hex('#CC9A5E'), kraftLit: hex('#E2B983'), kraftDark: hex('#A87442'), tape: hex('#FFE04A'), sprout: hex('#2E9B3B'),
 };
@@ -1803,45 +1802,19 @@ function drawSun(s, c) {
   c.restore();
 }
 
-/* the moon, a croissant (de lune), asleep, with a z: the moon's thin crescent in golden dough, creased into five, its
-   horns a little more baked */
+/* a crescent moon, asleep, with a z */
 function drawMoon(s, c) {
   const g = s.g, u = g.u, m = s.moonPos();
   if (m.a <= 0) return;
-  const r = 30 * u, sz = r * 3.4;
+  const r = 25 * u, sz = r * 3.4;
   c.save(); c.beginPath(); c.rect(0, 0, g.W, g.horizon); c.clip();
   c.globalAlpha = m.a;
   s.sprite('moon', sz, sz, m.x, m.y, x => {
-    const D = Math.PI / 180, H = Math.PI / 2, CREASES = [36 * D, 66 * D];
-    // the crescent (t from -90°, the top horn, to 90°): its outer edge half a circle, its inner one a narrower half
-    // ellipse, the two nearly meeting at the horns
-    const outer = t => [Math.cos(t) * r, Math.sin(t) * r], inner = t => [(Math.cos(t) * 0.38 + 0.02) * r, Math.sin(t) * 0.97 * r];
-    const piece = (t0, t1) => {
-      const pts = [], n = Math.max(3, Math.round((t1 - t0) / (4 * D)));
-      for (let i = 0; i <= n; i++) pts.push(outer(lerp(t0, t1, i / n)));
-      for (let i = n; i >= 0; i--) pts.push(inner(lerp(t0, t1, i / n)));
-      return pts;
-    };
-    shape(x, piece(-H, H), C.bun, DET, 11);
-    // the horns, more baked
-    for (const sg of [-1, 1]) print(x, sg < 0 ? piece(-H, -CREASES[1]) : piece(CREASES[1], H), C.bake);
-    // the creases, bowed toward the middle, then the pen round it all again over the baked horns
-    x.beginPath();
-    for (const k of CREASES) for (const sg of [-1, 1]) {
-      const [ox, oy] = outer(sg * k), [ix, iy] = inner(sg * k);
-      ribbon(x, [[lerp(ix, ox, 0.08), lerp(iy, oy, 0.08)], [(ix + ox) / 2, (iy + oy) / 2 - sg * 0.035 * r], [lerp(ix, ox, 0.92), lerp(iy, oy, 0.92)]], DET * 0.8, 30 + k * 10 + sg, { tin: 2, tout: 2 });
-    }
-    loop(x, piece(-H, H), DET, 11);
-    x.fillStyle = INK; x.fill();
-    // a shine along each piece, near its outer edge
-    x.beginPath();
-    for (const [t, w] of [[0, 12], [-51, 8], [51, 8], [-78, 5], [78, 5]]) {
-      const pts = [];
-      for (let i = 0; i <= 4; i++) { const tt = (t + (i / 4 - 0.5) * w * 2) * D; pts.push([Math.cos(tt) * 0.86 * r, Math.sin(tt) * 0.86 * r]); }
-      ribbon(x, pts, TEX * 1.2, 5 + t / 9, { tin: 2, tout: 2 });
-    }
-    x.fillStyle = rgba(C.crumb); x.fill();
-    // a closed eye with lashes, and a small smile, along the inner edge of the middle piece
+    const cres = [];
+    for (let i = 0; i <= 26; i++) { const a = -Math.PI / 2 + i / 26 * Math.PI; cres.push([Math.cos(a) * r, Math.sin(a) * r]); }
+    for (let i = 25; i >= 1; i--) { const a = -Math.PI / 2 + i / 26 * Math.PI; cres.push([Math.cos(a) * r * 0.38 + r * 0.02, Math.sin(a) * r * 0.97]); }
+    shape(x, dens(cres, 3, true), C.moon, DET, 11);
+    // a closed eye with lashes, and a small smile
     x.beginPath();
     ribbon(x, ellipse(r * 0.62, -r * 0.2, r * 0.17, r * 0.11, 9, 0.15 * Math.PI, 0.85 * Math.PI), TEX * 1.2, 2, { tin: 2, tout: 2 });
     for (const k of [0.3, 0.5, 0.7]) { const a = k * Math.PI, ex = r * 0.62 + Math.cos(a) * r * 0.17, ey = -r * 0.2 + Math.sin(a) * r * 0.11; ribbon(x, [[ex, ey], [ex + Math.cos(a) * 3 * u, ey + Math.sin(a) * 3 * u]], TEX, k * 9, { tin: 1, tout: 1 }); }

From a934c369fc72373e0c356ea2cbea1d8fb0db8478 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 20:25:57 +0100
Subject: [PATCH 36/46] docs: let visitors knock on the website's cottage door

A click or a tap on the keeper's cottage door says "knock knock", jiggles the door and
turns the light to it. The door swings open, the keeper looks out to the left and then to
the right, wonders who knocked, goes back in and shuts it, in about 3 s. The doorway is dark
by day and lamp-lit at night, its light spilling onto the grass.

When the keeper is out on the ridge with his tile, nobody comes; when the door is already
open at night, a knock only says so. Nothing drops where you knock, and with reduced motion
the door and the keeper change without moving.
---
 site/scene.js | 90 ++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 85 insertions(+), 5 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index 20863673..4008c375 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -222,6 +222,10 @@ const WAKE = {
   dips: [[0.22, 0.27], [0.52, 0.58], [0.63, 0.67], [0.88, 0.93], [1.14, 1.19]],
   out: 0.14, again: [[0.24, 0.28, 0.85], [0.62, 0.36, 1]], on: 0.98, read: 1.22, dur: 1.1, end: 2.45,
 };
+// a knock at the cottage's door, in seconds from the knock: it opens over `open`, the keeper is in the doorway from
+// `keeper`[0] to [1], looking out to the left and from `right` to the right, wonders (`huh`) and goes in; it shuts over
+// `shut`, and it's over at `end` (`away`, when he's out on the ridge and nobody comes)
+const VISIT = { open: [0.55, 0.8], keeper: [0.7, 2.6], right: 1.6, huh: 2.2, shut: [2.62, 2.88], end: 2.95, away: 1.6 };
 // the grass on the hill: at most this many tufts (fewer on phones), a new one every 3 to 6 s while there are fewer
 const MEADOW_MAX = 14, MEADOW_PHONE = 8, SPROUT_MIN = 3, SPROUT_MAX = 6;
 
@@ -259,6 +263,7 @@ class Scene {
     this.flocked = false; this.meadow = []; this.sproutAt = 0;
     this.held = !!this.o.held; this.sweep = null;
     this.dozing = false; this.wokeAt = -9; this.waking = false; this.nightPath = this.riseAt = null; this.popped = false; this.frozen = false;
+    this.visit = null;
     this.box = { v: null, gx: null, gy: null, side: null, lastSide: null, la: 0, seenAt: -9, hop: -9, wob: -9, nextWob: 0, peek: -9, lit: 0, open: false, openAt: -9, blinkAt: -9, nextBlink: 0, knocks: 0, knockAt: -9, hopK: 1, out: null, burst: 0, lid: 0, sheep: null };
     this.times = [];
     this.awake = 0; this.kick = 0; this.raf = 0; this.timer = 0; this.last = null;
@@ -361,6 +366,13 @@ class Scene {
       this.wake();
       return false;
     }
+    // the cottage's door: knock knock, and the keeper comes to see who's there; nothing drops
+    if (this.doorHit(x, y)) {
+      this.aim(x, y);
+      this.knock();
+      this.wake();
+      return false;
+    }
     this.aim(x, y);
     this.wake();
     if (y < this.top) return false;
@@ -1020,7 +1032,7 @@ class Scene {
     this.box.hop = this.box.peek = -9;
     this.ripples = [];
     this.endBall(); this.endBore();
-    this.wakePath = this.gaze = null; this.waking = false;
+    this.wakePath = this.gaze = this.visit = null; this.waking = false;
     this.regrowAt = this.hatKick = -9;
     this.doodles = []; this.splashes = []; this.look = null;
   }
@@ -1054,7 +1066,7 @@ class Scene {
     // reduced motion and nothing moving: the scene sleeps until the next call or input
   }
   busy() {
-    if (this.sweep || this.wakePath || this.gaze || this.showing() || this.t - this.wokeAt < WAKE.open + 0.2 || this.t - this.labelsAt < 0.6) return true;
+    if (this.sweep || this.wakePath || this.gaze || this.visit || this.showing() || this.t - this.wokeAt < WAKE.open + 0.2 || this.t - this.labelsAt < 0.6) return true;
     if (Math.abs(this.box.lid - (this.boxEmpty() ? 1 : 0)) > 0.01) return true;
     if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
@@ -1119,6 +1131,18 @@ class Scene {
       sc.x += sc.dir * 7 * u * dt;
       if (sc.x > sc.x1) sc.dir = -1; else if (sc.x < sc.x0) sc.dir = 1;
     }
+    // at the cottage's door: the keeper wonders who knocked (or nobody comes), and it's over
+    const v = this.visit;
+    if (v) {
+      const a = this.t - v.t0, k = g.cot, d = k.door;
+      if (!v.huh && d && a >= (v.away ? 0.9 : VISIT.huh)) {
+        // (by the cottage, where the knock was: over its roof, the pen wouldn't show)
+        v.huh = true;
+        if (v.away) this.doodle('huh', d.x + d.w / 2, d.y - 8 * u, { text: '…', life: 1.1 });
+        else this.doodle('huh', k.x + k.w * 0.66, d.y + d.h * 0.15, { text: '?', align: 'left', life: 1 });
+      }
+      if (a > (v.away ? VISIT.away : VISIT.end)) this.visit = null;
+    }
     // the eye blinks now and then
     if (!rm && this.t > this.blink.next) { this.blink.at = this.t; this.blink.next = this.t + 3 + Math.random() * 5; }
     // its lamp lit for good, after all that straining: the hat jumps
@@ -1515,6 +1539,20 @@ class Scene {
     const p = this.boxAt(), k = p.k, pad = this.ptr.kind === 'touch' ? 14 : 7;
     return x > p.x - BOX.hw * k - pad && x < p.x + (BOX.hw + BOX.dx) * k + pad && y > p.y + (BOX.dy - BOX.hh) * k - pad && y < p.y + BOX.hh * k + pad;
   }
+  // the cottage's door, with a little room round it
+  doorHit(x, y) {
+    const d = this.g.cot.door, pad = this.ptr.kind === 'touch' ? 10 : 5;
+    return !!d && x > d.x - pad && x < d.x + d.w + pad && y > d.y - pad && y < d.y + d.h + pad;
+  }
+  // knock knock: the keeper comes to the door (see VISIT and drawVisit), unless he's out on the ridge with his tile
+  // (nobody comes) or already at the open door at night
+  knock() {
+    const k = this.g.cot, d = k.door, u = this.g.u;
+    this.doodles = this.doodles.filter(o => o.kind !== 'knock');
+    this.doodle('knock', k.x + k.w * 0.62, d.y + d.h * 0.3, { text: 'knock knock', align: 'left', life: 1.3 });
+    if (this.visit || this.pres.install > 0.01) return;
+    this.visit = { t0: this.t, away: this.pres.edit > 0.01, huh: false };
+  }
   // a click or a tap: it hops (not without motion) and says so, higher and louder with each knock in a row
   baa() {
     const b = this.box;
@@ -1739,6 +1777,7 @@ function drawScene(s, c) {
   s.layer('front', { x: x0, y: y0, w: W - x0, h: y1 - y0 }, x => { drawHill(s, x); drawCottage(s, x); drawTower(s, x); });
   drawHillLight(s, c);
   drawTufts(s, c);
+  drawVisit(s, c);
   drawSmoke(s, c);
   drawEye(s, c);
   drawHat(s, c);
@@ -2530,6 +2569,47 @@ function drawEditKeeper(s, c, p) {
   c.globalAlpha = 1;
 }
 
+/* someone knocked at the cottage (see knock and VISIT): the door jumps under the knocks, then swings open; the keeper
+   looks out to the left and to the right, sees nobody, goes back in and shuts it */
+function drawVisit(s, c) {
+  const v = s.visit, g = s.g, k = g.cot, d = k.door;
+  if (!v || !d) return;
+  const u = g.u, P = s.P, a = s.t - v.t0, rm = s.reduced, V = VISIT, sc = g.portrait ? 1.05 : 1.45;
+  const open = v.away ? 0 : rm ? (a >= V.open[0] && a < V.shut[1] ? 1 : 0) : smooth(V.open[0], V.open[1], a) * (1 - smooth(V.shut[0], V.shut[1], a));
+  const jig = rm || a > 0.45 ? 0 : Math.sin(a * 55) * 0.9 * u * (1 - a / 0.45);
+  if (open < 0.005 && jig === 0) return;
+  const night = smooth(0.45, 0.75, s.d), warm = hex('#FFD45C');
+  const frame = [[d.x, k.base], [d.x, d.y], [d.x + d.w, d.y], [d.x + d.w, k.base]];
+  if (open < 0.005) {
+    // shut and jumping: the wall where the door was, under it
+    poly(c, [[d.x - 2 * u, k.base], [d.x - 2 * u, d.y - 2 * u], [d.x + d.w + 2 * u, d.y - 2 * u], [d.x + d.w + 2 * u, k.base]]);
+    c.fillStyle = rgba(mul(hex('#FFFFFF'), P.paper)); c.fill();
+  } else {
+    // inside, dark by day and lamp-lit at night, the light spilling onto the grass
+    if (night > 0.05) {
+      c.globalAlpha = open * night;
+      poly(c, [[d.x, k.base], [d.x + d.w, k.base], [d.x + d.w + 44 * u, k.base + 34 * u], [d.x - 34 * u, k.base + 34 * u]]);
+      c.fillStyle = rgba(mix(P.hill, warm, 0.62)); c.fill();
+      c.globalAlpha = 1;
+    }
+    poly(c, frame); c.fillStyle = rgba(mix(mul(C.roof, P.paper), warm, night)); c.fill();
+    // the keeper in the doorway, leaning out the way he looks
+    const kin = rm ? (a >= V.keeper[0] && a < V.keeper[1] ? 1 : 0) : smooth(V.keeper[0], V.keeper[0] + 0.12, a) * (1 - smooth(V.keeper[1] - 0.14, V.keeper[1], a));
+    if (kin > 0.01) {
+      const right = a >= V.right, lean = rm ? 0 : (right ? 1 : -1) * 2.5 * u * sc;
+      c.globalAlpha = kin;
+      drawKeeper(s, c, d.x + d.w / 2 + lean, k.base, sc, 'stand', !right, 0);
+      c.globalAlpha = 1;
+    }
+  }
+  // the door, swinging out on its right-hand hinge until it lies against the wall
+  const hx = d.x + d.w + jig, fx = lerp(d.x, d.x + d.w * 1.55, open) + jig;
+  const door = [[hx, k.base], [hx, d.y], [fx, d.y + 2 * u * open], [fx, k.base - 1 * u * open]];
+  print(c, door, mul(C.door, P.paper));
+  c.beginPath(); edges(c, door, DET * 0.85, 3, true, { ov: 0.6 }); c.fillStyle = INK; c.fill();
+  if (Math.abs(fx - hx) > 3 * u) dot(c, lerp(hx, fx, 0.85), k.base - d.h * 0.48, 1.3 * u + 0.4, INK);
+}
+
 /* install: night, the cottage door open with warm light, the keeper waving */
 function drawDoorway(s, c, p) {
   const g = s.g, u = g.u, P = s.P, k = g.cot, d = k.door;
@@ -2978,13 +3058,13 @@ function drawDoodles(s, c) {
     const shake = d.kind === 'hehe' && !rm ? (Math.floor(a * 9) % 2 ? -1 : 1) * 1.3 * u : 0;
     c.translate(d.x, d.y - (rm ? 0 : a * (d.kind === 'plop' ? 12 : munch ? 7 : 8) * u) + shake); c.scale(k, k);
     const text = d.text || (d.kind === 'boink' ? 'boink!' : d.kind);
-    label(c, text, 0, 0, size, col, d.align, d.kind === 'boink' ? -0.09 * dir : d.kind === 'pok' ? 0.12 * dir : munch ? -0.1 * dir : d.kind === 'baa' ? 0.1 * dir : -0.06);
+    label(c, text, 0, 0, size, col, d.align, d.kind === 'boink' ? -0.09 * dir : d.kind === 'pok' ? 0.12 * dir : munch ? -0.1 * dir : d.kind === 'baa' || d.kind === 'knock' ? 0.1 * dir : -0.06);
     c.beginPath();
     if (d.kind === 'boink') {
       // the knock, in three short strokes toward the widget
       for (const i of [0, 1, 2]) { const an = -Math.PI / 2 - dir * (0.25 + i * 0.42), r0 = size * 0.32, r1 = size * 0.72; ribbon(c, [[Math.cos(an) * r0, -size * 0.3 + Math.sin(an) * r0], [Math.cos(an) * r1, -size * 0.3 + Math.sin(an) * r1]], TEX * 1.1, i + 7, { tin: 1, tout: 2 }); }
-    } else if (d.kind === 'baa') {
-      // two short strokes, from the box toward the word
+    } else if (d.kind === 'baa' || d.kind === 'knock') {
+      // two short strokes, from the box (or the door) toward the word
       for (const i of [0, 1]) { const an = Math.PI * (i ? 0.1 : -0.12), x0 = -dir * size * 0.6, r = size * 0.42; ribbon(c, [[x0 - dir * Math.cos(an) * r * 0.2, -size * 0.1 + Math.sin(an) * r * 0.6 + i * size * 0.38 - size * 0.12], [x0 + dir * Math.cos(an) * r * 0.55, -size * 0.1 + i * size * 0.38 - size * 0.12]], TEX * 1.1, i + 5, { tin: 1, tout: 2 }); }
     } else if (d.kind === 'plop') {
       // two drops over the word

From 1c3ebfac3d29372c524e641713ff0582c061df3e Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 21:03:46 +0100
Subject: [PATCH 37/46] docs: light the website's cottage from inside when its
 door opens

When the keeper comes to the door, the room behind it is lamp-lit by day too: the doorway glows
warm, its light spills onto the grass, and the window lights up until just after he shuts the
door. At night it stays as it was, the window being lit anyway.
---
 site/scene.js | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index 4008c375..75b6d2ea 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -2569,8 +2569,8 @@ function drawEditKeeper(s, c, p) {
   c.globalAlpha = 1;
 }
 
-/* someone knocked at the cottage (see knock and VISIT): the door jumps under the knocks, then swings open; the keeper
-   looks out to the left and to the right, sees nobody, goes back in and shuts it */
+/* someone knocked at the cottage (see knock and VISIT): the door jumps under the knocks, then swings open on a lamp-lit
+   room; the keeper looks out to the left and to the right, sees nobody, goes back in and shuts it */
 function drawVisit(s, c) {
   const v = s.visit, g = s.g, k = g.cot, d = k.door;
   if (!v || !d) return;
@@ -2580,19 +2580,29 @@ function drawVisit(s, c) {
   if (open < 0.005 && jig === 0) return;
   const night = smooth(0.45, 0.75, s.d), warm = hex('#FFD45C');
   const frame = [[d.x, k.base], [d.x, d.y], [d.x + d.w, d.y], [d.x + d.w, k.base]];
+  // the lamp inside, through the window too by day (lit at night anyway), from the door opening until just after
+  // it shuts
+  const lamp = (rm ? (a >= V.open[0] && a < V.shut[1] + 0.2 ? 1 : 0) : smooth(V.open[0], V.open[1], a) * (1 - smooth(V.shut[1], V.shut[1] + 0.3, a))) * (1 - night);
+  if (lamp > 0.01 && !v.away) {
+    const w = k.w, h = k.h, x0 = k.x - w / 2, y0 = k.base - h, wx = x0 + w * 0.14, wy = y0 + h * 0.24, ww = w * 0.27, wh = h * 0.36;
+    const pane = [[wx, wy], [wx + ww, wy], [wx + ww, wy + wh], [wx, wy + wh]];
+    c.globalAlpha = lamp; print(c, pane, warm); c.globalAlpha = 1;
+    c.beginPath(); edges(c, pane, DET * 0.85, 11, true, { ov: 1.2 });
+    ribbon(c, [[wx + ww / 2, wy + 1], [wx + ww / 2, wy + wh - 1]], TEX, 12, { tin: 1, tout: 1, w0: 0.8, w1: 0.8 });
+    ribbon(c, [[wx + 1, wy + wh / 2], [wx + ww - 1, wy + wh / 2]], TEX, 13, { tin: 1, tout: 1, w0: 0.8, w1: 0.8 });
+    c.fillStyle = INK; c.fill();
+  }
   if (open < 0.005) {
     // shut and jumping: the wall where the door was, under it
     poly(c, [[d.x - 2 * u, k.base], [d.x - 2 * u, d.y - 2 * u], [d.x + d.w + 2 * u, d.y - 2 * u], [d.x + d.w + 2 * u, k.base]]);
     c.fillStyle = rgba(mul(hex('#FFFFFF'), P.paper)); c.fill();
   } else {
-    // inside, dark by day and lamp-lit at night, the light spilling onto the grass
-    if (night > 0.05) {
-      c.globalAlpha = open * night;
-      poly(c, [[d.x, k.base], [d.x + d.w, k.base], [d.x + d.w + 44 * u, k.base + 34 * u], [d.x - 34 * u, k.base + 34 * u]]);
-      c.fillStyle = rgba(mix(P.hill, warm, 0.62)); c.fill();
-      c.globalAlpha = 1;
-    }
-    poly(c, frame); c.fillStyle = rgba(mix(mul(C.roof, P.paper), warm, night)); c.fill();
+    // inside, the lamp: the doorway warm, its light spilling onto the grass (fainter by day)
+    c.globalAlpha = open * lerp(0.55, 1, night);
+    poly(c, [[d.x, k.base], [d.x + d.w, k.base], [d.x + d.w + 44 * u, k.base + 34 * u], [d.x - 34 * u, k.base + 34 * u]]);
+    c.fillStyle = rgba(mix(P.hill, warm, 0.62)); c.fill();
+    c.globalAlpha = 1;
+    poly(c, frame); c.fillStyle = rgba(warm); c.fill();
     // the keeper in the doorway, leaning out the way he looks
     const kin = rm ? (a >= V.keeper[0] && a < V.keeper[1] ? 1 : 0) : smooth(V.keeper[0], V.keeper[0] + 0.12, a) * (1 - smooth(V.keeper[1] - 0.14, V.keeper[1], a));
     if (kin > 0.01) {

From a8837f20b9737635ff6ae12793bf40c68c0a7b0e Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 21:06:45 +0100
Subject: [PATCH 38/46] docs: let the website's keeper turn and walk back in
 before the door shuts

He used to fade away where he stood. Having looked out to the left and to the right, he now
turns his back (white hair under his cap, no face) and walks into the lamp-lit room, a little
smaller and higher as he goes, and fades into the light; then the door shuts. The visit takes
about 3.3 s.
---
 site/scene.js | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index 75b6d2ea..0d43f523 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -223,9 +223,9 @@ const WAKE = {
   out: 0.14, again: [[0.24, 0.28, 0.85], [0.62, 0.36, 1]], on: 0.98, read: 1.22, dur: 1.1, end: 2.45,
 };
 // a knock at the cottage's door, in seconds from the knock: it opens over `open`, the keeper is in the doorway from
-// `keeper`[0] to [1], looking out to the left and from `right` to the right, wonders (`huh`) and goes in; it shuts over
-// `shut`, and it's over at `end` (`away`, when he's out on the ridge and nobody comes)
-const VISIT = { open: [0.55, 0.8], keeper: [0.7, 2.6], right: 1.6, huh: 2.2, shut: [2.62, 2.88], end: 2.95, away: 1.6 };
+// `keeper`[0] to [1], looking out to the left and from `right` to the right; he wonders (`huh`), turns his back at `turn`
+// and walks back in; it shuts over `shut`, and it's over at `end` (`away`, when he's out on the ridge and nobody comes)
+const VISIT = { open: [0.55, 0.8], keeper: [0.7, 2.95], right: 1.6, huh: 2.2, turn: 2.4, shut: [2.97, 3.22], end: 3.3, away: 1.6 };
 // the grass on the hill: at most this many tufts (fewer on phones), a new one every 3 to 6 s while there are fewer
 const MEADOW_MAX = 14, MEADOW_PHONE = 8, SPROUT_MIN = 3, SPROUT_MAX = 6;
 
@@ -2522,6 +2522,18 @@ function drawKeeper(s, c, x, y, sc, pose, flip, walk) {
     ribbon(c, [[5 * u, -22 * u], [6.5 * u + st * 4 * u, -14 * u]], DET * 1.1, 5, { tin: 1, tout: 1 });
   }
   c.fillStyle = INK; c.fill();
+  if (pose === 'back') {
+    // seen from behind: white hair under the cap, his ears, no face
+    const head = ellipse(0, -29 * u, 5 * u, 5.4 * u, 20);
+    for (const sx of [-1, 1]) dot(c, sx * 5 * u, -28.6 * u, 1.3 * u, skin);
+    print(c, head, white);
+    c.beginPath(); loop(c, head, DET, 6, { over: 0.04 }); c.fillStyle = INK; c.fill();
+    const back = [[-5.2 * u, -31.5 * u], [-4.8 * u, -36.2 * u], [4.8 * u, -36.2 * u], [5.2 * u, -31.5 * u]];
+    poly(c, back); c.fillStyle = rgba(navy); c.fill();
+    c.beginPath(); edges(c, back, DET * 0.9, 8, false, { ov: 0.5 }); c.fillStyle = INK; c.fill();
+    c.restore();
+    return;
+  }
   // head, white beard, cap with a peak
   const head = ellipse(0.5 * u, -29 * u, 5 * u, 5.4 * u, 20);
   print(c, head, skin);
@@ -2570,7 +2582,7 @@ function drawEditKeeper(s, c, p) {
 }
 
 /* someone knocked at the cottage (see knock and VISIT): the door jumps under the knocks, then swings open on a lamp-lit
-   room; the keeper looks out to the left and to the right, sees nobody, goes back in and shuts it */
+   room; the keeper looks out to the left and to the right, sees nobody, turns his back, walks in and shuts it */
 function drawVisit(s, c) {
   const v = s.visit, g = s.g, k = g.cot, d = k.door;
   if (!v || !d) return;
@@ -2603,12 +2615,14 @@ function drawVisit(s, c) {
     c.fillStyle = rgba(mix(P.hill, warm, 0.62)); c.fill();
     c.globalAlpha = 1;
     poly(c, frame); c.fillStyle = rgba(warm); c.fill();
-    // the keeper in the doorway, leaning out the way he looks
+    // the keeper in the doorway, leaning out the way he looks; then his back, walking in, a little smaller and higher
+    // the further in he is, into the lamplight
     const kin = rm ? (a >= V.keeper[0] && a < V.keeper[1] ? 1 : 0) : smooth(V.keeper[0], V.keeper[0] + 0.12, a) * (1 - smooth(V.keeper[1] - 0.14, V.keeper[1], a));
     if (kin > 0.01) {
-      const right = a >= V.right, lean = rm ? 0 : (right ? 1 : -1) * 2.5 * u * sc;
+      const right = a >= V.right, back = a >= V.turn, deep = rm ? 0 : smooth(V.turn + 0.1, V.keeper[1], a);
+      const lean = rm ? 0 : (right ? 1 : -1) * 2.5 * u * sc * (1 - smooth(V.turn - 0.05, V.turn + 0.15, a));
       c.globalAlpha = kin;
-      drawKeeper(s, c, d.x + d.w / 2 + lean, k.base, sc, 'stand', !right, 0);
+      drawKeeper(s, c, d.x + d.w / 2 + lean, k.base - 5 * u * sc * deep, sc * (1 - 0.15 * deep), back ? 'back' : 'stand', !right && !back, back && !rm ? s.t * 9 : 0);
       c.globalAlpha = 1;
     }
   }

From 4e4f3f1a48404510382a369008419b18573fdc99 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 21:40:39 +0100
Subject: [PATCH 39/46] docs: light only the website's cottage doorway by day

By day the knock's lamp-lit room shows only in the open doorway: the window keeps its glass
and no light spills onto the grass. At night it stays as it was, the doorway and window lit
and the light spilling out.
---
 site/scene.js | 24 +++++++-----------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index 0d43f523..fc84a26c 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -2592,28 +2592,18 @@ function drawVisit(s, c) {
   if (open < 0.005 && jig === 0) return;
   const night = smooth(0.45, 0.75, s.d), warm = hex('#FFD45C');
   const frame = [[d.x, k.base], [d.x, d.y], [d.x + d.w, d.y], [d.x + d.w, k.base]];
-  // the lamp inside, through the window too by day (lit at night anyway), from the door opening until just after
-  // it shuts
-  const lamp = (rm ? (a >= V.open[0] && a < V.shut[1] + 0.2 ? 1 : 0) : smooth(V.open[0], V.open[1], a) * (1 - smooth(V.shut[1], V.shut[1] + 0.3, a))) * (1 - night);
-  if (lamp > 0.01 && !v.away) {
-    const w = k.w, h = k.h, x0 = k.x - w / 2, y0 = k.base - h, wx = x0 + w * 0.14, wy = y0 + h * 0.24, ww = w * 0.27, wh = h * 0.36;
-    const pane = [[wx, wy], [wx + ww, wy], [wx + ww, wy + wh], [wx, wy + wh]];
-    c.globalAlpha = lamp; print(c, pane, warm); c.globalAlpha = 1;
-    c.beginPath(); edges(c, pane, DET * 0.85, 11, true, { ov: 1.2 });
-    ribbon(c, [[wx + ww / 2, wy + 1], [wx + ww / 2, wy + wh - 1]], TEX, 12, { tin: 1, tout: 1, w0: 0.8, w1: 0.8 });
-    ribbon(c, [[wx + 1, wy + wh / 2], [wx + ww - 1, wy + wh / 2]], TEX, 13, { tin: 1, tout: 1, w0: 0.8, w1: 0.8 });
-    c.fillStyle = INK; c.fill();
-  }
   if (open < 0.005) {
     // shut and jumping: the wall where the door was, under it
     poly(c, [[d.x - 2 * u, k.base], [d.x - 2 * u, d.y - 2 * u], [d.x + d.w + 2 * u, d.y - 2 * u], [d.x + d.w + 2 * u, k.base]]);
     c.fillStyle = rgba(mul(hex('#FFFFFF'), P.paper)); c.fill();
   } else {
-    // inside, the lamp: the doorway warm, its light spilling onto the grass (fainter by day)
-    c.globalAlpha = open * lerp(0.55, 1, night);
-    poly(c, [[d.x, k.base], [d.x + d.w, k.base], [d.x + d.w + 44 * u, k.base + 34 * u], [d.x - 34 * u, k.base + 34 * u]]);
-    c.fillStyle = rgba(mix(P.hill, warm, 0.62)); c.fill();
-    c.globalAlpha = 1;
+    // inside, the lamp: the doorway warm, and at night its light spilling onto the grass
+    if (night > 0.05) {
+      c.globalAlpha = open * night;
+      poly(c, [[d.x, k.base], [d.x + d.w, k.base], [d.x + d.w + 44 * u, k.base + 34 * u], [d.x - 34 * u, k.base + 34 * u]]);
+      c.fillStyle = rgba(mix(P.hill, warm, 0.62)); c.fill();
+      c.globalAlpha = 1;
+    }
     poly(c, frame); c.fillStyle = rgba(warm); c.fill();
     // the keeper in the doorway, leaning out the way he looks; then his back, walking in, a little smaller and higher
     // the further in he is, into the lamplight

From d4980c1ecfcc846693009f149ddeeb180ceabd49 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Fri, 30 Oct 2026 21:46:42 +0100
Subject: [PATCH 40/46] docs: bring the website's keeper to the door on the
 third knock

One knock was too quick. Like the sheep's box, the cottage's door now counts knocks in a row
(each within 2.5 s of the last): it jolts and says "knock", then "knock knock", and on the
third, "knock knock knock", the keeper comes to the door.
---
 site/scene.js | 34 ++++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index fc84a26c..0274e7e3 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -222,7 +222,7 @@ const WAKE = {
   dips: [[0.22, 0.27], [0.52, 0.58], [0.63, 0.67], [0.88, 0.93], [1.14, 1.19]],
   out: 0.14, again: [[0.24, 0.28, 0.85], [0.62, 0.36, 1]], on: 0.98, read: 1.22, dur: 1.1, end: 2.45,
 };
-// a knock at the cottage's door, in seconds from the knock: it opens over `open`, the keeper is in the doorway from
+// a visit at the cottage's door, in seconds from the third knock in a row: it opens over `open`, the keeper is in the doorway from
 // `keeper`[0] to [1], looking out to the left and from `right` to the right; he wonders (`huh`), turns his back at `turn`
 // and walks back in; it shuts over `shut`, and it's over at `end` (`away`, when he's out on the ridge and nobody comes)
 const VISIT = { open: [0.55, 0.8], keeper: [0.7, 2.95], right: 1.6, huh: 2.2, turn: 2.4, shut: [2.97, 3.22], end: 3.3, away: 1.6 };
@@ -263,7 +263,7 @@ class Scene {
     this.flocked = false; this.meadow = []; this.sproutAt = 0;
     this.held = !!this.o.held; this.sweep = null;
     this.dozing = false; this.wokeAt = -9; this.waking = false; this.nightPath = this.riseAt = null; this.popped = false; this.frozen = false;
-    this.visit = null;
+    this.visit = null; this.knocks = { n: 0, at: -9 };
     this.box = { v: null, gx: null, gy: null, side: null, lastSide: null, la: 0, seenAt: -9, hop: -9, wob: -9, nextWob: 0, peek: -9, lit: 0, open: false, openAt: -9, blinkAt: -9, nextBlink: 0, knocks: 0, knockAt: -9, hopK: 1, out: null, burst: 0, lid: 0, sheep: null };
     this.times = [];
     this.awake = 0; this.kick = 0; this.raf = 0; this.timer = 0; this.last = null;
@@ -1066,7 +1066,7 @@ class Scene {
     // reduced motion and nothing moving: the scene sleeps until the next call or input
   }
   busy() {
-    if (this.sweep || this.wakePath || this.gaze || this.visit || this.showing() || this.t - this.wokeAt < WAKE.open + 0.2 || this.t - this.labelsAt < 0.6) return true;
+    if (this.sweep || this.wakePath || this.gaze || this.visit || this.t - this.knocks.at < 0.5 || this.showing() || this.t - this.wokeAt < WAKE.open + 0.2 || this.t - this.labelsAt < 0.6) return true;
     if (Math.abs(this.box.lid - (this.boxEmpty() ? 1 : 0)) > 0.01) return true;
     if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
@@ -1544,13 +1544,18 @@ class Scene {
     const d = this.g.cot.door, pad = this.ptr.kind === 'touch' ? 10 : 5;
     return !!d && x > d.x - pad && x < d.x + d.w + pad && y > d.y - pad && y < d.y + d.h + pad;
   }
-  // knock knock: the keeper comes to the door (see VISIT and drawVisit), unless he's out on the ridge with his tile
-  // (nobody comes) or already at the open door at night
+  // a knock: the door jumps and says so, a little more with each knock in a row; at the third the keeper comes to the
+  // door (see VISIT and drawVisit), unless he's out on the ridge with his tile (nobody comes) or already at the open
+  // door at night
   knock() {
-    const k = this.g.cot, d = k.door, u = this.g.u;
+    const k = this.g.cot, d = k.door, kn = this.knocks;
+    if (this.visit) return;
+    kn.n = this.t - kn.at < 2.5 ? kn.n + 1 : 1;
+    kn.at = this.t;
     this.doodles = this.doodles.filter(o => o.kind !== 'knock');
-    this.doodle('knock', k.x + k.w * 0.62, d.y + d.h * 0.3, { text: 'knock knock', align: 'left', life: 1.3 });
-    if (this.visit || this.pres.install > 0.01) return;
+    this.doodle('knock', k.x + k.w * 0.62, d.y + d.h * 0.3, { text: ['knock', 'knock knock', 'knock knock knock'][Math.min(kn.n, 3) - 1], align: 'left', life: 1.3 });
+    if (kn.n < 3 || this.pres.install > 0.01) return;
+    kn.n = 0;
     this.visit = { t0: this.t, away: this.pres.edit > 0.01, huh: false };
   }
   // a click or a tap: it hops (not without motion) and says so, higher and louder with each knock in a row
@@ -2581,14 +2586,15 @@ function drawEditKeeper(s, c, p) {
   c.globalAlpha = 1;
 }
 
-/* someone knocked at the cottage (see knock and VISIT): the door jumps under the knocks, then swings open on a lamp-lit
-   room; the keeper looks out to the left and to the right, sees nobody, turns his back, walks in and shuts it */
+/* someone knocked at the cottage (see knock and VISIT): the door jumps under each knock, and at the third swings open
+   on a lamp-lit room; the keeper looks out to the left and to the right, sees nobody, turns his back, walks in and shuts it */
 function drawVisit(s, c) {
   const v = s.visit, g = s.g, k = g.cot, d = k.door;
-  if (!v || !d) return;
-  const u = g.u, P = s.P, a = s.t - v.t0, rm = s.reduced, V = VISIT, sc = g.portrait ? 1.05 : 1.45;
-  const open = v.away ? 0 : rm ? (a >= V.open[0] && a < V.shut[1] ? 1 : 0) : smooth(V.open[0], V.open[1], a) * (1 - smooth(V.shut[0], V.shut[1], a));
-  const jig = rm || a > 0.45 ? 0 : Math.sin(a * 55) * 0.9 * u * (1 - a / 0.45);
+  if (!d) return;
+  const u = g.u, P = s.P, a = v ? s.t - v.t0 : -1, rm = s.reduced, V = VISIT, sc = g.portrait ? 1.05 : 1.45, ka = s.t - s.knocks.at;
+  const open = !v || v.away ? 0 : rm ? (a >= V.open[0] && a < V.shut[1] ? 1 : 0) : smooth(V.open[0], V.open[1], a) * (1 - smooth(V.shut[0], V.shut[1], a));
+  // each knock jolts it
+  const jig = rm || ka > 0.45 ? 0 : Math.sin(ka * 55) * 0.9 * u * (1 - ka / 0.45);
   if (open < 0.005 && jig === 0) return;
   const night = smooth(0.45, 0.75, s.d), warm = hex('#FFD45C');
   const frame = [[d.x, k.base], [d.x, d.y], [d.x + d.w, d.y], [d.x + d.w, k.base]];

From 7780e3af340475308d9accf44702235a5bb517d4 Mon Sep 17 00:00:00 2001
From: Sebastien Graf <95282692+Seb-GRAF@users.noreply.github.com>
Date: Sat, 31 Oct 2026 11:28:05 +0100
Subject: [PATCH 41/46] docs: let the website scroll on past its end, out to
 sea past an island for each theme

---
 site/index.html |  14 +-
 site/main.js    |  24 ++-
 site/scene.js   | 518 ++++++++++++++++++++++++++++++++++--------------
 site/style.css  |  13 +-
 4 files changed, 394 insertions(+), 175 deletions(-)

diff --git a/site/index.html b/site/index.html
index 7acd6d3d..1b7b3f88 100644
--- a/site/index.html
+++ b/site/index.html
@@ -388,18 +388,6 @@ <h2 id="h-install">See it on your own bar.</h2>
     </div>
   </section>
 </main>
-
-<footer class="site-foot">
-  <p>StableBar is a free, open-source status bar for macOS and an alternative to SketchyBar, built by Sebastien Graf and Steve Mendes Reis. It is available under the MIT License, including commercial use and redistribution.</p>
-  <nav aria-label="Footer">
-    <a href="https://github.com/Seb-GRAF/StableBar">Source on GitHub</a>
-    <a href="https://github.com/Seb-GRAF/StableBar/blob/main/docs/README.md">User guide</a>
-    <a href="https://github.com/Seb-GRAF/stablebar-packages">Widget store</a>
-    <a href="https://github.com/Seb-GRAF/StableBar/tree/main/examples">Examples</a>
-    <a href="https://github.com/Seb-GRAF/StableBar/releases">Releases</a>
-    <a href="privacy.html">Privacy Policy</a>
-    <a href="terms.html">Terms of Service</a>
-  </nav>
-</footer>
+<div class="dive" id="dive" aria-hidden="true" hidden></div>
 </body>
 </html>
diff --git a/site/main.js b/site/main.js
index cf6a92f4..43062c53 100644
--- a/site/main.js
+++ b/site/main.js
@@ -822,7 +822,11 @@ function measureMarks() {
   });
 }
 const smooth = t => t * t * (3 - 2 * t);
+// past the last note, the dive (see below), in laps of one island each: there is room for twelve
+const dive = document.getElementById("dive"), lap = () => dive.offsetHeight / 12, laps = () => (scrollY - dive.offsetTop) / lap();
 function hour() {
+  // out at sea: from the night the page ends on, round to day and back to night once a round of islands
+  if (!dive.hidden && laps() > 0) return { d: (1 + Math.cos(2 * Math.PI * laps() / window.Hill.islands)) / 2, name: "hero" };
   const y = scrollY + innerHeight / 2;
   let d = marks[0].d, name = marks[0].name;
   for (let i = 0; i < marks.length; i++) {
@@ -934,7 +938,7 @@ if (scene) {
   document.addEventListener("click", () => { overlay = Boolean(openId || adding || !ctx.hidden || reviewing); }, true);
   document.addEventListener("click", e => {
     if (overlay || editing || e.detail === 0 || !landed || pressedInOpening) return;
-    if (e.target.closest("a, button, input, label, pre, .note, .dock, .site-foot, [role='dialog']")) return;
+    if (e.target.closest("a, button, input, label, pre, .note, .dock, [role='dialog']")) return;
     if (String(getSelection?.() || "")) return;
     S("tap", e.clientX, e.clientY);
   });
@@ -943,6 +947,24 @@ if (scene) {
   for (const b of document.querySelectorAll("[data-drop]")) b.addEventListener("click", () => S("surprise", b.dataset.drop));
   for (const b of document.querySelectorAll("[data-play]")) b.addEventListener("click", () => { hideTour(); S("play"); });
   scene.onBar = onBar;
+
+  /* Past the last note the page goes on: once it has gone, scrolling takes you on over the sea, past the far island
+     and the ones beyond it (see ISLANDS in scene.js), through day and night (see hour). Well into the second round
+     of islands the page steps back a round, which looks the same, so it never ends; and as soon as you turn back, it
+     steps back to have its own hill just behind you, so the page is never more than an island away. */
+  if (!reduce.matches) {
+    const round = window.Hill.islands;
+    let was = scrollY;
+    const diving = () => {
+      const n = laps(), back = n >= round + 2 ? round : scrollY < was ? S("behind") : 0;
+      if (back) scrollTo(0, scrollY - back * lap());
+      was = scrollY;
+      S("setDive", Math.max(0, n - back), back);
+    };
+    dive.hidden = false;
+    addEventListener("scroll", diving, { passive: true });
+    diving();
+  }
 }
 
 /* ---------- The lighthouse plays with the bar ----------
diff --git a/site/scene.js b/site/scene.js
index 0274e7e3..9da94e67 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -228,6 +228,66 @@ const WAKE = {
 const VISIT = { open: [0.55, 0.8], keeper: [0.7, 2.95], right: 1.6, huh: 2.2, turn: 2.4, shut: [2.97, 3.22], end: 3.3, away: 1.6 };
 // the grass on the hill: at most this many tufts (fewer on phones), a new one every 3 to 6 s while there are fewer
 const MEADOW_MAX = 14, MEADOW_PHONE = 8, SPROUT_MIN = 3, SPROUT_MAX = 6;
+/* The dive past the end of the page: you go straight on toward the middle of the horizon, past islands that stand
+   one after another, DIVE_GAP times the nearest one's distance apart, off to one side and then the other. They come
+   round in this order (the first one is the page's far island); each is a ridge and a shore, as fractions of the width
+   and, up from the horizon, of the sky or, down from it, of the sea. `lx` is the lighthouse, `cx` the cottage. Each
+   wears one of the other themes: its lighthouse's pyjamas, and its ground by day (lit and shady), darker with the hour
+   like the page's green. */
+// (an island seen at its own size stands this far down the sea, as a part of it: it's as far off as the sea there)
+const DIVE_GAP = 7, SHORE = 0.27;
+const ISLANDS = [
+  // on the right, a snowy peak: the lighthouse on its shoulder, the cottage on a ledge above it
+  { theme: 'nord', ground: ['#E8EDF4', '#BFCBDB'],
+    ridge: [[0.52, 0.12], [0.56, 0.02], [0.6, -0.08], [0.65, -0.1], [0.69, -0.13], [0.74, -0.24], [0.79, -0.38], [0.82, -0.42], [0.85, -0.37], [0.9, -0.24], [0.95, -0.1], [0.99, 0.12]],
+    shore: [[0.52, 0.12], [0.6, 0.21], [0.72, 0.26], [0.86, 0.27], [0.95, 0.22], [0.99, 0.12]], lx: 0.63, cx: 0.71 },
+  // on the left, a table mountain: steep all round, flat on top
+  { theme: 'gruvbox', ground: ['#B8BB26', '#98971A'],
+    ridge: [[0.02, 0.12], [0.04, 0], [0.06, -0.12], [0.08, -0.17], [0.13, -0.18], [0.2, -0.18], [0.27, -0.17], [0.33, -0.16], [0.36, -0.11], [0.38, -0.02], [0.4, 0.12]],
+    shore: [[0.02, 0.12], [0.08, 0.22], [0.2, 0.26], [0.32, 0.23], [0.4, 0.12]], lx: 0.3, cx: 0.17 },
+  // on the right, two round hills: the cottage in the dip between them, the lighthouse on the far one
+  { theme: 'catppuccin', ground: ['#F5C2E7', '#DDA3CF'],
+    ridge: [[0.53, 0.12], [0.56, 0], [0.6, -0.1], [0.64, -0.15], [0.68, -0.13], [0.72, -0.07], [0.76, -0.06], [0.8, -0.11], [0.85, -0.19], [0.9, -0.2], [0.95, -0.12], [0.99, 0.12]],
+    shore: [[0.53, 0.12], [0.6, 0.22], [0.72, 0.26], [0.85, 0.27], [0.95, 0.22], [0.99, 0.12]], lx: 0.88, cx: 0.74 },
+  // on the left, a long slope up from a beach to a cliff over the middle, the lighthouse on its edge
+  { theme: 'leman', ground: ['#7CCDB4', '#5AB198'],
+    ridge: [[0, 0.12], [0.04, 0.06], [0.1, 0], [0.17, -0.05], [0.24, -0.1], [0.3, -0.15], [0.35, -0.19], [0.38, -0.2], [0.4, -0.14], [0.41, -0.02], [0.42, 0.12]],
+    shore: [[0, 0.12], [0.08, 0.2], [0.2, 0.24], [0.33, 0.24], [0.42, 0.12]], lx: 0.355, cx: 0.18 },
+  // on the right, a small dark crag: the lighthouse on top, the cottage at its foot
+  { theme: 'notch', ground: ['#4A4B55', '#36373F'],
+    ridge: [[0.6, 0.12], [0.62, 0.04], [0.66, 0], [0.7, -0.02], [0.73, -0.12], [0.75, -0.26], [0.78, -0.32], [0.82, -0.31], [0.85, -0.22], [0.88, -0.08], [0.91, 0.12]],
+    shore: [[0.6, 0.12], [0.66, 0.2], [0.76, 0.24], [0.86, 0.22], [0.91, 0.12]], lx: 0.8, cx: 0.67 },
+  // on the left, wide and low, sand dunes
+  { theme: 'phosphor', ground: ['#F2C46A', '#D9A548'],
+    ridge: [[0, 0.12], [0.03, 0.02], [0.08, -0.05], [0.13, -0.07], [0.18, -0.04], [0.23, -0.06], [0.28, -0.11], [0.33, -0.12], [0.38, -0.08], [0.43, -0.02], [0.46, 0.04], [0.48, 0.12]],
+    shore: [[0, 0.12], [0.07, 0.22], [0.2, 0.27], [0.36, 0.25], [0.45, 0.19], [0.48, 0.12]], lx: 0.31, cx: 0.13 },
+];
+/* What each island has of its own: its light, its animals, grass and box, its games with the bar (the page's
+   only). One island's state at a time lives on the scene (see enter); the others wait in their world objects. */
+const islandState = () => ({
+  beam: { a: Math.PI * 0.96, len: 1, flash: 0, phi: Math.PI * 0.96, steer: 0, sa: Math.PI * 0.96 },
+  wakePath: null, gaze: null, restAt: -99,
+  ripples: [], objs: [],
+  // the ball game and the bored trick (see "the lighthouse plays with the bar")
+  bar: [], ball: null, bore: null, look: null, sweep: null,
+  doodles: [], splashes: [],
+  hatKick: -9, regrowAt: -9,
+  // someone at the cottage's door (see knock)
+  visit: null, knocks: { n: 0, at: -9 },
+  // a lived-in hill: the animals already there, the grass they eat, and a sheep in a box up in the sky
+  flocked: false, meadow: [], sproutAt: 0,
+  box: { v: null, gx: null, gy: null, side: null, lastSide: null, la: 0, seenAt: -9, hop: -9, wob: -9, nextWob: 0, peek: -9, lit: 0, open: false, openAt: -9, blinkAt: -9, nextBlink: 0, knocks: 0, knockAt: -9, hopK: 1, out: null, burst: 0, lid: 0, sheep: null },
+});
+const ISLAND = ['g', ...Object.keys(islandState())];
+// the islands are drawn between these sizes: from far off, where they come out of the haze (by then the next island is
+// all there is to see, the one after it comes as you go), to going past, off the screen
+const FAR = 0.07, PAST = 30;
+// the lighthouse standing on `base` at x, h tall to its gallery, the eye in its lamp er across: its lamp and hat
+function tower(g, x, base, h, er) {
+  const T = g.lh = { x, base, h, er, gal: er * 0.62, top: base - h, wT: er * 1.62, wB: er * 2.6 };
+  g.lamp = { x, y: T.top - T.gal - er * 1.02 };
+  T.hatTop = g.lamp.y - er * 3.6;
+}
 
 class Scene {
   constructor(host, opts = {}) {
@@ -238,33 +298,29 @@ class Scene {
     cv.style.cssText = 'position:absolute;left:0;top:0;display:block;pointer-events:none';
     host.appendChild(cv);
     this.ctx = cv.getContext('2d');
+    this.fade = document.createElement('canvas').getContext('2d');
     this.top = Math.max(0, +this.o.topInset || 0);
     this.t = 0; this.d = this.dTarget = clamp(+this.o.dusk || 0); this.dTween = null; this.labelsAt = -9;
     this.state = 'hero'; this.theme = 'built-in'; this.ws = 1;
     this.pres = Object.fromEntries(STATES.map(k => [k, k === 'hero' ? 1 : 0]));
     this.since = Object.fromEntries(STATES.map(k => [k, 0]));
-    this.ptr = { x: 0, y: 0, on: false, last: -1e9, kind: 'mouse' };
+    // the pointer in client coordinates less the scene's offset; each island sees it as this.ptr, in its own (see enter)
+    this.cursor = { x: 0, y: 0, on: false, last: -1e9, kind: 'mouse' };
     this.vel = { x: 0, y: 0 };
     this.wind = 0; this.windAmb = 0.3; this.windTotal = 0.3; this.drift = 0;
-    this.beam = { a: Math.PI * 0.96, len: 1, flash: 0, phi: Math.PI * 0.96, steer: 0, sa: Math.PI * 0.96 };
     this.blink = { next: 2.5, at: -9, wink: -9 };
-    this.wakePath = null; this.gaze = null; this.restAt = -99;
-    this.ripples = []; this.objs = [];
-    this.layers = { back: [], front: [] };
+    this.layers = {};
     this.sprites = new Map();
     this.fontsV = 0; this.layoutV = 0; this.sparkle = -9; this.rebuilds = 0;
     this.onFrame = null;
-    // the ball game and the bored trick (see "the lighthouse plays with the bar")
-    this.bar = []; this.ball = null; this.bore = null; this.look = null;
-    this.doodles = []; this.splashes = [];
-    this.hatKick = -9; this.regrowAt = -9;
     this.onBar = null;
-    // a lived-in hill: the animals already there, the grass they eat, and a sheep in a box up in the sky
-    this.flocked = false; this.meadow = []; this.sproutAt = 0;
-    this.held = !!this.o.held; this.sweep = null;
+    this.held = !!this.o.held;
     this.dozing = false; this.wokeAt = -9; this.waking = false; this.nightPath = this.riseAt = null; this.popped = false; this.frozen = false;
-    this.visit = null; this.knocks = { n: 0, at: -9 };
-    this.box = { v: null, gx: null, gy: null, side: null, lastSide: null, la: 0, seenAt: -9, hop: -9, wob: -9, nextWob: 0, peek: -9, lit: 0, open: false, openAt: -9, blinkAt: -9, nextBlink: 0, knocks: 0, knockAt: -9, hopK: 1, out: null, burst: 0, lid: 0, sheep: null };
+    // the islands, by how far into the dive they are: 0 is the page's hill, whose state is on the scene to begin with
+    Object.assign(this, islandState());
+    this.dive = 0; this.turn = 0;
+    this.cur = this.w0 = { view: { s: 1, x: 0, y: 0 } };
+    this.worlds = new Map([[0, this.w0]]);
     this.times = [];
     this.awake = 0; this.kick = 0; this.raf = 0; this.timer = 0; this.last = null;
     this.mq = matchMedia('(prefers-reduced-motion: reduce)');
@@ -309,6 +365,79 @@ class Scene {
   }
   setWorkspace(n) { this.ws = clamp(Math.round(+n || 1), 1, 4); this.wake(); }
   setTopInset(px) { const v = Math.max(0, +px || 0); if (v !== this.top) { this.top = v; this.layout(); } this.wake(); }
+  // how far past the end of the page, in laps, one island a lap.
+  // `back`: the page stepped back that many laps (a round of ISLANDS, or, going back up, to put its own hill just
+  // behind you), and the islands ahead are renumbered to match, the round going on as it was (see turn)
+  setDive(laps, back = 0) {
+    if (back) {
+      const was = this.worlds;
+      this.worlds = new Map([[0, this.w0]]);
+      for (const [n, w] of was) if (n > back) this.worlds.set(n - back, w);
+      this.turn = (this.turn + back) % ISLANDS.length;
+    }
+    if (laps === this.dive) return;
+    this.dive = laps;
+    this.wake();
+  }
+
+  /* ----- the islands of the dive ----- */
+  world(n) {
+    let w = this.worlds.get(n);
+    if (!w) {
+      const g = this.island(ISLANDS[(n - 1 + this.turn) % ISLANDS.length]);
+      w = { g, ...islandState() };
+      this.worlds.set(n, w);
+    }
+    return w;
+  }
+  // the islands in sight, the farthest first, each with where it is on the screen (screen = s * point + (x, y)): seen
+  // from its distance, around the middle of the horizon, from the one going past to the ones far off
+  shown() {
+    const m = Math.floor(this.dive), x = this.back.W / 2, y = this.back.horizon, out = [];
+    for (let n = m + 6; n >= m; n--) {
+      const s = 1 / (1 + (n - this.dive) * DIVE_GAP);
+      if (s > FAR && s < PAST) out.push(Object.assign(this.world(n), { view: { s, x: x * (1 - s), y: y * (1 - s) } }));
+    }
+    return out;
+  }
+  // how many laps the page can step back to have its own hill as the island just behind you: all of them but the
+  // one still going past, if there is one
+  behind() {
+    const m = Math.floor(this.dive), s = 1 / (1 - (this.dive - m) * DIVE_GAP);
+    return Math.max(0, s > 0 && s < PAST ? m - 1 : m);
+  }
+  // the island being looked at, the nearest that isn't going past: input goes to it
+  focus() { return this.shown().findLast(w => w.view.s <= 1.6); }
+  // puts an island's state on the scene, and the pointer in its coordinates (an island far off doesn't see it yet)
+  enter(w) {
+    if (w !== this.cur) {
+      for (const k of ISLAND) { this.cur[k] = this[k]; this[k] = w[k]; }
+      this.cur = w;
+    }
+    const v = w.view, p = this.cursor;
+    this.ptr = { ...p, x: (p.x - v.x) / v.s, y: (p.y - v.y) / v.s, on: p.on && v.s > 0.45 };
+  }
+  // an island of the dive, on the page's sky and sea (see ISLANDS)
+  island(I) {
+    const b = this.back, { W, u, top, horizon: hz } = b, sky = hz - top, sea = b.H - hz, was = this.g;
+    const at = ([fx, fy]) => [fx * W, hz + fy * (fy < 0 ? sky : sea)];
+    const g = this.g = { ...b, isle: true, theme: I.theme, ground: I.ground.map(hex), ridge: curve(I.ridge.map(at), 6), shore: curve(I.shore.map(at), 6), note: { x0: 0, x1: 0, y0: 0, y1: 0 }, key: null };
+    const lx = I.lx * W, h = sky * 0.5, er = clamp(h * 0.062, 11.5, 22), cx = I.cx * W, cw = Math.min(h * 0.3, W * 0.13);
+    // the lighthouse and the cottage stand on level ground, cut into the slope
+    for (const [x, w] of [[lx, er * 2.6], [cx, cw]]) {
+      const y = this.ridgeY(x);
+      g.ridge = g.ridge.map(([px, py]) => [px, lerp(y, py, smooth(w * 0.55, w * 1.2, Math.abs(px - x)))]);
+    }
+    const ins = 2.6 * g.pw;
+    g.hillPoly = [...g.ridge, ...[...g.shore].reverse()];
+    g.hillClip = [...g.ridge.map(([x, y]) => [x, y + ins]), ...g.shore.slice().reverse().map(([x, y]) => [x, y - ins])];
+    g.land = [g.ridge[0][0] + 20 * u, g.ridge.at(-1)[0] - 20 * u, (I.lx + I.cx) / 2 * W];
+    tower(g, lx, this.ridgeY(lx) + 2 * u, h, er);
+    g.cot ={ x: cx, base: this.ridgeY(cx) + 3 * u, w: cw, h: cw * 0.62 };
+    g.tufts = this.tufts(rng(this.o.seed + cx));
+    this.g = was;
+    return g;
+  }
   destroy() {
     this.dead = true; this.sleep(); this.ro.disconnect();
     this.mq.removeEventListener?.('change', this.onMQ);
@@ -332,13 +461,15 @@ class Scene {
   /* ----- input, in client coordinates ----- */
   pointer(x, y, kind = 'mouse') {
     x -= this.ox; y -= this.oy;
-    const now = performance.now() / 1000;
-    if (this.ptr.on && now - this.ptr.last < 0.25) {
-      const dt = Math.max(0.008, now - this.ptr.last);
-      this.vel.x = lerp(this.vel.x, (x - this.ptr.x) / dt, 0.35);
-      this.vel.y = lerp(this.vel.y, (y - this.ptr.y) / dt, 0.35);
-    }
-    Object.assign(this.ptr, { x, y, on: true, last: now, kind: kind || 'mouse' });
+    const now = performance.now() / 1000, p = this.cursor;
+    if (p.on && now - p.last < 0.25) {
+      const dt = Math.max(0.008, now - p.last);
+      this.vel.x = lerp(this.vel.x, (x - p.x) / dt, 0.35);
+      this.vel.y = lerp(this.vel.y, (y - p.y) / dt, 0.35);
+    }
+    Object.assign(p, { x, y, on: true, last: now, kind: kind || 'mouse' });
+    this.enter(this.cur);
+    ({ x, y } = this.ptr);
     const sp = Math.hypot(this.vel.x, this.vel.y);
     if (!this.reduced && sp > 650 && this.isSea(x, y) && now - (this.lastRip || 0) > 0.11) {
       this.lastRip = now;
@@ -348,13 +479,21 @@ class Scene {
     this.poke();
     this.wake();
   }
-  release() { this.ptr.on = false; this.wake(); }
+  release() { this.cursor.on = this.ptr.on = false; this.wake(); }
+  // to the island under it, the nearest first, or else to the one being looked at
   tap(x, y) {
-    x -= this.ox; y -= this.oy;
-    const T = this.g.lh;
+    Object.assign(this.cursor, { x: x - this.ox, y: y - this.oy });
+    const w = this.shown().reverse().find(w => { this.enter(w); const p = this.ptr; return this.isLand(p.x, p.y) || this.onTower(p.x, p.y) || this.boxHit(p.x, p.y); }) || this.focus();
+    this.enter(w);
+    const hit = this.tapAt(this.ptr.x, this.ptr.y);
+    this.enter(this.focus());
+    return hit;
+  }
+  onTower(x, y) { const T = this.g.lh; return y >= this.top && Math.abs(x - T.x) < T.wB * 0.75 && y > T.hatTop - T.er * 1.6 && y < T.base; }
+  tapAt(x, y) {
     this.poke();
     // the lighthouse plays ball instead of catching things (and winks when it can't)
-    if (y >= this.top && Math.abs(x - T.x) < T.wB * 0.75 && y > T.hatTop - T.er * 1.6 && y < T.base) {
+    if (this.onTower(x, y)) {
       if (!this.play()) this.blink.wink = this.t;
       this.wake();
       return false;
@@ -406,11 +545,15 @@ class Scene {
      when nobody has done anything for a while (the page decides), the beam shoves a widget aside.
      The page sends the bar's widgets, animates them on onBar(event, key, info) and reads s.playing. */
   get playing() { return Boolean(this.ball); }
-  // the bar's visible widgets, in client coordinates: { key, x0, x1, y }, y the line the ball bounces on
+  // the bar's visible widgets, in client coordinates: { key, x0, x1, y }, y the line the ball bounces on.
+  // Only the page's lighthouse plays with them: the islands of the dive have no bar.
   setBar(list) {
+    const was = this.cur;
+    this.enter(this.w0);
     this.bar = (Array.isArray(list) ? list : []).filter(t => t && t.x1 > t.x0)
       .map(t => ({ key: String(t.key), x0: t.x0 - this.ox, x1: t.x1 - this.ox, y: t.y - this.oy }));
     if (!this.bar.length) { this.endBall(); this.endBore(); }
+    this.enter(was);
     this.wake();
   }
   // the landing: until the camera has come down, the flock and the grass wait (they're placed where they're seen)
@@ -760,13 +903,14 @@ class Scene {
     this.W = W; this.H = H; this.diag = Math.hypot(W, H);
     const budget = 9.4e6; // device pixels for one full canvas
     this.dpr = Math.min(2, window.devicePixelRatio || 1, Math.sqrt(budget / (W * H)));
-    this.canvas.width = Math.round(W * this.dpr); this.canvas.height = Math.round(H * this.dpr);
+    this.canvas.width = this.fade.canvas.width = Math.round(W * this.dpr); this.canvas.height = this.fade.canvas.height = Math.round(H * this.dpr);
     this.canvas.style.width = W + 'px'; this.canvas.style.height = H + 'px';
     this.layout();
     return true;
   }
 
   layout() {
+    this.enter(this.w0);
     const { W, H } = this, top = this.top, Hs = H - top;
     const portrait = W < 700 || H > W * 1.1;
     const u = clamp(Math.sqrt(W * H) / 1138, 0.42, 1.35);
@@ -794,24 +938,14 @@ class Scene {
 
     // the lighthouse: lamp, eye, gallery, tower and hat
     const lx = W * (portrait ? 0.72 : 0.775);
-    const T = g.lh = { x: lx };
     if (portrait) {
-      T.base = top + Hs * 0.31 + 2 * u;
-      T.er = clamp(W * 0.036, 11.5, 22);
-      const lampY = top + H * 0.1;
-      T.gal = T.er * 0.62;
-      T.top = lampY + T.er * 1.02 + T.gal;
-      T.h = T.base - T.top;
+      const base = top + Hs * 0.31 + 2 * u, er = clamp(W * 0.036, 11.5, 22), lampY = top + H * 0.1;
+      tower(g, lx, base, base - (lampY + er * 1.02 + er * 0.62), er);
     } else {
-      T.base = this.ridgeY(lx) + 2 * u;
-      T.h = Math.min(Hs * 0.27 * 1.32, W * 0.3);
-      T.er = T.h * 0.062;
-      T.gal = T.er * 0.62;
-      T.top = T.base - T.h;
-    }
-    T.wT = T.er * 1.62; T.wB = T.er * 2.6;
-    g.lamp = { x: lx, y: T.top - T.gal - T.er * 1.02 };
-    T.hatTop = g.lamp.y - T.er * 3.6;
+      const h = Math.min(Hs * 0.27 * 1.32, W * 0.3);
+      tower(g, lx, this.ridgeY(lx) + 2 * u, h, h * 0.062);
+    }
+    const T = g.lh;
     // the keeper's cottage, to the right of the lighthouse
     const cx = portrait ? lx + T.wB * 0.5 + T.h * 0.4 : lx + T.wB * 0.5 + T.h * 0.3;
     const cw = portrait ? Math.min(T.h * 0.34, W * 0.13) : T.h * 0.3;
@@ -836,29 +970,21 @@ class Scene {
     const n = clamp(Math.round(W * sky / 6500), 26, 180);
     g.stars = Array.from({ length: n }, () => ({ x: R() * W, y: top + 8 + R() * (sky - 24), s: 0.55 + R() * R() * 1.6, p: R() * TAU }))
       .filter(s => Math.hypot(s.x - g.lamp.x, s.y - g.lamp.y) > T.er * 4);
-    // the far island and its smaller lighthouse
-    g.isle = portrait ? { x0: 0.03 * W, x1: 0.24 * W, h: 20 * u + 8 } : { x0: 0.49 * W, x1: 0.585 * W, h: 22 * u };
+    // where animals and grass go on the hill, and the middle of the pasture
+    g.land = portrait ? [0.3 * W, 0.97 * W, 0.7 * W] : [0.5 * W, 0.97 * W, 0.79 * W];
     g.sun = portrait ? { x: 0.3 * W, y0: top + H * 0.115 } : { x: 0.57 * W, y0: top + sky * 0.3 };
     // (as high as the sun: lower, it would sit on the opening's title)
     g.moon = portrait ? { x: 0.08 * W + 6, y1: top + H * 0.15 } : { x: 0.6 * W, y1: top + sky * 0.3 };
 
-    // the sea: rows of scallops, sparse and small near the horizon
-    const rows = portrait ? Math.round(clamp((H - g.horizon) / 11, 26, 60)) : Math.round(18 + 14 * Math.min(1, u));
-    g.rows = [];
-    for (let i = 1; i <= rows; i++) {
-      const f = i / rows, y = g.horizon + (H - g.horizon) * Math.pow(f, 1.6);
-      g.rows.push({ y, f, seed: i * 97 + this.o.seed, spans: this.seaSpans(y) });
-    }
-    // grass tufts along the ridge, close together
-    g.tufts = [];
-    for (let x = g.ridge[0][0] + 14 * u; x < W; x += (13 + R() * 15) * u) {
-      const y = this.ridgeY(x);
-      if (y == null || y > H + 4 || Math.abs(x - lx) < T.wB * 0.7 || (x > g.cot.x - g.cot.w * 0.55 && x < g.cot.x + g.cot.w * 0.5)) continue;
-      g.tufts.push({ x, y, l: (8 + R() * 7) * Math.max(u, 0.62), p: R() * TAU, n: 3 + ((R() * 2.2) | 0) });
-    }
+    // the sea: how many rows of scallops down to the bottom on the page (see waveScallops)
+    g.rows = portrait ? Math.round(clamp((H - g.horizon) / 11, 26, 60)) : Math.round(18 + 14 * Math.min(1, u));
+    g.tufts = this.tufts(R);
     // where the page's notes sit (a guess, for placing labels and surprises)
     g.note = portrait ? { x0: 0, x1: W, y0: top + Hs * 0.24, y1: H } : { x0: 0, x1: W * 0.05 + Math.min(W * 0.46, 620) + 12, y0: top, y1: H * 0.84 };
     g.key = portrait ? null : { x0: 0, x1: W * 0.05 + Math.min(W * 0.46, 562) + 12, y0: H - 160, y1: H };
+    // the islands of the dive stand on this sky and sea; they're made again for the new size
+    this.back = g;
+    this.worlds = new Map([[0, this.w0]]);
     this.layoutV++;
     for (const o of this.objs) this.settle(o);
     // the grass stays on the ground at the same depth, or goes; meals and walks start over
@@ -873,6 +999,16 @@ class Scene {
     // the bar's widgets moved with it: a game or a trick in progress ends quietly
     this.endBall(); this.endBore();
   }
+  // grass tufts along the ridge, close together
+  tufts(R) {
+    const g = this.g, { W, H, u } = g, T = g.lh, out = [];
+    for (let x = g.ridge[0][0] + 14 * u; x < W; x += (13 + R() * 15) * u) {
+      const y = this.ridgeY(x);
+      if (y == null || y > H + 4 || Math.abs(x - T.x) < T.wB * 0.7 || (x > g.cot.x - g.cot.w * 0.55 && x < g.cot.x + g.cot.w * 0.5)) continue;
+      out.push({ x, y, l: (8 + R() * 7) * Math.max(u, 0.62), p: R() * TAU, n: 3 + ((R() * 2.2) | 0) });
+    }
+    return out;
+  }
   seaSpans(y) {
     const spans = [], W = this.W;
     let x0 = null;
@@ -906,6 +1042,8 @@ class Scene {
   /* ----- where things go ----- */
   // Is a point of the scene visible, or covered by page content? A guess from the DOM.
   seen(x, y) {
+    // (the islands of the dive are placed for when they come close, whatever covers them now)
+    if (this.cur !== this.w0) return true;
     const els = document.elementsFromPoint?.(x + this.ox, y + this.oy);
     if (!els) return true;
     for (const el of els) {
@@ -937,7 +1075,7 @@ class Scene {
         x = lerp(Math.max(span[0], 0) + 22 + 20 * u, Math.min(span[1], W) - 10 - (kind === 'monster' ? 60 : 24) * u, R());
         if (!g.portrait && i < 30) x = lerp(Math.max(g.note.x1 + 30 * u, span[0] + 30 * u), span[1] - (kind === 'monster' ? 60 : 24) * u, R());
       } else {
-        x = g.portrait ? lerp(0.36, 0.95, R()) * W : lerp(0.56, 0.97, R()) * W;
+        x = lerp(g.land[0], g.land[1], R());
         const ry = this.ridgeY(x);
         if (ry == null) continue;
         y = ry + lerp(8 * u, Math.min(this.shoreY(x) - ry - 20 * u, H * 0.32), R());
@@ -976,7 +1114,7 @@ class Scene {
       if (land) o.kind = R() < 0.6 ? 'sheep' : 'cow';
       else if (sea) o.kind = R() < 0.55 ? 'duck' : 'monster';
       else if (y < lerp(g.top, g.horizon, 0.55) && R() < 0.45) o.kind = 'gull';
-      else o.kind = this.ridgeY(x) != null && y < this.shoreY(x) && x > (g.portrait ? 0 : this.hillLeftX(g.horizon) - 20 * u) ? (R() < 0.6 ? 'sheep' : 'cow') : 'duck'; // from the sky, only ducks: monsters surface where the water is clicked
+      else o.kind = this.ridgeY(x) != null && y < this.shoreY(x) && x > (g.shore ? 0 : this.hillLeftX(g.horizon) - 20 * u) ? (R() < 0.6 ? 'sheep' : 'cow') : 'duck'; // from the sky, only ducks: monsters surface where the water is clicked
     }
     const still = settled || this.reduced;
     if (o.kind === 'gull') {
@@ -984,7 +1122,7 @@ class Scene {
       if (this.reduced) { o.vx = 0; o.vy = 0; o.state = 'hover'; }
     } else if (o.kind === 'sheep' || o.kind === 'cow') {
       let ry = this.ridgeY(x);
-      if (ry == null) { o.x = x = clamp(x, g.ridge[0][0] + 20 * u, g.W - 14 * u); ry = this.ridgeY(x); }
+      if (ry == null) { o.x = x = clamp(x, g.ridge[0][0] + 20 * u, Math.min(g.W, g.ridge.at(-1)[0]) - 14 * u); ry = this.ridgeY(x); }
       const room = this.shoreY(x) - ry - 14 * u;
       o.depth = land ? clamp(y - ry, 3 * u, Math.min(room, g.H - ry - 24 * u)) : clamp((6 + R() * 40) * u, 3 * u, room);
       o.ty = ry + o.depth;
@@ -1118,8 +1256,8 @@ class Scene {
     // clouds lean away from the pointer
     for (const cl of [...g.clouds, g.sheepCloud]) {
       let tx = 0, ty = 0;
-      if (this.ptr.on && !rm) {
-        const p = this.cloudXY(cl, true), dx = p.x - this.ptr.x, dy = p.y - this.ptr.y, r = 170 * u, dd = Math.hypot(dx, dy);
+      if (this.cursor.on && !rm) {
+        const p = this.cloudXY(cl, true), dx = p.x - this.cursor.x, dy = p.y - this.cursor.y, r = 170 * u, dd = Math.hypot(dx, dy);
         if (dd < r) { const k = (1 - dd / r) ** 2 * 48 * u / (dd || 1); tx = dx * k; ty = dy * k; }
       }
       const k = rm ? 1 : Math.min(1, dt * 3);
@@ -1131,6 +1269,16 @@ class Scene {
       sc.x += sc.dir * 7 * u * dt;
       if (sc.x > sc.x1) sc.dir = -1; else if (sc.x < sc.x0) sc.dir = 1;
     }
+    // the eye blinks now and then
+    if (!rm && this.t > this.blink.next) { this.blink.at = this.t; this.blink.next = this.t + 3 + Math.random() * 5; }
+    // its lamp lit for good, after all that straining: the hat jumps
+    if (this.waking && !this.popped && this.riseAt != null && this.t - this.riseAt >= WAKE.on) { this.popped = true; this.hatKick = this.t; }
+    for (const w of this.shown()) { this.enter(w); this.updateIsland(dt); }
+    this.enter(this.focus());
+  }
+  // what moves on an island: its light, the ripples round it, its animals, grass and box, its games with the bar
+  updateIsland(dt) {
+    const g = this.g, u = g.u;
     // at the cottage's door: the keeper wonders who knocked (or nobody comes), and it's over
     const v = this.visit;
     if (v) {
@@ -1143,10 +1291,6 @@ class Scene {
       }
       if (a > (v.away ? VISIT.away : VISIT.end)) this.visit = null;
     }
-    // the eye blinks now and then
-    if (!rm && this.t > this.blink.next) { this.blink.at = this.t; this.blink.next = this.t + 3 + Math.random() * 5; }
-    // its lamp lit for good, after all that straining: the hat jumps
-    if (this.waking && !this.popped && this.riseAt != null && this.t - this.riseAt >= WAKE.on) { this.popped = true; this.hatKick = this.t; }
     this.updateBeam(dt);
     this.ripples = this.ripples.filter(r => this.t - r.t0 < 2.2);
     if (!this.flocked && !this.held) this.flock();
@@ -1290,7 +1434,7 @@ class Scene {
     const g = this.g, u = g.u, R = Math.random, W = g.W, H = g.H, out = [];
     const others = [...this.objs.filter(o => grazer(o) && o.dying == null && o !== near), ...this.meadow];
     for (let i = 0; i < 40; i++) {
-      const x = near ? near.x + (R() * 2 - 1) * reach : (g.portrait ? lerp(0.3, 0.97, R()) : lerp(0.5, 0.97, R())) * W;
+      const x = near ? near.x + (R() * 2 - 1) * reach : lerp(g.land[0], g.land[1], R());
       const ry = this.ridgeY(x);
       if (ry == null || x > W - 22 * u) continue;
       const room = Math.min(this.shoreY(x) - 16 * u, H - 24 * u, ry + H * 0.36) - ry;
@@ -1308,7 +1452,7 @@ class Scene {
       out.push({ x, y, d });
     }
     // spread out, but not into the corners: far enough from the others, then near the middle of the pasture
-    if (spread) { const mid = g.portrait ? 0.7 * W : 0.79 * W, sc = p => Math.min(p.d, 170 * u) - Math.abs(p.x - mid) * 0.3; out.sort((a, b) => sc(b) - sc(a)); }
+    if (spread) { const mid = g.land[2], sc = p => Math.min(p.d, 170 * u) - Math.abs(p.x - mid) * 0.3; out.sort((a, b) => sc(b) - sc(a)); }
     // seen: its middle, and its ends too unless it's only a walk's goal
     for (let i = 0; i < Math.min(check, out.length); i++) {
       const p = out[i];
@@ -1646,7 +1790,8 @@ class Scene {
   }
   updateBox(dt) {
     const b = this.box, rm = this.reduced, t = this.t;
-    if (this.held) return;
+    // (the sheep's box is on the page's hill only)
+    if (this.held || this.cur !== this.w0) return;
     if (b.v !== `${this.layoutV}|${this.fontsV}`) this.placeBox();
     if (b.gx == null) return;
     const p = this.boxAt(), lit = this.inBeam(p.x + this.ox, p.y + this.oy);
@@ -1713,25 +1858,26 @@ class Scene {
     this.pstep = step;
     BOIL = this.boil; PW = g.pw; INK = rgba(this.P.ink); REGX = 2.6 * g.pw; REGY = 1.9 * g.pw; NAP = this.drowsy() > 0.9;
     c.setTransform(k, 0, 0, k, 0, 0);
-    c.globalAlpha = 1; c.globalCompositeOperation = 'source-over';
+    c.globalAlpha = 1; c.globalCompositeOperation = 'source-over'; c.imageSmoothingQuality = 'high';
     drawScene(this, c);
   }
-  /* A cached layer: one per boil state, redrawn when the hour, the theme or the layout changes */
-  layer(name, rect, draw) {
-    const key = `${this.layoutV}|${this.pstep}|${this.theme}|${this.fontsV}`;
-    const L = this.layers[name][this.boil] ||= { cv: document.createElement('canvas'), key: '' };
-    const k = this.dpr, x0 = Math.floor(rect.x * k), y0 = Math.floor(rect.y * k), w = Math.ceil(rect.w * k), h = Math.ceil(rect.h * k);
+  /* A cached layer: one per boil state, redrawn when the hour, the theme or the layout changes, or when it's
+     wanted at another resolution (`res` times the screen's: islands far off are drawn small) */
+  layer(c, name, rect, draw, res = 1) {
+    const key = `${this.layoutV}|${this.pstep}|${this.theme}|${this.fontsV}|${res}`;
+    const L = (this.layers[name] ||= [])[this.boil] ||= { cv: document.createElement('canvas'), key: '' };
+    const k = this.dpr * res, x0 = Math.floor(rect.x * k), y0 = Math.floor(rect.y * k), w = Math.ceil(rect.w * k), h = Math.ceil(rect.h * k);
     if (L.key !== key) {
       if (L.cv.width !== w || L.cv.height !== h) { L.cv.width = w; L.cv.height = h; }
-      const c = L.cv.getContext('2d');
-      c.setTransform(1, 0, 0, 1, 0, 0); c.clearRect(0, 0, w, h);
-      c.setTransform(k, 0, 0, k, -x0, -y0);
-      draw(c);
+      const x = L.cv.getContext('2d');
+      x.setTransform(1, 0, 0, 1, 0, 0); x.clearRect(0, 0, w, h);
+      x.setTransform(k, 0, 0, k, -x0, -y0);
+      draw(x);
       L.key = key;
       this.rebuilds++;
     }
-    const c = this.ctx;
-    c.save(); c.setTransform(1, 0, 0, 1, 0, 0); c.drawImage(L.cv, x0, y0); c.restore();
+    const m = c.getTransform();
+    c.save(); c.setTransform(m.a / k, 0, 0, m.d / k, m.e, m.f); c.drawImage(L.cv, x0, y0); c.restore();
   }
   /* A small cached drawing (a cloud, the sun), drawn around its own origin */
   sprite(name, w, h, x, y, draw) {
@@ -1748,7 +1894,8 @@ class Scene {
       if (this.sprites.size > 60) this.sprites.delete(this.sprites.keys().next().value);
     }
     const c = this.ctx;
-    c.save(); c.setTransform(1, 0, 0, 1, 0, 0);
+    const m = c.getTransform();
+    c.save(); c.setTransform(m.a / k, 0, 0, m.d / k, m.e, m.f);
     c.drawImage(s.cv, Math.round((x - w / 2) * k), Math.round((y - h / 2) * k));
     c.restore();
   }
@@ -1759,28 +1906,58 @@ class Scene {
    Back to front: sky and sea, the cached band, stars, the scallops, the
    beam, then the sun, moon, clouds and far island in front of it, the
    cached hill with its cottage and tower, then everything that moves.
+   The far island is the first island of the dive, a whole one with its
+   own far island, and so on: each island draws in two passes, its light
+   behind the clouds and its land in front of them, the farthest first.
+   Diving, you go on over the sea toward the horizon, past the islands.
    ===================================================================== */
 function drawScene(s, c) {
-  const g = s.g, { W, H, u } = g, P = s.P;
+  const g = s.g, { W, H, u } = g, P = s.P, shown = s.shown();
   c.lineCap = 'round'; c.lineJoin = 'round';
   c.fillStyle = rgba(P.sky); c.fillRect(0, 0, W, g.horizon + 2);
   c.fillStyle = rgba(P.sea); c.fillRect(0, g.horizon, W, H - g.horizon);
   const bandTop = g.horizon - (g.horizon - g.top) * (g.portrait ? 0.42 : 0.36) - 20 * u;
-  s.layer('back', { x: 0, y: bandTop, w: W, h: g.horizon - bandTop + 6 * u }, x => drawBand(s, x, bandTop));
+  s.layer(c, 'back', { x: 0, y: bandTop, w: W, h: g.horizon - bandTop + 6 * u }, x => drawBand(s, x, bandTop));
   drawStars(s, c);
   drawWaves(s, c);
-  drawHalo(s, c);
-  drawBeam(s, c);
+  for (const w of shown) { s.enter(w); drawRipples(s, c); }
+  c.setTransform(s.dpr, 0, 0, s.dpr, 0, 0);
   drawSun(s, c);
   drawMoon(s, c);
+  // an island's ground in its theme's colours, as much darker than by day as the page's green is now
+  const day = PAL[0][1], ground = g => g.ground ? { ...P, hill: g.ground[0].map((v, i) => v * P.hill[i] / day.hill[i]), hill2: g.ground[1].map((v, i) => v * P.hill2[i] / day.hill2[i]) } : P;
+  const land = w => {
+    // an island comes out of the haze far off: then it's drawn whole on the side and laid over
+    const a = smooth(FAR, FAR * 1.6, w.view.s), x = a < 0.99 ? s.fade : c;
+    if (x !== c) { x.setTransform(1, 0, 0, 1, 0, 0); x.clearRect(0, 0, x.canvas.width, x.canvas.height); x.lineCap = 'round'; x.lineJoin = 'round'; }
+    s.enter(w); view(s, x, w.view);
+    s.P = ground(w.g);
+    drawLand(s, x, w);
+    s.P = P;
+    if (x !== c) { c.save(); c.setTransform(1, 0, 0, 1, 0, 0); c.globalAlpha = a; c.drawImage(x.canvas, 0, 0); c.restore(); }
+  };
+  // the islands far off, the light over them, the clouds, then the nearest island
+  const near = shown.at(-1);
+  for (const w of shown) if (w !== near) land(w);
+  for (const w of shown) {
+    const a = lightK(w.view.s);
+    if (a > 0) { s.enter(w); view(s, c, w.view); c.globalAlpha = a; drawHalo(s, c); c.globalAlpha = a; drawBeam(s, c); c.globalAlpha = 1; }
+  }
+  c.setTransform(s.dpr, 0, 0, s.dpr, 0, 0);
   for (let i = 0; i < g.clouds.length; i++) drawCloud(s, c, g.clouds[i], 'cloud' + i);
   drawCloud(s, c, g.sheepCloud, 'sheepcloud', true);
-  drawIsle(s, c);
-  const T = g.lh, x0 = g.portrait ? g.ridge[0][0] - 8 : Math.max(0, g.ridge[0][0] - 10);
-  const y0 = Math.min(T.top - T.gal * 1.2, g.cot.base - g.cot.h * 4.2) - 10 * u;
-  const y1 = g.portrait ? Math.max(...g.shore.map(p => p[1])) + 14 * u : H;
-  s.layer('front', { x: x0, y: y0, w: W - x0, h: y1 - y0 }, x => { drawHill(s, x); drawCottage(s, x); drawTower(s, x); });
-  drawHillLight(s, c);
+  land(near);
+  s.enter(s.focus());
+}
+
+/* Only the island being looked at has its light on: it comes on as the island comes close, and goes out as the
+   island is passed, before it gets too much */
+const lightK = sc => smooth(0.45, 0.9, sc) * (1 - smooth(1, 2.2, sc));
+
+/* an island's land and what's on it, back to front */
+function drawLand(s, c, w) {
+  drawFront(s, c, w.view.s);
+  c.globalAlpha = lightK(w.view.s); drawHillLight(s, c); c.globalAlpha = 1;
   drawTufts(s, c);
   drawVisit(s, c);
   drawSmoke(s, c);
@@ -1788,16 +1965,48 @@ function drawScene(s, c) {
   drawHat(s, c);
   // animals and the grass on the hill, back to front (a tuft in front of the one eating it)
   const items = [...s.objs.map(o => [o.leap ? s.box.gy + 0.25 : o.y, o]), ...s.meadow.map(m => [m.y + 0.5, m]), ...(s.box.gx != null ? [[s.box.gy, s.box]] : [])].sort((a, b) => a[0] - b[0]);
-  for (const [, it] of items) it === s.box ? drawBox(s, c) : it.blades ? drawMeadow(s, c, it) : it.leap ? drawLeap(s, c, it) : drawObj(s, c, it);
-  // the section's little scenes over them: animals pass behind the desk, the huts and the keeper
-  drawStates(s, c);
-  const lk = s.labelsK();
-  if (s.pres.hero > 0.01 && lk > 0.01) { c.globalAlpha = lk; drawLabels(s, c); c.globalAlpha = 1; }
+  const wet = o => o.state === 'float' || o.state === 'swim' || (o.state === 'fall' && s.isSea(o.x, o.ty));
+  for (const [, it] of items) {
+    if (wet(it)) { c.save(); if (afloat(s, c, it.state === 'fall' ? it.ty : it.y)) drawObj(s, c, it); c.restore(); }
+    else it === s.box ? drawBox(s, c) : it.blades ? drawMeadow(s, c, it) : it.leap ? drawLeap(s, c, it) : drawObj(s, c, it);
+  }
+  // the section's little scenes over them, on the page's hill: animals pass behind the desk, the huts and the keeper
+  if (w === s.w0) {
+    drawStates(s, c);
+    const lk = s.labelsK();
+    if (s.pres.hero > 0.01 && lk > 0.01 && !s.dive) { c.globalAlpha = lk; drawLabels(s, c); c.globalAlpha = 1; }
+  }
   drawSplashes(s, c);
   drawBall(s, c);
   drawDoodles(s, c);
 }
 
+/* the hill with its cottage and tower: cached at about the size it's drawn, or drawn as it is when larger than life */
+function drawFront(s, c, sc) {
+  const g = s.g, { W, H, u } = g, T = g.lh, x0 = g.shore ? g.ridge[0][0] - 8 : Math.max(0, g.ridge[0][0] - 10);
+  const x1 = Math.min(W, g.ridge.at(-1)[0] + 8), y0 = Math.min(T.top - T.gal * 1.2, g.cot.base - g.cot.h * 4.2) - 10 * u;
+  const y1 = g.shore ? Math.max(...g.shore.map(p => p[1])) + 26 * u : H;
+  const draw = x => { drawHill(s, x); drawCottage(s, x); drawTower(s, x); };
+  if (sc > 1) draw(c);
+  else s.layer(c, 'front' + (g.theme || ''), { x: x0, y: y0, w: x1 - x0, h: y1 - y0 }, draw, 2 ** Math.ceil(Math.log2(sc)));
+}
+
+/* draws from here on in an island's coordinates: screen = s * point + (x, y) */
+function view(s, c, v) {
+  const k = s.dpr;
+  c.setTransform(k * v.s, 0, 0, k * v.s, k * v.x, k * v.y);
+}
+/* Something on the sea at y by the island being drawn isn't as far off as the island: it's as deep into the sea as on
+   the page (see waveScallops), and as much further as the island is, so it comes on faster. Draws from here on where
+   it is, unless it has gone past. */
+function afloat(s, c, y) {
+  const g = s.g, at = (g.H - g.horizon) / (y - g.horizon), d = at + (1 / s.cur.view.s - 1) / SHORE;
+  if (d < 0.2) return false;
+  const m = at / d;
+  view(s, c, { s: m, x: g.W / 2 * (1 - m), y: g.horizon * (1 - m) });
+  return true;
+}
+
 /* the lower sky, a lighter band with a soft wave at its top, and the horizon */
 function drawBand(s, c, bandTop) {
   const g = s.g, { W, u } = g, P = s.P;
@@ -1990,53 +2199,49 @@ function drawLeap(s, c, o) {
   c.restore();
 }
 
-/* the competition: a much smaller lighthouse on a far island */
-function drawIsle(s, c) {
-  const g = s.g, u = g.u, P = s.P, I = g.isle, hz = g.horizon;
-  const w = I.x1 - I.x0, h = I.h, cx = (I.x0 + I.x1) / 2, lx = I.x0 + w * 0.4, ltop = hz - h * 0.86 - 24 * u;
-  s.sprite('isle', w + 30 * u, (h + 44 * u) * 2, cx, hz, x => {
-    const hump = curve([[-w / 2, 0.5], [-w * 0.32, -h * 0.5], [-w * 0.08, -h * 0.86], [w * 0.16, -h * 0.8], [w * 0.38, -h * 0.4], [w / 2, 0.5]], 4);
-    print(x, [...hump, [w / 2, 3], [-w / 2, 3]], P.far);
-    x.beginPath(); ribbon(x, hump, DET * 0.9, 21, { tin: 3, tout: 3 }); x.fillStyle = INK; x.fill();
-    // the little tower: white, two stripes, a lamp
-    const tx = lx - cx, by = -h * 0.84, th = 24 * u, bw = 5.5 * u, tw = 3.6 * u;
-    const body = [[tx - bw / 2, by], [tx - tw / 2, by - th], [tx + tw / 2, by - th], [tx + bw / 2, by]];
-    print(x, body, mul(hex('#FFFFFF'), P.paper));
-    for (const k of [0.3, 0.68]) {
-      const y0 = by - th * k, y1 = by - th * (k + 0.16), w0 = lerp(bw, tw, k) / 2, w1 = lerp(bw, tw, k + 0.16) / 2;
-      print(x, [[tx - w0, y0], [tx - w1, y1], [tx + w1, y1], [tx + w0, y0]], hex('#FF4A36'));
-    }
-    x.beginPath(); edges(x, body, TEX * 1.1, 4, false, { ov: 1 }); x.fillStyle = INK; x.fill();
-  });
-  // its lamp, which blinks at night in a hurry
-  const night = smooth(0.4, 0.75, s.d), on = s.reduced ? 1 : (Math.sin(s.t * 3.1) > 0.2 ? 1 : 0.35);
-  const ly = ltop - 3 * u;
-  if (night > 0.05) { c.beginPath(); c.arc(lx, ly, (5 + 5 * on) * u, 0, TAU); c.fillStyle = rgba(P.beam, 0.35 * night * on); c.fill(); }
-  dot(c, lx, ly, 2.9 * u, rgba(mix(mul(hex('#FFFFFF'), P.paper), P.beam, Math.max(0.5, night * on))));
-  c.beginPath(); ribbon(c, ellipse(lx, ly, 3.2 * u, 3.2 * u, 12), TEX, 5, { tin: 1, tout: 1, w0: 1, w1: 1 }); c.fillStyle = INK; c.fill();
-}
-
-/* the sea: rows of scallops, thinning toward the horizon; ripples where things land */
+/* the sea: scallops on the water as it goes off to the horizon, in rows, closer together and sparser the farther off;
+   ripples where things land. Diving, you go over it toward the horizon, as fast as past the islands (an island's shore
+   is about a quarter of the way down the sea), and rows and scallops come in between the others as they come close and spread. */
+const rank = n => n ? 31 - Math.clz32(n & -n) : 32;
 function waveScallops(s, c, lit) {
-  const g = s.g, u = g.u;
-  for (let i = 0; i < g.rows.length; i += 2) {
-    const row = g.rows[i], step = (16 + 34 * row.f) * Math.max(u, 0.66), w = (0.75 + 1.3 * row.f) * g.pw * (lit ? 1.15 : 1);
-    if (row.f < 0.08 && !lit) continue;
-    c.beginPath();
-    for (const [a, b] of row.spans) {
-      for (let x = a + hash(i) * step; x < b - step; x += step * (1.3 + hash(x * 0.1 + i) * 0.8)) {
-        if (hash(x * 0.37 + i * 3.1) < 0.18 - row.f * 0.2) continue;
-        const y = s.waveY(x, row), y2 = s.waveY(x + step, row);
-        c.moveTo(x, y); c.quadraticCurveTo(x + step / 2, (y + y2) / 2 - step * 0.34, x + step, y2);
+  const g = s.g, { W, H, u } = g, hz = g.horizon, sea = H - hz, mid = W / 2;
+  // depths in rows ROW apart from where you are, 1 at the bottom of the screen; across, scallops ACROSS apart there
+  const ROW = 0.02, ACROSS = 4, go = s.dive * DIVE_GAP / SHORE, far = lit ? 0.004 : 0.0175, alpha = c.globalAlpha;
+  for (let k = Math.ceil((1 + go) / ROW); ;) {
+    const rel = 1 / (k * ROW - go);
+    if (rel < far) break;
+    // the gap between rows here on the page, and the rows that keep it: the ones `step` apart, those of the finest
+    // of them fading in
+    const f = rel ** (1 / 1.6), gap = 3.2 * sea * rel ** 0.375 / g.rows, dy = sea * ROW * rel * rel;
+    const step = 2 ** Math.max(0, Math.ceil(Math.log2(gap / dy)));
+    if (k % step) { k += step - k % step; continue; }
+    const a = rank(k) > Math.log2(step) ? 1 : clamp(dy * step / gap - 1);
+    k += step;
+    if (a <= 0) continue;
+    const row = { y: hz + sea * rel, f, seed: (k - step) * 97 + s.o.seed }, q0 = k - step;
+    const size = (16 + 34 * f) * Math.max(u, 0.66), across = ACROSS * rel, room = size * 1.7;
+    const qs = 2 ** Math.max(0, Math.ceil(Math.log2(room / across))), qa = clamp(across * qs / room - 1);
+    const off = hash(q0 * 0.13) * 64 * across;
+    c.lineWidth = (0.75 + 1.3 * f) * g.pw * (lit ? 1.15 : 1);
+    for (const fading of [false, true]) {
+      c.beginPath();
+      for (let q = Math.floor((-8 - mid - off) / across / qs) * qs; mid + off + q * across < W + 8 + size; q += qs) {
+        if ((rank(Math.abs(q)) === Math.log2(qs)) !== fading || hash(q * 0.37 + q0 * 3.1) < 0.3 - f * 0.12) continue;
+        const x = mid + off + q * across - size / 2, y = s.waveY(x, row), y2 = s.waveY(x + size, row);
+        c.moveTo(x, y); c.quadraticCurveTo(x + size / 2, (y + y2) / 2 - size * 0.34, x + size, y2);
       }
+      c.globalAlpha = alpha * a * (fading ? qa : 1); c.stroke();
     }
-    c.lineWidth = w; c.stroke();
   }
+  c.globalAlpha = alpha;
 }
 function drawWaves(s, c) {
-  const g = s.g, u = g.u, P = s.P;
-  c.strokeStyle = rgba(P.sea2); waveScallops(s, c, false);
+  c.strokeStyle = rgba(s.P.sea2); waveScallops(s, c, false);
+}
+function drawRipples(s, c) {
+  const u = s.g.u, P = s.P;
   for (const r of s.ripples) {
+    if (!afloat(s, c, r.y)) continue;
     const age = s.t - r.t0, rx = 8 * u + age * 70 * u;
     c.beginPath(); ribbon(c, ellipse(r.x, r.y, rx, rx * 0.3, 40), DET * 0.8, 4, { tin: 1, tout: 1, w0: 1, w1: 1 });
     c.fillStyle = rgba(P.foam, clamp(1 - age / 2.2) * r.a); c.fill();
@@ -2058,8 +2263,8 @@ function drawBeam(s, c) {
   fan.push(e1);
   const col = mix(P.beam, hex('#FFF6C2'), night * 0.45);
   poly(c, fan); c.fillStyle = rgba(col, (0.84 + 0.12 * night * I) * pw); c.fill();
-  // the scallops it crosses light up
-  c.save(); poly(c, fan); c.clip();
+  // the scallops it crosses light up (the sea's, on the screen)
+  c.save(); poly(c, fan); c.clip(); c.setTransform(s.dpr, 0, 0, s.dpr, 0, 0);
   c.strokeStyle = rgba(mix(col, hex('#FFFFFF'), 0.5), 0.95 * pw); waveScallops(s, c, true);
   c.restore();
   // the pen goes along both edges, from just outside the eye
@@ -2106,11 +2311,22 @@ function drawHalo(s, c) {
 /* the hill: printed green, a shaded flank, the ridge in the heaviest line, a few hatches and flowers */
 function drawHill(s, c) {
   const g = s.g, { W, H, u } = g, P = s.P, T = g.lh, rd = g.ridge;
+  // an island sits in the water: under its shore, the hill's darker reflection, a few strokes of water across it
+  if (g.isle) {
+    const sl = g.shore, x0 = sl[0][0], x1 = sl.at(-1)[0], deep = x => Math.sin(Math.PI * (x - x0) / (x1 - x0)) * 18 * u, R = rng(3);
+    print(c, [...sl, ...sl.slice().reverse().map(([x, y]) => [x, y + deep(x)])], mix(P.sea, P.hill2, 0.45));
+    c.beginPath();
+    for (let j = 0; j < 4; j++) for (let x = x0 + R() * 30 * u; x < x1 - 20 * u; x += (24 + R() * 30) * u) {
+      const y = s.shoreY(x) + deep(x) * (0.25 + j * 0.27) + 2 * u;
+      c.moveTo(x, y); c.lineTo(x + (6 + R() * 12) * u * (1 - j * 0.15), y);
+    }
+    c.strokeStyle = rgba(P.sea2); c.lineWidth = 1.3 * g.pw; c.stroke();
+  }
   print(c, g.hillPoly, P.hill);
   // the shady flank, a second flat green
   const sh = [];
   for (const [x, y] of rd) if (x < T.x - T.wB * 2) sh.push([x, y]);
-  if (g.portrait) {
+  if (g.shore) {
     // under the headland, a darker band of cliff above the shore
     const sl = g.shore, x0 = sl[0][0];
     print(c, [...sl, ...sl.slice().reverse().map(([x, y]) => [x + 4 * u, y - (8 + (x - x0) / W * 26) * u])], P.hill2);
@@ -2128,7 +2344,7 @@ function drawHill(s, c) {
     const ry = s.ridgeY(x);
     if (ry == null) continue;
     const y = ry + (14 + R() * (g.portrait ? 26 : 70)) * u;
-    if (g.portrait && y > s.shoreY(x) - 12 * u) continue;
+    if (g.shore && y > s.shoreY(x) - 12 * u) continue;
     const n = 3 + ((R() * 3) | 0), l = (13 + R() * 10) * u;
     for (let k = 0; k < n; k++) {
       const hx = x + k * 5 * u, hy = y + k * 1.6 * u, lk = l * (1 - Math.abs(k - (n - 1) / 2) * 0.16);
@@ -2138,18 +2354,18 @@ function drawHill(s, c) {
   c.fillStyle = INK; c.fill();
   // foam where the hill meets the sea
   c.beginPath();
-  const foam = g.portrait ? g.shore : rd.filter(p => p[1] > g.horizon + 3 && p[0] < T.x);
+  const foam = g.shore || rd.filter(p => p[1] > g.horizon + 3 && p[0] < T.x);
   for (let i = 2; i < foam.length - 2; i += 3) {
-    const [x, y] = foam[i], [x2, y2] = foam[i + 2], nx = g.portrait ? 0 : -1, ny = g.portrait ? 1 : 0;
+    const [x, y] = foam[i], [x2, y2] = foam[i + 2], nx = g.shore ? 0 : -1, ny = g.shore ? 1 : 0;
     const ox = nx * 5 * u, oy = ny * 5 * u, mx = (x + x2) / 2 + ox, my = (y + y2) / 2 + oy;
     if (mx < -10 || mx > W + 10 || my > H + 10 || hash(i * 0.7) < 0.3) continue;
-    ribbon(c, [[x + ox, y + oy], [mx + nx * 2 * u - (g.portrait ? 0 : 1) * u, my + (g.portrait ? 3 : -2) * u], [x2 + ox, y2 + oy]], TEX * 1.1, i, { tin: 1, tout: 1, amp: 0.3 });
+    ribbon(c, [[x + ox, y + oy], [mx + nx * 2 * u - (g.shore ? 0 : 1) * u, my + (g.shore ? 3 : -2) * u], [x2 + ox, y2 + oy]], TEX * 1.1, i, { tin: 1, tout: 1, amp: 0.3 });
   }
   c.fillStyle = rgba(P.foam); c.fill();
-  // the ridge, and in portrait the shore under it
+  // the ridge, and the shore under it if it has one
   c.beginPath();
   ribbon(c, rd.filter(p => p[0] > -20 && p[0] < W + 20), SIL, 21, { tin: 4, tout: 4, w0: 0.8, w1: 0.8 });
-  if (g.portrait) ribbon(c, g.shore.filter(p => p[0] < W + 20), SIL * 0.9, 23, { tin: 30, tout: 4, w0: 0.3, w1: 0.8 });
+  if (g.shore) ribbon(c, g.shore.filter(p => p[0] < W + 20), SIL * 0.9, 23, { tin: 30, tout: 4, w0: 0.3, w1: 0.8 });
   c.fillStyle = INK; c.fill();
   // daisies near the cottage and the tower, where the eye goes
   const D = rng(9);
@@ -2197,7 +2413,7 @@ function drawCottage(s, c) {
 
 /* the tower: white with curved stripes in the theme's colours, a door, two windows and a gallery */
 function drawTower(s, c) {
-  const g = s.g, u = g.u, P = s.P, T = g.lh, th = THEMES[s.theme];
+  const g = s.g, u = g.u, P = s.P, T = g.lh, th = THEMES[g.theme || s.theme];
   const paper = mul(hex('#FFFFFF'), P.paper);
   const half = k => lerp(T.wB, T.wT, k) / 2, yAt = k => T.base - T.h * k;
   const Lp = [], Rp = [];
@@ -2348,7 +2564,7 @@ function bobble(c, x, y, pr, col, spin = 0) {
 
 /* a knitted pom-pom hat: a ribbed brim, a long floppy cone in the theme's colour, a white bobble */
 function drawHat(s, c) {
-  const g = s.g, u = g.u, P = s.P, T = g.lh, L = g.lamp, er = T.er, th = THEMES[s.theme];
+  const g = s.g, u = g.u, P = s.P, T = g.lh, L = g.lamp, er = T.er, th = THEMES[g.theme || s.theme];
   const col = mul(hex(th.hat), P.paper), h = hatGeom(s), { by, bw, bh, sway, tip, pr } = h;
   const cone = curve([[L.x - bw * 0.92, by - bh * 0.6], [L.x - bw * 0.5, by - er * 1.9], [L.x + er * 0.1 + sway * er, by - er * 2.85], tip, [L.x + er * 0.65 + sway * er * 1.4, by - er * 2.2], [L.x + bw * 0.9, by - bh * 0.6]], 3);
   print(c, cone, col);
@@ -3120,5 +3336,5 @@ function drawSplashes(s, c) {
   }
 }
 
-window.Hill = { Scene, themes: Object.keys(THEMES), states: STATES };
+window.Hill = { Scene, themes: Object.keys(THEMES), states: STATES, islands: ISLANDS.length };
 })();
diff --git a/site/style.css b/site/style.css
index 9e140ea8..6907b709 100644
--- a/site/style.css
+++ b/site/style.css
@@ -180,8 +180,9 @@ h1, h2, h3 { text-wrap: balance; }
   .op-bar { width: auto; min-width: min(330px, 92vw); }
 }
 .scene canvas { display: block; }
-main, .site-foot { position: relative; z-index: 1; }
-main { overflow-x: clip; }
+main { position: relative; z-index: 1; overflow-x: clip; }
+/* past the last note, room to scroll into the drawing (see the dive in main.js) */
+.dive { height: 1800vh; }
 
 /* ---------- The bar, drawn as the app draws it ---------- */
 
@@ -792,13 +793,6 @@ h3 { font: 800 22px/1.2 var(--display); font-variation-settings: "INFM" 70, "BNC
 .brew { font-size: 15.5px; color: var(--text-2); }
 .brew code { display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 6px; background: #fbfaf6; box-shadow: 0 0 0 1.6px var(--pen); font: 400 14px/1.4 var(--mono); color: #1d1d1f; white-space: nowrap; }
 
-/* ---------- Footer: a strip of paper with a pen line along its top ---------- */
-.site-foot { display: grid; gap: 12px; margin-top: 8vh; padding: 30px 5vw 44px; background: var(--paper); color: var(--text); font-size: 15.5px; line-height: 1.5; }
-.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 10px; background: var(--rule) 0 0 / 160px 10px repeat-x; }
-.site-foot p { max-width: 70ch; }
-.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
-.site-foot a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
-
 /* ---------- Portrait: phones and portrait tablets. The scene's rule: narrower than 700 px, or taller than 1.1 × wide ---------- */
 @media (max-width: 699.98px), (max-aspect-ratio: 10/11) {
   .hero, .sec { --left: var(--m); padding-left: var(--m); padding-right: var(--m); align-items: stretch; }
@@ -809,7 +803,6 @@ h3 { font: 800 22px/1.2 var(--display); font-variation-settings: "INFM" 70, "BNC
   .sec { display: block; min-height: 0; padding-top: 34vh; padding-bottom: 6vh; }
   .install { padding-bottom: 12vh; }
   h1 { font-size: clamp(34px, 9.4vw, 58px); }
-  .site-foot { padding-left: var(--m); padding-right: var(--m); }
 }
 @media (max-width: 719.98px) {
   body { font-size: 17px; }

From 2d545e897b54cb08354a1bbf13e534b908a9ddc4 Mon Sep 17 00:00:00 2001
From: Sebastien Graf <95282692+Seb-GRAF@users.noreply.github.com>
Date: Sat, 31 Oct 2026 11:40:30 +0100
Subject: [PATCH 42/46] docs: hurry the website's opening on a scroll or a
 click instead of cutting it

---
 site/main.js | 38 +++++++++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/site/main.js b/site/main.js
index 43062c53..26fa5f3a 100644
--- a/site/main.js
+++ b/site/main.js
@@ -1009,12 +1009,13 @@ function onBar(event, key, info = {}) {
    and strains again.
    Its light comes on for good as the headline comes in: it reads it, sweeps along the bar and looks at you (WAKE in
    scene.js). On every load at the top, with motion allowed (the class and the night come from the page's head); until
-   the page has come in, a scroll, a key, a click or a tap brings it in at once, the lighthouse awake. */
-let landed = !root.classList.contains("intro"), woken = landed, rose = landed, runTimer = 0, landTimer = 0;
+   the page has come in, a scroll, a key, a click or a tap hurries it in, the lighthouse awake. */
+let landed = !root.classList.contains("intro"), woken = landed, rose = landed, runTimer = 0, landTimer = 0, barIn = null;
 const swept = new Map();
 const opening = document.getElementById("opening"), snore = document.getElementById("snore");
 const LAND_SKIP = ["wheel", "keydown", "pointerdown", "touchstart", "scroll"];
 const DAWN = 1.6; // seconds from night to day
+const HURRY = 3; // times as fast as the show plays once hurried
 const WAKE_AT = 1100, RISE_AFTER = 3600; // ms: asleep for a while, then awake at night, until the day comes
 // it wakes into the day, or into the night when that's the visitor's choice on the night switch
 const dayMode = () => localStorage.getItem("mode") === "dark" ? "dark" : "light";
@@ -1024,7 +1025,7 @@ function land(skip) {
   landed = true;
   clearTimeout(runTimer);
   clearTimeout(landTimer);
-  for (const type of LAND_SKIP) removeEventListener(type, skipLanding, true);
+  for (const type of LAND_SKIP) removeEventListener(type, hurry, true);
   removeEventListener("visibilitychange", skipHidden);
   if (skip) { root.classList.add("intro-skip"); setMode(dayMode()); }
   root.classList.remove("intro", "op-bar-in", "op-page-in");
@@ -1036,8 +1037,19 @@ function land(skip) {
   if (skip) { wakeUp(true); requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove("intro-skip"))); }
   setTimeout(quietSpell); // the bored lighthouse's quiet spell starts now (not before the page's script has run)
 }
-// (a click or a tap that brings it in doesn't also drop something on the landscape: see pressedInOpening)
-function skipLanding() { land(true); }
+// hurried: the lighthouse is awake at once and the rest of the show plays HURRY times as fast, the bar easing out at
+// once if it hasn't left yet; once it's at the top, only its fade into the real bar is left, which keeps its pace
+// (a click or a tap that hurries it doesn't also drop something on the landscape: see pressedInOpening)
+function hurry() {
+  for (const type of LAND_SKIP) removeEventListener(type, hurry, true);
+  clearTimeout(runTimer);
+  wakeUp(true);
+  if (!rose) rise(true);
+  clearTimeout(landTimer);
+  if (!root.classList.contains("op-bar-in")) for (const a of opening.getAnimations({ subtree: true })) a.updatePlaybackRate(HURRY);
+  root.classList.add("op-page-in");
+  barIn.then(() => land(false));
+}
 // nobody watching: it comes in rather than play on unseen
 function skipHidden() { if (document.hidden) land(true); }
 // it wakes up: the z's go, the drawing comes to life, the eye opens and it strains to light its lamp on the card's
@@ -1057,14 +1069,14 @@ function wakeUp(now) {
 }
 // then the day comes, and with it the page: the bar rises into place while the sky, the sun and the moon turn and the
 // card changes with them; the lighthouse puts its weak light out, and its light comes on for good on the headline
-function rise() {
+function rise(fast) {
   if (landed) return;
   if (document.hidden) return land(true);
   const ends = headlineEnds();
   rose = true;
   for (const t of glowTiles || []) t.el.style.removeProperty("--glow"); // (its weak light goes out: see glowBar)
-  expandOpening();
-  setMode(dayMode(), DAWN);
+  expandOpening(fast);
+  setMode(dayMode(), fast ? DAWN / HURRY : DAWN);
   S("rising", ...(ends || []));
   landTimer = setTimeout(() => land(false), DAWN * 1000 + 100);
 }
@@ -1104,7 +1116,7 @@ function placeSnore(s) {
    window's width as it rises to the top, shrinking to the real bar's height, its widgets sliding apart as it widens.
    The card's words drift away, the notes come in while it rises, and at the top the real bar fades in under it and
    the copy fades away. The copy is made before the day comes, so its colours change with the sky's */
-function expandOpening() {
+function expandOpening(fast) {
   const pill = opening.querySelector(".op-bar"), a = pill.getBoundingClientRect(), b = bar.getBoundingClientRect(), k = b.height / a.height;
   const fly = pill.cloneNode(true);
   fly.classList.add("op-fly");
@@ -1114,13 +1126,13 @@ function expandOpening() {
   const grow = fly.animate([
     { left: `${a.left}px`, top: `${a.top}px`, width: `${a.width}px`, transform: "scale(1)", borderRadius: "22px" },
     { left: `${b.left}px`, top: `${b.top}px`, width: `${b.width / k}px`, transform: `scale(${k})`, borderRadius: "0px" },
-  ], { duration: 1100, easing: "cubic-bezier(.45, 0, .25, 1)", fill: "forwards" });
+  ], { duration: 1100, easing: fast ? ease : "cubic-bezier(.45, 0, .25, 1)", fill: "forwards" });
   for (const el of opening.querySelectorAll(".op-mark, .op-line")) el.animate([{ opacity: 1, transform: "none" }, { opacity: 0, transform: "translateY(-28px)" }], { duration: 600, easing: "ease-in", fill: "forwards" });
   setTimeout(() => { if (!landed) root.classList.add("op-page-in"); }, 650);
-  grow.finished.then(() => {
+  barIn = grow.finished.then(() => {
     if (landed) return;
     root.classList.add("op-bar-in");
-    fly.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 340, fill: "forwards" });
+    return fly.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 340, fill: "forwards" }).finished;
   }, () => {});
 }
 /* While the light sweeps the bar, each widget it passes glows for a moment */
@@ -1136,7 +1148,7 @@ function sweepGlow(s) {
 if (!landed) {
   if (scrollY > 0 || document.hidden) land(true);
   else {
-    for (const type of LAND_SKIP) addEventListener(type, skipLanding, { capture: true, passive: true });
+    for (const type of LAND_SKIP) addEventListener(type, hurry, { capture: true, passive: true });
     addEventListener("visibilitychange", skipHidden);
     S("labels", false);
     S("doze", true); // asleep, its eye shut and its lamp out,

From b601fbd62dc380c9d41b48ddb47238f952ea3c99 Mon Sep 17 00:00:00 2001
From: Sebastien Graf <95282692+Seb-GRAF@users.noreply.github.com>
Date: Sat, 31 Oct 2026 11:42:03 +0100
Subject: [PATCH 43/46] docs: hold the website still while its hurried opening
 finishes

---
 site/main.js   | 2 +-
 site/style.css | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/site/main.js b/site/main.js
index 26fa5f3a..4429fbdd 100644
--- a/site/main.js
+++ b/site/main.js
@@ -1015,7 +1015,7 @@ const swept = new Map();
 const opening = document.getElementById("opening"), snore = document.getElementById("snore");
 const LAND_SKIP = ["wheel", "keydown", "pointerdown", "touchstart", "scroll"];
 const DAWN = 1.6; // seconds from night to day
-const HURRY = 3; // times as fast as the show plays once hurried
+const HURRY = 2; // times as fast as the show plays once hurried
 const WAKE_AT = 1100, RISE_AFTER = 3600; // ms: asleep for a while, then awake at night, until the day comes
 // it wakes into the day, or into the night when that's the visitor's choice on the night switch
 const dayMode = () => localStorage.getItem("mode") === "dark" ? "dark" : "light";
diff --git a/site/style.css b/site/style.css
index 6907b709..5701a087 100644
--- a/site/style.css
+++ b/site/style.css
@@ -164,7 +164,9 @@ h1, h2, h3 { text-wrap: balance; }
 [data-mode="dark"] .op-bar { background: color-mix(in srgb, #0d1030 42%, transparent); box-shadow: inset 0 0 0 1px #ffffff2e, 0 20px 44px -20px #000000a6; }
 /* the card's bar on its way up: a copy of it, out of the card, that stretches and shrinks into the real bar */
 .op-fly { position: fixed; margin: 0; transform-origin: 0 0; }
-/* behind the card the page waits: the bar and the notes come in once the bar has reached the top */
+/* behind the card the page waits, and doesn't scroll: the bar and the notes come in once the bar has reached the top */
+.intro { scrollbar-gutter: stable; }
+.intro body { overflow: hidden; }
 .intro .dock { opacity: 0; pointer-events: none; }
 .intro .hero > * { opacity: 0; translate: 0 14px; pointer-events: none; }
 .intro.op-bar-in .dock { opacity: 1; transition: opacity .3s; }

From 1a06829533cf89ec2608d8d0f7e7d694b62df0d2 Mon Sep 17 00:00:00 2001
From: Steve Mendes Reis <M4n0x@users.noreply.github.com>
Date: Sat, 31 Oct 2026 12:19:37 +0100
Subject: [PATCH 44/46] docs: keep the website's door handle in place when
 someone knocks

A knock jolted a copy of the cottage's door that was drawn another way: its handle jumped to
the other side and a line ran along its foot. The cottage, the knocks and the keeper's visit
now draw one door. Its handle stays put while the door jolts, goes with it as it opens, and is
out of sight once the door is past square, as in the install scene.
---
 site/scene.js | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/site/scene.js b/site/scene.js
index 9da94e67..73c86835 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -2402,13 +2402,21 @@ function drawCottage(s, c) {
   ribbon(c, [[wx + ww / 2, wy + 1], [wx + ww / 2, wy + wh - 1]], TEX, 12, { tin: 1, tout: 1, w0: 0.8, w1: 0.8 });
   ribbon(c, [[wx + 1, wy + wh / 2], [wx + ww - 1, wy + wh / 2]], TEX, 13, { tin: 1, tout: 1, w0: 0.8, w1: 0.8 });
   c.fillStyle = INK; c.fill();
-  // the door (it opens for the keeper: see the states)
+  // the door (it opens for the keeper: see the states and drawVisit)
   const dx = x0 + w * 0.56, dw = w * 0.24, dh = h * 0.66;
   k.door = { x: dx, y: k.base - dh, w: dw, h: dh };
-  print(c, [[dx, k.base], [dx, k.base - dh], [dx + dw, k.base - dh], [dx + dw, k.base]], mul(C.door, P.paper));
-  c.beginPath(); edges(c, [[dx, k.base], [dx, k.base - dh], [dx + dw, k.base - dh], [dx + dw, k.base]], DET * 0.85, 14, false, { ov: 1 });
-  c.fillStyle = INK; c.fill();
-  dot(c, dx + dw * 0.78, k.base - dh * 0.48, 1.3 * u + 0.4, INK);
+  drawDoor(s, c);
+}
+
+/* the cottage's door, hinged on its right: shut, or swung out (open 1: against the wall), and moved by a knock (jig).
+   Shut and still it's the one drawn with the cottage, so the knocks and the keeper's visit draw it the same way. Its
+   handle is on the outside: it goes with the door as it opens, out of sight once the door is past square */
+function drawDoor(s, c, open = 0, jig = 0) {
+  const u = s.g.u, k = s.g.cot, d = k.door, hx = d.x + d.w + jig, fx = lerp(d.x, d.x + d.w * 1.55, open) + jig;
+  const door = [[fx, k.base - 1 * u * open], [fx, d.y + 2 * u * open], [hx, d.y], [hx, k.base]];
+  print(c, door, mul(C.door, s.P.paper));
+  c.beginPath(); edges(c, door, DET * 0.85, 14, false, { ov: 1 }); c.fillStyle = INK; c.fill();
+  if (hx - fx > 3 * u) dot(c, lerp(fx, hx, 0.78), k.base - d.h * 0.48, 1.3 * u + 0.4, INK);
 }
 
 /* the tower: white with curved stripes in the theme's colours, a door, two windows and a gallery */
@@ -2839,11 +2847,7 @@ function drawVisit(s, c) {
     }
   }
   // the door, swinging out on its right-hand hinge until it lies against the wall
-  const hx = d.x + d.w + jig, fx = lerp(d.x, d.x + d.w * 1.55, open) + jig;
-  const door = [[hx, k.base], [hx, d.y], [fx, d.y + 2 * u * open], [fx, k.base - 1 * u * open]];
-  print(c, door, mul(C.door, P.paper));
-  c.beginPath(); edges(c, door, DET * 0.85, 3, true, { ov: 0.6 }); c.fillStyle = INK; c.fill();
-  if (Math.abs(fx - hx) > 3 * u) dot(c, lerp(hx, fx, 0.85), k.base - d.h * 0.48, 1.3 * u + 0.4, INK);
+  drawDoor(s, c, open, jig);
 }
 
 /* install: night, the cottage door open with warm light, the keeper waving */

From 3bcfe8500eb9da2f903d006be8ed1029f8ea45c0 Mon Sep 17 00:00:00 2001
From: Sebastien Graf <95282692+Seb-GRAF@users.noreply.github.com>
Date: Sat, 31 Oct 2026 12:54:32 +0100
Subject: [PATCH 45/46] docs: draw the website's scene in each theme's own
 style

---
 site/fonts/libre-caslon-text-OFL.txt      |  93 +++++
 site/fonts/libre-caslon-text-italic.woff2 | Bin 0 -> 18244 bytes
 site/index.html                           |   6 +
 site/main.js                              |   3 +-
 site/scene.js                             | 356 ++++++++++++------
 site/styles/cartoon.js                    | 228 ++++++++++++
 site/styles/clay.js                       | 432 ++++++++++++++++++++++
 site/styles/papercut.js                   | 403 ++++++++++++++++++++
 site/styles/poster.js                     | 215 +++++++++++
 site/styles/swiss.js                      | 317 ++++++++++++++++
 site/styles/vector.js                     | 372 +++++++++++++++++++
 11 files changed, 2309 insertions(+), 116 deletions(-)
 create mode 100644 site/fonts/libre-caslon-text-OFL.txt
 create mode 100644 site/fonts/libre-caslon-text-italic.woff2
 create mode 100644 site/styles/cartoon.js
 create mode 100644 site/styles/clay.js
 create mode 100644 site/styles/papercut.js
 create mode 100644 site/styles/poster.js
 create mode 100644 site/styles/swiss.js
 create mode 100644 site/styles/vector.js

diff --git a/site/fonts/libre-caslon-text-OFL.txt b/site/fonts/libre-caslon-text-OFL.txt
new file mode 100644
index 00000000..d718bc9c
--- /dev/null
+++ b/site/fonts/libre-caslon-text-OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2018 The Libre Caslon Text Project Authors (https://github.com/thundernixon/Libre-Caslon)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/site/fonts/libre-caslon-text-italic.woff2 b/site/fonts/libre-caslon-text-italic.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..28c0094591f06c4f0031f4c6da1e05d6e96ab3db
GIT binary patch
literal 18244
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
HyafON=fafV

literal 0
HcmV?d00001

diff --git a/site/index.html b/site/index.html
index 1b7b3f88..90acf53b 100644
--- a/site/index.html
+++ b/site/index.html
@@ -65,6 +65,12 @@
 } catch {}
 </script>
 <script src="scene.js" defer></script>
+<script src="styles/clay.js" defer></script>
+<script src="styles/cartoon.js" defer></script>
+<script src="styles/vector.js" defer></script>
+<script src="styles/papercut.js" defer></script>
+<script src="styles/poster.js" defer></script>
+<script src="styles/swiss.js" defer></script>
 <script src="main.js" defer></script>
 </head>
 <body>
diff --git a/site/main.js b/site/main.js
index 4429fbdd..18cc8b9e 100644
--- a/site/main.js
+++ b/site/main.js
@@ -67,7 +67,8 @@ function tick() {
 tick();
 setInterval(tick, 1000);
 
-/* Themes: the tags on the washing line restyle the bar, and dress the lighthouse to match */
+/* Themes: the tags on the washing line restyle the bar, and the drawing: each theme draws the scene in its own style
+   (styles/), which the lighthouse's light brings in as it turns once round, the lighthouse in the theme's pyjamas */
 function setTheme(id) {
   dock.dataset.theme = id;
   bar.className = `bar ${THEMES.find(t => t[0] === id)[2]}`;
diff --git a/site/scene.js b/site/scene.js
index 73c86835..733d346f 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -17,7 +17,7 @@ const rng = seed => { let a = (seed >>> 0) || 1; return () => { a = (a + 0x6D2B7
 const hex = h => [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)];
 const mix = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];
 const mul = (a, b) => [a[0] * b[0] / 255, a[1] * b[1] / 255, a[2] * b[2] / 255];
-const rgba = (c, a = 1) => `rgba(${c[0] | 0},${c[1] | 0},${c[2] | 0},${a})`;
+const rgba = (c, a = 1) => { if (TINT) c = TINT(c); return `rgba(${c[0] | 0},${c[1] | 0},${c[2] | 0},${a})`; };
 const angDiff = (a, b) => { let d = (a - b) % TAU; if (d > Math.PI) d -= TAU; if (d < -Math.PI) d += TAU; return d; };
 // the light's turn that faces you (its rotation at a quarter turn), nearest to where it is
 const facing = phi => Math.PI / 2 + TAU * Math.round((phi - Math.PI / 2) / TAU);
@@ -117,10 +117,10 @@ const THEMES = {
 };
 const STATES = ['hero', 'edit', 'themes', 'widgets', 'tiling', 'install'];
 const KINDS = ['sheep', 'cow', 'duck', 'monster', 'gull'];
-const C = {
+let C = {
   wool: hex('#FFFFFF'), yolk: hex('#FFC21A'), duck: hex('#FFD21F'), beak: hex('#FF7A1A'), pink: hex('#FF9CB0'),
   monster: hex('#FF8FC0'), chimney: hex('#E8452F'), roof: hex('#2B2B36'), door: hex('#2E58D8'), skin: hex('#F6C9A6'),
-  navy: hex('#25305E'), wood: hex('#C98B4A'), steel: hex('#D8DCE6'), moon: hex('#FFE89A'), tile: hex('#1D1D24'),
+  navy: hex('#25305E'), wood: hex('#C98B4A'), steel: hex('#D8DCE6'), moon: hex('#FFE89A'), tile: hex('#1D1D24'), iris: hex('#FFB52E'), lamp: hex('#FFD45C'),
   huts: ['#FF4A36', '#2E58D8', '#FFC21A', '#36A852'].map(hex),
   kraft: hex('#CC9A5E'), kraftLit: hex('#E2B983'), kraftDark: hex('#A87442'), tape: hex('#FFE04A'), sprout: hex('#2E9B3B'),
 };
@@ -134,16 +134,17 @@ const overlaps = (a, q) => q.length === 3
   ? Math.hypot(clamp(q[0], a[0], a[2]) - q[0], clamp(q[1], a[1], a[3]) - q[1]) < q[2]
   : a[0] < q[2] && a[2] > q[0] && a[1] < q[3] && a[3] > q[1];
 const boxK = s => Math.max(s.g.u, 0.72) * 1.12;
-const HAND = '"Shantell Sans Hand", "Shantell Sans", "Chalkboard SE", sans-serif';
+let HAND = '"Shantell Sans Hand", "Shantell Sans", "Chalkboard SE", sans-serif', WEIGHT = 400, CAPS = false;
 
 /* ---------- the pen ----------
    One felt pen in three weights. Every stroke is a filled ribbon whose width follows the pen's
    pressure: thin where it lands and lifts, a little uneven along the way. The line boils between
-   three states; the printed fills don't boil and sit one constant vector off the line. */
-let BOIL = 0, PW = 1, INK = '#111', REGX = 2.6, REGY = 1.9, NAP = false;
+   three states; the printed fills don't boil and sit one constant vector off the line. These are the felt pen's;
+   the pen, the fills, the colours and the font in use are the style's being drawn (see STYLES). */
+let BOIL = 0, PW = 1, INK = '#111', REGX = 2.6, REGY = 1.9, NAP = false, TINT = null, ribbon = feltRibbon, print = feltPrint;
 const SIL = 3.2, DET = 2.1, TEX = 1.35;
 
-function ribbon(c, pts, w, sd = 0, o = {}) {
+function feltRibbon(c, pts, w, sd = 0, o = {}) {
   const n = pts.length;
   if (n < 2) return;
   const len = new Float64Array(n);
@@ -186,7 +187,7 @@ function loop(c, pts, w, sd = 0, o = {}) {
     if (i <= n) out.push(p);
     else { const f = (i - n) / over * 1.6 * PW, dx = p[0] - cx, dy = p[1] - cy, dl = Math.hypot(dx, dy) || 1; out.push([p[0] + dx / dl * f, p[1] + dy / dl * f]); }
   }
-  ribbon(c, out, w, sd, { tin: 5, tout: 12, w0: 0.55, w1: 0.12, ...o });
+  ribbon(c, out, w, sd, { tin: 5, tout: 12, w0: 0.55, w1: 0.12, ...o, outline: true });
 }
 /* Straight edges, each its own stroke running a little past the corners */
 function edges(c, corners, w, sd = 0, closed = true, o = {}) {
@@ -194,21 +195,23 @@ function edges(c, corners, w, sd = 0, closed = true, o = {}) {
   for (let i = 0; i < (closed ? m : m - 1); i++) {
     const [x0, y0] = corners[i], [x1, y1] = corners[(i + 1) % m], l = Math.hypot(x1 - x0, y1 - y0) || 1, ux = (x1 - x0) / l, uy = (y1 - y0) / l;
     const a = hash(sd * 3.1 + i) * ov, b = hash(sd * 5.7 + i + 0.5) * ov;
-    ribbon(c, dens([[x0 - ux * a, y0 - uy * a], [x1 + ux * b, y1 + uy * b]], 5), w, sd + i * 1.7, { tin: 4, tout: 6, w0: 0.6, w1: 0.45, ...o });
+    ribbon(c, dens([[x0 - ux * a, y0 - uy * a], [x1 + ux * b, y1 + uy * b]], 5), w, sd + i * 1.7, { tin: 4, tout: 6, w0: 0.6, w1: 0.45, ...o, outline: true });
   }
 }
 /* A printed fill, off the line by the register vector */
-function print(c, pts, col) { poly(c, pts, true, REGX, REGY); c.fillStyle = typeof col === 'string' ? col : rgba(col); c.fill(); }
+function feltPrint(c, pts, col) { poly(c, pts, true, REGX, REGY); c.fillStyle = typeof col === 'string' ? col : rgba(col); c.fill(); }
 function shape(c, pts, col, w = DET, sd = 0, o) { print(c, pts, col); c.beginPath(); loop(c, pts, w, sd, o); c.fillStyle = INK; c.fill(); }
 function dot(c, x, y, r, col) { c.beginPath(); c.arc(x, y, r, 0, TAU); c.fillStyle = typeof col === 'string' ? col : rgba(col); c.fill(); }
 function label(c, text, x, y, size, col, align = 'left', rot = -0.035) {
   c.save(); c.translate(x, y); c.rotate(rot);
-  c.font = `400 ${size}px ${HAND}`; c.textAlign = align; c.textBaseline = 'middle'; c.fillStyle = col;
-  c.fillText(text, 0, 0); c.restore();
+  c.font = `${WEIGHT} ${size}px ${HAND}`; c.textAlign = align; c.textBaseline = 'middle'; c.fillStyle = col;
+  c.fillText(CAPS ? text.toUpperCase() : text, 0, 0); c.restore();
 }
 
 /* ---------- the scene: geometry, state, input and time ---------- */
 const IDLE_AFTER = 4000, IDLE_FPS = 14, BOIL_FPS = 7, MAX_OBJS = 36;
+// a new style comes in as the light turns once round, in this many seconds (see setTheme)
+const SWAP = 1.2;
 // the opening's wake-up, in seconds. At night, from when its eye starts to open: it opens halfway (to `lids.mid` shut)
 // by `lids.half`, stays a moment, droops a little (to `lids.heavy`) by `lids.sag`, then opens all the way by `open`,
 // easing out. Then it strains to light its lamp, squeezing its eye shut for each of `pushes` ([when, how long, how
@@ -282,6 +285,9 @@ const ISLAND = ['g', ...Object.keys(islandState())];
 // the islands are drawn between these sizes: from far off, where they come out of the haze (by then the next island is
 // all there is to see, the one after it comes as you go), to going past, off the screen
 const FAR = 0.07, PAST = 30;
+// the far island seen from the page is in the page's style; it changes into its own theme's over this much of the
+// dive's first lap (see drawScene)
+const OWN = 0.1;
 // the lighthouse standing on `base` at x, h tall to its gallery, the eye in its lamp er across: its lamp and hat
 function tower(g, x, base, h, er) {
   const T = g.lh = { x, base, h, er, gal: er * 0.62, top: base - h, wT: er * 1.62, wB: er * 2.6 };
@@ -289,6 +295,73 @@ function tower(g, x, base, h, er) {
   T.hatTop = g.lamp.y - er * 3.6;
 }
 
+/* ---------- styles ----------
+   Each theme draws the whole scene in its own medium: the same hill, animals, gags and hours, another hand. The felt
+   pen is the built-in theme's. Each of the others has a file in styles/ that registers its style, after this file and
+   before the page makes the scene:
+
+     Hill.style('nord', { pal, C, tint, ribbon, pen, boil, print, reg, hand, weight, caps, fps, before, after, draw });
+
+   Every lever is optional; what a style leaves out is the felt pen's (Hill.felt).
+     pal     the hours: stops like PAL's, made with Hill.stops, with the same keys. `ink` is the line's colour. The
+             islands' ground darkens with the hour as `hill` and `hill2` do from the first stop, so neither may
+             have a channel at 0 there.
+     C       the colour constants it changes, made with Hill.hex; the others stay.
+     tint    a colour [r, g, b] in, a colour out, wherever a colour is written out (rgba): every fill and stroke,
+             cached ones too, but not the few glints written as '#FFFFFF'. For greys, or all in one colour.
+     ribbon  the line: (c, pts, w, sd, o) adds a stroke along the points, w wide (times PW), to the path, and the
+             caller fills it, mostly in INK. ink, loop, edges, shape and most drawings go through it. sd seeds its
+             wobble; o holds the felt pen's taper and wobble (tin, tout, w0, w1, amp), which another line may
+             ignore, and says what the stroke is: o.outline goes round a shape the caller fills (loop's and edges',
+             so shape's too, and a few drawn on their own), o.hatch is shading. An empty one draws no lines at all.
+     pen     the line's weight, times the felt pen's (1).
+     boil    how many times a second the line moves on, between three states (7); 0 holds it still. The cached
+             layers are drawn once for each state.
+     print   the fill: (c, pts, col) fills the polygon REGX, REGY off the line, col a colour or a CSS string.
+     reg     that offset, [x, y] in pen units ([2.6, 1.9]); [0, 0] prints the fills on the line.
+     hand    the font of the labels and doodles, a CSS font family list. For a web font, add its FontFace to
+             document.fonts: the first text drawn in it fetches it, and when it's in, the scene draws again and
+             redraws its cached layers (they're keyed on fontsV).
+     weight  the labels' and doodles' font weight (400).
+     caps    true sets the labels and doodles in capitals, and measures them so where they're placed.
+     fps     draws at this many frames a second: the drawing's time (s.t) is stepped, the world's isn't (s.clock),
+             so things still go where they go between the steps.
+     before  (s, c) at the start of each frame, after the levers are on; after (s, c) at its end, over everything
+             (grain, scanlines, fibre). Both in the scene's CSS pixels.
+     draw    { name(base, ...args) }: any of the drawings named in Hill.felt.draw, in place of the felt pen's, which comes
+             as base to call or not. The drawings call each other through DRAW, so an override is used wherever
+             its drawing is, by the felt ones too.
+   A drawing gets the scene s and the canvas c (the animals get c, u, their colour, o and t, and obj gets s): s.g the
+   geometry (W, H, u, pw, top, horizon, ridge, shore, hillPoly, hillClip, lh the tower, lamp, cot the cottage,
+   clouds, sheepCloud, stars, tufts), s.P the palette now, s.t the time, s.d the hour (0 day, 1 night), s.style the
+   style on, s.theme the page's theme, s.beam, s.pres how far in each section's scene is, s.reduced. Lengths are CSS
+   pixels of the scene; sizes go in u (g.u, 1 on a window of about 1138 by 1138) and pens in pw. The islands of the
+   dive use the same drawings in their own s.g, on a canvas scaled by view, each in its own theme's style (but the
+   far one seen from the page, in the page's), while the sky and the sea are in the page's. The band behind the
+   horizon and the hill with its cottage and tower are cached layers, the sun, the moon and the clouds sprites: those
+   drawings run only when the hour's step, the boil state, the style, the size or the fonts change, so they can't
+   move on their own. Drawings leave the scene as they found it, save the cottage, which puts its door in g.cot.door
+   for the visit and the doorway: one drawn without base must too. Every style keeps the lighthouse's pyjamas:
+   THEMES[g.theme || s.theme]. */
+const FELT = {
+  id: 'built-in', pal: PAL, C, ribbon: feltRibbon, print: feltPrint, pen: 1, boil: BOIL_FPS, reg: [2.6, 1.9], hand: HAND, weight: 400, caps: false,
+  draw: {
+    scene: drawScene, sky: drawSky, band: drawBand, stars: drawStars, waves: drawWaves, ripples: drawRipples, sun: drawSun,
+    moon: drawMoon, halo: drawHalo, beam: drawBeam, cloud: drawCloud, land: drawLand, front: drawFront, hill: drawHill,
+    cottage: drawCottage, tower: drawTower, hillLight: drawHillLight, tufts: drawTufts, visit: drawVisit, smoke: drawSmoke,
+    eye: drawEye, hat: drawHat, box: drawBox, leap: drawLeap, meadow: drawMeadow, obj: drawObj, sheep: drawSheep,
+    cow: drawCow, gull: drawGull, duck: drawDuck, monster: drawMonster, states: drawStates, washing: drawWashing,
+    huts: drawHuts, desk: drawDesk, doorway: drawDoorway, editKeeper: drawEditKeeper, keeper: drawKeeper, tile: drawTile,
+    labels: drawLabels, splashes: drawSplashes, ball: drawBall, doodles: drawDoodles,
+  },
+};
+const STYLES = { 'built-in': FELT };
+let DRAW = FELT.draw;
+function style(id, st) {
+  const own = st.draw || {};
+  STYLES[id] = { ...FELT, ...st, id, C: { ...FELT.C, ...st.C }, draw: Object.fromEntries(Object.entries(FELT.draw).map(([k, f]) => [k, own[k] ? (...a) => own[k](f, ...a) : f])) };
+}
+
 class Scene {
   constructor(host, opts = {}) {
     this.o = Object.assign({ topInset: 0, dusk: 0, seed: 11 }, opts);
@@ -311,7 +384,7 @@ class Scene {
     this.blink = { next: 2.5, at: -9, wink: -9 };
     this.layers = {};
     this.sprites = new Map();
-    this.fontsV = 0; this.layoutV = 0; this.sparkle = -9; this.rebuilds = 0;
+    this.fontsV = 0; this.layoutV = 0; this.rebuilds = 0;
     this.onFrame = null;
     this.onBar = null;
     this.held = !!this.o.held;
@@ -358,9 +431,17 @@ class Scene {
     }
     this.wake();
   }
+  // once the scene is up, the new style comes in with the light: the last frame, in the old one, stays where the light
+  // hasn't been yet (see swap); without motion or out at sea, at once
   setTheme(id) {
     if (!THEMES[id]) return;
-    if (id !== this.theme) { this.theme = id; if (this.t > 0.5) this.sparkle = this.t; }
+    if (id !== this.theme && this.t > 0.5 && !this.reduced && !this.dive) {
+      const x = this.was ||= document.createElement('canvas').getContext('2d');
+      x.canvas.width = this.canvas.width; x.canvas.height = this.canvas.height;
+      x.drawImage(this.canvas, 0, 0);
+      this.swap = { t0: this.t, a0: this.beam.a, a: this.beam.a, L: this.g.lamp };
+    }
+    this.theme = id;
     this.wake();
   }
   setWorkspace(n) { this.ws = clamp(Math.round(+n || 1), 1, 4); this.wake(); }
@@ -456,7 +537,7 @@ class Scene {
   beamI() { return Math.max(0.3 + 0.7 * smooth(0.22, 0.72, this.d), this.pres.install); }
   lamp() { return { x: this.g.lamp.x + this.ox, y: this.g.lamp.y + this.oy }; }
   // the colour of the sky at the top of the drawing right now, as #rrggbb
-  sky() { const c = this.P?.sky; return c ? '#' + c.map(v => Math.round(v).toString(16).padStart(2, '0')).join('') : null; }
+  sky() { const c = this.P && (TINT ? TINT(this.P.sky) : this.P.sky); return c ? '#' + c.map(v => Math.round(v).toString(16).padStart(2, '0')).join('') : null; }
 
   /* ----- input, in client coordinates ----- */
   pointer(x, y, kind = 'mouse') {
@@ -1204,7 +1285,7 @@ class Scene {
     // reduced motion and nothing moving: the scene sleeps until the next call or input
   }
   busy() {
-    if (this.sweep || this.wakePath || this.gaze || this.visit || this.t - this.knocks.at < 0.5 || this.showing() || this.t - this.wokeAt < WAKE.open + 0.2 || this.t - this.labelsAt < 0.6) return true;
+    if (this.swap || this.sweep || this.wakePath || this.gaze || this.visit || this.t - this.knocks.at < 0.5 || this.showing() || this.t - this.wokeAt < WAKE.open + 0.2 || this.t - this.labelsAt < 0.6) return true;
     if (Math.abs(this.box.lid - (this.boxEmpty() ? 1 : 0)) > 0.01) return true;
     if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
@@ -1247,7 +1328,7 @@ class Scene {
       this.pres[k] = rm ? want : clamp(this.pres[k] + Math.sign(want - this.pres[k]) * dt * 1.8);
     }
     this.stepDusk(dt);
-    this.boil = rm ? 0 : Math.floor(this.t * BOIL_FPS) % 3;
+    if (this.swap && this.t - this.swap.t0 > SWAP) this.swap = null;
     this.vel.x *= Math.exp(-dt * 2.5); this.vel.y *= Math.exp(-dt * 2.5);
     this.windAmb = rm ? 0.2 : 0.28 + 0.22 * noise(this.t * 0.13 + 3);
     this.wind = lerp(this.wind, clamp(this.vel.x / 1300, -1.5, 1.5), Math.min(1, dt * 1.8));
@@ -1303,7 +1384,12 @@ class Scene {
     this.splashes = this.splashes.filter(p => this.t - p.t0 < 0.7);
   }
   updateBeam(dt) {
-    const b = this.beam, L = this.g.lamp, now = performance.now() / 1000, rm = this.reduced, wp = this.wakePath;
+    const b = this.beam, L = this.g.lamp, now = performance.now() / 1000, rm = this.reduced, wp = this.wakePath, sw = this.swap;
+    if (sw && this.cur === this.w0) {
+      // a new style coming in: the page's light turns once round from where it was, all the way out (see setTheme)
+      b.a = sw.a = sw.a0 + TAU * smooth(0, SWAP, this.t - sw.t0); b.len = 1; b.flash = 0;
+      return;
+    }
     if (wp && (this.ball || this.t - wp.t0 > WAKE.end)) {
       this.wakePath = null;
       // done reading: on to the bar
@@ -1852,19 +1938,42 @@ class Scene {
 
   /* ----- drawing ----- */
   render() {
-    const c = this.ctx, g = this.g, k = this.dpr;
-    const step = Math.round(this.d * STEPS);
-    this.P = palAt(PAL, step / STEPS);
-    this.pstep = step;
-    BOIL = this.boil; PW = g.pw; INK = rgba(this.P.ink); REGX = 2.6 * g.pw; REGY = 1.9 * g.pw; NAP = this.drowsy() > 0.9;
+    const c = this.ctx, k = this.dpr, sw = this.swap;
+    this.pstep = Math.round(this.d * STEPS);
+    this.clock = this.t;
+    NAP = this.drowsy() > 0.9;
+    this.dress(this.theme);
     c.setTransform(k, 0, 0, k, 0, 0);
     c.globalAlpha = 1; c.globalCompositeOperation = 'source-over'; c.imageSmoothingQuality = 'high';
-    drawScene(this, c);
+    this.style.before?.(this, c);
+    DRAW.scene(this, c);
+    c.setTransform(k, 0, 0, k, 0, 0);
+    this.style.after?.(this, c);
+    // a new style coming in: the old one where the light hasn't been yet (where it was to begin with, it has)
+    const hw = this.g.beamHalf;
+    if (sw && sw.a + hw < sw.a0 + TAU - hw) {
+      const { x, y } = sw.L;
+      c.save(); c.setTransform(1, 0, 0, 1, 0, 0);
+      c.beginPath(); c.moveTo(x * k, y * k); c.arc(x * k, y * k, this.diag * 2 * k, sw.a + hw, sw.a0 + TAU - hw); c.closePath(); c.clip();
+      c.drawImage(this.was.canvas, 0, 0);
+      c.restore();
+    }
+    this.t = this.clock;
+  }
+  /* Draws from here on in a theme's style (see STYLES): its levers in the pen's place, its palette at this hour, and
+     its time */
+  dress(id) {
+    const st = this.style = STYLES[id], pw = this.g.pw;
+    this.t = st.fps ? Math.floor(this.clock * st.fps) / st.fps : this.clock;
+    this.boil = this.reduced || !st.boil ? 0 : Math.floor(this.t * st.boil) % 3;
+    TINT = st.tint; C = st.C; HAND = st.hand; WEIGHT = st.weight; CAPS = st.caps; ribbon = st.ribbon; print = st.print; DRAW = st.draw;
+    this.P = palAt(st.pal, this.pstep / STEPS);
+    BOIL = this.boil; PW = pw * st.pen; INK = rgba(this.P.ink); REGX = st.reg[0] * pw; REGY = st.reg[1] * pw;
   }
   /* A cached layer: one per boil state, redrawn when the hour, the theme or the layout changes, or when it's
      wanted at another resolution (`res` times the screen's: islands far off are drawn small) */
   layer(c, name, rect, draw, res = 1) {
-    const key = `${this.layoutV}|${this.pstep}|${this.theme}|${this.fontsV}|${res}`;
+    const key = `${this.layoutV}|${this.pstep}|${this.style.id}|${this.fontsV}|${res}`;
     const L = (this.layers[name] ||= [])[this.boil] ||= { cv: document.createElement('canvas'), key: '' };
     const k = this.dpr * res, x0 = Math.floor(rect.x * k), y0 = Math.floor(rect.y * k), w = Math.ceil(rect.w * k), h = Math.ceil(rect.h * k);
     if (L.key !== key) {
@@ -1881,7 +1990,7 @@ class Scene {
   }
   /* A small cached drawing (a cloud, the sun), drawn around its own origin */
   sprite(name, w, h, x, y, draw) {
-    const key = `${name}|${this.layoutV}|${this.boil}|${this.pstep}|${this.fontsV}`, k = this.dpr;
+    const key = `${name}|${this.style.id}|${this.layoutV}|${this.boil}|${this.pstep}|${this.fontsV}`, k = this.dpr;
     let s = this.sprites.get(key);
     if (!s) {
       const cv = document.createElement('canvas');
@@ -1912,40 +2021,52 @@ class Scene {
    Diving, you go on over the sea toward the horizon, past the islands.
    ===================================================================== */
 function drawScene(s, c) {
-  const g = s.g, { W, H, u } = g, P = s.P, shown = s.shown();
+  const g = s.g, { W, u } = g, shown = s.shown();
   c.lineCap = 'round'; c.lineJoin = 'round';
-  c.fillStyle = rgba(P.sky); c.fillRect(0, 0, W, g.horizon + 2);
-  c.fillStyle = rgba(P.sea); c.fillRect(0, g.horizon, W, H - g.horizon);
+  DRAW.sky(s, c);
   const bandTop = g.horizon - (g.horizon - g.top) * (g.portrait ? 0.42 : 0.36) - 20 * u;
-  s.layer(c, 'back', { x: 0, y: bandTop, w: W, h: g.horizon - bandTop + 6 * u }, x => drawBand(s, x, bandTop));
-  drawStars(s, c);
-  drawWaves(s, c);
-  for (const w of shown) { s.enter(w); drawRipples(s, c); }
+  s.layer(c, 'back', { x: 0, y: bandTop, w: W, h: g.horizon - bandTop + 6 * u }, x => DRAW.band(s, x, bandTop));
+  DRAW.stars(s, c);
+  DRAW.waves(s, c);
+  for (const w of shown) { s.enter(w); DRAW.ripples(s, c); }
   c.setTransform(s.dpr, 0, 0, s.dpr, 0, 0);
-  drawSun(s, c);
-  drawMoon(s, c);
-  // an island's ground in its theme's colours, as much darker than by day as the page's green is now
-  const day = PAL[0][1], ground = g => g.ground ? { ...P, hill: g.ground[0].map((v, i) => v * P.hill[i] / day.hill[i]), hill2: g.ground[1].map((v, i) => v * P.hill2[i] / day.hill2[i]) } : P;
-  const land = w => {
-    // an island comes out of the haze far off: then it's drawn whole on the side and laid over
-    const a = smooth(FAR, FAR * 1.6, w.view.s), x = a < 0.99 ? s.fade : c;
+  DRAW.sun(s, c);
+  DRAW.moon(s, c);
+  // an island in a style, its theme's or the page's, and its ground in its theme's colours, as much darker than by day
+  // as that style's green is now; then the page's style again (the page's hill is in it already)
+  const wear = (w, id, draw) => {
+    if (!w.g.isle) return draw();
+    s.dress(id);
+    const P = s.P, day = s.style.pal[0][1], [lit, shady] = w.g.ground;
+    P.hill = lit.map((v, i) => v * P.hill[i] / day.hill[i]); P.hill2 = shady.map((v, i) => v * P.hill2[i] / day.hill2[i]);
+    draw();
+    s.dress(s.theme);
+  };
+  // an island in a style, laid over at `a`: when that's less than all of it, it's drawn whole on the side first
+  const lay = (w, id, a) => {
+    const x = a < 0.99 ? s.fade : c;
     if (x !== c) { x.setTransform(1, 0, 0, 1, 0, 0); x.clearRect(0, 0, x.canvas.width, x.canvas.height); x.lineCap = 'round'; x.lineJoin = 'round'; }
     s.enter(w); view(s, x, w.view);
-    s.P = ground(w.g);
-    drawLand(s, x, w);
-    s.P = P;
+    wear(w, id, () => DRAW.land(s, x, w));
     if (x !== c) { c.save(); c.setTransform(1, 0, 0, 1, 0, 0); c.globalAlpha = a; c.drawImage(x.canvas, 0, 0); c.restore(); }
   };
+  // an island comes out of the haze far off. Seen from the page it's in the page's style, and as the dive begins its
+  // own comes in over it (see OWN)
+  const land = w => {
+    const a = smooth(FAR, FAR * 1.6, w.view.s), k = w.g.isle ? smooth(0, OWN, s.dive) : 1;
+    if (k < 1) lay(w, s.theme, a);
+    if (k > 0) lay(w, w.g.theme, a * k);
+  };
   // the islands far off, the light over them, the clouds, then the nearest island
   const near = shown.at(-1);
   for (const w of shown) if (w !== near) land(w);
   for (const w of shown) {
     const a = lightK(w.view.s);
-    if (a > 0) { s.enter(w); view(s, c, w.view); c.globalAlpha = a; drawHalo(s, c); c.globalAlpha = a; drawBeam(s, c); c.globalAlpha = 1; }
+    if (a > 0) { s.enter(w); view(s, c, w.view); wear(w, w.g.theme, () => { c.globalAlpha = a; DRAW.halo(s, c); c.globalAlpha = a; DRAW.beam(s, c); c.globalAlpha = 1; }); }
   }
   c.setTransform(s.dpr, 0, 0, s.dpr, 0, 0);
-  for (let i = 0; i < g.clouds.length; i++) drawCloud(s, c, g.clouds[i], 'cloud' + i);
-  drawCloud(s, c, g.sheepCloud, 'sheepcloud', true);
+  for (let i = 0; i < g.clouds.length; i++) DRAW.cloud(s, c, g.clouds[i], 'cloud' + i);
+  DRAW.cloud(s, c, g.sheepCloud, 'sheepcloud', true);
   land(near);
   s.enter(s.focus());
 }
@@ -1956,29 +2077,29 @@ const lightK = sc => smooth(0.45, 0.9, sc) * (1 - smooth(1, 2.2, sc));
 
 /* an island's land and what's on it, back to front */
 function drawLand(s, c, w) {
-  drawFront(s, c, w.view.s);
-  c.globalAlpha = lightK(w.view.s); drawHillLight(s, c); c.globalAlpha = 1;
-  drawTufts(s, c);
-  drawVisit(s, c);
-  drawSmoke(s, c);
-  drawEye(s, c);
-  drawHat(s, c);
+  DRAW.front(s, c, w.view.s);
+  c.globalAlpha = lightK(w.view.s); DRAW.hillLight(s, c); c.globalAlpha = 1;
+  DRAW.tufts(s, c);
+  DRAW.visit(s, c);
+  DRAW.smoke(s, c);
+  DRAW.eye(s, c);
+  DRAW.hat(s, c);
   // animals and the grass on the hill, back to front (a tuft in front of the one eating it)
   const items = [...s.objs.map(o => [o.leap ? s.box.gy + 0.25 : o.y, o]), ...s.meadow.map(m => [m.y + 0.5, m]), ...(s.box.gx != null ? [[s.box.gy, s.box]] : [])].sort((a, b) => a[0] - b[0]);
   const wet = o => o.state === 'float' || o.state === 'swim' || (o.state === 'fall' && s.isSea(o.x, o.ty));
   for (const [, it] of items) {
-    if (wet(it)) { c.save(); if (afloat(s, c, it.state === 'fall' ? it.ty : it.y)) drawObj(s, c, it); c.restore(); }
-    else it === s.box ? drawBox(s, c) : it.blades ? drawMeadow(s, c, it) : it.leap ? drawLeap(s, c, it) : drawObj(s, c, it);
+    if (wet(it)) { c.save(); if (afloat(s, c, it.state === 'fall' ? it.ty : it.y)) DRAW.obj(s, c, it); c.restore(); }
+    else it === s.box ? DRAW.box(s, c) : it.blades ? DRAW.meadow(s, c, it) : it.leap ? DRAW.leap(s, c, it) : DRAW.obj(s, c, it);
   }
   // the section's little scenes over them, on the page's hill: animals pass behind the desk, the huts and the keeper
   if (w === s.w0) {
-    drawStates(s, c);
+    DRAW.states(s, c);
     const lk = s.labelsK();
-    if (s.pres.hero > 0.01 && lk > 0.01 && !s.dive) { c.globalAlpha = lk; drawLabels(s, c); c.globalAlpha = 1; }
+    if (s.pres.hero > 0.01 && lk > 0.01 && !s.dive) { c.globalAlpha = lk; DRAW.labels(s, c); c.globalAlpha = 1; }
   }
-  drawSplashes(s, c);
-  drawBall(s, c);
-  drawDoodles(s, c);
+  DRAW.splashes(s, c);
+  DRAW.ball(s, c);
+  DRAW.doodles(s, c);
 }
 
 /* the hill with its cottage and tower: cached at about the size it's drawn, or drawn as it is when larger than life */
@@ -1986,7 +2107,7 @@ function drawFront(s, c, sc) {
   const g = s.g, { W, H, u } = g, T = g.lh, x0 = g.shore ? g.ridge[0][0] - 8 : Math.max(0, g.ridge[0][0] - 10);
   const x1 = Math.min(W, g.ridge.at(-1)[0] + 8), y0 = Math.min(T.top - T.gal * 1.2, g.cot.base - g.cot.h * 4.2) - 10 * u;
   const y1 = g.shore ? Math.max(...g.shore.map(p => p[1])) + 26 * u : H;
-  const draw = x => { drawHill(s, x); drawCottage(s, x); drawTower(s, x); };
+  const draw = x => { DRAW.hill(s, x); DRAW.cottage(s, x); DRAW.tower(s, x); };
   if (sc > 1) draw(c);
   else s.layer(c, 'front' + (g.theme || ''), { x: x0, y: y0, w: x1 - x0, h: y1 - y0 }, draw, 2 ** Math.ceil(Math.log2(sc)));
 }
@@ -2007,6 +2128,13 @@ function afloat(s, c, y) {
   return true;
 }
 
+/* the sky and the sea, flat */
+function drawSky(s, c) {
+  const g = s.g, P = s.P;
+  c.fillStyle = rgba(P.sky); c.fillRect(0, 0, g.W, g.horizon + 2);
+  c.fillStyle = rgba(P.sea); c.fillRect(0, g.horizon, g.W, g.H - g.horizon);
+}
+
 /* the lower sky, a lighter band with a soft wave at its top, and the horizon */
 function drawBand(s, c, bandTop) {
   const g = s.g, { W, u } = g, P = s.P;
@@ -2169,7 +2297,7 @@ function drawBox(s, c) {
   edges(c, K([[-hw, -hh], [hw, -hh], [hw, hh]]), TEX * 1.25, 9, false, { ov: 0.8 });
   edges(c, K([[hw, -hh], [hw + dx, -hh + dy]]), TEX * 1.25, 12, false, { ov: 0.6 });
   flaps.forEach((f, i) => edges(c, f, TEX * 1.25, 40 + i, true, { ov: 0.8 }));
-  BOX.holes.forEach(([hx, hy], i) => ribbon(c, ellipse(hx * k, hy * k, r, r, 12, i), TEX, 30 + i, { tin: 1, tout: 1, w0: 1, w1: 1, amp: 0.2 }));
+  BOX.holes.forEach(([hx, hy], i) => ribbon(c, ellipse(hx * k, hy * k, r, r, 12, i), TEX, 30 + i, { tin: 1, tout: 1, w0: 1, w1: 1, amp: 0.2, outline: true }));
   for (const ax of [hw + dx * 0.32, hw + dx * 0.7]) {
     const x = ax * k, y0 = (dy * (ax - hw) / dx + 6) * k, y1 = y0 - 7 * k;
     ribbon(c, [[x, y0], [x, y1]], TEX * 0.9, ax, { tin: 1, tout: 1, w0: 0.8, w1: 0.8, amp: 0.1 });
@@ -2193,9 +2321,9 @@ function drawLeap(s, c, o) {
   if (s.t < o.leap.t0) return;
   const L = o.leap, f = clamp((s.t - L.t0) / L.dur), p = s.boxAt(), k = p.k;
   const inside = Math.abs(o.x - (p.x + BOX.dx * k * 0.5)) < BOX.hw * k && (L.in ? f > 0.5 : f < 0.5);
-  if (!inside) { drawObj(s, c, o); return; }
+  if (!inside) { DRAW.obj(s, c, o); return; }
   c.save(); c.beginPath(); c.rect(-1e4, -1e4, 2e4, 1e4 + p.y - BOX.hh * k + 1); c.clip();
-  drawObj(s, c, o);
+  DRAW.obj(s, c, o);
   c.restore();
 }
 
@@ -2348,7 +2476,7 @@ function drawHill(s, c) {
     const n = 3 + ((R() * 3) | 0), l = (13 + R() * 10) * u;
     for (let k = 0; k < n; k++) {
       const hx = x + k * 5 * u, hy = y + k * 1.6 * u, lk = l * (1 - Math.abs(k - (n - 1) / 2) * 0.16);
-      ribbon(c, [[hx, hy], [hx + lk * 0.42, hy + lk]], TEX, i * 5 + k, { tin: 3, tout: 5, w0: 0.45, w1: 0.2, amp: 0.4 });
+      ribbon(c, [[hx, hy], [hx + lk * 0.42, hy + lk]], TEX, i * 5 + k, { tin: 3, tout: 5, w0: 0.45, w1: 0.2, amp: 0.4, hatch: true });
     }
   }
   c.fillStyle = INK; c.fill();
@@ -2364,8 +2492,8 @@ function drawHill(s, c) {
   c.fillStyle = rgba(P.foam); c.fill();
   // the ridge, and the shore under it if it has one
   c.beginPath();
-  ribbon(c, rd.filter(p => p[0] > -20 && p[0] < W + 20), SIL, 21, { tin: 4, tout: 4, w0: 0.8, w1: 0.8 });
-  if (g.shore) ribbon(c, g.shore.filter(p => p[0] < W + 20), SIL * 0.9, 23, { tin: 30, tout: 4, w0: 0.3, w1: 0.8 });
+  ribbon(c, rd.filter(p => p[0] > -20 && p[0] < W + 20), SIL, 21, { tin: 4, tout: 4, w0: 0.8, w1: 0.8, outline: true });
+  if (g.shore) ribbon(c, g.shore.filter(p => p[0] < W + 20), SIL * 0.9, 23, { tin: 30, tout: 4, w0: 0.3, w1: 0.8, outline: true });
   c.fillStyle = INK; c.fill();
   // daisies near the cottage and the tower, where the eye goes
   const D = rng(9);
@@ -2447,18 +2575,18 @@ function drawTower(s, c) {
   poly(c, dpts); c.fillStyle = rgba(C.roof); c.fill();
   // the outline: two sides and the base, then a few stripe edges and hatches on the shady side
   c.beginPath();
-  ribbon(c, dens([[T.x - T.wB / 2 - 1 * u, T.base + 3 * u], [T.x - T.wT / 2, T.top - 1 * u]], 6), SIL, 31, { tin: 6, tout: 4, w0: 0.7, w1: 0.6 });
-  ribbon(c, dens([[T.x + T.wB / 2 + 0.5 * u, T.base + 2 * u], [T.x + T.wT / 2, T.top - 1 * u]], 6), SIL, 33, { tin: 6, tout: 4, w0: 0.7, w1: 0.6 });
+  ribbon(c, dens([[T.x - T.wB / 2 - 1 * u, T.base + 3 * u], [T.x - T.wT / 2, T.top - 1 * u]], 6), SIL, 31, { tin: 6, tout: 4, w0: 0.7, w1: 0.6, outline: true });
+  ribbon(c, dens([[T.x + T.wB / 2 + 0.5 * u, T.base + 2 * u], [T.x + T.wT / 2, T.top - 1 * u]], 6), SIL, 33, { tin: 6, tout: 4, w0: 0.7, w1: 0.6, outline: true });
   for (let j = 1; j < bands; j++) {
     const e = edge(j / bands), cut = Math.round(e.length * (0.55 + hash(j) * 0.35));
     ribbon(c, j % 2 ? e.slice(0, cut) : e.slice(e.length - cut), TEX, 40 + j, { tin: 2, tout: 8, w0: 0.6, w1: 0.1 });
   }
   for (let j = 0; j < bands; j++) {
     const k = (j + 0.5) / bands, x = T.x + half(k) - 2.6 * u, y = yAt(k);
-    for (let i = 0; i < 3; i++) ribbon(c, [[x - i * 3 * u, y - T.h / bands * 0.32], [x - i * 3 * u - 0.6 * u, y + T.h / bands * 0.3 - i * 2 * u]], TEX * 0.85, j * 3 + i, { tin: 2, tout: 2, amp: 0.3 });
+    for (let i = 0; i < 3; i++) ribbon(c, [[x - i * 3 * u, y - T.h / bands * 0.32], [x - i * 3 * u - 0.6 * u, y + T.h / bands * 0.3 - i * 2 * u]], TEX * 0.85, j * 3 + i, { tin: 2, tout: 2, amp: 0.3, hatch: true });
   }
   for (const k of [0.25, 0.58]) edges(c, win(k, T.wB * 0.22, T.er * 0.75), TEX, 50 + k * 10, true, { ov: 0.6 });
-  ribbon(c, dpts, DET * 0.9, 61, { tin: 2, tout: 2 });
+  ribbon(c, dpts, DET * 0.9, 61, { tin: 2, tout: 2, outline: true });
   c.fillStyle = INK; c.fill();
   // the gallery: a dark deck the eye sits on
   const gw = T.wT * 0.95, gy = T.top;
@@ -2482,12 +2610,12 @@ function drawEye(s, c) {
   const px = L.x + Math.cos(pa) * rx * 0.42 * look, py = L.y + Math.sin(pa) * ry * 0.36 * look;
   const ir = er * (0.62 + 0.12 * B.flash) * (1 - 0.2 * wide), pr = er * (0.3 - 0.08 * night + 0.1 * B.flash) * (1 - 0.42 * wide);
   c.save(); poly(c, eye, true, REGX, REGY); c.clip();
-  dot(c, px + REGX, py + REGY, ir, mix(P.beam, hex('#FFB52E'), 0.35 - 0.2 * night));
+  dot(c, px + REGX, py + REGY, ir, mix(P.beam, C.iris, 0.35 - 0.2 * night));
   c.restore();
   c.save(); poly(c, eye); c.clip();
   dot(c, px, py, pr, INK);
   dot(c, px - pr * 0.45, py - pr * 0.5, pr * 0.38 + 0.4, '#FFFFFF');
-  c.beginPath(); ribbon(c, ellipse(px, py, ir, ir, 22), TEX, 3, { tin: 1, tout: 1, w0: 1, w1: 1, amp: 0.3 }); c.fillStyle = INK; c.fill();
+  c.beginPath(); ribbon(c, ellipse(px, py, ir, ir, 22), TEX, 3, { tin: 1, tout: 1, w0: 1, w1: 1, amp: 0.3, outline: true }); c.fillStyle = INK; c.fill();
   // the lid: a little heavy by day, wide awake at night, shut when it blinks or winks
   const bl = s.t - s.blink.at, wk = s.t - s.blink.wink;
   let shut = lerp(lerp(0.2, 0.02, night), 0, wide);
@@ -2604,17 +2732,6 @@ function drawHat(s, c) {
     for (let i = 0; i < 6; i++) { const a = -Math.PI / 2 + (i - 2.5) * 0.62, r0 = pr * (1.35 + f * 0.9), r1 = r0 + pr * 0.55 * (1 - f * 0.6); ribbon(c, [[cx + Math.cos(a) * r0, cy + Math.sin(a) * r0], [cx + Math.cos(a) * r1, cy + Math.sin(a) * r1]], TEX, i, { tin: 1, tout: 1 }); }
     c.fillStyle = rgba(P.ink, 1 - f); c.fill();
   }
-  // a sparkle or two after changing into new pyjamas
-  const sp = s.t - s.sparkle;
-  if (sp < 1.2 && !s.reduced) {
-    c.beginPath();
-    for (let i = 0; i < 6; i++) {
-      const a = -Math.PI / 2 + (i - 2.5) * 0.55, r1 = T.wB * (0.9 + sp * 1.4), r2 = r1 + 7 * u;
-      const cx = T.x, cy = T.top + T.h * 0.3;
-      ribbon(c, [[cx + Math.cos(a) * r1 * 1.4, cy + Math.sin(a) * r1 * 2], [cx + Math.cos(a) * r2 * 1.4, cy + Math.sin(a) * r2 * 2]], DET, i, { tin: 1, tout: 1 });
-    }
-    c.fillStyle = rgba(P.ink, 1 - sp / 1.2); c.fill();
-  }
 }
 
 /* grass along the ridge, leaning with the wind and away from the pointer */
@@ -2710,11 +2827,11 @@ function drawSmoke(s, c) {
 /* ---------- scene states: one dry gag per section, drawn where it's seen ---------- */
 function drawStates(s, c) {
   const p = s.pres;
-  if (p.themes > 0.01) drawWashing(s, c, p.themes);
-  if (p.tiling > 0.01) drawHuts(s, c, p.tiling);
-  if (p.widgets > 0.01) drawDesk(s, c, p.widgets);
-  if (p.install > 0.01) drawDoorway(s, c, p.install);
-  if (p.edit > 0.01) drawEditKeeper(s, c, p.edit);
+  if (p.themes > 0.01) DRAW.washing(s, c, p.themes);
+  if (p.tiling > 0.01) DRAW.huts(s, c, p.tiling);
+  if (p.widgets > 0.01) DRAW.desk(s, c, p.widgets);
+  if (p.install > 0.01) DRAW.doorway(s, c, p.install);
+  if (p.edit > 0.01) DRAW.editKeeper(s, c, p.edit);
 }
 /* pops a prop in from the ground: scale with a little overshoot */
 const pop = p => { const t = clamp(p); return t < 1 ? 1 - Math.pow(1 - t, 3) * Math.cos(t * 4.2) : 1; };
@@ -2768,7 +2885,7 @@ function drawKeeper(s, c, x, y, sc, pose, flip, walk) {
   print(c, head, skin);
   const beard = [[-4.4 * u, -29 * u], [-3 * u, -23.5 * u], [1 * u, -22.4 * u], [5.2 * u, -24.5 * u], [5.6 * u, -28.5 * u]];
   print(c, curve(beard, 2), white);
-  c.beginPath(); loop(c, head, DET, 6, { over: 0.04 }); ribbon(c, curve(beard, 2), TEX, 7, { tin: 1, tout: 1 }); c.fillStyle = INK; c.fill();
+  c.beginPath(); loop(c, head, DET, 6, { over: 0.04 }); ribbon(c, curve(beard, 2), TEX, 7, { tin: 1, tout: 1, outline: true }); c.fillStyle = INK; c.fill();
   dot(c, 2.6 * u, -30 * u, 0.9 * u + 0.3, INK);
   dot(c, 5.6 * u, -28.6 * u, 1.3 * u, mix(skin, hex('#E0786A'), 0.5));
   const cap = [[-5 * u, -31.5 * u], [-4.6 * u, -36 * u], [3 * u, -36.4 * u], [5.4 * u, -32 * u]];
@@ -2805,8 +2922,8 @@ function drawEditKeeper(s, c, p) {
   }
   const ry = s.ridgeY(x) ?? k.base, walking = !s.reduced && t > 0;
   c.globalAlpha = clamp(p * 1.5);
-  drawKeeper(s, c, x, ry + 2 * u, sc, 'carry', flip, walking ? s.t * 9 : 0);
-  drawTile(s, c, x + (flip ? -1 : 1) * 0.5 * u, ry + 2 * u - 42 * u * sc + Math.sin(s.reduced ? 0 : s.t * 9) * 0.6 * u, u * sc);
+  DRAW.keeper(s, c, x, ry + 2 * u, sc, 'carry', flip, walking ? s.t * 9 : 0);
+  DRAW.tile(s, c, x + (flip ? -1 : 1) * 0.5 * u, ry + 2 * u - 42 * u * sc + Math.sin(s.reduced ? 0 : s.t * 9) * 0.6 * u, u * sc);
   c.globalAlpha = 1;
 }
 
@@ -2820,7 +2937,7 @@ function drawVisit(s, c) {
   // each knock jolts it
   const jig = rm || ka > 0.45 ? 0 : Math.sin(ka * 55) * 0.9 * u * (1 - ka / 0.45);
   if (open < 0.005 && jig === 0) return;
-  const night = smooth(0.45, 0.75, s.d), warm = hex('#FFD45C');
+  const night = smooth(0.45, 0.75, s.d);
   const frame = [[d.x, k.base], [d.x, d.y], [d.x + d.w, d.y], [d.x + d.w, k.base]];
   if (open < 0.005) {
     // shut and jumping: the wall where the door was, under it
@@ -2831,10 +2948,10 @@ function drawVisit(s, c) {
     if (night > 0.05) {
       c.globalAlpha = open * night;
       poly(c, [[d.x, k.base], [d.x + d.w, k.base], [d.x + d.w + 44 * u, k.base + 34 * u], [d.x - 34 * u, k.base + 34 * u]]);
-      c.fillStyle = rgba(mix(P.hill, warm, 0.62)); c.fill();
+      c.fillStyle = rgba(mix(P.hill, C.lamp, 0.62)); c.fill();
       c.globalAlpha = 1;
     }
-    poly(c, frame); c.fillStyle = rgba(warm); c.fill();
+    poly(c, frame); c.fillStyle = rgba(C.lamp); c.fill();
     // the keeper in the doorway, leaning out the way he looks; then his back, walking in, a little smaller and higher
     // the further in he is, into the lamplight
     const kin = rm ? (a >= V.keeper[0] && a < V.keeper[1] ? 1 : 0) : smooth(V.keeper[0], V.keeper[0] + 0.12, a) * (1 - smooth(V.keeper[1] - 0.14, V.keeper[1], a));
@@ -2842,7 +2959,7 @@ function drawVisit(s, c) {
       const right = a >= V.right, back = a >= V.turn, deep = rm ? 0 : smooth(V.turn + 0.1, V.keeper[1], a);
       const lean = rm ? 0 : (right ? 1 : -1) * 2.5 * u * sc * (1 - smooth(V.turn - 0.05, V.turn + 0.15, a));
       c.globalAlpha = kin;
-      drawKeeper(s, c, d.x + d.w / 2 + lean, k.base - 5 * u * sc * deep, sc * (1 - 0.15 * deep), back ? 'back' : 'stand', !right && !back, back && !rm ? s.t * 9 : 0);
+      DRAW.keeper(s, c, d.x + d.w / 2 + lean, k.base - 5 * u * sc * deep, sc * (1 - 0.15 * deep), back ? 'back' : 'stand', !right && !back, back && !rm ? s.t * 9 : 0);
       c.globalAlpha = 1;
     }
   }
@@ -2854,17 +2971,16 @@ function drawVisit(s, c) {
 function drawDoorway(s, c, p) {
   const g = s.g, u = g.u, P = s.P, k = g.cot, d = k.door;
   if (!d) return;
-  const warm = hex('#FFD45C');
   c.globalAlpha = clamp(p * 1.4);
   // light spilling onto the grass
   const spill = [[d.x, k.base], [d.x + d.w, k.base], [d.x + d.w + 44 * u, k.base + 34 * u], [d.x - 34 * u, k.base + 34 * u]];
-  poly(c, spill); c.fillStyle = rgba(mix(P.hill, warm, 0.62)); c.fill();
-  poly(c, [[d.x, k.base], [d.x, d.y], [d.x + d.w, d.y], [d.x + d.w, k.base]]); c.fillStyle = rgba(warm); c.fill();
+  poly(c, spill); c.fillStyle = rgba(mix(P.hill, C.lamp, 0.62)); c.fill();
+  poly(c, [[d.x, k.base], [d.x, d.y], [d.x + d.w, d.y], [d.x + d.w, k.base]]); c.fillStyle = rgba(C.lamp); c.fill();
   // the door swung open against the wall
   const door = [[d.x + d.w, k.base], [d.x + d.w, d.y], [d.x + d.w * 1.55, d.y + 2 * u], [d.x + d.w * 1.55, k.base - 1 * u]];
   print(c, door, mul(C.door, P.paper));
   c.beginPath(); edges(c, door, DET * 0.85, 3, true, { ov: 0.6 }); c.fillStyle = INK; c.fill();
-  drawKeeper(s, c, d.x + d.w * 0.5, k.base, g.portrait ? 1.05 : 1.45, 'wave', false, 0);
+  DRAW.keeper(s, c, d.x + d.w * 0.5, k.base, g.portrait ? 1.05 : 1.45, 'wave', false, 0);
   c.globalAlpha = 1;
 }
 
@@ -2965,7 +3081,7 @@ function drawHuts(s, c, p) {
     c.beginPath();
     edges(c, roof, DET, i * 7, true, { ov: 1 }); edges(c, body, DET, i * 7 + 2, false, { ov: 0.8 });
     edges(c, door, TEX * 1.2, i * 7 + 4, false, { ov: 0.4 });
-    ribbon(c, ellipse(q.x, y0 - 5 * u, 3.4 * u, 3.4 * u, 12), TEX, i, { tin: 1, tout: 1, w0: 1, w1: 1 });
+    ribbon(c, ellipse(q.x, y0 - 5 * u, 3.4 * u, 3.4 * u, 12), TEX, i, { tin: 1, tout: 1, w0: 1, w1: 1, outline: true });
     c.fillStyle = INK; c.fill();
     label(c, String(i + 1), num[0] + 0.5 * u, num[1], 11 * u * num[2] + 2, rgba(white), 'center', 0);
   });
@@ -3029,8 +3145,7 @@ function drawLabels(s, c) {
   // the cloud with legs
   const sc = g.sheepCloud, p = s.cloudXY(sc), w = sc.w;
   const lx = p.x + w * 0.42 + (g.portrait ? 6 : 14 * u), ly = p.y + (g.portrait ? 12 : 22 * u);
-  c.font = `400 ${size}px ${HAND}`;
-  if (lx + 16 * u + c.measureText('a cloud (or a sheep)').width < (g.portrait ? g.lamp.x - T.er * 1.7 : T.x - T.er * 3)) {
+  if (lx + 16 * u + textW(s, 'a cloud (or a sheep)', size) < (g.portrait ? g.lamp.x - T.er * 1.7 : T.x - T.er * 3)) {
     label(c, 'a cloud (or a sheep)', lx + 16 * u, ly + 4 * u, size, col, 'left');
     c.fillStyle = col; arrow(c, [[lx + 12 * u, ly + 3 * u], [lx, ly + 2 * u], [p.x + w * 0.36, p.y + 6 * u]], TEX * 1.1, 9);
   }
@@ -3045,12 +3160,12 @@ function drawLabels(s, c) {
   // the sea
   const sea = seaLabelSpot(s);
   if (sea) {
-    const wTxt = c.measureText ? (c.font = `400 ${size}px ${HAND}`, c.measureText('the sea (wet)').width) : 100;
+    const wTxt = textW(s, 'the sea (wet)', size);
     label(c, 'the sea (wet)', sea.x, sea.y, size, rgba(P.paper, s.pres.hero), 'left');
     c.fillStyle = rgba(P.paper, s.pres.hero); arrow(c, [[sea.x + wTxt * 0.62, sea.y + 11 * u], [sea.x + wTxt * 0.5, sea.y + 22 * u], [sea.x + wTxt * 0.3, sea.y + 30 * u]], TEX * 1.1, 10);
   }
 }
-function textW(s, text, size) { const c = s.ctx; c.save(); c.font = `400 ${size}px ${HAND}`; const w = c.measureText(text).width; c.restore(); return w; }
+function textW(s, text, size) { const c = s.ctx; c.save(); c.font = `${WEIGHT} ${size}px ${HAND}`; const w = c.measureText(CAPS ? text.toUpperCase() : text).width; c.restore(); return w; }
 // what "a lighthouse (stable)" and its arrow cover (as drawLabels places them), for keeping out of their way
 function lighthouseLabelRects(s, w, size) {
   const g = s.g, u = g.u, T = g.lh, h = size * 0.75;
@@ -3113,11 +3228,11 @@ function drawObj(s, c, o) {
   c.scale((o.flip ? -1 : 1) * (1 + sq * 0.6), 1 - sq);
   const tint = base => mix(mul(base, P.paper), P.beam, clamp(lit) * 0.75);
   switch (o.kind) {
-    case 'sheep': drawSheep(c, k, tint(C.wool), o, t); break;
-    case 'cow': drawCow(c, k, tint(hex('#FFFFFF')), P, o, t); break;
-    case 'gull': drawGull(c, k, tint(hex('#FFFFFF')), o, t); break;
-    case 'duck': drawDuck(c, k, tint(C.duck), P, o, t); break;
-    case 'monster': drawMonster(c, k, tint(C.monster), P, o, t); break;
+    case 'sheep': DRAW.sheep(c, k, tint(C.wool), o, t); break;
+    case 'cow': DRAW.cow(c, k, tint(hex('#FFFFFF')), P, o, t); break;
+    case 'gull': DRAW.gull(c, k, tint(hex('#FFFFFF')), o, t); break;
+    case 'duck': DRAW.duck(c, k, tint(C.duck), P, o, t); break;
+    case 'monster': DRAW.monster(c, k, tint(C.monster), P, o, t); break;
   }
   c.restore();
   c.globalAlpha = 1;
@@ -3230,15 +3345,15 @@ function drawMonster(c, u, pink, P, o, t) {
     const hx = (-30 + i * 19) * u, hh = (8 + 2.5 * Math.sin(t * 2 + i * 1.3)) * u * (0.85 + 0.15 * sw);
     const hump = ellipse(hx, 1 * u, 8.5 * u, hh, 14, Math.PI, TAU);
     print(c, [...hump, [hx + 8.5 * u, 1 * u]], pink);
-    c.beginPath(); ribbon(c, hump, DET, i, { tin: 2, tout: 2 }); c.fillStyle = INK; c.fill();
+    c.beginPath(); ribbon(c, hump, DET, i, { tin: 2, tout: 2, outline: true }); c.fillStyle = INK; c.fill();
     c.beginPath(); ribbon(c, [[hx - 11 * u, 1.5 * u], [hx, 0], [hx + 11 * u, 1.5 * u]], TEX, i + 4, { tin: 2, tout: 2 }); c.fillStyle = rgba(P.foam); c.fill();
   }
   const neck = curve([[20 * u, 1 * u], [22 * u, -10 * u], [27 * u, -20 * u], [34 * u, -25 * u], [42 * u, -26 * u], [48 * u, -21 * u], [46 * u, -16 * u], [38 * u, -16 * u], [33 * u, -11 * u], [31 * u, 1 * u]], 2);
   print(c, neck, pink);
-  c.beginPath(); ribbon(c, neck, DET, 7, { tin: 2, tout: 2 }); c.fillStyle = INK; c.fill();
+  c.beginPath(); ribbon(c, neck, DET, 7, { tin: 2, tout: 2, outline: true }); c.fillStyle = INK; c.fill();
   c.beginPath(); ribbon(c, [[16 * u, 1.5 * u], [26 * u, 0], [36 * u, 1.5 * u]], TEX, 8, { tin: 2, tout: 2 }); c.fillStyle = rgba(P.foam); c.fill();
   dot(c, 41 * u, -21.5 * u, 2.6 * u, '#FFFFFF');
-  c.beginPath(); ribbon(c, ellipse(41 * u, -21.5 * u, 2.6 * u, 2.6 * u, 10), TEX, 9, { tin: 1, tout: 1, w0: 1, w1: 1 }); c.fillStyle = INK; c.fill();
+  c.beginPath(); ribbon(c, ellipse(41 * u, -21.5 * u, 2.6 * u, 2.6 * u, 10), TEX, 9, { tin: 1, tout: 1, w0: 1, w1: 1, outline: true }); c.fillStyle = INK; c.fill();
   dot(c, 41.8 * u, -21.3 * u, 1.1 * u, INK);
   c.beginPath(); ribbon(c, [[45 * u, -18 * u], [47 * u, -17.6 * u]], TEX, 10, { tin: 1, tout: 1 }); c.fill();
   // its little top hat, with a red band
@@ -3334,11 +3449,22 @@ function drawSplashes(s, c) {
       const dx = (i - 1.5) * (10 + 22 * e) * u, dy = -(30 + i % 2 * 10) * u * e + 70 * u * k * k, x = p.x + dx, y = p.y + dy, r = (2.8 - 1.4 * k) * u + 0.8;
       if (y > p.y + 2) continue;
       dot(c, x, y, r, foam);
-      c.beginPath(); ribbon(c, ellipse(x, y, r + 0.6, r + 0.6, 10), TEX * 0.8, i, { tin: 1, tout: 1, w0: 1, w1: 1 }); c.fillStyle = INK; c.fill();
+      c.beginPath(); ribbon(c, ellipse(x, y, r + 0.6, r + 0.6, 10), TEX * 0.8, i, { tin: 1, tout: 1, w0: 1, w1: 1, outline: true }); c.fillStyle = INK; c.fill();
     }
     c.globalAlpha = 1;
   }
 }
 
-window.Hill = { Scene, themes: Object.keys(THEMES), states: STATES, islands: ISLANDS.length };
+window.Hill = {
+  Scene, themes: Object.keys(THEMES), states: STATES, islands: ISLANDS.length,
+  // for the styles (see STYLES): style registers one, felt is the felt pen's with every lever
+  style, felt: FELT, PAL, THEMES, BOX, STEPS, SIL, DET, TEX, DIVE_GAP, SHORE, FAR,
+
+  TAU, clamp, lerp, smooth, easeOut, hash, noise, rng, hex, mix, mul, rgba, angDiff, stops, palAt,
+  curve, dens, ellipse, poly, inPoly, cloudPts, ink, loop, edges, shape, dot, label, arrow, quaver, bobble, pop,
+  hatGeom, head, napEye, joyAt, beamPoly, waveScallops, rank, lightK, view, afloat, hutSpots, deskSpot, seaLabelSpot, textW,
+  // what the style being drawn has on
+  get C() { return C; }, get INK() { return INK; }, get PW() { return PW; }, get BOIL() { return BOIL; }, get NAP() { return NAP; },
+  get REGX() { return REGX; }, get REGY() { return REGY; }, get HAND() { return HAND; }, get ribbon() { return ribbon; }, get print() { return print; },
+};
 })();
diff --git a/site/styles/cartoon.js b/site/styles/cartoon.js
new file mode 100644
index 00000000..443c4f18
--- /dev/null
+++ b/site/styles/cartoon.js
@@ -0,0 +1,228 @@
+/* Lighthouse Hill in a magazine cartoon, for Notch (see the styles in scene.js): a brush pen held still, no colour,
+   grey washes on white paper that pool at their edges and sit off the line, and a caption in Caslon italic under the
+   drawing, one per section */
+(() => {
+const { clamp, lerp, smooth, easeOut, noise, hash, rng, mix, rgba, poly, dens, SIL, TEX } = Hill;
+const PAPER = [251, 248, 241], INK = [24, 22, 20], paper = `rgb(${PAPER})`, ink = `rgb(${INK})`;
+const lum = c => (c[0] * 0.299 + c[1] * 0.587 + c[2] * 0.114) / 255;
+const CASLON = '"Libre Caslon Text", Georgia, serif';
+document.fonts.add(new FontFace('Libre Caslon Text', 'url(fonts/libre-caslon-text-italic.woff2)', { style: 'italic', weight: '400' }));
+
+/* The wash: ink thinned with water, laid on unevenly, a little more of it here and less there. One tile, made once:
+   the ink's colour, more or less opaque in soft blots. The sea's is the same, drawn out sideways in streaks. */
+const tile = document.createElement('canvas');
+tile.width = tile.height = 512;
+{
+  const x = tile.getContext('2d'), R = rng(5);
+  x.fillStyle = `rgba(${INK},0.72)`; x.fillRect(0, 0, 512, 512);
+  for (let i = 0; i < 140; i++) {
+    const px = R() * 512, py = R() * 512, r = 14 + R() ** 2 * 130, a = 0.1 + R() * 0.16;
+    x.globalCompositeOperation = R() < 0.5 ? 'source-over' : 'destination-out';
+    for (const ox of [-512, 0, 512]) for (const oy of [-512, 0, 512]) {
+      const gr = x.createRadialGradient(px + ox, py + oy, 0, px + ox, py + oy, r);
+      gr.addColorStop(0, `rgba(${INK},${a})`); gr.addColorStop(1, `rgba(${INK},0)`);
+      x.fillStyle = gr; x.fillRect(px + ox - r, py + oy - r, r * 2, r * 2);
+    }
+  }
+}
+const WASH = tile.getContext('2d').createPattern(tile, 'repeat'), SEA = tile.getContext('2d').createPattern(tile, 'repeat');
+WASH.setTransform(new DOMMatrix([1.5, 0, 0, 0.8, 0, 0])); SEA.setTransform(new DOMMatrix([3.2, 0, 0, 0.45, 0, 0]));
+
+/* A shape on the paper: white paper up to the line, so it hides what's behind it; then, unless it's white, a wash
+   as dark as its colour, off the line, darker where it dried at its edges. The near-blacks are filled in solid. */
+function wash(c, pts, col, pat = WASH) {
+  const k = lum(col), ga = c.globalAlpha;
+  poly(c, pts); c.fillStyle = paper; c.fill();
+  if (k > 0.92) return;
+  if (k < 0.2) { c.fillStyle = rgba(col); c.fill(); return; }
+  c.save();
+  poly(c, pts, true, Hill.REGX, Hill.REGY);
+  c.globalAlpha = ga * Math.min(1, (1 - k) / 0.72); c.fillStyle = pat; c.fill();
+  c.globalAlpha = ga * (1 - k) * 0.45; c.strokeStyle = ink; c.lineWidth = 1.5 * Hill.PW; c.stroke();
+  c.restore();
+}
+
+/* The brush pen: thick where the stroke runs across the nib and thin along it, swelling from a fine start to a fine
+   end, steady. The outlines come out heavier than the felt pen's, the hatching and small marks lighter. */
+const NIB = -0.7;
+function brush(c, pts, w, sd = 0, o = {}) {
+  const n = pts.length;
+  if (n < 2) return;
+  const PW = Hill.PW, len = [0];
+  for (let i = 1; i < n; i++) len.push(len[i - 1] + Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]));
+  const total = len[n - 1] || 1, tin = Math.min(total * 0.45, (o.tin ?? 9) * PW * 1.6), tout = Math.min(total * 0.5, (o.tout ?? 15) * PW * 1.6);
+  const w0 = (o.w0 ?? 0.4) * 0.5, w1 = (o.w1 ?? 0.22) * 0.5, hw0 = w * PW * 0.5 * (w >= SIL * 0.8 ? 1.2 : w <= TEX * 1.2 ? 0.6 : 1);
+  const L = [], R = [];
+  let sx, sy, ex, ey;
+  for (let i = 0; i < n; i++) {
+    const a = pts[i > 0 ? i - 1 : 0], b = pts[i < n - 1 ? i + 1 : n - 1];
+    const tl = Math.hypot(b[0] - a[0], b[1] - a[1]) || 1, tx = (b[0] - a[0]) / tl, ty = (b[1] - a[1]) / tl;
+    const s = len[i], off = (o.amp ?? 0.85) * PW * 0.3 * noise(s / 110 + sd * 3.71);
+    const x = pts[i][0] - ty * off, y = pts[i][1] + tx * off;
+    const p = lerp(w0, 1, easeOut(clamp(s / tin))) * lerp(w1, 1, easeOut(clamp((total - s) / tout)));
+    const hw = hw0 * p * (0.4 + 0.8 * Math.abs(ty * Math.cos(NIB) - tx * Math.sin(NIB)));
+    L.push([x - ty * hw, y + tx * hw]); R.push([x + ty * hw, y - tx * hw]);
+    if (i === 0) { sx = x - tx * hw; sy = y - ty * hw; }
+    if (i === n - 1) { ex = x + tx * hw; ey = y + ty * hw; }
+  }
+  c.moveTo(sx, sy);
+  for (const [x, y] of L) c.lineTo(x, y);
+  c.lineTo(ex, ey);
+  for (let i = n - 1; i >= 0; i--) c.lineTo(R[i][0], R[i][1]);
+  c.closePath();
+}
+
+/* The captions, one a section, said by someone in it */
+const CAPTIONS = {
+  hero: '“He’s very stable. He hasn’t moved in forty years.”',
+  edit: '“A little to the left. No, my left.”',
+  themes: '“He changes every evening. It’s always stripes.”',
+  widgets: '“It shows how full the disk is. I find it calming.”',
+  tiling: '“We each have our own workspace now. It’s done wonders for the marriage.”',
+  install: '“Come in. I’ve only just set it up, so don’t touch anything.”',
+};
+/* Where the caption goes: under the hill, on the white (on a phone, under the sky, left of the lighthouse, above
+   where the notes begin), in lines `lh` apart up from `foot`, at most three */
+function captionAt(g) {
+  const T = g.lh, size = Math.max(15, 21 * g.u), lh = size * 1.32;
+  const x0 = g.portrait ? 0 : Math.max(g.note.x1, g.ridge[0][0]), x1 = g.portrait ? T.x - T.wB * 0.55 : g.W;
+  const foot = g.portrait ? g.note.y0 - 10 : g.H - 26 * g.u;
+  return { size, lh, x0, x1, foot, top: foot - lh * (g.portrait ? 3 : 2) };
+}
+// the washes lifted off there, the paper coming back over a short way above it
+function lift(c, g, a) {
+  const z = captionAt(g), yA = z.top - 50 * g.u, yB = g.portrait ? z.foot + 40 : g.H, at = y => (y - yA) / (yB - yA);
+  const gr = c.createLinearGradient(0, yA, 0, yB);
+  gr.addColorStop(0, `rgba(${PAPER},0)`); gr.addColorStop(at(z.top), paper); gr.addColorStop(at(z.foot + 6), paper); gr.addColorStop(1, `rgba(${PAPER},${g.portrait ? 0 : 1})`);
+  c.globalAlpha = a; c.fillStyle = gr; c.fillRect(0, yA, g.W, yB - yA); c.globalAlpha = 1;
+}
+Hill.style('notch', {
+  // white paper by day and at night, the sky washed darker with the hour, the light left as paper
+  pal: Hill.stops([
+    [0,    { sky: '#FFFFFF', sky2: '#FFFFFF', sea: '#D2D2D2', sea2: '#111111', foam: '#FFFFFF', hill: '#E4E4E4', hill2: '#C2C2C2', ink: '#000000', paper: '#FFFFFF', beam: '#FFFFFF', cloud: '#FFFFFF', far: '#DDDDDD', glass: '#C8C8C8' }],
+    [0.2,  { sky: '#F2F2F2', sky2: '#FFFFFF', sea: '#CACACA', sea2: '#111111', foam: '#FFFFFF', hill: '#DDDDDD', hill2: '#BCBCBC', ink: '#000000', paper: '#FFFFFF', beam: '#FFFFFF', cloud: '#FFFFFF', far: '#D6D6D6', glass: '#C8C8C8' }],
+    [0.44, { sky: '#D4D4D4', sky2: '#EAEAEA', sea: '#B4B4B4', sea2: '#111111', foam: '#FFFFFF', hill: '#CDCDCD', hill2: '#ADADAD', ink: '#000000', paper: '#FFFFFF', beam: '#FFFFFF', cloud: '#F4F4F4', far: '#C4C4C4', glass: '#C0C0C0' }],
+    [0.7,  { sky: '#A4A4A4', sky2: '#C2C2C2', sea: '#929292', sea2: '#111111', foam: '#F4F4F4', hill: '#B2B2B2', hill2: '#999999', ink: '#000000', paper: '#FFFFFF', beam: '#FFFFFF', cloud: '#D8D8D8', far: '#A0A0A0', glass: '#FFFFFF' }],
+    [1,    { sky: '#7E7E7E', sky2: '#9C9C9C', sea: '#727272', sea2: '#111111', foam: '#E8E8E8', hill: '#A0A0A0', hill2: '#878787', ink: '#000000', paper: '#FFFFFF', beam: '#FFFFFF', cloud: '#C4C4C4', far: '#868686', glass: '#FFFFFF' }],
+  ]),
+  // every colour becomes a grey between the ink and the paper, as light as it was
+  tint: c => mix(INK, PAPER, lum(c)),
+  ribbon: brush, print: wash, boil: 0, reg: [2.2, 1.7],
+  // the section's caption, over everything; out at sea and under the page's title card there's none
+  after(s, c) {
+    const g = s.back, z = captionAt(g), out = (1 - smooth(0, 0.15, s.dive)) * s.labelsK();
+    if (out <= 0.01) return;
+    c.font = `italic 400 ${z.size}px ${CASLON}`; c.textAlign = 'center'; c.textBaseline = 'alphabetic'; c.fillStyle = ink;
+    for (const k of Hill.states) {
+      if (s.pres[k] < 0.01) continue;
+      // in as few lines as fit, about as long as each other
+      const text = CAPTIONS[k], all = c.measureText(text).width, n = Math.ceil(all / (z.x1 - z.x0 - 48 * g.u)), ls = [''];
+      for (const w of text.split(' ')) {
+        const line = ls.at(-1);
+        if (line && ls.length < n && c.measureText(line + ' ' + w).width > all / n * 1.1) ls.push(w);
+        else ls[ls.length - 1] = line ? line + ' ' + w : w;
+      }
+      c.globalAlpha = out * s.pres[k];
+      ls.forEach((l, i) => c.fillText(l, (z.x0 + z.x1) / 2, z.foot - (ls.length - 1 - i) * z.lh));
+    }
+    c.globalAlpha = 1;
+  },
+  draw: {
+    // the paper, the sky's wash and the sea's, streaked sideways
+    sky(base, s, c) {
+      const g = s.g, { W, H } = g;
+      wash(c, [[-20, -20], [W + 20, -20], [W + 20, g.horizon + 2], [-20, g.horizon + 2]], s.P.sky);
+      wash(c, [[-20, g.horizon], [W + 20, g.horizon], [W + 20, H + 20], [-20, H + 20]], s.P.sea, SEA);
+    },
+    // the lower sky, washed lighter, and the horizon in one stroke
+    band(base, s, c, bandTop) {
+      const g = s.g, { W, u } = g, by = bandTop + 20 * u, band = [];
+      for (let x = -30; x <= W + 30; x += 16 * u) band.push([x, by + Math.sin(x * 0.006 + 1) * 11 * u + Math.sin(x * 0.019 + 2) * 3 * u]);
+      band.push([W + 30, g.horizon + 4], [-30, g.horizon + 4]);
+      // (on the line, with no white between it and the sky's)
+      poly(c, band); c.fillStyle = paper; c.fill();
+      c.globalAlpha = Math.min(1, (1 - lum(s.P.sky2)) / 0.72); c.fillStyle = WASH; c.fill(); c.globalAlpha = 1;
+      c.beginPath(); brush(c, dens([[-10, g.horizon], [W + 10, g.horizon]], 8), Hill.DET, 2, { tin: 40, tout: 40, w0: 1, w1: 1 }); c.fillStyle = Hill.INK; c.fill();
+    },
+    // a few stars, left white
+    stars(base, s, c) {
+      const g = s.g, u = g.u, st = smooth(0.55, 0.9, s.d);
+      if (st <= 0) return;
+      c.beginPath();
+      for (const p of g.stars) {
+        if (p.s < 1.15) continue;
+        const r = p.s * 2.4 * u;
+        for (const a of [p.p, p.p + Math.PI / 2]) brush(c, [[p.x - Math.cos(a) * r, p.y - Math.sin(a) * r], [p.x + Math.cos(a) * r, p.y + Math.sin(a) * r]], 1.7, 0, { tin: 1, tout: 1, w0: 1, w1: 1 });
+      }
+      c.fillStyle = rgba(s.P.beam, st); c.fill();
+    },
+    // the sea: a few strokes of the pen across the water, longer and further apart as they come closer
+    waves(base, s, c) {
+      const g = s.g, { W, H, u } = g, hz = g.horizon, sea = H - hz, mid = W / 2, go = s.dive * Hill.DIVE_GAP / Hill.SHORE, ROW = 0.11, span = 150 * u;
+
+      c.beginPath();
+      for (let k = Math.ceil((1 + go) / ROW); ; k++) {
+        const rel = 1 / (k * ROW - go);
+        if (rel < 0.035) break;
+        const y = hz + sea * rel, keep = 0.75 * rel ** 1.5;
+        for (let j = Math.floor(-mid / rel / span) - 1; j * span * rel < mid; j++) {
+          if (hash(k * 31.7 + j * 7.3) > keep) continue;
+          const x = mid + (j + hash(j * 3.1 + k)) * span * rel, l = Math.max(4, (30 + 60 * hash(k + j * 1.7)) * u * rel);
+          brush(c, dens([[x, y], [x + l, y + 0.6 * u * rel]], 6), Hill.DET * Math.max(0.5, rel), k + j, { tin: 6, tout: 12, w0: 0.6, w1: 0.2 });
+        }
+      }
+      c.fillStyle = Hill.INK; c.fill();
+      // and none of it where the caption goes, while there is one
+      const out = 1 - smooth(0, 0.15, s.dive);
+      if (out > 0) lift(c, s.back, out);
+    },
+    // the page's hill, its washes lifted off under the caption
+    hill(base, s, c) {
+      base(s, c);
+      if (s.g.isle || s.g.portrait) return;
+      c.save(); poly(c, s.g.hillClip); c.clip(); lift(c, s.g, 1); c.restore();
+    },
+    // the light: two strokes, and between them paper the wash was kept off
+    beam(base, s, c) {
+      const g = s.g, pw = s.lampPower(), ga = c.globalAlpha, { L, len, a0, a1 } = Hill.beamPoly(s);
+      if (len < 10 || pw < 0.02) return;
+      const fan = [[L.x, L.y]];
+      for (let i = 0; i <= 12; i++) { const a = lerp(a0, a1, i / 12); fan.push([L.x + Math.cos(a) * len, L.y + Math.sin(a) * len]); }
+      poly(c, fan); c.fillStyle = paper; c.globalAlpha = ga * 0.95 * pw; c.fill();
+      const r0 = g.lh.er * 2.3;
+      c.beginPath();
+      for (const [a, sd] of [[a0, 13], [a1, 17]]) brush(c, dens([[L.x + Math.cos(a) * r0, L.y + Math.sin(a) * r0], [L.x + Math.cos(a) * len, L.y + Math.sin(a) * len]], 9), Hill.DET, sd, { tin: 20, tout: 60, w0: 0.4, w1: 0.4 });
+      c.globalAlpha = ga * (0.3 + 0.7 * pw); c.fillStyle = Hill.INK; c.fill(); c.globalAlpha = 1;
+    },
+    // where the light lands on the hill, the wash lifted off it
+    hillLight(base, s, c) {
+      const { L, len, a0, a1 } = Hill.beamPoly(s);
+      if (len < 10 || Math.sin(s.beam.a) < 0.08) return;
+      c.save(); poly(c, s.g.hillClip); c.clip();
+      c.beginPath(); c.moveTo(L.x, L.y);
+      for (let i = 0; i <= 12; i++) { const a = lerp(a0, a1, i / 12); c.lineTo(L.x + Math.cos(a) * len, L.y + Math.sin(a) * len); }
+      c.closePath(); c.globalAlpha *= (0.4 + 0.5 * smooth(0.3, 0.8, s.d)) * s.lampPower(); c.fillStyle = paper; c.fill();
+      c.restore();
+    },
+    // grass along the ridge near the lighthouse and past it; down the long slope a cartoonist leaves it out
+    tufts(base, s, c) {
+      const T = s.g.lh;
+      c.save(); c.beginPath(); c.rect(T.x - T.h * 0.6, 0, s.g.W, s.g.H); c.clip(); base(s, c); c.restore();
+    },
+    // the arrowed labels give way to the captions
+    labels() {},
+    // the sounds in small capitals, lettered by hand; the grazers chew without comment
+    doodles(base, s, c) {
+      const u = s.g.u;
+      for (const d of s.doodles) {
+        const a = s.t - d.t0, f = 1 - smooth(d.life - 0.3, d.life, a);
+        if (f <= 0 || d.kind === 'munch') continue;
+        c.globalAlpha = f;
+        if (d.kind === 'note') Hill.quaver(c, d.x + Math.sin(a * 4 + d.seed) * 5 * u, d.y - a * 36 * u, 3.6 * u + 1.4, Hill.INK, d.flip);
+        else Hill.label(c, (d.text || d.kind).toUpperCase(), d.x, d.y - (s.reduced ? 0 : a * 6 * u), Math.max(10, 11 * u + 2), Hill.INK, d.align, -0.04);
+      }
+      c.globalAlpha = 1;
+    },
+  },
+});
+})();
diff --git a/site/styles/clay.js b/site/styles/clay.js
new file mode 100644
index 00000000..16e07c49
--- /dev/null
+++ b/site/styles/clay.js
@@ -0,0 +1,432 @@
+/* Lighthouse Hill in clay stop-motion, for Catppuccin (see the styles in scene.js): a model set in plasticine, lit
+   from the upper left and shot on twos. Nothing is outlined: the fills are lumps of clay, lit and thumbed, and the
+   lines that are things of their own (legs, grass, the lid, smoke, the arrows) are rolled strands of it. */
+(() => {
+const H = Hill, { TAU, clamp, lerp, smooth, hash, noise, rng, hex, mix, mul, rgba, poly, ellipse, dens, curve, rank } = H;
+const WHITE = hex('#FFFFFF'), DARK = hex('#302D41');
+// the fleece's balls, back to front, in the sheep's units
+const FLEECE = [[-6, -23.5], [0, -24.5], [6, -23.5], [-11, -18], [-5.5, -18.5], [0.5, -19], [6, -18.5], [11, -17.5], [-8.5, -12], [-3, -11.5], [2.5, -11.5], [8, -12]];
+
+/* the clay's skin, faint, the same all over: smears where a thumb slid, a few whorls of its print pressed in, and
+   crumbs; drawn round the tile's edges too, so it repeats without a seam */
+const PRINTS = (() => {
+  const cv = document.createElement('canvas'), x = cv.getContext('2d'), R = rng(41), S = 200;
+  cv.width = cv.height = S;
+  const wrap = draw => { for (const dx of [-S, 0, S]) for (const dy of [-S, 0, S]) { x.save(); x.translate(dx, dy); draw(); x.restore(); } };
+  x.lineCap = 'round';
+  for (let i = 0; i < 70; i++) {
+    const cx = R() * S, cy = R() * S, a = R() * TAU, l = 3 + R() * 7, w = 3 + R() * 4, col = R() < 0.5 ? `rgba(48,45,65,${0.025 + R() * 0.03})` : `rgba(255,255,255,${0.05 + R() * 0.05})`;
+    wrap(() => { x.beginPath(); x.moveTo(cx, cy); x.quadraticCurveTo(cx + Math.cos(a) * l * 0.5 + Math.sin(a) * 2, cy + Math.sin(a) * l * 0.5 - Math.cos(a) * 2, cx + Math.cos(a) * l, cy + Math.sin(a) * l); x.lineWidth = w; x.strokeStyle = col; x.stroke(); });
+  }
+  for (let i = 0; i < 3; i++) {
+    const cx = R() * S, cy = R() * S, rot = R() * TAU, arcs = [];
+    for (let k = 2; k < 7; k++) { const a = R() * TAU; arcs.push([k * 1.5, a, a + 2 + R() * 2.5, 0.04 + R() * 0.04]); }
+    wrap(() => { for (const [r, a0, a1, al] of arcs) { x.beginPath(); x.ellipse(cx, cy, r, r * 0.75, rot, a0, a1); x.lineWidth = 0.7; x.strokeStyle = `rgba(48,45,65,${al})`; x.stroke(); } });
+  }
+  for (let i = 0; i < 260; i++) { x.fillStyle = R() < 0.5 ? 'rgba(48,45,65,0.1)' : 'rgba(255,255,255,0.14)'; x.beginPath(); x.arc(R() * S, R() * S, 0.3 + R() * 0.7, 0, TAU); x.fill(); }
+  return x.createPattern(cv, 'repeat');
+})();
+/* a soft shadow on the ground, under what stands there */
+const BLOB = document.createElement('canvas');
+BLOB.width = BLOB.height = 64;
+{
+  const x = BLOB.getContext('2d'), gr = x.createRadialGradient(32, 32, 0, 32, 32, 32);
+  gr.addColorStop(0, 'rgba(48,45,65,0.42)'); gr.addColorStop(0.55, 'rgba(48,45,65,0.2)'); gr.addColorStop(1, 'rgba(48,45,65,0)');
+  x.fillStyle = gr; x.fillRect(0, 0, 64, 64);
+}
+const shadow = (c, x, y, rx, ry) => c.drawImage(BLOB, x - rx, y - ry, rx * 2, ry * 2);
+
+/* clay lit from (x, y): a soft highlight there, its own colour, then darker toward the far side */
+function lit(c, x, y, r, col) {
+  const gr = c.createRadialGradient(x, y, 0, x, y, r);
+  gr.addColorStop(0, rgba(mix(col, WHITE, 0.45))); gr.addColorStop(0.15, rgba(mix(col, WHITE, 0.2)));
+  gr.addColorStop(0.5, rgba(col)); gr.addColorStop(1, rgba(mix(col, DARK, 0.42)));
+  return gr;
+}
+/* a lump of clay: the shape, nudged a little each frame as by a hand, lit across its size; its edge rounds over,
+   lighter where it turns to the light and darker where it turns away; and prints in it */
+function lump(c, pts, col) {
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (const [x, y] of pts) { x0 = Math.min(x0, x); y0 = Math.min(y0, y); x1 = Math.max(x1, x); y1 = Math.max(y1, y); }
+  const j = 0.35 * H.PW, b = H.BOIL * 2.3, e = Math.min(2.4 * H.PW, (x1 - x0) * 0.1, (y1 - y0) * 0.1), p = new Path2D();
+  pts.forEach(([x, y], i) => p.lineTo(x + noise(i * 0.31 + b) * j, y + noise(i * 0.31 + b + 7) * j));
+  p.closePath();
+  c.fillStyle = typeof col === 'string' ? col : lit(c, lerp(x0, x1, 0.3), lerp(y0, y1, 0.26), Math.hypot(x1 - x0, y1 - y0) * 0.72, col);
+  c.fill(p);
+  c.save(); c.clip(p);
+  c.lineWidth = e * 2; c.lineJoin = 'round';
+  c.translate(e, e); c.strokeStyle = 'rgba(255,255,255,0.28)'; c.stroke(p);
+  c.translate(-e * 2, -e * 2); c.strokeStyle = rgba(DARK, 0.2); c.stroke(p);
+  c.globalAlpha *= 0.8; c.fillStyle = PRINTS; c.fill(p);
+  c.restore();
+}
+/* a ball of clay */
+function ball(c, x, y, r, col) {
+  c.beginPath(); c.arc(x, y, r, 0, TAU); c.fillStyle = lit(c, x - r * 0.4, y - r * 0.45, r * 1.6, col); c.fill();
+}
+
+/* A rolled strand along a path, W wide: its shadow on what it lies on, the strand, a darker underside and a highlight
+   along its top */
+function rolled(c, p, W, col) {
+  c.save();
+  c.shadowColor = 'transparent'; c.lineCap = 'round'; c.lineJoin = 'round';
+  c.translate(W * 0.3, W * 0.45); c.lineWidth = W; c.strokeStyle = 'rgba(48,45,65,0.22)'; c.stroke(p);
+  c.translate(-W * 0.3, -W * 0.45); c.strokeStyle = col; c.stroke(p);
+  c.translate(W * 0.06, W * 0.2); c.lineWidth = W * 0.5; c.strokeStyle = 'rgba(48,45,65,0.22)'; c.stroke(p);
+  c.translate(-W * 0.18, -W * 0.44); c.lineWidth = W * 0.3; c.strokeStyle = 'rgba(255,255,255,0.45)'; c.stroke(p);
+  c.restore();
+}
+/* The line, rolled in clay as it comes, in STRAND or the ink ('fill' takes the colour the caller has on), so the
+   caller's fill finds nothing. Outlines aren't drawn. */
+let STRAND = null;
+function strand(c, pts, w, sd = 0, o = {}) {
+  if (o.outline) return;
+  const p = new Path2D(), j = 0.3 * H.PW, b = H.BOIL * 3.7 + sd;
+  pts.forEach(([x, y], i) => p.lineTo(x + noise(i * 0.4 + b) * j, y + noise(i * 0.4 + b + 9) * j));
+  rolled(c, p, w * H.PW, STRAND === 'fill' ? c.fillStyle : STRAND || H.INK);
+}
+
+/* The sea is a sheet of clay smoothed with a tool: its marks run across in rows, closer together toward the horizon,
+   each a ridge lit along its top over a groove. The rows are the felt pen's scallops' (see waveScallops), so diving
+   you go over them as fast. */
+function ridges(s, c, top, groove) {
+  const g = s.g, { W, u } = g, hz = g.horizon, sea = g.H - hz, ROW = 0.02, go = s.dive * H.DIVE_GAP / H.SHORE, alpha = c.globalAlpha;
+  for (let k = Math.ceil((1 + go) / ROW); ;) {
+    const rel = 1 / (k * ROW - go);
+    if (rel < 0.0175) break;
+    const f = rel ** (1 / 1.6), gap = 3.2 * sea * rel ** 0.375 / g.rows, dy = sea * ROW * rel * rel;
+    const step = 2 ** Math.max(0, Math.ceil(Math.log2(gap / dy)));
+    if (k % step) { k += step - k % step; continue; }
+    const a = rank(k) > Math.log2(step) ? 1 : clamp(dy * step / gap - 1);
+    k += step;
+    if (a <= 0) continue;
+    const q = k - step, row = { y: hz + sea * rel, f, seed: q * 97 + s.o.seed }, lw = (1.4 + 4.2 * f) * g.pw, hi = new Path2D(), lo = new Path2D();
+    for (let i = 0; i < 5 + Math.round(4 * (1 - f)); i++) {
+      const x0 = (hash(q * 0.13 + i * 0.71) * 1.3 - 0.15) * W, l = (24 + 150 * f) * Math.max(u, 0.66) * (0.5 + hash(q * 0.29 + i * 1.3));
+      for (let m = 0; m <= 6; m++) {
+        const x = x0 + l * m / 6, y = s.waveY(x, row) - Math.sin(m / 6 * Math.PI) * l * 0.04, to = m ? 'lineTo' : 'moveTo';
+        hi[to](x, y - lw * 0.35); lo[to](x, y + lw * 0.5);
+      }
+    }
+    c.globalAlpha = alpha * a;
+    c.lineWidth = lw * 1.2; c.strokeStyle = groove; c.stroke(lo);
+    c.lineWidth = lw * 0.75; c.strokeStyle = top; c.stroke(hi);
+  }
+  c.globalAlpha = alpha;
+}
+
+Hill.style('catppuccin', {
+  // Latte by day, Mocha at night: pastel clay under a soft sky
+  pal: H.stops([
+    [0,    { sky: '#A6D8F2', sky2: '#DDE6FA', sea: '#6F9BEF', sea2: '#B0CAFB', foam: '#EFF1F5', hill: '#98D894', hill2: '#76BD7C', ink: '#4C4F69', paper: '#FFFBF8', beam: '#FFDD6E', cloud: '#F4F1F4', far: '#B4BEFE', glass: '#DCE7FA' }],
+    [0.2,  { sky: '#B9C2F5', sky2: '#F2D5E3', sea: '#6A8FE6', sea2: '#AEC0F8', foam: '#F5F0F2', hill: '#90D18E', hill2: '#70B878', ink: '#4C4F69', paper: '#FFF7F2', beam: '#FFDD6E', cloud: '#F8EEF0', far: '#C6B9F2', glass: '#F2D5E3' }],
+    [0.44, { sky: '#F5AE8A', sky2: '#F5C2E7', sea: '#6B7DE0', sea2: '#B4BEFE', foam: '#F5E0DC', hill: '#84BF88', hill2: '#66A276', ink: '#4A4563', paper: '#FBEDE6', beam: '#FFDD6E', cloud: '#F2CDCD', far: '#D59BC4', glass: '#FAB387' }],
+    [0.7,  { sky: '#7F6BC0', sky2: '#C38BB8', sea: '#3E4A9A', sea2: '#7F8BDA', foam: '#D6CCF2', hill: '#4E8463', hill2: '#3E6E55', ink: '#2F2E45', paper: '#E3DCF5', beam: '#F9E2AF', cloud: '#B4A6E6', far: '#5E5594', glass: '#F9D98A' }],
+    [1,    { sky: '#272A45', sky2: '#363A5E', sea: '#1F2442', sea2: '#4A5585', foam: '#A6ADC8', hill: '#36594A', hill2: '#2A4839', ink: '#1E1E2E', paper: '#C9CFEA', beam: '#F9E2AF', cloud: '#5B6080', far: '#313457', glass: '#F9E2AF' }],
+  ]),
+  C: {
+    wool: hex('#F5F0EE'), yolk: hex('#F7BE5A'), duck: hex('#F7D774'), beak: hex('#FAB387'), pink: hex('#F5C2E7'),
+    monster: hex('#EBA0AC'), chimney: hex('#F38BA8'), roof: hex('#6C6F93'), door: hex('#89B4FA'), skin: hex('#F5D5C0'),
+    navy: hex('#5B6BC0'), wood: hex('#D9A27A'), steel: hex('#CCD0DA'), moon: hex('#F9E2AF'), tile: hex('#45475A'),
+    huts: ['#F38BA8', '#89B4FA', '#F9E2AF', '#A6E3A1'].map(hex),
+    kraft: hex('#E3B98C'), kraftLit: hex('#F0CDA5'), kraftDark: hex('#C69768'), tape: hex('#F9E2AF'), sprout: hex('#7ACB7E'),
+  },
+  ribbon: strand, print: lump, reg: [0, 0], pen: 1.5, boil: 12, fps: 12,
+  hand: 'ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", sans-serif', weight: 700,
+
+  draw: {
+    // the backdrop, painted soft, and the sea's clay sheet, darker near
+    sky(base, s, c) {
+      const g = s.g, P = s.P, sky = c.createLinearGradient(0, g.top, 0, g.horizon), sea = c.createLinearGradient(0, g.horizon, 0, g.H);
+      sky.addColorStop(0, rgba(mix(P.sky, DARK, 0.06))); sky.addColorStop(1, rgba(mix(P.sky, P.sky2, 0.45)));
+      sea.addColorStop(0, rgba(mix(P.sea, P.sea2, 0.3))); sea.addColorStop(1, rgba(mix(P.sea, DARK, 0.18)));
+      c.fillStyle = sky; c.fillRect(0, 0, g.W, g.horizon + 2);
+      c.fillStyle = sea; c.fillRect(0, g.horizon, g.W, g.H - g.horizon);
+    },
+    // the lower sky, a lighter strip of the painted backdrop, and the sea's far edge rolled over
+    band(base, s, c, bandTop) {
+      const g = s.g, { W, u } = g, P = s.P, by = bandTop + 20 * u, band = [];
+      for (let x = -30; x <= W + 30; x += 16 * u) band.push([x, by + Math.sin(x * 0.006 + 1) * 11 * u + Math.sin(x * 0.019 + 2) * 3 * u]);
+      band.push([W + 30, g.horizon + 4], [-30, g.horizon + 4]);
+      poly(c, band); c.fillStyle = rgba(P.sky2); c.fill();
+      STRAND = rgba(mix(P.sea, P.sea2, 0.7)); strand(c, dens([[-10, g.horizon + 1], [W + 10, g.horizon + 1]], 30), H.DET * 1.2); STRAND = null;
+    },
+    // little stars cut from yellow clay, and crumbs of it between them
+    stars(base, s, c) {
+      const g = s.g, u = g.u, st = smooth(0.55, 0.9, s.d);
+      if (st <= 0) return;
+      c.beginPath();
+      for (const p of g.stars) {
+        if (p.s < 0.75) { c.moveTo(p.x + u, p.y); c.arc(p.x, p.y, 0.9 * u + 0.4, 0, TAU); continue; }
+        const r = p.s * 3.4 * u * (s.reduced ? 1 : 0.85 + 0.15 * Math.sin(s.t * 2 + p.p));
+        for (let i = 0; i < 10; i++) { const a = p.p + i / 10 * TAU, q = i % 2 ? r * 0.48 : r; c[i ? 'lineTo' : 'moveTo'](p.x + Math.cos(a) * q, p.y + Math.sin(a) * q); }
+        c.closePath();
+      }
+      c.fillStyle = rgba(s.P.beam, st); c.fill();
+      c.beginPath();
+      for (const p of g.stars) if (p.s >= 0.75) { const r = p.s * 0.9 * u; c.moveTo(p.x - r * 0.5 + r, p.y - r * 0.6); c.arc(p.x - r * 0.5, p.y - r * 0.6, r, 0, TAU); }
+      c.fillStyle = `rgba(255,255,255,${0.55 * st})`; c.fill();
+    },
+    waves(base, s, c) { ridges(s, c, rgba(mix(s.P.sea, s.P.sea2, 0.75)), rgba(mix(s.P.sea, DARK, 0.3))); },
+    // where things land: a flattened ring of foam spreading
+    ripples(base, s, c) {
+      const u = s.g.u, P = s.P;
+      for (const r of s.ripples) {
+        if (!H.afloat(s, c, r.y)) continue;
+        const age = s.t - r.t0, rx = 8 * u + age * 70 * u, p = new Path2D();
+        p.ellipse(r.x, r.y, rx, rx * 0.3, 0, 0, TAU);
+        c.globalAlpha = clamp(1 - age / 2.2) * r.a; rolled(c, p, H.DET * 0.9 * H.PW, rgba(P.foam)); c.globalAlpha = 1;
+      }
+    },
+    // a fried egg in clay: a flattened white, a domed yolk with its shadow on it, and a shine
+    sun(base, s, c) {
+      const g = s.g, u = g.u, sun = s.sunPos();
+      if (sun.a <= 0) return;
+      const r = 38 * u, sz = r * 3;
+      c.save(); c.beginPath(); c.rect(0, 0, g.W, g.horizon); c.clip();
+      c.globalAlpha = sun.a;
+      s.sprite('sun', sz, sz, sun.x, sun.y, x => {
+        const white = [];
+        for (let i = 0; i < 48; i++) { const a = i / 48 * TAU; white.push([Math.cos(a) * r * (1 + 0.12 * Math.sin(a * 3 + 1) + 0.06 * Math.sin(a * 5 + 2)), Math.sin(a) * r * 0.86 * (1 + 0.09 * Math.sin(a * 4))]); }
+        lump(x, white, mul(WHITE, s.P.paper));
+        shadow(x, 6 * u, 2 * u, r * 0.55, r * 0.5);
+        ball(x, 3 * u, -3 * u, r * 0.42, H.C.yolk);
+        x.beginPath(); x.ellipse(3 * u - r * 0.15, -3 * u - r * 0.2, r * 0.13, r * 0.08, -0.6, 0, TAU); x.fillStyle = 'rgba(255,255,255,0.75)'; x.fill();
+      });
+      c.restore();
+    },
+    // a cloud is lumps of clay pressed together on a flat base, each rounded in the light; the one with legs walks
+    cloud(base, s, c, cl, name, legs) {
+      const g = s.g, u = g.u, P = s.P, p = s.cloudXY(cl), w = cl.w;
+      if (p.x < -w || p.x > g.W + w) return;
+      if (legs) {
+        const walk = s.reduced ? 0 : s.t * 5, lp = new Path2D();
+        [-0.24, -0.11, 0.1, 0.23].forEach((lx, i) => {
+          const x = p.x + lx * w * (cl.dir < 0 ? -1 : 1), sw = Math.sin(walk + i * 1.7 + (i % 2) * Math.PI) * 2.6 * u;
+          lp.moveTo(x, p.y - 4 * u); lp.lineTo(x + sw * 0.5, p.y + 5 * u); lp.lineTo(x + sw, p.y + 12 * u);
+        });
+        rolled(c, lp, H.DET * 1.6 * H.PW, H.INK);
+      }
+      s.sprite(name + (legs && cl.dir < 0 ? 'L' : ''), w * 1.3, w * 0.75, p.x, p.y - w * 0.12, x => {
+        const R = rng(cl.seed), n = 4 + ((R() * 2) | 0), lumps = [];
+        for (let i = 0; i < n; i++) {
+          const fx = (i + 0.5) / n, r = w * (0.12 + R() * 0.07) * (1.3 - Math.abs(fx - 0.5));
+          lumps.push([-w / 2 + fx * w + (R() - 0.5) * w * 0.06, w * 0.1 - r * 0.62, r]);
+        }
+        x.beginPath();
+        for (const [cx, cy, r] of lumps) { x.moveTo(cx + r, cy); x.arc(cx, cy, r, 0, TAU); }
+        x.moveTo(w * 0.53, w * 0.08); x.ellipse(0, w * 0.08, w * 0.53, w * 0.06, 0, 0, TAU);
+        x.fillStyle = lit(x, -w * 0.2, -w * 0.18, w * 0.75, P.cloud); x.fill();
+        x.save(); x.globalAlpha = 0.55; x.fillStyle = PRINTS; x.fill(); x.restore();
+        for (const [cx, cy, r] of lumps) { x.beginPath(); x.arc(cx - r * 0.3, cy - r * 0.35, r * 0.55, 0, TAU); x.fillStyle = 'rgba(255,255,255,0.16)'; x.fill(); }
+        // a tail: it might be a sheep
+        if (legs) ball(x, (cl.dir < 0 ? 1 : -1) * w * 0.53, 0, w * 0.05, P.cloud);
+      });
+    },
+    // the light: a cone of yellow cellophane, crinkled into facets that catch it one way or the other, the sea's
+    // ridges lit through it
+    beam(base, s, c) {
+      const P = s.P, I = s.beamI(), pw = s.lampPower(), { L, len, a0, a1 } = H.beamPoly(s);
+      if (len < 10 || pw < 0.02) return;
+      const night = smooth(0.3, 0.8, s.d), col = mix(P.beam, hex('#FFF6C2'), night * 0.45), n = 7, b = H.BOIL * 0.9;
+      const at = (a, r) => [L.x + Math.cos(a) * r, L.y + Math.sin(a) * r];
+      const crease = i => { const a = lerp(a0, a1, i / n), k = i % n ? 0.35 / n : 0; return [[L.x, L.y], at(a + noise(i * 1.7 + b) * k * (a1 - a0), len * 0.5), at(a + noise(i * 2.3 + b + 4) * k * (a1 - a0), len)]; };
+      const fan = [[L.x, L.y]];
+      for (let i = 0; i <= 12; i++) fan.push(at(lerp(a0, a1, i / 12), len));
+      for (let i = 0; i < n; i++) {
+        poly(c, [...crease(i), ...crease(i + 1).reverse()]);
+        c.fillStyle = rgba(i % 2 ? mix(col, WHITE, 0.3) : col, (0.78 + 0.14 * night * I + (i % 2 ? 0.08 : 0) - hash(i) * 0.1) * pw); c.fill();
+      }
+      c.save(); poly(c, fan); c.clip(); c.setTransform(s.dpr, 0, 0, s.dpr, 0, 0);
+      ridges(s, c, rgba(mix(col, WHITE, 0.6), 0.9 * pw), rgba(mix(col, P.sea, 0.45), 0.5 * pw));
+      c.restore();
+      // the creases catch the light
+      const p = new Path2D();
+      for (let i = 1; i < n; i++) if (hash(i * 3.1) > 0.35) { const e = crease(i); p.moveTo(...at(lerp(a0, a1, i / n), s.g.lh.er * 2.4)); p.lineTo(...e[1]); p.lineTo(...e[2]); }
+      c.lineWidth = 1.4 * H.PW; c.strokeStyle = `rgba(255,255,255,${0.5 * pw})`; c.stroke(p);
+    },
+    // the lit lantern at night: a glow round it, and a disc of light round the eye
+    halo(base, s, c) {
+      const L = s.g.lamp, er = s.g.lh.er, P = s.P, night = smooth(0.35, 0.85, s.d), f = s.beam.flash, k = Math.max(night * s.beamI(), f * 0.9) * s.lampOn() * s.lampPower();
+      if (k < 0.02) return;
+      const r = er * (4.6 + f * 1.4), gr = c.createRadialGradient(L.x, L.y, er, L.x, L.y, r);
+      gr.addColorStop(0, rgba(P.beam, clamp(k * 0.55))); gr.addColorStop(1, rgba(P.beam, 0));
+      c.beginPath(); c.arc(L.x, L.y, r, 0, TAU); c.fillStyle = gr; c.fill();
+      c.globalAlpha = clamp(k * 1.4);
+      lump(c, ellipse(L.x, L.y, er * 1.75, er * 1.6, 30), mix(P.beam, WHITE, 0.25));
+      c.globalAlpha = 1;
+    },
+    // the hill: a big lump of green clay smoothed by thumbs, the shade on its flank toward the sea, a lip of light along
+    // its top, a rolled strand of foam where it meets the water, and daisies of little balls
+    hill(base, s, c) {
+      const g = s.g, { W, u } = g, P = s.P, T = g.lh, rd = g.ridge, R = rng(5);
+      if (g.isle) {
+        const sl = g.shore, x0 = sl[0][0], x1 = sl.at(-1)[0], deep = x => Math.sin(Math.PI * (x - x0) / (x1 - x0)) * 18 * u;
+        lump(c, [...sl, ...sl.slice().reverse().map(([x, y]) => [x, y + deep(x)])], mix(P.sea, P.hill2, 0.45));
+      }
+      lump(c, g.hillPoly, P.hill);
+      if (g.shore) {
+        const sl = g.shore, x0 = sl[0][0];
+        lump(c, [...sl, ...sl.slice().reverse().map(([x, y]) => [x + 4 * u, y - (8 + (x - x0) / W * 26) * u])], P.hill2);
+      } else {
+        const fl = c.createLinearGradient(rd[0][0], g.H, T.x - T.wB * 2, s.ridgeY(T.x - T.wB * 2));
+        fl.addColorStop(0, rgba(P.hill2, 0.95)); fl.addColorStop(0.45, rgba(P.hill2, 0.45)); fl.addColorStop(1, rgba(P.hill2, 0));
+        poly(c, g.hillPoly); c.fillStyle = fl; c.fill();
+      }
+      // thumb marks: a smoothed ridge of clay over a groove
+      const hi = new Path2D(), lo = new Path2D();
+      for (let i = 0; i < (g.portrait ? 9 : 16); i++) {
+        const x = lerp(rd[0][0] + 40 * u, W - 30 * u, R()), ry = s.ridgeY(x), l = (18 + R() * 26) * u;
+        if (ry == null) { R(); continue; }
+        const y = ry + (16 + R() * (g.portrait ? 40 : 160)) * u;
+        if (g.shore && y > s.shoreY(x) - 12 * u) continue;
+        hi.moveTo(x, y); hi.quadraticCurveTo(x + l / 2, y - l * 0.16, x + l, y + l * 0.08);
+        lo.moveTo(x, y + 2 * u); lo.quadraticCurveTo(x + l / 2, y - l * 0.16 + 2 * u, x + l, y + l * 0.08 + 2 * u);
+      }
+      c.save(); poly(c, g.hillPoly); c.clip();
+      const top = Math.min(...rd.map(p => p[1])), sh = c.createLinearGradient(0, top, 0, g.shore ? s.shoreY(T.x) : g.H);
+      sh.addColorStop(0, 'rgba(255,255,255,0.2)'); sh.addColorStop(0.3, 'rgba(255,255,255,0)'); sh.addColorStop(1, rgba(DARK, 0.22));
+      c.fillStyle = sh; c.fill();
+      c.lineCap = 'round'; c.lineWidth = 2.6 * u;
+      c.strokeStyle = rgba(mix(P.hill2, DARK, 0.2), 0.3); c.stroke(lo);
+      c.strokeStyle = 'rgba(255,255,255,0.22)'; c.stroke(hi);
+      const lip = new Path2D();
+      rd.filter(p => p[0] > -20 && p[0] < W + 20).forEach(([x, y], i) => lip[i ? 'lineTo' : 'moveTo'](x, y + 2.4 * u));
+      c.lineWidth = 3.4 * u; c.strokeStyle = 'rgba(255,255,255,0.3)'; c.stroke(lip);
+      c.restore();
+      const foam = g.shore ? g.shore.map(([x, y]) => [x, y + 2 * u]) : rd.filter(p => p[1] > g.horizon + 3 && p[0] < T.x).map(([x, y]) => [x - 2 * u, y]);
+      STRAND = rgba(P.foam); strand(c, foam.filter(p => p[0] < W + 20), H.DET * 1.5, 23); STRAND = null;
+      const D = rng(9);
+      for (let i = 0; i < (g.portrait ? 6 : 11); i++) {
+        const x = lerp(T.x - T.h * 0.42, Math.min(W - 10, g.cot.x + g.cot.w * 1.6), D()), ry = s.ridgeY(x);
+        if (ry == null || Math.abs(x - T.x) < T.wB * 0.8 || Math.abs(x - g.cot.x) < g.cot.w * 0.6) { D(); continue; }
+        const y = ry + (8 + D() * (g.portrait ? 20 : 46)) * u, r = 2.3 * u;
+        for (let k = 0; k < 5; k++) { const a = k / 5 * TAU; ball(c, x + Math.cos(a) * r, y + Math.sin(a) * r, 1.6 * u, mul(WHITE, P.paper)); }
+        ball(c, x, y, 1.5 * u, H.C.yolk);
+      }
+    },
+    // the cottage stands on the hill; its roof is clay like the rest, not inked
+    cottage(base, s, c) {
+      const g = s.g, u = g.u, k = g.cot, x0 = k.x - k.w / 2, y0 = k.base - k.h;
+      shadow(c, k.x + k.w * 0.1, k.base + 1 * u, k.w * 0.75, 5 * u);
+      base(s, c);
+      lump(c, [[x0 - k.w * 0.12, y0 + 1 * u], [x0 + k.w * 0.5, y0 - k.h * 0.78], [x0 + k.w * 1.12, y0 + 1 * u]], H.C.roof);
+    },
+    // the tower: a round column of white clay with bands of the theme's pressed round it, lit down its left side,
+    // in shade down its right; dark clay for the door, the windows and the gallery
+    tower(base, s, c) {
+      const g = s.g, u = g.u, P = s.P, T = g.lh, th = H.THEMES[g.theme || s.theme];
+      const half = k => lerp(T.wB, T.wT, k) / 2, yAt = k => T.base - T.h * k, Lp = [], Rp = [];
+      for (let i = 0; i <= 20; i++) { const k = i / 20; Lp.push([T.x - half(k), yAt(k)]); Rp.push([T.x + half(k), yAt(k)]); }
+      const body = [...Lp, ...Rp.reverse()], box = [T.x - T.wB / 2, T.top - 2, T.wB, T.h + 4];
+      shadow(c, T.x + T.wB * 0.3, T.base + 1 * u, T.wB * 1.05, 5.5 * u);
+      c.save(); poly(c, body); c.clip();
+      c.fillStyle = rgba(mul(WHITE, P.paper)); c.fillRect(...box);
+      const bands = 6, sag = T.wB * 0.09, seams = new Path2D();
+      const edge = k => { const hw = half(k), out = []; for (let i = 0; i <= 12; i++) { const f = i / 12 * 2 - 1; out.push([T.x + f * hw, yAt(k) - sag * (1 - f * f)]); } return out; };
+      for (let j = 1, n = 0; j < bands; j += 2) {
+        const lo = edge(j / bands), hi = j + 1 >= bands ? [[T.x + half(1), yAt(1) - 2], [T.x - half(1), yAt(1) - 2]] : edge((j + 1) / bands).reverse();
+        poly(c, [...lo, ...hi]); c.fillStyle = rgba(mul(hex(th.stripes[n++ % th.stripes.length]), P.paper)); c.fill();
+      }
+      for (let j = 1; j < bands; j++) edge(j / bands).forEach(([x, y], i) => seams[i ? 'lineTo' : 'moveTo'](x, y + 0.8 * u));
+      c.lineWidth = 1.4 * u; c.strokeStyle = rgba(DARK, 0.14); c.stroke(seams);
+      const sh = c.createLinearGradient(T.x - T.wB / 2, 0, T.x + T.wB / 2, 0);
+      sh.addColorStop(0, 'rgba(255,255,255,0.32)'); sh.addColorStop(0.3, 'rgba(255,255,255,0)'); sh.addColorStop(0.58, rgba(DARK, 0)); sh.addColorStop(1, rgba(DARK, 0.4));
+      c.fillStyle = sh; c.fillRect(...box);
+      c.globalAlpha = 0.55; c.fillStyle = PRINTS; c.fillRect(...box);
+      c.restore();
+      const win = k => { const y = yAt(k), w = T.wB * 0.22, h = T.er * 0.75; return [[T.x - w / 2, y - h / 2], [T.x + w / 2, y - h / 2], [T.x + w / 2, y + h / 2], [T.x - w / 2, y + h / 2]]; };
+      for (const k of [0.25, 0.58]) lump(c, win(k), smooth(0.45, 0.75, s.d) > 0.5 ? P.beam : H.C.roof);
+      const dw = T.wB * 0.32, dh = T.wB * 0.5;
+      lump(c, [[T.x - dw / 2, T.base], ...ellipse(T.x, T.base - dh + dw / 2, dw / 2, dw / 2, 10, Math.PI, TAU), [T.x + dw / 2, T.base]], H.C.roof);
+      const gw = T.wT * 0.95;
+      lump(c, [[T.x - gw, T.top + 1 * u], [T.x - gw * 1.05, T.top - T.gal * 0.42], [T.x + gw * 1.05, T.top - T.gal * 0.42], [T.x + gw, T.top + 1 * u]], P.ink);
+    },
+    // grass along the ridge, in rolled strands of darker green
+    tufts(base, s, c) {
+      const g = s.g, u = g.u, p = new Path2D();
+      for (const b of g.tufts) {
+        let a = s.reduced ? 0.12 : Math.sin(s.t * 1.6 + b.p) * 0.14 * (0.6 + s.windAmb) + s.windTotal * 0.36;
+        if (s.ptr.on && !s.reduced) {
+          const dx = b.x - s.ptr.x, dy = b.y - s.ptr.y, r = 95 * u, d2 = dx * dx + dy * dy;
+          if (d2 < r * r) a += Math.sign(dx || 1) * 1.05 * (1 - Math.sqrt(d2) / r);
+        }
+        a = clamp(a, -1.3, 1.3);
+        for (let k = 0; k < b.n + 1; k++) {
+          const da = (k - b.n / 2) * 0.42, l = b.l * (k === 1 ? 1.15 : 0.85), x = b.x + (k - b.n / 2) * 1.6 * u, y = b.y + 1.5 * u;
+          const tx = x + Math.sin(a + da) * l, ty = y - Math.cos(a + da) * l;
+          p.moveTo(x, y); p.quadraticCurveTo(lerp(x, tx, 0.5), lerp(y, ty, 0.55), tx, ty);
+        }
+      }
+      rolled(c, p, H.TEX * 1.4 * H.PW, rgba(mix(s.P.hill2, DARK, 0.25)));
+    },
+    meadow(base, s, c, m) {
+      STRAND = rgba(mix(s.P.hill2, H.C.sprout, 0.85 * (1 - smooth(0.4, 0.9, s.d)))); base(s, c, m); STRAND = null;
+    },
+    smoke(base, s, c) { STRAND = rgba(mix(s.P.cloud, s.P.ink, 0.2), 0.9); base(s, c); STRAND = null; },
+    splashes(base, s, c) { STRAND = rgba(s.P.foam); base(s, c); STRAND = null; },
+    // what stands on the hill stands in its own shadow
+    obj(base, s, c, o) {
+      if (o.state === 'land' && (o.kind === 'sheep' || o.kind === 'cow')) { const k = s.g.u * o.sc; shadow(c, o.x + 2 * k, o.y, 19 * k, 3.6 * k); }
+      base(s, c, o);
+    },
+    keeper(base, s, c, x, y, sc, ...rest) { shadow(c, x + 1.5 * s.g.u * sc, y, 9 * s.g.u * sc, 2.4 * s.g.u * sc); base(s, c, x, y, sc, ...rest); },
+    // a sheep: a fleece of small clay balls on four strands of legs, a dark clay face
+    sheep(base, c, u, wool, o, t) {
+      const fall = o.state === 'fall' || o.state === 'leap', step = Math.hypot(o.vx, o.vd || 0) > 2 ? Math.sin(t * 14 + o.seed) * 2 * u : 0, legs = new Path2D();
+      [-8, -3, 5, 10].forEach((lx, i) => { legs.moveTo(lx * u, -10 * u); legs.lineTo(lx * u + (fall ? 3 * u : (i % 2 ? step : -step)), 0); });
+      rolled(c, legs, H.DET * 1.25 * H.PW, H.INK);
+      lump(c, ellipse(0, -16 * u, 13.5 * u, 9 * u, 20), mix(wool, DARK, 0.18));
+      const ja = H.joyAt(o, t);
+      c.save(); c.translate(-14 * u, -19 * u); c.rotate(-0.45 + (ja >= 0 ? Math.sin(ja * 24) * 0.6 * (1 - ja / 1.3) : 0));
+      ball(c, -2.4 * u, 0, 3 * u, wool);
+      c.restore();
+      for (const [x, y] of FLEECE) ball(c, (x + noise(x + o.seed + H.BOIL) * 0.5) * u, (y + noise(y + o.seed + H.BOIL) * 0.5) * u, 4.3 * u, wool);
+      H.head(c, u, o, t, 15, -19, [19, -7.5], 1.05, chew => {
+        const face = mul(hex('#585B70'), wool);
+        lump(c, ellipse(15 * u, -19 * u, 5 * u, 6.4 * u, 18, 0, TAU, -0.35), face);
+        lump(c, ellipse(11.5 * u, -23.5 * u, 3.6 * u, 1.6 * u, 10, 0, TAU, 0.5 + chew * 0.25), face);
+        for (const [x, y] of [[11.8, -24.6], [14.6, -25.8], [17.2, -24.6]]) ball(c, x * u, y * u, 2.3 * u, wool);
+        STRAND = '#FFFFFF';
+        if (ja >= 0) strand(c, ellipse(16.6 * u, -19.6 * u, 1.7 * u, 1.3 * u, 8, Math.PI * 1.1, Math.PI * 1.9), H.TEX, 4);
+        else if (H.NAP) H.napEye(c, 16.6 * u, -20.5 * u, 1.5 * u, '#FFFFFF');
+        else { H.dot(c, 16.6 * u, -20.5 * u, 1.6 * u, '#FFFFFF'); H.dot(c, 17.1 * u, -20.3 * u, 0.8 * u, H.INK); }
+        STRAND = null;
+      });
+    },
+    // the sea monster: humps and a neck of clay, foam rolled round where they go into the water
+    monster(base, c, u, pink, P, o, t) {
+      const sw = Math.sin(t * 1.6 + o.seed);
+      STRAND = rgba(P.foam);
+      for (let i = 0; i < 3; i++) {
+        const hx = (-30 + i * 19) * u, hh = (8 + 2.5 * Math.sin(t * 2 + i * 1.3)) * u * (0.85 + 0.15 * sw);
+        lump(c, [...ellipse(hx, 1 * u, 8.5 * u, hh, 14, Math.PI, TAU), [hx + 8.5 * u, 1 * u]], pink);
+        strand(c, [[hx - 11 * u, 1.5 * u], [hx, 0], [hx + 11 * u, 1.5 * u]], H.TEX, i + 4);
+      }
+      lump(c, curve([[20 * u, 1 * u], [22 * u, -10 * u], [27 * u, -20 * u], [34 * u, -25 * u], [42 * u, -26 * u], [48 * u, -21 * u], [46 * u, -16 * u], [38 * u, -16 * u], [33 * u, -11 * u], [31 * u, 1 * u]], 2), pink);
+      strand(c, [[16 * u, 1.5 * u], [26 * u, 0], [36 * u, 1.5 * u]], H.TEX, 8);
+      STRAND = null;
+      ball(c, 41 * u, -21.5 * u, 2.8 * u, mul(WHITE, P.paper));
+      H.dot(c, 41.8 * u, -21.3 * u, 1.1 * u, H.INK);
+      strand(c, [[45 * u, -18 * u], [47 * u, -17.6 * u]], H.TEX, 10);
+      // its little top hat, with a red band
+      lump(c, [[36 * u, -25.5 * u], [37 * u, -35 * u], [45 * u, -35.5 * u], [45.5 * u, -26 * u]], P.ink);
+      c.fillStyle = rgba(mul(H.C.chimney, P.paper)); c.fillRect(36.6 * u, -29.5 * u, 8.6 * u, 2 * u);
+      strand(c, [[33 * u, -25.8 * u], [49 * u, -26.4 * u]], H.DET * 1.2, 2);
+    },
+    // the labels and the doodles: letters cut from clay, standing a little off the backdrop
+    labels(base, s, c) {
+      STRAND = 'fill';
+      c.save(); c.shadowColor = rgba(DARK, 0.3); c.shadowOffsetX = c.shadowOffsetY = 1.4 * s.g.pw;
+      base(s, c);
+      c.restore(); STRAND = null;
+    },
+    doodles(base, s, c) {
+      STRAND = rgba(mix(s.P.ink, s.P.paper, smooth(0.5, 0.7, s.d)));
+      c.save(); c.shadowColor = rgba(DARK, 0.3); c.shadowOffsetX = c.shadowOffsetY = 1.2 * s.g.pw;
+      base(s, c);
+      c.restore(); STRAND = null;
+    },
+  },
+});
+})();
diff --git a/site/styles/papercut.js b/site/styles/papercut.js
new file mode 100644
index 00000000..c597363c
--- /dev/null
+++ b/site/styles/papercut.js
@@ -0,0 +1,403 @@
+/* Lighthouse Hill in paper cut, for Nord (see the styles in scene.js): a diorama of cut paper photographed straight
+   on. No lines: every shape is a flat colour with a scissor-cut edge, casting a soft shadow down and to the right on
+   whatever is behind it, all on a faint paper fibre. A stroke that stands on its own (a leg, a blade of grass, a bar,
+   an arrow) is a thin strip of paper; one that goes round a shape is that shape's edge and goes. The layers shift a
+   few pixels with the pointer, the near ones most. */
+(() => {
+const { TAU, clamp, lerp, smooth, hash, noise, rng, hex, mix, mul, rgba, ellipse, poly, cloudPts, dens, dot, label, beamPoly, waveScallops } = Hill;
+const MOSS = hex('#A3BE8C'), AURORA = [MOSS, hex('#8FBCBB'), hex('#B48EAD')], VELLUM = hex('#FFF7DA');
+const SHADOW = 'rgba(14,18,28,0.15)';
+
+/* ---------- the paper ---------- */
+// the polygon added to the path, moved by (dx, dy)
+function trace(c, pts, dx, dy) {
+  c.moveTo(pts[0][0] + dx, pts[0][1] + dy);
+  for (let i = 1; i < pts.length; i++) c.lineTo(pts[i][0] + dx, pts[i][1] + dy);
+  c.closePath();
+}
+// the edge the scissors left: each corner a hair off where it was meant to be
+const snip = pts => { const n = pts.length, j = Hill.PW * 0.9; return pts.map(([x, y], i) => [x + (hash(i * 1.3 + n) - 0.5) * j, y + (hash(i * 2.1 + n) - 0.5) * j]); };
+/* A shape cut out of paper and laid on, `deep` layers above what's behind it: its shadow is two copies, a little and
+   a little more down and to the right, darker where they overlap */
+function paper(c, pts, col, deep = 1) {
+  const k = Hill.PW * deep, cut = snip(pts);
+  c.beginPath(); trace(c, cut, k, k * 1.5); c.fillStyle = SHADOW; c.fill();
+  c.beginPath(); trace(c, cut, k * 2.2, k * 3.3); c.fill();
+  c.beginPath(); trace(c, cut, 0, 0); c.fillStyle = typeof col === 'string' ? col : rgba(col); c.fill();
+}
+/* The same in the cached layers, where a blurred shadow costs nothing after the first time; it shows a little above a
+   top edge too. The canvas's shadow is in device pixels, so it's scaled by the layer's. */
+function soft(c, pts, col, deep = 1, holes = []) {
+  const m = c.getTransform().a, k = Hill.PW * deep * m;
+  c.save();
+  c.shadowColor = 'rgba(14,18,28,0.4)'; c.shadowBlur = 3 * k + 2 * m; c.shadowOffsetX = 1.3 * k; c.shadowOffsetY = 2 * k;
+  c.beginPath(); trace(c, snip(pts), 0, 0);
+  for (const h of holes) trace(c, h, 0, 0);
+  c.fillStyle = typeof col === 'string' ? col : rgba(col); c.fill('evenodd');
+  c.restore();
+}
+/* a strip of paper along the points, w wide (times PW), added to the path for the caller to fill; its shadow is laid
+   down at once */
+function strip(c, pts, w) {
+  const n = pts.length, hw = w * Hill.PW * 0.55, ring = new Array(n * 2);
+  for (let i = 0; i < n; i++) {
+    const a = pts[i > 0 ? i - 1 : 0], b = pts[i < n - 1 ? i + 1 : n - 1];
+    let tx = b[0] - a[0], ty = b[1] - a[1];
+    const tl = Math.hypot(tx, ty) || 1; tx /= tl; ty /= tl;
+    ring[i] = [pts[i][0] - ty * hw, pts[i][1] + tx * hw]; ring[n * 2 - 1 - i] = [pts[i][0] + ty * hw, pts[i][1] - tx * hw];
+  }
+  const sh = new Path2D(), k = Hill.PW, fill = c.fillStyle;
+  trace(sh, ring, k * 0.9, k * 1.4);
+  c.fillStyle = SHADOW; c.fill(sh); c.fillStyle = fill;
+  trace(c, ring, 0, 0);
+}
+/* The felt pen's lines, in paper: an outline is the cut itself, the others are strips */
+let bare = false;
+function ribbon(c, pts, w, sd, o = {}) {
+  if (!bare && !o.outline) strip(c, pts, w);
+}
+// letters cut out of paper: a crisp shadow just under them
+function lift(s, c) { const k = s.dpr; c.shadowColor = 'rgba(14,18,28,0.4)'; c.shadowBlur = 1.5 * k; c.shadowOffsetX = 0.8 * k; c.shadowOffsetY = 1.2 * k; }
+
+/* The diorama's depth: each layer moves with the pointer as far as it's near, from the sky (still) to the hill. Every
+   layer goes right and down only, so none leaves a gap at the screen's right or bottom edge. */
+const lean = { x: 0, y: 0 }, STARS = 0.3, SEA = 0.45, CLOUDS = 0.6, LAND = 1;
+const shift = (c, s, depth) => { const a = 3.2 * s.g.u * depth; c.translate(a * (1 - lean.x), a * 0.6 * (1 - lean.y)); };
+
+/* The paper's fibre: a tile of short curled hairs, lighter and darker, laid over the whole diorama */
+const FIBRE = (() => {
+  const cv = document.createElement('canvas'), x = cv.getContext('2d'), n = 256, R = rng(19);
+  cv.width = cv.height = n;
+  x.lineWidth = 0.6;
+  for (let i = 0; i < 900; i++) {
+    const px = R() * n, py = R() * n, a = R() * TAU, l = 3 + R() * 9;
+    x.strokeStyle = R() < 0.5 ? 'rgba(255,255,255,0.06)' : 'rgba(20,24,36,0.06)';
+    x.beginPath(); x.moveTo(px, py); x.quadraticCurveTo(px + Math.cos(a + 0.6) * l * 0.5, py + Math.sin(a + 0.6) * l * 0.5, px + Math.cos(a) * l, py + Math.sin(a) * l); x.stroke();
+  }
+  return x.createPattern(cv, 'repeat');
+})();
+
+Hill.style('nord', {
+  pal: Hill.stops([
+    [0,    { sky: '#B8D6E0', sky2: '#E5E9F0', sea: '#5E81AC', sea2: '#88C0D0', foam: '#ECEFF4', hill: '#ECEFF4', hill2: '#C6D0DE', ink: '#3B4252', paper: '#F4F6F9', beam: '#EBCB8B', cloud: '#F4F6F9', far: '#A9C7D3', glass: '#8FBCBB' }],
+    [0.2,  { sky: '#B3CAD8', sky2: '#E8E1E7', sea: '#5A7BA6', sea2: '#8BB4CA', foam: '#ECEFF4', hill: '#E9EAF0', hill2: '#C3C9D8', ink: '#3B4252', paper: '#F2F0F2', beam: '#EBCB8B', cloud: '#F2EFF2', far: '#B3BCD3', glass: '#A9C4D2' }],
+    [0.44, { sky: '#B48EAD', sky2: '#D08770', sea: '#4C6A92', sea2: '#A08FB2', foam: '#E8D9E2', hill: '#E6D6D8', hill2: '#BFAFC0', ink: '#3B4252', paper: '#F0DEDA', beam: '#EBCB8B', cloud: '#EBD0CF', far: '#A58AA6', glass: '#EBCB8B' }],
+    [0.7,  { sky: '#4C566A', sky2: '#6A6B88', sea: '#3B4A63', sea2: '#6C86AE', foam: '#B9C3D6', hill: '#A6AFC2', hill2: '#7F889E', ink: '#2E3440', paper: '#BAC2D1', beam: '#EBCB8B', cloud: '#677189', far: '#4C566A', glass: '#EBCB8B' }],
+    [1,    { sky: '#2E3440', sky2: '#3B4252', sea: '#36405A', sea2: '#5E81AC', foam: '#81A1C1', hill: '#76819A', hill2: '#56607A', ink: '#242933', paper: '#9AA5BA', beam: '#EBCB8B', cloud: '#4C566A', far: '#3B4252', glass: '#EBCB8B' }],
+  ]),
+  C: {
+    wool: hex('#FFFFFF'), yolk: hex('#EBCB8B'), duck: hex('#EBCB8B'), beak: hex('#D08770'), pink: hex('#E3A9A9'),
+    monster: hex('#B48EAD'), chimney: hex('#BF616A'), roof: hex('#3B4252'), door: hex('#5E81AC'), skin: hex('#EAC6AA'),
+    navy: hex('#434C5E'), wood: hex('#C9A57A'), steel: hex('#D8DEE9'), moon: hex('#EBCB8B'), tile: hex('#2E3440'),
+    huts: ['#BF616A', '#5E81AC', '#EBCB8B', '#A3BE8C'].map(hex),
+    kraft: hex('#C9A57A'), kraftLit: hex('#DDBF97'), kraftDark: hex('#A8865E'), tape: hex('#EBCB8B'), sprout: hex('#A3BE8C'),
+  },
+  ribbon, print: paper, boil: 0, reg: [0, 0],
+  // the labels and doodles in Nord's bar font, medium
+  hand: '"Avenir Next", "Avenir", "Helvetica Neue", sans-serif', weight: 500,
+  before(s) {
+    const p = s.cursor, on = p.on && !s.reduced;
+    lean.x = lerp(lean.x, on ? clamp(p.x / s.W * 2 - 1, -1, 1) : 0, 0.1);
+    lean.y = lerp(lean.y, on ? clamp(p.y / s.H * 2 - 1, -1, 1) : 0, 0.1);
+  },
+
+  after(s, c) { c.fillStyle = FIBRE; c.fillRect(0, 0, s.W, s.H); },
+  draw: {
+    /* the sky, and at night an aurora: three long strips of paper, green, teal and violet, waving slowly */
+    sky(base, s, c) {
+      base(s, c);
+      const g = s.g, { W, u, top } = g, k = smooth(0.6, 0.95, s.d), t = s.reduced ? 0 : s.t, sky = g.horizon - top;
+      if (k <= 0) return;
+      c.save(); shift(c, s, STARS); c.globalAlpha = k;
+      AURORA.forEach((col, i) => {
+        const x0 = g.portrait ? -20 : W * 0.3, y0 = top + sky * (g.portrait ? 0.2 + i * 0.07 : 0.1 + i * 0.075), ring = new Array(98);
+        for (let j = 0; j <= 48; j++) {
+          const f = j / 48, x = lerp(x0, W + 20, f), y = y0 + Math.sin(f * 5 + i * 1.7 + t * 0.35) * 16 * u + Math.sin(f * 11 - t * 0.5 + i) * 5 * u - f * sky * 0.08;
+          const hw = (5 + 4 * Math.sin(f * 7 + i * 2 + t * 0.6)) * u * Math.sin(Math.PI * f) ** 0.4 + 1;
+          ring[j] = [x, y - hw]; ring[97 - j] = [x, y + hw];
+        }
+        paper(c, ring, mix(col, s.P.sky, 0.25));
+      });
+      c.restore();
+    },
+    /* the lower sky: two lighter sheets cut in soft waves, and the sea's edge laid over them at the horizon */
+    band(base, s, c, bandTop) {
+      const g = s.g, { W, u } = g, P = s.P, by = bandTop + 20 * u, band = [], low = [];
+      for (let x = -30; x <= W + 30; x += 12 * u) {
+        band.push([x, by + Math.sin(x * 0.006 + 1) * 11 * u + Math.sin(x * 0.019 + 2) * 3 * u]);
+        low.push([x, lerp(by, g.horizon, 0.55) + Math.sin(x * 0.011 + 4) * 6 * u + Math.sin(x * 0.027) * 2 * u]);
+      }
+      band.push([W + 30, g.horizon + 4], [-30, g.horizon + 4]);
+      low.push([W + 30, g.horizon + 4], [-30, g.horizon + 4]);
+      soft(c, band, P.sky2, 2);
+      soft(c, low, mix(P.sky2, P.far, 0.35), 1.5);
+      c.fillStyle = rgba(P.sea); c.fillRect(-1, g.horizon, W + 2, 8 * u);
+      c.fillStyle = rgba(mix(P.sea, P.foam, 0.45)); c.fillRect(-1, g.horizon, W + 2, Hill.PW);
+    },
+    /* small paper stars, five points each, that swell and shrink a little */
+    stars(base, s, c) {
+      const g = s.g, u = g.u, st = smooth(0.55, 0.9, s.d);
+      if (st <= 0) return;
+      const sh = new Path2D(), star = new Path2D(), k = Hill.PW;
+      for (const p of g.stars) {
+        const r = p.s * (p.s < 0.75 ? 1.6 : 3.2) * u * (s.reduced ? 1 : 0.8 + 0.2 * Math.sin(s.t * 2 + p.p)), pts = [];
+        for (let i = 0; i < 10; i++) { const a = i / 10 * TAU + p.p, rr = i % 2 ? r * 0.45 : r; pts.push([p.x + Math.sin(a) * rr, p.y - Math.cos(a) * rr]); }
+        trace(sh, pts, k * 0.8, k * 1.2); trace(star, pts, 0, 0);
+      }
+      c.save(); shift(c, s, STARS); c.globalAlpha = st;
+      c.fillStyle = SHADOW; c.fill(sh);
+      c.fillStyle = rgba(mix(s.P.beam, VELLUM, 0.4)); c.fill(star);
+      c.restore();
+    },
+    /* the waves: thin strips of paper laid on the sea */
+    waves(base, s, c) {
+      const k = Hill.PW;
+      c.save(); c.lineCap = 'butt'; shift(c, s, SEA);
+      c.translate(k * 0.8, k * 1.3); c.strokeStyle = SHADOW; waveScallops(s, c, false);
+      c.translate(-k * 0.8, -k * 1.3); c.strokeStyle = rgba(s.P.sea2); waveScallops(s, c, false);
+      c.restore();
+    },
+    /* rings of paper where things land */
+    ripples(base, s, c) {
+      const u = s.g.u, k = Hill.PW;
+      c.lineWidth = 2 * k;
+      for (const r of s.ripples) {
+        if (!Hill.afloat(s, c, r.y)) continue;
+        const age = s.t - r.t0, rx = 8 * u + age * 70 * u;
+        c.globalAlpha = clamp(1 - age / 2.2) * r.a;
+        c.beginPath(); c.ellipse(r.x + k, r.y + k * 1.5, rx, rx * 0.3, 0, 0, TAU); c.strokeStyle = SHADOW; c.stroke();
+        c.beginPath(); c.ellipse(r.x, r.y, rx, rx * 0.3, 0, 0, TAU); c.strokeStyle = rgba(s.P.foam); c.stroke();
+      }
+      c.globalAlpha = 1;
+    },
+    /* the fried egg, cut out: the white, the yolk on it, a sliver of shine */
+    sun(base, s, c) {
+      const g = s.g, u = g.u, sun = s.sunPos();
+      if (sun.a <= 0) return;
+      const r = 38 * u, sz = r * 3;
+      c.save(); c.beginPath(); c.rect(0, 0, g.W, g.horizon); c.clip(); shift(c, s, STARS);
+      c.globalAlpha = sun.a;
+      s.sprite('sun', sz, sz, sun.x, sun.y, x => {
+        const white = [];
+        for (let i = 0; i < 48; i++) { const a = i / 48 * TAU; white.push([Math.cos(a) * r * (1 + 0.12 * Math.sin(a * 3 + 1) + 0.06 * Math.sin(a * 5 + 2)), Math.sin(a) * r * 0.86 * (1 + 0.09 * Math.sin(a * 4))]); }
+        soft(x, white, mul(hex('#FFFFFF'), s.P.paper), 2);
+        soft(x, ellipse(3 * u, -3 * u, r * 0.42, r * 0.4, 30), mul(Hill.C.yolk, s.P.paper), 1.2);
+        x.beginPath(); strip(x, ellipse(3 * u, -3 * u, r * 0.27, r * 0.25, 10, Math.PI * 1.15, Math.PI * 1.5), 2.2); x.fillStyle = '#FFFFFF'; x.fill();
+      });
+      c.restore();
+    },
+    /* the crescent moon, asleep: its shut eye and its smile are strips of paper; a z drifts off */
+    moon(base, s, c) {
+      const g = s.g, u = g.u, m = s.moonPos();
+      if (m.a <= 0) return;
+      const r = 25 * u, sz = r * 3.4;
+      c.save(); c.beginPath(); c.rect(0, 0, g.W, g.horizon); c.clip(); shift(c, s, STARS);
+      c.globalAlpha = m.a;
+      s.sprite('moon', sz, sz, m.x, m.y, x => {
+        const cres = [];
+        for (let i = 0; i <= 26; i++) { const a = -Math.PI / 2 + i / 26 * Math.PI; cres.push([Math.cos(a) * r, Math.sin(a) * r]); }
+        for (let i = 25; i >= 1; i--) { const a = -Math.PI / 2 + i / 26 * Math.PI; cres.push([Math.cos(a) * r * 0.38 + r * 0.02, Math.sin(a) * r * 0.97]); }
+        soft(x, cres, Hill.C.moon, 2);
+        x.beginPath();
+        strip(x, ellipse(r * 0.62, -r * 0.2, r * 0.17, r * 0.11, 9, 0.15 * Math.PI, 0.85 * Math.PI), 1.6);
+        strip(x, ellipse(r * 0.52, r * 0.3, r * 0.15, r * 0.1, 9, 0.2 * Math.PI, 0.8 * Math.PI), 1.5);
+        x.fillStyle = Hill.INK; x.fill();
+      });
+      const zz = s.reduced ? 0.4 : (s.t * 0.4) % 1;
+      label(c, 'z', m.x + r * 1.1 + zz * 10 * u, m.y - r * 0.7 - zz * 16 * u, (11 + zz * 5) * u + 3, rgba(mix(s.P.paper, s.P.beam, 0.3), m.a * (1 - zz) * 0.95), 'left', -0.2);
+      c.restore();
+    },
+    /* a cloud: two sheets, the one behind a shade cooler; the one with legs walks on strips of paper */
+    cloud(base, s, c, cl, name, legs) {
+      const g = s.g, u = g.u, P = s.P, p = s.cloudXY(cl), w = cl.w;
+      if (p.x < -w || p.x > g.W + w) return;
+      c.save(); shift(c, s, CLOUDS);
+      if (legs) {
+        const walk = s.reduced ? 0 : s.t * 5;
+        c.beginPath();
+        [-0.24, -0.11, 0.1, 0.23].forEach((lx, i) => {
+          const x = p.x + lx * w * (cl.dir < 0 ? -1 : 1), sw = Math.sin(walk + i * 1.7 + (i % 2) * Math.PI) * 2.6 * u;
+          strip(c, [[x, p.y - 4 * u], [x + sw * 0.5, p.y + 5 * u], [x + sw, p.y + 12 * u]], Hill.DET * 1.25);
+        });
+        c.fillStyle = Hill.INK; c.fill();
+      }
+      s.sprite(name + (legs && cl.dir < 0 ? 'L' : ''), w * 1.3, w * 0.75, p.x, p.y - w * 0.12, x => {
+        soft(x, dens(cloudPts(-w * 0.06, w * 0.06, w * 0.8, cl.seed + 1), 5, true), mix(P.cloud, P.sky, 0.3), 1.5);
+        soft(x, dens(cloudPts(0, w * 0.12, w, cl.seed), 5, true), P.cloud, 2);
+        if (legs) {
+          // a tail: it might be a sheep
+          const f = cl.dir < 0 ? -1 : 1;
+          soft(x, ellipse(-f * w * 0.5, w * 0.05, w * 0.045, w * 0.035, 12), P.cloud);
+        }
+      });
+      c.restore();
+    },
+    /* the light: a wedge of pale yellow vellum, the sea's strips showing through it a little lighter; in the dark the
+       vellum is paler and the night shows through it */
+    beam(base, s, c) {
+      const P = s.P, pw = s.lampPower(), { L, len, a0, a1 } = beamPoly(s);
+      if (len < 10 || pw < 0.02) return;
+      const night = smooth(0.3, 0.8, s.d), fan = [[L.x, L.y]], k = Hill.PW, a = c.globalAlpha, col = mix(P.beam, VELLUM, 0.4 + 0.35 * night);
+      for (let i = 0; i <= 12; i++) { const an = lerp(a0, a1, i / 12); fan.push([L.x + Math.cos(an) * len, L.y + Math.sin(an) * len]); }
+      c.save(); shift(c, s, LAND);
+      c.globalAlpha = a * pw * 0.3; poly(c, fan, true, k * 2, k * 3); c.fillStyle = SHADOW; c.fill();
+      c.globalAlpha = a * pw * (0.6 - 0.38 * night); poly(c, fan); c.fillStyle = rgba(col); c.fill();
+
+      c.globalAlpha = a;
+      poly(c, fan); c.clip(); c.setTransform(s.dpr, 0, 0, s.dpr, 0, 0); shift(c, s, SEA);
+      c.lineCap = 'butt'; c.strokeStyle = rgba(mix(col, hex('#FFFFFF'), 0.4), 0.9 * pw); waveScallops(s, c, true);
+      c.restore();
+    },
+    /* the lamp lit at night: two discs of vellum round the eye */
+    halo(base, s, c) {
+      const g = s.g, L = g.lamp, er = g.lh.er, night = smooth(0.35, 0.85, s.d), f = s.beam.flash;
+      const k = Math.max(night * s.beamI(), f * 0.9) * s.lampOn() * s.lampPower(), a = c.globalAlpha;
+      if (k < 0.02) return;
+      c.save(); shift(c, s, LAND); c.fillStyle = rgba(mix(s.P.beam, VELLUM, 0.5));
+      for (const [r, o] of [[3.4 + f * 1.4, 0.28], [2.3 + f * 0.6, 0.4]]) {
+        c.globalAlpha = a * clamp(k) * o;
+        poly(c, snip(ellipse(L.x, L.y, er * r, er * r, 40))); c.fill();
+      }
+      c.restore();
+    },
+    /* where the light lands on the hill, the vellum over the snow */
+    hillLight(base, s, c) {
+      const { L, len, a0, a1 } = beamPoly(s);
+      if (len < 10 || Math.sin(s.beam.a) < 0.08) return;
+      c.save(); poly(c, s.g.hillClip); c.clip();
+      c.beginPath(); c.moveTo(L.x, L.y);
+      for (let i = 0; i <= 12; i++) { const a = lerp(a0, a1, i / 12); c.lineTo(L.x + Math.cos(a) * len, L.y + Math.sin(a) * len); }
+      c.closePath(); c.fillStyle = rgba(mix(s.P.beam, VELLUM, 0.4), (0.4 + 0.15 * smooth(0.3, 0.8, s.d)) * s.lampPower()); c.fill();
+      c.restore();
+    },
+    land(base, s, c, w) { c.save(); shift(c, s, LAND); base(s, c, w); c.restore(); },
+    /* the hill: green paper under a sheet of snow, the snow torn open here and there; a shady sheet over its flank, a
+       band of rock under a headland's edge, and strips of foam where it meets the sea */
+    hill(base, s, c) {
+      const g = s.g, { W, H, u } = g, P = s.P, T = g.lh, rd = g.ridge;
+      if (g.isle) {
+        const sl = g.shore, x0 = sl[0][0], x1 = sl.at(-1)[0], deep = x => Math.sin(Math.PI * (x - x0) / (x1 - x0)) * 18 * u, R = rng(3);
+        poly(c, [...sl, ...sl.slice().reverse().map(([x, y]) => [x, y + deep(x)])]); c.fillStyle = rgba(mix(P.sea, P.hill2, 0.35)); c.fill();
+        c.beginPath();
+        for (let j = 0; j < 4; j++) for (let x = x0 + R() * 30 * u; x < x1 - 20 * u; x += (24 + R() * 30) * u) {
+          const y = s.shoreY(x) + deep(x) * (0.25 + j * 0.27) + 2 * u;
+          strip(c, [[x, y], [x + (6 + R() * 12) * u * (1 - j * 0.15), y]], 1.2);
+        }
+        c.fillStyle = rgba(P.sea2); c.fill();
+      }
+      soft(c, g.hillPoly, mul(MOSS, P.paper), 3);
+      // the holes in the snow, where the grass shows: under the ridge, clear of the tower and the shore
+      const R = rng(7), holes = [];
+      for (let i = 0; i < (g.isle ? 4 : g.portrait ? 5 : 7); i++) {
+        const x = lerp(rd[0][0] + 30 * u, Math.min(W, rd.at(-1)[0]) - 20 * u, R()), y = s.ridgeY(x) + (g.isle ? 14 + R() * 18 : 26 + R() * (g.portrait ? 40 : 150)) * u;
+        const rx = (g.isle ? 10 : 18 + R() * 26) * u, hole = [];
+        if (Math.abs(x - T.x) < T.wB * 1.4 || y + rx * 0.4 > s.shoreY(x) - 6 * u) continue;
+        for (let k = 0; k < 28; k++) { const a = k / 28 * TAU, rr = 1 + 0.32 * noise(k * 0.45 + i * 7) + 0.06 * noise(k * 1.7 + i); hole.push([x + Math.cos(a) * rx * rr, y + Math.sin(a) * rx * 0.45 * rr]); }
+        holes.push(hole);
+      }
+      c.save(); poly(c, g.hillPoly); c.clip();
+      soft(c, g.hillPoly, P.hill, 2, holes);
+      c.restore();
+      if (g.shore) {
+        const sl = g.shore, x0 = sl[0][0];
+        soft(c, [...sl, ...sl.slice().reverse().map(([x, y]) => [x + 4 * u, y - (8 + (x - x0) / W * 26) * u])], mix(P.hill2, P.ink, 0.3), 1.5);
+      } else {
+        const sh = rd.filter(([x]) => x < T.x - T.wB * 2), n = sh.length;
+        const inner = sh.map(([x, y], i) => { const f = smooth(0, 0.35, (n - 1 - i) / n); return [x + (34 + (H - y) * 0.12) * u * f, y + (16 + (H - y) * 0.05) * u * f]; }).reverse();
+        soft(c, [...sh, ...inner], P.hill2, 1.5);
+      }
+      c.beginPath();
+      const foam = g.shore || rd.filter(p => p[1] > g.horizon + 3 && p[0] < T.x), ox = g.shore ? 0 : -4 * u, oy = g.shore ? 4 * u : 0;
+      for (let i = 0; i < foam.length - 4; i += 6) {
+        const [x, y] = foam[i + 2];
+        if (x < -10 || x > W + 10 || y > H + 10 || hash(i * 0.7) < 0.3) continue;
+        strip(c, foam.slice(i, i + 4).map(([x, y]) => [x + ox, y + oy]), 1.8);
+      }
+      c.fillStyle = rgba(P.foam); c.fill();
+    },
+    /* a red cottage with white corners, snow along its roof, a stone chimney */
+    cottage(base, s, c) {
+      const g = s.g, u = g.u, P = s.P, C = Hill.C, k = g.cot, w = k.w, h = k.h, x0 = k.x - w / 2, y0 = k.base - h;
+      const white = mul(hex('#FFFFFF'), P.paper), night = smooth(0.45, 0.75, s.d);
+      const chx = x0 + w * 0.68, chw = w * 0.15, cht = y0 - h * 1.45;
+      soft(c, [[chx, y0 - h * 0.2], [chx + 1.2 * u, cht], [chx + chw + 1.6 * u, cht], [chx + chw, y0 - h * 0.25]], mul(mix(C.steel, C.roof, 0.45), P.paper));
+      soft(c, [[x0, k.base], [x0, y0], [x0 + w, y0], [x0 + w, k.base]], mul(C.chimney, P.paper), 1.5);
+      const ax = x0 + w * 0.5, ay = y0 - h * 0.78, roofY = x => ay + Math.abs(x - ax) / (w * 0.62) * (y0 + 1 * u - ay);
+      soft(c, [[x0 - w * 0.12, y0 + 1 * u], [ax, ay], [x0 + w * 1.12, y0 + 1 * u]], mul(C.roof, P.paper), 1.5);
+      const snow = [[x0 - w * 0.13, y0 + 0.5 * u], [ax, ay - 1.2 * u], [x0 + w * 1.13, y0 + 0.5 * u]];
+      for (let i = 12; i >= 0; i--) { const x = lerp(x0 - w * 0.08, x0 + w * 1.08, i / 12); snow.push([x, roofY(x) + h * (0.13 + 0.05 * Math.sin(i * 1.9))]); }
+      soft(c, snow, white);
+      // the window: a white frame, the glass (lit at night), white bars
+      const wx = x0 + w * 0.14, wy = y0 + h * 0.24, ww = w * 0.27, wh = h * 0.36, f = 1.5 * u;
+      soft(c, [[wx - f, wy - f], [wx + ww + f, wy - f], [wx + ww + f, wy + wh + f], [wx - f, wy + wh + f]], white);
+      soft(c, [[wx, wy], [wx + ww, wy], [wx + ww, wy + wh], [wx, wy + wh]], night > 0.5 ? P.beam : P.glass, 0.5);
+      c.beginPath();
+      strip(c, [[wx + ww / 2, wy], [wx + ww / 2, wy + wh]], 1.3);
+      strip(c, [[wx, wy + wh / 2], [wx + ww, wy + wh / 2]], 1.3);
+      strip(c, [[x0 + 1 * u, k.base], [x0 + 1 * u, y0]], 2.4);
+      strip(c, [[x0 + w - 1 * u, k.base], [x0 + w - 1 * u, y0]], 2.4);
+      c.fillStyle = rgba(white); c.fill();
+      // the door (it opens for the keeper: see the states)
+      const dx = x0 + w * 0.56, dw = w * 0.24, dh = h * 0.66;
+      k.door = { x: dx, y: k.base - dh, w: dw, h: dh };
+      soft(c, [[dx, k.base], [dx, k.base - dh], [dx + dw, k.base - dh], [dx + dw, k.base]], mul(C.door, P.paper));
+      dot(c, dx + dw * 0.78, k.base - dh * 0.48, 1.3 * u + 0.4, Hill.INK);
+    },
+    /* the tower: white paper, its stripes bands of the theme's paper laid on, curving up a little as seen from below */
+    tower(base, s, c) {
+      const g = s.g, u = g.u, P = s.P, T = g.lh, th = Hill.THEMES[g.theme || s.theme], C = Hill.C;
+      const half = k => lerp(T.wB, T.wT, k) / 2, yAt = k => T.base - T.h * k, Lp = [], Rp = [];
+      for (let i = 0; i <= 20; i++) { const k = i / 20; Lp.push([T.x - half(k), yAt(k)]); Rp.push([T.x + half(k), yAt(k)]); }
+      soft(c, [...Lp, ...Rp.reverse()], mul(hex('#FFFFFF'), P.paper), 2);
+      const bands = 6, sag = T.wB * 0.09;
+      const edge = k => { const hw = half(k), out = []; for (let i = 0; i <= 12; i++) { const f = i / 12 * 2 - 1; out.push([T.x + f * hw, yAt(k) - sag * (1 - f * f)]); } return out; };
+      let n = 0;
+      for (let j = 1; j < bands; j += 2) {
+        const hi = j + 1 >= bands ? [[T.x + half(1), yAt(1)], [T.x - half(1), yAt(1)]] : edge((j + 1) / bands).reverse();
+        soft(c, [...edge(j / bands), ...hi], mul(hex(th.stripes[n++ % th.stripes.length]), P.paper));
+      }
+      const night = smooth(0.45, 0.75, s.d), ww = T.wB * 0.22, wh = T.er * 0.75;
+      for (const k of [0.25, 0.58]) { const y = yAt(k); soft(c, [[T.x - ww / 2, y - wh / 2], [T.x + ww / 2, y - wh / 2], [T.x + ww / 2, y + wh / 2], [T.x - ww / 2, y + wh / 2]], night > 0.5 ? P.beam : mul(C.roof, P.paper), 0.5); }
+      const dw = T.wB * 0.32, dh = T.wB * 0.5;
+      soft(c, [[T.x - dw / 2, T.base], ...ellipse(T.x, T.base - dh + dw / 2, dw / 2, dw / 2, 10, Math.PI, TAU), [T.x + dw / 2, T.base]], mul(C.roof, P.paper), 0.5);
+      // the gallery: a dark deck the eye sits on
+      const gw = T.wT * 0.95, gy = T.top;
+      soft(c, [[T.x - gw, gy + 1 * u], [T.x - gw * 1.05, gy - T.gal * 0.42], [T.x + gw * 1.05, gy - T.gal * 0.42], [T.x + gw, gy + 1 * u]], Hill.INK);
+    },
+    /* grass along the ridge: slivers of green paper, leaning with the wind and away from the pointer */
+    tufts(base, s, c) {
+      const g = s.g, u = g.u, k = Hill.PW, blades = new Path2D();
+      for (const b of g.tufts) {
+        let a = s.reduced ? 0.12 : Math.sin(s.t * 1.6 + b.p) * 0.14 * (0.6 + s.windAmb) + s.windTotal * 0.36;
+        if (s.ptr.on && !s.reduced) {
+          const dx = b.x - s.ptr.x, dy = b.y - s.ptr.y, r = 95 * u, d2 = dx * dx + dy * dy;
+          if (d2 < r * r) a += Math.sign(dx || 1) * 1.05 * (1 - Math.sqrt(d2) / r);
+        }
+        a = clamp(a, -1.3, 1.3);
+        for (let j = 0; j < b.n + 1; j++) {
+          const da = (j - b.n / 2) * 0.42, l = b.l * (j === 1 ? 1.15 : 0.85), x = b.x + (j - b.n / 2) * 1.6 * u, y = b.y + 1.5 * u;
+          const tx = x + Math.sin(a + da) * l, ty = y - Math.cos(a + da) * l, w = 1.5 * g.pw;
+          blades.moveTo(x - w, y); blades.quadraticCurveTo(lerp(x, tx, 0.5) - w * 0.4, lerp(y, ty, 0.55), tx, ty); blades.quadraticCurveTo(lerp(x, tx, 0.5) + w * 0.4, lerp(y, ty, 0.55), x + w, y); blades.closePath();
+        }
+      }
+      c.save(); c.translate(k * 0.8, k * 1.2); c.fillStyle = SHADOW; c.fill(blades); c.restore();
+      c.fillStyle = rgba(mul(MOSS, s.P.paper)); c.fill(blades);
+    },
+    /* smoke from the chimney: little puffs of paper that rise, swell and fade */
+    smoke(base, s, c) {
+      if (s.reduced) return;
+      const g = s.g, u = g.u, k = g.cot, x0 = k.x - k.w / 2 + k.w * 0.68 + k.w * 0.075, y0 = k.base - k.h - k.h * 1.5;
+      for (let i = 0; i < 3; i++) {
+        const a = (s.t * 0.22 + i / 3) % 1, r = (2.5 + a * 6) * u;
+        c.globalAlpha = smooth(0, 0.08, a) * (1 - smooth(0.55, 1, a));
+        paper(c, ellipse(x0 + s.windTotal * 50 * u * a + Math.sin(a * 6 + i) * 3 * u, y0 - 6 * u - a * 46 * u, r, r * 0.82, 14), mix(s.P.cloud, s.P.sky, 0.15));
+      }
+      c.globalAlpha = 1;
+    },
+    // the blades are paper already: the pen's strokes over them go
+    meadow(base, s, c, m) { bare = true; base(s, c, m); bare = false; },
+    labels(base, s, c) { c.save(); lift(s, c); base(s, c); c.restore(); },
+    doodles(base, s, c) { c.save(); lift(s, c); base(s, c); c.restore(); },
+  },
+});
+})();
diff --git a/site/styles/poster.js b/site/styles/poster.js
new file mode 100644
index 00000000..c0a6dde1
--- /dev/null
+++ b/site/styles/poster.js
@@ -0,0 +1,215 @@
+/* Lighthouse Hill in a screen-printed poster, for Gruvbox (see the styles in scene.js): a fat round brush line held
+   still, a few flat inks printed off the line, halftone dots for shade, and paper grain over it all */
+(() => {
+const { clamp, lerp, smooth, noise, rng, hex, mix, mul, rgba, ellipse, poly, dens, dot, beamPoly, waveScallops, TAU } = Hill;
+const RED = hex('#FB4934'), ORANGE = hex('#FE8019'), YELLOW = hex('#FABD2F'), CREAM = hex('#FBF1C7');
+
+/* The dot screens: dark ink dots on a 45° grid, small, middling and heavy, drawn at four times the size and
+   shrunk back so they stay crisp on a sharp screen */
+const SCREEN = 7;
+const screen = r => {
+  const cv = document.createElement('canvas'), x = cv.getContext('2d'), k = 4;
+  cv.width = cv.height = SCREEN * k;
+  x.fillStyle = '#282828';
+  for (const [cx, cy] of [[0, 0], [SCREEN, 0], [0, SCREEN], [SCREEN, SCREEN], [SCREEN / 2, SCREEN / 2]]) { x.beginPath(); x.arc(cx * k, cy * k, r * k, 0, TAU); x.fill(); }
+  const p = x.createPattern(cv, 'repeat');
+  p.setTransform(new DOMMatrix([1 / k, 0, 0, 1 / k, 0, 0]));
+  return p;
+};
+const DOTS = { light: screen(0.8), mid: screen(1.3), deep: screen(1.8) };
+// a dot screen printed over the polygon, off the line like the other inks
+function shade(c, pts, dots) { poly(c, pts, true, Hill.REGX, Hill.REGY); c.fillStyle = dots; c.fill(); }
+// an animal's shady underside: light dots in the lower part of an ellipse round its body
+function belly(c, cx, cy, rx, ry, y) {
+  c.save(); poly(c, ellipse(cx, cy, rx, ry, 24), true, Hill.REGX, Hill.REGY); c.clip();
+  c.fillStyle = DOTS.light; c.fillRect(cx - rx, y, rx * 2, cy + ry - y + Hill.REGY); c.restore();
+}
+
+/* The paper: a tile of specks, lighter and darker, laid over the whole print */
+const GRAIN = (() => {
+  const cv = document.createElement('canvas'), x = cv.getContext('2d'), n = 256, R = rng(70);
+  cv.width = cv.height = n;
+  const im = x.createImageData(n, n), d = im.data;
+  for (let i = 0; i < n * n; i++) {
+    const r = R(), j = i * 4;
+    if (r < 0.1) { d[j] = 40; d[j + 1] = 36; d[j + 2] = 30; d[j + 3] = 16 + R() * 22; }
+    else if (r < 0.2) { d[j] = 251; d[j + 1] = 241; d[j + 2] = 199; d[j + 3] = 14 + R() * 20; }
+  }
+  x.putImageData(im, 0, 0);
+  return x.createPattern(cv, 'repeat');
+})();
+
+/* The line: a fat round brush, the same width all along, with a little of the hand in it but no boil, and no
+   hatching (the dots shade) */
+function brush(c, pts, w, sd = 0, o = {}) {
+  const n = pts.length;
+  if (n < 2 || o.hatch) return;
+  const hw = w * Hill.PW * 0.5, l = [], r = [];
+  let s = 0;
+  for (let i = 0; i < n; i++) {
+    const a = pts[i > 0 ? i - 1 : 0], b = pts[i < n - 1 ? i + 1 : n - 1];
+    let tx = b[0] - a[0], ty = b[1] - a[1];
+    const tl = Math.hypot(tx, ty) || 1; tx /= tl; ty /= tl;
+    if (i) s += Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]);
+    const off = 0.3 * Hill.PW * noise(s / 80 + sd * 3.71), x = pts[i][0] - ty * off, y = pts[i][1] + tx * off;
+    l.push([x - ty * hw, y + tx * hw]); r.push([x + ty * hw, y - tx * hw]);
+  }
+  // round ends: half a turn from one side to the other
+  const cap = (p, q) => {
+    const cx = (p[0] + q[0]) / 2, cy = (p[1] + q[1]) / 2, a0 = Math.atan2(p[1] - cy, p[0] - cx);
+    for (let k = 1; k < 6; k++) c.lineTo(cx + Math.cos(a0 - k / 6 * Math.PI) * hw, cy + Math.sin(a0 - k / 6 * Math.PI) * hw);
+  };
+  c.moveTo(l[0][0], l[0][1]);
+  for (let i = 1; i < n; i++) c.lineTo(l[i][0], l[i][1]);
+  cap(l[n - 1], r[n - 1]);
+  for (let i = n - 1; i >= 0; i--) c.lineTo(r[i][0], r[i][1]);
+  cap(r[0], l[0]);
+  c.closePath();
+}
+
+Hill.style('gruvbox', {
+  pal: Hill.stops([
+    [0,    { sky: '#EBDBB2', sky2: '#F7D488', sea: '#458588', sea2: '#83A598', foam: '#FBF1C7', hill: '#B8BB26', hill2: '#98971A', ink: '#282828', paper: '#FBF1C7', beam: '#FABD2F', cloud: '#FBF1C7', far: '#A89984', glass: '#83A598' }],
+    [0.2,  { sky: '#F2CF8C', sky2: '#F6B860', sea: '#3F7A80', sea2: '#83A598', foam: '#FBF1C7', hill: '#AEAF24', hill2: '#8F8C19', ink: '#282828', paper: '#FBEBC0', beam: '#FABD2F', cloud: '#FBE6B4', far: '#B88A6A', glass: '#F7D488' }],
+    [0.44, { sky: '#D65D0E', sky2: '#FABD2F', sea: '#356A70', sea2: '#83A598', foam: '#F2DFB4', hill: '#98971A', hill2: '#7A7614', ink: '#282828', paper: '#F6E3B6', beam: '#FABD2F', cloud: '#F4B860', far: '#A85A3A', glass: '#FABD2F' }],
+    [0.7,  { sky: '#8F3F71', sky2: '#CC241D', sea: '#2A4A50', sea2: '#5F8A86', foam: '#D5C4A1', hill: '#606114', hill2: '#4E4D0D', ink: '#1D2021', paper: '#EBDBB2', beam: '#FABD2F', cloud: '#B16286', far: '#5C3450', glass: '#FABD2F' }],
+    [1,    { sky: '#282828', sky2: '#3C3836', sea: '#253A3C', sea2: '#458588', foam: '#A89984', hill: '#3F400D', hill2: '#343309', ink: '#1D2021', paper: '#D5C4A1', beam: '#FABD2F', cloud: '#504945', far: '#32302F', glass: '#FABD2F' }],
+  ]),
+  C: {
+    wool: hex('#FBF1C7'), yolk: hex('#FABD2F'), duck: hex('#FABD2F'), beak: hex('#FE8019'), pink: hex('#D3869B'),
+    monster: hex('#D3869B'), chimney: hex('#CC241D'), roof: hex('#3C3836'), door: hex('#458588'), skin: hex('#F2C48D'),
+    navy: hex('#3C3836'), wood: hex('#D65D0E'), steel: hex('#BDAE93'), moon: hex('#FABD2F'), tile: hex('#282828'),
+    huts: ['#CC241D', '#458588', '#D79921', '#98971A'].map(hex),
+    kraft: hex('#D79921'), kraftLit: hex('#FABD2F'), kraftDark: hex('#B57614'), tape: hex('#FB4934'), sprout: hex('#98971A'),
+  },
+  ribbon: brush, pen: 1.6, boil: 0, reg: [3.4, 2.6],
+  hand: '"Rockwell", "Cooper Black", "Cooper", serif',
+  after(s, c) { c.fillStyle = GRAIN; c.fillRect(0, 0, s.g.W, s.g.H); },
+  draw: {
+    // the sea goes darker in dots as it comes toward you
+    sky(base, s, c) {
+      base(s, c);
+      const g = s.g, sea = g.H - g.horizon;
+      [DOTS.light, DOTS.mid, DOTS.deep].forEach((d, i) => { c.fillStyle = d; c.fillRect(0, g.horizon + sea * (0.36 + i * 0.22), g.W, sea * 0.22); });
+    },
+    // the striped sunset: a disc in yellow, orange and red, cut by bands of sky that widen as it goes down
+    sun(base, s, c) {
+      const g = s.g, u = g.u, P = s.P, sun = s.sunPos();
+      if (sun.a <= 0) return;
+      const r = 40 * u, sz = r * 2.4, inks = [YELLOW, YELLOW, ORANGE, ORANGE, RED, RED, RED];
+      c.save(); c.beginPath(); c.rect(0, 0, g.W, g.horizon); c.clip();
+      c.globalAlpha = sun.a;
+      s.sprite('sun', sz, sz, sun.x, sun.y, x => {
+        x.save(); poly(x, ellipse(0, 0, r, r, 64)); x.clip();
+        const h = r * 2 / inks.length;
+        inks.forEach((col, i) => {
+          const gap = Math.max(0, i - 2) * 0.13 * h;
+          x.fillStyle = rgba(mul(col, P.paper)); x.fillRect(-r, -r + i * h + gap, r * 2, h - gap + 0.5);
+        });
+        x.restore();
+      });
+      c.restore();
+    },
+    // the light in bands of yellow and orange, like the stripes under the bar
+    beam(base, s, c) {
+      const g = s.g, P = s.P, I = s.beamI(), pw = s.lampPower(), { L, len, a0, a1 } = beamPoly(s);
+      if (len < 10 || pw < 0.02) return;
+      const night = smooth(0.3, 0.8, s.d), al = (0.86 + 0.12 * night * I) * pw;
+      const fan = (b0, b1) => { const f = [[L.x, L.y]]; for (let i = 0; i <= 8; i++) { const a = lerp(b0, b1, i / 8); f.push([L.x + Math.cos(a) * len, L.y + Math.sin(a) * len]); } return f; };
+      const all = fan(a0, a1);
+      poly(c, all); c.fillStyle = rgba(mix(P.beam, CREAM, night * 0.3), al); c.fill();
+      for (const k of [1, 3]) { poly(c, fan(lerp(a0, a1, k / 5), lerp(a0, a1, (k + 1) / 5))); c.fillStyle = rgba(ORANGE, al); c.fill(); }
+      c.save(); poly(c, all); c.clip(); c.setTransform(s.dpr, 0, 0, s.dpr, 0, 0);
+      c.strokeStyle = rgba(CREAM, 0.9 * pw); waveScallops(s, c, true);
+      c.restore();
+      const r0 = g.lh.er * 2.3;
+      c.beginPath();
+      for (const a of [a0, a1]) brush(c, dens([[L.x + Math.cos(a) * r0, L.y + Math.sin(a) * r0], [L.x + Math.cos(a) * len, L.y + Math.sin(a) * len]], 9), Hill.DET);
+      if (s.beam.len < 0.85) brush(c, dens(all.slice(1), 6), Hill.DET);
+      c.globalAlpha = 0.3 + 0.7 * pw; c.fillStyle = Hill.INK; c.fill(); c.globalAlpha = 1;
+    },
+    cloud(base, s, c, cl, name, legs) {
+      const g = s.g, u = g.u, P = s.P, p = s.cloudXY(cl), w = cl.w, { DET, TEX } = Hill;
+      if (p.x < -w || p.x > g.W + w) return;
+      if (legs) {
+        // four legs, walking when it walks
+        const walk = s.reduced ? 0 : s.t * 5;
+        c.beginPath();
+        [-0.24, -0.11, 0.1, 0.23].forEach((lx, i) => {
+          const x = p.x + lx * w * (cl.dir < 0 ? -1 : 1), sw = Math.sin(walk + i * 1.7 + (i % 2) * Math.PI) * 2.6 * u;
+          brush(c, [[x, p.y - 4 * u], [x + sw * 0.5, p.y + 5 * u], [x + sw, p.y + 12 * u]], DET * 1.25, i);
+        });
+        c.fillStyle = Hill.INK; c.fill();
+      }
+      s.sprite(name + (legs && cl.dir < 0 ? 'L' : ''), w * 1.5, w * 0.9, p.x, p.y - w * 0.12, x => {
+        // round puffs standing on a flat base
+        const R = rng(cl.seed), n = 3 + ((R() * 2) | 0), by = w * 0.12, puffs = [], top = [];
+        for (let i = 0; i < n; i++) { const fx = (i + 0.5) / n; puffs.push([-w / 2 + fx * w, w * (0.2 + R() * 0.08) * (1.25 - Math.abs(fx - 0.5) * 0.9)]); }
+        for (let i = 0; i <= 72; i++) {
+          const px = lerp(-w * 0.62, w * 0.62, i / 72);
+          let py = by;
+          for (const [bx, r] of puffs) if (Math.abs(px - bx) < r) py = Math.min(py, by - Math.sqrt(r * r - (px - bx) ** 2));
+          if (py < by) top.push([px, py]);
+        }
+        const pts = dens([...top, [top.at(-1)[0], by], [top[0][0], by]], 4, true);
+        Hill.print(x, pts, P.cloud);
+        // dots along its underside
+        x.save(); poly(x, pts, true, Hill.REGX, Hill.REGY); x.clip(); x.fillStyle = DOTS.light; x.fillRect(-w, by - w * 0.09, w * 2, w * 0.1); x.restore();
+        x.beginPath(); Hill.loop(x, pts, DET, cl.seed % 13);
+        // a curl inside each puff, where it catches the light
+        puffs.forEach(([bx, r], i) => brush(x, ellipse(bx, by, r * 0.66, r * 0.66, 10, Math.PI * 1.18, Math.PI * 1.48), TEX, i));
+        x.fillStyle = Hill.INK; x.fill();
+      });
+    },
+    // the shady flank of the hill in dots, middling on it and light in a band round it that thins out into the lit
+    // side, in place of the felt pen's hatching
+    hill(base, s, c) {
+      base(s, c);
+      const g = s.g, { W, H, u } = g, T = g.lh, sh = g.ridge.filter(([x]) => x < T.x - T.wB * 2), n = sh.length, x0 = g.shore?.[0][0];
+      // f times as wide as the felt pen's: a cliff band above the shore, or the side turning away from the light
+      const flank = f => g.shore
+        ? [...g.shore, ...g.shore.slice().reverse().map(([x, y]) => [x + 4 * u, y - (8 + (x - x0) / W * 26) * u * f])]
+        : [...sh, ...sh.map(([x, y], i) => { const k = smooth(0, 0.35, (n - 1 - i) / n) * f; return [x + (34 + (H - y) * 0.12) * u * k, y + (16 + (H - y) * 0.05) * u * k]; }).reverse()];
+      c.save(); poly(c, flank(1), true, Hill.REGX, Hill.REGY); c.rect(0, 0, W, H); c.clip('evenodd');
+      shade(c, flank(2.2), DOTS.light);
+      c.restore();
+      shade(c, flank(1), DOTS.mid);
+    },
+    // the tower's shady side in dots, in place of the felt pen's hatching
+    tower(base, s, c) {
+      base(s, c);
+      const T = s.g.lh, half = k => lerp(T.wB, T.wT, k) / 2, Sp = [], Rp = [];
+      for (let i = 0; i <= 20; i++) { const k = i / 20; Sp.push([T.x + half(k) * 0.3, T.base - T.h * k]); Rp.push([T.x + half(k), T.base - T.h * k]); }
+      shade(c, [...Sp, ...Rp.reverse()], DOTS.mid);
+    },
+    // grass along the ridge in fat blades, leaning with the wind and away from the pointer
+    tufts(base, s, c) {
+      const g = s.g, u = g.u;
+      c.beginPath();
+      for (const b of g.tufts) {
+        let a = s.reduced ? 0.12 : Math.sin(s.t * 1.6 + b.p) * 0.14 * (0.6 + s.windAmb) + s.windTotal * 0.36;
+        if (s.ptr.on && !s.reduced) {
+          const dx = b.x - s.ptr.x, dy = b.y - s.ptr.y, r = 95 * u, d2 = dx * dx + dy * dy;
+          if (d2 < r * r) a += Math.sign(dx || 1) * 1.05 * (1 - Math.sqrt(d2) / r);
+        }
+        a = clamp(a, -1.3, 1.3);
+        for (let k = 0; k < b.n; k++) {
+          const da = (k - (b.n - 1) / 2) * 0.5, l = b.l * (k === 1 ? 1.1 : 0.8), x = b.x + (k - (b.n - 1) / 2) * 2.6 * u, y = b.y + 1.5 * u;
+          const tx = x + Math.sin(a + da) * l, ty = y - Math.cos(a + da) * l, w = 2 * g.pw;
+          c.moveTo(x - w, y); c.quadraticCurveTo(lerp(x, tx, 0.5) - w * 0.5, lerp(y, ty, 0.55), tx, ty); c.quadraticCurveTo(lerp(x, tx, 0.5) + w * 0.5, lerp(y, ty, 0.55), x + w, y); c.closePath();
+        }
+      }
+      c.fillStyle = Hill.INK; c.fill();
+    },
+    // the shadow of the eaves across the top of the wall
+    cottage(base, s, c) {
+      base(s, c);
+      const k = s.g.cot, x0 = k.x - k.w / 2, y0 = k.base - k.h;
+      shade(c, [[x0, y0], [x0 + k.w, y0], [x0 + k.w, y0 + k.h * 0.18], [x0, y0 + k.h * 0.18]], DOTS.mid);
+    },
+    sheep(base, c, u, wool, o, t) { base(c, u, wool, o, t); belly(c, 0, -16 * u, 14 * u, 9.5 * u, -14 * u); },
+    cow(base, c, u, white, P, o, t) { base(c, u, white, P, o, t); belly(c, -0.75 * u, -18 * u, 17.5 * u, 8 * u, -15 * u); },
+    duck(base, c, u, yellow, P, o, t) { base(c, u, yellow, P, o, t); belly(c, -1.5 * u, -5.5 * u, 12 * u, 5.5 * u, -5 * u); },
+  },
+});
+})();
diff --git a/site/styles/swiss.js b/site/styles/swiss.js
new file mode 100644
index 00000000..14c9e38d
--- /dev/null
+++ b/site/styles/swiss.js
@@ -0,0 +1,317 @@
+/* Lighthouse Hill in a Swiss travel poster, for Léman (see the styles in scene.js).
+   A lithograph of the 1930s: no outlines, flat planes lit from the upper left, each form with its lit side and its
+   shady side, under an airbrushed sky. Lake Geneva in flat bands with a few reflections, the Alps across the water,
+   and the lettering in bold condensed capitals. */
+(() => {
+'use strict';
+const { TAU, clamp, lerp, smooth, hash, rng, hex, mix, mul, rgba, stops, poly, ellipse, dens, dot, cloudPts, view, afloat, beamPoly, THEMES, TEX, DET, DIVE_GAP, SHORE, FAR } = Hill;
+const print = Hill.felt.print;
+
+// the letters: Helvetica's bold condensed where the system has it
+document.fonts.add(new FontFace('Leman Poster', 'local("HelveticaNeue-CondensedBold"), local("AvenirNextCondensed-Bold"), local("ArialNarrow-Bold")'));
+
+/* The hours: teal by day, a warm horizon at dusk, a deep teal-blue night with the snow pale under the moon */
+const pal = stops([
+  [0,    { sky: '#3F9DB0', sky2: '#DCEBE8', sea: '#0E7C7B', sea2: '#8ED8CC', foam: '#EEF6F2', hill: '#9DC36A', hill2: '#4E8A6A', ink: '#12343B', paper: '#FBF4E4', beam: '#FFE08A', cloud: '#FBF7EE', far: '#8DB9BD', glass: '#BFE3DF' }],
+  [0.2,  { sky: '#4F98AE', sky2: '#F1E2C6', sea: '#147679', sea2: '#9ADACB', foam: '#F4EEE2', hill: '#96BB64', hill2: '#4A8467', ink: '#12343B', paper: '#FBEFD9', beam: '#FFDD80', cloud: '#FAF0E0', far: '#93B3BA', glass: '#F1E2C6' }],
+  [0.44, { sky: '#2F7189', sky2: '#F4B27E', sea: '#1A5E69', sea2: '#F0B184', foam: '#F7DCC2', hill: '#729B5C', hill2: '#3D6B5D', ink: '#12343B', paper: '#F8E1C6', beam: '#FFD66B', cloud: '#F4CDAE', far: '#8C8E9E', glass: '#FFC98A' }],
+  [0.7,  { sky: '#174759', sky2: '#4F7F86', sea: '#123C47', sea2: '#5E9C98', foam: '#B6D2CC', hill: '#3E6757', hill2: '#274A44', ink: '#0B262C', paper: '#D9E5E1', beam: '#FFE07A', cloud: '#6E9399', far: '#3A6670', glass: '#FFE07A' }],
+  [1,    { sky: '#0A2430', sky2: '#1C4B57', sea: '#0A2129', sea2: '#4E9A95', foam: '#9FC9C2', hill: '#264B43', hill2: '#173630', ink: '#071B20', paper: '#CFE2DD', beam: '#FFE58A', cloud: '#2F5862', far: '#2B5561', glass: '#FFE58A' }],
+]);
+
+// the shady side of a colour: toward the deep teal of the ink, as the printer overprints it
+const dim = (P, col, k = 0.3) => mix(col, P.ink, k);
+
+/* No outlines, and the lines that are features are thin flat shapes, one width all along */
+function flat(c, pts, w, sd, o = {}) {
+  if (o.outline) return;
+  const n = pts.length, hw = w * Hill.PW * 0.5, l = [], r = [];
+  for (let i = 0; i < n; i++) {
+    const a = pts[i ? i - 1 : 0], b = pts[i < n - 1 ? i + 1 : i], tl = Math.hypot(b[0] - a[0], b[1] - a[1]) || 1;
+    const nx = -(b[1] - a[1]) / tl * hw, ny = (b[0] - a[0]) / tl * hw;
+    l.push([pts[i][0] + nx, pts[i][1] + ny]); r.push([pts[i][0] - nx, pts[i][1] - ny]);
+  }
+  c.moveTo(l[0][0], l[0][1]);
+  for (const p of l) c.lineTo(p[0], p[1]);
+  for (let i = n - 1; i >= 0; i--) c.lineTo(r[i][0], r[i][1]);
+  c.closePath();
+}
+
+/* The fill, flat; a rounded form (more than a few corners: a quad is a plane already) also gets its shady side, the
+   ink overprinted where the same form a little up and to the left (on the screen) wouldn't cover it */
+function plane(c, pts, col) {
+  poly(c, pts); c.fillStyle = typeof col === 'string' ? col : rgba(col); c.fill();
+  if (pts.length < 9) return;
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (const [x, y] of pts) { x0 = Math.min(x0, x); y0 = Math.min(y0, y); x1 = Math.max(x1, x); y1 = Math.max(y1, y); }
+  const d = Math.min(x1 - x0, y1 - y0) * 0.16, dx = d * 0.5 * Math.sign(c.getTransform().a);
+  c.save(); c.clip();
+  c.beginPath(); c.rect(x0, y0, x1 - x0, y1 - y0); c.moveTo(pts[0][0] - dx, pts[0][1] - d);
+  for (const [x, y] of pts) c.lineTo(x - dx, y - d);
+  c.globalAlpha *= 0.2; c.fillStyle = Hill.INK; c.fill('evenodd');
+  c.restore();
+}
+
+/* The Alps across the lake: peaks of the range, the tallest by the lake's end, and none where the sun goes down into
+   the water */
+function alps(g) {
+  const { W, u, horizon: hz, top } = g, R = rng(5), sky = hz - top, r = 38 * u, a = g.sun.x - r * 1.25, b = g.sun.x + r * 1.25, peaks = [];
+  for (let x = -60 * u; x < W + 60 * u; x += (45 + R() * 80) * u) {
+    const h = sky * (0.075 + R() * 0.09) * (1 + 0.6 * Math.exp(-(((x - a) / (160 * u)) ** 2)));
+    let wl = h * (1.3 + R() * 0.8), wr = h * (1.4 + R() * 0.9);
+    if (x > a - 8 * u && x < b + 8 * u) continue;
+    if (x < a) wr = Math.min(wr, a - x); else wl = Math.min(wl, x - b);
+    peaks.push({ x, h, wl, wr, sd: R() });
+  }
+  return { peaks: peaks.sort((p, q) => q.h - p.h), a, b };
+}
+// the sky above them, for what rises and sets behind them
+function behindAlps(s, c) {
+  const g = s.g, hz = g.horizon, { peaks } = alps(g), line = [[g.W, 0], [0, 0]];
+  for (let x = 0; x < g.W + 3; x += 3) {
+    let y = hz;
+    for (const p of peaks) y = Math.min(y, hz - p.h + (x < p.x ? (p.x - x) / p.wl : (x - p.x) / p.wr) * p.h);
+    line.push([x, y]);
+  }
+  poly(c, line); c.clip();
+}
+
+/* The lake's reflections: short flat strokes in rows to the horizon, the rows closer together and sparser the farther
+   off, coming toward you as you dive (the rows are the felt pen's scallops': see waveScallops) */
+const ROW = 0.02;
+function glints(s, c, col) {
+  const g = s.g, { W, H, u } = g, hz = g.horizon, sea = H - hz, go = s.dive * DIVE_GAP / SHORE;
+  c.fillStyle = col;
+  for (let k = Math.ceil((1 + go) / ROW); ;) {
+    const rel = 1 / (k * ROW - go);
+    if (rel < 0.012) break;
+    const gap = 3.2 * sea * rel ** 0.375 / g.rows, dy = sea * ROW * rel * rel, step = 2 ** Math.max(0, Math.ceil(Math.log2(gap / dy)));
+    if (k % step) { k += step - k % step; continue; }
+    const y = hz + sea * rel, t = (0.9 + 2.6 * rel) * u, l = (12 + 90 * rel) * u;
+    c.globalAlpha = k % (step * 2) ? clamp(dy * step / gap - 1) : 1;
+    for (let j = 0; j < 4; j++) {
+      const f = hash(k * 7.31 + j * 1.93);
+      if (f < 0.35) continue;
+      c.fillRect(hash(k * 3.17 + j * 5.3) * (W + l) - l, y, l * (0.4 + f), t);
+    }
+    k += step;
+  }
+  c.globalAlpha = 1;
+}
+
+Hill.style('leman', {
+  pal,
+  C: {
+    wool: hex('#FBF4E4'), yolk: hex('#F2B33D'), duck: hex('#F2C230'), beak: hex('#E07A2F'), pink: hex('#EFA3A8'),
+    monster: hex('#E98FB0'), chimney: hex('#B9573A'), roof: hex('#C8643B'), door: hex('#0E7C7B'), navy: hex('#12343B'),
+    tile: hex('#12343B'), moon: hex('#F6E9BE'), sprout: hex('#5E9A45'),
+    huts: ['#C8643B', '#0E7C7B', '#E8B04B', '#5CC5B8'].map(hex),
+  },
+  ribbon: flat, print: plane, pen: 0.9, boil: 0, reg: [0, 0],
+  // poster lettering is in capitals
+  hand: '"Leman Poster", "Helvetica Neue", "Avenir Next Condensed", "Arial Narrow", sans-serif', caps: true,
+  draw: {
+    // an airbrushed sky down to the horizon, and the lake in flat bands, lightest far off where it takes the sky
+    sky(base, s, c) {
+      const g = s.g, P = s.P, hz = g.horizon, sea = g.H - hz, air = c.createLinearGradient(0, g.top, 0, hz);
+      air.addColorStop(0, rgba(P.sky)); air.addColorStop(0.55, rgba(mix(P.sky, P.sky2, 0.35))); air.addColorStop(1, rgba(P.sky2));
+      c.fillStyle = air; c.fillRect(0, 0, g.W, hz + 2);
+      for (const [f, k] of [[1, 0], [0.3, 0.08], [0.13, 0.18], [0.055, 0.3], [0.02, 0.46]]) { c.fillStyle = rgba(mix(P.sea, P.sky2, k)); c.fillRect(0, hz, g.W, sea * f); }
+      // the snow of the Alps upside down in the far water, in broken strokes
+      c.fillStyle = rgba(mix(P.paper, P.sea, 0.5), 0.8);
+      for (const p of alps(g).peaks) for (let i = 0; i < 4; i++) {
+        const d = p.h * 0.45 * (0.55 + i * 0.12), w = (p.wl + p.wr) * (1 - d / (p.h * 0.45)), x = p.x - w / 2 + (p.wr - p.wl) * 0.2, cut = hash(p.sd * 9 + i) * w;
+        c.fillRect(x, hz + d, cut - 1.5 * g.u, p.h * 0.035); c.fillRect(x + cut + 1.5 * g.u, hz + d, w - cut - 1.5 * g.u, p.h * 0.035);
+      }
+    },
+    // the Alps across the water, each peak a lit face and a shady one, snow down to a ragged line; under them, the far
+    // shore, low and dark, open where the lake goes on to the horizon
+    band(base, s, c) {
+      const g = s.g, { W, u } = g, P = s.P, hz = g.horizon, { peaks, a, b } = alps(g);
+      const snow = [P.paper, mix(P.paper, P.sky, 0.42)], rock = [mix(P.far, P.sky2, 0.3), dim(P, P.far, 0.38)];
+      for (const p of peaks) {
+        const top = [p.x, hz - p.h], spine = [p.x + p.h * 0.22, hz + 1], faces = [[top, [p.x - p.wl, hz + 1], spine], [top, spine, [p.x + p.wr, hz + 1]]];
+        const R = rng(p.sd * 1e6), cap = [[p.x - p.wl, hz - p.h * 2]];
+        for (let i = 0; i <= 12; i++) cap.push([lerp(p.x - p.wl, p.x + p.wr, i / 12), hz - p.h * (i % 2 ? 0.62 + R() * 0.1 : 0.36 + R() * 0.16)]);
+        cap.push([p.x + p.wr, hz - p.h * 2]);
+        faces.forEach((f, i) => { print(c, f, rock[i]); c.save(); poly(c, f); c.clip(); print(c, cap, snow[i]); c.restore(); });
+      }
+      const shore = (x0, x1) => {
+        const pts = [[x0, hz + 1]];
+        for (let x = x0; x <= x1; x += 8 * u) pts.push([x, hz - (2.5 + 1.8 * Math.sin(x * 0.013) + 1.2 * Math.sin(x * 0.041)) * u * smooth(0, 30 * u, Math.min(x - x0, x1 - x))]);
+        pts.push([x1, hz + 1]);
+        print(c, pts, dim(P, P.far, 0.6));
+      };
+      shore(-10, a - 6 * u); shore(b + 6 * u, W + 10);
+    },
+    stars(base, s, c) { c.save(); behindAlps(s, c); base(s, c); c.restore(); },
+    sun(base, s, c) { c.save(); behindAlps(s, c); base(s, c); c.restore(); },
+    moon(base, s, c) { c.save(); behindAlps(s, c); base(s, c); c.restore(); },
+    // the lamp's halo at night: flat rings of light round the lantern, fainter outward
+    halo(base, s, c) {
+      const P = s.P, L = s.g.lamp, er = s.g.lh.er, f = s.beam.flash, k = Math.max(smooth(0.35, 0.85, s.d) * s.beamI(), f * 0.9) * s.lampOn() * s.lampPower();
+      if (k < 0.02) return;
+      for (const [r, a] of [[3.6 + f * 1.4, 0.14], [2.7 + f, 0.2], [1.75, 0.75]]) dot(c, L.x, L.y, er * r, rgba(mix(P.beam, hex('#FFFFFF'), 0.25), clamp(k * a * 1.4)));
+    },
+    waves(base, s, c) { glints(s, c, rgba(s.P.sea2, 0.75)); },
+    // an island's reflection on the lake (or the headland's): under its shore, its hill and its tower upside down in
+    // broken strokes, and the lamp's light on the water; then rings where things land
+    ripples(base, s, c) {
+      const g = s.g, u = g.u, P = s.P, v = s.cur.view;
+      if (g.shore) {
+        const T = g.lh, L = g.lamp, sl = g.shore, step = 3.2 * u / v.s, K = 0.8, xs = [];
+        view(s, c, v); c.globalAlpha = smooth(FAR, FAR * 1.6, v.s);
+        for (let x = sl[0][0]; x < sl.at(-1)[0]; x += step * 1.6) { const yw = s.shoreY(x); xs.push([x, yw, yw + (yw - s.ridgeY(x)) * K]); }
+        c.fillStyle = rgba(dim(P, P.sea, 0.35));
+        for (let y = Math.min(...xs.map(p => p[1])), i = 0; ; y += step, i++) {
+          let x0 = null, any = false;
+          for (const [x, yw, yd] of xs) {
+            const on = y > yw && y < yd && hash(i * 13.1 + x * 0.071) > 0.12;
+            any ||= y < yd;
+            if (on && x0 == null) x0 = x;
+            if (!on && x0 != null) { c.fillRect(x0, y, x - x0, step * 0.55); x0 = null; }
+          }
+          if (x0 != null) c.fillRect(x0, y, xs.at(-1)[0] - x0, step * 0.55);
+          if (!any) break;
+        }
+        // the tower, from its foot down: white and the theme's stripes, broken across
+        const th = THEMES[g.theme || s.theme], yw = s.shoreY(T.x);
+        for (let y = yw + (yw - T.base) * K, i = 0; y < yw + (yw - T.top) * K; y += step, i++) {
+          const k = (T.base - (yw - (y - yw) / K)) / T.h, hw = lerp(T.wB, T.wT, k) / 2, cut = (hash(i * 3.7) - 0.5) * hw;
+          const j = Math.floor(k * 6);
+          c.fillStyle = rgba(mix(j % 2 ? hex(th.stripes[(j >> 1) % th.stripes.length]) : P.paper, P.sea, 0.4));
+          c.fillRect(T.x - hw, y, hw + cut - step * 0.4, step * 0.55); c.fillRect(T.x + cut + step * 0.4, y, hw - cut - step * 0.4, step * 0.55);
+        }
+        // the lamp: a glade of light strokes where it shows in the water
+        const a = s.lampPower() * s.lampOn() * (0.3 + 0.7 * smooth(0.3, 0.8, s.d)), ly = yw + (yw - L.y) * K, er = T.er;
+        c.fillStyle = rgba(P.beam, a);
+        if (a >= 0.02) for (let j = -4; j <= 6; j++) {
+          const w = er * (2.4 - Math.abs(j) * 0.3) * (0.7 + 0.6 * hash(j + Math.floor(s.t * 3))), y = ly + j * er * 0.42;
+          c.fillRect(L.x - w / 2, y, w, step * 0.6);
+        }
+        c.globalAlpha = 1;
+      }
+      for (const r of s.ripples) {
+        if (!afloat(s, c, r.y)) continue;
+        const age = s.t - r.t0, rx = 8 * u + age * 70 * u;
+        c.beginPath(); c.ellipse(r.x, r.y, rx, rx * 0.3, 0, 0, TAU); c.lineWidth = 1.6 * g.pw; c.strokeStyle = rgba(P.foam, clamp(1 - age / 2.2) * r.a); c.stroke();
+      }
+    },
+    // the light: a flat fan with a brighter core, and the lake's strokes under it lit
+    beam(base, s, c) {
+      const P = s.P, I = s.beamI(), pw = s.lampPower(), { L, len, a0, a1 } = beamPoly(s);
+      if (len < 10 || pw < 0.02) return;
+      const night = smooth(0.3, 0.8, s.d), col = mix(P.beam, hex('#FFF6C2'), night * 0.45);
+      const fan = k => { const m = (a0 + a1) / 2, out = [[L.x, L.y]]; for (let i = 0; i <= 12; i++) { const a = m + (a1 - m) * k * (i / 6 - 1); out.push([L.x + Math.cos(a) * len, L.y + Math.sin(a) * len]); } return out; };
+      poly(c, fan(1)); c.fillStyle = rgba(col, (0.8 + 0.14 * night * I) * pw); c.fill();
+      poly(c, fan(0.4)); c.fillStyle = rgba(mix(col, hex('#FFFFFF'), 0.45), 0.85 * pw); c.fill();
+      c.save(); poly(c, fan(1)); c.clip(); c.setTransform(s.dpr, 0, 0, s.dpr, 0, 0);
+      glints(s, c, rgba(mix(col, hex('#FFFFFF'), 0.5), 0.95 * pw));
+      c.restore();
+    },
+    // a cloud lit from above on the left, its underside in shade
+    cloud(base, s, c, cl, name, legs) {
+      const g = s.g, u = g.u, P = s.P, p = s.cloudXY(cl), w = cl.w;
+      if (p.x < -w || p.x > g.W + w) return;
+      if (legs) {
+        const walk = s.reduced ? 0 : s.t * 5, feet = [];
+        c.beginPath();
+        [-0.24, -0.11, 0.1, 0.23].forEach((lx, i) => {
+          const x = p.x + lx * w * (cl.dir < 0 ? -1 : 1), sw = Math.sin(walk + i * 1.7 + (i % 2) * Math.PI) * 2.6 * u;
+          flat(c, [[x, p.y - 4 * u], [x + sw * 0.5, p.y + 5 * u], [x + sw, p.y + 12 * u]], DET * 1.25);
+          feet.push([x + sw, p.y + 13 * u]);
+        });
+        c.fillStyle = Hill.INK; c.fill();
+        for (const [fx, fy] of feet) { c.beginPath(); c.ellipse(fx + 0.6 * u, fy, 2.6 * u, 1.9 * u, 0, 0, TAU); c.fill(); }
+      }
+      s.sprite(name + (legs && cl.dir < 0 ? 'L' : ''), w * 1.3, w * 0.75, p.x, p.y - w * 0.12, x => {
+        const pts = dens(cloudPts(0, w * 0.12, w, cl.seed), 5, true);
+        plane(x, pts, P.cloud);
+        if (legs) {
+          const f = cl.dir < 0 ? -1 : 1;
+          x.beginPath(); flat(x, [[-f * w * 0.5, w * 0.02], [-f * w * 0.57, -w * 0.03], [-f * w * 0.6, w * 0.03]], TEX * 1.3); x.fillStyle = Hill.INK; x.fill();
+        }
+      });
+    },
+    // the hill: the slope down to the water lit, past the top the ground turning away in shade, the cliff over the
+    // shore in shade, and the tower's and the cottage's shadows cast across the grass to the right
+    hill(base, s, c) {
+      const g = s.g, u = g.u, P = s.P, T = g.lh, k = g.cot, rd = g.ridge, top = rd.reduce((a, p) => (p[1] < a[1] ? p : a));
+      print(c, g.hillPoly, P.hill);
+      c.save(); poly(c, g.hillPoly); c.clip();
+      for (const [side, col, f] of [[-1, mix(P.hill, P.paper, 0.2), 0.55], [1, P.hill2, 0.4]]) {
+        const sh = rd.filter(([x]) => side * (x - top[0]) > T.wB * 2);
+        print(c, [...sh, ...sh.map(([x, y]) => [lerp(x, top[0], f), y + Math.abs(top[0] - x) * 0.12]).reverse()], col);
+      }
+      if (g.shore) { const sl = g.shore, x0 = sl[0][0]; print(c, [...sl, ...sl.slice().reverse().map(([x, y]) => [x + 4 * u, y - (8 + (x - x0) / g.W * 26) * u])], P.hill2); }
+      const cast = (x0, x1, y, l, end) => print(c, [[x0, y], [x1, y], [x1 + l * 0.8, y + l * 0.5], [x1 + l * 0.8 - end, y + l * 0.5]], dim(P, P.hill2, 0.12));
+      cast(T.x - T.wB / 2, T.x + T.wB / 2, T.base - 2 * u, T.h * 0.32, T.wT);
+      cast(k.x - k.w / 2, k.x + k.w / 2, k.base - 3 * u, k.h * 1.1, k.w * 0.4);
+      c.restore();
+      // the water's edge, a thin line of foam
+      c.beginPath();
+      flat(c, g.shore ? g.shore.map(([x, y]) => [x, y + 1.5 * u]) : rd.filter(p => p[1] > g.horizon + 3 && p[0] < T.x).map(([x, y]) => [x - 2 * u, y]), 2.2);
+      c.fillStyle = rgba(P.foam); c.fill();
+    },
+    // the cottage: a lit wall with the eaves' shadow under the roof, a roof and a chimney lit on the left
+    cottage(base, s, c) {
+      const g = s.g, u = g.u, P = s.P, k = g.cot, w = k.w, h = k.h, x0 = k.x - w / 2, y0 = k.base - h;
+      const paper = mul(hex('#FFFFFF'), P.paper), night = smooth(0.45, 0.75, s.d), chim = Hill.C.chimney, roof = Hill.C.roof;
+      const chx = x0 + w * 0.68, chw = w * 0.15, cht = y0 - h * 1.45;
+      print(c, [[chx, y0 - h * 0.2], [chx, cht], [chx + chw, cht], [chx + chw, y0 - h * 0.2]], chim);
+      print(c, [[chx + chw * 0.6, y0 - h * 0.2], [chx + chw * 0.6, cht], [chx + chw, cht], [chx + chw, y0 - h * 0.2]], dim(P, chim));
+      print(c, [[chx - 1.5 * u, cht + 2 * u], [chx - 1.5 * u, cht - 1.5 * u], [chx + chw + 1.5 * u, cht - 1.5 * u], [chx + chw + 1.5 * u, cht + 2 * u]], dim(P, chim, 0.45));
+      print(c, [[x0, k.base], [x0, y0], [x0 + w, y0], [x0 + w, k.base]], paper);
+      print(c, [[x0, y0], [x0 + w, y0], [x0 + w, y0 + h * 0.13], [x0, y0 + h * 0.07]], dim(P, paper, 0.22));
+      const L = [x0 - w * 0.12, y0 + 1 * u], A = [x0 + w * 0.5, y0 - h * 0.78], Rt = [x0 + w * 1.12, y0 + 1 * u], M = [x0 + w * 0.5, y0 + 1 * u];
+      print(c, [L, A, M], roof); print(c, [A, Rt, M], dim(P, roof));
+      // the window: four panes, lit at night, the bars between them in the wall's shade
+      const wx = x0 + w * 0.14, wy = y0 + h * 0.24, ww = w * 0.27, wh = h * 0.36, bar = 1.4 * u;
+      print(c, [[wx, wy], [wx + ww, wy], [wx + ww, wy + wh], [wx, wy + wh]], night > 0.5 ? P.beam : P.glass);
+      c.fillStyle = rgba(dim(P, paper, 0.45));
+      c.fillRect(wx + ww / 2 - bar / 2, wy, bar, wh); c.fillRect(wx, wy + wh / 2 - bar / 2, ww, bar); c.fillRect(wx - bar, wy + wh, ww + bar * 2, bar * 1.2);
+      // the door (it opens for the keeper: see the states)
+      const dx = x0 + w * 0.56, dw = w * 0.24, dh = h * 0.66;
+      k.door = { x: dx, y: k.base - dh, w: dw, h: dh };
+      print(c, [[dx, k.base], [dx, k.base - dh], [dx + dw, k.base - dh], [dx + dw, k.base]], mul(Hill.C.door, P.paper));
+      dot(c, dx + dw * 0.78, k.base - dh * 0.48, 1.3 * u + 0.4, Hill.INK);
+    },
+    // the tower: white with the theme's stripes, its right side in shade; dark windows, lit at night
+    tower(base, s, c) {
+      const g = s.g, u = g.u, P = s.P, T = g.lh, th = THEMES[g.theme || s.theme], paper = mul(hex('#FFFFFF'), P.paper);
+      const half = k => lerp(T.wB, T.wT, k) / 2, yAt = k => T.base - T.h * k, bands = 6, sag = T.wB * 0.09;
+      const side = f => { const out = []; for (let i = 0; i <= 20; i++) out.push([T.x + f * half(i / 20), yAt(i / 20)]); return out; };
+      print(c, [...side(-1), ...side(1).reverse()], paper);
+      const edge = k => { const hw = half(k), out = []; for (let i = 0; i <= 12; i++) { const f = i / 12 * 2 - 1; out.push([T.x + f * hw, yAt(k) - sag * (1 - f * f)]); } return out; };
+      let n = 0;
+      for (let j = 1; j < bands; j += 2) {
+        const hi = j + 1 >= bands ? [[T.x + half(1), yAt(1)], [T.x - half(1), yAt(1)]] : edge((j + 1) / bands).reverse();
+        print(c, [...edge(j / bands), ...hi], mul(hex(th.stripes[n++ % th.stripes.length]), P.paper));
+      }
+      print(c, [...side(0.28), ...side(1).reverse()], rgba(P.ink, 0.3));
+      const night = smooth(0.45, 0.75, s.d), glass = night > 0.5 ? P.beam : P.ink;
+      for (const k of [0.25, 0.58]) { const y = yAt(k), w = T.wB * 0.22, h = T.er * 0.75; print(c, [[T.x - w / 2, y - h / 2], [T.x + w / 2, y - h / 2], [T.x + w / 2, y + h / 2], [T.x - w / 2, y + h / 2]], glass); }
+      const dw = T.wB * 0.32, dh = T.wB * 0.5;
+      print(c, [[T.x - dw / 2, T.base], ...ellipse(T.x, T.base - dh + dw / 2, dw / 2, dw / 2, 10, Math.PI, TAU), [T.x + dw / 2, T.base]], P.ink);
+      // the gallery: a dark deck the eye sits on, lit along its top
+      const gw = T.wT * 0.95, gy = T.top;
+      print(c, [[T.x - gw, gy + 1 * u], [T.x - gw * 1.05, gy - T.gal * 0.42], [T.x + gw * 1.05, gy - T.gal * 0.42], [T.x + gw, gy + 1 * u]], P.ink);
+      print(c, [[T.x - gw * 1.05, gy - T.gal * 0.42], [T.x + gw * 1.05, gy - T.gal * 0.42], [T.x + gw * 1.04, gy - T.gal * 0.3], [T.x - gw * 1.04, gy - T.gal * 0.3]], dim(P, paper, 0.5));
+    },
+    // grass in a darker green than the hill, not in ink
+    tufts(base, s, c) { base(s, c); c.fillStyle = rgba(dim(s.P, s.P.hill2, 0.25)); c.fill(); },
+    // smoke in round flat puffs, lit on the left
+    smoke(base, s, c) {
+      if (s.reduced) return;
+      const g = s.g, u = g.u, P = s.P, k = g.cot, x0 = k.x - k.w / 2 + k.w * 0.755, y0 = k.base - k.h * 2.5;
+      for (let i = 0; i < 3; i++) {
+        const a = (s.t * 0.22 + i / 3) % 1, x = x0 + s.windTotal * 50 * u * a + Math.sin(a * 6 + i) * 3 * u, y = y0 - 6 * u - a * 46 * u, r = (2.5 + a * 6) * u;
+        c.globalAlpha = 1 - smooth(0.6, 1, a);
+        dot(c, x + r * 0.2, y + r * 0.15, r, dim(P, P.cloud, 0.25)); dot(c, x - r * 0.1, y - r * 0.1, r * 0.82, P.cloud);
+      }
+      c.globalAlpha = 1;
+    },
+  },
+
+});
+})();
diff --git a/site/styles/vector.js b/site/styles/vector.js
new file mode 100644
index 00000000..8429f559
--- /dev/null
+++ b/site/styles/vector.js
@@ -0,0 +1,372 @@
+/* Lighthouse Hill on a vector screen, for Phosphor (see the styles in scene.js): by night an amber vector monitor, one
+   thin glowing beam for every line, the shapes black inside so they hide what's behind them, scanlines over it all
+   and the light a radar's sweep; by day the same lines on a pen plotter, brown and amber ink on cream, hatched for
+   shade. The screen comes on with the hour. */
+(() => {
+const { lerp, smooth, hash, hex, rgba, angDiff, poly, ellipse, curve, dens, edges, beamPoly, waveScallops, hatGeom, head, joyAt, napEye, dot, shape, THEMES, TAU, DET, TEX } = Hill;
+
+// what hides what's behind a shape: the screen, or the paper, at this hour (each frame, and for each island)
+let screen = '#0A0703';
+const glowAt = d => smooth(0.45, 0.9, d);
+
+/* The beam (or the pen) at one width all along, round at both ends: the outline, for the caller to fill */
+function line(c, pts) {
+  const n = pts.length, h = 0.62 * Hill.PW;
+  if (n < 2) return;
+  const A = [], B = [];
+  for (let i = 0; i < n; i++) {
+    const a = pts[i > 0 ? i - 1 : 0], b = pts[i < n - 1 ? i + 1 : n - 1], l = Math.hypot(b[0] - a[0], b[1] - a[1]) || 1;
+    const tx = (b[0] - a[0]) / l * h, ty = (b[1] - a[1]) / l * h, [x, y] = pts[i];
+    A.push([x + ty, y - tx]); B.push([x - ty, y + tx]);
+  }
+  const e0 = Math.atan2(pts[1][1] - pts[0][1], pts[1][0] - pts[0][0]), e1 = Math.atan2(pts[n - 1][1] - pts[n - 2][1], pts[n - 1][0] - pts[n - 2][0]);
+  c.moveTo(A[0][0], A[0][1]);
+  for (let i = 1; i < n; i++) c.lineTo(A[i][0], A[i][1]);
+  c.arc(pts[n - 1][0], pts[n - 1][1], h, e1 - Math.PI / 2, e1 + Math.PI / 2);
+  for (let i = n - 1; i >= 0; i--) c.lineTo(B[i][0], B[i][1]);
+  c.arc(pts[0][0], pts[0][1], h, e0 + Math.PI / 2, e0 + Math.PI * 1.5);
+  c.closePath();
+}
+/* A shape is only its outline: inside, the screen (or the paper) */
+function blank(c, pts) { poly(c, pts); c.fillStyle = screen; c.fill(); }
+
+/* Parallel strokes across the path on the canvas, `gap` apart and tilted by `a`, inside `box`: the plotter's shading,
+   and the screen's */
+function hatch(c, box, gap, a, col) {
+  const [x0, y0, x1, y1] = box, cx = (x0 + x1) / 2, cy = (y0 + y1) / 2, r = Math.hypot(x1 - x0, y1 - y0) / 2, ca = Math.cos(a), sa = Math.sin(a);
+  c.save(); c.clip(); c.beginPath();
+  for (let k = -r; k <= r; k += gap) { c.moveTo(cx - ca * r - sa * k, cy - sa * r + ca * k); c.lineTo(cx + ca * r - sa * k, cy + sa * r + ca * k); }
+  c.strokeStyle = col; c.lineWidth = 0.9 * Hill.PW; c.stroke();
+  c.restore();
+}
+
+/* The light: lines out from the lamp across its fan, brightest on the edge that leads as it turns; behind it, at
+   night, the lines it drew a moment ago, fading as the phosphor lets them go */
+const trails = new WeakMap();
+function fan(s, c, alpha) {
+  const g = s.g, P = s.P, { L, len, a0, a1 } = beamPoly(s), glow = glowAt(s.d), r0 = g.lh.er * 2.3, tr = trails.get(s.beam) || [];
+  const lead = tr.length > 1 && angDiff(s.beam.a, tr[0].a) < 0 ? 0 : 1;
+  const ray = a => { c.moveTo(L.x + Math.cos(a) * r0, L.y + Math.sin(a) * r0); c.lineTo(L.x + Math.cos(a) * len, L.y + Math.sin(a) * len); };
+  c.lineWidth = 1.1 * Hill.PW; c.strokeStyle = rgba(P.beam);
+  for (const p of tr) {
+    const k = 1 - (s.t - p.t) / 0.7;
+    if (k <= 0 || p.a === s.beam.a) continue;
+    c.globalAlpha = alpha * glow * k * k * 0.6;
+    c.beginPath(); ray(p.a + (lead ? g.beamHalf : -g.beamHalf)); c.stroke();
+  }
+  for (let i = 0; i <= 8; i++) {
+    const f = i / 8, w = lead ? f : 1 - f;
+    c.globalAlpha = alpha * lerp(0.6, 0.12 + 0.88 * w ** 2.5, glow);
+    c.beginPath(); ray(lerp(a0, a1, f)); c.stroke();
+  }
+  c.globalAlpha = alpha;
+}
+
+/* The hours: paper by day, a warmer paper at dusk, then the screen comes on */
+const pal = Hill.stops([
+  [0,    { sky: '#F6F1E6', sky2: '#D8C49C', sea: '#F6F1E6', sea2: '#A86400', foam: '#A86400', hill: '#F6F1E6', hill2: '#F6F1E6', ink: '#5C3A00', paper: '#A86400', beam: '#A86400', cloud: '#F6F1E6', far: '#D8C49C', glass: '#F6F1E6' }],
+  [0.2,  { sky: '#F2EAD9', sky2: '#D2BB8F', sea: '#F2EAD9', sea2: '#A86400', foam: '#A86400', hill: '#F2EAD9', hill2: '#F2EAD9', ink: '#5C3A00', paper: '#A86400', beam: '#A86400', cloud: '#F2EAD9', far: '#D2BB8F', glass: '#F2EAD9' }],
+  [0.42, { sky: '#E7D5B0', sky2: '#C4A06A', sea: '#E7D5B0', sea2: '#9A5800', foam: '#9A5800', hill: '#E7D5B0', hill2: '#E7D5B0', ink: '#563300', paper: '#9A5800', beam: '#9A5800', cloud: '#E7D5B0', far: '#C4A06A', glass: '#E7D5B0' }],
+  [0.58, { sky: '#1A1208', sky2: '#4E340A', sea: '#1A1208', sea2: '#8A5E10', foam: '#D89500', hill: '#1A1208', hill2: '#1A1208', ink: '#E09A00', paper: '#E09A00', beam: '#FFBE3A', cloud: '#1A1208', far: '#4E340A', glass: '#1A1208' }],
+  [1,    { sky: '#080603', sky2: '#4A3206', sea: '#080603', sea2: '#9A6A08', foam: '#FFB000', hill: '#080603', hill2: '#080603', ink: '#FFB000', paper: '#FFB000', beam: '#FFC24A', cloud: '#080603', far: '#4A3206', glass: '#080603' }],
+]);
+
+// the glow: the screen drawn small and blurred, laid back over it in light; and the scanlines
+const bloom = document.createElement('canvas').getContext('2d');
+let rows = null;
+
+Hill.style('phosphor', {
+  pal,
+  // the colours the felt pen fills with are the pen's own ink here
+  C: Object.fromEntries([...['wool', 'duck', 'pink', 'monster', 'chimney', 'door', 'skin', 'navy', 'wood', 'steel', 'kraft', 'kraftLit', 'kraftDark', 'tape', 'sprout'].map(k => [k, hex('#FFFFFF')]), ...['yolk', 'beak', 'lamp'].map(k => [k, hex('#FFB000')]), ['huts', Array(4).fill(hex('#FFFFFF'))]]),
+  ribbon: line, print: blank, boil: 0, reg: [0, 0],
+  // labels and doodles in capitals, as the vector games lettered them
+  hand: '"Monaco", "Menlo", ui-monospace, monospace', caps: true,
+  before(s) { screen = rgba(s.P.sky); },
+  after(s, c) {
+    const k = glowAt(s.d);
+    if (k < 0.01) return;
+    const cv = c.canvas, w = Math.ceil(cv.width / 4), h = Math.ceil(cv.height / 4), b = bloom.canvas;
+    if (b.width !== w || b.height !== h) { b.width = w; b.height = h; }
+    bloom.filter = `blur(${1.5 * s.dpr}px)`;
+    bloom.clearRect(0, 0, w, h); bloom.drawImage(cv, 0, 0, w, h);
+    if (!rows) {
+      const x = document.createElement('canvas').getContext('2d');
+      x.canvas.width = 1; x.canvas.height = 3; x.fillStyle = '#000'; x.fillRect(0, 2, 1, 1);
+      rows = x.createPattern(x.canvas, 'repeat');
+    }
+    const flick = s.reduced ? 1 : 0.9 + 0.1 * hash(Math.floor(s.t * 30));
+    c.save(); c.setTransform(1, 0, 0, 1, 0, 0);
+    c.globalCompositeOperation = 'lighter'; c.globalAlpha = k * flick;
+    c.drawImage(b, 0, 0, cv.width, cv.height);
+    c.globalCompositeOperation = 'source-over'; c.globalAlpha = k * 0.35;
+    c.setTransform(s.dpr, 0, 0, s.dpr, 0, 0); c.fillStyle = rows; c.fillRect(0, 0, s.g.W, s.g.H);
+    c.restore();
+  },
+  draw: {
+    land(base, s, c, w) { screen = rgba(s.P.sky); base(s, c, w); },
+    sky(base, s, c) { c.fillStyle = screen; c.fillRect(0, 0, s.g.W, s.g.H); },
+    // the lower sky's soft wave, a dim line, and the horizon
+    band(base, s, c, bandTop) {
+      const g = s.g, { W, u } = g, by = bandTop + 20 * u, top = [];
+      for (let x = -30; x <= W + 30; x += 16 * u) top.push([x, by + Math.sin(x * 0.006 + 1) * 11 * u + Math.sin(x * 0.019 + 2) * 3 * u]);
+      c.beginPath(); line(c, top); c.fillStyle = rgba(s.P.sky2); c.fill();
+      c.beginPath(); line(c, [[-10, g.horizon], [W + 10, g.horizon]]); c.fillStyle = Hill.INK; c.fill();
+    },
+    // stars are points, the bigger ones brighter, twinkling
+    stars(base, s, c) {
+      const g = s.g, st = smooth(0.55, 0.9, s.d);
+      if (st <= 0) return;
+      c.fillStyle = rgba(s.P.beam);
+      for (const p of g.stars) {
+        const r = (0.5 + p.s * 0.6) * g.pw;
+        c.globalAlpha = st * Math.min(1, p.s * 0.8) * (s.reduced ? 1 : 0.7 + 0.3 * Math.sin(s.t * 2 + p.p));
+        c.fillRect(p.x - r, p.y - r, r * 2, r * 2);
+      }
+      c.globalAlpha = 1;
+    },
+    waves(base, s, c) { c.setLineDash([4 * s.g.pw, 3 * s.g.pw]); base(s, c); c.setLineDash([]); },
+    beam(base, s, c) {
+      const { L, len, a0, a1 } = beamPoly(s), pw = s.lampPower(), tr = trails.get(s.beam) || [];
+      trails.set(s.beam, tr);
+      if (tr.at(-1)?.t !== s.t) tr.push({ a: s.beam.a, t: s.t });
+      while (s.t - tr[0].t > 0.7) tr.shift();
+      if (len < 10 || pw < 0.02) return;
+      fan(s, c, c.globalAlpha * (0.3 + 0.7 * pw));
+      // the scallops it crosses light up, dashed like the rest of the sea
+      c.save(); c.beginPath(); c.moveTo(L.x, L.y); c.arc(L.x, L.y, len, a0, a1); c.closePath(); c.clip();
+      c.setTransform(s.dpr, 0, 0, s.dpr, 0, 0); c.setLineDash([4 * s.g.pw, 3 * s.g.pw]);
+      c.strokeStyle = rgba(s.P.beam); waveScallops(s, c, true);
+      c.restore();
+    },
+    hillLight(base, s, c) {
+      const { len } = beamPoly(s);
+      if (len < 10 || Math.sin(s.beam.a) < 0.08) return;
+      c.save(); poly(c, s.g.hillClip); c.clip();
+      fan(s, c, c.globalAlpha * 0.6 * s.lampPower());
+      c.restore();
+    },
+    // the roof hatched, as the dark parts are
+    cottage(base, s, c) {
+      base(s, c);
+      const g = s.g, k = g.cot, w = k.w, h = k.h, x0 = k.x - w / 2, y0 = k.base - h;
+      const roof = [[x0 - w * 0.12, y0 + 1 * g.u], [x0 + w * 0.5, y0 - h * 0.78], [x0 + w * 1.12, y0 + 1 * g.u]];
+      blank(c, roof);
+      hatch(c, [x0 - w * 0.12, y0 - h * 0.78, x0 + w * 1.12, y0], 3 * g.pw, -0.6, Hill.INK);
+      c.beginPath(); edges(c, roof, DET); c.fillStyle = Hill.INK; c.fill();
+    },
+    /* the tower: its outline, the stripes hatched in the theme's colour, the windows lit at night with a few lines */
+    tower(base, s, c) {
+      const g = s.g, u = g.u, T = g.lh, th = THEMES[g.theme || s.theme], night = smooth(0.45, 0.75, s.d), gap = 2.6 * g.pw;
+      const half = k => lerp(T.wB, T.wT, k) / 2, yAt = k => T.base - T.h * k;
+      const Lp = [], Rp = [];
+      for (let i = 0; i <= 20; i++) { const k = i / 20; Lp.push([T.x - half(k), yAt(k)]); Rp.push([T.x + half(k), yAt(k)]); }
+      blank(c, [...Lp, ...Rp.reverse()]);
+      const bands = 6, sag = T.wB * 0.09;
+      const edge = k => { const hw = half(k), out = []; for (let i = 0; i <= 12; i++) { const f = i / 12 * 2 - 1; out.push([T.x + f * hw, yAt(k) - sag * (1 - f * f)]); } return out; };
+      c.beginPath();
+      for (let j = 1; j < bands; j += 2) {
+        const hi = j + 1 >= bands ? [[T.x + half(1), yAt(1)], [T.x - half(1), yAt(1)]] : edge((j + 1) / bands).reverse();
+        [...edge(j / bands), ...hi].forEach(([x, y], i) => i ? c.lineTo(x, y) : c.moveTo(x, y));
+        c.closePath();
+      }
+      hatch(c, [T.x - T.wB, T.top, T.x + T.wB, T.base], gap, 0, rgba(hex(th.stripes[0])));
+      const win = k => { const y = yAt(k), w = T.wB * 0.11, h = T.er * 0.375; return [[T.x - w, y - h], [T.x + w, y - h], [T.x + w, y + h], [T.x - w, y + h]]; };
+      const dw = T.wB * 0.32, dh = T.wB * 0.5, door = [[T.x - dw / 2, T.base], ...ellipse(T.x, T.base - dh + dw / 2, dw / 2, dw / 2, 10, Math.PI, TAU), [T.x + dw / 2, T.base]];
+      for (const k of [0.25, 0.58]) blank(c, win(k));
+      blank(c, door);
+      c.beginPath();
+      line(c, dens([[T.x - T.wB / 2, T.base], [T.x - T.wT / 2, T.top]], 6));
+      line(c, dens([[T.x + T.wB / 2, T.base], [T.x + T.wT / 2, T.top]], 6));
+      for (let j = 1; j < bands; j++) line(c, edge(j / bands));
+      for (const k of [0.25, 0.58]) edges(c, win(k), TEX);
+      line(c, door);
+      c.fillStyle = Hill.INK; c.fill();
+      if (night > 0.5) for (const k of [0.25, 0.58]) { poly(c, win(k)); hatch(c, [T.x - T.wB, yAt(k) - T.er, T.x + T.wB, yAt(k) + T.er], gap * 0.8, 0, rgba(s.P.beam)); }
+      const gw = T.wT * 0.95, deck = [[T.x - gw, T.top + 1 * u], [T.x - gw * 1.05, T.top - T.gal * 0.42], [T.x + gw * 1.05, T.top - T.gal * 0.42], [T.x + gw, T.top + 1 * u]];
+      blank(c, deck); c.beginPath(); edges(c, deck, DET); c.fillStyle = Hill.INK; c.fill();
+    },
+    // the eye's lid hides what it covers, and its iris is only its outline, the screen inside
+    eye(base, s, c) { const P = s.P, { paper, beam } = P; P.paper = P.beam = Hill.C.iris = P.sky; base(s, c); P.paper = paper; P.beam = beam; },
+
+    // the hat's white stripe left blank, the rest of the cone hatched in the theme's colour
+    hat(base, s, c) {
+      const P = s.P, paper = P.paper;
+      P.paper = P.sky; base(s, c); P.paper = paper;
+      const g = s.g, L = g.lamp, er = g.lh.er, { by, bw, bh, sway, tip, pr } = hatGeom(s), k = s.bobbleK(), sy = by - er * 1.55;
+      poly(c, curve([[L.x - bw * 0.92, by - bh * 0.6], [L.x - bw * 0.5, by - er * 1.9], [L.x + er * 0.1 + sway * er, by - er * 2.85], tip, [L.x + er * 0.65 + sway * er * 1.4, by - er * 2.2], [L.x + bw * 0.9, by - bh * 0.6]], 3));
+      c.save(); c.clip();
+      c.beginPath(); c.rect(L.x - bw * 3, tip[1] - pr * 3, bw * 7, by - tip[1] + pr * 3);
+      c.moveTo(L.x - bw * 2, sy + er * 0.25); c.quadraticCurveTo(L.x, sy - er * 0.05, L.x + bw * 2, sy + er * 0.2); c.lineTo(L.x + bw * 2, sy - er * 0.25); c.quadraticCurveTo(L.x, sy - er * 0.55, L.x - bw * 2, sy - er * 0.25); c.closePath();
+      if (k > 0.02) { c.moveTo(tip[0] + pr * k, tip[1] - pr * 0.6 * k); c.arc(tip[0], tip[1] - pr * 0.6 * k, pr * k, 0, TAU); }
+      c.clip('evenodd');
+      c.beginPath(); for (let y = tip[1] - pr * 2; y < by; y += 2.6 * g.pw) { c.moveTo(L.x - bw * 3, y); c.lineTo(L.x + bw * 4, y); }
+      c.strokeStyle = rgba(hex(THEMES[g.theme || s.theme].hat)); c.lineWidth = 0.9 * Hill.PW; c.stroke();
+      c.restore();
+    },
+    // its black face and ear drawn round, as everything is
+    sheep(base, c, u, wool, o, t) {
+      const fall = o.state === 'fall' || o.state === 'leap', step = Math.hypot(o.vx, o.vd || 0) > 2 ? Math.sin(t * 14 + o.seed) * 2 * u : 0;
+      c.beginPath();
+      [-8, -3, 5, 10].forEach((lx, i) => line(c, [[lx * u, -10 * u], [lx * u + (fall ? 3 * u : (i % 2 ? step : -step)), 0]]));
+      c.fillStyle = Hill.INK; c.fill();
+      const body = [];
+      for (let i = 0; i < 40; i++) { const a = i / 40 * TAU, r = 1 + 0.13 * Math.abs(Math.sin(a * 5 + o.seed)); body.push([Math.cos(a) * 14 * u * r, -16 * u + Math.sin(a) * 9.5 * u * r]); }
+      shape(c, body, wool);
+      const ja = joyAt(o, t);
+      c.save(); c.translate(-14 * u, -19 * u); c.rotate(-0.45 + (ja >= 0 ? Math.sin(ja * 24) * 0.6 * (1 - ja / 1.3) : 0));
+      shape(c, ellipse(-2.4 * u, 0, 3 * u, 2.2 * u, 12), wool);
+      c.restore();
+      head(c, u, o, t, 15, -19, [19, -7.5], 1.05, chew => {
+        shape(c, ellipse(11.5 * u, -23.5 * u, 3.6 * u, 1.6 * u, 10, 0, TAU, 0.5 + chew * 0.25), wool);
+        shape(c, ellipse(15 * u, -19 * u, 5 * u, 6.4 * u, 18, 0, TAU, -0.35), wool);
+        c.beginPath(); line(c, ellipse(13.5 * u, -24 * u, 5 * u, 2.6 * u, 10, Math.PI * 1.05, Math.PI * 1.95)); c.fillStyle = Hill.INK; c.fill();
+        if (ja >= 0) { c.beginPath(); line(c, ellipse(16.6 * u, -19.6 * u, 1.7 * u, 1.3 * u, 8, Math.PI * 1.1, Math.PI * 1.9)); c.fillStyle = Hill.INK; c.fill(); }
+        else if (Hill.NAP) napEye(c, 16.6 * u, -20.5 * u, 1.5 * u, Hill.INK);
+        else dot(c, 16.8 * u, -20.5 * u, 1.1 * u, Hill.INK);
+      });
+    },
+    // its patches hatched, and its ear drawn round
+    cow(base, c, u, white, P, o, t) {
+      const INK = Hill.INK, step = Math.hypot(o.vx, o.vd || 0) > 2 ? Math.sin(t * 9 + o.seed) * 2 * u : 0;
+      c.beginPath();
+      [-12, -7, 8, 13].forEach((lx, i) => line(c, [[lx * u, -11 * u], [lx * u + (i % 2 ? step : -step), 0]]));
+      c.fillStyle = INK; c.fill();
+      const ja = joyAt(o, t), wag = ja >= 0 ? Math.sin(ja * 16) * 0.5 * (1 - ja / 1.3) : Math.sin(t * 1.3 + o.seed) * 0.12;
+      c.save(); c.translate(-17 * u, -20 * u); c.rotate(wag); c.translate(17 * u, 20 * u);
+      c.beginPath(); line(c, [[-17 * u, -20 * u], [-21 * u, -14 * u], [-20 * u, -7 * u]]); c.fill();
+      dot(c, -20 * u, -6 * u, 2 * u, INK);
+      c.restore();
+      const body = curve([[-17 * u, -22 * u], [-6 * u, -26.5 * u], [10 * u, -25.5 * u], [17 * u, -20 * u], [15 * u, -11 * u], [0, -10 * u], [-16 * u, -11 * u], [-18.5 * u, -16 * u]], 3, true);
+      blank(c, body);
+      c.save(); c.clip();
+      const R = Hill.rng(o.seed + 3);
+      c.beginPath();
+      for (let i = 0; i < 3; i++) ellipse((-11 + i * 9 + R() * 4) * u, (-21 + R() * 8) * u, (3.5 + R() * 3) * u, (2.6 + R() * 2) * u, 12, 0, TAU, R()).forEach(([x, y], j) => j ? c.lineTo(x, y) : c.moveTo(x, y));
+      hatch(c, [-20 * u, -30 * u, 20 * u, -8 * u], 1.8 * Hill.PW, -0.9, INK);
+      c.restore();
+      c.beginPath(); Hill.loop(c, body); c.fillStyle = INK; c.fill();
+      head(c, u, o, t, 15, -24, [19, -13], 0.95, chew => {
+        shape(c, ellipse(13.6 * u, -27.5 * u, 3 * u, 1.5 * u, 10, 0, TAU, 0.4 + chew * 0.2), white);
+        shape(c, curve([[15 * u, -29 * u], [21 * u, -31 * u], [24.5 * u, -26 * u], [24.5 * u, -20 * u], [18 * u, -19.5 * u], [15 * u, -24 * u]], 2, true), white);
+        const my = (-21 + Math.max(0, chew) * 0.7) * u;
+        shape(c, ellipse(23 * u, my, 4 * u, 3 * u, 14), white);
+        dot(c, 22 * u, my, 0.7 * u, INK); dot(c, 24.6 * u, my - 0.2 * u, 0.7 * u, INK);
+        if (ja >= 0) { c.beginPath(); line(c, ellipse(20.2 * u, -25.8 * u, 1.5 * u, 1.1 * u, 8, Math.PI * 1.1, Math.PI * 1.9)); c.fillStyle = INK; c.fill(); }
+        else if (Hill.NAP) napEye(c, 20.2 * u, -26.6 * u, 1.3 * u, INK);
+        else dot(c, 20.2 * u, -26.6 * u, 1.05 * u, INK);
+        c.beginPath(); line(c, [[16.5 * u, -29.5 * u], [15 * u, -33.5 * u], [16.5 * u, -36 * u]]); line(c, [[21 * u, -31 * u], [22.5 * u, -34.5 * u], [21.5 * u, -37 * u]]); c.fillStyle = INK; c.fill();
+      });
+    },
+    // the sheep at its desk, its face drawn round
+    desk(base, s, c, p) {
+      const g = s.g, sc = Hill.pop(p) * (g.portrait ? 1.75 : 2.1), u = g.u * sc, INK = Hill.INK, { x, y } = Hill.deskSpot(s);
+      if (sc < 0.05) return;
+      const typing = s.reduced ? 0 : s.t * 11, bob = s.reduced ? 0 : Math.sin(s.t * 2.4) * 0.6 * u;
+      c.save(); c.translate(x, y);
+      const body = [];
+      for (let i = 0; i < 36; i++) { const a = i / 36 * TAU, r = 1 + 0.12 * Math.abs(Math.sin(a * 5)); body.push([Math.cos(a) * 15 * u * r, -27 * u + Math.sin(a) * 12 * u * r]); }
+      shape(c, body);
+      for (const sx of [-1, 1]) shape(c, ellipse(sx * 8.5 * u, -40 * u + bob, 4.4 * u, 1.9 * u, 12, 0, TAU, sx * 0.35));
+      shape(c, ellipse(0, -36 * u + bob, 6 * u, 7.5 * u, 20));
+      c.beginPath(); line(c, ellipse(0, -42 * u + bob, 6.5 * u, 3.6 * u, 12, Math.PI, TAU)); c.fillStyle = INK; c.fill();
+      for (const sx of [-1, 1]) dot(c, sx * 2.6 * u, -35.8 * u + bob, 0.9 * u, INK);
+      const top = [[-24 * u, -14 * u], [24 * u, -14 * u], [24 * u, -10.5 * u], [-24 * u, -10.5 * u]];
+      blank(c, top);
+      c.beginPath(); edges(c, top); line(c, [[-20 * u, -10.5 * u], [-21 * u, 0]]); line(c, [[20 * u, -10.5 * u], [21 * u, 0]]); c.fillStyle = INK; c.fill();
+      const lid = [[-11 * u, -14.5 * u], [-12 * u, -29 * u], [12 * u, -29 * u], [11 * u, -14.5 * u]];
+      shape(c, lid);
+      shape(c, [[-1.6 * u, -18 * u], [-1.1 * u, -25 * u], [1.1 * u, -25 * u], [1.6 * u, -18 * u]]);
+      c.beginPath();
+      for (const sx of [-1, 1]) {
+        const up = s.reduced ? 0 : Math.max(0, Math.sin(typing + (sx > 0 ? Math.PI : 0))) * 2.4 * u;
+        line(c, [[sx * 10 * u, -22 * u], [sx * 13 * u, -17 * u - up], [sx * 11 * u, -15.5 * u - up]]);
+      }
+      c.fillStyle = INK; c.fill();
+      if (!s.reduced) {
+        const ph = (s.t * 1.3) % 1;
+        Hill.label(c, ph < 0.5 ? 'tak' : 'tak tak', 15 * u, -34 * u - ph * 6 * u, 8 * u + 2, rgba(s.P.ink, 1 - ph), 'left', -0.15);
+      }
+      const mug = [[16 * u, -14 * u], [16.5 * u, -20 * u], [21 * u, -20 * u], [20.5 * u, -14 * u]];
+      blank(c, mug); c.beginPath(); edges(c, mug); line(c, ellipse(21.5 * u, -17 * u, 2 * u, 2 * u, 8, -1.2, 1.2)); c.fillStyle = INK; c.fill();
+      c.restore();
+    },
+    // the other pyjamas drying, their stripes a line each
+    washing(base, s, c, p) {
+      const g = s.g, u = g.u, T = g.lh, sc = Hill.pop(p), INK = Hill.INK;
+      if (sc < 0.05) return;
+      const px = g.portrait ? g.W * 0.4 : g.W * 0.615, pry = s.ridgeY(px) ?? T.base;
+      const top = [px, pry - (g.portrait ? 48 : 92) * u * sc], end = [T.x - lerp(T.wB, T.wT, 0.3) / 2, T.base - T.h * 0.3], sag = 16 * u, rope = [];
+      for (let i = 0; i <= 20; i++) { const f = i / 20; rope.push([lerp(top[0], end[0], f), lerp(top[1], end[1], f) + Math.sin(f * Math.PI) * sag]); }
+      c.beginPath();
+      line(c, [[px, pry + 3 * u], top]);
+      line(c, [[px - 6 * u, top[1] + 4 * u], [px, top[1] - 1 * u], [px + 6 * u, top[1] + 4 * u]]);
+      line(c, rope);
+      c.fillStyle = INK; c.fill();
+      const others = Object.keys(THEMES).filter(k => k !== s.theme);
+      const wind = s.reduced ? 0.1 : s.windTotal;
+      others.forEach((id, i) => {
+        const f = (i + 0.7) / (others.length + 0.4), ax = lerp(top[0], end[0], f), ay = lerp(top[1], end[1], f) + Math.sin(f * Math.PI) * sag;
+        const k = sc * (g.portrait ? 1 : 1.45), w = 13 * u * k, h = 14 * u * k, sw = (s.reduced ? 0 : Math.sin(s.t * 2.2 + i) * 0.08) + wind * 0.12;
+        c.save(); c.translate(ax, ay); c.rotate(sw);
+        const shirt = [[-w / 2, 0], [-w * 0.85, h * 0.25], [-w * 0.62, h * 0.4], [-w * 0.42, h * 0.3], [-w * 0.42, h], [w * 0.42, h], [w * 0.42, h * 0.3], [w * 0.62, h * 0.4], [w * 0.85, h * 0.25], [w / 2, 0]];
+        blank(c, shirt);
+        c.save(); c.clip(); c.beginPath();
+        for (let j = 0; j < 3; j++) line(c, [[-w, h * (0.25 + j * 0.3)], [w, h * (0.25 + j * 0.3)]]);
+        c.fillStyle = rgba(s.P.paper); c.fill(); c.restore();
+        c.beginPath(); edges(c, shirt); line(c, [[-w * 0.2, -2 * u], [-w * 0.2, 3 * u]]); line(c, [[w * 0.2, -2 * u], [w * 0.2, 3 * u]]); c.fillStyle = INK; c.fill();
+        c.restore();
+      });
+    },
+    // the huts: their stripes and roofs hatched, the open one's doorway full of lamplight in lines
+    huts(base, s, c, p) {
+      const g = s.g, spots = Hill.hutSpots(s), INK = Hill.INK, k0 = Hill.pop(p) * (g.portrait ? 1.3 : 1.75);
+      if (k0 > 0.05) {
+        const u = g.u * k0, a = spots[0], b = spots[3], walk = [[a.x - 30 * u, a.y], [b.x + 30 * u, b.y], [b.x + 30 * u, b.y + 4 * u], [a.x - 30 * u, a.y + 4 * u]];
+        blank(c, walk);
+        c.beginPath(); edges(c, walk);
+        for (let x = a.x - 22 * u; x < b.x + 30 * u; x += 9 * u) { const y = a.y + lerp(0, b.y - a.y, (x - a.x) / (b.x - a.x)); line(c, [[x, y + 0.5 * u], [x, y + 3.5 * u]]); }
+        c.fillStyle = INK; c.fill();
+      }
+      spots.forEach((q, i) => {
+        const sc = Hill.pop(Hill.clamp(p * 1.6 - i * 0.15)) * (g.portrait ? 1.3 : 1.75), u = g.u * sc, gap = 2.4 * g.pw;
+        if (sc < 0.05) return;
+        const on = s.ws === i + 1, w = 26 * u, h = 27 * u, x0 = q.x - w / 2, y0 = q.y - h;
+        const body = [[x0, q.y], [x0, y0], [x0 + w, y0], [x0 + w, q.y]], roof = [[x0 - 4 * u, y0 + 1 * u], [q.x, y0 - 14 * u], [x0 + w + 4 * u, y0 + 1 * u]];
+        const dw = w * 0.5, dh = h * 0.74, dx = q.x - dw / 2, dy = q.y - dh, door = [[dx, q.y], [dx, dy], [dx + dw, dy], [dx + dw, q.y]];
+        blank(c, body);
+        c.beginPath(); for (let j = 0; j < 4; j++) c.rect(x0 + j * w / 4, y0, w / 8, h);
+        hatch(c, [x0, y0, x0 + w, q.y], gap, Math.PI / 2, INK);
+        blank(c, roof); hatch(c, [x0 - 4 * u, y0 - 14 * u, x0 + w + 4 * u, y0], gap, -0.6, INK);
+        blank(c, door);
+        let num = [q.x, dy + dh * 0.45, 1];
+        c.beginPath(); edges(c, roof); edges(c, body, DET, 0, false); edges(c, door, TEX, 0, false);
+        line(c, ellipse(q.x, y0 - 5 * u, 3.4 * u, 3.4 * u, 12, 0, TAU * 1.05));
+        if (on) {
+          const leaf = [[dx + dw, q.y], [dx + dw, dy], [dx + dw * 1.55, dy + 2.5 * u], [dx + dw * 1.55, q.y - 1.2 * u]];
+          edges(c, leaf);
+          num = [dx + dw * 1.29, dy + dh * 0.45, 0.85];
+        }
+        c.fillStyle = INK; c.fill();
+        if (on) { poly(c, door); hatch(c, [dx, dy, dx + dw, q.y], gap * 0.8, 0, rgba(s.P.beam)); dot(c, q.x, y0 - 5 * u, 2 * u, rgba(s.P.beam)); }
+        Hill.label(c, String(i + 1), num[0] + 0.5 * u, num[1], 11 * u * num[2] + 2, INK, 'center', 0);
+      });
+    },
+    // install: the cottage door open on the lamp, its light on the grass in lines
+    doorway(base, s, c, p) {
+      const g = s.g, u = g.u, k = g.cot, d = k.door, INK = Hill.INK, beam = rgba(s.P.beam);
+      if (!d) return;
+      c.globalAlpha = Hill.clamp(p * 1.4);
+      c.beginPath();
+      for (let i = 0; i <= 6; i++) { const f = i / 6, x = lerp(d.x, d.x + d.w, f); line(c, [[x, k.base + 3 * u], [lerp(d.x - 30 * u, d.x + d.w + 40 * u, f), k.base + 32 * u]]); }
+      c.fillStyle = beam; c.fill();
+      poly(c, [[d.x, k.base], [d.x, d.y], [d.x + d.w, d.y], [d.x + d.w, k.base]]);
+      hatch(c, [d.x, d.y, d.x + d.w, k.base], 2 * g.pw, 0, beam);
+      const door = [[d.x + d.w, k.base], [d.x + d.w, d.y], [d.x + d.w * 1.55, d.y + 2 * u], [d.x + d.w * 1.55, k.base - 1 * u]];
+      blank(c, door); c.beginPath(); edges(c, door); c.fillStyle = INK; c.fill();
+      s.style.draw.keeper(s, c, d.x + d.w * 0.5, k.base, g.portrait ? 1.05 : 1.45, 'wave', false, 0);
+      c.globalAlpha = 1;
+    },
+  },
+});
+})();

From c3d58b2b247a5b357495ec2dc93f806f3a92fe41 Mon Sep 17 00:00:00 2001
From: Sebastien Graf <95282692+Seb-GRAF@users.noreply.github.com>
Date: Sat, 31 Oct 2026 14:43:19 +0100
Subject: [PATCH 46/46] docs: take each island's theme out at sea, and draw the
 website's phosphor glow once

---
 site/main.js           |  13 +++--
 site/scene.js          | 118 +++++++++++++++++++++++++++++------------
 site/styles/cartoon.js |  23 ++++----
 site/styles/vector.js  |  32 +++++------
 4 files changed, 126 insertions(+), 60 deletions(-)

diff --git a/site/main.js b/site/main.js
index 18cc8b9e..3f6b266e 100644
--- a/site/main.js
+++ b/site/main.js
@@ -70,8 +70,7 @@ setInterval(tick, 1000);
 /* Themes: the tags on the washing line restyle the bar, and the drawing: each theme draws the scene in its own style
    (styles/), which the lighthouse's light brings in as it turns once round, the lighthouse in the theme's pyjamas */
 function setTheme(id) {
-  dock.dataset.theme = id;
-  bar.className = `bar ${THEMES.find(t => t[0] === id)[2]}`;
+  barTheme(id);
   for (const b of document.querySelectorAll("[data-theme-pick]")) {
     b.classList.toggle("on", b.dataset.themePick === id);
     b.setAttribute("aria-pressed", b.dataset.themePick === id);
@@ -82,6 +81,11 @@ function setTheme(id) {
     S("setTopInset", restHeight());
   });
 }
+// the bar alone; out at sea it takes the theme of the island ahead (see onBar)
+function barTheme(id) {
+  dock.dataset.theme = id;
+  bar.className = `bar ${THEMES.find(t => t[0] === id)[2]}`;
+}
 for (const b of document.querySelectorAll("[data-theme-pick]")) b.addEventListener("click", () => setTheme(b.dataset.themePick));
 
 /* Overflow, as the real bar does it: lower priority first, equal priorities from the end */
@@ -952,7 +956,8 @@ if (scene) {
   /* Past the last note the page goes on: once it has gone, scrolling takes you on over the sea, past the far island
      and the ones beyond it (see ISLANDS in scene.js), through day and night (see hour). Well into the second round
      of islands the page steps back a round, which looks the same, so it never ends; and as soon as you turn back, it
-     steps back to have its own hill just behind you, so the page is never more than an island away. */
+     steps back to have its own hill just behind you, so the page is never more than an island away. The drawing and
+     the bar take the theme of the island you're heading to (onBar), and the visitor's again back on the page. */
   if (!reduce.matches) {
     const round = window.Hill.islands;
     let was = scrollY;
@@ -984,6 +989,8 @@ function unshove(quick) {
 }
 function onBar(event, key, info = {}) {
   if (event === "release") return unshove(info.caught);
+  // out at sea, the bar goes over to the next island's theme as the drawing's does, the visitor's pick left alone
+  if (event === "theme") { barTheme(key); return fit(); }
   const el = !editing && widgetFor(key);
   if (!el) return;
   if (event === "bump") {
diff --git a/site/scene.js b/site/scene.js
index 733d346f..87f27017 100644
--- a/site/scene.js
+++ b/site/scene.js
@@ -212,6 +212,8 @@ function label(c, text, x, y, size, col, align = 'left', rot = -0.035) {
 const IDLE_AFTER = 4000, IDLE_FPS = 14, BOIL_FPS = 7, MAX_OBJS = 36;
 // a new style comes in as the light turns once round, in this many seconds (see setTheme)
 const SWAP = 1.2;
+// out at sea, the page's theme follows the islands, each coming in over this many seconds (see update)
+const WIPE = 0.9;
 // the opening's wake-up, in seconds. At night, from when its eye starts to open: it opens halfway (to `lids.mid` shut)
 // by `lids.half`, stays a moment, droops a little (to `lids.heavy`) by `lids.sag`, then opens all the way by `open`,
 // easing out. Then it strains to light its lamp, squeezing its eye shut for each of `pushes` ([when, how long, how
@@ -300,7 +302,7 @@ function tower(g, x, base, h, er) {
    pen is the built-in theme's. Each of the others has a file in styles/ that registers its style, after this file and
    before the page makes the scene:
 
-     Hill.style('nord', { pal, C, tint, ribbon, pen, boil, print, reg, hand, weight, caps, fps, before, after, draw });
+     Hill.style('nord', { pal, C, tint, ribbon, pen, boil, print, reg, hand, weight, caps, fps, before, after, cached, draw });
 
    Every lever is optional; what a style leaves out is the felt pen's (Hill.felt).
      pal     the hours: stops like PAL's, made with Hill.stops, with the same keys. `ink` is the line's colour. The
@@ -328,21 +330,26 @@ function tower(g, x, base, h, er) {
              so things still go where they go between the steps.
      before  (s, c) at the start of each frame, after the levers are on; after (s, c) at its end, over everything
              (grain, scanlines, fibre). Both in the scene's CSS pixels.
+     cached  (s, c) once a cached layer or sprite is drawn, on its own canvas, before it's kept: what it adds there
+             costs nothing per frame (a glow).
      draw    { name(base, ...args) }: any of the drawings named in Hill.felt.draw, in place of the felt pen's, which comes
              as base to call or not. The drawings call each other through DRAW, so an override is used wherever
              its drawing is, by the felt ones too.
    A drawing gets the scene s and the canvas c (the animals get c, u, their colour, o and t, and obj gets s): s.g the
    geometry (W, H, u, pw, top, horizon, ridge, shore, hillPoly, hillClip, lh the tower, lamp, cot the cottage,
    clouds, sheepCloud, stars, tufts), s.P the palette now, s.t the time, s.d the hour (0 day, 1 night), s.style the
-   style on, s.theme the page's theme, s.beam, s.pres how far in each section's scene is, s.reduced. Lengths are CSS
+   style on, s.theme the visitor's theme, s.beam, s.pres how far in each section's scene is, s.reduced. Lengths are CSS
    pixels of the scene; sizes go in u (g.u, 1 on a window of about 1138 by 1138) and pens in pw. The islands of the
    dive use the same drawings in their own s.g, on a canvas scaled by view, each in its own theme's style (but the
-   far one seen from the page, in the page's), while the sky and the sea are in the page's. The band behind the
-   horizon and the hill with its cottage and tower are cached layers, the sun, the moon and the clouds sprites: those
-   drawings run only when the hour's step, the boil state, the style, the size or the fonts change, so they can't
-   move on their own. Drawings leave the scene as they found it, save the cottage, which puts its door in g.cot.door
-   for the visit and the doorway: one drawn without base must too. Every style keeps the lighthouse's pyjamas:
-   THEMES[g.theme || s.theme]. */
+   far one seen from the page, in the visitor's), while the sky, the sea and the clouds are in the page's: the
+   visitor's, and out at sea the theme of the island you're heading to (s.shows). That one comes in as a circle
+   opening out from the middle of the horizon (s.wipe): meanwhile the sky, the sea, the clouds, before and after are
+   drawn in both styles, the old one's outside the circle and the new one's inside it. The band behind the horizon
+   (one for each theme the page is in) and the hill with its cottage and tower are cached layers, the sun, the moon
+   and the clouds sprites: those drawings run only when the hour's step, the boil state, the style, the size or the
+   fonts change, so they can't move on their own. Drawings leave the scene as they found it, save the cottage, which
+   puts its door in g.cot.door for the visit and the doorway: one drawn without base must too. Every style keeps the
+   lighthouse's pyjamas: THEMES[g.theme || s.theme]. */
 const FELT = {
   id: 'built-in', pal: PAL, C, ribbon: feltRibbon, print: feltPrint, pen: 1, boil: BOIL_FPS, reg: [2.6, 1.9], hand: HAND, weight: 400, caps: false,
   draw: {
@@ -374,7 +381,8 @@ class Scene {
     this.fade = document.createElement('canvas').getContext('2d');
     this.top = Math.max(0, +this.o.topInset || 0);
     this.t = 0; this.d = this.dTarget = clamp(+this.o.dusk || 0); this.dTween = null; this.labelsAt = -9;
-    this.state = 'hero'; this.theme = 'built-in'; this.ws = 1;
+    // the visitor's theme, and the one the page's sky, sea and clouds are in: out at sea, the next island's (see update)
+    this.state = 'hero'; this.theme = this.shows = 'built-in'; this.ws = 1;
     this.pres = Object.fromEntries(STATES.map(k => [k, k === 'hero' ? 1 : 0]));
     this.since = Object.fromEntries(STATES.map(k => [k, 0]));
     // the pointer in client coordinates less the scene's offset; each island sees it as this.ptr, in its own (see enter)
@@ -432,7 +440,7 @@ class Scene {
     this.wake();
   }
   // once the scene is up, the new style comes in with the light: the last frame, in the old one, stays where the light
-  // hasn't been yet (see swap); without motion or out at sea, at once
+  // hasn't been yet (see swap); without motion, at once; out at sea, the page has it when you're back (see update)
   setTheme(id) {
     if (!THEMES[id]) return;
     if (id !== this.theme && this.t > 0.5 && !this.reduced && !this.dive) {
@@ -442,8 +450,11 @@ class Scene {
       this.swap = { t0: this.t, a0: this.beam.a, a: this.beam.a, L: this.g.lamp };
     }
     this.theme = id;
+    if (!this.dive && id !== this.shows) this.show(id);
     this.wake();
   }
+  // the page's sky, sea and clouds in another theme from now on; the band cached in the one before goes
+  show(id) { delete this.layers['back' + this.shows]; this.shows = id; }
   setWorkspace(n) { this.ws = clamp(Math.round(+n || 1), 1, 4); this.wake(); }
   setTopInset(px) { const v = Math.max(0, +px || 0); if (v !== this.top) { this.top = v; this.layout(); } this.wake(); }
   // how far past the end of the page, in laps, one island a lap.
@@ -1285,7 +1296,7 @@ class Scene {
     // reduced motion and nothing moving: the scene sleeps until the next call or input
   }
   busy() {
-    if (this.swap || this.sweep || this.wakePath || this.gaze || this.visit || this.t - this.knocks.at < 0.5 || this.showing() || this.t - this.wokeAt < WAKE.open + 0.2 || this.t - this.labelsAt < 0.6) return true;
+    if (this.swap || this.wipe || this.sweep || this.wakePath || this.gaze || this.visit || this.t - this.knocks.at < 0.5 || this.showing() || this.t - this.wokeAt < WAKE.open + 0.2 || this.t - this.labelsAt < 0.6) return true;
     if (Math.abs(this.box.lid - (this.boxEmpty() ? 1 : 0)) > 0.01) return true;
     if (this.d !== (this.dEff ?? this.dTarget) || (this.state === 'install') !== (this.pres.install > 0.999)) return true;
     for (const k of STATES) { const p = this.pres[k]; if (p > 0.001 && p < 0.999) return true; }
@@ -1329,6 +1340,22 @@ class Scene {
     }
     this.stepDusk(dt);
     if (this.swap && this.t - this.swap.t0 > SWAP) this.swap = null;
+    // out at sea, the page goes over to the theme of the island you're heading to as the one before it goes past (the
+    // far island's as soon as the dive begins), and back on the page to the visitor's: the new theme opens out in a
+    // circle from the middle of the horizon, and the bar goes over as the circle reaches it. When that changes again
+    // before the circle covers the screen, it's over at once and the next one starts
+    const to = this.dive ? this.world(Math.max(1, Math.floor(this.dive + 0.95))).g.theme : this.theme, wp = this.wipe;
+    if (wp && (to !== wp.to || this.t - wp.t0 > WIPE)) {
+      if (!wp.bar) this.emit('theme', wp.to);
+      this.show(wp.to);
+      this.wipe = null;
+    }
+    if (!this.wipe && to !== this.shows) this.wipe = { to, t0: this.t };
+    if (this.wipe) {
+      const w = this.wipe, B = this.back, y = B.horizon;
+      w.r = Math.hypot(B.W / 2, Math.max(y, B.H - y)) * smooth(0, WIPE, this.t - w.t0);
+      if (!w.bar && w.r > y - B.top / 2) { w.bar = true; this.emit('theme', w.to); }
+    }
     this.vel.x *= Math.exp(-dt * 2.5); this.vel.y *= Math.exp(-dt * 2.5);
     this.windAmb = rm ? 0.2 : 0.28 + 0.22 * noise(this.t * 0.13 + 3);
     this.wind = lerp(this.wind, clamp(this.vel.x / 1300, -1.5, 1.5), Math.min(1, dt * 1.8));
@@ -1942,13 +1969,13 @@ class Scene {
     this.pstep = Math.round(this.d * STEPS);
     this.clock = this.t;
     NAP = this.drowsy() > 0.9;
-    this.dress(this.theme);
+    this.dress(this.shows);
     c.setTransform(k, 0, 0, k, 0, 0);
     c.globalAlpha = 1; c.globalCompositeOperation = 'source-over'; c.imageSmoothingQuality = 'high';
-    this.style.before?.(this, c);
+    this.page(() => this.style.before?.(this, c));
     DRAW.scene(this, c);
     c.setTransform(k, 0, 0, k, 0, 0);
-    this.style.after?.(this, c);
+    this.page(() => this.style.after?.(this, c));
     // a new style coming in: the old one where the light hasn't been yet (where it was to begin with, it has)
     const hw = this.g.beamHalf;
     if (sw && sw.a + hw < sw.a0 + TAU - hw) {
@@ -1960,6 +1987,21 @@ class Scene {
     }
     this.t = this.clock;
   }
+  // draws in the page's theme; in a wipe (see update), in the old one outside its circle and in the new one inside it
+  page(draw) {
+    const w = this.wipe, c = this.ctx, B = this.back;
+    if (!w) return draw();
+    for (const out of [true, false]) {
+      c.save(); c.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+      c.beginPath(); c.arc(B.W / 2, B.horizon, w.r, 0, TAU);
+      if (out) c.rect(0, 0, B.W, B.H);
+      c.clip('evenodd');
+      if (!out) this.dress(w.to);
+      draw();
+      c.restore();
+    }
+    this.dress(this.shows);
+  }
   /* Draws from here on in a theme's style (see STYLES): its levers in the pen's place, its palette at this hour, and
      its time */
   dress(id) {
@@ -1982,6 +2024,7 @@ class Scene {
       x.setTransform(1, 0, 0, 1, 0, 0); x.clearRect(0, 0, w, h);
       x.setTransform(k, 0, 0, k, -x0, -y0);
       draw(x);
+      this.style.cached?.(this, x);
       L.key = key;
       this.rebuilds++;
     }
@@ -1998,6 +2041,7 @@ class Scene {
       const c = cv.getContext('2d');
       c.setTransform(k, 0, 0, k, w * k / 2, h * k / 2);
       draw(c);
+      this.style.cached?.(this, c);
       s = { cv, w, h };
       this.sprites.set(key, s);
       if (this.sprites.size > 60) this.sprites.delete(this.sprites.keys().next().value);
@@ -2023,24 +2067,29 @@ class Scene {
 function drawScene(s, c) {
   const g = s.g, { W, u } = g, shown = s.shown();
   c.lineCap = 'round'; c.lineJoin = 'round';
-  DRAW.sky(s, c);
-  const bandTop = g.horizon - (g.horizon - g.top) * (g.portrait ? 0.42 : 0.36) - 20 * u;
-  s.layer(c, 'back', { x: 0, y: bandTop, w: W, h: g.horizon - bandTop + 6 * u }, x => DRAW.band(s, x, bandTop));
-  DRAW.stars(s, c);
-  DRAW.waves(s, c);
-  for (const w of shown) { s.enter(w); DRAW.ripples(s, c); }
-  c.setTransform(s.dpr, 0, 0, s.dpr, 0, 0);
-  DRAW.sun(s, c);
-  DRAW.moon(s, c);
+  // the page's sky and sea, the band cached in each theme it's in (see page)
+  s.page(() => {
+    DRAW.sky(s, c);
+    const bandTop = g.horizon - (g.horizon - g.top) * (g.portrait ? 0.42 : 0.36) - 20 * u;
+    s.layer(c, 'back' + s.style.id, { x: 0, y: bandTop, w: W, h: g.horizon - bandTop + 6 * u }, x => DRAW.band(s, x, bandTop));
+    DRAW.stars(s, c);
+    DRAW.waves(s, c);
+    for (const w of shown) { s.enter(w); DRAW.ripples(s, c); }
+    c.setTransform(s.dpr, 0, 0, s.dpr, 0, 0);
+    DRAW.sun(s, c);
+    DRAW.moon(s, c);
+  });
   // an island in a style, its theme's or the page's, and its ground in its theme's colours, as much darker than by day
-  // as that style's green is now; then the page's style again (the page's hill is in it already)
+  // as that style's green is now; the page's hill in the visitor's. Then the style it was drawing in again
   const wear = (w, id, draw) => {
-    if (!w.g.isle) return draw();
-    s.dress(id);
-    const P = s.P, day = s.style.pal[0][1], [lit, shady] = w.g.ground;
-    P.hill = lit.map((v, i) => v * P.hill[i] / day.hill[i]); P.hill2 = shady.map((v, i) => v * P.hill2[i] / day.hill2[i]);
+    const was = s.style.id;
+    s.dress(w.g.isle ? id : s.theme);
+    if (w.g.isle) {
+      const P = s.P, day = s.style.pal[0][1], [lit, shady] = w.g.ground;
+      P.hill = lit.map((v, i) => v * P.hill[i] / day.hill[i]); P.hill2 = shady.map((v, i) => v * P.hill2[i] / day.hill2[i]);
+    }
     draw();
-    s.dress(s.theme);
+    s.dress(was);
   };
   // an island in a style, laid over at `a`: when that's less than all of it, it's drawn whole on the side first
   const lay = (w, id, a) => {
@@ -2065,8 +2114,10 @@ function drawScene(s, c) {
     if (a > 0) { s.enter(w); view(s, c, w.view); wear(w, w.g.theme, () => { c.globalAlpha = a; DRAW.halo(s, c); c.globalAlpha = a; DRAW.beam(s, c); c.globalAlpha = 1; }); }
   }
   c.setTransform(s.dpr, 0, 0, s.dpr, 0, 0);
-  for (let i = 0; i < g.clouds.length; i++) DRAW.cloud(s, c, g.clouds[i], 'cloud' + i);
-  DRAW.cloud(s, c, g.sheepCloud, 'sheepcloud', true);
+  s.page(() => {
+    for (let i = 0; i < g.clouds.length; i++) DRAW.cloud(s, c, g.clouds[i], 'cloud' + i);
+    DRAW.cloud(s, c, g.sheepCloud, 'sheepcloud', true);
+  });
   land(near);
   s.enter(s.focus());
 }
@@ -2102,14 +2153,15 @@ function drawLand(s, c, w) {
   DRAW.doodles(s, c);
 }
 
-/* the hill with its cottage and tower: cached at about the size it's drawn, or drawn as it is when larger than life */
+/* the hill with its cottage and tower: cached at about the size it's drawn (an island's in each style it's drawn in),
+   or drawn as it is when larger than life */
 function drawFront(s, c, sc) {
   const g = s.g, { W, H, u } = g, T = g.lh, x0 = g.shore ? g.ridge[0][0] - 8 : Math.max(0, g.ridge[0][0] - 10);
   const x1 = Math.min(W, g.ridge.at(-1)[0] + 8), y0 = Math.min(T.top - T.gal * 1.2, g.cot.base - g.cot.h * 4.2) - 10 * u;
   const y1 = g.shore ? Math.max(...g.shore.map(p => p[1])) + 26 * u : H;
   const draw = x => { DRAW.hill(s, x); DRAW.cottage(s, x); DRAW.tower(s, x); };
   if (sc > 1) draw(c);
-  else s.layer(c, 'front' + (g.theme || ''), { x: x0, y: y0, w: x1 - x0, h: y1 - y0 }, draw, 2 ** Math.ceil(Math.log2(sc)));
+  else s.layer(c, 'front' + (g.theme ? g.theme + s.style.id : ''), { x: x0, y: y0, w: x1 - x0, h: y1 - y0 }, draw, 2 ** Math.ceil(Math.log2(sc)));
 }
 
 /* draws from here on in an island's coordinates: screen = s * point + (x, y) */
diff --git a/site/styles/cartoon.js b/site/styles/cartoon.js
index 443c4f18..1cbb717d 100644
--- a/site/styles/cartoon.js
+++ b/site/styles/cartoon.js
@@ -156,22 +156,27 @@ Hill.style('notch', {
       }
       c.fillStyle = rgba(s.P.beam, st); c.fill();
     },
-    // the sea: a few strokes of the pen across the water, longer and further apart as they come closer
+    // the sea: a few strokes of the pen across the water, longer and further apart as they come closer, each the
+    // brush's sliver: pointed, thin where it lands, thinnest where it lifts. Far off, where they're a hair thick, a
+    // plain dash, all of them in one path of rectangles
     waves(base, s, c) {
-      const g = s.g, { W, H, u } = g, hz = g.horizon, sea = H - hz, mid = W / 2, go = s.dive * Hill.DIVE_GAP / Hill.SHORE, ROW = 0.11, span = 150 * u;
-
-      c.beginPath();
+      const g = s.g, { W, H, u } = g, hz = g.horizon, sea = H - hz, mid = W / 2, go = s.dive * Hill.DIVE_GAP / Hill.SHORE, ROW = 0.11, span = 150 * u, PW = Hill.PW;
+      const near = new Path2D(), far = new Path2D();
       for (let k = Math.ceil((1 + go) / ROW); ; k++) {
         const rel = 1 / (k * ROW - go);
         if (rel < 0.035) break;
-        const y = hz + sea * rel, keep = 0.75 * rel ** 1.5;
+        const y = hz + sea * rel, keep = 0.75 * rel ** 1.5, q = k % 128, w = Hill.DET * Math.max(0.5, rel), hw = w * PW * (w <= TEX * 1.2 ? 0.28 : 0.46), dy = 0.6 * u * rel;
         for (let j = Math.floor(-mid / rel / span) - 1; j * span * rel < mid; j++) {
-          if (hash(k * 31.7 + j * 7.3) > keep) continue;
-          const x = mid + (j + hash(j * 3.1 + k)) * span * rel, l = Math.max(4, (30 + 60 * hash(k + j * 1.7)) * u * rel);
-          brush(c, dens([[x, y], [x + l, y + 0.6 * u * rel]], 6), Hill.DET * Math.max(0.5, rel), k + j, { tin: 6, tout: 12, w0: 0.6, w1: 0.2 });
+          if (hash(q * 31.7 + j * 7.3) > keep) continue;
+          const x = mid + (j + hash(j * 3.1 + q)) * span * rel, l = Math.max(4, (30 + 60 * hash(q + j * 1.7)) * u * rel);
+          if (rel < 0.25) { far.rect(x, y + dy / 2 - hw * 0.7, l, hw * 1.4); continue; }
+          const a = Math.min(l * 0.45, 9.6 * PW), b = l - Math.min(l * 0.5, 19.2 * PW), ya = y + dy * a / l, yb = y + dy * b / l;
+          near.moveTo(x - hw * 0.3, y); near.lineTo(x, y - hw * 0.3); near.lineTo(x + a, ya - hw); near.lineTo(x + b, yb - hw); near.lineTo(x + l, y + dy - hw * 0.1);
+          near.lineTo(x + l + hw * 0.1, y + dy); near.lineTo(x + l, y + dy + hw * 0.1); near.lineTo(x + b, yb + hw); near.lineTo(x + a, ya + hw); near.lineTo(x, y + hw * 0.3);
+          near.closePath();
         }
       }
-      c.fillStyle = Hill.INK; c.fill();
+      c.fillStyle = Hill.INK; c.fill(near); c.fill(far);
       // and none of it where the caption goes, while there is one
       const out = 1 - smooth(0, 0.15, s.dive);
       if (out > 0) lift(c, s.back, out);
diff --git a/site/styles/vector.js b/site/styles/vector.js
index 8429f559..f8f2ca0f 100644
--- a/site/styles/vector.js
+++ b/site/styles/vector.js
@@ -3,7 +3,7 @@
    and the light a radar's sweep; by day the same lines on a pen plotter, brown and amber ink on cream, hatched for
    shade. The screen comes on with the hour. */
 (() => {
-const { lerp, smooth, hash, hex, rgba, angDiff, poly, ellipse, curve, dens, edges, beamPoly, waveScallops, hatGeom, head, joyAt, napEye, dot, shape, THEMES, TAU, DET, TEX } = Hill;
+const { lerp, smooth, hex, rgba, angDiff, poly, ellipse, curve, dens, edges, beamPoly, waveScallops, hatGeom, head, joyAt, napEye, dot, shape, THEMES, TAU, DET, TEX } = Hill;
 
 // what hides what's behind a shape: the screen, or the paper, at this hour (each frame, and for each island)
 let screen = '#0A0703';
@@ -47,7 +47,10 @@ function fan(s, c, alpha) {
   const g = s.g, P = s.P, { L, len, a0, a1 } = beamPoly(s), glow = glowAt(s.d), r0 = g.lh.er * 2.3, tr = trails.get(s.beam) || [];
   const lead = tr.length > 1 && angDiff(s.beam.a, tr[0].a) < 0 ? 0 : 1;
   const ray = a => { c.moveTo(L.x + Math.cos(a) * r0, L.y + Math.sin(a) * r0); c.lineTo(L.x + Math.cos(a) * len, L.y + Math.sin(a) * len); };
-  c.lineWidth = 1.1 * Hill.PW; c.strokeStyle = rgba(P.beam);
+  // at night the lines glow: the same lines under them, wide and faint
+  c.strokeStyle = rgba(P.beam); c.lineWidth = 6 * Hill.PW; c.globalAlpha = alpha * glow * 0.12;
+  c.beginPath(); for (let i = 0; i <= 8; i++) ray(lerp(a0, a1, i / 8)); c.stroke();
+  c.lineWidth = 1.1 * Hill.PW;
   for (const p of tr) {
     const k = 1 - (s.t - p.t) / 0.7;
     if (k <= 0 || p.a === s.beam.a) continue;
@@ -71,8 +74,7 @@ const pal = Hill.stops([
   [1,    { sky: '#080603', sky2: '#4A3206', sea: '#080603', sea2: '#9A6A08', foam: '#FFB000', hill: '#080603', hill2: '#080603', ink: '#FFB000', paper: '#FFB000', beam: '#FFC24A', cloud: '#080603', far: '#4A3206', glass: '#080603' }],
 ]);
 
-// the glow: the screen drawn small and blurred, laid back over it in light; and the scanlines
-const bloom = document.createElement('canvas').getContext('2d');
+// the scanlines
 let rows = null;
 
 Hill.style('phosphor', {
@@ -83,25 +85,25 @@ Hill.style('phosphor', {
   // labels and doodles in capitals, as the vector games lettered them
   hand: '"Monaco", "Menlo", ui-monospace, monospace', caps: true,
   before(s) { screen = rgba(s.P.sky); },
+  // the glow, baked into the cached layers and sprites: each blurred and laid back over itself in light
+  cached(s, c) {
+    const k = glowAt(s.d);
+    if (k < 0.01) return;
+    const b = 6 * c.getTransform().a;
+    c.save(); c.setTransform(1, 0, 0, 1, 0, 0);
+    c.filter = `blur(${b}px)`; c.globalCompositeOperation = 'lighter'; c.globalAlpha = k;
+    c.drawImage(c.canvas, 0, 0);
+    c.restore();
+  },
   after(s, c) {
     const k = glowAt(s.d);
     if (k < 0.01) return;
-    const cv = c.canvas, w = Math.ceil(cv.width / 4), h = Math.ceil(cv.height / 4), b = bloom.canvas;
-    if (b.width !== w || b.height !== h) { b.width = w; b.height = h; }
-    bloom.filter = `blur(${1.5 * s.dpr}px)`;
-    bloom.clearRect(0, 0, w, h); bloom.drawImage(cv, 0, 0, w, h);
     if (!rows) {
       const x = document.createElement('canvas').getContext('2d');
       x.canvas.width = 1; x.canvas.height = 3; x.fillStyle = '#000'; x.fillRect(0, 2, 1, 1);
       rows = x.createPattern(x.canvas, 'repeat');
     }
-    const flick = s.reduced ? 1 : 0.9 + 0.1 * hash(Math.floor(s.t * 30));
-    c.save(); c.setTransform(1, 0, 0, 1, 0, 0);
-    c.globalCompositeOperation = 'lighter'; c.globalAlpha = k * flick;
-    c.drawImage(b, 0, 0, cv.width, cv.height);
-    c.globalCompositeOperation = 'source-over'; c.globalAlpha = k * 0.35;
-    c.setTransform(s.dpr, 0, 0, s.dpr, 0, 0); c.fillStyle = rows; c.fillRect(0, 0, s.g.W, s.g.H);
-    c.restore();
+    c.globalAlpha = k * 0.35; c.fillStyle = rows; c.fillRect(0, 0, s.g.W, s.g.H); c.globalAlpha = 1;
   },
   draw: {
     land(base, s, c, w) { screen = rgba(s.P.sky); base(s, c, w); },