/* 叮叮點歌 dingsong.ai 操作樣稿・錄音室（2026-10-21，錄音室助手）
   跟 shell.css 一樣只用 token：顏色 var(--…)、間距 var(--space-…)、圓角 var(--radius-…)；字級只用字級表的值（後面註明級別）。
   元件本身的樣子在 bundle.css（Keys、Bars、Strings、Guitar、DrumKit、HandDrums、TrackList、Segmented、Stepper、Chip、IconButton、Button、Toast）；
   這裡只寫錄音室的排版與新元件（樂器選單、播音控制、ON AIR 燈、樂隊伴奏列、收合音軌、確認列、卡拉 OK 步驟列、提詞機、音量表、提醒卡）。 */

/* ---------- 頁首區：小標＋頁名＋第一句＋兩個分頁 ---------- */
.st-head .wrap { align-items: flex-end; justify-content: space-between; padding-block: var(--space-24) var(--space-14); }
.st-title { min-width: 0; flex: 1 1 30em; }
.st-kick { font: 800 15px/1 var(--font-display); letter-spacing: .16em; color: var(--red-ink); margin-bottom: var(--space-10); }   /* kicker */
.st-lead { margin-top: var(--space-10); font-size: 18px; line-height: 1.7; color: var(--ink-2); max-width: 36em; }   /* lead-text */
.st-tabs { flex: none; }
.st-lead-short { display: none; }   /* 手機才用的短句（見手機段） */
.seg button[role="tab"] { min-height: var(--tap-min); padding-inline: var(--space-22); font-size: 17px; }   /* button 字級：兩個分頁要一眼看得到 */
.seg button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.seg button[role="tab"]:hover:not([aria-selected="true"]) { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.st-panel { padding-bottom: var(--space-28); }

/* ---------- 樂器選單（新元件）：線條圖示＋紙膠帶名字；第一眼 8 種＋「更多樂器」 ---------- */
.st-pickrow { padding-top: var(--space-6); }
.st-pick-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-10); margin-bottom: var(--space-8); }
.st-pick-t b { font: 700 15px/1.25 var(--font-body); }   /* ui-label */
.st-pick-long, .st-pick-short { font-size: 15px; line-height: 1.5; color: var(--ink-2); }   /* 只指定說明那兩句（10-25 評審 T3：原本寫 .st-pick-t span，以詞換行包進「選樂器」的 span.nw 也被染成灰色，「選」黑「樂器」灰） */
.st-pick-short { display: none; }
.st-pick-t b * { color: inherit; }   /* 標題裡以詞換行包出來的 span 一律跟標題同色 */
.st-picker { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--space-6); }
.st-picker li { min-width: 0; display: flex; }   /* li 只包住按鈕（不然手機一排多出 20px 行高） */
.st-pick { width: 100%; min-height: 78px; display: grid; justify-items: center; align-content: center; gap: var(--space-6); padding: var(--space-8) var(--space-4); border: 0; border-radius: var(--radius-10); background: transparent; color: var(--ink); cursor: pointer; font: inherit; }
.st-pick .ic { width: 36px; height: 36px; }
.st-pick .tape { background: var(--tape); color: var(--tape-ink); font: 700 14px/1.35 var(--font-body); padding: 0 var(--space-8); border-radius: var(--radius-2); white-space: nowrap; transform: rotate(-1.2deg); }   /* tool-label 字級 */
.st-picker li:nth-child(3n+2) .tape { transform: rotate(.8deg); } .st-picker li:nth-child(3n) .tape { transform: rotate(-.4deg); }
.st-pick:hover { background: var(--panel); }
.st-pick[aria-pressed="true"] { background: var(--panel); box-shadow: inset 0 -3px 0 var(--ink); }   /* 選中：底下一條墨色線（像收音機選中的那一台），不用框 */
.st-pick:disabled { opacity: .35; cursor: not-allowed; }
.st-pick-more .st-more-t { font: 700 14px/1.35 var(--font-body); color: var(--ink); }
.st-picker-more { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px dashed var(--line); }

/* ---------- 播音台：樂器名＋怎麼彈＋聽聽看｜全部播放＋錄一段＋倒數＋ON AIR ---------- */
.st-stage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-18); margin-top: var(--space-14); padding-top: var(--space-14); border-top: 1px solid var(--line); }
.st-inst { display: flex; align-items: center; gap: var(--space-12); min-width: 0; flex: 1 1 22em; }
.st-inst .ic { width: 46px; height: 46px; flex: none; }
.st-inst-t { display: grid; gap: var(--space-4); min-width: 0; }
.st-inst-t b { font: 700 26px/1.1 var(--font-body); }   /* program-title */
.st-inst-t .fine { max-width: 30em; }
.st-inst .chip { flex: none; }
.st-transport { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10) var(--space-12); }
.st-count { font: 800 40px/1 var(--font-display); color: var(--red-ink); min-width: 1.2em; text-align: center; font-variant-numeric: tabular-nums; }   /* stat */
/* ON AIR 燈（新元件；收音機那顆的錄音室版）：平常不亮（讀者把常亮的 ON AIR 讀成「正在直播」），正在錄才亮紅 */
.st-onair { display: inline-flex; align-items: center; gap: var(--space-6); visibility: hidden; font: 800 14px/1 var(--font-display); letter-spacing: .14em; color: var(--on-red); background: var(--red); border-radius: var(--radius-pill); padding: var(--space-6) var(--space-10); }   /* on-air */
.st-bpm, .st-val, .st-count, .st-p-count, .st-p-time, .st-level-t, #track-count { font-variant-numeric: tabular-nums; }
.st-count small, .st-p-count small { font: 700 15px/1 var(--font-body); margin-inline-end: var(--space-4); vertical-align: middle; letter-spacing: 0; }   /* 倒數旁邊的「預備」 */
.st-song-how { color: var(--ink-2); }
.st-mic-on { display: inline-flex; align-items: center; gap: var(--space-8); font-weight: 700; color: var(--ink); }
.st-mic-on .gl { width: 20px; height: 20px; }
:has(+ #clear-all) { margin-inline-end: var(--space-16); }   /* 「清空重來」跟下載鈕隔開一點，不要誤按；空間加在前一顆的右邊：自己一行（375、768）時就不會縮排（10-23 使用者「照建議」） */
.st-onair i { width: 7px; height: 7px; border-radius: 50%; background: var(--on-red); }
.is-recording .st-onair { visibility: visible; }
#play-all[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* ---------- 設定列（Stepper 元件的排法）：長度、拍子、速度；其他收在「更多設定」 ---------- */
.st-settings { justify-content: flex-start; margin-top: var(--space-12); gap: var(--space-8) var(--space-18); }
.st-set-mid, .st-set-extra { display: contents; }
.st-settings:not(.open) .st-set-extra { display: none; }
.st-settings .stepper .st-bpm { min-width: 7em; text-align: center; color: var(--ink); font: 700 15px/1.2 var(--font-body); }   /* ui-label：「每分鐘 90 拍」（不寫「拍／分」：讀者看不懂） */
.st-settings .st-set-more { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 36px; padding: 0 var(--space-14); border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); font: 700 15px/1 var(--font-body); cursor: pointer; }   /* 照抄 bundle.css 的 .set-more（原本只在 640px 以下出現；這裡每種寬度都要） */
.st-settings .st-set-more:hover { border-color: var(--ink); }
.st-settings .st-set-more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.st-settings.open .st-set-more::after { transform: translateY(2px) rotate(225deg); }

/* ---------- 樂器操作台 ---------- */
.st-console { margin-top: var(--space-12); }
.st-console .instrument.keys { --white: 8; }
.st-console .k { padding-bottom: var(--space-10); }
.st-console .k-white .k-name { font: 700 17px/1 var(--font-body); }   /* body：簡譜數字要大 */
.st-console .k-black .k-name { font: 700 12px/1 var(--font-body); }   /* mono-label 字級 */
.st-console .bar .k-name, .st-console .str .k-name { font: 700 17px/1 var(--font-body); }
.st-console .k-name { position: relative; }
.st-console .k-name.hi::before, .st-console .k-name.hi2::before { content: ""; position: absolute; left: 50%; top: -7px; width: 4px; height: 4px; transform: translateX(-50%); border-radius: 50%; background: currentColor; }   /* 簡譜高音：數字上面一點 */
.st-console .k-name.hi2::after { content: ""; position: absolute; left: 50%; top: -13px; width: 4px; height: 4px; transform: translateX(-50%); border-radius: 50%; background: currentColor; }
.st-console .k-name.lo::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; transform: translateX(-50%); border-radius: 50%; background: currentColor; }   /* 低音：數字下面一點 */
.st-console .k-name[data-nophrase] { white-space: nowrap; }
/* 顏色標記（新；給小朋友）：每個音一種顏色＋一種形狀（色弱也分得出）。顏色從設計系統的 red、amber 推出來（同一組色相輪），之後補進設計系統成正式色票 */
.st-console { --note-1: var(--red); --note-2: color-mix(in oklch, var(--red) 50%, var(--amber)); --note-3: var(--amber);
  --note-4: color-mix(in oklch longer hue, var(--red) 25%, var(--amber)); --note-5: color-mix(in oklch longer hue, var(--red) 50%, var(--amber));
  --note-6: color-mix(in oklch longer hue, var(--red) 66%, var(--amber)); --note-7: color-mix(in oklch longer hue, var(--red) 82%, var(--amber)); }
.st-dot { display: block; width: 26px; height: 26px; color: var(--key-white-ink); }
.st-dot svg { display: block; width: 100%; height: 100%; }
.st-dot .bg { stroke: var(--key-white-ink); stroke-width: 1.5; }
.st-dot .sh { fill: var(--key-white-ink); }
.st-dot[data-d="1"] .bg { fill: var(--note-1); } .st-dot[data-d="2"] .bg { fill: var(--note-2); } .st-dot[data-d="3"] .bg { fill: var(--note-3); } .st-dot[data-d="4"] .bg { fill: var(--note-4); }
.st-dot[data-d="5"] .bg { fill: var(--note-5); } .st-dot[data-d="6"] .bg { fill: var(--note-6); } .st-dot[data-d="7"] .bg { fill: var(--note-7); }
.st-console .bar .st-dot .bg, .st-console .str .st-dot .bg { stroke: var(--glass-ink); }
.st-console .k.on .st-dot .bg, .st-console .bar.on .st-dot .bg { stroke: var(--on-amber); }
/* 鍵與音條：燈只亮在正在響的那一個（讀者測試：每個鍵都亮小燈，被看成「全部都亮」） */
.st-console .k-mark { display: none; }
.st-console .k-white.on, .st-console .k-white.pb { box-shadow: inset 0 -6px 0 var(--key-white-ink); }   /* 白鍵亮燈：琥珀色對白鍵只有 2.5:1，底下再加一條深色粗線 */
.st-console .bar { padding-bottom: var(--space-14); }
.st-console .instrument.kit .kit-svg { height: 240px; }
.st-console .instrument.kit { max-width: none; }   /* 10-25 第 2 輪必修 7：設計系統把鼓組限在 760px 寬；畫布改成 1000×330 之後，240px 高就是 727px 寬（1440 寬琴台的 63%） */
.is-big .st-console .instrument.keys, .is-big .st-console .instrument.bars, .is-big .st-console .instrument.strings { height: 300px; }
.is-big .st-console .k-white .k-name, .is-big .st-console .bar .k-name, .is-big .st-console .str .k-name { font-size: 26px; }   /* program-title 字級 */
.is-big .st-console .k-key { font-size: 13px; }
.is-big #status { font-size: 18px; }
.st-console .k-key { pointer-events: none; }
@media (pointer: coarse) { .st-console .k-key { display: none; } }   /* 手機、平板沒有電腦鍵盤：不印鍵位字母 */

/* 狀態列與隱私聲明 */
#status { margin-top: var(--space-10); }
#status .st-see { margin-inline-start: var(--space-8); vertical-align: middle; }   /* 錄好一軌：「看音軌」鈕接在狀態句後面（不再另跳一模一樣的提示列蓋住琴鍵，10-26 第 6 輪評審必修 1） */
.st-pent { margin-top: var(--space-10); max-width: 46em; }
/* 電腦鍵盤字母：預設收起來（10-24 第二輪讀者：琴鍵 3 下面寫 C、5 下面寫 B 會被當成音名），「更多設定」打開；只收有音高的（琴鍵、音條、豎琴），鼓與和弦的照舊。
   觸控裝置本來就不顯示字母（bundle.css），開關也不出現；小朋友模式同樣不出現 */
