:root {
  --bg: #090b10;
  --surface: #11141b;
  --surface-2: #181523;
  --line: #2b303a;
  --text: #f4f2f8;
  --muted: #9a9daa;
  --green: #7a45e8;
  --green-dark: #241c39;
  --coral: #11bfa7;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  line-height: 1.5;
  letter-spacing: 0;
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button { letter-spacing: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(9, 11, 16, .92);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}
.nav-wrap {
  max-width: var(--max);
  height: 72px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  /* Left-aligned: the nav sits directly beside the brand. `space-between`
     with three children pushed the nav into the middle of the header. */
  justify-content: flex-start;
  gap: 36px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; }
.brand b { color: var(--green); font-weight: 700; }
.brand-mark { width: 30px; height: 30px; display: flex; gap: 2px; align-items: center; justify-content: center; background: var(--green); border-radius: 50%; }
.brand-mark i { width: 2px; background: #fff; display: block; border-radius: 1px; }
.brand-mark i:nth-child(1), .brand-mark i:nth-child(5) { height: 7px; }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(4) { height: 13px; }
.brand-mark i:nth-child(3) { height: 18px; }
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #babfbc;
  font-size: 13.5px;
}
.desktop-nav > a, .nav-menu-button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 13px;
  border-radius: 6px;
  font-weight: 600; white-space: nowrap;
  transition: background .16s, color .16s;
}
.desktop-nav > a:hover, .nav-menu-button:hover,
.nav-menu:hover .nav-menu-button,
.nav-menu.open .nav-menu-button { background: var(--surface-2); color: var(--text); }
.nav-icon {
  flex: 0 0 auto; width: 15px; height: 15px; opacity: .75;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.desktop-nav > a:hover .nav-icon, .nav-menu-button:hover .nav-icon,
.nav-menu.open .nav-menu-button .nav-icon { opacity: 1; }
.desktop-nav a:hover { color: var(--text); }
.nav-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lang-toggle { width: 38px; height: 36px; border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 700; }
.lang-toggle:hover { border-color: var(--green); color: var(--green); }
/* nowrap 和 flex:0 0 auto 都是必需的：.nav-action 是 .nav-tools 这个 flex
   容器里的项，默认可以被压到比内容还窄，于是按钮文字折成两行。旁边的
   .desktop-nav > a 本来就有 nowrap，这里一直漏了 —— 英文「Start separating」
   看不出问题，法语「Commencer la séparation」一上就露馅。 */
.nav-action {
  padding: 9px 15px; background: var(--green); color: #fff;
  border-radius: 6px; font-weight: 700; font-size: 14px;
  white-space: nowrap; flex: 0 0 auto;
}

.hero {
  max-width: var(--max);
  min-height: 650px;
  margin: 0 auto;
  padding: 88px 24px 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
  gap: 76px;
  align-items: center;
}
.eyebrow, .section-head > p, .scene-intro > p, .privacy-copy > p, .cta-band > p {
  font-size: 12px;
  color: var(--green);
  font-weight: 700;
  letter-spacing: 1.6px;
}
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid var(--line); background: var(--surface); border-radius: 5px; }
.eyebrow span { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(183,242,108,.1); }
.hero h1 { margin: 24px 0 22px; font-size: clamp(52px, 6vw, 82px); line-height: 1.02; letter-spacing: 0; }
.hero h1 em { color: var(--green); font-style: normal; }
.hero-copy > p { max-width: 560px; margin: 0; color: #adb2ae; font-size: 18px; line-height: 1.8; }
.hero-meta { display: flex; gap: 0; margin-top: 34px; color: #d5d8d5; font-size: 13px; }
.hero-meta span { padding: 0 22px; border-right: 1px solid var(--line); }
.hero-meta span:first-child { padding-left: 0; }
.hero-meta span:last-child { border-right: 0; }

.signal-stage { position: relative; height: 390px; border: 1px solid var(--line); overflow: hidden; background: #0e1117; }
.signal-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(#303633 1px, transparent 1px), linear-gradient(90deg, #303633 1px, transparent 1px); background-size: 38px 38px; }
.signal-label, .signal-footer { position: absolute; left: 20px; right: 20px; display: flex; justify-content: space-between; z-index: 2; font-size: 10px; letter-spacing: 1px; color: #737b76; }
.signal-label { top: 18px; }
.signal-footer { bottom: 18px; }
.signal-label strong, .signal-footer b { color: var(--green); font-weight: 600; }
.signal-line { position: absolute; inset: 65px 16px; display: flex; align-items: center; gap: 3px; }
.signal-line i { flex: 1; min-width: 2px; background: var(--green); opacity: .85; height: 20%; transform-origin: center; transition: height .18s ease; }

.workspace-band { padding: 96px 24px; background: #0d1016; border-top: 1px solid #242832; border-bottom: 1px solid #242832; }
.section-head { max-width: 720px; margin: 0 auto 42px; text-align: center; }
.section-head p { margin: 0 0 13px; }
.section-head h2 { margin: 0 0 12px; font-size: 36px; line-height: 1.2; }
.section-head > span { color: var(--muted); }
.tool-shell { max-width: 960px; min-height: 415px; margin: 0 auto; padding: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 14px 14px 0 #07080c; }
.drop-zone { width: 100%; min-height: 390px; border: 1px dashed #414754; background: #0e1118; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; transition: border-color .2s, background .2s; position: relative; padding: 30px 24px 24px; overflow: hidden; }
.drop-zone:hover, .drop-zone.dragging { border-color: var(--green); background: #12101a; }
.drop-zone:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
#fileInput { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; opacity: 0; cursor: pointer; border: 0; }
.drop-zone strong { font-size: 20px; }
.drop-zone > span:not(.upload-icon) { color: var(--muted); font-size: 14px; }
.drop-zone small { color: #8a8f9e; margin-top: 2px; }
.upload-icon { width: 48px; height: 48px; display: grid; place-items: center; background: #241938; color: #a96cf4; border: 1px solid #7140a9; border-radius: 10px; margin-bottom: 8px; }
.upload-cta { margin-top: 10px; padding: 12px 30px; border-radius: 6px; background: linear-gradient(135deg, #7138ed, #9a5bf1); color: #fff !important; font-weight: 700; box-shadow: 0 8px 18px rgba(122,69,232,.2); }
.split-preview { width: min(760px, 100%); margin-top: 20px; padding: 18px 20px; border-radius: 8px; background: #151821; border: 1px solid #252a35; display: grid; gap: 12px; text-align: left; }
.split-row { display: grid; grid-template-columns: 64px minmax(0,1fr) 18px; align-items: center; gap: 14px; }
.split-row b { color: #d8d8df; font-size: 13px; }
.split-wave { height: 46px; border-radius: 6px; opacity: .92; background: repeating-linear-gradient(90deg, transparent 0 3px, currentColor 3px 5px, transparent 5px 8px); clip-path: polygon(0 50%, 2% 35%, 4% 61%, 6% 20%, 8% 75%, 10% 40%, 12% 62%, 14% 25%, 16% 78%, 18% 44%, 20% 56%, 22% 29%, 24% 72%, 26% 48%, 28% 62%, 30% 34%, 32% 70%, 34% 42%, 36% 59%, 38% 26%, 40% 74%, 42% 45%, 44% 63%, 46% 32%, 48% 71%, 50% 40%, 52% 64%, 54% 28%, 56% 76%, 58% 46%, 60% 57%, 62% 30%, 64% 74%, 66% 42%, 68% 62%, 70% 26%, 72% 76%, 74% 43%, 76% 60%, 78% 32%, 80% 72%, 82% 40%, 84% 65%, 86% 24%, 88% 73%, 90% 44%, 92% 58%, 94% 28%, 96% 68%, 98% 38%, 100% 50%); }
.music-wave { color: #18c7a6; }
.vocal-wave { color: #8861e8; }
.split-knob { width: 16px; height: 16px; border-radius: 50%; background: #8861e8; box-shadow: 0 0 0 3px rgba(136,97,232,.16); }
.upload-icon svg, .download-button svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-panel { padding: 18px 18px 8px; }
.settings-heading, .fine-tune-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.settings-heading label { font-weight: 700; }
.settings-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.settings-panel .segmented { width: 100%; margin-top: 14px; }
.settings-panel .segmented button { min-width: 0; flex: 1; }
.fine-tune-heading { margin-top: 18px; color: var(--muted); font-size: 12px; }
.fine-tune-label { display: inline-flex; align-items: center; gap: 6px; }
.fine-tune-heading output { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.info-wrap { position: relative; display: inline-flex; }
.info-mark { width: 17px; height: 17px; padding: 0; display: inline-grid; place-items: center; border: 1px solid #6f7772; background: transparent; border-radius: 50%; color: #aeb4b0; font-size: 10px; font-weight: 800; cursor: pointer; }
.info-mark:hover, .info-mark[aria-expanded="true"] { border-color: var(--green); color: var(--green); }
.fine-tune-tooltip { width: min(330px, calc(100vw - 70px)); position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 30; transform: translateX(-18px); padding: 10px 12px; border: 1px solid #3b423f; background: #171a19; color: #d8dcd9; border-radius: 5px; box-shadow: 0 10px 28px rgba(0, 0, 0, .38); font-size: 12px; font-weight: 400; line-height: 1.6; }
.fine-tune-tooltip::after { content: ""; width: 8px; height: 8px; position: absolute; left: 14px; bottom: -5px; transform: rotate(45deg); border-right: 1px solid #3b423f; border-bottom: 1px solid #3b423f; background: #171a19; }
.fine-tune-control { --range-ratio: .5; --thumb: 16px; --halo: rgba(183, 242, 108, .12); --range-fill: calc(var(--thumb) / 2 + var(--range-ratio) * (100% - var(--thumb))); width: 100%; height: 18px; margin: 10px 0 0; appearance: none; cursor: pointer; background: radial-gradient(circle at var(--range-fill) 50%, var(--halo) 0 11px, transparent 11.5px) no-repeat center / 100% 100%, radial-gradient(circle at var(--range-fill) 50%, var(--text) 0 8px, transparent 8.5px) no-repeat center / 100% 100%, linear-gradient(to right, var(--green) 0 var(--range-fill), #292e2c var(--range-fill) 100%) no-repeat center / 100% 4px; }
.fine-tune-control::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.fine-tune-control::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; appearance: none; border: 0; background: transparent; }
.fine-tune-control::-moz-range-track { height: 4px; background: transparent; }
.fine-tune-control::-moz-range-thumb { width: 16px; height: 16px; border: 0; background: transparent; }
/* thumb 是透明的（定位交给背景画），所以焦点反馈要自己给：聚焦时把圆点
   外围的光晕加亮。用 :focus-visible 而不是 :focus，鼠标点击不会触发。 */
.fine-tune-control:focus { outline: none; }
.fine-tune-control:focus-visible { --halo: rgba(183, 242, 108, .42); }
.fine-tune-scale { display: flex; justify-content: space-between; color: #666d69; font-size: 10px; }
.engine-dot { width: 7px; height: 7px; margin-right: 7px; display: inline-block; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(183,242,108,.08); }
.segmented, .compare-switch { padding: 4px; background: #090b0b; border: 1px solid var(--line); display: inline-flex; border-radius: 6px; }
.segmented button, .compare-switch button { min-width: 68px; height: 34px; border: 0; color: var(--muted); background: transparent; cursor: pointer; border-radius: 4px; }
.segmented button.active, .compare-switch button.active { background: var(--green); color: #111; font-weight: 700; }
.processing-view { min-height: 385px; }
.file-row { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); }
.file-icon { width: 42px; height: 42px; display: grid; place-items: center; background: var(--green-dark); color: var(--green); font-size: 22px; border-radius: 5px; }
.file-info { min-width: 0; flex: 1; padding: 0 13px; }
.file-info strong, .file-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-info span { color: var(--muted); font-size: 12px; margin-top: 3px; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; border-radius: 4px; }
.progress-panel { padding: 82px 54px; }
.progress-copy { display: flex; justify-content: space-between; margin-bottom: 14px; }
.progress-copy span { color: var(--green); font-variant-numeric: tabular-nums; }
.progress-track { height: 5px; background: #262b29; overflow: hidden; }
.progress-track i { display: block; height: 100%; width: 0; background: var(--green); transition: width .18s ease; }
.progress-panel p { margin: 13px 0 0; color: var(--muted); font-size: 13px; }
.result-panel { padding: 22px 18px 18px; }
.result-status { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.result-status > span { width: 32px; height: 32px; display: grid; place-items: center; background: var(--green); color: #0b0d0c; border-radius: 50%; font-weight: 900; }
.result-status strong, .result-status p { display: block; margin: 0; }
.result-status p { color: var(--muted); font-size: 12px; margin-top: 2px; }
.waveform-stack { display: grid; gap: 14px; }
.waveform-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; align-items: center; }
.waveform-label { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.wave-play-button { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 50%; cursor: pointer; }
.wave-play-button span { font-size: 11px; transform: translateX(1px); }
.wave-play-button:hover, .wave-play-button.is-playing { border-color: var(--green); background: var(--green); color: #111; }
.wave-play-button.is-playing span { transform: none; }
.waveform-content { min-width: 0; }
.waveform-wrap { height: 150px; min-width: 0; position: relative; background: #0b0d0c; border: 1px solid var(--line); overflow: hidden; cursor: pointer; }
.waveform-row.is-playing .waveform-wrap { border-color: rgba(17, 191, 167, .65); }
.waveform-wrap canvas { width: 100%; height: 100%; display: block; }
.playhead { position: absolute; inset: 0 auto 0 0; width: 1px; background: var(--coral); pointer-events: none; }
/* ── 波形 / 频谱 视图切换 ─────────────────────────────────────────────────── */
.view-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.view-button {
  padding: 7px 13px; border: 0; background: none; color: var(--muted);
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.view-button + .view-button { border-left: 1px solid var(--line); }
.view-button:hover:not(:disabled) { color: var(--text); }
.view-button.is-active { background: var(--surface-2); color: var(--text); }
/* 算三张频谱期间按钮禁用；进度靠指针形状表达，不再多加一个 spinner */
.view-button:disabled { cursor: progress; opacity: .55; }

/* dB 色阶图例。顺序型配色必须给刻度，否则亮度只是装饰。
   渐变的每一档就是 spectrogram.mjs 里的 RAMP。 */
/* [hidden] 是 UA 样式表里的 display:none，作者样式里的 display:flex 会压过它 ——
   于是图例在波形视图下也一直显示，还写着 dB 刻度。这条必须在下面那条之前。 */
.spec-legend[hidden] { display: none; }
.spec-legend { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 12px; color: var(--muted); font-size: 11px; }
.spec-legend i {
  width: 132px; height: 9px; border-radius: 5px; border: 1px solid var(--line);
  background: linear-gradient(90deg, #145048, #0e6a5f, #109281, #11bfa7, #7fe6d3, #c8f7ec);
}
.spec-legend small { flex: 1 1 260px; min-width: 0; font-size: 11px; line-height: 1.6; }

/* 频率轴。压在面板右侧，位置由 app.js 用 freqToTop() 算出。 */
.spec-axis { position: absolute; inset: 0; pointer-events: none; }
.spec-axis span {
  position: absolute; right: 6px; transform: translateY(-50%);
  padding: 0 3px; border-radius: 3px;
  background: rgba(11, 13, 12, .66); color: var(--muted);
  font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1.4;
}

.wave-timeline { height: 34px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.wave-seek-track { height: 4px; min-width: 0; flex: 1; position: relative; overflow: hidden; background: #292e2c; cursor: pointer; }
.wave-seek-track i { display: block; width: 0; height: 100%; background: var(--green); }
.download-button { height: 40px; padding: 0 15px; display: inline-flex; align-items: center; gap: 7px; border: 0; background: var(--green); color: #111; font-weight: 700; border-radius: 5px; cursor: pointer; }
.download-button svg { width: 18px; }
.download-button:disabled { cursor: wait; opacity: .72; }
.export-panel { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.export-panel label, .export-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; }
.export-name-control { height: 40px; display: flex; align-items: center; overflow: hidden; border: 1px solid var(--line); background: #090b0b; border-radius: 5px; }
.export-name-control:focus-within { border-color: var(--green); }
.export-name-control input { min-width: 0; height: 100%; flex: 1; padding: 0 12px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; }
.export-name-control span { padding-right: 12px; color: var(--muted); font-size: 12px; }
.export-label { margin-top: 14px; }
.export-formats { display: flex; gap: 7px; }
.export-formats button { height: 30px; min-width: 54px; padding: 0 12px; border: 1px solid transparent; background: #242827; color: var(--muted); border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 700; }
.export-formats button:hover { color: var(--text); border-color: #3b423f; }
.export-formats button.active { background: var(--text); color: #111; }
.export-panel .download-button { width: 100%; justify-content: center; margin: 14px 0 0; }
.trust-row { max-width: 800px; margin: 34px auto 0; display: flex; justify-content: center; color: #858c87; font-size: 12px; }
.trust-row span { padding: 0 24px; border-right: 1px solid var(--line); }
.trust-row span:last-child { border-right: 0; }

.metrics-band { max-width: var(--max); margin: 0 auto; padding: 72px 24px; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.metrics-band div { text-align: center; border-right: 1px solid var(--line); }
.metrics-band div:last-child { border-right: 0; }
.metrics-band strong { display: block; font-size: 32px; color: var(--green); }
.metrics-band span { color: var(--muted); font-size: 13px; }

.features-band { max-width: var(--max); margin: 0 auto; padding: 106px 24px; }
.section-head.left { max-width: 100%; margin-bottom: 46px; text-align: left; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature-grid article { min-height: 230px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s; }
.feature-grid article:hover { background: var(--surface); }
.feature-grid article > span { color: var(--coral); font-size: 12px; font-weight: 700; }
.feature-grid h3 { margin: 42px 0 10px; font-size: 20px; }
.feature-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }

.scenes-band { padding: 106px max(24px, calc((100vw - 1132px) / 2)); background: #dce4d7; color: #101311; display: grid; grid-template-columns: .8fr 1.2fr; gap: 86px; }
.scene-intro > p { color: #476326; }
.scene-intro h2 { margin: 16px 0; font-size: 42px; line-height: 1.25; }
.scene-intro > span { color: #5c645e; }
.scene-list { border-top: 1px solid #929d94; }
.scene-list article { min-height: 135px; padding: 24px 0; display: grid; grid-template-columns: 120px 1fr; column-gap: 24px; border-bottom: 1px solid #929d94; align-content: center; }
.scene-list article > span { color: #5b645e; font-size: 13px; }
.scene-list strong { font-size: 20px; }
.scene-list i { grid-column: 2; margin-top: 8px; color: #667068; font-size: 12px; font-style: normal; }

.privacy-band { max-width: var(--max); margin: 0 auto; padding: 110px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.privacy-visual { height: 340px; position: relative; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; overflow: hidden; }
.privacy-visual > span, .privacy-visual > b { position: absolute; font-size: 10px; letter-spacing: 1.5px; color: #6d756f; }
.privacy-visual > span { top: 22px; left: 22px; }
.privacy-visual > b { right: 22px; bottom: 22px; color: var(--green); }
.privacy-visual::before, .privacy-visual::after { content: ""; position: absolute; background: var(--line); }
.privacy-visual::before { width: 1px; height: 100%; }
.privacy-visual::after { width: 100%; height: 1px; }
.lock { width: 110px; height: 92px; position: relative; z-index: 1; background: var(--green); border-radius: 6px; }
.lock::before { content: ""; position: absolute; width: 58px; height: 58px; left: 24px; top: -42px; border: 8px solid var(--green); border-bottom: 0; border-radius: 32px 32px 0 0; }
.lock i { position: absolute; width: 12px; height: 29px; left: 49px; top: 28px; background: #131713; border-radius: 8px; }
.privacy-copy h2 { margin: 14px 0 18px; font-size: 40px; }
.privacy-copy > span { display: block; color: var(--muted); line-height: 1.9; }
.privacy-copy a { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; color: var(--green); font-weight: 700; }
.privacy-copy a b { font-size: 20px; }

.cta-band { padding: 104px 24px; background: var(--green); color: #101310; text-align: center; }
.cta-band > p { color: rgba(16, 19, 16, .78); }
.cta-band h2 { margin: 12px 0 28px; font-size: 42px; }
.cta-band a { display: inline-flex; align-items: center; gap: 28px; padding: 14px 20px; background: #101310; color: var(--text); border-radius: 5px; font-weight: 700; }
.cta-band a span { color: var(--green); }

footer { max-width: var(--max); min-height: 160px; margin: 0 auto; padding: 50px 24px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; color: var(--muted); font-size: 13px; }
footer p { text-align: center; }
footer > span { text-align: right; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); padding: 11px 16px; background: var(--text); color: #111; border-radius: 5px; font-size: 13px; opacity: 0; pointer-events: none; transition: .25s; z-index: 50; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Skip link — keyboard users reach the tool without tabbing the whole nav. */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 60; padding: 10px 16px; background: var(--green); color: var(--text); border-radius: 6px; font-weight: 700; font-size: 14px; transition: top .18s; }
.skip-link:focus { top: 16px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, label:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.steps-band { max-width: var(--max); margin: 0 auto; padding: 0 24px 106px; }
.steps-band .section-head { max-width: 760px; }
.step-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.step-list li { min-height: 230px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s; }
.step-list li:hover { background: var(--surface); }
.step-index { color: var(--coral); font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.step-list h3 { margin: 42px 0 10px; font-size: 20px; }
.step-list p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }

.faq-band { max-width: var(--max); margin: 0 auto; padding: 0 24px 106px; }
.faq-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 22px 46px 22px 0; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary h3 { display: inline; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; }
.faq-list summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--coral); font-size: 22px; line-height: 1; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list summary:hover h3 { color: var(--coral); }
.faq-list details p { max-width: 70ch; margin: 0 0 26px; color: var(--muted); font-size: 15px; line-height: 1.9; }

.footer-nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; width: 100%; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.footer-nav a:hover { color: var(--text); }

/* 页脚语言切换器。语言名一律用该语言自己的写法（Español 在任何页面上都是
   Español），所以这里不需要为不同语言留不同宽度。 */
.lang-switch { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; width: 100%; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; }
.lang-switch a { color: var(--muted); }
.lang-switch a:hover { color: var(--text); }
.lang-switch a[aria-current] { color: var(--text); font-weight: 700; }

/* 页头语言下拉。结构与 Tools 菜单相同，只调面板宽度和按钮的字重 —— 语言名
   比工具名短得多，沿用 320px 的面板会留一大片空白。 */
.lang-menu .nav-menu-panel { min-width: 152px; width: auto; padding: 6px; }
.lang-menu .nav-menu-panel a { padding: 8px 10px; font-weight: 600; }
.lang-menu .nav-menu-panel a[aria-current] { color: var(--green); }
@media (max-width: 1024px) { .lang-menu .nav-menu-button { padding: 0 8px; } }

/* 页脚社交入口。footer 是三列网格，品牌/标语/版权占满第一行，这个 div
   自然落到第二行第一列（左对齐，和 lalal 的位置一致），.footer-nav 用
   grid-column: 1/-1 另起一行，互不干扰。窄屏时 footer 变单列居中，
   这里的 flex 让标签和图标继续并排。 */
.footer-follow { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.footer-follow > span { color: var(--muted); }
.footer-follow a { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); transition: color .18s, border-color .18s; }
.footer-follow a:hover { color: var(--text); border-color: var(--text); }
.footer-follow svg { width: 15px; height: 15px; fill: currentColor; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 48px; }
  .hero h1 { font-size: 62px; }
  .signal-stage { height: 300px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .scenes-band { grid-template-columns: 1fr; gap: 46px; }
  .privacy-band { gap: 42px; }
  .privacy-visual { height: 300px; }
}

@media (max-width: 640px) {
  .nav-wrap { height: 64px; padding: 0 18px; }
  .desktop-nav > a { display: none; }          /* menu button stays, see 820px */
  .nav-action { font-size: 12px; padding: 8px 11px; }
  .lang-toggle { width: 34px; height: 34px; }
  .hero { min-height: auto; padding: 68px 18px 54px; grid-template-columns: minmax(0, 1fr); }
  .eyebrow { font-size: 10px; }
  .hero h1 { margin-top: 20px; font-size: 46px; }
  .hero-copy > p { font-size: 16px; }
  .hero-meta { flex-wrap: wrap; row-gap: 8px; }
  .hero-meta span { padding: 0 12px; }
  .signal-stage { height: 240px; }
  .workspace-band { padding: 72px 14px; }
  .section-head { margin-bottom: 30px; }
  .section-head h2, .privacy-copy h2 { font-size: 30px; }
  .tool-shell { min-height: 390px; padding: 9px; box-shadow: 7px 7px 0 #070808; }
  .drop-zone { min-height: 245px; padding: 20px; }
  .drop-zone small { text-align: center; }
  .settings-panel { padding: 18px 10px 8px; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; min-width: 0; }
  .progress-panel { padding: 70px 20px; }
  .result-panel { padding: 18px 8px 10px; }
  .waveform-row { grid-template-columns: 68px minmax(0, 1fr); gap: 8px; }
  .wave-play-button { width: 32px; height: 32px; }
  .download-button { margin-left: auto; }
  .export-panel .download-button { margin-left: 0; }
  .trust-row { flex-wrap: wrap; gap: 8px 0; }
  .trust-row span { padding: 0 10px; }
  .metrics-band { grid-template-columns: repeat(2, 1fr); gap: 34px 0; padding: 58px 18px; }
  .metrics-band div:nth-child(2) { border-right: 0; }
  .features-band { padding: 80px 18px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid article { min-height: 200px; }
  .feature-grid h3 { margin-top: 28px; }
  .scenes-band { padding: 78px 18px; }
  .scene-intro h2, .cta-band h2 { font-size: 32px; }
  .scene-list article { grid-template-columns: 1fr; gap: 8px; }
  .scene-list i { grid-column: 1; margin: 0; }
  .privacy-band { padding: 78px 18px; grid-template-columns: 1fr; }
  .privacy-visual { height: 260px; }
  .cta-band { padding: 80px 18px; }
  footer { padding: 42px 18px; grid-template-columns: 1fr; gap: 16px; justify-items: center; }
  footer p, footer > span { margin: 0; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 1024px) {
  .desktop-nav { font-size: 13px; }
  .desktop-nav > a, .nav-menu-button { padding: 0 11px; }
}

@media (max-width: 900px) {
  .step-list { grid-template-columns: 1fr; }
  .step-list li { min-height: 0; }
}

@media (max-width: 820px) {
  /* Keep the Tools dropdown reachable on touch. Hiding .desktop-nav wholesale
     also hid the menu button itself, so there was nothing left to tap — the
     panel styles below never got a chance to run. */
  .desktop-nav { display: flex; gap: 4px; }
  .desktop-nav > a { display: none; }
  .nav-menu-button { padding: 0 10px; }
}

@media (max-width: 640px) {
  .steps-band, .faq-band { padding: 0 18px 80px; }
  .step-list li { padding: 22px; }
  .step-list h3 { margin-top: 28px; }
  .faq-list summary { padding: 18px 38px 18px 0; }
  .faq-list summary h3 { font-size: 16px; }
  .faq-list details p { font-size: 14px; margin-bottom: 22px; }
  .footer-nav { margin-top: 22px; }
}

/* ── Tool-page chrome (compact head, breadcrumb, cross-link) ─────────────── */
.tool-head { max-width: 820px; margin: 0 auto; padding: 62px 24px 34px; text-align: center; }
.crumbs { margin-bottom: 22px; color: var(--muted); font-size: 12.5px; }
.crumbs a:hover { color: var(--text); }
.crumbs span[aria-hidden] { margin: 0 7px; opacity: .5; }
.tool-kicker { margin: 0 0 12px; color: var(--coral); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; }
.tool-head h1 { margin: 0 0 18px; font-size: clamp(32px, 4.4vw, 46px); line-height: 1.14; }
.tool-intro { max-width: 660px; margin: 0 auto; color: var(--muted); font-size: 16px; line-height: 1.85; }

.cross-link { max-width: 820px; margin: 0 auto; padding: 0 24px 90px; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; text-align: center; }
.cross-link p { margin: 0; color: var(--muted); font-size: 14px; }
.cross-link a { display: inline-flex; align-items: center; gap: 10px; padding: 11px 17px; border: 1px solid var(--line); border-radius: 6px; font-weight: 700; font-size: 14px; }
.cross-link a:hover { border-color: var(--green); color: var(--green); }

/* ── Tool switcher (homepage) — a row of pills linking to every tool ────── */
.tool-switch { max-width: var(--max); margin: 0 auto; padding: 0 24px 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tool-switch a { display: inline-flex; align-items: center; padding: 9px 17px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; transition: border-color .16s, color .16s, background .16s; }
.tool-switch a:hover { border-color: var(--green); color: var(--text); }
.tool-switch a[aria-current="page"] { border-color: var(--green); color: var(--green); background: rgba(122,69,232,.10); }
@media (max-width: 640px) { .tool-switch { padding: 0 18px 32px; gap: 7px; } .tool-switch a { padding: 8px 14px; font-size: 12.5px; } }

@media (max-width: 640px) {
  .tool-head { padding: 44px 18px 26px; }
  .tool-intro { font-size: 15px; }
  .cross-link { padding: 0 18px 64px; }
}

/* Two-stem summary grid (mirrors the noise grid on the sibling tool page). */
.stem-band { max-width: var(--max); margin: 0 auto; padding: 0 24px 96px; }
.stem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.stem-grid li { padding: 26px 24px; background: var(--bg); }
.stem-grid strong { display: block; margin-bottom: 9px; font-size: 16px; }
.stem-grid span { color: var(--muted); font-size: 13.5px; line-height: 1.8; }
.stem-note { max-width: 720px; margin: 26px auto 0; color: var(--muted); font-size: 13px; line-height: 1.8; text-align: center; }
@media (max-width: 640px) { .stem-grid { grid-template-columns: 1fr; } .stem-band { padding: 0 18px 72px; } }

/* ── Tools dropdown ──────────────────────────────────────────────────────── */
.nav-menu { position: relative; }
.nav-menu-button { border: 0; background: none; color: inherit; cursor: pointer;
  font-family: inherit; font-size: inherit; line-height: inherit; }
.nav-menu-button::after { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform .18s; }
.nav-menu-button:hover, .nav-menu:hover .nav-menu-button { color: var(--text); }
.nav-menu.open .nav-menu-button::after { transform: rotate(225deg) translateY(-2px); }

.nav-menu-panel {
  position: absolute; top: calc(100% + 12px); left: -6px; z-index: 40;
  min-width: 288px; padding: 8px; margin: 0; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
/* Hover covers the mouse, :focus-within covers keyboard tabbing, .open is the
   click toggle nav-menu.js adds for touch. */
.nav-menu:hover .nav-menu-panel,
.nav-menu:focus-within .nav-menu-panel,
.nav-menu.open .nav-menu-panel { opacity: 1; visibility: visible; transform: translateY(0); }
/* Keeps the pointer from falling through the gap under the button. */
.nav-menu::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }

.nav-menu-panel a { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 6px; transition: background .15s; }
.nav-menu-panel a:hover { background: var(--surface-2); }
.nav-menu-panel a[aria-current="page"] { background: var(--surface-2); }
/* Fixed brand colours, not palette vars: each tool keeps the same dot colour
   on every page, matching the favicon. */
.nav-menu-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.nav-menu-dot.vocal { background: #8a5cf6; }
.nav-menu-dot.noise { background: #b7f26c; }
.nav-menu-dot.tts { background: #11bfa7; }
.nav-menu-dot.convert { background: #f2a25c; }
.nav-menu-dot.spatial { background: #38bdf8; }
.nav-menu-dot.voice { background: #e06c9f; }
.nav-menu-text { min-width: 0; }
.nav-menu-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.nav-menu-text > span { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

@media (max-width: 820px) {
  /* Fixed panel: `top` has to match the header height at this breakpoint
     (72px here, 64px below 640px) or it overlaps or floats away from the bar. */
  .nav-menu-panel { position: fixed; top: 72px; left: 12px; right: 12px; min-width: 0; }
}

@media (max-width: 640px) {
  .nav-menu-panel { top: 64px; }
}

/* ── 5-minute limit notice ───────────────────────────────────────────────── */
/* Sits at the top of the tool shell so the constraint is read before a file is
   chosen, not discovered as a rejection afterwards. */
.tool-limit {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 12px 16px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--coral); border-radius: 6px;
}
.tool-limit strong { flex: 0 0 auto; color: var(--coral); font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.tool-limit span { color: var(--muted); font-size: 13px; line-height: 1.65; }
.intro-limit { color: var(--text); font-weight: 700; }
.drop-zone small { text-align: center; }

@media (max-width: 640px) {
  .tool-limit { margin-bottom: 11px; padding: 11px 13px; gap: 6px; }
  .tool-limit strong, .tool-limit span { font-size: 12.5px; }
}

/* ── Microphone as a second source ───────────────────────────────────────── */
/* Hidden by default and revealed by JS only where getUserMedia actually
   exists, so a plain-HTTP origin never shows a control that cannot work. */
.mic-source { margin-top: 16px; }
.mic-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.mic-divider::before, .mic-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.mic-panel { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; transition: border-color .18s; }
.mic-source.recording .mic-panel { border-color: var(--coral); }
.mic-glyph { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface); color: var(--muted); }
.mic-source.recording .mic-glyph { color: var(--coral); }
.mic-glyph svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.mic-copy { min-width: 0; flex: 1 1 auto; }
.mic-copy strong { display: block; font-size: 14px; font-weight: 600; }
.mic-note { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.mic-note.error { color: var(--coral); }

.mic-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.mic-live { display: inline-flex; align-items: center; gap: 9px; font-variant-numeric: tabular-nums; }
/* Live input level. The bar is driven from an AnalyserNode tap on the same
   graph that records, so it shows the signal actually being captured. */
.mic-meter { position: relative; width: 66px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.mic-meter i { display: block; width: 0; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--coral), #f2b97d 70%, #ff6b6b);
  transition: width .06s linear; }
.mic-time { font-size: 14px; font-weight: 700; }
.mic-cap { color: var(--muted); font-size: 12px; }

.mic-toggle, .mic-cancel { padding: 9px 16px; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--text); transition: border-color .18s, background .18s; }
.mic-toggle { min-width: 118px; background: var(--surface); }
.mic-toggle:hover:not([disabled]) { border-color: var(--coral); color: var(--coral); }
.mic-source.recording .mic-toggle { background: var(--coral); border-color: var(--coral); color: #0b0d12; }
.mic-toggle[disabled] { opacity: .5; cursor: not-allowed; }
.mic-cancel:hover { border-color: var(--muted); }

@media (max-width: 640px) {
  .mic-panel { flex-wrap: wrap; gap: 12px; padding: 13px; }
  .mic-glyph { width: 32px; height: 32px; }
  .mic-copy { flex: 1 1 140px; }
  .mic-controls { width: 100%; justify-content: space-between; }
  .mic-toggle { flex: 1; min-width: 0; }
}

/* 指向未译页面的链接标签。小、静，但看得见 —— 读者点进去会落到英文页，
   提前说一声比让他意外好。由 tools-i18n.py 按覆盖率自动注入。 */
.lang-untranslated {
  color: var(--muted); font-size: .82em; font-weight: 400;
  white-space: nowrap;
}
.lang-untranslated::before { content: "("; }
.lang-untranslated::after  { content: ")"; }