aerolith 1.0.0 → 1.2.0

package/LICENSE

@@ -21,5 +21,9 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 The rendered sprite images in library/dist/ are covered by the same license.
+The fonts in library/dist/fonts/ are not: they are under the SIL Open Font
+License 1.1 (Istok Web, Aerolith Text, which is derived from Selawik, and
+Aerolith Display, which is derived from Istok Web). Their license files are in
+that folder.
 Bryce is a trademark of its respective owner. This project is not affiliated
 with or endorsed by it, and contains no part of the Bryce software.

package/README.md

@@ -1,32 +1,21 @@
 # Aerolith
 
-A Frutiger Aero UI library for the web. Every button, field, pane and icon is a sprite rendered in
-Bryce 2, the 1996 landscape renderer, and drawn onto native HTML elements with CSS.
+Tactile UI for the web. Every button, field, pane, icon and title letter is a Bryce 2 render
+(1996), laid over plain HTML elements.
 
 **[Live showcase](https://immineal.github.io/aerolith/)** · [npm](https://www.npmjs.com/package/aerolith) · [Changelog](CHANGELOG.md)
 
-![Aerolith components in light and dark mode](docs/images/hero.png)
-
-The glossy parts reflect a sunny meadow, with blue sky above and green hills below, that sits
-behind the camera in every render. Glass is real Bryce glass, rendered over two backdrops and
-matted so it stays translucent on your page. Pressed buttons sink into a bowl, so the highlight
-moves to the bottom edge. Every surface was rendered, not painted in CSS.
+![Aerolith buttons in light and dark mode](docs/images/hero.png)
 
 ## Use it
 
-No build step. Link the stylesheet and, optionally, the script:
+No build step:
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aerolith@1/library/dist/aerolith.css">
 <script src="https://cdn.jsdelivr.net/npm/aerolith@1/library/dist/aerolith.js" defer></script>
 ```
 
-The same files are on GitHub through jsDelivr
-(`https://cdn.jsdelivr.net/gh/immineal/aerolith@v1.0.0/library/dist/aerolith.css`) and in the
-release zip. Keep `sprites/` next to `aerolith.css`; the CSS finds the images relative to itself.
-
-Then use native elements with Aerolith classes:
-
 ```html
 <button class="aer-button">Convert to PDF</button>
 <button class="aer-button aer-secondary aer-l">Start</button>
@@ -41,39 +30,19 @@ Then use native elements with Aerolith classes:
 </button>
 ```
 
-Add `class="aer"` to `<body>` (or any container) to get the focus outline and reduced-motion
-handling. The showcase uses every component, so its source doubles as reference markup.
-
-### Package managers
+`class="aer"` on `<body>` adds the focus ring and reduced-motion rules. The showcase source has an
+example of every component. Self-hosting: keep `sprites/` and `fonts/` next to `aerolith.css`.
 
 | Where | Install | Then |
 |---|---|---|
-| npm | `npm i aerolith` | `import "aerolith/aerolith.css"` (and `import "aerolith/aerolith.js"`) |
-| GitHub Packages | `npm i @immineal/aerolith --registry=https://npm.pkg.github.com` | same, under `@immineal/aerolith` |
+| npm | `npm i aerolith` | `import "aerolith/aerolith.css"` (and `aerolith/aerolith.js`) |
+| GitHub Packages | `npm i @immineal/aerolith --registry=https://npm.pkg.github.com` | same |
 | Composer | `composer require immineal/aerolith` | serve `vendor/immineal/aerolith/library/dist/` |
 | PyPI | `pip install aerolith` | `aerolith.static_dir()`; Django: add `"aerolith"` to `INSTALLED_APPS` |
-| CDN | unpkg, jsDelivr, esm.sh mirror the npm package | see above |
-
-### Frameworks
-
-Aerolith is plain CSS classes on native elements, so it needs no wrapper components. Import the
-stylesheet once:
-
-```js
-// React (Vite, Next.js), Vue, Svelte, Solid: in your entry file or root layout
-import "aerolith/aerolith.css";
-import "aerolith/aerolith.js";   // optional: slider fill, drop zone, theme switch, lens
-```
-
-```astro
----
-// Astro: in a layout
-import "aerolith/aerolith.css";
----
-```
+| CDN | jsDelivr, unpkg, esm.sh | or `cdn.jsdelivr.net/gh/immineal/aerolith@v1.2.0/library/dist/aerolith.css` |
 
-In JSX write `className="aer-button"`. When you add components after page load (client-side
-routing), call `window.Aerolith.init(container)` to wire up the optional behaviour.
+React, Vue, Svelte, Astro: import the CSS once in your entry file and use the classes
+(`className` in JSX). Content added after load needs `window.Aerolith.init(container)`.
 
 ## Components
 
@@ -86,7 +55,7 @@ routing), call `window.Aerolith.init(container)` to wire up the optional behavio
 | `.aer-check`, `.aer-radio` | checkbox, radio | checked, mixed, disabled |
 | `.aer-field` | `<input>`, `<textarea>`, `<select>` | focus, disabled |
 | `.aer-select` | wrapper around `select.aer-field` | |
-| `.aer-segmented` | radios in labels, or links with `aria-current` | hover, selected |
+| `.aer-segmented` | radios in labels, or links with `aria-current` | hover, selected (slides with the JS) |
 | `.aer-choice` | `<label>` with a radio or checkbox | hover, checked, focus |
 | `.aer-drop` | `<label>` with `<input type="file">` | drag-over, focus |
 | `.aer-progress` | `<progress>` | value |
@@ -98,95 +67,79 @@ routing), call `window.Aerolith.init(container)` to wire up the optional behavio
 | `.aer-dialog`, `.aer-close` | `<dialog>`, `<button>` | open, backdrop |
 | `.aer-popover`, `.aer-menu` | `[popover]` | item hover/focus |
 | `.aer-bar` | `<header>`, `<nav>` | |
