Delete the example's stylesheet

examples/webpage/README.md

@@ -34,13 +34,34 @@ trunk serve --open
 | Module | What lives there |
 | --- | --- |
 | `lib.rs` | App shell: router, sticky header with active-route indicator, scroll-progress rail, docs shell and prev/next pager, footer |
-| `fx.rs` | Reusable reactive effects — pointer spotlight, 3D tilt, magnetic controls, aurora background, film grain, scroll-spy, marquee, kinetic headlines |
+| `fx.rs` | Reusable reactive effects — pointer spotlight, 3D tilt, magnetic controls, aurora background, film grain, scroll-spy, marquee, kinetic headlines, glass and scrollbar surfaces |
+| `keyframes.rs` | Every animation on the site, declared with `dwkeyframes!` |
 | `palette.rs` | The ⌘K command palette: fuzzy search over every route, full keyboard control |
-| `styles.rs` | App-level raw CSS — keyframes, glass surfaces, grain, masks |
 | `reveal.rs` | `IntersectionObserver`-driven progressive reveal on scroll |
 | `pages/signal_lab.rs` | The reactivity demo on the home page |
 | `pages/docs/` | Documentation pages, sidebar, live example frames, syntax-highlighted source |
 
+### There is no app stylesheet
+
+This example used to carry ~300 lines of hand-written CSS. It now carries none.
+The only `<style>` block left is in `public/index.html`, holding exactly the
+things that are document-level rather than component-level: the font-family
+classes, `:root` colour-scheme, `::selection`, a site-wide `:focus-visible` ring,
+and the blanket `prefers-reduced-motion` clamp.
+
+Everything else went back into dwind:
+
+- **Keyframes** are `dwkeyframes!` declarations in `keyframes.rs`, which mint
+  compile-checked `animate-*` classes and inject their rule lazily.
+- **The pointer spotlight** — a `::before` glow and a masked `::after` ring, both
+  tracking the cursor — is `dwclass!` variants. `content: ""` is supplied
+  automatically, and the mask declarations that have no utility use the
+  `[property:value]` escape hatch.
+- **The scroll-reveal cascade**, including the parent-state `.reveal-in > *`
+  rules and the `:nth-child` stagger, is child-selector variants.
+- **Scrollbars, glass panels and the marquee hover-pause** are variants too —
+  `[&::-webkit-scrollbar-thumb]:`, `[&:hover > *]:`.
+
 ### The effects are signals, not an animation library
 
 Nothing here reaches for a JS animation runtime. Each effect is a `Mutable` that
@@ -65,4 +86,6 @@ write as it happens, next to a re-render count that stays at zero.
 - <kbd>↑</kbd> <kbd>↓</kbd> — move through results, <kbd>⏎</kbd> to open, <kbd>Esc</kbd> to dismiss
 
 Everything interactive is reachable by keyboard, and `prefers-reduced-motion` is
-honoured throughout — the marquee, sheen, tilt, and reveal animations all stop.
+honoured throughout. CSS handles the animations and transitions; the pointer tilt
+and the magnetic drift are `style_signal` writes, which no `@media` block can
+stop, so they read the preference as a signal and skip the transform outright.

examples/webpage/public/index.html

@@ -60,11 +60,6 @@
                 transition-duration: 0.01ms !important;
                 transition-delay: 0ms !important;
             }
-
-            .reveal-section > * {
-                opacity: 1 !important;
-                transform: none !important;
-            }
         }
     </style>
 </head>