design refacto

tests/static-smoke.test.mjs

@@ -13,6 +13,7 @@ test("vite entrypoint loads the react application", async () => {
 test("react application defines the expected local toolbox primitives", async () => {
   const source = await readFile("website/src/main.jsx", "utf8");
   const styles = await readFile("website/src/styles/main.scss", "utf8");
+  const styleNebula = await readFile("website/src/styles/_nebula.scss", "utf8");
   const styleTokens = await readFile("website/src/styles/_tokens.scss", "utf8");
   const styleBase = await readFile("website/src/styles/_base.scss", "utf8");
   const styleHome = await readFile("website/src/styles/_home.scss", "utf8");
@@ -40,10 +41,13 @@ test("react application defines the expected local toolbox primitives", async ()
   assert.match(source, /sokkog:game-toolbox-links/);
   assert.match(source, /styles\/main\.scss/);
   assert.match(styles, /@use "tokens"/);
+  assert.match(styles, /@use "nebula"/);
   assert.match(styles, /@use "toolboxes"/);
   assert.match(styles, /@use "mhwilds"/);
   assert.match(styleTokens, /--gradient-brand/);
   assert.match(styleBase, /\.card-icon-button,\n\.drawer-action-button/);
+  assert.match(styleNebula, /@function star-field/);
+  assert.match(styleNebula, /body::after/);
   assert.match(styleBase, /\.import-icon-button/);
   assert.match(styleHome, /\.dialogue-line i/);
   assert.match(styleHome, /font-style: italic/);
@@ -54,6 +58,7 @@ test("react application defines the expected local toolbox primitives", async ()
   assert.match(styleIcons, /ui-icon-drag/);
   assert.match(styleIcons, /ui-icon-dropdown/);
   assert.match(styleIcons, /ui-icon-flip/);
+  assert.match(styleIcons, /ui-icon-add/);
   assert.match(styleMhwilds, /\.mhwilds-card/);
   assert.match(styleMhwilds, /\.mhwilds-flip-indicator/);
   assert.match(styleResponsive, /@media \(max-width: 760px\)/);
@@ -160,7 +165,8 @@ test("mhwilds data and assets are available", async () => {
   assert.ok(site.toolboxes.storageHelp.items.length >= 3);
   assert.equal(games.games[0].id, "mhwilds");
   assert.equal(games.games[0].eyebrow, "Guide de jeu");
-  assert.match(games.games[0].image, /mhwilds\.png/);
+  assert.match(games.games[0].images.cardCover, /games\/mhwilds\/card-cover\.png/);
+  assert.match(games.games[0].images.heroBg, /games\/mhwilds\/hero-bg\.png/);
   assert.ok(monsters.monsters.length > 0);
   assert.ok(endemicLife.endemicLife.length > 0);
   assert.equal(translations.monsters, "monstres");
@@ -168,6 +174,8 @@ test("mhwilds data and assets are available", async () => {
   const monsterCardSource = await readFile("website/src/features/games/mhwilds/cards/MonsterCard.jsx", "utf8");
   assert.match(monsterCardSource, /monster-card/);
   await readFile("website/public/static/img/mhwilds/chatacabra.png");
+  await readFile("website/public/static/img/games/mhwilds/card-cover.png");
+  await readFile("website/public/static/img/games/mhwilds/hero-bg.png");
 });
 
 test("server and vite support local env configuration", async () => {
@@ -187,6 +195,7 @@ test("legacy svg icons are available for reuse", async () => {
 
   assert.ok(manifest.icons.length >= 4);
   await readFile("website/public/static/icons/home.svg", "utf8");
+  await readFile("website/public/static/icons/add.svg", "utf8");
   await readFile("website/public/static/icons/checklist.svg", "utf8");
   await readFile("website/public/static/icons/close.svg", "utf8");
   await readFile("website/public/static/icons/columns.svg", "utf8");

website/public/data/games.json

@@ -4,8 +4,10 @@
       "id": "mhwilds",
       "title": "Monster Hunter Wilds",
       "eyebrow": "Guide de jeu",
-      "cover": "linear-gradient(135deg, rgba(139, 92, 246, 0.88) 0%, rgba(99, 102, 241, 0.82) 48%, rgba(34, 211, 238, 0.72) 100%)",
+      "images": {
-      "image": "/static/img/mhwilds.png",
+        "cardCover": "/static/img/games/mhwilds/card-cover.png",
+        "heroBg": "/static/img/games/mhwilds/hero-bg.png"
+      },
       "summary": "Repères rapides pour préparer une chasse, suivre les priorités et garder les infos utiles sur un second écran.",
       "sections": [
         {

website/public/static/icons/add.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" ?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+
+<title/>
+
+<g id="Complete">
+
+<g data-name="add" id="add-2">
+
+<g>
+
+<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="19" y2="5"/>
+
+<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5" x2="19" y1="12" y2="12"/>
+
+</g>
+
+</g>
+
+</g>
+
+</svg>

website/src/features/games/GameRoute.jsx

@@ -4,13 +4,14 @@ import { MhwildsPage } from "./mhwilds/MhwildsPage.jsx";
 export function GameRoute(props) {
   const { gameId, games } = props;
   const game = games.find((item) => item.id === gameId);
+  const heroStyle = game?.images?.heroBg ? { "--game-hero-image": `url("${game.images.heroBg}")` } : undefined;
 
   if (!game) return <GamesPage {...props} />;
-  if (game.id === "mhwilds") return <MhwildsPage {...props} />;
+  if (game.id === "mhwilds") return <MhwildsPage {...props} game={game} />;
 
   return (
     <>
-      <section className="game-hero" style={{ background: game.cover }}>
+      <section className="game-hero" style={heroStyle}>
         <div>
           <p className="eyebrow">{game.eyebrow || "Guide de jeu"}</p>
           <h1>{game.title}</h1>

website/src/features/games/GamesPage.jsx

@@ -3,7 +3,7 @@ export function GamesPage({ siteContent, games, gamesError }) {
 
   return (
     <>
-      <section className="page-heading">
+      <section className="page-hero">
         <div>
           <p className="eyebrow">{content.eyebrow}</p>
           <h1>{content.title}</h1>
@@ -20,7 +20,7 @@ export function GamesPage({ siteContent, games, gamesError }) {
               title={`Ouvrir ${game.title}`}
               style={{ "--game-cover": game.cover || "var(--gradient-nebula)" }}
             >
-              <img src={game.image || ""} alt={game.title} loading="lazy" />
+              <img src={game.images?.cardCover || game.image || ""} alt={game.title} loading="lazy" />
             </a>
             <div className="card-body">
               <p className="eyebrow">{game.eyebrow || "Guide de jeu"}</p>

website/src/features/games/mhwilds/MhwildsOverview.jsx

@@ -1,9 +1,11 @@
 import { assetPath } from "./utils.js";
 
-export function MhwildsOverview() {
+export function MhwildsOverview({ game }) {
+  const heroStyle = game?.images?.heroBg ? { "--game-hero-image": `url("${game.images.heroBg}")` } : undefined;
+
   return (
     <>
-      <section className="game-hero mhwilds-hero">
+      <section className="game-hero" style={heroStyle}>
         <div>
           <p className="eyebrow">Guide de jeu</p>
           <h1>Monster Hunter: Wilds</h1>

website/src/features/games/mhwilds/MhwildsPage.jsx

@@ -1,13 +1,14 @@
 import { MhwildsListing } from "./MhwildsListing.jsx";
 import { MhwildsOverview } from "./MhwildsOverview.jsx";
 
-export function MhwildsPage({ category, mhwilds, filters, setFilters, t }) {
+export function MhwildsPage({ category, game, mhwilds, filters, setFilters, t }) {
   const activeCategory = category === "monsters" || category === "endemic" ? category : "";
+  const heroStyle = game?.images?.heroBg ? { "--game-hero-image": `url("${game.images.heroBg}")` } : undefined;
 
   if (!mhwilds.loaded) {
     return (
       <>
-        <section className="game-hero mhwilds-hero">
+        <section className="game-hero" style={heroStyle}>
           <div>
             <p className="eyebrow">Monster Hunter Wilds</p>
             <h1>Monster Hunter: Wilds</h1>
@@ -31,7 +32,7 @@ export function MhwildsPage({ category, mhwilds, filters, setFilters, t }) {
     );
   }
 
-  if (!activeCategory) return <MhwildsOverview />;
+  if (!activeCategory) return <MhwildsOverview game={game} />;
 
   return (
     <MhwildsListing

website/src/features/toolboxes/modules/index.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Icon } from "../../../components/Icon.jsx";
 import { ChecklistModule } from "./ChecklistModule.jsx";
@@ -15,11 +15,53 @@ const MODULE_COMPONENTS = {
   counters: { label: "Compteurs", icon: "abacus", Component: CountersModule, editable: true }
 };
 
+const MODULE_COLUMN_GAP_PX = 16;
+
 export const TOOLBOX_MODULES = Object.fromEntries(Object.entries(MODULE_COMPONENTS).map(([type, module]) => [
   type,
   { label: module.label, icon: module.icon }
 ]));
 
+function getSequentialModuleColumns(modules, splitIndex) {
+  return [
+    modules.slice(0, splitIndex),
+    modules.slice(splitIndex)
+  ];
+}
+
+function getColumnHeight(heights) {
+  if (!heights.length) return 0;
+  return heights.reduce((total, height) => total + height, 0) + MODULE_COLUMN_GAP_PX * (heights.length - 1);
+}
+
+function chooseMeasuredSplitIndex(modules, moduleHeights, fallbackSplitIndex) {
+  if (modules.length <= 1) return modules.length;
+  if (modules.some((module) => !moduleHeights.get(module.id))) return fallbackSplitIndex;
+
+  let bestSplitIndex = fallbackSplitIndex;
+  let bestDiff = Number.POSITIVE_INFINITY;
+  let bestLeftDominantSplitIndex = 0;
+  let bestLeftDominantDiff = Number.POSITIVE_INFINITY;
+
+  for (let splitIndex = 1; splitIndex < modules.length; splitIndex += 1) {
+    const leftHeight = getColumnHeight(modules.slice(0, splitIndex).map((module) => moduleHeights.get(module.id)));
+    const rightHeight = getColumnHeight(modules.slice(splitIndex).map((module) => moduleHeights.get(module.id)));
+    const diff = Math.abs(leftHeight - rightHeight);
+
+    if (leftHeight >= rightHeight && diff < bestLeftDominantDiff) {
+      bestLeftDominantDiff = diff;
+      bestLeftDominantSplitIndex = splitIndex;
+    }
+
+    if (diff < bestDiff) {
+      bestDiff = diff;
+      bestSplitIndex = splitIndex;
+    }
+  }
+
+  return bestLeftDominantSplitIndex || bestSplitIndex;
+}
+
 export function AddToolControls({ onAdd }) {
   const [open, setOpen] = useState(false);
   const [quickOpen, setQuickOpen] = useState(false);
@@ -134,6 +176,48 @@ export function AddToolControls({ onAdd }) {
 export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onDelete, onMove }) {
   const [draggingModuleId, setDraggingModuleId] = useState("");
   const [dropTarget, setDropTarget] = useState({ id: "", placement: "before" });
+  const [measuredSplitIndex, setMeasuredSplitIndex] = useState(() => Math.ceil(toolbox.modules.length / 2));
+  const moduleElementsRef = useRef(new Map());
+  const moduleIdSignature = useMemo(() => toolbox.modules.map((module) => module.id).join("|"), [toolbox.modules]);
+
+  useEffect(() => {
+    setMeasuredSplitIndex(Math.ceil(toolbox.modules.length / 2));
+  }, [toolbox.id, moduleIdSignature, toolbox.modules.length]);
+
+  useLayoutEffect(() => {
+    if (moduleColumns !== 2 || toolbox.modules.length <= 1) return undefined;
+
+    let frameId = 0;
+    function rebalanceColumns() {
+      cancelAnimationFrame(frameId);
+      frameId = requestAnimationFrame(() => {
+        const moduleHeights = new Map();
+        toolbox.modules.forEach((module) => {
+          const element = moduleElementsRef.current.get(module.id);
+          if (element) moduleHeights.set(module.id, element.getBoundingClientRect().height);
+        });
+
+        setMeasuredSplitIndex((currentSplitIndex) => {
+          const fallbackSplitIndex = Math.min(Math.max(currentSplitIndex, 1), toolbox.modules.length - 1);
+          const nextSplitIndex = chooseMeasuredSplitIndex(toolbox.modules, moduleHeights, fallbackSplitIndex);
+          return nextSplitIndex === currentSplitIndex ? currentSplitIndex : nextSplitIndex;
+        });
+      });
+    }
+
+    const observer = new ResizeObserver(rebalanceColumns);
+
+    toolbox.modules.forEach((module) => {
+      const element = moduleElementsRef.current.get(module.id);
+      if (element) observer.observe(element);
+    });
+    rebalanceColumns();
+
+    return () => {
+      cancelAnimationFrame(frameId);
+      observer.disconnect();
+    };
+  }, [moduleColumns, toolbox.id, moduleIdSignature, toolbox.modules.length]);
 
   useEffect(() => {
     if (!draggingModuleId) return undefined;
@@ -180,6 +264,14 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onDe
     setDropTarget({ id: "", placement: "before" });
   }
 
+  function registerModuleElement(moduleId, element) {
+    if (element) {
+      moduleElementsRef.current.set(moduleId, element);
+    } else {
+      moduleElementsRef.current.delete(moduleId);
+    }
+  }
+
   if (moduleColumns === 1) {
     return (
       <section className="modules" data-toolbox-id={toolbox.id} data-layout-cols={moduleColumns}>
@@ -195,14 +287,15 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onDe
             onRename={onRename}
             onDelete={onDelete}
             onMove={onMove}
+            registerModuleElement={registerModuleElement}
           />
         ))}
       </section>
     );
   }
 
-  const columns = [[], []];
+  const splitIndex = Math.min(Math.max(measuredSplitIndex, 1), Math.max(1, toolbox.modules.length - 1));
-  toolbox.modules.forEach((module, index) => columns[index % 2].push(module));
+  const columns = getSequentialModuleColumns(toolbox.modules, splitIndex);
 
   return (
     <section className="modules" data-toolbox-id={toolbox.id} data-layout-cols={moduleColumns}>
@@ -220,6 +313,7 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onDe
               onRename={onRename}
               onDelete={onDelete}
               onMove={onMove}
+              registerModuleElement={registerModuleElement}
             />
           ))}
         </div>
@@ -228,7 +322,7 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onDe
   );
 }
 
-function ModuleShell({ toolbox, module, context, draggingModuleId, dropTarget, onDragStart, onRename, onDelete }) {
+function ModuleShell({ toolbox, module, context, draggingModuleId, dropTarget, onDragStart, onRename, onDelete, registerModuleElement }) {
   const definition = MODULE_COMPONENTS[module.type] || MODULE_COMPONENTS.notepad;
   const Component = definition.Component;
   const label = definition.label || module.type;
@@ -247,6 +341,7 @@ function ModuleShell({ toolbox, module, context, draggingModuleId, dropTarget, o
       className={className}
       data-toolbox-id={toolbox.id}
       data-module-id={module.id}
+      ref={(element) => registerModuleElement?.(module.id, element)}
     >
       <header>
         <div>
@@ -273,7 +368,7 @@ function ModuleShell({ toolbox, module, context, draggingModuleId, dropTarget, o
               aria-pressed={editing}
               title={editing ? "Masquer l'ajout" : "Ajouter"}
             >
-              <Icon name="edit" />
+              <Icon name="add" />
             </button>
           )}
           <button className="module-delete-button danger" onClick={() => onDelete(module.id)} aria-label={`Retirer ${module.title || label}`} title="Retirer">

website/src/main.jsx

@@ -166,6 +166,14 @@ function normalizeToolboxIcon(icon) {
   return TOOLBOX_ICON_FILES.includes(file) ? `${TOOLBOX_ICON_BASE}${file}` : DEFAULT_TOOLBOX_ICON;
 }
 
+function getGameCardCover(game) {
+  return game?.images?.cardCover || game?.image || "";
+}
+
+function getGameCardBackground(game) {
+  return game?.cover || "var(--gradient-nebula)";
+}
+
 function normalizeToolboxModule(module) {
   if (!module || typeof module !== "object" || !module.type) return null;
   const title = String(module.title || "").trim();
@@ -882,7 +890,7 @@ function Shell({ route, content, games, toolboxes, links, actions, children }) {
       <aside className="sidebar">
         <a className="brand" href="#/" aria-label={content.brand.homeAriaLabel}>
           <span className="brand-mark" aria-hidden="true" />
-          <span>{content.brand.name}</span>
+          <span className="brand-name"><span className="brand-name-main">Sokko</span> <span className="brand-name-accent">G</span></span>
         </a>
         <nav className="nav" aria-label="Navigation principale">
           <a className={`nav-item ${route === "/" ? "active" : ""}`} href="#/"><span className="nav-icon nav-icon-home" aria-hidden="true" /><strong>{content.navigation.home}</strong></a>
@@ -991,15 +999,14 @@ function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions }) {
   const content = siteContent.toolboxes;
   return (
     <div className="toolbox-page">
-      <section className="page-heading">
+      <section className="page-hero">
         <div>
           <p className="eyebrow">{content.eyebrow}</p>
           <h1>{content.title}</h1>
+          <p>{content.summary}</p>
         </div>
       </section>
-      <section className="toolbar toolbar-stack">
+      <section className="toolbar toolbox-actions-row">
-        <p className="toolbox-summary">{content.summary}</p>
-        <div className="toolbox-actions-row">
         <div>
           <button className="primary" onClick={() => actions.setCreateModal({})}>{content.newButton}</button>
           <ImportButton className="import-button" label={content.importOne} onFile={actions.importToolbox} />
@@ -1008,7 +1015,6 @@ function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions }) {
           <ImportButton className="import-button" label={content.importAll} onFile={actions.importAllToolboxes} />
           <button onClick={actions.exportAllToolboxes}>{content.exportAll}</button>
         </div>
-        </div>
       </section>
       <section className="cards">
         <StorageHelpCard help={content.storageHelp} />
@@ -1039,15 +1045,16 @@ function StorageHelpCard({ help }) {
 }
 
 function ToolboxCard({ toolbox, game, actions }) {
-  const coverImage = game?.image || toolbox.icon || DEFAULT_TOOLBOX_ICON;
+  const gameCoverImage = getGameCardCover(game);
+  const coverImage = gameCoverImage || toolbox.icon || DEFAULT_TOOLBOX_ICON;
   return (
     <article className="card toolbox-card">
       <a
-        className={`card-cover toolbox-card-cover-link ${game?.image ? "toolbox-card-cover" : "toolbox-icon-cover"}`}
+        className={`card-cover toolbox-card-cover-link ${gameCoverImage ? "toolbox-card-cover" : "toolbox-icon-cover"}`}
         href={`#/toolbox/${toolbox.id}`}
         aria-label={`Ouvrir ${toolbox.name}`}
         title={`Ouvrir ${toolbox.name}`}
-        style={{ "--game-cover": game?.cover || "var(--gradient-nebula)", background: game?.image ? "" : "var(--gradient-nebula)" }}
+        style={{ "--game-cover": getGameCardBackground(game), background: gameCoverImage ? "" : "var(--gradient-nebula)" }}
       >
         <img src={coverImage} alt={game ? game.title : `Icône de ${toolbox.name}`} loading="lazy" />
       </a>
@@ -1141,15 +1148,17 @@ function ToolboxIconPicker({ toolbox, onChange }) {
 }
 
 function ToolboxGameIcon({ game }) {
+  const gameCoverImage = getGameCardCover(game);
   return (
     <div className="toolbox-game-icon" title={game.title} aria-label={`Jeu associé : ${game.title}`}>
-      <img src={game.image} alt="" aria-hidden="true" />
+      <img src={gameCoverImage} alt="" aria-hidden="true" />
     </div>
   );
 }
 
 function ToolboxView({ toolbox, toolboxGame, embedded, actions, updateToolbox, updateModuleData, addScreenshotFiles }) {
   const moduleColumns = Number(toolbox.moduleColumns) === 1 ? 1 : 2;
+  const toolboxGameCover = getGameCardCover(toolboxGame);
   const moduleContext = {
     getModuleData,
     normalizeChecklistData,
@@ -1185,12 +1194,12 @@ function ToolboxView({ toolbox, toolboxGame, embedded, actions, updateToolbox, u
 
   return (
     <div className={embedded ? "toolbox-embedded" : "toolbox-page"}>
-      <section className="toolbox-head">
+      <section className={embedded ? "toolbox-head page-hero toolbox-head-embedded" : "toolbox-head page-hero"}>
         <div>
           <p className="eyebrow">Toolbox</p>
           <div className="toolbox-title-row">
             {!embedded && !toolboxGame && <ToolboxIconPicker toolbox={toolbox} onChange={(icon) => updateToolbox({ ...toolbox, icon })} />}
-            {!embedded && toolboxGame?.image && <ToolboxGameIcon game={toolboxGame} />}
+            {!embedded && toolboxGameCover && <ToolboxGameIcon game={toolboxGame} />}
             {embedded ? <h1>{toolbox.name}</h1> : (
               <EditableTitle className="toolbox-title" value={toolbox.name} fallback="Nouvelle toolbox" onSave={(name) => name !== toolbox.name && updateToolbox({ ...toolbox, name })} />
             )}
@@ -1267,17 +1276,17 @@ function ToolboxDrawer({ gameId, toolboxes, links, actions, updateToolbox, updat
   }
 
   return (
-    <aside className="drawer" id="toolbox-drawer" aria-hidden="false">
+    <aside className="drawer" id="toolbox-drawer" aria-hidden="false" style={width ? { "--drawer-panel-width": `${width}px` } : undefined}>
       <div className="drawer-backdrop" onClick={() => actions.setDrawerGameId("")} />
+      <span className="drawer-resize-handle" aria-hidden="true" onPointerDown={startResize} />
       <section className="drawer-panel legacy-scrollbar" ref={panelRef} style={width ? { width } : undefined}>
         <div className="drawer-content">
-          <span className="drawer-resize-handle" aria-hidden="true" onPointerDown={startResize} />
           <header>
             <div>
               <p className="eyebrow">Toolbox liée</p>
               <div className="drawer-toolbox-actions" aria-label="Actions toolbox liée">
-                <ImportButton className="drawer-action-button import-icon-button" ariaLabel="Importer une toolbox" title="Importer" icon="import" onFile={(file) => actions.importToolbox(file, gameId)} />
                 <button className="drawer-action-button" onClick={() => actions.setLinkModalGameId(gameId)} aria-label="Lier une toolbox" title="Lier"><Icon name="link" /></button>
+                <ImportButton className="drawer-action-button import-icon-button" ariaLabel="Importer une toolbox" title="Importer" icon="import" onFile={(file) => actions.importToolbox(file, gameId)} />
                 <button className="drawer-action-button" onClick={() => actions.exportToolbox(selectedId)} disabled={!selectedId} aria-label="Exporter la toolbox liée" title="Exporter"><Icon name="export" /></button>
               </div>
             </div>

website/src/styles/_base.scss

@@ -8,28 +8,16 @@ html {
 }
 
 body {
+  position: relative;
   min-height: 100vh;
   margin: 0;
   color: var(--color-text-primary);
   background: var(--gradient-page);
+  background-attachment: fixed;
   font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   line-height: 1.55;
 }
 
-body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  opacity: 0.23;
-  background-image:
-    radial-gradient(circle, rgba(255, 255, 255, 0.52) 1px, transparent 1px),
-    radial-gradient(circle, rgba(139, 92, 246, 0.38) 1px, transparent 1px);
-  background-position: 0 0, 35px 60px;
-  background-size: 90px 90px, 140px 140px;
-}
-
 a {
   color: inherit;
   text-decoration: none;
@@ -50,6 +38,7 @@ textarea,
     transform var(--duration-fast) var(--ease-standard),
     border-color var(--duration-fast) var(--ease-standard),
     background-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard),
     box-shadow var(--duration-fast) var(--ease-standard);
 }
 
@@ -68,8 +57,13 @@ button,
 button:hover,
 .button:hover,
 .import-button:hover {
-  border-color: var(--color-border-hover);
+  border-color: rgba(196, 181, 253, 0.34);
-  background: var(--color-bg-hover);
+  background:
+    linear-gradient(135deg, rgba(31, 37, 68, 0.96), rgba(22, 26, 51, 0.96)) padding-box,
+    linear-gradient(135deg, rgba(139, 92, 246, 0.32), rgba(196, 181, 253, 0.2)) border-box;
+  box-shadow:
+    0 0 14px rgba(139, 92, 246, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
 button:active,
@@ -79,7 +73,75 @@ button:active,
 }
 
 :focus-visible {
-  outline: 2px solid var(--color-accent-cyan);
+  outline: 2px solid var(--color-accent-gold);
+  outline-offset: 3px;
+}
+
+input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-grid;
+  width: 20px;
+  min-width: 20px;
+  max-width: 20px;
+  inline-size: 20px;
+  min-inline-size: 20px;
+  max-inline-size: 20px;
+  aspect-ratio: 1;
+  height: 20px;
+  min-height: 20px;
+  max-height: 20px;
+  block-size: 20px;
+  min-block-size: 20px;
+  max-block-size: 20px;
+  place-content: center;
+  margin: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  line-height: 0;
+  background:
+    linear-gradient(135deg, rgba(27, 34, 66, 0.92), rgba(16, 20, 44, 0.94)) padding-box,
+    linear-gradient(135deg, rgba(246, 196, 83, 0.5), rgba(139, 92, 246, 0.44)) border-box;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
+    0 0 0 1px rgba(5, 7, 17, 0.42);
+  cursor: pointer;
+}
+
+input[type="checkbox"]::before {
+  content: "";
+  width: 11px;
+  height: 11px;
+  background: #fff;
+  transform: scale(0);
+  transition: transform var(--duration-fast) var(--ease-standard);
+  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 18%, 84% 5%, 34% 68%);
+}
+
+input[type="checkbox"]:hover {
+  border-color: rgba(246, 196, 83, 0.6);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
+    0 0 14px rgba(246, 196, 83, 0.14);
+}
+
+input[type="checkbox"]:checked {
+  border-color: rgba(246, 196, 83, 0.88);
+  background:
+    linear-gradient(135deg, rgba(246, 196, 83, 0.96), rgba(139, 92, 246, 0.86)) padding-box,
+    linear-gradient(135deg, var(--color-accent-gold), rgba(196, 181, 253, 0.88)) border-box;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
+    0 0 16px rgba(246, 196, 83, 0.2);
+}
+
+input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}
+
+input[type="checkbox"]:focus-visible {
+  outline: 2px solid var(--color-accent-gold);
   outline-offset: 3px;
 }
 
@@ -111,18 +173,27 @@ button:active,
 }
 
 .primary {
-  border-color: transparent;
+  border-color: rgba(246, 196, 83, 0.34);
-  background: var(--gradient-brand);
+  background:
-  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.22);
+    linear-gradient(135deg, rgba(72, 43, 160, 0.96), rgba(45, 52, 146, 0.94)) padding-box,
+    linear-gradient(135deg, rgba(246, 196, 83, 0.66), rgba(139, 92, 246, 0.36)) border-box;
+  box-shadow:
+    0 8px 22px rgba(5, 7, 17, 0.22),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
   color: #fff;
   font-weight: 700;
 }
 
 .primary:hover {
-  border-color: transparent;
+  border-color: rgba(246, 196, 83, 0.72);
-  filter: brightness(1.08);
+  background:
-  transform: translateY(-1px);
+    linear-gradient(135deg, rgba(109, 40, 217, 0.98), rgba(67, 56, 202, 0.96)) padding-box,
-  box-shadow: 0 10px 28px rgba(139, 92, 246, 0.3);
+    linear-gradient(135deg, rgba(246, 196, 83, 0.96), rgba(196, 181, 253, 0.68)) border-box;
+  box-shadow:
+    0 0 0 1px rgba(246, 196, 83, 0.16),
+    0 0 18px rgba(139, 92, 246, 0.3),
+    0 0 30px rgba(246, 196, 83, 0.16),
+    inset 0 1px 0 rgba(255, 255, 255, 0.18);
 }
 
 .ghost {
@@ -131,14 +202,26 @@ button:active,
   color: var(--color-text-secondary);
 }
 
+.ghost:hover {
+  border-color: rgba(196, 181, 253, 0.18);
+  background: rgba(139, 92, 246, 0.08);
+  color: var(--color-text-primary);
+  box-shadow: none;
+}
+
 .danger {
   color: var(--color-danger);
 }
 
 .danger:hover {
-  border-color: rgba(251, 113, 133, 0.32);
+  border-color: rgba(251, 113, 133, 0.48);
-  background: var(--color-danger-soft);
+  background:
+    linear-gradient(135deg, rgba(80, 25, 42, 0.72), rgba(48, 18, 34, 0.82)) padding-box,
+    linear-gradient(135deg, rgba(251, 113, 133, 0.56), rgba(196, 181, 253, 0.16)) border-box;
   color: #fff;
+  box-shadow:
+    0 0 14px rgba(251, 113, 133, 0.14),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 
 .sidebar-action-button,
@@ -170,11 +253,30 @@ button:active,
     transform var(--duration-fast) var(--ease-standard),
     border-color var(--duration-fast) var(--ease-standard),
     background-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard),
     box-shadow var(--duration-fast) var(--ease-standard);
 }
 
+.sidebar-action-button .ui-icon,
+.import-icon-button .ui-icon,
+.toolbox-icon-button .ui-icon,
+.card-icon-button .ui-icon,
+.drawer-action-button .ui-icon,
+.drawer-close-button .ui-icon,
+.filter-reset-button .ui-icon,
+.screenshot-viewer-button .ui-icon,
+.module-edit-button .ui-icon,
+.module-delete-button .ui-icon,
+.shot-delete-button .ui-icon,
+.tool-quick-add-button .ui-icon {
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    filter var(--duration-fast) var(--ease-standard);
+}
+
 .sidebar-action-button:hover,
 .import-icon-button:hover,
+.toolbox-icon-button:hover,
 .card-icon-button:hover,
 .drawer-action-button:hover,
 .drawer-close-button:hover,
@@ -184,9 +286,28 @@ button:active,
 .module-delete-button:hover,
 .shot-delete-button:hover,
 .tool-quick-add-button:hover {
-  border-color: var(--color-border-hover);
+  border-color: rgba(196, 181, 253, 0.32);
-  background: var(--color-bg-hover);
+  background:
-  color: var(--color-text-primary);
+    linear-gradient(135deg, rgba(31, 37, 68, 0.94), rgba(18, 22, 44, 0.96)) padding-box,
+    linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(196, 181, 253, 0.2)) border-box;
+  color: #ddd6fe;
+  box-shadow:
+    0 0 12px rgba(139, 92, 246, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.sidebar-action-button:hover .ui-icon,
+.import-icon-button:hover .ui-icon,
+.toolbox-icon-button:hover .ui-icon,
+.card-icon-button:hover .ui-icon,
+.drawer-action-button:hover .ui-icon,
+.drawer-close-button:hover .ui-icon,
+.filter-reset-button:hover .ui-icon,
+.screenshot-viewer-button:hover .ui-icon,
+.module-edit-button:hover .ui-icon,
+.tool-quick-add-button:hover .ui-icon {
+  background-color: #c4b5fd;
+  filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.28));
 }
 
 .card-icon-button.danger,
@@ -199,8 +320,19 @@ button:active,
 .card-icon-button.danger:hover,
 .module-delete-button.danger:hover,
 .shot-delete-button.danger:hover {
-  border-color: rgba(251, 113, 133, 0.46);
+  border-color: rgba(251, 113, 133, 0.56);
-  background: var(--color-danger-soft);
+  background:
+    linear-gradient(135deg, rgba(80, 25, 42, 0.72), rgba(48, 18, 34, 0.82)) padding-box,
+    linear-gradient(135deg, rgba(251, 113, 133, 0.56), rgba(196, 181, 253, 0.16)) border-box;
   color: #fff;
-  box-shadow: 0 10px 24px rgba(251, 113, 133, 0.12);
+  box-shadow:
+    0 0 14px rgba(251, 113, 133, 0.14),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.card-icon-button.danger:hover .ui-icon,
+.module-delete-button.danger:hover .ui-icon,
+.shot-delete-button.danger:hover .ui-icon {
+  background-color: #fff;
+  filter: drop-shadow(0 0 6px rgba(251, 113, 133, 0.26));
 }

website/src/styles/_cards.scss

@@ -27,6 +27,21 @@
   box-shadow: var(--shadow-sm);
 }
 
+.card {
+  border-color: transparent;
+  border-radius: var(--radius-md);
+  background:
+    linear-gradient(rgba(16, 20, 38, 0.88), rgba(16, 20, 38, 0.88)) padding-box,
+    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box,
+    linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box;
+}
+
+@supports (corner-shape: scoop) {
+  .card {
+    corner-shape: scoop;
+  }
+}
+
 .feature,
 .info-panel,
 .empty {
@@ -35,7 +50,6 @@
 
 .feature,
 .card,
-.module,
 .info-panel {
   transition:
     transform var(--duration-fast) var(--ease-standard),
@@ -45,13 +59,24 @@
 
 .feature:hover,
 .card:hover,
-.module:hover,
 .info-panel:hover {
   transform: translateY(-2px);
   border-color: var(--color-border-hover);
   background: rgba(21, 26, 48, 0.96);
 }
 
+.card:hover {
+  transform: none;
+  border-color: transparent;
+  background:
+    linear-gradient(rgba(21, 26, 48, 0.96), rgba(21, 26, 48, 0.96)) padding-box,
+    linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(196, 181, 253, 0.72)) border-box;
+  box-shadow:
+    var(--shadow-sm),
+    0 0 18px rgba(139, 92, 246, 0.22),
+    0 0 34px rgba(196, 181, 253, 0.12);
+}
+
 .feature {
   display: grid;
   gap: 8px;
@@ -75,7 +100,7 @@
 
 .card-cover {
   min-height: 124px;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid rgba(246, 196, 83, 0.42);
 }
 
 .card-body {
@@ -148,9 +173,9 @@
   position: relative;
   min-height: 292px;
   overflow: hidden;
-  border-color: rgba(34, 211, 238, 0.22);
+  border-color: rgba(246, 196, 83, 0.22);
   background:
-    linear-gradient(135deg, rgba(34, 211, 238, 0.1), transparent 38%),
+    linear-gradient(135deg, rgba(246, 196, 83, 0.1), transparent 38%),
     rgba(10, 13, 29, 0.84);
 }
 
@@ -182,11 +207,11 @@
   width: 36px;
   height: 36px;
   place-items: center;
-  border: 1px solid rgba(34, 211, 238, 0.32);
+  border: 1px solid rgba(246, 196, 83, 0.32);
   border-radius: var(--radius-md);
-  background: rgba(34, 211, 238, 0.1);
+  background: rgba(246, 196, 83, 0.1);
-  color: var(--color-accent-cyan);
+  color: var(--color-accent-gold);
-  box-shadow: 0 0 22px rgba(34, 211, 238, 0.12);
+  box-shadow: 0 0 22px rgba(246, 196, 83, 0.12);
 }
 
 .storage-help-mark::before {
@@ -205,7 +230,7 @@
 }
 
 .storage-help-card .eyebrow {
-  color: var(--color-accent-cyan);
+  color: var(--color-accent-gold);
 }
 
 .storage-help-intro {
@@ -258,16 +283,56 @@
 }
 
 .storage-quota {
+  position: relative;
+  isolation: isolate;
   display: grid;
   gap: var(--space-3);
   margin-top: auto;
   padding: var(--space-4);
-  border: 1px solid var(--color-border);
+  overflow: hidden;
+  border: 1px solid transparent;
   border-radius: var(--radius-lg);
-  background: rgba(10, 13, 29, 0.78);
+  background: rgba(16, 20, 38, 0.58);
   box-shadow: var(--shadow-sm);
 }
 
+.storage-quota::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    radial-gradient(circle at 92% 12%, rgba(246, 196, 83, 0.009), transparent 34%),
+    radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.011), transparent 42%);
+  pointer-events: none;
+}
+
+.storage-quota::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  padding: 1px;
+  border-radius: inherit;
+  background:
+    radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.42), transparent 34%),
+    linear-gradient(135deg, rgba(246, 196, 83, 0.42), rgba(139, 92, 246, 0.32) 54%, rgba(196, 181, 253, 0.24));
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+}
+
+.storage-quota > * {
+  position: relative;
+  z-index: 1;
+}
+
 .toolbox-page > .storage-quota,
 .drawer-content > .storage-quota {
   margin-top: auto;

website/src/styles/_games.scss

@@ -22,7 +22,7 @@
   display: grid;
   place-items: center;
   background:
-    radial-gradient(circle at 50% 38%, rgba(34, 211, 238, 0.16), transparent 42%),
+    radial-gradient(circle at 50% 38%, rgba(246, 196, 83, 0.16), transparent 42%),
     var(--gradient-nebula);
 }
 

website/src/styles/_home.scss

@@ -1,46 +1,105 @@
 .hero,
-.game-hero {
+.game-hero,
+.page-hero {
   position: relative;
+  isolation: isolate;
   display: grid;
   min-height: 360px;
   align-items: end;
   gap: var(--space-6);
   overflow: hidden;
-  border: 1px solid var(--color-border);
+  border: 1px solid transparent;
   border-radius: var(--radius-xl);
+  background:
+    var(--gradient-nebula),
+    radial-gradient(circle at 86% 18%, rgba(246, 196, 83, 0.1), transparent 28%),
+    linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(5, 7, 17, 0.96));
   box-shadow: var(--shadow-md);
   padding: var(--space-10);
 }
 
-.hero::after,
+.hero::before,
-.game-hero::after {
+.game-hero::before,
+.page-hero::before {
   content: "";
   position: absolute;
   inset: 0;
+  z-index: 2;
+  padding: 1px;
+  border-radius: inherit;
+  background:
+    radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.5), transparent 26%),
+    linear-gradient(135deg, rgba(246, 196, 83, 0.38), rgba(139, 92, 246, 0.22) 48%, rgba(196, 181, 253, 0.3));
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+}
+
+.hero::after,
+.game-hero::after,
+.page-hero::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
   pointer-events: none;
   background:
     linear-gradient(135deg, rgba(5, 7, 17, 0.1), rgba(5, 7, 17, 0.52)),
-    radial-gradient(circle at 82% 16%, rgba(34, 211, 238, 0.18), transparent 30%);
+    radial-gradient(circle at 82% 16%, rgba(246, 196, 83, 0.18), transparent 30%);
 }
 
 .hero > *,
-.game-hero > * {
+.game-hero > *,
+.page-hero > * {
   position: relative;
   z-index: 1;
 }
 
 .hero {
   grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
-  background:
-    var(--gradient-nebula),
-    linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(5, 7, 17, 0.96));
 }
 
 .game-hero {
   grid-template-columns: 1fr auto;
+  --game-hero-image: none;
   color: white;
 }
 
+.game-hero::after {
+  left: 35%;
+  opacity: 0.72;
+  background:
+    linear-gradient(90deg, rgba(5, 7, 17, 0.04), rgba(5, 7, 17, 0.2) 58%, rgba(5, 7, 17, 0.62) 100%),
+    var(--game-hero-image);
+  background-position:
+    center,
+    right center;
+  background-repeat: no-repeat;
+  background-size:
+    cover,
+    cover;
+  mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.06) 34%, rgba(0, 0, 0, 0.34) 58%, #000 88%);
+  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.06) 34%, rgba(0, 0, 0, 0.34) 58%, #000 88%);
+}
+
+.page-hero {
+  min-height: 180px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  padding: var(--space-6);
+}
+
+.page-hero p:last-child {
+  max-width: 720px;
+  margin-bottom: 0;
+}
+
 h1,
 h2,
 p {
@@ -68,7 +127,7 @@ span {
 
 .eyebrow {
   margin-bottom: 10px;
-  color: var(--color-accent-cyan);
+  color: var(--color-accent-gold);
   font-size: var(--font-size-xs);
   font-weight: 800;
   letter-spacing: 0;
@@ -133,21 +192,66 @@ span {
 }
 
 .origin-section {
+  position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.65fr);
   gap: var(--space-6);
   margin-top: var(--space-6);
   padding: var(--space-6);
-  border: 1px solid rgba(165, 180, 252, 0.14);
+  border: 1px solid transparent;
   border-radius: var(--radius-lg);
   background: rgba(16, 20, 38, 0.42);
   box-shadow: var(--shadow-sm);
 }
 
+.origin-section::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  padding: 1px;
+  border-radius: inherit;
+  background: rgba(165, 180, 252, 0.14);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+}
+
+.origin-section::after {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  padding: 1px;
+  border-radius: inherit;
+  background:
+    radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(246, 196, 83, 0.9) 0 18px, transparent 27px),
+    linear-gradient(90deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%),
+    linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+}
+
+.origin-section > * {
+  position: relative;
+  z-index: 1;
+}
+
 .origin-copy {
   min-width: 0;
   padding-right: var(--space-6);
-  border-right: 2px solid rgba(34, 211, 238, 0.66);
+  border-right: 2px solid rgba(246, 196, 83, 0.66);
 }
 
 .home-dialogue {
@@ -214,7 +318,7 @@ span {
   border: 1px solid rgba(165, 180, 252, 0.14);
   border-radius: var(--radius-md);
   background:
-    linear-gradient(145deg, rgba(34, 211, 238, 0.08), transparent 52%),
+    linear-gradient(145deg, rgba(246, 196, 83, 0.08), transparent 52%),
     rgba(7, 10, 24, 0.52);
 }
 

website/src/styles/_icons.scss

@@ -46,6 +46,11 @@
   -webkit-mask-image: url("/static/icons/edit.svg");
 }
 
+.ui-icon-add {
+  mask-image: url("/static/icons/add.svg");
+  -webkit-mask-image: url("/static/icons/add.svg");
+}
+
 .ui-icon-copy {
   mask-image: url("/static/icons/copy.svg");
   -webkit-mask-image: url("/static/icons/copy.svg");

website/src/styles/_mhwilds.scss

@@ -1,9 +1,3 @@
-.mhwilds-hero {
-  background:
-    linear-gradient(135deg, rgba(139, 92, 246, 0.86), rgba(99, 102, 241, 0.76), rgba(34, 211, 238, 0.58)),
-    var(--color-bg-surface);
-}
-
 .mhwilds-home-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(240px, 380px));
@@ -14,8 +8,32 @@
 
 .mhwilds-home-card {
   overflow: hidden;
+  border-color: transparent;
+  border-radius: var(--radius-md);
   padding: 0;
   min-height: 230px;
+  background:
+    linear-gradient(rgba(16, 20, 38, 0.88), rgba(16, 20, 38, 0.88)) padding-box,
+    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box,
+    linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box;
+}
+
+@supports (corner-shape: scoop) {
+  .mhwilds-home-card {
+    corner-shape: scoop;
+  }
+}
+
+.mhwilds-home-card:hover {
+  transform: none;
+  border-color: transparent;
+  background:
+    linear-gradient(rgba(21, 26, 48, 0.96), rgba(21, 26, 48, 0.96)) padding-box,
+    linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(196, 181, 253, 0.72)) border-box;
+  box-shadow:
+    var(--shadow-sm),
+    0 0 18px rgba(139, 92, 246, 0.22),
+    0 0 34px rgba(196, 181, 253, 0.12);
 }
 
 .mhwilds-home-card img {
@@ -24,7 +42,7 @@
   height: 120px;
   object-fit: contain;
   padding: var(--space-4);
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid rgba(246, 196, 83, 0.42);
   background: rgba(5, 7, 17, 0.28);
 }
 
@@ -87,7 +105,7 @@
   border-radius: var(--radius-xl);
   background: rgba(16, 20, 38, 0.72);
   box-shadow: var(--shadow-sm);
-  backdrop-filter: blur(18px);
+  backdrop-filter: blur(10px);
   padding: var(--space-4);
 }
 
@@ -154,11 +172,11 @@
 
 .filter-chip {
   display: grid;
-  grid-template-columns: 22px 24px 1fr;
+  grid-template-columns: 18px 22px 1fr;
   min-height: 40px;
   align-items: center;
-  gap: 8px;
+  column-gap: 6px;
-  padding: 7px 9px;
+  padding: 7px 10px 7px 13px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-pill);
   background: rgba(5, 7, 17, 0.32);
@@ -174,10 +192,19 @@
 }
 
 .filter-chip input {
+  flex: 0 0 18px;
   width: 18px;
+  min-width: 18px;
+  max-width: 18px;
+  inline-size: 18px;
+  min-inline-size: 18px;
+  max-inline-size: 18px;
   height: 18px;
   min-height: 18px;
-  accent-color: var(--color-primary);
+  max-height: 18px;
+  block-size: 18px;
+  min-block-size: 18px;
+  max-block-size: 18px;
 }
 
 .filter-chip img {
@@ -209,9 +236,12 @@
 
 .mhwilds-card {
   overflow: hidden;
-  border: 1px solid var(--color-border);
+  border: 1px solid transparent;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
-  background: rgba(16, 20, 38, 0.88);
+  background:
+    linear-gradient(rgba(16, 20, 38, 0.88), rgba(16, 20, 38, 0.88)) padding-box,
+    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box,
+    linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box;
   box-shadow: var(--shadow-sm);
   transition:
     transform var(--duration-fast) var(--ease-standard),
@@ -219,22 +249,39 @@
     background-color var(--duration-fast) var(--ease-standard);
 }
 
+@supports (corner-shape: scoop) {
+  .mhwilds-card {
+    corner-shape: scoop;
+  }
+}
+
 .mhwilds-card:hover {
-  transform: translateY(-2px);
+  transform: none;
-  border-color: var(--color-border-hover);
+  border-color: transparent;
-  background: rgba(21, 26, 48, 0.96);
+  background:
+    linear-gradient(rgba(21, 26, 48, 0.96), rgba(21, 26, 48, 0.96)) padding-box,
+    linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(196, 181, 253, 0.72)) border-box;
+  box-shadow:
+    var(--shadow-sm),
+    0 0 18px rgba(139, 92, 246, 0.22),
+    0 0 34px rgba(196, 181, 253, 0.12);
 }
 
 .monster-card {
   height: 285px;
   overflow: visible;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
   cursor: pointer;
   perspective: 1200px;
 }
 
 .monster-card:hover,
 .monster-card:focus-visible {
+  border-color: transparent;
   background: transparent;
+  box-shadow: none;
 }
 
 .mhwilds-card-inner {
@@ -245,6 +292,12 @@
   transition: transform 420ms var(--ease-standard);
 }
 
+.monster-card:hover .mhwilds-card-inner,
+.monster-card:focus-visible .mhwilds-card-inner,
+.monster-card.is-flipped .mhwilds-card-inner {
+  will-change: transform;
+}
+
 .monster-card.is-flipped .mhwilds-card-inner {
   transform: rotateY(180deg);
 }
@@ -252,16 +305,26 @@
 .mhwilds-card-face {
   position: absolute;
   inset: 0;
+  contain: paint;
   display: flex;
   overflow: hidden;
   flex-direction: column;
-  border: 1px solid var(--color-border);
+  border: 1px solid transparent;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
-  background: rgba(16, 20, 38, 0.92);
+  background:
+    linear-gradient(rgba(16, 20, 38, 0.92), rgba(16, 20, 38, 0.92)) padding-box,
+    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box,
+    linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box;
   box-shadow: var(--shadow-sm);
   backface-visibility: hidden;
 }
 
+@supports (corner-shape: scoop) {
+  .mhwilds-card-face {
+    corner-shape: scoop;
+  }
+}
+
 .mhwilds-flip-indicator {
   position: absolute;
   top: 10px;
@@ -271,12 +334,19 @@
   width: 34px;
   height: 34px;
   place-items: center;
-  border: 1px solid rgba(165, 180, 252, 0.2);
+  border: 1px solid rgba(165, 180, 252, 0.12);
   border-radius: var(--radius-md);
-  background: rgba(7, 10, 24, 0.62);
+  background: rgba(7, 10, 24, 0.36);
-  color: var(--color-text-primary);
+  color: var(--color-text-muted);
   pointer-events: none;
-  box-shadow: var(--shadow-sm);
+  box-shadow: none;
+  opacity: 0.78;
+  transition:
+    border-color var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard),
+    opacity var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard);
 }
 
 .mhwilds-flip-indicator .ui-icon {
@@ -292,16 +362,30 @@
   transform: rotateY(180deg);
 }
 
+.monster-card:hover .mhwilds-flip-indicator {
+  border-color: rgba(196, 181, 253, 0.22);
+  background: rgba(16, 20, 38, 0.52);
+  color: #c4b5fd;
+  opacity: 1;
+  box-shadow: 0 0 12px rgba(139, 92, 246, 0.1);
+}
+
 .monster-card:hover .mhwilds-card-face {
-  border-color: var(--color-border-hover);
+  border-color: transparent;
-  background: rgba(21, 26, 48, 0.98);
+  background:
+    linear-gradient(rgba(16, 20, 38, 0.95), rgba(16, 20, 38, 0.95)) padding-box,
+    linear-gradient(135deg, rgba(139, 92, 246, 0.76), rgba(196, 181, 253, 0.58)) border-box;
+  box-shadow:
+    var(--shadow-sm),
+    0 0 14px rgba(139, 92, 246, 0.14),
+    0 0 24px rgba(196, 181, 253, 0.08);
 }
 
 .mhwilds-card-art {
   display: grid;
   min-height: 112px;
   place-items: center;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid rgba(246, 196, 83, 0.42);
   background:
     radial-gradient(circle at 50% 40%, rgba(139, 92, 246, 0.16), transparent 46%),
     rgba(5, 7, 17, 0.36);

website/src/styles/_nebula.scss

@@ -0,0 +1,134 @@
+@use "sass:list";
+
+$bright-stars:
+  (12% 19% rgba(255, 255, 255, 0.98) 1.4px rgba(255, 255, 255, 0.2) 3.8px 6px),
+  (38% 27% rgba(246, 196, 83, 0.94) 1.5px rgba(246, 196, 83, 0.18) 4px 7px),
+  (73% 17% rgba(255, 255, 255, 0.96) 1.5px rgba(167, 139, 250, 0.2) 4.5px 7px),
+  (87% 61% rgba(255, 255, 255, 0.96) 1.4px rgba(255, 255, 255, 0.18) 4px 6.5px),
+  (52% 71% rgba(246, 196, 83, 0.9) 1.3px rgba(246, 196, 83, 0.16) 3.8px 6.5px),
+  (29% 62% rgba(255, 255, 255, 1) 1.6px rgba(255, 255, 255, 0.18) 4.8px 8px),
+  (68% 52% rgba(246, 196, 83, 0.98) 1.6px rgba(246, 196, 83, 0.18) 4.8px 8px),
+  (92% 19% rgba(255, 255, 255, 1) 1.5px rgba(167, 139, 250, 0.18) 4.6px 7.5px);
+
+$stars:
+  (7% 12% rgba(255, 255, 255, 0.95) 1.1px 1.8px),
+  (14% 68% rgba(167, 139, 250, 0.72) 1.2px 2px),
+  (19% 34% rgba(255, 255, 255, 0.72) 0.9px 1.5px),
+  (24% 86% rgba(246, 196, 83, 0.68) 1.2px 2.1px),
+  (31% 18% rgba(255, 255, 255, 0.82) 1px 1.7px),
+  (37% 57% rgba(255, 255, 255, 0.6) 0.9px 1.5px),
+  (43% 9% rgba(246, 196, 83, 0.62) 1.2px 2px),
+  (48% 77% rgba(167, 139, 250, 0.66) 1px 1.8px),
+  (54% 29% rgba(255, 255, 255, 0.92) 1.1px 1.8px),
+  (61% 63% rgba(255, 255, 255, 0.62) 0.9px 1.5px),
+  (66% 14% rgba(167, 139, 250, 0.74) 1.2px 2px),
+  (71% 84% rgba(255, 255, 255, 0.76) 1px 1.7px),
+  (76% 42% rgba(246, 196, 83, 0.76) 1.2px 2.1px),
+  (83% 23% rgba(255, 255, 255, 0.68) 0.9px 1.5px),
+  (89% 72% rgba(167, 139, 250, 0.62) 1px 1.8px),
+  (94% 48% rgba(255, 255, 255, 0.86) 1.1px 1.8px),
+  (11% 45% rgba(255, 255, 255, 0.5) 0.8px 1.4px),
+  (28% 51% rgba(246, 196, 83, 0.56) 0.9px 1.6px),
+  (58% 92% rgba(255, 255, 255, 0.58) 0.8px 1.4px),
+  (97% 8% rgba(255, 255, 255, 0.78) 1px 1.7px),
+  (4% 78% rgba(255, 255, 255, 0.55) 0.8px 1.4px),
+  (17% 5% rgba(246, 196, 83, 0.5) 0.9px 1.6px),
+  (22% 23% rgba(255, 255, 255, 0.46) 0.7px 1.3px),
+  (33% 72% rgba(167, 139, 250, 0.5) 0.9px 1.6px),
+  (41% 39% rgba(255, 255, 255, 0.54) 0.8px 1.4px),
+  (52% 54% rgba(246, 196, 83, 0.44) 0.8px 1.5px),
+  (63% 36% rgba(255, 255, 255, 0.48) 0.7px 1.3px),
+  (69% 96% rgba(255, 255, 255, 0.5) 0.8px 1.4px),
+  (81% 6% rgba(246, 196, 83, 0.52) 0.9px 1.6px),
+  (91% 89% rgba(255, 255, 255, 0.56) 0.8px 1.4px),
+  (3% 31% rgba(167, 139, 250, 0.42) 0.7px 1.3px),
+  (45% 96% rgba(246, 196, 83, 0.42) 0.8px 1.5px),
+  (74% 59% rgba(255, 255, 255, 0.46) 0.7px 1.3px),
+  (86% 37% rgba(255, 255, 255, 0.5) 0.8px 1.4px),
+  (99% 66% rgba(167, 139, 250, 0.46) 0.8px 1.5px),
+  (6% 92% rgba(255, 255, 255, 0.42) 0.7px 1.2px),
+  (13% 27% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
+  (21% 74% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
+  (26% 11% rgba(167, 139, 250, 0.36) 0.7px 1.2px),
+  (32% 44% rgba(255, 255, 255, 0.38) 0.6px 1.1px),
+  (39% 88% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
+  (46% 16% rgba(255, 255, 255, 0.4) 0.7px 1.2px),
+  (57% 41% rgba(167, 139, 250, 0.36) 0.7px 1.2px),
+  (64% 79% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
+  (72% 31% rgba(255, 255, 255, 0.36) 0.6px 1.1px),
+  (79% 93% rgba(255, 255, 255, 0.4) 0.7px 1.2px),
+  (88% 12% rgba(246, 196, 83, 0.36) 0.7px 1.2px),
+  (93% 78% rgba(255, 255, 255, 0.38) 0.6px 1.1px),
+  (98% 28% rgba(167, 139, 250, 0.34) 0.7px 1.2px),
+  (2% 7% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
+  (8% 56% rgba(246, 196, 83, 0.32) 0.6px 1.1px),
+  (15% 82% rgba(255, 255, 255, 0.38) 0.7px 1.2px),
+  (18% 91% rgba(167, 139, 250, 0.32) 0.6px 1.1px),
+  (23% 39% rgba(255, 255, 255, 0.3) 0.5px 1px),
+  (27% 67% rgba(255, 255, 255, 0.36) 0.6px 1.1px),
+  (34% 6% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
+  (36% 81% rgba(255, 255, 255, 0.32) 0.6px 1.1px),
+  (42% 66% rgba(167, 139, 250, 0.34) 0.7px 1.2px),
+  (49% 4% rgba(255, 255, 255, 0.36) 0.6px 1.1px),
+  (51% 24% rgba(246, 196, 83, 0.3) 0.6px 1.1px),
+  (56% 83% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
+  (62% 7% rgba(255, 255, 255, 0.3) 0.5px 1px),
+  (67% 68% rgba(167, 139, 250, 0.32) 0.6px 1.1px),
+  (70% 25% rgba(246, 196, 83, 0.32) 0.6px 1.1px),
+  (78% 11% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
+  (82% 82% rgba(255, 255, 255, 0.38) 0.7px 1.2px),
+  (86% 51% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
+  (90% 33% rgba(255, 255, 255, 0.32) 0.6px 1.1px),
+  (96% 94% rgba(167, 139, 250, 0.32) 0.6px 1.1px);
+
+@function star-gradient($star) {
+  @return radial-gradient(circle at #{list.nth($star, 1)} #{list.nth($star, 2)}, #{list.nth($star, 3)} 0 #{list.nth($star, 4)}, transparent #{list.nth($star, 5)});
+}
+
+@function bright-star-gradient($star) {
+  @return radial-gradient(circle at #{list.nth($star, 1)} #{list.nth($star, 2)}, #{list.nth($star, 3)} 0 #{list.nth($star, 4)}, #{list.nth($star, 5)} calc(#{list.nth($star, 4)} + 0.3px) #{list.nth($star, 6)}, transparent #{list.nth($star, 7)});
+}
+
+@function star-field($bright, $normal) {
+  $gradients: ();
+
+  @each $star in $bright {
+    $gradients: list.append($gradients, bright-star-gradient($star), comma);
+  }
+
+  @each $star in $normal {
+    $gradients: list.append($gradients, star-gradient($star), comma);
+  }
+
+  @return $gradients;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.88;
+  background:
+    radial-gradient(ellipse at 18% 22%, rgba(124, 58, 237, 0.3), transparent 34%),
+    radial-gradient(ellipse at 82% 10%, rgba(59, 130, 246, 0.18), transparent 30%),
+    radial-gradient(ellipse at 78% 72%, rgba(217, 70, 239, 0.18), transparent 36%),
+    radial-gradient(ellipse at 36% 92%, rgba(246, 196, 83, 0.1), transparent 34%),
+    linear-gradient(118deg, transparent 0 22%, rgba(139, 92, 246, 0.1) 36%, transparent 55%),
+    linear-gradient(62deg, transparent 0 32%, rgba(246, 196, 83, 0.06) 48%, transparent 68%);
+  filter: saturate(1.18);
+}
+
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.82;
+  background-image: star-field($bright-stars, $stars);
+  background-size: 100% 100%;
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.36));
+  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.36));
+}

website/src/styles/_overlays.scss

@@ -55,24 +55,40 @@
   position: fixed;
   inset: 0;
   z-index: 40;
-  background: rgba(2, 3, 9, 0.42);
+  background: rgba(2, 3, 9, 0.24);
-  backdrop-filter: blur(2px);
+  backdrop-filter: none;
 }
 
 .drawer-panel {
   position: fixed;
   inset: 0 0 0 auto;
   z-index: 50;
+  contain: paint;
   width: min(720px, 94vw);
   min-width: 360px;
   max-width: 94vw;
   overflow: auto;
-  border-left: 1px solid var(--color-border);
+  border-left: 0;
-  background: rgba(7, 9, 19, 0.96);
+  background:
-  box-shadow: var(--shadow-lg);
+    linear-gradient(
+      180deg,
+      rgba(246, 196, 83, 0.92),
+      rgba(139, 92, 246, 0.64) 48%,
+      rgba(196, 181, 253, 0.72)
+    ) left top / 1px 100% no-repeat,
+    rgba(7, 9, 19, 0.82);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  box-shadow:
+    inset 8px 0 18px rgba(139, 92, 246, 0.08),
+    var(--shadow-lg);
   padding: var(--space-5);
 }
 
+.drawer-panel::before {
+  content: none;
+}
+
 .drawer-content {
   position: relative;
   display: flex;
@@ -82,9 +98,10 @@
 }
 
 .drawer-resize-handle {
-  position: absolute;
+  position: fixed;
   top: 50%;
-  left: -18px;
+  right: calc(var(--drawer-panel-width, min(720px, 94vw)) - 18px);
+  z-index: 62;
   width: 14px;
   height: 72px;
   border-radius: var(--radius-pill);

website/src/styles/_responsive.scss

@@ -61,6 +61,7 @@
 
   .hero,
   .game-hero,
+  .page-hero,
   .origin-section,
   .section-grid,
   .info-grid {
@@ -68,11 +69,28 @@
   }
 
   .hero,
-  .game-hero {
+  .game-hero,
+  .page-hero {
     min-height: auto;
     padding: var(--space-6);
   }
 
+  .game-hero::after {
+    left: 0;
+    opacity: 0.42;
+    background:
+      linear-gradient(90deg, rgba(5, 7, 17, 0.28), rgba(5, 7, 17, 0.72)),
+      var(--game-hero-image);
+    background-position:
+      center,
+      right center;
+    background-size:
+      cover,
+      cover;
+    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.14) 30%, #000 70%);
+    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.14) 30%, #000 70%);
+  }
+
   .home-visual {
     justify-self: center;
     width: min(320px, 100%);
@@ -95,7 +113,7 @@
     padding-right: 0;
     padding-bottom: var(--space-5);
     border-right: 0;
-    border-bottom: 2px solid rgba(34, 211, 238, 0.66);
+    border-bottom: 2px solid rgba(246, 196, 83, 0.66);
   }
 
   .dialogue-line {
@@ -174,7 +192,7 @@
     border: 1px solid var(--color-border);
     border-radius: var(--radius-xl);
     background: rgba(11, 14, 27, 0.9);
-    backdrop-filter: blur(18px);
+    backdrop-filter: blur(10px);
     box-shadow: var(--shadow-lg);
   }
 

website/src/styles/_shell.scss

@@ -1,4 +1,6 @@
 .app-shell {
+  position: relative;
+  z-index: 1;
   display: grid;
   grid-template-columns: 248px minmax(0, 1fr);
   min-height: 100vh;
@@ -14,7 +16,7 @@
   padding: var(--space-5);
   border-right: 1px solid var(--color-border);
   background: rgba(11, 14, 27, 0.82);
-  backdrop-filter: blur(18px);
+  backdrop-filter: blur(10px);
   box-shadow: var(--shadow-md);
 }
 
@@ -26,6 +28,38 @@
   font-weight: 800;
 }
 
+.brand-name {
+  color: var(--color-text-primary);
+}
+
+.brand-name-main {
+  background: linear-gradient(
+    90deg,
+    var(--color-text-primary) 0%,
+    var(--color-text-primary) 46%,
+    var(--color-accent-gold) 58%,
+    var(--color-accent-gold) 100%
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  background-position: 0 0;
+  background-size: 220% 100%;
+  color: transparent;
+  transition: background-position 620ms var(--ease-standard);
+}
+
+.brand-name-accent {
+  color: var(--color-accent-gold);
+}
+
+.brand:hover .brand-name-main {
+  background-position: 100% 0;
+}
+
+.brand-name-accent {
+  background: none;
+}
+
 .brand-mark {
   display: block;
   width: 34px;
@@ -65,7 +99,7 @@
   width: 24px;
   height: 24px;
   flex: 0 0 auto;
-  background: var(--color-accent-cyan);
+  background: var(--color-accent-gold);
   mask-position: center;
   mask-repeat: no-repeat;
   mask-size: 20px 20px;
@@ -108,16 +142,66 @@
 }
 
 .sidebar-note {
+  position: relative;
+  isolation: isolate;
   margin-top: auto;
   padding: var(--space-4);
-  border: 1px solid var(--color-border);
+  overflow: hidden;
+  border: 1px solid transparent;
   border-radius: var(--radius-lg);
-  background: rgba(16, 20, 38, 0.62);
+  background: rgba(16, 20, 38, 0.58);
+  box-shadow: var(--shadow-sm);
+}
+
+.sidebar-note::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    radial-gradient(circle at 92% 12%, rgba(246, 196, 83, 0.009), transparent 34%),
+    radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.011), transparent 42%);
+  pointer-events: none;
+}
+
+.sidebar-note::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  padding: 1px;
+  border-radius: inherit;
+  background:
+    radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.42), transparent 34%),
+    linear-gradient(135deg, rgba(246, 196, 83, 0.42), rgba(139, 92, 246, 0.32) 54%, rgba(196, 181, 253, 0.24));
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+}
+
+.sidebar-note > * {
+  position: relative;
+  z-index: 1;
+}
+
+.sidebar-note .badge {
+  border: 1px solid rgba(246, 196, 83, 0.24);
+  background:
+    linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.16));
+  color: var(--color-accent-gold);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 
 .sidebar-note p {
-  margin: 10px 0 0;
+  margin: 12px 0 0;
   font-size: var(--font-size-sm);
+  line-height: 1.45;
 }
 
 .sidebar-storage-actions {
@@ -128,6 +212,7 @@
 
 .sidebar-action-button {
   display: inline-flex;
+  background: rgba(7, 10, 24, 0.36);
 }
 
 .content-shell {
@@ -149,7 +234,7 @@
   padding: 0 var(--space-8);
   border-bottom: 1px solid var(--color-border);
   background: rgba(7, 9, 19, 0.78);
-  backdrop-filter: blur(18px);
+  backdrop-filter: blur(10px);
 }
 
 .topbar strong {

website/src/styles/_tokens.scss

@@ -18,6 +18,7 @@
   --color-secondary: #3b82f6;
   --color-secondary-soft: rgba(59, 130, 246, 0.14);
   --color-accent-cyan: #22d3ee;
+  --color-accent-gold: #f6c453;
   --color-accent-pink: #d946ef;
   --color-accent-indigo: #6366f1;
 
@@ -48,9 +49,11 @@
     rgba(217, 70, 239, 0.12)
   );
   --gradient-page:
-    radial-gradient(circle at 20% 10%, rgba(124, 58, 237, 0.16), transparent 34%),
+    radial-gradient(ellipse at 16% 8%, rgba(139, 92, 246, 0.28), transparent 38%),
-    radial-gradient(circle at 85% 20%, rgba(37, 99, 235, 0.12), transparent 30%),
+    radial-gradient(ellipse at 86% 18%, rgba(99, 102, 241, 0.2), transparent 34%),
-    radial-gradient(circle at 55% 90%, rgba(217, 70, 239, 0.08), transparent 35%),
+    radial-gradient(ellipse at 58% 82%, rgba(217, 70, 239, 0.14), transparent 42%),
+    radial-gradient(ellipse at 28% 68%, rgba(246, 196, 83, 0.08), transparent 36%),
+    linear-gradient(145deg, rgba(8, 10, 24, 0.2), rgba(16, 11, 34, 0.38) 48%, rgba(5, 7, 17, 0.24)),
     #070913;
 
   --font-size-xs: 0.75rem;

website/src/styles/_toolboxes.scss

@@ -6,7 +6,52 @@
   border: 1px solid var(--color-border);
   border-radius: var(--radius-xl);
   background: rgba(16, 20, 38, 0.76);
-  backdrop-filter: blur(18px);
+  backdrop-filter: blur(10px);
+}
+
+.toolbox-head.page-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  overflow: visible;
+  border-color: transparent;
+  background:
+    var(--gradient-nebula),
+    radial-gradient(circle at 86% 18%, rgba(246, 196, 83, 0.1), transparent 28%),
+    linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(5, 7, 17, 0.96));
+  box-shadow: var(--shadow-md);
+  backdrop-filter: none;
+}
+
+.toolbox-head.page-hero > * {
+  z-index: 4;
+}
+
+.toolbox-head-embedded.page-hero {
+  min-height: 132px;
+  padding: var(--space-5);
+  background:
+    var(--gradient-nebula),
+    radial-gradient(circle at 86% 18%, rgba(246, 196, 83, 0.08), transparent 30%),
+    linear-gradient(135deg, rgba(16, 20, 38, 0.94), rgba(5, 7, 17, 0.94));
+  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
+}
+
+.toolbox-head-embedded.page-hero::before {
+  background:
+    radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.38), transparent 24%),
+    linear-gradient(135deg, rgba(246, 196, 83, 0.28), rgba(139, 92, 246, 0.18) 52%, rgba(196, 181, 253, 0.24));
+}
+
+.toolbox-head-embedded.page-hero::after {
+  background:
+    linear-gradient(135deg, rgba(5, 7, 17, 0.08), rgba(5, 7, 17, 0.42)),
+    radial-gradient(circle at 82% 16%, rgba(246, 196, 83, 0.12), transparent 32%);
+}
+
+.toolbox-head-embedded h1 {
+  margin-bottom: 0;
+  font-size: clamp(1.55rem, 3vw, 2.2rem);
 }
 
 .toolbox-title {
@@ -36,7 +81,7 @@
   min-height: 100px;
   border-color: var(--color-primary-border);
   background:
-    radial-gradient(circle at 50% 35%, rgba(34, 211, 238, 0.18), transparent 44%),
+    radial-gradient(circle at 50% 35%, rgba(246, 196, 83, 0.18), transparent 44%),
     rgba(21, 26, 48, 0.86);
 }
 
@@ -69,7 +114,7 @@
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
-  z-index: 120;
+  z-index: 300;
   display: grid;
   grid-template-columns: repeat(5, 42px);
   gap: 7px;
@@ -78,7 +123,7 @@
   padding: 9px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  background: rgba(12, 15, 32, 0.96);
+  background: rgba(10, 13, 28, 0.99);
   box-shadow: var(--shadow-lg);
 }
 
@@ -92,9 +137,9 @@
 }
 
 .toolbox-icon-picker-menu button.active {
-  border-color: var(--color-accent-cyan);
+  border-color: var(--color-accent-gold);
-  background: rgba(34, 211, 238, 0.12);
+  background: rgba(246, 196, 83, 0.12);
-  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
+  box-shadow: 0 0 0 2px rgba(246, 196, 83, 0.12);
 }
 
 .toolbox-icon-picker-menu img {
@@ -105,13 +150,13 @@
 
 .toolbox-title:focus {
   background: rgba(7, 10, 24, 0.72);
-  outline: 1px solid rgba(34, 211, 238, 0.72);
+  outline: 1px solid rgba(246, 196, 83, 0.72);
   outline-offset: 3px;
 }
 
 .tool-add-controls {
   position: relative;
-  z-index: 80;
+  z-index: 280;
   display: inline-flex;
   justify-content: flex-end;
 }
@@ -147,7 +192,7 @@
   position: absolute;
   top: calc(100% + 8px);
   right: 0;
-  z-index: 120;
+  z-index: 300;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
@@ -157,7 +202,7 @@
   padding: 8px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  background: rgba(12, 15, 32, 0.96);
+  background: rgba(10, 13, 28, 0.99);
   box-shadow: var(--shadow-lg);
   opacity: 0;
   pointer-events: none;
@@ -179,7 +224,7 @@
   right: 18px;
   bottom: 100%;
   border-right: 7px solid transparent;
-  border-bottom: 7px solid rgba(12, 15, 32, 0.96);
+  border-bottom: 7px solid rgba(10, 13, 28, 0.99);
   border-left: 7px solid transparent;
 }
 
@@ -207,13 +252,6 @@
   margin-top: var(--space-4);
 }
 
-.toolbox-summary {
-  max-width: 760px;
-  margin: 0;
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-sm);
-}
-
 .toolbox-actions-row {
   display: flex;
   width: 100%;
@@ -251,7 +289,79 @@
 }
 
 .module {
+  position: relative;
+  contain: paint;
   overflow: hidden;
+  border-color: transparent;
+  background: rgba(16, 20, 38, 0.42);
+  box-shadow: var(--shadow-sm);
+}
+
+.module::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  border-radius: inherit;
+  background: rgba(165, 180, 252, 0.14);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+  transition: background var(--duration-fast) var(--ease-standard);
+}
+
+.module::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  border-radius: inherit;
+  background:
+    radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(246, 196, 83, 0.52) 0 18px, transparent 27px),
+    linear-gradient(90deg, transparent 0 30%, rgba(246, 196, 83, 0.08) 42%, rgba(246, 196, 83, 0.38) 72%, rgba(246, 196, 83, 0.52) 100%),
+    linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.08) 42%, rgba(246, 196, 83, 0.38) 72%, rgba(246, 196, 83, 0.52) 100%);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+  transition: background var(--duration-fast) var(--ease-standard);
+}
+
+.module > * {
+  position: relative;
+  z-index: 1;
+}
+
+.module:hover {
+  transform: none;
+  border-color: transparent;
+  background: rgba(16, 20, 38, 0.42);
+  box-shadow:
+    var(--shadow-sm),
+    0 0 14px rgba(139, 92, 246, 0.14),
+    0 0 24px rgba(196, 181, 253, 0.08);
+}
+
+.module:hover::before {
+  background: linear-gradient(135deg, rgba(139, 92, 246, 0.42), rgba(196, 181, 253, 0.28));
+}
+
+.module:hover::after {
+  background:
+    radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(196, 181, 253, 0.5) 0 18px, transparent 27px),
+    linear-gradient(90deg, transparent 0 30%, rgba(139, 92, 246, 0.08) 42%, rgba(139, 92, 246, 0.32) 72%, rgba(196, 181, 253, 0.5) 100%),
+    linear-gradient(180deg, transparent 0 30%, rgba(139, 92, 246, 0.08) 42%, rgba(139, 92, 246, 0.32) 72%, rgba(196, 181, 253, 0.5) 100%);
 }
 
 .module.is-dragging {
@@ -261,16 +371,16 @@
 }
 
 .module.is-drop-target {
-  border-color: rgba(34, 211, 238, 0.72);
+  border-color: rgba(246, 196, 83, 0.72);
   box-shadow:
     var(--shadow-sm),
-    inset 0 3px 0 rgba(34, 211, 238, 0.8);
+    inset 0 3px 0 rgba(246, 196, 83, 0.8);
 }
 
 .module.is-drop-target.drop-after {
   box-shadow:
     var(--shadow-sm),
-    inset 0 -3px 0 rgba(34, 211, 238, 0.8);
+    inset 0 -3px 0 rgba(246, 196, 83, 0.8);
 }
 
 .module header {
@@ -360,7 +470,7 @@
 
 .module-title:focus {
   background: rgba(7, 10, 24, 0.72);
-  outline: 1px solid rgba(34, 211, 238, 0.72);
+  outline: 1px solid rgba(246, 196, 83, 0.72);
   outline-offset: 2px;
 }
 
@@ -511,10 +621,6 @@ textarea:focus {
 
 .checklist input[type="checkbox"] {
   flex: 0 0 auto;
-  width: 20px;
-  min-height: 20px;
-  height: 20px;
-  accent-color: var(--color-primary);
 }
 
 .checklist-item.is-complete .checklist-item-main > span {
@@ -678,15 +784,15 @@ textarea:focus {
 }
 
 .dropzone:hover {
-  border-color: var(--color-accent-cyan);
+  border-color: var(--color-accent-gold);
-  background: rgba(34, 211, 238, 0.1);
+  background: rgba(246, 196, 83, 0.1);
-  box-shadow: 0 0 30px rgba(34, 211, 238, 0.12);
+  box-shadow: 0 0 30px rgba(246, 196, 83, 0.12);
 }
 
 .dropzone.is-drag-over {
-  border-color: var(--color-accent-cyan);
+  border-color: var(--color-accent-gold);
-  background: rgba(34, 211, 238, 0.14);
+  background: rgba(246, 196, 83, 0.14);
-  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
+  box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.12);
 }
 
 .paste-target {
@@ -734,7 +840,7 @@ textarea:focus {
 
 .shot-preview:hover {
   transform: none;
-  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.28);
+  box-shadow: 0 0 0 2px rgba(246, 196, 83, 0.28);
 }
 
 .shots img {

website/src/styles/main.scss

@@ -1,4 +1,5 @@
 @use "tokens";
+@use "nebula";
 @use "base";
 @use "shell";
 @use "home";