.hide-keys #instrument .k .k-key, .hide-keys #instrument .bar .k-key, .hide-keys #instrument .str .k-key { display: none; }
@media (pointer: coarse) { .st-keyopt { display: none; } }
html[data-kids] .st-keyopt { display: none; }   /* 五聲說明（琴台下面、狀態列上面；10-24） */
.is-recording #status { color: var(--ink); font-weight: 700; }   /* 錄音中：設計系統是紅字（6:1），這頁改成墨色（主要文字要 7:1），前面一顆紅點 */
.is-recording #status::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-inline-end: var(--space-6); border-radius: 50%; background: var(--red); vertical-align: 1px; }
.st-privacy { margin-top: var(--space-6); max-width: 46em; }

/* ---------- 音軌區（TrackList 元件）＋樂隊伴奏列＋收合的音軌 ---------- */
/* 輸入曲譜（10-25）：收合時一行標題；打開後曲名、拍子、速度一列，下面簡譜框（樣式跟音樂教室「自己寫一首」同一套） */
.st-score { margin-top: var(--space-24); }
.st-score-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-12); min-height: var(--tap-min); cursor: pointer; }
/* 收合列的展開記號（10-26 第 4 輪評審必修 7：summary 是 flex，Chrome 不畫三角形，看起來不像能按）：跟「提醒」收合列同一種箭頭，打開時轉向、不加動畫 */
.st-score-sum::-webkit-details-marker, .st-score-help summary::-webkit-details-marker { display: none; }
.st-score-sum::after, .st-score-help summary::after { content: ""; flex: none; align-self: center; width: 8px; height: 8px; margin-left: var(--space-4); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.st-score[open] > .st-score-sum::after, .st-score-help[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.st-score-sum::after, .st-score-help summary::after { order: -1; }   /* 兩個收合列的箭頭都在文字左邊（跟教室「簡譜文字怎麼寫」同一側，第 5 輪評審必修 5） */   /* 箭頭放在標題前面：標題後面接一段說明，放後面會掉到說明後面 */
.st-score-sum b { font: 700 22px/1.3 var(--font-body); }   /* item-title */
.st-score-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); margin-top: var(--space-12); max-width: 52em; }   /* minmax(0)：320 寬不被簡譜框撐出畫面（必修 5） */
.st-score-f { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-12) var(--space-22); }
.st-f { display: grid; gap: var(--space-6); font: 700 15px/1.25 var(--font-body); }   /* ui-label */
.st-f input[type="text"], .st-f textarea { width: 100%; min-height: var(--tap-min); padding: var(--space-10) var(--space-14); border: 1.5px solid var(--line-strong); border-radius: var(--radius-12); background: var(--bg); color: var(--ink); font: 400 17px/1.5 var(--font-body); }
.st-f-t input[type="text"] { min-width: min(14em, 100%); }
.st-f input::placeholder, .st-f textarea::placeholder { color: var(--ink-2); }
.st-f select { min-height: var(--tap-min); }
.st-score-text textarea { resize: vertical; font-family: var(--font-mono); }
.st-score-text textarea.drop { outline: 3px dashed var(--amber); outline-offset: 2px; }   /* 檔案拖到框上 */
.st-score-msg { min-height: 1.6em; margin: 0; font-size: 15px; color: var(--ink-2); }
.st-score-help { color: var(--ink-2); font-size: 15px; }
.st-score-help summary { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--tap-min); color: var(--ink); font-weight: 700; cursor: pointer; }
.st-score-help ul { margin: var(--space-6) 0 0; padding-left: var(--space-22); display: grid; gap: var(--space-4); }
.st-score-acts { display: flex; flex-wrap: wrap; gap: var(--space-10); }
#sc-go { background: var(--ink); color: var(--bg); }   /* 面板的主動作：跟「全部播放」同一種墨色實心（必修 6：原本沒套到，是瀏覽器原生灰鈕）；紅色留給錄音 */
@media (max-width: 400px) { .st-score-f { display: grid; grid-template-columns: minmax(0, 1fr); } .st-score-f .st-f, .st-score-f select { min-width: 0; width: 100%; } .st-score-body .btn { max-width: 100%; white-space: normal; text-align: left; } }   /* 「到音樂教室自己寫一首」那顆鈕在 320 寬原本不換行、撐到 357px */
html[data-kids] .st-score { display: none; }
/* 矮的手機（360×640 這類）：頁頭那句說明收起來，琴台與琴鍵數字列整個在底部五台上面（10-26 第 5 輪評審必修 8：原本露出 89%、數字列被蓋）；h1 與分頁籤照留 */
@media (max-width: 640px) and (max-height: 700px) { .st-title p.lead { display: none; } }   /* 小朋友模式不放（跟和弦格、MIDI 一樣收起來） */
.st-tracks-panel { margin-top: var(--space-24); padding-top: var(--space-18); }
.st-tracks-panel .tracks-head h2 { font: 700 26px/1.2 var(--font-body); }   /* program-title */
.st-tracks-panel .tracks { overflow: visible; }
.st-draft { margin-top: var(--space-12); }
.st-empty { padding-block: var(--space-14); color: var(--ink-2); font-size: 15px; border-top: 1px solid var(--line); }
.track .tr-name .tape { font-size: 15px; }
.tr-name .st-from { font-size: 12px; line-height: 1.35; color: var(--ink-2); word-break: keep-all; overflow-wrap: break-word; }   /* 「從音樂教室帶來：小星星」 */
.track .tr-ctl input[type="range"] { width: 92px; }
.st-vol { display: inline-flex; align-items: center; gap: var(--space-6); font-size: 13px; line-height: 1.3; color: var(--ink-2); }   /* caption：音軌、樂隊的「大小聲」 */
.st-vol input[type="range"] { width: 92px; min-height: 32px; accent-color: var(--ink); }   /* 拉桿的可按範圍至少 24×24（WCAG 2.5.8）；手機 44 */
.track.st-fresh .lane { box-shadow: 0 0 0 2px var(--ink); }   /* 剛錄好的那一軌：外框一圈墨色（紅色只給錄音） */
.lane .st-ph { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--glass-red-line); transform: translateX(calc(var(--x, 0) * 1px)); visibility: hidden; }   /* 播放線 */
.is-playing .lane .st-ph { visibility: visible; }
.lane .blk.lit { fill: var(--glass-red); }
.lane .bar-line { stroke: var(--glass-rule); }
.lane .beat-line { stroke: var(--glass-rule); opacity: .5; }

/* 樂隊伴奏列（新元件）：跟音軌同一排法；軌道上是每一小節的和弦，點一下可以換 */
.st-band { display: grid; grid-template-columns: 236px minmax(0, 1fr) auto; grid-template-areas: "head lane ctl"; column-gap: var(--space-16); row-gap: var(--space-8); align-items: center; padding-block: var(--space-6); border-top: 1px solid var(--line); }
.st-band-head { grid-area: head; display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.st-band-head .ic { width: 28px; height: 28px; flex: none; }
.st-band-name { display: grid; line-height: 1.3; min-width: 0; }
.st-band-name .tape { justify-self: start; background: var(--tape); color: var(--tape-ink); font-weight: 700; font-size: 15px; padding: 0 var(--space-8); border-radius: var(--radius-2); transform: rotate(.8deg); }
.st-band-name small { font-size: 13px; color: var(--ink-2); }   /* caption */
.st-band.dim .st-chords { background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--line-strong); }   /* 樂隊關掉：換成淺底＋次要字色（不用透明度：格子還能按，字要讀得到） */
.st-band.dim .st-chord { color: var(--ink-2); border-left-color: var(--line); }
.st-band.dim .st-chord .num { color: var(--ink); }
.st-band.dim .st-chord:hover { background: var(--line); }
.st-band.dim .st-chords :focus-visible { outline-color: var(--red-ink); }
.st-band.dim .st-band-name .tape { opacity: .7; }
.st-chords { grid-area: lane; position: relative; display: grid; grid-template-columns: repeat(var(--bars, 4), minmax(0, 1fr)); gap: 0; background: var(--glass); border-radius: var(--radius-10); overflow: hidden; min-height: 44px; }
.st-chord { position: relative; display: grid; place-items: center; min-height: 44px; padding: 0; border: 0; border-left: 1px solid var(--glass-rule); background: transparent; color: var(--glass-ink); font: 800 22px/1 var(--font-display); cursor: pointer; }   /* chord-name 的字型，小一級 */
.st-chord:first-child { border-left: 0; }
.st-chord:hover { background: var(--glass-2); }
.st-chord .num { position: absolute; left: var(--space-4); top: var(--space-4); font: 400 11px/1 var(--font-mono); color: var(--glass-dim); }
/* 10-26 第 4 輪評審必修 8：16 小節時每格只剩 23～25px，小節號壓在和弦字上、和弦字擠出格子 → 超過 8 小節排成兩排（每排 8 格）；和弦字往下讓出小節號那一角 */
.st-chords:has(> .st-chord:nth-child(9)) { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.st-chords:has(> .st-chord:nth-child(9)) .st-chord:nth-child(n+9) { border-top: 1px solid var(--glass-rule); }
.st-chords:has(> .st-chord:nth-child(9)) .st-chord:nth-child(8n+1) { border-left: 0; }
.st-chords > .st-chord { padding-top: var(--space-12); min-height: 50px; }   /* 選擇器加一層：手機版另有 .st-chord 的 min-height 44px 會蓋掉 */   /* freq-label 字級 */
.st-chord.now { background: var(--amber); color: var(--on-amber); }
.st-chord.now .num { color: var(--on-amber); }
.st-chord[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--glass-red-ink); }
.st-chords :focus-visible { outline-color: var(--glass-red-ink); outline-offset: -4px; }
.st-band-ctl { grid-area: ctl; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.st-band-ctl select { padding-block: var(--space-6); }
.st-band-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-12); }
.st-band-tools .fine { flex: 1 1 18em; }
/* 換和弦的小面板：六個和弦鍵＋照旋律配 */
.st-chordmenu { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); padding: var(--space-10) var(--space-12); background: var(--glass); color: var(--glass-ink); border-radius: var(--radius-14); }
.st-chordmenu p { flex-basis: 100%; font-size: 14px; color: var(--glass-text-2); }   /* fine-print */
.st-chordmenu .chord { min-height: 48px; min-width: 64px; padding: 0 var(--space-12); }
.st-chordmenu .chord b { font: 800 26px/1 var(--font-display); }   /* chord-name */
.st-chordmenu .chord small { font: 400 11px/1 var(--font-mono); color: var(--glass-dim); }
.st-chordmenu .chord[aria-pressed="true"] small { color: var(--on-amber); }
.st-chordmenu :focus-visible { outline-color: var(--glass-red-ink); }
.st-chordmenu .chip { color: var(--glass-ink); border-color: var(--glass-edge); }
.st-chordmenu .chip:hover { border-color: var(--glass-ink); }
@media (max-width: 1080px) { .st-band { grid-template-columns: 236px minmax(0, 1fr); grid-template-areas: "head lane" "ctl ctl"; } .st-band-ctl { justify-content: flex-end; } }
@media (max-width: 640px) {
  .st-band { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "ctl" "lane"; }
  .st-band-ctl { justify-content: flex-start; }
  .st-chords { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
  .st-chord { border-top: 1px solid var(--glass-rule); }
  .st-band-ctl .chip, .st-band-tools .chip, .st-band-ctl select { min-height: var(--tap-min); }
}

/* ---------- 混音器第一批（2026-10-22，docs/05_混音器方案_v1.md 第三節）----------
   每一軌：大小聲 5 格（－／拉桿／＋＋文字＋回到剛好）常駐；靜音在標題列；只聽這軌、重錄、刪除收進「更多」（各種寬度都一樣）
   電腦（>1080）：名字｜音符｜大小聲 一排；中寬：大小聲在音符下面；手機：名字 → 更多 → 大小聲 → 音符 */
.track, .st-band { grid-template-columns: 320px minmax(0, 1fr) auto; }   /* 名字欄 236→320：標題列多了「靜音」，236 會把「播這軌」壓到字上（樂隊同寬，音符與和弦格的起點才對齊） */
.track { grid-template-areas: "head lane mix" "ctl . ."; }   /* 「更多」打開的那一排在名字欄下面（評審：離「更多」鈕近，眼睛不用跳） */
/* 標題列兩行：①圖示＋名字＋第幾軌 ②播這軌／靜音／更多（評審：名字原本被三顆鈕擠到剩 70px、拆成兩行；鈕要寫字） */
.track .tr-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ic name solo" "ic btns btns"; column-gap: var(--space-8); row-gap: var(--space-6); align-items: center; }
.track .tr-head > .st-solo-on { grid-area: solo; min-height: 40px; padding-inline: var(--space-12); }   /* 開著的「只聽這軌」放在名字那一行右邊（四顆鈕一行放不下） */
.track .tr-head > .ic { grid-area: ic; justify-self: center; }
.track .tr-name { grid-area: name; }
.tr-btns { grid-area: btns; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.tr-btns .chip { min-height: 40px; padding-inline: var(--space-12); }
.track .listen-t { display: inline; }   /* 手機也寫「試聽」（設計系統原本手機只留播放三角形） */
.track .st-more .gl { width: 18px; height: 18px; }
.track .tr-ctl { display: none; justify-content: flex-start; gap: var(--space-8); padding-inline-start: var(--space-48); }   /* 跟上面那排鈕的左緣對齊（圖示欄 40＋間隔 8） */
.tr-head > .st-solo-on:not([aria-pressed="true"]) { display: none; }   /* 「只聽這軌」開著時才出現在標題列（亮著、點一下就關） */
.track.open .tr-ctl { display: flex; }
.tr-ctl [data-act="del"] { margin-inline-start: var(--space-16); }   /* 讀者：「刪除」緊貼「重錄」怕手抖按到 → 隔開（另有確認列＋復原） */
.st-lvrow { grid-area: mix; display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.st-lv-b { width: 48px; height: 48px; }   /* 小聲一點／大聲一點：48×48（Android 48dp；長輩、手抖的人也點得到） */
.st-lv-b .gl { width: 20px; height: 20px; }
.st-lv-b:disabled { opacity: .45; cursor: default; }   /* 到盡頭了（停用的鈕不算進對比要求） */
.st-lv { position: relative; flex: 0 0 140px; display: flex; }   /* 固定寬：樂隊與各軌的拉桿上下對齊（評審） */
/* 拉桿自己畫（評審：原生的軌道 4px、圓頭 14px 太弱，日間沒到的那段看不見）：軌道 6px，到的那段墨色、沒到的 line-strong（≥3:1），圓頭 22px */
.st-lv input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; margin: 0; background: transparent; touch-action: pan-y; cursor: pointer; --fill: 50%; }   /* 上下滑照樣捲頁面，左右拖才改大小聲 */
.st-lv input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--ink) 0 var(--fill), var(--line-strong) var(--fill) 100%); }
.st-lv input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: var(--line-strong); }
.st-lv input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--radius-pill); background: var(--ink); }
.st-lv input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: calc(var(--space-8) * -1); border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); box-shadow: 0 0 0 1.5px var(--ink); }
.st-lv input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); box-shadow: 0 0 0 1.5px var(--ink); }
/* 5 格刻度，像頁首的電台刻度；中間「剛好」那條長一點 */
.st-lv::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 10px; pointer-events: none;
  background-image: linear-gradient(var(--line-strong), var(--line-strong)), linear-gradient(var(--line-strong), var(--line-strong)), linear-gradient(var(--ink-2), var(--ink-2)), linear-gradient(var(--line-strong), var(--line-strong)), linear-gradient(var(--line-strong), var(--line-strong));
  background-position: 0 100%, 25% 100%, 50% 100%, 75% 100%, 100% 100%; background-size: 2px 6px, 2px 6px, 2px 10px, 2px 6px, 2px 6px; background-repeat: no-repeat; }
