/* 叮叮点歌 dingsong.ai 操作样稿⁠·铃声页（2026-10-22）：铃声总页 ringtones/ 与安装教学 ringtones/install/ 共用。
   加载顺序：tokens.css → bundle.css → shell.css → 这支。只用设计系统的 token：颜色 var(--…)、间距 var(--space-…)、圆角 var(--radius-…)；
   字级只用字级表的值（后面注明是哪一级）。新组件（手机预览、选项卡、剪段轨道、步骤清单、画面示意）只用既有组件的语言：
   机器面板＝glass 一组、亮起来＝amber、选中＝ink 底（同 Segmented）、可以按的链接＝外框胶囊（同 .set-more）、分区＝细线不加底色。 */

/* ---------- 共用：可以按的胶囊钮（照设计系统 .set-more 的样子：line-strong 外框、15px 粗体、44px 高；首页“进去 →”同一种） ---------- */
.rt-pill { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--tap-min); padding: 0 var(--space-16); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 15px/1.2 var(--font-body); text-decoration: none; cursor: pointer; max-width: 100%; padding-block: var(--space-6); text-align: start; }   /* ui-label */
/* 英日文接线（10-27）：胶囊钮可以换行（原本 nowrap：英文“Already have a ringtone file? See how to set it up”在 375 宽把整页撑到 622px）；放得下的照旧一行 */
.rt-pill:hover { border-color: var(--ink); }
.rt-pill .gl { width: 18px; height: 18px; flex: none; }
.rt-pill:disabled { opacity: .35; cursor: not-allowed; }
.rt-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10); }
.rt-msg { font-weight: 700; color: var(--red-ink); }
.rt-label { font: 700 15px/1.25 var(--font-body); color: var(--ink); }   /* ui-label */
.rt-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.rt-chips .chip, .rt-pick-row .chip { min-height: var(--tap-min); padding: 0 var(--space-16); font-size: 15px; }   /* 单选钮组：一般人、长辈都要好按（ui-label 字级） */
.rt-chips .chip .gl { width: 18px; height: 18px; }
.chip[aria-checked="true"] { background: var(--amber); color: var(--on-amber); border-color: var(--ink); }   /* 选中＝“正在作用”：照 Chip 按下的样子；网站主人 10-26 核准“选中的琥珀底加墨色外框”（同 shell.css 那一条，这一页的选项是 aria-checked 所以另写） */
.rt-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
.rt-pick-label { font: 700 15px/1.25 var(--font-body); color: var(--ink); }
.num { font-variant-numeric: tabular-nums; }
/* 单栏格线一律 minmax(0, 1fr)：用户自己的文件名再长（一长串没有空格的英文），也只在栏里换行，不会把整页撑宽（自动宽度的格线会跟着最长的字变宽） */
.rt-src-panel, .rt-confirm, .rt-own, .rt-who, .rt-fix-row, .rt-preview, .rt-preview-side, .rt-out, .rt-remind, .rt-done, .rt-guide, .rt-share, .rt-ins-song, .rt-help { grid-template-columns: minmax(0, 1fr); }

/* ---------- 主视觉：左边一句话＋两颗钮，右边一支“来电中”的手机 ---------- */
.rt-hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-44); align-items: center; padding-block: var(--space-48) var(--space-44); }
.rt-hero h1 { font: 700 clamp(32px, 4.4vw, 52px)/1.15 var(--font-body); letter-spacing: -.01em; }   /* page-title */
.rt-hero .lead { margin-top: var(--space-16); font-size: 18px; line-height: 1.7; color: var(--ink-2); max-width: 32em; }   /* lead-text */
.rt-hero .cta { margin-top: var(--space-22); }
.rt-free { margin-top: var(--space-14); font: 500 18px/1.6 var(--font-body); color: var(--ink); max-width: 30em; }   /* lead-text 字级＋主要文字色：“免费”这种话不放小字 */
.rt-hero-more { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-top: var(--space-12); }
.rt-hero-demo { display: grid; justify-items: center; gap: var(--space-12); }
.rt-hero-cap { text-align: center; max-width: 22em; }
@media (max-width: 900px) {   /* 平板：仍是左右两栏（上下排的话，手机图会把现成铃声挤到很下面），手机图缩小 */
  .rt-hero .wrap { grid-template-columns: minmax(0, 1fr) 232px; gap: var(--space-28); padding-block: var(--space-28) var(--space-28); }
  .rt-hero-demo .rt-phone { width: min(100%, 180px); }
  .rt-hero-demo .rt-phone-screen { min-height: 360px; padding: var(--space-18) var(--space-10) var(--space-14); }
  .rt-hero-demo .rt-ph-ava { width: 60px; height: 60px; margin-top: var(--space-8); }
  .rt-hero-demo .rt-ph-name { font-size: 22px; }
}
@media (max-width: 640px) {
  .rt-hero .wrap { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-22) var(--space-24); }   /* 手机图藏起来了，格线也要改回一栏（不然文字栏只剩 28px） */
  .rt-hero-demo { display: none; }   /* 手机：第一屏先给现成铃声（每一首都能按播放）；手机预览在“自己剪一段”里 */
  .rt-hero .cta { display: flex; flex-wrap: wrap; gap: var(--space-10); }
}

