Gamified / RPG UI

Build a personal blog home page styled as a JRPG save file with a soft, friendly finish: every block of content is a game menu window, the nav is a command menu with a pointing-hand cursor, the hero is a title screen, and posts and projects carry rarity tiers. Keep it gentle rather than retro-pixel; the softness comes from gradients and rounded windows, not from chunky sprites.

Make one window component and use it everywhere: `background: linear-gradient(155deg, var(--win-a) 0%, var(--win-b) 55%, var(--win-c) 100%)`, a 2px bright border, a 9px radius, a dark 2px outer ring, a soft drop shadow, and a 1px inset gloss line along the top. Some windows carry a small tab on their top edge (`Lore codex`) the way game menus label panels. Lay content in a wrap of about 1200px: the title screen is a two-column grid (`minmax(0, 1.25fr) minmax(0, .95fr)`), then three-column card grids for Start here and AI writing, one wide codex window for the Digital Garden list, a two-column grid of skill windows, a three-column equipment grid, and a three-column row of party links, key items and a gold Work-with-me window.

Set headings in **Cinzel** at 700 with small caps feel for that engraved title card look, the hero headline around 3rem; set menu commands, labels, stats and eyebrows in **Chakra Petch** at 600 with wide `0.14em` tracking in uppercase; set body copy in **Source Sans 3** at 18px.

The light theme sits on a pale blue field `#cfdcec` fading to `#eef3f9`, with windows from white to `#f1f5fa` and slate edges. The dark theme is a night field `#070b16` with windows from `#4a6d99` through `#243b5e` to `#111d33`, white text with a faint text shadow, and gold `#f4c75a` labels. Rarity tiers always pair a color with a text label and a small diamond gem: Legendary orange `#ffb45a` for hand-picked posts, Epic violet `#cf9bff` for popular pieces and stories, Rare blue `#7ab4ff` for AI guides, Uncommon green `#74e09a`, Common grey. Legendary cards pulse a faint orange glow.

The nav is a flat window bar: a shield `AJ` crest with the name and `LV 20 · Staff Engineer`, then commands where an inline-SVG pointing hand slides in beside the hovered, focused or current item and bobs 3px sideways on a 1 second loop, then a `Window: Day/Night` theme command. Move the hand to the command for the section in view. On mobile the commands open as their own window.

The title screen has three windows: a dialogue box holding the eyebrow, the headline, the lede and a blinking gold advance arrow in its corner; a `Choose your path` command list with three actions and their game names (`New game`, `Recruit`, `Codex`) plus a hint row with key caps for Tab and Enter; and a party status card with the portrait, an `LV 20+` badge, the name and role, a three-cell stat strip and two progress bars (`I, AI chain 3/5`, `UI patterns 40`). Behind them a soft radial blue glow rises from the bottom. Shortly after load, slide in an `Achievement unlocked` toast in the bottom right that can be dismissed.

Keep motion small: the cursor bob, the blinking arrow, the legendary glow and the toast slide. Under `prefers-reduced-motion`, stop all of them. At 400px wide the title-screen windows stack with the party card last, every grid becomes one column, and nothing scrolls sideways.