@font-face{font-family:'Noto Serif SC';src:url('/assets/fonts/noto-serif-sc.woff2') format('woff2');font-weight:200 900;font-display:swap}@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4.woff2') format('woff2');font-weight:200 900;font-display:swap}
:root{color-scheme:light;--paper:#E9E1CE;--ink:#2B2A26;--green:#1F332C}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none;text-underline-offset:4px}a:hover{text-decoration:underline}button{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #C9A86A;outline-offset:5px}.skip{position:absolute;left:-10000px}.skip:focus{left:12px;top:12px;z-index:30;background:#F3EDDD;padding:12px}.screen{display:block;width:100%;height:100%;object-fit:contain;background:#F3EDDD;border-radius:inherit}.pending-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#4B4A44;text-align:center;padding:10px}.pending-screen small{font-size:11px}.voice-card{background:rgba(245,239,224,.06);border:1px solid rgba(245,239,224,.16);border-radius:16px;padding:22px;color:#F5EFE0;text-align:left;display:flex;flex-direction:column;gap:9px;cursor:pointer;min-width:0}.voice-card[aria-pressed=true]{background:rgba(245,239,224,.13);border-color:#C9A86A}@media(hover:hover){.voice-card:hover:not(:disabled){background:rgba(245,239,224,.13);border-color:#C9A86A}}.voice-card:disabled{cursor:default}.voice-name{font-size:21px;font-family:"Songti SC",Georgia,serif}.voice-desc{font-size:13px;opacity:.7}.voice-action{font-size:13px;color:#C9A86A;margin-top:12px}[data-mode][aria-pressed=true]{background:#F5EFE0!important;color:#1F332C!important}[data-mode][aria-pressed=false]{background:transparent!important;color:#F5EFE0!important}#voice-audio{display:block;width:min(90%,700px);margin:0 auto 40px}#voice-audio[hidden]{display:none}details{border-bottom:1px solid rgba(43,42,38,.15);padding:20px 0}summary{cursor:pointer;font-size:17px;font-weight:600}details p{font-size:15px;line-height:1.8;color:#4B4A44;margin:14px 0 0}.doc-header{background:var(--green);color:#F5EFE0}.doc-header nav{max-width:1160px;margin:auto;padding:20px 28px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}.brand{margin-right:auto;display:flex;align-items:center;gap:12px;font-family:"Songti SC",Georgia,serif;font-size:20px}.brand img{border-radius:8px}.document{max-width:850px;margin:0 auto;padding:65px 28px 90px;line-height:1.9;overflow-wrap:anywhere}.document h1{font:600 clamp(32px,5vw,48px)/1.3 "Songti SC",Georgia,serif;margin:0 0 40px}.document h2{font:600 25px/1.4 "Songti SC",Georgia,serif;margin:42px 0 18px}.document h3{font-size:18px;margin:30px 0 12px}.document a{color:#4A6A80;text-decoration:underline}.document ul,.document ol{padding-left:24px}.document li{margin:9px 0}.document blockquote{border-left:3px solid #C9A86A;margin:20px 0;padding:12px 20px;background:#F3EDDD}.document table{border-collapse:collapse;display:block;overflow-x:auto}.document th,.document td{padding:12px;border:1px solid #bdb6a5}.document code{font-size:.9em;background:#DED4BC;padding:2px 4px;border-radius:3px}
@media(max-width:700px){header>div{gap:14px!important}header nav{order:3;width:100%;margin:0!important;gap:15px!important;font-size:13px!important}#features>div[style*="grid"],#devices>div[style*="grid"],#pricing>div[style*="grid"],#faq>div[style*="grid"],#voices div[style*="grid"]{grid-template-columns:1fr!important}#top>div{padding-top:54px!important}#top h1{font-size:clamp(42px,10vw,68px)!important}#top p{font-size:17px!important}#devices>div[style*="align-items:flex-end"]{gap:10px!important}#devices .pending-screen small{display:none}#devices .pending-screen{font-size:10px;padding:0}#local>div{gap:28px!important}.doc-header nav{gap:15px}.document{padding-top:40px}}
.document{max-width:760px;padding:56px 28px 96px;line-height:1.75}.document h1{font-size:clamp(32px,4.5vw,44px);margin-bottom:20px}.document h2{font-size:22px;margin:44px 0 12px;padding-top:24px;border-top:1px solid rgba(43,42,38,.14)}
.hero-title{display:flex;justify-content:center;flex-wrap:wrap;max-width:100%}.hero-title span{white-space:nowrap}html[lang="en"] .hero-title{max-width:min(16ch,100%)}html[lang="en"] .hero-title span{white-space:normal;text-wrap:balance}html[lang="zh-Hans"] .hero-title{flex-wrap:nowrap}
.voice-name,.brand,.document h1,.document h2{font-family:'Noto Serif SC','Source Serif 4',Georgia,serif}
/* 分隔线与紧随其后的 h2:h2 自带 border-top,若前面还有 <hr> 会出现两条线夹一段空白。
   这里给 hr 统一描边,并让 hr+h2 让出自己的上边框,使其与其它小节的节奏完全一致(一条线)。 */
.document hr{border:0;border-top:1px solid rgba(43,42,38,.14);margin:44px 0 0}
.document hr+h2{border-top:0;padding-top:0;margin-top:24px}
.hero-devices{display:grid;grid-template-columns:minmax(0,250px) minmax(0,280px) minmax(0,250px);gap:24px;align-items:start;justify-content:center;margin-top:48px;width:100%;max-width:900px;height:min(460px,52vw);padding:0 16px;overflow:visible}
.hero-device{min-width:0;border-radius:38px;background:#0F1A16;padding:8px;box-shadow:0 12px 28px rgba(0,0,0,.14);transform:translateY(80px)}.hero-device-main{border-radius:42px;padding:9px;transform:translateY(20px)}
#top .screen{height:auto;object-fit:contain;border-radius:30px}
/* 图片按自身比例决定屏幕高度；外框只增加边缘厚度，不给截图另设高度或宽高比。 */
#devices .screen{display:block;width:100%;height:auto;object-fit:contain;border-radius:11px}
#sample-text{margin:0;font-family:'Noto Serif SC','Source Serif 4',Georgia,serif;font-size:clamp(18px,1.7vw,22px);line-height:1.8;color:#F5EFE0;max-width:100%;text-wrap:pretty}.voice-name{font-size:18px}
.plan-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}.plan-heading h3{margin:0;font-size:24px;font-weight:600}.plan-heading>span{font-size:15px;opacity:.8}.trial-details{border-top:1px solid rgba(245,239,224,.15);padding-top:18px}.trial-details h4{margin:0 0 10px;font-size:16px}.trial-details ul{margin:0;padding-left:18px;font-size:14px;line-height:1.7;opacity:.85}.trial-details li+li{margin-top:6px}
@media(max-width:540px){html[lang="zh-Hans"] .hero-title{flex-direction:column;gap:.07em}#devices>div[style*="align-items:flex-end"]{gap:2%!important}#devices .device-frame{border-radius:7px!important;padding:2px!important}#devices .screen{border-radius:5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Two independent FAQ columns, matching the Trace support layout's reading order. */
.support-content{max-width:1160px;margin:0 auto;padding:72px 28px 88px;display:flex;flex-direction:column;gap:36px}
.faq-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px);align-items:start}
.faq-column{min-width:0}.faq-column details{padding:0}.faq-column details:first-child{border-top:1px solid rgba(43,42,38,.15)}
.faq-column summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0;line-height:1.55}.faq-column summary::-webkit-details-marker{display:none}.faq-column summary::after{content:'+';font-weight:400;color:#4A6A80;flex:none}.faq-column details[open] summary::after{content:'−'}
.faq-column details p{margin:0 0 22px;overflow-wrap:anywhere}
@media(max-width:800px){.faq-columns{grid-template-columns:1fr}.faq-column+.faq-column details:first-child{border-top:0}.support-content{padding:56px 24px 64px}}
/* 首屏三台 iPhone（2026-09-18 负责人：手机上截图下方露出太多，要与 macOS 一致）。
   桌面满宽时：列宽 250 : 280 : 250、间距 24、高 460、两侧下移 80、中间下移 20，截图露出约 73% / 75% / 73%。
   窄于满宽（916px）时整组按「内容宽 / 828」等比缩小（828 = 250 + 280 + 250 + 2 × 24），露出比例与桌面相同。
   原先窄屏三台等宽、高度 52vw / 60vw、下移量固定，手机上中间一台整台露出、两侧约 90%。
   内容宽 = 视口 − 首屏左右内边距 56 − 本容器左右内边距（桌面 32，≤540 为 12）。≤540 仍用细边框与小圆角。 */
@media(max-width:915px){.hero-devices{grid-template-columns:minmax(0,25fr) minmax(0,28fr) minmax(0,25fr);gap:calc((100vw - 88px) * 24 / 828);height:calc((100vw - 88px) * 460 / 828)}.hero-device{transform:translateY(calc((100vw - 88px) * 80 / 828))}.hero-device-main{transform:translateY(calc((100vw - 88px) * 20 / 828))}}
@media(max-width:540px){.hero-devices{gap:calc((100vw - 68px) * 24 / 828);margin-top:24px;height:calc((100vw - 68px) * 460 / 828);padding:0 6px}.hero-device{padding:4px;border-radius:17px;transform:translateY(calc((100vw - 68px) * 80 / 828))}.hero-device-main{transform:translateY(calc((100vw - 68px) * 20 / 828))}#top .hero-devices .screen{border-radius:13px}}
/* 试听一节末尾的原生播放条（player.js 载入后显示）带 40px 下边距；#voices 底部没有内边距或边框，
   这段边距会穿出绿色底，在试听与多端之间多出一条米色空隙。flow-root 让它留在绿色底内。 */
#voices{display:flow-root}
/* 工作台关系图一行排不下（视口约 794px 以下），沿用站内 800px 断点改排。
   2026-09-18 负责人：手机上改成两部 iPhone 叠在 Mac 上，分别在左下、右下（原先 Mac 独占一行、两部 iPhone 在下一行并排）。
   两个外层 display:contents，机身框、Mac 图与三段图注直接排进同一张网格：
   第一行 Mac 占 7%–93%，两部 iPhone 各占 21% 宽、贴左右两边，底边对齐，比 Mac 图底边低一段（Mac 下边距）；
   iPhone 叠在上层（z-index），机身框在小尺寸下改细边框、小圆角（外 12 − 边 3 = 内 9）、浅阴影。
   第二行三段图注各占三分之一，对着左 iPhone、Mac、右 iPhone，阅读顺序不变。整组最宽 680px。宽屏不受影响。 */
@media(max-width:800px){#workbench .wb-flow{display:grid!important;grid-template-columns:7% 14% 12.33% 33.34% 12.33% 14% 7%;column-gap:0!important;row-gap:14px!important;align-items:end!important;width:100%;max-width:680px;margin:0 auto}#workbench .wb-phone,#workbench .wb-mac{display:contents!important}#workbench .wb-mac>img{grid-column:2/7;grid-row:1;margin-bottom:5%}#workbench .wb-phone>div{grid-row:1;z-index:1;padding:3px!important;border-radius:12px!important;box-shadow:0 12px 24px -10px rgba(31,51,44,.55)!important}#workbench .wb-phone>div>img{border-radius:9px!important}#workbench .wb-phone:first-child>div{grid-column:1/3}#workbench .wb-phone:last-child>div{grid-column:6/8}#workbench .wb-phone>span,#workbench .wb-mac>span{grid-row:2;align-self:start}#workbench .wb-phone:first-child>span{grid-column:1/4}#workbench .wb-mac>span{grid-column:4/5}#workbench .wb-phone:last-child>span{grid-column:5/8}}

/* ── 2026-09-17 第三轮：负责人在 iPhone Safari 上看后的手机端修正（2026-09-17 13:45 上线）──
   试听卡的悬停描边只给能悬停的设备：手机上点过的卡片会一直「悬停」，看起来像选中（反馈 pic6）。见上方 @media(hover:hover)。 */

/* 标题短语（site_builder.PHRASES）：每段不在内部换行，只在段与段之间断开；单段比一行还宽时才退回普通换行。 */
.phrase{display:inline-block}
/* 各节大标题折成两行时平衡行长（Safari 17.5+，不支持时照常按短语换行）；宽屏都是一行，不受影响。 */
main h2{text-wrap:balance}
/* 常见问题折行时平衡行长，避免末行只剩一个词（Safari 17.5+，不支持时照旧）；中文问题另由短语表保证不拆词。 */
#faq summary{text-wrap:balance}

/* 首屏标题。中文 ≤540px 两行竖排时，第一行末尾的逗号悬挂在行外、不参与居中，两行汉字对齐；逗号仍显示，读屏照读。
   英文字号随视口缩小，保证「Listen to the rest.」一行放得下，窄屏始终两行（原先 393px 以下拆成三行）。 */
@media(max-width:540px){html[lang="zh-Hans"] .hero-title .hang{display:inline-block;width:0}
html[lang="en"] #top h1{font-size:min(clamp(42px,10vw,68px),calc((100vw - 56px) / 8.8))!important}}

/* 中文定价标题：窄屏固定为「阅读免费，」/「Pro 一次买断，无需订阅」两行（负责人要求）。第二段宽约 11em，
   ≤374px 时 28px 放不下，字号随视口略缩（360 宽约 27px、320 宽约 24px），不再拆成三行。 */
@media(max-width:374px){html[lang="zh-Hans"] #pricing h2{font-size:min(28px,calc((100vw - 56px) / 11.2))!important}}

/* 首屏副标题 ≤700px 折行时平衡行长。 */
@media(max-width:700px){#top p{text-wrap:balance!important}}

/* 英文首屏下载徽标一行要 358.2px，≤429px 放不下（414 宽原先就被拆成四行）：「Coming soon」换到第二行居中。 */
@media(max-width:429px){html[lang="en"] .store-badge{flex-wrap:wrap;justify-content:center;row-gap:4px!important;text-align:center}
html[lang="en"] .store-note{flex-basis:100%;border-left:0!important;padding-left:0!important}}

/* 试听模式切换 ≤374px 两个按钮一行放不下：说明换到按钮第二行，隐藏分隔点。 */
@media(max-width:374px){#voices [data-mode]{line-height:1.3;padding:7px 14px!important}
#voices .mode-note{display:block}
#voices .mode-dot{display:none}}

/* 试听卡 ≤700px（单列时）改成紧凑卡片：名字与说明在左、播放 / 暂停在右，整张卡仍是按钮，高度不低于 64px；
   说明只在「 · 」之后换行；播放中金色描边 + 实心按钮。宽屏不变。 */
@media(max-width:700px){#voices div[style*="grid"]{gap:8px!important}
#voices .voice-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:14px;row-gap:3px;padding:12px 14px 12px 16px;border-radius:14px;min-height:64px}
#voices .voice-name{grid-column:1;font-size:17px;line-height:1.35}
#voices .voice-desc{grid-column:1;line-height:1.45}
#voices .seg{display:inline-block}
#voices .voice-action{grid-column:2;grid-row:1/span 2;margin:0;padding:6px 14px;border:1px solid rgba(201,168,106,.5);border-radius:999px;white-space:nowrap}
#voices .voice-card[aria-pressed=true] .voice-action{background:#C9A86A;color:#1F332C;border-color:#C9A86A}}

/* Mac 键盘底座：高度随 Mac 宽度等比（宽 : 高 = 45 : 1，1440 宽时仍是 11px，390 宽约 3.5px），凹槽同比。
   配色取深空黑：设计里的屏幕框是纯黑、没有铝边，与之相配的真机正面只有深色机身；银色底座配纯黑屏框像拼出来的。 */
#devices .mac-base{width:100%;aspect-ratio:45/1;position:relative;border-radius:0 0 2% 2%/0 0 90% 90%;background:linear-gradient(#5E6064,#393B3F 14%,#2A2B2E 55%,#1A1B1D)}
#devices .mac-notch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:13%;height:45%;display:block;border-radius:0 0 50% 50%/0 0 100% 100%;background:linear-gradient(#0C0D0E,#333437)}
/* ≤540px 设备框统一改 7px 圆角时，Mac 屏幕的底边仍保持直角，与底座贴合。 */
@media(max-width:540px){#devices .mac>.device-frame{border-radius:7px 7px 0 0!important}}

/* 隐私页表格（反馈 pic4/5/7/8：窄屏首列被挤成一两个字宽，英文单词被拆开）。≥768px 不变。 */
@media(max-width:767px){.document th,.document td{overflow-wrap:break-word}
.document th:first-child,.document td:first-child{min-width:7.5em}}
/* ≤540px：三列及以上的表（build.py 标 table-stack）改成每行一张小卡，列名作小标签；表头视觉隐藏，读屏仍在。两列表照旧是表格。 */
@media(max-width:540px){.table-stack table,.table-stack tbody,.table-stack tr,.table-stack td{display:block}
.table-stack table{overflow:visible}
.table-stack thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.table-stack tr{background:#F3EDDD;border:1px solid #d3cbb8;border-radius:12px;padding:12px 16px;margin:0 0 10px}
.document .table-stack td{border:0;padding:0;min-width:0}
.table-stack td:first-child{font-weight:600;margin-bottom:4px}
.table-stack td+td{margin-top:6px}
.table-stack td+td::before{content:attr(data-label);display:block;font-size:12px;line-height:1.5;color:#8A8578}}

/* 功能演示（2026-09-27 负责人确认）：首屏之后直接接视频，只有标题。有 JS 时播放前只显示中间的播放按钮（player.js 去掉原生控制条），播放后恢复；无 JS 时保留原生控制条。 */
#demo .demo-frame{position:relative;max-width:1040px;margin:0 auto;border-radius:20px;overflow:hidden;background:#EEE8DB;box-shadow:0 30px 60px -32px rgba(31,51,44,.55),0 0 0 1px rgba(43,42,38,.08)}
#demo video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#EEE8DB}
#demo .demo-play{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border:0;border-radius:50%;background:rgba(31,51,44,.92);box-shadow:0 14px 30px -12px rgba(31,51,44,.7);cursor:pointer;display:grid;place-items:center;transition:transform .15s ease,background .15s ease}
#demo .demo-play[hidden]{display:none}
@media(hover:hover){#demo .demo-play:hover{transform:scale(1.06);background:#2C463F}}
#demo .demo-play span{width:0;height:0;border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent #F5EFE0;margin-left:7px}
@media(max-width:700px){#demo{padding:56px 16px 8px!important}#demo .demo-frame{border-radius:14px}#demo .demo-play{width:52px;height:52px;margin:-26px 0 0 -26px}#demo .demo-play span{border-width:9px 0 9px 15px;margin-left:4px}}
@media(prefers-reduced-motion:reduce){#demo .demo-play{transition:none}}