-| `.aer-lens` | any block | rim refraction in Chromium |
+| `.aer-lens` | any block | rim refraction; `data-aer-drag` makes it movable |
 | `.aer-compare` | two `<img>` and an `<input type="range">` | |
+| `.aer-display` (+ `.aer-aqua`, `.aer-glass`, `.aer-pearl`) | any heading | 116 characters |
 
-Dark mode follows `prefers-color-scheme`. Force it with `<html data-theme="dark">` (or `"light"`),
-or scope it with `.aer-dark`. The theme switch (`input[data-aer-theme]`) sets the attribute and
-remembers the choice.
+### Type
 
-## Accessibility
+```html
+<h1 class="aer-display">Welcome back</h1>            <!-- aqua; glass on dark pages -->
+<h2 class="aer-display aer-glass">Photos</h2>        <!-- clear glass: needs colour behind it -->
+<p class="aer-display aer-pearl">Ready</p>           <!-- white, for coloured backgrounds -->
+```
 
-- Every skin sits on the native element, so keyboard use, form submission, screen readers and
-  autofill behave as they would without Aerolith.
-- Label contrast was measured on the rendered sprite pixels, at the darkest 5 % of the label
-  area, before the text halo is added: white on aqua 4.4:1, white on green 4.7:1, dark ink on
-  clear glass at least 4.6:1 in both themes. Hover and pressed states are lighter, so their
-  labels get a stronger halo.
-- Controls are 44 px high by default. Small controls (checkbox, radio, close orb) get a 44 px hit
-  area through their label or a pseudo-element.
-- `forced-colors` (Windows high contrast) drops the sprites and falls back to system colours.
-  Icons switch to `CanvasText`.
-- `prefers-reduced-motion` stops the spinner and the toggle, toast and dialog animations.
-- Where look and accessibility conflict, the look won, but only after the cheap fixes (ink
-  choice, halos, hit areas) were in. Without their halo, glossy hover states measure 3.3 to
-  3.6:1 and pressed states about 2.4:1, because the sunken face catches more light. Both are
-  momentary states. `python3 library/build/a11y.py` prints the numbers for every labelled sprite.
+Aerolith Display is a colour font of rendered gel letters, so titles stay real, selectable text.
+Use it from 32 px up. Each material is about 0.6 MB, loaded only where used. Browsers without
+colour fonts show heavy Istok.
 
-## How it's made
+Body text is **Aerolith Text**, Selawik (an open Segoe UI stand-in) with a kern table, because Selawik
+ships without kerning. `data-aer-type="istok"` switches to **Istok Web**. Dark mode follows the system; `data-theme="dark"` or `"light"` on `<html>` forces it,
+and the sun/moon switch (`input[data-aer-theme]`) sets that for you.
 
-![The three render passes of one sprite](docs/images/passes.png)
-
-Bryce 2.1 for Windows runs under Wine on a virtual X display, seven instances side by side. Python
-writes each scene directly as a Bryce `.brc` file. The format was reverse-engineered for this:
-see [docs/brc-format.md](docs/brc-format.md). Bryce then renders it to disk. Each sprite is
-rendered three times:
+## Accessibility
 
-1. **K:** over black, which gives the colour and every glint.
-2. **W:** over mid grey, so the difference to K shows how much light the glass lets through.
-3. **M:** flat colours, a mask that says which pixels are solid and which are glass.
+Real form controls sit under every skin, so keyboards, screen readers and autofill work as usual.
 
-The matting step turns those into PNGs with real alpha: solid gloss is opaque, glass keeps its
-transparency, and a second matte for dark pages turns frosted glass into smoked glass.
+- Label contrast, measured on the rendered pixels: white on aqua 4.4:1, white on green 4.7:1,
+  dark on glass 4.6:1 or better. Hover states measure 3.3 to 3.6:1 without their halo, pressed
+  about 2.4:1. There the look won. `python3 library/build/a11y.py` prints every number.
+- Controls are 44 px high; small ones get a 44 px hit area.
+- `forced-colors` swaps the sprites for system colours. `prefers-reduced-motion` stops the
+  animations.
 
-Each sprite is rendered alone in its own scene. Rendered together, sprites reflect and refract
-their neighbours, which looks random once the sheet is cut up. The camera sits 4000 units away
-with a long lens, so the projection is near-orthographic and one CSS pixel is exactly six render
-pixels. That is downsampled to 3x, 2x and 1x files.
+## How it's made
 
-![Button states and orbs at 3x: the sky in the top half, the meadow in the lower bevel](docs/images/closeup.png)
+![The three render passes of one sprite](docs/images/passes.png)
 
-Behind the camera is the environment every gloss surface reflects: a custom sky, a big softbox
-for the highlight band, and a tilted meadow with two hills. The camera never sees any of it,
-but every glossy surface shows sky in its upper half and grass along its lower bevel.
+Bryce 2.1 runs under Wine on virtual displays, seven at once. Python writes each scene as a
+`.brc` file; I reverse-engineered the format in [docs/brc-format.md](docs/brc-format.md). Each
+sprite is rendered alone, three times: over black (colour and glints), over grey (how much light
+the glass lets through) and as a flat mask. From those the build makes PNGs where gloss is solid
+and glass is see-through.
 
-Shapes are Bryce symmetrical lattices (height fields) computed in NumPy: rounded rectangles with
-an eased bevel, a blurred-mask bowl for pressed states, a recessed well for fields, and icons
-embossed from vector drawings. The CSS draws every sprite with `border-image`, with slices
-measured in raw image pixels per resolution. That behaves the same in Chromium, Firefox and
-WebKit, where `image-set()` inside `border-image` does not.
+![Button states and orbs at 3x](docs/images/closeup.png)
 
-## Rebuild it yourself
+Behind the camera is a sky and a meadow with two hills, so every button reflects blue on top and
+green below. The shapes are height fields computed in NumPy. The CSS draws sprites with
+`border-image`.
 
