/* ============================================== 相对 V3.0 全局设计系统 CSS 适配：浅色 / 深色双主题 | 移动端 H5 基调：禅意极简、留白、玻璃拟态、柔和动效 基于豆包最终修正版技术规范编写 引入方式：在 design-tokens.css 之后引入本文件 （本文件仅补充 V3 新增变量与组件类，不修改 design-tokens.css） ============================================== */ /* 基础全局变量 - 浅色模式（默认） */ :root { /* ---------- 色彩系统 ---------- */ --color-bg-page: #FBF9F4; --color-nav-bg: var(--color-bg-page); --color-brand: var(--color-brand, #C4916C); /* CBH-128：跟随禅意大地（原余白梅红 #C56473） */ --color-brand-active: #A56E48; /* CBH-128：派生深大地（原 #C86A3C） */ --color-text-title: #5C4B3A; --color-text-body: #8B7355; --color-text-aux: #A89888; --color-border-line: rgba(139, 115, 85, 0.2); /* 图谱节点专用色（按卡片类型区分） */ --color-node-insight: var(--color-primary, #C4916C); /* CBH-128：领悟卡跟随主色 */ --color-node-action: #7396C8; /* 行动卡 - 辅助蓝 */ --color-node-doc: #73B894; /* 文献卡 - 辅助绿 */ --color-node-flash: #B8B8B8; /* 闪念卡 - 浅灰 */ /* 卡片玻璃拟态 */ --color-card-bg: rgba(255, 255, 255, 0.65); /* ---------- 尺寸 & 圆角 ---------- */ --radius-card: 20px; --radius-btn-primary: 24px; --radius-btn-second: 22px; --radius-bubble: 20px; --height-top-nav: 48px; --height-top-nav-collapsed: 38px; --height-bottom-nav: 56px; --transition-nav: 0.3s ease-in-out; --icon-size-normal: 22px; --icon-size-small: 18px; /* ---------- 内边距 / 外边距 间距系统 ---------- */ --padding-card: 20px 24px; --gap-module: 32px; --gap-component: 16px; --gap-mini: 12px; /* ---------- 阴影 ---------- */ --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.03); --shadow-fab: 0 6px 16px rgba(197, 100, 115, 0.35); /* ---------- 字体 ---------- */ --font-stack: system-ui, PingFang SC, Microsoft YaHei, sans-serif; --font-base: 14px; --font-title-lg: 22px; --font-title-md: 16px; --font-text-sm: 10px; --line-height-base: 1.5; /* ---------- 动效 ---------- */ --transition-base: 0.3s ease-in-out; --anim-breath-duration: 2.5s; } /* CB-108-3：默认浅色令牌（auto + 系统浅色 / 无 data-theme 时生效）。 放在 @media 深色块之前，确保「跟随系统」浅色模式下 --color-card-bg / --zen-glass-bg-strong 等 V3 变量有定义，避免我的页面等卡片在 auto+浅色下背景透明（var 无回退值）。 */ :root { --color-bg-page: #FBF9F4; --color-brand: var(--color-brand, #C4916C); /* CBH-128：跟随禅意大地（原余白梅红 #C56473） */ --color-brand-active: #A56E48; /* CBH-128：派生深大地（原 #C86A3C） */ --color-text-title: #5C4B3A; --color-text-body: #8B7355; --color-text-aux: #A89888; --color-border-line: rgba(139, 115, 85, 0.2); --color-node-insight: var(--color-primary, #C4916C); /* CBH-128：领悟卡跟随主色 */ --color-node-action: #7396C8; --color-node-doc: #73B894; --color-node-flash: #B8B8B8; --color-card-bg: rgba(255, 255, 255, 0.65); --zen-glass-bg-strong: rgba(255, 255, 255, 0.78); --glass-border: rgba(255, 255, 255, 0.9); --glass-depth: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255,255,255,0.15); } /* 深色模式自动适配（守卫：手动浅色时不触发，避免系统深色覆盖手动浅色偏好） */ :root[data-theme="dark"]{color-scheme: dark; --color-bg-page: #1A1816; --color-brand: #E8D2C2; /* CBH-128：大地浅版（原会员浅梅红 #D98A98） */ --color-brand-active: #A56E48; /* CBH-128：派生深大地 */ --color-text-title: #E2D4C2; --color-text-body: #C9B9A3; --color-text-aux: #8A7A68; --color-border-line: rgba(201, 185, 163, 0.2); /* 图谱节点色深浅统一，不做变更 */ --color-node-insight: var(--color-primary, #C4916C); /* CBH-128：领悟卡跟随主色 */ --color-node-action: #7396C8; --color-node-doc: #73B894; --color-node-flash: #B8B8B8; --color-card-bg: rgba(40, 36, 32, 0.65); --zen-glass-bg-strong: rgba(40, 38, 35, 0.72); --glass-border: rgba(255, 255, 255, 0.08); } /* ============================================== CB-107-4：全站手动主题（data-theme 覆盖系统偏好） - 由各页 早期读取 localStorage['zx_theme'] 写入 - light/dark 强制、auto（无属性）跟随系统 prefers-color-scheme - 选择器带属性，特异性高于 @media 内 :root，可强制覆盖系统深色 注意：仅新增覆盖层，未修改 design-tokens.css（遵守 Phase-1 硬约束） ============================================== */ :root[data-theme="dark"] { --color-bg-page: #1A1816; --color-brand: #E8D2C2; /* CBH-128：大地浅版（原会员浅梅红 #D98A98） */ --color-brand-active: #A56E48; /* CBH-128：派生深大地 */ --color-text-title: #E2D4C2; --color-text-body: #C9B9A3; --color-text-aux: #8A7A68; --color-border-line: rgba(201, 185, 163, 0.2); --color-node-insight: var(--color-primary, #C4916C); /* CBH-128：领悟卡跟随主色 */ --color-node-action: #7396C8; --color-node-doc: #73B894; --color-node-flash: #B8B8B8; --color-card-bg: rgba(40, 36, 32, 0.65); --zen-glass-bg-strong: rgba(40, 38, 35, 0.72); --glass-border: rgba(255, 255, 255, 0.08); --glass-depth: 0 4px 16px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255,255,255,0.08); } :root[data-theme="light"] { --color-bg-page: #FBF9F4; --color-brand: var(--color-brand, #C4916C); /* CBH-128：跟随禅意大地（原余白梅红 #C56473） */ --color-brand-active: #A56E48; /* CBH-128：派生深大地（原 #C86A3C） */ --color-text-title: #5C4B3A; --color-text-body: #8B7355; --color-text-aux: #A89888; --color-border-line: rgba(139, 115, 85, 0.2); --color-node-insight: var(--color-primary, #C4916C); /* CBH-128：领悟卡跟随主色 */ --color-node-action: #7396C8; --color-node-doc: #73B894; --color-node-flash: #B8B8B8; --color-card-bg: rgba(255, 255, 255, 0.65); --glass-depth: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255,255,255,0.15); } /* 吸顶栏 / 返回顶部：手动主题下同步（避免系统浅色但手动深色时露出浅底条） */ :root[data-theme="dark"] .tag-bar--stuck { background-color: rgba(26, 24, 22, 0.85); } :root[data-theme="dark"] .tag-bar--stuck::after { background: linear-gradient(to left, rgba(26, 24, 22, 0.85), transparent); } :root[data-theme="dark"] .back-to-top { background-color: rgba(242, 153, 102, 0.85); } :root[data-theme="light"] .tag-bar--stuck { background-color: rgba(251, 249, 244, 0.85); } :root[data-theme="light"] .tag-bar--stuck::after { background: linear-gradient(to left, rgba(251, 249, 244, 0.85), transparent); } /* ============================================== 全局基础样式重置 ============================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-y: scroll; } body { font-family: var(--font-stack); font-size: var(--font-base); line-height: var(--line-height-base); background-color: var(--color-bg-page); color: var(--color-text-body); transition: background-color var(--transition-base), color var(--transition-base); -webkit-font-smoothing: antialiased; } ul, li { list-style: none; } button { border: none; background: none; font-family: inherit; cursor: pointer; transition: var(--transition-base); } /* ============================================== 通用卡片容器（全站所有卡片基类） ============================================== */ .card { background-color: var(--color-card-bg); border-radius: var(--radius-card); border: 1px solid var(--color-border-line); box-shadow: var(--shadow-card); padding: var(--padding-card); transition: var(--transition-base); } .card:hover { opacity: 0.95; } /* ============================================== 按钮组件组：主按钮 / 次按钮 / 文字按钮 ============================================== */ /* 主按钮 */ .btn-primary { height: 48px; border-radius: var(--radius-btn-primary); background-color: var(--color-brand); color: #ffffff; font-size: var(--font-title-md); text-align: center; padding: 0 24px; } .btn-primary:active { background-color: var(--color-brand-active); transform: scale(0.98); } .btn-primary:disabled { opacity: 0.5; pointer-events: none; transform: none; } /* 次按钮 */ .btn-second { height: 44px; border-radius: var(--radius-btn-second); border: 1px solid var(--color-border-line); color: var(--color-brand); padding: 0 20px; } .btn-second:active { transform: scale(0.98); } /* 文字按钮 */ .btn-text { color: var(--color-brand); font-size: var(--font-base); } .btn-text:active { opacity: 0.7; } /* ============================================== 底部导航栏（对外名称：发现 / 笔记 / 对话 / 社区 / 我的） 注意：本项目底部导航由 global-bottom-nav.css 提供完整样式， 此处仅保留 V3 设计变量与「中间凸起对话主按钮」备用类。 ============================================== */ .bottom-nav__main-btn { width: 48px; height: 48px; border-radius: 50%; background-color: var(--color-brand); color: #fff; transform: translateY(-8px); display: flex; align-items: center; justify-content: center; animation: breath var(--anim-breath-duration) ease-in-out infinite; } @keyframes breath { 0%, 100% { transform: translateY(-8px) scale(1); } 50% { transform: translateY(-8px) scale(1.05); } } /* ============================================== 标签栏（胶囊可滑动标签：发现页 / 知图页 / 社区页通用） ============================================== */ .tag-bar { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px; position: relative; } .tag-bar::-webkit-scrollbar { display: none; } .tag-item { flex-shrink: 0; padding: 6px 16px; border-radius: 999px; background-color: var(--color-card-bg); border: 1px solid var(--color-border-line); font-size: var(--font-base); color: var(--color-text-body); white-space: nowrap; } .tag-item.active { color: var(--color-brand); background-color: rgba(197, 100, 115, 0.08); } /* 滑动渐变遮罩 */ .tag-bar::after { content: ""; position: absolute; right: 0; top: 0; width: 40px; height: 100%; background: linear-gradient(to left, var(--color-bg-page), transparent); pointer-events: none; } /* ============================================== 对话页 - 上下文状态栏 ============================================== */ .chat-context-bar { margin: 8px 16px; padding: 8px 16px; border-radius: var(--radius-card); background-color: var(--color-card-bg); border: 1px solid var(--color-border-line); display: flex; align-items: center; gap: 8px; font-size: var(--font-base); color: var(--color-text-title); } /* ============================================== 对话气泡（AI / 用户 区分样式） ============================================== */ .chat-bubble-wrap { padding: 0 16px; display: flex; flex-direction: column; gap: var(--gap-component); } /* AI 气泡 - 左侧 */ .bubble-ai { align-self: flex-start; max-width: 80%; padding: 12px 16px; border-radius: var(--radius-bubble); background-color: var(--color-card-bg); border: 1px solid var(--color-border-line); color: var(--color-text-body); } /* 用户气泡 - 右侧 */ .bubble-user { align-self: flex-end; max-width: 80%; padding: 12px 16px; border-radius: var(--radius-bubble); background-color: #ffffff; border: 1px solid var(--color-brand); color: var(--color-text-title); } /* ============================================== 知图页 - 关系图谱节点（按类型分色，修正后规则） 唯一默认视图：图谱视图 ============================================== */ .graph-node { border-radius: 50%; transition: var(--transition-base); } /* 节点尺寸分级（按关联权重：核心/二级/三级） */ .graph-node--lg { width: 28px; height: 28px; } .graph-node--md { width: 22px; height: 22px; } .graph-node--sm { width: 16px; height: 16px; } /* 领悟卡节点 */ .graph-node.insight { background-color: var(--color-node-insight); } /* 行动卡节点 */ .graph-node.action { background-color: var(--color-node-action); } /* 文献卡节点 */ .graph-node.doc { background-color: var(--color-node-doc); } /* 闪念卡节点 */ .graph-node.flash { background-color: var(--color-node-flash); } /* 节点选中高亮（修正案：scale1.1 + 品牌橙填充 + 关联高亮 + 非关联弱化50%） */ .graph-node.active { transform: scale(1.1); background-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(197, 100, 115, 0.25); z-index: 5; } /* 关联节点高亮 */ .graph-node.related { opacity: 1; } /* 非关联节点弱化 */ .graph-node.dim { opacity: 0.5; } /* 图谱连线 */ .graph-line { stroke-width: 1px; stroke: var(--color-border-line); transition: stroke-opacity var(--transition-base); } /* 连线强度（修正案：强0.6 / 中0.4 / 弱0.2） */ .graph-line.strong { stroke-opacity: 0.6; } .graph-line.medium { stroke-opacity: 0.4; } .graph-line.weak { stroke-opacity: 0.2; } /* ============================================== 社区页 - 帖子卡片（取消Tab，统一标签流） ============================================== */ .post-card { margin: 0 16px; margin-bottom: var(--gap-component); } .post-card__tag { display: inline-block; font-size: 12px; color: var(--color-brand); margin-bottom: 8px; } .post-card__header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .post-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; } /* ============================================== 网格卡片（CSS Grid：移动2列 / 桌面3列） ============================================== */ .grid-card { background-color: var(--color-card-bg); border-radius: var(--radius-card); border: 1px solid var(--color-border-line); box-shadow: var(--shadow-card); padding: var(--padding-card); transition: var(--transition-base); } .grid-card:hover { opacity: 0.95; } .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-component); padding: 0 16px; } @media (min-width: 768px) { .grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================== 骨架屏（浅灰渐变 + 呼吸动画） ============================================== */ .skeleton { background: linear-gradient(90deg, rgba(139, 115, 85, 0.06) 25%, rgba(139, 115, 85, 0.12) 37%, rgba(139, 115, 85, 0.06) 63%); background-size: 400% 100%; border-radius: var(--radius-card); animation: skeletonBreath 1.4s ease-in-out infinite; } @keyframes skeletonBreath { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ============================================== 确认清单（卡片列表 + checkbox 动画） ============================================== */ .confirm-checklist { display: flex; flex-direction: column; gap: var(--gap-mini); } .confirm-checklist__item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-card); background-color: var(--color-card-bg); border: 1px solid var(--color-border-line); font-size: var(--font-base); color: var(--color-text-body); transition: var(--transition-base); } .confirm-checklist__item.checked { border-color: var(--color-brand); color: var(--color-text-title); } .confirm-checklist__box { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--color-border-line); flex-shrink: 0; position: relative; transition: var(--transition-base); } .confirm-checklist__item.checked .confirm-checklist__box { background-color: var(--color-brand); border-color: var(--color-brand); } .confirm-checklist__item.checked .confirm-checklist__box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ============================================== 发布按钮（右下浮动 FAB） ============================================== */ .fab-btn { position: fixed; right: 16px; bottom: calc(var(--height-bottom-nav) + 16px); width: 56px; height: 56px; border-radius: 50%; background-color: var(--color-brand); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-fab); z-index: 50; transition: var(--transition-base); } .fab-btn:active { transform: scale(0.95); background-color: var(--color-brand-active); } /* ============================================== 图谱容器（全屏 Canvas + 微风浮动动画） ============================================== */ .graph-canvas { position: fixed; inset: 0; width: 100%; height: 100%; animation: graphBreeze var(--anim-breath-duration) ease-in-out infinite; } @keyframes graphBreeze { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* ============================================== 弹窗遮罩（固定全屏半透明） ============================================== */ .modal-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 990; opacity: 0; transition: opacity var(--transition-base); } .modal-overlay.show { opacity: 1; } /* ============================================== 节点详情弹窗（底部滑入面板 + 最高 80vh） ============================================== */ /* ── CB-049-3 笔记页节点弹窗：实体面板 + 蒙层 + 右上角X + 避开底部导航 ── */ .node-detail-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 990; opacity: 0; pointer-events: none; transition: opacity var(--transition-base); } .node-detail-mask.show { opacity: 1; pointer-events: auto; } .node-detail-panel { position: fixed; left: 0; right: 0; bottom: calc(var(--height-bottom-nav, 56px) + env(safe-area-inset-bottom, 0px)); max-height: 80vh; background-color: var(--color-card-bg); border-radius: var(--radius-card) var(--radius-card) 0 0; border-top: 1px solid var(--color-border-line); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08); padding: var(--padding-card); z-index: 991; transform: translateY(120%); transition: transform var(--transition-base); overflow-y: auto; -webkit-overflow-scrolling: touch; } .node-detail-panel.show { transform: translateY(0); } .node-detail-panel__close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--color-bg-hover); color: var(--color-text-aux); cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .node-detail-panel__close:active { transform: scale(0.94); } .node-detail-panel__close svg { width: 16px; height: 16px; } .node-detail-panel__title { font-size: var(--font-title-md); color: var(--color-text-title); margin-bottom: 8px; padding-right: 36px; } .node-detail-panel__body { font-size: var(--font-base); color: var(--color-text-body); line-height: var(--line-height-base); margin-bottom: 16px; } .node-detail-panel__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .node-detail-panel__actions { display: flex; gap: var(--gap-component); } /* ============================================== 侧滑抽屉、弹窗 基础样式 ============================================== */ .drawer-mask { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 998; } .drawer { position: fixed; top: 0; left: 0; width: 75%; height: 100%; background-color: var(--color-card-bg); border-radius: 0 var(--radius-card) var(--radius-card) 0; z-index: 999; transform: translateX(-100%); transition: transform var(--transition-base); } .drawer.show { transform: translateX(0); } .popup { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.95); opacity: 0; transition: all var(--transition-base); z-index: 999; } .popup.show { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* ============================== 2026-07-17 豆包增量：P0按钮层级 + 轻引导动效 + P1预留 ============================== */ /* P1 预留变量：玻璃拟态深度 & 节点头像兼容 */ :root { --glass-depth: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255,255,255,0.15); } :root[data-theme="dark"]{color-scheme: dark; --glass-depth: 0 4px 16px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255,255,255,0.08); } .card { box-shadow: var(--shadow-card), var(--glass-depth); } .graph-node { border-radius: 50%; transition: var(--transition-base); background-repeat: no-repeat; background-position: center; background-size: cover; } /* P0 轻引导动效（首次加载触发） */ .tag-bar.guide-flash { animation: tagFlash 2s ease-in-out 1; } @keyframes tagFlash { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } .checkbox-custom.guide-breath { animation: checkboxBreath 2.5s ease-in-out infinite; } @keyframes checkboxBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* P0 核心行动按钮层级强化 */ .btn-primary { font-size: 17px; letter-spacing: 0.5px; } .btn-action-text { color: var(--color-brand); font-size: 15px; padding: 6px 12px; border-radius: 12px; background-color: rgba(197, 100, 115, 0.08); transition: var(--transition-base); } .btn-action-text:active { background-color: rgba(197, 100, 115, 0.15); } .btn-group { display: flex; gap: 12px; justify-content: center; padding-top: 16px; border-top: 1px solid var(--color-border-line); margin-top: 16px; } /* ============================================== CB-050：V4 体验原型（发现页）共享样式 头像入纸 + 标签吸顶 + 返回顶部 + AI 洞察光点 （其他核心页确认方向后直接复用本段） ============================================== */ /* ── 标签栏吸顶态（JS 越过阈值后动态加 .tag-bar--stuck） ── */ .tag-bar--stuck { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; max-width: var(--max-width); z-index: 100; /* 极淡半透底色：区分吸顶层与内容层，不破坏「一张纸」整体感 */ background-color: rgba(251, 249, 244, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } /* 吸顶态：右侧滑动遮罩渐变同步为半透底色 */ .tag-bar--stuck::after { background: linear-gradient(to left, rgba(251, 249, 244, 0.85), transparent); } :root[data-theme="dark"]{color-scheme: dark; background-color: rgba(26, 24, 22, 0.85); :root:not([data-theme="light"]) .tag-bar--stuck::after { background: linear-gradient(to left, rgba(26, 24, 22, 0.85), transparent); } } /* ── 返回顶部按钮（圆形极简图标，右下角，平滑回顶） ── */ .back-to-top { position: fixed; right: 16px; bottom: calc(var(--height-bottom-nav) + env(safe-area-inset-bottom, 0px) + 16px); width: 40px; height: 40px; border-radius: 50%; background-color: rgba(197, 100, 115, 0.85); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(197, 100, 115, 0.3); z-index: 60; opacity: 0; transform: translateY(8px) scale(0.9); pointer-events: none; transition: opacity var(--transition-base), transform var(--transition-base); -webkit-tap-highlight-color: transparent; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .back-to-top svg { width: 20px; height: 20px; } .back-to-top.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .back-to-top:active { transform: scale(0.92); } :root[data-theme="dark"]{color-scheme: dark; background-color: rgba(242, 153, 102, 0.85); } /* ── AI 洞察卡套预留光点（常态极淡微光呼吸，3s循环，极低存在感） ── */ .card-ai-glow { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-brand); opacity: 0.5; pointer-events: none; animation: aiGlowBreath 3s ease-in-out infinite; } @keyframes aiGlowBreath { 0%, 100% { opacity: 0.3; box-shadow: 0 0 0 0 rgba(197, 100, 115, 0); } 50% { opacity: 0.7; box-shadow: 0 0 6px 2px rgba(197, 100, 115, 0.25); } } :root[data-theme="dark"]{color-scheme: dark; background-color: var(--color-brand); @keyframes aiGlowBreath { 0%, 100% { opacity: 0.3; box-shadow: 0 0 0 0 rgba(242, 153, 102, 0); } 50% { opacity: 0.7; box-shadow: 0 0 6px 2px rgba(242, 153, 102, 0.3); } } }