/* ---------- 新组件：手机预览（通用的“来电中”画面，不仿 iPhone 或 Android 原画面）：机身 glass、屏幕 glass-2、glass-edge 内框；实物才有阴影 ---------- */
/* 第 4 轮品味 5：宽高比原本 0.60～0.64（像小平板）→ 约 0.47 的直长手机（Zedge、Audiko 的预览都是直长手机）：宽度收窄、高度大致不变（手机版整页不变长） */
.rt-phone { width: min(100%, 220px); padding: var(--space-10); border-radius: var(--radius-22); background: var(--glass); box-shadow: var(--shadow-radio), inset 0 0 0 1.5px var(--glass-edge); color: var(--glass-ink); }
.rt-phone-screen { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: var(--space-8); min-height: 448px; padding: var(--space-24) var(--space-12) var(--space-18); border-radius: var(--radius-18); background: var(--glass-2); text-align: center; }
/* “听听看”的手机在格线的 auto 栏里：宽度写百分比会被算成内容的最小宽（768～1080 量到 128px、比例 0.27）→ 写死宽度 */
.rt-preview > .rt-phone { width: 220px; max-width: 100%; }
@media (max-width: 640px) {
  .rt-phone, .rt-preview > .rt-phone { width: 196px; }
  .rt-phone-screen { min-height: 400px; }   /* 宽 196、高约 420：0.47，跟原本（272×416）差不多高，整页不变长 */
}
.rt-ph-kick { font: 500 12px/1 var(--font-mono); letter-spacing: .1em; color: var(--glass-dim); }   /* mono-label */
.rt-ph-time { font: 800 40px/1 var(--font-display); color: var(--glass-ink); font-variant-numeric: tabular-nums; margin-top: var(--space-8); }   /* stat */
.rt-ph-ava { display: grid; place-items: center; width: 76px; height: 76px; margin-top: var(--space-14); border-radius: 50%; background: var(--glass); box-shadow: inset 0 0 0 1.5px var(--glass-edge); color: var(--glass-ink); font: 700 30px/1 var(--font-body); }
.rt-ph-ava .ic { width: 38px; height: 38px; }
.rt-ph-name { font: 700 26px/1.25 var(--font-body); color: var(--glass-ink); overflow-wrap: anywhere; }   /* program-title */
.rt-ph-song { display: inline-flex; align-items: center; gap: var(--space-6); font-size: 15px; line-height: 1.4; color: var(--glass-text-2); max-width: 100%; }
.rt-ph-song > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* min-width:0：弹性盒里的长文件名才缩得下来，不会把手机画面撑宽 */
.rt-ph-song .gl { width: 16px; height: 16px; }
.rt-meter { display: flex; align-items: flex-end; gap: var(--space-6); height: 40px; margin-top: var(--space-10); }
.rt-meter i { width: 8px; border-radius: var(--radius-2); background: var(--amber); opacity: .35; transform-origin: bottom; }
.rt-meter i:nth-child(1) { height: 40%; } .rt-meter i:nth-child(2) { height: 70%; } .rt-meter i:nth-child(3) { height: 55%; } .rt-meter i:nth-child(4) { height: 85%; } .rt-meter i:nth-child(5) { height: 45%; }
.rt-phone.is-ringing .rt-meter i { opacity: 1; animation: vu .45s ease-in-out infinite alternate; }   /* 只有真的在响才跳（设计系统 Radio 的音量表同一个动画） */
.rt-phone.is-ringing .rt-meter i:nth-child(2) { animation-delay: .1s; } .rt-phone.is-ringing .rt-meter i:nth-child(3) { animation-delay: .2s; } .rt-phone.is-ringing .rt-meter i:nth-child(4) { animation-delay: .05s; }
.rt-ph-btn { display: grid; justify-items: center; gap: var(--space-8); margin-top: var(--space-14); padding: var(--space-6) var(--space-10); border: 0; border-radius: var(--radius-14); background: transparent; color: var(--glass-ink); font: 700 15px/1.25 var(--font-body); cursor: pointer; }
.rt-ph-knob { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--glass-ink); color: var(--glass); box-shadow: var(--shadow-knob); }
.rt-ph-knob .gl { width: 24px; height: 24px; transform: translateX(8%); }
.rt-ph-btn.is-on .rt-ph-knob { background: var(--red); color: var(--on-red); }   /* 正在响＝正在播：红 */
.rt-ph-btn.is-on .rt-ph-knob .gl { transform: none; }
.rt-ph-btn:hover .rt-ph-knob { filter: brightness(1.08); }
.rt-ph-btn:disabled { opacity: .35; cursor: not-allowed; }
/* 设计评审 10-25 品味 9：深色机身底色跟页面太接近、轮廓差点看不出来 → 外圈加一道细框（line-strong，同控制项外框；不加阴影、不加光晕） */
/* 设计评审第 2 轮 D9：外圈还是太细、轮廓不明显 → 加粗到 2px（line-strong 对深色页面底色 3.5:1） */
html[data-theme="dark"] .rt-phone { box-shadow: var(--shadow-radio), inset 0 0 0 1.5px var(--glass-edge), 0 0 0 2px var(--line-strong); }
.rt-phone :focus-visible { outline-color: var(--glass-red-ink); }   /* 深色面板里的焦点框（设计系统第 4 版规则） */
.rt-phone[data-mode="alarm"] .rt-ph-ava, .rt-phone[data-mode="alarm"] .rt-ph-name { display: none; }

