chore: sync current workspace changes

website/DESIGN.md

@@ -0,0 +1,69 @@
+# BossAI Website Design System
+
+## 1. Visual Theme & Atmosphere
+
+BossAI is a live model control plane, not a conventional SaaS landing page. The first viewport should feel like entering an active routing system: full-bleed, dark, kinetic, precise, and operational. Use an immersive WebGL field as environmental depth, with restrained HUD overlays that expose real product concepts such as gateway, route health, model tiers, billing, and workspace output.
+
+## 2. Color
+
+- Base: near-black `#050509` and deep green-black panels.
+- Primary signal: acid lime `#d7ff2d` for active routes and primary actions.
+- Secondary signal: mint `#67ffd8` for health, response state, and data accents.
+- Tertiary signal: magenta `#ff3df2` and orange `#ff8a1f`, used sparingly in the scene and headline.
+- Text: soft white `#f8fff4`; secondary copy uses translucent white at 62-76% opacity.
+- Never switch to Quai's red-on-black identity or let one hue dominate the full page.
+
+## 3. Typography
+
+- Display type: wide, high-contrast sans serif in uppercase for the first-viewport statement.
+- Interface type: the existing monospace stack for model IDs, routes, status, and labels.
+- Chinese body copy: system sans serif with comfortable line height and no artificial letter spacing.
+- Headings inside HUD surfaces stay compact; only the hero statement uses viewport-scale type.
+
+## 4. Spacing & Grid
+
+- Content width: `min(100% - 48px, 1180px)` on desktop and `min(100% - 28px, 1180px)` on mobile.
+- Hero: minimum one viewport, with navigation at the top and a visible continuation cue at the bottom.
+- Desktop hero grid: narrative area plus an operational HUD, with at least 32px between them.
+- Mobile: one column, 14px outer gutters, 12-18px component gaps, and stable button heights.
+
+## 5. Layout & Composition
+
+- The WebGL scene is full-bleed and unframed behind the first viewport.
+- Navigation is sparse and fixed to the upper visual field.
+- Hero copy is over the scene, never inside a card.
+- The model router is a functional HUD overlay, not decorative media.
+- Following sections form a scroll narrative: gateway signals, workflow field, creation loop, final action.
+- `/new` is an isolated preview surface. The production `/` route keeps its current page structure and must not import, redirect to, or reuse the preview.
+
+## 6. Components
+
+- Brand lockup: existing BossAI logo plus wordmark.
+- HUD buttons: compact, high-contrast, clipped or softly beveled edges; clear primary action hierarchy.
+- Route rows: model family, exact API ID, and workload state in stable three-column tracks.
+- Signal panels: one value, one label, one concise explanation.
+- Do not add decorative card grids inside other cards or generic feature icon tiles.
+
+## 7. Motion & Interaction
+
+- Initial motion reveals the brand, system label, headline, HUD, and model rows in sequence.
+- Scroll adjusts the WebGL field and moves sections with restrained parallax.
+- Pointer movement may influence the shader on capable desktop devices.
+- Reduced motion, coarse pointers, narrow screens, and low-memory devices receive a nonblank CSS fallback.
+- Motion must not delay access to links or create layout shift.
+
+## 8. Voice & Brand
+
+- Voice: concise, technical, direct, and product-specific.
+- Prefer exact terms: `gpt-5.6-sol`, `claude-fable-5`, `/v1`, route health, ledger, workspace.
+- Avoid claims that cannot be verified from the product.
+- Public copy should present BossAI as the product; `BoosAPI` appears only when referring to the underlying gateway implementation.
+
+## 9. Anti-patterns
+
+- Do not copy Quai Network's logo, red palette, orbital scene, silhouettes, loading screen, labels, or button geometry.
+- Do not retain `EXPERIMENTAL WEBSITE ROUTE / NEW`, `acid control plane`, or other prototype language.
+- Do not use a split hero where a decorative preview card competes with the headline.
+- Do not hide the product name, latest model support, or primary action below the fold.
+- Do not introduce gradient orbs, generic AI imagery, oversized rounded cards, or dense marketing prose.
+- Do not let long API model IDs overflow or resize route rows.

website/app/globals.css

