turn the terminal/Gruvbox theme into the skeuo console

- rename the theme everywhere: id terminal -> skeuo, desktop sim skeuo -> desktop,
  skeleton terminal shell -> SkeuoLayout, page.css -> shared.css (shared components),
  old skeuo.css -> desktop.css, storage key theme -> dmx-theme (with migration)
- rebuild the theme as a walnut-and-aluminium home-lab console: brass plates, patch bay,
  analogue gym gauges, clipboard, stitched leather logbook, service rack with pilot lamps,
  framed print, chart recorder, cartridge, software box, pegboard tags, card-index drawer
- all materials are CSS + inline-SVG noise (no texture images); Barlow Semi Condensed +
  Courier Prime via next/font with fallbacks
- desktop mode is now phone-only (<=768px): switch hidden above that, stored desktop
  preference overridden, sim never mounted on wide viewports
- drop the ASCII train background and its gruvbox.webp asset

agents.md

@@ -34,13 +34,18 @@ 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**. It's not a normal website —
-it ships **two fully interactive desktop/OS simulations** plus a terminal, and
-picks which one to show based on theme and device.
+it ships a hand-built **skeuomorphic console** (`skeuo`, the default) plus a
+KDE-style **desktop simulation** that is only offered on phone-width viewports.
 
 - Framework: **Next.js 16** (App Router, Turbopack), **React 19**, TypeScript.
-- Styling: plain CSS files (`page.css`, `skeuo.css`), no CSS-in-JS, no Tailwind
-  utilities in the components (Tailwind is present via PostCSS but the look is
-  hand-written CSS).
+- Styling: plain CSS files — `skeuo.css` (the console), `desktop.css` (KDE sim +
+  mobile home), `shared.css` (components both shells render) and `globals.css`
+  (base/reset). No CSS-in-JS, no Tailwind utilities in the components (Tailwind
+  is present via PostCSS but the look is hand-written CSS). **Materials are CSS
+  + inline-SVG noise only — no texture images.**
+- Fonts: Barlow Semi Condensed (metal labels, headings, controls) + Courier Prime
+  (paper, readouts) via `next/font/google` with explicit fallbacks; Monocraft
+  stays self-hosted in `public/` for the desktop's terminal windows.
 - Path alias: `@/*` → `src/*`.
 - Version: `2.1.0` (see `package.json`).
 
@@ -73,12 +78,13 @@ token.** Do not print it, copy it into new files, or push it anywhere else.
 
 ```
 src/app/
-  page.tsx              → renders <ThemeRoot/>, imports page.css + skeuo.css
-  layout.tsx            → html shell, metadata, ThemeScript
+  page.tsx              → renders <ThemeRoot/>, imports shared.css + skeuo.css + desktop.css
+  layout.tsx            → html shell, metadata, fonts, ThemeScript
   globals.css           → base/reset styles + Tailwind import
   data.ts               → socials, codingProjects, techProjects, friends, wallpapers
-  page.css              → base / terminal theme styles
-  skeuo.css             → Windows/Plasma desktop + mobile home styles
+  skeuo.css             → the skeuo console: materials, objects, depth
+  desktop.css           → Windows/Plasma desktop + mobile home styles
+  shared.css            → styles for components both shells render
   revival-inc/page.tsx  → fullscreen iframe embedding /public/revival-inc/index.html
   api/
     heatmap/route.ts    → proxy for git.dvorakmortonxd.dev contribution heatmap
@@ -87,9 +93,9 @@ src/app/
     frame/route.ts      → header-stripping proxy so an unframeable friend site loads in a window; host allowlist
   components/
     ThemeRoot.tsx       → picks which shell to show (the router of the UI)
-    TerminalLayout.tsx  → "terminal" theme (Gruvbox)
-    WindowsDesktop.tsx  → "skeuo" theme, desktop: icons, windows, taskbar
-    MobileHome.tsx      → "skeuo" theme, phone: app grid + dock
+    SkeuoLayout.tsx     → "skeuo" theme (the console): every section as an object
+    WindowsDesktop.tsx  → "desktop" theme, desktop: icons, windows, taskbar
+    MobileHome.tsx      → "desktop" theme, phone: app grid + dock
     WinWindow.tsx       → a single draggable/resizable window
     apps.tsx            → APPS registry + the content of each app + in-app terminal
                           + embedded-site windows + the Minecraft-style SMP menu
@@ -101,23 +107,31 @@ src/app/
     ContributionHeatmap.tsx → heatmap + recent-commit widget (uses the two proxies)
     Clock.tsx           → live clock (useSyncExternalStore + interval)
     JokerLogo.tsx       → site logo with a click easter egg
-    SlBackground.tsx    → animated ASCII train background (terminal theme)
 scripts/
   dev-server.mjs      → custom dev server: live updates minus the dev-only debug surface
 ```
 
 ### How UI selection works