/* ---------- 现成铃声：分类钮＋一列一首（播放、曲名、下载、自己调整） ---------- */
.rt-sets-row { margin-top: var(--space-4); }
.rt-set-desc { margin-top: var(--space-14); font-size: 16px; color: var(--ink-2); max-width: 40em; }   /* body-small */
.rt-list { list-style: none; margin: var(--space-10) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-44); }
.rt-item { container-type: inline-size; border-top: 1px solid var(--line); }
.rt-item-in { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "play t act"; column-gap: var(--space-14); row-gap: var(--space-10); align-items: center; padding-block: var(--space-12); }
/* 第 4 轮 R4-B8：同一台（FM 114.8）的“正在播”只有一种样子——跟背景音乐清单的 .trk-play 一样：描边圆；播放中红字＋红描边＋暂停（设计规格“红色给正在播”；
   网站主人 10-25 定案：清单那列红色描边、底部播放器留红色实心）。原本是墨黑实心圆、播放中琥珀实心＋停止，手机上 6 颗墨黑实心圆也比背景音乐清单重很多 */
.rt-play { grid-area: play; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.rt-play:hover { border-color: var(--ink); }
.rt-play .gl { width: 18px; height: 18px; transform: translateX(1px); }
.rt-play[aria-pressed="true"] { background: transparent; border-color: var(--red-ink); color: var(--red-ink); }
.rt-play[aria-pressed="true"] .gl { transform: none; }
.rt-item-t { grid-area: t; min-width: 0; }
.rt-item-h { font: 700 18px/1.35 var(--font-body); }   /* lead-text 字级、粗 */
.rt-item-meta { font-size: 14px; line-height: 1.5; color: var(--ink-2); }   /* fine-print */
.rt-item-act { grid-area: act; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-8); }
/* 安装页那一首（两颗钮）：手机上两颗并排占满一行（设计评审 10-24） */
@container (max-width: 520px) { .rt-ins-song .rt-item-in { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "play t" "act act"; } .rt-ins-song .rt-item-act { justify-content: flex-start; flex-wrap: wrap; } .rt-ins-song .rt-item-act .rt-pill { flex: 1 1 auto; justify-content: center; padding-inline: var(--space-12); } }
/* 第 5 轮品味 1：现成铃声每列＝播放＋名字＋列尾一颗“下载”（Zedge、Audiko 的列）；“用这首自己剪”是名字下面的小链接。手机上也是同一列（不再两颗大胶囊占一行） */
.rt-list .rt-pr { white-space: nowrap; padding-inline: var(--space-14); }
.rt-pr[aria-expanded="true"] { border-color: var(--ink); }
/* 铃声模板的提示词面板（10-27）：按“提示词”原地展开，上缘撕线（同背景音乐页的面板）；提示词框本身在 shell.css */
.rt-pr-panel { display: grid; gap: var(--space-12); margin: 0 0 var(--space-14); padding-top: var(--space-14); border-top: 2px dashed var(--line); }
.rt-pr-panel .pr-acts { margin: 0; }
.rt-pr-panel .btn-main .gl { width: 18px; height: 18px; }
.rt-edit { display: inline-block; margin-top: var(--space-2); font-size: 14px; line-height: 1.5; color: var(--ink); text-underline-offset: 3px; }   /* fine-print 字级；墨色（红色只给主按钮与正在播） */
@media (pointer: coarse) { .rt-edit { display: inline; padding-block: var(--space-12); } }   /* 触摸：上下内距撑出约 44px 的点击范围、不撑高这一列 */
/* 第 4 轮 R4-B8：曲名下的琥珀线拿掉（背景音乐清单正在播只有播放键变；两页一样） */
/* “再显示 N 首”（第 4 轮 R4-B2）：跟背景音乐清单的“再显示”同一个样子（btn-ghost＋旁边一行小字） */
.rt-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-14); margin-top: var(--space-14); }
.rt-more .fine { color: var(--ink-2); }
/* “适合当”与“你的手机”两排：电脑并排（左右各一组），手机上下 */
.rt-ready-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-10) var(--space-28); margin-top: var(--space-4); }
.rt-ready-pick .rt-sets-row { margin-top: 0; }
/* 第 1 步“搜索背景音乐的全部曲子”（网站主人 10-26 核准，第 5 轮品味 2）：输入框同菜单的外框；结果是一串可以按的列（不加底色的框，只有细线分隔） */
.rt-find { display: grid; gap: var(--space-6); margin-bottom: var(--space-10); }
.rt-find-input { width: min(100%, 26em); min-height: var(--tap-min); padding: 0 var(--space-14); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--bg); color: var(--ink); font: 400 17px/1.4 var(--font-body); }   /* 跟设计系统的 select 同一个样子（胶囊框、body 字级） */
.rt-find-list { max-width: 26em; }
.rt-find-input:focus-visible { border-color: var(--ink); }
.rt-find-st { color: var(--ink-2); }
.rt-find-go { margin: 0; }
.rt-find-go a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--ink); text-underline-offset: 3px; }   /* 第 6 轮 R6-B5：到背景音乐搜同一个词（触摸点击范围 44px） */
.rt-find-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rt-find-list > li { border-bottom: 1px solid var(--line); }
.rt-find-hit { display: grid; gap: var(--space-2); width: 100%; min-height: var(--tap-min); padding: var(--space-8) var(--space-4); border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; border-radius: var(--radius-6); }
.rt-find-hit:hover b { text-decoration: underline; text-underline-offset: 3px; }
.rt-find-hit b { font: 700 16px/1.35 var(--font-body); }
.rt-find-hit span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rt-dl-note { display: flex; gap: var(--space-8); align-items: flex-start; margin-top: var(--space-18); font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 46em; }
.rt-dl-note .gl { margin-top: var(--space-4); }
@media (max-width: 900px) { .rt-list { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 640px) {
  .rt-sets { gap: var(--space-6); }
  .rt-sets .chip { padding: 0 var(--space-12); gap: var(--space-4); }
  /* 第 4 轮：分类多了“全部”一颗，手机上排成一排横卷、跟“适合当”同一行（跟背景音乐的用途胶囊一样），不多占两行 */
  .rt-sets-row { flex-wrap: nowrap; flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .rt-sets-row .rt-pick-label { flex: none; }
  .rt-sets { flex-wrap: nowrap; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: var(--space-2); }
  .rt-sets::-webkit-scrollbar { display: none; }
  .rt-sets .chip { flex: none; }
  .rt-mstep .rt-btns { gap: var(--space-8); }
  .rt-mstep .rt-btns .rt-pill { padding: 0 var(--space-12); gap: var(--space-6); }
}

/* ---------- 铃声还可以这样用：四个点子并排（细线分区，不加底色） ---------- */
.rt-ideas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-28); }
.rt-idea { display: grid; gap: var(--space-10); align-content: start; justify-items: start; border-top: 2px solid var(--line); padding-top: var(--space-18); }
.rt-idea .ic { width: 42px; height: 42px; color: var(--ink); }
.rt-idea-h { font: 700 22px/1.3 var(--font-body); }   /* item-title */
.rt-idea p { font-size: 16px; color: var(--ink-2); }
@media (max-width: 1080px) { .rt-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 第 5 轮 R5-B7：第 3 步四颗钮在手机排成 3＋1（“延后 1 秒”一个人一行）→ 手机 2×2：“听这一段”“帮我挑”一列、“提早”“延后”一列 */
@media (max-width: 640px) { .rt-mstep .rt-lane-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .rt-mstep .rt-lane-btns .rt-pill { justify-content: center; } }
.rt-ideas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 64em; }   /* 第 5 轮品味 1：四个点子剩两个（家人专属、节日铃声在这页别处已有入口） */
/* 手机：点子改成“图标在左、字与按钮在右”，一个点子约 130px（原本 190～270px；第 3 轮 R3-B4 铃声页太长） */
@media (max-width: 640px) {
  section.rt-band { padding-block: var(--space-28); }   /* 手机每段上下 48 → 28px（第 3 轮 R3-B4：375 宽整页要 ≤ 7,500px） */
  .rt-ideas { grid-template-columns: minmax(0, 1fr); gap: var(--space-14); }
  .rt-idea { grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--space-12); row-gap: var(--space-4); padding-top: var(--space-12); }
  .rt-idea .ic { grid-row: 1 / span 3; width: 30px; height: 30px; }
  .rt-idea > :not(.ic) { grid-column: 2; }
  .rt-idea-h { font-size: 18px; }
  .rt-idea p { font-size: 15px; line-height: 1.6; }
  .rt-idea .rt-pill { margin-top: var(--space-4); }
}