.st-lv-v { min-width: 3.4em; font: 700 15px/1.2 var(--font-body); color: var(--ink); white-space: nowrap; }
.st-lv-reset { white-space: nowrap; }
.st-lv-reset[data-off] { visibility: hidden; }   /* 已經是剛好：鈕藏起來但位置留著，旁邊的東西不會跳 */
/* 小朋友：「大小聲」＋三顆圖示鈕（喇叭 1／2／3 條聲波，字在圖下面）；鈕之間多留空（4～6 歲常按錯） */
.st-lvrow-kids { gap: var(--space-24); }   /* 設計系統間距級距沒有 20；照評審「約 24 以上」 */
.st-kid-l { font: 700 15px/1.2 var(--font-body); color: var(--ink); white-space: nowrap; }
.st-lvrow-kids .st-kid { flex-direction: column; justify-content: center; gap: var(--space-2); min-width: 72px; min-height: 64px; padding: var(--space-6) var(--space-12); font-size: 16px; }   /* 選擇器寫兩層：蓋過後面觸控螢幕的 .chip 44px */
.st-kid .st-kid-ic { width: 32px; height: 24px; }
/* 樂器圖示跟著大小聲變大變小（Dewey & Wakefield 2016：會縮放的圖示最好認）：很小聲 0.7 倍～很大聲 1.3 倍，只在調的那一下變，不會自己動 */
.track .tr-head .ic, .st-band-head .ic { transform: scale(calc(.7 + var(--lv, 2) * .15)); transition: transform .15s ease-out; }
/* 播出中：這一軌現在聽得到（電台的樣子用在狀態上，不用在操作上；靜音、被「只聽某軌」關掉的軌不亮；點不閃） */
.st-air { display: none; margin-inline-start: var(--space-8); font: 700 12px/1 var(--font-mono); letter-spacing: .04em; color: var(--ink); white-space: nowrap; }
.st-air::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: var(--space-4); border-radius: 50%; background: var(--amber); vertical-align: 0; }
.track.air .st-air, .st-band.air .st-air { display: inline; }
.st-mute .gl, .tr-ctl .chip .gl, .st-band-ctl .chip .gl { width: 16px; height: 16px; }
/* 樂隊列多一格大小聲 */
.st-band { grid-template-areas: "head lane ctl" "tools tools mix"; }
.st-band-tools { grid-area: tools; }
.st-band .st-lvrow { justify-self: end; }
@media (max-width: 1080px) {
  .track, .st-band { grid-template-columns: 320px minmax(0, 1fr); }
  .track { grid-template-areas: "head lane" "ctl mix"; }
  .st-band { grid-template-areas: "head lane" "ctl mix" "tools tools"; }
  .st-band .st-lvrow { justify-self: start; }
  .st-band .st-band-ctl { justify-content: flex-start; padding-inline-start: var(--space-48); }   /* 跟各軌那排鈕同一條左緣（評審第二輪）；手機在下面改回 0 */
}
@media (max-width: 640px) {
  .track, .st-band { grid-template-columns: minmax(0, 1fr); }
  .track { grid-template-areas: "head" "ctl" "mix" "lane"; }
  .track .tr-ctl, .st-band .st-band-ctl { justify-content: flex-start; padding-inline-start: 0; }
  .st-band { grid-template-areas: "head" "ctl" "mix" "lane" "tools"; }
  .tr-btns .chip { min-height: var(--tap-min); }
  .st-lv { flex: 1 1 80px; min-width: 76px; }
  .st-lvrow-kids .st-kid { flex: 1 1 0; min-width: 0; max-width: 96px; }   /* 三顆平均排開 */
}
/* 320～360 寬：大小聲那一列放不下一行（10-25 評審 T1：320 寬整頁被撐到 349、底部五台被切掉）→ 折兩行：－／拉桿／＋ 一行，「剛好」與「回到剛好」一行。
   拉桿佔掉第一行剩下的寬（扣兩顆 48 的鈕和兩個 8 的間隔，再多扣 8），數值字就一定排到第二行；「回到剛好」藏起來時位置照留，列高不跳 */
@media (max-width: 360px) {
  .st-lvrow:not(.st-lvrow-kids) { flex-wrap: wrap; row-gap: var(--space-4); }
  .st-lvrow:not(.st-lvrow-kids) .st-lv { flex: 1 1 calc(100% - 120px); min-width: 0; }
}
/* 641～767 寬（手機橫放 667×375、740×360 這類）：名字欄 320 以後右欄只剩約 280，大小聲那一列（約 400）放不下，整頁被撐到約 760、「回到剛好」跑到畫面外（10-26 第 6 輪評審必修 2）
   → 大小聲改成自己一整列，排在名字與音符下面（更多那一排照舊在名字下面） */
@media (min-width: 641px) and (max-width: 767px) {
  .track { grid-template-areas: "head lane" "ctl ctl" "mix mix"; }
  .st-band { grid-template-areas: "head lane" "ctl ctl" "mix mix" "tools tools"; }
}
/* 平板（iPad 768）也是手指點：≥44（評審必修 1）。用 any-pointer：iPad 接鍵盤觸控板、可觸控的筆電，只要有手指能點就照手指的大小 */
@media (any-pointer: coarse) { .tr-btns .chip, .tr-head > .st-solo-on, .track .tr-ctl .chip, .st-band-ctl .chip, .st-band-tools .chip { min-height: var(--tap-min); } }
@media (prefers-reduced-motion: reduce) { .track .tr-head .ic, .st-band-head .ic { transition: none; } }

/* ---------- 混音器第二批（2026-10-23，方案 v1 第二節第一層）：混音列 ----------
   自動調好大小聲｜比較：調好前／調好後（按了自動調好才出現）｜復原、重做、全部回到剛好。紅色不用（不是錄音、不是主按鈕） */
.st-mixbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); padding-block: var(--space-12); border-top: 1px solid var(--line); }
.st-mixbar[hidden], .st-cmp[hidden] { display: none; }
.st-mixbar .chip { min-height: 40px; padding-inline: var(--space-12); }
.st-mixbar .chip .gl { width: 18px; height: 18px; }
.st-mixbar .chip:disabled { opacity: .35; cursor: not-allowed; }   /* 沒有上一步、已經全部剛好：照設計系統「停用」（.35、游標「不可」；停用的鈕不算進對比要求） */
.st-mixbar { column-gap: var(--space-24); }   /* 三組（自動調好｜比較｜上一步…）之間比組內（8）明顯寬，看得出是三組（評審建議修 7） */
.st-cmp { display: inline-flex; align-items: center; gap: var(--space-8); }
.st-cmp-l { font: 700 13px/1.2 var(--font-body); color: var(--ink); }
.st-mixbar .seg button { font-size: 13px; min-height: 40px; padding-inline: var(--space-12); }   /* 跟旁邊的膠囊鈕同字級：不要比「自動調好大小聲」搶眼 */
.st-mix-hist { display: inline-flex; flex-wrap: wrap; gap: var(--space-8); }
.st-mix-h { font: 700 13px/1.2 var(--font-body); color: var(--ink-2); white-space: nowrap; }   /* 看得到的小標「整首的大小聲」：上一步、改回來只管大小聲（第二輪評審） */
.st-mix-note { flex: 0 0 100%; margin: 0; }   /* 自動調好的結果說明：固定在按鈕下面一整行（各寬度一樣，不靠剛好塞得下） */
.st-mix-note > span { display: block; max-width: 52em; }   /* 中文一行約 50 字（ch 是英文數字寬，中文用 em） */
.st-mix-note[hidden] { display: none; }
@media (any-pointer: coarse) { .st-mixbar .chip, .st-mixbar .seg button, .st-dl-set { min-height: var(--tap-min); } }
.st-dl-note { margin: 0 0 var(--space-12); max-width: 52em; }
.st-dl-note .st-dl-set { display: flex; width: fit-content; margin-block: var(--space-6); }   /* 鈕自己一行、跟在音量那句後面（10-25 評審品味建議：夾在句子中間把那一行撐高，下一行斷在「是給／編曲軟體用的」） */

/* ---------- 混音器第三批（2026-10-23，方案 v1 第四節）：混音示範〈小星星〉 ----------
   放在音軌區的位置（打開時音軌區收起來）；步驟列照卡拉 OK；每一樣樂器一列：圖示、角色（鼓／低音／和弦／旋律）、樂器名、亮燈；
   第 5 步整列可以點；第 7 步每列多一條同一套的大小聲。亮燈用琥珀（「亮起來」），不用紅 */
