Tighten ultrawide layout with visible side gutters.

Cap content at 768-960px via PageShell width tiers, add muted outer margins, and limit gua grid to four columns.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/layout/mode-workspace.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Sparkles } from "lucide-react";
-import { MODE_CONTAINER } from "@/lib/layout";
 
 export function ModeWorkspace({
   children,
@@ -13,7 +12,7 @@ export function ModeWorkspace({
   aiTitle?: string;
 }) {
   return (
-    <div className={`${MODE_CONTAINER} py-6 lg:py-8`}>
+    <div className="py-6 lg:py-8">
       <div className="grid gap-6 lg:grid-cols-2 lg:items-stretch lg:gap-8 xl:gap-10">
         <div className="grid h-full min-h-0 auto-rows-fr gap-5 lg:min-h-[calc(100vh-9rem)]">
           {children}

components/layout/taiji-backdrop.tsx

@@ -1,15 +1,13 @@
 import { TaijiWatermark } from "@/components/svg/taiji";
 
-/** 全页太极背景水印（居中，不撑满超宽屏） */
+/** 全页太极背景水印 — 仅居中，不铺满超宽屏 */
 export default function TaijiBackdrop() {
   return (
     <div
       aria-hidden
       className="pointer-events-none fixed inset-0 -z-10 overflow-hidden"
     >
-      <TaijiWatermark className="absolute left-1/2 top-1/2 h-[min(72vmin,720px)] w-[min(72vmin,720px)] -translate-x-1/2 -translate-y-1/2" />
-      <TaijiWatermark className="absolute right-[8%] top-[10%] hidden h-[min(28vmin,320px)] w-[min(28vmin,320px)] opacity-60 lg:block" />
-      <TaijiWatermark className="absolute bottom-[8%] left-[8%] hidden h-[min(24vmin,280px)] w-[min(24vmin,280px)] opacity-50 lg:block" />
+      <TaijiWatermark className="absolute left-1/2 top-1/2 h-[min(65vmin,640px)] w-[min(65vmin,640px)] -translate-x-1/2 -translate-y-1/2 opacity-80" />
     </div>
   );
 }

components/learn/gua-grid.tsx

@@ -9,7 +9,7 @@ export interface GuaGridItem {
 
 export function GuaGrid({ items }: { items: GuaGridItem[] }) {
   return (
-    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
       {items.map(({ num, name, href }) => (
         <Link
           key={href}

components/page-shell.tsx

@@ -1,19 +1,34 @@
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 import TaijiBackdrop from "@/components/layout/taiji-backdrop";
+import {
+  CONTENT_SHELL,
+  type ContentShellWidth,
+} from "@/lib/layout";
+import { cn } from "@/lib/utils";
 
 export default function PageShell({
   children,
   className = "",
+  width = "default",
 }: {
   children: React.ReactNode;
   className?: string;
+  width?: ContentShellWidth;
 }) {
   return (
-    <div className="relative flex min-h-screen flex-col">
+    <div className="relative flex min-h-screen flex-col bg-muted/50 dark:bg-stone-950">
       <TaijiBackdrop />
       <Header />
-      <div className={`flex w-full flex-1 flex-col ${className}`}>{children}</div>
+      <main
+        className={cn(
+          "mx-auto flex w-full flex-1 flex-col border-border/40 bg-background sm:border-x",
+          CONTENT_SHELL[width],
+          className,
+        )}
+      >
+        {children}
+      </main>
       <Footer />
     </div>
   );