/* ---------- 自己剪一段：电脑左边 1～4 步、右边黏着手机预览；下载在两栏下面。手机一步一步往下 ---------- */
.rt-privacy { display: flex; gap: var(--space-10); align-items: flex-start; max-width: 46em; margin-bottom: var(--space-24); padding-block: var(--space-12); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.7; color: var(--ink); }
.rt-privacy .gl { margin-top: var(--space-4); width: 18px; height: 18px; }
.rt-make { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "steps out" "dl out"; column-gap: var(--space-44); align-items: start; }   /* 听听看跨两列：卷到下载时，黏住的手机预览还在旁边，也不会盖到下载那一列的分隔线 */
.rt-make-steps { grid-area: steps; min-width: 0; }
.rt-make-out { grid-area: out; position: sticky; top: calc(var(--header-height) + var(--space-16)); }
.rt-make-dl { grid-area: dl; min-width: 0; }
@media (max-width: 1080px) { .rt-make { grid-template-columns: minmax(0, 1fr); grid-template-areas: "steps" "out" "dl"; } .rt-make-out { position: static; } }
.rt-mstep { padding-block: var(--space-22); border-top: 1px solid var(--line); }
.rt-make-steps > .rt-mstep:first-child, .rt-make-out > .rt-mstep:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 1080px) { .rt-make-out > .rt-mstep:first-child { border-top: 1px solid var(--line); padding-top: var(--space-22); } }
.rt-mstep-h { display: flex; align-items: center; gap: var(--space-10); margin-bottom: var(--space-14); font: 700 22px/1.3 var(--font-body); }   /* item-title */
.rt-mstep-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 800 17px/1 var(--font-display); flex: none; }   /* 数字用电台的数字字体 */