-The rendered output is committed in `library/dist/`, so you only need this to change sprites.
-You need your own copy of Bryce 2 for Windows and Wine. Neither is included, and Bryce never will
-be.
+To render new sprites you need Wine and your own copy of Bryce 2 (not included):
 
 ```sh
 cd library/build
-python3 build.py              # renders what changed (hash cache), exports, writes dist/
-python3 build.py btn-         # only sprites whose names start with btn-
+python3 build.py              # renders what changed, exports to dist/
+python3 build.py btn-         # only sprites starting with btn-
 python3 build.py --export-only
-python3 shots.py              # screenshots in Chromium, Firefox, WebKit, light and dark
 ```
 
-The renderer setup is in [harness/README.md](harness/README.md), the design rules in
+Setup: [harness/README.md](harness/README.md). Design rules:
 [docs/ui-library/foundations.md](docs/ui-library/foundations.md).
 
 ## What it does not do
 
-- **No runtime colours.** The colours are baked into the sprites. A new colour means new renders.
-- **Fixed control heights.** Buttons come in 32, 44 and 56 px. They stretch in width (3- and
-  9-slice), not in height.
-- **Glass distortion is Chromium-only.** The lens rim refraction uses an SVG filter in
-  `backdrop-filter`, which only Chromium supports. Elsewhere you get the clear glass without
-  distortion.
-- **No JS framework components.** There are no React or Vue wrappers. The classes go on your
-  own elements.
-- **No icon font or SVG set.** The 35 icons are bitmaps at 16 and 24 px. They don't scale up
-  cleanly.
+- **No colour picker.** Colours are baked into the renders.
+- **Three heights.** 32, 44 or 56 px; buttons stretch sideways only.
+- **The lens bends light in Chromium, and in Firefox with `data-aer-lens-backdrop="#el"`** (the
+  element behind it). Safari shows plain glass.
+- **No framework components.** Put the classes on your own elements.
+- **Bitmap icons and titles.** Icons are 16 and 24 px. Titles are sharp up to about 120 px and
+  cover Latin with German and French accents.
 
 ## License
 
-MIT, for the code and the rendered sprites. See [LICENSE](LICENSE). Bryce is a trademark of its
-owner. This project is not affiliated with it and contains no part of the Bryce software.
+MIT for code and sprites ([LICENSE](LICENSE)). Fonts in `library/dist/fonts/` are SIL OFL 1.1:
+Istok Web (Andrey V. Panov) unmodified; Aerolith Text, derived from Selawik (Microsoft) with a kern
+table added and renamed because the OFL reserves "Selawik"; Aerolith Display, derived from
+Istok Web Bold. Bryce is a trademark of its owner; Aerolith is not affiliated and contains no
+Bryce code.

package/library/dist/aerolith.css

@@ -21,7 +21,7 @@
   --aer-target-gap: var(--aer-space-2);
 
   /* type: modular scale 1.2 */
-  --aer-font-ui: "Segoe UI", "Frutiger", "Myriad Pro", "Lucida Grande", Tahoma, system-ui, sans-serif;
+  --aer-font-ui: "Aerolith Text", "Selawik", "Segoe UI", "Istok Web", "Myriad Pro", Tahoma, system-ui, sans-serif;  /* bundled: type.css */
   --aer-font-text: var(--aer-font-ui);
   --aer-font-mono: "Consolas", "Lucida Console", ui-monospace, monospace;
   --aer-text-xs: 0.833rem;
@@ -68,6 +68,13 @@
 /* 10-foot / distance media: scale everything so the visual angle stays comfortable at ~3 m */
 .aer-distance { font-size: 150%; --aer-control: var(--aer-control-l); }
 
+/* Chromium on Linux and Windows rounds every glyph advance to whole pixels unless asked for precise
+   geometry: a 16 px label came out 1.6 px wider with an open gap after the f in "verfügbar".
+   Scoped to our own controls; a host page keeps its own text-rendering. */
+:is(.aer-button, .aer-field, .aer-select, .aer-badge, .aer-segmented, .aer-menu, .aer-label, .aer-option,
+    .aer-choice, .aer-check, .aer-radio, .aer-toggle, .aer-panel, .aer-card, .aer-callout, .aer-dialog,
+    .aer-popover, .aer-toast) { text-rendering: geometricPrecision; }
+
 /* label text on glossy sprites: white + halo (WCAG measures text against its halo) */
 .aer-on-gloss {
   color: var(--aer-on-gloss);
@@ -89,7 +96,7 @@
 @media (forced-colors: active) {
   .aer [class*="aer-"] { border-color: ButtonText; }
   .aer-button, .aer-field, .aer-panel { border: 1px solid ButtonText !important; }
-  .aer-button:focus-visible { outline: 2px solid Highlight; }
+  .aer-button:focus-visible, .aer .aer-field:focus-visible, .aer-field:focus-visible { outline: 2px solid Highlight; }
 }
 
 /* utilities */
@@ -98,6 +105,80 @@
   clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
 }
 