.st-demo-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
.st-demo-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); }
.st-demo-top h2 { font: 700 clamp(22px, 2.6vw, 30px)/1.2 var(--font-body); margin: 0; }
.st-steps.st-demo-steps { grid-template-columns: repeat(7, minmax(0, 1fr)); }   /* 卡拉 OK 是 6 步；選擇器寫兩層，蓋過後面的 .st-steps */
#demo-play[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }   /* 跟錄音室的「全部播放」一樣：播放中變深色 */
.st-demo-body { margin-top: var(--space-16); }
.st-demo-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); margin-top: var(--space-16); }
.st-demo-q { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.st-demo-tools .st-demo-q { margin: 0; }
div.st-demo-q { margin-top: var(--space-16); }
.st-demo-ql { font: 700 15px/1.2 var(--font-body); color: var(--ink); }
.st-demo-num { min-width: 48px; justify-content: center; font-size: 16px; }
.st-demo-done { font: 700 15px/1.2 var(--font-body); color: var(--ink); }
.st-demo-rows { list-style: none; margin: var(--space-16) 0 0; padding: 0; border-top: 1px solid var(--line); }
.st-demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-24); padding: var(--space-10) var(--space-8); border-bottom: 1px solid var(--line); }
.st-demo-head, .st-demo-pick { display: grid; grid-template-columns: 44px minmax(0, 1fr) 14px; align-items: center; gap: var(--space-12); min-width: min(100%, 260px); min-height: var(--tap-min); }
.st-demo-pick { border: 1.5px solid var(--line-strong); border-radius: var(--radius-14); background: transparent; color: var(--ink); padding: var(--space-6) var(--space-12); text-align: left; font: inherit; cursor: pointer; }
.st-demo-pick:hover { border-color: var(--ink); }
.st-demo-row .ic { width: 40px; height: 40px; }
.st-demo-name { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.st-demo-name b { font: 700 17px/1.2 var(--font-body); color: var(--ink); }
.st-demo-name small { font: 500 13px/1.3 var(--font-body); color: var(--ink-2); }
.st-demo-lamp { width: 12px; height: 12px; border-radius: 50%; }   /* 沒在響不畫圈（讀者：空心圈像勾選框） */
.st-demo-row.air { background: color-mix(in srgb, var(--amber) 14%, transparent); }   /* 正在響：整列變淺橘＋亮燈 */
.st-demo { --lamp: color-mix(in srgb, var(--amber) 70%, var(--ink)); }   /* 琥珀當圖形要 ≥3:1：白天加深（約 4.2:1），夜間照樣亮 */
.st-demo-row.air .st-demo-lamp { background: var(--lamp); }   /* 正在響：亮起來 */
.st-demo-row.dim .ic { opacity: .45; }   /* 還沒加進來的那一層：圖示變淡、名字改次要字色（不整列透明：字要 ≥4.5:1） */
.st-demo-row.dim .st-demo-name b { color: var(--ink-2); }
.st-demo-row.hint .st-demo-pick { border-color: var(--lamp); box-shadow: 0 0 0 3px var(--lamp); }   /* 點錯：外框變橘色提示正確那一樣（不扣分） */
.st-demo .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.st-demo-row .st-lvrow { flex: 1 1 320px; }
.st-demo-say { min-height: 1.6em; margin: var(--space-12) 0 0; font: 700 16px/1.5 var(--font-body); color: var(--ink); max-width: 40em; }
.st-demo-skip { margin-top: var(--space-16); max-width: 40em; color: var(--ink-2); }
.st-demo-win { margin-top: var(--space-16); padding: var(--space-16); border: 1.5px solid var(--line-strong); border-radius: var(--radius-14); }
.st-demo-win[hidden] { display: none; }
.st-demo-win p { margin: 0; }
.st-demo-ear { gap: var(--space-12); }
.st-demo-next { margin-top: var(--space-24); display: flex; justify-content: flex-start; }   /* 電腦版靠左、貼著內容（評審：放最右邊離內容太遠） */
.st-demo-playrow #demo-status { margin: 0; flex: 1 1 14em; font: 600 16px/1.5 var(--font-body); color: var(--ink); }   /* 狀態列在播放鈕旁邊、字大一點、深色（讀者：長輩看不到） */
.st-demo-playrow #demo-status:empty { flex-basis: 0; min-height: 0; }   /* 沒字時不佔一行（不用 display:none：讀屏的播報區要一直在） */.st-demo-next .btn .gl { width: 18px; height: 18px; }
@media (max-width: 900px) { .st-steps.st-demo-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .st-steps.st-demo-steps { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }   /* 手機：一格放得下「4 太小聲」不斷字（375 寬排成 3 欄） */
  .st-demo-steps .st-s { white-space: nowrap; }
  .st-demo-head, .st-demo-pick { min-width: 100%; }
  .st-demo-next { justify-content: stretch; } .st-demo-next .btn { flex: 1; justify-content: center; }
}
@media (any-pointer: coarse) { .st-demo-tools .chip, .st-demo-q .chip, .st-demo .seg button, #demo-leave, .st-demo-go, .st-demo-in .chip { min-height: var(--tap-min); } }   /* 下載說明在下載鈕正下方（讀者：離下載鈕太遠） */
.st-dl-set { margin-inline-start: var(--space-4); vertical-align: middle; }

/* ---------- 混音器第四批（2026-10-23，方案 v1 第二節第二層）：進階調音 ----------
   混音列的「進階調音」打開才出現；每一軌（含樂隊）一列：左右 5 格、空間 3 格、音色 3 種，上面是整首的空間。小朋友模式不出現 */
.st-adv { display: grid; gap: var(--space-16); padding: var(--space-16); margin-block: var(--space-8); border: 1.5px solid var(--line-strong); border-radius: var(--radius-14); }   /* 有外框：看得出這一區從哪裡到哪裡（評審必修 3） */
.st-adv[hidden] { display: none; }
.st-adv-go[aria-expanded="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }   /* 打開著：鈕變深色、字寫「收起進階調音」 */
.st-adv-said { margin: 0; font: 700 15px/1.5 var(--font-body); color: var(--ink); flex: 0 0 100%; grid-column: 1 / -1; }
.st-adv-said:empty { display: none; }
.st-adv-room { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-16); }
.st-adv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
.st-adv-top { display: grid; gap: var(--space-4); }
.st-adv-top .fine { max-width: 52em; }
.st-adv-g { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10); }
.st-adv-l { font: 700 15px/1.3 var(--font-body); color: var(--ink); min-width: 4.5em; }
.st-adv-l small { font-weight: 500; font-size: 14px; color: var(--ink-2); }
.st-adv-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.st-adv-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10) var(--space-24); padding-block: var(--space-12); border-bottom: 1px solid var(--line); }
.st-adv-who { display: flex; align-items: center; gap: var(--space-10); min-width: 11em; }
.st-adv-who .ic { width: 32px; height: 32px; }
.st-adv-who b { font: 700 16px/1.3 var(--font-body); color: var(--ink); }
.st-adv .seg button { font-size: 15px; }   /* 設計系統的按鈕字級（評審：13px 小一級，長輩看不清） */
@media (max-width: 640px) { .st-adv { padding: var(--space-12); } .st-adv .seg button { padding-inline: var(--space-8); } .st-adv-row { gap: var(--space-8); } .st-adv-who { min-width: 100%; } }   /* 手機：左右 5 格一排放得下 375 寬 */
/* 每一組：小標在上、按鈕在下（各寬度起點一致：評審建議 6）；平板兩欄、電腦四欄 */
.st-adv-row .st-adv-g { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.st-adv-gap { margin: 0; align-self: center; max-width: 22em; font-size: 14px; line-height: 1.5; color: var(--ink-2); }   /* 樂隊那列「放哪一邊」的位置：寫明固定在中間 */
.st-adv-auto { font-size: 14px; }
/* 欄寬寫死：每一列是自己的格子，寫 auto 會照內容各算各的（樂隊那句說明比按鈕窄就對不齊） */
@media (min-width: 641px) and (max-width: 1099px) { .st-adv-row { display: grid; grid-template-columns: 23rem auto; justify-content: start; align-items: start; } .st-adv-who { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .st-adv-row { display: grid; grid-template-columns: minmax(10em, 1fr) 23rem 18.5rem auto; align-items: start; } .st-adv-who { align-self: center; } }   /* 電腦：名字／放哪一邊／回音／音色四欄對齊 */
@media (any-pointer: coarse) { .st-adv .seg button, .st-adv-foot .chip, .st-adv-go, .st-adv-auto { min-height: var(--tap-min); } }

/* ---------- 小朋友用詞（2026-10-23，第一批延後的和弦、小節、軌）：小朋友模式收起大人才用的東西 ----------
   和弦格、曲風、照旋律配和弦、和弦說明、MIDI 下載、「（WAV）」字樣；樂隊照樣跟著彈預設的和弦 */
html[data-kids] #chords, html[data-kids] .st-band-tools, html[data-kids] #chordmenu, html[data-kids] #dl-midi, html[data-kids] .st-adult { display: none; }
/* 第二批（第一批讀者測試列的「範圍外」）：頁首的 FM 110.8、琴鍵上的電腦字母、黑鍵的 ♯ 字、更多設定裡的「拍子」「下載時保持原樣」 */
html[data-kids] .st-kick, html[data-kids] #instrument .k-key, html[data-kids] #instrument .k-black .k-name,
html[data-kids] .field:has(#set-meter), html[data-kids] .field:has(#set-keep) { display: none; }

/* 第 4 軌起：收成一排小圖示（新元件） */
.st-dock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8); padding-block: var(--space-10); border-top: 1px solid var(--line); }
.st-dock > span { font-size: 14px; color: var(--ink-2); margin-right: var(--space-4); }   /* fine-print */
.st-dock-b { display: inline-flex; align-items: center; gap: var(--space-4); min-height: 40px; padding: 0 var(--space-10) 0 var(--space-6); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 13px/1 var(--font-body); cursor: pointer; }   /* chip-label */
.st-dock-b .ic { width: 26px; height: 26px; }
.st-dock-b:hover { border-color: var(--ink); }
.st-dock-b[aria-expanded="true"] { background: var(--amber); color: var(--on-amber); border-color: var(--amber); }
.st-dock-b.dim { border-style: dashed; color: var(--ink-2); }   /* 靜音的軌：虛線外框（不用透明度，號碼要讀得到） */

/* 確認列（新元件）：會清掉心血的動作先問；不用瀏覽器的 confirm()，就在按鈕旁邊問 */
.st-confirm { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); padding: var(--space-10) 0; border-top: 2px dashed var(--line); }
.st-confirm p { flex: 1 1 16em; font-weight: 700; color: var(--ink); }
.st-confirm .btn { padding-block: var(--space-12); }
.st-confirm .st-yes { background: var(--ink); color: var(--bg); }
.tracks-head .st-confirm { flex-basis: 100%; }

/* ---------- 卡拉 OK：步驟列（新元件） ---------- */
.st-steps { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6); counter-reset: none; }
.st-steps button { width: 100%; min-height: 52px; display: flex; align-items: center; gap: var(--space-8); padding: var(--space-6) var(--space-10); border: 0; border-top: 3px solid var(--line); background: transparent; color: var(--ink-2); font: 700 15px/1.25 var(--font-body); text-align: left; cursor: pointer; }   /* ui-label */
.st-steps button .num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--ink); font: 700 14px/1 var(--font-mono); }
.st-steps button:hover { color: var(--ink); }
.st-steps button[aria-current="step"] { color: var(--ink); border-top-color: var(--ink); }
.st-steps button[aria-current="step"] .num { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.st-steps button.done .num { background: var(--panel); }
.st-steps button.done, .st-steps button:not([aria-current]):not([aria-disabled="true"]):hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }   /* 10-25：做過的步驟看得出點得回去（使用者以為沒有返回） */
.st-steps button:not([aria-current]):not([aria-disabled="true"]):hover { background: var(--panel); }
.st-steps button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.st-steps .st-s { display: none; }
.st-k { padding-top: var(--space-24); }
.st-k-h:focus, #tracks-h:focus { outline: none; }   /* 換步驟時焦點移到標題（讀屏從這裡念起）；標題本身不是可以按的東西，不畫焦點框 */
.st-k-h { font: 700 clamp(26px, 3.4vw, 40px)/1.2 var(--font-body); letter-spacing: -.01em; }   /* section-title（最小一級改 26px：字級表沒有 28） */
.st-k-lead { margin-top: var(--space-10); max-width: 40em; color: var(--ink-2); }
.st-k-lead b { color: var(--ink); }
.st-k-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); margin-top: var(--space-18); }
.st-k-sub { font: 700 17px/1.4 var(--font-body); margin-top: var(--space-22); }   /* body 字級、粗 */
.st-k .fine + .fine { margin-top: var(--space-6); }

/* 選歌：一首一列（跟「五個電台」同一種清單） */
.st-songs { list-style: none; margin: var(--space-18) 0 0; padding: 0; display: grid; }
.st-song { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8) var(--space-18); align-items: center; padding-block: var(--space-14); border-top: 1px solid var(--line); }
.st-song:last-child { border-bottom: 1px solid var(--line); }
.st-song h4 { font: 700 22px/1.3 var(--font-body); margin: 0; }   /* item-title */
.st-song p { font-size: 15px; color: var(--ink-2); }
.st-song .st-song-act { display: flex; flex-wrap: wrap; gap: var(--space-8); justify-content: flex-end; }
.st-song[aria-current="true"] h4::after { content: "・已選"; font-size: 15px; color: var(--ink-2); }
.st-own { margin-top: var(--space-24); }
.st-own-h { font: 700 22px/1.3 var(--font-body); margin: 0 0 var(--space-12); }   /* item-title */
.st-own-btns { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-bottom: var(--space-10); }
.st-file { position: relative; cursor: pointer; }
.st-file:focus-within { outline: 3px solid var(--red-ink); outline-offset: 3px; }
.st-owner { margin-top: var(--space-14); padding-top: var(--space-14); border-top: 2px dashed var(--line); }
.st-owner fieldset { border: 0; padding: 0; margin: var(--space-10) 0 0; display: grid; gap: var(--space-8); }
.st-owner legend { font: 700 22px/1.3 var(--font-body); padding: 0; }   /* item-title */
.st-radio { display: flex; align-items: center; gap: var(--space-10); min-height: var(--tap-min); font-size: 17px; cursor: pointer; }
.st-radio input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; }