/* 新组件：选项卡（单选；用途、来源）：外框 line-strong、选中 ink 底（同 Segmented 选中那格） */
.rt-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-10); }
.rt-opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rt-opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 第 1 步来源只剩两种（10-27：不再从背景音乐剪） */
.rt-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic b" "ic s"; column-gap: var(--space-10); align-items: center; min-height: 68px; padding: var(--space-10) var(--space-14); border: 1.5px solid var(--line-strong); border-radius: var(--radius-14); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.rt-opt > .ic { grid-area: ic; width: 30px; height: 30px; }
.rt-opt > b { grid-area: b; font: 700 17px/1.3 var(--font-body); }   /* button 字级 */
.rt-opt > span { grid-area: s; font-size: 14px; line-height: 1.4; color: var(--ink-2); }   /* fine-print */
.rt-opt:hover:not([aria-checked="true"]) { border-color: var(--ink); }
/* 第 3 轮 R3-B3：选中照设计规格“按下的胶囊钮用 amber”，卡片、分段钮、胶囊同一种样子（原本卡片与分段钮是墨黑、深色反白） */
.rt-opt[aria-checked="true"] { background: var(--amber); border-color: var(--ink); color: var(--on-amber); }   /* 网站主人 10-26 核准：琥珀底加墨色外框 */
.rt-opt[aria-checked="true"] > span { color: var(--on-amber); }
.seg button[aria-pressed="true"] { background: var(--amber); color: var(--on-amber); }   /* 设计系统 bundle 的分段钮默认是墨黑：这一页照规格改琥珀（见修正纪录“需要主控改”） */
@media (max-width: 1280px) { .rt-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1280px) and (min-width: 1081px) { .rt-opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rt-opts-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .rt-opts { grid-template-columns: minmax(0, 1fr); } .rt-opt { min-height: 60px; } }
.rt-confirm { display: grid; gap: var(--space-10); margin-top: var(--space-12); padding-block: var(--space-12); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.rt-confirm p { font: 700 17px/1.5 var(--font-body); }

.rt-src-panel { display: grid; justify-items: start; gap: var(--space-8); margin-top: var(--space-16); }
.rt-src-panel select { width: min(100%, 26em); min-height: var(--tap-min); font-size: 17px; }   /* body 字级；设计系统的 select 已有 bg、ink、line-strong 外框 */
.rt-src-info { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.rt-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }   /* 键盘焦点在它身上，画面上看到的是后面那颗钮 */
.rt-file-input:focus-visible + .rt-file-btn { outline: 3px solid var(--red-ink); outline-offset: 3px; }
.rt-file-btn { cursor: pointer; }
.rt-own { display: grid; gap: var(--space-8); margin-top: var(--space-6); }
.rt-who { display: grid; justify-items: start; gap: var(--space-6); margin-top: var(--space-14); }
.rt-who input { width: min(100%, 14em); min-height: var(--tap-min); padding: 0 var(--space-16); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--bg); color: var(--ink); font: 400 17px/1.2 var(--font-body); }   /* body 字级 */
.rt-who input::placeholder { color: var(--ink-2); }

