/* ========================================================================== quez-light.css —— Quez 产品页的「主站浅色风格」覆盖层 -------------------------------------------------------------------------- 背景：quez.html 原本沿用外部团队设计的深色沉浸式视觉（quez.css，全文保留 未改一个字节）。本文件把该页翻译成 binarysee.com 主站的浅色 + 蓝紫体系。 机制：所有选择器统一前缀 html[data-theme="light"]。属性选择器使权重 +1， 通常足以压过设计稿的类选择器，不依赖文件加载顺序，也不靠 !important。 ★ 前缀必须保留 —— 它不只是「圈定作用域」，更是本层能压过设计稿的**特异度来源**。 去掉前缀会从 (0,2,1) 掉到 (0,1,0)，届时大量规则要靠加载顺序取胜，脆。 ★ 例外（第 18 轮踩到）：设计稿里有 18 条选择器带了 ≥3 个类， 例如 .mic .hardware-distance .distance-copy → 特异度 (0,3,0)。 特异度先比「类 / 属性」那一档，3 > 2，本文件的 (0,2,1) 压不过去， 写了等于没写（字面上看不出，因为规则确实在 CSSOM 里，只是输掉了层叠）。 这种地方必须**照抄设计稿的祖先链再叠主题前缀**，见 §6.5 与 §2 的 .demo-panel.recording .demo-wave i / .output-card.ready .output-badge / .flat-product-wrap.recording .flat-product-shell。 ★ 深色稿：已拍板不做（2026-10-15，ikun：「我们只有浅色 不做深色」）。 因此本页**不再存在第二套渲染** —— 本文件就是这页唯一的样式层（叠在设计稿之上）， 设计稿 quez.css 只作为素材与存档。 后果一：写新规则时**不必再为「深色也要能回退」而自我约束**，只需保证浅色正确； 但仍要保留前缀，理由见上（特异度）。 后果二：由「深浅两套不一致」衍生的一批待决项**一律结案**，不再跟踪 （页尾 min-height、远距卡片左内边距、大屏适配同步、几何是否逐像素一致等）。 后果三：深色渲染里仍然存在的缺陷（例如 §9 修的那条）**知道即可，不用修**。 实现上没有任何开关：quez.html 第 2 行是硬编码的 data-theme="light"， 全站没有 JS 切换、也没有 prefers-color-scheme 分支，所以不存在用户走到深色的路径。 分区：§1 设计令牌 · §2 逐条翻译（机械覆盖，保证不漏）· §3 签名元素（手工， 决定第一眼观感）· §4 图形可见性（手工修正）· §5 关键帧 · §6 模块布局与常见问题（纵向节奏 / 标题对齐 / 声场示意图 / FAQ 对齐 hilly / 远距收音卡片文案左侧留白）· §7 内联图形精细化（画布基准 / 描边 / 光晕 / 知识网络 / 五步图标）· §8 大屏适配（内容容器流量化 / 硬件影片视口护栏）· §9 页尾 CTA 点击失效修复（装饰伪元素吞掉点击） ========================================================================== */ /* ========================================================================== §1 设计令牌 ========================================================================== */ html[data-theme="light"] { /* 1.1 翻转设计稿自己的变量：66 处 var() 引用一次性生效 */ --bg: #f8fafc; --panel: #ffffff; --panel2: #f4f7fb; --line: rgba(15, 23, 42, .10); --text: #0f172a; --muted: #64748b; --ice: #1e5eff; --blue: #1e5eff; --deep: #4a3fd0; /* 1.2 主站品牌令牌。本页不加载 styles.css（避免两套布局互相污染）， 故在此本地声明一份；一律加 qz- 前缀，防止与设计稿变量撞名。 */ --qz-accent: #1e5eff; --qz-accent-2: #5a4df0; --qz-accent-3: #8f6bff; --qz-accent-deep: #4a3fd0; --qz-accent-rgb: 30, 94, 255; --qz-violet-rgb: 106, 80, 240; --qz-warn: #e5484d; --qz-page: #f8fafc; --qz-card: #ffffff; --qz-soft: #f4f7fb; --qz-sunken: #f1f5f9; --qz-tint: #eef1ff; --qz-line: rgba(15, 23, 42, .10); --qz-line-soft: rgba(15, 23, 42, .07); --qz-text: #0f172a; --qz-text-2: #334155; --qz-text-3: #64748b; --qz-grad-brand: linear-gradient(120deg, #1e5eff 0%, #5a4df0 55%, #8f6bff 100%); --qz-grad-title: linear-gradient(120deg, #0f172a 6%, #1e5eff 56%, #5a4df0 100%); --qz-shadow-card: 0 20px 44px -20px rgba(15, 23, 42, .16); --qz-shadow-float: 0 30px 70px -26px rgba(15, 23, 42, .24); } /* 1.3 页面底色：设计稿的 html/body 背景已随 --bg 翻转，这里补一层极淡的品牌氛围 */ html[data-theme="light"] body { background: #f8fafc; color: var(--qz-text); } /* === 以下为 §2 逐条翻译 === */ html[data-theme="light"] .nav{background:linear-gradient(180deg,rgba(255,255,255,0.97),transparent)} html[data-theme="light"] .nav.scrolled{background:rgba(255,255,255,0.96)} html[data-theme="light"] .nav-links{color:#64748b} html[data-theme="light"] .nav-cta{border:1px solid rgba(30,94,255,0.30);background:rgba(30,94,255,0.04)} html[data-theme="light"] .hero::before{background:radial-gradient(ellipse,rgba(30,94,255,0.14),transparent 65%)} html[data-theme="light"] .hero h1{background:linear-gradient(180deg,#ffffff 30%,#eef1ff)} html[data-theme="light"] .hero-sub{color:#64748b} html[data-theme="light"] .btn.primary{color:#0f172a;box-shadow:0 0 34px rgba(30,94,255,0.14)} html[data-theme="light"] .device{filter:drop-shadow(0 38px 55px rgba(15,23,42,0.18)) drop-shadow(-10px -4px 34px rgba(30,94,255,0.10))} html[data-theme="light"] .scan::after{background:linear-gradient(90deg,transparent,rgba(30,94,255,0.17),transparent)} html[data-theme="light"] .product-3d:focus-visible{filter:drop-shadow(0 0 14px rgba(30,94,255,0.38))} html[data-theme="light"] .model-card{filter:drop-shadow(0 38px 45px rgba(15,23,42,0.15))} html[data-theme="light"] .model-edge{background:linear-gradient(90deg,#f4f7fb 0%,#f1f5f9 18%,#eef1ff 48%,#eef1ff 76%,#ffffff 100%);box-shadow:inset 0 0 6px rgba(15,23,42,0.10),0 0 5px rgba(30,94,255,0.09)} html[data-theme="light"] .edge-bottom::before{background:#f8fafc;box-shadow:inset 0 1px 2px rgba(15,23,42,0.05)} html[data-theme="light"] .edge-bottom::after{background:radial-gradient(circle,#f8fafc 0 1.4px,transparent 1.8px) 0 0/9px 7px repeat-x} html[data-theme="light"] .drag-hint{color:#64748b} html[data-theme="light"] .drag-hint::before{color:#1e5eff} html[data-theme="light"] .model-glow{background:radial-gradient(ellipse,rgba(30,94,255,0.13),transparent 67%)} html[data-theme="light"] .flat-product-shell{filter:drop-shadow(0 34px 42px rgba(15,23,42,0.16)) drop-shadow(0 0 24px rgba(30,94,255,0.08))} html[data-theme="light"] .flat-product-wrap.recording .flat-product-shell{filter:drop-shadow(0 38px 46px rgba(15,23,42,0.16)) drop-shadow(0 0 34px rgba(30,94,255,0.17))} html[data-theme="light"] .record-trigger{border:1px solid rgba(30,94,255,0.47);background:rgba(30,94,255,0.06);box-shadow:0 0 0 4px rgba(30,94,255,0.06),0 0 18px rgba(30,94,255,0.17)} html[data-theme="light"] .record-trigger::before{background:#1e5eff;box-shadow:0 0 13px rgba(30,94,255,0.45)} html[data-theme="light"] .record-trigger:hover{background:rgba(30,94,255,0.10)} html[data-theme="light"] .record-trigger:focus-visible{outline:2px solid rgba(30,94,255,0.85)} html[data-theme="light"] .record-trigger.is-recording{border-color:rgba(15,23,42,.14);background:rgba(15,23,42,0.07);box-shadow:0 0 0 7px rgba(15,23,42,0.10),0 0 24px rgba(15,23,42,0.10)} html[data-theme="light"] .record-trigger.is-recording::before{background:#eef1ff;box-shadow:0 0 14px rgba(15,23,42,0.10)} html[data-theme="light"] .button-caption{color:#64748b} html[data-theme="light"] .demo-panel{border:1px solid rgba(15,23,42,0.14);background:linear-gradient(145deg,rgba(255,255,255,0.99),rgba(255,255,255,0.99));box-shadow:0 28px 70px rgba(15,23,42,0.11)} html[data-theme="light"] .demo-panel::before{background:radial-gradient(circle,rgba(30,94,255,0.10),transparent 67%)} html[data-theme="light"] .demo-status{color:#64748b} html[data-theme="light"] .status-dot{background:#f4f7fb} html[data-theme="light"] .demo-panel.recording .status-dot{background:#eef1ff;box-shadow:0 0 12px rgba(15,23,42,0.10)} html[data-theme="light"] .demo-panel.processing .status-dot{background:#1e5eff;box-shadow:0 0 12px rgba(30,94,255,0.45)} html[data-theme="light"] .demo-timer{color:#64748b} html[data-theme="light"] .demo-hint{color:#64748b} html[data-theme="light"] .demo-wave i{background:#ffffff} html[data-theme="light"] .demo-panel.recording .demo-wave i{background:#1e5eff} html[data-theme="light"] .live-transcript{background:#f8fafc;border:1px solid rgba(15,23,42,0.11);color:#64748b} html[data-theme="light"] .process-steps span{border:1px solid rgba(15,23,42,0.11);color:#64748b} html[data-theme="light"] .process-steps span.active{color:#1e5eff;border-color:rgba(30,94,255,0.30);background:rgba(30,94,255,0.06);box-shadow:0 0 18px rgba(30,94,255,0.06)} html[data-theme="light"] .demo-result{background:#eef1ff;color:#0f172a} html[data-theme="light"] .demo-result li{color:#334155} html[data-theme="light"] .privacy-note{color:#64748b} html[data-theme="light"] .demo-error{color:#64748b} html[data-theme="light"] .hero-note{color:#64748b} html[data-theme="light"] .scroll-line{background:#f4f7fb} html[data-theme="light"] .intro h2 span,html[data-theme="light"] .section-title span{color:#64748b} html[data-theme="light"] .intro p{color:#64748b} html[data-theme="light"] .value-grid{background:#f8fafc} html[data-theme="light"] .num{color:#64748b} html[data-theme="light"] .value-card p{color:#64748b} html[data-theme="light"] .glyph{border:1px solid rgba(30,94,255,0.18);background:rgba(30,94,255,0.03)} html[data-theme="light"] .workflow-head p{color:#64748b} html[data-theme="light"] .flow-box{background:radial-gradient(circle at 50% 50%,rgba(30,94,255,0.07),transparent 55%),#f8fafc} html[data-theme="light"] .flow-line{background:linear-gradient(90deg,transparent,#1e5eff,transparent);box-shadow:0 0 14px rgba(30,94,255,0.45)} html[data-theme="light"] .flow-icon{background:#f8fafc;border:1px solid rgba(15,23,42,0.16);box-shadow:0 16px 35px rgba(15,23,42,0.11)} html[data-theme="light"] .flow-item small{color:#64748b} html[data-theme="light"] .pulse{background:#eef1ff;box-shadow:0 0 18px rgba(30,94,255,0.45)} html[data-theme="light"] .template-stage{background:#f8fafc} html[data-theme="light"] .template-stage::before{background:radial-gradient(circle at center,rgba(30,94,255,0.10),transparent 35%)} html[data-theme="light"] .template-center strong{background:linear-gradient(#ffffff,#eef1ff)} html[data-theme="light"] .template-center span{color:#334155} html[data-theme="light"] .template-center p{color:#64748b} html[data-theme="light"] .orbit{border:1px solid rgba(30,94,255,0.18)} html[data-theme="light"] .tag{background:rgba(255,255,255,0.98);color:#64748b;box-shadow:0 12px 30px rgba(15,23,42,0.08)} html[data-theme="light"] .mic{background:linear-gradient(180deg,#f8fafc,#f8fafc,#f8fafc)} html[data-theme="light"] .big-stat{color:#0f172a} html[data-theme="light"] .big-stat small{color:#64748b} html[data-theme="light"] .specs{color:#64748b} html[data-theme="light"] .mini-device{filter:drop-shadow(0 35px 55px rgba(15,23,42,0.19)) drop-shadow(0 0 34px rgba(30,94,255,0.09))} html[data-theme="light"] .wave{border:1px solid rgba(30,94,255,0.18)} html[data-theme="light"] .mic-dot{background:#1e5eff;box-shadow:0 0 20px rgba(30,94,255,0.45)} html[data-theme="light"] .distance-card{background:radial-gradient(circle at 78% 49%,rgba(30,94,255,0.10),transparent 32%),linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,0.97) 48%,rgba(255,255,255,0.93)),linear-gradient(180deg,#f8fafc,#f8fafc)} html[data-theme="light"] .room::before{background:repeating-linear-gradient(90deg,transparent 0 12.2%,rgba(30,94,255,0.05) 12.4% 12.55%),linear-gradient(168deg,transparent 0 45%,rgba(30,94,255,0.06) 45.2% 45.5%,transparent 45.7%)} html[data-theme="light"] .chip{border:1px solid rgba(30,94,255,0.18);color:#64748b;background:rgba(255,255,255,0.89)} html[data-theme="light"] .sound-field{border:1px solid rgba(30,94,255,0.18);background:linear-gradient(180deg,rgba(255,255,255,0.97),rgba(255,255,255,0.99));box-shadow:0 25px 65px rgba(15,23,42,0.10),inset 0 0 60px rgba(30,94,255,0.06)} html[data-theme="light"] .sound-field::before{background-image:linear-gradient(rgba(30,94,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(30,94,255,0.03) 1px,transparent 1px)} html[data-theme="light"] .field-head span{color:#64748b} html[data-theme="light"] .field-head b{color:#1e5eff} html[data-theme="light"] .field-live::before{background:#1e5eff;box-shadow:0 0 10px rgba(30,94,255,0.45)} html[data-theme="light"] .device-node{fill:#eef1ff;stroke:#1e5eff} html[data-theme="light"] .map-label{fill:#c7d2fe} html[data-theme="light"] .map-label.accent{fill:#1e5eff} html[data-theme="light"] .clean-wave{border-top:1px solid rgba(15,23,42,0.11)} html[data-theme="light"] .clean-wave b{color:#64748b;font-size:10.5px} html[data-theme="light"] .clean-wave i{background:#1e5eff;box-shadow:0 0 7px rgba(30,94,255,0.30)} html[data-theme="light"] .range-badge strong{color:#0f172a} html[data-theme="light"] .range-badge small{color:#64748b} html[data-theme="light"] .phone-stage::before{background:radial-gradient(circle,rgba(30,94,255,0.13),transparent 65%)} html[data-theme="light"] .phone{background:#f8fafc;border:6px solid rgba(15,23,42,.14);box-shadow:0 50px 100px rgba(15,23,42,0.18),0 0 70px rgba(30,94,255,0.08)} html[data-theme="light"] .phone::before{background:#f8fafc} html[data-theme="light"] .phone-top{color:#64748b} html[data-theme="light"] .record-card{background:#f8fafc} html[data-theme="light"] .record-time{color:#64748b} html[data-theme="light"] .summary-card{background:#eef1ff;color:#0f172a} html[data-theme="light"] .summary-card p{color:#64748b} html[data-theme="light"] .floating-ui{background:rgba(255,255,255,0.98);box-shadow:0 25px 60px rgba(15,23,42,0.13)} html[data-theme="light"] .floating-ui small{color:#64748b} html[data-theme="light"] .ui-line{background:#f8fafc} html[data-theme="light"] .ui-line.accent{background:linear-gradient(90deg,#1e5eff 0 58%,#f8fafc 58%)} html[data-theme="light"] .twin-panel{background:radial-gradient(circle at 50% 46%,rgba(30,94,255,0.11),transparent 34%),#f8fafc} html[data-theme="light"] .twin-panel::before{background-image:linear-gradient(rgba(30,94,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(30,94,255,0.03) 1px,transparent 1px)} html[data-theme="light"] .twin-core{background:radial-gradient(circle at 38% 30%,#eef1ff 0 3%,#1e5eff 11%,#f8fafc 42%,#f8fafc 70%);box-shadow:0 0 35px rgba(30,94,255,0.26),0 0 130px rgba(30,94,255,0.17)} html[data-theme="light"] .twin-core::before,html[data-theme="light"] .twin-core::after{border:1px solid rgba(30,94,255,0.20)} html[data-theme="light"] .twin-face{border:1px solid rgba(15,23,42,0.49)} html[data-theme="light"] .twin-face::before{background:linear-gradient(90deg,#1e5eff,transparent,#1e5eff);box-shadow:0 30px 0 rgba(30,94,255,0.41)} html[data-theme="light"] .twin-name small{color:#64748b} html[data-theme="light"] .twin-card{border:1px solid rgba(15,23,42,0.14);background:rgba(255,255,255,0.98);box-shadow:0 22px 60px rgba(15,23,42,0.11)} html[data-theme="light"] .twin-card .card-icon{background:rgba(30,94,255,0.07);border:1px solid rgba(30,94,255,0.18)} html[data-theme="light"] .twin-card p{color:#64748b} html[data-theme="light"] .twin-card small{color:#1e5eff} html[data-theme="light"] .connector{background:linear-gradient(90deg,transparent,rgba(30,94,255,0.22),transparent)} html[data-theme="light"] .twin-proof{background:#f8fafc} html[data-theme="light"] .proof-item b{color:#0f172a} html[data-theme="light"] .proof-item span{color:#64748b} html[data-theme="light"] .vault{border:1px solid rgba(15,23,42,.14);background:linear-gradient(145deg,#f8fafc,#f8fafc);box-shadow:0 40px 90px rgba(15,23,42,0.18),0 0 75px rgba(30,94,255,0.09)} html[data-theme="light"] .vault::before{border:1px solid rgba(30,94,255,0.30);box-shadow:inset 0 0 0 20px #ffffff,0 0 30px rgba(30,94,255,0.09)} html[data-theme="light"] .note-card{background:#f8fafc;box-shadow:0 20px 45px rgba(15,23,42,0.11)} html[data-theme="light"] .note-card small{color:#64748b} html[data-theme="light"] .scene{background:#f8fafc} html[data-theme="light"] .scene:hover{border-color:rgba(30,94,255,0.20);box-shadow:0 30px 70px rgba(15,23,42,0.09)} html[data-theme="light"] .scene:nth-child(1)::before{background:radial-gradient(circle at 54% 35%,rgba(30,94,255,0.10),transparent 38%),linear-gradient(160deg,#f8fafc,#f8fafc 76%)} html[data-theme="light"] .scene:nth-child(2)::before{background:linear-gradient(135deg,rgba(30,94,255,0.08),transparent 42%),linear-gradient(155deg,#f8fafc,#f8fafc 72%)} html[data-theme="light"] .scene:nth-child(3)::before{background:radial-gradient(circle at 28% 34%,rgba(30,94,255,0.08),transparent 36%),linear-gradient(145deg,#f8fafc,#f8fafc 75%)} html[data-theme="light"] .scene:nth-child(4)::before{background:linear-gradient(12deg,rgba(30,94,255,0.03) 0 9%,transparent 9% 18%),linear-gradient(150deg,#f8fafc,#f8fafc 72%)} html[data-theme="light"] .scene .scene-no{color:#1e5eff} html[data-theme="light"] .scene>p{color:#64748b} html[data-theme="light"] .final::before{background:radial-gradient(ellipse,rgba(30,94,255,0.13),transparent 65%)} html[data-theme="light"] .final p{color:#64748b} html[data-theme="light"] .footer{color:#64748b} /* 原上下文 */@media(max-width:900px){ html[data-theme="light"] .flow-line{background:linear-gradient(transparent,#1e5eff,transparent)} } html[data-theme="light"] .flat-product-shell::after{background:linear-gradient(108deg,transparent 35%,rgba(30,94,255,0.14) 49%,transparent 63%)} html[data-theme="light"] .live-transcript{scrollbar-color:rgba(15,23,42,.14) transparent} html[data-theme="light"] .dialogue-line{border-bottom:1px solid rgba(15,23,42,0.09)} html[data-theme="light"] .dialogue-speaker b{color:#1e5eff} html[data-theme="light"] .dialogue-speaker small{color:#64748b} html[data-theme="light"] .dialogue-text{color:#64748b} html[data-theme="light"] .demo-result li{border:1px solid rgba(15,23,42,0.13);background:rgba(30,94,255,0.07)} html[data-theme="light"] .demo-result li b{color:#0f172a} html[data-theme="light"] .demo-result li span{color:#334155} html[data-theme="light"] .twin-lab{border:1px solid rgba(15,23,42,0.16);background:linear-gradient(145deg,#f8fafc,#f8fafc);box-shadow:0 32px 90px rgba(15,23,42,0.11)} html[data-theme="light"] .twin-tabs{background:rgba(30,94,255,0.05)} html[data-theme="light"] .twin-tab{color:#64748b} html[data-theme="light"] .twin-tab:hover{color:#0f172a;background:rgba(30,94,255,0.03)} html[data-theme="light"] .twin-tab.active{color:#0f172a;box-shadow:0 0 28px rgba(30,94,255,0.14)} html[data-theme="light"] .lab-label{color:#64748b} html[data-theme="light"] .source-card{border:1px solid rgba(15,23,42,0.12);background:#f8fafc} html[data-theme="light"] .source-card.active{border-color:rgba(30,94,255,0.32);background:rgba(30,94,255,0.05);box-shadow:0 0 24px rgba(30,94,255,0.06)} html[data-theme="light"] .source-card b{color:#1e293b} html[data-theme="light"] .source-card p{color:#64748b} html[data-theme="light"] .source-card small{color:#64748b} html[data-theme="light"] .meter-head{color:#64748b} html[data-theme="light"] .meter-track{background:#f8fafc} html[data-theme="light"] .meter-fill{background:linear-gradient(90deg,#1e5eff,#1e5eff);box-shadow:0 0 12px rgba(30,94,255,0.45)} html[data-theme="light"] .twin-engine{background:radial-gradient(circle,rgba(30,94,255,0.08),transparent 62%)} html[data-theme="light"] .engine-orbit{border:1px solid rgba(30,94,255,0.18)} html[data-theme="light"] .engine-orbit::before,html[data-theme="light"] .engine-orbit::after{background:#1e5eff;box-shadow:0 0 15px rgba(30,94,255,0.45)} html[data-theme="light"] .engine-core{background:linear-gradient(145deg,#f8fafc,#f8fafc);border:1px solid rgba(30,94,255,0.27);box-shadow:inset 0 0 32px rgba(30,94,255,0.11),0 0 38px rgba(30,94,255,0.13)} html[data-theme="light"] .engine-core::before{color:#1e5eff;text-shadow:0 0 18px rgba(30,94,255,0.45)} html[data-theme="light"] .engine-status b{color:#1e5eff} html[data-theme="light"] .engine-status small{color:#64748b} html[data-theme="light"] .output-card{border:1px solid rgba(30,94,255,0.18);background:linear-gradient(145deg,rgba(30,94,255,0.08),rgba(255,255,255,0.90))} html[data-theme="light"] .output-card.ready{border-color:rgba(30,94,255,0.32);box-shadow:0 18px 45px rgba(15,23,42,0.05)} html[data-theme="light"] .output-badge{background:rgba(30,94,255,0.07);color:#1e5eff} html[data-theme="light"] .output-card>p{color:#64748b} html[data-theme="light"] .evidence-row span{border:1px solid rgba(15,23,42,0.12);color:#64748b} html[data-theme="light"] .next-action{background:#eef1ff;color:#0f172a} html[data-theme="light"] .lab-stat b{color:#1e5eff} html[data-theme="light"] .lab-stat span{color:#64748b} html[data-theme="light"] .pipeline-track{background:linear-gradient(90deg,rgba(30,94,255,0.10),#1e5eff 48%,rgba(30,94,255,0.10))} html[data-theme="light"] .pipeline-track::before,html[data-theme="light"] .pipeline-track::after{background:#1e5eff;box-shadow:0 0 14px rgba(30,94,255,0.45)} html[data-theme="light"] .pipeline-signal{background:#eef1ff;box-shadow:0 0 18px 4px rgba(30,94,255,0.41)} html[data-theme="light"] .asset-stage{border:1px solid rgba(15,23,42,0.13);background:linear-gradient(155deg,rgba(255,255,255,1.00),rgba(255,255,255,1.00))} html[data-theme="light"] .asset-stage:hover{border-color:rgba(30,94,255,0.26);box-shadow:0 25px 55px rgba(15,23,42,0.09)} html[data-theme="light"] .asset-stage::before{background:radial-gradient(circle,rgba(30,94,255,0.08),transparent 68%)} html[data-theme="light"] .stage-index{color:#64748b} html[data-theme="light"] .stage-state{color:#1e5eff;border:1px solid rgba(30,94,255,0.18);background:rgba(30,94,255,0.03)} html[data-theme="light"] .asset-stage>p{color:#64748b} html[data-theme="light"] .record-panel{border:1px solid rgba(15,23,42,0.11);background:#f8fafc} html[data-theme="light"] .record-status{color:#64748b} html[data-theme="light"] .record-status b{color:#1e5eff} html[data-theme="light"] .record-wave i{background:#1e5eff} html[data-theme="light"] .speaker-pills span{color:#64748b;background:#f8fafc;border:1px solid rgba(15,23,42,0.10)} html[data-theme="light"] .speaker-pills span:first-child{color:#1e5eff;border-color:rgba(30,94,255,0.21)} html[data-theme="light"] .understand-panel{background:linear-gradient(145deg,#f8fafc,#f8fafc);border:1px solid rgba(15,23,42,0.11)} html[data-theme="light"] .transcript-row{border-bottom:1px solid rgba(15,23,42,0.09)} html[data-theme="light"] .transcript-row b{color:#1e5eff} html[data-theme="light"] .transcript-row span{color:#64748b} html[data-theme="light"] .transcript-row em{color:#0f172a;background:rgba(30,94,255,0.08)} html[data-theme="light"] .extract-tags span{color:#1e5eff;border:1px solid rgba(30,94,255,0.18);background:rgba(30,94,255,0.04)} html[data-theme="light"] .summary-panel{background:#eef1ff;color:#0f172a;box-shadow:0 16px 30px rgba(15,23,42,0.07)} html[data-theme="light"] .summary-panel header span{color:#64748b} html[data-theme="light"] .summary-block{background:rgba(30,94,255,0.09);border:1px solid rgba(15,23,42,0.11)} html[data-theme="light"] .summary-block b{color:#334155} html[data-theme="light"] .summary-block p{color:#64748b} html[data-theme="light"] .summary-actions span{background:#eef1ff;color:#334155} html[data-theme="light"] .knowledge-map{border:1px solid rgba(30,94,255,0.18);background-image:linear-gradient(rgba(30,94,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(30,94,255,0.03) 1px,transparent 1px)} html[data-theme="light"] .knowledge-link{stroke:#1e5eff} html[data-theme="light"] .knowledge-node{color:#1e5eff;background:#f8fafc;border:1px solid rgba(30,94,255,0.26);box-shadow:0 0 22px rgba(30,94,255,0.08)} html[data-theme="light"] .knowledge-node.core{background:radial-gradient(circle at 38% 30%,#f4f7fb,#f8fafc 65%);box-shadow:0 0 30px rgba(30,94,255,0.17)} html[data-theme="light"] .knowledge-meta{color:#64748b} html[data-theme="light"] .asset-stage:nth-of-type(4){background:radial-gradient(circle at 50% 45%,rgba(30,94,255,0.08),transparent 50%),linear-gradient(155deg,#f8fafc,#f8fafc)} html[data-theme="light"] .memory-console{border:1px solid rgba(15,23,42,0.14);background:radial-gradient(circle at 50% 50%,rgba(30,94,255,0.08),transparent 35%),linear-gradient(145deg,#f8fafc,#f8fafc);box-shadow:0 30px 80px rgba(15,23,42,0.09)} html[data-theme="light"] .memory-label{color:#64748b} html[data-theme="light"] .memory-record{border:1px solid rgba(15,23,42,0.11);background:#f8fafc} html[data-theme="light"] .memory-record:hover,html[data-theme="light"] .memory-record.active{border-color:rgba(30,94,255,0.30);background:rgba(30,94,255,0.06);box-shadow:0 0 24px rgba(30,94,255,0.06)} html[data-theme="light"] .memory-record b{color:#1e293b} html[data-theme="light"] .memory-record span{color:#64748b} html[data-theme="light"] .memory-record small{color:#64748b} html[data-theme="light"] .memory-hub::before{background-image:linear-gradient(rgba(30,94,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(30,94,255,0.03) 1px,transparent 1px)} html[data-theme="light"] .memory-ring{border:1px solid rgba(30,94,255,0.18)} html[data-theme="light"] .memory-ring::before,html[data-theme="light"] .memory-ring::after{background:#1e5eff;box-shadow:0 0 13px rgba(30,94,255,0.45)} html[data-theme="light"] .memory-core{background:radial-gradient(circle at 35% 25%,#f1f5f9,#f8fafc 42%,#f8fafc 72%);border:1px solid rgba(30,94,255,0.32);box-shadow:inset 0 0 35px rgba(30,94,255,0.09),0 0 45px rgba(30,94,255,0.15)} html[data-theme="light"] .memory-core strong{color:#0f172a} html[data-theme="light"] .memory-core span{color:#1e5eff} html[data-theme="light"] .memory-count b{color:#0f172a} html[data-theme="light"] .memory-count span{color:#64748b} html[data-theme="light"] .memory-flow{background:linear-gradient(90deg,transparent,rgba(30,94,255,0.24),transparent)} html[data-theme="light"] .memory-flow i{background:#1e5eff;box-shadow:0 0 13px rgba(30,94,255,0.45)} html[data-theme="light"] .memory-search{border:1px solid rgba(30,94,255,0.18);background:#f8fafc} html[data-theme="light"] .memory-search input{color:#0f172a} html[data-theme="light"] .memory-search input::placeholder{color:#64748b} html[data-theme="light"] .memory-search button{color:#0f172a} html[data-theme="light"] .memory-search button:hover{background:#eef1ff} html[data-theme="light"] .recall-state{color:#1e5eff} html[data-theme="light"] .recall-state::before{background:#1e5eff;box-shadow:0 0 11px rgba(30,94,255,0.45)} html[data-theme="light"] .recall-card{background:#eef1ff;color:#0f172a;box-shadow:0 20px 45px rgba(15,23,42,0.07)} html[data-theme="light"] .recall-card small{color:#64748b} html[data-theme="light"] .recall-card>p{color:#64748b} html[data-theme="light"] .recall-meta span{background:rgba(30,94,255,0.08);color:#334155} html[data-theme="light"] .recall-list li{border-top:1px solid rgba(15,23,42,0.12);color:#64748b} html[data-theme="light"] .recall-action{background:#f8fafc;color:#0f172a} html[data-theme="light"] .memory-foot{color:#64748b} html[data-theme="light"] .hardware-film{border:1px solid rgba(15,23,42,0.16);background:#f8fafc;box-shadow:0 38px 90px rgba(15,23,42,0.12),0 0 70px rgba(30,94,255,0.06)} html[data-theme="light"] .hardware-film-head{background:linear-gradient(90deg,rgba(30,94,255,0.05),transparent)} html[data-theme="light"] .hardware-film-head b{color:#1e5eff} html[data-theme="light"] .hardware-film-head span{color:#64748b} html[data-theme="light"] .hardware-video-wrap{background:#eef1ff} html[data-theme="light"] .hardware-video{background:#eef1ff} html[data-theme="light"] .hardware-video-wrap::after{background:linear-gradient(180deg,rgba(255,255,255,0.82),transparent 22%,transparent 75%,rgba(255,255,255,0.85))} html[data-theme="light"] .hardware-film-tag{background:rgba(255,255,255,0.94);border:1px solid rgba(15,23,42,0.30);color:#0f172a} html[data-theme="light"] .hardware-film-note{color:#64748b} html[data-theme="light"] .hardware-film-note strong{color:#1e293b} html[data-theme="light"] .hardware-specs{background:#f8fafc} html[data-theme="light"] .hardware-spec small{color:#64748b} html[data-theme="light"] .hardware-spec p{color:#64748b} html[data-theme="light"] .hardware-details{color:#64748b} html[data-theme="light"] .hardware-details summary{color:#1e293b} html[data-theme="light"] .demo-options{border-top:1px solid rgba(15,23,42,.10);color:#334155} html[data-theme="light"] .demo-options select{background:#eef1ff;border:1px solid rgba(30,94,255,0.85);color:#0f172a} html[data-theme="light"] .capability-note{color:#64748b} html[data-theme="light"] .hardware-specs + .hardware-details:focus-within{border-color:rgba(30,94,255,0.85)} html[data-theme="light"] .template-stage .tag{border-color:rgba(30,94,255,0.20);color:#334155} html[data-theme="light"] .orbit-toggle{background:#f8fafc;color:#334155} html[data-theme="light"] .orbit-toggle:focus-visible{outline:2px solid rgba(30,94,255,0.85)} html[data-theme="light"] .record-benefits{border-top:1px solid rgba(30,94,255,0.18)} html[data-theme="light"] .record-benefits article{border-left:2px solid rgba(30,94,255,0.85)} html[data-theme="light"] .record-benefits h3{color:#0f172a} html[data-theme="light"] .record-benefits em{color:#1e5eff} html[data-theme="light"] .record-benefits p{color:#64748b} html[data-theme="light"] .hardware-footnote{color:#64748b} html[data-theme="light"] .software-steps::before{background:linear-gradient(transparent,#eef1ff,transparent)} html[data-theme="light"] .software-step-icon{border:1px solid rgba(15,23,42,.14);background:#f8fafc;color:#1e5eff} html[data-theme="light"] .software-step h3{color:#0f172a} html[data-theme="light"] .software-step h3 small{color:#64748b} html[data-theme="light"] .software-step p{color:#64748b} html[data-theme="light"] .software-phone::before{background:radial-gradient(ellipse,rgba(30,94,255,0.10),transparent 65%)} html[data-theme="light"] .software-phone-note{color:#64748b} html[data-theme="light"] .software-phone-note span:first-child{color:#1e5eff} html[data-theme="light"] .template-center .template-coverage{color:#334155} html[data-theme="light"] .hero-signature::before{color:#1e5eff} html[data-theme="light"] .hero-signature p{color:rgba(255,255,255,0.82)} html[data-theme="light"] .hero-signature em{color:#1e5eff;text-shadow:0 0 20px rgba(30,94,255,0.20)} html[data-theme="light"] .hero-signature::after{background:linear-gradient(90deg,transparent,#1e5eff 28%,transparent)} html[data-theme="light"] .twin-avatar-wrap{filter:drop-shadow(0 16px 34px rgba(15,23,42,0.14))} html[data-theme="light"] .twin-avatar-wrap::before{background:radial-gradient(ellipse,rgba(30,94,255,0.16),rgba(30,94,255,0.06) 46%,transparent 72%)} html[data-theme="light"] .twin-scan{background:linear-gradient(90deg,transparent,rgba(30,94,255,0.63),transparent);box-shadow:0 0 14px rgba(30,94,255,0.45)} html[data-theme="light"] .twin-engine .engine-status b{background:rgba(255,255,255,0.95);border:1px solid rgba(30,94,255,0.18)} html[data-theme="light"] .template-audience{border:1px solid rgba(30,94,255,0.19);background:rgba(255,255,255,0.95);color:#1e5eff} html[data-theme="light"] .template-audience::before{background:#1e5eff;box-shadow:0 0 13px rgba(30,94,255,0.45)} html[data-theme="light"] .template-center .template-prefix{color:#1e5eff} html[data-theme="light"] .brand-parent{color:#1e5eff} html[data-theme="light"] .brand-parent::before{color:#64748b} html[data-theme="light"] .final h2 .final-cat{color:#64748b} html[data-theme="light"] .faq-item summary h3{color:#0f172a} html[data-theme="light"] .faq-item summary:hover h3{color:#0f172a} html[data-theme="light"] .qz-foot-logo{color:#0f172a} html[data-theme="light"] .qz-foot-brand p{color:#64748b} html[data-theme="light"] .qz-foot-title{color:#64748b} html[data-theme="light"] .qz-foot-col a{color:#64748b} html[data-theme="light"] .qz-foot-col a:hover{color:#0f172a} html[data-theme="light"] .qz-foot-col a[aria-current="page"]{color:#334155} html[data-theme="light"] .qz-foot-legal{color:#64748b} html[data-theme="light"] .qz-foot-bottom{color:#64748b} /* ========================================================================== §3 签名元素 —— 决定第一眼观感的几处，逐条手工定义主站版本 ========================================================================== */ /* 3.1 导航：白色玻璃条；滚动后转实心白并压一层柔和投影 */ html[data-theme="light"] .nav { background: linear-gradient(180deg, rgba(248, 250, 252, .96) 0%, rgba(248, 250, 252, .72) 58%, rgba(248, 250, 252, 0)); } html[data-theme="light"] .nav.scrolled { background: rgba(255, 255, 255, .90); border-color: var(--qz-line); box-shadow: 0 10px 34px -22px rgba(15, 23, 42, .45); } html[data-theme="light"] .brand { color: var(--qz-text); } html[data-theme="light"] .nav-links { color: var(--qz-text-3); } html[data-theme="light"] .nav-links a { color: #475569; } html[data-theme="light"] .nav-links a:hover { color: var(--qz-accent); } html[data-theme="light"] .nav-cta { color: var(--qz-accent) !important; background: rgba(var(--qz-accent-rgb), .07); border-color: rgba(var(--qz-accent-rgb), .30); } html[data-theme="light"] .nav-cta:hover { background: rgba(var(--qz-accent-rgb), .13); border-color: var(--qz-accent); } html[data-theme="light"] .brand-parent { color: var(--qz-text-3); } html[data-theme="light"] .brand-parent::before { color: #cbd5e1; } /* 3.2 眉题：设计稿的 --ice 已随令牌翻成品牌蓝，这里再兜一层 */ html[data-theme="light"] .eyebrow { color: var(--qz-accent); } /* 3.3 标题字：原设计是「白 → 灰」的渐变裁字，浅底上完全不可见，必须换掉。 换成主站规范里的品牌渐变（深墨蓝 → 品牌蓝 → 紫），层级与识别度都成立。 */ html[data-theme="light"] .hero h1 { background: var(--qz-grad-title); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"] .template-center strong { background: linear-gradient(120deg, #0f172a 6%, #1e5eff 56%, #5a4df0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"] .final-name { background: var(--qz-grad-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* 结尾标题里嵌的小字是独立的语义标签，必须从裁字里摘出来，否则一起消失 */ html[data-theme="light"] .final h2 .final-cat { color: var(--qz-text-3); -webkit-text-fill-color: var(--qz-text-3); } /* 区块标题里的强调短语：原本是灰字，改为品牌渐变，与主站 .gradient-text 同法 */ html[data-theme="light"] .section-title span, html[data-theme="light"] .intro h2 span { background: linear-gradient(120deg, #1e5eff 0%, #5a4df0 62%, #8f6bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* 3.4 按钮：主按钮走品牌蓝紫渐变 + 白字；次按钮走白底描边 */ html[data-theme="light"] .btn { background: #ffffff; border-color: var(--qz-line); color: var(--qz-text); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); } html[data-theme="light"] .btn:hover { border-color: rgba(var(--qz-accent-rgb), .45); color: var(--qz-accent); box-shadow: 0 10px 26px -14px rgba(var(--qz-accent-rgb), .55); } html[data-theme="light"] .btn.primary { color: #ffffff; background: var(--qz-grad-brand); border-color: transparent; box-shadow: 0 14px 30px -14px rgba(var(--qz-accent-rgb), .60); } html[data-theme="light"] .btn.primary:hover { color: #ffffff; box-shadow: 0 20px 40px -16px rgba(var(--qz-accent-rgb), .70); } /* 3.5 手写签名：保留手写体（Quez 是记录型产品，手写签名是它的识别资产， 不属于「风格」而属于「内容」），但把原来的近白墨水换成品牌蓝墨水 —— 原色在浅底上等于不可见。 */ html[data-theme="light"] .hero-signature::before { color: rgba(var(--qz-accent-rgb), .42); } html[data-theme="light"] .hero-signature p { color: rgba(15, 23, 42, .76); } html[data-theme="light"] .hero-signature em { color: var(--qz-accent); text-shadow: 0 1px 10px rgba(var(--qz-accent-rgb), .22); } html[data-theme="light"] .hero-signature::after { background: linear-gradient(90deg, transparent, #1e5eff 28%, transparent); } /* 3.6 卡片：深色稿靠「比底色更亮」区分层级，浅色稿改靠「比底色更白 + 投影」 */ html[data-theme="light"] .tag { background: rgba(255, 255, 255, .96); border-color: var(--qz-line); color: var(--qz-text-2); box-shadow: 0 10px 26px -16px rgba(15, 23, 42, .40); } html[data-theme="light"] .template-stage .tag { border-color: rgba(var(--qz-accent-rgb), .26); color: var(--qz-text-2); } /* 3.7 选区与焦点环：跟主站一致 */ html[data-theme="light"] ::selection { background: rgba(var(--qz-accent-rgb), .18); color: var(--qz-text); } /* ========================================================================== §4 图形可见性修正 机械翻译把深色图形也按「面板」处理，映射成了近白的面色，浅底上会消失。 以下是必须保持可见的线条 / 光柱 / 圆点 / 波形，逐条指回品牌色或中性灰。 ========================================================================== */ /* 4.1 静默态波形与线条：设计稿用深灰/暗灰画「安静、无信号」，机械翻译把 4×8px 的小色块当成面板映射成了白色，浅底上直接消失，这里指回中性灰。 注意 .record-wave 与 .clean-wave 是「有声音」的活动态（设计稿为青蓝 #69d5ff / #72d9ff），不在这里降灰，保持品牌蓝。 */ html[data-theme="light"] .demo-wave i { background: #cbd5e1; } html[data-theme="light"] .status-dot { background: #94a3b8; } html[data-theme="light"] .ui-line { background: #e2e8f0; } html[data-theme="light"] .meter-track { background: #e2e8f0; } html[data-theme="light"] .speaker-pills span { background: #f1f5f9; color: #475569; } html[data-theme="light"] .speaker-pills span:first-child { color: var(--qz-accent); } html[data-theme="light"] .edge-bottom::after { background: radial-gradient(circle, #cbd5e1 0 1.4px, transparent 1.8px) 0 0/9px 7px repeat-x; } /* 4.2 录音中的指示点：设计稿是红色，机械翻译成淡蓝会丢掉「正在录音」的语义 */ html[data-theme="light"] .record-trigger.is-recording::before { background: var(--qz-warn); box-shadow: 0 0 14px rgba(229, 72, 77, .45); } html[data-theme="light"] .demo-panel.recording .status-dot { background: var(--qz-warn); box-shadow: 0 0 12px rgba(229, 72, 77, .50); } /* 4.3 竖向连接光束：渐变中间停靠点被映射成了浅面，指回品牌色 */ html[data-theme="light"] .software-steps::before { background: linear-gradient(transparent, rgba(var(--qz-accent-rgb), .55), transparent); } /* 4.4 三处「核心球体」：中心到外圈原本是亮青 → 深黑，浅底上外圈被映射成白色 后与底色融为一体，整个球消失。重新给一圈品牌蓝的实心核 + 柔和外晕。 */ html[data-theme="light"] .twin-core { background: radial-gradient(circle at 38% 30%, #ffffff 0 4%, var(--qz-accent) 13%, rgba(30, 94, 255, .28) 46%, rgba(30, 94, 255, .06) 100%); } html[data-theme="light"] .memory-core { background: radial-gradient(circle at 35% 25%, #ffffff 0 6%, var(--qz-accent) 40%, rgba(30, 94, 255, .16) 78%); } html[data-theme="light"] .knowledge-node.core { background: radial-gradient(circle at 38% 30%, #6a50f0, var(--qz-accent) 65%); } /* 球体上的文字同步转为白字，否则蓝底蓝字 */ html[data-theme="light"] .knowledge-node.core { color: #ffffff; } html[data-theme="light"] .memory-core strong, html[data-theme="light"] .memory-core span { color: #ffffff; } html[data-theme="light"] .engine-core::before { color: var(--qz-accent); } /* 4.5 场景卡：四张卡的底原本是「深色渐变 + 色相微差」，浅底上被压成同一片近白， 卡片之间失去区分。改为一律白卡 + 各自的品牌色晕，靠色晕保留原来的差异。 */ html[data-theme="light"] .scene { background: #ffffff; } html[data-theme="light"] .scene:nth-child(1)::before { background: radial-gradient(circle at 54% 35%, rgba(30, 94, 255, .12), transparent 38%), linear-gradient(160deg, #ffffff, #f1f5f9 76%); } html[data-theme="light"] .scene:nth-child(2)::before { background: linear-gradient(135deg, rgba(30, 94, 255, .08), transparent 42%), linear-gradient(155deg, #ffffff, #f1f5f9 72%); } html[data-theme="light"] .scene:nth-child(3)::before { background: radial-gradient(circle at 28% 34%, rgba(106, 80, 240, .10), transparent 36%), linear-gradient(145deg, #ffffff, #f1f5f9 75%); } html[data-theme="light"] .scene:nth-child(4)::before { background: linear-gradient(12deg, rgba(30, 94, 255, .04) 0 9%, transparent 9% 18%), linear-gradient(150deg, #ffffff, #f1f5f9 72%); } html[data-theme="light"] .scene-viz { /* ★ 第 32 轮：描边与字色全部按实测对比度选值（场景底 #ffffff，带 radial 蓝晕处合成值 rgb(228,236,255)）： --sc-mid #64748b → 4.76 / 4.02:1 承载形状的所有描边（上一版是 1.02–1.37:1） --sc-accent #1e5eff → 5.12 / 4.33:1 每张卡的主角 --sc-ink #0f172a → 17.9:1 关键数字与正文 --sc-soft #78828f → 3.72 / 3.56:1 "体"的填充（课桌、稿件占位条）。 上一版是 #cbd5e1 = 1.48:1 —— 21 张课桌 等于没画，和第 07 节旧画法的 1.02:1 是同一类 毛病：形状"在"，但眼睛看不见。 --sc-hair rgba(100,116,139,.32) → 1.51:1 仅卡内分隔线 */ --sc-ink: #0f172a; --sc-accent: #1e5eff; --sc-mid: #64748b; --sc-soft: #78828f; --sc-fill: #f8fafc; --sc-white: #ffffff; --sc-accent-tint: rgba(30,94,255,.07); --sc-hair: rgba(100,116,139,.32); --sc-check: #ffffff; } /* 4.6 页脚：主站是浅底，页脚只留一条细分隔线 */ html[data-theme="light"] .footer { border-top-color: var(--qz-line); color: var(--qz-text-3); } /* 4.7 淡蓝冰卡上的说明文字 机械翻译给这些说明字统一用了 --qz-text-3（#64748b），但它们的底是品牌淡彩 #eef1ff —— 对比度只有 4.23:1，差一点点够不到 AA 的 4.5:1。这几类卡片的 正文与小字统一压深一档到 #475569（实测 6.7:1）。 */ html[data-theme="light"] .summary-card p, html[data-theme="light"] .summary-panel header span, html[data-theme="light"] .summary-block p, html[data-theme="light"] .recall-card small, html[data-theme="light"] .recall-card > p, html[data-theme="light"] .recall-list li { color: #475569; } /* 4.8 两处「深字压品牌蓝底」：对比度仅 3.49:1，是真的读不清。 成因：原设计这两处是「浅色面 + 深字」，机械翻译把面翻成了品牌蓝， 字却留在深色。按主站习惯改成品牌蓝底 + 白字（5.12:1）。 */ html[data-theme="light"] .twin-tab.active { color: #ffffff; background: var(--qz-accent); border-color: transparent; } html[data-theme="light"] .memory-search button { color: #ffffff; background: var(--qz-accent); } /* ========================================================================== §5 关键帧 关键帧是全局作用域，无法用选择器隔离 —— 直接用原名重定义会连深色稿一起改掉。 因此另起 <原名>L，并在浅色层把 animation-name 重新指过去，深色稿保持原样。 ========================================================================== */ @keyframes breatheL { 50% { transform: scale(1.035); box-shadow: 0 0 50px rgba(30, 94, 255, .22), 0 0 150px rgba(30, 94, 255, .14); } } @keyframes buttonBreatheL { 0%, 100% { box-shadow: 0 0 0 4px rgba(30, 94, 255, .06), 0 0 14px rgba(30, 94, 255, .12); } 50% { box-shadow: 0 0 0 7px rgba(30, 94, 255, .08), 0 0 25px rgba(30, 94, 255, .22); } } @keyframes badgePulseL { 50% { box-shadow: 0 0 25px rgba(30, 94, 255, .22); } } @keyframes assetWaveL { to { height: 52px; background: #1e5eff; } } @keyframes softwareStepGlowL { 0%, 18% { border-color: rgba(30, 94, 255, .70); box-shadow: 0 0 22px rgba(30, 94, 255, .16); color: var(--qz-accent); } 23%, 100% { border-color: rgba(15, 23, 42, .12); box-shadow: none; color: var(--qz-text-2); } } @keyframes twinAvatarFloatL { 50% { transform: translateY(-5px); filter: saturate(1) contrast(1.07) drop-shadow(0 0 12px rgba(30, 94, 255, .18)); } } html[data-theme="light"] .twin-core { animation-name: breatheL; } html[data-theme="light"] .record-trigger { animation-name: buttonBreatheL; } html[data-theme="light"] .output-card.ready .output-badge { animation-name: badgePulseL; } html[data-theme="light"] .record-wave i { animation-name: assetWaveL; } html[data-theme="light"] .software-step-icon { animation-name: softwareStepGlowL; } html[data-theme="light"] .twin-avatar { animation-name: twinAvatarFloatL; } /* ========================================================================== §6 模块布局与常见问题 -------------------------------------------------------------------------- 6.1 区块纵向节奏：设计稿桌面端每个区块上下各留 140–165px，两个区块相接处 叠成 265–315px 的空白带（实测 hardware→workflow 295 / workflow→templates 265 / templates→twin 315 / twin→assets 300 / assets→scenes 290 / scenes→faq 270）。同一份设计稿在 ≤620px 用的是上下各 95px（相接 190px）， 说明 190–200px 才是它自己的节奏，桌面端是飘出去的。 第 15 轮先统一到相接 220px；第 17 轮把 180 / 220 / 260 三档按同一位置真渲 出来对照，180px 最稳（220 略松、260 明显飘），且更贴近设计稿自己的 190px 窄屏节奏，故收到相接 180px。只在 ≥621px 生效，窄屏沿用设计稿原值。 注：.faq 的 padding-bottom 同时决定 FAQ 到页尾 CTA（.final，自身 pt=0）的 **区块内边距**，收到 90px 后该处由 110px 变成 90px。 ★ 但它不是那一段的**视觉间距** —— .final 是 min-height + 内容居中，真正的 文字间距还要叠加居中余量（950 视口下是 90 + 192.6 = 282.6px）。见 §6.6。 6.2 区块标题左边缘：.twin 的眉题起于 123px，标题块却被 max-width:820px 居中到 303px，两者错位 180px；改为与眉题、下方面板同起 123px。 6.3 声场示意图：三处描边在翻译时被翻成 #eef1ff，与白色卡片同色而消失 （.seat 的描边、.distance-line 的 8m/4m/0m 标尺、.noise-path 的噪声线）， 同时表格面仍走内联渐变 #tableGlow（#172932→#091116），渲染成近黑梯形。 渐变的 stop-color 是表现属性，权重低于任何 CSS 规则，可直接覆盖。 ★ 第 28 轮整幅换图，本节 6 条规则**已全部删除**（那些元素本身不存在了）； 新图的着色与描边统一放在 §7.2 —— 别在这里找 `#tableGlow` / `.table-plane`。 6.4 常见问题：改为与 hilly.html 一致的卡片式手风琴——居中标题 + 白底圆角 卡片 + 右侧圆形箭头 + 首条默认展开。展开态入场动画结束在 transform:none， 不留变换盒，避免污染祖先滚动宽度。 6.5 远距收音卡片：设计稿在 ≥901px 用**三个类**的选择器 .mic .hardware-distance .distance-copy{padding:70px 70px 70px 0} 把左内边距 压成 0，文案直接贴在卡片左描边上（实测 0px）；补成 70px。 这条特异度 (0,3,0)，压得过覆盖层惯用的 (0,2,1)，必须照抄祖先链，详见该节注释。 6.6 页尾 CTA：收尾留白随视口高度线性发散，给 min-height 加上限。详见该节注释。 ========================================================================== */ @media (min-width: 621px) { /* --- 6.1 纵向节奏 ------------------------------------------------------ */ html[data-theme="light"] .hero { padding-bottom: 90px; } html[data-theme="light"] .mic, html[data-theme="light"] .app-section, html[data-theme="light"] .templates, html[data-theme="light"] .twin, html[data-theme="light"] .assets, html[data-theme="light"] .scenes, html[data-theme="light"] .faq { padding-top: 90px; padding-bottom: 90px; } /* --- 6.2 区块标题左边缘 ------------------------------------------------ */ html[data-theme="light"] .twin .section-title { max-width: 900px; margin-left: 0; } } /* --- 6.3 声场示意图 ------------------------------------------------------ */ /* ★ 第 28 轮整幅换图，本节原有的 6 条规则全部作废并删除： #tableGlow 两条（桌面渐变）、.table-plane、.seat、.distance-line、.noise-path —— 这些元素本身已经不存在了。新图的着色统一放到 §7.2，因为新类的颜色和 描边宽度是同一批实测数据算出来的，拆到两处没有意义。 保留这段历史（第 15 / 16 轮为什么这么改）：设计稿把三处描边翻译成了 #eef1ff， 与白色卡片同色，于是 .seat 的描边、8m/4m/0m 标尺、噪声线全部消失； 同时桌面仍走内联渐变 #tableGlow（#172932→#091116），渲染成近黑梯形。 渐变的 stop-color 是表现属性，权重低于任何 CSS 规则，可以直接覆盖。 修法本身没错 —— 错的是那幅画。 */ /* 6.3b 行程徽标改为单行 设计稿是「8m」在上、说明在下两行（实测占 53–116.4px）。第 16 轮把画布改成 640×520 后图形上下撑满，说明文字的底边（116.4px）正好压到第三位参会者的 头顶（85.9px），实测重叠 38.4px / 移动端 4.2px。改成同一基线的单行后整块落在 48–80px。 ★ 第 28 轮换了图，但这条不能回退成两行：新图第一处墨迹是 ENV NOISE 系列标签 （viewBox y=86 → 桌面落在面板 115.4px 处），两行徽标的底边仍是 116.4px， 会直接压上去。约束对象从「参会者的头」换成了「上带的系列标签」，结论不变。 */ html[data-theme="light"] .range-badge { display: flex; align-items: baseline; gap: 10px; top: 45px; } html[data-theme="light"] .range-badge strong { font-size: 26px; line-height: 1; } html[data-theme="light"] .range-badge small { font-size: 11px; letter-spacing: .04em; } /* --- 6.4 常见问题：与 hilly 对齐 ----------------------------------------- */ html[data-theme="light"] .faq-head { text-align: center; } html[data-theme="light"] .faq-head .eyebrow { margin-bottom: 14px; } html[data-theme="light"] .faq-head .section-title { margin: 0 auto 16px; } html[data-theme="light"] .faq-desc { margin: 0; font-size: 15px; line-height: 1.7; } html[data-theme="light"] .faq-list { display: grid; gap: 10px; max-width: 880px; margin: 48px auto 0; border-top: 0; } html[data-theme="light"] .faq-item { border: 1px solid rgba(15, 23, 42, .12); border-radius: 16px; background: var(--qz-card); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color .25s ease, box-shadow .25s ease; } html[data-theme="light"] .faq-item[open] { border-color: rgba(var(--qz-accent-rgb), .30); box-shadow: 0 16px 38px -24px rgba(15, 23, 42, .45); } html[data-theme="light"] .faq-item summary { gap: 16px; padding: 18px 22px; border-radius: inherit; } html[data-theme="light"] .faq-item summary h3 { flex: 1; min-width: 0; font-size: 1rem; font-weight: 700; color: #0f172a; } html[data-theme="light"] .faq-item summary:hover h3 { color: var(--qz-accent); } /* 设计稿的「+」换成 hilly 的圆形箭头 */ html[data-theme="light"] .faq-item summary::after { content: none; } html[data-theme="light"] .faq-cue { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(var(--qz-accent-rgb), .08); border: 1px solid rgba(var(--qz-accent-rgb), .20); transition: background .3s ease, border-color .3s ease; } html[data-theme="light"] .faq-cue::before { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin-left: -2.5px; margin-top: -3.5px; border-right: 1.5px solid var(--qz-accent); border-bottom: 1.5px solid var(--qz-accent); transform: rotate(45deg); transition: transform .3s ease; } html[data-theme="light"] .faq-item[open] .faq-cue { background: var(--qz-accent); border-color: var(--qz-accent); } html[data-theme="light"] .faq-item[open] .faq-cue::before { border-color: #fff; transform: rotate(-135deg); } html[data-theme="light"] .faq-body { max-width: none; padding: 16px 22px 20px; border-top: 1px solid rgba(15, 23, 42, .10); } html[data-theme="light"] .faq-body p { font-size: .93rem; line-height: 1.9; color: #334155; } @keyframes qzUnfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } html[data-theme="light"] .faq-item[open] > .faq-body { animation: qzUnfold .3s ease both; } @media (max-width: 620px) { html[data-theme="light"] .faq { padding: 84px 0 44px; } html[data-theme="light"] .faq-list { margin-top: 34px; } html[data-theme="light"] .faq-item summary { gap: 12px; padding: 16px 16px; } html[data-theme="light"] .faq-item summary h3 { font-size: .95rem; } html[data-theme="light"] .faq-body { padding: 14px 16px 18px; } html[data-theme="light"] .faq-body p { font-size: .9rem; line-height: 1.85; } } /* --- 6.5 远距收音卡片：文案左侧留白 -------------------------------------- */ /* ★ 这条是覆盖层里唯一一处「设计稿选择器比覆盖层更具体」的情况，值得记住。 设计稿有两条同属性规则： (顶层) .distance-copy{ padding:70px; max-width:600px; width:52% } @media(min-width:901px) .mic .hardware-distance .distance-copy{ padding:70px 70px 70px 0 } 后一条是**三个类**的选择器，特异度 (0,3,0)。本文件惯用的 html[data-theme="light"] .xxx 只有 (0,2,1) —— 特异度先比「类 / 属性」那一档， 3 > 2，类型数再多也补不回来。所以只写 `.distance-copy` 是压不过去的（实测过， 写了等于没写）。这里沿设计稿自己的祖先链补足类数： html[data-theme="light"] .mic .hardware-distance .distance-copy → (0,4,1) ✓ 同类做法本文件早有先例：§2 的 .demo-panel.recording .demo-wave i、 .output-card.ready .output-badge、.flat-product-wrap.recording .flat-product-shell， 都是照抄设计稿的祖先链再叠主题前缀。 左内边距为 0 为什么会出问题：.room 是 position:absolute;inset:0 的背景层， 不占 flex 空间，于是 .distance-copy 成了 .distance-card 内第一个参与布局的 flex 子项，左边缘正好落在卡片内容区左沿 = 描边内侧。实测「描边内侧 → h2 首个字 = 0px」，眉题 / 大标题 / 正文 / 标签全部贴边，而上下各有约 150px 空隙 —— 读起来是文字被边框切到，而不是刻意的出血排版（卡片有 30px 圆角 + 1px 描边， 并非通栏）。补成 70px，与设计稿自己给的其余三边一致。 为什么可以直接加、不必补偿宽度：全站是 *{box-sizing:border-box}， .distance-copy 的 width:52% / max-width:600px 是**边框盒**宽度，所以加左内边距 只让文字列从 530px 收到 460px，外框尺寸与右边缘完全不动 —— 这点很关键， 文案框右缘距右侧声场面板只有约 7px，外框一旦变宽就会压上去。 实测 h2 三行宽度 417.4 / 417.4 / 347.8px，都仍能放进 460px，断行不变。 只作用于 ≥901px：设计稿在 ≤900px 用的是 padding:55px（≤620px 为 30px）， 本来就正常，不能一起顶掉。 注：这是设计稿自身的缺陷，深色原稿同样存在；覆盖层按约定只修浅色渲染。 */ @media (min-width: 901px) { html[data-theme="light"] .mic .hardware-distance .distance-copy { padding-left: 70px; } } /* --- 6.6 页尾 CTA：收尾留白加上限 ---------------------------------------- */ /* ★ 页尾 CTA 前的空白**不是它自己的 padding** —— .final 的上下 padding 都是 0。 它来自 .final{min-height:88svh} + place-items:center 的居中余量： 视觉留白 = .faq 的 padding-bottom(90px) + (88svh − 内容高) ÷ 2 内容高是固定的（实测 450.8px），所以留白随**视口高度线性发散、没有上限**。 实测（同一份内容，只改视口高度）： 视口 950 → .final 836px → FAQ 底到眉题 282.6px 视口 1080 → .final 950.4px → 339.8px 视口 1440 → .final 1267.2px → 498.2px ← 比 CTA 内容本身还大 视口 1800 → .final 1584px → 656.6px 斜率正好是 88% ÷ 2 = 0.44：视口每高 100px，这段空白就多 44px。 §6.1 花了几轮才把区块相接压到恒定的 180px，这里却在反向放大 —— 两者互相打架。 1440 高的视口下（27" 竖屏 / 高分屏很常见），页尾前面是一片 498px 的空白托着 450px 的内容，"满屏收尾"的意图已经不成立，只剩下空。 修法：给 min-height 加一个上限。 840px 取自 950px 高视口下 88svh 的值（836px）向上取整 —— 即那个已经 看过截图、确认观感合理的尺度。改后所有视口的收尾留白都收敛到 ≈284.6px， 与 950 视口下的 282.6px 一致。 影响范围：视口高 ≤ 955px 时**完全不变** （390×844 的 742.7px、1280×900 的 792px、1440×950 的 836px 都原样保留）， 只在更高的视口上生效。故不包媒体闸门 —— 任何宽度下它都只会"收窄"。 ⚠ 这是布局属性，改后浅色稿的页尾高度与深色稿不同（同 §6.1 的区块 padding）。 */ html[data-theme="light"] .final { min-height: min(88svh, 840px); } /* ========================================================================== §7 内联图形精细化 -------------------------------------------------------------------------- §4 解决的是「图形看不见」，本节解决的是「图形不够细」。所有数值都来自 真实 Chrome 155 的实测，不是估的。 7.1 声场示意图的坐标基准 原 viewBox 620×420（比例 1.476）装进实测 508×414 的盒子（比例 1.226）， 默认 preserveAspectRatio="meet" 只能让图形占到 344px 高，上下各空 35.1px。 第 16 轮把画布改成 640×520（比例 1.231）与盒子对齐，桌面端竖直留白降到 1.6px。 ★ 第 28 轮实测这条比例只在 1440 附近成立，别的断点盒比差得很远： 390 → 0.997（竖直留白 60.6px）、620 → 1.718（横向留白 155.4px）、 1920 → 1.613，而画布自身比例恒为 1.231。这是面板 45% × (100%−128px) 的结构决定的，单一 viewBox 比例做不到全断点最优，取「最常看的桌面」为准； 其余断点的留白交给面板 insets 吸收。★ 判据要写对：留白是 meet 居中产生的 对称内边距，本身不是缺陷，真正该量的是「墨迹到面板边缘的距离」。 字号是 viewBox 单位，1 单位 = 0.794px（桌面）/ 0.497px（390 移动端）， 所以设计稿的 font-size:10 实际只有 7.9px / 5.0px，标尺数字基本读不出来。 7.2 描边实数化与距离轴配色（★ 第 28 轮新增五个类） 描边宽度按「渲染像素」定，不按 viewBox 定：桌面缩放到 0.794，所以 1.5 单位 → 1.19px、2.2 → 1.75px、3.0 → 2.38px，正好是 「脚手架 / 次信号 / 主信号」三档，且没有一档落在亚像素上 （旧的 .table-tick 是 1 单位 → 0.79px，所以发虚，已随旧图删除）。 对比度分层（白底实测）：.voice-band 的 #1e5eff = 5.12:1，是主角； .noise-band 的 #8293a8 = 3.14:1 —— 刚好过 WCAG 1.4.11 对「理解内容所必需的 图形」的 3:1，同时明显比主角轻，代表「被抑制掉的信号」； .range-axis/.range-tick 的 #a3b4c9 = 2.11:1 与 .band-base 的 #cfd9e6 = 1.43:1 是脚手架。★ 分层必须单调：5.12 > 3.14 > 2.11 > 1.43，任何一格反了都会让 「噪声」看起来比「人声」更重要。 ⚠ 两条波形都是 ，fill="none" 写在 quez.css 的基础规则里 —— 这里是更高特异度的覆盖层，只改 stroke，inherit 得到 fill:none，不要重写。 7.3 光晕 #blueGlow = feGaussianBlur(4) + feMerge，浅底上高斯只会把 2px 虚线摊成 8px 光带，读起来是「没对焦」而不是「有光」。浅色稿直接关掉 filter， 改实描边 + 实色 —— 白底上「清晰」比「发光」更贴近设计稿想表达的精准拾音。 深色稿保留原光晕（该规则作用域限定在 light）。 ★ 第 28 轮后仍带 filter 的只剩 .device-node 一个（旧图的 .voice-path 已删）。 7.4 新增元素 .knowledge-halo / .knowledge-dot（在 HTML 里带 fill="none" 或保留原深色属性值）。 ★ 第 28 轮起 .device-node / .device-led / .device-mic 三个基础值写在 quez.css 里，不再靠内联表现属性 —— 表现属性的权重低于任何 CSS 规则， 留在 HTML 里等于把「深色稿长什么样」藏在标记里，改一处要翻两个文件。 浅色稿的颜色与描边宽度在下文覆盖即可。 ★ 第 32 轮：.device-screen（旧的「通用圆角屏 + 圆点」）随插图重画一起下线， 换成 .device-mic 五麦点阵 —— 点距 12、半径 3，与第 07 节场景卡里的 「五麦录音卡片」完全同形，面板里一眼能认出「这是 Quez」，而不是一个 认不出是什么的通用盒子。原来的 1.5 描边覆盖随之删除。 ★ 第 28 轮同时删掉两条：.table-tick（桌面透视刻度）与 .pickup-zone（拾音范围弧） —— 它们服务的元素随「斜俯视会议桌」一起下线了。 7.5 知识网络 原先是 4 条 stroke-width:1 / opacity:.32 / dash 4 6 的直线，在 300 宽的 画布里淡到几乎看不见，而且端点（y=40/42）没落到节点圆心（y=48.6/52.2）。 现在给出：核心虚线光晕 + 4 条外环连线 + 4 条按实测圆心求椭圆交点的辐射线， 并给 svg 加 preserveAspectRatio="none"，让它的坐标轴与绝对定位的 HTML 节点共用同一套 % 基准。 ========================================================================== */ /* --- 7.1 标尺与刻度文字 -------------------------------------------------- */ html[data-theme="light"] .map-label { fill: #64748b; /* 原 #94a3b8 在白底上只有 2.6:1，10px 的字读不出来 */ font-size: 14px; /* → 桌面 11.1px / 390 移动端 7.0px，移动端另有放大见文件末 */ font-weight: 600; letter-spacing: .06em; } html[data-theme="light"] .map-label.accent { fill: var(--qz-accent); font-size: 17px; /* → 桌面 13.5px */ } /* ★ 第 28 轮：三个「× 空调噪声 / 键盘声 / 翻页声」原来在 HTML 层是 .noise-tags 胶囊， 靠百分比 insets 贴面板边。但画布盒比在 0.997（390）~1.718（620）之间变化，凡是被 横向留白的断点（620 / 1920 / 621–900），胶囊就必然比距离轴宽出 96~130px，百分比 救不了。移进 viewBox 后对齐是免费的，所以这里只负责「轻一档」的语气。 ⚠ 不要在这条里写 font-size —— 它比文件末的窄屏 .map-label{22px} 特异度更高， 一旦写上，窄屏反补偿就失效了（文字缩回 7px）。 */ html[data-theme="light"] .map-label.chip { font-weight: 500; /* 比刻度标签轻一档：读起来是「被消掉的噪声」而不是刻度 */ letter-spacing: .02em; /* 中文连排不需要 .06em，会撑散 */ } html[data-theme="light"] .map-label.chip .chip-x { fill: var(--qz-accent); } /* --- 7.2 描边实数化与距离轴配色（★ 第 28 轮新增五个类）------------------- */ html[data-theme="light"] .band-base { stroke: #cfd9e6; stroke-width: 1.5; stroke-dasharray: 4 5; } /* 1.43:1 参考线 */ html[data-theme="light"] .noise-band { stroke: #8293a8; stroke-width: 2.2; } /* 3.14:1 过 WCAG 1.4.11 */ html[data-theme="light"] .voice-band { stroke: var(--qz-accent); stroke-width: 3; } /* 5.12:1 主角 */ html[data-theme="light"] .range-axis { stroke: #a3b4c9; stroke-width: 1.5; } /* 2.11:1 脚手架 */ html[data-theme="light"] .range-tick { stroke: #a3b4c9; stroke-width: 1.5; } /* --- 7.3 浅色稿关掉光晕，换实描边 ---------------------------------------- */ html[data-theme="light"] .device-node { filter: none; } /* --- 7.4 新增元素的浅色配色 ---------------------------------------------- */ html[data-theme="light"] .device-led { fill: var(--qz-accent); } html[data-theme="light"] .device-mic { fill: var(--qz-accent); } /* --- 7.5 知识网络 -------------------------------------------------------- */ html[data-theme="light"] .knowledge-link { stroke: rgba(var(--qz-accent-rgb), .42); stroke-width: 1.6; opacity: 1; stroke-dasharray: 5 6; } html[data-theme="light"] .knowledge-link.ring { stroke: rgba(var(--qz-accent-rgb), .22); stroke-width: 1.2; stroke-dasharray: 3 7; } html[data-theme="light"] .knowledge-halo { stroke: rgba(var(--qz-accent-rgb), .20); stroke-width: 1.4; stroke-dasharray: 4 8; } html[data-theme="light"] .knowledge-dot { fill: var(--qz-accent); } /* --- 7.6 五步工作流图标（★ 第 26 轮起本节作废）-------------------------------- ★ 这五个图标已从「内联手绘 SVG」整体换成自托管图标字体 Quez Icons， 尺寸与描边的纪律移交 §10 统一负责，本节的 svg{width:27px;stroke-width:2} 随之删除。删除的理由不只是「没用了」——而是它会变成一颗雷：将来任何人往 .software-step-icon 里放新的 svg（比如换个图标、加个角标），都会莫名其妙 被这条残留规则改尺寸和描边，而看不出是谁干的。 ★ 保留这段历史（说明「为什么当时没救回来」）： 设计稿给的是 stroke-width:1.6 配 26px 的 svg（viewBox 32），等比折算实到 1.3px —— 在浅底上细得发飘；第 25 轮把盒子放大到 27px、描边加到 2，实到 1.69px，仍然不满意。真正的原因当时没看准：问题不只在粗细，还在「手绘 path 的端点不在同一栅格上」（五个图形各自为政），以及「26px 的墨迹只占 54px 框子的 40%」。换字体同时解决了这三件事，见 §10。 */ @media (max-width: 620px) { /* 窄屏下画布按宽度缩放到 0.497（390 视口实测：盒子 318px / 640），桌面端 1.5 的描边 会掉回 0.75px —— 又变回亚像素发虚，等于 §7.2 白做。这里按 0.794/0.497 ≈ 1.60 的 倍数反补偿，让实到宽度与桌面端同档。标尺文字同理，要单独放大才读得出来。 */ html[data-theme="light"] .map-label { font-size: 22px; } /* → 10.9px */ html[data-theme="light"] .map-label.accent { font-size: 27px; } /* → 13.4px */ html[data-theme="light"] .band-base { stroke-width: 2.4; } /* → 1.19px */ html[data-theme="light"] .noise-band { stroke-width: 3.5; } /* → 1.74px */ html[data-theme="light"] .voice-band { stroke-width: 4.8; } /* → 2.39px */ html[data-theme="light"] .range-axis { stroke-width: 2.4; } /* → 1.19px */ html[data-theme="light"] .range-tick { stroke-width: 2.4; } /* → 1.19px */ html[data-theme="light"] .device-node { stroke-width: 2.4; } /* → 1.19px（基础是 1.5 → 0.75px）*/ /* 设计稿窄屏把画布的左右内缩压到 2px，标尺数字会被顶到紧贴面板边框。 放宽到 6px —— 再多会连带把图形缩小（10px 时缩小 5%），不划算。 */ html[data-theme="light"] .sound-map { inset: 54px 6px 90px; width: calc(100% - 12px); height: calc(100% - 144px); } } /* ========================================================================== §8 大屏适配（第 20 轮） -------------------------------------------------------------------------- 问题：页面在 ≥1600px 的屏幕上「两边很空」。实测内容容器恒为 1180px， 占视口比例一路下滑 —— 1440 → 81.9% / 1920 → 61.5% / 2560 → 46.1% / 3440 → 34.3%，两侧留白 130 / 370 / 690 / 1130px。 根因：整份设计稿没有任何 >901px 的媒体查询，也没有第二个容器变量 —— quez.css 的 :root{--max:1180px} 是唯一杠杆，且全文只有 .wrap 消费它 （width:min(var(--max),calc(100% - 48px))）。导航是 .wrap.nav-inner， 10 个 section 与页尾也都各有一层 .wrap，所以改这一处 = 整页同步， 不需要逐块调整。 本节只做两件事： 8.1 内容容器：由 1180px 定宽改为「流量 + 上限」。 8.2 硬件影片：给 aspect-ratio:16/9 补一条「不得超过视口」的护栏。 ★ 为什么不顺手放大字号、或把正文一起拉宽（这是最容易做错的地方） · 字号：所有标题的 clamp() 上限在 1215–1367px 视口就已触顶 （.hero h1 上限 142px、.big-stat 160px、.section-title 82px、.mic-copy h2 88px、 .final h2 170px），实测 1440/1920/2560/3440 四个宽度下 h1 计算值恒为 142px。 但「字号刻度封顶 + 容器自适应」本身是一种合法的设计口径，放大字号属于 审美取舍而非缺陷修复，故本轮不自决，作为可选项列进交付说明。 · 正文：本页正文本来就已经偏宽（.faq-body p 实测 834px / 14.9px ≈ 56 字/行， 中文舒适区 30–40 字），继续拉宽会越过 60 字/行。 但实测发现设计稿自带「按块封顶」的正文纪律，加宽容器几乎伤不到可读性： .faq-list 880px、.software-showcase 1000px、.app-head 800px、 .assets-overview p 660px、.mic-copy 内正文 670px 全部已带 max-width， 且都带 margin:auto 居中 —— 容器变宽只会让它们两侧留白变大，正文测度不变。 逐元素 A/B 复核：630 个元素里真被拉宽且装正文的只有 3 个，且都是单行短文 （.hardware-footnote 23 字 / .capability-note 12 字 / .faq-desc 13 字）， 用 Range.getClientRects() 量「文字实际包围宽」实测 322→322 / 168→168 / 149→149px 完全不动 —— 盒变宽，字不动。 ⚠ 只改浅色稿。--max 定义在 :root（深色稿同源），本节用 html[data-theme="light"] 覆盖，深色稿仍是 1180px。取舍同 §6.1 的区块 padding 与 §6.6 的页尾高度。 ========================================================================== */ /* --- 8.1 内容容器：1180px 定宽 → 80vw 流量 + 1640px 上限 ------------------ clamp(1180px, 80vw, 1640px) 是一个连续函数，三段交界处首尾相接，不存在跳变： 视口 ≤ 1474px → 下限 1180px 生效（80vw ≤ 1180）……与改前逐像素相同 1475 – 2050px → 80vw 生效（1475 × 0.8 = 1180，2050 × 0.8 = 1640） 视口 ≥ 2051px → 上限 1640px 生效 ★ 关键收益：1440 以及 1280 / 900 / 620 / 390 全部落在第一段，容器实宽仍是 1180px —— 本轮改动对手机端与常见笔记本**完全不可见**，回归风险集中在大屏。 ⚠ .wrap 是 min(var(--max), calc(100% - 48px))（≤620px 还有一个 -28px 变体）， --max 只在「比 100% - 48px 小」时才起作用；窄屏永远由 100% 决定， 所以下限再怎么调都碰不到手机端。 实测占比（容器宽 / 视口宽 · 两侧留白）： 1440 1180 → 1180 81.9% → 81.9% 130 → 130 （不变） 1600 1180 → 1280 73.8% → 80.0% 210 → 160 1920 1180 → 1536 61.5% → 80.0% 370 → 192 2560 1180 → 1640 46.1% → 64.1% 690 → 460 3440 1180 → 1640 34.3% → 47.7% 1130 → 900 上限取 1640 而不是继续放宽：≥2050px 之后两侧留白属于「有意收口」，这是主流官网 的通行做法；再宽会让 .mic-layout 的左栏（0.92fr）变成一条 790px 宽、只放一个 88px 标题的空带。 */ html[data-theme="light"] { --max: clamp(1180px, 80vw, 1640px); } /* --- 8.2 硬件影片：给 aspect-ratio:16/9 补一条视口护栏 -------------------- 实测（2560px 视口 · 逐元素 A/B diff · 动画已冻结 · 容器 1180 → 1480）： 全页 630 个元素里只有 1 个真正被撑高 —— .hardware-video-wrap / .hardware-video 662.6 → 831.4px （+168.8） .hardware-film（含工具条与脚注的外框） 778.8 → 947.5px （+168.7） .mic 区块 / main / 文档高 各 +142.4px 原因是 .hardware-video-wrap 只有 aspect-ratio:16/9、没有高度上限， width:100% 一变就等比放大。容器放宽到 1640px 后影片到 1638×921 —— 在宽而高的大屏上这正是想要的效果，但在「宽 + 矮」的视口（2560×900 之类） 画面会高出视口，滚到影片时永远看不全整幅。 （同一次 A/B 里 circle / span.meeting-pulse / span.wave / div.engine-orbit 的高度出现 ±50–90px 的大幅变化，把动画冻结后全部消失 —— 那是动画相位差， 与 --max 无关，未做任何处理。） ★ 护栏口径（可证伪的一句话）：影片的 16:9 **画面**高度不得超过 「视口高 − 68px」，68px 即 .nav 的固定高度。也就是说滚到影片时， 整幅画面能完整落在导航条下方，不必为了看全画面再滚一次。 换算成宽度即 (100svh - 68px) × 16 / 9。 外框（.hardware-film）比画面多 2px 边框与 116.2px 的工具条 + 脚注， 那两段不在护栏口径内 —— 护栏只保证画面本身。 ★ 为什么余量取 68px 而不是更大：护栏必须对**已经在跑的视口**是空操作。 实测外框的「工具条 + 脚注」恒定 116.2px（1180 容器下 778.8 − 662.6 = 116.2， 1480 容器下 947.5 − 831.4 = 116.1，与容器宽无关），而 1440×800 这一档 留给影片的余量本来就只有 800 − 778.8 = 21.2px。所以任何比 68px 大的余量 都会翻开已经验收过的视口：取 140px 时 1440×800 会把影片从 1180 压到 1173px （本文档初稿就是这么写的，实测后被改掉）。 实测触发阈值： · 容器 1180（视口宽 ≤1474，即 1440 / 1280 / 900 / 620 / 390） → 视口高 ≥ 732px 一律不触发 · 容器 1640（视口宽 ≥2051，即 2560 / 3440） → 视口高 ≥ 991px 一律不触发 故 1440×900 / 1440×800 / 1280×800 / 900×800 / 620×900 / 390×844， 以及 1920×1080 / 2560×1080 / 3440×1080 / 3440×1440 全部逐像素不变； 它只在真正的病态组合下生效，例如 2560×900（影片 1638 → 1479 宽， 画面高 921 → 831）与 1280×720。 margin-inline:auto 让收窄后的外框居中（不碰 margin-top:74px）；帧宽仍是 100% 时 auto 不产生位移，等于空操作。 */ html[data-theme="light"] .hardware-film { max-width: min(100%, calc((100svh - 68px) * 16 / 9)); margin-inline: auto; } /* ========================================================================== §9 页尾 CTA 点击失效修复（装饰伪元素吞掉点击） ========================================================================== 现象：页尾「联系我们 ↗」与「返回顶部 ↑」两个按钮点不动 —— 鼠标按下去没有任何反应， scrollY 不变、location.hash 不变。程序化 a.click() 却是好的，所以一开始 没能复现（见下方 ★ 方法学）。 ★ 病灶：设计稿 .final::before 是「页尾文案背后的一团蓝光」，它同时具备两个条件 ① position:absolute（quez.css L36，花括号深度 0，不在任何 @media / @layer 内） ② pointer-events 默认 auto 于是它落进「定位后代」这一绘制层。CSS 绘制顺序里，定位后代（第 8 步）永远压在 常规流内容（第 4 步：块级/inline 内容）之上。这团 820×520 的光晕因此整体盖在 .wrap 及其内部的 上，把点击命中吃掉了。 ★ 实测证据（1440×900 · Chrome headless + CDP · 真实鼠标点击 Input.dispatchMouseEvent）： light 点前 scrollY 11431 → 点后 11431 hash="" ★ 不生效 dark 点前 scrollY 12064 → 点后 12064 hash="" ★ 不生效 同一坐标 elementFromPoint 返回 section.final（即伪元素的宿主），而不是 a.btn。 elementsFromPoint 命中栈为 ["section.final","a.btn","div.actions","div.wrap.reveal"] —— 祖先排在后代之上，这在常规层叠里不可能出现，只有伪元素能做到。这就是判定依据。 ★ 几何重叠（文档坐标）： .final y 11139 – 11931 h 792（§6.6 的 min(88svh, 840px)） .final::before x [310,1130] y [11275,11795] 820×520 @ top:136px / left:310px 页尾「返回顶部 ↑」 x [ 729, 837] y [11715,11761] → 按钮完全落在光晕里。在 6 个不同滚动位置（视口 0.2 / 0.35 / 0.5 / 0.65 / 0.8 / 0.95） 复测，命中值恒为 section.final —— 说明这不是动画相位差，而是稳定的层叠结果。 ★ 反证（A/B 对照）：只注入一条 .final::before{pointer-events:none}， 立即 elementFromPoint → a.btn；真实点击 scrollY 11431 → 0，hash 变 #top。✓ ★ 为什么不是 position:relative（本文档初稿写错了，实测推翻）： 初稿的推理是「.final 没有定位，所以把光晕圈进 .final 即可」。实测发现 quez.css L17 已经有 section{position:relative}，而 .final 正是一个
—— 它本来就是这团光晕的包含块，光晕早就被 .final 自己的 overflow:hidden 裁在内部。 也就是说 containment 一直在生效，缺的只有 hit-testing。 推论：给 .final 再加 position:relative 是空操作，救不了这个 bug。 ★ 为什么不改绘制顺序（把光晕挪到文案下面）：绘制顺序确实让光晕盖在页尾文案上， 但那是设计稿本身的效果（原值 rgba(50,167,220,.18) 同样盖在文案上）， 属于刻意的「一层光膜」。本修复只恢复可点性，不改一个像素 —— 这是功能修复该有的性质。 ★ 方法学（为什么最初没复现）： ① 用 b.click() 程序化点击 → 绕过 hit-testing，9/9 全过，把 bug 掩盖了。 必须用 Input.dispatchMouseEvent 走真实命中测试。 ② scrollIntoView 之后立刻取 elementFromPoint，渲染树还没更新，读到旧值。 必须等 ~400ms。 ③ 判「可点」时写成 hit===el || el.contains(hit) || hit.contains(el) —— 最后那半句 hit.contains(el) 会把「祖先伪元素压在自己身上」判成可点， 正好把要抓的 bug 放过。正确口径只有 hit===el || el.contains(hit)。 ★ 为什么只作用浅色：深色稿已拍板不做（2026-10-15），本页不存在第二套渲染， 所以这条规则只要浅色正确就够了。前缀保留的理由是**特异度**（见文件头「机制」）， 不是「为了保住深色」。 深色里同一缺陷仍存在（实测 12064 → 12064）—— 知道即可，不用修。 万一将来真要做深色，把 .final::before{pointer-events:none} 写进 quez.css 末尾 「本站集成层」即可（该段本来就是本仓库追加、不覆盖上方设计稿规则）。此项已随 「不做深色」一并结案。 ★ 同类风险已排查，不做超范围改动：设计稿里共有 31 条 position:absolute 的伪元素规则， 只有 3 条带 pointer-events:none（.flat-product-shell::after / .hardware-video-wrap::after / .software-phone::before）。对全站 45 个交互元素逐点做命中审计（元素摆到视口 55% 处， 避开顶部固定导航条），只有页尾这两个 CTA 真正被压住 —— 其余那些大尺寸伪元素 （.hero::before 780×560、.phone-stage::before 620×620 等）没有出问题，原因是 设计稿给它们的子元素另配了 .scene>*{position:relative} 之类把子元素抬到上层。 */ html[data-theme="light"] .final::before { pointer-events: none; } /* ========================================================================== §10 图标字体 Quez Icons（第 26 轮）---------------------------------------- 软件优势段的五个流程图标，从「内联手绘 SVG」改为「自托管子集图标字体」。 --------------------------------------------------------------------------- 一、为什么换 --------------------------------------------------------------------------- 原来的五个图标是我按设计稿手绘的 32 栅格 path。上一轮刚补过描边（§7.6）， 还是「丑」。拆开看，丑的不是形状本身，是三层纪律问题： ① 尺寸 —— 图标墨迹在 54px 的框子里只占 40%，看着空、发飘。 上一轮把 svg 从 26px 放大到 27px，只是隔靴搔痒。 ② 笔重 —— stroke-width:1.6 写在 viewBox 32 里，缩到 26px 实到 1.3px， 浅底上几乎立不住；补到 2 也只有 1.69px。 ③ 栅格 —— 五个图形是用 path 手绘的，每个 path 的起止点各自为政， 线长、端点、圆弧半径都不在同一套栅格上 —— 单看一个还行， 五个竖着排一列，「不齐」就藏不住了。这是手绘 SVG 的天花板。 换成 Tabler Icons（MIT）的官方字形后，三个问题一起消掉：字形本来就画在 统一的 24 栅格上、统一 2px 描边、统一圆端点。五个摆一列才是一套。 --------------------------------------------------------------------------- 二、为什么用「自托管子集字体」而不是别的 --------------------------------------------------------------------------- 备选与取舍： · 内联 SVG sprite（ + ）—— 仍然是 SVG，第 ③ 条栅格问题 要靠换图形解决，不是靠换封装；而且跨文档 的样式继承有不少坑。 · 外部 CDN 图标字体（Font Awesome / Google Fonts）—— 凭空引入一个运行时 外部依赖：企业内网可能拦、CDN 会失效、还多一次第三方请求。 本仓库目前是「零 CDN 依赖」的静态站，不值得为 5 个图标破例。 · 自托管子集字体（本次采用）—— 完整 Tabler webfont 是 820,316 B， pyftsubset 只留用到的 5 个字形后是 1,844 B（0.22%）。随包分发， 离线可用，无运行时依赖。 --------------------------------------------------------------------------- 三、与 GEO（生成式引擎优化）的关系 —— 这种换法为什么不伤可抓取性 --------------------------------------------------------------------------- 本项目的核心约束是「AI 爬虫不执行 JS」。所以任何图标方案都必须满足： 内容以静态 HTML 出现，且不污染正文文本。本方案的三个性质： · 字形以 HTML 数字实体（ 等）直接写在 quez.html 源码里， 不经 JS 注入 —— 爬虫在原始 HTML 里读得到，与 同等待遇。 · 的文本内容是一个 PUA 私用区码位。document.body.innerText 取到它， 但它落在 CJK 汉字 / 拉丁字母 / 数字三个集合之外，不会进入站内 「JSON-LD ↔ 正文一致性」检查的比对集合 —— 不会造成关键词污染。 · 不引入任何外部域名。GEO 打分里「外部依赖」与「可离线复现性」都不受影响。 --------------------------------------------------------------------------- 四、特异度（别删前缀） --------------------------------------------------------------------------- 本节规则同样带 html[data-theme="light"] 前缀。深色稿已废弃，前缀留着不是 为了深色 —— 是为了把特异度抬到 (0,2,1)，压住 quez.css 里同名同层的旧规则 （那些规则在 quez.css L83 那一大段压缩样式里）。删掉前缀会让本节的声明被 旧规则反超。原因与全文件头注释链一致。 --------------------------------------------------------------------------- 五、字形映射（改一处必须同步两处） --------------------------------------------------------------------------- U+EAF0 microphone 录音 U+EAEC message-2 语音转写（气泡内两行字） U+F59F brain AI 理解 U+EAA2 file-text 智能总结 U+EA96 download 成果导出 改字形时的完整步骤： 1) 与设计/需求确认换成哪个 Tabler 图标名； 2) 从 @tabler/icons-webfont 的 tabler.css 里查到该图标名的码位； 3) 用 pyftsubset 重新出子集（命令见下，brotli 是 --flavor=woff2 的前置依赖）： pyftsubset tabler.woff2 \ --unicodes="U+EAF0,U+EAEC,U+F59F,U+EAA2,U+EA96" \ --flavor=woff2 --no-hinting --desubroutinize \ --output-file=fonts/quez-icons.woff2 ★ --flavor 只接受 woff / woff2 / none；写 ttf 会直接报错，要出 ttf 用 none。 4) 改 quez.html 里对应的 &#xXXXX; 实体； 5) 必须实测字形真的画出来了（见 §10 末尾的验证口径）。 --------------------------------------------------------------------------- 六、验证口径（别用 document.fonts.ready 判绿） --------------------------------------------------------------------------- document.fonts.ready 只说明「字体加载流程结束」，不说明字形画对了 —— （字体加载失败它也会 resolve）。可靠做法： · document.fonts.check("32px 'Quez Icons'") 为 true； ★ 但 check() 单独用会假绿：本文件只有一条 @font-face，实测在 CSS 尚未 进入 FontFaceSet 时 check() 照样返回 true（此时 document.fonts 是空的）。 所以必须同时看 document.fonts 里那条 face 的 status === 'loaded'。 · 每个 的 getBoundingClientRect 尺寸 ≈ font-size（不是 0）； · 截图像素比对：图标区域内必须有非背景色的墨迹像素。 只看前两条仍可能假绿（字体加载成功但码位对不上会渲染成豆腐块）， 所以第 3 条「看像素」是必须的。 ========================================================================== */ @font-face { font-family: 'Quez Icons'; /* 页面与 CSS 都在仓库根目录，所以这里是相对 CSS 文件的路径，等价于 /fonts/… */ src: url('fonts/quez-icons.woff2') format('woff2'); font-weight: 400; font-style: normal; /* block：图标宁可先空白几百毫秒，也不要先闪一版豆腐块再换。 本文件只有 1.8 KB、同源同目录，实际几乎瞬时到位。 */ font-display: block; } html[data-theme="light"] .qz-ic { font-family: 'Quez Icons'; font-style: normal; /* 默认斜体，必须显式拉回来 */ font-weight: 400; /* 32px 是量出来的，不是拍的：Tabler 字形墨迹占 em 的 83~87%、原生 24 栅格 配 2px 描边。渲染成 32px 等于把原生字形等比放大 1.33 倍 —— 笔重比不变 （2/24 × 32 = 2.67px），墨迹实测 21.5~27px，落在 54px 框里占 49%。 尺寸是这样定的：在真实页面上跑了 28 / 30 / 32 / 34 四档（截图 + 逐像素找 强调蓝墨迹的外接框），28px 占 42~45% 仍显空，34px 占 46~56% 开始顶到圆角， 32px 占 44~52%（均值 49%）最稳。旧的内联 SVG 只占 40%，所以是净放大。 */ font-size: 32px; line-height: 1; display: block; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; /* 颜色不在这里写：由 .software-step-icon 的 color 继承（浅色层是 --qz-accent， 见本文件 L391），这样换主题/换强调色不用改这里。 */ } /* ========================================================================== §11 首屏演示面板：视觉语言重构（第 29 轮） -------------------------------------------------------------------------- 起因：ikun 指「底部样式有问题 然后你刚刚设计的样式也很丑」。 ★★ 先把「丑」拆成可测的（1440×900 / dsf2 / 动画冻结 / 结果态实测）： # 问题 实测 1 面板里同时存在 5 档圆角，互不成比例 24 / 15 / 13 / 10 / 9 2 字号 8 档（9→24px），其中 9/10/14 三档脱开体系 9 / 10 / 14 是孤岛 3 .demo-options（折叠行）14px 比它所在蓝块里的正文 14 vs 10 = +40% 10px 还大 40% —— 层级倒置 4 .demo-result 底色 #eef1ff 与内部 li 的 叠色差 < 2/255，只靠 rgba(30,94,255,.07) 几乎同色 1px 描边区分 5 .demo-options 的 border-top 是灰的 灰线压在淡蓝底上 rgba(15,23,42,.10)，却画在淡蓝底上 6 用浏览器默认 marker（黑三角 ▸） 未定制 7 底部同时出现三条「收边」：蓝块自身底边 + 折叠行灰线 三个尾巴、三个字号 + 9px 脚注 8 .live-transcript 滚到底后顶部那行被切一半 截图里露出 Alex 的 （实测露出的正是它的 role 标签） role 标签「Business」 9 .demo-panel::before 是 230×230 的蓝色径向模糊， 纯装饰 + 无 且没写 pointer-events pointer-events ★ 根因不是「某一处不好看」，是这一块**根本没有材质体系**： quez.css 的 base 是从设计稿直译的，全文 22 种圆角值、24 档字号 （3/4/5/6/7/8/9/10/13/14/16/17/18/20/22/24/28/30 …一直到 72px）。 这个面板把其中最杂的一段继承了下来。所以本轮不是调参数， 是给面板一套自己的令牌，并把脱开体系的档位**删掉**。 ★ 设计口径（Linear 式：克制、高密度、可扫描）＋ 定稿后逐项回读实测 · 材质只留 3 级：面板白 #ffffff / 分区浅灰 #fafbfc / 条目纯白 #ffffff · 圆角只留 5 档：20（面板）/ 12（分区）/ 10（条目）/ 6（标签与控件）/ 999（胶囊） —— 实测面板内可见圆角恰好 6 组：上述 5 档 + 状态圆点的 50%（圆点惯例，不计入档） · 字号只留 6 档：22 / 13 / 12.5 / 12 / 11 / 10.5，**最小 10.5px（原 8px）** —— 实测恰好 6 档，无第七档。8px 只残留在「≤700px 流程轨标签」一处，已改 10.5px · 结构线只留 1 档：rgba(15,23,42,.07)，面板外框 / 分区 / 条目 / hairline / 对话分隔 全部同色；另有 1 档留给「可交互控件的边界」rgba(15,23,42,.22) —— select 需要把自己 从白面上分出来，属另一种语义角色，不并入结构线。（实测只有这 2 个值） · 装饰只留「有信息量」的：四类结果的色栏有语义，角落光晕没有 → 删。 流程轨那条 1px 竖线同样删 —— 它落在 left:0（下一格 span 的左边缘）， 而圆点在 left:5px，读起来是「圆点裂了个缺口」而不是分隔符。 · 底部从「三条收边」收敛到「一条 hairline + 一行折叠 + 一行脚注」 ★ 深/浅主题：几何与字号已同步写进 quez.css 的 base（深色存档态也读得通）， 本节负责颜色 / 材质 / 阴影 / 新元素的浅色取值。理由同 §6.1、§8： 产品路径只有浅色（「已拍板 · 只做浅色」），但 base 不能留空壳。 两处只有 base 能修的坑（浅色层救不了）： ① `.demo-result li::before` 的几何必须由 base 显式 `display:block` —— base 里老规则 `.demo-result li::before{display:none}` 会一直生效， 浅色层覆盖了 content/position/width/background 也没用（色栏整条不渲染）； ② `.block-title` 要写成 `.demo-result .block-title` —— 否则被更早的 `.demo-result strong{font-size:12px}` 抢走字号，深色态与浅色态不同档。 ========================================================================== */ /* --- 11.1 面板本体：白面 + 单一结构线 + 收住的两层阴影 -------------------- */ html[data-theme="light"] .demo-panel { border: 1px solid rgba(15,23,42,.07); border-radius: 20px; background: #ffffff; /* 两层：1px 的接触阴影给「贴在页面上」的感觉，40px 的扩散阴影给高度。 旧稿是单层 0 28px 70px rgba(...,.11) —— 太散，白卡浮在浅灰底上像块塑料。 */ box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 20px 40px -16px rgba(15,23,42,.14); } /* 右上角那块 230×230 的蓝色径向模糊不是「光」，是看不清的蓝雾。 而且它是绝对定位的伪元素、没写 pointer-events —— 属第 21 轮「装饰伪元素挡点击」 的同类风险面。本面板内容都在它下面，直接删。 */ html[data-theme="light"] .demo-panel::before { display: none; } /* --- 11.1b 面板内的文字只留两档（★ 第 31 轮回读时纠正）------------------- 第 29 轮把面板里的「次要文字」统一压到了 #94a3b8。实测下来这一档在白面/浅灰面上 只有 2.47–2.56:1 —— 面板里有 7 处文字落在这一档，包含计时器、语言组「中·英·日」、 条目计数「4 项」、说话人职务「Project Lead」、脚注、折叠行说明。这些都不是装饰， 是「分区标签」「元信息」，压到 2.5:1 等于这轮「把灰盒变成有分区的盒子」没做成。 收回 #64748b 后实测： #0f172a 17.2–17.9:1 标题 / 正文强调 #475569 7.3–7.6:1 正文 · 对话 · 折叠行 · 流程标签（active） #64748b 4.59–4.76:1 元信息 · 分区标签 · 计时器 · 脚注 · 流程标签（未达） 三档单调、最低档 4.59:1 过 WCAG AA。分隔线/箭头那类纯装饰仍可留在 #94a3b8。 ------------------------------------------------------------------------- */ /* --- 11.2 头部状态行 ------------------------------------------------------ */ html[data-theme="light"] .demo-status { color: #64748b; font-weight: 600; } html[data-theme="light"] .status-dot { background: #cbd5e1; } html[data-theme="light"] .demo-timer { color: #64748b; } html[data-theme="light"] .demo-hint { color: #64748b; } html[data-theme="light"] .demo-wave i { background: #e2e8f0; } html[data-theme="light"] .demo-panel.recording .demo-wave i { background: #1e5eff; } /* --- 11.3 分区头（转写区与整理区共用一套）------------------------------- */ html[data-theme="light"] .block-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #64748b; } /* 选择器与 base 同形（见 quez.css 的说明）：都写成 `.demo-result .block-title`， 否则两边靠层叠顺序互相压，很容易只改一层就脱档。 */ html[data-theme="light"] .demo-result .block-title { font-size: 12.5px; font-weight: 600; color: #0f172a; } html[data-theme="light"] .block-meta { font-size: 11px; color: #64748b; font-variant-numeric: tabular-nums; } /* --- 11.4 转写区：从「无标题的一张灰盒」变成有头的分区 -------------------- */ html[data-theme="light"] .console-block { border: 1px solid rgba(15,23,42,.07); border-radius: 12px; background: #fafbfc; } /* 底色/描边搬到 .console-block 之后，.live-transcript 自己必须把它们清掉 —— 不然会得到「盒中盒」的两层边框（旧稿这句是 background:#f8fafc;border:1px solid）。 两端的淡出遮罩写在 quez.css 的 base（主题无关），这里不重复。 */ html[data-theme="light"] .live-transcript { border: 0; background: transparent; color: #64748b; } html[data-theme="light"] .dialogue-line { border-bottom-color: rgba(15,23,42,.07); } html[data-theme="light"] .dialogue-speaker b { color: #0f172a; } html[data-theme="light"] .dialogue-speaker small { color: #64748b; } html[data-theme="light"] .dialogue-text { color: #475569; } /* --- 11.5 流程轨：4 个大号描边胶囊 → 一条「圆点 + 标签 + 细隔线」的轨 ---- 旧稿 4 个胶囊各占 148.5px、border 1px 蓝描边 + 蓝底 + 蓝光晕，横向撑满 612px， 是面板里第二重的一块颜色 —— 但它承载的信息只有「4 个步骤名」。 改成轨道后颜色只落在 6px 的圆点上，active 用 accent，横向份量降到最低。 */ html[data-theme="light"] .process-steps span { color: #64748b; } html[data-theme="light"] .process-steps span::before { background: #e2e8f0; } html[data-theme="light"] .process-steps span.active { /* ★ 名字用中性色、状态交给圆点：.done 态四步都会 active， 若整段文字也跟着变蓝，这一行就是四块蓝 —— 而它承载的信息只是「跑过哪几步」。 */ color: #475569; border: 0; background: transparent; box-shadow: none; } html[data-theme="light"] .process-steps span.active::before { background: #1e5eff; box-shadow: 0 0 0 3px rgba(30,94,255,.13); } /* --- 11.6 整理结果区：淡蓝大块 + 淡蓝小卡 → 浅灰面 + 纯白条目卡 ---------- */ html[data-theme="light"] .demo-result { border: 1px solid rgba(15,23,42,.07); border-radius: 12px; background: #fafbfc; color: #0f172a; } /* 四类结果用「左侧 2px 色栏 + 同色小胶囊标签」区分，不给整张卡上色 —— 整张上色会让 4 张卡互相比谁更显眼，读者第一眼看到的是颜色不是内容。 ★ cat 由 buildSummary() 写进 li.dataset.cat；未知类目落到 neutral。 */ html[data-theme="light"] .demo-result li { border: 1px solid rgba(15,23,42,.07); border-radius: 10px; background: #ffffff; box-shadow: 0 1px 1px rgba(15,23,42,.03); color: #475569; --cat: #475569; --cat-bg: rgba(71,85,105,.08); } /* 色栏的几何（content / display / position / left / top / bottom / width）全部在 quez.css 的 base 里 —— 见该处注释，浅色层只负责颜色，避免 display 漏覆盖。 */ html[data-theme="light"] .demo-result li[data-cat="decision"] { --cat: #1e5eff; --cat-bg: rgba(30,94,255,.09); } html[data-theme="light"] .demo-result li[data-cat="action"] { --cat: #0f766e; --cat-bg: rgba(15,118,110,.10); } /* 风险色 #b45309 → #a34a08：10.5px 的胶囊标签要按小字算 AA（4.5:1）， #b45309 配 rgba(...,.10) 底实测只有 4.39:1，色相不变、压深一档到 5.13:1。 */ html[data-theme="light"] .demo-result li[data-cat="risk"] { --cat: #a34a08; --cat-bg: rgba(163,74,8,.10); } html[data-theme="light"] .demo-result li[data-cat="opportunity"] { --cat: #6d28d9; --cat-bg: rgba(109,40,217,.09); } html[data-theme="light"] .demo-result li b { color: var(--cat); background: var(--cat-bg); padding: 2px 7px; border-radius: 6px; } html[data-theme="light"] .demo-result li b i { color: var(--cat); } html[data-theme="light"] .demo-result li span { color: #475569; } /* --- 11.7 底部：从「三条收边」收敛成「一条 hairline + 折叠行 + 脚注」---- 旧稿底部自上而下依次是：蓝块自己的底边 / 折叠行的灰 border-top / 9px 脚注 —— 三条线、三个字号、三种灰，像三个不相干的尾巴。 现在只留一条：整理区面内部的那条 hairline，颜色与面的边框同源 rgba(15,23,42,.07)。 折叠行升到 12.5px（与分区标题同档），脚注从 9px 升到 11.5px（内容宽度 622px 下 9px 中文只有 ~6.8px 高，是「看得见但读不出」的那一档）。 */ html[data-theme="light"] .demo-options { border-top: 1px solid rgba(15,23,42,.07); color: #475569; } html[data-theme="light"] .demo-options summary { color: #475569; font-weight: 500; } html[data-theme="light"] .demo-options summary::after { border-color: #94a3b8; } html[data-theme="light"] .demo-options label { color: #64748b; } html[data-theme="light"] .demo-options select { background: #ffffff; border: 1px solid rgba(15,23,42,.22); color: #0f172a; box-shadow: 0 1px 1px rgba(15,23,42,.03); } html[data-theme="light"] .demo-options p { color: #64748b; } html[data-theme="light"] .privacy-note { color: #64748b; }