/* 調整：調、速度、伴奏 */
.st-keyrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-14); margin-top: var(--space-10); }
.st-keyrow .seg button { min-height: var(--tap-min); }
.st-stepper2 { display: inline-flex; align-items: center; gap: var(--space-10); }
.st-stepper2 button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--ink); font: 700 18px/1 var(--font-body); cursor: pointer; }
.st-stepper2 button:hover { border-color: var(--ink); }
.st-stepper2 button:disabled { opacity: .35; cursor: not-allowed; }
.st-chips { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.st-chips .chip { min-height: 40px; padding-inline: var(--space-14); font-size: 14px; }   /* tool-label 字級 */

/* 試音：音量表（新元件） */
.st-ear { display: flex; align-items: center; gap: var(--space-14); margin-top: var(--space-14); max-width: 46em; }
.st-ear .ic { width: 52px; height: 52px; flex: none; }
.st-ear p { font-size: 17px; }
.st-mic { margin-top: var(--space-18); }
.st-level { position: relative; height: 28px; background: var(--glass); box-shadow: inset 0 0 0 1.5px var(--line-strong); border-radius: var(--radius-pill); overflow: hidden; max-width: 520px; margin-top: var(--space-12); }
.st-level i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--lv, 0) * 100%); background: var(--amber); border-radius: var(--radius-pill); }
.st-level b { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--glass-dim); }
.st-level-t { margin-top: var(--space-6); font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }   /* fine-print */
.st-result { margin-top: var(--space-12); font-weight: 700; }
.st-result.bad { color: var(--red-ink); }

/* 唱：提詞機（新元件）——深色面板上的大字歌詞，唱到的字亮琥珀色，下一句先出現 */
.st-prompter { position: relative; margin-top: var(--space-14); padding: var(--space-22) var(--space-24); background: var(--glass); color: var(--glass-ink); border-radius: var(--radius-18); min-height: 220px; display: grid; align-content: center; gap: var(--space-14); }
.st-prompter .st-p-cur { font: 700 clamp(32px, 4.4vw, 52px)/1.25 var(--font-body); letter-spacing: .02em; word-break: keep-all; overflow-wrap: anywhere; }   /* page-title 字級 */
.st-prompter .st-p-next { font: 700 clamp(18px, 2vw, 22px)/1.4 var(--font-body); color: var(--glass-dim); }   /* lead～item-title */
.st-prompter .sy.done, .st-prompter .sy.on { color: var(--amber); }
.st-prompter .sy.on { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.st-prompter .jp { display: inline-block; min-width: 1.1em; text-align: center; position: relative; }
.st-prompter .jp.hi::before, .st-prompter .jp.lo::after { content: ""; position: absolute; left: 50%; width: 6px; height: 6px; transform: translateX(-50%); border-radius: 50%; background: currentColor; }
.st-prompter .jp.hi::before { top: .02em; }
.st-prompter .jp.lo::after { bottom: -.05em; }
.st-prompter .st-p-count { font: 800 clamp(52px, 8vw, 74px)/1 var(--font-display); color: var(--glass-red-ink); }   /* 預備拍倒數 */
.st-prompter .st-onair { position: absolute; right: var(--space-14); top: var(--space-14); }
.st-prompter :focus-visible { outline-color: var(--glass-red-ink); }
.st-p-time { font-size: 15px; color: var(--glass-text-2); font-variant-numeric: tabular-nums; }
.st-prompter video { width: 100%; max-height: 46vh; border-radius: var(--radius-10); background: var(--glass-2); }
.st-progress { height: 8px; background: var(--glass-2); border-radius: var(--radius-pill); overflow: hidden; }
.st-progress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--amber); }

/* 聽、下載：最準的一句、混音、提醒卡（新元件：不用框，用撕線分開） */
.st-best { margin-top: var(--space-14); padding: var(--space-14) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.st-best b { display: block; font: 700 22px/1.4 var(--font-body); margin-top: var(--space-4); }   /* item-title */
.st-mix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-14) var(--space-28); margin-top: var(--space-18); max-width: 760px; }
.st-mix label { display: grid; gap: var(--space-6); font-size: 15px; color: var(--ink-2); }
.st-mix input[type="range"] { width: 100%; accent-color: var(--ink); min-height: 32px; }
.st-mix output { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.st-remind { margin-top: var(--space-18); padding-top: var(--space-14); border-top: 2px dashed var(--line); max-width: 40em; }
.st-remind .big { font: 700 26px/1.4 var(--font-body); color: var(--ink); }   /* program-title */
.st-remind details { margin-top: var(--space-10); font-size: 15px; color: var(--ink-2); }
.st-remind summary, .mock-notes summary { 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); color: var(--ink); font: 700 15px/1.2 var(--font-body); cursor: pointer; list-style: none; }   /* 跟「更多設定」同一種膠囊鈕 */
.st-remind summary::-webkit-details-marker, .mock-notes summary::-webkit-details-marker { display: none; }
.st-remind summary::after, .mock-notes summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.st-remind details[open] > summary::after, .mock-notes[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.st-remind summary:hover, .mock-notes summary:hover { border-color: var(--ink); }
.st-tag { display: inline-flex; align-items: center; padding: var(--space-4) var(--space-10); border-radius: var(--radius-pill); background: var(--panel); color: var(--ink); font: 700 13px/1 var(--font-body); }   /* chip-label：「只給自己聽」小標籤（灰色，不用紅） */

/* 唱之前看一下（規劃書 v2 §6.2 一定要有的提示）：清單，不放框 */
.st-hints { margin-top: var(--space-28); padding-top: var(--space-18); border-top: 1px solid var(--line); }
.st-hints-h { font: 700 22px/1.3 var(--font-body); }   /* item-title */
.st-hints ul { margin: var(--space-10) 0 0; padding-left: var(--space-22); display: grid; gap: var(--space-6); max-width: 46em; }
.st-hints li { line-height: 1.7; }

/* 聲音出處、樣稿註記 */
.st-credits { border-top: 1px solid var(--line); padding-block: var(--space-24); }
.st-credits-h { font: 700 15px/1.25 var(--font-body); margin-bottom: var(--space-8); }   /* ui-label */
.st-credits .fine { max-width: 60em; }
.mock-notes { margin-block: var(--space-14) var(--space-28); padding-top: var(--space-10); border-top: 1px dashed var(--line); font-size: 14px; color: var(--ink-2); }   /* fine-print */
.mock-notes ol { margin: var(--space-6) 0 0; padding-left: var(--space-22); display: grid; gap: var(--space-6); }

/* ---------- 補充：播放時樂器跟著亮、選樂器時閃一下、墨色按鈕、可以按的連結長得像按鈕 ---------- */
.st-console .k.pb, .st-console .bar.pb, .st-console .pad.pb, .st-console .kpad.pb { background: var(--amber); color: var(--on-amber); box-shadow: none; }   /* 錄好的軌在播：琴鍵跟著亮（同「按下」的琥珀） */
.st-console .str.pb .str-line { background: var(--amber); width: 3px; }
.st-console .kp.pb .kp-face { fill: var(--amber); }
.st-pick.st-heard .tape { background: var(--amber); color: var(--on-amber); }
.st-ink { background: var(--ink); color: var(--bg); }   /* 墨色按鈕（設計系統的「全部播放」；紅色留給錄音） */
.st-ink:hover { filter: brightness(1.15); }
.st-go { display: inline-flex; align-items: center; gap: var(--space-6); 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 var(--font-body); text-decoration: none; cursor: pointer; }   /* 照設計系統 .set-more 的膠囊鈕（主控 10-21：文字＋箭頭的連結一律長這樣） */
.st-go:hover { border-color: var(--ink); }
.st-k-act .btn-ghost .gl, .st-go .gl { width: 1em; height: 1em; }
.st-val { font: 700 22px/1.2 var(--font-body); color: var(--ink); min-width: 6.5em; text-align: center; }   /* item-title：「比原調高 2」「原速」 */
.st-k-opts { display: grid; gap: var(--space-6); margin-top: var(--space-18); }
.st-k-opts .field, .st-k .field { font-size: 16px; color: var(--ink); }
.st-k .field input[type="checkbox"] { width: 20px; height: 20px; }
.st-k-status { margin-top: var(--space-10); min-height: 1.6em; font-size: 15px; color: var(--ink-2); }
.st-sync { min-height: 160px; justify-items: center; text-align: center; }
.st-sync .st-p-next { color: var(--glass-ink); }
.st-k .seg button { min-height: 40px; }

/* ---------- 手機與窄螢幕 ---------- */
@media (max-width: 900px) {
  .st-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .st-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* 手機第一屏：選樂器（一排可以左右滑）→ 樂器名與兩顆大鈕 → 樂器本身；設定放到樂器下面 */
  #tab-play > .wrap { display: flex; flex-direction: column; }
  #tab-play .st-pickrow { order: 1; } #tab-play .st-stage { order: 2; } #tab-play .st-console { order: 3; } #tab-play #status { order: 4; }
  #tab-play #inst-pent { order: 4; }   /* 五聲說明：緊接在琴台下面（同 order 照原始碼順序排在狀態列前面） */
  #tab-play .st-privacy { order: 5; } #tab-play .st-settings { order: 6; } #tab-play .st-score { order: 6; } #tab-play .st-tracks-panel { order: 7; }   /* 輸入曲譜排在琴台與設定下面（必修 7：原本沒給順序，排到選樂器前面，小手機第一屏看不到琴） */
  .st-picker { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--space-6); }
  .st-pick-t { margin-bottom: var(--space-4); }
  .st-pickrow { padding-top: 0; }   /* 必修 2：頁首下緣已經有留白 */
  .st-pick-long { display: none; } .st-pick-short { display: inline; }   /* 手機：一行講完「鼓、吉他都在這裡」 */
  .st-inst .fine { display: none; }   /* 怎麼彈：樂器下面的狀態列已經寫了 */
  #tab-play #inst-name { display: block; font-size: 22px; }   /* 設計系統在手機藏起樂器名；這裡一排只剩「聽聽看」會像落單，留著名字（item-title 字級） */
  #tab-play .st-stage { margin-top: var(--space-6); padding-top: var(--space-8); }
  #tab-play .st-console { margin-top: var(--space-10); }
  .st-settings:not(.open) .st-set-mid { display: none; }
  /* 10-25 第 2 輪必修 2：手機第一屏要看得到琴台（375×667 琴台底 745 → 底部選單上緣 611 以內；320×568「錄一段」不被底部選單蓋）。
     頁名與兩個分頁排同一列、說明只留一行短句、FM 小字收起來（底部選單那一台已經亮著「FM 110.8 錄音室」） */
  .st-head .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4) var(--space-10); padding-block: var(--space-12) var(--space-8); }
  .st-title { display: contents; }
  .st-kick { display: none; }
  .st-head h1 { grid-column: 1; grid-row: 1; }
  .st-tabs { grid-column: 2; grid-row: 1; }
  .st-tabs button[role="tab"] { padding-inline: var(--space-12); font-size: 16px; }   /* body-small：兩個分頁跟頁名排一列，320 寬也放得下 */
  .st-lead { grid-column: 1 / -1; grid-row: 2; font-size: 16px; margin-top: 0; line-height: 1.5; }   /* body-small */
  .st-lead-long { display: none; } .st-lead-short { display: inline; }
  .st-pick { min-height: 64px; padding: var(--space-6) 0; gap: var(--space-4); }
  .st-pick .ic { width: 30px; height: 30px; }
  .st-pick .tape { font-size: 13px; padding: 0 var(--space-4); }   /* chip-label 字級 */
  .st-pick-long, .st-pick-short { font-size: 14px; }
  .st-stage { margin-top: var(--space-10); padding-top: var(--space-10); }
  .st-inst .ic { display: none; }
  .st-inst-t b { font-size: 22px; }   /* item-title */
  .st-transport { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .st-transport .btn { justify-content: center; min-height: var(--tap-min); padding-inline: var(--space-12); }
  .st-count:empty, .st-transport .st-onair { display: none; }
  .is-recording .st-transport .st-onair { display: inline-flex; justify-self: start; }
  .st-count { justify-self: end; }
  .st-settings .set-more, .st-settings select { min-height: var(--tap-min); }
  .st-console { padding: var(--space-8); }
  .st-console .instrument.keys, .st-console .instrument.bars, .st-console .instrument.strings { height: 196px; }
  .is-big .st-console .instrument.keys, .is-big .st-console .instrument.bars, .is-big .st-console .instrument.strings { height: 250px; }
  .st-steps button { min-height: var(--tap-min); padding-inline: var(--space-6); font-size: 15px; }
  .st-steps .st-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* 手機：畫面寫短名（調整、試音…），讀屏照樣念全名 */
  .st-steps .st-s { display: inline; }
  #instrument .kpad { padding-inline: var(--space-4); }   /* 「腳踏鈸・開」一行放得下 */
  .st-song { grid-template-columns: minmax(0, 1fr); }
  .st-song .st-song-act { justify-content: flex-start; }
  .st-song .btn, .st-k-act .btn, .st-own-btns .btn { min-height: var(--tap-min); }
  .st-mix { grid-template-columns: minmax(0, 1fr); }
  .st-prompter { padding: var(--space-18) var(--space-16); min-height: 200px; }
  .track .tr-ctl .chip { min-height: var(--tap-min); }
  .st-dock-b { min-height: var(--tap-min); }
  .tracks-head .chip { min-height: var(--tap-min); }
}
/* 筆電與平板橫拿（電腦版面、視窗高 ≤ 800）：琴台要整個在第一個畫面（10-25 評審 T4：1366×657 只露出 115／250px、1024×768 只露出 127px）。
   頁名區收緊、說明字小一級；「長度／速度／音階／鍵上寫」那列移到琴台下面（跟手機一樣的順序），樂器列矮一點。不動樂器本身 */
