revert to the state before the editorial rework (8669263): restore the terminal layout, phone home screen and pre-rework assets

This undoes 8669263..1880a5b as a single revert commit; the reverted work
remains reachable in history at 1880a5b.

agents.md

@@ -33,25 +33,16 @@ 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
-**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.
+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.
 
 - Framework: **Next.js 16** (App Router, Turbopack), **React 19**, TypeScript.
-- 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.
+- 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).
 - Path alias: `@/*` → `src/*`.
-- Version: `4.0.0` (see `package.json`).
+- Version: `2.1.0` (see `package.json`).
 
 ### Scripts
 ```bash
@@ -82,14 +73,12 @@ token.** Do not print it, copy it into new files, or push it anywhere else.
 
 ```
 src/app/
-  page.tsx              → renders <ThemeRoot/>, imports the theme stylesheets
-  layout.tsx            → html shell, metadata, next/font, ThemeScript
-  globals.css           → palette tokens, base, @theme/@utility, scroll reveals
-  web.css               → skeuomorphic material system + object layouts
-  page.css              → shared component styles used by the desktop apps
-  skeuo.css             → KDE Plasma desktop styles
+  page.tsx              → renders <ThemeRoot/>, imports page.css + skeuo.css
+  layout.tsx            → html shell, metadata, ThemeScript
+  globals.css           → base/reset styles + Tailwind import
   data.ts               → socials, codingProjects, techProjects, friends, wallpapers
-  credits/page.tsx      → credits (type only — the desk ships no assets)
+  page.css              → base / terminal theme styles
+  skeuo.css             → Windows/Plasma desktop + mobile home styles
   revival-inc/page.tsx  → fullscreen iframe embedding /public/revival-inc/index.html
   api/
     heatmap/route.ts    → proxy for git.dvorakmortonxd.dev contribution heatmap
@@ -97,45 +86,38 @@ src/app/
     ping/route.ts       → service health check (HTTP + minecraft:// via mcstatus.io); host allowlist
     frame/route.ts      → header-stripping proxy so an unframeable friend site loads in a window; host allowlist
   components/
-    ThemeRoot.tsx       → the web desk by default, desktop when theme === "skeuo"
-    WebSite.tsx         → the desk: rack hero, drive drawer, pegboard, patch panel
-    web-ui.tsx          → rack units, LED dashboard, social masks, Reveal
+    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
     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
     useDesktopIcons.ts  → desktop icon grid + drag/drop  (THE KEY FILE, see below)
-    useDragOrder.ts     → simple list reordering (used inside desktop apps)
+    useDragOrder.ts     → simple list reordering (mobile home screen only)
     useTheme.ts         → theme state via useSyncExternalStore
     ThemeScript.tsx     → inline pre-hydration script: theme + device detection
-    ServiceButton.tsx   → desktop service link + live status dot (pings /api/ping)
-    ContributionHeatmap.tsx → desktop heatmap + recent-commit widget (uses the two proxies)
+    ServiceButton.tsx   → service link + live status dot (pings /api/ping)
+    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 and sets `data-device` (`phone` | `desktop`)
-   from a user-agent sniff. It does **not** read a stored theme, so the page always
-   lands on `web`. CSS hides every `.desktop-toggle` on phones.
-2. `useTheme()` (in `useTheme.ts`) reads `data-theme` via `useSyncExternalStore`;
-   `setTheme` sets the attribute and dispatches `theme-change`. Nothing is
-   persisted, so a reload returns to `web`.
-3. `ThemeRoot` renders `WebSite` unless `theme === "skeuo"`, in which case it
-   mounts `WindowsDesktop` instead. The desk stays mounted (hidden) while the
-   desktop is up so its scroll position survives; the desktop mounts on demand
-   (phones can never reach `skeuo`).
+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.
+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.
 
-Modes: `web` = the cartoon-skeuomorphic desk (default/landing), `skeuo` = KDE
-Plasma desktop.
-
-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 its own wallpaper
-and icons.
+Themes: `skeuo` = KDE Plasma / Windows desktop, `terminal` = Gruvbox terminal.
 
 ---
 
@@ -198,9 +180,9 @@ Guard (already in place, keep it that way):
   `e.target` is always the button.
 
 ### Related
-`useDragOrder.ts` is a **different, simpler** hook used inside the desktop apps
-for reordering lists (drag one item over another to swap). It is list reordering,
-not free placement. Don't confuse the two.
+`useDragOrder.ts` is a **different, simpler** hook used only by `MobileHome` for
+reordering the phone app grid/dock (drag one item over another to swap). It is
+list reordering, not free placement. Don't confuse the two.
 
 ---
 
@@ -234,33 +216,11 @@ 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), `app-` / `kickoff` etc.
-  (desktop windows), and `w-` (the web desk's materials and objects, in
-  `web.css`). **Never name a `w-*` class after a Tailwind utility** — `.w-screen`
-  collided with Tailwind's `w-screen` (`width: 100vw`) and silently stretched
-  every panel to the viewport. Also remember `web.css` is unlayered, so its
-  properties beat Tailwind utilities on the same element; use a dedicated class
-  (e.g. `.w-navlink`, `.w-corner-tr`) or `!` when a utility must win. (`.w-screw`
-  sets `position: relative` for its slot, which is why screws are placed with
-  `.w-corner-*` instead of Tailwind's `absolute`.)
-- 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
-  every content block** — anything left unwrapped paints before the top and breaks
-  the top-to-bottom order. The `<noscript>` rule in `layout.tsx` keeps everything
-  visible without JS.
-- Several places deliberately use **imperative DOM work** (e.g. the drag ghost).
-  This is intentional for performance; prefer matching the existing pattern over
-  "Reactifying" it.
+- CSS classes are prefixed by area: `win-` (desktop), `mobile-` (phone),
+  `app-` / `kickoff` / `terminal` etc. Grep by prefix to find styles.
+- 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.
 - `setState` inside an effect is blocked by the ESLint config
   (`react-hooks/set-state-in-effect`). The one intentional exception is the
   grid init in `useDesktopIcons.ts`, which carries a scoped