@@ -2444,10 +2444,10 @@ a {
   min-height: 100dvh;
   overflow: hidden;
   background:
-    linear-gradient(116deg, rgba(255, 61, 242, 0.42), transparent 26%),
-    linear-gradient(236deg, rgba(215, 255, 45, 0.44), transparent 31%),
-    linear-gradient(8deg, rgba(85, 166, 255, 0.36), transparent 40%),
-    #050509;
+    linear-gradient(116deg, rgba(255, 61, 242, 0.2), transparent 30%),
+    linear-gradient(236deg, rgba(215, 255, 45, 0.2), transparent 34%),
+    linear-gradient(8deg, rgba(85, 166, 255, 0.16), transparent 44%),
+    #020706;
   color: var(--new-ink);
   isolation: isolate;
   filter: hue-rotate(calc(var(--acid-hue-shift) * 1deg));
@@ -2463,7 +2463,7 @@ a {
     repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 46px),
     repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 46px),
     conic-gradient(from 132deg at 62% 38%, var(--new-lime), var(--new-pink), var(--new-blue), var(--new-mint), var(--new-lime));
-  opacity: 0.34;
+  opacity: 0.2;
   mix-blend-mode: screen;
   mask-image: linear-gradient(to bottom, black, transparent 82%);
   transform: translate3d(0, calc(var(--acid-band-shift) * -0.22), 0);
@@ -2479,7 +2479,7 @@ a {
     repeating-conic-gradient(from 18deg, rgba(215, 255, 45, 0.24) 0 7deg, rgba(255, 61, 242, 0.16) 7deg 13deg, transparent 13deg 22deg),
     radial-gradient(circle at 48% 42%, rgba(103, 255, 216, 0.18), transparent 46%);
   filter: saturate(1.35) contrast(1.08);
-  opacity: 0.46;
+  opacity: 0.3;
   transform: translate3d(0, calc(var(--acid-band-shift) * 0.16), 0) rotate(calc(-8deg + var(--acid-scroll) * 12deg));
 }
 
