redraw the desk as cartoon skeuomorphism: CSS-only materials (no textures), light cream desk, per-item hues, cork board, receipt, scoreboard

agents.md

@@ -34,20 +34,24 @@ When in doubt, prefer updating. A stale README **or** agents.md is treated as a
 ## What this project is
 
 Personal portfolio site for **dvorakmortonxd.dev**. The default view is a
-**skeuomorphic desk**: a near-black surface with a monitor, mechanical keyboard,
-rack, drive drawer, pegboard of asset labels, label-printer report, business
-cards, clipboard and patch panel resting on it. A physical power switch flips to
-a **KDE Plasma desktop simulation**. Phones only ever get the desk.
+**cartoon-skeuomorphic desk**: a warm cream surface with a monitor, candy-keycap
+keyboard, mini rack, drive drawer, cork board of pinned cards, printed receipt,
+business cards, scoreboard and patch panel resting on it — all drawn in CSS, with
+no image assets. A physical power switch flips to a **KDE Plasma desktop
+simulation**. Phones only ever get the desk.
 
 - Framework: **Next.js 16** (App Router, Turbopack), **React 19**, TypeScript.
-- Styling: **Tailwind v4** for layout plus **`web.css`**, the material system
-  (near-black desk, anodised metal, machined aluminium, printed labels, black
-  glass, LEDs, rack rails, rocker switch) over five CC0 textures in
-  `public/textures` (credited on `/credits`). `globals.css` holds the tokens,
-  base styles and the reveals; `skeuo.css` and `page.css` are the desktop and
-  the shared desktop-app styles.
+- Styling: **Tailwind v4** for layout plus **`web.css`**, which is the whole desk
+  — materials (slate chassis, cream plastic, paper, cork, black glass), details
+  (screws, LEDs, pushpins, rails, barcode, torn receipt edge) and object layouts,
+  all CSS with `color-mix()` tints. `globals.css` holds the tokens, base styles
+  and the reveals; `skeuo.css` and `page.css` are the desktop and the shared
+  desktop-app styles. **The web theme ships no images.**
+- Hue system: list items take a `--tone` custom property from a shared palette
+  (orange, teal, blue, lilac, mint, coral, yellow), set inline, so objects are
+  colourful without per-item CSS.
 - Path alias: `@/*` → `src/*`.
-- Version: `3.3.0` (see `package.json`).
+- Version: `4.0.0` (see `package.json`).
 
 ### Scripts
 ```bash
@@ -85,7 +89,7 @@ src/app/
   page.css              → shared component styles used by the desktop apps
   skeuo.css             → KDE Plasma desktop styles
   data.ts               → socials, codingProjects, techProjects, friends, wallpapers
-  credits/page.tsx      → credits for the CC0 textures and fonts
+  credits/page.tsx      → credits (type only — the desk ships no assets)
   revival-inc/page.tsx  → fullscreen iframe embedding /public/revival-inc/index.html
   api/
     heatmap/route.ts    → proxy for git.dvorakmortonxd.dev contribution heatmap
@@ -124,14 +128,14 @@ scripts/
    desktop is up so its scroll position survives; the desktop mounts on demand
    (phones can never reach `skeuo`).
 
-Modes: `web` = the skeuomorphic desk (default/landing), `skeuo` = KDE Plasma
-desktop.
+Modes: `web` = the cartoon-skeuomorphic desk (default/landing), `skeuo` = KDE
+Plasma desktop.
 
-The desk uses **five CC0 textures** from ambientCG (`public/textures`: near-black
-desk wood, metal, paper, carbon, plastic), downscaled to 512 px and credited on
-`/credits`. The social SVGs are used as monochrome CSS masks (`.social-mask`);
+The desk ships **no image assets** — every surface is CSS. The only external
+visual files are the social SVGs, used as monochrome CSS masks (`.social-mask`);
 `linkedin.svg` is a filled badge that masks to a plain square, so `web-ui.tsx`
-renders an inline mark for it instead. The desktop still uses the image assets.
+renders an inline mark for it instead. The desktop still uses its own wallpaper
+and icons.
 
 ---
 
@@ -242,6 +246,12 @@ not free placement. Don't confuse the two.
 - Angles and offsets that hover states need to override live in CSS custom
   properties (e.g. `--tilt` on `.w-drive`), never in inline `style` transforms —
   an inline transform wins over `:hover`.
+- **The web desk is CSS-only by design.** No textures, no images, no `url()`
+  beyond the social masks. Build a surface from a flat gradient plus a thick
+  bottom edge (`0 5px 0 <edge-colour>`) and a soft cast shadow, and shade with
+  `color-mix(in srgb, var(--tone) N%, …)` instead of adding new hues to the
+  stylesheet. New list items take a `--tone` from the shared `TONES` palette in
+  `WebSite.tsx` / `web-ui.tsx` rather than hard-coding a colour.
 - The desk reveals blocks with `.reveal` (see `Reveal` in `web-ui.tsx`): hidden by
   default, `.is-in` shows. On load the first screenful cascades top-to-bottom
   (90ms per block, in DOM order); the rest reveal when they scroll in. **Wrap