-1. `ThemeScript` runs before paint. It reads `localStorage.theme` and sets
-   `data-theme` (`skeuo` | `terminal`) and `data-device` (`phone` | `desktop`)
-   on `<html>` from a user-agent sniff.
+1. `ThemeScript` runs before paint. It reads `localStorage['dmx-theme']`,
+   migrating the legacy `theme` key once (`terminal` → `skeuo`, `skeuo` →
+   `desktop`), then sets `data-theme` (`skeuo` | `desktop`) and `data-device`
+   (`phone` | `desktop`, from a user-agent sniff) on `<html>`. Viewports wider
+   than 768 px always get `skeuo`.
 2. `useTheme()` (in `useTheme.ts`) reads `data-theme` via
    `useSyncExternalStore` and dispatches a `theme-change` event on toggle.
-3. `ThemeRoot` shows the terminal when `theme === "terminal"`; otherwise it
-   mounts **both** `WindowsDesktop` and `MobileHome` and lets CSS
-   (`html[data-device="phone"]`) decide which is visible. The desktop stays
-   mounted while hidden so the Welcome window isn't recreated.
+   `setTheme("desktop")` is refused when the viewport is wider than 768 px, so
+   nothing can leave a desktop visitor stuck in the sim.
+3. `ThemeRoot` always renders `SkeuoLayout` (kept mounted, just hidden, while
+   the sim is up so its scroll position survives). On phone-width viewports it
+   additionally mounts **both** `WindowsDesktop` and `MobileHome` and lets CSS
+   (`html[data-device="phone"]`) decide which is visible; they stay mounted while
+   hidden so the Welcome window isn't recreated. The sim is never mounted wider
+   than that.
 
-Themes: `skeuo` = KDE Plasma / Windows desktop, `terminal` = Gruvbox terminal.
+Themes: `skeuo` = the site itself (walnut + aluminium console), `desktop` = the
+phone-only KDE Plasma / Windows simulation. The physical switch between them sits
+on the nameplate (`.sk-desktop-switch`, styled as `.sk-switch`) and is only
+visible at ≤ 768 px.
 
 ---
 
@@ -217,7 +231,31 @@ list reordering, not free placement. Don't confuse the two.
 - Components are client components (`"use client"` at the top) — they use
   pointer events and window APIs freely.
 - CSS classes are prefixed by area: `win-` (desktop), `mobile-` (phone),
-  `app-` / `kickoff` / `terminal` etc. Grep by prefix to find styles.
+  `app-` / `kickoff` / `terminal` etc. Grep by prefix to find styles. The skeuo
+  theme's own classes all start with `sk-` (`skeuo.css`) and that prefix is
+  reserved for it — `desktop.css` only ever uses `skeuo-*` for its two roots.
+- **The skeuo theme is CSS-only.** No texture images, no `url()` beyond the
+  social SVG masks: wood, aluminium, brass, leather, bakelite, paper, glass and
+  rubber are gradients + `color-mix()` + an inline-SVG `feTurbulence` grain
+  (`--sk-noise`). Build new surfaces from those tokens (`--sk-raise-1/2`,
+  `--sk-sink-1`, `--sk-alu-*`, `--sk-brass-*`, `--sk-wood-*`, `--sk-paper-*`)
+  rather than inventing new colours, and keep the light coming from the
+  top-left. Simplify (drop noise, flatten shadows) at ≤ 768 px.
+- **`shared.css` is shared.** Both shells render `ServiceButton`,
+  `ContributionHeatmap`, `JokerLogo`, the project cards and the social buttons.
+  Change their base styles only if you check the desktop (`.app-surface` /
+  `.win-body` in `desktop.css` layers its own overrides on top). The skeuo theme
+  restyles them from `skeuo.css`, scoped to `html[data-theme="skeuo"]`, so the
+  desktop keeps its look. The `:root` block in `shared.css` is only the fallback
+  palette those components inherit.
+- **Motion stays cheap.** Transitions are 100–150 ms and only ever animate
+  `transform` / `opacity`; pressed states move down and swap their shadow
+  without animating it. Anything animated respects
+  `@media (prefers-reduced-motion: reduce)`.
+- **The desktop sim is phone-only.** `.sk-switch` is hidden above 768 px and
+  `setTheme("desktop")` refuses to apply there; `ThemeRoot` also force-switches
+  back to `skeuo` when the viewport grows. Don't add another way into the sim
+  without keeping those three guards in place.
 - Several places deliberately use **imperative DOM work** (drag ghost,
   transform-origin for the mobile launch animation). This is intentional for
   performance; prefer matching the existing pattern over "Reactifying" it.