/* 新组件：剪段轨道（TrackList 的 glass 轨道＋纸胶带名字）：整首的波形淡淡的，框里亮琥珀；框可以拖、可以用键盘移 */
.rt-lane-box { position: relative; }
.rt-tape { display: inline-block; max-width: 100%; margin-bottom: var(--space-8); padding: 0 var(--space-8); border-radius: var(--radius-2); background: var(--tape); color: var(--tape-ink); font: 700 15px/1.6 var(--font-body); transform: rotate(-1.2deg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-lane { position: relative; height: 88px; border-radius: var(--radius-10); background: var(--glass); overflow: hidden; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.rt-lane.is-dragging { cursor: grabbing; }
.rt-lane.is-whole { cursor: default; }
.rt-wave { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rt-wave-all { fill: var(--glass-dim); opacity: .5; }   /* 框外：只当背景看位置（不是要读的信息） */
.rt-wave-in { fill: var(--amber); }   /* 框里＝会做成铃声的那一段：亮起来 */
.rt-frame { position: absolute; top: 0; bottom: 0; left: var(--l, 0%); width: var(--w, 100%); border: 2px solid var(--glass-ink); border-radius: var(--radius-6); }
.rt-frame:focus-visible { outline: 3px solid var(--glass-red-ink); outline-offset: -6px; }   /* 轨道会裁掉外面，焦点框画在框里 */
.rt-grip { position: absolute; left: 50%; top: 50%; width: 6px; height: 28px; transform: translate(-50%, -50%); border-radius: var(--radius-pill); background: var(--glass-ink); }
.rt-lane.is-whole .rt-grip { display: none; }
.rt-playhead { position: absolute; top: 0; bottom: 0; left: var(--p, 0%); width: 2px; transform: translateX(-50%); background: var(--glass-red-line); opacity: 0; }
.rt-lane.is-ringing .rt-playhead { opacity: 1; }
.rt-lane-wait { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--space-16); font-size: 15px; color: var(--glass-ink); text-align: center; }
.rt-ruler { position: relative; height: 22px; margin-top: var(--space-4); }
.rt-ruler > span { position: absolute; top: var(--space-4); transform: translateX(-50%); font: 400 12px/1 var(--font-body); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }   /* mono-label 字级；“秒”“分”用内文字型 */
.rt-ruler > span:first-child { transform: none; }
.rt-ruler > span:last-child { transform: translateX(-100%); }
.rt-readout { margin-top: var(--space-12); font: 700 17px/1.5 var(--font-body); font-variant-numeric: tabular-nums; }   /* body 字级、粗 */
.rt-mstep .rt-btns { margin-top: var(--space-10); }
.rt-lane-help { margin-top: var(--space-10); max-width: 40em; }

.rt-check { display: flex; align-items: center; gap: var(--space-10); min-height: var(--tap-min); font-size: 17px; line-height: 1.4; cursor: pointer; }
.rt-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
.rt-check-info { margin-left: var(--space-28); margin-top: calc(var(--space-4) * -1); }
.rt-fix-row { display: grid; justify-items: start; gap: var(--space-8); margin-top: var(--space-16); }
.rt-fix-row .seg button { font-size: 15px; }
@media (pointer: coarse) { .rt-fix-row .seg button, .rt-own .seg button { min-height: var(--tap-min); padding-inline: var(--space-18); } }

/* 预览 */
.rt-preview { display: grid; justify-items: center; gap: var(--space-16); }
.rt-preview-side { display: grid; justify-items: start; gap: var(--space-8); width: 100%; }
.rt-preview-what { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.rt-preview-side .chip { min-height: var(--tap-min); padding: 0 var(--space-16); font-size: 15px; }
@media (max-width: 1080px) { .rt-preview { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; } }
@media (max-width: 640px) { .rt-preview { grid-template-columns: minmax(0, 1fr); justify-items: center; } }

/* 下载 */
.rt-out { display: grid; gap: var(--space-12); max-width: 46em; }
.rt-out-why { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.rt-dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }
.rt-dl-row .chip { min-height: var(--tap-min); padding: 0 var(--space-16); font-size: 15px; }
.rt-dl-what { max-width: 40em; }
.btn[aria-busy="true"] { cursor: progress; }
.rt-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8) var(--space-12); align-items: center; }
.rt-bar { grid-column: 1 / -1; height: 10px; border-radius: var(--radius-pill); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-strong); overflow: hidden; }
.rt-bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--ink); }
.rt-progress-t { font-size: 15px; font-variant-numeric: tabular-nums; }
.rt-remind { display: grid; justify-items: start; gap: var(--space-8); padding-block: var(--space-16); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.rt-remind-kick { font: 700 15px/1.25 var(--font-body); color: var(--red-ink); }
.rt-remind-big { font: 700 26px/1.3 var(--font-body); }   /* program-title：用户原句要大字 */
.rt-remind-t { font-size: 17px; line-height: 1.6; }
.rt-done { display: grid; justify-items: start; gap: var(--space-10); }
.rt-done p { font: 700 17px/1.5 var(--font-body); }

/* ---------- 新组件：安装教学（一步一列：号码、图标、照手机上的字写的说明、画面示意） ---------- */
.rt-guide { display: grid; gap: var(--space-18); max-width: 52em; }
.rt-guess { font: 700 17px/1.5 var(--font-body); }
.rt-computer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8) var(--space-8); align-items: start; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.rt-computer > .gl { margin-top: var(--space-4); }
.rt-computer > .rt-pill { grid-column: 2; justify-self: start; }
.rt-quote-hint { font-size: 15px; color: var(--ink-2); }
/* 小事修正 10-26：页面原代码里的 iPhone 界面字写了繁中、简中两种（ringtones-guide.js 的 IQ）；依页面语言只显示一种，程序跑完重画时就只剩一种 */
:root:not([lang="zh-Hans"]) .rt-cn, :root[lang="zh-Hans"] .rt-tw { display: none; }
/* 铃声页“装到手机”的三步摘要（第 3 轮 R3-B4）：完整步骤在安装页 */
.rt-sum-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-14); }
.rt-sum-steps > li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-12); align-items: start; }
.rt-sum-steps b { font-weight: 700; }   /* 这一步叫什么，跟说明接在同一段（手机少一行） */
.rt-sum-steps p { font-size: 16px; line-height: 1.7; color: var(--ink); }
.rt-sum-steps .rt-tip { margin-top: var(--space-6); }
.rt-sum-steps .rt-tip { color: var(--ink-2); }

