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>

lib/layout.ts

@@ -1,10 +1,22 @@
-const CENTER = "mx-auto w-full px-4 sm:px-6 lg:px-8";
+const pad = "px-4 sm:px-6 lg:px-8";
 
-/** 页眉 / 页脚 / 学习 / 测算页标题 — 居中留白，最大约 1152px */
-export const APP_CONTAINER = `${CENTER} max-w-6xl`;
+/** 内容区宽度档位（带鱼屏居中，两侧留空） */
+export const CONTENT_SHELL = {
+  /** 常规页：约 896px */
+  default: `w-full max-w-4xl ${pad}`,
+  /** 首页、文章：约 768px */
+  narrow: `w-full max-w-3xl ${pad}`,
+  /** 双栏测算：约 960px */
+  wide: `w-full max-w-[960px] ${pad}`,
+} as const;
 
-/** 首页单列 — 更窄一些 */
-export const HOME_CONTAINER = `${CENTER} max-w-4xl`;
+export type ContentShellWidth = keyof typeof CONTENT_SHELL;
 
-/** 双栏测算工作区 — 与全站同宽，避免带鱼屏拉满 */
-export const MODE_CONTAINER = `${CENTER} max-w-6xl xl:px-10`;
+/** 页眉 / 页脚 — 与最宽内容区对齐 */
+export const APP_CONTAINER = `mx-auto ${CONTENT_SHELL.wide}`;
+
+/** @deprecated 使用 PageShell width="narrow" */
+export const HOME_CONTAINER = `mx-auto ${CONTENT_SHELL.narrow}`;
+
+/** 双栏测算工作区 */
+export const MODE_CONTAINER = `mx-auto ${CONTENT_SHELL.wide}`;