/* 叮叮點歌 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; }
}