/* 家人专属：说清楚是“某一个人打来时才响”（读者测试 10-24：被读成替家人做铃声） */
/* 设计评审 10-25 必修 9：原本是有底色的框＋琥珀左边线（taste.md 否决过的“有底色的面板与提醒框、框线”）→ 拿掉框和底色，改成粗体一句 */
.rt-family-hint { margin: var(--space-4) 0 var(--space-8); max-width: 40em; font-size: 17px; line-height: 1.65; font-weight: 700; color: var(--ink); }
.rt-way { border-top: 2px solid var(--ink); padding-top: var(--space-18); }
.rt-way-alt { border-top: 2px dashed var(--line-strong); }   /* 另一种做法：撕线（同节目表） */
.rt-way-kick { font: 700 15px/1.25 var(--font-body); color: var(--ink-2); margin-bottom: var(--space-4); }
.rt-way-h { font: 700 22px/1.3 var(--font-body); }   /* item-title */
.rt-way-lead { margin-top: var(--space-6); font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 44em; }
.rt-steps { list-style: none; margin: var(--space-14) 0 0; padding: 0; display: grid; }
.rt-step { display: grid; grid-template-columns: 30px 42px minmax(0, 1fr); column-gap: var(--space-14); align-items: start; padding-block: var(--space-14); border-top: 1px solid var(--line); }
.rt-step-n { font: 800 26px/1.3 var(--font-display); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }   /* 步骤号码：只是号码，不画成圆钮（免得看成可以按） */
.rt-step-ic { width: 42px; height: 42px; color: var(--ink); }
.rt-step-t { min-width: 0; }
.rt-step-t > p { font-size: 18px; line-height: 1.7; }   /* lead-text：长辈要大字 */
.rt-step-t > .rt-tip { margin-top: var(--space-6); font-size: 16px; color: var(--ink-2); }
.rt-step-last .rt-step-t > p { font-weight: 700; }
@media (max-width: 640px) { .rt-step { grid-template-columns: 22px 32px minmax(0, 1fr); column-gap: var(--space-10); } .rt-step-ic { width: 32px; height: 32px; } .rt-step-n { font-size: 22px; } }
/* 画面示意：一块深色的小屏幕，依序列出会点到的字，要点的那一个亮琥珀；只是图（aria-hidden），不是按钮 */
.rt-screen { display: grid; gap: var(--space-6); width: min(100%, 20em); margin: var(--space-10) 0 0; padding: var(--space-10); border-radius: var(--radius-14); background: var(--glass); color: var(--glass-ink); box-shadow: inset 0 0 0 1.5px var(--glass-edge); cursor: default; }
.rt-screen ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.rt-screen li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-8) var(--space-12); border-radius: var(--radius-8); background: var(--glass-2); font: 700 15px/1.3 var(--font-body); }
.rt-screen li.on { background: var(--amber); color: var(--on-amber); }
.rt-chev { flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.rt-screen figcaption { font-size: 13px; line-height: 1.4; color: var(--glass-dim); }   /* caption */
/* 第 4 轮品味 7：安装页 1440 宽步骤栏到 1,030px 就停、右边 264px 空着 → 1100 以上“画面示意”放到那一步的右边（跟说明同一列），
   说明那一栏宽度不变（没有画面示意的步骤也留同一栏宽，每一步的字对齐）；步骤以外的说明句照旧不超过 52em */
@media (min-width: 1100px) {
  .rt-guide:has(.rt-steps) { max-width: none; }
  .rt-guide:has(.rt-steps) > :not(.rt-way) { max-width: 52em; }
  .rt-step-t { display: grid; grid-template-columns: minmax(0, 1fr) 18em; column-gap: var(--space-28); align-items: start; }
  .rt-step-t > * { grid-column: 1; }
  .rt-step-t > .rt-screen { grid-column: 2; grid-row: 1 / span 8; margin-top: 0; width: 100%; }
}
.rt-aside { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: var(--space-14); padding-top: var(--space-18); border-top: 1px solid var(--line); }
.rt-aside > .ic { width: 42px; height: 42px; color: var(--ink); }
.rt-aside-h { font: 700 18px/1.35 var(--font-body); }
.rt-aside p { margin-top: var(--space-6); font-size: 17px; line-height: 1.7; }
@media (max-width: 640px) { .rt-aside { grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--space-10); } .rt-aside > .ic { width: 32px; height: 32px; } }