@media (min-width: 641px) and (max-height: 800px) {
  .st-head .wrap { padding-block: var(--space-12) var(--space-6); }
  .st-kick { margin-bottom: var(--space-4); }
  .st-lead { margin-top: var(--space-6); font-size: 16px; line-height: 1.55; }   /* body-small */
  .st-pickrow { padding-top: 0; }
  .st-pick-t { margin-bottom: var(--space-4); }
  .st-pick { min-height: 64px; padding-block: var(--space-6); gap: var(--space-4); }
  .st-pick .ic { width: 30px; height: 30px; }
  .st-stage { margin-top: var(--space-8); padding-top: var(--space-8); }
  .st-inst-t .fine { line-height: 1.4; }
  #tab-play > .wrap { display: flex; flex-direction: column; }
  #tab-play > .wrap > * { order: 5; }
  #tab-play .st-pickrow { order: 1; } #tab-play .st-stage { order: 2; } #tab-play .st-console { order: 3; margin-top: var(--space-10); } #tab-play #inst-pent, #tab-play #status { order: 4; }
  #tab-play .st-tracks-panel, #tab-play .st-demo { order: 6; }
}
/* 手機橫放（高 ≤ 520，667×375、740×360、844×390）：頁首黏著佔掉 67、底部五台再佔 44，「錄一段」那一列加琴台（約 305）放不下，白鍵下半與 1～7 被五台蓋住（10-26 第 6 輪評審必修 2）。
   照教室一首歌頁的手機橫放：頁首不黏（跟著捲走）；底部五台留著（換頁還要用）。樂器選單改成手機那種一排、可以左右滑，琴台早一點出現 */
@media (max-height: 520px) and (orientation: landscape) {
  .site-head { position: relative; }
  .st-picker { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--space-6); }
  .st-pick-long { display: none; } .st-pick-short { display: inline; }
  /* 740×360 底部五台上緣 304：「錄一段」那一列＋琴台要在 304 以內 → 樂器的高度跟著畫面高（最高照原本，最矮 180） */
  .st-console .strum { height: clamp(110px, calc(100dvh - 230px), 226px); }   /* 吉他上面還有一排和弦鍵（64）：彈弦區再矮一點，最矮跟手機直放差不多 */
  .st-console .instrument.keys, .st-console .instrument.bars, .st-console .instrument.strings,
  .is-big .st-console .instrument.keys, .is-big .st-console .instrument.bars, .is-big .st-console .instrument.strings { height: clamp(180px, calc(100dvh - 150px), 226px); }
  .st-console .instrument.kit .kit-svg { height: clamp(180px, calc(100dvh - 150px), 240px); }
}
@media (pointer: coarse) {
  .st-chord, .st-chordmenu .chord, .chip, .st-chips .chip, .st-dock-b, .st-k .seg button { min-height: var(--tap-min); }
  .st-vol input[type="range"], .st-mix input[type="range"] { min-height: var(--tap-min); }
  .st-settings .stepper button { width: 44px; height: 44px; }
}
/* 提示列（外框的元件）在這一頁不擋按鍵：字的部分讓點擊穿過去，動作鈕照樣能按（建議外框統一這樣做） */
#toast { pointer-events: none; }
#toast .toast-act { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .lane .st-ph { transition: none; } }
@media print { .st-console, .st-transport, .st-steps { display: none !important; } }

/* ---------- 樂器質感 A「實木與金屬」（2026-10-23，使用者在 design/instrument-look-2026-10-23/ 選定）----------
   只改錄音室的琴台（.st-console）；音樂教室共用的 ds/bundle.css 不動。每樣樂器用自己的材質：
   鋼琴象牙白鍵＋亮漆黑鍵＋紅毛氈、鐵琴鋁條、木琴玫瑰木、提琴類虎紋楓木、薩克斯風與小號黃銅、長笛銀、笛子竹、直笛黃楊木、
   豎琴照真的豎琴（Do 弦古銅粗纏弦、Fa 弦深藍、黃銅弦軸；Do 弦不用紅：紅弦＝下一根要彈，使用者 10-24）、吉他玫瑰木指板＋古銅弦、鼓組黃銅鈸＋紅烤漆、手鼓牛皮。
   規則與色值寫在設計系統「樂器材質」一節（material-* token）。
   按下去（.on）與「錄好的軌在播」（.pb）：材質留著，壓下去＋琥珀光（琥珀＝本站「亮起來」的顏色） */
.st-console { --felt: var(--material-felt); --ivory: var(--material-ivory); --ebony: var(--material-ebony); --brass: var(--material-brass); --glow-a: var(--material-glow); --chrome: var(--material-chrome);
  --lit: 0 0 0 2px var(--material-glow-70), 0 0 24px var(--material-glow-50);
  --key-white-ink: var(--material-console-1);   /* 象牙白鍵在日夜都一樣：焦點框、顏色標記外圈固定用深色（夜間版的淺色在白鍵上看不見） */
  background: radial-gradient(130% 120% at 50% 0%, var(--material-console-2) 0%, var(--material-console-3) 65%, var(--material-console-4) 100%) var(--material-console); box-shadow: inset 0 1px 0 var(--material-sheen-9); }
[data-theme="dark"] .st-console { box-shadow: inset 0 0 0 1.5px var(--glass-edge), inset 0 1px 0 var(--material-sheen-9); }   /* 夜間：琴台（近黑）放在夜間頁底上只差 1.09:1，外形會消失 → 加 glass-edge 內框（10-25 評審品味建議） */   /* 不加往外的陰影：會壓暗下面那行提示列的底色（10-23 對比實測 7→6） */

/* 1. 琴鍵：鍵後面一條紅毛氈；白鍵象牙、黑鍵亮漆；按下去往下沉、底部透出琥珀光 */
.st-console .instrument.keys { border-style: solid; border-width: 9px 0 0; border-image: linear-gradient(180deg, var(--material-keys-1), var(--felt) 55%, var(--material-keys-2)) 1; }
.st-console .k-white { color: var(--material-keys-3); background: linear-gradient(180deg, var(--material-keys-4) 0%, var(--ivory) 9%, var(--material-keys-5) 70%, var(--material-keys-6) 100%) var(--material-keys-7);
  box-shadow: inset 0 -7px 0 var(--material-keys-8), inset 1px 0 0 var(--material-sheen-90), inset -1px 0 0 var(--material-shade-7), 0 3px 3px -1px var(--material-shade-55); transition: transform 70ms ease-out; }   /* 只動 transform：光暈、底色直接換（每按一下重畫模糊光暈，低階手機會掉格；10-24 評審） */
.st-console .k-black { color: var(--material-keys-9); background: linear-gradient(180deg, var(--material-keys-10) 0%, var(--material-keys-11) 14%, var(--ebony) 78%, var(--material-keys-12) 92%, var(--material-keys-13) 100%) var(--material-keys-11);
  box-shadow: inset 0 -9px 0 var(--material-keys-14), inset 1px 0 0 var(--material-sheen-10), 0 4px 6px var(--material-shade-60); transition: transform 70ms ease-out; }
.st-console .k-black::before { content: ""; position: absolute; left: 14%; right: 14%; top: 6px; height: 36%; border-radius: var(--radius-3); background: linear-gradient(180deg, var(--material-sheen-16), var(--material-sheen-0)); pointer-events: none; }
.st-console .k-white.on, .st-console .k-white.pb { transform: translateY(2px); color: var(--material-keys-15); background: linear-gradient(180deg, var(--material-keys-16) 0%, var(--material-keys-17) 14%, var(--material-keys-18) 72%, var(--material-keys-19) 100%) var(--material-keys-18); box-shadow: inset 0 -6px 0 var(--material-keys-20), inset 0 10px 14px -10px var(--material-shade-35), 0 0 18px -4px var(--material-glow-75); }   /* 底下深色粗線：琥珀對白鍵不夠分得出來（設計系統原本的規則） */
.st-console .k-black.on, .st-console .k-black.pb { transform: translateY(1px); color: var(--glow-a); background: linear-gradient(180deg, var(--material-keys-10), var(--material-keys-11) 14%, var(--material-keys-21) 70%, var(--material-keys-22) 100%) var(--material-keys-21); box-shadow: inset 0 -8px 0 var(--glow-a), inset 0 -22px 18px -14px var(--material-glow-55), inset 0 0 0 2px var(--glow-a), 0 0 14px -4px var(--material-glow-70); }   /* 底部 8px 琥珀條：只靠底色變化對亮漆黑只有 1.03:1（10-24 評審）；整根再一圈 2px 琥珀內框：底部那條會被手指蓋住（第二輪讀者） */
.st-console .k-white:disabled { color: var(--material-keys-23); background: linear-gradient(180deg, var(--material-keys-24), var(--material-keys-25)) var(--material-keys-26); }
.st-console .k .k-key { opacity: .9; }   /* 白鍵上的電腦字母 .75 只有 4.4:1 */
/* 簡譜高低音的點：4px 老花看不到（10-24 讀者測試）→ 6px */
.st-console .k-name.hi::before, .st-console .k-name.hi2::before { width: 6px; height: 6px; top: -9px; }
.st-console .k-name.hi2::after { width: 6px; height: 6px; top: -17px; }
.st-console .k-name.lo::after { width: 6px; height: 6px; bottom: -9px; }
.st-console .k-black:disabled { background: linear-gradient(180deg, var(--material-keys-27), var(--material-keys-28)) var(--material-keys-29); }

/* 2. 音條：每樣樂器自己的材質（--bar 是條子、--bar-ink 是字） */
.st-console .instrument.bars { --bar: linear-gradient(90deg, var(--material-bars-1) 0%, var(--material-bars-2) 14%, var(--material-bars-3) 30%, var(--material-keys-9) 52%, var(--material-bars-4) 70%, var(--material-bars-5) 88%, var(--material-bars-6) 100%); --bar-ink: var(--material-bars-7); --bar-c: var(--material-aluminium); }
.st-console .bar { position: relative; border-radius: var(--radius-6); color: var(--bar-ink); background: var(--bar); background-color: var(--bar-c);
  box-shadow: inset 0 1px 0 var(--material-sheen-50), inset 0 -2px 0 var(--material-shade-20), 0 6px 10px -4px var(--material-shade-60); transition: transform 80ms; }
.st-console .bar.on, .st-console .bar.pb { z-index: 2; color: var(--bar-ink); background: var(--bar); background-color: var(--bar-c); transform: translateY(1px); filter: brightness(1.12) saturate(1.1);
  box-shadow: inset 0 1px 0 var(--material-sheen-75), 0 0 0 2px var(--material-console), 0 0 0 5px var(--glow-a), 0 0 22px var(--material-glow-50); }   /* 深色縫＋琥珀圈：琥珀直接貼在黃銅、銀上只有 1.2:1（10-24 評審），隔一道深色縫才看得見 */