+/* ---- type.css ---- */
+/* Aerolith type.
+   Text: Aerolith Text (default; Selawik with a kern table, renamed because the OFL reserves "Selawik")
+   or Istok Web (data-aer-type="istok"), both bundled, both SIL OFL 1.1.
+   Titles: Aerolith Display, gel letters rendered in Bryce and packed into colour fonts. Each
+   material comes as OpenType-SVG (Firefox, Safari) and sbix (Chromium); tech() makes a browser
+   download only the file it can draw. The fonts keep outlines, so a browser without colour-font
+   support still shows the title, in plain heavy Istok. */
+
+@font-face { font-family: "Istok Web"; src: url(fonts/istok-web-regular.woff2) format("woff2");
+  font-weight: 400; font-style: normal; font-display: swap; }
+@font-face { font-family: "Istok Web"; src: url(fonts/istok-web-italic.woff2) format("woff2");
+  font-weight: 400; font-style: italic; font-display: swap; }
+@font-face { font-family: "Istok Web"; src: url(fonts/istok-web-bold.woff2) format("woff2");
+  font-weight: 700; font-style: normal; font-display: swap; }
+@font-face { font-family: "Istok Web"; src: url(fonts/istok-web-bold-italic.woff2) format("woff2");
+  font-weight: 700; font-style: italic; font-display: swap; }
+
+@font-face { font-family: "Aerolith Text"; src: url(fonts/aerolith-text-light.woff2) format("woff2");
+  font-weight: 300; font-display: swap; }
+@font-face { font-family: "Aerolith Text"; src: url(fonts/aerolith-text-regular.woff2) format("woff2");
+  font-weight: 400; font-display: swap; }
+@font-face { font-family: "Aerolith Text"; src: url(fonts/aerolith-text-semibold.woff2) format("woff2");
+  font-weight: 600; font-display: swap; }
+@font-face { font-family: "Aerolith Text"; src: url(fonts/aerolith-text-bold.woff2) format("woff2");
+  font-weight: 700; font-display: swap; }
+
+@font-face { font-family: "Aerolith Display Aqua"; font-display: swap;
+  src: url(fonts/aerolith-display-aqua.svg.woff2) format("woff2") tech(color-SVG),
+       url(fonts/aerolith-display-aqua.bmp.woff2) format("woff2") tech(color-sbix); }
+@font-face { font-family: "Aerolith Display Glass"; font-display: swap;
+  src: url(fonts/aerolith-display-glass.svg.woff2) format("woff2") tech(color-SVG),
+       url(fonts/aerolith-display-glass.bmp.woff2) format("woff2") tech(color-sbix); }
+@font-face { font-family: "Aerolith Display Glass Dark"; font-display: swap;
+  src: url(fonts/aerolith-display-glass-dark.svg.woff2) format("woff2") tech(color-SVG),
+       url(fonts/aerolith-display-glass-dark.bmp.woff2) format("woff2") tech(color-sbix); }
+@font-face { font-family: "Aerolith Display Pearl"; font-display: swap;
+  src: url(fonts/aerolith-display-pearl.svg.woff2) format("woff2") tech(color-SVG),
+       url(fonts/aerolith-display-pearl.bmp.woff2) format("woff2") tech(color-sbix); }
+
+[data-aer-type="istok"], .aer-type-istok {
+  --aer-font-ui: "Istok Web", "Aerolith Text", "Segoe UI", Tahoma, system-ui, sans-serif;
+}
+
+/* Big titles only: the letters are rendered at about 80 px per em and read best from 32 px up.
+   Weight 700 picks the bold text face while the font loads; the colour face itself has one weight and is
+   never synthesised. */
+.aer-display {
+  --_face: "Aerolith Display Aqua";
+  font-family: var(--_face), var(--aer-font-ui);
+  font-weight: 700; font-style: normal; font-synthesis: none;
+  line-height: 1.12; letter-spacing: 0; text-shadow: none;
+  color: var(--aer-ink);
+}
+/* Glass is clear: it needs colour or a picture behind it and all but vanishes on a pale page.
+   On dark pages the default face is Glass Dark, because Aqua's deep blue sinks into them
+   (APCA Lc about -22 against Glass Dark's -54). .aer-aqua keeps Aqua anyway, e.g. on a light
+   panel inside a dark page. */
+.aer-display.aer-aqua { --_face: "Aerolith Display Aqua"; }
+.aer-display.aer-glass { --_face: "Aerolith Display Glass"; }
+.aer-display.aer-pearl { --_face: "Aerolith Display Pearl"; }
+:root[data-theme="dark"] .aer-display:not(.aer-aqua, .aer-pearl),
+.aer-dark .aer-display:not(.aer-aqua, .aer-pearl),
+.aer-display.aer-dark:not(.aer-aqua, .aer-pearl) { --_face: "Aerolith Display Glass Dark"; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .aer-display:not(.aer-aqua, .aer-pearl) { --_face: "Aerolith Display Glass Dark"; }
+}
+@media (forced-colors: active) {
+  .aer-display { font-family: var(--aer-font-ui); }
+}
+
+/* Vista-style glow: a soft halo of page colour behind dark text on glass or busy backgrounds */
+.aer-glow { text-shadow: 0 0 1px var(--aer-page), 0 0 6px var(--aer-page), 0 0 12px var(--aer-page); }
+
 /* ---- sprites.css ---- */
 :root {
   --aer-badge-error-w: 60px; --aer-badge-error-h: 22px;
@@ -256,6 +337,10 @@
   --aer-lens-w: 160px; --aer-lens-h: 120px;
   --aer-lens-border: 37px 37px 37px 37px;
   --aer-lens-outset: 1px 1px 1px 1px;
+  --aer-logo-aqua-w: 36px; --aer-logo-aqua-h: 36px;
+  --aer-logo-aqua-outset: 0 0 0 0;
+  --aer-logo-liquid-w: 36px; --aer-logo-liquid-h: 36px;
+  --aer-logo-liquid-outset: 0 0 0 0;
   --aer-orb-error-w: 16px; --aer-orb-error-h: 16px;
   --aer-orb-error-outset: 1px 1px 1px 1px;
   --aer-orb-info-w: 16px; --aer-orb-info-h: 16px;
@@ -420,6 +505,8 @@
   --aer-iconbtn-primary-hover: url("sprites/iconbtn-primary-hover@1x.png");
   --aer-lens: url("sprites/lens@1x.png");
   --aer-lens-slice: 37 37 37 37 fill;
+  --aer-logo-aqua: url("sprites/logo-aqua@1x.png");
+  --aer-logo-liquid: url("sprites/logo-liquid@1x.png");
   --aer-orb-error: url("sprites/orb-error@1x.png");
   --aer-orb-info: url("sprites/orb-info@1x.png");
   --aer-orb-ok: url("sprites/orb-ok@1x.png");
@@ -562,6 +649,8 @@
   --aer-iconbtn-primary-hover: url("sprites/iconbtn-primary-hover@2x.png");
   --aer-lens: url("sprites/lens@2x.png");
   --aer-lens-slice: 74 74 74 74 fill;
+  --aer-logo-aqua: url("sprites/logo-aqua@2x.png");
+  --aer-logo-liquid: url("sprites/logo-liquid@2x.png");
   --aer-orb-error: url("sprites/orb-error@2x.png");
   --aer-orb-info: url("sprites/orb-info@2x.png");
   --aer-orb-ok: url("sprites/orb-ok@2x.png");
@@ -705,6 +794,8 @@
   --aer-iconbtn-primary-hover: url("sprites/iconbtn-primary-hover@3x.png");
   --aer-lens: url("sprites/lens@3x.png");
   --aer-lens-slice: 111 111 111 111 fill;
+  --aer-logo-aqua: url("sprites/logo-aqua@3x.png");
+  --aer-logo-liquid: url("sprites/logo-liquid@3x.png");
   --aer-orb-error: url("sprites/orb-error@3x.png");
   --aer-orb-info: url("sprites/orb-info@3x.png");
   --aer-orb-ok: url("sprites/orb-ok@3x.png");
@@ -1119,31 +1210,31 @@
 
 /* ---- skins.css ---- */
 /* generated by build/build.py: component state -> sprite */
-.aer-button { --_img: var(--aer-btn-primary-m); --_slice: var(--aer-btn-primary-m-slice); --_bw: var(--aer-btn-primary-m-border); --_out: var(--aer-btn-primary-m-outset); }
+.aer-button { --_img: var(--aer-btn-primary-m); --_slice: var(--aer-btn-primary-m-slice); --_bw: var(--aer-btn-primary-m-border); --_out: var(--aer-btn-primary-m-outset); --_pre: var(--aer-btn-primary-m-hover), var(--aer-btn-primary-m-active); }
 .aer-button:hover { --_img: var(--aer-btn-primary-m-hover); --_slice: var(--aer-btn-primary-m-hover-slice); --_bw: var(--aer-btn-primary-m-hover-border); --_out: var(--aer-btn-primary-m-hover-outset); }
 .aer-button:active, .aer-button[aria-pressed="true"] { --_img: var(--aer-btn-primary-m-active); --_slice: var(--aer-btn-primary-m-active-slice); --_bw: var(--aer-btn-primary-m-active-border); --_out: var(--aer-btn-primary-m-active-outset); }
-.aer-button.aer-s { --_img: var(--aer-btn-primary-s); --_slice: var(--aer-btn-primary-s-slice); --_bw: var(--aer-btn-primary-s-border); --_out: var(--aer-btn-primary-s-outset); }
+.aer-button.aer-s { --_img: var(--aer-btn-primary-s); --_slice: var(--aer-btn-primary-s-slice); --_bw: var(--aer-btn-primary-s-border); --_out: var(--aer-btn-primary-s-outset); --_pre: var(--aer-btn-primary-s-hover), var(--aer-btn-primary-s-active); }
 .aer-button.aer-s:hover { --_img: var(--aer-btn-primary-s-hover); --_slice: var(--aer-btn-primary-s-hover-slice); --_bw: var(--aer-btn-primary-s-hover-border); --_out: var(--aer-btn-primary-s-hover-outset); }
 .aer-button.aer-s:active, .aer-button.aer-s[aria-pressed="true"] { --_img: var(--aer-btn-primary-s-active); --_slice: var(--aer-btn-primary-s-active-slice); --_bw: var(--aer-btn-primary-s-active-border); --_out: var(--aer-btn-primary-s-active-outset); }
-.aer-button.aer-l { --_img: var(--aer-btn-primary-l); --_slice: var(--aer-btn-primary-l-slice); --_bw: var(--aer-btn-primary-l-border); --_out: var(--aer-btn-primary-l-outset); }
+.aer-button.aer-l { --_img: var(--aer-btn-primary-l); --_slice: var(--aer-btn-primary-l-slice); --_bw: var(--aer-btn-primary-l-border); --_out: var(--aer-btn-primary-l-outset); --_pre: var(--aer-btn-primary-l-hover), var(--aer-btn-primary-l-active); }
 .aer-button.aer-l:hover { --_img: var(--aer-btn-primary-l-hover); --_slice: var(--aer-btn-primary-l-hover-slice); --_bw: var(--aer-btn-primary-l-hover-border); --_out: var(--aer-btn-primary-l-hover-outset); }
 .aer-button.aer-l:active, .aer-button.aer-l[aria-pressed="true"] { --_img: var(--aer-btn-primary-l-active); --_slice: var(--aer-btn-primary-l-active-slice); --_bw: var(--aer-btn-primary-l-active-border); --_out: var(--aer-btn-primary-l-active-outset); }
-.aer-button.aer-secondary { --_img: var(--aer-btn-secondary-m); --_slice: var(--aer-btn-secondary-m-slice); --_bw: var(--aer-btn-secondary-m-border); --_out: var(--aer-btn-secondary-m-outset); }
+.aer-button.aer-secondary { --_img: var(--aer-btn-secondary-m); --_slice: var(--aer-btn-secondary-m-slice); --_bw: var(--aer-btn-secondary-m-border); --_out: var(--aer-btn-secondary-m-outset); --_pre: var(--aer-btn-secondary-m-hover), var(--aer-btn-secondary-m-active); }
 .aer-button.aer-secondary:hover { --_img: var(--aer-btn-secondary-m-hover); --_slice: var(--aer-btn-secondary-m-hover-slice); --_bw: var(--aer-btn-secondary-m-hover-border); --_out: var(--aer-btn-secondary-m-hover-outset); }
 .aer-button.aer-secondary:active, .aer-button.aer-secondary[aria-pressed="true"] { --_img: var(--aer-btn-secondary-m-active); --_slice: var(--aer-btn-secondary-m-active-slice); --_bw: var(--aer-btn-secondary-m-active-border); --_out: var(--aer-btn-secondary-m-active-outset); }
-.aer-button.aer-secondary.aer-s { --_img: var(--aer-btn-secondary-s); --_slice: var(--aer-btn-secondary-s-slice); --_bw: var(--aer-btn-secondary-s-border); --_out: var(--aer-btn-secondary-s-outset); }
+.aer-button.aer-secondary.aer-s { --_img: var(--aer-btn-secondary-s); --_slice: var(--aer-btn-secondary-s-slice); --_bw: var(--aer-btn-secondary-s-border); --_out: var(--aer-btn-secondary-s-outset); --_pre: var(--aer-btn-secondary-s-hover), var(--aer-btn-secondary-s-active); }
 .aer-button.aer-secondary.aer-s:hover { --_img: var(--aer-btn-secondary-s-hover); --_slice: var(--aer-btn-secondary-s-hover-slice); --_bw: var(--aer-btn-secondary-s-hover-border); --_out: var(--aer-btn-secondary-s-hover-outset); }
 .aer-button.aer-secondary.aer-s:active, .aer-button.aer-secondary.aer-s[aria-pressed="true"] { --_img: var(--aer-btn-secondary-s-active); --_slice: var(--aer-btn-secondary-s-active-slice); --_bw: var(--aer-btn-secondary-s-active-border); --_out: var(--aer-btn-secondary-s-active-outset); }
-.aer-button.aer-secondary.aer-l { --_img: var(--aer-btn-secondary-l); --_slice: var(--aer-btn-secondary-l-slice); --_bw: var(--aer-btn-secondary-l-border); --_out: var(--aer-btn-secondary-l-outset); }
+.aer-button.aer-secondary.aer-l { --_img: var(--aer-btn-secondary-l); --_slice: var(--aer-btn-secondary-l-slice); --_bw: var(--aer-btn-secondary-l-border); --_out: var(--aer-btn-secondary-l-outset); --_pre: var(--aer-btn-secondary-l-hover), var(--aer-btn-secondary-l-active); }
 .aer-button.aer-secondary.aer-l:hover { --_img: var(--aer-btn-secondary-l-hover); --_slice: var(--aer-btn-secondary-l-hover-slice); --_bw: var(--aer-btn-secondary-l-hover-border); --_out: var(--aer-btn-secondary-l-hover-outset); }
 .aer-button.aer-secondary.aer-l:active, .aer-button.aer-secondary.aer-l[aria-pressed="true"] { --_img: var(--aer-btn-secondary-l-active); --_slice: var(--aer-btn-secondary-l-active-slice); --_bw: var(--aer-btn-secondary-l-active-border); --_out: var(--aer-btn-secondary-l-active-outset); }
-.aer-button.aer-quiet { --_img: var(--aer-btn-glass-m); --_slice: var(--aer-btn-glass-m-slice); --_bw: var(--aer-btn-glass-m-border); --_out: var(--aer-btn-glass-m-outset); }
+.aer-button.aer-quiet { --_img: var(--aer-btn-glass-m); --_slice: var(--aer-btn-glass-m-slice); --_bw: var(--aer-btn-glass-m-border); --_out: var(--aer-btn-glass-m-outset); --_pre: var(--aer-btn-glass-m-hover), var(--aer-btn-glass-m-active); }
 .aer-button.aer-quiet:hover { --_img: var(--aer-btn-glass-m-hover); --_slice: var(--aer-btn-glass-m-hover-slice); --_bw: var(--aer-btn-glass-m-hover-border); --_out: var(--aer-btn-glass-m-hover-outset); }
 .aer-button.aer-quiet:active, .aer-button.aer-quiet[aria-pressed="true"] { --_img: var(--aer-btn-glass-m-active); --_slice: var(--aer-btn-glass-m-active-slice); --_bw: var(--aer-btn-glass-m-active-border); --_out: var(--aer-btn-glass-m-active-outset); }
-.aer-button.aer-quiet.aer-s { --_img: var(--aer-btn-glass-s); --_slice: var(--aer-btn-glass-s-slice); --_bw: var(--aer-btn-glass-s-border); --_out: var(--aer-btn-glass-s-outset); }
+.aer-button.aer-quiet.aer-s { --_img: var(--aer-btn-glass-s); --_slice: var(--aer-btn-glass-s-slice); --_bw: var(--aer-btn-glass-s-border); --_out: var(--aer-btn-glass-s-outset); --_pre: var(--aer-btn-glass-s-hover), var(--aer-btn-glass-s-active); }
 .aer-button.aer-quiet.aer-s:hover { --_img: var(--aer-btn-glass-s-hover); --_slice: var(--aer-btn-glass-s-hover-slice); --_bw: var(--aer-btn-glass-s-hover-border); --_out: var(--aer-btn-glass-s-hover-outset); }
 .aer-button.aer-quiet.aer-s:active, .aer-button.aer-quiet.aer-s[aria-pressed="true"] { --_img: var(--aer-btn-glass-s-active); --_slice: var(--aer-btn-glass-s-active-slice); --_bw: var(--aer-btn-glass-s-active-border); --_out: var(--aer-btn-glass-s-active-outset); }
-.aer-button.aer-quiet.aer-l { --_img: var(--aer-btn-glass-l); --_slice: var(--aer-btn-glass-l-slice); --_bw: var(--aer-btn-glass-l-border); --_out: var(--aer-btn-glass-l-outset); }
+.aer-button.aer-quiet.aer-l { --_img: var(--aer-btn-glass-l); --_slice: var(--aer-btn-glass-l-slice); --_bw: var(--aer-btn-glass-l-border); --_out: var(--aer-btn-glass-l-outset); --_pre: var(--aer-btn-glass-l-hover), var(--aer-btn-glass-l-active); }
 .aer-button.aer-quiet.aer-l:hover { --_img: var(--aer-btn-glass-l-hover); --_slice: var(--aer-btn-glass-l-hover-slice); --_bw: var(--aer-btn-glass-l-hover-border); --_out: var(--aer-btn-glass-l-hover-outset); }
 .aer-button.aer-quiet.aer-l:active, .aer-button.aer-quiet.aer-l[aria-pressed="true"] { --_img: var(--aer-btn-glass-l-active); --_slice: var(--aer-btn-glass-l-active-slice); --_bw: var(--aer-btn-glass-l-active-border); --_out: var(--aer-btn-glass-l-active-outset); }
 .aer-button:disabled, .aer-button[aria-disabled="true"] { --_img: var(--aer-btn-disabled-m); --_slice: var(--aer-btn-disabled-m-slice); --_bw: var(--aer-btn-disabled-m-border); --_out: var(--aer-btn-disabled-m-outset); }
@@ -1371,6 +1462,8 @@
 .aer-field:focus {
   border-image: var(--aer-field-focus) var(--aer-field-focus-slice) / var(--aer-field-focus-border) / var(--aer-field-focus-outset) stretch;
 }
+/* the rendered aqua rim is the focus indicator: the square outline would cut across the rounded well */
+.aer .aer-field:focus-visible, .aer-field:focus-visible { outline: none; }
 textarea.aer-field { block-size: auto; min-block-size: calc(var(--aer-control) * 2); padding-block: var(--aer-space-3); resize: vertical; line-height: var(--aer-leading); }
 .aer-field:disabled, .aer-field[readonly] { color: var(--aer-ink-muted); }
 .aer-label { display: grid; gap: var(--aer-space-1); font: 600 var(--aer-text-s) / 1.3 var(--aer-font-ui); color: var(--aer-ink); }
@@ -1546,6 +1639,20 @@ a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover {
 }
 .aer-segmented > :has(:focus-visible) { outline: 2px solid var(--aer-focus); outline-offset: 2px; }
 .aer-segmented > :has(:disabled) { opacity: 0.5; cursor: not-allowed; }
+/* with aerolith.js: one pill carries the chip and slides; the items' own chips give way */
+.aer-segmented[data-aer-slide] { position: relative; isolation: isolate; }
+.aer-seg-pill {
+  position: absolute; left: 0; top: 0; z-index: -1; box-sizing: border-box; pointer-events: none;
+  border-style: solid; border-color: transparent; border-width: 0;
+  border-image: var(--aer-seg-chip) var(--aer-seg-chip-slice) / var(--aer-seg-chip-border) / var(--aer-seg-chip-outset) stretch;
+}
+.aer-segmented[data-aer-ready] > .aer-seg-pill {
+  transition: transform 300ms cubic-bezier(.3, 1.2, .5, 1), width 300ms cubic-bezier(.3, 1.2, .5, 1);
+}
+.aer-segmented[data-aer-slide] > :is(:has(:checked), [aria-current]:not([aria-current="false"]), [aria-selected="true"], [aria-pressed="true"]) {
+  border-image: none;
+}
+.aer-segmented[data-aer-ready] > :not(.aer-seg-pill) { transition: color 200ms, text-shadow 200ms; }
 
 /* ------------------------------------------------------------------ choice card: a whole tile is the radio/checkbox
    <label class="aer-choice"><input type="radio" class="aer-radio" name="f"> <b>PDF</b> <small>…</small></label> */
@@ -1622,9 +1729,14 @@ a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover {
   border-style: solid; border-color: transparent; border-width: 0;
   border-image: var(--aer-card) var(--aer-card-slice) / var(--aer-card-border) / var(--aer-card-outset) stretch;
   color: var(--aer-ink); font: var(--aer-text-m) / 1.4 var(--aer-font-text);
+  border-radius: 14px; -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
   animation: aer-toast-in 260ms cubic-bezier(.3, 1.4, .5, 1);
 }
 @keyframes aer-toast-in { from { opacity: 0; translate: 0 12px; } }
+@media (max-width: 600px) {           /* phones: centred, clear of the screen edges */
+  .aer-toaster { inset-inline: var(--aer-space-4); justify-items: center; }
+  .aer-toast { max-inline-size: 100%; }
+}
 
 /* ------------------------------------------------------------------ dialog: frosted window on native <dialog>
    <dialog class="aer-dialog"><header>…<button class="aer-close" aria-label="Close">…</button></header>…</dialog> */
@@ -1635,7 +1747,8 @@ a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover {
   background: none; color: var(--aer-ink); font: var(--aer-text-m) / var(--aer-leading) var(--aer-font-text);
   overflow: visible;
 }
-.aer-dialog::backdrop { background: rgba(8, 40, 80, 0.28); backdrop-filter: blur(3px) saturate(1.2); }
+.aer-dialog::backdrop { background: rgba(8, 40, 80, 0.34);
+  -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); }
 .aer-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: var(--aer-space-3);
   margin: calc(-1 * var(--aer-space-2)) 0 var(--aer-space-3); font: 600 var(--aer-text-l) / 1.3 var(--aer-font-ui); }
 .aer-dialog[open] { animation: aer-dialog-in 220ms cubic-bezier(.3, 1.3, .5, 1); }