/* ---------- 送给家人 ---------- */
.rt-share { display: grid; gap: var(--space-12); max-width: 46em; }
.rt-share-what { font: 700 17px/1.5 var(--font-body); }
.rt-share .chip { min-height: var(--tap-min); padding: 0 var(--space-16); font-size: 15px; }

/* ---------- 样稿注记（默认收起来；正式网站不会有） ---------- */
.rt-notes { padding-block: var(--space-24); border-top: 1px solid var(--line); }
.mock-notes summary { display: flex; align-items: center; min-height: var(--tap-min); font: 700 15px/1.25 var(--font-body); color: var(--ink-2); cursor: pointer; }
.mock-notes-body { padding-top: var(--space-10); }
.mock-notes-list { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: var(--space-10) var(--space-18); margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }   /* fine-print */
.mock-notes-list dt { font-weight: 700; color: var(--ink); }
.mock-notes-list dd { margin: 0; }
@media (max-width: 640px) { .mock-notes-list { grid-template-columns: minmax(0, 1fr); } .mock-notes-list dd { margin-bottom: var(--space-8); } }

/* ---------- 安装教学页（ringtones/install/） ---------- */
.rt-ins-head .wrap { padding-block: var(--space-28) var(--space-22); }
.rt-ins-head h1 { font: 700 clamp(32px, 4.4vw, 52px)/1.15 var(--font-body); letter-spacing: -.01em; }   /* page-title */
.rt-ins-head .lead { margin-top: var(--space-12); font-size: 18px; line-height: 1.7; color: var(--ink-2); max-width: 34em; }
/* 打开这一页最重要的一句（有人送铃声给你／铃声文件已经在手机里）：设计评审 10-25 必修 9 拿掉有底色的框与琥珀左边线，
   改成大标正下方、比引言大一级的粗体字（item-title 22px），长辈一眼看得到，不靠框 */
.rt-ins-sent { margin-top: var(--space-12); max-width: 30em; font-size: 22px; line-height: 1.5; font-weight: 400; color: var(--ink); }   /* 第 3 轮 R3-B11：整段粗体等于没有重点 → 一般字重，只有“免费，不用注册”加粗 */
.rt-ins-sent b { font-weight: 700; }
@media (max-width: 640px) { .rt-hero h1, .rt-ins-head h1 { font-size: 34px; } .rt-ins-sent { font-size: 18px; } }   /* 各页页名在手机统一 34px（设计评审 10-25）；那一句在手机用 lead 字级，免得比大标还抢 */
.rt-ins-song { display: grid; gap: var(--space-12); max-width: 46em; container-type: inline-size; }
.rt-ins-song .rt-item-in { padding-block: 0; }
/* 英日文接线（10-27）：铃声两页的 .btn（设计系统不换行）在窄屏幕可以换行：英文“Download ringtone (M4A audio file)”“See all the steps (Google Pixel · For one family member)”
   在 320、375 宽把整页撑到 381～540px。行高 1 改 1.25、上下内距 14 改 12：一行的钮高度不变（45px），放得下的照旧一行 */
:is(.rt-hero, .rt-band, .rt-mstep, .rt-ins-song) .btn { max-width: 100%; white-space: normal; line-height: 1.25; padding-block: var(--space-12); text-align: start; }
:is(.rt-hero, .rt-band, .rt-mstep, .rt-ins-song) .btn .gl { flex: none; }
@container (max-width: 520px) { .rt-ins-song .rt-item-in { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "play t" "act act"; } .rt-ins-song .rt-item-act { justify-content: flex-start; } }
.rt-help { display: grid; gap: var(--space-8); max-width: 52em; margin-top: var(--space-24); padding-top: var(--space-18); border-top: 2px solid var(--ink); }
.rt-help p { font-size: 17px; line-height: 1.7; }

/* ---------- 打印（老师、社区据点印给长辈）：只留教学 ---------- */
@media print {
  .site-head, .tabbar, footer, .rt-notes, .rt-hero, #ready, #ideas, #make, #share, .rt-pick-row, .rt-quote-hint { display: none !important; }
  .rt-screen { box-shadow: none; }
  section.band { border-top: 0; }
}