.st-console .bar .st-dot .bg { stroke: var(--bar-ink); }
/* 電腦鍵盤字母：11px 小字直接壓在材質上 3～4.6:1 → 深色小底 */
.st-console .bar .k-key { opacity: 1; color: var(--material-bars-8); background: var(--material-shade-66); padding: var(--space-2) var(--space-5); border-radius: var(--radius-6); }
.st-console .chord .k-key { opacity: 1; }   /* 和弦鈕上的數字：.75 在選中的黃銅上只有 3.5～4.2:1（10-24 第二輪評審） */
.st-console .bar:focus-visible { outline-offset: 7px; }   /* 焦點框推到琥珀圈外面：用鍵盤選到再按下時兩個都看得到（10-24 第二輪） */
/* 音條的簡譜數字一律放在象牙小牌上（高低音的點畫在牌子裡）：
   10-24 先只給木頭色（提琴類、木琴：木紋上 4.4～6:1）；第二輪讀者說鐵琴、吹管上的高音點還是偏小、木頭那幾樣最清楚 → 使用者授權照建議全部音條都用 */
.st-console .bar .k-name { --dot-y: 5px; --dot-step: 8px; --dot-room: calc(var(--dot-y) + 6px + var(--space-4)); padding: var(--space-6) var(--space-8); border-radius: var(--radius-10); color: var(--material-bars-9); background: var(--material-ivory-plate); box-shadow: 0 1px 2px var(--material-shade-45); }
.st-console .bar .k-name.hi { padding-top: var(--dot-room); }
.st-console .bar .k-name.hi2 { padding-top: calc(var(--dot-room) + var(--dot-step)); }
.st-console .bar .k-name.lo { padding-bottom: var(--dot-room); }
.st-console .bar .k-name.hi::before { top: var(--dot-y); }
.st-console .bar .k-name.hi2::before { top: calc(var(--dot-y) + var(--dot-step)); }
.st-console .bar .k-name.hi2::after { top: var(--dot-y); }
.st-console .bar .k-name.lo::after { bottom: var(--dot-y); }
/* 鐵琴（鋁）、木琴（玫瑰木）：架在胡桃木框的兩條紅毛氈上、每條兩顆鉚釘 */
.st-console .instrument.bars.i-glock, .st-console .instrument.bars.i-xylo { position: relative; padding: var(--space-14) var(--space-12); border-radius: var(--radius-12);
  background: repeating-linear-gradient(90deg, var(--material-shade-8) 0 2px, var(--material-sheen-2) 2px 7px, var(--material-shade-5) 7px 11px), linear-gradient(180deg, var(--material-bars-10), var(--material-bars-11) 55%, var(--material-bars-12));
  box-shadow: inset 0 1px 0 var(--material-sheen-12), inset 0 0 0 5px var(--material-shade-18); }
.st-console .instrument.bars.i-glock::before, .st-console .instrument.bars.i-glock::after, .st-console .instrument.bars.i-xylo::before, .st-console .instrument.bars.i-xylo::after { content: ""; position: absolute; left: 10px; right: 10px; height: 9px; border-radius: var(--radius-pill); background: linear-gradient(180deg, var(--material-bars-13), var(--material-bars-14)); box-shadow: 0 2px 3px var(--material-shade-45); }
.st-console .instrument.bars.i-glock::before, .st-console .instrument.bars.i-xylo::before { top: 34%; }
.st-console .instrument.bars.i-glock::after, .st-console .instrument.bars.i-xylo::after { top: 70%; }
.st-console .i-glock .bar, .st-console .i-xylo .bar { z-index: 1; }
.st-console .i-glock .bar::before, .st-console .i-glock .bar::after, .st-console .i-xylo .bar::before, .st-console .i-xylo .bar::after { content: ""; position: absolute; left: 50%; --dot-w: 9px; width: var(--dot-w); height: var(--dot-w); margin-left: calc(var(--dot-w) / -2); border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--material-bars-15) 0 25%, var(--material-bars-16) 55%, var(--material-bars-17) 100%); box-shadow: 0 1px 0 var(--material-sheen-40); }
.st-console .i-glock .bar::before, .st-console .i-xylo .bar::before { top: 12px; }
.st-console .i-glock .bar::after, .st-console .i-xylo .bar::after { top: 32%; }   /* 46% 在短的高音條上會碰到數字牌（10-24） */
.st-console .i-glock .bar { background: repeating-linear-gradient(0deg, var(--material-sheen-7) 0 1px, var(--material-shade-3p5) 1px 3px), var(--bar); background-color: var(--bar-c); text-shadow: 0 1px 0 var(--material-sheen-60); }
.st-console .instrument.i-xylo { --bar: repeating-linear-gradient(0deg, var(--material-shade-10) 0 2px, var(--material-sheen-3) 2px 6px), linear-gradient(90deg, var(--material-bars-18), var(--material-bars-19) 20%, var(--material-bars-20) 45%, var(--material-rosewood) 75%, var(--material-bars-18)); --bar-ink: var(--material-bars-21); --bar-c: var(--material-rosewood); }
/* 提琴類（小提琴、大提琴、低音提琴）：亮漆虎紋楓木，放在烏木指板色的底上 */
.st-console .instrument.fam-bowed { --bar: repeating-linear-gradient(0deg, var(--material-bars-22) 0 5px, transparent 5px 17px), linear-gradient(90deg, var(--material-bars-23), var(--material-bars-24) 25%, var(--material-bars-25) 45%, var(--material-bars-26) 65%, var(--material-bars-27)); --bar-ink: var(--material-bars-9); --bar-c: var(--material-maple);   /* 深色字：淺字壓在中間調楓木上只有 3:1（10-23 實測） */
 
  padding: var(--space-12); border-radius: var(--radius-12); background: linear-gradient(180deg, var(--material-bars-28), var(--material-bars-29)); box-shadow: inset 0 0 0 1px var(--material-sheen-5); }
/* 管樂：薩克斯風、小號黃銅；長笛銀；笛子竹（竹節）；直笛黃楊木。形狀照設計系統留圓頭（像一根管子） */
.st-console .fam-wind .bar { border-radius: var(--radius-pill); }
.st-console .instrument.i-sax, .st-console .instrument.i-trumpet { --bar: linear-gradient(90deg, var(--material-bars-30), var(--material-bars-31) 18%, var(--material-bars-32) 36%, var(--material-bars-33) 46%, var(--material-bars-34) 62%, var(--material-bars-35) 82%, var(--material-bars-30)); --bar-ink: var(--material-bars-36); --bar-c: var(--material-bars-34); }
/* 一換樂器就看得出換了（10-24 評審：小號＝薩克斯風、小提琴＝大提琴截圖完全一樣）：薩克斯風兩顆珍珠按鍵、小號三個活塞帽、大提琴／低音提琴漆色深一階 */
.st-console .i-sax .bar::before, .st-console .i-sax .bar::after { content: ""; position: absolute; left: 50%; --dot-w: 14px; width: var(--dot-w); height: var(--dot-w); margin-left: calc(var(--dot-w) / -2); border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--material-bars-37), var(--material-bars-38) 60%, var(--material-bars-39)); box-shadow: 0 0 0 2px var(--material-bars-40), 0 1px 2px 2px var(--material-shade-35); }
.st-console .i-sax .bar::before { top: 16%; } .st-console .i-sax .bar::after { top: calc(16% + 24px); }
@media (max-width: 640px) { .st-console .i-sax .bar::before { --dot-w: 9px; background: radial-gradient(circle at 40% 35%, var(--material-bars-41), var(--material-bars-42) 70%); } .st-console .i-sax .bar::after { display: none; } }   /* 手機條子窄：兩顆白珍珠變成畫面最亮、像按鈕（10-24 第二輪）→ 一顆、小一點、暗一點 */
.st-console .i-trumpet .bar::before { content: ""; position: absolute; left: 50%; top: 14%; --dot-w: 16px; width: var(--dot-w); height: 8px; margin-left: calc(var(--dot-w) / -2); border-radius: var(--radius-pill); background: linear-gradient(180deg, var(--material-bars-33), var(--material-bars-43) 60%, var(--material-bars-40)); box-shadow: 0 16px 0 var(--material-bars-43), 0 32px 0 var(--material-bars-43), 0 1px 0 var(--material-bars-44), 0 17px 0 var(--material-bars-44), 0 33px 0 var(--material-bars-44); }
.st-console .instrument.i-cello { --bar: repeating-linear-gradient(0deg, var(--material-bars-45) 0 5px, transparent 5px 17px), linear-gradient(90deg, var(--material-bars-46), var(--material-bars-47) 25%, var(--material-bars-48) 45%, var(--material-bars-49) 65%, var(--material-bars-50)); --bar-c: var(--material-bars-51); }
.st-console .instrument.i-bass { --bar: repeating-linear-gradient(0deg, var(--material-bars-52) 0 5px, transparent 5px 17px), linear-gradient(90deg, var(--material-bars-53), var(--material-bars-54) 25%, var(--material-bars-55) 45%, var(--material-bars-56) 65%, var(--material-bars-57)); --bar-c: var(--material-bars-58); }
.st-console .instrument.i-flute { --bar: linear-gradient(90deg, var(--material-bars-59), var(--material-bars-60) 18%, var(--material-bars-61) 36%, var(--material-bars-8) 46%, var(--material-bars-62) 64%, var(--material-bars-63) 84%, var(--material-bars-59)); --bar-ink: var(--material-bars-64); --bar-c: var(--material-silver); }
.st-console .instrument.i-dizi { --bar: repeating-linear-gradient(0deg, transparent 0 72px, var(--material-bars-65) 72px 75px, var(--material-bars-66) 75px 76px), linear-gradient(90deg, var(--material-bars-67), var(--material-bars-68) 22%, var(--material-bars-69) 45%, var(--material-bamboo) 62%, var(--material-bars-70) 88%); --bar-ink: var(--material-bars-71); --bar-c: var(--material-bamboo); }
.st-console .instrument.i-recorder { --bar: repeating-linear-gradient(0deg, var(--material-bars-72) 0 2px, transparent 2px 7px), linear-gradient(90deg, var(--material-bars-73), var(--material-bars-74) 22%, var(--material-bars-75) 45%, var(--material-boxwood) 62%, var(--material-bars-76) 88%); --bar-ink: var(--material-bars-77); --bar-c: var(--material-boxwood); }
/* 竹節（上一行）從底部往上每 76px 一節：第一節在 72px，避開底部的數字與高低音點（10-24 評審：44px 會切過數字） */
/* 鋼琴選「五聲」「C 大調」時變成音條：象牙白；不放紅毛氈（音條高低不一，毛氈跟條子之間會出現越來越大的縫，像壞掉的鋼琴；10-24 評審與讀者） */
.st-console .instrument.bars.i-piano { --bar: linear-gradient(180deg, var(--material-bars-78), var(--ivory) 12%, var(--material-bars-79) 80%, var(--material-bars-80)); --bar-ink: var(--material-keys-3); --bar-c: var(--material-bars-79); }

/* 3. 豎琴：深色木框、黃銅弦軸；羊腸弦米白，Do 弦古銅粗纏弦、Fa 弦深藍（真的豎琴靠特別顏色的弦找音）
   注意：Do 弦不用紅（使用者 10-24 選 A）：全站紅弦＝「下一根要彈」（bundle.css .str.next），下面 .next 那條一定要排在 deg 兩條後面 */
.st-console .instrument.strings { border-radius: var(--radius-12); border-top: 10px solid var(--material-bars-10); background: linear-gradient(180deg, var(--material-harp-1), var(--material-harp-2)) var(--material-harp-3); box-shadow: inset 0 0 0 1px var(--material-shade-50); }
.st-console .str { color: var(--material-harp-4); }
.st-console .str-line { --line-w: 2.5px; width: var(--line-w); margin-left: calc(var(--line-w) / -2); background: linear-gradient(90deg, var(--material-harp-5), var(--material-harp-6) 50%, var(--material-harp-5)); box-shadow: 1px 0 1px var(--material-shade-55); }
.st-console .str.deg-1:where(:not(.sharp)) .str-line { --line-w: 4.5px; background: repeating-linear-gradient(0deg, var(--material-harp-7) 0 1px, transparent 1px 3px), linear-gradient(90deg, var(--material-harp-8), var(--material-harp-9) 50%, var(--material-harp-8)) var(--material-copper); }
.st-console .str.deg-4:where(:not(.sharp)) .str-line { --line-w: 3.5px; background: linear-gradient(90deg, var(--material-harp-10), var(--material-harp-11) 50%, var(--material-harp-10)) var(--material-harp-12); }   /* 10-24 第二輪：#5a70b0 的高音 Fa 弦在深木底上只有 1.9:1 → 調亮、加粗（約 4.7:1） */   /* 升記號的弦（♯1、♯4）不標：只有 Do、Fa 本身。用 :where 不加權重，下面的「下一根」「正在響」才蓋得過（10-24 測試抓到） */
.st-console .str.next .str-line { --line-w: 4px; background: var(--glass-red); }
.st-console .str::before { content: ""; position: absolute; left: 50%; top: calc(var(--i) * 3% - 5px); --dot-w: 9px; width: var(--dot-w); height: var(--dot-w); margin-left: calc(var(--dot-w) / -2); border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--material-harp-13), var(--material-harp-14) 60%, var(--material-harp-15)); box-shadow: 0 1px 2px var(--material-shade-60); }
.st-console .str.on .str-line, .st-console .str.pb .str-line { width: 3px; background: var(--glow-a); box-shadow: 0 0 10px var(--glow-a); }