@@ -1647,7 +1760,7 @@ a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover {
   display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px;
   border-style: solid; border-color: transparent; border-width: 0;
   border-image: var(--aer-close) 0 fill / 0 / var(--aer-close-outset) stretch;
-  background: none; cursor: pointer;
+  background: none; cursor: pointer; border-radius: 50%;      /* the focus ring follows the gem */
 }
 .aer-close::after { content: ""; position: absolute; inset: -10px; }
 .aer-close:hover { border-image: var(--aer-close-hover) 0 fill / 0 / var(--aer-close-hover-outset) stretch; }
@@ -1662,8 +1775,10 @@ a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover {
   border-image: var(--aer-card) var(--aer-card-slice) / var(--aer-card-border) / var(--aer-card-outset) stretch;
   background: none; color: var(--aer-ink); font: var(--aer-text-m) / 1.4 var(--aer-font-text);
   overflow: visible;
+  border-radius: 14px; -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
 }
 .aer-menu { display: grid; gap: 2px; }
+[data-aer-menu] { -webkit-touch-callout: none; }    /* long-press opens our menu, not the system's */
 .aer-menu > :is(a, button) {
   display: flex; align-items: center; gap: var(--aer-space-2); box-sizing: border-box;
   min-block-size: 36px; padding: 0 var(--aer-space-3); margin: 0;
@@ -1735,20 +1850,59 @@ a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover {
 }
 .aer-bar > .aer-spacer { flex: 1; }
 
-/* ------------------------------------------------------------------ lens: clear thick glass; in Chromium aerolith.js
-   adds the refraction of its rim (an SVG displacement map computed from the same bevel profile) */
+/* ------------------------------------------------------------------ lens: clear thick glass. aerolith.js adds the
+   refraction of its rim (an SVG displacement map computed from the same bevel profile): in Chromium, and in
+   Firefox when data-aer-lens-backdrop names the element behind it. Safari shows plain glass. */
 .aer-lens {
   position: relative; box-sizing: border-box; padding: var(--aer-space-5);
   border-style: solid; border-color: transparent; border-width: 0;
   border-image: var(--aer-lens) var(--aer-lens-slice) / var(--aer-lens-border) / var(--aer-lens-outset) stretch;
   color: var(--aer-ink);
 }
+/* with a backdrop copy: copy at the bottom, glass sprite over it, content on top */
+.aer-lens[data-aer-lens-view] { isolation: isolate; border-image: none; }
+.aer-lens[data-aer-lens-view]::before {
+  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
+  border-style: solid; border-color: transparent; border-width: 0;
+  border-image: var(--aer-lens) var(--aer-lens-slice) / var(--aer-lens-border) / var(--aer-lens-outset) stretch;
+}
+.aer-lens-view { position: absolute; z-index: -2; overflow: hidden; pointer-events: none; }   /* placed by aerolith.js */
+/* the focus ring follows the glass, not a square box */
+.aer-lens[data-aer-drag] { border-radius: 24px; }
+.aer-lens[data-aer-drag] { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
+.aer-lens[data-aer-dragging] { cursor: grabbing; }
 
 /* ------------------------------------------------------------------ preferences */
+/* ------------------------------------------------------------------ state sprites, fetched up front
+   Each control lists its hover / pressed / checked sprites in --_pre; they hang off it as zero-size
+   backgrounds, so the browser downloads them with the page (at the same resolution and theme the state
+   will use) and a first tap never shows an empty control while its state sprite loads. */
+.aer-iconbtn { --_pre: var(--aer-iconbtn-primary-hover), var(--aer-iconbtn-primary-active); }
+.aer-iconbtn.aer-quiet { --_pre: var(--aer-iconbtn-glass-hover), var(--aer-iconbtn-glass-active); }
+.aer-toggle { --_pre: var(--aer-toggle-track-on), var(--aer-toggle-knob-on); }
+.aer-toggle.aer-theme { --_pre: var(--aer-toggle-knob-moon); }
+.aer-check { --_pre: var(--aer-check-on), var(--aer-check-mixed); }
+.aer-radio { --_pre: var(--aer-radio-on); }
+.aer-segmented, .aer-menu { --_pre: var(--aer-seg-chip-hover), var(--aer-seg-chip); }
+.aer-choice { --_pre: var(--aer-card-hover), var(--aer-choice-on); }
+a.aer-card, button.aer-card, .aer-card[data-interactive] { --_pre: var(--aer-card-hover); }
+.aer-close { --_pre: var(--aer-close-hover); }
+.aer-preload {                       /* added by aerolith.js when the page has dialogs, popovers or toasts */
+  position: fixed; inset-inline-start: -1px; inset-block-start: -1px; inline-size: 1px; block-size: 1px;
+  overflow: hidden; pointer-events: none;
+  --_pre: var(--aer-dialog), var(--aer-close), var(--aer-close-hover), var(--aer-card), var(--aer-seg-chip-hover),
+          var(--aer-orb-ok);
+}
+.aer-preload, .aer-button, .aer-iconbtn, .aer-toggle, .aer-check, .aer-radio, .aer-segmented, .aer-menu, .aer-choice,
+a.aer-card, button.aer-card, .aer-card[data-interactive], .aer-close {
+  background-image: var(--_pre, none); background-size: 0 0; background-repeat: no-repeat;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .aer-spinner::before { animation: none; }
   .aer-toggle::before, .aer-progress::-webkit-progress-value { transition: none; }
   .aer-toast, .aer-dialog[open] { animation: none; }
+  .aer-segmented[data-aer-ready] > .aer-seg-pill, .aer-segmented[data-aer-ready] > :not(.aer-seg-pill) { transition: none; }
 }
 /* forced colours: sprites are dropped, native rendering and system colours take over */
 @media (forced-colors: active) {
@@ -1761,6 +1915,7 @@ a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover {
     background: Highlight; color: HighlightText; forced-color-adjust: none;
   }
   .aer-toggle, .aer-check, .aer-radio { appearance: auto; border-image: none; }
-  .aer-toggle::before, .aer-spinner::before, .aer-callout::before { display: none; }
+  .aer-toggle::before, .aer-spinner::before, .aer-callout::before, .aer-seg-pill,
+  .aer-lens::before, .aer-lens-view { display: none; }
   .aer-spinner { border: 3px dotted CanvasText; border-radius: 50%; }
 }