@@ -2536,6 +2536,9 @@ a {
 }
 
 .new-acid-nav {
+  position: sticky;
+  top: 0;
+  z-index: 10;
   min-height: 88px;
   display: grid;
   grid-template-columns: auto 1fr auto;
@@ -2543,6 +2546,18 @@ a {
   gap: 22px;
 }
 
+.new-acid-nav::before {
+  position: absolute;
+  inset: 12px 0;
+  z-index: -1;
+  border: 1px solid rgba(248, 255, 244, 0.12);
+  border-radius: 8px;
+  background: rgba(2, 7, 6, 0.58);
+  content: "";
+  backdrop-filter: blur(18px) saturate(1.18);
+  -webkit-backdrop-filter: blur(18px) saturate(1.18);
+}
+
 .new-acid-brand,
 .new-acid-nav nav,
 .new-acid-actions {
@@ -2590,11 +2605,12 @@ a {
   align-items: center;
   justify-content: center;
   border: 1px solid var(--new-line);
-  border-radius: 999px;
+  border-radius: 4px;
   padding-inline: 18px;
   font-size: 13px;
   font-weight: 850;
   white-space: nowrap;
+  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
 }
 
 .new-acid-console-link,
@@ -2623,6 +2639,7 @@ a {
 }
 
 .new-acid-hero {
+  position: relative;
   min-height: min(820px, calc(100dvh - 88px));
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(min(420px, 100%), 0.76fr);
@@ -2631,6 +2648,20 @@ a {
   padding-block: clamp(64px, 8vw, 112px);
 }
 
+.new-acid-telemetry {
+  position: absolute;
+  top: 18px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  color: rgba(248, 255, 244, 0.32);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 9px;
+  letter-spacing: 0;
+}
+
 .new-acid-hero-copy {
   display: grid;
   gap: 24px;
@@ -2642,7 +2673,7 @@ a {
   align-items: center;
   gap: 10px;
   border: 1px solid rgba(215, 255, 45, 0.36);
-  border-radius: 999px;
+  border-radius: 4px;
   background: rgba(5, 5, 9, 0.58);
   color: var(--new-lime);
   padding: 9px 13px;
@@ -2664,9 +2695,10 @@ a {
 .new-acid-hero h1 {
   max-width: 920px;
   margin: 0;
-  font-size: clamp(54px, 12vw, 148px);
+  font-size: clamp(54px, 8vw, 116px);
   line-height: 0.88;
   letter-spacing: 0;
+  overflow-wrap: anywhere;
   text-transform: uppercase;
   text-wrap: balance;
 }
@@ -2705,7 +2737,7 @@ a {
   position: relative;
   min-height: 520px;
   border: 1px solid rgba(248, 255, 244, 0.24);
-  border-radius: 28px;
+  border-radius: 8px;
   background:
     linear-gradient(138deg, rgba(255, 61, 242, 0.18), transparent 38%),
     linear-gradient(28deg, rgba(215, 255, 45, 0.24), transparent 42%),
@@ -2745,7 +2777,7 @@ a {
   justify-content: space-between;
   gap: 12px;
   border: 1px solid rgba(215, 255, 45, 0.36);
-  border-radius: 18px;
+  border-radius: 6px;
   background: rgba(5, 5, 9, 0.5);
   padding: 0 16px;
 }
@@ -2782,7 +2814,7 @@ a {
   align-content: center;
   gap: 8px;
   border: 1px solid rgba(248, 255, 244, 0.16);
-  border-radius: 22px;
+  border-radius: 6px;
   background: rgba(255, 255, 255, 0.08);
   padding: 16px;
 }
@@ -2805,7 +2837,7 @@ a {
   align-items: center;
   gap: 12px;
   border: 1px solid rgba(248, 255, 244, 0.14);
-  border-radius: 18px;
+  border-radius: 6px;
   background: rgba(5, 5, 9, 0.48);
   padding: 0 13px;
 }
@@ -2821,7 +2853,7 @@ a {
 
 .new-acid-route-list em {
   border: 1px solid rgba(103, 255, 216, 0.26);
-  border-radius: 999px;
+  border-radius: 4px;
   color: var(--new-mint);
   padding: 5px 8px;
   font-family: var(--font-geist-mono), monospace;
@@ -2841,7 +2873,7 @@ a {
   display: grid;
   align-content: space-between;
   border: 1px solid rgba(248, 255, 244, 0.18);
-  border-radius: 24px;
+  border-radius: 8px;
   background:
     linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(5, 5, 9, 0.54)),
     var(--new-panel);
@@ -2923,7 +2955,7 @@ a {
 
 .new-acid-stack span {
   border: 1px solid rgba(248, 255, 244, 0.22);
-  border-radius: 999px;
+  border-radius: 4px;
   background: rgba(5, 5, 9, 0.5);
   color: var(--new-ink);
   padding: 13px 16px;
@@ -2947,7 +2979,7 @@ a {
 .new-acid-final {
   position: relative;
   border: 1px solid rgba(248, 255, 244, 0.18);
-  border-radius: 28px;
+  border-radius: 8px;
   background: var(--new-panel-strong);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
   backdrop-filter: blur(18px) saturate(1.18);
@@ -2981,7 +3013,7 @@ a {
   display: grid;
   place-items: center;
   border: 1px solid rgba(215, 255, 45, 0.34);
-  border-radius: 14px;
+  border-radius: 4px;
   background: rgba(215, 255, 45, 0.1);
   color: var(--new-lime);
   font-family: var(--font-geist-mono), monospace;
@@ -3049,6 +3081,10 @@ a {
     padding-top: 32px;
   }
 
+  .new-acid-telemetry {
+    display: none;
+  }
+
   .new-acid-signal-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3097,7 +3133,7 @@ a {
 
   .new-acid-router {
     min-height: auto;
-    border-radius: 24px;
+    border-radius: 8px;
     padding: 14px;
   }
 
@@ -3136,7 +3172,7 @@ a {
   .new-acid-proof-copy,
   .new-acid-proof-steps article,
   .new-acid-final {
-    border-radius: 24px;
+    border-radius: 8px;
   }
 
   .new-acid-three {

website/app/layout.tsx

@@ -4,7 +4,7 @@ import "./globals.css";
 export const metadata: Metadata = {
   title: "BossAI | 聚合多模型多模态的 AI 应用平台",
   description:
-    "BossAI 聚合 API 网关、模型路由、Comfy 工作流、短视频工厂和数字人生产，让团队统一管理多模型多模态 AI 应用。",
+    "BossAI 统一接入 GPT-5.6 Sol、Terra、Luna、Claude Fable 5 与多模态模型，让团队通过一套 API 网关管理路由、工作流、创作和计费。",
   applicationName: "BossAI",
   icons: {
     icon: "/favicon.png",
@@ -13,7 +13,7 @@ export const metadata: Metadata = {
   openGraph: {
     title: "BossAI | 聚合多模型多模态的 AI 应用平台",
     description:
-      "统一 API 网关、智能路由、工作流画布和创作应用，让团队管理对话、生图、视频和数字人生产。",
+      "统一接入 GPT-5.6 Sol、Terra、Luna、Claude Fable 5，通过智能路由、工作流画布和创作应用管理对话、生图、视频和数字人生产。",
     type: "website",
     locale: "zh_CN",
   },

website/app/new/page.tsx

@@ -4,23 +4,23 @@ import Link from "next/link";
 import AcidExperience from "./AcidExperience";
 
 export const metadata: Metadata = {
-  title: "BossAI / New Signal",
+  title: "BossAI / Model Control Plane",
   description:
-    "BossAI 官网实验页：以高反差酸性图形语言展示统一 API 网关、模型路由、Comfy 工作流和创作生产平台。",
+    "BossAI 新版官网预览：以沉浸式模型控制平面展示 GPT-5.6 Sol、Terra、Luna、Claude Fable 5 与统一 API 网关。",
 };
 
 const signalCards = [
   ["Gateway", "/v1/*", "OpenAI、Claude、图像、视频和语音请求进入同一套鉴权、路由、日志和计费。"],
-  ["Router", "P0 / P1", "按站点、账号、模型能力、失败冷却和成本信号选择可用通道。"],
+  ["Model Mesh", "5.6 / Fable 5", "Sol、Terra、Luna 与 Claude Fable 5 按任务复杂度、速度和成本进入可用通道。"],
   ["Comfy", "Cloud API", "Comfy Cloud、RunningHub、External 和 BoosAPI 执行器统一进工作流前端。"],
   ["Studio", "Media OS", "生图助手、短视频工厂、数字人和工作空间共享模型资产与产出归档。"],
 ];
 
 const routeRows = [
-  ["chat", "gpt-5.5", "reasoning"],
-  ["image", "gpt-image-2", "archive"],
-  ["video", "Comfy API", "queue"],
-  ["voice", "tts", "timeline"],
+  ["sol", "gpt-5.6-sol", "frontier"],
+  ["terra", "gpt-5.6-terra", "balanced"],
+  ["luna", "gpt-5.6-luna", "fast"],
+  ["claude", "claude-fable-5", "long-run"],
 ];
 
 const stackItems = [
@@ -49,42 +49,47 @@ export default function NewWebsiteExperiment() {
           <span>BossAI</span>
         </Link>
         <nav aria-label="实验页锚点导航">
-          <a href="#gateway">Gateway</a>
+          <a href="#gateway">Models</a>
           <a href="#workflow">Workflow</a>
           <a href="#studio">Studio</a>
         </nav>
         <Link className="new-acid-console-link" href="/user/register">
-          开始使用
+          进入工作台
         </Link>
       </header>
 
       <section className="new-acid-hero" data-new-motion="section">
+        <div className="new-acid-telemetry" aria-hidden="true">
+          <span>MODEL_FABRIC::ONLINE</span>
+          <span>ROUTE_HEALTH::NOMINAL</span>
+          <span>LEDGER::RECORDING</span>
+        </div>
         <div className="new-acid-hero-copy">
           <div className="new-acid-kicker">
             <span />
-            EXPERIMENTAL WEBSITE ROUTE / NEW
+            BOSSAI MODEL FABRIC / ONLINE
           </div>
           <h1>
-            BoosAPI
-            <span>acid control plane</span>
+            Frontier
+            <span>model control plane</span>
           </h1>
           <p>
-            统一 API 网关、智能模型路由、Comfy 工作流和创作生产平台，被压缩成一个可以运营、可以计费、可以归档的 BossAI 系统。
+            一套入口调度 GPT-5.6 Sol、Terra、Luna 与 Claude Fable 5，让模型、工作流、创作任务和成本记录运行在同一个 BossAI 控制平面。
           </p>
           <div className="new-acid-actions">
             <Link className="new-acid-primary" href="/user/register">
-              创建用户工作台
+              启动模型工作台
             </Link>
             <Link className="new-acid-secondary" href="/boos">
-              进入控制台
+              管理控制台
             </Link>
           </div>
         </div>
 
         <div className="new-acid-router" data-new-motion="card" aria-label="BossAI 路由演示">
           <div className="new-acid-router-top">
-            <span>Live mesh</span>
-            <strong>route: healthy</strong>
+            <span>Live model mesh</span>
+            <strong>routes: healthy</strong>
           </div>
           <div className="new-acid-router-core">
             <div>
@@ -156,10 +161,10 @@ export default function NewWebsiteExperiment() {
       </section>
 
       <section className="new-acid-final" data-new-motion="section">
-        <h2>同一个 BoosAPI 内核，另一种官网表达。</h2>
+        <h2>One gateway. Every frontier model.</h2>
         <div className="new-acid-actions">
           <Link className="new-acid-primary" href="/">
-            返回当前官网
+            当前官网
           </Link>
           <Link className="new-acid-secondary" href="/user/login">
             用户登录

website/app/page.tsx

@@ -44,9 +44,11 @@ const heroStats = [
 ];
 
 const routes = [
-  { type: "GPT", model: "gpt-5.5", state: "深度推理", tone: "hot", featured: true },
-  { type: "Image", model: "gpt-image-2", state: "图像生成", tone: "lime", featured: true },
-  { type: "Claude", model: "claude-opus-4-8", state: "Messages", tone: "claude" },
+  { type: "Sol", model: "gpt-5.6-sol", state: "旗舰推理", tone: "hot", featured: true },
+  { type: "Terra", model: "gpt-5.6-terra", state: "智能均衡", tone: "cyan" },
+  { type: "Luna", model: "gpt-5.6-luna", state: "高速低耗", tone: "blue" },
+  { type: "Claude", model: "claude-fable-5", state: "长程 Agent", tone: "claude", featured: true },
+  { type: "Image", model: "gpt-image-2", state: "图像生成", tone: "lime" },
   { type: "Gemini", model: "gemini-3-pro-preview", state: "多模态", tone: "cyan" },
   { type: "Video", model: "doubao-seedance-2-0-260128", state: "视频队列", tone: "blue" },
 ];
@@ -118,7 +120,7 @@ const creationPipeline = [
 const creationOutputs = [
   ["商品讲解视频", "digital-human", "完成"],
   ["封面主视觉", "gpt-image-2", "归档"],
-  ["短视频脚本", "gpt-5.5", "可复制"],
+  ["短视频脚本", "gpt-5.6-terra", "可复制"],
 ];
 
 const workflowModes = [
@@ -307,7 +309,7 @@ function HeroConsole() {
       <div className="console-orbit" data-motion-orbit />
       <div className="console-bar">
         <span>Model Router</span>
-        <strong>GPT-5.5 + Image 2 Ready</strong>
+        <strong>GPT-5.6 + Fable 5 Ready</strong>
       </div>
       <div className="exchange-chain" aria-label="BossAI 模型交换链路">
         {exchangeSteps.map((step, index) => (
@@ -393,14 +395,14 @@ export default function Home() {
           <div className="hero-copy" data-motion="hero-copy">
             <div className="section-kicker">
               <span className="pulse-dot" />
-              多模型 · 多模态 · 工作流
+              GPT-5.6 · Claude Fable 5 · 多模态
             </div>
             <h1>
               多模型多模态
               <span>AI 应用生产平台</span>
             </h1>
             <p>
-              BossAI 把 API 网关、智能路由、Comfy 工作流、数字人和短视频工厂收进一个清晰的运营后台，让团队用一套系统完成接入、生产、计费和交付。
+              BossAI 已适配 GPT-5.6 Sol、Terra、Luna 与 Claude Fable 5，并把 API 网关、智能路由、Comfy 工作流、数字人和短视频工厂收进一个清晰的运营后台。
             </p>
             <HeroSystemStrip />
             <div className="hero-actions">

website/design-contract.md

@@ -0,0 +1,49 @@
+# BossAI Public Website Reference Contract
+
+## Goal And Audience
+
+Target artifact: an experimental BossAI public website rendered only at `/new`.
+
+Audience: developers, AI application teams, and operators evaluating a unified model gateway, workflow system, and creation platform.
+
+Goal: use the immersive, system-like quality of `qu.ai` as a reference while preserving BossAI's own product story, logo, model data, and acid signal palette. The current `/` website remains in place for comparison.
+
+## Evidence
+
+| Evidence | Confidence | What it establishes |
+| --- | --- | --- |
+| User request to make the site like `https://qu.ai` only on the new route | provided | `/new` is the testing surface and must not replace `/`. |
+| Live desktop and mobile captures of `qu.ai` on 2026-07-11 | observed | Full-viewport 3D environment, sparse top navigation, technical HUD copy, dark scene, and scroll cue. |
+| Existing `website/app/new` implementation | observed | BossAI already has a full-bleed Three.js field, GSAP motion, acid palette, responsive route HUD, and product sections. |
+| Existing BossAI logo and GPT-5.6/Fable 5 model updates | observed | Brand assets and exact model IDs should remain BossAI-owned content. |
+
+## Reference Boundary
+
+| Keep | Change | Do not copy |
+| --- | --- | --- |
+| Full-screen immersive first viewport | Use BossAI acid lime, mint, magenta, and orange instead of Quai red | Quai logo, wordmark, red identity, and social assets |
+| Sparse navigation and HUD-style labels | Replace blockchain narrative with model routing and creative operations | Orbital scene, central Quai mark, people silhouettes, loading screen |
+| Environmental 3D motion and scroll continuation cue | Use exact BossAI API IDs and destinations | Exact navigation labels, button outlines, spacing, or scene composition |
+| Compact technical typography | Remove experimental language and make CTAs production-ready | Quai claims, copy, code fragments, and proprietary media |
+
+## Final Design Stance
+
+Build a full-bleed "model control plane" that feels active before the user scrolls: an acid-colored procedural field, a large frontier-model statement, and a compact live-routing HUD. The page should be cinematic but operational, with real model IDs and platform concepts grounding every visual choice. Later sections explain the gateway, workflow, studio, and archive loop without falling back to generic marketing cards.
+
+## Risks And Unknowns
+
+- Inferred: the existing BossAI logo remains the approved public identity; no separate brand package was provided.
+- The reference site's first scene is heavy WebGL; BossAI must retain its existing fallback for mobile, reduced motion, and constrained devices.
+- `/boos`, `/user/login`, and `/user/register` are deployment-integrated links and are not locally generated routes in the static website export.
+- Exact model availability is deployment-dependent; the website names the latest models requested by the user, while runtime routing remains backend-controlled.
+
+## Quality Gate
+
+- [ ] `/new` renders the immersive preview while `/` keeps its current page component.
+- [ ] No prototype or experimental wording remains visible.
+- [ ] BossAI brand and latest model IDs appear in the first viewport.
+- [ ] Desktop, tablet, and mobile layouts have no horizontal overflow or text overlap.
+- [ ] WebGL is full-bleed and nonblank on capable desktop browsers.
+- [ ] CSS fallback is nonblank on mobile and reduced-motion devices.
+- [ ] Primary links remain keyboard reachable and visually identifiable.
+- [ ] Production build and static export pass for both independent routes.

website/implementation-handoff.md

@@ -0,0 +1,29 @@
+# BossAI Website Implementation Handoff
+
+## Read First
+
+- `DESIGN.md`
+- `design-contract.md`
+- `app/new/page.tsx`
+- `app/new/AcidExperience.tsx`
+- `app/globals.css`
+
+## Binding Constraints
+
+- Limit the redesign to `/new`; do not import it from `/`, redirect `/`, or replace the current homepage component.
+- Preserve the existing BossAI logo, acid palette, Three.js field, GSAP motion, and CSS fallback.
+- First viewport must name BossAI and surface `gpt-5.6-sol`, `gpt-5.6-terra`, `gpt-5.6-luna`, and `claude-fable-5`.
+- Keep body copy concise and keep exact API IDs in monospace.
+- Do not copy Quai assets, red identity, scene, wording, or loading treatment.
+
+## Responsive Acceptance
+
+- 1440px: hero statement and routing HUD share one viewport without overlap.
+- 768px: hero stacks cleanly and keeps a visible start of the HUD.
+- 375px: no horizontal overflow; brand, CTA, statement, and continuation remain readable.
+- Capable desktop: WebGL canvas exists, fills the viewport, and has nonzero sampled pixels.
+- Mobile/fallback: the procedural CSS background remains visually complete without a canvas.
+
+## First Artifact Should Prove
+
+The `/new` preview feels like a live model system rather than a template, while remaining recognizably BossAI and making the latest model support immediately inspectable. The current `/` website remains unchanged in structure.