/* 4. 吉他：和弦鈕像黃銅銘牌；玫瑰木指板（鎳銀琴格、珍珠鑲嵌、右邊音孔與花紋）；低音四條古銅纏弦、高音兩條鋼弦 */
.st-console .chord { color: var(--material-guitar-1); background: linear-gradient(180deg, var(--material-guitar-2), var(--material-guitar-3)) var(--material-guitar-4); box-shadow: inset 0 0 0 1px var(--material-guitar-5), inset 0 1px 0 var(--material-sheen-6); }
.st-console .chord[aria-pressed="true"] { color: var(--material-guitar-6); background: linear-gradient(180deg, var(--material-guitar-7), var(--brass) 55%, var(--material-guitar-8)) var(--material-brass); box-shadow: inset 0 1px 0 var(--material-sheen-55), 0 4px 10px -4px var(--material-shade-60); }
.st-console .strum { overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--material-guitar-9);   /* 黃銅內框＝「這一塊可以滑」的邊界（設計系統要刷弦區有內框；10-24 評審） */
  background:   /* 鑲嵌點縮小、調淡：白色大圓點像按鈕（10-24 讀者） */
    radial-gradient(circle at 23.5% 50%, var(--material-guitar-10) 0 2px, var(--material-guitar-11) 3px, transparent 4px), radial-gradient(circle at 51.5% 50%, var(--material-guitar-10) 0 2px, var(--material-guitar-11) 3px, transparent 4px), radial-gradient(circle at 75.5% 50%, var(--material-guitar-10) 0 2px, var(--material-guitar-11) 3px, transparent 4px),
    linear-gradient(90deg, transparent calc(16% - 1.5px), var(--chrome) calc(16% - 1.5px) calc(16% + 1.5px), transparent calc(16% + 1.5px)),
    linear-gradient(90deg, transparent calc(31% - 1.5px), var(--chrome) calc(31% - 1.5px) calc(31% + 1.5px), transparent calc(31% + 1.5px)),
    linear-gradient(90deg, transparent calc(45% - 1.5px), var(--chrome) calc(45% - 1.5px) calc(45% + 1.5px), transparent calc(45% + 1.5px)),
    linear-gradient(90deg, transparent calc(58% - 1.5px), var(--chrome) calc(58% - 1.5px) calc(58% + 1.5px), transparent calc(58% + 1.5px)),
    linear-gradient(90deg, transparent calc(70% - 1.5px), var(--chrome) calc(70% - 1.5px) calc(70% + 1.5px), transparent calc(70% + 1.5px)),
    repeating-linear-gradient(90deg, var(--material-shade-10) 0 2px, var(--material-sheen-1p5) 2px 6px, var(--material-shade-6) 6px 9px), linear-gradient(180deg, var(--material-guitar-12), var(--material-guitar-13) 50%, var(--material-guitar-14)) var(--material-guitar-13); }
.st-console .strum::after { content: ""; position: absolute; right: -80px; top: 50%; --dot-w: 210px; width: var(--dot-w); height: var(--dot-w); margin-top: calc(var(--dot-w) / -2); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--material-guitar-15) 0 52%, var(--material-guitar-16) 52.5% 54%, var(--material-guitar-17) 54.5% 57%, var(--material-brass) 57.5% 59%, var(--material-guitar-17) 59.5% 63%, var(--material-guitar-16) 63.5% 64.5%, transparent 65%); }
.st-console .gs i { z-index: 1; background: linear-gradient(180deg, var(--material-guitar-18), var(--material-guitar-19) 60%, var(--material-guitar-20)); box-shadow: 0 2px 2px var(--material-shade-60); }
.st-console .gs:nth-child(-n+4) i { background: repeating-linear-gradient(90deg, var(--material-guitar-21) 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--material-guitar-22), var(--material-guitar-23) 55%, var(--material-guitar-24)); }
.st-console .gs.on i { filter: drop-shadow(0 0 4px var(--material-guitar-25)); animation: gtwang 380ms ease-out; }
@keyframes gtwang { 15% { transform: translateY(1.6px); } 30% { transform: translateY(-1.4px); } 45% { transform: translateY(1px); } 60% { transform: translateY(-.7px); } 80% { transform: translateY(.3px); } }
.st-console .strum-hint { right: auto; left: 12px; z-index: 2; color: var(--material-guitar-26); background: var(--material-shade-66); padding: var(--space-3) var(--space-10); border-radius: var(--radius-pill); }   /* 深色膠囊底：字直接壓在鍍鉻琴格上只有 1.08:1（10-24 評審） */

/* 5. 鼓組（電腦）：黃銅鈸、紅烤漆鼓身、鍍鉻鼓框與架子、鼓皮米白；敲到：材質留著、亮一下＋琥珀光，鈸會晃 */
.st-console .kit-stand { stroke: var(--material-kit-1); }
.st-console .kp-t { fill: var(--material-kit-2); } .st-console .kp-k { fill: var(--material-kit-3); }
.st-console .kp-cym .kp-face, .st-console .kp-cym.on .kp-face, .st-console .kp-cym.pb .kp-face { fill: url(#kitBrass) var(--material-brass); stroke: var(--material-bars-44); stroke-width: 1.5; }
.st-console .kp-bell { fill: url(#kitBell) var(--material-brass); }
.st-console .kp-drum .kp-body { fill: url(#kitLac) var(--material-lacquer); stroke: none; }
.st-console .kp-drum .kp-face, .st-console .kp-drum.on .kp-face, .st-console .kp-drum.pb .kp-face { fill: url(#kitHead) var(--material-drumhead); stroke: var(--chrome); stroke-width: 3; }
.st-console .kp-kick .kp-face, .st-console .kp-kick.on .kp-face, .st-console .kp-kick.pb .kp-face { fill: url(#kitHead) var(--material-drumhead); stroke: url(#kitLac) var(--material-lacquer); stroke-width: 14; }
.st-console .kp:focus-visible .kp-face { stroke: var(--glass-red-ink); stroke-width: 5; }   /* 上面三條材質會蓋掉 bundle.css 的焦點框（10-24 評審），這裡補回 */
.st-console .kp-kick .kp-ring { stroke: var(--material-kit-4); }
.st-console .kp-kick .kp-t { fill: var(--felt); } .st-console .kp-kick .kp-k { fill: var(--material-kit-5); }
.st-console .kp.on .kp-face, .st-console .kp.pb .kp-face { filter: brightness(1.25) drop-shadow(0 0 8px var(--material-glow-90)); }
.st-console .kp-cym.on { animation: kwobble 520ms ease-out; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes kwobble { 18% { transform: rotate(-4deg); } 40% { transform: rotate(3deg); } 62% { transform: rotate(-1.6deg); } 82% { transform: rotate(.8deg); } }
/* 鼓組（手機鼓墊）：鈸＝黃銅圓、鼓＝米白鼓皮＋細紅烤漆框＋鍍鉻圈、大鼓＝米白鼓皮＋粗紅框
   （10-24 評審：整塊紅底白字跟正上方的「錄一段」鈕長得一樣 → 紅只留細框） */
.st-console .kpad, .st-console .kpad.on, .st-console .kpad.pb { font-size: 15px; border-color: transparent; border-radius: var(--radius-pill); color: var(--material-kit-6); background: radial-gradient(circle at 50% 40%, var(--material-kit-7) 0 50%, var(--material-kit-8) 85%) var(--material-drumhead); box-shadow: inset 0 0 0 4px var(--material-lacquer), inset 0 0 0 7px var(--chrome), 0 4px 8px -3px var(--material-shade-60); }
.st-console .kpad-cym, .st-console .kpad-cym.on, .st-console .kpad-cym.pb { color: var(--material-guitar-6); background: radial-gradient(circle at 50% 40%, var(--material-kit-9), var(--brass) 55%, var(--material-kit-10)); box-shadow: inset 0 0 0 1px var(--material-bars-44), inset 0 2px 0 var(--material-sheen-40), 0 4px 8px -3px var(--material-shade-60); }
.st-console .kpad-kick, .st-console .kpad-kick.on, .st-console .kpad-kick.pb { color: var(--material-bars-14); background: radial-gradient(circle, var(--material-kit-7) 0 55%, var(--material-kit-8) 85%); box-shadow: inset 0 0 0 7px var(--material-lacquer), inset 0 0 0 10px var(--chrome), 0 4px 8px -3px var(--material-shade-60); }
.st-console .kpad.on, .st-console .kpad.pb { filter: brightness(1.15); outline: 3px solid var(--glow-a); outline-offset: 2px; }

/* 6. 手鼓：牛皮鼓面、木頭鼓身、鍍鉻鼓框 */
.st-console .pad, .st-console .pad.on, .st-console .pad.pb { color: var(--material-conga-1); background: radial-gradient(circle at 50% 42%, var(--material-conga-2) 0 30%, var(--material-conga-3) 52%, var(--material-conga-4) 59%, var(--material-conga-5) 60.5% 68%, var(--material-conga-6) 69% 100%) var(--material-conga-3); box-shadow: 0 0 0 5px var(--chrome), 0 0 0 7px var(--material-conga-7), 0 10px 18px -6px var(--material-shade-60); }
.st-console .pad.on, .st-console .pad.pb { filter: brightness(1.08); box-shadow: 0 0 0 5px var(--chrome), 0 0 0 7px var(--material-conga-7), 0 0 0 10px var(--material-glow-75), 0 0 26px var(--material-glow-50); }
@media (prefers-reduced-motion: reduce) { .st-console .kp-cym.on, .st-console .gs.on i { animation: none; } .st-console .k, .st-console .bar { transition: none; } }

/* ---------- 英日文頁（2026-10-27 英日文接線）：英日文比中文長，不能照中文那樣整段不換行 ----------
   W6b 用 dist 量到英日文頁比螢幕寬（/en/studio/ 375→426、768→841；/ja/studio/ 375→479、768→894），撐寬的是樂器名（.tape）、大小聲那一列的「回到剛好」、
   卡拉 OK 與混音示範的步驟短名、整個不換行的按鈕。選擇器只對 lang="en"／"ja"：中文頁一字不動。
   英文字型之後才換成 Source Sans 3，字寬會變：這裡一律改成「放不下就換行」，不靠量到剛好放得下 */
:root:is([lang="en"], [lang="ja"]) #main .nw { white-space: normal; }   /* 不換行的詞只在中文頁用（英文在空白、日文在文節換行） */
:root:is([lang="en"], [lang="ja"]) #main :is(.btn, .chip) { white-space: normal; line-height: 1.2; max-width: 100%; }   /* 按鈕字放不下就折行（設計系統的按鈕是 nowrap、行高 1） */
:root:is([lang="en"], [lang="ja"]) :is(.st-pick, .tr-name, .st-band-name) .tape, :root:is([lang="en"], [lang="ja"]) #inst-name { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }   /* 樂器名（Hand drums (congas)、アコースティックギター）在格子裡折行 */
:root:is([lang="en"], [lang="ja"]) .st-pick .tape { text-align: center; }
:root:is([lang="en"], [lang="ja"]) .st-lvrow:not(.st-lvrow-kids) { flex-wrap: wrap; row-gap: var(--space-4); }   /* 「回到剛好」（Reset to "Just right"）放不下就排到下一行 */
:root:is([lang="en"], [lang="ja"]) .st-lv-reset { white-space: normal; }
:root:is([lang="en"], [lang="ja"]) .st-steps :is(.st-l, .st-s) { min-width: 0; white-space: normal; overflow-wrap: anywhere; }   /* 步驟名（Download、マイクテスト、メロディーが小さすぎる）在格子裡折行 */
@media (max-width: 360px) {   /* 小朋友的大小聲：「Volume／おおきさ」自己一行，三顆鈕之間照樣留 24 */
  :root:is([lang="en"], [lang="ja"]) .st-lvrow-kids { flex-wrap: wrap; row-gap: var(--space-8); }
  :root:is([lang="en"], [lang="ja"]) .st-lvrow-kids .st-kid-l { flex-basis: 100%; }
}