安静个人博客首页:7个区块的蓝图生成

By 表歌, 21 May, 2026
角色
assistant
content

```json{"summary":"```json\n{\n \"summary\": \"根据蓝图生成了安静的个人博客首页,共7个区块\",\n \"widget\": {\n \"type\": \"full-html\",\n \"html\": \"<!DOCTYPE html>\\n<html lang=\\\"zh-CN\\\">\\n<head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0, viewport-fit=cover\\\">\\n <title>林间笔记 · 安静的个人博客</title>\\n <link rel=\\\"preconnect\\\" href=\\\"https://fonts.googleapis.com\\\">\\n <link rel=\\\"preconnect\\\" href=\\\"https://fonts.gstatic.com\\\" crossorigin>\\n <link href=\\\"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,4…\\\" rel=\\\"stylesheet\\\">\\n <script src=\\\"https://cdn.tailwindcss.com\\\"></script>\\n <style>\\n /* ========== DESIGN TOKENS & CSS VARIABLES ========== */\\n :root {\\n --color-primary: #f0ece6;\\n --color-secondary: #a8a29e;\\n --color-accent: #d4a537;\\n --color-success: #4ade80;\\n --color-warning: #f59e0b;\\n --color-danger: #ef4444;\\n --color-info: #60a5fa;\\n --color-background: #0a0a0a;\\n --color-foreground: #f0ece6;\\n --color-card: #111110;\\n --color-border: #1c1c1a;\\n --color-muted: #6b6560;\\n --state-hover: #d4a537;\\n --state-active: #b8922e;\\n --state-focus: #d4a537;\\n --state-disabled: #3d3832;\\n --radius-sm: 4px;\\n --radius-md: 8px;\\n --radius-lg: 12px;\\n --radius-xl: 20px;\\n --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);\\n --shadow-md: 0 4px 16px rgba(0,0,0,0.4);\\n --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);\\n --shadow-xl: 0 24px 64px rgba(0,0,0,0.6);\\n --transition-fast: 180ms ease-out;\\n --transition-base: 300ms ease-out;\\n --transition-slow: 500ms cubic-bezier(0.4,0,0.2,1);\\n --container-max: 720px;\\n --touch-target: 44px;\\n }\\n\\n /* ========== FONT FAMILY BINDINGS ========== */\\n body {\\n font-family: 'Lora', Georgia, 'Times New Roman', serif;\\n background-color: var(--color-background);\\n color: var(--color-primary);\\n line-height: 1.75;\\n font-size: 1.05rem;\\n -webkit-font-smoothing: antialiased;\\n -moz-osx-font-smoothing: grayscale;\\n }\\n h1, h2, h3, h4, h5, h6, .font-heading {\\n font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;\\n }\\n .font-mono, code, pre {\\n font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;\\n }\\n\\n /* ========== TYPE SCALE (from designTokens.fonts.scale) ========== */\\n .text-display {\\n font-size: clamp(2.25rem, 4.5vw, 3.5rem);\\n font-weight: 600;\\n line-height: 1.15;\\n letter-spacing: -0.01em;\\n }\\n .text-h1 {\\n font-size: clamp(1.75rem, 3vw, 2.5rem);\\n font-weight: 600;\\n line-height: 1.2;\\n letter-spacing: -0.01em;\\n }\\n .text-h2 {\\n font-size: clamp(1.375rem, 2vw, 1.75rem);\\n font-weight: 500;\\n line-height: 1.3;\\n }\\n .text-h3 {\\n font-size: 1.25rem;\\n font-weight: 500;\\n line-height: 1.35;\\n }\\n .text-h4 {\\n font-size: 1.1rem;\\n font-weight: 500;\\n line-height: 1.4;\\n }\\n .text-body {\\n font-size: 1.05rem;\\n font-weight: 400;\\n line-height: 1.75;\\n }\\n .text-small {\\n font-size: 0.875rem;\\n font-weight: 400;\\n line-height: 1.6;\\n }\\n .text-caption {\\n font-size: 0.75rem;\\n font-weight: 400;\\n line-height: 1.5;\\n letter-spacing: 0.03em;\\n color: var(--color-muted);\\n }\\n .text-button {\\n font-size: 0.9rem;\\n font-weight: 500;\\n line-height: 1;\\n letter-spacing: 0.02em;\\n }\\n .text-overline {\\n font-size: 0.7rem;\\n font-weight: 600;\\n line-height: 1.3;\\n letter-spacing: 0.12em;\\n text-transform: uppercase;\\n color: var(--color-secondary);\\n }\\n\\n /* ========== LINK & GLOBAL STATES ========== */\\n a {\\n color: var(--color-primary);\\n text-decoration: none;\\n transition: color var(--transition-fast);\\n }\\n a:hover {\\n color: var(--color-accent);\\n }\\n a:focus-visible {\\n outline: 2px solid var(--color-accent);\\n outline-offset: 2px;\\n }\\n a:active {\\n color: var(--state-active);\\n }\\n\\n /* ========== BUTTON COMPONENTS (variants: primary, secondary, ghost) ========== */\\n .btn {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n min-height: var(--touch-target);\\n min-width: var(--touch-target);\\n padding: 0.625rem 1.5rem;\\n border-radius: var(--radius-md);\\n font-family: inherit;\\n font-weight: 500;\\n letter-spacing: 0.02em;\\n cursor: pointer;\\n transition: all var(--transition-fast);\\n outline: none;\\n text-decoration: none;\\n border: 1px solid transparent;\\n background: transparent;\\n color: var(--color-primary);\\n font-size: 0.9rem;\\n line-height: 1;\\n }\\n .btn:focus-visible {\\n outline: 2px solid var(--color-accent);\\n outline-offset: 2px;\\n }\\n .btn:disabled {\\n opacity: 0.35;\\n cursor: not-allowed;\\n pointer-events: none;\\n }\\n\\n .btn-primary {\\n background-color: var(--color-primary);\\n color: var(--color-background);\\n border: none;\\n }\\n .btn-primary:hover {\\n background-color: var(--color-accent);\\n color: var(--color-background);\\n }\\n .btn-primary:active {\\n background-color: var(--state-active);\\n color: var(--color-background);\\n }\\n .btn-primary:focus-visible {\\n outline: 2px solid var(--color-accent);\\n outline-offset: 2px;\\n }\\n .btn-primary:disabled {\\n opacity: 0.35;\\n cursor: not-allowed;\\n }\\n\\n .btn-secondary {\\n background: transparent;\\n color: var(--color-primary);\\n border: 1px solid var(--color-border);\\n }\\n .btn-secondary:hover {\\n background-color: var(--color-card);\\n border-color: var(--color-muted);\\n color: var(--color-accent);\\n }\\n .btn-secondary:active {\\n background-color: var(--color-card);\\n color: var(--color-accent);\\n }\\n .btn-secondary:focus-visible {\\n outline: 2px solid var(--color-accent);\\n outline-offset: 2px;\\n }\\n .btn-secondary:disabled {\\n opacity: 0.35;\\n cursor: not-allowed;\\n }\\n\\n .btn-ghost {\\n background: transparent;\\n color: var(--color-muted);\\n padding: 0.5rem 0.75rem;\\n border-radius: var(--radius-sm);\\n font-weight: 400;\\n border: none;\\n }\\n .btn-ghost:hover {\\n color: var(--color-accent);\\n }\\n .btn-ghost:active {\\n color: var(--state-active);\\n }\\n .btn-ghost:focus-visible {\\n outline: 2px solid var(--color-accent);\\n outline-offset: 2px;\\n }\\n .btn-ghost:disabled {\\n opacity: 0.35;\\n cursor: not-allowed;\\n }\\n\\n /* ========== CARD ========== */\\n .card {\\n background-color: var(--color-card);\\n border: 1px solid var(--color-border);\\n border-radius: var(--radius-lg);\\n padding: 1.5rem;\\n transition: border-color var(--transition-base);\\n }\\n .card:hover {\\n border-color: var(--color-muted);\\n }\\n\\n /* ========== INPUT ========== */\\n .input-custom {\\n width: 100%;\\n min-height: var(--touch-target);\\n background-color: var(--color-card);\\n color: var(--color-foreground);\\n border: 1px solid var(--color-border);\\n border-radius: var(--radius-md);\\n padding: 0.625rem 0.875rem;\\n font-family: inherit;\\n font-size: 1rem;\\n transition: border-color var(--transition-fast), box-shadow var(--transition-fast);\\n outline: none;\\n }\\n .input-custom::placeholder {\\n color: var(--color-muted);\\n }\\n .input-custom:hover {\\n border-color: var(--color-muted);\\n }\\n .input-custom:focus {\\n border-color: var(--color-accent);\\n box-shadow: 0 0 0 3px rgba(212, 165, 55, 0.15","plan":{"planId":"8b3f1e6d-7c42-4a9f-9d15-a2e8c7b5f301","goal":"安静的个人博客首页,让读者 3 秒内感受到沉静与信任","audience":"追求深度阅读的技术与人文交叉领域读者,厌倦喧嚣社交媒体的知识工作者","tone":"editorial-dark-minimal","type":"fullHTML","designTokens":{"style":{"name":"editorial-dark-minimal","mood":"calm","keywords":["editorial","warm-minimal","literary","dark","refined"],"density":"airy","philosophy":"黑白为骨,金为魂;每个像素都有呼吸权,空白不是浪费而是节奏"},"colors":{"primary":"#f0ece6","secondary":"#a8a29e","accent":"#d4a537","success":"#4ade80","warning":"#f59e0b","danger":"#ef4444","info":"#60a5fa","background":"#0a0a0a","foreground":"#f0ece6","card":"#111110","border":"#1c1c1a","muted":"#6b6560"},"cssVarPrefix":"--color-","colorRoles":{"primary":{"name":"Warm Parchment","role":"正文与主标题,柔和暖白降低阅读疲劳"},"accent":{"name":"Antique Gold","role":"唯一暖色点缀:链接悬停、选中态、微交互高亮"}},"gradients":[{"name":"hero-warm-glow","stops":"radial-gradient(ellipse 60% 80% at 50% 0%, rgba(212,165,55,0.06) 0%, transparent 70%)","role":"hero 顶部极微弱暖光,增加深度而不过度"}],"states":{"hover":"#d4a537","active":"#b8922e","focus":"#d4a537","disabled":"#3d3832"},"fonts":{"heading":"Playfair Display","body":"Lora","mono":"JetBrains Mono","display":"Playfair Display","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,4…;:{"heading":"'Playfair Display', Georgia, 'Times New Roman', serif","body":"'Lora', 'Georgia', 'Times New Roman', serif","mono":"'JetBrains Mono', 'SF Mono', 'Consolas', monospace"},"scale":{"display":{"size":"clamp(2.25rem, 4.5vw, 3.5rem)","weight":600,"lineHeight":"1.15","letterSpacing":"-0.01em"},"h1":{"size":"clamp(1.75rem, 3vw, 2.5rem)","weight":600,"lineHeight":"1.2","letterSpacing":"-0.01em"},"h2":{"size":"clamp(1.375rem, 2vw, 1.75rem)","weight":500,"lineHeight":"1.3"},"h3":{"size":"1.25rem","weight":500,"lineHeight":"1.35"},"h4":{"size":"1.1rem","weight":500,"lineHeight":"1.4"},"body":{"size":"1.05rem","weight":400,"lineHeight":"1.75"},"small":{"size":"0.875rem","weight":400,"lineHeight":"1.6"},"caption":{"size":"0.75rem","weight":400,"lineHeight":"1.5","letterSpacing":"0.03em"},"button":{"size":"0.9rem","weight":500,"lineHeight":"1","letterSpacing":"0.02em"},"overline":{"size":"0.7rem","weight":600,"lineHeight":"1.3","letterSpacing":"0.12em"}},"lineHeight":{"tight":"1.15","base":"1.75","loose":"1.9"},"weight":{"regular":400,"medium":500,"semibold":600,"bold":700}},"components":{"button":{"default":"bg=transparent fg=primary border=1px solid muted padding=0.625rem 1.5rem radius=md weight=500","hover":"bg=accent fg=background border=1px solid accent","active":"bg=accent(-8%) fg=background","disabled":"opacity=0.35 cursor=not-allowed","focus":"ring=2px solid accent offset=2px outline=none","variants":{"primary":{"default":"bg=primary fg=background padding=0.625rem 1.5rem radius=md weight=500 border=none","hover":"bg=accent fg=background","active":"bg=accent(-8%) fg=background","focus":"ring=2px solid accent offset=2px outline=none","disabled":"opacity=0.35 cursor=not-allowed"},"secondary":{"default":"bg=transparent fg=primary border=1px solid border padding=0.625rem 1.5rem radius=md weight=500","hover":"bg=card border=1px solid muted fg=accent","active":"bg=card fg=accent","focus":"ring=2px solid accent offset=2px outline=none","disabled":"opacity=0.35 cursor=not-allowed"},"ghost":{"default":"bg=transparent fg=muted padding=0.5rem 0.75rem radius=sm weight=400","hover":"fg=accent","active":"fg=accent(-8%)","focus":"ring=2px solid accent offset=2px outline=none","disabled":"opacity=0.35 cursor=not-allowed"}}},"card":{"default":"bg=card border=1px solid border radius=lg padding=1.5rem","hover":"border=1px solid muted"},"nav":{"default":"bg=background/90 backdrop-blur=16px height=3.5rem border-bottom=1px solid border","scrolled":"bg=background shadow=sm","mobile":"drawer-from-right width=85vw bg=background"},"input":{"default":"bg=card fg=foreground border=1px solid border radius=md padding=0.625rem 0.875rem","hover":"border=1px solid muted","focus":"border=1px solid accent ring=3px solid rgba(212,165,55,0.15)","error":"border=1px solid danger ring=3px solid rgba(239,68,68,0.15)","disabled":"opacity=0.4 cursor=not-allowed"}},"layout":{"container":{"maxWidth":"720px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"2rem"}},"spacing":{"gutter":"2rem","sectionY":"7rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.5rem","2rem","3rem","4rem","6rem","8rem"],"tokens":[0,4,8,12,16,24,32,48,64,96,128]},"shadow":{"sm":"0 1px 2px rgba(0,0,0,0.3)","md":"0 4px 16px rgba(0,0,0,0.4)","lg":"0 12px 40px rgba(0,0,0,0.5)","xl":"0 24px 64px rgba(0,0,0,0.6)"},"surfaces":{"base":"bg=background shadow=none","raised":"bg=card shadow=none border=1px solid border radius=lg","overlay":"bg=card shadow=md border=1px solid border radius=lg","modal":"bg=card shadow=lg border=1px solid border radius=xl"},"elevation":{"base":"none","raised":"none","overlay":"md","modal":"lg"},"breakpoints":{"sm":"640px","md":"768px","lg":"1024px","xl":"1280px","2xl":"1536px"},"touchTarget":{"min":"44px"},"responsive":{"collapseStrategy":"single-col all sections; nav links → hamburger drawer below 640px; post grid → stacked list; featured-post image → hidden below 640px; about section → single column","hidePriority":["featured-post-image","nav-secondary-links","footer-extra-links"]},"radius":{"sm":"4px","md":"8px","lg":"12px","xl":"20px","full":"9999px"},"transition":{"fast":"180ms ease-out","base":"300ms ease-out","slow":"500ms cubic-bezier(0.4,0,0.2,1)"}},"sections":[{"id":"nav","type":"nav-sticky","purpose":"极简顶栏:品牌名 + 两个链接,无任何视觉噪音","elements":{"brand":true,"nav_links":2,"divider_bottom":true},"copy":{"brand":"林间笔记","link_1":"文章","link_2":"关于"},"interactions":["smooth-scroll-to-#posts","smooth-scroll-to-#about","mobile-menu-toggle"],"notes":"无 logo 图标,纯文字品牌名用 Playfair Display italic;悬停时链接文字变为 accent 金"},{"id":"hero","type":"hero-centered","purpose":"博主身份 + 一句话定位,制造沉静的第一印象","elements":{"title":true,"subtitle":true,"body_intro":true,"visual_hint":"hero-warm-glow 径向渐变叠加"},"copy":{"title":"在代码与文字之间,寻找安静的表达","subtitle":"林间笔记","body":"写技术架构,也写读过的书和偶尔的疲惫。这里没有阅读量、没有点赞数、没有评论区——只有值得被慢读的文字。"},"interactions":["scroll-reveal"],"notes":"标题用 display 字阶 Playfair Display;subtitle 用 overline 字阶作标签感;body 用 Lora italic 增加手记温度;hero 区域 sectionY 上padding更大(约 10rem 顶部),让读者一进入就感受到呼吸"},{"id":"featured-post","type":"showcase-gallery","purpose":"一篇置顶精选文章,引导读者开始深度阅读","elements":{"featured_badge":true,"post_title":true,"post_excerpt":true,"post_meta":true,"read_more_link":true,"visual_hint":"左侧细金线装饰条"},"copy":{"badge":"精选","post_title":"从零搭建这个博客的技术选型与思考","post_excerpt":"没有用 Next.js,没有用 Gatsby,甚至没有数据库。一篇关于如何用最少的依赖、最慢的速度,搭建一个只为写作而存在的空间的记录。","post_date":"2025 年 12 月","post_category":"技术","read_more":"阅读全文 →"},"interactions":["scroll-reveal"],"notes":"左侧 2px 金线装饰,卡片背景比 body 略亮(card 色),悬停时金线亮度微增;此区与下方 posts-list 之间用一条极细 border 分隔线"},{"id":"posts","type":"blog-list","purpose":"按时间倒序展示近期文章,保持信息密度低、每篇之间留白充足","elements":{"section_title":true,"post_cards":4,"post_title":true,"post_excerpt":true,"post_date":true,"post_category":true,"read_more":true},"copy":{"section_title":"近期文章","post_1_title":"为什么我放弃了完美主义","post_1_excerpt":"改了一百遍的草稿从未发布,而那个随手写的笔记被转发了上千次。关于创作,完美是最大的敌人。","post_1_date":"2025 年 11 月 28 日","post_1_category":"随笔","post_2_title":"远程工作两年后的真实体会","post_2_excerpt":"自由不是躺在床上写代码。孤独、自律崩塌、时区地狱——以及为什么我仍然选择这种方式。","post_2_date":"2025 年 10 月 15 日","post_2_category":"生活","post_3_title":"读《深度工作》:注意力是我们最后的稀缺资源","post_3_excerpt":"Cal Newport 十年前就警告过我们。重读这本书,在 2025 年的碎片化世界里显得尤为刺痛。","post_3_date":"2025 年 9 月 3 日","post_3_category":"阅读","post_4_title":"给年轻开发者的唯一建议:多写,少刷","post_4_excerpt":"如果你每天花两小时在 Twitter 和 Reddit 上看别人讨论技术,而不是自己动手——你已经输了。","post_4_date":"2025 年 8 月 12 日","post_4_category":"技术"},"interactions":["scroll-reveal"],"notes":"每篇文章之间用 1px border 分隔,悬停时日期文字变为 accent 色;分类标签用 overline 字阶,极小而有力的存在感"},{"id":"about","type":"cta-split","purpose":"简短博主介绍,建立人与人之间的信任感","elements":{"section_title":true,"avatar_hint":true,"bio_text":true,"social_links":3},"copy":{"section_title":"关于作者","bio":"一名全栈开发者,热爱文字与设计。白天写 TypeScript 和 Rust,深夜读小说和哲学。这个博客是我对抗算法推荐的最后据点——没有 SEO 优化,没有热点蹭流,只有我真正想写的东西。","social_1_label":"GitHub","social_2_label":"Twitter / X","social_3_label":"RSS 订阅"},"interactions":["scroll-reveal"],"notes":"bio 用 Lora 正文,行高 1.9 制造舒适的阅读节奏;社交链接用 ghost 按钮变体,悬停变金色"},{"id":"newsletter","type":"cta-card","purpose":"低打扰的邮件订阅,给想持续关注的读者一个安静的选择","elements":{"section_title":true,"description":true,"email_input":true,"submit_button":true,"privacy_note":true},"copy":{"section_title":"不定期更新","description":"没有 newsletter 轰炸。大概每个月一封,告诉你我写了什么新东西。可以随时退订,我不会知道。","input_placeholder":"你的邮箱地址","submit_label":"订阅","privacy_note":"不做任何追踪,不会出售你的邮箱。"},"interactions":["scroll-reveal"],"notes":"卡片用 card 表面,1px border;输入框 focus 时边框变 accent 金,ring 微光;提交按钮用 primary 变体"},{"id":"footer","type":"footer-minimal","purpose":"极简页脚,只有版权和一句告别","elements":{"copyright":true,"back_to_top":true,"divider_top":true},"copy":{"copyright":"© 2025 林间笔记","tagline":"安静地写,慢慢地读。","back_to_top":"↑ 回到顶部"},"interactions":["smooth-scroll-to-#hero"],"notes":"用 caption 字阶,muted 色;底部留白充裕,与上方 section 保持 7rem 间距"}],"rules":{"dos":["每个区块之间保持至少 7rem 垂直间距,让页面可「逐屏呼吸」","正文用 Lora 1.75 行高,长段落不压缩——宁可多滚动也不牺牲可读性","唯一暖色 accent gold (#d4a537) 仅用于交互态和极少量装饰,不铺张","卡片悬停仅改变 border 颜色至 muted,不做 transform 位移或 shadow 膨胀","链接悬停统一过渡到 accent 色,transition 180ms ease-out"],"donts":["不要使用任何紫色渐变、蓝紫渐变或常见的 AI 生成式 Hero 配色","不要居中三列 feature 卡片——这不是 SaaS 落地页,是个人博客","不要出现任何 Emoji 图标,用纯文字和留白替代视觉符号","不要使用 box-shadow 作为卡片主要视觉层次,暗色背景下 border 比 shadow 更干净","不要在移动端缩小字号补偿——保持 body 1.05rem 不变,让内容自然换行"]},"promptGuide":{"quickRef":"near-black canvas #0a0a0a + warm parchment text #f0ece6 + single antique gold accent #d4a537 + Playfair Display headings + Lora body at 1.75 line-height + 720px max reading width","examples":["用林间笔记风格做一个文章详情页","给这个博客加一个归档页面,按年份分组","用同样的设计语言做一个「现在在读」书架组件","复制这个风格做个摄影作品集的首页"]}},"planReviews":[{"round":1,"ok":true}],"planId":"8b3f1e6d-7c42-4a9f-9d15-a2e8c7b5f301"}```

total_tokens
15776
summary
```json
{
"summary": "根据蓝图生成了安静的个人博客首页,共7个区块",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\">\n <title>林间笔记 · 安静的个人博客</title>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n /* ========== DESIGN TOKENS & CSS VARIABLES ========== */\n :root {\n --color-primary: #f0ece6;\n --color-secondary: #a8a29e;\n --color-accent: #d4a537;\n --color-success: #4ade80;\n --color-warning: #f59e0b;\n --color-danger: #ef4444;\n --color-info: #60a5fa;\n --color-background: #0a0a0a;\n --color-foreground: #f0ece6;\n --color-card: #111110;\n --color-border: #1c1c1a;\n --color-muted: #6b6560;\n --state-hover: #d4a537;\n --state-active: #b8922e;\n --state-focus: #d4a537;\n --state-disabled: #3d3832;\n --radius-sm: 4px;\n --radius-md: 8px;\n --radius-lg: 12px;\n --radius-xl: 20px;\n --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);\n --shadow-md: 0 4px 16px rgba(0,0,0,0.4);\n --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);\n --shadow-xl: 0 24px 64px rgba(0,0,0,0.6);\n --transition-fast: 180ms ease-out;\n --transition-base: 300ms ease-out;\n --transition-slow: 500ms cubic-bezier(0.4,0,0.2,1);\n --container-max: 720px;\n --touch-target: 44px;\n }\n\n /* ========== FONT FAMILY BINDINGS ========== */\n body {\n font-family: 'Lora', Georgia, 'Times New Roman', serif;\n background-color: var(--color-background);\n color: var(--color-primary);\n line-height: 1.75;\n font-size: 1.05rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n h1, h2, h3, h4, h5, h6, .font-heading {\n font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;\n }\n .font-mono, code, pre {\n font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;\n }\n\n /* ========== TYPE SCALE (from d
uiParsing
关闭