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